/* ========================================================================== MOTION — het standaardthema van AskTheDocument -------------------------------------------------------------------------- Koel blauwgrijs papier + kobaltblauw accent, Archivo + IBM Plex Mono, blauwdruk-raster met drijvend gloedveld. SCOPING Alles staat onder html[data-theme="motion"] — het enige thema van de site. De donkere variant schakelt via data-theme-mode="dark" op (gezet door de theme_mode-cookie, zie base.html); sectie 9 bevat de token- overrides. Componenten verwijzen naar tokens en kleuren dus vanzelf mee. LAADVOLGORDE Dit bestand wordt als laatste geladen. Waar main.css/tools.css met !important of hogere specificiteit werkt, gebruiken we hier ook !important — die gevallen staan in het blok "LEGACY-OVERRIDES". CACHE Statische CSS wordt 7 dagen immutable gecachet: bump ?v= in base.html EN landing.html bij elke wijziging hier. INDEX 1. Tokens 2. Basis: body, achtergrondlagen, typografie 3. Legacy-overrides (bestaande sitebrede klassen) 4. Motion-componenten (.mt-*) 5. Landingspagina-specifiek 6. Demo-console (.mt-demo-*) 7. Responsive 8. Reduced motion 9. Donkere variant (data-theme-mode="dark") ========================================================================== */ /* ========================================================================== 1. TOKENS ========================================================================== */ html[data-theme="motion"] { /* — vlakken — */ --bg-page: #f4f6fa; --bg-page-gradient: linear-gradient(180deg, #edf1f8 0%, #f4f6fa 320px, #f7f9fc 100%); --bg-card: #ffffff; --bg-card-hover: #ffffff; --bg-header: rgba(237, 241, 248, 0.8); --bg-input: #fbfcfe; --bg-input-focus: #ffffff; --bg-panel: #ffffff; --bg-dark-panel: #0e1726; /* — tekst — */ --text-primary: #0e1726; --text-secondary: #51607a; /* Handoff-waarde was #93a0b4 (2.5:1 op licht — onder WCAG AA); #5f6e88 is dezelfde blauwgrijze familie op 4.8:1 pagina / 5.2:1 kaart. */ --text-muted: #5f6e88; --text-on-dark: #c6d0de; --text-on-dark-muted: #8fa0ba; --text-on-accent: #ffffff; /* — accent — */ --accent: #2563eb; --accent-dark: #1d4ed8; --accent-hover: #1d4ed8; --accent-light: rgba(37, 99, 235, 0.08); --accent-on-dark: #60a5fa; --accent-rgb: 37, 99, 235; --accent-text: #ffffff; --accent-gradient: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); /* — randen — */ --border: rgba(14, 23, 38, 0.10); --border-light: rgba(14, 23, 38, 0.08); --border-input: rgba(14, 23, 38, 0.15); --border-strong: rgba(14, 23, 38, 0.18); --border-accent: rgba(37, 99, 235, 0.5); /* — status — */ --success: #15803d; --success-on-dark: #34d399; --error: #b91c1c; --error-on-dark: #f87171; --warning: #b45309; /* — schaduwen — */ --shadow-sm: 0 1px 2px rgba(14, 23, 38, 0.05); --shadow-md: 0 10px 28px rgba(14, 23, 38, 0.08); --shadow-lg: 0 20px 50px rgba(14, 23, 38, 0.08); --shadow-modal: 0 30px 80px rgba(14, 23, 38, 0.35); --shadow-dark-card: 0 14px 32px rgba(14, 23, 38, 0.25); /* — vorm — */ --radius-card: 14px; --radius-control: 10px; --radius-small: 8px; --radius-pill: 99px; /* — maten — */ --header-h: 66px; --content-max: 1200px; --content-pad: 40px; /* — typografie — */ --font-body: 'Archivo', system-ui, -apple-system, sans-serif; --font-display: 'Archivo', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* — scrollbar — */ --scrollbar-track: #edf1f8; --scrollbar-thumb: #c8d2e2; --scrollbar-hover: #aab8ce; /* knoppen: vaste kobalt-achtergrond met witte tekst. Losgekoppeld van --accent zodat --accent in de donkere variant lichter kan worden (leesbare links) zonder dat knopachtergronden mee verbleken. */ --accent-bg: #2563eb; --accent-bg-hover: #1d4ed8; /* matglazen oppervlakken (mobiele nav-overlay, cookiebanner) */ --bg-frost: rgba(244, 246, 250, 0.97); /* subtiele hover-achtergrond op interactieve regels */ --hover-tint: rgba(14, 23, 38, 0.04); /* het decoratieve gereedschapspatroon van main.css uit */ --bg-pattern-color: #2563eb; --bg-pattern-opacity: 0; /* legacy aliassen (main.css/tools.css gebruiken deze nog) */ --bg-dark: #f4f6fa; --card-bg: #ffffff; --border-color: rgba(14, 23, 38, 0.10); --border-dim: rgba(14, 23, 38, 0.08); --primary-gold: #2563eb; --accent-gold: #1d4ed8; color-scheme: light; } /* ========================================================================== 2. BASIS — body, achtergrondlagen, typografie ========================================================================== */ html[data-theme="motion"] body { background-color: var(--bg-page) !important; background-image: var(--bg-page-gradient) !important; background-attachment: fixed; color: var(--text-primary) !important; font-family: var(--font-body) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.003em; overflow-x: hidden; padding-top: var(--header-h); } /* Blauwdruk-raster (sitebreed, zachter dan op de landing) */ html[data-theme="motion"] body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(29, 78, 216, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(29, 78, 216, 0.07) 1px, transparent 1px); background-size: 168px 126px; -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.4) 40%, transparent 62%); mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.4) 40%, transparent 62%); } /* Gloedveld — vervangt het gereedschapspatroon dat main.css op body::after zet */ html[data-theme="motion"] body::after { content: ''; position: fixed; top: -140px; right: -120px; left: auto; bottom: auto; width: 540px; height: 540px; border-radius: 50%; z-index: 0; opacity: 1; pointer-events: none; background-image: none; background: radial-gradient(circle, rgba(37, 99, 235, 0.12) 0%, transparent 60%); animation: mtGlowDrift 20s ease-in-out infinite; } @keyframes mtGlowDrift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-46px, 26px) scale(1.06); } } @keyframes mtGlowDrift2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(60px, 30px) scale(1.08); } } /* Tweede gloedveld van de landing: drijft de andere kant op (links-omhoog), zodat de twee velden niet synchroon lijken te bewegen. */ @keyframes mtGlowDriftB { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-50px, -24px) scale(1.05); } } @keyframes mtRiseIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } /* Content boven de achtergrondlagen */ html[data-theme="motion"] .main-container, html[data-theme="motion"] .main-content, html[data-theme="motion"] .tool-container, html[data-theme="motion"] main { position: relative; z-index: 1; background: transparent; } html[data-theme="motion"] .main-container { min-height: calc(100vh - var(--header-h)); } /* Typografie — Cinzel vervalt overal */ html[data-theme="motion"] h1, html[data-theme="motion"] h2, html[data-theme="motion"] h3, html[data-theme="motion"] h4, html[data-theme="motion"] .font-cinzel { font-family: var(--font-display) !important; font-weight: 700 !important; letter-spacing: -0.03em !important; color: var(--text-primary) !important; text-wrap: balance; } html[data-theme="motion"] h1 { font-size: 1.9rem; line-height: 1.12; } html[data-theme="motion"] h2 { font-size: 1.7rem; line-height: 1.18; } html[data-theme="motion"] h3 { font-size: 1.12rem; line-height: 1.3; } html[data-theme="motion"] a { color: var(--accent); text-decoration: none; } html[data-theme="motion"] a:hover { color: var(--accent-hover); } /* De generieke a-regel hierboven (specificiteit 0,1,2) verslaat de bewust óngescoopte componentklassen uit motion_tools.css (0,1,0 / 0,1,1). Zonder deze herbevestiging kregen anchor-knoppen accentblauwe tekst op een accentblauwe achtergrond (onzichtbaar — zie /errors merk-pills en de tool-CTA's) en kruimelpaden de accentkleur in plaats van gedempt grijs. */ html[data-theme="motion"] a.mt-tool-btn, html[data-theme="motion"] a.mt-tool-btn:hover { color: #fff; } html[data-theme="motion"] a.mt-tool-btn.mt-tool-btn-ghost { color: var(--text-secondary); } html[data-theme="motion"] a.mt-tool-btn.mt-tool-btn-ghost:hover { color: var(--text-primary); } html[data-theme="motion"] .mt-tool-crumbs a { color: var(--text-muted); } html[data-theme="motion"] .mt-tool-crumbs a:hover { color: var(--accent); } html[data-theme="motion"] ::selection { background: rgba(37, 99, 235, 0.18); color: var(--text-primary); } html[data-theme="motion"] ::placeholder { color: var(--text-muted); } html[data-theme="motion"] ::-webkit-scrollbar-track { background: var(--scrollbar-track); } html[data-theme="motion"] ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); } html[data-theme="motion"] ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); } /* ========================================================================== 3. LEGACY-OVERRIDES Bestaande sitebrede klassen uit main.css / tools.css. Doel: pagina's die nog niet naar .mt-* zijn omgebouwd zien er alvast licht en samenhangend uit in plaats van donker-Kelvin. ========================================================================== */ /* — Header ------------------------------------------------------------- */ html[data-theme="motion"] header { height: var(--header-h) !important; min-height: var(--header-h) !important; padding: 0 var(--content-pad) !important; gap: 28px !important; background: var(--bg-header) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-light) !important; box-shadow: none !important; } html[data-theme="motion"] header::after { display: none !important; } /* Twee-traps-headerelementen (blueprint/kelvin) horen niet bij Motion */ html[data-theme="motion"] .bp-brand-extras, html[data-theme="motion"] .bp-page-title, html[data-theme="motion"] .header-page-title, html[data-theme="motion"] header .vdiv { display: none !important; } /* Logo-lockup */ html[data-theme="motion"] .logo-section { display: inline-flex !important; align-items: center; gap: 10px; flex-shrink: 0; color: var(--text-primary); text-decoration: none; padding: 0 !important; } html[data-theme="motion"] .logo-img-motion { height: 36px; width: auto; display: block; } html[data-theme="motion"] .brand-name, html[data-theme="motion"] .mt-wordmark { font-family: var(--font-display) !important; font-weight: 800 !important; font-size: 0.95rem !important; letter-spacing: -0.03em !important; color: var(--text-primary) !important; background: none !important; -webkit-text-fill-color: var(--text-primary) !important; filter: none !important; white-space: nowrap; } /* Navigatie */ html[data-theme="motion"] .nav-center { gap: 4px; } html[data-theme="motion"] .nav-link { font-family: var(--font-body) !important; font-size: 0.86rem !important; font-weight: 500 !important; color: var(--text-secondary) !important; padding: 8px 12px !important; border-radius: var(--radius-small) !important; transition: color 0.15s, background 0.15s; } html[data-theme="motion"] .nav-link:hover { color: var(--text-primary) !important; background: var(--hover-tint) !important; } html[data-theme="motion"] .nav-link.active { color: var(--accent) !important; background: var(--accent-light) !important; } html[data-theme="motion"] .nav-link.active::after { display: none !important; } /* Headerknoppen rechts */ html[data-theme="motion"] .header-divider { background: var(--border) !important; width: 1px; } html[data-theme="motion"] .qt-btn, html[data-theme="motion"] .theme-toggle, html[data-theme="motion"] .user-menu-trigger, html[data-theme="motion"] .mobile-menu-toggle { background: transparent !important; border: 1px solid var(--border) !important; border-radius: var(--radius-small) !important; color: var(--text-secondary) !important; font-family: var(--font-body) !important; } html[data-theme="motion"] .user-menu-trigger { color: var(--text-primary) !important; font-size: 0.85rem !important; font-weight: 600 !important; padding: 8px 14px !important; border-radius: var(--radius-control) !important; } html[data-theme="motion"] .qt-btn:hover, html[data-theme="motion"] .theme-toggle:hover, html[data-theme="motion"] .user-menu-trigger:hover, html[data-theme="motion"] .mobile-menu-toggle:hover { border-color: var(--accent) !important; color: var(--accent) !important; background: var(--accent-light) !important; } html[data-theme="motion"] .qt-tooltip { background: var(--bg-dark-panel) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: var(--radius-small) !important; } html[data-theme="motion"] .user-menu-dropdown { background: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: 12px !important; box-shadow: var(--shadow-md) !important; padding: 6px !important; } html[data-theme="motion"] .user-menu-dropdown::before { display: none !important; } html[data-theme="motion"] .user-menu-dropdown a, html[data-theme="motion"] .user-menu-dropdown button { border-radius: var(--radius-small); font-family: var(--font-body) !important; font-size: 0.85rem !important; color: var(--text-primary) !important; } html[data-theme="motion"] .user-menu-dropdown a:hover, html[data-theme="motion"] .user-menu-dropdown button:hover { background: var(--accent-light) !important; color: var(--accent) !important; } html[data-theme="motion"] .menu-divider { background: var(--border-light) !important; } /* Mobiele navigatie-overlay */ html[data-theme="motion"] .nav-mobile-overlay { background: var(--bg-frost) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } html[data-theme="motion"] .nav-mobile-overlay a { color: var(--text-primary) !important; border-color: var(--border) !important; } html[data-theme="motion"] .nav-mobile-close { color: var(--text-secondary) !important; } /* — Knoppen ------------------------------------------------------------ */ html[data-theme="motion"] .btn-gold, html[data-theme="motion"] .btn-accent { background: var(--accent-bg) !important; background-image: none !important; color: var(--accent-text) !important; border: 1px solid var(--accent-bg) !important; border-radius: var(--radius-control) !important; font-family: var(--font-body) !important; font-weight: 600 !important; font-size: 0.86rem !important; padding: 10px 20px; transition: background 0.15s, border-color 0.15s !important; box-shadow: none !important; } html[data-theme="motion"] .btn-gold:hover, html[data-theme="motion"] .btn-accent:hover { background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; transform: none !important; box-shadow: none !important; } html[data-theme="motion"] .btn-outline, html[data-theme="motion"] .btn-gold.btn-outline { background: transparent !important; background-image: none !important; border: 1px solid var(--border-strong) !important; color: var(--text-primary) !important; box-shadow: none !important; } html[data-theme="motion"] .btn-outline:hover, html[data-theme="motion"] .btn-gold.btn-outline:hover { background: transparent !important; border-color: var(--text-primary) !important; color: var(--text-primary) !important; transform: none !important; } /* — Kaarten ------------------------------------------------------------ */ html[data-theme="motion"] .glass-card, html[data-theme="motion"] .glass-panel, html[data-theme="motion"] .filters-section, html[data-theme="motion"] .input-section, html[data-theme="motion"] .preview-panel, html[data-theme="motion"] .gold-border-box, html[data-theme="motion"] .result-feed, html[data-theme="motion"] .tool-card, html[data-theme="motion"] .calc-card { background: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-card) !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html[data-theme="motion"] .glass-card, html[data-theme="motion"] .glass-panel, html[data-theme="motion"] .gold-border-box, html[data-theme="motion"] .result-feed { padding: 26px !important; } html[data-theme="motion"] .glass-card { transition: border-color 0.2s, box-shadow 0.2s; } html[data-theme="motion"] .glass-card:hover, html[data-theme="motion"] .tool-card:hover { border-color: var(--border-accent) !important; box-shadow: var(--shadow-md) !important; transform: none !important; } /* — Formuliervelden ---------------------------------------------------- */ html[data-theme="motion"] input[type="text"], html[data-theme="motion"] input[type="email"], html[data-theme="motion"] input[type="password"], html[data-theme="motion"] input[type="number"], html[data-theme="motion"] input[type="search"], html[data-theme="motion"] input[type="tel"], html[data-theme="motion"] input[type="url"], html[data-theme="motion"] select, html[data-theme="motion"] textarea, html[data-theme="motion"] .premium-input, html[data-theme="motion"] .form-input, html[data-theme="motion"] .form-control { background: var(--bg-input) !important; border: 1px solid var(--border-input) !important; border-radius: var(--radius-control) !important; color: var(--text-primary) !important; font-family: var(--font-body) !important; } html[data-theme="motion"] input:focus, html[data-theme="motion"] select:focus, html[data-theme="motion"] textarea:focus, html[data-theme="motion"] .premium-input:focus, html[data-theme="motion"] .form-input:focus { background: var(--bg-input-focus) !important; border-color: var(--accent) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important; } html[data-theme="motion"] label, html[data-theme="motion"] .form-label { color: var(--text-secondary) !important; } /* — Modals / popups ---------------------------------------------------- */ html[data-theme="motion"] .qt-modal, html[data-theme="motion"] .modal-content, html[data-theme="motion"] .save-modal { background: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-card) !important; box-shadow: var(--shadow-modal) !important; color: var(--text-primary) !important; } html[data-theme="motion"] .qt-header { background: transparent !important; border-bottom: 1px solid var(--border-light) !important; color: var(--text-primary) !important; } html[data-theme="motion"] .qt-title { font-family: var(--font-mono) !important; letter-spacing: 0.12em; color: var(--text-secondary) !important; } /* — Voettekst ---------------------------------------------------------- */ html[data-theme="motion"] .site-footer { background: transparent !important; border-top: 1px solid var(--border-light) !important; margin-top: 60px; } html[data-theme="motion"] .footer-brand-name { font-family: var(--font-display) !important; font-weight: 800 !important; letter-spacing: -0.03em !important; color: var(--text-primary) !important; background: none !important; -webkit-text-fill-color: var(--text-primary) !important; } /* "Ask the Document" — het cursieve "the" van het oude merkbeeld vervalt */ html[data-theme="motion"] .footer-brand-name span, html[data-theme="motion"] .brand-name span { font-size: inherit !important; font-style: normal !important; font-weight: inherit !important; } html[data-theme="motion"] .footer-heading { font-family: var(--font-mono) !important; color: var(--text-muted) !important; letter-spacing: 0.12em; } html[data-theme="motion"] .footer-links a, html[data-theme="motion"] .footer-contact a, html[data-theme="motion"] .footer-tagline { color: var(--text-secondary) !important; } html[data-theme="motion"] .footer-links a:hover, html[data-theme="motion"] .footer-contact a:hover { color: var(--accent) !important; } html[data-theme="motion"] .footer-bottom { border-top-color: var(--border-light) !important; } html[data-theme="motion"] .footer-bottom p, html[data-theme="motion"] .footer-ip-disclaimer { color: var(--text-muted) !important; } /* — Diversen ----------------------------------------------------------- */ html[data-theme="motion"] .flash-container { top: calc(var(--header-h) + 12px) !important; } html[data-theme="motion"] .skip-link { background: var(--accent-bg); color: #fff; border-radius: 0 0 var(--radius-small) 0; } html[data-theme="motion"] #cookie-banner { background: var(--bg-frost) !important; border-top: 1px solid var(--border) !important; box-shadow: 0 -10px 30px rgba(14, 23, 38, 0.08) !important; } html[data-theme="motion"] .share-btn-result { border-radius: var(--radius-small) !important; color: var(--accent) !important; } /* Donkere panelen die tools/resultaten al gebruiken */ html[data-theme="motion"] .result-panel, html[data-theme="motion"] .results-panel { background: var(--bg-dark-panel) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: var(--radius-card) !important; color: var(--text-on-dark) !important; } html[data-theme="motion"] .result-panel .result-value, html[data-theme="motion"] .results-panel .result-value { font-family: var(--font-mono) !important; color: var(--accent-on-dark) !important; } /* ========================================================================== 4. MOTION-COMPONENTEN (.mt-*) De naamruimte waarop de vervolgpagina's bouwen. ========================================================================== */ /* — Layout ------------------------------------------------------------- */ html[data-theme="motion"] .mt-page { min-height: 100vh; display: flex; flex-direction: column; position: relative; /* clip i.p.v. hidden: hidden zou een scroll-container maken en daarmee position:sticky op de header breken. body vangt de rest op. */ overflow-x: clip; } /* Safari < 16 en oude WebViews kennen `clip` niet; daar valt de gloed anders buiten de viewport en ontstaat horizontaal scrollen. Dan liever `hidden`: de sticky header wordt daar gewoon een meescrollende header. */ @supports not (overflow: clip) { html[data-theme="motion"] .mt-page { overflow-x: hidden; } } html[data-theme="motion"] .mt-main { flex: 1; position: relative; z-index: 1; } html[data-theme="motion"] .mt-container { max-width: var(--content-max); margin: 0 auto; padding-left: var(--content-pad); padding-right: var(--content-pad); width: 100%; } html[data-theme="motion"] .mt-container-narrow { max-width: 760px; margin: 0 auto; padding-left: var(--content-pad); padding-right: var(--content-pad); width: 100%; } html[data-theme="motion"] .mt-section { padding-top: 72px; padding-bottom: 72px; } html[data-theme="motion"] .mt-section-tight { padding-top: 40px; padding-bottom: 40px; } /* Achtergrondlagen als expliciete elementen (landing gebruikt sterkere waarden) */ html[data-theme="motion"] .mt-grid-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(rgba(29, 78, 216, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(29, 78, 216, 0.07) 1px, transparent 1px); background-size: 168px 126px; -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.4) 40%, transparent 62%); mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.4) 40%, transparent 62%); } html[data-theme="motion"] .mt-glow { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; } html[data-theme="motion"] .mt-glow-a { top: -180px; right: -140px; width: 640px; height: 640px; background: radial-gradient(circle, rgba(37, 99, 235, 0.20) 0%, transparent 60%); animation: mtGlowDrift2 18s ease-in-out infinite; } html[data-theme="motion"] .mt-glow-b { top: 220px; left: -220px; width: 560px; height: 560px; background: radial-gradient(circle, rgba(96, 165, 250, 0.16) 0%, transparent 60%); animation: mtGlowDriftB 22s ease-in-out infinite; } /* — Header (standalone, bv. landing) ----------------------------------- */ html[data-theme="motion"] header.mt-header, html[data-theme="motion"] .mt-header { display: flex; align-items: center; gap: 32px; padding: 0 var(--content-pad) !important; height: var(--header-h) !important; border-bottom: 1px solid var(--border-light) !important; background: var(--bg-header) !important; position: sticky !important; top: 0; left: auto; right: auto; z-index: 100; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: none !important; } html[data-theme="motion"] .mt-logo { display: flex; align-items: center; gap: 10px; color: var(--text-primary); text-decoration: none; flex-shrink: 0; } html[data-theme="motion"] .mt-logo-img { height: 36px; width: auto; display: block; } html[data-theme="motion"] .mt-nav { display: flex; align-items: center; gap: 24px; min-width: 0; } html[data-theme="motion"] .mt-nav-link { color: var(--text-secondary); font-size: 0.87rem; font-weight: 500; white-space: nowrap; padding: 6px 10px; border-radius: var(--radius-small); transition: color 0.15s, background 0.15s; } html[data-theme="motion"] .mt-nav-link:hover { color: var(--text-primary); } html[data-theme="motion"] .mt-nav-link.active, html[data-theme="motion"] .mt-nav-link[aria-current="page"] { color: var(--accent); background: var(--accent-light); } html[data-theme="motion"] .mt-header-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; } /* Taalwissel in de headerbalk */ html[data-theme="motion"] .mt-lang { display: flex; align-items: center; gap: 6px; } html[data-theme="motion"] .mt-lang a { display: flex; transition: opacity 0.2s; } html[data-theme="motion"] .mt-lang a:hover { opacity: 1 !important; } /* Hamburger + mobiele overlay (standalone pagina's zoals de landing) */ html[data-theme="motion"] .mt-burger { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-small); color: var(--text-primary); cursor: pointer; } html[data-theme="motion"] .mt-burger:hover { border-color: var(--accent); color: var(--accent); } html[data-theme="motion"] .mt-mobile-nav { display: none; position: fixed; inset: 0; z-index: 1200; background: var(--bg-frost); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); flex-direction: column; align-items: stretch; gap: 6px; padding: 84px 24px 32px; } html[data-theme="motion"] .mt-mobile-nav.active { display: flex; } html[data-theme="motion"] .mt-mobile-nav a { font-size: 1.05rem; font-weight: 600; color: var(--text-primary); padding: 14px 12px; border-bottom: 1px solid var(--border-light); text-decoration: none; } html[data-theme="motion"] .mt-mobile-nav a:hover { color: var(--accent); } html[data-theme="motion"] .mt-mobile-nav .mt-btn { margin-top: 18px; justify-content: center; padding: 14px 22px; font-size: 0.95rem; } html[data-theme="motion"] .mt-mobile-nav .mt-btn + .mt-btn { margin-top: 10px; } html[data-theme="motion"] .mt-mobile-close { position: absolute; top: 18px; right: 20px; width: 38px; height: 38px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-small); color: var(--text-secondary); font-size: 1.4rem; line-height: 1; cursor: pointer; } html[data-theme="motion"] .mt-mobile-close:hover { border-color: var(--accent); color: var(--accent); } /* — Typografie --------------------------------------------------------- */ html[data-theme="motion"] .mt-eyebrow { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; color: var(--accent); text-transform: uppercase; margin: 0 0 14px; } html[data-theme="motion"] .mt-eyebrow-on-dark { color: var(--accent-on-dark); } html[data-theme="motion"] .mt-h1 { font-size: clamp(2.3rem, 4vw, 3.4rem); line-height: 1.04; font-weight: 800; letter-spacing: -0.04em; margin: 0 0 20px; text-wrap: balance; } html[data-theme="motion"] .mt-h2 { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.03em; margin: 0; text-wrap: balance; } html[data-theme="motion"] .mt-lead { color: var(--text-secondary); font-size: 1.08rem; line-height: 1.65; margin: 0 0 32px; text-wrap: pretty; } html[data-theme="motion"] .mt-note { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; color: var(--text-muted); text-transform: uppercase; margin: 16px 0 0; } html[data-theme="motion"] .mt-mono { font-family: var(--font-mono); } html[data-theme="motion"] .mt-muted { color: var(--text-muted); } html[data-theme="motion"] .mt-secondary { color: var(--text-secondary); } html[data-theme="motion"] .mt-rise { animation: mtRiseIn 0.5s ease-out both; } /* — Knoppen ------------------------------------------------------------ */ html[data-theme="motion"] .mt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-size: 0.86rem; font-weight: 600; border-radius: var(--radius-control); white-space: nowrap; cursor: pointer; text-decoration: none; border: 1px solid transparent; padding: 10px 20px; transition: background 0.15s, border-color 0.15s, color 0.15s; } html[data-theme="motion"] .mt-btn-accent { background: var(--accent-bg); border-color: var(--accent-bg); color: #fff; } html[data-theme="motion"] .mt-btn-accent:hover { background: var(--accent-bg-hover); border-color: var(--accent-bg-hover); color: #fff; } html[data-theme="motion"] .mt-btn-outline { background: transparent; border-color: var(--border-strong); color: var(--text-primary); padding: 9px 18px; } html[data-theme="motion"] .mt-btn-outline:hover { border-color: var(--text-primary); color: var(--text-primary); } html[data-theme="motion"] .mt-btn-lg { font-size: 0.95rem; padding: 15px 32px; } html[data-theme="motion"] .mt-btn-lg.mt-btn-outline { padding: 14px 22px; } html[data-theme="motion"] .mt-btn-hero { font-size: 0.92rem; padding: 14px 26px; } html[data-theme="motion"] .mt-btn-hero.mt-btn-outline { padding: 14px 22px; } html[data-theme="motion"] .mt-btn-sm { font-size: 0.82rem; padding: 8px 15px; } html[data-theme="motion"] .mt-btn-link { color: var(--accent); font-size: 0.84rem; font-weight: 600; padding: 8px 6px; } html[data-theme="motion"] .mt-btn-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } /* — Kaarten ------------------------------------------------------------ */ html[data-theme="motion"] .mt-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 26px; transition: box-shadow 0.2s, border-color 0.2s; } html[data-theme="motion"] .mt-card-link { display: block; color: inherit; text-decoration: none; } html[data-theme="motion"] .mt-card-link:hover, html[data-theme="motion"] .mt-card-hover:hover { color: inherit; border-color: var(--border-accent); box-shadow: var(--shadow-md); } html[data-theme="motion"] .mt-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; } html[data-theme="motion"] .mt-card-title { font-weight: 700; font-size: 1.12rem; letter-spacing: -0.015em; margin: 0 0 6px; } html[data-theme="motion"] .mt-card-desc { margin: 0 0 18px; font-size: 0.86rem; color: var(--text-secondary); line-height: 1.55; } html[data-theme="motion"] .mt-card-meta { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-muted); border-top: 1px solid var(--border-light); padding-top: 14px; display: flex; justify-content: space-between; gap: 8px; white-space: nowrap; overflow: hidden; } html[data-theme="motion"] .mt-card-meta strong, html[data-theme="motion"] .mt-card-meta .mt-card-meta-value { color: var(--accent); font-weight: 600; } html[data-theme="motion"] .mt-card-foot { font-size: 0.74rem; color: var(--text-muted); margin-top: 10px; } html[data-theme="motion"] .mt-card-foot a, html[data-theme="motion"] .mt-card-foot .mt-accent { color: var(--accent); font-weight: 600; } html[data-theme="motion"] .mt-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; } /* Donkere kaarten/panelen */ html[data-theme="motion"] .mt-card-dark, html[data-theme="motion"] .mt-panel-dark { background: var(--bg-dark-panel); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: var(--radius-card); color: var(--text-on-dark); padding: 26px; } html[data-theme="motion"] .mt-card-dark:hover { box-shadow: var(--shadow-dark-card); } html[data-theme="motion"] .mt-card-dark h2, html[data-theme="motion"] .mt-card-dark h3, html[data-theme="motion"] .mt-panel-dark h2, html[data-theme="motion"] .mt-panel-dark h3, html[data-theme="motion"] .mt-dark-section h2, html[data-theme="motion"] .mt-dark-section h3 { color: #fff !important; } /* — Badges & chips ----------------------------------------------------- */ html[data-theme="motion"] .mt-badge { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; color: var(--accent); background: rgba(37, 99, 235, 0.07); border-radius: 6px; padding: 4px 9px; } html[data-theme="motion"] .mt-badge-on-dark { color: var(--accent-on-dark); background: rgba(96, 165, 250, 0.14); font-weight: 600; letter-spacing: 0.06em; padding: 5px 10px; } html[data-theme="motion"] .mt-chips { display: flex; align-items: center; gap: 10px 8px; flex-wrap: wrap; } html[data-theme="motion"] .mt-chip { font-size: 0.82rem; font-weight: 500; color: var(--text-secondary); border: 1px solid rgba(14, 23, 38, 0.12); border-radius: var(--radius-pill); padding: 8px 16px; text-decoration: none; transition: border-color 0.15s, color 0.15s; } html[data-theme="motion"] .mt-chip:hover { border-color: var(--accent); color: var(--accent); } html[data-theme="motion"] .mt-chip.active { border-color: var(--accent); color: var(--accent); background: var(--accent-light); } /* — Statistiekregel ---------------------------------------------------- */ html[data-theme="motion"] .mt-stats { display: flex; gap: 36px; flex-wrap: wrap; } html[data-theme="motion"] .mt-stat-value { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 600; color: var(--text-primary); letter-spacing: -0.02em; line-height: 1.1; } html[data-theme="motion"] .mt-stat-label { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; } /* — Donkere sectie met kerncijfers ------------------------------------- */ html[data-theme="motion"] .mt-dark-section { background: var(--bg-dark-panel); color: #fff; } html[data-theme="motion"] .mt-dark-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 44px; align-items: start; padding-top: 76px; padding-bottom: 76px; } html[data-theme="motion"] .mt-dark-intro { grid-column: 1 / -1; max-width: 56ch; } html[data-theme="motion"] .mt-metric-value { font-family: var(--font-mono); font-size: 1.3rem; color: var(--accent-on-dark); font-weight: 600; margin-bottom: 12px; } html[data-theme="motion"] .mt-metric-title { font-weight: 700; font-size: 1.02rem; margin-bottom: 6px; color: #fff; } html[data-theme="motion"] .mt-metric-text { margin: 0; font-size: 0.88rem; color: var(--text-on-dark-muted); line-height: 1.6; } html[data-theme="motion"] .mt-metric-text .mt-mono { color: var(--accent-on-dark); } /* — CTA-strook --------------------------------------------------------- */ html[data-theme="motion"] .mt-cta-strip { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 22px 26px; } html[data-theme="motion"] .mt-cta-strip-title { font-weight: 700; font-size: 1.02rem; letter-spacing: -0.015em; margin-bottom: 3px; } html[data-theme="motion"] .mt-cta-strip-text { font-size: 0.86rem; color: var(--text-secondary); } /* — FAQ ---------------------------------------------------------------- */ html[data-theme="motion"] .mt-faq { display: flex; flex-direction: column; gap: 10px; } html[data-theme="motion"] .mt-faq details { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 15px 20px; } html[data-theme="motion"] .mt-faq summary { cursor: pointer; font-weight: 600; font-size: 0.92rem; color: var(--text-primary); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; } html[data-theme="motion"] .mt-faq summary::-webkit-details-marker { display: none; } html[data-theme="motion"] .mt-faq summary::after { content: '+'; font-family: var(--font-mono); color: var(--accent); font-size: 1.1rem; line-height: 1; transition: transform 0.2s; } html[data-theme="motion"] .mt-faq details[open] summary::after { transform: rotate(45deg); } html[data-theme="motion"] .mt-faq-a { margin-top: 9px; font-size: 0.87rem; color: var(--text-secondary); line-height: 1.6; } /* — Voettekst (standalone) --------------------------------------------- */ html[data-theme="motion"] .mt-footer { border-top: 1px solid var(--border-light); padding: 28px var(--content-pad); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; font-size: 0.8rem; color: var(--text-muted); position: relative; z-index: 1; } html[data-theme="motion"] .mt-footer-links { display: flex; gap: 22px; flex-wrap: wrap; } html[data-theme="motion"] .mt-footer-links a { color: var(--text-secondary); } html[data-theme="motion"] .mt-footer-links a:hover { color: var(--accent); } html[data-theme="motion"] .mt-footer-legal { max-width: 920px; margin: 0 auto; padding: 0 var(--content-pad) 28px; font-size: 0.72rem; line-height: 1.6; color: var(--text-muted); text-align: center; position: relative; z-index: 1; } /* ========================================================================== 5. LANDINGSPAGINA-SPECIFIEK Sterker raster (twee lagen) en twee gloedvelden; de standalone-header loopt mee in de flow, dus de body-offset van main.css vervalt. ========================================================================== */ html[data-theme="motion"] body.mt-landing { padding-top: 0 !important; background-image: linear-gradient(180deg, #e9eef7 0%, #f2f5fa 380px, #f7f9fc 100%) !important; background-color: #f2f5fa !important; } /* De landing tekent zijn eigen lagen als elementen — body-lagen uit */ html[data-theme="motion"] body.mt-landing::before, html[data-theme="motion"] body.mt-landing::after { content: none; display: none; } html[data-theme="motion"] .mt-landing-grid { position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(rgba(29, 78, 216, 0.10) 1px, transparent 1px), linear-gradient(90deg, rgba(29, 78, 216, 0.10) 1px, transparent 1px), linear-gradient(rgba(29, 78, 216, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(29, 78, 216, 0.055) 1px, transparent 1px); background-size: 168px 126px, 168px 126px, 28px 21px, 28px 21px; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 34%, rgba(0, 0, 0, 0.35) 58%, transparent 82%); mask-image: linear-gradient(180deg, #000 0%, #000 34%, rgba(0, 0, 0, 0.35) 58%, transparent 82%); } html[data-theme="motion"] .mt-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 64px; align-items: center; padding: 80px var(--content-pad) 56px; max-width: var(--content-max); margin: 0 auto; } /* Grid-kinderen mogen krimpen onder hun inhoud — anders duwt de monospace demo de track breder dan de viewport (klassieke grid blowout). */ html[data-theme="motion"] .mt-hero > * { min-width: 0; } /* Schaarste-strook (lopende actie met een aflopend aantal plekken). Staat er alleen zolang de actie loopt, dus de hero moet er ook zónder kloppen. */ html[data-theme="motion"] .mt-slots { display: inline-flex; align-items: center; gap: 9px; margin-top: 14px; padding: 8px 14px; border: 1px solid rgba(var(--accent-rgb), 0.22); background: rgba(var(--accent-rgb), 0.06); border-radius: var(--radius-pill); font-size: 0.78rem; font-weight: 500; line-height: 1.4; color: var(--text-secondary); } html[data-theme="motion"] .mt-slots-dot { width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.14); } html[data-theme="motion"] .mt-section-head { margin-bottom: 40px; } html[data-theme="motion"] .mt-section-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; } /* ========================================================================== 6. DEMO-CONSOLE (.mt-demo-*) Pure CSS: 3 absolute lagen, 27s-cyclus met 9s offset. De eerste laag start zichtbaar (mtDemoLayerA) zodat er nooit een leeg paneel staat. ========================================================================== */ @keyframes mtDemoLayer { 0% { opacity: 0; } 2% { opacity: 1; } 30% { opacity: 1; } 33.3%, 100% { opacity: 0; } } @keyframes mtDemoLayerA { 0% { opacity: 1; } 30% { opacity: 1; } 33.3% { opacity: 0; } 97% { opacity: 0; } 100% { opacity: 1; } } @keyframes mtTypeQ { 0% { width: 0; } 9% { width: var(--qw); } 100% { width: var(--qw); } } @keyframes mtScanShow { 0%, 9% { opacity: 0; } 10% { opacity: 1; } 14% { opacity: 1; } 15.5%, 100% { opacity: 0; } } @keyframes mtAnswerShow { 0%, 15% { opacity: 0; transform: translateY(10px); } 18% { opacity: 1; transform: none; } 30% { opacity: 1; } 33.3%, 100% { opacity: 0; } } @keyframes mtScanMove { 0% { background-position: 0% 0; } 100% { background-position: -200% 0; } } @keyframes mtBlink { 50% { opacity: 0; } } html[data-theme="motion"] .mt-demo { background: var(--bg-dark-panel); border-radius: 20px; overflow: hidden; box-shadow: 0 30px 60px rgba(14, 23, 38, 0.25); } html[data-theme="motion"] .mt-demo-head { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; color: var(--text-on-dark-muted); } html[data-theme="motion"] .mt-demo-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success-on-dark); box-shadow: 0 0 10px rgba(52, 211, 153, 0.7); flex-shrink: 0; } html[data-theme="motion"] .mt-demo-title { color: #fff; font-weight: 600; white-space: nowrap; } html[data-theme="motion"] .mt-demo-tag { margin-left: auto; } html[data-theme="motion"] .mt-demo-stage { position: relative; height: 330px; } html[data-theme="motion"] .mt-demo-layer { position: absolute; inset: 0; padding: 20px; opacity: 0; } html[data-theme="motion"] .mt-demo-layer-1 { opacity: 1; animation: mtDemoLayerA 27s linear 0s infinite; } html[data-theme="motion"] .mt-demo-layer-2 { animation: mtDemoLayer 27s linear 9s infinite; } html[data-theme="motion"] .mt-demo-layer-3 { animation: mtDemoLayer 27s linear 18s infinite; } html[data-theme="motion"] .mt-demo-src { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.12em; color: var(--text-on-dark-muted); margin-bottom: 10px; } html[data-theme="motion"] .mt-demo-qline { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 13px 16px; margin-bottom: 14px; min-height: 20px; } html[data-theme="motion"] .mt-demo-prompt { font-family: var(--font-mono); color: var(--accent-on-dark); font-weight: 600; } html[data-theme="motion"] .mt-demo-q { font-family: var(--font-mono); font-size: 0.84rem; color: #fff; white-space: nowrap; overflow: hidden; } html[data-theme="motion"] .mt-demo-q-type { width: 0; } html[data-theme="motion"] .mt-demo-layer-2 .mt-demo-q-type { animation: mtTypeQ 27s steps(28, end) 9s infinite; } html[data-theme="motion"] .mt-demo-layer-3 .mt-demo-q-type { animation: mtTypeQ 27s steps(28, end) 18s infinite; } html[data-theme="motion"] .mt-demo-caret { width: 8px; height: 16px; background: var(--accent-on-dark); animation: mtBlink 1s step-end infinite; flex-shrink: 0; } html[data-theme="motion"] .mt-demo-scan { height: 2px; border-radius: 2px; margin: 0 2px 14px; background: linear-gradient(90deg, #2563eb, #60a5fa, #2563eb); background-size: 200% 100%; opacity: 0; } html[data-theme="motion"] .mt-demo-layer-1 .mt-demo-scan { animation: mtScanShow 27s linear 0s infinite, mtScanMove 1.1s linear infinite; } html[data-theme="motion"] .mt-demo-layer-2 .mt-demo-scan { animation: mtScanShow 27s linear 9s infinite, mtScanMove 1.1s linear infinite; } html[data-theme="motion"] .mt-demo-layer-3 .mt-demo-scan { animation: mtScanShow 27s linear 18s infinite, mtScanMove 1.1s linear infinite; } html[data-theme="motion"] .mt-demo-reveal { opacity: 1; } html[data-theme="motion"] .mt-demo-layer-2 .mt-demo-reveal { opacity: 0; animation: mtAnswerShow 27s ease 9s infinite; } html[data-theme="motion"] .mt-demo-layer-3 .mt-demo-reveal { opacity: 0; animation: mtAnswerShow 27s ease 18s infinite; } html[data-theme="motion"] .mt-demo-split { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 12px; align-items: stretch; } html[data-theme="motion"] .mt-demo-answer { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: var(--radius-card); padding: 16px 18px; } html[data-theme="motion"] .mt-demo-answer-label { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; color: var(--success-on-dark); text-transform: uppercase; margin-bottom: 10px; display: flex; align-items: center; gap: 7px; } html[data-theme="motion"] .mt-demo-answer-label::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--success-on-dark); } html[data-theme="motion"] .mt-demo-answer p { margin: 0 0 10px; font-size: 0.88rem; color: var(--text-on-dark); line-height: 1.6; } html[data-theme="motion"] .mt-demo-answer p + p { margin-bottom: 12px; font-size: 0.84rem; color: var(--text-on-dark-muted); } html[data-theme="motion"] .mt-demo-answer strong { color: #fff; } html[data-theme="motion"] .mt-demo-answer .mt-mono { color: var(--accent-on-dark); } /* Miniatuur van de bronpagina */ html[data-theme="motion"] .mt-demo-page { background: #f4f1ea; border-radius: 6px; padding: 10px 9px; font-family: var(--font-mono); color: #2a2a35; overflow: hidden; position: relative; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); } html[data-theme="motion"] .mt-demo-page-head { display: flex; justify-content: space-between; font-size: 0.5rem; font-weight: 600; border-bottom: 1px solid #d8d4ca; padding-bottom: 3px; margin-bottom: 6px; } html[data-theme="motion"] .mt-demo-page-head span:last-child { font-weight: 400; color: #6a6558; } html[data-theme="motion"] .mt-demo-line { height: 3px; background: #c9c4b8; border-radius: 2px; margin-bottom: 4px; } html[data-theme="motion"] .mt-demo-table { border: 1px solid #b5afa1; border-radius: 3px; overflow: hidden; font-size: 0.44rem; margin: 6px 0 4px; } html[data-theme="motion"] .mt-demo-row { display: grid; grid-template-columns: 0.6fr 1.4fr; padding: 2.5px 5px; gap: 5px; border-bottom: 1px solid #d8d4ca; } html[data-theme="motion"] .mt-demo-row:last-child { border-bottom: none; } html[data-theme="motion"] .mt-demo-row b { font-weight: 600; } html[data-theme="motion"] .mt-demo-row-head { background: #e3dfd5; font-weight: 600; } html[data-theme="motion"] .mt-demo-row-hit { background: rgba(96, 165, 250, 0.4); } html[data-theme="motion"] .mt-demo-pagebadge { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); background: var(--bg-dark-panel); border: 1px solid var(--accent-on-dark); color: var(--accent-on-dark); font-size: 0.48rem; font-weight: 600; letter-spacing: 0.05em; padding: 2px 8px; border-radius: 20px; white-space: nowrap; } html[data-theme="motion"] .mt-demo-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.8rem; color: var(--text-on-dark-muted); } html[data-theme="motion"] .mt-demo-foot a { color: var(--accent-on-dark); font-weight: 600; white-space: nowrap; } html[data-theme="motion"] .mt-demo-foot a:hover { color: #93c5fd; } /* ========================================================================== 7. RESPONSIVE ========================================================================== */ @media (max-width: 1024px) { html[data-theme="motion"] { --content-pad: 24px; } html[data-theme="motion"] header, html[data-theme="motion"] .mt-header { gap: 16px; } } @media (max-width: 880px) { html[data-theme="motion"] .mt-header .mt-nav, html[data-theme="motion"] .mt-hide-sm { display: none !important; } html[data-theme="motion"] .mt-burger { display: inline-flex; } } @media (max-width: 900px) { html[data-theme="motion"] .mt-hero { grid-template-columns: 1fr; gap: 44px; padding-top: 52px; } html[data-theme="motion"] .mt-demo-stage { height: 380px; } html[data-theme="motion"] .mt-demo-split { grid-template-columns: 1fr; } html[data-theme="motion"] .mt-demo-page { display: none; } } @media (max-width: 640px) { html[data-theme="motion"] { --content-pad: 18px; } html[data-theme="motion"] .mt-h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); } html[data-theme="motion"] .mt-section { padding-top: 48px; padding-bottom: 48px; } html[data-theme="motion"] .mt-stats { gap: 22px; } html[data-theme="motion"] .mt-stat-value { font-size: 1.3rem; } html[data-theme="motion"] .mt-footer { justify-content: center; text-align: center; } html[data-theme="motion"] .mt-cta-strip { flex-direction: column; align-items: flex-start; } } @media (max-width: 480px) { /* Hero-CTA's mogen op smalle schermen vollopen i.p.v. naast elkaar wringen. */ html[data-theme="motion"] .mt-hero .mt-btn-hero { flex: 1 1 100%; } } /* ========================================================================== 8. REDUCED MOTION Het gloedveld en de demo-cyclus staan stil; de demo toont laag 1. ========================================================================== */ @media (prefers-reduced-motion: reduce) { html[data-theme="motion"] body::after, html[data-theme="motion"] .mt-glow, html[data-theme="motion"] .mt-rise, html[data-theme="motion"] .mt-demo-caret, html[data-theme="motion"] .mt-demo-scan, html[data-theme="motion"] .mt-demo-layer, html[data-theme="motion"] .mt-demo-q-type, html[data-theme="motion"] .mt-demo-reveal { animation: none !important; } html[data-theme="motion"] .mt-rise { opacity: 1; transform: none; } html[data-theme="motion"] .mt-demo-layer-1 { opacity: 1; } html[data-theme="motion"] .mt-demo-layer-2, html[data-theme="motion"] .mt-demo-layer-3 { opacity: 0; } html[data-theme="motion"] .mt-demo-q-type { width: var(--qw); } html[data-theme="motion"] .mt-demo-reveal { opacity: 1; transform: none; } } /* ========================================================================== 9. DONKERE VARIANT Geactiveerd via data-theme-mode="dark" op (theme_mode-cookie; de header-schakelaar zet het attribuut ook live om, zonder reload). Vrijwel alles is een token-omzetting: componenten verwijzen naar de variabelen hierboven en kleuren dus vanzelf mee. Daaronder een handvol gerichte overrides voor plekken met bewust hardgecodeerde lichte waarden. Palet: dezelfde familie als de bestaande donkere Motion-panelen (#0e1726 / #60a5fa) — de donkere variant voelt daardoor als hetzelfde merk, niet als een tweede thema. Knoppen houden kobalt (#2563eb) met witte tekst; tekst-accenten verschuiven naar #60a5fa voor AA-contrast. ========================================================================== */ html[data-theme="motion"][data-theme-mode="dark"] { /* — vlakken — */ --bg-page: #0b1220; --bg-page-gradient: linear-gradient(180deg, #0a101c 0%, #0b1220 320px, #0c1424 100%); --bg-card: #121c30; --bg-card-hover: #16223a; --bg-header: rgba(10, 16, 28, 0.82); --bg-input: #0f1828; --bg-input-focus: #121c30; --bg-panel: #121c30; /* donkere panelen iets lichter dan de pagina, anders tekenen ze zich niet meer af */ --bg-dark-panel: #131f34; /* — tekst — */ --text-primary: #e8edf6; --text-secondary: #a9b6cb; --text-muted: #8b99b2; --text-on-dark: #c6d0de; --text-on-dark-muted: #8fa0ba; --text-on-accent: #ffffff; /* — accent (tekstrol; knoppen via --accent-bg) — */ --accent: #60a5fa; --accent-dark: #3b82f6; --accent-hover: #93c5fd; --accent-light: rgba(96, 165, 250, 0.10); --accent-on-dark: #60a5fa; --accent-rgb: 96, 165, 250; /* — randen — */ --border: rgba(214, 226, 246, 0.10); --border-light: rgba(214, 226, 246, 0.07); --border-input: rgba(214, 226, 246, 0.14); --border-strong: rgba(214, 226, 246, 0.19); --border-accent: rgba(96, 165, 250, 0.5); /* — status — */ --success: #34d399; --error: #f87171; --warning: #fbbf24; /* — schaduwen — */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.40); --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.45); --shadow-modal: 0 30px 80px rgba(0, 0, 0, 0.65); --shadow-dark-card: 0 14px 32px rgba(0, 0, 0, 0.5); /* — scrollbar — */ --scrollbar-track: #0d1526; --scrollbar-thumb: #2a3a58; --scrollbar-hover: #3a4d70; /* — oppervlakken — */ --bg-frost: rgba(10, 16, 28, 0.96); --hover-tint: rgba(214, 226, 246, 0.05); /* legacy aliassen (main.css/tools.css) */ --bg-dark: #0b1220; --card-bg: #121c30; --border-color: rgba(214, 226, 246, 0.10); --border-dim: rgba(214, 226, 246, 0.07); --primary-gold: #60a5fa; --accent-gold: #93c5fd; color-scheme: dark; } /* De landing zet zijn gradient met !important op body — hier omzetten. */ html[data-theme="motion"][data-theme-mode="dark"] body.mt-landing { background-image: linear-gradient(180deg, #0a101c 0%, #0b1220 380px, #0c1424 100%) !important; background-color: #0b1220 !important; } /* Rasterlijnen: dezelfde blauwdruk maar met lichtblauw i.p.v. donker kobalt, anders vallen ze tegen de donkere grond weg. */ html[data-theme="motion"][data-theme-mode="dark"] .mt-grid-bg { background-image: linear-gradient(rgba(96, 165, 250, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(96, 165, 250, 0.06) 1px, transparent 1px); } html[data-theme="motion"][data-theme-mode="dark"] .mt-landing-grid { background-image: linear-gradient(rgba(96, 165, 250, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(96, 165, 250, 0.08) 1px, transparent 1px), linear-gradient(rgba(96, 165, 250, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(96, 165, 250, 0.045) 1px, transparent 1px); } /* Chips en badges: de lichte tinten waren op wit berekend. */ html[data-theme="motion"][data-theme-mode="dark"] .mt-chip { border-color: var(--border-strong); } html[data-theme="motion"][data-theme-mode="dark"] .mt-badge { background: rgba(96, 165, 250, 0.12); } /* Donkere panelen behouden hun witte koppen — dat klopt ook hier — maar de rand mag iets sterker zodat panel en pagina niet in elkaar overlopen. */ html[data-theme="motion"][data-theme-mode="dark"] .mt-card-dark, html[data-theme="motion"][data-theme-mode="dark"] .mt-panel-dark { border-color: rgba(214, 226, 246, 0.13); } /* Focusring: lichtblauw op donker. */ html[data-theme="motion"][data-theme-mode="dark"] input:focus, html[data-theme="motion"][data-theme-mode="dark"] select:focus, html[data-theme="motion"][data-theme-mode="dark"] textarea:focus, html[data-theme="motion"][data-theme-mode="dark"] .premium-input:focus, html[data-theme="motion"][data-theme-mode="dark"] .form-input:focus { box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18) !important; } /* Selectie-highlight op donker. */ html[data-theme="motion"][data-theme-mode="dark"] ::selection { background: rgba(96, 165, 250, 0.28); color: var(--text-primary); }