/* ============================================================
FC26 FEEL CALCULATOR — DESIGN TOKENS
Ported from "Glass" design system. Sole source for accent,
surfaces, type-scale, and the three-layer background.
============================================================ */
:root {
/* ── Accent ────────────────────────────────────────────────
Hot magenta, matching the design system's vhigh / critical
tier: oklch(0.72 0.24 5). Triplet form so it composes with
`rgb(var(--accent) / a)`. Change once here to retint the app. */
--accent: 252 60 122; /* ≈ oklch(0.72 0.24 5) — hot magenta */
--accent-glow: rgb(252 60 122 / 0.5);
/* ── Plus accent (gold) ───────────────────────────────
Marks the "playstyle+" upgrade tier. Distinct hue from
--accent so the elevated state is unambiguous. */
--accent-plus: 255 200 80; /* warm gold, ≈ oklch(0.83 0.16 80) */
--accent-plus-glow: rgb(255 200 80 / 0.55);
/* ── Background base ──────────────────────────────────── */
--bg-base: #0a0a0f;
/* ── Semantic stat tiers ──────────────────────────────────
Four-tier progression ported verbatim from the Glass design
system. Drives the effective feel stat bars + compare bars. */
--tier-magenta: oklch(0.72 0.24 5); /* sub-85 */
--tier-amber: oklch(0.80 0.18 75); /* 85 – 99 */
--tier-green: oklch(0.80 0.18 150); /* 100 – 114 */
--tier-cyan: oklch(0.78 0.16 200); /* 115+ */
/* ── Type ─────────────────────────────────────────────── */
--font-display: "Inter Tight", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--font-ui: "Inter Tight", "Hanken Grotesk", -apple-system, system-ui, sans-serif;
--font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
/* Type scale (design system) — densities tightened slightly for the calculator */
--fs-display: 44px; /* wordmark — calculator uses sm:5xl/lg:6xl in markup */
--fs-h1: 28px; /* section headings (was 36 in DS — tightened for density) */
--fs-h2: 20px; /* sub-section heads */
--fs-body: 14px;
--fs-caption: 12px;
--fs-eyebrow: 10px;
--fw-display: 300;
--fw-h1: 400;
--fw-h2: 500;
--fw-body: 500;
--fw-eyebrow: 500;
--tracking-display: -0.025em;
--tracking-h1: -0.018em;
--tracking-body: -0.005em;
--tracking-eyebrow: 0.18em;
/* ── Glass surface tokens ────────────────────────────── */
--glass-thin: color-mix(in srgb, white 6%, transparent);
--glass-base: color-mix(in srgb, white 10%, transparent);
--glass-thick: color-mix(in srgb, white 16%, transparent);
--glass-solid: color-mix(in srgb, white 22%, transparent);
--glass-stroke-outer: color-mix(in srgb, white 18%, transparent);
--glass-stroke-inner: color-mix(in srgb, white 38%, transparent);
--glass-stroke-shadow: color-mix(in srgb, black 28%, transparent);
--blur-soft: 18px;
--blur-base: 28px;
--blur-thick: 44px;
/* ── Border / focus / radii ──────────────────────────── */
--r-xs: 6px;
--r-sm: 10px;
--r-md: 14px;
--r-lg: 20px;
--r-xl: 28px;
--r-pill: 999px;
--focus-ring: 0 0 0 3px rgb(var(--accent) / 0.28);
--focus-border: rgb(var(--accent) / 0.85);
}
/* Light-mode override is intentionally minimal — the calculator's existing
light-mode palette stays in style.css; only --accent is shared. The bg
layers below are scoped to html.dark so light mode keeps its paper look. */
/* ============================================================
ATMOSPHERE BACKGROUND (dark mode only)
Ported verbatim from the Glass design system reference —
neutral graphite canvas, drifting spotlights, linen texture
+ film grain. Light mode keeps its existing paper look.
============================================================ */
html.dark { background: var(--bg-base); }
html.dark body {
/* override the calculator's existing grain canvas */
background-color: transparent;
background-image: none;
}
.orb-field {
position: fixed;
inset: 0;
z-index: -1;
overflow: hidden;
pointer-events: none;
}
/* Deep graphite with the faintest warm undertone. Top vignette
suggests light spilling from above. */
html.dark .orb-field {
background:
radial-gradient(ellipse 70% 55% at 50% -8%,
oklch(0.24 0.006 75) 0%,
transparent 60%),
radial-gradient(ellipse 60% 70% at 100% 110%,
oklch(0.16 0.004 260) 0%,
transparent 55%),
linear-gradient(178deg,
oklch(0.165 0.004 75) 0%,
oklch(0.118 0.004 75) 55%,
oklch(0.095 0.005 70) 100%);
}
/* Spotlights — large soft pools of warm/cool light. Very low
chroma so the canvas stays neutral.
Held STATIC (no drift/breathe): a perpetually animating
backdrop forces every backdrop-filter surface above it to
re-blur on every frame, even while idle. Frozen, the whole
atmosphere (gradient + orbs + noise) caches as a single
bitmap and the page does zero repainting at rest. */
html.dark .orb {
position: absolute;
border-radius: 50%;
filter: blur(110px);
mix-blend-mode: screen;
}
/* Warm tungsten — top-left, the dominant key light */
html.dark .orb-1 {
width: 880px; height: 880px;
background: radial-gradient(circle,
oklch(0.78 0.025 75) 0%,
oklch(0.5 0.02 75) 40%,
transparent 70%);
top: -260px; left: -220px;
opacity: 0.55;
}
/* Cool moonlight — right side, secondary fill */
html.dark .orb-2 {
width: 760px; height: 760px;
background: radial-gradient(circle,
oklch(0.72 0.02 240) 0%,
oklch(0.45 0.015 240) 40%,
transparent 70%);
top: 22vh; right: -240px;
opacity: 0.32;
}
/* Warm bottom-center pool — like a floor lamp */
html.dark .orb-3 {
width: 700px; height: 700px;
background: radial-gradient(circle,
oklch(0.74 0.022 60) 0%,
oklch(0.48 0.018 60) 38%,
transparent 68%);
bottom: -260px; left: 32vw;
opacity: 0.4;
}
/* Very faint neutral haze — center mid */
html.dark .orb-4 {
width: 600px; height: 600px;
background: radial-gradient(circle,
oklch(0.7 0.005 80) 0%,
oklch(0.4 0.003 80) 45%,
transparent 72%);
top: 42vh; left: 18vw;
opacity: 0.22;
}
/* drift-* / breathe-* keyframes removed — the orbs are now static
so the atmosphere composites to a single cached layer. */
/* Layer 1: COARSE PLASTER — large blotchy luminance variation.
This is what makes the surface feel like a wall, not a screen. */
html.dark .orb-field::before {
content: "";
position: absolute; inset: -20px;
background-image:
url("data:image/svg+xml;utf8,"),
repeating-linear-gradient(
91deg,
rgba(255,255,255,0.018) 0px,
rgba(255,255,255,0.018) 1px,
transparent 1px,
transparent 3px),
repeating-linear-gradient(
1deg,
rgba(0,0,0,0.04) 0px,
rgba(0,0,0,0.04) 1px,
transparent 1px,
transparent 4px);
background-size: 100% 100%, auto, auto;
opacity: 0.85;
mix-blend-mode: overlay;
pointer-events: none;
}
/* Layer 2: FINE GRAIN — the always-present photographic noise
that sells the "real material" feeling at any zoom. */
html.dark .orb-field::after {
content: "";
position: absolute; inset: 0;
background-image:
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,");
opacity: 1;
mix-blend-mode: overlay;
pointer-events: none;
}
/* Layer 3: DUST & VIGNETTE — depth at the edges + a few stray
"specks" you'd see on a real surface. */
.atmosphere-veil {
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
}
html.dark .atmosphere-veil {
background:
radial-gradient(ellipse 110% 90% at 50% 50%,
transparent 50%,
rgba(0,0,0,0.35) 100%),
url("data:image/svg+xml;utf8,");
mix-blend-mode: overlay;
}
/* ============================================================
GLASS HELPER CLASSES — applied to container surfaces only.
Inputs / chips / tiles must NOT use these.
============================================================ */
.glass-base,
.glass-thin {
position: relative;
isolation: isolate;
}
html.dark .glass-base {
background: var(--glass-base);
backdrop-filter: blur(var(--blur-base)) saturate(180%);
-webkit-backdrop-filter: blur(var(--blur-base)) saturate(180%);
border: 1px solid var(--glass-stroke-outer);
box-shadow:
0 1px 0 0 var(--glass-stroke-inner) inset,
0 -1px 0 0 var(--glass-stroke-shadow) inset,
0 24px 60px -20px rgba(0,0,0,0.55),
0 4px 16px -4px rgba(0,0,0,0.35);
}
html.dark .glass-thin {
background: var(--glass-thin);
backdrop-filter: blur(var(--blur-soft)) saturate(160%);
-webkit-backdrop-filter: blur(var(--blur-soft)) saturate(160%);
border: 1px solid var(--glass-stroke-outer);
box-shadow:
0 1px 0 0 color-mix(in srgb, white 22%, transparent) inset,
0 -1px 0 0 var(--glass-stroke-shadow) inset,
0 12px 28px -12px rgba(0,0,0,0.45);
}
/* ============================================================
EYEBROW + SECTION MARKER
============================================================ */
.eyebrow,
.ps-section-label,
.text-eyebrow {
font-family: var(--font-mono) !important;
font-size: var(--fs-eyebrow) !important;
font-weight: var(--fw-eyebrow) !important;
letter-spacing: var(--tracking-eyebrow) !important;
text-transform: uppercase;
}
/* Small left accent bar on h2 section titles inside .card */
.card-title-with-marker {
position: relative;
padding-left: 12px;
}
.card-title-with-marker::before {
content: "";
position: absolute;
left: 0; top: 8%; bottom: 8%;
width: 3px;
border-radius: 2px;
background: rgb(var(--accent));
box-shadow: 0 0 12px rgb(var(--accent) / 0.45);
}
/* ============================================================
SEGMENTED CONTROL — for Build Type + AcceleRATE Type pill rows.
Markup: with
.option-btn.slim children. Active uses var(--accent).
============================================================ */
.segmented-rail {
display: grid;
position: relative;
padding: 3px;
border-radius: var(--r-pill);
gap: 0;
background: rgb(0 0 0 / 0.18);
border: 1px solid rgb(var(--c-line));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.25);
}
html.dark .segmented-rail {
/* backdrop-filter removed for performance — the rail sits on the
already-frosted .unified-card, so its own blur was redundant. */
background: rgb(0 0 0 / 0.32);
border-color: var(--glass-stroke-outer);
}
/* The floating indicator — animated via JS-set left/width.
FLIP-style spring; ~480ms feels lively without being twitchy. */
.segmented-indicator {
position: absolute;
top: 3px;
bottom: 3px;
left: 0;
width: 0;
border-radius: var(--r-pill);
background: rgb(var(--accent) / 0.18);
box-shadow:
inset 0 1px 0 rgb(var(--accent) / 0.45),
0 1px 0 rgb(0 0 0 / 0.25),
0 0 0 1px rgb(var(--accent) / 0.42);
/* Slide on the compositor — `transform` instead of `left`. The
equal-column rails keep a constant width, so width never
animates there; the 2-button view-toggle is the only place
`width` transitions, and that is a rare discrete click. */
will-change: transform;
transition:
transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
width 320ms cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: none;
z-index: 0;
opacity: 0;
}
.segmented-indicator.ready { opacity: 1; }
html.dark .segmented-indicator {
/* Light tinted glass + inset highlights + drop shadow — same raised,
solid-object feel as a toggled playstyle tile. */
background: color-mix(in srgb, rgb(var(--accent)) 26%, var(--glass-solid));
box-shadow:
0 1px 0 0 color-mix(in srgb, white 30%, transparent) inset,
0 -1px 0 0 color-mix(in srgb, black 20%, transparent) inset,
0 0 0 1px rgb(var(--accent) / 0.45),
0 8px 24px -8px rgba(0,0,0,0.4);
}
.segmented-rail .option-btn.slim {
position: relative;
z-index: 1;
border: none !important;
background: transparent !important;
color: rgb(var(--c-ink-muted)) !important;
border-radius: var(--r-pill) !important;
padding: 6px 4px !important;
font-size: 11px !important;
letter-spacing: 0.02em;
box-shadow: none !important;
transition: color 220ms ease;
}
.segmented-rail .option-btn.slim:hover {
color: rgb(var(--c-ink)) !important;
background: transparent !important;
}
/* Active button — accent text, matching a toggled playstyle tile. */
.segmented-rail .option-btn.slim.active {
color: rgb(var(--accent)) !important;
background: transparent !important;
box-shadow: none !important;
}