/* ============================================================ POPPER — "PULSE" redesign Bold, high-energy dark theme tinted blue/indigo → dark-purple. Display: Bricolage Grotesque / Anton | Body: Space Grotesk ============================================================ */ :root { /* base — NEBULA: deep cosmic blue ↔ purple blend, richest & most dramatic */ --bg: oklch(9% 0.05 274); --bg-2: oklch(12% 0.06 276); --bg-3: oklch(15.5% 0.07 280); --panel: oklch(13.5% 0.062 278 / 0.8); --line: oklch(44% 0.09 278 / 0.5); --line-soft: oklch(52% 0.07 280 / 0.22); /* text — luminous cool white → cosmic grey */ --ink: oklch(97% 0.012 282); --ink-2: oklch(82% 0.035 282); --ink-3: oklch(62% 0.055 280); /* accents — vivid cosmic blue → violet → magenta */ --violet: oklch(52% 0.21 284); --violet-hi: oklch(66% 0.18 282); --magenta: oklch(56% 0.22 308); --magenta-hi:oklch(70% 0.17 310); --accent: var(--violet); --accent-2: var(--magenta); /* dual status shades */ --review: oklch(56% 0.21 294); /* needs your attention */ --review-hi: oklch(70% 0.17 294); --running: oklch(50% 0.22 264); /* in progress */ --running-hi:oklch(66% 0.18 262); /* cosmic blue → violet → magenta → luminous white gradient */ --grad: linear-gradient(105deg, oklch(44% 0.22 254) 0%, oklch(50% 0.23 282) 40%, oklch(58% 0.23 308) 72%, oklch(84% 0.10 304) 100%); --grad-soft: linear-gradient(105deg, oklch(48% 0.21 262 / .24), oklch(58% 0.21 304 / .24)); --sheen: linear-gradient(120deg, transparent 0%, oklch(90% 0.04 290 / .2) 46%, transparent 58%); --radius: 18px; --radius-lg:26px; --radius-sm:11px; --shadow: 0 30px 80px -40px oklch(3% 0.06 278 / 0.98); --glow: 0 0 0 1px oklch(54% 0.21 288 / .52), 0 18px 54px -18px oklch(54% 0.23 292 / .62); /* signature arc + aurora */ --arc: radial-gradient(closest-side, transparent 66%, oklch(93% 0.045 288 / .92) 69%, oklch(64% 0.20 268 / .55) 72%, oklch(54% 0.23 302 / .26) 76%, transparent 80%); --arc-blur: 6px; --aurora: radial-gradient(66% 44% at 50% -10%, oklch(56% 0.21 268 / .52), transparent 64%), radial-gradient(50% 44% at 84% 2%, oklch(52% 0.21 306 / .34), transparent 66%), radial-gradient(58% 54% at 50% 116%, oklch(44% 0.19 286 / .26), transparent 62%); --text-grad: linear-gradient(96deg, var(--ink) 0%, oklch(80% 0.10 290) 55%, oklch(72% 0.14 300) 100%); --maxw: 1240px; --ease: cubic-bezier(.16,.84,.32,1); --ease-out: cubic-bezier(.22,1,.36,1); /* category accent overrides (set via JS on [data-cat]) */ --cat-a: var(--violet); --cat-b: var(--magenta); } [data-cat="football"]{ --cat-a: oklch(52% 0.21 262); --cat-b: oklch(58% 0.21 296); } [data-cat="drama"] { --cat-a: oklch(54% 0.22 292); --cat-b: oklch(60% 0.22 314); } [data-cat="variety"] { --cat-a: oklch(54% 0.21 274); --cat-b: oklch(60% 0.21 302); } /* per-tool theme — Highlights / Auto Stitch / Vertical Rotator all live in the same blue→violet brand family, but each gets a distinctly different hue so the whole UI (buttons, gradients, glows, focus, extended features) shifts top-to-bottom when a tool is selected. These override the CORE tokens because they're set on . */ /* Auto Stitch — deep azure / cobalt blue end of the family */ [data-tool="stitch"]{ --violet: oklch(48% 0.20 252); --violet-hi: oklch(66% 0.17 254); --magenta: oklch(55% 0.20 270); --magenta-hi:oklch(70% 0.16 272); --grad: linear-gradient(105deg, oklch(42% 0.20 238) 0%, oklch(48% 0.21 256) 42%, oklch(55% 0.21 276) 74%, oklch(84% 0.09 268) 100%); --glow: 0 0 0 1px oklch(54% 0.20 258 / .52), 0 18px 54px -18px oklch(52% 0.22 262 / .62); --cat-a: oklch(48% 0.20 252); --cat-b: oklch(56% 0.20 278); } /* Vertical Rotator — vivid violet / magenta end of the family */ [data-tool="vertical"]{ --violet: oklch(52% 0.23 312); --violet-hi: oklch(68% 0.18 312); --magenta: oklch(58% 0.23 332); --magenta-hi:oklch(72% 0.17 334); --grad: linear-gradient(105deg, oklch(46% 0.22 298) 0%, oklch(52% 0.24 314) 44%, oklch(60% 0.23 332) 75%, oklch(86% 0.10 322) 100%); --glow: 0 0 0 1px oklch(56% 0.22 314 / .52), 0 18px 54px -18px oklch(56% 0.24 320 / .62); --cat-a: oklch(52% 0.23 312); --cat-b: oklch(60% 0.23 332); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} } body { margin: 0; font-family: "Space Grotesk", system-ui, sans-serif; background: var(--bg); color: var(--ink); line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* aurora wash behind everything — premium navy with a bright electric-blue glow up top */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: var(--aurora); opacity: 1; } body > * { position: relative; z-index: 1; } /* ============================================================ FLUID BACKGROUND — animated aurora blobs, drifting grid, pointer-follow spotlight. Injected by app.js as first body child. ============================================================ */ .fluidbg{ position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; contain: strict; } /* slow rotating conic shimmer (Finance/Agency-style sheen) */ .fluidbg__conic{ position: absolute; left: 50%; top: -28vh; width: 130vw; height: 130vw; transform: translateX(-50%); background: conic-gradient(from 0deg, transparent 0deg, oklch(58% 0.21 268 / .10) 60deg, transparent 130deg, oklch(58% 0.22 308 / .12) 220deg, transparent 300deg, oklch(70% 0.10 296 / .08) 350deg, transparent 360deg); -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 72%); mask-image: radial-gradient(closest-side, #000 30%, transparent 72%); opacity: .7; mix-blend-mode: screen; will-change: transform; animation: conicSpin 80s linear infinite; } .fluidbg__blob{ position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; mix-blend-mode: screen; will-change: transform; } .fluidbg__blob--a{ width: 52vw; height: 52vw; left: -8vw; top: -12vw; background: radial-gradient(circle at 30% 30%, var(--violet), transparent 68%); animation: blobA 26s var(--ease-out) infinite alternate; } .fluidbg__blob--b{ width: 46vw; height: 46vw; right: -10vw; top: -6vw; background: radial-gradient(circle at 60% 40%, var(--magenta), transparent 68%); animation: blobB 32s var(--ease-out) infinite alternate; } .fluidbg__blob--c{ width: 60vw; height: 60vw; left: 18vw; bottom: -34vw; background: radial-gradient(circle at 50% 50%, var(--running), transparent 70%); opacity: .42; animation: blobC 38s var(--ease-out) infinite alternate; } .fluidbg__blob--d{ width: 40vw; height: 40vw; right: 6vw; bottom: -18vw; background: radial-gradient(circle at 45% 55%, var(--review), transparent 68%); opacity: .38; animation: blobD 30s var(--ease-out) infinite alternate; } /* floating particle field (Agency-style) */ .fluidbg__dots{ position: absolute; inset: 0; } .fluidbg__dot{ position: absolute; bottom: -6%; border-radius: 50%; background: radial-gradient(circle, oklch(92% 0.05 290 / .9), oklch(64% 0.18 292 / .35) 70%, transparent 75%); opacity: var(--op, .3); will-change: transform; animation: floatUp var(--dur, 24s) var(--delay, 0s) linear infinite; } /* subtle grain overlay */ .fluidbg__grain{ position: absolute; inset: 0; opacity: .035; 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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 160px 160px; } /* faint drifting tech grid (Dimension.dev-style) */ .fluidbg__grid{ position: absolute; inset: -2px; opacity: .5; background-image: linear-gradient(to right, oklch(70% 0.06 282 / .06) 1px, transparent 1px), linear-gradient(to bottom, oklch(70% 0.06 282 / .06) 1px, transparent 1px); background-size: 54px 54px; -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 78%); mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 78%); animation: gridDrift 40s linear infinite; } /* pointer-follow spotlight glow */ .fluidbg__spot{ --mx: 50%; --my: 32%; position: absolute; inset: 0; background: radial-gradient(36vw 36vw at var(--mx) var(--my), oklch(72% 0.16 296 / .20), transparent 60%); transition: background-position .2s linear; } .fluidbg.is-still .fluidbg__blob, .fluidbg.is-still .fluidbg__conic, .fluidbg.is-still .fluidbg__grid{ animation: none; } .fluidbg.is-still .fluidbg__dots{ display: none; } .fluidbg.is-still .fluidbg__spot{ display: none; } @keyframes blobA{ 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(8vw,6vh,0) scale(1.12); } 100% { transform: translate3d(-4vw,10vh,0) scale(.96); } } @keyframes blobB{ 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-9vw,8vh,0) scale(1.1); } 100% { transform: translate3d(5vw,-4vh,0) scale(1.05); } } @keyframes blobC{ 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(6vw,-8vh,0) scale(.92); } 100% { transform: translate3d(-8vw,-4vh,0) scale(1.1); } } @keyframes blobD{ 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-6vw,-6vh,0) scale(1.08); } 100% { transform: translate3d(4vw,-10vh,0) scale(.94); } } @keyframes conicSpin{ 0% { transform: translateX(-50%) rotate(0deg); } 100% { transform: translateX(-50%) rotate(360deg); } } @keyframes floatUp{ 0% { transform: translate3d(0,0,0); opacity: 0; } 10% { opacity: var(--op, .3); } 90% { opacity: var(--op, .3); } 100% { transform: translate3d(var(--drift, 0px), -112vh, 0); opacity: 0; } } @keyframes gridDrift{ 0% { background-position: 0 0, 0 0; } 100% { background-position: 54px 54px, 54px 54px; } } @media (prefers-reduced-motion: reduce){ .fluidbg__blob, .fluidbg__conic, .fluidbg__grid{ animation: none !important; } .fluidbg__dots{ display: none; } .fluidbg__spot{ display: none; } } h1,h2,h3,h4 { font-family: "Bricolage Grotesque", sans-serif; line-height: 1.02; margin: 0; letter-spacing: -.02em; font-weight: 800; } .anton { font-family: "Anton", sans-serif; font-weight: 400; letter-spacing: .005em; text-transform: uppercase; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } .wrap { width: min(100% - 2.4rem, var(--maxw)); margin-inline: auto; } .eyebrow { font-size: .74rem; letter-spacing: .26em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); display: inline-flex; align-items: center; gap: .6rem; } .eyebrow::before { content:""; width: 26px; height: 2px; background: var(--grad); border-radius: 2px; } .text-grad { background: var(--grad); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradShift 9s var(--ease-out) infinite alternate; } @keyframes gradShift{ 0%{ background-position: 0% 50%; } 100%{ background-position: 100% 50%; } } @media (prefers-reduced-motion: reduce){ .text-grad{ animation: none; } } .mark { color: var(--magenta-hi); } /* ---------- buttons ---------- */ .btn { --b: var(--grad); display: inline-flex; align-items: center; justify-content: center; gap: .55rem; font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: .96rem; padding: .85rem 1.5rem; border-radius: 999px; border: 0; cursor: pointer; color: #fff; background: var(--b); position: relative; isolation: isolate; min-height: 48px; transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s; box-shadow: 0 14px 34px -16px oklch(62% 0.22 280 / .8); white-space: nowrap; } .btn::after{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1; background: linear-gradient(100deg, var(--magenta), var(--violet)); opacity:0; transition: opacity .3s; } .btn:hover { transform: translateY(-3px) scale(1.015); box-shadow: 0 22px 48px -16px oklch(70% 0.16 282 / .7); } .btn:hover::after{ opacity:1; } .btn:active { transform: translateY(-1px) scale(.99); } /* metallic sheen sweep on hover */ .btn > *{ position:relative; z-index:1; } .btn .sheen{ display:none; } .btn::before{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:0; background: var(--sheen); background-size: 220% 100%; background-position: 140% 0; opacity:0; transition: opacity .3s, background-position .7s var(--ease); } .btn:hover::before{ opacity:1; background-position: -40% 0; } .btn--ghost { background: transparent; color: var(--ink); box-shadow: none; border: 1px solid var(--line); } .btn--ghost::after{ background: var(--grad-soft); } .btn--ghost:hover{ border-color: transparent; box-shadow: none; } .btn--lg { padding: 1.05rem 2rem; font-size: 1.05rem; min-height: 56px; } .btn--sm { padding: .5rem 1rem; font-size: .85rem; min-height: 40px; } .btn--block{ width:100%; } /* big premium upload button (homepage hero) */ .btn--xl{ padding: 1.05rem 1.5rem; min-height: 76px; border-radius: 22px; font-size:1.05rem; } .btn--upload{ gap:1rem; } .btn--upload__ic{ width:46px;height:46px;border-radius:14px; display:grid; place-items:center; background: oklch(100% 0 0 / .16); flex-shrink:0; } .btn--upload__ic svg{ width:24px;height:24px; color:#fff; } .btn--upload__tx{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.15; text-align:left; } .btn--upload__tx b{ font-family:"Bricolage Grotesque"; font-weight:800; font-size:1.25rem; } .btn--upload__tx small{ font-weight:500; font-size:.82rem; opacity:.9; } .btn--upload__arr{ display:grid; place-items:center; transition: transform .3s var(--ease); } .btn--upload:hover .btn--upload__arr{ transform: translateX(4px); } .hero__sub-cta{ margin-top:1rem; } .hero__sub-cta a{ color:var(--ink-3); font-size:.92rem; transition: color .2s; } .hero__sub-cta a:hover{ color:var(--ink); } @media (max-width:560px){ .btn--upload__tx small{ display:none; } .btn--xl{ min-height:64px; } } /* ============================================================ NAV ============================================================ */ #site-header { position: relative; z-index: 100; } .nav { position: sticky; top: 0; z-index: 80; backdrop-filter: blur(14px); background: color-mix(in oklch, var(--bg) 78%, transparent); border-bottom: 1px solid var(--line-soft); } .nav__in { display: flex; align-items: center; gap: 1.5rem; height: 72px; } .logo { display: inline-flex; align-items: center; gap: .6rem; font-family: "Bricolage Grotesque"; font-weight: 800; font-size: 1.4rem; letter-spacing: -.03em; } .logo__dot{ width: 30px; height: 30px; border-radius: 9px; background: var(--grad); display:grid; place-items:center; box-shadow: var(--glow); } .logo__dot svg{ width:17px; height:17px; } /* Match the SPA's exactly: scope the logo inside the nav / drawer with the same reset + explicit --ink colour. The global .logo above still styles the footer wordmark (which lives outside .nav / .drawer). */ .nav .logo, .drawer__head .logo { display: inline-flex; align-items: center; gap: .6rem; width: auto; height: auto; border-radius: 0; background: transparent; box-shadow: none; font-family: "Bricolage Grotesque"; font-weight: 800; font-size: 1.4rem; letter-spacing: -.03em; color: var(--ink); } .nav .logo__dot, .drawer__head .logo__dot{ width: 30px; height: 30px; border-radius: 9px; background: var(--grad); display:grid; place-items:center; box-shadow: var(--glow); } .nav .logo__dot svg, .drawer__head .logo__dot svg{ width:17px; height:17px; } .nav__links { display: flex; align-items: center; gap: .35rem; margin-left: auto; } .nav__links a { padding: .55rem .85rem; border-radius: 10px; font-weight: 500; color: var(--ink-2); font-size: .95rem; transition: color .2s, background .2s; } .nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--ink); background: color-mix(in oklch, var(--ink) 9%, transparent); } .nav__cta { margin-left: .5rem; } .nav__burger { display: none; width: 48px; height: 48px; border-radius: 12px; border: 1px solid var(--line); background: transparent; cursor: pointer; margin-left: auto; align-items: center; justify-content: center; } .nav__burger span, .nav__burger span::before, .nav__burger span::after { content:""; display:block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: .3s var(--ease); } .nav__burger span::before{ position: absolute; transform: translateY(-7px); } .nav__burger span::after { position: absolute; transform: translateY(7px); } .nav__burger span{ position: relative; } body.nav-open .nav__burger span{ background: transparent; } body.nav-open .nav__burger span::before{ transform: rotate(45deg); } body.nav-open .nav__burger span::after{ transform: rotate(-45deg); } /* drawer */ .drawer { position: fixed; inset: 0; z-index: 90; visibility: hidden; pointer-events: none; } .drawer__scrim{ position:absolute; inset:0; background: oklch(10% 0.05 280 / .6); opacity:0; transition: opacity .35s; } .drawer__panel{ position: absolute; right: 0; top: 0; height: 100%; width: min(82vw, 340px); background: var(--bg-2); border-left: 1px solid var(--line); transform: translateX(100%); transition: transform .4s var(--ease-out); padding: 1.4rem 1.3rem; display: flex; flex-direction: column; gap: .3rem; overflow-y:auto; } body.nav-open .drawer{ visibility: visible; pointer-events: auto; } body.nav-open .drawer__scrim{ opacity: 1; } body.nav-open .drawer__panel{ transform: translateX(0); } .drawer a { padding: .95rem 1rem; border-radius: 12px; font-size: 1.1rem; font-weight: 600; min-height: 48px; display:flex; align-items:center; } .drawer a:hover{ background: oklch(30% 0.07 280 / .5); } .drawer__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom: .8rem; } .drawer__close{ width:44px;height:44px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:1.4rem;cursor:pointer; } .drawer__sub{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); padding: .8rem 1rem .3rem; } /* ============================================================ OVERVIEW TRACKER ============================================================ */ .tracker { display: block; margin-block: 1.2rem; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(120deg, color-mix(in oklch, var(--bg-2) 90%, transparent), color-mix(in oklch, var(--bg-3) 85%, transparent)); position: relative; overflow: hidden; box-shadow: var(--shadow); transition: transform .3s var(--ease), border-color .3s; } .tracker:hover{ transform: translateY(-2px); border-color: oklch(62% 0.22 280 / .55); } .tracker::before{ content:""; position:absolute; left:0; top:0; bottom:0; width: 5px; background: var(--grad); } .tracker__row { display: grid; grid-template-columns: repeat(5, 1fr); } .tstat { padding: 1rem 1.25rem; border-right: 1px solid var(--line-soft); position: relative; } .tstat:last-child{ border-right: 0; } .tstat__label { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); display:flex; align-items:center; gap:.4rem; } .tstat__val { font-family: "Bricolage Grotesque"; font-weight: 800; font-size: clamp(1.3rem, 2.4vw, 1.9rem); margin-top: .25rem; letter-spacing: -.02em; } .tstat--hot { background: color-mix(in oklch, var(--review) 12%, transparent); } .tstat--hot .tstat__val { color: var(--review-hi); } .tstat--hot .tstat__label{ color: var(--review-hi); } .tstat--hot .tstat__label::before{ content:""; width:7px;height:7px;border-radius:50%;background:var(--review);box-shadow:0 0 0 0 oklch(66% 0.22 282 / .6); animation: ping 2s infinite; } .tstat--warn { background: color-mix(in oklch, var(--running) 12%, transparent); } .tstat--warn .tstat__val{ color: var(--running-hi); } .tstat--warn .tstat__label{ color: var(--running-hi); } .tstat--warn .tstat__label::before{ content:""; width:7px;height:7px;border-radius:50%;background:var(--running);box-shadow:0 0 0 0 oklch(68% 0.2 282 / .6); animation: ping 2s .5s infinite; } @keyframes ping{ 0%{box-shadow:0 0 0 0 oklch(66% 0.22 282 / .55);} 70%{box-shadow:0 0 0 9px transparent;} 100%{box-shadow:0 0 0 0 transparent;} } .tracker__cta{ position:absolute; right:1.1rem; top:50%; transform:translateY(-50%); font-size:.8rem; color:var(--ink-3); display:flex;align-items:center;gap:.3rem; opacity:0; transition:opacity .3s, transform .3s; } .tracker:hover .tracker__cta{ opacity:1; transform:translateY(-50%) translateX(-2px); } @media (max-width: 860px){ .tracker__row{ grid-template-columns: repeat(5, minmax(140px,1fr)); overflow-x:auto; scroll-snap-type:x mandatory; } .tstat{ scroll-snap-align:start; } .tracker__cta{ display:none; } } @media (max-width: 560px){ .tracker__row{ grid-template-columns: repeat(2, 1fr); overflow-x:visible; scroll-snap-type:none; } .tstat{ border-right:1px solid var(--line-soft); border-top:1px solid var(--line-soft); } .tstat:nth-child(2n){ border-right:0; } .tstat:nth-child(-n+2){ border-top:0; } .tstat:last-child{ grid-column:1 / -1; } .tstat__val{ font-size:1.45rem; } } /* ============================================================ HERO (index) ============================================================ */ .hero { position: relative; overflow: hidden; padding-top: clamp(0.6rem, 1.6vw, 1.3rem); padding-bottom: clamp(0.6rem,1.6vw,1.3rem); } /* signature halo — fully stretched semicircle horizon, like sunlight cresting an earth curve */ .hero::before{ content:""; position:absolute; left:50%; top:38%; transform:translateX(-50%); width:min(220%, 2400px); aspect-ratio: 2.6 / 1; border-radius:50%; background: var(--arc); filter: blur(var(--arc-blur)); pointer-events:none; z-index:0; } .hero > *{ position:relative; z-index:1; } .hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem,4vw,4rem); align-items: center; } /* centered single-column hero (live preview now lives in the showcase below) */ .hero__grid--center{ grid-template-columns: 1fr; justify-items: center; text-align: center; } .hero__grid--center .hero__col{ display:flex; flex-direction:column; align-items:center; max-width: min(1180px, 100%); } .hero__grid--center .hero__lead{ max-width: 58ch; } .hero__grid--center .hero__cta{ justify-content:center; } .hero__grid--center .hero__trust{ justify-content:center; } .hero h1 { font-size: clamp(2.8rem, 7.5vw, 6rem); line-height: .94; } /* web view: two short tagline lines, tightly stacked */ .hero__grid--center h1{ font-size: clamp(2.2rem, 4.4vw, 4rem); line-height: .9; letter-spacing: -.01em; max-width: none; white-space: nowrap; } .hero__br{ display:none; } .hero__break{ display:block; height:0; line-height:0; } .hero h1 .anton{ display:block; } .hero__grid--center h1 .anton{ display:inline; } .hero__lead { color: var(--ink-2); font-size: clamp(1.05rem,1.6vw,1.3rem); max-width: 36ch; margin: .45rem 0 .9rem; } .hero__grid--center .hero__lead{ font-size: clamp(1.02rem,1.4vw,1.18rem); } .hero__cta { display: flex; gap: .8rem; flex-wrap: wrap; } .hero__grid--center .btn--xl{ min-height:78px; padding:1rem 1.9rem; } .hero__grid--center .btn--upload__tx b{ font-size:1.3rem; } .hero__trust{ margin-top: 2.2rem; display:flex; gap:1.6rem; flex-wrap:wrap; color:var(--ink-3); font-size:.85rem; } .hero__trust b{ color: var(--ink); font-family:"Bricolage Grotesque"; } /* hero visual — kinetic preview card */ .previewcard{ border-radius: var(--radius-lg); border: 1px solid var(--line); background: linear-gradient(160deg, var(--bg-3), var(--bg-2)); padding: 1rem; box-shadow: var(--shadow); position: relative; overflow:hidden; } .previewcard::before{ content:""; position:absolute; inset:-2px; border-radius:inherit; padding:1px; background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity:.5; pointer-events:none; } .previewcard__top{ display:flex; justify-content:space-between; align-items:center; padding:.4rem .5rem .9rem; } .previewcard__chips{ display:flex; gap:.4rem; } .chip{ font-size:.7rem; padding:.3rem .6rem; border-radius:999px; border:1px solid var(--line); color:var(--ink-2); } .chip--on{ background: var(--grad); border-color:transparent; color:#fff; } .previewcard__screen{ aspect-ratio: 16/9; border-radius: 14px; position: relative; overflow:hidden; background: radial-gradient(circle at 70% 30%, oklch(40% 0.13 282 / .5), transparent 50%), radial-gradient(circle at 20% 80%, oklch(40% 0.13 262 / .5), transparent 50%), oklch(13% 0.04 280); display:grid; place-items:center; } .playbtn{ width:64px;height:64px;border-radius:50%; background:var(--grad); display:grid;place-items:center; box-shadow: var(--glow); } .playbtn svg{ width:24px;height:24px;color:#fff;margin-left:3px; } .waveform{ position:absolute; left:0; right:0; bottom:0; height:46px; display:flex; align-items:flex-end; gap:3px; padding:0 14px 10px; } .waveform i{ flex:1; background: var(--grad); border-radius:3px 3px 0 0; opacity:.85; animation: wav 1.3s ease-in-out infinite; } @keyframes wav{ 0%,100%{height:18%;} 50%{height:90%;} } .previewcard__strip{ display:grid; grid-template-columns: repeat(3,1fr); gap:.55rem; margin-top:.7rem; } .miniclip{ aspect-ratio:16/10; border-radius:9px; border:1px solid var(--line); position:relative; overflow:hidden; background: linear-gradient(135deg, oklch(26% 0.08 280), oklch(24% 0.07 282)); } .miniclip span{ position:absolute; left:6px; bottom:5px; font-size:.62rem; background:oklch(12% .05 280 / .7); padding:.1rem .35rem; border-radius:5px; } .float-badge{ position:absolute; padding:.55rem .8rem; border-radius:12px; background:var(--bg-2); border:1px solid var(--line); box-shadow:var(--shadow); font-size:.78rem; display:flex; align-items:center; gap:.5rem; font-weight:600; } .float-badge b{ font-family:"Bricolage Grotesque"; } .float-badge--a{ top:-14px; right:18px; animation: floaty 5s ease-in-out infinite; } .float-badge--b{ bottom:-16px; left:-12px; animation: floaty 6s ease-in-out infinite reverse; } @keyframes floaty{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-9px);} } .float-badge .dotg{ width:8px;height:8px;border-radius:50%;background:var(--grad); } /* marquee */ .marquee{ border-block: 1px solid var(--line-soft); overflow:hidden; padding: .9rem 0; margin-top: clamp(2rem,4vw,3rem); background: oklch(18% 0.04 280 / .5); } .marquee__track{ display:flex; gap:3rem; width:max-content; animation: scrollx 28s linear infinite; } .marquee__track span{ font-family:"Anton"; text-transform:uppercase; font-size:1.5rem; color:var(--ink-3); display:flex; align-items:center; gap:3rem; letter-spacing:.02em; } .marquee__track span::after{ content:"✦"; color:var(--magenta); font-size:1rem; } @keyframes scrollx{ to{ transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce){ .marquee__track{ animation:none; } .waveform i{animation:none;height:50%;} .float-badge{animation:none;} } /* ============================================================ SECTIONS ============================================================ */ section { padding-block: clamp(3.5rem, 7vw, 6.5rem); } .sec-head{ max-width: 60ch; margin-bottom: clamp(2rem,4vw,3.2rem); } .sec-head h2{ font-size: clamp(2rem, 4.5vw, 3.6rem); margin-top: .8rem; } .sec-head p{ color: var(--ink-2); font-size: 1.1rem; margin-top: 1rem; } .sec-head--center{ margin-inline:auto; text-align:center; } .sec-head--center .eyebrow{ justify-content:center; } /* features — asymmetric bento */ .bento{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .feat{ border:1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; background: linear-gradient(160deg, oklch(21% 0.05 280 / .7), oklch(19% 0.045 280 / .55)); position: relative; overflow:hidden; transition: transform .35s var(--ease), border-color .35s; } .feat:hover{ transform: translateY(-5px); border-color: oklch(62% 0.22 280 / .55); } .feat:hover .feat__num{ color: var(--magenta-hi); } .feat--wide{ grid-column: span 2; } .feat--tall{ grid-row: span 2; } .feat__num{ font-family:"Anton"; font-size: 2.4rem; color: oklch(45% 0.1 280); transition: color .3s; line-height:1; } .feat h3{ font-size: 1.35rem; margin: .8rem 0 .5rem; } .feat p{ color: var(--ink-2); font-size: .98rem; } .feat__big{ margin-top: 1.4rem; } .feat__big .anton{ font-size: clamp(2.4rem,6vw,4rem); background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; } .tag-row{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1rem; } .tag{ font-size:.78rem; padding:.35rem .7rem; border-radius:999px; background: oklch(30% 0.07 280 / .55); color:var(--ink-2); border:1px solid var(--line-soft); } /* process */ .steps{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; counter-reset: s; } .step{ position:relative; padding: 1.8rem 1.5rem; border-radius: var(--radius); border:1px solid var(--line); background: var(--bg-2); } .step__n{ font-family:"Anton"; font-size:1rem; width:42px;height:42px; border-radius:12px; display:grid;place-items:center; background:var(--grad); color:#fff; } .step h3{ font-size:1.25rem; margin:1rem 0 .5rem; } .step p{ color:var(--ink-2); font-size:.96rem; } .step__line{ position:absolute; top: 2.6rem; right:-1.4rem; width:1.4rem; height:2px; background:var(--grad); } /* platforms */ .platforms{ display:flex; gap:.8rem; flex-wrap:wrap; } .plat{ display:flex; align-items:center; gap:.6rem; padding:.8rem 1.2rem; border-radius:999px; border:1px solid var(--line); background:var(--bg-2); font-weight:600; transition: .3s var(--ease); } .plat:hover{ transform: translateY(-3px); border-color: var(--magenta); } .plat svg{ width:20px;height:20px; } /* pricing */ .prices{ display:grid; grid-template-columns: repeat(3,1fr); gap:1.2rem; align-items:start; } .prices--4{ grid-template-columns: repeat(4,1fr); } @media (max-width:1080px){ .prices--4{ grid-template-columns: repeat(2,1fr); } } .price{ border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.8rem; background:var(--bg-2); position:relative; transition:transform .35s var(--ease), border-color .35s; } .price:hover{ transform: translateY(-5px); } .price--feat{ background: linear-gradient(165deg, oklch(26% 0.09 280), oklch(22% 0.08 282)); border-color: transparent; box-shadow: var(--glow); } .price--feat::before{ content:"Most popular"; position:absolute; top:-12px; left:1.8rem; background:var(--grad); color:#fff; font-size:.72rem; font-weight:700; padding:.3rem .8rem; border-radius:999px; letter-spacing:.05em; } .price h3{ font-size:1.2rem; } .price__amt{ font-family:"Bricolage Grotesque"; font-weight:800; font-size:3rem; margin:.6rem 0 0; letter-spacing:-.03em; } .price__amt small{ font-size:1rem; font-weight:500; color:var(--ink-3); } .price ul{ list-style:none; padding:0; margin:1.4rem 0; display:grid; gap:.7rem; } .price li{ display:flex; gap:.6rem; color:var(--ink-2); font-size:.95rem; } .price li svg{ width:18px;height:18px;color:var(--magenta-hi); flex-shrink:0; margin-top:2px; } /* CTA band */ .ctaband{ border-radius: var(--radius-lg); padding: clamp(2.5rem,5vw,4.5rem); text-align:center; position:relative; overflow:hidden; background: linear-gradient(120deg, oklch(30% 0.12 280), oklch(28% 0.13 282)); border:1px solid var(--line); } .ctaband::before{ content:""; position:absolute; inset:0; background: radial-gradient(600px 300px at 50% -20%, oklch(64% .19 282 / .28), transparent 60%); } .ctaband h2{ font-size: clamp(2.2rem,5vw,4rem); position:relative; } .ctaband p{ color:var(--ink-2); max-width:48ch; margin:1rem auto 2rem; position:relative; } /* footer */ .footer{ border-top:1px solid var(--line-soft); padding-block: 3rem 2rem; margin-top: 2rem; } .footer__grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:2rem; } .footer h4{ font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); margin-bottom:1rem; font-family:"Space Grotesk"; font-weight:600; } .footer a{ display:block; color:var(--ink-2); padding:.3rem 0; font-size:.95rem; } .footer a:hover{ color:var(--ink); } .footer__bot{ display:flex; justify-content:space-between; align-items:center; margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--line-soft); color:var(--ink-3); font-size:.85rem; flex-wrap:wrap; gap:1rem; } /* ============================================================ GENERATOR ============================================================ */ .gen-head{ padding-top: clamp(2rem,4vw,3rem); } .gen-head h1{ font-size: clamp(2.2rem,5vw,3.6rem); } .gen-head p{ color:var(--ink-2); max-width:54ch; margin-top:.8rem; font-size:1.05rem; } /* TOOL SWITCHER — Highlights / Auto Stitch / Vertical Rotator */ .tooltabs{ display:grid; grid-template-columns: repeat(3, 1fr); gap:.6rem; margin: 1.6rem 0 .4rem; padding:.5rem; border:1px solid var(--line); border-radius:18px; background: var(--panel); backdrop-filter: blur(14px); } .tooltab{ display:flex; align-items:center; gap:.7rem; text-align:left; cursor:pointer; padding:.85rem 1rem; border-radius:13px; border:1px solid transparent; background:transparent; color:var(--ink-2); transition:.25s var(--ease); } .tooltab:hover{ background: var(--bg-2); color:var(--ink); } .tooltab__ic{ width:38px; height:38px; flex-shrink:0; border-radius:11px; display:grid; place-items:center; background: var(--bg-3); border:1px solid var(--line-soft); color:var(--ink-2); transition:.25s var(--ease); } .tooltab__ic svg{ width:20px; height:20px; } .tooltab__tx{ display:flex; flex-direction:column; line-height:1.15; min-width:0; } .tooltab__tx b{ font-family:"Bricolage Grotesque"; font-weight:800; font-size:1rem; } .tooltab__tx small{ font-family:"Space Grotesk"; font-weight:500; font-size:.74rem; color:var(--ink-3); letter-spacing:.02em; } .tooltab[aria-selected="true"]{ border-color: color-mix(in oklch, var(--cat-a) 60%, transparent); background: linear-gradient(120deg, color-mix(in oklch, var(--cat-a) 18%, transparent), color-mix(in oklch, var(--cat-b) 12%, transparent)); color:var(--ink); box-shadow: var(--glow); } .tooltab[aria-selected="true"] .tooltab__ic{ background: linear-gradient(120deg, var(--cat-a), var(--cat-b)); color:#fff; border-color:transparent; } .tooltab[aria-selected="true"] .tooltab__tx small{ color: color-mix(in oklch, var(--ink-2) 90%, var(--cat-a)); } @media (max-width:760px){ .tooltabs{ grid-template-columns:1fr; } } .catbar{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin: 1.4rem 0; } .catdrop{ position:relative; } .catdrop__btn{ display:flex; align-items:center; gap:.8rem; min-height:56px; padding:.7rem 1.1rem; border-radius:16px; border:1px solid var(--line); background:var(--bg-2); cursor:pointer; color:var(--ink); font-family:"Bricolage Grotesque"; font-weight:800; font-size:1.15rem; transition:.25s var(--ease); min-width:280px; } .catdrop__btn:hover{ border-color: var(--cat-a); } .catdrop__btn .swatch{ width:30px;height:30px;border-radius:9px; background: linear-gradient(120deg,var(--cat-a),var(--cat-b)); flex-shrink:0; } .catdrop__btn .meta{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.1; } .catdrop__btn .meta small{ font-family:"Space Grotesk"; font-weight:500; font-size:.72rem; color:var(--ink-3); letter-spacing:.04em; } .catdrop__btn .caret{ margin-left:auto; transition: transform .3s; } .catdrop.open .catdrop__btn .caret{ transform: rotate(180deg); } .catdrop__menu{ position:absolute; top: calc(100% + .5rem); left:0; right:0; z-index:30; background:var(--bg-2); border:1px solid var(--line); border-radius:16px; padding:.5rem; box-shadow:var(--shadow); opacity:0; visibility:hidden; transform: translateY(-8px); transition:.28s var(--ease); } .catdrop.open .catdrop__menu{ opacity:1; visibility:visible; transform:none; } .catopt{ display:flex; align-items:center; gap:.8rem; width:100%; text-align:left; padding:.8rem; border-radius:11px; border:0; background:transparent; cursor:pointer; color:var(--ink); min-height:52px; } .catopt:hover, .catopt[aria-selected="true"]{ background: oklch(30% 0.07 280 / .55); } .catopt .swatch{ width:30px;height:30px;border-radius:9px; flex-shrink:0; } .catopt strong{ font-family:"Bricolage Grotesque"; font-size:1rem; display:block; } .catopt small{ color:var(--ink-3); font-size:.8rem; } .s-drama{ background: linear-gradient(120deg, oklch(52% 0.21 292), oklch(58% 0.22 312)); } .s-variety{ background: linear-gradient(120deg, oklch(54% 0.21 274), oklch(50% 0.22 262)); } .s-football{ background: linear-gradient(120deg, oklch(50% 0.21 262), oklch(56% 0.21 284)); } /* category icon glyph inside the swatch chips */ .catopt .swatch, .catdrop__btn .swatch{ display:inline-flex; align-items:center; justify-content:center; font-size:16px; line-height:1; } .catbar__links{ margin-left:auto; display:flex; gap:.4rem; } .catbar__links a{ padding:.5rem .8rem; border-radius:10px; font-size:.88rem; color:var(--ink-2); border:1px solid var(--line-soft); } .catbar__links a:hover{ color:var(--ink); border-color:var(--cat-a); } /* generator layout */ .gen-layout{ display:grid; grid-template-columns: 1.5fr .85fr; gap:1.4rem; align-items:start; margin-bottom: 4rem; } /* minimal single-column generator flow */ .gen-narrow{ max-width: 760px; margin-inline:auto; } .gen-flow{ display:flex; flex-direction:column; gap:1.2rem; margin-bottom: 4rem; } .gen-flow[hidden]{ display:none; } [data-tool-only][hidden]{ display:none; } /* highlight-style mode selector (required choice, Relaxed default) */ .gen-mode{ border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-2); padding:1.3rem; } .gen-mode__head{ display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap; margin-bottom:1rem; } .gen-mode__head h4{ font-size:1.1rem; } .gen-mode__head span{ color:var(--ink-3); font-size:.86rem; } .gen-mode__seg{ display:grid; grid-template-columns: repeat(3,1fr); gap:.6rem; } .gen-mode__opt{ display:flex; flex-direction:column; gap:.25rem; text-align:left; cursor:pointer; padding:.9rem 1rem; border-radius:13px; border:1px solid var(--line); background:var(--bg); color:var(--ink); font-family:inherit; transition: border-color .25s, background .25s, transform .25s var(--ease); } .gen-mode__opt:hover{ border-color: var(--cat-a); transform: translateY(-2px); } .gen-mode__opt b{ font-family:"Bricolage Grotesque"; font-weight:800; font-size:1rem; } .gen-mode__opt small{ color:var(--ink-3); font-size:.78rem; } .gen-mode__opt[aria-pressed="true"]{ border-color: var(--cat-a); background: color-mix(in oklch, var(--cat-a) 14%, var(--bg)); box-shadow: 0 0 0 1px var(--cat-a) inset; } .gen-mode__opt[aria-pressed="true"] small{ color:var(--ink-2); } .gen-mode__custom{ margin-top:1rem; } .gen-mode__custom label{ display:block; font-size:.85rem; font-weight:600; color:var(--ink-2); margin-bottom:.5rem; } .gen-mode__custom textarea{ width:100%; padding:.85rem 1rem; border-radius:12px; border:1px solid var(--line); background:var(--bg); color:var(--ink); font-family:inherit; resize:vertical; min-height:90px; line-height:1.5; } .gen-mode__custom textarea:focus{ outline:2px solid var(--cat-a); outline-offset:1px; } .adv__meta{ font-family:"Space Grotesk"; font-weight:500; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-left:.4rem; } .dropzone{ border:2px dashed var(--line); border-radius: var(--radius-lg); padding: clamp(2rem,5vw,4rem); text-align:center; background: linear-gradient(165deg, oklch(20% 0.05 280 / .6), oklch(18% 0.045 280 / .4)); transition:.3s var(--ease); position:relative; } .dropzone.drag, .dropzone:hover{ border-color: var(--cat-a); background: linear-gradient(165deg, oklch(24% 0.07 280 / .7), oklch(22% 0.06 282 / .5)); } .dropzone__icon{ width:72px;height:72px;border-radius:20px; margin:0 auto 1.2rem; display:grid;place-items:center; background: linear-gradient(120deg,var(--cat-a),var(--cat-b)); box-shadow:var(--glow); } .dropzone__icon svg{ width:32px;height:32px;color:#fff; } .dropzone h3{ font-size: clamp(1.3rem,2.5vw,1.8rem); } .dropzone p{ color:var(--ink-2); margin:.6rem 0 1.4rem; } .dropzone__or{ color:var(--ink-3); font-size:.85rem; margin:1rem 0; } .dropzone__url{ display:flex; gap:.5rem; max-width:480px; margin:0 auto; } .dropzone__url input{ flex:1; min-height:48px; border-radius:12px; border:1px solid var(--line); background:var(--bg); color:var(--ink); padding:0 1rem; font-family:inherit; } .dropzone__url input:focus{ outline:2px solid var(--cat-a); outline-offset:1px; } .gen-side{ display:grid; gap:1.2rem; position:sticky; top:88px; } .panel{ border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-2); padding:1.4rem; } .panel h4{ font-size:1.05rem; display:flex; align-items:center; gap:.5rem; } .panel__hint{ color:var(--ink-3); font-size:.85rem; margin:.4rem 0 1rem; } .filemeta{ display:flex; align-items:center; gap:.8rem; padding:.8rem; border-radius:12px; background: oklch(28% .07 280 / .4); border:1px solid var(--line-soft); margin-bottom:1rem; } .filemeta__thumb{ width:48px;height:36px;border-radius:7px; background: linear-gradient(120deg,var(--cat-a),var(--cat-b)); background-size:cover; background-position:center; background-repeat:no-repeat; flex-shrink:0; } .filemeta__thumb[data-poster-ready]{ width:96px; height:60px; } .filemeta b{ font-size:.92rem; display:block; } .filemeta small{ color:var(--ink-3); font-size:.8rem; } /* advanced settings disclosure */ .adv{ border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-2); overflow:hidden; } .adv__btn{ width:100%; display:flex; align-items:center; gap:.7rem; padding:1.1rem 1.3rem; background:transparent; border:0; color:var(--ink); cursor:pointer; font-family:"Bricolage Grotesque"; font-weight:800; font-size:1.05rem; min-height:56px; } .adv__btn .caret{ margin-left:auto; transition:transform .3s; } .adv.open .adv__btn .caret{ transform: rotate(180deg); } .adv__body{ display:grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease-out); } .adv.open .adv__body{ grid-template-rows: 1fr; } .adv__inner{ overflow:hidden; } .adv__pad{ padding: 0 1.3rem 1.4rem; display:grid; gap:1.3rem; } .field label{ font-size:.85rem; font-weight:600; color:var(--ink-2); display:block; margin-bottom:.5rem; } .segmented{ display:flex; gap:.4rem; flex-wrap:wrap; } .segmented button{ flex:1; min-width:60px; min-height:44px; padding:.5rem .8rem; border-radius:11px; border:1px solid var(--line); background:transparent; color:var(--ink-2); cursor:pointer; font-family:inherit; font-weight:600; transition:.2s; } .segmented button[aria-pressed="true"]{ background: linear-gradient(120deg,var(--cat-a),var(--cat-b)); border-color:transparent; color:#fff; } .range-row{ display:flex; align-items:center; gap:1rem; } input[type=range]{ flex:1; accent-color: var(--cat-a); height:6px; } .range-val{ font-family:"Bricolage Grotesque"; font-weight:800; min-width:54px; text-align:right; } .toggle{ display:flex; align-items:center; justify-content:space-between; gap:1rem; } .switch{ position:relative; width:52px; height:30px; flex-shrink:0; } .switch input{ opacity:0; width:0;height:0; } .switch span{ position:absolute; inset:0; border-radius:999px; background: oklch(35% .05 280); cursor:pointer; transition:.3s; } .switch span::before{ content:""; position:absolute; left:3px; top:3px; width:24px;height:24px; border-radius:50%; background:#fff; transition:.3s var(--ease); } .switch input:checked + span{ background: linear-gradient(120deg,var(--cat-a),var(--cat-b)); } .switch input:checked + span::before{ transform: translateX(22px); } .selectish{ width:100%; min-height:48px; border-radius:12px; border:1px solid var(--line); background:var(--bg); color:var(--ink); padding:0 1rem; font-family:inherit; } /* ============================================================ REFERENCE UPLOADER — image + audio side by side, one seamless box ============================================================ */ .refbox{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; border:1px dashed var(--line); border-radius:16px; overflow:hidden; background: linear-gradient(165deg, var(--bg-2), color-mix(in oklch, var(--bg-2) 70%, transparent)); transition:.25s var(--ease); } .refbox:hover{ border-color: var(--cat-a); } .refhalf{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:.5rem; padding:1.4rem 1.2rem; cursor:pointer; position:relative; background:transparent; border:0; color:inherit; font-family:inherit; transition:.2s var(--ease); } .refhalf:hover{ background: color-mix(in oklch, var(--cat-a) 8%, transparent); } .refhalf[aria-pressed="true"]{ background: color-mix(in oklch, var(--cat-a) 14%, transparent); } .refhalf[aria-pressed="true"] .refhalf__ic{ background: linear-gradient(120deg,var(--cat-a),var(--cat-b)); color:#fff; border-color:transparent; } .refhalf + .refhalf{ border-left:1px dashed var(--line); } .refhalf__ic{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; background: var(--bg-3); border:1px solid var(--line-soft); color:var(--cat-a); } .refhalf__ic svg{ width:24px; height:24px; } .refhalf b{ font-family:"Bricolage Grotesque"; font-weight:800; font-size:.98rem; color:var(--ink); } .refhalf small{ font-family:"Space Grotesk"; font-size:.76rem; color:var(--ink-3); line-height:1.35; } .refhalf .reftag{ font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--cat-a); font-weight:600; } @media (max-width:560px){ .refbox{ grid-template-columns:1fr; } .refhalf + .refhalf{ border-left:0; border-top:1px dashed var(--line); } } /* CHIP SELECTORS — genres / intents */ .chips{ display:flex; flex-wrap:wrap; gap:.5rem; } .chip{ display:inline-flex; align-items:center; gap:.4rem; cursor:pointer; font-family:inherit; font-weight:600; font-size:.88rem; padding:.5rem .9rem; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--ink-2); transition:.2s var(--ease); } .chip:hover{ border-color: var(--cat-a); color:var(--ink); } .chip[aria-pressed="true"]{ background: linear-gradient(120deg,var(--cat-a),var(--cat-b)); border-color:transparent; color:#fff; } .chip .star{ font-size:.8em; } /* requirement badge — Optional (neutral) / Required (accent) / Necessary error tone */ .reqbadge{ display:inline-flex; align-items:center; vertical-align:middle; margin-left:.55rem; font-family:"Space Grotesk"; font-weight:700; font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; padding:.28em .6em; border-radius:999px; border:1px solid var(--line-soft); color:var(--ink-3); background:var(--bg-2); } .reqbadge.is-required{ color:#fff; border-color:transparent; background:linear-gradient(120deg,var(--cat-a),var(--cat-b)); } /* ============================================================ FIXED 9:16 CROP EDITOR — live preview + zoom + text overlay + colour ============================================================ */ .cropper{ display:grid; grid-template-columns: 300px 1fr; gap:1.6rem; margin-top:1.4rem; align-items:start; } @media (max-width:760px){ .cropper{ grid-template-columns:1fr; } } /* --- preview stage (9:16) --- */ .cropstage{ justify-self:center; width:300px; max-width:100%; } .cropframe{ position:relative; width:100%; aspect-ratio:9/16; border-radius:16px; overflow:hidden; border:1px solid var(--line); background:#000; box-shadow:var(--glow); } .cropframe__img{ position:absolute; inset:0; background-size:cover; background-position:center; background-image: linear-gradient(125deg, oklch(38% 0.13 var(--cat-h, 300) / .9), oklch(20% 0.08 var(--cat-h, 300) / .9)), repeating-linear-gradient(90deg, oklch(100% 0 0 / .05) 0 2px, transparent 2px 60px); transform: scale(var(--crop-zoom, 1)); transform-origin:center; transition:transform .12s linear; } .cropframe__safe{ position:absolute; inset:7% 6%; border:1px dashed oklch(100% 0 0 / .28); border-radius:8px; pointer-events:none; } .cropframe__logo{ position:absolute; height:auto; object-fit:contain; pointer-events:none; z-index:4; filter:drop-shadow(0 2px 6px rgba(0,0,0,.45)); } .cropcap{ position:absolute; left:0; right:0; padding:0 8%; text-align:center; pointer-events:none; font-family:"Bricolage Grotesque"; font-weight:800; line-height:1.1; word-break:break-word; text-shadow:0 2px 14px oklch(0% 0 0 / .55); } .cropcap--top{ top:6%; } .cropcap--bottom{ bottom:6%; } .cropcap[data-align="left"]{ text-align:left; } .cropcap[data-align="right"]{ text-align:right; } .cropstage__meta{ margin-top:.7rem; text-align:center; font-family:"Space Grotesk"; font-size:.78rem; color:var(--ink-3); } /* --- controls column --- */ .cropctl{ display:grid; gap:1.25rem; } .cropctl__grp{ border:1px solid var(--line-soft); border-radius:14px; padding:1rem 1.1rem; background:var(--bg-2); } .cropctl__grp > h5{ margin:0 0 .8rem; font-family:"Bricolage Grotesque"; font-weight:800; font-size:.95rem; color:var(--ink); display:flex; align-items:center; gap:.5rem; } .cropctl__grp > h5 .tnum{ margin-left:auto; font-family:"Space Grotesk"; font-weight:600; font-size:.8rem; color:var(--cat-a); } /* zoom + size sliders reuse range styles; show % value */ .cropctl .range-row{ display:flex; align-items:center; gap:.9rem; } .cropctl .range-row input[type="range"]{ flex:1; } .cropctl .range-val{ min-width:48px; text-align:right; font-family:"Space Grotesk"; font-weight:600; color:var(--ink-2); } /* collapsible customisation box (text overlay) — minimalist */ .cropfold{ border:1px solid var(--line-soft); border-radius:14px; background:var(--bg-2); overflow:hidden; } .cropfold > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:.6rem; padding:.95rem 1.1rem; user-select:none; } .cropfold > summary::-webkit-details-marker{ display:none; } .cropfold__title{ font-family:"Bricolage Grotesque"; font-weight:800; font-size:.95rem; color:var(--ink); } .cropfold__hint{ font-family:"Space Grotesk"; font-size:.76rem; color:var(--ink-3); margin-left:.1rem; } .cropfold__chev{ width:18px; height:18px; color:var(--ink-3); margin-left:auto; transition:transform .2s var(--ease); } .cropfold[open] .cropfold__chev{ transform:rotate(180deg); } .cropfold__body{ padding:0 1.1rem 1.1rem; } /* per-caption text rows */ .caprow{ display:grid; gap:.7rem; } .caprow + .caprow{ margin-top:1rem; padding-top:1rem; border-top:1px dashed var(--line-soft); } .caprow__head{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; } .caprow__head label{ font-family:"Space Grotesk"; font-weight:600; font-size:.82rem; color:var(--ink-2); } .caprow__tools{ display:inline-flex; align-items:center; gap:.5rem; } .caprow input[type="text"]{ width:100%; min-height:44px; border-radius:11px; border:1px solid var(--line); background:var(--bg); color:var(--ink); padding:0 .9rem; font-family:inherit; } .caprow input[type="text"]:focus{ outline:2px solid var(--cat-a); outline-offset:1px; } .caprow__opts{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; } .caprow select.selectish{ min-height:42px; } /* alignment segmented control */ .alignseg{ display:inline-flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; } .alignseg button{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; background:transparent; border:0; color:var(--ink-3); cursor:pointer; } .alignseg button + button{ border-left:1px solid var(--line); } .alignseg button[aria-pressed="true"]{ background:linear-gradient(120deg,var(--cat-a),var(--cat-b)); color:#fff; } .alignseg svg{ width:18px; height:18px; } /* per-side colour popover (palette icon → dropdown) */ .popcolor{ position:relative; display:inline-flex; } .popcolor__btn{ display:inline-flex; align-items:center; gap:.35rem; height:38px; padding:0 .5rem 0 .4rem; border:1px solid var(--line); border-radius:10px; background:transparent; color:var(--ink-2); cursor:pointer; transition:.15s var(--ease); } .popcolor__btn:hover{ border-color:var(--cat-a); color:var(--ink); } .popcolor__btn[aria-expanded="true"]{ border-color:var(--cat-a); color:var(--ink); } .popcolor__chip{ width:18px; height:18px; border-radius:5px; border:1px solid var(--line); flex-shrink:0; } .popcolor__btn svg{ width:17px; height:17px; } .popcolor__menu{ position:absolute; top:calc(100% + .45rem); right:0; z-index:30; width:max-content; min-width:178px; padding:.75rem; border:1px solid var(--line); border-radius:13px; background:var(--panel); box-shadow:0 18px 44px oklch(0% 0 0 / .4); display:grid; gap:.65rem; } .popcolor__menu[hidden]{ display:none; } /* colour palette + hex */ .swatches{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; max-width:172px; } .swatchdot{ width:26px; height:26px; border-radius:50%; cursor:pointer; padding:0; border:2px solid var(--line); transition:.15s var(--ease); } .swatchdot:hover{ transform:scale(1.08); } .swatchdot[aria-pressed="true"]{ border-color:var(--ink); box-shadow:0 0 0 2px var(--panel); } .hexwrap{ display:flex; align-items:center; gap:.4rem; padding-top:.6rem; border-top:1px dashed var(--line-soft); } .hexwrap .hexpreview{ width:28px; height:28px; border-radius:7px; border:1px solid var(--line); flex-shrink:0; } .hexwrap input{ flex:1; min-width:0; width:84px; min-height:38px; border-radius:9px; border:1px solid var(--line); background:var(--bg); color:var(--ink); padding:0 .65rem; font-family:"Space Grotesk"; font-size:.85rem; letter-spacing:.04em; text-transform:uppercase; } .hexwrap input:focus{ outline:2px solid var(--cat-a); outline-offset:1px; } .hexwrap input.is-bad{ border-color:oklch(64% 0.24 322); } .hexenter{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; flex-shrink:0; border:0; border-radius:9px; cursor:pointer; color:#fff; background:linear-gradient(120deg,var(--cat-a),var(--cat-b)); } .hexenter svg{ width:16px; height:16px; } /* gating note shown under category fields */ .gate-note{ display:flex; align-items:flex-start; gap:.5rem; margin-top:.7rem; padding:.6rem .85rem; border-radius:11px; border:1px solid var(--line-soft); background: color-mix(in oklch, var(--cat-a) 7%, var(--bg-2)); color:var(--ink-2); font-size:.82rem; line-height:1.45; } .gate-note svg{ width:16px; height:16px; flex-shrink:0; margin-top:2px; color:var(--cat-a); } .gate-note.is-bad{ border-color: color-mix(in oklch, oklch(64% 0.24 322) 50%, var(--line)); background: color-mix(in oklch, oklch(64% 0.24 322) 10%, var(--bg-2)); } .gate-note.is-bad svg{ color: oklch(72% 0.20 320); } /* player fields grid (football → player highlights) */ .player-fields{ display:grid; grid-template-columns: repeat(3,1fr); gap:.8rem; margin-top:.9rem; } .player-fields input{ width:100%; min-height:46px; border-radius:11px; border:1px solid var(--line); background:var(--bg); color:var(--ink); padding:0 .9rem; font-family:inherit; } .player-fields input:focus{ outline:2px solid var(--cat-a); outline-offset:1px; } @media (max-width:560px){ .player-fields{ grid-template-columns:1fr; } } [hidden]{ display:none !important; } /* progress / results */ .stage{ margin-bottom: 4rem; } .processing{ border:1px solid var(--line); border-radius:var(--radius-lg); padding: clamp(2rem,5vw,3.5rem); background:var(--bg-2); text-align:center; } .processing h3{ font-size: clamp(1.4rem,3vw,2rem); } .processing p{ color:var(--ink-2); margin:.5rem 0 1.8rem; } .progress{ height:12px; border-radius:999px; background: oklch(30% .05 280); overflow:hidden; max-width:560px; margin:0 auto; } .progress__bar{ height:100%; width:0%; border-radius:999px; background:var(--grad); transition: width .3s linear; } .proglog{ margin: 1.6rem auto 0; max-width:560px; text-align:left; display:grid; gap:.5rem; } .proglog li{ display:flex; align-items:center; gap:.6rem; color:var(--ink-3); font-size:.9rem; transition:color .3s; } .proglog li.done{ color:var(--ink); } .proglog li .dotc{ width:18px;height:18px;border-radius:50%; border:2px solid var(--line); flex-shrink:0; display:grid;place-items:center; } .proglog li.done .dotc{ background:var(--grad); border-color:transparent; } .proglog li.done .dotc svg{ width:11px;height:11px;color:#fff; } .results-head{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:1rem; margin-bottom:1.4rem; } .results-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:1.2rem; } .clipcard{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--bg-2); transition: transform .35s var(--ease), border-color .35s; } .clipcard:hover{ transform: translateY(-5px); border-color: var(--cat-a); } .clipcard__media{ aspect-ratio:16/9; position:relative; display:grid; place-items:center; background: radial-gradient(circle at 60% 35%, oklch(40% .13 282 / .55), transparent 55%), linear-gradient(135deg, oklch(24% .07 280), oklch(22% .07 282)); } .clipcard__media .play{ width:52px;height:52px;border-radius:50%; background: oklch(14% .05 280 / .65); backdrop-filter: blur(4px); display:grid;place-items:center; border:1px solid var(--line); } .clipcard__media .play svg{ width:20px;height:20px;color:#fff;margin-left:2px; } .clipcard__dur{ position:absolute; right:8px; bottom:8px; font-size:.72rem; background:oklch(12% .05 280 / .8); padding:.15rem .45rem; border-radius:6px; } .clipcard__score{ position:absolute; left:8px; top:8px; font-size:.74rem; font-weight:700; background:var(--grad); padding:.25rem .55rem; border-radius:999px; color:#fff; } .clipcard__body{ padding:1rem 1.1rem 1.2rem; } .clipcard__body h4{ font-size:1.05rem; } .clipcard__body p{ color:var(--ink-3); font-size:.85rem; margin:.3rem 0 1rem; } .clipcard__acts{ display:flex; gap:.5rem; } .clipcard__acts .btn{ flex:1; padding:.6rem; font-size:.85rem; min-height:44px; } /* ============================================================ GENERATOR PIPELINE — run panel, review/swipe, final stitch ============================================================ */ /* ---- run panel (stepped progress + force stop) ---- */ .runpanel{ border:1px solid var(--line); border-radius:var(--radius-lg); padding: clamp(1.4rem,3.5vw,2.4rem); background: linear-gradient(160deg, color-mix(in oklch, var(--bg-2) 92%, transparent), color-mix(in oklch, var(--bg-3) 86%, transparent)); } .runpanel__top{ display:flex; justify-content:space-between; align-items:flex-start; gap:1.2rem; flex-wrap:wrap; margin-bottom:1.3rem; } .runpanel__sub{ color:var(--ink-2); margin:.4rem 0 0; font-size:.95rem; } .runstats{ display:flex; gap: clamp(1rem,3vw,2.2rem); flex-wrap:wrap; } .runstat b{ font-family:"Bricolage Grotesque"; font-size: clamp(1.3rem,2.6vw,1.8rem); display:block; letter-spacing:-.02em; } .runstat small{ color:var(--ink-3); font-size:.7rem; letter-spacing:.12em; } .runpanel__bar{ max-width:none; margin: 0 0 1.4rem; } .runpanel.is-stopped .progress__bar{ background: var(--ink-3); } .pipe{ display:flex; align-items:stretch; gap:.4rem; flex-wrap:wrap; } .pipe__step{ flex:1 1 110px; min-width:104px; display:flex; flex-direction:column; gap:.25rem; align-items:flex-start; border:1px solid var(--line-soft); border-radius:14px; padding:.8rem .85rem; background: color-mix(in oklch, var(--bg) 40%, transparent); transition: border-color .3s, background .3s, opacity .3s; opacity:.62; } .pipe__step.is-done{ opacity:1; border-color: color-mix(in oklch, var(--violet) 40%, transparent); } .pipe__step.is-active{ opacity:1; border-color: var(--violet-hi); box-shadow: 0 0 0 1px color-mix(in oklch, var(--violet) 40%, transparent), 0 12px 30px -16px color-mix(in oklch, var(--violet) 60%, transparent); background: color-mix(in oklch, var(--violet) 12%, transparent); } .pipe__ic{ width:24px;height:24px;border-radius:8px; display:grid;place-items:center; background: color-mix(in oklch, var(--bg) 60%, transparent); border:1px solid var(--line-soft); margin-bottom:.15rem; } .pipe__ic svg{ width:14px;height:14px; } .pipe__step.is-done .pipe__ic{ background:var(--grad); border-color:transparent; color:#fff; } .pipe__step.is-active .pipe__ic{ background: var(--violet); border-color:transparent; color:#fff; } .pipe__step.is-active .pipe__ic svg{ animation: spin 1.4s linear infinite; } .pipe__n{ font-size:.78rem; font-weight:700; } .pipe__t{ font-size:.74rem; font-weight:800; letter-spacing:.06em; } .pipe__d{ font-size:.72rem; color:var(--ink-3); } .pipe__sep{ display:none; } .runpanel__foot{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:1.3rem; } .runpanel__hint{ color:var(--ink-3); font-size:.85rem; } .runpanel__hint b{ color:var(--ink-2); } .btn--stop{ --b: linear-gradient(120deg, oklch(56% 0.21 300), oklch(52% 0.22 322)); padding:.6rem 1.1rem; min-height:42px; font-size:.85rem; } /* ---- review / swipe (overhauled, no-scroll layout) ---- */ .review__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; } .review__lead{ color:var(--ink-2); margin:.4rem 0 0; font-size:.92rem; max-width:52ch; } .review__headr{ display:flex; align-items:center; gap:.8rem; } .review__count{ color:var(--ink-3); font-size:.9rem; white-space:nowrap; } .review__count b{ color:var(--ink); font-size:1.1rem; } .chipbtn{ border:1px solid var(--line); background: color-mix(in oklch, var(--bg-2) 80%, transparent); color:var(--ink-2); border-radius:999px; padding:.5rem .95rem; font: inherit; font-size:.82rem; cursor:pointer; transition: border-color .25s, color .25s, background .25s; min-height:40px; } .chipbtn:hover{ border-color: var(--violet-hi); color:var(--ink); } /* options as a side dropdown popover */ .review__opts{ position:relative; } .iconbtn{ display:inline-flex; align-items:center; gap:.45rem; border:1px solid var(--line); background: color-mix(in oklch, var(--bg-2) 80%, transparent); color:var(--ink-2); border-radius:11px; padding:.5rem .8rem; font:inherit; font-size:.82rem; min-height:40px; cursor:pointer; transition:border-color .25s,color .25s; } .iconbtn svg{ width:18px;height:18px; } .iconbtn:hover{ border-color:var(--violet-hi); color:var(--ink); } .optsmenu{ position:absolute; right:0; top:calc(100% + .5rem); z-index:30; width:min(280px,84vw); padding:1rem; border:1px solid var(--line); border-radius:16px; background: color-mix(in oklch, var(--bg-2) 96%, transparent); backdrop-filter: blur(12px); box-shadow: var(--shadow); } .optsmenu__lab{ font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.5rem; } .optsmenu__row{ display:block; width:100%; text-align:left; border:0; background:transparent; color:var(--ink-2); font:inherit; font-size:.9rem; padding:.55rem .6rem; border-radius:9px; cursor:pointer; transition:background .2s,color .2s; } .optsmenu__row:hover{ background: color-mix(in oklch, var(--violet) 14%, transparent); color:var(--ink); } .optsmenu__sep{ height:1px; background:var(--line-soft); margin:.7rem 0; } .optsmenu__grid{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-bottom:.7rem; } .optsmenu__apply{ width:100%; border:1px solid var(--line); background: color-mix(in oklch, var(--violet) 16%, transparent); color:var(--ink); border-radius:10px; padding:.55rem; font:inherit; font-size:.85rem; cursor:pointer; transition:background .2s; } .optsmenu__apply:hover{ background: color-mix(in oklch, var(--violet) 26%, transparent); } .minif{ display:flex; flex-direction:column; gap:.3rem; font-size:.78rem; color:var(--ink-3); } .minif input{ width:100%; min-height:40px; border-radius:10px; border:1px solid var(--line); background: oklch(16% .04 280); color:var(--ink); padding:.5rem .7rem; font: inherit; } .swipe{ position:relative; display:grid; place-items:stretch; } .cliprev{ border:1px solid var(--line); border-radius:var(--radius-lg); padding: clamp(1rem,2.5vw,1.5rem); background: linear-gradient(165deg, color-mix(in oklch, var(--bg-2) 90%, transparent), color-mix(in oklch, var(--bg-3) 82%, transparent)); touch-action: pan-y; user-select:none; will-change: transform; } .cliprev.is-grab{ cursor:grabbing; } .cliprev.is-keep{ border-color: color-mix(in oklch, var(--violet) 42%, transparent); } /* two-column: media left, controls right — no vertical scrolling needed */ .cliprev__main{ display:grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: clamp(1rem,2.5vw,1.6rem); align-items:start; } .cliprev.is-vert .cliprev__main{ grid-template-columns: minmax(0,.62fr) minmax(0,1fr); } .cliprev__stage{ position:relative; aspect-ratio:16/9; width:100%; max-height:min(56vh,460px); margin:0 auto; border-radius:16px; overflow:hidden; display:grid; place-items:center; background: radial-gradient(circle at 60% 35%, oklch(40% .13 280 / .55), transparent 55%), linear-gradient(135deg, oklch(20% .06 280), oklch(16% .05 282)); border:1px solid var(--line-soft); } .cliprev.is-vert .cliprev__stage{ justify-self:center; } .cliprev__badge{ position:absolute; left:10px; top:10px; font-size:.74rem; font-weight:700; background:var(--grad); color:#fff; padding:.25rem .6rem; border-radius:999px; } .cliprev__ar{ position:absolute; right:10px; top:10px; font-size:.68rem; font-weight:700; letter-spacing:.06em; color:var(--ink-2); background: oklch(12% .05 280 / .7); border:1px solid var(--line-soft); padding:.22rem .5rem; border-radius:7px; } .cliprev__play{ width:60px;height:60px;border-radius:50%; background: oklch(14% .05 280 / .6); backdrop-filter: blur(5px); border:1px solid var(--line); display:grid;place-items:center; z-index:2; } .cliprev__play svg{ width:24px;height:24px;color:#fff;margin-left:3px; } .cliprev__scan{ position:absolute; left:0; right:0; top:0; height:34%; background: linear-gradient(180deg, oklch(70% .16 290 / .22), transparent); animation: clipScan 3.4s var(--ease-out) infinite; pointer-events:none; } @keyframes clipScan{ 0%{ transform: translateY(-10%); opacity:.2; } 50%{ transform: translateY(210%); opacity:.9; } 100%{ transform: translateY(-10%); opacity:.2; } } .cliprev__hintL,.cliprev__hintR{ position:absolute; top:12px; font-weight:800; font-size:.85rem; letter-spacing:.08em; padding:.3rem .6rem; border-radius:8px; opacity:0; transition:opacity .15s; z-index:3; } .cliprev__hintL{ right:12px; color: oklch(72% 0.20 320); border:2px solid oklch(64% 0.22 320); } .cliprev__hintR{ left:12px; color: var(--violet-hi); border:2px solid var(--violet-hi); } .cliprev.hint-skip .cliprev__hintL{ opacity:1; } .cliprev.hint-keep .cliprev__hintR{ opacity:1; } .cliprev__info{ display:flex; flex-direction:column; gap:.7rem; } .cliprev__bar{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; font-size:.92rem; } .cliprev__no{ font-weight:800; } .cliprev__file{ color:var(--ink-3); font-size:.82rem; } /* BIG prominent Keep toggle */ .keepbig{ display:flex; align-items:center; gap:.85rem; padding:.85rem 1rem; border:1.5px solid var(--line); border-radius:15px; background: color-mix(in oklch, var(--bg) 40%, transparent); cursor:pointer; transition:border-color .25s, background .25s; } .keepbig input{ position:absolute; opacity:0; width:0; height:0; } .keepbig__box{ flex-shrink:0; width:34px; height:34px; border-radius:10px; border:2px solid var(--line); display:grid; place-items:center; transition:background .2s, border-color .2s, transform .15s; } .keepbig__box svg{ width:20px; height:20px; color:#fff; opacity:0; transform:scale(.6); transition:opacity .2s, transform .2s; } .keepbig__tx b{ display:block; font-size:.98rem; } .keepbig__tx small{ color:var(--ink-3); font-size:.78rem; } .keepbig.is-on{ border-color: color-mix(in oklch, var(--violet) 55%, transparent); background: color-mix(in oklch, var(--violet) 13%, transparent); } .keepbig.is-on .keepbig__box{ background: var(--grad); border-color:transparent; } .keepbig.is-on .keepbig__box svg{ opacity:1; transform:scale(1); } .cliprev__desc{ color:var(--ink-2); font-size:.9rem; margin:0; } .trim{ position:relative; height:14px; border-radius:999px; background: oklch(28% .05 280); margin:.6rem 0 .5rem; } .trim__fill{ position:absolute; top:0; bottom:0; background:var(--grad); border-radius:999px; } .trim__h{ position:absolute; top:50%; width:18px; height:30px; transform: translate(-50%,-50%); border-radius:7px; background: var(--ink); border:2px solid var(--violet); cursor:ew-resize; touch-action:none; box-shadow: 0 2px 8px rgba(0,0,0,.4); } .trim__lab{ display:flex; justify-content:space-between; font-size:.78rem; color:var(--ink-3); font-family: ui-monospace, monospace; } .trim__sel{ color:var(--violet-hi); font-weight:600; } /* manual min:sec time inputs */ .timefields{ display:flex; align-items:flex-end; gap:.5rem; flex-wrap:wrap; } .timef{ display:flex; flex-direction:column; gap:.25rem; font-size:.72rem; letter-spacing:.04em; color:var(--ink-3); } .timef input{ width:84px; min-height:42px; border-radius:10px; border:1px solid var(--line); background: oklch(16% .04 280); color:var(--ink); padding:.5rem .65rem; font: inherit; font-family: ui-monospace, monospace; text-align:center; } .timef input:focus{ outline:none; border-color:var(--violet-hi); } .timef__arr{ color:var(--ink-3); padding-bottom:.7rem; } .timef__set{ min-height:42px; border:1px solid var(--line); background: color-mix(in oklch, var(--violet) 16%, transparent); color:var(--ink); border-radius:10px; padding:0 1rem; font:inherit; font-size:.85rem; font-weight:700; cursor:pointer; transition:background .2s; } .timef__set:hover{ background: color-mix(in oklch, var(--violet) 28%, transparent); } /* per-clip buffer row */ .clipbuf{ display:flex; align-items:flex-end; gap:.5rem; flex-wrap:wrap; margin-top:.7rem; padding-top:.7rem; border-top:1px dashed var(--line-soft); } .clipbuf__lab{ font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); flex-basis:100%; } .clipbuf__f{ display:inline-flex; align-items:center; gap:.4rem; font-size:.72rem; letter-spacing:.03em; color:var(--ink-3); } .clipbuf__f input{ width:62px; min-height:40px; border-radius:10px; border:1px solid var(--line); background: oklch(16% .04 280); color:var(--ink); padding:.45rem .55rem; font:inherit; font-family: ui-monospace, monospace; text-align:center; } .clipbuf__f input:focus{ outline:none; border-color:var(--violet-hi); } .clipbuf__set{ min-height:40px; margin-left:auto; border:1px solid var(--line); background: color-mix(in oklch, var(--violet) 14%, transparent); color:var(--ink); border-radius:10px; padding:0 .9rem; font:inherit; font-size:.82rem; font-weight:700; cursor:pointer; transition:background .2s; } .clipbuf__set:hover{ background: color-mix(in oklch, var(--violet) 26%, transparent); } /* freshly-generated run badge + empty state */ .prevrun__fresh{ display:inline-block; margin-top:.25rem; font-size:.66rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#fff; background:var(--grad); border-radius:999px; padding:.1rem .5rem; } .runs-empty{ color:var(--ink-3); font-size:.9rem; text-align:center; padding:1.2rem 0; } /* single minimalistic bottom bar */ .reviewbar{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; flex-wrap:wrap; margin-top:1.1rem; padding:.7rem; border:1px solid var(--line-soft); border-radius:16px; background: color-mix(in oklch, var(--bg-2) 60%, transparent); } .reviewbar__nav, .reviewbar__act, .reviewbar__go{ display:flex; align-items:center; gap:.5rem; } .navbtn{ border:1px solid var(--line); background: color-mix(in oklch, var(--bg-2) 80%, transparent); color:var(--ink); border-radius:12px; min-height:46px; min-width:46px; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; cursor:pointer; padding:0 .9rem; font:inherit; font-weight:700; font-size:.88rem; transition: border-color .25s, background .25s; } .navbtn svg{ width:18px;height:18px; } .navbtn:hover{ border-color: var(--violet-hi); } .navbtn--keep{ background: var(--violet); border-color:transparent; color:#fff; } .navbtn--keep:hover{ background: var(--violet-hi); } .navbtn--skip{ color: oklch(80% 0.14 320); border-color: color-mix(in oklch, oklch(64% 0.22 320) 50%, transparent); } .review__pos{ color:var(--ink-3); font-size:.85rem; min-width:60px; text-align:center; font-family: ui-monospace, monospace; } /* ---- final stitch + downloads ---- */ .final__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; flex-wrap:wrap; margin-bottom:1.4rem; } .final__h{ font-size: clamp(1.7rem,4vw,2.6rem); margin-top:.45rem; } .final__sub{ color:var(--ink-2); margin:.4rem 0 0; } .final__grid{ display:grid; grid-template-columns: 1.5fr .9fr; gap:1.2rem; } .final__preview{ position:relative; aspect-ratio:16/9; border-radius:var(--radius-lg); overflow:hidden; display:grid; place-items:center; background: radial-gradient(circle at 50% 35%, oklch(42% .14 288 / .5), transparent 58%), linear-gradient(135deg, oklch(18% .06 280), oklch(13% .05 282)); border:1px solid var(--line); } .final__badge{ position:absolute; left:14px; top:12px; font-size:.72rem; letter-spacing:.14em; color:var(--ink-3); } .final__play{ width:74px;height:74px;border-radius:50%; background: oklch(16% .05 280 / .6); backdrop-filter: blur(6px); border:1px solid var(--line); display:grid;place-items:center; } .final__play svg{ width:28px;height:28px;color:#fff;margin-left:3px; } .final__cap{ position:absolute; bottom:12px; left:14px; color:var(--ink-2); font-size:.85rem; font-family: ui-monospace, monospace; } .final__side{ border:1px solid var(--line); border-radius:var(--radius-lg); background: color-mix(in oklch, var(--bg-2) 80%, transparent); padding:.6rem; overflow:hidden; } .finlist{ display:grid; gap:.25rem; max-height: 100%; overflow:auto; } .finrow{ display:flex; align-items:center; gap:.7rem; padding:.6rem .7rem; border-radius:10px; font-size:.86rem; } .finrow:hover{ background: color-mix(in oklch, var(--violet) 8%, transparent); } .finrow__n{ width:22px;height:22px;border-radius:6px; background:var(--grad); color:#fff; display:grid;place-items:center; font-size:.74rem; font-weight:700; flex-shrink:0; } .finrow__t{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .finrow__d{ color:var(--ink-3); font-family: ui-monospace, monospace; font-size:.78rem; } .finrow__s{ color:var(--violet-hi); font-weight:700; font-size:.82rem; } .final__dl{ display:flex; gap:.7rem; align-items:center; flex-wrap:wrap; margin-top:1.4rem; } .final__more{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:.9rem; padding-top:.9rem; border-top:1px solid var(--line-soft); } @keyframes spin{ to{ transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce){ .pipe__step.is-active .pipe__ic svg{ animation:none; } } /* ---- mobile fluidity for the whole flow ---- */ @media (max-width:760px){ .runpanel__top{ flex-direction:column; gap:.9rem; } .runstats{ width:100%; justify-content:space-between; gap:1rem; } .pipe{ gap:.5rem; } .pipe__step{ flex:1 1 calc(50% - .5rem); min-width:0; } .final__grid{ grid-template-columns:1fr; } .final__side{ max-height:240px; } /* review collapses to single column, controls below the media */ .cliprev__main{ grid-template-columns:1fr; } .cliprev.is-vert .cliprev__main{ grid-template-columns:1fr; } .cliprev__stage{ max-height:min(48vh,420px); width:auto; } .cliprev.is-vert .cliprev__stage{ max-width:62vw; } .reviewbar{ flex-direction:column; align-items:stretch; gap:.6rem; } .reviewbar__nav, .reviewbar__act, .reviewbar__go{ justify-content:center; } .reviewbar__act .navbtn, .reviewbar__go .btn{ flex:1; } .review__pos{ flex:1; } } @media (max-width:460px){ .final__dl .btn, .final__dl .chipbtn{ flex:1 1 100%; } .timefields{ justify-content:space-between; } } /* ============================================================ INDEX SHOWCASE — looping category video previews + rotator ============================================================ */ .showcase__bar{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:1.4rem; } .showcase__cats{ display:flex; gap:.5rem; flex-wrap:wrap; } .scat{ border:1px solid var(--line); background: color-mix(in oklch, var(--bg-2) 80%, transparent); color:var(--ink-2); border-radius:999px; padding:.6rem 1.1rem; font:inherit; font-size:.88rem; cursor:pointer; transition:border-color .25s,color .25s,background .25s; min-height:44px; } .scat:hover{ border-color:var(--violet-hi); color:var(--ink); } .scat.is-on{ background:var(--grad); border-color:transparent; color:#fff; } .showcase__ar{ display:inline-flex; gap:.25rem; padding:.25rem; border:1px solid var(--line); border-radius:999px; background: color-mix(in oklch, var(--bg-2) 70%, transparent); } .arbtn{ border:0; background:transparent; color:var(--ink-2); border-radius:999px; padding:.45rem .9rem; font:inherit; font-size:.82rem; font-weight:700; cursor:pointer; min-height:38px; transition:background .2s,color .2s; } .arbtn.is-on{ background:var(--violet); color:#fff; } .showcase__stage{ display:grid; grid-template-columns: 1fr; gap:1.2rem; justify-items:center; } .showframe{ position:relative; width:100%; max-width:920px; aspect-ratio:16/9; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); background: linear-gradient(135deg, oklch(20% .06 280), oklch(14% .05 282)); transition: max-width .4s var(--ease), aspect-ratio .4s var(--ease); } .showcase__stage.is-vert .showframe{ max-width:420px; } .showframe__grad{ position:absolute; inset:0; background: radial-gradient(60% 50% at 30% 28%, color-mix(in oklch, var(--cat-a) 55%, transparent), transparent 60%), radial-gradient(60% 55% at 75% 78%, color-mix(in oklch, var(--cat-b) 50%, transparent), transparent 62%); animation: showPan 9s var(--ease-out) infinite alternate; } @keyframes showPan{ 0%{ transform:scale(1.05) translate(0,0); } 100%{ transform:scale(1.16) translate(-3%,-2%); } } .showframe__scan{ position:absolute; left:0; right:0; top:0; height:30%; background: linear-gradient(180deg, oklch(80% .12 290 / .26), transparent); animation: showScan 4.2s var(--ease-out) infinite; pointer-events:none; } @keyframes showScan{ 0%{ transform: translateY(-15%); opacity:.2; } 50%{ transform: translateY(260%); opacity:.85; } 100%{ transform: translateY(-15%); opacity:.2; } } .showframe__grain{ position:absolute; inset:0; opacity:.05; pointer-events:none; mix-blend-mode:overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .showframe__badge{ position:absolute; left:14px; top:14px; z-index:3; font-size:.78rem; font-weight:700; background:var(--grad); color:#fff; padding:.3rem .7rem; border-radius:999px; } .showframe__arlab{ position:absolute; right:14px; top:14px; z-index:3; font-size:.72rem; font-weight:700; letter-spacing:.05em; color:var(--ink-2); background: oklch(12% .05 280 / .7); border:1px solid var(--line-soft); padding:.26rem .55rem; border-radius:8px; } .showframe__live{ position:absolute; right:14px; bottom:14px; z-index:3; display:inline-flex; align-items:center; gap:.4rem; font-size:.7rem; letter-spacing:.08em; color:var(--ink-2); background: oklch(12% .05 280 / .6); border:1px solid var(--line-soft); padding:.28rem .6rem; border-radius:999px; } .showframe__live i{ width:7px;height:7px;border-radius:50%; background: oklch(70% .2 150); animation: blink 1.6s ease-in-out infinite; } @keyframes blink{ 0%,100%{opacity:1;} 50%{opacity:.25;} } /* the rotating word "main frame" */ .showframe__rot{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem; text-align:center; padding:1rem; } .showframe__rotlab{ font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); } .showframe__words{ position:relative; display:block; min-height:1.1em; } .showframe__words b{ font-family:"Anton", "Bricolage Grotesque", sans-serif; font-weight:400; font-size: clamp(2.6rem,7vw,5.2rem); line-height:1; letter-spacing:.01em; text-transform:uppercase; background: linear-gradient(100deg, #fff, color-mix(in oklch, var(--cat-a) 70%, #fff) 55%, color-mix(in oklch, var(--cat-b) 75%, #fff)); -webkit-background-clip:text; background-clip:text; color:transparent; display:inline-block; animation: wordIn .5s var(--ease-out); } .showcase__stage.is-vert .showframe__words b{ font-size: clamp(2rem,9vw,3.4rem); } @keyframes wordIn{ 0%{ opacity:0; transform: translateY(18px) scale(.96); filter:blur(4px); } 100%{ opacity:1; transform:none; filter:blur(0); } } .showframe__bars{ position:absolute; left:0; right:0; bottom:0; height:42px; z-index:2; display:flex; align-items:flex-end; gap:3px; padding:0 16px 12px; opacity:.7; } .showframe__bars i{ flex:1; background:var(--grad); border-radius:3px 3px 0 0; height:20%; animation: wav 1.3s ease-in-out infinite; } .showthumbs{ display:grid; grid-template-columns: repeat(3,1fr); gap:.7rem; width:100%; max-width:920px; } .showthumb{ position:relative; aspect-ratio:16/10; border-radius:12px; border:1px solid var(--line); overflow:hidden; background: linear-gradient(135deg, color-mix(in oklch, var(--cat-a) 30%, oklch(22% .06 280)), color-mix(in oklch, var(--cat-b) 26%, oklch(18% .05 282))); } .showthumb.is-on{ border-color: color-mix(in oklch, var(--violet) 55%, transparent); box-shadow: 0 0 0 1px color-mix(in oklch, var(--violet) 40%, transparent); } .showthumb span{ position:absolute; left:8px; bottom:7px; font-size:.66rem; background: oklch(12% .05 280 / .72); padding:.16rem .4rem; border-radius:6px; color:var(--ink); } .showcase__stage.is-vert .showthumb{ aspect-ratio:9/16; } @media (prefers-reduced-motion: reduce){ .showframe__grad,.showframe__scan,.showframe__bars i,.showframe__live i{ animation:none; } .showframe__words b{ animation:none; } } @media (max-width:600px){ .showcase__bar{ justify-content:center; } .showthumbs{ gap:.5rem; } .showthumb span{ font-size:.6rem; } } /* ============================================================ WEB / MOBILE PREVIEW TOGGLE ============================================================ */ .devtoggle{ position:fixed; right:18px; bottom:18px; z-index:200; display:inline-flex; gap:.25rem; padding:.3rem; border:1px solid var(--line); border-radius:999px; background: color-mix(in oklch, var(--bg-2) 88%, transparent); backdrop-filter: blur(12px); box-shadow: var(--shadow); } .devtoggle__btn{ display:inline-flex; align-items:center; gap:.4rem; border:0; background:transparent; color:var(--ink-2); border-radius:999px; padding:.5rem .85rem; font:inherit; font-size:.82rem; font-weight:600; cursor:pointer; min-height:40px; transition:background .2s,color .2s; } .devtoggle__btn svg{ width:18px;height:18px; } .devtoggle__btn.is-on{ background:var(--grad); color:#fff; } /* mobile-preview: a real 390px-viewport iframe rendered inside a phone shell. Using an iframe means the genuine mobile @media breakpoints fire. */ .devframe{ position:fixed; inset:0; z-index:300; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; padding:2.2rem 1rem; } .devframe__back{ position:absolute; inset:0; background: color-mix(in oklch, oklch(4% .03 278) 78%, transparent); backdrop-filter: blur(8px); } .devframe__phone{ position:relative; width:390px; max-width:92vw; height:min(844px, 86vh); border-radius:44px; padding:12px; background: linear-gradient(160deg, oklch(28% .03 278), oklch(12% .02 278)); box-shadow: 0 40px 90px -20px rgba(0,0,0,.7), 0 0 0 1px color-mix(in oklch, var(--line) 60%, transparent), inset 0 0 0 2px oklch(40% .02 278); } .devframe__notch{ position:absolute; top:14px; left:50%; transform:translateX(-50%); width:120px; height:26px; border-radius:0 0 16px 16px; background: oklch(8% .02 278); z-index:2; } .devframe__screen{ width:100%; height:100%; border:0; border-radius:32px; background: var(--bg); display:block; } .devframe__cap{ position:relative; color:var(--ink-2); font-size:.78rem; font-weight:600; letter-spacing:.02em; } body.devframe-open{ overflow:hidden; } /* hide the floating toggle + decorative bg inside the framed page */ html.in-devframe .devtoggle, html.in-devframe .fluidbg{ display:none !important; } @media (max-width:560px){ .devtoggle__btn span{ display:none; } .devtoggle{ right:12px; bottom:12px; } } /* category landing hero */ .cat-hero{ padding-top: clamp(2rem,4vw,3.5rem); padding-bottom: clamp(2.5rem,5vw,4rem); } .cat-hero__grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,4vw,3.5rem); align-items:center; } .cat-hero h1{ font-size: clamp(2.6rem,6.5vw,5rem); line-height:.96; } .cat-hero__lead{ color:var(--ink-2); font-size:1.15rem; max-width:42ch; margin:1.3rem 0 2rem; } .cat-badge{ display:inline-flex; align-items:center; gap:.6rem; padding:.5rem 1rem; border-radius:999px; border:1px solid var(--line); background:var(--bg-2); font-weight:600; font-size:.85rem; margin-bottom:1.4rem; } .cat-badge .swatch{ width:18px;height:18px;border-radius:6px; background:linear-gradient(120deg,var(--cat-a),var(--cat-b)); display:inline-flex; align-items:center; justify-content:center; font-size:11px; line-height:1; } .cat-stats{ display:grid; grid-template-columns: repeat(3,1fr); gap:1rem; margin-top:2.4rem; } .cat-stat{ border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem; background:var(--bg-2); } .cat-stat b{ font-family:"Bricolage Grotesque"; font-size:1.9rem; display:block; background:linear-gradient(120deg,var(--cat-a),var(--cat-b)); -webkit-background-clip:text; background-clip:text; color:transparent; } .cat-stat span{ color:var(--ink-3); font-size:.85rem; } .cat-visual{ border-radius:var(--radius-lg); border:1px solid var(--line); overflow:hidden; background:var(--bg-2); box-shadow:var(--shadow); } .cat-visual__top{ aspect-ratio:16/10; position:relative; display:grid;place-items:center; background: radial-gradient(circle at 30% 30%, color-mix(in oklch, var(--cat-a) 45%, transparent), transparent 55%), radial-gradient(circle at 75% 75%, color-mix(in oklch, var(--cat-b) 40%, transparent), transparent 55%), oklch(13% .04 280); } .cat-visual__rows{ padding:1rem; display:grid; gap:.6rem; } .cvrow{ display:flex; align-items:center; gap:.8rem; padding:.7rem; border-radius:11px; background: oklch(26% .06 280 / .45); border:1px solid var(--line-soft); } .cvrow .num{ font-family:"Anton"; color:var(--cat-a); width:26px; } .cvrow .bar{ flex:1; height:8px; border-radius:999px; background: oklch(34% .05 280); overflow:hidden; } .cvrow .bar i{ display:block; height:100%; border-radius:999px; background:linear-gradient(120deg,var(--cat-a),var(--cat-b)); } .cvrow .sc{ font-weight:700; font-size:.85rem; color:var(--cat-a); } .cat-feats{ display:grid; grid-template-columns: repeat(3,1fr); gap:1.2rem; } .cat-feat{ border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem; background:var(--bg-2); transition: transform .35s var(--ease); } .cat-feat:hover{ transform: translateY(-4px); border-color:var(--cat-a); } .cat-feat .ic{ width:46px;height:46px;border-radius:13px; display:grid;place-items:center; background: color-mix(in oklch, var(--cat-a) 22%, transparent); margin-bottom:1rem; } .cat-feat .ic svg{ width:22px;height:22px; color:var(--cat-a); } .cat-feat h3{ font-size:1.2rem; } .cat-feat p{ color:var(--ink-2); font-size:.95rem; margin-top:.5rem; } /* ============================================================ REPORTING — sleek, minimal, two-shade (purple review / blue running) ============================================================ */ .rep-head{ padding-top: clamp(2rem,4vw,3rem); } .rep-head h1{ font-size: clamp(2.2rem,5vw,3.4rem); } .rep-head p{ color:var(--ink-2); margin-top:.6rem; } /* summary stat cards — 5 across, tinted */ .rep-summary{ display:grid; grid-template-columns: repeat(5,1fr); gap:.8rem; margin: 2rem 0 1.6rem; } .rep-card{ border:1px solid var(--line-soft); border-radius:var(--radius); padding:1.1rem 1.2rem; background: color-mix(in oklch, var(--bg-2) 70%, transparent); position:relative; color:inherit; text-decoration:none; transition: border-color .25s, transform .25s var(--ease); } .rep-card:hover{ transform: translateY(-2px); } .rep-card .rc-lab{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); } .rep-card .rc-val{ font-family:"Bricolage Grotesque"; font-weight:800; font-size:clamp(1.5rem,2.4vw,2rem); margin-top:.3rem; line-height:1; letter-spacing:-.02em; } .rep-card.review{ border-color: color-mix(in oklch, var(--review) 38%, transparent); } .rep-card.review .rc-val{ color: var(--review-hi); } .rep-card.running{ border-color: color-mix(in oklch, var(--running) 38%, transparent); } .rep-card.running .rc-val{ color: var(--running-hi); } .rep-card.review::after, .rep-card.running::after{ content:""; position:absolute; top:1.1rem; right:1.1rem; width:7px;height:7px;border-radius:50%; } .rep-card.review::after{ background: var(--review); box-shadow:0 0 10px color-mix(in oklch, var(--review) 60%, transparent); } .rep-card.running::after{ background: var(--running); box-shadow:0 0 10px color-mix(in oklch, var(--running) 60%, transparent); animation: ping 2s infinite; } .rep-cols{ display:grid; grid-template-columns: 1fr 1fr; gap:1.4rem; margin: 0 0 2rem; } .rep-panel{ border:1px solid var(--line-soft); border-radius:var(--radius-lg); background: color-mix(in oklch, var(--bg-2) 62%, transparent); overflow:hidden; } .rep-panel__head{ display:flex; align-items:center; gap:.7rem; padding:1.15rem 1.4rem; } .rep-panel__head h2{ font-size:1.3rem; } .rep-panel__count{ margin-left:auto; font-size:.78rem; font-weight:600; padding:.25rem .7rem; border-radius:999px; border:1px solid var(--line-soft); color:var(--ink-2); } .rep-panel--review{ border-top: 2px solid color-mix(in oklch, var(--review) 60%, transparent); } .rep-panel--review .rep-panel__count{ color: var(--review-hi); border-color: color-mix(in oklch, var(--review) 40%, transparent); } .rep-panel--run{ border-top: 2px solid color-mix(in oklch, var(--running) 60%, transparent); } .rep-panel--run .rep-panel__count{ color: var(--running-hi); border-color: color-mix(in oklch, var(--running) 40%, transparent); } .dotled{ width:9px;height:9px;border-radius:50%; } .dotled--m{ background:var(--review); box-shadow:0 0 0 0 color-mix(in oklch, var(--review) 60%, transparent); animation:ping 2s infinite; } .dotled--v{ background:var(--running); box-shadow:0 0 0 0 color-mix(in oklch, var(--running) 60%, transparent); animation:ping 2s .6s infinite; } .tasklist{ display:flex; flex-direction:column; padding:.4rem .5rem .5rem; } .task{ display:flex; align-items:center; gap:1rem; padding:.8rem .9rem; border-radius:14px; transition: background .2s; } .task:hover{ background: color-mix(in oklch, var(--bg-3) 55%, transparent); } .task__thumb{ width:50px;height:38px; border-radius:10px; flex-shrink:0; position:relative; overflow:hidden; background: linear-gradient(120deg, oklch(28% .08 280), oklch(26% .08 282)); } .task__thumb.f{ background: linear-gradient(120deg, oklch(48% .20 262), oklch(52% .21 284)); } .task__thumb.d{ background: linear-gradient(120deg, oklch(50% .21 292), oklch(56% .22 312)); } .task__thumb.v{ background: linear-gradient(120deg, oklch(48% .20 274), oklch(52% .21 262)); } .task__info{ flex:1; min-width:0; } .task__info b{ font-size:.96rem; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .task__info small{ color:var(--ink-3); font-size:.82rem; } .task__meta{ text-align:right; flex-shrink:0; } .badge{ font-size:.72rem; font-weight:700; padding:.25rem .6rem; border-radius:999px; display:inline-block; } .badge--review{ background: color-mix(in oklch, var(--review) 18%, transparent); color: var(--review-hi); } .badge--run{ background: color-mix(in oklch, var(--running) 18%, transparent); color: var(--running-hi); } .badge--done{ background: var(--bg-3); color: var(--ink-2); } .miniprog{ width:90px; height:5px; border-radius:999px; background: var(--bg-3); overflow:hidden; margin-top:.4rem; margin-left:auto; } .miniprog i{ display:block; height:100%; background: linear-gradient(90deg, var(--running), var(--running-hi)); border-radius:999px; } .rep-table-wrap{ border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:var(--bg-2); } .rep-table-wrap > h2{ padding:1.2rem 1.4rem; font-size:1.3rem; border-bottom:1px solid var(--line-soft); } .tbl-scroll{ overflow-x:auto; } table.rep{ width:100%; border-collapse:collapse; min-width:680px; } table.rep th{ text-align:left; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); padding:.9rem 1.4rem; border-bottom:1px solid var(--line-soft); font-weight:600; } table.rep td{ padding:1rem 1.4rem; border-bottom:1px solid var(--line-soft); font-size:.92rem; } table.rep tr:last-child td{ border-bottom:0; } table.rep tr:hover td{ background: oklch(28% .07 280 / .35); } table.rep a.tlink{ font-weight:600; color:var(--ink); } table.rep a.tlink:hover{ color:var(--magenta-hi); } .catpill{ display:inline-flex; align-items:center; gap:.4rem; font-size:.82rem; } .catpill .sw{ width:12px;height:12px;border-radius:4px; } /* reveal animation */ .reveal{ opacity:0; transform: translateY(22px); } .revealed{ opacity:1; transform:none; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); } @media (prefers-reduced-motion: reduce){ .reveal{opacity:1;transform:none;} } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1024px){ .hero__grid{ grid-template-columns:1fr; } .gen-layout{ grid-template-columns:1fr; } .gen-side{ position:static; } .cat-hero__grid{ grid-template-columns:1fr; } .bento{ grid-template-columns: repeat(2,1fr); } .feat--tall{ grid-row: auto; } .rep-summary{ grid-template-columns: repeat(3,1fr); } } @media (max-width: 860px){ .nav__links, .nav__cta{ display:none; } .nav__burger{ display:flex; } .steps{ grid-template-columns:1fr; } .step__line{ display:none; } .prices{ grid-template-columns:1fr; } .cat-feats{ grid-template-columns:1fr; } .cat-stats{ grid-template-columns:1fr; } .results-grid{ grid-template-columns:1fr; } .rep-cols{ grid-template-columns:1fr; } .rep-summary{ grid-template-columns: repeat(2,1fr); } .footer__grid{ grid-template-columns:1fr 1fr; } .catbar__links{ display:none; } } @media (max-width:560px){ .bento{ grid-template-columns:1fr; } .feat--wide{ grid-column:auto; } .footer__grid{ grid-template-columns:1fr; } .catdrop, .catdrop__btn{ width:100%; min-width:0; } .hero__cta .btn{ flex:1; } .rep-summary{ grid-template-columns: 1fr 1fr; } .gen-mode__seg{ grid-template-columns:1fr; } .hero__grid--center h1{ font-size: clamp(2.4rem, 11vw, 3.4rem); line-height:1.02; white-space:normal; } .hero__br{ display:block; } .hero__break{ display:block; } .hero__grid--center .hero__col{ max-width:100%; } } /* ============================================================ NAV DROPDOWN (AI menu) + new nav bits ============================================================ */ .nav__links .has-drop{ position:relative; } .navdrop__btn{ display:inline-flex; align-items:center; gap:.4rem; padding:.55rem .85rem; border-radius:10px; font-family:inherit; font-weight:500; color:var(--ink-2); font-size:.95rem; background:transparent; border:0; cursor:pointer; transition: color .2s, background .2s; } .navdrop__btn:hover, .has-drop.open .navdrop__btn{ color:var(--ink); background: color-mix(in oklch, var(--ink) 8%, transparent); } .navdrop__btn .star{ color: var(--magenta-hi); } .navdrop__btn .caret{ transition: transform .3s; display:inline-flex; } .has-drop.open .navdrop__btn .caret{ transform: rotate(180deg); } .navdrop__menu{ position:absolute; top:calc(100% + .55rem); left:50%; transform: translateX(-50%) translateY(-8px); width: 320px; background: var(--bg-2); border:1px solid var(--line); border-radius:18px; padding:.6rem; box-shadow: var(--shadow); opacity:0; visibility:hidden; transition:.26s var(--ease); z-index:40; } .has-drop.open .navdrop__menu{ opacity:1; visibility:visible; transform: translateX(-50%) translateY(0); } .navdrop__menu a{ display:flex; align-items:flex-start; gap:.8rem; padding:.7rem .8rem; border-radius:12px; margin:0; color:var(--ink); background:transparent; } .navdrop__menu a:hover{ background: color-mix(in oklch, var(--ink) 9%, transparent); } .navdrop__ic{ width:38px;height:38px;border-radius:11px; flex-shrink:0; display:grid; place-items:center; background: color-mix(in oklch, var(--violet) 22%, transparent); } .navdrop__ic svg{ width:19px;height:19px; color:var(--violet-hi); } .navdrop__tx b{ font-family:"Bricolage Grotesque"; font-weight:800; font-size:.96rem; display:block; } .navdrop__tx small{ color:var(--ink-3); font-size:.8rem; } .navdrop__sep{ height:1px; background:var(--line-soft); margin:.45rem .4rem; } .navdrop__lab{ font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); padding:.3rem .8rem .35rem; } /* badge pill used inline in headings / cards */ .pill-credits{ display:inline-flex; align-items:center; gap:.4rem; font-size:.72rem; font-weight:700; padding:.25rem .6rem; border-radius:999px; background: color-mix(in oklch, var(--magenta) 18%, transparent); color: var(--magenta-hi); } .star{ color: var(--magenta-hi); } /* ============================================================ AUTH GATE (overview / reporting for logged-in only) ============================================================ */ .authgate{ border:1px solid var(--line); border-radius:var(--radius-lg); padding: clamp(2rem,5vw,3.5rem); text-align:center; background: linear-gradient(160deg, oklch(22% 0.06 280 / .7), oklch(19% 0.05 280 / .5)); position:relative; overflow:hidden; margin: 1.4rem 0; } .authgate::before{ content:""; position:absolute; inset:0; background: radial-gradient(520px 280px at 50% -10%, oklch(70% .16 280 / .22), transparent 60%); pointer-events:none; } .authgate__lock{ width:64px;height:64px;border-radius:18px; margin:0 auto 1.2rem; display:grid; place-items:center; background: var(--grad); box-shadow:var(--glow); position:relative; } .authgate__lock svg{ width:28px;height:28px; color:#fff; } .authgate h3{ font-size: clamp(1.4rem,3vw,2rem); position:relative; } .authgate p{ color:var(--ink-2); max-width:46ch; margin:.7rem auto 1.6rem; position:relative; } .authgate__cta{ display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; position:relative; } /* ============================================================ GENERATOR — Live vs VOD main mode switch ============================================================ */ .mainmode{ display:grid; grid-template-columns: 1fr 1fr; gap:1rem; } .mainmode__opt{ position:relative; text-align:left; cursor:pointer; padding:1.3rem 1.4rem; border-radius:var(--radius); border:1px solid var(--line); background:var(--bg-2); color:var(--ink); font-family:inherit; transition: border-color .25s, background .25s, transform .25s var(--ease); overflow:hidden; } .mainmode__opt:hover{ transform: translateY(-3px); border-color: var(--cat-a); } .mainmode__opt[aria-pressed="true"]{ border-color: var(--cat-a); background: color-mix(in oklch, var(--cat-a) 12%, var(--bg-2)); box-shadow: 0 0 0 1px var(--cat-a) inset; } .mainmode__top{ display:flex; align-items:center; gap:.7rem; } .mainmode__ic{ width:42px;height:42px;border-radius:12px; display:grid; place-items:center; background: linear-gradient(120deg,var(--cat-a),var(--cat-b)); flex-shrink:0; } .mainmode__ic svg{ width:21px;height:21px;color:#fff; } .mainmode__opt.live .mainmode__ic{ background: linear-gradient(120deg, oklch(58% 0.22 308), oklch(66% 0.20 322)); } .mainmode__opt.live[aria-pressed="true"]{ border-color: oklch(64% 0.21 314); box-shadow:0 0 0 1px oklch(64% 0.21 314) inset; background: color-mix(in oklch, oklch(60% 0.22 312) 12%, var(--bg-2)); } .mainmode__opt h4{ font-size:1.15rem; } .mainmode__live-dot{ width:8px;height:8px;border-radius:50%; background: oklch(64% 0.24 316); box-shadow:0 0 0 0 oklch(64% .24 316 / .6); animation:ping 2s infinite; margin-left:auto; } .mainmode__opt p{ color:var(--ink-2); font-size:.92rem; margin:.7rem 0 0; } .mainmode__credits{ display:inline-flex; align-items:center; gap:.4rem; margin-top:.9rem; font-size:.74rem; font-weight:700; padding:.28rem .65rem; border-radius:999px; } .mainmode__credits.low{ background: color-mix(in oklch, var(--running) 16%, transparent); color: var(--running-hi); } .mainmode__credits.high{ background: color-mix(in oklch, oklch(60% 0.22 312) 18%, transparent); color: oklch(80% 0.15 312); } /* upload source tabs (VOD) */ .srctabs{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem; } .srctab{ display:inline-flex; align-items:center; gap:.5rem; padding:.6rem .95rem; border-radius:12px; border:1px solid var(--line); background:var(--bg-2); color:var(--ink-2); cursor:pointer; font-family:inherit; font-weight:600; font-size:.88rem; transition:.2s var(--ease); } .srctab svg{ width:17px;height:17px; } .srctab:hover{ color:var(--ink); border-color: var(--cat-a); } .srctab[aria-selected="true"]{ color:#fff; background: linear-gradient(120deg,var(--cat-a),var(--cat-b)); border-color:transparent; } .srcpane{ display:none; } .srcpane.active{ display:block; } /* previous-run picker */ .prevlist{ display:grid; gap:.6rem; } .prevrun{ display:flex; align-items:center; gap:.9rem; padding:.8rem .9rem; border-radius:13px; border:1px solid var(--line-soft); background:var(--bg-2); cursor:pointer; text-align:left; color:var(--ink); font-family:inherit; transition:.2s; width:100%; } .prevrun:hover{ border-color: var(--cat-a); background: color-mix(in oklch, var(--cat-a) 8%, var(--bg-2)); } .prevrun__thumb{ width:52px;height:38px;border-radius:9px;flex-shrink:0; background: linear-gradient(120deg, oklch(40% .1 262), oklch(44% .12 282)); } .prevrun__thumb.f{ background: linear-gradient(120deg, oklch(48% .20 262), oklch(52% .21 284)); } .prevrun__thumb.d{ background: linear-gradient(120deg, oklch(50% .21 292), oklch(56% .22 312)); } .prevrun__thumb.v{ background: linear-gradient(120deg, oklch(48% .20 274), oklch(52% .21 262)); } .prevrun__info{ flex:1; min-width:0; } .prevrun__info b{ font-size:.94rem; display:block; } .prevrun__info small{ color:var(--ink-3); font-size:.8rem; } /* stitch on-page tool */ .stitch-tool{ display:grid; grid-template-columns: 1.4fr .9fr; gap:1.4rem; align-items:start; } .stitch-tool__list{ display:grid; gap:.7rem; } .prevrun__check{ width:24px;height:24px;border-radius:7px;flex-shrink:0; border:1.5px solid var(--line); display:grid; place-items:center; color:transparent; transition:.2s; } .prevrun__check svg{ width:15px;height:15px; } .prevrun.is-on{ border-color: var(--cat-a); background: color-mix(in oklch, var(--cat-a) 12%, var(--bg-2)); } .prevrun.is-on .prevrun__check{ background: linear-gradient(120deg,var(--cat-a),var(--cat-b)); border-color:transparent; color:#fff; } .stitch-tool__panel{ border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-2); padding:1.4rem; position:sticky; top:88px; } .stitch-tool__panel h4{ font-size:1.05rem; margin-bottom:1rem; } .stitch-sum{ display:flex; align-items:center; justify-content:space-between; padding:.6rem 0; border-bottom:1px solid var(--line-soft); } .stitch-sum:last-of-type{ border-bottom:0; } .stitch-sum span{ color:var(--ink-3); font-size:.9rem; } .stitch-sum b{ font-family:"Bricolage Grotesque"; font-weight:800; font-size:1.05rem; } .stitch-tool__panel .field label{ display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.5rem; } @media (max-width:860px){ .stitch-tool{ grid-template-columns:1fr; } .stitch-tool__panel{ position:static; } } /* stitch upload queue + reorderable list */ .stitch-queue{ margin-top:1.4rem; } .stitch-queue__head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; } .stitch-queue__head h4{ font-size:1.05rem; display:flex; align-items:center; gap:.6rem; } .stitch-queue__head h4 span{ font-family:"Bricolage Grotesque"; font-weight:700; font-size:.78rem; color:#fff; padding:.18rem .6rem; border-radius:999px; background: linear-gradient(120deg,var(--cat-a),var(--cat-b)); } .stitch-queue__head>span{ color:var(--ink-3); font-size:.85rem; } .stitch-queue__actions{ display:flex; gap:.6rem; margin-top:1rem; flex-wrap:wrap; } .orderlist{ list-style:none; display:grid; gap:.7rem; margin:0; padding:0; } .orderitem{ display:flex; align-items:center; gap:.85rem; padding:.7rem .8rem; border-radius:13px; border:1px solid var(--line-soft); background:var(--bg-2); transition:.2s; } .orderitem.is-dragging{ opacity:.5; border-style:dashed; border-color:var(--cat-a); } .orderitem.drop-target{ border-color:var(--cat-a); background: color-mix(in oklch, var(--cat-a) 10%, var(--bg-2)); } .orderitem__pos{ width:26px; height:26px; flex-shrink:0; border-radius:8px; display:grid; place-items:center; font-family:"Bricolage Grotesque"; font-weight:800; font-size:.85rem; color:#fff; background: linear-gradient(120deg,var(--cat-a),var(--cat-b)); } .orderitem__grip{ flex-shrink:0; color:var(--ink-3); cursor:grab; display:grid; place-items:center; } .orderitem__grip svg{ width:16px; height:16px; } .orderitem:active .orderitem__grip{ cursor:grabbing; } .orderitem__thumb{ width:52px; height:38px; border-radius:9px; flex-shrink:0; background: linear-gradient(120deg, var(--cat-a), var(--cat-b)); } .orderitem__info{ flex:1; min-width:0; } .orderitem__info b{ font-size:.92rem; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .orderitem__info small{ color:var(--ink-3); font-size:.78rem; } .orderitem__moves{ display:flex; flex-direction:column; gap:.2rem; flex-shrink:0; } .orderitem__moves button, .orderitem__del{ border:1px solid var(--line); background:var(--bg-1); color:var(--ink-2); border-radius:7px; cursor:pointer; display:grid; place-items:center; transition:.15s; } .orderitem__moves button{ width:26px; height:20px; } .orderitem__moves button svg{ width:13px; height:13px; } .orderitem__moves button:hover:not(:disabled){ border-color:var(--cat-a); color:var(--cat-a); } .orderitem__moves button:disabled{ opacity:.3; cursor:not-allowed; } .orderitem__del{ width:30px; height:30px; flex-shrink:0; } .orderitem__del svg{ width:15px; height:15px; } .orderitem__del:hover{ border-color: oklch(60% 0.2 18); color: oklch(70% 0.2 18); } /* additional customisation (highlight style hidden here) */ .addcust{ border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-2); overflow:hidden; } .addcust__btn{ width:100%; display:flex; align-items:center; gap:.7rem; padding:1.1rem 1.3rem; background:transparent; border:0; color:var(--ink); cursor:pointer; font-family:"Bricolage Grotesque"; font-weight:800; font-size:1.05rem; min-height:56px; } .addcust__btn .caret{ margin-left:auto; transition:transform .3s; } .addcust.open .addcust__btn .caret{ transform: rotate(180deg); } .addcust__body{ display:grid; grid-template-rows:0fr; transition: grid-template-rows .4s var(--ease-out); } .addcust.open .addcust__body{ grid-template-rows:1fr; } .addcust__inner{ overflow:hidden; } .addcust__pad{ padding:0 1.3rem 1.4rem; display:grid; gap:1.4rem; } /* aspect ratio toggle (9:16 / 1:1 / 4:5 / 16:9) — 4-up grid so the tiles never overflow the crop control column. `.aspect-toggle--sm` (logo position row) keeps the older 1-line flex look. */ .aspect-toggle{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.4rem; } .aspect-toggle--sm{ display:flex; gap:.5rem; } .aspect-toggle button{ min-height:48px; padding:.55rem .35rem; border-radius:12px; border:1px solid var(--line); background:transparent; color:var(--ink-2); cursor:pointer; font-family:inherit; font-weight:700; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15rem; transition:.2s; text-align:center; font-size:.95rem; line-height:1.1; } .aspect-toggle--sm button{ flex:1; padding:.6rem 1rem; flex-direction:row; gap:.5rem; font-size:1rem; } .aspect-toggle button svg{ width:18px;height:18px; } .aspect-toggle button small{ font-size:.62rem; font-weight:500; color:var(--ink-3); letter-spacing:.02em; line-height:1.15; display:block; white-space:normal; overflow:hidden; text-overflow:ellipsis; max-width:100%; } .aspect-toggle--sm button small{ font-size:.72rem; font-weight:500; color:var(--ink-3); line-height:1.15; } .aspect-toggle button[aria-pressed="true"]{ background: linear-gradient(120deg,var(--cat-a),var(--cat-b)); border-color:transparent; color:#fff; } .aspect-toggle button[aria-pressed="true"] small{ color:rgba(255,255,255,.85); } /* 5-mode source tabs */ .srctabs--5{ display:grid; grid-template-columns: repeat(4, 1fr); gap:.5rem; } .srctabs--5 .srctab{ justify-content:center; padding:.7rem .6rem; } .srctabs--5 .srctab[hidden]{ display:none; } @media (max-width:680px){ .srctabs--5{ grid-template-columns: repeat(2, 1fr); } } /* My Library grid */ .libgrid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:.7rem; } @media (max-width:680px){ .libgrid{ grid-template-columns: repeat(2, 1fr); } } .libitem{ display:flex; flex-direction:column; gap:.55rem; padding:.7rem; border-radius:13px; border:1px solid var(--line-soft); background:var(--bg-2); cursor:pointer; text-align:left; color:var(--ink); font-family:inherit; transition:.2s; } .libitem:hover{ border-color: var(--cat-a); background: color-mix(in oklch, var(--cat-a) 8%, var(--bg-2)); transform: translateY(-2px); } .libitem__thumb{ width:100%; aspect-ratio:16/10; border-radius:9px; background: linear-gradient(120deg, oklch(40% .1 262), oklch(44% .12 282)); } .libitem__thumb.f{ background: linear-gradient(120deg, oklch(48% .20 262), oklch(52% .21 284)); } .libitem__thumb.d{ background: linear-gradient(120deg, oklch(50% .21 292), oklch(56% .22 312)); } .libitem__thumb.v{ background: linear-gradient(120deg, oklch(48% .20 274), oklch(52% .21 262)); } .libitem__info b{ font-size:.88rem; display:block; line-height:1.25; } .libitem__info small{ color:var(--ink-3); font-size:.76rem; } /* source caveat note */ .srcnote{ display:flex; align-items:flex-start; gap:.55rem; margin-top:1.1rem; padding:.7rem .9rem; border-radius:11px; border:1px solid var(--line-soft); background: color-mix(in oklch, var(--cat-a) 6%, var(--bg-2)); color:var(--ink-2); font-size:.84rem; line-height:1.45; text-align:left; max-width:560px; margin-left:auto; margin-right:auto; } .srcnote svg{ width:18px;height:18px;flex-shrink:0;margin-top:1px;color:var(--cat-a); } .srcnote strong{ color:var(--ink); } /* vertical rotator — AI Subject Tracking mode recolours the tool (electric blue-violet = AI active) */ #rotate-tool[data-vmode="track"]{ --cat-a: oklch(64% 0.20 266); --cat-b: oklch(68% 0.19 290); } #rotate-tool[data-vmode="track"] .eyebrow{ color: var(--cat-a); } /* ============================================================ EDITOR TOOLS (homepage) + AI page feature cards ============================================================ */ .tools{ display:grid; grid-template-columns: repeat(2,1fr); gap:1.2rem; } .tools--3{ grid-template-columns: repeat(3,1fr); } .toolcard{ position:relative; border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.8rem; overflow:hidden; background: linear-gradient(160deg, oklch(21% 0.05 280 / .8), oklch(18% 0.045 280 / .55)); transition: transform .35s var(--ease), border-color .35s; display:flex; flex-direction:column; } .toolcard:hover{ transform: translateY(-5px); border-color: var(--violet); } .toolcard::before{ content:""; position:absolute; inset:0; background: var(--sheen); background-size:220% 100%; background-position:140% 0; opacity:0; transition: opacity .4s, background-position .9s var(--ease); pointer-events:none; } .toolcard:hover::before{ opacity:1; background-position:-40% 0; } .toolcard__ic{ width:54px;height:54px;border-radius:15px; display:grid; place-items:center; background: var(--grad); box-shadow:var(--glow); margin-bottom:1.1rem; } .toolcard__ic svg{ width:26px;height:26px; color:#fff; } .toolcard__tag{ display:inline-block; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.5rem; } .toolcard h3{ font-size:1.45rem; } .toolcard p{ color:var(--ink-2); font-size:.98rem; margin:.6rem 0 1.2rem; } .toolcard__link{ margin-top:auto; display:inline-flex; align-items:center; gap:.4rem; font-weight:600; color:var(--violet-hi); font-size:.92rem; } .toolcard__link svg{ width:16px;height:16px; transition: transform .25s; } .toolcard:hover .toolcard__link svg{ transform: translateX(3px); } .toolcard--soon{ opacity:.92; } .toolcard--soon .toolcard__link{ color:var(--ink-3); } .toolcard__soon{ font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:.2rem .55rem; border-radius:999px; background: color-mix(in oklch, var(--violet) 18%, transparent); color:var(--violet-hi); } .comingsoon{ margin:1.6rem 0 .4rem; } .comingsoon__pill{ display:inline-flex; align-items:center; gap:.5rem; padding:.5rem 1rem; border-radius:999px; border:1px solid var(--line); background:var(--panel); color:var(--ink-2); font-weight:600; font-size:.9rem; } .comingsoon__pill .dotg{ width:8px;height:8px;border-radius:50%;background:var(--grad); box-shadow:0 0 12px 2px oklch(60% 0.22 282 / .6); } @media (max-width:860px){ .tools, .tools--3{ grid-template-columns:1fr; } } /* ============================================================ TOOL DETAIL PAGE (stitch / vertical / travel) ============================================================ */ .tool-hero{ padding-top: clamp(2rem,4vw,3.5rem); padding-bottom: clamp(2rem,4vw,3rem); } .tool-hero__grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,4vw,3.5rem); align-items:center; } .tool-hero h1{ font-size: clamp(2.4rem,6vw,4.6rem); line-height:.98; } .tool-hero__lead{ color:var(--ink-2); font-size:1.12rem; max-width:44ch; margin:1.3rem 0 2rem; } .tool-badge{ display:inline-flex; align-items:center; gap:.55rem; padding:.5rem 1rem; border-radius:999px; border:1px solid var(--line); background:var(--bg-2); font-weight:600; font-size:.84rem; margin-bottom:1.3rem; } .tool-badge .swatch{ width:18px;height:18px;border-radius:6px; background:var(--grad); } .tool-visual{ border-radius:var(--radius-lg); border:1px solid var(--line); background:var(--bg-2); box-shadow:var(--shadow); overflow:hidden; } .tool-visual__screen{ aspect-ratio:16/11; position:relative; display:grid; place-items:center; background: radial-gradient(circle at 70% 25%, oklch(45% .15 280 / .5), transparent 55%), radial-gradient(circle at 20% 80%, oklch(45% .15 282 / .45), transparent 55%), oklch(13% .04 280); } .tool-steps{ display:grid; grid-template-columns: repeat(3,1fr); gap:1.2rem; } @media (max-width:860px){ .tool-hero__grid{ grid-template-columns:1fr; } .tool-steps{ grid-template-columns:1fr; } } /* stitch demo strip */ .stitch-strip{ display:flex; align-items:center; gap:.5rem; padding:1.2rem; flex-wrap:wrap; justify-content:center; } .stitch-clip{ width:84px;height:60px;border-radius:9px; border:1px solid var(--line); background: linear-gradient(120deg, oklch(30% .08 280), oklch(28% .08 282)); position:relative; } .stitch-plus{ color:var(--violet-hi); font-weight:800; font-size:1.2rem; } .stitch-eq{ color:var(--ink-3); font-weight:800; } .stitch-out{ width:120px;height:60px;border-radius:9px; border:1px solid transparent; background: var(--grad); display:grid; place-items:center; color:#fff; font-weight:700; font-size:.8rem; } /* vertical rotator demo */ .rot-demo{ display:flex; align-items:center; justify-content:center; gap:1.4rem; padding:1.4rem; } .rot-land{ width:150px;height:84px;border-radius:10px; border:1px solid var(--line); background: linear-gradient(120deg, oklch(30% .08 280), oklch(28% .08 282)); } .rot-arrow{ color:var(--violet-hi); } .rot-port{ width:64px;height:114px;border-radius:10px; border:1px solid transparent; background: var(--grad); box-shadow:var(--glow); } /* travel cards */ .travel-itin{ display:grid; gap:.7rem; padding:1.2rem; } .titem{ display:flex; gap:.8rem; align-items:flex-start; padding:.8rem; border-radius:12px; background: oklch(26% .06 280 / .45); border:1px solid var(--line-soft); } .titem .tday{ font-family:"Anton"; color:var(--violet-hi); width:46px; flex-shrink:0; } .titem b{ font-size:.94rem; display:block; } .titem small{ color:var(--ink-3); font-size:.82rem; } /* ============================================================ BLOG ============================================================ */ .blog-head{ padding-top: clamp(2rem,4vw,3rem); } .blog-head h1{ font-size: clamp(2.4rem,5.5vw,4rem); } .blog-head p{ color:var(--ink-2); margin-top:.8rem; max-width:54ch; font-size:1.08rem; } .blog-feat{ display:grid; grid-template-columns: 1.1fr .9fr; gap:1.6rem; align-items:stretch; margin:2rem 0; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:var(--bg-2); } .blog-feat__media{ min-height:280px; position:relative; background: radial-gradient(circle at 65% 30%, oklch(45% .15 280 / .55), transparent 55%), radial-gradient(circle at 25% 80%, oklch(45% .15 282 / .45), transparent 55%), oklch(15% .04 280); } .blog-feat__media .tag{ position:absolute; top:1.1rem; left:1.1rem; } .blog-feat__body{ padding: clamp(1.6rem,3vw,2.6rem); display:flex; flex-direction:column; justify-content:center; } .blog-feat__body h2{ font-size: clamp(1.6rem,3vw,2.4rem); margin:.6rem 0 .8rem; } .blog-feat__body p{ color:var(--ink-2); } .blog-meta{ display:flex; gap:.8rem; align-items:center; color:var(--ink-3); font-size:.85rem; margin-top:1.2rem; } .blog-filter{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.6rem; } .blog-filter button{ padding:.5rem .95rem; border-radius:999px; border:1px solid var(--line); background:var(--bg-2); color:var(--ink-2); cursor:pointer; font-family:inherit; font-weight:600; font-size:.85rem; transition:.2s; } .blog-filter button:hover{ color:var(--ink); border-color:var(--violet); } .blog-filter button[aria-pressed="true"]{ background: linear-gradient(120deg,var(--violet),var(--magenta)); border-color:transparent; color:#fff; } .blog-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:1.4rem; } .post{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--bg-2); transition: transform .35s var(--ease), border-color .35s; display:flex; flex-direction:column; } .post:hover{ transform: translateY(-5px); border-color: var(--violet); } .post__media{ aspect-ratio:16/9; position:relative; background: radial-gradient(circle at 60% 35%, oklch(42% .13 280 / .5), transparent 55%), linear-gradient(135deg, oklch(24% .07 280), oklch(22% .07 282)); } .post__media .tag{ position:absolute; top:.8rem; left:.8rem; } .post__body{ padding:1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; flex:1; } .post__body h3{ font-size:1.15rem; margin-bottom:.5rem; } .post__body p{ color:var(--ink-3); font-size:.9rem; flex:1; } .post__meta{ display:flex; gap:.7rem; align-items:center; color:var(--ink-3); font-size:.8rem; margin-top:1rem; } .newsletter{ border:1px solid var(--line); border-radius:var(--radius-lg); padding: clamp(2rem,4vw,3rem); text-align:center; margin-top:2.5rem; background: linear-gradient(120deg, oklch(28% 0.1 280), oklch(26% 0.11 282)); position:relative; overflow:hidden; } .newsletter h2{ font-size: clamp(1.6rem,3.5vw,2.6rem); position:relative; } .newsletter p{ color:var(--ink-2); max-width:46ch; margin:.8rem auto 1.6rem; position:relative; } .newsletter__form{ display:flex; gap:.6rem; max-width:460px; margin:0 auto; position:relative; } .newsletter__form input{ flex:1; min-height:50px; border-radius:13px; border:1px solid var(--line); background: oklch(16% .04 280 / .6); color:var(--ink); padding:0 1rem; font-family:inherit; } .newsletter__form input:focus{ outline:2px solid var(--violet); outline-offset:1px; } @media (max-width:860px){ .blog-grid{ grid-template-columns:1fr 1fr; } .blog-feat{ grid-template-columns:1fr; } } @media (max-width:560px){ .blog-grid{ grid-template-columns:1fr; } .mainmode{ grid-template-columns:1fr; } .newsletter__form{ flex-direction:column; } .aspect-toggle{ grid-template-columns:repeat(2,minmax(0,1fr)); } .aspect-toggle--sm{ flex-direction:column; } } /* small helper: hide drawer AI sub-links group nicely */ .drawer .navdrop__lab{ padding:.8rem 1rem .3rem; } /* ============================================================ ACCOUNT CHIP (nav) — signed-in avatar / signed-out link ============================================================ */ .nav__acct{ display:inline-flex; align-items:center; } .acctchip{ display:inline-flex; align-items:center; gap:.55rem; padding:.35rem .55rem .35rem .4rem; border-radius:999px; border:1px solid var(--line); background: oklch(18% .04 280 / .5); text-decoration:none; transition:.25s; } .acctchip:hover{ border-color: var(--violet); transform: translateY(-1px); } .acctchip__av{ width:34px;height:34px;border-radius:50%; display:grid;place-items:center; font-family:"Bricolage Grotesque"; font-weight:800; font-size:.85rem; color:#fff; background:var(--grad); } .acctchip__tx{ display:flex; flex-direction:column; line-height:1.05; padding-right:.35rem; } .acctchip__tx b{ font-size:.85rem; color:var(--ink); } .acctchip__tx small{ font-size:.7rem; color:var(--ink-3); } .acctchip--out{ padding:.55rem 1rem; font-weight:600; color:var(--ink); } .acctchip{ cursor:pointer; } .acctchip__car{ display:grid; place-items:center; color:var(--ink-3); margin-left:-.1rem; transition: transform .25s; } /* account dropdown menu */ .acctmenu{ position:relative; } .acctmenu.is-open .acctchip__car{ transform: rotate(180deg); } .acctmenu__pop{ position:absolute; top:calc(100% + .55rem); right:0; min-width:248px; z-index:60; background: var(--bg-2); border:1px solid var(--line); border-radius:16px; padding:.5rem; box-shadow: var(--shadow); opacity:0; visibility:hidden; transform: translateY(-6px); transition:.2s; } .acctmenu.is-open .acctmenu__pop{ opacity:1; visibility:visible; transform:none; } .acctmenu__head{ display:flex; align-items:center; gap:.6rem; padding:.55rem .6rem .7rem; border-bottom:1px solid var(--line-soft); margin-bottom:.4rem; } .acctmenu__id{ display:flex; flex-direction:column; line-height:1.2; overflow:hidden; } .acctmenu__id b{ font-size:.9rem; color:var(--ink); } .acctmenu__id small{ font-size:.74rem; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .acctmenu__pop a{ display:flex; align-items:center; gap:.65rem; padding:.6rem .6rem; border-radius:10px; color:var(--ink-2); font-size:.9rem; text-decoration:none; transition:.18s; } .acctmenu__pop a svg{ width:17px; height:17px; flex-shrink:0; color:var(--ink-3); } .acctmenu__pop a:hover{ background: oklch(60% .18 290 / .14); color:var(--ink); } .acctmenu__pop a:hover svg{ color:var(--violet); } .acctmenu__sep{ height:1px; background:var(--line-soft); margin:.4rem .3rem; } .acctmenu__out{ color: oklch(70% .17 18) !important; } .acctmenu__out:hover{ background: oklch(55% .2 18 / .14) !important; } .acctmenu__out svg{ color: oklch(70% .17 18) !important; } @media (max-width:860px){ .nav__acct{ display:none; } } /* ============================================================ AUTH PAGE (login / sign in) ============================================================ */ .auth{ min-height: calc(100vh - 200px); display:grid; place-items:center; padding: clamp(2rem,5vw,4rem) 0; position:relative; } .auth::before{ content:""; position:absolute; left:50%; top:-10%; transform:translateX(-50%); width:min(120%,900px); aspect-ratio:1/1; border-radius:50%; background:var(--arc); filter:blur(var(--arc-blur)); pointer-events:none; z-index:0; } .authcard{ position:relative; z-index:1; width:min(440px,100%); border:1px solid var(--line); border-radius:var(--radius-lg); background: linear-gradient(165deg, var(--bg-3), var(--bg-2)); box-shadow: var(--shadow); padding: clamp(1.6rem,3vw,2.4rem); } .authcard__head{ text-align:center; margin-bottom:1.4rem; } .authcard__head h1{ font-size: clamp(1.7rem,3.5vw,2.3rem); } .authcard__head p{ color:var(--ink-3); margin-top:.4rem; font-size:.92rem; } .authtabs{ display:flex; gap:.35rem; padding:.3rem; border:1px solid var(--line); border-radius:14px; background: oklch(16% .04 280 / .5); margin-bottom:1.4rem; } .authtabs button{ flex:1; min-height:44px; border:0; border-radius:11px; background:transparent; color:var(--ink-2); font-family:inherit; font-weight:600; cursor:pointer; transition:.25s; } .authtabs button[aria-selected="true"]{ background:var(--grad); color:#fff; } .authfield{ margin-bottom:1rem; } .authfield label{ font-size:.82rem; font-weight:600; color:var(--ink-2); display:block; margin-bottom:.45rem; } .authfield input{ width:100%; min-height:50px; border-radius:12px; border:1px solid var(--line); background: oklch(16% .04 280 / .6); color:var(--ink); padding:0 1rem; font-family:inherit; } .authfield input:focus{ outline:2px solid var(--violet); outline-offset:1px; } .authcard .btn{ margin-top:.4rem; } .auth__alt{ text-align:center; color:var(--ink-3); font-size:.85rem; margin-top:1.2rem; } .auth__alt a{ color:var(--ink-2); } .auth__legal{ text-align:center; color:var(--ink-3); font-size:.75rem; margin-top:1rem; max-width:34ch; margin-inline:auto; } .auth__sso{ display:grid; gap:.6rem; margin-bottom:1.2rem; } .ssobtn{ display:flex; align-items:center; justify-content:center; gap:.6rem; min-height:48px; border-radius:12px; border:1px solid var(--line); background: oklch(18% .04 280 / .4); color:var(--ink); font-family:inherit; font-weight:600; cursor:pointer; transition:.25s; } .ssobtn:hover{ border-color:var(--violet); } .auth__or{ display:flex; align-items:center; gap:.8rem; color:var(--ink-3); font-size:.78rem; margin:0 0 1.2rem; } .auth__or::before, .auth__or::after{ content:""; height:1px; flex:1; background:var(--line); } /* ============================================================ PROFILE PAGE ============================================================ */ .profile{ padding: clamp(1.5rem,3vw,2.5rem) 0 4rem; } .pf-head{ display:flex; align-items:center; gap:1.1rem; margin-bottom:1.8rem; } .pf-head__av{ width:70px;height:70px;border-radius:20px; display:grid;place-items:center; font-family:"Bricolage Grotesque"; font-weight:800; font-size:1.7rem; color:#fff; background:var(--grad); box-shadow:var(--glow); flex-shrink:0; } .pf-head__tx h1{ font-size: clamp(1.5rem,3vw,2.1rem); } .pf-head__tx p{ color:var(--ink-3); margin-top:.2rem; } .pf-head__plan{ margin-left:auto; } .planpill{ display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .9rem; border-radius:999px; background:var(--grad-soft); border:1px solid var(--line); font-weight:600; font-size:.85rem; } .pf-layout{ display:grid; grid-template-columns: 230px 1fr; gap: clamp(1.2rem,3vw,2rem); align-items:start; } .pf-tabs{ display:flex; flex-direction:column; gap:.3rem; position:sticky; top:90px; } .pf-tab{ display:flex; align-items:center; gap:.7rem; padding:.8rem 1rem; border-radius:12px; border:1px solid transparent; background:transparent; color:var(--ink-2); font-family:inherit; font-weight:600; cursor:pointer; text-align:left; transition:.25s; } .pf-tab svg{ width:18px;height:18px; flex-shrink:0; } .pf-tab:hover{ background: oklch(18% .04 280 / .5); } .pf-tab.is-on{ background:var(--grad-soft); border-color:var(--line); color:var(--ink); } .pf-tab--danger{ color: var(--ink-3); margin-top:.5rem; } .pf-tab--danger:hover{ color:#fff; background: oklch(40% .14 20 / .4); } .pf-panel{ border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--bg-2); padding: clamp(1.3rem,3vw,2rem); } .pf-panel + .pf-panel{ margin-top:1.2rem; } .pf-report{ scroll-margin-top: 90px; } .pf-panel h2{ font-size: clamp(1.3rem,2.5vw,1.7rem); margin-bottom:.3rem; } .pf-panel__sub{ color:var(--ink-3); margin-bottom:1.6rem; font-size:.92rem; } .pf-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; } .pf-field{ display:flex; flex-direction:column; } .pf-field--full{ grid-column:1 / -1; } .pf-field label{ font-size:.8rem; font-weight:600; color:var(--ink-2); margin-bottom:.45rem; } .pf-field input{ min-height:48px; border-radius:12px; border:1px solid var(--line); background: oklch(16% .04 280 / .6); color:var(--ink); padding:0 1rem; font-family:inherit; } .pf-field input:focus{ outline:2px solid var(--violet); outline-offset:1px; } .pf-field small{ color:var(--ink-3); font-size:.74rem; margin-top:.35rem; } .pf-actions{ margin-top:1.6rem; display:flex; gap:.7rem; flex-wrap:wrap; } .pf-sec{ border-top:1px solid var(--line-soft); margin-top:1.6rem; padding-top:1.4rem; } .pf-sec:first-of-type{ border-top:0; margin-top:0; padding-top:0; } .pf-sec h3{ font-size:1.05rem; margin-bottom:.3rem; } .pf-sec p{ color:var(--ink-3); font-size:.85rem; margin-bottom:1rem; } /* credits */ .pf-credits__big{ font-family:"Bricolage Grotesque"; font-weight:800; font-size:clamp(2.4rem,5vw,3.4rem); letter-spacing:-.02em; } .pf-credits__big small{ font-size:1rem; color:var(--ink-3); font-weight:500; } .pf-meter{ height:12px; border-radius:999px; background: oklch(30% .05 280); overflow:hidden; margin:1rem 0 .5rem; } .pf-meter i{ display:block; height:100%; background:var(--grad); border-radius:999px; transition:width .6s var(--ease); } .pf-credits__row{ display:flex; justify-content:space-between; color:var(--ink-3); font-size:.85rem; } .pf-topup{ display:grid; grid-template-columns: repeat(3,1fr); gap:.7rem; margin:1.3rem 0; } .topup{ border:1px solid var(--line); border-radius:14px; background: oklch(18% .04 280 / .5); padding:1rem; text-align:center; text-decoration:none; transition:.25s; } .topup:hover{ border-color:var(--violet); transform:translateY(-3px); } .topup b{ display:block; font-family:"Bricolage Grotesque"; font-size:1.4rem; } .topup small{ color:var(--ink-3); font-size:.8rem; } @media (max-width:860px){ .pf-layout{ grid-template-columns:1fr; } .pf-tabs{ position:static; flex-direction:row; flex-wrap:wrap; } .pf-tab{ flex:1; justify-content:center; min-width:120px; } .pf-grid{ grid-template-columns:1fr; } .pf-head__plan{ display:none; } .pf-topup{ grid-template-columns:1fr; } } /* ============================================================ CHECKOUT PAGE ============================================================ */ .checkout{ padding: clamp(1.5rem,3vw,2.5rem) 0 4rem; } .co-grid{ display:grid; grid-template-columns: 1.3fr .9fr; gap: clamp(1.4rem,3vw,2.2rem); align-items:start; } .co-main{ border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--bg-2); padding: clamp(1.4rem,3vw,2rem); } .co-main h2{ font-size:1.3rem; margin-bottom:1rem; } .co-plans{ display:grid; gap:.6rem; margin-bottom:1.8rem; } .co-plan{ display:flex; align-items:center; gap:.9rem; padding:1rem 1.1rem; border-radius:14px; border:1px solid var(--line); background: oklch(18% .04 280 / .4); cursor:pointer; font-family:inherit; text-align:left; color:var(--ink); transition:.25s; width:100%; } .co-plan:hover{ border-color:var(--violet); } .co-plan.is-on{ border-color:transparent; background:var(--grad-soft); box-shadow: inset 0 0 0 1.5px var(--violet); } .co-plan__radio{ width:20px;height:20px;border-radius:50%; border:2px solid var(--line); flex-shrink:0; position:relative; } .co-plan.is-on .co-plan__radio{ border-color:var(--violet); } .co-plan.is-on .co-plan__radio::after{ content:""; position:absolute; inset:3px; border-radius:50%; background:var(--grad); } .co-plan__tx{ flex:1; } .co-plan__tx b{ font-size:1rem; } .co-plan__tx small{ display:block; color:var(--ink-3); font-size:.8rem; } .co-plan__price{ font-family:"Bricolage Grotesque"; font-weight:800; font-size:1.2rem; } .co-fields{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; } .co-field{ display:flex; flex-direction:column; } .co-field--full{ grid-column:1/-1; } .co-field label{ font-size:.8rem; font-weight:600; color:var(--ink-2); margin-bottom:.45rem; } .co-field input{ min-height:48px; border-radius:12px; border:1px solid var(--line); background: oklch(16% .04 280 / .6); color:var(--ink); padding:0 1rem; font-family:inherit; } .co-field input:focus{ outline:2px solid var(--violet); outline-offset:1px; } .co-side{ border:1px solid var(--line); border-radius:var(--radius-lg); background: linear-gradient(165deg, var(--bg-3), var(--bg-2)); padding: clamp(1.4rem,3vw,1.8rem); position:sticky; top:90px; } .co-side h3{ font-size:1.1rem; margin-bottom:1rem; } .co-sum{ display:flex; justify-content:space-between; padding:.6rem 0; color:var(--ink-2); font-size:.92rem; border-bottom:1px solid var(--line-soft); } .co-sum--disc{ color: var(--magenta-hi); } .co-total{ display:flex; justify-content:space-between; align-items:baseline; padding-top:1rem; margin-top:.4rem; } .co-total b{ font-family:"Bricolage Grotesque"; font-size:1.8rem; } .co-promo{ margin:1.2rem 0; } .co-promo__form{ display:flex; gap:.5rem; } .co-promo__form input{ flex:1; min-height:46px; border-radius:11px; border:1px solid var(--line); background: oklch(16% .04 280 / .6); color:var(--ink); padding:0 .9rem; font-family:inherit; text-transform:uppercase; } .co-promo__form input:focus{ outline:2px solid var(--violet); outline-offset:1px; } .co-promo__msg{ font-size:.8rem; margin-top:.5rem; min-height:1em; } .co-promo__msg.ok{ color: var(--magenta-hi); } .co-promo__msg.err{ color: oklch(70% .17 25); } .co-promo__hint{ color:var(--ink-3); font-size:.74rem; margin-top:.4rem; } .co-secure{ display:flex; align-items:center; gap:.45rem; color:var(--ink-3); font-size:.78rem; justify-content:center; margin-top:1rem; } .co-secure svg{ width:14px;height:14px; } .co-done{ text-align:center; padding: clamp(2rem,5vw,3.5rem); } .co-done__tick{ width:72px;height:72px;border-radius:50%; margin:0 auto 1.2rem; display:grid;place-items:center; background:var(--grad); box-shadow:var(--glow); } .co-done__tick svg{ width:34px;height:34px;color:#fff; } .co-done h2{ font-size: clamp(1.6rem,3.5vw,2.4rem); } .co-done p{ color:var(--ink-2); max-width:42ch; margin:.7rem auto 1.6rem; } .co-done__cta{ display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; } @media (max-width:860px){ .co-grid{ grid-template-columns:1fr; } .co-side{ position:static; } .co-fields{ grid-template-columns:1fr; } }