:root { --ink:#4e4e4e; --cream:#f7f7fd; --orange:#6f3592; --yellow:#19ae69; --sage:#d0ddee; --blue:#3e6cb5; --green-pale:#cbe7d4; --purple-pale:#d4cae1; --line:rgba(78,78,78,.18); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--cream); font-family:Poppins,Arial,sans-serif; } a { color:inherit; text-decoration:none; } .skip-link { position:absolute; left:-9999px; } .skip-link:focus { left:1rem; top:1rem; z-index:10; background:white; padding:.8rem; }
.site-header { display:flex; align-items:center; justify-content:space-between; max-width:1320px; margin:auto; padding:22px 5vw; } .brand { display:flex; align-items:center; gap:9px; text-transform:uppercase; font-size:11px; font-weight:800; line-height:.95; letter-spacing:.09em; } .brand-mark { display:grid; place-items:center; width:35px; aspect-ratio:1; border-radius:50%; background:var(--orange); color:#fff; font-family:Poppins,sans-serif; font-size:17px; font-weight:800; text-transform:none; letter-spacing:0; } .site-nav { display:flex; align-items:center; gap:30px; font-size:13px; font-weight:700; } .site-nav a:not(.nav-register) { border-bottom:1px solid transparent; } .site-nav a:not(.nav-register):hover { border-color:var(--ink); } .nav-register { padding:12px 18px; background:var(--blue); color:#fff; } .menu-toggle { display:none; border:0; background:transparent; font:700 13px Poppins; }
.hero { min-height:calc(100svh - 79px); max-width:1320px; margin:auto; padding:8vh 5vw 0; position:relative; overflow:hidden; display:grid; grid-template-columns:1.05fr .95fr; } .hero-copy { position:relative; z-index:2; padding-top:6vh; } .eyebrow { margin:0 0 16px; text-transform:uppercase; letter-spacing:.12em; font:600 11px Poppins,sans-serif; color:var(--blue); } h1,h2,h3 { margin:0; font-family:Poppins,Arial,sans-serif; font-weight:800; } h1 { font-size:clamp(3.6rem,7.5vw,7.2rem); line-height:.94; max-width:680px; letter-spacing:-.065em; } h1 em,h2 em { color:var(--orange); font-family:"EB Garamond",Georgia,serif; font-weight:500; } .hero-text { max-width:450px; font:500 24px/1.3 "EB Garamond",Georgia,serif; margin:34px 0 28px; } .hero-actions { display:flex; gap:25px; align-items:center; } .button { display:inline-flex; gap:24px; align-items:center; padding:17px 20px; font-size:13px; font-weight:800; } .button-primary { background:var(--orange); color:#fff; } .button:hover { transform:translateY(-2px); } .text-link { display:inline-block; font-weight:800; font-size:13px; border-bottom:1px solid var(--ink); padding-bottom:4px; } .hero-art { background:var(--sage); position:relative; margin-left:5vw; min-height:100%; overflow:hidden; } .sun { position:absolute; width:280px; height:280px; top:88px; right:14%; border-radius:50%; background:var(--yellow); } .horizon { position:absolute; width:145%; left:-20%; border-radius:50% 50% 0 0; } .horizon-one { height:250px; bottom:130px; background:var(--blue); transform:rotate(-6deg); } .horizon-two { height:200px; bottom:-30px; background:var(--orange); transform:rotate(5deg); } .art-label { position:absolute; z-index:2; right:25px; bottom:24px; color:#fff; text-align:right; text-transform:uppercase; letter-spacing:.14em; font:600 10px Poppins,sans-serif; } .runner { position:absolute; z-index:3; width:9px; height:95px; background:var(--orange); transform:rotate(17deg); } .runner:before { content:""; position:absolute; width:25px; height:9px; background:var(--orange); top:27px; left:-14px; transform:rotate(-35deg); box-shadow:23px 42px 0 var(--orange); } .runner:after { content:""; position:absolute; width:20px; height:20px; background:var(--orange); border-radius:50%; top:-25px; left:-5px; } .runner-one { bottom:115px; left:42%; } .runner-two { bottom:88px; right:26%; transform:scale(.7) rotate(-20deg); background:var(--yellow); } .runner-two:before,.runner-two:after { background:var(--yellow); box-shadow:23px 42px 0 var(--yellow); } .race-facts { position:absolute; z-index:3; bottom:0; left:5vw; display:flex; gap:35px; padding:24px 0; } .race-facts div { display:flex; align-items:center; gap:8px; text-transform:uppercase; font:600 9px/1.25 Poppins,sans-serif; } .fact-number { color:var(--orange); font:700 29px/1 Poppins,sans-serif; }
.section { padding:120px 5vw; max-width:1320px; margin:auto; } .section-heading { display:flex; justify-content:space-between; align-items:end; gap:50px; } h2 { font-size:clamp(2.9rem,5vw,5.5rem); letter-spacing:-.06em; line-height:.93; max-width:640px; } .section-heading > p { max-width:390px; font:500 21px/1.35 "EB Garamond",Georgia,serif; margin:0; } .distance-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:55px; } .distance-card { min-height:315px; padding:28px; display:flex; flex-direction:column; } .bright-card { background:var(--green-pale); } .dark-card { color:#fff; background:var(--blue); } .muted-card { background:var(--purple-pale); } .card-kicker,.card-meta { text-transform:uppercase; letter-spacing:.1em; font:600 10px Poppins,sans-serif; } .distance-card h3 { font-size:62px; letter-spacing:-.07em; margin:28px 0 8px; } .distance-card > p:not(.card-kicker):not(.card-meta) { max-width:250px; line-height:1.5; } .card-meta { margin-top:auto; }
.host-grid { margin-top:65px; display:grid; gap:80px; } .host-profile { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:clamp(35px,7vw,110px); align-items:start; } .host-profile-reverse .host-photo { order:2; } .host-profile-reverse .host-copy { order:1; } .host-photo { min-height:500px; margin:0; display:grid; place-items:center; position:relative; overflow:hidden; background:var(--green-pale); color:var(--blue); } .host-photo img { position:absolute; inset:0; z-index:2; width:100%; height:100%; object-fit:cover; } .host-photo-sara img { object-position:center; } .host-photo-sarah img { object-position:center 58%; } .host-copy h3 { font-size:clamp(2.75rem,4vw,4.6rem); line-height:.95; letter-spacing:-.06em; margin:16px 0 28px; color:var(--blue); } .host-copy p:not(.card-kicker) { max-width:650px; margin:0 0 17px; font:500 20px/1.34 "EB Garamond",Georgia,serif; } .host-copy blockquote { max-width:610px; margin:34px 0 0; padding:21px 0 0; border-top:2px solid var(--orange); color:var(--orange); font:500 italic 28px/1.12 "EB Garamond",Georgia,serif; }
.schedule-section { background:var(--orange); color:#fff; max-width:none; display:grid; grid-template-columns:1fr 1fr; gap:10vw; padding-left:max(5vw,calc((100vw - 1210px)/2)); padding-right:max(5vw,calc((100vw - 1210px)/2)); } .schedule-section .eyebrow { color:var(--green-pale); } .schedule-section h2 { max-width:450px; } .schedule-lead { max-width:370px; font:500 21px/1.35 "EB Garamond",Georgia,serif; } .schedule-list { list-style:none; padding:0; margin:0; } .schedule-list li { border-top:1px solid rgba(255,255,255,.45); padding:18px 0; display:flex; gap:28px; } .schedule-list time { font:600 16px Poppins,sans-serif; color:var(--green-pale); } .schedule-list strong,.schedule-list span { display:block; } .schedule-list strong { font-size:14px; margin-bottom:5px; } .schedule-list span { font-size:12px; }
.gallery-section { max-width:none; background:#fff; } .gallery-heading { max-width:1210px; margin:auto; display:flex; justify-content:space-between; align-items:end; gap:50px; } .gallery-heading > p { max-width:380px; margin:0; font:500 21px/1.35 "EB Garamond",Georgia,serif; } .gallery-grid { max-width:1210px; margin:50px auto 0; display:grid; grid-template-columns:1.2fr .8fr .8fr; gap:14px; } .gallery-card { position:relative; min-height:410px; margin:0; overflow:hidden; display:flex; align-items:end; padding:24px; color:#fff; background:var(--blue); } .gallery-card:before { content:""; position:absolute; inset:0; opacity:.8; background:radial-gradient(circle at 70% 23%, var(--yellow) 0 8%, transparent 8.4%), linear-gradient(140deg, transparent 35%, rgba(255,255,255,.2) 35.3% 36.5%, transparent 36.8%), linear-gradient(20deg, transparent 45%, rgba(255,255,255,.18) 45.3% 46.2%, transparent 46.5%); } .gallery-card:after { content:""; position:absolute; width:110%; height:48%; left:-5%; bottom:-20%; border-radius:50% 50% 0 0; background:var(--orange); transform:rotate(-7deg); } .gallery-card-two { min-height:310px; background:var(--green-pale); color:var(--ink); } .gallery-card-two:before { background:radial-gradient(circle at 38% 32%, var(--orange) 0 13%, transparent 13.4%), linear-gradient(130deg, transparent 42%, rgba(62,108,181,.25) 42.3% 44%, transparent 44.3%); } .gallery-card-two:after { background:var(--blue); transform:rotate(6deg); } .gallery-card-three { min-height:355px; align-self:end; background:var(--purple-pale); color:var(--ink); } .gallery-card-three:before { background:radial-gradient(circle at 65% 28%, var(--yellow) 0 12%, transparent 12.4%), linear-gradient(150deg, transparent 35%, rgba(255,255,255,.45) 35.4% 37%, transparent 37.4%); } .gallery-card-three:after { background:var(--orange); transform:rotate(-10deg); } .gallery-card figcaption { position:relative; z-index:1; width:100%; display:flex; justify-content:space-between; align-items:center; text-transform:uppercase; letter-spacing:.08em; font-size:11px; font-weight:700; } .gallery-card figcaption span { font:500 12px "EB Garamond",Georgia,serif; letter-spacing:0; text-transform:none; } .gallery-note { max-width:1210px; margin:18px auto 0; color:#727272; font-size:12px; } .volunteer-section { padding-top:100px; padding-bottom:120px; } .volunteer-actions { display:flex; align-items:center; gap:28px; margin-top:42px; }
.register-section { background:var(--ink); color:#fff; text-align:center; padding:120px 5vw; } .register-section .eyebrow { color:var(--yellow); } .register-section h2 { margin:auto; } .register-section > p:not(.eyebrow) { max-width:475px; margin:26px auto 34px; line-height:1.65; } .button-light { background:var(--yellow); color:var(--ink); } .register-section small { display:block; margin-top:24px; font-size:12px; color:#c8d0c2; } .register-section small a { color:#fff; text-decoration:underline; }.site-footer { max-width:1320px; margin:auto; padding:36px 5vw; display:flex; justify-content:space-between; align-items:center; font-size:11px; color:#596058; }.site-footer p { margin:0; }
@media (max-width:720px) { .site-header { padding:17px 6vw; } .menu-toggle { display:block; } .site-nav { display:none; position:absolute; z-index:5; top:70px; left:5vw; right:5vw; padding:22px; background:var(--ink); color:#fff; flex-direction:column; align-items:stretch; gap:18px; } .site-nav.open { display:flex; } .site-nav a { padding-bottom:8px; } .site-nav .nav-register { background:var(--orange); text-align:center; } .hero { display:block; min-height:auto; padding:7vh 6vw 0; } .hero-copy { padding:0 0 45px; } h1 { font-size:3.85rem; } .hero-art { margin:0; min-height:390px; } .sun { width:190px; height:190px; top:55px; } .race-facts { position:static; justify-content:space-between; gap:10px; padding:22px 0; } .race-facts div { gap:5px; }.fact-number { font-size:28px;}.section { padding:80px 6vw;}.section-heading,.schedule-section,.gallery-heading { display:block;}.section-heading > p,.gallery-heading > p { margin-top:25px;}.distance-grid,.gallery-grid { grid-template-columns:1fr; margin-top:35px;}.distance-card { min-height:250px;}.gallery-card,.gallery-card-two,.gallery-card-three { min-height:300px;}.schedule-section { padding:80px 6vw;}.schedule-list { margin-top:40px;}.register-section { padding:85px 6vw;}.volunteer-section { padding-top:80px; padding-bottom:80px;}.volunteer-actions { display:flex; flex-direction:column; align-items:flex-start; gap:20px;}.site-footer { padding:30px 6vw; display:grid; gap:20px;}.site-footer p:nth-child(2) { max-width:230px; } }