/* ============================================================ TOKENS.CSS — общая база дизайн-системы "Смелость" для сайта. Собрано дословно из присланных дизайнером файлов (ТЗ-редизайн-главной.md, раздел 2.2): colors → fonts → typography → spacing → motion → texture, плюс переменные тем "ярко/нежно" сразу после цветов. ============================================================ */ /* ============================================================ 1 · ЦВЕТА (tokens/colors.css) ============================================================ */ /* ============================================================ СМЕЛОСТЬ — COLOR TOKENS A loud, hand-made palette. Saturated primaries on warm paper. Use colors bravely and in unexpected pairings — that is the brand. ============================================================ */ :root { /* ---- Brand hues (base palette) ---- Validated 5 июн 2026 against 46 client references (docs/recipes.md). Where a reference hue was firmer, we moved the base token to it and kept the previous value available as a sibling. */ --c-pink: #FF4FA3; /* hot bubblegum — the signature */ --c-fuchsia: #FF7BAC; /* softer reference fuchsia (ref-validated) */ --c-pink-soft: #FFB8DE; /* candy tint */ --c-blue: #3B7CF0; /* electric cobalt — the brave blue */ --c-cornflower: #99B7F5; /* васильковый — soft reference blue (ref-validated) */ --c-sky: #9CC9F5; /* soft sky tint */ --c-purple: #826DEE; /* grape — creative, psychological (ref-validated) */ --c-lilac: #CDB8FF; /* lavender tint */ --c-lime: #CBE84B; /* chartreuse zing */ --c-lettuce: #D8F382; /* салат — soft lime (ref-validated) */ --c-green: #267F53; /* deep saturated meadow (ref-validated · client ♥) */ --c-tomato: #F2552C; /* tomato red-orange */ --c-red: #EB4213; /* loud reference red (ref-validated) */ --c-orange: #F5793B; /* tangerine (ref-validated) */ --c-yellow: #FCCA59; /* warm yolk (ref-validated) */ --c-mauve: #B79AC6; /* dusty lavender (big-surface tint) */ /* ---- Neutrals (warm, never cold grey) ---- */ --c-paper: #F7F1E6; /* cream — default canvas */ --c-paper-2: #FBF7EF; /* lifted cream */ --c-white: #FFFFFF; --c-ink: #211C2E; /* warm near-black — text & outlines */ --c-ink-70: rgba(33, 28, 46, 0.66); --c-ink-45: rgba(33, 28, 46, 0.45); --c-ink-12: rgba(33, 28, 46, 0.12); /* ---- On-color text (legible pairings) ---- */ --on-pink: var(--c-ink); --on-blue: var(--c-white); --on-purple: var(--c-white); --on-lime: var(--c-ink); --on-green: var(--c-white); --on-tomato: var(--c-white); --on-yellow: var(--c-ink); /* ============================================================ SEMANTIC ALIASES — design against these, not the raw hues. ============================================================ */ --bg: var(--c-paper); --bg-mauve: var(--c-mauve); --surface-card: var(--c-white); --surface-sunk: var(--c-paper-2); --text-strong: var(--c-ink); --text-body: var(--c-ink); --text-muted: var(--c-ink-70); --text-faint: var(--c-ink-45); --text-invert: var(--c-white); --line: var(--c-ink); /* the bold hand-drawn outline */ --line-soft: var(--c-ink-12); /* Primary brand action = grape purple; pink is the accent twin */ --brand-primary: var(--c-purple); --brand-accent: var(--c-pink); --brand-pop: var(--c-lime); /* Status (kept playful, still readable) */ --ok: var(--c-green); --warn: var(--c-orange); --danger: var(--c-tomato); --info: var(--c-blue); --focus-ring: var(--c-purple); /* ============================================================ CANDY GRADIENTS — soft, single-family, diagonal. Use SPARINGLY (the brand is mostly flat color). Never the bluish-purple SaaS gradient — these are warm "конфетные" washes from the references. ============================================================ */ --grad-sunset: linear-gradient(135deg, #FF7BAC 0%, #F5793B 100%); /* @kind other */ /* fuchsia → orange */ --grad-butter: linear-gradient(135deg, #FCCA59 0%, #F7F1E6 100%); /* @kind other */ /* yolk → cream */ --grad-meadow: linear-gradient(135deg, #D8F382 0%, #267F53 100%); /* @kind other */ /* lettuce → green */ --grad-dusk: linear-gradient(135deg, #826DEE 0%, #FF7BAC 100%); /* @kind other */ /* purple → fuchsia */ /* Paper grain — overlay at ~3–5% so any color reads as printed, not flat. Drive it with the `.grain` utility in tokens/texture.css. */ --grain-ink: rgba(33, 28, 46, 0.045); } /* ============================================================ 1.1 · ТЕМА "ЯРКО / НЕЖНО" (ТЗ-редизайн-главной.md, раздел 2.3) Переключатель в шапке ставит data-vf-theme="soft" на (для яркой темы атрибут отсутствует). Выбор хранится в localStorage['vf-theme']. Значения дословно из README дизайнера ("Ключевая механика"). ============================================================ */ :root { /* ЯРКАЯ (по умолчанию) */ --vf-lime: var(--c-lime); /* #CBE84B */ --vf-pink-plate: var(--c-pink); /* #FF4FA3 */ --vf-blue-plate: var(--c-blue); /* #3B7CF0 */ --vf-int-ink: var(--c-white); /* текст на синей плашке интенсивности */ --vf-int-accent: var(--c-lime); --vf-int-hand: var(--c-sky); /* #9CC9F5 */ --vf-about-bg: var(--c-yellow); /* #FCCA59 */ --vf-game-primary: var(--c-pink); } [data-vf-theme="soft"] { /* НЕЖНАЯ */ --vf-lime: var(--c-lettuce); /* #D8F382 */ --vf-pink-plate: var(--c-pink-soft); /* #FFB8DE */ --vf-blue-plate: var(--c-cornflower); /* #99B7F5 */ --vf-int-ink: var(--c-ink); /* #211C2E */ --vf-int-accent: var(--c-purple); /* #826DEE */ --vf-int-hand: var(--c-purple); --vf-about-bg: var(--grad-butter); /* yolk → cream градиент */ --vf-game-primary: var(--c-fuchsia); /* #FF7BAC */ } /* Секции, которые красятся через --vf-*, получают transition ниже (recipes/smelost.css добавляет per-section .grain и т.п.; сам переход фона объявлен тут, один раз). */ [data-vf-theme] , :root { --vf-theme-transition: background-color .35s ease; } /* ============================================================ 2 · ШРИФТЫ (tokens/fonts.css) ------------------------------------------------------------ Из присланного файла взята только рабочая часть: подключение трех шрифтов, реально используемых на странице (Unbounded, Rubik, Caveat). Блок @font-face для акцентного шрифта "Le Murmure" не перенесен: самого файла шрифта (assets/fonts/LeMurmure.woff) нет в присланных материалах, в разделе 6 ТЗ этого шрифта нет в списке для этого этапа, и ни в одной из 14 секций макета он не используется — подключать его значило бы просто добавить лишний неудачный запрос в сеть. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;600;700;800;900&family=Rubik:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=Caveat:wght@500;600;700&display=swap'); /* ============================================================ 3 · ТИПОГРАФИКА (tokens/typography.css) ============================================================ */ /* ============================================================ СМЕЛОСТЬ — TYPOGRAPHY TOKENS Loud rounded display + a calm rounded grotesque for reading. ============================================================ */ :root { /* ---- Families ---- */ /* Primary display = Unbounded (bold, rounded, readable, full Cyrillic). This is the brave headline voice («СМЕЛО»). */ --font-display: 'Unbounded', 'Rubik', system-ui, sans-serif; /* Rare arty accent = Le Murmure (narrow all-caps, harder to read, self-hosted w/ Cyrillic). Use ONLY for special moments — a single poster word, a cover — never for the bulk of a headline. */ --font-display-accent: 'Le Murmure', 'Unbounded', serif; --font-body: 'Rubik', system-ui, -apple-system, sans-serif; --font-hand: 'Caveat', 'Rubik', cursive; /* ---- Weights ---- */ --fw-reg: 400; /* @kind font */ --fw-med: 500; /* @kind font */ --fw-semi: 600; /* @kind font */ --fw-bold: 700; /* @kind font */ --fw-black: 800; /* @kind font */ --fw-ultra: 900; /* @kind font */ /* ---- Type scale (fluid-ish, fixed px for tokens) ---- */ --fs-display: 88px; /* hero shout */ --fs-h1: 56px; --fs-h2: 40px; --fs-h3: 28px; --fs-h4: 22px; --fs-lg: 19px; --fs-base: 16px; --fs-sm: 14px; --fs-xs: 12px; --fs-hand: 34px; /* marker accents run large */ /* ---- Line heights ---- */ --lh-tight: 0.96; /* @kind font */ /* display — packed, posters */ --lh-snug: 1.12; /* @kind font */ --lh-normal: 1.45; /* @kind font */ --lh-relaxed: 1.62; /* @kind font */ /* ---- Letter spacing ---- */ --ls-tight: -0.02em; /* @kind font */ --ls-normal: 0; /* @kind font */ --ls-wide: 0.04em; /* @kind font */ --ls-caps: 0.12em; /* @kind font */ /* eyebrow / label all-caps */ /* ---- Semantic roles ---- */ --text-display-font: var(--font-display); --text-display-weight: var(--fw-ultra); --text-heading-font: var(--font-display); --text-heading-weight: var(--fw-bold); --text-body-font: var(--font-body); --text-eyebrow-spacing: var(--ls-caps); } /* Convenience helper classes (optional; tokens above are the contract) */ .t-display { font-family: var(--font-display); font-weight: var(--fw-ultra); font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--text-strong); } .t-h1 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); } .t-h2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h2); line-height: var(--lh-snug); } .t-h3 { font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--fs-h3); line-height: var(--lh-snug); } .t-body { font-family: var(--font-body); font-weight: var(--fw-reg); font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--text-body); } .t-eyebrow { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-xs); letter-spacing: var(--ls-caps); text-transform: uppercase; } .t-hand { font-family: var(--font-hand); font-weight: var(--fw-bold); font-size: var(--fs-hand); line-height: 1; } /* ============================================================ 4 · ОТСТУПЫ, РАДИУСЫ, ГРАНИЦЫ, ТЕНИ (tokens/spacing.css) ============================================================ */ /* ============================================================ СМЕЛОСТЬ — SPACING, RADII, BORDERS, SHADOWS Chunky and generous. Big radii, thick outlines, hard sticker shadows. Nothing timid. ============================================================ */ :root { /* ---- Spacing scale (4px base) ---- */ --s-0: 0; /* @kind spacing */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px; /* ---- Radii — rounded and friendly ---- */ --r-xs: 8px; --r-sm: 14px; --r-md: 20px; --r-lg: 28px; --r-xl: 40px; --r-2xl: 56px; --r-pill: 999px; /* organic blob radii — use as border-radius for handmade, wonky shapes. Nothing in this brand is a perfect square or circle; reach for these. */ --r-blob: 62% 38% 55% 45% / 52% 56% 44% 48%; /* @kind radius */ --r-blob-2: 40% 60% 64% 36% / 58% 42% 58% 42%; /* @kind radius */ --r-blob-3: 70% 30% 38% 62% / 42% 64% 36% 58%; /* @kind radius */ --r-blob-4: 33% 67% 58% 42% / 63% 38% 62% 37%; /* @kind radius */ --r-blob-5: 50% 50% 36% 64% / 64% 40% 60% 36%; /* @kind radius */ /* ---- Tilt — nothing in this brand sits perfectly straight. Rotate cards, plates and stickers a degree or three. (docs/recipes.md) ---- */ --tilt-xs: -2deg; /* @kind other */ --tilt-sm: 3deg; /* @kind other */ --tilt-md: -5deg; /* @kind other */ --tilt-lg: 8deg; /* @kind other */ --tilt-xl: -12deg; /* @kind other */ /* ---- Border widths — the bold outline is core to the look ---- */ --bw-hair: 1.5px; --bw: 2.5px; /* default playful outline */ --bw-thick: 4px; /* hero outline / sticker edge */ --bw-chonk: 6px; /* ---- Soft shadows — the brand's primary depth (no hard comic edges) ---- */ --sh-1: 0 4px 14px rgba(33, 28, 46, 0.08); --sh-2: 0 10px 28px rgba(33, 28, 46, 0.12); --sh-3: 0 18px 46px rgba(33, 28, 46, 0.16); /* colored glows — a saturated lift under bright elements */ --glow-pink: 0 8px 22px rgba(255, 79, 163, 0.34); --glow-purple: 0 8px 22px rgba(130, 109, 238, 0.34); --glow-blue: 0 8px 22px rgba(59, 124, 240, 0.32); --glow-lime: 0 8px 22px rgba(203, 232, 75, 0.45); /* ---- Legacy hard "sticker" shadows — kept for rare poster/print use ---- */ --sh-sticker: 4px 4px 0 var(--c-ink); --sh-sticker-lg: 7px 7px 0 var(--c-ink); --sh-sticker-xl: 10px 10px 0 var(--c-ink); /* colored press shadows — pair with the element's own border color */ --sh-pop-pink: 0 5px 0 #C2306F; --sh-pop-purple: 0 5px 0 #5E37C0; --sh-pop-blue: 0 5px 0 #2657B8; --sh-pop-lime: 0 5px 0 #93AE1E; /* ---- Soft shadows (aliases) ---- */ --sh-soft: 0 8px 24px rgba(33, 28, 46, 0.10); --sh-soft-lg: 0 18px 48px rgba(33, 28, 46, 0.16); --sh-float: 0 14px 0 -6px rgba(33,28,46,0.08), 0 24px 40px rgba(33,28,46,0.14); /* ---- Focus ring ---- */ --ring: 0 0 0 3px var(--c-paper), 0 0 0 6px var(--focus-ring); /* ---- Layout ---- */ --container: 1200px; --gutter: var(--s-6); } /* ============================================================ 5 · АНИМАЦИИ (tokens/motion.css) ============================================================ */ /* ============================================================ СМЕЛОСТЬ — MOTION "Where everything moves." Bouncy, alive, a little wobbly. Decorative loops are gentle; interactive motion is springy. Respect prefers-reduced-motion — utilities below opt out. ============================================================ */ :root { --dur-xfast: 110ms; /* @kind other */ --dur-fast: 170ms; /* @kind other */ --dur: 260ms; /* @kind other */ --dur-slow: 440ms; /* @kind other */ --dur-amble: 3.2s; /* @kind other */ /* decorative idle loops */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */ --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */ /* overshoot pop */ --ease-back: cubic-bezier(0.34, 1.42, 0.64, 1); /* @kind other */ } /* ---- Keyframes: the brand's living, hand-made motion ---- */ @keyframes sm-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } @keyframes sm-wobble { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } } @keyframes sm-jiggle { 0%, 100% { transform: rotate(-1.2deg) scale(1); } 50% { transform: rotate(1.4deg) scale(1.015); } } @keyframes sm-spin { to { transform: rotate(360deg); } } @keyframes sm-pop-in { 0% { transform: scale(0.8) rotate(-4deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } } @keyframes sm-bob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-6px) rotate(1.5deg); } } /* ---- Utility classes (decorative; safe to drop on doodles) ---- */ .anim-float { animation: sm-float var(--dur-amble) var(--ease-in-out) infinite; } .anim-wobble { animation: sm-wobble 2.4s var(--ease-in-out) infinite; } .anim-jiggle { animation: sm-jiggle 1.8s var(--ease-in-out) infinite; } .anim-bob { animation: sm-bob 2.8s var(--ease-in-out) infinite; } .anim-spin { animation: sm-spin 14s linear infinite; } @media (prefers-reduced-motion: reduce) { .anim-float, .anim-wobble, .anim-jiggle, .anim-bob, .anim-spin { animation: none !important; } } /* ============================================================ 6 · ТЕКСТУРА И НАКЛОНЫ (tokens/texture.css) ============================================================ */ /* ============================================================ СМЕЛОСТЬ — TEXTURE & TILT UTILITIES The hand-printed feel from the references (docs/recipes.md): paper grain over color, a candy gradient wash, and "nothing sits straight" tilt helpers. Decorative only — safe to drop on any surface. Grain & gradients are opt-in via class. ============================================================ */ /* ---- Paper grain ------------------------------------------------ Add `.grain` to any positioned, color-filled surface (card, hero, color block). A faint fractal-noise overlay makes the fill read as printed paper, not a flat swatch. Inherits the element's radius. */ .grain { position: relative; isolation: isolate; } .grain::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; opacity: 0.5; /* the SVG already carries ~9% alpha → ~4.5% net */ mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.09'/%3E%3C/svg%3E"); background-size: 160px 160px; } /* keep grain BEHIND the element's own content */ .grain > * { position: relative; z-index: 2; } /* ---- Candy gradient washes (use sparingly) ---- */ .bg-grad-sunset { background-image: var(--grad-sunset); } .bg-grad-butter { background-image: var(--grad-butter); } .bg-grad-meadow { background-image: var(--grad-meadow); } .bg-grad-dusk { background-image: var(--grad-dusk); } /* ---- Tilt — hand-placed rotation. Pair with a hover that straightens (transform: none) for a lively "settle" on interaction. ---- */ .tilt-xs { transform: rotate(var(--tilt-xs)); } .tilt-sm { transform: rotate(var(--tilt-sm)); } .tilt-md { transform: rotate(var(--tilt-md)); } .tilt-lg { transform: rotate(var(--tilt-lg)); } .tilt-xl { transform: rotate(var(--tilt-xl)); }