:root{ --bg: #080c18; --card: #10152b; --text: #eaf0ff; --muted: #9aa6c8; --accent: #8a63ff; --accent-2: #64e7ff; --ring: #2d3b72; --radius: 18px; --shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03); --success: #2ecc71; --panel-bg: #0c1022; /* ── Redesign tokens (2026-08) — see docs/design/2026-08-app-redesign/tokens.css ── */ --ring-soft: rgba(45, 59, 114, .7); --ring-faint: rgba(45, 59, 114, .4); --grad-primary: linear-gradient(90deg, var(--accent), var(--accent-2)); --grad-primary-135: linear-gradient(135deg, var(--accent), var(--accent-2)); --grad-selected: linear-gradient(135deg, rgba(138,99,255,.18), rgba(100,231,255,.08)); --grad-selected-soft: linear-gradient(180deg, rgba(138,99,255,.16), rgba(100,231,255,.05)); --flag-red: #f87171; --flag-red-text: #ffb3b3; --flag-red-bg: rgba(248, 113, 113, .14); --flag-red-line: rgba(248, 113, 113, .8); --flag-amber: #ffa532; --flag-amber-text: #ffd9a8; --flag-amber-bg: rgba(255, 165, 50, .08); --rating-g: linear-gradient(180deg, #d8f5d8, #9fd7a3); --rating-pg: linear-gradient(180deg, #e6f6ff, #b9deef); --rating-pg13: linear-gradient(180deg, #fff1c8, #f3c46a); --rating-r: linear-gradient(180deg, #ffd9d2, #f08e7c); --rating-nc17: linear-gradient(180deg, #ffc9c9, #d9484a); --rating-ink: #0a0d18; --radius-card: 16px; --radius-tile: 12px; --radius-row: 10px; --radius-sm: 8px; --radius-pill: 999px; /* v2 (README.md section 5): the larger glow belongs to the 56px mobile CTA. Its consumer `.cta-primary { box-shadow: var(--shadow-cta) }` (app-shell.css) is UNCONDITIONAL and the desktop .cta-primary override sets only padding/font-size/flex, so this token alone would have enlarged the desktop CTA's glow too -- desktop's CTA is a small button pinned inside a cost card, where v1's subtler shadow is correct. The desktop block therefore carries an explicit `box-shadow: 0 6px 20px rgba(100,231,255,.25)` override; the two must always move together. Same leak shape as --lh-lyrics above. */ --shadow-cta: 0 8px 24px rgba(100,231,255,.28); --glow-active: 0 0 14px rgba(138,99,255,.5); --font: system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif; --font-rating: Georgia, "Times New Roman", serif; --font-mono: monospace; /* v2: 2.05 for the 17px mobile lyrics. The desktop block in app-shell.css overrides .transcribe-body back to 1.9 -- its consumer rule is unconditional, so these two must move together or desktop silently inherits the mobile value. */ --lh-lyrics: 2.05; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 22px; --ease-panel: cubic-bezier(.3, .8, .3, 1); --t-panel: .45s; --t-sheet: .38s; --t-ui: .25s; --hit-min: 44px; /* v2: README.md section 6 specs 22px sheet corners; the bundle's tokens.css still carries v1's 18px. README wins, same reasoning as --shadow-cta above. Mobile-only in effect: the desktop block re-radiuses .sheet with var(--radius-card) when it becomes a centered dialog (app-shell.css:1285), so this never reaches >=1024px. */ --radius-sheet: 22px 22px 0 0; --turbo-accent: #ffd60a; /* Task 11: WCAG-safe substitute for --accent-2 wherever it is used as TEXT or a :focus-visible OUTLINE (never as a decorative background wash/box-shadow -- those stay on the raw --accent-2/ rgba(100,231,255,*) values). Equal to --accent-2 in dark mode (already >=12:1 on every dark surface, measured live); the light override two blocks below is the one that actually does anything -- see that comment for the measured numbers. */ --accent-2-ink: var(--accent-2); /* ── v2 "gold standard mobile" tokens (2026-08-04) ────────────── See docs/design/2026-08-gold-standard-mobile-v2/tokens.css and docs/superpowers/specs/2026-08-04-gold-standard-mobile-v2-design.md. ADDITIVE ONLY. Every v1 token above stays live and is still read by the >=1024px desktop layout, which v2 does not touch. Deliberately NOT taken from the bundle's tokens.css, each for a checked reason rather than a stylistic one: - --fs-row: 15-16px is not a valid CSS value (it is two values -- row titles 15px, rating names 16px). Written literally at the component instead. - --sp-1..5, --hit-min, --t-sheet, --t-ui, --ease-panel and --t-panel already exist above at exactly the values the bundle specifies (merged by v1's Task 1). Re-declaring them here would be a no-op at best and a silent divergence the next time one is edited. - --lh-lyrics stays at 1.9 and is bumped to 2.05 later, by the lyrics task, together with a desktop override -- because `.transcribe-body { line-height: var(--lh-lyrics) }` (app-shell.css:760) is UNCONDITIONAL and the desktop block overrides only font-size/border-top/padding, so changing the token here alone would silently move desktop's line-height too. Verified by reading both rules, not assumed. - --accent-2-ink is absent from the bundle's tokens.css entirely. It stays. It is read in 20 places in app-shell.css and exists because every :focus-visible ring measured 1.30-1.46:1 in light mode against a 3:1 requirement. */ --fs-title: 28px; --fw-title: 800; /* per-step large title, tracking -.02em */ --fs-body: 17px; /* lyrics, list rows, sheet items, CTA */ --fs-label: 13px; /* sub copy, meta, kicker (600, +.02em) */ --fs-legend: 12px; /* legend chips, slider end labels */ --page-pad: 20px; /* single horizontal gutter everywhere on mobile */ --row-h: 60px; /* grouped-list row min-height */ --chip-h: 40px; /* word chips */ --thumb: 28px; /* slider thumb */ --switch-w: 51px; --switch-h: 31px; /* iOS-size toggle */ } /* ── Light mode ──────────────────────────────────────────────────────── */ body.light-mode { --bg: #f0f2fc; --card: #ffffff; --text: #0d1135; --muted: #5c6899; --ring: #cdd3ef; --shadow: 0 4px 24px rgba(80,60,180,.1), inset 0 1px 0 rgba(255,255,255,.9); --panel-bg: #f5f7ff; /* ── Redesign tokens (2026-08) — see docs/design/2026-08-app-redesign/tokens.css ── */ --ring-soft: rgba(205, 211, 239, .9); --ring-faint: rgba(205, 211, 239, .55); --turbo-accent: #d49a00; /* Task 11 contrast audit (real Chromium, computed colors, WCAG 2.1 formula -- not devtools sampling): raw --accent-2 (#64e7ff) used as text or a solid :focus-visible outline measured 1.30-1.46:1 against --card/--bg/--panel-bg in light mode (needs 4.5:1 for text, 3:1 for a focus ring) -- every keyboard focus ring in the app was effectively invisible in light mode, and .help-num/ .shoosh-threshold-value/.ghost-btn-accent/.stems-status.is-running text was near-illegible. #0a6e82 (same teal hue family, darkened) measures 5.28:1 (--bg), 5.89:1 (--card), 5.51:1 (--panel-bg) -- comfortably clears both thresholds everywhere it is used. */ --accent-2-ink: #0a6e82; /* Task 11 (deferred from Task 5): --grad-selected-soft had no light variant, so the SAME low alpha (.16/.05) that reads as a clear lightening wash over dark mode's near-black --card (#10152b) barely tints light mode's white --card (#ffffff) at all -- same numeric alpha, very different perceived brightness delta against each theme's base. Roughly doubled both stops (.16->.28, .05->.12) so the selected Audience tile is visibly distinct from its unselected siblings in light mode too, verified in a live screenshot, not just reasoned about. */ --grad-selected-soft: linear-gradient(180deg, rgba(138,99,255,.28), rgba(100,231,255,.12)); } body.light-mode { background: radial-gradient(1000px 600px at 20% -10%, rgba(138,99,255,.07), transparent 60%), radial-gradient(900px 900px at 120% 20%, rgba(100,231,255,.05), transparent 40%), linear-gradient(180deg, #f0f2fc, #e9edf8 70%, #e5eaf6); } *{box-sizing:border-box} html,body{min-height:100%} body{ margin:0; font-family: system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif; color:var(--text); background: radial-gradient(1000px 600px at 20% -10%, rgba(138,99,255,.18), transparent 60%), radial-gradient(900px 900px at 120% 20%, rgba(100,231,255,.12), transparent 40%), linear-gradient(180deg, #080c18, #060912 70%, #050811); background-attachment: fixed; display:flex; flex-direction:column; align-items:stretch; min-height:100vh; } .wrap{width:min(980px,100%); align-self:center; flex:1 0 auto; padding:28px;} header{ text-align:center; margin-bottom:20px; position:relative; } header::after{ content:''; display:block; width:100px; height:4px; margin:14px auto 0; background: linear-gradient(90deg,var(--accent),var(--accent-2)); border-radius:999px; } h1{ font-size:clamp(40px,6vw,64px); letter-spacing:4px; margin:0; background:linear-gradient(90deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; font-weight:900; text-transform:uppercase; } .tagline{ color:var(--muted); font-size:1.05rem; margin-top:8px; letter-spacing:0.3px; } .card{ background:var(--card); border:1px solid color-mix(in oklab,var(--ring) 60%,#000 40%); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); position:relative; } /* .drop (base/:hover/.is-drag-over/.is-disabled) and its ` .icon`/ `.txt`/`.big`/`.small` child selectors deleted here (Task 4 fix round, Finding 1): app-shell.css now owns `.drop`/`.is-drag-over`/ `.is-disabled` in full for the relocated Upload panel, whose child markup uses `.drop-icon`/`.drop-title`/`.drop-hint` instead of `.icon`/`.txt`/`.big`/`.small`, so those descendant selectors were already dead. The bare `.drop{}` base rule tied with app-shell.css's on specificity (0,1,0 each); app-shell.css declares no `background` for `.drop`, so this old rule's purple gradient background was winning by default (nothing to override it) and tinting the new flat dropzone. `.drop.is-first-visit` + `@keyframes drop-pulse` below are kept -- ux.js still drives that pulse and app-shell.css has no equivalent. */ input[type=file]{display:none} .rows{display:grid;gap:14px;margin-top:20px} /* .row/.row-head(+.title)/.collapsible-body deleted here (Task 13): the collapsible-row UI was replaced wholesale by the panel design. Proof: 0 hits for `.row`/`.row-head` (word-bounded) in index.html/admin.html/app.html and 0 hits in any JS outside app-shell.js. */ .pill{font-size:.75rem;background:rgba(100,231,255,.1);border:1px solid rgba(100,231,255,.25);color:#c7f9ff;padding:4px 8px;border-radius:999px} .progress{position:relative;height:14px;background:#0a0f1f;border-radius:999px;overflow:hidden;border:1px solid #172140} .progress .bar{position:absolute;inset:0;width:0%;background:linear-gradient(90deg,var(--accent),var(--accent-2))} .progress.is-busy .bar{width:40%;animation:indet 1.6s infinite ease-in-out} .progress.is-complete .bar{width:100%;background:linear-gradient(90deg,var(--success),var(--accent-2));box-shadow:0 0 10px var(--success);} .progress.is-error .bar{width:100%;background:linear-gradient(90deg,#ff5e8a,#ff9966);box-shadow:0 0 10px #ff5e8a;} @keyframes indet{0%{left:-40%}50%{left:30%}100%{left:100%}} .hint{color:var(--muted);font-size:.9rem;margin-top:16px} @media(max-width:520px){ body:not([data-page="landing"]) { padding: 16px 14px 88px; } } /* Results section */ .section-title{margin:0 0 10px 0; font-size:1.15rem; letter-spacing:.5px} /* .results deleted here (Task 13): the old .results card was removed from app.html back in commit 19384fe. Proof: 0 hits for `results` (word-bounded, as a class) in index.html/admin.html/app.html; the only remaining references are main.js's/render-stems.js's own `document.querySelector('.results')` calls, which are optional- chained (`?.`) and therefore inert now that the element is gone. */ .muted{color:var(--muted)} .smallprint{font-size:.9rem} /* .stems/.stem(+.is-missing)/.stem-head/.stem-title/.stem-wave-row(+.wave)/ .stem-play-btn(+:hover/:disabled)/.wave deleted here (Task 8): the 6-track stems card moved from #legacyMarkup into app-shell.css's `.stems-card`/`.stems`/`.stem`/`.stem-title`/`.stem-play-btn`/ `.stem .wave` (the `.stem-head`/`.stem-wave-row` sub-wrappers were dropped -- render-stems.js never queries them, only `.stem[aria-labelledby]`, a descendant `a`, `.stem-play-btn` and `.wave` directly). Proof: 0 hits in index.html/admin.html; the only JS hits are render-stems.js's own reads of `.stem-play-btn`/`.wave` (app.html-scoped) and unrelated `.jobs.stems`/prose-text false positives in main.js/polling.js/index.html. */ /* Buttons */ .btn{ appearance:none; border:0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); color:#050a12; font-weight:700; padding:8px 12px; border-radius:999px; cursor:pointer; box-shadow: var(--shadow); transition:opacity .3s ease, transform .2s ease; } .btn:hover{opacity:.85; transform:translateY(-1px)} .btn:focus-visible{ outline:3px solid rgba(122,162,255,.35) } .btn-mini{ text-decoration:none; font-size:.9rem; padding:6px 10px; display:inline-flex; align-items:center; gap:5px } /* #groupTranscript(+.is-collapsed) .collapsible-body/.section-group-head and the bare .transcribe-head deleted here (Task 13): #groupTranscript itself no longer exists anywhere (the collapsible transcript box was replaced by the Lyrics view in Task 6), and .transcribe-head has no element left to match either. Proof: 0 hits for `groupTranscript`/ `transcribe-head` (word-bounded) in index.html/admin.html/app.html and 0 hits in any JS. */ /* .transcribe-body/`.transcribe-body p` deleted here (Task 6): the div moved into app-shell.css's `.lyrics-view .transcribe-body`, which declares a full replacement (flex/overflow/padding-bottom/font-size/ line-height) plus `.transcribe-line` margin for the

segments. Proof: 0 hits in index.html/admin.html; only app.html/app-shell.js/ main.js/ux.js/render-transcript.js/waveform.js reference the class, all app.html-scoped. */ .bad{ background: linear-gradient(90deg, #ff5e8a33, #ffd16633); border-bottom:2px solid #ff5e8a99; border-radius:4px; padding:0 .15em } /* .results.is-pending(+children)/.results-overlay(+.fade-out)/ .overlay-content(+h2/p) deleted here (Task 13): all scoped under `.results`, which was removed from app.html back in commit 19384fe (see the `.results` deletion note above) -- with no `.results` element left, none of these descendant/modifier selectors can ever match. Proof: 0 hits for `results-overlay`/`overlay-content` (word-bounded) in index.html/admin.html/app.html; the only JS hits are main.js's/render-stems.js's own `document.querySelector(...)` calls, all optional-chained and therefore inert. */ /* Word hover + fancy overlay ------------------------------------------------- */ .word { position: relative; cursor: pointer; transition: background 0.2s, color 0.15s ease, text-shadow 0.15s ease; } .word.is-hovered { color: var(--accent-2); text-shadow: 0 0 10px rgba(100,231,255,0.6); } /* Floating tooltip that follows the mouse */ .word-tooltip { position: fixed; z-index: 999; pointer-events: none; padding: 10px 14px; border-radius: 12px; background: radial-gradient(100% 120% at 0% 0%, rgba(138,99,255,0.35), transparent 70%), radial-gradient(120% 120% at 110% 0%, rgba(100,231,255,0.35), transparent 70%), rgba(5, 9, 20, 0.94); border: 1px solid rgba(122,162,255,0.5); box-shadow: 0 16px 40px rgba(0,0,0,0.55); color: var(--text); font-size: 0.84rem; backdrop-filter: blur(8px); opacity: 0; transform: translate3d(0, 4px, 0); transition: opacity 0.15s ease, transform 0.15s ease; max-width: 260px; } .word-tooltip.visible { opacity: 1; transform: translate3d(0, 0, 0); } .word-tooltip-main { font-weight: 600; margin-bottom: 4px; letter-spacing: 0.02em; } .word-tooltip-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--muted); } .word-tooltip-meta span { white-space: nowrap; font-variant-numeric: tabular-nums; } .word-tooltip-label { opacity: 0.7; } /* Translation row (non-English words, issue #12) -------------------------- */ .word-tooltip-translation { margin-top: 4px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.12); white-space: normal; } .word-tooltip-translation .word-tooltip-trans-text { color: var(--text); font-style: italic; white-space: normal; } /* Upload progress block (.uploadProgressWrap, .uploadBar, .uploadMeta, .uploadPct, .uploadLabel, #uploadFileName) deleted here (Task 4 fix round, Finding 1): the panel that used these classes moved into app-shell.css's `.step-panel[data-panel="0"]` and app-shell.css now owns their styling in full (including .uploadLabel/#uploadFileName, ported over rather than left stranded here). Proven unreferenced by index.html/admin.html and every JS module outside app-shell.js/ upload.js before deletion. The old rules were equal-or-higher specificity than app-shell.css's and were silently winning -- .uploadBar's 1px border and .uploadBarFill's `position:absolute` (with no matching `position:relative` on the new flex-row .uploadBar) squeezed the fill's computed height to 1px. BUG FIXED HERE (found during this task's Finding-2 fix round, unrelated to Task 6's own scope): the class list above used to separate uploadBar and uploadMeta with a slash right after an asterisk-ending word, forming the two-character CSS comment terminator by accident. That closed THIS comment early, so everything from uploadMeta onward through this comment block's intended end was parsed as one garbled, invalid selector for whatever rule opened its body next -- which silently dropped the ENTIRE next rule, the bare dark-mode .word.is-bad-word rule a few lines below, from the stylesheet. Confirmed via the live CSSOM (document.styleSheets): that rule was completely absent from parsed rules despite being present, byte for byte, in the served file. Rewritten with commas instead of slashes throughout this comment so the accidental terminator cannot recur -- note for future editors: never place an asterisk directly before a slash anywhere inside a CSS comment, including while describing this bug itself, which is exactly how the first attempt at this fix re-broke the same rule a second time. */ /* .word.is-bad-word (bare, dark-mode shape+colour) deleted here (Task 6, Finding-2 fix round): app-shell.css's `.transcribe-body .word.is-bad-word` now explicitly declares `color: var(--flag-red-text)` (previously omitted, silently relying on THIS rule for colour while owning every other property -- exactly the unaudited-dependency gap the review flagged). Verified the computed colour of a flagged word is byte-for-byte unchanged in both themes before/after this deletion: dark rgb(255,179,179), light rgb(176,16,16) (see task-6-report.md for the full before/after table). Proof this class is app-only: 0 hits in index.html/admin.html; every JS reference outside app-shell.js scopes it to `.transcribe-body .word`. */ /* Words below threshold — exist but not shooshed */ .word.is-minor-bad-word { opacity: 0.45; text-decoration: underline wavy rgba(255,150,80,.5); text-underline-offset: 3px; } /* .section-group(-head)/.row-head(+.row .row-head/.title)/ .collapsible-body(+#groupTranscript variants)/.collapsible-row/ .section-toggle(+:hover/svg/.chevron)/.transcribe-head-actions deleted here (Task 13): the collapse UI (section-group/row-head/ collapsible-row/section-toggle) was replaced wholesale by the panel design, and .transcribe-head-actions belonged to the same removed "Transcribe head revised" header alongside the already-deleted .transcribe-head (see the #groupTranscript deletion note above). Proof: 0 hits for `section-group`/`section-toggle`/`row-head`/ `collapsible-row`/`collapsible-body`/`transcribe-head-actions` (word-bounded) in index.html/admin.html/app.html and 0 hits in any JS outside app-shell.js. */ /* .shoosh-progress/-progress-bar deleted here (Task 7): superseded by app-shell.css's Method-panel block (#shooshMethodWrap relocated there wholesale, this bar moved with it). Proof: 0 hits in index.html/admin.html and 0 hits outside app-shell.css/main.js's read-only jQuery .show()/.hide() calls (state, not style). */ /* .shoosh-slider-wrap/-row/-label/-threshold-value/-track/-track-fill/ -slider/-slider-hints (+ the custom .shoosh-slider-track::after thumb overlay) deleted here (Task 5): superseded by app-shell.css's Audience-panel block, which now owns the Options-view rendering of these classes. Proof: 0 hits in index.html/admin.html and 0 hits outside app-shell.css/main.js's selector reads (main.js only reads these classes/ids to drive state, it does not style them). */ /* .shoosh-method-wrap/-label/-options/-option(+::before/:hover/ .is-selected)/-icon deleted here (Task 7): superseded by app-shell.css's Method-panel block (#shooshMethodWrap relocated there, restyled as a flat 3-column tile grid -- no ::before wash overlay, no wrapping icon div, selection conveyed via background: var(--grad-selected) directly on the button). Proof: 0 hits in index.html/admin.html; the only JS hits are main.js's read-only querySelectorAll/dataset reads and tooltip.js's hover binding (both key off .shoosh-method-option/[data-method], neither styles it -- unaffected by this deletion). .method-tip* (below) is NOT part of this deletion: tooltip.js still creates and positions a #methodTooltip on hover of these same tiles, and has no app-shell.css equivalent. The now-empty "Method options: expand grid for 7 items" comment (which used to sit just above the Finalize button comment, below) is also removed -- it never had a rule under it in this file (the 7-tile grid it referred to was removed along with the two censor methods, commit 30f826a, 2026-06-29) and is doubly moot now the whole block above is gone. */ /* ── Method hover tooltip card ───────────────────────────────────────── */ .method-tip { position: fixed; z-index: 9999; pointer-events: none; width: 240px; background: color-mix(in oklab, var(--card) 85%, black 15%); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border: 1px solid rgba(138,99,255,.4); border-radius: 14px; padding: 12px 14px 13px; box-shadow: 0 12px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(138,99,255,.12); opacity: 0; transform: translateY(4px) scale(.97); transition: opacity .14s ease, transform .14s ease; will-change: opacity, transform; } .method-tip.is-visible { opacity: 1; transform: translateY(0) scale(1); } .method-tip-arrow { position: absolute; left: 50%; transform: translateX(-50%); bottom: -7px; width: 13px; height: 7px; overflow: hidden; } .method-tip-arrow::before { content: ''; position: absolute; width: 10px; height: 10px; background: color-mix(in oklab, var(--card) 85%, black 15%); border: 1px solid rgba(138,99,255,.4); border-radius: 2px; transform: rotate(45deg) translate(-1px, 4px); left: 1.5px; } .method-tip.tip-below .method-tip-arrow { bottom: auto; top: -7px; transform: translateX(-50%) scaleY(-1); } .method-tip-visual { border-radius: 8px; background: rgba(138,99,255,.06); border: 1px solid rgba(138,99,255,.14); margin-bottom: 10px; overflow: hidden; line-height: 0; } .method-tip-title { font-size: .82rem; font-weight: 700; color: var(--text); margin: 0 0 4px; letter-spacing: .01em; } .method-tip-desc { font-size: .73rem; color: var(--muted); line-height: 1.45; margin: 0; } /* Finalize button. NOTE (Task 7): unlike every other class in this file's Method-selector section, .finalize-shoosh-btn is NOT deleted here even though the new Method panel uses it -- grep proved it is shared with admin.html's #inviteSubmitBtn ("Send invite"), so this block stays live for that page. app-shell.css instead adds its own `.finalize-shoosh-btn { display: none; }` scoped to the app shell only (app-shell.css is not loaded by admin.html), which hides the button inside this panel without touching the shared rule below. */ .finalize-shoosh-btn { width: 100%; padding: 13px; font-size: .95rem; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: calc(var(--radius) - 6px); position: relative; overflow: hidden; } .finalize-shoosh-btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.07) 50%, transparent 100%); transform: translateX(-100%); transition: transform .55s ease; } .finalize-shoosh-btn:hover::after { transform: translateX(100%); } .finalize-shoosh-btn:disabled { opacity: .5; cursor: not-allowed; } /* .shoosh-result-wrap/.shoosh-player/.sp-play(+states)/.sp-body/ .sp-waveform(+:hover)/.sp-times/.sp-dl(+:hover) deleted here (Task 8): the result player moved from #legacyMarkup into app-shell.css's identically-named classes (restyled: gradient play button, real waveform canvas instead of a col-resize progress bar, hover/ focus-visible restored per the mandatory pseudo-class audit). Proof: 0 hits in index.html/admin.html/any non-app-shell JS. */ /* .sidebar-btns/.history-btn/.sidebar-new-btn/.sidebar-help-btn (+ the @media(max-width:520px) fixed-bottom-bar variant) deleted here (Task 9): already fully orphaned before this task -- #sideNewSessionBtn/ #historyBtn have carried class="icon-btn" only since Task 2's redesign, never these classes. Proof: 0 hits anywhere in index.html/admin.html/app.html/any JS. .history-backdrop/.history-panel(+.is-open)/.history-panel-head/ .history-panel-title/.history-close(+:hover+svg) deleted here: the #historyPanel/#historyBackdrop aside they styled is replaced by the shared #sheet/#sheetBackdrop bottom sheet (app-shell.css). .help-panel(+.is-open)/.help-body(+scrollbar)/.help-intro/ .help-steps/.help-step(+:hover+icon+body)/.help-chip(+red/amber) deleted the same way -- #helpPanel is gone, replaced by #sheetHelp's plain-text steps list. .history-item(+:hover)/.history-item-info/-name/-date/ .history-delete-btn(+svg+:hover)/.history-empty superseded, not just orphaned -- #historyList's rows (main.js's buildItem()) are unchanged and now styled by app-shell.css's identically-named rules (with :hover restored, see the pseudo-class audit). .history-item-icon(+svg)/.history-item-stage(+dot+.is-working/ .is-error)/.history-item-removing were already dead before this task (buildItem() has not emitted these sub-elements for some time) -- deleted alongside the block they lived in rather than carried forward as unused rules. Proof for all of the above: 0 hits in index.html/admin.html/any non-app-shell JS. */ /* ── Login screen ─────────────────────────────────────────────────── */ .login-screen { position: fixed; inset: 0; background: radial-gradient(900px 600px at 15% -5%, rgba(138,99,255,.22), transparent 60%), radial-gradient(800px 800px at 110% 20%, rgba(100,231,255,.14), transparent 45%), linear-gradient(180deg, #080c18, #060912 70%, #050811); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 28px; transition: opacity .4s ease; } .login-screen-out { opacity: 0; pointer-events: none; } .login-card { background: var(--card); border: 1px solid color-mix(in oklab, var(--ring) 60%, #000 40%); border-radius: var(--radius); padding: 44px 48px 40px; box-shadow: var(--shadow), 0 0 60px rgba(138,99,255,.08), 0 0 80px rgba(100,231,255,.06); width: min(420px, 100%); text-align: center; } .login-logo { margin-bottom: 28px; } .login-logo::after { content: ''; display: block; width: 60px; height: 3px; margin: 16px auto 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 999px; } .login-sub { color: var(--muted); font-size: .95rem; margin: 0 0 20px; line-height: 1.5; } .login-sub strong { color: var(--text); } .login-input { display: block; width: 100%; background: #0a0f1f; border: 1px solid var(--ring); border-radius: calc(var(--radius) - 6px); color: var(--text); font-size: 1rem; font-family: inherit; padding: 12px 16px; outline: none; transition: border-color .2s ease, box-shadow .2s ease; margin-bottom: 12px; } .login-input::placeholder { color: var(--muted); opacity: .7; } .login-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(138,99,255,.15); } .login-code-input { text-align: center; font-size: 2rem; letter-spacing: .35em; font-weight: 700; padding-left: 20px; /* offset letter-spacing */ } .login-btn { width: 100%; padding: 13px; font-size: 1rem; border-radius: calc(var(--radius) - 6px); } .login-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; } .login-back { background: none; border: none; color: var(--muted); font-size: .88rem; font-family: inherit; cursor: pointer; margin-top: 14px; padding: 4px 8px; transition: color .2s ease; } .login-back:hover { color: var(--text); } .login-error { color: #ff5e8a; font-size: .88rem; margin: 14px 0 0; background: rgba(255,94,138,.08); border: 1px solid rgba(255,94,138,.25); border-radius: 10px; padding: 9px 14px; text-align: left; } /* ── User badge (header, shown after sign-in) ─────────────────────── */ .user-badge { position: absolute; top: 0; right: 0; align-items: center; gap: 10px; background: color-mix(in oklab, var(--card) 90%, transparent 10%); border: 1px solid color-mix(in oklab, var(--ring) 60%, #000 40%); border-radius: 999px; padding: 6px 6px 6px 14px; box-shadow: var(--shadow); } .user-email { font-size: .82rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; } .sign-out-btn, .new-session-btn { appearance: none; border: 0; background: rgba(138,99,255,.15); color: var(--muted); font-size: .78rem; font-family: inherit; padding: 5px 12px; border-radius: 999px; cursor: pointer; transition: background .2s ease, color .2s ease; white-space: nowrap; } .sign-out-btn:hover { background: rgba(138,99,255,.3); color: var(--text); } /* .credits-badge(+.is-low)/.credit-icon deleted here (Task 9): the app header's #creditsBadge has carried class="credits-pill" only since Task 2's redesign (app-shell.css); these classes are 0 hits anywhere in index.html/admin.html/app.html/any JS. @keyframes credits-pulse KEPT -- app-shell.css's .credits-pill.is-low still references it by name. */ @keyframes credits-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(138, 99, 255, 0); } 50% { box-shadow: 0 0 8px 2px rgba(138, 99, 255, 0.35); } } /* .buy-credits-btn(+:hover) deleted here (Task 9): #buyCreditsBtn now lives in the Account sheet (app-shell.css's .account-row/ .account-btn, restyled with :hover/:focus-visible restored per the pseudo-class audit). 0 hits anywhere in index.html/ admin.html/any non-app-shell JS -- not shared with admin.html's own #buyCreditsBtn-less header. */ /* ── TURBO shortcut button in header ─────────────────────────────────── */ .header-turbo-btn { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; font-size: 11px; font-weight: 800; letter-spacing: .08em; padding: 3px 10px 3px 8px; border-radius: 20px; color: #050715; background: linear-gradient(135deg, #ffd60a, #64e7ff); border: 1px solid transparent; box-shadow: 0 0 0 1px rgba(255,214,10,.0), 0 2px 10px rgba(255,214,10,.25); transition: transform .15s ease, box-shadow .2s ease, filter .2s ease; white-space: nowrap; } .header-turbo-btn svg { filter: drop-shadow(0 0 3px rgba(255,255,255,.5)); animation: turbo-pulse 1.8s ease-in-out infinite; } .header-turbo-btn:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 4px 16px rgba(255,214,10,.4); } /* Credit cost tag (inline on buttons/rows) */ .credit-cost-tag { display: inline-flex; align-items: center; gap: 3px; font-size: .7rem; font-weight: 700; color: rgba(167,139,250,.75); background: rgba(138,99,255,.12); border: 1px solid rgba(138,99,255,.25); border-radius: 999px; padding: 1px 7px 1px 5px; margin-left: 6px; vertical-align: middle; letter-spacing: .02em; } .credit-cost-tag svg { opacity: .85; } .finalize-shoosh-btn .credit-cost-tag { position: relative; z-index: 1; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); color: rgba(255,255,255,.8); } @media(max-width:520px) { .login-card { padding: 36px 24px 32px; } .user-badge { position: static; display: flex; justify-content: center; margin: 10px auto 0; padding: 5px 5px 5px 10px; gap: 8px; width: fit-content; } .user-email { display: none; } } /* ── Step indicator ───────────────────────────────────────────────────── */ .step-indicator { display: flex; align-items: center; justify-content: center; padding: 4px 16px 24px; max-width: 560px; margin: 0 auto; } .step-item { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 56px; } .step-dot { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(138,99,255,.25); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.2); font-size: .7rem; font-weight: 700; position: relative; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .step-icon-check { display: none; position: absolute; } .step-num { font-size: .68rem; font-weight: 700; } .step-item.is-done .step-dot { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 2px 10px rgba(138,99,255,.45); } .step-item.is-done .step-icon-check { display: block; } .step-item.is-done .step-num { display: none; } .step-item.is-active .step-dot { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px rgba(138,99,255,.14); animation: step-pulse 2s ease-in-out infinite; } @keyframes step-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(138,99,255,.14); } 50% { box-shadow: 0 0 0 7px rgba(138,99,255,.06); } } /* .step-label (bare) + its .step-item.is-done/.is-active color overrides were deleted here (Task 4 fix round, Finding 1): the .step-item horizontal-wizard component they belonged to has zero references anywhere in index.html, admin.html or app.html -- it predates the redesign's .step-chip stepper and was already fully dead. Left in place, the bare `.step-label` selector (0,1,0 specificity) matched ANY element with class "step-label", including the relocated Upload panel's `.processing-step .step-label` (Task 4), forcing uppercase + a faint color onto it that app-shell.css never asked for. See the matching light-mode override removed near `body.light-mode .step-label` below. */ .step-connector { flex: 1; height: 2px; background: rgba(138,99,255,.15); margin: 0 4px; margin-bottom: 22px; border-radius: 1px; position: relative; overflow: hidden; } .step-connector::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); width: 0%; transition: width 0.5s ease; border-radius: 1px; } .step-connector.is-done::after { width: 100%; } /* ── Elapsed time ─────────────────────────────────────────────────────── */ .progress-row { display: flex; align-items: center; gap: 10px; } .progress-row .progress { flex: 1; } .elapsed-time { font-size: .7rem; color: rgba(255,255,255,.3); font-family: monospace; font-variant-numeric: tabular-nums; white-space: nowrap; } /* .word-timeline/.wt-header/.wt-label/.wt-hint/.wt-bar/.wt-track/ .wt-marker(+:hover/.is-excluded/.is-manual+:hover)/.wt-labels/ @keyframes wt-flash/.word.wt-flash deleted here (Task 6): the timeline moved into the Words step-panel (`#wordTimeline`/ `#wordTimelineBar`) and is now fully owned by app-shell.css's Words-panel block (new markup drops the wt-header row entirely; the flash animation is renamed `shell-flash`, scoped under `.transcribe-body .word.wt-flash`, so the old unscoped rule and keyframe are both orphaned, not just outranked). Proof: `wt-*` classes appear only in app.html/style.css/ux.js, all app.html- scoped; `.wt-track { transform: translateY(-50%) }` with no matching declaration in the new rule would otherwise have bled through and mis-positioned the new top:20%/height:60% marker model -- caught by reasoning through the cascade, not just reusing the brief's literal (mostly-empty) `.wt-track {}`. */ /* .transcribe-body .word (bare cursor:pointer) and .transcribe-body .word.is-excluded deleted here (Task 6): both are identical selectors to app-shell.css's replacements, which set cursor/opacity/text-decoration/background/border-bottom-color in full -- the old declarations only ever lost the per-property cascade (same selector, app-shell.css loads after style.css), so deleting removes dead weight, not behavior. */ /* .transcribe-body .word.is-bad-word.is-manual (dark-mode shape: background/border-bottom/color) deleted here (Task 6): identical selector to app-shell.css's replacement, which now owns background/border-bottom/border-radius/padding/color for dark mode. UPDATE (Finding-2 fix round): the corresponding LIGHT-mode override (`body.light-mode .word.is-bad-word(.is-manual)`) was originally kept here on the reasoning that its higher specificity (an extra `body` element) still won in light mode -- true, but it left an unaudited legacy dependency for a property (colour) the app-shell.css rule never declared, exactly the gap a later cleanup applying this task's own "supersede and delete" logic would trip over. Both light-mode overrides are now ALSO deleted (see below) -- app-shell.css declares `color` explicitly for both the dark rule above and its own light-mode pair, so it fully owns the component in both themes. `.wt-marker. is-manual`(+`:hover`) is covered by the wt-marker deletion note above -- same identical-selector supersession, folded into app-shell.css's `.wt-marker.is-manual` + the new `:hover` filter. */ /* .word-count-wrap/.word-count-badge/.word-count-actions/ .wc-action-btn(+:hover) deleted here (Task 6): the wrap is now styled by app-shell.css (a plain inline badge row, no boxed padding/border-bottom); the two action buttons moved out into `.panel-actions .ghost-btn`, so `.wc-action-btn`/ `.word-count-actions` have no matching element left anywhere. `.wcb-count` (the bold inline count span ux.js still generates) is KEPT below -- no equivalent was given a home in app-shell.css and it is still actively rendered. */ .wcb-count { font-size: .92rem; font-weight: 800; color: var(--text); } /* .reshoosh-prompt/.reshoosh-label(+strong)/.reshoosh-btn(+:hover) deleted here (Task 8): the prompt moved from #legacyMarkup into app-shell.css's `.reshoosh-prompt`/`.reshoosh-label`(+`strong`, restored -- see app-shell.css comment); #reshooshBtn itself now carries `.ghost-btn` (its own :hover/:focus-visible already exist, Task 6) instead of the bespoke `.reshoosh-btn` pill. Proof: 0 hits in index.html/admin.html/any non-app-shell JS. */ /* ── Toast notifications ──────────────────────────────────────────────── */ .toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 99999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; align-items: flex-end; } .toast { background: color-mix(in oklab, var(--card) 88%, black 12%); backdrop-filter: blur(12px); border: 1px solid rgba(138,99,255,.35); border-left: 3px solid rgba(138,99,255,.7); border-radius: 10px; padding: 10px 15px; font-size: .82rem; color: var(--text); box-shadow: 0 8px 24px rgba(0,0,0,.5); max-width: 300px; pointer-events: auto; opacity: 0; transform: translateX(14px); transition: opacity .2s ease, transform .2s ease; } .toast.is-visible { opacity: 1; transform: translateX(0); } .toast.toast-success { border-left-color: rgba(80,220,120,.85); } .toast.toast-error { border-left-color: rgba(255,80,100,.85); } .toast.toast-warning { border-left-color: rgba(255,190,50,.85); } .toast.toast-info { border-left-color: rgba(100,231,255,.75); } /* .theme-btn(+:hover)/.theme-bulb-on/-off(+light-mode) deleted here (Task 9): #themeBtn has carried class="icon-btn" only since Task 2's redesign (its bulb icon is a single static , no separate on/off sub-elements) -- 0 hits anywhere. .theme-btn.is-popping svg deleted too, superseded by .icon-btn.is-popping svg (app-shell.css). @keyframes bulb-pop KEPT -- that same app-shell.css rule still references it by name. */ @keyframes bulb-pop { 0% { transform: scale(1); } 40% { transform: scale(1.28) rotate(-8deg); } 70% { transform: scale(.92) rotate(4deg); } 100% { transform: scale(1) rotate(0); } } /* ── Light mode overrides ─────────────────────────────────────────────── */ /* body.light-mode .history-btn(+:hover)/.sidebar-help-btn deleted here (Task 9): base classes already deleted above (dead since Task 2). body.light-mode .history-panel/.history-backdrop/.history-panel-head deleted: #historyPanel/#historyBackdrop no longer exist (replaced by the shared #sheet/#sheetBackdrop). body.light-mode .history-item (+:hover) deleted: these two rules are (0,2,0) specificity and were silently BEATING app-shell.css's new same-named `.history-item` (0,1,0) regardless of file load order -- would have painted the rebuilt #historyList rows with the old dark-navy-tinted wash in light mode instead of the new var(--card)/var(--ring-soft) tokens, which are already theme-aware and need no override. Caught by the mandatory CSSOM/specificity check, not just the class-is-orphaned grep. */ /* Word tooltip */ body.light-mode .word-tooltip { background: radial-gradient(100% 120% at 0% 0%, rgba(138,99,255,.12), transparent 70%), radial-gradient(120% 120% at 110% 0%, rgba(100,231,255,.1), transparent 70%), rgba(255,255,255,.97); border-color: rgba(138,99,255,.25); box-shadow: 0 8px 30px rgba(80,60,180,.15); } /* Method tooltip card */ body.light-mode .method-tip { background: rgba(255,255,255,.97); border-color: rgba(138,99,255,.3); box-shadow: 0 8px 30px rgba(80,60,180,.15); } body.light-mode .method-tip-arrow::before { background: rgba(255,255,255,.97); border-color: rgba(138,99,255,.3); } /* Step indicator */ body.light-mode .step-connector { background: var(--ring); } body.light-mode .step-dot { border-color: var(--ring); color: var(--muted); } body.light-mode .step-item.is-done .step-dot, body.light-mode .step-item.is-active .step-dot { border-color: var(--accent); } /* body.light-mode .step-label + its .step-item variants deleted here (Task 4 fix round, Finding 1) -- same dead .step-item component as the base rule above; this override would otherwise have also overridden the relocated Upload panel's step-label color in light mode. */ /* Status/label pills */ body.light-mode .pill { background: rgba(100,231,255,.15); border-color: rgba(0,160,200,.3); color: #006e99; } /* Method option pills -- light-mode overrides deleted here (Task 7), same reason as the base rule above: superseded, 0 hits proven. */ /* body.light-mode .word.is-bad-word(.is-manual) deleted here (Task 6, Finding-2 fix round): app-shell.css now declares its own `body.light-mode .transcribe-body .word.is-bad-word(.is-manual)` pair with the identical #b01010/#8a5200 values, alongside explicit `color` on the dark-mode rules -- app-shell.css fully owns this component in both themes now, nothing left relying on this file. */ /* body.light-mode .shoosh-player/.sp-times/.sp-dl/.sp-waveform deleted here (Task 8): app-shell.css's replacement player uses theme-aware tokens (--panel-bg, --muted, --text, --ring-soft) throughout, so no light-mode override block is needed -- verified in a real light-mode screenshot, not just reasoned through the cascade. */ /* body.light-mode .wt-bar/.wt-track deleted here (Task 6): both had higher specificity than app-shell.css's new plain `.wt-bar`/ `.wt-track` (an extra `body` element beats nothing) and would have silently reasserted the old rgba(0,0,40,*) background in light mode even after the base rules above were deleted. The new `.wt-bar`/`.wt-track` use `var(--panel-bg)`/`var(--ring-soft)`, already theme-aware tokens, so no replacement override is needed. */ /* Toast */ body.light-mode .toast { background: rgba(255,255,255,.97); color: var(--text); box-shadow: 0 4px 20px rgba(80,60,180,.15); } /* body.light-mode .credits-badge/.credit-icon/.buy-credits-btn(+:hover) deleted here (Task 9): all three base classes were deleted above, see that comment for proof. */ body.light-mode .credit-cost-tag { color: rgba(109,40,217,.75); background: rgba(138,99,255,.08); border-color: rgba(138,99,255,.2); } footer { position: relative; width: 100%; padding-bottom: 48px; /* room for the absolute waveform-footer bar */ flex-shrink: 0; z-index: 500; } /* ── Footer content & nav ─────────────────────────────────────────────── */ .footer-content { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; padding: 20px 32px; max-width: min(980px, 100%); margin: 0 auto; font-size: .78rem; color: var(--muted); border-top: 1px solid rgba(255,255,255,.06); } .footer-content > span { opacity: .8; } .footer-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; } .footer-nav a { color: var(--muted); text-decoration: none; letter-spacing: .02em; padding: 2px 0; border-bottom: 1px solid transparent; transition: color .18s ease, border-color .18s ease; } .footer-nav a:hover { color: var(--text); border-bottom-color: rgba(255,255,255,.25); } body.light-mode .footer-content { border-top-color: rgba(0,0,40,.08); } body.light-mode .footer-nav a:hover { border-bottom-color: rgba(0,0,40,.25); } @media (max-width: 520px) { .footer-content { padding: 16px 18px; justify-content: center; text-align: center; } .footer-nav { justify-content: center; gap: 4px 14px; } } /* ── Waveform footer ──────────────────────────────────────────────────── */ .waveform-footer { position: absolute; width: 100%; height: 40px; bottom: 0; left: 0; z-index: 500; display: flex; align-items: flex-end; gap: 1.5px; padding: 0 0 3px; overflow: hidden; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(8,12,24,.96) 35%); border-top: 1px solid rgba(45,59,114,.6); } /* fade bars at the left and right edges */ .waveform-footer::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, var(--bg) 0%, transparent 6%, transparent 94%, var(--bg) 100%); } .wf-bar { flex: 1; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, var(--accent), var(--accent-2)); position: relative; z-index: 1; will-change: height; align-self: flex-end; opacity: .7; } /* padding-bottom removed — footer is in normal flow, sticky via flex layout */ /* light mode footer */ body.light-mode .waveform-footer { background: linear-gradient(180deg, transparent, rgba(240,242,252,.97) 35%); border-top-color: rgba(205,211,239,.8); } body.light-mode .waveform-footer::before { background: linear-gradient(90deg, var(--bg) 0%, transparent 6%, transparent 94%, var(--bg) 100%); } /* Section headers / cards already use --card, --ring vars — inherit automatically */ /* ── Processing inline steps ──────────────────────────────────────────── */ /* .processing-steps, .processing-step (+ :first-of-type/.is-pending/ .is-error), .processing-step .step-body, .step-label, .step-bar, .step-bar-fill, .step-timer and .step-retry-btn (+ their .is-done/ .is-active/.is-error variants) were deleted here (Task 4 fix round, Finding 1) -- app-shell.css now owns the relocated Upload panel's processing-steps styling in full. `.processing-step .step-body` set `flex-direction: column` with no app-shell.css override for that property, so it silently applied to the new row layout too; deleted alongside the rest rather than left as a stray column-flex bug. `.processing-header`, `.step-emoji` and `.step-error-msg` stay: `.processing-header`/`.step-emoji` are dead (their markup was removed from app.html) but harmless and out of this round's named scope; `.step-error-msg` is still created by progress.js and has NO app-shell.css equivalent, so removing it would have broken the upload-error message entirely. */ .processing-header { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 10px 14px 6px; opacity: .75; } .step-emoji { font-size: 1rem; flex-shrink: 0; } .step-error-msg { font-size: .7rem; color: #f87171; margin-top: 4px; opacity: .85; max-width: 340px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Bad-words error banner ───────────────────────────────────────────── */ .bad-words-error { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; margin-bottom: 12px; background: rgba(248,113,113,.08); border: 1px solid rgba(248,113,113,.25); color: #f87171; font-size: .85rem; } .bad-words-error-msg { flex: 1; } .bad-words-retry-btn { padding: 4px 14px; font-size: .78rem; font-weight: 600; border-radius: 20px; border: 1px solid rgba(248,113,113,.4); background: transparent; color: #f87171; cursor: pointer; transition: background .15s; } .bad-words-retry-btn:hover { background: rgba(248,113,113,.15); } /* ── Drop zone first-visit pulse ─────────────────────────────────────── */ .drop.is-first-visit { animation: drop-pulse 2s ease-in-out 2; } @keyframes drop-pulse { 0%, 100% { border-color: color-mix(in oklab, var(--accent) 55%, #8aa0ff 20%); } 50% { border-color: var(--accent); box-shadow: 0 0 16px rgba(138,99,255,0.2); } } /* .no-bad-words deleted here (Task 8): moved from #legacyMarkup into app-shell.css's plain-text `.no-bad-words` (the party-popper emoji span is gone, per the global no-emoji-in-UI-strings constraint). Proof: 0 hits in index.html/admin.html/any non-app-shell JS. */ /* ── TURBO MODE ─────────────────────────────────────────────────────────── */ body.turbo-mode { --turbo-accent: #ffd60a; --turbo-accent-2: #64e7ff; --turbo-glow: rgba(255, 214, 10, .55); } body.turbo-mode header .tagline { background: linear-gradient(90deg, var(--turbo-accent) 0%, var(--turbo-accent-2) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 700; letter-spacing: .02em; } .turbo-logo-row { display: inline-flex; align-items: center; gap: 14px; position: relative; } /* .turbo-bolt deleted here (Task 13): no element with this class remains in any page (the TURBO-mode lightning-bolt icon markup is gone). Proof: 0 hits for `turbo-bolt` in index.html/admin.html/app.html and 0 hits in any JS. `@keyframes turbo-pulse` is kept -- still used by `.header-turbo-btn svg` elsewhere in this file. */ .turbo-badge { font-size: .68rem; font-weight: 900; letter-spacing: .15em; padding: 4px 8px; border-radius: 6px; background: linear-gradient(135deg, var(--turbo-accent), var(--turbo-accent-2)); color: #050715; align-self: flex-start; margin-top: 4px; box-shadow: 0 2px 8px var(--turbo-glow); } .turbo-badge-header { position: absolute; top: 0; left: 0; margin-top: 0; z-index: 2; } @media (max-width: 720px) { .turbo-badge-header { position: static; display: inline-block; margin: 0 auto 8px; } } @keyframes turbo-pulse { 0%, 100% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 8px var(--turbo-glow)); } 50% { opacity: .85; transform: scale(1.06); filter: drop-shadow(0 0 14px var(--turbo-glow)); } } .mode-switch-link { display: inline-flex; align-items: center; gap: 6px; margin: 12px 0 0; font-size: .8rem; font-weight: 500; color: var(--muted, #9aa6c8); text-decoration: none; padding: 6px 14px 6px 10px; border-radius: 999px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1); transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease; } .mode-switch-link svg { transition: transform .18s ease; } .mode-switch-link:hover { color: var(--text); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); } .mode-switch-link:hover svg { transform: translateX(-2px); } body.light-mode .mode-switch-link { background: rgba(0,0,40,.04); border-color: rgba(0,0,40,.1); color: rgba(0,0,40,.55); } body.light-mode .mode-switch-link:hover { background: rgba(0,0,40,.07); border-color: rgba(0,0,40,.2); color: rgba(0,0,40,.85); } /* TURBO progress bar */ .turbo-progress { margin: 24px auto 16px; max-width: 720px; padding: 14px 18px; background: rgba(8, 12, 24, .6); border: 1px solid rgba(255, 214, 10, .18); border-radius: 14px; box-shadow: 0 4px 24px rgba(255, 214, 10, .04); } .turbo-progress-track { position: relative; height: 10px; background: rgba(255,255,255,.06); border-radius: 999px; overflow: hidden; } .turbo-progress-fill { position: absolute; inset: 0; width: 0%; background: linear-gradient(90deg, var(--turbo-accent) 0%, var(--turbo-accent-2) 100%); border-radius: 999px; transition: width .4s ease; box-shadow: 0 0 12px var(--turbo-glow); } .turbo-progress-shimmer { position: absolute; top: 0; bottom: 0; width: 30%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); animation: turbo-shimmer 1.6s linear infinite; pointer-events: none; } @keyframes turbo-shimmer { 0% { left: -30%; } 100% { left: 100%; } } .turbo-progress-labels { display: flex; justify-content: space-between; margin-top: 10px; font-size: .78rem; color: var(--muted, #9aa6c8); letter-spacing: .04em; text-transform: uppercase; } .turbo-phase.is-active { color: var(--turbo-accent); font-weight: 700; } .turbo-phase.is-done { color: var(--turbo-accent-2); } .turbo-progress-eta { display: inline-block; margin-top: 10px; padding: 3px 10px; border-radius: 999px; background: rgba(255, 214, 10, .08); border: 1px solid rgba(255, 214, 10, .25); color: var(--turbo-accent); font-size: .78rem; font-weight: 600; letter-spacing: .03em; } .turbo-pill { background: linear-gradient(135deg, rgba(255,214,10,.18), rgba(100,231,255,.18)) !important; border-color: rgba(255,214,10,.4) !important; color: var(--turbo-accent) !important; } /* .turbo-finalize-btn(+:hover) deleted here (Task 7): the class was dropped from #finalizeShooshBtn's markup when the button relocated into the new Method panel (app.html) -- 0 hits anywhere in index.html/admin.html/JS. */ /* Cross-mode resume banner (used on standard index.html) */ .turbo-resume-banner { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; margin: 10px 0 0; border-radius: 999px; background: linear-gradient(135deg, rgba(255,214,10,.12), rgba(100,231,255,.12)); border: 1px solid rgba(255,214,10,.4); color: var(--turbo-accent, #ffd60a); font-size: .82rem; font-weight: 600; text-decoration: none; transition: all .15s ease; } .turbo-resume-banner:hover { filter: brightness(1.1); box-shadow: 0 2px 14px rgba(255,214,10,.25); } .turbo-resume-banner svg { width: 14px; height: 14px; color: var(--turbo-accent, #ffd60a); filter: drop-shadow(0 0 4px rgba(255,214,10,.5)); } /* Light mode overrides for TURBO */ body.light-mode.turbo-mode { --turbo-accent: #d49a00; --turbo-accent-2: #2bbcd6; --turbo-glow: rgba(212, 154, 0, .35); } body.light-mode .turbo-progress { background: rgba(255,255,255,.7); border-color: rgba(212,154,0,.25); } /* body.light-mode .turbo-finalize-btn deleted here (Task 7), same reason. */ /* ═══════════════════════════════════════════════════════════════════════════ v1: Landing page, admin page, stems toggle, fun caption, admin badge ═══════════════════════════════════════════════════════════════════════════ */ /* ── Landing page ─────────────────────────────────────────────────────────── */ body[data-page="landing"] { display: block; overflow-x: hidden; } body[data-page="landing"] .toast-container { z-index: 9999; } .landing-nav { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 14px clamp(20px, 4vw, 48px); backdrop-filter: blur(12px); background: rgba(8, 12, 24, .65); border-bottom: 1px solid rgba(255, 255, 255, .04); } body.light-mode .landing-nav { background: rgba(255, 255, 255, .75); border-bottom-color: var(--ring); } .landing-nav-brand { display: inline-flex; align-items: center; height: 56px; } .landing-nav-brand img { display: block; opacity: .95; height: 44px; width: auto; } @media (max-width: 600px) { .landing-nav-brand img { height: 36px; } } .landing-nav-actions { display: flex; align-items: center; gap: 8px; } .landing-nav-link { padding: 8px 14px; color: var(--muted); text-decoration: none; font-size: 14px; border-radius: 8px; transition: color .15s, background .15s; } .landing-nav-link:hover { color: var(--text); background: rgba(255, 255, 255, .04); } body.light-mode .landing-nav-link:hover { background: rgba(80, 60, 180, .05); } .landing-nav-login { padding: 8px 18px; font-size: 14px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border: none; border-radius: 999px; cursor: pointer; font-weight: 600; } .landing-nav-login:hover { filter: brightness(1.1); } .landing-hero { position: relative; text-align: center; padding: clamp(80px, 12vw, 140px) clamp(20px, 4vw, 48px) clamp(80px, 10vw, 120px); overflow: hidden; } .landing-hero-inner { position: relative; z-index: 1; max-width: 920px; margin: 0 auto; } .landing-hero-glow { position: absolute; inset: 0; background: radial-gradient(420px 320px at 50% 0%, rgba(138, 99, 255, .35), transparent 70%), radial-gradient(380px 280px at 80% 60%, rgba(100, 231, 255, .18), transparent 70%); pointer-events: none; z-index: 0; } .landing-eyebrow { display: inline-block; padding: 6px 14px; margin-bottom: 24px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2); background: rgba(100, 231, 255, .08); border: 1px solid rgba(100, 231, 255, .2); border-radius: 999px; } .landing-h1 { font-size: clamp(38px, 6vw, 68px); font-weight: 800; letter-spacing: -.015em; line-height: 1.05; margin: 0 0 22px; } .landing-h1 .grad { background: linear-gradient(120deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .landing-sub { font-size: clamp(16px, 1.5vw, 19px); color: var(--muted); max-width: 640px; margin: 0 auto 36px; line-height: 1.55; } .landing-cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 36px; } .landing-cta-primary { padding: 14px 28px; font-size: 16px; font-weight: 700; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border: none; border-radius: 12px; cursor: pointer; text-decoration: none; box-shadow: 0 6px 24px rgba(138, 99, 255, .35); transition: transform .15s, box-shadow .15s, filter .15s; } .landing-cta-primary:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 10px 32px rgba(138, 99, 255, .45); } .landing-cta-secondary { padding: 14px 28px; font-size: 16px; font-weight: 600; background: rgba(255, 255, 255, .04); color: var(--text); border: 1px solid var(--ring); border-radius: 12px; cursor: pointer; } .landing-cta-secondary:hover { background: rgba(255, 255, 255, .08); } body.light-mode .landing-cta-secondary { background: rgba(80, 60, 180, .05); } body.light-mode .landing-cta-secondary:hover { background: rgba(80, 60, 180, .1); } .landing-trust-row { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; color: var(--muted); font-size: 14px; } .landing-trust-item { white-space: nowrap; } .landing-h2 { font-size: clamp(28px, 3.5vw, 40px); font-weight: 700; text-align: center; margin: 0 0 18px; } .landing-how { padding: clamp(60px, 8vw, 100px) clamp(20px, 4vw, 48px); max-width: 1100px; margin: 0 auto; } .landing-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; margin-top: 36px; } .landing-feature { padding: 28px 26px; background: var(--card); border: 1px solid var(--ring); border-radius: var(--radius); box-shadow: var(--shadow); transition: transform .2s, border-color .2s; } .landing-feature:hover { transform: translateY(-3px); border-color: rgba(138, 99, 255, .4); } .landing-feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 16px; border-radius: 12px; background: linear-gradient(135deg, rgba(138, 99, 255, .15), rgba(100, 231, 255, .1)); color: var(--accent-2); } .landing-feature h3 { margin: 0 0 8px; font-size: 18px; } .landing-feature p { margin: 0; color: var(--muted); line-height: 1.55; font-size: 14px; } .landing-demo { padding: clamp(60px, 8vw, 100px) clamp(20px, 4vw, 48px); max-width: 920px; margin: 0 auto; text-align: center; } .landing-demo-caption { color: var(--muted); margin: 0 0 28px; } .landing-demo-slot { position: relative; aspect-ratio: 16 / 7; width: 100%; border-radius: var(--radius); background: var(--card); border: 1px dashed var(--ring); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; overflow: hidden; } .landing-demo-glow { position: absolute; inset: 0; background: radial-gradient(450px 220px at 50% 50%, rgba(138, 99, 255, .15), transparent 70%); pointer-events: none; } .landing-demo-icon { font-size: 56px; } .landing-demo-text { color: var(--muted); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; } .landing-waitlist { padding: clamp(60px, 8vw, 100px) clamp(20px, 4vw, 48px); max-width: 720px; margin: 0 auto; } .landing-waitlist-card { padding: clamp(28px, 4vw, 48px); background: var(--card); border: 1px solid var(--ring); border-radius: var(--radius); box-shadow: var(--shadow); text-align: center; } .landing-waitlist-card .landing-sub { margin-bottom: 28px; } .waitlist-form { display: flex; flex-direction: column; gap: 14px; text-align: left; } .waitlist-field { display: flex; flex-direction: column; gap: 6px; } .waitlist-label { font-size: 13px; font-weight: 600; color: var(--muted); } .waitlist-optional { font-weight: 400; opacity: .7; } .waitlist-textarea { resize: vertical; min-height: 70px; font-family: inherit; } .waitlist-submit { margin-top: 6px; } .waitlist-message { margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; font-size: 14px; } .waitlist-message.is-success { background: rgba(46, 204, 113, .12); color: #6edc9b; border: 1px solid rgba(46, 204, 113, .25); } .waitlist-message.is-error { background: rgba(255, 80, 80, .12); color: #ff8a8a; border: 1px solid rgba(255, 80, 80, .25); } .waitlist-message.is-warning { background: rgba(255, 180, 80, .12); color: #ffce8a; border: 1px solid rgba(255, 180, 80, .25); } .waitlist-message.is-info { background: rgba(100, 231, 255, .08); color: var(--accent-2); border: 1px solid rgba(100, 231, 255, .2); } .landing-footer { padding: 32px clamp(20px, 4vw, 48px); border-top: 1px solid rgba(255, 255, 255, .04); color: var(--muted); font-size: 13px; } .landing-footer .footer-content { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1100px; margin: 0 auto; } .landing-footer .footer-nav { display: flex; gap: 18px; } .landing-footer .footer-nav a { color: var(--muted); text-decoration: none; } .landing-footer .footer-nav a:hover { color: var(--text); } /* ── Login modal close button (landing page) ───────────────────────────── */ .login-close { position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .06); border: 1px solid var(--ring); border-radius: 50%; color: var(--muted); cursor: pointer; z-index: 1001; transition: color .15s, background .15s; } .login-close:hover { color: var(--text); background: rgba(255, 255, 255, .12); } .login-footnote { margin: 22px 0 0; text-align: center; color: var(--muted); font-size: 13px; } .login-footnote a { color: var(--accent-2); text-decoration: none; } .login-footnote a:hover { text-decoration: underline; } /* ── Cycling fun caption (under turbo progress bar) ─────────────────────── */ .turbo-progress-caption { margin-top: 10px; text-align: center; font-size: 14px; color: var(--muted); opacity: 0; transform: translateY(2px); transition: opacity .25s ease, transform .25s ease; min-height: 18px; font-feature-settings: "ss01" on; } .turbo-progress-caption.is-visible { opacity: 1; transform: translateY(0); } /* .stems-optin-row/-text/-title/-hint/-cost deleted here (Task 4 fix round, Finding 1): superseded by app-shell.css's `.optin-*` classes, and proven unreferenced in index.html, admin.html, app.html and every JS file -- the Upload panel was already using `.optin-*` before this fix round, so these were pure dead weight, not an active bleed. */ /* .bg-stems-status(+.is-running/.is-done/.is-error) deleted here (Task 8): #bgStemsStatus's class renamed to .stems-status (app-shell.css), which ports the same three state colours forward under .is-running/.is-done/ .is-error (the brief's literal CSS only styled a fourth, .is-ready, that bg-jobs.js's setStatusUI() never actually applies -- caught by checking the class against its real producer, not just the brief's snippet). Proof: 0 hits in index.html/admin.html/any non-app-shell JS. */ /* .header-admin-link(+:hover) deleted here (Task 9): Task 8's header deletion kept this rule on the stated assumption it was shared with admin.html, without actually grepping admin.html for it -- this task's own mandatory grep proof (`grep -n "header-admin-link" Frontend/index.html Frontend/admin.html`) found 0 hits in either file; admin.html has no admin-console link of its own (it IS the admin console). The [data-admin-only] link now lives in the Account sheet (app-shell.css's .account-row/.account-link, :hover/:focus-visible restored per the pseudo-class audit). */ /* ── Admin page ──────────────────────────────────────────────────────────── */ .admin-wrap { max-width: 1100px; } .admin-header { position: relative; } .admin-back-link { position: absolute; top: 6px; left: 0; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; color: var(--muted); text-decoration: none; font-size: 13px; border-radius: 8px; transition: color .15s, background .15s; } .admin-back-link:hover { color: var(--text); background: rgba(255, 255, 255, .04); } .admin-badge { display: inline-block; padding: 3px 10px; margin: 0 4px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .12em; border-radius: 999px; } .admin-denied { text-align: center; padding: 48px; } .admin-main { display: flex; flex-direction: column; gap: 22px; } .admin-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } .admin-card-head .section-title { margin: 0; } .invite-form { display: flex; flex-direction: column; gap: 14px; } .invite-row { display: flex; gap: 14px; flex-wrap: wrap; } .invite-field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 240px; } .invite-field-credits { flex: 0 1 140px; } .invite-check { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; } .invite-check input { width: 18px; height: 18px; accent-color: var(--accent-2); } .admin-approx { color: var(--muted); } .admin-cell-actions { white-space: nowrap; } .admin-cell-actions .btn-mini + .btn-mini { margin-left: 6px; } .admin-credits-editor { display: inline-flex; gap: 6px; align-items: center; } .admin-credits-amount { width: 84px; padding: 6px 8px; } /* Admin lists (users + waitlist): cards instead of tables, so nothing ever scrolls sideways. Desktop: email/pill + credits + actions on one line, usage/meta chips wrapping underneath. Phone: actions drop below. */ .admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; margin: 4px 0 14px; } .admin-stat { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--panel-bg); border: 1px solid var(--ring-faint); border-radius: var(--radius-row); } .as-num { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; } .as-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } .admin-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 8px; } .admin-search { flex: 1 1 220px; min-width: 0; } .admin-filter { max-width: 100%; overflow: hidden; } .admin-filter .bench-seg-btn { padding: 8px 12px; } .admin-sort { display: flex; flex-direction: column; gap: 4px; } .admin-sort select { min-height: 40px; } .admin-count { margin: 0 0 8px; } .admin-list { display: flex; flex-direction: column; gap: 8px; } .admin-user { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "head credits actions" "meta meta meta" "usecase usecase usecase"; gap: 6px 14px; align-items: center; padding: 12px 14px; background: var(--panel-bg); border: 1px solid var(--ring-faint); border-radius: var(--radius-row); min-width: 0; } .au-head { grid-area: head; display: flex; align-items: center; gap: 8px; min-width: 0; } .au-email { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .au-name { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .au-credits { grid-area: credits; display: flex; align-items: baseline; gap: 4px; white-space: nowrap; } .au-credits-num { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; } .au-actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; } .au-actions .btn-mini + .btn-mini { margin-left: 0; } .au-meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; } .au-chip { font-size: 12px; padding: 3px 9px; border-radius: var(--radius-pill); background: rgba(255,255,255,.03); border: 1px solid var(--ring-faint); max-width: 100%; overflow-wrap: anywhere; } .au-k { color: var(--muted); font-size: 11px; } .au-by { color: var(--muted); } .au-usecase { grid-area: usecase; margin: 0; color: var(--muted); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; } @media (max-width: 600px) { .admin-user { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head credits" "meta meta" "usecase usecase" "actions actions"; } .au-actions { justify-content: flex-start; } .admin-filter { width: 100%; } .admin-filter .bench-seg-btn { flex: 1; padding: 8px 6px; } /* The live-engine toggle (#engineSeg) was 440px wide: the one thing that made the admin page scroll sideways on a phone. */ .admin-main .bench-seg { width: 100%; } .admin-main .bench-seg-btn { flex: 1; padding: 8px 6px; white-space: normal; } } .invite-label { font-size: 13px; font-weight: 600; color: var(--muted); } .admin-table-wrap { overflow-x: auto; } .admin-table { width: 100%; border-collapse: collapse; font-size: 13px; } .admin-table th, .admin-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--ring); vertical-align: top; } .admin-table th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; } .admin-table tr:last-child td { border-bottom: none; } .admin-table tr:hover td { background: rgba(255, 255, 255, .02); } body.light-mode .admin-table tr:hover td { background: rgba(80, 60, 180, .04); } .admin-cell-num { font-variant-numeric: tabular-nums; } .admin-cell-date { color: var(--muted); white-space: nowrap; } .admin-cell-by { color: var(--muted); font-size: 12px; } .admin-cell-usecase { max-width: 320px; color: var(--muted); font-size: 13px; white-space: pre-wrap; word-break: break-word; } .admin-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .admin-pill-yes { background: rgba(46, 204, 113, .12); color: #6edc9b; border: 1px solid rgba(46, 204, 113, .25); } .admin-pill-no { background: rgba(255, 180, 80, .12); color: #ffce8a; border: 1px solid rgba(255, 180, 80, .25); } .admin-pill-admin { background: linear-gradient(135deg, rgba(138, 99, 255, .25), rgba(100, 231, 255, .2)); color: var(--accent-2); border: 1px solid rgba(138, 99, 255, .35); } /* Free-credits page card (admin, 2026-11-03) */ .admin-inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; } .admin-inline-form .waitlist-field { flex: 0 0 140px; } .admin-inline-form .btn, .admin-inline-form .btn-secondary { height: 44px; } .promo-admin-count { margin: 10px 0 14px; color: var(--muted); } .promo-admin-count strong { color: var(--text); font-size: 18px; } @media (max-width: 600px) { .landing-nav-link { display: none; } .landing-trust-row { flex-direction: column; gap: 8px; } .invite-row { flex-direction: column; } .invite-field-credits { flex: 1; } .landing-footer .footer-content { flex-direction: column; } } /* .stems-optin-row (v1.1 switch variant) and its -icon/-text/-title/-hint/ -cost/-switch/-track/-thumb, plus its light-mode and mobile overrides, deleted here (Task 4 fix round, Finding 1): same dead-code proof as the basic-checkbox variant removed above -- superseded by app-shell.css's `.optin-*` classes, zero references anywhere. */ /* .rating-picker/.rating-card(+:hover/:focus-visible/.is-selected)/ .rating-box(+-wide/::after)/.rating-letter/.rating-label + the per-rating [data-rating="*"] tints + the body.light-mode.rating-card.is-selected override + the @media(max-width:560px) fragment deleted here (Task 5): superseded by app-shell.css's Audience-panel block. Proof: 0 hits in index.html/admin.html; the only other references are main.js selector reads (querySelectorAll('.rating-card'), dataset.rating/threshold), which read state, not style. */ /* ── Landing nav brand — large logo ───────────────────────────────────── */ .landing-nav { padding-top: 8px; padding-bottom: 8px; } .landing-nav-brand { height: 108px; text-decoration: none; transition: opacity .2s ease; } .landing-nav-brand:hover { opacity: .85; } .landing-nav-brand img { height: 100px; width: auto; display: block; } @media (max-width: 600px) { .landing-nav-brand { height: 76px; } .landing-nav-brand img { height: 68px; } } /* ── Landing footer — host the animated waveform ──────────────────────── */ .landing-footer { position: relative; padding-bottom: 56px; /* room for the absolute waveform bar */ } .landing-footer .waveform-footer { /* inherits .waveform-footer base styles (absolute, bottom:0, 40px) */ background: linear-gradient(180deg, transparent, rgba(8, 12, 24, .8) 35%); } /* ═══════════════════════════════════════════════════════════════════════════ Intro overlay — drag-to-silence eye-catcher (landing, first visit only) ═══════════════════════════════════════════════════════════════════════════ */ .intro-overlay { position: fixed; inset: 0; z-index: 5000; background: radial-gradient(900px 600px at 50% 35%, rgba(138, 99, 255, .22), transparent 60%), radial-gradient(800px 500px at 50% 90%, rgba(100, 231, 255, .15), transparent 60%), radial-gradient(circle at 50% 50%, #0c1024 0%, #050811 70%, #03050b 100%); display: flex; align-items: center; justify-content: center; flex-direction: column; user-select: none; -webkit-user-select: none; touch-action: none; opacity: 0; visibility: hidden; transition: opacity .6s ease; cursor: grab; } .intro-overlay.is-visible { opacity: 1; visibility: visible; } .intro-overlay.is-visible:active { cursor: grabbing; } .intro-overlay.is-leaving { opacity: 0; transition: opacity .65s ease; } .intro-stage { position: relative; width: min(1100px, 92vw); text-align: center; padding: 0 24px; } .intro-eyebrow { font-family: "Georgia", "Times New Roman", serif; font-weight: 800; letter-spacing: .65em; font-size: 13px; color: var(--accent-2); opacity: .8; margin-bottom: 12px; padding-left: .65em; animation: intro-eyebrow-in .9s ease both; } .intro-headline { font-size: clamp(22px, 3.4vw, 38px); font-weight: 800; color: var(--text); letter-spacing: -.01em; margin: 0 0 38px; animation: intro-eyebrow-in 1s ease .15s both; } .intro-red { background: linear-gradient(120deg, #ff5d6c, #ff8e9b); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 12px rgba(255, 93, 108, .35); font-style: italic; } .intro-waveform { position: relative; height: 220px; display: flex; align-items: center; justify-content: center; gap: 2px; margin: 0 auto; padding: 0 12px; animation: intro-eyebrow-in 1.1s ease .35s both; } .intro-bar { flex: 1; max-width: 6px; min-width: 1px; height: 12px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, rgba(138, 99, 255, .8), rgba(100, 231, 255, .6)); box-shadow: 0 0 10px rgba(138, 99, 255, .2); transition: height .35s ease, background .35s ease, box-shadow .35s ease, opacity .35s ease; align-self: center; pointer-events: none; } .intro-bar.intro-bar-bad { background: linear-gradient(180deg, #ff4d5e, #ff8a98); box-shadow: 0 0 14px rgba(255, 77, 94, .55), 0 0 26px rgba(255, 77, 94, .25); animation: intro-bar-pulse 1.6s ease-in-out infinite; } @keyframes intro-bar-pulse { 0%, 100% { box-shadow: 0 0 12px rgba(255, 77, 94, .45); transform: scaleY(1); } 50% { box-shadow: 0 0 22px rgba(255, 77, 94, .85), 0 0 36px rgba(255, 77, 94, .35); transform: scaleY(1.06); } } .intro-bar.intro-bar-silenced { background: linear-gradient(180deg, #2ecc71, #64e7ff); box-shadow: 0 0 18px rgba(46, 204, 113, .45); opacity: .8; animation: none; } .intro-hint { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; padding: 8px 18px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); border-radius: 999px; font-size: 14px; color: var(--muted); animation: intro-hint-pulse 2s ease-in-out infinite; } .intro-counter { display: inline-block; min-width: 12px; font-weight: 800; color: #ff8a98; } .intro-particles { position: absolute; inset: 0; pointer-events: none; overflow: visible; } .intro-particle { position: absolute; left: var(--x); top: var(--y); width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle, #fff 0%, var(--accent-2) 35%, transparent 70%); transform: translate(-50%, -50%); animation: intro-particle-fly .8s ease-out forwards; box-shadow: 0 0 14px rgba(100, 231, 255, .9); } @keyframes intro-particle-fly { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.3); opacity: 0; } } .intro-skip { position: absolute; top: 22px; right: 26px; padding: 8px 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; color: var(--muted); font-size: 13px; font-weight: 500; cursor: pointer; transition: color .15s, background .15s, border-color .15s; z-index: 2; } .intro-skip:hover { color: var(--text); background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); } @keyframes intro-eyebrow-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes intro-hint-pulse { 0%, 100% { opacity: .7; } 50% { opacity: 1; } } @media (max-width: 600px) { .intro-headline { font-size: 20px; margin-bottom: 26px; } .intro-waveform { height: 160px; padding: 0 6px; } .intro-bar { max-width: 4px; } .intro-skip { top: 14px; right: 14px; padding: 6px 12px; font-size: 12px; } } @media (prefers-reduced-motion: reduce) { .intro-overlay, .intro-eyebrow, .intro-headline, .intro-waveform { animation: none !important; } .intro-bar { transition: none !important; animation: none !important; } } /* ── Intro v2: multi-act headline, takeover button, scanner sweep ─────── */ /* Multi-line headline — each line is animated in for its act */ .intro-headline { position: relative; display: block; min-height: 3.4em; } .intro-headline .intro-line { display: block; opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease; position: absolute; inset: 0; line-height: 1.2; } .intro-headline.is-act1 .intro-line-1, .intro-headline.is-act2 .intro-line-2, .intro-headline.is-act3 .intro-line-3, .intro-headline.is-act4 .intro-line-4 { opacity: 1; transform: translateY(0); position: relative; } /* Extended stage — wider waveform after act 1 */ .intro-stage { transition: max-width .55s ease; max-width: min(900px, 92vw); margin: 0 auto; } .intro-stage.is-extended { max-width: min(1500px, 98vw); } .intro-waveform { transition: padding .4s ease, gap .4s ease; } /* Bars that are being added during ACT 2 animate in from zero */ .intro-bar.intro-bar-incoming { height: 0 !important; opacity: 0; transition: height .5s ease, opacity .5s ease, background .35s ease, box-shadow .35s ease; } /* AI thinking dots (shown during act 3) */ .intro-ai-dots { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; opacity: 0; transition: opacity .25s ease; } .intro-ai-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--accent-2); animation: intro-dot-bounce 1s ease-in-out infinite; } .intro-ai-dots span:nth-child(2) { animation-delay: .15s; } .intro-ai-dots span:nth-child(3) { animation-delay: .3s; } .intro-ai-dots.is-thinking { opacity: 1; } @keyframes intro-dot-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-4px); opacity: 1; } } /* Takeover button */ .intro-takeover { margin: 28px auto 0; display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px 14px 22px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border: none; border-radius: 999px; font-size: 15px; font-weight: 700; letter-spacing: .01em; cursor: pointer; box-shadow: 0 8px 26px -8px rgba(138, 99, 255, .65), 0 0 0 1px rgba(255, 255, 255, .12) inset; opacity: 0; transform: translateY(8px) scale(.96); transition: opacity .45s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1), filter .15s ease, box-shadow .25s ease; animation: intro-takeover-pulse 1.6s ease-in-out 1s infinite; position: relative; z-index: 3; } .intro-takeover.is-revealed { opacity: 1; transform: translateY(0) scale(1); } .intro-takeover.is-leaving { opacity: 0; transform: translateY(-4px) scale(.96); animation: none; } .intro-takeover:hover { filter: brightness(1.08); box-shadow: 0 12px 36px -8px rgba(138, 99, 255, .85), 0 0 0 1px rgba(255, 255, 255, .2) inset; } .intro-takeover svg { display: inline-block; } .intro-takeover svg:first-child { filter: drop-shadow(0 0 6px rgba(255, 230, 255, .8)); } @keyframes intro-takeover-pulse { 0%, 100% { box-shadow: 0 8px 26px -8px rgba(138, 99, 255, .65), 0 0 0 1px rgba(255, 255, 255, .12) inset, 0 0 0 0 rgba(100, 231, 255, 0); } 50% { box-shadow: 0 14px 36px -8px rgba(138, 99, 255, .85), 0 0 0 1px rgba(255, 255, 255, .15) inset, 0 0 0 14px rgba(100, 231, 255, 0); } } /* Scanner sweep that moves across the waveform during ACT 3 */ .intro-scanner { position: absolute; top: -10px; bottom: -10px; left: 0; width: 3px; background: linear-gradient(180deg, transparent, var(--accent-2) 30%, #fff 50%, var(--accent-2) 70%, transparent); box-shadow: 0 0 18px rgba(100, 231, 255, .85), 0 0 36px rgba(100, 231, 255, .55); opacity: 0; pointer-events: none; transform: translateX(0); z-index: 2; } .intro-scanner.is-scanning { opacity: 1; animation: intro-scan-sweep 2.6s cubic-bezier(.6, .2, .4, .9) forwards; } @keyframes intro-scan-sweep { from { transform: translateX(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } to { transform: translateX(calc(100% + var(--scanner-pad, 0px))); opacity: 0; } } .intro-waveform { position: relative; } /* Brief highlight on bars right before SHOOSH silences them (act 3) */ .intro-bar.intro-bar-highlight { box-shadow: 0 0 26px rgba(255, 255, 255, .95), 0 0 40px rgba(255, 77, 94, .85) !important; transform: scaleY(1.18); } /* The eyebrow shrinks slightly during ACT 3+ to give the action room */ .intro-headline.is-act3 ~ * .intro-eyebrow, .intro-headline.is-act4 ~ * .intro-eyebrow { opacity: .5; } @media (max-width: 600px) { .intro-takeover { font-size: 13px; padding: 12px 20px 12px 18px; } } /* ═══════════════════════════════════════════════════════════════════════════ Landing v2 — methods grid, use-cases carousel, FAQ, team ═══════════════════════════════════════════════════════════════════════════ */ .landing-section-sub { text-align: center; color: var(--muted); margin: 0 auto 36px; max-width: 640px; font-size: 15px; line-height: 1.55; } /* Reveal-on-hover for "How it works" feature cards */ .landing-feature.reveal-on-hover { position: relative; overflow: hidden; cursor: default; } .landing-feature.reveal-on-hover .reveal-extra { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ring); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s ease, opacity .35s ease, margin-top .35s ease, padding-top .35s ease; } .landing-feature.reveal-on-hover .reveal-extra p { font-size: 13px; line-height: 1.55; color: var(--muted); margin: 0 0 10px; } .landing-feature.reveal-on-hover .reveal-extra p:last-child { margin-bottom: 0; } .landing-feature.reveal-on-hover .reveal-extra code { background: rgba(255, 255, 255, .06); padding: 1px 6px; border-radius: 4px; font-size: .9em; color: var(--accent-2); } .landing-feature.reveal-on-hover:hover .reveal-extra, .landing-feature.reveal-on-hover:focus-within .reveal-extra { max-height: 320px; opacity: 1; } /* ── Methods showcase ──────────────────────────────────────────────────── */ .landing-methods { padding: clamp(60px, 8vw, 100px) clamp(20px, 4vw, 48px); max-width: 1200px; margin: 0 auto; } .methods-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; } .method-card { position: relative; padding: 24px 22px 22px; background: var(--card); border: 1px solid var(--ring); border-radius: var(--radius); cursor: pointer; transition: transform .25s ease, border-color .25s ease, box-shadow .3s ease, background .25s ease; overflow: hidden; } .method-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(280px 200px at 50% -10%, rgba(138, 99, 255, .2), transparent 70%); opacity: 0; transition: opacity .3s ease; pointer-events: none; } .method-card:hover, .method-card:focus-visible { transform: translateY(-3px); border-color: rgba(138, 99, 255, .45); box-shadow: 0 12px 32px -16px rgba(138, 99, 255, .55); outline: none; } .method-card:hover::before, .method-card:focus-visible::before { opacity: 1; } .method-card-icon { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: linear-gradient(135deg, rgba(138, 99, 255, .18), rgba(100, 231, 255, .1)); color: var(--accent-2); margin-bottom: 14px; transition: transform .25s ease; } .method-card:hover .method-card-icon { transform: scale(1.08) rotate(-2deg); } .method-card-title { margin: 0 0 4px; font-size: 17px; } .method-card-tag { display: inline-block; margin: 0 0 12px; padding: 2px 9px; background: rgba(100, 231, 255, .1); color: var(--accent-2); border: 1px solid rgba(100, 231, 255, .25); border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .method-card-desc { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); } .method-card-custom { background: linear-gradient(180deg, rgba(138, 99, 255, .08), rgba(100, 231, 255, .04)); } /* ── Use-cases carousel ──────────────────────────────────────────────── */ .landing-use-cases { padding: clamp(60px, 8vw, 100px) clamp(20px, 4vw, 48px); max-width: 1200px; margin: 0 auto; } .use-cases-frame { position: relative; display: flex; align-items: center; gap: 12px; } .use-cases-viewport { flex: 1; overflow: hidden; border-radius: var(--radius); } .use-cases-track { display: flex; gap: 20px; transition: transform .45s cubic-bezier(.4, .2, .2, 1); } .use-case-card { flex: 0 0 calc((100% - 40px) / 3); padding: 28px 26px; background: var(--card); border: 1px solid var(--ring); border-radius: var(--radius); transition: border-color .2s, transform .2s, box-shadow .25s; } .use-case-card:hover { transform: translateY(-2px); border-color: rgba(100, 231, 255, .35); box-shadow: 0 10px 28px -14px rgba(100, 231, 255, .35); } .use-case-badge { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 14px; border-radius: 12px; background: linear-gradient(135deg, rgba(138, 99, 255, .15), rgba(100, 231, 255, .1)); font-size: 26px; } .use-case-card h3 { margin: 0 0 8px; font-size: 18px; } .use-case-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; } .carousel-arrow { flex-shrink: 0; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; background: var(--card); border: 1px solid var(--ring); color: var(--text); border-radius: 50%; cursor: pointer; transition: border-color .2s, color .2s, background .2s; } .carousel-arrow:hover:not(:disabled) { border-color: rgba(138, 99, 255, .55); background: rgba(138, 99, 255, .08); } .carousel-arrow:disabled { opacity: .35; cursor: not-allowed; } .carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 22px; } .carousel-dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; background: var(--ring); cursor: pointer; transition: background .2s, transform .2s; } .carousel-dot.is-active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); transform: scale(1.25); } .carousel-dot:hover { background: var(--accent); } @media (max-width: 880px) { .use-case-card { flex: 0 0 calc((100% - 20px) / 2); } } @media (max-width: 560px) { .use-case-card { flex: 0 0 100%; } .use-cases-frame { gap: 6px; } .carousel-arrow { width: 36px; height: 36px; } } /* ── FAQ ──────────────────────────────────────────────────────────────── */ .landing-faq { padding: clamp(60px, 8vw, 100px) clamp(20px, 4vw, 48px); max-width: 820px; margin: 0 auto; } .faq-list { display: flex; flex-direction: column; gap: 12px; margin-top: 30px; } .faq-item { background: var(--card); border: 1px solid var(--ring); border-radius: 14px; overflow: hidden; transition: border-color .2s; } .faq-item[open] { border-color: rgba(138, 99, 255, .45); } .faq-item summary { list-style: none; cursor: pointer; padding: 18px 50px 18px 22px; font-weight: 600; font-size: 15px; position: relative; color: var(--text); transition: background .15s; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:hover { background: rgba(255, 255, 255, .02); } .faq-item summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-65%) rotate(45deg); transition: transform .25s ease, border-color .25s; } .faq-item[open] summary::after { transform: translateY(-30%) rotate(-135deg); border-color: var(--accent-2); } .faq-item p { margin: 0; padding: 0 22px 20px; color: var(--muted); font-size: 14px; line-height: 1.6; } .faq-item p strong { color: var(--text); } /* ── Team ─────────────────────────────────────────────────────────────── */ .landing-team { padding: clamp(60px, 8vw, 100px) clamp(20px, 4vw, 48px); max-width: 1100px; margin: 0 auto; } .team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; margin-top: 30px; } .team-card { padding: 28px 22px 26px; background: var(--card); border: 1px solid var(--ring); border-radius: var(--radius); text-align: center; transition: border-color .2s, transform .2s, box-shadow .25s; } .team-card:hover { transform: translateY(-3px); border-color: rgba(138, 99, 255, .4); box-shadow: 0 14px 32px -18px rgba(138, 99, 255, .45); } .team-photo { width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 16px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: flex; align-items: center; justify-content: center; font-family: "Georgia", serif; font-weight: 800; font-size: 32px; color: #fff; letter-spacing: .04em; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .15), 0 10px 32px -10px rgba(138, 99, 255, .5); } .team-name { margin: 0 0 4px; font-size: 18px; } .team-role { margin: 0 0 12px; font-size: 13px; color: var(--accent-2); letter-spacing: .04em; font-weight: 600; } .team-bio { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); } .team-footnote { text-align: center; margin-top: 28px; color: var(--muted); font-size: 13px; font-style: italic; } @media (max-width: 600px) { .landing-nav-actions .landing-nav-link { display: none; } } /* Intro eyebrow as logo */ .intro-eyebrow-logo { padding-left: 0; margin-bottom: 22px; line-height: 1; } .intro-eyebrow-logo img { height: 100px; width: auto; display: inline-block; filter: drop-shadow(0 0 24px rgba(138, 99, 255, .45)) drop-shadow(0 0 8px rgba(100, 231, 255, .3)); } @media (max-width: 600px) { .intro-eyebrow-logo img { height: 68px; } } /* Intro v2.1 — inline AI dots + done check, centered hint */ .intro-hint { justify-content: center; } .intro-hint .intro-ai-dots { display: inline-flex; gap: 4px; margin: 0 0 0 4px; vertical-align: middle; opacity: 1; /* visible whenever rendered inline */ } .intro-hint-check { display: inline-block; margin-right: 6px; color: var(--success, #2ecc71); font-weight: 700; } /* ── Team photos: actual images, B&W ──────────────────────────────────── */ .team-photo { overflow: hidden; } .team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.05); transition: filter .3s ease, transform .3s ease; } .team-card:hover .team-photo img { filter: grayscale(1) contrast(1.1) brightness(1.05); transform: scale(1.04); } /* ── Mobile padding tightening ────────────────────────────────────────── */ @media (max-width: 600px) { .landing-nav { padding-left: 14px; padding-right: 14px; } .landing-hero { padding-left: 16px; padding-right: 16px; } .landing-how, .landing-methods, .landing-use-cases, .landing-faq, .landing-team, .landing-waitlist { padding-left: 16px; padding-right: 16px; } .landing-waitlist-card { padding: 22px 18px; } .landing-footer .footer-content { padding-left: 4px; padding-right: 4px; } .landing-h1 { line-height: 1.08; } } /* ── Mobile burger menu ───────────────────────────────────────────────── */ .landing-nav-burger { display: none; position: relative; width: 42px; height: 42px; padding: 0; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; cursor: pointer; transition: background .2s, border-color .2s; } .landing-nav-burger:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); } .landing-nav-burger span { position: absolute; left: 50%; width: 20px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .3s ease, opacity .2s ease, top .3s ease; transform: translateX(-50%); } .landing-nav-burger span:nth-child(1) { top: 13px; } .landing-nav-burger span:nth-child(2) { top: 20px; } .landing-nav-burger span:nth-child(3) { top: 27px; } .landing-nav-burger.is-open span:nth-child(1) { top: 20px; transform: translateX(-50%) rotate(45deg); } .landing-nav-burger.is-open span:nth-child(2) { opacity: 0; } .landing-nav-burger.is-open span:nth-child(3) { top: 20px; transform: translateX(-50%) rotate(-45deg); } .landing-nav-mobile { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: stretch; justify-content: center; padding: 80px 28px 40px; background: radial-gradient(700px 500px at 50% 0%, rgba(138, 99, 255, .25), transparent 70%), radial-gradient(700px 500px at 50% 100%, rgba(100, 231, 255, .18), transparent 70%), radial-gradient(circle at 50% 50%, #0c1024 0%, #050811 90%); opacity: 0; visibility: hidden; transition: opacity .3s ease; overflow-y: auto; } .landing-nav-mobile.is-open { opacity: 1; visibility: visible; } .landing-nav-mobile-close { position: absolute; top: 22px; right: 22px; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); border-radius: 50%; color: var(--text); cursor: pointer; transition: background .2s; } .landing-nav-mobile-close:hover { background: rgba(255, 255, 255, .12); } .landing-nav-mobile-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 32px; } .landing-nav-mobile-link { display: block; padding: 18px 8px; color: var(--text); text-decoration: none; font-size: 26px; font-weight: 700; letter-spacing: -.01em; text-align: center; border-radius: 14px; transition: background .2s, color .2s, transform .15s; opacity: 0; transform: translateY(8px); } .landing-nav-mobile.is-open .landing-nav-mobile-link { opacity: 1; transform: translateY(0); transition: opacity .35s ease, transform .35s ease, background .2s; } .landing-nav-mobile.is-open .landing-nav-mobile-link:nth-child(1) { transition-delay: .05s; } .landing-nav-mobile.is-open .landing-nav-mobile-link:nth-child(2) { transition-delay: .1s; } .landing-nav-mobile.is-open .landing-nav-mobile-link:nth-child(3) { transition-delay: .15s; } .landing-nav-mobile.is-open .landing-nav-mobile-link:nth-child(4) { transition-delay: .2s; } .landing-nav-mobile.is-open .landing-nav-mobile-link:nth-child(5) { transition-delay: .25s; } .landing-nav-mobile.is-open .landing-nav-mobile-link:nth-child(6) { transition-delay: .3s; } .landing-nav-mobile-link:hover, .landing-nav-mobile-link:focus-visible { background: rgba(138, 99, 255, .12); color: var(--accent-2); outline: none; } .landing-nav-mobile-login { margin: 0 auto; padding: 14px 36px; font-size: 16px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border: none; border-radius: 999px; font-weight: 700; cursor: pointer; align-self: center; box-shadow: 0 10px 28px -10px rgba(138, 99, 255, .5); transition: filter .15s, transform .15s; opacity: 0; transform: translateY(8px); } .landing-nav-mobile.is-open .landing-nav-mobile-login { opacity: 1; transform: translateY(0); transition: opacity .35s ease .35s, transform .35s ease .35s, filter .15s; } .landing-nav-mobile-login:hover { filter: brightness(1.08); } @media (max-width: 720px) { .landing-nav-actions .landing-nav-link, .landing-nav-actions #navLoginBtn { display: none; } .landing-nav-burger { display: inline-flex; align-items: center; justify-content: center; } } @media (min-width: 721px) { .landing-nav-mobile { display: none !important; } } /* Intro v2.2 — stack hint pill and takeover button vertically, both centered */ .intro-hint { display: flex; width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; } .intro-takeover { display: flex; width: fit-content; max-width: 100%; margin: 18px auto 0; } /* ── Hard-blocked section backgrounds (alternating, full-bleed) ────────── */ .landing-how, .landing-methods, .landing-use-cases, .landing-faq, .landing-team, .landing-waitlist { position: relative; isolation: isolate; } .landing-how::before, .landing-methods::before, .landing-use-cases::before, .landing-faq::before, .landing-team::before, .landing-waitlist::before { content: ""; position: absolute; inset: 0; width: 100vw; left: calc(-1 * (100vw - 100%) / 2); z-index: -1; pointer-events: none; } body.light-mode .landing-how::before, body.light-mode .landing-methods::before, body.light-mode .landing-use-cases::before, body.light-mode .landing-faq::before, body.light-mode .landing-team::before, body.light-mode .landing-waitlist::before { /* Light-mode blocks (subtle variations of card/bg) */ } /* Dark mode (default) — block colors with hard boundaries */ .landing-how::before { background: radial-gradient(900px 360px at 50% 0%, rgba(138, 99, 255, .12), transparent 70%), #0a0f24; } .landing-methods::before { background: radial-gradient(900px 360px at 10% 50%, rgba(100, 231, 255, .08), transparent 60%), #06091a; } .landing-use-cases::before { background: radial-gradient(900px 400px at 90% 50%, rgba(138, 99, 255, .1), transparent 60%), #0a0f24; } .landing-faq::before { background: radial-gradient(700px 320px at 50% 0%, rgba(100, 231, 255, .07), transparent 70%), #06091a; } .landing-team::before { background: radial-gradient(800px 320px at 50% 100%, rgba(138, 99, 255, .12), transparent 70%), #0a0f24; } .landing-waitlist::before { background: radial-gradient(1000px 500px at 50% 50%, rgba(138, 99, 255, .18), transparent 60%), radial-gradient(900px 500px at 50% 0%, rgba(100, 231, 255, .12), transparent 60%), #060d22; } /* Hard accent line at the TOP of each section as a clean divider */ .landing-methods::after, .landing-use-cases::after, .landing-faq::after, .landing-team::after, .landing-waitlist::after { content: ""; position: absolute; top: 0; left: calc(-1 * (100vw - 100%) / 2); width: 100vw; height: 1px; background: linear-gradient(90deg, transparent 5%, rgba(138, 99, 255, .35) 35%, rgba(100, 231, 255, .35) 65%, transparent 95%); z-index: -1; pointer-events: none; } /* Light mode block colors (override) */ body.light-mode .landing-how::before { background: radial-gradient(900px 360px at 50% 0%, rgba(138, 99, 255, .08), transparent 70%), #eef0fa; } body.light-mode .landing-methods::before { background: radial-gradient(900px 360px at 10% 50%, rgba(100, 231, 255, .08), transparent 60%), #f6f7fc; } body.light-mode .landing-use-cases::before { background: radial-gradient(900px 400px at 90% 50%, rgba(138, 99, 255, .07), transparent 60%), #eef0fa; } body.light-mode .landing-faq::before { background: radial-gradient(700px 320px at 50% 0%, rgba(100, 231, 255, .06), transparent 70%), #f6f7fc; } body.light-mode .landing-team::before { background: radial-gradient(800px 320px at 50% 100%, rgba(138, 99, 255, .08), transparent 70%), #eef0fa; } body.light-mode .landing-waitlist::before { background: radial-gradient(1000px 500px at 50% 50%, rgba(138, 99, 255, .1), transparent 60%), #f3f4fb; } /* .transcribe-body .word.low-confidence(.is-bad-word) deleted here (Task 6): identical selectors, now owned by app-shell.css's Lyrics-view block (a dashed border-bottom instead of underline-decoration, matching the new flat word-chip aesthetic; the .is-bad-word opacity carve-out was ported forward alongside it so bad words keep staying prominent). */ /* #scrollHint(+.is-visible/.scroll-hint-chevron) and its two @media blocks deleted here (Task 13): the "scroll down to pick a method" mobile hint has no element left in app.html -- the redesign's 5-step mobile shell put the method picker in its own reachable step, so the hint this comment attributed to main.js is stale; main.js no longer references it either. Proof: 0 hits for `scrollHint`/`scroll-hint` (case-insensitive) in index.html/admin.html/app.html and 0 hits in any JS file. `@keyframes qp-hint-in`/`qp-hint-bounce` were only ever used by this block, so both are deleted too (confirmed no other rule references either name). */ /* Hero remains the dark radial-glow open canvas (no block) */ /* ── v3 sign-in (2026-10, design artboard 1a) ───────────────────────────── Shared by the landing page's login modal and app.html's overlay (same ids, auth.js drives both). Flat card, one violet accent, six OTP cells drawn over one real input. Literal v3 values: the landing page does not load app-v3.css's tokens. Overrides the older .login-* rules above by source order at equal specificity. */ .login-screen { background: #0b0e17; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, sans-serif; } .login-card { width: min(400px, 100%); padding: 0; background: none; border: 0; box-shadow: none; text-align: left; color: #f3f5fb; } .login-card > div[id^="loginStep"]:not([style*="none"]) { display: flex !important; flex-direction: column; gap: 28px; } .login-card > div[id^="loginStep"][style*="none"] { display: none !important; } .login-logo { display: flex; justify-content: center; margin: 0 0 28px; } .login-logo img { width: 160px; height: auto; } .login-logo::after { content: none; } .login-head { display: flex; flex-direction: column; gap: 6px; text-align: center; } .login-title { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.01em; color: #f3f5fb; } .login-sub { margin: 0; font-size: 15px; line-height: 1.45; color: #a0a8bd; } .login-sub strong { color: #f3f5fb; } #loginEmailForm, #loginCodeForm { display: flex; flex-direction: column; gap: 10px; } #loginCodeForm { gap: 14px; } .login-label { font-size: 13px; font-weight: 600; color: #a0a8bd; } .login-input { height: 48px; margin: 0; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: #11151f; color: #f3f5fb; font-size: 16px; box-sizing: border-box; } .login-input:focus { border-color: #7c5cff; box-shadow: 0 0 0 3px rgba(124,92,255,.18); outline: 0; } .login-card .btn.login-btn { width: 100%; height: 48px; padding: 0 16px; border-radius: 10px; border: 0; background: #7c5cff; color: #fff; font-size: 16px; font-weight: 600; box-shadow: none; cursor: pointer; } .login-card .btn.login-btn:hover:not(:disabled) { background: #8b6eff; transform: none; } .login-card .btn.login-btn:disabled { opacity: .5; cursor: default; } .login-footnote { margin: 4px 0 0; font-size: 13px; color: #6f788f; text-align: center; } .login-footnote a, .login-link { color: #b9a6ff; text-decoration: none; } .login-footnote a:hover { color: #f3f5fb; text-decoration: none; } /* OTP: the real input sits invisibly over the six cells. */ .otp { position: relative; display: flex; gap: 10px; justify-content: center; } .otp-cell { width: 52px; height: 60px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: #11151f; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 600; color: #f3f5fb; box-sizing: border-box; } .otp-cell.is-focus { border-color: #7c5cff; box-shadow: 0 0 0 3px rgba(124,92,255,.18); } .otp-cell.is-focus:empty::after { content: ''; width: 2px; height: 28px; border-radius: 1px; background: #7c5cff; animation: otp-caret 1s steps(1) infinite; } @keyframes otp-caret { 50% { opacity: 0; } } .otp .login-code-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; padding: 0; border: 0; font-size: 16px; letter-spacing: 0; color: transparent; caret-color: transparent; cursor: text; } .login-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: -14px; font-size: 13px; color: #a0a8bd; flex-wrap: wrap; } .login-back { margin: 0; padding: 6px 0; min-height: 32px; font-size: 13px; color: #b9a6ff; } .login-back:hover { color: #f3f5fb; } .login-link { background: none; border: 0; padding: 6px 0; min-height: 32px; font: inherit; font-weight: 600; cursor: pointer; } .login-link:disabled { color: #a0a8bd; font-weight: 400; cursor: default; } .login-error { margin: 14px 0 0; padding: 0; background: none; border: 0; color: #ffb4b4; font-size: 13px; text-align: center; } .login-card :is(button, input, a):focus-visible { outline: 2px solid #7c5cff; outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .otp-cell.is-focus:empty::after { animation: none; } } /* ── Scrollbars (2026-10): thin, dark, no OS-grey gutter ───────────────── Every page loads style.css, so this covers the app, admin and landing. Firefox and Chrome 121+ use the standard properties; older WebKit (Safari) falls back to the ::-webkit-scrollbar rules. */ * { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent; } body.light-mode, body.light-mode * { scrollbar-color: rgba(13,17,53,.22) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,.28); } body.light-mode ::-webkit-scrollbar-thumb { background-color: rgba(13,17,53,.22); } /* ── Admin: shareable invite link (copy / WhatsApp / share) ─────────────── */ .invite-share { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 12px; background: rgba(124,92,255,.08); border: 1px solid rgba(124,92,255,.25); } .invite-share[hidden] { display: none; } .invite-share-label { font-size: 13px; font-weight: 600; color: var(--text); } .invite-share .invite-share-link { margin: 0; font-family: ui-monospace, Menlo, monospace; font-size: 13px; } .invite-share-actions { display: flex; flex-wrap: wrap; gap: 8px; } .invite-share-actions .btn-mini + .btn-mini { margin-left: 0; } a.btn.admin-wa-invite { text-decoration: none; display: inline-flex; align-items: center; }