/* ═════════════════════════════════════════════════════════════════════════════ akonit · ТЁМНАЯ ТЕМА лендинга — общий слой для всех страниц (index · tariffs · status · privacy · terms). Подключается ПОСЛЕ инлайновых стилей страницы; включается атрибутом . Откат — снять атрибут: светлые стили никуда не делись, они по-прежнему база. Принцип: тёмная тема НЕ чёрная, а глубокая сине-ночная. Стеклу нужно на чём плавать: на #000 панели становятся плоскими плашками, а мягкие тени светлой темы перестают работать вовсе. Объём на тёмном несёт не тень, а верхний световой кант (inset 0 1px 0) и подсветка фона под панелью. ⚠️ --blue-600 МЕНЯЕТ РОЛЬ. В светлой теме это «синий потемнее» — им написан текст на плашках --blue-50 (бейдж тарифа, «Открыть график», кнопка канала, пинг в легенде карты). На тёмном тот же приём требует ОБРАТНОГО: текст светлее заливки. Скопируешь светлые значения — эти места станут нечитаемыми. ⚠️ Цвета canvas (карта мира) из CSS не достаются — их читает JS через --map-*. Меняешь тему через JS — обязательно dispatchEvent(new Event('resize')), иначе canvas останется в прежних цветах. ═════════════════════════════════════════════════════════════════════════════ */ :root[data-theme="dark"] { color-scheme: dark; /* скроллбары, поля форм и системные контролы */ --blue: #4f9dff; --blue-600: #85b9ff; /* СВЕТЛЕЕ --blue, см. шапку файла */ --blue-50: rgba(79,157,255,.14); --blue-100: rgba(79,157,255,.30); --ink: #e8eefc; --ink-2: #a6b3cb; --muted: #7d8ba6; /* на тёмном 4.6:1 — светлая тема тут проседала до 3.6:1 */ --dim: #94a2ba; /* имя из tariffs.html (там --muted не заведён) */ --line: rgba(255,255,255,.075); --line-2: rgba(255,255,255,.14); --surface: #101827; --surface-2: #172134; --green: #35d07f; --violet: #9d8fff; --violet-600:#bdb0ff; /* тоже светлее базового: текст на фиолетовой плашке */ --violet-50: rgba(157,143,255,.14); --violet-100:rgba(157,143,255,.32); --cyan: #3fd3e8; --rose: #ff6385; --red: #ff6b63; --amber: #ffb445; --shadow: 0 1px 2px rgba(0,0,0,.5), 0 10px 30px -14px rgba(0,0,0,.8); --shadow-lg: 0 24px 64px -28px rgba(0,0,0,.9), 0 2px 8px rgba(0,0,0,.35); --ring: 0 0 0 4px rgba(79,157,255,.24); /* Палитра canvas карты — её читает JS, из CSS не достаётся (см. шапку). */ --map-land: rgba(126,166,226,.13); --map-edge: rgba(120,170,245,.45); --map-dash: rgba(140,180,240,.60); } /* ─────────────────────────── ОБЩЕЕ ДЛЯ ВСЕХ СТРАНИЦ ──────────────────────── */ :root[data-theme="dark"] body { background: #070c16; } /* Фон: ночной градиент. У index свои блобы-элементы, у status/privacy/terms всё нарисовано градиентами в самом .bg — поэтому фон задаётся заново. */ :root[data-theme="dark"] .bg { background: radial-gradient(1100px 620px at 50% -8%, rgba(30,64,140,.42), transparent 62%), linear-gradient(180deg, #0a1120, #070c16 46%); } :root[data-theme="dark"] .bg .blob, :root[data-theme="dark"] .bg i { opacity: .34; filter: blur(80px); } :root[data-theme="dark"] .blob.b1, :root[data-theme="dark"] .bg .b1 { background: radial-gradient(circle at 30% 30%, #1f5fd6, transparent 70%); } :root[data-theme="dark"] .blob.b2, :root[data-theme="dark"] .bg .b2 { background: radial-gradient(circle at 60% 40%, #0e7d93, transparent 70%); } :root[data-theme="dark"] .blob.b3, :root[data-theme="dark"] .bg .b3 { background: radial-gradient(circle at 50% 50%, #4b3bb5, transparent 72%); } :root[data-theme="dark"] .bg .b4 { background: radial-gradient(circle at 50% 50%, #3a58c8, transparent 72%); } :root[data-theme="dark"] .bg .grid { opacity: .42; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); } :root[data-theme="dark"] .bg-flower.f1 { color: #4a7ad6; opacity: .075; } :root[data-theme="dark"] .bg-flower.f2 { color: #6a55d8; opacity: .07; } :root[data-theme="dark"] .bg-flower.f3 { color: #2f9fb8; opacity: .07; } :root[data-theme="dark"] ::selection { background: rgba(79,157,255,.32); } /* Матовое стекло — один вид на все страницы */ :root[data-theme="dark"] .glass { background: rgba(21,30,50,.55); border: 1px solid rgba(255,255,255,.075); -webkit-backdrop-filter: blur(20px) saturate(1.25); backdrop-filter: blur(20px) saturate(1.25); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(0,0,0,.4); } /* Шапка: на index матовеет при скролле, на остальных — сразу матовая */ :root[data-theme="dark"] .nav-outer, :root[data-theme="dark"] .nav-outer.scrolled { border-bottom-color: rgba(255,255,255,.07); box-shadow: 0 10px 34px -22px rgba(0,0,0,.9); } :root[data-theme="dark"] .nav-outer.scrolled { background: rgba(9,14,26,.72); } /* Кнопки */ :root[data-theme="dark"] .btn { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.12); } :root[data-theme="dark"] .btn:hover { background: rgba(255,255,255,.08); border-color: var(--blue-100); } :root[data-theme="dark"] .btn-primary { border-color: transparent; color: #fff; background: linear-gradient(180deg, #3d90ff, #1a73e8); box-shadow: 0 12px 28px -10px rgba(45,125,255,.7), inset 0 1px 0 rgba(255,255,255,.28); } :root[data-theme="dark"] .btn-primary:hover { background: linear-gradient(180deg, #59a4ff, #2b82f5); box-shadow: 0 16px 34px -10px rgba(45,125,255,.8), inset 0 1px 0 rgba(255,255,255,.32); } :root[data-theme="dark"] .btn-tg { color: var(--blue-600); background: var(--blue-50); border-color: var(--blue-100); } :root[data-theme="dark"] .btn-tg:hover { background: rgba(79,157,255,.22); border-color: rgba(79,157,255,.42); } :root[data-theme="dark"] .btn-tg svg { color: #4ab3e8; } :root[data-theme="dark"] .btn-prem { color: #bdb0ff; background: rgba(157,143,255,.14); border-color: rgba(157,143,255,.32); } :root[data-theme="dark"] .btn-prem:hover { color: #cfc6ff; background: rgba(157,143,255,.22); border-color: rgba(157,143,255,.48); } /* ───────────────────────────── ГЛАВНАЯ (index) ───────────────────────────── */ /* «Шлифованная сталь»: в светлой теме — серый текст с белым бликом сверху. На тёмном тот же приём даёт серебряный градиент по тексту. */ :root[data-theme="dark"] .hero h1 { color: transparent; background-image: linear-gradient(176deg, #f4f8ff 0%, #c3d0e8 42%, #91a0bd 58%, #e2ebfb 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; filter: drop-shadow(0 2px 16px rgba(110,160,255,.20)); } :root[data-theme="dark"] .hero-logo .logo { filter: drop-shadow(0 16px 40px rgba(79,157,255,.42)); } :root[data-theme="dark"] .scroll-cue { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.12); } :root[data-theme="dark"] .scroll-cue:hover { color: var(--blue); border-color: var(--blue-100); } /* Плашки-показатели. Акценты заданы ИНЛАЙНОМ в разметке (style="--accent:…"), поэтому только !important их перебивает. */ :root[data-theme="dark"] .plates .plate:nth-child(1) { --accent: #35d07f !important; --wash: rgba(53,208,127,.12) !important; --edge: rgba(53,208,127,.26) !important; } :root[data-theme="dark"] .plates .plate:nth-child(2) { --accent: #3fd3e8 !important; --wash: rgba(63,211,232,.12) !important; --edge: rgba(63,211,232,.26) !important; } :root[data-theme="dark"] .plate:hover { box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.09), 0 0 0 1px var(--edge, rgba(79,157,255,.26)); } :root[data-theme="dark"] .avail { --avail-line: #8b84ff; } :root[data-theme="dark"] .avail::before { background: radial-gradient(520px 220px at 8% -30%, rgba(139,132,255,.16), transparent 72%); } :root[data-theme="dark"] .avail:hover { box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.09), 0 0 0 1px rgba(139,132,255,.34); } :root[data-theme="dark"] .avail-cta { color: var(--blue-600); background: var(--blue-50); border-color: var(--blue-100); } :root[data-theme="dark"] .avail:hover .avail-cta { background: rgba(79,157,255,.22); border-color: rgba(79,157,255,.42); } :root[data-theme="dark"] .spark-line { stroke: #8b84ff; } :root[data-theme="dark"] .pr-grid { --pr-dim: #94a2ba; } :root[data-theme="dark"] .pr-name { background-image: linear-gradient(100deg, #d5deef, #8f9cb6); } :root[data-theme="dark"] .is-hl .pr-name { background-image: linear-gradient(100deg, #8dbcff, #5a9bff); } /* ⚠️ Premium обязан остаться фирменным сине-фиолетовым: правило .pr-name выше перебивает .is-prem .pr-name по специфичности и иначе красит его серебром. */ :root[data-theme="dark"] .is-prem .pr-name { background-image: linear-gradient(100deg, #6fa8ff 8%, #8db4ff 45%, #b09fff 100%); } :root[data-theme="dark"] .pr-card.is-hl { background: rgba(30,48,86,.62); border-color: rgba(79,157,255,.5); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.10), 0 0 0 1px rgba(79,157,255,.34), 0 22px 46px -24px rgba(45,125,255,.55); } :root[data-theme="dark"] .pr-card.is-prem { border-color: rgba(157,143,255,.36); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(157,143,255,.22); } :root[data-theme="dark"] .pr-sep { background: rgba(255,255,255,.09); } :root[data-theme="dark"] .is-hl .pr-sep { background: rgba(255,255,255,.14); } :root[data-theme="dark"] .feat:hover, :root[data-theme="dark"] .client:hover { border-color: rgba(79,157,255,.5); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.09), 0 0 0 1px rgba(79,157,255,.42), 0 18px 40px -22px rgba(45,125,255,.6); } :root[data-theme="dark"] .feat .ic { background: var(--blue-50); color: var(--blue); } :root[data-theme="dark"] .feat:hover .ic, :root[data-theme="dark"] .feat .ic:hover { background: rgba(79,157,255,.26); color: #a9cdff; box-shadow: 0 8px 20px -8px rgba(45,125,255,.6); } :root[data-theme="dark"] .soon { color: #bdb0ff; border-color: rgba(157,143,255,.34); background: rgba(157,143,255,.14); } /* Плитка иконки приложения: картинка идёт «на вылет», белая подложка почти не видна — но её кант на тёмном обязан быть светлым, иначе плитка пропадает. */ :root[data-theme="dark"] .app-ic { box-shadow: 0 10px 22px -8px var(--glow, rgba(45,125,255,.6)), 0 0 0 1px rgba(255,255,255,.12); } :root[data-theme="dark"] .client-hero { box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.09), 0 0 0 2px rgba(79,157,255,.34); } :root[data-theme="dark"] .client-hero:hover { box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.09), 0 0 0 2px rgba(79,157,255,.55), 0 22px 46px -24px rgba(45,125,255,.6); } :root[data-theme="dark"] .client-hero::before { background: radial-gradient(560px 240px at 8% -30%, rgba(79,157,255,.20), transparent 70%); } :root[data-theme="dark"] .scam:hover { box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.09), 0 0 0 1px rgba(255,99,133,.3); } :root[data-theme="dark"] .scam::before { background: radial-gradient(560px 260px at 8% -20%, rgba(255,99,133,.13), transparent 70%); } :root[data-theme="dark"] .scam-chips span { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.12); } :root[data-theme="dark"] .scam-mock { background: rgba(13,20,35,.8); border-color: rgba(255,255,255,.1); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.07); } :root[data-theme="dark"] .scam-mock .bar { background: rgba(255,255,255,.035); border-bottom-color: rgba(255,255,255,.08); } :root[data-theme="dark"] .log-row { background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.08); } :root[data-theme="dark"] .log-row .verdict { color: #ff8199; border-color: rgba(255,99,133,.34); background: rgba(255,99,133,.12); } :root[data-theme="dark"] .scam-mock .bar .live i { box-shadow: 0 0 8px rgba(53,208,127,.7); } :root[data-theme="dark"] .cta-band::after { background: radial-gradient(620px 220px at 50% -30%, rgba(79,157,255,.22), transparent 70%); } :root[data-theme="dark"] .cta-band:hover { box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.09), 0 0 0 1px rgba(79,157,255,.3); } :root[data-theme="dark"] .geo-wrap::before { background: radial-gradient(720px 320px at 50% -22%, rgba(79,157,255,.16), transparent 70%); } :root[data-theme="dark"] .geo-zoom button { background: rgba(24,34,56,.92); border-color: rgba(255,255,255,.14); color: var(--ink); box-shadow: 0 8px 18px -10px rgba(0,0,0,.8); } :root[data-theme="dark"] .geo-zoom button:hover { background: rgba(32,46,76,.96); border-color: rgba(79,157,255,.55); color: #a9cdff; box-shadow: 0 0 0 1px rgba(79,157,255,.34), 0 10px 22px -12px rgba(45,125,255,.8); } :root[data-theme="dark"] .geo-legend li { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); } :root[data-theme="dark"] .geo-legend li:hover, :root[data-theme="dark"] .geo-legend li.on { border-color: rgba(79,157,255,.55); color: var(--ink); box-shadow: 0 0 0 1px rgba(79,157,255,.36), 0 12px 24px -14px rgba(45,125,255,.7); } :root[data-theme="dark"] .geo-legend li.hub { border-color: rgba(79,157,255,.5); background: rgba(79,157,255,.12); } /* Подсказка на карте: в светлой теме тёмная плашка. На тёмном её не видно — поднимаем до отдельной поверхности с кантом, иначе сливается с водой карты. */ :root[data-theme="dark"] .geo-tip { background: rgba(30,43,70,.97); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 14px 30px -12px rgba(0,0,0,.9); } :root[data-theme="dark"] .faq-item > summary:hover { color: #ffffff; } :root[data-theme="dark"] footer { border-top-color: rgba(255,255,255,.08); } :root[data-theme="dark"] .foot-bottom { border-top-color: rgba(255,255,255,.08); } /* ─────────────────────────────── ТАРИФЫ ──────────────────────────────────── */ /* ⚠️ Шапка: на главной она ПРОЗРАЧНАЯ над героем и матовеет только при скролле — это часть замысла первого экрана. На остальных страницах она матовая сразу, поэтому фон задаётся всем, кроме главной (у неё data-page="home"). */ :root[data-theme="dark"]:not([data-page="home"]) .nav-outer { background: rgba(9,14,26,.72); } :root[data-theme="dark"] .sp-card.is-hl, :root[data-theme="dark"] .loc-card.is-hl { background: rgba(30,48,86,.62); border-color: rgba(79,157,255,.45); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.10), 0 0 0 1px rgba(79,157,255,.3); } :root[data-theme="dark"] .sp-card.is-prem, :root[data-theme="dark"] .loc-card.is-prem { background: linear-gradient(170deg, rgba(48,42,92,.66), rgba(24,32,54,.58)); border-color: rgba(157,143,255,.34); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(157,143,255,.22); } :root[data-theme="dark"] .sp-bar { background: rgba(255,255,255,.08); } :root[data-theme="dark"] .sp-t.off { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.07); } :root[data-theme="dark"] .sp-t.off svg.ic, :root[data-theme="dark"] .is-prem .sp-t.off svg.ic { color: #5d6a80; } :root[data-theme="dark"] .sp-t.off b { color: #8492a8; } :root[data-theme="dark"] .loc-pins svg.off, :root[data-theme="dark"] .loc-card.is-hl .loc-pins svg.off, :root[data-theme="dark"] .loc-card.is-prem .loc-pins svg.off { color: #39435a; } :root[data-theme="dark"] .cap.is-prem { border-color: rgba(157,143,255,.3); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(157,143,255,.22); } :root[data-theme="dark"] .qa-item { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.09); } /* ⚠️ Блок «Akonit LTE» НЕ трогаем: он и в светлой теме тёмный (#101a2e) — на тёмной странице он просто перестаёт быть островом. */ /* ──────────────────────── ДОСТУПНОСТЬ (status) ───────────────────────────── */ :root[data-theme="dark"] .chips { background: rgba(255,255,255,.05); } :root[data-theme="dark"] .chip.active { background: rgba(79,157,255,.20); color: #b9d6ff; box-shadow: none; } :root[data-theme="dark"] .head .hp { background: rgba(255,255,255,.05); } :root[data-theme="dark"] .chart .grid-line { stroke: rgba(255,255,255,.09); } /* Точка на конце линии и точка под курсором — «дырка» цветом страницы, а не белая: белая на тёмном читается как самостоятельный маркер, а не как разрыв. */ :root[data-theme="dark"] .chart .end-dot { fill: #0b1120; } :root[data-theme="dark"] .hover-dot { stroke: #0b1120; } /* ⚠️ .tip и в светлой теме тёмная плашка — на тёмном ей нужен кант, иначе она сливается с полотном графика. */ :root[data-theme="dark"] .tip { border: 1px solid rgba(255,255,255,.14); } /* ──────────────────── ПРАВОВЫЕ (privacy · terms) ─────────────────────────── */ :root[data-theme="dark"] .doc-tabs a.active { background: rgba(79,157,255,.20); color: #b9d6ff; } :root[data-theme="dark"] .aup { background: rgba(255,99,133,.09); border-color: rgba(255,99,133,.26); }