/* ========================================================================= Lennett Fitness — Application stylesheet v15 buildout — refined typography (Inter + Audiowide), dual themes: - LIGHT : DFYNE-style editorial black/white with a pink accent - DARK : cinematic radial pink-glow over deep purple-black ========================================================================= */ /* ---------------- Fonts ---------------- */ @font-face { font-family: 'Audiowide'; src: url('/static/fonts/audiowide-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: block; } @font-face { font-family: 'Inter Variable'; src: url('/static/fonts/inter-variable.woff2') format('woff2-variations'), url('/static/fonts/inter-variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } .brand-font { font-family: 'Audiowide', 'Eurostile', 'Bank Gothic', system-ui, sans-serif; letter-spacing: 0.04em; } /* Set Inter as the default body font everywhere except where brand-font wins. */ html, body { font-family: 'Inter Variable', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11', 'ss01'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Editorial display class — apply to module page H1s. Tight tracking, heavy weight, slight optical-size feel. */ .display { font-family: 'Inter Variable', 'Inter', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; } .display-sm { font-family: 'Inter Variable', 'Inter', system-ui, sans-serif; font-weight: 600; letter-spacing: -0.015em; } /* Eyebrow — small uppercase tracked-out label above section titles. */ .eyebrow { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--c-ink-soft); } /* ========================================================================= THEME TOKENS Reading the body via CSS custom properties so all components can lean on a tiny vocabulary regardless of theme. Switching themes is one class change on . ========================================================================= */ /* Light (default) */ :root { --c-bg: #fafafa; --c-surface: #ffffff; --c-surface-2: #f4f4f5; --c-ink: #0a0a0a; --c-ink-soft: #525252; --c-ink-faint: #a3a3a3; --c-divider: #e5e5e5; --c-divider-strong: #d4d4d8; --c-pink: #ec4899; --c-pink-soft: #fce7f3; --c-cta: #0a0a0a; /* DFYNE-style black primary button */ --c-cta-on: #ffffff; --shadow-card: 0 1px 0 0 #e5e5e5, 0 4px 12px -8px rgba(0,0,0,0.08); } /* Dark — cinematic */ html.dark { --c-bg: #0f0f12; --c-surface: #16161c; --c-surface-2: #1c1d22; --c-ink: #f5f5f7; --c-ink-soft: #a3a3ad; --c-ink-faint: #6b6b75; --c-divider: rgba(255,255,255,0.10); --c-divider-strong: rgba(255,255,255,0.18); --c-pink: #ec4899; --c-pink-soft: rgba(236,72,153,0.15); --c-cta: #ec4899; /* Pink primary CTAs in dark mode */ --c-cta-on: #ffffff; --shadow-card: 0 0 0 1px rgba(255,255,255,0.05), 0 8px 30px -10px rgba(0,0,0,0.6); /* Tells Chromium to draw native form widgets (select dropdowns, date pickers, scrollbars, autofill, etc.) in dark mode so they don't flash white over the cinematic background. */ color-scheme: dark; } html:not(.dark) { color-scheme: light; } /* Native