jwright
65ba1ec7dc
Chakra Petch site-wide (300-700) + JetBrains Mono variable, all self-hosted (CSP zero-external holds). Token layer gains the mock-exact text tiers, glass panel, cyan-tinted borders, glows, tighter radii; light 'blueprint' variants included. New Constellation.astro: the six real nodes as IC chips on dual-trace PCB paths (cyan out / magenta back, dasharray packets), radar ring on the cave hub, vias at bends - pure SVG + scoped CSS keyframes, full reduced-motion fallback. Hero rebuilt: scrim stack + masked grid over the board art, two-line gradient nameplate, typing bar cycling six real fleet facts via the external site.js (facts from src/data/fleet.ts), scroll indicator. Facts wrap, never clip.
134 lines
4.4 KiB
CSS
134 lines
4.4 KiB
CSS
/* Design tokens — theme the whole site from here.
|
||
Dark-first: :root carries the dark palette; [data-theme="light"] overrides. */
|
||
|
||
:root {
|
||
color-scheme: dark;
|
||
|
||
/* Surfaces */
|
||
--bg: #090c14;
|
||
--bg-soft: #0c1019;
|
||
--surface: #11161f;
|
||
--surface-2: #161d29;
|
||
--border: rgba(255, 255, 255, 0.08);
|
||
--border-strong: rgba(255, 255, 255, 0.16);
|
||
|
||
/* Text */
|
||
--text: #e7edf4;
|
||
--text-dim: #9aa7b8;
|
||
--text-faint: #61708a;
|
||
|
||
/* Accent — electric cyan→magenta, merged with the Bat-Computer board */
|
||
--accent: #3fbaf5; /* cyan-blue (the board's left side) */
|
||
--accent-2: #e879f9; /* magenta (the board's right side) */
|
||
--accent-strong: #1f9fe0;
|
||
--accent-ink: #04161f; /* text on an accent fill */
|
||
--accent-dim: rgba(63, 186, 245, 0.12);
|
||
--accent-line: rgba(63, 186, 245, 0.3);
|
||
--accent-glow: rgba(63, 186, 245, 0.32);
|
||
|
||
/* Grid / topology motif */
|
||
--grid-line: rgba(148, 163, 184, 0.06);
|
||
|
||
/* Fonts — ALL self-hosted (zero external requests). Facelift pairing:
|
||
Chakra Petch (300–700) is the site-wide face, display AND body;
|
||
JetBrains Mono carries the terminal register (nav, chips, eyebrows, receipt). */
|
||
--font-sans: "Chakra Petch", ui-sans-serif, system-ui, -apple-system,
|
||
"Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||
--font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", "SF Mono",
|
||
Menlo, Consolas, "Liberation Mono", monospace;
|
||
--font-display: "Chakra Petch", var(--font-sans);
|
||
|
||
/* Fluid type scale */
|
||
--step--1: clamp(0.8rem, 0.76rem + 0.2vw, 0.9rem);
|
||
--step-0: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
|
||
--step-1: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);
|
||
--step-2: clamp(1.4rem, 1.2rem + 1vw, 1.85rem);
|
||
--step-3: clamp(1.75rem, 1.4rem + 1.7vw, 2.6rem);
|
||
--step-4: clamp(2.2rem, 1.6rem + 3vw, 3.6rem);
|
||
--step-5: clamp(2.6rem, 1.8rem + 4.5vw, 4.6rem);
|
||
|
||
/* Spacing scale */
|
||
--space-1: 0.25rem;
|
||
--space-2: 0.5rem;
|
||
--space-3: 0.75rem;
|
||
--space-4: 1rem;
|
||
--space-5: 1.5rem;
|
||
--space-6: 2rem;
|
||
--space-7: 3rem;
|
||
--space-8: 4.5rem;
|
||
--space-9: 7rem;
|
||
|
||
/* Layout — facelift geometry: tighter radii (3–4 chips, 6 buttons, 8–12 cards) */
|
||
--measure: 68rem;
|
||
--radius: 12px;
|
||
--radius-sm: 8px;
|
||
--radius-btn: 6px;
|
||
--radius-chip: 4px;
|
||
--ring: 0 0 0 1px var(--border);
|
||
--shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
|
||
--ease: cubic-bezier(0.22, 1, 0.36, 1);
|
||
|
||
/* Facelift: text tiers (mock-exact) */
|
||
--text-strong: #eef5fd; /* headings */
|
||
--text-body-strong: #dbe6f4;
|
||
/* --text (#e7edf4) / --text-dim / --text-faint keep existing consumers working */
|
||
--text-secondary: #8fa2bd;
|
||
--text-label: #7e8ba1;
|
||
|
||
/* Facelift: glass panels + cyan-tinted borders + glows */
|
||
--panel: rgba(13, 19, 34, 0.72);
|
||
--panel-solid: #0d1322;
|
||
--panel-blur: blur(10px);
|
||
--border-accent: rgba(63, 186, 245, 0.14);
|
||
--border-accent-hover: rgba(63, 186, 245, 0.5);
|
||
--border-magenta: rgba(232, 121, 249, 0.18);
|
||
--glow-num: 0 0 12px rgba(63, 186, 245, 0.6);
|
||
--glow-card: 0 0 32px rgba(63, 186, 245, 0.14);
|
||
--glow-card-magenta: 0 0 32px rgba(232, 121, 249, 0.12);
|
||
}
|
||
|
||
[data-theme="light"] {
|
||
color-scheme: light;
|
||
|
||
--bg: #f6f8fb;
|
||
--bg-soft: #ffffff;
|
||
--surface: #ffffff;
|
||
--surface-2: #eef1f6;
|
||
--border: rgba(2, 6, 23, 0.1);
|
||
--border-strong: rgba(2, 6, 23, 0.18);
|
||
|
||
--text: #0e1726;
|
||
/* Darker secondary/tertiary text — the body sits over the (light) board image,
|
||
so these need more contrast than on a flat page to stay readable. */
|
||
--text-dim: #2c3a4d;
|
||
--text-faint: #46546a;
|
||
|
||
/* Accent — same electric cyan→magenta as dark, dropped in value for contrast
|
||
on the light sandstone board. */
|
||
--accent: #0c8fce; /* deeper cyan reads on white */
|
||
--accent-2: #c026d3; /* magenta partner */
|
||
--accent-strong: #0a72a6;
|
||
--accent-ink: #f2fbff;
|
||
--accent-dim: rgba(12, 143, 206, 0.1);
|
||
--accent-line: rgba(12, 143, 206, 0.32);
|
||
--accent-glow: rgba(192, 38, 211, 0.16);
|
||
|
||
--grid-line: rgba(15, 23, 42, 0.05);
|
||
|
||
--shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
|
||
|
||
/* Facelift tiers, blueprint-adjusted for light */
|
||
--text-strong: #0b1422;
|
||
--text-body-strong: #1d2a3d;
|
||
--text-secondary: #3d4d63;
|
||
--text-label: #4a5a72;
|
||
--panel: rgba(255, 255, 255, 0.78);
|
||
--panel-solid: #ffffff;
|
||
--border-accent: rgba(12, 143, 206, 0.2);
|
||
--border-accent-hover: rgba(12, 143, 206, 0.55);
|
||
--border-magenta: rgba(192, 38, 211, 0.22);
|
||
--glow-num: 0 0 12px rgba(12, 143, 206, 0.35);
|
||
--glow-card: 0 0 32px rgba(12, 143, 206, 0.1);
|
||
--glow-card-magenta: 0 0 32px rgba(192, 38, 211, 0.08);
|
||
}
|