/* ========================================================= case-study-page — single entry point for all CSS a case study page needs. A new case study links only this file (plus the fonts in ). BUNDLED FILE — this is a flat concatenation (no @imports, which load serially and delay first render). If any source file below changes, regenerate by concatenating in this exact order: tokens/tokens.css icons/icons.css components/arrow-button/arrow-button.css components/copy-button/copy-button.css components/app-bar/app-bar.css components/tag/tag.css components/case-study-header/case-study-header.css components/case-study-details/case-study-details.css components/lightbox/lightbox.css layouts/case-study/case-study.css ========================================================= */ /* ========================================================= Tokens Primitives (colour, spacing) → Semantics (role-based). Semantics always reference primitives via var(), never raw values. ========================================================= */ :root { /* ---------- Primitives: Colour ---------- */ /* Radix Red — light, solid */ --red-1: #fffcfc; --red-2: #fff7f7; --red-3: #feebec; --red-4: #ffdbdc; --red-5: #ffcdce; --red-6: #fdbdbe; --red-7: #f4a9aa; --red-8: #eb8e90; --red-9: #e5484d; --red-10: #dc3e42; --red-11: #ce2c31; --red-12: #641723; /* Radix Gray — light, solid */ --gray-1: #fcfcfc; --gray-2: #f9f9f9; --gray-3: #f0f0f0; --gray-4: #e8e8e8; --gray-5: #e0e0e0; --gray-6: #d9d9d9; --gray-7: #cecece; --gray-8: #bbbbbb; --gray-9: #8d8d8d; --gray-10: #838383; --gray-11: #646464; --gray-12: #202020; /* Pure black — the only use is the modal scrim (see --color-overlay). Not a Radix step; kept separate from the gray scale, which bottoms out at #202020. */ --black: #000000; /* Radix Blue — light, solid. Brought in for the keyboard focus ring. */ --blue-1: #fbfdff; --blue-2: #f4faff; --blue-3: #e6f4fe; --blue-4: #d5efff; --blue-5: #c2e5ff; --blue-6: #acd8fc; --blue-7: #8ec8f6; --blue-8: #5eb1ef; --blue-9: #0090ff; --blue-10: #0588f0; --blue-11: #0d74ce; --blue-12: #113264; /* ---------- Primitives: Spacing ---------- */ /* Carbon v11 spacing scale — non-linear geometric progression. */ --spacing-01: 0.125rem; /* 2px */ --spacing-02: 0.25rem; /* 4px */ --spacing-03: 0.5rem; /* 8px */ --spacing-04: 0.75rem; /* 12px */ --spacing-05: 1rem; /* 16px */ --spacing-06: 1.5rem; /* 24px */ --spacing-07: 2rem; /* 32px */ --spacing-08: 2.5rem; /* 40px */ --spacing-09: 3rem; /* 48px */ --spacing-10: 4rem; /* 64px */ --spacing-11: 5rem; /* 80px */ --spacing-12: 6rem; /* 96px */ --spacing-13: 10rem; /* 160px */ /* ---------- Primitives: Typography ---------- */ /* Families. */ --font-family-roboto: "Roboto", system-ui, sans-serif; --font-family-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace; /* Carbon type scale — productive + expressive (steps 01–13). */ --type-scale-01: 0.75rem; /* 12px */ --type-scale-02: 0.875rem; /* 14px */ --type-scale-03: 1rem; /* 16px */ --type-scale-04: 1.125rem; /* 18px */ --type-scale-05: 1.25rem; /* 20px */ --type-scale-06: 1.5rem; /* 24px */ --type-scale-07: 1.75rem; /* 28px */ --type-scale-08: 2rem; /* 32px */ --type-scale-09: 2.25rem; /* 36px */ --type-scale-10: 2.625rem; /* 42px */ --type-scale-11: 3rem; /* 48px */ --type-scale-12: 3.375rem; /* 54px */ --type-scale-13: 3.75rem; /* 60px */ /* Font weights. */ --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700; /* Line heights — numeric modifiers (percentage as unitless). */ --line-height-120: 1.2; --line-height-150: 1.5; --line-height-160: 1.6; --line-height-180: 1.8; /* ---------- Semantics: Colour ---------- */ /* Naming: [object]-[base]-[modifier] — here, color--. */ /* Every semantic references a primitive via var(), never a raw value. */ --color-background: var(--gray-2); --color-accent: var(--red-9); --color-font: var(--gray-12); --color-font-light: var(--gray-11); --color-border: var(--gray-4); --color-border-dark: var(--gray-5); /* Inline text links. Blue-9 is the closest match to the reference site's link blue (#09f); hover steps one scale darker for a pressed-in feel. */ --color-link: var(--blue-9); --color-link-hover: var(--blue-11); /* two scale steps darker than rest, for a clear hover shift */ /* Selected/active surface — e.g. the current nav tab's pill fill. Separate from --color-border-dark (also gray-5) to keep surface and border roles distinct. */ --color-background-selected: var(--gray-5); /* Modal scrim — black at 90%, dimming the page behind the lightbox. */ --color-overlay: color-mix(in srgb, var(--black) 90%, transparent); /* Inline code — subtle fill sitting one step above the page background. */ --color-background-code: var(--gray-3); /* ---------- Semantics: Border Radius ---------- */ /* No primitive layer — these four values are consumed directly by role. */ --border-radius-none: 0; --border-radius-image: 0.5rem; /* 8px — inline case-study images */ --border-radius-card: 1rem; /* 16px — cards, panels, modals */ --border-radius-feature: 2.5rem; /* 40px — feature blocks, callouts */ --border-radius-pill: 999px; /* buttons, tags, avatars */ /* ---------- Semantics: Focus ---------- */ /* Keyboard focus ring. Token setup + sizes mirror squareup.com; the colour resolves to Radix --blue-9 (#0090ff) — the closest match to Square's focus blue (#006aff). Width / style / offset / radius are fixed accessibility values with no primitive equivalent (same precedent as the 2px outlines already used per-component). */ --accessibility-focus-outline-color: var(--blue-9); --accessibility-focus-outline-width: 2px; --accessibility-focus-outline-style: solid; --accessibility-focus-outline-offset: 2px; --accessibility-focus-outline-border-radius: 5px; } /* ---------- Base ---------- */ /* Page-level defaults so unclassed text still gets Roboto and consistent rendering. Smoothing is applied here (not per utility class) so it cascades to every text element across every page. */ /* border-box everywhere: padding and borders sit inside an element's declared width, so the spacing tokens compose predictably (e.g. width:100% + padding doesn't overflow the viewport). Foundational to every component. */ *, *::before, *::after { box-sizing: border-box; } body { font-family: var(--font-family-roboto); color: var(--color-font); background: var(--color-background); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code { font-family: var(--font-family-mono); font-size: var(--type-scale-02); /* 14px */ background: var(--color-background-code); padding: var(--spacing-02) var(--spacing-03); /* 4px 8px */ border-radius: var(--border-radius-image); } /* Global keyboard-focus ring, token-driven (setup mirrors squareup.com). The :not(:active) guard keeps the ring off elements being actively clicked, so it reads as a keyboard affordance. Components may override with their own outline (currently the red --color-accent rings) — those win on source order, since their CSS loads after tokens.css. See a11y/a11y.md §1. */ :focus-visible:not(:active) { outline: var(--accessibility-focus-outline-width) var(--accessibility-focus-outline-style, solid) var(--accessibility-focus-outline-color); outline-offset: var(--accessibility-focus-outline-offset); border-radius: var(--accessibility-focus-outline-border-radius); } /* Honour reduced-motion globally — see a11y/a11y.md §7. Components keep their own short transitions; this neutralises them when the user opts out. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } } /* ---------- Semantics: Typography ---------- */ /* Utility classes composed from primitives. No raw values inside. */ .heading-01 { font-family: var(--font-family-roboto); font-size: var(--type-scale-13); font-weight: var(--font-weight-bold); line-height: var(--line-height-120); } .heading-02 { font-family: var(--font-family-roboto); font-size: var(--type-scale-08); font-weight: var(--font-weight-bold); line-height: var(--line-height-120); } .heading-03 { font-family: var(--font-family-roboto); font-size: var(--type-scale-06); font-weight: var(--font-weight-bold); line-height: var(--line-height-150); } .heading-04 { font-family: var(--font-family-roboto); font-size: var(--type-scale-05); font-weight: var(--font-weight-medium); line-height: var(--line-height-150); } .heading-05 { font-family: var(--font-family-roboto); font-size: var(--type-scale-02); font-weight: var(--font-weight-bold); line-height: var(--line-height-150); text-transform: uppercase; } .body-01 { font-family: var(--font-family-roboto); font-size: var(--type-scale-04); /* 18px */ font-weight: var(--font-weight-light); line-height: var(--line-height-150); } .body-02 { font-family: var(--font-family-roboto); font-size: var(--type-scale-03); font-weight: var(--font-weight-regular); line-height: var(--line-height-180); } .body-03 { font-family: var(--font-family-roboto); font-size: var(--type-scale-02); font-weight: var(--font-weight-regular); line-height: var(--line-height-160); } /* Heroicons outline, overridden to a 1px stroke. Apply .icon to any rendered Heroicons SVG. */ .icon { width: 1.5rem; /* 24px — Heroicons native size */ height: 1.5rem; stroke-width: 1; /* override Heroicons' 1.5 default */ stroke: currentColor; /* inherits text colour */ fill: none; /* explicit for outline style */ flex-shrink: 0; /* prevents collapse inside flex containers */ } /* ========================================================= arrow-button — directional navigation control. Apply to or