/* ══════════════════════════════════════════════════════════════ YOUNGDYNAMICS DESIGN SYSTEM — v1.0 (Phase 3) Loading order in HTML: design-system.css → style.css → page CSS Token namespaces: --yd-* Global platform tokens (surfaces, type, spacing, motion) --brand-* Per-product brand tokens (overridden per context) Brand context is set via data-brand on or a card wrapper:
══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ GLOBAL PLATFORM TOKENS ══════════════════════════════════════════════════════════════ */ :root { /* ── Surfaces ─────────────────────────────────────────────── */ --yd-surface-0: #0a0a0b; /* Main page background */ --yd-surface-1: #111113; /* Subtle section variation */ --yd-surface-2: #1a1a1e; /* Cards, panels */ --yd-surface-3: #222226; /* Interactive / elevated */ --yd-surface-4: #2a2a30; /* Active, selected state */ /* ── Text ─────────────────────────────────────────────────── */ --yd-text-primary: #ffffff; --yd-text-secondary: rgba(255,255,255,0.65); --yd-text-muted: #888888; --yd-text-subtle: rgba(255,255,255,0.28); --yd-text-placeholder: rgba(255,255,255,0.22); /* ── Borders & dividers ───────────────────────────────────── */ --yd-border: rgba(255,255,255,0.07); --yd-border-subtle: rgba(255,255,255,0.05); --yd-border-medium: rgba(255,255,255,0.12); --yd-divider: rgba(255,255,255,0.06); /* ── Focus ────────────────────────────────────────────────── */ --yd-focus-ring: 0 0 0 3px rgba(96,165,250,0.4); /* ── Semantic status ─────────────────────────────────────── */ --yd-success: #22c55e; --yd-success-bg: rgba(34,197,94,0.1); --yd-success-border: rgba(34,197,94,0.3); --yd-success-text: #4ade80; --yd-warning: #f59e0b; --yd-warning-bg: rgba(245,158,11,0.1); --yd-error: #ef4444; --yd-error-bg: rgba(239,68,68,0.1); --yd-error-border: rgba(239,68,68,0.3); --yd-error-text: #f87171; /* ── Typography ──────────────────────────────────────────── */ --yd-font-sans: 'Poppins', system-ui, -apple-system, sans-serif; --yd-font-mono: ui-monospace, 'Cascadia Code', 'JetBrains Mono', monospace; /* Type scale */ --yd-text-2xs: 0.65rem; /* 10.4px label micro */ --yd-text-xs: 0.72rem; /* 11.5px eyebrow, tag */ --yd-text-sm: 0.82rem; /* 13.1px caption, footnote */ --yd-text-base:0.92rem; /* 14.7px body default */ --yd-text-md: 1rem; /* 16px body comfortable */ --yd-text-lg: 1.05rem; /* 16.8px body large */ --yd-text-xl: 1.18rem; /* 18.9px card heading */ --yd-text-2xl: 1.55rem; /* 24.8px large card heading */ --yd-text-3xl: clamp(2rem, 4vw, 3.2rem); /* section heading */ --yd-text-4xl: clamp(2.8rem, 6vw, 5.5rem); /* hero heading */ --yd-text-5xl: clamp(3.5rem, 7vw, 6.5rem); /* display */ /* Line heights */ --yd-leading-tight: 1.08; --yd-leading-snug: 1.2; --yd-leading-normal: 1.5; --yd-leading-relaxed:1.65; --yd-leading-loose: 1.75; /* ── Spacing ─────────────────────────────────────────────── */ --yd-sp-1: 4px; --yd-sp-2: 8px; --yd-sp-3: 12px; --yd-sp-4: 16px; --yd-sp-5: 20px; --yd-sp-6: 24px; --yd-sp-7: 28px; --yd-sp-8: 32px; --yd-sp-10: 40px; --yd-sp-12: 48px; --yd-sp-16: 64px; --yd-sp-20: 80px; --yd-sp-24: 96px; --yd-sp-30: 120px; /* ── Radius ──────────────────────────────────────────────── */ --yd-radius-sm: 8px; --yd-radius-md: 12px; --yd-radius-lg: 16px; --yd-radius-xl: 24px; --yd-radius-pill: 100px; /* ── Shadows ─────────────────────────────────────────────── */ --yd-shadow-sm: 0 2px 8px rgba(0,0,0,0.3); --yd-shadow-md: 0 8px 24px rgba(0,0,0,0.35); --yd-shadow-lg: 0 24px 60px rgba(0,0,0,0.4); --yd-shadow-xl: 0 40px 80px rgba(0,0,0,0.5); /* ── Layout ──────────────────────────────────────────────── */ --yd-content-width: 1200px; --yd-wide-width: 1440px; --yd-nav-height: 72px; --yd-section-py: 120px; --yd-gutter: 24px; /* ── Animation ───────────────────────────────────────────── */ --yd-ease: cubic-bezier(0.4, 0, 0.2, 1); --yd-ease-out: cubic-bezier(0, 0, 0.2, 1); --yd-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --yd-dur-fast: 0.15s; --yd-dur-base: 0.25s; --yd-dur-slow: 0.4s; --yd-dur-reveal: 0.7s; /* ── Z-index scale ───────────────────────────────────────── */ --yd-z-below: -1; --yd-z-base: 0; --yd-z-above: 10; --yd-z-sticky: 50; --yd-z-nav: 100; --yd-z-dropdown: 200; --yd-z-overlay: 500; --yd-z-modal: 1000; --yd-z-toast: 2000; /* ══════════════════════════════════════════════════════════ YOUNGDYNAMICS BRAND TOKENS (default / fallback) Electric blue → violet | parent technology identity Combines all product accent streams in the hero animation ══════════════════════════════════════════════════════════ */ --brand-primary: #60A5FA; /* blue-400 — text/icons on dark */ --brand-primary-btn: #2563EB; /* blue-600 — button bg, white text ✓ 4.6:1 */ --brand-primary-hover: #1D4ED8; /* blue-700 — button hover */ --brand-primary-muted: rgba(96,165,250,0.12); --brand-glow: rgba(96,165,250,0.35); --brand-surface: rgba(96,165,250,0.06); --brand-border: rgba(96,165,250,0.2); --brand-text: #93C5FD; /* blue-300 */ --brand-gradient: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%); --brand-gradient-text: linear-gradient(135deg, #60A5FA 0%, #A78BFA 100%); /* Hero animation stream colors — YoungDynamics mixes all four products */ --brand-stream-a: 96,165,250; /* blue */ --brand-stream-b: 167,139,250; /* violet */ --brand-stream-c: 34,211,238; /* cyan */ --brand-stream-d: 252,211,77; /* amber */ } /* ══════════════════════════════════════════════════════════════ CONNEQT — CONNECT Cyan / Electric blue | connectivity · data flow · APIs · movement WCAG: btn #0E7490 on white → 5.3:1 ✓ AA ══════════════════════════════════════════════════════════════ */ :root[data-brand="conneqt"], .product-theme-conneqt { --brand-primary: #22D3EE; /* cyan-400 */ --brand-primary-btn: #0E7490; /* cyan-700 ✓ 5.3:1 with white */ --brand-primary-hover: #155E75; /* cyan-800 */ --brand-primary-muted: rgba(34,211,238,0.12); --brand-glow: rgba(34,211,238,0.4); --brand-surface: rgba(34,211,238,0.06); --brand-border: rgba(34,211,238,0.22); --brand-text: #67E8F9; /* cyan-300 */ --brand-gradient: linear-gradient(135deg, #0891B2 0%, #2563EB 100%); --brand-gradient-text: linear-gradient(135deg, #22D3EE 0%, #60A5FA 100%); --brand-stream-a: 34,211,238; --brand-stream-b: 96,165,250; --brand-stream-c: 103,232,249; --brand-stream-d: 14,116,144; } /* ══════════════════════════════════════════════════════════════ SENVIQ — COMMUNICATE Violet / Indigo | secure communication · trust · controlled delivery WCAG: btn #7C3AED on white → 5.6:1 ✓ AA ══════════════════════════════════════════════════════════════ */ :root[data-brand="senviq"], .product-theme-senviq { --brand-primary: #A78BFA; /* violet-400 */ --brand-primary-btn: #7C3AED; /* violet-600 ✓ 5.6:1 with white */ --brand-primary-hover: #6D28D9; /* violet-700 */ --brand-primary-muted: rgba(167,139,250,0.12); --brand-glow: rgba(167,139,250,0.4); --brand-surface: rgba(167,139,250,0.06); --brand-border: rgba(167,139,250,0.22); --brand-text: #C4B5FD; /* violet-300 */ --brand-gradient: linear-gradient(135deg, #7C3AED 0%, #4F46E5 100%); --brand-gradient-text: linear-gradient(135deg, #A78BFA 0%, #818CF8 100%); --brand-stream-a: 167,139,250; --brand-stream-b: 129,140,248; --brand-stream-c: 196,181,253; --brand-stream-d: 109,40,217; } /* ══════════════════════════════════════════════════════════════ VEYRIQ — VERIFY Turquoise / Mint-cyan | identity · precision · verification · authenticity NOT generically green — deliberately turquoise for differentiation WCAG: btn #0F766E on white → 5.4:1 ✓ AA STATUS: B1 BLOCKED — copy not yet approved ══════════════════════════════════════════════════════════════ */ :root[data-brand="veyriq"], .product-theme-veyriq { --brand-primary: #2DD4BF; /* teal-400 */ --brand-primary-btn: #0F766E; /* teal-700 ✓ 5.4:1 with white */ --brand-primary-hover: #0D5C57; /* teal-800 */ --brand-primary-muted: rgba(45,212,191,0.12); --brand-glow: rgba(45,212,191,0.4); --brand-surface: rgba(45,212,191,0.06); --brand-border: rgba(45,212,191,0.22); --brand-text: #5EEAD4; /* teal-300 */ --brand-gradient: linear-gradient(135deg, #0D9488 0%, #0891B2 100%); --brand-gradient-text: linear-gradient(135deg, #2DD4BF 0%, #22D3EE 100%); --brand-stream-a: 45,212,191; --brand-stream-b: 94,234,212; --brand-stream-c: 34,211,238; --brand-stream-d: 13,148,136; } /* ══════════════════════════════════════════════════════════════ RESILIQ — PROTECT Amber / Warm orange | resilience · awareness · visibility · protection NOT generically red — deliberately amber/warm for differentiation WCAG: btn #B45309 on white → 5.1:1 ✓ AA ══════════════════════════════════════════════════════════════ */ :root[data-brand="resiliq"], .product-theme-resiliq { --brand-primary: #FCD34D; /* amber-300 */ --brand-primary-btn: #B45309; /* amber-700 ✓ 5.1:1 with white */ --brand-primary-hover: #92400E; /* amber-800 */ --brand-primary-muted: rgba(252,211,77,0.12); --brand-glow: rgba(252,211,77,0.4); --brand-surface: rgba(252,211,77,0.06); --brand-border: rgba(252,211,77,0.22); --brand-text: #FDE68A; /* amber-200 */ --brand-gradient: linear-gradient(135deg, #D97706 0%, #EA580C 100%); --brand-gradient-text: linear-gradient(135deg, #FCD34D 0%, #FB923C 100%); --brand-stream-a: 252,211,77; --brand-stream-b: 253,230,138; --brand-stream-c: 217,119,6; --brand-stream-d: 234,88,12; } /* ══════════════════════════════════════════════════════════════ REDUCED MOTION — Accessibility prefers-reduced-motion: reduce → kill continuous animations ══════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* Canvas animations are paused by JS when reduced-motion is detected */ #hero-canvas, #cta-canvas, .product-hero-canvas { opacity: 0 !important; } /* Keep scroll-reveal visible without animation */ .scroll-reveal, .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ══════════════════════════════════════════════════════════════ COMPONENT TOKENS Derived from brand tokens — used in component CSS ══════════════════════════════════════════════════════════════ */ :root { /* Button */ --btn-primary-bg: var(--brand-primary-btn); --btn-primary-hover: var(--brand-primary-hover); --btn-primary-glow: var(--brand-glow); --btn-primary-text: #ffffff; /* Card */ --card-bg: var(--yd-surface-2); --card-border: var(--yd-border); --card-hover-border: var(--brand-border); --card-hover-shadow: var(--yd-shadow-lg); --card-hover-glow: var(--brand-surface); /* Badge */ --badge-color: var(--brand-primary); --badge-bg: var(--brand-primary-muted); --badge-border: var(--brand-border); /* Form */ --input-bg: var(--yd-surface-3); --input-border: var(--yd-border-medium); --input-focus: var(--brand-border); --input-glow: var(--brand-primary-muted); /* Nav */ --nav-scrolled-bg: rgba(10,10,11,0.88); --nav-border: rgba(255,255,255,0.06); } /* ══════════════════════════════════════════════════════════════ GRADIENT TEXT UTILITY — uses per-brand gradient ══════════════════════════════════════════════════════════════ */ .brand-gradient-text { background: var(--brand-gradient-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ══════════════════════════════════════════════════════════════ PRODUCT PUBLICATION GUARD Products with data-product-status="draft" are hidden by default. Set show-draft on body or a parent element for dev preview. ══════════════════════════════════════════════════════════════ */ [data-product-status="draft"] { display: none !important; } body.show-draft [data-product-status="draft"] { display: flex !important; outline: 2px dashed rgba(252,211,77,0.5); outline-offset: -4px; } body.show-draft [data-product-status="draft"]::after { content: 'DRAFT — NIET PUBLICEREN'; position: absolute; top: 8px; right: 8px; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; color: #FCD34D; background: rgba(0,0,0,0.8); padding: 3px 8px; border-radius: 4px; pointer-events: none; }