@import url("https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;1,500;1,600;1,700&display=swap"); /* ================================================================ GOOD CHIPS — landing page shared styles Shared by every gc-* section. Each section's root element carries .gc-land, so the design tokens and resets below apply per section. ================================================================ */ .gc-landing-section { padding: 0 !important; margin: 0 !important; } .gc-land { --bg: #EAE7D7; --paper: #FFFDF6; --ink: #1C1C1C; --head: #121212; /* The flavor accent. Selecting a flavor in the hero sets --gc-accent on , which re-colours every accented element on the page at once: the primary buttons, the italic heading accents, the hero stars, the active flavor pill and the Drop / Standards band background. --gold is deliberately NOT part of this and stays constant across flavors. */ --teal: var(--gc-accent, #094D61); --gold: #E4BE62; --cream: #F1EBD9; --muted: #444444; --hair: rgba(23, 19, 16, 0.12); --card-border: rgba(92, 64, 28, 0.1); --shadow-soft: 0 2px 6px -3px rgba(64, 44, 20, 0.45), 0 10px 26px -16px rgba(64, 44, 20, 0.45); /* Family, weight and size come from the store's global theme settings (Customize > Typography), so the landing is managed from one place like any other section. theme-css-var always defines these, so the listed fallbacks only apply if this stylesheet is used outside the theme. To reproduce the original landing look, set the global title font to Playfair Display and the body font to Crimson Pro. */ --ff-head: var(--sort-title-font, "Playfair Display", Georgia, serif); --ff-body: var(--sort-body-font, "Crimson Pro", Georgia, serif); --gc-head-weight: var(--sort-title-font-weight, 600); --gc-body-weight: var(--sort-body-weight, 400); /* Display tracking and leading stay with the design. The global theme's defaults (1.2 leading, 0 tracking) are tuned for body copy and would visibly loosen these large display headings. */ --gc-head-tracking: -0.02em; --gc-head-leading: 1.04; /* Ring drawn around whatever the keyboard is focused on. Sections that sit on a dark band re-point it at --gold further down so it stays visible. */ --gc-focus: var(--teal); font-family: var(--ff-body); font-weight: var(--gc-body-weight); font-size: calc(16px * var(--gc-body-scale, 1)); line-height: 1.55; color: var(--ink); overflow-x: clip; /* Per-section background, driven by each section's settings. Falls back to the design's own background when the merchant leaves them empty. */ background-color: var(--gc-sec-bg, var(--bg)); background-image: var(--gc-sec-bg-image, none); background-position: var(--gc-sec-bg-position, center); background-size: var(--gc-sec-bg-size, cover); background-repeat: no-repeat; } .gc-land *, .gc-land *::before, .gc-land *::after { box-sizing: border-box; } .gc-land img { max-width: 100%; height: auto; display: block; } .gc-land h1, .gc-land h2, .gc-land h3 { margin: 0; font-family: var(--ff-head); color: var(--head); } .gc-land p { margin: 0; } .gc-land a { text-decoration: none; color: inherit; } .gc-land button { font-family: inherit; cursor: pointer; } /* Android/Chrome paints its own grey flash on tap, which fights the :active states defined at the bottom of this file. */ .gc-land a, .gc-land button, .gc-land summary, .gc-land [role="button"] { -webkit-tap-highlight-color: transparent; } html { scroll-behavior: smooth; } /* Hide the theme's default header / announcement bar / footer on this page */ body[data-page-type="index"] #shopline-section-announcement-bar, body[data-page-type="index"] #shopline-section-header, body[data-page-type="index"] #shopline-section-footer, body.gc-landing-active #shopline-section-announcement-bar, body.gc-landing-active #shopline-section-header, body.gc-landing-active #shopline-section-footer { display: none !important; } /* ---------- Shared bits ---------- */ .gc-eyebrow { display: inline-block; font-size: calc(11.8px * var(--gc-body-scale, 1)); letter-spacing: 3.1px; text-transform: uppercase; font-weight: 700; color: var(--teal); margin-bottom: 14px; } .gc-eyebrow.gold { color: var(--gold); } /* Spacing and content width come from each section's own settings (Layout & spacing in the customizer). The fallbacks are the design's original values, so a section whose settings were never saved renders unchanged. The mobile half of each pair is applied in the responsive block near the bottom. */ .gc-sec { padding: var(--gc-pt, 90px) var(--gc-gutter, 24px) var(--gc-pb, 90px); } .gc-sec-head { max-width: var(--gc-content-width, 1160px); margin: 0 auto 44px; } .gc-sec-head.center { text-align: center; } .gc-sec-head h2, .gc-club-copy h2, .gc-drop-copy h2, .gc-founder-copy h2 { font-size: calc(clamp(34px, 4.6vw, 56px) * var(--gc-type-scale, 1)); font-weight: var(--gc-head-weight); line-height: var(--gc-head-leading); letter-spacing: var(--gc-head-tracking); } .gc-sec-head h2 em, .gc-club-copy h2 em, .gc-drop-copy h2 em, .gc-founder-copy h2 em, .gc-final h2 em { font-style: italic; color: var(--teal); } .gc-sec-head > p { margin-top: 14px; font-size: calc(18px * var(--gc-body-scale, 1)); color: var(--muted); } .gc-btn { display: inline-flex; align-items: center; gap: 10px; position: relative; overflow: hidden; border-radius: 999px; padding: 17px 34px; font-size: calc(17px * var(--gc-body-scale, 1)); font-weight: 700; letter-spacing: 0.4px; transition: transform 0.25s ease, box-shadow 0.25s ease; } .gc-land .gc-btn-primary { background: var(--teal); color: #FAFAFA; box-shadow: 0 14px 30px -12px var(--teal); } .gc-btn .arr { transition: transform 0.25s ease; } .gc-btn .sheen { position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.22), transparent); animation: gcSheen 3.4s ease-in-out infinite; } @keyframes gcSheen { 0%, 55% { left: -80%; } 75%, 100% { left: 130%; } } /* Reveal on scroll */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .gc-btn .sheen, .gc-track, .wobble { animation: none !important; } } /* ---------- Topbar ---------- */ .gc-topbar { background: #121212; color: rgba(255, 255, 255, 0.92); text-align: center; font-size: calc(12px * var(--gc-body-scale, 1)); font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; padding: var(--gc-pt, 8px) var(--gc-gutter, 16px) var(--gc-pb, 8px); } .gc-topbar a { color: var(--gold); font-weight: 700; text-underline-offset: 3px; } /* ---------- Nav ---------- */ /* Fixed rather than sticky: the nav now lives in its own section wrapper, which is only nav-height tall, so position:sticky would have nothing to stick within. gc-nav.js sets `top` each frame to reproduce sticky behaviour (sits in natural position, then pins to 0 once scrolled past). .gc-nav-spacer holds the nav's height in normal flow so nothing jumps. */ .gc-nav { position: fixed; left: 0; right: 0; top: 0; z-index: 60; background: var(--bg); transition: box-shadow 0.3s ease, background 0.3s ease; } .gc-nav-spacer { height: var(--gc-nav-height, 60px); } .gc-nav.scrolled { background: #EFECDF; box-shadow: 0 6px 24px -14px rgba(23, 19, 16, 0.35); } .gc-nav-inner { max-width: var(--gc-content-width, 1480px); margin: 0 auto; padding: var(--gc-pt, 10px) var(--gc-gutter, 24px) var(--gc-pb, 10px); display: flex; align-items: center; justify-content: space-between; } .gc-logo img { width: 72px; height: 40px; object-fit: contain; } .gc-nav-actions { display: flex; align-items: center; gap: 14px; } /* Scoped `.gc-land .gc-cart` rather than a bare `.gc-cart`: base/index.css colours every link through `a:not(.button)`, which at (0,2,0) outranks a one-class rule and would leave the cart glyph on the global link colour instead of --ink. Two classes puts this back in front of it. */ .gc-land .gc-cart { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--paper); color: var(--ink); box-shadow: var(--shadow-soft); } .gc-cart-badge { position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; border-radius: 999px; background: var(--teal); color: #fff; font-size: calc(10px * var(--gc-body-scale, 1)); font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px; } .gc-land .gc-nav-cta { background: #121212; color: #fff; border-radius: 999px; padding: 11px 22px; font-size: calc(14.5px * var(--gc-body-scale, 1)); font-weight: 700; letter-spacing: 0.4px; transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } /* ---------- Hero ---------- */ .gc-hero { position: relative; padding: var(--gc-pt, 60px) var(--gc-gutter, 24px) var(--gc-pb, 84px); overflow: clip; } .gc-hero-deco { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; } .gc-deco-1 { width: 480px; height: 480px; right: -120px; top: -100px; background: rgba(9, 77, 97, 0.1); } .gc-deco-2 { width: 420px; height: 420px; left: -140px; bottom: -160px; background: rgba(228, 190, 98, 0.16); } .gc-hero-grid { position: relative; max-width: var(--gc-content-width, 1160px); margin: 0 auto; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; } .gc-hero h1 { font-size: calc(clamp(48px, 6.5vw, 90px) * var(--gc-type-scale, 1)); font-weight: var(--gc-head-weight); line-height: calc(var(--gc-head-leading) * 0.914); letter-spacing: var(--gc-head-tracking); } .gc-hero h1 .gw, .gc-final h2 .gw { font-style: italic; } .gc-hero h1 em { font-style: italic; color: var(--teal); } .gc-hero-sub { margin: 22px 0 30px; font-size: calc(19px * var(--gc-body-scale, 1)); color: var(--muted); max-width: 42ch; } .gc-proof { display: flex; align-items: center; gap: 10px; margin-top: 22px; font-size: calc(15px * var(--gc-body-scale, 1)); color: var(--muted); } .gc-proof b { color: var(--ink); } .gc-stars i { font-style: normal; color: var(--teal); font-size: calc(14px * var(--gc-body-scale, 1)); letter-spacing: 2px; } .gc-flavor-tabs { display: flex; gap: 10px; margin-top: 30px; flex-wrap: wrap; } .gc-flavor-tab { border-radius: 999px; padding: 10px 19px; font-size: calc(14.5px * var(--gc-body-scale, 1)); font-weight: 700; background: var(--paper); color: var(--ink); border: 1px solid rgba(23, 19, 16, 0.18); transition: all 0.25s ease; } .gc-flavor-tab.active { background: var(--teal); color: #FAFAFA; border-color: var(--teal); } /* Bag stage */ .gc-bag-stage { position: relative; display: flex; flex-direction: column; align-items: center; } .gc-bag-halo { position: absolute; top: 50%; left: 50%; width: calc(var(--gc-bag-w, 330px) * 1.15); aspect-ratio: 1; transform: translate(-50%, -55%); background: radial-gradient(circle, rgba(255, 253, 246, 0.9), rgba(255, 253, 246, 0) 70%); border-radius: 50%; pointer-events: none; } /* Sized from the section's "Bag size" setting but never wider than the column, so the bag shrinks with the viewport instead of pushing the page sideways on narrow phones. The 330 / 473 ratio is the artwork's own. */ .gc-bag-flip { position: relative; width: min(var(--gc-bag-w, 330px), 100%); aspect-ratio: 330 / 473; perspective: 1400px; cursor: pointer; outline-offset: 6px; } .gc-bag-front, .gc-bag-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform 0.7s cubic-bezier(0.4, 0.1, 0.2, 1), opacity 0s linear 0.35s; transform-style: preserve-3d; } /* Opacity gating is a backstop for a mobile-Safari bug: when a 3D-transformed face contains an overflow:auto child (.gc-nutri-scroll), the browser flattens the layer and drops backface-visibility, letting the back face show through MIRRORED on load. Hiding the inactive face with opacity keeps the reversed side invisible regardless. The 0.35s opacity delay flips it exactly at the card's edge-on midpoint, so the swap is invisible and never flashes mirrored. */ .gc-bag-front { transform: rotateY(0deg); opacity: 1; } .gc-bag-back { transform: rotateY(180deg); opacity: 0; } .gc-bag-flip.flipped .gc-bag-front { transform: rotateY(-180deg); opacity: 0; } .gc-bag-flip.flipped .gc-bag-back { transform: rotateY(0deg); opacity: 1; } .gc-bag-img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(23, 19, 16, 0.3)); } .gc-bag-flip.wobble .gc-bag-front { animation: gcWobble 0.9s ease 1; } @keyframes gcWobble { 0% { transform: rotateY(0) rotate(0); } 25% { transform: rotateY(0) rotate(-2.2deg); } 55% { transform: rotateY(0) rotate(1.8deg); } 80% { transform: rotateY(0) rotate(-0.8deg); } 100% { transform: rotateY(0) rotate(0); } } .gc-bag-back { background: #1C1C1C; border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 30px 40px -20px rgba(23, 19, 16, 0.5); } .gc-bag-hint { color: var(--cream); font-size: calc(13px * var(--gc-body-scale, 1)); text-align: center; letter-spacing: 0.5px; } .gc-nutri-scroll { flex: 1; overflow: auto; border-radius: 10px; background: var(--paper); } .gc-nutri-scroll img { width: 100%; } .gc-bag-cue { margin-top: 18px; font-size: calc(13.5px * var(--gc-body-scale, 1)); font-style: italic; color: rgba(28, 28, 28, 0.65); } /* ---------- Props strip ---------- */ .gc-props { background: #1C1C1C; } .gc-props-inner { max-width: var(--gc-content-width, 1160px); margin: 0 auto; padding: var(--gc-pt, 15px) var(--gc-gutter, 24px) var(--gc-pb, 15px); display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 34px; color: var(--cream); font-size: calc(14.5px * var(--gc-body-scale, 1)); letter-spacing: 0.4px; } .gc-props .tick, .gc-checklist .tick { font-style: normal; color: var(--gold); font-weight: 700; margin-right: 4px; } /* ---------- Builder ---------- */ #builder .gc-sec-head { text-align: left; } .gc-builder-shell { max-width: var(--gc-content-width, 1160px); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) var(--gc-sidebar-w, 420px); gap: 36px; align-items: start; } .gc-pickers { display: flex; flex-direction: column; gap: 16px; } .gc-picker { display: flex; align-items: center; gap: 16px; background: var(--paper); border: 1px solid var(--card-border); border-radius: 18px; padding: 18px 21px; box-shadow: var(--shadow-soft); transition: transform 0.25s ease, box-shadow 0.25s ease; } .gc-picker .num { font-size: calc(12px * var(--gc-body-scale, 1)); color: rgba(28, 28, 28, 0.4); font-weight: 600; } .gc-picker .p-chip { width: 52px; height: 70px; background-size: contain; background-repeat: no-repeat; background-position: center; filter: drop-shadow(0 6px 8px rgba(23, 19, 16, 0.25)); flex: none; } .gc-picker .p-info { flex: 1; min-width: 0; } .gc-picker h3 { font-size: calc(23px * var(--gc-body-scale, 1)); font-weight: 600; } .gc-picker .p-notes { font-size: calc(11px * var(--gc-body-scale, 1)); letter-spacing: 2.2px; text-transform: uppercase; color: rgba(28, 28, 28, 0.55); margin-top: 3px; } .gc-stepper { display: flex; align-items: center; gap: 12px; } .gc-stepper button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(23, 19, 16, 0.25); background: transparent; color: var(--ink); font-size: calc(18px * var(--gc-body-scale, 1)); line-height: 1; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; } .gc-stepper button:disabled { opacity: 0.3; cursor: default; } .gc-stepper .count { font-family: var(--ff-head); font-size: calc(23px * var(--gc-body-scale, 1)); min-width: 26px; text-align: center; color: var(--pc, var(--ink)); font-weight: 600; } /* Box card */ .gc-box-card { position: sticky; top: 84px; background: #1C1C1C; color: var(--cream); border-radius: 22px; padding: 26px 24px; } .gc-box-card .bc-head { display: flex; align-items: center; justify-content: space-between; } .gc-box-card h3 { color: var(--cream); font-size: calc(26px * var(--gc-type-scale, 1)); font-weight: 600; } .bc-counter { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(241, 235, 217, 0.35); display: flex; align-items: center; justify-content: center; font-size: calc(13px * var(--gc-body-scale, 1)); font-weight: 700; transition: all 0.3s ease; } .bc-counter.full { border-color: var(--gold); color: var(--gold); } .bc-sub { margin-top: 6px; font-size: calc(14.5px * var(--gc-body-scale, 1)); color: rgba(241, 235, 217, 0.65); } .gc-slots { display: grid; grid-template-columns: repeat(var(--gc-slot-cols, 3), minmax(0, 1fr)); gap: 10px; margin: 18px 0; } .gc-slots .slot { aspect-ratio: 3 / 4; border: 1.5px dashed rgba(241, 235, 217, 0.28); border-radius: 10px; background-size: 70%; background-repeat: no-repeat; background-position: center; transition: all 0.25s ease; } .gc-slots .slot.filled { border-style: solid; border-color: var(--sc, var(--gold)); background-color: rgba(241, 235, 217, 0.06); } .gc-trifecta { width: 100%; border-radius: 999px; border: 1px solid rgba(241, 235, 217, 0.35); background: transparent; color: var(--cream); font-size: calc(14.5px * var(--gc-body-scale, 1)); font-weight: 600; padding: 11px; transition: all 0.2s ease; } .gc-plan-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: rgba(241, 235, 217, 0.07); border: 1px solid rgba(241, 235, 217, 0.18); border-radius: 999px; padding: 4px; margin: 14px 0; } .gc-plan-toggle .plan { border: 0; border-radius: 999px; background: transparent; color: rgba(241, 235, 217, 0.7); font-size: calc(13.5px * var(--gc-body-scale, 1)); font-weight: 700; padding: 9px 6px; transition: all 0.2s ease; } .gc-plan-toggle .plan.sel { background: var(--gold); color: #1C1C1C; } .gc-tiers { display: flex; flex-direction: column; gap: 12px; } .gc-tier { position: relative; width: 100%; text-align: left; background: rgba(241, 235, 217, 0.03); border: 1px solid rgba(241, 235, 217, 0.22); border-radius: 14px; color: var(--cream); padding: 14px 14px 12px; transition: all 0.2s ease; } .gc-tier.sel { border-color: var(--gold); background: rgba(228, 190, 98, 0.08); } .gc-tier .t-badge { position: absolute; top: -9px; right: 14px; background: var(--gold); color: #1C1C1C; font-size: calc(10px * var(--gc-body-scale, 1)); font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; border-radius: 999px; padding: 3px 10px; } .gc-tier .t-top { display: flex; align-items: flex-start; gap: 10px; } .gc-tier .radio { flex: none; width: 16px; height: 16px; margin-top: 3px; border-radius: 50%; border: 1.5px solid rgba(241, 235, 217, 0.5); transition: all 0.2s ease; } .gc-tier.sel .radio { border-color: var(--gold); box-shadow: inset 0 0 0 4px var(--gold); } .gc-tier .t-label { flex: 1; line-height: 1.3; } .gc-tier .t-name { font-size: calc(16.5px * var(--gc-body-scale, 1)); font-weight: 700; } .gc-tier .t-bags { font-size: calc(12.5px * var(--gc-body-scale, 1)); color: rgba(241, 235, 217, 0.6); } .gc-tier .t-price { text-align: right; line-height: 1.25; } .gc-tier .t-price b { font-size: calc(17px * var(--gc-body-scale, 1)); } .gc-tier .t-price small { display: block; font-size: calc(11px * var(--gc-body-scale, 1)); color: rgba(241, 235, 217, 0.55); } .gc-tier .t-price small.free { color: var(--gold); font-weight: 700; } .gc-tier .t-rows { list-style: none; margin: 10px 0 0; padding: 0 0 0 26px; } .gc-tier .t-rows li { font-size: calc(12.5px * var(--gc-body-scale, 1)); color: rgba(241, 235, 217, 0.65); padding: 1.5px 0; } .gc-tier .t-rows li::before { content: "\2713\00a0"; color: var(--gold); } .gc-land.plan-once .gc-tier .t-rows, .gc-land.plan-once .gc-summary .s-perks { visibility: hidden; } .gc-land.plan-once .gc-tier .t-rows { display: none; } .gc-summary { display: flex; align-items: flex-end; justify-content: space-between; margin: 16px 2px 12px; } .gc-summary .s-perks { font-size: calc(10.5px * var(--gc-body-scale, 1)); letter-spacing: 2px; text-transform: uppercase; color: var(--gold); font-weight: 700; } .gc-summary .s-price { text-align: right; line-height: 1.3; } .gc-summary .s-price b { font-size: calc(22px * var(--gc-body-scale, 1)); font-family: var(--ff-head); } .gc-summary .s-price small { display: block; font-size: calc(11.5px * var(--gc-body-scale, 1)); color: rgba(241, 235, 217, 0.6); } .gc-land .gc-box-cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: var(--gold); color: #1C1C1C; border-radius: 999px; font-size: calc(16.5px * var(--gc-body-scale, 1)); font-weight: 800; padding: 15px; transition: transform 0.2s ease, opacity 0.2s ease; } .gc-box-cta.dim { opacity: 0.55; } .gc-shipbar { margin-top: 16px; } .gc-shipbar .track { position: relative; height: 4px; border-radius: 999px; background: rgba(241, 235, 217, 0.2); margin: 14px 8px 10px; } .gc-shipbar .fill { height: 100%; width: 100%; border-radius: 999px; background: var(--gold); transition: width 0.5s ease; } .gc-shipbar .truck { position: absolute; top: -11px; left: 100%; transform: translateX(-100%); font-size: calc(15px * var(--gc-body-scale, 1)); transition: left 0.5s ease; } .gc-shipbar .ship-msg { text-align: center; font-size: calc(14px * var(--gc-body-scale, 1)); font-weight: 700; } .gc-shipbar .ship-sub { text-align: center; font-size: calc(12px * var(--gc-body-scale, 1)); color: rgba(241, 235, 217, 0.55); margin-top: 3px; } .gc-shipbar .ship-proof { text-align: center; font-size: calc(12px * var(--gc-body-scale, 1)); color: rgba(241, 235, 217, 0.6); margin-top: 10px; } .gc-shipbar .ship-proof .gold { color: var(--gold); letter-spacing: 1.5px; } /* ---------- Club ---------- */ /* Padding for the dark and teal bands now rides on --gc-pt / --gc-pb like every other section, so the customizer's spacing controls reach them too. Their design defaults (110px) live in the sections' own schema defaults. */ .gc-dark { background: #1C1C1C; color: var(--cream); --gc-focus: var(--gold); } .gc-club-grid { max-width: var(--gc-content-width, 1160px); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 60px; align-items: center; } .gc-club-card-wrap { display: flex; justify-content: center; } .gc-club-card { width: min(380px, 100%); aspect-ratio: 1.586; background: linear-gradient(135deg, #26211A, #191612 70%); border: 1px solid rgba(228, 190, 98, 0.5); border-radius: 18px; padding: 24px 26px; display: flex; flex-direction: column; transform: rotate(-5deg); box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.8), 0 0 50px -20px rgba(228, 190, 98, 0.25); } .cc-top { display: flex; justify-content: space-between; align-items: flex-start; } .cc-logo { font-family: var(--ff-head); font-weight: 700; font-size: calc(19px * var(--gc-body-scale, 1)); letter-spacing: 1px; color: var(--gold); line-height: 1.1; } .cc-chip { width: 38px; height: 28px; border-radius: 6px; background: linear-gradient(135deg, #E4BE62, #A8823B); opacity: 0.9; } .cc-name { margin-top: auto; font-family: var(--ff-head); font-style: italic; font-size: calc(23px * var(--gc-body-scale, 1)); color: var(--gold); } .cc-row { display: flex; justify-content: space-between; margin-top: 14px; font-size: calc(10px * var(--gc-body-scale, 1)); letter-spacing: 2px; text-transform: uppercase; color: rgba(228, 190, 98, 0.7); } .gc-club-copy h2 { color: var(--cream); } .gc-club-copy h2 em { color: var(--gold); } .gc-club-copy .lead { margin-top: 18px; font-size: calc(18px * var(--gc-body-scale, 1)); color: rgba(241, 235, 217, 0.85); } .gc-checklist { list-style: none; margin: 24px 0 0; padding: 0; } .gc-checklist li { display: flex; gap: 10px; padding: 6px 0; font-size: calc(16.5px * var(--gc-body-scale, 1)); color: rgba(241, 235, 217, 0.85); } .gc-checklist b { color: var(--cream); } .gc-club-copy .footnote { margin-top: 20px; font-style: italic; font-size: calc(14.5px * var(--gc-body-scale, 1)); color: rgba(241, 235, 217, 0.55); } /* ---------- Drop ---------- */ .gc-teal { background: var(--teal); color: #FAFAFA; --gc-focus: var(--gold); } .gc-teal h2 { color: #FAFAFA; } .gc-teal h2 em { color: var(--gold); } .gc-drop-grid { max-width: var(--gc-content-width, 1160px); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 60px; align-items: center; } .gc-drop-copy p { margin-top: 18px; font-size: calc(17.5px * var(--gc-body-scale, 1)); color: rgba(250, 250, 250, 0.85); max-width: 54ch; } .gc-drop-list { list-style: none; margin: 22px 0 0; padding: 0; } .gc-drop-list li { padding: 4px 0; font-size: calc(16px * var(--gc-body-scale, 1)); color: rgba(250, 250, 250, 0.85); } .gc-drop-list li::before { content: "\2022\00a0\00a0"; color: var(--gold); font-weight: 700; } .gc-drop-card-wrap { display: flex; justify-content: center; } .gc-drop-card { width: min(300px, 100%); background: linear-gradient(160deg, #0B3E4E, #072F3C); border: 1px solid rgba(228, 190, 98, 0.45); border-radius: 14px; text-align: center; padding: 34px 0 26px; transform: rotate(2deg); box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.55); } .dc-logo { font-family: var(--ff-head); font-weight: 700; font-size: calc(22px * var(--gc-body-scale, 1)); letter-spacing: 2px; color: var(--cream); line-height: 1.15; } .dc-band { margin: 22px 0 0; background: rgba(228, 190, 98, 0.85); color: #1C1C1C; font-size: calc(12.5px * var(--gc-body-scale, 1)); font-weight: 800; letter-spacing: 3.5px; text-transform: uppercase; padding: 8px 0; } .dc-q { font-family: var(--ff-head); font-size: calc(64px * var(--gc-type-scale, 1)); color: var(--gold); margin: 26px 0; } .dc-foot { font-size: calc(9.5px * var(--gc-body-scale, 1)); letter-spacing: 2px; text-transform: uppercase; color: rgba(241, 235, 217, 0.6); padding: 0 24px; } /* ---------- Good cards ---------- */ .gc-good .gc-sec-head > p { color: rgba(250, 250, 250, 0.8); } .gc-good-cards { max-width: var(--gc-content-width, 1160px); margin: 0 auto; display: grid; grid-template-columns: repeat(var(--gc-cols, 3), minmax(0, 1fr)); gap: 22px; } .g-card { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 16px; padding: 26px 24px; } .g-card .gk { font-family: var(--ff-head); font-style: italic; font-size: calc(24px * var(--gc-type-scale, 1)); color: #EFE3BE; margin-bottom: 10px; } .g-card p { font-size: calc(15.5px * var(--gc-body-scale, 1)); color: rgba(250, 250, 250, 0.78); } /* ---------- Marquee ---------- */ .gc-marquee { overflow: hidden; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding: var(--gc-pt, 14px) var(--gc-gutter, 0px) var(--gc-pb, 14px); white-space: nowrap; } .gc-track { display: inline-flex; align-items: center; gap: 28px; animation: gcMarquee var(--gc-marquee-speed, 24s) linear infinite; will-change: transform; } .gc-track span, .gc-track b { font-family: var(--ff-head); font-size: calc(27px * var(--gc-type-scale, 1) * var(--gc-marquee-mult, 1)); letter-spacing: 1.4px; font-weight: 700; } .gc-track span { color: transparent; -webkit-text-stroke: 1px rgba(9, 77, 97, 0.75); } .gc-track b { color: var(--teal); } .gc-track b.fill-i { font-style: italic; } @keyframes gcMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---------- Reviews ---------- */ #reviews .gc-sec-head h2 .shout { font-style: italic; color: var(--teal); } .gc-reviews { max-width: var(--gc-content-width, 1160px); margin: 0 auto; display: grid; grid-template-columns: repeat(var(--gc-cols, 3), minmax(0, 1fr)); gap: 26px; align-items: start; } .r-card { margin: 0; background: var(--paper); border: 1px solid var(--card-border); border-radius: 14px; padding: 26px 24px 22px; box-shadow: var(--shadow-soft); } /* Tilt cycles every three cards, so any number of reviews stays scattered. */ .gc-reviews .r-card:nth-child(3n + 1) { transform: rotate(-1.6deg); } .gc-reviews .r-card:nth-child(3n + 2) { transform: rotate(1.2deg) translateY(14px); } .gc-reviews .r-card:nth-child(3n + 3) { transform: rotate(-0.8deg) translateY(4px); } .r-stars { color: var(--teal); letter-spacing: 3px; font-size: calc(14px * var(--gc-body-scale, 1)); margin-bottom: 12px; } .r-card blockquote { margin: 0 0 14px; font-size: calc(16.5px * var(--gc-body-scale, 1)); line-height: 1.5; } .r-card figcaption { font-size: calc(14px * var(--gc-body-scale, 1)); } .r-card figcaption b { font-weight: 700; } .r-card figcaption span { color: rgba(28, 28, 28, 0.55); } /* ---------- Founder ---------- */ .gc-founder-grid { max-width: var(--gc-content-width, 1160px); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 60px; align-items: center; } .gc-polaroid-wrap { display: flex; justify-content: center; } .gc-polaroid { background: var(--paper); padding: 14px 14px 16px; border-radius: 4px; box-shadow: 0 3px 8px -4px rgba(64, 44, 20, 0.45), 0 18px 40px -20px rgba(64, 44, 20, 0.45); transform: rotate(-3deg); max-width: 390px; } .gc-polaroid img { border-radius: 2px; } .gc-polaroid .p-caption { margin-top: 12px; font-family: var(--ff-head); font-style: italic; font-size: calc(15.5px * var(--gc-body-scale, 1)); text-align: center; color: rgba(28, 28, 28, 0.8); } .gc-founder-copy .lead { margin-top: 16px; font-size: calc(18px * var(--gc-body-scale, 1)); color: var(--muted); } .gc-founder-copy .quote { margin-top: 18px; font-size: calc(17px * var(--gc-body-scale, 1)); line-height: 1.6; max-width: 56ch; } .gc-founder-copy .sig { margin-top: 16px; font-family: var(--ff-head); font-style: italic; font-size: calc(17px * var(--gc-body-scale, 1)); } /* ---------- FAQ ---------- */ .gc-faq { max-width: var(--gc-faq-width, 640px); margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .gc-faq details { background: #F2EDDC; border: 1px solid rgba(23, 19, 16, 0.08); border-radius: 12px; padding: 0 22px; } .gc-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; padding: 18px 0; font-size: calc(15.5px * var(--gc-body-scale, 1)); font-weight: 700; } .gc-faq summary::-webkit-details-marker { display: none; } .gc-faq .pl { color: var(--teal); font-size: calc(19px * var(--gc-body-scale, 1)); font-weight: 400; transition: transform 0.3s ease; } .gc-faq details[open] .pl { transform: rotate(45deg); } .gc-faq details p { padding: 0 0 18px; font-size: calc(15.5px * var(--gc-body-scale, 1)); color: var(--muted); } /* ---------- Final CTA ---------- */ .gc-final { text-align: center; } .gc-final h2 { font-size: calc(clamp(40px, 5.6vw, 72px) * var(--gc-type-scale, 1)); font-weight: var(--gc-head-weight); line-height: calc(var(--gc-head-leading) * 0.98); letter-spacing: var(--gc-head-tracking); } .gc-final .gc-btn { margin-top: 36px; } /* ---------- Footer ---------- */ .gc-footer { background: #1C1C1C; color: rgba(248, 242, 228, 0.6); --gc-focus: var(--gold); } .gc-footer-inner { max-width: var(--gc-content-width, 1480px); margin: 0 auto; padding: var(--gc-pt, 30px) var(--gc-gutter, 24px) var(--gc-pb, 26px); } .gc-footer .f-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .gc-footer .f-top img { width: 192px; max-width: 100%; height: auto; aspect-ratio: 8; object-fit: contain; } .gc-footer .f-tag { font-family: var(--ff-head); font-style: italic; font-size: calc(15.5px * var(--gc-body-scale, 1)); color: rgba(248, 242, 228, 0.85); } .gc-footer hr { border: 0; border-top: 1px solid rgba(248, 242, 228, 0.15); margin: 20px 0 16px; } .gc-footer .f-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: calc(13.5px * var(--gc-body-scale, 1)); } .gc-footer .f-pay { display: flex; gap: 6px; } .gc-footer .f-pay span { border: 1px solid rgba(248, 242, 228, 0.25); border-radius: 4px; font-size: calc(9.5px * var(--gc-body-scale, 1)); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 3px 7px; } /* ================================================================ RESPONSIVE Breakpoints, largest to smallest: > 1024px desktop <= 1200px narrow laptop — the builder's two columns get tight <= 1024px tablet — builder stacks <= 880px stacked — every two-column band becomes one <= 749px mobile — mobile spacing / type / column settings apply <= 560px small phone <= 430px narrow phone short + landscape — phones held sideways 750px and 1025px are the same edges the customizer's "hide on tablet" / "hide on desktop" switches and the mobile type scale in gc-theme-vars use. ================================================================ */ /* ---------- Visibility (customizer switches) ---------- */ @media (max-width: 749px) { .gc-land.gc-hide-mobile { display: none !important; } } @media (min-width: 750px) and (max-width: 1024px) { .gc-land.gc-hide-tablet { display: none !important; } } @media (min-width: 1025px) { .gc-land.gc-hide-desktop { display: none !important; } } /* ---------- Narrow laptop ---------- */ @media (max-width: 1200px) { .gc-builder-shell { gap: 28px; } .gc-club-grid, .gc-drop-grid, .gc-founder-grid { gap: 44px; } } /* ---------- Tablet ---------- */ @media (max-width: 1024px) { .gc-builder-shell { grid-template-columns: minmax(0, 1fr); } .gc-box-card { position: static; max-width: 480px; margin-inline: auto; } .gc-good-cards, .gc-reviews { grid-template-columns: repeat(var(--gc-cols-t, 2), minmax(0, 1fr)); } .gc-hero-grid { gap: 32px; } } /* ---------- Everything stacks ---------- */ @media (max-width: 880px) { .gc-hero-grid, .gc-club-grid, .gc-drop-grid, .gc-founder-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; } /* Which side of the copy the section's image / card lands on once stacked, from each section's "position on mobile" setting. */ .gc-mm-above .gc-bag-stage, .gc-mm-above .gc-club-card-wrap, .gc-mm-above .gc-drop-card-wrap, .gc-mm-above .gc-polaroid-wrap { order: -1; } .gc-mm-below .gc-bag-stage, .gc-mm-below .gc-club-card-wrap, .gc-mm-below .gc-drop-card-wrap, .gc-mm-below .gc-polaroid-wrap { order: 1; } /* Scattered tilts read as sloppy once the cards are in a single column. */ .gc-reviews .r-card:nth-child(n) { transform: none; } .gc-club-card { transform: rotate(-2deg); } .gc-drop-card { transform: rotate(1deg); } .gc-polaroid { transform: rotate(-2deg); } .gc-nav-cta { padding: 10px 16px; font-size: calc(13px * var(--gc-body-scale, 1)); } .gc-topbar { font-size: calc(10.5px * var(--gc-body-scale, 1)); letter-spacing: 1px; } /* Big blurred blobs cost real paint time on phones for very little effect. */ .gc-deco-1 { width: 320px; height: 320px; right: -90px; top: -70px; } .gc-deco-2 { width: 280px; height: 280px; left: -100px; bottom: -110px; } } /* ---------- Mobile ---------- */ @media (max-width: 749px) { /* The mobile half of every section's spacing settings takes over. */ .gc-sec { padding: var(--gc-pt-m, 64px) var(--gc-gutter-m, 20px) var(--gc-pb-m, 64px); } .gc-hero { padding: var(--gc-pt-m, 36px) var(--gc-gutter-m, 20px) var(--gc-pb-m, 60px); } .gc-topbar { padding: var(--gc-pt-m, 8px) var(--gc-gutter-m, 14px) var(--gc-pb-m, 8px); } .gc-nav-inner { padding: var(--gc-pt-m, 8px) var(--gc-gutter-m, 16px) var(--gc-pb-m, 8px); } .gc-props-inner { padding: var(--gc-pt-m, 14px) var(--gc-gutter-m, 18px) var(--gc-pb-m, 14px); } .gc-marquee { padding: var(--gc-pt-m, 12px) var(--gc-gutter-m, 0px) var(--gc-pb-m, 12px); } .gc-footer-inner { padding: var(--gc-pt-m, 26px) var(--gc-gutter-m, 18px) var(--gc-pb-m, 24px); } .gc-good-cards, .gc-reviews { grid-template-columns: repeat(var(--gc-cols-m, 1), minmax(0, 1fr)); } .gc-slots { grid-template-columns: repeat(var(--gc-slot-cols-m, 3), minmax(0, 1fr)); } .gc-bag-flip { width: min(var(--gc-bag-w-m, 260px), 100%); } .gc-bag-halo { width: calc(var(--gc-bag-w-m, 260px) * 1.15); } .gc-track span, .gc-track b { --gc-marquee-mult: calc(var(--gc-marquee-scale-m, 78) / 100); } /* Display type is set for desktop widths; on a phone the clamp floors are still too tall to sit comfortably, so lower them and let vw do the work. */ .gc-hero h1 { font-size: calc(clamp(34px, 9.4vw, 56px) * var(--gc-type-scale, 1)); } .gc-final h2 { font-size: calc(clamp(30px, 8.4vw, 48px) * var(--gc-type-scale, 1)); } .gc-sec-head h2, .gc-club-copy h2, .gc-drop-copy h2, .gc-founder-copy h2 { font-size: calc(clamp(27px, 7.4vw, 40px) * var(--gc-type-scale, 1)); } .dc-q { font-size: calc(52px * var(--gc-type-scale, 1)); margin: 20px 0; } .gc-sec-head { margin-bottom: 32px; } .gc-hero-sub { margin: 18px 0 24px; } .gc-hero-grid, .gc-club-grid, .gc-drop-grid, .gc-founder-grid { gap: 34px; } /* Touch targets. 34px controls are fine with a mouse but under the ~44px that fingers reliably hit. */ .gc-stepper button { width: 40px; height: 40px; } .gc-cart { width: 44px; height: 44px; } .gc-faq summary { padding: 16px 0; min-height: 48px; } .gc-btn { padding: 15px 28px; } /* "Text alignment on mobile" setting. */ .gc-ma-center .gc-hero-copy, .gc-ma-center .gc-sec-head, .gc-ma-center .gc-club-copy, .gc-ma-center .gc-drop-copy, .gc-ma-center .gc-founder-copy, .gc-ma-center .f-top, .gc-ma-center .f-bottom { text-align: center; } .gc-ma-center .gc-hero-sub, .gc-ma-center .gc-drop-copy p, .gc-ma-center .gc-founder-copy .quote { margin-left: auto; margin-right: auto; } .gc-ma-center .gc-proof, .gc-ma-center .gc-flavor-tabs, .gc-ma-center .f-top, .gc-ma-center .f-bottom, .gc-ma-center .gc-props-inner { justify-content: center; } .gc-ma-center .gc-checklist li, .gc-ma-center .gc-drop-list li { justify-content: center; } .gc-ma-left .gc-hero-copy, .gc-ma-left .gc-sec-head, .gc-ma-left .gc-club-copy, .gc-ma-left .gc-drop-copy, .gc-ma-left .gc-founder-copy { text-align: left; } .gc-ma-left .gc-proof, .gc-ma-left .gc-flavor-tabs { justify-content: flex-start; } /* "Claim layout on mobile" on the props strip. */ .gc-pcols-1 .gc-props-inner, .gc-pcols-2 .gc-props-inner { display: grid; justify-items: center; gap: 10px 20px; } .gc-pcols-1 .gc-props-inner { grid-template-columns: minmax(0, 1fr); } .gc-pcols-2 .gc-props-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* "Alignment on mobile" in the footer. */ .gc-falign-center .f-top, .gc-falign-center .f-bottom { justify-content: center; text-align: center; } .gc-falign-center .f-pay { justify-content: center; flex-wrap: wrap; } } /* ---------- Small phone ---------- */ @media (max-width: 560px) { /* Two long plan labels side by side start hyphenating; one per row reads better and gives each a full-width tap target. */ .gc-plan-toggle { grid-template-columns: minmax(0, 1fr); border-radius: 18px; } .gc-plan-toggle .plan { border-radius: 14px; padding: 11px 6px; } .gc-picker { gap: 12px; padding: 14px 15px; } .gc-picker .p-chip { width: 44px; height: 60px; } .gc-picker h3 { font-size: calc(20px * var(--gc-body-scale, 1)); } .gc-stepper { gap: 8px; } .gc-box-card { padding: 22px 18px; border-radius: 18px; } .gc-tier { padding: 13px 12px 11px; } .gc-tier .t-rows { padding-left: 0; } .gc-footer .f-bottom { flex-direction: column; align-items: flex-start; } .gc-falign-center .f-bottom { align-items: center; } .gc-footer .f-pay { flex-wrap: wrap; } } /* ---------- Narrow phone ---------- */ @media (max-width: 430px) { /* Below this the flavor name, notes and stepper can no longer share a row without the name collapsing to one word per line. */ .gc-picker { flex-wrap: wrap; row-gap: 10px; } .gc-picker .p-info { flex: 1 1 auto; } .gc-stepper { flex: 1 0 100%; justify-content: space-between; } .gc-club-card, .gc-drop-card, .gc-polaroid { transform: none; } .gc-club-card { padding: 20px 20px; } .gc-flavor-tab { padding: 9px 15px; } .gc-props-inner { gap: 10px 20px; } .gc-btn { padding: 14px 22px; } } /* ---------- Phone held sideways ---------- */ @media (max-height: 500px) and (orientation: landscape) { /* Vertical padding tuned for a tall phone eats most of a landscape screen. */ .gc-sec, .gc-hero { padding-top: 40px; padding-bottom: 40px; } .gc-bag-flip { width: min(200px, 100%); } .gc-bag-halo { width: 230px; } .gc-box-card { position: static; } } /* ---------- Split-section additions ---------- */ /* Shown in place of the nav logo when no logo image is set. */ .gc-logo-text { font-family: var(--ff-head); font-size: calc(20px * var(--gc-body-scale, 1)); font-weight: 700; color: var(--head); letter-spacing: 0.5px; } /* Each section is its own .gc-land root, so consecutive sections must not double up the page background seam. */ .gc-land + .gc-land { margin-top: 0; } /* ---------- Per-section backgrounds ---------- */ /* Sections that paint their own band colour route it through --gc-sec-bg so a merchant-chosen background colour wins, while the design default still applies when the setting is left empty. */ .gc-teal { background-color: var(--gc-sec-bg, var(--teal)); } .gc-dark { background-color: var(--gc-sec-bg, #1C1C1C); } .gc-footer { background-color: var(--gc-sec-bg, #1C1C1C); } .gc-topbar { background-color: var(--gc-sec-bg, #121212); } /* With a background image set, the inner bands go transparent so the image on the section root shows through. */ .gc-land.gc-has-bg-image .gc-teal, .gc-land.gc-has-bg-image .gc-dark, .gc-land.gc-has-bg-image .gc-footer, .gc-land.gc-has-bg-image .gc-topbar, .gc-land.gc-has-bg-image .gc-marquee { background-color: transparent; } .gc-land.gc-has-bg-image { position: relative; } .gc-land.gc-has-bg-image::before { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / var(--gc-sec-overlay, 0%)); pointer-events: none; z-index: 0; } .gc-land.gc-has-bg-image > * { position: relative; z-index: 1; } /* ---------- Flavor accent transitions ---------- */ /* Selecting a flavor swaps --gc-accent; ease the change rather than snapping. */ .gc-teal, .gc-land .gc-btn-primary, .gc-flavor-tab, .gc-cart-badge { transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; } .gc-sec-head h2 em, .gc-club-copy h2 em, .gc-drop-copy h2 em, .gc-founder-copy h2 em, .gc-final h2 em, .gc-hero h1 em, .gc-eyebrow, .gc-stars i { transition: color 0.35s ease; } .gc-props { background-color: var(--gc-sec-bg, #1C1C1C); } .gc-nav { background-color: var(--gc-sec-bg, var(--bg)); } .gc-land.gc-has-bg-image .gc-props, .gc-land.gc-has-bg-image .gc-nav { background-color: transparent; } /* ================================================================ HOVER, FOCUS AND PRESS STATES Every interactive thing on the landing gets three: a hover for mice, a :focus-visible ring for keyboards, and an :active press that also gives touch users feedback (touch fires :active but never a real hover). Hovers live inside @media (hover: hover) and (pointer: fine). Without that guard, tapping on a phone leaves the hover style latched on until you tap somewhere else, which reads as a stuck or mis-selected control. ================================================================ */ /* Elements whose base rule has no transition of its own. */ .gc-cart, .gc-logo, .g-card, .r-card, .gc-faq details, .gc-faq summary, .gc-bag-img { transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, opacity 0.25s ease; } /* ---------- Keyboard focus ---------- */ /* :focus-visible rather than :focus, so clicking with a mouse never leaves a ring behind, but tabbing always shows one. --gc-focus is teal by default and switches to gold on the dark bands, where teal would disappear. */ /* No border-radius here on purpose: browsers already draw the outline around the element's own corner radius, and setting one would round the element itself while it happens to be focused. */ .gc-land a:focus-visible, .gc-land button:focus-visible, .gc-land summary:focus-visible, .gc-land [role="button"]:focus-visible, .gc-land [tabindex]:focus-visible { outline: 2px solid var(--gc-focus); outline-offset: 3px; } /* The bag is a bare div with no box of its own, so it has no radius for the outline to follow; give it one that matches the artwork's corners. */ .gc-land .gc-bag-flip:focus-visible { outline: 2px solid var(--gc-focus); outline-offset: 6px; border-radius: 14px; } /* The box panel and topbar are dark islands inside otherwise light sections. */ .gc-box-card, .gc-topbar { --gc-focus: var(--gold); } /* ---------- Hover (mouse and trackpad only) ---------- */ @media (hover: hover) and (pointer: fine) { /* Buttons */ .gc-land .gc-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -12px var(--teal); } .gc-land .gc-btn:hover .arr { transform: translateX(4px); } /* Lifts the pill to #2A2A2A instead of leaving the hover to transform and shadow alone. A hover that only moves the button reads as nothing at all once prefers-reduced-motion strips the transform, and it gives the text nothing to sit against if a stray global rule reaches the colour. */ .gc-land .gc-nav-cta:hover { transform: translateY(-1px); background-color: #2A2A2A; box-shadow: 0 10px 20px -10px rgba(18, 18, 18, 0.75); } .gc-land .gc-box-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -14px var(--gold); } .gc-land .gc-box-cta:hover .arr { transform: translateX(4px); } .gc-land .gc-trifecta:hover { border-color: var(--gold); color: var(--gold); background: rgba(228, 190, 98, 0.08); } /* Links */ .gc-land .gc-topbar a:hover { text-decoration: underline; } .gc-logo:hover { opacity: 0.7; } /* --paper is restated on hover: the circle sits on the nav's own --bg, and without it a global link rule reaching background or colour would flatten the glyph into the bar behind it. */ .gc-land .gc-cart:hover { transform: translateY(-2px); background-color: var(--paper); color: var(--teal); box-shadow: 0 8px 18px -8px rgba(23, 19, 16, 0.5); } /* Flavor pills. The active pill already sits on the accent colour, so it only needs a lift, not the outline treatment the inactive ones get. */ .gc-flavor-tab:hover { border-color: var(--teal); color: var(--teal); } .gc-flavor-tab.active:hover { color: #FAFAFA; transform: translateY(-1px); } /* Hero bag */ .gc-bag-flip:hover .gc-bag-img { transform: translateY(-5px); } /* Builder */ .gc-picker:hover { transform: translateY(-2px); border-color: rgba(92, 64, 28, 0.22); box-shadow: 0 4px 10px -4px rgba(64, 44, 20, 0.5), 0 16px 34px -18px rgba(64, 44, 20, 0.5); } .gc-stepper button:hover:not(:disabled) { background: var(--ink); color: var(--cream); border-color: var(--ink); } .gc-plan-toggle .plan:hover:not(.sel) { color: var(--cream); background: rgba(241, 235, 217, 0.12); } .gc-tier:hover:not(.sel) { border-color: rgba(241, 235, 217, 0.45); background: rgba(241, 235, 217, 0.07); } /* Standards and review cards are not clickable, so they brighten rather than lift: a lift would advertise a link that is not there. */ .g-card:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); } .r-card:hover { border-color: rgba(92, 64, 28, 0.24); } /* FAQ */ .gc-faq details:hover { border-color: rgba(23, 19, 16, 0.2); } .gc-faq summary:hover { color: var(--teal); } .gc-faq summary:hover .pl { transform: scale(1.18); } .gc-faq details[open] summary:hover .pl { transform: rotate(45deg) scale(1.18); } } /* ---------- Press ---------- */ /* Outside the hover guard on purpose: :active is the only immediate feedback a touch user gets between tapping and the page responding. */ .gc-land .gc-btn-primary:active { transform: translateY(0) scale(0.985); } .gc-land .gc-nav-cta:active { transform: scale(0.97); } .gc-land .gc-box-cta:active { transform: scale(0.985); } .gc-land .gc-trifecta:active { transform: scale(0.98); } .gc-flavor-tab:active { transform: scale(0.97); } .gc-stepper button:active:not(:disabled) { transform: scale(0.92); } .gc-plan-toggle .plan:active { transform: scale(0.97); } .gc-tier:active { transform: scale(0.995); } .gc-cart:active { transform: scale(0.94); } .gc-bag-flip:active .gc-bag-img { transform: scale(0.99); } .gc-faq summary:active { color: var(--teal); } /* A disabled stepper arrow must not look pressable. */ .gc-stepper button:disabled:active { transform: none; } /* ---------- Reduced motion ---------- */ /* Colour and shadow feedback stays; the movement goes. */ @media (prefers-reduced-motion: reduce) { .gc-land .gc-btn-primary:hover, .gc-land .gc-nav-cta:hover, .gc-land .gc-box-cta:hover, .gc-land .gc-btn:hover .arr, .gc-land .gc-box-cta:hover .arr, .gc-flavor-tab.active:hover, .gc-bag-flip:hover .gc-bag-img, .gc-picker:hover, .gc-cart:hover, .gc-faq summary:hover .pl, .gc-land .gc-btn-primary:active, .gc-land .gc-nav-cta:active, .gc-land .gc-box-cta:active, .gc-land .gc-trifecta:active, .gc-flavor-tab:active, .gc-stepper button:active:not(:disabled), .gc-plan-toggle .plan:active, .gc-tier:active, .gc-cart:active, .gc-bag-flip:active .gc-bag-img { transform: none; } .gc-faq details[open] summary:hover .pl { transform: rotate(45deg); } } /* ================================================================ BUTTON COLOUR, RESTATED FOR EVERY INTERACTIVE STATE These are all elements. A component rule like `.gc-land .gc-btn-primary` is only specificity (0,2,0), which any global `a…:hover` rule elsewhere in the theme can outrank -- and when that happens the button falls back to the inherited body colour, which on these buttons sits very close to their own background (white-on-near-black in the nav, dark-on-gold in the box panel). That is exactly what a stray `a:not(.button):hover` in base/index.css does: a:not(.button), a:not(.button):hover { color: rgba(var(--color-button-text-link, --color-text), 1); } The fallback there is a bare token rather than a var(), so the declaration is invalid at computed-value time wherever --color-button-text-link is undefined and the colour drops to `inherit` -- white nav text becoming dark nav text the instant the cursor lands. base/index.css has been corrected, but the storefront was still serving the old copy of that file well after the correction, so these buttons cannot be left depending on it. Both halves are restated: colour, and the background it has to be legible against. Each selector carries an extra pseudo-class over its base rule, so it also outranks anything matching a bare element + :hover. ================================================================ */ .gc-land .gc-btn-primary:hover, .gc-land .gc-btn-primary:focus, .gc-land .gc-btn-primary:focus-visible, .gc-land .gc-btn-primary:active { color: #FAFAFA; } .gc-land .gc-nav-cta:hover, .gc-land .gc-nav-cta:focus, .gc-land .gc-nav-cta:focus-visible, .gc-land .gc-nav-cta:active { color: #FFFFFF; } /* Hover has its own lighter background inside the hover guard above; the other three states keep the resting near-black so the white text always has it. */ .gc-land .gc-nav-cta:focus, .gc-land .gc-nav-cta:focus-visible, .gc-land .gc-nav-cta:active { background-color: #121212; } .gc-land .gc-box-cta:hover, .gc-land .gc-box-cta:focus, .gc-land .gc-box-cta:focus-visible, .gc-land .gc-box-cta:active { color: #1C1C1C; } .gc-land .gc-topbar a:hover, .gc-land .gc-topbar a:focus, .gc-land .gc-topbar a:focus-visible, .gc-land .gc-topbar a:active { color: var(--gold); } /* The cart glyph turns teal on hover (declared above); the remaining states keep the resting ink colour. The circle keeps --paper throughout so it stays a distinct disc against the nav's --bg in every state. */ .gc-land .gc-cart:focus, .gc-land .gc-cart:focus-visible, .gc-land .gc-cart:active { color: var(--ink); } .gc-land .gc-cart:hover, .gc-land .gc-cart:focus, .gc-land .gc-cart:focus-visible, .gc-land .gc-cart:active { background-color: var(--paper); } .gc-land .gc-logo:hover, .gc-land .gc-logo:focus, .gc-land .gc-logo:focus-visible, .gc-land .gc-logo:active { color: var(--head); }