/* GENERATED by scripts/sync-monitor.mjs from the deck source (c272) — do not edit. */ /* ── p02 inleiding · redesigned composition (section agent, reconciled into c212) ── */ /* p02 · Inleiding — section-local composition (scoped to #p02). Loaded AFTER base.css, so it overrides the shared FORM A rules for this section. IDEA: the inleiding is the on-ramp. Instead of three flat mini-scenes in a rail, one tall sticky "stage" card morphs through the three things a reader must grasp before the data: (1) the charter's promise as a single pipeline to the top, (2) the three NESTED levels the monitor measures (top ⊂ subtop ⊂ organisatie), (3) the cohort — 93 invited, 75 answered = 81% — drawn as an honest dot-grid with the 281/299 standing-cohort context. The text spine reuses .read-col .act so the engine still masks the prose and the pager still snaps; section.js swaps the scene. */ /* ── spine: a touch more room for the figure than the default rail ── */ #p02 .intro-frame{grid-template-columns:1.04fr .96fr} /* c244 · the chapter tail must sit on the TEXT COLUMN, not the frame's padding. The sticky rail's pin range is bounded by the grid ROW (= the read-col's height); padding on the frame lifted the section (so p03 didn't peek in) but left the rail running out of range and creeping up ~9px per act. Tailing the read-col itself extends the row, so the rail stays pinned at 20vh through the last act — the p03/.steps fix, applied to FORM A. Desktop only (rail is static on phones). Matches the shared `.scrolly .steps` tail. */ @media(min-width:821px){#p02 .read-col{padding-bottom:54vh}} #p02 .read-col .act{min-height:62vh} #p02 .read-col .act .prose{max-width:40ch} /* the active act's eyebrow brightens; idle ones sit back with the prose */ #p02 .read-col .act .eyebrow{color:var(--ink-mute);transition:color var(--dur-3) var(--ease-move)} .js-anim #p02 .read-col .act.active .eyebrow{color:var(--accent)} /* ── the sticky stage ── */ #p02{--p02-card-h:min(64vh,520px)} #p02 .intro-rail{position:sticky;top:max(18vh,calc(50vh - 260px));height:var(--p02-card-h);display:flex;align-items:stretch} #p02 .intro-card{position:relative;width:100%;height:100%;min-height:0; background:#fff;border-radius:24px;overflow:hidden; box-shadow:0 1px 2px rgba(20,20,58,.04),0 18px 44px rgba(20,20,58,.10)} /* scenes are stacked + crossfaded; section.js toggles .is-on */ #p02 .iscene{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center; padding:34px 38px;opacity:0;visibility:hidden;transform:translateY(10px); transition:opacity var(--dur-3-out) var(--ease-depart),transform var(--dur-3-out) var(--ease-depart),visibility 0s linear var(--dur-3-out)} #p02 .iscene.is-on{opacity:1;visibility:visible;transform:none;transition:opacity var(--dur-3) var(--ease-arrive),transform var(--dur-3) var(--ease-arrive)} /* no-JS / reduced-motion safety: first scene shows */ .no-js #p02 .iscene[data-figure="charter"]{opacity:1;visibility:visible;transform:none} #p02 .ik{font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase; color:var(--accent);margin:0 0 22px} #p02 .icap{font-size:11.5px;color:var(--ink-mute);font-style:italic;line-height:1.45;margin:24px 0 0;max-width:34ch} /* ════ SCENES charter + levels · two isometric figures ════ c252 · the metro-to-a-skyline and the three flat pills gave way to one small isometric world. figures.mjs writes the POSTER frame into section.html (what /toegankelijk, no-JS and reduced-motion readers see); section.js animates it. Colours only — no url(#id) paint servers, because mobile.js clones the card and strips every id. */ #p02 .p02-fig{position:relative;flex:1 1 auto;min-height:0;width:100%;display:flex;align-items:center;justify-content:center} #p02 .p02-iso{display:block;width:100%;height:100%;max-height:360px;overflow:visible} #p02 .p02-iso text{font-family:'Inter',system-ui,sans-serif} /* ── charter · de trap naar de top ── */ #p02 .st-floor .fl{fill:#d9e2f7} #p02 .s.f-x{fill:#cbd7f4} #p02 .s0.f-z{fill:#f4f7fe}#p02 .s1.f-z{fill:#eef3fe}#p02 .s2.f-z{fill:#e7eefd}#p02 .s3.f-z{fill:#e0e9fc}#p02 .s4.f-z{fill:#d9e4fc} #p02 .s0.f-y{fill:#e2e9fa}#p02 .s1.f-y{fill:#dae3f9}#p02 .s2.f-y{fill:#d2ddf8}#p02 .s3.f-y{fill:#cad7f7}#p02 .s4.f-y{fill:#c2d1f6} #p02 .pl.f-z{fill:#272c86}#p02 .pl.f-x{fill:#15165a}#p02 .pl.f-y{fill:#1d1f70} #p02 .rm{transition:fill var(--dur-3) var(--ease-move)} #p02 .rm.f-z{fill:#4c55c0}#p02 .rm.f-x{fill:#2f3598}#p02 .rm.f-y{fill:#3a41aa} #p02 .st-rim.glow .rm{transition:fill .08s linear} #p02 .st-rim.glow .rm.f-z{fill:#b9c7ff}#p02 .st-rim.glow .rm.f-x{fill:#7a8cf0}#p02 .st-rim.glow .rm.f-y{fill:#93a3f6} #p02 .lb{font-weight:600;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;transition:fill var(--dur-3) var(--ease-move)} #p02 .lb-in{fill:#8a96c4} #p02 .lb-door{fill:#5a69b0} #p02 .lb-beh{fill:#aebdff;font-size:10.5px;letter-spacing:.2em} #p02 .lb.ping{transition:fill .06s linear} #p02 .lb-in.ping,#p02 .lb-door.ping{fill:#5873e0} #p02 .lb-beh.ping{fill:#fff} #p02 .sh{fill:rgba(17,17,98,.16)} /* c266 · the talent: stylised women (figures.mjs · womanGlyph) — body + head in the accent, a light left facet and a glint on the head; seated ones light up white */ #p02 .st-svg .bl .wb,#p02 .st-svg .bl .wh{fill:var(--accent)} #p02 .st-svg .bl.alt .wb,#p02 .st-svg .bl.alt .wh{fill:#5f7ae6} #p02 .st-svg .bl .wl{fill:#fff;opacity:.17} #p02 .st-svg .bl .gl{fill:#fff;opacity:.5} #p02 .st-svg .bl.lit .wb,#p02 .st-svg .bl.lit .wh{fill:#fff} #p02 .st-svg .bl.lit .wl,#p02 .st-svg .bl.lit .gl{opacity:0} #p02 .st-svg .bl.lit{filter:drop-shadow(0 0 3px rgba(150,172,255,.95))} #p02 .st-svg .rip{fill:none;stroke:#c9d5ff;stroke-width:1.2} /* ── levels · drie niveaus ── */ #p02 .sl.f-z{stroke:rgba(255,255,255,.9);stroke-width:1;stroke-linejoin:round} #p02 .sl-org.f-z{fill:#f5f7fd}#p02 .sl-org.f-y{fill:#dde4f6}#p02 .sl-org.f-x{fill:#cad4ee} #p02 .sl-sub.f-z{fill:#f0f4ff}#p02 .sl-sub.f-y{fill:#bccbf3}#p02 .sl-sub.f-x{fill:#a7baee} #p02 .sl-top.f-z{fill:#edf1ff}#p02 .sl-top.f-y{fill:#2b308c}#p02 .sl-top.f-x{fill:#1c1c6e} #p02 .lv-svg .sh{fill:rgba(17,17,98,.13)} #p02 .lv-svg .pp>circle:first-child{fill:#c9d1e7} #p02 .lv-svg .pp.w>circle:first-child{fill:var(--accent)} #p02 .lv-svg .pp>.gl{fill:#fff;opacity:.6} /* c269 · an identified woman is her figure, not a dot (the poster shows everyone identified) */ #p02 .lv-svg .pp.w>circle{opacity:0} #p02 .lv-svg .wf .wb,#p02 .lv-svg .wf .wh,#p02 .lv-key .wb,#p02 .lv-key .wh{fill:var(--accent)} #p02 .lv-svg .wf .wl,#p02 .lv-key .wl{fill:#fff;opacity:.17} #p02 .lv-svg .wf .gl,#p02 .lv-key .gl{fill:#fff;opacity:.5} /* c270 · …and her shadow is her own footprint, not a dot's (.62 of it ≈ the stairs women's .55 r) */ #p02 .lv-svg .shw{transform:scale(.62);transform-box:fill-box;transform-origin:50% 50%} #p02 .lv-lab line{stroke:#b4bfe2;stroke-width:1;stroke-dasharray:2 3} #p02 .lv-lab circle{fill:#8492c8} #p02 .lv-lab text{font-family:var(--display);font-size:15px;font-weight:500;letter-spacing:-.01em;fill:var(--brand)} #p02 .lv-lab line,#p02 .lv-lab circle{transition:stroke var(--dur-2) var(--ease-move),fill var(--dur-2) var(--ease-move)} #p02 .lv-svg.anim .lv.lit .lv-lab line{stroke:#90a5f2;stroke-dasharray:none} #p02 .lv-svg.anim .lv.lit .lv-lab circle{fill:var(--accent)} #p02 .lv-key text{font-size:8.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;fill:var(--ink-mute)} #p02 .scan{opacity:0;pointer-events:none} #p02 .scan .sc{fill:rgba(59,91,219,.07);stroke:rgba(59,91,219,.6);stroke-width:1.2;stroke-linejoin:round} /* animated mode (section.js adds .anim): women light up only once the plane has measured their level, in a diagonal wave (--k = i+j); labels show only while the stack is apart */ /* live: everyone starts as a grey dot; as the scan passes, each woman's dot gives way to her figure, which rises from her feet (staggered across the level) */ #p02 .lv-svg.anim .pp.w>circle:first-child{fill:#c9d1e7} #p02 .lv-svg.anim .pp.w>circle{opacity:1;transition:opacity var(--dur-2) var(--ease-arrive)} #p02 .lv-svg.anim .wf{opacity:0;transform:scale(.35);transform-box:fill-box;transform-origin:50% 100%;transition:opacity var(--dur-2) var(--ease-depart),transform var(--dur-2) var(--ease-depart)} #p02 .lv-svg.anim .shw{transform:none;transition:transform var(--dur-2) var(--ease-depart)} #p02 .lv-svg.anim .lv.lit .shw{transform:scale(.62);transition:transform var(--dur-3) var(--ease-arrive);transition-delay:calc(var(--k) * 26ms);transition-delay:min(calc(var(--k) * 26ms),var(--stagger-cap))} #p02 .lv-svg.anim .lv.lit .pp.w>circle{opacity:0;transition-delay:calc(var(--k) * 26ms);transition-delay:min(calc(var(--k) * 26ms),var(--stagger-cap))} #p02 .lv-svg.anim .lv.lit .wf{opacity:1;transform:none;transition:opacity var(--dur-2) var(--ease-arrive),transform var(--dur-3) var(--ease-arrive);transition-delay:calc(var(--k) * 26ms);transition-delay:min(calc(var(--k) * 26ms),var(--stagger-cap))} #p02 .lv-svg.anim .lv-lab,#p02 .lv-svg.anim .lv-key{opacity:0;transition:opacity var(--dur-3-out) var(--ease-depart)} #p02 .lv-svg.anim.open .lv-lab,#p02 .lv-svg.anim.open .lv-key{opacity:1;transition:opacity var(--dur-3) var(--ease-arrive) .15s} /* ════ c253 · the card as ANCHOR, not frame ════════════════════════════════════════════ The card is the organisation; the void around it is the world outside. Talent drifts up from under it and walks in over a jetty that protrudes from its bottom edge (scene 1); every figure rides a stage lift through that edge instead of a crossfade. Heading + caption sit top-left; the figure owns the rest of the card. */ #p02 .intro-card{z-index:1} #p02 .iscene[data-figure="charter"],#p02 .iscene[data-figure="levels"]{justify-content:flex-start; opacity:1;transform:none;transition:visibility 0s linear .55s} #p02 .iscene[data-figure="charter"].is-on,#p02 .iscene[data-figure="levels"].is-on{transition:none} #p02 .iscene[data-figure="charter"] .ik,#p02 .iscene[data-figure="levels"] .ik{margin:0 0 9px} #p02 .iscene[data-figure="charter"] .icap,#p02 .iscene[data-figure="levels"] .icap{margin:0;max-width:36ch} #p02 .iscene .ik,#p02 .iscene .icap{position:relative;z-index:1} /* the text crossfades in place… */ #p02 .iscene:not(.is-on) .ik,#p02 .iscene:not(.is-on) .icap{opacity:0;transition:opacity var(--dur-2-out) var(--ease-depart)} #p02 .iscene.is-on .ik,#p02 .iscene.is-on .icap{opacity:1;transition:opacity var(--dur-2) var(--ease-arrive) var(--dur-2-out)} /* …while the figures ride the lift: the outgoing one sinks out through the bottom edge (CSS, here), the incoming one rises once it's gone (section.js moves the svg — so a figure also rises into view the first time the card scrolls in) */ #p02 .iscene:not(.is-on) .p02-fig{transform:translateY(calc(var(--p02-card-h) + 24px));transition:transform .5s var(--ease-depart)} /* engine-paced lift (section.js · Lift): keeps its .5s */ #p02 .iscene.is-on .p02-fig{transform:none;transition:none} /* c264 · taking over a poster that is already on screen (page load): no lift — the poster's dots fade out while the live ones fade in (section.js · Stairs.reset(inPlace)) */ /* c271 · on the desktop stage, with scripting on, the doorstroom figure waits BELOW the card's edge from the very first paint — section.js lifts it in at the reader's first tick (and unhides it should it fail). No-JS, reduced motion, the accessible page, phones and ≤820 keep the poster in place. */ @media (scripting: enabled) and (prefers-reduced-motion: no-preference) and (min-width: 821px){ html:not(.a11y):not(.m-deck) #p02:not(.md-slot) .st-svg{transform:translateY(calc(100% + 160px))} } #p02 .st-svg.boot .st-sh,#p02 .st-svg.boot .st-dots{opacity:0;transition:opacity .6s var(--ease-move)} #p02 .st-svg.boot .dyn{animation:p02-boot-in .6s var(--ease-move) both} @keyframes p02-boot-in{from{opacity:0}to{opacity:1}} #p02 .iscene[data-figure="respons"]{transform:translateY(26px)} #p02 .iscene[data-figure="respons"].is-on{transition:opacity var(--dur-3) var(--ease-arrive) var(--dur-3-out),transform var(--dur-3) var(--ease-arrive) var(--dur-3-out)} /* scene 1: the staircase is anchored to the card's bottom-left — its floor runs off the edge */ #p02 .iscene[data-figure="charter"] .p02-fig{position:absolute;inset:0;display:block} #p02 .st-svg{position:absolute;left:0;bottom:0;width:100%;height:calc(100% - 116px);max-height:none} #p02 .st-glass .gl-x{fill:rgba(255,255,255,.04);stroke:rgba(190,205,255,.13);stroke-width:.8} #p02 .st-glass .gl-z{fill:rgba(255,255,255,.1)} #p02 .st-glass polygon{transition:fill var(--dur-3) var(--ease-move),stroke var(--dur-3) var(--ease-move)} #p02 .st-glass.glow polygon{transition:fill .1s linear,stroke .1s linear} #p02 .st-glass.glow .gl-x{fill:rgba(200,214,255,.34);stroke:rgba(225,233,255,.95)} #p02 .st-glass.glow .gl-z{fill:rgba(255,255,255,.95)} /* ── UNDER and ABOVE the card: same box (the card ± margins), so one mapping serves both ── */ #p02 .p02-under,#p02 .p02-over{position:absolute;left:-44px;right:-44px;top:-150px;bottom:-300px;pointer-events:none} #p02 .p02-under{z-index:0} #p02 .p02-over{z-index:2} #p02 .p02-under svg,#p02 .p02-over svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:0} /* the jetty carries the card's own soft shadow, so it reads as part of the card, not a sticker */ #p02 .p02-ramp{filter:drop-shadow(0 7px 9px rgba(20,20,58,.08)) drop-shadow(0 1px 1px rgba(20,20,58,.05))} #p02 .p02-walk .ps{fill:rgba(17,17,98,.14)} /* c261 · the inflow FLIES in (section.js · makeFlight): two fixed layers on — BEHIND the page (the far side of an arc; the card and the text occlude it) and IN FRONT of it (the near side). A ball is one element drawn at its largest size and scaled DOWN, so it stays crisp up close. */ .p02-sky{position:fixed;inset:0;pointer-events:none;overflow:hidden} .p02-sky.back{z-index:-1} .p02-sky.front{z-index:30} .p02-sky i{position:absolute;left:0;top:0;will-change:opacity} .p02-sky i>u{position:absolute;left:0;top:0;transform-origin:50% 100%;will-change:transform} .p02-sky i>b{position:absolute;left:0;top:0;border-radius:50%;background:rgba(17,17,98,.14);transform-origin:50% 50%;will-change:transform,opacity} .p02-sky i svg{display:block;width:100%;height:100%;overflow:visible} .p02-sky i .wb,.p02-sky i .wh{fill:#3b5bdb} .p02-sky i .wl{fill:#fff;opacity:.17} .p02-sky i .gl{fill:#fff;opacity:.5} /* ════ SCENE respons · 81% cohort dot-grid + standing-cohort context ════ */ #p02 .resp-top{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin:0 0 20px} #p02 .resp-stat{font-family:'Inter',system-ui,sans-serif;font-weight:600;line-height:.92;letter-spacing:-.055em; font-variant-numeric:tabular-nums;color:var(--brand);font-size:clamp(42px,4.9vw,56px);margin:0} #p02 .resp-stat .u{font-size:.36em;font-weight:600;color:var(--ink-soft);letter-spacing:-.02em;margin-left:4px} #p02 .resp-sub{font-size:13px;line-height:1.42;color:var(--ink-soft);margin:0;max-width:26ch} #p02 .resp-sub b{color:var(--brand);font-weight:600} #p02 .dotgrid{display:grid;grid-template-columns:repeat(15,1fr);gap:7px;margin:2px 0 0} #p02 .dotgrid i{aspect-ratio:1;border-radius:50%;background:#e4e9f5;transition:transform var(--dur-2) var(--ease-move)} #p02 .dotgrid i.fill{background:#b9c8f7} #p02 .dotgrid i.fill.edge{background:var(--brand)} /* only the FILLED dots pop in, left-to-right, when the respons scene lands (delay set inline by JS, capped so a static frame is always complete). Resting state is fully visible, so a missed observer can never leave the grid half-drawn. */ #p02 .iscene[data-figure="respons"].is-on .dotgrid i.fill{animation:p02dot var(--dur-2) var(--ease-arrive) backwards} @keyframes p02dot{from{transform:scale(.1);opacity:.2}to{transform:scale(1);opacity:1}} #p02 .resp-foot{display:flex;gap:12px;margin:22px 0 0;padding-top:18px} #p02 .rf{display:flex;flex-direction:column;gap:3px;flex:1 1 0;border-radius:16px;background:#eef3ff;padding:15px 17px} #p02 .rf-n{font-family:var(--display);font-size:26px;font-weight:500;color:var(--brand); line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums} #p02 .rf-l{font-size:11px;color:var(--ink-mute);line-height:1.35;max-width:18ch} /* ── tiny scene counter so the morph reads as 1/2/3 of one stage ── */ #p02 .intro-card::after{content:attr(data-beat) " / 3";position:absolute;right:18px;bottom:14px; font:600 10px ui-monospace,Menlo,monospace;letter-spacing:.1em;color:var(--ink-mute);opacity:.7} /* ════ responsive — phones: the SAME sticky-scrollytelling as the .scrolly chapters, vertical. The figure card pins to the TOP (full-bleed) and crossfades its scene per active act, while the text acts scroll under the thumb in the bottom half and snap past. Still ONE sticky card that morphs — the desktop idea, stacked, with the SCROLLING text where the thumb is. ════ */ @media(max-width:820px){ #p02 .intro-frame{grid-template-columns:1fr} #p02 .read-col .act{min-height:0} #p02 .intro-rail{position:static;height:auto;display:block;margin-top:8px} #p02 .intro-card{min-height:0} /* on phones the scene-swap can't track a sticky figure, so show all three stacked */ #p02 .iscene{position:relative;inset:auto;opacity:1;visibility:visible;transform:none; padding:26px 22px} #p02 .iscene[data-figure="respons"].is-on .dotgrid i{animation:none} #p02 .p02-fig{flex:0 0 auto} #p02 .p02-iso{height:auto;max-height:min(62vh,440px)} #p02 .intro-card::after{display:none} } /* stacked layouts (≤820 and /toegankelijk): no stage — everything in flow and in place */ @media(max-width:820px){ #p02 .p02-under,#p02 .p02-over{display:none} .p02-sky{display:none} #p02 .iscene .p02-fig,#p02 .iscene[data-figure="charter"] .p02-fig{position:relative;inset:auto;transform:none!important;transition:none!important} #p02 .iscene .ik,#p02 .iscene .icap{opacity:1!important} #p02 .iscene[data-figure="charter"]{overflow:hidden} #p02 .st-svg{position:relative;height:auto;max-height:min(62vh,440px);margin:14px 0 -26px -22px;width:calc(100% + 44px)} #p02 .iscene[data-figure="levels"] .p02-fig{margin-top:14px} } html.a11y #p02 .p02-under,html.a11y #p02 .p02-over{display:none} html.a11y .p02-sky{display:none} html.a11y #p02 .iscene .p02-fig{position:relative!important;inset:auto!important;transform:none!important} html.a11y #p02 .iscene .ik,html.a11y #p02 .iscene .icap{opacity:1!important} html.a11y #p02 .iscene[data-figure="charter"]{overflow:hidden} html.a11y #p02 .st-svg{position:relative;height:auto;max-height:440px;margin:14px 0 -34px -38px;width:calc(100% + 76px)} html.a11y #p02 .iscene[data-figure="levels"] .p02-fig{margin-top:14px} /* phone frame (mobile.js clones the card into .md-slot, which carries id="p02"): the scene is a fixed-height column, so the figure takes what the heading + caption leave and scales to fit */ #p02.md-slot .p02-fig{flex:1 1 0;min-height:0;width:100%;margin:0;transform:none!important;transition:none!important} #p02.md-slot .p02-iso{width:100%;height:100%;max-height:none} #p02.md-slot .ik{margin:0 0 8px} #p02.md-slot .icap{margin:0 0 6px;text-align:center} #p02.md-slot .ik,#p02.md-slot .icap{opacity:1!important} #p02.md-slot .iscene[data-figure="charter"]{overflow:hidden!important} #p02.md-slot .iscene[data-figure="charter"] .p02-fig{position:absolute;inset:0} #p02.md-slot .st-svg{position:absolute!important;left:0;bottom:0;height:calc(100% - 100px); -webkit-mask-image:linear-gradient(to top,transparent 0,#000 10%);mask-image:linear-gradient(to top,transparent 0,#000 10%)} @media(prefers-reduced-motion:reduce){ #p02 .iscene,#p02 .dotgrid i{animation:none!important;transition:opacity .2s linear!important} #p02 .p02-fig{transition:none!important} }