/* ============================================================ SmokeDonalds HOME LIGHT MATCH DARK V38 Светлая тема: - фон сайта остаётся светлым - HERO остаётся тёмным - HEADER лежит поверх HERO - HEADER визуально как в dark theme - размеры HERO идентичны dark theme ============================================================ */ /* ============================================================ HEADER ============================================================ */ html[data-site-theme="light"] body.site-home-modern .topbar{ position:absolute!important; top:0!important; left:0!important; right:0!important; z-index:1000!important; background:transparent!important; background-image:none!important; border:0!important; border-bottom:0!important; box-shadow:none!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; color:#f5f5f5!important; } /* * Сам grid header остаётся ровно того же * размера и расположения, что в dark. */ html[data-site-theme="light"] body.site-home-modern .home-nav-v1{ background:transparent!important; color:#f5f5f5!important; } /* ============================================================ LOGO — как в DARK ============================================================ */ html[data-site-theme="light"] body.site-home-modern .home-logo-v1 img{ opacity:1!important; filter: drop-shadow(0 0 1px rgba(255,255,255,.95)) drop-shadow(0 0 3px rgba(255,255,255,.34)) drop-shadow(0 0 12px rgba(255,255,255,.08))!important; } html[data-site-theme="light"] body.site-home-modern .home-logo-v1:hover img{ filter: drop-shadow(0 0 1px rgba(255,255,255,1)) drop-shadow(0 0 5px rgba(255,255,255,.46)) drop-shadow(0 0 18px rgba(255,255,255,.14))!important; } /* ============================================================ NAV LINKS — WHITE LIKE DARK ============================================================ */ html[data-site-theme="light"] body.site-home-modern .home-links-v1 a, html[data-site-theme="light"] body.site-home-modern .home-links-v1 button{ color:#f5f5f5!important; text-shadow:none!important; } html[data-site-theme="light"] body.site-home-modern .home-links-v1 a:hover, html[data-site-theme="light"] body.site-home-modern .home-links-v1 button:hover{ color:#fff!important; text-shadow: 0 0 12px rgba(255,255,255,.32)!important; } html[data-site-theme="light"] body.site-home-modern .home-links-v1 a::after, html[data-site-theme="light"] body.site-home-modern .home-links-v1 button::after{ background: linear-gradient( 90deg, transparent, currentColor, transparent )!important; box-shadow: 0 0 8px rgba(255,255,255,.45)!important; } /* ============================================================ CATALOG / CITY / ACCOUNT ТОЧНО GLASS DARK STYLE ============================================================ */ html[data-site-theme="light"] body.site-home-modern .home-catalog-v1, html[data-site-theme="light"] body.site-home-modern .home-city-v1, html[data-site-theme="light"] body.site-home-modern .home-account-v1{ border-color: rgba(255,255,255,.16)!important; background: linear-gradient( 135deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.035) 25%, rgba(255,255,255,.015) 53%, rgba(255,255,255,.085) 76%, rgba(255,255,255,.025) 100% )!important; color:#f5f5f5!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(255,255,255,.035), inset 1px 0 0 rgba(255,255,255,.045), 0 7px 22px rgba(0,0,0,.22)!important; backdrop-filter: blur(18px) saturate(125%)!important; -webkit-backdrop-filter: blur(18px) saturate(125%)!important; } /* * CATALOG имеет чуть более выраженное стекло — * это его настоящий dark style из свежего архива. */ html[data-site-theme="light"] body.site-home-modern .home-catalog-v1{ border-color: rgba(255,255,255,.20)!important; background: linear-gradient( 135deg, rgba(255,255,255,.14), rgba(255,255,255,.025) 34%, rgba(255,255,255,.01) 60%, rgba(255,255,255,.10) )!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(255,255,255,.04), 0 9px 30px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.025)!important; } /* * Возвращаем дым около Каталога. */ html[data-site-theme="light"] body.site-home-modern .home-smoke-svg-v3{ mix-blend-mode:screen!important; opacity:.72!important; } html[data-site-theme="light"] body.site-home-modern .home-smoke-cloud-v3{ fill: rgba(225,225,225,.26)!important; } html[data-site-theme="light"] body.site-home-modern .home-catalog-v1::before{ opacity:.52!important; background: radial-gradient( ellipse at 18% 54%, rgba(255,255,255,.18) 0 8%, rgba(150,150,150,.10) 16%, transparent 38% ), radial-gradient( ellipse at 49% 23%, rgba(255,255,255,.13) 0 7%, rgba(130,130,130,.08) 18%, transparent 40% ), radial-gradient( ellipse at 78% 62%, rgba(255,255,255,.14) 0 7%, rgba(130,130,130,.07) 18%, transparent 39% )!important; } html[data-site-theme="light"] body.site-home-modern .home-catalog-v1::after, html[data-site-theme="light"] body.site-home-modern .home-city-v1::before, html[data-site-theme="light"] body.site-home-modern .home-account-v1::before{ opacity:1!important; } /* ============================================================ THEME BUTTON LIGHT THEME ПОКАЗЫВАЕТ MOON, НО САМА КНОПКА СТЕКЛЯННАЯ КАК В DARK ============================================================ */ html[data-site-theme="light"] body.site-home-modern .site-theme-toggle-v33{ border-color: rgba(255,255,255,.16)!important; background: linear-gradient( 145deg, rgba(255,255,255,.11), rgba(255,255,255,.025) )!important; color:#fff!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 8px 24px rgba(0,0,0,.22)!important; backdrop-filter: blur(18px) saturate(125%)!important; -webkit-backdrop-filter: blur(18px) saturate(125%)!important; } html[data-site-theme="light"] body.site-home-modern .site-theme-toggle-v33:hover{ border-color: rgba(255,255,255,.34)!important; background: linear-gradient( 145deg, rgba(255,255,255,.18), rgba(255,255,255,.05) )!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 12px 30px rgba(0,0,0,.28), 0 0 18px rgba(255,255,255,.07)!important; } /* ============================================================ HERO ============================================================ */ /* * В свежем архиве DARK HERO после всех override: * * desktop = 560 * <=1350 = 530 * <=980 = 510 * <=620 = 540 * * Применяем ТЕ ЖЕ значения light theme. */ html[data-site-theme="light"] body.site-home-modern .home-hero-v4{ height:560px!important; min-height:560px!important; max-height:560px!important; background:#000!important; } /* * Не осветляем фотографию. * Картинка должна выглядеть одинаково * в обеих темах. */ html[data-site-theme="light"] body.site-home-modern .home-hero-media-v4 img, html[data-site-theme="light"] body.site-home-modern .home-hero-slide-v4 img{ opacity:1!important; filter: saturate(.94) contrast(1.035) brightness(.88)!important; } /* * Dark overlay такой же, как основная версия HERO. */ html[data-site-theme="light"] body.site-home-modern .home-hero-shade-v4{ background: linear-gradient( 90deg, #000 0%, rgba(0,0,0,.98) 22%, rgba(0,0,0,.88) 36%, rgba(0,0,0,.46) 52%, rgba(0,0,0,.08) 72%, rgba(0,0,0,.08) 100% ), linear-gradient( 180deg, rgba(0,0,0,.12), transparent 55%, rgba(0,0,0,.28) )!important; } html[data-site-theme="light"] body.site-home-modern .home-hero-v4::after{ opacity:.75!important; mix-blend-mode:screen!important; } /* ============================================================ HERO TEXT ============================================================ */ html[data-site-theme="light"] body.site-home-modern .home-hero-copy-v4, html[data-site-theme="light"] body.site-home-modern .home-hero-copy-v4 h1{ color:#fff!important; } html[data-site-theme="light"] body.site-home-modern .home-hero-copy-v4 h1{ text-shadow: 0 3px 24px rgba(0,0,0,.48)!important; } html[data-site-theme="light"] body.site-home-modern .home-hero-copy-v4 p{ color: rgba(255,255,255,.78)!important; text-shadow: 0 2px 14px rgba(0,0,0,.5)!important; } /* ============================================================ SEARCH ============================================================ */ html[data-site-theme="light"] body.site-home-modern .home-hero-search-shell-v4{ border-color: rgba(255,255,255,.52)!important; background: rgba(7,7,7,.34)!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 36px rgba(0,0,0,.18)!important; backdrop-filter: blur(12px)!important; -webkit-backdrop-filter: blur(12px)!important; } html[data-site-theme="light"] body.site-home-modern .home-hero-search-shell-v4 input{ color:#fff!important; } html[data-site-theme="light"] body.site-home-modern .home-hero-search-shell-v4 input::placeholder{ color: rgba(255,255,255,.46)!important; } html[data-site-theme="light"] body.site-home-modern .home-hero-search-shell-v4 button{ color:#fff!important; } html[data-site-theme="light"] body.site-home-modern .home-hero-link-v4{ color: rgba(255,255,255,.80)!important; } /* ============================================================ RESPONSIVE — SAME AS DARK ============================================================ */ @media(max-width:1350px){ html[data-site-theme="light"] body.site-home-modern .home-hero-v4{ height:530px!important; min-height:530px!important; max-height:530px!important; } } @media(max-width:980px){ html[data-site-theme="light"] body.site-home-modern .home-hero-v4{ height:510px!important; min-height:510px!important; max-height:none!important; } } @media(max-width:620px){ html[data-site-theme="light"] body.site-home-modern .home-hero-v4{ height:540px!important; min-height:540px!important; max-height:none!important; } } /* * Mobile header тоже остаётся прозрачным. */ @media(max-width:760px){ html[data-site-theme="light"] body.site-home-modern .topbar{ background:transparent!important; border-bottom:0!important; box-shadow:none!important; } }