/* ========================================================================== AF1 — All For 1 Endurance Challenge Design system. Loaded AFTER Bootstrap and deliberately NOT inside a cascade layer: Bootstrap ships unlayered, and unlayered rules beat layered ones at any specificity, so an @layer here would always lose. Source order plus the --bs-* overrides below do the theming instead. Colour values are sampled from the organizer's flyer (media/AF1.pdf), not guessed. Each accent clears 6:1 against --af1-ground. ========================================================================== */ /* --- tokens ----------------------------------------------------------- */ :root { --af1-ground: #01100f; /* near-black with a faint teal cast */ --af1-ground-2: #06201d; /* raised panel */ --af1-ground-3: #0b2b27; /* hover / inset */ --af1-bone: #f3f0ef; /* headline white */ --af1-muted: #a9b5b2; /* secondary copy */ --af1-parchment: #eadac1; /* torn-paper callout */ --af1-orange: #e07a01; /* primary accent, CTAs, the date */ --af1-orange-lit: #ff9424; /* hover */ --af1-gravel: #019fa5; --af1-run: #a8a80e; --af1-moto: #dd6b02; --af1-line: #ffffff1f; /* Default discipline accent. Override with .af1-accent-* on any ancestor (a card on the home page, or on a course page) and every nested component re-tints, because they all read var(--accent). */ --accent: var(--af1-orange); --af1-display: "Anton", "Arial Narrow", sans-serif; --af1-cond: "Barlow Condensed", "Arial Narrow", sans-serif; --af1-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif; /* Fluid type. Min is the 360px value, max the >=1400px value. */ --step--1: clamp(0.83rem, 0.79rem + 0.17vw, 0.94rem); --step-0: clamp(1rem, 0.95rem + 0.24vw, 1.13rem); --step-1: clamp(1.2rem, 1.11rem + 0.42vw, 1.5rem); --step-2: clamp(1.44rem, 1.28rem + 0.71vw, 2rem); --step-3: clamp(1.73rem, 1.45rem + 1.2vw, 2.66rem); --step-4: clamp(2.07rem, 1.61rem + 1.98vw, 3.55rem); --step-5: clamp(2.49rem, 1.74rem + 3.2vw, 4.73rem); --step-6: clamp(2.99rem, 1.79rem + 5.1vw, 6.31rem); --af1-gutter: clamp(1rem, 0.6rem + 1.8vw, 2.5rem); --af1-section-y: clamp(3.5rem, 2rem + 6vw, 7rem); /* Retheme Bootstrap itself. Without these, Bootstrap's light-theme defaults (dark text on white) leak into body, headings, links and borders. */ --bs-body-bg: #01100f; --bs-body-color: #f3f0ef; --bs-heading-color: #f3f0ef; --bs-emphasis-color: #ffffff; --bs-secondary-color: #a9b5b2; --bs-border-color: #ffffff1f; --bs-link-color: #e07a01; --bs-link-hover-color: #ff9424; --bs-code-color: #7fd4cf; --bs-font-sans-serif: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif; /* Grunge. feTurbulence as a data URI — no binary asset to ship. */ --af1-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E"); } /* --- base ------------------------------------------------------------- */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* The closed offcanvas panel parks off the right edge and Chrome counts it in documentElement.scrollWidth. `clip` kills the resulting few-pixel horizontal scroll without making the root a scroll container the way `hidden` would. */ html, body { overflow-x: clip; } body { background: var(--af1-ground); color: var(--af1-bone); font-family: var(--af1-body); font-size: var(--step-0); line-height: 1.65; -webkit-font-smoothing: antialiased; } ::selection { background: var(--af1-orange); color: #000; } :is(a, button, .btn, summary, [tabindex]):focus-visible { outline: 3px solid var(--af1-orange-lit); outline-offset: 3px; border-radius: 2px; } /* --- display type ----------------------------------------------------- */ .af1-display { color: var(--af1-bone); font-family: var(--af1-display); font-weight: 400; line-height: 0.92; letter-spacing: 0.01em; text-transform: uppercase; text-wrap: balance; } .af1-display--hero { font-size: var(--step-6); } .af1-display--major { font-size: var(--step-4); } .af1-display--minor { font-size: var(--step-3); } /* The flyer's brush-script subtitle, approximated with condensed italic. */ .af1-script { font-family: var(--af1-cond); font-weight: 600; font-style: italic; text-transform: uppercase; letter-spacing: 0.04em; color: var(--af1-orange); font-size: var(--step-2); line-height: 1.1; } .af1-eyebrow { font-family: var(--af1-cond); font-weight: 700; text-transform: uppercase; letter-spacing: 0.22em; font-size: var(--step--1); color: var(--af1-muted); } .af1-lede { font-size: var(--step-1); color: #dfe6e4; text-wrap: pretty; } .af1-muted { color: var(--af1-muted); } /* Thin rule with a diamond, echoing the flyer's dividers. */ .af1-rule { display: flex; align-items: center; gap: 0.75rem; color: var(--af1-orange); } .af1-rule::before, .af1-rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, currentColor, transparent); } /* --- section shells --------------------------------------------------- */ .af1-section { position: relative; padding-block: var(--af1-section-y); isolation: isolate; } .af1-section::before { /* grunge over every section */ content: ""; position: absolute; inset: 0; z-index: -2; background-image: var(--af1-noise); opacity: 0.05; pointer-events: none; } /* Photo backdrop behind a scrim. --img is set inline per section, and its url() MUST be root-relative ("/img/..."): a relative url() inside a custom property resolves against the stylesheet that consumes it (this file, in /css/), not against the document — so "img/..." 404s as "/css/img/...". */ .af1-section--photo { background-image: var(--img); background-size: cover; background-position: var(--img-pos, center); background-attachment: fixed; } .af1-section--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; /* Feathered top and bottom so sections blend into the flat ground, with the centre tuned by eye: below ~70% alpha the photo overpowers the copy, above ~80% it crushes to solid black. 0xb8 (72%) is the usable middle. */ background: linear-gradient(to bottom, var(--af1-ground) 0%, #01100fe0 10%, #01100fb8 50%, #01100fe0 90%, var(--af1-ground) 100%); } /* iOS Safari renders fixed backgrounds badly and it costs scroll perf. */ @media (max-width: 991.98px) { .af1-section--photo { background-attachment: scroll; } } @media (prefers-reduced-motion: reduce) { .af1-section--photo { background-attachment: scroll; } } .af1-section--panel { background: var(--af1-ground-2); } /* --- buttons ---------------------------------------------------------- */ .btn-af1, .btn-af1-ghost { --_bg: var(--af1-orange); font-family: var(--af1-cond); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: var(--step-0); padding: 0.72em 1.6em; border-radius: 2px; border: 2px solid var(--_bg); transition: background-color .18s, color .18s, border-color .18s, transform .18s; } @media (prefers-reduced-motion: reduce) { .btn-af1, .btn-af1-ghost { transition: none; } } .btn-af1 { background: var(--_bg); color: #0a0a0a; } .btn-af1:hover, .btn-af1:focus-visible { background: var(--af1-orange-lit); border-color: var(--af1-orange-lit); color: #0a0a0a; transform: translateY(-2px); } .btn-af1-ghost { background: transparent; color: var(--af1-bone); border-color: #ffffff59; } .btn-af1-ghost:hover, .btn-af1-ghost:focus-visible { border-color: var(--_bg); color: var(--_bg); transform: translateY(-2px); } /* --- discipline cards -------------------------------------------------- */ /* Set --accent on the card (or any ancestor); everything inside keys off it. Deliberately NOT declared here — that would shadow an inherited accent from on the course pages. */ .af1-discipline { position: relative; display: flex; flex-direction: column; height: 100%; padding: clamp(1.25rem, 1rem + 1vw, 2rem); background: #02171580; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 3px; backdrop-filter: blur(2px); transition: border-color .2s, transform .2s, background-color .2s; } .af1-discipline:hover { border-color: var(--accent); background: #021715cc; transform: translateY(-4px); } @media (prefers-reduced-motion: reduce) { .af1-discipline:hover { transform: none; } } .af1-discipline__name { color: var(--accent); font-size: var(--step-3); } .af1-discipline__tag { font-family: var(--af1-cond); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--af1-bone); font-size: var(--step-0); } .af1-discipline__foot { margin-top: auto; font-family: var(--af1-cond); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--af1-muted); } .af1-discipline .btn-af1 { --_bg: var(--accent); } .af1-discipline .btn-af1-ghost { --_bg: var(--accent); } /* A distance row: figure, unit, elevation. */ .af1-distance { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 0.15rem 0.6rem; padding: 0.7rem 0.9rem; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 2px; background: #00000040; } .af1-distance__figure { font-family: var(--af1-display); font-size: var(--step-2); color: var(--accent); line-height: 1; } .af1-distance__unit { font-family: var(--af1-cond); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--af1-bone); font-size: var(--step--1); } .af1-distance__gain { grid-column: 1 / -1; font-family: var(--af1-cond); text-transform: uppercase; letter-spacing: 0.08em; color: var(--af1-muted); font-size: var(--step--1); } /* --- parchment callout -------------------------------------------------- */ .af1-parchment { background: var(--af1-parchment); color: #1b1610; padding: 1.1rem 1.4rem; font-family: var(--af1-cond); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.25; /* torn-ish edge, straight from the flyer's paper strips */ clip-path: polygon(0 4px, 3% 0, 22% 5px, 47% 0, 71% 5px, 96% 0, 100% 5px, 100% calc(100% - 4px), 78% 100%, 55% calc(100% - 5px), 31% 100%, 8% calc(100% - 5px), 0 100%); } /* --- stat chips ---------------------------------------------------------- */ .af1-stat { text-align: center; } .af1-stat__n { font-family: var(--af1-display); font-size: var(--step-4); color: var(--af1-orange); line-height: 1; } .af1-stat__l { font-family: var(--af1-cond); font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; font-size: var(--step--1); color: var(--af1-muted); } /* --- numbered steps ------------------------------------------------------ */ .af1-step { display: flex; gap: 1rem; align-items: flex-start; } .af1-step__n { flex: 0 0 auto; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 2px solid var(--af1-orange); border-radius: 50%; font-family: var(--af1-display); color: var(--af1-orange); font-size: var(--step-1); line-height: 1; } /* --- nav ------------------------------------------------------------------ */ .af1-nav { background: transparent; border-bottom: 1px solid transparent; transition: background-color .25s, border-color .25s, backdrop-filter .25s; } .af1-nav.is-stuck { background: #01100fee; border-bottom-color: var(--af1-line); backdrop-filter: blur(8px); } .af1-nav .nav-link { font-family: var(--af1-cond); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; font-size: var(--step--1); color: var(--af1-bone); opacity: .85; } .af1-nav .nav-link:hover, .af1-nav .nav-link.active { color: var(--af1-orange); opacity: 1; } @media (min-width: 992px) { .af1-nav .offcanvas { background: transparent !important; border: 0; } } /* --- reveal on scroll ------------------------------------------------------ */ .af1-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; } .af1-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .af1-reveal { opacity: 1; transform: none; transition: none; } } /* --- utilities -------------------------------------------------------------- */ .af1-shell { width: min(100% - (2 * var(--af1-gutter)), 1240px); margin-inline: auto; } .af1-accent-gravel { --accent: var(--af1-gravel); } .af1-accent-run { --accent: var(--af1-run); } .af1-accent-moto { --accent: var(--af1-moto); } .af1-text-accent { color: var(--accent, var(--af1-orange)); }