` (80 + 64 = 144). */ .md\:pt-16 { padding-top: 4rem; } /* Parking list-view cards rely on `md:grid` + `md:gap-6` + an arbitrary 6-col template. The prebuilt bundle ships md:grid-cols-2/3/4 + md:gap-4/5/8 but not bare md:grid, md:gap-6, or that arbitrary token. */ .md\:grid { display: grid; } .md\:gap-6 { gap: 1.5rem; } /* md:flex-wrap is absent from the bundle too. The dark CTA cards on /about and /purchase need it: their copy is capped at 600px and the button pair is ~537px, so an unwrapped md row overflows the viewport from 768px until ~1170px. */ .md\:flex-wrap { flex-wrap: wrap; } /* Home + /projects filter bar. It's a column below md and a row from md up, so the bottom-alignment the CTA wants must be scoped to md: an unscoped `items-end` aligns on the horizontal axis while the bar is still a column and shoved the entire filter group against the right edge, leaving the left half of the section empty. Deliberately NOT shipped as a generic `.md\:items-end` utility, even though that's the class the markup would normally use: the inner label+pills groups already carry it (dead — it's absent from the prebuilt bundle), and making it live bottom-aligns groups of very unequal height, which drops /projects' «Готовность» dropdown 216px at 768px. Below md the element carries no align-items class at all, so it keeps the flexbox default (stretch) and the group sits flush left. */ .cms-filterbar { align-items: flex-end; } .md\:grid-cols-\[minmax\(0\,1\.5fr\)_140px_160px_minmax\(0\,1\.4fr\)_auto_auto\] { grid-template-columns: minmax(0, 1.5fr) 140px 160px minmax(0, 1.4fr) auto auto; } } /* The bundle ships no xl: flex utilities at all. The home «Способы покупки» row needs them: side-by-side from 1024 squeezes the mortgage calculator card to ~520px, and its own three-column interior then collapses the amount pills to 40px — the figures render outside them. Stacked until 1280, where the card is back over 700px. */ @media (min-width: 1280px) { .xl\:flex-row { flex-direction: row; } .xl\:gap-4 { gap: 1rem; } .xl\:gap-6 { gap: 1.5rem; } } /* ── /parking filter row ────────────────────────────────────────────────── The reference template (180px 210px 1fr auto auto) only balances from about 1280px. At 1024 the two fixed columns and the two auto-width toggles eat the row and collapse the 1fr price cell to ~100px — the min/max numbers then render *underneath* the toggle buttons and the range slider shrinks to a stub. Keep the toggles on a second row until all five fit, and trim the fixed columns a little at the crossover so the price cell clears its ~295px of content. Lives here rather than as a Tailwind utility because the prebuilt bundle only ships the reference's `lg:` variant of that arbitrary value. */ @media (min-width: 1024px) { .cms-pfilter { grid-template-columns: 180px 210px minmax(0, 1fr); } } @media (min-width: 1280px) { .cms-pfilter { grid-template-columns: 170px 200px minmax(0, 1fr) auto auto; } } /* Hide the home about-section team scroller per design feedback (kept in the seed for parity with the React reference; toggled off here). */ .cms-about .cms-team { display: none; } /* Yellow primary buttons inside dark `.bg-foreground` sections must keep their black `text-primary-foreground` colour. The legacy site rule `.bg-foreground a { color: inherit }` (in /site/styles.css) wins over the Tailwind utility on its own — narrow it back here for primary CTAs. */ .bg-foreground a.bg-primary, .bg-foreground button.bg-primary { color: hsl(var(--primary-foreground)); } /* Same conflict for footer links: `.bg-foreground a { color: inherit }` (0,1,1) outranks the `.text-background/NN` opacity utilities (0,1,0), so footer nav + social links rendered full-opacity white instead of the reference 60%/70%. Restore the muted colour; keep the hover rule winning. */ .bg-foreground a.text-background\/60 { color: hsl(var(--background) / .6); } .bg-foreground a.text-background\/70 { color: hsl(var(--background) / .7); } .bg-foreground a.hover\:text-background:hover { color: hsl(var(--background)); } /* Hero+offers viewport sizing — mirrors tektonika/src/pages/Index.tsx * wrapper that pins hero+offers to 100dvh - 5rem (header). The CMS layout has * the slots side-by-side (no joint wrapper), so we apply the calc here on the * hero block alone. * * This used to be a hard @media (min-height:830px) / (max-height:829px) pair — * hero ≈ viewport-header-offers on tall screens, hero alone filling the area * below the header on short ones. The switch was NOT monotonic: measured live, * an 830px-tall viewport gave a 470px hero and an 829px-tall one gave 746px, so * shrinking the window by 1px made the hero 59% TALLER. That is also the worst * case for the image crop below, and it is where a resized desktop window lands. * clamp() keeps the same two endpoints but never lets the short-viewport value * exceed the tall-viewport one, so the height only ever falls as the window * shrinks. 400px floor unchanged. * * The width cap is the crop fix. object-fit:cover on .cms-hero__image has to * crop the photo into this box, and height-driven sizing makes the box PORTRAIT * on a narrow screen (measured 453x746 = aspect 0.61 at a 501x826 window) while * every hero photo is landscape — 1299x560, 1672x941, 1184x384 on site 3. A * 3.08:1 banner then keeps 20% of its width, magnified ~5x. Capping the height * at 95vw below the lg breakpoint holds the box near square (0.92 on a 390px * phone) instead of 0.6; which part of the photo survives is the per-slide focal * point in slider_hero.css. ≥1024px is untouched — desktop keeps today's * geometry — and in practice the cap only binds below ~500px, because at 768px * the viewport-height term is already the smaller of the two. * * The cap is only reachable because slider_hero.css reclaims the caption/ * indicator padding AND lowers the seed markup's 400px floor on phones. The * two are one change: with the old padding the box could not shrink without * crowding the text, and with the 400px floor still in place the cap would be * inert. * * 95vw -> 56.25vw, 2026-09-05, owner: "it shows the centre of an image, we want * to see more". 95vw held the box near square (0.94 at 390px) and a 16:9 photo * — which is what 1920x1080 makes nearly every image on this site — still kept * only 53% of its width. 56.25vw is 9/16, the photos' own ratio. * * The cap does NOT bind on a phone and is not meant to: this is a min-height * over an overlaid caption that measures 221px at 390px wide (113px of text, * the rest the clearance the indicator strip needs), and the 270px floor in * slider_hero.css wins below ~480px. The phone lands at 1.30 and ~78%; a lower * cap there would only bury the photo behind its own caption. A min-height can * never clip that caption — it grows — so the failure mode is cosmetic. * * Where the cap DOES bind is the band this rule exists for: a portrait tablet. * At 768-1023 the viewport is tall and the width has barely moved, so the * height-driven term hands the hero a 688x553 / 740x590 box — measured 40%. * That was the worst case in the whole sweep and it is the case an @media * (max-width: 767px) rule would have missed entirely. * * >=1024px is untouched: the viewport is landscape there and the geometry is * already right. */ .cms-hero-frame { --cms-hero-h: clamp(400px, calc(100dvh - 5rem - 280px), calc(100dvh - 5rem)); min-height: var(--cms-hero-h); } @media (max-width: 1023px) { .cms-hero-frame { min-height: min(var(--cms-hero-h), 56.25vw); } } /* Flat detail hero grid — 2-col layout at lg breakpoint (floor plan + specs). */ @media (min-width: 1024px) { .lg\:grid-cols-\[1fr_420px\] { grid-template-columns: 1fr 420px; } .lg\:grid-cols-\[1fr_460px\] { grid-template-columns: 1fr 460px; } .lg\:grid-cols-\[2fr_1fr\] { grid-template-columns: 2fr 1fr; } .lg\:grid-cols-\[3fr_2fr\] { grid-template-columns: 3fr 2fr; } .lg\:col-span-3 { grid-column: span 3 / span 3; } .lg\:col-span-2 { grid-column: span 2 / span 2; } .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } /* /purchase bank-table rows use `hidden lg:grid grid-cols-[1.5fr_1fr_1fr_0.8fr]`; * the pre-built Tailwind bundle ships .lg:flex / .lg:hidden but not .lg:grid. */ .lg\:grid { display: grid; } } /* Aspect-ratio arbitrary tokens used on flat / project cards. */ .aspect-\[4\/5\] { aspect-ratio: 4 / 5; } /* Header backdrop — bg-background/70 + backdrop-blur-xl are referenced by * tek-site-header (block 4334) but the precompiled Tailwind bundle only * ships /50 /95 + backdrop-blur-sm. Without these utilities the fixed * header renders fully transparent over the project hero. */ .bg-background\/70 { background-color: hsl(var(--background) / 0.7); } .bg-background\/90 { background-color: hsl(var(--background) / 0.9); } .backdrop-blur-xl { -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); } .cms-site-header.is-scrolled { background-color: hsl(var(--background) / 0.95); border-bottom: 1px solid hsl(var(--border) / 0.4); } /* Hide-on-scroll-down (reference Header.tsx): the fixed bar slides out of view * when scrolling down and returns on scroll up. Explicit transition so the * slide animates regardless of whether the utility `transition-all` shipped in * the precompiled bundle. */ .cms-site-header { transition: transform .3s ease-out, background-color .3s ease, backdrop-filter .3s ease, border-color .3s ease; will-change: transform; } .cms-site-header.is-hidden { transform: translateY(-100%); pointer-events: none; } /* The burger menu drops out of a `position: fixed` header, so its height is * NOT bounded by anything: page scrolling moves the document behind it and * leaves the panel exactly where it is. Unbounded, the tektonika menu runs to * 571px — taller than a phone in landscape (360dvh) — and its last two items, * the phone number and «Заказать звонок», sit below the fold with no way to * reach them. They are painted, hit-testable and permanently off-screen, which * is why this reads as "the call button stopped working in mobile mode" * rather than as a layout bug. * * dvh, not vh: on iOS/Android the URL bar is inside vh but not on screen, so a * vh-sized panel is still short by the height of the browser chrome at exactly * the moment it matters. 80px is the bar the menu hangs from (`h-20`). * overscroll-behavior keeps a flick at the end of the list from scrolling the * page underneath. */ .cms-mobile-menu { max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); overflow-y: auto; overscroll-behavior: contain; } /* premium-top-nav rides up with the hero and parks under the site header. That * is `position: sticky` in the block's own CSS (premium_sub_nav.css) — including * the transition that used to live here as `.is-stuck`, which only existed * because the bar was then positioned from a scroll handler and could not be * allowed to ease while it was tracking the hero. */ /* Seven nav items: making them fit without moving the header's edges. * * The bar is `justify-between` — logo block, nav, phone cluster — and the * seventh item («Безопасность», added 2026-09-07 with the /safety page) took * the nav from 489px to 605px. Because the links are flex children that * shrink, the surplus was spent WRAPPING captions onto a second line inside an * 80px bar («Как купить» measured 40px tall at 1024, «О компании» 45px). The * document never overflowed, so no scrollbar and no audit saw it. * * Three widths pinched, each at a breakpoint edge where the bar's own metrics * jump: 1024 (`lg:px-16` starts, 64px a side), 1280 (`xl:px-[100px]`) and 1536 * (`2xl:px-[140px]` AND the «Заказать звонок» button appears, which is * `hidden 2xl:inline-flex` and adds ~200px to the right cluster). * * The container's padding is NOT what gets adjusted, though it is the obvious * lever. Those three values are the same 64 / 100 / 140 the `.site-container` * uses, so the logo sits exactly above the page's first character at every * width; halving one band moves the logo 32px inboard of the h1 under it, on * every page of the site. Measured, then reverted. * * So the room comes from the nav itself: * • 1024–1279 is the hard one — 560px of room for 509px of captions leaves * 51px for six gaps. The captions step down to 14px there, which returns * ~34px of ink, and the gap goes to 8px. Nothing else on the bar moves. * • 1280 and up keep the 15px captions and only lose the `xl:gap-8` step, * which is what pinched 1280 and 1536. 16px is the same gap the bar * already uses below 1280, so this reads as one spacing, not two. * * Written as media queries rather than `lg:text-sm` / `xl:gap-4` utilities: * the stylesheet is a FROZEN Tailwind build served from `site_shells.styles` * and neither class is in it, so a utility here would silently do nothing. * Same reasoning as about_page.css's principles-grid rule. * * Bounds end in .98px: a fractional viewport width (browser zoom, a hidpi * scale factor) can land between two integer bounds and match neither. * * nowrap is a backstop, not the fix. If an eighth item is ever added it must * announce itself as an overlap rather than hide as a silent second line. */ @media (min-width: 1024px) { .cms-site-header > div > nav > a, .cms-site-header > div > nav > .header-dropdown > a { white-space: nowrap; } } @media (min-width: 1024px) and (max-width: 1279.98px) { .cms-site-header > div > nav { gap: 0.5rem; } .cms-site-header > div > nav > a, .cms-site-header > div > nav > .header-dropdown > a { font-size: 14px; } } @media (min-width: 1280px) { .cms-site-header > div > nav { gap: 1rem; } } /* Header dropdown panel sizing — pre-built Tailwind bundle doesn't ship the * arbitrary `min-w-[…]` values these panels use. Semantic classes here keep * the seed HTML free of inline `style=` (enforced by tests). */ /* min() so a card can never be wider than the window itself — bindHeaderDropdowns * can slide an over-wide panel back into view, but not one that doesn't fit. */ .header-dropdown-card--projects { min-width: min(780px, calc(100vw - 32px)); } .header-dropdown-card--apartments { min-width: min(680px, calc(100vw - 32px)); } .header-dropdown-list--projects { min-width: 340px; } .header-dropdown-list--apartments { min-width: 240px; } .header-dropdown-promo { min-width: 300px; } /* Header dropdowns — hover-revealed mega-menu panels. Panel hidden by * default; .is-open on the wrapping `[data-fx="header-dropdown"]` toggles * the panel opacity + slide-up. Bridge zone (the .header-dropdown-bridge * div) keeps the panel alive while the cursor crosses the gap between * trigger and panel content. */ /* --dd-shift is the viewport-overhang correction published by bindHeaderDropdowns * before the panel opens (0 unless the panel would run past the right edge). */ .header-dropdown-panel { opacity: 0; visibility: hidden; pointer-events: none; transform: translate(var(--dd-shift, 0px), 8px); transition: opacity 250ms cubic-bezier(0.22, 1, 0.36, 1), transform 250ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 250ms; } .header-dropdown.is-open .header-dropdown-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(var(--dd-shift, 0px), 0); transition: opacity 250ms cubic-bezier(0.22, 1, 0.36, 1), transform 250ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s; } /* Shared backdrop overlay — fades in under the header while any dropdown * is open. Sits below the header (z-50) but above the page content. */ .header-dropdown-backdrop { position: fixed; left: 0; right: 0; top: 5rem; /* below the 80 px header */ bottom: 0; background-color: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; pointer-events: none; z-index: 40; transition: opacity 250ms ease, visibility 0s linear 250ms; } .header-dropdown-backdrop.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 250ms ease, visibility 0s linear 0s; } /* Fullscreen overlay must layer above the fixed site header (z-50). */ .z-\[10000\] { z-index: 10000; } /* Required for the project-hero fullscreen overlay backdrop — * Tailwind's compiled bundle ships /50 but never .bg-black. Without * this rule the overlay is transparent and the info-bar / page content * leaks through the object-contain letterbox. */ .bg-black { background-color: #000; } /* /project location section photo-card overlays + text */ .text-white\/70 { color: rgb(255 255 255 / 0.70); } .text-white\/65 { color: rgb(255 255 255 / 0.65); } .text-white\/35 { color: rgb(255 255 255 / 0.35); } .via-black\/10 { --tw-gradient-via-position: ; --tw-gradient-to: rgb(0 0 0 / 0); --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.10) var(--tw-gradient-via-position), var(--tw-gradient-to); } /* /catalog filter & listing — additional arbitrary tokens. The bundle * compiled `lg:grid-cols-[1fr_420px|460px|2fr_1fr|3fr_2fr]` above; the * filter quick-row needs its own four-column hint at xl, and the listing * cards want a 4-up break at the 3xl tier (≥1600 px). */ @media (min-width: 1280px) { .xl\:grid-cols-\[190px_280px_minmax\(0\,1fr\)_minmax\(0\,1fr\)\] { grid-template-columns: 190px 280px minmax(0, 1fr) minmax(0, 1fr); } } @media (min-width: 1600px) { .\33xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Catalog rounded-pill panels — tek-specific large radii. */ .rounded-\[32px\] { border-radius: 32px; } .rounded-\[40px\] { border-radius: 40px; } .rounded-t-\[40px\] { border-top-left-radius: 40px; border-top-right-radius: 40px; } /* Sort dropdown pill width. */ .min-w-\[220px\] { min-width: 220px; } /* Discount toggle / chip lengths — tek uses h-[14px] elsewhere; the * listing card's floor-plan box is fixed at 260 px (already defined * above). The list-view mini plan uses w-[120px] / h-[100px]. */ .w-\[120px\] { width: 120px; } .h-\[100px\] { height: 100px; } /* tracking-[-0.03em] for the result-count headline. */ .tracking-\[-0\.03em\] { letter-spacing: -0.03em; } .tracking-\[-1\.2px\] { letter-spacing: -1.2px; } /* Shared marquee (data-fx="marquee" + --fx-marquee-dur). */ @keyframes fx-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } [data-fx~="marquee"] > * { animation: fx-marquee var(--fx-marquee-dur, 28s) linear infinite; } /* ─── Dual-range slider (cms-range-dual) ───────────────────────────── * Mirrors Radix rendered by tektonika/src/components/ui/slider.tsx: * one shared horizontal track with two round thumbs, each thumb drag-able * across the full width. Implementation: two stacked * absolutely over the same track (visible .bg-border bar + .bg-primary * fill positioned by JS). pointer-events:none on the input strips its * native track from intercepting clicks; pointer-events:auto on the * ::thumb lets the user drag only the thumb. Both inputs overlap so each * thumb can travel the full range — the JS handler (bindRangeSlider) * does directional clamp if lo > hi. */ .cms-range-dual { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; background: transparent; -webkit-appearance: none; -moz-appearance: none; appearance: none; pointer-events: none; outline: none; } .cms-range-dual::-webkit-slider-runnable-track { background: transparent; border: 0; height: 2px; } .cms-range-dual::-moz-range-track { background: transparent; border: 0; height: 2px; } /* Hide Firefox's default progress fill — we draw our own. */ .cms-range-dual::-moz-range-progress { background: transparent; } .cms-range-dual::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1.25rem; height: 1.25rem; border-radius: 9999px; background: hsl(var(--background)); border: 2px solid hsl(var(--primary)); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); cursor: pointer; pointer-events: auto; margin-top: -9px; /* webkit anchors the thumb top to the runnable-track top, so for a 2 px track + 20 px thumb we shift by -((20 - 2) / 2) = -9 px to center the thumb on the line */ position: relative; z-index: 2; transition: transform 120ms ease, box-shadow 120ms ease; } .cms-range-dual::-moz-range-thumb { width: 1.25rem; height: 1.25rem; border-radius: 9999px; background: hsl(var(--background)); border: 2px solid hsl(var(--primary)); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); cursor: pointer; pointer-events: auto; transition: transform 120ms ease, box-shadow 120ms ease; } .cms-range-dual::-webkit-slider-thumb:hover, .cms-range-dual::-webkit-slider-thumb:active { transform: scale(1.08); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); } .cms-range-dual::-moz-range-thumb:hover, .cms-range-dual::-moz-range-thumb:active { transform: scale(1.08); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); } .cms-range-dual:focus-visible::-webkit-slider-thumb { outline: 2px solid hsl(var(--ring, var(--primary))); outline-offset: 2px; } .cms-range-dual:focus-visible::-moz-range-thumb { outline: 2px solid hsl(var(--ring, var(--primary))); outline-offset: 2px; } /* ─── Single-thumb slider (cms-range-solo) ─────────────────────────── * Mirrors the visible shape of tektonika/src/components/ui/slider.tsx * (Radix-based) for /purchase mortgage sliders: 2 px track + 1.25 rem * round thumb with primary-coloured border + a yellow progress fill * from the left of the track up to the thumb. * * Progress fill is a linear-gradient on the WebKit track that switches * from primary → border at `--fx-range-pct`; JS sets the property on * every `input` event (bindPurchaseCalc.updateRangeFill). Firefox uses * its native ::-moz-range-progress pseudo-element instead. */ .cms-range-solo { -webkit-appearance: none; -moz-appearance: none; appearance: none; /* `display: block` is load-bearing: native defaults to * inline-block, which makes its parent a line-box ~font-size×line-height * (~24 px) tall instead of collapsing to the 2 px track. The reference * uses a Radix so it never had this baseline gap; we force block * here to make the pill above sit flush with the track. */ display: block; width: 100%; height: 2px; background: transparent; cursor: pointer; outline: none; margin: 0; padding: 0; overflow: visible; } .cms-range-solo::-webkit-slider-runnable-track { height: 2px; border-radius: 9999px; background: linear-gradient(to right, hsl(var(--primary)) 0%, hsl(var(--primary)) var(--fx-range-pct, 0%), hsl(var(--border)) var(--fx-range-pct, 0%), hsl(var(--border)) 100%); } .cms-range-solo::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1.25rem; height: 1.25rem; border-radius: 9999px; background: hsl(var(--background)); border: 2px solid hsl(var(--primary)); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); cursor: pointer; margin-top: -9px; /* centre 20 px thumb on 2 px track */ transition: transform 120ms ease, box-shadow 120ms ease; } .cms-range-solo::-moz-range-track { height: 2px; border-radius: 9999px; background: hsl(var(--border)); } .cms-range-solo::-moz-range-progress { height: 2px; border-radius: 9999px; background: hsl(var(--primary)); } .cms-range-solo::-moz-range-thumb { width: 1.25rem; height: 1.25rem; border-radius: 9999px; background: hsl(var(--background)); border: 2px solid hsl(var(--primary)); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); cursor: pointer; transition: transform 120ms ease, box-shadow 120ms ease; } .cms-range-solo::-webkit-slider-thumb:hover, .cms-range-solo::-webkit-slider-thumb:active { transform: scale(1.08); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); } .cms-range-solo::-moz-range-thumb:hover, .cms-range-solo::-moz-range-thumb:active { transform: scale(1.08); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); } .cms-range-solo:focus-visible::-webkit-slider-thumb { outline: 2px solid hsl(var(--ring, var(--primary))); outline-offset: 2px; } .cms-range-solo:focus-visible::-moz-range-thumb { outline: 2px solid hsl(var(--ring, var(--primary))); outline-offset: 2px; } /* ─── Typeable calculator figures (cms-calc-input) ─────────────────── * The numbers inside the «Калькулятор платежей» pills are s that must * look exactly like the s they replaced: same font, size, weight, * colour and position, no box of their own. Everything is inherited from * the pill row (`text-sm font-medium`, and `text-muted-foreground` for the * percent), so the input carries no typography of its own. * * --grow: the left-hand figure. It fills the row up to the unit, so its text * starts where the span's did and the unit stays pinned right by * justify-between. width:0 + flex-grow, not width:auto — an input's intrinsic * width comes from its `size` (≈20ch), which would push the unit around. * --pct: sits in front of «%», right-aligned in a fixed 4ch box («100», * «23,5»), so its digits end exactly where the span's did. * * Height is the row's line-height (1.25rem for text-sm), matching the span's * line box so `items-center` puts both at the same y. */ .cms-calc-input { -webkit-appearance: none; appearance: none; display: block; box-sizing: border-box; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none; font: inherit; color: inherit; letter-spacing: inherit; line-height: inherit; height: 1.25rem; text-overflow: clip; caret-color: currentColor; } .cms-calc-input--grow { flex: 1 1 0%; width: 0; min-width: 0; } .cms-calc-input--pct { display: inline-block; vertical-align: baseline; width: 4ch; text-align: right; } /* Where the browser can size a field to its text, both behave exactly like * the spans did: the percent is as wide as its digits, and the left figure * can never be squeezed below its text (a span's min-content) — at 768 the * row has no spare width, and a fixed 4ch percent clipped the amount. Other * browsers get the same widths from bindMortgageCalc (fitCalcInput). */ @supports (field-sizing: content) { .cms-calc-input--grow { field-sizing: content; flex: 1 1 auto; width: auto; min-width: auto; } .cms-calc-input--pct { field-sizing: content; width: auto; min-width: 1ch; } } /* Phones: iOS Safari zooms the page when a field under 16px takes focus. The * owner chose slightly larger figures on phones over a jumping page * (2026-09-28); tablets and desktops keep the pixel-exact 14px. */ @media (max-width: 767.98px) { .cms-calc-input { font-size: 16px; } } .cms-calc-input[readonly] { cursor: default; } .cms-calc-input::-ms-clear { display: none; } /* Focus indicator: the pill's own border darkens. A border-colour change, not * an outline, so nothing moves; the input itself shows only the caret. */ .cms-calc-pill { transition: border-color 150ms ease; } .cms-calc-pill:focus-within { border-color: hsl(var(--foreground) / .55); } @media (prefers-reduced-motion: reduce) { .cms-calc-pill { transition: none; } } /* Snap hint: bindMortgageCalc swaps the caption above a pill for the allowed * range («От 1 000 000 до 30 000 000 ₽») for ~3 s after it snaps a value. * One line, clipped, so a long hint can never wrap and push the pill down. * Not --destructive: the theme's light red is ~3.8:1 on white, under AA for * 12px text; this one is ~6:1. */ [data-fx-calc-caption][data-fx-hint-active] { color: var(--fx-calc-hint-color, hsl(0 74% 42%)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ─── PillButton text-slide-up hover effect ───────────────────────── * Mirrors tektonika/src/components/PillButton.tsx: the button is a * `.group` with `overflow-hidden relative`, wraps its label in * `` containing TWO `.btn-text-slide-inner` * spans — the second `aria-hidden`. Both inner spans translate up on * `.group:hover`, sliding the visible label off and the duplicate in. * Heights are em-relative so any font-size works. */ .btn-text-slide { display: inline-flex; overflow: hidden; position: relative; height: 1.43em; line-height: 1.43; white-space: nowrap; } .btn-text-slide-inner { display: inline-flex; align-items: center; gap: 0.75rem; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); min-height: 100%; } .btn-text-slide-inner:last-child { position: absolute; top: 100%; left: 0; } .group:hover .btn-text-slide-inner { transform: translateY(-100%); } /* ─── mortgage-calc — flex-[3] missing from the prebuilt /site/styles.css. * The Ипотека card needs flex-grow=3 so it eats all the row space left by * the fixed 360px Рассрочка card; without this rule it falls back to * `flex: 0 1 auto` and stops growing at its content width, leaving a gap. */ .flex-\[3\] { flex: 3 1 0%; } /* ─── Unified yellow-button interaction ───────────────────────────── * Every gold (--primary) CTA animates identically: a 0.2s ease fade plus a * whole-button 10% dim on hover. This collapses the drifted per-button hovers * (bg-primary/90 fade at ad-hoc durations, the raw `.cms-*` block-CSS hovers, * and the purchase-page text-slide) into ONE behaviour. Sizes still vary. * * The dim is `filter: brightness(.9)`, NOT `opacity:.9` (nor the seeds' old * `bg-primary/90` alpha). Any transparency composites the button with whatever * is BEHIND it — `0.9·gold + 0.1·backdrop` — so over a white section the hover * washed the gold LIGHTER (rgb 255,213,26) while over a dark `.bg-foreground` * hero/footer it went DARKER (rgb 231,188,1): the same button drifting opposite * directions per background (the v2 reference has this same opacity bug). filter * dims the button's own pixels before compositing, so the button stays opaque * and the result is backdrop-independent — a uniform ~10% darken everywhere. * * Scope is `.bg-primary` gold buttons + the two raw-CSS gold classes. The * Luxor/premium buttons use their own tan/maroon classes (`.cms-premium-*`, * not `.bg-primary`) and are deliberately left untouched. * * `!important` on the hover state is intentional: it must beat both the inline * `.hover\:bg-primary\/90:hover` utility (0,2,0) and the per-block * `.cms-about-bento .cms-cta-primary:hover` rule (0,3,0) regardless of the * order the block