/* ========================================================================== base.css — общая основа для virtomaster.com и посадочных Radio Compass. Бренд задаётся атрибутом на : без атрибута — Virtomaster (фиолетовый), data-brand="rc" — Radio Compass (тёмно-синий + малиновый, как иконка и feature graphic приложения). ========================================================================== */ /* --- Токены ------------------------------------------------------------- */ :root { /* Типографика. Display-шрифт грузится страницей, если он ей нужен; fallback-стек подобран так, чтобы метрики не прыгали при swap. */ --font-display: 'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Флюидная шкала: от 360px до 1200px вьюпорта. */ --step-0: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem); --step-1: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem); --step-2: clamp(1.375rem, 1.25rem + 0.55vw, 1.75rem); --step-3: clamp(1.75rem, 1.5rem + 1.1vw, 2.5rem); --step-4: clamp(2.125rem, 1.6rem + 2.3vw, 3.5rem); --step-sm: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem); --step-xs: 0.8125rem; /* Ритм. */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-pill: 999px; --measure: 62ch; --container: 1120px; /* Палитра Virtomaster по умолчанию. */ --bg: #16161a; --bg-elev: #1e1e23; --surface: #242629; --surface-hover: #2b2d31; --border: #33353b; --text: #fffffe; --text-dim: #a8b2c1; /* Три роли вместо одной: фон кнопки, её ховер и цвет текста-ссылки. У них разные требования к контрасту — один токен на всё неизбежно проваливает либо кнопку (белым по светлому), либо ссылку (тёмным по тёмному). Замеры к фону страницы: кнопка 5.0:1, ховер 6.2:1, ссылка 6.1:1. */ --accent: #7a52e8; --accent-strong: #6a44d4; --accent-text: #a189f8; --accent-ink: #ffffff; --accent-soft: rgba(139, 107, 245, 0.14); --positive: #2cb67d; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-accent: 0 6px 20px color-mix(in srgb, var(--accent) 35%, transparent); --ring: 2px solid var(--accent-text); --ring-offset: 3px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur: 0.2s; } /* Radio Compass: палитра взята из иконки приложения и feature graphic. */ [data-brand='rc'] { --bg: #0f1228; --bg-elev: #161a34; --surface: rgba(255, 255, 255, 0.045); --surface-hover: rgba(255, 255, 255, 0.085); --border: rgba(255, 255, 255, 0.11); --text: #ffffff; --text-dim: #a7aec9; --accent: #e94560; --accent-strong: #d4304b; --accent-text: #f2708a; --accent-ink: #ffffff; --accent-soft: rgba(233, 69, 96, 0.13); } /* --- Сброс -------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; /* Якорные ссылки не должны уезжать под фиксированную шапку. */ scroll-padding-top: 5.5rem; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); font-size: var(--step-0); line-height: 1.6; color: var(--text-dim); background-color: var(--bg); min-height: 100svh; text-rendering: optimizeLegibility; } img, picture, svg, video { display: block; max-width: 100%; height: auto; } a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 0.2em; } ul, ol { list-style: none; } button, input, select, textarea { font: inherit; color: inherit; } /* --- Типографика -------------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; } h1 { font-size: var(--step-4); } h2 { font-size: var(--step-3); } h3 { font-size: var(--step-2); } h4 { font-size: var(--step-1); } p { text-wrap: pretty; } /* --- Раскладка ---------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-5); } .section { padding-block: clamp(var(--space-7), 7vw, var(--space-9)); } .section-head { max-width: var(--measure); margin-inline: auto; margin-bottom: var(--space-7); text-align: center; } .section-head p { margin-top: var(--space-4); font-size: var(--step-1); } .eyebrow { display: inline-block; margin-bottom: var(--space-3); font-size: var(--step-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); } /* --- Кнопки ------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); padding: 0.9rem 1.6rem; border: 1px solid transparent; border-radius: var(--radius-md); background: var(--accent); color: var(--accent-ink); font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; text-decoration: none; cursor: pointer; box-shadow: var(--shadow-accent); transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .btn:hover { background: var(--accent-strong); transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn svg { width: 1.4em; height: 1.4em; flex: none; } .btn--ghost { background: transparent; border-color: var(--border); color: var(--text); box-shadow: none; } .btn--ghost:hover { background: var(--surface-hover); border-color: var(--accent); } .btn--sm { padding: 0.6rem 1.1rem; font-size: var(--step-sm); border-radius: var(--radius-sm); } /* Статичная «плашка», а не ссылка: для «iOS — скоро». */ .btn--pending { background: transparent; border-color: var(--border); color: var(--text-dim); box-shadow: none; cursor: default; } .btn--pending:hover { transform: none; background: transparent; } /* --- Карточки ----------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .card h3 { font-size: var(--step-1); margin-bottom: var(--space-2); } .card p { font-size: var(--step-sm); color: var(--text-dim); } .card__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: var(--space-4); border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-text); } .card__icon svg { width: 1.5rem; height: 1.5rem; } .grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); } /* --- Доступность -------------------------------------------------------- */ :where(a, button, summary, [tabindex]):focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); border-radius: var(--radius-sm); } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip-link { position: absolute; top: var(--space-3); left: var(--space-3); z-index: 2000; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--accent); color: var(--accent-ink); font-weight: 600; text-decoration: none; transform: translateY(-200%); transition: transform var(--dur) var(--ease); } .skip-link:focus-visible { transform: translateY(0); } /* --- Подвал ------------------------------------------------------------- */ .footer { border-top: 1px solid var(--border); padding-block: var(--space-6); font-size: var(--step-sm); /* Не --text-dim и не серый: контраст подвала — частая поломка WCAG. */ color: var(--text-dim); text-align: center; } .footer a { display: inline-block; /* Список ссылок, а не текст в предложении: исключение WCAG 2.2 для inline здесь не действует, нужны честные 24px по высоте. */ padding-block: var(--space-1); color: var(--text-dim); text-decoration: none; } .footer a:hover { color: var(--accent-text); text-decoration: underline; } .footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-5); margin-top: var(--space-3); } /* --- Уважение к настройкам пользователя --------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }