/* ============================================================ * Galith Parsec — colors_and_type.css * "Deep Space, with starlight." * * One ground (Deep Space). One text (Warm Starlight). * One brand (Galith Teal). Four semantic colors. * Each color carries exactly one meaning — and keeps it. * ============================================================ */ /* ---- Webfonts ---------------------------------------------- */ /* Space Grotesk — display + UI. Geometric with intentional * irregularities (the R, the numerals). * Space Mono — data only. Timestamps, IDs, coordinates, * scores. Numbers that are measured, not guessed. */ @import url('fonts.css'); /* self-hosted webfonts — DSGVO: no Google CDN */ :root { /* ============ FOUNDATION ============ */ --deep-space: #100D0A; /* canvas — never #000 */ --warm-starlight: #F8F3EA; /* text — never #fff */ /* Layered darks — for cards, panels, popovers. Each step * adds a hair of warmth so elevation is felt, not seen. */ --space-0: #100D0A; /* canvas */ --space-1: #16110D; /* sunken inset / wells */ --space-2: #1B1611; /* card resting */ --space-3: #221C17; /* card hover, panel */ --space-4: #2B231C; /* popover, modal */ --space-5: #352B22; /* dropdown items, raised */ /* ============ BRAND ============ */ --galith-teal: #098773; /* ★ PRIMARY · brand · active */ --galith-teal-50: #E6F4F1; --galith-teal-100: #B7E0D7; --galith-teal-200: #84CABA; --galith-teal-300: #4FB39B; --galith-teal-400: #1F9C82; --galith-teal-500: #098773; /* = galith-teal */ --galith-teal-600: #06715F; --galith-teal-700: #055A4B; --galith-teal-800: #034438; --galith-teal-900: #022D25; /* Teal tints for dark surfaces — translucent washes */ --teal-wash-12: rgba(9, 135, 115, 0.12); --teal-wash-20: rgba(9, 135, 115, 0.20); --teal-wash-32: rgba(9, 135, 115, 0.32); --teal-glow: 0 0 16px rgba(9, 135, 115, 0.45); --teal-glow-soft: 0 0 24px rgba(9, 135, 115, 0.28); --teal-glow-hard: 0 0 8px rgba(9, 135, 115, 0.85), 0 0 24px rgba(9, 135, 115, 0.45); /* ============ SEMANTIC ============ * Each color carries exactly one meaning. Never decorative. */ --nebula-cyan: #0599C2; /* NETWORK · routes, transit lines */ --solar-gold: #F2A827; /* DEMAND · flow, throughput */ --supernova-red: #E02D41; /* DISRUPTION · alerts, action req. */ --hydrogen-magenta: #C2447E; /* ANOMALY · hotspots, outliers */ --nebula-wash-12: rgba(5, 153, 194, 0.12); --solar-wash-12: rgba(242, 168, 39, 0.14); --supernova-wash-12: rgba(224, 45, 65, 0.14); --magenta-wash-12: rgba(194, 68, 126, 0.14); --nebula-glow: 0 0 14px rgba(5, 153, 194, 0.50); --solar-glow: 0 0 14px rgba(242, 168, 39, 0.50); --supernova-glow: 0 0 14px rgba(224, 45, 65, 0.55); --magenta-glow: 0 0 14px rgba(194, 68, 126, 0.50); /* ============ TEXT (all Warm Starlight, varied opacity) ============ */ --text-1: #F8F3EA; /* headings, key data */ --text-2: rgba(248, 243, 234, 0.78); /* body */ --text-3: rgba(248, 243, 234, 0.55); /* meta, labels */ --text-4: rgba(248, 243, 234, 0.32); /* placeholder, ghost */ --text-5: rgba(248, 243, 234, 0.18); /* hairline labels */ --text-on-teal: #F8F3EA; --text-on-gold: #100D0A; /* gold is bright — dark text on it */ --text-on-cyan: #F8F3EA; --text-on-red: #F8F3EA; --text-on-magenta: #F8F3EA; /* ============ STROKES / GRID ============ */ --stroke-1: rgba(248, 243, 234, 0.06); /* hairline / grid */ --stroke-2: rgba(248, 243, 234, 0.10); /* default */ --stroke-3: rgba(248, 243, 234, 0.18); /* emphasised */ --stroke-4: rgba(248, 243, 234, 0.32); /* selected outline */ --stroke-teal: rgba(9, 135, 115, 0.40); /* brand stroke */ --stroke-teal-soft: rgba(9, 135, 115, 0.22); --ring-focus: 0 0 0 2px rgba(9, 135, 115, 0.55), 0 0 16px rgba(9, 135, 115, 0.35); /* ============ SEMANTIC SURFACES ============ */ --bg-canvas: var(--space-0); --bg-surface: var(--space-2); --bg-raised: var(--space-3); --bg-overlay: var(--space-4); --bg-sunken: var(--space-1); --bg-accent: var(--teal-wash-12); /* selected row */ --bg-anomaly: var(--magenta-wash-12); --bg-disruption: var(--supernova-wash-12); /* ============ TYPOGRAPHY ============ */ --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif; --font-ui: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif; --font-data: 'Space Mono', ui-monospace, 'SFMono-Regular', monospace; /* Modular scale, snapped */ --fs-display: 56px; --fs-h1: 40px; --fs-h2: 28px; --fs-h3: 20px; --fs-h4: 16px; --fs-body: 14px; --fs-body-lg: 16px; --fs-meta: 12px; --fs-micro: 10px; --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.65; --tracking-display: -0.02em; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.18em; /* eyebrows are widely tracked */ --tracking-wordmark: 0.22em; /* PARSEC wordmark */ /* ============ SPACING (4 px base) ============ */ --sp-0: 0; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; /* ============ RADII ============ * Parsec is tight, instrument‑like. Smaller radii than the * old daylight system. */ --r-xs: 3px; /* chips, badges */ --r-sm: 5px; /* inputs, small buttons */ --r-md: 8px; /* default — cards, buttons */ --r-lg: 12px; /* prominent panels */ --r-xl: 16px; /* hero tiles */ --r-pill: 999px; --r-circle: 50%; /* ============ ELEVATION ============ * Dark theme. Elevation = a touch more warmth + a top‑edge * inner light. Avoid heavy drop shadows on a black canvas. */ --shadow-0: none; --shadow-1: inset 0 1px 0 rgba(248, 243, 234, 0.04), 0 1px 2px rgba(0, 0, 0, 0.6); --shadow-2: inset 0 1px 0 rgba(248, 243, 234, 0.06), 0 8px 24px rgba(0, 0, 0, 0.55); --shadow-3: inset 0 1px 0 rgba(248, 243, 234, 0.08), 0 16px 40px rgba(0, 0, 0, 0.6); --shadow-4: inset 0 1px 0 rgba(248, 243, 234, 0.10), 0 28px 64px rgba(0, 0, 0, 0.7); /* ============ MOTION ============ */ --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1); --ease-emphasis: cubic-bezier(0.32, 0.72, 0, 1); --ease-exit: cubic-bezier(0.4, 0.0, 1, 1); --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-4: 500ms; /* ============ CONSTELLATION PULSE — doctrine ============ * 3.4s breathing rhythm. APPLIED ONLY to live data points * — elements whose value reflects a real vehicle in motion. * Static / statistical elements DO NOT pulse. */ --pulse-duration: 3.4s; } /* ---- Base ----------------------------------------------- */ html, body { font-family: var(--font-ui); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--text-1); background: var(--bg-canvas); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ::selection { background: var(--galith-teal); color: var(--text-on-teal); } /* ---- Type utilities ------------------------------------- */ .gl-display, .gl-h1, .gl-h2, .gl-h3, .gl-h4 { font-family: var(--font-display); color: var(--text-1); text-wrap: pretty; font-weight: 500; } .gl-display { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); font-weight: 400; } .gl-h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: 400; } .gl-h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); font-weight: 500; } .gl-h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); font-weight: 500; font-family: var(--font-ui); } .gl-h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); font-weight: 600; font-family: var(--font-ui); } .gl-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--text-2); } .gl-body { font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--text-2); } .gl-meta { font-size: var(--fs-meta); line-height: var(--lh-normal); color: var(--text-3); } .gl-micro { font-size: var(--fs-micro); line-height: var(--lh-normal); color: var(--text-3); } .gl-eyebrow { font-family: var(--font-data); font-size: var(--fs-micro); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--galith-teal); font-weight: 700; } .gl-data { font-family: var(--font-data); font-weight: 400; font-feature-settings: "tnum" 1, "zero" 1; letter-spacing: 0.02em; } .gl-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* ---- Wordmark ------------------------------------------- */ /* PARSEC — backed by Galith * Always uppercase, Space Grotesk medium, wide tracked. * The Galith mark sits as a superscript endorser to the * upper‑right of the wordmark — never inline with it. */ .parsec-wordmark { font-family: var(--font-display); font-weight: 500; font-size: 1em; letter-spacing: var(--tracking-wordmark); text-transform: uppercase; color: var(--text-1); display: inline-flex; align-items: flex-start; gap: 0.18em; line-height: 1; } .parsec-wordmark__endorser { display: inline-block; width: 0.42em; height: 0.42em; margin-top: 0.06em; background: radial-gradient(closest-side, #14b59a 0%, var(--galith-teal) 55%, var(--galith-teal-800) 100%); border-radius: 50%; box-shadow: 0 0 0.5em rgba(9,135,115,0.45); flex-shrink: 0; } /* ---- Constellation Pulse -------------------------------- */ /* Apply .pulse to any element that represents a LIVE moving * vehicle. Statistical / historical elements must not carry * this class. The pulse runs at exactly 3.4s. */ @keyframes constellation-pulse { 0%, 100% { opacity: 0.55; box-shadow: 0 0 0 rgba(9, 135, 115, 0.0); transform: scale(0.94); } 50% { opacity: 1; box-shadow: 0 0 14px rgba(9, 135, 115, 0.55), 0 0 28px rgba(9, 135, 115, 0.25); transform: scale(1.04); } } .pulse { animation: constellation-pulse var(--pulse-duration) ease-in-out infinite; transform-origin: center; will-change: transform, opacity, box-shadow; } /* Per‑color pulse variants — paint the glow in the data's hue */ @keyframes pulse-cyan { 0%,100% { opacity: 0.6; box-shadow: 0 0 0 rgba(5,153,194,0); transform: scale(0.94); } 50% { opacity: 1; box-shadow: 0 0 12px rgba(5,153,194,0.6), 0 0 24px rgba(5,153,194,0.25); transform: scale(1.04); } } @keyframes pulse-gold { 0%,100% { opacity: 0.6; box-shadow: 0 0 0 rgba(242,168,39,0); transform: scale(0.94); } 50% { opacity: 1; box-shadow: 0 0 12px rgba(242,168,39,0.6), 0 0 24px rgba(242,168,39,0.25); transform: scale(1.04); } } @keyframes pulse-red { 0%,100% { opacity: 0.6; box-shadow: 0 0 0 rgba(224,45,65,0); transform: scale(0.94); } 50% { opacity: 1; box-shadow: 0 0 12px rgba(224,45,65,0.6), 0 0 24px rgba(224,45,65,0.25); transform: scale(1.04); } } @keyframes pulse-magenta { 0%,100% { opacity: 0.6; box-shadow: 0 0 0 rgba(194,68,126,0); transform: scale(0.94); } 50% { opacity: 1; box-shadow: 0 0 12px rgba(194,68,126,0.6), 0 0 24px rgba(194,68,126,0.25); transform: scale(1.04); } } .pulse--cyan { animation: pulse-cyan var(--pulse-duration) ease-in-out infinite; } .pulse--gold { animation: pulse-gold var(--pulse-duration) ease-in-out infinite; } .pulse--red { animation: pulse-red var(--pulse-duration) ease-in-out infinite; } .pulse--magenta { animation: pulse-magenta var(--pulse-duration) ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .pulse, .pulse--cyan, .pulse--gold, .pulse--red, .pulse--magenta { animation: none; } }