/* Oliekartotek — hand-written, mobile-first. No framework, no preprocessor. Design follows the approved mock-up: warm amber accent on cool grey ground, Barlow Condensed for headings/nav, IBM Plex Sans for body, IBM Plex Mono for part numbers and codes. Fonts are self-hosted (no CDN). */ @font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/barlow-condensed-600.woff2") format("woff2"); } @font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/barlow-condensed-700.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700; /* variable font, one file covers all weights */ font-display: swap; src: url("fonts/ibm-plex-sans.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-mono-400.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-mono-500.woff2") format("woff2"); } :root { color-scheme: light; --ground: #EEF1F3; --surface: #FFFFFF; --surface-2: #F6F8F9; --line: #D6DDE1; --line-soft: #E7ECEF; --ink: #12181C; --ink-2: #4A575F; --ink-3: #78868E; --accent: #B4741A; --accent-soft: #F6EBD9; --accent-ink: #8A5810; --accent-contrast: #FFFFFF; --ok: #256B4C; --ok-soft: #DFF0E7; --warn: #A9391F; --warn-soft: #F8E3DD; --shadow: 0 1px 2px rgba(18, 24, 28, .06), 0 8px 24px rgba(18, 24, 28, .07); --radius: 10px; --touch: 44px; --font-sans: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif; --font-condensed: "Barlow Condensed", "Arial Narrow", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; } /* Dark theme is an explicit opt-in via the topbar toggle (stored in localStorage, applied to before first paint). The OS preference is deliberately ignored: the shop's other systems are light, so this one defaults to light everywhere. */ :root[data-theme="dark"] { color-scheme: dark; --ground: #0F1417; --surface: #171E22; --surface-2: #1D262B; --line: #2C383F; --line-soft: #232D33; --ink: #E7EDF0; --ink-2: #A6B4BC; --ink-3: #7C8B94; --accent: #E0A343; --accent-soft: #332814; --accent-ink: #F0BE6C; --accent-contrast: #171E22; --ok: #6FCFA0; --ok-soft: #16301F; --warn: #EE8A6E; --warn-soft: #351A13; --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35); } * { box-sizing: border-box; } body { margin: 0; font-family: var(--font-sans); font-size: 15px; line-height: 1.5; color: var(--ink); background: var(--ground); -webkit-font-smoothing: antialiased; } h1, h2 { font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; } h1 { font-size: 24px; margin: 0 0 .5rem; } h2 { font-size: 19px; margin: 1.75rem 0 .5rem; } a { color: var(--accent-ink); } code { font-family: var(--font-mono); font-size: 12px; background: var(--surface-2); border: 1px solid var(--line-soft); padding: 1px 6px; border-radius: 5px; color: var(--ink-2); } /* Top bar */ .topbar { position: sticky; top: 0; z-index: 30; background: var(--surface); border-bottom: 1px solid var(--line); } .topbar__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; max-width: 70rem; margin: 0 auto; padding: 10px 16px; } .topbar__brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); min-height: var(--touch); margin-right: 8px; } .topbar__mark { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 8px; background: var(--accent); color: var(--accent-contrast); display: grid; place-items: center; font-family: var(--font-condensed); font-weight: 700; font-size: 19px; letter-spacing: .04em; } .topbar__name { font-family: var(--font-condensed); font-weight: 600; font-size: 23px; letter-spacing: .02em; line-height: 1; text-transform: uppercase; } .topbar__actions { margin-left: auto; display: flex; align-items: center; gap: 4px; } .topbar__gear { display: inline-flex; align-items: center; justify-content: center; width: var(--touch); height: var(--touch); border: 1px solid transparent; border-radius: 8px; color: var(--ink-3); } .topbar__gear:hover { color: var(--ink); background: var(--surface-2); } /* Theme toggle shares the gear's look but is a