/* ============================================================ World Wide Wo — header & footer A 1:1 port of the Laravel site's header/footer CSS (public/assets/css/wwo.css, the HEADER and FOOTER blocks). Two deliberate differences from that file, neither visual: 1. Every rule is scoped to .wwo-site-header / .wwo-site-footer. The inner class names are Laravel's (.brand, .container, .socials, .newsletter) and are generic enough to collide with WooCommerce, Elementor and other plugins. The wrapper keeps them contained. 2. Selectors carry a body.wwo-theme prefix wherever they compete with a rule of the same name in wwo-main.css. body.wwo-theme a is (0,2,1) and would otherwise beat .main-nav a at (0,1,1), turning the nav gold. Colours come from the --wwo-* tokens in wwo-main.css, which hold the same values as the Laravel build's --gold / --white / --line set. ============================================================ */ /* ---------- Elementor container reset ---------------------------------- The markup arrives as a single HTML widget inside an Elementor section. Elementor's section/column/widget wrappers add their own max-width and padding, which would inset the header and break its full-bleed background. 09-header.json and 10-footer.json already set these to zero; these rules are the belt to that braces, for the case where someone edits the section in Elementor and re-saves it with defaults. ---------------------------------------------------------------------- */ body.wwo-theme .wwo-hf-section > .elementor-container { max-width: 100%; } body.wwo-theme .wwo-hf-section .elementor-column-gap-default > .elementor-column > .elementor-element-populated { padding: 0; } body.wwo-theme .wwo-hf-section .elementor-widget-wrap { padding: 0; } body.wwo-theme .wwo-hf-section .elementor-widget:not(:last-child) { margin-bottom: 0; } /* ---------- Sticky ------------------------------------------------------ position: sticky only moves an element within its containing block. Inside Elementor the header sits in wrappers no taller than itself, so sticking .site-header directly does nothing — it scrolls straight off. wwo-main.js walks up from .wwo-site-header to the element that is a direct child of and tags it .wwo-sticky-host. That element's containing block is , which is page-tall, so sticky behaves. Works the same whether the header came from Elementor, HFE, or the theme fallback. ---------------------------------------------------------------------- */ body.wwo-theme .wwo-sticky-host { position: sticky; top: 0; z-index: 999; } /* The WordPress admin bar is fixed over the top 32px for logged-in users. */ body.wwo-theme.admin-bar .wwo-sticky-host { top: 32px; } @media screen and (max-width: 782px) { body.wwo-theme.admin-bar .wwo-sticky-host { top: 46px; } } /* ---------- Shared container ---------- */ body.wwo-theme .wwo-site-header .container, body.wwo-theme .wwo-site-footer .container { max-width: 1240px; margin: 0 auto; padding: 0 24px; width: 100%; } /* ============================================================ HEADER ============================================================ */ body.wwo-theme .wwo-site-header .site-header { /* The .wwo-sticky-host above does the sticking; this stays in flow. */ position: relative; background: rgba(10, 10, 10, .96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--wwo-line); } /* Laravel's wwo.js sets this inline once the page is scrolled past 10px; wwo-main.js sets the .wwo-scrolled body class instead. Same shadow. */ body.wwo-theme.wwo-scrolled .wwo-site-header .site-header { box-shadow: 0 10px 30px rgba(0, 0, 0, .55); } body.wwo-theme .wwo-site-header .site-header .container { display: flex; align-items: center; gap: 26px; min-height: 82px; } body.wwo-theme .wwo-site-header .brand { display: inline-flex; align-items: center; flex: none; } body.wwo-theme .wwo-site-header .brand img { height: 46px; width: auto; max-width: none; display: block; } body.wwo-theme .wwo-site-header .main-nav { display: flex; align-items: center; gap: 22px; margin: 0 auto; } body.wwo-theme .wwo-site-header .main-nav a { color: var(--wwo-white); font-family: var(--wwo-font-body); font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; padding: 6px 2px; position: relative; text-decoration: none; white-space: nowrap; } body.wwo-theme .wwo-site-header .main-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--wwo-gold); transition: right .25s ease; } body.wwo-theme .wwo-site-header .main-nav a:hover, body.wwo-theme .wwo-site-header .main-nav a.active { color: var(--wwo-gold); } body.wwo-theme .wwo-site-header .main-nav a:hover::after, body.wwo-theme .wwo-site-header .main-nav a.active::after { right: 0; } body.wwo-theme .wwo-site-header .header-actions { display: flex; align-items: center; gap: 18px; flex: none; } body.wwo-theme .wwo-site-header .header-icons { display: flex; align-items: center; gap: 14px; } body.wwo-theme .wwo-site-header .header-icons a { color: var(--wwo-white); display: inline-flex; position: relative; } body.wwo-theme .wwo-site-header .header-icons a:hover { color: var(--wwo-gold); } body.wwo-theme .wwo-site-header .header-icons svg { width: 19px; height: 19px; } body.wwo-theme .wwo-site-header .nav-toggle { display: none; background: none; border: 1px solid var(--wwo-line); border-radius: 8px; color: var(--wwo-white); padding: 9px 11px; cursor: pointer; /* wwo-main.css styles every button as a gold gradient; undo that here. */ font: inherit; letter-spacing: normal; text-transform: none; filter: none; transform: none; } body.wwo-theme .wwo-site-header .nav-toggle:hover { filter: none; transform: none; border-color: var(--wwo-gold); color: var(--wwo-gold); } body.wwo-theme .wwo-site-header .nav-toggle svg { width: 20px; height: 20px; display: block; } /* ---------- Mobile drawer ---------- */ @media (max-width: 1280px) { body.wwo-theme .wwo-site-header .main-nav { position: fixed; inset: 82px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: rgba(10, 10, 10, .98); border-bottom: 1px solid var(--wwo-line); padding: 10px 24px 22px; display: none; } body.wwo-theme .wwo-site-header .main-nav.open { display: flex; } body.wwo-theme .wwo-site-header .main-nav a { padding: 13px 4px; border-bottom: 1px solid var(--wwo-line-2); } body.wwo-theme .wwo-site-header .main-nav a::after { display: none; } body.wwo-theme .wwo-site-header .nav-toggle { display: inline-flex; margin-left: auto; } body.wwo-theme .wwo-site-header .site-header .container { gap: 14px; } /* Clear the admin bar, which the drawer would otherwise start beneath. */ body.wwo-theme.admin-bar .wwo-site-header .main-nav { top: 114px; } } @media screen and (max-width: 782px) { body.wwo-theme.admin-bar .wwo-site-header .main-nav { top: 128px; } } @media (max-width: 480px) { body.wwo-theme .wwo-site-header .brand img { height: auto; max-width: min(46vw, 180px); } body.wwo-theme .wwo-site-header .header-actions { gap: 10px; } body.wwo-theme .wwo-site-header .header-icons { gap: 10px; } body.wwo-theme .wwo-site-header .nav-toggle { padding: 8px 10px; } } /* ============================================================ FOOTER ============================================================ */ body.wwo-theme .wwo-site-footer .site-footer { border-top: 1px solid var(--wwo-line); padding: 74px 0 0; background: var(--wwo-black); } /* Laravel leaves paragraph margins at the browser default. Elementor and several plugins reset them, so state the default explicitly. */ body.wwo-theme .wwo-site-footer p { margin: 1em 0; } body.wwo-theme .wwo-site-footer .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.4fr; gap: 40px; padding-bottom: 46px; } /* Grid children may not force a track wider than the viewport. */ body.wwo-theme .wwo-site-footer .footer-grid > * { min-width: 0; } body.wwo-theme .wwo-site-footer .footer-brand img { width: 150px; height: auto; display: block; } body.wwo-theme .wwo-site-footer .footer-brand p { font-size: 14px; margin: 14px 0 16px; } body.wwo-theme .wwo-site-footer .site-footer h4 { color: var(--wwo-gold); font-family: var(--wwo-font-body); font-size: 12px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; margin: 0 0 18px; } body.wwo-theme .wwo-site-footer .site-footer ul { list-style: none; margin: 0; padding: 0; } body.wwo-theme .wwo-site-footer .site-footer ul li { margin-bottom: 11px; } body.wwo-theme .wwo-site-footer .site-footer ul a { color: var(--wwo-grey); font-size: 14px; text-decoration: none; } body.wwo-theme .wwo-site-footer .site-footer ul a:hover { color: var(--wwo-gold); } /* ---------- Socials ---------- */ body.wwo-theme .wwo-site-footer .socials { display: flex; gap: 18px; align-items: center; } body.wwo-theme .wwo-site-footer .socials a { color: var(--wwo-white); display: inline-flex; } body.wwo-theme .wwo-site-footer .socials a:hover { color: var(--wwo-gold); transform: translateY(-2px); } body.wwo-theme .wwo-site-footer .socials svg { width: 18px; height: 18px; } /* ---------- Newsletter ---------- */ body.wwo-theme .wwo-site-footer .newsletter { display: flex; margin-top: 14px; } body.wwo-theme .wwo-site-footer .newsletter input { flex: 1; min-width: 0; background: #1c1c1c; border: 1px solid var(--wwo-line-2); border-right: none; border-radius: 8px 0 0 8px; color: var(--wwo-white); padding: 12px 14px; font-family: var(--wwo-font-body); font-size: 13px; } body.wwo-theme .wwo-site-footer .newsletter input:focus { outline: none; border-color: var(--wwo-gold); } body.wwo-theme .wwo-site-footer .newsletter button { flex: none; background: linear-gradient(180deg, var(--wwo-gold-soft), var(--wwo-gold-2)); border: none; border-radius: 0 8px 8px 0; color: #141005; padding: 0 16px; cursor: pointer; display: flex; align-items: center; } /* wwo-main.css lifts and brightens every button on hover; the Laravel newsletter button does neither. */ body.wwo-theme .wwo-site-footer .newsletter button:hover { filter: none; transform: none; } body.wwo-theme .wwo-site-footer .newsletter button svg { width: 16px; height: 16px; } /* ---------- Bottom bar ---------- */ body.wwo-theme .wwo-site-footer .footer-bottom { border-top: 1px solid var(--wwo-line-2); padding: 20px 0; text-align: center; color: var(--wwo-grey-2); font-size: 12.5px; } body.wwo-theme .wwo-site-footer .footer-legal { font-size: 12px; color: var(--wwo-grey-2); max-width: 760px; margin: 8px auto 0; } /* ---------- Responsive ---------- */ @media (max-width: 1080px) { body.wwo-theme .wwo-site-footer .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 700px) { body.wwo-theme .wwo-site-footer .footer-grid { grid-template-columns: 1fr; gap: 30px; } body.wwo-theme .wwo-site-footer .socials { justify-content: center; } }