/** * Apex Platform CSS Reset & Typography Baseline * * Based on Josh Comeau's Modern CSS Reset (2025) + Bootstrap Reboot + Tailwind Preflight. * Loaded FIRST in before all other CSS. * * Design tokens (--foreground, --background, --accent, etc.) are set per-site * via ColorPalette in head.vtl's :root block — NOT in this file. */ /* ═══════════════════════════════════════════════ 1. BOX MODEL RESET ═══════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } /* ═══════════════════════════════════════════════ 2. DOCUMENT & BODY ═══════════════════════════════════════════════ */ html { -webkit-text-size-adjust: 100%; tab-size: 4; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } body { min-height: 100vh; font-size: 1rem; /* 16px — WCAG minimum */ line-height: 1.5; /* Universal standard */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeSpeed; color: var(--foreground, #1a1a1a); background-color: var(--background, #fff); } /* ═══════════════════════════════════════════════ 3. TYPOGRAPHY ═══════════════════════════════════════════════ */ /* Fluid heading scale — adapts from mobile to desktop */ h1 { font-size: clamp(2rem, 5vw, 3rem); } /* 32–48px */ h2 { font-size: clamp(1.5rem, 4vw, 2.25rem); } /* 24–36px */ h3 { font-size: clamp(1.25rem, 3vw, 1.75rem); } /* 20–28px */ h4 { font-size: clamp(1.125rem, 2vw, 1.375rem); } /* 18–22px */ h5 { font-size: 1rem; } /* 16px */ h6 { font-size: 0.875rem; } /* 14px */ h1, h2, h3, h4, h5, h6 { line-height: 1.2; font-weight: 700; text-wrap: balance; margin-top: 0; margin-bottom: 0.5rem; } p { margin-bottom: 1rem; text-wrap: pretty; } p:last-child { margin-bottom: 0; } /* ═══════════════════════════════════════════════ 4. LINKS ═══════════════════════════════════════════════ */ a { color: var(--accent, #4169E1); text-decoration-skip-ink: auto; } a:hover { color: var(--accent-hover, inherit); } /* ═══════════════════════════════════════════════ 5. LISTS ═══════════════════════════════════════════════ */ ul, ol { padding-left: 1.5rem; margin-bottom: 1rem; } ul:last-child, ol:last-child { margin-bottom: 0; } nav ul, nav ol { list-style: none; padding-left: 0; margin-bottom: 0; } /* ═══════════════════════════════════════════════ 6. MEDIA ═══════════════════════════════════════════════ */ img, picture, video, canvas, svg { display: block; max-width: 100%; } img, video { height: auto; } /* ═══════════════════════════════════════════════ 7. FORMS ═══════════════════════════════════════════════ */ input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } textarea { resize: vertical; } /* ═══════════════════════════════════════════════ 8. TABLES ═══════════════════════════════════════════════ */ table { border-collapse: collapse; border-spacing: 0; } th { text-align: left; font-weight: 600; } /* ═══════════════════════════════════════════════ 9. MISC ═══════════════════════════════════════════════ */ hr { border: none; border-top: 1px solid var(--secondary, #e5e7eb); margin: 1.5rem 0; } blockquote { padding-left: 1rem; border-left: 3px solid var(--accent, #4169E1); font-style: normal; } code, pre { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 0.875em; } [hidden] { display: none !important; } /* Overflow text wrapping */ p, h1, h2, h3, h4, h5, h6, li, td, th, blockquote { overflow-wrap: break-word; } /* Focus visible for accessibility */ :focus-visible { outline: 2px solid var(--accent, #4169E1); outline-offset: 2px; }