/* ============================================================ СВЕТЛАЯ ТЕМА — «GIORNO» Тёплая бумага, фирменный чёрный и тот же красный. Работает переопределением токенов из site.css: почти все цвета на сайте заданы через переменные, поэтому смена палитры перекрашивает сайт целиком. Файл подключается только на прототипах — основной тёмный сайт его не грузит. ============================================================ */ :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); --hero-sub:#FFFFFF; /* подзаголовок лежит на видео — остаётся светлым */ /* --scrim-rgb НЕ переопределяем: затемнение поверх фото и видео обязано остаться тёмным, иначе светлый текст на них пропадёт. */ } /* ---------- островки поверх медиа ---------- Внутри этих блоков фон — фотография или видео, поэтому текст там светлый в любой теме. Вместо десятка правил переопределяем сами токены на контейнере: всё содержимое подхватывает их автоматически. */ :root[data-theme="light"] .hero, :root[data-theme="light"] .music, :root[data-theme="light"] .hallslide, :root[data-theme="light"] .facts__strip figcaption, :root[data-theme="light"] .bar__row figcaption, :root[data-theme="light"] .gallery 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); } /* ---------- шапка поверх hero ---------- До прокрутки шапка прозрачна и лежит на тёмном видео: там текст и логотип обязаны остаться светлыми. Как только шапка становится непрозрачной (.is-solid) — возвращаем обычные тёмные буквы. На странице меню шапка непрозрачна всегда, поэтому её это не касается. */ :root[data-theme="light"] body:not(.page-menu) .nav:not(.is-solid){ --ink:#F7F3EC; --ink-dim:#CFC6BA; --ink-rgb:247,243,236; --line:rgba(247,243,236,.24); } :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} /* ---------- первый экран в светлой теме ---------- Видео остаётся тёмным, поэтому текст на нём светлый. Чтобы кадр не выглядел чужим куском на бумаге, снизу он растворяется в цвете страницы, а под самим текстом лежит мягкая вуаль — она держит читаемость на любом кадре ролика. */ :root[data-theme="light"] .hero__scrim{ background: radial-gradient(68% 54% at 50% 48%, rgba(var(--scrim-rgb),.66) 0%, rgba(var(--scrim-rgb),.30) 58%, transparent 80%), linear-gradient(180deg, rgba(var(--scrim-rgb),.46) 0%, rgba(var(--scrim-rgb),.14) 24%, rgba(var(--scrim-rgb),.12) 52%, rgba(247,243,236,.62) 88%, #F7F3EC 100%); } :root[data-theme="light"] .hero__title{text-shadow:0 2px 26px rgba(var(--scrim-rgb),.35)} /* Низ первого экрана уже перешёл в бумагу — там элементы обязаны потемнеть. */ :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)} /* Вертикальные подписи по краям лежат на светлой части кадра: тёмные буквы со светлым ореолом читаются и на стене, и на зелени. */ :root[data-theme="light"] .hero__side{ color:rgba(29,29,27,.78); text-shadow:0 0 12px rgba(247,243,236,.85),0 0 4px rgba(247,243,236,.9); } /* ---------- шапка страницы меню в светлой теме ---------- Здесь, в отличие от первого экрана, фон — неподвижное фото, а текста много. Поэтому снимок уводим в бледную подложку, а буквы делаем тёмными: так заголовок и описание читаются при любом кадре. */ :root[data-theme="light"] .mhero__bg{filter:grayscale(.5) contrast(.92)} :root[data-theme="light"] .mhero__scrim{ background:linear-gradient(180deg, rgba(var(--bg-rgb),.70) 0%, rgba(var(--bg-rgb),.82) 45%, rgba(var(--bg-rgb),.94) 82%, var(--ink-bg) 100%); }