/* ============================================================ checkpoint.sg · Advertise microsite A four-slide, full-screen "live dispatch" editorial deck. Slides 1–3 advance with Next; slide 4 opens the Tally form. Two palettes are available. The default is "signal" (red on cream); switch to dark by setting data-palette="midnight" on the element. ============================================================ */ :root { --red: #F25C4F; --red-deep: #DB3F31; --red-soft: #FCE3DF; --ink: #0E0E0E; --ink-2: #1A1A1A; --mute: rgba(14,14,14,0.55); --line: rgba(14,14,14,0.10); --line-dk: rgba(14,14,14,0.18); --paper: #F6F1E8; --paper-lite: #FCF8EE; --paper-deep: #ECE5D2; --display: "Archivo Black", "Archivo", system-ui, sans-serif; --sans: "Archivo", system-ui, -apple-system, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace; --top-h: 56px; /* progress + brand bar */ --foot-h: 96px; /* nav buttons area */ --pad: 22px; } [data-palette="midnight"] { --red: #FF5A4A; --ink: #F6F1E8; --paper: #0C0C0C; --paper-lite: #161616; --paper-deep: #1F1F1F; --line: rgba(246,241,232,0.10); --line-dk: rgba(246,241,232,0.20); --mute: rgba(246,241,232,0.58); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: #0E0E0E; color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; min-height: 100dvh; overflow: hidden; /* the deck is paged, not scrolled */ } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } ::selection { background: var(--red); color: #fff; } /* ============================================================ App shell — fills the viewport, capped + centred on wide screens ============================================================ */ .app { position: relative; width: 100%; max-width: 1080px; margin-inline: auto; height: 100vh; height: 100dvh; background: var(--paper); display: flex; flex-direction: column; overflow: hidden; isolation: isolate; container-type: inline-size; } /* ============================================================ Top bar — progress dots + brand + counter Floats OVER each slide so the slide bg extends behind it. ============================================================ */ .top-bar { position: absolute; top: 0; left: 0; right: 0; height: var(--top-h); padding: 0 var(--pad); display: flex; align-items: center; justify-content: space-between; gap: 14px; z-index: 30; pointer-events: none; } .top-bar > * { pointer-events: auto; } .top-bar .brand { display: inline-flex; align-items: center; gap: 7px; font-family: var(--display); font-size: 11.5px; text-transform: uppercase; letter-spacing: -0.005em; white-space: nowrap; } .top-bar .brand-suffix { color: var(--red); margin-left: 1px; } .top-bar .brand-mark { width: 16px; height: 16px; background: url("assets/logo.png") center / contain no-repeat; border-radius: 4px; flex: 0 0 16px; } .progress { display: flex; gap: 4px; flex: 1; align-items: center; } .progress .bar { flex: 1; height: 2px; background: currentColor; opacity: 0.18; border-radius: 1px; position: relative; overflow: hidden; } .progress .bar.done { opacity: 0.55; } .progress .bar.active { opacity: 1; } .progress .bar.active::after { content: ""; position: absolute; inset: 0; background: var(--red); transform-origin: left; animation: progress-fill 0.5s ease-out forwards; } @keyframes progress-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } } .progress .bar.done::after { content: ""; position: absolute; inset: 0; background: var(--red); } .counter { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; white-space: nowrap; opacity: 0.75; } /* ============================================================ Deck — flex row, slides translate horizontally ============================================================ */ .deck-wrap { flex: 1; position: relative; overflow: hidden; } .deck { display: flex; width: 400%; height: 100%; transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } /* No slide animation until the deck has settled on its initial slide */ .app.booting .deck { transition: none; } .slide { flex: 0 0 25%; width: 25%; height: 100%; position: relative; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; background: var(--paper); } .slide-inner { min-height: 100%; display: flex; flex-direction: column; position: relative; padding-top: var(--top-h); /* clear floating top-bar */ padding-bottom: var(--foot-h); /* clear floating foot */ } /* Top bar floats over dark/photographic slides — keep it light on all four */ .app[data-slide="0"] .top-bar, .app[data-slide="1"] .top-bar, .app[data-slide="2"] .top-bar, .app[data-slide="3"] .top-bar { color: #F6F1E8; } /* ============================================================ Foot — nav buttons (floats over slide bg) ============================================================ */ .foot { position: absolute; bottom: 0; left: 0; right: 0; height: var(--foot-h); padding: 0 var(--pad); display: flex; align-items: center; justify-content: space-between; gap: 14px; z-index: 30; pointer-events: none; } .foot > * { pointer-events: auto; } .nav-btn { appearance: none; background: transparent; border: 1px solid #fff; color: #fff; padding: 12px 14px; border-radius: 999px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; opacity: 1; transition: background .15s ease, transform .15s ease; } .nav-btn:hover { background: rgba(255,255,255,0.12); transform: translateY(-1px); } .nav-btn:disabled { opacity: 0.35; cursor: not-allowed; } .nav-btn .ic { display: inline-flex; color: #fff; } .nav-next { background: var(--red); color: #fff; border: 0; padding: 16px 22px; font-family: var(--display); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--red) 60%, transparent); transition: transform .15s ease, background .15s ease, box-shadow .15s ease; } .nav-next:hover { transform: translateY(-1px); background: var(--red-deep); box-shadow: 0 14px 28px -8px color-mix(in srgb, var(--red) 70%, transparent); } /* Compact circular back icon — used on the CTA slide so the CTA gets full width */ .nav-back-icon { flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid #fff; color: #fff; border-radius: 50%; cursor: pointer; opacity: 1; transition: background .15s, transform .15s; } .nav-back-icon:hover { background: rgba(255,255,255,0.12); transform: translateY(-1px); } .nav-back-icon:disabled { opacity: 0.35; cursor: not-allowed; } /* Foot CTA (final slide) — full-width red pill that opens the Tally form */ .nav-cta-foot { flex: 1; font-family: var(--display); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; background: var(--red); color: #fff; border: 0; border-radius: 999px; padding: 14px 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--red) 60%, transparent); transition: transform .15s, background .15s, box-shadow .15s; white-space: nowrap; } .nav-cta-foot:hover { background: var(--red-deep); transform: translateY(-1px); box-shadow: 0 16px 30px -10px color-mix(in srgb, var(--red) 70%, transparent); } /* ============================================================ Editorial system — shared by all four slides (Full-bleed photo + gradient overlay + grain + content stack) ============================================================ */ .editorial { background: var(--ink); color: #F6F1E8; } .editorial .slide-inner { padding: 0; } .editorial .photo { position: absolute; inset: 0; filter: saturate(0.96) brightness(0.93) contrast(1.02); } .editorial .photo-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,14,14,0.55) 0%, rgba(14,14,14,0.15) 22%, rgba(14,14,14,0.0) 42%, rgba(14,14,14,0.55) 78%, rgba(14,14,14,0.95) 100%); pointer-events: none; } .editorial .photo-grain { position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px); mix-blend-mode: overlay; pointer-events: none; } .editorial .content { position: relative; z-index: 2; padding: calc(var(--top-h) + 4px) var(--pad) calc(var(--foot-h) + 4px); flex: 1; /* fill the slide so the headline anchors to the bottom */ display: flex; flex-direction: column; justify-content: space-between; gap: 22px; /* breathing room between stamp pill and headline block */ color: #fff; } .editorial .stamp { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 0.5px solid rgba(255,255,255,0.35); border-radius: 999px; background: rgba(0,0,0,0.40); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; width: fit-content; white-space: nowrap; } .editorial .stamp .d { width: 5px; height: 5px; border-radius: 50%; background: var(--red); animation: pulse 1.8s ease-in-out infinite; } .editorial h1 { margin: 0; font-family: var(--display); font-size: clamp(26px, 6.6vw, 36px); line-height: 0.94; text-transform: uppercase; letter-spacing: -0.012em; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,0.4); text-wrap: balance; } .editorial h1 .mk { background: var(--red); color: #fff; padding: 0 0.10em; display: inline-block; margin-top: 0.04em; text-shadow: none; } .editorial .h-attr { margin: 12px 0 0; font-style: italic; font-size: 15.5px; line-height: 1.45; color: rgba(255,255,255,0.92); max-width: 34ch; } .editorial .h-rare { margin: 10px 0 0; padding-top: 10px; border-top: 0.5px solid rgba(255,255,255,0.25); font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.78); line-height: 1.45; max-width: 34ch; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* ============================================================ Editorial headline animation Staggered line reveal + the red highlight box scaling in last. Plays whenever a slide becomes .is-active. ============================================================ */ .s2-stack { display: block; margin: 0; } .s2-stack .line { display: block; line-height: 1; margin-bottom: 0.04em; } .s2-stack .line:last-child { margin-bottom: 0; } /* Base state (inactive): lines hidden + nudged down */ .s2-stack .line .ink { display: inline-block; opacity: 0; transform: translateY(20px); will-change: transform, opacity; } /* Active state: stagger in */ .slide.is-active .s2-stack .line .ink { animation: s2-line-up 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .slide.is-active .s2-stack .line:nth-child(1) .ink { animation-delay: 0.15s; } .slide.is-active .s2-stack .line:nth-child(2) .ink { animation-delay: 0.40s; } .slide.is-active .s2-stack .line:nth-child(3) .ink { animation-delay: 0.65s; } @keyframes s2-line-up { 0% { opacity: 0; transform: translateY(20px); } 60% { opacity: 1; } 100% { opacity: 1; transform: translateY(0); } } /* The red .mk highlight box scales in last (on whichever line carries it) */ .s2-stack .mk { display: inline-block; transform-origin: left center; transform: scaleX(0); opacity: 0.4; } /* 3-line stacks: last line's mk pops at ~1.25s; 2-line stacks: at ~0.95s */ .slide.is-active .s2-stack .line:nth-child(3) .mk { animation: s2-mk-in 0.55s cubic-bezier(0.5, 1.55, 0.45, 1) 1.25s forwards; } .slide.is-active .s2-stack .line:nth-child(2):last-child .mk { animation: s2-mk-in 0.55s cubic-bezier(0.5, 1.55, 0.45, 1) 0.95s forwards; } .slide.is-active .s2-stack .line:nth-child(1):last-child .mk { animation: s2-mk-in 0.55s cubic-bezier(0.5, 1.55, 0.45, 1) 0.65s forwards; } @keyframes s2-mk-in { 0% { transform: scaleX(0); opacity: 0.4; } 55% { transform: scaleX(1.05); opacity: 1; } 100% { transform: scaleX(1); opacity: 1; } } /* Editorial chrome — the supporting copy fades in after the headline lands */ .editorial .h-attr, .editorial .h-rare { opacity: 0; transform: translateY(8px); transition: opacity 0.5s ease, transform 0.5s ease; } .slide.is-active .h-attr { opacity: 1; transform: none; transition-delay: 1.55s; } .slide.is-active .h-rare { opacity: 1; transform: none; transition-delay: 1.75s; } /* ============================================================ Slide 1 — Cinematic hero (the high-intent moment) ============================================================ */ .slide-1 .photo { background: url("assets/hero-journalist.webp") center / cover no-repeat; } /* ============================================================ Slide 2 — The spending moment (editorial / field report) Full-bleed JB-night photo behind the editorial overlay. ============================================================ */ .slide-2 { background: #120808; color: #fff; position: relative; } .slide-2 .photo { background: url("assets/jb-night-loklok-v3.webp") center / cover no-repeat; filter: saturate(1.05) brightness(0.92) contrast(1.04); } /* Heavier top + bottom darkening so the editorial text reads cleanly against the bright neon mall + street-food scene */ .slide-2 .photo-overlay { background: linear-gradient(180deg, rgba(14,14,14,0.50) 0%, rgba(14,14,14,0.18) 28%, rgba(14,14,14,0.08) 48%, rgba(14,14,14,0.65) 80%, rgba(14,14,14,0.98) 100%); } /* Faint distant-skyline texture + warm wash beneath the photo */ .slide-2::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(180deg, transparent 70%, rgba(0,0,0,0.45) 75%, transparent 76%), repeating-linear-gradient(90deg, rgba(255,255,255,0.0) 0, rgba(255,255,255,0.0) 16px, rgba(255,255,255,0.025) 16px, rgba(255,255,255,0.025) 18px), radial-gradient(ellipse 60% 40% at 50% 60%, rgba(242,92,79,0.10) 0%, transparent 70%); pointer-events: none; z-index: 0; } /* Soft diagonal light sweep — a slow "live broadcast" shimmer */ .slide-2 .photo-overlay::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 38%, rgba(255,255,255,0.06) 50%, transparent 62%); mix-blend-mode: screen; pointer-events: none; transform: translateX(-110%); } .slide-2.is-active .photo-overlay::after { animation: s2-sweep 9s ease-in-out 2s infinite; } @keyframes s2-sweep { 0%, 14% { transform: translateX(-110%); } 50% { transform: translateX(110%); } 100% { transform: translateX(110%); } } /* ============================================================ Slide 3 — The scale (editorial / control-room dispatch) Full-bleed control-room camera grid behind the overlay. Camera tiles are injected by app.js. ============================================================ */ .slide-3 { background: #050505; color: #F6F1E8; position: relative; overflow: hidden; } .slide-3 .control-room { position: absolute; inset: 0; display: flex; flex-direction: column; padding: calc(var(--top-h) - 4px) 14px calc(var(--foot-h) - 4px); z-index: 0; } .slide-3 .cam-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 6px; overflow: hidden; } .slide-3 .cr-status { margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(246,241,232,0.55); align-self: flex-start; } .slide-3 .cr-status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px var(--red); animation: pulse 1.6s ease-in-out infinite; } /* Each camera tile */ .slide-3 .cam { position: relative; background: #0A0A0A; border: 0.5px solid rgba(246,241,232,0.14); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; min-height: 0; } .slide-3 .cam-head { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: center; padding: 3px 6px; border-bottom: 0.5px solid rgba(246,241,232,0.12); background: rgba(246,241,232,0.04); font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.10em; text-transform: uppercase; color: rgba(246,241,232,0.7); flex: 0 0 auto; } .slide-3 .cam-head .cam-id { color: var(--red); font-weight: 700; } .slide-3 .cam-head .cam-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(246,241,232,0.8); letter-spacing: 0.02em; text-transform: none; font-size: 7px; } .slide-3 .cam-head .cam-live { display: inline-flex; align-items: center; gap: 3px; color: var(--red); } .slide-3 .cam-head .cam-live i { width: 4px; height: 4px; border-radius: 50%; background: var(--red); animation: pulse 1.2s ease-in-out infinite; } .slide-3 .cam-feed { flex: 1; width: 100%; display: block; min-height: 0; } .slide-3 .cam-feed .veh { animation-name: veh-drive; animation-timing-function: linear; animation-iteration-count: infinite; } /* Outbound carriageway — vehicles flow the opposite way */ .slide-3 .cam-feed .veh--rev { animation-name: veh-drive-rev; } @keyframes veh-drive { from { transform: translateX(0); } to { transform: translateX(135px); } } @keyframes veh-drive-rev { from { transform: translateX(0); } to { transform: translateX(-135px); } } .slide-3 .cam-foot { display: flex; justify-content: space-between; align-items: center; padding: 2px 6px; border-top: 0.5px solid rgba(246,241,232,0.12); background: rgba(0,0,0,0.4); font-family: var(--mono); font-size: 7px; letter-spacing: 0.10em; text-transform: uppercase; color: rgba(246,241,232,0.65); flex: 0 0 auto; } .slide-3 .cam-foot .st { letter-spacing: 0.14em; font-weight: 700; } .slide-3 .cam-foot .st.heavy { color: var(--red); } .slide-3 .cam-foot .st.clear { color: #6EE7B7; } .slide-3 .cam-foot .st.moderate { color: #FBBF24; } /* Slide 3 — content sits tighter so the control-room shows through */ .slide-3 .content { padding-top: calc(var(--top-h) - 6px); padding-bottom: calc(var(--foot-h) - 10px); } .slide-3 h1 { font-size: clamp(24px, 6.0vw, 32px); } .slide-3 .h-attr { font-size: 14px; margin-top: 10px; max-width: 32ch; } .slide-3 .h-rare { font-size: 10.5px; margin-top: 8px; padding-top: 8px; max-width: 32ch; } .slide-3 .photo-overlay { background: /* heavier dark band where the editorial text sits */ linear-gradient(180deg, rgba(5,5,5,0.92) 0%, rgba(5,5,5,0.75) 12%, rgba(5,5,5,0.35) 26%, rgba(5,5,5,0.30) 50%, rgba(5,5,5,0.70) 70%, rgba(5,5,5,0.97) 100%), /* horizontal vignette to dim camera columns near the text edge */ linear-gradient(90deg, rgba(5,5,5,0.55) 0%, rgba(5,5,5,0.10) 50%, rgba(5,5,5,0.10) 100%); } /* Red atmospheric wash from the bottom-right */ .slide-3::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 50% at 90% 95%, color-mix(in srgb, var(--red) 26%, transparent) 0%, transparent 60%); pointer-events: none; z-index: 1; } /* ============================================================ Slide 4 — Let's discuss your next campaign (ad placement enquiry) Full-bleed golden-hour aerial of the SG–JB Causeway. ============================================================ */ .slide-4-intro { background: #07070C; color: #F6F1E8; position: relative; overflow: hidden; } .slide-4-intro .photo { background: url("assets/causeway-sunset.webp") center / cover no-repeat; filter: saturate(1.05) brightness(0.88) contrast(1.05); } /* Strong dark band at top + bottom behind the editorial chrome; the middle of the image stays bright so the sunset reads */ .slide-4-intro .photo-overlay { background: linear-gradient(180deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.65) 10%, rgba(0,0,0,0.25) 22%, transparent 36%, transparent 60%, rgba(7,7,12,0.75) 82%, rgba(7,7,12,0.97) 100%); z-index: 1; } /* Warm red wash from the bottom-right ties back to the brand */ .slide-4-intro::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 90% 95%, color-mix(in srgb, var(--red) 22%, transparent) 0%, transparent 60%); pointer-events: none; z-index: 1; } .slide-4-intro .photo-grain { z-index: 2; } .slide-4-intro .content { z-index: 3; } .slide-4-intro h1 { font-size: clamp(24px, 6.2vw, 32px); line-height: 0.96; } /* Editorial pillar list — numbered, hairline-separated, no glass blocks */ .slide-4-intro .s4-pillars { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid rgba(246,241,232,0.30); } .slide-4-intro .s4-pillars li { display: flex; align-items: center; gap: 12px; padding: 8px 2px; border-bottom: 1px solid rgba(246,241,232,0.30); font-family: var(--display); font-size: 13.5px; letter-spacing: 0.005em; text-transform: uppercase; color: #F6F1E8; line-height: 1; /* dark text halo so the label reads anywhere on the photo */ text-shadow: 0 0 8px rgba(0,0,0,0.85), 0 0 16px rgba(0,0,0,0.7), 0 1px 0 rgba(0,0,0,0.9); opacity: 0; transform: translateY(8px); transition: opacity 0.5s ease, transform 0.5s ease; } .slide-4-intro.is-active .s4-pillars li { opacity: 1; transform: none; transition-delay: calc(1.25s + var(--i) * 0.08s); } .slide-4-intro .s4-pillars .num { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--red); flex: 0 0 auto; text-shadow: 0 0 6px rgba(0,0,0,0.7); } .slide-4-intro .s4-pillars .lb { flex: 1; min-width: 0; } /* Next-step — red tag prefixing an italic instruction, with a dark text halo */ .slide-4-intro .s4-next { margin-top: 10px; display: flex; align-items: center; gap: 10px; opacity: 0; transform: translateY(8px); transition: opacity 0.5s ease, transform 0.5s ease; } .slide-4-intro.is-active .s4-next { opacity: 1; transform: none; transition-delay: 1.75s; } .slide-4-intro .s4-next .tag { display: inline-flex; align-items: center; padding: 4px 9px; background: var(--red); color: #fff; border-radius: 3px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; flex: 0 0 auto; box-shadow: 0 2px 10px rgba(0,0,0,0.4); } .slide-4-intro .s4-next .copy { font-family: var(--sans); font-size: 12.5px; font-style: italic; color: #F6F1E8; line-height: 1.3; flex: 1; text-shadow: 0 0 8px rgba(0,0,0,0.85), 0 1px 0 rgba(0,0,0,0.9); } /* ============================================================ Desktop — capped, centred landscape layout On wide screens the deck is capped at a max width and centred in a dark surround. Sizing uses container units (cqi) so the capped layout stays consistent at any monitor width. Placed last so its rules win the cascade over the mobile base. ============================================================ */ @media (min-width: 768px) { :root { --top-h: 66px; --foot-h: 116px; --pad: clamp(34px, 5cqi, 60px); } /* Surround for the capped deck — flat black, matching the control-room camera feeds (#0a0a0a) the traffic dots run on */ body { background: #0a0a0a; } /* Faint 1px hairline delineating the deck edge against the surround */ .app { box-shadow: 0 0 0 1px rgba(255,255,255,0.05); } /* Fade only slide 3's left + right edges into the black surround so the control room blends into the gutters; slides 1/2/4 keep a clean cut against the surround */ .slide-3::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(90deg, #0a0a0a 0%, rgba(10,10,10,0) 4%, rgba(10,10,10,0) 96%, #0a0a0a 100%); } /* Editorial copy — wider gap plus a bottom-up scrim for legibility (the stamp/headline top-and-bottom anchoring is now in the base rule) */ .editorial .content { gap: 28px; background: linear-gradient(to top, rgba(8,8,10,0.85) 0%, rgba(8,8,10,0.45) 38%, transparent 66%); } .editorial h1 { font-size: clamp(36px, 5.1cqi, 56px); max-width: min(96cqi, 1000px); } .editorial .h-attr { font-size: clamp(15px, 1.8cqi, 19px); max-width: 46ch; } .editorial .h-rare { font-size: clamp(11px, 1.25cqi, 13px); max-width: 54ch; } .editorial .stamp { font-size: 11.5px; } /* Top bar + foot scale up a touch */ .top-bar .brand { font-size: 13px; } .top-bar .brand-mark { width: 19px; height: 19px; flex-basis: 19px; } .counter { font-size: 11px; } .progress .bar { height: 3px; } .nav-btn { padding: 14px 20px; font-size: 12px; } .nav-next { padding: 18px 32px; font-size: 15px; } .nav-back-icon { width: 52px; height: 52px; } .nav-cta-foot { flex: 0 0 auto; padding: 18px 38px; font-size: 15px; } /* Slide 3 — the control room reflows to a wide 3x2 camera wall */ .slide-3 .control-room { padding: calc(var(--top-h) - 4px) clamp(18px, 3.5cqi, 44px) calc(var(--foot-h) - 4px); } .slide-3 .cam-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 10px; } .slide-3 .cam-head { font-size: 9px; padding: 5px 9px; } .slide-3 .cam-head .cam-label { font-size: 8.5px; } .slide-3 .cam-foot { font-size: 8.5px; padding: 4px 9px; } .slide-3 h1 { font-size: clamp(34px, 4.7cqi, 52px); } /* Slide 4 — keep the pillar list a tidy block within the column */ .slide-4-intro h1 { font-size: clamp(34px, 4.8cqi, 52px); } .slide-4-intro .s4-pillars, .slide-4-intro .s4-next { max-width: 470px; } .slide-4-intro .s4-pillars li { font-size: clamp(13.5px, 1.5cqi, 17px); padding: 11px 2px; } .slide-4-intro .s4-pillars .num { font-size: 13px; } .slide-4-intro .s4-next .copy { font-size: clamp(12.5px, 1.35cqi, 15px); } } /* ============================================================ Reduced motion — keep the slide readable, drop the big moves ============================================================ */ @media (prefers-reduced-motion: reduce) { .deck { transition: none; } .progress .bar.active::after { animation: none; } .slide-2 .photo-overlay::after { animation: none; } /* Reveal the editorial headline + supporting copy without the staggered entrance */ .s2-stack .line .ink, .s2-stack .mk { opacity: 1 !important; transform: none !important; animation: none !important; } .editorial .h-attr, .editorial .h-rare, .slide-4-intro .s4-pillars li, .slide-4-intro .s4-next { opacity: 1 !important; transform: none !important; transition: none !important; } }