/* ============================================================ ICON — site design system (2026-07, rev 2) White canvas, sunset accent, photography-first, retail cards. Scoped to pages that opt in via . ============================================================ */ .gh { --gh-ground: #FFFFFF; --gh-ground-2: #F6F6F4; --gh-card: #FFFFFF; --gh-ink: #16120E; --gh-ink-soft: #6B6259; --gh-line: #E9E7E3; --gh-gold: #F59E0B; /* ratings stars only (semantic) */ --gh-blue: #2563EB; --gh-blue-2: #3B82F6; --gh-violet: #7C3AED; --gh-grad: linear-gradient(100deg, var(--gh-blue), var(--gh-blue-2) 55%, var(--gh-violet)); --gh-dark: #14110E; --gh-dark-ink: #F7F3EE; --gh-r-sm: 10px; --gh-r: 16px; --gh-r-lg: 24px; --gh-shadow: 0 10px 30px -12px rgba(22, 18, 14, 0.16); --gh-rose: #E11D48; --gh-shadow-lift: 0 24px 48px -18px rgba(22, 18, 14, 0.24); margin: 0; background: var(--gh-ground); color: var(--gh-ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; line-height: 1.55; } .gh * { box-sizing: border-box; } .gh img { max-width: 100%; display: block; } .gh a { color: inherit; text-decoration: none; } .gh .wrap { max-width: 1140px; margin: 0 auto; padding: 0 22px; } /* ---------- type ---------- */ .gh .display { font-size: clamp(2.5rem, 6.4vw, 4.4rem); line-height: 1.02; font-weight: 800; letter-spacing: -0.032em; margin: 0; } .gh .h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.08; font-weight: 800; letter-spacing: -0.022em; margin: 0 0 10px; } .gh .kicker { display: inline-block; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gh-blue); margin-bottom: 12px; } .gh .lede { font-size: clamp(1rem, 1.5vw, 1.16rem); color: var(--gh-ink-soft); margin: 12px 0 0; } .gh .grad-text { background: var(--gh-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------- nav ---------- */ .gh .nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gh-line); } .gh .nav-inner { display: flex; align-items: center; gap: 26px; padding: 14px 22px; max-width: 1140px; margin: 0 auto; } .gh .nav-logo { height: 44px; width: auto; display: block; } .gh .nav-links { display: flex; gap: 24px; align-items: center; margin-left: auto; font-size: 1.1rem; font-weight: 600; } .gh .nav-links a { color: var(--gh-ink-soft); transition: color 0.15s; } .gh .nav-links a:hover { color: var(--gh-ink); } .gh .nav-links a.earn { color: var(--gh-blue); } /* Buttons inside the nav: the .nav-links a color rule outranks .btn, so pin button text explicitly. */ .gh .nav-links a.btn, .gh .nav-links a.btn:hover { color: #fff; } .gh .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--gh-ink); color: #fff; border: 0; border-radius: 999px; cursor: pointer; padding: 12px 22px; font-size: 0.95rem; font-weight: 700; transition: transform 0.15s ease, box-shadow 0.15s ease; } .gh .btn:hover { transform: translateY(-1px); box-shadow: var(--gh-shadow); } .gh .btn.grad { background: var(--gh-grad); } .gh .btn.ghost { background: transparent; color: var(--gh-ink); border: 1.5px solid var(--gh-ink); } .gh .nav-burger { display: none; margin-left: auto; background: none; border: 0; font-size: 1.5rem; cursor: pointer; color: var(--gh-ink); } /* ---------- hero ---------- */ .gh .hero { padding: clamp(40px, 6.5vw, 84px) 0 26px; } .gh .hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 56px); align-items: center; } .gh .rotator { display: inline-block; position: relative; } .gh .rotator span { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; transform: translateY(12px); transition: opacity 0.4s ease, transform 0.4s ease; background: var(--gh-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .gh .rotator span.on { position: relative; opacity: 1; transform: none; } /* hero photo collage — real shoots, staggered */ .gh .collage { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .gh .collage figure { margin: 0; border-radius: var(--gh-r); overflow: hidden; box-shadow: var(--gh-shadow); } .gh .collage img { width: 100%; height: 100%; object-fit: cover; } .gh .collage figure:nth-child(1) { aspect-ratio: 3/4; transform: translateY(18px); } .gh .collage figure:nth-child(2) { aspect-ratio: 3/4; transform: translateY(-10px); } .gh .collage figure:nth-child(3) { aspect-ratio: 4/3.4; transform: translateY(6px); } .gh .collage figure:nth-child(4) { aspect-ratio: 4/3.4; transform: translateY(-16px); } .gh .shot-credit { font-size: 0.74rem; color: var(--gh-ink-soft); text-align: right; margin-top: 20px; } /* widget */ .gh .widget { margin-top: 30px; background: var(--gh-card); border: 1px solid var(--gh-line); border-radius: var(--gh-r-lg); box-shadow: var(--gh-shadow-lift); padding: 16px; display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; max-width: 720px; } .gh .widget label { display: block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gh-ink-soft); margin: 0 0 4px 2px; } .gh .widget .field { flex: 1 1 200px; } .gh .widget select { width: 100%; padding: 13px 14px; font: inherit; font-weight: 600; color: var(--gh-ink); background: var(--gh-ground-2); border: 1px solid var(--gh-line); border-radius: 12px; appearance: none; cursor: pointer; } .gh .widget .go { flex: 0 0 auto; } .gh .avail-line { margin-top: 14px; font-weight: 700; font-size: 0.94rem; color: var(--gh-ink-soft); min-height: 1.4em; } /* Web signup card — account creation on the page, app handoff after. */ .gh .signup-card { background: var(--gh-card); border: 1px solid var(--gh-line); border-radius: var(--gh-r-lg); padding: 24px 22px; box-shadow: var(--gh-shadow-lift); max-width: 480px; margin-top: 30px; } .gh .signup-card .srow { display: flex; gap: 10px; } .gh .signup-card .srow .field { flex: 1; } .gh .signup-card .field { margin-bottom: 12px; } .gh .signup-card label { display: block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gh-ink-soft); margin: 0 0 4px 2px; } .gh .signup-card input { width: 100%; padding: 12px 14px; font: inherit; font-weight: 600; color: var(--gh-ink); background: var(--gh-ground-2); border: 1px solid var(--gh-line); border-radius: 12px; } .gh .signup-card input:focus { outline: none; border-color: var(--gh-blue); } .gh .signup-card .btn { width: 100%; justify-content: center; } .gh .signup-card .fineline { margin: 12px 0 0; font-size: 0.8rem; color: var(--gh-ink-soft); text-align: center; } .gh .signup-card .code-input { text-align: center; font-size: 1.5rem; letter-spacing: 0.4em; font-weight: 800; } .gh .signup-card .linkbtn { background: none; border: none; padding: 0; font: inherit; font-weight: 700; color: var(--gh-blue); cursor: pointer; } .gh .signup-card .sg-msg { margin: 12px 0 0; font-weight: 700; font-size: 0.9rem; min-height: 1.3em; } .gh .signup-card .sg-msg.error { color: var(--gh-rose); } .gh .signup-card .sg-msg.success { color: #15803D; } .gh .signup-card .store-row { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; } .gh .signup-card .done-head { margin: 0 0 8px; font-size: 1.3rem; letter-spacing: -0.01em; } .gh .signup-card .done-sub { margin: 0; color: var(--gh-ink-soft); font-size: 0.94rem; line-height: 1.5; } .gh .avail-line .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #22C55E; margin-right: 7px; animation: gh-pulse 2s infinite; } @keyframes gh-pulse { 50% { opacity: 0.4; } } /* widget results — compact retail rows */ .gh .icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 18px; } .gh .icon-card { background: var(--gh-card); border: 1px solid var(--gh-line); border-radius: var(--gh-r-sm); padding: 10px; display: flex; gap: 12px; align-items: center; transition: transform 0.16s ease, box-shadow 0.16s ease; } .gh .icon-card:hover { transform: translateY(-2px); box-shadow: var(--gh-shadow); } .gh .icon-card img, .gh .icon-card .ava { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; flex: none; background: var(--gh-grad); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.2rem; } .gh .icon-card .meta { min-width: 0; } .gh .icon-card .name { font-weight: 800; font-size: 0.96rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gh .icon-card .sub { font-size: 0.8rem; color: var(--gh-ink-soft); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .gh .tierchip { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--gh-ground-2); border: 1px solid var(--gh-line); color: var(--gh-ink-soft); } /* App-matching tier pill: trend arrow + gold tier word (mirrors the mobile app's tier treatment — no gray chip). */ .gh .tierpill { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; color: #F59E0B; text-transform: capitalize; } .gh .tierpill svg { width: 15px; height: 15px; stroke: #F59E0B; stroke-width: 2.6; fill: none; } /* App-matching FOUNDING pill: solid blue, white bold uppercase. */ .gh .founding-pill { display: inline-flex; align-items: center; background: #3B82F6; color: #fff; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; border-radius: 999px; padding: 4px 12px; } .gh .star { color: var(--gh-gold); font-weight: 800; } .gh .price { font-weight: 800; } .gh .price-note { margin-top: 12px; font-size: 0.82rem; color: var(--gh-ink-soft); } /* ---------- sections ---------- */ .gh section { padding: clamp(52px, 7.5vw, 96px) 0; } .gh section.tight { padding-top: 22px; } .gh .sect-head { max-width: 660px; margin: 0 0 38px; } .gh .sect-head.center { margin: 0 auto 38px; text-align: center; } /* ---------- roster: retail cards ---------- */ .gh .marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .gh .marquee-track { display: flex; gap: 16px; width: max-content; animation: gh-marquee 44s linear infinite; padding: 6px 0 22px; } .gh .marquee:hover .marquee-track { animation-play-state: paused; } @keyframes gh-marquee { to { transform: translateX(-50%); } } .gh .face-card { width: 236px; flex: none; background: var(--gh-card); border: 1px solid var(--gh-line); border-radius: var(--gh-r-sm); overflow: hidden; transition: transform 0.18s ease, box-shadow 0.18s ease; } .gh .face-card:hover { transform: translateY(-4px); box-shadow: var(--gh-shadow-lift); } .gh .face-card .photo { width: 100%; aspect-ratio: 3/3.6; background: var(--gh-ground-2); position: relative; } .gh .face-card .photo img { width: 100%; height: 100%; object-fit: cover; } .gh .face-card .photo .ava { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--gh-grad); color: #fff; font-weight: 800; font-size: 2.6rem; } .gh .face-card .photo .founding { position: absolute; left: 10px; top: 10px; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; background: #3B82F6; color: #fff; border-radius: 999px; padding: 4px 10px; } .gh .face-card .info { padding: 12px 14px 14px; position: relative; } .gh .face-card .avatar-chip { position: absolute; top: -26px; right: 12px; width: 48px; height: 48px; border-radius: 10px; object-fit: cover; border: 3px solid #fff; box-shadow: 0 4px 12px rgba(22, 18, 14, 0.22); } .gh .face-card .name { font-weight: 800; font-size: 1rem; letter-spacing: -0.01em; } .gh .face-card .sub { font-size: 0.8rem; color: var(--gh-ink-soft); margin-top: 3px; display: flex; gap: 8px; align-items: center; } /* ---------- how it works: real app screens ---------- */ .gh .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; } .gh .step { text-align: center; } /* App screens show the top ~60% only — the story of each screen lives up top, and the crop lets the UI render large enough to actually read. The steep fade at the bottom dissolves screen AND bezel into the page (a long fade over dark screenshots reads as gray haze). */ .gh .step .shot { width: min(300px, 92%); margin: 0 auto 18px; aspect-ratio: 9/11.6; position: relative; overflow: hidden; border-radius: 34px 34px 0 0; } .gh .step .shot img { display: block; width: 100%; height: auto; border: 7px solid var(--gh-ink); border-bottom: none; border-radius: 34px 34px 0 0; box-sizing: border-box; } .gh .step .shot::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--gh-ground) 86%); pointer-events: none; } .gh .step .shot .placeholder { font-size: 0.78rem; color: var(--gh-ink-soft); padding: 20px; } .gh .step .num-line { font-size: 0.76rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gh-coral); } .gh .step h3 { margin: 6px 0 4px; font-size: 1.2rem; letter-spacing: -0.01em; } .gh .step p { margin: 0 auto; color: var(--gh-ink-soft); font-size: 0.94rem; max-width: 280px; } /* ---------- occasion index (editorial rows) ---------- */ .gh .occ-index { border-top: 1px solid var(--gh-line); } .gh .occ-row { display: flex; align-items: baseline; gap: 22px; padding: 22px 6px; border-bottom: 1px solid var(--gh-line); transition: padding 0.18s ease; } .gh .occ-row:hover { padding-left: 16px; } .gh .occ-row .idx { font-size: 0.8rem; font-weight: 800; color: var(--gh-ink-soft); width: 30px; flex: none; } .gh .occ-row h3 { margin: 0; font-size: clamp(1.4rem, 3.2vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em; transition: color 0.15s; } .gh .occ-row:hover h3 { background: var(--gh-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .gh .occ-row p { margin: 0; margin-left: auto; font-size: 0.9rem; color: var(--gh-ink-soft); max-width: 300px; text-align: right; } .gh .occ-row .arrow { flex: none; font-weight: 800; color: var(--gh-ink-soft); transition: transform 0.18s ease, color 0.15s; } .gh .occ-row:hover .arrow { transform: translateX(5px); color: var(--gh-blue-2); } /* ---------- proof band (real photos masonry) ---------- */ .gh .proof { background: var(--gh-dark); color: var(--gh-dark-ink); } .gh .proof .lede { color: rgba(247, 243, 238, 0.72); } .gh .masonry { columns: 3 240px; column-gap: 14px; } .gh .masonry figure { margin: 0 0 14px; border-radius: var(--gh-r-sm); overflow: hidden; break-inside: avoid; } .gh .masonry img { width: 100%; height: auto; transition: transform 0.35s ease; } .gh .masonry figure:hover img { transform: scale(1.04); } /* ---------- trust strip (one line, no essays) ---------- */ .gh .trust-strip { display: flex; flex-wrap: wrap; gap: 12px 34px; justify-content: center; padding: 26px 22px; border-top: 1px solid var(--gh-line); border-bottom: 1px solid var(--gh-line); font-weight: 700; font-size: 0.95rem; } .gh .trust-strip span { display: inline-flex; align-items: center; gap: 9px; color: var(--gh-ink); } .gh .trust-strip .tick { width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--gh-grad); color: #fff; font-size: 0.7rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; } /* ---------- earn band ---------- */ .gh .band { background: var(--gh-dark); color: var(--gh-dark-ink); border-radius: var(--gh-r-lg); overflow: hidden; } .gh .band .lede { color: rgba(247, 243, 238, 0.75); } .gh .band-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: stretch; } .gh .band-copy { padding: clamp(30px, 5vw, 56px); } .gh .band .btn.ghost { color: var(--gh-dark-ink); border-color: rgba(247, 243, 238, 0.55); } .gh .band-photo { min-height: 280px; } .gh .band-photo img { width: 100%; height: 100%; object-fit: cover; } .gh .badges { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 24px; } /* ---------- footer ---------- */ .gh footer { border-top: 1px solid var(--gh-line); padding: 40px 0 60px; margin-top: 26px; } .gh footer .cols { display: flex; gap: 40px; flex-wrap: wrap; justify-content: space-between; font-size: 0.9rem; color: var(--gh-ink-soft); } .gh footer a:hover { color: var(--gh-ink); } .gh footer .foot-links { display: flex; gap: 20px; flex-wrap: wrap; } /* ---------- motion ---------- */ .gh .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; } .gh .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .gh .reveal { opacity: 1; transform: none; transition: none; } .gh .marquee-track { animation: none; } .gh .rotator span { transition: none; } } /* ---------- mobile ---------- */ @media (max-width: 860px) { .gh .hero-grid { grid-template-columns: 1fr; } .gh .collage { max-width: 480px; } .gh .occ-row p { display: none; } } @media (max-width: 760px) { .gh .nav-links { display: none; } .gh .nav-links.open { display: flex; flex-direction: column; align-items: flex-start; position: absolute; top: 100%; left: 0; right: 0; background: var(--gh-ground); border-bottom: 1px solid var(--gh-line); padding: 18px 22px; gap: 16px; } .gh .nav-burger { display: block; } .gh .widget .go { width: 100%; } .gh .band-grid { grid-template-columns: 1fr; } .gh .band-photo { min-height: 220px; order: -1; } } /* ---------- small-phone refinements (≤480px) ---------- */ @media (max-width: 860px) { .gh .collage { max-width: 480px; margin: 0 auto; } } @media (max-width: 480px) { /* flatten the collage stagger so offsets don't clip on tiny screens */ .gh .collage { gap: 8px; } .gh .collage figure:nth-child(1), .gh .collage figure:nth-child(2), .gh .collage figure:nth-child(3), .gh .collage figure:nth-child(4) { transform: none; } .gh .widget { padding: 12px; } .gh .occ-row { gap: 12px; padding: 18px 2px; } .gh .occ-row .idx { width: 22px; } .gh .trust-strip { gap: 10px 18px; font-size: 0.85rem; padding: 20px 16px; } .gh .band-copy { padding: 26px 20px; } .gh .masonry { columns: 2 140px; column-gap: 10px; } .gh .masonry figure { margin-bottom: 10px; } .gh .face-card { width: 200px; } .gh .badges .btn { width: 100%; } .gh footer .cols { gap: 24px; } }