@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@400;600&family=Montserrat:wght@400;500;600&family=Playfair+Display:wght@600;700&display=swap'); :root { --slide-width: 1180px; --slide-height: 100vh; --slide-padding: 40px 80px 48px; --transition-slide: .5s cubic-bezier(.4,.2,.2,1); --scale: 1; /* CI-driven variables populated by slides.js -> applyCIConfig */ --ci-primary: #0078D4; --ci-accent: #FFB900; --ci-background: #FFFFFF; --ci-text: #111111; --ci-muted: #666666; --ci-background-dark: #0B0B0C; --ci-text-dark: #F5F5F5; --ci-muted-dark: #CFCFCF; --ci-font-family: 'Montserrat', sans-serif; --ci-font-heading: 'Playfair Display', serif; --ci-font-accent: 'Libre Franklin', sans-serif; --ci-base-size: 18px; /* User-adjustable scale: fluid by default so it looks right at every viewport size. The JS zoom (+/-) overrides this via an inline style on . */ --user-font-size: clamp(14px, 2.8vw, 32px); /* Derived tints */ --ci-surface: color-mix(in srgb, var(--ci-background), black 3%); --ci-surface-strong: color-mix(in srgb, var(--ci-background), black 6%); } html, body { height:100%; } h1, h2, h3 { font-family: var(--ci-font-heading, 'Playfair Display', serif); } body { margin:0; font-family: var(--ci-font-family, 'Montserrat', sans-serif); background: var(--ci-background); color: var(--ci-text); -webkit-font-smoothing:antialiased; font-size: var(--user-font-size, var(--ci-base-size, 18px)); } body.dark-mode { background: var(--ci-background-dark); color: var(--ci-text-dark); } #deck { position:relative; height:100vh; overflow:hidden; } .slide { box-sizing:border-box; width:100%; height:100%; padding: var(--slide-padding); display:flex; flex-direction:column; justify-content:center; gap:24px; opacity:0; transform: translateX(40px); transition: opacity var(--transition-slide), transform var(--transition-slide); position:absolute; inset:0; visibility:hidden; } .slide.active { opacity:1; transform: translateX(0); visibility:visible; } .title-slide { background: var(--ci-primary); color: #fff; } .alt-bg { background: radial-gradient(circle at 85% 18%, color-mix(in srgb, var(--ci-primary) 15%, transparent), transparent 65%), linear-gradient(to bottom, var(--ci-background) 0%, var(--ci-surface) 100%); } body.dark-mode .alt-bg { background: radial-gradient(circle at 85% 18%, color-mix(in srgb, var(--ci-accent) 18%, transparent), transparent 65%), linear-gradient(to bottom, var(--ci-background-dark) 0%, color-mix(in srgb, var(--ci-background-dark), black 10%) 100%); color: var(--ci-text-dark); } .reveal-item { opacity:0; transform:translateY(8px); transition: opacity .32s ease, transform .32s ease; } .slide.switching .reveal-item { transition:none !important; } .reveal-item.visible { opacity:1; transform:none; } #controls-group { position:fixed; top:10px; right:12px; z-index:1000; display:flex; gap:6px; align-items:center; transition: opacity .4s ease, transform .4s ease; } .ctrl-btn { background: color-mix(in srgb, var(--ci-primary) 18%, transparent); color: var(--ci-text); border:1px solid color-mix(in srgb, var(--ci-primary) 45%, transparent); padding:6px 11px; font-weight:500; border-radius:20px; cursor:pointer; } .ctrl-btn:hover{ background: color-mix(in srgb, var(--ci-primary) 28%, transparent); } body.dark-mode .ctrl-btn { background: rgba(255,255,255,.08); color: var(--ci-text-dark, #F5F5F5); border:1px solid rgba(255,255,255,.18); } #brandMark { position:fixed; top:10px; left:12px; z-index:1000; display:block; padding:4px 6px; border-radius:8px; /* removed semi-transparent background so logos with transparency show through */ background: transparent; box-shadow: none; } #brandMark img{ width:56px; display:block; image-rendering: auto; } /* Title slide logo sizing */ .logo-mark { max-width:180px; height:auto; display:block; margin-bottom:18px; } /* Language toggles: default show NL, hide EN unless .lang-en on body */ .en { display:none; } .lang-en .en { display:initial; } .lang-en .nl { display:none; } .progress-bar { position:fixed; bottom:0; left:0; height:5px; background: var(--ci-accent, var(--ci-primary)); width:0; z-index:999; transition: width .4s ease; } /* Slightly desaturate/harmonize accent on dark mode for contrast */ body.dark-mode .progress-bar { background: color-mix(in srgb, var(--ci-accent, var(--ci-primary)) 80%, black 20%); } /* Slide counter: bottom center, subtle */ #counter { position:fixed; left:50%; transform:translateX(-50%); bottom:12px; background: rgba(255,255,255,0.85); color: var(--ci-text); padding:6px 10px; border-radius:12px; font-size:12px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); opacity:0.75; pointer-events:none; z-index:900; } body.dark-mode #counter { background: rgba(0,0,0,0.55); color: var(--ci-text-dark, #F5F5F5); } #overview { position:fixed; inset:0; background: var(--ci-background); padding:32px; overflow:auto; display:none; } #overview.active{ display:grid; grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); gap:32px; } #help { position:fixed; inset:0; background: color-mix(in srgb, var(--ci-primary) 25%, rgba(0,0,0,.92)); color: var(--ci-text-dark); display:none; align-items:center; justify-content:center; padding: 64px; text-align:center; } #help.active{ display:flex; } .nav-hint{ position:fixed; right:16px; bottom:16px; background: rgba(0,0,0,.55); color:#fff; padding:6px 12px; border-radius:20px; font-size:14px; line-height:1; } /* Center-mode (toggle with C) - aligns headings and centers H2 underline */ /* Center-mode layout: center content blocks and constrain their width so lists don't hug the viewport edge */ body.center-mode .slide { text-align:center; align-items:center; } /* Limit max-width only for primary text blocks to avoid affecting images/logos that rely on intrinsic sizing */ body.center-mode .slide > h1, body.center-mode .slide > h2, body.center-mode .slide > h3, body.center-mode .slide > .lead, body.center-mode .slide > ul, body.center-mode .slide > ol, body.center-mode .slide .visual-row, body.center-mode .slide .card { max-width: 780px; margin-left: auto; margin-right: auto; } body.center-mode .slide > h1, body.center-mode .slide > h2, body.center-mode .slide > h3 { margin-left:auto; margin-right:auto; } body.center-mode .slide:not(.title-slide) > h2:after { left:50%; transform:translateX(-50%); } /* Centered lists: make the list container an auto-width block and keep bullets left-aligned inside it */ /* Only target language-specific lists so we don't accidentally force both languages visible */ body.center-mode .slide ul.nl, body.center-mode .slide ol.nl { display:block; margin: 0 auto 0 auto; text-align:left; padding-left:1.2em; } body.center-mode .slide ul.en, body.center-mode .slide ol.en { display:none; /* keep hidden unless lang-en is active */ } body.lang-en.center-mode .slide ul.en, body.lang-en.center-mode .slide ol.en { display:block; margin: 0 auto 0 auto; text-align:left; padding-left:1.2em; } /* When english is active, hide the Dutch lists even in center-mode (avoid duplicates) */ body.lang-en.center-mode .slide ul.nl, body.lang-en.center-mode .slide ol.nl { display:none; } body.center-mode .slide ul.hl-list { padding-left:1.2em; } /* Language stack: keep NL/EN pairs occupying the same layout box to avoid vertical jumping when toggling */ .lang-stack { position:relative; display:block; } /* By default hide the EN variant inside a lang-stack and show NL. This mirrors the standalone .nl/.en rules so stacks don't show both languages. */ .lang-stack > .nl { display:block; } .lang-stack > .en { display:none; } /* In normal (non-center) mode we still want the same behavior: show NL, hide EN unless body.lang-en is set */ body.lang-en .lang-stack > .en { display:block; } body.lang-en .lang-stack > .nl { display:none; } /* In center-mode we absolutely stack the language variants so they occupy identical layout space */ body.center-mode .lang-stack { min-height: 1em; } body.center-mode .lang-stack > .nl, body.center-mode .lang-stack > .en { position:absolute; left:0; right:0; top:0; } /* ensure EN remains hidden by default; body.lang-en will override */ body.center-mode .lang-stack > .en { display:none; } body.lang-en.center-mode .lang-stack > .en { display:block; } body.lang-en.center-mode .lang-stack > .nl { display:none; } /* ── Visual layout: image + text side-by-side ─────────────────────────── */ .visual-row { display: flex; flex-direction: row; align-items: center; gap: 40px; flex: 1; min-height: 0; overflow: hidden; } .visual-row.reverse { flex-direction: row-reverse; } .visual-row .slide-img { flex: 0 0 38%; width: 38%; max-height: 52vh; object-fit: cover; border-radius: 10px; display: block; } .visual-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 12px; } /* Hero image: full-width focal point */ .slide-img.hero-img { width: 100%; max-height: 55vh; object-fit: cover; border-radius: 10px; display: block; } /* Standalone slide-img without visual-row */ .slide > .slide-img:not(.hero-img) { max-height: 45vh; width: auto; max-width: 100%; border-radius: 10px; display: block; margin: 0 auto; } @media (max-width:700px){ /* Override both .visual-row and .visual-row.reverse — the reverse selector has higher specificity (2 classes) and would win without this explicit rule. */ .visual-row, .visual-row.reverse { flex-direction: column; gap: 16px; } .visual-row .slide-img { flex: none; width: 100%; max-height: 28vh; } /* Collapse visual-col to its content height so it doesn't stretch and create a large empty gap between the stacked image and the bullet list. */ .visual-row .visual-col { flex: 0 0 auto; justify-content: flex-start; } } /* ── end visual layout ────────────────────────────────────────────────── */ /* ── Responsive breakpoints ───────────────────────────────────────────── Font size is already fluid via clamp() on --user-font-size. These rules fine-tune layout, spacing and chrome at each breakpoint. The JS zoom (+/-) overrides --user-font-size via an inline style on so user zoom still works correctly after these rules apply. ── */ /* Tablet (≤ 1024px) */ @media (max-width:1024px){ :root { --slide-padding: 32px 48px 36px; } #controls-group { gap: 5px; } } /* Small tablet / large phone (≤ 700px) */ @media (max-width:700px){ :root { --slide-padding: 20px 20px 24px; } .logo { width:36px; height:36px; } .slide h1 { font-size: 1.8em; } .slide h2 { font-size: 1.3em; } #controls-group { top: 6px; right: 6px; gap: 4px; } .ctrl-btn { padding: 5px 8px; font-size: 0.75em; } #brandMark img { width: 36px; } .logo-mark { max-width: 120px; } .nav-hint { display: none; } } /* Small phone (≤ 480px) */ @media (max-width:480px){ :root { --slide-padding: 48px 14px 20px; } .slide h1 { font-size: 1.5em; } .slide h2 { font-size: 1.2em; } .slide.active { overflow-y: auto; } .hl-list li { margin-bottom: 0.5rem; } #controls-group { flex-wrap: wrap; max-width: calc(100vw - 68px); } #counter { font-size: 10px; padding: 4px 8px; } #overview.active { grid-template-columns: 1fr; gap: 16px; padding: 16px; } #help { padding: 20px; } } /* Phone in landscape */ @media (max-width:700px) and (orientation:landscape){ :root { --slide-padding: 10px 24px 10px; } .visual-row .slide-img { max-height: 36vh; } .slide h2 { font-size: 1.1em; margin-bottom: 0.15em; } } /* ── end responsive ─────────────────────────────────────────────────── */ /* Increase spacing between bullets for readability */ .hl-list li { margin-bottom: 0.9rem; line-height: 1.6; } /* Instant-reveal lists: all bullets visible immediately, no step animation */ .hl-list.instant > li { opacity: 1 !important; transform: none !important; transition: none !important; } /* Ensure lists don't collapse margins inside columns */ .visual-col .hl-list { margin: 0; padding-left: 1.2em; } /* Scale indicator (zoom) - top center, subtle and fading */ #scaleIndicator{ position:fixed; top:10px; left:50%; transform:translateX(-50%); background: rgba(0,0,0,0.6); color:#fff; font-size:12px; padding:6px 10px; border-radius:10px; pointer-events:none; z-index:1200; opacity:0; transition: opacity .35s ease, transform .25s ease; max-width:60%; text-align:center; } #scaleIndicator.visible{ opacity:0.86; transform:translateX(-50%) translateY(0); } #scaleIndicator.hidden{ opacity:0; } /* Citation link styling: small, slightly raised, and inherits surrounding text color Applies to links and preserves color for all link states. */ a.citation { font-size: 0.55em; /* a lot smaller than surrounding text */ line-height: 1; /* keep baseline spacing stable */ display: inline-block; /* allows transform without affecting baseline layout */ transform: translateY(-0.25em); /* slightly more raised for superscript effect */ vertical-align: baseline; /* keep inline flow consistent */ color: inherit !important; /* match surrounding text color regardless of link state */ text-decoration: none; /* remove underline for cleaner citation look */ } /* Ensure all link pseudo-classes keep the inherited color and no underline */ a.citation:link, a.citation:visited, a.citation:hover, a.citation:active, a.citation:focus { color: inherit !important; text-decoration: none; } /* Preserve keyboard accessibility focus while keeping visual treatment subtle */ a.citation:focus { outline: 2px solid color-mix(in srgb, var(--ci-primary) 40%, transparent); outline-offset: 2px; }