/* ============================================================= * header-transparent.css * * Skin for the transparent header variant (header-transparent.php). * Only loads / applies when has the `header-transparent` class. * * Goal: header sits OVER the page hero/background image, with all * text and icons rendered in white. * ============================================================= */ /* ------------------------------------------------------------- * 1. Position the header on top of the hero * If your page template already places a background image on * the wrap/section directly below, the header overlays it. * ------------------------------------------------------------- */ body.header-transparent #header { height: 0 !important; overflow: visible !important; /* ← вот это даёт детям вылезти наружу */ position: relative !important; z-index: 50 !important; background: transparent !important; } /* Make room at top of page so the absolute header doesn't cover content. Adjust if your hero has its own padding. */ body.header-transparent #wrap { padding-top: 0; } /* ------------------------------------------------------------- * 2. Logo * The logo is a dark PNG; the cleanest way to make it white * is the invert filter. (Swap to a real white PNG if you have one.) * ------------------------------------------------------------- */ body.header-transparent .header-column.logo .wiize img { filter: brightness(0) invert(1); } /* ------------------------------------------------------------- * 3. Left-column buttons: search + "FIND YOUR WIIZE" * Make them transparent with a white outline. * ------------------------------------------------------------- */ body.header-transparent .left-icons .social-btn, body.header-transparent .icon-row .social-btn { background-color: rgba(255, 255, 255, 0.3); border: none; color: #fff !important; } /* Search input field inside the search button */ body.header-transparent .social-btn .search-input { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.6) !important; background: transparent !important; } body.header-transparent .social-btn .search-input::placeholder { color: rgba(255, 255, 255, 0.7); } /* Search-button SVG glyph */ body.header-transparent .search-btn svg path { fill: #fff; } /* "Find your Wiize" label + its bottle SVG */ body.header-transparent .find-your-wiize-btn .btn-text { color: #fff; } body.header-transparent .find-your-wiize-btn > svg path { fill: #fff; } /* ------------------------------------------------------------- * 4. Right-column icons: open-a-shop, language, cart, account, burger * ------------------------------------------------------------- */ /* "OPEN A SHOP" pill button */ body.header-transparent .social-btn.openshop { background-color: rgba(255, 255, 255, 0.3); border: none; color: #fff !important; } body.header-transparent .social-btn.openshop:hover { background-color: rgba(255, 255, 255, 0.12); } /* Generic icon-only buttons (cart, account) — drop the grey background */ body.header-transparent .right-icons .social-btn.icon-only { background-color: rgba(255, 255, 255, 0.3); } body.header-transparent .right-icons .social-btn.icon-only:hover { background-color: rgba(255, 255, 255, 0.12); } /* All header SVG icons → white. Targets both fill on and . */ body.header-transparent #header .social-btn svg path, body.header-transparent #header .social-btn svg rect, body.header-transparent #header .account-btn-wrapper svg path, body.header-transparent #header .account-btn-wrapper svg rect { fill: #fff; } /* Burger menu (three bars) */ body.header-transparent .header-burger svg rect { fill: #fff; } /* ------------------------------------------------------------- * 5. Language switcher * Current language → white. Dropdown panel keeps a white bg * so the options stay legible. * ------------------------------------------------------------- */ body.header-transparent .lang-select { background-color: rgba(255, 255, 255, 0.3); border-color: transparent; } body.header-transparent .custom-lang-switcher .lang-current, body.header-transparent .lang-current { color: #fff !important; } /* Keep dropdown on white background — options stay readable. */ body.header-transparent .custom-lang-switcher .lang-options { background: #ffffff !important; } body.header-transparent .custom-lang-switcher .lang-options a { color: #211a15 !important; } /* ------------------------------------------------------------- * 6. Account dropdown panel (when logged in) * Keep the panel on white so the links stay readable. * ------------------------------------------------------------- */ body.header-transparent .account-dropdown { background: #fff !important; } body.header-transparent .account-dropdown a { color: #554F4F !important; } /* ------------------------------------------------------------- * 7. Tagline ("ONLY SWISS WINES DIRECTLY FROM THE DOMAINE") * ------------------------------------------------------------- */ body.header-transparent .extra_logo { color: #fff; } /* ------------------------------------------------------------- * 8. Main navigation (GAZETTE / TASTE / WINES / ...) * Items → white; underline border → translucent white. * Dropdown panels keep a white background. * ------------------------------------------------------------- */ body.header-transparent .nav-wrapper { border-bottom: 2px solid rgba(255, 255, 255, 0.45); } body.header-transparent .nav-item { color: #fff; } body.header-transparent .nav-item:hover { color: #ED1C24; /* keep brand-red hover */ } /* Sub-menu panels appear on white card; items already styled black via pages.css */ body.header-transparent .nav-item-group .nav-dropdown { background: #fff; } body.header-transparent .nav-dropdown-item { color: #000 !important; } /* ------------------------------------------------------------- * 9. Mobile burger menu (RWD) * The burger trigger ON the closed state needs white bars. * When the menu opens, it's a normal white panel — no override. * ------------------------------------------------------------- */ @media only screen and (max-width: 624px) { body.header-transparent .r_inn, body.header-transparent .r_inn::before, body.header-transparent .r_inn::after { background-color: #fff; } /* But once the menu is open (ison) the panel becomes solid white, so the burger lines should flip back to dark. */ body.header-transparent .ison .r_inn, body.header-transparent .ison .r_inn::before, body.header-transparent .ison .r_inn::after { background-color: #000; } }