/* ============================================================================= TRADEFLEX GROUP · DESIGN TOKENS Multi-Brand Technology Ecosystem — TradefleX Europe · Connectika · Birdtical Single source of truth. Mirror these values into: - tradeflex-runtime/_tokens-global.scss (Sass partials) - tradeflex-runtime/global.css (compiled) - app.tradeflex.eu/styles/tokens.css (Next.js mirror) - WordPress wp-admin theme.json (Gutenberg/Avia) ========================================================================== */ /* --------------------------------------------------------------------------- 1. GLOBAL GROUP TOKENS · shared across every brand & every product --------------------------------------------------------------------------- */ :root { /* ---- Holding base palette (Dunkelblau-Architektur) -------------------- */ --tfg-color-deep-navy: #00254A; /* Holdingbasis · Nav · Footer · Frames */ --tfg-color-dark-ui: #0C263A; /* Platform bg · Dark sections · Cards */ --tfg-color-soft-white: #F7F9FB; /* Text surfaces · Content · Forms */ --tfg-color-graphite: #254258; /* Secondary surface · Dividers · Sidebar */ --tfg-color-line: #1C3A52; /* Hairline borders on dark */ --tfg-color-line-light: #D3DCE3; /* Hairline borders on light */ /* ---- Neutral text scale (works on Deep Navy) -------------------------- */ --tfg-fg-1: #F7F9FB; /* Body on dark */ --tfg-fg-2: #B9C8D6; /* Secondary on dark */ --tfg-fg-3: #7E9AB0; /* Muted / dim on dark */ --tfg-fg-4: #36546B; /* Disabled / decoration on dark */ --tfg-fg-inverse-1: #00254A; /* Body on light */ --tfg-fg-inverse-2: #254258; /* Secondary on light */ --tfg-fg-inverse-3: #6E87A0; /* Muted on light */ /* ---- Semantic status (group-wide, brand-neutral) ---------------------- */ --tfg-status-success: #4FB286; --tfg-status-warning: #E0A33A; --tfg-status-danger: #D45A4D; --tfg-status-info: #4F92C5; /* ---- Typography: families --------------------------------------------- * * Specified by CI Handbuch as "serifenlos, geometrisch, modern". * Group standard substitutions: Space Grotesk (display + UI) and * IBM Plex Mono (numerics, code, monospaced labels). If the group later * licenses a brand-specific face (e.g. Söhne / TT Commons), only these * two variables change. */ --tfg-font-display: "Space Grotesk", "Inter", "Segoe UI", Roboto, system-ui, sans-serif; --tfg-font-body: "Space Grotesk", "Inter", "Segoe UI", Roboto, system-ui, sans-serif; --tfg-font-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* ---- Typography: type scale (modular, 1.250) -------------------------- */ --tfg-fs-display: clamp(2.5rem, 1.2rem + 4vw, 4.5rem); /* hero H1 */ --tfg-fs-h1: clamp(2rem, 1.4rem + 2vw, 3rem); /* page H1 */ --tfg-fs-h2: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); /* section title */ --tfg-fs-h3: 1.5rem; --tfg-fs-h4: 1.25rem; --tfg-fs-h5: 1.0625rem; --tfg-fs-lead: 1.1875rem; /* lead paragraph */ --tfg-fs-body: 1rem; /* 16px body */ --tfg-fs-small: 0.875rem; /* meta · footnotes */ --tfg-fs-micro: 0.8125rem; /* eyebrow · uppercase labels */ /* ---- Typography: weights & metrics ------------------------------------ */ --tfg-fw-light: 300; --tfg-fw-regular: 400; --tfg-fw-medium: 500; --tfg-fw-semibold: 600; --tfg-fw-bold: 700; --tfg-lh-tight: 1.1; --tfg-lh-snug: 1.25; --tfg-lh-normal: 1.5; --tfg-lh-loose: 1.7; --tfg-tracking-tight: -0.02em; --tfg-tracking-normal: 0em; --tfg-tracking-wide: 0.06em; --tfg-tracking-label: 0.14em; /* eyebrows · ALL-CAPS labels */ /* ---- Spacing scale (4px base, 8px rhythm) ----------------------------- */ --tfg-space-0: 0; --tfg-space-1: 4px; --tfg-space-2: 8px; --tfg-space-3: 12px; --tfg-space-4: 16px; --tfg-space-5: 24px; --tfg-space-6: 32px; --tfg-space-7: 48px; --tfg-space-8: 64px; --tfg-space-9: 96px; --tfg-space-10: 128px; --tfg-space-11: 160px; /* ---- Section rhythm (vertical padding per section, runtime-wide) ------ */ --tfg-section-pad-sm: 48px; --tfg-section-pad-md: 80px; --tfg-section-pad-lg: 120px; --tfg-section-pad-xl: 160px; /* ---- Container widths ------------------------------------------------- */ --tfg-container-narrow: 720px; /* long-form copy */ --tfg-container-default: 1200px; /* most sections */ --tfg-container-wide: 1440px; /* hero · table · multi-col */ --tfg-container-full: 100%; --tfg-gutter: clamp(20px, 4vw, 40px); /* ---- Grid ------------------------------------------------------------- */ --tfg-grid-cols: 12; --tfg-grid-gap: 24px; --tfg-grid-gap-tight: 16px; /* ---- Breakpoints (referenced from JS; CSS uses them inline) ----------- */ --tfg-bp-xs: 480px; --tfg-bp-sm: 640px; --tfg-bp-md: 768px; --tfg-bp-lg: 1024px; --tfg-bp-xl: 1280px; --tfg-bp-2xl: 1440px; /* ---- Radius (Flat Design — restrained, NEVER mixed within a component) */ --tfg-radius-none: 0; --tfg-radius-sm: 4px; --tfg-radius-md: 8px; /* default UI radius */ --tfg-radius-lg: 12px; --tfg-radius-xl: 16px; /* cards */ --tfg-radius-2xl: 24px; --tfg-radius-pill: 999px; /* pills / tags */ --tfg-radius-circle: 50%; /* ---- Borders ---------------------------------------------------------- */ --tfg-border-width-1: 1px; --tfg-border-width-2: 2px; /* ---- Shadows (Flat Design — keep minimal; elevation only when needed) - */ --tfg-shadow-none: none; --tfg-shadow-1: 0 1px 2px rgba(0, 37, 74, 0.06); --tfg-shadow-2: 0 4px 16px rgba(0, 37, 74, 0.08); --tfg-shadow-3: 0 10px 32px rgba(0, 37, 74, 0.14); --tfg-shadow-focus: 0 0 0 3px rgba(250, 111, 56, 0.35); /* ---- Z-index system (runtime-wide) ------------------------------------ */ --tfg-z-base: 0; --tfg-z-raised: 10; --tfg-z-sticky: 100; --tfg-z-header: 500; --tfg-z-dropdown: 1000; --tfg-z-overlay: 2000; --tfg-z-modal: 3000; --tfg-z-toast: 4000; --tfg-z-tooltip: 5000; /* ---- Motion ----------------------------------------------------------- */ --tfg-ease-standard: cubic-bezier(.2, .0, .2, 1); --tfg-ease-in: cubic-bezier(.4, .0, 1, 1); --tfg-ease-out: cubic-bezier(0, 0, .2, 1); --tfg-dur-fast: 120ms; --tfg-dur-base: 200ms; --tfg-dur-slow: 320ms; --tfg-dur-deliberate: 480ms; /* ---- Focus ring ------------------------------------------------------- */ --tfg-focus-ring: 0 0 0 2px var(--tfg-color-deep-navy), 0 0 0 4px var(--tfg-brand-primary, var(--tfg-color-deep-navy))); } /* --------------------------------------------------------------------------- 2. BRAND LAYERS · scoped via [data-brand="…"] on or any subtree. Brand layers override ONLY brand-controlled tokens (primary accent, secondary accents, CTA wording is content-not-token). --------------------------------------------------------------------------- */ /* ---- Tradeflex Europe (default) --------------------------------------- */ :root, [data-brand="tradeflex"] { --tfg-brand-id: "tradeflex"; --tfg-brand-primary: #FA6F38; /* Signal Orange */ --tfg-brand-primary-hover:#E55E2A; --tfg-brand-primary-press:#C84D1F; --tfg-brand-primary-soft: rgba(250, 111, 56, 0.12); --tfg-brand-on-primary: #00254A; /* text color ON an Orange surface */ --tfg-brand-accent-2: #113048; /* Midnight Blue */ --tfg-brand-accent-3: #36546B; /* Slate Blue */ --tfg-brand-base: #00254A; /* brand-tinted surface base */ } /* ---- Connectika --------------------------------------------------------- */ [data-brand="connectika"] { --tfg-brand-id: "connectika"; --tfg-brand-primary: #00B1B7; /* Aquamarin */ --tfg-brand-primary-hover:#00969C; --tfg-brand-primary-press:#007C81; --tfg-brand-primary-soft: rgba(0, 177, 183, 0.14); --tfg-brand-on-primary: #00254A; --tfg-brand-accent-2: #6EBD9E; /* Soft Mint */ --tfg-brand-accent-3: #007997; /* Deep Cyan */ --tfg-brand-accent-4: #F08A26; /* Orange (sec.) */ --tfg-brand-accent-5: #891F52; /* Magenta (sec.) */ --tfg-brand-base: #00254A; /* Saphirblau — same as Deep Navy */ } /* ---- Birdtical ---------------------------------------------------------- */ [data-brand="birdtical"] { --tfg-brand-id: "birdtical"; --tfg-brand-primary: #F6A923; /* Analytics Gold */ --tfg-brand-primary-hover:#DC9114; --tfg-brand-primary-press:#B97808; --tfg-brand-primary-soft: rgba(246, 169, 35, 0.14); --tfg-brand-on-primary: #002564; --tfg-brand-accent-2: #009CD1; /* Data Cyan */ --tfg-brand-accent-3: #EC741A; /* Data Orange */ --tfg-brand-accent-4: #2D848E; /* Data Teal */ --tfg-brand-accent-5: #A4C300; /* Data Green */ --tfg-brand-base: #002564; /* Dark Blue (slightly different) */ } /* --------------------------------------------------------------------------- 3. SEMANTIC TYPE STYLES · these are the names content authors use. Avia / Enfold templates pull these classes; do not invent new ones in brand layers. --------------------------------------------------------------------------- */ .tfg-eyebrow { font-family: var(--tfg-font-display); font-size: var(--tfg-fs-micro); font-weight: var(--tfg-fw-semibold); letter-spacing: var(--tfg-tracking-label); text-transform: uppercase; color: var(--tfg-brand-primary); line-height: var(--tfg-lh-snug); } .tfg-h1, .tfg-display { font-family: var(--tfg-font-display); font-size: var(--tfg-fs-display); font-weight: var(--tfg-fw-bold); line-height: var(--tfg-lh-tight); letter-spacing: var(--tfg-tracking-tight); color: var(--tfg-fg-1); margin: 0; } .tfg-h2 { font-family: var(--tfg-font-display); font-size: var(--tfg-fs-h2); font-weight: var(--tfg-fw-bold); line-height: var(--tfg-lh-snug); letter-spacing: var(--tfg-tracking-tight); color: var(--tfg-fg-1); margin: 0; } .tfg-h3 { font-family: var(--tfg-font-display); font-size: var(--tfg-fs-h3); font-weight: var(--tfg-fw-semibold); line-height: var(--tfg-lh-snug); color: var(--tfg-fg-1); margin: 0; } .tfg-h4 { font-family: var(--tfg-font-display); font-size: var(--tfg-fs-h4); font-weight: var(--tfg-fw-semibold); line-height: var(--tfg-lh-snug); color: var(--tfg-fg-1); margin: 0; } .tfg-lead { font-family: var(--tfg-font-body); font-size: var(--tfg-fs-lead); font-weight: var(--tfg-fw-regular); line-height: var(--tfg-lh-normal); color: var(--tfg-fg-2); margin: 0; text-wrap: pretty; max-width: 60ch; } .tfg-body, p { font-family: var(--tfg-font-body); font-size: var(--tfg-fs-body); font-weight: var(--tfg-fw-regular); line-height: var(--tfg-lh-normal); color: var(--tfg-fg-2); text-wrap: pretty; max-width: 65ch; } .tfg-label { font-family: var(--tfg-font-display); font-size: var(--tfg-fs-micro); font-weight: var(--tfg-fw-medium); letter-spacing: var(--tfg-tracking-wide); text-transform: uppercase; color: var(--tfg-fg-3); } .tfg-meta { font-family: var(--tfg-font-body); font-size: var(--tfg-fs-small); font-weight: var(--tfg-fw-regular); color: var(--tfg-fg-3); line-height: var(--tfg-lh-normal); } .tfg-data { font-family: var(--tfg-font-mono); font-feature-settings: "tnum" 1; letter-spacing: 0; } code, kbd, samp, pre { font-family: var(--tfg-font-mono); font-size: 0.9em; } /* --------------------------------------------------------------------------- 4. BASE PAGE DEFAULTS · only the bare minimum; Enfold owns layout. --------------------------------------------------------------------------- */ html { -webkit-text-size-adjust: 100%; } body { background: var(--tfg-color-deep-navy); color: var(--tfg-fg-1); font-family: var(--tfg-font-body); font-size: var(--tfg-fs-body); line-height: var(--tfg-lh-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ::selection { background: var(--tfg-brand-primary); color: var(--tfg-brand-on-primary); } a { color: var(--tfg-brand-primary); text-decoration: none; } a:hover { color: var(--tfg-brand-primary-hover); } /* --------------------------------------------------------------------------- 5. REDUCED MOTION --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ============================================================================= 6. ADDITIVE EXTENSIONS · v2 (Light content theme · Backgrounds · Placeholders) These are ADDITIVE only. No existing token above was renamed or removed. Mirror into the same downstream targets as section 1. ========================================================================== */ /* --------------------------------------------------------------------------- 6.1 LIGHT CONTENT THEME · opt-in via [data-theme="light"] --------------------------------------------------------------------------- * * Deep Navy stays the system default. This theme is for CONTENT / reading * surfaces only (articles, legal, docs) — NOT hero, dashboard or marketing. * It composes with any [data-brand="…"]: brand accent stays live, only the * neutral ground + text + border + shadow ramps flip to a warm light set. * Warm, friendly base (not cold pure-white) to preserve the premium feel. */ [data-theme="light"] { /* Friendly warm grounds (lightest → surface → raised) */ --tfg-color-canvas: #F7F9FB; /* page ground · warm off-white */ --tfg-color-surface: #FFFFFF; /* cards · panels */ --tfg-color-surface-2: #F7F9FB; /* sunken · secondary surface */ --tfg-color-surface-tint: #F7F9FB; /* subtle warm section band */ /* Text ramp on light (AA-checked on --tfg-color-canvas) */ --tfg-fg-1: #11283C; /* body / strong — ~13.4:1 */ --tfg-fg-2: #3A5266; /* secondary — ~7.6:1 */ --tfg-fg-3: #5E7488; /* muted — ~4.8:1 */ --tfg-fg-4: #9DAEBC; /* decoration / disabled */ /* Borders + lines on light */ --tfg-color-line: #E4E0D8; /* warm hairline (overrides on light) */ --tfg-color-line-strong: #CBD4DC; /* stronger divider */ /* Elevation IS allowed on light — warm-tinted, still restrained */ --tfg-shadow-1: 0 1px 2px rgba(40, 30, 16, 0.05); --tfg-shadow-2: 0 6px 18px rgba(40, 30, 16, 0.07); --tfg-shadow-3: 0 14px 36px rgba(40, 30, 16, 0.12); /* Selection inverts to readable-on-light */ --tfg-selection-fg: #11283C; /* Map base surface so token-driven components flip automatically */ --tfg-color-deep-navy: var(--tfg-color-canvas); --tfg-color-dark-ui: var(--tfg-color-surface); } /* On a light ground the brand accents need a guaranteed-legible text pairing * and a slightly deeper press step. These compose per brand. */ [data-theme="light"][data-brand="tradeflex"], [data-theme="light"]:root { --tfg-brand-on-primary: #FFFFFF; /* white text on Signal Orange button */ } [data-theme="light"][data-brand="connectika"] { --tfg-brand-primary-hover: #008A8F; /* deepen for contrast on white */ --tfg-brand-on-primary: #FFFFFF; } [data-theme="light"][data-brand="birdtical"] { --tfg-brand-primary: #E59A10; /* Gold deepened one step for AA text */ --tfg-brand-primary-hover: #C9850B; --tfg-brand-on-primary: #002564; } /* When the light theme is on, body + selection follow the warm ground. */ [data-theme="light"] body { background: var(--tfg-color-canvas); color: var(--tfg-fg-1); } [data-theme="light"] ::selection { background: var(--tfg-brand-primary); color: var(--tfg-selection-fg); } /* --------------------------------------------------------------------------- 6.2 NON-UNIFORM BACKGROUNDS · three opt-in options, pick one later --------------------------------------------------------------------------- * * Apply ONE class to a section or . Each has a dark (default) and a * light-theme rendering. All stay calm + institutional: no neon, no hard * gradients. Tunable via the --tfg-bg-* tokens below. */ :root { --tfg-bg-glow-accent: var(--tfg-brand-primary); --tfg-bg-glow-strength: 0.08; /* radial glow alpha — keep ≤ 0.10 */ --tfg-bg-grid-line: rgba(247, 249, 251, 0.035); --tfg-bg-grid-size: 40px; --tfg-bg-gradient-from: #00254A; --tfg-bg-gradient-to: #001B33; /* dark → darker, barely perceptible */ } [data-theme="light"] { --tfg-bg-grid-line: rgba(17, 40, 60, 0.05); --tfg-bg-gradient-from: #F7F9FB; --tfg-bg-gradient-to: #F7F9FB; --tfg-bg-glow-strength: 0.06; } /* Option A — multiple faint radial glows, offset corners */ .tfg-bg--glows { background-color: var(--tfg-color-deep-navy); background-image: radial-gradient(60% 50% at 88% -8%, rgba(250, 111, 56, var(--tfg-bg-glow-strength)), transparent 60%), radial-gradient(55% 45% at 5% 110%, rgba(79, 146, 197, calc(var(--tfg-bg-glow-strength) * 0.7)), transparent 60%); background-attachment: fixed; } /* Option B — fine, low-opacity geometric grid overlay */ .tfg-bg--grid { background-color: var(--tfg-color-deep-navy); background-image: linear-gradient(var(--tfg-bg-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--tfg-bg-grid-line) 1px, transparent 1px); background-size: var(--tfg-bg-grid-size) var(--tfg-bg-grid-size); background-position: -1px -1px; } /* Option C — soft, near-invisible brand-tinted gradient */ .tfg-bg--gradient { background-image: linear-gradient(168deg, var(--tfg-bg-gradient-from) 0%, var(--tfg-bg-gradient-to) 100%); background-attachment: fixed; } /* --------------------------------------------------------------------------- 6.3 IMAGE SLOT PLACEHOLDER · works in dark + light --------------------------------------------------------------------------- */ .tfg-image-slot { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; border-radius: var(--tfg-radius-xl); border: 1px dashed var(--tfg-color-line); background: repeating-linear-gradient(135deg, rgba(126, 154, 176, 0.06) 0 12px, transparent 12px 24px); color: var(--tfg-fg-3); font-family: var(--tfg-font-mono); font-size: var(--tfg-fs-micro); letter-spacing: var(--tfg-tracking-wide); text-transform: uppercase; } .tfg-image-slot::after { content: "image slot"; } /* --------------------------------------------------------------------------- 6.4 TYPOGRAPHIC BRAND LOCKUPS · PLACEHOLDER until real marks ship --------------------------------------------------------------------------- * * Same build logic as the TradefleX wordmark: Space Grotesk, brand accent on * the trailing glyph. Replace with delivered SVG marks when available. */ .tfg-lockup { display: inline-flex; align-items: baseline; font-family: var(--tfg-font-display); font-weight: var(--tfg-fw-bold); letter-spacing: var(--tfg-tracking-tight); font-size: 2rem; line-height: 1; color: var(--tfg-fg-1); } .tfg-lockup__accent { color: var(--tfg-brand-primary); } .tfg-lockup__tag { font-family: var(--tfg-font-display); font-weight: var(--tfg-fw-medium); font-size: var(--tfg-fs-micro); letter-spacing: var(--tfg-tracking-label); text-transform: uppercase; color: var(--tfg-fg-2); margin-left: 8px; align-self: center; } .tfg-lockup[data-placeholder]::before { content: "PLACEHOLDER"; position: absolute; margin-top: -14px; font-family: var(--tfg-font-mono); font-size: 8px; letter-spacing: 0.18em; color: var(--tfg-status-warning); } /* =========================================================================== INSTITUTIONAL REFINEMENT · ergänzende Tokens (Farbe & Motion) Additiv — überschreibt bewusst spätere Defaults; bestehende Tokens bleiben. =========================================================================== */ :root { --tfg-bg-main: #00254A; --tfg-bg-elevated: rgba(12, 38, 58, 0.72); --tfg-bg-elevated-strong: rgba(12, 38, 58, 0.92); --tfg-border-subtle: rgba(247, 249, 251, 0.12); --tfg-border-active: rgba(250, 111, 56, 0.44); --tfg-motion-fast: 140ms; --tfg-motion-base: 240ms; --tfg-motion-slow: 520ms; --tfg-ease-runtime: cubic-bezier(0.16, 1, 0.3, 1); --tfg-ease-precise: cubic-bezier(0.2, 0, 0, 1); /* CI-Akzent normalisiert */ --tfg-brand-primary: #FA6F38; --tfg-brand-primary-hover: #E55E2A; --tfg-brand-primary-press: #C84D1F; }