/** * base.css · reset + element defaults for Mould Detect (design.md §9). * * WHY a separate file: tokens.css declares values, base.css sets the *ground* * (box model, element defaults, focus, selection, media behaviour), app.css * does layout and components. Nothing here hard-codes a colour or a size: * every value is either a token, a keyword, or a structural unit (1px * hairlines and 100% sizing). */ /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: var(--text-body); line-height: var(--leading-body); font-weight: 400; color: var(--ink-0); background-color: var(--surface-0); min-height: 100vh; min-height: 100svh; position: relative; /* clip, not hidden: `hidden` would make a scroll container and break the sticky phone in "How it works". */ overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ---------- typography defaults ---------- */ h3, h4 { font-weight: 700; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: var(--leading-tight); letter-spacing: var(--track-display); text-wrap: balance; font-optical-sizing: auto; } h1 { font-size: var(--text-display); } h2 { font-size: var(--text-h2); } h3 { font-size: var(--text-h3); } p { text-wrap: pretty; } em { font-style: italic; } strong, b { font-weight: 700; } small { font-size: var(--text-small); } a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out); } a:hover { text-decoration-color: currentColor; } /* ---------- forms & buttons ---------- */ button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } input::placeholder { color: var(--ink-1); opacity: 1; } /* ---------- media ---------- */ img, svg, video, canvas { display: block; max-width: 100%; } img, video { height: auto; } /* ---------- lists used as structure ---------- */ ul, ol { list-style: none; padding: 0; } /* ---------- focus & selection ---------- */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-1); } ::selection { background-color: var(--accent); color: var(--accent-ink); } /* ---------- motion opt-out (design.md §5, mandatory) ---------- */ @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; } }