/* ============================================================ Dudoxx slide framework — _styles.css (v3, locale-converged) Required keyframes: fadeUp, fadeIn, kenBurns, accentSlide, pulseDot Locale routing: set or — the :lang() blocks at the bottom handle locale-specific typography. ============================================================ */ /* ------------------------------------------------------------ generated from _shared-brand-tokens/dudoxx.yaml v2026-05-22 do not edit — regenerate via: python3 ~/.claude/skills/_shared-brand-tokens/loader.py \ --brand dudoxx --emit css ------------------------------------------------------------ */ :root { --brand-color-primary: oklch(0.28 0.06 255); --brand-color-primary-foreground: oklch(0.97 0.02 90); --brand-color-secondary: oklch(0.95 0.03 80); --brand-color-accent: oklch(0.55 0.12 200); --brand-color-accent-foreground: oklch(1 0 0); --brand-color-accent-soft: oklch(0.92 0.04 195); --brand-color-fg: oklch(0.18 0.02 255); --brand-color-fg-secondary: oklch(0.30 0.04 255); --brand-color-fg-tertiary: oklch(0.52 0.02 255); --brand-color-bg: oklch(0.97 0.02 90); --brand-color-bg-warm: oklch(0.95 0.03 80); --brand-color-bg-recessed: oklch(0.94 0.02 90); --brand-color-paper: oklch(1 0 0); --brand-color-hairline: oklch(0.90 0.015 60 / 0.6); --brand-color-gold: oklch(0.74 0.15 85); --brand-color-rose: oklch(0.60 0.13 10); --brand-color-success: oklch(0.58 0.08 150); --brand-typography-font-body: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif; --brand-typography-font-heading: Instrument Serif, Charter, Georgia, serif; --brand-typography-font-mono: JetBrains Mono, ui-monospace, Menlo, monospace; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { width: 1920px; height: 1080px; overflow: hidden; font-family: var(--brand-typography-font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv01", "cv11"; } :root { /* Slide-framework palette aliases (derived from brand tokens above) */ --clay: oklch(0.600 0.165 35); --clay-2: oklch(0.700 0.170 40); --navy: oklch(0.28 0.06 255); --navy-2: oklch(0.20 0.04 255); --teal: oklch(0.55 0.12 200); --teal-2: oklch(0.62 0.14 195); --gold: oklch(0.74 0.15 85); --sage: oklch(0.58 0.08 150); --peach: oklch(0.80 0.10 55); --ivory: oklch(0.97 0.02 90); --cream: oklch(0.95 0.03 80); --paper: oklch(0.99 0.005 80); --ink: oklch(0.18 0.02 255); --ink-2: oklch(0.30 0.02 255); --muted: oklch(0.52 0.02 255); --line: oklch(0.90 0.015 255); --line-2: oklch(0.85 0.02 255); /* Elevation system */ --shadow-sm: 0 1px 3px oklch(0.20 0.02 255 / 0.08), 0 1px 2px oklch(0.20 0.02 255 / 0.06); --shadow-md: 0 4px 14px -2px oklch(0.20 0.02 255 / 0.12), 0 2px 6px -2px oklch(0.20 0.02 255 / 0.06); --shadow-lg: 0 16px 40px -12px oklch(0.20 0.02 255 / 0.18), 0 6px 14px -4px oklch(0.20 0.02 255 / 0.08); --shadow-card: 0 1px 1px oklch(1 0 0 / 0.9) inset, 0 6px 22px -6px oklch(0.20 0.02 255 / 0.14); /* Radii */ --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-pill: 999px; } body { background: radial-gradient(1200px 700px at 12% 8%, oklch(0.96 0.04 35 / 0.55), transparent 60%), radial-gradient(1100px 700px at 92% 96%, oklch(0.94 0.05 200 / 0.55), transparent 60%), linear-gradient(180deg, var(--ivory) 0%, var(--paper) 100%); color: var(--ink); padding: 0; position: relative; } /* ---------- Brand bar ---------- */ .brand-bar { position: absolute; top: 0; left: 0; right: 0; height: 104px; padding: 0 96px; display: flex; align-items: center; justify-content: space-between; z-index: 10; } .brand-bar .logo { display: flex; align-items: center; gap: 18px; } .brand-bar .logo .logo-mark { height: 52px; width: auto; } .brand-bar .logo .logo-type { height: 30px; width: auto; } .brand-bar .meta { font-size: 18px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 700; } /* ---------- Main frame ---------- */ .frame { position: absolute; top: 136px; left: 128px; right: 128px; bottom: 104px; z-index: 5; } h1 { font-size: 104px; line-height: 1.02; letter-spacing: -0.025em; color: var(--navy); font-weight: 800; } h2 { font-size: 64px; line-height: 1.10; letter-spacing: -0.015em; color: var(--clay); font-weight: 700; } h3 { font-size: 32px; line-height: 1.18; letter-spacing: -0.01em; color: var(--navy); font-weight: 700; } p { font-size: 30px; line-height: 1.45; color: var(--ink-2); max-width: 1500px; font-weight: 400; } .eyebrow { font-size: 22px; text-transform: uppercase; letter-spacing: 0.20em; color: var(--clay); font-weight: 800; margin-bottom: 24px; display: inline-flex; align-items: center; gap: 14px; } .eyebrow::before { content: ""; width: 36px; height: 3px; background: var(--clay); border-radius: 2px; } /* Wide gradient accent rule (replaces the text-width clipped under-line). */ .accent-line { height: 6px; width: 280px; background: linear-gradient(90deg, var(--clay) 0%, var(--gold) 55%, var(--teal) 100%); border-radius: 4px; margin: 28px 0 0 0; box-shadow: 0 4px 12px -2px oklch(0.60 0.17 35 / 0.35); } /* ---------- Footer rule ---------- */ .footer-rule { position: absolute; bottom: 36px; left: 96px; right: 96px; border-top: 1px solid var(--line); padding-top: 18px; display: flex; justify-content: space-between; align-items: center; font-size: 16px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 600; z-index: 10; } .footer-rule::before { content: "DUDOXX"; letter-spacing: 0.28em; color: var(--navy); font-weight: 800; } /* ---------- Chips ---------- */ .chip-row { display: flex; flex-wrap: wrap; gap: 16px; } .chip { display: inline-flex; align-items: center; gap: 12px; padding: 16px 26px; border-radius: var(--r-pill); font-size: 22px; font-weight: 700; color: var(--navy); background: var(--paper); border: none; box-shadow: var(--shadow-sm); } .chip .dot { width: 12px; height: 12px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px oklch(from currentColor l c h / 0.18); } .chip.clay { color: var(--clay); } .chip.teal { color: var(--teal); } .chip.gold { color: var(--gold); } .chip.sage { color: var(--sage); } .chip.navy { color: var(--navy); } /* ---------- Two-column layout ---------- */ .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; } .col h3 { margin-bottom: 14px; } /* CTA card — used on the outro for primary action emphasis */ .cta-card { background: radial-gradient(120% 90% at 0% 0%, oklch(0.96 0.05 35 / 0.40) 0%, transparent 55%), var(--paper); border: none; border-radius: var(--r-md); padding: 32px 36px; box-shadow: var(--shadow-card); } .cta-card.secondary { background: radial-gradient(120% 90% at 0% 0%, oklch(0.94 0.06 200 / 0.40) 0%, transparent 55%), var(--paper); } .cta-card .cta-tag { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--clay); margin-bottom: 14px; } .cta-card.secondary .cta-tag { color: var(--teal); } .cta-card .cta-tag::before { content: ""; width: 28px; height: 3px; background: currentColor; border-radius: 2px; } .cta-card code { color: var(--navy); font-weight: 800; font-size: 26px; background: oklch(0.96 0.02 255); padding: 4px 12px; border-radius: 8px; display: inline-block; margin-top: 4px; } /* ---------- Ambient blobs ---------- */ .ambient-blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.55; z-index: 0; pointer-events: none; mix-blend-mode: multiply; } .ambient-blob.clay { background: radial-gradient(circle, oklch(0.70 0.20 35) 0%, transparent 70%); } .ambient-blob.navy { background: radial-gradient(circle, oklch(0.45 0.12 255) 0%, transparent 70%); } .ambient-blob.teal { background: radial-gradient(circle, oklch(0.68 0.15 200) 0%, transparent 70%); } .ambient-blob.sage { background: radial-gradient(circle, oklch(0.68 0.10 150) 0%, transparent 70%); } .ambient-blob.peach { background: radial-gradient(circle, oklch(0.82 0.12 55) 0%, transparent 70%); } .ambient-blob.gold { background: radial-gradient(circle, oklch(0.80 0.16 85) 0%, transparent 70%); } /* ---------- Parallax depth layers ---------- */ .parallax-bg { animation: paraDrift 14s ease-in-out infinite alternate; } .parallax-mid { animation: paraDrift 10s ease-in-out infinite alternate; } .parallax-fg { animation: paraFloat 6s ease-in-out infinite alternate; } .parallax-breath{ animation: paraBreath 8s ease-in-out infinite alternate; } @keyframes paraDrift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-30px, -20px, 0) scale(1.04); } } @keyframes paraFloat { from { transform: translateY(0); } to { transform: translateY(-12px); } } @keyframes paraBreath { from { transform: scale(1); } to { transform: scale(1.05); } } /* ---------- Reveal animations ---------- */ .frame > * { opacity: 0; transform: translateY(28px); animation: fadeUp 0.95s cubic-bezier(0.16,1,0.3,1) forwards; } .frame > *:nth-child(1) { animation-delay: 0.10s; } .frame > *:nth-child(2) { animation-delay: 0.35s; } .frame > *:nth-child(3) { animation-delay: 0.55s; } .frame > *:nth-child(4) { animation-delay: 0.75s; } .frame > *:nth-child(5) { animation-delay: 0.95s; } .frame > *:nth-child(6) { animation-delay: 1.15s; } .frame > *:nth-child(7) { animation-delay: 1.35s; } .frame > *:nth-child(8) { animation-delay: 1.55s; } @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { to { opacity: 1; } } @keyframes kenBurns { from { transform: scale(1); } to { transform: scale(1.08) translate(-10px, -6px); } } @keyframes accentSlide { from { width: 0; opacity: 0; } to { width: var(--accent-width, 280px); opacity: 1; } } @keyframes pulseDot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.55; } } /* ---------- KPI grid ---------- */ .kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .kpi { background: var(--paper); border: none; border-radius: var(--r-lg); padding: 44px 40px; box-shadow: var(--shadow-card); position: relative; overflow: hidden; } .kpi::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--clay) 0%, var(--gold) 60%, var(--teal) 100%); } .kpi .num { font-size: 78px; font-weight: 800; color: var(--navy); letter-spacing: -0.04em; line-height: 1; } .kpi .lbl { margin-top: 22px; font-size: 20px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; } .kpi .sub { margin-top: 14px; font-size: 22px; color: var(--ink-2); line-height: 1.4; font-weight: 500; } /* ---------- Stack-row ---------- */ .stack-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 32px; } .stack-cell { background: var(--paper); border: none; border-radius: var(--r-md); padding: 28px 26px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-card); position: relative; overflow: hidden; } .stack-cell::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--accent, var(--clay)); } .stack-cell.role-be { --accent: var(--clay); } .stack-cell.role-fe { --accent: var(--teal); } .stack-cell.role-data { --accent: var(--gold); } .stack-cell.role-ai { --accent: var(--sage); } .stack-cell.role-ops { --accent: var(--navy); } .stack-cell .role { font-size: 13px; color: var(--accent, var(--clay)); text-transform: uppercase; letter-spacing: 0.20em; font-weight: 800; display: inline-flex; align-items: center; gap: 8px; } .stack-cell .role::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .stack-cell .name { font-size: 28px; color: var(--navy); font-weight: 800; letter-spacing: -0.01em; } .stack-cell .note { font-size: 17px; color: var(--ink-2); line-height: 1.4; } /* ============================================================ Chat-UI pattern (slide_03) ============================================================ */ .chat-split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 36px; height: 100%; } .chat-window { background: var(--paper); border: none; border-radius: var(--r-lg); padding: 30px; overflow: hidden; display: flex; flex-direction: column; gap: 18px; box-shadow: var(--shadow-lg); } .chat-header { display: flex; align-items: center; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--line); } .chat-header .avatar { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--clay), var(--teal)); box-shadow: var(--shadow-sm), inset 0 0 0 2px oklch(1 0 0 / 0.4); } .chat-header .who { font-size: 22px; font-weight: 800; color: var(--navy); } .chat-header .pill { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; padding: 8px 14px; border-radius: var(--r-pill); background: oklch(0.95 0.05 160); color: oklch(0.35 0.13 160); border: none; } .chat-header .pill .pulse { width: 8px; height: 8px; border-radius: 50%; background: oklch(0.55 0.18 160); animation: pulseDot 1.6s ease-in-out infinite; } .msg { max-width: 82%; padding: 16px 20px; border-radius: var(--r-md); font-size: 18px; line-height: 1.5; opacity: 0; transform: translateY(12px); } .msg.user { align-self: flex-end; background: var(--navy); color: white; border-bottom-right-radius: 6px; box-shadow: var(--shadow-md); animation: fadeUp 0.6s ease-out forwards; animation-delay: 0.6s; } .msg.bot { align-self: flex-start; background: var(--cream); color: var(--ink); border: none; border-bottom-left-radius: 6px; box-shadow: var(--shadow-sm); animation: fadeUp 0.6s ease-out forwards; animation-delay: 5.4s; } .msg.bot.second { animation-delay: 7.6s; } .typing { align-self: flex-start; display: inline-flex; gap: 6px; padding: 14px 18px; background: var(--cream); border: none; border-radius: var(--r-md); opacity: 0; animation: fadeIn 0.4s ease-out forwards, fadeOutLate 0.4s ease-in forwards; animation-delay: 1.8s, 4.2s; } .typing .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); animation: typingBounce 1.2s ease-in-out infinite; } .typing .dot:nth-child(2) { animation-delay: 0.15s; } .typing .dot:nth-child(3) { animation-delay: 0.30s; } @keyframes typingBounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-6px); } } @keyframes fadeOutLate { to { opacity: 0; transform: scale(0.95); } } .tools { display: flex; flex-wrap: wrap; gap: 10px; opacity: 0; animation: fadeUp 0.5s ease-out forwards; animation-delay: 4.6s; } .tool-chip { font-size: 15px; font-weight: 700; color: var(--navy); padding: 9px 16px; border-radius: var(--r-pill); background: oklch(0.95 0.04 230); border: none; box-shadow: var(--shadow-sm); font-family: var(--brand-typography-font-mono); } .flow { background: linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%); border: none; border-radius: var(--r-lg); padding: 32px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-lg); } .flow-title { font-size: 28px; font-weight: 800; color: var(--navy); letter-spacing: -0.01em; } .flow-sub { font-size: 18px; color: var(--muted); margin-bottom: 8px; } .node { display: flex; align-items: center; gap: 18px; background: var(--paper); border: none; border-radius: var(--r-md); padding: 14px 20px; box-shadow: var(--shadow-sm); opacity: 0; transform: translateX(-12px); animation: fadeUp 0.5s ease-out forwards; } .node:nth-of-type(1) { animation-delay: 0.4s; } .node:nth-of-type(2) { animation-delay: 2.0s; } .node:nth-of-type(3) { animation-delay: 2.4s; } .node:nth-of-type(4) { animation-delay: 4.8s; } .node:nth-of-type(5) { animation-delay: 7.2s; } .node .ico { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 800; color: white; font-size: 20px; box-shadow: var(--shadow-md); } .node .ico.c1 { background: linear-gradient(135deg, var(--clay), var(--clay-2)); } .node .ico.c2 { background: linear-gradient(135deg, var(--teal), var(--teal-2)); } .node .ico.c3 { background: linear-gradient(135deg, var(--gold), oklch(0.78 0.16 75)); } .node .ico.c4 { background: linear-gradient(135deg, var(--sage), oklch(0.62 0.10 145)); } .node .ico.c5 { background: linear-gradient(135deg, var(--navy), var(--navy-2)); } .node .lbl { font-size: 22px; font-weight: 800; color: var(--navy); } .node .sub { font-size: 16px; color: var(--muted); margin-top: 2px; } .flow-arrow { height: 16px; display: flex; align-items: center; justify-content: center; color: var(--line-2); font-size: 22px; } /* ============================================================ German locale overrides — activate via - longer compounds → slightly smaller h1, more line-height - looser tracking on uppercase eyebrows / metadata - narrower body line-length so titles like "Audit-Protokollierung" don't break mid-word at the right edge - lang-attribute hyphenation enabled (Deutsch-Trennung) ============================================================ */ :lang(de) { hyphens: auto; -webkit-hyphens: auto; } /* enable native hyphenation for DE */ :lang(de) h1 { font-size: 92px; line-height: 1.08; letter-spacing: -0.02em; } /* shorter line for compound words */ :lang(de) h2 { font-size: 58px; line-height: 1.14; } :lang(de) h3 { font-size: 30px; line-height: 1.22; } :lang(de) p { font-size: 28px; line-height: 1.5; max-width: 1380px; } /* narrower measure → fewer mid-word breaks */ :lang(de) .eyebrow { letter-spacing: 0.22em; } /* DE uppercase reads tight; loosen */ :lang(de) .brand-bar .meta { letter-spacing: 0.20em; } :lang(de) .footer-rule { letter-spacing: 0.20em; } :lang(de) .kpi .lbl { letter-spacing: 0.16em; } :lang(de) .stack-cell .role{ letter-spacing: 0.22em; } /* German chip rows: fewer hyphens — nudge gap so wrapping stays clean */ :lang(de) .chip-row { gap: 14px; } :lang(de) .chip { padding: 14px 22px; font-size: 21px; } /* Long compound names in stack-cells need hyphenation + soft-break */ :lang(de) .stack-cell .name { hyphens: auto; word-break: break-word; } /* ============================================================ French locale overrides — activate via - typographic spacing before « : » « ; » « ! » « ? » via .fr-punct utility - softer tracking on uppercase (French caps run wider) - guillemets-aware quoted spans via q[lang="fr"] - lang-attribute hyphenation enabled for long French words ============================================================ */ :lang(fr) { hyphens: auto; -webkit-hyphens: auto; } /* enable hyphenation for long FR words */ :lang(fr) h1 { letter-spacing: -0.022em; } :lang(fr) .eyebrow { letter-spacing: 0.18em; } /* softer than base; FR caps need air */ :lang(fr) .brand-bar .meta { letter-spacing: 0.16em; } :lang(fr) .footer-rule { letter-spacing: 0.16em; } :lang(fr) .kpi .lbl { letter-spacing: 0.13em; } :lang(fr) .stack-cell .role{ letter-spacing: 0.18em; } /* French copy reads better at slightly higher line-height on tight blocks */ :lang(fr) p { line-height: 1.5; } :lang(fr) .stack-cell .note { line-height: 1.5; } /* French double-punctuation spacing: authors wrap with to keep the NBSP + high-punctuation pair from breaking across lines */ :lang(fr) .fr-punct { white-space: nowrap; } /* Guillemets defaults via q[lang="fr"] — pair with French « » */ q[lang="fr"] { quotes: "« " " »" "“ " " ”"; } q[lang="fr"]::before { content: open-quote; } q[lang="fr"]::after { content: close-quote; }