/* ========================================================================= Обекти — project pages, the availability board and the unit table. Loaded only on izo_project screens (see functions.php). Inherits every token from main.css; the only new ones are the four status colours, which are picked to survive next to the brand red without competing with it: free the palette's existing --sale green reserved the palette's existing --build amber sold a desaturated grey, deliberately recessive inquire ink, for things that carry no status of their own The brand red is never used for a status — it marks the next action, and a board where nine cells shout in accent has no next action left. ====================================================================== */ /* Status colouring is taken from the Пенемат board in ../izolacii/, verbatim. Two things make it work, and both were missing from the first attempt here: 1. Fill vs outline. Свободен and резервиран are SOLID blocks with white type; продаден is hollow — a grey rule and muted type, so a sold flat reads as absent rather than as a third colour competing for attention. 2. Muted hues on a warm ground. The first pass used the palette's --sale and --build darkened for contrast, which gave a saturated grass green against a mud brown on cool white — crude, and the two fought each other. Teal and wool are desaturated, sit a similar distance from the paper, and read as a considered pair rather than as traffic lights. Note: white on --resv is 3.0:1. That is Пенемат's own value, kept for the match; swap to #96682d if AA at cell size is required. */ .obekt, .obekti, .unit { --free: #2c6b78; --free-lift: #3d8b99; --resv: #b5813c; --resv-lift: #cd9a52; /* Darkened 30% on 2026-08-24 (was #9aa3a0) — the outline of a продаден or empty square was too faint to hold the facade together at cell size. 2.40:1 on --warm before, 4.55:1 now. Every hollow cell shares this one colour. They stay distinct by BORDER STYLE — solid продаден, dashed unknown, dotted empty — never by being faint, and never with an `opacity`: opacity blends the border back toward the ground and silently cancels any darkening of this token. That is what hid the first attempt at this change (.55 turned #6c7270 into #abadaa). */ --sold-line: #6c7270; --sold-ink: #6e7876; --inq: #35618e; /* Синьото на ИЗБОРА. Не е статус — затова не участва в легендата и не пълни, а огражда: изборът е нещо, което правиш ти, а запълването на квадратчето принадлежи на онова, което сградата вече е решила. Същият тон ползва и планът за „вие сте тук“ (--bp-current). */ --pick: #1668dc; --cell: clamp(28px, 2.9vw, 38px); } /* ------------------------------------------------------------------------- Buttons — two modifiers the base system did not need until now ---------------------------------------------------------------------- */ .btn--solid { background: var(--accent); color: #fff; } .btn--solid:hover { background: var(--accent-dk); color: #fff; } .btn--lg { padding: 1.25rem 2.5rem; font-size: .875rem; } @media (max-width: 640px) { .btn--lg { padding: 1rem 1.5rem; font-size: .8125rem; } } /* ------------------------------------------------------------------------- Breadcrumbs ---------------------------------------------------------------------- */ .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-block-end: 1.5rem; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: rgb(255 255 255 / .7); } .crumbs a { color: inherit; text-decoration: none; border-bottom: 1px solid rgb(255 255 255 / .3); } .crumbs a:hover { border-color: currentColor; } .crumbs span[aria-hidden] { opacity: .45; } .crumbs [aria-current] { color: #fff; font-weight: 700; } .obekti .crumbs { color: var(--muted); } .obekti .crumbs a { border-bottom-color: var(--line); } .obekti .crumbs [aria-current] { color: var(--ink); } /* Логото е плоча, по-висока от лентата, и умишлено се спуска под нея (виж .brand в main.css). Страниците с герой имат къде да я поемат; страницата на единицата няма — при 1440/1280/768 px плочата лягаше върху пътеката (най-зле -3.3 px). Пътеката се бута надолу с толкова, колкото се маха от разстоянието под нея, така че съдържанието отдолу не мърда. */ .unit .crumbs { margin-block-start: .75rem; margin-block-end: .75rem; } /* ------------------------------------------------------------------------- Project hero ---------------------------------------------------------------------- */ .obekt-hero { position: relative; display: flex; align-items: flex-end; min-height: clamp(420px, 56vh, 620px); padding-block: clamp(2.5rem, 6vw, 5rem); background: var(--ink) var(--hero-sm, var(--hero, none)) center / cover no-repeat; color: #fff; isolation: isolate; } /* Мобилно първо: най-малкият файл е стойността по подразбиране, а по-широкият екран го надписва. Обратното — да се сваля голямото и да се „поправя“ на телефон — не работи: браузърът вече е започнал да го тегли. Праговете са по ШИРИНАТА НА ФАЙЛА, не по точките на дизайна: 768px файл стига до 768px viewport при 1x и до 384px при 2x, тоест покрива всеки телефон. Оттам нататък 1024px, а пълният (1481px) — чак когато екранът наистина е широк. Файл, който го няма (кадър от темата, а не от библиотеката), пада на `--hero` и трите правила сочат едно и също. */ @media (min-width: 700px) { .obekt-hero { background-image: var(--hero-md, var(--hero, none)); } } @media (min-width: 1100px) { .obekt-hero { background-image: var(--hero, none); } } /* Екран с двойна плътност иска пълния файл по-рано — 768px кадър на 800px ретина екран е видимо мек точно там, където стои името на сградата. */ @media (min-width: 700px) and (min-resolution: 2dppx) { .obekt-hero { background-image: var(--hero, none); } } /* Two stops, not one: a flat overlay greys the render out, while a gradient keeps the top of the image readable and still lands enough density under the text for the stats to hold contrast. */ .obekt-hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(12 13 15 / .92) 0%, rgb(12 13 15 / .72) 38%, rgb(12 13 15 / .28) 100%); } .obekt-hero__inner { width: min(var(--maxw), 100%); margin-inline: auto; padding-inline: var(--gutter); } .obekt-hero__phase { display: inline-block; margin: 0 0 1rem; padding: .4rem .8rem; background: var(--accent); font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } /* 18ch used to cap this and it broke the longest name in the set — „Пенемат Лейк Вю бл. 7 и 8“ — leaving the „8“ alone on a second line. The cap is now wide enough for that title to sit on one line at desktop, and `text-wrap: balance` splits the remaining cases evenly instead of shedding a single character, which is what a wrap on a phone should look like. */ /* Тежестта и разредката са същите като на заглавието в хероя на началната страница (`.hero__title strong` в main.css: 800 / -.03em). Заглавието тук беше 300 и на същия екран, на същия тъмен кадър, изглеждаше като друг шрифт — тънък до „Свободни единици“ веднага под него. Смени ли се едното, смени се и другото. */ .obekt-hero__title { margin: 0 0 .5rem; font-size: clamp(1.875rem, 5vw, 3.75rem); font-weight: 800; letter-spacing: -.03em; max-width: 27ch; text-wrap: balance; } .obekt-hero__loc { margin: 0 0 1rem; font-size: clamp(.9375rem, 1.6vw, 1.125rem); color: rgb(255 255 255 / .8); } .obekt-hero__lede { margin: 0 0 2rem; max-width: 56ch; font-size: clamp(.9375rem, 1.5vw, 1.0625rem); line-height: 1.65; color: rgb(255 255 255 / .78); } .obekt-hero__stats { display: flex; flex-wrap: wrap; gap: 1rem clamp(1.5rem, 4vw, 3.5rem); margin: 0 0 2rem; padding: 0; list-style: none; } .obekt-hero__stats li { display: flex; flex-direction: column; gap: .15rem; } /* Същата тежест като заглавието над тях (800) — числата са другото, заради което се отваря страницата, и на 300 те висяха по-тънки от етикетите си. */ .obekt-hero__stats b { font-size: clamp(1.375rem, 3vw, 2rem); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; } /* Lifted teal — the same hue as a free cell, raised to hold on the dark scrim. Тежест не се задава: откакто всички числа са 800, отделното 700 тук правеше първото — най-важното — по-леко от съседите му. Цветът носи акцента. */ .obekt-hero__stats li:first-child b { color: #6fb6c4; } .obekt-hero__stats span { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: rgb(255 255 255 / .62); } .obekt-hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0; } /* Обявен обект — вместо трите числа стои един надпис. Той заема тяхното място в йерархията, затова носи техния ръст, не размера на етикет. */ .obekt-hero__soon { margin: 0 0 1.75rem; font-size: .8125rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #6fb6c4; } /* ------------------------------------------------------------------------- Section furniture ---------------------------------------------------------------------- */ .section__lede { margin: 0; font-size: clamp(.9375rem, 1.4vw, 1.0625rem); line-height: 1.65; color: var(--muted); } .section__aside { margin: 1.25rem 0 0; } .section__foot { display: flex; flex-wrap: wrap; gap: 1rem; margin: 2rem 0 0; } .section__foot--center { justify-content: center; margin-block-start: clamp(1.75rem, 3vw, 2.5rem); } .section--board { background: var(--warm); } /* Заглавие вляво, покана вдясно. Бутонът се подрежда по ДОЛНАТА линия на заглавния блок (`align-items: end`), защото окото чете заглавието отгоре надолу и го намира точно там, където спира. Под 52rem колоните падат една под друга: бутон, свит до два реда текст в 360px, е по-труден за натискане от същия бутон, застанал сам на ред. */ .section__head--cta { max-width: none; } .section__head--cta > div { max-width: 62ch; } .section__head--cta .btn { margin-block-start: 1.25rem; } @media (min-width: 52rem) { .section__head--cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem; align-items: end; } .section__head--cta .btn { margin-block-start: 0; white-space: nowrap; } } /* ------------------------------------------------------------------------- Етапите на строителството ---------------------------------------------------------------------- Лента, не колона. Стъпките са колони в една решетка, а линията между тях е ЕДНА линия през цялата лента, нарисувана като фон на пътечката — не по едно парче на стъпка. Парчетата се чупят на последната стъпка, на празен срок и на всяка промяна в броя; един фон не може. Точката е котвата на реда: тя стои на самата линия, а текстът виси под нея. Затова и линията е на височината на точката (`--dot`), а не в средата на клетката — центърът на клетката се мести с дължината на имената, центърът на точката не. Цветовете са същите като на таблото: тюркоаз за минало и сигурно, вълна за днешното, кух контур за онова, което още не е станало. Червеното (--accent) не влиза тук — то маркира следващото ДЕЙСТВИЕ, а етапът не е действие. ---------------------------------------------------------------------- */ .stages { --dot: 1.125rem; } .stages__track { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; } .stages__step { position: relative; padding-inline-start: calc(var(--dot) + .9rem); } /* Линията между две стъпки виси на ПЪРВАТА от тях и стига до точката на следващата — затова последната не рисува нищо. Псевдо-елемент, а не свой : линията не влиза в дървото за достъпност и четецът на екран не спъва в пет празни „графики“ между етапите. Изминатият участък носи цвета на завършеното: лентата показва докъде е стигнал строежът и когато никой не чете надписите. */ .stages__step::before { content: ""; position: absolute; inset-inline-start: calc(var(--dot) / 2 - .5px); inset-block: calc(.15rem + var(--dot) + .3rem) calc(-1.5rem - .15rem); width: 1px; background: var(--sold-line); } .stages__step:last-child::before { display: none; } .stages__step--done::before { background: var(--free); } .stages__dot { position: absolute; inset-inline-start: 0; inset-block-start: .15rem; width: var(--dot); height: var(--dot); border: 1px solid var(--sold-line); background: var(--paper); display: block; } .stages__step--done .stages__dot { background: var(--free); border-color: var(--free); } .stages__step--now .stages__dot { background: var(--resv); border-color: var(--resv); } /* Отметката е фон, не знак в текста: знак вътре в точката влиза в четеца на екран като буква насред изречението. */ .stages__step--done .stages__dot { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4l2.6 2.6L10 3.2' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: .7rem; } .stages__step--now .stages__dot::after { content: ""; position: absolute; inset: .3rem; background: #fff; } .stages__state { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sold-ink); } .stages__step--done .stages__state { color: var(--free); } .stages__step--now .stages__state { color: var(--resv); } .stages__name { display: block; margin-block-start: .2rem; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; } .stages__when { display: block; margin-block-start: .15rem; font-size: .875rem; color: var(--muted); } /* Водоравно чак когато има място за него. Пет колони в 360px дават пет нечетими ивици, а водоравен скрол крие точно онова, което се търси — къде е сега. Затова под 48rem лентата си остава колона. */ @media (min-width: 48rem) { .stages__track { grid-template-columns: repeat(var(--stages-n, 5), minmax(0, 1fr)); gap: 0; } .stages__step { padding-inline: 0 1.25rem; padding-block-start: calc(var(--dot) + .9rem); } /* Същата линия, легнала: от центъра на точката на този етап до точката на следващия. Трите оси се пренаписват изцяло, защото `inset-block` отгоре държи и горе, и долу. */ .stages__step::before { inset-inline: calc(var(--dot) / 2) 0; inset-block: calc(var(--dot) / 2 - .5px) auto; width: auto; height: 1px; } .stages__dot { inset-block-start: 0; } } .stages__note { margin-block-start: clamp(1.5rem, 2.6vw, 2.25rem); padding-block-start: 1.25rem; border-block-start: 1px solid var(--line); max-width: 70ch; color: var(--muted); line-height: 1.7; } .stages__note p { margin: 0 0 .75rem; } .stages__note p:last-child { margin-block-end: 0; } /* Секцията е на хартия, не на --paper-alt: в светлата гама `--paper-alt` и `--warm` са ЕДИН цвят (skin-light.css), тоест лентата щеше да се слее с таблото над нея и двата въпроса — „кое е свободно“ и „докъде е строежът“ — щяха да изглеждат като един. Виж коментара при `.stages__dot`: кухата точка се пълни със същия фон, затова и тя е на `--paper`. */ /* ------------------------------------------------------------------------- The board ---------------------------------------------------------------------- */ .board__bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-block-end: 1.5rem; } /* Both groups ride on one line — there is room for them — and drop to their own rows only when the bar actually runs out of width. */ .filters { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .625rem 2rem; } .filters__row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; } .filters__lbl { min-width: 0; font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .chip { padding: .5rem 1rem; border: 1px solid var(--line); background: var(--paper); color: var(--text); font: inherit; font-size: .8125rem; cursor: pointer; transition: background .12s, border-color .12s, color .12s; } .chip:hover { border-color: var(--ink); } .chip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; } .chip__short { display: none; } @media (max-width: 560px) { .filters { flex-direction: column; align-items: stretch; gap: .625rem; } .filters__lbl { min-width: 100%; } .chip__long { display: none; } .chip__short { display: inline; } .chip { min-width: 2.5rem; text-align: center; } } .board__count { margin: 0; font-size: .875rem; color: var(--muted); } .board__count b { font-size: 1.5rem; font-weight: 700; color: var(--free); } /* Parking and garages are listed here rather than drawn on the board — see the note in parts/board.php. Every extra unit, priced and status-tracked, the same as the price list, just without the sort/search/filter chrome that table needs for 200 rows and this one never will. */ .board__extras { margin: 1.5rem 0 0; padding-block-start: 1.25rem; border-top: 1px solid var(--line); } .board__extras__lede { margin: 0 0 1rem; font-size: .875rem; color: var(--muted); } .board__extras__lede b { color: var(--text); } /* Кутията е с таван, а не по височината на списъка. Дотогава „Бял Шоколад“ имаше 22 паркоместа и гаража и таблицата се разгъваше спокойно под схемата. Ценоразписът от 20.07.2026 донесе истинските 177 на „Пенемат“ — 15 надземни гаража, 94 подземни и 68 външни паркоместа — и едностраничникът на обекта се превърна в 177 реда „Гараж“, под които схемата на сградата, „За проекта“ и схемите на плащане останаха на четири екрана разстояние. Нищо не е скрито: списъкът е цял, само стои в собствен скрол. `overscroll-behavior: contain` — иначе допирът, стигнал до края на кутията, продължава да върти страницата под нея и на телефон изглежда като че екранът е подскочил. */ .board__extras__scroll { overflow: auto; max-height: 26rem; overscroll-behavior: contain; border: 1px solid var(--line); background: var(--paper); } .extras-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .8125rem; } /* Залепено заглавие — в кутия със скрол колоните „Цена“ и „Статус“ иначе излизат от екрана още на десетия ред и надолу таблицата е четири колони числа без имена. */ .extras-table th { position: sticky; top: 0; z-index: 1; padding: .65rem .75rem; background: var(--ink); color: #fff; font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-align: left; white-space: nowrap; } .extras-table th[data-align="r"] { text-align: right; } .extras-table td { padding: .6rem .75rem; border-bottom: 1px solid var(--line); vertical-align: middle; } .extras-table td[data-align="r"] { text-align: right; font-variant-numeric: tabular-nums; } .extras-table tbody tr:last-child td { border-bottom: 0; } .extras-table tbody tr:hover td { background: color-mix(in srgb, var(--free) 12%, var(--paper)); } .board__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); align-items: start; } @media (min-width: 1024px) { .board__layout { grid-template-columns: minmax(0, 1fr) 17rem; } } .board__blocks { display: flex; flex-wrap: wrap; /* Cards size to their widest floor rather than to an equal share: a block with eight units per storey and one with four are different buildings, and stretching both to one width is what made the wide one wrap its floors into two rows — at which point the row no longer reads as a floor. */ /* Top, so every heading sits directly on top of the building it names. The blocks are of very different heights — блок 6 is twelve storeys, блок 5 is six — and two alternatives were tried for the space that leaves under the short ones. Bottom-aligning the cards gave a proper shared ground line and scattered the headings down the page. Stretching the cards and pushing only the stacks down kept the headings in a row but left блок 5's title floating six floors above its own building. Both traded a real problem for a worse one: the heading is the link into that block's price list, so it has to stay both scannable AND attached to its block. The empty space below a short building is the cheapest of the three costs. */ align-items: flex-start; gap: clamp(1.5rem, 3.5vw, 3rem); /* Grid and flex items default to min-width:auto, which lets a wide block push the whole page sideways instead of scrolling inside its own card. */ min-width: 0; } .bldg { flex: 0 1 auto; max-width: 100%; min-width: 0; } .bldg__head { margin-block-end: 1rem; } .bldg__name { margin: 0 0 .15rem; font-size: 1rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; } /* The heading is a link into the block's price list. Underlining it would put a rule through a 1rem uppercase title and read as decoration; the arrow does the affording instead, and only moves on hover so the resting state stays a heading. */ .bldg__link { display: inline-flex; align-items: baseline; gap: .4rem; color: inherit; text-decoration: none; } /* Visible at rest, not on hover. „Make БЛОК 5 clickable“ was the ask, and an affordance that only appears once the pointer is already on it does not tell anyone the title is a link — least of all on a phone. */ .bldg__go { display: inline-block; font-size: .8125rem; color: var(--accent); opacity: .55; transition: opacity .14s, transform .14s; } .bldg__link:hover { color: var(--accent); } .bldg__link:hover .bldg__go, .bldg__link:focus-visible .bldg__go { opacity: 1; transform: translateX(.15rem); } .bldg__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .bldg__meta { margin: 0; font-size: .75rem; color: var(--muted); } .bldg__free { color: var(--free); font-weight: 700; } .bldg__nodata { color: var(--muted); } /* ── Вход stacks ─────────────────────────────────────────────────────────── A block is a building, a вход is a staircase, and the flats of two staircases do not share a floor row. Блок 5 and блок 8 get two stacks each under one heading; блок 6 and блок 7 get one and no вход label, so a single-entrance building carries no vocabulary it does not need. */ .bldg__entrances { display: flex; align-items: flex-start; gap: 1rem; min-width: 0; } .entr { min-width: 0; } .entr__name { margin: 0 0 .4rem 2.35rem; /* clears the floor-number gutter */ font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .board__note { margin: 1.25rem 0 0; padding-block-start: 1rem; border-top: 1px solid var(--line); font-size: .8125rem; line-height: 1.6; color: var(--muted); max-width: 62ch; } .board__note b { color: var(--text); } /* No scroller: the cells above shrink instead. Kept as `hidden` rather than removed so an unforeseen wide row clips to the card instead of dragging the page sideways. */ .bldg__floors { display: flex; flex-direction: column; gap: .3rem; overflow-x: hidden; } .floor { display: flex; align-items: center; gap: .6rem; } .floor__no { flex: 0 0 1.75rem; font-size: .6875rem; font-weight: 700; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; } /* minmax(0, --cell): tracks sit at the full cell size when there is room and shrink to fit when there is not, so a floor can never be wider than the card holding it. Fixed `var(--cell)` tracks were what pushed блок 8's eight-wide floors past the edge and handed every block its own horizontal scrollbar on an iPhone. */ .floor__units { display: grid; grid-template-columns: repeat(var(--cols, 6), minmax(0, var(--cell))); gap: 3px; flex: 1 1 auto; min-width: 0; } .floor--loose .floor__no { font-size: .5625rem; letter-spacing: .04em; } /* The cell. Colour carries the status, the glyph carries the room count — two channels, so the board is still readable in greyscale and to a colour-blind buyer, who is roughly one man in twelve. */ .cell { display: grid; place-items: center; width: 100%; max-width: var(--cell); aspect-ratio: 1; border: 1px solid transparent; font-size: .6875rem; font-weight: 700; text-decoration: none; transition: transform .14s, box-shadow .14s, opacity .14s; } .cell__glyph { line-height: 1; } .cell--free { background: var(--free); color: #fff; } .cell--reserved { background: var(--resv); color: #fff; } .cell--inquire { background: var(--inq); color: #fff; } /* Hollow on purpose — a sold flat should read as absent, not as a third colour competing with the two that are still for sale. */ .cell--sold { background: transparent; border-color: var(--sold-line); color: var(--sold-ink); } .cell--unknown { background: transparent; border-color: var(--sold-line); color: var(--muted); border-style: dashed; } /* An empty cell is a flat we know exists and know nothing else about. Drawn so the building reads whole, and deliberately the quietest thing on the board: no fill, no glyph, a dotted rule lighter than продаден's. It must not read as a fourth status — it is the absence of one. This has to sit AFTER .cell, not with the other modifiers further up: both selectors are 0,1,0, .cell sets `border: 1px solid transparent`, and whichever comes last wins. Written above, the border silently vanished and all 64 cells rendered as holes in the facade. Same trap as README #3, without the media query to blame. */ .cell--empty { background: transparent; border: 1px dotted var(--sold-line); cursor: help; } /* Hover firms the dotted rule into a solid one. It used to lift the opacity, which no longer exists — leaving a border-color swap here would have been a no-op, since the cell already carries that colour. */ .cell--empty:hover { border-style: solid; } /* A hard offset rather than a blur: the board is a flat, drawn thing and a soft drop-shadow makes it look like a web widget sitting on top of one. */ .cell:hover, .cell:focus-visible { transform: translateY(-2px); box-shadow: 0 4px 0 0 var(--ink); outline: none; z-index: 2; } .cell.is-dim { opacity: .16; pointer-events: none; } /* Phone AND tablet. Above 1024 the preview sidebar appears and the blocks have room to flow; below it they are paired by the grid further down, because letting them wrap freely at these widths put three blocks on one row and orphaned the fourth on the next. */ @media (max-width: 1023px) { /* With the block on its own row there is far more width than the desktop cell size spends, so the cell grows to fill it. The track is sized from the row's OWN width (`100%` here resolves against .floor__units) divided by --cols-max — the widest floor anywhere on the board, set in parts/board.php. So every block gets an identical cell and the widest one lands flush with the card edge, while narrower blocks keep that cell size and simply end sooner, exactly as they do on desktop. Deriving it from `100vw` instead was off by the width of the scrollbar gutter, which left the blocks 1–2px apart in cell size. */ .floor__units { /* flex-basis 0, not auto: with `auto` the grid's inline size stays indefinite, the percentage below resolves to `auto`, and the tracks collapse to min-content — which is why the cells sat at 28px in a 305px row. A definite basis makes the percentage resolvable. */ flex: 1 1 0%; /* min(46px, …): the track is capped at the same value as the cell. Without it a wide tablet column gives an 86px track holding a 46px cell, and the flats drift apart inside their own floor — a row of islands rather than a storey. */ grid-template-columns: repeat(var(--cols, 6), minmax(0, min(46px, calc( (100% - (var(--cols-max, 6) - 1) * 3px) / var(--cols-max, 6) )))); } /* The desktop cap (28px at this width) would hold the cell inside the wider track the rule above creates, so it is raised rather than removed. Some projects have only three units on their widest floor — Пенемат 5 и 6, Бял Шоколад — and with no cap at all those fill the row as 100px squares, which reads as a chart, not a building. 46px is a comfortable touch target and roughly the density of the desktop board. */ .cell { max-width: 46px; } } /* A unit with no published price is still real stock — it reads as available but is marked, so nobody quotes a number that does not exist. */ .cell { position: relative; } .cell--nopx::after { content: ""; position: absolute; inset-block-start: 2px; inset-inline-end: 2px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .6; } /* ---------- preview panel ---------- */ .preview { position: sticky; top: calc(var(--header-h) + 1rem); display: flex; flex-direction: column; padding: 1.25rem; background: var(--paper); border: 1px solid var(--ink); } @media (max-width: 1023px) { .preview { position: static; } .preview__empty .preview__hint { display: none; } } /* Панелът има ТРИ височини: празен (легендата), единица с цена и единица без цена — а цената и цената на квадрат са два реда, които просто ги няма, щом няма число (виж `setLine` в objects.js). Докато мишката минава по схемата, кутията скачаше нагоре-надолу при всяко квадратче, а с нея и копчето под нея (Gabe, 15.09.2026: „very annoying bug… everything jumps up and down“). Затова височината е закована тук, върху обвивката, а не се кърпи на реда с цената: празното състояние е третата височина и то също участва. Стойността е таванът на трите, измерен в колоната от 17rem; по-високо съдържание (дълго име, друг език) пак я разтяга — това е под, не таван. */ @media (min-width: 1024px) { .preview { min-height: 28.5rem; } /* Копчетата „Смени статуса“ съществуват само за редактор и се появяват само при ИЗБОР — за влязъл човек панелът е с един ред по-висок и без този ред щеше да подскача точно както на посетител. */ .preview:has(.pick-admin) { min-height: 35rem; } /* Заковаването на кутията пази ръба ѝ, но не и копчето: без цена всичко над него се вдига със 79px. Затова картата се разпъва по височината на панела, а пътят към единицата стои долу — на едно и също място за всяко квадратче. */ /* `:not([hidden])` не е украса: `display: flex` тук бие `[hidden] { display: none }` от main.css при равна специфичност и по-късен ред, тоест скритата карта щеше да се рисува върху празното състояние. */ .preview__card:not([hidden]), .preview__empty:not([hidden]) { flex: 1 1 auto; display: flex; flex-direction: column; } .preview__card [data-p-link] { margin-block-start: auto; } /* Легендата е по-къса от картата и заковаването ѝ оставяше една трета бяло отдолу. Изречението под нея слиза на дъното — бележка под линия, а не изтървано пространство. */ .preview__empty .preview__note { margin-block-start: auto; } } .preview__hint { margin: 0 0 1.25rem; font-size: .875rem; color: var(--muted); line-height: 1.5; } .legend { display: flex; flex-direction: column; gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; } .legend li { display: flex; align-items: center; gap: .6rem; font-size: .8125rem; color: var(--text); } .swatch { width: 15px; height: 15px; border: 1px solid transparent; flex: none; } .swatch--free { background: var(--free); } .swatch--reserved { background: var(--resv); } .swatch--inquire { background: var(--inq); } .swatch--sold { background: transparent; border-color: var(--sold-line); } .swatch--unknown { background: transparent; border-color: var(--sold-line); border-style: dashed; } /* After .swatch for the same reason .cell--empty is after .cell. */ .swatch--empty { background: transparent; border-color: var(--sold-line); border-style: dotted; } .preview__note { margin: 0; font-size: .75rem; color: var(--muted); line-height: 1.5; } .preview__code { margin: 0 0 .1rem; font-size: 1.25rem; font-weight: 700; } .preview__rooms { margin: 0 0 .6rem; font-size: .875rem; color: var(--muted); } .preview__status, .sheet__status { display: inline-block; margin: 0 0 1rem; padding: .3rem .7rem; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .preview__status.is-free, .sheet__status.is-free { background: var(--free); color: #fff; } .preview__status.is-reserved, .sheet__status.is-reserved { background: color-mix(in srgb, var(--resv) 26%, #fff); color: #6b4a15; } .preview__status.is-inquire, .sheet__status.is-inquire { background: color-mix(in srgb, var(--inq) 16%, #fff); color: var(--inq); } .preview__status.is-sold, .sheet__status.is-sold { background: transparent; color: var(--sold-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sold-line) 70%, transparent); } .preview__status.is-unknown, .sheet__status.is-unknown { background: var(--paper-alt); color: var(--muted); } .preview__specs, .sheet__specs { margin: 0 0 1rem; display: flex; flex-direction: column; gap: .4rem; } .preview__specs > div, .sheet__specs > div { display: flex; justify-content: space-between; gap: 1rem; padding-block-end: .4rem; border-bottom: 1px solid var(--line); font-size: .8125rem; } .preview__specs dt, .sheet__specs dt { color: var(--muted); } .preview__specs dd, .sheet__specs dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 700; } .preview__price, .sheet__price { margin: 0; font-size: 1.5rem; font-weight: 300; font-variant-numeric: tabular-nums; } .preview__rate, .sheet__rate { margin: .1rem 0 1rem; font-size: .75rem; color: var(--muted); } /* ---------- touch sheet ---------- */ .sheet { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 60; padding: var(--gutter); background: var(--paper); border-top: 2px solid var(--ink); box-shadow: 0 -8px 32px rgb(0 0 0 / 18%); animation: sheet-up .16s ease-out; } @keyframes sheet-up { from { transform: translateY(100%); } } @media (prefers-reduced-motion: reduce) { .sheet { animation: none; } } @media (min-width: 1024px) { .sheet { display: none; } } .sheet__panel { position: relative; width: min(var(--maxw), 100%); margin-inline: auto; } .sheet__close { position: absolute; inset-block-start: -.25rem; inset-inline-end: 0; width: 2.25rem; height: 2.25rem; border: 0; background: none; font-size: 1.75rem; line-height: 1; cursor: pointer; color: var(--muted); } .sheet__code { margin: 0 0 .1rem; font-size: 1.25rem; font-weight: 700; } .sheet__rooms { margin: 0 0 .6rem; font-size: .875rem; color: var(--muted); } .btn--block { display: flex; justify-content: center; width: 100%; } /* ------------------------------------------------------------------------- The table ---------------------------------------------------------------------- */ .utable__bar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-block-end: 1.25rem; } .utable__search input { min-width: min(22rem, 70vw); padding: .7rem .9rem; border: 1px solid var(--line); background: var(--paper); font: inherit; font-size: .875rem; } .utable__search input:focus { outline: 2px solid var(--ink); outline-offset: -2px; } .utable__chips { display: flex; flex-wrap: wrap; gap: .5rem; } .utable__count { margin: 0 0 0 auto; font-size: .8125rem; color: var(--muted); } /* Keeping the scrollbar gutter reserved stops the page shifting sideways when a filter shortens the list enough for the vertical scrollbar to disappear. */ html { scrollbar-gutter: stable; } /* Блок and Тип sit on one shared line — two filter groups, not two rows. The line itself wraps to a second row only once combined width runs out; each group wraps its own chips first. */ .utable__filterline { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem 2rem; margin-block-end: 1rem; } .utable__blocks { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; } .tablescroll { overflow-x: auto; border: 1px solid var(--line); background: var(--paper); } table.utable { width: 100%; /* Fixed, not auto — see the note in parts/unit-table.php. Column widths come from the header cells and never depend on which rows are visible, so filtering and searching no longer make the table jump. */ table-layout: fixed; min-width: 1080px; border-collapse: collapse; font-size: .875rem; } .utable__th { position: sticky; top: 0; z-index: 3; padding: 0; background: var(--ink); color: #fff; white-space: nowrap; } .utable__sort { display: flex; align-items: center; gap: .4rem; width: 100%; padding: .85rem .75rem; border: 0; background: none; color: inherit; font: inherit; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; } .utable__th--r .utable__sort { justify-content: flex-end; } .utable__th--c .utable__sort { justify-content: center; } .utable__sort:hover { background: rgb(255 255 255 / .1); } .utable__arrow { width: 0; height: 0; border-inline: 4px solid transparent; border-block-end: 5px solid currentColor; opacity: 0; } .utable__th[aria-sort="ascending"] .utable__arrow { opacity: 1; } .utable__th[aria-sort="descending"] .utable__arrow { opacity: 1; transform: rotate(180deg); } .utable__td { padding: .7rem .75rem; border-bottom: 1px solid var(--line); background: var(--row-bg); } .utable__td--r { text-align: right; font-variant-numeric: tabular-nums; } .utable__td--c { text-align: center; font-variant-numeric: tabular-nums; } /* The row carries the status, not a shouting chip. Free is the clean, full-contrast row marked only by a teal edge — „nothing in the way“. Reserved takes a warm wash. Sold recedes on three axes at once: cool ground, muted text, no edge. Straight from the Пенемат table, whose own note explains why: a solid orange „Резервиран“ next to a solid teal „Свободен“ made the two compete and pulled the eye toward the flats you cannot buy. */ .utable tbody tr { --row-bg: var(--paper); --row-edge: transparent; background: var(--row-bg); } .utable tbody tr.is-free { --row-edge: var(--free); } .utable tbody tr.is-reserved { --row-bg: color-mix(in srgb, var(--resv) 13%, var(--paper)); --row-edge: var(--resv); } .utable tbody tr.is-sold { --row-bg: color-mix(in srgb, var(--ink) 8%, var(--paper)); color: color-mix(in srgb, var(--ink) 48%, var(--paper)); } .utable tbody tr:hover { --row-bg: color-mix(in srgb, var(--free) 18%, var(--paper)); --row-edge: var(--ink); } .utable tbody tr:hover .utable__td { color: var(--ink); } /* The edge lives on the first cell rather than on the row, so it survives the cell backgrounds painting over it. */ .utable__row > .utable__td:first-child { box-shadow: inset 3px 0 0 0 var(--row-edge); } .utable__row.is-hidden { display: none; } .utable__code { font-weight: 700; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); } .utable__code:hover { border-color: var(--accent); color: var(--accent); } .utable__kind { display: block; font-size: .6875rem; color: var(--muted); } /* Fixed columns cannot grow for a long value, so anything unexpected wraps inside its cell rather than spilling over the next one. */ .utable__td { overflow-wrap: anywhere; } .utable__td--r, .utable__td--c { overflow-wrap: normal; } .pill { display: inline-block; padding: .25rem .6rem; font-size: .6875rem; font-weight: 700; letter-spacing: .04em; white-space: nowrap; } /* Weight tracks importance: the loudest chip is always the one you can act on. Free is the only solid fill, reserved is a tint, sold is barely there. */ .pill--free { background: var(--free); color: #fff; } .pill--reserved { background: color-mix(in srgb, var(--resv) 26%, #fff); color: #6b4a15; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--resv) 55%, transparent); } .pill--inquire { background: color-mix(in srgb, var(--inq) 16%, #fff); color: var(--inq); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inq) 45%, transparent); } .pill--sold { background: transparent; color: var(--sold-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sold-line) 70%, transparent); } .pill--unknown { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); } .utable__go { font-size: .75rem; font-weight: 700; color: var(--accent); text-decoration: none; white-space: nowrap; } .utable__go:hover { text-decoration: underline; } .utable__empty { margin: 1.5rem 0 0; color: var(--muted); } /* ------------------------------------------------------------------------- Payment schemes + facts ---------------------------------------------------------------------- */ .schemes { display: grid; gap: 1rem; margin: 1.5rem 0 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); } .schemes__item { padding: 1.25rem 1.5rem; background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--accent); } .schemes__no { display: block; margin-block-end: .35rem; font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); } .schemes__text { font-size: .9375rem; line-height: 1.6; } .factgrid { display: grid; gap: 0 clamp(1.5rem, 4vw, 3rem); margin: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); } .factgrid__row { display: flex; justify-content: space-between; gap: 1rem; padding-block: .8rem; border-bottom: 1px solid var(--line); } .factgrid dt { color: var(--muted); font-size: .875rem; } .factgrid dd { margin: 0; font-weight: 700; font-size: .875rem; text-align: right; } .obekt__body { margin-block-start: 2rem; max-width: 68ch; line-height: 1.7; } .obekt__source { width: min(var(--maxw), 100%); margin: 0 auto; padding: 1.5rem var(--gutter) 3rem; font-size: .75rem; color: var(--muted); line-height: 1.6; } .obekt__source a { color: inherit; } /* ------------------------------------------------------------------------- Contact band ---------------------------------------------------------------------- */ .obekt-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.75rem 2rem; } .obekt-cta__title { margin: 0 0 .5rem; font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 300; } .obekt-cta__lede { margin: 0; max-width: 46ch; color: rgb(255 255 255 / .72); line-height: 1.6; } .obekt-cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; } /* ------------------------------------------------------------------------- Archive — Текущи обекти ---------------------------------------------------------------------- */ /* Главата е СВИТА (Gabe, 04.09.2026: „the white space is criminal“). Дотук над пътеката стояха 4rem празно, под нея табовете, а списъкът тръгваше след още 3.5rem — първият обект падаше под линията на сгъване на лаптоп. Горното поле е нула, а пътеката се мести НАДЯСНО вместо надолу: червеният блок с логото виси ~42px под лентата и оставя точно толкова висока ивица, в която дотук нямаше нищо. Пътеката е един ред от 17px и се побира в нея. Отместването е `--brand-w` + разстоянието на самата лента, тоест числото иде от логото и се движи с него — виж :root в main.css. */ .obekti-head { /* Нула отгоре: разчистването на надвисналото лого го носи самата пътека — `.crumbs--top` в main.css. */ padding-block: 0 clamp(1rem, 2vw, 1.5rem); background: var(--paper-alt); border-bottom: 1px solid var(--line); } /* ⚠️ `.crumbs` носи `margin-block-end: 1.5rem` от main.css — там пътеката стои в поток и си пази въздух под себе си. Тук тя е ред във flex-контейнер и разстоянието го дава `gap`; двете се събираха в 44px между пътеката и табовете. */ .obekti-head .crumbs { margin-block-end: 0; } /* Числата са с тегло 300 и до 36px — при подразбираща се височина на реда всяко носи по 18px въздух над цифрата, който изглежда като поле и се опитваш да го махнеш от полетата, където го няма. */ .obekti-head__stats b { line-height: 1.1; } .obekti-head__inner, .obekti-grid { width: min(var(--maxw), 100%); margin-inline: auto; padding-inline: var(--gutter); } /* Boxed, not underlined: these read as the page's primary switch now that the H1 is gone, so they need button-strength click affordance, not a quiet text-link treatment. Fill/border echo .pfilter--chips; ink for the active state, never accent — accent is reserved for the next action, not a status the visitor is already looking at. */ .obekti-head__tabs { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0 0 1.75rem; } /* Свити на 04.09.2026 заедно с останалата глава. Бяха `1rem 1.75rem` при 1rem шрифт — два бутона за 539px. Заедно с числата това е 1251px в 1200px поле, тоест на лаптоп числата падаха на свой ред и главата растеше със 100px без да е добавила нищо. */ .obekti-head__tabs a { display: inline-flex; align-items: center; padding: .8rem 1.35rem; font-size: .9375rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text); text-decoration: none; background: var(--paper); border: 1px solid var(--line); transition: background .15s ease, border-color .15s ease, color .15s ease; } .obekti-head__tabs a:hover { border-color: var(--ink); } .obekti-head__tabs a[aria-current="page"] { background: var(--ink); color: #fff; border-color: var(--ink); } .obekti-head__stats { display: flex; flex-wrap: wrap; gap: 1rem clamp(1.5rem, 4vw, 3rem); margin: 0; padding: 0; list-style: none; } .obekti-head__stats li { display: flex; flex-direction: column; } .obekti-head__stats b { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 300; font-variant-numeric: tabular-nums; } .obekti-head__stats li:nth-child(2) b { color: var(--free); font-weight: 700; } .obekti-head__stats span { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .obekti-grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); padding-block: clamp(2rem, 4vw, 3.5rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); } .ocard { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); overflow: hidden; } .ocard__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-alt); } /* Out of flow on purpose. An in-flow img with height:100% resolves against a parent whose height comes from aspect-ratio — circular, so the browser drops the ratio and the card takes the photo's own proportions instead. That is what left the four renders at four different heights in one row. */ .ocard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ocard__phase { position: absolute; inset-block-start: 0; inset-inline-start: 0; padding: .4rem .8rem; background: var(--accent); color: #fff; font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .ocard__body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem; } .ocard__title { margin: 0 0 .25rem; font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; } .ocard__title a { color: inherit; text-decoration: none; } .ocard__title a:hover { color: var(--accent); } .ocard__loc { margin: 0 0 .75rem; font-size: .8125rem; color: var(--muted); } .ocard__lede { margin: 0 0 1.25rem; font-size: .875rem; line-height: 1.6; color: var(--muted); } .ocard__avail { margin-block-end: 1rem; } .ocard__bar { height: 6px; background: #e9e9e7; overflow: hidden; } .ocard__fill { display: block; height: 100%; background: var(--free); } .ocard__free { margin: .5rem 0 0; font-size: .8125rem; color: var(--muted); } .ocard__free b { font-size: 1.125rem; color: var(--free); } /* Знаменателят е дроб, не изречение: „79 свободни / 177“. По-блед от думата пред него — той е мащабът, не новината, и окото трябва да спре на 79. `nowrap` държи чертата и числото заедно, ако редът се пречупи. */ .ocard__free-tot { white-space: nowrap; color: var(--line-ink, #9a9a95); } .ocard__facts { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0 0 1.25rem; } .ocard__facts > div { display: flex; flex-direction: column; } .ocard__facts dt { font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .ocard__facts dd { margin: 0; font-size: .9375rem; font-weight: 700; font-variant-numeric: tabular-nums; } .ocard__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: auto 0 0; } .ocard__actions .btn { padding: .8rem 1.25rem; font-size: .6875rem; } .ocard__actions .btn--ghost { color: var(--ink); border-color: var(--line); } .ocard__actions .btn--ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); } /* Обект „очаквайте скоро“: няма лента, няма факти, няма бутон към наличности. Картата държи същата височина като съседките си, за да не се разкъса редът в мрежата — затова текстът е с `margin: auto 0` и бута действията надолу. */ /* Без изображение медията е просто сива дупка и картата изглежда счупена. Диагоналната щриховка казва „тук ще има снимка“, вместо да мълчи. */ .ocard--soon .ocard__media { min-height: 13rem; background: repeating-linear-gradient( 135deg, var(--paper-alt) 0 10px, #ececea 10px 20px ); } .ocard--soon .ocard__media img { filter: saturate(.35); } .ocard__phase--soon { background: var(--ink); } .ocard__soon { margin: 0 0 1.25rem; font-size: .875rem; line-height: 1.6; color: var(--muted); } .obekti-empty { padding: 3rem var(--gutter); color: var(--muted); } /* ------------------------------------------------------------------------- Print — the table is the thing people print ---------------------------------------------------------------------- */ @media print { .site-header, .site-footer, .obekt-hero__cta, .utable__bar, .section__aside, .section__foot, .sheet, .preview, .drawer, .lbox { display: none !important; } .obekt-hero { min-height: auto; color: #000; background: none; } .obekt-hero__scrim { display: none; } .crumbs { display: none; } .obekt-hero__title, .obekt-hero__loc, .obekt-hero__stats { color: #000; } .tablescroll { overflow: visible; border: 0; } .utable__th { position: static; background: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .utable { font-size: 9pt; } .utable__row { break-inside: avoid; } .utable-preview { max-height: none; } .utable-preview__fade { display: none; } } /* ------------------------------------------------------------------------- Unit page ---------------------------------------------------------------------- */ /* Tokens come from the shared block at the top — .unit is listed there too. */ /* Нула отгоре по същата причина като при „Обекти“: пътеката носи собственото си разчистване и над 1101px стои вдясно от логото, вместо да бута заглавието на гаража надолу. */ .unit { padding-block: 0 clamp(3rem, 6vw, 5rem); } .crumbs--light { color: var(--muted); } .crumbs--light a { border-bottom-color: var(--line); } .crumbs--light [aria-current] { color: var(--ink); } .unit__grid { display: grid; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; } @media (min-width: 900px) { .unit__grid { grid-template-columns: minmax(0, 1fr) 20rem; } } .unit__eyebrow { margin: 0 0 .35rem; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); } .unit__title { margin: 0 0 1rem; font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 300; letter-spacing: -.02em; } .unit__status { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 0 0 2rem; } .unit__inferred { font-size: .75rem; color: var(--muted); max-width: 40ch; line-height: 1.5; } .unit__specs { display: grid; gap: 0 clamp(1.5rem, 4vw, 3rem); margin: 0 0 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); } .unit__spec { display: flex; justify-content: space-between; gap: 1rem; padding-block: .8rem; border-bottom: 1px solid var(--line); } .unit__spec dt { color: var(--muted); font-size: .875rem; } .unit__spec dd { margin: 0; font-size: .875rem; font-weight: 700; font-variant-numeric: tabular-nums; } .unit__plan { margin: 0 0 2.5rem; } /* Планът е висок и тесен (портрет ~380x850), затова се ограничава по височина, не по ширина — иначе изяжда цял екран и бута цената под линията на сгъване. */ .unit__plan-img { display: block; max-width: 100%; height: auto; max-height: 70vh; width: auto; margin: 0 auto; background: #fff; border-radius: 6px; border: 1px solid var(--line, #e4e4e4); padding: .5rem; } .unit__plan a { display: block; } .unit__h2 { margin: 2.5rem 0 1rem; font-size: clamp(1.125rem, 2vw, 1.5rem); font-weight: 700; letter-spacing: -.01em; } .unit__h2 + .schemes { margin-top: 0; } .unit__siblings { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); } .sib { display: grid; gap: .15rem; padding: .8rem 1rem; border: 1px solid var(--line); border-left: 3px solid var(--line); background: var(--paper); text-decoration: none; color: var(--text); } .sib:hover { border-color: var(--ink); } .sib b { font-size: 1rem; } .sib span { font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; } .sib__status { font-weight: 700; } .sib--free { border-left-color: var(--free); } .sib--free .sib__status { color: var(--free); } .sib--reserved { border-left-color: var(--resv); } .sib--reserved .sib__status { color: var(--resv); } .sib--sold { border-left-color: var(--sold-line); opacity: .72; } .sib--sold .sib__status { color: var(--sold-ink); } .unit__side { display: grid; gap: 1rem; position: sticky; top: calc(var(--header-h) + 1rem); } @media (max-width: 899px) { .unit__side { position: static; } } .unit__card { padding: 1.5rem; background: var(--paper-alt); border: 1px solid var(--line); } .unit__card--quiet { background: var(--paper); } .unit__price { margin: 0; font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 300; font-variant-numeric: tabular-nums; } .unit__price--none { font-size: 1.25rem; color: var(--muted); } .unit__rate { margin: .15rem 0 0; font-size: .8125rem; color: var(--muted); } .unit__price2 { margin: .5rem 0 0; font-size: .9375rem; font-weight: 700; font-variant-numeric: tabular-nums; } .unit__price2 span { font-weight: 400; color: var(--muted); font-size: .75rem; } .unit__cta { margin: 1.5rem 0 1rem; } .unit__contact { margin: 0; padding: 0; list-style: none; display: grid; gap: .35rem; } .unit__contact a { font-size: .875rem; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line); } .unit__contact a:hover { border-color: var(--accent); color: var(--accent); } .unit__back-lbl { margin: 0 0 .25rem; font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .unit__back-name { margin: 0 0 .5rem; font-size: 1.0625rem; font-weight: 700; } .unit__back-name a { color: inherit; text-decoration: none; } .unit__back-name a:hover { color: var(--accent); } .unit__back-free { margin: 0 0 .75rem; font-size: .8125rem; color: var(--muted); } .unit__back-free b { color: var(--free); font-size: 1rem; } .unit__back-links { display: flex; gap: 1rem; margin: 0; } .unit__back-links a { font-size: .8125rem; font-weight: 700; color: var(--accent); text-decoration: none; } .unit__back-links a:hover { text-decoration: underline; } /* ------------------------------------------------------------------------- За проекта — the client's own description ---------------------------------------------------------------------- */ /* Секцията, която замества схемата и таблицата, докато обектът няма единици. */ .section--soon { background: var(--paper-alt); } .soon { max-width: 46rem; text-align: center; margin-inline: auto; } .soon__title { margin: 0 0 1rem; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; letter-spacing: -.01em; } .soon__lede { margin: 0 auto 2rem; max-width: 54ch; line-height: 1.6; color: var(--muted); } .soon__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin: 0; } .section--about { background: var(--paper); } /* ========================================================================= Визуализации — рендерите на обекта ========================================================================= Контактен лист, не албум. Дванайсет рендера, разгърнати на половин екран всеки, са три екрана скрол преди схемите на плащане — купувачът или се отказва по средата, или така и не стига до цените. Малките еднакви плочки се обхождат наведнъж, а кадърът се гледа едър чак когато някой го поиска. `auto-fill` с `minmax`, а не фиксиран брой колони: мрежата сама решава колко плочки на ред според ширината — шест на настолен екран, три на телефон, — без нито един брейкпойнт. `min(11rem, 100%)` е предпазителят за много тесни екрани, където 11rem вече не се събира и голото `minmax` би препълнило контейнера. Нулев радиус и никакъв кант — рамка около рендер добавя втора сграда около първата. Разстоянието между кадрите е единственото, което ги разделя. */ .shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); list-style: none; margin: 0; padding: 0; } .shots__item { margin: 0; background: var(--paper); } /* Бутонът е плочката: цялата площ е мишена, а не само картинката вътре. `display:block` не е излишно — е inline, а inline кутия оставя ред за долната издънка на буквите под себе си — три-четири пиксела чужд фон под всеки кадър, точно там, където мрежата има 1px линия. Капанът е №2 в README. */ .shots__btn { display: block; position: relative; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; overflow: hidden; color: inherit; font: inherit; } /* 4:3 за всички плочки, независимо че оригиналите не са с еднакви пропорции: Цветея (`cveteya/02.jpg`) е 1600×1600 — КВАДРАТ. Мрежа от еднакви правоъгълници се чете като списък; мрежа от различни се чете като бъркотия. Рязането е допустимо тук именно защото плочката не е кадърът — тя е входът към него. */ .shots__btn img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .3s ease, opacity .2s ease; } .shots__btn:hover img, .shots__btn:focus-visible img { transform: scale(1.06); } /* Лупата казва, че плочката се отваря — иначе курсорът е единственият знак, а на телефон курсор няма. Стои постоянно, но е сдържана; на hover се обръща в акцента. */ .shots__zoom { position: absolute; inset-block-end: .5rem; inset-inline-end: .5rem; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; background: rgb(22 24 28 / .55); color: #fff; opacity: 0; transform: translateY(.25rem); transition: opacity .2s ease, transform .2s ease, background-color .2s ease; pointer-events: none; } .shots__zoom svg { width: 1rem; height: 1rem; display: block; } .shots__btn:hover .shots__zoom, .shots__btn:focus-visible .shots__zoom { opacity: 1; transform: none; } .shots__btn:hover .shots__zoom { background: var(--accent); } /* На тъч няма hover: лупата не бива да е скрита зад състояние, което този екран не може да произведе. */ @media (hover: none) { .shots__zoom { opacity: 1; transform: none; } .shots__btn:hover img { transform: none; } } @media (prefers-reduced-motion: reduce) { .shots__btn img, .shots__zoom { transition: none; } .shots__btn:hover img, .shots__btn:focus-visible img { transform: none; } } /* Без JavaScript плочките не правят нищо, затова под мрежата стоят истински връзки към файловете. Виждат се само в