/* Core — every page loads this first, straight after style.css. Tokens, nav, footer, page shell, typography roles, keyframes, and the rules that every page matches. The redesign stylesheet is split by who uses a rule, and each page links only the files it needs, always in this order: core/core.css → components/*.css → pages/…/.css Within that order every rule keeps its original relative position, so the cascade is the same as when this was one file. A new rule goes in the narrowest file that covers every page it is meant for. */ /* DM Sans — the redesign's UI face. It has to be requested HERE, in the file that declares `--rd-font`, because that pairing is what kept breaking. The bug this fixes (found 2026-08-18): `--font-ui` is `"DM Sans", "Manrope", system-ui, …`, and DM Sans was only ever fetched by two `` tags in index.html / about.html and one `@import` in case-retheme-v3.css. Every page on redesign.css that was NOT one of those — lending-new, healthcare, customer-engagement and the four -v2/-v4/-v5 drafts, eight pages in total — silently fell through to Manrope, which text-styles.css does load. Nothing errored; the type just quietly rendered in the wrong face, and it only showed up when a case study was compared side by side with web-3.html. `@import` rather than asking eight ``s to remember a ``: a stylesheet that declares a font stack should be the thing that guarantees the font, and the index.html / about.html `` tags still win the race on those two pages. Cost is one extra round trip on the pages that have no ``, which is the trade for it never drifting again. Must stay at the very top — @import is only valid before any other rule. */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,100..1000&display=swap'); /* Redesign styles — 2026 portfolio redesign Source of truth: Figma "Wrapup" → node 40000028:3126 ("homepage"), sections 40000031:5463 hero + nav 40000031:5907 How I Create Impact 40000124:720 Selected Product Initiatives 40000028:3230 closing CTA + footer bar Every value below is transcribed from get_design_context on those nodes. Scoping ------- Custom properties are prefixed --rd-*, classes .rd-*, so nothing collides with the legacy token set (--text-neutral-*, --grey-*) or utility classes (.lg-medium, .sub-heading, ...). The nav and footer rules are GLOBAL because templates/nav.html and templates/footer.html render on every page. Homepage section rules are gated on .rd-home. The design is a fixed 1440px content column on a 1920px canvas. .rd-shell reproduces that exactly at >=1440px and degrades fluidly below it. The project's bootstrap `.container` is deliberately NOT used here — its breakpoint max-widths (1140/1280px) would clamp the 1440px column. Linked from each page's after css/styles/style.css — see the load order note at the top of this file. */ /* ---------------------------------------------------------------- Tokens - */ :root { /* Colour — one ink for all text, one accent for anything interactive. The six aliases this replaces (--rd-ink-alt/-black/-soft/-title/-muted and --rd-wordmark) all resolved to the same hex once the type colour was unified, so they were names without meaning. Reintroduce a token here only when a second value is actually needed. */ --rd-ink: #0a2a30; /* every heading, body, label and caption */ --rd-on-accent: #ffffff; /* text, icons and rings drawn on a primary/dark fill */ --rd-open: green; /* "#opentowork" — literal `green` in the design */ --rd-primary: #01679c; /* buttons, text buttons */ --rd-primary-hover: #014a70;/* not in Figma; darkened primary for :hover */ --rd-surface: #f3f3ef; /* section background */ --rd-surface-raised: #ffffff; /* cards and panels that sit above --rd-surface */ --rd-border: #666666; /* card + stat-box border */ --rd-border-soft: #e5e7eb; /* CTA top border */ --rd-border-muted: #999999; /* inactive tab underline */ /* Promoted 2026-08-20 from lending-new.html's preview build, where these three lived only as inline `var(--rd-x, #hex)` fallbacks (22 occurrences across the benchmark/market chart rules below). Values are the fallbacks already in production, not new decisions. */ --rd-line: #e5e5e5; /* hairline borders — table rows, card dividers */ --rd-tint: #f5f3ef; /* subject/selected-row background tint */ --rd-ink-muted: #6b6b6b; /* secondary text — captions, sub-labels */ /* Added 2026-08-20 for case-study-framework.html's lesson cards — Figma 40000256:6457 etc. genuinely calls for a colour outside ink/primary/ surface, so it gets a real token instead of an inline hex (Hao's call: check the token set first, and if the colour really is new, add it properly rather than working around not having it). Not reused anywhere else yet — a second use is what would justify generalising the name. */ --rd-accent-yellow: #ffc645; /* case-study-framework.html lesson cards only */ --rd-shadow-card: 0px 4px 2px rgba(0, 0, 0, 0.1); /* same shape as --rd-shadow-nav, darker/less tinted — Figma's card drop-shadow */ /* Added 2026-08-21 for lending-new-v3.html's benchmark INSIGHT panel rank card — Figma 40000256:5411's #fcfcfc fill has no exact match on the existing scale (closest is --rd-surface-raised #ffffff, one bit off); the card is a visibly tinted sub-surface sitting inside a white .rd-case-card, so it gets its own token rather than reusing --rd-surface-raised. */ --rd-panel-tint: #fcfcfc; /* Added 2026-08-20 — market-share bar, Figma 40000256:5391 literal hex, case-study-framework.html only (`.rd-market.is-figma`, below). NOT applied to the base `.rd-market-seg`/`.rd-market-sw` classes lending-new-v2.html also uses: that page's bar is deliberately ink-opacity only, a documented constraint ("the page has exactly two hues") this page doesn't share. A 4-way categorical legend is exactly the "genuinely needs a new colour" case, same reasoning as --rd-accent-yellow above. --rd-market-subject reuses Figma's bar segment colour (#cba377), not its legend swatch colour — Figma's own legend swatch for "HD Saison" is #8ab6a6, identical to the FE Credit swatch right above it, which the first pass at this page's header comment already flagged as an internal inconsistency in the source file. Repeating that mistake would make the legend ambiguous between two different lenders; using the bar's own colour for both the segment and its legend key does not. */ --rd-market-a: #8ab6a6; /* FE Credit */ --rd-market-b: #d35353; /* Home Credit */ --rd-market-subject: #cba377; /* HD Saison */ --rd-market-rest: #d8d6d2; /* the other 13 */ /* Healthcare §04 MoSCoW swatches. Must reuses --rd-market-b (#d35353). */ --rd-moscow-should: #27fad4; --rd-moscow-could: #a8cfff; --rd-moscow-wont: #afafe4; /* Added 2026-08-21 — "Business pain point" numbered chips, Figma 40000298:868 (lending-new-v3.html only). No token on the type/colour ladder covers this orange; the sibling "Business goal" chips reuse --rd-primary instead (Figma #0067bd, one digit off #01679c — same documented substitution the outcomes card already makes). */ --rd-pain-chip: #ea6800; /* 5 Cs levels, C1 Cognizance → C5 Collaboration (customer-engagement.html §05 only: diagram chips and the staircase rows). C1–C3 are the hexes in public/ce_collaboration.png; C4 and C5 follow Hao's 2026-09-15 reference. */ --rd-5c-1: #166534; --rd-5c-2: #4a3aff; --rd-5c-3: #ea6800; --rd-5c-4: #e2c14f; --rd-5c-5: #4aa3e0; /* Audit Findings severity colours (customer-engagement-v3.html §05 only). Approximated from the reference screenshot Hao pasted 2026-08-25 (a four-circle severity cluster + accordion) — NOT pulled from a live Figma node, since none was open/linked for this specific graphic (Hao's call, same session: hand-build the illustration rather than block on a Figma export). Reused by both the SVG bubble cluster fills and .rd-case-num-chip's is-critical/is-notable/is-attention/is-minor below, so there is one place to retune them if a real export ever replaces this. */ --rd-severity-critical: #c94a3f; --rd-severity-notable: #e0932e; --rd-severity-attention: #3f74b3; --rd-severity-minor: #4f7d3a; /* Added 2026-09-01 for the "Design-in-the-Loop" case-study diagram (case-studies/_preview-design-in-the-loop.html) — a git-graph with more categorical lanes (main/dev/feature/concept/components/tokens) than the existing --rd-market and --rd-severity ramps cover. main reuses --rd-ink-muted, dev reuses --rd-primary, the AI/concept lane reuses --rd-pain-chip, and the tokens lane reuses --rd-market-a — only the three genuinely new hues below were added, same check-first-add-only- if-nothing-fits bar as --rd-accent-yellow and --rd-pain-chip above. */ --rd-diagram-feature: #6d5fd1; /* feature-branch lane */ --rd-diagram-components: #0e8e7d; /* design/components lane */ --rd-diagram-concept-dead: #a08363; /* an abandoned concept-branch lane */ /* --------------------------------------------------------------------- TYPE SYSTEM — ALIASES ONLY. Do not put literal values back here. These used to be declared with hardcoded values in this file, which made redesign.css the de facto source of truth while css/styles/tokens.css — the file that is actually named "tokens" and is imported by every page — had no type scale at all. The values now live in tokens.css and this block just points at them, so home, about, healthcare and the v3 case studies all resolve to the same numbers and there is one place to change them. Every `var(--rd-fs-*)` / `var(--rd-fw-*)` / `var(--rd-lh-*)` reference below is untouched and resolves exactly as before — this is a rename, not a restyle. tokens.css is imported by style.css, which every page loads before this file. --------------------------------------------------------------------- */ --rd-font: var(--font-ui); --rd-font-wordmark: var(--font-wordmark); /* Added 2026-09-01 alongside --rd-diagram-* above — the git-graph diagram sets branch names and commit messages in a monospace face (git-log convention); nothing on the existing scale covers that. */ --rd-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; --rd-lh-prose: var(--lh-prose); --rd-lh-tight: var(--lh-tight); --rd-lh-heading: var(--lh-heading); --rd-measure: var(--measure); --rd-fs-xs: var(--fs-xs); --rd-fs-sm: var(--fs-sm); --rd-fs-md: var(--fs-md); --rd-fs-lg: var(--fs-lg); --rd-fs-xl: var(--fs-xl); --rd-fs-2xl: var(--fs-2xl); --rd-fs-3xl: var(--fs-3xl); --rd-fs-4xl: var(--fs-4xl); --rd-fw-body: var(--fw-body); --rd-fw-heading: var(--fw-heading); --rd-fw-emphasis: var(--fw-emphasis); --rd-shadow-nav: 0px 4px 2px rgba(224, 224, 224, 0.25); --rd-shell: 1440px; /* About §6 row height — Figma 40000079:7381. One value drives both the carousel and the Strava/Spotify column so they can never drift apart. */ --rd-activities-h: 403px; /* Shared floor for BOTH activity cards. The number comes from Spotify, whose payload is fixed (162px of content + 32 padding + 2 border) — but it is applied to Strava too so the two cards are level whenever Strava has little or no data. Strava grows past it once activities arrive; Spotify never does. Renamed from --rd-spotify-h on 2026-08-13 when it stopped being Spotify-specific. */ --rd-activity-min-h: 196px; /* About §2 work card height. Fixed so switching year tabs never reflows the page; sized to hold the head plus 4 collapsed bullets. */ --rd-work-h: 420px; /* About §2 sticky line. The heading and the cards share it so the timeline stays top-aligned with the heading once both are pinned. js/journey.js reads this value rather than duplicating it. */ --rd-journey-top: 60px; /* Trailing room under the last card. A sticky element cannot be pushed past its containing block's bottom edge, and the last card's bottom IS the list's bottom — so without this it can never reach the sticky line, and it alone sits low while the other pills are docked. */ --rd-journey-tail: 240px; /* Height of the bottom-up fade over the desktop card stack. One knob — the gradient reads as "half the screen dissolving into the background", so it is expressed in vh rather than px and follows the window. */ --rd-journey-fade-h: 50vh; /* The landing motion, in one place. js/journey.js reads both and runs the card's rise with them, and .rd-work-tag transitions the pill with them, so the card and its year pill can never drift out of step. Slower and gentler than the old 420ms/cubic-bezier(0.22, 1, 0.36, 1): the card now travels most of a screen rather than closing a 24px gap, and that curve is so front-loaded it covered 90% of the distance in the first sixth of the time — which read as a snap, not a rise. */ --rd-journey-land: 640ms; --rd-journey-land-ease: cubic-bezier(0.33, 1, 0.68, 1); /* How far below the card in front the next one waits before it commits. js/journey.js reads it. The two failure modes it sits between: at 0 the cards touch and the incoming one reads as having been parked there all along; at a full screen down the gap under the front card becomes a void (Hao, 2026-09-16). This is enough separation to read as "arriving", and deep enough into the bottom fade to show as a ghost rather than a card. */ --rd-journey-hold-gap: 140px; } /* Theme contract: every page's carries data-theme="light" or "dark", and theme values are keyed on that attribute, never on a class or on prefers-color-scheme alone. Only light exists today. */ :root[data-theme="light"] { color-scheme: light; } /* Shared page column */ .rd-shell { width: 100%; max-width: var(--rd-shell); margin-inline: auto; } /* js/script.js injects the nav and footer into these placeholders. Both sit inside `align-items: center` flex columns, so without an explicit width they shrink to their content and the bar collapses. */ #nav-placeholder, #footer-placeholder, .rd-nav-outer, .rd-footer-outer { width: 100%; flex: 0 0 auto; } /* ------------------------------------------------------ Shared nav shell - */ /* Global — templates/nav.html renders on every page. */ .rd-nav-outer { padding-inline: 40px; } /* Scroll-aware reveal. `position: sticky` cannot do this here: `html` in style.css sets `overflow-x: hidden`, and per spec a non-`visible` `overflow-x` with no explicit `overflow-y` resolves the latter to `auto` — which makes `` an explicit scroll container and silently breaks `position: sticky` on descendants (confirmed live: computed style read `position: sticky`, but the box still tracked `scrollY` 1:1 instead of sticking). So js/script.js flips `.rd-nav-outer` from its default static flow position straight to `position: fixed` once the reader has scrolled past the bar's own height, inserting a same-height spacer in its place so nothing reflows. Below that threshold nothing here fires — the top of the page is untouched. */ .rd-nav-outer.rd-nav-fixed { position: fixed; top: 0; left: 0; right: 0; z-index: 500; transform: translateY(0); transition: transform 0.3s ease; } .rd-nav-outer.rd-nav-fixed.rd-nav-hidden { transform: translateY(-100%); } /* 769px and up: the pinned pill floats 24px clear of the viewport top instead of sitting flush against it (Hao's call) — the gutter added at .rd-nav-outer below already lines its left/right edges up with the content grid; this is the same idea on the fourth side. ≤768 keeps the full-bleed top:0 bar, untouched. */ @media (min-width: 769px) { .rd-nav-outer.rd-nav-fixed { top: 24px; } /* translateY(-100%) above is relative to the bar's own height, not its `top` — with top now 24px instead of 0, that alone left a 24px sliver of the bar's bottom edge inside the viewport once "hidden". Push it up by that same 24px on top of the -100%. Same specificity as the rule above (three classes each), so it has to come after in source order to win — that's why this block sits below it, not above. */ .rd-nav-outer.rd-nav-fixed.rd-nav-hidden { transform: translateY(calc(-100% - 24px)); } } .rd-nav-outer.rd-nav-peek .rd-nav { background-color: var(--rd-surface-raised); box-shadow: var(--rd-shadow-nav); } /* The mobile full-screen menu (`.rd-nav-links`, ≤768, `position: fixed; inset: 0`) needs the viewport as its containing block. A `transform` on this ancestor would hijack that — same failure mode the ≤768 block below already avoids by zeroing `.rd-nav`'s backdrop-filter. Scroll is locked while the menu is open (`body.nav-open` below), so nothing depends on the reveal transform at that moment anyway. */ body.nav-open .rd-nav-outer { transform: none; } /* The nav is injected INSIDE .rd-hero-section / .rd-about-hero, which already carry the 40px gutter — so the bar was inset twice and the wordmark sat at x=104 while the hero headline sat at x=64. The ≤768 block solves the same double-inset with a negative margin; above that, dropping the nav's own gutter is enough. Scoped to ≥769 so the mobile fix is untouched. */ @media (min-width: 769px) { .rd-hero-section .rd-nav-outer, .rd-about-hero .rd-nav-outer, /* .rd-case-hero joined this list once it gained the 40px page gutter — the case-study nav is injected inside it, so it was inset twice and the wordmark sat at 104px while the case title sat at 64px. */ .rd-case-hero .rd-nav-outer { padding-inline: 0; } /* The rule above only cancels the double-inset for the bar's normal flow position at the top of the page. Once js/script.js adds .rd-nav-fixed, .rd-nav-outer switches to `position: fixed; left: 0; right: 0` (further up this file) and stops being visually inside the hero section's padded box at all — so the same descendant selector zeroing its padding now ran the pinned bar edge to edge instead, with .rd-nav's 16px border-radius cutting rounded notches into a bar that had no side gutter left to carve them from. Content — logo, links, button — has to stay inside the page grid even while pinned (Hao's call), so the pinned bar gets its 40px gutter back here, same as the hero content behind it. Equal specificity to the rule above (two classes each), so this has to come after it in source order to win. Scoped ≥769: mobile's pinned nav is deliberately full-bleed (see the ≤768 block), untouched by this. */ .rd-nav-outer.rd-nav-fixed { padding-inline: 40px; } } /* On the 2021 pages the placeholder itself carries Bootstrap's `.container` (`