. ========================================================= */ :root{ --vgh-blue:#2f6cff; --vgh-blue-2:#1557df; --vgh-ink:#08111f; --vgh-muted:rgba(8,17,31,.62); --vgh-soft:#f6f8fc; --vgh-soft-2:#eef4ff; --vgh-line:rgba(8,17,31,.085); --vgh-line-strong:rgba(8,17,31,.13); --vgh-premium-shadow:0 18px 45px rgba(8,17,31,.10); --vgh-soft-shadow:0 8px 22px rgba(8,17,31,.075); } /* Core header surface */ .vgh{ font-family:Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; } .vgh__betaBar{ background:rgba(255,255,255,.96) !important; border-bottom:1px solid rgba(8,17,31,.055) !important; } .vgh__betaInner{ min-height:22px !important; padding:3px 14px !important; } .vgh__betaTag{ display:inline-flex !important; align-items:center !important; justify-content:center !important; height:17px !important; padding:0 8px !important; border-radius:999px !important; background:rgba(239,68,68,.075) !important; color:#dc2626 !important; font-size:9.5px !important; font-weight:850 !important; letter-spacing:.12em !important; line-height:1 !important; } .vgh__bar{ background:rgba(255,255,255,.88) !important; -webkit-backdrop-filter:saturate(1.28) blur(18px); backdrop-filter:saturate(1.28) blur(18px); border-bottom:1px solid rgba(8,17,31,.075) !important; box-shadow:0 1px 0 rgba(255,255,255,.65) inset, 0 10px 30px rgba(8,17,31,.045) !important; } .vgh__inner{ padding:10px 12px !important; gap:12px !important; } /* Logo polish */ .vgh__logo{ padding:4px 6px !important; border-radius:999px !important; transition:transform .18s ease, opacity .18s ease; } .vgh__logo:hover{ transform:translateY(-1px); opacity:.92; } .vgh__logoImg{ height:30px !important; max-height:30px !important; width:auto !important; object-fit:contain !important; } /* Shared premium controls */ .vgh__hamburger, .vgh-cart, .vgh__account > a{ width:42px; height:42px; border-radius:999px !important; border:1px solid var(--vgh-line) !important; background:linear-gradient(180deg,#ffffff 0%,#fbfcff 100%) !important; color:rgba(8,17,31,.76) !important; box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 3px 10px rgba(8,17,31,.045) !important; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease, background .18s ease; } .vgh__hamburger:hover, .vgh-cart:hover, .vgh__account > a:hover{ transform:translateY(-1px); border-color:rgba(47,108,255,.22) !important; color:var(--vgh-blue) !important; box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 9px 20px rgba(47,108,255,.105) !important; } .vgh__hamburger svg, .vgh-cart svg{ width:18px !important; height:18px !important; opacity:1 !important; } /* Search bar: make it feel like a product surface */ .vgh__searchWrap{ gap:10px !important; } .vgh__search{ height:46px !important; border-radius:999px !important; border:1px solid rgba(8,17,31,.09) !important; background: linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(248,250,255,.98) 100%) !important; box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 8px 24px rgba(8,17,31,.045) !important; overflow:hidden !important; transition:border-color .18s ease, box-shadow .18s ease, background .18s ease; } .vgh__search:focus-within{ border-color:rgba(47,108,255,.36) !important; box-shadow: 0 1px 0 rgba(255,255,255,1) inset, 0 0 0 4px rgba(47,108,255,.10), 0 14px 32px rgba(47,108,255,.10) !important; background:#fff !important; } .vgh__searchInput{ height:46px !important; padding:0 16px !important; color:var(--vgh-ink) !important; font-size:15px !important; font-weight:500 !important; letter-spacing:-.01em !important; } .vgh__searchInput::placeholder{ color:rgba(8,17,31,.44) !important; opacity:1 !important; } .vgh__searchBtn{ width:40px !important; height:40px !important; min-width:40px !important; margin-right:3px !important; border-radius:999px !important; background:rgba(8,17,31,.045) !important; color:rgba(8,17,31,.72) !important; transition:background .18s ease, color .18s ease, transform .18s ease; } .vgh__searchBtn:hover{ background:var(--vgh-blue) !important; color:#fff !important; transform:scale(1.025); } /* ASK VAI: make this a signature Vendyl action */ .vgh__vai{ position:relative !important; overflow:hidden !important; height:44px !important; padding:0 17px 0 14px !important; border:1px solid rgba(47,108,255,.25) !important; border-radius:999px !important; background: radial-gradient(circle at 20% 0%,rgba(255,255,255,.32),transparent 32%), linear-gradient(135deg,#4f8cff 0%,#2f6cff 48%,#1557df 100%) !important; color:#fff !important; box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 10px 24px rgba(47,108,255,.24) !important; letter-spacing:.055em !important; transition:transform .18s ease, box-shadow .18s ease, filter .18s ease; } .vgh__vai::after{ content:""; position:absolute; top:-30%; left:-70%; width:48%; height:160%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.36),transparent); transform:rotate(18deg); transition:left .55s ease; pointer-events:none; } .vgh__vai:hover{ transform:translateY(-1px) !important; filter:saturate(1.05) !important; box-shadow: 0 1px 0 rgba(255,255,255,.32) inset, 0 16px 34px rgba(47,108,255,.32) !important; } .vgh__vai:hover::after{ left:130%; } .vgh__vaiIcon{ width:17px !important; height:17px !important; } .vgh__vaiIcon svg{ width:17px !important; height:17px !important; } /* Homepage nav links: Shopify-like soft pill hover */ .vgh__homeNav{ gap:4px !important; margin-left:4px !important; } .vgh__homeLink{ position:relative !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; min-height:38px !important; padding:0 12px !important; border:0 !important; border-radius:999px !important; color:rgba(8,17,31,.66) !important; font-size:14px !important; font-weight:650 !important; letter-spacing:-.01em !important; text-decoration:none !important; transition:background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease; } .vgh__homeLink:hover{ border-bottom-color:transparent !important; background:rgba(47,108,255,.075) !important; color:var(--vgh-blue) !important; transform:translateY(-1px); box-shadow:0 6px 16px rgba(47,108,255,.08); } /* Category button */ .vgh__catBtn{ height:44px !important; padding:0 16px !important; border-radius:999px !important; border:1px solid rgba(8,17,31,.09) !important; background:linear-gradient(180deg,#fff 0%,#fbfcff 100%) !important; color:rgba(8,17,31,.66) !important; font-size:14px !important; font-weight:650 !important; letter-spacing:-.01em !important; box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 6px 16px rgba(8,17,31,.045) !important; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease; } .vgh__catBtn:hover, .vgh-cat.is-open .vgh__catBtn{ transform:translateY(-1px); border-color:rgba(47,108,255,.24) !important; color:var(--vgh-blue) !important; box-shadow:0 1px 0 rgba(255,255,255,1) inset, 0 10px 24px rgba(47,108,255,.10) !important; } /* Desktop category sheet: more premium */ @media (min-width:901px){ .vgh-catBackdrop{ background:rgba(8,17,31,.36) !important; -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); } .vgh-catPanel{ width:min(460px,42vw) !important; padding:22px !important; background: linear-gradient(180deg,#ffffff 0%,#fbfcff 100%) !important; border-left:1px solid rgba(8,17,31,.08) !important; border-radius:24px 0 0 24px !important; box-shadow:-28px 0 70px rgba(8,17,31,.18) !important; } .vgh-catPanel::before{ content:"Browse categories"; display:block; margin:2px 0 14px; color:var(--vgh-ink); font-size:23px; font-weight:850; letter-spacing:-.045em; line-height:1.05; } .vgh-catSearch{ padding:0 0 14px !important; background:linear-gradient(180deg,#ffffff 0%,rgba(255,255,255,.94) 100%) !important; } .vgh-catSearch__input{ height:44px !important; border-radius:999px !important; border:1px solid rgba(8,17,31,.10) !important; background:#fff !important; box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 7px 18px rgba(8,17,31,.045) !important; } } /* Category hierarchy cards */ .vgh-catPanel .vgh-catlist.depth-0 > .vgh-cat__item{ border-top:0 !important; margin-top:7px !important; padding-top:7px !important; } .vgh-catPanel .vgh-catlist.depth-0 > .vgh-cat__item > .vgh-cat__link, .vgh-mcat__list .vgh-catlist.depth-0 > .vgh-cat__item > .vgh-cat__link{ border-radius:14px !important; background:rgba(8,17,31,.032) !important; padding:11px 12px !important; color:var(--vgh-ink) !important; } .vgh-catPanel .vgh-cat__link, .vgh-mcat__list .vgh-cat__link{ border-radius:12px !important; transition:background .16s ease, color .16s ease, transform .16s ease; } .vgh-catPanel .vgh-cat__link:hover, .vgh-mcat__list .vgh-cat__link:hover{ background:rgba(47,108,255,.075) !important; color:var(--vgh-blue) !important; transform:translateX(2px); } /* Account avatar/dropdown */ .vgh-acc__avatar{ width:38px !important; height:38px !important; border:2px solid #fff !important; box-shadow:0 0 0 1px rgba(8,17,31,.08), 0 8px 18px rgba(8,17,31,.08) !important; transition:transform .18s ease, box-shadow .18s ease; } .vgh-acc__btn:hover .vgh-acc__avatar{ transform:translateY(-1px); box-shadow:0 0 0 1px rgba(47,108,255,.22), 0 12px 24px rgba(47,108,255,.13) !important; } .vgh-accPanel{ top:calc(100% + 12px) !important; min-width:210px !important; padding:8px !important; border-radius:18px !important; border:1px solid rgba(8,17,31,.09) !important; background:rgba(255,255,255,.96) !important; -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); box-shadow:0 22px 55px rgba(8,17,31,.15) !important; } .vgh-accPanel a{ padding:11px 12px !important; border-radius:12px !important; color:rgba(8,17,31,.78) !important; font-weight:650 !important; transition:background .16s ease, color .16s ease, transform .16s ease; } .vgh-accPanel a:hover{ background:rgba(47,108,255,.075) !important; color:var(--vgh-blue) !important; transform:translateX(2px); } /* Cart badge */ .vgh-cart__badge{ top:-5px !important; right:-5px !important; min-width:19px !important; height:19px !important; background:linear-gradient(135deg,#2f6cff,#1557df) !important; border:2px solid #fff !important; box-shadow:0 6px 12px rgba(47,108,255,.26) !important; font-weight:800 !important; } /* Drawer + mobile sheets */ .vgh-drawer__backdrop, .vgh-mcat__backdrop, .vgh-macc__backdrop{ background:rgba(8,17,31,.38) !important; -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); } .vgh-drawer__panel{ padding:20px 16px !important; background:linear-gradient(180deg,#ffffff 0%,#fbfcff 100%) !important; border-right:1px solid rgba(8,17,31,.08) !important; border-radius:0 26px 26px 0 !important; box-shadow:28px 0 70px rgba(8,17,31,.18) !important; } .vgh-mcat__panel, .vgh-macc__panel{ padding:18px 16px !important; background:linear-gradient(180deg,#ffffff 0%,#fbfcff 100%) !important; border-left:1px solid rgba(8,17,31,.08) !important; border-radius:26px 0 0 26px !important; box-shadow:-28px 0 70px rgba(8,17,31,.18) !important; } .vgh-drawer__close, .vgh-mcat__close, .vgh-macc__close{ border:1px solid rgba(8,17,31,.09) !important; background:#fff !important; color:rgba(8,17,31,.72) !important; box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 6px 16px rgba(8,17,31,.06) !important; transition:transform .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease; } .vgh-drawer__close:hover, .vgh-mcat__close:hover, .vgh-macc__close:hover{ transform:translateY(-1px); color:var(--vgh-blue) !important; border-color:rgba(47,108,255,.22) !important; box-shadow:0 10px 22px rgba(47,108,255,.10) !important; } .vgh-drawer__link, .vgh-macc__link{ padding:13px 13px !important; border-radius:16px !important; border:1px solid rgba(8,17,31,.07) !important; background:#fff !important; color:rgba(8,17,31,.78) !important; font-weight:700 !important; box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 5px 14px rgba(8,17,31,.035) !important; transition:transform .16s ease, color .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease; } .vgh-drawer__link:hover, .vgh-macc__link:hover{ transform:translateX(2px); color:var(--vgh-blue) !important; border-color:rgba(47,108,255,.18) !important; background:rgba(47,108,255,.055) !important; box-shadow:0 8px 18px rgba(47,108,255,.08) !important; } .vgh-mcat__title, .vgh-macc__title{ color:var(--vgh-ink) !important; font-size:18px !important; font-weight:850 !important; letter-spacing:-.03em !important; } /* Cart drawer polish */ .vgh-cartdrawer__panel{ background:linear-gradient(180deg,#ffffff 0%,#fbfcff 100%) !important; border-left:1px solid rgba(8,17,31,.08) !important; box-shadow:-28px 0 70px rgba(8,17,31,.18) !important; } .vgh-cartdrawer .woocommerce-mini-cart-item{ border-bottom:1px solid rgba(8,17,31,.065) !important; } .vgh-cartdrawer .woocommerce-mini-cart__buttons a{ border-radius:999px !important; font-weight:800 !important; } .vgh-cartdrawer .woocommerce-mini-cart__buttons a.checkout{ background:linear-gradient(135deg,#2f6cff,#1557df) !important; box-shadow:0 12px 26px rgba(47,108,255,.22) !important; } /* Mobile refinement */ @media (max-width:900px){ .vgh__betaBar{ display:none !important; } .vgh__bar{ top:0 !important; background:rgba(255,255,255,.92) !important; -webkit-backdrop-filter:saturate(1.22) blur(16px); backdrop-filter:saturate(1.22) blur(16px); } body.admin-bar .vgh__bar{ top:46px !important; } .vgh__inner{ min-height:58px !important; padding:8px 12px !important; } .vgh__logoImg{ height:30px !important; max-height:30px !important; } .vgh__hamburger, .vgh-cart{ width:42px !important; height:42px !important; } .vgh__mobileRow{ padding:0 12px 10px !important; } .vgh__search{ height:44px !important; } .vgh__searchInput{ height:44px !important; font-size:14px !important; } .vgh__searchBtn{ width:38px !important; height:38px !important; } .vgh-drawer__panel{ width:min(380px,88vw) !important; } .vgh-mcat__panel, .vgh-macc__panel{ width:min(420px,92vw) !important; } .vgh-drawer__categoryWrap .vgh__catBtn{ border-radius:16px !important; box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 5px 14px rgba(8,17,31,.035) !important; } } /* Better keyboard accessibility */ .vgh a:focus-visible, .vgh button:focus-visible, .vgh input:focus-visible{ outline:0 !important; box-shadow:0 0 0 4px rgba(47,108,255,.16) !important; } /* Motion safety */ @media (prefers-reduced-motion:reduce){ .vgh *, .vgh *::before, .vgh *::after{ transition:none !important; animation:none !important; scroll-behavior:auto !important; } }
Beta

You may be interested in…

Your cart is currently empty!

New in store