/* Hallmark · tokens · ИП Николаев * ========================================================================== * ПЯТЬ ПАЛИТР, ОДИН НАБОР ИМЁН * * Страница идёт полосами, и каждая полоса живёт в своей палитре: светлая * бумага, кремовый срез, глубокая глина, графит, угли. Вместо пяти наборов * классов здесь один набор СЕМАНТИЧЕСКИХ имён (--surface, --ink, --accent…), * который переопределяется на `[data-mode]`. Компоненты написаны один раз и * не знают, на каком фоне стоят: цвет им приносит родительская полоса. * * Поэтому в styles.css нет ни одного сырого oklch() и ни одного * font-family со строкой — только var(). Палитру полосы меняет один * атрибут в разметке, а не правка стилей. * * Режимы и их светлота (--surface): * paper 97 % тёплая бумага — Подход, Процесс * bone 97 % кремовый, теплее — Что входит, Вопросы * clay 36 % глубокая глина — Направления * ink 15 % тёплый графит — ролики, Манифест, Работы, Заявка * noir 13 % чёрное и золото — Стили * ember 12 % угли, медь — В цифрах * ========================================================================== */ :root{ /* --- типографика: три семейства, все с кириллицей --- Дисплейный голос один на всю страницу — Playfair Display. Гротеск Onest ушёл со всех заголовков на служебный слой: панель, кнопки, подзаголовки. Причина простая: геометрический гротеск с круглыми овалами на главном экране читается дёшево, а разница между полосами должна идти от света и цвета, а не от смены гарнитуры. На тёмных полосах антиква набирается плотнее (вес 700 против 500–600 на бумаге): поверх кадра тонкий штрих высокого контраста рассыпается. */ --font-serif:"Playfair Display","Times New Roman",Georgia,serif; --font-sans: "Onest","Segoe UI",system-ui,sans-serif; --font-body: "IBM Plex Sans","Segoe UI",system-ui,sans-serif; --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-base:1rem; --text-md: 1.0625rem; --text-lg: 1.3125rem; --text-xl: 1.75rem; --text-2xl: 2.25rem; --text-3xl: clamp(1.9rem, 1.1rem + 2.6vw, 3.1rem); --text-display:clamp(2.2rem, 1.0rem + 4.2vw, 4.5rem); --text-hero:clamp(2.4rem, 0.9rem + 5.6vw, 5.4rem); /* --- ритм: шкала 4pt, названная по роли --- */ --space-2xs:0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl:4rem; --space-3xl:8.5rem; --space-4xl:13.5rem; --gut:clamp(20px,4vw,56px); --maxw:1320px; --radius-sm:4px; --radius-md:10px; --radius-lg:18px; --radius-pill:999px; --rule-hair:1px; /* Пять акцентов пяти палитр страницы, вынесенные как константы: ими залито слово «палитрах» в полосе «Стили». Слово показывает ровно то, о чём говорит, и меняется само, когда меняется палитра сайта. */ /* Рыжий бумажной палитры взят светлее её собственного акцента (55 %): на чёрной полосе «Стили» он давал 3.92:1 — для крупного набора это проходит, но левый край слова заметно тускнел. */ --swatch-1:oklch(68.0% 0.150 50); /* бумага — рыжий */ --swatch-2:oklch(80.0% 0.120 70); /* глина — охра */ --swatch-3:oklch(76.0% 0.125 64); /* графит — янтарь */ --swatch-4:oklch(80.0% 0.115 88); /* золото — золото */ --swatch-5:oklch(76.0% 0.145 58); /* угли — медь */ /* Высота растворения одной палитры в другой. Чем выше, тем позже глаз ловит переход: на 300 px разница между соседними строками пикселей ещё различима, на 500 — уже нет. Отступы полос подняты под неё. */ --seam-h:clamp(230px,42vh,540px); /* доля декоративного снимка, которая растворяется у верхнего и нижнего края: фотография обязана таять вместе с палитрой, а не обрываться */ --photo-fade:26%; /* --- движение --- */ --ease-out:cubic-bezier(.16,1,.3,1); --ease-in:cubic-bezier(.7,0,.84,0); --ease-in-out:cubic-bezier(.65,0,.35,1); --dur-micro:120ms; --dur-short:240ms; --dur-long:460ms; /* --- слои --- */ --z-base:1; --z-raised:10; --z-reel:20; --z-rail:120; --z-sticky:200; --z-menu:300; --z-sheet:340; --z-modal:400; --z-grain:500; } /* ========================================================================== РЕЖИМЫ Каждый задаёт полный набор семантических имён. Ни один компонент не обращается к именам режима напрямую — только к семантическим. ========================================================================== */ /* ---------- paper · тёплая бумага (светлый) ---------- Это же и палитра по умолчанию: полоса без режима не проваливается в «цвета не заданы», а наследует бумагу. */ :root, [data-mode="paper"]{ --font-display:var(--font-serif); --surface: oklch(97.4% 0.011 78); --surface-2: oklch(94.6% 0.016 76); --surface-3: oklch(91.0% 0.020 74); --rule: oklch(86.0% 0.018 72); --rule-strong: oklch(62.0% 0.024 68); --ink: oklch(19.0% 0.022 52); --ink-2: oklch(38.0% 0.022 58); --ink-3: oklch(48.0% 0.020 62); --display-ink: oklch(17.0% 0.024 50); --accent: oklch(55.0% 0.150 53); --accent-ink: oklch(47.0% 0.140 50); --accent-soft: oklch(92.0% 0.040 70); /* граница интерактивного элемента обязана держать 3:1 к своей подложке */ --field: oklch(62.0% 0.024 66); --focus: oklch(50.0% 0.160 50); --btn-bg: var(--ink); --btn-fg: var(--surface); --btn-bd: var(--ink); --shadow-whisper:0 1px 2px oklch(25% 0.03 60 / .06), 0 2px 8px -4px oklch(25% 0.03 60 / .10); --shadow-lift: 0 10px 22px -16px oklch(24% 0.04 58 / .34), 0 3px 8px -6px oklch(24% 0.04 58 / .22); --shadow-photo: 0 26px 50px -34px oklch(22% 0.05 56 / .46), 0 6px 14px -10px oklch(22% 0.05 56 / .20); --shadow-panel: 0 40px 80px -52px oklch(20% 0.05 54 / .50), 0 8px 20px -14px oklch(20% 0.05 54 / .18); } /* ---------- bone · кремовый, в тон срезу (светлый) ---------- Замерено с референсного кадра: бумага под срезом rgb(255,243,231). Заголовки уходят в тёплый коричневый — тот же, что в надписи «Teak». */ [data-mode="bone"]{ --font-display:var(--font-serif); --surface: oklch(96.8% 0.021 76); --surface-2: oklch(93.4% 0.027 74); --surface-3: oklch(89.5% 0.032 72); --rule: oklch(85.0% 0.030 70); --rule-strong: oklch(60.0% 0.044 60); --ink: oklch(24.0% 0.030 50); --ink-2: oklch(40.0% 0.034 52); --ink-3: oklch(50.0% 0.036 54); --display-ink: oklch(32.0% 0.088 44); --accent: oklch(52.0% 0.150 48); --accent-ink: oklch(44.0% 0.145 45); --accent-soft: oklch(90.0% 0.055 68); --field: oklch(60.0% 0.038 60); --focus: oklch(48.0% 0.165 46); --btn-bg: var(--display-ink); --btn-fg: var(--surface); --btn-bd: var(--display-ink); --shadow-whisper:0 1px 2px oklch(28% 0.05 50 / .07), 0 2px 8px -4px oklch(28% 0.05 50 / .12); --shadow-lift: 0 10px 22px -16px oklch(26% 0.06 48 / .36), 0 3px 8px -6px oklch(26% 0.06 48 / .24); --shadow-photo: 0 26px 50px -34px oklch(24% 0.07 46 / .48), 0 6px 14px -10px oklch(24% 0.07 46 / .22); --shadow-panel: 0 40px 80px -52px oklch(22% 0.07 46 / .52), 0 8px 20px -14px oklch(22% 0.07 46 / .20); } /* ---------- clay · глубокая глина (полутон) ---------- Карточки с фотографиями светятся на этой полосе так же, как на тёмной, но полоса не читается как ночь — это дневной снимок в тени. */ [data-mode="clay"]{ --font-display:var(--font-serif); --surface: oklch(35.0% 0.030 58); --surface-2: oklch(40.0% 0.032 58); --surface-3: oklch(45.0% 0.032 58); --rule: oklch(48.0% 0.030 58); --rule-strong: oklch(62.0% 0.034 60); --ink: oklch(96.0% 0.014 80); --ink-2: oklch(84.0% 0.020 74); --ink-3: oklch(79.0% 0.024 70); --display-ink: oklch(97.0% 0.014 80); --accent: oklch(80.0% 0.120 70); --accent-ink: oklch(84.0% 0.110 72); --accent-soft: oklch(45.0% 0.055 58); --field: oklch(68.0% 0.030 60); --focus: oklch(85.0% 0.140 75); --btn-bg: oklch(96.5% 0.014 80); --btn-fg: oklch(24.0% 0.030 52); --btn-bd: oklch(96.5% 0.014 80); --shadow-whisper:0 1px 2px oklch(12% 0.02 50 / .22), 0 2px 8px -4px oklch(12% 0.02 50 / .30); --shadow-lift: 0 10px 22px -16px oklch(10% 0.02 50 / .62), 0 3px 8px -6px oklch(10% 0.02 50 / .44); --shadow-photo: 0 30px 60px -36px oklch(8% 0.02 50 / .80), 0 8px 18px -12px oklch(8% 0.02 50 / .46); --shadow-panel: 0 44px 90px -54px oklch(6% 0.02 50 / .86), 0 10px 24px -16px oklch(6% 0.02 50 / .42); } /* ---------- ink · тёплый графит (тёмный) ---------- */ [data-mode="ink"]{ --font-display:var(--font-serif); --surface: oklch(15.5% 0.014 50); --surface-2: oklch(19.5% 0.016 50); --surface-3: oklch(24.0% 0.018 50); --rule: oklch(30.0% 0.016 52); --rule-strong: oklch(52.0% 0.022 56); --ink: oklch(95.5% 0.012 82); --ink-2: oklch(80.0% 0.014 76); --ink-3: oklch(68.0% 0.016 70); --display-ink: oklch(97.0% 0.012 82); --accent: oklch(76.0% 0.125 64); --accent-ink: oklch(80.0% 0.115 66); --accent-soft: oklch(26.0% 0.040 52); --field: oklch(56.0% 0.022 60); --focus: oklch(82.0% 0.145 68); --btn-bg: oklch(96.5% 0.012 82); --btn-fg: oklch(18.0% 0.022 52); --btn-bd: oklch(96.5% 0.012 82); --shadow-whisper:0 1px 2px oklch(4% 0.01 50 / .34), 0 2px 8px -4px oklch(4% 0.01 50 / .42); --shadow-lift: 0 10px 22px -16px oklch(3% 0.01 50 / .72), 0 3px 8px -6px oklch(3% 0.01 50 / .52); --shadow-photo: 0 30px 60px -36px oklch(2% 0.01 50 / .88), 0 8px 18px -12px oklch(2% 0.01 50 / .50); --shadow-panel: 0 44px 90px -54px oklch(2% 0.01 50 / .92), 0 10px 24px -16px oklch(2% 0.01 50 / .46); } /* ---------- noir · чёрное и золото (тёмный) ---------- Полоса про исторические «богатые» стили, поэтому единственная, где акцент уходит в золото (hue 88) вместо янтаря (hue 55–64): золото холоднее и желтее, и рядом с медью «Цифр» это читается как другой материал, а не как та же краска другой яркости. */ [data-mode="noir"]{ --font-display:var(--font-serif); --surface: oklch(13.5% 0.012 70); --surface-2: oklch(18.0% 0.014 70); --surface-3: oklch(23.0% 0.016 72); --rule: oklch(27.0% 0.016 72); --rule-strong: oklch(50.0% 0.030 80); --ink: oklch(95.0% 0.010 85); --ink-2: oklch(79.0% 0.014 82); --ink-3: oklch(66.0% 0.020 80); --display-ink: oklch(97.0% 0.010 85); --accent: oklch(80.0% 0.115 88); --accent-ink: oklch(83.0% 0.105 88); --accent-soft: oklch(24.0% 0.035 80); --field: oklch(56.0% 0.020 78); --focus: oklch(85.0% 0.125 90); --btn-bg: oklch(96.5% 0.010 85); --btn-fg: oklch(16.0% 0.014 70); --btn-bd: oklch(96.5% 0.010 85); --shadow-whisper:0 1px 2px oklch(3% 0.01 70 / .40), 0 2px 8px -4px oklch(3% 0.01 70 / .48); --shadow-lift: 0 10px 22px -16px oklch(3% 0.01 70 / .76), 0 3px 8px -6px oklch(3% 0.01 70 / .56); --shadow-photo: 0 30px 60px -36px oklch(2% 0.01 70 / .90), 0 8px 18px -12px oklch(2% 0.01 70 / .52); --shadow-panel: 0 44px 90px -54px oklch(2% 0.01 70 / .94), 0 10px 24px -16px oklch(2% 0.01 70 / .48); } /* ---------- ember · угли и медь (тёмный, тёплый) ---------- Снято с макроснимка среза: подложка rgb(23,2,1), дерево rgb(102,37,9). Единственная полоса с хроматической тенью — здесь свет идёт из материала. */ [data-mode="ember"]{ --font-display:var(--font-serif); --surface: oklch(12.0% 0.028 34); --surface-2: oklch(16.5% 0.040 36); --surface-3: oklch(21.0% 0.050 38); --rule: oklch(28.0% 0.045 40); --rule-strong: oklch(50.0% 0.080 46); --ink: oklch(95.5% 0.020 76); --ink-2: oklch(79.0% 0.032 68); --ink-3: oklch(66.0% 0.046 58); --display-ink: oklch(97.0% 0.018 78); --accent: oklch(76.0% 0.145 58); --accent-ink: oklch(80.0% 0.135 60); --accent-soft: oklch(24.0% 0.070 40); --field: oklch(56.0% 0.045 50); --focus: oklch(82.0% 0.150 62); --btn-bg: oklch(96.5% 0.018 78); --btn-fg: oklch(16.0% 0.035 40); --btn-bd: oklch(96.5% 0.018 78); --shadow-whisper:0 1px 2px oklch(3% 0.02 34 / .40), 0 2px 8px -4px oklch(3% 0.02 34 / .48); --shadow-lift: 0 10px 22px -16px oklch(3% 0.02 34 / .76), 0 3px 8px -6px oklch(3% 0.02 34 / .56); --shadow-photo: 0 30px 60px -36px oklch(2% 0.02 34 / .90), 0 8px 18px -12px oklch(2% 0.02 34 / .52); --shadow-panel: 0 44px 90px -54px oklch(2% 0.02 34 / .94), 0 10px 24px -16px oklch(2% 0.02 34 / .48); }