/* ============================================================ * Мой SEO — marketing-landing design tokens (CANONICAL) * Source of truth for the landing layer; brand values match * design.md §Tokens (lifted from design/moyseo-design-system-v2, * NOT @imported from it — see design.md §Notes). * Axes: light paper (L 96.5%) / geometric-sans display / * chromatic-other accent (green ~169°). * The landing serves a byte-identical copy at landing/css/tokens.css — * keep the two files in sync (edit here, copy there). * ============================================================ */ :root { /* ---------- Colour · ground is the DARKER surface, cards are lighter ---------- */ --color-paper: oklch(96.5% 0.010 87.5); /* #f6f3ec canvas */ --color-paper-2: oklch(99.4% 0.007 88.6); /* #fffdf8 raised cards */ --color-ink: oklch(26.5% 0.037 165.6); /* #122b21 13.6:1 on paper */ --color-ink-2: oklch(52.5% 0.030 162.4); /* #5b7065 4.8:1 muted */ --color-rule: oklch(87.7% 0.024 88.2); /* #ddd6c5 hairlines */ --color-accent: oklch(33.2% 0.055 169.0); /* #123f31 evergreen CTA */ --color-accent-ink: oklch(97.2% 0.013 134.9); /* #f2f8ef on accent 10.9:1 */ --color-highlight: oklch(90.8% 0.166 124.3); /* #c9f36f lime — ONE moment */ --color-highlight-ink: oklch(41.4% 0.095 125.6); /* #3f5410 on lime 6.7:1 */ --color-focus: oklch(42.8% 0.075 166.5); /* #1c5c46 ring 7.1:1 */ --color-error: oklch(45% 0.14 27); /* form errors, 5.9:1 — NOT the app's coral */ /* ---------- Type ---------- */ --font-display: "Unbounded", sans-serif; /* display AND every number, "tnum" */ --font-body: "Onest", system-ui, sans-serif; /* Scale · major third 1.25 from 16px; landing display goes past the app's 56px cap */ --text-xs: 0.75rem; /* 12px — labels only, never body */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-md: 1.25rem; /* 20px */ --text-lg: 1.5625rem; /* 25px */ --text-xl: 1.953rem; /* 31px */ --text-2xl: 2.441rem; /* 39px */ --text-display-s: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); --text-display: clamp(2.05rem, 1.3rem + 3.4vw, 4.3rem); /* Unbounded is wide — capped ~69px */ /* ---------- Space · 4pt scale, role-named ---------- */ --space-3xs: 0.125rem; /* 2px */ --space-2xs: 0.25rem; /* 4px */ --space-xs: 0.5rem; /* 8px */ --space-sm: 0.75rem; /* 12px */ --space-md: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2.5rem; /* 40px */ --space-2xl: 4rem; /* 64px */ --space-3xl: 6rem; /* 96px */ --space-4xl: 9rem; /* 144px */ --page-gutter: clamp(1rem, 4vw, 2.5rem); --measure: 62ch; /* ---------- Motion · spring is the house feel (entrances, lift); UI state stays ease-out ---------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 420ms; /* ---------- Shape ---------- */ --radius-card: 20px; --radius-panel: 26px; --radius-pill: 999px; --radius-input: 12px; --rule-hair: 1px; /* ---------- Elevation · warm «clay» shadows (ink-anchored, never grey) ---------- */ --shadow-card: 0 1px 2px oklch(26.5% 0.037 165.6 / 0.05), 0 2px 6px oklch(26.5% 0.037 165.6 / 0.05); --shadow-lift: 0 2px 4px oklch(26.5% 0.037 165.6 / 0.05), 0 14px 34px -16px oklch(26.5% 0.037 165.6 / 0.22); --shadow-pop: 0 4px 10px oklch(26.5% 0.037 165.6 / 0.07), 0 22px 44px -18px oklch(26.5% 0.037 165.6 / 0.28); /* ---------- Z · named levels only ---------- */ --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-modal: 400; --z-toast: 500; --z-tooltip: 600; /* ---------- Authority palette · DEMO-ONLY (design.md §Notes) ---------- * The app's categorical source-of-truth hues, lifted from * design/moyseo-design-system-v2/tokens/colors.css. Allowed on the * landing ONLY inside content that explains the model (the live demos) — * never as page chrome or decoration. Always colour + dot + label. * manual=leaf · ai=violet · injected=honey · excluded=coral · pending=sage. * honey-text darkened vs the app (#a1660c → L 53.5%) to clear 4.5:1 * on its own soft fill. */ --auth-manual-solid: oklch(62.2% 0.134 155.6); /* #2e9e63 */ --auth-manual-soft: oklch(94.9% 0.023 153.5); /* #e3f3e7 */ --auth-manual-bd: oklch(88.4% 0.049 157.2); /* #bfe3cc */ --auth-manual-text: oklch(49.4% 0.107 156.0); /* #1d7347 5.1:1 on soft */ --auth-ai-solid: oklch(61.4% 0.207 291.5); /* #8a63f4 */ --auth-ai-soft: oklch(94.5% 0.027 299.5); /* #efe9fd */ --auth-ai-bd: oklch(86.4% 0.069 299.0); /* #d8c9fa */ --auth-ai-text: oklch(51.8% 0.213 288.4); /* #6a44d8 5.2:1 on soft */ --auth-injected-solid: oklch(73.4% 0.142 74.5); /* #dd9a2b */ --auth-injected-soft: oklch(95.5% 0.030 83.6); /* #faefda */ --auth-injected-bd: oklch(89.3% 0.064 84.0); /* #f0d9ac */ --auth-injected-text: oklch(53.5% 0.115 69.2); /* ≈#975f04 4.7:1 on soft */ --auth-excluded-solid: oklch(64.4% 0.171 30.1); /* #e25c4a */ --auth-excluded-soft: oklch(94.9% 0.023 31.1); /* #fde9e5 */ --auth-excluded-bd: oklch(86.0% 0.060 29.9); /* #f6c3ba */ --auth-excluded-text: oklch(52.0% 0.159 30.7); /* #b23a2a 5.1:1 on soft */ --auth-pending-solid: oklch(66.4% 0.020 150.4); /* #8b978d */ --auth-pending-soft: oklch(94.5% 0.009 128.6); /* #ebeee8 */ --auth-pending-bd: oklch(87.8% 0.014 134.9); /* #d3d9d0 */ --auth-pending-text: oklch(48.8% 0.023 159.1); /* #55645b 5.3:1 on soft */ /* ---------- Report band · the page's dark surface ---------- * Derived from locked brand tokens only (ink/paper mixes) — no new hues. * paper on ink = 13.6:1. Elevation on dark = lighter surface, not shadow. */ --color-band: var(--color-ink); --color-band-ink: var(--color-paper); --color-band-muted: color-mix(in oklch, var(--color-paper) 72%, var(--color-ink)); --color-band-tile: color-mix(in oklch, var(--color-ink) 88%, var(--color-paper)); --color-band-rule: color-mix(in oklch, var(--color-paper) 16%, var(--color-ink)); /* Nav bar→pill morph (N10): one duration, one curve across every property */ --dur-morph: 520ms; /* ---------- Living background · the scroll-performance core ---------- * Washes are brand-hue tints for the fixed gradient blobs behind the page. * They are atmosphere, not chrome: content never relies on them for contrast. */ --wash-ever: oklch(92% 0.040 169.0); --wash-lime: oklch(94% 0.085 124.3); --wash-honey: oklch(93% 0.045 87.5); /* Chapter display · larger than --text-display, for the two scroll-chapter * heads only. The giant numeral is for the «100 показов» counter. */ --text-chapter: clamp(2.4rem, 1.4rem + 4.6vw, 5.6rem); --text-numeral: clamp(4.5rem, 3rem + 9vw, 10rem); /* Auto-mode glow · evergreen, never lime (lime stays the catch thread) */ --glow-auto: 0 0 0 1.5px color-mix(in oklch, var(--color-accent) 55%, transparent), 0 10px 34px -8px color-mix(in oklch, var(--color-accent) 38%, transparent); /* Floaters · decorative product-world sprites (parallax layer) */ --shadow-float: 0 6px 14px oklch(26.5% 0.037 165.6 / 0.08), 0 24px 48px -20px oklch(26.5% 0.037 165.6 / 0.24); }