/* ----------------------------------------------------------------------------- Stylesheet bundle Keep imports ordered from low-level foundations to higher-level components. Later files may rely on tokens, reset rules, typography roles, and layout primitives defined earlier in the bundle. ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Design tokens — Modern Athletic Grit Professional sports branding with raw, earned authenticity: one dark world, one electric orange signal, condensed italic display type over a clean system sans. Color ratio: 70% dark foundation, 20% white/near-white, 10% accent. Restraint is the point — when the accent is everywhere it is noise; used selectively it is a signal. ----------------------------------------------------------------------------- */ :root { /* One scheme only. NY Dynamo has a single, dark color scheme. There is no light mode and no theme toggle — the dark world is the brand. Do not add prefers-color-scheme variants or light-surface alternatives. */ color-scheme: dark; /* ========================================================================= COLOR — a three-tier token system: reference -> semantic -> component. References flow ONE direction only: component -> semantic -> reference (palette) A component RULE never names a raw --palette-* token or a literal color; it reads a semantic --color-* token (or a component token built from one). Only the blocks below resolve the palette into roles. The Colors section of the style guide documents the full contract. ========================================================================= */ /* --- Tier 1 · Reference palette ---------------------------------------- Raw, theme-agnostic values. The ONLY place literal colors may live. */ /* Brand accent — electric orange. The only high-chroma color in the system. Appears sparingly but decisively: CTAs, eyebrows, rules, active states, and key data. */ --palette-orange: hsl(20 85% 52%); --palette-orange-deep: hsl(20 85% 38%); --palette-orange-glow: hsl(20 85% 65%); /* Soft orange bloom used by the primary button's hover shadow. */ --palette-orange-a30: hsl(20 77% 51% / 0.3); /* Neutral ramp — the dark world, stepping from the deepest well up to hover states, plus the near-black ink used ON orange surfaces. */ --palette-black: #0a0a0a; --palette-well: #060606; --palette-foundation: #0c0c0c; --palette-surface: #141414; --palette-surface-raised: #1a1a1a; --palette-surface-card: #202020; --palette-surface-hover: #2a2a2a; /* Text ramp — a soft off-white, never pure #fff for body copy. Pure white is reserved for display type over photography and the one white strip. */ --palette-white: #ffffff; --palette-text: #f0f0f0; --palette-text-muted: #888888; --palette-text-dim: #555555; /* Translucent white ramp — hairlines and interactive edges read consistently on any of the dark surfaces because they are white at low alpha, not a fixed grey. */ --palette-white-a06: rgba(255, 255, 255, 0.06); --palette-white-a07: rgba(255, 255, 255, 0.07); --palette-white-a14: rgba(255, 255, 255, 0.14); --palette-white-a35: rgba(255, 255, 255, 0.35); --palette-white-a70: rgba(255, 255, 255, 0.7); --palette-white-a90: rgba(255, 255, 255, 0.9); /* Translucent black ramp — dark-on-orange controls, texture stripes, and the photographic scrim gradient stops. */ --palette-black-a04: rgba(0, 0, 0, 0.04); --palette-black-a06: rgba(0, 0, 0, 0.06); --palette-black-a10: rgba(0, 0, 0, 0.1); --palette-black-a30: rgba(0, 0, 0, 0.3); --palette-black-a60: rgba(0, 0, 0, 0.6); --palette-black-a70: rgba(0, 0, 0, 0.7); --palette-black-a80: rgba(0, 0, 0, 0.8); /* Near-black veils — the sticky header's blurred ground and the carousel slide scrim stops. */ --palette-veil: rgba(10, 10, 10, 0.96); --palette-veil-solid: rgba(10, 10, 10, 0.98); --palette-scrim-92: rgba(8, 8, 8, 0.92); --palette-scrim-80: rgba(8, 8, 8, 0.8); --palette-scrim-0: rgba(8, 8, 8, 0); /* Faint orange bloom used by the interior page banner's corner glow. */ --palette-orange-a05: rgba(230, 100, 30, 0.05); /* Status — win/success and loss/error signals, kept off the brand accent so "something is wrong" never shares a color with a call to action. */ --palette-green: #5dbb7a; --palette-red: #e05252; /* Warning-callout family — a deeper crimson than the status red, tinted into a panel treatment for urgent document notices. */ --palette-crimson: #b91c1c; --palette-crimson-bright: #dc2626; --palette-rose: #fca5a5; --palette-rose-bright: #f87171; /* --- Tier 2 · Semantic (system) ---------------------------------------- Role-aware tokens resolved FROM the palette. This is what component rules consume; a rule should never reach past this layer. */ /* The accent trio. Primary carries actions and signals; deep is for hover/pressed shifts on light-on-orange contexts; glow lifts the primary button on hover. */ --color-primary: var(--palette-orange); --color-primary-dark: var(--palette-orange-deep); --color-primary-glow: var(--palette-orange-glow); /* Surfaces — alternate foundation and surface between page sections; use raised and card for cards and list entries layered on top; hover is the interactive brightening step. The well is the deepest ground (hero backdrops, recessed value fields). */ --color-foundation: var(--palette-foundation); --color-surface: var(--palette-surface); --color-surface-raised: var(--palette-surface-raised); --color-surface-card: var(--palette-surface-card); --color-surface-hover: var(--palette-surface-hover); --color-surface-well: var(--palette-well); /* The one white surface on the site: the federation logo strip. */ --color-surface-white: var(--palette-white); /* Text — three steps of emphasis, plus bright display white over photography and near-black ink for text ON orange fills. */ --color-text: var(--palette-text); --color-text-muted: var(--palette-text-muted); --color-text-dim: var(--palette-text-dim); --color-text-bright: var(--palette-white); --color-text-soft: var(--palette-white-a90); --color-text-on-primary: var(--palette-black); /* Borders — translucent white hairlines. Default for card edges and dividers; strong for emphasized edges, table header rules, and control borders; bright/vivid for interactive resting and hover edges. */ --color-border: var(--palette-white-a07); --color-border-strong: var(--palette-white-a14); --color-border-bright: var(--palette-white-a35); --color-border-vivid: var(--palette-white-a70); /* Dark-on-orange edges and fills, for controls that sit on the orange highlight and stat bands. */ --color-border-on-primary: var(--palette-black-a30); --color-border-on-primary-hover: var(--palette-black-a60); --color-fill-on-primary-hover: var(--palette-black-a06); /* White-on-dark fill for outline button hovers. */ --color-fill-hover: var(--palette-white-a06); /* Status pair — wins and form success are green; losses and validation errors are red. Pair color with a text label or mark; color never carries meaning alone. */ --color-success: var(--palette-green); --color-error: var(--palette-red); /* Focus is the orange accent everywhere — one signal for "you are here". */ --color-focus-outline: var(--color-primary); /* Text selection — the accent as ground, ink on top. */ --color-highlight: var(--palette-orange); --color-ink-highlight: var(--palette-black); /* --- Tier 3 · Component ------------------------------------------------- Scoped tokens, resolved here so component rules stay declarative. */ /* Fields — recessed dark fill, hairline border, square corners. */ --field-border-width: 1px; --color-field-border: var(--color-border-strong); --color-field-border-hover: var(--color-border-bright); --color-field-border-error: var(--color-error); --color-field-bg: var(--color-surface-raised); /* Buttons — a 1.5px edge reads as confident without going heavy. */ --btn-border-width: 1.5px; --btn-shadow-hover: 0 8px 24px var(--palette-orange-a30); /* Photographic scrim — keeps white text legible over any photograph while preserving the cinematic atmosphere. Composed here so hero rules stay declarative. */ --hero-overlay-gradient: linear-gradient( 250deg, var(--palette-black-a10) 0%, var(--palette-black-a30) 30%, var(--palette-black-a70) 50%, var(--palette-black-a80) 100% ); --color-hero-ground: var(--palette-well); /* Sticky header veil — near-black at high alpha over a backdrop blur. */ --color-header-veil: var(--palette-veil); --color-header-veil-solid: var(--palette-veil-solid); /* Diagonal stripe texture for the orange bands — subtle grit that keeps a full-orange section from feeling flat. */ --band-stripe-overlay: repeating-linear-gradient( 45deg, transparent, transparent 20px, var(--palette-black-a04) 20px, var(--palette-black-a04) 40px ); /* The interior page banner's faint diagonal orange glow, top-right. */ --banner-glow-overlay: linear-gradient(135deg, transparent 40%, var(--palette-orange-a05) 100%); /* Bottom scrim for carousel slides — text sits on this, never raw over the photo. */ --carousel-scrim-gradient: linear-gradient( to top, var(--palette-scrim-92) 0%, var(--palette-scrim-80) 45%, var(--palette-scrim-0) 100% ); /* Warning callout — a red-tinted panel for deadlines and urgent notices. */ --color-callout-warning-bg: color-mix(in srgb, var(--palette-crimson) 8%, transparent); --color-callout-warning-border: color-mix(in srgb, var(--palette-crimson) 28%, transparent); --color-callout-warning-edge: var(--palette-crimson-bright); --color-callout-warning-text: var(--palette-rose); --color-callout-warning-strong: var(--palette-rose-bright); /* Rules and radii — thin accent rules do the visual work; corners are square. The 3px doc radius is the single sanctioned rounding, used by long-form document cards. */ --rule-width: 1px; --hairline-width: 1px; --accent-rule-height: 3px; --radius-sm: 0; --radius-md: 0; --radius-doc: 3px; /* Spacing & layout. Containers never let content touch the screen edge on small viewports — --ctn-margin owns the mobile gutter. */ --ctn-margin: 4vw; --space-page-gutter: var(--ctn-margin); --space-section-gap: clamp(2rem, 5vw, 3.5rem); --section-inner-max: 1100px; --section-pad-block: 5.5rem; --section-pad-block-narrow: 4rem; --sidebar-width: clamp(12rem, 20vw, 15rem); /* Reading measures. Section bodies stay scannable at 520px; forms cap at 480px; long-form documents at 860px. --measure-prose feeds the .center primitive's default. */ --measure-prose: 72ch; --measure-section-body: 520px; --measure-form: 480px; --measure-doc: 860px; /* Vertical spacing scale — fixed rem steps, consumed by the .flow primitive (and anywhere a gap is needed). */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 4.5rem; /* ------------------------------------------------------------------------- Typography Two voices. Barlow Condensed (self-hosted WOFF2, 600/700/800, normal + italic) carries all display, headline, and UI label text — the oblique angle communicates speed and forward momentum. The system sans stack carries all prose. A mono stack exists for code, tokens, and data values. Never name a font family directly in a component rule. ------------------------------------------------------------------------- */ --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif; --font-body: ui-sans-serif, system-ui, sans-serif; --font-mono: ui-monospace, 'SF Mono', Consolas, monospace; /* ------------------------------------------------------------------------- Type scale Display roles are fluid by design — dramatic size contrast against the 1rem body is the energy of the aesthetic. Each clamp() keeps a rem term in the preferred value so browser zoom still scales the text (WCAG 1.4.4); the vw term only adds viewport response on top. Body and label roles are fixed rem. Role mapping: --text-display-hero hero headline (page-hero) --text-display-banner interior page banner title --text-display-section section headline --text-body default prose (1rem) --text-sm dense rows, hints, meta --text-btn button labels --text-label field labels, nav, small caps labels --text-eyebrow eyebrow overline labels ------------------------------------------------------------------------- */ --text-display-hero: clamp(3rem, calc(1.9rem + 3.7vw), 5rem); --text-display-banner: clamp(2.5rem, calc(1.6rem + 3.4vw), 5rem); --text-display-section: clamp(2rem, calc(1.55rem + 1.6vw), 3.25rem); --text-body: 1rem; --text-sm: 0.8rem; --text-btn: 0.78rem; --text-label: 0.7rem; --text-eyebrow: 0.68rem; /* Leading. Display type runs razor-tight; prose opens up. */ --leading-display: 0.92; --leading-section: 0.95; --leading-body: 1.65; --leading-prose: 1.72; --leading-normal: 1.5; /* Tracking. Small condensed uppercase needs generous letter-spacing for legibility (0.1–0.22em); display headlines tuck in slightly. */ --tracking-display: -0.01em; --tracking-label: 0.16em; --tracking-eyebrow: 0.22em; --tracking-wide: 0.14em; /* Weight ramp — Barlow Condensed ships at 600/700/800 only. */ --weight-semibold: 600; --weight-bold: 700; --weight-black: 800; } /* ----------------------------------------------------------------------------- Reset A small browser-normalization layer influenced by Josh Comeau's custom CSS reset: https://www.joshwcomeau.com/css/custom-css-reset/ The reset intentionally stays low-specificity. It establishes predictable sizing, inheritance, native element defaults, and the dark-world document ground; component classes should be able to override it without selector games. ----------------------------------------------------------------------------- */ html { /* Keep rem math explicit for tokens and component dimensions. */ font-size: 16px; scroll-behavior: smooth; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font-body); font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-text); background: var(--color-foundation); /* The dark ground benefits from lighter antialiasing everywhere — there is no light scheme to preserve subpixel rendering for. */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Media defaults: block-level, responsive, and never wider than the container. */ img, picture, video, canvas, svg { display: block; max-width: 100%; } /* Form controls should inherit the one-font system unless a component opts out. */ input, button, textarea, select { font: inherit; } /* Text-bearing block elements should wrap long tokens instead of overflowing. */ p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; margin: 0; } /* Lists and block elements carry no default block margin; vertical rhythm comes from parent-owned gaps and component rules. Keep this at ELEMENT specificity so component classes can still opt into their own margins when needed. */ ul, ol, dl, pre { margin-block: 0; } /* Prefer nicer prose wrapping where the browser supports it. */ p { text-wrap: pretty; } /* Headings default to the display voice. The full uppercase-italic headline treatment is applied by the heading-role classes (.section-headline, .page-banner__title, ...) so plain document headings stay usable. */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--weight-bold); line-height: 1.1; } button { cursor: pointer; } /* Venues and addresses render as ordinary text, not italic. */ address { font-style: normal; } /* Horizontal rule — a quiet hairline divider on the dark ground. */ hr { height: 0; margin-block: var(--space-lg); border: 0; border-top: var(--hairline-width) solid var(--color-border-strong); } /* Links carry the one accent color with a quiet underline that strengthens on hover. Components that render links as buttons, tabs, or cards override this deliberately. */ a { color: var(--color-primary); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; } a:hover { color: var(--color-primary-glow); } a:focus-visible { outline: 2px solid var(--color-focus-outline); outline-offset: 2px; } ::selection { background: var(--color-highlight); color: var(--color-ink-highlight); } /* ----------------------------------------------------------------------------- Typography — two voices Barlow Condensed (self-hosted WOFF2, weights 600/700/800 in normal and italic) handles all display, headline, and UI label text. The system body stack handles all prose. Hierarchy comes from dramatic size contrast between the two voices, not from decoration. Display type is always uppercase; headlines are always italic — in this system italics are not emphasis, they are the default state of the headline voice. Reference the faces through --font-display and --font-body only; never name a font family directly in a component rule. ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Self-hosted fonts font-display: fallback keeps first paint fast: text renders in the fallback face and only swaps if the WOFF2 arrives quickly. The unicode-range subset matches the Latin subset the files were built with. ----------------------------------------------------------------------------- */ @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: fallback; src: url('/fonts/barlow-condensed-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: fallback; src: url('/fonts/barlow-condensed-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: fallback; src: url('/fonts/barlow-condensed-800.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 600; font-display: fallback; src: url('/fonts/barlow-condensed-600-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 700; font-display: fallback; src: url('/fonts/barlow-condensed-700-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 800; font-display: fallback; src: url('/fonts/barlow-condensed-800-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ----------------------------------------------------------------------------- Eyebrow — shared overline label The condensed, tracked, orange overline that opens the three-part section heading sequence (eyebrow + headline + rule). The ::before dash is the accent bar; flex keeps it vertically centered against the text. Modifiers: .eyebrow inline label before a headline (the default) .eyebrow--hero slightly larger, wider accent bar (page heroes) .eyebrow--banner tighter bottom margin (interior page banners) .eyebrow--block full-width flex, for centered or stacked layouts ----------------------------------------------------------------------------- */ .eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-size: var(--text-eyebrow); font-weight: var(--weight-bold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-primary); margin-bottom: 1rem; } .eyebrow::before { content: ''; display: inline-block; width: 20px; height: 2px; background-color: var(--color-primary); flex-shrink: 0; } .eyebrow--hero { font-size: var(--text-label); gap: 0.75rem; margin-bottom: 1.25rem; } .eyebrow--hero::before { width: 28px; } .eyebrow--banner { margin-bottom: 0.75rem; } /* Uses flex (not block) to preserve ::before vertical alignment. */ .eyebrow--block { display: flex; margin-bottom: 1.5rem; } /* ----------------------------------------------------------------------------- Section headline — the italic display voice The inside a headline renders in the primary orange. Use it to highlight the most important word or phrase — limit to one per headline. Choose the heading level (h1–h4) for document structure; this class carries the visual style. ----------------------------------------------------------------------------- */ .section-headline { font-family: var(--font-display); font-size: var(--text-display-section); font-style: italic; font-weight: var(--weight-black); line-height: var(--leading-section); text-transform: uppercase; color: var(--color-text); margin: 0 0 1.5rem; } .section-headline em { color: var(--color-primary); font-style: italic; } /* The orange rule — a visual pause between the headline and body copy. */ .section-rule { width: 48px; height: var(--accent-rule-height); background-color: var(--color-primary); margin-bottom: 1.75rem; } /* Lead paragraphs in content sections: muted, generous leading, constrained measure so line lengths stay readable. Add --full to span the column. */ .section-body { color: var(--color-text-soft); font-size: var(--text-body); line-height: var(--leading-prose); margin-bottom: 1.75rem; max-width: var(--measure-section-body); } .section-body--full { max-width: none; } /* ----------------------------------------------------------------------------- Code and keyboard tokens Inline code sits on a raised dark ground in the mono face so tokens and file paths read as distinct values inside prose. ----------------------------------------------------------------------------- */ code { font-family: var(--font-mono); font-size: 0.85em; padding: 0.1em 0.35em; border-radius: var(--radius-sm); background: var(--color-surface-raised); color: var(--color-text); } kbd { font-family: var(--font-mono); font-size: 0.85em; padding: 0.1em 0.4em; border: var(--hairline-width) solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface-raised); } /* ----------------------------------------------------------------------------- Layout Two layers live here: 1. The Modern Athletic Grit page-layout system — constrained containers, the generic page-content wrapper, and the alternating content-section blocks that structure every public page. Full-bleed sections with constrained inner columns; content never touches the screen edge on small viewports (--ctn-margin owns the mobile gutter). 2. A small family of composable, single-purpose layout primitives in the Every Layout tradition (.flow, .cluster, .grid-auto, .switcher, .with-sidebar, .center), used by the admin shell and available for shell-level composition. Component families ship their own purpose-built grids (see components.css); reach for those on public pages. ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Containers — constrained widths with mobile edge margins Mobile-first: each container holds --ctn-margin side margins until the viewport is wide enough for its max-width, then hands off to auto centering. The --full variants go edge-to-edge below their handoff width. ----------------------------------------------------------------------------- */ .ctn-full { margin-left: 0; margin-right: 0; } .ctn-xl { max-width: calc(80rem - (var(--ctn-margin) * 2)); margin-left: var(--ctn-margin); margin-right: var(--ctn-margin); } .ctn-xl--full { margin-left: 0; margin-right: 0; } .ctn-lg { max-width: calc(64rem - (var(--ctn-margin) * 2)); margin-left: var(--ctn-margin); margin-right: var(--ctn-margin); } .ctn-lg--full { margin-left: 0; margin-right: 0; } .ctn-md { max-width: calc(52rem - (var(--ctn-margin) * 2)); margin-left: var(--ctn-margin); margin-right: var(--ctn-margin); } .ctn-md--full { margin-left: 0; margin-right: 0; } .ctn-sm { max-width: calc(48rem - (var(--ctn-margin) * 2)); margin-left: var(--ctn-margin); margin-right: var(--ctn-margin); } /* Progressively center each container once the viewport is wide enough that the margin approach hands off to auto. */ @media screen and (min-width: 48rem) { .ctn-sm { margin-left: auto; margin-right: auto; } .ctn-md--full { margin-left: auto; margin-right: auto; } } @media screen and (min-width: 52rem) { .ctn-md { margin-left: auto; margin-right: auto; } .ctn-lg--full { margin-left: auto; margin-right: auto; } } @media screen and (min-width: 64rem) { .ctn-lg { margin-left: auto; margin-right: auto; } .ctn-xl--full { margin-left: auto; margin-right: auto; } } @media screen and (min-width: 80rem) { .ctn-xl { margin-left: auto; margin-right: auto; } } /* ----------------------------------------------------------------------------- Page content — generic constrained page body Modifiers: .page-content--narrow 900px cap for narrower data pages .page-content--padded top/bottom padding when no section wraps it .page-content--doc 860px cap + document spacing for long-form pages ----------------------------------------------------------------------------- */ .page-content { max-width: calc(68.75rem - (var(--ctn-margin) * 2)); margin-left: var(--ctn-margin); margin-right: var(--ctn-margin); } @media screen and (min-width: 68.75rem) { .page-content { margin-left: auto; margin-right: auto; } } .page-content--narrow { max-width: 900px; } .page-content--padded { padding-top: 2.5rem; padding-bottom: 2.5rem; } .page-content--doc { max-width: var(--measure-doc); padding-top: 3rem; padding-bottom: 5rem; } /* ----------------------------------------------------------------------------- Content section — the primary page section wrapper Alternate the default (foundation) and --raised (surface) backgrounds on consecutive sections to create visible page rhythm without hard borders. --card steps up once more for sections that must read as a raised panel. __inner is the constrained centered column inside every section. ----------------------------------------------------------------------------- */ .content-section { padding: var(--section-pad-block) 0; background-color: var(--color-foundation); } .content-section--raised { background-color: var(--color-surface); } .content-section--card { background-color: var(--color-surface-raised); } .content-section__inner { max-width: var(--section-inner-max); margin: 0 auto; padding-left: var(--ctn-margin); padding-right: var(--ctn-margin); } /* Two-column split: media beside body copy. --reversed flips the visual order with direction:rtl so the markup order (media first) never changes — DOM and reading order stay stable for assistive tech. */ .content-section__split { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; } .content-section__split--reversed { direction: rtl; } .content-section__split--reversed > * { direction: ltr; } .content-section__media { position: relative; } .content-section__media img { width: 100%; height: auto; display: block; object-fit: cover; } /* The diagonal cut on the media's bottom edge — the signature forward-motion transition of the aesthetic. */ .content-section__media--angled { clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%); } .content-section__media--stack { display: flex; flex-direction: column; gap: 1.5rem; } .content-section__media--stack img { clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%); } .content-section__split + .content-section__split { margin-top: 5rem; } @media (max-width: 768px) { .content-section { padding: var(--section-pad-block-narrow) 0; } .content-section__split { grid-template-columns: 1fr; gap: 2.5rem; direction: ltr; } .content-section__split--reversed { direction: ltr; } .content-section__split + .content-section__split { margin-top: 3rem; } } /* ----------------------------------------------------------------------------- Flow — vertical rhythm primitive The Stack / "flow" idea (Andy Bell / Every Layout / Piccalilli). Add .flow to any container and its DIRECT children get consistent vertical spacing from the container's row gap. Spacing is a relationship BETWEEN siblings, so it lives on the parent flow, not on per-element classes. Tune a container's rhythm by setting --flow-space on that container. ----------------------------------------------------------------------------- */ .flow { --flow-space: var(--space-sm); display: flex; flex-direction: column; gap: var(--flow-space); } /* ----------------------------------------------------------------------------- Cluster — wrapping inline groups Use .cluster for toolbars, button rows, tag/chip lists, header controls, and any horizontal group where wrapping is acceptable. Custom properties: --cluster-space row and column gap --cluster-align cross-axis alignment (default: center) --cluster-justify main-axis alignment (default: flex-start) ----------------------------------------------------------------------------- */ .cluster { --cluster-space: var(--space-sm); display: flex; flex-wrap: wrap; gap: var(--cluster-space); align-items: var(--cluster-align, center); justify-content: var(--cluster-justify, flex-start); } /* ----------------------------------------------------------------------------- Grid — auto-fit responsive tracks Use .grid-auto for galleries and repeated equal-width items. Tracks fill the available row and never drop below --grid-min; the min() guard stops a single track from overflowing a viewport narrower than that minimum. Custom properties: --grid-min minimum track width before wrapping --grid-space row and column gap ----------------------------------------------------------------------------- */ .grid-auto { --grid-min: 14rem; --grid-space: var(--space-md); display: grid; gap: var(--grid-space); grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min), 100%), 1fr)); } /* ----------------------------------------------------------------------------- Switcher — row-to-column without a breakpoint Use .switcher when a group should sit in a row while there is room, then become one item per row when the container is narrower than --switcher-threshold. Below the threshold the flex-basis calculation goes negative, forcing each child onto its own row. Custom properties: --switcher-threshold minimum container width before switching to rows --switcher-space row and column gap ----------------------------------------------------------------------------- */ .switcher { --switcher-threshold: 30rem; --switcher-space: var(--space-sm); display: flex; flex-wrap: wrap; gap: var(--switcher-space); } .switcher > * { flex-grow: 1; flex-basis: calc((var(--switcher-threshold) - 100%) * 999); } /* ----------------------------------------------------------------------------- Sidebar — fixed-ish rail beside fluid content Use .with-sidebar when the first child should behave as a sidebar and the last child should take the remaining width. The content holds at least --sidebar-content-min of the inline size; when that cannot be satisfied, the pair wraps and both tracks become full-width. Shells opt in by setting their own --sidebar-content-min value. Custom properties: --sidebar-width preferred sidebar track width --sidebar-content-min minimum content track share before wrapping --sidebar-space gap between tracks (default: 0 for divider rules) ----------------------------------------------------------------------------- */ .with-sidebar { --sidebar-space: 0; display: flex; flex-wrap: wrap; gap: var(--sidebar-space); } .with-sidebar > :first-child { flex-basis: var(--sidebar-width); flex-grow: 1; } .with-sidebar > :last-child { flex-basis: 0; flex-grow: 999; min-inline-size: var(--sidebar-content-min, 60%); } /* ----------------------------------------------------------------------------- Center — measured centered column Use .center for readable prose or constrained utility pages. It caps the inline size to --center-max and centers the box horizontally. Custom properties: --center-max maximum inline size (default: prose measure) ----------------------------------------------------------------------------- */ .center { --center-max: var(--measure-prose); max-inline-size: var(--center-max); margin-inline: auto; } /* Form modifier: compose with .center for standalone form pages. */ .center--form { --center-max: var(--measure-form); } /* Site modifier: compose with .center for the default public page shell. */ .center--site { --center-max: 68rem; } /* ----------------------------------------------------------------------------- Utilities ----------------------------------------------------------------------------- */ /* Visually hidden — screen-reader-only text. */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ----------------------------------------------------------------------------- Components — the Modern Athletic Grit BEM library Every component shares the same DNA: a dark surface, a hairline translucent border, square corners, and at most one orange accent edge. Hover states brighten a border or lift the card — never both a shadow and a glow. Emphasis comes from the display voice (condensed italic uppercase) and the one accent, never from decoration. ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Buttons One base class, four variants, one size modifier. Always Barlow Condensed uppercase with high letter-spacing. Works on and