/* German Eiland -- "Feldstation" design system (BUILD-PACKET B1). * * Graphite instrument-panel language: flat panels, 1px hairline borders, * 4px corners, uppercase letterspaced stencil labels, a CSS-only dot-grid * backdrop, and the black/red/gold tricolor hairline as the sole brand * mark. System font stack ONLY -- no @font-face, no CDN, no bundled * images (tests/verify_gates.py gate_g5 asserts zero external asset * references and zero SRI attributes across the first-party tree; this * file ships zero url()/@import of anything but same-file selectors). * * Scope: linked by the pages this build owns -- index.html, /wallet/, * /voice/, /status/ -- ONLY. /shop/, /garage/, /skin/, /skins/, /admin/ * are other builders' territory and do not link this file; they keep * reading assets/shared.css's existing donor-derived tokens (--bone, * --accent, --glass, ...) completely untouched, so they render exactly * as before. This file uses its own --ge-* token namespace for that * reason -- it never redefines a --bone/--glass/--charcoal-* name shared.css * or those pages' own CSS already relies on. * * The sitewide topbar (assets/topbar.css, shared chrome injected by * topbar.js across every page including the ones this build does not * own) is deliberately left structurally untouched here too -- it picks * up the new default accent color for free once assets/theme.js's * DEFAULT_HEX changes, which reads as "the same site" without touching * chrome other builders' already-verified pages depend on. * * Forbidden by the build brief (do not reintroduce): numbered 01/02/03 * system cards, ember-orange glow gradients, cinematic-hero composition, * the Anton font. */ :root{ --ge-bg:#0c1013; --ge-bg-1:#12171c; --ge-panel:#161d24; --ge-panel-2:#1c242d; --ge-line:#28323c; --ge-line-2:#3a4653; --ge-text:#ecf1f5; --ge-dim:#9db0bf; --ge-faint:#6b7d8b; /* Wired to the live site-color picker: assets/theme.js writes --accent/ --accent-rgb onto :root on load and on every user selection. The fallback (used only before that script runs, or if it is absent) is the literal Eiland Gold value from the build brief, so first paint never shows the wrong hue. */ --ge-accent: var(--accent, #ffc247); --ge-accent-rgb: var(--accent-rgb, 255,194,71); --ge-accent-ink:#1a1205; --ge-ok:#43d17c; --ge-warn:#ff9d2e; --ge-danger:#ff5d5d; --ge-radius:4px; --ge-sans:"Segoe UI", Tahoma, Verdana, Arial, sans-serif; --ge-mono:"Cascadia Mono", Consolas, "SFMono-Regular", ui-monospace, Menlo, monospace; --ge-dot: rgba(157,176,191,0.12); --ge-shadow: 0 18px 44px -22px rgba(0,0,0,.75); } /* ── page base ───────────────────────────────────────────────────────── * Opt-in via body.ge-scope (set by every page this build owns) so this * file can be linked without side effects if it were ever accidentally * picked up elsewhere. Load ORDER in is shared.css, topbar.css, * THIS file, then the page's own CSS -- this file never redeclares * `padding-top` on body so topbar.css's fixed-nav clearance is untouched. */ html:has(body.ge-scope){ background:var(--ge-bg); } body.ge-scope{ color:var(--ge-text); font-family:var(--ge-sans); background-color:var(--ge-bg); background-image:radial-gradient(circle, var(--ge-dot) 1px, transparent 1.6px); background-size:26px 26px; background-attachment:fixed; } .ge-scope ::selection{ background:var(--ge-accent); color:var(--ge-accent-ink); } .ge-scope a{ color:var(--ge-accent); } .ge-scope a.ge-plain{ color:inherit; text-decoration:none; } /* ── tricolor hairline: the sole brand mark (schwarz-rot-gold), used * under the wordmark and as small corner ticks on panels ──────────────── */ .ge-hairline{ height:2px; background:linear-gradient(90deg,#000 0 33.34%,#dd0000 33.34% 66.67%,#ffce00 66.67% 100%); border-radius:1px; } .ge-tick{ width:22px; } /* ── stencil section labels ───────────────────────────────────────────── */ .ge-label{ display:flex; align-items:center; gap:8px; margin:0 0 12px; font-family:var(--ge-mono); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ge-dim); } .ge-label::before{ content:""; width:14px; height:2px; flex:0 0 auto; background:var(--ge-accent); } /* ── panel ─────────────────────────────────────────────────────────────── */ .ge-panel{ position:relative; background:linear-gradient(180deg, var(--ge-panel) 0%, var(--ge-bg-1) 100%); border:1px solid var(--ge-line); border-radius:var(--ge-radius); padding:22px; } .ge-panel-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 16px; } .ge-panel-head h2, .ge-panel-head h3{ margin:0; font-size:15px; font-weight:700; letter-spacing:.02em; color:var(--ge-text); } .ge-panel-note{ margin:0; font-size:12px; color:var(--ge-faint); } /* ── buttons ───────────────────────────────────────────────────────────── */ .ge-btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:40px; padding:0 18px; border-radius:var(--ge-radius); border:1px solid var(--ge-line-2); background:var(--ge-panel-2); color:var(--ge-text); font:inherit; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; text-decoration:none; transition:border-color .15s ease, background .15s ease, transform .12s ease, opacity .15s ease; } .ge-btn:hover{ border-color:var(--ge-accent); text-decoration:none; } .ge-btn:active{ transform:translateY(1px); } .ge-btn:disabled, .ge-btn[disabled]{ opacity:.45; cursor:not-allowed; } .ge-btn.ge-btn-primary{ background:var(--ge-accent); border-color:var(--ge-accent); color:var(--ge-accent-ink); } .ge-btn.ge-btn-primary:hover{ filter:brightness(1.08); } .ge-btn.ge-btn-ghost{ background:transparent; } .ge-btn.ge-btn-danger{ border-color:var(--ge-danger); color:var(--ge-danger); background:rgba(255,93,93,.08); } .ge-btn.ge-btn-danger:hover{ background:rgba(255,93,93,.16); } .ge-btn.ge-btn-lg{ min-height:54px; padding:0 32px; font-size:13px; letter-spacing:.08em; } .ge-btn.ge-btn-block{ width:100%; } /* ── chip ──────────────────────────────────────────────────────────────── */ .ge-chip{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border:1px solid var(--ge-line-2); border-radius:999px; font-family:var(--ge-mono); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ge-dim); background:rgba(255,255,255,.03); white-space:nowrap; } .ge-chip.ge-chip-accent{ border-color:var(--ge-accent); color:var(--ge-accent); } .ge-chip.ge-chip-ok{ border-color:var(--ge-ok); color:var(--ge-ok); } .ge-chip.ge-chip-warn{ border-color:var(--ge-warn); color:var(--ge-warn); } .ge-chip.ge-chip-danger{ border-color:var(--ge-danger); color:var(--ge-danger); } /* ── table ─────────────────────────────────────────────────────────────── */ .ge-table{ width:100%; border-collapse:collapse; font-size:13px; } .ge-table th, .ge-table td{ padding:11px 12px; text-align:left; border-bottom:1px solid var(--ge-line); font-variant-numeric:tabular-nums; } .ge-table th{ font-family:var(--ge-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ge-faint); font-weight:700; } .ge-table tbody tr:hover{ background:rgba(255,255,255,.025); } .ge-table td.positive{ color:var(--ge-ok); font-weight:700; } .ge-table td.negative{ color:var(--ge-danger); font-weight:700; } .ge-table-wrap{ overflow-x:auto; } .ge-table-empty{ padding:30px 12px; text-align:center; color:var(--ge-faint); font-size:13px; } /* ── KPI stat tile ─────────────────────────────────────────────────────── */ .ge-kpi{ display:grid; gap:6px; } .ge-kpi .ge-kpi-label{ font-family:var(--ge-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ge-faint); } .ge-kpi .ge-kpi-value{ font-size:clamp(22px,3vw,34px); font-weight:700; line-height:1; font-variant-numeric:tabular-nums; color:var(--ge-text); } .ge-kpi .ge-kpi-value.ge-kpi-accent{ color:var(--ge-accent); } .ge-kpi .ge-kpi-sub{ font-size:11px; color:var(--ge-dim); } /* ── LED status dot ────────────────────────────────────────────────────── */ .ge-led{ display:inline-block; width:8px; height:8px; border-radius:50%; flex:0 0 auto; background:var(--ge-faint); } .ge-led.ge-led-ok{ background:var(--ge-ok); box-shadow:0 0 8px rgba(67,209,124,.65); } .ge-led.ge-led-warn{ background:var(--ge-warn); box-shadow:0 0 8px rgba(255,157,46,.6); } .ge-led.ge-led-danger{ background:var(--ge-danger); box-shadow:0 0 8px rgba(255,93,93,.6); } .ge-led-row{ display:inline-flex; align-items:center; gap:8px; } /* ── form controls (kept minimal -- pages needing more define their own) ── */ .ge-scope input[type="text"], .ge-scope input[type="number"], .ge-scope select{ font:inherit; font-size:13px; padding:10px 12px; border-radius:var(--ge-radius); background:var(--ge-bg-1); color:var(--ge-text); border:1px solid var(--ge-line-2); } .ge-scope input:focus, .ge-scope select:focus{ outline:none; border-color:var(--ge-accent); box-shadow:0 0 0 3px rgba(var(--ge-accent-rgb),.18); } /* ── misc utility ──────────────────────────────────────────────────────── */ .ge-dim{ color:var(--ge-dim); } .ge-faint{ color:var(--ge-faint); } .ge-nums{ font-variant-numeric:tabular-nums; } .ge-hidden{ display:none !important; } .ge-grid{ display:grid; gap:18px; } .ge-stack{ display:grid; gap:22px; } @media (prefers-reduced-motion:reduce){ .ge-btn{ transition:none; } }