/* Design tokens — "Night Drive" palette (public-site redesign, 2026-10-08). Deliberately NO LONGER a mirror of rydly_app's monochrome colors.ts: the site has its own near-black / cool-grey / lime identity. Typography (Caprasimo + Figtree) is still shared with the app. */ @font-face { font-family: 'Caprasimo'; src: url('/assets/frontend/fonts/Caprasimo-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Figtree'; src: url('/assets/frontend/fonts/Figtree-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Figtree'; src: url('/assets/frontend/fonts/Figtree-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; } @font-face { font-family: 'Figtree'; src: url('/assets/frontend/fonts/Figtree-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; } :root { /* Light theme (default) */ --color-background: #f4f5f7; --color-surface: #ffffff; --color-surface-secondary: #eceef1; --color-text: #0b0e13; --color-text-secondary: #4a5260; /* Long-form body copy (legal pages) — a touch darker than secondary */ --color-text-body: #2a303a; --color-text-muted: #6b7380; --color-divider: #e3e6eb; /* Stronger border for form controls (plain divider is too faint on a ~1px edge) */ --color-divider-strong: #cdd2da; /* Form field fill (white in light, ink in dark) */ --color-field: #ffffff; --color-primary: #0b0e13; --color-primary-hover: #232a35; --color-primary-strong: #000000; --color-primary-light: #eceef1; --color-secondary: #6b7380; --color-success: #16a34a; --color-error: #c2261c; --color-info: #2563eb; --color-warning: #d97706; /* Lime accent + text on top of it */ --color-accent: #c8f31d; --color-accent-hover: #d7fb4f; --color-on-accent: #0b0e13; --color-on-accent-soft: #2a3410; /* Always-dark bands (header, footer, heroes) — identical in both themes */ --color-ink: #0b0e13; --color-ink-raised: #151a22; --color-road: #161c26; --color-road-line: #3a4250; /* Focus outline: ink on light surfaces, lime on dark (ink bands force lime) */ --color-focus: #0b0e13; /* Typography */ --font-heading: 'Caprasimo', serif; --font-body: 'Figtree', sans-serif; --fs-xs: 0.72rem; --fs-sm: 0.85rem; --fs-md: 1rem; --fs-lg: 1.15rem; --fs-xl: 1.4rem; --fs-display: 2rem; --fs-hero: 2.75rem; /* Spacing scale (4px base, same idea as rydly_app's spacing.ts) */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-xxl: 64px; --radius-sm: 12px; --radius-md: 20px; --radius-lg: 28px; --radius-pill: 999px; /* Tells the browser which palette its OWN chrome (native date/select pickers, scrollbars) should render in. */ color-scheme: light; /* Elevation */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.08); /* Motion */ --transition-fast: 0.15s ease; --transition: 0.25s ease; --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-press: cubic-bezier(.23, 1, .32, 1); /* ---------- Bootstrap variable bridge ---------- Bootstrap 5.3 is still loaded (head.html); these retarget its own CSS custom properties at the tokens above instead of keeping two palettes. Per-component variables (`.btn-dark`'s --bs-btn-bg, etc.) stay at their compiled defaults; the events/organizations/coupons pages still use them. */ --bs-body-font-family: var(--font-body); --bs-body-bg: var(--color-background); /* Hand-kept in sync with --color-background (no CSS hex -> rgb-triple) */ --bs-body-bg-rgb: 244, 245, 247; --bs-body-color: var(--color-text); --bs-secondary-color: var(--color-text-secondary); --bs-tertiary-color: var(--color-text-muted); --bs-border-color: var(--color-divider); --bs-border-color-translucent: var(--color-divider); --bs-secondary-bg: var(--color-surface-secondary); --bs-tertiary-bg: var(--color-surface); --bs-border-radius: var(--radius-sm); --bs-border-radius-sm: var(--radius-sm); --bs-border-radius-lg: var(--radius-md); --bs-border-radius-xl: var(--radius-md); --bs-border-radius-xxl: var(--radius-lg); --bs-border-radius-2xl: var(--radius-lg); --bs-link-color: var(--color-text); --bs-link-color-rgb: 11, 14, 19; --bs-link-hover-color: var(--color-text-secondary); --bs-link-hover-color-rgb: 74, 82, 96; --bs-emphasis-color: var(--color-primary-strong); /* Lime focus ring colour; Bootstrap hardcodes .form-control:focus, so site.css re-applies it there */ --bs-focus-ring-color: rgba(200, 243, 29, 0.6); } /* Dark theme — applied via a cookie-driven [data-theme] attribute on set server-side (core/site-prefs.php) so there's no flash on first paint. Accent and the ink bands are unchanged (ink only gets slightly deeper). */ html[data-theme="dark"] { color-scheme: dark; --color-background: #0b0e13; --color-surface: #151a22; --color-surface-secondary: #1c2330; --color-text: #f4f5f7; --color-text-secondary: #b4bac4; --color-text-body: #d5d9e0; --color-text-muted: #8a93a0; --color-divider: #232a35; --color-divider-strong: #3a4250; --color-field: #0b0e13; --color-primary: #f4f5f7; --color-primary-hover: #ffffff; --color-primary-strong: #ffffff; --color-primary-light: #1c2330; --color-secondary: #8a93a0; --color-success: #4ade80; --color-error: #f87171; --color-info: #60a5fa; --color-warning: #fbbf24; --color-ink: #07090c; --color-focus: #c8f31d; /* Same bridge re-pointed: Bootstrap's own [data-bs-theme=dark] block resets these to its stock dark palette, so this must come after it in source order. */ --bs-body-bg: var(--color-background); --bs-body-bg-rgb: 11, 14, 19; --bs-body-color: var(--color-text); --bs-secondary-color: var(--color-text-secondary); --bs-tertiary-color: var(--color-text-muted); --bs-border-color: var(--color-divider); --bs-border-color-translucent: var(--color-divider); --bs-secondary-bg: var(--color-surface-secondary); --bs-tertiary-bg: var(--color-surface); --bs-link-color: var(--color-text); --bs-link-color-rgb: 244, 245, 247; --bs-link-hover-color: var(--color-text-secondary); --bs-link-hover-color-rgb: 180, 186, 196; --bs-emphasis-color: var(--color-primary-strong); }