/* ============================================================ * IDC AI Unit · Brand CSS * Single Source of Truth for Web/HTML/Social. * Auto-generatable via brand_loader.css_variables(theme="dark"|"light"). * * Usage: * * or * ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Anton&family=Manrope:wght@200;300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root { /* === Brand-globale Tokens === */ --primary: #C8001E; --primary-bright: #FF1A3D; --primary-deep: #8E0014; --primary-glow: rgba(200, 0, 30, 0.45); --success: #22C55E; --warning: #F9A825; --danger: #C8001E; --white: #FFFFFF; --ink: #0a0a0b; /* === Fonts === */ --font-display: 'Anton', 'Bebas Neue', sans-serif; --font-body: 'Manrope', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* === Motion === */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --radius: 0; --radius-soft: 4px; } /* === Dark Theme (default for HTML/Web/Social) === */ .theme-dark, body.theme-dark, body:not(.theme-light) { --bg-0: #0a0a0b; --bg-1: #111114; --bg-2: #18181c; --bg-3: #1f1f24; --bg-4: #28282e; --t-1: #fafafa; --t-2: #d4d4d8; --t-3: #a1a1aa; --t-4: #71717a; --t-5: #52525b; --line: #27272a; --line-strong: #3f3f46; background: var(--bg-0); color: var(--t-2); font-family: var(--font-body); } /* === Light Theme (DOCX/Print HTML, fallback) === */ .theme-light, body.theme-light { --bg: #FFFFFF; --bg-surface: #F8F9FA; --t-1: #0a0a0b; --t-2: #27272a; --t-3: #52525b; --t-4: #71717a; --line: #E4E4E7; background: var(--bg); color: var(--t-2); font-family: var(--font-body); } /* ============================================================ * Signature Components — IDC AI Unit Visual Identity * ============================================================ */ /* === Headlines: Anton, uppercase, tight === */ .headline, h1.headline, .idc-headline { font-family: var(--font-display); font-weight: 400; line-height: 0.86; letter-spacing: -0.02em; text-transform: uppercase; color: var(--t-1); } .headline .red-word, .idc-headline .red-word { color: var(--primary); } /* === r-dot: signature red square dot, skewed === */ .r-dot { display: inline-block; width: 0.32em; height: 0.32em; background: var(--primary); margin-left: 0.06em; transform: skewX(-20deg); } /* === Italic skew: red italic accent === */ .italic-skew { font-style: italic; transform: skewX(-6deg); display: inline-block; color: var(--primary); } /* === Skewed buttons === */ .btn-skewed { background: var(--primary); color: white; border: none; padding: 10px 18px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transform: skewX(-8deg); transition: background 0.15s var(--ease); } .btn-skewed:hover { background: var(--primary-bright); } .btn-skewed > span { display: inline-block; transform: skewX(8deg); } /* === Grid background pattern === */ .grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px); background-size: 80px 80px; pointer-events: none; z-index: 0; } /* === Red glow radial === */ .red-glow { position: absolute; width: 1000px; height: 1000px; border-radius: 50%; background: radial-gradient(circle, rgba(200, 0, 30, 0.28) 0%, transparent 65%); filter: blur(80px); pointer-events: none; z-index: 0; } /* === Card top accent (4-5px red bar) === */ .card-accent::before { content: ''; position: absolute; top: -1px; left: -1px; width: 80px; height: 5px; background: var(--primary); } /* === Eyebrow / Mono labels === */ .eyebrow, .mono-label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--t-3); } /* === Corner mark (//01, //02 etc.) === */ .corner-mark { font-family: var(--font-mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--t-3); display: inline-flex; gap: 12px; align-items: center; } .corner-mark .dot { width: 8px; height: 8px; background: var(--primary); border-radius: 50%; box-shadow: 0 0 16px var(--primary-glow); } /* === Diagonal stripe accent (skewed red gradient line) === */ .diag-stripe { position: absolute; width: 4px; background: linear-gradient(to bottom, transparent, var(--primary), transparent); transform: skewX(-20deg); opacity: 0.6; pointer-events: none; z-index: 1; } /* === Corner brackets (HUD-style L frames) === */ .corner-bracket { position: absolute; width: 80px; height: 80px; border: 2px solid var(--primary); opacity: 0.5; pointer-events: none; z-index: 1; } .corner-bracket.tl { top: 24px; left: 24px; border-right: none; border-bottom: none; } .corner-bracket.tr { top: 24px; right: 24px; border-left: none; border-bottom: none; } .corner-bracket.bl { bottom: 24px; left: 24px; border-right: none; border-top: none; } .corner-bracket.br { bottom: 24px; right: 24px; border-left: none; border-top: none; } /* === Slide vertical centering helper === */ .slide-centered { display: flex; flex-direction: column; justify-content: center; align-items: stretch; flex: 1; min-height: 0; }