/* ============================================================ SCALES — non-color, non-type design values. tokens.css owns COLOR. typography.css owns TYPE. This file owns everything else the components need (spacing, layout, radius, motion, tracking) plus two clearly-marked temporary BRIDGES. Everything here was audited out of the old global.css; nothing here overlaps tokens.css/typography.css. ============================================================ */ :root { /* ── Spacing (rem, 16px base) ── */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* ── Layout ── */ --max-width: 1200px; --gutter: clamp(1.25rem, 5vw, 2.5rem); /* ── Radius ── */ /* Radius system — only three in use: --radius-sm 4px small elements (keycaps, highlights, badges) --radius-lg 16px visuals and panels (cards, images, palette) --radius-pill buttons, tags, chips */ --radius-sm: 4px; --radius-md: 8px; /* legacy — avoid in new work */ --radius-lg: 16px; --radius-card: 6px; /* project-card / hero image corner */ --radius-pill: 999px; /* ── Motion ── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --duration-fast: 200ms; --duration-base: 400ms; --duration-slow: 700ms; /* ── Letter-spacing (uppercase labels, nav, buttons) ── */ --tracking-wide: 0.04em; --tracking-wider: 0.08em; } /* ============================================================ BRIDGE 1 — legacy variable aliases. The accessibility toolbar (a11y-bar.css/js) is carried over verbatim from the old site and still references the old variable names. These aliases point those names at the new token system so the toolbar works untouched. Remove this block once the toolbar is retokenized. ============================================================ */ :root { --color-bg: var(--color-bg-page); --color-text: var(--color-text-primary); --color-muted: var(--color-text-secondary); --color-accent: var(--accent-600); --color-border: var(--border-accent); --color-white: #ffffff; --font-body: var(--font-sans); --text-xs: var(--font-size-xs); } /* ============================================================ BRIDGE 2 — TEMPORARY per-project card accents. The homepage cards are tinted per project. The real per-project color system (Custimoo, Propbinder, Cloud Factory, Osmose) is NOT defined yet — these are the old hand-picked values, kept only so the homepage renders correctly. REPLACE this block when the per-project scales are delivered. ============================================================ */ :root { --color-custimoo: #0D9278; /* large text only */ --color-custimoo-ui: #0A7A67; /* small text, ~4.6:1 */ --color-propbinder: #6B5FF5; /* large text only */ --color-propbinder-ui: #5248D8; /* small text, ~5.5:1 */ --color-cloud-factory: #6058C2; --color-accutics: #4D6FFA; /* large text only (~3.9:1 on its page bg) */ --color-accutics-ui: #3552CC; /* small text, ~6:1 */ --color-pfe: #006970; } /* ============================================================ HOMEPAGE (new Figma scroll design) — values taken straight from the design that the current token palette can't yet express (warm-neutral card chrome, pure-grey card text, the per-project metric-chip tint). Pull these into tokens.css / the per-project system when those are defined. Hero colors and the "edl" highlight already map cleanly to real tokens. ============================================================ */ :root { /* Left/right edge of the 1200px content column (same container as the project pages): logo, hero text, card row, search pill and bottom bar all align on it. 160px at 1440 wide, the gutter on small screens. */ --home-hero-pad-x: max(var(--gutter), calc((100vw - var(--max-width)) / 2 + var(--gutter))); /* Shared page h1 — homepage statement AND project titles use the same size. 40px from ~1180px wide, scales down to 30px. Not on the token scale (36 max). */ --h1-size: clamp(30px, 3.4vw, 40px); --home-hero-size: var(--h1-size); /* Hero column: no extra cap — --home-hero-pad-x already places content on the shared 1200px column (kept as a hook for .hero__container / the bar). */ --home-max-width: none; /* Dot grid */ --home-dot-pitch: 48px; --home-dot-size: 2.5px; /* Card chrome */ /* Sized so 2.5 cards show from the content edge to the right edge of the screen — the half-cut third card says the row scrolls. On short screens the height wins: the 16:9 visual shrinks so the caption and metrics stay above the bottom bar (~560px of heading, caption and bar around it). */ --home-card-gap: var(--space-8); --home-card-visible: 2.5; --home-card-width: clamp(280px, min( calc((100vw - var(--home-hero-pad-x) - 2 * var(--home-card-gap)) / var(--home-card-visible)), calc((100vh - 560px) * 16 / 9) ), 760px); --home-card-radius: 16px; --home-card-border: #ECE5DA; /* warm neutral — no token equivalent yet */ --home-card-shadow: 0 10px 15px -3px rgba(20, 10, 14, 0.06), 0 4px 6px -4px rgba(20, 10, 14, 0.05); --home-card-label: #636363; /* pure grey — token neutrals are green-tinted */ --home-card-desc: #3F3F3F; /* Metric chip — per-project tint (stub = Cloud Factory indigo) */ --home-chip-bg: #DFDCEF; --home-chip-text: #06322C; /* Bottom command bar (exact values from Figma node 19:216783) */ --bar-bg: #FDECF3; /* pale pink bar */ --bar-border: var(--accent-300); /* #FCCFE2 dividers/top border */ --key-bg: #FEF1F6; /* keycap fill */ --key-text: var(--color-text-primary); /* #0C2A1C serif letter */ } /* ============================================================ TINTED PAGES — secondary text a step darker. Pages now sit on a visible 7% project/accent tint (her call). The token's text-secondary (neutral-500 #717171) drops under 4.5:1 there, so on tinted pages it is mixed 20% toward text-primary (≈5.3:1). tokens.css is untouched — this only re-points the variable on . ============================================================ */ body.page-home, body.page-case { --color-text-secondary: color-mix(in srgb, var(--neutral-500) 80%, var(--neutral-800)); }