/* ============================================================================ Тёмная тема azarean.ru (ТЗ docs/TZ_AZAREAN_DARK_THEME_2026-07-24.md) Принцип: светлые стили страниц НЕ трогаем - вся тема живёт здесь, под [data-theme="dark"] на . Атрибут ставит anti-FOUC скрипт (build-site.mjs), тумблер - assets/theme.js. Палитра выведена из band-dark (#101413, зелёный графит), контрасты посчитаны кодом 24.07 (WCAG AA, таблица в ТЗ §5). Файл линкуется ПОСЛЕ инлайн-стилей страницы - токены перебивают :root. Инжектится ТОЛЬКО в дизайнерские страницы (не BARE_PAGES, не клиентские). ========================================================================== */ :root{color-scheme:light} [data-theme="dark"]{ color-scheme:dark; /* поверхности: bg (самый тёмный) -> panel -> card -> card-solid (самый светлый) */ --bg:#0f1211; --panel:#161b19; --card:#1a201d; --card-solid:#202723; --ink:#f0f2f1; --muted:#a3aba7; --faint:#7c837f; /* зелёные ТЕКСТОВЫЕ токены светлеют (на тёмном тёмно-зелёный не читается); --green и --green-btn (заливки кнопок) не меняются - белый текст на них 4.8:1 */ --green-dark:#7ee2a8; --green-deep:#5ecf90; --green-tint:rgba(45,184,78,.2); --teal:#4ec6b4; --teal-dark:#63d3c1; --teal-tint:rgba(15,157,138,.22); --peach-dark:#ffc79a; --peach-tint:rgba(255,178,122,.18); --line:#2a302d; --foot-bg:#0b0d0c; --glass-bg:rgba(20,25,23,.72); --glass-line:rgba(255,255,255,.08); /* elevation в тёмной = светлота поверхности + hairline, тени глубже, блик тише */ --shadow:0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05); --shadow-lift:0 10px 30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06); --cta-glow:0 8px 28px rgba(227,52,107,.45); /* токены клиентских страниц (фриз-шаблон + chrome-v4) - на дизайнерских не используются */ --red:#ff7a70; --v4-glass-bg:rgba(20,25,23,.72); --v4-glass-line:rgba(255,255,255,.08); } [data-theme="dark"] html,[data-theme="dark"] body{background:var(--bg)} [data-theme="dark"] ::selection{background:rgba(45,184,78,.35)} body{transition:background-color .25s, color .25s} @media (prefers-reduced-motion:reduce){body{transition:none}} /* ===== Карточки с захардкоженным белым фоном (единый паттерн #fff + var(--shadow)) ===== */ [data-theme="dark"] :is(.bcard,.bpost,.cbox,.check-box,.facts,.faq details,.feat-box,.msg, .orcard,.pane,.pay-card,.quote,.rcard,.stat,.talk-card,.tcard,.tgcard,.zl, .anchor-nav a,.rbadge:not(.dark)){background:var(--card)} /* FAQ-аккордеоны на хабах - голый details без обёртки .faq (белый фон элементом) */ [data-theme="dark"] details{background:var(--card)} /* .pcard НЕ трогаем: все прайс-карты живут внутри .band-dark со своим тёмным градиентом */ [data-theme="dark"] .msg-btn{background:var(--card)} /* сертификаты (о-нас): сканы белой бумаги остаются светлыми превью, но подложка карточная */ [data-theme="dark"] .cert{background:var(--card-solid)} /* QR-коды (/bot): НЕ темнить - перестанут сканироваться; .bqr остаётся #fff по светлому стилю */ [data-theme="dark"] .bqr{background:#fff} /* ===== Вторичный текст: на страницах он захардкожен тёмно-серым (#48484a/#3a3a3c/#2c2c2e) на белых карточках. В тёмной теме - мягкий светлый #c3cac6 (9.9:1 на card, посчитано кодом). Список селекторов собран grep-ом по всем страницам 24.07 - при добавлении нового серого текста на страницах дописывать сюда. ===== */ [data-theme="dark"] :is(.article li,.article p,.body-text p,.bot-grid ul,.bridge p, .cbox p,.check-box ul,.chip,.chips .chip,.fa-body,.faq .fa-body,.feat-box ul, .hero .lead,.intro p,.letter p,.orcard blockquote,.page-hero .lead,.pane ul, .pass,.pay-card p,.quote blockquote,.rcard blockquote,.scard p,.sem .date,.sem p, .step p,.tg-txt,.tl p,.tl-txt,.vcard p,.zcard ul,.zl ul,.zone-start p,.archive-note){color:#c3cac6} /* ===== Карточки с градиентным бордером (паттерн linear-gradient(#fff,#fff) padding-box + цветной border-box). background - одно свойство, поэтому бордер-градиент продублирован 1:1 со страниц; при изменении на странице - зеркалить сюда. ===== */ [data-theme="dark"] .step{background:linear-gradient(var(--card),var(--card)) padding-box, linear-gradient(130deg, rgba(45,184,78,.5), rgba(15,157,138,.4) 55%, rgba(255,178,122,.4)) border-box} [data-theme="dark"] :is(.bridge,.guide-strip,.pam-card){background:linear-gradient(var(--card),var(--card)) padding-box, linear-gradient(120deg, #0f9d8a, #2db84e) border-box} [data-theme="dark"] .pane.warn{background:linear-gradient(var(--card),var(--card)) padding-box, linear-gradient(120deg, #f2691f, #e3346b) border-box} [data-theme="dark"] .route-btn{background:linear-gradient(var(--card),var(--card)) padding-box, conic-gradient(from var(--ia), #2db84e, #0f9d8a, #ffb27a, #e3346b, #2db84e) border-box} [data-theme="dark"] :is(.scard,.vcard,.zcard){background:linear-gradient(var(--card),var(--card)) padding-box, linear-gradient(150deg, var(--c1), var(--c2)) border-box} [data-theme="dark"] .zcard.featured{background:linear-gradient(var(--card),var(--card)) padding-box, conic-gradient(from var(--ia), var(--c1), var(--c2), #7ed957, #ffb27a, var(--c1)) border-box} [data-theme="dark"] .bcard.tg{background:linear-gradient(var(--card),var(--card)) padding-box, linear-gradient(150deg, #2AABEE, #229ED9) border-box} [data-theme="dark"] .bcard.mx{background:linear-gradient(var(--card),var(--card)) padding-box, linear-gradient(150deg, #38b8f2, #9640f2) border-box} /* галочки списков в цветных карточках: тёмный per-card акцент --cd не читается - берём яркий --c1 */ [data-theme="dark"] .zcard li::before{color:var(--c1)} /* таблетки вариантов оплаты (прайс): в тон своей карточки - зелёные у Сплита, teal у «От студии» (просьба Вадима 24.07: выделить цветом) */ [data-theme="dark"] .pay-card:has(.tag:not(.t-teal)) .chips .chip{ background:rgba(45,184,78,.16); color:#7ee2a8; box-shadow:inset 0 0 0 1px rgba(45,184,78,.3)} [data-theme="dark"] .pay-card:has(.t-teal) .chips .chip{ background:rgba(78,198,180,.14); color:#6fd9c8; box-shadow:inset 0 0 0 1px rgba(78,198,180,.3)} /* teal-плашки .note (бот, хабы) и малиновые маркеры .pane.warn: тёмный текст -> светлый */ [data-theme="dark"] .note{color:#9adfd2} [data-theme="dark"] .pane.warn li::before{color:#ff5c8a} /* кнопка «Скачать PDF» (памятки): color:var(--ink) на белой пилюле - после флипа токена текст белый; даём тёмную подложку. Кнопка Google Drive (.gd) с явным тёмным текстом - ок */ [data-theme="dark"] .dl-btn.pdf{background:var(--card-solid); border-color:var(--line)} /* ===== Премиум-полосы .band-dark: на тёмном фоне поднимаем на ступень + hairline ===== */ [data-theme="dark"] .band-dark{ background:linear-gradient(160deg, #1f2823 0%, #1a211d 45%, #1c1823 100%); border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); } /* ===== Aurora и сияния: на тёмном те же alpha дают неон - приглушаем ===== */ [data-theme="dark"] .aurora i{opacity:.55} /* ===== Нейро-линии (gen-rays): тёмные жилы пучка (глубина на светлом фоне) на тёмном выглядят чёрными мазками - точечно светлим ТОЛЬКО тёмные стопы по атрибуту. CSS-свойство stop-color перебивает presentation-атрибут. Список = grep 24.07; при регенерации лучей с новыми тёмными цветами - дописать. ===== */ [data-theme="dark"] .rays stop[stop-color="#123c31"]{stop-color:#1f8f68} [data-theme="dark"] .rays stop[stop-color="#084f47"]{stop-color:#17a08f} [data-theme="dark"] .rays stop[stop-color="#0b6e63"]{stop-color:#2ab5a2} [data-theme="dark"] .rays stop[stop-color="#3a2120"]{stop-color:#8a4a45} [data-theme="dark"] .rays stop[stop-color="#9a4f10"]{stop-color:#c97f35} /* ===== Логотип: ассет прозрачный с ТЁМНЫМИ метками (ext-src/images/azarean-logotip.svg, белый исходник в .bak-white рядом). В тёмной теме метки красим в белый инвертом - лого монохромное, альфа-края переживают фильтр ===== */ [data-theme="dark"] .logo-link img{filter:invert(1)} /* ===== Стеклянная шапка-пилюля, мобильное меню, дропдаун (NAV_DD в build-site.mjs) ===== */ [data-theme="dark"] .head-pill{ box-shadow:0 8px 32px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06); } [data-theme="dark"] .mnav{ background:rgba(20,25,23,.94); border-color:rgba(255,255,255,.08); box-shadow:0 18px 50px rgba(0,0,0,.6); } [data-theme="dark"] .nav-dd-card{ background:rgba(26,32,29,.98); border-color:rgba(255,255,255,.08); box-shadow:0 14px 38px rgba(0,0,0,.55); } [data-theme="dark"] .nav-dd-menu a{color:var(--ink)} [data-theme="dark"] .nav-dd-menu a:hover{background:rgba(45,184,78,.16); color:#7ee2a8} [data-theme="dark"] .mnav-sub{color:#a3aba7 !important} /* ===== Модалка записи + плавающий док (BOOK_MODAL в build-site.mjs и локальные копии) ===== */ [data-theme="dark"] .bookm-bg{background:rgba(0,0,0,.6)} [data-theme="dark"] .bookm-card{ background:var(--card-solid); color:var(--ink); box-shadow:0 30px 80px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06); } [data-theme="dark"] .bookm-t{color:var(--ink)} [data-theme="dark"] .bookm-x{color:var(--muted)} [data-theme="dark"] .bookm-x:hover{background:#2a302d} [data-theme="dark"] .bm-line{color:var(--ink)} [data-theme="dark"] .sticky-cta{ background:rgba(20,25,23,.85); box-shadow:0 8px 32px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); } [data-theme="dark"] .sticky-cta .dock-offer b{color:var(--ink)} /* ===== Клиентские страницы упражнений (фриз-шаблон transform.mjs + chrome-v4). Шаблон токенизирован теми же именами (--bg/--card/--ink...) - базовый флип токенов работает сам; ниже добивка литералов ===== */ [data-theme="dark"] .head-inner{box-shadow:0 8px 32px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06)} [data-theme="dark"] .site-head .site-nav a{color:var(--ink)} [data-theme="dark"] .v4-burger span{background:var(--ink)} [data-theme="dark"] .v4-mnav{background:rgba(20,25,23,.94); border-color:rgba(255,255,255,.08); box-shadow:0 18px 50px rgba(0,0,0,.6)} [data-theme="dark"] .v4-mnav a{color:var(--ink)} [data-theme="dark"] .acc.info{background:var(--card)} [data-theme="dark"] .acc-body p,[data-theme="dark"] .acc-body ol,[data-theme="dark"] .acc-body ul{color:#c3cac6} /* номер шага: кружок var(--ink) в тёмной становится светлым - цифра должна потемнеть */ [data-theme="dark"] .acc-num{color:#0f1211} /* ===== Тумблер темы (кнопка создаётся theme.js в .head-pill дизайнерских или .head-inner клиентских страниц) ===== */ .az-theme{flex:none; width:38px; height:38px; border:0; border-radius:50%; cursor:pointer; display:grid; place-items:center; background:transparent; color:var(--ink); transition:background .15s, transform .18s} .az-theme:hover{background:var(--panel)} .az-theme:focus-visible{outline:2px solid var(--green); outline-offset:2px} .az-theme svg{width:20px; height:20px; display:block} /* мобила (<840px): CTA с margin-left:auto скрыт - прижимаем кнопку темы вправо. У бургера свой margin-left:auto: два auto в ряду делят место и утаскивают кнопку в центр - обнуляем auto у бургера, идущего сразу за кнопкой. На десктопе auto у кнопки НЕ ставить (то же расщепление против .head-cta) */ @media (max-width:840px){ .az-theme{margin-left:auto} .az-theme~.nav-burger,.az-theme~.v4-burger{margin-left:0} } /* ===== Печать всегда светлая (памятки, чернила) ===== */ @media print{ [data-theme="dark"]{ --bg:#FFF; --panel:#f2f2f7; --card:#FFF; --card-solid:#fff; --ink:#1c1c1e; --muted:#6e6e73; --faint:#8e8e93; --green-dark:#1a6e32; --green-deep:#1c7d36; --green-tint:rgba(45,184,78,.14); --teal:#0f9d8a; --teal-dark:#0b6e63; --teal-tint:rgba(15,157,138,.12); --peach-dark:#9a4f10; --peach-tint:rgba(255,157,102,.16); --line:#e5e5ea; --foot-bg:#313030; --glass-bg:rgba(255,255,255,.72); --glass-line:rgba(0,0,0,.06); --shadow:0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05), inset 0 1px 0 rgba(255,255,255,.9); --shadow-lift:0 10px 30px rgba(28,28,30,.10), inset 0 1px 0 rgba(255,255,255,.9); } [data-theme="dark"] html,[data-theme="dark"] body{background:#fff} .az-theme{display:none} }