/* ============================================================ Frame — landing page (dark mode) Tokens lifted from the actual Frame extension stylesheet so the landing site feels like a continuation of the product. ============================================================ */ /* Inter — local files (latin only loaded eagerly) */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("./fonts/inter-7.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("./fonts/inter-6.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* FH Lecturis — display + larger copy */ @font-face { font-family: "FH Lecturis"; font-style: normal; font-weight: 300; font-display: swap; src: url("./fonts/FH%20Lecturis/FHLecturisTest-Light.woff2") format("woff2"); } @font-face { font-family: "FH Lecturis"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/FH%20Lecturis/FHLecturisTest-Regular.woff2") format("woff2"); } @font-face { font-family: "FH Lecturis"; font-style: normal; font-weight: 700; font-display: swap; src: url("./fonts/FH%20Lecturis/FHLecturisTest-Bold.woff2") format("woff2"); } /* ============ Tokens (from Frame extension styles.css) ============ */ :root { /* Surface stack — layered dark with subtle contrast steps */ --bg-0: #0A0A0B; --bg-1: #121214; --surface: #18181B; --surface-2: #232327; --surface-3: #2C2C31; /* Ink */ --ink: #F4F3EF; --ink-1: #E5E4DF; --ink-2: #A8A6A0; --ink-3: #76746E; --ink-4: #4A4945; /* Hairlines on dark */ --hair: rgba(255, 255, 255, 0.07); --hair-strong: rgba(255, 255, 255, 0.12); --hair-faint: rgba(255, 255, 255, 0.04); /* Accent */ --accent: #FF6A3D; --accent-soft: #FF8B65; --accent-bg: rgba(255, 106, 61, 0.14); /* Type */ --font-sans: "Inter", "SF Pro Text", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display:"FH Lecturis", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, "Menlo", Consolas, monospace; /* Radius — pills + heavy rounding (matches extension) */ --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; --tracking-tight: -0.012em; --tracking-wide: 0.10em; /* Layout */ --pad-x: 40px; --pad-x-sm: 20px; --max: 1320px; --ease: cubic-bezier(0.2, 0.6, 0.2, 1); } @media (max-width: 720px) { :root { --pad-x: var(--pad-x-sm); } } /* ============ Reset / base ============ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } html { overflow-x: hidden; } /* NOTE: don't put overflow-x:hidden on . Combined with html, the computed `overflow: hidden auto` on body promotes body into its own scroll container, which breaks `position: sticky` for descendants (the sticky nav scrolls away with the page). Clip horizontal overflow with .page instead if it ever becomes a problem. */ body { font-family: var(--font-sans); color: var(--ink); background: var(--bg-0); font-size: 15px; line-height: 1.5; letter-spacing: var(--tracking-tight); font-feature-settings: "ss01", "cv11", "cv02"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color-scheme: dark; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul, ol, dl { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4, h5, h6, p { margin: 0; } button, input { font: inherit; color: inherit; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ============ Page wrapper + bottom-reveal logo trick ============ */ /* The Frame wordmark is fixed at the bottom of the viewport, behind everything. The .page wrapper has a solid background and z-index above it so the logo only shows through the .reveal-spacer at the very end of the document. */ .page { position: relative; z-index: 1; background: var(--bg-0); } .reveal-bg { position: fixed; inset: auto 0 0 0; height: 50vh; display: flex; align-items: flex-end; justify-content: center; padding: 0 var(--pad-x) 24px; z-index: 0; pointer-events: none; user-select: none; overflow: hidden; font-family: var(--font-display); font-weight: 100; font-size: clamp(160px, 30vw, 520px); line-height: 0.82; letter-spacing: -0.045em; color: var(--ink-1); white-space: nowrap; background: transparent; transition: background 1800ms cubic-bezier(0.2, 0.7, 0.2, 1); } .reveal-bg__text, .reveal-bg__r { transition: color 1800ms cubic-bezier(0.2, 0.7, 0.2, 1); } .reveal-bg.is-revealed { background: var(--accent); } .reveal-bg.is-revealed .reveal-bg__text { color: var(--bg-0); } .reveal-bg.is-revealed .reveal-bg__r { color: var(--bg-0); } @media (prefers-reduced-motion: reduce) { .reveal-bg, .reveal-bg__text, .reveal-bg__r { transition: none; } } .reveal-bg__text { display: inline-block; } .reveal-bg__r { font-family: var(--font-display); font-size: 0.16em; color: var(--accent); margin-left: 0.04em; margin-top: 0.34em; display: inline-block; font-weight: 400; } .reveal-spacer { height: 50vh; } ::selection { background: var(--accent-bg); color: var(--ink); } .skip { position: absolute; left: -9999px; top: 0; } .skip:focus { left: 8px; top: 8px; padding: 8px 12px; background: var(--ink); color: var(--bg-0); z-index: 100; border-radius: var(--r-pill); } /* ============ Type primitives ============ */ .display { font-family: var(--font-display); font-weight: 300; font-size: clamp(44px, 7.4vw, 108px); line-height: 1; letter-spacing: -0.022em; color: var(--ink); /* Balance line lengths so headlines don't leave a single-word orphan line. Browser distributes the words evenly across lines for an optical match. */ text-wrap: balance; } .hero__display { font-size: 140px; letter-spacing: -0.028em; color: var(--accent); white-space: nowrap; /* `position: relative; top` is the visual equivalent of `transform: translateY()` but does NOT create a new stacking context. A stacking context here would isolate the per-word z-indexes (capture/web z=3, the z=1) from .hero__popup-shell (z=2), making everything render under the popup. Keeping it position-based preserves the layering so "capture" / "web" stay in front of the popup and "the" stays behind it. */ position: relative; top: -79px; /* baked from tune: 4px baseline + (-83px) tuned shift */ } .display--md { font-weight: 300; font-size: clamp(34px, 5.4vw, 76px); line-height: 1.02; letter-spacing: -0.02em; } .display--xl { font-weight: 300; font-size: clamp(64px, 13vw, 200px); line-height: 0.92; letter-spacing: -0.026em; } .display__period { color: inherit; } /* small caption tier (mono) */ .eyebrow, .section-num, .section-label, .tag, .footer__label { font-family: var(--font-mono); font-size: 11px; line-height: 1.2; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-3); } /* ============ Nav ============ */ .nav { position: sticky; top: 0; z-index: 50; background: rgba(10, 10, 11, 0.85); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid var(--hair); } .nav__inner { max-width: var(--max); margin: 0 auto; padding: 14px var(--pad-x); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; } .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); } .brand__mark { width: 28px; height: 28px; border-radius: var(--r-pill); /* Match the orange-on-white extension icon (assets/icon-128.png) used as the favicon and in the chrome store assets. */ background: var(--accent); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 700; font-size: 12px; flex-shrink: 0; } .brand__word { font-family: var(--font-sans); font-weight: 500; font-size: 15px; letter-spacing: var(--tracking-tight); color: var(--ink); } .brand__tm { font-family: var(--font-mono); font-size: 9px; font-weight: 500; vertical-align: super; margin-left: 2px; color: var(--ink-3); } .nav__links { position: relative; display: flex; justify-content: center; gap: 6px; font-size: 13.5px; color: var(--ink-2); } .nav__links a { position: relative; z-index: 1; padding: 6px 12px; border-radius: var(--r-pill); transition: color 160ms var(--ease); } .nav__links a:hover { color: var(--ink); } /* Single shared pill that morphs between hovered links — JS positions it on mouseenter of each link, fades it out on mouseleave of the whole .nav__links container. The transition handles the smooth slide+resize. */ .nav__links-pill { position: absolute; top: 0; left: 0; height: 100%; width: 0; background: var(--surface-2); border-radius: var(--r-pill); pointer-events: none; opacity: 0; transform: translateX(0); transform-origin: left center; transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1), width 320ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 200ms ease; z-index: 0; } .nav__actions { display: flex; align-items: center; gap: 14px; justify-self: end; } .nav__meta { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--tracking-wide); color: var(--ink-3); text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; } .nav__meta::before { content: ""; width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--accent); display: inline-block; } @media (max-width: 880px) { .nav__links { display: none; } .nav__inner { grid-template-columns: auto 1fr; } .nav__meta { display: none; } } /* ============ Buttons (rounded pills) ============ */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; height: 38px; border-radius: var(--r-pill); font-size: 13.5px; font-weight: 500; letter-spacing: var(--tracking-tight); border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease), transform 80ms ease; } .btn:active { transform: translateY(1px); } .btn--lg { height: 48px; padding: 0 22px; font-size: 14.5px; gap: 10px; } .btn--primary { background: var(--ink); color: var(--bg-0); border-color: var(--ink); font-weight: 600; } .btn--primary:hover { background: #FFFFFF; border-color: #FFFFFF; } /* Widened nav CTA — ~50% more horizontal padding than the base .btn (16px → 24px). Hero + final CTAs use the larger .btn--lg modifier for emphasis and inherit its default 22px padding. */ .nav__actions .btn--primary { padding: 0 24px; } .btn--ghost { background: var(--surface-2); color: var(--ink-1); border-color: var(--hair-strong); } .btn--ghost:hover { background: var(--surface-3); color: var(--ink); border-color: rgba(255,255,255,0.18); } .btn--accent { background: var(--accent); color: var(--bg-0); border-color: var(--accent); font-weight: 600; } .btn--accent:hover { background: var(--accent-soft); border-color: var(--accent-soft); } .btn__dot { width: 7px; height: 7px; background: currentColor; display: inline-block; border-radius: var(--r-pill); } .btn--primary .btn__dot { background: var(--accent); } .btn--accent .btn__dot { background: var(--bg-0); } .btn--ghost .btn__dot { background: var(--accent); } .btn__arrow { transition: transform 220ms var(--ease); } .btn:hover .btn__arrow { transform: translateX(3px); } /* ============ Section primitives ============ */ .section-head { padding: 28px 0 56px; display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--hair); } .section-num { color: var(--ink-3); } .section-label { color: var(--ink-1); } .eyebrow { display: inline-flex; align-items: center; gap: 10px; } .eyebrow__sep { width: 18px; height: 1px; background: currentColor; opacity: 0.5; } .eyebrow__num { color: var(--ink-3); } .eyebrow__label { color: var(--ink-2); } /* ============ Hero ============ */ .hero { max-width: var(--max); margin: 0 auto; padding: 24px var(--pad-x) 0; position: relative; } .hero__top { display: flex; justify-content: space-between; align-items: center; padding: 8px 0 8px; border-bottom: 1px solid var(--hair); flex-wrap: wrap; gap: 12px; } .eyebrow--right { color: var(--ink-2); justify-self: end; } .hero h1.display { margin: 0 auto; max-width: none; width: max-content; text-align: center; } .hero__viewport { /* Fits in the visible browser height (below the sticky nav). */ min-height: calc(100vh - 76px); display: flex; flex-direction: column; position: relative; } .hero__core { flex: 1; display: flex; flex-direction: column; justify-content: center; } .hero__layer { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; perspective: 1400px; } .hero__lede, .hero__cta { flex: 0 0 auto; } .hero__lede { margin-top: 44px; margin-bottom: 8px; } .hero__cta { margin-top: 60px; margin-bottom: 24px; padding-top: 0; padding-bottom: 24px; } /* Tighten the hero's vertical footprint on shorter laptop screens so the CTA never bleeds below the visible viewport. Two breakpoints — one for ~900px (14" MacBook Pro) and one for ~760px (smaller laptops). */ @media (max-height: 1000px) { .hero__layer { padding-bottom: 160px; } .hero__lede { margin-top: 24px; } .hero__cta { margin-top: 32px; padding-bottom: 12px; margin-bottom: 12px; } .hero__popup-shell { width: 260px; } } @media (max-height: 820px) { .hero__display { font-size: clamp(40px, min(11vw, 11.5vh), 140px); } .hero__layer { padding-bottom: 110px; } .hero__lede { margin-top: 14px; font-size: 14px; } .hero__cta { margin-top: 16px; padding-bottom: 0; margin-bottom: 0; } .hero__popup-shell { width: 210px; } .hero__top { padding: 4px 0; } } .hero__line { display: block; position: relative; } .hero__line { z-index: 1; } .hero__line--front { z-index: 3; } .hero__line--mixed { z-index: auto; } /* per-word z stacking inside */ .hero__word { position: relative; } .hero__word--front { z-index: 3; } .hero__word--back { z-index: 1; } .hero__popup { --pop-tx: 0px; --pop-ty: 0px; } .hero__layer { padding-bottom: 130px; } /* Popup shell — handles position + entrance animation. z-index: 2 sits between .hero__word--front (z=3, "capture"/"web") and .hero__word--back (z=1, "the"). End state baked from tune values. */ .hero__popup-shell { position: absolute; left: 50%; bottom: 0; z-index: 2; width: 320px; opacity: 0; transform: translate(-50%, 100px) scale(0.73); transform-origin: 50% 100%; animation: popupFloatIn 800ms cubic-bezier(0.2, 0.8, 0.2, 1) 1000ms forwards; } @keyframes popupFloatIn { to { opacity: 1; transform: translate(-50%, 70px) scale(0.76); } } /* Popup itself — appearance + parallax tilt */ .hero__popup { position: relative; width: 100%; border-radius: var(--r-xl); border: 1px solid var(--hair-strong); background: var(--bg-0); box-shadow: 0 32px 70px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04) inset; --pp-tx: 0px; --pp-ty: 0px; --pp-rx: 0deg; --pp-ry: 0deg; transform: translate(var(--pop-tx, 0px), var(--pop-ty, 0px)) translate(var(--pp-tx), var(--pp-ty)) rotateX(var(--pp-rx)) rotateY(var(--pp-ry)); transform-style: preserve-3d; transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1); will-change: transform; } @media (prefers-reduced-motion: reduce) { .hero__popup-shell { opacity: 1; transform: translate(-50%, 70px) scale(0.76); animation: none; } } @media (max-width: 760px) { .hero__display { font-size: clamp(56px, 12vw, 96px); } .hero__popup { width: 240px; } } /* ────────────────────────────────────────────────────────────── Hero popup layout REVIEW variants (active only when the site is loaded with ?layout=1..5). No effect on production visitors; used by hero-popup-lab.html for design review. Each variant tweaks popup width and/or pushes it lower so it covers less of the headline. ────────────────────────────────────────────────────────────── */ body[data-hero-layout="1"] .hero__popup-shell { width: 280px; } body[data-hero-layout="2"] .hero__popup-shell { width: 250px; } body[data-hero-layout="3"] .hero__popup-shell { width: 280px; } body[data-hero-layout="3"] .hero__layer { padding-bottom: 320px; } body[data-hero-layout="4"] .hero__display { font-size: clamp(40px, min(10vw, 10vh), 132px); } body[data-hero-layout="4"] .hero__popup-shell { width: 320px; transform: translate(-50%, 0) scale(0.72); transform-origin: 50% 100%; opacity: 1; animation-name: none; } body[data-hero-layout="4"] .hero__layer { padding-bottom: 220px; } body[data-hero-layout="5"] .hero__popup-shell { width: 220px; } body[data-hero-layout="5"] .hero__layer { padding-bottom: 400px; } /* ────────────────────────────────────────────────────────────── Hero TUNE mode (?tune=1) — live sliders for picking final values. Variables are set inline on by the panel script. When --tune-* vars are unset, these rules are no-ops. ────────────────────────────────────────────────────────────── */ html[data-hero-tune="1"] .hero__display { font-size: var(--tune-display-size, clamp(48px, min(12.4vw, 13vh), 188px)); transform: translateY(var(--tune-display-y, 0px)); } html[data-hero-tune="1"] .hero__popup-shell { transform: translate(-50%, var(--tune-popup-y, 0px)) scale(var(--tune-popup-scale, 1)); transform-origin: 50% 100%; opacity: 1; animation-name: none; } html[data-hero-tune="1"] .hero__lede { font-size: var(--tune-lede-size, inherit); /* !important needed to win over .reveal.is-in { transform: none } that fires when the lede's reveal animation completes. */ transform: translateY(var(--tune-lede-y, 0px)) !important; transition: none; } /* ============================================================ Hero invert + giant CTA on Add-to-Chrome hover When the hero's primary CTA is hovered, the entire hero turns orange and all the type flips to a dark ink so it stays legible. The button itself scales up 3× for a dramatic moment. ============================================================ */ .hero { isolation: isolate; } .hero::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: transparent; transition: background 1140ms cubic-bezier(0.2, 0.7, 0.2, 1); z-index: -1; pointer-events: none; } .hero:has(.hero__cta .btn:hover)::before { background: var(--accent); } /* Type color flips when invert is active */ .hero .hero__display, .hero .hero__lede, .hero .eyebrow, .hero .eyebrow__num, .hero .eyebrow__label { transition: color 1140ms cubic-bezier(0.2, 0.7, 0.2, 1); } .hero:has(.hero__cta .btn:hover) .hero__display { color: var(--bg-0); } .hero:has(.hero__cta .btn:hover) .hero__lede, .hero:has(.hero__cta .btn:hover) .eyebrow, .hero:has(.hero__cta .btn:hover) .eyebrow__num, .hero:has(.hero__cta .btn:hover) .eyebrow__label { color: var(--bg-0); } .hero:has(.hero__cta .btn:hover) .eyebrow__sep { background: var(--bg-0); opacity: 0.4; } /* Hero CTA — big-by-default with equal padding on every side. Hover only changes color, no scale. The closing "Get Yoinked" CTA inherits the same treatment so the two prominent CTAs look identical. */ .hero__cta .btn, .story__cta .btn { height: auto; padding: 40px 64px; font-size: 24px; font-weight: 600; letter-spacing: -0.012em; gap: 14px; border-radius: 999px; transition: background 840ms ease-out, color 840ms ease-out, border-color 840ms ease-out; } .hero__cta .btn .btn__dot, .story__cta .btn .btn__dot { width: 14px; height: 14px; } .hero__cta .btn--primary:hover, .story__cta .btn--primary:hover { background: var(--bg-0); color: var(--ink); border-color: var(--bg-0); } .hero__cta .btn--primary:hover .btn__dot, .story__cta .btn--primary:hover .btn__dot { background: var(--accent); } @media (prefers-reduced-motion: reduce) { .hero::before, .hero .hero__display, .hero .hero__lede, .hero .eyebrow, .hero__cta .btn, .story__cta .btn { transition: none; } } /* ============ Scroll cues — fixed to the viewport bottom ============ */ .scroll-cue { position: fixed; bottom: 18px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-3); pointer-events: none; z-index: 40; transition: opacity 380ms cubic-bezier(0.2, 0.7, 0.2, 1); } .scroll-cue--left { left: 16px; } .scroll-cue--right { right: 16px; } .scroll-cue.is-hidden { opacity: 0; } .scroll-cue__arrow { display: inline-block; font-family: var(--font-display); font-size: 14px; line-height: 1; color: var(--ink-2); animation: scrollCueBob 1.8s ease-in-out infinite; } @keyframes scrollCueBob { 0%, 100% { transform: translateY(0); opacity: 0.55; } 50% { transform: translateY(4px); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .scroll-cue__arrow { animation: none; opacity: 0.8; } } @media (max-width: 520px) { .scroll-cue { font-size: 9.5px; bottom: 16px; } } @media (max-width: 520px) { .hero__popup { display: none; } } .lede { font-family: var(--font-sans); font-weight: 400; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; letter-spacing: -0.005em; color: var(--ink-2); text-wrap: balance; } .hero__lede { max-width: 56ch; margin-left: auto; margin-right: auto; text-align: center; font-size: 19px; /* baked from tune; overrides the .lede clamp() */ /* Visual Y offset baked from tune (translateY 40px → top 40px). Using `top` instead of `transform` so the .reveal.is-in { transform: none } rule that fires after the entrance animation doesn't wipe it out. */ position: relative; top: 40px; } .hero__cta { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; } @media (max-width: 880px) { .hero h1.display { margin: 48px auto 28px; } .hero__lede { margin-bottom: 28px; } } /* ============ Hero visual: viewer screenshot ============ */ .hero-shot { margin: 0; padding-bottom: 24px; position: relative; } .hero-shot__frame { position: relative; border: 1px solid var(--hair-strong); background: var(--bg-1); border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 1440 / 920; } .hero-shot__frame img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; } .hero-shot__caption { display: flex; gap: 18px; align-items: baseline; margin-top: 18px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--ink-3); } .hero-shot__caption span:first-child { color: var(--ink-1); } /* Floating popup card sitting on top of the viewer screenshot */ .hero-shot__popup { position: absolute; bottom: -42px; right: 32px; width: 296px; border-radius: var(--r-xl); border: 1px solid var(--hair-strong); background: var(--bg-0); z-index: 2; box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04) inset; } .hero-shot__popup img { width: 100%; display: block; } @media (max-width: 760px) { .hero-shot__popup { display: none; } } /* Animated capture popup (replaces static popup screenshot) */ /* ============ Hero capture-popup mockup ============================= Mirrors the real Chrome extension popup (Frame/popup.html): - Header: brand mark + "Yoink" word, no version chip - Big white CTA button rendered in its "is-capturing" state — animated PIP preview behind a dark gradient overlay, white icon/label/sublabel centered, accent progress bar flush with the bottom edge - Library secondary button (mirrors .btn-secondary-half) - Footer with the same line as the real popup The marketing site keeps the screenshot-cycling behavior (data-cycle / data-track / data-check) so the PIP cycles through 3 sample captures with a "done" check flash between them. */ .capture-popup { display: flex; flex-direction: column; padding: 18px; gap: 14px; background: var(--bg-0); border-radius: 22px; border: 1px solid var(--hair-strong); overflow: hidden; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6); } .capture-popup__head { display: flex; align-items: center; justify-content: flex-start; padding: 0 2px; } .capture-popup__brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); } .capture-popup__brand-mark { width: 22px; height: 22px; border-radius: 999px; background: var(--ink); color: var(--bg-0); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .capture-popup__brand-mark svg { display: block; } .capture-popup__brand-word { font-family: var(--font-sans); font-weight: 500; font-size: 13px; letter-spacing: -0.01em; color: var(--ink); } /* ----- Big white CTA — mirrors real .btn-capture in is-capturing ----- */ .capture-popup__cta { position: relative; width: 100%; aspect-ratio: 1.18 / 1; border-radius: 22px; background: #FFFFFF; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 22px; } .capture-popup__preview { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; z-index: 1; } .capture-popup__preview-track { position: absolute; inset: 0 0 auto 0; display: flex; flex-direction: column; animation: capScroll 9s cubic-bezier(0.33, 0, 0.67, 1) infinite; will-change: transform; } .capture-popup__preview-track img { width: 100%; height: auto; display: block; } .capture-popup__preview-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 10, 11, 0.32) 0%, rgba(10, 10, 11, 0.68) 100%); } .capture-popup__cta-content { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; color: #FFFFFF; transition: opacity 220ms cubic-bezier(0.2, 0.7, 0.2, 1); } /* When the "done" check is showing, fade out the icon + label + sublabel so only the check overlay reads. JS toggles `.is-done` on the parent .capture-popup__cta in sync with .capture-popup__cta-done.is-on. */ .capture-popup__cta.is-done .capture-popup__cta-content { opacity: 0; } .capture-popup__cta-icon { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; color: #FFFFFF; } .capture-popup__cta-icon svg { width: 100%; height: 100%; } .capture-popup__cta-icon .cap-br { animation: capBracketCascade 1.6s linear infinite; opacity: 0.35; } .capture-popup__cta-icon .cap-br--tl { animation-delay: 0s; } .capture-popup__cta-icon .cap-br--tr { animation-delay: 0.4s; } .capture-popup__cta-icon .cap-br--br { animation-delay: 0.8s; } .capture-popup__cta-icon .cap-br--bl { animation-delay: 1.2s; } .capture-popup__cta-label { font-family: var(--font-sans); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: #FFFFFF; line-height: 1.1; } .capture-popup__cta-sublabel { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: rgba(255, 255, 255, 0.78); } .capture-popup__cta-progress { position: absolute; inset: auto 0 0 0; height: 3px; background: rgba(255, 255, 255, 0.18); z-index: 4; overflow: hidden; } .capture-popup__cta-progress-fill { display: block; height: 100%; width: 0%; background: var(--accent); animation: capProgress 9s cubic-bezier(0.4, 0, 0.6, 1) infinite; } /* ----- "Done" flash that briefly covers the PIP between cycles ----- */ .capture-popup__cta-done { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; background: var(--accent); color: var(--bg-0); opacity: 0; pointer-events: none; transition: opacity 320ms cubic-bezier(0.2, 0.7, 0.2, 1); } .capture-popup__cta-done svg { transform: scale(0.6); opacity: 0; transition: transform 380ms cubic-bezier(0.34, 1.56, 0.64, 1) 60ms, opacity 240ms ease-out 60ms; } .capture-popup__cta-done.is-on { opacity: 1; } .capture-popup__cta-done.is-on svg { transform: scale(1); opacity: 1; } .capture-popup__cta-done svg circle, .capture-popup__cta-done svg path { stroke-dasharray: 100; stroke-dashoffset: 100; } .capture-popup__cta-done.is-on svg circle { animation: checkDrawCircle 360ms cubic-bezier(0.4, 0, 0.2, 1) 80ms forwards; } .capture-popup__cta-done.is-on svg path { animation: checkDrawPath 280ms cubic-bezier(0.4, 0, 0.2, 1) 280ms forwards; } /* ----- Library secondary button — mirrors .btn-secondary-half ----- */ .capture-popup__library { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 38px; padding: 0 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--hair-strong); color: var(--ink-1); font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; letter-spacing: -0.01em; cursor: default; } .capture-popup__library-icon { display: inline-flex; width: 14px; height: 14px; color: currentColor; } .capture-popup__library-icon svg { width: 100%; height: 100%; } /* ----- Footer ----- */ .capture-popup__foot { margin-top: 2px; padding-top: 12px; border-top: 1px solid var(--hair); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-3); text-align: center; } @keyframes capScroll { 0% { transform: translateY(0); } 92% { transform: translateY(-50%); } 100% { transform: translateY(-50%); } } @keyframes capProgress { 0% { width: 0%; } 92% { width: 100%; } 100% { width: 100%; } } @keyframes capBreathe { 0%, 100% { transform: scale(1); opacity: 0.92; } 50% { transform: scale(1.08); opacity: 1; } } @keyframes capBracketCascade { 0%, 60%, 100% { opacity: 0.35; } 20% { opacity: 1; } } @keyframes checkDrawCircle { to { stroke-dashoffset: 0; } } @keyframes checkDrawPath { to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .capture-popup__preview-track, .capture-popup__cta-progress-fill, .capture-popup__cta-icon, .capture-popup__cta-icon .cap-br { animation: none; opacity: 1; } .capture-popup__cta-progress-fill { width: 60%; } } /* ============ The Shift ============ */ .shift { max-width: var(--max); margin: 180px auto 0; padding: 0 var(--pad-x); } .shift__inner { padding: 0 0 88px; border-bottom: 1px solid var(--hair); } .shift__heading { max-width: none; margin: 0 0 40px; } .shift__body { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--ink-2); max-width: 60ch; } /* Comparison */ .compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 56px 0 64px; } .compare__col { padding: 28px; border: 1px solid var(--hair); border-radius: var(--r-xl); background: var(--bg-1); display: flex; flex-direction: column; gap: 22px; } .compare__col--accent { background: var(--surface); border-color: var(--hair-strong); } .compare__col header { display: flex; flex-direction: column; gap: 14px; } .tag { align-self: flex-start; padding: 4px 12px; border: 1px solid var(--hair-strong); color: var(--ink-2); border-radius: var(--r-pill); } .tag--accent { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); } .compare__col h3 { font-family: var(--font-display); font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; letter-spacing: var(--tracking-tight); line-height: 1.05; } .compare__shot { border: 1px solid var(--hair); border-radius: var(--r-lg); overflow: hidden; background: var(--bg-0); aspect-ratio: 4 / 3; position: relative; } .compare__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .compare__shot--basic img { filter: saturate(0.7) brightness(0.95); } .compare__shot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; border: 1px solid rgba(255,255,255,0.04); } .compare__list { display: grid; gap: 10px; } .compare__list li { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; border-bottom: 1px solid var(--hair); padding-bottom: 8px; } .compare__list span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-3); } .compare__list em { font-style: normal; text-align: right; color: var(--ink-1); } @media (max-width: 880px) { .compare { grid-template-columns: 1fr; } } /* ============ Features ============ */ .features { max-width: var(--max); margin: 160px auto 0; padding: 0 var(--pad-x); } .features__heading { margin: 32px 0 72px; max-width: 16ch; } .features__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .feature { padding: 22px; display: flex; flex-direction: column; gap: 18px; min-height: 460px; background: var(--bg-1); border: 1px solid var(--hair); border-radius: var(--r-xl); position: relative; transition: background 240ms var(--ease), border-color 240ms var(--ease); overflow: hidden; } .feature:hover { background: var(--surface); border-color: var(--hair-strong); } .feature__num { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-3); display: inline-flex; align-items: center; gap: 8px; } .feature__num::after { content: ""; width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--accent); } .feature__visual { position: relative; border: 1px solid var(--hair); border-radius: var(--r-lg); flex: 1; background: var(--bg-0); overflow: hidden; min-height: 200px; } .feature__visual img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .feature__visual--popup img { object-position: top center; } .feature__visual--xray img { object-position: top right; } .feature__visual--export { display: flex; align-items: center; justify-content: center; padding: 22px; } .feature__visual--stitch { padding: 16px; display: flex; flex-direction: column; background: var(--surface); } .feature__body { display: flex; flex-direction: column; gap: 6px; } .feature__body h3 { font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: var(--tracking-tight); color: var(--ink); } .feature__body p { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; max-width: 32ch; } /* Stitch visual (only one mockup we keep — abstract, not a screenshot) */ .stitch-stack { flex: 1; position: relative; display: flex; flex-direction: column; gap: 4px; } .stitch-stack__seg { flex: 1; border-radius: var(--r-sm); background: linear-gradient(180deg, var(--surface-2), var(--bg-1)); border: 1px solid var(--hair); position: relative; } .stitch-stack__seg:nth-child(1) { background: linear-gradient(180deg, var(--surface-3), var(--surface)); } .stitch-stack__seg:nth-child(2) { background: linear-gradient(180deg, var(--surface), var(--surface-2)); } .stitch-stack__seg:nth-child(3) { background: var(--accent-bg); } .stitch-stack__seg:nth-child(4) { background: linear-gradient(180deg, var(--surface-2), var(--bg-1)); } .stitch-stack__label { position: absolute; bottom: 12px; right: 16px; font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-2); background: var(--bg-0); padding: 3px 8px; border-radius: var(--r-pill); border: 1px solid var(--hair); } /* Export visual — stacked file pills */ .file-stack { position: relative; width: 100%; max-width: 220px; } .file-card { background: var(--surface-2); border: 1px solid var(--hair-strong); border-radius: var(--r-lg); padding: 14px; display: flex; flex-direction: column; gap: 6px; position: relative; } .file-card + .file-card { margin-top: -28px; margin-left: 20px; background: var(--ink); color: var(--bg-0); border-color: var(--ink); } .file-card__type { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wide); text-transform: uppercase; align-self: flex-start; border: 1px solid currentColor; padding: 2px 8px; border-radius: var(--r-pill); opacity: 0.8; } .file-card__name { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; letter-spacing: var(--tracking-tight); } .file-card__meta { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.02em; opacity: 0.6; } @media (max-width: 1100px) { .features__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .features__grid { grid-template-columns: 1fr; } .feature { min-height: 380px; } } /* ============ X-Ray section ============ */ .xray { max-width: var(--max); margin: 200px auto 0; padding: 0 var(--pad-x) 0; } .xray__head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: end; padding: 0 0 64px; } .xray__heading { max-width: 18ch; margin: 0; } .xray__body { color: var(--ink-2); font-size: clamp(16px, 1.2vw, 18px); line-height: 1.55; max-width: 46ch; margin: 0; } .speclist { border-top: 1px solid var(--hair); margin: 0 0 96px; } .speclist li { padding: 18px 0; border-bottom: 1px solid var(--hair); font-family: var(--font-display); font-weight: 300; font-size: clamp(18px, 1.6vw, 22px); letter-spacing: var(--tracking-tight); color: var(--ink-1); } @media (max-width: 880px) { .xray__head { grid-template-columns: 1fr; gap: 24px; align-items: start; } .speclist li { grid-template-columns: 130px 1fr; } } /* ============ Library section ============ */ .library { max-width: var(--max); margin: 200px auto 0; padding: 0 var(--pad-x); } .library__heading { margin: 32px 0 72px; max-width: 24ch; } /* Column-width visual block, used by xray + library */ .full-shot { margin: 0; padding: 0; } .full-shot__frame { position: relative; border: 1px solid var(--hair-strong); background: var(--bg-1); border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 1440 / 820; } .full-shot__frame--wide { aspect-ratio: 1440 / 760; } .full-shot__frame img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; image-rendering: -webkit-optimize-contrast; } .full-shot__caption { display: flex; gap: 18px; align-items: baseline; padding: 18px 0 0; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--ink-3); } .full-shot__caption span:first-child { color: var(--ink-1); } /* ============ Use Cases ============ */ .cases { max-width: var(--max); margin: 200px auto 0; padding: 0 var(--pad-x); } .cases__heading { margin: 32px 0 72px; max-width: 18ch; } .cases__list { border-top: 1px solid var(--hair); margin-bottom: 72px; } .cases__list li { display: grid; grid-template-columns: 64px 1fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--hair); align-items: baseline; } .cases__num { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-3); } .cases__list p { font-family: var(--font-display); font-size: clamp(20px, 2vw, 28px); letter-spacing: var(--tracking-tight); font-weight: 200; line-height: 1.15; color: var(--ink); } .cases__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 64px; } .case { display: flex; flex-direction: column; gap: 10px; margin: 0; } .case__shot { border: 1px solid var(--hair); background: var(--bg-1); border-radius: var(--r-lg); aspect-ratio: 3 / 4; overflow: hidden; position: relative; } .case__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .case figcaption { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-3); padding-top: 8px; } .case figcaption span { color: var(--ink-1); } .case figcaption em { font-style: normal; } @media (max-width: 980px) { .cases__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .cases__grid { grid-template-columns: 1fr; } } /* ============ Closing CTA ============ */ .closing { position: relative; background: var(--bg-0); margin-top: 240px; max-width: var(--max); margin-left: auto; margin-right: auto; padding: 0 var(--pad-x); } .closing__inner { padding: 64px 0 240px; text-align: center; display: flex; flex-direction: column; align-items: center; } .closing__num { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-3); display: inline-flex; align-items: center; gap: 8px; margin-bottom: 32px; } .closing__num::before { content: ""; width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--accent); } .closing__heading { margin: 0 0 120px; max-width: 22ch; } .closing__cta { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin-bottom: 120px; } .closing__fine { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.01em; color: var(--ink-2); max-width: 44ch; line-height: 1.5; } .closing__specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; width: 100%; max-width: 880px; padding-top: 40px; margin-top: 8px; border-top: 1px solid var(--hair); } .closing__specs li { display: flex; flex-direction: column; gap: 8px; text-align: center; align-items: center; } .closing__specs span { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-3); } .closing__specs em { font-style: normal; font-family: var(--font-display); font-weight: 300; font-size: 16px; letter-spacing: var(--tracking-tight); color: var(--ink-1); } @media (max-width: 720px) { .closing__specs { grid-template-columns: repeat(2, 1fr); } } /* ============ Footer ============ */ .footer { background: var(--bg-0); color: var(--ink); border-top: 1px solid var(--hair); } .footer__top { border-bottom: 1px solid var(--hair); } .footer__top-grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.6fr; } .footer__top-grid > .footer__col { padding: 56px 36px; border-left: 1px solid var(--hair); display: flex; flex-direction: column; gap: 14px; min-width: 0; } .footer__top-grid > .footer__col:first-child { padding-left: var(--pad-x); border-left: 0; } .footer__top-grid > .footer__col:last-child { padding-right: var(--pad-x); } .footer__col--brand .footer__label { margin-bottom: 6px; } .footer__col a { font-size: 15px; color: var(--ink-1); transition: color 160ms var(--ease); width: fit-content; } .footer__col a:hover { color: var(--ink); } .footer__tag { font-size: 15px; line-height: 1.45; color: var(--ink-1); max-width: 30ch; } .footer__col-line { font-size: 13px; line-height: 1.45; color: var(--ink-2); max-width: 32ch; } .newsletter { display: flex; align-items: stretch; border: 1px solid var(--hair-strong); border-radius: 999px; background: var(--bg-1); padding: 4px; width: 100%; max-width: 380px; } .newsletter__input { flex: 1; background: transparent; border: 0; outline: none; padding: 8px 14px; color: var(--ink); font-family: inherit; font-size: 14px; min-width: 0; } .newsletter__input::placeholder { color: var(--ink-3); } .newsletter__submit { background: var(--ink); color: var(--bg-0); border: 0; padding: 8px 18px; font-family: inherit; font-size: 13.5px; font-weight: 500; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background 160ms var(--ease); } .newsletter__submit:hover { background: var(--ink-1); } .newsletter__arrow { display: inline-block; transition: transform 160ms var(--ease); } .newsletter__submit:hover .newsletter__arrow { transform: translateX(2px); } .footer__caption { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-3); } .footer__bottom { border-bottom: 1px solid var(--hair); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-3); } .footer__bottom-grid { max-width: var(--max); margin: 0 auto; display: grid; /* Three equal columns so the time / © / "Designed with Gather" cells spread across the full row. (Was a 4-col grid with an empty 4th col that left dead space on the right.) */ grid-template-columns: 1fr 1fr 1fr; } .footer__bottom-cell { padding: 20px 28px; border-left: 1px solid var(--hair); display: flex; align-items: center; gap: 10px; } .footer__bottom-cell:first-child { border-left: 0; padding-left: var(--pad-x); } .footer__bottom-cell:nth-child(2) { justify-content: center; } .footer__bottom-cell:last-child { padding-right: var(--pad-x); justify-content: flex-end; } .footer__bottom-cell a { color: var(--ink-2); } .footer__bottom-cell a:hover { color: var(--ink); } .footer__bottom-dot { width: 8px; height: 8px; background: var(--accent); display: inline-block; } .footer__bottom-toggle { display: inline-block; width: 22px; height: 11px; border-radius: 999px; background: var(--ink-4); position: relative; } .footer__bottom-toggle::after { content: ""; position: absolute; width: 7px; height: 7px; background: var(--ink-1); border-radius: 999px; top: 2px; right: 2px; } @media (max-width: 880px) { .footer__top-grid { grid-template-columns: 1fr 1fr; } .footer__top-grid > .footer__col { padding: 32px var(--pad-x); border-left: 0; border-top: 1px solid var(--hair); } .footer__top-grid > .footer__col:nth-child(2n) { border-left: 1px solid var(--hair); } .footer__top-grid > .footer__col:nth-child(-n + 2) { border-top: 0; } .footer__bottom-grid { grid-template-columns: 1fr 1fr; } .footer__bottom-cell { padding: 14px var(--pad-x); border-left: 0; border-top: 1px solid var(--hair); justify-content: flex-start; } .footer__bottom-cell:nth-child(2n) { border-left: 1px solid var(--hair); } } @media (max-width: 520px) { .footer__top-grid { grid-template-columns: 1fr; } .footer__top-grid > .footer__col { border-left: 0 !important; } .footer__bottom-grid { grid-template-columns: 1fr; } .footer__bottom-cell { border-left: 0 !important; justify-content: flex-start; } } /* ============ Reveal motion ============ */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 800ms var(--ease), transform 900ms var(--ease); } .reveal.is-in { opacity: 1; transform: none; } /* Parallax-feel cascade: each card starts further down + reveals later */ .feature.reveal { transform: translateY(60px); transition-duration: 900ms, 1100ms; } .features__grid .feature.reveal:nth-child(1) { transform: translateY(48px); transition-delay: 0ms, 0ms; } .features__grid .feature.reveal:nth-child(2) { transform: translateY(72px); transition-delay: 80ms, 80ms; } .features__grid .feature.reveal:nth-child(3) { transform: translateY(96px); transition-delay: 160ms, 160ms; } .features__grid .feature.reveal:nth-child(4) { transform: translateY(120px); transition-delay: 240ms, 240ms; } .features__grid .feature.reveal.is-in { transform: none; } /* Cases cards stagger the same way */ .case.reveal { transform: translateY(48px); transition-duration: 900ms, 1100ms; } .cases__grid .case.reveal:nth-child(1) { transition-delay: 0ms, 0ms; } .cases__grid .case.reveal:nth-child(2) { transition-delay: 80ms, 80ms; } .cases__grid .case.reveal:nth-child(3) { transition-delay: 160ms, 160ms; } .cases__grid .case.reveal:nth-child(4) { transition-delay: 240ms, 240ms; } .cases__grid .case.reveal.is-in { transform: none; } /* Compare cols stagger */ .compare__col.reveal { transform: translateY(40px); } .compare .compare__col.reveal:nth-child(2) { transition-delay: 120ms, 120ms; } .compare .compare__col.reveal.is-in { transform: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .reveal { opacity: 1; transform: none; } html { scroll-behavior: auto; } } /* ============ Install Modal ============ */ .modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; } .modal[hidden] { display: none; } .modal__backdrop { position: absolute; inset: 0; background: rgba(10, 10, 11, 0.78); -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px); animation: modalBackdropIn 280ms cubic-bezier(0.2, 0.7, 0.2, 1); } .modal__card { position: relative; z-index: 1; width: 560px; max-width: 100%; max-height: calc(100vh - 48px); overflow-y: auto; background: var(--bg-1); border: 1px solid var(--hair-strong); border-radius: var(--r-xl); box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04) inset; animation: modalCardIn 380ms cubic-bezier(0.2, 0.8, 0.2, 1); } .modal__close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 999px; background: transparent; border: 1px solid var(--hair-strong); color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease); } .modal__close:hover { background: var(--surface); color: var(--ink); border-color: var(--hair); } .modal__inner { padding: 56px 48px 48px; display: flex; flex-direction: column; } .modal__eyebrow { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-3); display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; } .modal__eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--accent); } .modal__heading { font-size: clamp(36px, 4.4vw, 56px); margin: 0 0 16px; } .modal__lede { font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--ink-2); margin: 0 0 28px; max-width: 44ch; } .modal__steps { list-style: none; margin: 0 0 32px; padding: 0; border-top: 1px solid var(--hair); } .modal__steps li { display: grid; grid-template-columns: 36px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--hair); align-items: baseline; } .modal__step-num { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-3); } .modal__step-text { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: var(--ink-1); } .modal__step-text code { font-family: var(--font-mono); font-size: 12.5px; background: var(--surface); padding: 1px 6px; border-radius: 4px; color: var(--ink); } .modal__step-text strong { color: var(--ink); font-weight: 600; } .modal__download { align-self: flex-start; } .modal__download .btn__arrow { font-size: 16px; } @keyframes modalBackdropIn { from { opacity: 0; } to { opacity: 1; } } @keyframes modalCardIn { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .modal__backdrop, .modal__card { animation: none; } } @media (max-width: 560px) { .modal { padding: 12px; } .modal__inner { padding: 48px 24px 32px; } } /* ============ Yoink loader (3D extruded Y-arrow) ============ */ .yoink-loader { --depth: 8px; --layers: 14; --face: var(--ink); --edge: var(--accent); width: 22px; height: 22px; display: inline-block; position: relative; perspective: 600px; transform-style: preserve-3d; } .yoink-loader__layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; backface-visibility: visible; transform: translateZ(calc(var(--depth) * (var(--i) / (var(--layers) - 1) - 0.5))); } .yoink-loader__layer svg { width: 100%; height: 100%; color: var(--edge); } .yoink-loader__layer:first-child svg, .yoink-loader__layer:last-child svg { color: var(--face); } @keyframes yoinkSpin { from { transform: rotate3d(0, 1, 0, 0deg); } to { transform: rotate3d(0, 1, 0, 360deg); } } /* ============ Yoink splash (page-load loader) ============ */ .yoink-splash { position: fixed; inset: 0; z-index: 999; background: var(--bg-0); display: flex; align-items: center; justify-content: center; perspective: 600px; /* Hold the splash solid through the 1.4s spin, then quickly fade out. JS removes the node after the fade ends. */ animation: yoinkSplashFade 320ms 1300ms cubic-bezier(0.7, 0, 0.84, 0) forwards; } .yoink-splash .yoink-loader { /* Picked config — Sine · in-out, 2× size, ½ depth */ width: 64px; height: 64px; --depth: 8.5px; --layers: 14; animation: yoinkSpin 1.4s cubic-bezier(0.37, 0, 0.63, 1) 1 both; } @keyframes yoinkSplashFade { to { opacity: 0; visibility: hidden; } } /* Lock scroll while the splash is up so the page can't be interacted with. */ html.is-splashing, html.is-splashing body { overflow: hidden; } @media (prefers-reduced-motion: reduce) { .yoink-splash { display: none; } } /* ============ Post-splash staged reveal (bottom-to-top) ============ */ /* While the splash is on screen we hide the header content; once JS swaps `is-loading` for `is-ready`, each piece animates in with a stagger so the order reads CTA → lede → headline/popup → eyebrow → nav. */ html.is-loading .nav__inner, html.is-loading .hero__top, html.is-loading .hero__layer, html.is-loading .hero__lede, html.is-loading .hero__cta, html.is-loading .scroll-cue { opacity: 0; transform: translateY(20px); } @keyframes heroRise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } html.is-ready .hero__cta, html.is-ready .hero__lede, html.is-ready .hero__layer, html.is-ready .hero__top, html.is-ready .nav__inner, html.is-ready .scroll-cue { animation: heroRise 640ms cubic-bezier(0.2, 0.7, 0.2, 1) both; } /* Top-to-bottom: nav first, eyebrow, headline+popup, lede, CTA, scroll cues. */ html.is-ready .nav__inner { animation-delay: 0ms; } html.is-ready .hero__top { animation-delay: 140ms; } html.is-ready .hero__layer { animation-delay: 280ms; } html.is-ready .hero__lede { animation-delay: 420ms; } html.is-ready .hero__cta { animation-delay: 560ms; } html.is-ready .scroll-cue { animation-delay: 700ms; } @media (prefers-reduced-motion: reduce) { html.is-loading .nav__inner, html.is-loading .hero__top, html.is-loading .hero__layer, html.is-loading .hero__lede, html.is-loading .hero__cta, html.is-loading .scroll-cue { opacity: 1; transform: none; } html.is-ready .hero__cta, html.is-ready .hero__lede, html.is-ready .hero__layer, html.is-ready .hero__top, html.is-ready .nav__inner, html.is-ready .scroll-cue { animation: none; } } /* ============ Story sections (new redesign) ============ Simple editorial layout: eyebrow → headline → body → placeholder frame. Used for sections 2 (Capture+X-Ray), 3 (Library), 4 (Export). The final section (.story--final) overrides padding + alignment for the closing CTA. */ .story { padding: 140px var(--pad-x) 100px; position: relative; background: var(--bg-0); } .story + .story { padding-top: 80px; } .story__inner { /* Matches --max used by the nav + footer + old .hero-shot, so the screenshots in each section read at the same width as the original viewer.png hero shot. Headline + lede are still capped by their own max-widths (22ch / 60ch) so the type column stays comfortable. */ max-width: var(--max); margin: 0 auto; } .story .section-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--hair); margin-bottom: 28px; } .story .section-head--center { justify-content: center; border-bottom: 0; padding-bottom: 0; margin-bottom: 18px; } .story__head { font-weight: 200; font-size: clamp(36px, 5.6vw, 76px); letter-spacing: -0.022em; line-height: 1.05; color: var(--ink); margin: 0 0 22px; max-width: 22ch; text-wrap: balance; } .story__head--final { max-width: none; } .story__lede { font-family: var(--font-sans); font-weight: 400; font-size: clamp(15px, 1.4vw, 19px); line-height: 1.5; color: var(--ink-1); max-width: 60ch; margin: 0 0 56px; text-wrap: balance; } .story__lede--center { margin-left: auto; margin-right: auto; text-align: center; } .story__frame { margin: 0; } .story--final { padding: 160px var(--pad-x) 200px; } /* Mimic the hero/header: BIG centered orange display headline, centered lede/caption/CTA. Eyebrow row (.section-head) stays as-is (left-aligned with the bottom rule). */ .story--final .story__head { font-family: var(--font-display); font-weight: 200; font-size: clamp(48px, min(12.4vw, 13vh), 188px); line-height: 1; letter-spacing: -0.028em; color: var(--accent); text-align: center; max-width: none; margin: 0 0 44px; } .story--final .story__lede { text-align: center; margin-left: auto; margin-right: auto; margin-bottom: 56px; } .story--final .story__caption { text-align: center; margin-bottom: 56px; } .story--final .story__cta { justify-content: center; } .story__caption { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-3); margin: 0 0 36px; } .story__credit { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-3); margin: 14px 0 0; } .story__credit a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--hair); transition: color 180ms var(--ease), border-color 180ms var(--ease); } .story__credit a:hover { color: var(--accent); border-bottom-color: var(--accent); } .story__cta { display: flex; justify-content: flex-start; } /* ============ Placeholder frame ============ 16:10 bordered surface with a mono "Fig. 0X — Section placeholder" label in the top-left and a dimension chip in the top-right. The user will replace these with screenshots/media later. */ .placeholder-frame { position: relative; aspect-ratio: 16 / 10; width: 100%; border: 1px solid var(--hair-strong); border-radius: var(--r-xl); overflow: hidden; background: /* faint dot grid — design surface vibe */ radial-gradient(circle at center, rgba(255, 255, 255, 0.045) 1px, transparent 1.4px) 0 0 / 28px 28px, linear-gradient(180deg, rgba(24, 24, 27, 0.85) 0%, var(--bg-1) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 30px 80px -40px rgba(0, 0, 0, 0.6); } .placeholder-frame__label, .placeholder-frame__corner { position: absolute; font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-2); } .placeholder-frame__label { top: 18px; left: 22px; } .placeholder-frame__corner { top: 18px; right: 22px; color: var(--ink-3); } @media (max-width: 720px) { .story { padding: 96px var(--pad-x) 64px; } .story--final { padding: 120px var(--pad-x) 140px; } .story__head { font-size: clamp(32px, 8vw, 48px); } } /* ============ Extension UI mockups ============================ Two miniature versions of the actual Chrome extension UI used in the Capture+X-Ray and Library sections. Same overall window chrome (rounded card, hairline border, dark surface) as the placeholder frames so the page reads as a consistent set. */ .ext-viewer, .ext-library { position: relative; width: 100%; aspect-ratio: 16 / 10; border: 1px solid var(--hair-strong); border-radius: var(--r-xl); overflow: hidden; background: var(--bg-0); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 30px 80px -40px rgba(0, 0, 0, 0.6); display: flex; flex-direction: column; } /* ---------- Capture + X-Ray (viewer mockup) ---------- */ .ext-viewer__topbar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 14px; background: var(--bg-0); border-bottom: 1px solid var(--hair); font-family: var(--font-sans); font-size: 11.5px; } .ext-viewer__topbar-left, .ext-viewer__topbar-right { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .ext-viewer__back, .ext-viewer__btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 999px; color: var(--ink-2); white-space: nowrap; } .ext-viewer__btn--danger { color: var(--ink-3); } .ext-viewer__chev { margin-left: 1px; font-size: 9px; opacity: 0.6; } .ext-viewer__title { font-weight: 500; letter-spacing: var(--tracking-tight); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ext-viewer__divider { width: 1px; height: 14px; background: var(--hair-strong); } .ext-viewer__zoom { display: inline-flex; align-items: center; gap: 1px; padding: 2px; background: var(--surface-2); border-radius: 999px; } .ext-viewer__zoom span { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; color: var(--ink-2); font-size: 11px; } .ext-viewer__main { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 220px; } .ext-viewer__canvas { background: var(--bg-1); overflow: hidden; position: relative; } .ext-viewer__canvas img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top center; } .ext-viewer__sidebar { background: var(--bg-0); border-left: 1px solid var(--hair); padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; font-family: var(--font-sans); } .ext-viewer__eyebrow { margin: 0 0 4px; padding-bottom: 8px; border-bottom: 1px solid var(--hair); font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-2); } .ext-viewer__section { display: flex; flex-direction: column; gap: 5px; padding-bottom: 9px; border-bottom: 1px solid var(--hair); } .ext-viewer__section:last-child { border-bottom: 0; padding-bottom: 0; } .ext-viewer__h { margin: 0; font-family: var(--font-mono); font-size: 8px; font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-3); } .ext-viewer__t { margin: 0; font-size: 10.5px; color: var(--ink); letter-spacing: var(--tracking-tight); } .ext-viewer__url { margin: 0; font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-2); } .ext-viewer__colors { display: grid; grid-template-columns: 2fr 2fr 1fr; grid-template-rows: 1.4fr 1fr; gap: 1px; border-radius: 6px; overflow: hidden; height: 70px; } .ext-viewer__cell { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 4px 5px; font-family: var(--font-mono); font-size: 6.5px; letter-spacing: var(--tracking-wide); text-transform: uppercase; line-height: 1; } .ext-viewer__cell em { font-style: normal; opacity: 0.55; font-weight: 600; } .ext-viewer__cell strong { font-weight: 600; font-size: 7px; } .ext-viewer__cell--xl { grid-column: 1 / 2; grid-row: 1 / 3; } .ext-viewer__cell--lg { grid-column: 2 / 3; grid-row: 1 / 2; } .ext-viewer__cell--sm em { display: none; } .ext-viewer__fonts { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; } .ext-viewer__fonts li { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .ext-viewer__font-name { font-size: 11px; color: var(--ink); letter-spacing: -0.01em; } .ext-viewer__font-meta { font-family: var(--font-mono); font-size: 7.5px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-3); } /* ---------- Export screenshot — Figma window ---------- Sized to the image's natural aspect ratio so nothing gets cropped. Container height comes from the img height; the bordered card just wraps it with the same aesthetic as the other story frames. */ .export-shot { position: relative; width: 100%; border: 1px solid var(--hair-strong); border-radius: var(--r-xl); overflow: hidden; background: var(--bg-1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 30px 80px -40px rgba(0, 0, 0, 0.6); } .export-shot img { width: 100%; height: auto; display: block; } /* ---------- Library mockup ---------- */ .ext-library__head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; background: var(--bg-0); border-bottom: 1px solid var(--hair); } .ext-library__brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); } .ext-library__brand-mark { width: 20px; height: 20px; border-radius: 999px; background: var(--ink); color: var(--bg-0); display: inline-flex; align-items: center; justify-content: center; } .ext-library__name { font-size: 12px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); } .ext-library__divider { width: 1px; height: 12px; background: var(--hair-strong); margin: 0 4px; } .ext-library__section { font-family: var(--font-mono); font-size: 9px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-2); } .ext-library__search { display: inline-flex; align-items: center; gap: 6px; width: 200px; height: 26px; padding: 0 10px; border: 1px solid var(--hair-strong); border-radius: 999px; background: var(--surface-2); color: var(--ink-3); font-size: 10px; } .ext-library__grid { margin: 0; padding: 14px 14px 16px; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; flex: 1; min-height: 0; overflow: hidden; align-content: start; } .ext-library__card { display: flex; flex-direction: column; background: var(--surface); border-radius: 12px; overflow: hidden; } .ext-library__thumb { display: block; aspect-ratio: 4 / 3; background: var(--bg-1); margin: 4px 4px 0; border-radius: 8px; overflow: hidden; } .ext-library__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .ext-library__thumb--empty { background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px); background-size: 8px 8px; } .ext-library__body { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 2px; } .ext-library__title { font-family: var(--font-sans); font-size: 11px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ext-library__title--muted { color: var(--ink-3); } .ext-library__host { font-family: var(--font-mono); font-size: 9px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ext-library__date { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-3); } .ext-library__card--ghost { opacity: 0.55; } @media (max-width: 720px) { .ext-viewer__topbar-right { gap: 4px; } .ext-viewer__btn { padding: 4px 6px; } .ext-viewer__main { grid-template-columns: 1fr 160px; } .ext-library__grid { grid-template-columns: repeat(2, 1fr); } }