/* =========================================================================== Design tokens — dark register --------------------------------------------------------------------------- The palette moved from the light Figma file to a near-black ground, in the spirit of Robin Noguier's portfolio. Two things carried over unchanged: the orange accent, and the chip hues that encode domain (forensics / fintech / cybersecurity). The neutrals are not pure greys. They carry a slight warm bias toward the accent, so black reads as a decision rather than a default. Product screenshots also sit better on a warm ground than on a blue-black one. =========================================================================== */ :root { color-scheme: dark; /* --- Ground ------------------------------------------------------------ */ --bg: #100E0C; /* warm near-black */ --bg-deep: #0A0908; /* behind the ground, for vignettes */ --surface: #1A1613; /* raised card */ --surface-2: #241F1A; /* hover / inset */ /* --- Ink ---------------------------------------------------------------- */ --ink: #F2EDE7; /* warm off-white, never pure #FFF */ --ink-strong: #FFFBF6; --ink-muted: #A69C93; --ink-faint: #827970; /* was #6B635C at 3.27:1 on --bg; brightened to clear 4.5:1 */ --hairline: rgba(255, 248, 240, 0.10); --hairline-soft: rgba(255, 248, 240, 0.06); /* Fixed, not derived from --ink/--bg: the home carousel rewrites --ink (and --ink-strong) to match whichever project is current, while the page background it is meant to sit on is set separately, per slide, as an inline style on . A skip-link built from --ink/--bg would drift out of sync with that per-slide background and measured 1.07:1 on the Dashboard Transformation slide. This pair never changes underneath it. */ --skip-link-bg: #F2EDE7; --skip-link-ink: #100E0C; /* --- Accent ------------------------------------------------------------- #E8622A from the Figma file goes muddy on a black ground, so it is brightened for contrast while keeping the same hue. */ --accent: #FF6A2B; --accent-hover: #FF8551; --accent-dim: rgba(255, 106, 43, 0.16); /* --- Domain chips ------------------------------------------------------- Same three hues as the light design, retuned for a dark ground. */ --chip-orange-bg: rgba(255, 106, 43, 0.14); --chip-orange-ink: #FFA377; --chip-pink-bg: rgba(255, 77, 166, 0.14); --chip-pink-ink: #FF8FC6; --chip-amber-bg: rgba(255, 183, 45, 0.14); --chip-amber-ink: #FFD08A; --chip-neutral-bg: rgba(255, 248, 240, 0.07); --chip-neutral-ink: #A69C93; /* --- Typography --------------------------------------------------------- Display: Instrument Serif — high contrast, narrow, built for large sizes. Body/UI: Inter. Labels are uppercase Inter with wide tracking, which is what carries the "quiet chrome, loud title" contrast. */ --font-display: 'Instrument Serif', 'Times New Roman', Georgia, serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* The project title is the loudest thing on the page — it is the thesis. */ --fs-display: clamp(2.75rem, 1.4rem + 5.4vw, 6rem); --fs-hero: clamp(2.75rem, 1.6rem + 5vw, 5rem); --fs-title: clamp(2rem, 1.4rem + 2.6vw, 3rem); --fs-section: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); --fs-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem); --fs-body: 1rem; --fs-small: 0.875rem; --fs-micro: 0.75rem; --fs-label: 0.6875rem; /* uppercase chrome */ --lh-tight: 1.02; /* display serif sets tight */ --lh-snug: 1.35; --lh-body: 1.65; --tracking-display: -0.015em; --tracking-label: 0.16em; /* --- Spacing (4px base) -------------------------------------------------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; --gutter: clamp(1.25rem, 0.5rem + 3vw, 4rem); --measure: 32rem; --shell-max: 88rem; /* --- Radius --------------------------------------------------------------- */ --r-chip: 999px; /* pill, so chips read as metadata not buttons */ --r-btn: 999px; --r-card: 14px; --r-frame: 10px; /* --- Elevation ------------------------------------------------------------ Shadow does almost nothing on black. Separation comes from surface value and hairlines instead, with shadow reserved for the floating visuals. */ --shadow-frame: 0 24px 60px rgba(0, 0, 0, 0.55), 0 4px 16px rgba(0, 0, 0, 0.4); --shadow-lift: 0 16px 40px rgba(0, 0, 0, 0.45); /* --- Motion ---------------------------------------------------------------- */ --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 180ms; --dur-deck: 560ms; /* slower than the light build: bigger type, more travel */ --dur-reveal: 700ms; --stagger: 70ms; /* --- Knobs --------------------------------------------------------------- The handful of values that actually get argued about. They live here, with names, so a change is one number in one file and the browser reloads itself — no need to go hunting through four stylesheets, and no need to ask me. Every one of these has already been adjusted at least once. Run `python3 tools/dev.py`, open the review page, edit, watch. */ --logo-size: clamp(34px, 3.4vw, 46px); /* company marks on About */ --tool-icon-size: 26px; /* the tool strip */ --deck-frame-radius: 8px; /* cover corners on the home page */ --deck-tilt: -7deg; /* its resting perspective lean */ /* Nothing draws taller than this. Full-bleed width alone put a 3:2 visual at 1280px tall on a 1920 monitor, which is more than a screen: you could not see a whole one without scrolling, and a screenshot you have to scroll is harder to read than a smaller one you can take in at once. Capping the height and letting the width follow keeps every visual inside one view. */ --visual-max-h: 900px; /* Width the sticky section rail occupies beside the article on desktop. The height cap above already limits a 3:2 visual to about 1350px wide, so on a wide screen the rail costs the image nothing: the content column is still wider than the image can be. */ --rail-w: 11rem; --visual-wipe: 1s; /* case-study reveal wipe */ --word-stagger: 85ms; /* per-word delay in a heading */ /* How much ink a case-study chip carries. Lower = closer to the raw accent and more contrast risk: at 100% the Unipaas pink measures 3.73:1, under the 4.5 small text needs. 70 is the lowest value that clears it for all three projects. */ --chip-accent-mix: 70%; --z-deck: 1; --z-nav: 40; --z-pager: 50; --z-overlay: 100; } @media (prefers-reduced-motion: reduce) { :root { --dur-deck: 1ms; --dur-reveal: 1ms; --dur-fast: 1ms; --stagger: 0ms; } }