/* ========================================================================== Calista Estate - design tokens Generated from DESIGN.md's frontmatter. DESIGN.md is normative: change a value there first, then mirror it here. Nothing else in the system may hard-code one of these values. ========================================================================== */ :root{ /* --- colour ------------------------------------------------------------ */ --c-ink: #1c1c1c; /* Soft Ink - copy, footer band, dark button */ --c-green: #1e5d43; /* Estate Green - the one saturated voice */ --c-gold: #c2a170; /* Hairline Gold - strokes; fills only = chosen */ --c-gold-rule: rgba(194,161,112,.65); /* Hairline Gold at 65% - the header's own rule. All seven inner frames sample it at #d2bd9d over Field Grey, at zero spread */ --c-gold-deep: #b8935a; /* Partner Gold - the partners band ground */ --c-gold-tint: #f5d098; /* Chip Gold - the article date chip's fill, ten instances on the Blog frame and nowhere else in the file */ --c-cream: #fbfaf7; /* Paper Cream - default card and field fill */ --c-cream-warm: #fff3e9; /* Warm Cream - form cards only */ --c-field: #f7f7f7; /* Field Grey - page ground behind the header */ --c-white: #ffffff; --c-muted: #6f6f6f; /* placeholders and secondary links only. SOLVED AGAINST A GROUND, not chosen by eye: #787878 read 4.42:1 on white, 4.23 on Paper Cream, 4.12 on Field Grey and 4.05 on Warm Cream - four grounds, four failures of the 4.5:1 this size of type needs. #6f6f6f is the smallest step that clears all four (5.02, 4.79, 4.62, 4.60). It does NOT clear the warm wash, and nothing grey does; see the rule in DESIGN.md. audit, 27 Aug */ --c-star-off: #d9d9d9; --c-map-base: #ffe4ce; /* district, not selected - flat, Search frame */ --c-map-selected: #bc6c25; --c-map-hover: #fefae0; --c-error: #a3392b; /* the only red; field errors and nothing else */ --c-careers-base: #8f8983; /* Taupe Base - the Елате в екипа ни band's fill, which its 40% photograph composites over; 60% of every pixel there is this. The frame's own fill, carried as drawn */ --c-wash: #e7d5c6; /* flat fallback for the warm wash band - the band itself is a tint over a blurred photo */ /* --- type -------------------------------------------------------------- */ --c-serif: "Playfair Display", Georgia, serif; --c-sans: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif; --c-fs-display: 48px; /* every section heading, every page */ --c-fs-headline: 40px; /* search panel title, contact CTA heading */ --c-fs-title: 24px; /* card titles - 24, not 30; see DESIGN.md */ --c-fs-footer: 24px; /* footer labels and values */ --c-fs-nav: 20px; /* header links - NOT 16, see DESIGN.md */ --c-fs-body: 16px; --c-fs-label: 14px; --c-fs-caption: 12px; --c-fs-price: 16px; /* c-price badge only - c-fs-caption is shared with date chips, form fields and hero stats */ --c-lh-serif: 1.333; --c-lh-title: 40px; /* card titles sit on a fixed 40, which is what lets the green rule sit on the box bottom */ --c-lh-body: 19px; /* UI roles: labels, bars, metas, buttons, fields */ --c-lh-prose: 24px; /* RUNNING copy - .c-prose and .c-card__body, 16 on 1.5. Split off 19 by the critique, 28 Sep 2026: 19 is 1.19, too tight at a 68-character measure. DESIGN.md, Typography - Prose */ --c-lh-sans: 1.172; /* --- radius: a class of surface, not a scale step ---------------------- */ --c-r-panel: 60px; /* the frosted testimonial pane, used once */ --c-r-card: 20px; /* cards that inform */ --c-r-surface: 16px; /* surfaces that carry: photos, forms, heroes */ --c-r-pill: 12px; /* the landing page's floating nav, price badge */ --c-r-control: 10px; /* fields, selects, option and light buttons */ --c-r-detail: 2px; /* not a surface: a flag's corner, the focus ring round a bare text toggle. critique, 28 Sep 2026 */ /* --- spacing that actually recurs -------------------------------------- */ --c-field-h: 40px; /* form cards - Rectangle 143/144/145 are 40 tall */ --c-field-h-tall: 50px; /* the search panel's controls - landing and Search */ --c-inset: 20px; /* info bar and price badge inset inside a photo */ --c-gutter: 17px; /* card grid gutter */ --c-pad: 40px; /* internal card padding */ /* --- layout ------------------------------------------------------------ */ --c-container: 1278px; /* centred; the nav is the authoritative one */ --c-measure: 521px; /* copy column, about 68 characters of Body */ /* The page's side gutter. On the mobile frames it is 16 and that is measured, not chosen: the header logo, the footer's whole column, the breadcrumb and the property card's photograph all open at x16 on all four 393px frames. It steps up twice below, and the desktop step is what makes the 1278 container lock at 1360 rather than at a number someone picked. */ --c-page-gutter: 16px; /* --- what changes at 393, and only what the frames actually change ------ Every value here is measured on siteassets/frames-mobile/, which are exact 393-wide renders of the four mobile frames and diff 1:1. Anything NOT in this block is unchanged between 1920 and 393 - the logo, the field height, the field label, the placeholder, the breadcrumb, the price badge and the whole frosted info bar all measure identically on both. */ --c-fs-display-sm: 30px; /* section heading. 48 -> 30, by advance width against the desktop renders' own ink: «Ръководство» 178/286 = .622 and «Запознайте се с екипа» 313/502 = .624, against 30/48 = .625 */ --c-fs-lead-sm: 20px; /* the form card's lead. 40 -> 20: its two mobile lines ink 236 + 143 = 379 against DESIGN.md's recorded desktop 263 + 367 + 121 = 751, a ratio of .505 */ --c-lh-lead-sm: 27px; /* the measured pitch, and 20 x 1.333 = 26.7 */ --c-fs-title-sm: 16px; /* the form card's promise line. 20 -> 16: it inks 252 on mobile against 316 on Contacts.png, a ratio of .797 */ --c-inset-y-sm: 10px; /* Inside a photograph the VERTICAL insets halve on mobile and the horizontal ones do not. Four instances across two frames agree, and two independent objects carry it: the price badge's top (photo 738, badge 748) and the info bar's bottom (bar 969, photo 979). The sides stay at the desktop 20 - the frames draw 22 and that 2px loses to the nine instances DESIGN.md already records. */ --c-header-top-sm: 66px; /* the space above the logo on mobile. Unanimous on all four frames, where the desktop band puts 25 there. It is deliberate whitespace, not a status bar: the renders draw no clock, no battery and no chrome of any kind above it. */ /* --- elevation --------------------------------------------------------- */ --c-sh-card: 0 4px 10px rgba(0,0,0,.12); --c-sh-photo: 0 4px 10px rgba(0,0,0,.25); --c-sh-header: 0 4px 10px rgba(0,0,0,.10); --c-sh-form: 0 4px 12px rgba(0,0,0,.25); --c-sh-field: inset 0 4px 4px rgba(0,0,0,.25); /* --- the frosted surfaces ---------------------------------------------- */ --c-frost-bar: rgba(247,247,247,.85); --c-frost-panel: rgba(247,247,247,.70); /* --- motion: colour only, never lift ----------------------------------- */ --c-ease: .18s ease; --c-ease-map: .15s ease; } /* ========================================================================== THE THREE BREAKPOINTS - decided once, held across every template. Only 1920 and 393 are designed, so everything between them is a judgement call and the rule is that it is made HERE and nowhere else. No page or component stylesheet may invent a fourth number; if one needs a width the content breaks at, it uses auto-fit/minmax and no media query at all, which is what every card grid in the system now does. 639 / 640 the phone ceiling. Below it the four mobile frames are the brief and their measured values apply. Above it the layout is derived: two-up grids, wider gutters, still no nav bar. 1119 / 1120 the nav bar returns, and this one is measured IN THE BROWSER rather than derived. Adding up the seven labels' advances said 1024 and was wrong by 87px - seven Cyrillic labels at 20px Medium plus 12px of link padding each side render wider than the sum suggests. The row measures 941 at the designed 47px gap and 803 at a relaxed 24, so the floor is 803 + 196 logo + 32 margin + 2x40 gutter = 1111, and 1120 is that rounded up. Below it the bar cannot be made to fit at any gap worth having, and it becomes the drawer. 1359 / 1360 the designed desktop. This one is not chosen either - it falls out of the arithmetic: the container is 1278 and the desktop gutter is 40, so 1278 + 2x40 = 1358 is the first width at which the frame's own container fits without shrinking, and it locks there. It is also where the nav's gap goes back to its measured 47 (the row needs 1249 for that). DIRECTION: these are max-width overlays, not a mobile-first rewrite, and that is deliberate. The 4 300 lines below them are the measured desktop truth and almost every declaration carries the derivation that produced it in a comment beside it. Inverting the cascade would move every one of those values into a media query and detach it from its evidence, which is a rewrite of the design system rather than an adaptation of it. The overlay layer states what CHANGES at 393 and why, and the silence of everything else is itself the finding: the logo, the field, the label, the placeholder, the breadcrumb, the price badge and the frosted info bar are identical on both frames. ========================================================================== */ @media (min-width: 640px){ :root{ --c-page-gutter: 24px; } } @media (min-width: 1120px){ :root{ --c-page-gutter: 40px; } }