/* ─── Alpine.js cloak — hide x-cloak elements until Alpine initialises ───── */ /* Must live in a stylesheet so it fires before deferred Alpine scripts. */ [x-cloak] { display: none !important; } html { background-color: var(--bg-primary); color: var(--text-primary); scroll-behavior: smooth; /* Reserve scrollbar gutter so pages with/without scrollbar never shift layout */ scrollbar-gutter: stable; transition: background-color var(--duration-slow) var(--ease), color var(--duration-slow) var(--ease); } /* Subtle grain for tactile depth — opacity baked into SVG at 3% */ body { background-color: var(--bg-primary); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23grain)' opacity='0.03'/%3E%3C/svg%3E"); background-size: 300px 300px; } a { transition: color var(--duration-fast) var(--ease); } a:hover { color: var(--accent-gold); } :focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 2px; } ::selection { background-color: var(--accent-gold); color: var(--bg-primary); } hr { border: none; border-top: 1px solid var(--border-light); } /* ─── Fixed navbar offset — dashboard pages ─────────────────────────────── */ /* Hero pages (home) override this to 0 via .home class on main. */ .page-main { padding-top: var(--navbar-height); } /* ─── Accessibility utility ──────────────────────────────────────────────── */ /* WCAG sr-only — visible to screen readers, clipped from visual layout */ .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; }