/* ============================================================
Gradation tokens — Interactive Deck Template
Drop into the deck alongside styles.css:
Stops resolve through the existing HDS semantic tokens
(--accent, --blue, --ink, --paper) with hex fallbacks.
============================================================ */
:root {
/* --- Canonical semantic colors --- */
--bg: #ffffff;
--paper: #ffffff;
--panel: #ffffff;
--well: #f8fafd;
--mock-chrome: #e5edf5;
/* Text tiers — assign by ROLE, not by taste.
* --ink headings, slide titles, statements, emphasised words, large stat numerals
* --text-body running sentences; the inherited baseline on .slide.sp-slide
* --text-secondary supporting sentences that sit under a title or lead into content
* --muted captions, eyebrows, labels, meta, attributions, figcaptions
*
* The tiers describe EMPHASIS, not element type. Two separate axes:
*
* Static hierarchy — the rule above. A caption is never --text-secondary,
* and a title is never demoted without a reason.
*
* State — exempt. A title at a lower tier is CORRECT when the lower tier is
* the message: an inactive step, a collapsed row, an unselected toggle. The
* active/open state is what carries --ink. Do not "fix" these to --ink; it
* erases the state distinction.
*/
--ink: #0d253d;
--text-body: #273951;
--text-secondary: #3c4f69;
--muted: #64748d;
--hairline: #d4dee9;
/* Quote-card chrome — the box border and the divider above the attribution on
* slides 13, 18 and 25. Lighter than --hairline on purpose: at card scale the
* hairline read as a drawn box rather than an edge. Its own name because
* --hairline carries dividers, rules and mock chrome deck-wide and must not
* move with it. */
--card-border: #e6ecf3;
--panel-border: #bac8da;
--accent: #665efd;
--blue: #533afd;
--night: #0b0f16;
--stat-neutral: #8595ab;
/* White alphas serve two unrelated jobs. They used to share one 6-step scale,
* which meant a "tidy up the ramp" edit silently retuned glass surfaces. Split
* by job: the white ramp is TEXT ON DARK ONLY, and the glass fills, the glass
* border and the rule-on-dark are surfaces. Never repoint one job at the
* other's token because the numbers happen to match.
*
* Do not write a token name ending in a star immediately before a slash here:
* that sequence closes this comment early, and the declaration that follows
* gets swallowed as a custom-property value. That is exactly how --white-82
* silently stopped existing and made the cover's subtitle invisible.
*/
/* Text on dark — three steps: primary, secondary, quiet. --white-78 and
* --white-50 were removed: 78 sat 6% from 82 and 50 sat 10% from 60, which is
* below the threshold where either reads as a distinct tier. */
--white-82: rgba(255, 255, 255, 0.82);
--white-72: rgba(255, 255, 255, 0.72);
--white-60: rgba(255, 255, 255, 0.60);
/* Translucent surfaces — glass fills, glass borders, rules on dark. */
--glass-fill: rgba(255, 255, 255, 0.78);
--glass-fill-soft: rgba(255, 255, 255, 0.72);
--glass-border: rgba(255, 255, 255, 0.78);
/* 0.40, the cover design's value. Was 0.50, inherited from the old --white-50
it replaced. Its only consumer is .sp-short-rule, which only the cover
renders, so this is a cover-scoped change despite being a token. */
--rule-on-dark: rgba(255, 255, 255, 0.40);
/* Hairline on dark. Currently unreferenced — kept as the documented step. */
--white-12: rgba(255, 255, 255, 0.12);
--cover-blob-sky: rgba(110, 195, 240, 0.50);
--cover-blob-rose: rgba(242, 169, 196, 0.42);
--emph-text: #b4453a;
--emph-wash-bg: rgba(214, 96, 77, 0.16);
--emph-wash-text: #8f3a30;
--emph-underline: #d6604d;
/* --- Canonical type scale: hierarchy by size, all weight 400 --- */
/* These are DESIGN sizes at --stage-scale: 1. The stage is a contain-fit
* transform (portfolio/app.js, fitStage()), so what a viewer sees is
* size x scale. The 16px sentence floor therefore only holds above roughly
* 1100px of available width — and the sidebar is subtracted from that width,
* which is why it auto-collapses between 861 and 1199px. At 860px and below
* the deck is not rendered at all; the mobile cover replaces it.
* If you are wondering why 16px looks small, check the scale first. */
--font-sans: "DM Sans", sans-serif;
--font-heading: "DM Sans", sans-serif;
--font-label: "DM Sans", sans-serif;
--font-mono: "DM Sans", sans-serif;
--font-weight-regular: 400;
--type-cover-size: 60px;
--type-cover-line: 68px;
--type-divider-size: 44px;
--type-divider-line: 52px;
/* Case-OPENER titles only (slides 05, 28). This used to carry the statement
* slides too, which is why dropping statements to 32 could not be done by
* retuning it — the two roles had been sharing one name. */
--type-case-size: 40px;
--type-case-line: 48px;
/* The single-sentence statement / principle slides. Its own step between the
* 20px title and the 44px divider, so a 3-4 line statement reads as a sentence
* rather than a wall at the stage's ~1.3x scale. */
--type-statement-size: 32px;
--type-statement-line: 42px;
--type-header-size: 24px;
--type-header-line: 32px;
--type-lead-size: 20px;
--type-lead-line: 28px;
--type-body-size: 16px;
--type-body-line: 24px;
--type-card-title-size: 18px;
--type-card-title-line: 24px;
--type-career-phase-size: 12px;
--type-career-title-size: 16px;
--type-career-title-line: 27px;
--type-career-body-line: 23px;
--type-accordion-title-size: var(--type-lead-size);
--type-accordion-title-line: var(--type-lead-line);
--type-compare-title-size: 24px;
--type-compare-title-line: 30px;
--type-context-line: 30px;
--type-principle-line: 50px;
--type-label-size: 14px;
--type-label-line: 20px;
--type-label-mono-size: var(--type-label-size);
--type-label-tracking: 0;
--type-control-size: 13px;
--type-control-line: 18px;
--type-stat-single-size: 110px;
--type-stat-multi-size: 64px;
--type-stat-line: 1.18;
--type-cover: var(--type-cover-size);
--type-divider: var(--type-divider-size);
--type-case: var(--type-case-size);
--type-header: var(--type-header-size);
--type-lead: var(--type-lead-size);
--type-body: var(--type-body-size);
--tracking-cover: -0.025em;
--tracking-divider: -0.025em;
--tracking-case: -0.025em;
--tracking-header: -0.0225em;
--tracking-body: 0;
/* --- Canvas and spacing --- */
--slide-width: 1040px;
--slide-height: 585px;
--slide-x: 128px;
--slide-y: 96px;
--space-100: 8px;
--space-050: 3px;
--space-075: 6px;
--space-150: 12px;
--space-200: 16px;
--space-250: 20px;
--space-300: 24px;
--space-350: 28px;
--space-400: 32px;
--space-500: 40px;
--space-600: 48px;
--space-700: 64px;
--space-750: 72px;
--space-2xs: var(--space-100);
--space-xs: var(--space-150);
--space-sm: var(--space-200);
--space-md: var(--space-300);
--space-lg: var(--space-400);
--space-xl: var(--space-600);
--space-2xl: var(--space-700);
--radius-xs: 6px;
--radius-sm: 8px;
--radius-md: 10px;
--radius-lg: 12px;
--radius-xl: 20px;
--radius-panel: 16px;
--radius-pill: 999px;
/* Elevation, lightest to heaviest. Every shadow in the deck uses the design
system ink, rgba(13, 37, 61, …) — a hue mismatch between two cards reads as
two different renderings of the same object, far more visibly than a
blur-radius mismatch does. Brand-tinted glows, rings and scrims are not
elevation and keep their own values. */
--elevation-0: none;
--elevation-hairline: 0 1px 2px rgba(13, 37, 61, 0.20); /* toggle knobs, switches */
--elevation-subtle: 0 2px 8px rgba(13, 37, 61, 0.06); /* chips, inline pills */
--elevation-control: 0 4px 16px rgba(13, 37, 61, 0.10);
--elevation-card: 0 12px 32px rgba(13, 37, 61, 0.12); /* cards */
--elevation-1: 0 16px 48px rgba(13, 37, 61, 0.14); /* panels, framed stages */
/* Was 0 24px 80px / .28 and used nowhere — three heavy shadows had been
hand-written near this weight at 44–60px blur, so the token was defined
wider than anything the deck actually wanted. */
--elevation-2: 0 24px 60px rgba(13, 37, 61, 0.18);
--elevation-control-active: 0 1px 4px rgba(13, 37, 61, 0.16);
--status-rejected: #b23a5f;
--status-rejected-border: rgba(226, 124, 160, 0.7);
--status-rejected-bg: rgba(242, 169, 196, 0.22);
--status-chosen: #0f7a5a;
--status-chosen-border: rgba(52, 168, 125, 0.65);
--status-chosen-bg: rgba(52, 168, 125, 0.13);
--grad-status-chosen-bar: linear-gradient(180deg, #34a87d, #0f7a5a);
--grad-status-rejected-bar: linear-gradient(180deg, #e27ca0, #b23a5f);
--status-warning: #b45309;
--motion-fast: 120ms;
--motion-base: 200ms;
--motion-slow: 320ms;
--motion-cover-bleed: 18s;
--motion-cover-sky: 22s;
--motion-cover-rose: 26s;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--border-thin: 1px;
--border-accent: 1.5px;
--border-rule: 2px;
--mock-padding: 10px;
--component-card-padding: 24px;
--component-card-padding-inline: 26px;
--option-reveal-copy-width: 360px;
--component-dot-size: 26px;
--title-logo-size: 28px;
--cover-blob-blur: 50px;
--placeholder-stripe: 12px;
--content-narrow: 560px;
--content-case: 680px;
--content-wide: 784px;
--showcase-rail: 320px;
--case-meta-min: 96px;
--shot-height: 180px;
--timeline-gap: 8px;
--timeline-margin-top: 20px;
--timeline-row-padding: 8px 0;
--career-track-gap: 32px;
--career-track-margin-top: 24px;
--career-dot-size: 9px;
--career-tick-height: 24px;
--career-block-gap: 10px;
--explainer-copy-left: var(--slide-inset-left);
--explainer-copy-width: 280px;
--explainer-panel-left: 400px;
--explainer-panel-inset: 24px;
--steps-copy-left: var(--slide-inset-left);
/* stepsDiagram is ai-trust-flow only, so these are effectively that slide.
Copy runs 128..648 and the diagram 680..1016 — the text gets the room the
three steps wanted, the flow gives up width it was not using. */
--steps-copy-width: 419px;
--steps-panel-left: 579px;
/* --- Gradient stops --- */
--grad-brand: var(--accent, #665efd); /* brand-500 */
--grad-blue: var(--blue, #533afd); /* brand-600 */
--grad-orchid: #a86ff5; /* derived */
--grad-sky: #6ec3f0; /* derived */
--grad-rose: #f2a9c4; /* derived */
/* --- Background recipes (one filled gradient surface per slide) --- */
--grad-aurora:
radial-gradient(65% 90% at 8% 12%, rgba(102, 94, 253, 0.30), transparent 62%),
radial-gradient(55% 75% at 92% 8%, rgba(110, 195, 240, 0.42), transparent 62%),
radial-gradient(60% 80% at 82% 92%, rgba(242, 169, 196, 0.38), transparent 64%),
radial-gradient(50% 65% at 25% 100%, rgba(168, 111, 245, 0.28), transparent 62%),
var(--paper, #ffffff);
--grad-aurora-panel:
radial-gradient(60% 50% at 18% 8%, rgba(102, 94, 253, 0.34), transparent 60%),
radial-gradient(50% 40% at 88% 28%, rgba(242, 169, 196, 0.38), transparent 65%),
radial-gradient(55% 45% at 55% 95%, rgba(110, 195, 240, 0.38), transparent 60%),
linear-gradient(160deg, #edeffb, #f6f1fa);
--grad-divider:
linear-gradient(68deg, transparent 62%, rgba(83, 58, 253, 0.35) 74%,
rgba(102, 94, 253, 0.55) 85%, rgba(168, 111, 245, 0.45) 94%,
rgba(110, 195, 240, 0.30) 100%);
--grad-wash:
radial-gradient(70% 55% at 85% 108%, rgba(214, 217, 252, 0.85), transparent 70%),
radial-gradient(45% 40% at 108% 85%, rgba(110, 195, 240, 0.22), transparent 65%),
var(--paper, #ffffff);
--grad-contents:
radial-gradient(70% 90% at 80% 30%, rgba(102, 94, 253, 0.35), transparent 65%),
radial-gradient(55% 70% at 60% 85%, rgba(110, 195, 240, 0.30), transparent 62%),
linear-gradient(160deg, #eef0fe, var(--well, #f8fafd));
--grad-dusk:
radial-gradient(70% 95% at 82% 5%, rgba(102, 94, 253, 0.55), transparent 68%),
radial-gradient(50% 60% at 10% 90%, rgba(110, 195, 240, 0.30), transparent 62%),
radial-gradient(45% 55% at 60% 108%, rgba(242, 169, 196, 0.22), transparent 62%),
var(--ink, #0d253d);
/* FINAL title-slide recipe — apply on .grad-bleed over near-black.
The last two stops were rgba(230,233,252,0.95) 90% / #f8fafd 100%. That
terminated within ~2% luminance of the deck's page background, so the cover's
right edge dissolved into the page — .stage carries no border, shadow or
radius to hold it. Darkened instead of adding a border, which would have
given this one slide a frame the other 44 do not have. */
--grad-cover:
radial-gradient(45% 55% at 103% 62%, rgba(255, 255, 255, 0.90), transparent 60%),
linear-gradient(68deg, transparent 44%, rgba(83, 58, 253, 0.50) 56%,
rgba(102, 94, 253, 0.95) 66%, rgba(168, 111, 245, 0.90) 76%,
rgba(206, 214, 246, 0.95) 88%, rgba(184, 195, 240, 0.95) 100%);
--grad-diffusion: /* apply on .grad-bleed (blurred) over near-black */
radial-gradient(50% 65% at 102% 68%, rgba(255, 255, 255, 0.95), transparent 62%),
linear-gradient(112deg, transparent 42%, rgba(83, 58, 253, 0.55) 56%,
rgba(102, 94, 253, 0.95) 65%, rgba(168, 111, 245, 0.90) 73%,
rgba(230, 233, 252, 0.95) 88%, #f8fafd 100%);
--grad-airbrush: /* apply on .grad-bleed (blurred) over --well */
radial-gradient(38% 52% at 88% 18%, rgba(242, 169, 196, 0.75), transparent 68%),
radial-gradient(42% 55% at 105% 75%, rgba(168, 111, 245, 0.60), transparent 70%),
radial-gradient(35% 50% at 55% 108%, rgba(110, 195, 240, 0.50), transparent 70%);
--grad-pigment:
linear-gradient(120deg, var(--grad-blue), var(--grad-brand) 32%,
var(--grad-orchid) 62%, var(--grad-rose) 100%);
--grad-haze-field:
radial-gradient(45% 65% at 78% 22%, rgba(242, 169, 196, 0.85), transparent 65%),
radial-gradient(50% 70% at 95% 80%, rgba(102, 94, 253, 0.75), transparent 68%),
radial-gradient(40% 55% at 58% 95%, rgba(110, 195, 240, 0.70), transparent 66%),
radial-gradient(35% 50% at 70% 55%, rgba(168, 111, 245, 0.65), transparent 65%);
--grad-beam-ring:
radial-gradient(circle, transparent 40.5%, rgba(83, 58, 253, 0.35) 44%,
rgba(102, 94, 253, 0.95) 47.5%, rgba(168, 111, 245, 0.85) 50%,
rgba(110, 195, 240, 0.35) 53%, transparent 57%);
/* --- Accent recipes --- */
--grad-type: linear-gradient(95deg, var(--grad-blue) 5%, var(--grad-orchid) 50%, var(--grad-sky) 95%);
--grad-hairline: linear-gradient(90deg, var(--grad-blue), var(--grad-orchid) 55%, var(--grad-sky));
--grad-hairline-alt: linear-gradient(90deg, var(--grad-brand), var(--grad-sky), var(--grad-rose));
--grad-hover: linear-gradient(120deg, var(--grad-blue), var(--grad-orchid) 40%, var(--grad-sky) 75%, var(--grad-rose));
--grad-rest: linear-gradient(120deg, var(--hairline, #d4dee9), var(--hairline, #d4dee9));
/* Stat numerals carry meaning in their gradient, not just decoration: a stat
* describing the PROBLEM gets this neutral/dark ramp, a stat describing the
* RESULT gets --grad-type (brand). That is why this is not the brand gradient
* and must not be "unified" with it — the difference is the message. From the
* original handoff spec; values are fixed. */
--grad-stat-problem: linear-gradient(135deg, #16233a, #64748b);
/* --- Textures --- */
--texture-grain: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22200%22 height=%22200%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.9%22 numOctaves=%222%22/%3E%3C/filter%3E%3Crect width=%22200%22 height=%22200%22 filter=%22url(%23n)%22 opacity=%220.6%22/%3E%3C/svg%3E');
--texture-blotch: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22600%22 height=%22600%22%3E%3Cfilter id=%22p%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.012%22 numOctaves=%224%22/%3E%3C/filter%3E%3Crect width=%22600%22 height=%22600%22 filter=%22url(%23p)%22 opacity=%220.9%22/%3E%3C/svg%3E');
/* Dark-surface grid, layered under the dot motif on the cover, the thank-you
* slide and the mobile cover — the texture language shared with chloek.com.
* These exact values were approved on screen: do not round 74 to 72/75/80 and
* do not brighten 0.055. Held in a token so the three surfaces cannot drift.
* No mask — the lines vanish on their own where the gradient goes bright. */
--texture-grid:
linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
--texture-grid-size: 74px 74px;
}
/* ============================================================
Utilities
============================================================ */
/* Blurred bleed layer for diffusion/airbrush backgrounds:
*/
.grad-bleed {
position: absolute;
inset: -12%;
filter: blur(30px);
pointer-events: none;
}
/* Film grain overlay — host needs position: relative */
.grain::after {
content: "";
position: absolute;
inset: 0;
background-image: var(--texture-grain);
opacity: 0.5;
mix-blend-mode: overlay;
pointer-events: none;
}
/* Pigment blotch overlay (use with --grad-pigment backgrounds) */
.blotch::before {
content: "";
position: absolute;
inset: 0;
background-image: var(--texture-blotch);
background-size: cover;
opacity: 0.5;
mix-blend-mode: soft-light;
pointer-events: none;
}
/* Gradient-clipped display type — one hero stat per slide */
.grad-text {
background: var(--grad-type);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Gradient hairline border (tab style: square top corners) */
.grad-border {
border: 1.5px solid transparent;
background-image:
linear-gradient(var(--paper, #fff), var(--paper, #fff)),
var(--grad-hairline);
background-origin: border-box;
background-clip: padding-box, border-box;
}
.grad-border--tab {
border-top-width: 3px;
border-radius: 0 0 8px 8px;
}
/* Bento tile: gray outline at rest, gradient outline on hover.
Overlay element carries the hover so it beats inline styles:
…
*/
.bento-tile {
position: relative;
border: 1.5px solid var(--hairline, #d4dee9);
background: var(--paper, #fff);
border-radius: 12px;
}
.bento-tile-ring {
position: absolute;
inset: -1.5px;
border-radius: 12px;
padding: 1.5px;
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
pointer-events: none;
}
.bento-tile:hover .bento-tile-ring {
background: var(--grad-hover);
}
/* Section dividers: same construction as the cover —
over a near-black slide, title reversed on the ink side. */