/* ============================================================= * gazette-page.css * * Beige page background + dark header for the transparent header * used on Gazette pages. * * IMPORTANT: header-transparent.css makes header text/icons WHITE * (built to overlay a dark hero image). On the light beige bg * (#F0E5D6) white is invisible, so here we keep the transparent * STRUCTURE but flip text/icons back to the default dark tone. * * Scope: * ============================================================= */ :root { --gz-beige: #f0e5d6; --gz-ink: #554F4F; } /* 1. Beige background behind header + content ----------------- */ body.header-transparent.gazette, body.header-transparent.gazette #wrap { background-color: var(--gz-beige); } /* 2. Logo back to its dark original (undo the invert) --------- */ body.header-transparent.gazette .header-column.logo .wiize img { filter: none; } /* 3. Text elements -> dark ------------------------------------ */ body.header-transparent.gazette .nav-item, body.header-transparent.gazette .extra_logo, body.header-transparent.gazette .find-your-wiize-btn .btn-text, body.header-transparent.gazette .custom-lang-switcher .lang-current, body.header-transparent.gazette .lang-current, body.header-transparent.gazette .social-btn.openshop { color: var(--gz-ink) !important; } /* 4. All header icons -> dark --------------------------------- */ body.header-transparent.gazette #header .social-btn svg path, body.header-transparent.gazette #header .social-btn svg rect, body.header-transparent.gazette #header .account-btn-wrapper svg path, body.header-transparent.gazette #header .account-btn-wrapper svg rect, body.header-transparent.gazette .search-btn svg path, body.header-transparent.gazette .find-your-wiize-btn > svg path, body.header-transparent.gazette .header-burger svg rect { fill: var(--gz-ink); } /* 5. Search input on beige ------------------------------------ */ body.header-transparent.gazette .social-btn .search-input { color: var(--gz-ink); border-bottom-color: rgba(85, 79, 79, 0.4) !important; } body.header-transparent.gazette .social-btn .search-input::placeholder { color: rgba(85, 79, 79, 0.6); } /* 6. Button chips: subtle dark tint instead of white tint ----- */ body.header-transparent.gazette .left-icons .social-btn, body.header-transparent.gazette .icon-row .social-btn, body.header-transparent.gazette .right-icons .social-btn.icon-only, body.header-transparent.gazette .social-btn.openshop, body.header-transparent.gazette .lang-select { background-color: rgba(85, 79, 79, 0.08); } /* 7. Nav underline on beige + keep brand-red hover ------------ */ body.header-transparent.gazette .nav-wrapper { border-bottom-color: rgba(85, 79, 79, 0.25); } body.header-transparent.gazette .nav-item:hover { color: #ED1C24; } /* 8. This page is NOT a hero-overlay page --------------------- * * header-transparent.css collapses #header to height:0 so it can * overlay a hero image. The Gazette page has no hero, so give the * header its natural height back — otherwise it sits at height 0 * and overlaps the masthead below it. */ body.header-transparent.gazette #header { height: auto !important; overflow: visible !important; position: relative !important; } body.header-transparent.gazette #wrap { padding-top: 0 !important; }