/* Tokens shim — the few custom properties + base classes the live site gets from styles.css (Tailwind layer), extracted so the static pages match 1:1. Also imports Onest for the standalone mapped pages under /site. */ /* [FONTS 03.08] @import Onest снят: шрифт подключается ссылкой в head каждой страницы — иначе браузер узнаёт о нём только после разбора этого файла. РЕВЕРС: вернуть строку ниже. @import url('https://fonts.googleapis.com/css2?family=Onest:wght@300;400;500;600;700&display=swap'); */ :root { /* [ШРИФТЫ 09.08] "Noto Sans" СРАЗУ ПОСЛЕ Onest — ради 16 казахских букв, которых в Onest нет (проверено замером ширины глифов 28.07). Onest выигрывает каждый знак, который у него есть, поэтому вид сайта не меняется нигде; Noto включается ровно на эти буквы. На главной такая же строка стояла с 28.07 в самой странице, а 21 подстраница её не имела — там «Қаз» набиралось ДВУМЯ гарнитурами. Файл Noto подрезан до этих 16 знаков и весит два килобайта. */ --font-sans: "Onest", "Noto Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --layout-rail: min(100% - 2rem, 1280px); --section-y: clamp(4rem, 7vw, 7rem); --radius: 0.625rem; /* legacy shadcn base (~10px) — orphaned in this static project (no consumers); superseded by --radius-* below. */ --background: hsl(36 16% 97%); --foreground: hsl(220 14% 8%); /* ── Brand action green — single source (Step 3). Unifies the 5+ hardcoded greens (#25D366 #1FB855 #1eba59 #18914a #1FA855) into one token pair: --wa for WhatsApp/primary CTAs + "available" dots, --wa-hover for hover. */ /* ⤶ [CONTRAST 28.07 · ОТКАЧЕНО] Пробовали #15843F ради 4.5:1 с белым — юзер отклонил («не нравится этот тёмный зелёный»). Вернули #1FA855/#18914a. Открытый долг и три пути решения записаны в файле главной, блок [CONTRAST 28.07], и в CLAUDE.md. */ --wa: #1FA855; --wa-hover: #18914a; /* ── Motion easings — SINGLE source (Step 5 / audit M-1) ────────────────── The intent doc specifies one ease; the live CSS had drifted to 5 curves scattered across files. Collapsed to two tokens: --ease-standard (the brand curve — header morph, hero, footer, buttons, most transitions) and --ease-emphasized (the rare overshoot, used only by the hero star). The near-miss cubic-bezier(.22,.61,.36,1) — an accident, per audit M-1 — is folded into --ease-standard. Left literal on purpose: the pulse-ring's symmetric ease-in-out, and the card .2,.7,.2,1 (the card timing gets unified in a later step, M-4). Durations: see the duration scale below. */ --ease-standard: cubic-bezier(0.22, 1, 0.36, 1); --ease-emphasized: cubic-bezier(0.34, 1.4, 0.4, 1); /* ── Motion durations — 4-rung scale (Step 7 / audit M-1) ───────────────── "Fast & restrained": the live CSS held ~18 ad-hoc durations on a continuous spread. They cluster into FOUR natural bands (gaps at ~190 / 280 / 430 / 650ms), so a 4-rung scale fits where the audit's 3-rung (160/240/480) couldn't — a 3-rung set has no home for the ~320ms "medium" band (30+ sites) without flattening it. Each rung sits on its band's center, chosen to keep the site snappy (the fast side of "fast & restrained") and minimise jumps: --dur-fast 180ms <- 160/170/180 hover / small UI / .p-btn / hero CTA --dur-base 220ms <- 200/220/240 default element moves (200 = the most common transition on the whole site) --dur-slow 320ms <- 300/320/350/380/420 medium: panels, larger reveals --dur-slower 540ms <- 450/500/600/700 deliberately slow / large Deviations from the audit, each a one-line tweak here: * fast 180 not 160 — unifies button = hero = fast rung (M-2 intent). * 4 rungs not 3 — the 320ms band needs its own rung (above). * base 220 not 240 — Step 6 parked it at 240 (an exact cluster, so the adoption was invisible); settled here at 220 so the dominant 200ms transitions stay snappy rather than slowing 40ms. Left literal on purpose: press ~100ms (below the scale, M-2), the <160ms micro-edges, and every animation/decorative loop >=900ms (shimmer, pulse — bespoke, not interaction durations). .reveal is now on --dur-slower (M-3). */ --dur-fast: 180ms; --dur-base: 220ms; --dur-slow: 320ms; --dur-slower: 540ms; /* ── Space scale (8-pt grid) ────────────────────────────────────────── The live site was built on Tailwind, whose spacing utilities supplied --space-* (N × 0.25rem). The static transcription referenced these in reviews.css / dailyrent.css but never carried over their definitions, so gaps/margins resolved to invalid and collapsed. Restored here to the original Tailwind values. Audit ref: T-1 / T-3. */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ /* ── Type tokens referenced by reviews.css / dailyrent.css ──────────── Were undefined → font-size resolved invalid → headings inherited body size (the home FAQ heading collapsed to ~16px). Audit ref: T-1 / T-2. */ --t-h2: clamp(1.9rem, 1.1rem + 2.6vw, 2.6rem); /* ── Type scale — fixed body/UI ramp (Step 9 / audit T-1) ───────────────── The site had ~100 distinct font-sizes (15 px + 47 rem + 42 bespoke clamps), riddled with near-duplicates (0.7/0.72/0.74/0.75; 0.82/0.84/0.85/0.86/0.875; 0.92/0.95/0.98/1/1.05/1.0625…). This 7-step ramp snaps the FIXED body/UI sizes (10–21px) to their cluster centres. The body anchor --fs-base: the site's de-facto body was 0.95rem (~15px, 19×), but per the user's call it's the textbook 1rem (16px) — so the dominant 0.95rem body steps up ~0.8px and 0.92rem "secondary body" re-routes down to --fs-md (14). NOTE: base (16) now sits 1px under --fs-lg (17, the 1.0625rem lead cluster) — a tight top end; bump --fs-lg to 18px if a clearer body→lead step is wanted. Two deliberate boundaries, both visible in the harness: • Nano floor: sizes < 10px are LEFT literal — tracked uppercase eyebrows (9px reads larger), map attribution, price superscripts. Enlarging them would break intentional micro-type. • Fluid display (the 42 clamp() headings + fixed sizes ≥ 22px) is LEFT for the dedicated display-scale step — fluid type is its own problem. Tune any step here (1 line) and re-snap. Audit ref: T-1. */ --fs-2xs: 0.6875rem; /* 11px — micro labels, badges */ --fs-xs: 0.75rem; /* 12px — captions, meta */ --fs-sm: 0.8125rem; /* 13px — labels (was --t-label) */ --fs-md: 0.875rem; /* 14px — small / secondary body */ --fs-base: 1rem; /* 16px — BODY (user-chosen textbook base) */ --fs-lg: 1.0625rem; /* 17px — lead / intro */ --fs-xl: 1.25rem; /* 20px — small title */ --t-label: var(--fs-sm); /* 13px alias — kept for reviews.css / dailyrent.css */ /* ── Radius scale — UI + card ramp (Steps 12–13 / audit "space + radius") ── The site held ~63 pill radii in TWO spellings — 999px and 9999px, visually identical (any element shorter than ~2000px clamps to a full pill either way) — plus a spread of rounded-rect values (6/7/8/10/13/14px, 1.1/1.25/ 1.5/1.75rem), most of the larger ones on DEAD variant classes (.v2-plate, .v2-glass, .v2-ov, --design-e/--overlay/--plated, legacy .v2-reviewcard / .v2-aptsection__bridge-card). A 5-rung ramp, each rung ANCHORED on the site's own live value so adoption is invisible (the Step 9 philosophy) and each rung has a live consumer (no orphans): --radius-xs 6px — focus rings --radius-sm 8px — skip-link, apt-gallery button, small chips --radius-md 14px — CARD photo (signature) + .p-surface ← one-lever control --radius-lg 24px — card wrapper (.v2-aptcard, = 1.5rem) --radius-full pill — every pill toggle/CTA/dot (was 999px / 9999px ×63) Step 12 built sm/md/full (pills + card photo); Step 13 added xs/lg (focus + card wrapper) + the apt-gallery 8px, completing the family on live elements. Left literal on purpose — bespoke one-offs + dead code, NOT a scale: the location map-card 1.25rem (20px, a unique full-bleed banner), lang toast 13px, leaflet tooltip 7px, the dev Tweaks panel (14/8/10), `50%` circles (a circle, not a pill), and every DEAD-variant display radius (4/12/18px, 1.1/1.25/1.5/1.75rem on .v2-plate/.v2-glass/.v2-ov/--design-e/--overlay/ --plated) — those vanish with the dead-CSS cull (A-3), not a radius step. Tune any rung here (1 line). Audit ref: "space + radius scales". */ --radius-xs: 6px; /* focus rings */ --radius-sm: 8px; /* skip-link, apt-gallery button, small chips */ --radius-md: 14px; /* CARD photo (the signature rounded rect) + .p-surface */ --radius-lg: 24px; /* card wrapper (.v2-aptcard, = 1.5rem) */ --radius-full: 999px; /* pills + pill toggles — ОДНА запись (было 999px и 9999px: одно значение двумя написаниями; для любого элемента ниже ~2000px рендер идентичен, поэтому сведение чисто словарное) */ } html { background: hsl(var(--ink)); } body.v2-body { font-family: var(--font-sans); font-feature-settings: 'ss01', 'cv11'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── Scroll-reveal — SINGLE source of truth (Step 2) ────────────────────── home-grouped.js (armReveal) and site.js (initReveal) add .is-visible — the home also adds .in — when an element enters the viewport. Elements start hidden so they can animate up, then settle when the class lands. Graceful: if scripting is unavailable, content is never hidden. Timing (Step 8 / audit M-3): was 900ms generic `ease` — the slowest and most prominent motion on the site, and an ease-in-out that drags at both ends. Now on the scale → --dur-slower (540ms) + --ease-standard (brand ease-out): it arrives quickly and settles, ~40% snappier, and joins the duration scale instead of being a 900ms magic number. Travel (18px) and base state unchanged. */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slower) var(--ease-standard), transform var(--dur-slower) var(--ease-standard); } .reveal.is-visible, .reveal.in { opacity: 1; transform: none; } @media (scripting: none) { .reveal { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .reveal, .reveal.is-visible, .reveal.in { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ================================================================ [ШКАЛА КЕГЛЕЙ 09.08] ЕДИНСТВЕННАЯ НАСТОЯЩАЯ ШКАЛА — вердикт владельца. До сегодня их было ДВЕ и они не сходились: здесь --fs-* (11·12·13·14·16·17·20), а на главной блок dr-scale-7 (13·15·17·20·30·42). Пятнадцати, на которых стоят нав и языки, в токенах не было вовсе — поэтому кегль переключателя физически не мог стать токеном. Владелец выбрал шкалу ГЛАВНОЙ. Переношу её сюда дословно, значения те же, поэтому НИЧЕГО НЕ МЕНЯЕТСЯ визуально: на главной свой блок по-прежнему раздаёт те же числа, а 21 подстраница получает их впервые. ⚠ --fs-* НИЖЕ НЕ УДАЛЯЮ: у них десятки живых потребителей, снос = перекраска сайта. Они теперь ЛЕГАСИ: новые правила пишем на --s-*, старые переводим только когда и так трогаем файл. Это долг, а не задача на вечер. ================================================================ */ :root{ --s-13: 13px; /* реквизиты, ©, языки на карте, источник отзыва, чипы */ --s-15: 15px; /* нав, языки, ссылки подвала, адрес и цена карточки */ --s-17: 17px; /* тело и голос: проза, отзывы, строка доверия, лого, CTA */ --s-20: 20px; /* вопрос FAQ, ЖК на карточке */ --s-30: 30px; /* рукописная подпись на полароиде */ --s-42: 42px; /* заголовки секций и лого подвала */ }