/* gamewatch app styles. The design tokens (palette, type, radius, spacing) live in tokens.css, which base.html loads before this file. Fonts are self-hosted (WhiteNoise): CSP font-src 'self'. */ /* Archivo (variable, wght 400-700) and Archivo Black, latin subset; OFL texts in static/fonts/. */ @font-face { font-family: "Archivo"; src: url("../fonts/archivo-latin-wght-normal.84e52810340f.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: "Archivo Black"; src: url("../fonts/archivo-black-latin-400-normal.4b6914a69e6a.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } /* App-owned, not tokens: the motion curve, the shell's measurements and the breakpoints. */ :root { --ease: cubic-bezier(0.2, 0.7, 0.2, 1); /* Two breakpoints (#353): mobile < 768px, tablet 768-1179px, desktop >= 1180px. Author mobile-first with min-width; a max-width query uses 767px or 1179px. @media can't read custom properties, so these document the values and every @media block repeats the literal px. */ --bp-md: 768px; --bp-lg: 1180px; /* The sticky header's height. Browse's sticky sidebar and month headings stack below it through this one token, so the header can change height without re-tuning them. */ --header-h: 56px; --tabbar-h: 56px; /* the mobile tab bar, before the safe-area inset */ } @media (min-width: 768px) { :root { --header-h: var(--nav-h); } } html { color-scheme: dark; font-synthesis: none; } /* never faux-bold Archivo Black */ * { box-sizing: border-box; } /* Accessible focus ring everywhere (a11y) */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, textarea:focus-visible, .cover-link:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; border-radius: 4px; } :focus:not(:focus-visible) { outline: none; } body { margin: 0; font-family: var(--font-ui); line-height: 1.6; color: var(--text); background: var(--bg); } h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; } h1 { margin: 0 0 0.5rem; font-size: 1.7rem; } h2 { margin: 1.75rem 0 0.75rem; font-size: 1.25rem; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-strong); text-decoration: underline; } /* Header / nav */ /* Visually hidden but available to screen readers (live-region announcements, etc.). */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Toast for failed HTMX requests (paired with a polite live-region announcement). */ .htmx-toast { position: fixed; left: 50%; bottom: 1.25rem; transform: translate(-50%, 1rem); background: var(--surface-2); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--r-panel); padding: 0.7rem 1.1rem; font-size: 0.88rem; max-width: 90vw; opacity: 0; pointer-events: none; z-index: 200; transition: opacity 0.2s ease, transform 0.2s ease; } .htmx-toast.show { opacity: 1; transform: translate(-50%, 0); } /* Loading state while a month-nav request is in flight (HTMX toggles .htmx-request). */ .rm-arrow.htmx-request { opacity: 0.5; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .htmx-toast { transition: opacity 0.2s ease; } } @media (max-width: 767px) { .htmx-toast { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--s-5)); } } /* Keyboard skip link: off-screen until focused, then slides in as the first tab stop. */ .skip-link { position: absolute; left: 0.75rem; top: -3.5rem; z-index: 100; background: var(--accent); color: var(--bg); font-weight: 600; padding: 0.5rem 0.9rem; border-radius: var(--r-ctl); text-decoration: none; transition: top 0.15s ease; } .skip-link:focus { top: 0.75rem; outline: 2px solid var(--text); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } } /* ==== App shell (#353, #373) ============================================================ One panel holds the header, the page and the footer. Below 768px it fills the viewport; from 768px it gets its outline and radius, and from 1180px it caps at --content-max, centred on --bg. The header is sticky at every width. The primary nav is ONE