/* ─────────────────────────────────────────────────────────────────────────── base.css — shared foundation for every page: web fonts, design tokens, reset. Linked first in each page's ; page-specific CSS comes after and can override. Font URLs are relative to this file (the repo root). Two token naming schemes exist across the site (--color-bg vs --bg). The --color-* names are canonical; the short names are kept as aliases so every existing reference keeps working. Edit a value once here. Per-page tokens that genuinely differ (--radius, --shadow-md, --panel-width, --color-success/--color-error) stay in their own page CSS. ─────────────────────────────────────────────────────────────────────────── */ /* ─── Fonts ─────────────────────────────────────────────────────────────── */ @font-face { font-family: "Sora"; src: url("assets/fonts/Sora-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Sora"; src: url("assets/fonts/Sora-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Sora"; src: url("assets/fonts/Sora-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Open Sans"; src: url("assets/fonts/OpenSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Open Sans"; src: url("assets/fonts/OpenSans-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Open Sans"; src: url("assets/fonts/OpenSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Open Sans"; src: url("assets/fonts/OpenSans-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* ─── Design tokens ─────────────────────────────────────────────────────── */ :root { /* Canonical names */ --color-bg: #f4f5f7; --color-panel: #ffffff; --color-border: #e0e2e8; --color-header: #1a1a2e; --color-accent: #4361ee; --color-accent-dk: #3451d1; --color-text: #1a1a2e; --color-muted: #6b7280; --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06); --font-ui: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-head: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace; /* Short-name aliases (used by the hub, Cookie Checker and disclaimer pages) */ --bg: var(--color-bg); --panel: var(--color-panel); --border: var(--color-border); --header: var(--color-header); --accent: var(--color-accent); --text: var(--color-text); --muted: var(--color-muted); --font-body: var(--font-ui); } /* ─── Reset ─────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ─── Header (shared chrome — one consistent style across pages) ───────────── The 4 tool pages inject their markup via header.js; the hub and disclaimer use the same classes/structure inline. Sizes are in rem so they scale with the user's browser font-size setting. header.js layers sticky + shrink on top (scoped to #site-header), overriding these where it needs to. */ header { background: var(--color-header); color: #fff; padding: 1rem 1.75rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.25); z-index: 100; flex-shrink: 0; } header h1 { font-family: var(--font-head); font-size: 1.125rem; font-weight: 700; letter-spacing: -.3px; color: #fff; } header p { font-size: .75rem; color: rgba(255,255,255,.55); margin-top: 2px; } .header-logo { line-height: 0; color: #fff; justify-self: center; } .header-logo svg { height: 1.25rem; width: auto; display: block; } .header-all-apps { justify-self: end; font-family: var(--font-head); font-size: .75rem; font-weight: 600; color: rgba(255,255,255,.7); text-decoration: none; white-space: nowrap; letter-spacing: -.1px; transition: color .15s; } .header-all-apps:hover { color: #fff; } /* ─── Footer (shared chrome) ─────────────────────────────────────────────── */ footer { padding: 1rem 1.75rem; font-size: .75rem; color: var(--color-muted); border-top: 1px solid var(--color-border); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 5px; flex-shrink: 0; } footer a { color: var(--color-muted); text-decoration: none; } footer a:hover { color: var(--color-accent); } .footer-notice { max-width: 40rem; margin: 0 auto; line-height: 1.55; } /* ─── Header/footer responsive ───────────────────────────────────────────── */ @media (max-width: 768px) { header { grid-template-columns: 1fr; padding: .875rem 1.25rem; gap: .375rem; text-align: center; } .header-logo { order: -1; justify-self: center; } .header-inner { order: 0; } .header-all-apps { order: 1; justify-self: center; } header h1 { font-size: 1rem; } }