/* ── Fonts ── Self-hosted rather than loaded from fonts.googleapis.com: the Google Fonts CSS is a separate cross-origin round trip that has to finish and parse before the browser even learns which font binaries to fetch, which put the whole webfont download behind the critical path. Same-origin files can be preloaded directly from each page's (see the rel=preload links there) and start downloading in parallel with site.css. One file per family/style, not per weight: Google serves both of these as variable fonts, so every weight the site uses comes out of the same binary - hence the font-weight ranges below, which must span the whole axis or the browser pins the instance at the face's declared weight (Cormorant's axis defaults to 300, so a bare font-weight:400 here would render every heading lighter than intended). Latin subset only (the same unicode-range Google serves for it): this is an English-language UK site, and the ranges outside it are pure payload here. */ @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/assets/fonts/cormorant-garamond-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 700; font-display: swap; src: url('/assets/fonts/cormorant-garamond-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Metric-matched stand-in for Cormorant Garamond, sitting between it and plain Georgia in every serif stack on the site. Georgia is a much larger and wider face: measured against the site's own headings it sets the same string 12% wider at weight 400 and 30% wider at 500/600 (where it also resolves to Georgia Bold), so an unadjusted swap re-wraps and re-flows every heading the moment the webfont lands. size-adjust plus the ascent/descent overrides make the fallback occupy the same box, so font-display:swap costs a change of letterform and nothing else - no layout shift, no re-wrap. Split per weight because Georgia only ships 400 and 700, so the ratio to correct for is not the same one either side of that boundary. Percentages are advance-width ratios measured across the site's real headings; ascent/descent are Cormorant's own (92.4%/28.7% of em) divided by each size-adjust, since the overrides apply after the size adjustment. Where Georgia is absent (Android) the src fails to resolve, this face drops out, and the stack falls through to the generic serif exactly as it did before. */ @font-face { font-family: 'Cormorant Fallback'; font-style: normal; font-weight: 300 449; src: local('Georgia'); size-adjust: 89%; ascent-override: 103.8%; descent-override: 32.2%; line-gap-override: 0%; } @font-face { font-family: 'Cormorant Fallback'; font-style: normal; font-weight: 450 700; src: local('Georgia Bold'), local('Georgia-Bold'); size-adjust: 77%; ascent-override: 120%; descent-override: 37.3%; line-gap-override: 0%; } @font-face { font-family: 'Cormorant Fallback'; font-style: italic; font-weight: 300 449; src: local('Georgia Italic'), local('Georgia-Italic'); size-adjust: 78%; ascent-override: 118.5%; descent-override: 36.8%; line-gap-override: 0%; } @font-face { font-family: 'Cormorant Fallback'; font-style: italic; font-weight: 450 700; src: local('Georgia Bold Italic'), local('Georgia-BoldItalic'); size-adjust: 67%; ascent-override: 137.9%; descent-override: 42.8%; line-gap-override: 0%; } :root { --ground: #FDF5FB; --near-black: #180A14; --warm-grey: #8A6880; --body-text: #5B4356; --pink: #F0128C; --pink-light: #FF3FA4; --pink-deep: #C200A0; --pink-pale: #FDE8F5; --pink-border: #F5E0F0; --gold: #C89030; --gold-light: #F0D070; --gold-pale: #FDF5E0; --gradient-brand: linear-gradient(135deg, #FF3FA4, #F0128C 45%, #C200A0); --gradient-gold: linear-gradient(135deg, #F0D070, #C89030); --champagne-band: linear-gradient(150deg, #FDF8EC, #FBF3DE 55%, #F8EBCB); /* Spacing scale — every margin/padding on the site should be one of these values. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* Motion tokens. Deliberately no `ease`/`linear` anywhere: those read as browser-default rather than designed, and every animation on the site is meant to feel like one system. */ --ease-standard: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --duration-fast: 150ms; --duration-base: 400ms; --duration-slow: 700ms; /* Layered shadows: several stacked passes of increasing blur and decreasing opacity, near-black for the tight inner ones and pink for the wide ambient ones, so depth stays inside the brand palette rather than going generic grey. */ --shadow-card: 0 1px 2px rgba(24,10,20,0.04), 0 4px 8px rgba(24,10,20,0.04), 0 12px 24px rgba(240,18,140,0.08), 0 24px 48px rgba(240,18,140,0.10); --shadow-card-lift: 0 1px 2px rgba(24,10,20,0.05), 0 6px 12px rgba(24,10,20,0.05), 0 18px 34px rgba(240,18,140,0.12), 0 34px 64px rgba(240,18,140,0.14); --shadow-cta: 0 1px 2px rgba(24,10,20,0.10), 0 4px 10px rgba(240,18,140,0.22), 0 12px 26px rgba(240,18,140,0.32), 0 22px 48px rgba(240,18,140,0.28); --shadow-cta-lift: 0 1px 2px rgba(24,10,20,0.12), 0 6px 14px rgba(240,18,140,0.28), 0 16px 34px rgba(240,18,140,0.40), 0 28px 60px rgba(240,18,140,0.34); /* Stacked-plate system: every major section is a rounded card that rides up over the one above it by --plate-overlap, so section boundaries read as overlapping edges rather than ruled lines. The plate shadow points upward (negative y) because it is cast onto the section behind, and the inset highlight picks out the curved top edge. */ --plate-radius: 34px; --plate-overlap: -26px; --shadow-plate: 0 -10px 26px rgba(168,11,132,0.12), inset 0 1px 0 rgba(255,255,255,0.85); --grain-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Texture overlay for the large gradient blocks. Kept under 4% opacity: at that level it reads as paper grain, above it reads as image noise. */ .grain { position: relative; isolation: isolate; } .grain > .grain-layer { position: absolute; inset: 0; /* Inherited so the grain stops at a rounded plate's curved top edge instead of painting square corners over it. */ border-radius: inherit; background-image: var(--grain-image); opacity: 0.035; mix-blend-mode: overlay; pointer-events: none; z-index: 0; } .grain > *:not(.grain-layer) { position: relative; z-index: 1; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* clip, not hidden: overflow-x:hidden on html/body is a well-known trigger for Safari/WebKit disabling position:sticky on descendants (it broke .site-nav's sticky behaviour) - hidden establishes a scroll container, which sticky's containing-block resolution gets confused by in Safari specifically, while clip visually clips the same overflow without establishing one. On html too, not just body below: iOS Safari sometimes treats as the page's real scrolling element, so this alone on body doesn't reliably stop horizontal scroll/bounce there even when nothing is actually escaping a nested overflow:hidden container. */ html { overflow-x: clip; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; color: var(--near-black); /* Flat, not gradient: every section below (hero, champagne bands, how-band.alt-b, the CTA panel) already carries its own mesh gradient. A translucent gradient here too, fixed under all of them, was stacking into one continuous pink haze across section boundaries instead of each section reading as its own distinct block. */ background: var(--ground); overflow-x: clip; /* Blocks margin collapsing: .site-nav's own margin-top has nothing above it inside body to stop it collapsing straight through onto the viewport, which was pushing the whole page (and the nav pill itself) down by 8-10px and leaving a sliver of body background visible above everything. flow-root establishes a new block formatting context with none of the scroll/clipping side effects overflow:hidden would carry here. */ display: flow-root; } a { color: var(--pink); text-decoration: none; } a:hover { color: var(--pink-deep); } img { max-width: 100%; display: block; } /* ── Wordmark ── */ .wordmark { display: inline-block; } .wordmark-text { font-family: 'Cormorant Garamond', 'Cormorant Fallback', Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 500; line-height: 1; letter-spacing: 0.02em; background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; } .wordmark-rule { height: 1.5px; border-radius: 1px; background: var(--gradient-gold); margin-top: 5px; } .wordmark--nav .wordmark-text { font-size: 30px; } .wordmark--footer .wordmark-text { font-size: 26px; } /* ── Nav ── A floating pill inset from the viewport edges, not an edge-to-edge chrome strip: it sits on top of the page's own colour on every side, which is what makes the heavy glass blur read as glass rather than as a lighter band. Kept in normal flow (no negative bottom margin) so every page's first section clears it without per-page top padding. */ .site-nav { position: sticky; top: 10px; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); /* margin-bottom explicitly 0, not inherited from a shorthand: nav's positive bottom margin was collapsing with .hero-shell's negative top margin on the sibling boundary between them (collapsed result is max(positive) + min(negative), not just the negative value alone), leaving an un-intended ~8px gap that made .hero-shell's own compensation values land short of where they were tuned for. */ margin: 10px 12px 0; padding: 8px 12px 8px 22px; border-radius: 22px; /* Matched to the reference's exact glass recipe (opacity .80/.58, blur 16px, saturate 150%) — this had drifted to a stronger blur/saturate and slightly higher opacity. */ background: linear-gradient(rgba(255,247,251,0.80), rgba(255,247,251,0.58)); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); border: 1px solid rgba(255,255,255,0.75); box-shadow: 0 1px 2px rgba(90,6,66,0.06), 0 8px 20px rgba(168,11,132,0.14), 0 18px 40px rgba(168,11,132,0.10); transition: background var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard); } /* Once there's content passing underneath, the glass goes more opaque and the pill lifts further off the page, so it stays legible over whatever colour is scrolling behind it. */ .site-nav.is-scrolled { background: linear-gradient(rgba(255,247,251,0.93), rgba(255,247,251,0.76)); border-color: rgba(255,255,255,0.92); box-shadow: 0 1px 2px rgba(90,6,66,0.07), 0 10px 26px rgba(168,11,132,0.18), 0 24px 52px rgba(168,11,132,0.14); } .site-nav .nav-left { display: flex; align-items: center; gap: 14px; } .site-nav .nav-links { display: flex; align-items: center; gap: 34px; } .site-nav .nav-links a.nav-link { color: var(--near-black); font-size: 14.5px; font-weight: 500; transition: color 0.15s ease; } .site-nav .nav-links a.nav-link:hover, .site-nav .nav-links a.nav-link.is-active { color: var(--pink); font-weight: 600; } .nav-menu { display: contents; } .nav-appstore { display: none; } .nav-burger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 44px; height: 44px; margin-left: -6px; background: none; border: none; cursor: pointer; padding: 0; flex-shrink: 0; } .nav-burger span { display: block; width: 18px; height: 1.5px; background: var(--near-black); border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease; } .nav-burger.is-open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); } .nav-burger.is-open span:nth-child(2) { opacity: 0; } .nav-burger.is-open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); } @media (max-width: 720px) { .site-nav { margin: 8px 10px 0; padding: 8px 10px 8px 14px; border-radius: 20px; } .site-nav .nav-links { gap: 14px; } .nav-burger { display: flex; } /* Detached rounded card rather than a flush dropdown: the pill above it has its own curved bottom edge, so anything butting straight onto it reads as a rendering fault. */ .nav-menu { display: none; position: absolute; top: calc(100% + 9px); left: 0; right: 0; flex-direction: column; /* Opaque, unlike the pill above it: the menu sits over headline-sized type, and at any glass opacity that still reads as glass the letterforms show through the links. */ background: #FFF9FC; border: 1px solid rgba(255,255,255,0.85); border-radius: 20px; padding: 6px 18px 12px; box-shadow: 0 2px 6px rgba(90,6,66,0.08), 0 18px 36px rgba(168,11,132,0.20); } .nav-menu.is-open { display: flex; } .nav-menu .nav-link { padding: 13px 0; border-bottom: 1px solid var(--pink-border); font-size: 15.5px; } .nav-appstore { display: block; margin-top: 4px; padding-top: 14px; } .nav-appstore img { height: 40px; width: auto; display: block; } } /* ── Buttons ── */ .btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 100px; font-size: 14.5px; font-weight: 600; white-space: nowrap; border: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } /* Pressed state matters more than hover on a mobile-first page: it's the only interaction feedback most visitors will ever get from these. */ .btn:active { transform: scale(0.97); } .btn-primary { background: var(--gradient-brand); color: #fff; padding: 15px 30px; box-shadow: var(--shadow-cta); } .btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-cta-lift); color: #fff; } .btn-primary:active { transform: scale(0.97); box-shadow: var(--shadow-cta); } .btn-primary.btn-sm { padding: 11px 24px; font-size: 14px; box-shadow: 0 1px 2px rgba(24,10,20,0.08), 0 3px 8px rgba(240,18,140,0.22), 0 8px 20px rgba(240,18,140,0.30); } .btn-primary.btn-sm:hover { transform: translateY(-1px); color: #fff; } .btn-outline { color: var(--near-black); border: 1px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--gradient-gold) border-box; padding: 15px 26px; box-shadow: 0 1px 2px rgba(24,10,20,0.04), 0 4px 10px rgba(24,10,20,0.05), 0 12px 26px rgba(200,144,48,0.10); } .btn-outline:hover { color: var(--pink); } .btn-white { background: #fff; color: var(--pink-deep); padding: 17px 38px; font-size: 15px; font-weight: 700; box-shadow: 0 1px 2px rgba(24,10,20,0.10), 0 6px 14px rgba(24,10,20,0.12), 0 18px 40px rgba(24,10,20,0.16); } .btn-white:hover { transform: translateY(-2px); color: var(--pink-deep); } .btn-dark { background: var(--near-black); color: #fff; padding: 15px; width: 100%; font-size: 15px; } .btn-dark:hover { background: #3A2833; color: #fff; } @media (max-width: 640px) { .btn:not(.btn-sm) { width: 100%; } } /* ── Section scaffolding ── */ .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--warm-grey); } .eyebrow-gold { color: #A8843C; } .eyebrow-pink { color: var(--pink-deep); } /* Badge form of .eyebrow, used before a section heading. Opt-in rather than applied to .eyebrow itself, because the same class labels non-heading blocks on other pages where a floating badge would read as a control. Colour still comes from the -gold/-pink modifier. */ .eyebrow-pill { display: inline-flex; align-items: center; gap: var(--space-2); padding: 7px 15px; border-radius: 100px; background: #fff; border: 1px solid var(--pink-border); box-shadow: 0 1px 2px rgba(24,10,20,0.03), 0 6px 16px rgba(168,11,132,0.10); } .eyebrow-pill.eyebrow-gold { background: linear-gradient(#FFFDF7, #FFF3DF); border-color: rgba(200,144,48,0.42); box-shadow: 0 1px 2px rgba(24,10,20,0.03), 0 6px 16px rgba(200,144,48,0.16); } /* For a pill sitting on the CTA panel's own solid brand-pink background, where the white pill + dark-text combination the other eyebrows use would read as a hole in the panel. */ .eyebrow-pill.on-dark { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.38); color: #fff; box-shadow: 0 1px 2px rgba(24,10,20,0.08); } /* .champagne-band/.faq-intro/etc. get this same gap for free from their h2's own margin-top; .band-copy h3 and .cta-panel h2 are set flush (margin-top: 0) instead, so the pill needs to carry the gap itself in those two spots. */ .band-copy .eyebrow-pill, .cta-panel .eyebrow-pill { margin-bottom: 10px; } .champagne-band { /* Same deep-gold mesh recipe as .founder-cta-plate (three large, explicitly-sized ellipses), on a warmer #FDEFD0 base rather than the almost-white #FFF7EA the recipe started from: all three ellipses are corner/edge-anchored, so on a wide section there's real distance (particularly the right-hand side at mid-height) that no blob reaches — a too-pale base colour left that area reading as barely-there rather than as part of a deliberately gold section. */ background-color: #FDEFD0; background-image: radial-gradient(95% 60% at 14% 4%, rgba(224,175,72,0.34) 0%, rgba(224,175,72,0) 58%), radial-gradient(85% 55% at 96% 44%, rgba(192,138,46,0.28) 0%, rgba(192,138,46,0) 64%), radial-gradient(120% 70% at 42% 106%, rgba(224,175,72,0.30) 0%, rgba(224,175,72,0) 62%); padding: var(--space-9) 56px; text-align: center; } .champagne-band .band-inner { max-width: 820px; margin: 0 auto; } .champagne-band h2 { font-family: 'Cormorant Garamond', 'Cormorant Fallback', Georgia, serif; font-weight: 500; font-size: 40px; line-height: 1.04; margin: 10px 0 10px; color: var(--near-black); } .champagne-band p { font-size: 15.5px; line-height: 1.6; color: var(--body-text); margin: 0 auto; max-width: 640px; } @media (max-width: 640px) { .champagne-band h2 { white-space: normal !important; } } /* ── Scroll reveal ── */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard); } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* Grouped reveal: children come up one after another rather than as one block. The container itself stays visible so its own background never flashes in. */ .reveal-stagger > * { opacity: 0; transform: translateY(14px); transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard); } .reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); } .reveal-stagger > *:nth-child(1) { transition-delay: 0ms; } .reveal-stagger > *:nth-child(2) { transition-delay: 70ms; } .reveal-stagger > *:nth-child(3) { transition-delay: 140ms; } .reveal-stagger > *:nth-child(4) { transition-delay: 210ms; } .reveal-stagger > *:nth-child(5) { transition-delay: 280ms; } .reveal-stagger > *:nth-child(6) { transition-delay: 350ms; } .reveal-stagger > *:nth-child(n+7) { transition-delay: 420ms; } /* ── FAQ accordion ── */ .faq-item { /* A softer, shallower shadow than --shadow-card on purpose: that recipe is tuned for cards that need to lift off a busy mesh background, and on the FAQ's much calmer background it read as over-elevated rather than crisp. */ background: #fff; border: 1px solid var(--pink-border); border-radius: 22px; padding: 20px; cursor: pointer; -webkit-tap-highlight-color: transparent; box-shadow: 0 1px 2px rgba(24,10,20,0.03), 0 6px 14px rgba(240,18,140,0.06); transition: box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); } .faq-item:hover { box-shadow: 0 2px 4px rgba(24,10,20,0.04), 0 10px 22px rgba(240,18,140,0.10); } .faq-item:active { transform: scale(0.99); } .faq-item.is-open { border-color: rgba(240,18,140,0.28); box-shadow: 0 2px 4px rgba(24,10,20,0.04), 0 10px 22px rgba(240,18,140,0.10); } .faq-item .faq-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .faq-item .faq-q { font-family: 'Cormorant Garamond', 'Cormorant Fallback', Georgia, serif; font-size: 22px; line-height: 1.3; color: var(--near-black); } /* Chevron drawn from two bars: down when closed, up when open. The "+" in the markup is hidden rather than removed so this stays a pure CSS change across every page using .faq-item. */ .faq-item .faq-icon { position: relative; display: inline-block; width: 20px; height: 20px; font-size: 0; color: transparent; flex-shrink: 0; } /* Both bars pivot around the icon's exact centre point (each bar's inner edge sits there, via left/right + transform-origin), so rotating them always meets cleanly — mixing translateY(-50%) into the same transform as the rotate previously meant each bar spun around its own centre instead of a shared point, leaving a visible gap. */ .faq-item .faq-icon::before, .faq-item .faq-icon::after { content: ''; position: absolute; top: 50%; margin-top: -0.85px; width: 8px; height: 1.7px; border-radius: 2px; background: var(--warm-grey); transition: transform var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard); } .faq-item .faq-icon::before { left: 2px; transform-origin: 100% 50%; transform: rotate(45deg); } .faq-item .faq-icon::after { right: 2px; transform-origin: 0% 50%; transform: rotate(-45deg); } .faq-item.is-open .faq-icon::before { transform: rotate(-45deg); } .faq-item.is-open .faq-icon::after { transform: rotate(45deg); } .faq-item.is-open .faq-icon::before, .faq-item.is-open .faq-icon::after { background: var(--pink); } .faq-item .faq-a { font-size: 15px; line-height: 1.7; color: var(--body-text); max-height: 0; opacity: 0; margin-top: 0; overflow: hidden; transition: max-height var(--duration-base) var(--ease-standard), opacity var(--duration-base) var(--ease-standard), margin-top var(--duration-base) var(--ease-standard); } .faq-item.is-open .faq-a { max-height: 320px; opacity: 1; margin-top: 12px; } .faq-white .faq-item { background: #fff; } /* ── Marquee ── */ @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee-mask { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .marquee-track { display: flex; gap: 18px; width: max-content; animation: marquee 34s linear infinite; } .marquee-track:hover, .marquee-track:active, .marquee-wrap:active .marquee-track { animation-play-state: paused; } .retailer-card { width: 172px; flex-shrink: 0; border-radius: 22px; padding: 18px 16px 14px; text-align: center; } .retailer-card.is-live { /* No box-shadow, on purpose: any of the layered-shadow tokens (even --shadow-card) add a pink-tinted ambient glow that, on this row's own mesh gradient background, shows as a visible halo between cards rather than reading as elevation. A plain border is enough to separate these small cards from the gradient behind them. */ background: linear-gradient(165deg,#FFFFFF,#FDE8F5); border: 1px solid rgba(240,18,140,0.3); } .retailer-card.is-soon { /* White, not var(--ground)'s pink tint: that tint was chosen when this row sat on the section's old near-white #FFFBFD background, where it barely read as a colour at all. Now that the section is plain white, the same tint shows as a visible box behind each logo, competing with it rather than staying out of the way. */ background: #fff; border: 1px solid var(--pink-border); } .retailer-logo { height: 44px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; } .retailer-logo img { max-width: 100%; max-height: 100%; object-fit: contain; } .retailer-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 9px; border-radius: 100px; font-size: 9.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; } /* Status dot: solid and haloed for the connected retailer, flat and quiet for the rest. */ .retailer-status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; } .retailer-status.is-live { color: var(--pink); background: rgba(240,18,140,0.07); border: 1px solid rgba(240,18,140,0.24); } .retailer-status.is-live::before { background: var(--pink); box-shadow: 0 0 0 3px rgba(240,18,140,0.16); } .retailer-status.is-soon { color: #A8843C; background: rgba(200,144,48,0.07); border: 1px solid rgba(200,144,48,0.24); } .retailer-status.is-soon::before { background: rgba(200,144,48,0.55); } /* ── CTA panel ── */ .cta-panel { background-color: #F0128C; background-image: radial-gradient(circle at 12% 8%, rgba(255,111,194,0.75) 0%, transparent 48%), radial-gradient(circle at 88% 12%, rgba(255,63,164,0.55) 0%, transparent 45%), radial-gradient(circle at 70% 100%, rgba(120,0,110,0.45) 0%, transparent 55%), var(--gradient-brand); border-radius: 34px; padding: var(--space-8) 56px; text-align: center; box-shadow: 0 2px 4px rgba(24,10,20,0.10), 0 10px 24px rgba(240,18,140,0.22), 0 28px 60px rgba(240,18,140,0.28), 0 48px 100px rgba(240,18,140,0.24); position: relative; overflow: hidden; isolation: isolate; } .cta-panel::before { content: ''; position: absolute; top: -60px; right: -40px; width: 260px; height: 260px; background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%); } /* Gold hairline across the top edge, the same motif as the wordmark rule and the footer divider, so the closing panel reads as part of the gold system and not just more pink. */ .cta-panel::after { content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1.5px; border-radius: 1px; background: var(--gradient-gold); opacity: 0.85; } .cta-panel h2 { font-family: 'Cormorant Garamond', 'Cormorant Fallback', Georgia, serif; font-weight: 500; font-size: 42px; line-height: 1.02; color: #fff; margin: 0 0 20px; position: relative; } .cta-panel p { position: relative; } @media (max-width: 640px) { .cta-panel { padding: var(--space-7) 28px; border-radius: 24px; } .cta-panel h2 { font-size: 32px; } } /* ── Footer ── Treated as the page's closing moment rather than a link list: its own mesh-gradient band, the wordmark at display size, and the tagline set in the serif as a closing line. Unlike every section above it, this one stays a flat band with a plain rule across the top rather than joining the stacked-plate system — a curved card here read as one plate too many rather than a clean close to the page. */ .footer-divider { width: 100%; height: 1.5px; background: var(--gradient-gold); box-shadow: 0 6px 16px -6px rgba(200,144,48,0.3); margin-bottom: 0; } .site-footer { /* Full-bleed band with its content still held to the 1180px page measure. */ max-width: none; margin: 0; padding: var(--space-8) max(56px, calc((100% - 1180px) / 2)) var(--space-7); background-color: #FDEFF8; background-image: radial-gradient(circle at 12% 0%, rgba(255,63,164,0.16) 0%, transparent 52%), radial-gradient(circle at 88% 20%, rgba(240,208,112,0.20) 0%, transparent 48%), radial-gradient(circle at 50% 110%, rgba(212,0,168,0.10) 0%, transparent 55%); display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px var(--space-7); } .site-footer .wordmark--footer .wordmark-text { font-size: 46px; } .site-footer .wordmark--footer .wordmark-rule { margin-top: 8px; } .site-footer .footer-desc { font-family: 'Cormorant Garamond', 'Cormorant Fallback', Georgia, serif; font-size: 23px; font-weight: 400; color: var(--near-black); max-width: 300px; line-height: 1.35; margin: var(--space-5) 0 0; } .footer-appstore { display: inline-block; margin-top: var(--space-5); transition: transform var(--duration-fast) var(--ease-standard); } .footer-appstore:active { transform: scale(0.97); } .footer-appstore img { height: 40px; width: auto; display: block; } .cta-appstore { display: block; margin-top: 16px; } .cta-appstore img { height: 40px; width: auto; display: block; margin: 0 auto; } .site-footer .footer-col { display: flex; flex-direction: column; gap: var(--space-1); align-content: start; } .site-footer .footer-heading { font-size: 9.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: #A8843C; margin-bottom: var(--space-2); } .site-footer .footer-col a { position: relative; color: var(--near-black); font-size: 15px; padding: var(--space-2) 0; width: fit-content; transition: color var(--duration-fast) var(--ease-standard); } .site-footer .footer-col a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: var(--space-1); height: 1.5px; border-radius: 1px; background: var(--gradient-gold); transition: right var(--duration-base) var(--ease-standard); } .site-footer .footer-col a:hover { color: var(--pink); } .site-footer .footer-col a:hover::after, .site-footer .footer-col a:active::after { right: 0; } .site-footer .footer-bottom { grid-column: 1 / -1; border-top: 1px solid rgba(200,144,48,0.24); margin-top: var(--space-2); padding-top: var(--space-5); font-size: 12.5px; color: var(--warm-grey); } @media (max-width: 640px) { .site-footer { grid-template-columns: 1fr 1fr; padding: var(--space-7) 20px var(--space-6); gap: var(--space-6) var(--space-5); } .site-footer .wordmark--footer .wordmark-text { font-size: 38px; } .site-footer .footer-desc { font-size: 21px; max-width: 340px; } .site-footer > div:first-child { grid-column: 1 / -1; } } /* ── Generic containers ── */ .wrap-1040 { max-width: 1040px; margin: 0 auto; } .wrap-1180 { max-width: 1180px; margin: 0 auto; } .wrap-900 { max-width: 900px; margin: 0 auto; } .wrap-820 { max-width: 820px; margin: 0 auto; } .wrap-760 { max-width: 760px; margin: 0 auto; } .wrap-660 { max-width: 660px; margin: 0 auto; } .wrap-620 { max-width: 620px; margin: 0 auto; } @media (min-width: 721px) and (max-width: 900px) { .site-nav { padding-left: 16px; padding-right: 12px; } } @media (max-width: 900px) { section:not(:has(> .champagne-band)) { padding-left: 20px; padding-right: 20px; } .champagne-band { padding: var(--space-8) 20px; } } /* ── Accessibility guardrail ── Every animation on the site (sparkle pulse, headline reveal, scroll reveals, parallax, marquee) collapses to its finished state here. The JS-driven parallax checks the same media query before binding its scroll listener. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: 0.001ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } .marquee-track { animation: none !important; } .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; } }