/* ============================================================ Roma Style — Design Tokens Source: Roma Style - Design System.html (Claude Design v1.0) Updated: 2026-05-01 ============================================================ Mobile-first. Все значения подключайте через var(--token). Подключение шрифтов вынесено в fonts.css или index.html . ============================================================ */ :root { /* ────────────────────────────────────────── 1 · ПАЛИТРА ────────────────────────────────────────── */ /* Фиолет · фон и поверхности */ --bg-1: #3A1F4A; /* основной фон */ --bg-2: #6B3D85; /* радиальный градиент (нижний) */ --bg-3: #9466AE; /* верхнее свечение */ --surface-dark: #1C0E2C; /* dark card низ */ --surface-dark-2: #2E1740; /* dark card верх */ /* Тёплые акценты */ --accent: #F0A468; /* primary CTA, активные состояния */ --accent-2: #F8D2A8; /* Italianno, эпиграфы, выделение */ --gold: #D7AB72; /* линии-разделители, угловые засечки */ /* Светлые / текст */ --card: #FBEFD9; /* кремовая поверхность, текст на тёмном */ --lilac: #E0BFF0; /* eyebrow, тонкие линии */ --ink: #2A1A3E; /* основной текст на креме */ --ink-2: #5A3A78; /* вторичный текст на креме */ /* Текст на тёмном · непрозрачности */ --on-dark: rgba(251, 239, 217, 0.96); /* основной параграф */ --on-dark-mid: rgba(251, 239, 217, 0.78); /* meta, неактивные */ --on-dark-faint: rgba(251, 239, 217, 0.55); /* captions, дисклеймеры */ /* ────────────────────────────────────────── 2 · ШРИФТЫ ────────────────────────────────────────── */ --font-display: 'Cormorant Garamond', 'Times New Roman', serif; --font-body: 'Source Serif 4', Georgia, serif; --font-ui: 'Inter', system-ui, -apple-system, sans-serif; /* кнопки, лейблы */ --font-script: 'Italianno', cursive; /* Веса (Cormorant: 400, 500, 500i; Source Serif: 400, 500, 400i; Italianno: 400) */ --fw-regular: 400; --fw-medium: 500; /* ────────────────────────────────────────── 3 · ТИПОГРАФИКА · РАЗМЕРЫ И МЕТРИКИ ────────────────────────────────────────── */ /* H1 · Hero */ --h1-hero-size: 40px; --h1-hero-lh: 1.02; --h1-hero-ls: -0.005em; /* H1 · Section (заголовки крупных блоков) */ --h1-section-size: 36px; --h1-section-lh: 1.04; /* H2 · Card title */ --h2-card-size: 28px; --h2-card-lh: 1.05; --h2-card-ls: 0.01em; /* H3 · Numeral / inline (римские, italic-акценты) */ --h3-num-size: 18px; --h3-num-style: italic; /* Body */ --body-size: 17px; --body-lh: 1.55; /* Body small (списки, описания в карточках) */ --body-sm-size: 15.5px; --body-sm-lh: 1.5; /* Eyebrow */ --eyebrow-size: 11px; --eyebrow-ls: 0.34em; /* Caption / meta */ --caption-size: 10px; --caption-ls: 0.30em; /* Italianno accent */ --script-size: 42px; /* допустимый диапазон 38–44 */ --script-lh: 1; /* ────────────────────────────────────────── 4 · ОТСТУПЫ · 8-point grid ────────────────────────────────────────── */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 48px; --s-9: 64px; /* Mobile screen — шаблоны отступов */ --page-padding-x: 28px; --page-padding-top: 22px; --page-padding-bot: 28px; --screen-gap: 20px; /* между «экранами» внутри блока */ --block-gap: 24px; /* между блоками */ --card-gap: 16px; /* отступ внутри карточки */ --list-item-gap: 12px; /* между пунктами списка */ --cta-top-margin: 8px; --header-h: 64px; /* высота sticky-шапки */ /* ────────────────────────────────────────── 5 · РАДИУСЫ ────────────────────────────────────────── */ --r-0: 0; /* линии, разделители */ --r-card: 2px; /* карточки */ --r-field: 4px; /* поля ввода, медиа */ --r-pill: 999px; /* кнопки, теги */ /* ────────────────────────────────────────── 6 · ТЕНИ И СВЕЧЕНИЯ ────────────────────────────────────────── */ /* Light card */ --shadow-card-light: 0 0 0 1px rgba(199, 160, 106, 0.35), 0 24px 60px -20px rgba(20, 8, 38, 0.55); /* Dark card */ --shadow-card-dark: 0 0 0 1px rgba(199, 160, 106, 0.32), 0 30px 70px -20px rgba(0, 0, 0, 0.6); /* Радиальный ember glow для тёмной карточки (top-right) */ --glow-ember: radial-gradient( ellipse at 80% 0%, rgba(240, 164, 104, 0.18), transparent 55% ); /* Подсветка checked-чекбокса */ --shadow-cb-on: 0 0 0 1px rgba(240, 164, 104, 0.25) inset; --filter-cb-tick: drop-shadow(0 0 4px rgba(240, 164, 104, 0.65)); /* ────────────────────────────────────────── 7 · АНИМАЦИИ / ПЕРЕХОДЫ ────────────────────────────────────────── */ --t-fast: 150ms; /* hover на кнопке */ --t-normal: 200ms; /* состояние чекбокса */ --t-slow: 300ms; --easing: cubic-bezier(0.4, 0, 0.2, 1); /* ────────────────────────────────────────── 8 · BREAKPOINTS ────────────────────────────────────────── */ /* (используются в media queries как литералы — здесь для документации) */ /* mobile: < 700px — основная вёрстка */ /* tablet: 700–1024 — увеличенные паддинги, контент остаётся одной колонкой */ /* desktop: ≥ 1024 — content max-width 720–800px по центру */ } /* ============================================================ ФОНОВЫЙ GRADIENT ДЛЯ Используется на всех страницах сайта ============================================================ */ .bg-default { background: radial-gradient(ellipse 90% 60% at 50% 0%, var(--bg-3) 0%, transparent 55%), radial-gradient(ellipse 80% 70% at 20% 100%, var(--bg-2) 0%, transparent 60%), radial-gradient(ellipse 70% 60% at 100% 80%, var(--bg-3) 0%, transparent 55%), var(--bg-1); color: var(--card); } /* ============================================================ GLOBAL RESETS (минимальные) ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-body); font-size: var(--body-size); line-height: var(--body-lh); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }