/* ============================================================ DYSUN TOOLS PLATFORM — Design System Brand: #FDC500 yellow · #111111 black · #36393D anthracite ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); /* ── Custom Properties ── */ :root { color-scheme: dark; --c-yellow: #FDC500; --c-yellow-hover: #E8B400; --c-yellow-dim: rgba(253,197,0,0.12); --c-yellow-glow: rgba(253,197,0,0.25); --c-black: #0A0A0A; --c-bg: #111111; --c-surface-1: #161616; --c-surface-2: #1E1E1E; --c-surface-3: #262626; --c-surface-4: #303030; --c-anthracite:#36393D; --c-border: rgba(255,255,255,0.07); --c-border-strong: rgba(255,255,255,0.14); --c-border-yellow: rgba(253,197,0,0.35); --c-text: #F0F0F0; --c-text-soft: #B0B0B0; --c-text-muted:#707070; --c-text-dim: #444444; --c-success: #22C55E; --c-success-dim: rgba(34,197,94,0.12); --c-danger: #EF4444; --c-danger-dim: rgba(239,68,68,0.12); --c-info: #3B82F6; --c-info-dim: rgba(59,130,246,0.12); --c-warning: #F59E0B; --c-warning-dim: rgba(245,158,11,0.12); /* Goud als tékst (links, accenten, cijfers). In dark gelijk aan --c-yellow; light mode zet hier een donker goud neer omdat #FDC500 op wit 1,6:1 haalt. */ --c-gold-text: #FDC500; --c-gold-text-hover: #E8B400; /* Callout-tekst: opgelichte statuskleur op de -dim tint */ --c-info-text: #93C5FD; --c-warning-text: #FCD34D; --c-danger-text: #FCA5A5; --c-success-text: #86EFAC; /* Scrims, glas en schaduwen als RGB-drieslag, zodat alpha per plek blijft */ --c-scrim-rgb: 10,10,10; --c-glass-rgb: 255,255,255; --c-shadow-rgb: 0,0,0; --c-nav-bg: rgba(10,10,10,0.92); --c-shimmer: rgba(255,255,255,0.45); --font: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'Fira Code', 'Consolas', 'Monaco', monospace; --r-sm: 6px; --r: 10px; --r-lg: 16px; --r-xl: 22px; --r-full: 9999px; --shadow-sm: 0 1px 4px rgba(0,0,0,0.5); --shadow: 0 4px 20px rgba(0,0,0,0.5); --shadow-lg: 0 10px 40px rgba(0,0,0,0.6); --shadow-yellow: 0 4px 24px rgba(253,197,0,0.15); --nav-h: 74px; --content-max: 1280px; --t: 0.16s ease; } /* ── Light mode ── Opt-in via data-theme="light" op , gezet door assets/js/theme.js. Standaard blijft dark; de OS-voorkeur wordt bewust niet gevolgd (zie DECISIONS.md). Alleen tokens veranderen, componenten kleuren mee. --c-yellow blijft #FDC500 als vulling; --c-black blijft de inkt op goud. Contrast: --c-gold-text 6,1:1 op wit, --c-text-muted 5,0:1 op --c-bg. */ html[data-theme="light"] { color-scheme: light; --c-yellow-dim: rgba(253,197,0,0.16); --c-yellow-glow: rgba(253,197,0,0.30); --c-gold-text: #7A5E00; --c-gold-text-hover: #6B5200; --c-bg: #F7F7F5; --c-surface-1: #FFFFFF; --c-surface-2: #F3F3F0; --c-surface-3: #ECECE8; --c-surface-4: #E2E2DD; --c-border: rgba(17,17,17,0.08); --c-border-strong: rgba(17,17,17,0.16); --c-border-yellow: rgba(180,140,0,0.45); --c-text: #111111; --c-text-soft: #4A4A4A; --c-text-muted:#6B6B6B; --c-text-dim: #9A9A9A; --c-success: #15803D; --c-success-dim: rgba(21,128,61,0.10); --c-danger: #B91C1C; --c-danger-dim: rgba(185,28,28,0.10); --c-info: #1D4ED8; --c-info-dim: rgba(29,78,216,0.10); --c-warning: #B45309; --c-warning-dim: rgba(180,83,9,0.10); --c-info-text: #1D4ED8; --c-warning-text: #B45309; --c-danger-text: #B91C1C; --c-success-text: #15803D; --c-scrim-rgb: 247,247,245; --c-glass-rgb: 17,17,17; --c-shadow-rgb: 17,17,17; --c-nav-bg: rgba(247,247,245,0.88); --c-shimmer: rgba(255,255,255,0.8); --shadow-sm: 0 1px 3px rgba(17,17,17,0.08); --shadow: 0 4px 16px rgba(17,17,17,0.10); --shadow-lg: 0 12px 40px rgba(17,17,17,0.14); --shadow-yellow: 0 4px 24px rgba(253,197,0,0.25); } /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font); background: var(--c-bg); color: var(--c-text); line-height: 1.6; font-size: 15px; min-height: 100vh; -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } a { color: var(--c-gold-text); text-decoration: none; transition: opacity var(--t); } a:hover { opacity: 0.8; } button, input, select, textarea { font: inherit; } button { cursor: pointer; } /* ── Scrollbar ── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--c-surface-1); } ::-webkit-scrollbar-thumb { background: var(--c-surface-4); border-radius: var(--r-full); } ::-webkit-scrollbar-thumb:hover { background: var(--c-anthracite); } /* ──────────────────────────────────────────── NAVIGATION ──────────────────────────────────────────── */ .topnav { position: sticky; top: 0; z-index: 100; /* min-height in plaats van height, plus flex-wrap: de balk was één rij die niet kon afbreken en had op de handleidingen tot 962px nodig. Paste hij niet, dan rekte de browser op telefoon en tablet de layout-viewport op tot de inhoud paste en zoomde het toestel de héle pagina uit; alles werd onleesbaar klein. Dat was de oorzaak van "raar weergegeven" op 36 van de 40 portaalpagina's (gemeten 04-09-2026), niet de inhoud eronder. Wrap staat bewust op elke breedte aan en niet alleen op telefoon: de balk breekt alleen af wanneer hij niet past, dus op een ruim scherm verandert er niets. `min-height` houdt de hoogte in dat geval precies gelijk. */ min-height: var(--nav-h); background: var(--c-nav-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--c-border); display: flex; align-items: center; flex-wrap: wrap; padding: 0 24px; gap: 32px; } /* Zonder dit weigert een flexkind smaller te worden dan zijn eigen inhoud en loopt de rij alsnog buiten beeld in plaats van af te breken. */ .topnav > * { min-width: 0; } /* Uitzondering op de regel hierboven: `.nav-links` heeft `flex: 1` en kromp met min-width: 0 tot 3px, terwijl de link erin 56px bleef. De themaknop schoof daar dan overheen. Met min-content breekt de rij af in plaats van te overlappen. */ .topnav .nav-links { flex-wrap: wrap; min-width: min-content; } .topnav .nav-right { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; } .nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; } .nav-logo-mark { width: 32px; height: 32px; background: var(--c-yellow); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; color: var(--c-black); letter-spacing: -0.5px; } .nav-logo-text { font-size: 15px; font-weight: 700; color: var(--c-text); line-height: 1; } .nav-logo-sub { font-size: 10px; font-weight: 400; color: var(--c-text-muted); letter-spacing: 0.06em; text-transform: uppercase; } .nav-links { display: flex; align-items: center; gap: 4px; flex: 1; } .nav-link { padding: 6px 14px; border-radius: var(--r-full); font-size: 13px; font-weight: 500; color: var(--c-text-muted); text-decoration: none; transition: all var(--t); border: 1px solid transparent; white-space: nowrap; } .nav-link:hover { color: var(--c-text); background: var(--c-surface-2); opacity: 1; } .nav-link.active { color: var(--c-gold-text); background: var(--c-yellow-dim); border-color: var(--c-border-yellow); } .nav-right { display: flex; align-items: center; gap: 12px; margin-left: auto; } .nav-badge { font-size: 11px; font-weight: 600; color: var(--c-gold-text); background: var(--c-yellow-dim); border: 1px solid var(--c-border-yellow); padding: 3px 10px; border-radius: var(--r-full); letter-spacing: 0.04em; } /* Breadcrumb */ .breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--c-text-muted); padding: 12px 24px; border-bottom: 1px solid var(--c-border); background: var(--c-surface-1); } .breadcrumb a { color: var(--c-text-muted); } .breadcrumb a:hover { color: var(--c-gold-text); } .breadcrumb-sep { color: var(--c-text-dim); } .breadcrumb-current { color: var(--c-text-soft); font-weight: 500; } /* ──────────────────────────────────────────── PAGE LAYOUT ──────────────────────────────────────────── */ .page { max-width: var(--content-max); margin: 0 auto; padding: 32px 24px 64px; } .page-wide { max-width: 1500px; margin: 0 auto; padding: 32px 24px 64px; } .page-narrow { max-width: 720px; margin: 0 auto; padding: 32px 24px 64px; } /* ──────────────────────────────────────────── TYPOGRAPHY ──────────────────────────────────────────── */ .h1 { font-size: 32px; font-weight: 800; line-height: 1.2; letter-spacing: -0.5px; } .h2 { font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.3px; } .h3 { font-size: 18px; font-weight: 600; line-height: 1.4; } .h4 { font-size: 15px; font-weight: 600; line-height: 1.4; } .text-sm { font-size: 13px; } .text-xs { font-size: 11px; letter-spacing: 0.02em; } .text-muted { color: var(--c-text-muted); } .text-soft { color: var(--c-text-soft); } .text-yellow { color: var(--c-gold-text); } .text-success { color: var(--c-success); } .text-danger { color: var(--c-danger); } .section-label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-gold-text); margin-bottom: 8px; } /* ──────────────────────────────────────────── HERO / PAGE HEADER ──────────────────────────────────────────── */ .page-hero { padding: 48px 0 36px; border-bottom: 1px solid var(--c-border); margin-bottom: 36px; } .page-hero .section-label { margin-bottom: 12px; } .page-hero h1 { font-size: 36px; font-weight: 800; line-height: 1.15; letter-spacing: -0.6px; margin-bottom: 12px; } .page-hero h1 .accent { color: var(--c-gold-text); } .page-hero p { font-size: 16px; color: var(--c-text-soft); max-width: 600px; line-height: 1.7; } /* ──────────────────────────────────────────── CARDS ──────────────────────────────────────────── */ .card { background: var(--c-surface-1); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 24px; transition: border-color var(--t), box-shadow var(--t); } .card:hover { border-color: var(--c-border-strong); } .card.yellow-glow:hover { border-color: var(--c-border-yellow); box-shadow: var(--shadow-yellow); } .card-sm { padding: 16px; border-radius: var(--r); } .card-lg { padding: 32px; border-radius: var(--r-xl); } .card-flat { background: var(--c-surface-2); border-color: var(--c-border); } .card-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; gap: 12px; } .card-title { font-size: 15px; font-weight: 600; color: var(--c-text); } .card-subtitle { font-size: 13px; color: var(--c-text-muted); margin-top: 2px; } /* ──────────────────────────────────────────── PORTAL CARDS (big clickable cards) ──────────────────────────────────────────── */ .portal-card { background: var(--c-surface-1); border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: 36px 32px; text-decoration: none; display: flex; flex-direction: column; gap: 16px; transition: all var(--t); position: relative; overflow: hidden; } .portal-card::after { content: ''; position: absolute; bottom: 0; right: 0; width: 120px; height: 120px; background: radial-gradient(circle at 100% 100%, var(--c-yellow-glow), transparent 70%); pointer-events: none; } .portal-card:hover { border-color: var(--c-border-yellow); box-shadow: var(--shadow-yellow); transform: translateY(-2px); opacity: 1; } .portal-card-icon { width: 48px; height: 48px; background: var(--c-yellow-dim); border: 1px solid var(--c-border-yellow); border-radius: var(--r); display: flex; align-items: center; justify-content: center; font-size: 22px; } .portal-card-title { font-size: 20px; font-weight: 700; color: var(--c-text); } .portal-card-desc { font-size: 14px; color: var(--c-text-muted); line-height: 1.6; } .portal-card-meta { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--c-border); font-size: 12px; color: var(--c-text-dim); } .portal-card-arrow { margin-left: auto; color: var(--c-gold-text); font-size: 18px; } /* ──────────────────────────────────────────── TOOL CARDS (smaller tool links in a grid) ──────────────────────────────────────────── */ .tool-card { background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 20px; text-decoration: none; display: flex; flex-direction: column; gap: 8px; transition: all var(--t); } .tool-card:hover { border-color: var(--c-border-yellow); background: var(--c-surface-3); transform: translateY(-1px); opacity: 1; } .tool-card-type { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-gold-text); } .tool-card-title { font-size: 15px; font-weight: 600; color: var(--c-text); line-height: 1.3; } .tool-card-desc { font-size: 13px; color: var(--c-text-muted); line-height: 1.5; } /* ──────────────────────────────────────────── STAT BLOCKS ──────────────────────────────────────────── */ .stat { background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 20px; } .stat-label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-muted); margin-bottom: 6px; } .stat-value { font-size: 28px; font-weight: 800; letter-spacing: -0.5px; color: var(--c-text); line-height: 1; } .stat-value.yellow { color: var(--c-gold-text); } .stat-sub { font-size: 12px; color: var(--c-text-muted); margin-top: 4px; } /* ──────────────────────────────────────────── BUTTONS ──────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: var(--r); font-size: 14px; font-weight: 600; border: 1px solid transparent; transition: all var(--t); text-decoration: none; white-space: nowrap; user-select: none; } .btn:hover { opacity: 1; } .btn-sm { padding: 7px 14px; font-size: 13px; } .btn-lg { padding: 14px 28px; font-size: 16px; } .btn-icon { padding: 8px; border-radius: var(--r-sm); } .btn-primary { background: var(--c-yellow); color: var(--c-black); border-color: var(--c-yellow); } .btn-primary:hover { background: var(--c-yellow-hover); border-color: var(--c-yellow-hover); box-shadow: var(--shadow-yellow); } .btn-secondary { background: var(--c-surface-3); color: var(--c-text); border-color: var(--c-border-strong); } .btn-secondary:hover { background: var(--c-surface-4); } .btn-ghost { background: transparent; color: var(--c-text-soft); border-color: var(--c-border); } .btn-ghost:hover { background: var(--c-surface-2); color: var(--c-text); } .btn-danger { background: var(--c-danger-dim); color: var(--c-danger); border-color: rgba(239,68,68,0.25); } .btn-danger:hover { background: rgba(239,68,68,0.2); } /* ──────────────────────────────────────────── BADGES ──────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--r-full); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; } .badge-yellow { background: var(--c-yellow-dim); color: var(--c-gold-text); border: 1px solid var(--c-border-yellow); } .badge-success { background: var(--c-success-dim); color: var(--c-success); border: 1px solid rgba(34,197,94,0.25); } .badge-danger { background: var(--c-danger-dim); color: var(--c-danger); border: 1px solid rgba(239,68,68,0.25); } .badge-info { background: var(--c-info-dim); color: var(--c-info); border: 1px solid rgba(59,130,246,0.25); } .badge-warning { background: var(--c-warning-dim); color: var(--c-warning); border: 1px solid rgba(245,158,11,0.25); } .badge-ghost { background: var(--c-surface-3); color: var(--c-text-muted); border: 1px solid var(--c-border); } .badge-installer { background: rgba(59,130,246,0.1); color: #60A5FA; border: 1px solid rgba(59,130,246,0.25); } .badge-internal { background: rgba(168,85,247,0.1); color: #C084FC; border: 1px solid rgba(168,85,247,0.25); } /* ──────────────────────────────────────────── FORMS ──────────────────────────────────────────── */ .form-group { display: flex; flex-direction: column; gap: 6px; } .form-label { font-size: 13px; font-weight: 600; color: var(--c-text-soft); } .form-hint { font-size: 12px; color: var(--c-text-muted); } .form-input, .form-select, .form-textarea { background: var(--c-surface-2); border: 1px solid var(--c-border-strong); border-radius: var(--r); padding: 10px 14px; font-size: 14px; color: var(--c-text); transition: border-color var(--t); width: 100%; } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--c-yellow); box-shadow: 0 0 0 3px var(--c-yellow-dim); } .form-input::placeholder { color: var(--c-text-dim); } .form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23707070' d='M6 8L0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; } .form-textarea { resize: vertical; min-height: 80px; } .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; } /* Input with unit suffix */ .input-wrap { position: relative; } .input-wrap .input-unit { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--c-text-muted); pointer-events: none; } .input-wrap .form-input { padding-right: 44px; } /* Option buttons (toggle) */ .option-group { display: flex; flex-wrap: wrap; gap: 8px; } .option-btn { padding: 8px 16px; border-radius: var(--r); border: 1px solid var(--c-border-strong); background: var(--c-surface-2); color: var(--c-text-soft); font-size: 13px; font-weight: 500; cursor: pointer; transition: all var(--t); } .option-btn:hover { border-color: var(--c-border-yellow); color: var(--c-text); } .option-btn.selected { background: var(--c-yellow-dim); border-color: var(--c-yellow); color: var(--c-gold-text); font-weight: 600; } /* Range input */ input[type="range"] { -webkit-appearance: none; width: 100%; height: 4px; border-radius: 2px; background: var(--c-surface-4); outline: none; cursor: pointer; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--c-yellow); border: 2px solid var(--c-black); cursor: pointer; } /* ──────────────────────────────────────────── TABLES ──────────────────────────────────────────── */ .table-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--c-border); } table { width: 100%; border-collapse: collapse; font-size: 14px; } thead th { background: var(--c-surface-2); padding: 10px 14px; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-muted); border-bottom: 1px solid var(--c-border); white-space: nowrap; } tbody tr { border-bottom: 1px solid var(--c-border); } tbody tr:last-child { border-bottom: none; } tbody tr:hover { background: var(--c-surface-2); } tbody td { padding: 12px 14px; color: var(--c-text); vertical-align: top; } tfoot td { padding: 12px 14px; font-weight: 700; border-top: 1px solid var(--c-border-strong); background: var(--c-surface-2); color: var(--c-gold-text); } .td-right { text-align: right; } .td-mono { font-family: var(--font-mono); font-size: 13px; } .td-label { color: var(--c-text-soft); font-weight: 500; } /* ──────────────────────────────────────────── CALLOUT BOXES ──────────────────────────────────────────── */ .callout { padding: 14px 16px; border-radius: var(--r); border-left: 3px solid; font-size: 14px; line-height: 1.6; } /* Een callout is geschreven als kop + lopende tekst, zonder wrapper om de kop. Alleen een die de callout OPENT is die kop en krijgt een eigen regel; een midden in een zin blijft inline, anders breekt de zin daar in drieën. Vandaar `> strong:first-child` en niet `:first-of-type`: pagina's die een eigen kop-element gebruiken (span.c-title) houden hun accenten inline. */ .callout strong { font-weight: 600; } .callout > strong:first-child { display: block; margin-bottom: 4px; } .callout-info { background: var(--c-info-dim); border-color: var(--c-info); color: var(--c-info-text); } .callout-warning { background: var(--c-warning-dim); border-color: var(--c-warning); color: var(--c-warning-text); } .callout-danger { background: var(--c-danger-dim); border-color: var(--c-danger); color: var(--c-danger-text); } .callout-success { background: var(--c-success-dim); border-color: var(--c-success); color: var(--c-success-text); } .callout-yellow { background: var(--c-yellow-dim); border-color: var(--c-yellow); color: var(--c-gold-text); } /* ──────────────────────────────────────────── DIVIDERS & SPACING ──────────────────────────────────────────── */ .divider { border: none; border-top: 1px solid var(--c-border); margin: 24px 0; } .section-title { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-muted); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; } .section-title::after { content: ''; flex: 1; height: 1px; background: var(--c-border); } /* ──────────────────────────────────────────── STEP WIZARD ──────────────────────────────────────────── */ .step-nav { display: flex; align-items: center; gap: 0; margin-bottom: 32px; } .step-item { display: flex; align-items: center; flex: 1; gap: 0; } .step-dot { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--c-border-strong); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--c-text-muted); background: var(--c-surface-2); flex-shrink: 0; transition: all var(--t); z-index: 1; } .step-dot.active { background: var(--c-yellow); border-color: var(--c-yellow); color: var(--c-black); } .step-dot.done { background: var(--c-success-dim); border-color: var(--c-success); color: var(--c-success); } .step-line { flex: 1; height: 2px; background: var(--c-border); margin: 0 -1px; } .step-line.done { background: var(--c-success); } /* ──────────────────────────────────────────── TAB NAVIGATION ──────────────────────────────────────────── */ .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--c-border); margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab-btn { padding: 10px 18px; font-size: 14px; font-weight: 500; color: var(--c-text-muted); background: transparent; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: all var(--t); white-space: nowrap; margin-bottom: -1px; } .tab-btn:hover { color: var(--c-text); } .tab-btn.active { color: var(--c-gold-text); border-bottom-color: var(--c-gold-text); } .tab-panel { display: none; } .tab-panel.active { display: block; } /* ──────────────────────────────────────────── MANUAL / DOCUMENTATION STYLES ──────────────────────────────────────────── */ .doc-section { margin-bottom: 32px; } .doc-h2 { font-size: 20px; font-weight: 700; color: var(--c-text); padding-bottom: 10px; border-bottom: 2px solid var(--c-yellow); margin-bottom: 16px; } .doc-h3 { font-size: 16px; font-weight: 600; color: var(--c-text-soft); margin: 20px 0 10px; } .doc-p { font-size: 14px; color: var(--c-text-soft); line-height: 1.75; margin-bottom: 12px; } .doc-ul { list-style: none; padding: 0; margin: 0 0 12px; } .doc-ul li { padding: 5px 0 5px 20px; font-size: 14px; color: var(--c-text-soft); line-height: 1.6; position: relative; } .doc-ul li::before { content: '▸'; position: absolute; left: 0; color: var(--c-gold-text); font-size: 10px; top: 8px; } .doc-ol { padding-left: 20px; margin: 0 0 12px; } .doc-ol li { padding: 4px 0; font-size: 14px; color: var(--c-text-soft); line-height: 1.6; } .doc-ol li::marker { color: var(--c-gold-text); font-weight: 700; } pre, .code-block { background: var(--c-black); border: 1px solid var(--c-border); border-radius: var(--r); padding: 16px; font-family: var(--font-mono); font-size: 13px; overflow-x: auto; color: var(--c-text); margin: 12px 0; } code { font-family: var(--font-mono); font-size: 13px; background: var(--c-surface-3); padding: 2px 6px; border-radius: 4px; color: var(--c-gold-text); } /* Doc sidebar TOC */ .doc-layout { display: grid; /* minmax(0, 1fr) en niet 1fr: een kale 1fr heeft een automatisch minimum ter grootte van de breedste inhoud. Op telefoon werd de kolom daardoor 584px breed in plaats van 343px, en liepen de installatiehandleidingen buiten beeld (gemeten 04-09-2026). */ grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: start; } .doc-toc { position: sticky; top: calc(var(--nav-h) + 16px); background: var(--c-surface-1); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 20px; } .doc-toc-title { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-muted); margin-bottom: 12px; } .doc-toc-link { display: block; padding: 5px 8px; font-size: 13px; color: var(--c-text-muted); border-radius: var(--r-sm); transition: all var(--t); text-decoration: none; } .doc-toc-link:hover { background: var(--c-surface-2); color: var(--c-text); opacity: 1; } .doc-toc-link.active { background: var(--c-yellow-dim); color: var(--c-gold-text); } /* ──────────────────────────────────────────── GRID UTILITIES ──────────────────────────────────────────── */ .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; } .grid-auto-sm { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } .flex { display: flex; } .flex-col { display: flex; flex-direction: column; } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; } .items-center { align-items: center; } .ml-auto { margin-left: auto; } .w-full { width: 100%; } /* ──────────────────────────────────────────── RESULT / OUTPUT BOXES ──────────────────────────────────────────── */ .result-panel { background: linear-gradient(135deg, var(--c-surface-2), var(--c-surface-1)); border: 1px solid var(--c-border-yellow); border-radius: var(--r-xl); padding: 28px; } .result-big { font-size: 44px; font-weight: 800; color: var(--c-gold-text); letter-spacing: -1px; line-height: 1; } .result-label { font-size: 13px; color: var(--c-text-muted); margin-bottom: 4px; } /* Totals breakdown */ .totals-list { display: flex; flex-direction: column; gap: 0; } .totals-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--c-border); font-size: 14px; color: var(--c-text-soft); } .totals-row:last-child { border-bottom: none; } .totals-row.total { font-size: 18px; font-weight: 700; color: var(--c-text); border-top: 1px solid var(--c-border-strong); border-bottom: none; padding-top: 14px; } .totals-row.total .totals-value { color: var(--c-gold-text); } /* ──────────────────────────────────────────── FOOTER ──────────────────────────────────────────── */ .footer { border-top: 1px solid var(--c-border); padding: 24px; text-align: center; font-size: 12px; color: var(--c-text-muted); margin-top: 64px; } .footer a { color: var(--c-text-muted); } .footer a:hover { color: var(--c-gold-text); } /* ──────────────────────────────────────────── PRINT ──────────────────────────────────────────── */ @media print { .topnav, .breadcrumb, .no-print { display: none !important; } body { background: white; color: black; font-size: 12pt; } .card, .result-panel { border: 1px solid #ccc; background: white; box-shadow: none; } .c-yellow, .text-yellow { color: #000 !important; } .print-only { display: block !important; } } .print-only { display: none; } /* ──────────────────────────────────────────── RESPONSIVE ──────────────────────────────────────────── */ @media (max-width: 1024px) { .doc-layout { grid-template-columns: minmax(0, 1fr); } .doc-toc { display: none; } } @media (max-width: 768px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .topnav { padding: 0 16px; gap: 16px; } .nav-links { gap: 2px; } .nav-link { padding: 5px 10px; font-size: 12px; } .page, .page-wide, .page-narrow { padding: 24px 16px 48px; } .page-hero h1 { font-size: 26px; } .portal-card { padding: 24px 20px; } } @media (max-width: 480px) { .nav-links .nav-link:not(.active) { display: none; } } /* ── Wettelijke regel ───────────────────────────────────────────────────── KVK- en btw-nummer onderaan pagina's die geen volledige voettekst hebben: de vier gratis klanttools. De homepage en dysun.energy dragen dezelfde gegevens in hun eigen voettekst (07-09-2026). Bewust ingetogen: het is een verplichte vermelding, geen navigatie. */ .legal-line { border-top: 1px solid var(--c-border); margin-top: 40px; padding: 20px 16px 28px; text-align: center; font-size: 12.5px; line-height: 1.7; /* --c-text-soft en niet --c-text-muted: die haalde op deze ondergrond maar 3,87:1, onder de 4,5:1 die WCAG AA vraagt voor tekst van deze grootte. Een verplichte vermelding hoort leesbaar te zijn. */ color: var(--c-text-soft); } @media print { .legal-line { display: none; } } /* ── Topnav op telefoon en tablet ───────────────────────────────────────── Het afbreken zelf staat bij `.topnav` hierboven, want dat is op elke breedte nodig: op tablet (768px) had de balk op de handleidingen 962px nodig. Hieronder alleen wat op een telefoon anders moet. */ @media (max-width: 720px) { .topnav { padding-top: 10px; padding-bottom: 10px; gap: 10px 12px; } /* Het woordmerk staat op de meeste pagina's op 40px via een inline stijl; op telefoon is dat een derde van de balkbreedte. */ .topnav .nav-logo img { height: 30px !important; } /* Het kruimelpad is ook een niet-brekende flexrij; op de handleidingen liep het 24px buiten beeld. */ .breadcrumb { flex-wrap: wrap; row-gap: 4px; } /* Nederlandse samenstellingen passen niet in een kop van 36px op een telefoon: "ontwikkelingsdashboard" was in zijn eentje 407px breed. */ .page-hero h1 { overflow-wrap: anywhere; hyphens: auto; } } /* ════════════════════════════════════════════ PREMIUM LAYER — animaties, glows, wow-factor Geladen via assets/js/premium.js ════════════════════════════════════════════ */ /* ── Scroll reveal ── */ .pr-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.65s cubic-bezier(.21,.6,.35,1), transform 0.65s cubic-bezier(.21,.6,.35,1); } .pr-reveal.pr-vis { opacity: 1; transform: none; } /* ── Ambient hero glow (achter page headers) ── */ .pr-ambient { position: relative; } .pr-ambient::before { content: ''; position: absolute; /* Blijft binnen de contentkolom: een horizontale outset (-10%) steekt op smalle viewports buiten het scherm en veroorzaakt horizontale scroll op elke pagina met een hero. De gradients doven ruim voor de rand uit, dus het glow-effect blijft gelijk. */ inset: -40px 0 auto; height: 320px; background: radial-gradient(ellipse 55% 70% at 25% 0%, rgba(253,197,0,0.07), transparent 70%), radial-gradient(ellipse 40% 60% at 80% 10%, rgba(253,197,0,0.04), transparent 70%); pointer-events: none; z-index: -1; } /* ── Gradient border accent op portal cards ── */ .portal-card { background: linear-gradient(var(--c-surface-1), var(--c-surface-1)) padding-box, linear-gradient(135deg, rgba(253,197,0,0.18), rgba(var(--c-glass-rgb),0.06) 40%, rgba(var(--c-glass-rgb),0.04)) border-box; border: 1px solid transparent; } .portal-card:hover { background: linear-gradient(var(--c-surface-1), var(--c-surface-1)) padding-box, linear-gradient(135deg, rgba(253,197,0,0.55), rgba(253,197,0,0.12) 50%, rgba(var(--c-glass-rgb),0.06)) border-box; transform: translateY(-3px); box-shadow: 0 16px 44px rgba(253,197,0,0.08), 0 4px 16px rgba(var(--c-shadow-rgb),0.5); } /* ── Button shine sweep ── */ .btn-primary { position: relative; overflow: hidden; } .btn-primary::after { content: ''; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient(105deg, transparent, var(--c-shimmer), transparent); transform: skewX(-20deg); transition: left 0.5s ease; pointer-events: none; } .btn-primary:hover::after { left: 130%; } /* ── Tool cards: pijl bij hover ── */ .tool-card { position: relative; } .tool-card::after { content: '→'; position: absolute; right: 18px; bottom: 14px; color: var(--c-gold-text); font-size: 16px; opacity: 0; transform: translateX(-6px); transition: opacity var(--t), transform var(--t); } .tool-card:hover::after { opacity: 1; transform: translateX(0); } .tool-card:hover { box-shadow: 0 10px 30px rgba(253,197,0,0.06), 0 2px 8px rgba(var(--c-shadow-rgb),0.4); } /* ── Stat glow ── */ .stat { transition: border-color var(--t), box-shadow var(--t); } .stat:hover { border-color: var(--c-border-yellow); box-shadow: var(--shadow-yellow); } /* ── Product image slots (FlexVolt foto's) ── */ .product-img-slot { background: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(253,197,0,0.07), transparent 75%), var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-lg); display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 20px; } .product-img-slot img { max-height: 100%; width: auto; object-fit: contain; filter: drop-shadow(0 16px 32px rgba(var(--c-shadow-rgb),0.5)); transition: transform 0.4s cubic-bezier(.21,.6,.35,1); } .product-img-slot:hover img { transform: scale(1.04) translateY(-3px); } .card .product-img-slot { height: 170px; margin: -8px -8px 16px; border-radius: var(--r); } /* ── Hero product showcase (dashboard) ── */ .hero-showcase { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; } .hero-showcase .product-img-slot { height: 340px; border-radius: var(--r-xl); } @media (max-width: 900px) { .hero-showcase { grid-template-columns: 1fr; } .hero-showcase .product-img-slot { height: 240px; } } /* ── Floating animatie voor productfoto's ── */ .pr-float { animation: prFloat 5s ease-in-out infinite; } @keyframes prFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* ── Logo pulse dot (live indicator) ── */ .pr-live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--c-success); animation: prPulse 1.8s ease-in-out infinite; flex-shrink: 0; } @keyframes prPulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34,197,94,0.4); } 50% { opacity: .6; box-shadow: 0 0 0 5px rgba(34,197,94,0); } } /* ── Reduced motion ── */ @media (prefers-reduced-motion: reduce) { .pr-reveal { opacity: 1; transform: none; transition: none; } .pr-float, .pr-live-dot { animation: none; } .btn-primary::after { display: none; } html { scroll-behavior: auto; } } /* ============================================================ VIDEO — YouTube facade Thumbnail + play-knop; het iframe laadt pas na een klik. Scheelt ~1 MB YouTube-JS per pageview en er gaat geen enkel verzoek naar Google voordat de gebruiker zelf op play drukt. Markup wordt opgebouwd door assets/js/video-library.js. ============================================================ */ .video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; } .video-card { background: var(--c-surface-1); border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; transition: border-color var(--t), background var(--t); } .video-card:hover { border-color: var(--c-border-strong); background: var(--c-surface-2); } /* De klikbare poster. Blijft 16:9 zodat er niets verspringt als het iframe laadt. */ .video-facade { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; background-color: var(--c-surface-3); background-size: cover; background-position: center; cursor: pointer; overflow: hidden; } .video-facade::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--c-scrim-rgb),0.15) 0%, rgba(var(--c-scrim-rgb),0.55) 100%); transition: opacity var(--t); } .video-facade:hover::after { opacity: 0.75; } .video-facade:focus-visible { outline: 2px solid var(--c-yellow); outline-offset: -2px; } .video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; width: 62px; height: 62px; border-radius: var(--r-full); background: var(--c-yellow); color: var(--c-black); display: flex; align-items: center; justify-content: center; transition: transform var(--t), background var(--t), box-shadow var(--t); } .video-play svg { width: 24px; height: 24px; fill: currentColor; margin-left: 3px; } .video-facade:hover .video-play { transform: translate(-50%, -50%) scale(1.08); background: var(--c-yellow-hover); box-shadow: var(--shadow-yellow); } /* Duur rechtsonder in de poster, zoals installateurs het van YouTube kennen. */ .video-duration { position: absolute; right: 10px; bottom: 10px; z-index: 1; padding: 3px 8px; border-radius: var(--r-sm); background: rgba(var(--c-scrim-rgb),0.78); border: 1px solid var(--c-border); color: var(--c-text); font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.02em; } .video-facade iframe, .video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .video-card-body { padding: 16px 18px 18px; } .video-card-type { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--c-gold-text); margin-bottom: 6px; } .video-card-title { font-size: 15px; font-weight: 600; color: var(--c-text); line-height: 1.35; } .video-card-desc { font-size: 13px; color: var(--c-text-muted); line-height: 1.55; margin-top: 6px; } .video-card-links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--c-border); } .video-card-links a { font-size: 12.5px; font-weight: 600; color: var(--c-text-soft); transition: color var(--t); } .video-card-links a:hover { color: var(--c-gold-text); opacity: 1; } /* Losse video midden in een handleiding, bij de stap waar hij hoort. */ .video-inline { margin: 28px 0; background: var(--c-surface-1); border: 1px solid var(--c-border); border-left: 3px solid var(--c-yellow); border-radius: var(--r); overflow: hidden; } .video-inline .video-facade { border-radius: 0; } .video-inline-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 14px 18px; } .video-inline-label { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--c-gold-text); } .video-inline-title { font-size: 14.5px; font-weight: 600; color: var(--c-text); } .video-inline-note { padding: 0 18px 14px; font-size: 12.5px; color: var(--c-text-muted); line-height: 1.55; } @media (max-width: 640px) { .video-grid { grid-template-columns: 1fr; } .video-play { width: 52px; height: 52px; } .video-play svg { width: 20px; height: 20px; } } @media (prefers-reduced-motion: reduce) { .video-facade:hover .video-play { transform: translate(-50%, -50%); } } @media print { .video-facade, .video-inline { display: none; } } /* Poster-afbeelding binnen de facade (maxres met fallback naar hq). */ .video-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* ──────────────────────────────────────────── THEMA-SCHAKELAAR (assets/js/theme.js) Staat als eigen .nav-theme náást .nav-right, want auth.js vervangt de inhoud van .nav-right na login. ──────────────────────────────────────────── */ .nav-theme { display: flex; align-items: center; flex-shrink: 0; } .theme-toggle { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 10px; border-radius: var(--r-full); /* De omtrek moet 3:1 halen tegen de balk (WCAG 1.4.11, bedieningselement). --c-border-strong gaf 1,4:1 en het vlak 1,1:1: de knop was er wel, maar niet te zien. --c-text-muted haalt 3,8:1 in dark en 5,0:1 in light. Geen goud: dat is hier de kleur van de primaire actie ernaast (DEC-005). */ border: 1px solid var(--c-text-muted); background: var(--c-surface-3); color: var(--c-text); font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1; cursor: pointer; transition: border-color var(--t), color var(--t), background var(--t); } .theme-toggle:hover { border-color: var(--c-border-yellow); color: var(--c-text); } .theme-toggle:focus-visible { outline: 2px solid var(--c-yellow); outline-offset: 2px; } .theme-toggle svg { width: 16px; height: 16px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .theme-toggle .ico-sun { display: none; } html[data-theme="light"] .theme-toggle .ico-sun { display: block; } html[data-theme="light"] .theme-toggle .ico-moon { display: none; } @media (max-width: 640px) { .theme-toggle span { display: none; } .theme-toggle { padding: 0 9px; } } body { transition: background-color 0.15s ease, color 0.15s ease; } @media (prefers-reduced-motion: reduce) { body, .theme-toggle { transition: none; } } @media print { .nav-theme, .theme-toggle { display: none !important; } } /* In de topnav staat de knop links van .nav-right; samen schuiven ze naar rechts, ook op pagina's zonder .nav-links om de ruimte op te vullen. */ .topnav .nav-theme { margin-left: auto; } .topnav .nav-theme + .nav-right { margin-left: 0; } /* Kopbalk met alleen een terug-link (stroomanalyse, dynamische prijzen). */ .page-header-right { display: flex; align-items: center; gap: 10px; } /* Kopbalken van de interne tools die geen .topnav gebruiken. */ .tb-top .nav-theme, .sidebar-header .nav-theme { margin-left: auto; } .sidebar-header .nav-theme { margin-top: 10px; } /* Raster en assen van de zelfgetekende SVG-grafieken (container-calculator). */ :root { --c-chart-grid: rgba(255,255,255,0.08); --c-chart-axis: rgba(255,255,255,0.18); } html[data-theme="light"] { --c-chart-grid: rgba(17,17,17,0.10); --c-chart-axis: rgba(17,17,17,0.22); } /* Rollabels dragen een eigen kleur (blauw/paars) die niet in de tokenset zit. Op wit hebben ze een donkerder variant nodig; de tint blijft dezelfde. */ html[data-theme="light"] .badge-installer { color: #1D4ED8; } html[data-theme="light"] .badge-internal { color: #7E22CE; } /* Tijdelijk tot logo-dark.png bestaat (fase 1, PR 3): het witte woordmerk wordt zwart op lichte grond. Binnen een bewust donker podium (.brand-panel op login/wachtwoord) blijft het wit. */ html[data-theme="light"] img[src*="logo-light"] { filter: brightness(0); } html[data-theme="light"] .brand-panel img[src*="logo-light"] { filter: none; }