/* Оформление лендинга «Промпты для Авито». Единственный источник цвета, шрифта и размера — этот файл. Палитра снята с референса aat-media.ru (editorial-тема). */ :root { /* Цвет */ --color-milk: #f2efe6; /* основной фон */ --color-paper: #fbfaf6; /* фон светлых секций и карточек */ --color-ink: #11120f; /* текст и обводки */ --color-muted: #67685f; /* второстепенный текст */ --color-line: rgba(17, 18, 15, 0.18); --color-line-soft: rgba(17, 18, 15, 0.08); --color-lime: #c8ff34; /* акцент: подсветка, кнопки */ --color-blue: #1667ff; /* второй акцент */ --color-dark: #111310; /* тёмные плашки */ --color-dark-soft: #1b1d18; --color-night: #0b0c09; /* фон страницы в тёмной теме */ --color-inverse: #fbfaf6; /* текст на тёмном */ --color-price-old: #8b8c84; /* зачёркнутая цена */ /* Текст, линии и подложки поверх тёмного */ --color-on-dark: rgba(251, 250, 246, 0.72); --color-on-dark-muted: rgba(251, 250, 246, 0.70); --color-on-dark-dim: rgba(251, 250, 246, 0.60); --color-on-dark-faint: rgba(251, 250, 246, 0.55); --color-on-dark-border: rgba(251, 250, 246, 0.35); --color-on-dark-line: rgba(251, 250, 246, 0.16); --color-on-dark-bg: rgba(251, 250, 246, 0.06); /* Слот под контент от клиента — намеренно заметный */ --color-slot-bg: rgba(17, 18, 15, 0.04); --color-slot-border: rgba(17, 18, 15, 0.35); --color-slot-text: #67685f; /* ── Тема интерфейса ─────────────────────────────────────── Роль-токены. Их переключает страница промтов атрибутом data-tema на : без атрибута — светлая, temnaya — тёмная. Лендинг и страница оплаты их не используют, там тема одна. */ --ui-bg: var(--color-milk); /* фон страницы */ --ui-panel: var(--color-paper); /* карточки, сайдбар, шапка */ --ui-sunk: var(--color-milk); /* поля ввода и текст промпта */ --ui-text: var(--color-ink); --ui-text-muted: var(--color-muted); --ui-line: var(--color-line); --ui-line-soft: var(--color-line-soft); --ui-strong: var(--color-ink); /* жирная обводка и текст кнопок */ --ui-shadow: 8px 8px 0 var(--color-ink); --ui-overlay: rgba(17, 18, 15, 0.72); /* Шрифт */ --font-base: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --size-display: clamp(40px, 4.6vw, 68px); /* h1 в узкой колонке героя */ --size-band: clamp(44px, 6.2vw, 92px); /* разрывные плашки во всю ширину */ --size-h2: clamp(38px, 5.2vw, 76px); --size-h3: clamp(24px, 2.6vw, 38px); --size-h4: clamp(18px, 1.5vw, 22px); --size-lead: clamp(17px, 1.5vw, 22px); --size-body: 16px; --size-small: 13px; --size-kicker: 10px; --size-price: clamp(56px, 7vw, 104px); --size-metric: clamp(22px, 2.2vw, 34px); --weight-regular: 400; --weight-medium: 500; --weight-semi: 600; --weight-bold: 700; --weight-black: 800; --line-display: 0.94; --line-tight: 1.02; --line-base: 1.6; --line-lead: 1.55; --track-display: -0.06em; --track-tight: -0.04em; --track-kicker: 0.16em; --track-caps: 0.1em; /* Отступы */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 70px; --space-9: 110px; --space-10: 138px; /* Форма */ --border-thin: 1px; --radius-none: 0; --radius-pill: 999px; --shadow-hard: 16px 16px 0 var(--color-ink); --shadow-hard-hover: 21px 21px 0 var(--color-ink); --shadow-hard-sm: 8px 8px 0 var(--color-ink); --shadow-lift: 0 16px 0 rgba(17, 18, 15, 0.12); /* Сетка */ --page-width: 1320px; --text-width: 690px; --header-height: 76px; --side-width: 322px; --grid-min-md: 300px; --grid-min-sm: 240px; --media-ratio: 16 / 9; --media-ratio-portrait: 9 / 16; /* Движение */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --dur-fast: 180ms; --dur-slow: 600ms; --lift: -3px; } /* Тёмная тема: те же роли, другие значения. Больше нигде цвет не меняется. */ [data-tema="temnaya"] { --ui-bg: var(--color-night); --ui-panel: var(--color-dark); --ui-sunk: var(--color-dark-soft); --ui-text: var(--color-inverse); --ui-text-muted: var(--color-on-dark-dim); --ui-line: var(--color-on-dark-line); --ui-line-soft: rgba(251, 250, 246, 0.08); --ui-strong: var(--color-on-dark-border); --ui-shadow: 8px 8px 0 rgba(200, 255, 52, 0.16); --ui-overlay: rgba(0, 0, 0, 0.78); --color-slot-bg: var(--color-on-dark-bg); --color-slot-border: var(--color-on-dark-border); --color-slot-text: var(--color-on-dark); }