/* ====================================================================== UGANDA AIDS MARATHON 2026 — "Running for Hope" Design system v2 ====================================================================== */ :root{ /* Palette — drawn from the Uganda flag (black / yellow / red) and the red-ribbon of HIV/AIDS solidarity, set against a warm ivory ground so it reads elegant rather than flag-literal. */ --ink: #14110F; /* near-black charcoal */ --ink-soft: #2B2620; --ivory: #FBF7EE; /* warm paper background */ --ivory-2: #F3ECDC; --crimson: #B21030; /* ribbon red */ --crimson-dk: #7C0B22; --gold: #E3AE33; /* medal / sunrise gold */ --gold-soft: #F0CE7D; --forest: #1E3A2B; /* deep green accent, hope / renewal */ --line: rgba(20,17,15,0.12); --line-soft: rgba(20,17,15,0.07); --font-display: "Fraunces", "Georgia", serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --radius-sm: 6px; --radius-md: 14px; --radius-lg: 28px; --container-max: 1280px; --shadow-soft: 0 20px 60px -25px rgba(20,17,15,0.35); --shadow-tight: 0 8px 24px -12px rgba(20,17,15,0.3); } /* ---------- Reset / base ---------- */ *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; width:100%; overflow-x:hidden; -webkit-text-size-adjust:100%; } body{ margin:0; width:100%; font-family:var(--font-body); background:var(--ivory); color:var(--ink); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; /* Deliberately no overflow-x here: already clips horizontal overflow. Setting it on body too would turn body into its own nested scroll container in some engines, which is a common way to silently break position:sticky on the header. */ } body.nav-open{ overflow:hidden; } img,svg{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ul{ margin:0; padding:0; list-style:none; } h1,h2,h3,h4,h5{ font-family:var(--font-display); font-weight:600; line-height:1.08; margin:0 0 .5em; letter-spacing:-0.01em; color:var(--ink); } p{ margin:0 0 1em; } .container{ width:100%; max-width:var(--container-max); margin:0 auto; padding-left:24px; padding-right:24px; } section{ position:relative; } /* Root-cause responsiveness fix: grid/flex items default to min-width:auto, so a wide descendant (a table, a long unbroken string) can force the whole track wider than the viewport even when that descendant has its own overflow-x:auto — the overflow:auto only zeroes out a box's OWN min-content contribution, it doesn't recursively rescue an ancestor grid item several levels up. Force every grid/flex item below to actually shrink to the space it's given. */ .hero-grid > *, .stats-grid > *, .race-grid > *, .race-detail-grid > *, .race-detail-card > *, .partner-grid > *, .footer-top > *, .prose-grid > *, .framework-grid > *, .outcomes-strip .grid > *, .tier-grid > *, .exhibitor-grid > *, .city-grid > *, .finale-card > *, .form-row > *, .spotlight-grid > *, .countdown-grid > *{ min-width:0; } /* ---------- Utility type ---------- */ .eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-body); font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--crimson); margin-bottom:16px; } .eyebrow::before{ content:""; width:28px; height:2px; background:var(--crimson); display:inline-block; } .lede{ font-size:1.15rem; color:var(--ink-soft); max-width:640px; } .text-gold{ color:var(--gold); } .text-crimson{ color:var(--crimson); } .serif-italic{ font-style:italic; font-weight:400; } /* ---------- Buttons ---------- */ .btn-em{ display:inline-flex; align-items:center; gap:10px; padding:15px 30px; border-radius:999px; font-family:var(--font-body); font-weight:600; font-size:.92rem; letter-spacing:.01em; border:1.5px solid transparent; cursor:pointer; transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, background .3s ease, color .3s ease, border-color .3s ease; white-space:nowrap; } .btn-em:hover{ transform:translateY(-2px); } .btn-primary{ background:var(--crimson); color:#fff; box-shadow:0 14px 30px -14px rgba(178,16,48,.6); } .btn-primary:hover{ background:var(--crimson-dk); box-shadow:0 18px 34px -12px rgba(124,11,34,.55); } .btn-outline{ background:transparent; border-color:rgba(20,17,15,.25); color:var(--ink); } .btn-outline:hover{ border-color:var(--ink); background:var(--ink); color:var(--ivory); } .btn-outline-light{ background:transparent; border-color:rgba(251,247,238,.4); color:var(--ivory); } .btn-outline-light:hover{ border-color:var(--ivory); background:var(--ivory); color:var(--ink); } .btn-sm{ padding:11px 22px; font-size:.82rem; } .arrow{ transition:transform .3s ease; } .btn-em:hover .arrow{ transform:translateX(4px); } /* ---------- Top announcement bar ---------- */ .topbar{ background:var(--ink); color:var(--ivory-2); font-size:.78rem; letter-spacing:.03em; } .topbar .container{ display:flex; align-items:center; justify-content:space-between; padding-top:9px; padding-bottom:9px; gap:16px; } .topbar-msg{ display:flex; align-items:center; gap:8px; } .topbar-msg .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); flex:none; } .topbar-links{ display:flex; gap:18px; } .topbar-links a{ opacity:.75; transition:opacity .25s; } .topbar-links a:hover{ opacity:1; } /* ---------- Navbar ---------- */ /* IMPORTANT: backdrop-filter must never be set directly on .site-header. It (like `filter`/`perspective`) establishes a new CSS containing block for any position:fixed descendant — which includes the mobile nav drawer. That silently breaks the drawer's "translate off-screen when closed" trick: instead of using the viewport as its containing block, the drawer sizes against the header, and the header (a normal in-flow element) then has to grow to contain it — inflating body/html's layout width and creating a site-wide horizontal scroll on every page, even though the drawer is invisible. The blur is applied via ::before below instead, so .site-header itself stays filter-free. */ .site-header{ position:sticky; top:0; z-index:100; border-bottom:1px solid var(--line-soft); transition:box-shadow .3s ease; } .site-header::before{ content:""; position:absolute; inset:0; z-index:-1; background:rgba(251,247,238,.86); backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%); } .site-header.is-scrolled{ box-shadow:0 6px 24px -18px rgba(20,17,15,.4); } .nav-wrap{ display:flex; align-items:center; justify-content:space-between; padding:16px 0; gap:12px; } .brand{ display:flex; align-items:center; gap:12px; min-width:0; flex-shrink:1; } .brand-mark{ width:44px; height:44px; flex:none; } .brand-text{ display:flex; flex-direction:column; line-height:1.15; min-width:0; } .brand-text .name{ font-family:var(--font-display); font-weight:700; font-size:1.02rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:56vw; } .brand-text .tag{ font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--crimson); font-weight:600; white-space:nowrap; } .nav-links{ display:flex; align-items:center; gap:34px; } .nav-links a{ font-size:.88rem; font-weight:500; color:var(--ink-soft); position:relative; padding:4px 0; transition:color .25s ease; } .nav-links a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--crimson); transition:width .3s ease; } .nav-links a:hover{ color:var(--ink); } .nav-links a:hover::after, .nav-links a.active::after{ width:100%; } .nav-links a.active{ color:var(--ink); font-weight:600; } .nav-cta{ display:flex; align-items:center; gap:14px; flex:none; } .nav-toggle{ display:none; width:42px; height:42px; flex:none; border-radius:50%; border:1.5px solid var(--line); background:transparent; align-items:center; justify-content:center; cursor:pointer; } /* Buttons that only appear inside the mobile drawer */ .nav-mobile-actions{ display:none; } /* Backdrop + close affordance for the mobile drawer (built with CSS only, no icon set) */ .nav-overlay{ position:fixed; inset:0; background:rgba(20,17,15,.55); opacity:0; visibility:hidden; z-index:150; transition:opacity .35s ease, visibility 0s linear .35s; } .site-header.mobile-open .nav-overlay{ opacity:1; visibility:visible; transition:opacity .35s ease; } .nav-drawer-close{ display:none; position:absolute; top:18px; right:20px; width:38px; height:38px; border-radius:50%; border:1.5px solid var(--line); background:transparent; align-items:center; justify-content:center; cursor:pointer; } .nav-drawer-close::before,.nav-drawer-close::after{ content:""; position:absolute; width:16px; height:1.5px; background:var(--ink); } .nav-drawer-close::before{ transform:rotate(45deg); } .nav-drawer-close::after{ transform:rotate(-45deg); } .nav-toggle span{ display:block; width:18px; height:1.5px; background:var(--ink); position:relative; transition:background .2s ease; } .nav-toggle span::before,.nav-toggle span::after{ content:""; position:absolute; left:0; width:18px; height:1.5px; background:var(--ink); transition:transform .3s ease, top .3s ease; } .nav-toggle span::before{ top:-6px; } .nav-toggle span::after{ top:6px; } .nav-toggle.is-open span{ background:transparent; } .nav-toggle.is-open span::before{ top:0; transform:rotate(45deg); } .nav-toggle.is-open span::after{ top:0; transform:rotate(-45deg); } /* ---------- Hero ---------- */ .hero{ position:relative; padding:96px 0 120px; background: radial-gradient(1200px 500px at 85% -10%, rgba(178,16,48,.10), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(30,58,43,.12), transparent 60%), var(--ivory); overflow:hidden; } .hero-track{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.55; } .hero-grid{ position:relative; z-index:2; display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; } .hero h1{ font-size:clamp(2.6rem, 5.2vw, 4.6rem); margin-bottom:22px; } .hero h1 .line2{ display:block; } .hero-meta{ display:flex; flex-wrap:wrap; gap:14px 28px; margin:34px 0 40px; padding-top:26px; border-top:1px solid var(--line); } .hero-meta .item{ display:flex; flex-direction:column; gap:4px; } .hero-meta .item .label{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); opacity:.65; } .hero-meta .item .value{ font-family:var(--font-display); font-size:1.05rem; font-weight:600; } .hero-actions{ display:flex; gap:16px; flex-wrap:wrap; } /* Hero visual: countdown card, standalone */ .hero-visual{ position:relative; display:flex; align-items:center; } .countdown-card{ position:relative; z-index:3; width:100%; background:var(--ink); color:var(--ivory); border-radius:var(--radius-lg); padding:44px 38px; box-shadow:var(--shadow-soft); } .countdown-card .cd-label{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-soft); font-weight:700; margin-bottom:18px; display:flex; align-items:center; gap:8px; } .countdown-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; } .countdown-grid .cd{ text-align:center; background:rgba(251,247,238,.06); border:1px solid rgba(251,247,238,.14); border-radius:var(--radius-sm); padding:14px 4px; } .countdown-grid .cd .num{ font-family:var(--font-display); font-size:1.7rem; font-weight:700; font-variant-numeric:tabular-nums; } .countdown-grid .cd .unit{ font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; opacity:.65; margin-top:2px; } .countdown-foot{ margin-top:20px; padding-top:18px; border-top:1px solid rgba(251,247,238,.14); font-size:.82rem; color:rgba(251,247,238,.75); display:flex; justify-content:space-between; gap:10px; } /* ---------- Marquee strip ---------- */ .marquee{ background:var(--crimson); color:var(--ivory); overflow:hidden; white-space:nowrap; padding:13px 0; } .marquee-track{ display:inline-flex; gap:48px; animation:marquee 28s linear infinite; } .marquee-track span{ font-family:var(--font-display); font-style:italic; font-weight:500; font-size:1rem; letter-spacing:.02em; display:inline-flex; align-items:center; gap:48px; } .marquee-track span::after{ content:"✦"; opacity:.6; font-style:normal; } @keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } /* ---------- Stats ---------- */ .stats{ padding:100px 0; background:var(--ivory); } .stats-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:56px; flex-wrap:wrap; } .stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line); } .stat-card{ border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:34px 28px; transition:background .3s ease; } .stat-card:hover{ background:var(--ivory-2); } .stat-card .num{ font-family:var(--font-display); font-weight:700; font-size:clamp(2rem,3.2vw,2.6rem); color:var(--crimson); font-variant-numeric:tabular-nums; } .stat-card .num small{ font-size:.5em; font-weight:600; margin-left:2px; } .stat-card .desc{ font-size:.88rem; color:var(--ink-soft); margin-top:8px; max-width:220px; } /* ---------- Section shell ---------- */ .section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:52px; flex-wrap:wrap; } .section-head h2{ font-size:clamp(2rem,3.6vw,2.9rem); max-width:640px; } .section-head .lede{ margin-top:12px; } /* ---------- Races ---------- */ .races{ padding:110px 0; background:var(--ink); color:var(--ivory); position:relative; overflow:hidden; } .races .eyebrow{ color:var(--gold-soft); } .races .eyebrow::before{ background:var(--gold-soft); } .races h2{ color:var(--ivory); } .races .lede{ color:rgba(251,247,238,.68); } .race-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; align-items:stretch; } .race-card{ background:rgba(251,247,238,.04); border:1px solid rgba(251,247,238,.14); border-radius:var(--radius-md); overflow:hidden; position:relative; height:100%; display:flex; flex-direction:column; transition:transform .4s cubic-bezier(.2,.8,.2,1), background .3s ease, border-color .3s ease; } .race-card:hover{ transform:translateY(-8px); background:rgba(251,247,238,.07); border-color:rgba(227,174,51,.4); } /* Fixed-ratio image band — same proportions on every card regardless of the source photo's own dimensions, so the row of 4 cards lines up cleanly. */ .race-card-media{ position:relative; aspect-ratio:4/3; overflow:hidden; flex-shrink:0; } .race-card-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; } .race-card:hover .race-card-media img{ transform:scale(1.06); } .race-card-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,17,15,0) 55%, rgba(20,17,15,.65) 100%); } /* Body is a flex column so the tag row always sits flush with the card's bottom edge (margin-top:auto) — text of different lengths no longer leaves uneven gaps between cards, and every card in the row matches the tallest one thanks to align-items:stretch on the grid above. */ .race-card-body{ padding:26px 28px 28px; display:flex; flex-direction:column; flex:1; } .race-card .km{ font-family:var(--font-display); font-weight:700; font-size:3rem; color:var(--gold-soft); line-height:1; margin-top:-2px; } .race-card .km sup{ font-size:.35em; font-weight:600; top:-1.2em; } .race-card h3{ color:var(--ivory); font-size:1.2rem; margin-top:14px; } .race-card p{ color:rgba(251,247,238,.65); font-size:.9rem; margin-top:10px; } .race-card .tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; padding-top:20px; } .race-card .tags span{ font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; border:1px solid rgba(251,247,238,.2); border-radius:999px; padding:5px 12px; color:rgba(251,247,238,.75); } /* ---------- Race detail cards (light theme variant, used on races.html) ---------- */ .race-detail-grid{ display:grid; gap:20px; } .race-detail-card{ background:var(--ivory-2); border:1px solid var(--line); border-radius:var(--radius-md); padding:40px; display:grid; grid-template-columns:.62fr 1.38fr; gap:32px; align-items:center; transition:transform .3s ease, box-shadow .3s ease; } .race-detail-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-tight); } .race-detail-card .km{ font-family:var(--font-display); font-weight:700; font-size:3.2rem; line-height:1; color:var(--crimson); } .race-detail-card .km sup{ font-size:.35em; font-weight:600; top:-1.2em; } .race-detail-card h3{ color:var(--ink); font-size:1.3rem; margin-top:10px; } .race-detail-card p{ color:var(--ink-soft); } .race-detail-card .tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; } .race-detail-card .tags span{ font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; border:1px solid var(--line); border-radius:999px; padding:5px 12px; color:var(--ink-soft); } /* ---------- Journey / cities timeline ---------- */ .journey{ padding:110px 0; background:var(--ivory); } .journey-scroll{ display:flex; gap:0; overflow-x:auto; padding-bottom:20px; margin:0 -24px; padding-left:24px; padding-right:24px; scrollbar-width:thin; -webkit-overflow-scrolling:touch; } .journey-scroll::-webkit-scrollbar{ height:6px; } .journey-scroll::-webkit-scrollbar-thumb{ background:var(--line); border-radius:10px; } .journey-line{ position:relative; display:flex; align-items:stretch; min-width:max-content; } .jstop{ width:190px; flex:none; padding:0 22px 0 0; position:relative; } .jstop .rail{ position:relative; height:18px; } .jstop .rail::before{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--line); } .jstop .rail::after{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:11px; height:11px; border-radius:50%; background:var(--crimson); border:3px solid var(--ivory); box-shadow:0 0 0 1px var(--crimson); } .jstop:last-child .rail::before{ right:50%; } .jstop .jcity{ font-family:var(--font-display); font-weight:700; font-size:1.15rem; margin-top:16px; } .jstop .jdate{ font-size:.78rem; color:var(--crimson); font-weight:600; margin-top:2px; } .jstop .jnote{ font-size:.78rem; color:var(--ink-soft); opacity:.75; margin-top:6px; } .jstop.finale .jcity{ color:var(--crimson); } .jstop.finale .rail::after{ background:var(--gold); box-shadow:0 0 0 1px var(--gold); width:15px; height:15px; } /* ---------- City activation cards (activations.html) ---------- */ .city-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:18px; } .city-card{ background:var(--ivory); border:1px solid var(--line); border-radius:var(--radius-md); padding:26px 24px; transition:box-shadow .3s ease, transform .3s ease, border-color .3s ease; } .city-card:hover{ box-shadow:var(--shadow-tight); transform:translateY(-4px); border-color:rgba(178,16,48,.3); } .city-card .idx{ font-family:var(--font-display); font-size:.78rem; color:var(--crimson); font-weight:700; letter-spacing:.08em; margin-bottom:10px; } .city-card h3{ font-size:1.25rem; margin-bottom:4px; } .city-card .date{ font-size:.82rem; color:var(--crimson); font-weight:600; margin-bottom:10px; } .city-card p{ font-size:.86rem; color:var(--ink-soft); margin-bottom:0; } .finale-card{ background:var(--ink); color:var(--ivory); border-radius:var(--radius-lg); padding:44px; display:grid; grid-template-columns:.7fr 1.3fr; gap:36px; align-items:center; margin-bottom:36px; } .finale-card .idx{ color:var(--gold-soft); } .finale-card h3{ color:var(--ivory); font-size:2rem; } .finale-card .date{ color:var(--gold-soft); font-size:1rem; } .finale-card p{ color:rgba(251,247,238,.75); } /* ---------- Sponsorship tier cards (sponsorship.html) ---------- */ .tier-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .tier-card{ border:1px solid var(--line); border-radius:var(--radius-md); padding:30px 26px; background:var(--ivory); transition:box-shadow .3s ease, transform .3s ease, border-color .3s ease; } .tier-card:hover{ box-shadow:var(--shadow-tight); transform:translateY(-4px); } .tier-card.featured{ border-color:var(--crimson); background:var(--ivory-2); } .tier-card .tier-name{ font-family:var(--font-display); font-weight:700; font-size:1.25rem; } .tier-card .tier-rate{ font-family:var(--font-display); font-weight:700; font-size:1.7rem; color:var(--crimson); margin:10px 0 2px; } .tier-card .tier-rate small{ font-size:.55em; font-weight:600; color:var(--ink-soft); } .tier-card .tier-units{ font-size:.72rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.08em; margin-bottom:16px; } .tier-card .tier-revenue{ font-size:.82rem; color:var(--ink-soft); border-top:1px solid var(--line); padding-top:12px; margin-top:16px; } .tier-card .tier-revenue strong{ color:var(--ink); } .exhibitor-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; } .exhibitor-card{ border:1px solid var(--line); border-radius:var(--radius-md); padding:28px; background:var(--ivory-2); } .exhibitor-card .rate{ font-family:var(--font-display); font-weight:700; font-size:1.6rem; color:var(--forest); margin:8px 0; } /* ---------- Honeypot (anti-bot) field ---------- Used on register.html, donate.html and contact.html. Not display:none/visibility:hidden, since some bots skip fields hidden that way but still auto-fill anything else. This is the standard "visually-hidden" clipping technique (same one Bootstrap's .visually-hidden / WordPress's .screen-reader-text use) rather than shoving the field off-screen with a big negative left offset. That off-screen trick is fragile on this site specifically: several ancestors (anything with [data-reveal], see below) carry a CSS `transform` for their scroll-in animation, and ANY transformed ancestor becomes the positioning context for `position:absolute` descendants — so a "left:-9999px" meant to escape the viewport can instead land relative to some nearby transformed container and stay visible. Clipping the box to 1x1px in place sidesteps that entirely: it doesn't matter which element ends up as the containing block, the field is always visually clipped to nothing. Real visitors never see or reach it (aria-hidden + tabindex="-1" also keeps it out of the tab order and screen readers). */ .hp-field{ position:absolute !important; width:1px !important; height:1px !important; margin:-1px !important; padding:0 !important; border:0 !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; clip-path:inset(50%) !important; white-space:nowrap !important; } /* ---------- Contact form (contact.html) ---------- */ .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; } .form-field{ margin-bottom:20px; } .form-field label{ display:block; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--ink-soft); margin-bottom:8px; } .form-field input, .form-field select, .form-field textarea{ width:100%; font-family:var(--font-body); font-size:.95rem; color:var(--ink); background:var(--ivory); border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:13px 16px; transition:border-color .25s ease, box-shadow .25s ease; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline:none; border-color:var(--crimson); box-shadow:0 0 0 3px rgba(178,16,48,.1); } .form-field textarea{ resize:vertical; min-height:140px; } .form-note{ font-size:.82rem; color:var(--ink-soft); margin-top:18px; } .form-note a{ color:var(--crimson); font-weight:600; } .contact-info-card{ background:var(--ink); color:var(--ivory); border-radius:var(--radius-lg); padding:36px; } .contact-info-card h4{ color:var(--ivory); font-size:1.1rem; } .contact-info-card .row{ padding:16px 0; border-top:1px solid rgba(251,247,238,.14); } .contact-info-card .row:first-of-type{ border-top:none; } .contact-info-card .label{ font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-soft); font-weight:700; margin-bottom:6px; } .contact-info-card .value{ font-size:.94rem; color:rgba(251,247,238,.85); } .contact-info-card .value a{ color:rgba(251,247,238,.85); } .contact-info-card .value a:hover{ color:var(--gold-soft); } /* ---------- Partners ---------- */ .partners{ padding:100px 0; background:var(--ivory-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .partner-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; } .partner-card{ background:var(--ivory); border:1px solid var(--line); border-radius:var(--radius-md); padding:28px 24px; transition:box-shadow .3s ease, transform .3s ease; } .partner-card:hover{ box-shadow:var(--shadow-tight); transform:translateY(-4px); } .partner-card .role{ font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--crimson); font-weight:700; margin-bottom:10px; } .partner-card h4{ font-size:1.08rem; margin-bottom:8px; } .partner-card p{ font-size:.85rem; color:var(--ink-soft); margin-bottom:0; } /* Partner/anchor-organisation logo badge — used inside .partner-card and .framework-card wherever a real org logo (TASO, Uganda AIDS Commission, Village Journeys Africa, AMICAALL) is shown. Fixed square box with the logo letterboxed inside via object-fit:contain, so source logos of different aspect ratios and backgrounds all sit consistently. */ .org-logo{ width:60px; height:60px; border-radius:12px; overflow:hidden; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; padding:7px; margin-bottom:16px; } .org-logo img{ width:100%; height:100%; object-fit:contain; display:block; } /* ---------- Champion spotlight ---------- */ .spotlight{ padding:120px 0; background:var(--forest); color:var(--ivory); position:relative; overflow:hidden; } .spotlight::before{ content:""; position:absolute; inset:0; background:radial-gradient(600px 400px at 100% 0%, rgba(227,174,51,.18), transparent 60%); } .spotlight-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:60px; align-items:center; position:relative; z-index:1; } .spotlight .eyebrow{ color:var(--gold-soft); } .spotlight .eyebrow::before{ background:var(--gold-soft); } .spotlight h2{ color:var(--ivory); font-size:clamp(1.9rem,3.4vw,2.6rem); } .spotlight blockquote{ font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(1.3rem,2vw,1.7rem); line-height:1.4; margin:0 0 22px; color:var(--ivory); } .spotlight cite{ font-style:normal; font-size:.85rem; color:var(--gold-soft); font-weight:600; letter-spacing:.03em; } .spotlight-figure{ aspect-ratio:3/4; border-radius:var(--radius-lg); background:linear-gradient(155deg, rgba(227,174,51,.35), rgba(178,16,48,.25)), var(--ink); position:relative; overflow:hidden; border:1px solid rgba(251,247,238,.14); } /* ---------- CTA band ---------- */ .cta-band{ padding:110px 0; background:var(--crimson); color:var(--ivory); text-align:center; position:relative; overflow:hidden; } .cta-band h2{ color:var(--ivory); font-size:clamp(2.1rem,4vw,3.2rem); max-width:760px; margin:0 auto 20px; } .cta-band .lede{ color:rgba(251,247,238,.85); max-width:560px; margin:0 auto 40px; } .cta-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; } /* ---------- Footer ---------- */ .site-footer{ background:var(--ink); color:rgba(251,247,238,.7); padding:80px 0 30px; } .footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:56px; } .footer-brand .brand-text .name{ color:var(--ivory); } .footer-brand p{ font-size:.88rem; max-width:280px; margin-top:16px; color:rgba(251,247,238,.6); } .footer-col h5{ color:var(--ivory); font-family:var(--font-body); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; margin-bottom:18px; } .footer-col a, .footer-col p{ display:block; font-size:.9rem; color:rgba(251,247,238,.65); margin-bottom:10px; transition:color .25s ease; } .footer-col a:hover{ color:var(--gold-soft); } .footer-social{ display:flex; gap:10px; margin-top:16px; } .footer-social a{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(251,247,238,.2); display:flex; align-items:center; justify-content:center; margin-bottom:0; } .footer-social a:hover{ border-color:var(--gold-soft); background:rgba(227,174,51,.1); } .footer-bottom{ border-top:1px solid rgba(251,247,238,.12); padding-top:26px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.78rem; color:rgba(251,247,238,.45); } /* ---------- Reveal-on-scroll ---------- */ [data-reveal]{ opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); } [data-reveal].is-visible{ opacity:1; transform:translateY(0); } /* ---------- About-page specific ---------- */ .page-hero{ padding:78px 0 70px; background:linear-gradient(180deg, var(--ivory-2), var(--ivory)); border-bottom:1px solid var(--line); } .breadcrumb-line{ display:flex; align-items:center; gap:8px; font-size:.8rem; color:var(--ink-soft); margin-bottom:22px; opacity:.7; } .breadcrumb-line .sep{ opacity:.5; } .page-hero h1{ font-size:clamp(2.4rem,4.6vw,3.6rem); max-width:820px; } .prose-section{ padding:90px 0; } .prose-grid{ display:grid; grid-template-columns:.9fr 1.5fr; gap:64px; } .prose-side{ position:sticky; top:110px; align-self:start; height:max-content; } .prose-side .eyebrow{ margin-bottom:20px; } .prose-body h3{ font-size:1.6rem; margin-top:0; } .prose-body p{ color:var(--ink-soft); font-size:1.02rem; } .prose-body .lead-stat{ font-family:var(--font-display); font-size:1.3rem; font-style:italic; color:var(--crimson); border-left:3px solid var(--crimson); padding-left:20px; margin:28px 0; } /* Used only by genuinely dense/numeric tables (e.g. the About page HIV stats table) — kept as a real table at every width, scrolling horizontally on narrow screens instead of collapsing into a stack of boxed label/value cards. The first column stays pinned (sticky) while the rest scrolls underneath it, so row labels never disappear off the left edge. Simpler list-style tables elsewhere on the site (activation dates, race comparisons, the register review summary) were converted away from entirely rather than reusing this — see .date-list, .spec-list, .review-list. */ .data-table-wrap{ position:relative; overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:var(--radius-md); margin:32px 0; } table.aids-table{ width:100%; border-collapse:collapse; font-size:.86rem; min-width:480px; } table.aids-table th, table.aids-table td{ padding:12px 16px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap; } table.aids-table thead th{ background:var(--ivory-2); font-weight:700; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); } table.aids-table tbody tr:last-child td{ border-bottom:none; } table.aids-table tbody tr:hover{ background:var(--ivory-2); } table.aids-table th:first-child, table.aids-table td:first-child{ position:sticky; left:0; background:var(--ivory); z-index:1; box-shadow:1px 0 0 var(--line); } table.aids-table thead th:first-child{ background:var(--ivory-2); z-index:2; } table.aids-table tbody tr:hover td:first-child{ background:var(--ivory-2); } .table-scroll-hint{ display:none; font-size:.74rem; color:var(--ink-soft); text-align:right; margin:-16px 0 20px; } @media (max-width:760px){ .data-table-wrap{ margin:24px 0; } .data-table-wrap::after{ content:""; position:absolute; top:0; right:0; bottom:0; width:26px; background:linear-gradient(to right, transparent, rgba(20,17,15,.10)); pointer-events:none; } .table-scroll-hint{ display:block; } } /* Simple two-column key/value list (e.g. the About page's city -> activation-date recap) — a plain divider list rather than a
, since it's only ever two short fields per row and doesn't need table semantics. column-count reflows it into a single column on mobile without any JS or extra markup. */ .date-list{ column-count:2; column-gap:32px; margin:32px 0; } .date-row{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:4px 16px; padding:13px 0; border-bottom:1px solid var(--line); break-inside:avoid; } .date-row .city{ font-weight:600; } .date-row .date{ color:var(--crimson); font-weight:600; font-size:.86rem; text-align:right; } @media (max-width:680px){ .date-list{ column-count:1; } } /* Wrapping "spec row" list (e.g. the Races comparison table) — each row is a race category with a few short fields. Fields wrap naturally via flex-wrap rather than collapsing into a boxed card per row, and stack to one field per line only once the viewport genuinely can't fit them side by side. */ .spec-list{ border-top:1px solid var(--line); margin:32px 0; } .spec-row{ display:flex; flex-wrap:wrap; column-gap:32px; row-gap:6px; align-items:baseline; padding:18px 0; border-bottom:1px solid var(--line); } .spec-row .spec-category{ flex:1 1 170px; font-weight:700; color:var(--ink); font-size:.95rem; } .spec-row .spec-cell{ font-size:.86rem; color:var(--ink-soft); } .spec-row .spec-label{ display:block; font-size:.66rem; letter-spacing:.07em; text-transform:uppercase; font-weight:700; color:var(--crimson); margin-bottom:2px; } @media (max-width:680px){ .spec-row{ flex-direction:column; gap:4px; } } /* Light-background sibling of the order-summary's .os-row style, used for the register review step (which sits inside a light .reg-card, not the dark order-summary aside) — same clean flex label/value row, no boxed table, no per-row card. */ .review-list{ margin-bottom:26px; } .review-row{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:12px 0; border-top:1px solid var(--line); font-size:.9rem; } .review-row:first-of-type{ border-top:none; } .review-row .k{ color:var(--ink-soft); } .review-row .v{ font-weight:600; text-align:right; } .review-row.review-total{ margin-top:4px; padding-top:16px; border-top:1px solid var(--line); } .review-row.review-total .k{ font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:var(--ink-soft); } .review-row.review-total .v{ font-family:var(--font-display); font-size:1.3rem; font-weight:700; } .objectives-list{ counter-reset:obj; margin-top:24px; } .objectives-list li{ counter-increment:obj; position:relative; padding:22px 0 22px 56px; border-top:1px solid var(--line); } .objectives-list li:first-child{ border-top:none; } .objectives-list li::before{ content:counter(obj,decimal-leading-zero); position:absolute; left:0; top:20px; font-family:var(--font-display); font-weight:700; font-size:1.3rem; color:var(--crimson); } .objectives-list h4{ font-size:1.05rem; margin-bottom:6px; } .objectives-list p{ color:var(--ink-soft); font-size:.92rem; margin-bottom:0; } .framework-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:20px; } .framework-card{ border:1px solid var(--line); border-radius:var(--radius-md); padding:26px; background:var(--ivory); } .framework-card .role{ font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--crimson); font-weight:700; margin-bottom:10px; } .framework-card h4{ font-size:1.05rem; margin-bottom:8px; } .framework-card p{ font-size:.88rem; color:var(--ink-soft); margin-bottom:0; } .outcomes-strip{ background:var(--ink); color:var(--ivory); border-radius:var(--radius-lg); padding:56px 48px; margin-top:20px; } .outcomes-strip .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px; } .outcomes-strip .num{ font-family:var(--font-display); font-size:clamp(1.8rem,5vw,2.4rem); color:var(--gold-soft); font-weight:700; } .outcomes-strip p{ color:rgba(251,247,238,.75); font-size:.9rem; margin-top:10px; margin-bottom:0; } .venue-note{ display:flex; gap:14px; align-items:flex-start; background:var(--ivory-2); border:1px dashed rgba(178,16,48,.4); border-radius:var(--radius-sm); padding:16px 18px; font-size:.82rem; color:var(--ink-soft); margin:24px 0; } .venue-note strong{ color:var(--crimson); } /* ---------- Registration wizard (register.html) ---------- */ .reg-shell{ padding:60px 0 110px; } .reg-layout{ display:grid; grid-template-columns:1fr 340px; gap:48px; align-items:start; } .reg-stepper{ display:flex; align-items:center; margin-bottom:48px; } .reg-stepper .rs-step{ display:flex; align-items:center; gap:12px; flex:none; } .reg-stepper .rs-dot{ width:34px; height:34px; border-radius:50%; border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:.9rem; color:var(--ink-soft); background:var(--ivory); transition:all .3s ease; flex:none; } .reg-stepper .rs-label{ font-size:.78rem; font-weight:600; color:var(--ink-soft); white-space:nowrap; } .reg-stepper .rs-line{ flex:1; height:1px; background:var(--line); margin:0 14px; min-width:20px; } .reg-stepper .rs-step.is-active .rs-dot{ border-color:var(--crimson); background:var(--crimson); color:#fff; } .reg-stepper .rs-step.is-active .rs-label{ color:var(--ink); } .reg-stepper .rs-step.is-done .rs-dot{ border-color:var(--crimson); background:var(--ivory); color:var(--crimson); } .reg-stepper .rs-step.is-done .rs-line{ background:var(--crimson); } .reg-panel{ display:none; } .reg-panel.is-active{ display:block; } .reg-card{ background:var(--ivory-2); border:1px solid var(--line); border-radius:var(--radius-lg); padding:40px; } .reg-card h2{ font-size:1.6rem; margin-bottom:8px; } .reg-card .sub{ color:var(--ink-soft); font-size:.94rem; margin-bottom:30px; } /* Selectable option cards (race category / kit type) */ .select-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .select-card{ position:relative; text-align:left; cursor:pointer; background:var(--ivory); border:1.5px solid var(--line); border-radius:var(--radius-md); padding:22px 20px; transition:border-color .25s ease, background .25s ease, transform .25s ease; } .select-card:hover{ transform:translateY(-3px); } .select-card input{ position:absolute; opacity:0; pointer-events:none; } .select-card .sc-km{ font-family:var(--font-display); font-weight:700; font-size:1.9rem; color:var(--crimson); line-height:1; } .select-card .sc-title{ font-weight:600; margin-top:8px; font-size:.98rem; } .select-card .sc-desc{ font-size:.82rem; color:var(--ink-soft); margin-top:6px; } .select-card .sc-price{ font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--forest); margin-top:12px; } .select-card input:checked ~ .sc-check{ opacity:1; transform:scale(1); } .select-card:has(input:checked), .select-card.is-selected{ border-color:var(--crimson); background:var(--ivory-2); box-shadow:0 0 0 3px rgba(178,16,48,.08); } .sc-check{ position:absolute; top:16px; right:16px; width:20px; height:20px; border-radius:50%; background:var(--crimson); color:#fff; font-size:.7rem; display:flex; align-items:center; justify-content:center; opacity:0; transform:scale(.6); transition:all .2s ease; } .sc-check::after{ content:"✓"; } .kit-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; } .reg-actions{ display:flex; justify-content:space-between; align-items:center; margin-top:34px; gap:16px; } .reg-actions .spacer{ flex:1; } /* Order summary sidebar */ .order-summary{ position:sticky; top:110px; background:var(--ink); color:var(--ivory); border-radius:var(--radius-lg); padding:32px; } .order-summary h4{ color:var(--ivory); font-size:1rem; margin-bottom:20px; } .order-summary .os-row{ display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-top:1px solid rgba(251,247,238,.14); font-size:.86rem; } .order-summary .os-row:first-of-type{ border-top:none; } .order-summary .os-row .k{ color:rgba(251,247,238,.6); } .order-summary .os-row .v{ color:var(--ivory); font-weight:600; text-align:right; } .order-summary .os-total{ display:flex; justify-content:space-between; align-items:baseline; margin-top:18px; padding-top:18px; border-top:1px solid rgba(251,247,238,.2); } .order-summary .os-total .k{ font-size:.82rem; color:var(--gold-soft); text-transform:uppercase; letter-spacing:.08em; font-weight:700; } .order-summary .os-total .v{ font-family:var(--font-display); font-size:1.7rem; font-weight:700; color:var(--ivory); } /* Payment step */ .pay-method-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:22px 0 26px; } .pay-status{ text-align:center; padding:50px 20px; } .pay-status .spinner{ width:52px; height:52px; margin:0 auto 26px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--crimson); animation:spin 0.9s linear infinite; } @keyframes spin{ to{ transform:rotate(360deg); } } .pay-status .glyph{ width:64px; height:64px; margin:0 auto 24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.8rem; font-weight:700; } .pay-status.success .glyph{ background:rgba(30,58,43,.12); color:var(--forest); } .pay-status.failed .glyph{ background:rgba(178,16,48,.1); color:var(--crimson); } .pay-status h3{ font-size:1.4rem; margin-bottom:10px; } .pay-status p{ color:var(--ink-soft); max-width:440px; margin:0 auto 22px; } .pay-ref{ display:inline-block; font-family:var(--font-display); font-weight:700; letter-spacing:.04em; background:var(--ivory-2); border:1px dashed var(--line); border-radius:var(--radius-sm); padding:10px 18px; font-size:.92rem; margin-bottom:22px; } .field-error{ color:var(--crimson); font-size:.78rem; margin-top:6px; display:none; } .form-field.has-error input, .form-field.has-error select{ border-color:var(--crimson); } .form-field.has-error .field-error{ display:block; } /* Standalone inline errors (e.g. race/kit selection, which are groups of cards rather than a single .form-field input) — shown by toggling .show directly on the .field-error element itself. */ .field-error.show{ display:block; margin-top:14px; } /* ---------- Donate page (donate.html) ---------- */ /* Amount presets reuse .select-card but sit 4-across instead of the 3-up default, and read better centered since there's no km/desc/price stack beneath the title on this variant. */ #amount-grid{ grid-template-columns:repeat(4,1fr); } #amount-grid .select-card{ text-align:center; padding:26px 16px; } #amount-grid .sc-title{ margin-top:0; font-size:1.05rem; } /* ---------- Responsive ---------- */ @media (max-width:1100px){ .stats-grid{ grid-template-columns:repeat(2,1fr); } .partner-grid{ grid-template-columns:repeat(2,1fr); } .race-grid{ grid-template-columns:1fr; } .footer-top{ grid-template-columns:1fr 1fr; } .prose-grid{ grid-template-columns:1fr; } .prose-side{ position:static; margin-bottom:20px; } .framework-grid{ grid-template-columns:1fr; } .outcomes-strip .grid{ grid-template-columns:1fr; gap:26px; } .tier-grid{ grid-template-columns:repeat(2,1fr); } .reg-layout{ grid-template-columns:1fr; } .order-summary{ position:static; } #amount-grid{ grid-template-columns:repeat(2,1fr); } .select-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:520px){ .tier-grid{ grid-template-columns:1fr; } .exhibitor-grid{ grid-template-columns:1fr; } .city-grid{ grid-template-columns:1fr; } } /* ========================================================================== MEDIA / PHOTO TREATMENTS — shared across Home, About, Races, Activations ========================================================================== */ .media-section{ padding:100px 0; } .media-section.on-ivory-2{ background:var(--ivory-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .media-section .section-head{ margin-bottom:40px; } .media-note{ color:var(--ink-soft); font-size:.92rem; max-width:560px; } /* --- Contained "watch" video card --- */ .trailer-layout{ display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:center; } .trailer-video-wrap{ border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-tight); border:1px solid var(--line); background:#000; } .trailer-video-wrap video{ width:100%; display:block; } /* --- Gradient-fade hero: photo fading into a solid colour --- */ .fade-hero{ position:relative; overflow:hidden; border-radius:var(--radius-md); min-height:480px; display:flex; align-items:flex-end; } .fade-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%; z-index:0; } .fade-hero::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(20,17,15,0) 25%, rgba(20,17,15,.55) 60%, #14110F 96%); } .fade-hero-content{ position:relative; z-index:2; padding:52px 44px; max-width:620px; color:#fff; } .fade-hero-content .eyebrow{ color:#F0CE7D; } .fade-hero-content h2{ color:#fff; font-size:clamp(1.7rem, 3.6vw, 2.4rem); margin:12px 0 14px; } .fade-hero-content p{ color:rgba(255,255,255,.82); margin-bottom:0; max-width:520px; } /* --- Split hero: text one side, real photo the other --- */ .split-hero{ display:grid; grid-template-columns:1fr 1fr; gap:0; border-radius:var(--radius-md); overflow:hidden; min-height:420px; } .split-hero-text{ background:var(--ink); color:#fff; display:flex; flex-direction:column; justify-content:center; padding:52px; } .split-hero-text .eyebrow{ color:#F0CE7D; } .split-hero-text h2{ color:#fff; font-size:clamp(1.7rem, 3.2vw, 2.2rem); margin:12px 0 14px; } .split-hero-text p{ color:rgba(255,255,255,.75); margin-bottom:0; } .split-hero-photo{ position:relative; min-height:280px; } .split-hero-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } /* --- Radial vignette + brand-crimson duotone statement break --- */ .duotone-hero{ position:relative; overflow:hidden; border-radius:var(--radius-md); min-height:400px; display:flex; align-items:center; justify-content:center; text-align:center; } .duotone-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; filter:grayscale(.3) contrast(1.05); } .duotone-hero::after{ content:""; position:absolute; inset:0; z-index:1; background: radial-gradient(120% 90% at 50% 30%, transparent 30%, rgba(20,17,15,.75) 100%), linear-gradient(0deg, rgba(178,16,48,.55), rgba(178,16,48,.15)); mix-blend-mode:multiply; } .duotone-hero::before{ content:""; position:absolute; inset:0; z-index:1; background:rgba(178,16,48,.28); } .duotone-hero-content{ position:relative; z-index:2; max-width:600px; padding:20px; color:#fff; } .duotone-hero-content .eyebrow{ color:#F0CE7D; justify-content:center; } .duotone-hero-content h2{ color:#fff; font-size:clamp(1.6rem, 3.4vw, 2.3rem); margin:12px 0 0; } /* --- Photo mosaic / "moments from the road" --- */ .mosaic-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; grid-template-rows:180px 180px; gap:14px; border-radius:var(--radius-md); overflow:hidden; } .mosaic-grid > div{ position:relative; overflow:hidden; border-radius:12px; } .mosaic-grid > div:first-child{ grid-row:span 2; } .mosaic-grid img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; } .mosaic-grid > div:hover img{ transform:scale(1.06); } .mosaic-swatch{ background-image:url("../img/pattern-swatch.4a7c1fb247b3.png"); background-size:cover; background-position:center; } /* --- Bold colour-overlay poster banner with pull-quote --- */ .poster-banner{ position:relative; overflow:hidden; border-radius:var(--radius-md); min-height:380px; display:flex; align-items:center; } .poster-banner img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; } .poster-banner::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(100deg, rgba(178,16,48,.88) 0%, rgba(178,16,48,.55) 45%, rgba(20,17,15,.25) 100%); } .poster-banner-content{ position:relative; z-index:2; padding:44px; max-width:520px; color:#fff; } .poster-banner-content p.pull{ font-family:var(--font-display); font-size:1.6rem; font-style:italic; line-height:1.35; margin-bottom:0; } .poster-banner-content .eyebrow{ color:#F0CE7D; } /* --- Ambient blurred background photo behind stat cards --- */ .ambient-stats{ position:relative; border-radius:var(--radius-md); overflow:hidden; padding:60px 40px; } .ambient-stats img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:blur(1px); z-index:0; } .ambient-stats::after{ content:""; position:absolute; inset:0; z-index:1; background:rgba(20,17,15,.72); } .ambient-stats-inner{ position:relative; z-index:2; } .ambient-stats h2{ color:#fff; } .ambient-stats .media-note{ color:rgba(255,255,255,.7); } .ambient-stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:28px; } .ambient-stat-card{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:26px 22px; text-align:center; backdrop-filter:blur(6px); } .ambient-stat-card .num{ font-family:var(--font-display); font-size:clamp(1.8rem,3vw,2.2rem); font-weight:700; color:#F0CE7D; } .ambient-stat-card .desc{ color:rgba(255,255,255,.75); font-size:.86rem; margin-top:8px; } /* --- Real kit photography showcase --- */ .kit-showcase-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; } .kit-showcase-card{ border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; background:var(--ivory); transition:box-shadow .3s ease, transform .3s ease; } .kit-showcase-card:hover{ box-shadow:var(--shadow-tight); transform:translateY(-4px); } .kit-showcase-card .shot{ background:#0c0a09; } .kit-showcase-card.is-light .shot{ background:#f4f4f4; } .kit-showcase-card img{ width:100%; display:block; } .kit-showcase-card .cap{ padding:18px 22px; } .kit-showcase-card .cap h4{ margin-bottom:4px; } .kit-showcase-card .cap p{ color:var(--ink-soft); font-size:.86rem; margin:0; } /* --- Splash / pattern accent band, pulled from the kit art --- */ .splash-band{ position:relative; border-radius:var(--radius-md); overflow:hidden; padding:60px 40px; text-align:center; color:#fff; min-height:240px; display:flex; align-items:center; justify-content:center; } .splash-band .bg{ position:absolute; inset:0; background-image:url("../img/pattern-swatch.4a7c1fb247b3.png"); background-size:cover; background-position:center; filter:saturate(1.1); } .splash-band::after{ content:""; position:absolute; inset:0; background:rgba(20,17,15,.35); } .splash-band-content{ position:relative; z-index:2; max-width:560px; } .splash-band-content p{ font-family:var(--font-display); font-size:1.4rem; font-style:italic; line-height:1.4; margin:0; } @media (max-width:920px){ .trailer-layout{ grid-template-columns:1fr; } .kit-showcase-grid{ grid-template-columns:1fr; } .split-hero{ grid-template-columns:1fr; } .split-hero-photo{ min-height:260px; } .mosaic-grid{ grid-template-columns:1fr 1fr; grid-template-rows:150px 150px 150px; } .mosaic-grid > div:first-child{ grid-column:span 2; grid-row:span 1; } .ambient-stat-row{ grid-template-columns:repeat(2,1fr); } } @media (max-width:680px){ .media-section{ padding:64px 0; } .fade-hero-content, .duotone-hero-content, .poster-banner-content{ padding:32px 24px; } .split-hero-text{ padding:36px 26px; } .ambient-stats{ padding:40px 24px; } .ambient-stat-row{ grid-template-columns:1fr; } .splash-band{ padding:40px 24px; } } @media (max-width:920px){ .hero-grid{ grid-template-columns:1fr; } .hero{ padding:60px 0 80px; text-align:left; } .spotlight-grid{ grid-template-columns:1fr; } .spotlight-figure{ order:-1; max-width:320px; aspect-ratio:4/3; } .race-detail-card{ grid-template-columns:.8fr 1.2fr; padding:32px; gap:24px; } .finale-card{ grid-template-columns:1fr; padding:32px; gap:18px; text-align:left; } } @media (max-width:600px){ .race-detail-card{ grid-template-columns:1fr; padding:28px 22px; gap:14px; text-align:left; } .finale-card{ padding:26px 22px; } .finale-card h3{ font-size:1.6rem; } } /* Header switches to the hamburger + right-hand drawer well before the desktop nav (5 links + 2 buttons) would start crowding the bar — that needs roughly 1150px+ to breathe, so tablets and small laptops get the drawer too, not just phones. */ @media (max-width:1120px){ .nav-cta > .btn-em{ display:none; } .nav-toggle{ display:inline-flex; } .nav-links{ display:flex; flex-direction:column; align-items:stretch; gap:0; position:fixed; top:0; right:0; bottom:0; height:100vh; height:100dvh; width:min(84vw, 340px); background:var(--ivory); box-shadow:-18px 0 50px -22px rgba(20,17,15,.5); padding:88px 28px 32px; transform:translateX(100%); visibility:hidden; transition:transform .4s cubic-bezier(.2,.8,.2,1), visibility 0s linear .4s; z-index:200; overflow-y:auto; -webkit-overflow-scrolling:touch; } .site-header.mobile-open .nav-links{ transform:translateX(0); visibility:visible; transition:transform .4s cubic-bezier(.2,.8,.2,1); } .nav-links > a{ padding:15px 0; width:100%; border-bottom:1px solid var(--line-soft); font-size:1rem; } .nav-drawer-close{ display:flex; } .nav-mobile-actions{ display:flex; flex-direction:column; gap:12px; margin-top:22px; padding-top:4px; width:100%; } .nav-mobile-actions .btn-em{ width:100%; justify-content:center; white-space:normal; text-align:center; } /* The topbar's message + 3 links also crowd out before 1120px on medium/tablet widths, so simplify it at the same breakpoint. */ .topbar-links{ display:none; } .topbar .container{ justify-content:center; } .topbar-msg{ text-align:center; } } @media (max-width:820px){ .hero{ padding:48px 0 64px; } .stats, .races, .journey, .partners, .prose-section{ padding:64px 0; } .spotlight, .cta-band{ padding:72px 0; } .page-hero{ padding:52px 0 46px; } .site-footer{ padding:56px 0 24px; } .section-head{ margin-bottom:36px; } .prose-grid{ gap:36px; } .framework-grid{ gap:16px; } .outcomes-strip{ padding:44px 32px; } } @media (max-width:680px){ .container{ padding-left:18px; padding-right:18px; } .stats-grid{ grid-template-columns:1fr; } .partner-grid{ grid-template-columns:1fr; } .footer-top{ grid-template-columns:1fr; gap:32px; } .countdown-grid{ grid-template-columns:repeat(4,1fr); gap:6px; } .countdown-card{ padding:26px 20px; } .hero-actions .btn-em{ width:100%; justify-content:center; } .hero-actions{ flex-direction:column; } .cta-actions{ flex-direction:column; align-items:stretch; } .cta-actions .btn-em{ width:100%; justify-content:center; } .section-head{ flex-direction:column; align-items:flex-start; } .outcomes-strip{ padding:32px 20px; } .jstop{ width:160px; } .journey-scroll{ margin:0 -18px; padding-left:18px; padding-right:18px; -webkit-overflow-scrolling:touch; } .exhibitor-grid{ grid-template-columns:1fr; } .finale-card{ grid-template-columns:1fr; text-align:left; padding:28px 24px; } .form-row{ grid-template-columns:1fr; gap:0; } .contact-info-card{ padding:28px 24px; } .reg-card{ padding:26px 20px; } .select-grid{ grid-template-columns:1fr; } .kit-grid{ grid-template-columns:1fr; } .pay-method-grid{ grid-template-columns:1fr; } #amount-grid{ grid-template-columns:repeat(2,1fr); } .reg-stepper{ overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:6px; } .reg-stepper .rs-label{ display:none; } .reg-actions{ flex-wrap:wrap; } .reg-actions .btn-em{ flex:1; justify-content:center; } .hero h1{ font-size:clamp(2.1rem, 8vw, 2.8rem); } .brand-text .tag{ display:none; } .footer-bottom{ flex-direction:column; align-items:flex-start; } .page-hero h1{ font-size:clamp(1.9rem, 8vw, 2.6rem); } .objectives-list li{ padding-left:44px; } .objectives-list li::before{ font-size:1.1rem; } .framework-card{ padding:20px; } .venue-note{ flex-direction:column; gap:8px; } .prose-body .lead-stat{ font-size:1.12rem; padding-left:16px; margin:22px 0; } } @media (max-width:420px){ .brand-text .name{ font-size:.92rem; max-width:48vw; } .brand-mark{ width:36px; height:36px; } .btn-em{ padding:13px 22px; font-size:.86rem; } .countdown-grid .cd .num{ font-size:1.4rem; } .hero-meta{ gap:12px 20px; } .page-hero h1{ font-size:1.7rem; } } /* ========================================================================== ERROR PAGES (400 / 403 / 404 / 500) ========================================================================== */ .error-page{ padding:130px 0 150px; min-height:60vh; display:flex; align-items:center; background: radial-gradient(1000px 460px at 85% -10%, rgba(178,16,48,.08), transparent 60%), radial-gradient(800px 460px at -10% 110%, rgba(30,58,43,.10), transparent 60%), var(--ivory); } .error-card{ max-width:640px; margin:0 auto; text-align:center; } .error-code{ display:block; font-family:var(--font-display); font-weight:700; font-size:clamp(4rem, 12vw, 7rem); line-height:1; color:var(--crimson); margin-bottom:8px; } .error-card h1{ font-size:clamp(1.6rem, 3.6vw, 2.3rem); margin-bottom:16px; } .error-card .lede{ margin:0 auto 34px; } .error-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:34px; } .error-links{ display:flex; gap:10px 22px; justify-content:center; flex-wrap:wrap; padding-top:26px; border-top:1px solid var(--line); font-size:.86rem; } .error-links a{ color:var(--ink-soft); } .error-links a:hover{ color:var(--crimson); } @media (max-width:680px){ .error-page{ padding:90px 0 100px; } .error-actions{ flex-direction:column; align-items:stretch; } .error-actions .btn-em{ width:100%; justify-content:center; } }