/* ========================================================================== SABI SWEAT — Global stylesheet Brand: Mint Soft Green #CFE7CD · Silky Charcoal #202020 · Sage #677E65 Type: Codec Cold (display) / Codec Warm (body) — trial weights, see NOTES.md ========================================================================== */ /* ---------- Fonts ---------- */ @font-face { font-family: 'Codec Cold'; src: url('../assets/fonts/codec-cold-heavy.woff2') format('woff2'); unicode-range: U+0020-002F, U+003A-003F, U+0041-005A, U+005B-0060, U+0061-007A, U+007B-007E, U+2013-2014, U+2018-2019, U+201C-201D, U+2026; font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Codec Cold'; src: url('../assets/fonts/codec-cold-extrabold.woff2') format('woff2'); unicode-range: U+0020-002F, U+003A-003F, U+0041-005A, U+005B-0060, U+0061-007A, U+007B-007E, U+2013-2014, U+2018-2019, U+201C-201D, U+2026; font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Codec Cold'; src: url('../assets/fonts/codec-cold-bold.woff2') format('woff2'); unicode-range: U+0020-002F, U+003A-003F, U+0041-005A, U+005B-0060, U+0061-007A, U+007B-007E, U+2013-2014, U+2018-2019, U+201C-201D, U+2026; font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Codec Warm'; src: url('../assets/fonts/codec-warm-news.woff2') format('woff2'); unicode-range: U+0020-002F, U+003A-003F, U+0041-005A, U+005B-0060, U+0061-007A, U+007B-007E, U+2013-2014, U+2018-2019, U+201C-201D, U+2026; font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Codec Warm'; src: url('../assets/fonts/codec-warm-italic.woff2') format('woff2'); unicode-range: U+0020-002F, U+003A-003F, U+0041-005A, U+005B-0060, U+0061-007A, U+007B-007E, U+2013-2014, U+2018-2019, U+201C-201D, U+2026; font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Codec Warm'; src: url('../assets/fonts/codec-warm-bold.woff2') format('woff2'); unicode-range: U+0020-002F, U+003A-003F, U+0041-005A, U+005B-0060, U+0061-007A, U+007B-007E, U+2013-2014, U+2018-2019, U+201C-201D, U+2026; font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Outfit'; src: url('../assets/fonts/outfit-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Outfit'; src: url('../assets/fonts/outfit-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Outfit'; src: url('../assets/fonts/outfit-900.woff2') format('woff2'); font-weight: 800 900; font-style: normal; font-display: swap; } /* ---------- Tokens ---------- */ :root { /* colour — OFFICIAL PALETTE: FFE81A FF4B2C EBEBEB FFA1E5 4D17D1 608EFC 00A065 202020 */ --charcoal: #202020; --ink: #202020; --forest: #202020; /* dark bands, primary-dark surfaces */ --forest-deep: #161616; /* footer depth */ --moss: #4F4F4F; /* small-text-safe muted on grey */ --sage: #00A065; /* brand green, decorative + bars */ --mint: #00A065; /* brand green (token kept for compatibility) */ --mint-wash: #D5F2E4; /* pale green tint */ --cream: #EBEBEB; /* light neutral */ --white: #FFFFFF; --gold: #FFE81A; /* yellow accent */ --gold-deep: #6E6000; /* AA-safe yellow-olive for small text on light */ --line: #D6D6D6; /* joy palette (The Retreat keeps its deep-green world via .page-retreat) */ --coral: #FF4B2C; --coral-deep: #BA2E12; --coral-wash: #FFE2DB; --sun: #FFE81A; --sun-deep: #6E6000; --sun-wash: #FFF9C4; --sky: #608EFC; --sky-deep: #1D46C4; --sky-wash: #DFE8FE; --lilac: #4D17D1; --lilac-deep: #4D17D1; --lilac-wash: #E6DCF8; --pink: #FFA1E5; --pink-deep: #A8127A; --pink-wash: #FFE3F7; /* per-page accent (pages override on ) */ --accent: var(--gold); --accent-deep: var(--gold-deep); /* type */ --font-display: 'Codec Cold', 'Outfit', 'Arial Narrow', Impact, sans-serif; --font-body: 'Codec Warm', 'Outfit', 'Avenir Next', 'Segoe UI', system-ui, sans-serif; /* space (spacious scale) */ --s-1: .5rem; --s-2: .75rem; --s-3: 1rem; --s-4: 1.5rem; --s-5: 2rem; --s-6: 3rem; --s-7: 4.5rem; --s-8: 6rem; --s-9: 8rem; /* misc */ --radius: 18px; --radius-lg: 28px; --shadow: 0 10px 30px rgba(24, 24, 24, .12); --ease: cubic-bezier(.22, .8, .3, 1); --header-h: 4.25rem; } /* ---------- The Retreat: original deep-green world, untouched ---------- */ .page-retreat { --charcoal: #202020; --ink: #161616; --forest: #1C2A1F; --forest-deep: #121D15; --moss: #4C594B; --sage: #677E65; --mint: #CFE7CD; --mint-wash: #E9F3E6; --cream: #FAF8F2; --gold: #E3A93C; --gold-deep: #8A6117; --line: #DCE3D9; } /* ---------- Page accents ---------- */ .page-challenges { --accent: var(--coral); --accent-deep: var(--coral-deep); } .page-events { --accent: var(--sun); --accent-deep: var(--sun-deep); } .page-app { --accent: var(--sky); --accent-deep: var(--sky-deep); } .page-about { --accent: var(--lilac); --accent-deep: var(--lilac-deep); } .page-impact { --accent: var(--gold); --accent-deep: var(--gold-deep); } .page-partner { --accent: var(--gold); --accent-deep: var(--gold-deep); } /* ---------- Reset-ish ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65; color: var(--charcoal); background: var(--cream); overflow-x: clip; } img, video { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.04; } p { margin: 0 0 1em; } a { color: inherit; } button { font: inherit; } :focus-visible { outline: 3px solid var(--lilac); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--sun); color: var(--ink); } [id] { scroll-margin-top: calc(var(--header-h) + 1rem); } .skip-link { position: absolute; left: -999px; top: 0; z-index: 999; background: var(--forest); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 12px 0; font-weight: 700; text-decoration: none; } .skip-link:focus { left: 0; } /* ---------- Type helpers ---------- */ .display { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: .005em; line-height: .96; } h1.display { font-size: clamp(2.9rem, 12vw, 7rem); } h2.display { font-size: clamp(2.1rem, 7.5vw, 4.25rem); } h3.display { font-size: clamp(1.35rem, 4.5vw, 2rem); } .lede { font-size: clamp(1.125rem, 2.4vw, 1.375rem); line-height: 1.55; max-width: 34em; } .kicker { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .18em; font-size: .8125rem; color: var(--moss); display: inline-flex; align-items: center; gap: .6em; margin-bottom: var(--s-3); } .kicker::before { content: ""; width: 2.25em; height: 3px; background: var(--accent); border-radius: 2px; } .on-dark .kicker, .kicker.on-dark { color: var(--mint); } .measure { max-width: 38em; } /* marker highlight sweep */ .hl { --hl: var(--mint); background-image: linear-gradient(120deg, var(--hl) 0%, var(--hl) 100%); background-repeat: no-repeat; background-size: 100% .32em; background-position: 0 82%; } .hl-coral { --hl: var(--coral); } .hl-sun { --hl: var(--sun); } .hl-sky { --hl: var(--sky); } .hl-lilac { --hl: var(--lilac); } .hl-pink { --hl: var(--pink); } .on-dark .hl { background-image: linear-gradient(120deg, rgba(207, 231, 205, .28) 0%, rgba(207, 231, 205, .28) 100%); } /* ---------- Layout ---------- */ .wrap { width: min(100% - 2.5rem, 74rem); margin-inline: auto; } .wrap-narrow { width: min(100% - 2.5rem, 52rem); margin-inline: auto; } section { padding-block: var(--s-8); } @media (min-width: 768px) { section { padding-block: var(--s-9); } } .section-tint { background: var(--mint-wash); } .tint-sun { background: var(--sun); } .tint-sky { background: var(--sky); } .tint-coral { background: var(--coral); } .tint-lilac { background: var(--lilac); } .tint-pink { background: var(--pink); } .tint-lilac { color: #fff; } .tint-lilac .lede, .tint-lilac .measure { color: #fff; } .tint-sun .kicker, .tint-sky .kicker, .tint-coral .kicker, .tint-pink .kicker { color: var(--ink); } .tint-lilac .kicker { color: #fff; } .tint-sun .kicker::before, .tint-sky .kicker::before, .tint-coral .kicker::before, .tint-pink .kicker::before { background: var(--ink); } .tint-lilac .kicker::before { background: var(--sun); } .tint-lilac .bib { color: #fff; } .section-dark { background: var(--forest); color: var(--white); } .section-dark ::selection { background: var(--gold); color: var(--forest); } .grid-2 { display: grid; gap: var(--s-6); align-items: center; } .grid-3 { display: grid; gap: var(--s-4); } @media (min-width: 768px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: repeat(3, 1fr); } } /* race-bib section tag */ .bib { font-family: var(--font-display); font-weight: 800; font-size: .8125rem; letter-spacing: .08em; color: var(--forest); border: 2px solid currentColor; border-radius: 8px; padding: .3em .7em .22em; display: inline-block; margin-bottom: var(--s-4); position: relative; } .bib::before, .bib::after { content: ""; position: absolute; top: -5px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .bib::before { left: 18%; } .bib::after { right: 18%; } .on-dark .bib, .section-dark .bib { color: var(--mint); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--cream) 90%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); transition: transform .35s var(--ease); } .site-header::after { content: ""; display: block; height: 4px; background: linear-gradient(90deg, var(--sun) 0 17%, var(--coral) 0 34%, var(--pink) 0 50%, var(--lilac) 0 67%, var(--sky) 0 84%, var(--sage) 0 100%); } .page-retreat .site-header::after { display: none; } .site-header.is-hidden { transform: translateY(-100%); } .nav-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: var(--header-h); } .logo-link { display: inline-flex; align-items: center; gap: .6rem; flex: none; text-decoration: none; } .logo-mark { display: inline-block; width: 30px; aspect-ratio: 1; background: var(--mint); flex: none; -webkit-mask: url('../assets/logo/swirl.svg') no-repeat center / contain; mask: url('../assets/logo/swirl.svg') no-repeat center / contain; } .logo-mark--lg { width: 46px; } .logo { display: inline-block; width: clamp(148px, 22vw, 196px); aspect-ratio: 3746/555; background: currentColor; color: var(--charcoal); flex: none; -webkit-mask: url('../assets/logo/wordmark.svg') no-repeat center / contain; mask: url('../assets/logo/wordmark.svg') no-repeat center / contain; } .logo:focus-visible { outline-offset: 6px; } .nav-links { display: none; } @media (min-width: 1160px) { .nav-links { display: flex; align-items: center; gap: 1.15rem; list-style: none; margin: 0; padding: 0; } .nav-links a { text-decoration: none; font-weight: 700; font-size: .9063rem; color: var(--charcoal); white-space: nowrap; padding: .35em 0; border-bottom: 3px solid transparent; transition: border-color .2s var(--ease); } .nav-links a:hover { border-bottom-color: var(--mint); } .nav-links a[aria-current="page"] { border-bottom-color: var(--gold); } .nav-links a.nav-retreat { color: var(--moss); font-style: normal; } } .nav-cta { display: none; text-decoration: none; background: var(--forest); color: #fff; font-weight: 700; font-size: .9375rem; padding: .7em 1.35em; border-radius: 999px; transition: transform .2s var(--ease), box-shadow .2s var(--ease); } .nav-cta:hover { transform: scale(1.04); box-shadow: var(--shadow); } @media (min-width: 1160px) { .nav-cta { display: inline-block; } } /* burger */ .burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 6px; width: 48px; height: 48px; padding: 12px; cursor: pointer; background: none; border: 0; border-radius: 12px; } .burger span { display: block; height: 3px; border-radius: 2px; background: var(--charcoal); transition: transform .3s var(--ease), opacity .3s; } .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); } @media (min-width: 1160px) { .burger { display: none; } } /* mobile menu */ .mobile-menu { position: fixed; inset: 0; z-index: 99; background: var(--forest); color: #fff; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--header-h) + 2rem) 2rem 2.5rem; opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s; } .mobile-menu.is-open { opacity: 1; visibility: visible; } .mobile-menu ul { list-style: none; margin: 0; padding: 0; } .mobile-menu a { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.55rem, min(7.4vw, 7.5vh), 3rem); line-height: 1.22; text-decoration: none; color: #fff; overflow-wrap: break-word; display: inline-block; padding: .1em 0; opacity: 0; transform: translateY(18px); } .mobile-menu.is-open a { opacity: 1; transform: none; transition: opacity .45s var(--ease), transform .45s var(--ease); transition-delay: calc(var(--i) * 45ms); } .mobile-menu a:hover, .mobile-menu a[aria-current="page"] { color: var(--mint); } .mobile-menu .menu-retreat { color: var(--gold); } .mobile-menu .menu-cities { margin-top: auto; font-size: .875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mint); font-weight: 700; } body.menu-open { overflow: hidden; } /* ---------- Hero ---------- */ .hero { position: relative; display: flex; align-items: flex-end; min-height: min(92svh, 56rem); padding-block: var(--s-7) var(--s-6); overflow: hidden; color: #fff; background: var(--forest); } .hero-media { position: absolute; inset: 0; } .hero-media img { width: 100%; height: 100%; object-fit: cover; } .hero-rotator img { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--ease); } .hero-rotator img.is-active { opacity: 1; } .hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 18, 18, .38) 0%, rgba(18, 18, 18, 0) 34%, rgba(18, 18, 18, .82) 100%); } .hero .wrap { position: relative; } .hero-sub { font-size: clamp(1.0625rem, 2.5vw, 1.3125rem); max-width: 30em; } .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s var(--ease); } .hero-video.is-on { opacity: 1; } @media (prefers-reduced-motion: no-preference) { .hero-media img { animation: heroZoom 14s var(--ease) both; } @keyframes heroZoom { from { transform: scale(1.08); } to { transform: scale(1); } } } /* hero on inner pages */ .hero--short { min-height: min(72svh, 44rem); } /* ---------- Buttons ---------- */ .btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; text-decoration: none; cursor: pointer; border: 2px solid transparent; font-weight: 700; font-size: 1.0313rem; line-height: 1; padding: 1em 1.7em; border-radius: 999px; min-height: 48px; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease); } .btn:hover { transform: scale(1.035); box-shadow: var(--shadow); } .btn:active { transform: scale(.98); } .btn-primary { background: var(--sage); color: var(--ink); } .btn-primary:hover { background: var(--ink); color: #fff; } .btn-mint { background: var(--sun); color: var(--ink); } .btn-ghost { border-color: currentColor; color: var(--forest); background: transparent; } .on-dark .btn-ghost, .section-dark .btn-ghost, .hero .btn-ghost { color: #fff; } .btn-gold { background: var(--gold); color: var(--ink); } .btn svg { width: 1.1em; height: 1.1em; flex: none; } /* ---------- Marquee ---------- */ .marquee { overflow: hidden; padding-block: .9rem; white-space: nowrap; background: var(--sage); color: var(--ink); border-block: 2px solid var(--ink); } .marquee--dark { background: var(--ink); color: var(--sage); border-color: var(--sage); } .marquee--gold { background: var(--gold); color: var(--ink); border-color: var(--ink); } .marquee--coral { background: var(--coral); color: var(--ink); border-color: var(--ink); } .marquee--sun { background: var(--sun); color: var(--ink); border-color: var(--ink); } .marquee--sky { background: var(--sky); color: var(--ink); border-color: var(--ink); } .marquee--lilac { background: var(--lilac); color: var(--ink); border-color: var(--ink); } .marquee-track { display: inline-flex; gap: 2.5rem; padding-right: 2.5rem; will-change: transform; } .marquee span { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1rem, 2.6vw, 1.375rem); letter-spacing: .05em; display: inline-flex; align-items: center; gap: 2.5rem; } .marquee span::after { content: "✦"; font-size: .8em; } @media (prefers-reduced-motion: no-preference) { .marquee-track { animation: marquee 26s linear infinite; } @keyframes marquee { to { transform: translateX(-50%); } } } /* ---------- Cards ---------- */ .card { color: var(--charcoal); background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: 0 2px 10px rgba(24, 24, 24, .07); display: flex; flex-direction: column; transition: transform .25s var(--ease), box-shadow .25s var(--ease); } .card:hover { transform: translateY(-5px); box-shadow: var(--shadow); } .card-media { aspect-ratio: 4/3; overflow: hidden; position: relative; } .card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .card:hover .card-media img { transform: scale(1.045); } .card-body { padding: var(--s-4) var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: .35rem; flex: 1; } .card-body h3 { font-size: 1.3125rem; } .card-body p { color: #4A4A46; font-size: .9844rem; margin: 0; } .card-link { text-decoration: none; color: inherit; display: contents; } .tag-coral { background: var(--coral) !important; color: var(--ink) !important; } .tag-sun { background: var(--sun) !important; color: var(--ink) !important; } .tag-sky { background: var(--sky) !important; color: var(--ink) !important; } .tag-lilac { background: var(--lilac) !important; color: #fff !important; } .tag-pink { background: var(--pink) !important; color: var(--ink) !important; } .card-tag { align-self: flex-start; background: var(--mint); color: var(--forest); font-weight: 700; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; padding: .35em .9em; border-radius: 999px; margin-bottom: .5rem; } .card-cta { margin-top: auto; padding-top: var(--s-3); font-weight: 700; color: var(--forest); } .card-cta::after { content: " →"; } /* photo frame */ .photo { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); position: relative; } .photo img, .photo video { width: 100%; height: 100%; object-fit: cover; } .photo-caption { position: absolute; left: var(--s-3); bottom: var(--s-3); background: rgba(18, 18, 18, .78); color: var(--mint); backdrop-filter: blur(6px); font-size: .8125rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .5em 1em; border-radius: 999px; } /* ---------- Event showcase rows ---------- */ .event-rows { display: grid; gap: var(--s-5); } .event-row { display: grid; gap: var(--s-4); background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 2px 12px rgba(24,24,24,.08); } @media (min-width: 768px) { .event-row { grid-template-columns: 2fr 3fr; } } .event-row .photo { border-radius: 0; box-shadow: none; aspect-ratio: 4/3; } .event-row .photo img { height: 100%; } .event-body { padding: var(--s-4) var(--s-5) var(--s-5); display: flex; flex-direction: column; gap: .5rem; align-self: center; } .event-meta { display: flex; flex-wrap: wrap; gap: .5rem; } .event-body h3 { font-size: clamp(1.35rem, 3vw, 1.75rem); margin: .2em 0 0; } .event-body p { color: #4A4A46; margin: 0; max-width: 46ch; } .event-note { font-weight: 700; color: var(--forest); font-size: .9375rem; } /* ---------- Gallery mosaic ---------- */ .gallery { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); } @media (min-width: 768px) { .gallery { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); } } .gallery .photo { aspect-ratio: 4/5; border-radius: var(--radius); } .gallery .g-tall { aspect-ratio: 3/5; } .gallery .photo img { height: 100%; } /* ---------- Stats ---------- */ .stats { display: grid; gap: var(--s-5); grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 768px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .stat-num { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.4rem, 7vw, 4rem); line-height: 1; color: var(--forest); font-variant-numeric: tabular-nums; display: block; } .section-dark .stat-num, .on-dark .stat-num { color: var(--mint); } .section-dark .c-coral, .on-dark .c-coral { color: var(--coral); } .section-dark .c-sun, .on-dark .c-sun { color: var(--sun); } .section-dark .c-sky, .on-dark .c-sky { color: var(--sky); } .section-dark .c-lilac, .on-dark .c-lilac { color: var(--pink); } .section-dark .c-pink, .on-dark .c-pink { color: var(--pink); } .stat-label { font-size: .9375rem; color: var(--moss); font-weight: 700; margin-top: .4rem; display: block; } .section-dark .stat-label { color: rgba(255, 255, 255, .75); } /* ---------- Steps / numbered flow ---------- */ .steps { display: grid; gap: var(--s-5); counter-reset: step; } @media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); } } .step { counter-increment: step; position: relative; padding-top: var(--s-6); } .step::before { content: "0" counter(step); position: absolute; top: 0; left: 0; font-family: var(--font-display); font-weight: 900; font-size: 2.6rem; line-height: 1; color: transparent; -webkit-text-stroke: 2px var(--sage); } .step:nth-child(3n+1)::before { -webkit-text-stroke-color: var(--coral); } .step:nth-child(3n+2)::before { -webkit-text-stroke-color: var(--sun-deep); } .step:nth-child(3n)::before { -webkit-text-stroke-color: var(--sky-deep); } .step h3 { font-size: 1.3125rem; } /* ---------- FAQ / details ---------- */ .faq { border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.15rem .25rem; font-weight: 700; font-size: 1.0625rem; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-family: var(--font-display); font-size: 1.5rem; color: var(--sage); transition: transform .25s var(--ease); flex: none; } .faq details[open] summary::after { transform: rotate(45deg); } .faq .faq-body { padding: 0 .25rem 1.25rem; color: #4A4A46; max-width: 60ch; } /* ---------- Forms ---------- */ .field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: var(--s-4); } .field label { font-weight: 700; font-size: .9375rem; } .field input, .field select, .field textarea { font: inherit; color: var(--charcoal); background: var(--white); border: 2px solid var(--line); border-radius: 12px; padding: .8em 1em; min-height: 48px; } .field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--gold); outline-offset: 1px; border-color: var(--moss); } .field .hint { font-size: .875rem; color: var(--moss); } /* ---------- Footer ---------- */ .site-footer { background: var(--forest-deep); color: rgba(255, 255, 255, .85); padding-block: var(--s-8) var(--s-5); position: relative; overflow: hidden; } .site-footer::after { content: ""; position: absolute; right: -3%; bottom: -18%; width: min(360px, 46vw); aspect-ratio: 1; pointer-events: none; background: #fff; opacity: .05; -webkit-mask: url('../assets/logo/swirl.svg') no-repeat center / contain; mask: url('../assets/logo/swirl.svg') no-repeat center / contain; } .site-footer .wrap { position: relative; z-index: 1; } .footer-logo { color: var(--mint); width: min(320px, 70vw); margin-bottom: var(--s-6); } .footer-grid { display: grid; gap: var(--s-6); } @media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.4fr; } } .site-footer h4 { font-family: var(--font-display); text-transform: uppercase; font-size: .875rem; letter-spacing: .14em; color: var(--mint); margin-bottom: var(--s-3); } .site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; } .site-footer a { color: rgba(255, 255, 255, .85); text-decoration: none; } .site-footer a:hover { color: var(--mint); text-decoration: underline; } .footer-tagline { font-size: 1.0625rem; max-width: 26em; } .footer-meta { margin-top: var(--s-7); padding-top: var(--s-4); border-top: 1px solid rgba(207, 231, 205, .2); display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; font-size: .8438rem; color: rgba(255, 255, 255, .6); } .footer-cities { font-family: var(--font-display); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mint); } /* ---------- Reveal animations ---------- Hidden state only applies once JS has run (html.js) so content can never be stuck invisible if scripts fail, and crawlers always see everything. */ html.js .reveal { opacity: 0; transform: translateY(26px); } html.js .reveal.is-visible { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ---------- Utilities ---------- */ .center { text-align: center; } .center .lede, .center .measure { margin-inline: auto; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .text-mint { color: var(--mint); } .text-gold { color: var(--gold); } .text-sage { color: var(--sage); } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- Legal pages ---------- */ .legal { background: var(--white); border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 3rem); margin-top: var(--s-5); box-shadow: 0 2px 12px rgba(24,24,24,.07); } .legal h2 { font-family: var(--font-display); text-transform: uppercase; font-size: 1.25rem; letter-spacing: .02em; margin: 1.8em 0 .6em; } .legal h2:first-child { margin-top: 0; } .legal h3 { font-size: 1.05rem; margin: 1.5em 0 .5em; } .legal p, .legal li { font-size: .9844rem; line-height: 1.7; color: #333331; } .legal ul { padding-left: 1.35em; margin: 0 0 1em; display: grid; gap: .5em; } .legal a { color: #007246; font-weight: 600; } .legal em { color: var(--moss); }