/* DESIGN TOKENS Change values here to reskin the entire site. Nothing else in this project should hard-code a color, spacing value, font, or radius — it should reference one of these variables instead. */ :root { /* ---- Color: neutrals ---- --color-bg is the page ground the side nav sits on; --color-surface is the raised card that
sits in, inset from --color-bg by the frame in layout.css. Warm-tinted rather than pure gray, so they sit with the clay accent below instead of fighting it. */ --color-bg: #ffffff; --color-surface: #f8f5ef; --color-border: #e8e1d6; --color-text: #211d19; --color-text-muted: #6b6259; --color-text-inverse: #ffffff; /* ---- Color: accent ---- Clay. Deliberately not the default indigo/blue every portfolio template ships with. Same value in light and dark mode. */ --color-accent: #c96c4a; --color-accent-hover: #b15a3a; --color-accent-soft: #f3e3db; /* White-on-accent falls short of AA at normal text size (~3.7:1), so accent-text uses dark ink instead — 4.5:1+ against #c96c4a. */ --color-accent-text: #241209; /* ---- Color: feedback ---- */ --color-success: #1a7f4e; --color-danger: #b3261e; /* ---- Color: court illustration ---- Used only by .court-demo (components.css), the interactive court on the volleyball consolidation case study. These depict a physical object, so unlike everything above they hold the same value in both themes — teal apron, clay playing surface, white lines. Only --court-plinth follows the theme, because the slab the court sits on is page furniture rather than part of the court. The heat ramp is deliberately hotter and more saturated than --color-accent: it has to read as data laid over the clay surface, not as more of the clay. */ --court-apron: #7cc6d1; --court-surface: #d8896a; --court-line: #ffffff; --court-post: #ded8ce; /* Panels just off white so the seams aren't the only thing separating the ball from the court's white lines. */ --court-ball: #ededed; --court-ball-seam: #333333; --court-drop-shadow: rgba(33, 29, 25, 0.5); --court-plinth: var(--color-bg); --court-heat-core: #ff3b1f; --court-heat-mid: #ff7a33; --court-heat-edge: #ffc14d; /* ---- Typography ---- Fraunces (display) against Inter (body) — a high-contrast pairing that gives headings a voice instead of defaulting to the system stack for everything. Both are loaded via the tags in each page's ; change those too if you swap these families. */ --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: "Fraunces", Georgia, "Times New Roman", serif; --fs-xs: 0.75rem; /* 12px */ --fs-sm: 0.875rem; /* 14px */ --fs-base: 1rem; /* 16px */ --fs-md: 1.125rem; /* 18px */ --fs-lg: 1.375rem; /* 22px */ --fs-xl: 1.75rem; /* 28px */ /* Fluid from here up: these scale with the viewport instead of stepping at a breakpoint, so headings stay proportionate at every width. min / preferred / max — the min applies at ~375px, the max caps out around 1280px. */ --fs-2xl: clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem); /* 28 → 40px */ --fs-3xl: clamp(2.25rem, 1.4rem + 3.6vw, 3.5rem); /* 36 → 56px */ --fs-display: clamp(2.5rem, 1.2rem + 7vw, 6rem); /* 40 → 96px */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.2; --lh-normal: 1.5; --lh-loose: 1.7; /* ---- Spacing scale ---- */ --space-3xs: 0.25rem; /* 4px */ --space-2xs: 0.5rem; /* 8px */ --space-xs: 0.75rem; /* 12px */ --space-sm: 1rem; /* 16px */ --space-md: 1.5rem; /* 24px */ --space-lg: 2rem; /* 32px */ --space-xl: 3rem; /* 48px */ --space-2xl: 4.5rem; /* 72px */ --space-3xl: 6rem; /* 96px */ /* ---- Layout ---- */ --container-width: 1120px; --container-padding: var(--space-xl); --nav-width: 220px; --nav-width-collapsed: 76px; --tabbar-height: 64px; /* Brand plate: the fixed slab carrying the mark, the name and the collapse toggle, drawn above the rail in both nav states. Its outline is a single clip-path — see ".site-nav__brand" in layout.css, which traces the shape point by point. These are only the element's box; the curves inside it are hardcoded in that path, since clip-path: path() takes a plain string and can't read custom properties. --nav-plate-edge is the plate's visual right edge; the element runs 16px wider so the top-right arc has a sliver to curve into. Changing any of these — or the brand name's length, which is what sets how wide the plate has to be — means re-deriving the path numbers to match. */ --nav-plate-edge: 256px; --nav-plate-width: 272px; --nav-plate-height: 96px; /* ---- Radius & shadow ---- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-full: 999px; --shadow-sm: 0 1px 2px rgba(20, 20, 25, 0.06); --shadow-md: 0 4px 16px rgba(20, 20, 25, 0.08); --shadow-lg: 0 12px 32px rgba(20, 20, 25, 0.12); /* For shapes that aren't rectangles — see .court-demo__svg, where a box-shadow would draw a box around the empty corners above the illustration. Written for filter: drop-shadow(), which takes no spread and so can't reuse the box-shadow tokens. Kept tighter than --shadow-lg because a drop-shadow spreads outside its element's box, and the panels these sit in clip their overflow. */ --shadow-drop: 0 8px 18px rgba(20, 20, 25, 0.16); /* ---- Glass (floating mobile tab bar) ---- A translucent pane that the page scrolls under, blurred via backdrop-filter. --glass-bg stays fairly opaque: below ~0.6 the tab labels start losing contrast against whatever scrolls behind them. The hairline is lighter than --color-border on purpose — it reads as a lit top edge rather than a drawn outline. The shadow is two layers: a wide soft one for lift off the page, and a tight dark one to keep the pill's edge defined against pale content. */ --glass-bg: rgba(255, 255, 255, 0.72); --glass-border: rgba(255, 255, 255, 0.7); --glass-shadow: 0 8px 32px rgba(20, 20, 25, 0.16), 0 2px 8px rgba(20, 20, 25, 0.08); --glass-blur: blur(20px) saturate(180%); /* ---- Motion ---- */ --transition-fast: 120ms ease; --transition-base: 200ms ease; /* Expanding/collapsing the side rail moves several things at once — the rail's width, the page offset, and the brand plate's outline. They share this one value so they stay locked together; a plain `ease` over 200ms reads as a snap at this size, so it's slower and runs on a curve that leaves quickly but settles gently. */ --transition-nav: 320ms cubic-bezier(0.4, 0, 0.2, 1); /* Page entrance (see the settle-in block in layout.css). Short, and on a curve that arrives quickly then eases off, so the effect is over before it draws attention to itself. */ --transition-enter: 380ms cubic-bezier(0.22, 1, 0.36, 1); /* ---- Breakpoints (for reference in comments; media queries can't read vars) ---- --bp-sm: 600px --bp-md: 900px --bp-lg: 1200px */ } /* Dark mode. Toggled by the theme switcher in the side nav (js/main.js), which adds/removes this class on and persists the choice. */ .theme-dark { --color-bg: #191715; --color-surface: #2c2a28; --color-border: #3d3a37; --color-text: #f3efea; --color-text-muted: #a79e93; /* Same clay value as light mode; only its hover/soft companions shift to stay legible against a dark ground. */ --color-accent: #c96c4a; --color-accent-hover: #d98363; --color-accent-soft: #3a2a22; --color-accent-text: #241209; /* Glass over a dark ground: the pane tints toward the page bg rather than white, and the hairline flips to a faint white lift so the pill's top edge still catches light. The shadow goes heavier — against dark content a light shadow reads as nothing at all. */ --glass-bg: rgba(25, 23, 21, 0.72); --glass-border: rgba(255, 255, 255, 0.12); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-drop: 0 8px 18px rgba(0, 0, 0, 0.5); }