/* ============================================================ 10of10 · Web fonts - CoFo Raffine ........ proprietary display serif (local OTF) - Playfair Display .... product serif + italic accent (Google) - Golos Text .......... UI + marketing sans (Google, full Cyrillic) - Gloock .............. hero display numerals — ТОЛЬКО «10/10» на обложке (Google). Не заменяет CoFo Raffine: тот остаётся знаком, ценами и цифрами по всему сайту, а Gloock живёт ровно в одном месте — в дроби на первом экране, как задано в макете героя. ============================================================ */ /* ⚠️ @import отсюда снят: он ставил загрузку шрифтов Google в очередь ЗА разбором этого файла — три похода в сеть подряд. Ссылка теперь в index.html, рядом с preconnect к gstatic. Возвращать @import нельзя. */ /* ---- CoFo Raffine — the brand display serif (logo, numerals, prices) ---- */ @font-face { font-family: 'CoFo Raffine'; src: url('fonts/CoFoRaffine-Thin.woff2') format('woff2'); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: 'CoFo Raffine'; src: url('fonts/CoFoRaffine-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'CoFo Raffine'; src: url('fonts/CoFoRaffine-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'CoFo Raffine'; src: url('fonts/CoFoRaffine-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'CoFo Raffine'; src: url('fonts/CoFoRaffine-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* ---- Playfair Accent — Playfair Bold Italic, the «of / из / na» connector ---- Declared as a distinct family so the brand connector and emphasis always resolve to the bold-italic cut even inside non-italic headings. Local first, Google webfont as the runtime fallback. */ @font-face { font-family: 'Playfair Accent'; src: url('fonts/PlayfairDisplay-BoldItalic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; } /* ============================================================ 10of10 · Color tokens A warm, editorial luxury palette: deep teal + champagne gold on warm cream paper. Reconciled from the marketing site and the in-product Atelier surfaces. Base ramps first, semantic aliases below — always reach for the semantic name in product code. ============================================================ */ :root { /* ---------- INK · warm near-blacks & greys ---------- */ --ink-900: #1C1611; /* deepest — Atelier headings, footer */ --ink-850: #14110D; /* footer gradient top */ --ink-800: #1C1917; /* marketing primary ink */ --ink-750: #1C2725; /* product body text (cool ink) */ --ink-700: #3A332B; /* ink-soft, body copy */ --ink-650: #3A322A; /* atelier body copy */ --ink-600: #4A4138; /* lead paragraph ink */ --ink-500: #52605C; /* muted label */ --ink-450: #6E7D7A; /* muted (cool) — product secondary */ --ink-400: #8A7E6F; /* muted (warm) — captions, hints */ --ink-300: #A99C8E; /* faint — eyebrow on dark cards, skeletons */ --ink-200: #C9BDAD; /* hairline text on cream */ /* ---------- TEAL · primary brand ---------- */ --teal-900: #052F31; /* darkest — gradient feet, hovers */ --teal-800: #073C43; /* deep panel base */ --teal-700: #08484B; /* dark CTA */ --teal-600: #0A4C54; /* PRIMARY teal — brand anchor */ --teal-550: #0E5A63; /* button gradient top */ --teal-500: #166A75; /* light teal — hovers, links */ --teal-450: #12606B; /* b2b radial mid */ /* ---------- GOLD · champagne accent ---------- */ --gold-700: #9A7A33; /* gold-text — AA-safe gold on cream */ --gold-600: #C5A059; /* signature gold */ --gold-550: #B48F48; /* gold hover */ --gold-500: #DFBA73; /* champagne */ --gold-450: #E9CB8B; /* light champagne (tag gradient) */ --gold-400: #EAD09A; /* pale gold (button gradient) */ --gold-300: #D9B679; /* numeral gold (on dark) */ --gold-200: #F4EAD4; /* champ-light wash */ --gold-100: #F5EAD6; /* wallet card wash */ /* ---------- CREAM · warm paper surfaces ---------- */ --cream-100: #FFFEFB; /* card face top */ --cream-150: #FFFBF5; /* card face bottom */ --cream-200: #FBF7F0; /* page bg top */ --cream-250: #FAF8F5; /* popup / app paper */ --cream-300: #FAF6F0; /* web-app paper */ --cream-350: #F5EFEB; /* warm inset panel */ --cream-400: #F4ECE3; /* page bg bottom · Atelier base */ --cream-500: #EFE5DB; /* deep cream — Atelier dock fade */ --cream-600: #EDE4DA; /* placeholder weave dark */ /* ---------- EXPERT ACCENTS · per-persona (the AI team) ---------- */ --expert-stylist: #C8553D; /* Ника · terracotta */ --expert-stylist-soft: rgba(200,85,61,.12); --expert-colorist: #2E5BD6; /* Марк · cobalt */ --expert-colorist-soft: rgba(46,91,214,.12); --expert-tailor: #4E7035; /* Лев · olive */ --expert-tailor-soft: rgba(78,112,53,.14); --expert-shopper: #D2922A; /* Антон · amber */ --expert-shopper-soft: rgba(210,146,42,.14); --expert-photographer: #B5862F; /* Крис · antique gold */ --expert-photographer-soft: rgba(181,134,47,.14); /* Runtime theme hooks (1.1) — the panel sets these to the speaking expert; components read the semantic name instead of a hard-coded hex. Set them directly, or use the [data-expert] attribute map below the :root block. */ --expert-accent: var(--expert-stylist); --expert-accent-soft: var(--expert-stylist-soft); /* ---------- LINES & SEMANTIC ---------- */ --line: rgba(28,22,17,.10); /* default hairline */ --line-soft: rgba(28,22,17,.07); /* faint inner rule */ --line-gold: rgba(197,160,89,.42); /* gold hairline / ring */ --line-on-dark:rgba(255,255,255,.08); /* rule on dark surfaces */ --success: #C5A059; /* confirmations read as gold, not green */ --error: #e74c3c; /* destructive / empty-wallet */ } /* Per-expert theming via attribute (1.1) — put data-expert on the panel root and the whole surface cross-fades to that expert's accent. */ [data-expert="stylist"] { --expert-accent: var(--expert-stylist); --expert-accent-soft: var(--expert-stylist-soft); } [data-expert="colorist"] { --expert-accent: var(--expert-colorist); --expert-accent-soft: var(--expert-colorist-soft); } [data-expert="tailor"] { --expert-accent: var(--expert-tailor); --expert-accent-soft: var(--expert-tailor-soft); } [data-expert="shopper"] { --expert-accent: var(--expert-shopper); --expert-accent-soft: var(--expert-shopper-soft); } [data-expert="photographer"] { --expert-accent: var(--expert-photographer); --expert-accent-soft: var(--expert-photographer-soft); } :root { /* ============================================================ SEMANTIC ALIASES — prefer these in product code ============================================================ */ --brand: var(--teal-600); --brand-hover: var(--teal-500); --brand-press: var(--teal-700); --accent-gold: var(--gold-600); --accent-gold-text: var(--gold-700); --text-primary: var(--ink-900); --text-body: var(--ink-700); --text-muted: var(--ink-450); --text-faint: var(--ink-300); --text-on-brand: var(--cream-200); --text-on-dark: #F4ECE3; --surface-page: var(--cream-200); --surface-card: var(--cream-100); --surface-inset: var(--cream-400); --surface-warm: var(--cream-350); --surface-dark: var(--ink-900); --border-default: var(--line); --border-gold: var(--line-gold); --focus-ring: rgba(22,106,117,.40); } /* ============================================================ 10of10 · Typography tokens Two registers share one voice: • MARKETING — CoFo Raffine (display) + Golos Text (body), Playfair Accent italic for the «of» connector & emphasis. • PRODUCT — Playfair Display (serif headings/quotes) + Outfit (UI sans). Numerals & the wordmark are always CoFo Raffine. ============================================================ */ :root { /* ---------- families ---------- */ --font-display: 'CoFo Raffine', 'Didot', 'Georgia', serif; /* logo, big numerals, prices */ --font-serif: 'Playfair Display', 'Georgia', serif; /* product headings, verdicts */ --font-accent: 'Playfair Accent', 'Playfair Display', 'Georgia', serif; /* italic connector & emphasis */ --font-hero: 'Gloock', 'CoFo Raffine', 'Didot', 'Georgia', serif; /* «10/10» на обложке — и больше нигде */ --font-sans: 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* marketing body */ --font-ui: 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* product UI — Cyrillic-native */ /* ---------- marketing modular scale · base 17 · ratio ~1.25 ---------- */ --fs-eyebrow: 11px; /* @kind font */ --fs-small: 13.5px; /* @kind font */ --fs-body: 17px; /* @kind font */ --fs-lead: clamp(18px, 1.2vw, 20px); /* @kind font */ --fs-h3: clamp(22px, 1.7vw, 26px); /* @kind font */ --fs-h2: clamp(30px, 3.6vw, 44px); /* @kind font */ --fs-h1: clamp(40px, 5.2vw, 58px); /* @kind font */ --fs-display: clamp(56px, 8vw, 96px); /* @kind font */ /* ---------- product UI scale (Atelier panel · 393px width) ---------- */ --fs-ui-micro: 9px; /* @kind font */ --fs-ui-tiny: 10px; /* @kind font */ --fs-ui-xs: 11px; /* @kind font */ --fs-ui-sm: 12px; /* @kind font */ --fs-ui-base: 14px; /* @kind font */ --fs-ui-quote: 19px; /* @kind font */ --fs-ui-name: 24px; /* @kind font */ --fs-ui-score: 62px; /* @kind font */ /* ---------- weights ---------- */ --fw-thin: 100; /* @kind font */ --fw-light: 300; /* @kind font */ --fw-regular: 400; /* @kind font */ --fw-medium: 500; /* @kind font */ --fw-semibold:600; /* @kind font */ --fw-bold: 700; /* @kind font */ /* ---------- line-heights ---------- */ --lh-tight: 1.08; /* @kind font */ --lh-snug: 1.16; /* @kind font */ --lh-body: 1.65; /* @kind font */ --lh-quote: 1.6; /* @kind font */ /* ---------- letter-spacing ---------- */ --ls-display: -.02em; /* @kind font */ --ls-heading: -.015em; /* @kind font */ --ls-eyebrow: .24em; /* @kind font */ --ls-label: .12em; /* @kind font */ --ls-mark: .005em; /* @kind font */ } /* ============================================================ 10of10 · Spacing, radii & layout tokens Generous editorial rhythm on the marketing side; tight, precise spacing inside the 393px Atelier panel. Values lifted verbatim from source — do not snap to a 4/8px grid. ============================================================ */ :root { /* ---------- spacing scale ---------- */ --space-1: 4px; --space-2: 7px; /* chip gap, swatch gap */ --space-3: 11px; --space-4: 14px; /* head gap */ --space-5: 18px; /* tight grid gap */ --space-6: 22px; /* grid gap */ --space-7: 28px; /* wrap padding */ --space-8: 40px; --space-9: 56px; /* section head margin */ --space-10: 96px; /* section padding-y */ --space-11: 104px; /* dense section padding-y */ /* ---------- layout ---------- */ --maxw: 1140px; /* @kind spacing */ --maxw-app: 480px; /* @kind spacing */ --panel-w: 393px; /* @kind spacing */ --panel-h: 852px; /* @kind spacing */ --wrap-pad: 28px; --sec-pad-y: 96px; --head-mb: 56px; /* ---------- radii ---------- */ --r-xs: 8px; /* inputs, small chips */ --r-sm: 12px; /* upload areas, photo frames */ --r-md: 14px; /* measure tiles, wallet card */ --r-lg: 18px; /* product cards, member photos */ --r-card: 22px; /* marketing cards */ --r-island: 26px; /* live band / b2b island */ --r-plate: 28px; /* hero logo plate, app cards */ --r-pill: 999px; /* buttons, badges, tags */ } /* ============================================================ 10of10 · Effects — shadows, motion, borders, paper textures The brand's surfaces read as warm pressed paper: layered soft shadows, an inset top highlight, fine dot/halftone textures, and blurred warm glow orbs. Motion is expo-out for entrances, gentle spring (back) for tactile press/lift. ============================================================ */ :root { /* ---------- shadows ---------- */ --shadow-glass: 0 4px 10px rgba(28,22,17,.03), 0 22px 46px -12px rgba(28,22,17,.14); --shadow-glass-soft: 0 2px 6px rgba(28,22,17,.03), 0 14px 30px -12px rgba(28,22,17,.10); --shadow-btn: 0 10px 24px rgba(22,17,12,.20); --shadow-btn-hover: 0 14px 30px rgba(22,17,12,.28); --shadow-card-hover: 0 2px 5px rgba(28,22,17,.04), 0 20px 44px -14px rgba(28,22,17,.16); --shadow-magnet: 0 0 0 1px rgba(197,160,89,.55), 0 30px 60px -18px rgba(28,22,17,.22); --shadow-inset-top: inset 0 1px 0 rgba(255,255,255,.9); /* paper top highlight */ --shadow-photo: 0 2px 4px rgba(28,22,17,.06), 0 22px 40px -18px rgba(28,22,17,.4); /* ---------- motion · easing ---------- */ --ease-out: cubic-bezier(.22, 1, .36, 1); /* @kind other */ --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* @kind other */ --ease-expo: cubic-bezier(.16, 1, .3, 1); /* @kind other */ --ease-smooth: cubic-bezier(.19, 1, .22, 1); /* @kind other */ --ease-inout: cubic-bezier(.4, 0, .2, 1); /* @kind other */ /* ---------- motion · duration ---------- */ --dur-fast: .15s; /* @kind other */ --dur-base: .3s; /* @kind other */ --dur-slow: .45s; /* @kind other */ --dur-reveal: .65s; /* @kind other */ --lift-hover: -2px; /* @kind other */ --lift-card: -6px; /* @kind other */ --press-scale: .97; /* @kind other */ /* ---------- motion · choreography (Atelier live session) ---------- Previously hard-coded inside component descriptions; tokenised in 1.1 so the whole live session can be re-timed (or per-expert themed) at once. accent-text cross-fade · glow cross-fade · numeral count-up · Polaroid printfeed · per-word karaoke cadence · scroll stagger · speaking pulse. */ --dur-accent-fade: .45s; /* @kind other */ --dur-glow-fade: .7s; /* @kind other */ --dur-count-up: 1.1s; /* @kind other */ --dur-printfeed: 1.6s; /* @kind other */ --cadence-karaoke: 260ms; /* @kind other */ --stagger-child: 100ms; /* @kind other */ --speak-pulse: 1.1s; /* @kind other */ /* ---------- paper textures ---------- */ /* Retired: the fine dotted paper grain has been removed system-wide for a clean, flat cream surface. Tokens kept as `none` so existing `var(--tex-*)` background layers resolve to a no-op. The colorist's fabric Swatch keeps its own woven-twill texture (defined inline in Swatch.jsx), which is intentional and unaffected. */ --tex-dot: none; /* @kind other */ --tex-dot-fine: none; /* @kind other */ --tex-halftone: none; /* @kind other */ /* ---------- warm gradients ---------- */ --grad-page: linear-gradient(180deg, #FBF7F0 0%, #F4ECE3 100%); /* @kind other */ --grad-card: linear-gradient(180deg, var(--cream-100), var(--cream-150)); /* @kind other */ --grad-brand: linear-gradient(180deg, #0E5A63, #0A4C54); /* @kind other */ --grad-gold: linear-gradient(180deg, #EAD09A, #DFBA73); /* @kind other */ --grad-dark: radial-gradient(120% 120% at 50% 0%, #14110D, #0E0B08); /* @kind other */ --glow-gold: radial-gradient(circle, rgba(200,150,90,.20), transparent 66%); /* @kind other */ --glow-teal: radial-gradient(circle, rgba(10,76,84,.14), transparent 68%); /* @kind other */ /* ---------- blur ---------- */ --blur-glass: blur(18px) saturate(140%); /* @kind other */ } /* ============================================================ REDUCED MOTION — visible control + system setting (1.1) The brand honours the OS `prefers-reduced-motion`, but 1.1 also gives the user a real stop button: the MotionToggle component sets `data-reduce-motion` on (persisted). Either path neutralises all animation & transition choreography system-wide — the karaoke transcript, printfeed, glow cross-fades, count-ups and hover lifts all settle to their end state. ============================================================ */ html[data-reduce-motion] *, html[data-reduce-motion] *::before, html[data-reduce-motion] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }