/* ============================================================ THEME-LIGHT.CSS — светлая тема (накладка поверх styles.css) Как ОТКАТИТЬ: удалить (или закомментировать) строку в каждой страницы. Файл ничего не меняет в styles.css, он только перекрывает тёмные разделы светлыми тонами. Затрагивает: шапку, hero, «О компании», «Услуги», «Команда», «Блог», «Шумоизоляция» и hero внутренних страниц. ============================================================ */ /* ---- тональная палитра светлой темы ---- */ :root { --lt-surface-1: #eef0f2; /* базовый светлый тон разделов */ --lt-surface-2: #e8eaed; /* чуть глубже — для градиентных переходов */ --lt-surface-3: #f2f3f5; /* самый светлый — кромки градиентов */ --lt-line: rgba(26, 42, 58, 0.12); --lt-line-soft: rgba(26, 42, 58, 0.08); --lt-ink-mute: rgba(26, 42, 58, 0.55); } /* ============================================================ ШАПКА — матовое светлое стекло вместо тёмного ============================================================ */ .header::before { background: linear-gradient(to bottom, rgba(244, 245, 246, 0.86) 0%, rgba(240, 241, 243, 0.72) 50%, rgba(236, 238, 241, 0.55) 100%); border-bottom: 1px solid var(--lt-line); } .header.scrolled::before { background: linear-gradient(to bottom, rgba(244, 245, 246, 0.94) 0%, rgba(240, 241, 243, 0.86) 50%, rgba(236, 238, 241, 0.74) 100%); border-bottom-color: var(--lt-line); } @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) { .header::before { background: linear-gradient(to bottom, rgba(244,245,246,0.98) 0%, rgba(236,238,241,0.96) 100%); } } .header__logo { color: var(--clr-text); } .header__logo span { -webkit-text-fill-color: var(--clr-purple-600); color: var(--clr-purple-600); } .header__logo-mark { filter: drop-shadow(0 1px 4px rgba(26, 42, 58, 0.20)); } .header__nav-list { background: rgba(47, 93, 147, 0.05); border-color: var(--lt-line); } .header__nav-list > li + li::before { background: var(--lt-line); } /* на мобильном меню — полноэкранный оверлей, «пилюля» не нужна */ @media (max-width: 768px) { .header__nav-list { background: none; border: none; align-items: center; } .header__nav-list > li { width: 100%; justify-content: center; } .header__nav-link { text-align: center; width: 100%; } } .header__nav-link { color: var(--clr-text-muted); } .header__nav-link:hover { color: var(--clr-purple-600); background: rgba(47, 93, 147, 0.09); } .header__nav-link--active { color: #ffffff; background: var(--gradient-purple); } .header__phone { color: var(--clr-text); } .header__phone:hover { color: var(--clr-purple-600); } .burger span { background: var(--clr-text); } .header__nav-dropdown { background: var(--clr-card); border-color: var(--lt-line); box-shadow: 0 20px 44px -20px rgba(16, 34, 58, 0.28); } .header__nav-dropdown li a { color: var(--clr-text-muted); } .header__nav-dropdown li a:hover { background: rgba(47, 93, 147, 0.08); color: var(--clr-purple-600); } /* полноэкранное мобильное меню */ .header__nav { background: rgba(244, 245, 246, 0.98) !important; } .header__nav.open .header__nav-link, .header__nav.open .header__nav-link:hover { color: var(--clr-text) !important; } /* ============================================================ HERO — кинематографичный тёмный первый экран. Видео затемнено РАВНОМЕРНО (без светлой подложки слева), поэтому текст здесь остаётся светлым — как в базовой теме. Регулировка «киношности»: brightness() у .hero__bg-video и плотность вуали в .hero__bg-overlay. ============================================================ */ .hero { background: #0b111b; } /* фото-фон (доли секунды до старта видео) — той же тональности, без вспышки */ .hero__bg-photo { opacity: 0.6; filter: brightness(0.6) saturate(0.72) contrast(1.1); } /* само видео: чуть светлее прежнего, с холодным сине-голубым уклоном — в цвет акцентов сайта */ .hero__bg-video { filter: brightness(0.62) saturate(0.72) contrast(1.08); } .hero__bg-overlay { background: /* светло-голубой фильтр — оттенок акцентного синего сайта */ linear-gradient(180deg, rgba(120, 162, 224, 0.16) 0%, rgba(120, 162, 224, 0.13) 100%), /* сине-тонированная тёмная вуаль: даёт глубину и «холод» кадра */ linear-gradient(180deg, rgba(18, 34, 58, 0.44) 0%, rgba(18, 34, 58, 0.36) 45%, rgba(15, 27, 46, 0.56) 100%), /* мягкая виньетка от краёв — классический киношный приём */ radial-gradient(120% 100% at 50% 45%, rgba(12, 22, 40, 0) 55%, rgba(12, 22, 40, 0.30) 100%); } /* стык hero → «О компании»: из тёмного кадра уходим в светлый раздел */ .hero::after { background: linear-gradient(to bottom, rgba(238, 240, 242, 0) 0%, rgba(238, 240, 242, 0.18) 46%, rgba(238, 240, 242, 0.72) 74%, var(--lt-surface-1) 92%, var(--lt-surface-1) 100%); } /* Текст первого экрана НЕ перекрашиваем — светлые цвета берутся из styles.css и правильно читаются на затемнённом видео. */ /* бланк замера — прозрачное стекло: сквозь него видно движущееся видео. Тёмный полупрозрачный тон и светлый текст берём из styles.css, здесь только ослабляем размытие, чтобы кадр не превращался в серую заливку. */ .hero__sheet { background: linear-gradient(168deg, rgba(10, 17, 28, 0.30) 0%, rgba(6, 12, 22, 0.44) 100%); border: 1px solid rgba(255, 255, 255, 0.20); backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 34px 70px -26px rgba(4, 9, 16, 0.60); } /* без backdrop-filter прозрачного стекла не выйдет — делаем подложку плотной */ @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) { .hero__sheet { background: linear-gradient(168deg, rgba(10, 17, 28, 0.82) 0%, rgba(6, 12, 22, 0.90) 100%); } } .hero__sheet .hero__sheet-head span:first-child { color: #7fe0a6; } /* Полоса цифр под hero — светлая плашка, цифры и подписи чёрные. На тёмном видео (десктоп) читается за счёт своей подложки. */ .hero__stats { background: rgba(255, 255, 255, 0.93); border: 1px solid var(--lt-line); border-radius: 6px; padding: clamp(15px, 2vh, 22px) clamp(16px, 2.2vw, 30px); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 26px 60px -30px rgba(4, 9, 16, 0.55); } .hero__stat + .hero__stat::before { background: var(--lt-line); } .hero__stat-num, .hero__stat-plus { color: #111; -webkit-text-fill-color: #111; } .hero__stat-label { color: rgba(17, 17, 17, 0.6); } /* ============================================================ О КОМПАНИИ — светлый фон, WebGL-подложка скрыта ============================================================ */ .about--feature { background: linear-gradient(180deg, var(--lt-surface-1) 0%, var(--lt-surface-2) 55%, var(--lt-surface-1) 100%); color: var(--clr-text); } .about__fx { display: none !important; } .about--feature::after { display: none; } .about__content .section-tag { color: var(--lt-ink-mute); } .about__content .section-tag::after { background: var(--lt-line); } .about__content .section-title { color: var(--clr-text); } .about__content .section-title .accent { -webkit-text-fill-color: var(--clr-purple-600); color: var(--clr-purple-600); } .about__lead { color: var(--clr-text); } .about__lead strong { color: var(--clr-text); } .about__text { color: var(--clr-text-muted); } .about__brands { border-top-color: var(--lt-line); } .about__brands span { color: var(--clr-text-muted); } .about__brands span + span::before { background: var(--lt-line); } .about__features { border-top-color: var(--lt-line); } .about__feature { color: var(--clr-text); border-bottom-color: var(--lt-line-soft); } .about__feature:hover { color: var(--clr-purple-600); } .about__feature-icon { color: var(--clr-purple-600); } .about__stats { border-top-color: var(--lt-line); } .about__stat + .about__stat::before { background: var(--lt-line); } .about__stat-num { color: var(--clr-text); } .about__stat-label { color: var(--lt-ink-mute); } /* ============================================================ УСЛУГИ — светлый фон; карточки-панели остаются фотографическими ============================================================ */ .services { background: radial-gradient(900px 440px at 82% 22%, rgba(59, 110, 165, 0.08), transparent 60%), linear-gradient(180deg, var(--lt-surface-1) 0%, var(--lt-surface-2) 100%); } .services .section-title { color: var(--clr-text); } .services .section-title .accent { -webkit-text-fill-color: var(--clr-purple-600); color: var(--clr-purple-600); } .services .section-subtitle { color: var(--clr-text-muted); } .services .section-tag { color: var(--lt-ink-mute); } .services .section-tag::after { background: var(--lt-line); } .services .section-header { border-bottom-color: var(--lt-line); } .svc__nav { color: var(--clr-text); background: rgba(47, 93, 147, 0.06); border-color: var(--lt-line); box-shadow: none; } .svc__nav:hover { background: var(--gradient-purple); border-color: transparent; color: #fff; } .svc__dot { background: rgba(26, 42, 58, 0.2); } .svc__dot.is-active { background: var(--clr-purple-500); } /* ============================================================ ЦЕНЫ — светлый раздел, таблица на белом ============================================================ */ .prices { background: linear-gradient(180deg, var(--lt-surface-2) 0%, var(--lt-surface-1) 100%); } .prices .section-title { color: var(--clr-text); } .prices .section-title .accent { -webkit-text-fill-color: var(--clr-purple-600); color: var(--clr-purple-600); } .prices .section-subtitle { color: var(--clr-text-muted); } .prices .section-tag { color: var(--lt-ink-mute); } .prices .section-tag::after { background: var(--lt-line); } .prices .section-header { border-bottom-color: var(--lt-line); } .prices__tab { border-color: var(--lt-line); color: var(--clr-text-muted); background: #fff; } .prices__tab:hover { border-color: var(--clr-purple-500); color: var(--clr-purple-600); } .prices__tab.active { background: var(--clr-purple-600); border-color: var(--clr-purple-600); color: #fff; } .prices__table-wrap { background: #fff; border-color: var(--lt-line); box-shadow: 0 18px 40px -28px rgba(15, 27, 46, 0.35); } .prices__table tbody td { color: var(--clr-text); } .prices__table tbody tr { border-bottom-color: var(--lt-line-soft); } .prices__table tbody tr:hover { background: rgba(47, 93, 147, 0.05); } .prices__table thead th { background: var(--clr-purple-600); color: #fff; } .prices__table .price-val { color: var(--clr-purple-600); } .prices__table .price-btn { border-color: var(--clr-purple-500); color: var(--clr-purple-600); } .prices__table .price-btn:hover { background: var(--clr-purple-600); color: #fff; border-color: var(--clr-purple-600); } .prices__footer-note { color: var(--clr-text-muted); } .prices__footer-note svg { color: var(--clr-purple-600); } /* ============================================================ ВИДЕО-РАЗДЕЛЫ «Команда» и «Блог» — тот же киношный тёмный кадр, что и в hero. Текст в них светлый (берётся из styles.css). ============================================================ */ .section--video { background-color: #0b111b; } /* видео: та же тональность, что у hero — светлее прежнего + голубой фильтр */ .video-band__media { filter: brightness(0.62) saturate(0.72) contrast(1.08); } .video-band__overlay { background: linear-gradient(180deg, rgba(120, 162, 224, 0.16) 0%, rgba(120, 162, 224, 0.13) 100%), linear-gradient(180deg, rgba(18, 34, 58, 0.56) 0%, rgba(18, 34, 58, 0.44) 45%, rgba(15, 27, 46, 0.60) 100%), radial-gradient(120% 100% at 50% 45%, rgba(12, 22, 40, 0) 55%, rgba(12, 22, 40, 0.28) 100%); } /* видео в карточках портфолио — контентное, лишь слегка приглушаем */ .works-slide__video, .pf-card__video { filter: brightness(0.9) saturate(1); } /* Текст этих разделов НЕ перекрашиваем — светлые цвета приходят из styles.css. */ /* ============================================================ ШУМОИЗОЛЯЦИЯ — светлый фон; карточки систем остаются фотографическими ============================================================ */ .soundproof-hub { background: var(--lt-surface-1); } .soundproof-hub .section-tag { color: var(--lt-ink-mute); } .soundproof-hub .section-tag::after { background: var(--lt-line); } .soundproof-hub .section-title { color: var(--clr-text); } .soundproof-hub__lead { color: var(--clr-text-muted); } .soundproof-hub .section-header { border-bottom-color: var(--lt-line); } /* ============================================================ HERO ВНУТРЕННИХ СТРАНИЦ (shum-steny.css) ============================================================ */ .page-hero { background: linear-gradient(135deg, var(--lt-surface-3) 0%, var(--lt-surface-1) 55%, var(--lt-surface-2) 100%); color: var(--clr-text); } .page-hero::before { background: radial-gradient(ellipse at 70% 50%, rgba(59, 110, 165, 0.10) 0%, transparent 70%); } .page-hero__breadcrumb { color: var(--clr-text-dim); } .page-hero__breadcrumb a { color: var(--clr-text-dim); } .page-hero__breadcrumb a:hover { color: var(--clr-purple-600); } .page-hero__title { color: var(--clr-text); } .page-hero__title-accent { color: var(--clr-purple-600); } .page-hero__subtitle { color: var(--clr-text-muted); } .page-hero__subtitle strong { color: var(--clr-text); } .page-hero__chip { background: rgba(47, 93, 147, 0.06); border: 1px solid var(--lt-line); color: var(--clr-text-muted); backdrop-filter: none; } /* ============================================================ ПОРТФОЛИО — hero страницы (portfolio.css) ============================================================ */ .pf-hero { color: var(--clr-text); } .pf-hero__bg-img { opacity: 0.5; } .pf-hero__bg-overlay { background: linear-gradient(180deg, rgba(240, 242, 244, 0.86) 0%, rgba(240, 242, 244, 0.72) 45%, rgba(240, 242, 244, 0.9) 100%); } .pf-hero__back { color: var(--clr-text-dim); } .pf-hero__back:hover { color: var(--clr-purple-600); } .pf-hero__tag { color: var(--lt-ink-mute); background: rgba(47, 93, 147, 0.06); border: 1px solid var(--lt-line); backdrop-filter: none; } .pf-hero__title span { color: var(--clr-purple-600); } .pf-hero__subtitle { color: var(--clr-text-muted); } .pf-hero__stat strong { color: var(--clr-text); } .pf-hero__stat strong::after { color: var(--clr-purple-500); } .pf-hero__stat span { color: var(--lt-ink-mute); } /* синий акцент в H1 — крепкий контраст на светлом */ /* «гипсокартона» — светлый синий, читается на тёмном кадре */ .hero__title-hl { color: var(--clr-purple-300, #93b8ee); } /* ============================================================ МОБИЛЬНЫЙ ХИРО: видео сверху вниз до конца подзаголовка («…Цена фиксируется в договоре без доплат»). Текст над видео — светлый; форма и ниже — светлый фон, тёмный текст. Видео 960px в такой полосе идёт С УМЕНЬШЕНИЕМ = резко. ============================================================ */ @media (max-width: 768px) { .hero { background: var(--lt-surface-1); } .hero__inner { padding-top: var(--header-h, 76px); } /* темнее + холодный цветокор в синих тонах сайта: кадр почти обесцвечиваем (убирает случайные цветные пятна), затемняем, а синий оттенок задаёт плотная сине-стальная вуаль сверху. */ .hero__bg-video { filter: brightness(0.5) contrast(1.12) saturate(0.28); } .hero__bg-overlay { inset: 0 0 auto 0; height: max(620px, 80vh); background: linear-gradient(180deg, rgba(37, 71, 116, 0.55) 0%, rgba(20, 40, 68, 0.6) 55%, rgba(20, 40, 68, 0.55) 80%, rgba(20, 40, 68, 0) 100%), radial-gradient(130% 90% at 50% 30%, rgba(93, 148, 214, 0.18) 0%, rgba(93, 148, 214, 0) 60%); } .hero::after { display: none; } /* текст НАД видео (шапка-строка, заголовок, лазер-строка, подзаголовок) — остаётся светлым, как в базовой теме; здесь не трогаем */ /* «Позвонить» — единственная кнопка в моб. хиро: во всю ширину, синяя */ .hero__phone { width: 100%; align-self: stretch; align-items: center; text-align: center; padding: 15px 20px; border-color: transparent; background: var(--gradient-purple); box-shadow: 0 16px 34px -14px rgba(47, 93, 147, 0.6); } .hero__phone-key { color: rgba(255, 255, 255, 0.82); } .hero__phone-num { color: #fff; } /* цифры и подписи под формой — чёрные (по запросу) */ .hero__stat-num, .hero__stat-plus, .hero__stat-label { -webkit-text-fill-color: #111; color: #111; } .hero__stat + .hero__stat::before { background: var(--lt-line); } /* бланк замера — светлая карточка с тёмным текстом (не прозрачная) */ .hero__sheet { background: #fff; border: 1px solid var(--lt-line); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 24px 60px -30px rgba(15, 27, 46, 0.4); } .hero__sheet .hero__sheet-title, .hero__sheet .hero__sheet-done strong { color: var(--clr-text); } .hero__sheet .hero__sheet-text, .hero__sheet .hero__sheet-done-text { color: var(--clr-text-muted); } .hero__sheet .hero__sheet-head, .hero__sheet .hero__field-key, .hero__sheet .hero__terms { color: var(--lt-ink-mute); } .hero__sheet .hero__sheet-head span:first-child { color: #1f7a48; } .hero__sheet .hero__field input { color: var(--clr-text); border-bottom-color: rgba(26, 42, 58, 0.22); } .hero__sheet .hero__field input::placeholder { color: var(--clr-text-dim); } .hero__sheet .hero__consent { color: var(--clr-text-dim); } .hero__sheet .hero__consent a { color: var(--clr-purple-600); } .hero__sheet .hero__sheet-mark { border-color: rgba(26, 42, 58, 0.28); } .hero__sheet .hero__sheet-title, .hero__sheet .hero__sheet-text, .hero__sheet .hero__field-key, .hero__sheet .hero__sheet-head, .hero__sheet .hero__terms, .hero__sheet .hero__consent { text-shadow: none; } }