/* ========================================================================== ayrat.site — design tokens Палитра B «Тёплый уголь + терракота» (основная, тёмная) Палитра A «Графит + кислотный акцент» — альтернатива: Светлая тема — опционально: Контраст проверен по WCAG 2.1 (значения в комментариях — к --bg, если не указано иное) ========================================================================== */ /* -------------------------------------------------------------------------- 0. Шрифты — локально, variable woff2. ₽ вынесен в отдельный микро-файл -------------------------------------------------------------------------- */ @font-face { font-family: "Onest"; src: url("../fonts/onest-cyrillic.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Onest"; src: url("../fonts/onest-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Onest"; src: url("../fonts/onest-rub.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+20BD; } @font-face { font-family: "Golos Text"; src: url("../fonts/golos-text-cyrillic.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Golos Text"; src: url("../fonts/golos-text-latin.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Golos Text"; src: url("../fonts/golos-text-rub.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; unicode-range: U+20BD; } @font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-cyrillic.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-rub.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; unicode-range: U+20BD; } :root { color-scheme: dark; /* ------------------------------------------------------------------------ 1. Цвет — палитра B ------------------------------------------------------------------------ */ --bg: #100E0D; --surface: #1A1715; --surface-2: #221E1B; /* производный: активные строки, поля формы */ --border: #2B2724; /* разделители, 1px */ --border-strong: #4A443F; /* граница карточки/поля при hover */ --text: #F5F1EC; /* 17.1:1 */ --text-dim: #938C84; /* 5.8:1 · на surface 5.4 · на surface-2 5.0 */ --text-faint: #6B645D; /* 3.3:1 — ТОЛЬКО декор: индексы 96px+, линии. Не для текста < 24px */ --accent: #E4572E; /* 5.2:1 · на surface 4.8 */ --accent-ink: #100E0D; /* текст на акценте, 5.2:1. Светлый текст на акценте (3.3) — запрещён */ --selection-bg: var(--accent); --selection-fg: var(--accent-ink); /* ------------------------------------------------------------------------ 2. Шрифты ------------------------------------------------------------------------ */ --font-display: "Onest", "Helvetica Neue", Arial, sans-serif; --font-body: "Golos Text", "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --weight-regular: 400; --weight-medium: 500; --weight-semi: 600; /* ------------------------------------------------------------------------ 3. Типографическая шкала ------------------------------------------------------------------------ */ --fs-display: clamp(48px, 9vw, 132px); --lh-display: 0.95; --ls-display: -0.03em; --fs-h2: clamp(32px, 5vw, 72px); --lh-h2: 1.05; --ls-h2: -0.03em; --fs-h3: clamp(20px, 2.4vw, 28px); --lh-h3: 1.2; --ls-h3: -0.02em; --fs-lead: clamp(16px, 1.25vw, 18px); /* подзаголовок hero */ --lh-lead: 1.5; --fs-body: 16px; --lh-body: 1.6; --fs-small: 13px; --lh-small: 1.5; --fs-mono: 12px; --lh-mono: 1.4; --ls-mono: 0.08em; --fs-index: clamp(56px, 7vw, 112px); /* номера 01–06 у проектов */ --fs-price: clamp(40px, 4.5vw, 64px); /* цены в тарифах */ --fs-wordmark: 23vw; /* «AYRAT» в футере */ /* ------------------------------------------------------------------------ 4. Отступы — шаг 4px ------------------------------------------------------------------------ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* ------------------------------------------------------------------------ 5. Сетка ------------------------------------------------------------------------ */ --grid-columns: 12; --grid-gap: 24px; --grid-max: 1440px; --gutter: 80px; --section-gap: 160px; --nav-h: 72px; --nav-h-scrolled: 56px; /* ------------------------------------------------------------------------ 6. Радиусы — 0 / 4 / 8. Больше 12px запрещено ------------------------------------------------------------------------ */ --radius-0: 0px; --radius-1: 4px; /* теги, поля, кнопки */ --radius-2: 8px; /* скриншоты, фото, карточки тарифов */ /* ------------------------------------------------------------------------ 7. Границы и тень ------------------------------------------------------------------------ */ --line: 1px solid var(--border); --line-strong: 1px solid var(--border-strong); /* единственная тень на сайте — активная карточка тарифа */ --shadow-featured: 0 24px 64px -24px rgb(0 0 0 / 0.6); /* ------------------------------------------------------------------------ 8. Движение ------------------------------------------------------------------------ */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --dur-micro: 200ms; --dur-link: 300ms; --dur-el: 450ms; --dur-section: 700ms; --reveal-y: 24px; --stagger: 60ms; --lift: -2px; /* кнопка primary */ --nudge: 4px; /* содержимое карточки */ /* ------------------------------------------------------------------------ 9. Фокус ------------------------------------------------------------------------ */ --focus-width: 2px; --focus-offset: 2px; --focus-color: var(--accent); /* ------------------------------------------------------------------------ 10. Слои ------------------------------------------------------------------------ */ --z-base: 1; --z-nav: 100; --z-grain: 900; --z-cursor: 1000; /* ------------------------------------------------------------------------ 11. Текстура ------------------------------------------------------------------------ */ --grain-opacity: 0.035; --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* -------------------------------------------------------------------------- Палитра A — графит + лайм (альтернатива) -------------------------------------------------------------------------- */ :root[data-palette="a"] { --bg: #0A0A0B; --surface: #121214; --surface-2: #1A1A1D; --border: #26262A; --border-strong: #45454C; --text: #F2F2F3; /* 17.7:1 */ --text-dim: #8A8A93; /* 5.8:1 · на surface-2 5.1 */ --text-faint: #5A5A62; --accent: #D6FF3F; /* 17.2:1 */ --accent-ink: #0A0A0B; } /* -------------------------------------------------------------------------- Светлая тема (для палитры B) -------------------------------------------------------------------------- */ :root[data-theme="light"] { color-scheme: light; --bg: #F3EEE7; --surface: #EAE3DA; --surface-2: #E1D9CE; --border: #D6CDC2; --border-strong: #B3A89B; --text: #1A1715; /* 15.5:1 */ --text-dim: #625A52; /* ≥ 4.5 на bg и surface */ --text-faint: #A39A90; --accent: #B8401C; /* 4.8:1 на bg; на surface 4.4 — акцентный ТЕКСТ только на bg */ --accent-ink: #F3EEE7; /* 4.8:1 */ --shadow-featured: 0 24px 64px -24px rgb(60 40 20 / 0.25); } /* -------------------------------------------------------------------------- Адаптив — токены сетки -------------------------------------------------------------------------- */ @media (max-width: 1024px) { :root { --gutter: 40px; --grid-gap: 20px; --section-gap: 120px; } } @media (max-width: 767px) { :root { --grid-columns: 4; --gutter: 24px; --grid-gap: 16px; --section-gap: 80px; --nav-h: 60px; --nav-h-scrolled: 52px; } } @media (prefers-reduced-motion: reduce) { :root { --dur-micro: 0ms; --dur-link: 0ms; --dur-el: 0ms; --dur-section: 0ms; --reveal-y: 0px; --stagger: 0ms; --lift: 0px; --nudge: 0px; } } /* ========================================================================== Базовые примитивы, которые напрямую выражают токены ========================================================================== */ ::selection { background: var(--selection-bg); color: var(--selection-fg); } :focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); } /* Зерно поверх страницы */ body::after { content: ""; position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none; background-image: var(--grain); opacity: var(--grain-opacity); mix-blend-mode: overlay; } /* Сетка */ .grid { display: grid; grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); column-gap: var(--grid-gap); max-width: var(--grid-max); margin-inline: auto; padding-inline: var(--gutter); } /* Мета-текст */ .mono { font-family: var(--font-mono); font-size: var(--fs-mono); line-height: var(--lh-mono); letter-spacing: var(--ls-mono); text-transform: uppercase; font-weight: var(--weight-regular); } /* Ссылка: подчёркивание рисуется от левого края */ .link { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--dur-link) var(--ease); } .link:hover, .link:focus-visible { background-size: 100% 1px; } /* Кнопка primary: подъём на 2px + инверсия */ .btn-primary { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 48px; padding: 0 var(--space-5); border: 1px solid var(--accent); border-radius: var(--radius-1); background: var(--accent); color: var(--accent-ink); font: var(--weight-medium) 15px/1 var(--font-body); transition: transform var(--dur-micro) var(--ease), background-color var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease); } .btn-primary:hover { transform: translateY(var(--lift)); background: var(--text); border-color: var(--text); color: var(--bg); } /* Карточка: граница светлеет, содержимое сдвигается на 4px */ .card { border: var(--line); border-radius: var(--radius-2); background: var(--surface); transition: border-color var(--dur-el) var(--ease); } .card > * { transition: transform var(--dur-el) var(--ease); } .card:hover { border-color: var(--border-strong); } .card:hover > * { transform: translateX(var(--nudge)); } /* Scroll-reveal: JS ставит .is-visible, --i — порядковый номер для stagger */ .reveal { opacity: 0; transform: translateY(var(--reveal-y)); transition: opacity var(--dur-el) var(--ease), transform var(--dur-el) var(--ease); transition-delay: calc(var(--i, 0) * var(--stagger)); } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }