/* ========================================================================== THE CUPCAKE CARTEL, Design System Warm editorial. Cream base, confident type, pink accents, real motion. ========================================================================== */ /* --- Design tokens ------------------------------------------------------ */ :root { /* Surfaces, warm, never clinical white */ --paper: #FBF8F4; /* base */ --paper-2: #F4EEE6; /* panels, alternating sections */ --paper-3: #EBE3D8; /* deeper panel / placeholders */ --wash: #FDF0F7; /* magenta wash */ --wash-2: #FBDCEC; /* deeper magenta tint */ /* Ink, warm near-black, not pure black */ --ink: #17120F; --ink-2: #2E2720; --muted: #6E655A; --muted-2: #948A7D; /* --- BRAND (sampled from the logo files) ------------------------------- --magenta #EA3192 the official brand magenta. Display/large use only: 3.7:1 on cream, which passes for large bold text. --pink-hot #D42583 same hue, darkened for button fills, white text on it hits 4.8:1, so it passes AA at any size. --pink-ink #C21D77 for small text on cream, 5.3:1. --mint #00FD91 official brand green. Ink on it is 13.7:1. -------------------------------------------------------------------- */ --magenta: #EA3192; --pink: #FBDCEC; --pink-mid: #F59BC8; --pink-hot: #D42583; --pink-ink: #C21D77; --mint: #00FD91; --mint-soft: #D6FFEC; --mint-ink: #06603A; /* Dark anchor (footer + inverted blocks) */ --dark: #14100D; --dark-2: #241D17; /* Lines */ --line: rgba(25, 20, 16, 0.13); --line-soft: rgba(25, 20, 16, 0.07); /* Type */ --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --body: 'Inter', 'Helvetica Neue', Arial, sans-serif; --accent: 'Instrument Serif', Georgia, serif; /* Rhythm */ --gutter: clamp(1.25rem, 5vw, 5rem); --section-y: clamp(3.25rem, 6.4vw, 6rem); --max: 1400px; --max-text: 66ch; --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease2: cubic-bezier(0.65, 0, 0.35, 1); } /* --- Reset -------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* MOBILE FIX: overflow-x on alone is propagated to the viewport, which leaves the *document* 167px wider than the screen (the .scrapbook fly-in transforms spill past the container). On phones and tablets that widens the layout viewport, so the fixed header renders wider than the screen and the nav toggle lands off-screen. Clipping on stops the document growing. `hidden` first as a fallback for browsers without `clip` (iOS < 16). */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 1rem; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button, input { font: inherit; color: inherit; } h1, h2, h3, h4, p, figure, blockquote { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } [hidden] { display: none !important; } /* --- Typography --------------------------------------------------------- */ .display { font-family: var(--display); font-weight: 800; line-height: 0.93; letter-spacing: -0.035em; text-transform: uppercase; text-wrap: balance; } .d1 { font-size: clamp(1.95rem, 4.6vw, 3.6rem); } .d2 { font-size: clamp(2rem, 5.2vw, 4.2rem); } .d3 { font-size: clamp(1.4rem, 3vw, 2.4rem); letter-spacing: -0.025em; } .eyebrow { font-size: clamp(0.66rem, 1.1vw, 0.74rem); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--pink-ink); } .eyebrow--muted { color: var(--muted); } .lede { font-size: clamp(1.05rem, 1.75vw, 1.3rem); line-height: 1.55; color: var(--ink-2); max-width: var(--max-text); text-wrap: pretty; } .body-copy { color: var(--muted); max-width: var(--max-text); text-wrap: pretty; } /* --- Layout ------------------------------------------------------------- */ /* Anchor links shouldn't land under the fixed header */ [id] { scroll-margin-top: 116px; } .wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-y); position: relative; } .section--tight { padding-block: clamp(2.5rem, 4.6vw, 4rem); } .section--paper2 { background: var(--paper-2); } .section--wash { background: var(--wash); } /* Inverted (dark) block */ .section--dark { background: var(--dark); color: var(--paper); } .section--dark .lede { color: rgba(251,248,243,.8); } .section--dark .body-copy { color: rgba(251,248,243,.62); } .section--dark .eyebrow { color: var(--pink-mid); } /* --- A11y --------------------------------------------------------------- */ .skip { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--pink-hot); color: #fff; padding: .75rem 1.25rem; font-weight: 600; } .skip:focus { left: 0; } :where(a, button, input, summary):focus-visible { outline: 2px solid var(--pink-hot); outline-offset: 3px; border-radius: 2px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --- Buttons ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: 1rem 1.9rem; font-weight: 600; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; border: 1px solid transparent; border-radius: 100px; cursor: pointer; transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); white-space: nowrap; max-width: 100%; text-align: center; position: relative; overflow: hidden; } .btn--primary { background: var(--pink-hot); color: #fff; box-shadow: 0 1px 2px rgba(168,31,80,.16); } .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -8px rgba(168,31,80,.45); } .btn--ghost { border-color: var(--line); color: var(--ink); } .btn--ghost:hover { border-color: var(--ink); transform: translateY(-2px); } .btn--sm { padding: .7rem 1.3rem; font-size: .7rem; } .section--dark .btn--ghost { border-color: rgba(251,248,243,.28); color: var(--paper); } .section--dark .btn--ghost:hover { border-color: var(--paper); background: var(--paper); color: var(--ink); } @media (max-width: 560px) { .btn { white-space: normal; line-height: 1.35; } } /* Ripple sweep on primary buttons */ .btn--primary::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); transform: translateX(-100%); transition: transform .7s var(--ease); } .btn--primary:hover::before { transform: translateX(100%); } /* --- Header ------------------------------------------------------------- */ .header { position: fixed; inset: 0 0 auto 0; z-index: 100; border-bottom: 1px solid transparent; transition: background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); } /* Half the header sits over the hero photo before you scroll, this keeps the nav legible against it without making the top of the page look heavy. */ .header::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(20,16,13,.50) 0%, rgba(20,16,13,.22) 60%, transparent 100%); transition: opacity .4s var(--ease); } .header.is-stuck::before { opacity: 0; } /* Sitting over the hero photo, the whole header flips to light-on-dark */ .header:not(.is-stuck) .brand__wordmark { filter: brightness(0) invert(1); } .header:not(.is-stuck) .nav__link { color: rgba(255,255,255,.92); } .header:not(.is-stuck) .nav__link:hover { color: #fff; } .header:not(.is-stuck) .nav__toggle span, .header:not(.is-stuck) .nav__toggle span::before, .header:not(.is-stuck) .nav__toggle span::after { background: #fff; } /* Inner pages start stuck, so they keep the dark-on-cream treatment */ .header__inner { position: relative; z-index: 1; } .header.is-stuck { background: rgba(251, 248, 243, 0.86); backdrop-filter: saturate(170%) blur(14px); -webkit-backdrop-filter: saturate(170%) blur(14px); border-bottom-color: var(--line-soft); } .header__inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.25rem; min-height: 98px; } .brand { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; } .brand__mark { width: 34px; height: 34px; border-radius: 50%; background: var(--pink-hot); color: #fff; display: grid; place-items: center; font-family: var(--display); font-weight: 900; font-size: .8rem; letter-spacing: -0.04em; flex-shrink: 0; } .brand__mark img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; } .brand__name { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: .84rem; letter-spacing: .03em; line-height: 1.1; } .brand__name span { display: block; font-size: .56rem; letter-spacing: .19em; color: var(--muted); font-weight: 600; } .brand__wordmark { height: 76px; width: auto; display: block; } .footer .brand__wordmark { height: 92px; margin-left: -6px; } @media (max-width: 620px) { .brand__wordmark { height: 56px; } .header__cta .btn { display: none; } /* the capture form is right there */ } .nav { display: flex; align-items: center; justify-content: center; gap: clamp(1.1rem, 2.2vw, 2.1rem); justify-self: center; } .header__cta { display: flex; align-items: center; gap: .5rem; justify-self: end; } .nav__link { font-size: .76rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); transition: color .25s var(--ease); position: relative; } .nav__link::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 0; height: 1.5px; background: var(--pink-hot); transition: width .3s var(--ease); } .nav__link:hover { color: var(--pink-ink); } .nav__link:hover::after { width: 100%; } .nav__toggle { display: none; background: none; border: 0; cursor: pointer; padding: .5rem; width: 44px; height: 44px; align-items: center; justify-content: center; } .nav__toggle span { display: block; width: 22px; height: 1.5px; background: var(--ink); position: relative; transition: background .2s var(--ease); } .nav__toggle span::before, .nav__toggle span::after { content: ''; position: absolute; left: 0; width: 22px; height: 1.5px; background: var(--ink); transition: transform .3s var(--ease), top .3s var(--ease); } .nav__toggle span::before { top: -7px; } .nav__toggle span::after { top: 7px; } .nav__toggle[aria-expanded="true"] span { background: transparent; } .nav__toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); } .nav__toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); } @media (max-width: 940px) { .nav__toggle { display: flex; } .nav { position: fixed; inset: 98px 0 auto 0; /* MOBILE FIX: .nav keeps justify-self:center from the desktop rule. Per CSS Box Alignment a non-stretch justify-self makes even a fixed-position box size to fit-content and centre inside its inset-modified containing block, so inset:...0 auto 0 was NOT filling the screen: the drawer came out 172px wide on a 390px phone, floating in the middle of the hero. */ justify-self: stretch; flex-direction: column; align-items: flex-start; gap: 0; background: rgba(251,248,243,.98); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); padding: 1rem var(--gutter) 2.5rem; border-bottom: 1px solid var(--line-soft); transform: translateY(-12px); opacity: 0; pointer-events: none; /* MOBILE FIX (a11y): opacity+pointer-events alone left the closed drawer in the tab order, so keyboard users tabbed into an invisible menu. visibility:hidden removes it from the tab order and the a11y tree; it is delayed on close so the fade still plays. */ visibility: hidden; transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s; max-height: calc(100dvh - 98px); overflow-y: auto; } .nav.is-open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; } .nav__link { width: 100%; padding: 1.05rem 0; font-size: 1.05rem; border-bottom: 1px solid var(--line-soft); } .nav__link::after { display: none; } .nav .btn { margin-top: 1.5rem; width: 100%; } /* MOBILE FIX: over the hero photo the header flips its links to white, which is right for the desktop bar sitting on the image but wrong for the drawer, whose panel is cream (#FBF8F3). Opening the menu from the top of the page gave white-on-cream, about 1.05:1: the items were invisible. Same specificity as the rule at line 190, placed later, so it wins here only. */ .header .nav__link, .header:not(.is-stuck) .nav__link { color: var(--ink); } .header .nav__link:hover, .header:not(.is-stuck) .nav__link:hover { color: var(--pink-ink); } } /* --- Media placeholder system ------------------------------------------- */ /* Swap in a real photo: style="--img:url('assets/img/hero.jpg')" */ .media { position: absolute; inset: 0; background-color: var(--paper-3); background-image: radial-gradient(120% 90% at 76% 14%, rgba(234,48,146,.28) 0%, transparent 58%), radial-gradient(90% 72% at 10% 90%, rgba(0,253,145,.34) 0%, transparent 62%), repeating-linear-gradient(118deg, rgba(25,20,16,.05) 0 2px, transparent 2px 11px); } .media[style*="--img"] { background-image: var(--img); background-size: cover; background-position: center; } .media__tag { position: absolute; left: 1.1rem; bottom: 1.1rem; right: 1.1rem; z-index: 1; font-size: .57rem; letter-spacing: .17em; text-transform: uppercase; color: rgba(25,20,16,.45); border: 1px dashed rgba(25,20,16,.22); padding: .45rem .7rem; border-radius: 3px; pointer-events: none; line-height: 1.5; } .media[style*="--img"] .media__tag { display: none; } .frame { position: relative; overflow: hidden; border-radius: 5px; background: var(--paper-3); } .frame--tall { aspect-ratio: 3 / 4; } .frame--wide { aspect-ratio: 16 / 10; } .frame--square { aspect-ratio: 1 / 1; } /* --- Hero: full-width photo, everything centred on top of it ------------ */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; } .hero__media { position: absolute; inset: 0; z-index: 0; } .hero__media .media { transform: scale(1.06); animation: kenburns 26s ease-in-out infinite alternate; } @keyframes kenburns { from { transform: scale(1.06) translate3d(0, 0, 0); } to { transform: scale(1.14) translate3d(-1.4%, -1.6%, 0); } } @media (prefers-reduced-motion: reduce) { .hero__media .media { animation: none; } } .hero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,16,13,.56) 0%, rgba(20,16,13,.44) 38%, rgba(20,16,13,.84) 100%); } .hero__overlay { position: relative; z-index: 2; width: 100%; padding-top: clamp(7rem, 12vw, 9rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); text-align: center; color: var(--paper); } .hero__overlay-inner { display: flex; flex-direction: column; align-items: center; } .hero__eyebrow { color: rgba(251,248,244,.92); text-shadow: 0 1px 10px rgba(0,0,0,.5); margin-bottom: clamp(1rem, 2.2vw, 1.6rem); } /* Countdown, the biggest thing on the page */ .countdown--xl { margin: 0; } .countdown--xl .countdown__label { justify-content: center; color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.55); font-size: clamp(.7rem, 1.32vw, .9rem); font-weight: 700; letter-spacing: .18em; margin-bottom: clamp(.75rem, 1.5vw, 1.1rem); } .countdown--xl .countdown__dot { width: 8px; height: 8px; } .countdown--xl .countdown__grid { justify-content: center; gap: clamp(.42rem, 1.1vw, .85rem); } .countdown--xl .countdown__unit { min-width: clamp(64px, 10.4vw, 126px); padding: clamp(.6rem, 1.4vw, 1.1rem) clamp(.42rem, 1.1vw, .9rem); background: rgba(20,16,13,.30); border-color: rgba(251,248,244,.34); border-radius: 8px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: none; } .countdown--xl .countdown__num { color: #fff; font-size: clamp(1.75rem, 5.1vw, 3.9rem); text-shadow: 0 2px 18px rgba(0,0,0,.35); } .countdown--xl .countdown__unit-label { color: rgba(251,248,244,.75); font-size: clamp(.46rem, .78vw, .56rem); margin-top: .4rem; } .countdown--xl .countdown__live { color: var(--mint); font-size: clamp(1.35rem, 3.6vw, 2.4rem); } /* Waitlist capture, the main job of this page, so it gets the good treatment */ .hero__capture { width: 100%; max-width: 462px; margin-top: clamp(1.2rem, 2.4vw, 1.8rem); padding: clamp(1.05rem, 1.9vw, 1.4rem) clamp(1.05rem, 1.9vw, 1.35rem) clamp(.85rem, 1.6vw, 1.05rem); background: rgba(251, 248, 244, .96); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); border: 1px solid rgba(255, 255, 255, .55); border-radius: 16px; box-shadow: 0 34px 80px -34px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.7); text-align: center; } .hero__capture-eyebrow { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(.92rem, 1.55vw, 1.12rem); letter-spacing: -0.02em; line-height: 1.1; color: var(--pink-ink); } .hero__capture-title { margin-top: .42rem; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(.92rem, 1.55vw, 1.12rem); letter-spacing: -0.025em; color: var(--ink); line-height: 1.1; } .hero__capture .form { margin-top: .8rem; max-width: none; } .hero__capture .form__note { margin-top: .65rem; font-size: .63rem; color: var(--muted); } /* Don't reserve a blank line for a message that isn't there yet */ .hero__capture .form__msg { min-height: 0; margin: 0; font-size: .82rem; } .hero__capture .form__msg:not(:empty) { margin-top: .7rem; } /* Input and button as one pill rather than two floating shapes */ .form--joined { display: flex; align-items: center; gap: 0; background: #fff; border: 1px solid var(--line); border-radius: 100px; padding: 4px 4px 4px 1.15rem; transition: border-color .3s var(--ease), box-shadow .3s var(--ease); } .form--joined:focus-within { border-color: var(--pink-hot); box-shadow: 0 0 0 4px rgba(208,46,102,.13); } .form--joined .form__field { flex: 1 1 auto; min-width: 0; } .form--joined .form__input { border: 0; background: transparent; border-radius: 0; padding: .7rem 0; font-size: .88rem; } .form--joined .form__input:focus { box-shadow: none; border-color: transparent; } .form--joined .btn { flex: 0 0 auto; padding: .7rem 1.3rem; font-size: .67rem; } @media (max-width: 520px) { .form--joined { flex-direction: column; align-items: stretch; border-radius: 14px; padding: .5rem; gap: .5rem; } .form--joined .form__input { padding: .85rem 1rem; } .form--joined .btn { width: 100%; } } /* Credit pinned to the corner of the photo, out of the centred stack */ .hero__cap { position: absolute; left: var(--gutter); bottom: clamp(1.1rem, 2.4vw, 1.9rem); z-index: 3; margin: 0; max-width: 48ch; text-align: left; text-shadow: 0 1px 10px rgba(0,0,0,.6); font-size: .62rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: rgba(251,248,244,.72); line-height: 1.75; } /* MOBILE FIX: raised from 700px to 940px. Between 701 and 940 the credit was still pinned to the photo's bottom-left corner, where the waiting-list card overlapped it (verified at 768 and 834). 940 matches the mobile-nav breakpoint and leaves the signed-off desktop layout untouched. */ @media (max-width: 940px) { .hero__cap { position: static; margin-top: 1.5rem; max-width: none; text-align: center; } } .hero__cap b { color: #fff; font-weight: 600; } /* --- The statement, directly below the photo ---------------------------- */ .hero-below { background: var(--paper); text-align: center; } .hero-below__inner { display: flex; flex-direction: column; align-items: center; } .hero-below .hero__headline { margin-block: 0 1.1rem; } .hero-below .hero__headline em { font-family: var(--accent); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -0.02em; color: var(--pink-hot); } .hero-below .lede { margin-inline: auto; max-width: 48ch; } .hero-below .hero__actions { justify-content: center; margin-top: 1.6rem; } .hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; } @media (max-width: 940px) { .hero { min-height: 0; } .hero__overlay { padding-top: clamp(8rem, 22vw, 10rem); padding-bottom: clamp(3rem, 8vw, 4rem); } } @media (max-width: 560px) { .hero__capture { max-width: none; } .hero-below .hero__actions .btn { width: 100%; } } /* Headline mask reveal */ .reveal-line { display: block; overflow: hidden; } .reveal-line > span { display: block; transform: translateY(105%); transition: transform 1s var(--ease); } .is-loaded .reveal-line > span { transform: none; } .is-loaded .reveal-line:nth-child(2) > span { transition-delay: .09s; } .is-loaded .reveal-line:nth-child(3) > span { transition-delay: .18s; } .is-loaded .reveal-line:nth-child(4) > span { transition-delay: .27s; } @media (prefers-reduced-motion: reduce) { .reveal-line > span { transform: none !important; } } .hero__fade { opacity: 0; transform: translateY(16px); transition: opacity .9s var(--ease) .45s, transform .9s var(--ease) .45s; } .is-loaded .hero__fade { opacity: 1; transform: none; } /* --- Countdown ---------------------------------------------------------- */ .countdown { margin-block: 0 1.8rem; } .countdown__label { display: flex; align-items: center; gap: .65rem; margin-bottom: .85rem; font-size: .66rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--pink-ink); } .countdown__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pink-hot); flex-shrink: 0; animation: pulse 2.2s var(--ease) infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(208,46,102,.5); } 70% { box-shadow: 0 0 0 11px rgba(208,46,102,0); } 100% { box-shadow: 0 0 0 0 rgba(208,46,102,0); } } .countdown__grid { display: flex; gap: clamp(.45rem, 1.3vw, .9rem); flex-wrap: wrap; } .countdown__unit { min-width: clamp(62px, 11vw, 92px); border: 1px solid var(--line); border-radius: 5px; background: #fff; padding: clamp(.6rem, 1.4vw, .9rem) clamp(.45rem, 1.2vw, .8rem); text-align: center; box-shadow: 0 1px 2px rgba(25,20,16,.04); } .countdown__num { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(1.6rem, 4vw, 2.6rem); line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; color: var(--ink); } .countdown__num.is-ticking { animation: tick .42s var(--ease); } @keyframes tick { 0% { transform: translateY(0); opacity: 1; } 40% { transform: translateY(-38%); opacity: 0; } 41% { transform: translateY(38%); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } .countdown__unit-label { display: block; margin-top: .4rem; font-size: .55rem; font-weight: 600; letter-spacing: .19em; text-transform: uppercase; color: var(--muted-2); } .countdown.is-live .countdown__grid { display: none; } .countdown__live { display: none; } .countdown.is-live .countdown__live { display: inline-flex; align-items: center; gap: .7rem; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.3rem, 3.2vw, 2rem); letter-spacing: -0.03em; color: var(--pink-hot); } /* --- Marquee ------------------------------------------------------------ */ .marquee { border-block: 1px solid var(--line-soft); padding-block: clamp(.85rem, 1.9vw, 1.25rem); overflow: hidden; display: flex; user-select: none; background: var(--wash-2); } /* The track holds two identical copies (the clone is added in site.js), so the loop shifts by exactly -50%, one full copy. Spacing lives on the item, not the track, otherwise the gap throws the seam out and you see a blank patch. */ .marquee__track { display: flex; flex-shrink: 0; gap: 0; animation: scroll 44s linear infinite; } @keyframes scroll { to { transform: translateX(-50%); } } .marquee__item { display: flex; align-items: center; gap: 2.75rem; flex-shrink: 0; padding-right: 2.75rem; font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(.8rem, 1.6vw, 1.05rem); letter-spacing: .01em; color: var(--ink); white-space: nowrap; } .marquee__item::after { content: '●'; color: var(--pink-hot); font-size: .5em; } .marquee:hover .marquee__track { animation-play-state: paused; } /* --- Stats -------------------------------------------------------------- */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: 6px; overflow: hidden; } .stat { background: var(--paper); padding: clamp(1.4rem, 3.2vw, 2.5rem) clamp(1rem, 2vw, 1.6rem); } .stat__num { font-family: var(--display); font-weight: 800; letter-spacing: -0.045em; line-height: 1; font-size: clamp(1.9rem, 4.6vw, 3.3rem); color: var(--ink); font-variant-numeric: tabular-nums; } .stat__num sup { font-size: .45em; vertical-align: super; color: var(--pink-hot); letter-spacing: 0; } .stat__label { margin-top: .65rem; font-size: .67rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); line-height: 1.5; } @media (max-width: 780px) { .stats { grid-template-columns: repeat(2, 1fr); } } /* --- Section heading ---------------------------------------------------- */ .sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 3.25rem); align-items: end; margin-bottom: clamp(1.75rem, 3.6vw, 2.75rem); } .sec-head__title { margin-top: .9rem; } @media (max-width: 860px) { .sec-head { grid-template-columns: 1fr; align-items: start; } } /* --- Founders ----------------------------------------------------------- */ .founders { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); } @media (max-width: 780px) { .founders { grid-template-columns: 1fr; } } .founder { position: relative; } .founder__photo { position: relative; overflow: hidden; border-radius: 6px; aspect-ratio: 4 / 5; background: var(--paper-3); } .founder__photo .media { transition: transform 1.1s var(--ease); } .founder:hover .founder__photo .media { transform: scale(1.05); } .founder__badge { position: absolute; left: 1rem; top: 1rem; z-index: 2; background: var(--pink-hot); color: #fff; font-size: .58rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; padding: .42rem .8rem; border-radius: 100px; } .founder__name { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.3rem, 2.4vw, 1.9rem); letter-spacing: -0.03em; line-height: 1.05; margin-top: 1.25rem; } .founder__role { margin-top: .5rem; font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--pink-ink); } .founder__body { margin-top: .9rem; font-size: .95rem; color: var(--muted); line-height: 1.65; } .founder-strip { margin-top: clamp(2.5rem, 5vw, 4rem); border: 1px solid var(--line); border-radius: 6px; background: var(--paper); padding: clamp(1.5rem, 3.5vw, 2.5rem); display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); } .founder-strip__item { display: flex; flex-direction: column; gap: .5rem; } .founder-strip__k { font-family: var(--display); font-weight: 800; font-size: clamp(1.1rem, 2vw, 1.45rem); letter-spacing: -0.03em; text-transform: uppercase; } .founder-strip__v { font-size: .84rem; color: var(--muted); line-height: 1.55; } /* --- Distance scale ----------------------------------------------------- */ .distances { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; } .distance-chip { border: 1px solid var(--line); border-radius: 100px; padding: .5rem 1.05rem; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); background: var(--paper); transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); } .distance-chip:hover { background: var(--pink-hot); border-color: var(--pink-hot); color: #fff; transform: translateY(-2px); } /* --- Pillars ------------------------------------------------------------ */ .pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: 6px; overflow: hidden; } .pillar { background: var(--paper); padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.4rem, 2.4vw, 2rem); display: flex; flex-direction: column; gap: .9rem; transition: background .45s var(--ease); position: relative; } .pillar::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: var(--pink-hot); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); } .pillar:hover::before { transform: scaleX(1); } .pillar:hover { background: var(--wash); } .pillar__idx { font-family: var(--display); font-size: .78rem; font-weight: 700; letter-spacing: .1em; color: var(--pink-hot); } .pillar__title { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.1rem, 1.9vw, 1.4rem); letter-spacing: -0.02em; line-height: 1.05; } .pillar__body { font-size: .93rem; color: var(--muted); line-height: 1.65; } /* --- Gallery mosaic ----------------------------------------------------- */ .gallery { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(115px, 14.5vw, 215px); gap: clamp(6px, .7vw, 11px); } .gallery__cell { position: relative; overflow: hidden; border-radius: 5px; background: var(--paper-3); } .gallery__cell .media { transition: transform 1.1s var(--ease); } .gallery__cell:hover .media { transform: scale(1.05); } .g1 { grid-column: span 7; grid-row: span 2; } .g2 { grid-column: span 5; grid-row: span 1; } .g3 { grid-column: span 5; grid-row: span 1; } .g4 { grid-column: span 4; grid-row: span 1; } .g5 { grid-column: span 4; grid-row: span 1; } .g6 { grid-column: span 4; grid-row: span 1; } @media (max-width: 900px) { .gallery { grid-auto-rows: clamp(105px, 23vw, 180px); } .g1 { grid-column: span 12; grid-row: span 2; } .g2, .g3 { grid-column: span 6; } .g4, .g5, .g6 { grid-column: span 4; } } @media (max-width: 560px) { .gallery { grid-auto-rows: clamp(95px, 29vw, 150px); } .g2, .g3, .g4, .g5 { grid-column: span 6; } .g6 { display: none; } } .gallery-note { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-soft); border-block: 1px solid var(--line-soft); margin-top: clamp(1.75rem, 3.4vw, 2.75rem); } @media (max-width: 700px) { .gallery-note { grid-template-columns: 1fr; } } .gallery-note span { background: var(--paper-2); padding: clamp(1rem, 2.2vw, 1.5rem) clamp(.9rem, 2vw, 1.4rem); font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(.95rem, 1.9vw, 1.35rem); letter-spacing: -0.02em; color: var(--ink); text-align: center; opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); } .gallery-note.is-in span { opacity: 1; transform: none; } .gallery-note.is-in span:nth-child(2) { transition-delay: .14s; } .gallery-note.is-in span:nth-child(3) { transition-delay: .28s; } .gallery-note.reveal { opacity: 1; transform: none; } /* --- Split feature ------------------------------------------------------ */ .split { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .split--reverse .split__media { order: 2; } .split--top { align-items: start; } @media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split--reverse .split__media { order: 0; } } .split__body > * + * { margin-top: 1.15rem; } /* --- Testimonials ------------------------------------------------------- */ .quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.9rem, 1.8vw, 1.4rem); } @media (max-width: 900px) { .quotes { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .quotes { grid-template-columns: 1fr; } } .quote { position: relative; background: var(--paper); border-radius: 10px; padding: clamp(1.4rem, 2.6vw, 2rem); display: flex; flex-direction: column; gap: 1.1rem; border: 1px solid var(--line-soft); transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease); } .quote:hover { transform: translateY(-5px); box-shadow: 0 22px 46px -26px rgba(25,20,16,.45); border-color: var(--line); } .quote__text { font-family: var(--body); font-weight: 400; font-size: clamp(.98rem, 1.3vw, 1.06rem); line-height: 1.6; color: var(--ink-2); letter-spacing: -0.004em; text-wrap: pretty; } .quote__by { display: flex; align-items: center; gap: .7rem; margin-top: auto; font-size: .72rem; font-weight: 600; letter-spacing: .08em; color: var(--ink); } .quote__av { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: var(--wash-2); color: var(--pink-ink); font-family: var(--display); font-weight: 800; font-size: .66rem; letter-spacing: .02em; } /* The one that says it best gets the room to say it */ .quote--featured { grid-column: span 2; background: var(--mint-soft); border-color: transparent; } @media (max-width: 600px) { .quote--featured { grid-column: span 1; } } .quote--featured .quote__av { background: rgba(0,164,95,.16); color: #06603A; } .quote--featured .quote__text { color: #123322; } .quote__pull { display: block; margin-bottom: .6rem; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.35rem, 3vw, 2.15rem); letter-spacing: -0.035em; line-height: 1; color: var(--ink); } .quote__mark { font-family: var(--accent); font-size: 2.2rem; line-height: .5; color: var(--pink-mid); } .quote--featured .quote__mark { color: #00A45F; } /* --- Membership --------------------------------------------------------- */ .member-panel { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: clamp(1.75rem, 3.5vw, 3rem); display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); } .price { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; } .price__amount { font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem, 5.5vw, 3.6rem); letter-spacing: -0.045em; line-height: 1; } .price__period { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .price__alt { margin-top: .8rem; font-size: .8rem; color: var(--muted); letter-spacing: .03em; } .incl { display: flex; flex-direction: column; gap: .8rem; } .incl li { display: flex; gap: .8rem; align-items: flex-start; font-size: .93rem; color: var(--muted); line-height: 1.5; } .incl li::before { content: ''; flex-shrink: 0; margin-top: .55rem; width: 6px; height: 6px; border-radius: 50%; background: var(--pink-hot); } .incl li b { color: var(--ink); font-weight: 600; } .timeline { display: flex; flex-direction: column; margin-top: 1.4rem; } .timeline li { display: grid; grid-template-columns: auto 1fr; gap: 1.15rem; padding-block: 1rem; border-bottom: 1px solid var(--line-soft); } .timeline li:first-child { border-top: 1px solid var(--line-soft); } .timeline__date { font-family: var(--display); font-weight: 700; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--pink-ink); min-width: 8ch; } .timeline__what { font-size: .9rem; color: var(--muted); } .timeline li.is-next .timeline__what { color: var(--ink); font-weight: 500; } /* --- Signup ------------------------------------------------------------- */ .signup { position: relative; overflow: hidden; background: linear-gradient(158deg, var(--wash-2) 0%, var(--wash) 48%, #FDF5F0 100%); } .signup::before { content: ''; position: absolute; inset: auto 50% -55% auto; width: min(820px, 118vw); aspect-ratio: 1; transform: translateX(50%); background: radial-gradient(circle, rgba(208,46,102,.14) 0%, transparent 62%); pointer-events: none; } .signup__inner { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; } .signup__title { margin-block: 1.1rem 1.1rem; max-width: 18ch; } .signup__lede { margin-bottom: 2.25rem; text-align: center; } .form { display: flex; gap: .55rem; width: 100%; max-width: 520px; flex-wrap: wrap; } .form__field { flex: 1 1 240px; } .form__input { width: 100%; padding: 1.05rem 1.4rem; background: #fff; border: 1px solid var(--line); border-radius: 100px; color: var(--ink); font-size: .95rem; transition: border-color .3s var(--ease), box-shadow .3s var(--ease); } .form__input::placeholder { color: var(--muted-2); } .form__input:focus { outline: none; border-color: var(--pink-hot); box-shadow: 0 0 0 4px rgba(208,46,102,.13); } .form .btn { flex: 0 0 auto; } @media (max-width: 520px) { .form .btn { width: 100%; } } .form__note { margin-top: 1rem; font-size: .73rem; color: var(--muted); } .form__msg { margin-top: .9rem; font-size: .88rem; min-height: 1.4em; font-weight: 500; } .form__msg.is-ok { color: var(--pink-ink); } .form__msg.is-err { color: #B3261E; } /* --- FAQ ---------------------------------------------------------------- */ .faq-group + .faq-group { margin-top: clamp(2.5rem, 5vw, 4rem); } .faq-group__title { margin-bottom: 1.25rem; } .faq { border-top: 1px solid var(--line-soft); } .faq:last-child { border-bottom: 1px solid var(--line-soft); } .faq summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; padding-block: 1.3rem; cursor: pointer; list-style: none; font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(.9rem, 1.6vw, 1.1rem); letter-spacing: -0.01em; line-height: 1.25; transition: color .25s var(--ease); } .faq summary::-webkit-details-marker { display: none; } .faq summary:hover { color: var(--pink-hot); } .faq__icon { flex-shrink: 0; width: 15px; height: 15px; position: relative; margin-top: .28rem; } .faq__icon::before, .faq__icon::after { content: ''; position: absolute; background: var(--pink-hot); transition: transform .3s var(--ease); } .faq__icon::before { inset: 7px 0 auto 0; height: 1.5px; } .faq__icon::after { inset: 0 7px auto auto; width: 1.5px; height: 15px; } .faq[open] .faq__icon::after { transform: rotate(90deg); } .faq__answer { padding-bottom: 1.5rem; color: var(--muted); max-width: var(--max-text); font-size: .94rem; } .faq__answer a { color: var(--pink-ink); text-decoration: underline; text-underline-offset: 3px; } /* --- Footer ------------------------------------------------------------- */ .footer { background: var(--dark); color: var(--paper); padding-block: clamp(3rem, 6vw, 5rem) 2rem; } .footer .brand__name { color: var(--paper); } .footer .brand__name span { color: rgba(251,248,243,.5); } .footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: clamp(2rem, 4vw, 3rem); } @media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } } .footer__head { font-size: .66rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--pink-mid); margin-bottom: 1rem; } .footer__list { display: flex; flex-direction: column; gap: .65rem; } .footer__list a { font-size: .9rem; color: rgba(251,248,243,.78); transition: color .25s var(--ease); } .footer__list a:hover { color: var(--pink); } .footer__note { margin-top: 1.15rem; font-size: .86rem; color: rgba(251,248,243,.55); max-width: 34ch; line-height: 1.6; } .footer__bottom { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.6rem; border-top: 1px solid rgba(251,248,243,.12); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .72rem; color: rgba(251,248,243,.5); } /* --- Scroll progress bar ------------------------------------------------ */ .progress { position: fixed; left: 0; top: 0; height: 2px; width: 100%; z-index: 200; background: transparent; pointer-events: none; } .progress__bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--pink-mid), var(--pink-hot)); transition: width .12s linear; } /* --- Reveal on scroll --------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .85s var(--ease), transform .85s var(--ease); } .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } } /* --- Utility ------------------------------------------------------------ */ .pink { color: var(--pink-hot); } /* ========================================================================== MINT, brand secondary. Used for the friendliest blocks on the page. ========================================================================== */ .section--mint { background: var(--mint); color: var(--ink); } .section--mint .eyebrow { color: #06603A; } .section--mint .lede { color: #10331F; } .section--mint .body-copy { color: #1B4230; } .section--mint .btn--ghost { border-color: rgba(23,18,15,.28); color: var(--ink); } .section--mint .btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--mint); } .section--mint-soft { background: var(--mint-soft); } /* Mint highlight behind inline words */ .hl { background: linear-gradient(180deg, transparent 62%, var(--mint) 62%, var(--mint) 96%, transparent 96%); padding-inline: .12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* Placeholder tint sits better against mint blocks */ .section--mint .media, .section--mint-soft .media { background-color: #EAF7F0; background-image: radial-gradient(115% 85% at 78% 15%, rgba(234,48,146,.20) 0%, transparent 60%), radial-gradient(85% 70% at 12% 88%, rgba(11,125,72,.14) 0%, transparent 62%), repeating-linear-gradient(118deg, rgba(23,18,15,.03) 0 2px, transparent 2px 10px); } /* --- Logo lockups ------------------------------------------------------- */ .brand__mark--img { background: transparent; } .brand__mark--img img { width: 34px; height: 34px; object-fit: contain; } .footer .brand__mark--img img { filter: none; } .wordmark { max-width: clamp(180px, 22vw, 280px); } /* --- Founders quote: full-width highlight, matching the stat bands ------ */ .founder-quote { margin: clamp(2rem, 4vw, 3rem) 0 0; max-width: none; background: var(--mint-soft); border-left: 4px solid var(--magenta); border-radius: 0 10px 10px 0; padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.5rem); display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 2.4vw, 2rem); align-items: start; } @media (max-width: 620px) { .founder-quote { grid-template-columns: 1fr; gap: .6rem; } } .founder-quote__mark { font-family: var(--accent); font-size: clamp(2.6rem, 5vw, 4rem); line-height: .62; color: var(--magenta); } .founder-quote__text { font-family: var(--body); font-weight: 400; font-size: clamp(1.08rem, 1.75vw, 1.42rem); line-height: 1.5; letter-spacing: -0.012em; color: #123322; text-wrap: pretty; max-width: none; } .founder-quote__by { margin-top: .95rem; font-size: .68rem; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: #2C5A43; } /* --- Ladder (sprint -> ironman) ----------------------------------------- */ .ladder { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: rgba(23,18,15,.14); border: 1px solid rgba(23,18,15,.14); border-radius: 6px; overflow: hidden; margin-top: clamp(2rem, 4vw, 3rem); } .ladder__step { background: var(--mint); padding: clamp(1.1rem, 2.4vw, 1.6rem); transition: background .4s var(--ease); } .ladder__step:hover { background: #2BFFA3; } .ladder__name { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(.95rem, 1.7vw, 1.2rem); letter-spacing: -0.02em; } .ladder__dist { margin-top: .4rem; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #14402B; } /* --- Awards band -------------------------------------------------------- */ .awards { background: var(--dark); color: var(--paper); } .awards .eyebrow { color: var(--mint); } .awards .lede { color: rgba(251,248,244,.82); } .awards__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.5vw, 2.25rem); margin-top: clamp(2rem, 4vw, 3rem); } @media (max-width: 760px) { .awards__grid { grid-template-columns: repeat(2, 1fr); } } .award { text-align: center; } .award img { width: 100%; max-width: 190px; margin-inline: auto; transition: transform .5s var(--ease); } .award:hover img { transform: translateY(-6px) scale(1.03); } .award__year { margin-top: .9rem; font-family: var(--display); font-weight: 800; font-size: 1.05rem; letter-spacing: -0.02em; } .award__what { margin-top: .3rem; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(251,248,244,.55); line-height: 1.55; } .award--gold .award__what { color: var(--mint); } /* --- Sponsor rail ------------------------------------------------------- */ .sponsors { background: var(--paper); border-block: 1px solid var(--line-soft); padding-block: clamp(2rem, 4vw, 3rem); overflow: hidden; } .sponsors__label { text-align: center; margin-bottom: clamp(1.1rem, 2.4vw, 1.6rem); font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); } .sponsors__label b { color: var(--pink-ink); font-weight: 600; } .marquee--plain { background: transparent; border: 0; padding-block: 0; } .marquee--plain .marquee__item { font-size: clamp(1rem, 2.4vw, 1.6rem); color: var(--ink-2); gap: 2.25rem; padding-right: 2.25rem; } .marquee--plain .marquee__item::after { content: '\2726'; color: var(--magenta); font-size: .55em; } .marquee--plain .marquee__track { animation-duration: 58s; } .marquee--reverse .marquee__track { animation-direction: reverse; } /* Fade the rail at both edges so it reads as continuous, not clipped */ .sponsors .marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } /* ========================================================================== GLOBE, where the team lives ========================================================================== */ .globe-sec { background: var(--dark); color: var(--paper); overflow: hidden; } .globe-sec .eyebrow { color: var(--mint); } .globe-sec .lede { color: rgba(251,248,244,.82); } .globe-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } @media (max-width: 900px) { .globe-grid { grid-template-columns: 1fr; } } .globe-stage { position: relative; } .globe-stage::before { content: ''; position: absolute; left: 50%; top: 50%; width: 86%; aspect-ratio: 1; transform: translate(-50%,-50%); background: radial-gradient(circle, rgba(234,49,146,.20) 0%, transparent 66%); pointer-events: none; } #globe { position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: 620px; touch-action: pan-y; } .globe-hint { margin-top: .9rem; text-align: center; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(251,248,244,.4); } .regions { display: flex; flex-direction: column; margin-top: clamp(1.5rem, 3vw, 2.25rem); } .region { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.1rem; padding-block: 1rem; border-bottom: 1px solid rgba(251,248,244,.12); cursor: pointer; background: none; border-left: 0; border-right: 0; border-top: 0; width: 100%; text-align: left; transition: background .3s var(--ease), padding .3s var(--ease); } .region:first-child { border-top: 1px solid rgba(251,248,244,.12); } .region:hover, .region.is-on { background: rgba(251,248,244,.05); padding-inline: .8rem; } .region__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--magenta); flex-shrink: 0; transition: background .3s var(--ease), transform .3s var(--ease); } .region.is-on .region__dot { background: var(--mint); transform: scale(1.35); } .region__name { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(.9rem, 1.5vw, 1.05rem); letter-spacing: -0.01em; } .region__share { font-family: var(--display); font-weight: 800; font-size: clamp(1.05rem, 2vw, 1.5rem); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .region.is-on .region__share { color: var(--mint); } .region__bar { grid-column: 1 / -1; height: 2px; background: rgba(251,248,244,.1); border-radius: 2px; overflow: hidden; } .region__bar i { display: block; height: 100%; background: var(--magenta); transform-origin: left; transform: scaleX(0); transition: transform 1.1s var(--ease); } .reveal.is-in .region__bar i { transform: scaleX(1); } .region.is-on .region__bar i { background: var(--mint); } /* ========================================================================== TEAM EVENTS ========================================================================== */ .events__hero--wide { aspect-ratio: 20 / 9; } .events__hero { position: relative; overflow: hidden; border-radius: 6px; aspect-ratio: 3 / 2; background: var(--paper-3); } .events__hero .media { transition: transform 1.2s var(--ease); } .events__hero:hover .media { transform: scale(1.03); } .events__caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(1.5rem, 3vw, 2.5rem); background: linear-gradient(180deg, transparent, rgba(20,16,13,.82)); color: var(--paper); } .events__caption b { display: block; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.1rem, 2.2vw, 1.6rem); letter-spacing: -0.02em; } .events__caption span { display: block; margin-top: .4rem; font-size: .85rem; color: rgba(251,248,244,.78); max-width: 46ch; } .events__strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.6rem, 1.2vw, 1rem); margin-top: clamp(.6rem, 1.2vw, 1rem); } @media (max-width: 640px) { .events__strip { grid-template-columns: repeat(3, 1fr); } } .events__strip .frame { aspect-ratio: 4 / 3; } .events__strip .media { transition: transform 1.1s var(--ease); } .events__strip .frame:hover .media { transform: scale(1.05); } .race-group + .race-group { margin-top: clamp(1.75rem, 3vw, 2.5rem); } .race-group__country { display: flex; align-items: baseline; gap: .8rem; margin-bottom: .8rem; font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--pink-ink); } .race-group__country i { flex: 1; height: 1px; background: var(--line); font-style: normal; } .races { display: flex; flex-direction: column; } .race { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: baseline; padding-block: .62rem; border-bottom: 1px solid var(--line-soft); font-size: clamp(.9rem, 1.4vw, 1rem); color: var(--ink-2); transition: padding-left .3s var(--ease), color .3s var(--ease); } .race:hover { padding-left: .5rem; color: var(--pink-ink); } .race::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--magenta); transform: translateY(-2px); } .events__note { margin-top: clamp(1.5rem, 3vw, 2rem); padding: clamp(1.1rem, 2.2vw, 1.6rem) clamp(1.2rem, 2.4vw, 1.8rem); background: var(--mint-soft); border-radius: 6px; font-size: .92rem; color: #14402B; line-height: 1.6; } .events__note b { color: var(--ink); font-weight: 600; } /* ========================================================================== SPONSOR LOGOS ========================================================================== */ .marquee--logos .marquee__item { gap: clamp(2.25rem, 4vw, 3.5rem); padding-right: clamp(2.25rem, 4vw, 3.5rem); } .marquee--logos .marquee__item::after { content: none; } .marquee--logos img { height: clamp(20px, 2.6vw, 30px); width: auto; max-width: 190px; object-fit: contain; opacity: .62; transition: opacity .35s var(--ease); } .marquee--logos img:hover { opacity: 1; } .marquee--logos .marquee__track { animation-duration: 64s; } /* ========================================================================== RACE MAP, flat world map with pin drops, replaces the race list ========================================================================== */ .racemap-wrap { position: relative; } #racemap { width: 100%; aspect-ratio: 12 / 5; display: block; touch-action: pan-y; cursor: crosshair; } @media (max-width: 700px) { #racemap { aspect-ratio: 8 / 5; } } .racemap-readout { min-height: 3.4em; margin-top: .9rem; display: flex; flex-direction: column; gap: .2rem; } .racemap-readout b { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(1rem, 2vw, 1.35rem); letter-spacing: -0.02em; color: var(--ink); } .racemap-readout span { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .racemap-hint { font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-2); } .racecount { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: 6px; overflow: hidden; margin-top: clamp(1.5rem, 3vw, 2rem); } .racecount__cell { background: var(--paper); padding: clamp(1rem, 2.2vw, 1.5rem); } .racecount__n { font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.2rem); letter-spacing: -0.04em; line-height: 1; } .racecount__l { margin-top: .5rem; font-size: .66rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } /* --- Short viewports: keep the waiting-list card above the fold ---------- 13" laptops and most phones are under ~880px tall. The hero tightens rather than pushing the capture form out of sight, because that form is the entire job of this page right now. */ @media (max-height: 890px) { .hero__wordmark { width: clamp(158px, 15.5vw, 198px); margin-bottom: .6rem; } .hero__headline { margin-block: 0 .6rem; } .hero__lede { font-size: .94rem; margin-bottom: .95rem; } .countdown { margin-block: 0 .95rem; } .countdown__label { margin-bottom: .5rem; font-size: .62rem; } .countdown__unit { min-width: clamp(56px, 9vw, 76px); padding: .5rem .5rem; } .countdown__num { font-size: clamp(1.3rem, 3vw, 1.9rem); } .countdown__unit-label { margin-top: .3rem; } .hero__text { padding-top: 104px; padding-bottom: 2rem; } .hero__capture { padding: .8rem .95rem; } .hero__capture .form__input { padding-block: .66rem; } .hero__actions { margin-top: .8rem; } } /* NOTE: .hero__text, .hero__wordmark, .hero__lede and .hero__capture-label in the two blocks above do not exist in the markup, so those declarations have never applied. The hero's padding lives on .hero__overlay. Left in place rather than deleted, pending your call on removing them. */ @media (max-width: 940px) and (max-height: 890px) { .hero__text { padding-top: 100px; } /* MOBILE FIX: the real hero padding, so a landscape phone actually gets the tightening this block was written to do and the waiting-list card stays above the fold. Width-scoped so 13" laptops (>940px) are untouched. */ .hero__overlay { padding-top: 104px; padding-bottom: 1.5rem; } } @media (max-width: 940px) and (max-height: 500px) { .hero__overlay { padding-top: 88px; padding-bottom: 1rem; } .countdown--xl .countdown__label { margin-bottom: .35rem; } .countdown--xl .countdown__unit { padding: .35rem .4rem; } .countdown--xl .countdown__num { font-size: clamp(1.1rem, 4vw, 1.5rem); } .hero__capture { margin-top: .7rem; } } @media (max-height: 780px) { .hero__wordmark { width: clamp(140px, 13vw, 170px); margin-bottom: .5rem; } .hero__lede { font-size: .88rem; margin-bottom: .8rem; max-width: 46ch; } .countdown { margin-block: 0 .8rem; } .countdown__unit { padding: .42rem .45rem; min-width: clamp(52px, 8vw, 68px); } .countdown__num { font-size: clamp(1.15rem, 2.6vw, 1.6rem); } .hero__text { padding-top: 96px; padding-bottom: 1.5rem; } .hero__capture-label { font-size: .7rem; } } /* ========================================================================== SELECTION, hand picked, not first-come ========================================================================== */ .selection { background: var(--dark); color: var(--paper); } .selection .eyebrow { color: var(--mint); } .selection .lede { color: rgba(251,248,244,.84); } .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(251,248,244,.14); border: 1px solid rgba(251,248,244,.14); border-radius: 8px; overflow: hidden; margin-top: clamp(2rem, 4vw, 3rem); } @media (max-width: 760px) { .steps { grid-template-columns: 1fr; } } .step { background: var(--dark); padding: clamp(1.5rem, 3vw, 2.4rem); transition: background .4s var(--ease); } .step:hover { background: #1E1813; } .step__n { font-family: var(--display); font-weight: 800; font-size: .82rem; letter-spacing: .1em; color: var(--mint); } .step__t { margin-top: .9rem; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.05rem, 1.9vw, 1.35rem); letter-spacing: -0.02em; line-height: 1.1; } .step__b { margin-top: .7rem; font-size: .92rem; line-height: 1.65; color: rgba(251,248,244,.68); } /* --- Alise: credentials fill the column instead of white space ----------- */ .creds { display: flex; flex-direction: column; margin-top: 1.6rem; } .creds li { display: grid; grid-template-columns: auto 1fr; gap: .85rem; align-items: baseline; padding-block: .7rem; border-bottom: 1px solid var(--line-soft); font-size: .92rem; color: var(--ink-2); } .creds li:first-child { border-top: 1px solid var(--line-soft); } .creds li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--pink-hot); transform: translateY(-2px); } .creds b { font-weight: 600; color: var(--ink); } /* --- Race panels -------------------------------------------------------- */ .racemaps { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(1rem, 2.4vw, 2rem); } .racepanel--wide { grid-column: 1 / -1; } @media (max-width: 760px) { .racemaps { grid-template-columns: 1fr; } } .racepanel { background: var(--paper); border: 1px solid var(--line-soft); border-radius: 8px; padding: clamp(1rem, 2.2vw, 1.6rem); } .racepanel__head { display: flex; align-items: center; gap: .9rem; margin-bottom: .4rem; font-size: .66rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; } .racepanel__head span { color: var(--ink); } .racepanel__head i { flex: 1; height: 1px; background: var(--line); font-style: normal; } .racepanel__head b { color: var(--pink-ink); font-weight: 600; } .racepanel canvas { width: 100%; display: block; } .racepanel--wide canvas { aspect-ratio: 15 / 7; } #racemap-nz { aspect-ratio: 1 / 1; } #racemap-us { aspect-ratio: 15 / 8; } @media (max-width: 760px) { .racepanel--wide canvas { aspect-ratio: 4 / 5; } .racepanel:not(.racepanel--wide) canvas { aspect-ratio: 4 / 3; } } /* --- Tightened blocks --------------------------------------------------- */ #founders { padding-bottom: clamp(2rem, 3.6vw, 3rem); } .awards { padding-bottom: clamp(2.5rem, 4.2vw, 3.5rem); } .selection { padding-block: clamp(3rem, 5.4vw, 4.5rem) clamp(2.5rem, 4.2vw, 3.5rem); } .alise { padding-block: clamp(2.5rem, 4.6vw, 4rem); } .globe-sec { padding-block: clamp(2.75rem, 5vw, 4.25rem); } .section--mint { padding-block: clamp(2rem, 3.4vw, 3rem); } #events { padding-block: clamp(2.75rem, 5vw, 4.25rem); } /* ========================================================================== SCRAPBOOK, Life in the Cartel ========================================================================== */ .scrapbook { position: relative; width: 100%; aspect-ratio: 16 / 11.4; } .scrapbook.reveal { opacity: 1; transform: none; } /* the children do the animating */ .scrap { position: absolute; border: 8px solid #fff; border-radius: 3px; box-shadow: 0 18px 42px -22px rgba(25,20,16,.5); overflow: hidden; background: var(--paper-3); opacity: 0; transform: translate(var(--fx), var(--fy)) rotate(calc(var(--rot) * 4.5)) scale(.74); transition: opacity 1.1s var(--ease), transform 1.9s var(--ease), box-shadow .45s var(--ease); will-change: transform, opacity; } .scrapbook.is-in .scrap { opacity: 1; transform: translate(0, 0) rotate(var(--rot)) scale(1); } .scrapbook.is-in .scrap:nth-child(1) { transition-delay: 0s; } .scrapbook.is-in .scrap:nth-child(2) { transition-delay: .12s; } .scrapbook.is-in .scrap:nth-child(3) { transition-delay: .24s; } .scrapbook.is-in .scrap:nth-child(4) { transition-delay: .36s; } .scrapbook.is-in .scrap:nth-child(5) { transition-delay: .48s; } .scrapbook.is-in .scrap:nth-child(6) { transition-delay: .60s; } .scrapbook.is-in .scrap:nth-child(7) { transition-delay: .72s; } .scrapbook.is-in .scrap:nth-child(8) { transition-delay: .84s; } .scrapbook.is-in .scrap:nth-child(9) { transition-delay: .96s; } .scrap:hover { transform: rotate(0deg) scale(1.05) !important; z-index: 20; box-shadow: 0 30px 64px -24px rgba(25,20,16,.6); } .scrap .media { position: absolute; inset: 0; } @media (prefers-reduced-motion: reduce) { .scrap { opacity: 1; transform: rotate(var(--rot)) scale(1); } } /* Phones get a tidy two-column scatter instead of the overlap */ @media (max-width: 760px) { .scrapbook { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .scrap { position: static !important; width: auto !important; aspect-ratio: 4 / 3 !important; border-width: 6px; } .scrap:nth-child(1), .scrap:nth-child(9) { grid-column: span 2; } } /* --- Alise: supporting image pair --------------------------------------- */ .alise-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.6rem, 1.2vw, 1rem); margin-top: clamp(.6rem, 1.2vw, 1rem); } .alise-pair .frame { aspect-ratio: 5 / 4; } .alise-pair .media { transition: transform 1s var(--ease); } .alise-pair .frame:hover .media { transform: scale(1.05); } /* ========================================================================== ONLINE COMMUNITY, the benefit members rate highest ========================================================================== */ .community { background: var(--paper-2); padding-block: clamp(2rem, 3.4vw, 3rem); } .community__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: 8px; overflow: hidden; } @media (max-width: 900px) { .community__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .community__grid { grid-template-columns: 1fr; } } .commcard { background: var(--paper); padding: clamp(1.35rem, 2.6vw, 2rem); transition: background .4s var(--ease); } .commcard:hover { background: var(--wash); } .commcard__t { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(1rem, 1.7vw, 1.22rem); letter-spacing: -0.02em; line-height: 1.1; } .commcard__b { margin-top: .7rem; font-size: .92rem; line-height: 1.65; color: var(--muted); } .commnote { margin-top: 1.1rem; font-size: .78rem; letter-spacing: .04em; color: var(--muted); } .statline { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 1.9rem); flex-wrap: wrap; margin-top: clamp(1.5rem, 3vw, 2.25rem); padding: clamp(1.1rem, 2.2vw, 1.6rem) clamp(1.25rem, 2.4vw, 1.9rem); background: var(--mint-soft); border-radius: 8px; } .statline__n { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 4.4vw, 3.2rem); letter-spacing: -0.045em; line-height: 1; color: #06603A; } .statline__t { flex: 1; font-size: clamp(.98rem, 1.5vw, 1.18rem); line-height: 1.55; color: #14402B; max-width: none; } .statline__t b { color: var(--ink); font-weight: 600; } /* --- Kit band inside Membership ----------------------------------------- */ .kitband { position: relative; margin-top: clamp(1.25rem, 2.4vw, 1.75rem); border-radius: 8px; overflow: hidden; aspect-ratio: 18 / 7; } .kitband .media { transition: transform 1.2s var(--ease); } .kitband:hover .media { transform: scale(1.03); } .kitband__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 2.4vw, 1.9rem) clamp(1rem, 2vw, 1.35rem); background: linear-gradient(180deg, transparent, rgba(20,16,13,.8)); color: var(--paper); font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; } @media (max-width: 700px) { .kitband { aspect-ratio: 3 / 2; } } /* --- Attention caterpillar ---------------------------------------------- The header CTA stands up against the right rail and grows a segmented body. Built entirely in JS (see site.js); this is just the look of the body. */ .worm-canvas { backface-visibility: hidden; } .worm-head { box-shadow: 0 9px 28px rgba(20,16,13,.3); backface-visibility: hidden; } /* ========================================================================== CARTEL COACHING The team's own coaching arm. Dark band so it reads as a distinct offer rather than another benefit of membership. ========================================================================== */ .coaching { background: var(--dark); color: var(--paper); padding-block: clamp(1.9rem, 3.2vw, 2.9rem); } .coaching .eyebrow { color: var(--mint); } .coaching__grid { display: grid; grid-template-columns: 1.25fr .85fr; gap: clamp(2rem, 4.5vw, 4rem); align-items: start; } .coaching__title { margin-top: .7rem; } .coaching__lede { margin-top: clamp(.75rem, 1.4vw, 1.05rem); max-width: 54ch; font-size: clamp(1rem, 1.5vw, 1.12rem); line-height: 1.6; color: rgba(251,248,243,.82); } .coaching__coaches { list-style: none; margin: clamp(1.1rem, 2.2vw, 1.6rem) 0 0; padding: 0; display: grid; gap: .8rem; } .coaching__coaches li { display: grid; grid-template-columns: minmax(8rem, auto) 1fr; gap: .3rem 1.25rem; padding-top: .8rem; border-top: 1px solid rgba(251,248,243,.16); } .coaching__coaches b { font-weight: 600; color: var(--paper); font-size: .95rem; } .coaching__coaches span { color: rgba(251,248,243,.6); font-size: .88rem; line-height: 1.5; } .coaching__actions { margin-top: clamp(1.1rem, 2.2vw, 1.55rem); } .coaching__vip { padding: clamp(1.25rem, 2.2vw, 1.7rem); background: var(--mint); color: var(--ink); border-radius: 10px; } .coaching__vip-eyebrow { font-size: .6rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #06603A; } .coaching__vip-title { margin-top: .7rem; font-family: var(--display); font-weight: 800; line-height: .98; letter-spacing: -0.035em; font-size: clamp(1.6rem, 2.8vw, 2.2rem); } .coaching__vip-body { margin-top: .75rem; font-size: .92rem; line-height: 1.55; color: #10331F; } .coaching__vip-note { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid rgba(23,18,15,.18); font-size: .78rem; font-weight: 600; color: #14402B; } @media (max-width: 860px) { .coaching__grid { grid-template-columns: 1fr; } .coaching__coaches li { grid-template-columns: 1fr; gap: .2rem; } } /* Growth note under the United States race panel */ .racepanel__tbc { margin: .7rem 0 0; padding-top: .7rem; border-top: 1px solid var(--line-soft); font-size: .78rem; line-height: 1.5; color: var(--muted); } .racepanel__tbc b { color: var(--ink); font-weight: 600; } /* --- Coaching gallery: three framed portraits across the foot ------------- */ .coachgal { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.9rem, 2vw, 1.6rem); margin-top: clamp(1.6rem, 3.2vw, 2.4rem); } .coachframe { margin: 0; } .coachframe__mat { position: relative; aspect-ratio: 4 / 5; overflow: hidden; padding: clamp(6px, .8vw, 10px); /* the mount inside the frame */ background: #F3EDE3; border: 1px solid rgba(251,248,243,.22); border-radius: 3px; box-shadow: 0 16px 34px -14px rgba(0,0,0,.7), inset 0 0 0 1px rgba(20,16,13,.1); } .coachframe__mat .media { inset: clamp(6px, .8vw, 10px); /* sits inside the mount */ border-radius: 1px; transition: transform 1.1s var(--ease); } .coachframe:hover .media { transform: scale(1.035); } .coachframe figcaption { display: flex; flex-direction: column; gap: .12rem; margin-top: .7rem; text-align: left; } .coachframe figcaption b { font-size: .95rem; font-weight: 600; color: var(--paper); } .coachframe figcaption span { font-size: .62rem; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--mint); } @media (max-width: 700px) { .coachgal { grid-template-columns: 1fr 1fr; gap: .8rem; } .coachframe:last-child { grid-column: span 2; } .coachframe:last-child .coachframe__mat { aspect-ratio: 16 / 9; } } /* ========================================================================== MOBILE AUDIT FIXES Additive, mobile-only. Nothing here applies above 940px, so the signed-off desktop and large-tablet layouts are untouched. Reuses existing breakpoints. ========================================================================== */ @media (max-width: 940px) { /* iOS Safari zooms the whole page in whenever a focused input is under 16px and does not zoom back out. Both signup forms were at 14.08px / 15.2px. */ .form__input, .form--joined .form__input { font-size: 16px; } /* Submit buttons were 39px tall, under the 44px touch minimum. */ .form .btn, .form--joined .btn { min-height: 44px; } /* Footer links were 17px tall with 10.4px of gap: too small and too close together to hit reliably. Padding grows the target, not the type. */ .footer__list { gap: .1rem; } .footer__list a { display: inline-flex; align-items: center; min-height: 44px; } /* DAYS / HOURS / MINS / SECS rendered at 7.36px, below the legible floor. */ .countdown--xl .countdown__unit-label { font-size: .625rem; letter-spacing: .14em; } }