/* ═══════════════════════════════════════════════════════════════════ shared/deck.css — the slide stage. The reset, the design tokens and the light/dark colour scheme used to live at the top of this file. They now live in shared/tokens.css, which EVERY page loads before this one — see the of the four deck pages. Nothing here changed value; the block simply moved so the landing page can reach the tokens without also downloading 2.000 lines of slide chrome it never uses. The one rule that stayed behind is `body { overflow: hidden }`: that is deck behaviour (the slide stage owns the viewport), not a token. ═══════════════════════════════════════════════════════════════════ */ body { overflow: hidden; } /* Page Header */ .page-header { position: fixed; top: 0; left: 0; right: 0; height: 70px; background: var(--bg-primary); border-bottom: 1px solid var(--rail-border); z-index: 2000; display: flex; align-items: center; padding: 0 40px; } .page-header-left { flex: 1; display: flex; align-items: center; justify-content: flex-start; height: 100%; } .page-header-wordmark { width: auto; font-size: 14px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--text-primary); display: flex; align-items: center; justify-content: flex-start; height: 100%; text-decoration: none; transition: color 0.2s ease; white-space: nowrap; } .page-header-wordmark:visited { color: var(--text-primary); } @media (hover: hover) { .page-header-wordmark:hover { color: var(--accent-color); } } .page-header-divider { margin: 0 12px; color: var(--text-tertiary); font-weight: 300; } .page-header-subtitle { font-size: 12px; font-weight: 400; letter-spacing: 0.5px; color: var(--text-tertiary); white-space: nowrap; } .page-header-slide-counter { font-size: 12px; color: var(--text-tertiary); font-weight: 500; letter-spacing: 0.5px; white-space: nowrap; } .page-header-content { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 100%; } .page-header-right { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 20px; height: 100%; } .page-header-button { padding: 6px 14px; background: transparent; color: var(--text-secondary); border: 1px solid var(--border-color); border-radius: 4px; font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; font-family: "Spectral", serif; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; } @media (hover: hover) { .page-header-button:hover { color: var(--text-primary); border-color: var(--text-secondary); } } .page-header-button.help-button { padding: 6px 10px; min-width: 32px; text-align: center; } .page-header-chapter { font-size: 24px; font-weight: 200; color: var(--text-primary); } .page-header-chapter-number { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-tertiary); font-weight: 600; } .page-header-controls { flex: 1; height: 100%; display: flex; align-items: center; justify-content: flex-end; } .floating-overview-button { display: none; /* moved to header as page-header-button */ } /* ===== Stage: absolutely-positioned rails + content panes ===== */ .stage { position: absolute; top: 70px; left: 0; width: 100%; height: calc(100dvh - 70px); overflow: hidden; background: var(--bg-primary); } /* ----- Rails (one persistent element per chapter) ----- */ .rail { position: absolute; top: 0; height: 100%; width: 70px; padding: 60px 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; overflow-y: auto; background: var(--bg-primary); /* Rails are fixed side panels: always above the sliding content, so a pane sweeps behind them and never casts onto them. */ z-index: 10; cursor: pointer; /* --tint drives the pink overlay opacity (transitionable) */ --tint: 0; opacity: 1; /* Borders are always present but transparent, coloured per role, so border-color can transition (and be delayed) with the move instead of snapping on instantly. */ border-left: 1px solid transparent; border-right: 1px solid transparent; /* Position is animated via transform; width + appearance via the props below */ transition: transform var(--dur) var(--ease), width var(--dur) var(--ease), opacity var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); will-change: transform; } .rail::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 135deg, var(--sidebar-bg) 0%, rgba(var(--accent-rgb), 0.05) 100% ); opacity: var(--tint); transition: opacity var(--dur) var(--ease); pointer-events: none; z-index: 0; } .rail > * { position: relative; z-index: 1; } /* Role appearances — the ONLY place visual state is defined. Changing a rail's role class transitions every property at once. */ .rail.left { --tint: 1; opacity: 0.7; border-right-color: var(--rail-border); box-shadow: inset 3px 0 8px rgba(var(--shadow-rgb), 0.15); } .rail.current { --tint: 0; opacity: 1; /* no border / shadow — reads as part of the content pane */ cursor: default; } .rail.right { --tint: 1; opacity: 1; border-left-color: var(--rail-border); border-right-color: var(--rail-border); box-shadow: -3px 0 8px rgba(var(--shadow-rgb), 0.12); } .rail-inner { display: flex; flex-direction: column; gap: 12px; align-items: center; padding: 16px 0; /* The ±6px role nudge is the rail's only Y move. Keep it short so it finishes before the staggered X slide begins — the pushed current→left rail then reads as Y-then-X, not a diagonal. */ transition: transform 0.3s var(--ease); } .rail.left .rail-inner { transform: translateY(6px); } .rail.current .rail-inner { transform: translateY(var(--rail-hint-push, 0px)); } /* Pre-nudge: while a soon-to-leave rail still looks/sits 'current', shift its inner content to the left-role offset first (Y), so when it later flips role and slides (X) the motion reads as Y-then-X. */ .rail.current.nudge-to-left .rail-inner { transform: translateY(6px); } /* When a chapter hint pushes the content, the current rail's inner content rides along at the same 0.4s so they read as one unit. */ .rail.current.hint-pushing .rail-inner { transition: transform 0.4s var(--ease); } .rail.right .rail-inner { transform: translateY(-6px); } .vertical-text { writing-mode: vertical-lr; font-size: 12px; font-weight: 600; letter-spacing: 1px; white-space: nowrap; text-transform: uppercase; color: var(--text-tertiary); transition: color var(--dur) var(--ease); } .rail.current .vertical-text { color: var(--accent-color); } @media (hover: hover) { .rail.left:hover .vertical-text, .rail.right:hover .vertical-text { color: var(--accent-color); } } .subchapter-indicators { display: flex; gap: 4px; flex-direction: column; } .sub-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--text-tertiary); opacity: 0.4; cursor: pointer; /* Size/opacity react fast (hover, subchapter nav); the active colour morphs at --dur so it stays in sync with the rail's role change instead of popping. */ transition: width 0.2s ease, height 0.2s ease, opacity 0.2s ease, background var(--dur) var(--ease); } @media (hover: hover) { .sub-dot:hover { opacity: 0.7; } } .sub-dot.active { background: var(--dot-active); width: 6px; height: 6px; opacity: 1; } /* Active-dot colour follows the rail role (blue on current, dimmed on the side rails) and transitions with the rail, not against it. */ .rail { --dot-active: var(--accent-color); } .rail.left, .rail.right { --dot-active: var(--text-tertiary); } /* ----- Content panes (one per visible chapter during a transition) ----- */ .content-pane { position: absolute; top: 0; height: 100%; background: var(--bg-primary); transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); will-change: transform; } /* Cast a shadow off the leading edge only while sliding, so the moving pane reads as floating above what it passes over (depth). */ .content-pane.sliding { box-shadow: -14px 0 32px rgba(var(--shadow-rgb), 0.22); } .slides-container { position: relative; z-index: 1; height: 100%; overflow-y: scroll; scroll-snap-type: y mandatory; scroll-behavior: smooth; -ms-overflow-style: none; scrollbar-width: none; transition: transform 0.4s var(--ease); touch-action: pan-y; } /* Push distance equals the hint banner's height (set in JS) so the content edge stays flush with the banner edge throughout — they read as one rigid unit. Sign is baked into --hint-push. */ .slides-container.hint-active, .slides-container.hint-active-fwd { transform: translateY(var(--hint-push, 0px)); } .slides-container::-webkit-scrollbar { display: none; } .slide { width: 100%; height: 100%; position: relative; overflow: hidden; /* clip letterbox edges */ scroll-snap-align: start; /* Shift content so it centers on the viewport, not the pane. Set per pane. */ transform: translateX(var(--slide-shift, 0px)); } /* Presenter mode (Shift+P) drops the self-study quiz slide from the deck. It is always the trailing slide of a chapter, so removing it from the scroll flow simply shortens the chapter — navigation counts route through navSubs() in JS to match. */ body.presenting .slide--quiz { display: none; } .slide-canvas { position: absolute; top: 50%; left: 50%; width: 1920px; height: 1080px; transform-origin: center center; /* --slide-scale set per pane in JS; fit 1920×1080 into the content area */ transform: translate(-50%, -50%) scale(var(--slide-scale, 1)); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: var(--text-primary); padding: 96px; /* design-space padding (tunable) */ } .slide-number { font-size: var(--s-eyebrow-size); font-weight: var(--s-eyebrow-weight); letter-spacing: var(--s-eyebrow-tracking); text-transform: uppercase; margin-bottom: 24px; opacity: 0.7; } .slide-title { font-size: var(--s-title-size); font-weight: var(--s-title-weight); margin-bottom: 16px; line-height: 1.2; } .slide-description { font-size: var(--s-caption-size); max-width: 500px; opacity: 0.7; font-weight: var(--s-body-weight); } /* ===== Slide-type templates (shared/slide-templates.js) ===== These classes are the design-system realisation of DESIGN-BRIEF §5. A templated slide carries semantic classes only; all typography and spacing live here, so the deck restyles centrally. Templates render a still frame (no motion) — they're double-rendered as thumbnails. */ /* Shared eyebrow (slide number / kicker), reused across templates. */ .s-eyebrow { font-size: var(--s-eyebrow-size); font-weight: var(--s-eyebrow-weight); letter-spacing: var(--s-eyebrow-tracking); text-transform: uppercase; opacity: 0.7; } .s-accent { color: var(--accent-color); } /* Eyebrow excluded from vertical centring on the left-aligned CONTENT templates (bullets, split, code): the slide-number is floated above the title so the title+content group is what `justify-content:center` balances, instead of the eyebrow's height dragging it low (DESIGN-BRIEF §4.5). The centred openers (title, statement) deliberately keep the eyebrow in flow. */ .s-bullets > div:first-child, .s-split-body > div:first-child { position: relative; } .s-bullets > div:first-child > .slide-number, .s-split-body > div:first-child > .slide-number { position: absolute; bottom: 100%; } /* statement — one oversized idea, accent on a single word. */ .s-statement-num { margin-bottom: 64px; } .s-statement { font-size: var(--s-statement-size); font-weight: var(--s-statement-weight); line-height: 1.18; max-width: 1440px; } .s-statement-foot { margin-top: 48px; font-size: 19px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; /* 0.38 blandede ned til #A8A197 = 2,37:1 mod creme — under enhver WCAG- grænse, og linjen bærer statement-slidets eneste forklaring. 0.6 giver 4,54:1 og er stadig tydeligt underordnet den 96px store sætning. */ opacity: 0.6; } /* split — text column + media column (≈55/45). Breaks the safe-area padding deliberately and lays out left-aligned. */ .s-split { position: absolute; inset: var(--grid-margin); display: flex; gap: var(--grid-gutter); /* the split falls on the col-7 / col-8 gutter */ align-items: center; text-align: left; } .s-split-body { flex: 0 0 var(--grid-span-7); /* columns 1–7 */ display: flex; flex-direction: column; gap: 36px; } .s-split-title { font-size: var(--s-split-title-size); font-weight: var(--s-title-weight); line-height: 1.2; } .s-split-points { display: flex; flex-direction: column; gap: 18px; } .s-split-points > div { font-size: var(--s-body-size); color: var(--text-secondary); line-height: 1.5; } /* In split/bullets bodies: = accent highlight, = primary emphasis. Authoring stays plain; the colour rule lives here. */ .s-split-points strong, .s-bullets-list strong { color: var(--accent-color); font-weight: 600; } .s-split-points b, .s-bullets-list b { color: var(--text-primary); font-weight: 600; } .s-aside { font-size: var(--s-caption-size); font-style: italic; opacity: 0.38; line-height: 1.65; max-width: 500px; border-left: 2px solid var(--border-color); padding-left: 20px; } .s-split-media { flex: 1 1 0; /* columns 8–12 (fills the remaining 706px) */ align-self: stretch; border-radius: 20px; overflow: hidden; background: var(--bg-secondary); border: 1px dashed var(--border-color); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; padding: 48px; } .s-split-media img { width: 100%; height: 100%; object-fit: cover; } /* Media column hosting an inline interactive artifact: a positioning context (so the artifact's `position:absolute; inset:0` fills THIS column, not the whole slide) with no placeholder frame — the artifact draws its own surface. */ .s-split-media--artifact { position: relative; background: transparent; border: 0; padding: 0; overflow: hidden; } .s-media-note { font-size: 13px; opacity: 0.3; text-align: center; font-family: var(--s-code-font); } /* Code — IBM Plex Mono 600; comments 400. Use .s-code on a code block and .s-code-comment (or a nested .s-comment) for comment text. */ .s-code { font-family: var(--s-code-font); font-weight: var(--s-code-weight); } .s-code-comment, .s-code .s-comment { font-weight: var(--s-comment-weight); } /* ── Codebox — THE way to show code on a slide ────────────────────── One shared panel so code looks identical across chapters: rounded card, header bar with a label (left) and language tag (right), line-numbered body in IBM Plex Mono. Built by renderCodebox() in shared/slide-templates.js — both the `code` template and bespoke diagram canvases should go through it rather than hand-rolling panels. Inside a line: = keyword (accent), = comment. Sizes are design-space px. */ .s-codebox { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; text-align: left; box-shadow: 0 4px 28px rgba(var(--shadow-rgb), 0.06); } .s-codebox-bar { display: flex; align-items: center; gap: 14px; padding: 16px 28px; border-bottom: 1px solid var(--border-color); flex-shrink: 0; } .s-codebox-label { font-family: var(--s-code-font); font-weight: var(--s-code-weight); font-size: 17px; letter-spacing: 0.5px; color: var(--text-primary); } .s-codebox-lang { margin-left: auto; font-family: var(--s-code-font); font-weight: var(--s-comment-weight); font-size: 16px; letter-spacing: 1px; color: var(--text-tertiary); } .s-codebox-badge { background: var(--accent-color); color: var(--bg-primary); font-size: 13px; font-weight: 700; padding: 4px 14px; border-radius: 20px; letter-spacing: 0.5px; white-space: nowrap; } /* A badge sits at the far right; if no lang tag precedes it, push it there. */ .s-codebox-badge:nth-child(2) { margin-left: auto; } .s-codebox-body { padding: 36px 44px; font-family: var(--s-code-font); font-weight: var(--s-code-weight); font-size: var(--s-codebox-size, 40px); line-height: 1.75; counter-reset: codeline; display: flex; flex-direction: column; /* no flex: 1 or justify-content: center — size to content */ } .s-codeline { counter-increment: codeline; display: flex; align-items: baseline; gap: 0.9em; } .s-codeline::before { content: counter(codeline); font-weight: var(--s-comment-weight); font-size: 0.62em; color: var(--text-tertiary); opacity: 0.7; min-width: 1.4em; text-align: right; flex-shrink: 0; /* keep the number on the line's baseline grid */ transform: translateY(-0.06em); } .s-codebox--plain .s-codeline::before { display: none; /* opt out of line numbers (single-line snippets) */ } .s-codebox .s-k { color: var(--accent-color); } .s-codebox .s-comment { font-weight: var(--s-comment-weight); color: var(--text-tertiary); } /* bullets — left-aligned title + a list of parallel points. */ .s-bullets { position: absolute; inset: 96px; display: flex; flex-direction: column; justify-content: center; gap: 40px; text-align: left; } .s-bullets-title { font-size: var(--s-title-size); font-weight: var(--s-title-weight); line-height: 1.2; } .s-bullets-list { display: flex; flex-direction: column; gap: 22px; max-width: 1280px; } /* No bullet glyph: points read as clean stacked lines anchored by their bold key terms — same marker-free treatment as .s-split-points (DESIGN-BRIEF §5, "punktopstillinger uden streger/prikker"). */ .s-bullets-list > li { list-style: none; font-size: var(--s-body-size); font-weight: var(--s-body-weight); color: var(--text-secondary); line-height: 1.5; } /* ----- Chapter back hint ----- */ .chapter-back-hint { position: absolute; top: 0; left: 0; width: 100%; padding: 24px; text-align: center; /* text stays centered on the viewport */ font-size: 16px; color: var(--text-secondary); z-index: 100; /* Hidden above the stage top (clipped by .stage overflow), then slides down in sync with the content using the same transform. */ transform: translateY(-100%); transition: transform 0.4s var(--ease); } /* The painted panel (bg, border, shadow) only spans the current rail + content pane, so the left/right rails are never touched. */ .chapter-back-hint::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--hint-left, 0px); width: var(--hint-width, 100%); /* Subtle accent wash over the panel — mirrors the side-rail tint. */ background: linear-gradient( rgba(var(--accent-rgb), 0.05), rgba(var(--accent-rgb), 0.05) ), var(--bg-secondary); border-bottom: 1px solid var(--border-color); box-shadow: inset 0 -4px 12px rgba(var(--shadow-rgb), 0.1); z-index: -1; } .chapter-back-hint.active { transform: translateY(0); } .chapter-back-hint.dismissing { transition: transform 0.15s var(--ease); } .chapter-back-hint-text { font-weight: 500; margin-bottom: 8px; color: var(--accent-color); } .chapter-back-hint-instruction { font-size: 14px; opacity: 0.7; } /* ----- Chapter forward hint (mirror of back hint, anchored bottom) ----- */ .chapter-fwd-hint { position: absolute; bottom: 0; left: 0; width: 100%; padding: 24px; text-align: center; /* text stays centered on the viewport */ font-size: 16px; color: var(--text-secondary); z-index: 100; /* Hidden below the stage bottom (clipped by .stage overflow), then slides up in sync with the content using the same transform. */ transform: translateY(100%); transition: transform 0.4s var(--ease); } /* Painted panel spans current rail + content pane only (see back hint). */ .chapter-fwd-hint::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--hint-left, 0px); width: var(--hint-width, 100%); /* Subtle accent wash over the panel — mirrors the side-rail tint. */ background: linear-gradient( rgba(var(--accent-rgb), 0.05), rgba(var(--accent-rgb), 0.05) ), var(--bg-secondary); border-top: 1px solid var(--border-color); box-shadow: inset 0 4px 12px rgba(var(--shadow-rgb), 0.1); z-index: -1; } .chapter-fwd-hint.active { transform: translateY(0); } .chapter-fwd-hint.dismissing { transition: transform 0.15s var(--ease); } .chapter-fwd-hint-text { font-weight: 500; margin-bottom: 8px; color: var(--accent-color); } .chapter-fwd-hint-instruction { font-size: 14px; opacity: 0.7; } /* ----- Keyboard hint ----- */ .keyboard-hint { position: absolute; top: 78%; left: 50%; transform: translateX(-50%); font-size: 14px; text-transform: uppercase; letter-spacing: 0.8px; z-index: 60; opacity: 1; transition: opacity 1s ease-out; color: var(--text-tertiary); background: var(--bg-primary); padding: 10px 18px; border-radius: 6px; border: 1px solid var(--rail-border); white-space: nowrap; } .keyboard-hint.faded { opacity: 0; pointer-events: none; } .keyboard-hint span { padding: 6px 12px; border-radius: 4px; margin: 0 6px; font-family: var(--s-code-font); font-weight: var(--s-code-weight); background: rgba(128, 128, 128, 0.15); } /* ----- Watermark (floating at bottom of stage) ----- */ .watermark { position: absolute; bottom: 10px; left: 0; right: 0; height: auto; background: transparent; display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--text-tertiary); font-weight: 500; letter-spacing: 0.5px; z-index: 50; pointer-events: none; padding: 4px 20px; } /* ----- Media button ("Lær mere") ----- Original form factor and bottom-centre anchor preserved (the overlay zooms open from the button's centre, so this must stay put). Bumped up in size and tinted with the subject accent so it reads as an action, plus a one-shot ring pulse when it surfaces on a media-bearing slide. */ .media-button { position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); padding: 13px 28px; background: var(--bg-primary); color: var(--accent-color); border: 1px solid var(--accent-color); border-radius: 4px; font-size: 12px; font-weight: 600; cursor: pointer; transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; z-index: 60; font-family: "Spectral", serif; text-transform: uppercase; letter-spacing: 2px; box-shadow: 0 4px 12px rgba(var(--shadow-rgb), 0.15), 0 1px 3px rgba(var(--shadow-rgb), 0.1); } @media (hover: hover) { .media-button:hover { color: var(--bg-primary); background: var(--accent-color); transform: translateX(-50%) translateY(-2px); } } /* ----- System-wide press feedback ----- Every interactive control dips slightly while held — the tactile "received" beat taught by the 3.7 affordance artifact, applied deck-wide (chrome AND every artifact's own buttons) so it's a consistent behaviour, not a media-button one-off. Kept subtle on purpose — a real press is a nudge, not a hop. Ungated by (hover: hover) so touch taps get it too. The dip uses the individual `scale:` property, NOT transform: scale(). That matters: `scale:` COMPOSES with any existing `transform:` instead of replacing it, so it layers cleanly on top of .media-button's translateX(-50%) centring, a button's :hover translateY lift, or any transform an artifact button already carries. That's what lets one broad rule safely cover every