/* ============================================================ The ARTO look for the rebuilt decks. ARTO's own colours only: navy, cream, coral and white (no teal or green, those are CPHI's). Flat colour, real photography, a few words per slide, no shadows (Chrome's PDF writer turns soft shadows into grey tiles). Loaded after base.css; decks.css is not. Type: Raleway Black (900) and Light (300) only, never Bold. One scale, nothing off it: --t-xl 4.9cqw cover and close headline --t-l 3.4cqw slide titles --t-m 2.2cqw headings and figures --t-s 1.4cqw body --t-xs 1.05cqw sources, captions, chart labels (the DCAT chart's single hero figure is the one exception) 1cqw = 19.2px on a 1920 slide. ============================================================ */ :root { --a-navy: #262F66; --a-tile: #2C3672; --a-cream: #F5F3F0; --a-coral: #F0705C; --a-soft: #D9DCEC; /* body text on navy */ --a-dim: #A3A8C8; /* captions on navy */ --a-rule: rgba(255, 255, 255, 0.16); --a-ink2: #4A5080; /* body text on cream */ --a-rule2: rgba(38, 47, 102, 0.16); --t-xl: 4.9cqw; --t-l: 3.4cqw; --t-m: 2.2cqw; --t-s: 1.4cqw; --t-xs: 1.05cqw; } /* the window around the 16:9 stage matches the slides, so no darker bars show at the edges */ html, body.p, .p .deck, .p .slide { background: #262F66; } .p .stage { color: #fff; font-variant-numeric: lining-nums; font-weight: 300; background: linear-gradient(135deg, #262F66 0%, #151A39 100%); } /* ARTO navy gradient */ .p h2, .p h3 { text-wrap: balance; } .p p { text-wrap: pretty; } .p .stage.cream { background: var(--a-cream); color: var(--a-navy); } .p b, .p strong, .p h1, .p h2, .p h3 { font-weight: 900; } .a-title { position: absolute; left: 6.25cqw; top: 5cqw; width: 66cqw; font-size: var(--t-l); font-weight: 900; line-height: 1.04; letter-spacing: -0.01em; } .a-sub { position: absolute; left: 6.25cqw; top: 9.5cqw; width: 66cqw; font-size: var(--t-s); line-height: 1.4; color: var(--a-soft); } .a-sub em, .a-case .when em { font-style: normal; background: linear-gradient(var(--a-coral), var(--a-coral)) no-repeat 0 0 / 100% 100%; color: #fff; padding: 0 0.35em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* the ARTO mark (drawn by deck.js into [data-mark]); the full wordmark stays on the cover and close */ .a-mark { position: absolute; right: 6.25cqw; top: 5.2cqw; width: 4cqw; color: #fff; z-index: 3; } .a-mark svg { width: 100%; display: block; fill: currentColor; } .a-src { position: absolute; left: 6.25cqw; right: 6.25cqw; bottom: 2.6cqw; font-size: var(--t-xs); color: var(--a-dim); line-height: 1.4; } /* ---------- cover: the photograph across the top, fading into navy, the title set beneath ---------- */ .a-cover .phw { position: absolute; left: 0; top: 0; width: 100%; height: 76%; overflow: hidden; } .a-cover .ph { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; } .a-cover .fade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24, 30, 69, 0.25) 0%, rgba(24, 30, 69, 0) 18%, rgba(24, 30, 69, 0) 52%, #1F2756 100%); } .a-cover .mk { position: absolute; right: 6.25cqw; bottom: 6.1cqw; height: 2.6cqw; width: auto; } .a-cover h1 { position: absolute; left: 6.25cqw; right: 6.25cqw; bottom: 5.2cqw; font-size: var(--t-xl); line-height: 1.02; letter-spacing: -0.012em; } .a-cover h1 em { font-style: normal; color: var(--a-coral); } .a-cover .cap { position: absolute; right: 6.25cqw; bottom: 5.6cqw; font-size: var(--t-xs); color: var(--a-dim); text-align: right; } .a-cover { background: linear-gradient(180deg, #1F2756 0%, #1F2756 70%, #181E45 100%) !important; } /* ---------- close: navy cut on the diagonal over a photo ---------- */ .a-hero .phw { position: absolute; right: 0; top: 0; width: 62cqw; height: 100%; overflow: hidden; } .a-hero .ph { width: 100%; height: 100%; object-fit: cover; display: block; } .a-hero .cut { position: absolute; inset: 0; background: radial-gradient(110% 90% at 15% 5%, rgba(90, 108, 190, 0.30) 0%, rgba(90, 108, 190, 0) 60%), linear-gradient(135deg, #2E3978 0%, #262F66 45%, #181E45 100%); clip-path: polygon(0 0, 55.2cqw 0, 38cqw 100%, 0 100%); } .a-hero .mk { position: absolute; left: 6.25cqw; top: 5.7cqw; height: 3.1cqw; width: auto; } .a-hero .copy { position: absolute; left: 6.25cqw; top: 16cqw; width: 40cqw; } .a-hero h1, .a-hero h2 { font-size: var(--t-xl); line-height: 1.02; letter-spacing: -0.012em; } .a-hero h1 em, .a-hero h2 em { font-style: normal; color: var(--a-coral); } .a-hero .sub { margin-top: 2.2cqw; width: 32cqw; font-size: var(--t-s); line-height: 1.5; color: var(--a-soft); } .a-hero .who { position: absolute; left: 6.25cqw; bottom: 5.2cqw; font-size: var(--t-s); line-height: 1.5; color: var(--a-soft); } .a-hero .who b { color: #fff; } /* ---------- cards: rounded, a navy gradient body, a hairline edge so they lift off the slide ---------- */ .a-card { border-radius: 1.35cqw; overflow: hidden; background: linear-gradient(160deg, #323D80 0%, #232B5E 55%, #1B2250 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); } .a-cards { position: absolute; left: 6.25cqw; right: 6.25cqw; top: 15.4cqw; bottom: 5.6cqw; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; } .a-cards .a-card { display: flex; flex-direction: column; } .a-card .ph { width: 100%; height: 17.2cqw; object-fit: cover; display: block; } .a-card .tx { padding: 1.8cqw 2cqw 2cqw; flex: 1; } .a-card .hd { display: flex; justify-content: space-between; align-items: baseline; gap: 1cqw; } .a-card h3 { font-size: var(--t-m); line-height: 1.05; } .a-card .n { font-size: var(--t-s); font-weight: 900; color: var(--a-coral); } .a-card p.tag { margin-top: 0.5cqw; color: var(--a-coral); } .a-card p { margin-top: 0.9cqw; font-size: var(--t-s); line-height: 1.48; color: var(--a-soft); } /* ---------- one event: a single photograph left, the case right ---------- */ .a-case .ph { position: absolute; left: 0; top: 0; width: 42cqw; height: 100%; object-fit: cover; display: block; } .a-case .side { position: absolute; left: 47.5cqw; right: 6.25cqw; top: 5cqw; bottom: 4.6cqw; display: flex; flex-direction: column; } .a-case h2 { font-size: var(--t-l); line-height: 1.04; letter-spacing: -0.01em; padding-right: 9cqw; } .a-case .when { margin-top: 0.8cqw; font-size: var(--t-s); color: var(--a-coral); } .a-case .rows { margin: auto 0; } .a-case .row { display: grid; grid-template-columns: 10cqw 1fr; padding: 1.8cqw 0; border-top: 1px solid var(--a-rule); } .a-case .row:last-child { border-bottom: 1px solid var(--a-rule); } .a-case .row .k { font-size: var(--t-s); color: var(--a-coral); padding-top: 0.45cqw; } .a-case .row h3 { font-size: var(--t-m); line-height: 1.1; } .a-case .row p { margin-top: 0.6cqw; font-size: var(--t-s); line-height: 1.5; color: var(--a-soft); } .a-case .note { font-size: var(--t-xs); color: var(--a-dim); } /* a photo panel instead of one photograph: a wide still on top, two below */ .a-case .pics { position: absolute; left: 0; top: 0; width: 42cqw; height: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 23.6cqw 1fr; gap: 0.35cqw; background: var(--a-navy); } .a-case .pics img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 0; } .a-case .pics img:first-child { grid-column: 1 / -1; } .a-case .pics.four { grid-template-rows: 23.6cqw 1fr 1fr; } .a-case .pics.four img:nth-child(2) { grid-column: 1; grid-row: 2; } .a-case .pics.four img:nth-child(3) { grid-column: 1; grid-row: 3; } .a-case .pics.four img:nth-child(4) { grid-column: 2; grid-row: 2 / 4; } /* ---------- the podcast ecosystem: two shows, real thumbnails, platforms, reach ---------- */ .a-shows2 { position: absolute; left: 6.25cqw; right: 6.25cqw; top: 14.6cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqw; } .a-show2 { padding: 1.7cqw 1.9cqw 1.5cqw; display: flex; flex-direction: column; } .a-show2 .lg { height: 3.6cqw; width: auto; align-self: flex-start; } .a-show2 h3 { margin-top: 1.1cqw; font-size: var(--t-m); line-height: 1.1; } .a-show2 p { margin-top: 0.5cqw; font-size: var(--t-s); line-height: 1.45; color: var(--a-soft); } .a-thumbs { margin-top: 1.1cqw; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6cqw; } .a-thumbs img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: 0.25cqw; } .a-top { margin-top: 1cqw; padding-top: 0.9cqw; border-top: 1px solid var(--a-rule); display: flex; align-items: baseline; gap: 1cqw; } .a-top b { font-size: var(--t-m); color: var(--a-coral); line-height: 1; white-space: nowrap; } .a-top span { font-size: var(--t-s); color: var(--a-soft); white-space: nowrap; } .a-base { position: absolute; left: 6.25cqw; right: 6.25cqw; bottom: 3cqw; display: grid; grid-template-columns: auto 1fr; gap: 4cqw; align-items: center; border-top: 1px solid var(--a-rule); padding-top: 1.6cqw; } .a-pf { display: flex; align-items: center; gap: 1.1cqw; } .a-pf img { height: 3cqw; width: auto; display: block; } .a-pf img.li { border-radius: 0.5cqw; } .a-pf span { margin-left: 0.6cqw; font-size: var(--t-s); color: var(--a-soft); line-height: 1.3; } .a-reach2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2cqw; } .a-reach2 b { display: block; font-size: var(--t-m); line-height: 1; } .a-reach2 span { display: block; margin-top: 0.5cqw; font-size: var(--t-xs); color: var(--a-dim); line-height: 1.35; } /* ---------- DCAT in numbers: hero figure + one-series ranked bars ---------- */ :root { --spring: linear(0, 0.0136, 0.0484, 0.0974, 0.1552, 0.2175, 0.2816, 0.3452, 0.4069, 0.4656, 0.5207, 0.5719, 0.6189, 0.6619, 0.7009, 0.7361, 0.7676, 0.7959, 0.821, 0.8434, 0.8631, 0.8806, 0.8959, 0.9095, 0.9213, 0.9317, 0.9408, 0.9487, 0.9556, 0.9616, 0.9668, 0.9713, 0.9753, 0.9787, 0.9816, 0.9842, 0.9864, 0.9883, 0.9899, 0.9914, 1); } /* ---- 08 · conference to conference ---- A staircase of the three events in date order: each step is the event's own photograph, and its figure sits on top of it, so the numbers climb with the steps. Step heights show order, not scale (Jefferies is under 1% of CPHI); the figures carry the scale. CPHI is the top step, the only coral figure, and keeps "projected" and the tilde. */ .st { position: absolute; left: 6.25cqw; right: 6.25cqw; top: 15cqw; bottom: 5cqw; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; align-items: end; } .st-col { display: flex; flex-direction: column; justify-content: flex-end; min-height: 0; } .st-head { padding: 0 0.4cqw 1.3cqw; } .st-fig { display: block; font-size: var(--t-l); line-height: 1; letter-spacing: -0.015em; font-variant-numeric: lining-nums proportional-nums; } .st-head p { margin-top: 0.7cqw; font-size: var(--t-s); line-height: 1.45; color: var(--a-soft); max-width: 24cqw; } .st-card { position: relative; height: var(--h); } .st-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .st-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24, 30, 69, 0) 38%, rgba(24, 30, 69, 0.9) 100%); } .st-lab { position: absolute; left: 1.8cqw; right: 1.8cqw; bottom: 1.5cqw; z-index: 2; } .st-lab h3 { font-size: var(--t-m); line-height: 1.05; } .st-lab p { margin-top: 0.35cqw; font-size: var(--t-s); color: var(--a-coral); } .st-top .st-fig { font-size: var(--t-xl); color: var(--a-coral); } .st-top .st-card { box-shadow: inset 0 0 0 0.16cqw var(--a-coral); } .st-top .st-card::before { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; box-shadow: inset 0 0 0 0.16cqw var(--a-coral); pointer-events: none; } /* the steps rise one after another, then each figure counts up on top of its step */ @keyframes st-step { from { transform: translateY(6cqw); opacity: 0; } } .p .slide.is-active .st-card { animation: st-step 1100ms var(--spring-pop) backwards; animation-delay: calc(200ms + var(--i, 0) * 170ms); } .p .slide.is-active .st-head { animation: p-rise 900ms var(--spring) backwards; animation-delay: calc(380ms + var(--i, 0) * 170ms); } .st-card img { transition: scale 1100ms var(--spring); } .st-card:hover img { scale: 1.05; } /* Laptop windows are usually a little wider than 16:9. Fill the width there and let the stage overflow a few percent top and bottom (the deck shell centres and clips it), so photos run to the screen edge. Wider than 2:1 falls back to letterboxing. */ @media (min-aspect-ratio: 16/9) and (max-aspect-ratio: 2/1) { .p .stage { width: 100vw; } } /* this deck has no speaker notes: keep the engine's panel hidden even if N is pressed */ .p .notes { display: none !important; } /* ============================================================ Motion. Springs, not easing presets: --spring is critically damped (settles, no overshoot), --spring-pop is underdamped (about 8% overshoot) for small things that pop. Every entrance is a keyframe with `backwards` fill, so with animation off (PDF export, reduced motion) each element simply sits in its final place. Hover and pointer moves use transitions on the same springs. ============================================================ */ :root { --spring-pop: linear(0, 0.0162, 0.0599, 0.1239, 0.202, 0.2889, 0.38, 0.4716, 0.5607, 0.645, 0.723, 0.7935, 0.8558, 0.9097, 0.9552, 0.9927, 1.0226, 1.0456, 1.0625, 1.0738, 1.0805, 1.0833, 1.083, 1.08, 1.0752, 1.0691, 1.062, 1.0545, 1.0468, 1.0393, 1.0321, 1.0254, 1.0193, 1.0138, 1.0091, 1.005, 1.0016, 0.9989, 0.9968, 0.9952, 0.9941, 0.9934, 0.9931, 0.993, 0.9932, 0.9936, 0.994, 0.9946, 1); } @keyframes p-rise { from { opacity: 0; transform: translateY(2.2cqw); } } @keyframes p-pop { from { opacity: 0; transform: translateY(1.8cqw) scale(0.94); } } @keyframes p-fade { from { opacity: 0; } } @keyframes p-settle { from { transform: scale(1.12); } } @keyframes p-line { from { transform: translateY(108%); } } @keyframes p-hl { from { background-size: 0% 100%; } } @keyframes p-slide { from { opacity: 0; transform: translateX(2.6cqw); } } @keyframes p-mark { from { opacity: 0; transform: translateY(-1.2cqw) rotate(-14deg) scale(0.7); } } @keyframes p-wipe { from { clip-path: inset(0 100% 0 0); transform: scale(1.08); } } /* default entrance for anything marked .anim, staggered in document order */ .p .slide.is-active .anim { animation: p-rise 1000ms var(--spring) backwards; } .p .slide.is-active .anim:nth-child(2) { animation-delay: 120ms; } .p .slide.is-active .anim:nth-child(3) { animation-delay: 240ms; } .p .slide.is-active .anim:nth-child(4) { animation-delay: 360ms; } /* titles, the subtitle, its highlight drawing in behind the phrase, the mark */ .p .slide.is-active .a-title { animation: p-rise 1000ms var(--spring) 40ms backwards; } .p .slide.is-active .a-sub { animation: p-rise 1000ms var(--spring) 160ms backwards; } .p .slide.is-active .a-sub em, .p .slide.is-active .a-case .when em { animation: p-hl 800ms var(--spring) 700ms backwards; } .p .slide.is-active .a-mark { animation: p-mark 1200ms var(--spring-pop) 120ms backwards; } /* cover: the photo settles from a slow push-in, the title lines rise out of a mask, then the small print */ .p .slide.is-active .a-cover .ph { animation: p-settle 2800ms var(--spring) backwards; } .a-cover h1 .ln { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; } .a-cover h1 .ln > span { display: inline-block; } .p .slide.is-active .a-cover h1 .ln > span { animation: p-line 1100ms var(--spring) backwards; } .p .slide.is-active .a-cover h1 .ln:nth-child(1) > span { animation-delay: 250ms; } .p .slide.is-active .a-cover h1 .ln:nth-child(2) > span { animation-delay: 390ms; } .p .slide.is-active .a-cover .mk { animation: p-fade 900ms var(--spring) 800ms backwards; } .p .slide.is-active .a-cover .cap { animation: p-fade 900ms var(--spring) 950ms backwards; } /* photos drift slightly against the pointer (scaled up a touch first so no edge ever shows) */ .a-cover .ph, .a-hero .ph { scale: 1.05; translate: calc(var(--mx, 0) * -0.9cqw) calc(var(--my, 0) * -0.6cqw); transition: translate 1400ms var(--spring); } .p .slide.is-active .a-hero .ph { animation: p-settle 2800ms var(--spring) backwards; } /* cards: pop in one after another, photo settles inside, then tilt towards the pointer and lift on hover */ .p .slide.is-active .a-cards .a-card { animation: p-pop 1000ms var(--spring-pop) backwards; } .p .slide.is-active .a-cards .a-card:nth-child(1) { animation-delay: 260ms; } .p .slide.is-active .a-cards .a-card:nth-child(2) { animation-delay: 380ms; } .p .slide.is-active .a-cards .a-card:nth-child(3) { animation-delay: 500ms; } .p .slide.is-active .a-cards .a-card .ph { animation: p-settle 1600ms var(--spring) backwards; animation-delay: inherit; } .a-card { transform: perspective(1400px) rotateX(calc(var(--ry, 0) * -3deg)) rotateY(calc(var(--rx, 0) * 4deg)); transition: transform 700ms var(--spring), translate 700ms var(--spring), box-shadow 400ms ease; will-change: transform; } .a-card:hover { translate: 0 -0.5cqw; box-shadow: inset 0 0 0 1px rgba(240, 112, 92, 0.55); } .a-card .ph { transition: scale 1100ms var(--spring); } .a-card:hover .ph { scale: 1.05; } .a-cards .a-card .n { transition: translate 600ms var(--spring-pop); display: inline-block; } .a-cards .a-card:hover .n { translate: 0 -0.25cqw; } /* event case slides: photo tiles wipe in left to right, the three selling rows slide in after */ .p .slide.is-active .a-case .pics img, .p .slide.is-active .a-case > img.ph { animation: p-wipe 1100ms var(--spring) backwards; } .p .slide.is-active .a-case .pics img:nth-child(2) { animation-delay: 140ms; } .p .slide.is-active .a-case .pics img:nth-child(3) { animation-delay: 280ms; } .p .slide.is-active .a-case .pics img:nth-child(4) { animation-delay: 420ms; } .p .slide.is-active .a-case .rows.anim { animation: none; } .p .slide.is-active .a-case .row { animation: p-slide 950ms var(--spring) backwards; } .p .slide.is-active .a-case .row:nth-child(1) { animation-delay: 380ms; } .p .slide.is-active .a-case .row:nth-child(2) { animation-delay: 530ms; } .p .slide.is-active .a-case .row:nth-child(3) { animation-delay: 680ms; } .a-case .row > div { transition: translate 600ms var(--spring); } .a-case .row:hover > div { translate: 0.6cqw 0; } .a-case .row .k { transition: color 300ms ease; } .a-case .row:hover .k { color: #fff; } /* where the content goes: thumbnails and platform icons pop in, thumbnails lift on hover */ .p .slide.is-active .a-thumbs img { animation: p-pop 900ms var(--spring-pop) backwards; } .p .slide.is-active .a-show2:nth-child(1) .a-thumbs img:nth-child(1) { animation-delay: 420ms; } .p .slide.is-active .a-show2:nth-child(1) .a-thumbs img:nth-child(2) { animation-delay: 500ms; } .p .slide.is-active .a-show2:nth-child(1) .a-thumbs img:nth-child(3) { animation-delay: 580ms; } .p .slide.is-active .a-show2:nth-child(2) .a-thumbs img:nth-child(1) { animation-delay: 560ms; } .p .slide.is-active .a-show2:nth-child(2) .a-thumbs img:nth-child(2) { animation-delay: 640ms; } .p .slide.is-active .a-show2:nth-child(2) .a-thumbs img:nth-child(3) { animation-delay: 720ms; } .a-thumbs img { transition: scale 700ms var(--spring-pop), box-shadow 300ms ease; position: relative; } .a-thumbs img:hover { scale: 1.08; z-index: 2; box-shadow: 0 0 0 0.15cqw #fff; } .p .slide.is-active .a-pf img { animation: p-pop 800ms var(--spring-pop) backwards; } .p .slide.is-active .a-pf img:nth-child(1) { animation-delay: 650ms; } .p .slide.is-active .a-pf img:nth-child(2) { animation-delay: 730ms; } .p .slide.is-active .a-pf img:nth-child(3) { animation-delay: 810ms; } .p .slide.is-active .a-pf img:nth-child(4) { animation-delay: 890ms; } .a-pf img { transition: scale 600ms var(--spring-pop); } .a-pf img:hover { scale: 1.15; } /* DCAT chart: hover a company to pick it out of the ranking */ @media (prefers-reduced-motion: reduce) { .p *, .p *::before, .p *::after { animation: none !important; transition: none !important; } } /* ---- 09 · close, built on the cover ---- */ .a-close .mk { bottom: 12.8cqw; } .a-close .cap { font-size: var(--t-s); line-height: 1.5; color: var(--a-soft); max-width: 30cqw; } .a-close .cap b { color: #fff; } /* ---------- one event (v2): the conference's own logo, a strip of rounded photographs, then networking / exposure / content as three columns. No edge-to-edge photo block. ---------- */ .a-ev2 .ev-head { position: absolute; left: 6.25cqw; top: 4.6cqw; height: 4.8cqw; display: flex; align-items: center; gap: 2cqw; } .a-ev2 .ev-logo { width: auto; display: block; } .a-ev2 .ev-meta { display: flex; flex-direction: column; justify-content: center; padding-left: 2cqw; border-left: 1px solid var(--a-rule); height: 100%; } .a-ev2 .ev-meta b { font-size: var(--t-s); line-height: 1.3; } .a-ev2 .ev-meta span { font-size: var(--t-s); line-height: 1.3; color: var(--a-coral); } .a-ev2 .ev-strip { position: absolute; left: 6.25cqw; right: 6.25cqw; top: 12.4cqw; height: 21.2cqw; display: grid; gap: 1cqw; grid-template-rows: minmax(0, 1fr); } .a-ev2 .ev-strip.n3 { grid-template-columns: 1.55fr 1fr 1fr; } .a-ev2 .ev-strip.n4 { grid-template-columns: 1.3fr 1fr 1fr 1fr; } .a-ev2 .ev-strip img { width: 100%; height: 100%; object-fit: cover; display: block; min-width: 0; min-height: 0; border-radius: 1.35cqw; } .a-ev2 .ev-cols { position: absolute; left: 6.25cqw; right: 6.25cqw; top: 36cqw; bottom: 5cqw; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.6cqw; } .a-ev2 .ev-col { border-top: 1px solid var(--a-rule); padding-top: 1.4cqw; } .a-ev2 .ev-col .k { display: block; font-size: var(--t-s); color: var(--a-coral); } .a-ev2 .ev-col h3 { margin-top: 0.6cqw; font-size: var(--t-m); line-height: 1.1; } .a-ev2 .ev-col p { margin-top: 0.7cqw; font-size: var(--t-s); line-height: 1.48; color: var(--a-soft); } .a-ev2 .a-src { bottom: 2.2cqw; } /* motion: logo and meta fade up, photos wipe in left to right, columns rise one after another */ .p .slide.is-active .a-ev2 .ev-head { animation: p-rise 1000ms var(--spring) 60ms backwards; } .p .slide.is-active .a-ev2 .ev-strip img { animation: p-wipe 1100ms var(--spring) backwards; } .p .slide.is-active .a-ev2 .ev-strip img:nth-child(2) { animation-delay: 120ms; } .p .slide.is-active .a-ev2 .ev-strip img:nth-child(3) { animation-delay: 240ms; } .p .slide.is-active .a-ev2 .ev-strip img:nth-child(4) { animation-delay: 360ms; } .p .slide.is-active .a-ev2 .ev-col { animation: p-rise 950ms var(--spring) backwards; } .p .slide.is-active .a-ev2 .ev-col:nth-child(1) { animation-delay: 420ms; } .p .slide.is-active .a-ev2 .ev-col:nth-child(2) { animation-delay: 540ms; } .p .slide.is-active .a-ev2 .ev-col:nth-child(3) { animation-delay: 660ms; } .a-ev2 .ev-strip img { transition: scale 1100ms var(--spring); } .a-ev2 .ev-strip img:hover { scale: 1.03; } .st-top .st-head p { max-width: none; } /* ---------- light case-study slides: the three event pages sit on ARTO cream so the deck alternates. Navy ink, navy logos and mark; coral text steps down to the darker coral so small labels stay legible on the light ground. ---------- */ .p .stage.cream { background: #F5F3F0; color: var(--a-navy); } .cream .a-mark { color: var(--a-navy); } .cream.a-ev2 .ev-meta { border-left-color: var(--a-rule2); } .cream.a-ev2 .ev-meta b { color: var(--a-navy); } .cream.a-ev2 .ev-meta span, .cream.a-ev2 .ev-col .k { color: var(--coral-dk); } .cream.a-ev2 .ev-col { border-top-color: var(--a-rule2); } .cream.a-ev2 .ev-col h3 { color: var(--a-navy); } .cream.a-ev2 .ev-col p { color: var(--a-ink2); } .cream .a-src { color: #7A7FA3; } /* light overview slide: titles in navy ink, cards stay navy (as on the CPHI general deck's marketing page) */ .cream .a-sub { color: var(--a-ink2); } .cream .a-card { color: #fff; } /* ---------- where the content goes (v2): visual first, like the CPHI general deck's podcast page. Each show: its logo and line, three of its own 9:16 Shorts covers, hosts and its top episode. Platforms and reach run along the bottom. ---------- */ .pd { position: absolute; left: 6.25cqw; right: 6.25cqw; top: 13.6cqw; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3cqw; } .pd-head { display: flex; align-items: center; gap: 1.4cqw; height: 4cqw; } .pd-logo { height: 3.6cqw; width: auto; display: block; flex: none; } .pd-head p { font-size: var(--t-s); line-height: 1.25; padding-left: 1.4cqw; border-left: 1px solid var(--a-rule); } .pd-tiles { margin-top: 1.2cqw; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8cqw; } .pd-tiles img { width: 100%; aspect-ratio: 9 / 16; height: auto; max-height: 21cqw; object-fit: cover; object-position: 50% 100%; display: block; border-radius: 1.1cqw; } .pd-foot { margin-top: 1cqw; display: flex; align-items: baseline; gap: 0.7cqw; font-size: var(--t-xs); color: var(--a-dim); white-space: nowrap; } .pd-foot span:first-child { margin-right: auto; } .pd-foot b { font-size: var(--t-s); color: var(--a-coral); } .pd-foot .pd-ep { color: var(--a-soft); } /* bottom band: icons, then four figures, all on one baseline */ .a-base { bottom: 2.8cqw !important; padding-top: 1.3cqw !important; border-top: 1px solid var(--a-rule) !important; } .a-reach2 b { font-size: var(--t-l) !important; line-height: 1; } /* motion: covers rise in one after another, lift on hover */ .p .slide.is-active .pd-tiles img { animation: p-pop 900ms var(--spring-pop) backwards; } .p .slide.is-active .pd-show:nth-child(1) .pd-tiles img:nth-child(1) { animation-delay: 300ms; } .p .slide.is-active .pd-show:nth-child(1) .pd-tiles img:nth-child(2) { animation-delay: 380ms; } .p .slide.is-active .pd-show:nth-child(1) .pd-tiles img:nth-child(3) { animation-delay: 460ms; } .p .slide.is-active .pd-show:nth-child(2) .pd-tiles img:nth-child(1) { animation-delay: 440ms; } .p .slide.is-active .pd-show:nth-child(2) .pd-tiles img:nth-child(2) { animation-delay: 520ms; } .p .slide.is-active .pd-show:nth-child(2) .pd-tiles img:nth-child(3) { animation-delay: 600ms; } .p .slide.is-active .pd-head { animation: p-rise 1000ms var(--spring) 150ms backwards; } .pd-tiles img { transition: translate 700ms var(--spring-pop), box-shadow 300ms ease; } .pd-tiles img:hover { translate: 0 -0.6cqw; box-shadow: 0 0 0 0.15cqw #fff; } /* ---------- cover and close (v3): the photograph crisp across the top with no fade, a coral divider, then a solid navy bar carrying the headline. The highlighted phrase is white in a square coral box, the same highlight the slide subtitles use. ---------- */ .a-cover { background: linear-gradient(135deg, #262F66 0%, #151A39 100%) !important; } .a-cover .phw { height: 64%; } .a-cover .fade { display: none; } .a-cover::after { content: ""; position: absolute; left: 0; right: 0; top: 64%; height: 0.32cqw; background: var(--a-coral); z-index: 2; } .a-cover h1 { bottom: 5.4cqw; } .a-cover h1 em { color: #fff; background: var(--a-coral); padding: 0 0.16em 0.02em; margin-left: -0.04em; } .a-cover .mk { bottom: 6.3cqw; } .a-close .mk { bottom: 9.6cqw; } .a-close .cap { bottom: 5.6cqw; } .p .slide.is-active .a-cover::after { animation: cv-rule 900ms var(--spring) 150ms backwards; transform-origin: left center; } @keyframes cv-rule { from { transform: scaleX(0); } } .a-cover h1 { line-height: 1.14; } .a-cover h1 .ln { padding-bottom: 0.04em; } .p .stage.a-cover:not(.a-close) .ph { object-position: 50% 6%; } .a-cover .phw { height: 67%; } .a-cover::after { top: 67%; } .a-cover h1 { bottom: 4.6cqw; } .a-cover .mk { bottom: 5.5cqw; } .a-close .mk { bottom: 8.8cqw; } .a-close .cap { bottom: 4.8cqw; } .p .stage.a-cover:not(.a-close) .ph { object-position: 50% 17%; } .a-sub.a-sub-2 { width: 82cqw; line-height: 1.5; } .a-sub-2 ~ .a-cards { top: 16.4cqw; } /* ---------- cover (v4): title on navy at the left, the panel photograph full height on the right, a coral divider down the seam. ---------- */ .a-cover2 { background: linear-gradient(135deg, #262F66 0%, #151A39 100%) !important; } .a-cover2 .phw { position: absolute; right: 0; top: 0; bottom: 0; width: 50%; overflow: hidden; } .a-cover2 .ph { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; scale: 1.04; translate: calc(var(--mx, 0) * -0.7cqw) calc(var(--my, 0) * -0.5cqw); transition: translate 1400ms var(--spring); } .a-cover2::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 0.32cqw); width: 0.32cqw; background: var(--a-coral); z-index: 2; } .a-cover2 .mk { position: absolute; left: 6.25cqw; top: 5.4cqw; height: 2.8cqw; width: auto; } .a-cover2 h1 { position: absolute; left: 6.25cqw; width: 41cqw; bottom: 6cqw; font-size: var(--t-xl); line-height: 1.14; letter-spacing: -0.012em; } .a-cover2 h1 em { font-style: normal; color: #fff; background: var(--a-coral); padding: 0 0.16em 0.02em; margin-left: -0.04em; } .a-cover2 h1 .ln { display: block; overflow: hidden; padding-bottom: 0.04em; } .a-cover2 h1 .ln > span { display: inline-block; } .p .slide.is-active .a-cover2 .ph { animation: p-settle 2800ms var(--spring) backwards; } .p .slide.is-active .a-cover2::after { animation: cv-drop 900ms var(--spring) 150ms backwards; transform-origin: center top; } @keyframes cv-drop { from { transform: scaleY(0); } } .p .slide.is-active .a-cover2 h1 .ln > span { animation: p-line 1100ms var(--spring) backwards; } .p .slide.is-active .a-cover2 h1 .ln:nth-child(1) > span { animation-delay: 250ms; } .p .slide.is-active .a-cover2 h1 .ln:nth-child(2) > span { animation-delay: 340ms; } .p .slide.is-active .a-cover2 h1 .ln:nth-child(3) > span { animation-delay: 430ms; } .p .slide.is-active .a-cover2 h1 .ln:nth-child(4) > span { animation-delay: 520ms; } .p .slide.is-active .a-cover2 .mk { animation: p-fade 900ms var(--spring) 700ms backwards; } /* card edge runs round the photograph too: drawn on an overlay above the image, not under it */ .a-cards .a-card { position: relative; box-shadow: none; } .a-cards .a-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 3; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); transition: box-shadow 400ms ease; } .a-cards .a-card:hover { box-shadow: none; } .a-cards .a-card:hover::after { box-shadow: inset 0 0 0 1px rgba(240, 112, 92, 0.75); } .st-card::before { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); } .st-top .st-card::before { box-shadow: inset 0 0 0 0.16cqw var(--a-coral); } /* the coral box on a headline line: a fixed box around the words, with the same gap above and below it as between the plain lines, instead of filling (and being clipped to) the line box */ .a-cover h1 em, .a-cover2 h1 em { display: inline-block; line-height: 1; padding: 0.06em 0.18em 0.13em; margin-left: -0.04em; background: var(--a-coral); } .a-cover h1 .ln.hl, .a-cover2 h1 .ln.hl { margin: 0.16em 0 0.12em; padding-bottom: 0; } .a-cover2 h1 { line-height: 1.08; } .a-cover h1 { line-height: 1.08; } .a-cover h1 em, .a-cover2 h1 em { padding: 0.08em 0.18em 0.11em; } .a-cover h1 .ln.hl, .a-cover2 h1 .ln.hl { margin: 0.24em 0 0.2em; } /* ---------- card frame (v2): a thicker gradient stroke running round the whole card, photo included. Coral at the top-left corner fading into a soft light edge, the same 135deg as the slide gradient. On hover the coral sweeps round the frame. ---------- */ @property --fr { syntax: ""; inherits: false; initial-value: 135deg; } .a-cards .a-card::after { padding: 0.24cqw; box-shadow: none; background: linear-gradient(var(--fr), #F0705C 0%, rgba(240, 112, 92, 0.6) 28%, rgba(255, 255, 255, 0.14) 62%, rgba(255, 255, 255, 0.4) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; transition: --fr 900ms var(--spring); } .a-cards .a-card:hover::after { box-shadow: none; --fr: 315deg; } /* print-safe version of the frame: a transparent border showing a border-box gradient behind a padding-box card body (Chrome's PDF writer ignores mask-composite, so no mask) */ .a-cards .a-card::after { content: none; } .a-cards .a-card { border: 0.24cqw solid transparent; background: linear-gradient(160deg, #323D80 0%, #232B5E 55%, #1B2250 100%) padding-box, linear-gradient(var(--fr), #F0705C 0%, rgba(240, 112, 92, 0.6) 28%, rgba(255, 255, 255, 0.14) 62%, rgba(255, 255, 255, 0.4) 100%) border-box; transition: transform 700ms var(--spring), translate 700ms var(--spring), --fr 900ms var(--spring); } .a-cards .a-card:hover { --fr: 315deg; box-shadow: none; } .pd-tiles img { object-position: 50% 52%; } /* close (v4): mirrors the cover. Title and contact on navy at the left, the through-the-glass recording full height on the right, coral divider down the seam. */ .a-close2 h1 { bottom: 9.2cqw; } .a-close2 .cap { position: absolute; left: 6.25cqw; bottom: 5.2cqw; font-size: var(--t-s); color: var(--a-soft); } .a-close2 .cap b { color: #fff; } .a-close2 .ph { object-position: 50% 50%; } .p .slide.is-active .a-close2 .cap { animation: p-fade 900ms var(--spring) 750ms backwards; } .a-sub-gw { width: 56cqw; line-height: 1.5; } .a-sub em { white-space: nowrap; } /* ---------- where the content goes (v3): one trailer tile per show beside what the show is about, who has been on it, its top episode and hosts ---------- */ .pd2 { position: absolute; left: 6.25cqw; right: 6.25cqw; top: 13.6cqw; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3cqw; } .pd2-body { margin-top: 1.3cqw; display: grid; grid-template-columns: 12.6cqw minmax(0, 1fr); gap: 1.8cqw; align-items: start; } .pd2-tile { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block; border-radius: 1.1cqw; } .pd2-text p { font-size: var(--t-s); line-height: 1.45; color: var(--a-soft); } .pd2-text .pd2-k { margin-top: 1.1cqw; font-size: var(--t-xs); color: var(--a-coral); } .pd2-text .pd2-g { margin-top: 0.2cqw; color: #fff; } .pd2-foot { margin-top: 1.2cqw; padding-top: 1cqw; border-top: 1px solid var(--a-rule); display: flex; align-items: baseline; gap: 0.8cqw; } .pd2-foot b { font-size: var(--t-m); color: var(--a-coral); line-height: 1; white-space: nowrap; } .pd2-foot span { font-size: var(--t-xs); color: var(--a-soft); } .pd2-text .pd2-host { margin-top: 0.5cqw; font-size: var(--t-xs); color: var(--a-dim); } .p .slide.is-active .pd2-tile { animation: p-pop 900ms var(--spring-pop) backwards; } .p .slide.is-active .pd2-show:nth-child(1) .pd2-tile { animation-delay: 300ms; } .p .slide.is-active .pd2-show:nth-child(2) .pd2-tile { animation-delay: 420ms; } .p .slide.is-active .pd2-text { animation: p-rise 1000ms var(--spring) 450ms backwards; } .pd2-tile { transition: translate 700ms var(--spring-pop), box-shadow 300ms ease; } .pd2-tile:hover { translate: 0 -0.6cqw; box-shadow: 0 0 0 0.15cqw #fff; } .pd2-body { grid-template-columns: 11.8cqw minmax(0, 1fr); } .pd2-text .pd2-k { margin-top: 0.9cqw; } .pd2-foot { margin-top: 0.9cqw; padding-top: 0.8cqw; } /* ---------- how we partner (v3): the process as four steps, ending where the content is published. Coral chevrons sit in the gaps to read left to right. ---------- */ .a-cards.a-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.2cqw; position: absolute; } .a-flow .a-card .ph { height: 12.6cqw; } .a-flow .a-card .tx { padding: 1.5cqw 1.6cqw 1.6cqw; } .a-flow .a-card p { margin-top: 0.7cqw; } .a-flow .a-card p.tag { margin-top: 0.4cqw; } .a-flow .flow-ar { position: absolute; top: 6.3cqw; width: 1.1cqw; height: 1.1cqw; z-index: 4; left: calc((100% - 6.6cqw) / 4 * var(--k) + 2.2cqw * (var(--k) - 1) + 1.1cqw - 0.55cqw); border-top: 0.28cqw solid var(--a-coral); border-right: 0.28cqw solid var(--a-coral); transform: rotate(45deg); } .a-dest .tx { display: flex; flex-direction: column; height: 100%; } .a-dest .dest-show { margin-top: 1cqw; display: flex; flex-direction: column; gap: 0.3cqw; } .a-dest .dest-show img { height: 2.9cqw; width: auto; align-self: flex-start; } .a-dest .dest-show span { font-size: var(--t-xs); color: var(--a-dim); } .a-dest .dest-pf { margin-top: 1.2cqw; display: flex; gap: 0.6cqw; align-items: center; } .a-dest .dest-pf img { height: 1.9cqw; width: auto; } .a-dest .dest-pf img.li { border-radius: 0.3cqw; } .a-dest .dest-stats { margin-top: auto; padding-top: 1cqw; border-top: 1px solid var(--a-rule); display: grid; gap: 0.5cqw; } .a-dest .dest-stats div { display: flex; align-items: baseline; gap: 0.7cqw; } .a-dest .dest-stats b { font-size: var(--t-m); line-height: 1.05; min-width: 9.6cqw; font-variant-numeric: lining-nums proportional-nums; } .a-dest .dest-stats span { font-size: var(--t-xs); color: var(--a-soft); } .p .slide.is-active .a-cards .a-card:nth-child(4) { animation-delay: 620ms; } .p .slide.is-active .a-flow .flow-ar { animation: p-fade 600ms ease backwards; animation-delay: calc(450ms + var(--k) * 120ms); } .a-dest .dest-show { margin-top: 1.1cqw; } .a-dest .dest-show img { height: 2.7cqw; } .a-dest .dest-pf { margin-top: 1.1cqw; } .a-dest .dest-stats { gap: 0.7cqw; padding-top: 0.9cqw; } .a-dest .dest-stats div { display: block; } .a-dest .dest-stats b { display: block; min-width: 0; } .a-dest .dest-stats span { display: block; margin-top: 0.15cqw; } .a-dest .dest-show { margin-top: 0.8cqw; } .a-dest .dest-show img { height: 2.5cqw; } .a-dest .dest-pf { margin-top: 0.9cqw; margin-bottom: 0.9cqw; } .a-dest .dest-stats { gap: 0.55cqw; } /* both show logos side by side; platform icons matched by visual size, not file size */ .a-dest .dest-shows { margin-top: 1.4cqw; display: flex; align-items: center; gap: 1.4cqw; } .a-dest .dest-shows img { height: 2.9cqw; width: auto; display: block; } .a-dest .dest-pf { margin-top: 1.4cqw; gap: 0.8cqw; } .a-dest .dest-pf img { height: 2.1cqw; width: auto; } .a-dest .dest-pf img.yt { height: 1.5cqw; } .a-dest .dest-pf img { height: 2.4cqw; } .a-dest .dest-pf img.yt { height: 1.7cqw; } .a-dest .dest-pf img.yt { height: 2.05cqw; } /* ---------- event slides (v3): the photographs as one long framed tile, then Networking / Content / Result as three navy tiles. No divider lines: the tiles do the separating. ---------- */ .a-ev2 .ev-strip { top: 12.2cqw; height: 18.4cqw; gap: 0.22cqw; border-radius: 1.35cqw; overflow: hidden; border: 0.24cqw solid transparent; background: linear-gradient(#F5F3F0, #F5F3F0) padding-box, linear-gradient(135deg, #F0705C 0%, rgba(240, 112, 92, 0.6) 28%, rgba(38, 47, 102, 0.18) 62%, rgba(38, 47, 102, 0.35) 100%) border-box; } .a-ev2 .ev-strip img { border-radius: 0; } .a-ev2 .ev-strip.n3 { grid-template-columns: 1.4fr 1fr 1fr; } .a-ev2 .ev-cols { top: 32.4cqw; bottom: 4.4cqw; gap: 1.6cqw; } .a-ev2 .ev-col { border-top: 0; padding: 1.8cqw 2cqw; border-radius: 1.35cqw; color: #fff; background: linear-gradient(160deg, #323D80 0%, #232B5E 55%, #1B2250 100%); } .cream.a-ev2 .ev-col { border-top: 0; } .cream.a-ev2 .ev-col .k { color: var(--a-coral); } .cream.a-ev2 .ev-col h3 { color: #fff; } .cream.a-ev2 .ev-col p { color: var(--a-soft); } .a-ev2 .ev-col h3 { margin-top: 0.5cqw; } .a-ev2 .ev-col.res { box-shadow: inset 0 0 0 0.2cqw var(--a-coral); } .a-ev2 .ev-col.res h3 { color: var(--a-coral) !important; } .a-ev2 .ev-strip { height: 16.8cqw; } .a-ev2 .ev-cols { top: 30.8cqw; } /* CPHI event slide: what the content team captured. Moments on the left, what we made on the right; each column sizes to its longest line, and min-width:0 keeps the three tiles equal widths */ .a-ev2 .ev-col:has(.ev-list) { min-width: 0; } .a-ev2 .ev-col .ev-list { margin-top: 0.7cqw; display: grid; grid-template-rows: repeat(3, auto); grid-auto-flow: column; justify-content: start; column-gap: 1.2cqw; list-style: none; padding: 0; font-size: var(--t-s); line-height: 1.48; color: var(--a-soft); } .a-ev2 .ev-col .ev-list li { position: relative; padding-left: 0.95cqw; white-space: nowrap; } .a-ev2 .ev-col .ev-list li::before { content: ""; position: absolute; left: 0; top: 0.68cqw; width: 0.42cqw; height: 0.42cqw; border-radius: 50%; background: var(--a-coral); } /* CPHI: the Podcast tile carries the longest copy and Result the shortest, so widen one and narrow the other */ .a-ev2 .ev-strip { height: 16cqw; } .a-ev2 .ev-cols { top: 30cqw; } /* every photo in an event strip gets the same width */ .a-ev2 .ev-strip.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .a-ev2 .ev-strip.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* ============================================================ Website deck: the TrivarX proposal's layouts (~/arto-trivarx-proposal) in the ARTO system. Will picked that deck as the model. Same rules as the rest: Black / Light only, the five sizes, no blurred shadows (PDF), hairlines and spread-only rings instead. ============================================================ */ /* ---------- how we design websites: the site on a phone, ten points around it, logos in the corners ---------- */ .w-pt { position: absolute; z-index: 2; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); translate: -50% -50%; display: flex; flex-direction: column; align-items: center; gap: 0.35cqw; text-align: center; white-space: nowrap; } .w-pt b { font-size: var(--t-s); line-height: 1.15; color: #fff; } .w-pt span { font-size: var(--t-xs); line-height: 1.4; color: var(--a-soft); } /* centred with fixed numbers, not translate(-50%): Chrome's PDF writer resolved the percentage against the wrong height and dropped the phone 170px */ .w-phone { position: absolute; z-index: 1; left: 39.5cqw; top: 5.44cqw; width: 21cqw; padding: 0.6cqw; border-radius: 3.3cqw; break-inside: avoid; background: #0B0C10; box-shadow: inset 0 0 0 0.12cqw #34363E, 0 0 0 0.1cqw rgba(255, 255, 255, 0.10); } .w-phone .scr { position: relative; height: 44.17cqw; border-radius: 2.75cqw; overflow: hidden; background: #fff; } .w-phone video { position: absolute; top: 2.5cqw; left: 0; width: 100%; height: calc(100% - 2.5cqw - 6.3cqw); object-fit: cover; object-position: 50% 0; display: block; } .w-phone .status { position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 2.5cqw; display: flex; align-items: center; justify-content: space-between; padding: 0 1.7cqw 0 2.1cqw; background: linear-gradient(90deg, #41BD9B 0%, #66B3C3 100%); } /* continues the site's own announcement bar */ .w-phone .status b { font-size: 0.85cqw; color: #fff; letter-spacing: 0.02em; } .w-phone .island { position: absolute; top: 0.6cqw; left: 50%; width: 5cqw; height: 1.4cqw; transform: translateX(-50%); border-radius: 1cqw; background: #000; } .w-phone .batt { position: relative; width: 1.4cqw; height: 0.66cqw; border: 0.09cqw solid rgba(255, 255, 255, 0.9); border-radius: 0.2cqw; } .w-phone .batt::before { content: ""; position: absolute; inset: 0.09cqw; right: 0.3cqw; border-radius: 0.08cqw; background: #fff; } /* Safari's bottom toolbar, so the screen reads as a phone browser */ .w-phone .bar { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 6.3cqw; padding: 0.75cqw 0.9cqw 0; background: #1C1C1E; border-top: 0.06cqw solid rgba(255, 255, 255, 0.08); } .w-phone .url { display: flex; align-items: center; justify-content: space-between; height: 2.1cqw; padding: 0 0.85cqw; border-radius: 0.75cqw; background: #3A3A3C; color: #fff; } .w-phone .url svg { width: 0.85cqw; height: 0.85cqw; flex: none; } .w-phone .aa { font-size: 0.72cqw; font-weight: 900; } .w-phone .addr { display: flex; align-items: center; gap: 0.3cqw; font-size: 0.8cqw; } .w-phone .addr svg { width: 0.62cqw; height: 0.62cqw; color: rgba(255, 255, 255, 0.7); } .w-phone .tools { display: flex; justify-content: space-between; align-items: center; height: 2cqw; padding: 0 0.7cqw; margin-top: 0.35cqw; color: #4C9BFF; } .w-phone .tools svg { width: 1.05cqw; height: 1.05cqw; } .w-phone .tools svg:nth-child(2) { color: rgba(255, 255, 255, 0.3); } /* forward greyed out, as on a fresh page */ .w-phone .home { position: absolute; left: 50%; bottom: 0.45cqw; width: 6.2cqw; height: 0.24cqw; transform: translateX(-50%); border-radius: 1cqw; background: #fff; } .w-corner { position: absolute; z-index: 2; bottom: 4.6cqw; display: block; } .w-corner.l { left: 6.25cqw; height: 2.3cqw; } .w-corner.r { right: 6.25cqw; width: 9.5cqw; } .p .slide.is-active .w-phone { animation: p-rise 1200ms var(--spring) 80ms backwards; } .p .slide.is-active .w-pt { animation: p-pop 900ms var(--spring-pop) backwards; animation-delay: calc(260ms + var(--i) * 70ms); } .p .slide.is-active .w-corner { animation: p-fade 900ms var(--spring) 900ms backwards; } /* site recordings: plain rounded frames, a hairline edge; the concept gets the coral ring */ .w-frame { border-radius: 0.5cqw; overflow: hidden; background: #fff; box-shadow: 0 0 0 0.08cqw rgba(38, 47, 102, 0.16); } .w-frame video { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 0; } .w-frame.c { box-shadow: 0 0 0 0.22cqw var(--a-coral); } .w-lbl { font-size: var(--t-xs); font-weight: 900; color: rgba(38, 47, 102, 0.55); text-align: center; } .w-lbl.hi { color: var(--a-coral); } /* ---------- website concepts: each company's site today beside ARTO's concept, one white tube per company ---------- */ .w-ba { position: absolute; left: 6.25cqw; right: 6.25cqw; top: 14.4cqw; bottom: 4.4cqw; display: flex; flex-direction: column; justify-content: center; gap: 1cqw; } .w-ba .row { display: grid; grid-template-columns: 1fr 19.5cqw 29cqw; column-gap: 1.8cqw; align-items: center; padding: 0 1.5cqw 0 2.2cqw; } .w-ba .head { margin-bottom: -0.2cqw; } .w-ba .tube { background: #fff; border-radius: 2cqw; padding-top: 1.1cqw; padding-bottom: 1.1cqw; box-shadow: 0 0 0 0.08cqw rgba(38, 47, 102, 0.10); } .w-ba .name b { display: block; font-size: var(--t-m); line-height: 1.1; color: var(--a-navy); } .w-ba .name span { display: block; margin-top: 0.5cqw; max-width: 19cqw; font-size: var(--t-s); line-height: 1.35; color: var(--a-ink2); } .p .slide.is-active .w-ba .tube { animation: p-slide 950ms var(--spring) backwards; } .p .slide.is-active .w-ba .tube:nth-child(3) { animation-delay: 140ms; } /* ---------- Innovative Trials: before and after, the scores, then Eloise's note ---------- */ .w-it { position: absolute; left: 6.25cqw; right: 6.25cqw; top: 14.4cqw; bottom: 4.4cqw; display: grid; grid-template-columns: 53.5cqw 1fr; gap: 1.4cqw; } .w-it .left { display: flex; flex-direction: column; justify-content: space-between; gap: 1.2cqw; min-height: 0; } .w-it .ba { display: grid; grid-template-columns: 20.5cqw 1fr; column-gap: 1cqw; align-items: start; margin: auto 0; } .w-it .ba .w-lbl { margin-bottom: 0.6cqw; } .w-it .ba .w-frame video { aspect-ratio: 16 / 10; } .w-sc { position: relative; margin: 0; padding: 1.6cqw 2.2cqw 1.5cqw; border-radius: 1.35cqw; color: #fff; background: linear-gradient(135deg, #2E3978 0%, #232B5E 55%, #151A39 100%); } .w-sc .tag { position: absolute; top: 1.7cqw; right: 2.2cqw; font-size: var(--t-xs); font-weight: 900; color: var(--a-coral); } .w-sc figcaption b { display: block; font-size: var(--t-s); } .w-sc figcaption span { display: block; margin-top: 0.1cqw; font-size: var(--t-xs); color: var(--a-soft); } .w-sc ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.9cqw; margin-top: 1.1cqw; } .w-sc li em { display: block; white-space: nowrap; font-style: normal; font-size: var(--t-m); font-weight: 900; line-height: 1; letter-spacing: -0.02em; } .w-sc li em small { margin-left: 0.15cqw; font-size: var(--t-xs); font-weight: 300; letter-spacing: 0; color: var(--a-dim); } .w-sc li span { display: block; margin-top: 0.45cqw; font-size: var(--t-xs); color: var(--a-soft); } .w-sc li.hi em { color: var(--a-coral); } .w-sc li.hi span { color: #fff; font-weight: 900; } .w-q { margin: 0; display: flex; flex-direction: column; padding: 2.2cqw 2.4cqw 2cqw; border-radius: 1.35cqw; background: #fff; color: var(--a-navy); box-shadow: 0 0 0 0.08cqw rgba(38, 47, 102, 0.10); } .w-q .qm { width: 2cqw; display: block; fill: var(--a-coral); transform: rotate(180deg); } /* drawn as a closing quote, turned to open one */ .w-q blockquote { margin: 1cqw 0 0; } .w-q blockquote p { font-size: var(--t-xs); line-height: 1.65; color: var(--a-navy); } .w-q blockquote p + p { margin-top: 1.2cqw; } .w-q .nw { white-space: nowrap; } .w-q figcaption { margin-top: auto; padding-top: 1.2cqw; font-size: var(--t-xs); color: var(--a-ink2); } .w-q figcaption b { display: block; font-size: var(--t-s); color: var(--a-navy); } .p .slide.is-active .w-it .ba > div { animation: p-wipe 1100ms var(--spring) backwards; } .p .slide.is-active .w-it .ba > div + div { animation-delay: 140ms; } .p .slide.is-active .w-sc { animation: p-rise 1000ms var(--spring) 280ms backwards; } .p .slide.is-active .w-q { animation: p-rise 1000ms var(--spring) 380ms backwards; } /* ---------- what's included: the two packages, no prices ---------- */ .a-cards.w-pk { position: absolute; left: 6.25cqw; right: 6.25cqw; top: 14.4cqw; bottom: 4.4cqw; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: none; gap: 1.6cqw; } .w-pk .a-card { padding: 2.4cqw 2.8cqw; display: flex; flex-direction: column; } /* plain navy card on cream, coral ring on the video pack only (as in the TrivarX pricing slide) */ .w-pk .a-card { background: linear-gradient(160deg, #323D80 0%, #232B5E 55%, #1B2250 100%) padding-box, linear-gradient(160deg, #323D80 0%, #1B2250 100%) border-box; } .w-pk .a-card.hi { border-color: transparent; background: linear-gradient(160deg, #323D80 0%, #232B5E 55%, #1B2250 100%) padding-box, linear-gradient(var(--a-coral), var(--a-coral)) border-box; } .w-pk h3 { font-size: var(--t-m); line-height: 1.05; } .w-ticks { list-style: none; padding: 0; margin-top: 2.2cqw; display: flex; flex-direction: column; gap: 1.45cqw; } /* package prices, as on the TrivarX proposal (Will added them back 20 Oct 2026) */ .w-price { display: block; margin-top: 0.6cqw; font-size: var(--t-l); line-height: 1; letter-spacing: -0.01em; color: var(--a-coral); } .w-price + .w-ticks { margin-top: 1.8cqw; gap: 1.05cqw; } .w-ticks li { position: relative; padding-left: 2.1cqw; font-size: var(--t-s); line-height: 1.35; color: var(--a-soft); } .w-ticks li::before { content: ""; position: absolute; left: 0.35cqw; top: 0.15cqw; width: 0.5cqw; height: 0.95cqw; border: solid var(--a-coral); border-width: 0 0.2cqw 0.2cqw 0; transform: rotate(45deg); } .w-ticks li.all { color: #fff; font-weight: 900; } /* ============================================================ Services deck: the four services, on the same system ============================================================ */ /* trailer frames and photos: rounded, no frame; an optional square-cornered label */ .s-fr { position: relative; margin: 0; min-width: 0; min-height: 0; overflow: hidden; border-radius: 1.35cqw; } .s-fr img, .s-fr video { width: 100%; height: 100%; object-fit: cover; display: block; } .s-fr figcaption { position: absolute; left: 1cqw; bottom: 1cqw; padding: 0.3cqw 0.7cqw; font-size: var(--t-xs); font-weight: 900; color: #fff; background: var(--a-navy); } /* who we are: two trailer frames, then the four audience numbers */ .s-who { position: absolute; left: 6.25cqw; right: 6.25cqw; top: 14.4cqw; bottom: 4.4cqw; display: grid; grid-template-columns: 21.05cqw 21.05cqw minmax(0, 1fr); gap: 1cqw; } .s-who .stats { margin-left: 0.6cqw; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1cqw; } .s-stat { padding: 1.8cqw 2cqw; border-radius: 1.35cqw; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; background: linear-gradient(160deg, #323D80 0%, #232B5E 55%, #1B2250 100%); } .s-stat b { font-size: var(--t-xl); line-height: 1; letter-spacing: -0.02em; color: var(--a-coral); } .s-stat span { margin-top: 0.7cqw; font-size: var(--t-s); line-height: 1.4; color: var(--a-soft); } /* what we do: four cards, 24 Hours @ (the lead offer) ringed in coral */ .a-cards.s-four { grid-template-columns: repeat(4, minmax(0, 1fr)); } .a-cards .a-card.hi { background: linear-gradient(160deg, #323D80 0%, #232B5E 55%, #1B2250 100%) padding-box, linear-gradient(var(--a-coral), var(--a-coral)) border-box; } /* one service: three tiles on the left, the work on the right */ .s-svc { position: absolute; left: 6.25cqw; right: 6.25cqw; top: 14.4cqw; bottom: 4.4cqw; display: grid; grid-template-columns: minmax(0, 1fr) 43.1cqw; gap: 1.6cqw; } .s-svc .tiles { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 1cqw; min-height: 0; } .s-tile { padding: 1.4cqw 2cqw; border-radius: 1.35cqw; display: flex; flex-direction: column; justify-content: center; color: #fff; background: linear-gradient(160deg, #323D80 0%, #232B5E 55%, #1B2250 100%); } .p .stage:not(.cream) .s-tile, .p .stage:not(.cream) .s-stat { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); } .s-tile .k { font-size: var(--t-s); line-height: 1.3; color: var(--a-coral); } .s-tile h3 { margin-top: 0.3cqw; font-size: var(--t-m); line-height: 1.1; } .s-tile p { margin-top: 0.5cqw; font-size: var(--t-s); line-height: 1.4; color: var(--a-soft); } .p .stage .s-tile.res { box-shadow: inset 0 0 0 0.2cqw var(--a-coral); } .s-tile.res h3 { color: var(--a-coral); } .s-svc .media { display: grid; gap: 1cqw; min-height: 0; } .s-svc .media.two { grid-template-columns: 1fr 1fr; } /* two 9:16 trailer frames, full height */ .s-svc .media.vid { grid-template-columns: 1fr 1fr; grid-template-rows: auto minmax(0, 1fr); } /* a 16:9 video over two photos */ .s-svc .media.vid > .s-fr:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; } .p .slide.is-active .s-tile { animation: p-rise 950ms var(--spring) backwards; } .p .slide.is-active .s-tile:nth-child(2) { animation-delay: 120ms; } .p .slide.is-active .s-tile:nth-child(3) { animation-delay: 240ms; } .p .slide.is-active .s-svc .s-fr { animation: p-wipe 1100ms var(--spring) backwards; } .p .slide.is-active .s-svc .s-fr:nth-child(2) { animation-delay: 140ms; } .p .slide.is-active .s-svc .s-fr:nth-child(3) { animation-delay: 280ms; } .s-fr img { transition: scale 1100ms var(--spring); } .s-fr:hover img { scale: 1.03; } .a-cards .a-card .hd h3 { min-width: 0; } .a-cards .a-card .n { flex: none; } /* ============================================================ Podcast deck ============================================================ */ /* the shows: two show cards (trailer frame, logo, what it covers, hosts) beside the audience numbers */ .s-shows { position: absolute; left: 6.25cqw; right: 6.25cqw; top: 14.4cqw; bottom: 4.4cqw; display: grid; grid-template-columns: 1.25fr 1fr; gap: 1.6cqw; } .s-shows .cards { display: grid; grid-template-rows: 1fr 1fr; gap: 1cqw; min-height: 0; } .s-shows .stats { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1cqw; } .s-show { display: grid; grid-template-columns: 10.25cqw minmax(0, 1fr); border-radius: 1.35cqw; overflow: hidden; color: #fff; min-height: 0; background: linear-gradient(160deg, #323D80 0%, #232B5E 55%, #1B2250 100%); } .s-show .fr { width: 100%; height: 100%; object-fit: cover; display: block; } .s-show .tx { padding: 1.8cqw 2.2cqw; display: flex; flex-direction: column; justify-content: center; } .s-show .lg { height: 4.2cqw; width: auto; align-self: flex-start; } .s-show .lg.lb { height: 3.2cqw; } .s-show p { margin-top: 1cqw; font-size: var(--t-s); line-height: 1.4; color: var(--a-soft); } .s-show p.host { margin-top: 0.8cqw; color: var(--a-dim); } .s-show p.host b { color: #fff; } /* three clips: the clips centred, four points either side (the TrivarX phone-slide pattern) */ .s-clips { position: absolute; left: 23.5cqw; top: 17.6cqw; display: grid; grid-template-columns: repeat(3, 17cqw); gap: 1cqw; } .s-clips .s-fr { aspect-ratio: 9 / 16; } .p .slide.is-active .s-clips .s-fr { animation: p-pop 1000ms var(--spring-pop) backwards; animation-delay: calc(200ms + var(--k, 0) * 120ms); } .s-clips .s-fr:nth-child(2) { --k: 1; } .s-clips .s-fr:nth-child(3) { --k: 2; } /* the launch: five numbered steps, and a clip playing on a phone */ .s-steps { position: absolute; left: 6.25cqw; width: 54cqw; top: 15.2cqw; list-style: none; padding: 0; display: grid; gap: 1.5cqw; } .s-steps li { display: grid; grid-template-columns: 4cqw minmax(0, 1fr); align-items: baseline; padding-bottom: 1.5cqw; border-bottom: 1px solid var(--a-rule); } .s-steps li:last-child { border-bottom: 0; padding-bottom: 0; } .s-steps b { font-size: var(--t-s); color: var(--a-coral); } .s-steps h3 { font-size: var(--t-m); line-height: 1.1; } .s-steps p { margin-top: 0.35cqw; font-size: var(--t-s); line-height: 1.4; color: var(--a-soft); } .s-steps li.hi h3 { color: var(--a-coral); } .p .slide.is-active .s-steps li { animation: p-rise 950ms var(--spring) backwards; animation-delay: calc(200ms + var(--i, 0) * 110ms); } .s-steps li:nth-child(2) { --i: 1; } .s-steps li:nth-child(3) { --i: 2; } .s-steps li:nth-child(4) { --i: 3; } .s-steps li:nth-child(5) { --i: 4; } .w-phone.s-ph { left: 70.5cqw; top: 13.6cqw; width: 17.5cqw; border-radius: 2.8cqw; } .w-phone.s-ph .scr { height: 36.6cqw; border-radius: 2.3cqw; background: #000; } .w-phone.app .status { background: #000; } .w-phone.app video { height: calc(100% - 2.5cqw); } /* results: one image, the case-study sheet at its own shape */ .s-svc .media.one, .s-svc .media.sheet { grid-template-rows: minmax(0, 1fr); } .s-svc .media.sheet { align-content: center; } .s-svc .media.sheet .s-fr { aspect-ratio: 2573 / 1818; border-radius: 0.6cqw; } .s-svc .media.sheet .s-fr img { object-fit: contain; } /* type-only cover (20 Oct 2026, Will): no photo and no coral divider, the headline across the slide */ .a-cover2.txt::after { content: none; } .a-cover2.txt h1 { width: 80cqw; } /* ---------- how we partner (v3): a funnel, after Will's SciRhom content-funnel slide. Four bands narrowing on one continuous slope (0.2cqw in per cqw down), the last one coral; the audience numbers in a white card beside it. Band h = 8.36cqw, pitch 9.16cqw. ---------- */ .f-fun { position: absolute; left: 6.25cqw; width: 60cqw; top: 16cqw; bottom: 4.4cqw; margin: 0; padding: 0; list-style: none; display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 0.8cqw; } .f-band { --a: calc(var(--k) * 1.832cqw); --b: calc(var(--k) * 1.832cqw + 1.672cqw); clip-path: polygon(var(--a) 0, calc(100% - var(--a)) 0, calc(100% - var(--b)) 100%, var(--b) 100%); padding: 0 calc(var(--b) + 2cqw) 0 calc(var(--b) + 1.6cqw); display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.8cqw; color: #fff; background: linear-gradient(135deg, #2E3978 0%, #232B5E 100%); min-height: 0; } .f-band .ph { height: 6.2cqw; width: 10.4cqw; object-fit: cover; border-radius: 0.7cqw; display: block; } .f-band h3 { font-size: var(--t-m); line-height: 1.1; } .f-band h3 .n { margin-right: 0.7cqw; color: var(--a-coral); } .f-band p { margin-top: 0.35cqw; font-size: var(--t-s); line-height: 1.4; color: var(--a-soft); } .f-band p em { font-style: normal; color: var(--a-coral); } .f-band.last { background: var(--a-coral); } .f-band.last h3 .n, .f-band.last p, .f-band.last p em { color: #fff; } .f-band.last p em { font-weight: 900; } .f-band .lg { display: flex; align-items: center; gap: 1.2cqw; } .f-band .lg img { height: 4.2cqw; width: auto; display: block; } .f-band .lg img + img { height: 3.3cqw; } .f-card { position: absolute; left: 68.75cqw; right: 6.25cqw; top: 16cqw; bottom: 4.4cqw; display: flex; flex-direction: column; padding: 2.4cqw; border-radius: 1.35cqw; background: #fff; color: var(--a-navy); box-shadow: 0 0 0 0.08cqw rgba(38, 47, 102, 0.10); } .f-card .k { font-size: var(--t-s); color: var(--a-coral); } .f-stats { margin-top: 1.4cqw; display: grid; gap: 1.6cqw; } .f-stats b { display: block; font-size: var(--t-l); line-height: 1; letter-spacing: -0.01em; font-variant-numeric: lining-nums proportional-nums; } .f-stats span { display: block; margin-top: 0.3cqw; font-size: var(--t-s); color: var(--a-ink2); } .f-pf { margin-top: auto; display: flex; gap: 0.8cqw; align-items: center; } .f-pf img { height: 2.2cqw; width: auto; display: block; } .f-pf img.yt { height: 1.9cqw; } .p .slide.is-active .f-band { animation: p-slide 950ms var(--spring) backwards; animation-delay: calc(200ms + var(--k) * 130ms); } .p .slide.is-active .f-card { animation: p-rise 1000ms var(--spring) 600ms backwards; } /* ---------- website deck: our tool suite, two cards of app-style icons (after Will's Innovative Trials "Creative Tool Suite" slide). Logos: Claude, ChatGPT, GitHub from the vector set bundled in Wispr Flow; Astro, Cloudflare, GSAP, Kling from each brand's own site; Weavy from Will's weavy.png; Vercel's triangle drawn inline. ---------- */ .a-cards.t-suite { grid-template-columns: 1fr 1.4fr; grid-template-rows: none; } .t-suite .a-card { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2.4cqw; } .t-suite h3 { font-size: var(--t-m); line-height: 1.1; text-align: center; } .t-grid { margin-top: 2.8cqw; display: flex; flex-wrap: wrap; justify-content: center; gap: 2cqw 2.4cqw; } .t-grid.two { max-width: calc(2 * 8.4cqw + 2.4cqw); } .t-grid.three { max-width: calc(3 * 8.4cqw + 2 * 2.4cqw); } .t-ic { margin: 0; width: 8.4cqw; display: flex; flex-direction: column; align-items: center; } .t-ic .sq { width: 7.2cqw; height: 7.2cqw; border-radius: 1.6cqw; background: #fff; display: grid; place-items: center; overflow: hidden; } .t-ic .sq img, .t-ic .sq svg { width: 58%; height: auto; display: block; } .t-ic .sq.dk { background: #0E100F; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); } .t-ic .sq.full img { width: 100%; height: 100%; object-fit: cover; } .t-ic .sq.astro img { width: 42%; } .t-ic .sq.gsap img { width: 70%; } .t-ic .sq.vercel svg { width: 50%; margin-top: -0.3cqw; } .t-ic .sq.cf img { width: 74%; } .t-ic figcaption { margin-top: 0.8cqw; font-size: var(--t-xs); color: var(--a-soft); } .p .slide.is-active .t-ic { animation: p-pop 800ms var(--spring-pop) backwards; animation-delay: calc(300ms + var(--i) * 60ms); } .t-ic .sq { transition: scale 600ms var(--spring-pop); } .t-ic:hover .sq { scale: 1.06; } /* tool suite (v2): Will's own slide is the model. Two equal cards, bigger icons packed tight, no names under them (the icon gives it away). */ .a-cards.t-suite { grid-template-columns: 1fr 1fr; } .t-suite h3 { font-size: var(--t-l); } .t-grid { margin-top: 2.6cqw; gap: 0.8cqw; display: grid; justify-content: center; } .t-grid.two { grid-template-columns: repeat(2, 9.6cqw); max-width: none; } .t-grid.three { grid-template-columns: repeat(3, 9.6cqw); max-width: none; } .t-ic { width: 9.6cqw; height: 9.6cqw; border-radius: 2cqw; background: #fff; display: grid; place-items: center; overflow: hidden; } .t-ic img, .t-ic svg { width: 58%; height: auto; display: block; } .t-ic.dk { background: #0E100F; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); } .t-ic.full img { width: 100%; height: 100%; object-fit: cover; } .t-ic.astro img { width: 42%; } .t-ic.gsap img { width: 72%; } .t-ic.vercel svg { width: 50%; margin-top: -0.4cqw; } .t-ic.cf img { width: 76%; } .t-ic { transition: scale 600ms var(--spring-pop); } .t-ic:hover { scale: 1.05; } .t-ic.lh img { width: 66%; } .a-close2 .cap a { color: inherit; text-decoration: none; } /* phone slide (website deck): the TrivarX homepage, shown as a concept (it is not their live site) */ .w-phone.dk .scr, .w-phone.dk .status { background: #121214; } .w-corner.w-cl { height: auto; display: flex; align-items: center; gap: 1.2cqw; } .w-cl img { height: 2.1cqw; width: auto; display: block; } .w-cl span { padding-left: 1.2cqw; border-left: 1px solid var(--a-rule); font-size: var(--t-s); line-height: 2.1cqw; color: var(--a-coral); } /* ============================================================ Video campaign deck (video.html), after the Innovative Trials Academy podcast and the SciRhom content funnel. Reuses the tool-suite, funnel, case-study and package components. ============================================================ */ /* tool suite: Will's own Innovative Trials icons; app icons fill their tile, bare glyphs sit on white */ .t-suite-v .t-grid { grid-template-columns: repeat(3, 8.2cqw); gap: 0.7cqw; } .t-suite-v .t-ic { width: 8.2cqw; height: 8.2cqw; border-radius: 1.8cqw; } .t-suite-v .t-ic.full { background: transparent; } .t-suite-v .t-ic.gl img { width: 66%; } .t-suite-v .t-ic.gl.wide img { width: 78%; } /* funnel band 03: four clip thumbnails instead of one photo */ .f-band .clips { display: flex; gap: 0.4cqw; } .f-band .clips img { height: 6.2cqw; width: 3.5cqw; object-fit: cover; border-radius: 0.5cqw; display: block; } /* the last band has no picture */ .f-band.last { grid-template-columns: minmax(0, 1fr); padding-left: calc(var(--b) + 3cqw); } /* the end-to-end card */ .v-card h3 { margin-top: 0.8cqw; font-size: var(--t-m); line-height: 1.15; color: var(--a-navy); } .v-list { margin-top: 1.6cqw; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0.7cqw 1cqw; } .v-list li { position: relative; padding-left: 1cqw; font-size: var(--t-s); color: var(--a-ink2); } .v-list li::before { content: ""; position: absolute; left: 0; top: 0.75cqw; width: 0.42cqw; height: 0.42cqw; border-radius: 50%; background: var(--a-coral); } .v-logo { margin-top: auto; height: 2.6cqw; width: auto; align-self: flex-start; } /* case study: the trailer over the scores (dashed until Will sends the trailer file) */ .v-it .left { justify-content: space-between; } .v-trailer { flex: 1; min-height: 0; margin-bottom: 1.2cqw; border-radius: 1.35cqw; overflow: hidden; display: grid; place-items: center; } .v-trailer:has(> span) { border: 0.15cqw dashed rgba(38, 47, 102, 0.35); } .v-trailer > span { font-size: var(--t-s); color: var(--a-ink2); } .v-trailer video { width: 100%; height: 100%; object-fit: cover; display: block; } /* packages: three cards, the monthly price left for Will */ .a-cards.w-pk.v-pk { grid-template-columns: repeat(3, minmax(0, 1fr)); bottom: 7.4cqw; } .v-pk .a-card { padding: 2.2cqw 2.2cqw; } .v-pk .w-ticks li { font-size: var(--t-s); } .v-pk .w-price + .w-ticks { gap: 0.85cqw; } .w-price.tbc { align-self: flex-start; padding: 0.2cqw 0.6cqw; border: 0.15cqw dashed var(--a-coral); font-size: var(--t-m); } .v-src { bottom: 4.2cqw; } .cream .v-src { color: var(--a-ink2); } .t-suite-v .a-card { justify-content: flex-start; padding-top: 3.4cqw; } .v-it .w-q blockquote p { font-size: var(--t-s); line-height: 1.55; } .v-pk .w-price + .w-ticks { gap: 0.75cqw; } .t-suite-v .a-card { padding-top: 2.6cqw; } .t-suite-v .t-grid { margin-top: 2cqw; grid-template-columns: repeat(3, 7.4cqw); } .t-suite-v .t-ic { width: 7.4cqw; height: 7.4cqw; border-radius: 1.6cqw; } /* podcast deck, the shows (v2): two tiles side by side, each show's own trailer playing full height on the left, what the show is for on the right. No numbers here: they have their own slide. */ .s-shows2 { position: absolute; left: 6.25cqw; right: 6.25cqw; top: 14.4cqw; bottom: 4.4cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqw; } .s-show2 { display: grid; grid-template-columns: 19.6cqw minmax(0, 1fr); border-radius: 1.35cqw; overflow: hidden; min-height: 0; color: #fff; background: linear-gradient(160deg, #323D80 0%, #232B5E 55%, #1B2250 100%); } .s-show2 .vid { margin: 0; min-height: 0; } .s-show2 .vid video { width: 100%; height: 100%; object-fit: cover; display: block; } .s-show2 .tx { padding: 2.2cqw 2.2cqw 2cqw; display: flex; flex-direction: column; min-width: 0; } .s-show2 .lg { height: 3.8cqw; width: auto; align-self: flex-start; } .s-show2 .lg.lb { height: 3cqw; } /* shows slide: the show's name is the heading, its logo sits small in the bottom-right corner */ .s-show2 h3.show-name { font-size: var(--t-m); font-weight: 900; line-height: 1.05; } .s-show2 .lg.corner { margin-top: auto; height: 2.6cqw; align-self: flex-end; } .s-show2 .lg.lb.corner { height: 2.1cqw; } .s-show2 p { margin-top: 0.9cqw; font-size: var(--t-s); line-height: 1.42; color: var(--a-soft); } .s-show2 p.tag { margin-top: 1.2cqw; color: #fff; } /* the audience: four numbers in a row, the platforms underneath */ .s-aud { position: absolute; left: 6.25cqw; right: 6.25cqw; top: 15.4cqw; height: 24cqw; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6cqw; } .s-aud .s-stat { padding: 2.4cqw 2.2cqw; } .s-aud .s-stat b { font-size: var(--t-xl); } .s-pf { position: absolute; left: 6.25cqw; bottom: 6.2cqw; display: flex; gap: 1cqw; align-items: center; } .s-pf img { height: 3.4cqw; width: auto; display: block; } .s-pf img.yt { height: 2.9cqw; } .a-title.wide { width: 82cqw; } /* podcast deck (v3) --------------------------------------------------------------- how it works: four stages, words only */ .a-cards.hw4 { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: none; gap: 2.4cqw; top: 16.4cqw; bottom: 9cqw; } .hw4 .hw-card { padding: 2.4cqw 2.2cqw; display: flex; flex-direction: column; } .hw-n { font-size: var(--t-xl); font-weight: 900; line-height: 1; color: var(--a-coral); } .hw4 h3 { margin-top: 1.6cqw; font-size: var(--t-m); line-height: 1.05; } .hw4 p { margin-top: 0.7cqw; font-size: var(--t-s); line-height: 1.45; color: var(--a-soft); } .hw4 p.tag { margin-top: 0.4cqw; color: var(--a-coral); } .hw-ar { position: absolute; top: calc(50% - 0.55cqw); left: calc((100% - 3 * 2.4cqw) / 4 * var(--k) + 2.4cqw * (var(--k) - 1) + 0.65cqw); width: 1.1cqw; height: 1.1cqw; border-top: 0.22cqw solid var(--a-coral); border-right: 0.22cqw solid var(--a-coral); transform: rotate(45deg); } /* the full-screen trailer (from the ASM deck): plays with sound, a coral play button if the browser blocks it */ .p .slide-feature .stage { background: #000; } .feature-v { width: 100%; height: 100%; object-fit: cover; display: block; } .feature-play { position: absolute; inset: 0; margin: auto; width: 9cqw; height: 9cqw; padding: 0; z-index: 4; display: none; place-items: center; border: none; border-radius: 50%; background: var(--a-coral); color: #fff; cursor: pointer; transition: transform 160ms ease; } .needs-play .feature-play { display: grid; } .feature-play:hover { transform: scale(1.06); } .feature-play svg { width: 4cqw; height: 4cqw; margin-left: 0.5cqw; } /* what our guests say: the guest's own trailer beside their feedback */ .g-fb { position: absolute; left: 6.25cqw; right: 6.25cqw; top: 14.4cqw; bottom: 4.4cqw; display: grid; grid-template-columns: 21.07cqw minmax(0, 1fr); gap: 1.6cqw; } .g-fb .vid { margin: 0; border-radius: 1.35cqw; overflow: hidden; min-height: 0; } .g-fb .vid video { width: 100%; height: 100%; object-fit: cover; display: block; } .g-fb .right { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 1.2cqw; min-height: 0; } .g-q blockquote p { font-size: var(--t-m); line-height: 1.35; font-weight: 300; } .g-ask { margin: 0; padding: 1.8cqw 2.4cqw; border-radius: 1.35cqw; color: #fff; background: linear-gradient(135deg, #2E3978 0%, #232B5E 55%, #151A39 100%); } .g-ask .tag { font-size: var(--t-s); color: var(--a-coral); } .g-ask .ans { margin-top: 0.5cqw; font-size: var(--t-s); color: var(--a-soft); } /* case study: the measured sheet, large */ .g-cs { position: absolute; left: 6.25cqw; right: 6.25cqw; top: 14.4cqw; bottom: 4.4cqw; margin: 0; display: grid; place-items: center; } .g-cs img { max-width: 100%; max-height: 100%; border-radius: 0.6cqw; box-shadow: 0 0 0 0.08cqw rgba(38, 47, 102, 0.12); display: block; } .g-cs img { height: 100%; width: auto; max-width: 100%; object-fit: contain; } .g-cs { display: flex; align-items: center; justify-content: center; } .g-cs img { height: auto; width: auto; max-height: 100%; max-width: 100%; } /* podcast deck: case studies, the best episode from each show (measured YouTube figures) */ .s-shows2.cs-two { bottom: 6.6cqw; } .cs-card h3 { margin-top: 1.8cqw; font-size: var(--t-m); line-height: 1.1; } .cs-card p.org { margin-top: 0.4cqw; color: var(--a-soft); } .cs-stats { margin-top: auto; display: grid; gap: 1cqw; padding-top: 1.2cqw; border-top: 1px solid var(--a-rule); } .cs-stats div { display: flex; align-items: baseline; gap: 1cqw; } .cs-stats b { min-width: 8.4cqw; font-size: var(--t-l); line-height: 1; color: var(--a-coral); font-variant-numeric: lining-nums proportional-nums; } .cs-stats span { font-size: var(--t-s); color: var(--a-soft); } .cream .a-src { bottom: 3.4cqw; } .cs-stats b { min-width: 10.6cqw; } /* case studies: the show name as a small label, logo bottom right like the shows slide; one line per figure */ .cs-card .cs-show { margin: 0; font-size: var(--t-s); color: var(--a-coral); } .cs-card h3 { margin-top: 0.5cqw; } .cs-card .cs-stats { margin-top: auto; } .cs-card .lg.corner { margin-top: 1.4cqw; } .cs-stats span { white-space: nowrap; } .cs-stats b { min-width: 0; width: 9.2cqw; flex: none; } /* figures stacked: number, then its label underneath, three across */ .cs-card .cs-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8cqw; } .cs-stats div { display: block; } .cs-stats b { display: block; width: auto; font-size: var(--t-m); } .cs-stats span { display: block; margin-top: 0.35cqw; white-space: normal; font-size: var(--t-xs); } /* figures (final): one per row, big number then its label on one line */ .cs-card .cs-stats { grid-template-columns: 1fr; gap: 1.1cqw; } .cs-stats div { display: grid; grid-template-columns: 9.4cqw minmax(0, 1fr); align-items: baseline; column-gap: 0.8cqw; } .cs-stats b { font-size: var(--t-l); } .cs-stats span { margin-top: 0; white-space: nowrap; font-size: var(--t-s); } /* give the figures room: a narrower trailer column on the case-study cards */ .s-show2.cs-card { grid-template-columns: 16cqw minmax(0, 1fr); } .cs-stats div { grid-template-columns: 10.6cqw minmax(0, 1fr); } /* our audience (v2): a light slide, eight navy tiles in two rows; the rankings and award carry their source */ .s-aud.aud8 { top: 15.4cqw; height: auto; bottom: 4.4cqw; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 1.4cqw 1.6cqw; } .aud8 .aud-t { padding: 2cqw 2.2cqw; justify-content: flex-start; } .aud8 .aud-t b { font-size: var(--t-l); line-height: 1; letter-spacing: -0.01em; font-variant-numeric: lining-nums proportional-nums; } .aud8 .aud-t span { margin-top: 0.8cqw; font-size: var(--t-s); line-height: 1.35; color: var(--a-soft); } .aud8 .aud-t i { margin-top: auto; padding-top: 0.8cqw; font-style: normal; font-size: var(--t-xs); color: var(--a-dim); } .aud8 .aud-pf { margin-top: auto; display: flex; gap: 0.7cqw; align-items: center; } .aud8 .aud-pf img { height: 2.2cqw; width: auto; display: block; } .aud8 .aud-pf img.yt { height: 1.9cqw; } .aud8 .aud-t .aud-pf { margin-top: auto; } /* our audience (v3): the figure big and white at the top, the label and its source logo at the bottom; the two Goodpods rankings never sit side by side */ .aud8 .aud-t { justify-content: space-between; padding: 2.2cqw 2.2cqw 2cqw; } .aud8 .aud-t > b { font-size: var(--t-xl); line-height: 0.95; color: #fff; letter-spacing: -0.02em; } .aud8 .aud-t.word > b { font-size: var(--t-l); line-height: 1.2; } .aud8 .aud-t .ft { display: flex; flex-direction: column; gap: 1cqw; } .aud8 .aud-t .ft span { margin-top: 0; font-size: var(--t-s); line-height: 1.35; color: var(--a-soft); } .aud8 .aud-t .ft .lg { display: block; width: auto; align-self: flex-start; } .aud8 .aud-t .ft .lg.gp { height: 2.3cqw; } .aud8 .aud-t .ft .lg.hpa { height: 2.9cqw; } .aud8 .aud-t .ft .aud-pf { margin-top: 0; } /* how it works: each chevron centred in its gap. The gap is 2.4cqw; a 1.1cqw box with two borders turned 45deg shows a chevron from its centre to 0.78cqw right of it, so the box sits 0.39cqw left of the gap centre. */ .hw-ar { left: calc((100% - 3 * 2.4cqw) / 4 * var(--k) + 2.4cqw * (var(--k) - 0.5) - 0.55cqw - 0.26cqw); } /* our audience (v4): square tiles, the grid sized from the height left under the title */ .s-aud.aud8 { top: 13.8cqw; bottom: auto; right: auto; --sq: 19cqw; grid-template-columns: repeat(4, var(--sq)); grid-template-rows: repeat(2, var(--sq)); gap: 1.2cqw; } /* how it works (v2, "our tried and tested process"): big white step numbers, no coral taglines */ .hw-n { font-size: 6.4cqw; line-height: 0.9; color: #fff; letter-spacing: -0.02em; } /* off the type scale on purpose: Will asked for them larger */ .hw4 h3 { margin-top: 2.2cqw; } .hw4 p { margin-top: 0.9cqw; } /* audience grid centred across the slide (Will, 21 Oct 2026) */ .s-aud.aud8 { left: 0; right: 0; margin: 0 auto; width: calc(4 * var(--sq) + 3 * 1.2cqw); } /* our audience (v5): ten square tiles, five across, centred; CPHI Milan partnership and 1M+ YouTube views added */ .s-aud.aud8.aud10 { --sq: 16.4cqw; grid-template-columns: repeat(5, var(--sq)); width: calc(5 * var(--sq) + 4 * 1.2cqw); top: 14.6cqw; } .aud10 .aud-t { padding: 1.7cqw 1.7cqw 1.6cqw; } .aud10 .aud-t > b { font-size: 4.2cqw; } .aud10 .aud-t.word > b { font-size: 2.9cqw; } .aud10 .aud-t .ft { gap: 0.8cqw; } .aud10 .aud-t .ft span { font-size: 1.25cqw; } .aud10 .aud-t .ft .lg.gp { height: 2cqw; } .aud10 .aud-t .ft .lg.hpa { height: 2.5cqw; } .aud10 .aud-t .ft .lg.cphi { height: 3.4cqw; } .aud10 .aud-pf img { height: 1.9cqw; } .aud10 .aud-pf img.yt { height: 1.6cqw; } .s-aud.aud8.aud10 { top: 16cqw; } .hw4 p { text-wrap: balance; } /* ---------- the launch (v2): a journey, after the "buyer's journey" slide Will shared. Your episode at the top branches to the five stages; your trailer is the highlighted path; a band; where each stage runs. Five columns, card width W = (87.5 - 4 * 1.6) / 5 = 16.22cqw; column centres 14.36 / 32.18 / 50 / 67.82 / 85.64. ---------- */ .lj { position: absolute; inset: 0; --w: 16.22cqw; --g: 1.6cqw; --cx: calc(6.25cqw + var(--w) / 2 + var(--k, 0) * (var(--w) + var(--g))); } .lj > * { position: absolute; } .lj-node { left: calc(50cqw - 1.7cqw); top: 13.4cqw; width: 3.4cqw; height: 3.4cqw; border-radius: 50%; background: #fff; color: var(--a-navy); display: grid; place-items: center; z-index: 2; } .lj-node svg { width: 1.6cqw; height: 1.6cqw; margin-left: 0.2cqw; } .lj-node-l { left: calc(50cqw + 2.6cqw); top: 14.2cqw; font-size: var(--t-s); font-style: italic; color: var(--a-soft); } /* lines: grey hairlines, the trailer's path in coral */ .lj-stem { left: calc(50cqw - 0.06cqw); top: 16.8cqw; width: 0.12cqw; height: 1.6cqw; background: var(--a-coral); } .lj-rail { left: 14.36cqw; width: calc(85.64cqw - 14.36cqw); top: 18.4cqw; height: 0.12cqw; background: rgba(255, 255, 255, 0.28); } .lj-hl { left: 32.18cqw; width: calc(50cqw - 32.18cqw); top: 18.34cqw; height: 0.24cqw; background: var(--a-coral); } .lj-drop { left: calc(var(--cx) - 0.06cqw); top: 18.4cqw; width: 0.12cqw; height: 1.6cqw; background: rgba(255, 255, 255, 0.28); } .lj-drop[style*="--k:1"] { background: var(--a-coral); width: 0.24cqw; left: calc(var(--cx) - 0.12cqw); } .lj-stem { width: 0.24cqw; left: calc(50cqw - 0.12cqw); } /* the five cards: a picture, then the stage */ .lj-card { left: calc(var(--cx) - var(--w) / 2); width: var(--w); top: 20cqw; margin: 0; } .lj-card .vis { display: block; height: 10.2cqw; border-radius: 1cqw; overflow: hidden; background: #1B2250; box-shadow: 0 0 0 0.1cqw rgba(255, 255, 255, 0.16); } .lj-card .vis > img { width: 100%; height: 100%; object-fit: cover; display: block; } .lj-card.hi .vis { box-shadow: 0 0 0 0.24cqw var(--a-coral); } .lj-card figcaption { margin-top: 1.1cqw; text-align: center; font-size: var(--t-s); line-height: 1.3; font-weight: 900; color: #fff; } .lj-card figcaption b { display: block; font-size: var(--t-xs); color: var(--a-coral); margin-bottom: 0.2cqw; } .lj-card.hi figcaption { color: var(--a-coral); } .lj-card .clips3 { display: flex; height: 100%; gap: 0.25cqw; } .lj-card .clips3 img { flex: 1; min-width: 0; height: 100%; object-fit: cover; display: block; } .lj-card .paid { display: flex; height: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 0.9cqw; background: linear-gradient(135deg, #2E3978 0%, #1B2250 100%); } .lj-card .paid .ic img { height: 2.6cqw; } .lj-card .paid .ic img.yt { height: 2.2cqw; } .lj-card .paid b { font-size: var(--t-xs); letter-spacing: 0.04em; color: #fff; padding: 0.25cqw 0.7cqw; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 0.3cqw; } /* dashed drops through the band */ .lj-dash { left: calc(var(--cx) - 0.05cqw); width: 0; border-left: 0.1cqw dashed rgba(255, 255, 255, 0.3); } .lj-dash.a { top: 34.6cqw; height: 1.6cqw; } .lj-dash.b { top: 39.8cqw; height: 1.4cqw; } .lj-band { left: 6.25cqw; right: 6.25cqw; top: 36.2cqw; height: 3.6cqw; border-radius: 0.8cqw; background: #fff; color: var(--a-navy); display: grid; place-items: center; font-size: var(--t-s); font-weight: 900; z-index: 1; } /* where each stage runs */ .lj-tile { left: calc(var(--cx) - var(--w) / 2); width: var(--w); top: 41.2cqw; height: 9.6cqw; border-radius: 1cqw; padding: 1.4cqw 1cqw; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9cqw; text-align: center; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); } .lj-tile .ic { display: flex; gap: 0.6cqw; align-items: center; } .lj-tile .ic img { height: 2.2cqw; width: auto; display: block; } .lj-tile .ic img.yt { height: 1.9cqw; } .lj-tile > span:last-child { font-size: var(--t-xs); line-height: 1.35; color: var(--a-soft); } .p .slide.is-active .lj-card, .p .slide.is-active .lj-tile { animation: p-rise 950ms var(--spring) backwards; animation-delay: calc(250ms + var(--k) * 110ms); } .p .slide.is-active .lj-node { animation: p-pop 900ms var(--spring-pop) 80ms backwards; } .p .slide.is-active .lj-band { animation: p-fade 900ms var(--spring) 700ms backwards; } /* --cx has to be worked out on each element, where its own --k is set */ .lj-card, .lj-tile, .lj-drop, .lj-dash { --cx: calc(6.25cqw + var(--w) / 2 + var(--k) * (var(--w) + var(--g))); } .lj-tile > span:last-child { white-space: nowrap; } /* ---------- the launch (v3): a release schedule. Rows are what goes out, columns are time (launch day, weeks 1 to 3, after), bars show when each runs. Timings from the Podcasting Bible: trailer on the guest's account first, two weeks organic, a one-week paid flight, then the results. ---------- */ .tl { position: absolute; left: 6.25cqw; right: 6.25cqw; top: 15.6cqw; bottom: 4.4cqw; --lab: 25cqw; --col: calc((87.5cqw - var(--lab)) / 5); } .tl-phase, .tl-cols { position: absolute; left: var(--lab); right: 0; } .tl-phase { top: 0; height: 2.4cqw; } .tl-phase span { position: absolute; left: calc(var(--a) * var(--col) + 0.4cqw); width: calc((var(--b) - var(--a)) * var(--col) - 0.8cqw); top: 0; height: 2cqw; border-top: 0.16cqw solid rgba(255, 255, 255, 0.5); padding-top: 0.4cqw; text-align: center; font-size: var(--t-xs); color: var(--a-soft); } .tl-phase span.paid { border-top-color: var(--a-coral); color: var(--a-coral); } .tl-cols { top: 2.6cqw; height: 2.6cqw; display: grid; grid-template-columns: repeat(5, 1fr); } .tl-cols span { font-size: var(--t-s); font-weight: 900; text-align: center; } /* vertical hairlines behind the rows */ .tl::before { content: ""; position: absolute; left: var(--lab); right: 0; top: 5.6cqw; bottom: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px var(--col)); } .tl::after { content: ""; position: absolute; right: 0; top: 5.6cqw; bottom: 0; width: 1px; background: rgba(255, 255, 255, 0.12); } .tl-row { position: absolute; left: 0; right: 0; top: calc(5.6cqw + var(--r) * 5.6cqw); height: 5.6cqw; border-top: 1px solid rgba(255, 255, 255, 0.10); } .tl-row:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.10); } .tl-lab { position: absolute; left: 0; width: calc(var(--lab) - 1.6cqw); top: 0; bottom: 0; display: flex; align-items: center; gap: 1cqw; } .tl-lab .ic { display: flex; gap: 0.35cqw; flex: none; width: 6.2cqw; } .tl-lab .ic img { height: 1.8cqw; width: auto; display: block; } .tl-lab .ic img.yt { height: 1.55cqw; align-self: center; } .tl-lab b { display: block; font-size: var(--t-s); line-height: 1.2; } .tl-lab span { display: block; margin-top: 0.15cqw; font-size: var(--t-xs); line-height: 1.3; color: var(--a-soft); } .tl-row:not(:has(.ic)) .tl-lab > div { margin-left: 7.2cqw; } /* the bars */ .tl-bar { position: absolute; left: calc(var(--lab) + var(--a) * var(--col) + 0.5cqw); width: calc((var(--b) - var(--a)) * var(--col) - 1cqw); top: 1.7cqw; height: 2.2cqw; border-radius: 1.1cqw; font-style: normal; font-size: var(--t-xs); font-weight: 900; line-height: 2.2cqw; padding: 0 1cqw; white-space: nowrap; } .tl-bar.org { background: rgba(255, 255, 255, 0.85); } .tl-bar.live { background: linear-gradient(90deg, #fff 0%, #fff 80%, rgba(255, 255, 255, 0.25) 100%); color: var(--a-navy); } .tl-bar.first, .tl-bar.paid { background: var(--a-coral); color: #fff; } .tl-bar.first { min-width: 5cqw; } .tl-bar.res { left: calc(var(--lab) + 4.5 * var(--col) - 1.1cqw); width: 2.2cqw; padding: 0; background: #fff; } .tl-bar.res::after { content: ""; position: absolute; left: 0.72cqw; top: 0.45cqw; width: 0.55cqw; height: 1cqw; border: solid var(--a-navy); border-width: 0 0.2cqw 0.2cqw 0; transform: rotate(45deg); } .p .slide.is-active .tl-row { animation: p-rise 900ms var(--spring) backwards; animation-delay: calc(200ms + var(--r) * 90ms); } .p .slide.is-active .tl-bar { animation: tl-grow 900ms var(--spring) backwards; animation-delay: calc(450ms + var(--r) * 110ms); transform-origin: left center; } @keyframes tl-grow { from { clip-path: inset(0 100% 0 0 round 1.1cqw); } } /* launch timeline (v3.1): wider label column, shorter rows, a solid "live" bar (no fade) with an arrow end */ .tl { --lab: 31cqw; top: 15.4cqw; } .tl-row { top: calc(5.6cqw + var(--r) * 5.05cqw); height: 5.05cqw; } .tl-bar { top: 1.42cqw; } .tl-bar.live { background: #fff; border-radius: 1.1cqw 0 0 1.1cqw; width: calc((var(--b) - var(--a)) * var(--col) - 1.6cqw); } .tl-bar.live::after { content: ""; position: absolute; right: -1.1cqw; top: 0; border-style: solid; border-width: 1.1cqw 0 1.1cqw 1.1cqw; border-color: transparent transparent transparent #fff; } .tl-lab b, .tl-lab span { white-space: nowrap; } .tl::before, .tl::after { bottom: auto; height: calc(6 * 5.05cqw); } .tl-bar.org { color: var(--a-navy); } /* case studies (v3): each measured sheet full size on its own slide, nothing else on it */ .cs-full { position: absolute; inset: 2.2cqw 0; margin: 0; display: flex; align-items: center; justify-content: center; } .cs-full img { height: 100%; width: auto; max-width: 92cqw; object-fit: contain; border-radius: 0.8cqw; display: block; } .p .slide.is-active .cs-full img { animation: p-rise 1000ms var(--spring) 80ms backwards; } /* launch (v4): no paid push. Four time columns, five clear stages, icons centred in their own column, pill text centred, no arrow on the live bar */ .tl.tl4 { --lab: 33cqw; --col: calc((87.5cqw - var(--lab)) / 4); --rh: 5.6cqw; top: 16.4cqw; } .tl4 .tl-cols { top: 0; grid-template-columns: repeat(4, 1fr); } .tl4::before, .tl4::after { top: 3.4cqw; height: calc(5 * var(--rh)); } .tl4 .tl-row { top: calc(3.4cqw + var(--r) * var(--rh)); height: var(--rh); } .tl4 .tl-lab { gap: 1.4cqw; } .tl4 .tl-lab .ic { width: 7.6cqw; justify-content: center; align-items: center; gap: 0.45cqw; } .tl4 .tl-lab .ic img { height: 2cqw; } .tl4 .tl-lab .ic img.yt { height: 1.7cqw; } .tl4 .tl-lab .ic img.tt { border-radius: 0.45cqw; } .tl4 .tl-lab b { font-size: var(--t-m); line-height: 1.05; } .tl4 .tl-lab span { margin-top: 0.3cqw; } .tl4 .tl-bar { top: calc((var(--rh) - 2.2cqw) / 2); text-align: center; padding: 0 0.8cqw; } .tl4 .tl-bar.live { border-radius: 1.1cqw; width: calc((var(--b) - var(--a)) * var(--col) - 1cqw); } .tl4 .tl-bar.live::after { content: none; } .tl4 .tl-bar.res { left: calc(var(--lab) + 3.5 * var(--col) - 1.1cqw); } .tl.tl4 { top: 17.6cqw; } /* what our guests say (v2): two guests side by side, each with their trailer, their quote and one more answer from the feedback form (after the Innovative Trials slide) */ .g2s { position: absolute; left: 6.25cqw; right: 6.25cqw; top: 14.4cqw; bottom: 4.4cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqw; } .g2 { display: grid; grid-template-columns: 13.4cqw minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 1cqw; min-height: 0; } .g2 .vid { grid-row: 1; grid-column: 1; margin: 0; border-radius: 1.35cqw; overflow: hidden; min-height: 0; } .g2 .vid video { width: 100%; height: 100%; object-fit: cover; display: block; } .g2-q { grid-row: 1; grid-column: 2; padding: 1.8cqw 2cqw 1.6cqw; min-height: 0; } .g2-q .qm { width: 1.6cqw; } .g2-q blockquote { margin-top: 0.8cqw; } .g2-q blockquote p { font-size: var(--t-s); line-height: 1.5; } .g2-a { grid-row: 2; grid-column: 1 / -1; padding: 1.4cqw 2cqw; border-radius: 1.35cqw; color: #fff; background: linear-gradient(135deg, #2E3978 0%, #232B5E 55%, #151A39 100%); } .g2-a .tag { font-size: var(--t-s); color: var(--a-coral); } .g2-a p + p { margin-top: 0.4cqw; font-size: var(--t-s); line-height: 1.45; color: var(--a-soft); } .p .slide.is-active .g2 { animation: p-rise 1000ms var(--spring) backwards; } .p .slide.is-active .g2 + .g2 { animation-delay: 140ms; } /* both guests share the same two rows, so the quote cards and the navy cards line up across the slide */ .g2s { grid-template-rows: minmax(0, 1fr) auto; row-gap: 1cqw; } .g2 { grid-row: 1 / span 2; grid-template-rows: subgrid; row-gap: 1cqw; } .a-sub.wide { width: 82cqw; } /* ---------- case studies (v4): rebuilt as deck slides, not a sheet on a slide. The guest's trailer on the left; three measured figures; ARTO's LinkedIn follower seniority; the episode's audience geography. ---------- */ .cs2 { position: absolute; left: 6.25cqw; right: 6.25cqw; top: 14.4cqw; bottom: 4.4cqw; display: grid; grid-template-columns: 21.07cqw minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: auto minmax(0, 1fr); gap: 1.4cqw; } .cs2 .vid { grid-row: 1 / -1; grid-column: 1; margin: 0; border-radius: 1.35cqw; overflow: hidden; min-height: 0; } .cs2 .vid video { width: 100%; height: 100%; object-fit: cover; display: block; } .cs2-kpis { grid-column: 2 / -1; grid-row: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4cqw; } .cs2-k { padding: 1.7cqw 2cqw; border-radius: 1.35cqw; color: #fff; background: linear-gradient(160deg, #323D80 0%, #232B5E 55%, #1B2250 100%); } .cs2-k b { display: block; font-size: var(--t-xl); line-height: 0.95; letter-spacing: -0.02em; font-variant-numeric: lining-nums proportional-nums; } .cs2-k span { display: block; margin-top: 0.7cqw; font-size: var(--t-s); color: var(--a-soft); } .cs2-sen, .cs2-geo { grid-row: 2; border-radius: 1.35cqw; background: #fff; padding: 1.8cqw 2cqw; box-shadow: 0 0 0 0.08cqw rgba(38, 47, 102, 0.10); min-height: 0; display: flex; flex-direction: column; } .cs2-sen { grid-column: 2; } .cs2-geo { grid-column: 3; } .cs2 .k { font-size: var(--t-s); color: var(--a-coral); } .cs2-sen .big { margin-top: auto; } .cs2-sen .big b { display: block; font-size: var(--t-xl); line-height: 0.95; color: var(--a-navy); letter-spacing: -0.02em; } .cs2-sen .big span { display: block; margin-top: 0.6cqw; font-size: var(--t-s); line-height: 1.4; color: var(--a-ink2); } .cs2-sen .rows { margin-top: 1.4cqw; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8cqw; } .cs2-sen .rows div { padding: 1cqw 1.1cqw; border-radius: 0.9cqw; background: var(--a-cream); } .cs2-sen .rows b { display: block; font-size: var(--t-m); line-height: 1; color: var(--a-navy); } .cs2-sen .rows span { display: block; margin-top: 0.35cqw; font-size: var(--t-xs); color: var(--a-ink2); } .cs2-geo .gcs { flex: 1; margin-top: 1.2cqw; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.9cqw; min-height: 0; } .cs2-geo .gc { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; justify-items: center; min-height: 0; } .cs2-geo .bar { width: 100%; height: 100%; display: flex; align-items: flex-end; } .cs2-geo .bar i { display: block; width: 100%; height: var(--h); border-radius: 0.6cqw; background: var(--a-navy); } .cs2-geo .gc:first-child .bar i { background: var(--a-coral); } .cs2-geo .fl { margin-top: 0.7cqw; font-size: 1.7cqw; line-height: 1; } .cs2-geo .gc b { margin-top: 0.4cqw; font-size: var(--t-xs); color: var(--a-navy); } .p .slide.is-active .cs2-k, .p .slide.is-active .cs2-sen, .p .slide.is-active .cs2-geo { animation: p-rise 950ms var(--spring) backwards; } .p .slide.is-active .cs2-k:nth-child(2) { animation-delay: 90ms; } .p .slide.is-active .cs2-k:nth-child(3) { animation-delay: 180ms; } .p .slide.is-active .cs2-sen { animation-delay: 260ms; } .p .slide.is-active .cs2-geo { animation-delay: 340ms; } .p .slide.is-active .cs2-geo .bar i { animation: cs2-bar 1100ms var(--spring) backwards; animation-delay: calc(500ms + var(--k) * 80ms); transform-origin: bottom; } @keyframes cs2-bar { from { transform: scaleY(0); } } /* what our guests say (v3): each guest is one large navy tile (trailer, quote, then one more answer under a hairline); the questions are white Black, not coral */ .g3s { gap: 1.6cqw; grid-template-rows: none; row-gap: 0; } .g3s .g2 { grid-row: auto; grid-template-rows: minmax(0, 1fr) auto; grid-template-columns: 13.4cqw minmax(0, 1fr); gap: 1.4cqw 1.8cqw; padding: 1.8cqw; border-radius: 1.35cqw; color: #fff; background: linear-gradient(160deg, #323D80 0%, #232B5E 55%, #1B2250 100%); } .g3s .g2 .vid { grid-row: 1; border-radius: 1cqw; } .g3s .g2-q { grid-row: 1; padding: 0.2cqw 0 0; background: none; box-shadow: none; color: #fff; } .g3s .g2-q blockquote p { color: #fff; } .g3s .g2-q figcaption { color: var(--a-soft); } .g3s .g2-q figcaption b { color: #fff; } .g3s .g2-a { grid-row: 2; grid-column: 1 / -1; padding: 1.3cqw 0 0; min-height: 7.2cqw; border-radius: 0; background: none; border-top: 1px solid rgba(255, 255, 255, 0.18); } .g3s .g2-a .tag { color: #fff; font-weight: 900; } /* same answer-row height in both tiles, so the two hairlines line up */ .g3s .g2 { grid-template-rows: minmax(0, 1fr) 9.8cqw; } .g3s .g2-a { min-height: 0; } .cs2-kpis.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* a video waiting for its first frame shows the poster painted behind it (partner.js) */ video.vwait { opacity: 0; } /* what our guests say (v4): two large navy tiles, the trailer filling the left of each, everything else on the right; the company logo instead of a typed title; no rule between quote and answer */ .g4s { position: absolute; left: 6.25cqw; right: 6.25cqw; top: 14.4cqw; bottom: 4.4cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqw; } .g4 { display: grid; grid-template-columns: 16.6cqw minmax(0, 1fr); border-radius: 1.35cqw; overflow: hidden; min-height: 0; color: #fff; background: linear-gradient(160deg, #323D80 0%, #232B5E 55%, #1B2250 100%); } .g4 .vid { margin: 0; min-height: 0; } .g4 .vid video { width: 100%; height: 100%; object-fit: cover; display: block; } .g4 .tx { padding: 2.2cqw 2.2cqw 2cqw; display: flex; flex-direction: column; min-width: 0; } .g4 .qm { width: 1.6cqw; display: block; fill: var(--a-coral); transform: rotate(180deg); } .g4 blockquote { margin: 0.9cqw 0 0; } .g4 blockquote p { font-size: var(--t-s); line-height: 1.5; color: #fff; } .g4 .who { margin-top: 1.6cqw; display: flex; align-items: center; justify-content: space-between; gap: 1cqw; } .g4 .who b { font-size: var(--t-s); } .g4 .who .lg { display: block; width: auto; } .g4 .who .lg.claret { height: 3.4cqw; } .g4 .who .lg.lumira { height: 2cqw; } .g4 .qa { margin-top: auto; padding-top: 1.6cqw; } .g4 .qa .q { font-size: var(--t-s); font-weight: 900; color: #fff; } .g4 .qa p + p { margin-top: 0.4cqw; font-size: var(--t-xs); line-height: 1.5; color: var(--a-soft); } .p .slide.is-active .g4 { animation: p-rise 1000ms var(--spring) backwards; } .p .slide.is-active .g4 + .g4 { animation-delay: 140ms; } .g4 .qa { height: 10.4cqw; flex: none; } /* launch pills (v2): each bar grows out from its start once its row has landed, the text fading in behind it; the "First" pill and the results tick pop in. Transform-based, so it shows in every browser. */ .p .slide.is-active .tl4 .tl-bar { transform-origin: left center; animation: tl-scale 1200ms var(--spring) backwards, tl-ink 500ms ease backwards; animation-delay: calc(650ms + var(--r) * 170ms), calc(1150ms + var(--r) * 170ms); } .p .slide.is-active .tl4 .tl-bar.first, .p .slide.is-active .tl4 .tl-bar.res { transform-origin: center; animation: tl-pop 900ms var(--spring-pop) backwards, tl-ink 400ms ease backwards; animation-delay: calc(650ms + var(--r) * 170ms), calc(950ms + var(--r) * 170ms); } @keyframes tl-scale { from { scale: 0 1; } } @keyframes tl-pop { from { scale: 0; opacity: 0; } } @keyframes tl-ink { from { color: transparent; } } /* video deck funnel (v2), after Will's SciRhom funnel: three bands (filming, clips, posting), all text white, the last band's text centred; the card on the right states the outcome. Band h 11.42cqw, pitch 12.22cqw, the same 0.2cqw-in-per-cqw-down slope as the conference funnel. */ .f-fun.f3 { top: 15.2cqw; grid-template-rows: repeat(3, minmax(0, 1fr)); } .f3 .f-band { --a: calc(var(--k) * 2.444cqw); --b: calc(var(--k) * 2.444cqw + 2.284cqw); gap: 2cqw; padding-left: calc(var(--b) + 2.4cqw); } .f3 .f-band .ph { height: 8.4cqw; width: 14cqw; } .f3 .f-band .clips img { height: 8.4cqw; width: 4.7cqw; } .f3 .f-band h3 .n { color: #fff; margin-right: 0.5cqw; } .f3 .f-band p { font-size: var(--t-xs); line-height: 1.5; color: var(--a-soft); margin-top: 0.6cqw; } .f3 .f-band.last { text-align: center; padding-left: calc(var(--b) + 2cqw); } .f3 .f-band.last p { color: #fff; max-width: 38cqw; margin-left: auto; margin-right: auto; } .v-card.v2 { top: 15.2cqw; } .v-card.v2 h3 { margin-top: 0; font-size: var(--t-m); line-height: 1.12; color: var(--a-navy); } .v-card.v2 p { margin-top: 1.4cqw; font-size: var(--t-s); line-height: 1.45; color: var(--a-ink2); } /* the full note (website line dropped) at the small size, so the card fits the slide */ .v-it .w-q blockquote p { font-size: var(--t-xs); line-height: 1.6; } .v-it .w-q blockquote p + p { margin-top: 1cqw; } .v-it { grid-template-rows: minmax(0, 1fr); } .v-it .w-q { padding: 2cqw 2.2cqw 1.8cqw; } .v-it .w-q blockquote p { font-size: var(--t-s); line-height: 1.42; } .v-it .w-q blockquote p + p { margin-top: 0.8cqw; } /* video deck: the production schedule, built like the podcast deck's launch table (stages as rows, time as columns), from the Innovative Trials Academy run sheet: prep call, brief, half-day shoot, edit, sign-off, launch */ .tl.tl4.tl5 { --col: calc((87.5cqw - var(--lab)) / 5); --rh: 5.05cqw; top: 15.6cqw; } .tl5 .tl-cols { grid-template-columns: repeat(5, 1fr); } .tl5::before, .tl5::after { height: calc(6 * var(--rh)); } .tl5 .tl-lab .ic.num { width: 4.2cqw; justify-content: flex-start; font-size: var(--t-m); font-weight: 900; color: #fff; } .tl5 .tl-bar.res { left: calc(var(--lab) + 4.5 * var(--col) - 1.1cqw); } .tl.tl4.tl5 { top: 16.6cqw; } /* Academy slide (v2): the trailer at its true 16:9, never cropped; the left column narrows to fit it, and the gap between trailer and score card matches the gap between the columns */ .w-it.v-it { grid-template-columns: 44.4cqw minmax(0, 1fr); gap: 1.4cqw; } .v-it .left { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 1.4cqw; } .v-it .v-trailer { flex: none; margin: 0; aspect-ratio: 16 / 9; } .v-it .v-trailer video { object-fit: contain; background: #000; } .v-it .w-sc { display: flex; flex-direction: column; justify-content: center; } .v-it .w-sc ul { gap: 0.6cqw; } /* production schedule (v2): five stages, overlapping bars (the edit runs into week 3, approval into launch), two-line descriptions */ .tl.tl4.tl5.tl6 { --rh: 6.6cqw; top: 15.4cqw; } .tl6::before, .tl6::after { height: calc(5 * var(--rh)); } .tl6 .tl-lab b { white-space: nowrap; } .tl6 .tl-lab span { white-space: normal; max-width: 24cqw; line-height: 1.35; margin-top: 0.3cqw; } .tl6 .tl-lab .ic.num { align-self: flex-start; padding-top: 1.1cqw; } .tl6 .tl-lab > div { padding-top: 0.1cqw; } .tl6 .tl-lab span { max-width: none; } .tl6 .tl-lab > div { flex: 1; min-width: 0; } .tl6 .tl-lab span { text-wrap: balance; } /* Academy slide (v3): like the website deck's Innovative Trials slide, the trailer floats a little smaller, centred in the space above the score card, rather than every tile locking into one block */ .w-it.v-it { grid-template-columns: 53.5cqw minmax(0, 1fr); } .v-it .left { grid-template-rows: minmax(0, 1fr) auto; gap: 1.2cqw; } .v-it .v-trailer { width: 40cqw; justify-self: center; align-self: center; } .v-it .left { grid-template-columns: minmax(0, 1fr); width: 100%; justify-self: stretch; } /* Academy slide (v4): the trailer sits in the corner by the quote card and the score card, the same 1.4cqw gap to each */ .v-it .left { gap: 1.4cqw; } .v-it .v-trailer { justify-self: end; align-self: end; } .w-price small { margin-left: 0.6cqw; font-size: var(--t-s); font-weight: 300; letter-spacing: 0; color: var(--a-soft); } /* phone mockups: the poster sits where the video does, below the status bar */ .w-phone .scr { background-size: 100% auto !important; background-position: 0 2.5cqw !important; } /* launch / schedule pills (v3): Will couldn't see the v2 grow (the spring curve does most of its travel in the first 300ms). Now each bar sweeps left to right on an ease-in-out over 1.4s, one row after another, starting once the table has landed; the label fades in as the bar finishes. */ .p .slide.is-active .tl4 .tl-bar { transform-origin: left center; animation: tl-scale 1400ms cubic-bezier(0.65, 0, 0.35, 1) backwards, tl-ink 450ms ease backwards; animation-delay: calc(900ms + var(--r) * 380ms), calc(2000ms + var(--r) * 380ms); } .p .slide.is-active .tl4 .tl-bar.first, .p .slide.is-active .tl4 .tl-bar.res { transform-origin: center; animation: tl-pop 900ms var(--spring-pop) backwards, tl-ink 400ms ease backwards; animation-delay: calc(900ms + var(--r) * 380ms), calc(1300ms + var(--r) * 380ms); } @keyframes tl-scale { from { scale: 0 1; opacity: 0.4; } } /* guests (v5): each trailer at its true 9:16 (the tile is as tall as the trailer, not the other way round); quote, then the question and answer at the same size, then name and logo along the bottom */ .g4s { bottom: auto; height: 32cqw; } .g4 { grid-template-columns: 18cqw minmax(0, 1fr); } .g4 .vid { aspect-ratio: 9 / 16; height: 32cqw; } .g4 .tx { padding: 2cqw 2.2cqw 1.8cqw; } .g4 blockquote p { line-height: 1.45; } .g4 .qa { margin-top: 1.4cqw; padding-top: 0; height: auto; } .g4 .qa .q { font-size: var(--t-s); line-height: 1.45; } .g4 .qa p + p { margin-top: 0.2cqw; font-size: var(--t-s); line-height: 1.45; color: #fff; } .g4 .who { margin-top: auto; padding-top: 1.2cqw; } /* guests (v6): smaller text so the tiles breathe; name, a thin vertical rule, then a smaller logo */ .g4 blockquote p, .g4 .qa .q, .g4 .qa p + p { font-size: var(--t-xs); line-height: 1.6; } .g4 .qa { margin-top: 1.2cqw; } .g4 .who { justify-content: flex-start; gap: 1.1cqw; } .g4 .who b { font-size: var(--t-s); padding-right: 1.1cqw; border-right: 1px solid rgba(255, 255, 255, 0.35); line-height: 1.7; } .g4 .who .lg.claret { height: 2.3cqw; } .g4 .who .lg.lumira { height: 1.35cqw; } .aud-pf img.tt { border-radius: 0.4cqw; } /* guests (v7): quote text a little larger, between the caption and body sizes */ .g4 blockquote p, .g4 .qa .q, .g4 .qa p + p { font-size: 1.22cqw; line-height: 1.55; } /* case studies: job seniority laid out like the original case-study sheets (a big figure on the left, three tiles with the small green up arrow on the right) */ .sen2 .sg { flex: 1; margin-top: 1.2cqw; display: grid; grid-template-columns: 1.1fr 1fr; gap: 0.8cqw; min-height: 0; } .sen2 .sbig { padding: 1.4cqw 1.4cqw; border-radius: 0.9cqw; background: var(--a-cream); display: flex; flex-direction: column; justify-content: center; } .sen2 .sbig b { font-size: var(--t-xl); line-height: 0.95; color: var(--a-navy); letter-spacing: -0.02em; } .sen2 .sbig span { margin-top: 0.6cqw; font-size: var(--t-xs); line-height: 1.45; color: var(--a-ink2); } .sen2 .sst { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 0.6cqw; } .sen2 .sst div { display: flex; align-items: center; gap: 0.6cqw; padding: 0 1.1cqw; border-radius: 0.9cqw; background: var(--a-cream); } .sen2 .sst i { font-style: normal; font-size: 0.75cqw; color: #7E9E88; } .sen2 .sst b { font-size: var(--t-m); line-height: 1; color: var(--a-navy); } .sen2 .sst span { font-size: var(--t-xs); color: var(--a-ink2); } .sen2 .sst i { font-size: 0.95cqw; } .sen2 .sst span { line-height: 1.25; } .sen2 .sbig span { font-size: var(--t-xs); } .sen2 .sg { grid-template-columns: 0.95fr 1.25fr; } .sen2 .sst span { white-space: nowrap; } /* arrow tiles: arrow and figure on one line, the label underneath (so labels never clip or wrap mid-tile) */ .sen2 .sg { grid-template-columns: 1fr 1fr; } .sen2 .sst div { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 0.6cqw; row-gap: 0.25cqw; align-content: center; align-items: baseline; padding: 0 1.2cqw; } .sen2 .sst i { grid-row: 1; grid-column: 1; } .sen2 .sst b { grid-row: 1; grid-column: 2; } .sen2 .sst span { grid-row: 2; grid-column: 2; white-space: nowrap; line-height: 1.2; } /* full-screen trailer: a mute / unmute button bottom right (and the M key) */ .vol-btn { position: absolute; right: 2cqw; bottom: 2cqw; z-index: 5; width: 3.6cqw; height: 3.6cqw; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff; background: rgba(21, 26, 57, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); transition: background 200ms ease, opacity 400ms ease, scale 300ms var(--spring-pop); } .vol-btn:hover { background: rgba(21, 26, 57, 0.85); scale: 1.06; } .vol-btn svg { width: 1.7cqw; height: 1.7cqw; } .vol-btn .off { display: none; } .vol-btn.muted .on { display: none; } .vol-btn.muted .off { display: block; } @media print { .vol-btn { display: none !important; } } /* the full-screen trailer always autoplays: never show the big play button */ .p .feature-play { display: none !important; } /* launch table: the line under each stage may wrap to two lines inside its column */ .tl4:not(.tl5) .tl-lab > div { flex: 1; min-width: 0; padding-right: 1cqw; } .tl4:not(.tl5) .tl-lab span { white-space: normal; text-wrap: balance; line-height: 1.3; } .tl4:not(.tl5) .tl-lab b { line-height: 1; } /* seniority tiles stay inside the white card: columns may shrink, labels may wrap */ .sen2 .sg { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } .sen2 .sst div { min-width: 0; padding: 0 1cqw; } .sen2 .sst span { white-space: normal; } .sen2 .sg { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } .sen2 .sbig { padding: 1.3cqw 1.2cqw; } .sen2 .sbig b { font-size: var(--t-l); } .sen2 .sst div { padding: 0 0.9cqw; column-gap: 0.5cqw; } .sen2 .sst span { white-space: nowrap; } .g4 .who .lg.sofinnova { height: 1.9cqw; } /* podcast deck: sponsorship options, three cards like the website and video packages; the signed-terms card ringed coral */ .a-cards.w-pk.v-pk.p-pk { bottom: 4.4cqw; } .p-pk .pk-sub { margin-top: 0.3cqw; font-size: var(--t-xs); color: var(--a-soft); } .p-pk .a-card.hi .pk-sub { color: #fff; } .p-pk .w-price { margin-top: 0.9cqw; } .p-pk .w-price + .w-ticks { margin-top: 1.4cqw; gap: 0.8cqw; } .p-pk .w-ticks li { font-size: 1.22cqw; line-height: 1.35; } .p-pk .pk-bonus { margin-top: auto; padding-top: 1.4cqw; border-top: 1px solid rgba(255, 255, 255, 0.18); } .p-pk .pk-bonus .k { font-size: var(--t-s); font-weight: 900; color: var(--a-coral); } .p-pk .pk-bonus .w-ticks { margin-top: 0.8cqw; gap: 0.8cqw; } /* who we've hosted: two white tiles, one per show, each a grid of the guest companies' logos on cream tiles. Logos are sized one by one (--w/--h, worked out from each logo's shape and ink weight) so a square, solid mark like Bora doesn't outweigh a long, light one like Quotient Sciences. Both grids are full rectangles. */ .net2 { position: absolute; left: 6.25cqw; right: 6.25cqw; top: 14.4cqw; bottom: 4.4cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqw; } .net-show { display: flex; flex-direction: column; min-height: 0; padding: 1.85cqw 1.6cqw 1.6cqw; border-radius: 1.35cqw; background: #fff; } /* panel header: show name spelled out, the show's own logo on the right */ .net-show > .nh { display: flex; align-items: center; justify-content: space-between; gap: 0.7cqw; } .nh h3 { white-space: nowrap; margin: 0; font-size: var(--t-m); font-weight: 900; line-height: 1.05; color: var(--a-navy); } /* the show logo is centred on the heading line (2.2cqw x 1.05 = 2.31cqw), not on heading + ARTO mark: negative block margins take its extra height out of the row */ .nh .lg { --lh: 3.3cqw; flex: none; height: var(--lh); width: auto; display: block; margin-block: calc((2.31cqw - var(--lh)) / 2); } .nh .lg.lb { --lh: 3.3cqw; } /* both show logos the same height */ .nh > div, .nh .lg { align-self: flex-start; } .nets { flex: 1; min-height: 0; margin-top: 2.7cqw; display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); grid-template-rows: repeat(var(--rows, 7), minmax(0, 1fr)); gap: 0.55cqw; } .nl { display: grid; place-items: center; min-width: 0; min-height: 0; border-radius: 0.6cqw; background: var(--a-cream, #F5F3F0); } .nl img { width: var(--w); height: var(--h); max-width: 100%; max-height: 100%; object-fit: contain; display: block; } .p .slide.is-active .nl { animation: p-pop 700ms var(--spring-pop) backwards; animation-delay: calc(250ms + var(--i) * 30ms); } .nl { transition: scale 300ms var(--spring-pop); } .nl:hover { scale: 1.06; } /* "Best value" tag sitting on the top edge of the signed-terms card, centred (Will asked for it, as on his earlier slides) */ .p-pk .a-card.hi { position: relative; overflow: visible; } .p-pk .pk-tag { position: absolute; top: -1.15cqw; left: 0; right: 0; margin: 0 auto; width: fit-content; padding: 0.45cqw 1.1cqw; border-radius: 0.5cqw; background: var(--a-coral); color: #fff; font-size: var(--t-xs); font-weight: 900; line-height: 1.2; letter-spacing: 0.01em; } /* conference funnel: same three bars as the video deck's (the SciRhom original), lead-in phrases in white, not coral (Will) */ .f-conf .f-band p em { font-style: normal; color: #fff; } .f-fun.f3.f-conf { top: 16cqw; } /* event slides: the event spelled out as the title, its logo top right in place of the ARTO mark, centred on the title line */ .a-ev2 .ev-logo-r { position: absolute; right: 6.25cqw; top: calc(6.77cqw - var(--h) / 2); height: var(--h); width: auto; display: block; } .a-ev2 .ev-strip { top: 13.3cqw; height: 15.1cqw; } /* below the subheading; the 1.6cqw gap to the cards matches the gap between cards */ .p .slide.is-active .a-ev2 .ev-logo-r { animation: p-rise 1000ms var(--spring) 60ms backwards; } /* conference deck tool suite: three cards (filming kit, recording and editing, AI tools), smaller icons to fit */ .a-cards.t-suite.t-suite-c { grid-template-columns: repeat(3, minmax(0, 1fr)); } .t-suite-c .a-card { padding: 2.4cqw 2cqw; justify-content: flex-start; } .t-suite-c .t-grid.five { display: flex; flex-wrap: wrap; justify-content: center; width: calc(3 * 6.8cqw + 2 * 0.7cqw); } .t-suite-c h3 { font-size: var(--t-m); } .t-suite-c .t-note { margin-top: 0.8cqw; font-size: var(--t-xs); line-height: 1.45; color: var(--a-soft); text-align: center; max-width: 19cqw; } .t-suite-c .t-grid { margin-top: auto; margin-bottom: auto; grid-template-columns: repeat(3, 6.8cqw); gap: 0.7cqw; } .t-suite-c .t-grid.two { grid-template-columns: repeat(2, 6.8cqw); } .t-suite-c .t-ic { width: 6.8cqw; height: 6.8cqw; border-radius: 1.5cqw; } .t-suite-c .t-ic.full { background: transparent; } .t-suite-c .t-ic.gl img { width: 66%; } .t-suite-c .t-ic.gl.wide img { width: 78%; } .t-suite-c .t-ic.kit img { width: 76%; } .t-suite-c .t-ic.kit.obs img { width: 72%; height: auto; } /* conference funnel: the post-event bar keeps its photo like the other two, text left, lead-in not bold (Will) */ .f-conf .f-band.last { grid-template-columns: auto minmax(0, 1fr); text-align: left; padding-left: calc(var(--b) + 2.4cqw); } .f-conf .f-band.last p { max-width: none; margin-left: 0; margin-right: 0; } .f-conf .f-band.last p em { font-weight: 300; } /* conference pricing: one wide strip with the contact, quoted per event (Will: no lists, it depends on the conference) */ .q-box { position: absolute; left: 6.25cqw; right: 6.25cqw; top: 15cqw; height: auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 3cqw; padding: 2.9cqw 2.8cqw 2.9cqw 3.2cqw; border: 0.16cqw solid transparent; border-radius: 1.35cqw; text-decoration: none; color: #fff; background: linear-gradient(160deg, #323D80 0%, #232B5E 55%, #1B2250 100%) padding-box, linear-gradient(var(--a-coral), var(--a-coral)) border-box; } .q-box { flex-wrap: wrap; align-content: flex-start; row-gap: 0; } .q-box .q-crew { flex: 0 0 100%; margin-top: 2.2cqw; padding-top: 1.8cqw; border-top: 1px solid rgba(255, 255, 255, 0.18); } .q-box .q-crew > p { font-size: var(--t-s); color: #fff; } .q-box .q-crew .w-ticks { margin-top: 1.2cqw; display: grid; grid-template-columns: repeat(3, max-content); gap: 0.9cqw 5cqw; } .q-box b { display: block; font-size: var(--t-l); font-weight: 900; line-height: 1.1; } .q-box .tx span { display: block; margin-top: 0.6cqw; font-size: var(--t-s); color: var(--a-soft); } .q-box .go { flex: none; width: 4cqw; height: 4cqw; border-radius: 50%; background: var(--a-coral); display: grid; place-items: center; } .q-box .go svg { width: 1.9cqw; height: 1.9cqw; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: translate 400ms var(--spring-pop); } .q-box:hover .go svg { translate: 0.3cqw 0; } .p .slide.is-active .q-box { animation: p-rise 1000ms var(--spring) 300ms backwards; } /* services hub, slide 2: the story in the "buyer's journey" style Will liked from another deck: a node branching down to framed milestones, the ARTO Marketing launch picked out in coral, a sentence under each (Will cut the stat tiles) */ .sj { position: absolute; left: 6.25cqw; right: 6.25cqw; top: 14.2cqw; bottom: 4.4cqw; } .sj-node { position: absolute; left: calc(50% - 1.8cqw); top: 0; height: 3.6cqw; display: flex; align-items: center; gap: 1.2cqw; white-space: nowrap; } .sj-node .ic { width: 3.6cqw; height: 3.6cqw; border-radius: 50%; background: var(--a-navy); display: grid; place-items: center; overflow: hidden; } .sj-node .ic .tri { width: 1.9cqw; color: #fff; display: block; margin-top: -0.35cqw; } /* lifts the triangle to the optical centre of the circle */ .sj-node .ic .tri svg { width: 100%; display: block; fill: currentColor; } .sj-node .cap { font-size: var(--t-s); color: var(--a-ink2); } .sj-tree { position: absolute; left: 0; top: 3.6cqw; width: 100%; height: 2.8cqw; overflow: visible; } .sj-tree path { fill: none; vector-effect: non-scaling-stroke; } .sj-tree .gr path { stroke: rgba(38, 47, 102, 0.3); stroke-width: 1.5; } .sj-tree .hl { stroke: var(--a-coral); stroke-width: 3; } .sj-cols { position: absolute; left: 0; right: 0; top: 6.4cqw; bottom: 0; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.6cqw; } .sj-col { position: relative; display: flex; flex-direction: column; min-width: 0; } .sj-col .fr { width: 100%; border-radius: 0.9cqw; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(38, 47, 102, 0.16); } .sj-col .bar { display: block; padding: 0.5cqw 1cqw; font-size: var(--t-xs); font-weight: 900; color: var(--a-navy); background: #ECE9E4; } .sj-col .ph { height: 11.4cqw; background: linear-gradient(160deg, #323D80 0%, #1B2250 100%); } .sj-col .ph img, .sj-col .ph video { width: 100%; height: 100%; object-fit: cover; display: block; } .sj-col .ph.mk { display: grid; place-items: center; } .sj-col .ph.mk img { width: 56%; height: auto; } .sj-col .lb { margin-top: 1.2cqw; display: flex; align-items: center; gap: 0.4cqw; font-size: var(--t-s); font-weight: 900; line-height: 1.1; color: var(--a-navy); white-space: nowrap; } .sj-col .lb svg { width: 1.3cqw; height: 1.3cqw; flex: none; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .sj-col p { margin-top: 0.6cqw; font-size: 1.22cqw; line-height: 1.45; color: var(--a-ink2); text-wrap: balance; } .sj-col.hi .fr { box-shadow: 0 0 0 0.2cqw var(--a-coral); } .sj-col.hi .bar { background: var(--a-coral); color: #fff; } .sj-col.hi .lb { color: var(--a-coral); } .p .slide.is-active .sj-node { animation: p-fade 800ms var(--spring) 150ms backwards; } .p .slide.is-active .sj-tree { animation: p-fade 800ms var(--spring) 300ms backwards; } .p .slide.is-active .sj-col { animation: p-rise 900ms var(--spring) backwards; animation-delay: calc(350ms + var(--k) * 80ms); } /* services hub, slide 3: each card is a link to that service's deck */ .s-hub .a-card { position: relative; text-decoration: none; color: #fff; cursor: pointer; transition: translate 500ms var(--spring-pop); } .s-hub .a-card:hover { translate: 0 -0.4cqw; } .s-hub .go { position: absolute; right: 1.6cqw; bottom: 1.6cqw; width: 3cqw; height: 3cqw; border-radius: 50%; background: var(--a-coral); display: grid; place-items: center; } .s-hub .go svg { width: 1.5cqw; height: 1.5cqw; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: translate 400ms var(--spring-pop); } .s-hub .a-card:hover .go svg { translate: 0.25cqw 0; } /* "All services" button on a deck opened from the services hub (bottom left, styled like the full-screen button) */ .back-btn { position: fixed; left: 1.2rem; bottom: 1.1rem; z-index: 45; display: inline-flex; align-items: center; gap: 0.45rem; height: 2.5rem; padding: 0 0.9rem 0 0.7rem; border: 1px solid rgba(244, 241, 233, 0.2); border-radius: 7px; background: rgba(14, 18, 44, 0.55); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); color: #F4F1E9; font: 300 0.9rem/1 Raleway, system-ui, sans-serif; text-decoration: none; transition: border-color 160ms ease, background 160ms ease; } .back-btn:hover { border-color: var(--a-coral); background: rgba(14, 18, 44, 0.8); } .back-btn svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } /* services hub cover: five equal photo strips edge to edge (no borders) over a full-width navy bar with the headline and ARTO. Will tried full-height strips with a corner box and went back to this: the bar keeps each photo, and both trailer name cards, a decent size. */ .cv-strips .strips { position: absolute; left: 0; right: 0; top: 0; bottom: 17cqw; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); } .cv-strips .strips img { width: 100%; height: 100%; object-fit: cover; display: block; min-width: 0; min-height: 0; } .cv-strips .band { position: absolute; left: 0; right: 0; bottom: 0; height: 17cqw; display: flex; align-items: center; justify-content: space-between; padding: 0 6.25cqw; } .cv-strips .band h1 { position: static; width: auto; margin: 0; font-size: 4.2cqw; } /* a step under the 4.9cqw cover size, at Will's request */ .cv-strips .band h1 .ln.hl { margin-bottom: 0; } .cv-strips .band .mk { position: static; height: 2.8cqw; width: auto; } .p .slide.is-active .cv-strips .strips img { animation: p-wipe 1200ms var(--spring) backwards; animation-delay: calc(100ms + var(--k) * 110ms); } /* services hub, slide 3 with five services: three cards on top, two wide cards below (photo left, text right), as on the CPHI general deck. The bottom row sizes to its copy and the top photos take what's left; the open arrow sits on each photo's corner. */ .a-cards.s-hub5 { top: 13.6cqw; bottom: 4.4cqw; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) auto; } .s-hub5 .a-card { grid-column: span 2; min-height: 0; } .s-hub5 .a-card.wide { grid-column: span 3; flex-direction: row; } .s-hub5 .a-card .ph { height: auto; flex: 1 1 0; min-height: 0; } .s-hub5 .a-card.wide .ph { position: absolute; left: 0; top: 0; bottom: 0; width: 33%; height: 100%; } .s-hub5 .a-card .tx { flex: none; height: 12.6cqw; padding: 1.3cqw 1.6cqw 1.4cqw; } /* same text height on all three, so the photos match */ .s-hub5 .a-card.wide .tx { flex: 1; height: auto; margin-left: 33%; padding: 1.5cqw 1.8cqw 1.6cqw; } .s-hub5 .a-card h3 { font-size: var(--t-m); } .s-hub5 .a-card p.tag { margin-top: 0.4cqw; font-size: var(--t-s); font-style: italic; color: #fff; } .s-hub5 .a-card p { margin-top: 0.5cqw; font-size: var(--t-xs); line-height: 1.45; } .s-hub5 .go { top: 1.2cqw; right: 1.2cqw; bottom: auto; width: 2.6cqw; height: 2.6cqw; } .s-hub5 .a-card.wide .go { right: calc(67% + 1.2cqw); } .s-hub5 .go svg { width: 1.3cqw; height: 1.3cqw; } /* services hub, slide 3: five pillars in one row (Will preferred this to 3 + 2). Same text height on every card so the photos match; the open arrow back at the bottom right of each card, as on the four-card version */ .a-cards.s-hub5.s-row5 { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); } .s-row5 .a-card { grid-column: auto; } .s-row5 .a-card .tx { height: 25.2cqw; padding: 1.4cqw 1.5cqw; } /* keeps the photo box at 1.25:1, the shape of the website screenshot */ .s-row5 .a-card p.tag { font-size: var(--t-xs); } .s-row5 .go { top: auto; bottom: 1.3cqw; right: 1.3cqw; } .s-row5 .a-card .hd { flex-direction: column-reverse; align-items: flex-start; gap: 0.5cqw; } .s-row5 .a-card .tx { padding: 1.4cqw 1.1cqw; } .s-row5 .a-card p { text-wrap: pretty; } /* services hub cards: no numbers (Will), and a labelled button instead of a bare arrow so viewers know the cards open a deck */ .s-row5 .a-card .hd { display: block; } .s-row5 .cta { position: absolute; left: 1.1cqw; right: 1.1cqw; bottom: 1.1cqw; height: 2.9cqw; display: flex; align-items: center; justify-content: center; gap: 0.5cqw; border-radius: 0.7cqw; background: var(--a-coral); color: #fff; font-size: var(--t-xs); font-weight: 900; letter-spacing: 0.01em; } .s-row5 .cta svg { width: 1.15cqw; height: 1.15cqw; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: translate 400ms var(--spring-pop); } .s-row5 .a-card:hover .cta svg { translate: 0.25cqw 0; } /* services hub close: same strips-over-bar layout as the cover, with the contact email under the headline (no name, Will) */ .cv-strips.a-close2 .strips { bottom: 19cqw; } .cv-strips.a-close2 .band { height: 19cqw; } .cv-strips.a-close2 .band .cap { position: static; margin-top: 1.2cqw; font-size: var(--t-s); color: var(--a-soft); } .cv-strips.a-close2 .band .cap a { color: #fff; text-decoration-color: var(--a-coral); text-underline-offset: 0.3em; } /* a website concept in the strips is labelled as one (deck rule: concepts are always called concepts) */ .cv-strips .strips .cpt { position: relative; margin: 0; min-width: 0; min-height: 0; overflow: hidden; } .cv-strips .strips .cpt img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block; } .cv-strips .strips .cpt figcaption { position: absolute; left: 1.1cqw; bottom: 7.4cqw; padding: 0.35cqw 0.7cqw; background: var(--a-navy); color: #fff; font-size: var(--t-xs); line-height: 1.3; } .p .slide.is-active .cv-strips .strips .cpt { animation: p-wipe 1200ms var(--spring) backwards; animation-delay: calc(100ms + var(--k) * 110ms); } /* close: the email sits midway between the end of the highlight and the ARTO logo, centred on the logo vertically (Will). Three columns: headline | email (centred in the space left) | logo; all vertically centred in the bar */ .cv-strips.a-close2 .band { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; } .cv-strips.a-close2 .band .mail { justify-self: center; } .cv-strips.a-close2 .band .mail { font-size: var(--t-s); font-weight: 300; letter-spacing: 0; color: #fff; text-decoration: underline; text-decoration-color: var(--a-coral); text-underline-offset: 0.3em; white-space: nowrap; } /* coral mute button on every full-screen video (podcast, video and services decks; Will) */ .vol-btn.coral { background: var(--a-coral); border: 0; box-shadow: none; color: #fff; } .vol-btn.coral:hover { background: #E3604C; } /* big "All services" button on a close slide, when the deck was opened from the services hub (Will): right-hand side, the same height and line as the coral highlight (40.26cqw from the top, 5.83cqw tall on every close) */ .close-back { position: absolute; right: 6.25cqw; top: 40.26cqw; height: 5.83cqw; display: inline-flex; align-items: center; gap: 1cqw; padding: 0 2.4cqw; border-radius: 0.7cqw; background: var(--a-coral); color: #fff; font-size: var(--t-m); font-weight: 900; text-decoration: none; z-index: 4; transition: background 200ms ease; } .close-back svg { width: 2cqw; height: 2cqw; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: translate 400ms var(--spring-pop); } .close-back:hover { background: #E3604C; } .close-back:hover svg { translate: 0.35cqw 0; } .p .slide.is-active .close-back { animation: p-rise 1000ms var(--spring) 700ms backwards; } @media print { .close-back { display: none !important; } } /* Screens taller than 16:9 (16:10 laptops in full screen, Will): the 16:9 slide stays whole, so nothing is cropped, and the space above and below it carries the slide's own background instead of showing as bars. The navy gradient moves from the stage to the whole slide so there's no seam; cream slides are cream to the edges. Full-bleed pictures (the photo-strip cover and close, the full-screen videos) reach the top and bottom of the screen. --ext = each bar's height (0 on 16:9 or wider screens). */ .p .slide { --ext: max(0px, calc((100vh - 100vw * 9 / 16) / 2)); background: linear-gradient(135deg, #262F66 0%, #151A39 100%); } .p .slide:has(> .stage.cream) { background: #F5F3F0; } .p .slide.slide-feature { background: #000; } .p .stage { background: transparent; } .p .slide > .stage.a-cover2 { background: transparent !important; } .p .slide-feature .stage, .p .stage.cv-strips { overflow: visible; } .p .slide-feature .feature-v { position: absolute; left: 0; width: 100%; top: calc(-1 * var(--ext)); height: calc(100% + 2 * var(--ext)); } .p .cv-strips .strips { top: calc(-1 * var(--ext)); } .p .cv-strips .band { bottom: calc(-1 * var(--ext)); padding-bottom: var(--ext); box-sizing: content-box; } .p .slide-feature .vol-btn { bottom: calc(2cqw - var(--ext)); }