/* * Design tokens — the single source of every visual decision. * * The visual style is the "stack" redesign, after Paradigm and * Hummingbird: a warm paper ground, near-black ink, an editorial * serif for display (Instrument Serif), a quiet grotesque for body * (Inter), a monospace for every number, index, and key hint * (JetBrains Mono), thin line art, and exactly one accent — a * vermilion spent on kickers, active states, focus rings, hover * sweeps, and the lifted block of the isometric stack. No shadows, * no gradient washes — every color, font, spacing, radius, rule, and * motion constant in the page styles references a custom property * defined here, so a future restyle stays a swap, not a rebuild. * * Convention: every token is self-documenting via its name and the * comment blocks below. Add semantic tokens (not raw values) as the * app grows. */ :root { /* --------------------------------------------------------------- Color — primitive palette A warm paper ramp from ground to ink. Steps exist only where the design needs them; every text step passes 4.5:1 on the ground except gray-400, which is reserved for non-text lines. ---------------------------------------------------------------- */ --color-white: #ffffff; --color-paper-50: #faf9f6; --color-paper-100: #f2f1ed; --color-paper-200: #e4e2dc; --color-gray-300: #d3d1ca; --color-gray-400: #b9b7af; --color-gray-500: #5e5d57; --color-gray-600: #45443f; --color-gray-900: #141414; /* The one accent — vermilion, darkened to hold 4.5:1 for small text on the paper ground. */ --color-vermilion: #c2361e; /* --------------------------------------------------------------- Color — semantic aliases Page styles reference ONLY these, never the primitives above. ---------------------------------------------------------------- */ --color-bg-page: var(--color-paper-100); --color-bg-surface: var(--color-paper-100); --color-bg-raised: var(--color-paper-50); --color-bg-subtle: var(--color-paper-200); --color-bg-hover: var(--color-paper-200); --color-bg-inverse: var(--color-gray-900); --color-text-primary: var(--color-gray-900); --color-text-secondary: var(--color-gray-600); --color-text-muted: var(--color-gray-500); --color-text-inverse: var(--color-paper-100); --color-text-inverse-muted: var(--color-gray-400); --color-accent: var(--color-vermilion); --color-accent-strong: var(--color-vermilion); --color-accent-contrast: var(--color-white); /* The lifted block's top face: a whisper of the accent on paper. */ --color-accent-tint: color-mix(in srgb, var(--color-vermilion) 16%, var(--color-paper-50)); --color-success: var(--color-gray-600); --color-warning: var(--color-accent); --color-danger: var(--color-gray-600); /* Rules: ink for structure (section heads, the marquee band), a soft rule between list rows. */ --color-border: var(--color-gray-300); --color-border-strong: var(--color-gray-900); /* Line art for the stack: ink at rest, faded behind a lifted block. */ --color-line: var(--color-gray-900); --color-line-faded: var(--color-gray-400); --color-grid: var(--color-paper-200); --color-transparent: transparent; /* --------------------------------------------------------------- Typography Instrument Serif for display (one weight, 400), Inter for body, JetBrains Mono for data and key hints. All three load from Google Fonts in the HTML head; the stacks fall back to system faces so the page still renders offline. ---------------------------------------------------------------- */ --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --font-display: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; --font-size-2xs: 0.6875rem; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.375rem; --font-size-2xl: 1.75rem; --font-size-3xl: 2.125rem; /* Display scale — fluid, serif only. */ --font-size-wordmark: clamp(1.75rem, 1rem + 2.5vw, 3rem); --font-size-stat: clamp(3rem, 5vw, 4rem); --font-size-display: clamp(3rem, 7vw, 5rem); --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-display: 0.92; --line-height-tight: 1.15; --line-height-normal: 1.5; --line-height-relaxed: 1.625; --letter-spacing-display: -0.02em; --letter-spacing-caps: 0.14em; /* --------------------------------------------------------------- Spacing scale — 4px base grid. ---------------------------------------------------------------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ --space-9: 6rem; /* 96px */ --page-max-width: 82.5rem; --tap-target: 2.75rem; /* 44px — every control's minimum height */ /* --------------------------------------------------------------- Borders and radii ---------------------------------------------------------------- */ --border-width-thin: 1px; --border-width-thick: 2px; --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-full: 9999px; /* --------------------------------------------------------------- The isometric stack — one block per category, its height the number of companies listed in that category. ---------------------------------------------------------------- */ --stack-cell: 5.25rem; /* block footprint (84px) */ --stack-gap: 1rem; /* gap between footprints */ --stack-unit: 0.275rem; /* height per company (4.4px) */ --stack-lift: 1.625rem; /* how far a highlighted block rises */ --stack-stage-height: 35rem; --stack-stage-height-compact: 27.5rem; --stack-scale-compact: 0.72; --stack-grid-size: 1.5625rem; /* --------------------------------------------------------------- Profile panel — the company page, a sheet beside the directory ---------------------------------------------------------------- */ --panel-width: 44rem; --panel-label-width: 10rem; /* --------------------------------------------------------------- Directory bands ---------------------------------------------------------------- */ --band-aside-width: 16rem; /* heading column beside the list */ --company-column-width: 14rem; /* target width of a name column */ --color-panel-scrim: rgb(20 20 20 / 0.35); /* --------------------------------------------------------------- Search & filter toolbar ---------------------------------------------------------------- */ --filter-dim-opacity: 0.28; /* --------------------------------------------------------------- Motion --transition-* interaction and panel-entrance timing --ease-out-soft the shared deceleration curve --motion-reveal one-shot scroll-reveal duration --motion-stagger per-row delay in the profile panel stagger --motion-intro hero line reveals and the stack's rise --motion-spin one full turn of the stack (loops) --motion-marquee one pass of the name band (loops) --motion-count-up the hero's company count-up, ms (read by JS) Loops are paused on hover and switched off under reduced motion. ---------------------------------------------------------------- */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; --transition-slow: 500ms ease; --ease-out-soft: cubic-bezier(0.2, 0.75, 0.1, 1); --motion-reveal: 700ms; --motion-stagger: 50ms; --motion-intro: 1100ms; --motion-spin: 90s; --motion-marquee: 140s; --motion-count-up: 1600; --motion-share: 1200ms; --cursor-dot-size: 0.5rem; } /* * Reduced motion: interaction speeds collapse to near-instant here * so nothing feels laggy, just still. main.css switches its own * animation declarations off in the same media query. */ @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0ms; --transition-normal: 0ms; --transition-slow: 0ms; --motion-reveal: 0ms; --motion-stagger: 0ms; --motion-intro: 0ms; --motion-count-up: 0; --motion-share: 0ms; } }