/* ============================================================ ТЕМА: text — Текст и рассуждение ------------------------------------------------------------ Редакторский характер. Текст — главный герой: серифная гарнитура набирает и заголовки, и основной текст, узкая колонка, тонкие горизонтальные линейки вместо рамок, почти нет теней, много воздуха. Отличия от main видны сразу: другая гарнитура, тёплая бумажная подложка, малые радиусы, увеличенный интерлиньяж. Контраст проверен: --accent на --bg = 7,6:1, белый на обеих точках --grad-accent ≥ 7,1:1. ============================================================ */ @font-face { font-family: 'Literata'; src: url('/fonts/literata-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, U+2190-21BB; } /* Тема объявляет все свои гарнитуры сама: @font-face глобален, и если полагаться на объявление в чужой теме, при её удалении шрифт исчезнет молча. Одинаковые объявления браузер схлопывает — дублирование бесплатно. */ @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: 'Literata Fallback'; src: local('Georgia'), local('Times New Roman'), local('Liberation Serif'); size-adjust: 103%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; } :root[data-direction='text'] { /* ---------- Поверхности: тёплая бумага ---------- */ --bg: #fbf8f2; --bg-soft: #ffffff; --surface: #ffffff; --surface-2: #f3ede1; --line: #e3dbc9; --line-soft: #efe9dd; --line-strong: #928f8a; /* ---------- Текст ---------- */ --text: #191714; --text-2: #55504a; --text-3: #777269; --text-inv: #ffffff; /* ---------- Акцент: индиго ---------- */ --accent: #26418f; --accent-2: #8a5f1a; --accent-ink: #ffffff; --accent-soft: rgb(38 65 143 / 8%); --accent-line: rgb(38 65 143 / 30%); --grad-accent: linear-gradient(135deg, #26418f 0%, #3e5fbf 100%); --grad-soft: linear-gradient(135deg, rgb(38 65 143 / 7%), rgb(138 95 26 / 5%)); /* ---------- Семантика ---------- */ --ok: #146c43; --ok-bg: rgb(20 108 67 / 9%); --warn: #85560a; --warn-bg: rgb(133 86 10 / 9%); --danger: #a52216; --danger-bg: rgb(165 34 22 / 9%); --info: #14559b; --info-bg: rgb(20 85 155 / 9%); /* ---------- Тариф Gold ---------- */ --gold: #8a5a07; --grad-gold: linear-gradient(135deg, #f5c451 0%, #e08b3c 100%); /* ---------- Форма: малые радиусы, тонкие линии ---------- */ --r-xs: 3px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-full: 999px; --r-btn: 8px; --r-card: 10px; --r-field: 8px; --border-w: 1px; /* ---------- Тени: почти нет ---------- */ --sh-xs: 0 1px 1px rgb(25 23 20 / 4%); --sh-sm: 0 1px 3px rgb(25 23 20 / 6%); --sh-md: 0 6px 18px -10px rgb(25 23 20 / 16%); --sh-lg: 0 18px 44px -24px rgb(25 23 20 / 22%); --sh-focus: 0 0 0 3px var(--accent-line); /* ---------- Типографика: серифная, книжная ---------- */ --font-h: 'Literata', 'Literata Fallback', Georgia, 'Times New Roman', serif; --font-b: 'Literata', 'Literata Fallback', Georgia, 'Times New Roman', serif; --font-m: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --tracking-h: -0.008em; --weight-h: 600; --lh-h: 1.18; --lh-b: 1.72; /* Шкала крупнее и с большим шагом — набор читается как разворот книги */ --step--1: clamp(0.81rem, 0.79rem + 0.11vw, 0.87rem); --step-0: clamp(1.00rem, 0.96rem + 0.18vw, 1.10rem); --step-1: clamp(1.20rem, 1.13rem + 0.33vw, 1.39rem); --step-2: clamp(1.44rem, 1.33rem + 0.55vw, 1.76rem); --step-3: clamp(1.73rem, 1.55rem + 0.87vw, 2.22rem); --step-4: clamp(2.07rem, 1.81rem + 1.32vw, 2.81rem); --step-5: clamp(2.49rem, 2.09rem + 1.99vw, 3.55rem); --step-6: clamp(2.70rem, 2.16rem + 2.68vw, 4.20rem); /* ---------- Ритм: узкая колонка, много воздуха ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 36px; --sp-7: 56px; --sp-8: 76px; --sp-9: 112px; --sp-10: 148px; --container: min(92vw, 1360px); --container-narrow: min(90vw, 780px); --measure: 66ch; --header-h: 68px; --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.16s var(--ease); --t-med: 0.28s var(--ease); --t-slow: 0.4s var(--ease); /* ---------- Текстура: линейки писчей бумаги, очень слабые ---------- */ /* Линовка писчей бумаги: горизонтальные линейки через 32px и поле слева. Ровно тот приём, которым живёт направление, — набор и вёрстка текста. */ --texture: repeating-linear-gradient(to bottom, rgb(38 65 143 / 4%) 0 1px, transparent 1px 34px), radial-gradient(46ch 30ch at 90% -6%, rgb(38 65 143 / 5%), transparent 72%); /* ---------- Тёмная врезка ---------- Приём светлой страницы, а не вторая тема: контрастная секция один-два раза за лендинг. Тёмную тему убрали, эти токены её не заменяют. */ --invert-bg: #14161f; --invert-surface: #1c1f2b; --invert-text: #f6f2ea; --invert-text-2: #b6bccd; --invert-accent: #9fb4f2; --invert-line: rgb(255 255 255 / 12%); /* Градиентная подложка первого экрана и финального CTA */ --mesh: radial-gradient(50ch 32ch at 90% -10%, rgb(38 65 143 / 12%), transparent 70%), radial-gradient(40ch 28ch at 0% 8%, rgb(138 95 26 / 7%), transparent 72%); /* ---------- Фоновые изображения секций ---------- Кладутся в public/img/bg/text/. Пока файла нет — слой просто не отрисуется, под ним останется градиент: пустого экрана не будет. Промпты — GRAPHICS-BACKGROUNDS.md */ --veil: 0.82; --veil-invert: 0.78; --bg-img-hero: url('/img/bg/text/hero.webp'); --bg-img-tint: url('/img/bg/text/tint.webp'); --bg-img-panel: url('/img/bg/text/panel.webp'); --bg-img-invert: url('/img/bg/text/invert.webp'); }