/* ========================================================================== meshbook — base styles -------------------------------------------------------------------------- File: base.css Purpose: Global resets, body background, scrollbars, selection colour, base typography. ZERO component-level styling lives here — that is components.css's job. ZERO theme-specific colour values live here either — those come from theme files via CSS custom properties. The contract: base.css renders on any `data-theme` and looks reasonable. Theme files provide the tokens. Component files compose tokens into real UI. ========================================================================== */ /* -------------------------------------------------------------------------- Minimal reset -------------------------------------------------------------------------- Not a full normalize.css. Just enough to kill the annoyances: margin on body, inconsistent box-sizing, form elements inheriting the wrong font. -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } /* -------------------------------------------------------------------------- Body -------------------------------------------------------------------------- The `nv-body` class is applied to in index.html. Tokens come from whichever theme file matches :root[data-theme="..."]. -------------------------------------------------------------------------- */ .nv-body { font-family: var(--nv-font-sans); background-color: var(--nv-bg); background-image: var(--nv-bg-image); /* themes may supply a gradient */ color: var(--nv-text); min-height: 100vh; overflow: hidden; /* sidebar/main handle their own scroll */ /* Better rendering on Mac + modern Windows. */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "cv02", "cv03", "cv04", "cv11"; /* Slightly tighter default line height for UI; content blocks override. */ line-height: 1.45; } /* Hide Alpine-controlled elements until Alpine has hydrated. Without this flag you get a flash of the login screen before x-if evaluates. */ [x-cloak] { display: none !important; } /* -------------------------------------------------------------------------- Typography primitives -------------------------------------------------------------------------- Most of the time we'll use Tailwind utilities; these are the defaults when there is no utility override. -------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; letter-spacing: -0.01em; } code, kbd, samp, pre { font-family: var(--nv-font-mono); } /* -------------------------------------------------------------------------- Scrollbars (WebKit/Chromium + Firefox) -------------------------------------------------------------------------- Slim scrollbars that respect the current theme. Firefox's support is narrower (scrollbar-color is a single-pair shortcut). -------------------------------------------------------------------------- */ * { scrollbar-width: thin; scrollbar-color: var(--nv-scrollbar-thumb) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background-color: transparent; } *::-webkit-scrollbar-thumb { background-color: var(--nv-scrollbar-thumb); border-radius: 9999px; border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background-color: var(--nv-scrollbar-thumb-hover); } /* -------------------------------------------------------------------------- Selection colour -------------------------------------------------------------------------- */ ::selection { background-color: var(--nv-selection-bg); color: var(--nv-selection-fg); } /* -------------------------------------------------------------------------- Utility: gradient text (for page titles and big hero labels) -------------------------------------------------------------------------- */ .nv-gradient-text { background-image: var(--nv-gradient-accent); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* -------------------------------------------------------------------------- Reduced-motion respect -------------------------------------------------------------------------- Some staff (including neurodivergent users — which includes Chris at times) benefit from less visual movement. We honour the OS setting. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }