/* Royall design tokens — shared CSS across creator / company / admin portals. Phase 0 of the redesign migration. Active only on pages with body[data-theme="redesign"] so it doesn't fight existing per-portal styles during phased rollout. Pages opt in by setting that body attribute (server-side, behind a feature flag). Import in together with /static/royall-chrome.css. Source of truth: backend/creator/redesign/_tokens.css (the deck). Keep these in sync. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap'); /* iOS safe-area fix (2026-05-25 PWA Phase 1A). With viewport-fit=cover, the page paints under the notch + home indicator on iPhone 14+ / iPad. Without a wine background on the element, those safe-area zones show iOS's default WHITE between the page content and the device edges — visible most clearly on iPhone 17 Pro Max in standalone PWA mode (home indicator zone). Painting html with the deepest wine tone makes the unreachable area blend with our gradient. Cheap one-liner; no impact when viewport-fit isn't set. */ html { background-color: #1e1010; } /* The `hidden` attribute must always hide, even when a component rule sets `display` (e.g. `.step { display:flex }`). The UA `[hidden]{display:none}` has near-zero specificity and silently loses to any class rule — which re-rendered "hidden" elements as the duplicate "1, 1" steps on /extension-pair (2026-05-29). `!important` makes the attribute authoritative so JS `el.hidden = true` reliably hides anywhere in the redesign theme. */ body[data-theme="redesign"] [hidden] { display: none !important; } /* Body atmosphere — only active on opt-in pages */ body[data-theme="redesign"] { margin: 0; /* min-height uses 100dvh on browsers that support it (iOS Safari 16.4+ / Android Chrome 108+) so the wine gradient genuinely covers the dynamic viewport (URL bar collapsed/expanded). Falls back to 100vh on older browsers. The static 100vh version is correct in standalone PWA mode anyway. */ min-height: 100vh; min-height: 100dvh; font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; color: #f3eef8; background: radial-gradient(700px 600px at 50% 30%, rgba(255, 180, 180, 0.18), transparent 60%), radial-gradient(1200px 800px at 75% 0%, rgba(133, 95, 168, 0.42), transparent 60%), radial-gradient(900px 600px at 25% 100%, rgba(74, 50, 100, 0.55), transparent 55%), linear-gradient(160deg, #3d1d1d 0%, #121226 50%, #1e1010 100%); letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; /* Tells the UA that native form widgets (date / time / select dropdown, color pickers, scrollbars) should render against a dark surface — so the calendar-picker glyph on stops being a black square on our wine bg. Reported on signup DOB field 2026-05-08. */ color-scheme: dark; } /* ── Custom date picker ──────────────────────────────────────────────────── royall-datepicker.js wraps every in `.royall-dp` and adds a styled trigger pill + custom calendar dropdown so the wine + rose theme reaches into form controls that the browser otherwise paints itself. The native indicator and popup are suppressed below. */ body[data-theme="redesign"] .royall-dp { position: relative; display: block; } /* Hide the native calendar-picker indicator — we render our own pill on top of the field. The input still owns the value (form submission, autofill for autocomplete=bday, min/max validation all keep working). */ body[data-theme="redesign"] .royall-dp input[type="date"] { appearance: none; -webkit-appearance: none; padding-right: 56px; /* room for the trigger pill */ } body[data-theme="redesign"] .royall-dp input[type="date"]::-webkit-calendar-picker-indicator { display: none; -webkit-appearance: none; opacity: 0; pointer-events: none; } /* Rose pill trigger sitting at the right edge of the field. Uses the same visual language as the brand accent buttons. */ body[data-theme="redesign"] .royall-dp-trigger { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, rgba(255,180,180,0.18) 0%, rgba(141,76,76,0.10) 100%); border: 1px solid rgba(255,180,180,0.28); color: #ffd0d0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-family: inherit; transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease; padding: 0; } body[data-theme="redesign"] .royall-dp-trigger:hover, body[data-theme="redesign"] .royall-dp.is-open .royall-dp-trigger { background: linear-gradient(135deg, #ffb4b4 0%, #b47878 100%); color: #3d1d1d; border-color: transparent; box-shadow: 0 8px 22px -8px rgba(255,180,180,0.55); } body[data-theme="redesign"] .royall-dp-trigger:active { transform: translateY(-50%) scale(0.96); } /* Calendar dropdown — wine-on-glass surface, rose accents. Anchored to the right edge of the field so it stays inside the form column. */ body[data-theme="redesign"] .royall-dp-dropdown { position: absolute; top: calc(100% + 10px); right: 0; z-index: 200; width: 320px; padding: 16px; background: linear-gradient(160deg, rgba(30, 16, 16, 0.96) 0%, rgba(18, 18, 38, 0.98) 100%); border: 1px solid rgba(255, 180, 180, 0.20); border-radius: 18px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 32px 80px -24px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.04) inset; display: none; font-family: inherit; color: #f3eef8; opacity: 0; transform: translateY(-6px); transition: opacity 0.18s ease, transform 0.18s ease; } body[data-theme="redesign"] .royall-dp.is-open .royall-dp-dropdown { display: block; opacity: 1; transform: translateY(0); } /* Header: prev / next month + month name + year dropdown. */ body[data-theme="redesign"] .royall-dp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; } body[data-theme="redesign"] .royall-dp-nav { width: 32px; height: 32px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); color: rgba(243, 238, 248, 0.85); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-family: inherit; padding: 0; transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease; } body[data-theme="redesign"] .royall-dp-nav:hover { background: rgba(255, 180, 180, 0.14); border-color: rgba(255, 180, 180, 0.32); color: #ffd0d0; } body[data-theme="redesign"] .royall-dp-title { display: flex; align-items: center; gap: 8px; flex: 1; justify-content: center; } body[data-theme="redesign"] .royall-dp-month { font-size: 14px; font-weight: 800; color: #fff; letter-spacing: -0.005em; } body[data-theme="redesign"] .royall-dp-year { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.10); color: #fff; font-family: inherit; font-size: 13px; font-weight: 800; padding: 4px 8px; border-radius: 6px; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 6px center; padding-right: 22px; } body[data-theme="redesign"] .royall-dp-year:hover { background-color: rgba(255, 180, 180, 0.10); border-color: rgba(255, 180, 180, 0.30); } /* Weekday header row + day grid. */ body[data-theme="redesign"] .royall-dp-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; } body[data-theme="redesign"] .royall-dp-weekdays span { text-align: center; font-size: 10px; font-weight: 800; color: rgba(243, 238, 248, 0.42); letter-spacing: 0.10em; padding: 6px 0; } body[data-theme="redesign"] .royall-dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } body[data-theme="redesign"] .royall-dp-day { aspect-ratio: 1 / 1; background: transparent; border: 1px solid transparent; border-radius: 8px; color: rgba(243, 238, 248, 0.85); font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; } body[data-theme="redesign"] .royall-dp-day:hover { background: rgba(255, 180, 180, 0.14); color: #ffd0d0; } body[data-theme="redesign"] .royall-dp-day.other { color: rgba(243, 238, 248, 0.22); } body[data-theme="redesign"] .royall-dp-day.today { border-color: rgba(255, 180, 180, 0.40); color: #ffd0d0; } body[data-theme="redesign"] .royall-dp-day.selected, body[data-theme="redesign"] .royall-dp-day.selected:hover { background: linear-gradient(135deg, #ffb4b4 0%, #b47878 100%); color: #3d1d1d; font-weight: 800; border-color: transparent; box-shadow: 0 6px 14px -8px rgba(255, 180, 180, 0.65); } body[data-theme="redesign"] .royall-dp-day.disabled { opacity: 0.25; cursor: not-allowed; pointer-events: none; } /* Footer: Clear + Today actions. */ body[data-theme="redesign"] .royall-dp-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.06); } body[data-theme="redesign"] .royall-dp-action { background: transparent; border: 0; color: rgba(243, 238, 248, 0.65); font-size: 11px; font-weight: 800; letter-spacing: 0.10em; text-transform: uppercase; cursor: pointer; font-family: inherit; padding: 6px 10px; border-radius: 8px; transition: background 0.14s ease, color 0.14s ease; } body[data-theme="redesign"] .royall-dp-action:hover { background: rgba(255, 180, 180, 0.10); color: #ffd0d0; } body[data-theme="redesign"] .royall-dp-action.is-primary { color: #ffd0d0; } /* Box-sizing reset, scoped (existing portals set their own globally) */ body[data-theme="redesign"] *, body[data-theme="redesign"] *::before, body[data-theme="redesign"] *::after { box-sizing: border-box; } /* Page layout helpers — content centers in the viewport. Top padding reserves space for the fixed .brand-bar (96px) plus breathing room. The deck nav sidebar is a mockup-only collapsible overlay; we don't reserve space for it, it lays over the page edge when expanded. */ body[data-theme="redesign"] .page { /* B-2 (STUDIO-IOS-CAPTURE-AUDIT-2026-06-08) — the injected .brand-bar grows to calc(96px + env(safe-area-inset-top)) on notched/Pro iPhones, but this shell used a fixed 144px (96 + 48) with no inset, so the header sat ~11px behind the translucent bar in the PWA. Clearance is now additive: 96 (bar) + 48 (breathing room) + the safe-area inset (0 on non-notched devices). */ min-height: 100vh; /* fallback for browsers without dvh */ min-height: 100dvh; padding: calc(96px + 48px + env(safe-area-inset-top)) 48px 72px; max-width: 1440px; margin: 0 auto; } body[data-theme="redesign"] .page-narrow { max-width: 920px; } body[data-theme="redesign"] .page-wide { max-width: 1320px; } body[data-theme="redesign"] .page-center { min-height: 100vh; display: flex; align-items: safe center; justify-content: center; padding: 144px 24px 72px; } /* Glass card */ body[data-theme="redesign"] .card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 24px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 32px 80px -24px rgba(0,0,0,0.5); } /* Brand orb */ body[data-theme="redesign"] .orb { width: 96px; height: 96px; border-radius: 50%; background: linear-gradient(160deg, #ffb4b4 0%, #8d4c4c 100%); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 80px rgba(255, 180, 180, 0.55), 0 0 32px rgba(255, 180, 180, 0.32), inset 0 0 24px rgba(255,255,255,0.18); font-size: 38px; font-weight: 900; letter-spacing: -0.04em; color: #3d1d1d; position: relative; } body[data-theme="redesign"] .orb::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.4), transparent 50%); pointer-events: none; } body[data-theme="redesign"] .orb-sm { width: 56px; height: 56px; font-size: 22px; } body[data-theme="redesign"] .orb-xs { width: 36px; height: 36px; font-size: 14px; box-shadow: 0 0 24px rgba(255,180,180,0.35), inset 0 0 12px rgba(255,255,255,0.2); } /* Type */ body[data-theme="redesign"] .h1 { font-size: 44px; font-weight: 900; letter-spacing: -0.025em; line-height: 1.05; color: #fff; margin: 0; } body[data-theme="redesign"] .h2 { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; color: #fff; margin: 0; } body[data-theme="redesign"] .h3 { font-size: 18px; font-weight: 800; letter-spacing: -0.015em; color: #fff; margin: 0; } body[data-theme="redesign"] .eyebrow { font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(243,238,248, 0.55); } body[data-theme="redesign"] .lede { font-size: 15px; line-height: 1.55; color: rgba(243,238,248, 0.7); margin: 0; } body[data-theme="redesign"] .muted { color: rgba(243,238,248, 0.55); } body[data-theme="redesign"] .muted-strong { color: rgba(243,238,248, 0.4); } /* Inputs */ body[data-theme="redesign"] .input { padding: 14px 16px; border-radius: 12px; background: rgba(0,0,0,0.32); border: 1px solid rgba(255,255,255,0.1); color: #fff; font-family: inherit; font-size: 14px; width: 100%; transition: border-color 0.15s, background 0.15s; } body[data-theme="redesign"] .input::placeholder { color: rgba(243,238,248, 0.4); } body[data-theme="redesign"] .input:focus { outline: none; border-color: rgba(255,180,180, 0.55); background: rgba(0,0,0,0.42); } body[data-theme="redesign"] .field { display: flex; flex-direction: column; gap: 6px; } body[data-theme="redesign"] .field label { font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(243,238,248, 0.55); } /* Buttons */ body[data-theme="redesign"] .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 12px; font-size: 14px; font-weight: 800; cursor: pointer; /* iOS Safari hardening (2026-05-25 PWA Phase 1E): - touch-action: manipulation removes the 300ms tap-delay on iOS Safari, so button presses feel instant in PWA standalone mode. - -webkit-tap-highlight-color: transparent kills the grey overlay iOS draws on every tap. We have our own :active / :hover states in the brand language and the grey flash fights with them. */ touch-action: manipulation; -webkit-tap-highlight-color: transparent; border: none; font-family: inherit; letter-spacing: -0.005em; transition: all 0.15s; text-decoration: none; } body[data-theme="redesign"] .btn.primary { background: linear-gradient(135deg, #ffb4b4 0%, #b47878 100%); color: #3d1d1d; box-shadow: 0 12px 32px -10px rgba(255,180,180,0.55); } body[data-theme="redesign"] .btn.primary:hover { box-shadow: 0 14px 38px -8px rgba(255,180,180,0.65); transform: translateY(-1px); } body[data-theme="redesign"] .btn.ghost { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); color: rgba(243,238,248, 0.85); } body[data-theme="redesign"] .btn.ghost:hover { background: rgba(255,255,255,0.07); color: #fff; } body[data-theme="redesign"] .btn.danger { background: rgba(239, 68, 68, 0.16); border: 1px solid rgba(239, 68, 68, 0.3); color: #f87171; } body[data-theme="redesign"] .btn.danger:hover { background: rgba(239, 68, 68, 0.22); border-color: rgba(239, 68, 68, 0.45); color: #fca5a5; } body[data-theme="redesign"] .btn.danger-ghost { background: transparent; border: 1px solid rgba(239, 68, 68, 0.28); color: #ffbac1; } body[data-theme="redesign"] .btn.danger-ghost:hover { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.45); } body[data-theme="redesign"] .btn-block { width: 100%; } body[data-theme="redesign"] .btn-sm { padding: 8px 14px; font-size: 12px; border-radius: 10px; } body[data-theme="redesign"] .btn svg { width: 16px; height: 16px; } body[data-theme="redesign"] .btn-sm svg { width: 13px; height: 13px; } /* Tag / chip */ body[data-theme="redesign"] .chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); color: rgba(243,238,248, 0.85); } body[data-theme="redesign"] .chip-rose { background: linear-gradient(135deg, #ffb4b4 0%, #ffd0d0 100%); color: #3d1d1d; border-color: transparent; } body[data-theme="redesign"] .chip-warn { background: rgba(255, 200, 100, 0.12); color: #ffd49e; border-color: rgba(255, 200, 100, 0.24); } body[data-theme="redesign"] .chip-good { background: rgba(120, 220, 180, 0.12); color: #a8efce; border-color: rgba(120, 220, 180, 0.24); } body[data-theme="redesign"] .chip-bad { background: rgba(255, 120, 130, 0.14); color: #ffbac1; border-color: rgba(255, 120, 130, 0.24); } /* Pill tabs — single in-page nav style across the deck */ body[data-theme="redesign"] .tabs { display: flex; gap: 4px; padding: 4px; background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; width: fit-content; margin-bottom: 24px; flex-wrap: wrap; } body[data-theme="redesign"] .tab { padding: 8px 16px; border-radius: 10px; font-size: 12px; font-weight: 800; color: rgba(243,238,248, 0.6); cursor: pointer; text-decoration: none; border: none; background: transparent; font-family: inherit; letter-spacing: 0.005em; transition: color 0.15s; } body[data-theme="redesign"] .tab:hover { color: #fff; } body[data-theme="redesign"] .tab.active { background: linear-gradient(135deg, #ffb4b4 0%, #b47878 100%); color: #3d1d1d; } /* Stat tile (giant numerals over labels) */ body[data-theme="redesign"] .stat { background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.06); border-radius: 18px; padding: 22px 22px 20px; } body[data-theme="redesign"] .stat-label { font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(243,238,248, 0.55); margin-bottom: 10px; } body[data-theme="redesign"] .stat-value { font-size: 40px; font-weight: 900; letter-spacing: -0.025em; color: #fff; font-variant-numeric: tabular-nums; line-height: 1; } body[data-theme="redesign"] .stat-sub { font-size: 12px; color: rgba(243,238,248, 0.55); margin-top: 8px; } /* Footer */ body[data-theme="redesign"] .deck-footer { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.06); display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 600; color: rgba(243,238,248, 0.45); } body[data-theme="redesign"] .deck-footer a { color: inherit; text-decoration: none; transition: color 0.15s; } body[data-theme="redesign"] .deck-footer a:hover { color: rgba(243,238,248, 0.75); } /* Headerbar — used on dashboards inside the page column */ body[data-theme="redesign"] .headerbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; } body[data-theme="redesign"] .headerbar-left { display: flex; align-items: center; gap: 14px; } body[data-theme="redesign"] .headerbar-actions { display: flex; gap: 8px; align-items: center; } /* Utility */ body[data-theme="redesign"] .row { display: flex; gap: 12px; } body[data-theme="redesign"] .row-tight { display: flex; gap: 6px; } body[data-theme="redesign"] .col { display: flex; flex-direction: column; gap: 12px; } body[data-theme="redesign"] .col-tight { display: flex; flex-direction: column; gap: 6px; } body[data-theme="redesign"] .between { display: flex; justify-content: space-between; align-items: center; } body[data-theme="redesign"] .grow { flex: 1; } /* Shared shells (extracted from studio.html / vault.html / etc.) */ body[data-theme="redesign"] .shell-3col { display: grid; grid-template-columns: 320px 1fr 88px; min-height: 100vh; padding: 144px 24px 72px; gap: 24px; max-width: 1440px; margin: 0 auto; } body[data-theme="redesign"] .shell-2col { display: grid; grid-template-columns: 1fr 88px; min-height: 100vh; padding: 144px 24px 72px; gap: 24px; max-width: 1440px; margin: 0 auto; } /* Right action rail — used on studio + vault pages for floating shortcuts */ body[data-theme="redesign"] .action-rail { display: flex; flex-direction: column; gap: 14px; align-items: center; padding-top: 80px; } body[data-theme="redesign"] .action-rail .action { width: 48px; height: 48px; border-radius: 16px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; cursor: pointer; color: rgba(243,238,248, 0.85); transition: all 0.15s; text-decoration: none; } body[data-theme="redesign"] .action-rail .action:hover { background: rgba(255,180,180,0.18); border-color: rgba(255,180,180,0.36); color: #fff; transform: scale(1.05); } body[data-theme="redesign"] .action-rail .action.primary { background: linear-gradient(135deg, #ffb4b4 0%, #b47878 100%); color: #3d1d1d; border-color: transparent; box-shadow: 0 8px 24px -8px rgba(255,180,180,0.5); } body[data-theme="redesign"] .action-rail .action svg { width: 18px; height: 18px; } /* Wizard chrome — extracted from the 4 onboarding pages */ body[data-theme="redesign"] .wizard-shell { width: min(640px, 100%); display: flex; flex-direction: column; gap: 24px; } body[data-theme="redesign"] .wizard-shell.wide { width: min(720px, 100%); } body[data-theme="redesign"] .wizard-rail { display: flex; align-items: center; gap: 0; padding: 18px 22px; } body[data-theme="redesign"] .pip { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; } body[data-theme="redesign"] .pip-dot { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; z-index: 2; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); color: rgba(243,238,248, 0.5); } body[data-theme="redesign"] .pip.done .pip-dot { background: linear-gradient(135deg, #ffb4b4 0%, #b47878 100%); color: #3d1d1d; border-color: transparent; box-shadow: 0 4px 14px -2px rgba(255,180,180,0.4); } body[data-theme="redesign"] .pip-dot svg { width: 14px; height: 14px; stroke-width: 3; } body[data-theme="redesign"] .pip.current .pip-dot { background: rgba(255,180,180,0.14); border-color: rgba(255,180,180,0.55); color: #ffb4b4; box-shadow: 0 0 0 4px rgba(255,180,180,0.12); } body[data-theme="redesign"] .pip-label { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(243,238,248, 0.5); } body[data-theme="redesign"] .pip.done .pip-label, body[data-theme="redesign"] .pip.current .pip-label { color: #fff; } body[data-theme="redesign"] .pip-conn { position: absolute; top: 14px; left: 50%; right: -50%; height: 2px; background: rgba(255,255,255,0.08); z-index: 1; } body[data-theme="redesign"] .pip.done .pip-conn { background: linear-gradient(90deg, #ffb4b4 0%, #b47878 100%); } body[data-theme="redesign"] .pip:last-child .pip-conn { display: none; } body[data-theme="redesign"] .step-card { padding: 36px 38px 32px; display: flex; flex-direction: column; gap: 20px; } body[data-theme="redesign"] .step-meta { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; color: rgba(243,238,248, 0.55); } body[data-theme="redesign"] .step-meta strong { color: #ffb4b4; font-weight: 800; } body[data-theme="redesign"] .step-meta a { color: rgba(243,238,248, 0.7); text-decoration: none; font-weight: 700; } body[data-theme="redesign"] .wizard-actions { display: flex; gap: 10px; margin-top: 4px; } body[data-theme="redesign"] .wizard-actions .grow { flex: 1; } /* ── Sign-up flow animations ───────────────────────────── Auto-applied via body[data-flow="signup"], set by _nav.js based on URL. Covers landing, sign-up, sign-in, pending, and the 5 onboarding wizard steps. Premium-subtle entrance + a forward- moving transition between steps. */ @keyframes flow-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes flow-fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes flow-scale-in { from { opacity: 0; transform: scale(0.92); } 60% { opacity: 1; transform: scale(1.02); } to { opacity: 1; transform: scale(1); } } @keyframes flow-fade-out-left { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-28px); } } /* Container-level entrance — the shell animates first */ body[data-theme="redesign"] body[data-flow="signup"] .auth-card, body[data-theme="redesign"] body[data-flow="signup"] .pending-shell, body[data-theme="redesign"] body[data-flow="signup"] .ready-shell, body[data-theme="redesign"] body[data-flow="signup"] .signup-shell, body[data-theme="redesign"] body[data-flow="signup"] .signup-card, body[data-theme="redesign"] body[data-flow="signup"] .signup-pitch, body[data-theme="redesign"] body[data-flow="signup"] .wizard-shell { animation: flow-fade-up 0.55s 0.10s ease-out both; } /* Wizard rail (the pip strip on top) lands first — orients the user */ body[data-theme="redesign"] body[data-flow="signup"] .wizard-rail { animation: flow-fade-up 0.45s 0.10s ease-out both; } body[data-theme="redesign"] body[data-flow="signup"] .wizard-rail .pip:nth-child(1) { animation: flow-fade-in 0.4s 0.18s ease-out both; } body[data-theme="redesign"] body[data-flow="signup"] .wizard-rail .pip:nth-child(2) { animation: flow-fade-in 0.4s 0.22s ease-out both; } body[data-theme="redesign"] body[data-flow="signup"] .wizard-rail .pip:nth-child(3) { animation: flow-fade-in 0.4s 0.26s ease-out both; } body[data-theme="redesign"] body[data-flow="signup"] .wizard-rail .pip:nth-child(4) { animation: flow-fade-in 0.4s 0.30s ease-out both; } body[data-theme="redesign"] body[data-flow="signup"] .wizard-rail .pip:nth-child(5) { animation: flow-fade-in 0.4s 0.34s ease-out both; } /* The step card itself lands after the rail — gives a "rail orients, then content fills in" feel */ body[data-theme="redesign"] body[data-flow="signup"] .step-card { animation: flow-fade-up 0.55s 0.30s ease-out both; } /* Landing page hero — staged top-to-bottom */ body[data-theme="redesign"] body[data-flow="signup"] .hero-eyebrow { animation: flow-fade-up 0.5s 0.10s ease-out both; } body[data-theme="redesign"] body[data-flow="signup"] .hero-title { animation: flow-fade-up 0.55s 0.20s ease-out both; } body[data-theme="redesign"] body[data-flow="signup"] .hero-sub { animation: flow-fade-up 0.5s 0.32s ease-out both; } body[data-theme="redesign"] body[data-flow="signup"] .hero-ctas { animation: flow-fade-up 0.5s 0.42s ease-out both; } body[data-theme="redesign"] body[data-flow="signup"] .hero-portrait { animation: flow-scale-in 0.7s 0.30s cubic-bezier(0.34, 1.56, 0.64, 1) both; } /* Landing pillars — staggered */ body[data-theme="redesign"] body[data-flow="signup"] .pillar:nth-child(1) { animation: flow-fade-up 0.5s 0.60s ease-out both; } body[data-theme="redesign"] body[data-flow="signup"] .pillar:nth-child(2) { animation: flow-fade-up 0.5s 0.70s ease-out both; } body[data-theme="redesign"] body[data-flow="signup"] .pillar:nth-child(3) { animation: flow-fade-up 0.5s 0.80s ease-out both; } body[data-theme="redesign"] body[data-flow="signup"] .marquee { animation: flow-fade-up 0.5s 0.90s ease-out both; } /* Pending review — orb scale-in, then list, then reviewer */ body[data-theme="redesign"] body[data-flow="signup"] .pulse-ring { animation: flow-scale-in 0.65s 0.20s cubic-bezier(0.34, 1.56, 0.64, 1) both; } body[data-theme="redesign"] body[data-flow="signup"] .step-list { animation: flow-fade-up 0.5s 0.45s ease-out both; } body[data-theme="redesign"] body[data-flow="signup"] .reviewer { animation: flow-fade-up 0.5s 0.55s ease-out both; } body[data-theme="redesign"] body[data-flow="signup"] .help-row { animation: flow-fade-up 0.5s 0.65s ease-out both; } /* Onboarding step 5 — vault unlocked celebration */ body[data-theme="redesign"] body[data-flow="signup"] .ready-orb { animation: flow-scale-in 0.75s 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) both; } body[data-theme="redesign"] body[data-flow="signup"] .ready-shell .ready-title { animation: flow-fade-up 0.55s 0.50s ease-out both; } body[data-theme="redesign"] body[data-flow="signup"] .ready-shell .ready-sub { animation: flow-fade-up 0.5s 0.62s ease-out both; } body[data-theme="redesign"] body[data-flow="signup"] .ready-shell .next-cards { animation: flow-fade-up 0.5s 0.74s ease-out both; } /* Forward-moving transition out — fires when navigating to another step in the signup flow. Slides everything left + fades out. */ body[data-theme="redesign"] body[data-flow="signup"].flow-transitioning .auth-card, body[data-theme="redesign"] body[data-flow="signup"].flow-transitioning .pending-shell, body[data-theme="redesign"] body[data-flow="signup"].flow-transitioning .ready-shell, body[data-theme="redesign"] body[data-flow="signup"].flow-transitioning .signup-shell, body[data-theme="redesign"] body[data-flow="signup"].flow-transitioning .wizard-shell, body[data-theme="redesign"] body[data-flow="signup"].flow-transitioning .hero, body[data-theme="redesign"] body[data-flow="signup"].flow-transitioning .pillars, body[data-theme="redesign"] body[data-flow="signup"].flow-transitioning .marquee { animation: flow-fade-out-left 0.30s ease-in both; } @media (max-width: 980px) { .page, .page-center { padding-left: 24px; padding-right: 24px; } .shell-3col, .shell-2col { grid-template-columns: 1fr; padding-left: 24px; padding-right: 24px; } .action-rail { display: none; } .mockup-nav { display: none; } } /* ============================================================ Modal vocabulary (Phase 3 — pre-vault mandatory per Decision 6) ============================================================ Three layers below: backdrop, card, content rows. The card uses the same glass-card recipe as `.card` (rgba surface + blur + 1px hairline border) so modals feel like elevated versions of the page, not foreign UI. Backdrop is a deep wine wash so the modal sits in front of the gradient field without losing context. Used by: - royall-dialogs.js (.rd-* classes mirror this when the redesign theme is active) - creator/likeness/modals.html (will opt in when Phase 5 vault rebuild lands; pattern is here now so vault has consistent modal styling on day 1) - any new redesign page that needs a modal (just toggle .modal-open on the body to show the matching .modal) ============================================================ */ body[data-theme="redesign"] .modal-backdrop { position: fixed; inset: 0; background: radial-gradient(800px 600px at 50% 50%, rgba(140, 60, 70, 0.28), transparent 65%), rgba(8, 6, 14, 0.72); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 200; animation: modal-backdrop-in 0.22s ease-out both; } @keyframes modal-backdrop-in { from { opacity: 0; } to { opacity: 1; } } body[data-theme="redesign"] .modal-card { width: min(560px, 100%); max-height: calc(100vh - 48px); overflow: hidden; display: flex; flex-direction: column; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 22px; box-shadow: 0 32px 80px -24px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04) inset; backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); animation: modal-card-in 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) both; } @keyframes modal-card-in { from { opacity: 0; transform: scale(0.94) translateY(12px); } 60% { opacity: 1; transform: scale(1.01) translateY(0); } to { opacity: 1; transform: scale(1) translateY(0); } } /* Sized variants — opt in via .modal-card.modal-card-lg */ body[data-theme="redesign"] .modal-card-sm { max-width: 420px; } body[data-theme="redesign"] .modal-card-lg { max-width: 720px; } body[data-theme="redesign"] .modal-card-xl { max-width: 920px; } body[data-theme="redesign"] .modal-head { padding: 24px 28px 16px; display: flex; align-items: flex-start; gap: 16px; border-bottom: 1px solid rgba(255,255,255,0.06); } body[data-theme="redesign"] .modal-head-text { flex: 1; min-width: 0; } body[data-theme="redesign"] .modal-title { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; color: #fff; margin: 0 0 4px; line-height: 1.25; } body[data-theme="redesign"] .modal-sub { font-size: 13px; line-height: 1.55; color: rgba(243,238,248, 0.65); margin: 0; } body[data-theme="redesign"] .modal-close { flex: none; width: 32px; height: 32px; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: rgba(243,238,248, 0.7); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.15s; font-family: inherit; } body[data-theme="redesign"] .modal-close:hover { background: rgba(255,255,255,0.08); color: #fff; } body[data-theme="redesign"] .modal-close i { width: 16px; height: 16px; } body[data-theme="redesign"] .modal-body { padding: 20px 28px; overflow: auto; /* iOS Safari momentum-scroll hint (2026-05-25 PWA Phase 1E). Modern iOS does fling-scroll by default, but the explicit -webkit-overflow-scrolling: touch is required for buttery momentum inside nested scroll contexts (modal body, sibling of fixed brand-bar). Harmless on every other browser. */ -webkit-overflow-scrolling: touch; font-size: 14px; line-height: 1.6; color: rgba(243,238,248, 0.85); } body[data-theme="redesign"] .modal-body p { margin: 0 0 12px; } body[data-theme="redesign"] .modal-body p:last-child { margin-bottom: 0; } /* Optional rose accent strip used for legally-loaded modals (license accept, master consent, force terminate). Sits on the head, not the body — visually flags "this is a contract, read it". */ body[data-theme="redesign"] .modal-card.modal-legal .modal-head { border-bottom-color: rgba(255, 180, 180, 0.22); } body[data-theme="redesign"] .modal-card.modal-legal::before { content: ""; display: block; height: 3px; background: linear-gradient(90deg, #ffb4b4 0%, #8d4c4c 100%); } /* Danger variant — for destructive confirms (revoke consent, force-terminate, hard reject). Tints head + adds red rule. */ body[data-theme="redesign"] .modal-card.modal-danger::before { content: ""; display: block; height: 3px; background: linear-gradient(90deg, #ef4444 0%, #b91c1c 100%); } body[data-theme="redesign"] .modal-card.modal-danger .modal-title { color: #fecaca; } body[data-theme="redesign"] .modal-foot { padding: 16px 28px 22px; border-top: 1px solid rgba(255,255,255,0.06); display: flex; gap: 10px; justify-content: flex-end; align-items: center; } body[data-theme="redesign"] .modal-foot-spread { /* Use when one button is destructive on the left, primary on the right (e.g. force-terminate confirm: Cancel · Terminate). */ justify-content: space-between; } body[data-theme="redesign"] .modal-foot .modal-foot-note { margin-right: auto; font-size: 12px; color: rgba(243,238,248, 0.5); line-height: 1.5; } /* Form rows used inside a modal-body. Keeps spacing consistent across all 9 production modals so they don't each invent their own field rhythm. */ body[data-theme="redesign"] .modal-body .field + .field { margin-top: 14px; } body[data-theme="redesign"] .modal-body .field label { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(243,238,248, 0.62); margin-bottom: 6px; } /* Scrollable legal text inside a modal (master consent, license terms). Adds a subtle inner border so users notice it scrolls. */ body[data-theme="redesign"] .modal-doc { max-height: 320px; overflow: auto; padding: 16px 18px; background: rgba(0,0,0,0.32); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; font-size: 13px; line-height: 1.6; color: rgba(243,238,248, 0.78); } body[data-theme="redesign"] .modal-doc h4 { font-size: 13px; font-weight: 800; color: #fff; margin: 16px 0 6px; letter-spacing: -0.005em; } body[data-theme="redesign"] .modal-doc h4:first-child { margin-top: 0; } /* Acknowledgement checkbox row — used at the bottom of consent / license modals to make the user actively confirm before the primary CTA enables. */ body[data-theme="redesign"] .modal-ack { margin-top: 14px; padding: 12px 14px; background: rgba(255, 180, 180, 0.06); border: 1px solid rgba(255, 180, 180, 0.16); border-radius: 12px; display: flex; gap: 10px; align-items: flex-start; font-size: 12px; line-height: 1.5; color: rgba(243,238,248, 0.85); cursor: pointer; } body[data-theme="redesign"] .modal-ack input[type="checkbox"] { flex: none; width: 18px; height: 18px; border-radius: 5px; border: 1px solid rgba(255,255,255,0.2); background: rgba(0,0,0,0.32); appearance: none; cursor: pointer; position: relative; margin-top: 1px; } body[data-theme="redesign"] .modal-ack input[type="checkbox"]:checked { background: linear-gradient(135deg, #ffb4b4 0%, #b47878 100%); border-color: transparent; } body[data-theme="redesign"] .modal-ack input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #3d1d1d; border-width: 0 2px 2px 0; transform: rotate(45deg); } /* When a page wants the host to lock scrolling while a modal is up — pages opt in via document.body.classList.add('modal-open'). */ body[data-theme="redesign"].modal-open, body[data-theme="redesign"] body.modal-open { overflow: hidden; } /* ============================================================ Phase 5a — Vault visual port via overrides Strategy: leave production class names (.vault-*, .lk-*) in place so likeness.js (3,176 lines) doesn't need to change, but redefine their visual properties under `body[data-theme="redesign"]` so the entire vault adopts the wine + rose look the moment the shell opts in. What's covered: - vault layout + top bar + avatar dropdown - vault hero (title + readiness chip) - tab strip (4 tabs + badges) - tab panel container - setup banner (onboarding-incomplete pin) - all 9 modals (lk-modal-wrap family — Phase 3 deferred port) - shared form bits inside modals (.lk-form-*, .lk-doc, .lk-check) What's NOT covered (deferred to Phase 5b): - URL split into separate MPA pages - likeness.js architecture (still SPA with hash routing) - capture studio (likeness-studio.html) - per-tab content styling beyond the chrome ============================================================ */ /* ── Body + global page surface ─────────────────────────────── */ body[data-theme="redesign"] .vault-layout { min-height: 100vh; background: transparent; /* foundation tokens supply the gradient */ } body[data-theme="redesign"] .vault-main, body[data-theme="redesign"] .vault-main--no-sidebar { margin-left: 0; background: transparent; } /* Top bar — replaces the legacy white/dark sticky header */ body[data-theme="redesign"] .vault-top { background: rgba(20, 12, 22, 0.7); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); border-bottom: 1px solid rgba(255,255,255,0.06); padding: 14px 28px; display: flex; justify-content: space-between; align-items: center; } body[data-theme="redesign"] .vault-top-logo { filter: invert(1) brightness(1.05); opacity: 0.85; height: 22px; } body[data-theme="redesign"] .vault-avatar { background: linear-gradient(160deg, #ffb4b4 0%, #8d4c4c 100%); color: #3d1d1d; box-shadow: 0 0 24px rgba(255,180,180, 0.32); font-weight: 900; } body[data-theme="redesign"] .vault-avatar:hover { box-shadow: 0 0 32px rgba(255,180,180, 0.5); transform: scale(1.06); } body[data-theme="redesign"] .avatar-dropdown { background: rgba(20, 12, 22, 0.95); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 24px 60px -20px rgba(0,0,0,0.55); color: #fff; padding: 14px 16px; } body[data-theme="redesign"] .avatar-dropdown-name { color: #fff; font-weight: 800; } body[data-theme="redesign"] .avatar-dropdown-email { color: rgba(243,238,248, 0.6); } body[data-theme="redesign"] .avatar-dropdown-btn { color: rgba(243,238,248, 0.85); background: transparent; border-radius: 8px; font-weight: 700; } body[data-theme="redesign"] .avatar-dropdown-btn:hover { background: rgba(255,255,255,0.06); color: #fff; } body[data-theme="redesign"] .avatar-dropdown-btn.neutral:hover { background: rgba(255,255,255,0.06); color: #fff; } body[data-theme="redesign"] .avatar-dropdown > div[style*="surface-3"] { background: rgba(255,255,255,0.06) !important; } /* ── Page container + hero ──────────────────────────────────── */ body[data-theme="redesign"] .v-panel { background: transparent; } body[data-theme="redesign"] .lk-page { max-width: 1080px; margin: 0 auto; padding: 24px 0 96px; } body[data-theme="redesign"] .lk-vault-header { margin-bottom: 32px; padding-top: 8px; } body[data-theme="redesign"] .lk-vault-title { font-size: 44px; font-weight: 900; letter-spacing: -0.025em; line-height: 1.05; color: #fff; margin: 0; } body[data-theme="redesign"] .lk-vault-title span { background: linear-gradient(135deg, #ffd0d0 0%, #ffb4b4 50%, #8d4c4c 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 900; } /* Readiness chip — preserves the 5 state classes JS toggles */ body[data-theme="redesign"] .lk-vault-status { display: inline-flex; gap: 12px; align-items: center; padding: 10px 16px; border-radius: 999px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(12px); } body[data-theme="redesign"] .lk-vault-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } body[data-theme="redesign"] .lk-vault-status-primary { font-size: 12px; font-weight: 800; color: #fff; letter-spacing: -0.005em; } body[data-theme="redesign"] .lk-vault-status-sub { font-size: 11px; color: rgba(243,238,248, 0.6); } body[data-theme="redesign"] .lk-vault-status.state-setup { border-color: rgba(251, 146, 60, 0.32); background: rgba(251, 146, 60, 0.06); } body[data-theme="redesign"] .lk-vault-status.state-setup .lk-vault-status-dot { background: #fb923c; } body[data-theme="redesign"] .lk-vault-status.state-review { border-color: rgba(255, 180, 180, 0.36); background: rgba(255, 180, 180, 0.06); } body[data-theme="redesign"] .lk-vault-status.state-review .lk-vault-status-dot { background: #ffb4b4; } body[data-theme="redesign"] .lk-vault-status.state-capturing { border-color: rgba(234, 179, 8, 0.4); background: rgba(234, 179, 8, 0.06); } body[data-theme="redesign"] .lk-vault-status.state-capturing .lk-vault-status-dot { background: #eab308; } body[data-theme="redesign"] .lk-vault-status.state-unlocked { border-color: rgba(74, 222, 128, 0.32); background: rgba(74, 222, 128, 0.06); } body[data-theme="redesign"] .lk-vault-status.state-unlocked .lk-vault-status-dot { background: #4ade80; } body[data-theme="redesign"] .lk-vault-status.state-live { border-color: rgba(74, 222, 128, 0.5); background: rgba(74, 222, 128, 0.08); } body[data-theme="redesign"] .lk-vault-status.state-live .lk-vault-status-dot { background: #4ade80; } /* Setup banner (onboarding incomplete) */ body[data-theme="redesign"] .lk-setup-banner { background: rgba(255, 180, 180, 0.06); border: 1px solid rgba(255, 180, 180, 0.24); border-radius: 14px; padding: 16px 20px; margin: 20px 0 0; color: rgba(243, 238, 248, 0.85); } /* ── Tab strip ─────────────────────────────────────────────── */ body[data-theme="redesign"] .lk-tabs { display: flex; gap: 4px; margin: 28px 0 24px; border-bottom: 1px solid rgba(255,255,255,0.08); overflow-x: auto; } body[data-theme="redesign"] .lk-tab-btn { background: transparent; border: none; border-radius: 10px 10px 0 0; padding: 12px 16px; font-size: 13px; font-weight: 700; color: rgba(243, 238, 248, 0.55); cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 8px; position: relative; transition: color 0.15s; /* tabs are as of Phase 5b — kill the default underline */ text-decoration: none; } body[data-theme="redesign"] .lk-tab-btn:hover { color: rgba(255, 255, 255, 0.85); } body[data-theme="redesign"] .lk-tab-btn.on { color: #fff; background: rgba(255, 180, 180, 0.06); } body[data-theme="redesign"] .lk-tab-btn.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, #ffb4b4 0%, #8d4c4c 100%); border-radius: 999px; } body[data-theme="redesign"] .lk-tab-badge { background: linear-gradient(135deg, #ffb4b4 0%, #b47878 100%); color: #3d1d1d; font-size: 10px; font-weight: 900; padding: 2px 7px; border-radius: 999px; min-width: 18px; text-align: center; } body[data-theme="redesign"] .lk-tab-badge.hidden { display: none; } body[data-theme="redesign"] .lk-tab-panel { display: none; padding-top: 8px; } body[data-theme="redesign"] .lk-tab-panel.on { display: block; } /* ── Modal vocabulary (Phase 3 deferred port) ─────────────── Map every existing .lk-modal-* class to the redesign modal pattern so opening any modal in the vault — by JS toggling .on on its .lk-modal-wrap — adopts the rose-glass treatment automatically. JS untouched. */ body[data-theme="redesign"] .lk-modal-wrap { position: fixed; inset: 0; background: radial-gradient(800px 600px at 50% 50%, rgba(140, 60, 70, 0.28), transparent 65%), rgba(8, 6, 14, 0.72); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); display: none; align-items: center; justify-content: center; padding: 24px; z-index: 200; } body[data-theme="redesign"] .lk-modal-wrap.on { display: flex; animation: lk-backdrop-in 0.22s ease-out both; } @keyframes lk-backdrop-in { from { opacity: 0; } to { opacity: 1; } } body[data-theme="redesign"] .lk-modal { width: min(560px, 100%); max-height: calc(100vh - 48px); overflow: hidden; display: flex; flex-direction: column; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 22px; box-shadow: 0 32px 80px -24px rgba(0,0,0,0.55); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); animation: lk-card-in 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) both; } @keyframes lk-card-in { from { opacity: 0; transform: scale(0.94) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* Wider modals — radar-settings + takedown have a lot of content, matching the deck's modal-card-lg sizing. */ body[data-theme="redesign"] #radar-settings-modal .lk-modal, body[data-theme="redesign"] #takedown-modal .lk-modal { width: min(720px, 100%); } body[data-theme="redesign"] .lk-modal-head { padding: 24px 28px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); position: relative; display: block; } body[data-theme="redesign"] .lk-modal-title { font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -0.01em; margin: 0 0 4px; line-height: 1.25; } body[data-theme="redesign"] .lk-modal-sub { font-size: 13px; line-height: 1.55; color: rgba(243,238,248, 0.65); margin: 0; } body[data-theme="redesign"] .lk-modal-x { position: absolute; top: 18px; right: 18px; width: 32px; height: 32px; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: rgba(243,238,248, 0.7); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s; } body[data-theme="redesign"] .lk-modal-x:hover { background: rgba(255,255,255,0.08); color: #fff; } body[data-theme="redesign"] .lk-modal-x i { width: 16px; height: 16px; } body[data-theme="redesign"] .lk-modal-body { padding: 20px 28px; overflow: auto; /* iOS Safari momentum-scroll hint — see .modal-body comment. */ -webkit-overflow-scrolling: touch; font-size: 14px; line-height: 1.6; color: rgba(243,238,248, 0.85); flex: 1; } body[data-theme="redesign"] .lk-modal-body p { margin: 0 0 12px; } body[data-theme="redesign"] .lk-modal-body p:last-child { margin-bottom: 0; } body[data-theme="redesign"] .lk-modal-foot { padding: 16px 28px 22px; border-top: 1px solid rgba(255,255,255,0.06); display: flex; gap: 10px; justify-content: flex-end; align-items: center; } /* The legally-loaded modals get the rose accent strip. */ body[data-theme="redesign"] #consent-modal .lk-modal, body[data-theme="redesign"] #license-accept-modal .lk-modal, body[data-theme="redesign"] #takedown-modal .lk-modal { position: relative; } body[data-theme="redesign"] #consent-modal .lk-modal::before, body[data-theme="redesign"] #license-accept-modal .lk-modal::before, body[data-theme="redesign"] #takedown-modal .lk-modal::before { content: ""; display: block; height: 3px; background: linear-gradient(90deg, #ffb4b4 0%, #8d4c4c 100%); } /* Form bits inside modals */ body[data-theme="redesign"] .lk-form-label { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(243,238,248, 0.62); margin: 14px 0 6px; } body[data-theme="redesign"] .lk-form-label:first-child { margin-top: 0; } body[data-theme="redesign"] .lk-form-input { width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 12px; background: rgba(0,0,0,0.32); border: 1px solid rgba(255,255,255,0.1); color: #fff; font-family: inherit; font-size: 14px; transition: border-color 0.15s, background 0.15s; } body[data-theme="redesign"] .lk-form-input::placeholder { color: rgba(243,238,248, 0.4); } body[data-theme="redesign"] .lk-form-input:focus { outline: none; border-color: rgba(255,180,180, 0.55); background: rgba(0,0,0,0.42); } /* Doc panel (consent text, license terms) */ body[data-theme="redesign"] .lk-doc { padding: 16px 18px; background: rgba(0,0,0,0.32); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; font-size: 13px; line-height: 1.6; color: rgba(243,238,248, 0.78); margin-bottom: 14px; } body[data-theme="redesign"] .lk-doc h4 { font-size: 13px; font-weight: 800; color: #fff; margin: 16px 0 6px; letter-spacing: -0.005em; } body[data-theme="redesign"] .lk-doc h4:first-child { margin-top: 0; } body[data-theme="redesign"] .lk-doc p { margin: 0 0 10px; } body[data-theme="redesign"] .lk-doc strong { color: #fff; } /* Acknowledgement checkbox row inside modals */ body[data-theme="redesign"] .lk-check { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: rgba(255, 180, 180, 0.06); border: 1px solid rgba(255, 180, 180, 0.22); border-radius: 12px; font-size: 12px; line-height: 1.5; color: rgba(243,238,248, 0.85); cursor: pointer; margin-bottom: 8px; } body[data-theme="redesign"] .lk-check input[type="checkbox"] { flex: none; width: 18px; height: 18px; border-radius: 5px; border: 1px solid rgba(255,255,255,0.2); background: rgba(0,0,0,0.32); appearance: none; cursor: pointer; position: relative; margin-top: 1px; } body[data-theme="redesign"] .lk-check input[type="checkbox"]:checked { background: linear-gradient(135deg, #ffb4b4 0%, #b47878 100%); border-color: transparent; } body[data-theme="redesign"] .lk-check input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #3d1d1d; border-width: 0 2px 2px 0; transform: rotate(45deg); } body[data-theme="redesign"] .lk-check-text { flex: 1; } /* Signature canvas inside modals — keep white background so the ink stays high-contrast. */ body[data-theme="redesign"] .lk-sig-wrap { position: relative; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; background: rgba(255,255,255,0.96); overflow: hidden; } body[data-theme="redesign"] .lk-sig-canvas { display: block; width: 100%; height: 140px; cursor: crosshair; touch-action: none; background: rgba(255,255,255,0.96); } body[data-theme="redesign"] .lk-sig-clear { position: absolute; top: 8px; right: 8px; font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 6px; background: rgba(20,12,18,0.88); border: 1px solid rgba(255,255,255,0.12); color: #fff; cursor: pointer; font-family: inherit; } body[data-theme="redesign"] .lk-sig-clear:hover { background: rgba(20,12,18,0.95); } /* ID-status card inside id-modal */ body[data-theme="redesign"] .lk-id-status-card { display: flex; gap: 14px; align-items: center; padding: 16px 18px; background: rgba(255, 180, 180, 0.06); border: 1px solid rgba(255, 180, 180, 0.24); border-radius: 14px; margin-bottom: 14px; } body[data-theme="redesign"] .lk-id-status-icon { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(160deg, #ffb4b4 0%, #8d4c4c 100%); color: #3d1d1d; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } body[data-theme="redesign"] .lk-id-status-icon i { width: 22px; height: 22px; } body[data-theme="redesign"] .lk-id-status-state { font-size: 14px; font-weight: 800; color: #fff; } body[data-theme="redesign"] .lk-id-status-eta { font-size: 12px; color: rgba(243,238,248, 0.6); margin-top: 2px; } body[data-theme="redesign"] .lk-id-status-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; } /* Section block used in license + takedown modals */ body[data-theme="redesign"] .lk-modal-body .lk-section { background: rgba(0,0,0,0.32) !important; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 16px !important; margin-top: 0 !important; } /* btn-accent → primary; btn-ghost → ghost. The legacy classes are widely used inside modal-foot rows; we re-skin them here so we don't have to mass-rename in 9 places. */ body[data-theme="redesign"] .btn-accent { background: linear-gradient(135deg, #ffb4b4 0%, #b47878 100%) !important; color: #3d1d1d !important; border: none !important; box-shadow: 0 12px 32px -10px rgba(255,180,180,0.55); font-weight: 800 !important; } body[data-theme="redesign"] .btn-accent:hover { box-shadow: 0 14px 38px -8px rgba(255,180,180,0.65); transform: translateY(-1px); } body[data-theme="redesign"] .btn-ghost { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.1) !important; color: rgba(243,238,248, 0.85) !important; font-weight: 700 !important; } body[data-theme="redesign"] .btn-ghost:hover { background: rgba(255,255,255,0.08) !important; color: #fff !important; } /* ============================================================ Phase 6 — Capture Studio visual port Strategy mirrors Phase 5a's vault port: leave the production class names intact (likeness-studio.js's 2,054 lines reference .studio-*, .tut-* classes throughout), redefine their visuals under `body[data-theme="redesign"]`. JS untouched. What's covered: - studio top bar (back / brand / title / progress / save&exit / submit-for-review) - left side prompt list - main stage card (prompt header, instruction, script) - voice + video recorders (ring, record button, timer, level meter, beat-step pills, face chip) - playback rows (audio + video) - re-record / save-take action row - bottom nav (prev / progress) - step-flash toast (Take saved → notification) - first-capture tutorial overlay (.tut-bg / .tut-card / .tut-art / .tut-step / .tut-h1 / .tut-p / .tut-tip / .tut-pips / .tut-pip / .tut-actions / .tut-skip) What's NOT covered: - capture pipeline (recording, watermarking, fingerprint, upload) - .studio-card.advancing-out / .entering animation classes (kept from production CSS — they handle the step-in transition) ============================================================ */ /* ── Layout shell ──────────────────────────────────────────── */ body[data-theme="redesign"] .studio-layout { min-height: 100vh; background: transparent; display: flex; flex-direction: column; } body[data-theme="redesign"] .studio-top { background: rgba(20, 12, 22, 0.7); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); border-bottom: 1px solid rgba(255,255,255,0.06); padding: 14px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } body[data-theme="redesign"] .studio-top-left { display: flex; align-items: center; gap: 14px; } body[data-theme="redesign"] .studio-back { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: rgba(243,238,248, 0.85); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.15s; } body[data-theme="redesign"] .studio-back:hover { background: rgba(255,255,255,0.08); color: #fff; } body[data-theme="redesign"] .studio-brand img { filter: invert(1) brightness(1.05); opacity: 0.85; height: 22px; } body[data-theme="redesign"] .studio-top-divider { width: 1px; height: 24px; background: rgba(255,255,255,0.1); } body[data-theme="redesign"] .studio-title { font-size: 13px; font-weight: 800; color: #fff; letter-spacing: -0.005em; } body[data-theme="redesign"] .studio-progress { font-size: 11px; font-weight: 600; color: rgba(243,238,248, 0.55); letter-spacing: 0.04em; } /* Studio main split: side + stage */ body[data-theme="redesign"] .studio-main { display: grid; grid-template-columns: 280px 1fr; gap: 24px; padding: 24px 28px 80px; flex: 1; max-width: 1280px; width: 100%; margin: 0 auto; box-sizing: border-box; } @media (max-width: 900px) { body[data-theme="redesign"] .studio-main { grid-template-columns: 1fr; } } /* Side prompt list */ body[data-theme="redesign"] .studio-side { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; padding: 18px 14px; height: fit-content; position: sticky; top: 90px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } body[data-theme="redesign"] .studio-side-title { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,180,180, 0.85); padding: 0 6px 12px; border-bottom: 1px solid rgba(255,255,255,0.06); margin-bottom: 8px; } /* Prompt items injected by JS via #prompt-list */ body[data-theme="redesign"] .studio-prompt-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; cursor: pointer; transition: background 0.15s; color: rgba(243,238,248, 0.7); } body[data-theme="redesign"] .studio-prompt-item:hover { background: rgba(255,255,255,0.04); color: #fff; } /* JS toggles `.on` (not `.current`) — see renderPromptList() in likeness-studio.js. `.locked` is also possible (a future prompt you can't jump to yet). */ body[data-theme="redesign"] .studio-prompt-item.on { background: rgba(255,180,180, 0.08); color: #fff; } body[data-theme="redesign"] .studio-prompt-item.on::before { content: ""; width: 3px; height: 18px; border-radius: 2px; background: linear-gradient(180deg, #ffb4b4 0%, #8d4c4c 100%); flex: none; } body[data-theme="redesign"] .studio-prompt-item.locked { opacity: 0.45; cursor: not-allowed; } body[data-theme="redesign"] .studio-prompt-num { font-size: 11px; font-weight: 800; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.06); color: rgba(243,238,248, 0.7); display: inline-flex; align-items: center; justify-content: center; flex: none; } body[data-theme="redesign"] .studio-prompt-item.done .studio-prompt-num { background: linear-gradient(135deg, #4ade80 0%, #16a34a 100%); color: #052e16; } body[data-theme="redesign"] .studio-prompt-item.on .studio-prompt-num { background: linear-gradient(135deg, #ffb4b4 0%, #b47878 100%); color: #3d1d1d; } body[data-theme="redesign"] .studio-prompt-title { font-size: 13px; font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body[data-theme="redesign"] .studio-prompt-cat { font-size: 10px; color: rgba(243,238,248, 0.45); letter-spacing: 0.06em; text-transform: uppercase; } /* Stage */ body[data-theme="redesign"] .studio-stage { display: flex; flex-direction: column; gap: 24px; min-width: 0; } body[data-theme="redesign"] .studio-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 22px; padding: 36px 36px 32px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 24px 60px -24px rgba(0,0,0,0.5); } body[data-theme="redesign"] .studio-cat { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,180,180, 0.85); margin-bottom: 12px; } body[data-theme="redesign"] .studio-prompt-head { font-size: 28px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.15; color: #fff; margin: 0 0 12px; } body[data-theme="redesign"] .studio-instruction { font-size: 14px; line-height: 1.6; color: rgba(243,238,248, 0.72); margin-bottom: 20px; } body[data-theme="redesign"] .studio-script { background: rgba(0,0,0,0.32); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 18px 20px; font-size: 15px; line-height: 1.65; color: rgba(243,238,248, 0.88); margin-bottom: 24px; } /* ── Studio S6 (voice-alignment / karaoke highlighting) ───────── The karaoke feature was REMOVED 2026-05-18. Browser SpeechRecognition was too unreliable on diverse voices, and the visible misses distracted creators mid-take. See: docs/RELEASES/2026-05-18-studio-s6-removal.md for the full removal rationale. All `.voice-track-badge`, `.voice-skip-btn`, `.voice-aligned`, `.word.*` rules are gone — no DOM in the studio renders them anymore. ────────────────────────────────────────────────────────────── */ /* Recorder common bits */ body[data-theme="redesign"] .studio-recorder { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 0; } body[data-theme="redesign"] .studio-recwrap { position: relative; width: 128px; height: 128px; } body[data-theme="redesign"] .studio-ring { position: absolute; inset: 0; width: 128px; height: 128px; transform: rotate(-90deg); } body[data-theme="redesign"] .studio-ring-track { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 4; } body[data-theme="redesign"] .studio-ring-fill { fill: none; stroke: url(#studio-ring-grad); /* JS may override */ stroke: #ffb4b4; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 364.4; stroke-dashoffset: 364.4; transition: stroke-dashoffset 0.16s linear; filter: drop-shadow(0 0 12px rgba(255,180,180,0.5)); } body[data-theme="redesign"] .studio-recbtn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 88px; height: 88px; border-radius: 50%; background: linear-gradient(160deg, #ffb4b4 0%, #8d4c4c 100%); color: #3d1d1d; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 60px rgba(255,180,180,0.5), inset 0 0 24px rgba(255,255,255,0.12); transition: transform 0.18s, box-shadow 0.18s; } body[data-theme="redesign"] .studio-recbtn:hover { transform: translate(-50%, -50%) scale(1.04); box-shadow: 0 0 80px rgba(255,180,180,0.65), inset 0 0 24px rgba(255,255,255,0.18); } body[data-theme="redesign"] .studio-recbtn[aria-pressed="true"] { background: linear-gradient(160deg, #ef4444 0%, #991b1b 100%); color: #fef2f2; box-shadow: 0 0 80px rgba(239,68,68,0.55); animation: studio-rec-pulse 1.4s ease-in-out infinite; } @keyframes studio-rec-pulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.04); } } body[data-theme="redesign"] .studio-recbtn i { width: 32px; height: 32px; } body[data-theme="redesign"] .studio-timer { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: #fff; margin-top: 12px; } body[data-theme="redesign"] .studio-count { font-size: 12px; font-weight: 600; color: rgba(243,238,248, 0.55); letter-spacing: 0.04em; } /* Audio level meter */ body[data-theme="redesign"] .studio-level { width: min(360px, 100%); height: 4px; background: rgba(255,255,255,0.06); border-radius: 999px; margin: 14px auto 0; overflow: hidden; } body[data-theme="redesign"] .studio-level-fill { height: 100%; background: linear-gradient(90deg, #4ade80 0%, #ffb4b4 70%, #ef4444 100%); border-radius: 999px; transition: width 0.08s linear; width: 0%; } body[data-theme="redesign"] .studio-hint { font-size: 13px; color: rgba(243,238,248, 0.6); margin-top: 14px; text-align: center; } /* Action row (re-record + save-take) */ body[data-theme="redesign"] .studio-actions { display: flex; gap: 12px; justify-content: center; margin-top: 18px; flex-wrap: wrap; } body[data-theme="redesign"] .studio-rerecord { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.1) !important; color: rgba(243,238,248, 0.85) !important; padding: 12px 22px !important; border-radius: 12px !important; font-size: 13px !important; font-weight: 700 !important; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-family: inherit; transition: all 0.15s; } body[data-theme="redesign"] .studio-rerecord:hover { background: rgba(255,255,255,0.08) !important; color: #fff !important; } body[data-theme="redesign"] .studio-save-big { background: linear-gradient(135deg, #ffb4b4 0%, #b47878 100%) !important; color: #3d1d1d !important; border: none !important; padding: 12px 24px !important; border-radius: 12px !important; font-size: 13px !important; font-weight: 800 !important; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-family: inherit; box-shadow: 0 12px 32px -10px rgba(255,180,180,0.55); transition: all 0.15s; } body[data-theme="redesign"] .studio-save-big:hover { box-shadow: 0 14px 38px -8px rgba(255,180,180,0.65); transform: translateY(-1px); } body[data-theme="redesign"] .studio-save-big i { width: 16px; height: 16px; } /* Video preview wrap (face + body recorders) */ body[data-theme="redesign"] .studio-video-wrap { position: relative; width: 100%; max-width: 560px; margin: 0 auto; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 24px 60px -16px rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.08); } body[data-theme="redesign"] .studio-video, body[data-theme="redesign"] .studio-playback-video { border-radius: 18px; background: #000; } body[data-theme="redesign"] .studio-beat-steps { position: absolute; top: 14px; left: 14px; display: flex; gap: 6px; padding: 6px 10px; background: rgba(0,0,0,0.55); border-radius: 999px; backdrop-filter: blur(8px); } body[data-theme="redesign"] .studio-beat-step { width: 24px; height: 4px; border-radius: 999px; background: rgba(255,255,255,0.18); } body[data-theme="redesign"] .studio-beat-step.active { background: linear-gradient(90deg, #ffb4b4 0%, #8d4c4c 100%); box-shadow: 0 0 8px rgba(255,180,180,0.5); } body[data-theme="redesign"] .studio-beat-step.done { background: #4ade80; } body[data-theme="redesign"] .studio-beat { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); } body[data-theme="redesign"] .studio-beat-pill { background: rgba(0,0,0,0.65); border: 1px solid rgba(255,255,255,0.14); color: #fff; font-size: 13px; font-weight: 700; padding: 8px 16px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; backdrop-filter: blur(12px); } body[data-theme="redesign"] .studio-beat-dot { width: 8px; height: 8px; border-radius: 50%; background: #ffb4b4; box-shadow: 0 0 8px rgba(255,180,180,0.6); } body[data-theme="redesign"] .studio-beat-pill.beat-done .studio-beat-dot { background: #4ade80; } body[data-theme="redesign"] .studio-beat-check { display: none; color: #4ade80; } body[data-theme="redesign"] .studio-beat-pill.beat-done .studio-beat-check { display: inline-flex; } body[data-theme="redesign"] .studio-beat-pill.beat-done .studio-beat-dot { display: none; } body[data-theme="redesign"] .studio-face-chip { position: absolute; top: 14px; right: 14px; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.14); color: rgba(243,238,248, 0.9); font-size: 11px; font-weight: 700; padding: 6px 12px; border-radius: 999px; cursor: pointer; backdrop-filter: blur(8px); } /* Bottom nav row */ body[data-theme="redesign"] .studio-nav { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; margin-top: 8px; } body[data-theme="redesign"] .studio-nav-btn { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); color: rgba(243,238,248, 0.85); font-size: 13px; font-weight: 700; padding: 10px 16px; border-radius: 10px; cursor: pointer; font-family: inherit; transition: all 0.15s; } body[data-theme="redesign"] .studio-nav-btn:hover { background: rgba(255,255,255,0.08); color: #fff; } body[data-theme="redesign"] .studio-nav-btn:disabled { opacity: 0.4; cursor: not-allowed; } /* Step-flash toast (Take saved → notification) */ body[data-theme="redesign"] .studio-step-flash { background: rgba(20, 12, 18, 0.95) !important; border: 1px solid rgba(74, 222, 128, 0.4); color: #fff !important; border-radius: 12px !important; padding: 12px 22px !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0 !important; box-shadow: 0 18px 40px rgba(0,0,0,0.4) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } body[data-theme="redesign"] .studio-step-flash i { color: #4ade80; } /* ── Tutorial overlay ──────────────────────────────────────── */ body[data-theme="redesign"] .tut-bg { position: fixed; inset: 0; background: radial-gradient(800px 600px at 50% 50%, rgba(140, 60, 70, 0.32), transparent 65%), rgba(8, 6, 14, 0.82); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); display: none; align-items: center; justify-content: center; padding: 24px; z-index: 300; } body[data-theme="redesign"] .tut-bg.on, body[data-theme="redesign"] .tut-bg[data-on] { display: flex; animation: tut-fade-in 0.28s ease-out both; } @keyframes tut-fade-in { from { opacity: 0; } to { opacity: 1; } } body[data-theme="redesign"] .tut-card { width: min(520px, 100%); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); box-shadow: 0 32px 80px -20px rgba(0,0,0,0.6); animation: tut-card-in 0.36s cubic-bezier(0.34, 1.56, 0.64, 1) both; } @keyframes tut-card-in { from { opacity: 0; transform: scale(0.94) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } } body[data-theme="redesign"] .tut-art { background: radial-gradient(circle at 30% 30%, rgba(255,180,180,0.45), transparent 60%), linear-gradient(160deg, #ffb4b4 0%, #8d4c4c 100%); color: #3d1d1d; padding: 36px; display: flex; align-items: center; justify-content: center; } body[data-theme="redesign"] .tut-art i { width: 48px; height: 48px; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.25)); } body[data-theme="redesign"] .tut-body { padding: 24px 28px 16px; } body[data-theme="redesign"] .tut-step { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,180,180, 0.85); margin: 0 0 8px; } body[data-theme="redesign"] .tut-h1 { font-size: 24px; font-weight: 900; letter-spacing: -0.02em; color: #fff; margin: 0 0 12px; } body[data-theme="redesign"] .tut-p { font-size: 14px; line-height: 1.55; color: rgba(243,238,248, 0.78); margin: 0 0 14px; } body[data-theme="redesign"] .tut-tip { background: rgba(255,180,180, 0.06); border: 1px solid rgba(255,180,180, 0.22); border-radius: 10px; padding: 10px 14px; font-size: 12px; line-height: 1.55; color: rgba(255, 220, 220, 0.95); } body[data-theme="redesign"] .tut-foot { padding: 16px 24px 22px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255,255,255,0.06); gap: 14px; } body[data-theme="redesign"] .tut-pips { display: flex; gap: 6px; } body[data-theme="redesign"] .tut-pip { width: 22px; height: 4px; border-radius: 999px; background: rgba(255,255,255,0.14); transition: background 0.2s; } /* Legacy JS toggles `.active` (not `.on` like I first wrote) — match what likeness-studio.js's renderTutorial() actually sets. */ body[data-theme="redesign"] .tut-pip.active { background: linear-gradient(90deg, #ffb4b4 0%, #8d4c4c 100%); box-shadow: 0 0 8px rgba(255,180,180,0.4); } body[data-theme="redesign"] .tut-actions { display: flex; gap: 8px; } body[data-theme="redesign"] .tut-skip { background: none; border: none; color: rgba(243,238,248, 0.55); font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; padding: 6px 10px; transition: color 0.15s; } body[data-theme="redesign"] .tut-skip:hover { color: #fff; } /* QC alert (rendered in JS for poor recording quality) */ body[data-theme="redesign"] .studio-qc-alert { background: rgba(245, 158, 11, 0.08) !important; border: 1px solid rgba(245, 158, 11, 0.32) !important; color: #fde68a !important; border-radius: 12px !important; } body[data-theme="redesign"] .studio-qc-alert strong { color: #fff !important; } /* ============================================================ Phase 7 — Legal pages (Terms / Privacy) Long-read legal documents linked from every signup checkbox and every footer. Pre-Phase-7 they used a plain stylesheet with system font + black text on white, which looked broken when a creator clicked through from the redesigned signup. The .legal-shell pattern matches the rest of the redesign: wine background (from foundation tokens), glass content card, rose accents on links + emphasis. Used by: backend/legal/tos.html, backend/legal/privacy.html ============================================================ */ body[data-theme="redesign"] .legal-shell { max-width: 800px; margin: 0 auto; padding: 120px 24px 96px; color: rgba(243, 238, 248, 0.85); } body[data-theme="redesign"] .legal-shell h1 { font-size: 44px; font-weight: 900; letter-spacing: -0.025em; line-height: 1.05; color: #fff; margin: 0 0 12px; } body[data-theme="redesign"] .legal-shell .legal-meta { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 180, 180, 0.85); margin-bottom: 36px; } body[data-theme="redesign"] .legal-shell .legal-placeholder { background: rgba(245, 158, 11, 0.06); border: 1px solid rgba(245, 158, 11, 0.32); border-radius: 14px; padding: 14px 18px; font-size: 13px; line-height: 1.6; color: #fde68a; margin-bottom: 32px; } body[data-theme="redesign"] .legal-shell .legal-placeholder code { background: rgba(0,0,0,0.32); border: 1px solid rgba(255,255,255,0.08); padding: 2px 6px; border-radius: 4px; color: #fff; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; } body[data-theme="redesign"] .legal-shell h2 { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; color: #fff; margin: 36px 0 12px; } body[data-theme="redesign"] .legal-shell p, body[data-theme="redesign"] .legal-shell li { font-size: 15px; line-height: 1.7; color: rgba(243, 238, 248, 0.85); margin: 0 0 12px; } body[data-theme="redesign"] .legal-shell ul, body[data-theme="redesign"] .legal-shell ol { padding-left: 22px; margin: 0 0 16px; } body[data-theme="redesign"] .legal-shell li { margin-bottom: 10px; } body[data-theme="redesign"] .legal-shell li::marker { color: rgba(255, 180, 180, 0.65); } /* 2026-05-16 (v1.1) — DMCA designated-agent footer block. Replaced the original prominent rose-tinted card (the `.legal-contact` class shipped in B2) with a small, muted footer-style block per user direction: keep the §512(c)(2) required name/address/phone/email publicly accessible on the page, but de-emphasize visually. Sits at the end of /legal/dmca.html with #agent anchor so the in-page links to "Royall's Designated Agent" still resolve cleanly. */ body[data-theme="redesign"] .legal-shell .legal-agent-footer { margin-top: 48px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.06); font-size: 12px; line-height: 1.7; color: rgba(243, 238, 248, 0.42); letter-spacing: 0.005em; } body[data-theme="redesign"] .legal-shell .legal-agent-footer strong { color: rgba(243, 238, 248, 0.62); font-weight: 700; } body[data-theme="redesign"] .legal-shell .legal-agent-footer a { color: rgba(255, 180, 180, 0.6); border-bottom-color: rgba(255, 180, 180, 0.18); } body[data-theme="redesign"] .legal-shell .legal-agent-footer a:hover { color: rgba(255, 208, 208, 0.85); border-bottom-color: rgba(255, 180, 180, 0.36); } body[data-theme="redesign"] .legal-shell strong { color: #fff; font-weight: 800; } body[data-theme="redesign"] .legal-shell a { color: #ffb4b4; text-decoration: none; font-weight: 700; border-bottom: 1px solid rgba(255, 180, 180, 0.4); transition: color 0.15s, border-color 0.15s; } body[data-theme="redesign"] .legal-shell a:hover { color: #ffd0d0; border-bottom-color: rgba(255, 180, 180, 0.85); } body[data-theme="redesign"] .legal-shell .legal-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 180, 180, 0.32), transparent); margin: 48px 0 36px; } /* ============================================================ Phase 8 — Buyer (lab) portal visual port Strategy mirrors Phase 5a (vault visual port). The company stylesheet at backend/company/css/style.css (1,234 lines) already uses CSS custom properties (--bg, --surface, --accent, etc.) so most of the 237 distinct classes can be re-skinned by remapping those variables under `body[data-theme="redesign"]`. The cascade does the rest. Targeted overrides on top for chrome that has hard-coded colors or layout (sidebar, top header, primary card, avatar dropdown, badges, tables). Pages covered: - company/dashboard.html (Likeness Marketplace catalog) - company/orders.html (order history list) - company/order-builder.html (bulk-license cart) - company/order-detail.html (single-order detail) What's NOT covered: - company/training-deals.html — LEGACY paused, skip. - js/chat-widget.js — separate render, deferred to cleanup. ============================================================ */ /* CSS variable remap — wine + rose palette mapped onto the tokens that the company stylesheet consumes. The !important matches the dark-mode override in company/css/style.css line 54 so we win the cascade against html[data-theme="dark"]. */ body[data-theme="redesign"] { --bg: transparent !important; --surface: rgba(255,255,255,0.04) !important; --surface-2: rgba(255,255,255,0.06) !important; --surface-3: rgba(255,255,255,0.08) !important; --border: rgba(255,255,255,0.08) !important; --border-2: rgba(255,255,255,0.14) !important; --text: #fff !important; --text-2: rgba(243,238,248, 0.85) !important; --text-muted: rgba(243,238,248, 0.55) !important; --accent: #ffb4b4 !important; --accent-dim: #d18f8f !important; --accent-soft: rgba(255,180,180, 0.10) !important; --accent-glow: rgba(255,180,180, 0.18) !important; --accent-text: #3d1d1d !important; --green: #4ade80 !important; --amber: #fb923c !important; --red: #ef4444 !important; --blue: #38bdf8 !important; --purple: #ffb4b4 !important; --shadow-sm: 0 1px 3px rgba(0,0,0,0.4) !important; --shadow-md: 0 8px 24px -8px rgba(0,0,0,0.55) !important; --shadow-lg: 0 20px 48px -16px rgba(0,0,0,0.6) !important; --shadow-xl: 0 32px 80px -24px rgba(0,0,0,0.65) !important; } /* The body background needs to be the foundation gradient; the var-remap above set --bg to transparent so the gradient underneath shows through. */ body[data-theme="redesign"].dash-body, body[data-theme="redesign"] .dash-layout { background: transparent !important; min-height: 100vh; } /* ── Sidebar (left rail) ───────────────────────────────────── */ body[data-theme="redesign"] .sidebar { background: rgba(20, 12, 22, 0.7) !important; border-right: 1px solid rgba(255,255,255,0.06) !important; backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); } body[data-theme="redesign"] .sidebar-logo img { filter: invert(1) brightness(1.05); opacity: 0.85; } body[data-theme="redesign"] .nav-item { color: rgba(243,238,248, 0.65) !important; background: transparent !important; border: none !important; border-radius: 12px !important; font-weight: 700; transition: all 0.15s; } body[data-theme="redesign"] .nav-item:hover { background: rgba(255,255,255,0.04) !important; color: #fff !important; } body[data-theme="redesign"] .nav-item.active { background: linear-gradient(135deg, rgba(255,180,180,0.18), rgba(141,76,76,0.12)) !important; color: #fff !important; box-shadow: 0 0 0 1px rgba(255,180,180,0.24) inset; } body[data-theme="redesign"] .nav-item i { width: 16px; height: 16px; } body[data-theme="redesign"] .nav-new-pill { background: linear-gradient(135deg, #ffb4b4 0%, #b47878 100%) !important; color: #3d1d1d !important; font-size: 9px; font-weight: 900; letter-spacing: 0.06em; padding: 2px 7px; border-radius: 999px; } /* ── Top header ────────────────────────────────────────────── */ body[data-theme="redesign"] .dash-header { background: rgba(20, 12, 22, 0.7) !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); padding: 16px 28px !important; } body[data-theme="redesign"] .dash-header-title { font-size: 20px !important; font-weight: 800 !important; color: #fff !important; letter-spacing: -0.01em !important; } /* Avatar + dropdown */ body[data-theme="redesign"] .avatar-circle { background: linear-gradient(160deg, #ffb4b4 0%, #8d4c4c 100%) !important; color: #3d1d1d !important; font-weight: 900; box-shadow: 0 0 24px rgba(255,180,180, 0.32); } body[data-theme="redesign"] .avatar-circle:hover { box-shadow: 0 0 32px rgba(255,180,180, 0.5); transform: scale(1.04); } body[data-theme="redesign"] .avatar-dropdown { background: rgba(20, 12, 22, 0.95) !important; border: 1px solid rgba(255,255,255,0.1) !important; border-radius: 14px !important; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 24px 60px -20px rgba(0,0,0,0.55) !important; } body[data-theme="redesign"] .avatar-dd-name { color: #fff !important; font-weight: 800; } body[data-theme="redesign"] .avatar-dd-email { color: rgba(243,238,248, 0.6) !important; } body[data-theme="redesign"] .avatar-dd-item { background: transparent !important; color: rgba(243,238,248, 0.85) !important; border-radius: 8px; font-weight: 700; } body[data-theme="redesign"] .avatar-dd-item:hover { background: rgba(255,255,255,0.06) !important; color: #fff !important; } /* ── Buttons ───────────────────────────────────────────────── */ body[data-theme="redesign"] .btn-primary { background: linear-gradient(135deg, #ffb4b4 0%, #b47878 100%) !important; color: #3d1d1d !important; font-weight: 800; border: none !important; box-shadow: 0 12px 32px -10px rgba(255,180,180,0.55); } body[data-theme="redesign"] .btn-primary:hover:not(:disabled) { box-shadow: 0 14px 38px -8px rgba(255,180,180,0.65); transform: translateY(-1px); background: linear-gradient(135deg, #ffd0d0 0%, #c69090 100%) !important; } body[data-theme="redesign"] .btn-ghost { background: rgba(255,255,255,0.04) !important; color: rgba(243,238,248, 0.85) !important; border: 1px solid rgba(255,255,255,0.1) !important; font-weight: 700; } body[data-theme="redesign"] .btn-ghost:hover:not(:disabled) { background: rgba(255,255,255,0.08) !important; color: #fff !important; border-color: rgba(255,255,255,0.18) !important; } body[data-theme="redesign"] .btn-danger { background: rgba(239,68,68,0.16) !important; border: 1px solid rgba(239,68,68,0.36) !important; color: #fca5a5 !important; font-weight: 700; } body[data-theme="redesign"] .btn-danger:hover:not(:disabled) { background: rgba(239,68,68,0.24) !important; color: #fecaca !important; } /* ── Cards / glass surfaces ───────────────────────────────── */ body[data-theme="redesign"] .card, body[data-theme="redesign"] .deal-card, body[data-theme="redesign"] .lk-card, body[data-theme="redesign"] .pricing-card, body[data-theme="redesign"] .request-card, body[data-theme="redesign"] .order-card, body[data-theme="redesign"] .stat-card, body[data-theme="redesign"] .empty-state { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 16px !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } /* Form inputs across the company portal */ body[data-theme="redesign"] .input, body[data-theme="redesign"] input[type="text"], body[data-theme="redesign"] input[type="email"], body[data-theme="redesign"] input[type="number"], body[data-theme="redesign"] input[type="search"], body[data-theme="redesign"] input[type="tel"], body[data-theme="redesign"] input[type="url"], body[data-theme="redesign"] textarea, body[data-theme="redesign"] select { background: rgba(0,0,0,0.32) !important; border: 1px solid rgba(255,255,255,0.1) !important; color: #fff !important; border-radius: 12px; } body[data-theme="redesign"] .input::placeholder, body[data-theme="redesign"] textarea::placeholder, body[data-theme="redesign"] input::placeholder { color: rgba(243,238,248, 0.4) !important; } body[data-theme="redesign"] .input:focus, body[data-theme="redesign"] textarea:focus, body[data-theme="redesign"] input:focus, body[data-theme="redesign"] select:focus { outline: none; border-color: rgba(255,180,180, 0.55) !important; background: rgba(0,0,0,0.42) !important; } /* Dropdown selects need their option rows to be readable too */ body[data-theme="redesign"] select option { background: #1e1010; color: #fff; } /* ── Badges (deal status, pricing, deal-badge-active etc.) ──── */ body[data-theme="redesign"] .deal-badge { background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.1) !important; color: rgba(243,238,248, 0.85) !important; } body[data-theme="redesign"] .deal-badge-active { background: rgba(74, 222, 128, 0.12) !important; border-color: rgba(74, 222, 128, 0.36) !important; color: #86efac !important; } body[data-theme="redesign"] .deal-badge-default { background: rgba(255, 180, 180, 0.10) !important; border-color: rgba(255, 180, 180, 0.32) !important; color: #ffd0d0 !important; } /* ── Hero / pipeline / stats blocks (analytics dashboard) ──── */ body[data-theme="redesign"] .an-hero-card, body[data-theme="redesign"] .an-stat, body[data-theme="redesign"] .an-pipeline { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 16px !important; backdrop-filter: blur(20px); } body[data-theme="redesign"] .an-hero-label, body[data-theme="redesign"] .an-stat-label, body[data-theme="redesign"] .an-pipe-label, body[data-theme="redesign"] .an-section-label { color: rgba(243,238,248, 0.55) !important; } body[data-theme="redesign"] .an-hero-value, body[data-theme="redesign"] .an-stat-value, body[data-theme="redesign"] .an-pipe-value { color: #fff !important; } body[data-theme="redesign"] .an-green { color: #86efac !important; } body[data-theme="redesign"] .an-amber { color: #fdba74 !important; } body[data-theme="redesign"] .an-red { color: #fca5a5 !important; } body[data-theme="redesign"] .an-hero-accent { background: linear-gradient(135deg, #ffd0d0 0%, #ffb4b4 50%, #8d4c4c 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ── Deal channel rows (legacy, low priority but commonly seen) ─ */ body[data-theme="redesign"] .deal-channel-item { background: rgba(0,0,0,0.24) !important; border: 1px solid rgba(255,255,255,0.06) !important; border-radius: 10px; } body[data-theme="redesign"] .deal-channel-link:hover { background: rgba(255,180,180, 0.06) !important; } body[data-theme="redesign"] .deal-channel-name { color: #fff !important; } body[data-theme="redesign"] .deal-channel-url { color: rgba(243,238,248, 0.5) !important; } body[data-theme="redesign"] .deal-channel-hours { color: rgba(255,180,180, 0.85) !important; } body[data-theme="redesign"] .deal-avatar { background: linear-gradient(160deg, #ffb4b4 0%, #8d4c4c 100%) !important; color: #3d1d1d !important; font-weight: 900; } body[data-theme="redesign"] .deal-amount { color: #ffd0d0 !important; font-weight: 800; } /* ── Tables (orders list) ──────────────────────────────────── */ body[data-theme="redesign"] table { background: transparent !important; } body[data-theme="redesign"] table th { background: rgba(255,255,255,0.04) !important; color: rgba(243,238,248, 0.6) !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } body[data-theme="redesign"] table td { border-bottom: 1px solid rgba(255,255,255,0.04) !important; color: rgba(243,238,248, 0.85) !important; } body[data-theme="redesign"] table tr:hover td { background: rgba(255,255,255,0.03) !important; } /* Display-class headlines */ body[data-theme="redesign"] .display-xl, body[data-theme="redesign"] .display-lg, body[data-theme="redesign"] .display-md { color: #fff !important; } /* Empty state messaging */ body[data-theme="redesign"] .empty-state { text-align: center; padding: 48px 32px !important; } body[data-theme="redesign"] .empty-state-title { color: #fff !important; } body[data-theme="redesign"] .empty-state-sub { color: rgba(243,238,248, 0.6) !important; } /* Anim entrance kept from production CSS — visible on first paint */ body[data-theme="redesign"] .anim { /* preserved — production CSS handles the actual animation */ } /* ── Chat widget (Royall Concierge) overrides ─────────────── chat-widget.js injects its own