/* ============================================================ ТЕМА: code — Код ------------------------------------------------------------ IDE-подобный характер. Моноширинные заголовки, плотная сетка, малые радиусы, чёткие границы. Плотность здесь работает на доверие: так выглядят инструменты, а не реклама. Отличие от соседей: у main фиолетовый и мягкие формы, у text — чернила на бумаге. Здесь холодная бирюза на графитовой подложке и подсветка синтаксиса как опознавательный знак направления. Контраст: --accent на --bg = 6,6:1, белый на обеих точках --grad-accent ≥ 5,5:1. ============================================================ */ @font-face { font-family: 'JetBrains Mono'; src: url('/fonts/jetbrains-mono-var.woff2') format('woff2-variations'); font-weight: 100 800; font-style: normal; font-display: swap; unicode-range: U+0000-024F, U+0400-045F, U+2000-206F; } @font-face { font-family: 'IBM Plex Sans'; src: url('/fonts/ibm-plex-sans-var.woff2') format('woff2-variations'); font-weight: 400 600; font-style: normal; font-display: swap; unicode-range: U+0000-024F, U+0400-045F, U+2000-206F, U+20B0-20BF; } @font-face { font-family: 'Plex Fallback'; src: local('Segoe UI'), local('Roboto'), local('Helvetica Neue'), local('Arial'); size-adjust: 100%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; } :root[data-direction='code'] { --bg: #eef1f4; --bg-soft: #ffffff; --surface: #ffffff; --surface-2: #e3e8ed; --line: #cfd6de; --line-soft: #dfe4ea; --line-strong: #808990; --text: #0f172a; --text-2: #46536b; --text-3: #5e6a7e; --text-inv: #ffffff; --accent: #0b6478; --accent-2: #4d7c0f; --accent-ink: #ffffff; --accent-soft: rgb(11 100 120 / 9%); --accent-line: rgb(11 100 120 / 32%); --grad-accent: linear-gradient(135deg, #0b6478 0%, #0e7a63 100%); --grad-soft: linear-gradient(135deg, rgb(11 100 120 / 9%), rgb(77 124 15 / 6%)); --ok: #146e35; --ok-bg: rgb(20 110 53 / 10%); --warn: #875e09; --warn-bg: rgb(135 94 9 / 10%); --danger: #b91c1c; --danger-bg: rgb(185 28 28 / 10%); --info: #1d4ed8; --info-bg: rgb(29 78 216 / 10%); --gold: #875e09; --grad-gold: linear-gradient(135deg, #f5c451 0%, #e08b3c 100%); /* Малые радиусы, чёткие границы */ --r-xs: 2px; --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 10px; --r-full: 999px; --r-btn: 6px; --r-card: 6px; --r-field: 6px; --border-w: 1px; --sh-xs: 0 1px 1px rgb(15 23 42 / 5%); --sh-sm: 0 1px 2px rgb(15 23 42 / 8%); --sh-md: 0 4px 12px -6px rgb(15 23 42 / 18%); --sh-lg: 0 14px 34px -18px rgb(15 23 42 / 26%); --sh-focus: 0 0 0 3px var(--accent-line); /* Моноширинные заголовки — главный признак направления */ --font-h: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --font-b: 'IBM Plex Sans', 'Plex Fallback', system-ui, sans-serif; --font-m: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --tracking-h: -0.03em; --weight-h: 600; --lh-h: 1.22; --lh-b: 1.6; /* Шкала плотнее и контрастнее: заголовки не разгоняются */ --step--1: clamp(0.78rem, 0.76rem + 0.09vw, 0.83rem); --step-0: clamp(0.91rem, 0.89rem + 0.13vw, 0.99rem); --step-1: clamp(1.06rem, 1.01rem + 0.22vw, 1.19rem); --step-2: clamp(1.24rem, 1.17rem + 0.35vw, 1.43rem); --step-3: clamp(1.45rem, 1.34rem + 0.53vw, 1.71rem); --step-4: clamp(1.69rem, 1.53rem + 0.79vw, 2.06rem); --step-5: clamp(1.97rem, 1.74rem + 1.15vw, 2.47rem); --step-6: clamp(2.20rem, 1.86rem + 1.68vw, 3.05rem); /* Плотный ритм, узкий контейнер */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 28px; --sp-7: 40px; --sp-8: 56px; --sp-9: 80px; --sp-10: 108px; --container: min(95vw, 1560px); --container-narrow: min(92vw, 820px); --measure: 74ch; --header-h: 60px; --section-y: clamp(32px, 3.4vw, 56px); --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-io: cubic-bezier(0.65, 0, 0.35, 1); --t-fast: 0.12s var(--ease); --t-med: 0.2s var(--ease); --t-slow: 0.3s var(--ease); /* Подложка — сетка редактора. Только repeating-*: обычный градиент без background-size не тайлится и растягивается на всю секцию. */ --texture: repeating-linear-gradient(90deg, rgb(11 100 120 / 3.5%) 0 1px, transparent 1px 80px), repeating-linear-gradient(0deg, rgb(11 100 120 / 2.5%) 0 1px, transparent 1px 80px); /* ---------- Тёмная врезка ---------- Приём светлой страницы, а не вторая тема: контрастная секция один-два раза за лендинг. Тёмную тему убрали, эти токены её не заменяют. */ --invert-bg: #0d1117; --invert-surface: #161b22; --invert-text: #e9eef5; --invert-text-2: #a6b2c2; --invert-accent: #56c4e0; --invert-line: rgb(255 255 255 / 12%); /* ---------- Подсветка синтаксиса ---------- Опознавательный знак направления: терминал и дифф красятся ею, а не произвольными цветами внутри компонентов. Пары рассчитаны на тёмную поверхность --invert-surface (#161b22): каждая ≥ 5,4:1. */ --syn-key: #d2a8ff; --syn-str: #7ee787; --syn-num: #ffa657; --syn-fn: #79c0ff; --syn-com: #9aa7b6; --syn-add: #56d364; --syn-del: #ff7b72; --syn-add-bg: rgb(63 185 80 / 15%); --syn-del-bg: rgb(248 81 73 / 13%); /* Градиентная подложка первого экрана и финального CTA */ --mesh: radial-gradient(52ch 32ch at 86% -12%, rgb(11 100 120 / 16%), transparent 70%), radial-gradient(44ch 28ch at 0% 4%, rgb(14 122 99 / 11%), transparent 72%), radial-gradient(60ch 24ch at 50% 112%, rgb(11 100 120 / 8%), transparent 74%); /* ---------- Фоновые изображения секций ---------- Кладутся в public/img/bg/code/. Пока файла нет — слой просто не отрисуется, под ним останется градиент: пустого экрана не будет. Промпты — GRAPHICS-BACKGROUNDS.md */ --veil: 0.82; --veil-invert: 0.78; --bg-img-hero: url('/img/bg/code/hero.webp'); --bg-img-tint: url('/img/bg/code/tint.webp'); --bg-img-panel: url('/img/bg/code/panel.webp'); --bg-img-invert: url('/img/bg/code/invert.webp'); }