/* ============================================================ DEEP TECH MOMENTUM (DTM) — Core foundations Colors + Typography tokens for the DTM brand. Europe's #1 Deep Tech & AI Marketplace · Berlin ------------------------------------------------------------ FONTS (official brand, fully self-hosted): - Display / body : "Onest" (variable, weights 100–900 from fonts/Onest-VariableFont_wght.ttf) - Eyebrows/labels/data : "Fragment Mono" (fonts/FragmentMono-Regular.ttf) ============================================================ */ @font-face { font-family: 'Onest'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/Onest-VariableFont_wght.ttf') format('truetype'); } @font-face { font-family: 'Fragment Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/FragmentMono-Regular.ttf') format('truetype'); } :root { /* ---------- CORE INK / SURFACES ---------- */ --dtm-black: #000000; /* true black, used in gradients + bleed */ --dtm-ink: #0B0716; /* page background — near-black violet */ --dtm-ink-2: #120A22; /* raised surface / section */ --dtm-surface: #1A0F30; /* card surface on dark */ --dtm-surface-2: #241541; /* hover / elevated card */ --dtm-hairline: rgba(255,255,255,0.10); /* borders on dark */ --dtm-hairline-2: rgba(255,255,255,0.16); /* stronger border / hover */ /* ---------- SIGNATURE VIOLET SCALE ---------- The brand's deep black-to-violet background gradient. */ --violet-950: #17082A; --violet-900: #230734; --violet-800: #32083F; --violet-700: #390847; --violet-600: #3A1078; /* nebula mid (from imagery) */ --violet-500: #5B21B6; --violet-400: #7C3AED; /* electric violet — primary interactive */ --violet-300: #9F67F0; --violet-200: #C4A6F7; /* ---------- EXPRESSIVE ACCENTS (from brand imagery) ---------- */ --accent: #D4367A; /* OFFICIAL logo magenta tab — primary brand accent */ --magenta: #C42AD0; /* vortex magenta (from imagery) */ --magenta-bright: #E0309E; --pink: #FB6FA0; /* hot pink highlight */ --cyan: #21E7F0; /* electric cyan beam */ --cyan-deep: #0FB6C4; --indigo: #3A2FE0; /* electric indigo */ /* ---------- TEXT (on dark) ---------- */ --fg-1: #FFFFFF; /* primary text / headlines */ --fg-2: rgba(255,255,255,0.74); /* body */ --fg-3: rgba(255,255,255,0.54); /* secondary / captions */ --fg-4: rgba(255,255,255,0.38); /* disabled / faint */ --fg-accent: #C4A6F7; /* violet text accent */ /* ---------- TEXT (on light, for docs/decks reversed) ---------- */ --fg-on-light-1: #14091F; --fg-on-light-2: #4A3A5C; --bg-light: #F5F1FA; /* ---------- SEMANTIC STATUS ---------- */ --ok: #36D399; --warn: #F5B544; --alert: #FF5A6E; --info: var(--cyan); /* ---------- SIGNATURE GRADIENTS ---------- */ /* The official poster gradient — calm, near-black to deep violet */ --grad-brand: linear-gradient(180deg, #000000 0%, #17082A 50%, #230734 75%, #32083F 88%, #390847 100%); /* @kind color */ /* Nebula — expressive hero/feature gradient (magenta+cyan energy) */ --grad-nebula: radial-gradient(120% 90% at 50% 40%, #FB6FA0 0%, #C42AD0 18%, #3A1078 48%, #1B1647 74%, #0B0716 100%); /* @kind color */ /* Beam — diagonal cyan light sweep used as accent overlay */ --grad-beam: linear-gradient(115deg, transparent 30%, rgba(33,231,240,0.55) 50%, transparent 70%); /* @kind color */ /* Violet CTA fill */ --grad-cta: linear-gradient(180deg, #8B4DF0 0%, #6D28D9 100%); /* @kind color */ /* ---------- RADII ---------- */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --r-pill: 999px; /* ---------- ELEVATION / SHADOWS (on dark) ---------- */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.45); --shadow-md: 0 8px 28px rgba(0,0,0,0.55); --shadow-lg: 0 24px 70px rgba(0,0,0,0.65); --glow-violet: 0 0 0 1px rgba(124,58,237,0.45), 0 12px 40px rgba(124,58,237,0.35); --glow-cyan: 0 0 28px rgba(33,231,240,0.45); --glow-magenta:0 0 30px rgba(196,42,208,0.40); /* ---------- SPACING SCALE (4pt 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; /* ---------- TYPE FAMILIES ---------- */ --font-display: 'Onest', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* headlines */ --font-body: 'Onest', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* UI + body */ --font-mono: 'Fragment Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* eyebrows/labels/data */ /* ---------- TYPE SCALE ---------- */ --fs-display: clamp(48px, 7vw, 104px); /* @kind font */ --fs-h1: clamp(40px, 5vw, 68px); /* @kind font */ --fs-h2: clamp(30px, 3.4vw, 46px); /* @kind font */ --fs-h3: clamp(22px, 2.2vw, 30px); /* @kind font */ --fs-h4: 20px; --fs-body-lg: 19px; --fs-body: 16px; --fs-sm: 14px; --fs-eyebrow: 13px; --fs-mono-sm: 12px; } /* ============================================================ LIGHT THEME — the brand's second mode ------------------------------------------------------------ Opt in by setting data-theme="light" on (or any container). White, faintly-violet surfaces with dark ink text; ALL expressive accents (magenta / cyan / violet / pink / indigo) are kept identical to the dark theme. Only the structural tokens (ink, surfaces, hairlines, text, shadows) flip, plus the two accent ROLES that don't read on white (text + the cyan info hue) are deepened for contrast. Every semantic type class and any token-driven component inherits this automatically. ============================================================ */ [data-theme="light"] { /* ---------- INK / SURFACES (now light) ---------- */ --dtm-black: #FFFFFF; /* "bleed" white */ --dtm-ink: #FBFAFE; /* page background */ --dtm-ink-2: #F4F0FB; /* raised surface / section */ --dtm-surface: #FFFFFF; /* card surface */ --dtm-surface-2: #F1ECFA; /* hover / elevated card */ --dtm-hairline: rgba(20,9,31,0.10); /* borders on light */ --dtm-hairline-2: rgba(20,9,31,0.18); /* stronger border / hover */ /* ---------- TEXT (now dark violet ink) ---------- */ --fg-1: #14091F; /* primary text / headlines */ --fg-2: rgba(20,9,31,0.72); /* body */ --fg-3: rgba(20,9,31,0.52); /* secondary / captions */ --fg-4: rgba(20,9,31,0.36); /* disabled / faint */ --fg-accent: #6D28D9; /* deeper violet, reads on white */ /* ---------- ACCENTS — UNCHANGED hues ---------- --accent / --magenta / --pink / --cyan / --indigo all stay as defined in :root. Only the cyan INFO role is deepened so it remains legible as text / small UI on white. */ --info: var(--cyan-deep); /* ---------- ELEVATION (soft, violet-tinted — not heavy black) ---------- */ --shadow-sm: 0 1px 2px rgba(20,9,31,0.06); --shadow-md: 0 10px 30px rgba(20,9,31,0.10); --shadow-lg: 0 26px 70px rgba(20,9,31,0.16); --glow-violet: 0 0 0 1px rgba(124,58,237,0.30), 0 12px 40px rgba(124,58,237,0.22); --glow-cyan: 0 0 26px rgba(15,182,196,0.30); --glow-magenta:0 0 28px rgba(196,42,208,0.22); /* ---------- GRADIENTS ---------- The poster gradient becomes a calm light wash; the expressive nebula / beam / CTA fills keep their vivid form (they read on either theme as image-like accents). */ --grad-brand: linear-gradient(180deg, #FFFFFF 0%, #F6F2FD 58%, #ECE3F8 100%); /* @kind color */ } /* ============================================================ SEMANTIC TYPOGRAPHY ============================================================ */ .dtm-display { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-display); line-height: 0.96; letter-spacing: -0.03em; color: var(--fg-1); text-wrap: balance; } h1, .dtm-h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -0.025em; color: var(--fg-1); text-wrap: balance; } h2, .dtm-h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); line-height: 1.06; letter-spacing: -0.02em; color: var(--fg-1); text-wrap: balance; } h3, .dtm-h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -0.015em; color: var(--fg-1); } h4, .dtm-h4 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h4); line-height: 1.25; letter-spacing: -0.01em; color: var(--fg-1); } .dtm-lead { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-body-lg); line-height: 1.5; letter-spacing: -0.01em; color: var(--fg-1); } p, .dtm-body { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: 1.6; color: var(--fg-1); } .dtm-small { font-family: var(--font-body); font-size: var(--fs-sm); line-height: 1.5; color: var(--fg-3); } /* Eyebrow / kicker — THE signature DTM device: monospace, uppercase, wide tracking. Used for dates, section labels, "INVITE ONLY", etc. */ .dtm-eyebrow { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-eyebrow); line-height: 1.4; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3); } .dtm-mono { font-family: var(--font-mono); font-size: var(--fs-mono-sm); letter-spacing: 0.02em; color: var(--fg-2); } /* Big stat numerals */ .dtm-stat { font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 5vw, 64px); line-height: 1; letter-spacing: -0.02em; color: var(--fg-1); } /* Gradient text treatment for emphasis words */ .dtm-text-nebula { background: linear-gradient(90deg, var(--pink), var(--magenta) 45%, var(--violet-300)); -webkit-background-clip: text; background-clip: text; color: transparent; }