/* ============================================================ base.css: fonts, colour tokens, typography. Palette "Steel & copper": cool steel greys with a copper accent. Dark follows the system unless the visitor picks a theme (data-theme on ). ============================================================ */ /* ── Fonts (self-hosted, SIL Open Font License; see assets/fonts) ── */ @font-face { font-family: "Bricolage Grotesque"; src: url("../assets/fonts/bricolage-grotesque-var.woff2") format("woff2"); font-weight: 200 800; font-display: swap; } @font-face { font-family: "Atkinson Hyperlegible"; src: url("../assets/fonts/atkinson-hyperlegible-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Atkinson Hyperlegible"; src: url("../assets/fonts/atkinson-hyperlegible-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Atkinson Hyperlegible"; src: url("../assets/fonts/atkinson-hyperlegible-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; } /* ── Colour tokens ─────────────────────────────────────────── */ :root { --bg: #eef0f2; --surface: #fafbfc; --ink: #1b2127; --muted: #56606b; --line: #d2d7dd; /* Copper as a fill (buttons, bars) and a darker copper for text, which needs more contrast on the light ground. */ --accent: #b0582d; --accent-text: #9a4a22; --accent-ink: #ffffff; --steel: #2f5f8a; --sage: #5e7d4f; --soft: #e3e1dd; --slot: rgba(176, 88, 45, 0.08); /* Timeline rows: one hue per track. */ --lane-work: var(--accent); --lane-education: var(--steel); --lane-community: var(--sage); --lane-awards: var(--accent); --display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif; --text: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif; --page: 72rem; --measure: 40rem; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #13171b; --surface: #1b2025; --ink: #e6e9ec; --muted: #99a2ac; --line: #2b3239; --accent: #e8925f; --accent-text: #e8925f; --accent-ink: #13171b; --steel: #86b3dd; --sage: #a6c893; --soft: #262a2e; --slot: rgba(232, 146, 95, 0.08); color-scheme: dark; } } :root[data-theme="dark"] { --bg: #13171b; --surface: #1b2025; --ink: #e6e9ec; --muted: #99a2ac; --line: #2b3239; --accent: #e8925f; --accent-text: #e8925f; --accent-ink: #13171b; --steel: #86b3dd; --sage: #a6c893; --soft: #262a2e; --slot: rgba(232, 146, 95, 0.08); color-scheme: dark; } /* ── Base ──────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 5rem; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--text); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--display); letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; margin: 0; } p { margin: 0; } a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 0.2em; } a:hover { color: var(--accent-text); text-decoration-color: currentColor; } img { display: block; max-width: 100%; height: auto; } button { font: inherit; color: inherit; cursor: pointer; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } [hidden] { display: none !important; } /* Parts that only work with JavaScript stay out of the way without it. */ html:not(.js) .view-switch, html:not(.js) .pub-filter, html:not(.js) .theme-toggle { display: none; } .skip { position: absolute; left: -999px; top: 0.5rem; background: var(--ink); color: var(--bg); padding: 0.5rem 1rem; border-radius: 6px; z-index: 50; } .skip:focus { left: 1rem; }