/* ========================================================================== UNEq Concepts — Foundational tokens Logistics-AI for the German Mittelstand. Dark-first, mono-engineered. ========================================================================== */ /* Fonts are loaded from the HTML with preconnect for parallelism. See Website_Relaunch.html etc. — do NOT re-add @import here, it would serialize behind the CSS parse. */ :root { /* --- Brand core ------------------------------------------------------- */ --brand-black: #000000; /* Pure black — bg of every product surface */ --brand-ink: #0A0A0A; /* Near-black, slightly softer card / banner */ --brand-graphite: #141414; /* Elevated card on black */ --brand-steel: #1E1E1E; /* Elevated card +1 */ --brand-bone: #FFFFFF; /* Pure white — primary fg on dark */ /* --- Signal green (the only chromatic colour) ------------------------- * * Pulled directly from the LinkedIn banner & product chip outlines. * Used SPARINGLY — accents, status dots, italic emphasis, hairlines. */ --signal-300: #5CF2B6; --signal-400: #3DE39E; --signal-500: #1FCB85; /* PRIMARY signal — italic emphasis, dot indicators */ --signal-600: #14A86B; --signal-700: #0E7E51; --signal-900: #07301F; /* Outline / glow base */ --signal-fog: rgba(31,203,133,0.08); /* Card tint behind product chips */ --signal-glow: rgba(31,203,133,0.22); /* Ring on focused chips */ /* --- Neutral scale (dark-first) --------------------------------------- */ --n-0: #000000; --n-50: #050505; --n-100: #0A0A0A; --n-200: #141414; --n-300: #1E1E1E; --n-400: #2A2A2A; --n-500: #3D3D3D; --n-600: #595959; --n-700: #8A8A8A; --n-800: #B8B8B8; --n-900: #E6E6E6; --n-1000: #FFFFFF; /* --- Semantic foreground ---------------------------------------------- */ --fg-1: var(--n-1000); /* Headline white */ --fg-2: var(--n-900); /* Body white */ --fg-3: var(--n-800); /* Muted body */ --fg-4: var(--n-700); /* Captions, eyebrow */ --fg-5: var(--n-600); /* Hairlines, disabled */ --fg-accent: var(--signal-500); --fg-on-accent: var(--n-0); /* --- Semantic background ---------------------------------------------- */ --bg-canvas: var(--brand-black); /* The page */ --bg-surface: var(--brand-ink); /* Cards, modals */ --bg-elevated: var(--brand-graphite); --bg-inset: #050505; --bg-grid: rgba(255,255,255,0.035); /* --- Stroke / border --------------------------------------------------- */ --stroke-1: rgba(255,255,255,0.08); /* Default hairline */ --stroke-2: rgba(255,255,255,0.14); /* Card border */ --stroke-accent: rgba(31,203,133,0.55); --stroke-accent-soft: rgba(31,203,133,0.28); /* --- Typography -------------------------------------------------------- * * Brand face: Century Gothic (PPTX master). Geometric, generous tracking. * Fallback: Questrial (free Google Font, very close metrics). * Mono: JetBrains Mono — used for eyebrow labels (// LOGISTIK …), code, * data, and the small-caps tickers next to product chips. */ --font-display: "Century Gothic", "Questrial", "Avant Garde", "Futura", system-ui, sans-serif; --font-body: "Century Gothic", "Questrial", "Avant Garde", system-ui, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace; /* Type ramp (1280-baseline; scale up for slides via --type-scale) */ --type-scale: 1; --fs-display-xl: calc(96px * var(--type-scale)); /* Hero on title slides */ --fs-display-lg: calc(64px * var(--type-scale)); /* Section openers */ --fs-display-md: calc(48px * var(--type-scale)); --fs-h1: calc(40px * var(--type-scale)); --fs-h2: calc(28px * var(--type-scale)); --fs-h3: calc(20px * var(--type-scale)); --fs-body: calc(16px * var(--type-scale)); --fs-body-sm: calc(14px * var(--type-scale)); --fs-eyebrow: calc(12px * var(--type-scale)); /* Mono, tracked, uppercase */ --fs-micro: calc(10px * var(--type-scale)); --lh-tight: 1.05; --lh-snug: 1.18; --lh-normal: 1.45; --lh-loose: 1.6; --tracking-display: -0.01em; --tracking-body: 0; --tracking-eyebrow: 0.22em; /* CRITICAL — the // LOGISTIK look needs wide tracking */ --tracking-product: 0.18em; /* AGENTIQ / WORQFLOW / SMARTSTOQ chips */ /* --- Spacing scale (4-base) ------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* --- Radius — restrained. Most surfaces are hard-cornered ------------- */ --radius-0: 0; /* Default — slides, banners, full cards */ --radius-1: 4px; /* Buttons */ --radius-2: 8px; /* Product chips */ --radius-3: 14px; /* Modal */ --radius-pill: 999px; /* --- Elevation — minimal. The brand prefers crisp borders to shadows -- */ --shadow-glow-signal: 0 0 0 1px var(--stroke-accent), 0 0 32px -8px var(--signal-glow); --shadow-card: 0 1px 0 0 rgba(255,255,255,0.04) inset, 0 8px 24px -16px rgba(0,0,0,0.8); --shadow-deep: 0 24px 80px -32px rgba(0,0,0,0.9); /* --- Motion ----------------------------------------------------------- */ --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-in-out: cubic-bezier(0.6, 0, 0.2, 1); --dur-1: 140ms; --dur-2: 220ms; --dur-3: 420ms; /* --- Layout primitives ------------------------------------------------- */ --grid-cell: 80px; /* The faint construction grid */ --rule-color: rgba(255,255,255,0.06); } /* Light surface — used rarely (print, docs). Inverts FG/BG only. */ .theme-paper { --bg-canvas: #F5F5F2; --bg-surface: #FFFFFF; --bg-elevated: #FFFFFF; --fg-1: #0A0A0A; --fg-2: #1E1E1E; --fg-3: #3D3D3D; --fg-4: #595959; --fg-5: #8A8A8A; --stroke-1: rgba(0,0,0,0.08); --stroke-2: rgba(0,0,0,0.14); --rule-color: rgba(0,0,0,0.06); --bg-grid: rgba(0,0,0,0.035); } /* ========================================================================== Semantic element styles — drop-in defaults ========================================================================== */ .uneq-h-display { font-family: var(--font-display); font-size: var(--fs-display-lg); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); font-weight: 400; color: var(--fg-1); } .uneq-h1 { font: 400 var(--fs-h1)/var(--lh-snug) var(--font-display); color: var(--fg-1); letter-spacing: var(--tracking-display); } .uneq-h2 { font: 400 var(--fs-h2)/var(--lh-snug) var(--font-display); color: var(--fg-1); } .uneq-h3 { font: 400 var(--fs-h3)/var(--lh-snug) var(--font-display); color: var(--fg-1); } .uneq-body { font: 400 var(--fs-body)/var(--lh-normal) var(--font-body); color: var(--fg-2); } .uneq-body-sm { font: 400 var(--fs-body-sm)/var(--lh-normal) var(--font-body); color: var(--fg-3); } /* The signature eyebrow / micro label. `// LOGISTIK TRANSFORMATION FÜR DEN MITTELSTAND`. Use sparingly — once per slide / hero, max two per screen.*/ .uneq-eyebrow { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--fg-4); font-weight: 400; } .uneq-eyebrow::before { content: "// "; color: var(--fg-5); } /* Italic emphasis — green, italic, hard-stop full-stop. Used for the punch word in headlines: "Echte *Entlastung.*" Never bold, only italic. */ .uneq-emph { font-style: italic; color: var(--signal-500); font-weight: 400; } /* Product token — AGENTIQ / WORQFLOW / SMARTSTOQ. Mono caps, tracked. */ .uneq-product { font-family: var(--font-mono); font-weight: 500; letter-spacing: var(--tracking-product); text-transform: uppercase; color: var(--signal-500); } .uneq-rule { border: 0; border-top: 1px solid var(--rule-color); margin: 0; } .uneq-rule-accent { border: 0; border-top: 1px solid var(--signal-500); margin: 0; }