:root{ --gb-accent:#f9a71b; --gb-ink:#141414; --gb-bar-h:88px; } /* Prevent accidental sideways scroll / off-centre drift on mobile. Full-width 100vw bands can sit a hair wider than the viewport; this clips that overflow without affecting layout. Site-wide, safe. Use overflow-x:CLIP (not hidden) on purpose: `hidden` forces overflow-y to compute as `auto`, which turns into a second scroll container. Two nested scrollers (html + body) is what made iOS Safari leave the fixed header stuck below a white gap when the blurred basket panel opened. `clip` clips sideways WITHOUT creating a scroll container, so there's one normal page scroll and the fixed header stays pinned. */ html, body { overflow-x:clip; max-width:100%; } /* ---- the bar ---- */ .gb-bar{ position:fixed; top:0; left:0; right:0; z-index:1040; background:#141414; /* solid GIBIDI black. No backdrop-filter here, so the fixed menu/panels size & position reliably */ border-bottom:1px solid rgba(255,255,255,.08); } .gb-bar__spacer{ height:var(--gb-bar-h); } .gb-bar__inner{ display:flex; align-items:center; gap:8px; height:var(--gb-bar-h); padding:0 clamp(16px,3vw,40px); font-family:'DM Sans','Open Sans',sans-serif; } /* ---- logo ---- */ .gb-bar__logo{ display:flex; align-items:center; flex-shrink:0; } .gb-bar__logo img{ height:48px; width:auto; display:block; } /* ---- nav (from menu.twig) ---- */ .gb-bar__nav{ margin:0 auto; } .gb-bar__nav .gb-menu{ display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0; } .gb-bar__nav .gb-menu > li > a{ display:flex; align-items:center; gap:6px; padding:9px 10px; border-radius:6px; color:#fff; text-decoration:none; font-size:13px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; white-space:nowrap; transition:color .2s, background .2s; } .gb-bar__nav .gb-menu > li > a:hover{ color:var(--gb-accent); background:rgba(255,255,255,.06); } /* desktop only: "|" divider between top-level menu items */ .gb-bar__nav .gb-menu > li{ display:flex; align-items:center; } .gb-bar__nav .gb-menu > li:not(:first-child)::before{ content:''; flex:0 0 auto; width:1px; height:16px; background:rgba(255,255,255,.28); margin:0 6px; pointer-events:none; } /* ---- desktop full-width "mega" dropdown (Apple-style: spans the whole viewport, content centred in a max-width column. Hover OPENS it; it never navigates. Click navigates) ---- */ .gb-menu__item.has-drop{ position:static; } /* static so the fixed full-width panel isn't clipped to the item */ .gb-menu__drop{ position:fixed; top:var(--gb-bar-h); left:0; right:0; background:#141414; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); list-style:none; margin:0; /* centre the content in a 1100px column with sensible gutters at any width */ padding-top:40px; padding-bottom:50px; padding-left:max(clamp(16px,3vw,40px), calc((100% - 1100px) / 2)); padding-right:max(clamp(16px,3vw,40px), calc((100% - 1100px) / 2)); box-shadow:0 28px 48px -26px rgba(0,0,0,.75); opacity:0; visibility:hidden; transform:translateY(-10px); transition:opacity .25s ease, transform .25s ease, visibility .25s; z-index:1039; /* lay the children out across columns; the "All ..." heading spans the full row */ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:2px 28px; } .gb-menu__item.has-drop:hover > .gb-menu__drop{ opacity:1; visibility:visible; transform:none; } .gb-menu__drop > li > a{ display:block; padding:8px 0; color:#d8d2c7; text-decoration:none; font-size:15px; } .gb-menu__drop > li > a:hover{ color:var(--gb-accent); } /* "All " acts as the panel heading on desktop */ .gb-menu__all{ display:block; grid-column:1 / -1; margin:0 0 14px; } .gb-menu__all a{ display:inline-block; padding:0; color:#fff; font-size:24px; font-weight:700; letter-spacing:-.01em; } .gb-menu__all a:hover{ color:var(--gb-accent); } /* chevron / back link are only used by the mobile drill-down */ .gb-menu__chev, .gb-menu__back{ display:none; } @keyframes gbDrill{ from{ opacity:0; transform:translateX(16px); } to{ opacity:1; transform:none; } } /* ---- action icons (search / account / cart) ---- */ .gb-bar__icon{ position:relative; width:44px; height:44px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; color:#fff; font-size:17px; text-decoration:none; border:0; background:transparent; cursor:pointer; transition:background .2s, color .2s; } /* FA4 sets its own font-size on .fa, so size the glyph directly */ .gb-bar__icon .fa{ font-size:17px; line-height:1; } .gb-bar__icon:hover, .gb-bar__icon.is-active{ background:rgba(255,255,255,.12); color:#fff; } .gb-bar__icon--search{ background:var(--gb-accent); color:var(--gb-ink); } .gb-bar__icon--search:hover, .gb-bar__icon--search.is-active{ background:#e09618; color:var(--gb-ink); } /* logged-in dot on the account icon */ .gb-bar__logged-dot{ position:absolute; top:6px; right:6px; width:9px; height:9px; border-radius:50%; background:var(--gb-accent); border:2px solid #141414; } .gb-bar__count{ position:absolute; top:-2px; right:-2px; background:var(--gb-accent); color:var(--gb-ink); font-size:10px; font-weight:700; line-height:1; min-width:16px; height:16px; padding:0 4px; border-radius:10px; display:grid; place-items:center; } /* desktop icon order (left -> right): account, basket, search. The mobile media query below overrides these with its own ordering. */ .gb-bar__account{ order:1; } .gb-bar__cart{ order:2; } .gb-bar__search{ order:3; } /* ---- burger (mobile) ---- */ .gb-bar__burger{ display:none; width:44px; height:44px; border:0; background:transparent; color:#fff; border-radius:50%; cursor:pointer; flex-shrink:0; padding:0; -webkit-tap-highlight-color:transparent; } .gb-bar__burger:hover{ background:rgba(255,255,255,.12); } /* three-bar icon that morphs into a cross when the menu is open */ .gb-bar__burger-box{ display:block; position:relative; width:21px; height:16px; margin:0 auto; } .gb-bar__burger-bar{ position:absolute; left:0; width:100%; height:2px; border-radius:2px; background:#fff; transition:transform .3s ease, opacity .2s ease, top .3s ease; } .gb-bar__burger-bar:nth-child(1){ top:0; } .gb-bar__burger-bar:nth-child(2){ top:7px; } .gb-bar__burger-bar:nth-child(3){ top:14px; } /* #gb-bar.is-open toggles the cross */ .gb-bar.is-open .gb-bar__burger-bar:nth-child(1){ top:7px; transform:rotate(45deg); } .gb-bar.is-open .gb-bar__burger-bar:nth-child(2){ opacity:0; } .gb-bar.is-open .gb-bar__burger-bar:nth-child(3){ top:7px; transform:rotate(-45deg); } @media (prefers-reduced-motion: reduce){ .gb-bar__burger-bar{ transition:none; } } /* ============ APPLE-STYLE SLIDE-DOWN PANELS ============ */ .gb-overlay{ position:fixed; left:0; right:0; bottom:0; top:var(--gb-bar-h); z-index:1035; background:rgba(0,0,0,.45); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; } .gb-overlay.is-on{ opacity:1; visibility:visible; } .gb-panel{ position:fixed; top:var(--gb-bar-h); left:0; right:0; z-index:1039; background:rgba(20,20,20,.98); -webkit-backdrop-filter:blur(22px) saturate(140%); backdrop-filter:blur(22px) saturate(140%); border-bottom:1px solid rgba(255,255,255,.08); /* Cap to the space below the bar so a long basket can't run off-screen. dvh tracks the visible area on mobile (iOS Safari's bottom URL bar eats 100vh, which is what hid the checkout button); vh is the fallback. */ max-height:calc(100vh - var(--gb-bar-h)); max-height:calc(100dvh - var(--gb-bar-h)); overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; /* don't let the scroll chain leak to the page behind */ transform:translateY(-14px); opacity:0; visibility:hidden; transition:transform .34s cubic-bezier(.2,.8,.2,1), opacity .34s, visibility .34s; } .gb-panel.is-open{ transform:none; opacity:1; visibility:visible; } .gb-panel__inner{ max-width:1100px; margin:0 auto; padding:36px clamp(16px,3vw,40px) 46px; font-family:'DM Sans','Open Sans',sans-serif; } /* search panel */ .gb-search{ display:flex; align-items:center; gap:16px; border-bottom:2px solid rgba(255,255,255,.22); padding-bottom:14px; } .gb-search .fa-search{ color:#fff; font-size:22px; opacity:.65; } .gb-search input{ flex:1; min-width:0; background:transparent; border:0; outline:0; color:#fff; font-size:clamp(22px,3vw,34px); font-weight:500; font-family:'DM Sans',sans-serif; } .gb-search input::placeholder{ color:rgba(255,255,255,.38); } .gb-search__close{ background:transparent; border:0; color:rgba(255,255,255,.65); font-size:15px; cursor:pointer; white-space:nowrap; } .gb-search__close:hover{ color:#fff; } .gb-suggest{ margin-top:26px; } .gb-suggest__label{ color:rgba(255,255,255,.45); font-size:11px; letter-spacing:.14em; text-transform:uppercase; margin:0 0 10px; } .gb-suggest ul{ list-style:none; margin:0; padding:0; columns:2; } .gb-suggest a{ display:inline-flex; align-items:center; gap:10px; color:#dcd6cb; text-decoration:none; padding:9px 0; font-size:16px; } .gb-suggest a:hover{ color:var(--gb-accent); } .gb-suggest a .fa{ font-size:12px; opacity:.5; } /* live results: single column, full-width product names */ .gb-suggest--live ul{ columns:1; } .gb-suggest__msg{ color:rgba(255,255,255,.45); font-size:15px; padding:9px 0; list-style:none; } /* account panel */ .gb-acct{ max-width:380px; } .gb-acct h3{ color:#fff; font-size:22px; margin:0 0 18px; font-weight:600; } .gb-acct input{ width:100%; padding:13px 14px; border-radius:9px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.06); color:#fff; margin-bottom:12px; font-size:15px; font-family:inherit; } .gb-acct input::placeholder{ color:rgba(255,255,255,.4); } .gb-acct__btn{ width:100%; padding:13px; border:0; border-radius:9px; background:var(--gb-accent); color:var(--gb-ink); font-weight:700; font-size:15px; cursor:pointer; font-family:inherit; } .gb-acct__btn:hover{ background:#e09618; } .gb-acct__links{ margin-top:18px; display:flex; flex-direction:column; gap:2px; } .gb-acct__links a{ color:#dcd6cb; text-decoration:none; padding:9px 0; font-size:15px; } .gb-acct__links a:hover{ color:var(--gb-accent); } .gb-acct__alt{ margin-top:14px; color:rgba(255,255,255,.55); font-size:14px; } .gb-acct__alt a{ color:var(--gb-accent); text-decoration:none; } /* basket panel */ .gb-cart__body{ color:#ececec; min-height:60px; font-size:14.5px; } /* kill OpenCart's dropdown
  • bullets (the two dots) */ .gb-cart__body ul, .gb-cart__body ol, .gb-cart__body li{ list-style:none !important; margin:0; padding:0; } .gb-cart__body li{ display:block; } /* force readable text + remove the light striped row backgrounds */ .gb-cart__body table{ width:100%; background:transparent !important; margin:0 0 12px; } .gb-cart__body td, .gb-cart__body th{ background:transparent !important; border-color:rgba(255,255,255,.14) !important; color:#ececec !important; padding:10px 8px; vertical-align:middle; } .gb-cart__body .table-striped > tbody > tr:nth-of-type(odd), .gb-cart__body .table-striped > tbody > tr:nth-of-type(odd) > td{ background:transparent !important; } .gb-cart__body a{ color:#ececec !important; text-decoration:none; } .gb-cart__body a:hover{ color:var(--gb-accent) !important; } .gb-cart__body strong{ color:#fff !important; } .gb-cart__body img{ background:#fff; padding:4px; border-radius:8px; max-width:58px; height:auto; } /* tidy the remove (x) button to match the dark panel */ .gb-cart__body .btn{ background:rgba(255,255,255,.12) !important; border:0 !important; color:#fff !important; border-radius:8px; box-shadow:none; } .gb-cart__body .btn:hover{ background:var(--gb-accent) !important; color:var(--gb-ink) !important; } .gb-cart__empty{ color:rgba(255,255,255,.6); } /* checkout footer pinned to the bottom of the (scrolling) cart panel so it's always reachable, however many items are in the basket */ #gb-panel-cart .gb-panel__inner{ padding-bottom:0; } .gb-cart__foot{ position:sticky; bottom:0; z-index:1; display:flex; gap:12px; margin-top:18px; padding:16px 0 22px; background:rgba(20,20,20,.985); -webkit-backdrop-filter:blur(22px) saturate(140%); backdrop-filter:blur(22px) saturate(140%); } .gb-cart__foot a{ display:inline-flex; align-items:center; padding:12px 22px; border-radius:9px; font-weight:600; font-size:14px; text-decoration:none; } .gb-cart__foot .gb-cart__view{ border:1px solid rgba(255,255,255,.28); color:#fff; } .gb-cart__foot .gb-cart__view:hover{ background:#fff; color:var(--gb-ink); } .gb-cart__foot .gb-cart__checkout{ background:var(--gb-accent); color:var(--gb-ink); } .gb-cart__foot .gb-cart__checkout:hover{ background:#e09618; } /* ---- tablet + mobile: full row would overflow below ~1300px, so collapse to burger ---- */ @media (max-width:1300px){ :root{ --gb-bar-h:66px; } /* layout: burger + account LEFT, logo CENTRE, search + basket RIGHT. The single inner gap (8px) sets BOTH the burger<->account and search<->basket spacing, so the two pairs match; margin-left:auto on search opens the centre gap. */ .gb-bar__burger{ display:inline-grid; place-items:center; order:-2; } /* leftmost */ .gb-bar__account{ order:-1; } /* sits just right of the burger */ .gb-bar__cart{ order:1; margin-left:auto; } /* pushed right; start of the right pair */ .gb-bar__search{ order:2; } /* rightmost */ /* logo absolutely centred to the bar (true page centre, independent of the side widths) */ .gb-bar__logo{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); margin:0; } .gb-bar__logo img{ height:40px; } /* full-height sheet that CLIPS the sliding panels (no sideways scroll) */ .gb-bar__nav{ position:fixed; top:var(--gb-bar-h); left:0; right:0; bottom:0; margin:0; background:rgba(18,16,12,.98); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); overflow-y:auto; overflow-x:hidden; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .25s ease, transform .25s ease, visibility .25s; z-index:1038; } .gb-bar.is-open .gb-bar__nav{ opacity:1; visibility:visible; transform:none; } .gb-bar__nav .gb-menu{ flex-direction:column; align-items:stretch; gap:0; padding:10px 14px; } .gb-bar__nav .gb-menu > li{ display:block; } /* undo desktop flex for drill-down */ .gb-bar__nav .gb-menu > li:not(:first-child)::before{ display:none; } /* no "|" on mobile drill-down */ .gb-bar__nav .gb-menu > li > a{ padding:15px 10px; font-size:17px; } /* chevron on parent items (right-pointing) */ .gb-menu__chev{ display:inline-block; width:9px; height:9px; border:0; border-right:2px solid currentColor; border-top:2px solid currentColor; transform:rotate(45deg); margin-left:auto; opacity:.55; } .gb-bar__nav .gb-menu__item.has-drop > .gb-menu__top{ display:flex; align-items:center; } /* DRILL-DOWN: swap which list is shown (no fade/transform that the sub-page could inherit) */ .gb-menu__item.has-drop{ position:static; } .gb-bar__nav.is-sub .gb-menu > li{ display:none; } /* hide all top-level items */ .gb-bar__nav.is-sub .gb-menu > li.is-active{ display:block; } /* ...except the chosen one */ .gb-bar__nav.is-sub .gb-menu > li.is-active > .gb-menu__top{ display:none; } /* hide its own label */ /* reset the desktop dropdown styling so the sub-page is a normal full-width in-flow block */ .gb-menu__drop{ display:none; position:static; inset:auto; min-width:0; margin:0; padding:0; border:0; border-radius:0; box-shadow:none; transform:none; opacity:1; visibility:visible; background:transparent; list-style:none; } .gb-bar__nav.is-sub .has-drop.is-active > .gb-menu__drop{ display:block; animation:gbDrill .28s ease both; } .gb-menu__drop > li > a{ display:block; padding:14px 10px; color:#fff; font-size:18px; font-weight:600; } .gb-menu__drop > li > a:hover{ color:var(--gb-accent); } .gb-menu__back{ display:block; margin:0 0 4px; } .gb-menu__back button{ display:inline-flex; align-items:center; background:transparent; border:0; color:#fff; padding:10px 8px; cursor:pointer; } .gb-menu__back button::before{ content:''; width:13px; height:13px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(45deg); } .gb-menu__all{ display:block; } .gb-menu__all a{ display:block; padding:6px 10px 16px; color:#fff; font-size:21px; font-weight:700; } .gb-menu__all a:hover{ color:var(--gb-accent); } .gb-bar__icon{ width:42px; height:42px; } .gb-suggest ul{ columns:1; } } .gb-search__go{ background:#f9a71b; border:0; color:#141414; font-family:'DM Sans',sans-serif; font-size:14px; font-weight:600; padding:9px 18px; border-radius:8px; cursor:pointer; white-space:nowrap; transition:background .15s ease; } .gb-search__go:hover{ background:#e09618; color:#141414; } /* toast notifications (replaces the old inject-after-.breadcrumb + scroll-to-top feedback) */ .gb-toasts{ position:fixed; top:calc(var(--gb-bar-h,88px) + 14px); right:16px; z-index:2147483000; display:flex; flex-direction:column; gap:10px; pointer-events:none; max-width:min(380px, calc(100vw - 32px)); } .gb-toast{ pointer-events:auto; display:flex; align-items:flex-start; gap:12px; background:#141414; color:#fff; border-left:4px solid #f9a71b; border-radius:10px; padding:13px 14px 13px 16px; font-family:'DM Sans',sans-serif; font-size:14px; line-height:1.5; box-shadow:0 18px 40px -18px rgba(20,20,20,.55); opacity:0; transform:translateY(-8px); transition:opacity .22s ease, transform .22s ease; } .gb-toast.is-in{ opacity:1; transform:none; } .gb-toast--err{ border-left-color:#d64545; } .gb-toast a{ color:#fff; text-decoration:underline; } .gb-toast a:hover{ color:#f9a71b; } .gb-toast__x{ background:none; border:0; color:rgba(255,255,255,.6); font-size:17px; line-height:1; cursor:pointer; padding:0; margin-left:auto; flex:none; } .gb-toast__x:hover{ color:#fff; } @media (max-width:760px){ .gb-toasts{ top:auto; bottom:16px; right:16px; left:16px; max-width:none; } .gb-toast{ transform:translateY(8px); } }