/* ╔══════════════════════════════════════════════════════════════════════ ║ BANGERS — cl1pper.com design system ║ Picsart-inspired vibrant gradient + modern card UI. ║ Replaces retro.css / components.css / landing_v2_extras / landing_v3_polish. ║ Variables auto-flip for dark/light via [data-theme="dark"] on . ╚══════════════════════════════════════════════════════════════════════ */ /* ━━━━━ DESIGN TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ :root { /* ── Light (default) surfaces ──────────────────────────────────────── */ --paper: #fafafa; --paper-2: #f4f4f5; --paper-3: #e4e4e7; --ink: #09090b; --ink-2: #52525b; --ink-3: #71717a; --line: #e4e4e7; --line-2: #d4d4d8; /* ── Vibrant accents (same in both themes) ─────────────────────────── */ --pink: #ff3b8e; --pink-2: #ff1a72; --orange: #ff6b35; --purple: #8b5cf6; --blue: #3b82f6; --green: #10b981; --yellow: #fbbf24; --red: #ef4444; /* ── Signature gradient ────────────────────────────────────────────── */ --gradient: linear-gradient(135deg, #ff6b35 0%, #ff3b8e 35%, #8b5cf6 70%, #3b82f6 100%); --gradient-soft: linear-gradient(135deg, #fff5ed 0%, #ffe4f0 40%, #f0e9ff 70%, #e6f0ff 100%); /* ── Shadows ──────────────────────────────────────────────────────── */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 8px 24px -6px rgba(0,0,0,0.10), 0 4px 10px rgba(0,0,0,0.06); --shadow-lg: 0 32px 64px -16px rgba(0,0,0,0.16), 0 12px 28px rgba(0,0,0,0.08); --shadow-pink: 0 16px 40px -8px rgba(255,59,142,0.45); /* ── Radius ───────────────────────────────────────────────────────── */ --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 24px; --r-pill: 100px; /* ── Fonts ────────────────────────────────────────────────────────── */ --display: 'Inter Tight', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; } [data-theme="dark"] { --paper: #09090b; --paper-2: #0f0f12; --paper-3: #15151a; --ink: #fafafa; --ink-2: #a1a1aa; --ink-3: #71717a; --line: rgba(255,255,255,0.06); --line-2: rgba(255,255,255,0.12); --gradient-soft: linear-gradient(135deg, rgba(255,107,53,0.18) 0%, rgba(255,59,142,0.20) 40%, rgba(167,139,250,0.18) 70%, rgba(96,165,250,0.16) 100%); --shadow-sm: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 8px 24px -6px rgba(0,0,0,0.5), 0 4px 10px rgba(0,0,0,0.3); --shadow-lg: 0 32px 64px -16px rgba(0,0,0,0.65), 0 12px 28px rgba(0,0,0,0.4); } /* ━━━━━ RESET + BASE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html, body { background: var(--paper); color: var(--ink); font-family: var(--body); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { min-height: 100vh; } img, video { max-width: 100%; height: auto; display: block; } a { color: inherit; } button { font-family: inherit; } button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; } /* ── Accessibility helpers ───────────────────────────────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -9999px; top: 8px; z-index: 9999; background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: var(--r-sm); text-decoration: none; font-weight: 600; } .skip-link:focus { left: 8px; } /* ━━━━━ TYPOGRAPHY ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* Reset legacy retro.css rules that force uppercase / weird letter-spacing on headings — bangers uses display weight + tight tracking, NOT caps. */ h1, h2, h3, h4, h5, h6 { font-family: var(--display) !important; letter-spacing: -0.025em !important; line-height: 1.05 !important; text-transform: none !important; color: var(--ink); } h1 { font-weight: 900; } h2, h3 { font-weight: 800; } .gradient-text { background: var(--gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ━━━━━ APP NAV (top bar) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .app-nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); padding: 14px 32px; display: flex; align-items: center; justify-content: space-between; } .app-nav-left { display: flex; align-items: center; gap: 36px; } .app-nav-right { display: flex; align-items: center; gap: 12px; } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; } .brand-mark { width: 32px; height: 32px; border-radius: 9px; background: var(--gradient); display: grid; place-items: center; color: white; box-shadow: var(--shadow-pink); flex-shrink: 0; } .brand-wm { font-family: var(--display); font-size: 20px; font-weight: 800; letter-spacing: -0.025em; color: var(--ink); } .brand-wm .one { background: var(--gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .brand-img { display: block; height: 38px; width: auto; image-rendering: pixelated; } .nav-tabs { display: flex; gap: 2px; } .nav-tabs a { font-size: 14px; font-weight: 600; color: var(--ink-2); text-decoration: none; padding: 8px 14px; border-radius: var(--r-sm); transition: all 0.12s; display: inline-flex; align-items: center; gap: 6px; } .nav-tabs a:hover { color: var(--ink); background: var(--paper-2); } .nav-tabs a.active { color: var(--pink); background: linear-gradient(135deg, rgba(255,59,142,0.10), rgba(139,92,246,0.10)); } .nav-tabs a.active::before { content: "●"; font-size: 8px; color: var(--pink); } /* user info chips on the right */ .credit-pill { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, rgba(255,107,53,0.10), rgba(255,59,142,0.10), rgba(139,92,246,0.10)); padding: 7px 14px; border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, var(--pink) 28%, transparent); font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .credit-pill:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--pink) 55%, transparent); box-shadow: 0 4px 14px -4px rgba(255,59,142,0.35); } .credit-pill strong { background: var(--gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 800; font-size: 14px; } .tier-badge { background: var(--gradient) !important; color: white !important; font-size: 11px !important; font-weight: 800 !important; padding: 5px 11px !important; border-radius: var(--r-pill) !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; box-shadow: var(--shadow-pink) !important; /* Reset legacy .taskbar-tier positioning (which absolutely-positioned the badge into the corner). */ position: static !important; transform: none !important; margin: 0 !important; border: 0 !important; text-decoration: none; line-height: 1.5; } .user-chip { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; color: var(--ink); } .user-av { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--orange), var(--pink)); display: grid; place-items: center; color: white; font-weight: 800; font-size: 13px; flex-shrink: 0; } .theme-toggle { width: 32px; height: 32px; border-radius: 50%; background: var(--paper-2); border: 0; display: grid; place-items: center; cursor: pointer; color: var(--ink-2); font-size: 16px; transition: all 0.12s; } .theme-toggle:hover { background: var(--paper-3); color: var(--ink); } [data-theme="dark"] .theme-toggle-sun { display: none; } [data-theme="dark"] .theme-toggle-moon { display: inline; } .theme-toggle-sun { display: inline; } .theme-toggle-moon { display: none; } /* ━━━━━ MOBILE BOTTOM NAV ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .mobile-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--line); padding: 8px 0; justify-content: space-around; padding-bottom: calc(8px + env(safe-area-inset-bottom)); } .mobile-bottom-nav-item { display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; color: var(--ink-3); font-size: 10px; font-weight: 600; letter-spacing: 0; padding: 6px 6px; border-radius: var(--r-md); transition: color 0.12s; white-space: nowrap; min-width: 0; flex: 1; text-align: center; } .mobile-bottom-nav-item svg { width: 22px; height: 22px; stroke: currentColor; } .mobile-bottom-nav-item.active { color: var(--pink); } .mobile-bottom-nav-item.active svg { filter: drop-shadow(0 0 8px rgba(255,59,142,0.45)); } body.with-mobile-nav { padding-bottom: 70px; } @media (max-width: 768px) { .mobile-bottom-nav { display: flex; } .app-nav .nav-tabs { display: none; } .app-nav { padding: 10px 16px; } .app-nav .credit-pill { padding: 5px 10px !important; font-size: 11px !important; } body { padding-bottom: 76px; } /* reserve space for fixed bottom nav on all logged-in pages */ body.with-mobile-nav .desktop-area { padding-bottom: 70px; } } /* ━━━━━ BUTTONS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .btn, .btn-pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--body); font-size: 14px; font-weight: 600; padding: 10px 20px; border: 0; cursor: pointer; text-decoration: none; line-height: 1.2; transition: all 0.15s; } .btn { border-radius: var(--r-md); } .btn-pill { border-radius: var(--r-pill); } .btn-primary, .btn-grad { background: var(--gradient); color: white; box-shadow: var(--shadow-pink); background-size: 200% 200%; animation: gradient-shift 6s ease infinite; } .btn-primary:hover, .btn-grad:hover { transform: translateY(-1px); box-shadow: 0 20px 48px -8px rgba(255,59,142,0.55); } .btn-primary:active, .btn-grad:active { transform: translateY(0); } .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-2); } .btn-ghost:hover { background: var(--paper-2); border-color: var(--line-2); } .btn-dark { background: var(--ink); color: var(--paper); } .btn-dark:hover { background: color-mix(in srgb, var(--ink) 85%, var(--pink)); } .btn-lg { font-size: 16px; padding: 14px 28px; } .btn-sm { font-size: 12px; padding: 8px 14px; } @keyframes gradient-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ━━━━━ INPUT / FORM CONTROLS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .input, input[type="text"], input[type="url"], input[type="email"], input[type="password"], input[type="number"], textarea, select { background: var(--paper); color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 12px 14px; font-family: var(--body); font-size: 15px; width: 100%; transition: all 0.12s; outline: 0; } .input:focus, input:focus, textarea:focus, select:focus { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(255,59,142,0.10); } input::placeholder, textarea::placeholder { color: var(--ink-3); } label.field-label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; } .field-hint { font-size: 12px; color: var(--ink-3); margin-top: 4px; } /* ── toggles ──────────────────────────────────────────────────────── */ .toggle { width: 44px; height: 24px; border-radius: var(--r-pill); background: var(--paper-2); cursor: pointer; position: relative; transition: background 0.15s; flex-shrink: 0; border: 0; } .toggle.on { background: var(--gradient); } .toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: white; border-radius: 50%; transition: transform 0.15s; box-shadow: 0 1px 3px rgba(0,0,0,0.15); } .toggle.on::after { transform: translateX(20px); } /* ━━━━━ CARDS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .card { background: color-mix(in srgb, var(--paper) 96%, var(--ink) 4%); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); } .card-padded { padding: 28px; } /* ── badge / pill / tag ───────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 6px; background: var(--paper-2); color: var(--ink-2); font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: var(--r-pill); letter-spacing: 0.02em; text-transform: uppercase; } .badge-gradient { background: var(--gradient); color: white; box-shadow: var(--shadow-pink); } .badge-pink { background: linear-gradient(135deg, rgba(255,59,142,0.12), rgba(139,92,246,0.12)); color: var(--pink); } .section-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: color-mix(in srgb, var(--paper) 95%, transparent); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 6px 14px; font-size: 13px; font-weight: 700; color: var(--pink); box-shadow: var(--shadow-sm); margin-bottom: 16px; } .section-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gradient); } /* ━━━━━ TOASTS / NOTIFICATIONS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ #toast-container { position: fixed; top: 80px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .toast { background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: var(--r-md); font-size: 14px; font-weight: 600; box-shadow: var(--shadow-lg); transform: translateY(-10px); opacity: 0; transition: all 0.25s; pointer-events: auto; border-left: 4px solid var(--pink); } .toast.is-visible { transform: translateY(0); opacity: 1; } .toast--success { border-left-color: var(--green); } .toast--error { border-left-color: var(--red); } .toast--info { border-left-color: var(--blue); } /* ━━━━━ CLIP CARD (reused everywhere) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .clip-card { position: relative; background: color-mix(in srgb, var(--paper) 96%, var(--ink) 4%); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm), 0 0 0 1px var(--line); transition: all 0.2s; cursor: pointer; text-decoration: none; color: inherit; display: block; } .clip-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .clip-card-thumb { position: relative; aspect-ratio: 9/16; overflow: hidden; background: var(--paper-2); } .clip-card-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.75) 100%); pointer-events: none; } .clip-card-thumb img, .clip-card-thumb video { width: 100%; height: 100%; object-fit: cover; } .clip-card-score { position: absolute; top: 10px; left: 10px; background: var(--gradient); color: white; font-family: var(--display); font-size: 16px; font-weight: 900; letter-spacing: -0.02em; padding: 4px 10px; border-radius: var(--r-pill); box-shadow: var(--shadow-pink); z-index: 2; } .clip-card-time { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.6); color: white; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: var(--r-sm); z-index: 2; backdrop-filter: blur(4px); } .clip-card-meta { position: absolute; bottom: 10px; left: 10px; right: 10px; color: white; z-index: 2; } .clip-card-title { font-family: var(--display); font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; margin-bottom: 3px; } .clip-card-ts { font-size: 10px; color: rgba(255,255,255,0.7); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .clip-card-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.95); color: var(--ink); display: grid; place-items: center; font-size: 16px; backdrop-filter: blur(8px); z-index: 2; opacity: 0; pointer-events: none; transition: opacity 0.2s; } .clip-card:hover .clip-card-play { opacity: 1; } .clip-card-score.s-high { background: linear-gradient(135deg, var(--green), #059669); } .clip-card-score.s-mid { background: linear-gradient(135deg, var(--yellow), var(--orange)); } .clip-card-score.s-low { background: linear-gradient(135deg, var(--ink-3), #52525b); box-shadow: none; } /* ── clip-card states (processing / failed / hero / large) ──────────── */ .clip-card.is-processing, .clip-card.is-failed { cursor: default; } .clip-card.is-processing .clip-card-thumb, .clip-card.is-failed .clip-card-thumb { background: var(--paper-2); display: grid; place-items: center; color: var(--ink-2); } .clip-card.is-processing .clip-card-thumb::after, .clip-card.is-failed .clip-card-thumb::after { background: none; } .clip-progress-box { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; z-index: 2; } .clip-progress-spinner { width: 40px; height: 40px; border-radius: 50%; background: conic-gradient(from 0deg, var(--pink), var(--purple), var(--blue), var(--pink)); -webkit-mask: radial-gradient(farthest-side, transparent 60%, #000 62%); mask: radial-gradient(farthest-side, transparent 60%, #000 62%); animation: spin 1.5s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .clip-progress-stage { font-family: var(--display); font-size: 14px; font-weight: 700; color: var(--ink); text-align: center; } .clip-progress-bar { width: 100%; height: 6px; background: var(--paper-3); border-radius: var(--r-pill); overflow: hidden; } .clip-progress-fill { height: 100%; background: var(--gradient); background-size: 200% 200%; animation: gradient-shift 3s ease infinite; border-radius: var(--r-pill); transition: width 0.4s ease; } .clip-progress-pct { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; font-weight: 700; color: var(--ink-2); letter-spacing: 0.04em; margin-top: -8px; } .clip-failed-tag { font-family: var(--display); font-size: 13px; font-weight: 800; color: var(--red); letter-spacing: 0.08em; text-transform: uppercase; } /* ── tiny floating actions on clip cards (download / delete) ────────── */ .clip-action { position: absolute; width: 32px; height: 32px; border-radius: var(--r-md); background: rgba(255,255,255,0.95); color: var(--ink); border: 0; cursor: pointer; z-index: 3; display: grid; place-items: center; backdrop-filter: blur(8px); box-shadow: var(--shadow-sm); transition: all 0.12s; opacity: 0; } .clip-card:hover .clip-action { opacity: 1; } .clip-action:hover { transform: scale(1.08); } .clip-action svg { width: 14px; height: 14px; } .clip-action.download { top: 10px; right: 52px; } .clip-action.delete { top: 10px; right: 14px; color: var(--red); } /* ── hero clip card (large feature size) ────────────────────────────── */ .clip-card.hero { aspect-ratio: 16/9; } .clip-card.hero .clip-card-thumb { aspect-ratio: 16/9; } .clip-card.hero .clip-card-title { font-size: 24px; line-height: 1.15; } /* ━━━━━ UTILITY LAYOUT HELPERS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .container { max-width: 1320px; margin: 0 auto; padding: 0 32px; } .container-narrow { max-width: 980px; margin: 0 auto; padding: 0 32px; } .stack { display: flex; flex-direction: column; } .row { display: flex; } .grid { display: grid; } .gap-sm { gap: 8px; } .gap-md { gap: 16px; } .gap-lg { gap: 24px; } @media (max-width: 768px) { .container, .container-narrow { padding: 0 16px; } h1 { font-size: 48px !important; } h2 { font-size: 36px !important; } } /* ━━━━━ LEGACY OVERRIDES — soften the retro window-style on pages we haven't migrated yet (account, subscription, generate, etc.) so the transition is less jarring. Each retro page is contained in a `.window` from retro.css; we restyle the chrome to look closer to the bangers card system. Properly fixed when each page is rewritten. ━━━━━ */ .window { background: var(--paper) !important; border: 1px solid var(--line) !important; border-radius: var(--r-xl) !important; box-shadow: var(--shadow-md) !important; overflow: hidden; } .window-title { background: var(--ink) !important; color: var(--paper) !important; font-family: var(--display) !important; font-weight: 700 !important; letter-spacing: 0.02em !important; text-transform: none !important; } /* Generic legacy buttons — coax them toward the bangers palette */ .btn-neon, .btn-pink, .btn-cyan, .btn-win95 { border-radius: var(--r-pill) !important; font-family: var(--body) !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: 0 !important; padding: 10px 20px !important; transition: transform 0.15s, box-shadow 0.15s !important; } .btn-neon, .btn-pink { background: var(--gradient) !important; color: white !important; border: 0 !important; box-shadow: var(--shadow-pink) !important; } .btn-neon:hover, .btn-pink:hover { transform: translateY(-1px) !important; box-shadow: 0 20px 48px -8px rgba(255,59,142,0.55) !important; } .btn-cyan { background: var(--paper-2) !important; color: var(--ink) !important; border: 1px solid var(--line-2) !important; } .btn-win95 { background: var(--ink) !important; color: var(--paper) !important; border: 0 !important; } /* legacy badges keep their color hint but get rounded */ .badge-pink, .badge-cyan, .badge-green, .badge-yellow { border-radius: var(--r-pill) !important; text-transform: none !important; font-family: var(--body) !important; } /* ━━━━━ SHARED ATMOSPHERIC HERO BG (used on landing + auth + dashboards) ━━━━━ */ .atmospheric-bg { position: relative; } .atmospheric-bg::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(circle at 15% 30%, rgba(255,107,53,0.16) 0%, transparent 40%), radial-gradient(circle at 80% 20%, rgba(255,59,142,0.22) 0%, transparent 40%), radial-gradient(circle at 70% 80%, rgba(139,92,246,0.16) 0%, transparent 40%), radial-gradient(circle at 30% 90%, rgba(59,130,246,0.14) 0%, transparent 40%); } [data-theme="dark"] .atmospheric-bg::before { background: radial-gradient(circle at 15% 30%, rgba(255,107,53,0.24) 0%, transparent 38%), radial-gradient(circle at 85% 20%, rgba(255,59,142,0.28) 0%, transparent 40%), radial-gradient(circle at 70% 90%, rgba(167,139,250,0.24) 0%, transparent 40%), radial-gradient(circle at 30% 90%, rgba(96,165,250,0.18) 0%, transparent 40%); filter: blur(60px); } .atmospheric-bg > * { position: relative; z-index: 1; } /* ━━━━━ /generate page (Make a clip) ━━━━━ */ .page-make { max-width: 1200px; margin: 24px auto 80px; padding: 0 24px; } .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; } .page-title { font-family: var(--display); font-size: clamp(32px, 4vw, 48px); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 4px; color: var(--ink); text-transform: none !important; } .page-sub { margin: 0; color: var(--ink-2); font-size: 16px; max-width: 520px; } .page-head-meta { display: flex; gap: 12px; align-items: center; } .btn-ghost { color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 14px; padding: 8px 14px; border-radius: var(--r-pill); border: 1px solid var(--line); background: transparent; transition: background .15s ease, color .15s ease; } .btn-ghost:hover { background: var(--paper-2); color: var(--ink); } .batch-banner[hidden] { display: none; } .batch-banner { display: flex; justify-content: space-between; align-items: center; background: linear-gradient(135deg, rgba(255,107,53,0.12), rgba(255,59,142,0.12)); border: 1px solid rgba(255,59,142,0.25); color: var(--ink); padding: 14px 18px; border-radius: var(--r-md); margin-bottom: 20px; font-size: 14px; } .batch-banner-cancel { background: transparent; border: 1px solid var(--line); color: var(--ink); padding: 6px 14px; border-radius: var(--r-pill); cursor: pointer; font-weight: 600; } .batch-banner-cancel:hover { background: var(--paper-2); } .make-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; } @media (max-width: 960px) { .make-grid { grid-template-columns: 1fr; } } .make-panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow-sm); } .source-tabs { display: flex; gap: 8px; margin-bottom: 24px; padding: 4px; background: var(--paper-2); border-radius: var(--r-pill); } .source-tab { flex: 1; padding: 10px 16px; border: 0; background: transparent; border-radius: var(--r-pill); font-weight: 600; font-size: 14px; color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background .15s ease, color .15s ease, box-shadow .15s ease; } .source-tab:hover { color: var(--ink); } .source-tab.active { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm); } .source-tab-i { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; background: var(--gradient); color: white; border-radius: 999px; font-size: 11px; font-weight: 700; } .field { margin-bottom: 20px; } .field-label { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; font-weight: 700; letter-spacing: 0.01em; color: var(--ink); margin-bottom: 8px; text-transform: none; } .field-readout { font-family: var(--display); font-size: 14px; color: var(--ink); background: var(--paper-2); padding: 2px 10px; border-radius: var(--r-pill); } .field-hint-inline { font-weight: 500; color: var(--ink-2); font-size: 12px; } .field-input { width: 100%; padding: 12px 14px; font-size: 15px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); color: var(--ink); font-family: var(--body); transition: border-color .15s ease, box-shadow .15s ease; } .field-input:focus { outline: 0; border-color: var(--pink); box-shadow: 0 0 0 3px rgba(255,59,142,0.15); } .field-hint { font-size: 13px; color: var(--ink-2); margin-top: 6px; } .field-hint-ok { color: #16a34a; font-weight: 600; } .field-hint a { color: var(--pink); text-decoration: none; font-weight: 600; } .field-hint a:hover { text-decoration: underline; } .time-pick { display: inline-flex; align-items: center; gap: 6px; background: var(--paper-2); padding: 6px 10px; border-radius: var(--r-md); border: 1px solid var(--line); } .time-seg { width: 48px; padding: 6px 4px; text-align: center; font-family: var(--display); font-size: 18px; font-weight: 700; border: 0; background: transparent; color: var(--ink); -moz-appearance: textfield; } .time-seg::-webkit-outer-spin-button, .time-seg::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .time-seg:focus { outline: 0; color: var(--pink); } .time-sep { color: var(--ink-2); font-weight: 700; } .dur-slider { width: 100%; appearance: none; background: transparent; height: 24px; } .dur-slider::-webkit-slider-runnable-track { height: 6px; background: var(--paper-2); border-radius: 999px; border: 1px solid var(--line); } .dur-slider::-moz-range-track { height: 6px; background: var(--paper-2); border-radius: 999px; border: 1px solid var(--line); } .dur-slider::-webkit-slider-thumb { appearance: none; width: 22px; height: 22px; background: var(--gradient); border-radius: 999px; border: 2px solid var(--paper); margin-top: -10px; box-shadow: var(--shadow-sm); cursor: pointer; } .dur-slider::-moz-range-thumb { width: 22px; height: 22px; background: var(--gradient); border-radius: 999px; border: 2px solid var(--paper); box-shadow: var(--shadow-sm); cursor: pointer; } .dur-ticks { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-2); margin-top: 4px; font-family: var(--display); font-weight: 600; letter-spacing: 0.02em; } .style-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border: 0; padding: 0; margin: 0 0 24px; } .style-mode .field-label { grid-column: 1 / -1; } .mode-card { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); transition: border-color .15s ease, box-shadow .15s ease; } .mode-card:hover { border-color: var(--ink-3); } .mode-card input[type="radio"] { margin: 2px 0 0; accent-color: var(--pink); } .mode-card:has(input:checked) { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(255,59,142,0.12); } .mode-title { font-weight: 700; color: var(--ink); font-size: 15px; margin-bottom: 2px; } .mode-sub { font-size: 13px; color: var(--ink-2); line-height: 1.4; } .btn-grad-lg { width: 100%; padding: 16px 24px; font-size: 16px; font-weight: 700; border-radius: var(--r-md); border: 0; cursor: pointer; background: var(--gradient); color: white; box-shadow: 0 8px 24px rgba(255,59,142,0.30); transition: transform .12s ease, box-shadow .12s ease; font-family: var(--body); } .btn-grad-lg:hover { transform: translateY(-1px); box-shadow: 0 12px 32px rgba(255,59,142,0.40); } .btn-grad-lg:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .drop-zone { text-align: center; padding: 32px 24px; background: var(--paper-2); border: 2px dashed var(--line); border-radius: var(--r-md); transition: border-color .15s ease, background .15s ease; } .drop-zone.drag-over { border-color: var(--pink); background: rgba(255,59,142,0.05); } .drop-zone-i { width: 44px; height: 44px; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; background: var(--gradient); color: white; border-radius: 999px; font-size: 18px; font-weight: 700; } .drop-zone-title { font-weight: 700; color: var(--ink); margin-bottom: 4px; } .drop-zone-sub { color: var(--ink-2); font-size: 13px; margin: 6px 0 10px; } .drop-zone-file { color: var(--pink); font-weight: 600; margin-top: 10px; font-size: 13px; } /* ─── aside ─── */ .make-aside { display: flex; flex-direction: column; gap: 16px; } .aside-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 22px; box-shadow: var(--shadow-sm); } .aside-card-h { font-family: var(--display); font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 12px; } .step-list { list-style: none; padding: 0; margin: 0; counter-reset: step; } .step-list li { position: relative; padding: 8px 0 8px 32px; counter-increment: step; color: var(--ink-2); font-size: 14px; line-height: 1.5; border-bottom: 1px solid var(--line); } .step-list li:last-child { border-bottom: 0; } .step-list li::before { content: counter(step); position: absolute; left: 0; top: 8px; width: 22px; height: 22px; border-radius: 999px; background: var(--gradient); color: white; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 12px; font-weight: 800; } .step-list li strong { color: var(--ink); } .aside-card-plan .plan-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink-2); } .aside-card-plan .plan-row:last-of-type { border-bottom: 0; } .aside-card-plan .plan-row strong { color: var(--ink); font-weight: 700; } .plan-cta { width: 100%; justify-content: center; margin-top: 12px; } .aside-card-tip p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; } .aside-card-tip a { color: var(--pink); font-weight: 600; text-decoration: none; } .aside-card-tip a:hover { text-decoration: underline; } .btn-pill-light { background: var(--paper-2); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 10px 18px; font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: background .15s ease, border-color .15s ease; } .btn-pill-light:hover { background: var(--paper-3); border-color: var(--line-2); } .auto-toggle { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 12px; cursor: pointer; font-size: 14px; color: var(--ink); } .auto-toggle input { accent-color: var(--pink); } .auto-toggle:has(input:checked) { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(255,59,142,0.12); background: linear-gradient(135deg, rgba(255,107,53,0.04), rgba(255,59,142,0.04)); } .dur-slider:disabled { opacity: 0.45; cursor: not-allowed; } .dur-slider:disabled::-webkit-slider-thumb { background: var(--ink-3); } .dur-slider:disabled::-moz-range-thumb { background: var(--ink-3); } .coming-soon-pill { display: inline-flex; align-items: center; padding: 2px 10px; background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-pill); font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .field.is-disabled { opacity: 0.55; } .field.is-disabled .field-input { background: var(--paper-2); cursor: not-allowed; } /* ─── nav "coming soon" indicator ─── */ .nav-tab-soon { position: relative; } .nav-soon-dot { display: inline-block; margin-left: 4px; background: var(--gradient); color: white; font-family: var(--display); font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 6px; border-radius: var(--r-pill); vertical-align: middle; } /* ━━━━━ Autopilot coming-soon page ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .ap-soon-frame { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: 32px; } .ap-soon-tape { position: absolute; top: 24px; right: -32px; transform: rotate(15deg); background: var(--gradient); color: white; font-family: var(--display); font-size: 11px; font-weight: 800; letter-spacing: 0.10em; text-transform: uppercase; padding: 6px 36px; box-shadow: 0 6px 16px rgba(255,59,142,0.30); z-index: 2; } .ap-soon-frame > * { opacity: 0.85; pointer-events: none; user-select: none; } .ap-channels-mock { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 20px; } .ap-channel-card { display: flex; align-items: center; gap: 12px; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; } .ap-channel-avatar { width: 40px; height: 40px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: white; font-family: var(--display); font-size: 18px; font-weight: 800; flex-shrink: 0; } .ap-channel-meta { flex: 1; min-width: 0; } .ap-channel-name { font-weight: 700; color: var(--ink); font-size: 14px; } .ap-channel-platform { font-size: 11px; color: var(--ink-2); font-family: var(--display); letter-spacing: 0.02em; } .ap-channel-status { font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; padding: 4px 10px; border-radius: var(--r-pill); } .ap-channel-status-on { background: rgba(16,185,129,0.15); color: #059669; } .ap-channel-status-idle { background: var(--paper-3); color: var(--ink-3); } .ap-channel-add { border: 2px dashed var(--line-2); background: transparent; color: var(--ink-2); border-radius: var(--r-md); padding: 12px; font-weight: 700; font-size: 14px; cursor: not-allowed; } .ap-mock-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; } @media (max-width: 880px) { .ap-mock-grid { grid-template-columns: 1fr; } } .ap-inbox-mock { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 20px; } .ap-inbox-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); } .ap-inbox-item:last-child { border-bottom: 0; } .ap-inbox-thumb { width: 56px; height: 86px; border-radius: 8px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4px; color: white; font-size: 10px; font-family: var(--display); font-weight: 700; opacity: 0.95; flex-shrink: 0; overflow: hidden; background: var(--ink-2, #444); } .ap-inbox-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 8px; } .ap-inbox-body { flex: 1; min-width: 0; } .ap-inbox-title { font-weight: 700; color: var(--ink); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ap-inbox-meta { font-size: 12px; color: var(--ink-2); margin-top: 2px; } .ap-inbox-meta strong { color: var(--pink); font-weight: 800; } .ap-inbox-actions { display: flex; gap: 6px; } .ap-inbox-btn { padding: 6px 12px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; border: 0; cursor: not-allowed; } .ap-inbox-btn.approve { background: var(--gradient); color: white; } .ap-inbox-btn.reject { background: var(--paper); color: var(--ink-2); border: 1px solid var(--line); } .ap-aside-mock { display: flex; flex-direction: column; gap: 16px; } .ap-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .ap-stat { background: var(--paper-2); border-radius: var(--r-md); padding: 12px 14px; } .ap-stat strong { display: block; font-family: var(--display); font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; } .ap-stat span { display: block; font-size: 11px; color: var(--ink-2); margin-top: 2px; } .ap-delivery-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); } .ap-delivery-row:last-child { border-bottom: 0; } .ap-delivery-i { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--paper-2); border-radius: 8px; font-size: 18px; } .ap-delivery-row strong { display: block; font-size: 13px; color: var(--ink); font-weight: 700; } .ap-delivery-row span { display: block; font-size: 12px; color: var(--ink-2); margin-top: 1px; } .ap-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 32px; } .ap-feature { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 22px 20px; box-shadow: var(--shadow-sm); } .ap-feature-i { width: 44px; height: 44px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 12px; } .ap-feature h3 { font-family: var(--display); font-size: 17px; font-weight: 800; letter-spacing: -0.015em; margin: 0 0 4px; color: var(--ink); text-transform: none !important; } .ap-feature p { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.5; } .ap-waitlist { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: center; background: linear-gradient(135deg, var(--ink), color-mix(in srgb, var(--ink) 80%, var(--purple))); color: var(--paper); border-radius: var(--r-lg); padding: 36px 40px; margin-bottom: 32px; } [data-theme="dark"] .ap-waitlist { background: linear-gradient(135deg, var(--paper-2), var(--paper-3)); color: var(--ink); } .ap-waitlist h2 { font-family: var(--display); font-size: 32px; font-weight: 800; letter-spacing: -0.025em; margin: 0 0 6px; text-transform: none !important; color: inherit; } .ap-waitlist p { margin: 0; opacity: 0.85; font-size: 15px; line-height: 1.5; } .ap-waitlist-r { text-align: right; } @media (max-width: 720px) { .ap-waitlist { grid-template-columns: 1fr; padding: 24px; } .ap-waitlist-r { text-align: left; } .ap-waitlist h2 { font-size: 26px; } } /* ─── dark mode ─── */ [data-theme="dark"] .make-panel, [data-theme="dark"] .aside-card { background: var(--paper); border-color: var(--line); } [data-theme="dark"] .source-tabs { background: var(--paper-2); } [data-theme="dark"] .source-tab.active { background: var(--paper); } [data-theme="dark"] .field-input, [data-theme="dark"] .drop-zone, [data-theme="dark"] .time-pick { background: var(--paper-2); } /* ━━━━━ highlight results — bangers theme overlay ━━━━━ */ .hl-results { max-width: 1200px; margin: 24px auto 80px; padding: 0 24px; } .hl-results-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; background: transparent !important; border: 0 !important; padding: 0 !important; } .hl-results-back { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; color: var(--ink-2); text-decoration: none; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--paper); } .hl-results-back:hover { background: var(--paper-2); color: var(--ink); } .hl-results-head-stats { display: flex; flex-direction: column; gap: 4px; align-items: center; } .hl-results-head-count { font-family: var(--display); font-weight: 800; font-size: 18px; color: var(--ink); letter-spacing: -0.01em; } .hl-results-head-meta { font-size: 12px; color: var(--ink-2); letter-spacing: 0.04em; } .hl-results-head-meta strong { color: var(--ink); } .hl-results-head-new { background: var(--gradient); color: white !important; padding: 10px 18px; border-radius: var(--r-pill); font-weight: 700; font-size: 14px; text-decoration: none; box-shadow: 0 6px 20px rgba(255,59,142,0.30); } .hl-results-head-new:hover { transform: translateY(-1px); } .hl-feature { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 24px; box-shadow: var(--shadow-sm); } @media (max-width: 880px) { .hl-feature { grid-template-columns: 1fr; } } .hl-feature-media { position: relative; background: #000; aspect-ratio: 16/9; } .hl-feature-video, .hl-feature-placeholder { width: 100%; height: 100%; object-fit: cover; } .hl-feature-placeholder { display: flex; align-items: center; justify-content: center; color: white; opacity: 0.5; } .hl-feature-score-badge { position: absolute; top: 16px; right: 16px; background: var(--gradient); color: white; border-radius: var(--r-md); padding: 8px 14px; text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,0.3); } .hl-feature-score-num { font-family: var(--display); font-size: 22px; font-weight: 800; line-height: 1; } .hl-feature-score-lbl { font-size: 9px; letter-spacing: 0.12em; opacity: 0.9; } .hl-feature-body { padding: 24px 28px; display: flex; flex-direction: column; gap: 12px; } .hl-feature-tag { font-family: var(--display); font-size: 11px; font-weight: 800; letter-spacing: 0.12em; color: var(--pink); text-transform: uppercase; } .hl-feature-title { font-family: var(--display); font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin: 0; color: var(--ink); text-transform: none !important; } .hl-feature-time { font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .hl-dot { color: var(--ink-3); } .hl-vibe-pill { background: var(--paper-2); border: 1px solid var(--line); padding: 2px 10px; border-radius: var(--r-pill); font-size: 11px; font-weight: 600; color: var(--ink); } .hl-feature-transcript { margin: 4px 0; padding: 12px 14px; background: var(--paper-2); border-left: 3px solid var(--pink); border-radius: 8px; font-style: italic; color: var(--ink-2); font-size: 14px; line-height: 1.5; } .hl-feature-scoreline { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; } .hl-scorebar { display: flex; align-items: center; gap: 10px; } .hl-scorebar-lbl { font-family: var(--display); font-size: 10px; font-weight: 800; letter-spacing: 0.08em; color: var(--ink-2); min-width: 50px; } .hl-scorebar-track { flex: 1; height: 6px; background: var(--paper-2); border-radius: 999px; overflow: hidden; } .hl-scorebar-fill { height: 100%; border-radius: 999px; } .hl-scorebar-val { font-family: var(--display); font-weight: 700; min-width: 32px; text-align: right; color: var(--ink); } .hl-feature-select { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper-2); margin-top: 8px; font-weight: 600; color: var(--ink); } .hl-feature-select input { accent-color: var(--pink); } .hl-feature-select:hover { border-color: var(--pink); } .hl-filters { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 16px; margin-bottom: 16px; } .hl-filters-left { display: flex; align-items: center; gap: 6px; } .hl-filters-lbl { font-family: var(--display); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; color: var(--ink-2); } .hl-filters input[type="number"] { width: 60px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font-family: var(--display); text-align: center; background: var(--paper); } .hl-filters-dash { color: var(--ink-3); } .hl-filters-right { display: flex; gap: 6px; margin-left: auto; } .hl-filters-btn { background: var(--paper-2); border: 1px solid var(--line); padding: 6px 12px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; color: var(--ink); cursor: pointer; } .hl-filters-btn:hover { background: var(--paper-3); } .hl-filters-btn.ghost { background: transparent; } .hl-filters-count { font-size: 12px; color: var(--ink-2); margin-left: 4px; font-family: var(--display); font-weight: 600; } .hl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .hl-card { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; cursor: pointer; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; box-shadow: var(--shadow-sm); } .hl-card:hover { transform: translateY(-2px); border-color: var(--ink-3); } .hl-card.is-selected { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(255,59,142,0.15), var(--shadow-sm); } .hl-card-media { position: relative; aspect-ratio: 16/9; background: #000; } .hl-card-video, .hl-card-placeholder { width: 100%; height: 100%; object-fit: cover; } .hl-card-placeholder { display: flex; align-items: center; justify-content: center; font-size: 28px; color: rgba(255,255,255,0.4); } .hl-card-score { position: absolute; top: 8px; right: 8px; background: var(--gradient); color: white; font-family: var(--display); font-weight: 800; font-size: 14px; padding: 4px 10px; border-radius: var(--r-pill); box-shadow: 0 4px 12px rgba(0,0,0,0.3); } .hl-card-vibe { position: absolute; bottom: 8px; left: 8px; background: rgba(0,0,0,0.7); color: white; backdrop-filter: blur(8px); font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: var(--r-pill); letter-spacing: 0.04em; } .hl-card-body { padding: 12px 14px; } .hl-card-time { font-family: var(--display); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-2); font-weight: 600; } .hl-card-title { font-weight: 700; font-size: 15px; color: var(--ink); margin: 4px 0 6px; line-height: 1.3; } .hl-card-transcript { font-size: 12px; color: var(--ink-2); margin: 0 0 8px; line-height: 1.4; cursor: text; } .hl-card-scores { display: flex; gap: 10px; font-size: 11px; color: var(--ink-2); font-family: var(--display); font-weight: 700; letter-spacing: 0.04em; } .hl-card-toggle { position: absolute; bottom: 8px; right: 8px; background: var(--paper); border: 1px solid var(--line); padding: 4px 10px; border-radius: var(--r-pill); font-size: 11px; font-weight: 700; cursor: pointer; color: var(--ink); letter-spacing: 0.04em; } .hl-card-toggle .hl-card-toggle-on { display: none; } .hl-card.is-selected .hl-card-toggle { background: var(--gradient); color: white; border-color: transparent; } .hl-card.is-selected .hl-card-toggle .hl-card-toggle-on { display: inline; } .hl-card.is-selected .hl-card-toggle .hl-card-toggle-off { display: none; } .hl-action-bar { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--paper); border-radius: var(--r-pill); padding: 12px 16px 12px 24px; display: flex; align-items: center; gap: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); z-index: 50; } .hl-action-bar[hidden] { display: none; } .hl-action-bar-info strong { font-family: var(--display); font-size: 18px; font-weight: 800; background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; margin-right: 4px; } .hl-action-bar .hl-btn { padding: 8px 16px; border-radius: var(--r-pill); font-weight: 700; font-size: 13px; cursor: pointer; border: 0; text-decoration: none; display: inline-flex; align-items: center; } .hl-action-bar .hl-btn-pink { background: var(--gradient); color: white; } .hl-action-bar .hl-btn-ghost { background: transparent; color: var(--paper); border: 1px solid rgba(255,255,255,0.2); } .hl-score-green { background: linear-gradient(135deg, #10b981, #059669) !important; } .hl-score-yellow { background: linear-gradient(135deg, #f59e0b, #d97706) !important; } .hl-score-red { background: linear-gradient(135deg, #ef4444, #dc2626) !important; } .hl-results-failed, .hl-results-empty { max-width: 560px; margin: 80px auto; } .hl-results-failed-card, .hl-results-empty-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 40px 32px; text-align: center; box-shadow: var(--shadow-sm); } .hl-results-failed-tag { font-family: var(--display); font-size: 11px; font-weight: 800; letter-spacing: 0.12em; color: #ef4444; margin-bottom: 12px; } .hl-results-empty-icon { width: 64px; height: 64px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; background: var(--gradient); color: white; font-size: 28px; border-radius: 999px; } .hl-results-failed-card h2, .hl-results-empty-card h2 { font-family: var(--display); margin: 0 0 12px; color: var(--ink); text-transform: none !important; } .hl-results-empty-card p { color: var(--ink-2); margin-bottom: 20px; } .hl-btn-pink { background: var(--gradient) !important; color: white !important; padding: 12px 24px; border-radius: var(--r-pill); font-weight: 700; text-decoration: none; display: inline-block; border: 0; } /* ━━━━━ /creations (clips) — bangers theme ━━━━━ */ .btn-grad-sm { padding: 9px 16px; font-size: 13px; font-weight: 700; background: var(--gradient); color: white !important; border-radius: var(--r-pill); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 6px 20px rgba(255,59,142,0.30); transition: transform .12s ease; } .btn-grad-sm:hover { transform: translateY(-1px); } .creations-tabs-v2 { display: inline-flex; gap: 4px; padding: 4px; background: var(--paper-2); border-radius: var(--r-pill); margin-bottom: 20px; } .creations-tab-v2 { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: var(--r-pill); font-size: 14px; font-weight: 600; color: var(--ink-2); text-decoration: none; transition: background .15s ease, color .15s ease, box-shadow .15s ease; } .creations-tab-v2:hover { color: var(--ink); } .creations-tab-v2.active { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm); } .creations-filters-v2 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; margin-bottom: 20px; box-shadow: var(--shadow-sm); } .filter-search-v2 { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 220px; background: var(--paper-2); border-radius: var(--r-pill); padding: 6px 14px; color: var(--ink-2); } .filter-search-v2 input { flex: 1; border: 0; background: transparent; outline: 0; font-family: var(--body); font-size: 14px; color: var(--ink); } .filter-search-v2 input::placeholder { color: var(--ink-3); } .filter-score-v2, .filter-sort-v2 { display: flex; align-items: center; gap: 6px; } .filter-label-v2 { font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--ink-2); text-transform: uppercase; } .filter-score-v2 input, .filter-sort-v2 select { background: var(--paper-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-family: var(--body); font-size: 13px; color: var(--ink); outline: 0; } .filter-score-v2 input { width: 56px; text-align: center; font-family: var(--display); font-weight: 600; } .filter-dash-v2 { color: var(--ink-3); } .filter-reset-v2 { background: var(--paper-2); border: 1px solid var(--line); padding: 6px 12px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; color: var(--ink); cursor: pointer; } .filter-reset-v2:hover { background: var(--paper-3); } .filter-count-v2 { font-size: 12px; color: var(--ink-2); font-family: var(--display); font-weight: 600; letter-spacing: 0.04em; } .empty-state-v2 { max-width: 520px; margin: 80px auto; text-align: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 48px 32px; box-shadow: var(--shadow-sm); } .empty-state-v2-icon { font-size: 48px; margin-bottom: 12px; } .empty-state-v2-h { font-family: var(--display); font-size: 28px; font-weight: 800; margin: 0 0 8px; color: var(--ink); text-transform: none !important; letter-spacing: -0.02em; } .empty-state-v2 p { color: var(--ink-2); margin: 0 0 20px; font-size: 15px; } .empty-state-v2 p em { color: var(--ink); font-style: normal; font-weight: 600; } .empty-state-v2-cta { display: inline-flex !important; width: auto !important; padding: 14px 28px !important; text-decoration: none; } /* ━━━━━ /subscription (Plans) — bangers theme ━━━━━ */ .cap-banner-v2 { background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(255,59,142,0.12)); border: 1px solid rgba(245,158,11,0.30); color: var(--ink); padding: 14px 18px; border-radius: var(--r-md); margin-bottom: 20px; font-weight: 500; font-size: 14px; } .current-plan-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--paper); border: 1px solid var(--line); padding: 8px 16px; border-radius: var(--r-pill); font-size: 13px; color: var(--ink-2); box-shadow: var(--shadow-sm); } .current-plan-pill strong { font-family: var(--display); font-weight: 800; background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: 0.04em; } .plans-grid-v2 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-bottom: 24px; } @media (max-width: 1100px) { .plans-grid-v2 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .plans-grid-v2 { grid-template-columns: 1fr; } } .plan-card-v2 { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px 24px 24px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 12px; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .plan-card-v2:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,0.08); } .plan-card-v2.is-current { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(255,59,142,0.12), var(--shadow-sm); } .plan-card-v2.is-featured { border-color: transparent; background: linear-gradient(var(--paper), var(--paper)) padding-box, var(--gradient) border-box; border: 2px solid transparent; } .plan-tag-v2 { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--paper); font-family: var(--display); font-size: 10px; font-weight: 800; letter-spacing: 0.10em; padding: 4px 12px; border-radius: var(--r-pill); text-transform: uppercase; } .plan-tag-grad { background: var(--gradient); color: white; } .plan-name-v2 { font-family: var(--display); font-size: 14px; font-weight: 800; letter-spacing: 0.08em; color: var(--ink-2); text-transform: uppercase; } .plan-price-v2 { font-family: var(--display); font-size: 42px; font-weight: 800; color: var(--ink); letter-spacing: -0.03em; line-height: 1; } .plan-price-v2 span { font-size: 14px; font-weight: 600; color: var(--ink-2); letter-spacing: 0; } .plan-blurb-v2 { font-size: 13px; color: var(--ink-2); margin-bottom: 4px; } .plan-features-v2 { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; flex: 1; } .plan-features-v2 li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink); padding: 4px 0; border-bottom: 1px dashed var(--line); } .plan-features-v2 li:last-child { border-bottom: 0; } .feat-v2-yes { width: 22px; height: 22px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--gradient); color: white; border-radius: 999px; font-size: 11px; font-weight: 800; } .feat-v2-no { width: 22px; height: 22px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--paper-2); color: var(--ink-3); border-radius: 999px; font-size: 12px; font-weight: 700; } .feat-v2-val { min-width: 50px; padding: 2px 10px; flex-shrink: 0; background: var(--paper-2); color: var(--ink); border-radius: var(--r-pill); text-align: center; font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } .plan-cta-v2 { margin-top: 12px; } .plan-btn-v2 { width: 100%; justify-content: center; padding: 12px 16px !important; font-size: 14px !important; text-align: center; display: inline-flex !important; } .plan-current-label { display: block; text-align: center; font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--ink-2); padding: 12px; background: var(--paper-2); border-radius: var(--r-pill); text-transform: uppercase; } .plans-footnote { color: var(--ink-2); text-align: center; font-size: 13px; margin: 20px 0; } .current-sub-card { max-width: 480px; margin: 24px auto 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 24px; box-shadow: var(--shadow-sm); } .current-sub-card .plan-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink-2); } .current-sub-card .plan-row:last-of-type { border-bottom: 0; } .current-sub-card .plan-row strong { color: var(--ink); font-weight: 700; } /* ─── free banner + credit table (credit-based pricing page) ─── */ .free-banner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; background: linear-gradient(135deg, #fff5ed 0%, #ffe4f0 50%, #f0e9ff 100%); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px 36px; margin-bottom: 32px; align-items: center; box-shadow: var(--shadow-sm); } [data-theme="dark"] .free-banner { background: linear-gradient(135deg, rgba(255,107,53,0.10), rgba(255,59,142,0.10) 50%, rgba(139,92,246,0.10)); } .free-banner-tag { display: inline-flex; align-items: center; padding: 4px 12px; background: var(--ink); color: var(--paper); font-family: var(--display); font-size: 10px; font-weight: 800; letter-spacing: 0.10em; border-radius: var(--r-pill); text-transform: uppercase; margin-bottom: 12px; } .free-banner h2 { font-family: var(--display); font-size: 32px; font-weight: 800; letter-spacing: -0.025em; margin: 0 0 8px; color: var(--ink); text-transform: none !important; } .free-banner p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; } .free-banner-r { display: flex; gap: 16px; } .free-stat { flex: 1; background: var(--paper); border-radius: var(--r-md); padding: 18px 16px; text-align: center; border: 1px solid var(--line); } .free-stat strong { display: block; font-family: var(--display); font-size: 36px; font-weight: 800; background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -0.04em; line-height: 1; } .free-stat span { display: block; font-size: 12px; color: var(--ink-2); margin-top: 6px; line-height: 1.3; } @media (max-width: 720px) { .free-banner { grid-template-columns: 1fr; padding: 24px; } .free-banner h2 { font-size: 26px; } } .section-h2 { margin: 8px 0 18px; } .section-h2 h2 { font-family: var(--display); font-size: 28px; font-weight: 800; letter-spacing: -0.025em; margin: 0 0 4px; color: var(--ink); text-transform: none !important; } .section-h2 p { margin: 0; color: var(--ink-2); font-size: 14px; } .credit-table-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px 28px; margin-top: 24px; box-shadow: var(--shadow-sm); } .credit-table { margin: 14px 0 8px; } .credit-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); gap: 16px; } .credit-row:last-child { border-bottom: 0; } .credit-row-l strong { display: block; font-size: 15px; color: var(--ink); margin-bottom: 2px; } .credit-row-l span { font-size: 13px; color: var(--ink-2); line-height: 1.4; } .credit-row-l em { color: var(--ink); font-style: normal; font-weight: 600; } .credit-row-vod { background: linear-gradient(90deg, rgba(255,107,53,0.04), rgba(255,59,142,0.04)); margin: 0 -28px; padding: 14px 28px; } .credit-pill-v { display: inline-flex; align-items: center; padding: 6px 14px; background: var(--gradient); color: white; border-radius: var(--r-pill); font-family: var(--display); font-size: 13px; font-weight: 800; letter-spacing: 0.02em; white-space: nowrap; } .credit-footnote { font-size: 13px; color: var(--ink-2); line-height: 1.5; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); } .credit-footnote strong { color: var(--ink); font-weight: 700; } @media (max-width: 720px) { .credit-row { flex-direction: column; align-items: flex-start; gap: 8px; } .credit-row-vod { margin: 0 -20px; padding: 14px 20px; } .credit-table-card { padding: 20px; } } /* ━━━━━ /account — bangers theme ━━━━━ */ .account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } @media (max-width: 800px) { .account-grid { grid-template-columns: 1fr; } } .account-section { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px 26px; box-shadow: var(--shadow-sm); } .account-section-wide { grid-column: 1 / -1; } .account-profile { display: flex; align-items: center; gap: 14px; margin: 14px 0 18px; } .account-avatar { width: 56px; height: 56px; border-radius: 999px; object-fit: cover; flex-shrink: 0; } .account-avatar-fallback { background: var(--gradient); color: white; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 24px; font-weight: 800; } .account-name { font-family: var(--display); font-size: 20px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; } .account-handle { color: var(--pink); font-weight: 600; font-size: 14px; } .account-section .plan-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink-2); } .account-section .plan-row:last-of-type { border-bottom: 0; } .account-section .plan-row strong { color: var(--ink); font-weight: 700; } .notif-form { margin-top: 14px; } .notif-toggle { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; padding: 14px; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-md); font-size: 14px; line-height: 1.5; color: var(--ink); } .notif-toggle input { accent-color: var(--pink); margin-top: 2px; } .notif-toggle:has(input:checked) { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(255,59,142,0.12); } .notif-save { margin-top: 14px; padding: 10px 24px; border-radius: var(--r-pill); border: 0; cursor: pointer; font-weight: 700; font-size: 14px; color: white; background: var(--gradient); box-shadow: 0 6px 20px rgba(255,59,142,0.25); } .notif-save:hover { transform: translateY(-1px); } .payments-table-wrap { margin-top: 14px; overflow-x: auto; } .payments-table { width: 100%; border-collapse: collapse; font-size: 14px; } .payments-table thead th { text-align: left; padding: 10px 12px; font-family: var(--display); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; color: var(--ink-2); text-transform: uppercase; border-bottom: 1px solid var(--line); } .payments-table tbody td { padding: 12px; border-bottom: 1px solid var(--line); color: var(--ink); } .payments-table tbody tr:last-child td { border-bottom: 0; } .payments-date { color: var(--ink-2); font-size: 12px; } .status-pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--r-pill); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: capitalize; } .status-pill-confirmed, .status-pill-completed { background: rgba(16,185,129,0.12); color: #059669; } .status-pill-pending, .status-pill-waiting, .status-pill-confirming { background: rgba(245,158,11,0.12); color: #d97706; } .status-pill-failed, .status-pill-expired, .status-pill-cancelled { background: rgba(239,68,68,0.12); color: #dc2626; } /* ━━━━━ /creations/highlights — bangers theme ━━━━━ */ .hl-list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } .hl-list-card { position: relative; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .hl-list-card:hover { transform: translateY(-2px); border-color: var(--ink-3); box-shadow: 0 12px 28px rgba(0,0,0,0.08); } .hl-list-card.is-processing { opacity: 0.7; } .hl-list-card.is-failed { opacity: 0.55; } .hl-list-thumb { position: relative; aspect-ratio: 16/9; background: #000; overflow: hidden; } .hl-list-thumb img { width: 100%; height: 100%; object-fit: cover; } .hl-list-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--paper-2); color: var(--ink-3); font-size: 32px; } .hl-list-meta { padding: 12px 14px; } .hl-list-title { font-weight: 700; font-size: 14px; color: var(--ink); line-height: 1.3; margin-bottom: 4px; } .hl-list-ts { font-family: var(--display); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-2); font-weight: 600; } .hl-list-card .creations-side-score { position: absolute; top: 8px; right: 8px; background: var(--gradient); color: white; font-family: var(--display); font-weight: 800; font-size: 13px; padding: 4px 10px; border-radius: var(--r-pill); box-shadow: 0 4px 12px rgba(0,0,0,0.3); } .hl-list-card .creations-side-score.green { background: linear-gradient(135deg, #10b981, #059669); } .hl-list-card .creations-side-score.yellow { background: linear-gradient(135deg, #f59e0b, #d97706); } .hl-list-card .creations-side-score.red { background: linear-gradient(135deg, #ef4444, #dc2626); } .hl-list-card .creations-side-multi { position: absolute; top: 8px; left: 8px; background: rgba(0,0,0,0.7); color: white; backdrop-filter: blur(8px); font-family: var(--display); font-weight: 700; font-size: 11px; padding: 3px 9px; border-radius: var(--r-pill); } .hl-list-delete { position: absolute; bottom: 8px; right: 8px; width: 28px; height: 28px; border-radius: 999px; border: 0; background: rgba(0,0,0,0.0); color: var(--ink-3); cursor: pointer; font-size: 18px; line-height: 1; opacity: 0; transition: opacity .15s ease, background .15s ease, color .15s ease; } .hl-list-card:hover .hl-list-delete { opacity: 1; } .hl-list-delete:hover { background: rgba(239,68,68,0.12); color: #dc2626; } .hl-load-more { display: flex; justify-content: center; margin-top: 24px; } .hl-load-more .btn-pill-light { padding: 10px 28px; } /* ━━━━━ MOBILE RESPONSIVE — global polish ━━━━━ */ @media (max-width: 720px) { /* page-make shell used across all redesigned pages */ .page-make { padding: 0 16px; margin-top: 16px; margin-bottom: 48px; } .page-head { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 18px; } .page-head-meta { width: 100%; justify-content: flex-start; flex-wrap: wrap; } .page-title { font-size: 30px !important; } .page-sub { font-size: 14px; } /* two-col layouts collapse */ .make-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 16px; } .make-panel { padding: 20px 18px; } .make-aside { gap: 12px; } .account-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 14px; } .account-section { padding: 18px 18px; } /* form inputs sized for thumbs */ .field-input { font-size: 16px; padding: 12px 14px; } /* 16px prevents iOS zoom */ .time-seg { width: 42px; font-size: 16px; } .btn-grad-lg { padding: 14px 20px; font-size: 15px; } /* style mode cards stack */ .style-mode { grid-template-columns: 1fr; } /* source tabs full width */ .source-tabs { gap: 4px; padding: 3px; } .source-tab { padding: 9px 12px; font-size: 13px; } /* clip cards grid: 2-up on phones, with the cards keeping their 9:16 ratio */ .creations-mag.is-no-hero .creations-side, .creations-side-no-hero { grid-template-columns: repeat(2, 1fr); gap: 10px; } .hl-list-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .recent-clips-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } /* filter bar wraps to two rows */ .creations-filters-v2 { gap: 8px; padding: 8px; } .filter-search-v2 { min-width: 100%; order: -1; } .filter-score-v2, .filter-sort-v2 { font-size: 12px; } .filter-count-v2 { width: 100%; text-align: right; } /* highlight results page */ .hl-results { padding: 0 16px; margin-top: 16px; } .hl-results-head { flex-direction: column; align-items: flex-start; gap: 10px; } .hl-feature { grid-template-columns: 1fr; } .hl-feature-body { padding: 18px; } .hl-feature-title { font-size: 22px; } .hl-grid { grid-template-columns: 1fr; gap: 12px; } /* plans */ .plans-grid-v2 { grid-template-columns: 1fr !important; } .plan-card-v2 { padding: 22px 20px; } .plan-price-v2 { font-size: 36px; } /* action bar (highlights) */ .hl-action-bar { bottom: 12px; padding: 10px 12px 10px 18px; width: calc(100% - 24px); max-width: 420px; flex-direction: row; } .hl-action-bar-info { font-size: 12px; } /* nav: hide tabs, lean on brand + actions */ .nav-tabs { display: none !important; } .app-nav { padding: 10px 14px !important; } .app-nav-right { gap: 6px !important; } .user-chip span { display: none; } .credit-pill { padding: 6px 10px !important; font-size: 11px !important; } .tier-badge { padding: 4px 9px !important; font-size: 11px !important; } } @media (max-width: 480px) { /* even tighter for small phones */ .page-title { font-size: 26px !important; } .stat-card { padding: 16px; } .hl-list-grid { grid-template-columns: 1fr; } }