/* ────────────────────────────────────────────────────────────────────────── AlphaConsole — shared base stylesheet for the static marketing/legal pages (pricing.html, landing.html, agb.html, datenschutz.html, impressum.html, kontakt.html, cookies.html, widerruf.html, haftungsausschluss.html). Single source of truth for the design tokens on those pages. The values are the "Baseline" Pro palette and type scale — the same tokens the terminal itself uses, mirrored from direction-terminal.jsx's TERM_CSS (.tm-root / .tm-root.dark) exactly as index.html already mirrors them for the SPA boot. Before this file each page carried its own :root block, which is how they drifted onto a pre-Baseline palette (#08090c / #c57d00 / cream #faf8f3) while the app moved on. Change a colour in TERM_CSS → change it here too. alpha-console.html (the "/" landing) deliberately does NOT use this file: it is a standalone marketing skin with its own green palette and type system. See wiki/peak-project/decisions/landing-page-before-terminal.md. Theme: pages stamp `theme-dark` on before first paint (see the inline bootstrap in each page's ). Light is the default, matching terminal-shell.jsx's own default. ────────────────────────────────────────────────────────────────────────── */ :root { /* ── Baseline Pro palette — light ── */ --bg: #eef0f2; --surface: #ffffff; --surface-2: #f4f6f8; --line: #e8ebee; --line-s: #d9dee2; --line-d: rgba(20, 25, 30, 0.04); --ink: #1a1f24; --ink-2: #3c454d; --ink-3: #69737b; --ink-4: #a4adb4; --accent: #c98a1e; --accent-2: #1f9e63; --pos: #1f9e57; --neg: #d64535; --warn: #c98a1e; /* ── Type scale (mirrors TERM_CSS) ── */ --fs-micro: 10px; --fs-label: 11px; --fs-body: 12px; --fs-value: 13px; --fs-title: 15px; --fs-section: 18px; --fs-display: 26px; --fs-hero: 40px; --mono: 'JetBrains Mono', ui-monospace, 'Menlo', monospace; --sans: 'Inter', -apple-system, system-ui, sans-serif; /* ── Derived tokens ── Kept as aliases so page-level rules written against the older names keep resolving; all of them now track --accent/--line/--bg instead of being independently hardcoded per page. */ --font: var(--mono); --bg-2: var(--surface); --border: var(--line); --border-acc: color-mix(in srgb, var(--accent) 45%, transparent); --accent-dim: color-mix(in srgb, var(--accent) 12%, transparent); --accent-glow: color-mix(in srgb, var(--accent) 18%, transparent); --accent-line: color-mix(in srgb, var(--accent) 30%, transparent); --nav-bg: color-mix(in srgb, var(--bg) 94%, transparent); /* Ink that sits ON the accent (buttons, badges) — near-black in both themes because --accent is a mid-luminance amber on either surface. */ --on-accent: #0a0b0d; } :root.theme-dark { /* ── Baseline Pro palette — dark ── */ --bg: #0a0b0d; --surface: #101316; --surface-2: #16191e; --line: #15191d; --line-s: #1d242a; --line-d: rgba(255, 255, 255, 0.04); --ink: #cdd6db; --ink-2: #9aa3ab; --ink-3: #6b7780; --ink-4: #454c52; --accent: #e8a93b; --accent-2: #3ecf8e; --pos: #3ecf8e; --neg: #ff5f56; --warn: #e8a93b; } /* ── Reset (was duplicated in all nine pages) ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--bg); color: var(--ink-2); font-family: var(--mono); font-size: var(--fs-value); line-height: 1.7; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* ── Focus ── One visible ring everywhere. Several pages had none, which left keyboard users with no focus indication on the CTAs. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } /* ── Legal / text page shell ── agb · datenschutz · impressum · kontakt · cookies · widerruf · haftungsausschluss all shared this markup with private copies of the CSS. */ .legal-body { padding: 40px 20px 80px; } .legal-container { max-width: 740px; margin: 0 auto; } /* Header row: back-link and the DE/EN toggle on one baseline. Previously the toggle was a `float:right` span dropped after the link, which floated a 27px control against a 14px line box. */ .legal-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 32px; } .back { display: inline-flex; align-items: center; color: var(--ink-3); font-size: var(--fs-micro); letter-spacing: 1.2px; text-transform: uppercase; text-decoration: none; } .back:hover { color: var(--ink); text-decoration: none; } .legal-container .label { font-size: 9px; color: var(--ink-3); letter-spacing: 1.6px; text-transform: uppercase; margin-bottom: 8px; } .legal-container h1 { font-size: 22px; font-weight: 700; color: var(--ink); margin-bottom: 6px; letter-spacing: -0.2px; } .legal-container .subtitle { font-size: var(--fs-label); color: var(--ink-3); margin-bottom: 40px; } .legal-container h2 { font-size: var(--fs-label); font-weight: 700; color: var(--accent); letter-spacing: 1.4px; text-transform: uppercase; margin: 32px 0 12px; } .legal-container p { margin-bottom: 12px; color: var(--ink-2); } .legal-container ul { margin: 0 0 12px 18px; } .legal-container li { margin-bottom: 6px; color: var(--ink-2); } .card { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 22px 26px; margin-bottom: 20px; } /* h2 carries a 32px top margin for section rhythm in flowing text; inside a card that stacks on the card's own padding and leaves the heading floating. Same for the last paragraph's bottom margin. */ .card > :first-child { margin-top: 0; } .card > :last-child { margin-bottom: 0; } .placeholder { background: var(--accent-dim); padding: 2px 6px; border-radius: 3px; color: var(--accent); font-weight: 600; } .footer-note { font-size: var(--fs-micro); color: var(--ink-3); letter-spacing: 0.6px; text-align: center; margin-top: 48px; }