/* ============================================================ СВЕТЛАЯ ТЕМА — «GIORNO» Тёплая бумага, фирменный чёрный и тот же красный. Работает переопределением токенов из site.css: почти все цвета на сайте заданы через переменные, поэтому смена палитры перекрашивает сайт целиком. Это тема по умолчанию: файл не грузится только там, где сайт заведомо тёмный (домен b-…). ============================================================ */ :root[data-theme="light"]{ --ink-bg:#F7F3EC; /* тёплая бумага */ --ink-bg2:#FFFFFF; /* карточки */ --ink:#1D1D1B; /* фирменный чёрный */ --ink-dim:#6F6459; --line:rgba(29,29,27,.15); --ink-rgb:29,29,27; --bg-rgb:247,243,236; --shadow-rgb:74,58,44; /* тень тёплая, не серая */ --surface-2:#FFFFFF; --bar-bg:#F1E9DD; /* полоса бара чуть плотнее бумаги */ --plate-a:#EDE5DA; --plate-b:#E1D7C8; --glass:rgba(255,255,255,.92); /* Фирменный #E21F21 на бумаге даёт только 4.26:1 — мелкие подписи (eyebrow, цены, теги) читаются на пределе, а на полосе бара падают до 3.9:1. Чуть глубже: 5.1:1 на бумаге, 4.7:1 на полосе бара, 5.6:1 для белого текста на красной кнопке. Ночная тема не меняется. */ --red:#CC1A1D; --red-rgb:204,26,29; /* --scrim-rgb НЕ переопределяем: затемнение поверх фото и видео обязано остаться тёмным, иначе светлый текст на них пропадёт. */ } /* ---------- островки поверх медиа ---------- Внутри этих блоков фон — фотография или видео, поэтому текст там светлый в любой теме. Вместо десятка правил переопределяем сами токены на контейнере: всё содержимое подхватывает их автоматически. */ :root[data-theme="light"] .music, :root[data-theme="light"] .hallslide, :root[data-theme="light"] .facts__strip figcaption{ --ink:#F7F3EC; --ink-dim:#CFC6BA; --ink-rgb:247,243,236; --line:rgba(247,243,236,.18); /* Без этой строки островок не работает: переопределение переменной не перекрашивает детей, они наследуют уже вычисленный цвет от body. Объявляем color здесь — и он пересчитывается по токену островка. */ color:var(--ink); } /* ---------- логотип ---------- */ :root[data-theme="light"] .logo--dark{display:none} :root[data-theme="light"] .logo--light{display:block} /* ---------- фактура и виньетка ---------- На тёмном зерно и затемнение по краям держат картинку, на светлом от них грязь: оставляем едва заметными. */ :root[data-theme="light"] .grain{opacity:.028;mix-blend-mode:multiply} :root[data-theme="light"] .vignette{ background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(var(--shadow-rgb),.10) 100%); } /* ---------- объём вместо свечения ---------- В тёмной теме карточки отделяет свет, в светлой — мягкая тёплая тень. */ :root[data-theme="light"] .dishcard, :root[data-theme="light"] .mc, :root[data-theme="light"] .book__form, :root[data-theme="light"] .tourcard{ box-shadow:0 18px 44px -26px rgba(var(--shadow-rgb),.34); } :root[data-theme="light"] .nav.is-solid, :root[data-theme="light"] .page-menu .nav, :root[data-theme="light"] .mbar{ box-shadow:0 12px 30px -24px rgba(var(--shadow-rgb),.5); } /* Фотографии на светлом фоне не нуждаются в осветлении — убираем приглушение, которое на тёмном помогало им не спорить с текстом. */ :root[data-theme="light"] .facts__strip figure img{filter:grayscale(.12)} /* Красное свечение над баром на бумаге выглядит грязным пятном. */ :root[data-theme="light"] .bar__glow{opacity:.5} /* Огромное слово в подвале: на светлом обводка должна быть заметнее. */ :root[data-theme="light"] .foot__word{-webkit-text-stroke-color:rgba(var(--ink-rgb),.34)} :root[data-theme="light"] .foot__word.on{ color:rgba(var(--ink-rgb),.05);-webkit-text-stroke-color:rgba(var(--red-rgb),.6); } /* ---------- первый экран и шапка над ним ---------- Замер кадра под заголовком (ffmpeg, ячейки 16×4, 4 к/с): медиана 78, p90 175, p99 213, максимум 232 из 255. То есть в одном и том же месте бывает и почти чёрное, и почти белое. Отсюда главный вывод: ОСВЕТЛЯТЬ такой кадр нельзя. Чтобы вытянуть тёмные области под тёмный текст, белой вуали нужно около 0.47 — и она же забивает светлые области в белое, кадр перестаёт читаться. Затемнение той же силы (0.42–0.50 для белого текста) ведёт себя иначе: тени углубляются, света остаются, картинка сохраняет форму. Поэтому первый экран в светлой теме — тёмный островок, как музыка и блок брони: ролик показывается нормально, текст поверх него светлый, а низ растворяется в бумаге страницы. */ :root[data-theme="light"] .hero{ --ink:#F7F3EC; --ink-dim:#CFC6BA; --ink-rgb:247,243,236; --line:rgba(247,243,236,.22); --hero-sub:#EFE8DE; /* Без color переопределение токена не перекрасит детей. */ color:var(--ink); } /* Ролик не трогаем ничем: ни яркостью, ни контрастом. */ :root[data-theme="light"] .hero__video, :root[data-theme="light"] .hero__slide{filter:none} :root[data-theme="light"] .hero__scrim{ background: /* Низ уходит в бумагу ОТДЕЛЬНЫМ слоем: если смешивать переход в одном градиенте с затемнением, середина получается грязной. */ linear-gradient(180deg, transparent 68%, rgba(247,243,236,.58) 88%, #F7F3EC 100%), /* подпор ровно под заголовком и подзаголовком */ radial-gradient(78% 50% at 50% 51%, rgba(var(--scrim-rgb),.34) 0%, rgba(var(--scrim-rgb),.17) 62%, transparent 86%), /* узкая полоса ровно под подзаголовком: он мелкий (16px) и требует 4.5:1, на самых светлых кадрах без неё проваливался до 3.4 */ linear-gradient(180deg, transparent 53%, rgba(var(--scrim-rgb),.19) 61%, rgba(var(--scrim-rgb),.19) 71%, transparent 79%), /* поля слева и справа — под вертикальными подписями */ linear-gradient(90deg, rgba(var(--scrim-rgb),.40) 0%, transparent 13%, transparent 87%, rgba(var(--scrim-rgb),.40) 100%), /* общий тон: плотно под шапкой, легко в самом кадре */ linear-gradient(180deg, rgba(var(--scrim-rgb),.84) 0%, rgba(var(--scrim-rgb),.36) 16%, rgba(var(--scrim-rgb),.24) 48%, rgba(var(--scrim-rgb),.26) 72%, rgba(var(--scrim-rgb),.30) 100%); } /* Красная строка заголовка на светлом кадре почти сливается с фоном — её спасает не затемнение всего ролика, а плотный ореол у самих букв: узкая тень даёт кромку, широкая приподнимает пятно под строкой. */ :root[data-theme="light"] .hero__title{ text-shadow:0 1px 2px rgba(var(--scrim-rgb),.55),0 2px 30px rgba(var(--scrim-rgb),.55); } :root[data-theme="light"] .hero__sub{ text-shadow:0 1px 2px rgba(var(--scrim-rgb),.7),0 2px 18px rgba(var(--scrim-rgb),.55); } :root[data-theme="light"] .hero__side{ color:rgba(247,243,236,.88); text-shadow:0 0 14px rgba(var(--scrim-rgb),.75); } /* Низ первого экрана уже перешёл в бумагу — там элементы обязаны потемнеть. */ :root[data-theme="light"] .hero__scroll{color:#6F6459} :root[data-theme="light"] .hero__scroll i::after{background:#1D1D1B} :root[data-theme="light"] .hero__dots b{background:rgba(29,29,27,.22)} :root[data-theme="light"] .hero__dots b.on{background:var(--red)} /* ---------- шапка над роликом ---------- Пока шапка прозрачна, она лежит на тёмном верху кадра — буквы и логотип там светлые, как в ночной теме. Прокрутили, шапка стала сплошной бумагой — возвращаются тёмные буквы и тёмный логотип. ⚠️ Ссылки берут ПОЛНЫЙ светлый, а не приглушённый: при p99 = 237 под шапкой приглушённому серому не хватало даже 0.80 затемнения. */ :root[data-theme="light"] body:not(.page-menu) .nav:not(.is-solid){ --ink:#F7F3EC; --ink-dim:#F7F3EC; --ink-rgb:247,243,236; --line:rgba(247,243,236,.26); color:var(--ink); } :root[data-theme="light"] body:not(.page-menu) .nav:not(.is-solid) .logo--light{display:none} :root[data-theme="light"] body:not(.page-menu) .nav:not(.is-solid) .logo--dark{display:block} /* ---------- курсор ---------- Кружок нарисован режимом difference — он всегда противоположен фону. На бумаге тёмный кружок дал бы светлый след, то есть пропал бы: в светлой теме берём для него цвет бумаги, и разница снова видна. */ :root[data-theme="light"] .cursor{--ink:#F7F3EC;--ink-rgb:247,243,236} /* ---------- шапка страницы меню в светлой теме ---------- Здесь, в отличие от первого экрана, фон — неподвижное фото, а текста много. Поэтому снимок уводим в бледную подложку, а буквы делаем тёмными: так заголовок и описание читаются при любом кадре. */ :root[data-theme="light"] .mhero__bg{filter:grayscale(.3)} /* Плотное бумажное поле привязано к НИЗУ в пикселях — там лежит текст, и его высота не зависит от высоты экрана (проценты уезжали бы: на телефоне блок 371 px, на мониторе 560). Сверху — лёгкая общая вуаль, чтобы снимок оставался снимком, а не белым туманом: contrast(.92) и 70% бумаги, как было раньше, стирали его в ровное поле. */ :root[data-theme="light"] .mhero__scrim{ background: linear-gradient(to top, var(--ink-bg) 0, rgba(var(--bg-rgb),.95) 44px, rgba(var(--bg-rgb),.90) 300px, rgba(var(--bg-rgb),0) 384px), linear-gradient(180deg, rgba(var(--bg-rgb),.30) 0%, rgba(var(--bg-rgb),.34) 100%); }