/* ============================================================ * Konfetka.cc · Sketch 012 «Midnight Fitting» · Design Tokens * ============================================================ * * Эталонная dark-by-default тема для editorial-витрины магазина * женского белья «Конфетка» в Смоленске. Палитра — винно-розовая, * не чёрно-серая. Базовый принцип — «полночная примерочная»: * лампа ещё горит, тёплый свет на тёмной поверхности, всё мягко. * * Источники: * – `.planning/sketches/012-midnight-fitting/SHAPE.md` * – `.planning/sketches/011-heritage-warm-standalone/theme.css` (палитра) * – `.impeccable.md` (контекст бренда, anti-goals) * * Токены НЕ привязаны к конкретным компонентам. Это словарь, * на котором поверх соберём UI. * * Все семантические токены идут парой: * - сначала «шкала» (rose-50…900) — числовые уровни цвета, * - потом «семантика» (--color-bg, --color-fg…) — какое значение * играет какую роль в интерфейсе. * Менять можно без правок компонентов: компоненты читают только * семантику. * ============================================================ */ :root { /* ============================================================ * 01 · COLOR SCALES * ============================================================ * Хроматически — всё в красно-розовой зоне. Никакого жёлто- * коричневого подтона. Это даёт «вино + лампа», а не «кофе». * AA-контраст проверен в head-to-head парах ниже. * ============================================================ */ /* Wine — главная dark-шкала. От «густой винный» (bg) до «тёплый кремовый» (text). 900 — самый светлый, 50 — самый тёмный. Перевёрнуто относительно стандартной шкалы, чтобы в dark-режиме `wine-900` читалось как «foreground», `wine-50` — как «background», и существующие компоненты не пришлось переписывать при переключении тем. */ --wine-50: #0F0408; /* deep-deep — финальный CTA-band, под bg */ --wine-100: #1C080F; /* page bg — густой винный, 60% от чёрного */ --wine-200: #25101A; /* surface — карточки, чуть светлее bg */ --wine-300: #2A0E17; /* surface-warm — секции с акцентом */ --wine-400: #3E1A2A; /* border-strong — заметные линии */ --wine-500: #4A2033; /* surface-rose — блок «примерочная» */ --wine-600: #5C2A3D; /* rule — divider крупного формата */ --wine-700: #8A6671; /* fg-faint — disabled-text, footnotes */ --wine-800: #D4AEB6; /* fg-muted — secondary text, метки */ --wine-900: #F8EFE3; /* fg — primary text, явно тёплый кремовый. HSL(34°, 60%, 93%). НЕ #FBF7F2 (был слишком белым, R-B=9, глаз не ловил теплоту, ощущалось «как лампочка»). Текущий R-B=21, теплота читается, AAA-контраст 16.9:1. */ /* Rose — акцентная роза. Используется для CTA, eyebrow, italic-emphasis. На dark-bg должна быть ≥4.5:1 контраста. E0A9B1 на 1C080F = 8.4:1 (AAA), F0D0D4 = 11.2:1 (AAA). */ --rose-300: #C77E89; /* hover на тёмных поверхностях */ --rose-400: #E0A9B1; /* PRIMARY accent — CTA, italic emphasis */ --rose-500: #F0D0D4; /* hover/lifted accent */ --rose-600: #F7E0E3; /* highlight, focus glow tint */ --rose-700: #FCF2F3; /* extreme highlight, почти white */ /* Fuchsia signature — единственное эхо фуксии с визитки 2013 года. Используется максимум на 2-4% площади: подчёркивания italic-слов, dot в chips, hairline под карточками статей при hover. E87A8C на 1C080F = 6.1:1 (AA Large + AA Normal). */ --fuchsia-signature: #E87A8C; --fuchsia-quiet: #F5CCDB; /* для ::selection background */ --fuchsia-bright: #FF8FA3; /* для focus-ring (нужна повышенная заметность) */ /* Functional colors — отдельная шкала для нечастых системных состояний (валидация, ошибки, success). Подмешаны в винную гамму чтобы не выпадали стилистически. */ --color-success: #7FB495; /* приглушённая зелень, без неона. AA на bg */ --color-warning: #E5A867; /* тёплая охра, не жёлтая */ --color-error: #E07385; /* малиновый, не красный — попадает в палитру */ /* ============================================================ * 02 · SEMANTIC COLOR TOKENS * ============================================================ * Единственное, что читают компоненты. Меняй здесь — меняется * всё. Никогда не используем shade-токены напрямую в компонентах. * ============================================================ */ /* Surfaces — слои глубины интерфейса. От самого глубокого (под общим фоном) до самых светлых (карточки). */ --color-bg: var(--wine-100); /* основная подложка страницы */ --color-bg-deep: var(--wine-50); /* финальный CTA-band, ниже всех */ --color-surface: var(--wine-200); /* карточки, popover */ --color-surface-warm: var(--wine-300); /* секции с акцентом, статьи */ --color-surface-rose: var(--wine-500); /* блок «примерочная», featured */ --color-surface-elevated: var(--wine-400); /* всплывающее над surface */ /* Foreground — текст и иконки. Иерархия читаемости. */ --color-fg: var(--wine-900); /* основной текст, headlines */ --color-fg-muted: var(--wine-800); /* secondary, eyebrow, метки */ --color-fg-faint: var(--wine-700); /* footnotes, disabled-текст */ --color-fg-on-accent: var(--wine-100); /* текст на rose-CTA — тёмный */ /* Borders & rules — линии. Hairline = ~1px subtle, rule = крупные дивайдеры между секциями. */ --color-border: var(--wine-400); --color-border-subtle: var(--wine-300); --color-rule: rgba(228, 169, 177, 0.15); /* hairline rose-tinted */ --color-rule-strong: rgba(228, 169, 177, 0.30); /* Interactive — CTA, ссылки, kinetic underlines. */ --color-accent: var(--rose-400); /* primary CTA, italic-em */ --color-accent-hover: var(--rose-500); --color-accent-pressed:var(--rose-300); /* нажатое — чуть темнее */ --color-accent-fg: var(--wine-100); /* текст на rose-CTA */ --color-link: var(--rose-400); --color-link-hover: var(--rose-500); --color-link-visited:var(--rose-300); /* Signature — фуксия для micro-accents. */ --color-signature: var(--fuchsia-signature); --color-signature-quiet: var(--fuchsia-quiet); /* Focus ring — ОБЯЗАТЕЛЬНО заметный. Аудитория 50+ + a11y-требование. Светлый bright-fuchsia держит контраст и на тёмном bg, и на rose-surface, и на CTA-pill. */ --color-focus-ring: var(--fuchsia-bright); /* Functional semantic */ --color-success-fg: var(--color-success); --color-warning-fg: var(--color-warning); --color-error-fg: var(--color-error); /* Selection — кастомный selection-цвет. Не родной браузерный синий — он бьётся с винной палитрой и выглядит инородным. */ --color-selection-bg: var(--fuchsia-quiet); --color-selection-fg: var(--wine-100); /* ============================================================ * 03 · TYPOGRAPHY * ============================================================ * Стек: * Display = Cormorant Garamond — italic как ГЛАВНЫЙ носитель * эмфазиса (как «правда», «каждой» в тексте). Есть * кириллический Text-cut. * Body-serif = Lora — warm middle-ground для статей, кириллица ок. * UI sans = Onest — кнопки, навигация, eyebrow uppercase. * Mono = JetBrains Mono — телефон, адрес, цифры размеров, * даты статей (анкер достоверности). * * Все шкалы fluid через clamp(min, ~vw-based, max). На 1440px * получаем editorial-крупно, на 320px остаёмся читабельны. * Body 17-18px минимум — требование ЦА 50+. * ============================================================ */ /* Font families */ --font-display: 'Cormorant Garamond', 'PT Serif', Georgia, serif; --font-serif: 'Lora', 'PT Serif', Georgia, serif; --font-sans: 'Onest', 'Inter', -apple-system, system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace; /* Type scale — fluid, на 320px → на 1440px. Логика: - Body 17→18px (минимум для ЦА 50+) - H4 22→26px - H3 28→36px - H2 40→62px - H1/display 56→112px (heroic) - Hero-mega 72→160px (только для big-sizes hero) clamp() формула: clamp(min, base + scale*vw, max) где base — для 320px, scale — рост на vw. */ --text-xs: clamp(12px, 11px + 0.3vw, 13px); /* footnotes, legal */ --text-sm: clamp(14px, 13px + 0.3vw, 15px); /* meta, captions */ --text-base: clamp(17px, 16px + 0.3vw, 18px); /* body — DEFAULT */ --text-md: clamp(19px, 18px + 0.3vw, 21px); /* lead-paragraph, важные body */ --text-lg: clamp(22px, 20px + 0.6vw, 26px); /* H4, hero subline */ --text-xl: clamp(28px, 24px + 1.2vw, 36px); /* H3 */ --text-2xl: clamp(34px, 28px + 1.8vw, 46px); /* H2 small */ --text-3xl: clamp(40px, 32px + 2.5vw, 62px); /* H2 large */ --text-4xl: clamp(56px, 40px + 5vw, 84px); /* H1 / display */ --text-5xl: clamp(64px, 44px + 6vw, 112px); /* hero display */ --text-mega: clamp(72px, 48px + 8vw, 160px); /* big-sizes hero, scale-walk */ /* Line-heights */ --leading-display: 1.05; /* плотные заголовки */ --leading-heading: 1.15; /* подзаголовки */ --leading-snug: 1.4; /* lead, intro */ --leading-body: 1.65; /* body — комфортно для long-read */ --leading-loose: 1.8; /* для статей с italic эмфазисом */ /* Letter-spacing */ --tracking-tighter: -0.025em; /* очень крупный display */ --tracking-tight: -0.015em; /* крупные H1/H2 */ --tracking-normal: 0; --tracking-wide: 0.06em; /* eyebrow uppercase */ --tracking-wider: 0.12em; /* small-caps стиль для меток */ /* Font weights — Cormorant использует 400/500/600, Lora 400/500, Onest 400/500/600/700. Не используем bold в body (давит). */ --weight-regular: 400; --weight-medium: 500; --weight-semi: 600; --weight-bold: 700; /* ============================================================ * 04 · SPACING SCALE * ============================================================ * 4pt grid. Все вертикальные ритмы строятся отсюда. * Большие значения (16, 20, 24, 32, 40) — для editorial-воздуха * между секциями. Аудитория 50+ читает медленно — не давить * плотностью. * ============================================================ */ --space-0: 0; --space-px: 1px; /* hairline, micro-detail */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* стандартный разрыв между секциями */ --space-32: 128px; /* большой разрыв для hero-окружений */ --space-40: 160px; /* extra-airy для editorial-композиций */ /* Section rhythm — пресеты для типичных вертикальных разрывов. */ --section-y-sm: var(--space-16); /* компактные блоки */ --section-y-md: var(--space-24); /* стандарт между секциями */ --section-y-lg: var(--space-32); /* hero-окружения, ABOUT */ --section-y-xl: var(--space-40); /* финальный CTA-разворот */ /* ============================================================ * 05 · CONTAINER WIDTHS * ============================================================ * Узкая колонка для статей (читабельная мера ~70 знаков). * Стандарт для главной. Wide для editorial-композиций. * ============================================================ */ --container-prose: 680px; /* статья, single-column reading */ --container-narrow: 860px; /* about, контакты, big-sizes hero */ --container-default: 1120px; /* главная, основной width */ --container-wide: 1280px; /* категории-rail, big-sizes scale-walk */ --container-bleed: 100%; /* fullbleed hero */ /* Padding-inset на разных breakpoint'ах. Адаптивно. */ --container-px-mobile: var(--space-5); /* 20px — комфортно для тапов */ --container-px-tablet: var(--space-8); /* 32px */ --container-px-desktop: var(--space-10); /* 40px */ /* ============================================================ * 06 · RADIUS SCALE * ============================================================ * Editorial → радиусы скромные, не «округлые pill всё подряд». * Pill-форма (full) ТОЛЬКО для CTA-кнопок и chips, остальное * 4-14px. Это держит «серьёзный журнал», а не «pop-up». * ============================================================ */ --radius-none: 0; --radius-xs: 2px; /* hairline-corner для micro-меток */ --radius-sm: 4px; /* карточки категорий */ --radius-md: 8px; /* карточки статей, inputs */ --radius-lg: 14px; /* большие cards, popover */ --radius-xl: 22px; /* hero-photo обрамление */ --radius-full: 9999px; /* pill — CTA, chips */ /* ============================================================ * 07 · ELEVATION (SHADOWS) * ============================================================ * На тёмном bg обычные «чёрные» тени работают плохо * (не видно). Используем тени с wine-tint — красноватый чёрный. * Плюс световые halo (warm-glow от лампы) как приём. * * Иерархия: sm (cards), md (popover), lg (modals), xl (hero photo). * ============================================================ */ --shadow-sm: 0 1px 3px rgba(15, 4, 8, 0.5), 0 1px 2px rgba(15, 4, 8, 0.4); --shadow-md: 0 4px 12px rgba(15, 4, 8, 0.55), 0 2px 4px rgba(15, 4, 8, 0.4); --shadow-lg: 0 12px 32px rgba(15, 4, 8, 0.65), 0 4px 12px rgba(15, 4, 8, 0.45); --shadow-xl: 0 24px 64px rgba(15, 4, 8, 0.75), 0 8px 24px rgba(15, 4, 8, 0.5); /* Inner — для углублённых поверхностей (блок «примерочная»). */ --shadow-inset: inset 0 1px 4px rgba(15, 4, 8, 0.4); /* Glow — тёплое световое пятно «от лампы». Используется в hero как радиальный градиент на фоновой плашке. Не для текста. */ --glow-lamp: radial-gradient(circle, rgba(232, 122, 140, 0.35) 0%, rgba(228, 169, 177, 0.18) 30%, transparent 70%); --glow-lamp-warm: radial-gradient(circle, rgba(229, 168, 103, 0.25) 0%, rgba(232, 122, 140, 0.12) 40%, transparent 75%); /* Focus halo — мягкий glow под focus-ring, добавляет видимость. */ --shadow-focus: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus-ring), 0 0 16px rgba(255, 143, 163, 0.4); /* ============================================================ * 08 · MOTION TOKENS * ============================================================ * Единый ритм анимаций. Если все длительности и easings взяты * отсюда — UI ощущается одной системой. Если каждый компонент * выбирает своё — выглядит как Frankenstein. * * Принципы: * – Micro (hover, link-underline) = 150-200ms ease-out * – State (open/close, slide-in) = 250-400ms cubic-bezier * – Scene (page transitions, hero) = 600-1000ms cubic-bezier * – Exit animations короче enter на ~30% (feel responsive) * ============================================================ */ /* Durations */ --dur-instant: 80ms; /* tap-feedback (минимум для восприятия) */ --dur-fast: 150ms; /* hover, button press */ --dur-quick: 200ms; /* link-underline scaleX */ --dur-base: 250ms; /* default state-change */ --dur-medium: 350ms; /* drawer, popover, snap */ --dur-slow: 600ms; /* hero kinetic, big-typo reveal */ --dur-grand: 900ms; /* stroke-draw silhouette, scene-transition */ /* Exit-faster pairs — для парных enter/exit. */ --dur-exit-fast: 100ms; --dur-exit-base: 200ms; --dur-exit-medium: 250ms; /* Easings — каждый имеет смысл. */ --ease-linear: linear; --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); /* default — entering */ --ease-in: cubic-bezier(0.4, 0, 1, 1); /* exiting, fade-out */ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* state-change */ --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1); /* expressive entrance */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* мягкий overshoot */ --ease-anticipate:cubic-bezier(0.68, -0.6, 0.32, 1.6); /* drama, hero only */ /* Stagger delays — для последовательного появления элементов (categories grid, big-sizes scale-walk). */ --stagger-fast: 30ms; --stagger-base: 60ms; --stagger-slow: 120ms; /* ============================================================ * 09 · INTERACTION STATE TOKENS * ============================================================ * Centralized opacity / brightness modifiers для интерактивных * элементов. Если применять везде одинаково — UI ощущается * как одна система. * ============================================================ */ --opacity-disabled: 0.4; --opacity-readonly: 0.7; --opacity-overlay: 0.6; /* scrim под modal */ --opacity-watermark:0.06; /* силуэт-watermark в hero */ /* Hover-lift — translate Y на hover для CTA, карточек. */ --lift-sm: translateY(-1px); --lift-md: translateY(-2px); --lift-lg: translateY(-4px); /* Pressed — масштабирование для tactile feedback на мобильных. */ --press-scale: scale(0.98); /* ============================================================ * 10 · Z-INDEX SCALE * ============================================================ * Дисциплинированная шкала. Никогда не пишем `z-index: 9999` * случайно — пишем `var(--z-modal)`. * ============================================================ */ --z-base: 0; --z-raised: 1; /* поднятые карточки */ --z-sticky: 10; /* sticky CTA-bar mobile */ --z-header: 20; /* шапка */ --z-dropdown: 30; /* меню, popover */ --z-overlay: 40; /* scrim */ --z-modal: 50; /* лайтбоксы, модалки */ --z-toast: 60; /* уведомления */ --z-tooltip: 70; /* всплывающие подсказки */ --z-debug: 9000; /* dev-overlays (sketch toolbar) */ /* ============================================================ * 11 · BREAKPOINTS (для @media — не как CSS-vars, а как референс) * ============================================================ * 320px — small phone (iPhone SE 1st gen) * 375px — стандартный iPhone * 480px — large phone * 640px — phone landscape, small tablet portrait * 768px — tablet portrait * 980px — tablet landscape * 1120px — small desktop / large laptop * 1280px — desktop * 1440px — wide desktop * 1920px — ultra-wide * * Mobile-first: все @media — `min-width`. Не `max-width`. * ============================================================ */ } /* ============================================================ * 12 · MOTION PREFERENCES * ============================================================ * Если пользователь явно отключил анимации — все длительности * становятся ~0, все easings — linear. Скорость интерфейса * сохраняется (CTA отзывается мгновенно), но кинетика выключается. * * НЕ используем `* { animation: none !important }` — это срывает * focus-ring и checkbox-state. Только токены. * ============================================================ */ @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 0ms; --dur-fast: 0ms; --dur-quick: 0ms; --dur-base: 0ms; --dur-medium: 0ms; --dur-slow: 0ms; --dur-grand: 0ms; --dur-exit-fast: 0ms; --dur-exit-base: 0ms; --dur-exit-medium: 0ms; --stagger-fast: 0ms; --stagger-base: 0ms; --stagger-slow: 0ms; --lift-sm: none; --lift-md: none; --lift-lg: none; --press-scale: none; } } /* ============================================================ * 13 · SCHEME — сейчас ровно одна (dark). Светлую тему оставляем * на v2 (по memory: dark-by-default, переключатель остаётся как * архитектурная заготовка, но включён dark на v1). * * Если/когда добавим light — он переопределяет токены 02 (semantic) * под `:root[data-theme="light"]`. Шкалы 01 могут не меняться вообще, * только перенастроим какой shade на какую роль смотрит. * ============================================================ */