/* ============================================================ * Computer-Universum — Foundations * Colors & typography tokens. Derived from logo-cu.png. * * Naming: * --cu-{role}-{step} semantic + scale * --cu-h1, --cu-body semantic typography presets * * Anti-vibe-coding-Regeln gelten: keine Lila/Violet-Akzente, * keine Neon-Farben, eine starke Akzentfarbe (Stahlblau). * ============================================================ */ /* Fonts: Geist + Geist Mono — SELBST GEHOSTET (DSGVO-konform, keine * Verbindung zu Google-Servern). Die @font-face-Regeln liegen in * fonts.css; die .woff2-Dateien gehören in /fonts (siehe fonts/LIESMICH.txt). * Solange die Dateien fehlen, greift automatisch der System-Font-Fallback. */ @import url("fonts.css"); :root { /* ---------- Color: Ink (the dark logo half — deep navy) ---------- */ --cu-ink-950: #0E1230; /* Hero/footer backgrounds */ --cu-ink-900: #161B3D; /* Brand dark, headlines on light */ --cu-ink-800: #1E254B; --cu-ink-700: #2A335E; --cu-ink-600: #3B4674; /* ---------- Color: Steel (the light logo half — the accent) ---------- */ --cu-steel-700: #2D5C8F; /* Hover/pressed */ --cu-steel-600: #3B6E9F; --cu-steel-500: #4978A6; /* THE accent. Buttons, links, focus. */ --cu-steel-400: #6D96BF; --cu-steel-300: #9FB8D0; --cu-steel-200: #C8D8E5; --cu-steel-100: #E4EDF4; --cu-steel-50: #F2F6FA; /* ---------- Alternative accents (opt-in via .theme--*) ---------- */ /* Orange — warmer CTA contrast, derived to coexist with steel without drifting toward "startup bright". */ --cu-orange-700: #B14512; --cu-orange-600: #C95820; --cu-orange-500: #DD6B2E; /* Warm CTA */ --cu-orange-400: #E78A5A; --cu-orange-100: #F8E5D6; /* Teal — for the Reference-HTML-derived alt palette only */ --cu-teal-700: #007361; --cu-teal-500: #00A896; --cu-teal-400: #2DD4BF; --cu-teal-100: #D6F0EC; /* ---------- Color: Bone (warm off-white — German sachlich) ---------- */ --cu-paper: #FFFFFF; --cu-bone-50: #F6F4EE; /* Page background */ --cu-bone-100: #EFEBE0; /* Subtle panels */ --cu-bone-200: #E2DDCE; /* ---------- Color: Slate (neutrals, text) ---------- */ --cu-slate-900: #14171F; --cu-slate-700: #3A404E; --cu-slate-500: #5C6373; /* Secondary text */ --cu-slate-400: #7A8290; /* Muted text */ --cu-slate-300: #B4B8C2; --cu-slate-200: #D7D9DF; --cu-slate-150: #E4E2DA; /* Warm line on bone bg */ --cu-slate-100: #ECEDEF; /* ---------- Semantic states (used sparingly) ---------- */ --cu-success: #2E7D5B; --cu-warn: #B5811F; --cu-error: #9C2E2E; /* ---------- Semantic roles ---------- */ --cu-bg: var(--cu-bone-50); --cu-bg-elevated: var(--cu-paper); --cu-bg-dark: var(--cu-ink-950); --cu-fg: var(--cu-ink-900); --cu-fg-on-dark: #F5F3ED; --cu-fg-muted: var(--cu-slate-500); --cu-fg-faint: var(--cu-slate-400); --cu-line: var(--cu-slate-150); --cu-line-strong: #C7C2B3; --cu-line-on-dark: rgba(255, 255, 255, .12); --cu-accent: var(--cu-steel-500); --cu-accent-hover: var(--cu-steel-700); --cu-focus-ring: var(--cu-steel-400); --cu-cta: var(--cu-steel-500); --cu-cta-hover: var(--cu-steel-700); --cu-cta-fg: #ffffff; --cu-mark: var(--cu-steel-600); /* eyebrows, section markers */ --cu-mark-on-dark: var(--cu-steel-400); /* same role, on ink bg */ } /* ------------------------------------------------------------ * Color themes — opt-in by adding a class to or any * ancestor of the content. Defaults stay steel-only. * ------------------------------------------------------------ */ .theme--steel-orange { --cu-cta: var(--cu-orange-500); --cu-cta-hover: var(--cu-orange-700); --cu-cta-fg: #ffffff; --cu-focus-ring: var(--cu-orange-400); /* eyebrow + accent stay steel — orange is the warm CTA pop only */ } .theme--teal-orange { --cu-cta: var(--cu-orange-500); --cu-cta-hover: var(--cu-orange-700); --cu-cta-fg: #ffffff; --cu-accent: var(--cu-teal-700); --cu-accent-hover: #00574A; --cu-focus-ring: var(--cu-orange-400); --cu-mark: var(--cu-teal-700); --cu-mark-on-dark: var(--cu-teal-400); } :root { /* ---------- Typography: families ---------- */ --cu-font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --cu-font-mono: "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono", "Menlo", monospace; /* ---------- Typography: scale (clamp-based, restrained) ---------- */ --cu-fs-12: 0.75rem; /* 12 — eyebrow, micro */ --cu-fs-13: 0.8125rem; /* 13 — captions */ --cu-fs-14: 0.875rem; /* 14 — UI */ --cu-fs-15: 0.9375rem; /* 15 — body small */ --cu-fs-16: 1rem; /* 16 — body */ --cu-fs-18: 1.125rem; /* 18 — body large */ --cu-fs-20: 1.25rem; /* 20 — h5 */ --cu-fs-24: 1.5rem; /* 24 — h4 */ --cu-fs-30: 1.875rem; /* 30 — h3 */ --cu-fs-h2: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); /* 28-40 */ --cu-fs-h1: clamp(2.25rem, 1.4rem + 3.2vw, 3.75rem); /* 36-60 */ --cu-fs-display: clamp(2.75rem, 1.5rem + 4.5vw, 4.5rem);/* 44-72 */ --cu-lh-tight: 1.08; --cu-lh-snug: 1.22; --cu-lh-body: 1.6; --cu-lh-loose: 1.8; --cu-tracking-tight: -0.022em; --cu-tracking-display: -0.03em; --cu-tracking-eyebrow: 0.12em; /* ---------- Spacing (consistent, calm) ---------- */ --cu-s-1: 4px; --cu-s-2: 8px; --cu-s-3: 12px; --cu-s-4: 16px; --cu-s-5: 24px; --cu-s-6: 32px; --cu-s-7: 48px; --cu-s-8: 64px; --cu-s-9: 80px; --cu-s-10: 96px; /* Section verticals (py-16 md:py-20 floor — keine py-32) */ --cu-section-y: 64px; --cu-section-y-md: 80px; /* Container — agentur-typisch 1280-1440 */ --cu-container: 1280px; --cu-container-wide: 1440px; --cu-container-pad: 24px; --cu-container-pad-md: 40px; /* ---------- Radius (bewusst sparsam) ---------- */ --cu-r-0: 0; /* Cards, sections */ --cu-r-sm: 2px; /* Tags, badges */ --cu-r-md: 4px; /* Buttons */ --cu-r-lg: 6px; /* Larger surfaces */ --cu-r-pill: 9999px; /* Avatare only */ /* ---------- Borders ---------- */ --cu-border-thin: .5px solid var(--cu-line); --cu-border: 1px solid var(--cu-line); --cu-border-strong: 1px solid var(--cu-line-strong); --cu-border-on-dark: 1px solid var(--cu-line-on-dark); /* ---------- Elevation: keine shadow-2xl. shadow-sm max. ---------- */ --cu-shadow-0: none; --cu-shadow-sm: 0 1px 2px rgba(22, 27, 61, 0.05); --cu-shadow-md: 0 4px 12px rgba(22, 27, 61, 0.06), 0 1px 2px rgba(22, 27, 61, 0.04); --cu-shadow-focus: 0 0 0 3px rgba(73, 120, 166, .28); /* ---------- Motion (zurückhaltend) ---------- */ --cu-ease: cubic-bezier(.2, .6, .2, 1); --cu-ease-in: cubic-bezier(.4, 0, .8, .3); --cu-dur-fast: 120ms; --cu-dur: 200ms; --cu-dur-slow: 320ms; } /* ============================================================ * Base / semantic element styles * ============================================================ */ html { font-family: var(--cu-font-sans); font-size: 16px; color: var(--cu-fg); background: var(--cu-bg); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } body { font-size: var(--cu-fs-16); line-height: var(--cu-lh-body); color: var(--cu-fg); text-wrap: pretty; } h1, .cu-h1 { font-family: var(--cu-font-sans); font-weight: 600; font-size: var(--cu-fs-h1); line-height: var(--cu-lh-tight); letter-spacing: var(--cu-tracking-display); text-wrap: balance; color: var(--cu-ink-900); } h2, .cu-h2 { font-weight: 600; font-size: var(--cu-fs-h2); line-height: var(--cu-lh-snug); letter-spacing: var(--cu-tracking-tight); text-wrap: balance; color: var(--cu-ink-900); } h3, .cu-h3 { font-weight: 600; font-size: var(--cu-fs-30); line-height: 1.25; letter-spacing: var(--cu-tracking-tight); color: var(--cu-ink-900); } h4, .cu-h4 { font-weight: 600; font-size: var(--cu-fs-24); line-height: 1.3; letter-spacing: var(--cu-tracking-tight); color: var(--cu-ink-900); } h5, .cu-h5 { font-weight: 600; font-size: var(--cu-fs-20); line-height: 1.35; } p, .cu-body { font-size: var(--cu-fs-16); line-height: var(--cu-lh-body); color: var(--cu-slate-700); } .cu-body-lg { font-size: var(--cu-fs-18); line-height: var(--cu-lh-body); color: var(--cu-slate-700); } .cu-body-sm { font-size: var(--cu-fs-14); line-height: 1.55; color: var(--cu-slate-500); } .cu-eyebrow { font-family: var(--cu-font-mono); font-size: var(--cu-fs-12); font-weight: 500; letter-spacing: var(--cu-tracking-eyebrow); text-transform: uppercase; color: var(--cu-mark); } code, kbd, .cu-mono { font-family: var(--cu-font-mono); font-size: 0.92em; color: var(--cu-ink-800); } a { color: var(--cu-accent); text-decoration: none; text-underline-offset: 3px; transition: color var(--cu-dur) var(--cu-ease); } a:hover { color: var(--cu-accent-hover); text-decoration: underline; } ::selection { background: var(--cu-steel-200); color: var(--cu-ink-900); } :focus-visible { outline: none; box-shadow: var(--cu-shadow-focus); border-radius: var(--cu-r-md); }