/* claudetuner.com/multiai — web shell around the extension's compare.html (#1453). The shared marketing header (/shared/site-header.js) sits on top; everything under it is the framed extension page plus four overlays (loading / install / update / mobile). Theme follows /shared/theme.js (`data-theme` on ) so the frame and the page around it agree. */ :root { --purple: #7C3AED; --purple-dark: #5B21B6; --mai-bg: #F9FAFB; --mai-card: #ffffff; --mai-text: #111827; --mai-muted: #6B7280; --mai-border: #E5E7EB; --mai-spinner-track: #E5E7EB; } [data-theme="dark"] { --mai-bg: #0f1419; --mai-card: #1a2029; --mai-text: #e6e8eb; --mai-muted: #9aa3ad; --mai-border: #2a323d; --mai-spinner-track: #2a323d; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--mai-text); background: var(--mai-bg); line-height: 1.6; display: flex; flex-direction: column; overflow: hidden; visibility: hidden; } body.lang-ready { visibility: visible; } /* /shared/site-header.js relies on the page providing .container for its width. */ .container { max-width: 960px; margin: 0 auto; padding: 0 24px; width: 100%; } .mai-main { flex: 1 1 auto; min-height: 0; position: relative; } /* The embedded extension page. Hidden until the __ctReady handshake confirms. */ #panel { width: 100%; height: 100%; border: 0; background: var(--mai-bg); opacity: 0; transition: opacity .25s ease; } #panel.ready { opacity: 1; } /* Overlays sit centred over the frame column. */ .mai-overlay { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px 24px; gap: 14px; background: var(--mai-bg); } .mai-overlay.show { display: flex; } .mai-spinner { width: 34px; height: 34px; border: 3px solid var(--mai-spinner-track); border-top-color: var(--purple); border-radius: 50%; animation: mai-spin .8s linear infinite; } @keyframes mai-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .mai-spinner { animation: none; } #panel { transition: none; } } .mai-overlay h1 { font-size: 22px; font-weight: 700; letter-spacing: -.3px; } .mai-overlay p { color: var(--mai-muted); max-width: 420px; } .mai-overlay .mai-note { font-size: 12px; color: var(--mai-muted); } .mai-logo { width: 56px; height: 56px; border-radius: 14px; } .mai-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 12px 24px; border-radius: 10px; background: var(--purple); color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; transition: background .2s; } .mai-cta:hover { background: var(--purple-dark); } .mai-versions { font-variant-numeric: tabular-nums; } .mai-privacy { font-size: 12px; color: var(--mai-muted); max-width: 460px; } .mai-privacy a { color: inherit; } /* The shared header (/shared/site-header.js) is light-only across the marketing site. This page follows the dashboard theme, so under dark it would sit white over a dark shell — restyle it here, page-locally, rather than touching the shared file (cache-bust + every page). Selectors carry [data-theme] so they beat the header's own injected rules whatever the order. */ [data-theme="dark"] .site-header { background: rgba(15, 20, 25, .9); border-bottom-color: var(--mai-border); } [data-theme="dark"] .site-header .nav-logo { color: var(--mai-text); } [data-theme="dark"] .site-header .nav-links a { color: var(--mai-muted); } [data-theme="dark"] .site-header .nav-links a:hover { color: var(--mai-text); } [data-theme="dark"] .site-header .nav-links a.sh-dash { color: #a78bfa; } [data-theme="dark"] .site-header .sh-lang { border-color: var(--mai-border); color: var(--mai-muted); } [data-theme="dark"] .site-header .sh-toggle { color: var(--mai-text); } @media (max-width: 768px) { [data-theme="dark"] .site-header .nav-links { background: var(--mai-card); border-bottom-color: var(--mai-border); } }