/* ========================================================================== Pitch deck - full-viewport slide walkthrough for the case studies. Uses the same tokens as the rest of the site (see style.css :root). Scroll-snap does the paging; pitch.js only tracks position and jumps. ========================================================================== */ .deck { --deck-accent: var(--accent); --deck-glow: rgba(1, 226, 253, 0.16); /* Type scale - every step is a multiple of 4px. Sizes step at breakpoints rather than scaling fluidly, so no rendered size lands off the scale. */ --fs-micro: 12px; --fs-kicker: 12px; --fs-ui: 16px; --fs-body: 16px; --fs-lede: 20px; --fs-card-title: 20px; --fs-stat: 32px; --fs-title: 48px; --fs-title-xl: 96px; --fs-big: 96px; background: #111111; color: var(--ink); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0; display: block; overflow-x: hidden; /* The site's custom cursor runs here too (pitch.js injects it), so style.css can keep the native one hidden. */ } /* Accent follows the deck the live slide belongs to - pitch.js mirrors the slide's data-deck onto as you scroll. */ .deck[data-deck="pv"] { --deck-accent: #ffb24d; --deck-glow: rgba(255, 178, 77, 0.16); } .deck ::selection { background: var(--deck-accent); color: #111; } /* -------------------------------------------------------------------------- Track + slides -------------------------------------------------------------------------- */ .deck__track { /* offsetParent for the slides - pitch.js measures offsetTop against it */ position: relative; height: 100svh; overflow-y: auto; overflow-x: hidden; scroll-snap-type: y mandatory; scroll-behavior: smooth; scrollbar-width: none; } .deck__track::-webkit-scrollbar { display: none; } @media (prefers-reduced-motion: reduce) { .deck__track { scroll-behavior: auto; } } .slide { position: relative; min-height: 100svh; scroll-snap-align: start; scroll-snap-stop: always; display: flex; align-items: center; justify-content: center; padding: clamp(4.5rem, 9vh, 6rem) clamp(1.1rem, 5vw, 4rem) clamp(4.5rem, 9vh, 6rem); border-bottom: 1px solid rgba(255, 255, 255, 0.04); overflow: hidden; } .slide__inner { width: 100%; max-width: 1100px; display: flex; flex-direction: column; gap: clamp(0.9rem, 2vw, 1.4rem); } /* Ambient corner glow, tinted per deck */ .slide::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(90% 70% at 88% 6%, var(--deck-glow), transparent 60%); opacity: 0.7; } .slide__inner { position: relative; z-index: 1; } /* Reveal on enter */ .slide__inner > * { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .slide.is-live .slide__inner > * { opacity: 1; transform: none; } .slide.is-live .slide__inner > *:nth-child(2) { transition-delay: 0.07s; } .slide.is-live .slide__inner > *:nth-child(3) { transition-delay: 0.14s; } .slide.is-live .slide__inner > *:nth-child(4) { transition-delay: 0.21s; } .slide.is-live .slide__inner > *:nth-child(5) { transition-delay: 0.28s; } .slide.is-live .slide__inner > *:nth-child(6) { transition-delay: 0.35s; } @media (prefers-reduced-motion: reduce) { .slide__inner > * { opacity: 1; transform: none; transition: none; } } /* -------------------------------------------------------------------------- Typography inside slides -------------------------------------------------------------------------- */ .s-kicker { font-size: var(--fs-kicker); font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--deck-accent); } .s-title { font-size: var(--fs-title); font-weight: 700; line-height: 1.06; letter-spacing: -0.02em; color: var(--ink); max-width: 22ch; } .s-title--xl { font-size: var(--fs-title-xl); letter-spacing: -0.035em; } .s-lede { font-size: var(--fs-lede); line-height: 1.6; color: var(--ink-dim); max-width: 62ch; } .s-lede strong { color: var(--ink); font-weight: 600; } .s-title em { color: var(--deck-accent); font-style: normal; } .s-lede em { color: var(--deck-accent); font-style: normal; } .s-note { font-size: var(--fs-body); line-height: 1.6; color: var(--ink-faint); max-width: 68ch; } .s-trade { font-size: var(--fs-body); line-height: 1.55; color: var(--ink-faint); border-left: 2px solid var(--deck-accent); padding-left: 0.75rem; } /* -------------------------------------------------------------------------- Intro slide - greeting + the two deck entry points -------------------------------------------------------------------------- */ /* Centered variant - used by the opening slide, where the copy is the whole composition and there's nothing to align a left edge against. Padding is symmetric here so "centred" is true centre, not optical centre minus the extra bottom padding the content slides carry. */ .slide--center { min-height: 100svh; padding-top: clamp(4.5rem, 9vh, 6rem); padding-bottom: clamp(4.5rem, 9vh, 6rem); } .slide--center .slide__inner { align-items: center; text-align: center; gap: clamp(2rem, 7vh, 4rem); } .s-hello { display: flex; align-items: flex-start; gap: clamp(1rem, 3vw, 2rem); } .slide--center .s-hello { align-items: center; } .s-hello__copy { display: flex; flex-direction: column; gap: clamp(0.9rem, 2vw, 1.4rem); } .s-hello__face { width: clamp(90px, 13vw, 150px); height: auto; flex: none; } /* The one-liner under the greeting reads as a statement, not body copy */ .s-lede--lead { font-size: var(--fs-card-title); color: var(--ink); max-width: 46ch; } .s-jump { text-decoration: none; gap: 0.6rem; transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease; } .s-jump:hover { border-color: var(--deck-accent); transform: translateY(-2px); } /* Each entry point wears its own product's accent */ .s-jump--pv { --deck-accent: #ffb24d; } .s-jump__head { display: flex; align-items: center; gap: 0.7rem; } .s-jump__head img { border-radius: 10px; } .s-jump__go { margin-top: 0.25rem; font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--deck-accent); } @media (max-width: 640px) { .s-hello__face { display: none; } } /* -------------------------------------------------------------------------- Cards / grids -------------------------------------------------------------------------- */ .s-grid { display: grid; grid-template-columns: 1fr; gap: clamp(0.7rem, 1.6vw, 1rem); } @media (min-width: 768px) { .s-grid--2 { grid-template-columns: repeat(2, 1fr); } .s-grid--3 { grid-template-columns: repeat(3, 1fr); } .s-grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .s-grid--4 { grid-template-columns: repeat(4, 1fr); } } .s-card { background: var(--surface); border: 1px solid var(--edge); border-radius: 16px; padding: clamp(0.95rem, 2vw, 1.4rem); display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; } .s-card__num { font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.2em; color: var(--deck-accent); } .s-card h3 { font-size: var(--fs-card-title); font-weight: 700; color: var(--ink); line-height: 1.3; } .s-card p { font-size: var(--fs-body); line-height: 1.6; color: var(--ink-dim); } .s-card small { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-faint); } /* The big number treatment belongs to stat cards only - an inline inside a card's copy is emphasis, not a headline. */ .s-card--stat strong { font-size: var(--fs-stat); font-weight: 700; color: var(--ink); line-height: 1.1; } .s-card p strong { font-size: inherit; font-weight: 700; color: var(--ink); } .s-card--stat { align-items: flex-start; gap: 0.3rem; } .s-card--stat span { font-size: var(--fs-micro); color: var(--ink-faint); } /* Big single number */ .s-big { font-size: var(--fs-big); font-weight: 700; letter-spacing: -0.04em; line-height: 0.92; color: var(--deck-accent); } /* Bullet list */ .s-list { list-style: none; display: flex; flex-direction: column; gap: clamp(0.6rem, 1.4vw, 0.9rem); } .s-list li { position: relative; padding-left: 1.5rem; font-size: var(--fs-body); line-height: 1.6; color: var(--ink-dim); max-width: 70ch; } .s-list li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 2px; background: var(--deck-accent); } .s-list li strong { color: var(--ink); font-weight: 600; } /* Two-column split: copy beside media */ .s-split { display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 3vw, 2.2rem); align-items: center; } @media (min-width: 900px) { .s-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } .s-split--wide-media { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } } .s-split__copy { display: flex; flex-direction: column; gap: clamp(0.6rem, 1.4vw, 1rem); min-width: 0; } /* Media frames */ .s-media { border: 1px solid var(--edge); border-radius: 14px; overflow: hidden; background: var(--surface-2); min-width: 0; } .s-media img, .s-media video { display: block; width: 100%; height: auto; max-height: 54svh; object-fit: contain; background: #0d0d0d; } .s-media--portrait { max-width: 300px; margin: 0 auto; } .s-cap { font-size: var(--fs-micro); color: var(--ink-faint); letter-spacing: 0.04em; } /* Screen strip - phone/tablet shots side by side */ .s-strip { display: flex; /* Sit against the right edge of the media column. `safe` keeps a sheet that overflows from being clipped on its left - it falls back to start then. */ justify-content: safe flex-end; gap: clamp(0.6rem, 1.6vw, 1rem); overflow-x: auto; padding-bottom: 0.5rem; scroll-snap-type: x mandatory; scrollbar-width: thin; } .s-strip figure { flex: 0 0 auto; scroll-snap-align: start; display: flex; flex-direction: column; gap: 0.5rem; } .s-strip img { display: block; border: 0; border-radius: 0; } .s-strip figcaption { font-size: var(--fs-micro); letter-spacing: 0.05em; color: var(--ink-faint); /* A wide sheet is far wider than its column - pin the caption to the left edge so it stays visible instead of centering off-screen. */ position: sticky; left: 0; align-self: flex-start; } /* Compare table (moat) */ .s-compare { display: grid; grid-template-columns: 1fr; gap: 0.55rem; } @media (min-width: 800px) { .s-compare { grid-template-columns: 1fr 1fr; gap: 0.6rem 0.9rem; } } .s-compare__gap, .s-compare__ans { border-radius: 12px; padding: 0.9rem 1.05rem; font-size: var(--fs-body); line-height: 1.55; } .s-compare__gap { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--edge); color: var(--ink-faint); } .s-compare__ans { background: color-mix(in srgb, var(--deck-accent) 9%, transparent); border: 1px solid color-mix(in srgb, var(--deck-accent) 32%, transparent); color: var(--ink); } .s-compare__head { display: none; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.2em; color: var(--ink-faint); } @media (min-width: 800px) { .s-compare__head { display: block; } } /* 2x2 positioning map */ .s-map { position: relative; aspect-ratio: 4 / 3; max-height: 56svh; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; background: var(--edge); border: 1px solid var(--edge); border-radius: 14px; overflow: hidden; } .s-map__q { background: #141414; padding: clamp(0.6rem, 1.6vw, 1rem); display: flex; flex-direction: column; justify-content: center; gap: 0.35rem; font-size: var(--fs-micro); color: var(--ink-faint); line-height: 1.45; } .s-map__q b { display: block; font-size: var(--fs-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); } .s-map__q--own { background: color-mix(in srgb, var(--deck-accent) 12%, #141414); color: var(--ink); } .s-map__q--own b { color: var(--deck-accent); } .s-axis { display: flex; justify-content: space-between; font-size: var(--fs-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); } /* 3D stage */ .s-glb { border: 1px solid var(--edge); border-radius: 14px; background: radial-gradient(80% 70% at 50% 15%, rgba(255, 255, 255, 0.05), transparent 70%), var(--surface-2); padding: 0.6rem; } .s-glb model-viewer { width: 100%; height: clamp(230px, 42svh, 400px); --poster-color: transparent; background: transparent; } .s-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; padding-top: 0.5rem; } .s-pill { font: inherit; font-size: var(--fs-micro); font-weight: 600; color: var(--ink-dim); background: transparent; border: 1px solid var(--edge-strong); border-radius: 999px; padding: 0.42rem 0.8rem; min-height: 32px; cursor: pointer; transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease; } .s-pill:hover { color: var(--ink); } .s-pill.is-active { color: #111; background: var(--deck-accent); border-color: var(--deck-accent); } /* Meta row on the cover */ .s-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(0.7rem, 2vw, 1.2rem); border-top: 1px solid var(--edge); padding-top: clamp(0.9rem, 2vw, 1.3rem); } @media (min-width: 768px) { .s-meta { grid-template-columns: repeat(4, 1fr); } } .s-meta div { display: flex; flex-direction: column; gap: 0.25rem; } .s-meta small { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-faint); } .s-meta strong { font-size: var(--fs-body); color: var(--ink); font-weight: 600; } .s-badge { display: inline-flex; align-items: center; align-self: flex-start; font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.04em; padding: 0.34rem 0.85rem; border-radius: 999px; } .s-badge--shipped { color: #7ef29a; background: rgba(46, 204, 113, 0.12); border: 1px solid rgba(46, 204, 113, 0.35); } .s-badge--sunset { color: #ffc46b; background: rgba(255, 178, 77, 0.1); border: 1px solid rgba(255, 178, 77, 0.35); } /* CTA links on the closing slide */ .s-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; } .s-btn { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.7rem 1.3rem; border-radius: 999px; border: 1px solid var(--edge-strong); color: var(--ink); text-decoration: none; font-size: var(--fs-body); font-weight: 600; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; } .s-btn:hover { border-color: var(--deck-accent); color: var(--deck-accent); } .s-btn--solid { background: var(--deck-accent); border-color: var(--deck-accent); color: #111; } .s-btn--solid:hover { color: #111; filter: brightness(1.08); } /* -------------------------------------------------------------------------- Chrome: progress, top bar, controls, dot rail -------------------------------------------------------------------------- */ .deck__progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: rgba(255, 255, 255, 0.06); z-index: 40; } .deck__progress span { display: block; height: 100%; width: 0; background: var(--deck-accent); box-shadow: 0 0 12px var(--deck-glow); transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .deck__bar { position: fixed; top: 3px; left: 0; right: 0; z-index: 35; /* Back link keeps the left edge; the label + counter sit centred in the bar, so the empty third column balances the first. */ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: 0.7rem clamp(1rem, 4vw, 2rem); background: linear-gradient(to bottom, rgba(17, 17, 17, 0.92), rgba(17, 17, 17, 0)); pointer-events: none; } .deck__bar > * { pointer-events: auto; } .deck__back { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; color: var(--ink-dim); font-size: var(--fs-micro); font-weight: 600; text-decoration: none; transition: color 0.25s ease; } .deck__back { white-space: nowrap; } .deck__back:hover { color: var(--deck-accent); } .deck__label { display: flex; align-items: center; gap: 0.6rem; font-size: var(--fs-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); } .deck__count { color: var(--ink); font-weight: 700; letter-spacing: 0.06em; } .deck__controls { position: fixed; right: clamp(1rem, 4vw, 2rem); bottom: clamp(1rem, 3vh, 1.6rem); z-index: 35; display: flex; align-items: center; gap: 0.5rem; } .deck__btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--edge-strong); background: rgba(17, 17, 17, 0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--ink); cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease; } .deck__btn svg { width: 20px; height: 20px; } .deck__btn:hover:not(:disabled) { border-color: var(--deck-accent); color: var(--deck-accent); } .deck__btn:disabled { opacity: 0.3; cursor: default; } .deck__hint { position: fixed; left: clamp(1rem, 4vw, 2rem); bottom: clamp(1rem, 3vh, 1.6rem); z-index: 35; font-size: var(--fs-micro); letter-spacing: 0.06em; color: var(--ink-faint); display: flex; align-items: center; gap: 0.5rem; transition: opacity 0.4s ease; } .deck__hint kbd { font: inherit; font-size: var(--fs-micro); border: 1px solid var(--edge-strong); border-radius: 5px; padding: 0.12rem 0.38rem; color: var(--ink-dim); } .deck__hint.is-gone { opacity: 0; pointer-events: none; } @media (max-width: 640px) { .deck__hint { display: none; } } .deck__rail { position: fixed; right: clamp(0.5rem, 1.6vw, 1rem); top: 50%; transform: translateY(-50%); z-index: 35; display: flex; flex-direction: column; gap: 0.55rem; } @media (max-width: 900px) { .deck__rail { display: none; } } .deck__dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.2); cursor: pointer; transition: background 0.25s ease, transform 0.25s ease; } .deck__dot:hover { background: rgba(255, 255, 255, 0.5); } /* Extra air where one case study ends and the next begins */ .deck__dot.is-break { margin-top: 1.1rem; } .deck__dot.is-active { background: var(--deck-accent); transform: scale(1.35); } /* Print / PDF export: one slide per page */ @media print { .deck__progress, .deck__bar, .deck__controls, .deck__rail, .deck__hint { display: none; } .deck__track { height: auto; overflow: visible; } .slide { min-height: auto; page-break-after: always; break-after: page; } .slide__inner > * { opacity: 1; transform: none; } } .s-axis { margin-top: 0.5rem; } .s-axis + .s-cap { margin-top: 0.3rem; } /* Breathing room between the state pills and the caption under the 3D stage */ .s-glb .s-cap { display: block; margin-top: 0.55rem; } /* Screenshots in a strip vary wildly in aspect (long scroll shots next to short ones). Lock a uniform row height so the slide can't outgrow the viewport: phone shots crop from the top, wide shots letterbox. */ /* A slide with a lot of content can be taller than a phone viewport. Mandatory snapping would then hide its bottom half (the browser snaps past it), so on small or short viewports the deck reads as a scrolling document and snapping becomes advisory. */ @media (max-width: 900px), (max-height: 860px) { .deck__track { scroll-snap-type: y proximity; } .slide { height: auto; scroll-snap-stop: normal; align-items: flex-start; } /* The opening slide is short enough to stay vertically centred even on a phone - nothing to clip, and top-aligned it reads as a stub. */ .slide--center { align-items: center; } } @media (max-width: 640px) { /* The slide label and the back link fight for the same row on a phone - keep the counter, drop the label. */ .deck__label [data-deck-label] { display: none; } /* Clear the fixed prev/next buttons at the end of a slide's content. */ .slide { padding-bottom: 6.5rem; } /* Except the centred slide - nothing sits at its bottom edge to clear, and the extra padding would push its content above true centre. */ .slide--center { padding-bottom: clamp(4.5rem, 9vh, 6rem); } } /* The screenshots are multi-screen sheets (some 2900px wide), so they get one uniform height and their own natural width - the strip scrolls sideways instead of squeezing every board into a phone-shaped box. */ .s-shot { display: block; height: clamp(220px, 44svh, 420px); overflow: hidden; border: 1px solid var(--edge); border-radius: 12px; background: #0d0d0d; } .s-shot img { height: 100%; width: auto; max-width: none; } /* Horizontal scrollbar on the strip, styled so it reads as an affordance */ .s-strip { scrollbar-color: var(--edge-strong) transparent; overscroll-behavior-x: contain; } .s-strip::-webkit-scrollbar { height: 8px; } .s-strip::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); border-radius: 999px; } .s-strip::-webkit-scrollbar-thumb { background: var(--edge-strong); border-radius: 999px; } .s-strip:hover::-webkit-scrollbar-thumb { background: var(--deck-accent); } /* A strip sitting in a split column is the media half - it fills its column and scrolls sideways inside it. */ .s-split .s-strip { min-width: 0; } /* -------------------------------------------------------------------------- Type scale steps - each value stays a multiple of 4px -------------------------------------------------------------------------- */ @media (max-width: 1024px) { .deck { --fs-lede: 20px; --fs-card-title: 20px; --fs-stat: 28px; --fs-title: 40px; --fs-title-xl: 64px; --fs-big: 64px; } } @media (max-width: 640px) { .deck { --fs-ui: 12px; --fs-lede: 16px; --fs-card-title: 16px; --fs-stat: 24px; --fs-title: 28px; --fs-title-xl: 40px; --fs-big: 56px; } } /* Five cards: three across the top, the last two splitting the width 50:50. Six columns make both rows land on the same edges. */ @media (min-width: 768px) { .s-grid--5 { grid-template-columns: repeat(6, 1fr); } .s-grid--5 > * { grid-column: span 2; } .s-grid--5 > :nth-child(4), .s-grid--5 > :nth-child(5) { grid-column: span 3; } }