/* * showcase.css — page chrome for the inert4-ui component showcase. * * This stylesheet styles the SHOWCASE PAGE only (nav, settings panel, * specimen table, section rhythm, typography). It deliberately does NOT * style the inert4-ui components themselves — those are painted by beercss * plus the theme tokens that writes to :root and . * The whole point of the demo is to show the real components reacting to * the live theme, so the page chrome leans on the same MD3 variables * (--surface, --primary, --on-surface, …) wherever it can, and only adds * its own editorial layer (display type, the plate grid, the rail). * * Aesthetic: a type-foundry / design-system specimen book. Warm Material * You palette (terracotta + peach), Fraunces for display headings, Hanken * Grotesk for running text, Spline Sans Mono for the catalog indices and * prop chips. Strong left rail, generous plates, hairline rules. */ :root { /* Typography is beercss-native: the whole page draws its typeface from beercss's --font (which the theme studio's Typeface control drives), so chrome and components always share one font. These aliases keep the role names (display / sans / mono) but all resolve to --font now — no bespoke editorial faces, nothing custom to maintain. */ --ui-display: var(--font); --ui-sans: var(--font); --ui-mono: var(--font); /* Page-chrome rhythm. */ --ui-rail-w: 76px; --ui-maxw: 1240px; --ui-gutter: clamp(16px, 4vw, 56px); --ui-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px -12px rgba(0, 0, 0, 0.18); /* NOTE: the palette-derived tokens (--ui-hairline*, --ui-plate-bg, --ui-shadow-panel) are deliberately NOT declared here. beercss sets --surface / --on-surface / --primary on (via the `light`/`dark` class plus the inline palette ThemeProvider writes), so a token that substitutes var(--surface) must be declared where 's value is in scope. Declaring it on :root (= , the PARENT of ) resolves var(--surface) against beercss's light defaults, and that frozen light value is then inherited unchanged into dark mode — the cause of the near-white plates bug. These tokens live on the `body` rule below. */ } /* ------------------------------------------------------------------ * * Reset / page base * ------------------------------------------------------------------ */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; /* Palette-derived chrome tokens. Declared HERE (on ) — not on :root — so each var(--surface)/var(--on-surface)/var(--primary) substitution sees the mode-correct value beercss writes on . This is what makes the plates, hairlines and panel shadow flip with light/dark instead of freezing at the light defaults. */ --ui-hairline: color-mix( in oklab, var(--on-surface, #1c1b1f) 12%, transparent ); --ui-hairline-strong: color-mix( in oklab, var(--on-surface, #1c1b1f) 22%, transparent ); --ui-plate-bg: color-mix( in oklab, var(--surface, #fff) 92%, var(--primary, #7b3a3a) 4% ); --ui-shadow-panel: 0 0 0 1px var(--ui-hairline), 24px 0 60px -28px rgba(0, 0, 0, 0.45); /* Run the page in the theme's own surface + text colours so the chrome and the components share one palette and dark-mode flips everything. */ background: var(--surface, #fefbf8); color: var(--on-surface, #211a17); font-family: var(--ui-sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /* A faint warm paper grain + corner glow so the page never reads as a flat white slab. Sits behind everything, ignores pointer events. */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient( 120% 80% at 100% 0%, color-mix(in oklab, var(--primary, #7b3a3a) 14%, transparent), transparent 60% ), radial-gradient( 90% 70% at 0% 100%, color-mix(in oklab, var(--secondary, #d9a47e) 12%, transparent), transparent 55% ); opacity: 0.7; transition: background 0.4s ease; } a { color: inherit; } h1, h2, h3 { font-family: var(--ui-display); font-weight: 540; letter-spacing: -0.01em; margin: 0; } /* ------------------------------------------------------------------ * * Top navigation * ------------------------------------------------------------------ */ /* App bar = beercss
+