/* ============================================================================ Brute Info — css/base.css Modern reset + element defaults + layout primitives (.container/.section) Load order: tokens.css -> base.css -> components.css -> layout.css -> pages/* ========================================================================== */ /* -------------------------------------------------------------------------- 1. RESET -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { /* --font-scale (0.9 – 1.2) is written to by js/settings.js. Turning it into the root font-size makes every rem in the system scale with it. */ font-size: calc(100% * var(--font-scale, 1)); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--space-6)); -moz-tab-size: 2; tab-size: 2; overflow-x: clip; } body { min-height: 100svh; font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-base); font-weight: var(--fw-regular); color: var(--text); background-color: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-synthesis-weight: none; /* `clip`, never `hidden`: overflow-x:hidden on turns the body into a scroll container and silently breaks position:sticky on the site header. */ overflow-x: clip; transition: background-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard); } img, svg, video, canvas, picture { display: block; max-width: 100%; } img, video { height: auto; } svg { flex-shrink: 0; } input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; } button { background: none; border: none; padding: 0; cursor: pointer; } button:disabled { cursor: not-allowed; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } fieldset { border: 0; padding: 0; min-inline-size: 0; } legend { padding: 0; } table { border-collapse: collapse; border-spacing: 0; } hr { border: 0; border-top: 1px solid var(--border); height: 0; } [hidden] { display: none !important; } /* -------------------------------------------------------------------------- 2. TYPOGRAPHY -------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--text); text-wrap: balance; } h1 { font-size: var(--fs-5xl); font-weight: var(--fw-extrabold); letter-spacing: var(--tracking-tighter); } h2 { font-size: var(--fs-4xl); font-weight: var(--fw-extrabold); letter-spacing: var(--tracking-tighter); } h3 { font-size: var(--fs-3xl); } h4 { font-size: var(--fs-2xl); } h5 { font-size: var(--fs-xl); line-height: var(--lh-snug); } h6 { font-size: var(--fs-lg); line-height: var(--lh-snug); font-weight: var(--fw-semibold); } p { text-wrap: pretty; } small { font-size: var(--fs-md); } strong, b { font-weight: var(--fw-bold); } a { color: var(--primary); text-decoration: none; text-underline-offset: 0.18em; text-decoration-thickness: 1.5px; transition: color var(--dur-fast) var(--ease-standard); } a:hover { color: var(--primary-hover); text-decoration: underline; } /* Prose links inside body copy should always be underlined for a11y */ .prose a, a.link { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); } .prose a:hover, a.link:hover { text-decoration-color: currentColor; } code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; font-feature-settings: "liga" 0; } code:not(pre code) { background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-xs); padding: 0.12em 0.38em; color: var(--primary-soft-text); white-space: nowrap; } pre { background: var(--surface-inset); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); overflow-x: auto; line-height: 1.65; font-size: var(--fs-md); color: var(--text); } pre code { background: none; border: 0; padding: 0; white-space: pre; color: inherit; } blockquote { border-left: 3px solid var(--primary); padding-left: var(--space-5); color: var(--text-muted); font-size: var(--fs-lg); } .prose { color: var(--text-muted); line-height: var(--lh-relaxed); } .prose > * + * { margin-top: var(--space-4); } .prose h2, .prose h3, .prose h4 { color: var(--text); margin-top: var(--space-8); } .prose ul, .prose ol { padding-left: var(--space-6); display: grid; gap: var(--space-2); } /* Text helpers */ .text-muted { color: var(--text-muted); } .text-subtle { color: var(--text-subtle); } .text-brand { color: var(--primary); } .text-success { color: var(--success); } .text-danger { color: var(--danger); } .text-warn { color: var(--warn); } .text-center { text-align: center; } .text-right { text-align: right; } .text-balance { text-wrap: balance; } .text-mono { font-family: var(--font-mono); } .text-xs { font-size: var(--fs-xs); } .text-sm { font-size: var(--fs-md); } .text-lg { font-size: var(--fs-lg); } .fw-medium { font-weight: var(--fw-medium); } .fw-semibold { font-weight: var(--fw-semibold); } .fw-bold { font-weight: var(--fw-bold); } .nowrap { white-space: nowrap; } .eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--primary); } .gradient-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } /* -------------------------------------------------------------------------- 3. FOCUS + SELECTION -------------------------------------------------------------------------- */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; border-radius: var(--radius-xs); } /* Elements that render their own ring shouldn't double up */ .btn:focus-visible, .input:focus-visible, .chip:focus-visible, .nav-link:focus-visible { outline-offset: 3px; } ::selection { background: var(--selection-bg); color: var(--selection-fg); } .skip-link { position: absolute; left: var(--space-4); top: var(--space-3); z-index: calc(var(--z-toast) + 1); transform: translateY(-160%); background: var(--primary); color: var(--primary-contrast); padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); font-weight: var(--fw-semibold); font-size: var(--fs-md); box-shadow: var(--shadow-lg); transition: transform var(--dur-base) var(--ease-out); } .skip-link:focus-visible { transform: translateY(0); text-decoration: none; } /* -------------------------------------------------------------------------- 4. SCROLLBARS -------------------------------------------------------------------------- */ * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: var(--scrollbar-track); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-full); border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); background-clip: content-box; } ::-webkit-scrollbar-corner { background: transparent; } /* -------------------------------------------------------------------------- 5. LAYOUT PRIMITIVES -------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } .container-wide { max-width: var(--container-wide); } .container-narrow { max-width: var(--container-narrow); } .container-flush { padding-inline: 0; } .section { padding-block: var(--section-y); } .section-tight { padding-block: var(--section-y-tight); } .section-top-0 { padding-top: 0; } .section-bottom-0 { padding-bottom: 0; } .section-alt { background: var(--surface-2); } .section-surface { background: var(--surface); } .section-head { display: flex; flex-direction: column; gap: var(--space-3); max-width: 62ch; margin-bottom: var(--space-10); } .section-head.is-center { align-items: center; text-align: center; margin-inline: auto; } .section-head.is-split { max-width: none; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: var(--space-6); } .section-title { font-size: var(--fs-4xl); } .section-sub { color: var(--text-muted); font-size: var(--fs-lg); max-width: 60ch; } @media (max-width: 720px) { .section-head.is-split { flex-direction: column; align-items: flex-start; } } /* Flow utilities */ .stack { display: flex; flex-direction: column; } .stack-1 { gap: var(--space-1); } .stack-2 { gap: var(--space-2); } .stack-3 { gap: var(--space-3); } .stack-4 { gap: var(--space-4); } .stack-5 { gap: var(--space-5); } .stack-6 { gap: var(--space-6); } .stack-8 { gap: var(--space-8); } .stack-10 { gap: var(--space-10); } .row { display: flex; align-items: center; } .row-wrap { flex-wrap: wrap; } .row-1 { gap: var(--space-1); } .row-2 { gap: var(--space-2); } .row-3 { gap: var(--space-3); } .row-4 { gap: var(--space-4); } .row-6 { gap: var(--space-6); } .row-between { justify-content: space-between; } .row-center { justify-content: center; } .row-end { justify-content: flex-end; } .row-top { align-items: flex-start; } .row-baseline { align-items: baseline; } .spacer { flex: 1 1 auto; } .divider { height: 1px; background: var(--border); border: 0; } .divider-v { width: 1px; align-self: stretch; background: var(--border); } /* -------------------------------------------------------------------------- 6. ACCESSIBILITY HELPERS -------------------------------------------------------------------------- */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .sr-only-focusable:not(:focus):not(:focus-within) { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .no-scroll { overflow: hidden !important; } /* Route guard: pages that call guard.js set data-guard="pending" in the head so protected markup never flashes before the redirect decision is made. */ html[data-guard="pending"] body > *:not(#site-header) { visibility: hidden; } html[data-guard="pending"] body::after { content: ""; position: fixed; inset: 0; background: var(--bg); z-index: var(--z-modal); } /* -------------------------------------------------------------------------- 7. DECORATIVE BACKDROPS (shared across pages) -------------------------------------------------------------------------- */ .bg-mesh { position: relative; isolation: isolate; } .bg-mesh::before { content: ""; position: absolute; inset: 0; background-image: var(--grad-mesh); z-index: -1; pointer-events: none; } .bg-grid { position: relative; isolation: isolate; } .bg-grid::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 30%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 30%, transparent 78%); z-index: -1; pointer-events: none; } /* -------------------------------------------------------------------------- 8. REDUCED MOTION -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .skeleton { animation: none !important; } } /* -------------------------------------------------------------------------- 9. HIGH CONTRAST — the two rules that cannot be expressed as a token -------------------------------------------------------------------------- */ :root[data-contrast="high"] :focus-visible { outline-width: 3px; outline-offset: 2px; } /* Every link inside running text becomes unambiguously a link. */ :root[data-contrast="high"] .prose a, :root[data-contrast="high"] p a, :root[data-contrast="high"] li a { text-decoration: underline; } :root[data-contrast="high"] .card, :root[data-contrast="high"] .panel, :root[data-contrast="high"] .input, :root[data-contrast="high"] .btn { border-width: 2px; } /* -------------------------------------------------------------------------- 10. REDUCED MOTION — user setting mirror js/settings.js writes data-motion="reduced" to when the learner turns the setting on, independently of the OS preference. -------------------------------------------------------------------------- */ :root[data-motion="reduced"] *, :root[data-motion="reduced"] *::before, :root[data-motion="reduced"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } :root[data-motion="reduced"] { scroll-behavior: auto; } :root[data-motion="reduced"] .skeleton { animation: none !important; } /* -------------------------------------------------------------------------- 11. PRINT — invoices and certificates are printed from the browser -------------------------------------------------------------------------- */ @media print { .site-header, .site-footer, .toast-stack, .skip-link, .drawer, .drawer-scrim, .no-print, .section-nav, .pagination { display: none !important; } body { background: #fff; color: #000; } .card, .panel, .table-wrap { box-shadow: none !important; border-color: #999 !important; } a[href]::after { content: ""; } .print-only { display: revert !important; } } .print-only { display: none; }