/* ═══════════════════════════════════════════════════════════════════ Vibe For One — "Nebula Print" ═══════════════════════════════════════════════════════════════════ */ :root { --bg-0: #08041a; --bg-1: #0a0620; --bg-2: #1a0b3d; --text: #ece7fb; --muted: rgba(236, 231, 251, 0.60); --faint: rgba(236, 231, 251, 0.30); --hairline: rgba(236, 231, 251, 0.11); /* live accent — deck.js swaps these per slide */ --accent: #8b5cf6; --accent-2: #c084fc; --glass: rgba(255, 255, 255, 0.045); --glass-edge:rgba(255, 255, 255, 0.10); --font-display: 'Space Grotesk', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --ease: cubic-bezier(.16, .84, .28, 1); } /* per-slide accent palette */ [data-accent="violet"] { --accent: #8b5cf6; --accent-2: #c084fc; } [data-accent="magenta"] { --accent: #d946ef; --accent-2: #f0abfc; } [data-accent="rose"] { --accent: #ec4899; --accent-2: #fda4c8; } /* Everything below is sized in rem, so this one number is the deck's master scale. 20px reads from the back of a conference room; drop toward 16px if you ever need more on a slide. */ html { font-size: 20px; } html, body { height: 100%; background: var(--bg-0); } body { overflow: hidden; } /* reveal.css puts .reveal-viewport on with background-color:#fff, and a class beats our `html, body` element selector. On desktop .scene hides it; on mobile it shows through during overscroll as a white flash. */ .reveal-viewport { background-color: var(--bg-0); } /* ── ambient scene ───────────────────────────────────────────────── */ .scene { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: radial-gradient(120% 90% at 50% 108%, var(--bg-2) 0%, transparent 62%), linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 55%, #0d0726 100%); } .nebula { position: absolute; border-radius: 50%; filter: blur(90px); transition: background 1.1s var(--ease), transform 1.6s var(--ease), opacity 1.1s var(--ease); will-change: transform; } .nebula-a { width: 78vw; height: 78vw; left: -22vw; top: -30vw; opacity: .34; background: radial-gradient(circle, var(--accent) 0%, transparent 66%); } .nebula-b { width: 66vw; height: 66vw; right: -20vw; bottom: -28vw; opacity: .30; background: radial-gradient(circle, var(--accent-2) 0%, transparent 66%); } #stars { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform 1.4s var(--ease); } .vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(115% 85% at 50% 45%, transparent 42%, rgba(4,2,12,.72) 100%); } /* ═══ reveal shell ═══════════════════════════════════════════════ */ .reveal { position: relative; z-index: 2; font-family: var(--font-body); font-size: 26px; font-weight: 400; color: var(--text); letter-spacing: -0.005em; } .reveal .slides { text-align: left; } .reveal .slides section { height: 100%; padding: 0 !important; } .reveal h1, .reveal h2, .reveal h3 { font-family: var(--font-display); font-weight: 700; text-transform: none; letter-spacing: -0.035em; line-height: 0.98; margin: 0; text-shadow: none; } .reveal em { font-style: normal; } .reveal ul, .reveal ol { display: block; list-style: none; margin: 0; padding: 0; } .reveal img { max-width: 100%; display: block; } /* the animated wrapper — every slide's content lives here. One shared content column so the left edge never jumps between slides. */ .pane { position: relative; height: 100%; width: 70rem; max-width: 94%; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; padding: 2.6rem 0; } .pane.center { align-items: flex-start; } /* ── entry reveal — a quiet fade-up, staggered ───────────────────── */ .reveal .slides section.present .print { animation: printIn .52s var(--ease) both; } .print.d1 { animation-delay: .07s !important; } .print.d2 { animation-delay: .14s !important; } .print.d3 { animation-delay: .21s !important; } .print.d4 { animation-delay: .28s !important; } @keyframes printIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* ── click reveal (fragments) ────────────────────────────────────── */ .reveal .slides section .fragment.printup { opacity: 0; transform: translateY(10px); transition: opacity .45s var(--ease), transform .45s var(--ease); } .reveal .slides section .fragment.printup.visible { opacity: 1; transform: none; } /* ═══ type ═══════════════════════════════════════════════════════ */ .eyebrow { font-family: var(--font-display); font-size: 0.80rem; font-weight: 500; letter-spacing: 0.30em; text-transform: uppercase; color: var(--accent-2); margin: 0 0 1.5rem; display: flex; align-items: center; gap: .85em; } .eyebrow .num { font-size: 1.15em; letter-spacing: .12em; color: var(--text); padding-right: .85em; border-right: 1px solid var(--hairline); } /* the recurring "audience of one" tag: constant part recedes, the variable part carries the accent — that's the bit that escalates across the three */ .eyebrow-aud { flex-wrap: wrap; } .eyebrow-aud .num { font-size: 1em; letter-spacing: .30em; color: var(--muted); } .sub { font-size: 1.12rem; line-height: 1.42; color: var(--muted); margin: 1.5rem 0 0; max-width: 28ch; } /* ── 1. title ────────────────────────────────────────────────────── */ .s-title .pane { justify-content: center; } .s-title h1 { font-size: 6.6rem; letter-spacing: -0.045em; } .s-title h1 em { background: linear-gradient(96deg, var(--accent-2) 0%, #fff 46%, var(--accent-2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .s-title .rule { width: 15rem; height: 3px; margin: 2.1rem 0 1.9rem; background: linear-gradient(90deg, var(--accent-2), var(--accent) 55%, transparent); box-shadow: 0 0 26px 1px var(--accent); border-radius: 2px; } .s-title .lede { font-family: var(--font-display); font-size: 1.42rem; font-weight: 500; letter-spacing: 0.05em; color: var(--text); margin: 0; } .s-title .lede .sep { color: var(--accent-2); margin: 0 .35em; } .s-title .byline { margin: 3.4rem 0 0; font-family: var(--font-display); font-size: .90rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: rgba(236,231,251,.5); } /* ── 2. hi ───────────────────────────────────────────────────────── */ .s-hi .pane { justify-content: center; } .s-hi .hi-small { font-size: 1.5rem; color: var(--muted); margin: 0 0 .55rem; font-family: var(--font-display); font-weight: 400; } .s-hi .hi-big { font-family: var(--font-display); font-size: 3.3rem; font-weight: 700; letter-spacing: -0.035em; margin: 0; color: var(--text); } /* ── 3. hero / the metaphor ──────────────────────────────────────── */ .hero-grid { display: grid; grid-auto-flow: column; grid-auto-columns: max-content; justify-content: space-between; align-items: center; gap: 3rem; } .hero-copy { max-width: 40rem; } .s-hero h2 { font-size: 3.8rem; } .s-hero h2 em { color: var(--accent-2); text-shadow: 0 0 52px rgba(192,132,252,.42); } .s-hero .sub { max-width: 40ch; font-size: 1.18rem; margin-top: 1.9rem; } .s-hero .sub em { color: var(--text); font-weight: 500; } /* the thesis. planted here, collected on the last slide. */ .s-hero .punch { margin: 2.2rem 0 0; font-family: var(--font-display); font-size: 2.15rem; font-weight: 700; letter-spacing: -0.025em; color: var(--accent-2); text-shadow: 0 0 48px rgba(192,132,252,.45); } /* the little printer */ .printfig { position: relative; width: 23rem; height: 15rem; } .pf-rail { position: absolute; top: 0; left: -1.5rem; right: -1.5rem; height: 2px; background: var(--hairline); border-radius: 2px; } .pf-head { position: absolute; top: -8px; width: 3.4rem; height: 18px; border-radius: 5px; background: linear-gradient(180deg, var(--accent-2), var(--accent)); box-shadow: 0 0 24px var(--accent), 0 10px 44px rgba(139,92,246,.55); animation: pfHead 6s cubic-bezier(.5,0,.5,1) infinite; } .pf-head::after { content: ''; position: absolute; left: 50%; top: 100%; width: 1px; height: 5.5rem; transform: translateX(-50%); background: linear-gradient(180deg, var(--accent-2), transparent); opacity: .45; } @keyframes pfHead { 0%,100% { left: 6%; } 25% { left: 64%; } 50% { left: 22%; } 75% { left: 78%; } } .pf-stack { position: absolute; left: 0; right: 0; bottom: 2.4rem; display: flex; flex-direction: column-reverse; align-items: center; gap: 4px; } .pf-stack i { display: block; height: 11px; width: var(--w); border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-2) 55%, var(--accent)); box-shadow: 0 0 18px rgba(139,92,246,.4); animation: pfLayer 6s var(--ease) infinite both; } .pf-stack i:nth-child(1) { animation-delay: .1s } .pf-stack i:nth-child(2) { animation-delay: .3s } .pf-stack i:nth-child(3) { animation-delay: .5s } .pf-stack i:nth-child(4) { animation-delay: .7s } .pf-stack i:nth-child(5) { animation-delay: .9s } .pf-stack i:nth-child(6) { animation-delay: 1.1s } .pf-stack i:nth-child(7) { animation-delay: 1.3s } .pf-stack i:nth-child(8) { animation-delay: 1.5s } @keyframes pfLayer { 0% { transform: scaleY(.2); opacity: 0; } 8%, 82% { transform: scaleY(1); opacity: 1; } 94%,100% { transform: scaleY(1); opacity: 0; } } .pf-bed { position: absolute; left: -1rem; right: -1rem; bottom: 1.9rem; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--accent-2), transparent); opacity: .6; box-shadow: 0 0 40px var(--accent); } .pf-bed::after { content: ''; position: absolute; left: 18%; right: 18%; top: 3px; height: 3.5rem; border-radius: 0 0 50% 50%; background: linear-gradient(180deg, rgba(192,132,252,.20), transparent); } /* ── shared two-column layout ────────────────────────────────────── */ .split { display: grid; grid-auto-flow: column; grid-auto-columns: max-content; justify-content: space-between; align-items: center; gap: 3rem; } .col-copy { max-width: 30rem; } .col-copy h2 { font-size: 3.55rem; } .col-media { display: flex; align-items: center; justify-content: flex-end; } /* `.reveal ul` above out-specificities a bare `.beats`, hence the prefix */ .reveal .beats { margin-top: 2.8rem; display: flex; flex-direction: column; gap: 1.05rem; } .beats li { position: relative; font-size: 1.16rem; line-height: 1.35; color: var(--text); padding-left: 1.6rem; } .beats li::before { content: ''; position: absolute; left: 0; top: .62em; width: .55rem; height: .55rem; border-radius: 2px; background: var(--accent-2); box-shadow: 0 0 14px var(--accent-2); } /* ── card ("the issue") ──────────────────────────────────────────── */ .card { margin-top: 2.2rem; padding: 1.4rem 1.6rem 1.5rem; border-radius: 18px; background: var(--glass); border: 1px solid var(--glass-edge); backdrop-filter: blur(14px); max-width: 100%; box-shadow: 0 22px 60px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.07); } .card-title { font-family: var(--font-display); font-size: .80rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--accent-2); margin: 0 0 .95rem; } .card ul { display: flex; flex-direction: column; gap: .65rem; } .card li { position: relative; padding-left: 1.25rem; font-size: 1.02rem; line-height: 1.4; color: var(--muted); } .card li::before { content: ''; position: absolute; left: 0; top: .62em; width: 6px; height: 1px; background: var(--accent-2); opacity: .8; } /* ── stack chips ─────────────────────────────────────────────────── */ .stack { margin-top: 2.8rem; } .stack-label { font-family: var(--font-display); font-size: .78rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--faint); margin: 0 0 .9rem; } .chips { display: flex; flex-wrap: wrap; gap: .55rem; max-width: 100%; } .chips span { font-size: 1.02rem; padding: .5em 1.1em; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--glass-edge); color: var(--muted); white-space: nowrap; } .chips .love { color: var(--text); border-color: rgba(192,132,252,.42); background: rgba(192,132,252,.10); } /* ── media frames ────────────────────────────────────────────────── */ /* --mw per slide: the source GIFs are only 266–498px wide, so each frame is sized to keep upscaling modest rather than stretching them all to match. */ .media { margin: 0; width: var(--mw, 32rem); border-radius: 20px; overflow: hidden; border: 1px solid var(--glass-edge); box-shadow: 0 30px 90px rgba(0,0,0,.55), 0 0 90px -22px var(--accent); } .media img { width: 100%; } /* phones */ .phones { position: relative; width: 37rem; height: 39rem; } .phone { position: absolute; margin: 0; border-radius: 34px; overflow: hidden; background: #000; border: 7px solid #17102c; box-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 80px -22px var(--accent); } .phone img { width: 100%; } .phone-back { width: 16.5rem; left: 0; top: 2.6rem; transform: rotate(-6deg); opacity: .82; filter: saturate(.85); } .phone-front { width: 18rem; right: 0; top: 0; transform: rotate(4deg); } /* browser */ .browser { width: 37rem; border-radius: 16px; overflow: hidden; border: 1px solid var(--glass-edge); background: #0d0a1c; box-shadow: 0 34px 100px rgba(0,0,0,.6), 0 0 80px -24px var(--accent); } .browser-bar { display: flex; align-items: center; gap: .42rem; padding: .7rem .9rem; background: rgba(255,255,255,.045); border-bottom: 1px solid var(--hairline); } .browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.16); } .browser-bar .url { margin-left: .9rem; font-size: .74rem; letter-spacing: .04em; color: var(--faint); } /* Three clips from the brand, fanned like a contact sheet. The copy column is tighter here than on the other project slides so the fan can run wider — the art IS the argument on this one. Each clip keeps its own aspect, so the cards sit at different heights instead of reading as three identical rectangles. */ .s-astro .col-copy { max-width: 25rem; } .s-astro .split { gap: 2.5rem; } .art { position: relative; width: 42.5rem; height: 31rem; } .art figure img, .art figure video { width: 100%; display: block; } .art figure { position: absolute; margin: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--glass-edge); box-shadow: 0 34px 96px rgba(0,0,0,.62), 0 0 110px -28px var(--accent); } .art-a { width: 16rem; left: 0; top: 3.5rem; transform: rotate(-4deg); z-index: 1; } .art-b { width: 16rem; left: 13.2rem; top: 0.5rem; transform: rotate(2deg); z-index: 2; } .art-c { width: 16rem; right: 0; top: 4.8rem; transform: rotate(5deg); z-index: 3; } /* ── movies asks ─────────────────────────────────────────────────── */ .ask { font-family: var(--font-display); font-size: 1.55rem; font-weight: 500; margin: 2.1rem 0 0; color: var(--text); } .ask em { color: var(--accent-2); } .ask-2 { margin-top: .8rem; color: var(--muted); font-size: 1.3rem; } /* ── wordmark: seats.co.il ───────────────────────────────────────── */ .wordmark { letter-spacing: -0.04em; } .wordmark em { color: var(--accent-2); } /* ── 6/11. demo holding slides ───────────────────────────────────── */ .s-demo .pane { justify-content: center; align-items: center; text-align: center; } .demo-badge { display: inline-flex; align-items: center; gap: .85rem; padding: .6rem 1.5rem .6rem 1.1rem; border-radius: 999px; border: 1px solid rgba(192,132,252,.34); background: rgba(192,132,252,.09); margin-bottom: 2.1rem; } .demo-badge .play { color: var(--accent-2); font-size: 1rem; line-height: 1; animation: pulse 2.4s ease-in-out infinite; } .demo-word { font-family: var(--font-display); font-size: .90rem; font-weight: 500; letter-spacing: .30em; text-transform: uppercase; color: var(--text); } .s-demo h2 { font-size: 5.4rem; text-align: center; } .s-demo .demo-hint { margin: 1.7rem 0 0; font-size: .90rem; letter-spacing: .26em; text-transform: uppercase; color: var(--faint); } @keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.86); } } /* ── 11. embedded live demo ──────────────────────────────────────── */ /* .s-demo centres everything; the embed is a full-width frame, so undo that */ .s-embed .pane { justify-content: center; align-items: stretch; text-align: left; } .embed-head { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.1rem; } .s-embed .demo-badge { margin-bottom: 0; } .embed-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; color: var(--text); } /* the frame fills the slide; the site inside is a real, scrollable page */ .browser-live { width: 100%; } .browser-live iframe { display: block; width: 100%; height: 32rem; border: 0; background: #0b1020; } /* ── 6. embedded live demo, phone ────────────────────────────────── */ .s-embed-phone .pane { justify-content: center; align-items: stretch; text-align: left; } /* the phone's height is capped by the slide, so it can't grow to fill a space-between layout — centre the pair instead of pinning it to the edges */ .s-embed-phone .split { justify-content: center; gap: 7rem; } .s-embed-phone .col-copy { max-width: 26rem; } .s-embed-phone h2 { font-size: 4.4rem; text-align: left; margin-top: 1.5rem; } .s-embed-phone .demo-badge { margin-bottom: 0; } .s-embed-phone .demo-hint { margin: 1.6rem 0 0; text-align: left; font-family: var(--font-body); font-size: 1.08rem; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.45; color: var(--muted); } /* ── iPhone mock holding a live page ─────────────────────────────── */ .iphone { position: relative; width: 18.2rem; padding: .6rem; border-radius: 2.9rem; background: linear-gradient(150deg, #55506a 0%, #262232 22%, #423d54 48%, #201d2b 74%, #4b4660 100%); box-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 90px -26px var(--accent), inset 0 0 0 1px rgba(255,255,255,.14); } /* side buttons */ .ip-btn { position: absolute; border-radius: 2px; background: linear-gradient(180deg, #4a4459, #2a2635); } .ip-mute { left: -2px; top: 6.2rem; width: 3px; height: 1.5rem; border-radius: 2px 0 0 2px; } .ip-vol-up { left: -2px; top: 8.6rem; width: 3px; height: 2.4rem; border-radius: 2px 0 0 2px; } .ip-vol-dn { left: -2px; top: 11.6rem; width: 3px; height: 2.4rem; border-radius: 2px 0 0 2px; } .ip-power { right: -2px; top: 9.6rem; width: 3px; height: 3.6rem; border-radius: 0 2px 2px 0; } .ip-screen { position: relative; overflow: hidden; border-radius: 2.4rem; background: #0b0b11; padding-bottom: 1.4rem; } /* status bar */ .ip-status { position: relative; z-index: 2; height: 2.2rem; display: flex; align-items: center; justify-content: space-between; padding: 0 1.15rem .2rem; color: #fff; } .ip-time { font-family: var(--font-body); font-size: .72rem; font-weight: 600; letter-spacing: .01em; } .ip-sys { display: flex; align-items: center; gap: .3rem; } .ip-sys svg { display: block; } /* Dynamic Island */ .ip-island { position: absolute; left: 50%; top: .35rem; transform: translateX(-50%); width: 5.2rem; height: 1.45rem; border-radius: 999px; background: #000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); } .iphone iframe { display: block; width: 100%; height: 33rem; border: 0; background: #0b0b11; } /* home indicator */ .ip-home { position: absolute; left: 50%; bottom: .5rem; transform: translateX(-50%); width: 34%; height: 5px; border-radius: 3px; background: rgba(255,255,255,.82); z-index: 2; } /* glass — sits over the whole screen but lets clicks through to the app */ .ip-gloss { position: absolute; inset: 0; pointer-events: none; z-index: 3; border-radius: inherit; background: linear-gradient(122deg, rgba(255,255,255,.055) 0%, transparent 26%, transparent 72%, rgba(255,255,255,.03) 100%); } /* ── 12. closer ──────────────────────────────────────────────────── */ .s-close .pane { justify-content: center; } .s-close .printfig { width: 27rem; height: 17rem; } .s-close .col-copy { max-width: 40rem; } .reveal .beats-big { display: flex; flex-direction: column; gap: 1.6rem; margin-top: .6rem; } .beats-big li { display: flex; align-items: baseline; gap: 1.5rem; font-family: var(--font-display); font-weight: 700; font-size: 3.5rem; letter-spacing: -0.035em; line-height: 1; color: var(--text); } .beats-big .t { display: inline-block; } .beats-big .n { font-size: .95rem; font-weight: 500; letter-spacing: .2em; color: var(--accent-2); opacity: .75; } .beats-big li em { color: var(--accent-2); text-shadow: 0 0 46px rgba(192,132,252,.5); } .s-close .block { margin-top: 3rem; padding-left: 3.35rem; } .s-close .outro { margin: 0; font-size: 1.2rem; color: var(--muted); } .s-close .outro-2 { margin: .5rem 0 0; font-family: var(--font-display); font-size: 1.65rem; font-weight: 500; letter-spacing: -0.02em; color: var(--accent-2); text-shadow: 0 0 44px rgba(192,132,252,.4); } /* ── 13. links ───────────────────────────────────────────────────── */ .s-links h2 { font-size: 3.9rem; } .links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.6rem; } /* Dark glass with a lit edge. The gradient ring is a masked pseudo-element, not a background-clip border — with a translucent fill that trick bleeds the gradient across the whole card and washes it out. */ .link-card { position: relative; overflow: hidden; text-decoration: none; display: flex; flex-direction: column; gap: .55rem; align-items: center; text-align: center; padding: 1.9rem 1.5rem 1.7rem; border-radius: 22px; border: 1px solid rgba(255,255,255,.07); background: radial-gradient(58% 36% at 6% -8%, rgba(255,255,255,.10), transparent 62%), radial-gradient(72% 44% at 94% 112%, var(--cg, transparent), transparent 68%), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.014)); box-shadow: 0 26px 66px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.09); transition: transform .28s var(--ease), box-shadow .28s var(--ease); } /* the lit edge */ .link-card::before { content: ''; position: absolute; inset: 0; padding: 1px; border-radius: inherit; pointer-events: none; background: linear-gradient(150deg, var(--cs, rgba(255,255,255,.35)) 0%, rgba(255,255,255,.22) 26%, transparent 58%, var(--cs, transparent) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } /* The sweep. Done as a moving background-position rather than a rotated, translated element: a tall tilted div smears its own width by the rotation overhang, so the "streak" ends up covering most of the card at once and reads as a wash. Sliding an oversized gradient is size-independent and glides the full width edge to edge. 100% parks the band off the left, 0% off the right. */ .link-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(102deg, transparent 40%, rgba(255,255,255,.05) 46%, rgba(255,255,255,.17) 50%, rgba(255,255,255,.05) 54%, transparent 60%); background-size: 260% 100%; background-repeat: no-repeat; background-position: 100% 0; animation: sheen 9s cubic-bezier(.42,.02,.58,.98) var(--sdly, 0s) infinite; } @keyframes sheen { 0%, 42% { background-position: 100% 0; } /* parked off the left */ 88%, 100% { background-position: 0% 0; } /* parked off the right */ } .lc-shot, .lc-name, .lc-url, .lc-text { position: relative; z-index: 1; } .lc-text { display: flex; flex-direction: column; gap: .55rem; } .link-card:hover { transform: translateY(-5px); box-shadow: 0 34px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.14), 0 0 76px -24px var(--c); } /* the screenshot sits proud of the card and drifts — each one on its own clock so the three never bob in unison */ .lc-shot { display: block; width: 10rem; height: 10rem; margin-bottom: 1.2rem; border-radius: 18px; overflow: hidden; border: 1px solid var(--glass-edge); box-shadow: 0 18px 46px rgba(0,0,0,.58), 0 0 64px -20px var(--c); transform: rotate(var(--r, 0deg)); animation: bob var(--dur, 5.5s) ease-in-out var(--dly, 0s) infinite; } .lc-shot img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); } @keyframes bob { 0%, 100% { transform: rotate(var(--r, 0deg)) translateY(0); } 50% { transform: rotate(var(--r, 0deg)) translateY(-10px); } } .lc-name { font-family: var(--font-display); font-size: .74rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); } .lc-url { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; letter-spacing: -.025em; color: var(--c); } /* two items pushed to the edges — fills the dead space under the third card */ .links-foot { margin-top: 2.6rem; display: flex; justify-content: space-between; align-items: baseline; gap: 2.5rem; font-size: 1.08rem; color: var(--muted); } .links-foot p { margin: 0; } .links-foot a, .links-foot em { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: -.02em; color: var(--accent-2); text-decoration: none; text-shadow: 0 0 40px rgba(192,132,252,.4); } .links-foot a:hover { color: #fff; } .s-title .byline .dot { color: var(--accent-2); margin: 0 .5em; } /* handles are identifiers people retype — don't uppercase them */ .s-title .byline .handle { text-transform: none; letter-spacing: .12em; color: var(--accent-2); } /* ═══ controls / progress ════════════════════════════════════════ */ .reveal .controls { color: var(--accent-2); right: 22px; bottom: 18px; } .reveal .controls button { opacity: .5; transition: opacity .2s; } .reveal .controls button:hover { opacity: 1; } .reveal .progress { height: 3px; color: var(--accent-2); background: rgba(255,255,255,.06); } .reveal .progress span { transition: transform .5s var(--ease); } /* ═══ responsive nudges ═════════════════════════════════════════ */ /* No width breakpoints on purpose. reveal.js SCALES the fixed 1600x900 stage to fit the window — it does not reflow — so a max-width media query fires on the window size while the slide is being shrunk independently. The old one here set `.col-media { display: none }`, which is why every image, video and device frame vanished on phones. Let reveal do the scaling. */ @media (prefers-reduced-motion: reduce) { .reveal .slides section.present .print, .reveal .slides section.present > .pane { animation: none !important; opacity: 1; } .pf-head, .pf-stack i, .demo-badge .play, .lc-shot, .link-card::after { animation: none !important; } } /* ═══════════════════════════════════════════════════════════════════ PORTRAIT PHONE deck.js swaps reveal's stage from 1600x900 to 460x900 and puts .is-portrait on . The stage is ~3.5x narrower, so the same rem sizes render ~3.5x bigger relative to the screen — the job here is to restack the two-column layouts and pull the display type back down. Desktop is untouched: none of this applies without the class. ═══════════════════════════════════════════════════════════════════ */ .is-portrait .pane { width: 100%; padding: 1.8rem 1.4rem; } /* every two-column slide becomes one column, media under copy */ .is-portrait .split, .is-portrait .hero-grid { grid-auto-flow: row; grid-auto-columns: auto; justify-content: stretch; justify-items: start; gap: 1.4rem; } /* the stage is only 900 tall — desktop's generous vertical rhythm doesn't fit */ .is-portrait .reveal .beats { margin-top: 1.6rem; gap: .8rem; } .is-portrait .stack { margin-top: 1.6rem; } .is-portrait .card { margin-top: 1.6rem; } .is-portrait .sub { margin-top: 1.1rem; } .is-portrait .col-copy, .is-portrait .hero-copy, .is-portrait .s-astro .col-copy, .is-portrait .s-close .col-copy, .is-portrait .s-embed-phone .col-copy { max-width: 100%; } .is-portrait .col-media { justify-content: flex-start; width: 100%; } /* display type: dialled back so headlines don't wrap to four lines */ .is-portrait .s-title h1 { font-size: 3.6rem; } .is-portrait .s-hi .hi-big { font-size: 2.2rem; } .is-portrait .s-hero h2 { font-size: 2.4rem; } .is-portrait .col-copy h2, .is-portrait .s-links h2 { font-size: 2.4rem; } .is-portrait .s-demo h2, .is-portrait .s-embed-phone h2 { font-size: 2.8rem; } .is-portrait .beats-big li { font-size: 2rem; } .is-portrait .ask { font-size: 1.35rem; } .is-portrait .ask-2 { font-size: 1.15rem; } .is-portrait .sub { max-width: 100%; } .is-portrait .s-title .rule { width: 9rem; } /* media: fill the column instead of sitting at fixed desktop widths */ .is-portrait .media { width: 100% !important; } .is-portrait .browser { width: 100%; } .is-portrait .browser-live iframe { height: 22rem; } .is-portrait .iphone { width: 100%; max-width: 17rem; margin: 0 auto; } .is-portrait .iphone iframe { height: 26rem; } /* the two overlapping screenshots don't survive at this width — show one */ .is-portrait .phones { width: 100%; height: auto; display: flex; justify-content: center; } .is-portrait .phone-back { display: none; } /* 13rem here made slide 5 overflow the stage by ~190px — the screenshot is 946x2048, so every rem of width costs 2.16rem of height */ .is-portrait .phone-front { position: relative; width: 8.5rem; right: auto; top: auto; transform: none; } /* the fanned art becomes a plain row, rotations dropped for legibility */ .is-portrait .art { position: static; width: 100%; height: auto; display: flex; align-items: flex-start; gap: .45rem; } .is-portrait .art figure { position: static; width: auto; flex: 1 1 0; top: auto; left: auto; right: auto; transform: none; border-radius: 10px; } /* the ask: vertical, full width, bigger tap targets */ .is-portrait .links { grid-template-columns: 1fr; gap: .9rem; margin-top: 1.8rem; } .is-portrait .link-card { flex-direction: row; align-items: center; text-align: left; gap: .9rem; padding: .9rem 1rem; } .is-portrait .lc-shot { width: 4rem; height: 4rem; margin-bottom: 0; flex: 0 0 auto; } /* the text column has to be allowed to shrink, or the longest URL gets clipped by the card's overflow:hidden instead of wrapping */ .is-portrait .lc-text { min-width: 0; } .is-portrait .lc-name { font-size: .62rem; letter-spacing: .14em; } .is-portrait .lc-url { font-size: 1.02rem; overflow-wrap: anywhere; } .is-portrait .links-foot { flex-direction: column; align-items: flex-start; gap: .5rem; margin-top: 1.8rem; font-size: .95rem; } .is-portrait .links-foot a, .is-portrait .links-foot em { font-size: 1.05rem; } .is-portrait .printfig { width: 100%; height: 9rem; } .is-portrait .chips { gap: .45rem; } .is-portrait .chips span { font-size: .92rem; } /* Swiping already moves the whole stage; re-running an entry animation on every element on top of that is what makes it flicker. Let the slide transition carry it. */ .is-portrait .reveal .slides section.present .print { animation: none; opacity: 1; transform: none; } .is-portrait .lc-shot { animation: none; transform: none; } .is-portrait .link-card::after { animation: none; } /* ═══════════════════════════════════════════════════════════════════ LIGHT THEME For weak projectors, where a dark deck washes out to grey mush. Everything below is additive — it only applies under [data-theme="light"], so the dark deck is byte-for-byte unchanged. The accents are darkened well past their dark-theme values: #c084fc on white is unreadable at projector contrast. ═══════════════════════════════════════════════════════════════════ */ [data-theme="light"] { --bg-0: #f7f5fc; --bg-1: #efeaf9; --bg-2: #e2d9f3; --text: #17121f; --muted: rgba(23, 18, 31, 0.68); --faint: rgba(23, 18, 31, 0.42); --hairline: rgba(23, 18, 31, 0.16); --accent: #6d28d9; --accent-2: #7c3aed; --glass: rgba(255, 255, 255, 0.72); --glass-edge: rgba(23, 18, 31, 0.14); } [data-theme="light"] [data-accent="violet"] { --accent: #6d28d9; --accent-2: #7c3aed; } [data-theme="light"] [data-accent="magenta"] { --accent: #9333ea; --accent-2: #a21caf; } [data-theme="light"] [data-accent="rose"] { --accent: #be123c; --accent-2: #db2777; } [data-theme="light"] .reveal-viewport { background-color: var(--bg-0); } /* sky → paper: stars off, nebulae reduced to a faint wash */ [data-theme="light"] .scene { background: radial-gradient(120% 90% at 50% 108%, var(--bg-2) 0%, transparent 60%), linear-gradient(180deg, #fbfaff 0%, var(--bg-0) 50%, var(--bg-1) 100%); } [data-theme="light"] #stars { opacity: 0; } [data-theme="light"] .nebula-a { opacity: .13; } [data-theme="light"] .nebula-b { opacity: .11; } [data-theme="light"] .vignette { background: radial-gradient(115% 85% at 50% 42%, transparent 45%, rgba(76, 54, 122, .10) 100%); } /* glow reads as smudge on paper */ [data-theme="light"] .s-hero h2 em, [data-theme="light"] .beats-big li em, [data-theme="light"] .s-close .outro-2, [data-theme="light"] .links-foot a, [data-theme="light"] .links-foot em, [data-theme="light"] .s-hero .punch { text-shadow: none; } [data-theme="light"] .s-title h1 em { background: none; -webkit-text-fill-color: currentColor; color: var(--accent); } [data-theme="light"] .s-title .rule { box-shadow: none; } /* surfaces */ [data-theme="light"] .card, [data-theme="light"] .media { background: var(--glass); box-shadow: 0 18px 44px rgba(43, 28, 76, .14); } [data-theme="light"] .chips span { background: rgba(23, 18, 31, .04); color: var(--muted); } [data-theme="light"] .chips .love { background: rgba(109, 40, 217, .09); border-color: rgba(109, 40, 217, .32); color: var(--text); } [data-theme="light"] .demo-badge { background: rgba(109, 40, 217, .08); border-color: rgba(109, 40, 217, .28); } [data-theme="light"] .phone, [data-theme="light"] .browser, [data-theme="light"] .art figure, [data-theme="light"] .lc-shot { box-shadow: 0 20px 50px rgba(43, 28, 76, .20); } [data-theme="light"] .iphone { box-shadow: 0 24px 60px rgba(43, 28, 76, .26), inset 0 0 0 1px rgba(255,255,255,.14); } /* link cards: the sheen is white, so it vanishes on paper — use the accent */ [data-theme="light"] .link-card { border-color: rgba(23, 18, 31, .12); background: radial-gradient(58% 36% at 6% -8%, rgba(255,255,255,.9), transparent 62%), radial-gradient(72% 44% at 94% 112%, var(--cg, transparent), transparent 68%), linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.62)); box-shadow: 0 18px 44px rgba(43, 28, 76, .16); } [data-theme="light"] .link-card::after { display: none; } [data-theme="light"] .link-card:hover { box-shadow: 0 26px 60px rgba(43, 28, 76, .22); } [data-theme="light"] .reveal .progress { background: rgba(23, 18, 31, .09); } /* hard-coded light values that don't come from a var, so they'd stay near-white on paper */ [data-theme="light"] .s-title .byline { color: var(--muted); } /* the card accents are inline (--c) and tuned for a dark ground; #c084fc on white is far too pale to read from the back of a room */ [data-theme="light"] .links > a:nth-child(1) .lc-url { color: #6d28d9; } [data-theme="light"] .links > a:nth-child(2) .lc-url { color: #a21caf; } [data-theme="light"] .links > a:nth-child(3) .lc-url { color: #be123c; } [data-theme="light"] .link-card::before { opacity: .5; } /* ── theme toggle button ─────────────────────────────────────────── */ #theme-toggle { position: fixed; top: 14px; right: 16px; z-index: 70; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; border: 1px solid var(--glass-edge); background: var(--glass); color: var(--text); opacity: .32; transition: opacity .2s var(--ease); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 16px; line-height: 1; padding: 0; } #theme-toggle:hover, #theme-toggle:focus-visible { opacity: 1; outline: none; } @media (max-width: 820px) { #theme-toggle { top: 10px; right: 10px; } }