/* Arclight — "the arc light": a dark theatre, a warm white-hot beam, the product as the picture. */ :root { --ink: #050506; --ink-2: #0c0c0f; --ink-3: #16161a; --line: rgba(255, 244, 220, 0.1); --ivory: #f5f1ea; --mute: #a39f99; --mute-2: #7c7975; --amber: #EDB341; --arc: #F6E7C8; --ember: #C98A1E; --sans: "Instrument Sans", "SF Pro Display", -apple-system, "Helvetica Neue", sans-serif; --serif: var(--sans); --mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace; --gutter: clamp(16px, 4vw, 48px); --max: 1240px; --ease: cubic-bezier(0.22, 1, 0.36, 1); color-scheme: dark; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ink); color: var(--ivory); font-family: var(--sans); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } img, video, canvas { display: block; max-width: 100%; height: auto; } a { color: inherit; } h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.035em; } p { margin: 0; } em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; color: var(--arc); } kbd { font-family: var(--mono); font-size: 0.8em; display: inline-grid; place-items: center; min-width: 1.9em; height: 1.9em; padding: 0 0.45em; margin: 0 0.15em; border: 1px solid rgba(255, 244, 220, 0.22); border-bottom-width: 2px; border-radius: 6px; background: linear-gradient(#1c1b1f, #121114); color: var(--ivory); } code { font-family: var(--mono); font-size: 0.9em; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ivory); color: var(--ink); padding: 8px 12px; border-radius: 8px; } .skip:focus { left: 8px; } :focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 6px; } /* ── Cue labels: the stage manager's voice ───────────────────────── */ .cue { font-family: var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); display: flex; align-items: center; gap: 12px; margin-bottom: 22px;} .cue span { color: var(--amber); } .cue span::after { content: ""; display: inline-block; width: 28px; height: 1px; background: currentColor; margin-left: 12px; vertical-align: middle; opacity: 0.6; } /* ── Buttons ──────────────────────────────────────────────────── */ .btn { --bg: var(--ivory); display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border-radius: 999px; border: 0; background: var(--bg); color: var(--ink); font-weight: 600; font-size: 16px; text-decoration: none; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.3s; box-shadow: 0 0 0 0 rgba(237, 179, 65, 0); } .btn:hover { transform: translateY(-1px); background: var(--arc); box-shadow: 0 10px 40px -8px rgba(237, 179, 65, 0.55); } .btn--small { padding: 7px 15px; font-size: 13px; } .btn--ghost { background: transparent; color: var(--ivory); box-shadow: inset 0 0 0 1px rgba(255, 244, 220, 0.3); } .btn--ghost:hover { background: rgba(255, 244, 220, 0.06); box-shadow: inset 0 0 0 1px var(--amber); } .link { color: var(--amber); text-decoration: none; font-weight: 500; } .link span { display: inline-block; transition: transform 0.3s var(--ease); } .link:hover span { transform: translateX(4px); } /* ── Nav ─────────────────────────────────────────────────────── */ .nav { position: fixed; inset: 0 0 auto; z-index: 50; height: 52px; background: rgba(5, 5, 6, 0.72); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid transparent; transition: border-color 0.4s; } .nav.is-scrolled { border-bottom-color: var(--line); } .nav__inner { max-width: var(--max); height: 100%; margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: 28px; } .brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; letter-spacing: -0.02em; font-size: 18px; text-decoration: none; } .brand__mark { color: var(--amber);} .nav__links { display: flex; gap: 26px; margin-left: auto; font-size: 13px; } .nav__links a { text-decoration: none; color: rgba(245, 241, 234, 0.72); transition: color 0.2s; } .nav__links a:hover { color: var(--ivory); } @media (max-width: 780px) { .nav__links { display: none; } .nav .btn { margin-left: auto; } } /* ── Hero ────────────────────────────────────────────────────── */ .hero { position: relative; text-align: center; isolation: isolate;} .hero__grain { position: absolute; inset: 0; z-index: -1; opacity: 0.06; pointer-events: none; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .hero__copy { max-width: 980px; margin: 0 auto; } .hero .cue { justify-content: center; } .hero__product { margin: 40px auto 0; perspective: 1800px;} .window { position: relative; border-radius: 14px; overflow: hidden; container-type: inline-size; box-shadow: 0 0 0 1px rgba(255, 244, 220, 0.12), 0 60px 160px -30px rgba(237, 179, 65, 0.28), 0 40px 80px -20px rgba(0, 0, 0, 0.9); transform-origin: 50% 0%; } .window img { width: 100%; } /* The live canvas: exact fractions exported by MarketingShotTests. */ .window__canvas { position: absolute; left: 12.5%; top: 20.854%; width: 64.418%; height: 66.829%; overflow: hidden; container-type: inline-size; background: #000; } .window__canvas video { width: 100%; height: 100%; object-fit: cover; } .l3 { position: absolute; left: 5%; top: 75.56%; width: 40.63%; height: 14.44%; background: rgba(10, 10, 13, 0.82); border-radius: 0.83cqw; } .l3__bar { position: absolute; left: 0; top: 0; bottom: 0; width: 0.52cqw; background: var(--amber); border-radius: 0.3cqw; } .l3__name, .l3__title { position: absolute; left: 5.8%; white-space: nowrap; font-family: -apple-system, "SF Pro Display", var(--sans); letter-spacing: 0; } .l3__name { top: 8%; font-size: 3.13cqw; font-weight: 700; color: #fff; } .l3__title { top: 56%; font-size: 1.77cqw; font-weight: 500; color: rgba(255, 255, 255, 0.72); } /* ── Sections (shared) ─────────────────────────────────────────── */ section { position: relative; } .section-head { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); } .section-head--center { text-align: center; } .section-head--center .cue { justify-content: center; } .section-head h2, .split h2, .compare h2, .faq h2 { font-size: clamp(44px, 7vw, 96px); line-height: 0.98; } .section-lede { max-width: 640px; color: var(--mute);} .section-head--center .section-lede { margin-left: auto; margin-right: auto; } .section-lede b, .split p b { color: var(--ivory); font-weight: 600; } /* ── Statement: words light up as you scroll ──────────────────── */ .statement { margin: 0 auto;} .statement__text { font-weight: 600;} .statement__text .w { color: rgba(245, 241, 234, 0.16); transition: color 0.2s linear; } .statement__text .w.is-lit { color: var(--ivory); } /* ── Rundown: horizontal slide strip ─────────────────────────── */ .rundown { padding-top: 40px; } .rundown .section-head h2 { font-size: clamp(40px, min(7vw, 9vh), 96px); } .rundown .section-lede { margin-top: 16px; } .keys { text-align: center; color: var(--mute); font-size: 14px; padding: 0 var(--gutter); } .keys kbd { margin-right: 2px; } .keys kbd:nth-of-type(2), .keys kbd:nth-of-type(4) { margin-right: 8px; } /* ── Magic Move: scroll-scrubbed frames ─────────────────────── */ .magic__pin { grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); margin: 0 auto;} .magic__stage canvas { width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; box-shadow: 0 0 0 1px var(--line), 0 50px 140px -40px rgba(237, 179, 65, 0.35);} .magic__glow { position: absolute; inset: 10% -6% -18%; z-index: -1; background: radial-gradient(closest-side, rgba(237, 179, 65, 0.18), transparent); filter: blur(30px); } @media (max-width: 900px) { .magic__pin { grid-template-columns: 1fr; } } /* ── Split layouts ──────────────────────────────────────────── */ .transitions { padding: clamp(48px, 8vh, 96px) 0 clamp(80px, 12vh, 150px); } .split { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; } .split h3 { line-height: 1.05;} .split h2 { font-size: clamp(44px, 5.6vw, 80px); } .split p { margin-top: 20px; color: var(--mute); font-size: 18px; } .chips { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 8px; } .chips li { font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); color: rgba(245, 241, 234, 0.8); } .chips li:first-child { border-color: rgba(237, 179, 65, 0.6); color: var(--amber); } @media (max-width: 860px) { .split { grid-template-columns: 1fr; } } /* ── Bento ───────────────────────────────────────────────────── */ /* ── Color ───────────────────────────────────────────────────── */ .specs { max-width: 1000px; margin: 64px auto 0; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .specs div { border-top: 1px solid var(--line); padding-top: 22px; } .specs dt { font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; color: var(--arc); } .specs dd { margin: 10px 0 0; color: var(--mute); } @media (max-width: 700px) { .specs { grid-template-columns: 1fr; } } /* ── Outputs flow ────────────────────────────────────────────── */ .outputs { padding: clamp(80px, 12vh, 160px) 0; } /* ── Native ─────────────────────────────────────────────────── */ /* ── Who ─────────────────────────────────────────────────────── */ .who { padding: clamp(80px, 12vh, 160px) 0; } /* ── Compare teaser & FAQ ───────────────────────────────────── */ .compare h2 { font-size: clamp(34px, 4.4vw, 58px); line-height: 1.04; } .compare p { margin: 22px auto 34px; color: var(--mute); font-size: 19px; max-width: 680px; } .faq { padding: clamp(60px, 10vh, 120px) var(--gutter);} .faq h2 { font-size: clamp(40px, 5vw, 64px); margin-bottom: 30px; } .faq details { border-top: 1px solid var(--line); } .faq details:last-child { border-bottom: 1px solid var(--line); } .faq summary { cursor: pointer; list-style: none; padding: 24px 40px 24px 0; font-weight: 500; letter-spacing: -0.015em; position: relative;} .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; position: absolute; right: 4px; top: 18px; font-size: 28px; font-weight: 300; color: var(--amber); transition: transform 0.4s var(--ease); } .faq details[open] summary::after { transform: rotate(45deg); } .faq details p { padding: 0 40px 26px 0; color: var(--mute); font-size: 17px; } /* ── Finale ─────────────────────────────────────────────────── */ .finale h2 { letter-spacing: -0.05em;} .finale__sub { color: var(--mute); font-size: 18px;} .finale__note { font-size: 12px; color: var(--mute-2);} /* ── Footer ─────────────────────────────────────────────────── */ .footer { border-top: 1px solid var(--line); font-size: 13px; color: var(--mute);} .footer__inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: auto 1fr; gap: 16px 32px; align-items: center; } .footer nav { display: flex; gap: 22px; justify-self: end; } .footer nav a { text-decoration: none; } .footer nav a:hover { color: var(--ivory); } .brand--quiet { font-size: 15px; color: var(--ivory); } .footer__fine { grid-column: 1 / -1; max-width: 900px;} /* ── Reveal (JS adds .is-in; without JS everything is visible) ── */ .js .reveal { opacity: 0; transform: translateY(40px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); } .js .reveal.is-in { opacity: 1; transform: none; } .js .reveal-zoom { opacity: 0; transform: scale(0.92); transition: opacity 1.4s var(--ease), transform 1.4s var(--ease); } .js .reveal-zoom.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .js .reveal, .js .reveal-zoom { opacity: 1; transform: none; } .statement__text .w { color: var(--ivory); } } /* ── Teleprompter: the real docked prompter under a notch, cutting the program at cues ── */ .prompter__pin { min-height: 100vh; display: flex; flex-direction: column;} .prompter .section-head h2 { font-size: clamp(40px, min(6.4vw, 8.5vh), 92px); } .prompter__stage { width: 100%; margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px);} .laptop__screen { position: relative; aspect-ratio: 16 / 10; border-radius: 18px 18px 6px 6px; overflow: hidden; background: #000; border: clamp(8px, 1vw, 14px) solid #0e0e10; max-height: 60vh; margin: 0 auto;} .laptop__base { height: clamp(10px, 1.3vw, 18px); margin: 0 -3%; border-radius: 0 0 14px 14px; background: linear-gradient(#2a2a2e, #141416); box-shadow: 0 16px 40px -12px #000; } .onair { margin: 0; } .onair__frame { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; box-shadow: 0 0 0 2px #e5484d, 0 30px 80px -30px rgba(229, 72, 77, 0.5); background: #000;} .onair__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s var(--ease); } .onair__img.is-on { opacity: 1; } .onair__tag { position: absolute; z-index: 2; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; background: #e5484d; color: #fff; padding: 3px 8px; border-radius: 5px;} .onair figcaption { margin-top: 12px; font-size: 14px; color: var(--mute); } .onair figcaption span { color: var(--ivory); } @media (max-width: 900px) { .prompter__stage { grid-template-columns: 1fr; } } /* ── Round 2: hero details ─────────────────────────────────────── */ .play { width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--amber); position: relative; transition: transform 0.3s var(--ease), background 0.3s; } .play::after { content: ""; position: absolute; left: 11.5px; top: 9px; border-left: 9px solid var(--amber); border-top: 6px solid transparent; border-bottom: 6px solid transparent; } .hero__caption { margin-top: 18px; font-size: 13px; color: var(--mute); gap: 8px; align-items: center;} .live-dot { width: 7px; height: 7px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 0 0 rgba(229, 72, 77, 0.6); animation: pulse 1.8s infinite; } @keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(229, 72, 77, 0); } 100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0); } } /* ── Proof band ─────────────────────────────────────────────────── */ .proof { max-width: var(--max); margin: 0 auto; padding: clamp(40px, 8vh, 90px) var(--gutter) 0; } .proof__row { display: grid; margin: 0;} .proof__row dt { font-weight: 600; background: linear-gradient(180deg, var(--arc), #d9a45c); -webkit-background-clip: text; background-clip: text; color: transparent;} .proof__row dt small { margin-left: 2px;} .proof__row dd { margin: 12px 0 0; color: var(--mute);} .proof__note { color: var(--mute-2);} @media (max-width: 860px) { .proof__row { grid-template-columns: 1fr 1fr; } } /* ── Any show ───────────────────────────────────────────────────── */ .shows { padding: clamp(80px, 12vh, 150px) 0; } /* ── Bento (round 2) ────────────────────────────────────────────── */ /* ── On a call ──────────────────────────────────────────────────── */ .call { padding: clamp(80px, 12vh, 150px) 0; } .meeting { margin: 0; padding: 14px; border-radius: 18px; background: #16171a; box-shadow: 0 0 0 1px var(--line), 0 40px 100px -40px #000; } .meeting figcaption { margin-top: 14px; font-size: 15px; color: var(--mute); padding: 0 4px 2px; } /* ── Context photo ──────────────────────────────────────────────── */ .context__figure { position: relative; overflow: hidden;} .context__figure figcaption { position: absolute; font-weight: 600;} /* ── Outputs icons ──────────────────────────────────────────────── */ /* ── Native ──────────────────────────────────────────────────────── */ /* ── Finale with the lit laptop ────────────────────────────────── */ .finale__beam { grid-area: 1 / 1;} .finale__copy { grid-area: 1 / 1; align-self: center; z-index: 1;} /* ── Film dialog ──────────────────────────────────────────────── */ .film { border: 0; padding: 0; background: transparent; width: min(1200px, 92vw); max-width: none; overflow: visible; } .film::backdrop { background: rgba(3, 3, 4, 0.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .film[open] { animation: film-in 0.5s var(--ease); } @keyframes film-in { from { opacity: 0; transform: scale(0.96); } } .film video { width: 100%; border-radius: 14px; box-shadow: 0 40px 120px -20px rgba(237, 179, 65, 0.3); background: #000; } .film__close { position: absolute; right: -8px; top: -46px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255, 244, 220, 0.12); color: var(--ivory); font-size: 22px; cursor: pointer; } .film__note { text-align: center; margin-top: 14px; font-size: 13px; color: var(--mute); } /* ── Phone refinements ───────────────────────────────────────── */ @media (max-width: 600px) { .cue span::after { display: none; } .cue { flex-wrap: wrap; gap: 6px 10px; } .hero { padding-top: 88px; } /* The editor chrome is unreadable at phone width: show the live program instead. */ .window { border-radius: 12px; } .window > img { visibility: hidden; height: 0; aspect-ratio: auto; } .window__canvas { position: relative; left: auto; top: auto; width: 100%; height: auto; aspect-ratio: 16 / 9; } .laptop__base { display: none; } .laptop__screen { aspect-ratio: auto; border: 0; background: transparent; box-shadow: none; max-height: none; } .proof__row div { padding: 22px 18px; } } /* ── Color: scroll-scrubbed grade with scope tabs ─────────────────── */ .color { padding: 0; } .color__pin { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: clamp(20px, 3.5vh, 40px); padding: 76px 0 36px; } .color .section-head h2 { font-size: clamp(38px, min(5.6vw, 7.5vh), 84px); } .color .section-lede { margin-top: 14px; } .grade { margin: 0 auto; width: min(1180px, calc(100% - 2 * var(--gutter)), 58vh * 1280 / 754); } .grade__frame { position: relative; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px var(--line), 0 60px 160px -50px rgba(237, 179, 65, 0.35); background: #1e1e20; } .grade__frame canvas { width: 100%; height: auto; aspect-ratio: 1280 / 754; } .grade__meter { margin: 16px auto 0; width: max-content; display: flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 999px; background: rgba(8, 8, 10, 0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 12px; color: var(--mute); white-space: nowrap; } .grade__bar { width: 120px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #6aa6ff, #EDB341); opacity: 0.35; position: relative; } .grade__bar i { position: absolute; left: 0; top: -2px; width: 7px; height: 7px; border-radius: 50%; background: var(--arc); box-shadow: 0 0 10px var(--amber); transform: translateX(var(--p, 0px)); } .grade__tabs { margin: 16px auto 0; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; } .grade__tabs button { font: inherit; font-size: 14px; color: var(--mute); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 7px 16px; cursor: pointer; transition: color 0.25s, border-color 0.25s, background 0.25s; } .grade__tabs button:hover { color: var(--ivory); } .grade__tabs button[aria-selected="true"] { color: var(--ink); background: var(--ivory); border-color: var(--ivory); } .color .specs { margin-top: 0; } @media (max-width: 700px) { .grade__meter { display: none; } .color .specs { display: none; } } /* ── Editor pager (after Final Cut Pro's feature carousel) ─────────── */ .editor { padding: clamp(40px, 8vh, 100px) var(--gutter) 0; } .editor__card { padding: clamp(28px, 4.5vw, 64px) 0 clamp(24px, 3vw, 40px);} .editor__title { line-height: 1.1; letter-spacing: -0.03em; padding: 0 clamp(24px, 4.5vw, 64px);} .pager { margin-top: clamp(18px, 3vw, 36px); outline: none; } /* Phones: the footer links wrap; decorative glows never widen the page. */ .footer nav { flex-wrap: wrap; row-gap: 10px; } .magic { overflow-x: clip; } @media (max-width: 600px) { .footer__inner { grid-template-columns: 1fr; } .footer nav { justify-self: start;} } /* ── Round 3 fixes ─────────────────────────────────────────────── */ h1, h2, h3 { text-wrap: balance; } .section-lede, .split p { text-wrap: pretty; } /* Rhythm: tighter section spacing. */ .color, .outputs, .who, .shows, .call { padding-top: clamp(64px, 9vh, 110px); padding-bottom: clamp(64px, 9vh, 110px); } .proof__head { justify-content: space-between; align-items: end; gap: 24px 48px; flex-wrap: wrap; margin-bottom: 28px;} .proof__head h2 { line-height: 1.02;} .proof__head p { color: var(--mute); font-size: 17px;} .proof__row dd { font-size: 15.5px; line-height: 1.45; } /* Show tabs align to the top. */ /* Editor title beside its lede, like FCP. */ /* Finale: copy, then the lit laptop below — never on top of it. */ .finale__copy { padding: 0; } .finale__sub b { color: var(--ivory); font-weight: 600; } /* Compact finales on the subpages keep the simple centered layout. */ .finale--compact { display: block; min-height: 0; padding: clamp(100px, 16vh, 180px) var(--gutter) clamp(90px, 14vh, 160px); text-align: center; } /* Phones. */ .hero__caption { display: block; } .hero__caption .live-dot { display: inline-block; margin-right: 8px; vertical-align: 1px; } /* ── Round 4 (judge round 3) ─────────────────────────────────────── */ .hero { padding-top: 92px; } /* The cue label inside split copy keeps its small mono size. */ .split .cue { font-size: 12px; margin-top: 0; } /* Spacing: no section pads more than ~120px. */ .run { padding: clamp(64px, 9vh, 120px) 0; } .transitions { padding-bottom: clamp(56px, 8vh, 110px); } .compare { padding: clamp(56px, 8vh, 100px) var(--gutter); } .faq { padding-bottom: clamp(56px, 8vh, 100px);} /* Editor header: title with its lede alongside. */ .editor__head { display: flex; justify-content: space-between; flex-wrap: wrap;} .editor__head .editor__title { padding: 0; } .editor__head p { color: var(--mute); font-size: 18px;} /* Teleprompter laptop: show the whole editor; fade the prompter's top line. */ /* Photo caption stays legible. */ .context__figure::after { content: ""; position: absolute; inset: 0; pointer-events: none;} .context__figure figcaption { z-index: 1; } /* Maker's note. */ .note__inner { margin: 0 auto;} .note blockquote { margin: 0; } .note blockquote p { color: var(--ivory); text-wrap: pretty;} .note figcaption { color: var(--mute);} .note figcaption b { color: var(--ivory); font-weight: 600; } /* Finale: the lamp, lit, behind the headline. */ .finale { position: relative; text-align: center; overflow: hidden; isolation: isolate;} .finale__beam { position: absolute; inset: 0; z-index: -2; background: radial-gradient(38% 42% at 50% 30%, rgba(244, 218, 161, 0.32), transparent 70%), radial-gradient(60% 60% at 50% 100%, rgba(237, 179, 65, 0.16), transparent 70%); } .finale__lamp { position: relative; z-index: -1; display: block; -webkit-mask-image: linear-gradient(#000 55%, transparent 96%); mask-image: linear-gradient(#000 55%, transparent 96%);} .finale__copy { position: relative; } /* ── Round 7: the lamp takes the stage (Apple product-hero layout) ───── */ .hero { padding: 0 var(--gutter); } .stage { position: relative; margin: 0 calc(-1 * var(--gutter)); height: max(640px, min(100svh, 1000px)); overflow: hidden; isolation: isolate; text-align: left; } .stage__room { position: absolute; inset: 0; z-index: -3; background: radial-gradient(34% 16% at 69% 97%, rgba(244, 218, 161, 0.2), transparent 70%), radial-gradient(60% 70% at 69% 28%, rgba(237, 179, 65, 0.1), transparent 70%), linear-gradient(#050506, #0a0806 70%, #050506); } .stage__beam { position: absolute; z-index: -2; left: calc(69% + 1% - 75vmax); top: 30%; width: 150vmax; height: 150vmax; pointer-events: none; background: conic-gradient(from 180deg at 50% 0%, transparent 152deg, rgba(244, 218, 161, 0.1) 166deg, rgba(255, 238, 205, 0.2) 180deg, rgba(244, 218, 161, 0.1) 194deg, transparent 208deg); -webkit-mask-image: radial-gradient(closest-side at 50% 0%, #000, transparent); mask-image: radial-gradient(closest-side at 50% 0%, #000, transparent); filter: blur(6px); opacity: 0; animation: beamOn 2.4s 1.35s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } .stage__lampwrap { --lw: min(92svh, 920px, 70vw); position: absolute; z-index: -1; left: calc(69% - var(--lw) / 2); bottom: -6%; width: var(--lw); aspect-ratio: 1; } .stage__lampwrap picture { display: block; width: 100%; height: 100%; animation: lampRise 2.2s 0.1s cubic-bezier(0.165, 0.84, 0.44, 1) both; } .stage__fg { position: absolute; inset: 0; pointer-events: none; } .stage__fg > * { pointer-events: auto; } .stage::after { content: ""; position: absolute; inset: auto 0 0; height: 18%; z-index: -1; background: linear-gradient(transparent, var(--ink)); pointer-events: none; } .stage__lamp { width: 100%; height: 100%; display: block; filter: brightness(0.9) contrast(1.08) drop-shadow(0 40px 60px rgba(0, 0, 0, 0.8)); -webkit-mask-image: linear-gradient(#000 62%, transparent 97%); mask-image: linear-gradient(#000 62%, transparent 97%); } .stage__flare { position: absolute; left: 54%; top: 21.6%; width: 30%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 252, 240, 0.95), rgba(244, 218, 161, 0.55) 22%, rgba(217, 154, 43, 0.16) 52%, transparent); mix-blend-mode: screen; opacity: 0; animation: ignite 1.4s 1s steps(1, end) forwards, breathe 6s 2.6s ease-in-out infinite; } .stage__flare::after { /* anamorphic streak */ content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 236, 200, 0.4), transparent);} @keyframes lampRise { from { opacity: 0; transform: translateY(6%) scale(1.04); filter: brightness(0.2); } to { opacity: 1; transform: none; filter: brightness(1); } } @keyframes ignite { 0% { opacity: 0.55; } 12% { opacity: 0.1; } 22% { opacity: 0.8; } 30% { opacity: 0.35; } 42%, 100% { opacity: 1; } } @keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } } @keyframes beamOn { to { opacity: 1; } } @keyframes riseIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } .stage__copy { position: absolute; left: max(var(--gutter), calc((100vw - 1260px) / 2)); bottom: clamp(56px, 9svh, 88px); margin: 0;} .stage__copy > * { animation: riseIn 1.2s cubic-bezier(0.165, 0.84, 0.44, 1) both; } .stage__name { font-size: clamp(22px, 2.2vw, 32px); line-height: 1.12; letter-spacing: 0.004em; font-weight: 600; color: var(--ivory); display: inline-flex; align-items: center; gap: 12px;} .stage__headline { margin-top: 10px; line-height: 1.02; letter-spacing: -0.035em; font-weight: 600; color: var(--ivory); text-shadow: 0 4px 40px rgba(0, 0, 0, 0.6);} .stage__headline em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; background: linear-gradient(90deg, #fff4dc, #F4CD7A 60%, #C98A1E); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.08em; } .stage__what { margin-top: 16px; font-size: 19px; line-height: 1.4; color: #a9a49c; max-width: 34ch;} .stage__buy { position: absolute; right: max(var(--gutter), calc((100vw - 1260px) / 2)); bottom: clamp(56px, 9svh, 88px); display: flex; align-items: center; gap: 24px; padding: 14px 14px 14px 26px; border-radius: 28px; background: rgba(28, 26, 24, 0.62); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); box-shadow: inset 0 0 0 1px rgba(255, 244, 220, 0.1), 0 20px 60px -20px rgba(0, 0, 0, 0.8); animation: riseIn 1.2s 1.35s cubic-bezier(0.165, 0.84, 0.44, 1) both; } .stage__buy p { font-size: 15px; line-height: 1.45; color: var(--ivory); } .stage__buy p b { font-weight: 600; } .stage__buy p span { color: #a9a49c; } .btn--amber { --bg: var(--amber);} .stage__halo { position: absolute; left: 54%; top: 21.6%; width: 120%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none; z-index: -1; background: radial-gradient(closest-side, rgba(244, 218, 161, 0.22), rgba(217, 154, 43, 0.07) 45%, transparent); opacity: 0; animation: beamOn 2s 1.4s ease-out forwards; } .hero__product { margin-top: -40px !important; position: relative; } @media (max-width: 900px) { .stage { height: auto; min-height: 0; padding: 72px var(--gutter) 28px; display: flex; flex-direction: column; } .stage__lampwrap { position: relative; left: auto; bottom: auto; width: min(100%, 440px); margin: 0 auto -14%; } .stage__beam { left: calc(50% - 75vmax); top: 14%; } .stage__copy, .stage__buy { position: relative; left: auto; right: auto; bottom: auto; top: auto; } .stage__fg { display: contents; } .stage { -webkit-mask-image: none; mask-image: none; } .stage__copy { order: 2; } .stage__what { font-size: 17px; } .stage__buy { order: 3; margin-top: 24px; flex-direction: column; align-items: stretch; text-align: left; gap: 14px; padding: 18px; border-radius: 22px; } .stage__buy .btn { justify-content: center; } } @media (prefers-reduced-motion: reduce) { .stage__lampwrap picture, .stage__copy > *, .stage__buy, .stage__beam, .stage__halo { animation: none; opacity: 1; } .stage__flare { animation: none; opacity: 1; } } .hero__caption .link--film { font-size: 13px; margin-left: 6px; } /* Any-show stage: the whole module (head, stage, tabs) fits one viewport. */ .shows { --sw: min(1180px, calc(100vw - 2 * var(--gutter)), calc((100svh - 330px) * 16 / 9)); } .shows .section-head h2 { margin-bottom: 0; } @media (max-width: 760px) { .shows { --sw: calc(100vw - 2 * var(--gutter)); } } /* Type scale (Apple-measured): section headlines 40–64px, never taller than ~7% of the viewport. */ :root { --h2: clamp(38px, min(4.5vw, 7.2vh), 64px); --h3: clamp(26px, min(2.8vw, 4.4vh), 40px); } .section-head h2, .split h2, .faq h2, .magic__copy h2, .rundown .section-head h2, .prompter .section-head h2, .color .section-head h2 { font-size: var(--h2); line-height: 1.04; letter-spacing: -0.03em; } .split h3 { font-size: var(--h3); } .section-lede { margin-top: 18px;} /* Editor pager: head on one line, window sized so head + caption + window + dots fit one viewport. */ .editor__title { max-width: none; font-size: clamp(34px, min(3.8vw, 6.2vh), 56px); } .editor__card { padding-top: clamp(24px, 4vh, 48px); } /* Rundown: the LIVE frame follows the scroll. */ /* Color: the scope tabs are hotspots on the Color window's own tab bar (no duplicate pills). */ @media (min-width: 701px) { .grade__frame .grade__tabs { position: absolute; left: 23.1%; top: 66.9%; width: 24.1%; height: 3.4%; margin: 0; gap: 0; flex-wrap: nowrap; } .grade__frame .grade__tabs button { flex: 0 0 auto; height: 100%; padding: 0; border: 0; border-radius: 6px; color: transparent; background: transparent; font-size: 0; } .grade__frame .grade__tabs button:nth-child(1) { width: 23.7%; } .grade__frame .grade__tabs button:nth-child(2) { width: 24.4%; } .grade__frame .grade__tabs button:nth-child(3) { width: 26%; } .grade__frame .grade__tabs button:nth-child(4) { width: 25.9%; } .grade__frame .grade__tabs button[aria-selected="true"] { background: transparent; } .grade__frame .grade__tabs button:hover, .grade__frame .grade__tabs button:focus-visible { background: rgba(255, 244, 220, 0.12); box-shadow: 0 0 0 1px rgba(237, 179, 65, 0.7); outline: none; } .grade__frame .grade__tabs::after { content: "Try the scopes"; position: absolute; left: calc(100% + 12px); top: 50%; translate: 0 -50%; white-space: nowrap; font-size: 12px; font-family: var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--amber); padding: 4px 10px; border-radius: 999px; background: rgba(8, 8, 10, 0.8); box-shadow: inset 0 0 0 1px rgba(237, 179, 65, 0.4); animation: nudge 2.4s ease-in-out infinite; pointer-events: none; } .grade__frame .grade__tabs.is-tried::after { opacity: 0; transition: opacity 0.4s; animation: none; } } @keyframes nudge { 0%, 100% { translate: 0 -50%; } 50% { translate: -4px -50%; } } @media (max-width: 700px) { .grade__frame { overflow: visible; } .grade__frame canvas { border-radius: 14px; } .grade__tabs { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; padding-bottom: 2px; } .grade__tabs::-webkit-scrollbar { display: none; } .grade__tabs button { flex: 0 0 auto; } } /* Round 8 polish (judge round 7). */ .note blockquote p { font-family: var(--sans);} .finale__sub { max-width: 34em; margin-left: auto; margin-right: auto; } .section-lede, .split p { max-width: 34em; } .footer { padding: 36px 0 48px; } .footer__inner { padding: 0 var(--gutter); } /* Hero hand-off: the copy is gone before the editor window reaches it. */ .stage__fg { will-change: opacity, transform; } /* Price lives with the copy (left column), clear of the lamp. */ .stage__copy .stage__buy { position: static; margin-top: 28px; display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 20px; padding: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0; animation: riseIn 1.2s cubic-bezier(0.165, 0.84, 0.44, 1) both; animation-delay: 1.26s; } .stage__copy .stage__buy p { font-size: 14px; } @media (max-width: 900px) { .stage__copy .stage__buy { display: flex; flex-direction: column; align-items: stretch; gap: 12px; } .stage__copy .stage__buy .btn { justify-content: center; } } /* Vertical rhythm: ~150px between sections' content (measured with gaps.mjs). */ .transitions { margin-top: 80px; } .compare { margin-top: 80px; } @media (max-width: 760px) { .transitions, .context, .compare { margin-top: 40px; } .faq { margin-top: -30px; } } @media (max-width: 760px) { .color__pin { padding-top: 72px;} .color { padding-top: 0; } } /* ── Brand palette (sampled from the app icon and the lamp render) ───────── Tungsten #EDB341 · Filament #F4DAA1 · Brass #C98A1E · Titanium #AEACA7 · Graphite #5B5954 · Stage #050506 · Tally #E5484D */ :root { --tungsten: #EDB341; --filament: #F4DAA1; --brass: #C98A1E; --titanium: #AEACA7; --graphite: #5B5954; --tally: #E5484D; --amber: var(--tungsten); --serif: var(--sans); --titanium-text: linear-gradient(180deg, #ECE9E3 0%, #C4C1BB 55%, #8E8B84 100%); } /* One type family. The second line of a headline is the same sans, lighter, in brushed titanium. */ em, .stage__headline em { font-family: var(--sans); font-style: normal; font-weight: 500; letter-spacing: inherit; background: var(--titanium-text); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0; } /* The call to action is the icon's lit field: filament at the hot spot falling off to tungsten and brass. */ .btn--amber { background: radial-gradient(130% 160% at 28% 0%, #F7E2B0 0%, var(--tungsten) 52%, #D9982A 100%); color: #21190B; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(120, 76, 10, 0.35), 0 8px 24px -10px rgba(237, 179, 65, 0.55); } .btn--amber:hover { background: radial-gradient(130% 160% at 28% 0%, #FAEAC4 0%, #F1BE55 52%, #DFA235 100%); } .stage__copy { max-width: min(820px, 58vw); } .stage__headline { font-size: clamp(42px, min(5.1vw, 8.4vh), 76px); text-wrap: nowrap; } @media (max-width: 900px) { .stage__copy { max-width: none; } .stage__headline { text-wrap: balance; font-size: clamp(32px, 9vw, 56px); } } /* ── Round 9 (judge round 8) ─────────────────────────────────────── */ /* Editor pager: show the whole window, then zoom to the selection and its inspector so the UI reads. */ /* "See it run": a text link, not a browser button. */ .link--film { background: none; border: 0; padding: 0; font: inherit; color: var(--amber); cursor: pointer; } /* Phone: no negative pull on the sources section (it overlapped the show tabs). */ @media (max-width: 760px) { .shows {} } /* Touch devices have no arrow keys. */ @media (hover: none) { .keys { display: none; } } /* One family: cue eyebrows and small captions in the sans, set as small caps. */ :root { --mono: var(--sans); } .cue, .finale__note, .grade__meter, .onair__tag { font-variant-numeric: tabular-nums; letter-spacing: 0.08em; font-weight: 600; } .cue { font-size: 13px; } /* Magic Move is the hero moment: copy above, the stage wide, the three beats in a row beneath. */ .magic__pin { max-width: none;} .magic__copy { order: -1; text-align: center; } .magic__copy .cue { justify-content: center; } @media (max-width: 760px) { .magic__copy h2 em { display: block; margin: 0; } } /* Finale: the lamp stands above the headline, not through it. */ .finale h2 { text-wrap: balance; } @media (max-width: 600px) { .finale h2 {} } /* Compare page: the "falls short" note gets a full section gap before Questions. */ .cmp .faq { margin-top: clamp(72px, 10vh, 120px); } /* Don't flash the editor window before the stage paints. */ .hero__product { animation: riseIn 1s 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) both; } /* One grid: every left-aligned headline starts on the same edge as the hero copy (1260px container). */ :root { --edge: max(var(--gutter), calc((100vw - 1260px) / 2)); } .section-head:not(.section-head--center) { max-width: none; margin: 0; padding-left: var(--edge); padding-right: var(--edge); } .split, .proof { max-width: none; padding-left: var(--edge); padding-right: var(--edge); } @media (max-width: 760px) { .editor__head { padding-left: 20px; padding-right: 20px; } } @media (max-width: 760px) { .shows { padding-bottom: 0 !important; } } /* ── Round 10 (judge round 9) ─────────────────────────────────────── */ /* One grid for containers too: nav, cards and grids start on the hero's edge. */ .nav__inner, .footer__inner { max-width: none; width: auto; margin-left: 0; margin-right: 0; padding-left: var(--edge); padding-right: var(--edge); } .footer { padding-left: 0; padding-right: 0; } .hero__product { max-width: none; margin-left: calc(var(--edge) - var(--gutter)); margin-right: calc(var(--edge) - var(--gutter)); } /* Centered media either spans the grid or is sized to the viewport height; never an arbitrary width. */ .magic__pin { padding-top: 64px;} @media (max-width: 760px) { .magic__stage {} } /* Hero caption: the phone shows only the canvas crop. */ .cap--narrow { display: none; } @media (max-width: 600px) { .cap--wide { display: none; } .cap--narrow { display: inline; } } /* Teleprompter laptop: the editor behind the prompter stays readable. */ /* Tap targets: 44px hit areas around small controls. */ .link--film, .footer nav a { display: inline-block; padding: 12px 0; margin: -12px 0; } /* Finale price line never breaks mid-price. */ .finale__sub { text-wrap: balance; } /* Compare and subpage CTAs match the home page. */ .finale__note { text-align: center; margin-left: auto; margin-right: auto; } .finale--compact .btn:not(.btn--small), .cmp .finale .btn { background: radial-gradient(130% 160% at 28% 0%, #F7E2B0 0%, var(--tungsten) 52%, #D9982A 100%); color: #21190B; } .prompter__stage { max-width: none; padding-left: var(--edge); padding-right: var(--edge); } /* Program bug: marks real ArcLight output on video panels. */ @media (max-width: 600px) { .finale h2 { font-size: clamp(32px, 9.4vw, 44px) !important; } } /* ── Round 11 (judge round 10) ─────────────────────────────────────── */ /* One stage width for the big media moments (Magic Move, any-show, editor pager), grid-bound and viewport-fitted. */ :root { --stage: min(calc(100vw - 2 * var(--edge)), calc((100svh - 320px) * 16 / 9)); } .shows { --sw: var(--stage); } .editor__head { padding-left: clamp(24px, 3vw, 48px); padding-right: clamp(24px, 3vw, 48px); } @media (max-width: 760px) { :root { --stage: calc(100vw - 2 * var(--gutter)); } .editor { padding-left: var(--gutter); padding-right: var(--gutter); } } /* One section-headline size. */ .editor__title, .magic__copy h2, .proof__head h2, .compare h2 { font-size: var(--h2) !important; line-height: 1.04; letter-spacing: -0.03em; } .note h2 { font-size: var(--h3); } /* Real 44px targets: the pager dots are 20×44 buttons with the visible dot drawn inside. */ @media (max-width: 760px) { .nav .btn { min-height: 44px; display: inline-flex; align-items: center; } .nav .brand { padding-block: 8px; } .hero__caption { padding: 0 var(--gutter); } } /* Color hint: a quiet sentence-case label, not a pill. */ .grade__frame .grade__tabs::after { content: "← Try the scopes" !important; text-transform: none !important; font-family: var(--sans) !important; letter-spacing: 0 !important; font-size: 12px !important; background: none !important; box-shadow: none !important; padding: 0 !important; color: var(--filament) !important; } /* ON AIR sits on the frame's edge, clear of the picture-in-picture. */ .onair__tag { top: -11px !important; right: 14px !important; left: auto !important; } .onair__frame { overflow: visible; } .onair__frame > img { border-radius: 12px; } /* ── Round 12 (judge round 11) ─────────────────────────────────────── */ button, input, select, textarea { font: inherit; } .btn { font-family: var(--sans); } /* Context photo: on the grid, a legible caption. */ .context { padding-left: 0; padding-right: 0; } .context__figure { margin-left: var(--edge); margin-right: var(--edge);} /* Presenter view: bigger, and cropped toward the clock, next slide and notes so the UI reads. */ /* Finale: no smudgy shadow; full-width signup button on phone. */ .finale h2 { text-shadow: none !important; } /* Phone: the statement doesn't reserve a full screen. */ @media (max-width: 780px) { .statement { min-height: auto !important; } } /* Toolbox tile: content centered, no dead band. */ /* ── AI co-host ─────────────────────────────────────────────────── */ .cohost { padding: clamp(96px, 14vh, 160px) 0 clamp(40px, 6vh, 80px); } .cohost__stage { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.35fr); gap: clamp(20px, 2.4vw, 36px); padding: 0 var(--edge);} .cohost__chat { border-radius: 18px; background: #0d0c0b; box-shadow: inset 0 0 0 1px var(--line), 0 40px 100px -40px rgba(0, 0, 0, 0.9); overflow: hidden; } .cohost__bar { display: flex; align-items: center; gap: 7px; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--mute); } .cohost__bar i { width: 11px; height: 11px; border-radius: 50%; background: #3a3835; } .cohost__bar span { margin-left: 8px; font-weight: 600; } .cohost__log { list-style: none; margin: 0; padding: 18px 20px 22px; display: grid; gap: 12px; font-family: ui-monospace, "SF Mono", Menlo, monospace; line-height: 1.5; color: #cfcac2;} .cohost__log b { font-weight: 600; margin-right: 6px; } .cohost__log .you { color: var(--ivory); } .cohost__log .you b { color: var(--tungsten); } .cohost__log .tool b { color: var(--tungsten); } .cohost__log .tool code { color: var(--filament); font-family: inherit; } .cohost__log .tool span { color: var(--mute); } .cohost__log .done { color: #9fd6a8; } .cohost__monitor { margin: 0; } .cohost__screen { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 9; background: #000; box-shadow: 0 0 0 1px var(--line), 0 50px 140px -40px rgba(237, 179, 65, 0.3); } .cohost__screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cohost__next { opacity: 0; } .cohost__monitor figcaption { margin-top: 12px; font-size: 13px; color: var(--mute); } /* The session plays once when it scrolls in: prompt, tool calls, then the take lands on the program. */ .cohost__log li { opacity: 0; transform: translateY(6px); } .cohost__chat.is-in .cohost__log li { animation: logIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } .cohost__chat.is-in .cohost__log li:nth-child(3) { animation-delay: 0.3s; } @keyframes logIn { to { opacity: 1; transform: none; } } @keyframes takeIn { to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .cohost__log li, .cohost__next { opacity: 1 !important; transform: none !important; animation: none !important; } } @media (max-width: 900px) { .cohost__stage { grid-template-columns: 1fr; padding: 0 var(--gutter); } } /* AI demo: the agent's edit appears outlined in the editor, then the take puts it on air. */ .cohost__screen { transition: box-shadow 0.4s; } .cohost__edit { position: absolute; border: 2px dashed var(--tungsten); border-radius: 8px; opacity: 0; pointer-events: none;} .cohost__edit--host { left: 16%; width: 21.2%; } .cohost__edit--guest { left: 62.8%; width: 21.2%; } .cohost__edit em { position: absolute; left: -2px; top: -24px; font-style: normal; font-size: 11px; font-weight: 600; color: #21190B; padding: 2px 8px; border-radius: 6px 6px 6px 0; background: var(--tungsten); white-space: nowrap; } .cohost__label { position: absolute; top: 14px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--ivory); background: rgba(10, 9, 8, 0.62); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255, 244, 220, 0.12);} .cohost__label > span { display: inline-flex; align-items: center; gap: 7px;} .cohost__label .l-live { opacity: 0; } .cohost__label i { width: 7px; height: 7px; border-radius: 50%; background: var(--tally); box-shadow: 0 0 8px var(--tally); } @media (prefers-reduced-motion: reduce) { .cohost__edit { opacity: 0 !important; } .cohost__label .l-edit { opacity: 0; } .cohost__label .l-live {} } /* Phone terminal: tighter type with a hanging indent; lines take no space until they play. */ @media (max-width: 760px) { .cohost__log { font-size: 13px;} .cohost__log { gap: 10px; } .cohost__log li { padding-left: 1.4em; text-indent: -1.4em; } } @media (max-width: 760px) { .magic__pin { padding-bottom: 24px;} } .cohost__label { left: auto; right: 14px; } /* AI demo retimed: the agent's edit holds on screen ~2.8 s before the take. */ .cohost__log li.past, .cohost__log li.you { opacity: 1; transform: none; } .cohost__chat.is-in .cohost__log li:nth-child(4) { animation-delay: 1.2s; } .cohost__chat.is-in .cohost__log li:nth-child(5) { animation-delay: 2.6s; } .cohost__chat.is-in .cohost__log li:nth-child(6) { animation-delay: 4.3s; } .cohost__chat.is-in .cohost__log li:nth-child(7) { animation-delay: 5.2s; } .cohost__chat.is-in .cohost__log li:nth-child(8) { animation-delay: 6s; } .cohost__chat.is-in ~ .cohost__monitor .cohost__next { animation: takeIn 0.5s 1.4s ease-out forwards !important; } .cohost__chat.is-in ~ .cohost__monitor .cohost__edit { animation: editOn2 3.4s 1.4s ease-out forwards; } .cohost__chat.is-in ~ .cohost__monitor .cohost__screen { animation: takeFlash 0.5s 4.4s ease-out forwards; } @keyframes editOn2 { 0% { opacity: 0; } 8%, 88% { opacity: 1; } 100% { opacity: 0; } } @keyframes takeFlash { 0% { filter: none; } 30% { filter: brightness(0.55); } 100% { filter: none; box-shadow: 0 0 0 2px var(--tally), 0 50px 140px -40px rgba(229, 72, 77, 0.35); } } #magic-move .magic__copy { margin-bottom: 28px; } .matrix td.us, .matrix th.us { min-width: 150px; } .cohost__edit { top: 73.6%; height: 11.8%; } /* ── Round 16 (judge round 15) ─────────────────────────────────────── */ /* AI label sizes to its current text. */ .cohost__label { display: inline-flex; } .cohost__label > span { grid-area: auto; overflow: hidden; white-space: nowrap; transition: max-width 0.3s, opacity 0.25s; } .cohost__label .l-edit { max-width: 200px; } .cohost__label .l-live { max-width: 0; } .cohost__chat.is-in ~ .cohost__monitor .l-edit { animation: shrinkOut 0.3s 4.5s forwards !important; } .cohost__chat.is-in ~ .cohost__monitor .l-live { animation: growIn 0.3s 4.5s forwards !important; } @keyframes shrinkOut { to { max-width: 0; opacity: 0; } } @keyframes growIn { to { max-width: 120px; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .cohost__label .l-edit { max-width: 0; } .cohost__label .l-live { max-width: 120px; opacity: 1; } } /* Desktop rhythm after the any-show tabs. */ @media (min-width: 761px) { .shows { padding-bottom: 140px !important; } } /* Phone: pinned scenes centered in the screen, no empty band beneath. */ @media (max-width: 760px) { .magic__pin { min-height: 100svh !important; padding-top: 60px;} .color__pin { min-height: 100svh !important;} .grade__tabs { display: grid !important; overflow: visible; margin-top: 12px;} } /* Hero lens flare: soft rays and the anamorphic streak turn slowly, like a glint on a real lens. */ .stage__flare::before { content: ""; position: absolute; left: 50%; top: 50%; width: 230%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none; background: repeating-conic-gradient(from 0deg, transparent 0deg, rgba(255, 236, 200, 0.08) 1.5deg, transparent 3deg 40deg); -webkit-mask-image: radial-gradient(closest-side, #000 8%, rgba(0, 0, 0, 0.35) 40%, transparent 72%); mask-image: radial-gradient(closest-side, #000 8%, rgba(0, 0, 0, 0.35) 40%, transparent 72%); mix-blend-mode: screen; animation: flareSpin 60s linear infinite; } .stage__flare::after { animation: none; } @keyframes flareSpin { from { rotate: 0deg; } to { rotate: 360deg; } } @media (prefers-reduced-motion: reduce) { .stage__flare::before, .stage__flare::after { animation: none; } } .brand__mark { border-radius: 0 !important; object-fit: contain;} .brand__mark { width: 30px; height: 30px; filter: brightness(1.35) contrast(1.1) drop-shadow(0 0 6px rgba(244, 218, 161, 0.4)); } /* ── On a call: one meeting window, two ways to send it ─────────────── */ /* ── Round 17 (judge round 16) ─────────────────────────────────────── */ /* Heading rhythm: chapter headlines larger, supporting ones smaller. */ #magic-move h2, #ai h2, #color h2, #teleprompter h2 { font-size: clamp(42px, min(5.6vw, 8.6vh), 80px) !important; } .proof__head h2, .who h2, .faq h2, .compare h2 { font-size: clamp(32px, min(3.4vw, 5.4vh), 48px) !important; } /* AI panels: top-aligned, same height. */ .cohost__monitor { display: flex; flex-direction: column; } /* Teleprompter: the on-air tile centred against the laptop. */ .prompter__stage { align-items: center; } /* Compare teaser and FAQ are separate beats. */ .faq { margin-top: 0 !important; padding-top: clamp(96px, 14vh, 160px) !important; } .faq > h2 { border-top: 1px solid var(--line); padding-top: 48px; } /* Phone: the scopes hint points nowhere once the tabs sit below; footer links wrap evenly. */ @media (max-width: 900px) { .grade__frame .grade__tabs::after { display: none !important; } } @media (max-width: 600px) { .footer nav { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 4px 20px; } } /* Maker's note: portrait beside the quote. */ @media (max-width: 600px) { .note__inner { grid-template-columns: 1fr; text-align: left; } .note__photo { width: 88px; } } /* ── Round 18 (judge round 17) ─────────────────────────────────────── */ /* Every "Cue" chapter headline shares one size. */ #slides h2, #zoom h2, #outputs h2, #sources h2, #shows h2 { font-size: clamp(42px, min(5.6vw, 8.6vh), 80px) !important; } /* Official Mac App Store badge (Apple artwork, unmodified): ≥40px tall, clear space ≥¼ of its height. */ .appstore-badge { display: inline-block; margin: 14px 0 4px; padding: 0; line-height: 0; border-radius: 10px; transition: opacity 0.2s; } .appstore-badge img { height: 52px; width: auto; display: block; } .appstore-badge:hover { opacity: 0.85; } .appstore-badge:focus-visible { outline: 2px solid var(--tungsten); outline-offset: 4px; } /* ── Round 19 (judge round 18) ─────────────────────────────────────── */ .cohost__log li.past { color: #7d7973; } .cohost__log li.past b { color: #7d7973; } .cohost__log li.past:nth-child(2) { margin-bottom: 8px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } /* Active-speaker view: Marcus is presenting, so his feed is the big tile. */ .magic__copy h2 em { margin-left: 0 !important; } /* #download fits one screen under the nav on a laptop: everything scales with the viewport height. */ .finale { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: clamp(16px, 3svh, 40px) var(--gutter) clamp(20px, 4svh, 48px) !important; box-sizing: border-box;} .finale__lamp { width: auto !important; margin: 0 auto clamp(4px, 1.5svh, 18px) !important;} .finale h2 { font-size: clamp(36px, min(6.6vw, 8.2svh), 96px) !important; line-height: 0.98; } .finale__sub { margin: clamp(10px, 2.2svh, 26px) auto clamp(6px, 1.4svh, 16px) !important; } .finale .appstore-badge { margin: clamp(6px, 1.6svh, 16px) 0 clamp(4px, 1svh, 10px); } .finale__note { margin-top: clamp(6px, 1.2svh, 14px) !important; } /* ── Round 20 (judge round 19) ─────────────────────────────────────── */ /* Phone call window, webcam mode: stay inside the stage. */ @media (max-width: 760px) { /* Section rhythm on phone: no dead bands. */ .cohost { padding-bottom: 40px; } /* Color scopes: one row of compact chips. */ .grade__tabs { grid-template-columns: repeat(4, 1fr) !important; gap: 6px; } .grade__tabs button { min-height: 36px; padding: 6px 4px; font-size: 12px; } /* Magic Move steps: room between rows. */ } /* Toolbox card hugs its list. */ /* ---- Round 21: Magic Move opens full-bleed, then lands in its card ---- */ .magic__pin { position: relative; overflow: hidden; height: 100svh; min-height: 0 !important;} .magic__copy { margin: 0 !important; transform-origin: 50% 50%;} .magic__copy .cue { margin-bottom: 8px; } .magic__copy h2 br { display: inline !important; } .magic__copy h2 em { display: inline-block; margin: 0 !important; } .magic__stage { width: min(calc(100vw - 2 * var(--edge)), calc((100svh - 330px) * 16 / 9)) !important; } .magic__stage { position: relative; z-index: 1; transform-origin: 50% 50%; } .magic__scrim { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; border-radius: 14px;} .js .magic__scrim { opacity: 1; } /* ---- Round 21: Color opens as a full-bleed grade wipe, then folds into the Color window ---- */ .color__pin { position: relative; overflow: hidden; } .wipe { position: absolute; inset: 0 0 auto; height: 100vh; height: 100svh; z-index: 4; display: none;} .js .wipe { display: block; } .wipe picture, .wipe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; } .wipe__after { clip-path: inset(0 calc(100% - var(--wipe, 0%)) 0 0); } .wipe__line { position: absolute; top: 0; bottom: 0; left: var(--wipe, 0%); width: 2px; margin-left: -1px; background: rgba(255, 247, 230, 0.95); box-shadow: 0 0 24px rgba(237, 179, 65, 0.8); } .wipe__tag { position: absolute; top: 96px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; background: rgba(10, 10, 12, 0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff; } .wipe__title { position: absolute; left: var(--edge); right: var(--edge); bottom: clamp(32px, 8svh, 88px); margin: 0; color: #fff; font-weight: 600; letter-spacing: -0.035em; line-height: 0.98; font-size: clamp(48px, min(8.4vw, 13svh), 144px); text-shadow: 0 2px 40px rgba(0, 0, 0, 0.45); } .wipe__title em { font-style: normal; background: none; -webkit-text-fill-color: #fff; color: #fff; display: block; } .wipe__title .cue { display: flex; margin-bottom: 14px; font-size: 13px; text-shadow: none; } .wipe::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, 0.55)); pointer-events: none; } @media (max-width: 700px) { .wipe__title { font-size: clamp(40px, 12vw, 56px); bottom: 40px; } .wipe__tag { top: 72px; font-size: 12px; } } @media (max-width: 700px) { .wipe__title em { display: inline; } } /* ---- Round 21: the teleprompter reads full screen; each cue cuts the program behind it ---- */ .prompter__pin { position: relative;} /* ---- Round 21: live effects, full bleed ---- */ .fx { padding: clamp(96px, 14vh, 160px) 0 clamp(48px, 8vh, 96px); overflow-x: clip; } .fx__head { margin: 0 auto clamp(40px, 6vh, 72px); text-align: center;} .fx__head h2 { font-size: clamp(44px, min(7.6vw, 11svh), 128px) !important; line-height: 0.98; letter-spacing: -0.045em; margin: 0 0 24px; } .fx__head h2 em { display: block; } .fx__head p { max-width: 640px; margin: 0 auto; color: var(--mute); font-size: clamp(17px, 1.4vw, 21px); line-height: 1.45; } .fx__stage { margin: 0; width: 100vw; transform-origin: 50% 0; } .fx__stage video { display: block; width: 100%; aspect-ratio: 1600 / 988; object-fit: cover;} .fx__stage figcaption { width: calc(100vw - 2 * var(--edge)); margin: 14px auto 0; font-size: 13px; color: var(--mute-2); text-align: center; } @media (max-width: 700px) { .fx__head h2 em { display: inline; } } /* ---- Round 21: the co-host session plays on scroll (JS adds .is-scrubbed) ---- */ .cohost.is-scrubbed .cohost__log li, .cohost.is-scrubbed .cohost__next, .cohost.is-scrubbed .cohost__edit, .cohost.is-scrubbed .l-edit, .cohost.is-scrubbed .l-live, .cohost.is-scrubbed .cohost__screen { animation: none !important; } .cohost.is-scrubbed .cohost__log li { transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); } .cohost.is-scrubbed .cohost__log li.is-shown, .cohost.is-scrubbed .cohost__log li.past, .cohost.is-scrubbed .cohost__log li.you { opacity: 1; transform: none; } .cohost.is-scrubbed .cohost__next { transition: opacity 0.5s var(--ease); } .cohost.is-scrubbed .cohost__edit { transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); transform: scale(1.08); } .cohost.is-edited .cohost__next { opacity: 1; } .cohost.is-edited .cohost__edit { opacity: 1; transform: none; } .cohost.is-live .cohost__edit { opacity: 0; } .cohost.is-scrubbed .l-edit, .cohost.is-scrubbed .l-live { transition: opacity 0.3s; } .cohost.is-live .l-edit { opacity: 0; } .cohost.is-live .l-live { opacity: 1; } .cohost.is-live .cohost__screen { box-shadow: 0 0 0 2px var(--tally), 0 30px 90px -30px rgba(229, 72, 77, 0.45); } .cohost__stage { align-items: stretch; } .cohost__chat { display: flex; flex-direction: column; } .cohost__log { flex: 1; align-content: start; } /* ---- Round 21: "One laptop. No crew." as a full-bleed parallax break ---- */ .context { padding: 0 !important; margin-top: clamp(64px, 10vh, 120px); } .context__figure { margin: 0 !important; max-width: none !important; border-radius: 0 !important; min-height: 460px;} .context__figure :is(img, video) { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover;} .context__figure figcaption { font-size: clamp(48px, min(8vw, 12svh), 136px) !important; line-height: 0.96; letter-spacing: -0.045em !important;} .context__figure.reveal-zoom, .context__figure.reveal-zoom.is-in { transform: none !important; opacity: 1 !important; } @media (max-width: 700px) { .context__figure {} .context__figure :is(img, video) {} } /* ---- Round 21: "Built for the Mac" as one big number ---- */ .proof { text-align: center; padding-top: clamp(80px, 12vh, 140px); } .proof__head { display: block; margin: 0 auto 8px; } .proof__head h2 { max-width: none; margin: 0 auto 12px; } .proof__head p { margin: 0 auto; max-width: 44ch; } .proof__row { grid-template-columns: repeat(3, 1fr) !important; background: none; border-radius: 0; overflow: visible; gap: 0;} .proof__row div { background: none; padding: 22px 20px 0; } .proof__row div:first-child { border-bottom: 0;} .proof__row div:first-child dd { font-size: clamp(18px, 1.6vw, 24px); color: var(--ivory); max-width: 30ch; margin: 8px auto 0; } .proof__row div:nth-child(n+3) { border-left: 1px solid var(--line); } .proof__note { text-align: center; font-size: 13px; margin-top: 22px; } @media (max-width: 700px) { .proof__row { grid-template-columns: 1fr !important; } .proof__row div:nth-child(n+3) { border-left: 0; } .proof__row div:not(:first-child) { display: grid; grid-template-columns: 92px 1fr; align-items: center; text-align: left; gap: 12px; padding: 16px 0; } .proof__row div:not(:first-child) dd { margin: 0; } } /* ---- Round 22: prompter legibility — deeper scrim, pill clear of the slide title ---- */ /* ---- Round 22: the co-host headline pins with its session ---- */ .cohost { padding-top: clamp(40px, 6vh, 72px); } .cohost__pin { height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 64px 0 24px; box-sizing: border-box; } .cohost__pin .section-head { margin-bottom: 0; } .cohost__pin .section-lede { max-width: 62ch; } .cohost__stage { margin-top: clamp(20px, 3.5vh, 40px); width: 100%; box-sizing: border-box; } @media (max-width: 760px) { .cohost__pin { justify-content: flex-start; padding-top: 72px; } .cohost__stage { gap: 12px; } .cohost__chat { max-height: 230px; } .cohost__log { justify-content: end; align-content: end; overflow: hidden; } .cohost__log li.past { display: none; } } @media (max-width: 760px) { .cohost.is-scrubbed .cohost__log li:not(.is-shown):not(.past):not(.you) { display: none; } } /* ---- Round 22: the show sequence — navigator strip under the Magic Move stage ---- */ .magic__lede { margin: 10px auto 0; line-height: 1.45;} .magic__lede kbd { font: inherit; font-size: 0.85em; padding: 1px 7px; border-radius: 6px; border: 1px solid var(--line); color: var(--ivory); } .magic__strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); opacity: 0; width: min(calc(100vw - 2 * var(--edge)), calc((100svh - 330px) * 16 / 9));} .magic__strip li { position: relative; } .magic__strip img { display: block; width: 100%; border-radius: 7px; object-fit: cover; box-shadow: 0 0 0 1px var(--line); opacity: 0.5; transition: opacity 0.35s, box-shadow 0.35s;} .magic__strip span { display: block; color: var(--mute-2); transition: color 0.35s;} .magic__strip b { font-weight: 600; margin-right: 4px; font-variant-numeric: tabular-nums; } .magic__strip li.is-past img { opacity: 0.35; } .magic__strip li.is-live img { opacity: 1; box-shadow: 0 0 0 2px var(--tally), 0 8px 30px -8px rgba(229, 72, 77, 0.6); } .magic__strip li.is-live span { color: var(--ivory); } .magic__strip li.is-live span::after { content: "Live"; margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: var(--tally); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } html:not(.js) .magic__strip { opacity: 1; } @media (max-width: 760px) { .magic__strip { width: calc(100vw - 2 * var(--gutter));} .magic__lede { font-size: 15px; } } @media (max-width: 760px) { .magic__stage, .magic__strip {} } @media (min-width: 761px) { .magic__pin {} .magic__stage, .magic__strip { width: min(calc(100vw - 2 * var(--edge)), calc((100svh - 450px) * 16 / 9)) !important; } } /* ---- Round 22: hero as one shot — the lamp's light falls, and the editor rises into it (desktop) ---- */ .hero.is-pinned { height: 100vh; height: 100svh; overflow: hidden; } .hero.is-pinned .stage { height: 100%; } .hero.is-pinned .hero__product { position: absolute; inset: 0; margin: 0 !important; padding: 64px var(--edge) 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; animation: none; pointer-events: none; z-index: 2; } .hero.is-pinned .window { width: min(100%, calc((100svh - 150px) * 1.83)); pointer-events: auto; transform-origin: 50% 100%; } .hero.is-pinned .window::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none; opacity: var(--lit, 0); box-shadow: 0 -40px 160px -20px rgba(237, 179, 65, 0.55), 0 0 0 1px rgba(244, 218, 161, 0.35); } .hero.is-pinned .hero__caption { opacity: 0; pointer-events: auto; } /* ---- Round 23: the show stays big — headline over the full-bleed open, then it clears; stage lands at ~88vw ---- */ .magic__pin { display: flex !important; flex-direction: column; align-items: center; justify-content: center !important; gap: 12px !important; padding: 60px 0 14px !important; } .magic__copy { position: absolute !important; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 3; pointer-events: none; padding: 0 var(--edge); } .magic__copy h2 { font-size: clamp(52px, min(8.8vw, 14svh), 140px) !important; line-height: 0.96 !important; letter-spacing: -0.045em !important; text-shadow: 0 4px 60px rgba(0, 0, 0, 0.5); } .magic__copy h2 em { -webkit-text-fill-color: currentColor; background: none; color: rgba(255, 255, 255, 0.78); } .magic__lede { color: rgba(255, 255, 255, 0.85); text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6); font-size: clamp(16px, 1.5vw, 21px) !important; max-width: 40ch; } .magic__stage, .magic__strip { width: min(88vw, calc((100svh - 150px) * 16 / 9)) !important; } .magic__stage canvas { background: #000 url("../media/seq-interview/000.jpg") center / cover no-repeat; } .magic__strip { gap: 8px; } .magic__strip img { aspect-ratio: 16 / 9; height: auto; } .magic__strip span { margin-top: 4px; font-size: 11.5px; } @media (min-width: 761px) { .magic__strip { justify-content: center;} } @media (max-width: 760px) { .magic__pin { padding: 64px 0 20px !important; } .magic__stage, .magic__strip { width: calc(100vw - 2 * var(--gutter)) !important; } .magic__copy h2 { font-size: clamp(40px, 11vw, 52px) !important; } } .magic__now { display: none; } @media (max-width: 760px) { .magic__now { display: flex; align-items: center; gap: 12px; order: 1; font-weight: 600; letter-spacing: -0.03em; color: var(--ivory); opacity: 0;} .magic__now kbd { font: inherit; font-size: 18px; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--line); color: var(--tungsten); } .magic__stage { order: 0; } .magic__strip { order: 2; } } /* ---- Round 23: one Color headline; the wipe lands in the viewer ---- */ .js .color__pin > .section-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .wipe { transform-origin: 50% 50%; will-change: transform; } .wipe__title { z-index: 3 !important; } .wipe__line { z-index: 2; } .wipe__tag--after { right: 18px; } .wipe__tag--before { left: 18px; } /* ---- Round 23: the statement pins full screen, centered and large ---- */ .statement { max-width: none !important; min-height: 0 !important; height: 100vh; height: 100svh; padding: 60px var(--edge) 0 !important; display: grid; place-items: center; box-sizing: border-box; } .statement__text { max-width: 1120px; margin: 0 auto; text-align: center; font-size: clamp(36px, min(6.4vw, 10.5svh), 96px) !important; line-height: 1.04 !important; letter-spacing: -0.04em !important; text-wrap: balance; } /* ---- Round 23: the hero lands fast — lamp and headline together, within a second ---- */ .stage__lampwrap picture { animation-duration: 1.4s !important; animation-delay: 0s !important; } .stage__copy > * { animation-duration: 0.9s !important; } .stage__name { animation-delay: 0.15s !important; } .stage__headline { animation-delay: 0.25s !important; } .stage__what { animation-delay: 0.35s !important; } .stage__buy { animation-delay: 0.45s !important; } /* ---- Round 23: three type levels — moments, sections, supporting ---- */ :root { --t-moment: clamp(48px, min(8vw, 12.5svh), 120px); --t-section: clamp(36px, min(4.4vw, 7svh), 64px); --t-support: clamp(30px, min(2.9vw, 4.8svh), 40px); } .magic__copy h2, .wipe__title, .fx__head h2, .finale h2 { font-size: var(--t-moment) !important; line-height: 0.98 !important; letter-spacing: -0.045em !important; } #ai-title, #shows-title, #sources-title, #call-title, #editor-title { font-size: var(--t-section) !important; line-height: 1.02 !important; letter-spacing: -0.035em !important; } .proof__head h2, .who h2, .compare h2, .faq h2 { font-size: var(--t-support) !important; line-height: 1.06 !important; letter-spacing: -0.03em !important; } .section-lede { font-size: clamp(17px, 1.45vw, 21px) !important; line-height: 1.45; } @media (max-width: 700px) { .magic__copy h2, .wipe__title, .fx__head h2, .finale h2 { font-size: clamp(40px, 11vw, 52px) !important; } } #magic-move #magic-title, #download #finale-title { font-size: var(--t-moment) !important; } #ai #ai-title, #zoom #call-title, #shows #shows-title, #sources #sources-title { font-size: var(--t-section) !important; } @media (max-width: 700px) { #magic-move #magic-title, #download #finale-title { font-size: clamp(40px, 11vw, 52px) !important; } } /* ---- Round 24: a navigator strip you can read ---- */ @media (min-width: 761px) { .magic__strip { width: min(88vw, 960px) !important; gap: 10px !important;} .magic__strip span { font-size: 13px; margin-top: 5px; } } /* ---- Round 24: prompter — the program reads through, and the script clears the nav ---- */ /* ---- Round 24: Color end state — a window you can read (desktop), preview + scope (phone) ---- */ @media (min-width: 761px) { .color .grade { width: min(1240px, calc(100vw - 2 * var(--edge)), calc((100svh - 150px) * 1280 / 754)) !important; } .color__pin { padding-top: 64px !important; } } @media (max-width: 760px) { .color .grade__frame { overflow: hidden; aspect-ratio: 870 / 754; } .color .grade__frame canvas { width: 147.1% !important; max-width: none; } .color__pin { justify-content: center !important; } } @media (max-width: 760px) { .color .specs { display: grid !important; grid-template-columns: 1fr; gap: 14px; margin: 22px var(--gutter) 0; text-align: left; } .color .specs dt { font-size: 17px; font-weight: 600; color: var(--ivory); } .color .specs dd { font-size: 15px; color: var(--mute); margin: 2px 0 0; } } /* ---- Round 24: text floor — body 17px, captions 14px, lighter greys ---- */ :root { --mute: #b3afa8; --mute-2: #95918a; } .proof__row dd, .faq details p, .specs dd { font-size: max(17px, 1em) !important; } figcaption, .cohost__monitor figcaption, .fx__stage figcaption, .proof__note, .hero__caption, .grade__meter, .magic__strip span { font-size: max(14px, 1em) !important; } .footer__fine { font-size: 13px !important; color: var(--mute-2); } .chips li, .finale__note { font-size: 14px !important; } /* ---- Round 24: editor — no box, and a gentler zoom that keeps the whole slide in frame ---- */ .editor__card { background: none !important; box-shadow: none !important;} /* ---- Round 24: the show ends on every transition you could use ---- */ .magic__end { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 3; text-align: center; opacity: 0; transform: translateY(12px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); pointer-events: none; } .magic__end p { margin: 0 0 12px; font-size: clamp(18px, 1.6vw, 24px); font-weight: 600; color: var(--ivory); letter-spacing: -0.02em; } .magic__end .chips { justify-content: center; margin: 0 auto; max-width: min(88vw, 980px); } .magic__strip { transition: opacity 0.4s var(--ease); } .magic__pin.is-end .magic__end { opacity: 1; transform: none; } .magic__pin.is-end .magic__strip, .magic__pin.is-end .magic__now { opacity: 0 !important; } /* ---- Round 24: Go live — the program lifts out of the presenter view and goes everywhere ---- */ /* Desktop: a pinned sequence. */ /* ---- The 6% lives on a MacBook's screen, and every number counts up ---- */ .proof__mac { position: relative; margin: clamp(8px, 2vh, 24px) auto 0;} .proof__mac img { display: block; width: 100%; height: auto;} .proof__screen { position: absolute; left: 21.05%; top: 13.4%; width: 60.4%; height: 52.38%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 6%; color: #16130e;} .proof__big { margin: 0; font-weight: 700; line-height: 0.9; letter-spacing: -0.02em !important; font-size: clamp(88px, 17vw, 240px); font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #2a241a, #6b4a12 55%, #C98A1E); -webkit-background-clip: text; background-clip: text; color: transparent; } .proof__big small { font-size: 0.42em; margin-left: 0.04em; letter-spacing: 0; } .proof__cap { margin: clamp(8px, 1.4vw, 18px) 0 0; max-width: 30ch; font-size: clamp(14px, 1.55vw, 21px) !important; line-height: 1.35; color: #4a443b; font-weight: 500; } .proof__row div:first-child { grid-column: auto !important; padding: 22px 20px 0 !important; } .proof__row div:first-child dt { letter-spacing: -0.02em !important; line-height: 1 !important;} .proof__row div + div { border-left: 1px solid var(--line); border-top: 0 !important; } .proof__row dt { letter-spacing: -0.02em !important; } .proof__row { border-top: 1px solid var(--line); margin-top: clamp(16px, 3vh, 32px); } @media (max-width: 700px) { .proof__row div + div { border-left: 0; border-top: 1px solid var(--line) !important; } .proof__row div:first-child { display: grid; grid-template-columns: 92px 1fr; align-items: center; text-align: left; gap: 12px; padding: 16px 0 !important; } .proof__row div:first-child dd { margin: 0; } .proof__mac { width: 118%; margin-left: -9%; } } .proof__head p { text-wrap: balance; } /* ---- "Everything live, on one canvas." as a feature mosaic ---- */ .mosaic { padding: clamp(80px, 12vh, 140px) var(--edge) clamp(40px, 6vh, 80px); } .mosaic__grid { display: grid; gap: 14px; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 13vw, 196px);} .mo { position: relative; overflow: hidden; border-radius: 26px; background: #141312; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); isolation: isolate; } .mo > img, .mo > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .mo__label { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2; } .mo__label h3 { margin: 0; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 600; color: var(--ivory); } .mo__label p { margin: 4px 0 0; font-size: 14px !important; line-height: 1.35; color: var(--mute); } .mo--cam, .mo--screens, .mo--titles, .mo--motion { background: #000; } .mo--cam::after, .mo--screens::after, .mo--titles::after, .mo--motion::after { content: ""; position: absolute; inset: 40% 0 0; z-index: 1; background: linear-gradient(transparent, rgba(0, 0, 0, 0.78)); } .mo--hero { grid-area: hero; display: grid; place-items: center; text-align: center; background: #0b0a09; } .mo--hero video { opacity: 0.55; filter: saturate(1.2); } .mo__heroCopy { position: relative; z-index: 2; padding: 24px; } .mo__heroCopy .cue { justify-content: center; } .mo--hero h2 { margin: 0; font-size: clamp(38px, 4.4vw, 68px) !important; line-height: 0.98 !important; letter-spacing: -0.045em !important; text-shadow: 0 4px 40px rgba(0, 0, 0, 0.6); } .mo--hero h2 em { display: block; } .mo--cam { grid-area: cam; } .mo--masks { grid-area: masks; } .mo--fx { grid-area: fx; } .mo--screens { grid-area: screens; } .mo--titles { grid-area: titles; } .mo--motion { grid-area: motion; } .mo--blur { grid-area: blur; } .mo--import { grid-area: import; } .mo--alpha { grid-area: alpha; } .mo--keys { grid-area: keys; } .mo__masks { position: absolute; display: flex; gap: 10px; justify-content: center;} .mo__num { position: absolute; left: 20px; top: 8px; margin: 0; font-weight: 700; letter-spacing: -0.03em; line-height: 1; background: linear-gradient(180deg, var(--filament), var(--brass)); -webkit-background-clip: text; background-clip: text; color: transparent;} .mo__blur { position: absolute; left: 20px; top: 14px; margin: 0; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--ivory);} .mo__blur span + span { filter: blur(5px); opacity: 0.8; } .mo__icon { position: absolute; left: 20px; top: 18px; margin: 0; display: flex; gap: 8px; } .mo__icon span { width: 46px; height: 58px; border-radius: 8px; display: grid; place-items: end center; padding-bottom: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; color: #fff; background: linear-gradient(160deg, #3a8df0, #1c5fd0); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.8); } .mo__icon span + span { background: linear-gradient(160deg, #f0564c, #b92a22); } .mo__alpha { position: absolute; left: 18px; top: 0; margin: 0; line-height: 1; font-weight: 600; color: transparent;} .mo__keys { position: absolute; left: 20px; top: 20px; margin: 0; display: flex; gap: 8px; } .mo__keys kbd { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; font: 600 18px var(--sans); color: var(--ivory); background: linear-gradient(180deg, #2c2a27, #1a1917); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 0 #0b0a09, 0 8px 18px -6px rgba(0, 0, 0, 0.8); } .mo--keys kbd:first-child { color: var(--tungsten); } .mo.reveal { transition-delay: calc(var(--i, 0) * 60ms); } @media (max-width: 900px) { .mosaic__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 170px;} .mo { border-radius: 20px; } .mo__label { left: 14px; right: 14px; bottom: 14px; } .mo__keys kbd { width: 38px; height: 38px; } } .mo--screens::after { inset: 25% 0 0 !important; background: linear-gradient(transparent, rgba(0, 0, 0, 0.92) 70%) !important; } .mo__alpha { font-size: clamp(76px, 7vw, 110px) !important; background: repeating-conic-gradient(#6a6660 0 25%, #3a3835 0 50%) 0 0 / 16px 16px !important; -webkit-background-clip: text !important; background-clip: text !important; } .proof { overflow-x: clip; } /* ---- Gate fixes ---- */ @media (max-width: 760px) { .magic__strip {} .magic__strip li { min-width: 0; } } @media (min-width: 761px) and (max-height: 820px) { .cohost__pin .section-lede { display: none; } .cohost__pin { padding-top: 72px; } } @media (max-width: 760px) { .magic__strip li.is-live span::after { display: none; } .magic__strip li.is-live span { color: var(--tally); } } /* ---- Round 26 fixes ---- */ /* Mosaic: the title card fits its tile; the blur word fits too. */ .mo--titles > img { object-fit: contain !important; object-position: 50% 30% !important; background: #0b0a09; } .mo__blur { font-size: clamp(24px, 2vw, 32px) !important; } .mosaic { padding-top: clamp(48px, 7vh, 80px) !important; } /* Built for the Mac: the screen keeps the photo's own glow and falloff instead of a flat card; a section-size heading. */ .proof__screen { background: radial-gradient(ellipse 80% 75% at 50% 42%, rgba(255, 253, 246, 0.0), rgba(0, 0, 0, 0.10) 100%) !important; } .proof__head h2 { font-size: var(--t-section) !important; } /* Go live: once the program lifts, the presenter's live slide is empty; the end state sits tighter. */ /* Teleprompter: the laptop has a notch, as the copy says; the headline's second line reads in white. */ .laptop__screen::before { content: ""; position: absolute; left: 50%; top: 0; z-index: 3; min-height: 10px; transform: translateX(-50%);} .film.is-clip .film__note { display: none; } .fx__stage video { background: #0d0d0f; } .fx__head { width: min(1280px, calc(100vw - 2 * var(--edge))) !important; } .fx__stage figcaption .link { background: none; padding: 0; color: var(--tungsten); font: inherit; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .cohost.is-scrubbed .cohost__chat.is-in ~ .cohost__monitor .cohost__next, .cohost.is-scrubbed .cohost__chat.is-in ~ .cohost__monitor .cohost__edit, .cohost.is-scrubbed .cohost__chat.is-in ~ .cohost__monitor .l-edit, .cohost.is-scrubbed .cohost__chat.is-in ~ .cohost__monitor .l-live, .cohost.is-scrubbed .cohost__chat.is-in ~ .cohost__monitor .cohost__screen, .cohost.is-scrubbed .cohost__chat.is-in .cohost__log li { animation: none !important; } .cohost.is-live .cohost__label .l-live { max-width: 200px; } .cohost.is-live .cohost__label .l-edit { max-width: 0; } /* ---- Maker's note, editorial: a big portrait and big quote, no card ---- */ .note { padding: clamp(80px, 12vh, 140px) var(--edge) clamp(40px, 6vh, 80px) !important; } .note__inner { max-width: 1180px !important; padding: 0 !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; display: grid !important; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; } .note__photo { width: 100% !important; height: auto !important; aspect-ratio: 1 !important; border-radius: 28px !important; object-fit: cover; box-shadow: 0 50px 120px -50px rgba(0, 0, 0, 0.9); } .note blockquote p { font-size: clamp(28px, 3vw, 46px) !important; line-height: 1.16 !important; letter-spacing: -0.03em !important; font-weight: 600 !important; } .note figcaption { font-size: 17px !important; margin-top: 28px !important; } @media (max-width: 760px) { .note__inner { grid-template-columns: 1fr; } .note__photo { max-width: 280px; } } /* ---- FAQ: two columns, with the compare teaser beside the questions ---- */ .faq { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start;} .faq summary { font-size: 21px !important; padding-top: 26px !important; padding-bottom: 26px !important; } @media (max-width: 860px) { .faq { grid-template-columns: 1fr; } } /* "One laptop. No crew." sits over the wall, not the hands. */ .context__figure figcaption { bottom: auto !important; left: auto !important; text-align: right;} @media (max-width: 700px) { .context__figure figcaption {} } /* ---- Round 27 fixes ---- */ /* Editor: one centered axis, and the whole window — no crops through labels. */ .editor__head { flex-direction: column; align-items: center !important; text-align: center; padding: 0 var(--gutter) !important; gap: 12px !important; } .editor__head .editor__title { max-width: none; } .editor__head p { max-width: 48ch; margin: 0 auto; } /* Magic Move clears the nav. */ @media (min-width: 761px) { .magic__stage { width: min(88vw, calc((100svh - 240px) * 16 / 9)) !important; } .magic__pin { padding-top: 84px !important; } } /* Captions and small labels up to the floor. */ .mo__label p, .proof__row dd { font-size: max(15px, 1em) !important; } /* "One laptop. No crew." on phone: a deliberate two-line break. */ @media (max-width: 700px) { .context__figure figcaption { max-width: none !important; font-size: 40px !important; text-align: left;} .context__figure figcaption br { display: inline; } } @media (max-width: 760px) { .magic__stage { width: 100vw !important; } .magic__stage canvas, .magic__scrim { border-radius: 0 !important; } .magic__now { font-size: 40px !important; margin: 14px 0 10px !important; } .magic__strip { gap: 10px !important; } .magic__strip span { font-size: 13px !important; } } /* ---- Built for the Mac: a current MacBook Pro in the dark; the 6% is live on its screen ---- */ .proof__mac { width: min(100%, 1180px) !important; } .proof__screen[data-quad] { left: 0 !important; top: 0 !important; width: 1000px !important; height: 650px !important; padding: 0 70px !important; transform-origin: 0 0; box-sizing: border-box; background: radial-gradient(ellipse 90% 80% at 40% 40%, #1c1813, #070605 70%) !important; color: #f5f1ea; } .proof__screen[data-quad] .proof__big { font-size: 300px !important; background: linear-gradient(180deg, #fff6df, #F4DAA1 40%, #C98A1E); -webkit-background-clip: text; background-clip: text; color: transparent; } .proof__screen[data-quad] .proof__cap { font-size: 30px !important; color: #bdb6aa !important; max-width: 22ch; margin-top: 18px; } .proof__mac img { -webkit-mask-image: radial-gradient(ellipse 70% 75% at 42% 45%, #000 62%, transparent 100%) !important; mask-image: radial-gradient(ellipse 70% 75% at 42% 45%, #000 62%, transparent 100%) !important; } /* "One laptop. No crew.": the MacBook Pro in the dark, headline in the black space to its right. */ .context__figure { height: min(100svh, 62vw) !important; background: #000; } .context__figure :is(img, video) { object-position: 42% 55% !important; } .context__figure::after { background: none !important; } .context__figure figcaption { top: 50% !important; transform: translateY(-50%); right: var(--edge) !important; max-width: 7ch; text-shadow: none !important; } @media (max-width: 700px) { .context__figure { height: 560px !important; } .context__figure figcaption { transform: none; left: var(--gutter) !important; right: auto !important;} } @media (min-width: 701px) { .context__figure :is(img, video) { left: 0 !important; width: 74% !important; object-fit: contain !important; object-position: 0% 60% !important; } .context__figure figcaption { right: var(--edge) !important; max-width: 6.5ch; } } @media (max-width: 700px) { .context__figure :is(img, video) { top: 120px !important; height: calc(100% - 120px) !important; object-position: 34% 50% !important; } .context__figure figcaption { top: 28px !important; } } .context__figure :is(img, video) { -webkit-mask-composite: source-in; mask-composite: intersect;} /* FAQ: the heading fits its column at every width; two columns only when there's room. */ #faq #faq-title { font-size: clamp(36px, min(3.6vw, 6svh), 56px) !important; line-height: 1 !important; overflow-wrap: anywhere; } @media (max-width: 1100px) { .faq { grid-template-columns: 1fr !important; } } /* ---- Owner feedback, 2026-09-27 ---- */ /* Hero: a much quieter horizontal streak. */ .stage__flare::after { opacity: 0.18 !important; width: 140% !important; height: 1.4% !important; } /* Mosaic "35": the numeral and its title never overlap. */ .mo--fx { display: flex; flex-direction: column; justify-content: space-between; padding: 14px 20px 18px; } .mo--fx .mo__num { position: static !important; } .mo--fx .mo__label { position: static !important; } /* Masks tile: live cameras in a circle and a squircle. */ .mo__masks { inset: 18px 16px auto !important; } .mo__masks video { width: 44%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 2px rgba(237, 179, 65, 0.85); } .mo__masks video + video { border-radius: 28%; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55); } /* Titles tile: a lower third that actually builds, on a loop. */ .mo--titles > video { opacity: 0.55; } .context__figure :is(img, video) { will-change: auto !important; image-rendering: auto; } /* Color: the picture is a 16:9 stage covering the viewport, so it can land on the viewer exactly. */ .wipe { background: transparent !important; transform: none !important; } .wipe__stage { position: absolute; left: 50%; top: 50%; width: max(100vw, 177.78svh); aspect-ratio: 16 / 9; margin-left: calc(max(100vw, 177.78svh) / -2); margin-top: calc(max(100vw, 177.78svh) * -0.28125); transform-origin: 50% 50%; will-change: transform; background: #000; } .wipe__stage picture, .wipe__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; overflow: hidden; } .wipe__stage .wipe__tag { top: calc(50% - 50svh + 96px); } /* Teleprompter: a callout while the camera is close on the notch. */ .prompter__pin { overflow: hidden; } .laptop { position: relative; z-index: 2; } /* The laptop reads as a Mac up close: an aluminum edge, a notch with its camera. */ .laptop__screen { border-color: #0b0b0d !important; box-shadow: 0 0 0 2px #4a4a50, 0 0 0 3px #1d1d20, 0 50px 120px -40px rgba(237, 179, 65, 0.35) !important; } .laptop__screen::before { width: 12% !important; height: 4.2% !important; background: #0b0b0d !important; border-radius: 0 0 10px 10px !important; background-image: radial-gradient(circle at 50% 42%, #2b3a4a 0 9%, #10161d 10% 16%, transparent 17%) !important; } /* ---- Go live everywhere: the Go Live popover and a wall of RTMP destinations ---- */ .golive2 { padding: clamp(96px, 14vh, 160px) var(--edge) clamp(56px, 8vh, 100px); } .golive2__head { text-align: center; max-width: 900px; margin: 0 auto clamp(40px, 6vh, 72px); } .golive2__head .cue { justify-content: center; } .golive2__head h2 { font-size: var(--t-moment) !important; line-height: 0.98 !important; letter-spacing: -0.045em !important; margin: 0 0 20px; } .golive2__head h2 em { display: inline; } .golive2__stage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; max-width: 1260px; margin: 0 auto; } .gopop { margin: 0; } .gopop__bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 10px 16px; border-radius: 12px 12px 0 0; background: #232220; box-shadow: inset 0 -1px 0 rgba(255,255,255,0.06); } .gopop__title { font-size: 13px; font-weight: 600; color: #cfcac2; } .gopop__btn { font: 600 13px var(--sans); color: #fff; border: 0; border-radius: 7px; padding: 6px 12px; background: var(--tally); display: inline-flex; align-items: center; gap: 7px; box-shadow: 0 0 0 0 rgba(229,72,77,0.5); } .gopop__btn i { width: 7px; height: 7px; border-radius: 50%; background: #fff; } .gopop.is-in .gopop__btn { animation: goPulse 2.4s 1.8s ease-out infinite; } @keyframes goPulse { 0% { box-shadow: 0 0 0 0 rgba(229,72,77,0.55); } 70%, 100% { box-shadow: 0 0 0 14px rgba(229,72,77,0); } } .gopop__panel { position: relative; padding: 18px 18px 16px; border-radius: 0 0 16px 16px; background: rgba(30, 29, 27, 0.96); box-shadow: 0 0 0 1px rgba(255,255,255,0.07), 0 40px 100px -30px rgba(0,0,0,0.9); } .gopop__h { margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mute); } .gopop__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .gopop__list li { display: grid; grid-template-columns: 34px 1fr auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 10px 10px; border-radius: 10px; font-size: 17px; font-weight: 600; color: var(--ivory); background: rgba(255,255,255,0.03); } .gopop__list small { grid-column: 2; font-size: 13px; font-weight: 400; color: var(--mute); } .gopop__mark { grid-row: 1 / 3; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: #2d2c29; color: #fff; } .gopop__mark svg { width: 18px; height: 18px; } .gopop__mark--rtmp { font-size: 9px; font-weight: 800; letter-spacing: 0.04em; } .gopop__sw { grid-column: 3; grid-row: 1 / 3; width: 38px; height: 23px; border-radius: 999px; background: #3a3936; position: relative; transition: background 0.35s var(--ease); } .gopop__sw::after { content: ""; position: absolute; left: 2px; top: 2px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.5); transition: transform 0.35s var(--ease); } .gopop.is-in .gopop__list li.is-on .gopop__sw { background: #30d158; } .gopop.is-in .gopop__list li.is-on .gopop__sw::after { transform: translateX(15px); } .gopop.is-in .gopop__list li:nth-child(1) .gopop__sw, .gopop.is-in .gopop__list li:nth-child(1) .gopop__sw::after { transition-delay: 0.5s; } .gopop.is-in .gopop__list li:nth-child(2) .gopop__sw, .gopop.is-in .gopop__list li:nth-child(2) .gopop__sw::after { transition-delay: 0.85s; } .gopop.is-in .gopop__list li:nth-child(3) .gopop__sw, .gopop.is-in .gopop__list li:nth-child(3) .gopop__sw::after { transition-delay: 1.2s; } .gopop__meta { margin: 14px 2px 0; font-size: 14px; color: var(--mute); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; } .gopop__meta span { color: var(--mute-2); } .gopop__go { margin: 14px 0 0; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 12px; background: rgba(229, 72, 77, 0.14); box-shadow: inset 0 0 0 1px rgba(229,72,77,0.45); opacity: 0; transition: opacity 0.5s 1.6s var(--ease); } .gopop.is-in .gopop__go { opacity: 1; } .gopop__live { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: #fff; } .gopop__live i { width: 9px; height: 9px; border-radius: 50%; background: var(--tally); box-shadow: 0 0 10px var(--tally); } .gopop__time { font-variant-numeric: tabular-nums; font-size: 15px; color: #ffd6d7; } .gopop figcaption { margin-top: 12px; font-size: 14px; color: var(--mute-2); text-align: center; } .golive2__wallh { margin: 0 0 16px; font-size: 15px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mute); } .dests { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } .dest { height: 104px; border-radius: 18px; background: #121110; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--ivory); opacity: 0.25; transform: translateY(10px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: calc(var(--i) * 70ms); } .golive2__wall.is-in .dest { opacity: 1; transform: none; } .dest svg { width: 30px; height: 30px; } .dest span { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; } .dest--word span { font-size: 19px; font-weight: 700; letter-spacing: -0.03em; } .dest:last-child span { font-size: 15px; color: var(--tungsten); } @media (max-width: 960px) { .golive2__stage { grid-template-columns: 1fr; } .gopop { max-width: 520px; margin: 0 auto; } } @media (max-width: 700px) { .dests { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dest { height: 84px; } } .mosaic__grid { grid-template-areas: "cam cam hero hero hero masks" "cam cam hero hero hero fx" "screens screens titles titles motion blur" "import alpha titles titles motion keys" !important; } .mo__num { font-size: clamp(46px, 4.4vw, 70px) !important; } .mo--fx .mo__label p { display: none; } @media (max-width: 900px) { .mosaic__grid { grid-template-areas: "hero hero" "hero hero" "cam cam" "cam cam" "masks fx" "screens screens" "titles titles" "titles titles" "blur alpha" "motion motion" "import keys" !important; } } /* ---- Round 29 fixes ---- */ /* The show strip has five slides now; the sequence ends on a live camera. */ @media (min-width: 761px) { .magic__strip { grid-template-columns: repeat(5, minmax(0, 148px)) !important; } } @media (max-width: 760px) { .magic__strip { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } .magic__strip span { display: none; } } /* Phone hero: the product sits clear of the buy button; less dead space before the statement. */ @media (max-width: 900px) { .hero__product { margin-top: 28px !important; } .statement { height: 72svh !important; } } /* Teleprompter: the slide's own title stays out from under the script. */ /* The co-host log reads at body size. */ .cohost__log { font-size: clamp(14px, 1.15vw, 16.5px) !important; } /* The last small grey copy up to the floor, in a lighter grey. */ :root { --mute: #bdb9b2; --mute-2: #a29e97; } .cohost__monitor figcaption, .fx__stage figcaption, .proof__note, .hero__caption, .proof__row dd, .specs dd { font-size: 17px !important; line-height: 1.45 !important; } /* ---- Round 30 fixes ---- */ .wipe__tag { opacity: var(--tags, 1); transition: none; } /* Strip: the LIVE badge sits on the thumbnail; labels never truncate into it. */ .magic__strip li.is-live span::after { display: none !important; } .magic__strip li.is-live::before { content: "Live"; position: absolute; left: 6px; top: 6px; z-index: 1; padding: 1px 6px; border-radius: 4px; background: var(--tally); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .magic__strip span { overflow: visible !important; text-overflow: clip !important; white-space: normal !important; line-height: 1.25; } /* Finale: the lamp clears the nav. */ /* Phone: the mosaic's Keynote/PDF icons clear the heading; pinned sections centered. */ @media (max-width: 760px) { .mo--import .mo__icon span { width: 34px; height: 42px; font-size: 8px; } .statement { display: grid !important; place-items: center !important; height: 100svh !important; } .magic__pin { justify-content: center !important; } } @media (max-width: 760px) { .magic__strip li.is-live::before { left: 3px; top: 3px; font-size: 8px; padding: 0 4px; } } /* ---- Surface rhythm: "On a call" is the page's light chapter ---- */ .call { background: #f5f5f7; color: #1d1d1f; --ivory: #1d1d1f; --mute: #515154; --mute-2: #6e6e73; --line: rgba(0, 0, 0, 0.12); } .call h2 { color: #1d1d1f; } .call h2 em { background: none; -webkit-text-fill-color: #6e6e73; color: #6e6e73; } .call .cue span { color: #b3730f; } /* ---- Editor: the window grows to full width as it arrives ---- */ .pager { transform-origin: 50% 0; } .editor__head .editor__title { font-size: var(--t-moment) !important; } /* ---- Stats at Apple scale ---- */ .proof__row div:not(:first-child) dt { font-size: clamp(56px, 6vw, 88px) !important; } /* The callout sits in the dark above the lid, never on the Mac's screen. */ /* Destination wall: every mark gets the same optical box and padding. */ .dest { padding: 0 14px; } .dest--logo .dest__word { width: auto !important; max-width: 100% !important;} .dest--any span { font-size: 14px !important; line-height: 1.2; text-align: center; font-weight: 600 !important; letter-spacing: 0 !important; } /* Meeting apps wall (on the light "On a call" chapter). */ .call__apps { padding: 0 var(--edge); text-align: center; } .call__apps .golive2__wallh { color: #6e6e73; } .dests--apps { grid-template-columns: repeat(7, minmax(0, 1fr)); } .call .dest { background: #fff; color: #1d1d1f; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07), 0 10px 30px -18px rgba(0, 0, 0, 0.35);} .call .dest--any span { color: #b3730f !important; } .call__apps.is-in .dest { opacity: 1; transform: none; } @media (max-width: 900px) { .dests--apps { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 560px) { .dests--apps {} } /* FAQ: one centered column — heading, questions, then the compare card. */ .faq { display: block !important; max-width: 960px !important; margin: 0 auto !important; padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; } .faq__compare { margin-top: clamp(40px, 6vh, 64px); display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; padding: clamp(24px, 3vw, 36px); border-radius: 22px; background: #141312; box-shadow: inset 0 0 0 1px var(--line); } .faq__compare h3 { margin: 0 0 8px; font-size: 24px; letter-spacing: -0.02em; } .faq__compare p { margin: 0; color: var(--mute); font-size: 17px; line-height: 1.5; max-width: 56ch; } .faq__compare .btn { flex: 0 0 auto; } @media (max-width: 700px) { .faq__compare { flex-direction: column; align-items: flex-start; } } /* ---- Hero: lamp on the left, its light falling on the headline at the right ---- */ @media (min-width: 901px) { .stage__copy { left: auto !important; right: max(var(--gutter), calc((100vw - 1260px) / 2));} } @media (min-width: 901px) { .stage__lampwrap { --lw: min(92svh, 860px, 60vw); left: calc(23% - var(--lw) / 2) !important; } .stage__beam { left: calc(24% - 75vmax) !important; } .stage__copy { max-width: min(600px, 44vw) !important; } } @media (min-width: 901px) { .stage__copy .stage__headline { font-size: clamp(36px, min(4vw, 7.4svh), 68px) !important; } } /* The notch prompter, in HTML: the same script as the section, styled like the app's prompter. */ .laptop__script { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 52%; z-index: 2; overflow: hidden; container-type: inline-size;} .laptop__scroll { position: absolute; left: 7%; right: 7%;} .laptop__scroll p { margin: 0; text-align: center; color: #fff; font-weight: 600; font-size: 5.2cqi; line-height: 1.22; letter-spacing: -0.01em; } .laptop__scroll i { font-style: italic; font-weight: 500; color: #f0c64a; font-size: 0.82em; } @media (max-width: 760px) { .laptop__script { position: relative; left: auto; transform: none; width: 100%; } } .dest--zoom span { margin-top: 4px; } /* Meeting-app wall: roomy, even tiles. */ @media (min-width: 1001px) { .dests--apps {} } .dests--apps { gap: 14px !important; } .call .dest { height: 112px !important; padding: 0 12px !important; gap: 12px !important; } .call .dest span { white-space: nowrap;} .call .dest--any span { white-space: normal; font-size: 15px !important; line-height: 1.25; } @media (max-width: 1000px) { .dests--apps { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } @media (max-width: 560px) { .dests--apps { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .call .dest { height: 96px !important; } } .dest--zoom svg { width: 30px !important; height: 30px !important; transform: scale(2.4) !important; } .call .dest span { font-size: 14.5px; letter-spacing: -0.01em; } @media (min-width: 1001px) { .dests--apps { grid-template-columns: repeat(7, minmax(128px, 1fr)) !important; } } /* ---- "Other questions?" — the FAQ lives on its own page ---- */ .more { padding: clamp(56px, 8vh, 96px) var(--gutter); } .more__card { max-width: 1060px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; padding: clamp(28px, 3.5vw, 44px); border-radius: 26px; background: #141312; box-shadow: inset 0 0 0 1px var(--line); } .more__card h2 { margin: 0 0 10px; font-size: var(--t-support) !important; letter-spacing: -0.03em; } .more__card p { margin: 0; color: var(--mute); font-size: 17px; line-height: 1.5; max-width: 52ch; } .more__links { display: flex; flex-wrap: wrap; gap: 12px; flex: 0 0 auto; } @media (max-width: 760px) { .more__card { flex-direction: column; align-items: flex-start; } } /* ---- Round 31 fixes ---- */ /* Magic Move opener: the headline sits in the dark top third, clear of her face; the slide's own lower third is hidden under the scrim until the stage lands. */ @media (min-width: 761px) { .magic__copy { top: 27% !important; } } /* Phone: Magic Move's headline stays above the stage, so the screen is full. */ @media (max-width: 760px) { .magic__copy { position: relative !important; top: auto !important; transform: none !important; order: -1; margin-bottom: 14px !important; padding: 0 var(--gutter); } .magic__lede { display: none; } } /* Mosaic: the Screens caption sits on a solid plate. */ .mo--screens .mo__label { background: rgba(10, 10, 12, 0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 10px 12px; border-radius: 12px; left: 14px !important; right: 14px !important; bottom: 14px !important; } @media (max-width: 760px) { .laptop__screen { border: 0 !important; box-shadow: none !important; background: transparent !important; } .laptop__screen::before, .laptop__base { display: none !important; } .laptop__script { border-radius: 18px !important; box-shadow: 0 0 0 1px var(--line) !important; } } /* ---- Round 32 fixes ---- */ /* Teleprompter: the dashboard backgrounds sit much darker under the script. */ /* Stats: one size, one baseline. */ .proof__row { align-items: start; } .proof__row dt { font-size: clamp(56px, 6vw, 88px) !important; line-height: 1 !important; height: 1em; display: flex; align-items: flex-end; justify-content: center; } .proof__row div:first-child dt { font-size: clamp(56px, 6vw, 88px) !important; } .proof__row dt small { font-size: 0.45em; line-height: 1; margin-bottom: 0.08em; } /* Every kind of show: the video fills its frame. */ /* On a call (light chapter): the selected segment reads. */ /* Download: lamp fits with the footer in view; "macOS" keeps its case. */ .finale { min-height: 0 !important;} .finale__note { text-transform: none !important; letter-spacing: 0.02em !important; font-family: var(--sans) !important; } /* Go live: the button says Live once it is. */ .gopop__live-label { display: none; } .gopop.is-in .gopop__go-label { display: none; } .gopop.is-in .gopop__live-label { display: inline; } /* Destination wall: optically even logo weights. */ .dest--logo .dest__word { height: 18px !important; } .dests li:nth-child(8) .dest__word { height: 15px !important; } .dests li:nth-child(9) .dest__word { height: 24px !important; } /* Magic Move opener: the slide's own lower third stays fully hidden until the stage lands. */ .magic__scrim { background: linear-gradient(180deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.45) 36%, rgba(0,0,0,0.12) 50%, rgba(0,0,0,0.85) 64%, #000 74%) !important; } /* One laptop: the photo's edges fall away into the page's black. */ .context__figure :is(img, video) { -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent), linear-gradient(transparent, #000 12%, #000 80%, transparent) !important; mask-image: linear-gradient(90deg, #000 70%, transparent), linear-gradient(transparent, #000 12%, #000 80%, transparent) !important; } /* Co-host on phone keeps its selling paragraph. */ @media (max-width: 760px) { .cohost__pin .section-lede { display: block !important; font-size: 16px !important; } } .finale { padding-top: 64px !important; padding-bottom: 24px !important; } .finale__lamp { height: min(20svh, 220px) !important; margin-bottom: 4px !important; } /* ---- Editor gallery, Final Cut-style: one idea per card, real app output ---- */ .gal { margin-top: clamp(28px, 4vh, 48px); } .gal__track { list-style: none; margin: 0; padding: 0 var(--edge) 8px; display: flex; gap: 20px; overflow-x: auto; scroll-padding: 0 var(--edge); scrollbar-width: none;} .gal__track::-webkit-scrollbar { display: none; } .gal__card { flex: 0 0 auto; width: min(460px, 78vw); scroll-snap-align: start; } .gal__art { border-radius: 28px; overflow: hidden; display: grid; place-items: center;} .gal__art img { width: 100%; height: 100%; object-fit: cover; display: block; } .gal__card:nth-child(3) .gal__art img { object-fit: contain; padding: 28px; box-sizing: border-box; } .gal__card p { margin: 20px 4px 0; max-width: 34em; font-size: 19px; line-height: 1.42; color: var(--mute); } .gal__card p b { color: var(--ivory); font-weight: 600; } .editor__card { padding-left: 0 !important; padding-right: 0 !important; max-width: none !important; } @media (max-width: 700px) { .gal__art { height: 300px; } .gal__card p { font-size: 17px; } } .editor { padding-left: 0 !important; padding-right: 0 !important; } .editor__card { overflow: visible !important; margin: 0 !important; width: 100% !important; border-radius: 0 !important; } .gal { width: 100vw; margin-left: calc(50% - 50vw); } .gal__art { background: #1d1d1f; } /* ---- One subtle glow: the AI chapter ---- */ .cohost__pin { position: relative; isolation: isolate; } .cohost__pin::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: min(70vh, 640px); z-index: -1; pointer-events: none; background: radial-gradient(60% 90% at 25% 0%, rgba(120, 90, 255, 0.22), transparent 70%), radial-gradient(60% 90% at 80% 0%, rgba(70, 130, 255, 0.18), transparent 70%); -webkit-mask-image: linear-gradient(transparent 0%, #000 25%, transparent 100%); mask-image: linear-gradient(transparent 0%, #000 25%, transparent 100%); } .hl { color: var(--ivory); font-weight: 500; } /* ---- Gallery cards that show, not tell ---- */ .art-stack { display: flex !important; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0; padding: 0 44px; } .art-stack span, .art-stack b { font-weight: 700; letter-spacing: -0.03em; line-height: 1.02; } .art-stack span { font-size: 44px; color: #4a4845; filter: blur(2px); } .art-stack span:nth-child(1), .art-stack span:nth-child(7) { filter: blur(5px); color: #3a3836; } .art-stack span:nth-child(2), .art-stack span:nth-child(6) { filter: blur(3.5px); } .art-stack b { color: #fff; margin: 6px 0;} .art-snap { position: relative; background: #1d1d1f; } .art-snap i { position: absolute; border-radius: 14px; } .art-snap .s1 { left: 12%; top: 30%; width: 34%; height: 34%; background: #3a3836; } .art-snap .s2 { left: 52%; top: 30%; width: 34%; height: 34%; background: #4a4845; box-shadow: 0 0 0 2px #2f7bff; transform: translate(10%, 16%); transition: transform 1.1s cubic-bezier(.2,.9,.2,1) .4s; } .gal__card.is-in .art-snap .s2 { transform: none; } .art-snap em { position: absolute; background: #f5c542; opacity: 0; transition: opacity .3s 1.3s; } .art-snap .gh { left: 6%; right: 6%; top: 30%; height: 1.5px; } .art-snap .gv { top: 18%; bottom: 18%; width: 1.5px;} .gal__card.is-in .art-snap em { opacity: 1; } .art-glide { position: relative; background: #1d1d1f; } .art-glide i { position: absolute; border-radius: 14px; transition: all 1.4s cubic-bezier(.65,0,.35,1) .5s; } .art-glide .g1 { left: 8%; top: 12%; width: 84%; height: 76%;} .art-glide .g2 { left: 92%; top: 30%; width: 0; height: 40%; background: #57544f; opacity: 0; } .gal__card.is-in .art-glide .g1 { left: 8%; top: 30%; width: 40%; height: 40%; } .gal__card.is-in .art-glide .g2 { left: 52%; width: 40%; opacity: 1; } .art-faders { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 8px;} .art-faders div { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: 14px; } .art-faders b { font-size: 22px; color: #fff; font-weight: 600; } .art-faders span { font-size: 14px; color: var(--mute); } .art-faders i { position: relative; width: 3px; border-radius: 2px; background: #4a4845; } .art-faders i::after { content: ""; position: absolute; left: 50%; top: calc(var(--v) * 100%); width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: #eee; box-shadow: 0 0 0 4px rgba(237, 179, 65, 0.85); transition: top 1.2s cubic-bezier(.2,.9,.2,1) .4s; } .gal__card:not(.is-in) .art-faders i::after { top: 80%; } @media (prefers-reduced-motion: reduce) { .art-snap *, .art-glide *, .art-faders i::after { transition: none !important; } } @media (max-width: 700px) { .art-stack span { font-size: 32px; } .art-stack b { font-size: 52px; } } .art-stack b { white-space: nowrap; font-size: clamp(44px, 4.6vw, 66px); } .art-stack span { white-space: nowrap; } .gal__art.art-faders, .gal__art.art-stack { place-items: stretch; } .art-faders { width: 100%; height: 100%; box-sizing: border-box; padding: 48px 28px 40px !important; } .art-faders div { height: 100%; } .art-snap .gv { left: 52% !important; } .gal__art.art-faders { height: clamp(320px, 38vw, 540px) !important; } @media (max-width: 700px) { .gal__art.art-faders { height: 300px !important; } } .mo__masks img { width: 44%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 2px rgba(237, 179, 65, 0.85); } .mo__masks img + img { border-radius: 28%; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55); } /* ---- Editor gallery, pinned: the headline stays, the cards slide in ---- */ .editor { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: 64px !important; padding-bottom: 24px !important; box-sizing: border-box; } .editor::before { display: none !important; } .gal__track { overflow: visible !important; scroll-snap-type: none !important; will-change: transform; } .gal { overflow: hidden; } .gal__art { height: clamp(300px, 52svh, 520px) !important; } .art-snap i, .art-glide i { overflow: hidden; } .art-snap img, .art-glide img { width: 100%; height: 100%; display: block;} .art-snap .s1, .art-snap .s2 { height: 30% !important; } .art-glide .g1 { background: #000 !important; } .gal__card:not(.is-in) .art-snap .s2 { transform: translate(10%, 16%); } .art-snap img, .art-glide img { padding: 0 !important; object-fit: cover !important; } .cohost.is-scrubbed .cohost__log li.you.later:not(.is-shown) { opacity: 0; transform: translateY(6px); } .cohost__recap { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.35s; z-index: 1; } .cohost.is-recap .cohost__recap { opacity: 1; } .cohost__screen .cohost__label, .cohost__screen .cohost__edit { z-index: 2; } .cohost.is-recap .cohost__edit { opacity: 0 !important; } @media (max-width: 760px) { .cohost.is-scrubbed .cohost__log li.later:not(.is-shown) { display: none; } .cohost.is-recap .cohost__log li:not(.later) { display: none; } } .cohost.is-recap .cohost__log li.past { display: none; } /* ---- Every kind of show: four benefit cards ---- */ .kinds { list-style: none; margin: clamp(28px, 4vh, 48px) auto 0; padding: 0 var(--edge); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .kind { transition-delay: calc(var(--i) * 80ms); } .kind__art { aspect-ratio: 4 / 5; border-radius: 24px; overflow: hidden; background: #1d1d1f; } .kind__art img { width: 100%; height: 100%; object-fit: cover; display: block; } .kind h3 { margin: 18px 2px 6px; letter-spacing: -0.02em;} .kind p { margin: 0 2px; color: var(--mute); line-height: 1.45;} @media (max-width: 1179px) { .kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; } .kind__art { aspect-ratio: 16 / 11; } } @media (max-width: 560px) { .kinds { grid-template-columns: 1fr; } .kind__art { aspect-ratio: 16 / 10; } } /* Titles tile: three different titles, each building in and out in turn. */ .mo__titles { position: absolute; inset: 18px 18px 90px; z-index: 2; } .mo__titles .t { position: absolute; opacity: 0; animation: tCycle 12s var(--ease) infinite; } .mo__titles .t2 { animation-delay: 4s; } .mo__titles .t3 { animation-delay: 8s; } @keyframes tCycle { 0% { opacity: 0; transform: translateY(10px); clip-path: inset(0 100% 0 0); } 5% { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } 28% { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } 33%, 100% { opacity: 0; transform: translateY(-6px); clip-path: inset(0 0 0 0); } } .mo__titles .t1 { left: 0; bottom: 0; display: grid; grid-template-columns: 5px auto; column-gap: 12px; padding: 12px 16px; border-radius: 10px; background: rgba(8, 8, 10, 0.78); } .mo__titles .t1 i { grid-row: 1 / 3; background: var(--tungsten); border-radius: 3px; } .mo__titles .t1 b { font-size: 21px; color: #fff; letter-spacing: -0.02em; } .mo__titles .t1 span { font-size: 14px; color: #d9d4ca; } .mo__titles .t2 { left: 0; right: 0; top: 50%; margin-top: -40px; text-align: center; color: #fff; } .mo__titles .t2 em { display: block; font-style: normal; font-size: 14px; letter-spacing: 0.3em; color: var(--tungsten); font-weight: 700; } .mo__titles .t2 b { font-size: clamp(30px, 2.6vw, 40px); letter-spacing: -0.03em; } .mo__titles .t3 { right: 0; top: 0; text-align: right; padding: 10px 14px; border-radius: 999px 10px 10px 999px; background: var(--tally); color: #fff; } .mo__titles .t3 b { display: block; font-size: 17px; } .mo__titles .t3 span { font-size: 12.5px; opacity: 0.85; } @media (prefers-reduced-motion: reduce) { .mo__titles .t { animation: none; } .mo__titles .t1 { opacity: 1; } } .wipe.is-done .wipe__line { opacity: 0; } @media (min-width: 761px) { .cohost__pin { justify-content: flex-start !important; padding-top: 88px !important; } .cohost__stage { align-items: start !important; } .cohost__chat { max-height: min(460px, calc(100svh - 400px)); } .cohost__log { overflow: hidden; display: flex !important; flex-direction: column; justify-content: flex-end; gap: 12px; } } /* Finale lamp: no drop shadow (it drew a dark rim around the lamp against the glow). */ .finale__lamp { filter: brightness(0.95) !important; } /* ---- Gallery demos, scrubbed by --t (0 → 1) ---- */ .gal__card { --t: 0; } .art-stack { overflow: hidden; } .art-stack > * { transform: translateY(calc((1 - var(--t)) * 170px)); } .art-stack b { opacity: calc(0.35 + var(--t) * 0.65); } .art-snap .s2, .gal__card.is-in .art-snap .s2, .gal__card:not(.is-in) .art-snap .s2 { transition: none !important; transform: translate(calc((1 - var(--t)) * 22%), calc((1 - var(--t)) * 55%)) !important; } .art-snap em, .gal__card.is-in .art-snap em { transition: none !important; opacity: clamp(0, calc((var(--t) - 0.88) * 9), 1) !important; } .art-glide i, .gal__card.is-in .art-glide i { transition: none !important; } .art-glide .g1, .gal__card.is-in .art-glide .g1 { left: 8% !important; top: calc(12% + var(--t) * 18%) !important; width: calc(84% - var(--t) * 44%) !important; height: calc(76% - var(--t) * 36%) !important; } .art-glide .g2, .gal__card.is-in .art-glide .g2 { left: calc(96% - var(--t) * 44%) !important; top: 30% !important; width: calc(var(--t) * 40%) !important; height: 40% !important; opacity: 1 !important; } .art-faders i::after, .gal__card:not(.is-in) .art-faders i::after { transition: none !important; top: calc((0.85 - (0.85 - var(--v)) * var(--t)) * 100%) !important; } .kind__art { position: relative; } .kind__art::after { content: ""; position: absolute; inset: 0 0 55% 0; background: linear-gradient(rgba(0,0,0,0.55), transparent); } .kind__who { position: absolute; left: 18px; top: 16px; z-index: 1; font-size: 15px; font-weight: 600; color: #fff; letter-spacing: 0; } .kind h3 { font-size: 24px !important; margin-top: 18px !important; } .kind p { font-size: 17px; } .call { padding-bottom: clamp(72px, 10vh, 120px) !important; } /* Teleprompter: the headline, then the Mac right under it; the script scrolls through the notch prompter. */ .prompter__pin { justify-content: flex-start !important; gap: clamp(18px, 3vh, 36px) !important; padding: clamp(72px, 11vh, 110px) 0 32px !important; } .prompter__pin > .section-head { margin-bottom: 0 !important; } .prompter__pin > .section-head .section-lede { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; } .prompter__stage .laptop { width: 100%; max-width: calc((100svh - 330px) * 1.6); margin: 0 auto; } .laptop__script { opacity: 1 !important; } .laptop__scroll { top: 0 !important; bottom: auto !important; will-change: transform; } @media (min-width: 761px) { .laptop__script { top: -30px; aspect-ratio: 1000 / 380; } } .prompter__stage .onair { opacity: 1 !important; transform: none !important; } @media (min-width: 761px) { .prompter__stage { grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr) !important; } } .kind h3 { overflow-wrap: break-word; hyphens: manual; } .kind__art img { object-position: 50% 12%; } /* Meeting apps: one centered row of equal tiles that wraps (never wider than the page, never off-center). */ .call__apps .dests--apps { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 14px !important; } .call__apps .dests--apps .dest { flex: 1 1 0; min-width: 112px; max-width: 156px; } @media (max-width: 999px) { .call__apps .dests--apps .dest { flex: 0 0 148px; max-width: none; } } .call__apps .golive2__wallh { max-width: none !important; margin-left: auto; margin-right: auto; text-align: center; } @media (max-width: 560px) { .call__apps .dests--apps .dest { flex: 0 0 calc(50% - 7px); } } /* Editor gallery: every card the same height, sized so headline, cards and captions fit the screen. */ .gal .gal__art, .gal__card .gal__art { height: clamp(280px, min(34vw, 100svh - 420px), 520px) !important; } @media (max-width: 700px) { .gal .gal__art, .gal__card .gal__art { height: 300px !important; } } .call__apps .golive2__wallh { margin-top: clamp(32px, 5vh, 56px); } /* Teleprompter Mac: a plain desktop, so the eye goes to the prompter under the notch. */ .laptop__desk { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .laptop__menubar { position: absolute; left: 0; right: 0; top: 0; height: 3.4%; min-height: 12px; z-index: 1; display: flex; align-items: center; gap: 1.6%; padding: 0 1.6%; background: rgba(20, 16, 40, 0.35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: rgba(255, 255, 255, 0.92); } .laptop__screen { container-type: inline-size; } .laptop__menubar { font-size: 1.15cqi; } .laptop__menubar b { font-weight: 700; } .laptop__menubar i { margin-left: auto; font-style: normal; } /* The notch prompter, as the app draws it (prompter-docked): the script on black with the reading line's yellow markers, the lines already read dimmed, and the control bar underneath. */ .laptop__script { aspect-ratio: 1040 / 500 !important; display: flex; flex-direction: column; background: #000 !important; border-radius: 0 0 5cqi 5cqi !important; -webkit-mask-image: none !important; mask-image: none !important; box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.85) !important; } .pr__text { position: relative; flex: 1 1 auto; overflow: hidden; -webkit-mask-image: linear-gradient(rgba(0,0,0,0) 22%, rgba(0,0,0,0.45) 38%, rgba(0,0,0,0.5) 50%, #000 52%, #000 100%); mask-image: linear-gradient(rgba(0,0,0,0) 22%, rgba(0,0,0,0.45) 38%, rgba(0,0,0,0.5) 50%, #000 52%, #000 100%); } .pr__text .laptop__scroll { left: 7.5% !important; right: 7.5% !important; } .pr__text .laptop__scroll p { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif; font-weight: 700; font-size: 5cqi; line-height: 1.24; letter-spacing: 0; color: #fff; } .pr__text .laptop__scroll i { font-weight: 500; font-size: 0.9em; color: #f4c20d; } .pr__mark { position: absolute; top: 62%; width: 0; height: 0; margin-top: -1.7cqi; border: 1.7cqi solid transparent; } .pr__mark--l { left: 1.4cqi; border-left: 2cqi solid #f4c20d; border-right: 0; } .pr__mark--r { right: 1.4cqi; border-right: 2cqi solid #f4c20d; border-left: 0; } .pr__bar { flex: 0 0 auto; background: #232325; padding: 1.4cqi 2.4cqi 2cqi; display: grid; gap: 1.4cqi; color: #fff; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif; font-size: 2.3cqi; font-weight: 500; } .pr__row { display: flex; align-items: center; gap: 1.6cqi; min-height: 5cqi; } .pr__row svg { width: 2.2cqi; height: 2.2cqi; fill: currentColor; flex: none; } .pr__ic { display: grid; place-items: center; width: 5cqi; height: 5cqi; } .pr__start { display: inline-flex; align-items: center; gap: 1cqi; padding: 1.2cqi 2.4cqi; border-radius: 1.2cqi; background: #3a3a3c; } .pr__gap { flex: 1; } .pr__lbl { display: inline-flex; align-items: center; gap: 1cqi; padding: 0 1cqi; white-space: nowrap; } .pr__lbl small { font-size: 0.7em; } .pr__seg { display: inline-flex; padding: 0.35cqi; border-radius: 1.2cqi; box-shadow: inset 0 0 0 0.2cqi #3a3a3c; } .pr__seg b { font-weight: 500; padding: 0.6cqi 1.6cqi; border-radius: 0.9cqi; } .pr__seg b.is-on { background: #4a4a4d; } .pr__div { width: 0.2cqi; height: 3.4cqi; background: #3a3a3c; margin: 0 1cqi; } /* Finale: a full screen of its own, with room to breathe. */ .finale:not(.finale--compact) { min-height: 100vh !important; min-height: 100svh !important; padding: clamp(80px, 12svh, 140px) var(--gutter) clamp(80px, 12svh, 140px) !important; box-sizing: border-box; justify-content: center !important; gap: clamp(20px, 4svh, 44px); } .finale:not(.finale--compact) .finale__sub { margin-top: clamp(18px, 3svh, 32px); } .finale:not(.finale--compact) .appstore-badge { margin: clamp(24px, 4svh, 44px) 0 clamp(12px, 2svh, 20px) !important; display: inline-block; } /* Not in the App Store yet: the badge as Apple supplies it (unaltered, not a link) with a label beside it. */ .appstore-badge--soon { display: inline-flex !important; align-items: center; gap: 14px; line-height: 1; cursor: default; } .appstore-badge--soon:hover { opacity: 1; } .appstore-badge__soon { padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #21190B; background: var(--tungsten); white-space: nowrap; }