/* ========================================================================== СВЕТЛАЯ ТЕМА — слой перекраски поверх styles-puff.css Подключается ВТОРЫМ, на . Используется на странице подоконников (светлое фото на первом экране). Блок квиза не трогаем — он и в тёмной версии светлый. ========================================================================== */ .theme-light { /* Золото #a5986d на светлом даёт контраст ~2.5:1 и не читается. Для светлой темы берём бронзу — тот же характер, но контрастнее. */ --pf-bronze: #806c3c; --pf-paper: #faf9f6; /* тёплый белый */ --pf-hair: #e5e0d7; /* тонкие разделители */ } /* ---------- Первый экран: светлая вуаль вместо тёмной ---------- */ /* Фото широкое (16:9), экран выше — кадр смещаем вправо, чтобы в него попали и мастер, и сам подоконник */ .theme-light .pf-hero__bg img { object-position: 65% center; } /* Вуаль резкая: плотная под текстом, быстро сходит на нет к правой части, чтобы графитовый подоконник и мастер оставались контрастными */ .theme-light .pf-hero__bg::after { background: linear-gradient(90deg, rgba(250,249,246,0.97) 0%, rgba(250,249,246,0.95) 44%, rgba(250,249,246,0.72) 56%, rgba(250,249,246,0.18) 68%, rgba(250,249,246,0.03) 100%), linear-gradient(180deg, rgba(250,249,246,0.35) 0%, rgba(250,249,246,0.05) 40%, rgba(250,249,246,0.22) 100%); } .theme-light .pf-overline { color: var(--pf-ink); } .theme-light .pf-hero__title { color: var(--pf-ink); } .theme-light .pf-hero__sub { color: var(--pf-muted); } .theme-light .pf-hero__sub .pf-dots i { border-color: var(--pf-bronze); } .theme-light .pf-hero__undernote { color: var(--pf-ink); background: rgba(128,108,60,0.10); border-left-color: var(--pf-bronze); } .theme-light .pf-hero__undernote-ic { color: var(--pf-bronze); } /* Бейджи слева */ .theme-light .pf-adv__text { color: var(--pf-ink); } .theme-light .pf-adv__text b { color: var(--pf-ink); } .theme-light .pf-adv__icon { color: var(--pf-bronze); } /* ---------- Шапка ---------- */ .theme-light .pf-logo__mark { color: var(--pf-ink); } .theme-light .pf-logo__sub { color: var(--pf-muted); } .theme-light .pf-header__city { color: var(--pf-ink); } .theme-light .pf-header__city .dot { color: var(--pf-bronze); } .theme-light .pf-header__phone { color: var(--pf-ink); } .theme-light .pf-hicon { color: var(--pf-ink); border-color: rgba(49,49,49,0.28); } .theme-light .pf-hicon:hover { color: var(--pf-bronze); border-color: var(--pf-bronze); background: rgba(128,108,60,0.08); } /* Логотип Max — белая картинка, на светлом фоне не видна */ .theme-light .pf-max-img { filter: invert(1); } .theme-light .pf-header__btn { color: var(--pf-ink); border-color: rgba(49,49,49,0.30); } .theme-light .pf-header__btn:hover { background: var(--pf-bronze); border-color: var(--pf-bronze); color: #fff; } /* ---------- Тонкий подвал ---------- */ .theme-light .pf-footer { background: #efece5; color: var(--pf-muted); border-top: 1px solid var(--pf-hair); } .theme-light .pf-footer__legal { color: var(--pf-muted); } .theme-light .pf-footer a { color: var(--pf-ink); } .theme-light .pf-footer a:hover { color: var(--pf-bronze); } /* ---------- Мобильные: фото отдельным блоком сверху ---------- Поверх фото текст на телефоне читается плохо (вуаль съедает картинку), поэтому раскладываем иначе: сверху сама фотография, под ней — текст на чистом светлом фоне. Десктоп остаётся как был. */ @media (max-width: 820px) { .theme-light .pf-hero { background: var(--pf-paper); } /* Фото — верхняя часть экрана, книзу растворяется в фоне. Шапка полупрозрачная и лежит поверх фото. */ .theme-light .pf-hero__bg { position: absolute; inset: 42px 0 auto 0; /* шапка (54px) слегка накрывает фото сверху */ height: 320px; } .theme-light .pf-hero__bg picture { display: block; width: 100%; height: 100%; } .theme-light .pf-hero__bg img { object-position: center top; } /* Сверху чуть светлее под шапку, книзу — плавный уход в фон страницы */ .theme-light .pf-hero__bg::after { background: linear-gradient(180deg, rgba(250,249,246,0.40) 0%, rgba(250,249,246,0.05) 15%, rgba(250,249,246,0.07) 36%, rgba(250,249,246,0.30) 54%, rgba(250,249,246,0.60) 72%, rgba(250,249,246,0.92) 90%, rgba(250,249,246,1) 100%); } .theme-light .pf-header { background: rgba(250, 249, 246, 0.55); border-bottom: none; } /* Надзаголовок — строго в одну строку (самый длинный из наших — «Столешницы в санузел из искусственного камня» — умещается при 14px) */ .theme-light .pf-overline { font-size: 14px; margin-bottom: 8px; } /* Санузел: кадр сдвинут ниже, иначе столешницу с раковиной не видно */ .theme-light.page-vanna .pf-hero__bg img { object-position: center 46%; } /* Заголовок чуть компактнее — укладывается в 4 строки, освободившееся место отдаём золотой плашке */ .theme-light .pf-hero__title { font-size: 25px; line-height: 1.14; } /* Плашка крупнее, но строго в две строки: длинная строка «НАЗОВЁМ ФИНАЛЬНУЮ ЦЕНУ ОНЛАЙН,» должна помещаться по ширине, поэтому боковые внутренние отступы уменьшены */ .theme-light .pf-hero__title .gold { font-size: 14px; padding: 10px 11px; margin-top: 14px; line-height: 1.28; } /* Текст начинается на нижней, засветлённой части фото. Боковые поля возвращаем: в общей вёрстке они обнулены (текст лежал на фото), а здесь он на светлом фоне и упирался бы в край экрана. */ /* Текст поднят на фото — иначе зелёная кнопка уходит за пределы первого экрана (на телефоне часть высоты съедают панели браузера). Шрифт плотный, поверх фотографии читается. */ .theme-light .pf-hero__body { padding: 150px 16px 32px; } .theme-light .pf-hero__sub { margin: 12px 0 18px; } .theme-light .pf-hero__undernote { margin-top: 14px; } } /* На узких экранах шапка «прилипает» и в тёмной теме залита тёмным — в светлой делаем её светлой, иначе тёмный текст на тёмном не читается */ @media (max-width: 640px) { .theme-light .pf-header { background: rgba(250, 249, 246, 0.95); border-bottom: 1px solid var(--pf-hair); } } /* ========================================================================== БЛОК ПРЕИМУЩЕСТВ в светлой теме Используется только на podokonniki-b.html (вариант Б для А/Б-теста). Базовая вёрстка блока уже светлая (styles-puff.css), правим только акцент: золото #a5986d на светлом даёт ~2.5:1 и не читается — берём бронзу. ========================================================================== */ .theme-light .pf-benefits { background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(128,108,60,0.07) 0%, transparent 100%), radial-gradient(ellipse 40% 40% at 90% 80%, rgba(128,108,60,0.05) 0%, transparent 100%), #f4f2ee; border-top: 1px solid var(--pf-hair); } .theme-light .pf-benefits__head .pf-dots i { border-color: var(--pf-bronze); } .theme-light .pf-bcard { border-color: var(--pf-hair); } .theme-light .pf-bcard__icon { background: rgba(128,108,60,0.10); color: var(--pf-bronze); }