/* ══════════════════════════════════════════════════════════════════════════ GG Co. — Store theme layer · getgg.co Layered ON TOP of /design-system/colors_and_type.css (design-system-v2, consumed verbatim per STORE_SPINE S3 — tokens are never redefined here). Design language: the Wix-harvest THEME_SPEC §3–§5 portable set — the type ramp, the gold hairline frame, the green-body/black-heading split, the section rhythm — set in the platform type stack (SQ6 resolution). Pages opt in with . ══════════════════════════════════════════════════════════════════════════ */ /* ── Store surface — light merch theme (neither navy nor parchment) ──── */ :root[data-theme="store"], .theme-store { --bg: var(--gg-slight-white); --bg-2: #ededed; --bg-raised: #ffffff; --surface: #ffffff; --fg: var(--gg-hunter-green); /* prose is green — load-bearing */ --fg-1: var(--gg-black); /* headings are black */ --fg-2: var(--gg-hunter-green); --fg-3: rgba(31, 83, 66, 0.62); --brand: var(--gg-hunter-green); /* default link color on light */ --brand-fg: var(--gg-slight-white); --accent: var(--gg-gold); --accent-2: var(--gg-gold-antique); --rule: rgba(0, 0, 0, 0.85); /* hairline rules read black here */ --rule-strong: var(--gg-gold); /* Store-component constants (measured off the harvested build; these are store-layer values, not brand tokens) */ --frame-w: 2px; --frame-r: 8px; --well-line: 1px solid var(--gg-dusty-sand); } [data-theme="store"] body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-serif); font-weight: 500; line-height: 1.2; } .max { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); } [data-theme="store"] img { max-width: 100%; height: auto; } /* ── Type ramp — 80 / 58 / 50 / 30 / 22 / 17 / 15, headings set solid ── */ .s-h1, .s-h2, .s-h3, .s-card-title { font-family: var(--font-display); font-weight: 400; /* OSerif carries display weight itself */ color: var(--fg-1); text-transform: uppercase; margin: 0; } .s-h1 { font-size: clamp(33px, 6.25vw, 80px); line-height: 1.0; letter-spacing: var(--track-cinzel); } .s-h2 { font-size: clamp(29px, 4.5vw, 58px); line-height: 1.0; letter-spacing: var(--track-cinzel); } .s-h2-wide { letter-spacing: var(--track-wide); } .s-h3 { font-size: clamp(27px, 3.9vw, 50px); line-height: 1.0; letter-spacing: var(--track-wide); } .s-card-title{ font-size: clamp(21px, 2.35vw, 30px); line-height: 1.1; letter-spacing: var(--track-normal); } .s-body { font-family: var(--font-serif); font-weight: 500; font-size: clamp(15px, 1.72vw, 22px); line-height: 1.2; color: var(--fg-2); margin: 0; } /* Eyebrow · meta · status chip — the machine-voice register */ .s-eyebrow { font-family: var(--font-display); font-size: clamp(12px, 1.18vw, 15px); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--accent); } .s-meta, .s-chip { font-family: var(--font-mono); font-size: clamp(11px, 1.18vw, 15px); letter-spacing: var(--track-wide); } .s-meta { color: var(--fg-3); } .s-meta.gold, .s-chip { color: var(--accent); } /* ── The signature devices (STRUCTURE §4) ────────────────────────────── */ /* 1 · The gold hairline frame */ .frame { border: var(--frame-w) solid var(--accent); border-radius: var(--frame-r); padding: var(--sp-7) var(--sp-6); position: relative; } /* 2 · Corner meta pairs — pin inside a .frame */ .frame .meta-tl, .frame .meta-tr, .frame .meta-bl, .frame .meta-br { position: absolute; font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--track-wide); color: var(--accent); } .frame .meta-tl { top: 14px; left: 18px; } .frame .meta-tr { top: 14px; right: 18px; } .frame .meta-bl { bottom: 14px; left: 18px; } .frame .meta-br { bottom: 14px; right: 18px; } /* 3 · The rule stub — short black line under a heading */ .rule-stub { width: 90px; height: 0; border-top: var(--bw-hair) solid var(--gg-black); margin: var(--sp-5) 0; } .rule-stub.centered { margin-left: auto; margin-right: auto; } /* 4 · Full-width hairline */ .rule-full { border: 0; border-top: var(--bw-hair) solid var(--gg-black); margin: 0; } /* ── Buttons — measured shapes, ceremonial motion ────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 18px 34px; border-radius: var(--frame-r); font-family: var(--font-display); font-size: clamp(14px, 1.33vw, 17px); letter-spacing: var(--track-wide); text-transform: uppercase; text-decoration: none; cursor: pointer; transition: filter var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); } .btn:hover { filter: brightness(1.06); color: inherit; } .btn:active { transform: scale(0.985); } .btn-primary { background: var(--accent); color: var(--gg-slight-white); border: none; } .btn-primary:hover { color: var(--gg-slight-white); } .btn-ghost { background: transparent; color: var(--accent); border: var(--frame-w) solid var(--accent); } .btn-ghost:hover { color: var(--accent); } .btn[aria-disabled="true"] { opacity: 0.55; cursor: default; } .btn[aria-disabled="true"]:hover { filter: none; } .btn[aria-disabled="true"]:active { transform: none; } /* ── Header ──────────────────────────────────────────────────────────── */ .site-header { border-bottom: var(--bw-hair) solid var(--gg-black); background: var(--bg); } .site-header .max { display: flex; align-items: center; justify-content: space-between; min-height: 110px; gap: var(--sp-6); } .site-header .mark { display: flex; align-items: center; gap: 14px; text-decoration: none; } .site-header .mark img { height: 48px; width: 48px; display: block; } .site-header .mark .wordmark { font-family: var(--font-display); font-size: 26px; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--fg-1); } .site-nav { display: flex; gap: var(--sp-6); list-style: none; margin: 0; padding: 0; } .site-nav a { font-family: var(--font-display); font-size: clamp(14px, 1.33vw, 17px); letter-spacing: 0.10em; text-transform: uppercase; color: var(--fg-1); text-decoration: none; padding-bottom: 4px; border-bottom: 1.5px solid transparent; transition: border-color var(--dur-base) var(--ease-standard); } .site-nav a:hover, .site-nav a[aria-current="page"] { border-color: var(--accent); color: var(--fg-1); } /* ── Sections & rhythm ───────────────────────────────────────────────── */ .section { padding: var(--sp-9) 0; } .section-head { text-align: center; margin-bottom: var(--sp-8); } .section-head .s-chip { display: block; margin-bottom: var(--sp-4); } /* Hero — 50/50 split, framed text panel left, art right */ .hero { padding: var(--sp-8) 0; } .hero .split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); align-items: center; } .hero .frame { display: flex; flex-direction: column; gap: var(--sp-5); padding: var(--sp-8) var(--sp-7); } .hero .ctas { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-3); } .hero .art img { width: 100%; height: auto; display: block; border-radius: var(--frame-r); } /* Category cards — 3-up track */ .cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } .cat-card { display: flex; flex-direction: column; gap: var(--sp-3); text-decoration: none; color: inherit; } .cat-card:hover { color: inherit; } .cat-card .well { border: var(--well-line); border-radius: var(--frame-r); aspect-ratio: 1 / 1; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--surface); transition: box-shadow var(--dur-base) var(--ease-standard); } .cat-card:hover .well { box-shadow: var(--shadow-lift); } .cat-card .well img { width: 100%; height: 100%; object-fit: cover; display: block; } .cat-card .well .placeholder { font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--track-wide); color: var(--fg-3); padding: var(--sp-5); text-align: center; } .cat-card .s-card-title { margin-top: var(--sp-2); } .cat-card .s-body { font-size: clamp(14px, 1.33vw, 17px); } /* Category banner (category pages) */ .cat-banner { border-radius: var(--frame-r); overflow: hidden; border: var(--well-line); } .cat-banner img { width: 100%; height: auto; display: block; } /* Product grid + empty state */ .product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } .empty-state { text-align: center; padding: var(--sp-9) var(--sp-6); } .empty-state .s-body { max-width: 560px; margin: 0 auto; } /* Product page shell */ .product-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: start; } /* Square well: product imagery is square (800x800 vendor mockups). The former 4/5 frame letterboxed every image with a dead band top and bottom inside a visible border — no THEME_SPEC ratio was being honoured, so this matches the art. object-fit: contain keeps non-square art (real photography later) uncropped. */ .product-split .well { border: var(--well-line); border-radius: var(--frame-r); aspect-ratio: 1 / 1; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--surface); } .product-split .well img { width: 100%; height: 100%; object-fit: contain; display: block; } .product-info { display: flex; flex-direction: column; gap: var(--sp-4); } .product-info .price { font-family: var(--font-display); font-size: clamp(18px, 1.9vw, 24px); letter-spacing: var(--track-wide); color: var(--fg-1); } /* Variant controls — catalog-driven dependent pickers. The pickers themselves are LIVE (garment gates colour gates size, so only real combinations compose); it is the BUY control that stays inert, because the money path is platform-side (PLATFORM_SPINE D23) and no commerce code lives in this repo. */ .variant-controls { display: flex; flex-wrap: wrap; gap: var(--sp-4); } .vc-field { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; flex: 0 1 auto; } /* Each field sizes to its own content. Garment labels are the longest strings in the row ("Bella+Canvas 3413 Triblend Tee") and Size the shortest; the previous equal flex-basis clipped the garment name in the closed select at every width while Size sat on ~130px of unused room. Fields wrap rather than stretch. */ .vc-field select { font-family: var(--font-serif); font-size: 15px; color: var(--fg-2); background: var(--surface); border: var(--well-line); border-radius: var(--frame-r); padding: var(--sp-3); width: 100%; max-width: 100%; text-overflow: ellipsis; /* long colourways must not clip at 375 */ } .vc-field select:hover { border-color: var(--accent-2); } .vc-field select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .vc-field select option:disabled { color: var(--fg-3); } /* A dimension with one value is a fact, not a control */ .vc-fixed { margin: 0; } .vc-status { margin: 0; } /* Prose pages (legal, thanks, 404) */ .prose { max-width: 760px; margin: 0 auto; } .prose .s-body + .s-body { margin-top: var(--sp-4); } /* ── Footer ──────────────────────────────────────────────────────────── */ .site-footer { padding: var(--sp-8) 0 var(--sp-7); } .site-footer .frame { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); padding: var(--sp-8) var(--sp-6); } .site-footer .mark img { height: 48px; } .site-footer a { font-family: var(--font-display); font-size: 15px; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--fg-2); text-decoration: none; } .site-footer a:hover { color: var(--accent-2); } .site-footer .links { display: flex; gap: var(--sp-5); flex-wrap: wrap; justify-content: center; } .site-footer .rule-stub { margin: var(--sp-2) auto; } .site-footer .legal { font-family: var(--font-display); font-size: 13px; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--fg-2); } /* Imageless card placeholder — the listing's own thread colours as swatches, so the three thread variants differ by more than a word. Gives the well mass; the text block alone measured 9.5% of it and read as a failed image at 3-up. */ .cat-card .well .placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); } .sw-row { display: flex; gap: var(--sp-2); } .sw { width: 54px; height: 54px; border-radius: 50%; border: var(--well-line); /* so white thread reads on white surface */ box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); display: block; } .sw-label { font-family: var(--font-display); font-size: 14px; letter-spacing: var(--track-wide); color: var(--fg-2); } .sw-pending { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--track-wide); color: var(--fg-3); } /* Catalogue index — category sections + family facet */ .cat-section + .cat-section { margin-top: var(--sp-8); } .cat-section > .s-h3 { margin-bottom: var(--sp-4); } .facets { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-6); } .facet { font-family: var(--font-display); font-size: 13px; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--fg-2); background: var(--surface); border: var(--well-line); border-radius: var(--frame-r); padding: var(--sp-2) var(--sp-4); cursor: pointer; } .facet:hover { border-color: var(--accent-2); } .facet[aria-pressed="true"] { color: var(--fg-1); border-color: var(--accent); } .facet:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ── Responsive — measured behavior at 375 ───────────────────────────── */ /* 2-up band: 3-up collapsing straight to 1-up gave a 700px viewport one enormous card per row and 113 rows of scrolling (cowork report 2026-08-23 F8). */ @media (max-width: 1100px) and (min-width: 761px) { .cat-grid, .product-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { .hero .split, .product-split { grid-template-columns: 1fr; } .hero .art { order: 2; } /* art moves below the text block */ .hero .ctas { flex-direction: column; align-items: stretch; } .cat-grid, .product-grid { grid-template-columns: 1fr; } .site-header .max { flex-direction: column; padding-top: var(--sp-4); padding-bottom: var(--sp-4); gap: var(--sp-3); } .frame .meta-tr, .frame .meta-br { display: none; } /* corner pairs reduce to one per edge */ } /* ── Store runtime states — dist build 2026-08-31 (driven by /store.js) ── */ .store-notice { display: block; color: var(--accent); } .btn:disabled { opacity: 0.55; cursor: default; } .btn:disabled:hover { filter: none; } .btn:disabled:active { transform: none; } .buy-row { margin-top: var(--sp-2); } .msg { color: var(--accent); } /* Login + ledger (/account/) */ .login-row { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: flex-end; margin: var(--sp-5) 0; } .field { display: flex; flex-direction: column; gap: var(--sp-2); flex: 1 1 260px; } .field input[type="email"] { font-family: var(--font-serif); font-size: 16px; color: var(--fg-2); background: var(--surface); border: var(--well-line); border-radius: var(--frame-r); padding: var(--sp-3); } .field input[type="email"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Consignment rows (account orders + the token view) */ .order-list { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); } .order-row { border: var(--well-line); border-radius: var(--frame-r); padding: var(--sp-4); display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; text-align: left; } .order-cell { display: flex; flex-direction: column; gap: var(--sp-2); } .order-cell.right { align-items: flex-end; } @media (max-width: 760px) { .login-row { flex-direction: column; align-items: stretch; } }