/* ========================================================================== O'Neill Motorcycle Training — Design System "Whiteboard with vivid highlighter": light canvas, hi-vis yellow accent, indigo detail, road-marking motifs (lane dashes, hazard stripes). Headings: Hanken Grotesk · Body: Noto Sans · Labels: JetBrains Mono ========================================================================== */ /* Self-hosted (latin subset, same files Google Fonts served). The two main families are preloaded in each page's . */ @font-face { font-family: "Hanken Grotesk"; src: url("../fonts/hanken-grotesk-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; } @font-face { font-family: "Noto Sans"; src: url("../fonts/noto-sans-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2"); font-weight: 500; font-display: swap; } /* Arial resized to the web fonts' metrics, so text keeps its size and line breaks while the real font arrives (no layout shift on swap). */ @font-face { font-family: "Hanken Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 400 500; size-adjust: 101.58%; ascent-override: 98.44%; descent-override: 29.83%; line-gap-override: 0%; } @font-face { font-family: "Hanken Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600 700; size-adjust: 95.02%; ascent-override: 105.24%; descent-override: 31.89%; line-gap-override: 0%; } @font-face { font-family: "Noto Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 400 500; size-adjust: 105.48%; ascent-override: 101.35%; descent-override: 27.78%; line-gap-override: 0%; } @font-face { font-family: "Noto Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600 700; size-adjust: 101.95%; ascent-override: 104.85%; descent-override: 28.74%; line-gap-override: 0%; } /* ========================================================================== 1. Tokens ========================================================================== */ :root { /* Brand / accent — reserved for primary actions only */ --color-accent: #ffaa00; /* Superthread Yellow */ --color-accent-hover: #f99c00; --color-accent-tint: #fff7e6; --color-accent-ring: rgba(255, 170, 0, 0.35); /* Pale indigo — tags, dividers, focused edges. Never a CTA. */ --color-indigo: #0c297e; --color-indigo-soft: #c4d3fe; --color-indigo-tint: #eef2ff; /* Neutrals (Untitled-UI ramp) */ --color-ink: #101828; /* Midnight Ink — hero headlines, critical text */ --color-night: #1d2939; /* Stormy Night */ --color-stone: #475467; /* Cool Stone — body text */ --color-cadet: #667085; /* Cadet Gray — secondary text, placeholders */ --color-mist: #e4e7ec; /* Ash Mist — borders, dividers */ --color-cloud: #f2f4f7; /* Cloud Gray — alternating section / inputs */ --color-canvas: #f9fafb; /* Canvas White — page background */ --color-white: #ffffff; /* Pure White — cards, surfaces */ /* Semantic */ --color-success: #027a48; --color-success-bg: #ecfdf3; --color-error: #b42318; --color-error-bg: #fef3f2; /* On dark (ink) surfaces */ --color-on-dark: rgba(255, 255, 255, 0.78); --color-on-dark-soft: rgba(255, 255, 255, 0.62); /* Typography */ --font-display: "Hanken Grotesk", "Hanken Fallback", system-ui, -apple-system, sans-serif; --font-body: "Noto Sans", "Noto Fallback", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* Type scale — Minor Third (1.2) from 16px */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 2rem; /* 32px */ --text-4xl: 2.6rem; /* ~42px */ --text-5xl: 3.5rem; /* 56px */ --text-6xl: 5rem; /* 80px display */ --leading-tight: 1.1; --leading-snug: 1.2; --leading-normal: 1.4; --leading-relaxed: 1.6; /* Spacing — compact density */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 5.5rem; --section-gap: 2.5rem; /* 40px system token, scaled up on desktop */ --element-gap: 0.625rem; /* 10px */ /* Radii */ --radius-sm: 4px; --radius: 10px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 50px; /* Road markings */ --lane-dash: repeating-linear-gradient(90deg, var(--color-accent) 0 22px, transparent 22px 36px); --lane-dash-v: repeating-linear-gradient(180deg, var(--color-ink) 0 12px, transparent 12px 22px); /* Elevation — minimal, one defined card shadow */ --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.10); --shadow-lift: 0 8px 24px -6px rgba(16, 24, 40, 0.12), 0 2px 6px rgba(16, 24, 40, 0.06); /* Layout */ --container: 1200px; --container-narrow: 760px; --header-h: 72px; /* Motion */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* ========================================================================== 2. Reset & base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--color-stone); background: var(--color-canvas); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, picture, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button, input, textarea, select { font: inherit; color: inherit; } ul, ol { list-style: none; padding: 0; } :focus-visible { outline: 2px solid var(--color-indigo); outline-offset: 2px; border-radius: var(--radius-sm); } ::selection { background: var(--color-accent); color: var(--color-ink); } /* Skip link */ .skip-link { position: absolute; left: -999px; top: var(--space-2); z-index: 200; background: var(--color-ink); color: var(--color-white); padding: var(--space-2) var(--space-4); border-radius: var(--radius); } .skip-link:focus { left: var(--space-4); } /* ========================================================================== 3. Typography ========================================================================== */ h1, h2, h3, h4, h5 { font-family: var(--font-display); color: var(--color-ink); line-height: var(--leading-snug); font-weight: 600; letter-spacing: -0.02em; /* tracking only on display, never body */ } h1, .display { font-size: clamp(2rem, 6vw, var(--text-6xl)); line-height: var(--leading-tight); letter-spacing: -0.035em; font-weight: 600; overflow-wrap: break-word; } h2 { font-size: clamp(1.75rem, 4vw, var(--text-4xl)); } h3 { font-size: var(--text-2xl); font-weight: 500; letter-spacing: -0.01em; } h4 { font-size: var(--text-xl); font-weight: 500; letter-spacing: 0; } /* Even line lengths in headings, no lone last word in paragraphs */ h1, h2, h3, h4 { text-wrap: balance; } p, .lead, blockquote { text-wrap: pretty; } p { line-height: var(--leading-relaxed); } .lead { font-size: var(--text-lg); color: var(--color-stone); line-height: var(--leading-relaxed); } .eyebrow { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-indigo); display: inline-flex; align-items: center; gap: var(--space-2); } .eyebrow::before { content: ""; width: 1.75rem; height: 2px; background: repeating-linear-gradient( 90deg, var(--color-accent) 0 6px, transparent 6px 11px ); /* road-marking motif */ } .text-accent { color: var(--color-accent); } .text-ink { color: var(--color-ink); } .text-muted { color: var(--color-cadet); } /* Highlighter stroke for key words: a slanted marker band across the lower half of the letters, drawn in once on load. Each wrapped line gets its own stroke (box-decoration-break). */ .mark { --mark-h: 0.56em; background-image: linear-gradient(100deg, transparent 0.6%, var(--color-accent) 1.8%, var(--color-accent) 97.4%, transparent 99%); background-repeat: no-repeat; background-position: 0 86%; background-size: 100% var(--mark-h); padding: 0 0.14em; margin: 0 -0.04em; border-radius: 0.12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; animation: mark-draw 0.9s 0.25s var(--ease-out) both; } @keyframes mark-draw { from { background-size: 0% var(--mark-h); } to { background-size: 100% var(--mark-h); } } /* ========================================================================== 4. Layout ========================================================================== */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-5); } .container--narrow { max-width: var(--container-narrow); } .section { padding-block: clamp(2.5rem, 7vw, 5.5rem); } .section--tint { background: var(--color-cloud); } .section--ink { background: var(--color-ink); color: var(--color-mist); } .section--ink h2, .section--ink h3 { color: var(--color-white); } .section__head { max-width: 56ch; margin-bottom: var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); } .section__head--center { margin-inline: auto; text-align: center; align-items: center; } .grid { display: grid; gap: var(--space-5); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } .stack { display: flex; flex-direction: column; gap: var(--space-4); } .cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; } /* Road-marking divider */ .rule-road { height: 3px; border: 0; background: repeating-linear-gradient( 90deg, var(--color-ink) 0 22px, transparent 22px 40px ); opacity: 0.12; margin-block: var(--space-7); } /* ========================================================================== 5. Buttons ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0.85rem 1.5rem; border-radius: var(--radius-pill); border: 1.5px solid transparent; font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); letter-spacing: -0.01em; line-height: 1; cursor: pointer; transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background-color 0.18s var(--ease), border-color 0.18s var(--ease); white-space: nowrap; } .btn:active { transform: translateY(1px); } /* Primary — the only place the yellow leads */ .btn--primary { background: var(--color-accent); color: var(--color-ink); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08); } .btn--primary:hover { background: var(--color-accent-hover); transform: translateY(-2px); box-shadow: 0 8px 20px -6px var(--color-accent-ring); } .btn--dark { background: var(--color-ink); color: var(--color-white); } .btn--dark:hover { background: var(--color-night); transform: translateY(-2px); } .btn--ghost { background: transparent; color: var(--color-ink); border-color: var(--color-mist); } .btn--ghost:hover { border-color: var(--color-ink); background: var(--color-white); } .btn--wa { background: #25d366; color: #052e16; } .btn--wa:hover { background: #1ebe5a; transform: translateY(-2px); } .btn--lg { padding: 1.05rem 2rem; font-size: var(--text-lg); } .btn--block { width: 100%; } .btn svg { width: 1.15em; height: 1.15em; } /* Plain text link with arrow */ .link-arrow { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: 500; color: var(--color-ink); transition: gap 0.18s var(--ease), color 0.18s var(--ease); } .link-arrow::after { content: "→"; transition: transform 0.18s var(--ease); } .link-arrow:hover { color: var(--color-accent-hover); } .link-arrow:hover::after { transform: translateX(4px); } /* Some cards also carry an arrow in the markup: hide it so the arrow isn't doubled */ .link-arrow > span[aria-hidden="true"] { display: none; } /* ========================================================================== 6. Tags / chips ========================================================================== */ .tag { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.3rem 0.7rem; border-radius: var(--radius-pill); background: var(--color-indigo-tint); border: 1px solid var(--color-indigo-soft); color: var(--color-indigo); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.03em; } .tag--accent { background: var(--color-accent-tint); border-color: #ffe2a6; color: #8a5a00; } .tag__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* ========================================================================== 7. Header / nav ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(249, 250, 251, 0.85); backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--color-mist); } .site-header__inner { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); } .brand { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-display); font-weight: 600; color: var(--color-ink); letter-spacing: -0.02em; font-size: var(--text-lg); } .brand__mark { width: 52px; height: 60px; display: grid; place-items: center; flex-shrink: 0; } .brand__mark img { width: 100%; height: 100%; object-fit: contain; display: block; } .brand__mark svg { width: 22px; height: 22px; } /* Header and footer both use the full horizontal lockup (wide). */ .site-header .brand__mark { width: auto; height: auto; display: block; } .site-header .brand__mark img { width: auto; height: 50px; } .site-footer .brand__mark { width: auto; height: auto; display: block; } .site-footer .brand__mark img { width: auto; height: 56px; } .nav { display: flex; align-items: center; gap: var(--space-2); } .nav__list { display: flex; align-items: center; gap: var(--space-1); } .nav__link { display: inline-flex; align-items: center; padding: 0.5rem 0.85rem; border-radius: var(--radius); font-family: var(--font-display); font-weight: 500; font-size: var(--text-sm); color: var(--color-stone); transition: color 0.15s var(--ease), background-color 0.15s var(--ease); } .nav__link:hover { color: var(--color-ink); background: var(--color-white); } .nav__link[aria-current="page"] { color: var(--color-ink); position: relative; } /* Current page: a short lane-marking dash under the label */ .nav__link[aria-current="page"]::after { content: ""; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 0.2rem; height: 2px; background: repeating-linear-gradient(90deg, var(--color-accent) 0 7px, transparent 7px 11px); } /* Dropdown (Services) */ .nav__item--has-menu { position: relative; } .nav__menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 230px; background: var(--color-white); border: 1px solid var(--color-mist); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); padding: var(--space-2); display: grid; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s; } .nav__item--has-menu:hover .nav__menu, .nav__item--has-menu:focus-within .nav__menu { opacity: 1; visibility: visible; transform: translateY(0); } .nav__menu a { padding: 0.6rem 0.75rem; border-radius: var(--radius); font-size: var(--text-sm); font-family: var(--font-display); font-weight: 500; color: var(--color-stone); } .nav__menu a:hover { background: var(--color-cloud); color: var(--color-ink); } .nav__phone { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); color: var(--color-ink); padding-inline: var(--space-2); } .nav__phone svg { width: 1rem; height: 1rem; color: var(--color-accent-hover); } .nav__phone { white-space: nowrap; } /* Narrow desktops (just above the mobile menu): the full international number doesn't fit beside the links, so show only the icon. It still dials, and screen readers still read the number. */ @media (min-width: 761px) and (max-width: 900px) { .nav__phone { font-size: 0; gap: 0; padding: 0.5rem; } .nav__phone svg { width: 1.2rem; height: 1.2rem; } } /* Mobile toggle */ .nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--color-mist); background: var(--color-white); border-radius: var(--radius); cursor: pointer; position: relative; } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 50%; width: 18px; height: 2px; background: var(--color-ink); transform: translateX(-50%); transition: transform 0.22s var(--ease), top 0.22s var(--ease), opacity 0.15s; } .nav-toggle span { top: 50%; margin-top: -1px; } .nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; } .nav-toggle[aria-expanded="true"] span { background: transparent; } .nav-toggle[aria-expanded="true"] span::before { top: 0; transform: translateX(-50%) rotate(45deg); } .nav-toggle[aria-expanded="true"] span::after { top: 0; transform: translateX(-50%) rotate(-45deg); } /* ========================================================================== 8. Hero ========================================================================== */ .hero { position: relative; padding-block: clamp(3rem, 8vw, 6rem) clamp(2.5rem, 6vw, 5rem); overflow: hidden; } .hero::before { /* faint hazard stripe in the corner */ content: ""; position: absolute; top: -120px; right: -120px; width: 420px; height: 420px; background: repeating-linear-gradient( -45deg, var(--color-accent-tint) 0 18px, transparent 18px 40px ); opacity: 0.7; transform: rotate(0deg); pointer-events: none; mask-image: radial-gradient(circle at top right, #000 30%, transparent 72%); } .hero__grid { position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-8); align-items: center; } .hero__content { display: flex; flex-direction: column; gap: var(--space-5); } .hero h1 { max-width: 14ch; font-size: clamp(2.4rem, 7vw, var(--text-6xl)); } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); } .hero__accreditation { display: flex; flex-wrap: wrap; gap: var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--color-mist); } /* No overflow:hidden here: the stat chip is meant to hang over the photo's left edge, so the rounding lives on the image itself. */ .hero__media { position: relative; border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); aspect-ratio: 4 / 5; background: var(--color-cloud); } .hero__media img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } /* Hi-vis corner tab, same accent bar as the other photo frames */ .hero__media::after { content: ""; position: absolute; right: 0; top: 0; width: 72px; height: 6px; border-top-right-radius: var(--radius-lg); background: var(--color-accent); } /* Floating stat chip over hero media */ .hero__stat { position: absolute; left: -22px; bottom: 24px; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5) var(--space-3) var(--space-3); background: linear-gradient(145deg, #1b2742 0%, var(--color-ink) 72%); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: var(--radius-lg); box-shadow: 0 22px 48px -16px rgba(16, 24, 40, 0.6), 0 4px 12px rgba(16, 24, 40, 0.18); } .hero__stat-icon { display: grid; place-items: center; width: 48px; height: 48px; flex-shrink: 0; border-radius: 12px; background: var(--color-accent); color: var(--color-ink); box-shadow: 0 6px 16px -4px rgba(255, 170, 0, 0.45); } .hero__stat-icon svg { width: 26px; height: 26px; } .hero__stat-text { display: flex; flex-direction: column; gap: 3px; } .hero__stat-num { font-family: var(--font-display); font-weight: 700; font-size: var(--text-3xl); line-height: 1; color: var(--color-white); letter-spacing: -0.03em; } .hero__stat-label { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.085em; color: rgba(255, 255, 255, 0.6); max-width: 15ch; } /* ========================================================================== 9. Accreditation strip ========================================================================== */ .trust-strip { position: relative; background: var(--color-white); border-top: 1px solid var(--color-mist); } /* Centre-line road marking along the bottom edge */ .trust-strip::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--lane-dash); } .trust-strip__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4) var(--space-8); padding-block: var(--space-5); } .trust-item { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--color-stone); font-size: var(--text-sm); font-weight: 500; } .trust-item svg { width: 1.4rem; height: 1.4rem; color: var(--color-indigo); flex-shrink: 0; } /* ========================================================================== 10. Service / content cards ========================================================================== */ .card { background: var(--color-white); border: 1px solid var(--color-mist); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease); } .card--link { position: relative; overflow: hidden; } /* On hover a lane marking wipes in along the top edge */ .card--link::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--lane-dash); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease-out); } .card--link:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--color-indigo-soft); } .card--link:hover::before, .card--link:focus-visible::before { transform: scaleX(1); } .card__icon { width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--color-accent-tint); color: var(--color-accent-hover); display: grid; place-items: center; margin-bottom: var(--space-1); transition: background-color 0.2s var(--ease), color 0.2s var(--ease); } .card--link:hover .card__icon { background: var(--color-accent); color: var(--color-ink); } .card__icon svg { width: 26px; height: 26px; } .card h3 { color: var(--color-ink); } .card p { color: var(--color-stone); font-size: var(--text-base); } .card__foot { margin-top: auto; padding-top: var(--space-3); } /* Feature list inside cards */ .feat-list { display: flex; flex-direction: column; gap: var(--space-2); } .feat-list li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-base); color: var(--color-stone); } .feat-list li::before { content: ""; width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; border-radius: 50%; background: var(--color-accent-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f99c00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat; } /* Feature cards (a .feat-list of .card): the tick becomes a hi-vis badge beside the heading instead of a small dot above it. */ .feat-list > li.card { position: relative; display: block; padding-left: calc(var(--space-6) + 2.6rem); } .feat-list > li.card::before { position: absolute; left: var(--space-6); top: calc(var(--space-6) + 0.05rem); width: 1.9rem; height: 1.9rem; margin: 0; background: var(--color-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101828' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 15px no-repeat; box-shadow: 0 6px 14px -6px rgba(249, 156, 0, 0.7); } .feat-list > li.card h3 { margin-bottom: var(--space-2); } /* Category chips grid (motorcycle A/A1/A2…) */ .cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); } .cat { border: 1px solid var(--color-mist); border-radius: var(--radius); padding: var(--space-5); background: var(--color-white); display: flex; flex-direction: column; gap: var(--space-2); } .cat__code { font-family: var(--font-display); font-weight: 600; font-size: var(--text-2xl); color: var(--color-ink); letter-spacing: -0.02em; } .cat__code span { color: var(--color-accent-hover); } /* ========================================================================== 11. Steps (licence journey / IBT modules) ========================================================================== */ .steps { position: relative; display: grid; gap: var(--space-4); counter-reset: step; } .steps--row { grid-template-columns: repeat(4, 1fr); } .step { position: relative; background: var(--color-white); border: 1px solid var(--color-mist); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-5) var(--space-5); } .step__media { display: block; height: 110px; margin-bottom: var(--space-4); padding: var(--space-3); background: var(--color-white); border: 1px solid var(--color-mist); border-radius: var(--radius-md); } .step__media img { width: 100%; height: 100%; object-fit: contain; display: block; } .step__num { counter-increment: step; font-family: var(--font-mono); font-weight: 600; font-size: var(--text-sm); color: var(--color-indigo); display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); } .step__num::before { content: counter(step, decimal-leading-zero); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--color-ink); color: var(--color-accent); font-size: var(--text-sm); } .step h4 { color: var(--color-ink); margin-bottom: var(--space-2); } .step p { font-size: var(--text-sm); color: var(--color-stone); } .step__cta { margin-top: var(--space-3); font-size: var(--text-sm); } /* Stacked steps (IBT modules, pre-test): a road down the left with the step number as the marker. The number comes from the markup, so no counter. */ .steps:not(.steps--row) { padding-left: 3.5rem; } .steps:not(.steps--row)::before { content: ""; position: absolute; left: 16px; top: 1.25rem; bottom: 1.25rem; width: 3px; background: var(--lane-dash-v); opacity: 0.22; } .steps:not(.steps--row) .step__num { position: absolute; left: -3.5rem; top: 1.85rem; width: 34px; height: 34px; margin: 0; justify-content: center; border-radius: 50%; background: var(--color-ink); color: var(--color-accent); box-shadow: 0 0 0 6px var(--color-canvas); } .steps:not(.steps--row) .step__num::before { content: none; } .section--tint .steps:not(.steps--row) .step__num { box-shadow: 0 0 0 6px var(--color-cloud); } /* Licence journey (row of four): on wide screens the markers sit on a dashed road above the cards and the road draws in when it scrolls into view. */ @media (min-width: 961px) { .steps--row { padding-top: 3.25rem; } .steps--row::before { content: ""; position: absolute; top: 17px; left: 12.5%; right: 12.5%; height: 3px; margin-top: -1.5px; background: repeating-linear-gradient(90deg, var(--color-ink) 0 14px, transparent 14px 26px); opacity: 0.22; transform-origin: left; } .steps--row .step__num::before { position: absolute; top: calc(-3.25rem - 1px); left: 50%; transform: translateX(-50%); box-shadow: 0 0 0 6px var(--color-canvas); } .section--tint .steps--row .step__num::before { box-shadow: 0 0 0 6px var(--color-cloud); } .steps--row .step__num { margin-bottom: var(--space-2); } } /* ========================================================================== 12. Stats band ========================================================================== */ .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } .stat { text-align: center; } .stat__num { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.5rem, 5vw, var(--text-5xl)); color: var(--color-white); letter-spacing: -0.04em; line-height: 1; } .stat__num .text-accent { color: var(--color-accent); } .stat__label { color: var(--color-cadet); margin-top: var(--space-2); font-size: var(--text-sm); } /* Ink band = asphalt: fine grain, dividers between figures, lane line below */ .section--ink { position: relative; background: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1.3px) 0 0 / 6px 6px, var(--color-ink); } .section--ink::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--lane-dash); } .section--ink .stat__label { color: var(--color-on-dark-soft); } .section--ink .stat + .stat { border-left: 1px solid rgba(255, 255, 255, 0.09); } /* Stats on light sections: dark numbers so they stay legible */ .section--tint .stat__num, .section:not(.section--ink) .stat__num { color: var(--color-ink); } /* Breathing room between the bold number and its inline label */ .section--tint .stat__num + .stat__label { margin-left: 0.5em; } /* On light sections the figures sit in a 2 x 2 grid: align them to the left so the numbers line up instead of drifting with the label length */ .section:not(.section--ink) .stat { text-align: left; } /* ========================================================================== 13. Testimonials ========================================================================== */ .testi-grid { columns: 3; column-gap: var(--space-5); } .testi { position: relative; break-inside: avoid; background: var(--color-white); border: 1px solid var(--color-mist); border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); } /* Quote mark drawn as blocky road-sign glyphs (the font's own quote reads as //) */ .testi::after { content: ""; position: absolute; top: 1.1rem; right: 1.2rem; width: 34px; height: 34px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23ffaa00' d='M3 26V17.5C3 11 6.6 6.6 12.4 5l1.3 2.9c-2.9 1.1-4.5 3.3-4.8 6.1H14v12zm15 0V17.5C18 11 21.6 6.6 27.4 5l1.3 2.9c-2.9 1.1-4.5 3.3-4.8 6.1H29v12z'/%3E%3C/svg%3E") center / contain no-repeat; opacity: 0.4; pointer-events: none; } .testi__stars { display: inline-flex; gap: 2px; color: var(--color-accent); letter-spacing: 0.12em; } .testi__stars svg { width: 1rem; height: 1rem; } .testi__quote { color: var(--color-night); font-size: var(--text-base); line-height: var(--leading-relaxed); } .testi__who { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-1); } .testi__avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--color-indigo-tint); color: var(--color-indigo); display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); } .testi__name { font-family: var(--font-display); font-weight: 600; color: var(--color-ink); font-size: var(--text-sm); } .testi__meta { font-size: var(--text-xs); color: var(--color-cadet); } /* ========================================================================== 13b. Gallery ========================================================================== */ .gallery { list-style: none; margin: var(--space-7) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); } .gallery__item { margin: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-mist); box-shadow: var(--shadow-card); } .gallery__item img { display: block; width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform 0.4s var(--ease); } .gallery__item:hover img { transform: scale(1.05); } .gallery__more { display: flex; justify-content: center; margin-top: var(--space-6); } .gallery__more .btn { display: inline-flex; align-items: center; gap: var(--space-2); } /* ========================================================================== 14. Lead form ========================================================================== */ .lead-form { background: var(--color-white); border: 1px solid var(--color-mist); border-radius: var(--radius-lg); padding: var(--space-7); box-shadow: var(--shadow-card); } .field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); } .field label { font-family: var(--font-display); font-weight: 500; font-size: var(--text-sm); color: var(--color-ink); } .field label .req { color: var(--color-error); } .field input, .field textarea, .field select { width: 100%; padding: 0.8rem 0.95rem; border: 1.5px solid var(--color-mist); border-radius: var(--radius); background: var(--color-canvas); color: var(--color-ink); transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease), background-color 0.15s; } .field input::placeholder, .field textarea::placeholder { color: var(--color-cadet); } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--color-accent); background: var(--color-white); box-shadow: 0 0 0 4px var(--color-accent-ring); } .field select { cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.95rem center; padding-right: 2.6rem; } .field--error input, .field--error textarea { border-color: var(--color-error); } .field__error { font-size: var(--text-sm); color: var(--color-error); display: none; } .field--error .field__error { display: block; } .form-note { font-size: var(--text-sm); color: var(--color-cadet); margin-top: var(--space-3); } .form-status { border-radius: var(--radius); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); margin-bottom: var(--space-4); display: none; } .form-status--ok { display: block; background: var(--color-success-bg); color: var(--color-success); } .form-status--err { display: block; background: var(--color-error-bg); color: var(--color-error); } /* Split contact layout */ .contact-split { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--space-8); align-items: start; } .contact-info { display: flex; flex-direction: column; gap: var(--space-5); } .contact-row { display: flex; gap: var(--space-4); align-items: flex-start; } .contact-row__icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--radius); background: var(--color-cloud); color: var(--color-indigo); display: grid; place-items: center; } .contact-row__icon svg { width: 1.3rem; height: 1.3rem; } .contact-row dt { font-family: var(--font-display); font-weight: 600; color: var(--color-ink); font-size: var(--text-sm); } .contact-row dd { color: var(--color-stone); } /* The form column is much taller: keep the pitch in view beside it */ @media (min-width: 961px) { .contact-split .contact-info { position: sticky; top: calc(var(--header-h) + var(--space-6)); } } /* Numbered cards (reasons to choose us): mono index with a lane dash */ .grid--numbered { counter-reset: reason; } .grid--numbered > .card::before { counter-increment: reason; content: counter(reason, decimal-leading-zero); align-self: flex-start; padding-left: 38px; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.08em; line-height: 1.4; color: var(--color-indigo); background: repeating-linear-gradient(90deg, var(--color-accent) 0 6px, transparent 6px 11px) left center / 28px 2px no-repeat; } /* ========================================================================== 15. CTA band ========================================================================== */ .cta-band { background: var(--color-ink); border-radius: var(--radius-lg); padding: clamp(2rem, 5vw, 3.5rem); position: relative; overflow: hidden; } .cta-band::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient( -45deg, rgba(255,170,0,0.06) 0 16px, transparent 16px 38px ); pointer-events: none; } .cta-band__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; } .cta-band h2 { color: var(--color-white); max-width: 18ch; } .cta-band p { color: var(--color-on-dark-soft); max-width: 46ch; margin-top: var(--space-2); } .cta-band__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; } /* ========================================================================== 15b. Facts strip + FAQ. The answers are visible text and are repeated as FAQPage JSON-LD in the page head: change both together. ========================================================================== */ .facts { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 var(--space-6); background: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1.3px) 0 0 / 6px 6px, var(--color-ink); border-radius: var(--radius-lg); overflow: hidden; } .facts::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--lane-dash); } .facts > div { padding: var(--space-5) var(--space-5) var(--space-6); border-left: 1px solid rgba(255, 255, 255, 0.09); } .facts > div:first-child { border-left: 0; } .facts dt { margin-bottom: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-on-dark-soft); } .facts dd { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); line-height: 1.3; color: var(--color-white); } .facts dd.facts__price, .facts dd.facts__big { font-size: clamp(2rem, 4vw, var(--text-4xl)); line-height: 1; letter-spacing: -0.03em; color: var(--color-accent); } .faq { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } .faq__item { background: var(--color-white); border: 1px solid var(--color-mist); border-radius: var(--radius-lg); padding: var(--space-6); } .faq__item:last-child:nth-child(odd) { grid-column: 1 / -1; } .faq__item h3 { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-3); font-size: var(--text-xl); font-weight: 600; } .faq__item h3::before { content: "Q"; flex-shrink: 0; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; margin-top: 0.05rem; border-radius: 6px; background: var(--color-accent); color: var(--color-ink); font: 600 0.8rem/1 var(--font-mono); } .faq__item p { color: var(--color-stone); padding-left: calc(1.75rem + var(--space-3)); } .faq__item a { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; } /* Long-form text: readable line length and links that look like links (the base reset strips underlines from every ) */ .prose p { max-width: 68ch; } .prose a:not(.btn), .source-note a { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; } .source-note { margin-top: var(--space-5); font-size: var(--text-sm); color: var(--color-cadet); } .facts + .prose { margin-top: var(--space-2); } @media (max-width: 760px) { .facts { grid-template-columns: 1fr 1fr; } .facts > div:nth-child(3) { border-left: 0; } .facts > div:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, 0.09); } .faq { grid-template-columns: 1fr; } .faq__item p { padding-left: 0; } } /* ========================================================================== 16. Footer ========================================================================== */ .site-footer { position: relative; background: var(--color-ink); color: var(--color-on-dark-soft); padding-block: var(--space-9) var(--space-6); } .site-footer a { color: var(--color-mist); transition: color 0.15s var(--ease); } .site-footer a:hover { color: var(--color-accent); } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-7); padding-bottom: var(--space-8); border-bottom: 1px solid rgba(255,255,255,0.08); } .footer-brand { display: flex; flex-direction: column; gap: var(--space-4); max-width: 32ch; } .footer-brand .brand { color: var(--color-white); } .footer-col h5 { color: var(--color-white); font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-3); letter-spacing: 0; } .footer-col ul { display: flex; flex-direction: column; gap: var(--space-2); } .footer-col a { font-size: var(--text-sm); } .footer-social { display: flex; gap: var(--space-2); } .footer-social a { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius); display: grid; place-items: center; } .footer-social a:hover { border-color: var(--color-accent); } .footer-social svg { width: 1.1rem; height: 1.1rem; } .footer-areas { padding-block: var(--space-6); border-bottom: 1px solid rgba(255,255,255,0.08); } .footer-areas h5 { color: var(--color-white); font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-3); } .footer-areas ul { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); } .footer-areas a { font-size: var(--text-sm); } .footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); padding-top: var(--space-5); font-size: var(--text-xs); } /* ========================================================================== 17. WhatsApp FAB ========================================================================== */ .wa-fab { position: fixed; right: clamp(1rem, 3vw, 1.75rem); bottom: clamp(1rem, 3vw, 1.75rem); z-index: 90; width: 58px; height: 58px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 10px 24px -6px rgba(37, 211, 102, 0.5); transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); } .wa-fab:hover { transform: scale(1.06) translateY(-2px); } .wa-fab svg { width: 30px; height: 30px; } .wa-fab::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366; animation: wa-pulse 2.4s var(--ease) infinite; } @keyframes wa-pulse { 0% { transform: scale(1); opacity: 0.7; } 70%, 100% { transform: scale(1.5); opacity: 0; } } /* ========================================================================== 18. Breadcrumb (location/service pages) ========================================================================== */ .crumb { display: flex; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-cadet); padding-block: var(--space-5) 0; } .crumb a:hover { color: var(--color-ink); } .crumb span { color: var(--color-mist); } /* Page hero (interior pages) */ .page-hero { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 2.5rem); } .page-hero h1 { max-width: 18ch; margin-bottom: var(--space-4); } .page-hero .lead { max-width: 60ch; } .page-hero .hero__actions { margin-top: var(--space-5); } .page-hero .cluster { margin-top: var(--space-5); } /* ========================================================================== 19. Motion — staggered reveal on load + scroll ========================================================================== */ /* Start states only apply when scripts run (main.js reveals them). Without JavaScript, or if it fails to load, everything is simply visible. */ @media (scripting: enabled) { .reveal { opacity: 0; transform: translateY(16px); } [data-stagger] > * { opacity: 0; transform: translateY(14px); } } @media (scripting: enabled) and (min-width: 961px) { .steps--row[data-stagger]::before { transform: scaleX(0); } } .reveal { transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); } .reveal.is-in { opacity: 1; transform: none; } .steps--row[data-stagger]::before { transition: transform 1.2s var(--ease-out) 0.15s; } .steps--row[data-stagger].is-in::before { transform: none; } [data-stagger].is-in > * { opacity: 1; transform: none; transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out); } [data-stagger].is-in > *:nth-child(1) { transition-delay: 0.00s; } [data-stagger].is-in > *:nth-child(2) { transition-delay: 0.07s; } [data-stagger].is-in > *:nth-child(3) { transition-delay: 0.14s; } [data-stagger].is-in > *:nth-child(4) { transition-delay: 0.21s; } [data-stagger].is-in > *:nth-child(5) { transition-delay: 0.28s; } [data-stagger].is-in > *:nth-child(6) { transition-delay: 0.35s; } /* ========================================================================== 20. Responsive ========================================================================== */ @media (max-width: 960px) { .hero__grid { grid-template-columns: 1fr; gap: var(--space-7); } .hero__media { aspect-ratio: 4 / 5; max-width: 360px; margin-inline: auto; } .hero__stat { left: 16px; } .grid--4 { grid-template-columns: repeat(2, 1fr); } .steps--row { grid-template-columns: repeat(2, 1fr); } .gallery { grid-template-columns: repeat(3, 1fr); } .testi-grid { columns: 2; } .contact-split { grid-template-columns: 1fr; gap: var(--space-6); } .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); } } @media (max-width: 760px) { /* Mobile nav */ .nav { position: fixed; inset: var(--header-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: var(--space-2); background: var(--color-white); border-bottom: 1px solid var(--color-mist); padding: var(--space-4); box-shadow: var(--shadow-lift); transform: translateY(calc(-100% - var(--header-h) - 8px)); transition: transform 0.28s var(--ease); max-height: calc(100dvh - var(--header-h)); overflow-y: auto; } .nav.is-open { transform: translateY(0); } .nav__list { flex-direction: column; align-items: stretch; gap: 2px; } .nav__link { padding: 0.75rem; font-size: var(--text-base); } .nav__link[aria-current="page"]::after { left: 0.75rem; right: auto; width: 2.4rem; bottom: 0.35rem; } .nav__menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 0 var(--space-4); min-width: 0; } .nav__phone { padding: 0.5rem 0.75rem; } .nav-toggle { display: block; } .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } .cat-grid { grid-template-columns: 1fr; } .steps--row { grid-template-columns: 1fr; } .stats { grid-template-columns: 1fr; gap: var(--space-5); } .section--ink .stat + .stat { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.09); padding-top: var(--space-5); } .gallery { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); } .testi-grid { columns: 1; } .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); } .cta-band__inner { flex-direction: column; align-items: stretch; } .cta-band__actions .btn { flex: 1 1 100%; } .lead-form { padding: var(--space-5); } /* Hero: full-width buttons, stat chip inside the photo, and no badge row (the trust strip right below says the same thing) */ .hero__actions .btn { flex: 1 1 100%; } .hero__accreditation { display: none; } .hero__stat { left: 12px; bottom: 12px; padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2); } .hero__stat-icon { width: 40px; height: 40px; border-radius: 10px; } .hero__stat-num { font-size: var(--text-2xl); } /* Trust strip as a 2 x 2 grid instead of four stacked lines */ .trust-strip__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); justify-content: stretch; } .trust-item { align-items: flex-start; line-height: 1.35; } } /* Phones: the licence journey becomes a road down the left, like the modules */ @media (max-width: 560px) { .steps--row { padding-left: 3.5rem; } .steps--row::before { content: ""; position: absolute; left: 16px; top: 1.25rem; bottom: 1.25rem; width: 3px; background: var(--lane-dash-v); opacity: 0.22; } .steps--row .step__num::before { position: absolute; left: -3.5rem; top: 1.25rem; box-shadow: 0 0 0 6px var(--color-canvas); } .section--tint .steps--row .step__num::before { box-shadow: 0 0 0 6px var(--color-cloud); } .step__media { height: 84px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .reveal, [data-stagger] > * { opacity: 1; transform: none; } .mark { animation: none; } .steps--row[data-stagger]::before { transform: none; } } /* ===== Photo frames ===== */ .media-frame { position: relative; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--color-mist); box-shadow: var(--shadow-lift); background: var(--color-cloud); } .media-frame img { display: block; width: 100%; height: 100%; object-fit: cover; } .media-frame--wide { aspect-ratio: 16 / 9; } .media-frame--tall { aspect-ratio: 4 / 5; } .media-frame--square { aspect-ratio: 1 / 1; } /* Brand accent bar in the corner */ .media-frame::after { content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 6px; background: var(--color-accent); } /* Two-up photo + copy band */ .media-band .grid--2 { align-items: center; gap: var(--space-8); } .media-band__caption { margin-top: var(--space-3); color: var(--color-cadet); font-size: var(--text-sm); } /* Full-bleed showcase photo */ .showcase__frame { aspect-ratio: 21 / 9; } @media (max-width: 640px) { .showcase__frame { aspect-ratio: 4 / 3; } } /* Show the image at its natural ratio, uncropped */ .showcase__frame--natural { aspect-ratio: auto; } .showcase__frame--natural img { height: auto; }