/* ═══════════════════════════════════════════════════════════════ CONTENT BUG DESIGN SYSTEM — SINGLE SOURCE OF TRUTH Every component, color, font, animation, card, button, wizard. DO NOT deviate from this. Copy-paste from here. ═══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════ 🚫 BLUR IS PERMANENTLY BANNED — NO EXCEPTIONS, EVER 🚫 ══════════════════════════════════════════════════════════════════ NEVER use ANY of these. Not once. Not for "ambient effects". Not for "glass". Not for overlays. NEVER: ✗ filter: blur(...) ✗ backdrop-filter: blur(...) ✗ -webkit-backdrop-filter: blur(...) ✗ SVG ✗ canvas/WebGL blur shaders Every blur effect on screen lags the entire portal. Depth is achieved via OPACITY + INSET HIGHLIGHTS + BOX-SHADOW + LAYERED GRADIENTS only. Drop-shadow filters ARE allowed (filter:drop-shadow). Other filters (brightness/invert/grayscale/saturate/hue-rotate) ARE allowed. If you're about to type `blur(` — STOP. Use box-shadow + opacity. ══════════════════════════════════════════════════════════════════ PERFORMANCE / MOTION ENFORCEMENT — TOP PRIORITY ══════════════════════════════════════════════════════════════════ 1. ALL portal-owned UI motion MUST target 60fps. Visible stutter, lag, tearing, or delay in portal-owned animations is a DEFECT. 2. ONLY animate transform and opacity. NEVER animate width, height, top, left, margin, padding, or max-height for UI transitions. 3. Wizard step transitions: ≤150ms. Button/hover micro-interactions: ≤10ms. Modal open/close: ≤200ms. No animation >300ms on UI. */ /* ══════════════════════════════════════════════════════════════════ DESIGN SYSTEM LOCK — Sean 2026-04-15. Canonical across ALL portal pages and embedded iframes. Later rules may override, but the spirit here is authoritative: TYPOGRAPHY ▸ Max font-weight anywhere is 500. No bold, ever. 600/700/800/900 inline styles are demoted at the end of this file. ▸ Default text color on dark theme: rgba(255,255,255,.92). Dim supporting text: rgba(255,255,255,.62). GLASS CONTAINERS (.shell-body-glass / .app-dock-inner::before) ▸ Background: vertical gradient from rgba(255,255,255,.035) at top to rgba(255,255,255,.14) at bottom. No mask. ▸ Inner border: 1px rgba(255,255,255,.14) + bottom highlight. ▸ No bottom-edge light sweep; top divider is enough. LEFT NAV (.sb-nav-item / .sb-nav-tile) ▸ Just the SVG icon + plain label. NO tile glass, NO outer pill. ▸ SVG 18×18, stroke-width 1.25. Label 13px/400. ▸ Active: icon opacity 1 + color .96 + 2px accent bar on the left. PROJECT CARDS (.pipeline-card) ▸ Row 1: [client avatar 26px] [project name 12.5px/500]. ▸ Row 2 (bottom): [status][type][V#][T#][grade] on the left, [timer][editor avatar 26px] on the right. ▸ All card pills unified: 22px height, 10.5px/500, 6px radius. ▸ Trial cards: type="FT" (yellow), yellow glow via box-shadow BEHIND the card (never over content). ══════════════════════════════════════════════════════════════════ */ /* ── ZERO-LAG PERFORMANCE ENFORCEMENT ── */ /* KILL all backdrop-filter globally — this is the #1 GPU bottleneck */ *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important} /* GPU-promote key containers */ .pv-shell,.ps-thread,.dock-bubble,.rv-ctx,.loading-wrap, .pipeline-card,.modal-bg,.cb-modal-bg{} /* ══ MOTION TIER SYSTEM — Content Bug Studio ══ Tier 0: Press/toggle 80ms sharp | Tier 1: Hover 150ms smooth Tier 2: Component 250ms spring | Tier 3: Page/panel 350ms spring RULE: transform + opacity ONLY. will-change on animated elements. */ *,*::before,*::after{transition-property:none;transition-duration:0ms} .btn,.sb-nav-item,.tab-btn,.dock-btn,.opt-card,.glass-card,.pipeline-card,.modal-close,[role="button"],button{ transition:transform 80ms var(--ease-sharp,cubic-bezier(.22,1,.36,1)),opacity 80ms var(--ease-sharp,cubic-bezier(.22,1,.36,1)),box-shadow 150ms var(--ease-smooth,cubic-bezier(.33,1,.68,1));} .glass-card:hover,.pipeline-card:hover,.btn:hover,.sb-nav-item:hover{transition-duration:150ms} .btn:active,.pipeline-card:active,.glass-card:active,.opt-card:active{transition-duration:80ms} .dropdown,.tooltip,.ctx-menu,.pvQualityMenu,[class*="menu"],[class*="popover"]{transition:opacity 200ms var(--ease-smooth,cubic-bezier(.33,1,.68,1)),transform 200ms var(--ease-spring,cubic-bezier(.34,1.56,.64,1));} input,textarea,select{transition:border-color 150ms var(--ease-smooth,cubic-bezier(.33,1,.68,1)),box-shadow 150ms var(--ease-smooth,cubic-bezier(.33,1,.68,1))} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; } } /* ── RESET ── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} [hidden]{display:none!important}body::after{content:none!important;display:none!important} ═══════════════════════════════════════════════ */ /* BG-DARK: Rich black with barely-visible navy hint */ /* ═══ CB UNIVERSAL BACKGROUND — canonical 2-layer stack ═══ Matches the marketing website (home.html / pricing.html / portfolio.html) exactly so the portal and the public site feel like one product: Layer 1 (top): --cb-glass-1-bg — white sheen that lifts the vibe Layer 2 (bottom): --cb-bg — deep navy → black gradient Fixed attachment = one paint, zero repaints on scroll. Glass shells (.glass-card, .cb-page-head, .section-card, etc.) sit on top of this bg. Used on: portal outermost shell + any standalone page (.bg-dark). Iframe pages stay transparent so the parent bg shows through. Sean 2026-04-22 — website-parity locked. */ .bg-dark,.shell{ background: var(--cb-glass-1-bg), var(--cb-bg) !important; background-attachment:fixed,fixed !important; background-repeat:no-repeat,no-repeat !important; background-size:100% 100vh,100% 100vh !important; } html:not(.bg-dark),body:not(.bg-light):not(.theme-light):not(.bg-dark),.page-shell{background:transparent !important} /* ABSOLUTE RULE — iframes in the portal NEVER paint their own background. Background always lives on the underlying shell glass. Sean 2026-04-16. */ iframe{background:transparent !important} /* ABSOLUTE RULE — ZERO decorative color dots anywhere. Sean 2026-04-16. */ .notif-dot,.th-event-dot,.ps-kanban-dot,.sb-nav-dot,.ch-th-msg-dot{display:none !important} /* ABSOLUTE RULE — SF Pro only, forever. Any element that tries to render with anything else inherits the SF Pro stack. Sean 2026-04-16. */ html,body,button,input,textarea,select{font-family:var(--cb-font-text) !important} /* Grid removed — clean gradient only, zero overlays */ /* ═══ PORTAL GLASS PRIMITIVES — reusable 3-layer look from portal sidebar ═══ .cb-shell = outer masked glass container (generalized from .app-dock-inner::before) .cb-card = inner frosted-faded card (generalized from .sb-nav-tile inline styles) Zero blur (backdrop-filter is globally banned). Depth via opacity + inset highlights. */ .cb-card{ background:linear-gradient(160deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.06) 40%, rgba(255,255,255,.03) 100%); border:1px solid rgba(255,255,255,.12); border-top-color:rgba(255,255,255,.2); border-radius:var(--r-lg); box-shadow: 0 2px 8px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.15); padding:var(--s3); } /* BG-NAVY: Dark blue/black void with ambient light bleed (for premium/tool pages) */ /* ── LAYOUT ── */ body{margin:0;padding:0;background:transparent} /* ── BG SECTION HEADER ── */ /* ═══════════════════════════════ TYPOGRAPHY ═══════════════════════════════ */ /* ═══════════════════════════════ COLOR SWATCHES ═══════════════════════════════ */ /* ═══════════════════════════════ GLASS CONTAINERS ═══════════════════════════════ */ /* Layer 2 glass — standard card. Shared with .section-card + .pipeline-card + .ps-kanban-col + .stat-card. */ .glass-card{background:var(--cb-glass-2-bg);border:var(--cb-glass-2-border);border-top-color:var(--cb-glass-2-border-top); border-radius:var(--r-2xl);padding:var(--card-lg);box-shadow:var(--cb-glass-2-shadow);position:relative;overflow:hidden; transition:transform 10ms var(--ease),box-shadow 10ms var(--ease);} .glass-card:hover{transform:translateY(-2px);box-shadow:var(--sh-3),0 8px 32px rgba(41,151,255,.08),0 0 20px rgba(15,30,60,.12)} .glass-card::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;z-index:1;pointer-events:none; background:linear-gradient(90deg,transparent,rgba(255,255,255,.30) 20%,rgba(255,255,255,.55) 50%,rgba(255,255,255,.30) 80%,transparent)} /* Login-style dissolving glass bubble — premium */ .glass-bubble{position:relative;padding:var(--s4) var(--s3) var(--s3)} .glass-bubble::before{content:'';position:absolute;inset:0;border-radius:var(--r-2xl); background:linear-gradient(180deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.06) 15%,rgba(255,255,255,.04) 30%,rgba(255,255,255,.025) 50%,rgba(255,255,255,.015) 72%,rgba(255,255,255,.006) 85%,transparent 100%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.18),0 8px 32px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.35),0 0 40px rgba(15,30,60,.08); -webkit-mask-image:linear-gradient(180deg,black 0%,black 72%,transparent 88%); mask-image:linear-gradient(180deg,black 0%,black 72%,transparent 88%); pointer-events:none} .glass-bubble::after{content:'';position:absolute;top:0;left:10%;right:10%;height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.30) 20%,rgba(255,255,255,.55) 50%,rgba(255,255,255,.30) 80%,transparent); border-radius:1px;pointer-events:none} /* Flat glass panel (sidebar/nav) — premium depth */ .glass-flat{background:var(--glass-surface);border:var(--border-glass);border-top-color:var(--border-glass-top); border-radius:var(--r-xl);padding:var(--s2);box-shadow:var(--sh-2),0 0 24px rgba(15,30,60,.08),0 0 48px rgba(15,30,60,.04); backdrop-filter:none;-webkit-backdrop-filter:none} .cb-ph-tab.active{ background:rgba(41,151,255,.15); border-color:rgba(41,151,255,.4); color:#7cc7ff; } /* ═══════════════════════════════════════════════════════════════════════════ CB-WIZARD-SURFACE — STANDARDIZED WIZARD / FLOW CONTAINER (Sean 2026-04-22) ═══════════════════════════════════════════════════════════════════════════ Every multi-step wizard surface (onboarding, request, blueprints, launcher, booking, checkout, free-trial, confirmation, blueprint studio, tour overlays, etc.) uses this single class for its primary container. Design: the marketing-website 2-layer stack (navy gradient + glass sheen) fading OUT going down the container so dense text at the bottom of tall steps sits on a cleaner, darker plate and reads easier. Inner controls (option cards, inputs, toggles, textareas, selects) rendered INSIDE a .cb-wizard-surface are transparent by default — they ride on the wizard plate without double-stacking glass. Add the `.cb-wiz-nolayer` modifier on a child to opt out. Usage:
…
Rules (per memory): • NO blur (banned permanently) • NO pure #000 anywhere — use #000001 • Borders only for edge definition, no double glass fills ═══════════════════════════════════════════════════════════════════════════ */ .cb-wizard-surface{ position:relative; border-radius:var(--r-2xl); border:1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 40px 120px rgba(0,0,0,.55), 0 8px 40px rgba(0,0,0,.35); /* !important is deliberate: .shell-body-glass is defined later in this file (line ~1527) with background:transparent, and several wizard-page local styles force solid dark fills (e.g. blueprints.html build-solo). The wizard plate needs to win the cascade regardless. */ background: linear-gradient(180deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,.07) 35%, rgba(255,255,255,.035) 70%, rgba(255,255,255,.015) 100%), linear-gradient(180deg, #032a4b 0%, #022240 25%, #01172e 55%, #010916 80%, #00050e 100%) !important; } /* Kill the second glass layer when shell-body-glass + cb-wizard-surface are stacked on the same element — prevents the "3 layers of container shells" look. The wizard-surface IS the glass now. */ .shell-body-glass.cb-wizard-surface::before, .shell-body-glass.cb-wizard-surface::after{display:none !important} /* Nested wizard elements (.wiz-overlay, .wiz-shell, .bp-panel) collapse into the outer wizard plate — no inner glass, no dark overlay. They provide STRUCTURE only when riding on a .cb-wizard-surface. */ .cb-wizard-surface .wiz-overlay{background:transparent !important} .cb-wizard-surface .wiz-shell{background:transparent !important;border-color:rgba(255,255,255,.08) !important;box-shadow:none !important} .cb-wizard-surface .bp-panel{background:transparent !important} .cb-wizard-surface .bp-landing-card{background:transparent !important} @media (max-width:640px){ .cb-wizard-surface{border-radius:var(--r-xl)} } /* Inner controls — transparent by default so they sit on the wizard plate */ .cb-wizard-surface .cb-wiz-card, .cb-wizard-surface .cb-wiz-card-opt, .cb-wizard-surface .cb-wiz-input, .cb-wizard-surface .cb-wiz-select, .cb-wizard-surface .cb-wiz-textarea, .cb-wizard-surface .cb-wiz-toggle{ background:transparent; border:1px solid rgba(255,255,255,.12); border-radius:var(--r-md); color:var(--txt); transition:background 150ms ease,border-color 150ms ease; } .cb-wizard-surface .cb-wiz-card:hover, .cb-wizard-surface .cb-wiz-card-opt:hover, .cb-wizard-surface .cb-wiz-toggle:hover{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.2); } .cb-wizard-surface .cb-wiz-input:focus, .cb-wizard-surface .cb-wiz-select:focus, .cb-wizard-surface .cb-wiz-textarea:focus{ outline:none; border-color:rgba(41,151,255,.55); background:rgba(255,255,255,.04); } .cb-wizard-surface .cb-wiz-card-opt.active, .cb-wizard-surface .cb-wiz-card.active{ background:rgba(41,151,255,.12); border-color:rgba(41,151,255,.55); color:rgba(255,255,255,.98); } /* Opt-out hook — use when a child MUST keep its own fill */ .cb-wizard-surface .cb-wiz-nolayer{background:inherit !important} /* ═══════════════════════════════ BUTTONS — 3D GLASS SYSTEM ═══════════════════════════════ */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s1); padding:11px var(--s3);font:500 var(--text-md)/var(--lh-none) var(--font);letter-spacing:-.01em; border-radius:var(--r-lg);border:none;cursor:pointer;min-height:var(--h-md);position:relative; transition:transform 10ms,box-shadow 10ms;} /* ─── GLASS INTENSITY SPECTRUM ─── */ /* Glass 1 — Ultra Light (barely there) — convex glass */ /* Glass 2 — Light — convex glass */ /* Glass 3 — Standard (default) — convex glass */ /* Glass 4 — Medium — convex glass */ /* Glass 5 — Heavy — convex glass */ .btn-g5{background:rgba(255,255,255,.08);color:#fff; border:1px solid rgba(255,255,255,.10); box-shadow:0 1px 4px rgba(0,0,0,.15); } .btn-g5:hover{transform:translateY(-1px);background:rgba(255,255,255,.12); box-shadow:0 2px 8px rgba(0,0,0,.2)} /* Glass 6 — Frosted (most visible) — convex glass */ /* ─── SUBTLE ACCENT GLOWS (behind buttons/cards) ─── */ /* Navy glow — dark subtle blue behind element */ /* Silver glow — cool metallic behind element */ /* Gold glow — warm subtle behind element */ /* Ghost/text — no fill */ .btn-ghost{background:none;color:rgba(255,255,255,.7);padding:var(--s1) var(--s2);border-radius:var(--r-md); border:1px solid transparent;transition:background 10ms var(--ease),color 10ms var(--ease),border-color 10ms var(--ease)} .btn-ghost:hover{background:rgba(255,255,255,.04);color:#fff;border-color:rgba(255,255,255,.06)} /* Pill button */ /* Disabled state */ .btn:disabled,.btn[disabled]{opacity:.35;cursor:not-allowed;transform:none!important;box-shadow:none!important} /* Button sizes — locked to --h-* component height tokens */ .btn-sm{padding:7px var(--s2);font-size:var(--text-sm);min-height:var(--h-sm);border-radius:var(--r-md)} /* Stat Card — premium glass */ .stat-card{background:var(--cb-glass-2-bg);border:var(--cb-glass-2-border);border-top-color:var(--cb-glass-2-border-top); border-radius:var(--r-xl);padding:var(--card-md);box-shadow:var(--cb-glass-2-shadow);position:relative;overflow:hidden} .stat-card .stat-value{font:500 var(--text-3xl)/1 var(--font-display);letter-spacing:-.02em} .stat-card .stat-label{font:500 var(--text-sm)/1 var(--font);color:var(--txt3);margin-top:var(--s0)} /* Desktop Icon — macOS Finder style draggable */ .desktop-icon.selected{background:rgba(41,151,255,.12);border-radius:var(--r-lg)} .desktop-icon.selected .di-label{color:var(--blue)} /* Glass Island — universal right-click popup */ .glass-island.visible{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto} /* ═══════════════════════════════ WIZARD — UNIVERSAL QUESTIONNAIRE ═══════════════════════════════ */ .wizard-dot.active{background:rgba(41,151,255,.15);border-color:var(--blue);color:var(--blue); box-shadow:0 0 0 4px rgba(41,151,255,.1);animation:ringPulse 1.5s ease infinite} .wizard-dot.done{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15);color:rgba(126,203,161,.9); box-shadow:0 0 14px rgba(126,203,161,.12),0 0 28px rgba(126,203,161,.06)} .wizard-dot.done:hover{box-shadow:0 0 18px rgba(126,203,161,.2),0 0 36px rgba(126,203,161,.1)} .wizard-dot.done svg{width:16px;height:16px;stroke-width:2.5;animation:checkIn 25ms ease-out} .wizard-wire.done{background:var(--green)} /* Progress bar under steps */ /* Wizard content frame — centers and constrains wizard step content */ /* Body + footer */ .rq-step{display:none !important}.rq-step.active{display:flex !important;flex-direction:column;align-items:center;width:100%;max-width:100%;text-align:center} .wizard-foot>.btn-ghost,.wizard-foot>.btn-back{margin-right:auto} /* ═══════════════════════════════ SHARED WIZARD MODAL SYSTEM One unified wizard for: onboarding, blueprint, request, staff onboarding. Every wizard MUST use these shared classes. ═══════════════════════════════ */ /* ── Overlay: dims portal background ── */ .wiz-overlay{position:fixed;inset:0;z-index:900; background:rgba(0,2,6,.88);backdrop-filter:none;-webkit-backdrop-filter:none; display:flex;align-items:center;justify-content:center; opacity:0;visibility:hidden;transition:opacity 10ms ease,visibility 10ms; } .wiz-overlay.open{opacity:1;visibility:visible} /* ── Premium wizard container — LIQUID GLASS ── */ .wiz-shell{width:min(1180px,94vw);max-height:min(900px,92vh);position:relative; background:linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.045) 12%, rgba(255,255,255,.03) 30%, rgba(255,255,255,.02) 55%, rgba(255,255,255,.012) 75%, rgba(255,255,255,.006) 100%); border:1px solid rgba(255,255,255,.10); border-top-color:rgba(255,255,255,.18); border-radius:24px; box-shadow: 0 40px 100px rgba(0,0,0,.45), 0 8px 32px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(255,255,255,.02); display:flex;flex-direction:column;overflow:hidden; transform:scale(.97) translateY(8px);opacity:0; transition:transform 10ms cubic-bezier(.16,1,.3,1),opacity 10ms ease} .wiz-overlay.open .wiz-shell{transform:scale(1) translateY(0);opacity:1} /* Tall variant for request wizard */ .wiz-shell-tall{width:min(1180px,94vw)} /* Request overlay — centered wizard card (not full page). Horizontal overflow allowed inside step, vertical never. */ .rq-overlay{background:transparent !important;align-items:center !important;justify-content:center !important} .rq-overlay .wiz-shell{width:min(760px,92vw) !important;max-width:760px !important;max-height:min(860px,94vh) !important;border-radius:24px !important;margin:auto} /* Request wizard shell — lighter glass than default */ .rq-overlay .wiz-shell{background:linear-gradient(180deg, rgba(255,255,255,.10) 0%,rgba(255,255,255,.06) 12%,rgba(255,255,255,.04) 30%, rgba(255,255,255,.03) 55%,rgba(255,255,255,.02) 100%) !important; border-color:rgba(255,255,255,.14) !important; box-shadow:0 40px 100px rgba(0,0,0,.3),0 8px 32px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.18) !important} /* Request wizard needs full width for tier grid + blueprint scroll */ .rq-overlay .wiz-content > *{max-width:100%} .rq-overlay .rq-step.active{display:flex !important;flex-direction:column;align-items:center;flex-wrap:nowrap !important} /* Request wizard bigger step dots */ .rq-overlay .wiz-step-dot{width:72px;height:72px;font-size:15px} .rq-overlay .wiz-step-dot lottie-icon{width:36px;height:36px} .rq-overlay .wiz-step-wire{width:28px;height:2px} /* Lottie idle: paused. Animate only on hover + step completion. */ .rq-overlay .wiz-step-dot lottie-icon{--lottie-autoplay:0} .rq-overlay .wiz-step-dot:hover lottie-icon{--lottie-autoplay:1} .rq-overlay .wiz-step-dot.done lottie-icon,.rq-overlay .wiz-step-dot.active lottie-icon{--lottie-autoplay:1} .rq-overlay .wiz-step-dot:hover{transform:scale(1.08);transition:transform 150ms ease} .rq-overlay .wiz-step-dot{transition:transform 150ms ease,background 200ms ease,border-color 200ms ease} /* Top edge shimmer */ .wiz-shell::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;z-index:2; background:linear-gradient(90deg,transparent,rgba(255,255,255,.20) 25%,rgba(255,255,255,.35) 50%,rgba(255,255,255,.20) 75%,transparent);pointer-events:none} /* Inner highlight edge */ .wiz-shell::after{content:'';position:absolute;inset:0;border-radius:24px;pointer-events:none;z-index:1; box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 0 0 1px rgba(255,255,255,.03)} /* ── Universal Wizard Header Stack ── Logo ring → Eyebrow → Title → Divider → Wizard name → User info Matches login page brand lockup, promoted to shared system. Used by ALL wizards (onboarding, request, blueprint, trial). */ .wiz-brand{text-align:center;flex-shrink:0;padding:28px 24px 0} .wiz-brand .login-logo-ring{width:72px;height:72px;margin:0 auto 14px} .wiz-brand .login-logo-ring img{width:50px;height:50px} .wiz-brand-eyebrow{font:500 9px/1 var(--font-display);color:var(--blue); letter-spacing:.22em;text-transform:uppercase;margin:0 0 8px} .wiz-brand-title{font:500 30px/1 var(--font-display);letter-spacing:-1px; color:var(--txt);margin:0 0 14px} .wiz-hero-close{position:absolute;top:var(--s2);right:var(--s2);width:32px;height:32px;border-radius:50%; border:none;background:rgba(255,255,255,.06);color:var(--txt3);cursor:pointer; display:flex;align-items:center;justify-content:center; transition:background 10ms,color 10ms} .wiz-hero-close:hover{background:rgba(255,255,255,.12);color:var(--txt)} .wiz-hero-close svg{width:16px;height:16px} /* ── Step rail inside wizard ── */ .wiz-step-rail{display:flex;align-items:center;justify-content:center;gap:0; padding:var(--s2) var(--s4) var(--s1);flex-shrink:0} .wiz-step-dot.active{background:rgba(41,151,255,.12);border-color:rgba(41,151,255,.45);color:var(--blue); box-shadow:0 0 0 4px rgba(41,151,255,.08),0 0 16px rgba(41,151,255,.10)} .wiz-step-dot.done{background:rgba(126,203,161,.10);border-color:rgba(126,203,161,.35);color:var(--green); box-shadow:0 0 0 3px rgba(126,203,161,.06);position:relative} .wiz-step-dot.done svg{width:14px;height:14px;stroke-width:2.5} /* DONE state: hide whatever icon was there, replace with a green checkmark overlay */ .wiz-step-dot.done lottie-icon,.wiz-step-dot.done > svg:not(.wiz-check){display:none} .wiz-step-dot.done::after{ content:'';position:absolute;inset:0;display:flex;align-items:center;justify-content:center; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat;background-position:center;background-size:18px 18px; animation:wizDotPop 360ms cubic-bezier(.34,1.56,.64,1) both; } /* Active state: icon scales in once on transition to active */ .wiz-step-dot.active lottie-icon{animation:wizDotPulse 600ms ease-out 1} @keyframes wizDotJustDone{ 0%{transform:scale(1);box-shadow:0 0 0 0 rgba(126,203,161,.5)} 35%{transform:scale(1.25);box-shadow:0 0 0 8px rgba(126,203,161,.25)} 70%{transform:scale(.95)} 100%{transform:scale(1);box-shadow:0 0 0 3px rgba(126,203,161,.06)} } /* One-shot pop for done state */ @keyframes wizDotPop{ 0%{transform:scale(.4);opacity:0} 60%{transform:scale(1.15);opacity:1} 100%{transform:scale(1);opacity:1} } @keyframes wizDotPulse{ 0%{transform:scale(.7);opacity:.5} 50%{transform:scale(1.18);opacity:1} 100%{transform:scale(1);opacity:1} } /* Upcoming (no modifier) — icon at reduced opacity so the active step pops */ .wiz-step-dot:not(.active):not(.done) lottie-icon{opacity:.45;filter:grayscale(.4)} /* Active — icon in full blue brightness */ .wiz-step-dot.active lottie-icon{opacity:1} /* Done — icon gets a subtle green glow (check.json is swapped in via JS) */ .wiz-step-dot.done lottie-icon{opacity:1} .wiz-step-wire.done{background:var(--green)} /* ── Scrollable content area ── */ .wiz-content{flex:1;overflow-y:auto;padding:var(--s2) var(--s4) var(--s3); scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.08) transparent; display:flex;flex-direction:column;align-items:center;text-align:center} .wiz-content > *{width:100%;max-width:960px;margin-left:auto;margin-right:auto} /* wiz-answers is a vertical stack of question sections (num, title, desc, grids) — never wraps */ .wiz-content .wiz-answers{display:flex;flex-direction:column;align-items:center;gap:var(--s1);width:100%} /* opt-grid + chip-row enforce single row — no 2-row wrap, no mid-card cutoff */ .wiz-content .opt-grid,.wiz-content .chip-row{display:flex;flex-wrap:nowrap;justify-content:center;align-items:stretch;gap:var(--s2);width:100%;grid-template-columns:none} .wiz-content .opt-grid > *,.wiz-content .chip-row > *{flex:1 1 0;min-width:0;max-width:260px} /* bp-fmt-grid inside wizard: single-row flex, equal-share children, never wraps, never cuts */ .wiz-content .bp-fmt-grid{display:flex;flex-wrap:nowrap;justify-content:center;gap:var(--s2);width:100%;max-width:none;margin-top:var(--s2);align-items:stretch;grid-template-columns:none} .wiz-content .bp-fmt-grid > .bp-fmt-card{flex:1 1 0;min-width:0;max-width:280px;padding:var(--s3) var(--s2)} .wiz-content .bp-fmt-grid + .bp-fmt-grid{margin-top:var(--s3)} .wiz-content .bp-fmt-sublabel{font:500 var(--text-xs)/1 var(--font-display);letter-spacing:.06em;text-transform:uppercase;color:var(--txt3);margin-top:var(--s3);margin-bottom:var(--s1);text-align:center;width:100%} .wiz-content::-webkit-scrollbar{width:4px} .wiz-content::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:2px} /* ── Answer region (wraps opt-grid, chip-row, forms, etc.) ── */ .wiz-answers{animation:slideLeft 25ms cubic-bezier(.16,1,.3,1)} .wiz-answers.reverse{animation:slideRight 25ms cubic-bezier(.16,1,.3,1)} /* ── Footer nav ── */ .wiz-footer{flex-shrink:0;display:flex;align-items:center;justify-content:flex-end;gap:12px; padding:var(--s2) var(--s4) var(--s3);border-top:1px solid rgba(255,255,255,.05)} .wiz-footer .btn-ghost{margin-right:auto} .wiz-footer .btn{min-width:100px} /* Blueprint hover details */ /* ── Blueprint card tier-coloured borders (Step 5) ── */ .rq-bp-tier1.selected{border-color:#fff;box-shadow:0 0 0 1px #fff,0 8px 24px rgba(255,255,255,.10)} .rq-bp-tier2.selected{border-color:#5ac8fa;box-shadow:0 0 0 1px #5ac8fa,0 8px 24px rgba(90,200,250,.18)} .rq-bp-tier3.selected{border-color:#bf5af2;box-shadow:0 0 0 1px #bf5af2,0 8px 24px rgba(191,90,242,.18)} @keyframes successPop{0%{transform:scale(.4);opacity:0}55%{transform:scale(1.08);opacity:1}100%{transform:scale(1);opacity:1}} @keyframes successCheckDraw{to{stroke-dashoffset:0}} .wiz-page .wiz-shell{width:min(1440px,96vw);max-height:min(960px,92vh); position:relative;transform:none;opacity:1} .wiz-page .wiz-shell.wiz-shell-full{width:min(1440px,96vw);max-height:min(1100px,94vh)} .wiz-page .wiz-content{padding:var(--s4) var(--s6) var(--s5)} .wiz-page .wiz-content > *{max-width:1100px} .wiz-chip.selected{background:rgba(41,151,255,.10);border-color:rgba(41,151,255,.30);color:var(--blue)} .wiz-toggle.on{background:var(--blue)} .wiz-toggle.on::after{transform:translateX(20px)} /* ── Wizard mobile breakpoints ── */ @media(max-width:768px){ .wiz-page{padding:var(--s2)} .wiz-page .wiz-shell,.wiz-shell{width:100%;max-height:100vh;border-radius:20px} .wiz-shell-full{width:100%;max-height:100vh} .wiz-brand{padding:20px 20px 0} .wiz-brand .login-logo-ring{width:60px;height:60px;margin-bottom:10px} .wiz-brand .login-logo-ring img{width:40px;height:40px} .wiz-brand-title{font-size:24px} .wiz-brand-eyebrow{font-size:8px} .wiz-hero{padding:var(--s2) var(--s3) 0} .wiz-content{padding:var(--s2) var(--s3) var(--s2)} .wiz-footer{padding:var(--s2) var(--s3)} .wiz-step-dot{width:30px;height:30px} .wiz-step-dot lottie-icon{width:16px;height:16px} .wiz-step-wire{width:16px} .wiz-form-row{flex-direction:column} .wiz-q-title{font-size:var(--text-xl)} } @media(max-width:480px){ .wiz-page{padding:0} .wiz-page .wiz-shell,.wiz-shell{border-radius:0;max-height:100vh;min-height:100vh} .wiz-shell-full{border-radius:0} .wiz-brand{padding:16px 16px 0} .wiz-brand .login-logo-ring{width:52px;height:52px} .wiz-brand .login-logo-ring img{width:35px;height:35px} .wiz-brand-title{font-size:22px} .wiz-content{padding:var(--s1) var(--s2) var(--s2)} .wiz-content > *{max-width:100%} .wiz-footer{padding:var(--s1) var(--s2) var(--s2)} .wiz-step-dot{width:28px;height:28px} .wiz-step-dot lottie-icon{width:14px;height:14px} .wiz-step-wire{width:10px} .wiz-form-group{max-width:100%} } .opt-card.selected{border-color:var(--blue);background:linear-gradient(180deg,rgba(41,151,255,.1) 0%,rgba(41,151,255,.02) 100%); box-shadow:0 0 0 3px rgba(41,151,255,.12),0 4px 16px rgba(41,151,255,.08);animation:selectPop 25ms var(--ease-spring)} .opt-card.selected .opt-check{opacity:1;transform:scale(1)} /* ── Format 2: Chips / pill toggle ── */ .chip.selected{background:linear-gradient(180deg,rgba(41,151,255,.18) 0%,rgba(41,151,255,.06) 100%); border-color:rgba(41,151,255,.25);border-top-color:rgba(41,151,255,.30); box-shadow:inset 0 .5px 0 rgba(41,151,255,.25),0 0 8px rgba(41,151,255,.10); border-color:var(--blue);color:var(--blue);animation:chipBounce 25ms ease-out; box-shadow:0 0 0 3px rgba(41,151,255,.08)} /* ── Format 3: Radio list (single select) ── */ .radio-item.selected{border-color:var(--blue);background:linear-gradient(180deg,rgba(41,151,255,.08) 0%,rgba(41,151,255,.02) 100%); box-shadow:0 0 0 3px rgba(41,151,255,.08);animation:selectPop 25ms var(--ease-spring)} .radio-item.selected .radio-dot{border-color:var(--blue);background:var(--blue)} .radio-item.selected .radio-dot::after{content:'';width:8px;height:8px;border-radius:50%;background:#fff; animation:checkIn 25ms var(--ease-spring)} /* ── Format 4: Slider / range ── */ /* ── Format 5: Textarea / open-ended ── */ /* ═══════════════════════════════ BADGES & STATUS ═══════════════════════════════ */ /* Role badges */ /* Nav badge (notification count) */ /* ═══════════════════════════════ CHAT COMPONENTS ═══════════════════════════════ */ /* ═══════════════════════════════ SHARED ANIMATIONS cb-prefixed shared keyframes + onboarding wizard shared keyframes. Pages should reference these instead of defining page-local duplicates. ═══════════════════════════════ */ @keyframes cb-ring-spin{to{transform:rotate(360deg)}} @keyframes obShellIn{to{opacity:1;transform:scale(1) translateY(0)}} @keyframes obIn{to{opacity:1;transform:translateY(0)}} @keyframes subqIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} @keyframes subqOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-8px)}} @keyframes trialOfferIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}} /* ══ MOTION ADDITIONS — spring hover, skeleton, stagger, nav ══ */ /* Pipeline cards — spring lift. Transition on base selector so hover-out also animates (prevents snap-back). */ .pipeline-card{transition:transform 120ms cubic-bezier(.22,1,.36,1),box-shadow 120ms cubic-bezier(.22,1,.36,1)} .pipeline-card:hover{transform:translateY(-3px);box-shadow:0 4px 18px rgba(0,0,0,.32),0 0 24px rgba(41,151,255,.06)} .pipeline-card:active{transform:translateY(0) scale(.985);transition-duration:60ms} /* Buttons — satisfying press */ .btn:hover{transform:translateY(-1px)} .btn:active{transform:translateY(0) scale(.97);transition-duration:80ms} /* Nav active indicator slide */ .sb-nav-item{position:relative} .sb-nav-item:hover:not(.active){transform:translateX(2px)} /* ── Left-nav: elegant, premium — thinner/lighter icons, labels faded default, full white on hover/active (Sean 2026-04-15) ── */ .app-dock-inner:not(.collapsed) .sb-nav-item{ color:rgba(255,255,255,.62)!important; font:500 14px/1.2 var(--cb-font-text)!important; letter-spacing:-.01em!important; -webkit-font-smoothing:subpixel-antialiased!important;-moz-osx-font-smoothing:auto!important; background:transparent!important; border:none!important; box-shadow:none!important; border-radius:0!important; padding:8px 0!important; gap:12px!important; margin:2px 14px!important; width:calc(100% - 28px)!important; transition:color 140ms cubic-bezier(.25,.8,.25,1)!important } .app-dock-inner:not(.collapsed) .sb-nav-item:hover:not(.active){ color:#fff!important } .app-dock-inner:not(.collapsed) .sb-nav-item.active{ color:#fff!important; font-weight:500!important } /* Nav tile — 32px, stroked icons at 22px, faded by default, full white on hover/active */ .app-dock-inner:not(.collapsed) .sb-nav-tile{ background:none!important; border:none!important; box-shadow:none!important; border-radius:0!important; width:32px!important;height:32px!important; opacity:.55!important;flex-shrink:0!important; display:flex!important;align-items:center!important;justify-content:center!important; transition:opacity 140ms cubic-bezier(.25,.8,.25,1)!important } .app-dock-inner:not(.collapsed) .sb-nav-item:hover .sb-nav-tile{opacity:1!important} .app-dock-inner:not(.collapsed) .sb-nav-item.active .sb-nav-tile{opacity:1!important} .app-dock-inner:not(.collapsed) .sb-nav-tile svg{ width:22px!important;height:22px!important; stroke-width:1.4!important; opacity:1!important;filter:none!important } /* PNG/SVG image icons (FrameLab clapperboard) — same 22px slot, nudged right so artwork sits centered */ .app-dock-inner:not(.collapsed) .sb-nav-tile img{ width:22px!important;height:22px!important; object-fit:contain!important; object-position:62% center!important; opacity:1!important;filter:none!important } /* Active tab — subtle left accent bar instead of color change (more premium) */ .app-dock-inner:not(.collapsed) .sb-nav-item.active::before{ content:'';position:absolute;left:-8px;top:50%;transform:translateY(-50%); width:3px;height:20px;border-radius:2px; background:linear-gradient(180deg,#7ab6ff,#5eb8ff); box-shadow:0 0 8px rgba(94,184,255,.6) } /* ── COLLAPSED STATE — icons only, no text (Sean 2026-04-15) ── */ .app-dock-inner.collapsed .sb-nav-item{ font-size:0!important; /* hide label text */ gap:0!important; justify-content:center!important; padding:6px 0!important; margin:2px 6px!important; width:calc(100% - 12px)!important; color:rgba(255,255,255,.7) } .app-dock-inner.collapsed .sb-nav-tile{ width:36px!important;height:36px!important; opacity:.82!important;flex-shrink:0!important; display:flex!important;align-items:center!important;justify-content:center!important; background:none!important;border:none!important;box-shadow:none!important } .app-dock-inner.collapsed .sb-nav-tile svg{ width:26px!important;height:26px!important;stroke-width:1.6!important;opacity:1!important } .app-dock-inner.collapsed .sb-nav-tile img{ width:26px!important;height:26px!important;object-fit:contain!important;opacity:1!important } .app-dock-inner.collapsed .sb-nav-item:hover .sb-nav-tile, .app-dock-inner.collapsed .sb-nav-item.active .sb-nav-tile{opacity:1!important} .app-dock-inner.collapsed .sb-nav-item.active{color:#fff!important} .app-dock-inner.collapsed .sb-nav-item.active::before{ content:'';position:absolute;left:0;top:50%;transform:translateY(-50%); width:2px;height:18px;border-radius:2px; background:linear-gradient(180deg,#7ab6ff,#5eb8ff); box-shadow:0 0 6px rgba(94,184,255,.5) } /* Hide the STUDIO heading text and the green ping dot when collapsed */ .app-dock-inner.collapsed #sbStudioNav > div:first-child{font-size:0!important;padding:4px 0!important} .app-dock-inner.collapsed .sb-nav-dot{display:none!important} /* Nav icon pop on activate */ .sb-nav-item.active svg,.sb-nav-item.active lottie-icon{animation:navIconPop 300ms var(--ease-spring) both} @keyframes navIconPop{0%{transform:scale(1)}40%{transform:scale(1.2)}100%{transform:scale(1)}} /* Skeleton loading shimmer */ @keyframes skeletonShimmer{0%{background-position:-200% 0}100%{background-position:200% 0}} /* Staggered card entry */ .pipeline-card{animation:cardEntry 140ms cubic-bezier(.22,1,.36,1) both} @keyframes cardEntry{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}} .pipeline-card:nth-child(1){animation-delay:0ms}.pipeline-card:nth-child(2){animation-delay:15ms}.pipeline-card:nth-child(3){animation-delay:30ms}.pipeline-card:nth-child(4){animation-delay:45ms}.pipeline-card:nth-child(5){animation-delay:60ms}.pipeline-card:nth-child(6){animation-delay:75ms}.pipeline-card:nth-child(n+7){animation-delay:90ms} /* Modal spring open */ .cb-modal,.modal-box{transition:transform 300ms var(--ease-spring),opacity 250ms var(--ease-smooth);transform-origin:center} .modal-bg,.cb-modal-bg{transition:opacity 250ms var(--ease-smooth);} @keyframes livePulse{0%,100%{box-shadow:0 0 0 0 rgba(52,211,153,.4)}50%{box-shadow:0 0 0 6px rgba(52,211,153,0)}} .pipeline-card,.glass-card,.shell-toast{contain:layout style paint} @keyframes cb-fade-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}} @keyframes cb-panel-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} @keyframes cb-live-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.75)}} @keyframes cb-fade-in-up{from{opacity:0;transform:translateX(-50%) translateY(6px)}to{opacity:1;transform:translateX(-50%) translateY(0)}} @keyframes cb-pulse-glow{0%,100%{opacity:.3;transform:translate(-50%,-50%) scale(1)}50%{opacity:.6;transform:translate(-50%,-50%) scale(1.1)}} @keyframes cb-avatar-reveal{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}} @keyframes cb-check-pulse{from{opacity:0;transform:scale(.3)}60%{transform:scale(1.1)}to{opacity:1;transform:scale(1)}} @keyframes cb-slide-in-right{from{transform:translateX(100%)}to{transform:translateX(0)}} /* ═══════════════════════════════ ANIMATIONS ═══════════════════════════════ */ @keyframes stepIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} @keyframes colIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}} @keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}} @keyframes slideIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}} @keyframes spin{to{transform:rotate(360deg)}} @keyframes logoSpin{to{transform:rotate(360deg)}} @keyframes digitPop{0%{transform:scale(.85);opacity:0}60%{transform:scale(1.05)}100%{transform:scale(1);opacity:1}} @keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}} @keyframes selectPop{0%{transform:scale(1)}40%{transform:scale(.94)}70%{transform:scale(1.03)}100%{transform:scale(1)}} @keyframes checkIn{0%{transform:scale(0) rotate(-45deg);opacity:0}60%{transform:scale(1.2) rotate(0deg)}100%{transform:scale(1) rotate(0deg);opacity:1}} @keyframes slideLeft{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}} @keyframes slideRight{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}} @keyframes ringPulse{0%{box-shadow:0 0 0 0 rgba(41,151,255,.3)}100%{box-shadow:0 0 0 10px rgba(41,151,255,0)}} @keyframes chipBounce{0%{transform:scale(1)}50%{transform:scale(.92)}100%{transform:scale(1)}} @keyframes progressGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}} @keyframes pulseLoad{0%,100%{opacity:.3;transform:scale(.85)}50%{opacity:1;transform:scale(1)}} @keyframes spinLoad{to{transform:rotate(360deg)}} @keyframes barLoad{0%{transform:scaleX(0)}50%{transform:scaleX(.7)}100%{transform:scaleX(1)}} @keyframes confettiFall{0%{transform:translateY(-40px) rotate(0deg);opacity:1}10%{opacity:1}100%{transform:translateY(110vh) rotate(720deg);opacity:0}} @keyframes confettiPop{0%{transform:scale(0)}50%{transform:scale(1.2)}100%{transform:scale(1)}} @keyframes clapPop{0%{transform:scale(1)}20%{transform:scale(1.25) rotate(-5deg)}40%{transform:scale(.95) rotate(3deg)}60%{transform:scale(1.1)}100%{transform:scale(1)}} @keyframes fireworkBurst{0%{transform:scale(0);opacity:1}50%{transform:scale(1.3);opacity:.8}100%{transform:scale(1.6);opacity:0}} @keyframes sendPulse{0%{transform:translateX(0) scale(1)}40%{transform:translateX(8px) scale(.9)}100%{transform:translateX(60px) scale(.6);opacity:0}} @keyframes reviewScan{0%{background-position:200% 0}100%{background-position:-200% 0}} @keyframes cardLift{0%{transform:perspective(800px) rotateX(0) rotateY(0)}100%{transform:perspective(800px) rotateX(0) rotateY(0)}} /* Health score colors */ /* Blueprint hover popup — 16:9 layout: fields left, card center, selections right */ .bp-popup .bp-title{font:500 var(--text-3xs)/var(--lh-none) var(--font);text-transform:uppercase;letter-spacing:1px;color:var(--txt3); margin-bottom:10px;padding-bottom:var(--s-micro-4);border-bottom:1px solid rgba(255,255,255,.06)} .bp-popup .bp-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:start} /* Legacy compat */ .bp-popup .bp-row{display:flex;justify-content:space-between;gap:var(--card-sm);padding:var(--s-micro-2) 0; font:400 var(--text-xs)/1.3 var(--font);color:var(--txt3)} .bp-popup .bp-row span:last-child{color:var(--txt);font-weight:500;text-align:right} /* ═══════════════════════════════ APPROVED CARD GREEN ANIMATION ═══════════════════════════════ */ @keyframes approvedRumble{ 0%,100%{transform:translateX(0) translateY(0)} 10%{transform:translateX(-1px) translateY(0)} 20%{transform:translateX(1px) translateY(-1px)} 30%{transform:translateX(0) translateY(1px)} 40%{transform:translateX(1px) translateY(0)} 50%{transform:translateX(-1px) translateY(-1px)} 60%{transform:translateX(1px) translateY(0)} 70%{transform:translateX(0) translateY(1px)} 80%{transform:translateX(-1px) translateY(0)} 90%{transform:translateX(1px) translateY(-1px)}} @keyframes approvedGlow{ 0%{box-shadow:0 0 0 rgba(126,203,161,0)} 50%{box-shadow:0 0 20px rgba(126,203,161,.25),0 0 40px rgba(126,203,161,.1)} 100%{box-shadow:0 0 0 rgba(126,203,161,0)}} @keyframes ratingPop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}} .card-3d .rating-star.active{color:var(--gold)} /* ═══════════════════════════════ LEFT EDGE APP MODE RAIL (Island 1) Slim 58px vertical floating glass capsule, fixed left, vertically centered. Contains: logo bug, mode buttons (vertical), dev button. ═══════════════════════════════ */ /* Narrow glass capsule */ /* Top edge highlight on glass shell — inset 30% for narrow 42px capsule */ /* ── Logo block — small centered bug ── */ /* ── Mode toggle — vertical column layout ── */ /* Mode button — stacked icon + label */ .ln-mode-btn.active svg{opacity:1} /* Labels hidden by default — smooth glow reveal on rail hover */ /* ═══ Right Core Toggle Rail — OUTSIDE body container ═══ */ .ln-mode-btn.active{ background:linear-gradient(180deg,rgba(41,151,255,.18) 0%,rgba(41,151,255,.08) 100%); color:var(--txt); box-shadow:0 0 12px rgba(41,151,255,.2),0 1px 4px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.1); border:1px solid rgba(41,151,255,.25)} .ln-mode-btn:hover:not(.active){color:var(--txt2);background:rgba(255,255,255,.04)} /* Rail bottom area for dev button */ /* ── Chat sidebar panel — slides out from left rail ── */ .ln-chat-panel{position:fixed;left:60px;top:50%;transform:translateY(-50%);width:260px;max-height:70vh;z-index:99; display:flex;flex-direction:column;overflow:hidden; border-radius:var(--r-xl); background:rgba(14,18,28,.85); border:1px solid rgba(255,255,255,.10);border-top-color:rgba(255,255,255,.18); box-shadow:0 8px 32px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter:none;-webkit-backdrop-filter:none} .ln-chat-panel[hidden]{display:none} .ln-chat-panel .ch-sb-search-wrap{padding:var(--s1)} .ln-chat-panel .ch-sb-search{font-size:12px;padding:6px 8px} .ln-chat-panel .ch-sb-body{flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.08) transparent} .ln-chat-panel .ch-sb-cat-hdr{padding:6px 8px} .ln-chat-panel .ch-sb-cat-name{font-size:10px} .ln-chat-panel .ch-sb-ch{padding:5px 8px;gap:6px} .ln-chat-panel .ch-sb-av{width:28px;height:28px;font-size:10px} .ln-chat-panel .ch-sb-ch-name{font-size:12px} .ln-chat-panel .ch-sb-ch-sub{font-size:10px} .ln-chat-panel .ch-sb-badge{min-width:16px;height:16px;font-size:9px;line-height:16px} .ln-chat-panel .ch-sb-dm-sep{margin:4px 8px} /* ── Dev mode icon + popup (positioned relative to rail) ── */ .dev-popup{position:absolute;left:calc(100% + 6px);bottom:0; background:rgba(20,20,22,.95);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-md); padding:6px 0;min-width:140px;z-index:100; backdrop-filter:none;-webkit-backdrop-filter:none; box-shadow:0 8px 32px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.04) inset} .dev-popup-title{font:500 8px/1 var(--font);letter-spacing:.08em;text-transform:uppercase; color:var(--txt4);padding:4px 12px 6px;margin-bottom:2px} .dev-popup-item{width:100%;display:flex;align-items:center;gap:6px; padding:6px 12px;font:400 12px/1.2 var(--font);color:var(--txt2); background:none;border:none;cursor:pointer;text-align:left;transition:background 10ms} .dev-popup-item:hover{background:rgba(255,255,255,.06)} .dev-popup-sep{height:1px;margin:4px 8px;background:rgba(255,255,255,.06)} .dev-popup-reset{color:var(--gold)} /* ═══════════════════════════════ TOP CENTER CONTROL BAR (Island 2) Floating glass pill, centered horizontally near top. ═══════════════════════════════ */ .top-bar{position:fixed;top:var(--s2);left:72px;right:var(--s2);z-index:100; display:flex;pointer-events:none;} .top-bar[hidden]{display:none} /* ── Status pills — center-dominant, thicker ── */ .tb-pill.active{background:rgba(41,151,255,.18);color:var(--blue); border-color:rgba(41,151,255,.35);box-shadow:0 0 12px rgba(41,151,255,.2),inset 0 1px 0 rgba(255,255,255,.08)} /* ── Center pill group — inset container for visual weight ── */ /* ── Card density segmented control ── */ .tb-seg-btn.active{background:rgba(255,255,255,.1);color:var(--txt); box-shadow:0 1px 4px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.08)} /* ── Nav badge (notification count) ── */ .ln-badge{position:absolute;top:-2px;right:-2px;min-width:14px;height:14px;padding:0 var(--s-micro-2);border-radius:var(--r-micro-sm); background:var(--blue);color:#fff;font-size:var(--text-2xs);font-weight:500;display:flex;align-items:center;justify-content:center; box-shadow:0 2px 6px rgba(41,151,255,.4),0 0 10px rgba(41,151,255,.15)} .ln-badge.zero{display:none} /* Legacy compat */ /* ═══════════════════════════════ ANIMATION SHOWCASE DEMOS ═══════════════════════════════ */ /* Loading dots */ /* Spinner */ /* Progress bar */ /* Send animation */ /* Review scan */ /* Clap / celebrate */ /* Confetti */ /* Firework */ /* ═══════════════════════════════ RIGHT-CLICK CONTEXT MENU + SIZE KNOB ═══════════════════════════════ */ .ctx-menu{position:relative;display:inline-flex;flex-direction:column;min-width:200px;padding:var(--s-micro-4); background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.08)); border:1px solid rgba(255,255,255,.1);border-top-color:rgba(255,255,255,.15); border-radius:var(--r-xl);box-shadow:0 8px 40px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);backdrop-filter:none;-webkit-backdrop-filter:none} /* Pipeline right-click context menu — fixed positioning at cursor */ #ctxMenu{position:fixed;z-index:9999} /* Delete confirm overlay */ .ctx-confirm{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6)} .ctx-confirm-card{background:var(--bg-float);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-xl);padding:var(--s3);max-width:400px;text-align:center} .ctx-confirm-card h3{font:500 16px/1.2 var(--font);color:var(--txt);margin:0 0 8px} .ctx-confirm-card p{font:400 13px/1.5 var(--font);color:var(--txt2);margin:0 0 16px} .ctx-confirm-actions{display:flex;gap:8px;justify-content:center} .ctx-delete{color:var(--red) !important} .ctx-delete:hover{background:rgba(192,57,43,.15) !important} .ctx-item{display:flex;align-items:center;gap:var(--s1);padding:var(--s1) var(--card-sm);border-radius:var(--r-md); font:400 var(--text-md)/var(--lh-none) var(--font);color:var(--txt2);cursor:pointer; transition:background 10ms,color 10ms} .ctx-item:hover{background:rgba(41,151,255,.15);color:var(--txt)} .ctx-item svg{width:16px;height:16px;opacity:.6} .ctx-item .ctx-shortcut{margin-left:auto;font:400 var(--text-4xs)/1 var(--font);color:var(--txt3);opacity:.5} /* Size knob / selector row */ .size-knob.active{background:rgba(41,151,255,.15);border-color:var(--blue);color:var(--blue); box-shadow:0 0 8px rgba(41,151,255,.15)} /* Size variants */ .pipe-sm{min-height:60px;padding:var(--s1)} .pipe-sm .pipe-title{font-size:var(--text-sm)} .pipe-sm .pipe-sub,.pipe-sm .pipe-pill{display:none} .pipe-lg{min-height:110px;padding:var(--s2)} .pipe-lg .pipe-title{font-size:var(--text-md);margin-bottom:var(--s-micro-4)} .pipe-xl{min-height:150px;padding:var(--card-md)} .pipe-xl .pipe-title{font-size:var(--text-md);margin-bottom:var(--s1)} .pipe-xl .pipe-sub{font-size:var(--text-sm);-webkit-line-clamp:3} /* ═══════════════════════════════ SPECULAR HIGHLIGHTS (auto on cards) ═══════════════════════════════ */ /* Shared specular highlight — premium top-edge light sweep */ .stat-card::before,.folder-card::before,.meeting-card::before,.desktop-icon .di-icon::before, .rv-ctx::before,.modal::before,.cb-modal::before{ content:'';position:absolute;top:0;left:8%;right:8%;height:1px;z-index:5; background:linear-gradient(90deg,transparent,rgba(255,255,255,.20) 25%,rgba(255,255,255,.40) 50%,rgba(255,255,255,.20) 75%,transparent); border-radius:1px;pointer-events:none} /* Capsule containers — no separate ::before glare, box-shadow inset handles it */ .dock-bubble::before{display:none} /* ═══════════════════════════════ PILLS & CHIPS ═══════════════════════════════ */ .pill.active{background:rgba(41,151,255,.12);border-color:rgba(41,151,255,.3);color:var(--blue)} /* ═══════════════════════════════ PROGRESS / TRACKER ═══════════════════════════════ */ .tracker-ring.active{border-color:var(--blue);background:rgba(41,151,255,.1);color:var(--blue);transform:scale(1.1)} .tracker-ring.done{border-color:transparent;background:linear-gradient(135deg,var(--green),#5ba8c8); color:var(--bg);font-weight:500;transform:scale(1.05); box-shadow:0 0 0 2px rgba(126,203,161,.25),0 0 12px rgba(90,168,200,.15)} .tracker-wire.done{background:linear-gradient(90deg,var(--green),#5ba8c8)} /* Base input */ .input{width:100%;padding:var(--card-sm) var(--s2);font:400 var(--text-md)/var(--lh-normal) var(--font);color:var(--txt); min-height:var(--h-md); background:linear-gradient(180deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.06) 50%,rgba(255,255,255,.03) 100%); border:1px solid rgba(255,255,255,.10);border-top-color:rgba(255,255,255,.04);border-radius:var(--r-md); box-shadow:inset 0 2px 4px rgba(0,0,0,.3),inset 0 -1px 0 rgba(255,255,255,.06),0 1px 3px rgba(0,0,0,.15); outline:none;transition:border-color 10ms,box-shadow 10ms} .input::placeholder{color:var(--txt4)} .input:focus{border-color:rgba(41,151,255,.5);box-shadow:inset 0 2px 4px rgba(0,0,0,.2),0 0 0 3px rgba(41,151,255,.12),0 0 20px rgba(41,151,255,.08)} /* Light theme overrides */ .bg-light .glass-card,.bg-light .glass-flat,.bg-light .stat-card{ background:rgba(255,255,255,.85);border-color:rgba(0,0,0,.08);box-shadow:0 2px 8px rgba(0,0,0,.04),0 4px 16px rgba(0,0,0,.06)} .bg-light .input{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.1);color:#1d1d1f; box-shadow:inset 0 1px 2px rgba(0,0,0,.06)} .bg-light .input::placeholder{color:#86868b} .bg-light .pill{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.08);color:#6e6e73} /* ═══════════════════════════════ MOBILE RESPONSIVE ═══════════════════════════════ */ @media(max-width:768px){ .sg-page{padding:var(--s4) var(--card-md) var(--s8)} .sg-sec h2{font-size:var(--text-2xl)} .sg-row{flex-direction:column} .sg-grid.c2,.sg-grid.c3,.sg-grid.c4{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))} .opt-grid{grid-template-columns:1fr} .wizard-steps{flex-wrap:wrap;gap:var(--s0)} .wizard-wire{width:var(--card-md)} .tracker-wire{width:var(--s3)} .btn-lg{padding:var(--card-sm) var(--s3);font-size:var(--text-md)} .glass-bubble{padding:var(--s3) var(--card-md) var(--card-md)} } @media(max-width:480px){ .sg-page{padding:var(--s3) var(--s2) var(--s6)} .sg-sec{margin-bottom:var(--s6)} .sg-grid.c2,.sg-grid.c3,.sg-grid.c4{grid-template-columns:1fr 1fr} .type-hero{font-size:var(--text-3xl)} .stat-card{padding:var(--card-sm)} .stat-card .stat-value{font-size:var(--text-2xl)} .glass-card{padding:var(--s2)} .glass-flat{padding:var(--card-sm)} } /* ═══════════════════════════════════════════════════════════════ PORTAL — SHELL LAYOUT The iframe-based shell: sidebar + header + content area ═══════════════════════════════════════════════════════════════ */ .shell{display:grid;grid-template-columns:220px 1fr;grid-template-rows:1fr; height:100vh;overflow:hidden; background:var(--cb-bg); background-attachment:fixed; position:relative} /* ── DM Strip — Discord far-left column ── */ .dm-strip-av.active{border-radius:12px;box-shadow:none} .dm-strip-av.active::before{content:'';position:absolute;left:-6px;top:50%;transform:translateY(-50%); width:4px;height:20px;border-radius:0 4px 4px 0;background:#fff} .mode-drop-item.active{color:#fff} .mode-drop-item.active::after{content:'✓';margin-left:auto;font-size:10px;color:rgba(41,151,255,.8)} .shell-side .side-link.active{background:rgba(41,151,255,.1);color:var(--blue)} .shell-body{grid-column:2;grid-row:1;overflow:hidden; padding:8px var(--s2); position:relative;z-index:1; display:flex;flex-direction:column} /* Layer-1 glass on the right body — MIRRORS .app-dock-inner exactly. Structure: transparent host + ::before glass + ::after bottom light sweep. iframe insets 1px so the glass edges are visible against the shell bg. */ /* Portal shell body = canonical wizard surface (Sean 2026-04-22). The ::before plate now uses the 2-layer fading navy+glass stack, and the iframe fills the shell edge-to-edge so tabs render as ONE plate against the body bg — no 8px inset gap, no 14px child radius visible underneath the 20px parent radius. The iframe's own body stays transparent (see line ~361/364), so the ::before plate shows through. */ .shell-body-glass{flex:1;min-height:0;border-radius:20px;overflow:hidden;position:relative;z-index:1; background:transparent} .shell-body-glass::before{content:'';position:absolute;inset:0;border-radius:20px; background:var(--cb-glass-1-bg); box-shadow:var(--cb-glass-1-shadow); pointer-events:none;z-index:0} .shell-body-glass::after{content:'';position:absolute;bottom:0;left:10%;right:10%;height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.25) 20%,rgba(255,255,255,.45) 50%,rgba(255,255,255,.25) 80%,transparent); border-radius:1px;pointer-events:none;z-index:2} .shell-body-glass > iframe,.shell-body-glass > .shell-frame{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);border:none;border-radius:14px;background:transparent;z-index:1} /* Shell state overlay — connection/auth errors rendered INSIDE the shell */ .shell-state{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center; background:transparent;opacity:0;pointer-events:none;transition:opacity 10ms var(--ease)} .shell-state.active{opacity:1;pointer-events:auto} .shell-state-card{text-align:center;max-width:360px;padding:var(--s5)} .shell-state-card svg{width:48px;height:48px;stroke:var(--txt3);margin-bottom:var(--s2)} .shell-state-card h3{font:500 var(--text-lg)/var(--lh-tight) var(--font-display);color:var(--txt);margin:0 0 var(--s1)} .shell-state-card p{font:400 var(--text-md)/var(--lh-normal) var(--font);color:var(--txt3);margin:0 0 var(--s3)} .shell-state-card .btn{margin-top:var(--s2)} /* ── Premium entry sequence — blue circle → checkmark → welcome ── */ .entry-seq{display:flex;flex-direction:column;align-items:center;gap:0} .entry-ring{width:56px;height:56px;position:relative;margin-bottom:20px} .entry-ring svg{width:56px;height:56px} .entry-ring .ring-track{fill:none;stroke:rgba(41,151,255,.1);stroke-width:3} .entry-ring .ring-progress{fill:none;stroke:var(--blue-hi);stroke-width:3; stroke-linecap:round;stroke-dasharray:157;stroke-dashoffset:157; transform:rotate(-90deg);transform-origin:50% 50%; animation:entryRingSpin 110ms cubic-bezier(.4,0,.2,1) forwards} @keyframes entryRingSpin{0%{stroke-dashoffset:157}100%{stroke-dashoffset:0}} .entry-check{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; opacity:0;transform:scale(.5);transition:transform 10ms cubic-bezier(.22,1,.36,1),opacity 10ms cubic-bezier(.22,1,.36,1)} .entry-check.show{opacity:1;transform:scale(1)} .entry-check svg{width:28px;height:28px;stroke:var(--blue-hi);stroke-width:2.5;fill:none} .entry-check svg path{stroke-dasharray:30;stroke-dashoffset:30;animation:entryCheckDraw .4s 10ms cubic-bezier(.22,1,.36,1) forwards} @keyframes entryCheckDraw{to{stroke-dashoffset:0}} .entry-welcome{font:500 20px/1.2 var(--font-display);color:var(--txt);letter-spacing:-.02em; opacity:0;transform:translateY(8px);transition:transform 10ms cubic-bezier(.22,1,.36,1),opacity 10ms cubic-bezier(.22,1,.36,1)} .entry-welcome.show{opacity:1;transform:translateY(0)} .entry-sub{font:400 13px/1.4 var(--font);color:var(--txt4);margin-top:6px; opacity:0;transition:opacity 10ms 10ms ease} .entry-sub.show{opacity:1} /* ═══════════════════════════════════════════════════════════════ PORTAL — SECTION CARDS (full-width glass panels) ═══════════════════════════════════════════════════════════════ */ .section-card{background:var(--cb-glass-2-bg);border:var(--cb-glass-2-border);border-top-color:var(--cb-glass-2-border-top); border-radius:var(--r-2xl);padding:var(--card-lg);box-shadow:var(--cb-glass-2-shadow);margin-bottom:var(--card-md);position:relative;overflow:hidden} .section-card .sec-title{font:500 var(--text-lg)/1.3 var(--cb-font-display);margin-bottom:var(--s1);display:flex;align-items:center;gap:var(--s1);color:var(--txt)} .section-card .sec-title svg{width:18px;height:18px;color:var(--blue);flex-shrink:0} .section-card .sec-sub{font:400 var(--text-sm)/var(--lh-relaxed) var(--cb-font-text);color:var(--txt3);margin-bottom:var(--s3)} /* ═══════════════════════════════════════════════════════════════ PORTAL — TABS (sub-tabs for switching views within a page) ═══════════════════════════════════════════════════════════════ */ .sub-tab.active{color:var(--blue);border-bottom-color:var(--blue)} /* Category tabs (pill-style) */ .cat-tab.active{background:rgba(41,151,255,.12);border-color:rgba(41,151,255,.3);color:var(--blue)} /* ═══════════════════════════════════════════════════════════════ PORTAL — MODAL OVERLAY ═══════════════════════════════════════════════════════════════ */ .modal-bg{position:fixed;inset:0;background:rgba(3,8,15,.80); display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;pointer-events:none;transition:opacity 10ms} .modal-bg.visible{opacity:1;pointer-events:auto} .modal{background:var(--bg-card);border:var(--border-glow);border-top-color:var(--border-glow-top); border-radius:var(--r-2xl);padding:var(--card-xl);max-width:var(--container-sm);width:90%; box-shadow:var(--sh-5); backdrop-filter:none;-webkit-backdrop-filter:none; transform:scale(.95);transition:transform 10ms var(--ease-spring);position:relative;overflow:hidden} .modal-bg.visible .modal{transform:scale(1)} .modal .modal-title{font:500 var(--text-xl)/var(--lh-snug) var(--font-display);margin-bottom:var(--s1)} .modal .modal-body{font:400 var(--text-md)/var(--lh-relaxed) var(--font);color:var(--txt2);margin-bottom:var(--card-md)} .modal .modal-foot{display:flex;justify-content:flex-end;gap:var(--s1)} .modal .modal-close{position:absolute;top:var(--s2);right:var(--s2);width:28px;height:28px;border-radius:50%; border:none;background:rgba(255,255,255,.06);color:var(--txt3);cursor:pointer; display:flex;align-items:center;justify-content:center;transition:background 10ms} .modal .modal-close:hover{background:rgba(255,255,255,.12);color:var(--txt)} /* ═══════════════════════════════════════════════════════════════ PORTAL — TOASTS (notification popups) — premium glass, smooth entry ═══════════════════════════════════════════════════════════════ */ .toast{pointer-events:auto;padding:12px 16px;border-radius:14px;font:500 13px/1.35 var(--font-display);color:#fff; background:linear-gradient(180deg,rgba(28,32,46,.92) 0%,rgba(18,22,34,.92) 100%); border:1px solid rgba(255,255,255,.10);border-top-color:rgba(255,255,255,.18); box-shadow:0 12px 32px rgba(0,0,0,.38),0 2px 6px rgba(0,0,0,.22); display:flex;align-items:center;gap:10px;min-width:260px;max-width:380px; animation:toastSlideIn 240ms cubic-bezier(.16,1,.3,1);transform-origin:top right;} .toast.toast-out{animation:toastSlideOut 200ms cubic-bezier(.4,0,1,1) forwards} @keyframes toastSlideIn{from{opacity:0;transform:translateX(20px) scale(.96)}to{opacity:1;transform:translateX(0) scale(1)}} @keyframes toastSlideOut{from{opacity:1;transform:translateX(0) scale(1)}to{opacity:0;transform:translateX(20px) scale(.96)}} /* Toast animated icons — APNG from /icons/ folder, CSS filters colorize from black source */ .toast-icon{width:24px;height:24px;flex-shrink:0;object-fit:contain} /* ═══════════════════════════════════════════════════════════════ PORTAL — STATE MODIFIERS (spinner, loading, empty states) ═══════════════════════════════════════════════════════════════ */ .loading-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center; min-height:200px;gap:var(--s2);text-align:center} .spinner{width:var(--h-sm);height:var(--h-sm);border:3px solid rgba(255,255,255,.1);border-top-color:var(--blue); border-radius:50%;animation:spin .6s linear infinite;margin:var(--card-md) auto} .btn .spinner{width:20px;height:20px;margin:0 auto;border-width:2px} .hidden{display:none!important} /* ═══════════════════════════════════════════════════════════════ PORTAL — FORM GROUPS ═══════════════════════════════════════════════════════════════ */ .form-group{margin-bottom:var(--s2)} .form-group label{display:block;font:500 var(--text-md)/var(--lh-snug) var(--font);text-transform:uppercase; letter-spacing:1.5px;color:var(--txt3);margin-bottom:var(--s1)} .form-row .form-group{flex:1} .wiz-shell .form-group{width:100%;max-width:420px;margin-left:auto;margin-right:auto}.flex-1{flex:1}.w-full{width:100%}.mb-8{margin-bottom:var(--s1)}.mb-16{margin-bottom:var(--s2)}.text-center{text-align:center}.relative{position:relative}/* ═══════════════════════════════════════════════════════════════ PORTAL — GRID LAYOUTS ═══════════════════════════════════════════════════════════════ */ @media(max-width:768px){.grid-2,.grid-3,.grid-4,.grid-5{grid-template-columns:1fr}} @media(max-width:1024px){.grid-4,.grid-5{grid-template-columns:repeat(2,1fr)}} /* ═══════════════════════════════════════════════════════════════ PORTAL — TOGGLE SWITCH ═══════════════════════════════════════════════════════════════ */ .toggle{position:relative;width:44px;height:24px;border-radius:12px;background:rgba(255,255,255,.1); border:none;cursor:pointer;transition:background 10ms;padding:0} .toggle::after{content:'';position:absolute;top:var(--s-micro-1);left:var(--s-micro-1);width:20px;height:20px;border-radius:50%; background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform 10ms var(--ease)} .toggle.on{background:var(--blue)} .toggle.on::after{transform:translateX(20px)} /* ═══════════════════════════════════════════════════════════════ PORTAL — DROPDOWN ═══════════════════════════════════════════════════════════════ */ .dropdown.open .dropdown-menu{opacity:1;pointer-events:auto;transform:translateY(0)} /* ═══════════════════════════════════════════════════════════════ PORTAL MOBILE — Sidebar collapse ═══════════════════════════════════════════════════════════════ */ @media(max-width:768px){ .shell-side{display:none} .shell-body{padding:env(safe-area-inset-top,0) 0 0 0!important} .page-hdr h1{font-size:var(--text-xl)} .pg-title{font-size:20px!important} .pg-sub{font-size:13px!important;margin-bottom:var(--s1)!important} .page-head{padding:10px 14px 8px!important} .page-inner{padding:8px 10px 16px!important} } /* ═══════════════════════════════════════════════════════════════ @FONT-FACE — SF Pro, self-hosted woff2, ONE canonical block. Root-relative paths work for portal, iframed pages, AND /website/*. unicode-range Latin-1 cuts decode time + avoids fetching for non-Latin. semibold + bold remapped to weight:500 per the no-bold lock. Sean locked 2026-04-16 — kills the prior CDN+relative double block that was causing a first-paint race. ═══════════════════════════════════════════════════════════════ */ @font-face{font-family:'SF Pro Text'; src:url('/portal/fonts/sf-pro-text_regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF} @font-face{font-family:'SF Pro Text'; src:url('/portal/fonts/sf-pro-text_semibold.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF} @font-face{font-family:'SF Pro Display';src:url('/portal/fonts/sf-pro-display_regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF} @font-face{font-family:'SF Pro Display';src:url('/portal/fonts/sf-pro-display_medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF} @font-face{font-family:'SF Pro Display';src:url('/portal/fonts/sf-pro-display_semibold.woff2')format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF} @font-face{font-family:'SF Pro Display';src:url('/portal/fonts/sf-pro-display_bold.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF} .navbar .nav-link:hover,.navbar .nav-link.active{color:var(--txt)} .navbar .nav-link.active::after{content:'';position:absolute;bottom:-4px;left:0;right:0; height:2px;background:var(--blue);border-radius:1px} .navbar-light .nav-link:hover,.navbar-light .nav-link.active{color:#1d1d1f} /* ═══════════════════════════════════════════════════════════════ WEBSITE — FAQ ACCORDION ═══════════════════════════════════════════════════════════════ */ .faq-item{border-radius:var(--r-lg);border:1px solid rgba(255,255,255,.06);overflow:hidden} .faq-q{display:flex;align-items:center;justify-content:space-between;padding:var(--s2) var(--card-md); font:500 var(--text-md)/var(--lh-normal) var(--font);cursor:pointer;background:rgba(255,255,255,.02); transition:background 10ms} .faq-q:hover{background:rgba(255,255,255,.04)} .faq-q svg{width:16px;height:16px;color:var(--txt3);transition:transform 10ms var(--ease);flex-shrink:0} .faq-item.open .faq-q svg{transform:rotate(180deg)} .faq-a{max-height:0;overflow:hidden;transition:max-height 150ms var(--ease);padding:0 var(--card-md)} .faq-a>*{min-height:0;overflow:hidden} .faq-item.open .faq-a{max-height:500px;padding:0 var(--card-md) var(--s2)} .faq-a p{font:400 var(--text-md)/var(--lh-loose) var(--font);color:var(--txt2)} /* ═══════════════════════════════════════════════════════════════ PORTAL — TIMELINE / ACTIVITY FEED ═══════════════════════════════════════════════════════════════ */ .tl-item.active::before{background:var(--blue);border-color:var(--blue); box-shadow:0 0 8px rgba(41,151,255,.3)} /* ═══════════════════════════════════════════════════════════════ PORTAL — STEPPER (numbered vertical steps) ═══════════════════════════════════════════════════════════════ */ .step{display:flex;gap:var(--s2);padding-bottom:var(--s3);position:relative} .step::before{content:'';position:absolute;left:15px;top:32px;bottom:0;width:2px; background:rgba(255,255,255,.06)} .step:last-child::before{display:none} .step.active .step-num{background:rgba(41,151,255,.15);border-color:var(--blue);color:var(--blue)} .step.done .step-num{background:var(--green);border-color:var(--green);color:var(--bg)} .cal-day.selected{background:var(--blue);color:#fff;font-weight:500} /* ═══════════════════════════════════════════════════════════════ WEBSITE — MOBILE NAV HAMBURGER ═══════════════════════════════════════════════════════════════ */ @media(max-width:768px){ .nav-toggle{display:flex} .navbar .nav-links{display:none;position:absolute;top:var(--h-xl);left:0;right:0; flex-direction:column;background:rgba(10,10,14,.95);border-bottom:1px solid rgba(255,255,255,.06); padding:var(--s2);gap:var(--s1);backdrop-filter:none} .navbar .nav-links.open{display:flex} .hero{min-height:60vh;padding:var(--s8) var(--card-md)} .section{padding:var(--s6) var(--card-md)} .footer-grid{grid-template-columns:repeat(2,1fr)} .pricing-grid{grid-template-columns:1fr} .feature-grid{grid-template-columns:1fr} } /* ═══════════════════════════════════════════════════════════════ REDUCED MOTION ═══════════════════════════════════════════════════════════════ */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important} } /* ═══════════════════════════════════════════════════════════════ 1. PORTAL SHELL — Page Foundation ═══════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════ 2. VIDEO PLAYER ═══════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════ 3. CARD ISLAND (Dynamic Island on Cards / Video Overlay) ═══════════════════════════════════════════════════════════════ */ .ps-card-island{ display:inline-flex;align-items:center;gap:5px; padding:6px 10px; border-radius:var(--r-pill); background:rgba(0,0,0,.7); border:1px solid rgba(255,255,255,.14); font:500 12px/1 var(--font); color:var(--txt); white-space:nowrap; position:absolute;top:8px;left:50%;transform:translateX(-50%); z-index:2; max-width:calc(100% - 12px); backdrop-filter:none;-webkit-backdrop-filter:none; } .ps-ci-type{ padding:3px 7px; border-radius:var(--r-xs); font:500 11px/1 var(--font); letter-spacing:.4px; text-transform:uppercase; } .ps-ci-type[data-type="SF"]{background:rgba(41,151,255,.18);color:var(--blue)} .ps-ci-type[data-type="LF"]{background:rgba(191,90,242,.18);color:var(--purple)} .ps-ci-tier{ padding:3px 7px; border-radius:var(--r-xs); font:500 11px/1 var(--font); letter-spacing:.3px; } .ps-ci-tier[data-tier="1"]{background:rgba(245,166,35,.15);color:var(--gold)} .ps-ci-tier[data-tier="2"]{background:rgba(126,203,161,.15);color:var(--green)} .ps-ci-tier[data-tier="3"]{background:rgba(90,200,250,.15);color:var(--cyan)} .ps-ci-grade{ padding:3px 7px; border-radius:var(--r-xs); font:500 11px/1 var(--font); letter-spacing:.3px; } .ps-ci-grade[data-grade="A"]{background:rgba(52,211,153,.18);color:#34d399} .ps-ci-grade[data-grade="B"]{background:rgba(134,239,172,.15);color:#86efac} .ps-ci-grade[data-grade="C"]{background:rgba(251,191,36,.15);color:#fbbf24} .ps-ci-grade[data-grade="D"]{background:rgba(255,159,10,.15);color:var(--orange)} .ps-ci-grade[data-grade="F"]{background:rgba(192,57,43,.18);color:var(--red)} .ps-ci-bp{ padding:3px 7px; border-radius:var(--r-xs); font:500 11px/1 var(--font); letter-spacing:.3px; background:rgba(126,203,161,.15);color:var(--green); } .ps-ci-ver{ font:500 11px/var(--lh-none) var(--mono); color:var(--txt2); letter-spacing:.3px; } /* ═══════════════════════════════════════════════════════════════ 4. PIPELINE CARD (3 core sizes: sm/lg/xl) ═══════════════════════════════════════════════════════════════ */ .pipeline-card{ position:relative; border-radius:20px; /* premium rounded glass */ background-size:cover; background-position:center; background-color:rgba(10,14,24,.78); border:1px solid rgba(255,255,255,.04); /* near-invisible edge — depth comes from highlights+shadows */ border-top-color:rgba(255,255,255,.10); overflow:hidden; /* clip hover halo + highlights */ display:flex;flex-direction:column; justify-content:flex-end; cursor:pointer; /* 3D glass depth — inner top highlight + bottom drop ring + soft outer fall */ box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.35), 0 6px 14px rgba(0,0,0,.28), 0 22px 48px rgba(0,0,0,.30); transition:transform 10ms var(--ease-q),box-shadow 10ms var(--ease-q),border-color 10ms var(--ease-q); contain:layout style; } .pipeline-card.pipe-sm{min-height:100px} .pipeline-card.pipe-lg{min-height:160px} .pipeline-card.pipe-xl{min-height:220px} /* Specular top-edge highlight */ .pipeline-card::after{ content:'';position:absolute;top:0;left:8%;right:8%;height:1px;z-index:3; background:linear-gradient(90deg,transparent,rgba(255,255,255,.35) 30%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.35) 70%,transparent); pointer-events:none;opacity:.6; } .pipeline-card::before{ content:'';position:absolute;inset:0; background:linear-gradient(180deg,rgba(0,4,12,.65) 0%,rgba(0,2,8,.48) 30%,rgba(0,4,12,.85) 65%,rgba(0,2,8,.98) 100%); pointer-events:none;z-index:1; } .pipeline-card:hover{ transform:translateY(-4px); box-shadow: 0 2px 4px rgba(0,0,0,.3), 0 8px 16px rgba(0,0,0,.25), 0 16px 48px rgba(0,0,0,.2), 0 0 20px rgba(41,151,255,.08), inset 0 1px 0 rgba(255,255,255,.12); border-color:rgba(255,255,255,.28);border-top-color:rgba(255,255,255,.35); } .pipeline-card:hover::after{opacity:1} /* Thread unread badge — iMessage-style: red pill, subtle pulse, ring of black for separation against thumbnail edges. Hit area stays small but glows clearly. */ .pipe-unread{ position:absolute;top:7px;right:7px;z-index:5; min-width:18px;height:18px; border-radius:var(--r-pill); background:#ff3b30; color:#fff; font:600 10px/18px var(--font); text-align:center; padding:0 6px; box-shadow: 0 0 0 1.5px rgba(0,0,0,.55), 0 2px 8px rgba(255,59,48,.55), 0 0 14px rgba(255,59,48,.35); animation:pipeUnreadPulse 2.4s ease-in-out infinite; pointer-events:none; letter-spacing:.2px; } @keyframes pipeUnreadPulse{ 0%,100%{transform:scale(1);opacity:1} 50% {transform:scale(1.08);opacity:.92} } @media(prefers-reduced-motion:reduce){ .pipe-unread{animation:none} } /* Card landed animation — subtle pulse when dropped into new stage */ @keyframes cardLanded{ 0%{transform:scale(.96);opacity:.7;box-shadow:0 0 0 0 rgba(41,151,255,.3)} 40%{transform:scale(1.02);opacity:1;box-shadow:0 0 20px 4px rgba(41,151,255,.15)} 100%{transform:scale(1);opacity:1;box-shadow:none} } .pipeline-card.card-landed{animation:cardLanded .5s cubic-bezier(.22,1,.36,1) forwards;z-index:10} /* ═══ TRIAL CARD — yellow glow BEHIND card only, content stays crisp ═══ */ .pipeline-card.is-trial{ /* overflow stays visible via box-shadow — glow spills outside card bounds, behind the card's own content (card renders on top at z:0, glow is outside) */ box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.45), 0 0 0 1px rgba(253,224,71,.35), 0 0 24px 4px rgba(253,224,71,.35), 0 0 60px 12px rgba(253,224,71,.18), 0 6px 14px rgba(0,0,0,.28), 0 22px 48px rgba(0,0,0,.30)!important; border-color:rgba(253,224,71,.4)!important } .pipeline-card.is-trial:hover{ box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 1px rgba(253,224,71,.5), 0 0 32px 6px rgba(253,224,71,.45), 0 0 80px 16px rgba(253,224,71,.22), 0 8px 20px rgba(0,0,0,.3)!important; border-color:rgba(253,224,71,.55)!important } @keyframes pcTrialBadgePulse{ 0%,100%{box-shadow:0 0 0 1px rgba(251,191,36,.45),0 0 14px 2px rgba(251,191,36,.55),0 0 28px 6px rgba(251,191,36,.30),0 4px 10px rgba(0,0,0,.35);transform:translateZ(0) scale(1)} 50% {box-shadow:0 0 0 1px rgba(251,191,36,.65),0 0 22px 4px rgba(251,191,36,.80),0 0 44px 10px rgba(251,191,36,.42),0 4px 10px rgba(0,0,0,.35);transform:translateZ(0) scale(1.04)} } @media(prefers-reduced-motion:reduce){ .pc-trial-badge{animation:none} } /* ═══ NEW CARD LAYOUT — title top-left, client TR, badges BL, editor+timer BR ═══ */ /* APPROVED badge — top-right, above overlay */ /* TOP ROW: [client avatar] [project name] — horizontal (Sean 2026-04-15) */ /* Children inside pc-top-row regain pointer-events (so avatar is clickable) */ /* Status tag moved BACK to its own row under the title (Sean 2026-04-15 v2). Positioned absolutely, z-index above thumbnail, left-aligned. */ /* pc-status-tag size inherits from the unified rule above; this block keeps the default variant colors */ /* NEW — Pool-tier pill (T1/T2/T3). Admin/editor only — server strips for clients. Neutral white, no color differentiation between pools. Sean 2026-04-15. */ /* Submitted-date pill — sits to the right of .pc-status-tag in the .pc-status-row. Neutral, quiet — gives a glance-able "when did this come in" signal. Sean 2026-04-15. */ /* N/A grade state — shown on non-approved cards so the slot is always filled. */ .pc-grade-icon.pc-grade-na, .pc-grade-icon[data-grade="NA"]{ background:rgba(255,255,255,.04)!important; border-color:rgba(255,255,255,.1)!important; color:rgba(255,255,255,.4)!important; font-weight:500 } /* BOTTOM ROW: meta badges | editor col */ /* meta badges — type, version, tier, grade. Single-row, shrinks in place so it never overlaps pc-editor-col on the right. */ /* ALL card pills (status/type/ver/tier/grade/timer) share ONE compact size — smaller still so SF/LF/FT/V#/T#/grade read as tight markers, not chunky buttons. Sean 2026-04-15. */ /* Timer icon gets a hair more room for '1h 49m' */ /* editor column — timer tag above editor avatar */ /* pc-timer-tag size inherits from the unified rule above; this block keeps visual variant only */ /* Avatar circles — client (top-left) and editor (bottom-right) MUST match size. Dropped 26→22px so bottom row fits pills + timer + avatar without overlap. Sean 2026-04-15. */ .pc-av-sm .pc-av-init{ font:500 10px/1 var(--font);color:#fff;letter-spacing:.3px } /* Empty/placeholder avatar slot — dimmer, dashed border */ .pc-av-empty .pc-av-init{color:rgba(255,255,255,.35)!important} /* Dark thumbnail fallback — card bg if no thumb loads */ .pipeline-card{background-color:#0f1525;background-size:cover;background-position:center} .pipeline-card:not([style*="background-image"]), .pipeline-card[style*="background-image:url()"]{background:linear-gradient(135deg,#162033 0%,#0c1320 100%)} /* Compact (pipe-sm) density — slightly smaller everything */ .pipeline-card.pipe-sm .pc-title{font-size:12px} .pipeline-card.pipe-sm .pc-av-sm{width:24px;height:24px} .pipeline-card.pipe-sm .pc-type-icon, .pipeline-card.pipe-sm .pc-ver-icon, .pipeline-card.pipe-sm .pc-tier-icon, .pipeline-card.pipe-sm .pc-grade-icon, .pipeline-card.pipe-sm .pc-pool-pill{height:14px;font-size:8.5px;padding:0 4px} .pipeline-card.pipe-sm .pc-status-tag, .pipeline-card.pipe-sm .pc-timer-tag{height:13px;font-size:7.5px;padding:0 4px} /* LEGACY — hide the old floating island/bottom row if any stale markup ships */ .pipeline-card .ps-card-island, .pipeline-card .pipe-bottom{display:none!important} .pipe-bottom{ position:absolute;bottom:0;left:0;right:0;z-index:2; padding:0 10px var(--s1); } .pipe-bottom-row{ display:flex;align-items:center;justify-content:space-between; margin-bottom:var(--s0); } .pipe-name{ font:500 14px/1.2 var(--font); color:#fff; white-space:nowrap; overflow:hidden;text-overflow:ellipsis; max-width:75%; } .pipe-timer{ font:500 12px/var(--lh-none) var(--mono); color:rgba(255,255,255,.75); letter-spacing:.3px; flex-shrink:0; } .pipe-tl{ height:3px; border-radius:1.5px; background:rgba(255,255,255,.15); overflow:hidden; } .pipe-tl-bar{ width:100%;height:100%; border-radius:1px; background:var(--blue); transform-origin:left;transition:transform 10ms var(--ease); } /* ═══════════════════════════════════════════════════════════════ 5. PIPELINE KANBAN ═══════════════════════════════════════════════════════════════ */ .ps-pipeline-kanban{ display:flex;gap:var(--s1); flex:1;min-height:0; overflow-x:auto; padding:0; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.08) transparent; } .ps-pipeline-kanban::-webkit-scrollbar{height:6px} .ps-pipeline-kanban::-webkit-scrollbar-track{background:transparent} .ps-pipeline-kanban::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:3px} .ps-kanban-col{ flex:0 0 calc((100% - (4 * var(--s1))) / 5);min-width:calc((100% - (4 * var(--s1))) / 5);max-width:calc((100% - (4 * var(--s1))) / 5); display:flex;flex-direction:column;gap:var(--s1); contain:layout style; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.06); border-radius:var(--r-lg); padding:var(--s2); } .ps-kanban-hdr{ display:flex;align-items:center;gap:10px; font:600 var(--text-lg)/1 var(--font-display); color:var(--txt); letter-spacing:.005em; padding:10px 2px 12px; border-bottom:1px solid rgba(255,255,255,.1); margin-bottom:var(--s1); } .ps-kanban-dot{ width:10px;height:10px; border-radius:50%; flex-shrink:0; } .ps-kanban-count{ margin-left:auto; font:600 var(--text-xs)/1 var(--mono); color:var(--txt2); background:rgba(255,255,255,.08); padding:4px 8px; border-radius:var(--r-pill); letter-spacing:.04em; } /* Pipeline cards inside a kanban lane fill the lane width. (Default .pipeline-card is 160px fixed; inside .ps-kanban-col we want it to flex to the column width so the board uses full page width.) */ .ps-kanban-col .pipeline-card{width:100%;max-width:none} .pc-av-sm.pc-av-editor{width:36px;height:36px;border-radius:50%;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,rgba(191,90,242,.25),rgba(191,90,242,.08)); border:1.5px solid rgba(191,90,242,.45); box-shadow:0 2px 6px rgba(0,0,0,.4)} .pc-av-sm.pc-av-editor .pc-av-init{font:500 var(--text-sm)/1 var(--font);color:var(--txt)} /* ═══════════════════════════════════════════════════════════════ 6. REVIEW DOCK / FRAMELAB TOOLBOX ═══════════════════════════════════════════════════════════════ */ .dock-bubble{ background:linear-gradient(180deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.08) 20%,rgba(255,255,255,.06) 40%,rgba(255,255,255,.04) 60%,rgba(255,255,255,.025) 80%,rgba(255,255,255,.015) 100%); border:none; border-radius:24px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.18),0 8px 32px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.3); backdrop-filter:none;-webkit-backdrop-filter:none; padding:var(--s-micro-4) var(--s2); position:relative; } .dk-ts{ font:500 12px/1 var(--mono); color:rgba(255,255,255,.9); letter-spacing:.5px; flex-shrink:0; min-width:36px; } .dk-inp-wrap{ flex:1;min-width:0; display:flex;align-items:center; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:var(--r-lg); padding:0 var(--s1) 0 var(--card-sm); transition:border-color 10ms; } .dk-inp-wrap:focus-within{ border-color:rgba(41,151,255,.4); box-shadow:0 0 0 2px rgba(41,151,255,.1); } .dk-textarea{ flex:1;min-width:0; background:transparent;border:none;outline:none; color:var(--txt); font:400 13px/1.4 var(--font); padding:var(--s-micro-4) 0; resize:none; } .dk-textarea::placeholder{color:var(--txt4)} .dk-send{ width:24px;height:24px;flex-shrink:0; border-radius:var(--r-sm); border:none; background:rgba(41,151,255,.15); color:var(--blue); cursor:pointer; display:flex;align-items:center;justify-content:center; padding:0; transition:background 10ms,color 10ms; } .dk-send svg{width:12px;height:12px} .dk-send:hover{background:rgba(41,151,255,.25);color:var(--blue-hi)} .dk-sep{ width:1px;height:18px; background:rgba(255,255,255,.08); flex-shrink:0; margin:0 var(--s-micro-1); } .dk-btn{ width:36px;height:36px;flex-shrink:0; border-radius:var(--r-md); border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); color:var(--txt3); cursor:pointer; display:flex;align-items:center;justify-content:center; padding:0; transition:background 10ms,color 10ms,border-color 10ms; } .dk-btn svg{width:18px;height:18px} .dk-btn:hover{background:rgba(255,255,255,.08);color:var(--txt);border-color:rgba(255,255,255,.12)} .dk-btn.active{ background:rgba(41,151,255,.12); color:var(--blue); border-color:rgba(41,151,255,.25); } .dk-play{ width:30px;height:30px;flex-shrink:0; border-radius:50%; border:1px solid rgba(255,255,255,.12); background:linear-gradient(180deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.06) 100%); color:var(--txt); cursor:pointer; display:flex;align-items:center;justify-content:center; padding:0; box-shadow:0 2px 6px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.15); transition:background 10ms,transform 10ms; } .dk-play svg{width:13px;height:13px;margin-left:1px} .dk-play:hover{background:linear-gradient(180deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.10) 100%);transform:scale(1.06)} .dk-play:active{transform:scale(.95)} /* Quality button — same .dk-play base, no margin offset on its SVG */ .dk-timeline{ flex:1;min-width:0; height:36px; display:flex;align-items:center; cursor:pointer; position:relative; } .dk-timeline-track{ position:relative; width:100%;height:6px; border-radius:3px; background:linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.10) 50%,rgba(255,255,255,.07) 100%); border:1px solid rgba(255,255,255,.06); box-shadow:inset 0 1px 3px rgba(0,0,0,.3),0 1px 0 rgba(255,255,255,.04); overflow:hidden; } .dk-timeline-bar{ width:100%;height:100%; border-radius:3px; background:linear-gradient(180deg,rgba(41,151,255,.9) 0%,rgba(41,151,255,.7) 100%); box-shadow:0 0 8px rgba(41,151,255,.3); transform-origin:left;transform:scaleX(0);transition:none; } .dk-timeline-head{ position:absolute; top:50%;left:0%; transform:translate(-50%,-50%); width:14px;height:14px; border-radius:50%; background:linear-gradient(180deg,#fff 0%,#e0e4ea 100%); border:2px solid rgba(41,151,255,.8); box-shadow:0 1px 4px rgba(0,0,0,.35),0 0 8px rgba(41,151,255,.25),inset 0 1px 0 rgba(255,255,255,.8); transition:transform 10ms; } .dk-timeline:hover .dk-timeline-head{transform:translate(-50%,-50%) scale(1.15)} /* Timeline tick marks for revision comments */ .dk-ticks{position:absolute;inset:0;pointer-events:none;z-index:1} .dk-knob{ display:flex;flex-direction:column;align-items:center;gap:var(--s-micro-1); flex-shrink:0; } .dk-knob-body{ width:32px;height:32px; border-radius:50%; background:linear-gradient(145deg,rgba(40,42,50,.95),rgba(22,24,30,.98)); border:1.5px solid rgba(255,255,255,.14); box-shadow:0 2px 8px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.1),inset 0 -1px 2px rgba(0,0,0,.2); display:flex;align-items:center;justify-content:center; cursor:grab; transition:border-color 30ms; user-select:none; -webkit-user-select:none; position:relative; } .dk-knob-body:active{cursor:grabbing} .dk-knob-body:hover{border-color:rgba(255,255,255,.25)} .dk-knob-tick{ width:2px;height:8px; background:#fff; border-radius:0; transform:rotate(0deg); transform-origin:center 16px; transition:none; position:absolute; top:4px; left:50%; margin-left:-1px; } .dk-knob-lbl{ font:500 9px/1 var(--font); color:var(--txt4); letter-spacing:.5px; text-transform:uppercase; } /* ═══════════════════════════════════════════════════════════════ 7. PROJECT THREAD PANEL ═══════════════════════════════════════════════════════════════ */ .ps-thread{ width:340px;flex-shrink:0; display:flex;flex-direction:column; background:rgba(255,255,255,.02); border-left:1px solid rgba(255,255,255,.07); overflow:hidden; } /* ── Floating thread in project detail — dissolving glass (matches left nav) ── */ .pv-thread-float{ width:320px; border-left:none; border-radius:var(--r-xl); background:linear-gradient(180deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.08) 12%,rgba(255,255,255,.06) 25%,rgba(255,255,255,.04) 40%,rgba(255,255,255,.025) 60%,rgba(255,255,255,.015) 78%,rgba(255,255,255,.008) 100%); border:none; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.08); position:relative;overflow:hidden; backdrop-filter:none;-webkit-backdrop-filter:none; /* Smooth open/close animation */ transition:opacity 200ms ease,transform 200ms cubic-bezier(.16,1,.3,1); } .pv-thread-float[hidden]{display:flex!important;width:0;opacity:0; overflow:hidden;pointer-events:none;padding:0;border:none; transform:translateX(20px)} .ps-th-hdr{ font:500 var(--text-xs)/1 var(--font); color:var(--txt); padding:var(--card-sm) var(--card-sm); border-bottom:1px solid rgba(255,255,255,.06); letter-spacing:.2px; } .pv-thread-float .ps-th-hdr{ border-radius:var(--r-xl) var(--r-xl) 0 0; background:transparent; border-bottom:1px solid rgba(255,255,255,.06); padding:0 var(--card-sm); min-height:44px;display:flex;align-items:center; font:500 14px/1 var(--font);letter-spacing:-.01em;color:#fff; } .ps-th-section.open .ps-th-body{ max-height:500px; padding:var(--s1) var(--card-sm) var(--card-sm); } .ps-th-section.open .ps-th-toggle svg{transform:rotate(90deg)} /* ═══════════════════════════════════════════════════════════════ 8. PROJECT CHAT (In Thread Panel) ═══════════════════════════════════════════════════════════════ */ .ps-chat-input{ display:flex;align-items:center;gap:var(--s-micro-4); padding:var(--s-micro-4) var(--card-sm); border-top:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.02); /* Required so .emoji-picker (position:absolute; bottom:100%) anchors to the input row instead of escaping to body. Sean: "+ icon doesnt do anything when i click it" — fixed. */ position:relative; } .pv-thread-float .ps-chat-input{ border-radius:0 0 var(--r-xl) var(--r-xl); background:linear-gradient(180deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.06) 100%); padding:10px var(--card-sm);min-height:56px; } .ps-chat-plus{ width:24px;height:24px;flex-shrink:0; border-radius:50%; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04); color:var(--txt3); cursor:pointer; display:flex;align-items:center;justify-content:center; padding:0; transition:background 10ms,color 10ms; } .ps-chat-plus:hover{background:rgba(255,255,255,.08);color:var(--txt)} .chat-pill{ display:flex;align-items:center;gap:var(--s-micro-4); padding:0 var(--s1) 0 var(--card-sm); border-radius:var(--r-lg); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); height:28px; transition:border-color 10ms; } .chat-pill:focus-within{ border-color:rgba(41,151,255,.4); box-shadow:0 0 0 2px rgba(41,151,255,.1); } /* ═══════════════════════════════════════════════════════════════ 9. DRAWING ANNOTATION BAR ═══════════════════════════════════════════════════════════════ */ /* ── Drawing toolbar — matches left-nav ln-glass-shell capsule ── */ .draw-bar{ display:flex;flex-direction:column;align-items:center;gap:6px; padding:8px 0;width:42px; border-radius:24px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);border-top-color:rgba(255,255,255,.12); box-shadow:0 4px 16px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter:none;-webkit-backdrop-filter:none; position:absolute;left:12px;top:50%;transform:translateY(-50%);z-index:60; overflow:visible} /* Top edge highlight — identical to ln-glass-shell::before */ .draw-bar::before{content:'';position:absolute;top:0;left:30%;right:30%;height:1px;z-index:2; background:linear-gradient(90deg,transparent,rgba(255,255,255,.35) 20%,rgba(255,255,255,.6) 50%,rgba(255,255,255,.35) 80%,transparent)} /* Tool groups — inset recessed wells like ln-mode-toggle */ .draw-bar .draw-tool{width:28px;height:28px;display:flex;align-items:center;justify-content:center; border-radius:7px;border:none;background:transparent;color:rgba(255,255,255,.5); cursor:pointer;transition:all 10ms} .draw-bar .draw-tool:hover{background:rgba(255,255,255,.08);color:rgba(255,255,255,.8)} .draw-bar .draw-tool.active{background:rgba(41,151,255,.15);color:#2997ff} .draw-bar .draw-tool svg{width:14px;height:14px} .draw-bar .draw-colors{display:flex;flex-direction:column;gap:2px;align-items:center} .draw-bar .draw-color{width:14px;height:14px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:border-color 10ms} .draw-bar .draw-color.active{border-color:#fff} .draw-bar .draw-sizes{display:flex;flex-direction:column;gap:3px;align-items:center;margin-top:2px} .draw-bar .draw-size{border-radius:50%;background:rgba(255,255,255,.6);border:none;cursor:pointer} .draw-bar .draw-size.active{background:#fff} /* Apple-style file tree */ .draw-tool{ width:28px;height:28px; border-radius:var(--r-sm); border:1px solid transparent; background:transparent; color:var(--txt3); cursor:pointer; display:flex;align-items:center;justify-content:center; padding:0; transition:background 10ms,color 10ms,border-color 10ms; } .draw-tool svg{width:14px;height:14px} .draw-tool:hover{background:rgba(255,255,255,.08);color:var(--txt)} .draw-tool.active{ background:rgba(41,151,255,.12); color:var(--blue); border-color:rgba(41,151,255,.2); } .draw-sep{ width:1px;height:20px; background:rgba(255,255,255,.08); flex-shrink:0; margin:0 4px; } .draw-colors{ display:flex;align-items:center;gap:var(--s0); } .draw-color{ width:14px;height:14px; border-radius:50%; border:2px solid transparent; cursor:pointer; transition:transform 10ms,border-color 10ms,box-shadow 10ms; } .draw-color:hover{transform:scale(1.15)} .draw-color.active{ border-color:var(--txt); box-shadow:0 0 0 2px rgba(255,255,255,.2); } .draw-sizes{ display:flex;align-items:center;gap:var(--s-micro-3); } .draw-size{ border-radius:50%; border:none; background:var(--txt3); cursor:pointer; transition:background 10ms,box-shadow 10ms; } .draw-size:hover{background:var(--txt2)} .draw-size.active{ background:var(--txt); box-shadow:0 0 0 2px rgba(255,255,255,.2); } /* ═══════════════════════════════════════════════════════════════ 10. RECORDING INDICATORS ═══════════════════════════════════════════════════════════════ */ .rec-indicator{ display:inline-flex;align-items:center;gap:var(--s0); padding:var(--s0) var(--card-sm); border-radius:var(--r-pill); background:rgba(192,57,43,.12); border:1px solid rgba(192,57,43,.25); backdrop-filter:none; -webkit-backdrop-filter:none; } .rec-dot{ width:8px;height:8px; border-radius:50%; background:var(--red); animation:rec-pulse 1s ease-in-out infinite; flex-shrink:0; } @keyframes rec-pulse{ 0%,100%{opacity:1} 50%{opacity:.3} } .rec-label{ font:500 var(--text-3xs)/var(--lh-none) var(--font); color:var(--red); letter-spacing:1px; text-transform:uppercase; } .rec-timer{ font:500 var(--text-xs)/var(--lh-none) var(--mono); color:var(--txt); letter-spacing:.5px; } .rec-stop{ width:22px;height:22px; border-radius:var(--r-sm); border:1px solid rgba(192,57,43,.3); background:rgba(192,57,43,.15); color:var(--red); cursor:pointer; display:flex;align-items:center;justify-content:center; padding:0; transition:background 10ms,border-color 10ms; } .rec-stop svg{width:12px;height:12px} .rec-stop:hover{background:rgba(192,57,43,.25);border-color:rgba(192,57,43,.4)} .audio-wave{ display:flex;align-items:center;gap:var(--s-micro-1); height:16px; } .audio-wave span{ width:2px; border-radius:1px; background:var(--red); animation:audio-bar .6s ease-in-out infinite alternate; } .audio-wave span:nth-child(1){height:4px;animation-delay:0s} .audio-wave span:nth-child(2){height:10px;animation-delay:10ms} .audio-wave span:nth-child(3){height:6px;animation-delay:10ms} .audio-wave span:nth-child(4){height:12px;animation-delay:.3s} .audio-wave span:nth-child(5){height:5px;animation-delay:10ms} @keyframes audio-bar{ 0%{transform:scaleY(.4)} 100%{transform:scaleY(1)} } /* ═══════════════════════════════════════════════════════════════ 11. REVIEW CONTEXT MENU (Right-Click) — compact, text-box first Layout (top→bottom, closest to cursor on top): Row 1: pill textarea · send · X Row 2: glass-pill timestamp · 5 mode icons ═══════════════════════════════════════════════════════════════ */ .rv-ctx{ position:absolute;z-index:20; width:240px; padding:8px; border-radius:14px; background:linear-gradient(180deg,rgba(14,18,28,.94) 0%,rgba(10,14,22,.97) 100%); border:1px solid rgba(255,255,255,.10);border-top-color:rgba(255,255,255,.16); box-shadow:0 10px 32px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08); display:flex;flex-direction:column;gap:6px; } .rv-ctx-row1{display:flex;align-items:center;gap:5px;width:100%} .rv-ctx-row2{display:flex;align-items:center;gap:5px;width:100%} /* Glass pill timestamp */ .rv-ctx-ts{ font:500 10px/1 var(--mono); color:var(--blue); letter-spacing:.3px; flex-shrink:0; padding:5px 9px; border-radius:999px; background:rgba(41,151,255,.10); border:1px solid rgba(41,151,255,.25); box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 12px rgba(41,151,255,.12); } /* Pill-shaped text box */ .rv-ctx-inp-wrap{ flex:1;min-width:0; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); border-radius:999px; padding:0 12px; transition:border-color .1s,box-shadow .1s; } .rv-ctx-inp-wrap:focus-within{ border-color:rgba(41,151,255,.45); box-shadow:0 0 0 2px rgba(41,151,255,.12); } .rv-ctx-textarea{ width:100%; background:transparent;border:none;outline:none; color:var(--txt); font:400 12px/1.3 var(--font); padding:6px 0; resize:none; min-height:24px;max-height:80px; } .rv-ctx-textarea::placeholder{color:var(--txt4)} /* Send + close + mode buttons — all 24px square so the toolbox stays tight */ .rv-ctx-send{ width:24px;height:24px;flex-shrink:0; border-radius:8px; border:none; background:var(--blue); color:#fff; cursor:pointer; display:flex;align-items:center;justify-content:center; padding:0; transition:background .1s,transform .1s; } .rv-ctx-send svg{width:11px;height:11px} .rv-ctx-send:hover{background:#1a6dd4;transform:translateY(-1px)} .rv-ctx-btn{ width:24px;height:24px;flex-shrink:0; border-radius:7px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); color:var(--txt3); cursor:pointer; display:flex;align-items:center;justify-content:center; padding:0; transition:background .1s,color .1s,border-color .1s; } .rv-ctx-btn svg{width:11px;height:11px} .rv-ctx-btn:hover{background:rgba(255,255,255,.08);color:var(--txt);border-color:rgba(255,255,255,.14)} .rv-ctx-btn.active{ background:rgba(41,151,255,.14); color:var(--blue); border-color:rgba(41,151,255,.28); } /* X button on row 1 — same 24×24 sizing, equal weight as send */ .rv-ctx-row1 .rv-ctx-close{margin-left:0} /* On row 2 the 5 mode icons fill the space evenly to the right of the timestamp pill */ .rv-ctx-row2 .rv-ctx-btn{flex:1 1 0;min-width:0} /* Grouped dock sections */ .health-timer{ display:inline-flex;align-items:center;gap:var(--s-micro-3); padding:var(--s0) 10px; border-radius:var(--r-pill); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); font:500 var(--text-xs)/var(--lh-none) var(--font); color:var(--txt2); } .ht-dot{ width:7px;height:7px; border-radius:50%; flex-shrink:0; } .ht-time{ font:500 var(--text-xs)/var(--lh-none) var(--mono); letter-spacing:.3px; } /* Health timer color coding via data-health attribute */ .health-timer[data-health="A"] .ht-dot{background:#34d399} .health-timer[data-health="A"]{border-color:rgba(52,211,153,.2);color:#34d399} .health-timer[data-health="B"] .ht-dot{background:#86efac} .health-timer[data-health="B"]{border-color:rgba(134,239,172,.15);color:#86efac} .health-timer[data-health="C"] .ht-dot{background:#fbbf24} .health-timer[data-health="C"]{border-color:rgba(251,191,36,.15);color:#fbbf24} .health-timer[data-health="D"] .ht-dot{background:var(--orange)} .health-timer[data-health="D"]{border-color:rgba(255,159,10,.15);color:var(--orange)} .health-timer[data-health="F"] .ht-dot{background:var(--red)} .health-timer[data-health="F"]{border-color:rgba(192,57,43,.2);color:var(--red)} /* ═══════════════════════════════════════════════════════════════ 14. iMESSAGE-STYLE CHAT INPUT ═══════════════════════════════════════════════════════════════ */ /* --- iMessage input row (matches real Apple iMessage 2026) --- */ /* + button: outlined circle, vertically centered */ /* pill text field with mic inside at right end */ .imsg-field{flex:1;border:none;background:none;outline:none;color:var(--txt); font:400 13px/1.4 var(--font);padding:var(--s-micro-4) 0;min-width:0} .imsg-field::placeholder{color:var(--txt4)} /* mic icon sits inside the pill at right end */ /* emoji row below input (Apple-style: emoji left, dictation right) */ .imsg-send{width:28px;height:28px;flex-shrink:0;border-radius:50%; border:none;background:var(--imsg);color:#fff;cursor:pointer; display:flex;align-items:center;justify-content:center;padding:0; transition:background 10ms,transform 10ms;box-shadow:0 2px 8px rgba(11,132,254,.3)} .imsg-send:hover{background:var(--imsg-dk);transform:scale(1.05)} .imsg-send svg{width:14px;height:14px;margin-left:1px;margin-top:-1px} /* ═══════════════════════════════ LOGIN ═══════════════════════════════ */ /* Animated blue gradient ring around bug logo — uses shared cb-ring-spin */ .login-logo-ring{position:relative;width:80px;height:80px;margin:0 auto var(--card-md)} .login-logo-ring::before{content:'';position:absolute;inset:-3px;border-radius:50%; background:conic-gradient(from 0deg,#2979ff,#00b0ff,#2979ff,#1565c0,#2979ff); animation:cb-ring-spin 3s linear infinite} .login-logo-ring::after{content:'';position:absolute;inset:0;border-radius:50%; background:radial-gradient(circle,rgba(10,20,40,.95) 55%,rgba(20,40,80,.8) 100%)} .login-logo-ring img{position:absolute;inset:0;margin:auto;width:55px;height:55px;z-index:1; filter:brightness(10)} @media (max-width:640px){ .ob-welcome-screen .ob-welcome-sub{white-space:normal;max-width:480px} } @keyframes obWelcomeFade{from{opacity:0}to{opacity:1}} @keyframes obWelcomeRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @keyframes obLogoReveal{ 0% {opacity:0;-webkit-mask-position:100% 0,0 0;mask-position:100% 0,0 0} 6% {opacity:1} 100%{opacity:1;-webkit-mask-position:0% 0,0 0;mask-position:0% 0,0 0} } @keyframes obGlowIn{from{opacity:0}to{opacity:1}} @keyframes obGlowPulse{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}} @keyframes obBadgeSpin{to{transform:rotate(360deg)}} @keyframes obBadgePulse{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}} @media (prefers-reduced-motion:reduce){.ob-wiz-badge::before,.ob-wiz-badge::after{animation:none}} @media (max-width:640px){ .ob-welcome-hero{width:88vw;margin-bottom:26px} } @media (prefers-reduced-motion:reduce){ .ob-welcome-hero img{animation:obWelcomeFade .4s ease-out both;-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0} .ob-welcome-glow{animation:none;opacity:.8} } /* Full-viewport centering shell */ .login-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:var(--s3)} /* Login card — 320px constraint + text centering (combine with .glass-bubble) */ .login-card{width:100%;max-width:300px;text-align:center} /* Login title — matches component-library Portal Login heading */ /* Login subtitle */ .login-sub{font:400 var(--text-sm)/var(--lh-normal) var(--font);color:var(--txt3);margin-bottom:var(--s3)} /* 2-step visibility toggle with entrance animation */ .login-step{display:none} .login-step.active{display:block;animation:stepIn .3s var(--ease) both} /* Inline error flash */ .login-error{font:400 var(--text-sm)/var(--lh-normal) var(--font);color:var(--red); margin-top:var(--s1);min-height:var(--s3);opacity:0;transition:opacity 10ms var(--ease)} .login-error.visible{opacity:1} /* Server message (code-sent confirmation) */ .login-msg{font:400 var(--text-sm)/var(--lh-normal) var(--font);color:var(--txt3);margin-bottom:var(--s3)} /* Centered monospace 6-digit code entry */ .login-code{text-align:center;letter-spacing:8px;font:500 var(--text-2xl)/var(--lh-none) var(--mono)} /* Help text row */ .login-help{font:400 var(--text-4xs)/var(--lh-normal) var(--font);color:var(--txt3)} .login-help a{color:var(--blue);text-decoration:none} .login-help a:hover{text-decoration:underline} /* Footer links */ .login-foot{font:400 var(--text-xs)/var(--lh-none) var(--font);color:var(--txt4);margin-top:var(--s2)} .login-foot a{color:var(--txt4);text-decoration:none} .login-foot a:hover{color:var(--txt3)} /* ═══ LOGIN — Premium post-verify takeover ═══ */ .login-takeover{ position:fixed;inset:0;z-index:9999;background:var(--bg); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s3); opacity:0;pointer-events:none;transition:opacity 300ms var(--ease) } .login-takeover.visible{opacity:1;pointer-events:auto} .login-takeover.visible .lt-avatar{opacity:1;transform:scale(1)} @keyframes ltSpin{to{transform:rotate(360deg)}} @keyframes ltGlow{from{opacity:.5;transform:scale(.95)}to{opacity:1;transform:scale(1.05)}} .login-takeover.visible .lt-name{opacity:1;transform:translateY(0)} .login-takeover.visible .lt-sub{opacity:1} .login-card.fading{opacity:0;transform:scale(.97) translateY(-8px);transition:opacity 300ms var(--ease),transform 300ms var(--ease);pointer-events:none} /* ═══════════════════════════════════════════════════════════════ PORTAL SHARED — Role Visibility Gates ═══════════════════════════════════════════════════════════════ */ .staff-only{display:none} body[data-role="editor"] .staff-only, body[data-role="admin"] .staff-only, body[data-role="owner"] .staff-only{display:flex} .admin-only{display:none} body[data-role="admin"] .admin-only, body[data-role="owner"] .admin-only{display:flex} /* ═══════════════════════════════════════════════════════════════ PORTAL SHARED — Tab Panels ═══════════════════════════════════════════════════════════════ */ .tab-panel{display:none} .tab-panel.active{display:block;animation:fadeUp 25ms var(--ease)} .pipe-main-col > .tab-panel.active{display:flex;flex-direction:column;flex:1;min-height:0} /* ═══════════════════════════════════════════════════════════════ PORTAL SHARED — Modal Actions ═══════════════════════════════════════════════════════════════ */ .modal-actions{display:flex;gap:10px;margin-top:var(--card-md);justify-content:flex-end} .modal-btn{padding:10px var(--s3);border-radius:var(--r-lg);font:500 var(--text-md)/var(--lh-none) var(--font); cursor:pointer;border:none;transition:background 10ms} .modal-cancel{background:rgba(255,255,255,.06);color:var(--txt2)} .modal-cancel:hover{background:rgba(255,255,255,.1)} /* ═══════════════════════════════════════════════════════════════ PORTAL SHARED — Score Bars & Colors ═══════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════ PORTAL SHARED — Page Shell (child pages inside iframe) EVERY iframe page MUST use .page-shell > [.page-head, .page-body, .page-foot] These rules are authoritative — do NOT override locally. Sean 2026-04-16. ═══════════════════════════════════════════════════════════════ */ .page-shell{display:flex;flex-direction:column;height:100vh;overflow:hidden;background:transparent} .page-head,.cc-hdr{flex-shrink:0;padding:16px 16px 10px;width:100%;margin:0;animation:fadeUp 25ms var(--ease)} .page-body{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:10px 16px 16px} .page-body::-webkit-scrollbar{width:0} .page-inner{max-width:1100px;padding:0 0 var(--s10);margin:0 auto;width:100%} .page-head>.text-muted{color:var(--txt3);margin-bottom:var(--s1)} .page-head>.text-muted:last-child{margin-bottom:0} /* UNIFIED TYPE HIERARCHY — same weights / sizes on every page. SF Pro Display for titles, SF Pro Text for body. */ .page-shell .pg-title,.pg-title{font:500 28px/1.1 var(--font-display);letter-spacing:-.02em;color:var(--txt);margin:0 0 6px} .page-shell .pg-sub,.pg-sub{font:400 14px/1.4 var(--font);color:var(--txt3);margin:0} .page-shell .sec-title,.sec-title{font:500 18px/1.2 var(--font-display);letter-spacing:-.01em;color:var(--txt);margin:0 0 10px} .page-shell .sec-sub,.sec-sub{font:400 13px/1.4 var(--font);color:var(--txt3);margin:0} .btn-icon{display:inline-flex;align-items:center;justify-content:center;width:var(--h-sm);height:var(--h-sm); border-radius:var(--r-md);border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04); color:var(--txt3);cursor:pointer;transition:background 10ms,color 10ms} .btn-icon:hover{background:rgba(255,255,255,.08);color:var(--txt)} /* ═══════════════════════════════════════════════════════════════ PORTAL SHARED — Wizard Buttons (back/next) ═══════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════ PORTAL SHARED — Page Titles & Gradient Text ═══════════════════════════════════════════════════════════════ */ .pg-title,.cc-title,.banner-title{font:500 28px/var(--lh-tight) var(--cb-font-display); margin:0 0 var(--s0);letter-spacing:-.02em;color:var(--txt)} .pg-sub,.cc-sub{color:var(--txt3);font:400 var(--text-md)/var(--lh-normal) var(--cb-font-text);margin:0 0 var(--s2)} /* ═══════════════════════════════════════════════════════════════ PORTAL SHARED — Unified Tab Row ═══════════════════════════════════════════════════════════════ */ .pg-tabs{display:flex;gap:0;margin-bottom:var(--s3);border-bottom:1px solid rgba(255,255,255,.06);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none} .pg-tabs::-webkit-scrollbar{display:none} .pg-tab{padding:var(--s1) var(--s2);font:500 var(--text-md)/var(--lh-none) var(--font);color:var(--txt3);cursor:pointer;white-space:nowrap;flex-shrink:0; border:none;background:none;border-bottom:2px solid transparent;transition:color 10ms,border-color 10ms} .pg-tab:hover{color:var(--txt)} .pg-tab.active{color:var(--blue);border-bottom-color:var(--blue)} /* ═══════════════════════════════════════════════════════════════ PORTAL SHARED — Toast (simple fixed-bottom) ═══════════════════════════════════════════════════════════════ */ .toast-fixed{position:fixed;bottom:24px;right:24px;padding:12px 18px; background:linear-gradient(180deg,rgba(28,32,46,.94) 0%,rgba(18,22,34,.94) 100%); border:1px solid rgba(255,255,255,.10);border-top-color:rgba(255,255,255,.18); border-radius:14px;font:500 13px/1.35 var(--font-display);color:#fff; display:flex;align-items:center;gap:10px;z-index:1000;pointer-events:none; box-shadow:0 12px 32px rgba(0,0,0,.38),0 2px 6px rgba(0,0,0,.22); transform:translateY(20px) scale(.96);opacity:0; transition:transform 240ms cubic-bezier(.16,1,.3,1),opacity 200ms ease-out;} .toast-fixed.visible{transform:translateY(0) scale(1);opacity:1;pointer-events:auto} .toast-fixed.success{border-left:3px solid var(--green)} .toast-fixed.error{border-left:3px solid var(--red)} /* ═══════════════════════════════════════════════════════════════ PORTAL SHARED — Toggle Row ═══════════════════════════════════════════════════════════════ */ .tog-row{display:flex;align-items:center;justify-content:space-between;padding:var(--s2) 0;border-bottom:1px solid rgba(255,255,255,.06)} .tog-row:last-child{border-bottom:none} .tog-label{font:500 var(--text-md)/var(--lh-normal) var(--font)} .tog-desc{font:400 var(--text-sm)/var(--lh-normal) var(--font);color:var(--txt3);margin-top:2px} /* ═══════════════════════════════════════════════════════════════ PORTAL SHARED — Segmented Control ═══════════════════════════════════════════════════════════════ */ .seg-ctrl{display:inline-flex;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08); border-radius:var(--r-lg);padding:3px;gap:2px} .seg-btn{padding:8px var(--s2);border-radius:calc(var(--r-lg) - 2px);font:500 var(--text-sm)/var(--lh-none) var(--font); color:var(--txt3);cursor:pointer;border:none;background:transparent;transition:background 10ms,color 10ms} .seg-btn:hover{color:var(--txt2)} .seg-btn.active{background:rgba(255,255,255,.12);color:var(--txt);box-shadow:0 1px 4px rgba(0,0,0,.2)} /* ═══════════════════════════════════════════════════════════════ PORTAL SHARED — Destructive Button ═══════════════════════════════════════════════════════════════ */ .btn-danger{background:rgba(192,57,43,.15);color:var(--red);border:1px solid rgba(192,57,43,.3); border-top-color:rgba(192,57,43,.4)} .btn-danger:hover{background:rgba(192,57,43,.25);border-color:rgba(192,57,43,.5);transform:translateY(-1px)} .tf-pill.active{background:rgba(41,151,255,.1);border-color:rgba(41,151,255,.3);color:var(--blue)} /* Dashboard 3-column layout */ @media(max-width:1024px){.tm-3col{grid-template-columns:1fr}} .tm-col-head.warn{color:var(--red)} .tm-col-cnt.warn{color:var(--red);border-color:rgba(192,57,43,.2)} /* Section title + count */ /* Report 2-column layout */ @media(max-width:1024px){.tm-report{grid-template-columns:1fr}} /* Client card */ .tm-client-tag.trial{background:rgba(255,149,0,.12);color:var(--orange)} .tm-client-tag.active{background:rgba(48,209,88,.12);color:var(--green)} .tm-proj-tag.active{background:rgba(41,151,255,.15);color:var(--blue)} /* ═══════════════════════════════════════════════════════════════ PORTAL SHELL — Welcome Stage (first login cinematic) ═══════════════════════════════════════════════════════════════ */ @keyframes wLetterIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} @keyframes wOrbPulse{0%,100%{opacity:.15}50%{opacity:.25}} .ws-stage{position:fixed;inset:0;z-index:500;display:none;align-items:center;justify-content:center; background:radial-gradient(ellipse 80% 50% at 50% 30%,rgba(41,151,255,.04),transparent), linear-gradient(180deg,#0a0a0a,#050505,#000)} .ws-stage.active{display:flex} .ws-name{font:500 clamp(28px,4vw,48px)/var(--lh-tight) var(--font-display);color:var(--txt);margin-bottom:var(--s2)} .ws-name .ws-char{display:inline-block;opacity:0} .ws-sub{font:400 var(--text-md)/var(--lh-relaxed) var(--font);color:var(--txt3);margin-bottom:var(--s4);max-width:380px;margin-left:auto;margin-right:auto} /* ═══════════════════════════════════════════════════════════════ PORTAL SHELL — UI Tour (post-welcome walkthrough) ═══════════════════════════════════════════════════════════════ */ .ws-tour.active{display:flex} /* Old tour classes removed — welcome banner uses inline styles */ /* ═══════════════════════════════════════════════════════════════ PORTAL SHELL — Onboarding Island (trial users, right side) ═══════════════════════════════════════════════════════════════ */ /* Trial stepper widget — KILLED 2026-04-21. Any stale .oa-island nodes stay hidden. */ .oa-island, .oa-island.visible { display: none !important; } /* ═══════════════════════════════════════════════════════════════ PORTAL SHELL — Chat Quick Popup (bottom island) ═══════════════════════════════════════════════════════════════ */ .ix-popup{position:fixed;bottom:60px;z-index:200;width:320px;max-height:420px; background:rgba(10,12,16,.96);border:1px solid rgba(255,255,255,.1);border-top-color:rgba(255,255,255,.18); border-radius:var(--r-xl);box-shadow:0 12px 48px rgba(0,0,0,.5); transform:translateY(8px) scale(.96);opacity:0;pointer-events:none; transition:transform 10ms var(--ease),opacity 10ms; display:flex;flex-direction:column;overflow:hidden} .ix-popup.open{transform:translateY(0) scale(1);opacity:1;pointer-events:auto} .ix-chat{right:60px} /* Old floating notification — replaced by .sb-notif-popup */ /* ═══ Sidebar Notification Popup — fills the left nav column, opens upward from the profile/bell footer. Sean spec 2026-04-16. ═══ */ .sb-notif-popup{ position:fixed;bottom:72px;left:18px; width:224px;max-height:calc(100vh - 140px);z-index:9000; display:flex;flex-direction:column;overflow:hidden; border-radius:16px; background:var(--cb-glass-2-bg); border:var(--cb-glass-2-border);border-top-color:var(--cb-glass-2-border-top); box-shadow:var(--cb-glass-2-shadow),0 16px 48px rgba(0,0,0,.55); transform:translateY(8px) scale(.96);opacity:0;pointer-events:none; transition:transform 180ms cubic-bezier(.16,1,.3,1),opacity 180ms; transform-origin:bottom left} .sb-notif-popup::before{content:'';position:absolute;top:0;left:12%;right:12%;height:1px;z-index:2; background:linear-gradient(90deg,transparent,rgba(255,255,255,.35) 25%,rgba(255,255,255,.6) 50%,rgba(255,255,255,.35) 75%,transparent)} .sb-notif-popup.open{transform:translateY(0) scale(1);opacity:1;pointer-events:auto} .sb-notif-hdr{display:flex;align-items:center;justify-content:space-between; padding:var(--s1) var(--s2);border-bottom:1px solid rgba(255,255,255,.06)} .sb-notif-hdr span{font:500 var(--text-sm)/1 var(--font-display);color:var(--txt);letter-spacing:-.01em} .sb-notif-close{background:none;border:none;color:var(--txt4);font-size:16px; cursor:pointer;padding:0;line-height:1;transition:color 10ms} .sb-notif-close:hover{color:var(--txt)} .sb-notif-list{flex:1;overflow-y:auto} .sb-notif-list::-webkit-scrollbar{width:0} .ix-popup-hdr{display:flex;align-items:center;justify-content:space-between; padding:var(--card-sm) var(--s2);border-bottom:1px solid rgba(255,255,255,.06)} .ix-popup-hdr h4{font:500 var(--text-md)/var(--lh-none) var(--font-display);margin:0} .ix-popup-expand{background:none;border:none;color:var(--blue);font:500 var(--text-sm)/var(--lh-none) var(--font);cursor:pointer} .ix-popup-expand:hover{text-decoration:underline} /* Chat popup DM list */ .ix-popup-list{flex:1;overflow-y:auto;max-height:300px} .ix-popup-list::-webkit-scrollbar{width:0} .ix-popup-empty{padding:var(--s4);text-align:center;color:var(--txt4);font:400 var(--text-sm)/var(--lh-normal) var(--font)} /* Chat popup thread view */ .ix-thread{display:none;flex-direction:column;flex:1} .ix-thread.active{display:flex} .ix-thread-hdr{display:flex;align-items:center;gap:var(--s1);padding:var(--s1) var(--s2); border-bottom:1px solid rgba(255,255,255,.06)} .ix-thread-back{background:none;border:none;color:var(--txt3);cursor:pointer;padding:var(--s0); display:flex;align-items:center} .ix-thread-back svg{width:16px;height:16px} .ix-thread-msgs{flex:1;overflow-y:auto;padding:var(--s1);display:flex;flex-direction:column;gap:var(--s0)} .ix-thread-msgs::-webkit-scrollbar{width:0} .ix-thread-input{display:flex;align-items:center;gap:var(--s0);padding:var(--s1); border-top:1px solid rgba(255,255,255,.06)} .ix-thread-input input{flex:1;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08); border-radius:var(--r-pill);padding:var(--s0) var(--card-sm);color:var(--txt); font:400 var(--text-sm)/var(--lh-none) var(--font);outline:none} .ix-thread-input input::placeholder{color:var(--txt4)} .ix-thread-input input:focus{border-color:rgba(41,151,255,.4)} .ix-thread-send{width:28px;height:28px;border-radius:50%;border:none; background:var(--blue);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center; transition:transform 10ms;flex-shrink:0} .ix-thread-send:hover{transform:scale(1.08)} .ix-thread-send svg{width:14px;height:14px} /* ═══════════════════════════════════════════════════════════════ PORTAL SHELL — Mobile FAB Menu (bottom-right expandable) ═══════════════════════════════════════════════════════════════ */ /* ── FAB wrapper — anchors everything bottom-right ── */ .mob-fab-wrap{display:none;position:fixed;bottom:calc(16px + env(safe-area-inset-bottom,0px));right:16px; z-index:210;flex-direction:column;align-items:flex-end;gap:0} /* ── Main FAB button — 48px circle ── */ .mob-fab-btn{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.15); background:linear-gradient(135deg,rgba(41,151,255,.9),rgba(30,120,220,.95)); color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center; box-shadow:0 4px 16px rgba(41,151,255,.4),0 2px 6px rgba(0,0,0,.3); -webkit-tap-highlight-color:transparent;padding:0;position:relative;z-index:2; transition:transform 200ms cubic-bezier(.4,0,.2,1),box-shadow 200ms} .mob-fab-btn:active{transform:scale(.92)} .mob-fab-btn svg{width:22px;height:22px;position:absolute;transition:opacity 150ms,transform 150ms} .mob-fab-icon-close{opacity:0;transform:rotate(-90deg)} .mob-fab-wrap.open .mob-fab-icon-menu{opacity:0;transform:rotate(90deg)} .mob-fab-wrap.open .mob-fab-icon-close{opacity:1;transform:rotate(0)} .mob-fab-wrap.open .mob-fab-btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2); box-shadow:0 2px 8px rgba(0,0,0,.3)} /* ── Expanding items — stack upward from FAB ── */ .mob-fab-items{display:flex;flex-direction:column;align-items:flex-end;gap:6px; padding-bottom:10px;pointer-events:none;opacity:0; transform:translateY(12px) scale(.95); transition:opacity 180ms cubic-bezier(.4,0,.2,1),transform 180ms cubic-bezier(.4,0,.2,1)} .mob-fab-wrap.open .mob-fab-items{pointer-events:auto;opacity:1;transform:translateY(0) scale(1)} /* ── Individual item — pill with icon + label ── */ .mob-fab-item{display:flex;align-items:center;gap:10px;padding:10px 14px 10px 12px; border-radius:12px;border:1px solid rgba(255,255,255,.1); background:rgba(10,14,24,.92);color:rgba(255,255,255,.65); cursor:pointer;font:500 13px/1 var(--font);white-space:nowrap; box-shadow:0 2px 10px rgba(0,0,0,.35);-webkit-tap-highlight-color:transparent; transition:background 100ms,color 100ms,transform 80ms;text-align:left} .mob-fab-item svg{width:18px;height:18px;flex-shrink:0} .mob-fab-item:active{transform:scale(.96);background:rgba(255,255,255,.08)} .mob-fab-item.active{color:var(--blue);background:rgba(41,151,255,.12);border-color:rgba(41,151,255,.25)} /* Separator between nav items and app switch */ .mob-fab-sep{width:60%;height:1px;background:rgba(255,255,255,.1);margin:4px auto} /* Operator app button — distinct gold accent */ .mob-fab-operator{color:rgba(245,166,35,.7)!important;border-color:rgba(245,166,35,.15)!important} .mob-fab-operator:active,.mob-fab-operator.active{color:var(--gold)!important;background:rgba(245,166,35,.12)!important;border-color:rgba(245,166,35,.3)!important} /* Operator is owner/admin only — hidden by default, shown via data-role on body */ .mob-fab-item.admin-only,.mob-fab-sep.admin-only{display:none} body[data-role="owner"] .mob-fab-item.admin-only, body[data-role="owner"] .mob-fab-sep.admin-only, body[data-role="admin"] .mob-fab-item.admin-only, body[data-role="admin"] .mob-fab-sep.admin-only{display:flex} /* ── Backdrop ── */ .mob-fab-backdrop{display:none;position:fixed;inset:0;z-index:199; background:rgba(0,0,0,.4);opacity:0;transition:opacity 180ms} .mob-fab-backdrop.open{display:block;opacity:1} /* ── Mobile overrides — hide desktop nav, maximize content ── */ @media(max-width:768px){ .mob-fab-wrap{display:flex} .mob-bar{display:none!important} .app-dock,.left-nav,.bottom-island,.top-bar,.ln-chat-panel,.shell-topbar{display:none!important} .shell{grid-template-columns:1fr!important;grid-template-rows:1fr} .shell-body{grid-row:1;grid-column:1;padding:env(safe-area-inset-top,0) 0 0 0!important} .shell-body-glass{border-radius:0!important} .shell-body-glass::before{border-radius:0!important} .shell-body-glass::after{display:none!important} } /* ═══════════════════════════════════════════════════════════════ PORTAL SHELL — Nav Event Bubble (left nav bottom) ═══════════════════════════════════════════════════════════════ */ /* ── Billboard / Events container — premium 16:9 glass mini-billboard ── */ .nav-event{display:none;padding:var(--s1) var(--s1) 0;position:relative;flex-shrink:0} .nav-event.visible{display:block} .nav-event-viewport{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden; background:linear-gradient(135deg,rgba(10,12,22,.92) 0%,rgba(16,20,38,.88) 50%,rgba(8,10,18,.94) 100%); border:1px solid rgba(255,255,255,.07); box-shadow:0 4px 20px rgba(0,0,0,.35),0 0 0 .5px rgba(255,255,255,.04),inset 0 1px 0 rgba(255,255,255,.05); backdrop-filter:none;-webkit-backdrop-filter:none} .nav-event-viewport::before{content:'';position:absolute;inset:0;z-index:0; background:radial-gradient(ellipse 80% 60% at 30% 20%,rgba(41,151,255,.06) 0%,transparent 70%), radial-gradient(ellipse 60% 50% at 80% 80%,rgba(126,203,161,.04) 0%,transparent 70%); pointer-events:none} /* Slide */ .nav-event-slide.active{opacity:1;pointer-events:auto} /* Title + body */ /* CTA link */ /* Dots */ .nav-event-dots{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);display:flex;gap:4px;z-index:2} .nav-event-dot.active{background:rgba(255,255,255,.5);transform:scale(1.3)} /* Admin edit button */ .nav-event-edit{position:absolute;top:5px;right:5px;z-index:3;width:18px;height:18px;border-radius:50%; border:none;background:rgba(255,255,255,.06);color:var(--txt4);cursor:pointer; display:none;align-items:center;justify-content:center;padding:0;transition:background 10ms} .nav-event-edit:hover{background:rgba(255,255,255,.12);color:var(--txt2)} .nav-event-edit svg{width:9px;height:9px} [data-role="admin"] .nav-event-edit,[data-role="owner"] .nav-event-edit{display:flex} /* Admin modal */ .bb-modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:1100;display:flex;align-items:center;justify-content:center; opacity:0;pointer-events:none;transition:opacity 10ms} .bb-modal-bg.active{opacity:1;pointer-events:auto} .bb-modal{width:380px;max-height:85vh;overflow-y:auto;border-radius:var(--r-xl); background:rgba(14,16,24,.96);border:1px solid rgba(255,255,255,.08); box-shadow:0 20px 60px rgba(0,0,0,.6);padding:var(--s3);backdrop-filter:none;-webkit-backdrop-filter:none} .bb-modal-title{font:500 var(--text-sm)/var(--lh-none) var(--font);color:var(--txt);margin-bottom:var(--s2)} .bb-toggle.on{background:rgba(41,151,255,.4)} .bb-toggle.on::after{transform:translateX(14px)} .bb-actions{display:flex;gap:var(--s1);margin-top:var(--s2)} .bb-btn{flex:1;padding:7px;border-radius:var(--r-md);border:none;font:500 11px/var(--lh-none) var(--font);cursor:pointer;transition:background 10ms} .bb-btn-save{background:rgba(41,151,255,.2);color:var(--blue)} .bb-btn-save:hover{background:rgba(41,151,255,.3)} .bb-btn-cancel{background:rgba(255,255,255,.06);color:var(--txt3)} .bb-btn-cancel:hover{background:rgba(255,255,255,.1)} .bb-btn-add{width:100%;padding:6px;border-radius:var(--r-md);border:1px dashed rgba(255,255,255,.1); background:transparent;color:var(--txt4);font:500 10px/var(--lh-none) var(--font);cursor:pointer;transition:border-color 10ms} .bb-btn-add:hover{border-color:rgba(255,255,255,.2);color:var(--txt3)} /* ═══════════════════════════════════════════════════════════════ PORTAL SHELL — PWA Install Banner ═══════════════════════════════════════════════════════════════ */ .pwa-banner{display:none;position:fixed;top:0;left:0;right:0;z-index:10000; padding:var(--card-sm) var(--s2);padding-top:calc(var(--card-sm) + env(safe-area-inset-top,0px)); background:rgba(5,10,20,.98);border-bottom:1px solid rgba(41,151,255,.2); box-shadow:0 4px 24px rgba(0,0,0,.5);align-items:center;gap:var(--card-sm); animation:fadeUp 25ms var(--ease)} .pwa-banner.visible{display:flex} .pwa-banner-logo{width:32px;height:32px;border-radius:var(--s1);flex-shrink:0} .pwa-banner-text{flex:1;min-width:0} .pwa-banner-title{font:500 var(--text-sm)/var(--lh-none) var(--font);color:#fff} .pwa-banner-hint{font:400 var(--text-4xs)/var(--lh-none) var(--font);color:var(--txt3);margin-top:1px} .pwa-banner-install{padding:7px var(--card-sm);background:var(--blue);border:none;border-radius:var(--s1); font:500 var(--text-sm)/var(--lh-none) var(--font);color:#fff;cursor:pointer;flex-shrink:0} .pwa-banner-close{width:28px;height:28px;background:rgba(255,255,255,.08);border:none;border-radius:50%; cursor:pointer;color:var(--txt3);display:flex;align-items:center;justify-content:center;flex-shrink:0} .pwa-banner-close svg{width:14px;height:14px} /* ═══════════════════════════════════════════════════════════════ PORTAL SHELL — Iframe Transitions ═══════════════════════════════════════════════════════════════ */ #pageFrame{transition:opacity 10ms var(--ease);} /* ═══════════════════════════════════════════════════════════════ PORTAL SHARED — Social Profile Cards ═══════════════════════════════════════════════════════════════ */ .social-link.visible{opacity:1;pointer-events:auto} /* ═══════════════════════════════════════════════════════════════ PORTAL SHARED — Color Wheel (brand color picker) ═══════════════════════════════════════════════════════════════ */ .color-swatch.active{border-color:var(--blue)} .cw-panel.open{display:block} /* ═══════════════════════════════════════════════════════════════ PORTAL SHARED — Signature Pad ═══════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════ PORTAL SHARED — Contract / Legal Box ═══════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════ PORTAL SHARED — Review Cards (onboarding review step) ═══════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════ PORTAL SHARED — Success State (completion animation) ═══════════════════════════════════════════════════════════════ */ @keyframes successPop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}} .avatar-opt.active{border-color:var(--blue);color:var(--blue);background:rgba(41,151,255,.06)} /* ═══════════════════════════════════════════════════════════════ PORTAL SHARED — Checkbox Agreement Row ═══════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════ PORTAL SHARED — Niche Grid (extends chip) ═══════════════════════════════════════════════════════════════ */ .niche-chip.selected{border-color:var(--blue)!important;background:rgba(41,151,255,.08);color:var(--txt)} .niche-chip.selected:hover{border-color:var(--blue)!important} .sub-chip.selected{border-color:var(--blue)!important;background:rgba(41,151,255,.08);color:var(--blue)} .sub-chip.selected:hover{border-color:var(--blue)!important} /* ═══════════════════════════════════════════════════════════════ PORTAL SHARED — Color Dot (review display) ═══════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════ PORTAL SHARED — Upload Row (side-by-side upload zones) ═══════════════════════════════════════════════════════════════ */ @media(max-width:480px){.upload-row{grid-template-columns:1fr}} /* ═══════════════════════════════════════════════════════════════ BLUEPRINTS PAGE — Wizard, Library, Tier Breakdown, Detail Modal ═══════════════════════════════════════════════════════════════ */ /* ── Landing: OLD rules deleted (dead code, superseded by the new 3-column .bp-landing in BLUEPRINTS — Hero section below). The old .bp-landing + .bp-split classes were from a 2-column hero/split layout that no page uses anymore. */ /* ── Wizard shell ── */ /* ── Progress segments ── */ .bp-prog-seg.done{background:var(--blue)} .bp-prog-seg.active{background:var(--green)} .bp-fmt-card.selected{border-color:var(--blue)!important;background:linear-gradient(180deg,rgba(41,151,255,.1) 0%,rgba(41,151,255,.03) 100%);box-shadow:0 0 24px rgba(41,151,255,.12),0 2px 8px rgba(0,0,0,.2),inset 0 1px 0 rgba(41,151,255,.15)} .bp-fmt-card.selected:hover{transform:translateY(-2px);border-color:var(--blue)!important} .bp-v9-card.selected{border-color:var(--blue)} .bp-v9-card.selected .bp-v9-check{opacity:1;transform:scale(1)} .bp-vid-card.selected{border-color:var(--blue)} .bp-sound-card.selected{border-color:var(--blue)} @keyframes bpSoundPulse{0%{transform:scaleY(.2)}100%{transform:scaleY(1)}} .bp-music-card.selected{border-color:var(--blue)} @keyframes bpMusicPulse{0%{transform:scaleY(.2)}100%{transform:scaleY(1)}} .bp-size-bub.selected .bp-size-circle{border-color:var(--blue);color:var(--blue)} @keyframes bpWbw{from{opacity:.3;color:var(--txt3)}to{opacity:1;color:var(--blue)}} @keyframes bpFade{0%,100%{opacity:0}20%,80%{opacity:1}} @keyframes bpPop{from{transform:scale(.85);opacity:.5}to{transform:scale(1);opacity:1}} @keyframes bpType{0%,100%{transform:scaleX(0)}50%{transform:scaleX(1)}} @keyframes bpBlink{50%{border-color:transparent}} /* ── Font face helpers ── */ /* ── Placement diagrams ── */ /* ── Opt-grid 3-col variant ── */ @media(max-width:480px){.opt-grid-3{grid-template-columns:1fr}} /* ── Size bubble preset sizes ── */ @media(max-width:768px){.bp-place-grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:480px){.bp-place-grid{grid-template-columns:repeat(2,1fr)}} .bp-place-card.selected{border-color:var(--blue)} .bp-color-swatch.selected{border-color:var(--blue);background:rgba(41,151,255,.08)} .bp-color-swatch.selected .bp-color-circle{border-color:var(--blue);box-shadow:0 0 12px rgba(41,151,255,.3)} .bp-color-swatch.selected .bp-color-name{color:var(--blue)} /* ── Outline Picker ── */ @media(max-width:480px){.bp-outline-grid{grid-template-columns:repeat(2,1fr)}} .bp-tc-lf-toggle.open svg{transform:rotate(180deg)} .bp-tc-lf-expand.open{max-height:500px} .bp-lib-card.selected{border-color:rgba(52,211,153,.5); box-shadow:0 0 0 1px rgba(52,211,153,.3),0 4px 16px rgba(52,211,153,.1)} .bp-detail{max-width:860px;width:92vw;max-height:85vh; background:rgba(10,14,24,.98) !important; border:1px solid rgba(255,255,255,.08) !important; box-shadow:0 32px 80px rgba(0,0,0,.6) !important; border-radius:20px !important;display:flex;flex-direction:column; margin:auto;padding:0 !important; transform:none !important} .bp-detail:hover{transform:none !important} .bp-detail-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.08)} .bp-detail-title{font:500 18px/1.2 var(--font);color:#fff} .bp-detail-body{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--s2);padding:20px 24px} @media(max-width:768px){.bp-detail-body{grid-template-columns:1fr;gap:var(--s2)}} .bp-detail-preview{width:180px;aspect-ratio:9/16;border-radius:12px;overflow:hidden; background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.10); display:flex;align-items:center;justify-content:center} .bp-detail-preview video{width:100%;height:100%;object-fit:cover} .bp-detail-col{display:flex;flex-direction:column;gap:2px} .bp-detail-actions{display:flex;gap:12px;justify-content:flex-end;padding:16px 24px;border-top:1px solid rgba(255,255,255,.06)} .rq-page .page-body{flex:1;padding:var(--s3) var(--s4) var(--s2);display:flex;flex-direction:column} .rq-page .page-foot .btn-ghost{margin-right:auto} .rq-page .page-foot .btn{min-width:120px} .rq-stage-head .wiz-brand{padding:0} .rq-stage-head .wiz-brand-title{font:500 36px/var(--lh-tight) var(--font-display);letter-spacing:-.02em;margin:var(--s0) 0 0} .rq-stage-head .wiz-brand-eyebrow{font:500 var(--text-xs)/1 var(--font-display);color:var(--blue);letter-spacing:.22em;text-transform:uppercase;margin:var(--s1) 0 0} .rq-stage-head .wiz-step-rail{padding:var(--s2) 0 0} .rq-stage .wiz-content{padding:0;height:auto;overflow:visible;flex:1;display:flex;flex-direction:column} .rq-stage .rq-step{flex:1} .rq-stage .rq-step.active{align-items:center;max-width:none;margin:0;justify-content:center;display:flex;flex-direction:column;gap:var(--s2)} @media (max-width:900px){.rq-split{grid-template-columns:1fr}.rq-preview{position:static;min-height:0}} /* ── Link input row ── */ .rq-link-row.open{max-height:200px} @media (max-width:540px){.rq-up-hud{right:var(--s1);left:var(--s1);bottom:var(--s1);min-width:0;max-width:none}} /* ── Premium green glow ring ── */ @keyframes subRingSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} @keyframes subPulseGlow{ 0%,100%{transform:scale(1);opacity:.6} 50%{transform:scale(1.08);opacity:1}} /* Phase text */ /* Progress pips — green themed */ .sub-pip.active .sub-pip-dot{background:rgba(52,211,153,.5);border-color:rgba(52,211,153,.7); transform:scale(1.3);box-shadow:0 0 14px rgba(52,211,153,.35)} .sub-pip.done .sub-pip-dot{background:rgba(52,211,153,.3);border-color:rgba(52,211,153,.4); transform:scale(1)} /* Success state */ @keyframes subFadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}} @keyframes subRingPulse{0%,100%{box-shadow:0 0 0 0 rgba(52,211,153,.2)}50%{box-shadow:0 0 0 16px rgba(52,211,153,0)}} @keyframes subCheckDraw{to{stroke-dashoffset:0}} /* Fail state */ /* ═══════════════════════════════════════════════════════════════ CHAT PAGE — Full Layout, Sidebar, Messages, Forum, Expand ═══════════════════════════════════════════════════════════════ */ /* ── Layout: sidebar + chat + forum ── */ .ch-sb-overlay.open{opacity:1;pointer-events:auto} /* ── Channel Sidebar ── */ .ch-sb-search-wrap{padding:var(--s1) var(--card-md)} .ch-sb-search{width:100%;padding:var(--s1) var(--s2);border-radius:var(--r-md);border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:var(--txt);font:400 var(--text-sm)/var(--lh-normal) var(--font);outline:none;transition:border-color 10ms} .ch-sb-search::placeholder{color:var(--txt4)} .ch-sb-search:focus{border-color:rgba(41,151,255,.4)} .ch-sb-body{flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.08) transparent} .ch-sb-loading{display:flex;align-items:center;justify-content:center;padding:var(--s4)} .ch-sb-ch.active{background:rgba(255,255,255,.06)} .ch-sb-ch.active .ch-sb-ch-name{color:#fff;font-weight:500} .ch-sb-ch.active .ch-sb-ch-hash{color:rgba(255,255,255,.5)} .ch-sb-ch.active .ch-sb-ch-icon{color:rgba(255,255,255,.5)} .ch-attach-popup.open{opacity:1;pointer-events:auto;transform:translateY(0)} .ch-emoji.visible{opacity:1;pointer-events:auto;transform:translateY(0)} .ch-emoji-cat.active{background:rgba(41,151,255,.12)} /* Mention popup */ .ch-mention.visible{opacity:1;pointer-events:auto;transform:translateY(0)} .ch-mention-item:hover,.ch-mention-item.active{background:rgba(41,151,255,.08)} /* ── Project Expand Overlay ── */ .ch-expand.open{opacity:1;pointer-events:auto} /* ── Chat page responsive ── */ @media(max-width:1024px){ .ch-forum{display:none} } @media(max-width:768px){ .ch-sidebar{position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%);transition:transform 10ms;z-index:91} .ch-sidebar.open{transform:translateX(0)} .ch-hdr-menu{display:flex} } @keyframes fadeSlideIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} /* Form helpers */ @media(max-width:768px){.ac-form-row{flex-direction:column}} /* Brand */ /* Contract stat grid */ @media(max-width:768px){.ac-stat-grid{grid-template-columns:1fr}} .ac-method-btn.active{border-color:var(--blue);background:rgba(41,151,255,.1);color:var(--blue)} /* Health hero */ /* Stats grid */ /* Role-view widget */ .ac-rv-fab{position:fixed;bottom:var(--s3);left:var(--s3);width:var(--h-lg);height:var(--h-lg);border-radius:50%;border:none;background:var(--glass-solid);color:var(--txt);font-size:20px;cursor:pointer;display:none;align-items:center;justify-content:center;z-index:50;box-shadow:0 4px 16px rgba(0,0,0,.3)} .ac-rv-panel{position:fixed;bottom:calc(var(--s3) + var(--h-lg) + var(--s1));left:var(--s3);background:var(--glass-solid);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-xl);padding:var(--s1);min-width:160px;opacity:0;pointer-events:none;transform:translateY(4px);transition:transform 10ms,opacity 10ms;z-index:50;box-shadow:0 8px 24px rgba(0,0,0,.3)} .ac-rv-panel.open{opacity:1;pointer-events:auto;transform:translateY(0)} .ac-rv-label{font:500 var(--text-xs)/var(--lh-none) var(--font);color:var(--txt3);padding:var(--s0) var(--s2);text-transform:uppercase;letter-spacing:.5px} .ac-rv-btn{display:flex;align-items:center;gap:var(--s1);padding:var(--s1) var(--s2);border-radius:var(--r-md);border:none;background:transparent;color:var(--txt2);cursor:pointer;width:100%;font:500 var(--text-sm)/var(--lh-none) var(--font);transition:background 10ms} .ac-rv-btn:hover{background:rgba(255,255,255,.06)} .ac-rv-btn.active{background:rgba(41,151,255,.08);color:var(--blue)} .ac-rv-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0} .ac-rv-dot.trial{background:var(--orange)} .ac-rv-dot.client{background:var(--blue)} .ac-rv-dot.editor{background:var(--green)} .ac-rv-dot.admin{background:var(--purple)} .ac-rv-dot.owner{background:#ffd60a} /* Hero: avatar + name + tags */ /* Reusable avatar component */ /* Stat row */ /* Score bars grid */ /* 3-column layout (shared with team page but dashboard uses own prefix for clarity) */ @media(max-width:1024px){.db-3col{grid-template-columns:1fr}} .db-col-head.warn{color:var(--red)} .db-col-cnt.warn{background:rgba(192,57,43,.15);color:var(--red)} /* 2-column layout */ @media(max-width:768px){.db-2col{grid-template-columns:1fr}} /* Admin tab visibility */ /* Report card grid */ @media(max-width:768px){.db-report-grid{grid-template-columns:1fr}} /* Whiteboard view */ .mt-wb-view.active{display:flex} /* Drop zone */ .mt-wb-drop.active{display:flex} /* Toolbar */ .mt-wb-tool.active{background:rgba(41,151,255,.12);color:var(--blue)} .mt-wb-sticky.yellow{background:#fff59d;color:#333} .mt-wb-sticky.blue{background:#bbdefb;color:#333} .mt-wb-sticky.green{background:#c8e6c9;color:#333} .mt-wb-sticky.purple{background:#e1bee7;color:#333} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}} /* ── Editor pipeline tags ── */ /* ── Pipeline hub (pl- prefix) ── */ /* ── Trash zone ── */ .trash-zone{position:fixed;bottom:0;left:0;right:0;height:64px;background:rgba(192,57,43,.15); backdrop-filter:none;-webkit-backdrop-filter:none;border-top:1px solid rgba(192,57,43,.3); display:flex;align-items:center;justify-content:center;gap:var(--s1);font:500 var(--text-sm)/var(--lh-none) var(--font); color:var(--red);z-index:100;transform:translateY(100%);transition:transform 10ms var(--ease)} .trash-zone svg{width:20px;height:20px} .trash-zone.visible{transform:translateY(0)} .trash-zone.hover{background:rgba(192,57,43,.3);border-top-color:var(--red)} /* ── New team input ── */ .new-team-input.visible{display:flex} /* ── Payout summary bar ── */ /* ── Payout result tags ── */ /* ── Payout history toggle ── */ .ad-hist-arrow.open{transform:rotate(90deg)} /* ── Reports section (rpt- prefix) ── */ .rpt-tp.active{background:var(--blue);color:#fff} @media(max-width:900px){.rpt-grid{grid-template-columns:1fr}} /* ═══════════════════════════════════════════════════════════════ PIPELINE PAGE (pv- project view, th- thread, rev- revision, erw- editor workbench, ga- glass audio, cb- confirm/alert) ═══════════════════════════════════════════════════════════════ */ /* ═══ PROJECT VIEW — DEDICATED REVIEW PAGE (HARD RESET) ═══ */ /* Shell: true black, full viewport, no shell contamination */ .pv-shell{position:fixed;inset:0;z-index:50;background:#000; display:flex;flex-direction:column;animation:fadeUp 25ms var(--ease)} .pv-shell.pv-fullpage{background:#000} /* Body: 3 zones — topbar, main content, dock. Padding creates breathing room */ .pv-body{flex:1;display:flex;min-height:0;overflow:hidden; padding:0 12px 12px;gap:12px} /* Left = video column. No border-radius, no bg — pure black theater */ .pv-left{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;position:relative} /* ═══ ZONE 1: TOP REVIEW BAR — one clean focused row ═══ */ .pv-topbar{display:flex;align-items:center;gap:var(--s2); padding:8px 16px;flex-shrink:0;position:relative;min-height:44px;overflow:visible;z-index:200} /* Back-to-pipeline button — must be visually identical to .pv-top-icon so the top bar looks balanced left vs right. Same 32×32 box, same 8px radius, same glass background, same 18×18 icon. */ .pv-close{width:32px;height:32px;border-radius:8px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.06); color:rgba(255,255,255,.7);cursor:pointer; display:flex;align-items:center;justify-content:center;flex-shrink:0; box-shadow:0 1px 3px rgba(0,0,0,.08); transition:background 10ms,color 10ms,border-color 10ms} .pv-close:hover{ background:rgba(255,255,255,.10); color:#fff;border-color:rgba(255,255,255,.18); box-shadow:0 1px 6px rgba(0,0,0,.12)} .pv-close svg{width:18px;height:18px;stroke-width:1.8} /* Left cluster: back + title + timer */ .pv-top-left{display:flex;align-items:center;gap:10px;flex-shrink:0;min-width:0;flex:1} .pv-proj-name{font:500 17px/1.1 var(--font);color:#fff; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px; } /* Right cluster: minimal actions only */ .pv-top-right{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto} /* Assignment — premium styled, not raw select */ .pv-assign-wrap{display:flex;align-items:center;gap:6px} .pv-assign-wrap select{-webkit-appearance:none;appearance:none; background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08); border-radius:8px;color:var(--txt2);font:500 11px/1 var(--font); padding:6px 24px 6px 8px;cursor:pointer;outline:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 5 5-5' fill='none' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 6px center} .pv-assign-wrap select:hover{border-color:rgba(255,255,255,.15);color:var(--txt)} .pv-assign-wrap select option{background:#0a0e18;color:#fff} /* ═══ CENTER ISLAND — single identity source of truth ═══ */ /* ── Premium island (expanded view) — Apple iOS luminous glass ── */ .pv-island-lg{position:absolute;left:50%;top:6px;transform:translateX(-50%); z-index:2;gap:6px;padding:6px 10px;border-radius:var(--r-island); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); box-shadow:0 2px 8px rgba(0,0,0,.12); } /* All island badges — unified 28px icon containers (Sean: SF / v1 / T1 same size) */ .pv-island-lg .ps-ci-type, .pv-island-lg .ps-ci-tier, .pv-island-lg .ps-ci-grade, .pv-island-lg .ps-ci-bp, .pv-island-lg .ps-ci-ver{ display:inline-flex;align-items:center;justify-content:center; min-width:28px;height:28px;padding:0 10px; border-radius:7px; font:500 12px/1 var(--font);letter-spacing:.05em} .pv-island-lg .ps-ci-ver{ background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.18); color:#fff;font-family:var(--mono); position:relative;cursor:pointer} /* ── Version hover dropdown — opens on hover, no caret, no side arrows ── */ /* Open the dropdown on hover of the version pill OR while hovering the menu itself */ /* override hidden so :hover can show it */ .pv-ver-dd-item.active{background:rgba(41,151,255,.18);color:#fff;border:1px solid rgba(41,151,255,.32)} /* Status glow — luminous glass base */ .pv-island-lg[data-status="queue"]{box-shadow:0 2px 8px rgba(0,0,0,.12),0 0 10px rgba(168,168,176,.06)} .pv-island-lg[data-status="active"]{box-shadow:0 2px 8px rgba(0,0,0,.12),0 0 16px rgba(41,151,255,.12)} .pv-island-lg[data-status="review"]{box-shadow:0 2px 8px rgba(0,0,0,.12),0 0 16px rgba(191,90,242,.12)} .pv-island-lg[data-status="revisions"]{box-shadow:0 2px 8px rgba(0,0,0,.12),0 0 16px rgba(255,159,10,.12)} .pv-island-lg[data-status="approved"]{box-shadow:0 2px 8px rgba(0,0,0,.12),0 0 16px rgba(126,203,161,.12)} /* ── Play/pause overlay on video ── */ .pv-play-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); z-index:3;width:72px;height:72px;border-radius:50%;border:none; background:rgba(0,0,0,.55);color:rgba(255,255,255,.85);cursor:pointer; display:flex;align-items:center;justify-content:center; backdrop-filter:none;-webkit-backdrop-filter:none; transition:opacity 10ms,transform 10ms} .pv-play-overlay svg{width:28px;height:28px;margin-left:3px} .pv-play-overlay:hover{background:rgba(0,0,0,.7);transform:translate(-50%,-50%) scale(1.08)} .pv-play-overlay.playing{opacity:0;pointer-events:none} /* ── Timeline bar — INSIDE video frame, bottom edge — premium glass ── */ .pv-timeline-bar{display:flex;align-items:center;gap:8px; position:absolute;bottom:0;left:0;right:0;z-index:4; padding:10px 16px; background:linear-gradient(0deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.55) 50%,rgba(0,0,0,.15) 80%,transparent 100%); transition:opacity 10ms} /* ── Project countdown timer — pinned to the bottom-right of pv-left, vertically centered on the dock row so they sit on the same horizontal line. Sean: "move the timer count down down so it's level horizontally with the bottom row." ── */ /* Legacy row class — kept as a no-op so any old reference doesn't break layout */ /* ── FrameLab dock — wider, premium glass, centered (25% wider than original) ── */ /* Dock — matches left-nav ln-glass-shell capsule */ .pv-dock-compact{max-width:950px;margin:0 auto; padding:10px 20px;border-radius:24px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);border-top-color:rgba(255,255,255,.12); box-shadow:0 4px 16px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.06)} .pv-dock-compact .dk-btn{width:34px;height:34px;border-radius:var(--r-sm)} .pv-dock-compact .dk-btn svg{width:16px;height:16px} /* ── Rail sections container ── */ /* ── Project Info links row ── */ /* ── Left Assets Panel (Storage-like project file browser) ── */ .pv-ap-tree{flex:1;padding:4px 6px;overflow-y:auto} /* Assets panel moved into thread — no left margin offset needed */ .pv-left{margin-left:0;transition:margin-left 10ms cubic-bezier(.16,1,.3,1);} .pv-assets-panel.collapsed ~ .pv-left{margin-left:0} /* ── Thread avatar cleanup — no colored circles ── */ /* ── Version arrows in center island ── */ .pv-ver-arrow{background:none;border:none;color:rgba(255,255,255,.35);cursor:pointer; width:22px;height:22px;display:flex;align-items:center;justify-content:center; border-radius:5px;transition:background,color,border-color,opacity 10ms} .pv-ver-arrow:hover{background:rgba(255,255,255,.08);color:#fff} .pv-ver-arrow:disabled{opacity:.2;cursor:default} /* ── Blueprint hover popover ── */ .pv-bp-hover{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:8px; min-width:240px;max-width:320px;padding:12px;border-radius:12px;z-index:30; background:rgba(10,14,24,.96);border:1px solid rgba(255,255,255,.08); box-shadow:0 8px 32px rgba(0,0,0,.5);backdrop-filter:none} .pv-bp-hover .bp-field{display:flex;justify-content:space-between;padding:4px 0; border-bottom:1px solid rgba(255,255,255,.04);font:400 12px/1.3 var(--font)} .pv-bp-hover .bp-field:last-child{border-bottom:none} .pv-bp-hover .bp-field-label{color:var(--txt3)} .pv-bp-hover .bp-field-value{color:var(--txt);text-align:right;max-width:60%} /* ── Knobs row — fixed to bottom of dock area, always visible ── */ .dk-knobs-row{display:flex;align-items:center;justify-content:center;gap:16px; padding:8px 0;flex-shrink:0;position:relative;z-index:5} .dk-save-pref{background:rgba(41,151,255,.15);border:1px solid rgba(41,151,255,.25); color:var(--blue);font:500 11px/1 var(--font);padding:4px 12px;border-radius:6px; cursor:pointer;transition:background,color,border-color,opacity 10ms} .dk-save-pref:hover{background:rgba(41,151,255,.25)} /* ── Project Folder cascading dropdown (Finder-style columns) ── */ .pv-folder-row.active{background:rgba(41,151,255,.16);color:#fff;border:1px solid rgba(41,151,255,.30)} /* ── Top bar icon buttons — Apple iOS luminous glass ── */ .pv-top-icon{width:32px;height:32px;border-radius:8px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.06); color:rgba(255,255,255,.7);cursor:pointer; display:flex;align-items:center;justify-content:center;flex-shrink:0; box-shadow:0 1px 3px rgba(0,0,0,.08); transition:background 10ms,color 10ms,border-color 10ms} .pv-top-icon svg{width:18px;height:18px;stroke-width:1.8} .pv-top-icon:hover{ background:rgba(255,255,255,.10); color:#fff;border-color:rgba(255,255,255,.18); box-shadow:0 1px 6px rgba(0,0,0,.12)} /* Grade badge in top-right — same 32px glass as pv-top-icon */ .pv-top-right>.ps-ci-grade{ width:32px;height:32px;border-radius:8px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.06); display:inline-flex;align-items:center;justify-content:center; font:500 14px/1 var(--font);letter-spacing:.04em; box-shadow:0 1px 3px rgba(0,0,0,.08); } /* Editor avatar in top-right — circular, 32px glass, positioned right of grade */ .pv-tr-editor{ width:32px;height:32px;border-radius:50%; display:inline-flex;align-items:center;justify-content:center; background:linear-gradient(135deg, rgba(41,151,255,.22), rgba(41,151,255,.06)); border:1px solid rgba(41,151,255,.32); background-size:cover;background-position:center; font:600 11px/1 var(--font);color:rgba(255,255,255,.9); box-shadow:0 1px 3px rgba(0,0,0,.08); flex-shrink:0; cursor:default; transition:transform 120ms cubic-bezier(.16,1,.3,1), border-color 120ms ease; } .pv-tr-editor[hidden]{display:none} .pv-tr-editor:hover{transform:scale(1.06);border-color:rgba(41,151,255,.55)} .pv-tr-editor-ini{pointer-events:none} .pv-tr-editor.has-img .pv-tr-editor-ini{display:none} /* Internal/Client chat scope switch — glass segmented pill in thread header */ .pv-th-scope{display:inline-flex;align-items:center;gap:2px; padding:2px;border-radius:999px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); margin-right:6px; } .pv-th-scope-btn{ appearance:none;border:none;cursor:pointer; padding:4px 10px;border-radius:999px; font:500 11px/1 var(--font); color:rgba(255,255,255,.55); background:transparent; transition:background 140ms ease, color 140ms ease; } .pv-th-scope-btn:hover{color:rgba(255,255,255,.85)} .pv-th-scope-btn.active{color:#fff;background:rgba(41,151,255,.22);box-shadow:inset 0 0 0 1px rgba(41,151,255,.3)} .pv-th-scope-btn[data-scope="internal"].active{background:rgba(255,159,10,.22);box-shadow:inset 0 0 0 1px rgba(255,159,10,.3)} /* Client role locked to Client scope — hide Internal tab */ .pv-th-scope[data-locked="client"] .pv-th-scope-btn[data-scope="internal"]{display:none} /* ── File Info popover — Apple iOS luminous glass ── */ .pv-fi-popover{position:absolute;top:100%;right:0;margin-top:6px;z-index:30; width:260px;padding:12px;border-radius:12px; background:rgba(14,16,22,.92); border:1px solid rgba(255,255,255,.10); box-shadow:0 4px 20px rgba(0,0,0,.25); } .pv-fi-pop-title{font:500 12px/1 var(--font);color:rgba(255,255,255,.8);margin-bottom:8px; padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.12)} /* ── Center island position for version dropdown ── */ .pv-island-lg{position:relative} /* ── Video area ── */ .pv-video{flex:1;min-width:0;position:relative;display:flex;align-items:center;justify-content:center; background:#000;overflow:hidden;aspect-ratio:16/9;max-height:100%} .pv-player{width:100%;height:100%;object-fit:contain;background:#000;position:absolute;inset:0; /* 9:16 vertical content auto-centers via object-fit:contain inside the locked 16:9 frame */} .pv-canvas{position:absolute;inset:0;z-index:2;pointer-events:none;cursor:crosshair} .pv-canvas.active{pointer-events:auto} .pv-snap-flash{position:absolute;inset:0;z-index:5;background:#fff; opacity:0;pointer-events:none;transition:none} .pv-snap-flash.fire{opacity:.6;transition:opacity 10ms ease-out} /* ── Version selector (pills above video) ── */ .pv-ver.active{background:rgba(41,151,255,.1);border-color:rgba(41,151,255,.3);color:var(--blue)} /* ── Version dropdown ── */ .pv-ver-dd-item.active{background:rgba(41,151,255,.1);color:var(--blue)} /* ── File Info section ── */ /* Legacy grid layout (kept for compat) */ /* Clean list layout for project/file info */ .pv-fi-list{display:flex;flex-direction:column;padding:4px 12px} .pv-fi-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0; border-bottom:1px solid rgba(255,255,255,.03)} .pv-fi-row:last-child{border-bottom:none} .pv-fi-label{font:500 12px/1 var(--font);color:var(--txt3)} .pv-fi-value{font:500 12px/1 var(--font);color:var(--txt);text-align:right} /* ── Color-coded revision markers ── */ /* ── Camera / Screen PIP ── */ .pv-pip{position:absolute;z-index:6;border-radius:var(--r-lg);overflow:hidden; border:2px solid rgba(255,255,255,.15);box-shadow:0 4px 16px rgba(0,0,0,.5); display:none;cursor:move} .pv-pip.active{display:block} .pv-pip video{width:100%;height:100%;object-fit:cover;display:block} .pv-cam-pip{width:160px;height:120px;bottom:var(--s8);right:var(--s2)} .pv-screen-pip{width:240px;height:135px;bottom:var(--s8);left:var(--s2)} /* ── Recording warn/urgent states ── */ .rec-indicator.rec-warn{border-color:rgba(255,159,10,.4);background:rgba(255,159,10,.12)} .rec-indicator.rec-warn .rec-dot{background:var(--orange)} .rec-indicator.rec-warn .rec-label{color:var(--orange)} .rec-indicator.rec-urgent{border-color:rgba(192,57,43,.5);background:rgba(192,57,43,.2); animation:rec-urgent-pulse .5s ease-in-out infinite} @keyframes rec-urgent-pulse{0%,100%{box-shadow:none}50%{box-shadow:0 0 12px rgba(192,57,43,.3)}} /* ── Thread messages — Apple iMessage-style bubbles (matches design system) ── */ .th-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:16px 14px; display:flex;flex-direction:column;gap:16px; scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.06) transparent} /* Message bubble — Apple iOS luminous glass */ /* Legacy fallback for .th-text */ /* ── Loom-style media feedback card — luminous glass ── */ /* ── System events — clean inline pills ── */ /* Legacy compact event pill (kept for compat) */ /* ── Status card (structured system event) ── */ /* Status card timestamp — visible on EVERY system message (Queue / Active / Review / etc). Sean: "where are they???? why are they on one message of the three" — fixed. */ /* Status-specific event dot colors */ /* ── Revision bubbles (inside thread) ── */ /* ── Revision review overlay ── */ .rev-review-overlay{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.7); backdrop-filter:none;-webkit-backdrop-filter:none; display:flex;align-items:center;justify-content:center; opacity:0;pointer-events:none;transition:opacity 10ms var(--ease)} .rev-review-overlay.open{opacity:1;pointer-events:auto} .rev-review-modal{width:90vw;max-width:560px;max-height:80vh;display:flex;flex-direction:column; background:var(--glass-solid);border:var(--glass-b);border-top-color:var(--glass-bt); border-radius:var(--r-2xl);box-shadow:0 16px 64px rgba(0,0,0,.5);overflow:hidden} .rev-review-head{display:flex;align-items:center;justify-content:space-between; padding:var(--s2) var(--s3);border-bottom:1px solid rgba(255,255,255,.06)} .rev-review-head h2{font:500 var(--text-lg)/var(--lh-none) var(--font)} .rev-review-body{flex:1;overflow-y:auto;padding:var(--s2) var(--s3)} .rev-review-foot{padding:var(--s2) var(--s3);border-top:1px solid rgba(255,255,255,.06); display:flex;justify-content:flex-end;gap:var(--s1)} .rev-transcript-box.open{max-height:500px;padding:var(--s1) 0} /* ── Editor Revision Workbench ── */ .erw-overlay{position:fixed;inset:0;z-index:55;background:rgba(10,14,28,.98); display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity 10ms var(--ease)} .erw-overlay.open{opacity:1;pointer-events:auto} .erw-topbar{display:flex;align-items:center;gap:var(--s2);padding:var(--s2); border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0} .erw-round{font:500 var(--text-lg)/var(--lh-none) var(--font)} .erw-ver-btns{display:flex;gap:var(--s0);margin-left:auto} .erw-ver-btn{padding:4px 12px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.08); background:transparent;color:var(--txt3);font:500 var(--text-xs)/var(--lh-none) var(--font); cursor:pointer;transition:background 10ms,border-color 10ms,color 10ms} .erw-ver-btn.active{background:rgba(41,151,255,.1);border-color:rgba(41,151,255,.3);color:var(--blue)} .erw-body{flex:1;display:flex;min-height:0;overflow:hidden} .erw-video-area{flex:1;min-width:0;display:flex;flex-direction:column;background:#000} .erw-video{width:100%;flex:1;object-fit:contain} .erw-controls{display:flex;align-items:center;gap:var(--s1);padding:var(--s1) var(--s2); border-top:1px solid rgba(255,255,255,.06);flex-shrink:0} .erw-play{width:32px;height:32px;flex-shrink:0;border-radius:50%;border:none; background:rgba(255,255,255,.1);color:var(--txt);cursor:pointer; display:flex;align-items:center;justify-content:center;transition:background 10ms} .erw-play:hover{background:rgba(255,255,255,.18)} .erw-play svg{width:14px;height:14px} .erw-track-wrap{flex:1;height:24px;position:relative;cursor:pointer; display:flex;align-items:center} .erw-track{width:100%;height:3px;border-radius:2px;background:rgba(255,255,255,.1); position:relative} .erw-fill{height:100%;border-radius:2px;background:var(--blue);width:100%;transform-origin:left;transform:scaleX(0)} .erw-thumb{position:absolute;top:50%;width:10px;height:10px;border-radius:50%; background:var(--txt);border:2px solid var(--blue);box-shadow:0 0 6px rgba(41,151,255,.3); transform:translate(-50%,-50%);left:0} .erw-ticks{position:absolute;inset:0;pointer-events:none} .erw-time{font:500 var(--text-xs)/var(--lh-none) var(--mono);color:var(--txt3);flex-shrink:0} .erw-sidebar{width:320px;flex-shrink:0;display:flex;flex-direction:column; border-left:1px solid rgba(255,255,255,.06);overflow:hidden} .erw-tabs{display:flex;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0} .erw-tab{flex:1;padding:var(--s1);border:none;background:transparent; color:var(--txt3);font:500 var(--text-xs)/var(--lh-none) var(--font); cursor:pointer;border-bottom:2px solid transparent;transition:color 10ms,border-color 10ms} .erw-tab.active{color:var(--blue);border-bottom-color:var(--blue)} .erw-rev-list{flex:1;overflow-y:auto;padding:var(--s1)} .erw-rev-item.active{background:rgba(41,151,255,.08);border:1px solid rgba(41,151,255,.2)} /* ── ERW Checklist ── */ .erw-checklist{flex:1;overflow-y:auto;padding:var(--s1)} .erw-check-progress{font:500 var(--text-sm)/var(--lh-none) var(--font); padding:var(--s1);text-align:center;color:var(--txt3)} .erw-submit{width:100%;padding:var(--s2);border:none;border-radius:var(--r-lg); background:var(--green);color:#fff;font:500 var(--text-md)/var(--lh-none) var(--font); cursor:pointer;transition:opacity 10ms} .erw-submit:hover{opacity:.85} .erw-submit:disabled{opacity:.35;cursor:not-allowed} /* ── Approval overlay ── */ .approve-overlay{position:absolute;inset:0;z-index:20; background:rgba(10,14,28,.9);backdrop-filter:none;-webkit-backdrop-filter:none; display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--s3); opacity:0;pointer-events:none;transition:opacity 200ms var(--ease)} .approve-ring circle{fill:none;stroke-width:4;stroke-linecap:round} .approve-ring .ring-bg{stroke:rgba(255,255,255,.06)} .approve-ring .ring-fill{stroke:var(--green);transition:stroke-dashoffset .6s var(--ease)} .pv-status-transition.active{opacity:1;transform:scale(1)} /* ───────────────────────────────────────────────────────────────── APPROVED PROJECT CARD — letter health grade in the timer slot (4-circle overlay was killed per Sean — too busy) ───────────────────────────────────────────────────────────────── */ .pipeline-card.is-approved{ /* Subtle green tint border to signal completion */ box-shadow:0 0 0 1px rgba(52,211,153,.30),0 4px 14px rgba(0,0,0,.35); } /* Letter grade pill that takes the place of the countdown timer */ /* ── Universal grade selectors — apply to any element with data-grade ── */ [data-grade="A"]{color:#00d084;border-color:rgba(0,208,132,.35)} [data-grade="B"]{color:#34d399;border-color:rgba(52,211,153,.3)} [data-grade="C"]{color:#f59e0b;border-color:rgba(245,158,11,.3)} [data-grade="D"]{color:#f97316;border-color:rgba(249,115,22,.3)} [data-grade="F"]{color:#ef4444;border-color:rgba(239,68,68,.35)} [data-grade="-"]{color:rgba(255,255,255,.2);border-color:rgba(255,255,255,.08)} /* ═══ PIPELINE CARD — AVATAR CIRCLES ═══ */ .pc-av-chip .pc-av-init{width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;font:500 9px/1 var(--font);color:#fff;background:linear-gradient(135deg,#1b2838,#0d1b2a)} .pc-tooltip .hd-bar-label{width:64px} /* ───────────────────────────────────────────────────────────────── RATE THIS EDIT — premium glass modal with golden animated stars + orb particle ambiance. ───────────────────────────────────────────────────────────────── */ /* Soft top highlight line */ /* Orb particle ambiance — 6 slow-drifting golden orbs in the background */ @keyframes rateOrbDrift{ 0%,100%{transform:translate(0,0) scale(1);opacity:.7} 25%{transform:translate(20px,-15px) scale(1.1);opacity:.9} 50%{transform:translate(-15px,20px) scale(.95);opacity:.6} 75%{transform:translate(10px,10px) scale(1.05);opacity:.85} } /* Inner content sits above the orbs */ /* ── Golden animated stars ── */ .pv-rating{display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 0 4px} .pv-star.active{ color:#ffd770;transform:scale(1.10); filter:drop-shadow(0 0 22px rgba(245,166,35,.30)); animation:starPulse 2.2s ease-in-out infinite; } @keyframes starPulse{ 0%,100%{filter:drop-shadow(0 0 22px rgba(245,166,35,.30))} 50%{filter:drop-shadow(0 0 32px rgba(245,166,35,.55))} } @keyframes starPop{0%{transform:scale(1.10)}40%{transform:scale(1.42)}100%{transform:scale(1.10)}} /* ── Approve overlay — download progress ── */ .approve-overlay{position:absolute;inset:0;z-index:50; background:rgba(0,0,0,.85);display:flex;flex-direction:column; align-items:center;justify-content:center;gap:16px; opacity:0;pointer-events:none;transition:opacity 200ms} .approve-overlay.active{opacity:1;pointer-events:auto} .approve-ring{position:relative;width:120px;height:120px} .approve-ring svg{width:120px;height:120px;transform:rotate(-90deg)} .ring-bg{fill:none;stroke:rgba(255,255,255,.06);stroke-width:6} .ring-fill{fill:none;stroke:var(--green);stroke-width:6;stroke-linecap:round; transition:stroke-dashoffset 600ms cubic-bezier(.16,1,.3,1)} .approve-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font:500 24px/1 var(--font-display);color:#fff} .approve-label{font:500 14px/1 var(--font);color:rgba(255,255,255,.6)} /* Download phase */ @keyframes downloadBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}} /* (Removed legacy full-width .pipeline-card .pc-approved-badge — replaced by small top-right pill defined in the NEW CARD LAYOUT block above. Sean 2026-04-15.) */ /* ── Confirm/Alert modals ── */ .cb-modal-bg{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.6); backdrop-filter:none;-webkit-backdrop-filter:none; display:flex;align-items:center;justify-content:center; opacity:0;pointer-events:none;transition:opacity 10ms} .cb-modal-bg.visible{opacity:1;pointer-events:auto} .cb-modal h3{font:500 var(--text-lg)/var(--lh-snug) var(--font);margin-bottom:var(--s1)} .cb-modal p{font:400 var(--text-sm)/var(--lh-normal) var(--font);color:var(--txt3);margin-bottom:var(--s3)} .cb-modal-cancel{padding:10px var(--s3);border-radius:var(--r-lg);border:none; background:rgba(255,255,255,.06);color:var(--txt2);font:500 var(--text-md)/var(--lh-none) var(--font);cursor:pointer} .cb-modal-cancel:hover{background:rgba(255,255,255,.1)} .cb-modal-ok{padding:10px var(--s3);border-radius:var(--r-lg);border:none; background:var(--blue);color:#fff;font:500 var(--text-md)/var(--lh-none) var(--font);cursor:pointer} .cb-modal-ok:hover{opacity:.85} .cb-modal-ok.danger{background:rgba(192,57,43,.8)} .cb-modal-prompt-input{width:100%;margin-bottom:var(--s2);padding:var(--s1) var(--card-sm); border-radius:var(--r-lg);border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04);color:var(--txt);font:400 var(--text-md)/var(--lh-none) var(--font);outline:none} .cb-modal-prompt-input:focus{border-color:rgba(41,151,255,.4)} /* ── Device picker modal ── */ .dp-qpill.active{background:rgba(41,151,255,.1);border-color:rgba(41,151,255,.3);color:var(--blue)} /* ── Mobile kanban stage dots ── */ .tp-stage-dots{display:none;justify-content:center;gap:6px;padding:var(--s1) 0} .tp-stage-dot.active{background:var(--blue);transform:scale(1.3)} @media(max-width:768px){ .tp-stage-dots{display:flex} .pv-body{flex-direction:column;padding:0;gap:0} .pv-island-lg{position:static;transform:none;margin:0 auto} .pv-top-left{flex:0 1 auto} .pv-left{width:100%;border-radius:0} .pv-thread-float{width:100%;border-radius:0;border:none;border-top:1px solid rgba(255,255,255,.06)} .ps-thread,.erw-sidebar{width:100%;height:50vh;border-left:none;border-top:1px solid rgba(255,255,255,.06)} .pv-cam-pip{width:100px;height:75px} .pv-screen-pip{width:160px;height:90px} .pv-dock-compact{max-width:100%} } /* ── Landscape prompt ── */ .mob-landscape-prompt{position:fixed;inset:0;z-index:80; background:rgba(10,14,28,.95);backdrop-filter:none;-webkit-backdrop-filter:none; display:none;flex-direction:column;align-items:center;justify-content:center; gap:var(--s2);text-align:center;padding:var(--s4)} .mob-landscape-prompt svg{width:48px;height:48px;color:var(--blue);margin-bottom:var(--s1)} .mob-landscape-prompt h3{font:500 var(--text-xl)/var(--lh-snug) var(--font)} .mob-landscape-prompt p{font:400 var(--text-sm)/var(--lh-normal) var(--font);color:var(--txt3);max-width:280px} .mlp-skip{padding:10px var(--s4);border:none;border-radius:var(--r-lg); background:rgba(255,255,255,.08);color:var(--txt); font:500 var(--text-md)/var(--lh-none) var(--font);cursor:pointer;margin-top:var(--s2)} .mlp-skip:hover{background:rgba(255,255,255,.12)} @media(max-width:480px) and (orientation:portrait){ body.dock-open .mob-landscape-prompt{display:flex} } .pipe-density-btn.active{background:rgba(41,151,255,.1);border-color:rgba(41,151,255,.3);color:var(--blue)} /* ── Pipeline category bar ── */ .pipe-cat.active{background:rgba(255,255,255,.08);color:var(--txt)} .pipe-sub-cats{display:flex;gap:var(--s1);margin-bottom:var(--s2)} /* ── Emoji picker / attach popup ── */ .emoji-picker{position:absolute;bottom:calc(100% + 8px);left:8px;z-index:50;width:240px; background:rgba(8,14,28,.96);border:1px solid rgba(255,255,255,.12); border-radius:14px;box-shadow:0 16px 48px rgba(0,0,0,.6); padding:6px;display:none; } .emoji-picker.open{display:flex;flex-direction:column;gap:4px} .emoji-picker .emoji-cell{ width:100%;aspect-ratio:auto;height:auto; padding:10px 12px;border:none;background:transparent; border-radius:8px;color:rgba(255,255,255,.85); font:500 13px/1 var(--font);text-align:left;cursor:pointer; transition:background .1s,color .1s; } .emoji-picker .emoji-cell:hover{background:rgba(255,255,255,.06);color:#fff} /* The actual emoji grid (when openEmojiPicker fills it with 20 emoji buttons) */ .emoji-picker .emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;max-height:200px;overflow-y:auto;width:100%} .emoji-picker .emoji-grid .emoji-cell{aspect-ratio:1;padding:0;font-size:18px;text-align:center} .emoji-cell{width:100%;aspect-ratio:1;border:none;background:transparent; font-size:18px;cursor:pointer;border-radius:var(--r-sm);transition:background 10ms} .emoji-cell:hover{background:rgba(255,255,255,.08)} /* ── GIF search ── */ .gif-picker.open{display:block} /* ── File attachment row ── */ /* ── Blueprint tooltip ── */ .bp-tooltip.visible{opacity:1;transform:translateY(0);pointer-events:auto} /* ── Recording live transcript ── */ .rec-transcript-live{font:400 var(--text-xs)/1.4 var(--font);color:var(--txt3); padding:var(--s0) var(--s2);max-height:32px;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .shell-seg-btn.active{ background:linear-gradient(180deg,rgba(41,151,255,.32) 0%,rgba(41,151,255,.16) 50%,rgba(41,151,255,.20) 100%); color:#fff;border:1px solid rgba(41,151,255,.4); box-shadow:0 0 24px rgba(41,151,255,.28),inset 0 .5px 0 rgba(255,255,255,.20),inset 0 1px 0 rgba(255,255,255,.14)} /* Shell search — premium sized */ /* Shell density control */ .tb-seg-btn.active{background:rgba(255,255,255,.1);color:#fff} /* Shell theme button */ /* Bell — premium sized */ .shell-bell{width:40px;height:40px;border-radius:10px;border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.04);color:rgba(255,255,255,.4);cursor:pointer; display:flex;align-items:center;justify-content:center;transition:background 10ms,color 10ms} .shell-bell:hover{background:rgba(255,255,255,.08);color:#fff} /* WebSocket server status indicator */ .ws-status{display:flex;align-items:center;gap:4px; padding:3px 8px;border-radius:100px; background:rgba(10,14,22,.85);border:1px solid rgba(255,255,255,.08); font:500 var(--text-2xs)/1 var(--font);white-space:nowrap;transition:border-color 10ms} .ws-status-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;transition:background 10ms,box-shadow 10ms} .ws-status-label{color:rgba(255,255,255,.45);transition:color 10ms} /* Green — connected */ .ws-status--online .ws-status-dot{background:var(--green);box-shadow:0 0 6px var(--green)} .ws-status--online .ws-status-label{color:var(--green)} .ws-status--online{border-color:rgba(52,211,153,.2)} /* Yellow — reconnecting / degraded */ .ws-status--connecting .ws-status-dot{background:var(--orange);box-shadow:0 0 6px var(--orange);animation:wsPulse 1.2s ease infinite} .ws-status--connecting .ws-status-label{color:var(--orange)} .ws-status--connecting{border-color:rgba(251,191,36,.2)} /* Red — disconnected */ .ws-status--offline .ws-status-dot{background:var(--red);box-shadow:0 0 6px var(--red)} .ws-status--offline .ws-status-label{color:var(--red)} @keyframes wsPulse{0%,100%{opacity:1}50%{opacity:.3}} /* Toast stack — fixed bottom-left, premium glass */ .toast-stack{position:fixed;bottom:20px;left:20px;z-index:9001;display:flex;flex-direction:column-reverse;gap:10px;pointer-events:none;width:340px;max-width:calc(100vw - 40px)} .toast-stack .shell-toast{pointer-events:auto;padding:12px 16px;border-radius:14px; background:linear-gradient(180deg,rgba(28,32,46,.94) 0%,rgba(18,22,34,.94) 100%); border:1px solid rgba(255,255,255,.10);border-top-color:rgba(255,255,255,.18); box-shadow:0 12px 32px rgba(0,0,0,.38),0 2px 6px rgba(0,0,0,.22);backdrop-filter:none; font:500 13px/1.35 var(--font-display);color:#fff; animation:toastIn 240ms cubic-bezier(.16,1,.3,1);max-width:100%;} .toast-stack .shell-toast.toast-out{animation:toastOut 200ms cubic-bezier(.4,0,1,1) forwards} @keyframes toastIn{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}} @keyframes toastOut{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(20px) scale(.96)}} /* Health grade badge in bottom island */ /* ═══════════════════════════════════════════════════════════ APP DOCK — Premium floating vertical glass dock ═══════════════════════════════════════════════════════════ */ /* Dock container — now column 2 (after DM strip) */ .app-dock{grid-column:1;grid-row:1;display:flex;align-items:stretch; padding:10px 0 10px 10px;z-index:120} /* Inner glass pill — dissolving glass-bubble style (matches login container) */ .app-dock-inner{display:flex;flex-direction:column;align-items:stretch; width:240px;padding:8px;gap:0; transition:transform 220ms cubic-bezier(.16,1,.3,1); background:transparent; border-radius:20px; overflow:hidden;position:relative;} /* Layer-1 glass on the left nav — matches .shell-body-glass exactly. */ .app-dock-inner::before{content:'';position:absolute;inset:0;border-radius:20px; background:var(--cb-glass-1-bg); box-shadow:var(--cb-glass-1-shadow); pointer-events:none;z-index:0} /* Bottom edge light sweep — anchors the denser base */ .app-dock-inner::after{content:'';position:absolute;bottom:0;left:10%;right:10%;height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.25) 20%,rgba(255,255,255,.45) 50%,rgba(255,255,255,.25) 80%,transparent); border-radius:1px;pointer-events:none;z-index:1} /* Active state — selected plate with refined glow */ .dock-btn.active{background:linear-gradient(180deg,rgba(41,151,255,.12) 0%,rgba(41,151,255,.04) 60%,rgba(41,151,255,.06) 100%); box-shadow:0 0 16px rgba(41,151,255,.10),inset 0 1px 0 rgba(255,255,255,.08); border:1px solid rgba(41,151,255,.15)} .dock-btn.active::after{content:'';position:absolute;left:-1px;top:50%;transform:translateY(-50%); width:2.5px;height:16px;border-radius:0 2.5px 2.5px 0; background:linear-gradient(180deg,#2997ff,#60a5fa); box-shadow:0 0 6px rgba(41,151,255,.45),0 0 12px rgba(41,151,255,.2)} /* Active — deepest material + strongest glow */ .dock-btn.active .dock-icon{ border-color:rgba(255,255,255,.22); border-top-color:rgba(255,255,255,.40); box-shadow: 0 2px 12px rgba(0,0,0,.45), 0 1px 4px rgba(0,0,0,.3), inset 0 1.5px 0 rgba(255,255,255,.35), inset 0 -1px 2px rgba(0,0,0,.12), 0 0 24px var(--di-glow, rgba(0,0,0,0)), 0 0 8px var(--di-glow, rgba(0,0,0,0))} .dock-btn.active .dock-label{color:rgba(255,255,255,.85);font-weight:500} body.theme-light .page-shell{background:#fff!important} body.theme-light .page-head{border-color:rgba(0,0,40,.06)!important} body.theme-light .page-body{background:#fff!important} body.theme-light .pg-title{color:#1e3a5f!important} body.theme-light .pg-sub{color:#555!important} /* Section cards — pure white, cool gray border */ body.theme-light .section-card{background:#fff!important;border:1px solid rgba(0,10,40,.08)!important;box-shadow:0 1px 2px rgba(0,10,40,.04)!important} body.theme-light .section-card::before,body.theme-light .section-card::after{display:none!important} body.theme-light .glass-card{background:#fff!important;border:1px solid rgba(0,10,40,.08)!important;box-shadow:0 1px 2px rgba(0,10,40,.04)!important} body.theme-light .glass-card::before,body.theme-light .glass-card::after{display:none!important} body.theme-light .sec-title{color:#1e3a5f!important} body.theme-light .sec-title svg{color:#1e3a5f!important} body.theme-light .sec-sub{color:#666!important} body.theme-light .tog-label{color:#111!important} body.theme-light .tog-desc{color:#666!important} body.theme-light .tog-row{border-color:rgba(0,10,40,.05)!important} /* Seg controls — cool gray bg, zero warmth */ body.theme-light .seg-ctrl{background:#f0f2f6!important;border:1px solid rgba(0,10,40,.08)!important} body.theme-light .seg-btn{color:#555!important;background:transparent!important} body.theme-light .seg-btn.active{color:#fff!important;background:#1e3a5f!important;box-shadow:none!important} /* Toggles — dark blue when on, cool gray when off */ body.theme-light .toggle{background:#c4c8d0!important} body.theme-light .toggle.on{background:#1e3a5f!important} body.theme-light .toggle::after{background:#fff!important} /* Buttons — NO pink, NO purple */ body.theme-light .btn{color:#111!important;background:#f0f2f6!important;border:1px solid rgba(0,10,40,.08)!important;box-shadow:none!important} body.theme-light .btn-g5{background:rgba(30,58,95,.06)!important;color:#1e3a5f!important;border:1px solid rgba(30,58,95,.12)!important} body.theme-light .btn-danger{background:rgba(200,30,30,.06)!important;color:#c41e1e!important;border:1px solid rgba(200,30,30,.1)!important} /* Inputs */ body.theme-light .input{background:#fff!important;border:1px solid rgba(0,10,40,.12)!important;color:#111!important;box-shadow:none!important} body.theme-light .input:focus{border-color:#1e3a5f!important;box-shadow:0 0 0 2px rgba(30,58,95,.1)!important} /* Pipeline */ body.theme-light .pipe-col{background:#f8f9fb!important;border:1px solid rgba(0,10,40,.06)!important} /* Toast */ body.theme-light .toast-fixed{background:#fff!important;color:#111!important;border:1px solid rgba(0,10,40,.08)!important;box-shadow:0 4px 12px rgba(0,10,40,.08)!important} /* ── Floating save button (settings) ── */ .settings-save-float{position:fixed;bottom:var(--s3);right:var(--s3);display:flex;align-items:center;gap:var(--s2); padding:var(--s2) var(--s3);border-radius:var(--r-lg); background:rgba(10,14,22,.95);border:1px solid rgba(255,255,255,.08); box-shadow:0 8px 32px rgba(0,0,0,.4);color:rgba(255,255,255,.7); font:500 var(--text-sm)/1 var(--font);z-index:500; animation:saveFloatIn .2s ease;backdrop-filter:none;-webkit-backdrop-filter:none} .settings-save-float .btn{padding:var(--s1) var(--s3);min-height:auto} @keyframes saveFloatIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}} /* Light mode: floating save */ body.theme-light .settings-save-float{background:#1e3a5f!important;color:#fff!important;box-shadow:0 4px 20px rgba(0,0,0,.15)!important} body.theme-light .settings-save-float .btn{background:rgba(255,255,255,.15)!important;color:#fff!important;border:1px solid rgba(255,255,255,.2)!important} /* ── Pipeline status nav buttons (shared across pipeline, manage, etc) ── */ .psn-btn{padding:6px 14px;border:none;border-radius:8px;background:transparent;color:rgba(255,255,255,.35);font:500 12px/1 var(--font);cursor:pointer;transition:background 10ms,color 10ms;white-space:nowrap} .psn-btn:hover{background:rgba(255,255,255,.04);color:rgba(255,255,255,.6)} .psn-btn.active{background:rgba(41,151,255,.1);color:#2997ff} .mg-av-dot.offline{background:rgba(255,255,255,.15)} .mg-card-tag.editor{background:rgba(41,151,255,.12);color:#2997ff} .mg-card-tag.client{background:rgba(52,211,153,.12);color:#34d399} .mg-card-tag.trial{background:rgba(251,191,36,.12);color:#fbbf24} .mg-card-tag.owner{background:rgba(168,85,247,.12);color:#a855f7} .mg-modal-bg.open{display:flex;opacity:1;pointer-events:all} .mg-modal .input{width:100%;margin-bottom:16px} /* ═══ SETUP HUB ═══ */ #setupHub.active .setup-hub-bg{opacity:1;pointer-events:all} @keyframes checkGlow{0%,100%{box-shadow:inset 0 0 30px rgba(52,211,153,.04)}50%{box-shadow:inset 0 0 40px rgba(52,211,153,.1)}} .setup-ob-modal.active{opacity:1} .tour-loading.active{opacity:1} /* Spotlight panels */ #tourOverlay{position:fixed;inset:0;z-index:860;pointer-events:none;opacity:0;transition:opacity 10ms ease} #tourOverlay.active{opacity:1;pointer-events:all} /* Tour tooltip */ /* ═══ RESPONSIVE: Setup Hub + Tour ═══ */ @media(max-width:640px){ .setup-cards{grid-template-columns:1fr} .setup-hub-title{font-size:22px} .setup-hub-sub{font-size:12px;margin-bottom:24px} .setup-card{padding:20px 16px} .tour-tooltip{width:calc(100vw - 32px)!important;max-width:320px} .setup-ob-frame{width:95%;height:90vh} } /* Editor tooltip */ /* Team tooltip */ /* ═══ PIPELINE — Controls, Status Nav, Filter Islands, Search ═══ */ /* ═══ Status sub-nav ═══ */ .pipe-status-nav{display:flex;gap:2px} /* ═══ Dropdown filters ═══ */ .pipe-dropdown{padding:6px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04);color:rgba(255,255,255,.6);font:400 12px/1 var(--font-display); cursor:pointer;outline:none;appearance:none;min-width:90px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 8px center;padding-right:24px} .pipe-dropdown:focus{border-color:rgba(41,151,255,.3)} .pipe-dropdown option{background:#0a0e16;color:#fff} /* ═══ PIPELINE CONTROLS ROW — status + search + filters ═══ Border-bottom lives HERE (flush under controls, aligned with left-nav divider). .page-head has its bottom border removed + bottom padding zeroed. Sean 2026-04-15. */ .pipe-controls-row{display:flex;align-items:center;justify-content:space-between;padding:2px 20px 6px;gap:16px; border-bottom:1px solid rgba(255,255,255,.14);} .pcr-search{display:flex;align-items:center;gap:8px;padding:8px 14px; background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:12px; min-width:180px;max-width:240px;transition:border-color 10ms} .pcr-search:focus-within{border-color:rgba(41,151,255,.35);background:rgba(255,255,255,.06)} .pcr-search svg{opacity:.4;flex-shrink:0} .pcr-search input{border:none;background:transparent;color:#fff;font:400 13px/1 var(--font-display);outline:none;width:100%} .pcr-search input::placeholder{color:rgba(255,255,255,.3)} /* ═══ Center status icon island — BIGGER + hover shows ALL labels ═══ */ .si-btn.active{background:linear-gradient(135deg,rgba(41,151,255,.2) 0%,rgba(41,151,255,.1) 100%); color:#fff;box-shadow:0 2px 8px rgba(41,151,255,.15),inset 0 1px 0 rgba(255,255,255,.08); border:1px solid rgba(41,151,255,.2)} .si-btn:hover:not(.active){color:rgba(255,255,255,.6);background:rgba(255,255,255,.04)} /* ═══ Filter island — BIGGER ═══ */ .pc-filter-island .pc-select{padding:8px 24px 8px 10px;font:500 12px/1 var(--font-display);border-radius:8px} /* ═══ Right controls — MUCH BIGGER search + icons ═══ */ /* Pipeline control row — 3 grouped islands */ .pc-island{display:flex;align-items:center;gap:4px;padding:4px 6px; background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:10px} .pc-main-island{flex:0 0 auto} .pc-select{padding:5px 8px;border:1px solid rgba(255,255,255,.06);border-radius:6px; background:rgba(255,255,255,.04);color:rgba(255,255,255,.75);font:500 10px/1 var(--font-display); cursor:pointer;outline:none;-webkit-appearance:none;appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 5 5-5' fill='none' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 6px center;padding-right:20px} .pc-select:hover{border-color:rgba(255,255,255,.12);color:#fff} .pc-select option{background:#0a0e18;color:#fff} .pc-icon-btn{width:26px;height:26px;border-radius:6px;border:1px solid rgba(255,255,255,.04); background:transparent;color:rgba(255,255,255,.45);display:flex;align-items:center;justify-content:center; cursor:pointer;transition:background 10ms,color 10ms} .pc-icon-btn:hover{background:rgba(255,255,255,.08);color:#fff} /* ═══ Filtered grid view ═══ */ .filtered-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px} .filtered-grid .pipeline-card{width:100%!important;min-height:160px} .ptr-dd-item.active{color:#2997ff;font-weight:500} /* ═══ Right-side activity lane ═══ */ /* studio-right-lane removed — right toggle lives in shell (index.html) */ /* ═══ Hide sub-tabs (moved to Staff) ═══ */ .pg-tabs{display:none!important} /* ═══ Studio Bottom Dock — INSIDE body container ═══ */ /* ═══ Quality selector ═══ */ .q-opt{display:block;width:100%;padding:7px 12px;border:none;background:transparent;color:rgba(255,255,255,.6);font:500 12px/1 var(--font);text-align:left;cursor:pointer;border-radius:6px;transition:background 10ms} .q-opt:hover{background:rgba(255,255,255,.06);color:#fff} .q-opt.active{color:#2997ff;font-weight:500} /* 8. Recording countdown timer */ .rec-countdown.warn{animation:pulse-red .5s ease infinite alternate} /* ── Health grade in center island ── */ .pv-health-badge{display:inline-flex;align-items:center;justify-content:center;width:26px;height:22px;border-radius:6px;font:500 11px/1 var(--font);color:#fff;margin-left:4px} .pv-health-badge[data-grade="A"]{background:rgba(52,211,153,.25);color:#34d399} .pv-health-badge[data-grade="B"]{background:rgba(251,191,36,.25);color:#fbbf24} .pv-health-badge[data-grade="C"]{background:rgba(251,146,60,.25);color:#fb923c} .pv-health-badge[data-grade="D"]{background:rgba(255,69,58,.25);color:#ff453a} .pv-health-badge[data-grade="F"]{background:rgba(255,69,58,.35);color:#ff453a} /* ── Title row (matches portal pattern) ── */ /* ── Tab strip — matches wiki tab pattern ── */ .bp-tab.active{color:var(--blue);border-bottom-color:var(--blue);background:rgba(41,151,255,.04)} /* ── Sub-tab strip — for Library tier filter ── */ .bp-subtabs{width:100%;padding:var(--s2) 20px 0;display:flex;gap:var(--s1);align-items:center} .bp-subtabs-label{font:500 var(--text-3xs)/1 var(--font-display);letter-spacing:1.5px;text-transform:uppercase;color:var(--txt3);margin-right:var(--s1)} .bp-subtab{padding:6px 14px;border-radius:var(--r-pill);border:var(--border-glass);background:var(--glass-flat); font:500 var(--text-3xs)/1 var(--font-display);color:var(--txt3);cursor:pointer;transition:color 10ms,background 10ms;display:inline-flex;align-items:center;gap:6px} .bp-subtab:hover{color:var(--txt);background:rgba(255,255,255,.10)} .bp-subtab.active{background:rgba(41,151,255,.12);border-color:rgba(41,151,255,.4);color:var(--blue)} .bp-subtab[data-tier="2"].active{background:rgba(191,90,242,.12);border-color:rgba(191,90,242,.4);color:#bf5af2} .bp-subtab[data-tier="3"].active{background:rgba(255,159,10,.12);border-color:rgba(255,159,10,.4);color:#ff9f0a} /* ── Tab panels ── */ .bp-panel{display:none;width:100%;padding:var(--s2) 20px var(--s4);flex:1;min-height:0} .bp-panel.active{display:flex;flex-direction:column} /* ═══ BLUEPRINT BUILD WIZARD — standardized wizard shell ═══ */ /* The request wizard (.wiz-shell) already has glass bg, border-radius, shadows, brand header, step rail, content area, footer — all working perfectly. Blueprint wizard inherits ALL of that. Only override: wider shell + hide sidebars. */ /* Blueprint build panel — same glass wizard shell as request.html but forced to FULL WIDTH instead of centered 760px modal. */ .bp-panel[data-bp-panel="build"]{padding:12px 16px 16px !important} .bp-panel[data-bp-panel="build"] .wiz-overlay{position:static !important;display:flex !important; flex:1;flex-direction:column;min-height:0;align-items:center !important;justify-content:center !important} .bp-panel[data-bp-panel="build"] .wiz-shell{width:100% !important;max-width:100% !important; flex:1;max-height:none !important;border-radius:24px !important;margin:0 auto !important} .bp-panel[data-bp-panel="build"] .wiz-content{min-height:0} .bp-panel[data-bp-panel="build"] .wiz-content > *{max-width:100%} .bp-panel[data-bp-panel="build"] .wiz-answers{flex-direction:column;align-items:center} .bp-panel[data-bp-panel="build"] .bp-v9-grid{flex-wrap:nowrap !important;scrollbar-width:none} .bp-panel[data-bp-panel="build"] .bp-v9-grid::-webkit-scrollbar{display:none} /* ── 3-column landing (NEW — replaces the dead .bp-landing/.bp-split above) ── */ .bp-landing{display:none;width:100%;flex-direction:column;flex:1;min-height:0} .bp-landing.active{display:flex} .bp-landing .bp-title-row{flex-shrink:0} .bp-landing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;width:100%;flex:1;min-height:0} .bp-landing-card{background:rgba(255,255,255,.02);border-right:1px solid rgba(255,255,255,.05); padding:40px 24px;text-align:center;cursor:pointer; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px; position:relative;overflow:hidden;transition:background 250ms} .bp-landing-card:last-child{border-right:none} .bp-landing-card::after{content:'';position:absolute;inset:0; background:radial-gradient(circle at 50% 60%,rgba(41,151,255,.08),transparent 70%); opacity:0;transition:opacity 350ms} .bp-landing-card:hover{background:rgba(255,255,255,.04)} .bp-landing-card:hover::after{opacity:1} .bp-landing-icon{width:80px;height:80px;border-radius:50%; background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08); display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.4); transition:all 350ms cubic-bezier(.16,1,.3,1);position:relative;z-index:1} .bp-landing-card:hover .bp-landing-icon{background:rgba(41,151,255,.10);border-color:rgba(41,151,255,.35); color:var(--blue);transform:scale(1.12);box-shadow:0 0 32px rgba(41,151,255,.15)} .bp-landing-card h2{font:500 20px/1.2 var(--font-display);color:#fff;margin:0;position:relative;z-index:1; transition:color 200ms} .bp-landing-card:hover h2{color:var(--blue)} .bp-landing-card p{font:400 13px/1.4 var(--font);color:rgba(255,255,255,.35);margin:0;max-width:220px; position:relative;z-index:1;transition:color 200ms} .bp-landing-card:hover p{color:rgba(255,255,255,.55)} @media(max-width:680px){.bp-landing-grid{grid-template-columns:1fr} .bp-landing-card{border-right:none;border-bottom:1px solid rgba(255,255,255,.05);min-height:180px}} /* ── Glass content card (wraps each panel's main content, matches wiki #wkMain) ── */ /* ── Library card grid (applies to both .bp-card-item and .bp-lib-card markup) ── */ .bp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--s2)} .bp-grid .bp-lib-card, .bp-grid .bp-card-item{cursor:pointer;border-radius:var(--r-lg);overflow:hidden; border:var(--border-glass);border-top-color:var(--border-glass-top); background:var(--glass-flat); transition:border-color 10ms,transform 10ms;position:relative;width:auto;flex-shrink:1} .bp-grid .bp-lib-card:hover, .bp-grid .bp-card-item:hover{border-color:rgba(255,255,255,.18);transform:translateY(-2px)} .bp-grid .card-bg{width:100%;aspect-ratio:9/16;position:relative;overflow:hidden} .bp-grid .card-bg video{width:100%;height:100%;object-fit:cover} .bp-grid .card-bg .card-grad{position:absolute;inset:0;background:linear-gradient(transparent 50%,rgba(0,0,0,.8))} .bp-grid .card-bg .card-color{width:100%;height:100%} .bp-grid .card-info{position:absolute;bottom:0;left:0;right:0;padding:12px;z-index:2} .bp-grid .card-name{font:500 var(--text-sm)/1.2 var(--font);color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bp-grid .card-meta{font:400 var(--text-xs)/1 var(--font);color:var(--txt3);margin-top:4px;display:flex;align-items:center;gap:4px} .bp-empty{grid-column:1/-1;padding:var(--s5) var(--s3);text-align:center;color:var(--txt3);font:500 var(--text-sm)/1.5 var(--font); border:1px dashed rgba(255,255,255,.08);border-radius:var(--r-xl);background:rgba(255,255,255,.025)} /* ═══════════════════════════════ WIKI PAGE Used by public/content-bug-wiki.html (loaded as a shell iframe). ═══════════════════════════════ */ /* ── Top bar — title row holds title, role pills, search ── */ .wk-top{position:sticky;top:0;z-index:100;background:transparent;border-bottom:1px solid rgba(255,255,255,.04)} .wk-top-inner{max-width:1380px;margin:0 auto;padding:var(--s3) var(--s4) var(--s2);display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap} .wk-brand{font:500 28px/var(--lh-tight) var(--font-display);letter-spacing:-.02em;color:var(--txt);margin:0;flex-shrink:0} .wk-role-badge{font:500 var(--text-3xs)/1 var(--font-display);letter-spacing:1.2px;text-transform:uppercase; padding:5px 9px;border-radius:var(--r-sm);background:rgba(255,255,255,.05);color:var(--txt3)} /* Search — glass surface, matches portal */ .wk-search{margin-left:auto;display:flex;align-items:center;gap:var(--s1); background:var(--glass-flat);border:var(--border-glass);border-top-color:var(--border-glass-top); border-radius:var(--r-md);padding:6px 12px;width:260px;transition:max-width .15s, background .15s} .wk-search:focus-within{background:rgba(255,255,255,.10);max-width:340px;width:340px} .wk-search input{background:none;border:none;outline:none;color:var(--txt);font:500 var(--text-sm)/1.2 var(--font);flex:1;min-width:0} .wk-search input::placeholder{color:rgba(255,255,255,.3)} .wk-search-key{font:500 var(--text-3xs)/1 var(--font);color:rgba(255,255,255,.3);background:rgba(255,255,255,.06);padding:3px 6px;border-radius:var(--r-xs)} /* ── Role filter pills (inline in title row) ── */ .wk-roles-bar{display:inline-flex;align-items:center;gap:6px;margin-left:var(--s2)} .wk-role-pill{padding:6px 14px;border-radius:var(--r-pill);border:var(--border-glass);background:var(--glass-flat); font:500 var(--text-3xs)/1 var(--font-display);color:var(--txt3);cursor:pointer;transition:color .15s, background .15s;display:inline-flex;align-items:center;gap:6px} .wk-role-pill:hover{color:var(--txt);background:rgba(255,255,255,.10)} .wk-role-pill.active{background:rgba(41,151,255,.12);border-color:rgba(41,151,255,.4);color:var(--blue)} .wk-role-pill[data-role="client"].active{background:rgba(52,199,89,.1);border-color:rgba(52,199,89,.35);color:#34c759} .wk-role-pill[data-role="editor"].active{background:rgba(41,151,255,.12);border-color:rgba(41,151,255,.4);color:var(--blue)} .wk-role-pill[data-role="admin"].active{background:rgba(255,159,10,.1);border-color:rgba(255,159,10,.35);color:#ff9f0a} .wk-role-pill[data-role="all"].active{background:rgba(191,90,242,.1);border-color:rgba(191,90,242,.35);color:#bf5af2} .wk-role-pill[disabled]{opacity:.25;cursor:not-allowed} /* ── Layout ── */ .wk-wrap{max-width:1380px;margin:0 auto;padding:var(--s3) var(--s4) var(--s8)} /* ── Glass card — holds TOC + body inline ── */ .wk-card{ background:var(--glass-premium); border:var(--border-glow); border-top-color:var(--border-glow-top); border-radius:var(--r-2xl); box-shadow:0 8px 32px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.10); position:relative; overflow:hidden; display:grid; grid-template-columns:260px 1fr; min-height:520px } .wk-card::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;z-index:1;pointer-events:none; background:linear-gradient(90deg,transparent,rgba(255,255,255,.30) 20%,rgba(255,255,255,.55) 50%,rgba(255,255,255,.30) 80%,transparent)} /* ── Left column — MAIN categories (vertical nav) ── */ .wk-cats{padding:var(--s3) var(--s2) var(--s3) var(--s3);display:flex;flex-direction:column;gap:2px} .wk-cat{padding:11px 14px;border:none;background:none;cursor:pointer;text-align:left; font:500 var(--text-md)/1.3 var(--font-display);color:rgba(255,255,255,.5); border-radius:var(--r-sm);transition:color .12s, background .12s;white-space:nowrap} .wk-cat:hover{color:rgba(255,255,255,.9);background:rgba(255,255,255,.04)} .wk-cat.active{color:var(--blue);background:rgba(41,151,255,.08)} /* ── Sub-section nav — pill chips under the category title ── */ .wk-subnav{display:flex;flex-wrap:wrap;gap:6px;margin:var(--s2) 0 var(--s4);padding-bottom:var(--s3);border-bottom:1px solid rgba(255,255,255,.06)} .wk-subnav a{padding:6px 12px;border-radius:var(--r-pill);background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);font:500 var(--text-xs)/1 var(--font); color:rgba(255,255,255,.55);text-decoration:none;transition:color .12s, background .12s, border-color .12s} .wk-subnav a:hover{color:var(--txt);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12)} .wk-subnav a.active{color:var(--blue);background:rgba(41,151,255,.1);border-color:rgba(41,151,255,.35)} /* ── Body content — right side of divider ── */ #wkMain{padding:var(--s5) var(--s5) var(--s6);min-height:200px;overflow:hidden;position:relative;z-index:2; border-left:1px solid rgba(255,255,255,.08)} @media(max-width:880px){ .wk-card{grid-template-columns:1fr} .wk-cats{position:static;max-height:none;flex-direction:row;overflow-x:auto;border-bottom:1px solid rgba(255,255,255,.08)} #wkMain{border-left:none} } .wk-hero{margin-bottom:var(--s3)} .wk-hero-title{font:500 var(--text-3xl)/1.1 var(--font-display);letter-spacing:-.5px;margin-bottom:var(--s1);color:var(--txt)} .wk-hero-desc{font:400 var(--text-md)/1.6 var(--font);color:var(--txt3);max-width:640px} .wk-section{margin-bottom:var(--s5);scroll-margin-top:140px} .wk-section h2{font:500 var(--text-xl)/1.25 var(--font-display);letter-spacing:-.2px;margin-bottom:14px; padding-bottom:var(--s1);border-bottom:1px solid rgba(255,255,255,.08); display:flex;align-items:center;gap:var(--s1);color:var(--txt)} .wk-section-role-tag{font:500 var(--text-3xs)/1 var(--font-display);letter-spacing:.5px;text-transform:uppercase; padding:3px 7px;border-radius:var(--r-xs);background:rgba(255,255,255,.06);color:var(--txt3)} .wk-section-role-tag.client{background:rgba(52,199,89,.12);color:#34c759} .wk-section-role-tag.editor{background:rgba(41,151,255,.12);color:var(--blue)} .wk-section-role-tag.admin{background:rgba(255,159,10,.12);color:#ff9f0a} .wk-section h3{font:500 var(--text-md)/1.3 var(--font-display);margin:var(--s3) 0 10px;color:var(--txt)} .wk-section h4{font:500 var(--text-sm)/1.3 var(--font-display);margin:var(--s2) 0 6px;color:var(--txt2)} .wk-section p{font:400 var(--text-md)/1.7 var(--font);color:var(--txt3);margin-bottom:14px} .wk-section ul,.wk-section ol{margin:10px 0 14px 24px} .wk-section li{font:400 var(--text-md)/1.7 var(--font);color:var(--txt3);margin-bottom:6px} .wk-section li ul,.wk-section li ol{margin-top:6px;margin-bottom:6px} .wk-section strong{color:var(--txt);font-weight:500} .wk-section em{color:var(--txt2);font-style:italic} .wk-section code{font:500 var(--text-sm)/1 var(--mono);background:rgba(41,151,255,.10); color:var(--blue);padding:2px 6px;border-radius:var(--r-xs)} .wk-section a{color:var(--blue);text-decoration:none;border-bottom:1px solid rgba(41,151,255,.25)} .wk-section a:hover{border-bottom-color:var(--blue)} /* Tables — glass-flat surface */ .wk-section table{width:100%;border-collapse:collapse;margin:14px 0; background:var(--glass-flat);border:var(--border-glass);border-top-color:var(--border-glass-top); border-radius:var(--r-lg);overflow:hidden} .wk-section th{text-align:left;font:500 var(--text-xs)/1 var(--font-display);letter-spacing:.5px;text-transform:uppercase; color:var(--txt3);padding:12px 14px;background:rgba(255,255,255,.03);border-bottom:1px solid rgba(255,255,255,.08)} .wk-section td{padding:11px 14px;font:400 var(--text-sm)/1.5 var(--font);color:var(--txt2); border-bottom:1px solid rgba(255,255,255,.04)} .wk-section tr:last-child td{border-bottom:none} /* Loading + empty states */ .wk-loading{padding:80px 20px;text-align:center;color:var(--txt3);font:500 var(--text-sm)/1.5 var(--font)} .wk-empty{padding:60px 20px;text-align:center;color:var(--txt3);font:500 var(--text-sm)/1.5 var(--font); background:rgba(255,255,255,.025);border:1px dashed rgba(255,255,255,.08);border-radius:var(--r-xl);margin-top:var(--s2)} /* Search results — glass dropdown */ .wk-search-results{position:absolute;top:54px;right:var(--s4);width:520px;max-height:60vh;overflow-y:auto; background:rgba(10,14,22,.72);border:var(--border-glass);border-top-color:var(--border-glass-top); border-radius:var(--r-lg); box-shadow:0 12px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.10); padding:var(--s1);display:none;z-index:200} .wk-search-results.open{display:block} .wk-search-result{display:block;padding:10px 12px;border-radius:var(--r-sm);text-decoration:none;color:var(--txt); font:500 var(--text-sm)/1.4 var(--font);transition:background .12s} .wk-search-result:hover{background:rgba(255,255,255,.06)} .wk-search-result-tab{font:500 var(--text-3xs)/1 var(--font-display);color:var(--txt3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px} .wk-search-result-heading{font:500 var(--text-sm)/1.3 var(--font-display);color:var(--txt);margin-bottom:3px} .wk-search-result-snippet{font:400 var(--text-xs)/1.4 var(--font);color:var(--txt3)} .wk-search-empty{padding:20px;text-align:center;color:var(--txt3);font:500 var(--text-sm)/1.4 var(--font)} /* ═══ STORAGE — File Browser, Header, Preview, Gallery ═══ */ /* REPLACED: the previous version of this section used private storage-local tokens (--t1/t2/t3/t4, --border, --glass, --glass2, --font, --bg, --r) that were deleted in B-1. Replaced with the resolved-literal version from storage.html's local style block. */ /* ═══ HEADER ═══ */ .stg-breadcrumb{display:flex;align-items:center;gap:2px;font:400 12px/1 var(--font-display);color:rgba(255,255,255,.3);flex:1;min-width:0;overflow:hidden} .stg-bc-seg.active{color:#fff;font-weight:500} .stg-bc-sep{color:rgba(255,255,255,.15);font-size:10px;margin:0 1px} .stg-controls{display:flex;align-items:center;gap:8px;flex-shrink:0} .stg-vt-group{display:flex;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:10px;overflow:hidden} .stg-vt{width:36px;height:34px;border:none;background:transparent;color:rgba(255,255,255,.3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 10ms;border-right:1px solid rgba(255,255,255,.06)} .stg-vt:last-child{border-right:none} .stg-vt:hover{color:rgba(255,255,255,.6);background:rgba(255,255,255,.05)} .stg-vt.active{color:var(--blue);background:rgba(41,151,255,.1)} .stg-vt svg{width:16px;height:16px} .stg-filter{padding:6px 12px;border:1px solid rgba(255,255,255,.06);border-radius:8px;background:rgba(255,255,255,.03);color:rgba(255,255,255,.6);font:400 12px/1 var(--font-display);outline:none;cursor:pointer} .stg-filter option{background:#0a0e16;color:#fff} .stg-search{display:flex;align-items:center;gap:6px;padding:6px 12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:8px} .stg-search svg{flex-shrink:0;opacity:.3} .stg-search input{border:none;background:transparent;color:#fff;font:400 12px/1 var(--font-display);outline:none;width:140px} .stg-search input::placeholder{color:rgba(255,255,255,.15)} /* ═══ BODY ═══ */ /* Layer 2 container — matches pipeline .ps-kanban-col glass. 10ms transitions, no blur. */ .stg-body{flex:1;display:flex;overflow:hidden;min-height:0; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.05); border-radius:12px; padding:10px; margin:12px 16px 16px} .stg-content{flex:1;overflow:auto;position:relative} .stg-preview{width:0;overflow:hidden;border-left:1px solid rgba(255,255,255,.06);transition:max-width 150ms;flex-shrink:0;background:rgba(255,255,255,.03)} .stg-preview.open{flex:1;min-width:220px;max-width:400px;width:auto;overflow-y:auto} /* ═══ LIST VIEW ═══ */ .stg-list table{width:100%;border-collapse:collapse} .stg-list th{text-align:left;font:500 10px/1 var(--font-display);color:rgba(255,255,255,.15);text-transform:uppercase;letter-spacing:.05em;padding:8px 14px;border-bottom:1px solid rgba(255,255,255,.06);position:sticky;top:0;background:#0a0e16;z-index:2;cursor:pointer;white-space:nowrap;user-select:none} .stg-list th:hover{color:rgba(255,255,255,.6)} .stg-list th .sort-arrow{font-size:8px;margin-left:3px;opacity:.4} .stg-list td{padding:7px 14px;border-bottom:1px solid rgba(255,255,255,.02);font:400 12px/1.3 var(--font-display);color:rgba(255,255,255,.6);white-space:nowrap} .stg-list tr{cursor:pointer;transition:background 10ms} .stg-list tbody tr:hover{background:rgba(255,255,255,.03)} .stg-list tbody tr.selected{background:rgba(41,151,255,.08)} .stg-list .name-cell{color:#fff;font-weight:500;display:flex;align-items:center;gap:8px} .stg-list .name-cell svg{width:16px;height:16px;flex-shrink:0} .stg-list .expand-arrow{width:12px;color:rgba(255,255,255,.15);font-size:9px;text-align:center;flex-shrink:0;transition:transform 10ms} .stg-list .expand-arrow.open{transform:rotate(90deg)} .stg-list .child-row td{padding-left:48px;color:rgba(255,255,255,.3);font-size:11px} .stg-list .child-row{background:rgba(255,255,255,.01)} .stg-list .child-row:hover{background:rgba(255,255,255,.04)!important} .stg-list .type-badge{display:inline-block;padding:2px 6px;border-radius:4px;font:500 9px/1 var(--font-display);text-transform:uppercase;letter-spacing:.03em} .stg-list .type-badge.folder{background:rgba(41,151,255,.1);color:var(--blue)} .stg-list .type-badge.image{background:rgba(191,90,242,.1);color:#bf5af2} .stg-list .type-badge.video{background:rgba(255,69,58,.1);color:#ff453a} .stg-list .type-badge.doc{background:rgba(255,159,10,.1);color:#ff9f0a} .stg-list .type-badge.audio{background:rgba(52,211,153,.1);color:#34d399} .stg-list .type-badge.other{background:rgba(255,255,255,.05);color:rgba(255,255,255,.3)} /* ═══ COLUMN VIEW ═══ */ .stg-columns{display:flex;height:100%;overflow-x:auto} .stg-col-pane{min-width:240px;max-width:280px;flex-shrink:0;border-right:1px solid rgba(255,255,255,.06);overflow-y:auto;height:100%} .stg-col-item{display:flex;align-items:center;gap:8px;padding:6px 12px;cursor:pointer;transition:background 10ms;font:400 12px/1.3 var(--font-display);color:rgba(255,255,255,.6);border-bottom:1px solid rgba(255,255,255,.02)} .stg-col-item:hover{background:rgba(255,255,255,.05)} .stg-col-item.selected{background:rgba(41,151,255,.1);color:#fff} .stg-col-item svg{width:14px;height:14px;flex-shrink:0} .stg-col-item .col-arrow{margin-left:auto;color:rgba(255,255,255,.15);font-size:10px} .stg-col-item .col-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ═══ GRID VIEW ═══ */ .stg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;padding:16px} .stg-grid-card{display:flex;flex-direction:column;align-items:center;padding:16px 8px 10px;border-radius:10px;border:1px solid transparent;cursor:pointer;transition:all 10ms;text-align:center} .stg-grid-card:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.06)} .stg-grid-card.selected{background:rgba(41,151,255,.08);border-color:rgba(41,151,255,.2)} .stg-grid-card .card-icon{width:56px;height:56px;margin-bottom:8px;display:flex;align-items:center;justify-content:center} .stg-grid-card .card-icon svg{width:48px;height:48px} .stg-grid-card .card-icon img{width:56px;height:56px;border-radius:6px;object-fit:cover} .stg-grid-card .card-name{font:500 11px/1.3 var(--font-display);color:#fff;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .stg-grid-card .card-size{font:400 10px/1 var(--font-display);color:rgba(255,255,255,.15);margin-top:3px} /* ═══ GALLERY VIEW ═══ */ .stg-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;padding:16px} .stg-gal-card{aspect-ratio:1;border-radius:10px;overflow:hidden;position:relative;cursor:pointer;border:2px solid transparent;transition:all 10ms;background:rgba(255,255,255,.03)} .stg-gal-card:hover{border-color:rgba(255,255,255,.15)} .stg-gal-card.selected{border-color:var(--blue)} .stg-gal-card img{width:100%;height:100%;object-fit:cover} .stg-gal-card .gal-overlay{position:absolute;bottom:0;left:0;right:0;padding:6px 8px;background:linear-gradient(transparent,rgba(0,0,0,.7));font:500 10px/1.3 var(--font-display);color:#fff} .stg-gal-card .gal-badge{position:absolute;top:6px;right:6px;padding:2px 6px;border-radius:4px;font:500 8px/1 var(--font-display);text-transform:uppercase;background:rgba(0,0,0,.6);color:#fff} .stg-gal-card .gal-folder-icon{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.05)} .stg-gal-card .gal-folder-icon svg{width:64px;height:64px;opacity:.3} /* ═══ PREVIEW PANEL ═══ */ .stg-pv-inner{padding:20px 16px} .stg-pv-thumb{width:100%;min-height:100px;border-radius:8px;overflow:hidden;margin-bottom:14px;background:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center} .stg-pv-thumb img{max-width:100%;max-height:320px;object-fit:contain} .stg-pv-thumb svg{width:48px;height:48px;opacity:.15} .stg-pv-name{font:500 14px/1.3 var(--font-display);color:#fff;margin-bottom:4px;word-break:break-word} .stg-pv-type{font:400 11px/1 var(--font-display);color:rgba(255,255,255,.3);margin-bottom:16px} .stg-pv-meta{display:flex;flex-direction:column;gap:0} .stg-pv-row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.04);font:400 11px/1.4 var(--font-display)} .stg-pv-row:last-child{border:none} .stg-pv-row .label{color:rgba(255,255,255,.3)} .stg-pv-row .value{color:rgba(255,255,255,.6);text-align:right} .stg-pv-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:40px 20px;text-align:center} .stg-pv-empty svg{width:40px;height:40px;opacity:.08;margin-bottom:12px} .stg-pv-empty p{font:400 12px/1.4 var(--font-display);color:rgba(255,255,255,.15)} /* ═══ INFO BAR ═══ */ .stg-infobar{display:flex;align-items:center;justify-content:space-between;padding:6px 16px;border-top:1px solid rgba(255,255,255,.06);font:400 11px/1 var(--font-display);color:rgba(255,255,255,.3);flex-shrink:0;background:rgba(255,255,255,.03)} /* ═══ EMPTY / LOADING ═══ */ .stg-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:40px;text-align:center} .stg-empty svg{width:48px;height:48px;opacity:.08;margin-bottom:12px} .stg-empty h3{font:500 15px/1 var(--font-display);color:rgba(255,255,255,.3);margin-bottom:6px} .stg-empty p{font:400 12px/1.4 var(--font-display);color:rgba(255,255,255,.15)} .stg-loading{display:flex;align-items:center;justify-content:center;height:100%;padding:40px} /* ═══ TEAM — Health Hero, Payout, Reports, Assignment Board ═══ */ /* ── Personal Health Hero ── */ /* ── Teammate Cards ── */ /* ── Team mode toggle (Dashboard / Pipeline) ── */ /* Match Studio status-island quality exactly */ .tm-mode-btn.active{background:linear-gradient(135deg,rgba(41,151,255,.2) 0%,rgba(41,151,255,.1) 100%); color:#fff;box-shadow:0 2px 8px rgba(41,151,255,.15),inset 0 1px 0 rgba(255,255,255,.08); border:1px solid rgba(41,151,255,.2)} .tm-mode-btn:hover:not(.active){color:rgba(255,255,255,.7);background:rgba(255,255,255,.04)} /* Sub-tabs inside dashboard */ .tm-sub-tab.active{color:#fff;background:rgba(255,255,255,.06)} .tm-sub-tab:hover:not(.active){color:rgba(255,255,255,.65)} /* Project Pipeline board — matches Studio pipeline exactly */ .tm-team-pill.active{background:rgba(41,151,255,.15);color:#fff;border-color:rgba(41,151,255,.25)} .tm-team-pill:hover:not(.active){background:rgba(255,255,255,.04);color:rgba(255,255,255,.7)} .tm-role-badge.editor{background:rgba(41,151,255,.15);color:#2997ff} .tm-role-badge.client{background:rgba(48,209,88,.15);color:#30d158} .tm-role-badge.trial{background:rgba(255,159,10,.15);color:#ff9f0a} /* ── Payout Explainer ── */ /* ── Payout Projection Cards ── */ .po-tier-badge.active{background:rgba(48,209,88,.15);color:#30d158;border:1px solid rgba(48,209,88,.2)} /* ── Reports ── */ .rpt-tab.active{color:#fff;background:rgba(255,255,255,.06)} .rpt-tab:hover:not(.active){color:rgba(255,255,255,.65)} /* ── Team mobile breakpoint ── */ /* BUG FIX: these rules were previously UNWRAPPED (no @media query), causing the team pipe board to render as a single vertical column on ALL viewports. Now correctly scoped to <=768px. */ @media(max-width:768px){ .tm-panel{padding:8px} .tm-assign-board{flex-direction:column;padding:8px} .tm-assign-col{min-width:0} .page-head{flex-wrap:wrap} .po-exp-grid{grid-template-columns:repeat(2,1fr)} } /* ═══════════════════════════════ TRIAL PAGE Used by public/trial.html — standalone trial workspace with header, macro step rail, step content panels, FrameLab promo, result panel, countdown timer, loading + error states. ═══════════════════════════════ */ @keyframes cb-offer-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}} .trial-step-wire.done{background:rgba(255,255,255,.25)} .trial-step.active .trial-step-num{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.35);color:#fff} .trial-step.active .trial-step-label{color:#fff} .trial-step.done .trial-step-num{background:linear-gradient(135deg,rgba(100,210,120,.25) 0%,rgba(60,180,90,.15) 100%); border-color:rgba(100,210,120,.4);color:#6fd68a} .trial-step.done .trial-step-label{color:rgba(255,255,255,.5)} .trial-panel.active{display:flex} @media(max-width:600px){.framelab-cards{grid-template-columns:1fr}} .result-panel.active{display:flex} /* Note: trial.html's .spinner / #loadWrap / .load-msg / #errorWrap / .error-title / .error-sub remain page-local because their styles collide with other pages' versions of the same class names with different dimensions. See trial.html's \3c style> block. */ /* ═══════════════════════════════ FRAMELAB / PIPELINE PAGE — additions Absorbed from public/pipeline.html local \3c style> block. Most .pipe-* / .psn-* / .pcr-* / .pc-* / .kanban / .ctx-* / .studio-dock / .sd-* classes are already defined in design-system.css elsewhere; this section only holds the pieces that were still page-local. ═══════════════════════════════ */ /* Recording countdown keyframe (was page-local; .rec-countdown.warn references it globally from design-system.css line ~7627). */ @keyframes pulse-red{from{opacity:1}to{opacity:.5}} /* Pipeline controls row pill-group (tier/type filter pills) */ .pcr-pill.active{background:rgba(41,151,255,.18);color:#fff; border:1px solid rgba(41,151,255,.25);box-shadow:0 0 8px rgba(41,151,255,.12)} /* FrameLab view toggle (kanban <-> list) — added in A-2 */ .pc-vt-btn{transition:background 10ms,color 10ms} .pc-vt-btn.fl-vt-active{ background:rgba(41,151,255,.18);color:#fff; border:1px solid rgba(41,151,255,.25); box-shadow:0 0 8px rgba(41,151,255,.12) } /* FrameLab list view table — Layer-2 glass header, no black bar */ #flListTable th{ text-align:left;font:500 var(--text-xs)/1 var(--font-display); color:var(--txt3);text-transform:uppercase;letter-spacing:.08em; padding:var(--s1) var(--s2);border-bottom:1px solid rgba(255,255,255,.08); position:sticky;top:0;background:transparent;z-index:1; white-space:nowrap;cursor:pointer;user-select:none } #flListTable thead{background:var(--cb-glass-2-bg)} #flListTable th:hover{color:var(--txt)} #flListTable td{ padding:var(--s1) var(--s2);border-bottom:1px solid rgba(255,255,255,.04); font:400 var(--text-sm)/var(--lh-tight) var(--font-display);color:var(--txt2) } #flListTable tbody tr{cursor:pointer;transition:background 10ms} #flListTable tbody tr:hover{background:rgba(255,255,255,.03)} #flListTable .fl-name-cell{color:#fff;font-weight:500} @media(max-width:640px){ #flListTable th:nth-child(n+5), #flListTable td:nth-child(n+5){display:none} } /* ═══════════════════════════════ ONBOARDING TESTS PAGE Used by public/onboarding-tests.html — standalone page (loaded directly, not via shell iframe). Body applies .bg-dark via class attribute for the navy gradient background. ═══════════════════════════════ */ .ot-wrap{max-width:820px;margin:0 auto} /* Header */ .ot-header{text-align:center;margin-bottom:28px} .ot-logo-ring{width:64px;height:64px;margin:0 auto 14px;border-radius:50%; background:radial-gradient(circle,rgba(10,20,40,.95) 55%,rgba(20,40,80,.8) 100%); display:flex;align-items:center;justify-content:center;position:relative} .ot-logo-ring::before{content:'';position:absolute;inset:-3px;border-radius:50%; background:conic-gradient(from 0deg,#2979ff,#00b0ff,#2979ff,#1565c0,#2979ff); animation:cb-ring-spin 3s linear infinite;z-index:-1} .ot-logo-ring img{width:36px;height:36px;filter:brightness(10)} .ot-eyebrow{font:500 10px/1 var(--font-display);color:#2997ff;letter-spacing:.22em;text-transform:uppercase;margin:0 0 6px} .ot-content-studio{font:500 32px/1 var(--font-display);letter-spacing:-1px;color:#fff;margin:0 0 14px} .ot-sep{width:44px;height:1px;margin:0 auto 14px;background:linear-gradient(90deg,transparent,rgba(41,151,255,.55),transparent)} .ot-user-name{font:500 18px/1.1 var(--font-display);color:#fff;margin:0;min-height:20px} .ot-user-role{display:inline-block;margin-top:6px;padding:5px 14px;border-radius:8px;font:500 10px/1 var(--font-display);letter-spacing:1px;text-transform:uppercase; background:rgba(41,151,255,.1);border:1px solid rgba(41,151,255,.3);color:#2997ff; box-shadow:0 0 18px rgba(41,151,255,.15)} .ot-sub{font:500 12px/1.4 var(--font);color:rgba(255,255,255,.55);margin-top:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Overall progress card */ .ot-progress-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:14px; padding:18px 22px;margin-bottom:24px;display:flex;align-items:center;gap:16px} .ot-progress-info{flex:1} .ot-progress-label{font:500 11px/1 var(--font);color:rgba(255,255,255,.4);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:6px} .ot-progress-text{font:500 16px/1.2 var(--font);color:#fff} .ot-progress-pct{font:500 24px/1 var(--font);color:#2997ff} .ot-progress-bar{height:6px;background:rgba(255,255,255,.05);border-radius:3px;overflow:hidden;margin-top:10px} .ot-progress-fill{height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#2997ff,#34c759);border-radius:3px;transition:transform .5s ease} /* Test cards */ .ot-list{display:flex;flex-direction:column;gap:12px;margin-bottom:32px} .ot-card.passed{background:rgba(52,199,89,.04);border-color:rgba(52,199,89,.2)} .ot-card.locked{opacity:.5} .ot-check{width:36px;height:36px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center; border:2px solid rgba(255,255,255,.15);font-size:16px;color:rgba(255,255,255,.3)} .ot-card.passed .ot-check{background:rgba(52,199,89,.2);border-color:rgba(52,199,89,.5);color:#34c759} .ot-body{flex:1;min-width:0} .ot-name{font:500 15px/1.2 var(--font);color:#fff;margin-bottom:4px} .ot-desc{font:400 12px/1.5 var(--font);color:rgba(255,255,255,.45)} .ot-meta{display:flex;gap:10px;margin-top:6px;font:500 10px/1 var(--font);color:rgba(255,255,255,.35)} .ot-meta span{padding:3px 8px;border-radius:4px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)} .ot-actions{display:flex;gap:8px;flex-shrink:0} .ot-btn{padding:10px 16px;border-radius:8px;border:1px solid;font:500 12px/1 var(--font);cursor:pointer; text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:all .15s} .ot-btn-study{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.65)} .ot-btn-study:hover{background:rgba(255,255,255,.08);color:#fff} .ot-btn-test{background:rgba(41,151,255,.15);border-color:rgba(41,151,255,.35);color:#2997ff} .ot-btn-test:hover{background:rgba(41,151,255,.25)} .ot-card.passed .ot-btn-test{background:rgba(52,199,89,.1);border-color:rgba(52,199,89,.3);color:#34c759} .ot-card.passed .ot-btn-test:hover{background:rgba(52,199,89,.18)} /* Footer actions */ .ot-footer{text-align:center;padding:20px 0} .ot-back{font:500 12px/1 var(--font);color:rgba(255,255,255,.4);text-decoration:none;padding:10px 20px;border-radius:8px; border:1px solid rgba(255,255,255,.08);transition:all .15s} .ot-back:hover{background:rgba(255,255,255,.05);color:#fff} .ot-complete-banner{background:linear-gradient(135deg,rgba(52,199,89,.1),rgba(41,151,255,.08)); border:1px solid rgba(52,199,89,.3);border-radius:14px;padding:22px 26px;margin-bottom:24px;text-align:center} .ot-complete-icon{font-size:36px;margin-bottom:8px} .ot-complete-title{font:500 18px/1.2 var(--font);color:#34c759;margin-bottom:6px} .ot-complete-msg{font:500 13px/1.5 var(--font);color:rgba(255,255,255,.7);margin-bottom:14px} .ot-complete-btn{padding:12px 28px;border-radius:10px;background:#34c759;border:none;color:#000; font:500 13px/1 var(--font);cursor:pointer;text-decoration:none;display:inline-block} .ot-complete-btn:hover{background:#2ea84d} .ot-loading{text-align:center;padding:80px 20px;color:rgba(255,255,255,.4);font:500 13px/1 var(--font)} @media(max-width:640px){ .ot-wrap .ot-sub{white-space:normal} .ot-card{flex-direction:column;align-items:flex-start} .ot-actions{width:100%} .ot-actions a{flex:1;justify-content:center} } /* ═══════════════════════════════ LAUNCHER PAGE Used by public/launcher.html — standalone app chooser for admins/owners (KB vs Content Portal). ═══════════════════════════════ */ .launcher-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:32px;flex-direction:column;gap:40px} /* Logo block (uses cb-ring-spin shared keyframe) */ .launcher-logo{position:relative;width:72px;height:72px;margin:0 auto} .launcher-logo::before{content:'';position:absolute;inset:-3px;border-radius:50%; background:conic-gradient(from 0deg,#2979ff,#00b0ff,#2979ff,#1565c0,#2979ff); animation:cb-ring-spin 3s linear infinite} .launcher-logo::after{content:'';position:absolute;inset:0;border-radius:50%; background:radial-gradient(circle,rgba(10,20,40,.95) 55%,rgba(20,40,80,.8) 100%)} .launcher-logo img{position:absolute;inset:0;margin:auto;width:40px;height:40px;z-index:1;filter:brightness(10)} .launcher-title{font-size:22px;font-weight:500;color:#f5f5f7;text-align:center;letter-spacing:-.4px;margin-top:12px} .launcher-sub{font-size:12px;font-weight:500;color:rgba(255,255,255,.35);text-align:center;letter-spacing:1.5px;text-transform:uppercase;margin-top:4px} /* Card grid — bigger, glass app-icon feel */ .launcher-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:760px;width:100%} /* Glass app-icon cards — premium iOS/Mac feel */ .launcher-card{ border-radius:36px;padding:56px 32px 40px;text-align:center; cursor:pointer;transition:transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s,border-color .25s,background .25s; text-decoration:none;position:relative;overflow:hidden; background:linear-gradient(160deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.04) 40%,rgba(255,255,255,.02) 100%); border:1px solid rgba(255,255,255,.12); border-top-color:rgba(255,255,255,.22); box-shadow:0 8px 32px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.12); } /* Top rim light */ .launcher-card::before{content:'';position:absolute;top:0;left:12%;right:12%;height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.2) 20%,rgba(255,255,255,.35) 50%,rgba(255,255,255,.2) 80%,transparent); transition:opacity .25s} /* Ambient glow */ .launcher-card::after{content:'';position:absolute;top:-40%;left:-20%;right:-20%;height:80%;border-radius:50%; opacity:0;transition:opacity .4s;pointer-events:none} .launcher-card.kb::after{background:radial-gradient(ellipse,rgba(255,159,10,.08),transparent 70%)} .launcher-card.portal::after{background:radial-gradient(ellipse,rgba(41,151,255,.08),transparent 70%)} .launcher-card:hover{transform:translateY(-4px); background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14); box-shadow:0 12px 40px rgba(0,0,0,.45),0 4px 12px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.1)} .launcher-card:hover::before{opacity:1} .launcher-card:hover::after{opacity:1} .launcher-card:active{transform:translateY(-1px);transition-duration:.1s} /* Glass app-icon — big, square-rounded, chrome-ish */ .launcher-icon{ width:156px;height:156px;border-radius:34px;margin:0 auto 28px; display:flex;align-items:center;justify-content:center; position:relative; background:linear-gradient(160deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.06) 40%,rgba(255,255,255,.025) 100%); border:1px solid rgba(255,255,255,.18); border-top-color:rgba(255,255,255,.32); box-shadow: 0 12px 40px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.06)} /* Icon top rim highlight */ .launcher-icon::before{content:'';position:absolute;top:0;left:12%;right:12%;height:1.5px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.4) 30%,rgba(255,255,255,.6) 50%,rgba(255,255,255,.4) 70%,transparent);border-radius:2px} /* Ambient radial reflection on hover */ .launcher-icon::after{content:'';position:absolute;top:-30%;left:-10%;right:-10%;height:60%; background:radial-gradient(ellipse at center,rgba(255,255,255,.08),transparent 65%); opacity:0;transition:opacity .3s;pointer-events:none;border-radius:50%} .launcher-card:hover .launcher-icon::after{opacity:1} .launcher-card:hover .launcher-icon{ border-top-color:rgba(255,255,255,.4); box-shadow:0 16px 48px rgba(0,0,0,.6),0 6px 16px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 0 1px rgba(255,255,255,.08)} /* Bug SVG inside icon */ .launcher-icon img{width:86px;height:86px;filter:brightness(10) drop-shadow(0 2px 8px rgba(41,151,255,.25));transition:filter .25s,transform .25s;position:relative;z-index:1} .launcher-card:hover .launcher-icon img{filter:brightness(10) drop-shadow(0 4px 14px rgba(41,151,255,.4));transform:scale(1.04)} .launcher-card-title{font:500 clamp(18px,1.6vw,22px)/1.15 var(--font-display);color:#fff;margin-bottom:10px;letter-spacing:-.025em} .launcher-card-desc{font:400 13px/1.55 var(--font);color:rgba(255,255,255,.5);max-width:240px;margin:0 auto} @media(max-width:720px){ .launcher-grid{grid-template-columns:1fr;max-width:360px;gap:28px} .launcher-card{padding:44px 24px 32px} .launcher-icon{width:128px;height:128px;border-radius:28px} .launcher-icon img{width:70px;height:70px} } @media(max-width:480px){ .launcher-icon{width:112px;height:112px;border-radius:24px} .launcher-icon img{width:60px;height:60px} } /* ═══════════════════════════════ LOGIN PAGE — brand lockup Used by public/login.html. The 4 .cs-brand-* classes render the "Content Bug Video Editing / Content Studio / LOGIN" typography stack underneath the animated bug logo ring. Kept as !important to guarantee layout stability against any future .login-card inner-element style that might try to restyle them. ═══════════════════════════════ */ .cs-brand-eyebrow{font:500 8.8px/1 var(--font-display)!important;color:#2997ff!important;letter-spacing:.22em!important;text-transform:uppercase;text-align:center;margin:18px 0 10px!important;white-space:nowrap!important} .cs-brand-title{font:500 35px/1 var(--font-display)!important;letter-spacing:-1.2px!important;text-align:center;margin:0 0 18px!important;color:#fff!important;text-transform:none!important;white-space:nowrap!important} .cs-brand-divider{width:70%;height:1px;background:rgba(255,255,255,.12);margin:0 auto 14px!important} .cs-brand-label{font:500 13px/1 var(--font-display)!important;color:rgba(255,255,255,.65)!important;letter-spacing:.18em!important;text-transform:uppercase;text-align:center;margin:0 0 8px!important} /* ═══════════════════════════════ CREATIVE REVIEW PAGE Used by public/framelab/creative-review.html — standalone page accessed via direct URL + token. 2-column layout (framelab iframe + Jitsi call panel) with sync indicator + loading/error. ═══════════════════════════════ */ /* Top bar */ /* cb-live-pulse keyframe shared in design-system.css SHARED ANIMATIONS */ /* Main split layout */ @media(max-width:900px){ .cr-main{grid-template-columns:1fr;grid-template-rows:1fr 260px} } /* FrameLab panel (left) */ /* Call panel (right) */ /* Sync indicator overlay (uses cb-fade-in-up + cb-live-pulse from SHARED ANIMATIONS) */ /* Collapsed sidebar toggle (mobile) */ @media(max-width:900px){.cr-toggle-call{display:flex}} /* ═══════════════════════════════ HELP PAGE — Base components Used by public/help.html. design-system.css already has .help-card-guided, .help-guided-badge, .help-visual, .help-feature*, .help-table, .help-section h2 svg, .help-card svg, .help-detail h3/ h4/p/ul/ol/li/em/b elsewhere (line ~8926+). This section adds the BASE classes that were still page-local. ═══════════════════════════════ */ .help-detail.open{display:block} .tw-step.active{display:flex} #twLoad{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#060a14;z-index:100} @media(max-width:760px){.premium-tiers{grid-template-columns:1fr}} .ptier[data-tier="1"].selected{border-color:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(255,255,255,.55),0 12px 48px rgba(255,255,255,.10)} .ptier[data-tier="2"].selected{border-color:rgba(90,200,250,.65);box-shadow:0 0 0 1px rgba(90,200,250,.65),0 12px 48px rgba(90,200,250,.18)} .ptier[data-tier="3"].selected{border-color:rgba(191,90,242,.65);box-shadow:0 0 0 1px rgba(191,90,242,.65),0 12px 48px rgba(191,90,242,.18)} .ptier.selected::before{opacity:.22} .ptier[data-tier="1"].selected .ptier-badge{background:#fff;color:#000} .ptier[data-tier="2"].selected .ptier-badge{background:#5ac8fa;color:#000} .ptier[data-tier="3"].selected .ptier-badge{background:#bf5af2;color:#fff} /* ═══ FAQ — Title, Filters, Items ═══ */ .faq-wrap{max-width:720px;margin:0 auto;padding:24px 28px 60px} .faq-titlebar{padding:20px 0 16px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:20px} .faq-title{font:500 20px/1.2 var(--font-display);color:#fff;letter-spacing:-.02em} .faq-sub{font:400 13px/1.4 var(--font-display);color:rgba(255,255,255,.4);margin-top:4px} /* Filter pills */ .faq-filters{display:flex;gap:6px;margin-bottom:20px;flex-wrap:wrap} .faq-filter{padding:6px 14px;border-radius:8px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:rgba(255,255,255,.5);font:500 12px/1 var(--font-display);cursor:pointer;transition:all 10ms} .faq-filter:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.7)} .faq-filter.active{background:rgba(41,151,255,.12);border-color:rgba(41,151,255,.25);color:#2997ff} /* Search */ .faq-search{width:100%;padding:10px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:#fff;font:400 13px/1 var(--font-display);outline:none;margin-bottom:20px;transition:border-color 10ms} .faq-search:focus{border-color:rgba(41,151,255,.3)} .faq-search::placeholder{color:rgba(255,255,255,.25)} /* Accordion */ .faq-section-title{font:500 11px/1 var(--font-display);color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:.06em;padding:16px 0 8px} .faq-empty{text-align:center;padding:40px 0;color:rgba(255,255,255,.25);font-size:14px} .hd-tab.active{background:rgba(255,255,255,.1);color:var(--txt)} .hd-bar-row{display:flex;align-items:center;gap:6px} .hd-bar-label{font:400 9px/1 var(--font);color:var(--txt4);width:56px;text-align:right} .hd-bar-track{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.06)} .hd-bar-fill{height:100%;border-radius:2px;transition:transform .3s} .hd-bar-val{font:500 9px/1 var(--font);width:28px;text-align:right} .hd-panel-bg.open{display:flex} @media(max-width:768px){.hd-pipeline{flex-direction:column}.hd-card{flex-wrap:wrap}} /* ═══ SHELL — Sidebar, Notifications, Chat Bubble, DM Rail ═══ */ #pageFrame,.shell-frame{contain:strict} /* Pre-loaded iframe system — all frames stacked, only active one visible */ .shell-frame{position:absolute;inset:0;width:100%;height:100%;border:none;background:transparent;display:none} .shell-frame.active{display:block} /* ── Toast enhancements ── */ .toast-content{display:flex;align-items:center;gap:10px} .toast-msg{flex:1;font:500 13px/1.3 var(--font-display)} body[data-role="editor"] .sb-tab.staff-only, body[data-role="admin"] .sb-tab.staff-only, body[data-role="owner"] .sb-tab.staff-only{display:block} .sb-nav-dot{width:6px;height:6px;border-radius:50%;background:#34d399;margin-left:auto;flex-shrink:0} /* ── Sidebar chat channel items ── */ .sb-ch-item.active{background:rgba(41,151,255,.08)} .sp.active{background:rgba(41,151,255,.1);color:var(--blue)} .pvd .ic{font-size:48px;text-align:center;margin-bottom:10px;opacity:.5} .pvd .sub{font:400 11px/1 var(--font);color:var(--t3);text-align:center;margin-bottom:18px} .pvd .r .v{color:var(--t2);text-align:right} .pvd .btn{display:block;width:100%;margin-top:16px;padding:12px;border:1px solid rgba(41,151,255,.3);border-radius:10px;background:rgba(41,151,255,.08);color:var(--blue);font:500 13px/1 var(--font);cursor:pointer;text-align:center} .pvd .btn:hover{background:rgba(41,151,255,.15)} /* ═══ REQUEST WIZARD — Blueprint Selection (horizontal scroll rows) ═══ */ #bpSelectRow{width:100%;max-width:100%;overflow:hidden} .rq-bp-card.selected{border-color:var(--blue)!important;background:rgba(41,151,255,.08); box-shadow:0 0 16px rgba(41,151,255,.15),inset 0 0 0 1px rgba(41,151,255,.2)} .rq-bp-card.selected:hover{border-color:var(--blue)!important} /* Unified dissolving glass now applied directly as background + box-shadow on .dock-bubble and .pv-thread-float */ /* ═══ Thread input — match dock toolbox sizing ═══ */ .pv-thread-float .dk-send{width:32px;height:32px;border-radius:50%; background:var(--imsg);color:#fff;box-shadow:0 2px 8px rgba(11,132,254,.3)} .pv-thread-float .dk-send svg{width:14px;height:14px} .pv-thread-float .dk-send:hover{background:var(--imsg-dk);transform:scale(1.05)} .pv-thread-float .chat-pill{min-height:36px} .pv-thread-float .imsg-field{font-size:14px} .pv-thread-float .ps-chat-plus{width:32px;height:32px;font-size:18px} /* ═══ HELP & TUTORIALS — guided walkthrough badges ═══ */ /* ═══ HELP — Visual UI diagrams ═══ */ @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}} /* ═══ HELP — Feature grid + table ═══ */ /* ═══ HELP — Detail content styling ═══ */ /* ═══════════════════════════════════════════════════════════════════ MOBILE RESPONSIVE — comprehensive overrides for ≤640px and ≤480px Tablets: ≤1024px get reduced density. Phones get single-column. ═══════════════════════════════════════════════════════════════════ */ @media (max-width:1024px) { /* Tablets — reduce sidebar width, allow main content to breathe */ .app-dock-inner { width:180px } .ac-section { padding:0 } .ac-sec-body { padding:16px 18px } .ac-profile { gap:14px } .ac-avatar { width:80px; height:80px } } @media (max-width:768px) { /* Phones landscape + small tablets */ body { font-size:14px } .app-dock { padding:6px 0 6px 6px } .app-dock-inner { width:72px } .app-dock-inner .sb-bottom-expanded { display:none } .app-dock-inner .sb-bottom-collapsed { display:flex } /* Compact tiles with labels */ .sb-nav-item { flex-direction:column; justify-content:center; align-items:center; padding:6px 4px; gap:3px; width:58px; height:auto; margin:2px auto; font-size:9px; font-weight:500 } .sb-nav-item .sb-nav-tile { width:42px!important; height:42px!important; border-radius:12px!important } .sb-nav-item .sb-nav-tile svg { width:24px!important; height:24px!important } /* Page shell */ .page-shell { padding:0 } .page-head { padding:14px 16px 8px } .page-body { padding:0 } .page-inner { padding:8px 10px 16px } /* Pipeline kanban — stack vertical */ .pipeline-card { width:100% !important } /* Filter/dropdown bars wrap */ .pipe-filters,.kanban-filters { flex-wrap:wrap; gap:6px; padding:8px 12px } .pipe-filters select,.kanban-filters select { font-size:12px; padding:6px 8px } /* Account page */ .ac-section { margin-bottom:14px } .ac-sec-body { padding:14px 16px } .ac-profile { flex-direction:column; align-items:flex-start; gap:14px } .ac-avatar { width:88px; height:88px; align-self:center } .ac-info { width:100%; text-align:center } .ac-info h3 { font-size:18px } .ac-form-row { flex-direction:column; gap:10px } .ac-method-grid { grid-template-columns:repeat(2,1fr) } .ac-stat-grid { grid-template-columns:1fr 1fr } /* Modals */ .modal,.cb-modal { width:96vw !important; max-width:96vw !important } /* Wiki */ .wk-wrap { padding:14px 14px 60px; gap:14px } .wk-toc { display:none } .wk-tabs { padding:0 14px; gap:0 } .wk-tab { padding:12px 12px; font-size:11px } .wk-tab-icon { font-size:13px } .wk-roles-bar { padding:12px 14px; flex-wrap:wrap } .wk-role-pill { padding:5px 10px; font-size:10px } .wk-section h2 { font-size:18px } .wk-hero-title { font-size:24px } /* Onboarding cards */ .ob-wrap { padding:20px 14px 60px } .ob-card { padding:20px 18px } .ob-row { flex-direction:column; gap:10px } .ob-card-title { font-size:17px } .ob-step-pill { padding:8px 4px; font-size:9px } .ob-step-icon { font-size:14px } /* Premium tier cards in request wizard */ .premium-tiers { grid-template-columns:1fr !important; gap:12px } .ptier { padding:20px 18px } .ptier-name { font-size:20px } /* Top bar */ .top-bar { padding:8px 14px; height:auto; min-height:44px } .wk-search { width:100% !important; max-width:none; margin-left:0; margin-top:8px } /* FrameLab dock */ .ps-thread { width:100%; max-height:50vh } /* Hide secondary helper labels on mobile */ .wk-search-key,.hf-icon { display:none } } @media (max-width:480px) { /* Phones portrait — most aggressive */ body { font-size:13px } .ob-wrap { padding:14px 10px 50px } .ob-card { padding:16px 14px; border-radius:14px } .ob-steps { gap:4px } .ob-step-pill { padding:6px 2px } .ob-step-pill .ob-step-icon { font-size:13px; margin-bottom:2px } .ob-step-pill { font-size:8px } .ob-card-title { font-size:16px } .ob-card-desc { font-size:11px } /* Hero titles smaller */ .wk-hero-title { font-size:21px } .wk-hero-desc { font-size:12px } /* Buttons full width */ .btn,.ob-btn { min-height:42px; padding:11px 16px } /* Pipeline cards */ .pipeline-card { font-size:11px } .pipe-name { font-size:11px } /* Discord step */ .ob-discord-option { padding:14px 16px !important } /* Toast & notifications */ .toast-stack { left:8px; right:8px; bottom:8px; width:auto; max-width:none } .sb-notif-popup { left:8px; right:8px; width:auto !important; max-width:none } /* Tier cards */ .ptier { padding:18px 14px } .ptier-features { gap:8px } .ptier-features li { font-size:12px } /* Avatar editor modal */ .av-editor { max-width:100vw; border-radius:0; margin:0 } .av-editor-canvas-wrap { aspect-ratio:1/1 } } /* Touch device tap targets — 44px minimum */ @media (hover:none) and (pointer:coarse) { button,.btn,.ob-btn,.wk-tab,.wk-role-pill,.sb-nav-item,a.btn,a.ob-btn { min-height:44px } .av-tool-btn { min-height:44px; padding:12px } .premium-tiers .ptier { -webkit-tap-highlight-color:rgba(41,151,255,.1) } /* Disable hover transforms on touch — they cause stuck states */ .pipeline-card:hover,.ob-discord-option:hover,.ptier:hover,.support-card:hover { transform:none } /* Bigger close buttons */ .modal-close,.cb-modal-close,.av-editor-close,.rv-ctx-close { min-width:32px; min-height:32px } } /* Prevent input zoom on iOS Safari (font-size:16px+ disables auto-zoom) */ @media (max-width:768px) { input[type="text"],input[type="email"],input[type="tel"],input[type="number"], input[type="date"],input[type="password"],input[type="search"], textarea,select,.ob-input,.ob-select,.ob-textarea,.form-input { font-size:16px !important } } .wiz-method.selected{background:rgba(41,151,255,.10);border-color:rgba(41,151,255,.35)} @media(max-width:640px){.wiz-methods{grid-template-columns:1fr}} /* Theme picker cards (preferences step) */ .wiz-theme-card.selected{border-color:rgba(41,151,255,.55);background:rgba(41,151,255,.10); box-shadow:0 0 24px rgba(41,151,255,.15)} /* Owner page sticky footer (different from the staff wizard footer) */ .wiz-page .wiz-footer{position:sticky;bottom:0;z-index:10; background:rgba(10,14,24,.85);border-top:1px solid rgba(255,255,255,.05)} @keyframes socialSpin{to{transform:rotate(360deg)}} .rq-edit-details .form-group{margin-bottom:20px} .ob-avatar-opt.active{background:rgba(41,151,255,.1);border-color:rgba(41,151,255,.3);color:#2997ff} /* Toggle row */ .ob-toggle.on{background:#2997ff} .ob-toggle.on::after{transform:translateX(20px)} /* Chips */ .ob-chip.selected{background:rgba(41,151,255,.1);border-color:rgba(41,151,255,.3);color:#2997ff} @media(max-width:760px){.ob-theme-grid{grid-template-columns:1fr}} .ob-theme-card.selected{border-color:rgba(41,151,255,.55);background:rgba(41,151,255,.05); box-shadow:0 0 0 3px rgba(41,151,255,.12),0 18px 46px rgba(0,0,0,.35)} body.theme-v2-black .cb-grid, body.theme-v2-blue .cb-grid, body.theme-v2-white .cb-grid{background-image:none !important} /* ═══════════════════════════════ AVATAR EDITOR MODAL Used by account.html when the user opens the avatar editor to zoom/crop/mirror an image before saving as their profile picture. ═══════════════════════════════ */ @keyframes cb-av-fade-in{from{opacity:0}to{opacity:1}} .av-editor-bg{position:fixed;inset:0;background:rgba(0,0,0,.7); z-index:9999;display:none;align-items:center;justify-content:center;padding:24px} .av-editor-bg.open{display:flex;animation:cb-av-fade-in .2s ease} .av-editor{background:rgba(12,18,30,.98);border:1px solid rgba(255,255,255,.1);border-radius:20px; width:100%;max-width:480px;box-shadow:0 20px 80px rgba(0,0,0,.6);overflow:hidden; font-family:var(--font-display)} .av-editor-hdr{padding:18px 24px;border-bottom:1px solid rgba(255,255,255,.06); display:flex;align-items:center;justify-content:space-between} .av-editor-title{font:500 16px/1 var(--font-display);color:#fff;letter-spacing:-.2px} .av-editor-close{width:28px;height:28px;border:none;background:rgba(255,255,255,.06);border-radius:50%; color:rgba(255,255,255,.5);cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center; transition:background .15s,color .15s} .av-editor-close:hover{background:rgba(255,255,255,.12);color:#fff} .av-editor-canvas-wrap{position:relative;width:100%;aspect-ratio:1/1;background:#000;overflow:hidden; display:flex;align-items:center;justify-content:center;cursor:grab} .av-editor-canvas-wrap:active{cursor:grabbing} .av-editor-img{position:absolute;left:50%;top:50%;transform-origin:center center; user-select:none;-webkit-user-drag:none;pointer-events:none; max-width:none} .av-editor-circle{position:absolute;inset:0;pointer-events:none; background:radial-gradient(circle at center,transparent 49%,rgba(0,0,0,.65) 50%)} .av-editor-circle::before{content:'';position:absolute;inset:0;border-radius:50%; box-shadow:0 0 0 2px rgba(255,255,255,.4) inset; width:calc(100% - 4px);height:calc(100% - 4px);left:2px;top:2px;border-radius:50%} .av-editor-controls{padding:18px 24px 8px} .av-control-row{display:flex;align-items:center;gap:12px;margin-bottom:14px} .av-control-label{font:500 11px/1 var(--font-display);color:rgba(255,255,255,.5); text-transform:uppercase;letter-spacing:.8px;width:60px;flex-shrink:0} .av-zoom-slider{flex:1;-webkit-appearance:none;height:4px;background:rgba(255,255,255,.08); border-radius:2px;outline:none;cursor:pointer} .av-zoom-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%; background:#2997ff;cursor:pointer;border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.4);transition:transform .12s} .av-zoom-slider::-webkit-slider-thumb:hover{transform:scale(1.1)} .av-zoom-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#2997ff; cursor:pointer;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.4)} .av-tools{display:flex;gap:6px;margin-top:6px} .av-tool-btn{flex:1;padding:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08); border-radius:10px;color:rgba(255,255,255,.7);font:500 11px/1 var(--font-display); cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px; transition:background .15s,border-color .15s,color .15s} .av-tool-btn:hover{background:rgba(41,151,255,.08);border-color:rgba(41,151,255,.25);color:#2997ff} .av-tool-btn.active{background:rgba(41,151,255,.15);border-color:rgba(41,151,255,.4);color:#2997ff} .av-tool-btn svg{width:14px;height:14px} .av-editor-actions{padding:14px 24px 20px;border-top:1px solid rgba(255,255,255,.06); display:flex;gap:10px;justify-content:flex-end} .av-editor-btn{padding:11px 22px;border-radius:10px;font:500 13px/1 var(--font-display);cursor:pointer; border:none;transition:background .15s,transform .12s} .av-editor-btn:active{transform:scale(.97)} .av-editor-btn-cancel{background:rgba(255,255,255,.05);color:rgba(255,255,255,.6)} .av-editor-btn-cancel:hover{background:rgba(255,255,255,.1);color:#fff} .av-editor-btn-save{background:#2997ff;color:#fff} .av-editor-btn-save:hover{background:#0a84ff} .av-editor-btn-save:disabled{opacity:.4;cursor:not-allowed} /* ═══════════════════════════════ DISCORD WIZARD Used by public/discord.html. NOTE: button + spinner classes are intentionally scoped as .dc-btn* / .dc-spinner (not .btn / .spinner) to avoid polluting the global .btn namespace and colliding with other pages' .spinner definitions. ═══════════════════════════════ */ @keyframes cb-fade-slide-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}} /* ── Embed (fills remaining space below title bar) ── */ #embed-container{flex:1;display:none;min-height:0} #embed-container iframe{width:100%;height:100%;border:none} /* ── Wizard Container ── */ #wizard{display:none;height:100vh;align-items:center;justify-content:center;padding:24px;position:relative;overflow:hidden} #wizard.active{display:flex} /* Ambient glow behind card — cb-pulse-glow from shared animations */ .ambient-glow{position:absolute;width:500px;height:500px;border-radius:50%; background:radial-gradient(circle,rgba(41,151,255,.15) 0%,transparent 70%); top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;opacity:.5; animation:cb-pulse-glow 6s ease-in-out infinite} /* ── Wizard Card ── */ .wizard-card{background:rgba(15,19,32,.45);border:1px solid rgba(255,255,255,.06); border-radius:var(--r-xl);width:100%;max-width:520px;padding:48px 40px; position:relative;z-index:1} /* ── Steps ── */ .step{display:none;animation:cb-fade-slide-in 220ms cubic-bezier(.16,1,.3,1) forwards} .step.active{display:block} /* ── Step Progress ── */ .step-progress{display:flex;gap:8px;margin-bottom:36px;justify-content:center} .step-dot{width:32px;height:4px;border-radius:2px;background:rgba(255,255,255,.28);transition:10ms} .step-dot.active{background:var(--blue)} .step-dot.done{background:rgba(48,209,88,1)} /* ── Discord Icon ── */ .discord-icon{width:56px;height:56px;border-radius:16px;background:#5865f2; display:flex;align-items:center;justify-content:center;margin:0 auto 24px} .discord-icon svg{width:32px;height:32px;fill:#fff} /* ── Typography ── */ .wizard-title{font-size:28px;font-weight:500;letter-spacing:-.02em; text-align:center;margin-bottom:8px;line-height:1.2} .wizard-subtitle{font-size:15px;color:rgba(255,255,255,.55); text-align:center;line-height:1.5;margin-bottom:32px} /* ── Option Cards ── */ .option-cards{display:flex;flex-direction:column;gap:12px} .option-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06); border-radius:var(--r-lg);padding:20px 24px;cursor:pointer;transition:10ms; display:flex;align-items:center;gap:16px} .option-card:hover{background:rgba(20,26,46,.5);border-color:rgba(41,151,255,.3);transform:translateY(-1px)} .option-card:active{transform:translateY(0)} .option-icon{width:44px;height:44px;border-radius:12px; display:flex;align-items:center;justify-content:center;flex-shrink:0} .option-icon.blue{background:rgba(41,151,255,.15)} .option-icon.purple{background:rgba(88,101,242,.15)} .option-icon svg{width:22px;height:22px} .option-text h3{font-size:16px;font-weight:500;margin-bottom:2px} .option-text p{font-size:13px;color:rgba(255,255,255,.55)} .option-arrow{margin-left:auto;color:rgba(255,255,255,.28);transition:10ms} .option-card:hover .option-arrow{color:var(--blue);transform:translateX(2px)} /* ── Loading state in option card ── */ .option-card.loading{pointer-events:none;opacity:.7} .option-card .dc-spinner{display:none;width:20px;height:20px; border:2px solid rgba(255,255,255,.28);border-top-color:var(--blue); border-radius:50%;animation:spin .8s linear infinite;margin-left:auto} .option-card.loading .dc-spinner{display:block} .option-card.loading .option-arrow{display:none} /* ── Buttons (scoped as .dc-btn* to avoid global .btn collision) ── */ .dc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:14px 28px;border-radius:var(--r-md);border:none; font-family:inherit;font-size:15px;font-weight:500;cursor:pointer; transition:10ms;width:100%;text-decoration:none} .dc-btn-primary{background:var(--blue);color:#fff} .dc-btn-primary:hover{background:var(--blue-hv);transform:translateY(-1px)} .dc-btn-primary:active{transform:translateY(0)} .dc-btn-primary:disabled{opacity:.4;cursor:not-allowed;transform:none} .dc-btn-discord{background:#5865f2;color:#fff} .dc-btn-discord:hover{background:#6b74f7;transform:translateY(-1px)} .dc-btn-discord:active{transform:translateY(0)} .dc-btn-success{background:rgba(48,209,88,1);color:#fff} .dc-btn-success:hover{opacity:.9;transform:translateY(-1px)} .dc-btn svg{width:20px;height:20px;fill:currentColor} /* ── Form ── */ .form-group{margin-bottom:20px} .form-label{display:block;font-size:13px;font-weight:500; color:rgba(255,255,255,.55);margin-bottom:8px} .form-input{width:100%;padding:14px 16px;background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06);border-radius:var(--r-md); color:var(--txt);font-family:inherit;font-size:15px;transition:10ms;outline:none} .form-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(41,151,255,.15)} .form-input:read-only{opacity:.5;cursor:not-allowed} /* ── Checkbox ── */ .checkbox-row{display:flex;align-items:center;gap:12px;margin:24px 0;cursor:pointer;user-select:none} .checkbox-row input[type="checkbox"]{display:none} .checkbox-custom{width:22px;height:22px;border-radius:6px; border:2px solid rgba(255,255,255,.28);display:flex;align-items:center;justify-content:center; transition:10ms;flex-shrink:0} .checkbox-custom svg{width:14px;height:14px;fill:#fff;opacity:0;transform:scale(.5);transition:10ms} .checkbox-row input:checked+.checkbox-custom{background:var(--blue);border-color:var(--blue)} .checkbox-row input:checked+.checkbox-custom svg{opacity:1;transform:scale(1)} .checkbox-label{font-size:14px;color:rgba(255,255,255,.55)} /* ── Back Link ── */ .back-link{display:inline-flex;align-items:center;gap:6px; color:rgba(255,255,255,.55);font-size:13px;cursor:pointer;transition:10ms; margin-bottom:24px;background:none;border:none;font-family:inherit} .back-link:hover{color:var(--txt)} .back-link svg{width:16px;height:16px;fill:currentColor} /* ── Success Step (cb-avatar-reveal + cb-check-pulse from shared animations) ── */ .success-avatar{width:88px;height:88px;border-radius:50%;margin:0 auto 20px; display:block;border:3px solid rgba(48,209,88,1);box-shadow:0 0 0 8px rgba(48,209,88,.15); animation:cb-avatar-reveal .6s cubic-bezier(.34,1.56,.64,1) forwards;object-fit:cover} .success-avatar-placeholder{width:88px;height:88px;border-radius:50%;margin:0 auto 20px; display:flex;align-items:center;justify-content:center; border:3px solid rgba(48,209,88,1);box-shadow:0 0 0 8px rgba(48,209,88,.15); background:#5865f2;animation:cb-avatar-reveal .6s cubic-bezier(.34,1.56,.64,1) forwards} .success-avatar-placeholder svg{width:40px;height:40px;fill:#fff} .success-checkmark{width:64px;height:64px;border-radius:50%;background:rgba(48,209,88,1); display:flex;align-items:center;justify-content:center;margin:0 auto 24px; animation:cb-check-pulse .6s cubic-bezier(.34,1.56,.64,1) forwards; box-shadow:0 0 0 8px rgba(48,209,88,.15)} .success-checkmark svg{width:32px;height:32px;fill:#fff} .success-name{font-size:20px;font-weight:500;text-align:center;margin-bottom:4px} .success-tag{font-size:14px;color:rgba(255,255,255,.55);text-align:center;margin-bottom:8px} .success-note{font-size:13px;color:rgba(255,255,255,.28);text-align:center;margin-bottom:32px;line-height:1.5} /* ── Loading overlay ── */ .loading-screen{position:absolute;inset:0;display:flex;flex-direction:column; align-items:center;justify-content:center;background:transparent;z-index:100;gap:16px} .loading-screen.hidden{display:none} .loading-spinner{width:36px;height:36px;border:3px solid rgba(255,255,255,.28); border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite} .loading-text{font-size:14px;color:rgba(255,255,255,.55)} /* ── Notification bar ── */ .notification{position:fixed;top:16px;left:50%; transform:translateX(-50%) translateY(-60px);background:rgba(15,19,32,.45); border:1px solid rgba(255,255,255,.06);border-radius:var(--r-md);padding:12px 20px; font-size:14px;color:var(--txt);z-index:200;transition:10ms; display:flex;align-items:center;gap:8px} .notification.show{transform:translateX(-50%) translateY(0)} .notification.error{border-color:rgba(255,59,48,.4)} .notification svg{width:18px;height:18px;flex-shrink:0} @media(max-width:560px){ .wizard-card{padding:36px 24px} .wizard-title{font-size:24px} } /* ═══════════════════════════════════════════════════════════════ CONTENT BUG OS — White-themed internal tools shell Used by: tool-index.html, blenderbug.html, mercury.html ═══════════════════════════════════════════════════════════════ */ /* ── OS Shell Layout ── */ .os-shell{display:flex;height:100vh;overflow:hidden} /* ── Sidebar — white/light ── */ .os-dock{width:200px;flex-shrink:0;display:flex;flex-direction:column; background:#fff;border-right:1px solid rgba(0,0,0,.08)} .os-dock-logo{padding:16px;text-align:center;border-bottom:1px solid rgba(0,0,0,.06)} .os-dock-logo img{width:48px;height:48px;border-radius:14px;margin-bottom:6px;filter:invert(1) brightness(0)} .os-dock-title{font:500 14px/1 var(--font-display);color:#1d1d1f;letter-spacing:-.2px} .os-dock-sub{font:400 10px/1 var(--font);color:#86868b;margin-top:3px;text-transform:uppercase;letter-spacing:1.5px} .os-dock-nav{flex:1;padding:12px 8px;display:flex;flex-direction:column;gap:2px} .os-nav-label{font:500 9px/1 var(--font);text-transform:uppercase;letter-spacing:1.5px; color:rgba(0,0,0,.25);padding:12px 10px 4px;margin-top:4px} .os-nav-label:first-child{margin-top:0} .os-nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px; cursor:pointer;color:#6e6e73;font:500 13px/1 var(--font);transition:all 60ms; border:1px solid transparent;background:none;width:100%;text-align:left;text-decoration:none} .os-nav-item:hover{background:rgba(0,0,0,.03);color:#1d1d1f} .os-nav-item.active{background:rgba(0,122,255,.08);color:#007aff;border-color:rgba(0,122,255,.15)} .os-nav-item .icon{font-size:16px;width:20px;text-align:center;flex-shrink:0} .os-back{display:flex;align-items:center;gap:6px;padding:9px 12px;border-radius:10px; color:#86868b;font:400 12px/1 var(--font);cursor:pointer;transition:all 60ms; border:none;background:none;width:100%;text-align:left;text-decoration:none;margin-top:auto} .os-back:hover{color:#1d1d1f;background:rgba(0,0,0,.03)} .os-dock-footer{padding:12px;border-top:1px solid rgba(0,0,0,.06);display:flex;align-items:center;gap:10px} .os-av{width:32px;height:32px;border-radius:50%;background:rgba(0,122,255,.1);display:flex; align-items:center;justify-content:center;font:500 12px/1 var(--font);color:#007aff;flex-shrink:0;overflow:hidden} .os-av img{width:100%;height:100%;object-fit:cover} .os-user-name{font:500 12px/1 var(--font);color:#1d1d1f;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .os-user-role{font:500 9px/1 var(--font);color:#007aff;text-transform:uppercase;letter-spacing:.5px;margin-top:2px} .os-body{flex:1;min-width:0;position:relative;overflow:hidden;background:#f5f5f7} .os-frame{position:absolute;inset:0;width:100%;height:100%;border:none;background:transparent;display:none} .os-frame.active{display:block} @media(max-width:768px){ .os-dock{width:60px} .os-dock-title,.os-dock-sub,.os-nav-item span:not(.icon),.os-user-name,.os-user-role,.os-nav-label{display:none} .os-nav-item{justify-content:center;padding:10px} .os-dock-logo{padding:10px} .os-dock-footer{justify-content:center;padding:8px} .os-back span{display:none} .os-back{justify-content:center} } /* ── BLENDERBUG — 3D Rendering Engine UI ── */ .rb-page{padding:24px 28px} .rb-hdr{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:24px} .rb-title{font:500 24px/1 var(--font-display);color:#1d1d1f;letter-spacing:-.4px} .rb-sub{font:400 13px/1 var(--font);color:#86868b;margin-top:5px} .rb-tabs{display:flex;gap:6px;margin-bottom:24px} .rb-tab{font:500 13px/1 var(--font);padding:7px 18px;border-radius:20px; border:1px solid transparent;background:transparent;color:#86868b;cursor:pointer;transition:all .15s} .rb-tab:hover{color:#1d1d1f;background:rgba(0,0,0,.04)} .rb-tab.active{background:#1d1d1f;border-color:#1d1d1f;color:#fff} .rb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px} .rb-type-card{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:20px 16px; cursor:pointer;transition:all 80ms;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.04)} .rb-type-card:hover{border-color:rgba(0,0,0,.15);box-shadow:0 4px 12px rgba(0,0,0,.08);transform:translateY(-1px)} .rb-type-card.selected{border-color:#007aff;background:rgba(0,122,255,.03);box-shadow:0 0 0 2px rgba(0,122,255,.15)} .rb-type-icon{font-size:32px;margin-bottom:10px} .rb-type-name{font:500 14px/1 var(--font);color:#1d1d1f;margin-bottom:4px} .rb-type-desc{font:400 11px/1.3 var(--font);color:#86868b} .rb-status{margin-top:24px;padding:12px 16px;border-radius:12px;background:#fff;border:1px solid rgba(0,0,0,.06); display:flex;align-items:center;gap:10px;box-shadow:0 1px 3px rgba(0,0,0,.03)} .rb-status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0} .rb-status-dot.green{background:#34c759} .rb-status-dot.yellow{background:#ff9f0a} .rb-status-dot.red{background:#ff3b30} .rb-status-text{font:400 13px/1 var(--font);color:#86868b} .rb-sec{font:500 11px/1 var(--font);text-transform:uppercase;letter-spacing:2px;color:rgba(0,0,0,.3);margin:28px 0 12px} .rb-sec:first-child{margin-top:0} .rb-job-list{display:flex;flex-direction:column;gap:8px} .rb-job-card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:12px;padding:14px 16px; display:flex;align-items:center;gap:12px;box-shadow:0 1px 3px rgba(0,0,0,.03)} .rb-job-thumb{width:48px;height:48px;border-radius:10px;background:#f0f0f2;display:flex; align-items:center;justify-content:center;font-size:22px;flex-shrink:0;overflow:hidden} .rb-job-thumb img{width:100%;height:100%;object-fit:cover} .rb-job-meta{flex:1;min-width:0} .rb-job-name{font:500 14px/1 var(--font);color:#1d1d1f} .rb-job-info{font:400 11px/1 var(--font);color:#86868b;margin-top:3px} .rb-job-status{font:500 11px/1 var(--font);padding:3px 10px;border-radius:20px} .rb-job-status.queued{background:rgba(255,159,10,.1);color:#cc7e00} .rb-job-status.rendering{background:rgba(0,122,255,.1);color:#007aff} .rb-job-status.done{background:rgba(52,199,89,.1);color:#248a3d} .rb-job-status.failed{background:rgba(255,59,48,.1);color:#d70015} .rb-empty{text-align:center;padding:48px 20px;color:#86868b;font:400 14px/1.5 var(--font)} .rb-empty-icon{font-size:40px;margin-bottom:12px;opacity:.5} /* ═══════════════════════════════════════════════════════════════════════ WEBSITE MARKETING COMPONENTS — centralized from inline \3c style> blocks Previously duplicated across 12 website pages (~40k lines of redundant CSS). Consolidated into design-system.css on 2026-04-15 per owner mandate: "we only use the design system css for all pages" ═══════════════════════════════════════════════════════════════════════ */ .site-tab.active{background:rgba(255,255,255,.08);color:var(--txt)} /* Website-in-preview styles (light theme) */ .ws-sub{font-size:20px;color:#6e6e73;max-width:640px;margin:0 auto 36px;line-height:1.5} .ws-sec-hd .label{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:3px;color:var(--blue);margin-bottom:12px;display:block} .ws-stat .num{font-size:32px;font-weight:500;letter-spacing:-.03em;color:var(--txt)} .ws-stat .lbl{font-size:12px;color:rgba(255,255,255,.5);font-weight:500;margin-top:2px} @media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}} /* ═══════════════════════════════════════════════════════════════ WEBSITE MARKETING — Light Theme Components Used by: home, pricing, faq, booking, portfolio, careers ═══════════════════════════════════════════════════════════════ */ /* ── GHL Text Color Nuclear Override ── */ .row,.col-lg-12,.col-lg-6,.col-md-12,.col-sm-12,.hl_page-preview--content,.hl_page-preview,.section_wrapper,.inner-section, [class*="hl_"],[class*="col-"],[id*="section"],[id*="row"]{color:var(--t1) !important;font-family:var(--font) !important} .section .btn-ghost{color:var(--blue);border-color:rgba(41,151,255,.3)} .section .btn-ghost:hover{background:rgba(41,151,255,.1);border-color:rgba(41,151,255,.5)} /* ═══ TYPOGRAPHY SCALE (bumped 2026-04-15: bigger/easier to read per owner) ═══ */ .hero-title .line1{display:block;color:var(--t1) !important;font-weight:500} .hero-title .line2{display:block;color:var(--t2) !important;font-weight:500;font-size:.85em;letter-spacing:-.02em;margin-top:var(--s1)} /* ═══ BUTTONS ═══ */ .ws-page .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);height:56px;padding:0 28px;border-radius:var(--r-lg);font-size:16px;font-weight:500;text-decoration:none;cursor:pointer;border:none;font-family:var(--font);letter-spacing:-.01em;transition:transform 80ms var(--ease);} .ws-page .btn-ghost{background:transparent;color:var(--blue-brand);border:1px solid rgba(0,113,227,.3);padding:0 28px;font-size:16px} .ws-page .btn-ghost:active{transform:scale(.97);transition-duration:40ms} /* ═══ HERO SECTION ═══ */ .section.hero .hero-title,.section.hero .hero-title .line1,.section.hero .hero-title em{color:var(--t1) !important} .section.hero .hero-title .line2{color:var(--t2) !important} .section.hero .showcase-card.active{border-color:rgba(41,151,255,.3);box-shadow:var(--shadow-hover)} .section.hero .showcase-card.inactive::after{background:rgba(0,0,0,.35)} /* ═══ STATS ROW ═══ */ .stat-value.accent{color:var(--blue-brand)} .stat-label.accent{color:var(--blue-brand)} /* ═══ SHOWCASE CARDS ═══ */ .showcase-card.active{transform:scale(1.04);border-color:rgba(41,151,255,.3);box-shadow:var(--shadow-hover);z-index:2} /* ═══ TRUST — Creator Rail ═══ */ .section .creator-chip.active{background:rgba(41,151,255,.1)} .section .creator-chip.active .creator-chip-handle{color:var(--t1)} .section .creator-chip.active .creator-chip-subs{color:var(--blue)} .creator-chip.active::after{width:48px} .creator-chip.active{background:rgba(0,113,227,.04)} .creator-chip.active .creator-chip-avatar{border-color:var(--blue-brand);box-shadow:0 0 0 4px rgba(0,113,227,.15),0 0 24px rgba(0,113,227,.12);transform:scale(1.08)} .creator-chip.active .creator-chip-handle{color:var(--t1)} .creator-chip.active .creator-chip-subs{color:var(--blue-brand)} /* Showcase Stage */ .showcase-stage.open{opacity:1;transform:translateY(0);max-height:600px;overflow:visible} /* Marquee */ /* Unified dark background — no nth-child variation */ .section .showcase-card.active{border-color:rgba(41,151,255,.3);box-shadow:var(--shadow-hover)} @keyframes marquee-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} /* ═══ STEPS ═══ */ /* ═══ PORTFOLIO ═══ */ /* ═══ FEATURES ═══ */ /* ═══ COMPARISON TABLES ═══ */ /* Founders */ /* ═══ REVIEWS ═══ */ /* Featured Testimonial */ /* Mini Reviews */ /* ═══ STICKY CTA (Mobile) ═══ */ .sticky-cta.on{transform:translateY(0)} .sticky-cta .btn{height:48px;padding:0 var(--s3);font-size:16px;width:100%;max-width:300px} /* ═══ WEBSITE RESPONSIVE ═══ */ @media(max-width:1000px){.features-grid{grid-template-columns:repeat(2,1fr)}.portfolio-grid{grid-template-columns:repeat(4,1fr)}} @media(max-width:900px){.tables-grid{grid-template-columns:1fr}.mini-grid{grid-template-columns:repeat(2,1fr)}.showcase-videos{grid-template-columns:repeat(2,1fr)}} @media(max-width:768px){ .ws-page .container{padding:0 var(--s2)} .section{padding:60px 20px 40px} .hero{padding:60px 20px 40px} .hero-logo{height:44px;margin-bottom:var(--s2)} .hero-title .line2{font-size:.85em} .btn-lg{height:48px;padding:0 24px;font-size:16px} .btn-hero{height:48px;padding:0 28px;font-size:16px} .stats-row{gap:0;flex-wrap:wrap} .stat{padding:var(--s1) var(--s2)} .stat-value{font-size:14px} .stat-label{font-size:8px} .showcase-grid{grid-template-columns:1fr;max-width:340px;gap:var(--s2)} .showcase-card{padding:var(--s1) var(--s2) var(--s2)} .creator-rail{gap:var(--s2);padding:var(--s1) 0;justify-content:flex-start} .creator-chip{min-width:80px;padding:var(--s1)} .creator-chip-avatar{width:64px;height:64px} .creator-chip-handle{font-size:10px} .creator-chip-subs{font-size:11px} .showcase-stage.open{max-height:1400px} .showcase-videos{grid-template-columns:1fr;gap:var(--s2)} .showcase-meta-name{font-size:16px} .showcase-meta-focus{font-size:12px} .steps-grid{grid-template-columns:1fr;gap:var(--s2)} .portfolio-grid{grid-template-columns:repeat(3,1fr);gap:var(--s1)} .features-grid{grid-template-columns:1fr} .reviews-grid{grid-template-columns:repeat(2,1fr)} .mini-grid{grid-template-columns:1fr} .section-header{margin-bottom:var(--s3)} .section-cta{margin-top:var(--s3)} .sticky-cta{display:flex} .ws-page{padding-bottom:70px} .section::before{transform:scale(.6)} } @media(max-width:480px){ .ws-page .container{padding:0 var(--s2)} .stats-row .stat{width:33.33%;padding:var(--s1)} .stat+.stat::before{display:none} .reviews-grid{grid-template-columns:1fr;max-width:360px;margin:0 auto var(--s3)} .portfolio-grid{grid-template-columns:repeat(2,1fr)} .founders-row{gap:var(--s3)} .founder-avatar{width:72px;height:72px} .showcase-grid{max-width:300px} } .ws-page .cb-nav-link.active{color:var(--txt);font-weight:500;background:rgba(255,255,255,.12)} /* ── Start Free Trial CTA inside island ── */ /* ═══════════════════════════════════════════════════════════════ WEBSITE: SHARED FOOTER COMPONENT ═══════════════════════════════════════════════════════════════ */ .ws-page .cb-footer{ position:relative!important;width:100%!important;max-width:100%!important;margin:0 auto!important; background:transparent!important;border:none!important; border-top:none!important; border-radius:0!important;box-shadow:none!important; padding:var(--s6) var(--s4) var(--s4)!important;font-family:var(--font)!important; -webkit-font-smoothing:subpixel-antialiased!important;-moz-osx-font-smoothing:auto!important;overflow:hidden!important; } .ws-page .cb-footer>.cb-ft-grid,.ws-page .cb-footer>.cb-ft-divider,.ws-page .cb-footer>.cb-ft-legal{max-width:1200px;margin-left:auto;margin-right:auto} .ws-page .hero-title .accent{color:var(--blue-brand)} .ws-page .toggle{display:flex;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-pill);padding:var(--s0);position:relative} .ws-page .toggle-btn.active{color:var(--t1)} .ws-page .card-name{font-family:var(--font-display);font-size:28px;font-weight:500;letter-spacing:-.03em;margin-bottom:var(--s2)} .ws-page .features li.off{color:#6e6e73;text-decoration:line-through;text-decoration-color:rgba(255,255,255,.08)} .ws-page .features li.off .ck{color:var(--t3);opacity:.25} .ws-page .installment-note.show{opacity:1;transform:translateY(0)} .ws-page .section .toggle{background:var(--glass-bg);border-color:var(--glass-border)} .ws-page .section .toggle-btn.active{color:var(--t1)} .ws-page .section .card-name{color:var(--t1)} .ws-page .section .features li.off{color:var(--t2)} .ws-page .section .features li.off .ck{color:var(--t2)} /* Pricing Tokens (append to root) */ /* Animations */ @keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}} /* ═══ Website Responsive: Header + Footer + Pricing ═══ */ @media(max-width:900px){ .ws-page .cards{grid-template-columns:1fr;max-width:480px;margin:0 auto var(--s2)} .ws-page .card[data-tier="gold"]{order:-1} } @media(max-width:768px){ .ws-page .hero-title{white-space:normal} .ws-page .stats{flex-wrap:wrap;gap:var(--s1)} .ws-page .stat{min-width:calc(50% - 4px);flex:none;max-width:none} .ws-page .value-grid{grid-template-columns:1fr} .ws-page .vcard-peek{display:none} .ws-page .vcard-full{max-height:none;opacity:1} .ws-page .card-cta{height:48px} .ws-page .cta-pill{height:48px;padding:0 var(--s3)} .ws-page .cta-block h3{font-size:clamp(22px,5vw,32px)} /* Header mobile */ .ws-page .cb-header-bar{padding:12px 16px} .ws-page .cb-header{padding:3px!important;gap:2px!important;top:8px!important} .ws-page .cb-logo img{height:18px} .ws-page .cb-nav-link{padding:6px 10px!important;font-size:12px!important} .ws-page .cb-nav-cta{padding:6px 14px!important;font-size:12px!important} /* Footer mobile */ .ws-page .cb-footer{padding:var(--s4) var(--s3) var(--s3);border-radius:var(--r-lg)} .ws-page .cb-ft-grid{grid-template-columns:1fr;gap:var(--s3);margin-bottom:var(--s3)} .ws-page .cb-ft-brand{align-items:center;text-align:center} .ws-page .cb-ft-tagline{max-width:100%;text-align:center} .ws-page .cb-ft-social{justify-content:center} .ws-page .cb-ft-col{align-items:center;text-align:center} .ws-page .cb-ft-col-title{text-align:center} .ws-page .cb-ft-contact-item{text-align:center} .ws-page .cb-ft-hours{text-align:center} .ws-page .cb-ft-legal{justify-content:center;text-align:center} .ws-page .cb-ft-legal-links{justify-content:center} } @media(min-width:769px) and (max-width:1024px){ .ws-page .value-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:480px){ .ws-page .stat{min-width:calc(50% - 4px)} } /* ═══════════════════════════════════════════════════════ FAQ PAGE COMPONENTS ═══════════════════════════════════════════════════════ */ /* FAQ List */ /* FAQ Item (details element) */ .ws-page .faq-item{ position:relative!important;background:var(--glass-card-bg)!important;border:1px solid var(--glass-card-border)!important; border-top-color:var(--glass-card-rim)!important; border-radius:var(--r-lg)!important;padding:0!important;box-shadow:var(--glass-card-shadow)!important; transition:transform .08s var(--ease),box-shadow .08s var(--ease),border-color .08s var(--ease)!important; list-style:none!important; } .ws-page .faq-item::before{ content:''!important;position:absolute!important;top:0!important;left:5%!important;right:5%!important;height:1px!important; background:linear-gradient(90deg,transparent 3%,rgba(255,255,255,.35) 25%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.35) 75%,transparent 97%)!important; } .ws-page .faq-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover);border-color:rgba(0,113,227,.2)} .ws-page .faq-item[open]{border-color:rgba(0,113,227,.25)} .ws-page .faq-item[open] .faq-toggle::after{transform:rotate(90deg);opacity:0} .ws-page .faq-item[open] .faq-toggle::before{background:var(--blue-brand)} /* FAQ Slide Animation */ .ws-page .faq-item .faq-content{animation:faqSlideDown .08s var(--ease)} @keyframes faqSlideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}} .ws-page .section .faq-item{background:var(--glass-card-bg);border-color:var(--glass-card-border);border-top-color:var(--glass-card-rim);box-shadow:var(--glass-card-shadow)} .ws-page .section .faq-item:hover{border-color:rgba(41,151,255,.3);box-shadow:var(--shadow-hover)} .ws-page .section .faq-item[open]{border-color:rgba(41,151,255,.35)} .ws-page .section .faq-item::before{background:linear-gradient(90deg,transparent 3%,rgba(255,255,255,.35) 25%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.35) 75%,transparent 97%)} .ws-page .section .faq-item[open] .faq-toggle::before{background:var(--blue)} /* CTA Section */ /* btn-ghost (FAQ / general use) */ .ws-page .btn-ghost{ background:transparent!important;border:1px solid var(--glass-border)!important;color:var(--blue-brand)!important; font-family:var(--font)!important;font-size:16px!important;font-weight:500!important;height:56px!important;padding:0 28px!important; border-radius:var(--r-lg)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:var(--s1)!important; transition:all .08s var(--ease)!important;cursor:pointer!important; } .ws-page .btn-ghost:hover{background:rgba(0,113,227,.06);border-color:rgba(0,113,227,.35)} .ws-page .section .btn-ghost{color:var(--blue);border-color:rgba(41,151,255,.3)} .ws-page .section .btn-ghost:hover{background:rgba(41,151,255,.1);border-color:rgba(41,151,255,.5)} /* ═══ FAQ Responsive ═══ */ @media(max-width:768px){ .ws-page .faq-summary{padding:var(--s2)} .ws-page .faq-content{padding:0 var(--s2) var(--s2);padding-left:calc(var(--s2) + 36px + var(--s2))} .ws-page .faq-number{width:32px;height:32px;font-size:13px} .ws-page .faq-question{font-size:15px} .ws-page .faq-answer{font-size:14px} .ws-page .faq-toggle{width:24px;height:24px} .ws-page .faq-toggle::before{width:14px} .ws-page .faq-toggle::after{height:14px} } @media(max-width:480px){ .ws-page .faq-summary{gap:var(--s1)} .ws-page .faq-content{padding-left:calc(var(--s2) + 32px + var(--s1))} } /* ═══════════════════════════════════════════════════════ BOOKING PAGE COMPONENTS ═══════════════════════════════════════════════════════ */ /* Hero title accent (subtitle line) */ .ws-page .hero-title .accent{ display:block;color:#6e6e73 !important;font-weight:500;font-size:.85em; letter-spacing:-.02em!important;margin-top:var(--s1)!important; } .ws-page .booking-info .hero-title{margin-bottom:var(--s1);max-width:500px} /* Calendar Embed Wrapper */ /* ═══ Booking Responsive ═══ */ @media(max-width:900px){ .ws-page .booking-grid{grid-template-columns:1fr;gap:var(--s4)} .ws-page .booking-info{text-align:center;align-items:center} .ws-page .booking-info .hero-title{max-width:100%} .ws-page .booking-info .section-sub{margin-left:auto;margin-right:auto} .ws-page .checklist{max-width:520px;width:100%} .ws-page .checklist-item{text-align:left} } @media(max-width:768px){ .ws-page .cal-wrap iframe{min-height:620px} } @media(max-width:480px){ .ws-page .checklist-item{padding:12px} .ws-page .cal-wrap iframe{min-height:580px} } .ws-page .brand-slot img.active{opacity:.6} .ws-page .brand-slot:hover img.active{opacity:1} .ws-page .section .brand-slot img.active{opacity:.6} .ws-page .section .brand-slot:hover img.active{opacity:.85} /* ═══ Portfolio Responsive ═══ */ @media(max-width:1100px){ .ws-page .transform-grid{grid-template-columns:repeat(4,1fr)} .ws-page .video-grid{grid-template-columns:repeat(4,1fr)} } @media(max-width:768px){ .ws-page .transform-grid{grid-template-columns:repeat(3,1fr)} .ws-page .video-grid{grid-template-columns:repeat(3,1fr)} .ws-page .testimonials-grid{grid-template-columns:1fr} .ws-page .longform-videos{grid-template-columns:repeat(2,1fr)} .ws-page .brands-row{gap:var(--s3)} .ws-page .creators-row{gap:var(--s2)} .ws-page .creator-avatar{width:72px;height:72px} } @media(max-width:480px){ .ws-page .transform-grid{grid-template-columns:repeat(2,1fr)} .ws-page .video-grid{grid-template-columns:repeat(2,1fr)} .ws-page .longform-videos{grid-template-columns:1fr} } /* ═══ Contact Details Responsive ═══ */ @media(max-width:860px){ .ws-page .contact-grid{grid-template-columns:1fr;gap:var(--s4)} .ws-page .contact-info{padding-top:0;text-align:center;align-items:center} .ws-page .contact-subtitle{max-width:100%} .ws-page .checklist{max-width:480px;width:100%} .ws-page .check-item{text-align:left} } @media(max-width:480px){ .ws-page .contact-title{font-size:clamp(26px,7vw,36px)} .ws-page .form-wrap{padding:var(--s3)} .ws-page .check-item{padding:12px 14px} } @keyframes checkPop{ 0%{transform:scale(0)!important;opacity:0} 50%{transform:scale(1.15)} 100%{transform:scale(1)!important;opacity:1} } .ws-page .step{display:flex;align-items:flex-start;gap:var(--s3)} .ws-page .step + .step{margin-top:var(--s4)} @keyframes fadeUp{to{opacity:1;transform:translateY(0)}} /* ═══ Confirmation Responsive ═══ */ @media(max-width:600px){ .ws-page .confirmation-section{padding:var(--s8) var(--s2)} .ws-page .steps-card{padding:var(--s4) var(--s3)} .ws-page .step{gap:var(--s2)} .ws-page .confirmation-section::before{width:260px;height:260px;top:-80px;right:-40px} } /* ═══ Legal Responsive ═══ */ @media(max-width:768px){ .ws-page .legal-section h2{font-size:22px} .ws-page .contact-box{padding:var(--s3)} .ws-page .legal-section{margin-bottom:var(--s2)} .ws-page .btn-row{flex-direction:column} .ws-page .btn-row .btn{width:100%;justify-content:center} .ws-page .plan-table th,.ws-page .plan-table td{padding:var(--s1) var(--s2);font-size:14px} .ws-page .legal-section{padding:var(--s2)} } /* ── Careers Hero ── */ .ws-page .hero .hero-label{ font-family:var(--font)!important;font-size:13px!important;font-weight:500!important; text-transform:uppercase!important;letter-spacing:2px!important;color:var(--blue)!important; margin-bottom:var(--s3)!important; } .ws-page .roles-section .hero-sub{ font-size:clamp(16px,1.8vw,20px)!important;font-weight:400!important; color:rgba(255,255,255,0.58)!important;max-width:100%!important;margin:0 auto!important; line-height:1.5!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important; } .ws-page .hero .hero-pill{ display:inline-flex!important;align-items:center!important;gap:6px!important; padding:var(--s1) 16px!important;border-radius:var(--r-pill,100px)!important; border:1px solid rgba(255,255,255,0.15)!important; background:rgba(255,255,255,0.06)!important; font-family:var(--font)!important;font-size:13px!important;font-weight:500!important; color:rgba(255,255,255,0.7)!important;white-space:nowrap!important; } .ws-page .hero .hero-pill::before{display:none} .ws-page .wizard-overlay.active{display:flex} @keyframes wIn{ from{opacity:0;transform:translateY(28px) scale(0.96)} to{opacity:1;transform:translateY(0) scale(1)} } /* ── Careers Form Controls ── */ .ws-page .form-group{margin-bottom:var(--s3)} .ws-page .form-label{ display:block!important;font-family:var(--font)!important;font-size:13px!important; font-weight:500!important;color:var(--t1)!important;margin-bottom:6px!important;letter-spacing:-0.01em!important; } .ws-page .form-input,.ws-page .form-select,.ws-page .form-textarea{ width:100%!important;padding:11px 14px!important; font-family:var(--font)!important;font-size:15px!important;color:var(--t1)!important; background:var(--glass-bg-alt)!important;border:1px solid var(--glass-border)!important; border-radius:var(--r-lg)!important;outline:none!important; transition:border-color 80ms var(--ease),box-shadow 80ms var(--ease)!important; -webkit-appearance:none!important; } .ws-page .form-input:focus,.ws-page .form-select:focus,.ws-page .form-textarea:focus{ border-color:var(--blue-brand)!important; box-shadow:0 0 0 3px rgba(0,113,227,0.12)!important; background:var(--txt)!important; } .ws-page .form-input::placeholder,.ws-page .form-textarea::placeholder{color:var(--t3)} .ws-page .form-input.err,.ws-page .form-textarea.err,.ws-page .form-select.err{border-color:var(--red)} .ws-page .radio-opt.sel{border-color:var(--blue-brand);background:rgba(0,113,227,0.055)} .ws-page .radio-opt.sel .radio-dot{border-color:var(--blue-brand)} .ws-page .radio-opt.sel .radio-dot-inner{opacity:1;transform:scale(1)} .ws-page .chip.sel{background:var(--blue-brand);border-color:var(--blue-brand);color:var(--txt)} .ws-page .check-opt.sel{border-color:var(--blue-brand);background:rgba(0,113,227,0.04)} .ws-page .check-opt.sel .check-box{background:var(--blue-brand);border-color:var(--blue-brand)} .ws-page .check-opt.sel .check-box::after{content:'\2713'} /* ── Careers Animations ── */ @keyframes shake{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(3px)} } /* ── Careers Responsive ── */ @media(max-width:768px){ .ws-page .careers-nav{padding:0 var(--s4)} .ws-page .hero{padding:60px 20px 40px} .ws-page .roles-section{padding:60px 20px 40px} .ws-page .roles-grid{grid-template-columns:1fr} .ws-page .wizard-body{padding:var(--s4)} .ws-page .wizard-header{padding:var(--s3) var(--s4)} .ws-page .wizard-footer{padding:var(--s3) var(--s4);gap:var(--s2)} .ws-page .form-row{grid-template-columns:1fr} } @media(prefers-reduced-motion:reduce){ .ws-page *,.ws-page *::before,.ws-page *::after{animation-duration:0s !important;transition-duration:0s !important} } /* ── Header Responsive ── */ @media(max-width:768px){ .cb-header-inner{padding:0 var(--s3);height:56px} .cb-logo img{height:22px} .cb-nav{display:none} .cb-hamburger{display:flex} .cb-mobile-nav{display:flex} } /* ═══════════════════════════════════════════════════════════════════ FOOTER COMPONENT (GHL Embed Partial) ═══════════════════════════════════════════════════════════════════ */ /* ── GHL Text Color Nuclear Override (Dark — scoped to footer) ── */ #cb-footer .row,#cb-footer .col-lg-12,#cb-footer .col-lg-6, #cb-footer .col-md-12,#cb-footer .col-sm-12, #cb-footer [class*="hl_"],#cb-footer [class*="col-"], #cb-footer [id*="section"],#cb-footer [id*="row"]{ color:var(--ft-text) !important; font-family:var(--font) !important; } /* ── Footer Tokens ── */ .cb-footer{ --ft-bg:transparent; --ft-text:#f5f5f7;--ft-text2:rgba(255,255,255,.65);--ft-text3:rgba(255,255,255,.4); --ft-link:var(--blue);--ft-link-hover:var(--blue-hv); --ft-icon:rgba(255,255,255,.5);--ft-icon-hover:var(--blue); --ft-divider:rgba(255,255,255,.08); } /* ── Footer Container ── */ .cb-footer{ position:relative; width:100%; max-width:1200px; margin:0 auto; background:var(--ft-bg); padding:var(--s8) var(--s6) var(--s4); font-family:var(--font); -webkit-font-smoothing:subpixel-antialiased; -moz-osx-font-smoothing:auto; overflow:hidden; color:var(--ft-text); } /* Liquid glass bubble — subtle radial glow */ .cb-footer::before{ content:none; position:absolute; top:-120px; left:50%; transform:translateX(-50%); width:600px; height:600px; background:radial-gradient(circle,rgba(41,151,255,.02) 0%,transparent 70%); pointer-events:none; z-index:0; } /* ── Footer Responsive: Tablet ── */ @media(max-width:900px){ .cb-ft-grid{ grid-template-columns:repeat(4, 1fr); gap:var(--s3); } } /* ── Footer Responsive: Mobile ── */ @media(max-width:600px){ .cb-footer{ padding:var(--s6) var(--s3) var(--s3); } .cb-ft-logo{ height:30px; } .cb-ft-grid{ grid-template-columns:1fr 1fr; gap:var(--s4) var(--s3); margin-bottom:var(--s4); } .cb-ft-social{ justify-content:flex-start; } .cb-ft-bottom{ flex-direction:column; align-items:flex-start; gap:var(--s1); } .cb-ft-legal-links{ justify-content:flex-start; } } /* Hero Title (qualification-specific override) */ .ws-page .qualification-section .hero-title{ font-family:var(--font-display)!important; font-size:clamp(30px,4.5vw,56px)!important; font-weight:500!important; letter-spacing:-.04em!important; color:var(--t1) !important; line-height:1.08!important; } .ws-page .hero-title .line-two{ display:block!important; color:var(--t2)!important; font-weight:500!important; font-size:.85em!important; } /* ── Qualification Responsive ── */ @media(max-width:900px){ .ws-page .qualification-container{ grid-template-columns:1fr!important; gap:var(--s6)!important; } .ws-page .qualification-info{ padding-top:0!important; text-align:center!important; align-items:center!important; } .ws-page .step-badge{ align-self:center!important; } .ws-page .qualification-subtitle{ max-width:560px!important; } .ws-page .form-wrap{ padding:var(--s3)!important; } } @media(max-width:600px){ .ws-page .qualification-section{ padding:var(--s6) var(--s2)!important; } .ws-page .checklist-item{ padding:14px var(--s2)!important; } .ws-page .form-wrap{ padding:var(--s2)!important; } } /* ═══════════════════════════════════════════════════════════════════ FRAMELAB REVIEW TOOLBOX — Portal Blueprint Demo Scoped to #panel-portal so it only renders inside the blueprint. Copied from portal/assets/design-system.css (.pipeline-page scope). ═══════════════════════════════════════════════════════════════════ */ /* Dock bubble — glass morphism container */ #panel-portal .dock-bubble{width:100%;max-width:640px;background:linear-gradient(135deg,rgba(22,24,30,.96) 0%,rgba(14,16,22,.98) 50%,rgba(18,20,26,.97) 100%);border:1px solid rgba(255,255,255,.16);border-top-color:rgba(255,255,255,.25);border-radius:var(--r-island);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(255,255,255,.03),0 2px 4px rgba(0,0,0,.3),0 8px 32px -4px rgba(0,0,0,.5);padding:var(--s1) 14px 10px;display:flex;flex-direction:column;gap:0;position:relative} /* Play button */ #panel-portal .dk-play{flex-shrink:0;width:24px;height:24px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:var(--txt);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,transform .15s,border-color .15s} #panel-portal .dk-play:hover{background:rgba(255,255,255,.16);transform:scale(1.08);border-color:rgba(255,255,255,.24)} #panel-portal .dk-play svg{width:10px;height:10px;margin-left:1px} /* Video timeline */ #panel-portal .dk-timeline{flex:1;min-width:0;height:24px;display:flex;align-items:center;padding:0 4px} #panel-portal .dk-timeline-track{width:100%;height:4px;border-radius:2px;background:rgba(255,255,255,.1);position:relative;cursor:pointer} #panel-portal .dk-timeline-bar{height:100%;border-radius:2px;background:var(--blue);position:relative} #panel-portal .dk-timeline-head{position:absolute;top:50%;transform:translate(-50%,-50%);left:35%;width:10px;height:10px;border-radius:50%;background:var(--txt);box-shadow:0 0 6px rgba(41,151,255,.4);transition:transform .15s} #panel-portal .dk-timeline-track:hover .dk-timeline-head{transform:translate(-50%,-50%) scale(1.3)} /* Row 2: Timestamp | Note + Send | 5 tool icons */ /* Timestamp badge */ #panel-portal .dk-ts{font-size:11px;font-weight:500;color:var(--blue);font-family:var(--mono,'SF Mono',monospace);min-width:40px;text-align:center;flex-shrink:0} /* Revision note input */ #panel-portal .dk-inp-wrap{flex:1;min-width:0;display:flex;align-items:center;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-xl);padding:0 12px;transition:border-color .2s var(--ease)} #panel-portal .dk-inp-wrap:focus-within{border-color:rgba(41,151,255,.3)} #panel-portal .dk-textarea{flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--txt);font-size:12px;font-family:var(--font);padding:10px 0;resize:none;line-height:1.4} #panel-portal .dk-textarea::placeholder{color:var(--txt4)} #panel-portal .dk-send{width:28px;height:28px;border-radius:var(--r-md);border:none;background:linear-gradient(180deg,#2aaaff 0%,#1090e8 100%);color:var(--txt);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s;flex-shrink:0} #panel-portal .dk-send:hover{transform:scale(1.05)} #panel-portal .dk-send svg{width:13px;height:13px} /* Separator between input and tools */ #panel-portal .dk-sep{width:1px;height:24px;margin:0 2px;flex-shrink:0;background:linear-gradient(180deg,transparent,rgba(255,255,255,.1),transparent)} /* Mode buttons */ #panel-portal .dk-btn{flex:none;width:30px;height:30px;min-width:0;border-radius:var(--r-md);border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:var(--txt3);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:0;transition:background .1s,border-color .1s,color .1s,transform .1s;box-shadow:0 1px 2px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.06)} #panel-portal .dk-btn:hover{background:rgba(255,255,255,.14);color:var(--txt);transform:scale(1.08);border-color:rgba(255,255,255,.2)} #panel-portal .dk-btn.active{background:linear-gradient(180deg,rgba(41,151,255,.18),rgba(41,151,255,.08));color:var(--blue);border-color:rgba(41,151,255,.3);box-shadow:inset 0 0 8px rgba(41,151,255,.12),0 0 10px rgba(41,151,255,.1)} #panel-portal .dk-btn svg{width:14px;height:14px} /* 3D Rotary knobs */ #panel-portal .dk-knob{position:relative;width:24px;height:24px;cursor:grab;user-select:none;flex-shrink:0;margin-bottom:var(--s1)} #panel-portal .dk-knob-body{width:24px;height:24px;border-radius:50%;background:linear-gradient(145deg,rgba(40,42,50,.95),rgba(22,24,30,.98));border:1px solid rgba(255,255,255,.14);box-shadow:0 2px 8px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 1px rgba(0,0,0,.15);position:relative;transition:transform .06s var(--ease),border-color .1s;} #panel-portal .dk-knob:hover .dk-knob-body{transform:scale(1.12);border-color:rgba(255,255,255,.22);box-shadow:0 4px 12px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.15),0 0 10px rgba(255,255,255,.05)} #panel-portal .dk-knob-tick{position:absolute;width:2px;height:5px;border-radius:1px;background:rgba(255,255,255,.7);top:2px;left:50%;margin-left:-1px;transform-origin:1px 10px;box-shadow:0 0 3px rgba(255,255,255,.3)} #panel-portal .dk-knob-lbl{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:3px;font-size:9px;font-weight:500;color:var(--txt4);font-family:var(--mono,'SF Mono',monospace);white-space:nowrap;pointer-events:none;letter-spacing:.3px;line-height:1} /* Drawing toolbar */ #panel-portal .draw-bar{display:flex;align-items:center;gap:3px;padding:var(--s0) 6px;background:linear-gradient(180deg,rgba(38,38,40,.92),rgba(22,22,24,.95));border:1px solid rgba(255,255,255,.12);border-top-color:rgba(255,255,255,.16);border-radius:14px;box-shadow:0 8px 32px rgba(0,0,0,.5)} #panel-portal .draw-tool{width:32px;height:32px;border-radius:var(--r-md);border:1px solid transparent;background:transparent;color:var(--txt3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .08s,border-color .08s,color .08s} #panel-portal .draw-tool:hover{background:rgba(255,255,255,.1);color:var(--txt)} #panel-portal .draw-tool.active{background:rgba(41,151,255,.15);color:var(--blue);border-color:rgba(41,151,255,.3)} #panel-portal .draw-tool svg{width:16px;height:16px} #panel-portal .draw-sep{width:1px;height:20px;background:rgba(255,255,255,.1);margin:0 2px} #panel-portal .draw-colors{display:flex;gap:3px;align-items:center} #panel-portal .draw-color{width:20px;height:20px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform .15s,border-color .15s} #panel-portal .draw-color:hover{transform:scale(1.15)} #panel-portal .draw-color.active{border-color:var(--txt);transform:scale(1.15)} #panel-portal .draw-sizes{display:flex;gap:var(--s0);align-items:center} #panel-portal .draw-size{border-radius:50%;background:var(--txt2);cursor:pointer;transition:opacity .15s;opacity:.4;border:none} #panel-portal .draw-size:hover,#panel-portal .draw-size.active{opacity:1} /* Recording indicator */ #panel-portal .rec-indicator{display:inline-flex;align-items:center;gap:var(--s1);padding:6px 14px;background:rgba(192,57,43,.15);border:1px solid rgba(192,57,43,.3);border-radius:var(--r-pill)} #panel-portal .rec-dot{width:8px;height:8px;border-radius:50%;background:var(--red);animation:flRecPulse 1s ease infinite} #panel-portal .rec-label{font-size:11px;font-weight:500;color:var(--red);text-transform:uppercase;letter-spacing:.5px} #panel-portal .rec-timer{font-size:11px;font-weight:500;color:var(--txt);font-family:var(--mono,'SF Mono',monospace);font-variant-numeric:tabular-nums} #panel-portal .rec-stop{width:24px;height:24px;border-radius:var(--r-sm);border:none;background:var(--red);color:var(--txt);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s} #panel-portal .rec-stop:hover{transform:scale(1.1)} #panel-portal .rec-stop svg{width:12px;height:12px} @keyframes flRecPulse{0%,100%{opacity:1}50%{opacity:.3}} /* Audio waveform */ #panel-portal .audio-wave{display:inline-flex;align-items:center;gap:2px;height:20px} #panel-portal .audio-wave span{width:3px;border-radius:2px;background:var(--red);animation:flWave 1.2s ease-in-out infinite} #panel-portal .audio-wave span:nth-child(1){height:8px;animation-delay:0s} #panel-portal .audio-wave span:nth-child(2){height:14px;animation-delay:.1s} #panel-portal .audio-wave span:nth-child(3){height:18px;animation-delay:.2s} #panel-portal .audio-wave span:nth-child(4){height:12px;animation-delay:.04s} #panel-portal .audio-wave span:nth-child(5){height:6px;animation-delay:.4s} @keyframes flWave{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}} /* Right-click context menu — 2-row layout */ #panel-portal .rv-ctx{width:auto;padding:10px;background:linear-gradient(180deg,rgba(38,38,40,.92),rgba(22,22,24,.95));border:1px solid rgba(255,255,255,.14);border-top-color:rgba(255,255,255,.22);border-radius:var(--r-island);box-shadow:0 16px 48px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.3);display:flex;flex-direction:column;gap:var(--s1)} /* Row 1: timestamp + input + close */ #panel-portal .rv-ctx-row1{display:flex;align-items:center;justify-content:space-between;gap:6px} #panel-portal .rv-ctx-ts{font-size:11px;font-weight:500;color:var(--blue);font-family:var(--mono,'SF Mono',monospace);padding:3px 10px;background:rgba(41,151,255,.12);border-radius:var(--r-md);font-variant-numeric:tabular-nums;flex-shrink:0} #panel-portal .rv-ctx-close{width:22px;height:22px;border:none;background:rgba(255,255,255,.06);color:var(--txt3);border-radius:7px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .08s,color .08s} #panel-portal .rv-ctx-close:hover{background:rgba(192,57,43,.2);color:var(--red)} #panel-portal .rv-ctx-row2{display:flex;align-items:center;gap:6px} /* Row 2: icon-only mode buttons */ #panel-portal .rv-ctx-btn{width:34px;height:34px;border-radius:var(--r-lg);border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);color:var(--txt3);cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;transition:background .1s,color .1s,border-color .1s} #panel-portal .rv-ctx-btn:hover{background:rgba(255,255,255,.1);color:var(--txt)} #panel-portal .rv-ctx-btn.active{background:rgba(41,151,255,.12);color:var(--blue);border-color:rgba(41,151,255,.25)} #panel-portal .rv-ctx-btn svg{width:16px;height:16px} /* Hover label — appears below on hover */ #panel-portal .rv-ctx-btn:hover .rv-ctx-lbl{opacity:1} /* Input wrap */ #panel-portal .rv-ctx-inp-wrap{display:flex;align-items:center;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg);padding:0 10px;min-width:0;width:154px} #panel-portal .rv-ctx-textarea{flex:1;background:transparent;border:none;outline:none;color:var(--txt);font-size:11px;font-family:var(--font);padding:var(--s1) 0;resize:none;line-height:1.4;min-width:0} #panel-portal .rv-ctx-textarea::placeholder{color:var(--txt4)} #panel-portal .rv-ctx-send{width:26px;height:26px;border-radius:var(--r-md);border:none;background:linear-gradient(180deg,#2aaaff 0%,#1090e8 100%);color:var(--txt);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0} #panel-portal .rv-ctx-send svg{width:12px;height:12px} /* Stage badge row — sits under the page title */ /* Video player container */ /* ── Video-overlay timeline row — sits inside the 16:9 video area at the bottom ── */ #panel-portal .ps-vid-controls .dk-play{width:30px;height:30px;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18)} #panel-portal .ps-vid-controls .dk-play svg{width:12px;height:12px} #panel-portal .ps-vid-controls .dk-timeline{flex:1;min-width:0;height:30px;display:flex;align-items:center;padding:0 2px} #panel-portal .ps-vid-controls .dk-timeline-track{height:5px;border-radius:2.5px} #panel-portal .ps-vid-controls .dk-timeline-head{width:12px;height:12px} #panel-portal .ps-vid-controls .dk-knob{margin-bottom:0;width:28px;height:28px} #panel-portal .ps-vid-controls .dk-knob-body{width:28px;height:28px} #panel-portal .ps-vid-controls .dk-knob-tick{height:6px;top:3px;transform-origin:1px 11px} #panel-portal .ps-vid-controls .dk-knob-lbl{font-size:8px;margin-top:2px} /* Thread panel — right side */ #panel-portal .ps-thread{width:240px;flex-shrink:0;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:14px;display:flex;flex-direction:column;overflow:hidden} #panel-portal .ps-th-hdr{padding:14px 16px 10px;font-size:13px;font-weight:500;color:var(--txt);border-bottom:1px solid rgba(255,255,255,.06);letter-spacing:-.2px} /* Thread sections */ #panel-portal .ps-th-section.open .ps-th-toggle svg{transform:rotate(90deg)} #panel-portal .ps-th-section.open .ps-th-body{max-height:200px} /* ── Project Card Island — top center of video player ── */ #panel-portal .ps-card-island{position:absolute;top:10px;left:50%;transform:translateX(-50%); display:flex;align-items:center;gap:var(--s1);padding:5px 12px; background:rgba(8,8,12,.82);border:1px solid rgba(255,255,255,.1); border-radius:var(--r-xl);backdrop-filter:none;-webkit-backdrop-filter:none;z-index:2} /* Request type — SF or LF */ #panel-portal .ps-ci-type{font-size:9px;font-weight:500;letter-spacing:.6px;padding:2px 6px;border-radius:var(--r-xs); color:var(--txt2);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)} #panel-portal .ps-ci-type[data-type="SF"]{color:var(--blue);background:rgba(41,151,255,.14);border-color:rgba(41,151,255,.25); } #panel-portal .ps-ci-type[data-type="LF"]{color:var(--purple,#b48eff);background:rgba(180,142,255,.14);border-color:rgba(180,142,255,.25); } /* Tier badge — T1, T2, T3 */ #panel-portal .ps-ci-tier{font-size:8px;font-weight:500;letter-spacing:.4px;padding:2px 5px;border-radius:var(--r-xs)} #panel-portal .ps-ci-tier[data-tier="1"]{color:var(--green);background:rgba(126,203,161,.12)} #panel-portal .ps-ci-tier[data-tier="2"]{color:var(--blue);background:rgba(41,151,255,.12)} #panel-portal .ps-ci-tier[data-tier="3"]{color:var(--orange);background:rgba(255,159,67,.12)} /* Version nav — arrows + number */ #panel-portal .ps-ci-ver{font-size:10px;font-weight:500;color:var(--txt);min-width:18px;text-align:center} /* Blueprint icon — pill matching type/tier */ /* Health grade — pill matching type/tier */ #panel-portal .ps-ci-grade{font-size:9px;font-weight:500;padding:2px 6px;border-radius:var(--r-xs);border:1px solid transparent} #panel-portal .ps-ci-grade[data-grade="A"]{color:var(--green);background:rgba(126,203,161,.12);border-color:rgba(126,203,161,.18)} #panel-portal .ps-ci-grade[data-grade="B"]{color:var(--blue);background:rgba(41,151,255,.12);border-color:rgba(41,151,255,.18)} #panel-portal .ps-ci-grade[data-grade="C"]{color:var(--orange);background:rgba(255,159,67,.12);border-color:rgba(255,159,67,.18)} #panel-portal .ps-ci-grade[data-grade="D"],#panel-portal .ps-ci-grade[data-grade="F"]{color:#ff5c5c;background:rgba(255,92,92,.12);border-color:rgba(255,92,92,.18)} /* ── Pipeline cards — full-cover image with overlay ── */ #panel-portal .pipeline-card{overflow:hidden;border-radius:var(--r-lg);padding:0!important; position:relative;min-height:160px;background-size:cover;background-position:center; background-color:rgba(255,255,255,.03);display:flex;flex-direction:column;justify-content:flex-end; cursor:grab;transition:transform 60ms var(--ease),box-shadow 60ms var(--ease),filter 60ms; box-shadow:0 2px 12px rgba(0,0,0,.5),0 0 20px rgba(15,30,60,.25)} #panel-portal .pipeline-card:active{cursor:grabbing;transform:scale(.98);transition-duration:30ms} #panel-portal .pipeline-card[draggable="true"]:hover{transform:scale(1.03); box-shadow:0 6px 28px rgba(0,0,0,.5),0 0 32px rgba(41,151,255,.12)} #panel-portal .ps-kanban-col.drag-over{outline:1px solid rgba(41,151,255,.3);outline-offset:-1px;border-radius:var(--r-lg)} /* Gradient overlay — more intense cinematic look */ #panel-portal .pipeline-card::before{content:'';position:absolute;inset:0; background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.35) 35%,rgba(0,0,0,.92) 100%); transition:background 80ms var(--ease);z-index:1} #panel-portal .pipeline-card:hover::before{background:linear-gradient(180deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,.25) 30%,rgba(0,0,0,.85) 100%)} /* Top-edge glare — premium glass highlight */ #panel-portal .pipeline-card::after{content:'';position:absolute;top:0;left:0;right:0;height:40%; background:linear-gradient(180deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.02) 40%,transparent 100%); z-index:1;pointer-events:none;transition:opacity 80ms} #panel-portal .pipeline-card:hover::after{opacity:.7} #panel-portal .pipe-bottom{position:relative;z-index:2;padding:0 8px 6px;display:flex;flex-direction:column;gap:var(--s0)} #panel-portal .pipe-bottom-row{display:flex;align-items:center;justify-content:space-between;gap:6px} #panel-portal .pipe-name{font:500 10px/1.3 var(--font);color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} #panel-portal .pipe-timer{font:500 8px/1 var(--mono,'SF Mono',monospace);color:var(--orange);white-space:nowrap;flex-shrink:0; background:rgba(0,0,0,.55);border:1px solid rgba(255,159,67,.15);padding:3px 7px;border-radius:var(--r-pill); backdrop-filter:none;-webkit-backdrop-filter:none} #panel-portal .pipe-tl{height:2px;background:rgba(255,255,255,.12);border-radius:1px;overflow:hidden} #panel-portal .pipe-tl-bar{height:100%;background:rgba(255,255,255,.6);border-radius:1px;transition:width .3s var(--ease)} #panel-portal .ps-dock-under .dk-btn{width:30px;height:30px} #panel-portal .ps-dock-under .dk-btn svg{width:14px;height:14px} #panel-portal .ps-dock-under .dk-send{width:30px;height:30px} #panel-portal .ps-dock-under .dk-ts{font-size:12px;min-width:44px} /* ── Chat messages in thread ── */ /* Chat input (shell) */ #panel-portal .ps-chat-input{display:flex;gap:5px;padding:var(--s1) 10px;border-top:none!important;align-items:center} #panel-portal .ps-chat-input .chat-pill{flex:1;display:flex;align-items:center;gap:3px;min-width:0; background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06); border-radius:14px;padding:3px 5px 3px 8px} #panel-portal .ps-chat-input .chat-pill:focus-within{border-color:rgba(255,255,255,.12)} #panel-portal .ps-chat-input input::placeholder{color:var(--txt4)} #panel-portal .ps-chat-input .chat-voice{width:20px;height:20px;border-radius:50%;border:none;background:rgba(255,255,255,.06); color:var(--txt4);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0} #panel-portal .ps-chat-plus{width:22px;height:22px;border-radius:var(--r-sm);border:none;background:rgba(255,255,255,.06); color:var(--txt3);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s;flex-shrink:0;font-size:12px} #panel-portal .ps-chat-plus:hover{background:rgba(255,255,255,.12);color:var(--txt)} #panel-portal .ps-chat-input .chat-emoji{width:22px;height:22px;border-radius:var(--r-sm);border:none;background:rgba(255,255,255,.04); color:var(--txt4);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0} /* ── Pipeline kanban inside shell ── */ #panel-portal .ps-pipeline-kanban{display:flex;gap:var(--s1);flex:1;min-height:0;overflow-x:auto} #panel-portal .ps-kanban-col{flex:1;min-width:100px;display:flex;flex-direction:column;gap:var(--s1); border-right:1px solid rgba(255,255,255,.06);padding:0 6px} #panel-portal .ps-kanban-col:last-child{border-right:none;padding-right:0} #panel-portal .ps-kanban-col:first-child{padding-left:0} #panel-portal .ps-kanban-hdr{display:flex;align-items:center;gap:5px;font:500 9px/1 var(--font); text-transform:uppercase;letter-spacing:.5px;color:var(--txt3);padding-bottom:6px;flex-shrink:0} #panel-portal .ps-kanban-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0} #panel-portal .ps-kanban-count{font-size:8px;color:var(--txt4);margin-left:auto; background:rgba(255,255,255,.06);padding:1px 5px;border-radius:var(--r-xs)} #panel-portal .ps-pipeline-shell .pipeline-card{min-height:140px} /* Shell variant note */ /* ── Empty template shell — shows page chrome with empty content area ── */ /* ── Info Dot (tutorial hover icon) ── */ /* ── Health Timer Icons (color-coded by project grade) ── */ #panel-portal .health-timer{display:inline-flex;align-items:center;gap:5px; padding:var(--s0) 10px;border-radius:var(--r-pill);background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.08);backdrop-filter:none} #panel-portal .ht-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0; animation:ht-pulse 2s ease-in-out infinite} #panel-portal .ht-time{font:500 9px/1 var(--mono,'SF Mono',monospace);color:var(--txt2); font-variant-numeric:tabular-nums;letter-spacing:.3px} #panel-portal .health-timer[data-health="A"] .ht-dot{background:#34d399;box-shadow:0 0 6px rgba(52,211,153,.5)} #panel-portal .health-timer[data-health="B"] .ht-dot{background:#86efac;box-shadow:0 0 6px rgba(134,239,172,.5)} #panel-portal .health-timer[data-health="C"] .ht-dot{background:#fbbf24;box-shadow:0 0 6px rgba(251,191,36,.5)} #panel-portal .health-timer[data-health="D"] .ht-dot{background:var(--orange);box-shadow:0 0 6px rgba(255,159,67,.5)} #panel-portal .health-timer[data-health="F"] .ht-dot{background:var(--red);box-shadow:0 0 6px rgba(192,57,43,.5)} @keyframes ht-pulse{0%,100%{opacity:1}50%{opacity:.4}} @media(max-width:768px){.ws-page .co-layout{grid-template-columns:1fr}} .ws-page .co-tab.active{border-color:var(--blue);background:rgba(41,151,255,.1);box-shadow:0 0 16px rgba(41,151,255,.15)} /* Larger feature/hero containers — subtle fade only */ .ws-page .checklist-grid > .glass-card, .ws-page .features-grid > .glass-card, .ws-page .transform-card, .ws-page .why-card { -webkit-mask-image:linear-gradient(180deg,black 0%,black 72%,rgba(0,0,0,.8) 88%,rgba(0,0,0,.4) 100%)!important; mask-image:linear-gradient(180deg,black 0%,black 72%,rgba(0,0,0,.8) 88%,rgba(0,0,0,.4) 100%)!important; } /* ────────────────────────────────────────────────────────────── */ /* ── PERFORMANCE ─────────────────────────────────────────────── */ /* Promote animated/transitioning elements to their own layer */ .ws-page .glass-card, .ws-page .pricing-card, .ws-page .co-plan, .ws-page .btn, .ws-page .cb-nav-link{ will-change:transform!important; } /* Contain paint to card bounds */ .ws-page .glass-card, .ws-page .pricing-card{ contain:layout style!important; } /* Instant click response */ .ws-page a, .ws-page button, .ws-page .btn{ touch-action:manipulation!important; -webkit-tap-highlight-color:transparent!important; } /* ────────────────────────────────────────────────────────────── */ /* ── BLUE BUTTONS — electric with glow ── */ .ws-page .btn-cta, .ws-page .btn-primary, .ws-page .hero-cta-btn, .ws-page a.btn-primary, .ws-page button.btn-primary, .ws-page .btn[data-color="blue"], .ws-page .pricing-card.featured .plan-btn, .ws-page .co-form-btn, .ws-page .qual-btn, .ws-page .booking-btn, .ws-page .confirmation-btn { background:linear-gradient(180deg,#2aaaff 0%,#1090e8 100%)!important; color:var(--txt) !important; border:none !important; font-weight:500!important; box-shadow:0 0 0 1px rgba(26,160,255,.5),0 4px 12px rgba(0,140,255,.5),0 8px 32px rgba(0,130,255,.4),0 16px 60px rgba(0,110,255,.3),0 24px 80px rgba(0,90,220,.2),inset 0 1px 0 rgba(255,255,255,.25)!important; } /* Catch-all: any .btn-g5 or primary action buttons inside ws-page */ .ws-page .btn-g5, .ws-page .btn-blue, .ws-page input[type="submit"], .ws-page button[type="submit"] { background:linear-gradient(180deg,#2aaaff 0%,#1090e8 100%)!important; color:var(--txt) !important; border:none !important; font-weight:500!important; box-shadow:0 0 0 1px rgba(26,160,255,.5),0 4px 12px rgba(0,140,255,.5),0 8px 32px rgba(0,130,255,.4),0 16px 60px rgba(0,110,255,.3),0 24px 80px rgba(0,90,220,.2),inset 0 1px 0 rgba(255,255,255,.25)!important; } /* ────────────────────────────────────────────────────────────── */ /* ── MOBILE OVERHAUL ─────────────────────────────────────────── */ @media(max-width:768px){ /* ── CONTAINERS: kill wide side padding ── */ .ws-page .container{padding:0 16px!important} .ws-page .section{padding:var(--s6) 16px!important} .ws-section-dark{padding:var(--s6) 16px!important} .ws-page .hero-section,.ws-page .hero{padding:60px 16px 40px!important} /* ── HEADER ── */ .ws-page .cb-header-bar{padding:12px 16px!important} .ws-page .cb-header-bar .cb-logo{left:16px!important} .ws-page .cb-header-bar .cb-portal-login{right:16px!important} .cb-nav-links,.ws-page nav.cb-header .cb-nav-link:not(.cb-nav-cta){display:none!important} .ws-page .cb-header-bar nav.cb-header{gap:var(--s1)} /* ── FOOTER ── */ .ws-page .cb-footer,.cb-footer{padding:var(--s5) 16px 24px!important} .ws-page .cb-ft-grid{grid-template-columns:1fr!important;gap:var(--s4)!important} .ws-page .cb-ft-legal{flex-direction:column!important;gap:var(--s1)!important;text-align:center!important;padding:0 16px!important} /* ── HERO TYPOGRAPHY ── */ .ws-page .hero-title,.ws-page .section-title{font-size:clamp(26px,8vw,40px)!important;letter-spacing:-.03em!important} .ws-page .hero-sub,.ws-page .section-sub{font-size:15px!important} /* ── GRIDS → SINGLE COLUMN ── */ .ws-page .feature-grid, .ws-page .cards-grid, .ws-page .pricing-grid, .ws-page .roles-grid, .ws-page .checklist-grid, .ws-page .portfolio-grid, .ws-page .shorts-grid, .ws-page .video-grid, .ws-page .reviews-grid, .ws-page .three-col, .ws-page .four-col{grid-template-columns:1fr!important;gap:12px!important} /* ── 2-COL GRIDS: keep side by side if content allows ── */ .ws-page .two-col{grid-template-columns:1fr 1fr!important;gap:10px!important} .ws-page .stats-row,.ws-page .stat-row{flex-wrap:wrap!important;gap:10px!important;padding:0 16px!important} .ws-page .stat{min-width:calc(50% - 5px)!important;flex:1 1 calc(50% - 5px)!important} /* ── CHECKOUT / CO LAYOUT ── */ .ws-page .co-layout{grid-template-columns:1fr!important;gap:var(--s2)!important} .ws-page .co-plan,.ws-page .pricing-card{padding:20px 16px!important} .ws-page .co-plan-price,.ws-page .plan-price{font-size:36px!important} .ws-page .co-tabs{flex-direction:column!important} /* ── CARDS ── */ .glass-card{padding:18px 16px!important} .ws-page .glass-card{padding:18px 16px!important} /* ── WIZARD ── */ .ws-page .wizard-body{padding:var(--s2)!important} .ws-page .wizard-header{padding:var(--s2)!important} .ws-page .wizard-footer{padding:14px 16px!important} /* ── CTA BUTTONS ── */ .ws-page .hero-cta,.ws-page .hero-btns{flex-direction:column!important;align-items:stretch!important;gap:10px!important;padding:0 0!important} .ws-page .hero-cta .btn,.ws-page .hero-btns .btn, .ws-page .hero-cta a,.ws-page .hero-btns a{width:100%!important;justify-content:center!important;text-align:center!important} /* ── LEGAL / LONG FORM TEXT ── */ .ws-page .legal-section,.ws-page .privacy-section,.ws-page .terms-section{padding:var(--s5) 16px!important} .ws-page .legal-section h2,.ws-page .legal-section h3{font-size:20px!important} /* ── BOOKING / CAL ── */ .ws-page .cal-wrap iframe{min-height:580px!important} .ws-page .cal-wrap{padding:0!important} /* ── TRANSFORM / BEFORE-AFTER GRIDS ── */ .ws-page .transform-grid{grid-template-columns:repeat(2,1fr)!important} /* ── CAREERS ── */ .ws-page .careers-nav{padding:0 16px!important} .ws-page .job-listings{padding:0 16px!important} /* ── CONFIRMATION / QUALIFICATION ── */ .ws-page .confirmation-section,.ws-page .qualification-section{padding:var(--s5) 16px!important} /* ── CONTACT ── */ .ws-page .contact-title{font-size:clamp(24px,7vw,34px)!important} .ws-page .contact-form{padding:0 0!important} } @media(max-width:480px){ /* ── Even tighter on small phones ── */ .ws-page .container{padding:0 12px!important} .ws-page .section,.ws-section-dark{padding:36px 12px!important} .ws-page .hero-section,.ws-page .hero{padding:var(--s6) 12px 32px!important} .ws-page .cb-header-bar{padding:10px 12px!important} .ws-page .cb-footer,.cb-footer{padding:var(--s4) 12px 20px!important} /* ── Stats: full width each ── */ .ws-page .stat{min-width:100%!important;flex:1 1 100%!important} /* ── Transform grid: full width ── */ .ws-page .transform-grid{grid-template-columns:1fr!important} /* ── Smaller hero text ── */ .ws-page .hero-title,.ws-page .section-title{font-size:clamp(22px,9vw,34px)!important} /* ── Pricing/checkout cards ── */ .ws-page .co-plan,.ws-page .pricing-card{padding:var(--s2) 12px!important} .glass-card,.ws-page .glass-card{padding:var(--s2) 12px!important} /* ── two-col → single on tiny screens ── */ .ws-page .two-col{grid-template-columns:1fr!important} } /* ────────────────────────────────────────────────────────────── */ /* ── PERFORMANCE OVERRIDES ─────────────────────────────────────── Targets verified rendered bottlenecks only. Visual output preserved. ──────────────────────────────────────────────────────────────── */ /* 1. GLASS HOVER SHADOW: 24-layer → 4-layer. Same perceived depth. */ .glass-card:hover{ box-shadow: 0 4px 20px rgba(0,0,0,.6), 0 12px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,10,50,.3) !important; } /* 2. GLASS CARD BASE SHADOW: 8-layer → 4-layer. */ .ws-page .glass-card{ box-shadow: 0 2px 12px rgba(0,0,0,.5), 0 8px 32px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,10,40,.25) !important; } /* 4. CONTAIN: scope paint to card bounds — big win on long pages */ .ws-page .glass-card, .ws-page .pricing-card, .ws-page .co-plan, .ws-page .stat, .ws-page .checklist-item, .ws-page .review-card, .ws-page .testimonial-card, .ws-page .why-card, .ws-page .transform-card{ contain: layout style!important; } /* 5. CONTENT-VISIBILITY: skip rendering off-screen sections */ /* 6. TRANSITION: replace transition:all on btn-ghost with specific props */ .ws-page .btn-ghost, .btn-ghost{ transition: transform 80ms var(--ease), box-shadow 80ms var(--ease), opacity 60ms !important; } /* 10. FONT RENDERING: force GPU text rendering on hero */ /* 11. IMAGE RENDERING: crisp decode on cards */ .ws-page .glass-card img, .ws-page .pricing-card img{ image-rendering: auto!important; } /* ────────────────────────────────────────────────────────────── */ /* ═══════════════════════════════════════════════════════════════ CB BUG OVERLAY — Atmospheric logo mark behind page titles Used on: faq, careers, and any inner page with a section-header ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .cb-bug-overlay { margin-bottom: -220px; padding-top: var(--s3); } .cb-bug-glow { width: 300px; height: 300px; } .cb-bug-img-wrap { width: 260px; height: 260px; } } /* ────────────────────────────────────────────────────────────── */ /* ═══════════════════════════════════════════════════════════════ FUNNEL LAYOUT — Shared stacked layout for all 4 funnel steps Used on: contact-details, qualification, booking, confirmation Pattern: step-badge → funnel-title → funnel-sub → funnel-bullets → funnel-body ═══════════════════════════════════════════════════════════════ */ @media(max-width:600px){ .funnel-title{ font-size:26px } .funnel-sub { font-size:15px } } /* ────────────────────────────────────────────────────────────── */ /* ═══════════════════════════════════════════════════════════════ CHECKOUT PAGES — co- component classes Used on: checkout-basic, checkout-silver, checkout-gold ═══════════════════════════════════════════════════════════════ */ /* Step progress bar */ /* Step panels */ @keyframes coFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} /* Buttons */ /* Billing / plan heading */ /* Tab active state extra */ .co-tab-sel,.co-tab.active{border-color:rgba(41,151,255,.5)!important;background:rgba(41,151,255,.1)!important} /* Order summary */ /* Mobile */ @media(max-width:860px){ .co-layout{grid-template-columns:1fr!important} .co-plan{display:none} .co-frow,.co-field-row{grid-template-columns:1fr} } @media(max-width:480px){ .co-btn,.co-proceed-btn,.co-form-btn{padding:14px} .co-step-title{font-size:18px} } /* ────────────────────────────────────────────────────────────── */ /* ── Sticky CTA Button — fixed top-right on scroll ── */ /* ── Pricing Hero ── */ @media(max-width:768px){ .pricing-hero{padding:var(--s6) 0 24px} .pricing-hero .hero-title{font-size:clamp(28px,6vw,40px)} } .ws-page .features li.off strong{font-weight:500;text-decoration:line-through;text-decoration-color:rgba(255,255,255,.08)} /* pricing-3fm.html checkout modal — mobile grid collapse (moved from inline block 2026-04-15) */ @media(max-width:800px){ #coModal > div{grid-template-columns:1fr!important;max-width:95vw!important;margin:20px auto!important} #coLeft{display:none!important} } /* ═══════════════════════════════════════════════════════════════════════ QUALIFICATION WIZARD — moved from inline block in qualification.html ═══════════════════════════════════════════════════════════════════════ */ *{margin:0;padding:0;box-sizing:border-box} html,body{height:100%;overflow:hidden} body{font-family:var(--font);color:var(--txt);display:flex;flex-direction:column} /* ── Chip selectors ── */ .q-chip.selected{background:rgba(41,151,255,.12);border-color:rgba(41,151,255,.45);color:var(--txt); box-shadow:0 0 12px rgba(41,151,255,.15)} @keyframes qPulse{0%,100%{box-shadow:0 0 0 0 rgba(52,211,153,.2)}50%{box-shadow:0 0 0 14px rgba(52,211,153,0)}} /* ── Calendar ── */ .q-day-card.selected{background:rgba(41,151,255,.10);border-color:rgba(41,151,255,.4); box-shadow:0 0 16px rgba(41,151,255,.12)} .q-slot.selected{background:rgba(41,151,255,.12);border-color:rgba(41,151,255,.45);color:var(--txt)} /* ── Summary card ── */ /* ── Activate glow ── */ @keyframes qGlow{0%,100%{opacity:.3}50%{opacity:.8}} .btn-activate.loading .spinner-sm{display:inline-block} @keyframes spin{to{transform:rotate(360deg)}} /* ── Remind-me row ── */ /* ── Step content ── */ .qw-step.active{display:flex} @keyframes cb-fade-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}} /* ── Step 4 sub-sections ── */ /* ── Style picker cards ── */ .q-preset-chip.selected{background:rgba(41,151,255,.12);border-color:rgba(41,151,255,.45);color:var(--txt)} /* ═══════════════════════════════════════════════════════════════════════ PRICING-6FM CHECKOUT MODAL — moved from inline block in pricing-6fm.html ═══════════════════════════════════════════════════════════════════════ */ /* ── OVERLAY ── */ #cb-overlay{display:none;position:fixed;inset:0;background:rgba(6,9,16,.92);backdrop-filter:none; -webkit-backdrop-filter:none;z-index:9999;align-items:center;justify-content:center;padding:var(--s2)} #cb-overlay.open{display:flex} /* ── MODAL ── */ #cb-modal{background:rgba(12,12,14,.98);border:1px solid rgba(255,255,255,.1); border-radius:20px;width:100%;max-width:560px;max-height:94vh; overflow:hidden;display:flex;flex-direction:column;position:relative; box-shadow:0 32px 80px rgba(0,0,0,.9)} /* ── CLOSE ── */ /* ── HEADER ── */ #cb-header{padding:18px 22px 0;flex-shrink:0} .cb-step{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:500; color:rgba(255,255,255,.22);transition:color .2s;white-space:nowrap} .cb-step.active{color:var(--txt)} .cb-step.done{color:rgba(52,199,89,.8)} .cb-step.active .cb-step-dot{background:#1a9eff;border-color:#1a9eff;color:var(--txt)} .cb-step.done .cb-step-dot{background:rgba(52,199,89,.15);border-color:rgba(52,199,89,.5);color:rgba(52,199,89,.9)} /* ── BODY ── */ #cb-body{flex:1;overflow-y:auto;padding:var(--s2) 22px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.06) transparent} #cb-body::-webkit-scrollbar{width:3px} #cb-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.06)} .cb-sub{font-size:12px;color:rgba(255,255,255,.4);margin-bottom:var(--s2);line-height:1.5} /* ── BILLING ── */ .cb-bill.selected{border-color:#1a9eff;background:rgba(26,160,255,.08)} /* ── PAYMENT PLAN ── */ .cb-pay-opt.selected{border-color:#1a9eff;background:rgba(26,160,255,.07)} /* ── CONTACT ── */ /* ── SUMMARY ── */ /* ── IFRAME ── */ /* ── FOOTER ── */ #cb-footer{padding:12px 22px 16px;border-top:none!important;flex-shrink:0} /* ═══════════════════════════════════════════════════════════════════════ PRICING CARDS + 2-STEP CHECKOUT MODAL Added 2026-04-15 — restores the 3-tier pricing grid deleted in 6bb5d1f and wires it to a popup modal (step 1 contact details, step 2 plan & pricing). ═══════════════════════════════════════════════════════════════════════ */ /* Pricing cards grid */ @media(max-width:860px){.cb-plans{grid-template-columns:1fr;max-width:440px}} /* Modal overlay */ @keyframes cbFade{from{opacity:0}to{opacity:1}} .cb-modal{position:relative;width:100%;max-width:540px;max-height:94vh;overflow-y:auto; background:linear-gradient(160deg,rgba(14,20,32,.99) 0%,rgba(8,12,22,.99) 100%); border:1px solid rgba(255,255,255,.1);border-top-color:rgba(255,255,255,.22); border-radius:var(--r-2xl); box-shadow:0 24px 80px rgba(0,0,0,.7),0 8px 32px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.14); padding:var(--s5) var(--s5) var(--s4); animation:cbSlideUp .24s cubic-bezier(.16,1,.3,1)} @keyframes cbSlideUp{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}} .cb-modal-dot.on{border-color:#2997ff;background:#0071e3;color:#fff;box-shadow:0 0 14px rgba(41,151,255,.5)} .cb-modal-step.active{display:block} @media(max-width:480px){.cb-modal-row{grid-template-columns:1fr}} .cb-modal-opt.sel{border-color:#2997ff;background:rgba(41,151,255,.08)} .cb-modal-opt.sel .cb-modal-radio{border-color:#2997ff;background:#2997ff} .cb-modal-opt.sel .cb-modal-radio::after{content:'';width:8px;height:8px;border-radius:50%;background:#fff} .cb-modal-btns{display:flex;gap:var(--s1);margin-top:var(--s3)} /* ═══════════════════════════════════════════════════════════════════════ FINAL POLISH — section glass separators, responsive, 60fps GPU hints Added 2026-04-15. Matches portal premium feel across mobile/iPad/desktop. ═══════════════════════════════════════════════════════════════════════ */ /* Subtle top-edge highlight between sections — premium section separator, no mask-fade awkwardness, matches Apple marketing-page aesthetic */ /* ─── 60fps GPU compositing hints for interactive elements ─── */ .cb-plan,.cb-modal,.cb-modal-btn,.cb-modal-opt,.cb-plan-cta,.cb-modal-close{ } /* ─── Tablet breakpoint (iPad portrait 768-1024px) ─── */ @media(max-width:1024px){ .cb-plans{gap:var(--s2);max-width:960px} .cb-plan{padding:var(--s4) var(--s3)} .cb-plan-name{font-size:24px} .cb-plan-price{font-size:38px} .cb-plan-feat{font-size:14px;line-height:1.75} } /* ─── Tablet portrait / large phone (max 860px) — collapse to single column ─── */ @media(max-width:860px){ .cb-plans{grid-template-columns:1fr;max-width:460px;padding:var(--s2) var(--s2) 0;gap:var(--s3)} .cb-plan{padding:var(--s4)} .cb-plan--featured{transform:none} .cb-plan-feat{max-width:360px;margin-left:auto;margin-right:auto} } /* ─── Mobile (max 560px) — full-screen modal, tighter card padding ─── */ @media(max-width:560px){ .cb-modal-overlay{padding:0;align-items:stretch;justify-content:stretch} .cb-modal{max-width:100%;max-height:100vh;min-height:100vh;border-radius:0;padding:var(--s5) var(--s3) var(--s3);animation:cbSlideUpMobile .24s cubic-bezier(.16,1,.3,1)} @keyframes cbSlideUpMobile{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}} .cb-modal-close{top:var(--s1);right:var(--s1);width:40px;height:40px;font-size:24px} .cb-modal-title{font-size:22px} .cb-modal-sub{font-size:14px} .cb-modal-input{font-size:16px;padding:12px 14px} .cb-modal-btns{flex-direction:column-reverse;gap:8px} .cb-modal-btn{padding:14px} .cb-plan{padding:var(--s3)} .cb-plan-name{font-size:22px} .cb-plan-price{font-size:36px} .cb-plan-feat{font-size:14px} /* Section separator hairlines shrink to page-edge-respecting on phones */ .ws-page section.section + section.section::before{left:8%;right:8%} } /* ─── Mobile small (max 380px) — extra-tight ─── */ @media(max-width:380px){ .cb-plan-price{font-size:32px} .cb-modal-title{font-size:20px} .cb-modal{padding:var(--s4) var(--s2) var(--s3)} } /* ─── Reduced motion respect (a11y) — already partially set elsewhere, reinforce for new elements ─── */ @media(prefers-reduced-motion:reduce){ .cb-plan,.cb-plan-cta,.cb-modal,.cb-modal-btn,.cb-modal-opt,.cb-modal-close, .cb-modal-overlay{animation:none!important;transition:none!important} .cb-plan:hover,.cb-plan-cta:hover{transform:none!important} } /* ─── Enforce SF Pro Display on all pricing/modal titles (defense-in-depth) ─── */ /* Body/UI text uses SF Pro Text */ /* ─── White text enforcement on primary value copy ─── */ /* ─── Ensure cards don't inherit weird colors from ambient CSS ─── */ .cb-plan *,.cb-modal *{font-family:inherit} /* ══════════════════════════════════════════════════════════════════ DESIGN SYSTEM LOCK — GLOBAL NO-BOLD ENFORCEMENT (Sean 2026-04-15) Demotes every inline font-weight 600/700/800/900 across the portal. Covers portal pages and iframe pages that import this stylesheet. strong/b keep semantic meaning via italic stress, not heavy weight. ══════════════════════════════════════════════════════════════════ */ body [style*="font-weight:500"],body [style*="font-weight:500"], body [style*="font-weight:500"],body [style*="font-weight:500"], body [style*="font:600"],body [style*="font:700"], body [style*="font:800"],body [style*="font:900"]{font-weight:500!important} body b,body strong{font-weight:500!important} body h1,body h2,body h3,body h4,body h5,body h6{font-weight:500} /* ══════════════════════════════════════════════════════════════════ PIPE-HEAD-ROW — canonical page-head horizontal row (title left + controls right) Referenced in master CLAUDE.md. CSS had been missing causing controls to stack below titles. ══════════════════════════════════════════════════════════════════ */ .pipe-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s2);flex-wrap:wrap} .pipe-head-row>*{min-width:0} .stg-head,.stg-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s2);flex-wrap:wrap} .stg-head-titles{min-width:0;flex:1 1 auto} /* ══════════════════════════════════════════════════════════════════ UNIFORM LOCK — Sean 2026-04-16 ONE background, ONE font-family, ONE padding token across every page, shell, container, wizard, card, subtitle, and word. ══════════════════════════════════════════════════════════════════ */ /* ── 1. BACKGROUND — REVERTED 2026-04-16. Do not apply gradient to html; it double-stacked with body.bg-dark and made the top too bright. The canonical master BG stays on .bg-dark only. ── */ /* ── 2. ONE FONT — SF Pro on every text element. Mono stays mono for code/terminals; icons/SVG unaffected. No Arial drift, no Helvetica fallback chain leaking through. ── */ html,body,input,textarea,select,button, h1,h2,h3,h4,h5,h6,p,span,div,a,label, li,td,th,figcaption,strong,em,b,i{ font-family:var(--cb-font-text) !important } code,pre,.mono,.font-mono,[class*="terminal"],[class*="ps-kanban-count"],.xterm *{ font-family:var(--cb-font-mono) !important } /* ── 3. UNIFORM CONTAINER PADDING — every primary surface shares the 10/16/24 rhythm. Shell-body-glass is an iframe wrapper — leaves its own padding to the iframe's inner .page-shell so content isn't double-padded. ── */ .page-shell{padding:var(--s1)}body{padding:0} /* page-head/cc-hdr + glass-card/opt-card/dock-bubble padding consolidated into their canonical rules above. */ .pipeline-card{padding:10px} .pc-top-row{ position:absolute;top:0;left:0;right:0;z-index:2; display:flex;flex-direction:row;align-items:center;gap:8px; padding:10px 10px 0; pointer-events:none } .pc-title{ font:500 12.5px/1.25 var(--font); color:#fff;letter-spacing:-.01em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; flex:1;min-width:0; } .pc-top-row > *{pointer-events:auto} .pc-status-row{ position:absolute;top:46px;left:10px;right:10px;z-index:2; display:flex;align-items:center;gap:4px;pointer-events:none } .pc-status-row > *{pointer-events:auto} .pc-status-tag[data-status="queue"]{background:rgba(148,163,184,.18);color:#cbd5e1;border-color:rgba(148,163,184,.35)} .pc-status-tag[data-status="active"]{background:rgba(41,151,255,.2);color:#5eb8ff;border-color:rgba(41,151,255,.4)} .pc-status-tag[data-status="review"]{background:rgba(191,90,242,.2);color:#d1a9ff;border-color:rgba(191,90,242,.4)} .pc-status-tag[data-status="revisions"]{background:rgba(255,159,10,.2);color:#ff9f0a;border-color:rgba(255,159,10,.4)} .pc-status-tag[data-status="approved"]{background:rgba(52,199,89,.2);color:#34d399;border-color:rgba(52,199,89,.4)} /* .pc-pool-pill is covered by the shared small-icon rule above (merged Sean 2026-04-20 v4). Do not re-declare here. */ .pc-date-pill{ display:inline-flex;align-items:center; height:16px;padding:0 6px; border-radius:3px; font:500 9px/1 var(--font);letter-spacing:.2px; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.78); flex-shrink:0;white-space:nowrap; text-shadow:0 1px 2px rgba(0,0,0,.4) } .pc-bottom-row{ position:absolute;bottom:0;left:0;right:0;z-index:2; display:flex;align-items:flex-end;justify-content:space-between;gap:8px; padding:0 10px 10px; pointer-events:none } .pc-meta{ display:flex;align-items:center;gap:3px; flex-wrap:nowrap;min-width:0 } /* Bottom-left icons — type, ver, tier, grade, pool — SMALL and uniform. Kept visually distinct from status-tag, timer, and date pills by being noticeably smaller (15px vs 18px). Sean 2026-04-20 v4: icons were too big. */ .pc-type-icon,.pc-ver-icon,.pc-tier-icon,.pc-grade-icon,.pc-pool-pill{ display:inline-flex;align-items:center;justify-content:center; height:15px;min-width:16px;padding:0 5px; border-radius:3px; font:600 9px/1 var(--font);letter-spacing:.3px; background:linear-gradient(135deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,.1) 100%); border:1px solid rgba(255,255,255,.22); color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35); backdrop-filter:none;flex-shrink:0;white-space:nowrap } /* Status tag + timer tag KEEP the larger 18px size per spec — they live in different regions (status under the avatar, timer next to the editor avatar) and need to read at a glance. Dates + timer + avatars stay full size. */ .pc-status-tag,.pc-timer-tag{ display:inline-flex;align-items:center;justify-content:center; height:15px;min-width:16px;padding:0 5px; border-radius:3px; font:600 8.5px/1 var(--font);letter-spacing:.3px; background:linear-gradient(135deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,.1) 100%); border:1px solid rgba(255,255,255,.22); color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35); backdrop-filter:none;flex-shrink:0;white-space:nowrap } .pc-status-tag{text-transform:uppercase;letter-spacing:.35px;padding:0 6px} .pc-type-icon[data-type="SF"],.pc-type-icon[data-type="LF"],.pc-type-icon[data-type="FT"]{background:linear-gradient(135deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,.1) 100%);color:#fff;border-color:rgba(255,255,255,.22)} .pc-ver-icon{background:linear-gradient(135deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,.1) 100%);color:#fff;border-color:rgba(255,255,255,.22)} .pc-tier-icon[data-tier="1"],.pc-tier-icon[data-tier="2"],.pc-tier-icon[data-tier="3"]{background:linear-gradient(135deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,.1) 100%);color:#fff;border-color:rgba(255,255,255,.22)} .pc-grade-icon[data-grade="A"]{background:rgba(52,211,153,.2);color:#34d399;border-color:rgba(52,211,153,.4)} .pc-grade-icon[data-grade="B"]{background:rgba(134,239,172,.18);color:#86efac;border-color:rgba(134,239,172,.35)} .pc-grade-icon[data-grade="C"]{background:rgba(251,191,36,.18);color:#fbbf24;border-color:rgba(251,191,36,.35)} .pc-grade-icon[data-grade="D"]{background:rgba(255,159,10,.18);color:#ff9f0a;border-color:rgba(255,159,10,.35)} .pc-grade-icon[data-grade="F"]{background:rgba(192,57,43,.2);color:#ff453a;border-color:rgba(192,57,43,.4)} /* Running editor grade (non-approved cards) — same color as matching letter but dashed border so it's visually distinct from the locked project grade. */ .pc-grade-icon.pc-grade-live{border-style:dashed;opacity:.88} .pc-grade-icon.pc-grade-live::after{content:"•";margin-left:2px;opacity:.55;font-weight:500} @keyframes pcRiskPulse{ 0%,100%{transform:scale(1);opacity:1} 50% {transform:scale(1.25);opacity:.75} } .pipeline-card.is-at-risk{ box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 -1px 0 rgba(0,0,0,.5), 0 0 0 1px rgba(255,59,48,.20), 0 6px 14px rgba(0,0,0,.28), 0 14px 30px rgba(0,0,0,.3), 0 0 26px rgba(255,59,48,.08) } @media(prefers-reduced-motion:reduce){ .pc-risk-dot{animation:none} } .pc-editor-col{ display:flex;flex-direction:column;align-items:flex-end;gap:4px; pointer-events:auto } .pc-av-sm{ width:28px;height:28px;border-radius:50%; overflow:hidden;flex-shrink:0; background:linear-gradient(135deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,.1) 100%); border:1.5px solid rgba(255,255,255,.35); box-shadow:0 2px 6px rgba(0,0,0,.4); display:flex;align-items:center;justify-content:center; pointer-events:auto } .pc-av-sm img{width:100%;height:100%;object-fit:cover;display:block} .pc-av-client,.pc-av-editor{border-color:rgba(255,255,255,.45)} .pc-av-sm:hover{transform:scale(1.08);transition:transform 120ms var(--ease-q)} .pc-av-empty{border-style:dashed!important;border-color:rgba(255,255,255,.2)!important;background:rgba(255,255,255,.03)!important} @media(max-width:900px){.bp-music-grid{grid-template-columns:repeat(4,1fr)}} @media(max-width:520px){.bp-music-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:900px){.bp-style-grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:520px){.bp-style-grid{grid-template-columns:repeat(2,1fr)}} .bp-style-card.selected{border-color:var(--blue)} @media(max-width:520px){.bp-size-grid{grid-template-columns:repeat(3,1fr)}} .bp-size-card.selected{border-color:var(--blue)} .bp-size-card.selected .bp-size-circle{border-color:var(--blue);color:var(--blue)} @media(max-width:900px){.bp-thumb-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.bp-thumb-grid{grid-template-columns:1fr}} .bp-thumb-card.selected{border-color:var(--blue)} .bp-lib-tier.tier-1{background:rgba(255,255,255,.12);color:var(--txt)} .bp-lib-tier.tier-2{background:rgba(41,151,255,.2);color:var(--blue)} .bp-lib-tier.tier-3{background:rgba(191,90,242,.2);color:var(--purple)} @media(max-width:640px){.ac-hero{flex-direction:column;align-items:flex-start;text-align:left}.ac-hero-avatar-col{align-self:center}} .card-tier{padding:1px 5px;border-radius:3px;font:500 8px/1.2 var(--font);text-transform:uppercase} .ws-page .card-tier{font-family:var(--font);font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:2px;color:var(--accent);margin-bottom:var(--s1)} /* ═══════════════════════════════════════════════════════════════════════ PORTAL THEME — live background swap driven by [data-portal-theme]. Lighter at top, darker at bottom. Works for Onyx/Deep Blue/Pearl. Writes to --cb-bg so .bg-dark + .shell inherit without re-declaring. BOTH html[data-portal-theme] AND body[data-portal-theme] selectors so the variable reaches (where .bg-dark paints) regardless of which element the JS stamps. ═══════════════════════════════════════════════ */ html[data-portal-theme="onyx"],body[data-portal-theme="onyx"]{--cb-bg:linear-gradient(180deg,#1e1e24 0%,#0f0f13 40%,#050508 100%)} html[data-portal-theme="deep_blue"],body[data-portal-theme="deep_blue"]{--cb-bg:linear-gradient(180deg,#17294d 0%,#0a1228 40%,#020510 100%)} html[data-portal-theme="pearl"],body[data-portal-theme="pearl"]{--cb-bg:linear-gradient(180deg,#ececf1 0%,#4a4a55 25%,#16161c 65%,#05050a 100%)} /* Pearl text contrast — the top is near-white so shift default text darker */ html[data-portal-theme="pearl"] .wiz-shell,body[data-portal-theme="pearl"] .wiz-shell{color:#0b0b12} /* ONE-ROW ABSOLUTE — all onboarding wizard answer grids enforce nowrap */ .rq-overlay .theme-row,.rq-overlay .size-row,.rq-overlay .bp-fmt-grid{flex-wrap:nowrap !important} /* Make sure rq-overlay centering cannot be overridden by body theme classes */ .rq-overlay{display:flex !important;align-items:center !important;justify-content:center !important} .rq-overlay .wiz-shell{margin:auto !important} .np-drawer-bg.open{opacity:1;pointer-events:auto} .np-drawer.open{transform:translate3d(0,0,0)} /* Pinned project card at top — builds up as user picks */ .np-card{border-radius:var(--r-lg);padding:10px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);flex-shrink:0;display:flex;flex-direction:column;gap:10px} .np-card-top{display:flex;align-items:center;gap:8px} .np-card-title{flex:1;background:transparent;border:0;color:var(--txt);font:500 var(--text-md)/1.2 var(--font);padding:4px 6px;outline:0;border-radius:6px;min-width:0;transition:background 120ms ease} .np-card-title::placeholder{color:var(--txt3)} .np-card-title:hover{background:rgba(255,255,255,.04)} .np-card-title:focus{background:rgba(255,255,255,.06)} .np-card-close{background:transparent;border:0;color:var(--txt3);cursor:pointer;width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 120ms ease,color 120ms ease} .np-card-close:hover{background:rgba(255,255,255,.06);color:var(--txt)} .np-card-close svg{width:14px;height:14px;stroke-width:2} .np-card-slots{display:flex;gap:8px} .np-slot{flex:1;min-width:0;height:44px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;gap:6px;opacity:.35;transition:opacity 220ms ease,background 220ms ease,border-color 220ms ease;padding:0 8px;overflow:hidden} .np-slot svg{width:18px;height:18px;stroke:var(--txt);fill:none;stroke-width:1.6;flex-shrink:0} .np-slot-txt{font:500 var(--text-xs)/1 var(--font);color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .np-slot.on{opacity:1;background:rgba(41,151,255,.08);border-color:rgba(41,151,255,.22)} .np-slot.on svg{stroke:var(--blue)} .np-slot.on .np-slot-txt{color:var(--blue)} .np-card-detail{margin:0;padding-top:8px;border-top:1px solid rgba(255,255,255,.06);font:400 var(--text-xs)/1.4 var(--font);color:var(--txt3);display:flex;flex-direction:column;gap:6px} .np-card-detail[hidden]{display:none} /* Step rail — 5 dots across the top of the content */ .np-rail{display:flex;align-items:center;gap:6px;padding:0 10px 2px;flex-shrink:0} .np-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.1);transition:background 180ms ease,transform 180ms ease;flex-shrink:0} .np-dot.active{background:var(--blue);transform:scale(1.35)} .np-dot.done{background:rgba(41,151,255,.55)} .np-line{flex:1;height:2px;background:rgba(255,255,255,.08);border-radius:1px;transition:background 180ms ease} .np-line.done{background:rgba(41,151,255,.45)} /* Content */ .np-body{flex:1;overflow-y:auto;padding:4px 10px 10px;min-height:0;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent} .np-body::-webkit-scrollbar{width:6px} .np-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:3px} .np-step{display:none;flex-direction:column;gap:12px} .np-step.active{display:flex;animation:npFadeIn 200ms ease} @keyframes npFadeIn{from{opacity:0;transform:translate3d(0,4px,0)}to{opacity:1;transform:translate3d(0,0,0)}} .np-q{font:500 var(--text-lg)/1.25 var(--font);color:var(--txt);margin:0} .np-q-sub{font:400 var(--text-sm)/1.4 var(--font);color:var(--txt3);margin:-6px 0 0} /* Footer */ .np-foot{display:flex;gap:8px;padding:10px;flex-shrink:0;border-top:1px solid rgba(255,255,255,.06)} .np-foot .btn{flex:1;justify-content:center;min-height:40px} .np-foot #npBack{flex:0 0 auto;padding-left:14px;padding-right:14px} /* Step 1 — footage dropzone & file cards */ .np-dz{border:1.5px dashed rgba(255,255,255,.12);border-radius:var(--r-lg);padding:20px 14px;text-align:center;background:rgba(255,255,255,.02);cursor:pointer;transition:border-color 150ms ease,background 150ms ease;outline:none} .np-dz:hover,.np-dz:focus-visible{border-color:rgba(41,151,255,.35);background:rgba(41,151,255,.04)} .np-dz.dragover{border-color:var(--blue);background:rgba(41,151,255,.07)} .np-dz-icon{margin:0 auto 8px;width:32px;height:32px;opacity:.6} .np-dz-title{font:500 var(--text-md)/1.2 var(--font);color:var(--txt);margin-bottom:4px} .np-dz-sub{font:400 var(--text-xs)/1.4 var(--font);color:var(--txt3)} .np-dz-sub kbd{display:inline-block;padding:1px 5px;border-radius:4px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);font:500 10px/1.2 var(--font);margin:0 2px} .np-netline{font:400 var(--text-xs)/1 var(--font);color:var(--txt3);padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap} .np-netline-pill{display:inline-flex;align-items:center;gap:4px} .np-netline-dot{width:6px;height:6px;border-radius:50%;background:var(--green,#7ecba1)} .np-netline-dot.warn{background:var(--amber,#f5a524)} .np-files{display:flex;flex-direction:column;gap:8px} .np-file-pct.done{color:var(--green,#7ecba1)} .np-file-bar.done span{background:var(--green,#7ecba1)} .np-files-summary{display:flex;justify-content:space-between;align-items:center;padding:6px 4px 0;font:400 var(--text-xs)/1 var(--font);color:var(--txt3);font-variant-numeric:tabular-nums} .np-files-summary b{color:var(--txt);font-weight:500} /* Step 2 — format cards */ .np-opts{display:flex;flex-direction:column;gap:10px} .np-opt{text-align:left;padding:14px;border-radius:var(--r-lg);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);cursor:pointer;display:flex;flex-direction:column;gap:4px;transition:border-color 150ms ease,background 150ms ease;color:var(--txt)} .np-opt:hover{border-color:rgba(255,255,255,.14)} .np-opt.sel{border-color:var(--blue);background:rgba(41,151,255,.07)} .np-opt-name{font:500 var(--text-md)/1.2 var(--font)} .np-opt-meta{font:400 var(--text-sm)/1.2 var(--font);color:var(--txt3)} /* Step 3 — tier cards */ .np-tiers{display:flex;flex-direction:column;gap:10px} .np-tier-card{text-align:left;padding:12px;border-radius:var(--r-lg);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);cursor:pointer;display:flex;flex-direction:column;gap:6px;transition:border-color 150ms ease,background 150ms ease;color:var(--txt)} .np-tier-card:hover{border-color:rgba(255,255,255,.14)} .np-tier-card.sel{border-color:var(--blue);background:rgba(41,151,255,.07)} .np-tier-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px} .np-tier-name{font:500 var(--text-md)/1.2 var(--font)} .np-tier-time{font:400 var(--text-xs)/1 var(--font);color:var(--txt3);font-variant-numeric:tabular-nums} .np-tier-feats{font:400 var(--text-xs)/1.5 var(--font);color:var(--txt3);margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px} .np-tier-feats li{padding-left:14px;position:relative} .np-tier-feats li::before{content:"·";position:absolute;left:5px;color:var(--txt3)} .np-tier-note{font:400 var(--text-xs)/1.4 var(--font);color:var(--amber,#f5a524);padding:6px 10px;border-radius:8px;background:rgba(245,165,36,.06);border:1px solid rgba(245,165,36,.15);margin-top:4px} /* Step 4 — blueprint cards */ .np-bp-list{display:flex;flex-direction:column;gap:8px} .np-bp-card.sel{border-color:var(--blue);background:rgba(41,151,255,.07)} .np-input{width:100%;box-sizing:border-box;padding:12px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);color:var(--txt);font:500 var(--text-md)/1.2 var(--font);outline:none;transition:border-color 150ms ease,background 150ms ease} .np-input:focus{border-color:var(--blue);background:rgba(41,151,255,.04)} .np-input::placeholder{color:var(--txt3)} .np-pills{display:flex;flex-wrap:wrap;gap:6px} .np-pill.sel{border-color:var(--blue);background:rgba(41,151,255,.1);color:var(--blue)} .ws-page .cb-footer .cb-logo{position:static;display:inline-flex;align-items:center} .ws-page .cb-footer .cb-logo img{height:28px;width:auto;display:block} .ws-page .cb-nav-link.active{color:var(--txt);background:rgba(255,255,255,.12)} @media(max-width:860px){.ws-page .stats-row{grid-template-columns:repeat(2,1fr);gap:var(--s3)}.ws-page .stat-item:not(:last-child){border-right:none}} @media(max-width:1024px){.ws-page .creator-rail-wrap{grid-template-columns:repeat(3,1fr)}} @media(max-width:560px){.ws-page .creator-rail-wrap{grid-template-columns:repeat(2,1fr);gap:var(--s2)}} @media(max-width:860px){.ws-page .step-list{grid-template-columns:1fr;gap:var(--s3)}} @media(max-width:860px){.ws-page .brand-logo-grid{grid-template-columns:repeat(3,1fr)}} /* ═══════════════════════════════════════════════════════════════════════════ PORTAL UI NORMALIZATION LOCK — 2026-04-20 Purpose: enforce SF Pro typography, max-weight 500, and glass consistency across every page in cb-portal-shell without redesigning or rewriting copy. This block intentionally overrides page-local drift. Do NOT edit above — add lock rules here only. ═══════════════════════════════════════════════════════════════════════════ */ /* ── FONT LOCK v2 ── SF Pro everywhere, no system-ui/Arial/Helvetica fallbacks */ html,body,body *{font-family:var(--font),var(--cb-font),var(--font-display),var(--cb-font-display)} body code,body pre,body kbd,body samp,body .font-mono{font-family:var(--font-mono),var(--cb-font-mono),ui-monospace,monospace} body h1,body h2,body h3,body h4,body h5,body h6,body .pg-title,body .sec-title,body .ob-title,body .ob-q,body .op-prof-ttl,body .op-prof-av{font-family:var(--font-display),var(--cb-font-display)} /* ── WEIGHT LOCK v2 ── max 500, demote 600/700/800/900 globally */ body [style*="font-weight:600"],body [style*="font-weight: 600"], body [style*="font-weight:700"],body [style*="font-weight: 700"], body [style*="font-weight:800"],body [style*="font-weight: 800"], body [style*="font-weight:900"],body [style*="font-weight: 900"], body [style*="font-weight:bold"],body [style*="font-weight: bold"]{font-weight:500!important} body b,body strong{font-weight:500} /* ── BLUR LOCK v2 ── redundant backstop; blur is permanently banned */ *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important} *:not(svg):not(svg *){filter:none} [style*="blur("]{filter:none!important;backdrop-filter:none!important} /* ── TYPOGRAPHY NORMALIZATION — page titles / sub / section titles Keep existing tokens. Override only where page-local CSS drifts. */ .pg-title{font-family:var(--font-display)!important;font-size:26px;font-weight:500;line-height:1.15;letter-spacing:-.015em;color:var(--txt)} .pg-sub{font-family:var(--font)!important;font-size:14px;font-weight:400;line-height:1.4;color:var(--txt2,rgba(255,255,255,.62))} .sec-title{font-family:var(--font-display)!important;font-size:16px;font-weight:500;letter-spacing:-.01em;color:var(--txt)} .sec-sub{font-family:var(--font)!important;font-size:13px;font-weight:400;color:var(--txt2,rgba(255,255,255,.62))} /* ── OPERATOR HEADER — stay a touch smaller inside the Studio iframe */ #opShell .pg-title{font-size:22px;letter-spacing:-.015em} #opShell .pg-sub{font-size:12.5px} /* ── ONBOARDING BLEND — unify with portal glass Layer-2, kill system-ui drift, and downgrade title weight. Do not touch copy or behavior. */ body .ob-host{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--s5)} body .ob-title{font-family:var(--font-display)!important;font-size:26px;font-weight:500;letter-spacing:-.015em;margin:0 0 var(--s2);text-align:center;color:var(--txt)} body .ob-card-opt.active{background:rgba(126,203,161,.12);border-color:var(--green,#7ecba1);color:var(--green,#7ecba1)} body .ob-toggle.on .ob-toggle-dot{background:var(--green,#7ecba1)} body .ob-spinner{border-top-color:var(--green,#7ecba1)} /* ── OPERATOR WEIGHT DEMOTION — kill inline 600/700 in page-local styles */ .op-prof-av,.op-prof-ttl,.op-prof-sub .op-ed-chip, .op-prof-grades .op-ed-grade-lbl,.op-prof-grades .op-ed-grade-val, .op-prof-section-ttl,.op-prof-month-lbl,.op-prof-month-val, .op-prof-pj-grade,.op-prof-pj-lbl, .editor-profile-card .op-ed-init, .editor-profile-card .op-ed-count, .editor-profile-card .op-ed-chip, .editor-profile-card .op-ed-grade-lbl, .editor-profile-card .op-ed-grade-val{font-weight:500!important} /* ── MOTION TIER RE-ENABLE ON INTERACTIVE SURFACES The global `transition-property:none` on *,*::before,*::after (line 74) intentionally freezes decorative motion. Re-enable it ONLY on the handful of affordances the user physically touches. Transform + opacity + color only — never filter, never blur. */ button,a,input,select,textarea,label, .ob-btn,.ob-card-opt,.ob-toggle, .psn-btn,.pipe-dropdown,.pcr-search, .sb-nav-item,.op-nav-btn,.pg-tab, .pipeline-card,.editor-profile-card, .section-card,.glass-card,.stat-card, .tog-row,.seg-ctrl,.opt-card,.dock-bubble, .cb-modal,.op-modal,.modal-panel{ transition-property:background,background-color,color,border-color,box-shadow,transform,opacity; transition-duration:150ms; transition-timing-function:ease} button:active,.ob-btn:active,.psn-btn:active,.sb-nav-item:active,.op-nav-btn:active,.pg-tab:active{transition-duration:80ms} /* ── MOBILE TIGHTENING (≤ 768px) */ @media (max-width:768px){ .pg-title{font-size:22px} .pg-sub{font-size:13px} .sec-title{font-size:15px} .sec-sub{font-size:12.5px} body .ob-card{padding:var(--s5);border-radius:var(--r-lg)} body .ob-title{font-size:22px} body .ob-q{font-size:13.5px;margin-bottom:var(--s4)} body .ob-card-opt{padding:var(--s3);font-size:13.5px} body .ob-btn{padding:var(--s3) var(--s5);font-size:13.5px} #opShell .pg-title{font-size:19px} #opShell .pg-sub{font-size:12px} #opShell .shell-body-glass{padding:var(--s3) var(--s3) 0} } /* ── SMALLER-MOBILE TIGHTENING (≤ 480px) */ @media (max-width:480px){ .pg-title{font-size:20px;letter-spacing:-.01em} .pg-sub{font-size:12.5px} body .ob-host{padding:var(--s3)} body .ob-card{padding:var(--s4);border-radius:var(--r-md)} body .ob-title{font-size:20px;margin-bottom:var(--s1)} body .ob-q{font-size:13px;margin-bottom:var(--s3)} body .ob-grid{grid-template-columns:1fr 1fr;gap:var(--s2)} body .ob-actions{flex-direction:column-reverse} body .ob-btn,body .ob-btn-primary{width:100%;min-width:0} } .q-style-tab.active{background:rgba(41,151,255,.14);border-color:rgba(41,151,255,.45);color:var(--txt)} /* ═══ END FREE-TRIAL WIZARD BASE ═══ */ /* ═══════════════════════════════════════════════════════════════════════════ SESSION 2026-04-20 — SIDEBAR ADDITIONS, SLIM NOTIFS, AI PM WIDGET Added per Sean's 2026-04-20 brief: - .sb-online-stack — avatar stack under bug logo (community feel) - .sb-dl-stack — stacked deadline timer cards above profile - .notif-item.slim — one-row compact notification (collapse 2-row → 1) - (removed) .ai-pm — AI PM is backend-only No blur, no custom colors outside tokens. All depth = opacity + shadow. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Community Online Stack (under bug logo) ─────────────────────── */ .sb-online-stack{display:flex;align-items:center;justify-content:center;gap:8px;padding:6px 12px 2px;min-height:24px} .sb-online-stack[data-empty="true"]{opacity:0;height:0;padding:0;overflow:hidden;pointer-events:none;transition:opacity 220ms} .sb-online-avatars{display:flex;align-items:center} .sb-online-avatars .sb-oa{width:22px;height:22px;border-radius:50%;border:2px solid rgba(14,18,28,.98);background:linear-gradient(135deg,rgba(41,151,255,.35),rgba(41,151,255,.1));color:#fff;font:500 9.5px/18px var(--font-display);text-align:center;overflow:hidden;margin-left:-8px;position:relative;transition:transform 160ms cubic-bezier(.16,1,.3,1),margin 160ms cubic-bezier(.16,1,.3,1)} .sb-online-avatars .sb-oa:first-child{margin-left:0} .sb-online-avatars .sb-oa img{width:100%;height:100%;object-fit:cover;display:block} .sb-online-avatars .sb-oa:hover{transform:translateY(-2px) scale(1.08);z-index:4} .sb-online-avatars .sb-oa.more{background:rgba(255,255,255,.06);color:var(--txt2);font-weight:500;letter-spacing:.02em} .sb-online-count{font:500 9.5px/1 var(--font);color:var(--txt3);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap} .sb-online-avatars .sb-oa[data-name]::after{ content:attr(data-name);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%); background:rgba(14,18,28,.98);color:var(--txt);font:500 10.5px/1 var(--font);padding:5px 8px;border-radius:6px; border:1px solid rgba(255,255,255,.08);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 120ms;z-index:50 } .sb-online-avatars .sb-oa[data-name]:hover::after{opacity:1} /* Clients never see names — hide tooltip entirely */ body[data-role="client"] .sb-online-avatars .sb-oa[data-name]::after, body[data-role="trial"] .sb-online-avatars .sb-oa[data-name]::after{display:none} .app-dock-inner.collapsed .sb-online-count{display:none} .app-dock-inner.collapsed .sb-online-stack{padding:4px 0 0;gap:0} .app-dock-inner.collapsed .sb-online-avatars{flex-direction:column;align-items:center} .app-dock-inner.collapsed .sb-online-avatars .sb-oa{margin-left:0;margin-top:-6px;width:20px;height:20px;font-size:9px;line-height:16px} .app-dock-inner.collapsed .sb-online-avatars .sb-oa:first-child{margin-top:0} /* ── Deadline Timer Stack (above profile) ────────────────────────── */ .sb-dl-stack{display:flex;flex-direction:column;gap:6px;margin:0 8px 8px;max-height:200px;overflow-y:auto} .sb-dl-stack::-webkit-scrollbar{width:0} .sb-dl-dot.warn{background:var(--orange,#ff9f0a);box-shadow:0 0 6px rgba(255,159,10,.4)} @keyframes sbDlPulse{0%,100%{box-shadow:0 0 6px rgba(255,107,107,.45)}50%{box-shadow:0 0 14px rgba(255,107,107,.85)}} .sb-dl-time.warn{color:var(--orange,#ff9f0a)} .app-dock-inner.collapsed .sb-dl-stack{display:none} .notif-item.slim .notif-dot-slim.warn{background:var(--orange,#ff9f0a);box-shadow:0 0 5px rgba(255,159,10,.4)} .notif-item.slim .notif-dot-slim.err{background:#ff6b6b;box-shadow:0 0 5px rgba(255,107,107,.5)} @media (max-width:720px){ .sb-dl-stack{max-height:160px} } /* ═══════════════════════════════════════════════════════════════ SESSION 2026-04-21 — 5 NEW UI FIXES 1. Project View timeline — full-width premium glass bar 2. Project View countdown timer — small tag, bottom-right of dock row 3. Project title bar — client avatar next to back button 4. Thread reaction bar — stop message distortion, iMessage-style 5. New-project wizard — less transparency, bigger card + icons ═══════════════════════════════════════════════════════════════ */ /* #1 — Timeline bar: full-width glass that spans the bottom of the video */ .pv-timeline-bar{ position:absolute !important; left:0 !important; right:0 !important; bottom:0 !important; width:100% !important; padding:8px 14px 10px !important; gap:12px !important; background:linear-gradient(0deg,rgba(8,10,14,.92) 0%,rgba(8,10,14,.72) 40%,rgba(8,10,14,.32) 80%,transparent 100%) !important; border-top:1px solid rgba(255,255,255,.06) !important; box-shadow:0 -10px 28px -12px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05) !important; z-index:5 !important; box-sizing:border-box !important; } .pv-timeline-bar .dk-timeline{flex:1 !important; min-width:0 !important; height:28px !important} #panel-portal .pv-timeline-bar .dk-timeline{flex:1 !important; min-width:0 !important; height:28px !important; padding:0 !important} #panel-portal .pv-timeline-bar .dk-timeline-track{width:100% !important; height:6px !important} .pv-timeline-bar .dk-timeline-track{ height:6px !important; background:linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.10) 50%,rgba(255,255,255,.07) 100%) !important; box-shadow:inset 0 1px 3px rgba(0,0,0,.42),0 1px 0 rgba(255,255,255,.05) !important; border:1px solid rgba(255,255,255,.06) !important; } .pv-timeline-bar .dk-timeline-bar{ background:linear-gradient(180deg,rgba(41,151,255,.95) 0%,rgba(41,151,255,.72) 100%) !important; box-shadow:0 0 10px rgba(41,151,255,.38), 0 0 2px rgba(41,151,255,.6) !important; } .pv-timeline-bar .dk-ts{font:500 11px/1 var(--mono, var(--font)); color:rgba(255,255,255,.82); letter-spacing:.3px; min-width:38px; text-align:center} .pv-timeline-bar .dk-play{width:30px !important;height:30px !important} .pv-timeline-bar .dk-play svg{width:14px !important;height:14px !important} .pv-timeline-bar .pv-q-btn{font-size:10px !important;padding:3px 7px !important;height:22px !important} /* #2 — Compact countdown timer, lives in the dock row bottom-right */ .health-timer.pv-timer-compact{ padding:3px 9px !important; font:500 10.5px/1 var(--font) !important; gap:5px !important; border-radius:var(--r-pill); background:rgba(255,255,255,.04) !important; border:1px solid rgba(255,255,255,.08) !important; height:22px; } .health-timer.pv-timer-compact .ht-dot{width:6px;height:6px} .health-timer.pv-timer-compact .ht-time{font:500 10.5px/1 var(--mono, var(--font))} .pv-timer-hidden{opacity:0;transition:opacity 120ms ease} /* Dock row gets a right-side cluster for timer + editor avatar */ .pv-dock-right{display:inline-flex;align-items:center;gap:8px;margin-left:auto;padding-left:6px} .pv-dock-editor-av{ width:24px;height:24px;border-radius:50%; display:inline-flex;align-items:center;justify-content:center; font:600 10px/1 var(--font); color:rgba(255,255,255,.7); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); background-size:cover;background-position:center; transition:transform 120ms cubic-bezier(.16,1,.3,1), border-color 120ms ease; } .pv-dock-editor-av[data-has="1"]{border-color:rgba(41,151,255,.35); color:#fff} .pv-dock-editor-av:hover{transform:scale(1.07);border-color:rgba(41,151,255,.55)} /* #3 — Client avatar to the right of the back button */ .pv-client-av{ width:24px;height:24px;border-radius:50%; display:inline-flex;align-items:center;justify-content:center; font:600 10px/1 var(--font); color:rgba(255,255,255,.85); background:linear-gradient(135deg, rgba(41,151,255,.18), rgba(41,151,255,.06)); border:1px solid rgba(41,151,255,.32); background-size:cover;background-position:center; margin-left:4px;flex-shrink:0; transition:transform 120ms cubic-bezier(.16,1,.3,1), border-color 120ms ease; } .pv-client-av[hidden]{display:none} .pv-client-av:hover{transform:scale(1.08);border-color:rgba(41,151,255,.6)} .pv-client-av img{width:100%;height:100%;border-radius:50%;object-fit:cover} .pv-client-av.has-img,.pv-dock-editor-av.has-img{color:transparent;text-shadow:none} @keyframes rxBarIn{ 0%{opacity:0; transform:translateY(6px) scale(.86)} 60%{opacity:1; transform:translateY(0) scale(1.04)} 100%{opacity:1; transform:translateY(0) scale(1)} } @keyframes rxChipIn{ 0%{opacity:0; transform:translateY(8px) scale(.6)} 60%{opacity:1; transform:translateY(0) scale(1.15)} 100%{opacity:1; transform:translateY(0) scale(1)} } /* Project card (hidden-state np-card) — bigger, more opaque, icons scaled */ .np-card{ padding:14px !important; background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.09) !important; border-top-color:rgba(255,255,255,.14) !important; box-shadow:0 8px 24px -10px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04) !important; gap:14px !important; } .np-card-title{font:500 var(--text-lg)/1.2 var(--font-display) !important; padding:6px 8px !important} .np-card-slots{gap:10px !important} .np-slot{ height:58px !important; gap:8px !important; background:rgba(255,255,255,.06) !important; border-color:rgba(255,255,255,.08) !important; } .np-slot svg{width:24px !important;height:24px !important;stroke-width:1.7 !important} .np-slot-txt{font:500 var(--text-sm)/1 var(--font) !important} .np-slot.on{background:rgba(41,151,255,.12) !important; border-color:rgba(41,151,255,.3) !important} .np-card-detail{padding-top:10px !important; font:400 var(--text-sm)/1.4 var(--font) !important} /* Visible project preview (pipeline-card.pipe-lg inside np-preview) — scale up */ .np-preview{margin-bottom:6px !important} .np-preview .pipeline-card.pipe-lg{ min-height:188px !important; padding:16px !important; border-radius:var(--r-xl, 16px) !important; background:rgba(14,18,28,.98) !important; border:1px solid rgba(255,255,255,.08) !important; border-top-color:rgba(255,255,255,.14) !important; box-shadow:0 14px 40px -14px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05) !important; } .np-preview .pipeline-card.pipe-lg .pc-title{font:500 18px/1.25 var(--font-display) !important} .np-preview .pipeline-card.pipe-lg .pc-status-pill{font-size:11px !important;padding:4px 10px !important} .np-preview .pipeline-card.pipe-lg .pc-date-pill{font-size:11px !important;padding:4px 10px !important} .np-preview .pipeline-card.pipe-lg .pc-chip, .np-preview .pipeline-card.pipe-lg .pc-tag{font-size:12px !important;padding:5px 11px !important;height:auto !important;line-height:1.2 !important} .np-preview .pipeline-card.pipe-lg .pc-avatar, .np-preview .pipeline-card.pipe-lg .pc-av{width:36px !important;height:36px !important;font-size:13px !important} .np-preview .pipeline-card.pipe-lg svg{width:18px !important;height:18px !important} .np-preview .pipeline-card.pipe-lg .pc-meta{font-size:12px !important;gap:10px !important} /* #1 timeline — strengthen width so it spans the full video */ .pv-left .pv-timeline-bar, #panel-portal .pv-left .pv-timeline-bar, #pvTimelineBar{ position:absolute !important; left:0 !important; right:0 !important; bottom:0 !important; width:100% !important; box-sizing:border-box !important; z-index:6 !important; } .np-card-close{width:32px;height:32px} .np-card-close svg{width:16px;height:16px} @keyframes rxBarOut{ 0%{opacity:1;transform:translateY(0) scale(1)} 100%{opacity:0;transform:translateY(6px) scale(.88)} } /* ================================================================ PERF #6/#7 — Compositor-only smoothness (2026-04-21) Additive hints for 120fps target. Zero visual change. ================================================================ */ .pipeline-card, .launcher-card, .opt-card, .notif-item, .bp-landing-card, .wk-section, .th-reaction-bar, .bp-panel, .ch-sb-ch, .pvd { contain: layout paint; } .pipeline-card:hover, .launcher-card:hover, .opt-card:hover, .bp-landing-card:hover, .notif-item:hover, .ch-sb-ch:hover, .sb-nav-item:hover { will-change: transform; } /* Mobile: bottom sheet */ @media (max-width: 640px) { .cb-tour-card { left: 10px !important; right: 10px !important; top: auto !important; bottom: 16px !important; width: auto; max-width: none; transform: translateY(8px); border-radius: 16px 16px 12px 12px; } .cb-tour-card.cb-tour-visible { transform: translateY(0); } .cb-tour-arrow { display: none; } .cb-tour-spotlight { box-shadow: 0 0 0 9999px rgba(0,0,0,0.6), 0 0 0 3px rgba(255,255,255,0.95); } } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .cb-tour-spotlight, .cb-tour-card, .cb-tour-overlay { transition: none !important; } } /* ══════════════════════════════════════════════════════════════════════════ PORTAL UNIFICATION PASS — Sean 2026-04-22 Additive-only block. Nothing above this comment should be edited by this pass. Defines: semantic glass aliases, .cb-page/.cb-container/.cb-stack scaffolding, global SF Pro enforcement, prefers-reduced-motion, focus defaults. Every rule here composes with existing tokens (--s*, --r-*, --cb-glass-*-bg, --font*). Zero new visual language. ══════════════════════════════════════════════════════════════════════════ */ /* ── 1. GLOBAL SF PRO ENFORCEMENT ── Any page that inherits body.font-family without overriding picks up SF Pro automatically. The fallback stack only fires if /portal/fonts/*.woff2 fail to load — SF Pro still wins every render path. */ html, body { font-family: var(--font), -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ── 2. SEMANTIC GLASS ALIASES ── Three semantic names mapped onto existing --cb-glass-N tokens, so page authors don't have to remember which tier is which. Existing classes (.glass-card, .glass-bubble, .glass-flat) are left alone and continue to work. Pick ONE of these for new surfaces going forward. */ .glass { background: var(--cb-glass-2-bg); border: var(--cb-glass-2-border); box-shadow: var(--cb-glass-2-shadow); border-radius: var(--r-xl); padding: var(--s2); } .glass.glass--elevated, .glass--elevated { background: var(--cb-glass-1-bg); border: 1px solid rgba(255,255,255,.12); box-shadow: var(--cb-glass-1-shadow); border-radius: var(--r-2xl); padding: var(--s3); } .glass.glass--subtle, .glass--subtle { background: var(--cb-glass-3-bg); border: var(--cb-glass-3-border); box-shadow: var(--cb-glass-3-shadow); border-radius: var(--r-lg); padding: var(--s2); } /* Hover lift — transform+box-shadow only, no layout shift, no filter reflow */ .glass:hover, .glass--subtle:hover { transform: translateY(-1px); box-shadow: var(--cb-glass-2-shadow), 0 8px 24px rgba(0,0,0,.35); transition: transform 150ms var(--ease, cubic-bezier(.22,1,.36,1)), box-shadow 150ms var(--ease, cubic-bezier(.22,1,.36,1)); } @media (max-width: 640px) { .cb-page { padding: var(--s1) } } @media (min-width: 1024px) { .cb-page { padding: var(--s3) var(--s2) } } /* ── 5. FOCUS-VISIBLE BASELINE ── Keyboard users get a clean ring. Mouse users never see it. */ :where(button, a, input, textarea, select, [tabindex]):focus-visible { outline: 2px solid var(--blue, #1a9eff); outline-offset: 2px; border-radius: inherit; } /* ── 6. REDUCED MOTION ── Hard clamp for users who have "Reduce motion" toggled in macOS/iOS/Android accessibility. Keeps the glass aesthetic (opacity, shadow, gradient) but kills all transforms, transitions, animations. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ══════════════════════════════════════════════════════════════════════════ END PORTAL UNIFICATION PASS ══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════════ PORTAL UNIFY OVERRIDE LAYER — Sean 2026-04-22 Phase 1+2 of the "Portal MUST BE PERFECT" pass. This block runs AFTER every other rule in the stylesheet and uses targeted !important only where a page-local