/* ============================================================ Bex Vapes — GLOBAL site chrome (header, nav, footer) Single source of truth for all shared header/footer styling. Linked by every page. Page-specific CSS stays inline per page. Colour variables (--bg, --brand, etc.) are defined in each page's inline :root block, so this file only references them. Last updated: 2026-06-30 ============================================================ */ /* ---------- Age gate: no-flash guard ---------- The guard script (stamped by build.py) adds .age-ok to before first paint if the visitor has already confirmed 18+. This hides the gate instantly, so returning visitors never see it flash while the page loads — regardless of where each page's dismiss script sits. Covers both class variants (.age-gate and .agegate). */ html.age-ok .age-gate, html.age-ok .agegate{display:none !important} /* ---------- Top bar ---------- */ .topbar{ background:linear-gradient(90deg,var(--brand,#7c5cff),var(--brand-2,#23e0c8)); color:#0c0e14;font-weight:700;font-size:.84rem;text-align:center; padding:8px 16px;letter-spacing:.02em; } .topbar a{color:inherit;text-decoration:underline;font-weight:800} @media(max-width:480px){.topbar{font-size:.78rem;padding:7px 12px}} /* ---------- Header / nav ---------- */ header{ position:sticky;top:0;z-index:500; background:rgba(12,14,20,.82);backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line); } header nav, nav.wrap{ max-width:var(--max,1160px);margin:0 auto;padding:0 22px; display:flex;align-items:center;justify-content:space-between;height:72px; gap:28px;position:relative; } .logo{display:flex;align-items:center;gap:12px;font-weight:800;font-size:1.25rem;flex-shrink:0} .logo .mark{display:none} .logo b{color:var(--text)} .logo-img{height:38px;width:auto;display:block} .nav-links{display:flex;gap:28px;align-items:center} .nav-links a{color:var(--muted);font-weight:600;font-size:.95rem;transition:color .15s;white-space:nowrap} .nav-links a:hover,.nav-links a.active{color:var(--text)} .nav-links .dropdown{position:relative} .nav-links .dropdown>a{display:flex;align-items:center;gap:4px;cursor:pointer} .nav-links .dropdown>a::after{content:'\25BE';font-size:.7rem;opacity:.6;transition:transform .2s} .nav-links .dropdown.open>a::after{transform:rotate(180deg)} .dropdown-menu{display:none;position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);min-width:170px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.4);padding:6px;z-index:200} .dropdown-menu a{display:block;padding:9px 14px;border-radius:7px;color:var(--text)!important;font-size:.88rem;white-space:nowrap;font-weight:600;border-bottom:0!important} .dropdown-menu a:hover{background:rgba(255,255,255,.07);color:var(--text)!important} .dropdown:hover .dropdown-menu,.dropdown:focus-within .dropdown-menu{display:block} .dropdown.open .dropdown-menu{display:block} /* Invisible bridge across the 8px gap between the link and the menu, so the dropdown stays open as the cursor travels down to the items — no second click needed. Disabled on mobile (menu is static there). */ .nav-links .dropdown-menu::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px} .menu-cat{display:block;font-size:.67rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);padding:7px 14px 3px;pointer-events:none;cursor:default;border-top:1px solid var(--line);margin-top:4px} .dropdown-menu .menu-cat:first-child{border-top:0;margin-top:0;padding-top:8px} /* ---------- Shop mega-menu ---------- */ /* nav.wrap is the containing block (position:relative above). .nav-links .mega-trigger specificity (0,2,0) = same as .nav-links .dropdown but declared later → wins, making position:static so left:0/right:0 anchor to nav.wrap. */ .nav-links .mega-trigger{position:static} .dropdown-menu.dropdown-mega{ left:0;right:0;top:72px;transform:none;min-width:unset; border-radius:0 0 14px 14px;padding:14px 8px; background:var(--surface);border-top:1px solid var(--line); } .dropdown:hover .dropdown-menu.dropdown-mega, .dropdown:focus-within .dropdown-menu.dropdown-mega, .dropdown.open .dropdown-menu.dropdown-mega{display:grid;grid-template-columns:repeat(4,1fr);gap:0} /* Hover bridge: transparent zone above the panel that covers the gap between the Shop trigger text (vertically centred in 72px nav) and the panel top. Keeps .dropdown:hover true as the mouse travels down to the links. */ .dropdown-menu.dropdown-mega::before{display:block;height:48px;top:-48px} /* Lift all non-mega nav items above the bridge so they remain clickable while the Shop dropdown is open. z-index must exceed the mega menu's 200. */ .nav-links > a, .nav-links > .dropdown:not(.mega-trigger){position:relative;z-index:210} .mega-col{padding:4px 10px} .mega-col+.mega-col{border-left:1px solid var(--line)} .mega-col .menu-cat{border-top:0;margin-top:0;padding:4px 4px 8px} .mega-col .menu-subhead{border-top:1px solid var(--line);margin-top:6px;padding-top:8px} .mega-col a{padding:7px 4px} .nav-cta{display:flex;align-items:center;gap:14px;flex-shrink:0} .nav-cta .btn{white-space:nowrap} .burger{display:none;background:none;border:0;color:var(--text);font-size:1.6rem;cursor:pointer;line-height:1} /* ---------- Back to top ---------- */ .to-top{ position:fixed;right:22px;bottom:22px;z-index:510; width:46px;height:46px;border-radius:50%;border:1px solid var(--line); background:rgba(12,14,20,.75);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); color:var(--text);font-size:1.15rem;line-height:1;cursor:pointer; display:flex;align-items:center;justify-content:center; opacity:0;pointer-events:none;transform:translateY(8px); transition:opacity .25s,transform .25s,background .15s,border-color .15s; } .to-top.show{opacity:1;pointer-events:auto;transform:translateY(0)} .to-top:hover{background:var(--brand,#7c5cff);border-color:var(--brand,#7c5cff);color:#fff} @media (prefers-reduced-motion: reduce){.to-top{transition:none}} /* ---------- Open-now badge (topbar) ---------- */ .open-badge{display:inline-block;margin-left:10px;padding:2px 11px;border-radius:999px;background:rgba(0,0,0,.16);font-weight:800;white-space:nowrap} .open-badge .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px;background:#0b7a3d} .open-badge.closed .dot{background:#b3261e} @media(max-width:640px){.open-badge{display:none}} /* ---------- Mobile quick-action bar ---------- */ .quickbar{ position:fixed;left:0;right:0;bottom:0;z-index:600;display:none; grid-template-columns:1fr 1fr 1fr; background:rgba(12,14,20,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom,0); } .quickbar a,.quickbar button{ display:flex;flex-direction:column;align-items:center;gap:2px; padding:9px 4px 8px;background:none;border:0;cursor:pointer; color:var(--text);font-size:.72rem;font-weight:700;letter-spacing:.04em; text-decoration:none; } .quickbar .qi{font-size:1.15rem;line-height:1} .quickbar a:active,.quickbar button:active{background:rgba(255,255,255,.06)} .hours-panel{ position:fixed;right:12px;bottom:66px;z-index:610;min-width:230px; background:var(--bg-2,#141824);border:1px solid var(--line);border-radius:14px; box-shadow:0 12px 32px rgba(0,0,0,.5);padding:16px 18px;font-size:.9rem; } .hours-panel .hp-status{font-weight:800;margin-bottom:10px} .hours-panel .hp-status .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;background:#2ecc71} .hours-panel.closed .hp-status .dot{background:#ff6b60} .hours-panel table{width:100%;border-collapse:collapse;color:var(--muted)} .hours-panel td{padding:3px 0} .hours-panel td:last-child{text-align:right;color:var(--text)} @media(max-width:860px){ .quickbar{display:grid} .to-top{bottom:76px} body{padding-bottom:56px} } /* ---------- Flavour search (brand pages) ---------- */ .flavour-search{margin:0 0 18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap} .flavour-search input{ flex:1;min-width:200px;max-width:340px; background:var(--bg-2,#141824);border:1px solid var(--line);border-radius:999px; padding:11px 18px;color:var(--text);font-size:.95rem;font-family:inherit; } .flavour-search input::placeholder{color:var(--muted)} .flavour-search .fs-count{color:var(--muted);font-size:.85rem} /* ---------- Copy-link button (calculators) ---------- */ .copy-link{ display:inline-flex;align-items:center;gap:8px;margin-top:16px; background:none;border:1px solid var(--line);border-radius:999px; padding:9px 18px;color:var(--muted);font-weight:700;font-size:.85rem;cursor:pointer; transition:color .15s,border-color .15s; } .copy-link:hover{color:var(--text);border-color:var(--brand,#7c5cff)} .copy-link.copied{color:var(--brand-2,#23e0c8);border-color:var(--brand-2,#23e0c8)} /* ---------- Accessibility ---------- */ .skip-link{ position:fixed;left:14px;top:-64px;z-index:700; background:var(--brand,#7c5cff);color:#fff;font-weight:700; padding:11px 18px;border-radius:10px;transition:top .2s; } .skip-link:focus{top:14px} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{ outline:2px solid var(--brand-2,#23e0c8);outline-offset:2px; } /* ---------- Footer ---------- */ footer{background:var(--bg-2);border-top:1px solid var(--line);padding:50px 0 30px;margin-top:10px} .foot-outer{max-width:var(--max,1160px);margin:0 auto;padding:0 22px} .foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px;margin-bottom:34px} .foot-grid h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:14px} .foot-grid a{display:block;color:var(--muted);padding:5px 0;font-size:.95rem;transition:color .15s} .foot-grid a:hover,.foot-grid a.active{color:var(--brand-2,#23e0c8)} .foot-grid span{display:block;color:var(--muted);font-size:.95rem;padding:2px 0} .foot-brand p{color:var(--muted);font-size:.88rem;max-width:260px;margin-top:8px} .foot-cat{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;display:block;opacity:.7;margin-top:10px;padding-top:8px;border-top:1px solid var(--line)} .foot-cat:first-of-type{margin-top:0;padding-top:0;border-top:0} .foot-subcat{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;display:block;color:var(--brand-2);opacity:.8;margin-top:8px;margin-bottom:2px} .foot-shop-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px} .foot-bottom{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:.85rem} /* Legal/company links in the footer bottom row: own style so they don't inherit a page's inline a{} colour (some pages set a{color:var(--brand-2)} with different --brand-2 values, which made "BEX VAPES LIMITED" render teal/green/grey depending on the page). Force one consistent look. */ .foot-bottom a{color:var(--muted);text-decoration:underline;text-underline-offset:2px;transition:color .15s} .foot-bottom a:hover{color:var(--brand-2,#23e0c8)} /* ---------- Responsive: header + footer ---------- Burger kicks in at 980px: below this the full 6-item desktop nav can no longer fit without squeezing, so switch early rather than let links wrap. */ @media(max-width:980px){ .foot-grid{grid-template-columns:1fr 1fr} .burger{display:block;order:3} .nav-cta .btn{padding:11px 18px;font-size:.9rem} .nav-links{ display:none;position:absolute;top:72px;left:0;right:0; flex-direction:column;gap:0;padding:6px 22px 14px; background:var(--bg-2);border-bottom:1px solid var(--line);box-shadow:var(--shadow); max-height:calc(100vh - 140px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain; } .nav-links.open{display:flex} .nav-links a{padding:14px 2px;border-bottom:1px solid var(--line);font-size:1.02rem;color:var(--text)} .nav-links a:last-child{border-bottom:0} .dropdown-menu{position:static;transform:none;border:1px solid var(--line);box-shadow:none;background:var(--surface);padding:4px 0 4px 16px;border-radius:8px;margin-top:4px} .dropdown-menu::before{display:none} .dropdown-menu a{padding:10px 2px;font-size:.95rem;border-bottom:1px solid var(--line)} .dropdown-menu a:last-child{border-bottom:0} .logo-img{height:28px;max-width:140px;object-fit:contain;object-position:left} /* mega-menu resets for mobile — full width, small indent */ .nav-links .mega-trigger{position:relative} .dropdown-menu.dropdown-mega{top:auto;left:auto;right:auto;border-radius:8px;padding:4px 0} /* Touch: ONLY the .open toggle opens a submenu. Neutralise sticky :hover / :focus-within so a second tap can't re-open the desktop mega overlay (which is position:absolute and escapes the scroll). */ .nav-links .dropdown:hover > .dropdown-menu, .nav-links .dropdown:focus-within > .dropdown-menu{display:none} .nav-links .dropdown.open > .dropdown-menu{display:block} .nav-links .dropdown.open .dropdown-menu.dropdown-mega{display:block} .mega-col{padding:0 2px;border-left:0!important} .mega-col .menu-cat{padding:7px 4px 3px} } @media(max-width:480px){ .foot-grid{grid-template-columns:1fr} .foot-shop-grid{grid-template-columns:1fr} } /* ---------- Cookie banner (global) ---------- */ .cookiebar{position:fixed;left:16px;right:16px;bottom:16px;z-index:900;max-width:760px;margin:0 auto;background:var(--surface,#161a26);border:1px solid var(--line,rgba(255,255,255,.08));border-radius:14px;padding:16px 20px;display:flex;align-items:center;gap:16px;justify-content:space-between;box-shadow:0 18px 50px rgba(0,0,0,.45)} .cookiebar.hidden{display:none} .cookiebar p{color:var(--muted,#8b91a7);font-size:.86rem;margin:0} .cookiebar p a{color:var(--brand-2,#23e0c8)} .cookiebar-actions{display:flex;gap:10px;flex-shrink:0} .cookiebar .btn{padding:9px 16px;font-size:.85rem} @media(max-width:600px){.cookiebar{flex-direction:column;align-items:stretch;text-align:center}.cookiebar-actions{justify-content:center}} /* BEX:hide-findus-mobile */ @media(max-width:860px){.nav-cta{display:none}}