/* ==========================================================================
FILMDIGIT — stylesheet
Design language: "scanning bench". Near-black ink, brand ember gradient,
hairline rules, sprocket motifs, monospaced numerals for anything measured.
Light + dark themes are driven entirely by the token block below.
========================================================================== */
/* --------------------------------------------------------------- reset -- */
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + 1.25rem);
}
body {
font-family: var(--font-sans);
font-size: 1rem;
line-height: 1.6;
color: var(--text);
background: var(--bg);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img,
svg,
video,
canvas {
display: block;
max-width: 100%;
}
/* The width/height attributes on ![]()
are presentational hints that map to
CSS width/height. They are kept in the markup so the browser can reserve the
right box before the image loads, but the height must stay derived from the
aspect ratio — otherwise constraining only the width squashes the image. */
img {
height: auto;
}
input,
button,
textarea,
select {
font: inherit;
color: inherit;
}
button {
background: none;
border: 0;
cursor: pointer;
}
a {
color: inherit;
text-decoration: none;
}
/* Several elements are toggled from JS with the `hidden` property. The UA rule
for it is only `display: none`, which any component rule setting a display
would silently beat — so enforce it here. */
[hidden] {
display: none !important;
}
p,
h1,
h2,
h3,
h4 {
overflow-wrap: break-word;
}
ul {
list-style: none;
}
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 2px;
}
::selection {
background: var(--accent);
color: var(--on-accent);
}
/* --------------------------------------------------------------- tokens -- */
:root {
/* Brand ramp, sampled from the logo artwork */
--gold: #ffc000;
--amber: #ffa00a;
--orange: #ff7a00;
--ember: #ff4400;
--ember-grad: linear-gradient(120deg, var(--gold) 0%, var(--orange) 52%, var(--ember) 100%);
--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;
--header-h: 68px;
--container: 1180px;
--gutter: clamp(1.15rem, 4vw, 2.5rem);
--r-xs: 2px;
--r-sm: 4px;
--r-md: 8px;
--r-lg: 14px;
--ease: cubic-bezier(0.22, 0.7, 0.3, 1);
--t-fast: 0.14s var(--ease);
--t-base: 0.24s var(--ease);
}
/* Light — warm paper, ink text, deepened ember so it passes on white */
:root,
[data-theme="light"] {
color-scheme: light;
--bg: #faf8f5;
--bg-2: #f2eee8;
--surface: #ffffff;
--surface-2: #f7f4f0;
--surface-3: #ece7e0;
--line: #e2dbd1;
--line-2: #cfc6b9;
--text: #16161a;
--text-2: #56545c;
--text-3: #8b8891;
--accent: #d84f00;
--accent-hi: #b84000;
--accent-soft: rgba(216, 79, 0, 0.08);
--accent-line: rgba(216, 79, 0, 0.28);
--on-accent: #1a1206;
--brand-ink-a: #52525f;
--brand-ink-b: #050509;
--hero-film: rgba(22, 22, 16, 0.075);
--console-bg: #17171c;
--console-line: #2c2c36;
--console-text: #f2f0ee;
--console-text-2: #9c99a4;
--shadow-sm: 0 1px 2px rgba(30, 22, 14, 0.06);
--shadow-md: 0 6px 22px -10px rgba(30, 22, 14, 0.28);
--shadow-lg: 0 24px 60px -28px rgba(30, 22, 14, 0.4);
--glow: 0 0 0 rgba(0, 0, 0, 0);
}
/* Dark — the projection-booth default */
[data-theme="dark"] {
color-scheme: dark;
--bg: #0b0b0e;
--bg-2: #101015;
--surface: #15151b;
--surface-2: #1b1b23;
--surface-3: #23232d;
--line: #26262f;
--line-2: #35353f;
--text: #ededf2;
--text-2: #a3a1ad;
--text-3: #706e7b;
--accent: #ff9412;
--accent-hi: #ffb040;
--accent-soft: rgba(255, 148, 18, 0.12);
--accent-line: rgba(255, 148, 18, 0.32);
--on-accent: #180d02;
--brand-ink-a: #ffffff;
--brand-ink-b: #868da3;
--hero-film: rgba(255, 255, 255, 0.10);
--console-bg: #101016;
--console-line: #2a2a34;
--console-text: #ededf2;
--console-text-2: #8f8d99;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
--shadow-md: 0 8px 26px -12px rgba(0, 0, 0, 0.8);
--shadow-lg: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
--glow: 0 0 44px -12px rgba(255, 122, 0, 0.35);
}
@media (prefers-color-scheme: dark) {
[data-theme="auto"] {
color-scheme: dark;
--bg: #0b0b0e;
--bg-2: #101015;
--surface: #15151b;
--surface-2: #1b1b23;
--surface-3: #23232d;
--line: #26262f;
--line-2: #35353f;
--text: #ededf2;
--text-2: #a3a1ad;
--text-3: #706e7b;
--accent: #ff9412;
--accent-hi: #ffb040;
--accent-soft: rgba(255, 148, 18, 0.12);
--accent-line: rgba(255, 148, 18, 0.32);
--on-accent: #180d02;
--brand-ink-a: #ffffff;
--brand-ink-b: #868da3;
--hero-film: rgba(255, 255, 255, 0.10);
--console-bg: #101016;
--console-line: #2a2a34;
--console-text: #ededf2;
--console-text-2: #8f8d99;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
--shadow-md: 0 8px 26px -12px rgba(0, 0, 0, 0.8);
--shadow-lg: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
--glow: 0 0 44px -12px rgba(255, 122, 0, 0.35);
}
}
/* --------------------------------------------------------------- branding -- */
/* The logo artwork is a two-tone SVG held once in an inline sprite.
Both tones are gradients: the reel and the "film" half take #fd-ink, the
pixels and the "digit" half take #fd-ember — one asset serves both themes.
#fd-ink's stops read --brand-ink-a/b, declared in the theme blocks above.
That works because the gradient lives in the sprite's , so a var() on
its stops resolves against the *gradient's own* inherited context (
down), NOT the element referencing it via fill: url(). Setting the tokens on
:root is therefore what makes the ink gradient theme-aware — putting them on
.brand would not reach it. */
.brand-sprite {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
/* The width/height attributes on these