/* ========================================================== RateMe — темы вариантов ========================================================== Каждый вариант переопределяет токены из core.css. Атрибут data-variant вешает track.js на до отрисовки, поэтому подмены темы на глазах у человека не происходит. v1 честность графит + серифный заголовок, кремовая кнопка v2 боль чёрно-красный, тяжёлый, резкие углы v3 интрига чистый чёрный + приглушённое золото, тонкий шрифт v4 челлендж тёмно-зелёный + лайм, аркадная подача v5 минимал светлая тема, синий Telegram, ничего лишнего ========================================================== */ /* --------------------------------------------------------- V1 — ЧЕСТНОСТЬ Разговор всерьёз: спокойный графит, серифный заголовок, кремовая кнопка вместо кислотной. --------------------------------------------------------- */ [data-variant="v1"]{ --bg:#0C0D0F; --surface:#15171A; --line:#242829; --track:#1D2124; --text:#F5F3F0; --text-soft:#CFCCC6; --muted:#8E8C88; --dim:#8A8882; --accent:#7FC8B4; --accent-soft:rgba(127,200,180,.10); --accent-line:rgba(127,200,180,.30); --glow:transparent; --cta-bg:#F2EFE9; --cta-color:#0C0D0F; --cta-radius:14px; --cta-weight:600; --font-display:Georgia,"Times New Roman",serif; --h1-weight:700; --h1-tracking:-.01em; --h1-leading:1.15; --radius:14px; } /* Серифу нужен воздух, иначе читается тяжело */ [data-variant="v1"] .sub{font-size:16.5px;line-height:1.5} [data-variant="v1"] .eyebrow{text-transform:none;letter-spacing:.02em;font-weight:500} /* Кнопка кремовая, а кружки-счётчики акцентные — им нужен тёмный текст */ [data-variant="v1"] .steps li::before, [data-variant="v1"] .ava, [data-variant="v1"] .quiz-form button{color:#0C0D0F} /* --------------------------------------------------------- V2 — БОЛЬ ДЕЙТИНГА Бьём в проблему: сигнальный красный, плотная типографика, углы жёстче, сверху тлеет тревожное свечение. --------------------------------------------------------- */ [data-variant="v2"]{ --bg:#0C0A0A; --surface:#171212; --line:#2A2020; --track:#241B1B; --text:#FFFFFF; --text-soft:#DCD2D0; --muted:#9A8D8B; --dim:#8E817E; --accent:#FF4A26; --accent-soft:rgba(255,74,38,.12); --accent-line:rgba(255,74,38,.35); --glow:rgba(255,74,38,.22); --cta-bg:#FF4A26; --cta-color:#150705; --cta-radius:12px; --cta-shadow:0 12px 34px -12px rgba(255,74,38,.55); --h1-weight:800; --h1-tracking:-.03em; --h1-size:clamp(34px,10.5vw,46px); --h1-leading:1.05; --radius:12px; --radius-lg:16px; } [data-variant="v2"] .eyebrow{border-radius:6px;letter-spacing:.12em} /* Чеклист болей — маркер должен читаться как «нет», а не «готово» */ [data-variant="v2"] .checks li::after{ width:9px;height:9px;left:4px;top:7px; border-width:0 2px 2px 0;transform:rotate(45deg) scale(.85); } [data-variant="v2"] .panel{border-left:3px solid var(--accent)} /* --------------------------------------------------------- V3 — ИНТРИГА Меньше всего цвета: чистый чёрный, приглушённое золото, тонкий крупный шрифт. Закрытые голосовые размыты. --------------------------------------------------------- */ [data-variant="v3"]{ --bg:#000000; --surface:#0D0D0D; --line:#1C1C1C; --track:#161616; --text:#F0EDE6; --text-soft:#BDB8AE; --muted:#8A857C; --dim:#837E74; --accent:#C9A227; --accent-soft:rgba(201,162,39,.10); --accent-line:rgba(201,162,39,.30); --glow:transparent; --cta-bg:#C9A227; --cta-color:#000000; --cta-radius:100px; --cta-weight:600; --h1-weight:300; --h1-tracking:0; --h1-size:clamp(30px,8.5vw,38px); --h1-leading:1.25; --radius:14px; --radius-lg:18px; } [data-variant="v3"] h1 b{font-weight:500} [data-variant="v3"] .eyebrow{ background:none;border:0;padding:0; letter-spacing:.22em;font-weight:400;font-size:11.5px; } [data-variant="v3"] .quiz-form input, [data-variant="v3"] .quiz-opt{border-radius:100px} [data-variant="v3"] .quiz-form button{border-radius:50%} /* Смысл варианта — «пока закрыто». Размываем именно дорожку звука */ [data-variant="v3"] .voice.locked .wave{filter:blur(2.5px)} /* --------------------------------------------------------- V4 — ЧЕЛЛЕНДЖ Аркада: тёмно-зелёная база, лаймовый акцент, тяжёлый заголовок, цифры моноширинные. --------------------------------------------------------- */ [data-variant="v4"]{ --bg:#07110B; --surface:#0F1B14; --line:#1C3125; --track:#16261C; --text:#EAFFF2; --text-soft:#BFE8CE; --muted:#79A88C; --dim:#6E9C84; --accent:#B6FF3A; --accent-soft:rgba(182,255,58,.12); --accent-line:rgba(182,255,58,.32); --glow:rgba(182,255,58,.16); --cta-bg:#B6FF3A; --cta-color:#07110B; --cta-radius:14px; --cta-shadow:0 12px 34px -14px rgba(182,255,58,.5); --cta-weight:800; --font-display:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --h1-weight:900; --h1-tracking:-.035em; --h1-size:clamp(34px,11vw,48px); --h1-leading:1.02; --radius:14px; } [data-variant="v4"] .eyebrow{font-family:var(--font-mono);letter-spacing:.06em} [data-variant="v4"] h1 b{font-family:var(--font-mono);font-weight:700;letter-spacing:-.02em} /* --------------------------------------------------------- V5 — МИНИМАЛ Единственная светлая тема. Один экран, один синий акцент, никакого неона — проверяем, нужен ли лендинг вообще. --------------------------------------------------------- */ [data-variant="v5"]{ --bg:#FFFFFF; --surface:#F6F6F7; --line:#E4E4E7; --track:#EDEDF0; --text:#0A0A0B; --text-soft:#3F3F46; --muted:#71717A; --dim:#6B6B75; --accent:#0B72A6; --accent-soft:rgba(11,114,166,.10); --accent-line:rgba(11,114,166,.30); --glow:transparent; --cta-bg:#0B72A6; --cta-color:#FFFFFF; --cta-radius:14px; --cta-shadow:0 10px 28px -12px rgba(42,171,238,.6); --h1-weight:700; --h1-tracking:-.025em; --h1-leading:1.12; --radius:14px; } [data-variant="v5"] .eyebrow{text-transform:none;letter-spacing:.01em;font-weight:600}