/* * theme.css — Diwali at the Office. * * Public page: a deep indigo night lit by one warm gold (glass-luxe mixed * with bold-geometric) — this is the DEFAULT (dark) mode, always on for the * festive page. /admin forces the LIGHT mode below: a plain worksheet with * no festival colour, hairline borders, nothing gold. */ :root { color-scheme: dark; --canvas: #141026; --surface: #2c283c; --surface-2: #363152; --border: #3d3856; --border-strong: #554f78; --ink: #f3eee2; --muted: #9a9597; --accent: #e8a33d; --accent-hover: #f0b258; --accent-ink: #241a08; --accent-text: #e8a33d; --accent-soft: color-mix(in srgb, var(--accent) 16%, var(--surface)); --accent-strong: #f0bc71; --accent-border: color-mix(in srgb, var(--accent) 42%, transparent); --success: #3f8f5f; --success-ink: #ffffff; --success-soft: #1c3626; --success-strong: #7fcf9c; --warning: #c9862e; --warning-ink: #241a08; --warning-soft: #3a2a13; --warning-strong: #e6ab5c; --danger: #c0524a; --danger-ink: #ffffff; --danger-soft: #3a201e; --danger-strong: #e08a82; --chart-1: #e8a33d; --chart-2: #7c6bd6; --chart-3: #4f8fb0; --chart-4: #b0704f; --chart-5: #8faa4f; --chart-6: #c15a86; --font-display: "Fraunces", ui-serif, Georgia, serif; --font-body: "Inter", ui-sans-serif, system-ui, sans-serif; --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --display-weight: 600; --display-tracking: -0.01em; --eyebrow-tracking: 0.06em; --radius-btn: 16px; --radius-card: 20px; --radius-input: 14px; --radius-lg: 20px; --radius-xl: 20px; --border-w: 1px; --border-strong-w: 2px; --shadow-card: 0 20px 44px -20px rgba(0, 0, 0, 0.55); --shadow-raised: 0 28px 60px -18px rgba(0, 0, 0, 0.6); --shadow-btn: 0 10px 24px -8px color-mix(in srgb, var(--accent) 55%, transparent); --btn-weight: 600; --caps: none; --measure: 58ch; } /* Admin worksheet — forced on /admin regardless of the visitor's stored preference (see the inline script in that page's ). Plain and light, none of the festival gold/navy. */ html[data-theme="light"] { color-scheme: light; --canvas: #f7f6f3; --surface: #ffffff; --surface-2: #f0eee8; --border: #e3e0d8; --border-strong: #c7c2b6; --ink: #211d1a; --muted: #736c66; --accent: #a86b12; --accent-hover: #8f5a0e; --accent-ink: #000000; --accent-text: #8f5a0e; --accent-soft: #f4e7cf; --accent-strong: #6e4a12; --accent-border: #dcbd80; --success: #1f7a41; --success-ink: #ffffff; --success-soft: #e2f1e7; --success-strong: #17632f; --warning: #b0650f; --warning-ink: #ffffff; --warning-soft: #f4e7d3; --warning-strong: #8f5209; --danger: #b3392f; --danger-ink: #ffffff; --danger-soft: #f6dfdc; --danger-strong: #96271f; --chart-1: #b8791f; --chart-2: #4c6fa5; --chart-3: #7a8f4c; --chart-4: #96504f; --chart-5: #5c8f8a; --chart-6: #8a628f; --shadow-card: 0 1px 2px rgba(20, 16, 10, 0.06); --shadow-raised: 0 14px 30px -14px rgba(20, 16, 10, 0.22); --shadow-btn: none; --border-strong-w: 1px; } /* * app.css — Diwali at the Office. * * The one moment that moves: the hero headline, once, on load/scroll into * view (see app.js). Everything else on the page rests exactly where it * paints. The ground carries a quiet gold glow at the top of the page, * behind the hero photo, in tokens only. */ body { font-family: var(--font-body); background: radial-gradient(ellipse 60% 40% at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%), var(--canvas); } html[data-theme="light"] body { background: var(--canvas); } /* ---- Hero entrance (hero-only motion) -------------------------------- */ @keyframes hero-reveal { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } [data-inview] { opacity: 1; transform: none; } [data-inview].reveal-play { animation: hero-reveal 900ms cubic-bezier(0.16, 1, 0.3, 1) both; } html.reduced-motion [data-inview].reveal-play { animation: none; }