/* ═══════════════════════════════════════════════════════════ СВЕТЛАЯ ТЕМА · версия 2.0 Включается атрибутом data-theme="light" на теге . Тёмная версия остаётся нетронутой: этот файл ничего не меняет, пока атрибута нет. Цвета взяты только из корпоративной палитры: фон #EEF4FA (--x-light) текст #121239 (--x-navy) синий #3054FF (--x-blue) красный #F9423A (--x-red) Ничего нового не придумано — светлая тема это перестановка тех же четырёх значений. Три блока остаются тёмными островами: первый экран, премьера «Среды» и финальный призыв. Они стоят на фотографиях во всю площадь, и светлый текст на них — единственный читаемый вариант. Остальная страница светлая. ═══════════════════════════════════════════════════════════ */ html[data-theme="light"]{ --x-bg:#EEF4FA; --x-ink:#121239; --x-dim:rgba(18,18,57,.62); --x-hair:rgba(18,18,57,.16); color-scheme:light; } html[data-theme="light"] body{background:var(--x-bg);color:var(--x-ink)} /* ── ТЕКСТ: те же уровни, что в тёмной, но от navy ── */ html[data-theme="light"] :is( .sx__t,.gx h3,.rows h3,.nums b,.numsx__row b,.quotes figcaption b, .spk h3,.day__from,.hours dt,.place__v,.reg__cap b,.cd b, .faq summary,.mq span,.seats b){color:var(--x-navy)} html[data-theme="light"] :is( .sx__l,.gx p,.rows p,.faq details p,.quotes blockquote, .reg__facts dd,.day__name,.day__all,.chk,.f--set .chk, .reg__ok__p,.prod span,.seats){color:rgba(18,18,57,.88)} html[data-theme="light"] :is( .day__to,.reg__cap span,.f__hint,.place__a a,.ft__meta li, .gx--wait h3){color:rgba(18,18,57,.68)} html[data-theme="light"] :is( .sx__sub,.gx__k,.nums span,.numsx__cap span,.spk p,.hours dd, .quotes figcaption span,.panel__k,.day__k,.day__dur,.cd span, .f>label,.f--set legend,.logos-x .slot>span,.f__opt, .gx--wait p:not(.gx__k),#agenda .agenda-phase-count, #agenda .agenda-phase-title,#agenda .agenda-block){color:rgba(18,18,57,.6)} html[data-theme="light"] #agenda .agenda-block{color:rgba(18,18,57,.92)} /* ── ПЛОСКОСТИ И ЛИНИИ ── */ html[data-theme="light"] :is(.sx,.gx>*,.nums>div,.numsx__cap>div, .spk figure,.quotes figure,.logos-x .slot,.prod){background:var(--x-bg)} html[data-theme="light"] :is(.gx,.nums,.numsx__cap,.spk,.quotes, .logos-x,.prods){background:rgba(18,18,57,.16)} html[data-theme="light"] :is(.rows,.rows li,.faq,.faq details, .reg__facts,.reg__facts>div,.day__rail,.mq,.numsx, #agenda .agenda-item,#agenda .agenda-phase-head){ border-color:rgba(18,18,57,.16)} html[data-theme="light"] #agenda .agenda-phase-line{background:rgba(18,18,57,.16)} html[data-theme="light"] .day__seg::before, html[data-theme="light"] .day__to::before{background:rgba(18,18,57,.5)} html[data-theme="light"] .hours>div+div, html[data-theme="light"] .cd>div+div{border-left-color:rgba(18,18,57,.2)} /* ── ШАПКА ── */ html[data-theme="light"] nav.nav-x.is-stuck{ background:rgba(238,244,250,.86);border-bottom-color:rgba(18,18,57,.14)} html[data-theme="light"] .nav-x__links a{color:rgba(18,18,57,.66)} html[data-theme="light"] .nav-x__links a:hover{color:var(--x-navy)} /* логотип отрисован белым — на светлом фоне переводим в navy */ html[data-theme="light"] .nav-x__logo-img, html[data-theme="light"] .ft__logo{filter:invert(1) brightness(.18) saturate(2.4)} /* ── ФОРМА ── */ html[data-theme="light"] :is(.reg__form input,.reg__form textarea, .reg__form select){color:var(--x-navy);background:rgba(18,18,57,.045); border-bottom-color:rgba(18,18,57,.28)} html[data-theme="light"] :is(.reg__form input::placeholder, .reg__form textarea::placeholder){color:rgba(18,18,57,.42)} html[data-theme="light"] .reg__form select option{background:#fff;color:#121239} html[data-theme="light"] .chk input{border-color:rgba(18,18,57,.4)} html[data-theme="light"] .chk input:hover{border-color:rgba(18,18,57,.75)} html[data-theme="light"] .chk a{color:var(--x-navy); border-bottom-color:rgba(18,18,57,.4)} html[data-theme="light"] .reg__bar{background:rgba(18,18,57,.16)} html[data-theme="light"] .sel::after{border-color:rgba(18,18,57,.5)} /* ── ССЫЛКИ И ВТОРИЧНОЕ ДЕЙСТВИЕ ── */ html[data-theme="light"] :is(.lnk,.place__a a){color:var(--x-navy)} html[data-theme="light"] .btn-x--ghost{color:var(--x-navy)} html[data-theme="light"] .seats__bar{background:rgba(18,18,57,.16)} /* ── ФОТОГРАФИИ: растворяем в светлый, а не в тёмный ── */ html[data-theme="light"] .band::after{ background:linear-gradient(180deg,var(--x-bg) 0%,rgba(238,244,250,.4) 14%, rgba(238,244,250,0) 40%,rgba(238,244,250,0) 62%, rgba(238,244,250,.45) 86%,var(--x-bg) 100%)} html[data-theme="light"] .band--photo::after, html[data-theme="light"] .numsx__bg::after{ background:linear-gradient(180deg,var(--x-bg) 0%,rgba(238,244,250,.28) 10%, rgba(238,244,250,0) 34%,rgba(238,244,250,0) 70%, rgba(238,244,250,.34) 92%,var(--x-bg) 100%)} html[data-theme="light"] .band__seam, html[data-theme="light"] .numsx__seam{ background:linear-gradient(180deg,transparent,rgba(18,18,57,.3) 40%,transparent)} /* карточки спикеров: заглушки-рендеры тёмные, оставляем им тёмное поле — иначе они проваливаются в светлый фон */ html[data-theme="light"] .spk__ph{background:#0d0d2b} html[data-theme="light"] .spk figcaption{background:var(--x-bg)} html[data-theme="light"] .spk--real .spk__ph::after{ background:linear-gradient(180deg,transparent 64%,rgba(13,13,43,.5) 90%,rgba(13,13,43,.8))} /* карта: в тёмной теме она инвертирована, здесь — как есть */ html[data-theme="light"] .map__frame{filter:none} html[data-theme="light"] .loc__map{background:#dde6ee; border-color:rgba(18,18,57,.18)} html[data-theme="light"] .map__scrim{ background:linear-gradient(180deg,rgba(238,244,250,.5),transparent 26%, transparent 62%,rgba(238,244,250,.7))} html[data-theme="light"] .map__place b{color:var(--x-navy);text-shadow:none} html[data-theme="light"] .map__place span{color:rgba(18,18,57,.66);text-shadow:none} html[data-theme="light"] .map__go{background:rgba(238,244,250,.9); border-color:rgba(18,18,57,.24);color:var(--x-navy)} html[data-theme="light"] .map__lock{background:rgba(238,244,250,.3)} html[data-theme="light"] .map__lock:hover{background:rgba(238,244,250,.6); color:var(--x-navy)} /* ── ПОДВАЛ ── */ html[data-theme="light"] .ft{background:var(--x-bg); border-top:1px solid rgba(18,18,57,.16)} html[data-theme="light"] .ft a{color:rgba(18,18,57,.8)} /* ── СВЕТОВОЙ СЛОЙ: на светлом фоне ореолы почти не нужны ── */ html[data-theme="light"] .orb--blue{ background:radial-gradient(circle,rgba(48,84,255,.09) 0%, rgba(48,84,255,.03) 42%,transparent 70%)} html[data-theme="light"] .orb--red{ background:radial-gradient(circle,rgba(249,66,58,.07) 0%, rgba(249,66,58,.025) 42%,transparent 70%)} /* ── ТЁМНЫЕ ОСТРОВА ──────────────────────────────────────── Первый экран, «Среда» и финал стоят на фотографиях во всю площадь. Там остаётся светлый текст на тёмном — и нижняя кромка растворяется уже в светлый фон страницы. */ html[data-theme="light"] .hero-x::after{ background:linear-gradient(180deg,rgba(238,244,250,0) 0%, rgba(238,244,250,.5) 52%,rgba(238,244,250,.9) 82%,var(--x-bg) 100%)} html[data-theme="light"] :is(.sig-x__veil,.fin__veil){ background: radial-gradient(72% 70% at 26% 50%,rgba(7,7,21,.86) 0%,rgba(7,7,21,.6) 48%, rgba(7,7,21,.16) 86%,transparent 100%), linear-gradient(180deg,var(--x-bg) 0%,rgba(7,7,21,.35) 18%, rgba(7,7,21,.3) 62%,rgba(238,244,250,.55) 92%,var(--x-bg) 100%)} html[data-theme="light"] .waves::before{ background:linear-gradient(90deg,rgba(7,7,21,.9),transparent)} html[data-theme="light"] .waves::after{ background:linear-gradient(270deg,rgba(7,7,21,.9),transparent)} /* липкая кнопка на телефоне — светлое стекло */ html[data-theme="light"] .mcta{ background:linear-gradient(180deg,rgba(238,244,250,0) 0%, rgba(238,244,250,.9) 42%,rgba(238,244,250,.98) 100%); border-top-color:rgba(18,18,57,.16)} /* ═══════════════════════════════════════════════════════════ ВОЗВРАТ СВЕТЛОГО ТЕКСТА НА ТЁМНЫХ ОСТРОВАХ Общие правила темы перекрасили в navy и то, что лежит внутри первого экрана, «Среды» и финала. Там фотография во всю площадь — текст обязан остаться светлым. ═══════════════════════════════════════════════════════════ */ html[data-theme="light"] :is(.hero-x,.sig-x,.fin) :is( .sub-x,.lead-x,.panel__k,.hours dt,.hours dd,.cd b,.cd span, .place__v,.place__a a,.facts li,.seats,.seats b,.cue, .sig-x__t,.sig-x__p,.fin__t,.fin__p,.hours__all dt,.hours__all dd){ color:rgba(238,244,250,.92)!important} html[data-theme="light"] :is(.hero-x,.sig-x,.fin) :is( .hours dt,.cd b,.place__v,.seats b,.sig-x__t,.fin__t){ color:#fff!important} html[data-theme="light"] :is(.hero-x,.sig-x,.fin) :is( .panel__k,.cd span,.facts li,.cue,.hours dd){ color:rgba(238,244,250,.72)!important} html[data-theme="light"] .hero-x .hours>div+div, html[data-theme="light"] .hero-x .cd>div+div{ border-left-color:rgba(238,244,250,.24)!important} html[data-theme="light"] .hero-x .panel+.panel{ border-top-color:rgba(238,244,250,.18)!important} html[data-theme="light"] .hero-x .seats__bar{background:rgba(238,244,250,.2)} html[data-theme="light"] .hero-x .place__a a::after{background:rgba(238,244,250,.5)} html[data-theme="light"] .hero-x .btn-x--ghost{color:rgba(238,244,250,.95)} /* «Весь день · Выставка» в шапке программы уже светлая по !important из общей таблицы — на светлом фоне возвращаем ей navy тем же весом */ html[data-theme="light"] .sx .hours__all dt, html[data-theme="light"] .sx .hours__all dd{color:rgba(18,18,57,.66)!important} html[data-theme="light"] .sx :is(.hours dt,.hours dd){color:rgba(18,18,57,.6)} html[data-theme="light"] .sx .hours dt{color:var(--x-navy)} /* ── ДОБОР: то, что осталось светлым на светлом ── */ html[data-theme="light"] .sx :is(.reg__facts dt,.reg__note, .numsx__cap span,.sx__sub){color:rgba(18,18,57,.62)} html[data-theme="light"] .sx :is(.reg__ok__t,.faq summary, .mq--ind span,.day__all span){color:var(--x-navy)} html[data-theme="light"] .reg__facts a{color:var(--x-navy)} /* ═══════════════════════════════════════════════════════════ ПРАВКИ 6 АВГУСТА В СВЕТЛОЙ ТЕМЕ ═══════════════════════════════════════════════════════════ */ /* ── БЕЛАЯ ГРАФИКА НА СВЕТЛОМ ФОНЕ ──────────────────────── Знаки реестров и логотипы продуктов — белые PNG с прозрачностью: на #EEF4FA от них не остаётся ничего. Перекрашиваем маской, как знак над заголовками: файл задаёт форму, цвет берётся из палитры. Маска висит на обёртке, а не на самом : у замещаемого элемента content:'' пиксели не гасит, и белый рисунок ложился поверх заливки — знак выходил бледной тенью. Картинка внутри держит размер коробки и скрыта visibility, поэтому ширину задавать не нужно. Плата за читаемость: локап продукта становится одноцветным — красно-синий знак в светлой версии превращается в navy. */ html[data-theme="light"] :is(.cert,.prod__logo){ background:var(--x-navy); -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-position:center;mask-position:center; -webkit-mask-size:contain;mask-size:contain} html[data-theme="light"] :is(.cert,.prod__logo) img{visibility:hidden} html[data-theme="light"] .cert--reestr{ -webkit-mask-image:url('assets/opt/badge-reestr-240.webp'); mask-image:url('assets/opt/badge-reestr-240.webp')} html[data-theme="light"] .cert--fstec{ -webkit-mask-image:url('assets/opt/badge-fstec-200.webp'); mask-image:url('assets/opt/badge-fstec-200.webp')} html[data-theme="light"] .prod__logo--platforma{ -webkit-mask-image:url('assets/opt/p-platforma-900.webp'); mask-image:url('assets/opt/p-platforma-900.webp')} html[data-theme="light"] .prod__logo--profil{ -webkit-mask-image:url('assets/opt/p-profil-900.webp'); mask-image:url('assets/opt/p-profil-900.webp')} html[data-theme="light"] .prod__logo--ai{ -webkit-mask-image:url('assets/opt/p-ai-700.webp'); mask-image:url('assets/opt/p-ai-700.webp')} /* ── СИНЯЯ ПОДСВЕТКА ЯЧЕЕК ───────────────────────────────── На тёмном фоне синий берётся 28-процентной заливкой. На светлом та же заливка даёт грязный сиреневый и роняет контраст navy-текста: здесь хватает 10%. */ html[data-theme="light"] .gx>*:not(.gx--empty):hover, html[data-theme="light"] .prod:hover{background:rgba(48,84,255,.1)} /* ── ОПИСАНИЕ ПРОДУКТА ───────────────────────────────────── Раньше это был .prod span с постоянным текстом, теперь выезжающий .prod__t — правило цвета его не покрывало. */ html[data-theme="light"] .prod__t{color:rgba(18,18,57,.88)} /* ── ПОДПИСИ, СТАВШИЕ КРУПНЫМИ ───────────────────────────── .numsx__cap span и .hours dd вышли из капители в обычный текст: в тёмной они белые, здесь — navy в полную силу. */ html[data-theme="light"] .numsx__cap span{color:var(--x-navy)} html[data-theme="light"] .hours--sx dd{color:rgba(18,18,57,.88)}