/** * HAIR ID — tokens.css * * Дизайн-система бренда: цвет, типографика, ритм, тени, радиусы. * Все значения — переменные. Ни один цвет и ни один размер не пишется * в других файлах напрямую: только через var(--…). * * Палитра снята пиксельным анализом с исходного логотипа * (assets/logo/hair-id-logo-original.jpg): * фон — доминанты #202820 / #182020 / #182820 * золото — диапазон #B09060 … #D0B088, ядро #C0A070 */ /* =========================================================================== Шрифты =========================================================================== Playfair Display — высококонтрастная антиква с отличной кириллицей. Выбрана сравнением вживую с Prata, Cormorant Garamond, Lora и Spectral: — Prata солиднее, но у неё один вес, и на цифрах она выглядит тяжеловато; — Cormorant изящнее всех, но её тонкие штрихи тонут в золотом градиенте и разваливаются в мелком кегле; — Playfair держит золото, имеет несколько весов и старостильные цифры — они важны, потому что цифр на сайте много: цены, минуты в пути, шаги метода. Тонкие контрастные штрихи Playfair перекликаются с монограммой H+D, поэтому заголовки читаются с логотипом заодно. Manrope — спокойный гуманистический гротеск для текста: хорошо читается в мелком кегле и не спорит с антиквой. =========================================================================== */ /* Сами файлы шрифтов подключены прямым в каждой страницы, рядом с preconnect. Через @import отсюда браузер узнавал бы про них только после загрузки этого файла — на шаг позже, чем нужно. */ :root { --font-display: 'Playfair Display', 'Times New Roman', serif; --font-text: 'Manrope', -apple-system, 'Segoe UI', Roboto, sans-serif; /* ========================================================================= ЦВЕТ — фирменные константы Эти три группы не меняются между темами: это сам бренд. ========================================================================= */ /* Зелёный — от самого глубокого к светлому */ --green-900: #10160f; /* почти чёрный, для теней и подложек */ --green-800: #161e18; /* фон логотипа по краям */ --green-700: #1c2620; /* ОСНОВНОЙ фирменный зелёный */ --green-600: #24302a; /* приподнятая поверхность: карточки на тёмном */ --green-500: #2f3d35; /* границы и разделители на тёмном */ --green-400: #47584d; /* приглушённый текст на тёмном */ /* Золото — металлический градиент разложен на ступени */ --gold-700: #8a6d3c; /* тень золота, нижняя грань */ --gold-600: #9a7b44; /* тёмное золото */ --gold-500: #b09060; /* рабочее золото для мелких элементов */ --gold-400: #c0a070; /* ОСНОВНОЕ золото бренда */ --gold-300: #d0b088; /* светлое золото, блик */ --gold-200: #e2c89f; /* самый светлый блик */ --gold-100: #f0e3cc; /* золотая пыль, фоновые заливки */ /* Кремовый — светлая сторона бренда, для каталога и печати */ --cream-100: #faf7f1; /* основной светлый фон */ --cream-200: #f2ede3; /* приподнятая поверхность на светлом */ --cream-300: #e6dfd1; /* границы на светлом */ --cream-400: #cfc5b2; /* приглушённый текст на светлом */ /* ========================================================================= ГРАДИЕНТЫ Градиент здесь не украшение, а способ показать металл. Плоская жёлтая заливка читается как дешёвая краска; золото узнаётся только по неровному переходу света — блик, спад, снова блик. Поэтому ступени неравномерные. ========================================================================= */ /* Основное золото: для текста, кнопок, тонких линий и рамок */ --gradient-gold: linear-gradient( 118deg, var(--gold-700) 0%, var(--gold-300) 18%, var(--gold-500) 38%, var(--gold-100) 54%, var(--gold-600) 74%, var(--gold-400) 100% ); /* Спокойный вариант — для больших площадей, где полный блеск слишком шумит */ --gradient-gold-soft: linear-gradient(135deg, var(--gold-600), var(--gold-300) 55%, var(--gold-500)); /* Тонкая линия-разделитель: гаснет к краям */ --gradient-rule: linear-gradient(90deg, transparent, var(--gold-600) 18%, var(--gold-200) 50%, var(--gold-600) 82%, transparent); /* Тёмный фон с глубиной: угол тёплый, центр чуть светлее краёв */ --gradient-dark: linear-gradient(160deg, var(--green-600) 0%, var(--green-700) 42%, var(--green-900) 100%); /* Светлый фон: еле заметный тёплый переход, чтобы секции не были плоскими */ --gradient-cream: linear-gradient(170deg, var(--cream-100) 0%, var(--cream-200) 100%); /* Свечение позади первого экрана */ --gradient-glow: radial-gradient( ellipse at 50% 18%, rgba(192, 160, 112, 0.20) 0%, rgba(192, 160, 112, 0.07) 38%, transparent 68% ); /* Затемнение снизу — чтобы подпись поверх фотографии читалась */ --gradient-photo-veil: linear-gradient( to top, rgba(16, 22, 15, 0.92) 0%, rgba(16, 22, 15, 0.55) 34%, rgba(16, 22, 15, 0) 72% ); /* Мягкий переход от фотографии к фону секции */ /* Свет, падающий сверху вниз. Три слоя одного приёма: на светлой странице, в тёмных секциях и в шапке. Свет тёплый (не чисто белый) — холодный белый на кремовом даёт грязь. */ --свет-страницы: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 253, 247, 0.58) 16%, rgba(255, 253, 247, 0.22) 36%, rgba(255, 253, 247, 0) 64%); --свет-тёмного: linear-gradient(180deg, rgba(255, 249, 234, 0.135) 0%, rgba(255, 249, 234, 0.055) 30%, rgba(255, 249, 234, 0.012) 58%, rgba(255, 249, 234, 0) 82%); --свет-шапки: linear-gradient(180deg, rgba(255, 250, 236, 0.17) 0%, rgba(255, 250, 236, 0.065) 42%, rgba(255, 250, 236, 0) 100%); --gradient-photo-fade: linear-gradient(to bottom, transparent 55%, var(--green-700) 100%); /* Золотая грань по краю блока. В покое её почти не видно — она проступает под курсором. Дешёвый градиент получается, когда им заливают площадь; здесь он живёт на линии толщиной в пиксель, и это читается как металл, а не как фон из шаблона. */ --gradient-edge: linear-gradient( 135deg, rgba(208, 176, 136, 0.62) 0%, rgba(192, 160, 112, 0.10) 38%, rgba(240, 227, 204, 0.55) 72%, rgba(154, 123, 68, 0.35) 100% ); /* Тёплый свет по верхнему краю секции: стык двух светлых разделов иначе выглядит склейкой двух листов бумаги. */ --gradient-section-top: linear-gradient( 180deg, rgba(192, 160, 112, 0.11) 0%, rgba(192, 160, 112, 0.035) 44%, transparent 100% ); /* Тёплое пятно за крупной карточкой — тот же приём, что и свечение за первым экраном, только слабее и без центра в кадре. */ --gradient-card-glow: radial-gradient( 120% 90% at 15% 0%, rgba(192, 160, 112, 0.16) 0%, rgba(192, 160, 112, 0.04) 46%, transparent 72% ); /* Служебные цвета — приглушены под палитру, не «светофорные» */ --c-success: #6f8f6a; --c-danger: #a85c50; /* ========================================================================= РИТМ — шаг сетки 4 px ========================================================================= */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 6rem; /* 96 */ --space-10: 8rem; /* 128 */ --space-11: 12rem; /* 192 */ /* Вертикальные отступы секций тянутся вместе с шириной экрана. Было 10vw до 10rem: на мониторе это давало 144 px сверху и снизу, то есть 288 px пустоты на каждом стыке и почти пять экранов воздуха на всю страницу. Замерено на живом сайте. Сузили до 108 px на мониторе, на телефоне минимум не трогали — там 64 px и так плотно. */ --section-y: clamp(4rem, 7.5vw, 6.75rem); --page-x: clamp(1.25rem, 5vw, 5rem); --content-max: 1440px; --text-max: 68ch; /* ========================================================================= ТИПОГРАФИКА Размеры на clamp: один набор значений работает от телефона до монитора. ========================================================================= */ --fs-display: clamp(2.75rem, 8vw, 7.5rem); /* герой */ --fs-h1: clamp(2.25rem, 5.5vw, 4.5rem); --fs-h2: clamp(1.75rem, 3.6vw, 3rem); --fs-h3: clamp(1.35rem, 2.2vw, 1.875rem); --fs-h4: clamp(1.15rem, 1.6vw, 1.375rem); --fs-lead: clamp(1.05rem, 1.5vw, 1.375rem); /* вводный абзац */ --fs-body: 1rem; --fs-small: 0.875rem; /* Было 0.75rem. Двенадцатым кеглем набраны не только надзаголовки, но и подписи под ценами и пояснения в карточках — то, что человек читает с телефона на ходу. Тринадцатый читается, вёрстку не ломает. */ --fs-caption: 0.8125rem; --lh-tight: 1.06; /* крупные заголовки */ --lh-snug: 1.22; --lh-normal: 1.6; /* основной текст */ --lh-loose: 1.75; /* Разрядка. Крупная антиква требует отрицательного трекинга, мелкие капительные надписи — наоборот, широкого. */ --ls-display: -0.02em; --ls-heading: -0.01em; --ls-body: 0; --ls-wide: 0.14em; /* как в подписи HAIR ID под монограммой */ --ls-widest: 0.3em; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ========================================================================= ФОРМА Острых углов на сайте нет. Раньше радиусы были почти нулевые — под «ювелирную» геометрию логотипа. На странице из двадцати блоков это давало ощущение таблицы: одинаковые прямоугольники встык. Ступеней теперь пять, и они заметно разные. Мелочь скругляется слабо, крупные карточки — сильно. Одинаковый радиус у всего подряд как раз и делает страницу равномерной и скучной. ========================================================================= */ --radius-none: 0; --radius-xs: 8px; /* поля ввода, мелкие плашки */ --radius-sm: 12px; /* кнопки-даты, слоты времени */ --radius-md: 18px; /* обычная карточка */ --radius-lg: 26px; /* крупная карточка, фотография */ --radius-xl: 34px; /* большие блоки: таблица, форма, врезка */ --radius-pill: 999px; --radius-circle: 50%; --border-hairline: 1px; --border-thick: 2px; /* Тени в зелёном, а не в чёрном — иначе тёмная тема выглядит грязной. */ --shadow-sm: 0 1px 2px rgba(16, 22, 15, 0.16); --shadow-md: 0 8px 24px rgba(16, 22, 15, 0.22); --shadow-lg: 0 24px 64px rgba(16, 22, 15, 0.32); --shadow-gold: 0 8px 32px rgba(192, 160, 112, 0.22); /* Выпуклость и вдавленность. Блок в покое чуть приподнят: светлая грань по верхнему краю и мягкая тень снизу — глаз читает это как объём. Под курсором тень уходит внутрь, и блок выглядит вдавленным, как настоящая клавиша. Тень не чёрная, а зелёная: чёрная на кремовом фоне выглядит грязью. В тёмной теме значения свои — белая грань там смотрится налётом, поэтому она золотистая и куда слабее. */ --shadow-raise: inset 0 1px 0 rgba(255, 255, 255, 0.62), 0 2px 6px -2px rgba(16, 22, 15, 0.10), 0 14px 30px -14px rgba(16, 22, 15, 0.26); --shadow-press: inset 0 10px 22px -10px rgba(16, 22, 15, 0.30), inset 0 -1px 0 rgba(255, 255, 255, 0.45), 0 1px 2px rgba(16, 22, 15, 0.08); --z-base: 1; --z-sticky: 50; --z-header: 100; --z-overlay: 200; --z-cursor: 300; } /* =========================================================================== СВЕТЛАЯ ТЕМА — основная =========================================================================== Почему светлая, а не «золото на чёрном», как в логотипе. Тёмный фон с золотом читается дёшево-люксово и хуже конвертирует: на нём плохо смотрятся фотографии работ и совсем плохо — карточки товара, а магазин Hair ID Shop запускается через месяц. Премиальный код у сильных брендов ухода за волосами (Virtue Labs, Kevin Murphy, Act+Acre) устроен иначе: тёплый белый вместо чистого белого, смягчённый тёмный вместо чёрного и ровно ОДИН фирменный цвет. Здесь фирменный цвет — тот самый зелёный с логотипа. Золото остаётся акцентом: линии, подписи, активные состояния. Так логотип с золотом на тёмном фоне выглядит драгоценной вставкой, а не общим шумом. =========================================================================== */ :root, [data-theme='light'] { --c-bg: var(--cream-100); --c-bg-deep: var(--cream-200); --c-surface: #ffffff; --c-surface-2: var(--cream-200); --c-border: var(--cream-300); --c-border-strong: var(--gold-500); --c-text: var(--green-700); --c-text-muted: #5a6960; --c-text-subtle: #8b9389; --c-text-inverse: var(--cream-100); --c-accent: var(--gold-600); --c-accent-hover: var(--gold-700); --c-accent-soft: rgba(154, 123, 68, 0.1); /* Золото для мелкого текста. На светлом фоне gold-600 даёт контраст 3,7 — норма для кегля меньше 24 px равна 4,5, и на солнце с телефона такой текст пропадает. Этот оттенок даёт 4,9 на кремовом и 4,5 на кремовом потемнее. Крупные заголовки и рамки остаются на прежнем золоте: там 3,0 достаточно, и оно красивее. */ --c-accent-strong: #7d6234; --c-btn-bg: var(--green-700); --c-btn-text: var(--cream-100); --c-btn-ghost-border: #b9b2a3; color-scheme: light; } /* =========================================================================== ТЁМНАЯ ТЕМА — акцентная Первый экран, блок метода, призыв к записи, футер. Ставится атрибутом data-theme="dark" на секцию, а не на всю страницу: тёмные острова среди светлого задают ритм и выделяют главное. =========================================================================== */ [data-theme='dark'] { --c-bg: var(--green-700); --c-bg-deep: var(--green-900); --c-surface: var(--green-600); --c-surface-2: var(--green-800); --c-border: var(--green-500); --c-border-strong: var(--gold-600); --c-text: var(--cream-100); --c-text-muted: #a9b3a9; --c-text-subtle: var(--green-400); --c-text-inverse: var(--green-700); --c-accent: var(--gold-400); --c-accent-hover: var(--gold-300); --c-accent-soft: rgba(192, 160, 112, 0.14); /* На тёмном мелкому тексту нужно золото посветлее, а не потемнее */ --c-accent-strong: var(--gold-300); /* Объём в тёмной теме: грань золотистая и слабая, тень глубже */ --shadow-raise: inset 0 1px 0 rgba(240, 227, 204, 0.10), 0 16px 36px -18px rgba(0, 0, 0, 0.62); --shadow-press: inset 0 12px 26px -12px rgba(0, 0, 0, 0.66), inset 0 -1px 0 rgba(240, 227, 204, 0.07); --c-btn-bg: var(--gold-400); --c-btn-text: var(--green-900); --c-btn-ghost-border: var(--gold-600); color-scheme: dark; background: var(--c-bg); /* Тот же свет сверху вниз, но по тёмному: остров перестаёт быть плоским прямоугольником и читается как освещённая сверху поверхность. Ставится отдельным свойством после background — иначе сокращённая запись выше стёрла бы картинку. */ background-image: var(--свет-тёмного); background-repeat: no-repeat; color: var(--c-text); } /* =========================================================================== Базовые стили =========================================================================== */ *, *::before, *::after { box-sizing: border-box; } /* scroll-behavior: smooth здесь НЕ ставится намеренно. Браузерная плавная прокрутка асинхронна: window.scrollTo возвращает управление до того, как страница сдвинулась. Движок анимаций в следующем же кадре видит, что позиция не изменилась, и отменяет прокрутку — страницу отбрасывает назад. Плавность обеспечивает motion.js. */ html { -webkit-text-size-adjust: 100%; } body { margin: 0; /* Фон страницы = ровный крем + свет сверху. Привязка к экрану (fixed) нужна, чтобы свет падал сверху вниз на любом месте страницы, а не выгорал один раз в самом верху документа. */ background-color: var(--c-bg); background-image: var(--свет-страницы); background-repeat: no-repeat; background-attachment: fixed; color: var(--c-text); font-family: var(--font-text); font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: var(--fw-regular); line-height: var(--lh-tight); letter-spacing: var(--ls-heading); } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); } h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); } h4 { font-size: var(--fs-h4); font-family: var(--font-text); font-weight: var(--fw-semibold); } p { margin: 0 0 var(--space-4); max-width: var(--text-max); } a { color: inherit; text-decoration: none; } img, picture, video { max-width: 100%; height: auto; display: block; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } /* Фокус виден всегда — это требование доступности, а не украшение. */ :focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; } /* =========================================================================== Типографические утилиты =========================================================================== */ /* Неразрывный кусок строки. Нужен там, где перенос по дефису портит слово: «Санкт-Петербург» ломался на «САНКТ-» и «ПЕТЕРБУРГ». */ .nowrap { white-space: nowrap; } /* Подпись капителью с разрядкой — как «HAIR ID» под монограммой. Главный опознавательный приём бренда в тексте. */ .t-eyebrow { font-family: var(--font-text); font-size: var(--fs-caption); font-weight: var(--fw-medium); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--c-accent-strong); } .t-lead { font-size: var(--fs-lead); line-height: var(--lh-loose); color: var(--c-text-muted); } .t-muted { color: var(--c-text-muted); } /* =========================================================================== Раскладка =========================================================================== */ .container { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--page-x); } .section { padding-block: var(--section-y); } .grid { display: grid; gap: var(--space-6); } .grid-3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } /* =========================================================================== Кнопки =========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-4) var(--space-6); font-size: var(--fs-small); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); text-transform: uppercase; border-radius: var(--radius-pill); transition: transform 0.4s var(--ease-out-soft, ease), background 0.4s ease, color 0.4s ease, box-shadow 0.4s ease; } .btn-primary { background: var(--gradient-gold); color: var(--green-900); box-shadow: var(--shadow-gold); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(192, 160, 112, 0.32); } /* Крупная кнопка — для первого экрана и формы записи: главное действие должно быть заметно крупнее второстепенного */ .btn-lg { padding: var(--space-5) var(--space-7); font-size: var(--fs-body); } .btn-ghost { border: var(--border-hairline) solid var(--c-btn-ghost-border); color: var(--c-text); } .btn-ghost:hover { border-color: var(--c-accent); color: var(--c-accent); } /* Карточка с золотой каймой, которая проявляется при наведении. */ .surface-gold { position: relative; background: var(--c-surface); border: var(--border-hairline) solid var(--c-border); transition: border-color 0.5s ease; } /* Скрытый текст для скринридеров */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }