/* BEGIN app-v2.css */
/* Wonda AI — design tokens + baseline + admin shell */
:root {
--primary: #1c1c3c;
--accent: #FF007E;
--text: #0f172a;
--muted: #64748b;
--surface: #ffffff;
--surface-2: #f8fafc;
--border: #e5e7eb;
--success: #15803d;
--warning: #b45309;
--danger: #b91c1c;
--radius: 14px;
--radius-sm: 8px;
--shadow: 0 1px 3px rgba(0,0,0,.06);
--shadow-lg: 0 10px 30px -12px rgba(0,0,0,.15);
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-mono: ui-monospace, Menlo, Monaco, Consolas, monospace;
--sidebar-w: 240px;
}
*,
*::before,
*::after { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--surface-2);
color: var(--text);
font-family: var(--font-sans);
font-size: 15px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code, pre {
font-family: var(--font-mono);
font-size: 13px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 6px;
padding: 2px 6px;
}
/* ---------- Landing ---------- */
.wonda-landing {
min-height: 100vh;
display: grid;
place-items: center;
padding: 24px;
}
.wonda-landing__card {
max-width: 560px;
width: 100%;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 32px;
}
.wonda-landing__card h1 {
margin: 0 0 12px;
font-size: 26px;
font-weight: 600;
color: var(--primary);
}
.wonda-landing__lead { margin: 0 0 24px; color: var(--muted); }
.wonda-landing__meta {
display: grid;
grid-template-columns: 120px 1fr;
gap: 6px 16px;
margin: 0;
font-size: 13px;
}
.wonda-landing__meta dt { color: var(--muted); font-weight: 500; }
.wonda-landing__meta dd { margin: 0; font-family: var(--font-mono); word-break: break-all; }
/* ---------- Buttons ---------- */
.wonda-btn {
display: inline-block;
padding: 9px 18px;
background: var(--primary);
color: #fff;
border: 0;
border-radius: var(--radius-sm);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background .12s ease;
text-decoration: none;
}
.wonda-btn:hover { background: #0d0d1f; text-decoration: none; color: #fff; }
.wonda-btn--secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.wonda-btn--secondary:hover { background: #eef2f7; color: var(--text); }
.wonda-btn--accent { background: var(--accent); }
.wonda-btn--accent:hover { background: #E00070; }
.wonda-btn--block { display: block; width: 100%; text-align: center; }
.wonda-btn[disabled] { opacity: .55; cursor: not-allowed; }
/* ---------- Form controls ---------- */
.wonda-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.wonda-field label { font-size: 13px; font-weight: 500; color: var(--text); }
.wonda-field input,
.wonda-field select,
.wonda-field textarea {
width: 100%;
padding: 9px 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-family: inherit;
font-size: 14px;
background: var(--surface);
color: var(--text);
}
.wonda-field input:focus,
.wonda-field select:focus,
.wonda-field textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(255,0,126,.12);
}
.wonda-field small { color: var(--muted); font-size: 12px; }
/* ---------- Notices ---------- */
.wonda-notice { padding: 12px 16px; border-radius: var(--radius-sm); margin: 12px 0; font-size: 14px; }
.wonda-notice--info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.wonda-notice--warn { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.wonda-notice--error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.wonda-notice--ok { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
/* ---------- App shell ---------- */
.wonda-shell {
display: grid;
grid-template-columns: var(--sidebar-w) 1fr;
min-height: 100vh;
}
.wonda-sidebar {
background: var(--primary);
color: #cbd5e1;
display: flex;
flex-direction: column;
padding: 20px 0;
}
.wonda-sidebar__brand {
padding: 0 20px 20px;
font-size: 18px;
font-weight: 700;
color: #fff;
border-bottom: 1px solid rgba(255,255,255,.08);
margin-bottom: 12px;
letter-spacing: .3px;
}
.wonda-sidebar__brand a { color: #fff; text-decoration: none; }
.wonda-sidebar__nav { flex: 1; display: flex; flex-direction: column; }
.wonda-sidebar__link {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 20px;
color: #cbd5e1;
font-size: 14px;
font-weight: 500;
border-left: 3px solid transparent;
transition: background .12s, color .12s;
text-decoration: none;
}
.wonda-sidebar__link:hover { background: rgba(255,255,255,.05); color: #fff; text-decoration: none; }
.wonda-sidebar__link.active { background: rgba(255,255,255,.1); color: #fff; border-left-color: var(--accent); }
.wonda-sidebar__link small { color: #94a3b8; font-size: 11px; margin-left: auto; text-transform: uppercase; letter-spacing: .5px; }
.wonda-sidebar__foot {
padding: 16px 20px 0;
border-top: 1px solid rgba(255,255,255,.08);
font-size: 12px;
color: #94a3b8;
}
.wonda-sidebar__foot strong { display: block; color: #e2e8f0; font-size: 13px; margin-bottom: 4px; }
.wonda-sidebar__foot a { color: #cbd5e1; }
.wonda-sidebar__foot a:hover { color: #fff; }
.wonda-shell__main {
display: flex;
flex-direction: column;
min-width: 0;
}
.wonda-topbar {
background: var(--surface);
border-bottom: 1px solid var(--border);
padding: 14px 28px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.wonda-topbar__title {
font-size: 17px;
font-weight: 600;
color: var(--primary);
margin: 0;
}
.wonda-topbar__meta { font-size: 13px; color: var(--muted); }
.wonda-topbar__actions { display: flex; align-items: center; gap: 12px; }
.wonda-content {
flex: 1;
padding: 28px;
max-width: 1280px;
width: 100%;
}
/* ---------- Cards ---------- */
.wonda-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 24px;
box-shadow: var(--shadow);
margin-bottom: 20px;
}
.wonda-card h1,
.wonda-card h2 {
margin-top: 0;
color: var(--primary);
}
.wonda-card h2 { font-size: 17px; font-weight: 600; }
.wonda-card p { color: var(--text); }
.wonda-grid {
display: grid;
gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.wonda-stat {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 20px;
}
.wonda-stat__label { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 6px; }
.wonda-stat__value { font-size: 28px; font-weight: 700; color: var(--primary); }
/* ---------- Responsive ---------- */
@media (max-width: 900px) {
.wonda-shell { grid-template-columns: 1fr; }
.wonda-sidebar {
flex-direction: row;
overflow-x: auto;
padding: 10px;
align-items: center;
}
.wonda-sidebar__brand { border: 0; padding: 0 14px 0 0; margin: 0; }
.wonda-sidebar__nav { flex-direction: row; }
.wonda-sidebar__link { padding: 8px 12px; border-left: 0; border-bottom: 3px solid transparent; white-space: nowrap; }
.wonda-sidebar__link.active { border-left: 0; border-bottom-color: var(--accent); }
.wonda-sidebar__foot { display: none; }
.wonda-content { padding: 20px; }
}
/* ==========================================================================
Phase 10 additions — components used by the admin and client dashboards
========================================================================== */
/* ---------- Form grid ----------
Two-up grid used inside admin and client forms. Collapses to a single
column below 700px. */
.wonda-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 4px;
}
@media (max-width: 700px) {
.wonda-form-grid { grid-template-columns: 1fr; }
}
/* ---------- Form section ----------
A visual subdivision inside a large card. Heading + horizontal rule. */
.wonda-form-section {
border-top: 1px solid var(--border);
padding-top: 18px;
margin-top: 18px;
}
.wonda-form-section:first-of-type {
border-top: 0;
padding-top: 0;
margin-top: 0;
}
.wonda-form-section > h3 {
margin: 0 0 12px;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .5px;
color: var(--muted);
}
/* ---------- Toggle ----------
A checkbox row that reads as a two-line option with a title and a hint. */
.wonda-toggle {
display: flex !important;
align-items: flex-start;
gap: 12px;
padding: 12px 14px;
margin: 8px 0;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface);
cursor: pointer;
transition: border-color .12s, background .12s;
}
.wonda-toggle:hover { border-color: #cbd5e1; background: #fbfcfe; }
.wonda-toggle input[type="checkbox"] {
width: 18px;
height: 18px;
margin: 2px 0 0;
accent-color: var(--accent);
cursor: pointer;
flex-shrink: 0;
}
.wonda-toggle__label {
display: flex;
flex-direction: column;
gap: 2px;
line-height: 1.4;
min-width: 0;
}
.wonda-toggle__label strong {
font-size: 14px;
font-weight: 600;
color: var(--text);
display: block;
}
.wonda-toggle__label small {
font-size: 12px;
color: var(--muted);
display: block;
}
/* ---------- Upload widget ----------
Square preview + actions row + status line. Used in admin site-edit for
the header logo and the launcher icon. */
.wonda-upload {
display: flex;
flex-direction: column;
gap: 10px;
padding: 14px;
border: 1px dashed var(--border);
border-radius: var(--radius-sm);
background: var(--surface-2);
}
.wonda-upload__preview {
width: 128px;
height: 128px;
border-radius: 10px;
background: var(--surface);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
.wonda-upload__preview img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.wonda-upload__placeholder {
font-size: 12px;
color: var(--muted);
text-align: center;
padding: 8px;
}
.wonda-upload__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.wonda-upload__actions label.wonda-btn {
position: relative;
overflow: hidden;
cursor: pointer;
}
.wonda-upload__actions input[type="file"] {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
font-size: 200px;
}
.wonda-upload__status {
font-size: 12px;
margin: 0;
min-height: 16px;
color: var(--muted);
}
.wonda-upload__status--ok { color: var(--success); }
.wonda-upload__status--error { color: var(--danger); }
.wonda-upload__status--info { color: var(--muted); }
/* ---------- Pills ----------
Small status chips used on the client dashboard header. */
.wonda-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
line-height: 1;
border: 1px solid transparent;
white-space: nowrap;
}
.wonda-pill__dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
.wonda-pill--ok { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.wonda-pill--bad { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.wonda-pill--warn { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.wonda-pill--info { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
/* ---------- Split layout ----------
Two-column content area used on the client dashboard. First column is
wider; second is a narrower sidebar-ish panel. Collapses below 900px. */
.wonda-split {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 20px;
align-items: start;
}
@media (max-width: 900px) {
.wonda-split { grid-template-columns: 1fr; }
}
/* ---------- Empty state ----------
Friendly "nothing here yet" panel used inside cards. */
.wonda-empty {
text-align: center;
padding: 32px 20px;
background: var(--surface-2);
border: 1px dashed var(--border);
border-radius: var(--radius-sm);
color: var(--muted);
}
.wonda-empty h3 {
margin: 0 0 6px;
font-size: 15px;
font-weight: 600;
color: var(--text);
}
.wonda-empty p {
margin: 0 0 14px;
font-size: 13px;
color: var(--muted);
}
/* ---------- Activity feed ----------
Compact list of recent items with a dot, title, time and action. */
.wonda-activity {
display: flex;
flex-direction: column;
gap: 0;
}
.wonda-activity__item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--border);
font-size: 14px;
}
.wonda-activity__item:last-child { border-bottom: 0; }
.wonda-activity__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
flex-shrink: 0;
}
.wonda-activity__body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.wonda-activity__body code {
font-size: 12px;
background: transparent;
border: 0;
padding: 0;
}
.wonda-activity__body small {
font-size: 12px;
color: var(--muted);
}
.wonda-activity__time {
font-size: 12px;
color: var(--muted);
white-space: nowrap;
}
/* ---------- Stat trend indicators ----------
Small ▲ / ▼ / — lines under a stat value. */
.wonda-stat__trend {
margin-top: 6px;
font-size: 12px;
font-weight: 500;
color: var(--muted);
}
.wonda-stat__trend--up { color: var(--success); }
.wonda-stat__trend--down { color: var(--danger); }
.wonda-stat__trend--flat { color: var(--muted); }
/* ---------- Feature grid (admin plan editor) ----------
Multi-column grid of feature checkboxes. */
.wonda-feature-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 8px;
}
.wonda-feature-check {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface);
font-size: 13px;
cursor: pointer;
transition: border-color .12s, background .12s;
}
.wonda-feature-check:hover { border-color: #cbd5e1; background: #fbfcfe; }
.wonda-feature-check input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--accent);
cursor: pointer;
flex-shrink: 0;
}
.wonda-feature-check span {
line-height: 1.3;
min-width: 0;
}
/* ---------- Large textarea ----------
Used on the knowledge base editor. */
textarea.large-text {
width: 100%;
min-height: 400px;
font-family: var(--font-mono);
font-size: 13px;
line-height: 1.6;
resize: vertical;
}
/* ---------- Sidebar section headers + scroll ---------- */
.wonda-sidebar__nav {
overflow-y: auto;
padding-bottom: 12px;
}
.wonda-sidebar__section {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1.2px;
color: rgba(255,255,255,.35);
padding: 18px 20px 6px;
font-weight: 700;
user-select: none;
}
.wonda-sidebar__section:first-child {
padding-top: 6px;
}
/* ============================================================
Plan comparison table
============================================================ */
.wonda-plan-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.wonda-plan-table th,
.wonda-plan-table td {
padding: 10px 14px;
text-align: center;
border-bottom: 1px solid var(--border);
vertical-align: middle;
}
.wonda-plan-table thead th {
vertical-align: top;
padding-top: 16px;
padding-bottom: 16px;
background: var(--surface-2);
}
.wonda-plan-table thead th:first-child {
background: transparent;
text-align: left;
font-weight: 600;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .04em;
font-size: 11px;
}
.wonda-plan-col {
min-width: 130px;
border-left: 1px solid var(--border);
}
.wonda-plan-col--current {
background: rgba(255, 0, 126, .06) !important;
}
.wonda-plan-name {
font-size: 14px;
font-weight: 700;
color: var(--primary);
margin-bottom: 2px;
}
.wonda-plan-price {
font-size: 12px;
color: var(--muted);
}
.wonda-plan-current {
display: inline-block;
margin-top: 6px;
padding: 2px 10px;
background: var(--accent);
color: #fff;
border-radius: 20px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
}
.wonda-plan-row-header td {
text-align: left;
font-size: 11px;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--muted);
font-weight: 700;
background: var(--surface-2);
padding: 8px 14px;
}
.wonda-plan-label {
text-align: left;
font-weight: 500;
color: var(--text);
}
.wonda-plan-cell {
color: var(--text);
}
.wonda-plan-cell--current {
background: rgba(255, 0, 126, .04);
}
.wonda-plan-tick {
display: inline-block;
width: 22px;
height: 22px;
line-height: 22px;
border-radius: 50%;
background: #f0fdf4;
color: #15803d;
font-weight: 700;
font-size: 12px;
}
.wonda-plan-dash {
color: #cbd5e1;
font-size: 14px;
}
@media (max-width: 700px) {
.wonda-plan-table th,
.wonda-plan-table td {
padding: 8px 10px;
font-size: 12px;
}
.wonda-plan-name { font-size: 13px; }
}
/* ============================================================
Locked feature fields (settings page)
============================================================ */
.wonda-field--locked {
position: relative;
opacity: .62;
}
.wonda-field--locked input,
.wonda-field--locked select,
.wonda-field--locked textarea {
background: var(--surface-2);
cursor: not-allowed;
}
.wonda-lock-badge {
display: inline-block;
margin-left: 6px;
padding: 1px 8px;
background: #fffbeb;
color: #92400e;
border: 1px solid #fde68a;
border-radius: 10px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
}
/* ============================================================
Plan comparison promo + inline lock hints
============================================================ */
/* Hero card on plan-comparison page */
.wonda-card--hero {
background: linear-gradient(135deg,
color-mix(in srgb, var(--accent) 12%, #ffffff) 0%,
#ffffff 70%);
border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
/* Sidebar promo entry — stands out from the regular links */
.wonda-sidebar__link--promo {
background: linear-gradient(90deg,
color-mix(in srgb, var(--accent) 35%, transparent) 0%,
transparent 100%);
border-left-color: var(--accent) !important;
color: #fff !important;
font-weight: 600;
position: relative;
}
.wonda-sidebar__link--promo:hover {
background: linear-gradient(90deg,
color-mix(in srgb, var(--accent) 55%, transparent) 0%,
transparent 100%);
}
.wonda-sidebar__link--promo.active {
background: linear-gradient(90deg,
color-mix(in srgb, var(--accent) 65%, transparent) 0%,
transparent 100%);
}
.wonda-sidebar__promo-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #fbbf24;
margin-left: auto;
box-shadow: 0 0 0 3px rgba(251, 191, 36, .25);
}
/* Inline plan badge — sits next to labels, in flex rows, everywhere */
.wonda-plan-badge {
display: inline-block;
padding: 2px 9px;
border-radius: 10px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
color: #fff;
vertical-align: middle;
line-height: 1.5;
margin-left: 6px;
white-space: nowrap;
}
/* Lock hint block — replaces the old upgrade hint */
.wonda-lock-hint {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
padding: 10px 12px;
margin-top: 6px;
background: #fffbeb;
border: 1px solid #fde68a;
border-radius: 10px;
font-size: 12px;
color: #92400e;
line-height: 1.4;
}
.wonda-lock-hint__msg {
color: #92400e;
}
.wonda-lock-hint__link {
margin-left: auto;
color: #92400e;
font-weight: 600;
text-decoration: underline;
white-space: nowrap;
}
.wonda-lock-hint__link:hover { text-decoration: none; }
/* Locked field — subtle dimming + disabled cursor */
.wonda-field--locked label {
display: inline-flex;
align-items: center;
gap: 0;
}
.wonda-field--locked input,
.wonda-field--locked select,
.wonda-field--locked textarea {
background: var(--surface-2);
cursor: not-allowed;
opacity: .8;
}
/* Locked toggle — overrides the clickable look */
.wonda-toggle--locked {
opacity: .68;
cursor: not-allowed;
}
.wonda-toggle--locked .wonda-toggle__label strong::after {
content: ' 🔒';
font-size: 11px;
}
/* Dark mode */
.wonda-dark .wonda-lock-hint,
[data-theme="dark"] .wonda-lock-hint {
background: rgba(180, 83, 9, .12);
border-color: rgba(180, 83, 9, .35);
color: #fbbf24;
}
.wonda-dark .wonda-lock-hint__msg,
[data-theme="dark"] .wonda-lock-hint__msg { color: #fbbf24; }
.wonda-dark .wonda-lock-hint__link,
[data-theme="dark"] .wonda-lock-hint__link { color: #fbbf24; }
/* ============================================================
Plan comparison promo + inline lock hints
============================================================ */
/* Hero card on plan-comparison page */
.wonda-card--hero {
background: linear-gradient(135deg,
color-mix(in srgb, var(--accent) 12%, #ffffff) 0%,
#ffffff 70%);
border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
/* Sidebar promo entry — stands out from the regular links */
.wonda-sidebar__link--promo {
background: linear-gradient(90deg,
color-mix(in srgb, var(--accent) 35%, transparent) 0%,
transparent 100%);
border-left-color: var(--accent) !important;
color: #fff !important;
font-weight: 600;
position: relative;
}
.wonda-sidebar__link--promo:hover {
background: linear-gradient(90deg,
color-mix(in srgb, var(--accent) 55%, transparent) 0%,
transparent 100%);
}
.wonda-sidebar__link--promo.active {
background: linear-gradient(90deg,
color-mix(in srgb, var(--accent) 65%, transparent) 0%,
transparent 100%);
}
.wonda-sidebar__promo-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #fbbf24;
margin-left: auto;
box-shadow: 0 0 0 3px rgba(251, 191, 36, .25);
}
/* Inline plan badge — sits next to labels, in flex rows, everywhere */
.wonda-plan-badge {
display: inline-block;
padding: 2px 9px;
border-radius: 10px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
color: #fff;
vertical-align: middle;
line-height: 1.5;
margin-left: 6px;
white-space: nowrap;
}
/* Lock hint block — replaces the old upgrade hint */
.wonda-lock-hint {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
padding: 10px 12px;
margin-top: 6px;
background: #fffbeb;
border: 1px solid #fde68a;
border-radius: 10px;
font-size: 12px;
color: #92400e;
line-height: 1.4;
}
.wonda-lock-hint__msg {
color: #92400e;
}
.wonda-lock-hint__link {
margin-left: auto;
color: #92400e;
font-weight: 600;
text-decoration: underline;
white-space: nowrap;
}
.wonda-lock-hint__link:hover { text-decoration: none; }
/* Locked field — subtle dimming + disabled cursor */
.wonda-field--locked label {
display: inline-flex;
align-items: center;
gap: 0;
}
.wonda-field--locked input,
.wonda-field--locked select,
.wonda-field--locked textarea {
background: var(--surface-2);
cursor: not-allowed;
opacity: .8;
}
/* Locked toggle — overrides the clickable look */
.wonda-toggle--locked {
opacity: .68;
cursor: not-allowed;
}
.wonda-toggle--locked .wonda-toggle__label strong::after {
content: ' 🔒';
font-size: 11px;
}
/* Dark mode */
.wonda-dark .wonda-lock-hint,
[data-theme="dark"] .wonda-lock-hint {
background: rgba(180, 83, 9, .12);
border-color: rgba(180, 83, 9, .35);
color: #fbbf24;
}
.wonda-dark .wonda-lock-hint__msg,
[data-theme="dark"] .wonda-lock-hint__msg { color: #fbbf24; }
.wonda-dark .wonda-lock-hint__link,
[data-theme="dark"] .wonda-lock-hint__link { color: #fbbf24; }
/* ============================================================
Sidebar icons (Font Awesome inline SVGs)
============================================================ */
.wonda-sidebar__link .wonda-sidebar__icon {
width: 16px;
height: 16px;
flex-shrink: 0;
opacity: .75;
transition: opacity .15s ease;
}
.wonda-sidebar__link .wonda-sidebar__icon svg {
width: 16px;
height: 16px;
display: block;
}
.wonda-sidebar__link:hover .wonda-sidebar__icon,
.wonda-sidebar__link.active .wonda-sidebar__icon {
opacity: 1;
}
.wonda-sidebar__link .wonda-sidebar__label {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Lock icon inside plan badges (Font Awesome inline SVG) */
.wonda-plan-badge .wonda-plan-lock-icon {
display: inline-flex;
align-items: center;
vertical-align: -2px;
margin-right: 2px;
}
.wonda-plan-badge .wonda-plan-lock-icon svg {
width: 11px;
height: 11px;
display: block;
}
/* ============================================================
Sticky sidebar — both consoles
============================================================ */
@media (min-width: 901px) {
.wonda-shell {
align-items: start;
}
.wonda-sidebar {
position: sticky;
top: 0;
align-self: start;
height: 100vh;
overflow-y: auto;
overscroll-behavior: contain;
}
.wonda-sidebar__nav {
overflow-y: auto;
flex: 1;
min-height: 0;
}
}
/* ============================================================
Thin scrollbars
============================================================ */
.wonda-sidebar,
.wonda-sidebar__nav,
.wonda-content,
textarea.large-text {
scrollbar-width: thin;
scrollbar-color: rgba(148, 163, 184, .4) transparent;
}
.wonda-sidebar::-webkit-scrollbar,
.wonda-sidebar__nav::-webkit-scrollbar,
.wonda-content::-webkit-scrollbar,
textarea.large-text::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.wonda-sidebar::-webkit-scrollbar-track,
.wonda-sidebar__nav::-webkit-scrollbar-track,
.wonda-content::-webkit-scrollbar-track,
textarea.large-text::-webkit-scrollbar-track {
background: transparent;
}
.wonda-sidebar::-webkit-scrollbar-thumb,
.wonda-sidebar__nav::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, .14);
border-radius: 6px;
}
.wonda-sidebar::-webkit-scrollbar-thumb:hover,
.wonda-sidebar__nav::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, .28);
}
.wonda-content::-webkit-scrollbar-thumb,
textarea.large-text::-webkit-scrollbar-thumb {
background: rgba(15, 23, 42, .18);
border-radius: 6px;
}
.wonda-content::-webkit-scrollbar-thumb:hover,
textarea.large-text::-webkit-scrollbar-thumb:hover {
background: rgba(15, 23, 42, .32);
}
/* ============================================================
Layout refinements — Phase UX
============================================================ */
/* Form fields inside a form-grid: toggles and textareas span both columns */
.wonda-form-grid > .wonda-toggle,
.wonda-form-grid > .wonda-field--wide,
.wonda-form-grid > textarea.large-text {
grid-column: 1 / -1;
}
/* Compact form-grid variant — up to 3 columns on wide screens */
@media (min-width: 1100px) {
.wonda-form-grid--3 {
grid-template-columns: 1fr 1fr 1fr;
}
}
/* Tighter sidebar — fits more items without scroll */
.wonda-sidebar__link {
padding: 7px 20px !important;
font-size: 13px !important;
}
.wonda-sidebar__section {
padding: 12px 20px 4px !important;
font-size: 9.5px !important;
letter-spacing: 1px !important;
}
.wonda-sidebar__brand {
padding: 16px 20px 14px !important;
font-size: 16px !important;
margin-bottom: 6px !important;
}
.wonda-sidebar__foot {
padding: 12px 20px 0 !important;
font-size: 11px !important;
}
.wonda-sidebar__link .wonda-sidebar__icon {
margin-right: 8px !important;
}
/* ============================================================
Brand logo + version alignment (sidebar + forms)
============================================================ */
.wonda-sidebar__brand-link {
display: inline-flex;
align-items: flex-end;
gap: 6px;
text-decoration: none;
color: #fff;
max-width: 100%;
}
.wonda-sidebar__brand-link:hover { text-decoration: none; color: #fff; }
.wonda-sidebar__brand-logo {
max-height: 26px;
width: auto;
max-width: 150px;
object-fit: contain;
display: block;
}
.wonda-sidebar__brand-text {
font-size: 16px;
font-weight: 700;
letter-spacing: .3px;
line-height: 1;
color: #fff;
}
.wonda-sidebar__version {
font-size: 10px;
font-weight: 500;
letter-spacing: .02em;
line-height: 1;
color: rgba(255, 255, 255, .55);
margin-bottom: 1px;
white-space: nowrap;
pointer-events: none;
}
/* Auth forms brand */
.wonda-auth__brand {
display: inline-flex !important;
align-items: flex-end;
gap: 6px;
text-decoration: none;
max-width: 100%;
}
.wonda-auth__brand-logo {
max-height: 32px;
width: auto;
max-width: 200px;
object-fit: contain;
display: block;
}
.wonda-auth__brand-text {
font-size: 16px;
font-weight: 700;
color: var(--primary);
line-height: 1;
letter-spacing: .3px;
}
.wonda-auth__brand-version {
font-size: 10px;
font-weight: 500;
color: var(--muted);
line-height: 1;
margin-bottom: 1px;
white-space: nowrap;
}
/* Mobile — smaller sidebar logo */
@media (max-width: 900px) {
.wonda-sidebar__brand-logo {
max-height: 22px;
max-width: 120px;
}
.wonda-sidebar__brand-text { font-size: 15px; }
.wonda-sidebar__version { font-size: 9px; }
}
/* Forms logo — bigger, centred */
.wonda-auth__card {
text-align: center;
}
.wonda-auth__brand {
display: inline-flex !important;
align-items: flex-end !important;
justify-content: center !important;
gap: 8px !important;
margin: 0 auto 28px !important;
max-width: 100% !important;
text-decoration: none !important;
}
.wonda-auth__brand-logo {
max-height: 64px !important;
height: auto !important;
width: auto !important;
max-width: 260px !important;
object-fit: contain !important;
display: block !important;
margin: 0 !important;
}
.wonda-auth__brand-text {
font-size: 22px !important;
font-weight: 700 !important;
}
.wonda-auth__brand-version {
font-size: 12px !important;
margin-bottom: 2px !important;
}
/* Reset the heading centering for form content below */
.wonda-auth__title,
.wonda-auth__body {
text-align: left;
}
.wonda-auth__title {
text-align: center;
}
/* ============================================================
Topbar notification bell (client dashboard)
============================================================ */
.wonda-bell { position: relative; display: inline-block; }
.wonda-bell__btn {
position: relative;
width: 36px;
height: 36px;
border-radius: 10px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
transition: background .12s ease, border-color .12s ease;
}
.wonda-bell__btn:hover { background: #f1f5f9; border-color: #cbd5e1; }
.wonda-bell__btn svg { width: 17px; height: 17px; display: block; }
.wonda-bell__badge {
position: absolute;
top: -5px;
right: -5px;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 9px;
background: #b91c1c;
color: #fff;
font-size: 10px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 0 2px var(--surface);
line-height: 1;
}
.wonda-bell__panel {
position: absolute;
top: calc(100% + 8px);
right: 0;
width: 360px;
max-height: 460px;
overflow-y: auto;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: 0 16px 40px -12px rgba(15, 23, 42, .25);
z-index: 500;
}
.wonda-bell__head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
border-bottom: 1px solid var(--border);
font-size: 13px;
}
.wonda-bell__head small { color: var(--muted); font-weight: 500; }
.wonda-bell__empty { padding: 24px 16px; text-align: center; color: var(--muted); font-size: 13px; }
.wonda-bell__list { list-style: none; padding: 0; margin: 0; }
.wonda-bell__item {
padding: 12px 16px;
border-bottom: 1px solid var(--border);
font-size: 13px;
}
.wonda-bell__item:last-child { border-bottom: 0; }
.wonda-bell__item--unread { background: rgba(255, 0, 126, .04); }
.wonda-bell__item-title { font-weight: 600; color: var(--text); }
.wonda-bell__item-detail { color: var(--muted); margin-top: 3px; line-height: 1.4; }
.wonda-bell__item-time { color: #94a3b8; font-size: 11px; margin-top: 4px; }
.wonda-bell__foot {
padding: 10px 16px;
border-top: 1px solid var(--border);
text-align: right;
font-size: 12px;
background: var(--surface-2);
}
@media (max-width: 600px) {
.wonda-bell__panel { width: 300px; right: -8px; }
}
/* ============================================================
Colour picker — pairs with a text field
============================================================ */
.wonda-color-picker {
display: flex;
gap: 8px;
align-items: stretch;
}
.wonda-color-picker input[type="color"] {
width: 48px;
height: auto;
min-height: 40px;
padding: 3px;
cursor: pointer;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface);
flex-shrink: 0;
-webkit-appearance: none;
appearance: none;
}
.wonda-color-picker input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.wonda-color-picker input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 4px; }
.wonda-color-picker input[type="color"]::-moz-color-swatch { border: 0; border-radius: 4px; }
.wonda-color-picker input[type="text"] {
flex: 1;
font-family: var(--font-mono);
font-size: 13px;
letter-spacing: .04em;
text-transform: lowercase;
}
/* ============================================================
Impersonation banner (client dashboard, admin view)
============================================================ */
.wonda-impersonate-banner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap;
padding: 12px 28px;
background: linear-gradient(90deg, #fef3c7 0%, #fde68a 100%);
border-bottom: 1px solid #f59e0b;
color: #78350f;
font-size: 13px;
line-height: 1.4;
position: sticky;
top: 0;
z-index: 600;
box-shadow: 0 2px 6px rgba(120, 53, 15, .08);
}
.wonda-impersonate-banner__text {
min-width: 0;
flex: 1;
}
.wonda-impersonate-banner__text strong {
color: #78350f;
font-weight: 700;
margin-right: 4px;
}
.wonda-impersonate-banner__text em {
font-style: normal;
font-weight: 600;
color: #7c2d12;
word-break: break-all;
}
.wonda-impersonate-banner .wonda-btn {
background: #78350f;
color: #fff;
border: 0;
flex-shrink: 0;
}
.wonda-impersonate-banner .wonda-btn:hover {
background: #5b2a0b;
color: #fff;
}
@media (max-width: 700px) {
.wonda-impersonate-banner {
padding: 10px 16px;
font-size: 12.5px;
}
}
/* ============================================================
Impersonation banner (client dashboard, admin view)
============================================================ */
.wonda-impersonate-banner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap;
padding: 12px 28px;
background: linear-gradient(90deg, #fef3c7 0%, #fde68a 100%);
border-bottom: 1px solid #f59e0b;
color: #78350f;
font-size: 13px;
line-height: 1.4;
position: sticky;
top: 0;
z-index: 600;
box-shadow: 0 2px 6px rgba(120, 53, 15, .08);
}
.wonda-impersonate-banner__text {
min-width: 0;
flex: 1;
}
.wonda-impersonate-banner__text strong {
color: #78350f;
font-weight: 700;
margin-right: 4px;
}
.wonda-impersonate-banner__text em {
font-style: normal;
font-weight: 600;
color: #7c2d12;
word-break: break-all;
}
.wonda-impersonate-banner .wonda-btn {
background: #78350f;
color: #fff;
border: 0;
flex-shrink: 0;
}
.wonda-impersonate-banner .wonda-btn:hover {
background: #5b2a0b;
color: #fff;
}
@media (max-width: 700px) {
.wonda-impersonate-banner {
padding: 10px 16px;
font-size: 12.5px;
}
}
/* ============================================================
WONDA_MOBILE_DRAWER_CSS
Mobile-first dashboard: off-canvas sidebar, proper gutters,
readable tables, thumb-friendly controls. Appended after all
existing rules so it wins the cascade on small screens.
============================================================ */
@media (max-width: 900px) {
.wonda-shell { grid-template-columns: 1fr !important; }
.wonda-sidebar {
position: fixed !important;
top: 0; left: 0; bottom: 0;
width: 288px;
max-width: 86vw;
height: 100vh;
height: 100dvh;
padding: 14px 0 !important;
flex-direction: column !important;
align-items: stretch !important;
overflow-x: hidden !important;
overflow-y: auto !important;
transform: translateX(-100%);
transition: transform .26s cubic-bezier(.4,0,.2,1);
z-index: 1000;
box-shadow: 0 0 40px rgba(0,0,0,.35);
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.wonda-sidebar.wonda-sidebar--open { transform: translateX(0) !important; }
.wonda-sidebar__brand {
border: 0 !important;
border-bottom: 1px solid rgba(255,255,255,.08) !important;
padding: 6px 20px 14px !important;
margin: 0 0 8px !important;
}
.wonda-sidebar__nav {
flex-direction: column !important;
overflow-y: auto !important;
flex: 1;
min-height: 0;
}
.wonda-sidebar__section {
padding: 14px 20px 4px !important;
font-size: 9.5px !important;
}
.wonda-sidebar__link {
padding: 12px 20px !important;
font-size: 14px !important;
border-left: 3px solid transparent !important;
border-bottom: 0 !important;
white-space: normal !important;
gap: 12px !important;
}
.wonda-sidebar__link.active { border-left-color: var(--accent) !important; }
.wonda-sidebar__link .wonda-sidebar__icon,
.wonda-sidebar__link .wonda-sidebar__icon svg {
width: 18px !important; height: 18px !important;
}
.wonda-sidebar__foot {
display: block !important;
padding: 14px 20px !important;
border-top: 1px solid rgba(255,255,255,.08) !important;
}
.wonda-sidebar-backdrop {
position: fixed; inset: 0;
background: rgba(15,23,42,.55);
opacity: 0; pointer-events: none;
transition: opacity .22s ease;
z-index: 999;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
.wonda-sidebar-backdrop.wonda-sidebar-backdrop--open {
opacity: 1; pointer-events: auto;
}
.wonda-shell__main { width: 100% !important; min-width: 0; }
.wonda-topbar {
padding: 10px 14px !important;
gap: 10px !important;
min-height: 56px;
}
.wonda-topbar__title {
font-size: 15px !important;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 0;
}
.wonda-topbar__meta { display: none !important; }
.wonda-topbar__actions { gap: 8px !important; flex-shrink: 0; }
.wonda-hamburger {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 40px; height: 40px;
padding: 0;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
border-radius: 10px;
cursor: pointer;
flex-shrink: 0;
-webkit-tap-highlight-color: transparent;
}
.wonda-hamburger:active { background: var(--surface-2); }
.wonda-hamburger svg { width: 18px; height: 18px; display: block; }
.wonda-content { padding: 14px 12px 24px !important; }
.wonda-card {
padding: 16px !important;
border-radius: 12px !important;
margin-bottom: 14px !important;
}
.wonda-card h1 { font-size: 19px !important; }
.wonda-card h2 { font-size: 16px !important; margin-bottom: 10px !important; }
.wonda-card p { font-size: 14px; }
.wonda-form-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
.wonda-field { margin-bottom: 12px !important; }
.wonda-field input,
.wonda-field select,
.wonda-field textarea {
font-size: 15px !important;
padding: 11px 13px !important;
min-height: 44px;
}
.wonda-field textarea { min-height: 96px; }
textarea.large-text { min-height: 260px !important; font-size: 13px !important; }
.wonda-toggle { padding: 14px !important; margin: 8px 0 !important; }
.wonda-toggle input[type="checkbox"] {
width: 22px !important; height: 22px !important; margin-top: 0 !important;
}
.wonda-toggle__label strong { font-size: 14.5px !important; }
.wonda-toggle__label small { font-size: 12.5px !important; }
.wonda-btn {
padding: 10px 16px !important;
font-size: 13.5px !important;
min-height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.wonda-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
.wonda-stat { padding: 14px !important; border-radius: 12px !important; }
.wonda-stat__label { font-size: 11px !important; }
.wonda-stat__value { font-size: 22px !important; }
.wonda-stat__trend { font-size: 11.5px !important; }
.wonda-split { grid-template-columns: 1fr !important; gap: 14px !important; }
.wonda-card > div[style*="overflow-x:auto"],
.wonda-card > div[style*="overflow-x: auto"] {
margin: 0 -16px !important;
padding: 0 16px !important;
}
.wonda-card table { font-size: 13px !important; min-width: 100%; }
.wonda-card table th,
.wonda-card table td { padding: 10px 10px !important; white-space: nowrap; }
.wonda-card table th:first-child,
.wonda-card table td:first-child { padding-left: 4px !important; }
.wonda-card table th:last-child,
.wonda-card table td:last-child { padding-right: 4px !important; }
.wonda-card table td[style*="max-width"] {
white-space: normal !important;
max-width: 220px !important;
}
.wonda-card table td form { display: inline-block; margin: 2px 2px 2px 0; }
.wonda-card table td .wonda-btn {
padding: 6px 10px !important;
font-size: 12px !important;
min-height: 32px !important;
}
.wonda-notice { padding: 12px 14px !important; font-size: 13.5px !important; }
.wonda-upload { padding: 12px !important; }
.wonda-upload__preview { width: 110px !important; height: 110px !important; }
.wonda-card pre, .wonda-card code { word-break: break-all; white-space: pre-wrap; }
.wonda-bell__btn { width: 38px !important; height: 38px !important; }
.wonda-bell__panel {
position: fixed !important;
top: 64px !important; left: 12px !important; right: 12px !important;
width: auto !important;
max-height: calc(100vh - 84px) !important;
border-radius: 14px !important;
}
.wonda-impersonate-banner {
position: static !important;
padding: 10px 14px !important;
font-size: 12.5px !important;
flex-wrap: wrap;
}
.wonda-plan-table th,
.wonda-plan-table td { padding: 8px 10px !important; font-size: 12px !important; }
.wonda-feature-grid { grid-template-columns: 1fr !important; }
.wonda-hide-mobile { display: none !important; }
}
@media (max-width: 480px) {
.wonda-grid { grid-template-columns: 1fr !important; }
.wonda-stat__value { font-size: 20px !important; }
.wonda-content { padding: 12px 10px 24px !important; }
.wonda-card { padding: 14px !important; }
.wonda-topbar { padding: 8px 10px !important; }
.wonda-topbar__title { font-size: 14px !important; }
.wonda-hamburger { width: 38px; height: 38px; }
.wonda-sidebar { width: 260px; max-width: 88vw; }
.wonda-bell__panel { top: 58px !important; left: 8px !important; right: 8px !important; }
.wonda-card[style*="display:flex"] {
flex-direction: column;
align-items: flex-start !important;
}
.wonda-color-picker { flex-direction: row; }
.wonda-color-picker input[type="color"] { width: 44px; }
.wonda-card table { min-width: 520px; }
}
@media (min-width: 901px) {
.wonda-hamburger { display: none !important; }
.wonda-sidebar-backdrop { display: none !important; }
}
/* ==== END WONDA_MOBILE_DRAWER_CSS ==== */
/* ============================================================
WONDA_BRANDED_CONSOLE_CSS
Carries the sidebar's identity into the page canvas.
Everything is additive — nothing here removes an existing rule.
============================================================ */
/* ---------- Design tokens for the console ---------- */
:root {
--wonda-navy-1: #1c1c3c;
--wonda-navy-2: #2a2a52;
--wonda-navy-3: #141433;
--wonda-canvas-top: #f5f7fc;
--wonda-canvas-bottom: #fbfcff;
--wonda-card-border: rgba(28, 28, 60, .07);
--wonda-card-border-2: rgba(28, 28, 60, .12);
--wonda-tint-accent: rgba(255, 0, 126, .04);
--wonda-tint-navy: rgba(28, 28, 60, .035);
--wonda-shadow-rest:
0 1px 2px rgba(15, 23, 42, .035),
0 8px 24px -14px rgba(15, 23, 42, .10);
--wonda-shadow-hover:
0 1px 2px rgba(15, 23, 42, .04),
0 14px 32px -16px rgba(15, 23, 42, .14);
}
/* ---------- Page canvas ---------- */
body.wonda-body,
body {
background:
radial-gradient(900px 480px at 100% 0%, rgba(255, 0, 126, .05), transparent 60%),
radial-gradient(700px 420px at 0% 0%, rgba(28, 28, 60, .045), transparent 55%),
linear-gradient(180deg, var(--wonda-canvas-top) 0%, var(--wonda-canvas-bottom) 55%, var(--wonda-canvas-top) 100%);
background-attachment: fixed;
background-repeat: no-repeat;
}
/* Keep the auth pages on their existing gradient */
body.wonda-body--auth {
background:
radial-gradient(900px 480px at 50% 0%, rgba(255, 0, 126, .10), transparent 60%),
linear-gradient(135deg, #FFE5F2 0%, #f8fafc 100%);
}
/* ============================================================
Desktop treatment — the console look
============================================================ */
@media (min-width: 901px) {
/* ---------- Cards ---------- */
.wonda-card {
background: linear-gradient(180deg, #ffffff 0%, #fdfdff 100%);
border: 1px solid var(--wonda-card-border);
border-radius: 16px;
box-shadow: var(--wonda-shadow-rest);
transition: box-shadow .18s ease, border-color .18s ease;
}
.wonda-card:hover {
border-color: var(--wonda-card-border-2);
box-shadow: var(--wonda-shadow-hover);
}
/* Section headers inside cards get an accent bar */
.wonda-card > h2 {
position: relative;
padding-left: 14px;
font-size: 17px;
font-weight: 600;
color: var(--wonda-navy-1);
letter-spacing: -0.005em;
margin-top: 0;
}
.wonda-card > h2::before {
content: '';
position: absolute;
left: 0;
top: 4px;
bottom: 4px;
width: 3px;
border-radius: 2px;
background: linear-gradient(180deg,
var(--accent) 0%,
color-mix(in srgb, var(--accent) 45%, transparent) 100%);
}
/* ---------- Stats become hero elements ---------- */
.wonda-stat {
background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
border: 1px solid var(--wonda-card-border);
border-radius: 16px;
padding: 22px 22px 20px;
box-shadow: var(--wonda-shadow-rest);
position: relative;
overflow: hidden;
transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.wonda-stat:hover {
border-color: var(--wonda-card-border-2);
box-shadow: var(--wonda-shadow-hover);
transform: translateY(-1px);
}
/* Small accent tick in the top-left corner */
.wonda-stat::before {
content: '';
position: absolute;
top: 0;
left: 22px;
width: 30px;
height: 3px;
border-radius: 0 0 3px 3px;
background: linear-gradient(90deg,
var(--accent) 0%,
rgba(255, 0, 126, .18) 100%);
}
/* Soft brand glow in the top-right corner */
.wonda-stat::after {
content: '';
position: absolute;
top: -40px;
right: -40px;
width: 120px;
height: 120px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 0, 126, .07) 0%, transparent 70%);
pointer-events: none;
}
.wonda-stat__label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .09em;
color: var(--muted);
margin-bottom: 10px;
}
.wonda-stat__value {
font-size: 32px;
font-weight: 700;
color: var(--wonda-navy-1);
letter-spacing: -0.025em;
line-height: 1.05;
position: relative;
z-index: 1;
}
.wonda-stat__trend {
margin-top: 8px;
font-size: 12px;
font-weight: 500;
position: relative;
z-index: 1;
}
/* ---------- Tables get tinted headers ---------- */
.wonda-card table thead th {
background: linear-gradient(180deg, #f3f5fa 0%, #eef1f8 100%);
color: #475569;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
border-bottom: 1px solid var(--wonda-card-border-2) !important;
}
/* Nudge the base table padding up a touch */
.wonda-card table thead th,
.wonda-card table tbody td {
padding-top: 12px;
padding-bottom: 12px;
}
.wonda-card table tbody tr {
transition: background-color .12s ease;
}
.wonda-card table tbody tr:hover {
background: var(--wonda-tint-accent);
}
/* ---------- Buttons ---------- */
.wonda-btn {
background: linear-gradient(180deg, var(--wonda-navy-2) 0%, var(--wonda-navy-1) 100%);
border: 0;
box-shadow:
0 1px 2px rgba(15, 23, 42, .10),
inset 0 1px 0 rgba(255, 255, 255, .06);
transition: background .14s ease, box-shadow .14s ease, transform .1s ease;
}
.wonda-btn:hover {
background: linear-gradient(180deg, var(--wonda-navy-1) 0%, var(--wonda-navy-3) 100%);
box-shadow:
0 4px 10px -2px rgba(15, 23, 42, .18),
inset 0 1px 0 rgba(255, 255, 255, .08);
}
.wonda-btn:active { transform: translateY(1px); }
.wonda-btn--accent {
background: linear-gradient(180deg, #ff2a92 0%, #e60072 100%);
box-shadow:
0 1px 2px rgba(255, 0, 126, .22),
0 4px 12px -4px rgba(255, 0, 126, .28),
inset 0 1px 0 rgba(255, 255, 255, .14);
}
.wonda-btn--accent:hover {
background: linear-gradient(180deg, #e8006f 0%, #c8005f 100%);
box-shadow:
0 4px 14px -2px rgba(255, 0, 126, .34),
inset 0 1px 0 rgba(255, 255, 255, .16);
}
.wonda-btn--secondary {
background: #ffffff;
color: var(--text);
border: 1px solid var(--wonda-card-border-2);
box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}
.wonda-btn--secondary:hover {
background: #f8fafc;
border-color: rgba(28, 28, 60, .22);
}
.wonda-btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* ---------- Form fields ---------- */
.wonda-field input,
.wonda-field select,
.wonda-field textarea {
background: #fbfcff;
border: 1px solid var(--wonda-card-border-2);
transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
.wonda-field input:hover,
.wonda-field select:hover,
.wonda-field textarea:hover {
border-color: rgba(28, 28, 60, .22);
}
.wonda-field input:focus,
.wonda-field select:focus,
.wonda-field textarea:focus {
background: #ffffff;
border-color: var(--accent);
box-shadow: 0 0 0 4px rgba(255, 0, 126, .10);
}
/* Form section headers get a small accent tick */
.wonda-form-section > h3 {
position: relative;
padding-left: 12px;
font-size: 11.5px;
letter-spacing: .09em;
color: #475569;
}
.wonda-form-section > h3::before {
content: '';
position: absolute;
left: 0;
top: 3px;
bottom: 3px;
width: 3px;
border-radius: 2px;
background: var(--accent);
opacity: .75;
}
/* ---------- Notices ---------- */
.wonda-notice {
border-radius: 12px;
padding: 14px 18px;
line-height: 1.55;
box-shadow: 0 1px 2px rgba(15, 23, 42, .035);
}
/* ---------- Empty states ---------- */
.wonda-empty {
background: linear-gradient(180deg, #fbfcff 0%, #f4f6fb 100%);
border: 1px dashed rgba(28, 28, 60, .14);
border-radius: 14px;
padding: 40px 24px;
color: var(--muted);
}
.wonda-empty h3 {
color: var(--wonda-navy-1);
font-size: 16px;
font-weight: 600;
}
/* ---------- Topbar refinement ---------- */
.wonda-topbar {
background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
border-bottom: 1px solid var(--wonda-card-border);
box-shadow: 0 1px 0 rgba(15, 23, 42, .02);
}
.wonda-topbar__title {
letter-spacing: -0.01em;
color: var(--wonda-navy-1);
}
.wonda-topbar__meta code {
background: #f3f5fa;
border-color: var(--wonda-card-border);
color: #475569;
}
/* ---------- Sidebar footer nudge ---------- */
.wonda-sidebar__link .wonda-sidebar__label {
letter-spacing: .005em;
}
/* ---------- Toggle switches ---------- */
.wonda-toggle {
transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
.wonda-toggle:hover {
border-color: var(--wonda-card-border-2);
background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}
.wonda-toggle input[type="checkbox"]:checked + .wonda-toggle__label strong {
color: var(--wonda-navy-1);
}
/* ---------- Feature checklist ---------- */
.wonda-feature-check {
transition: border-color .14s ease, background .14s ease;
}
.wonda-feature-check:hover {
border-color: var(--wonda-card-border-2);
background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
}
.wonda-feature-check input[type="checkbox"]:checked {
filter: drop-shadow(0 0 4px rgba(255, 0, 126, .35));
}
/* ---------- Plan badges get a soft halo ---------- */
.wonda-plan-badge {
box-shadow: 0 1px 2px rgba(15, 23, 42, .10);
}
.wonda-plan-tick {
background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
box-shadow: inset 0 0 0 1px rgba(21, 128, 61, .14);
}
/* ---------- Activity feed ---------- */
.wonda-activity__dot {
box-shadow: 0 0 0 3px rgba(255, 0, 126, .10);
}
.wonda-activity__item:hover {
background: var(--wonda-tint-accent);
}
.wonda-activity__item {
transition: background-color .12s ease;
margin: 0 -16px;
padding-left: 16px;
padding-right: 16px;
border-radius: 8px;
}
/* ---------- Pill refinement ---------- */
.wonda-pill {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
/* ---------- Impersonation banner ---------- */
.wonda-impersonate-banner {
background: linear-gradient(90deg, #fef3c7 0%, #fde68a 60%, #fcd34d 100%);
box-shadow: 0 2px 8px rgba(120, 53, 15, .10);
}
}
/* ============================================================
Mobile polish — keep the tight layout, add the brand touches
that work at small sizes.
============================================================ */
@media (max-width: 900px) {
/* Accent tick on card headings */
.wonda-card > h2 {
position: relative;
padding-left: 12px;
color: var(--wonda-navy-1);
}
.wonda-card > h2::before {
content: '';
position: absolute;
left: 0;
top: 3px;
bottom: 3px;
width: 3px;
border-radius: 2px;
background: var(--accent);
opacity: .85;
}
/* Small accent tick on stats */
.wonda-stat {
position: relative;
overflow: hidden;
}
.wonda-stat::before {
content: '';
position: absolute;
top: 0;
left: 14px;
width: 22px;
height: 3px;
border-radius: 0 0 3px 3px;
background: linear-gradient(90deg,
var(--accent) 0%,
rgba(255, 0, 126, .18) 100%);
}
.wonda-stat__value { color: var(--wonda-navy-1); }
/* Section headers in forms */
.wonda-form-section > h3 {
position: relative;
padding-left: 12px;
}
.wonda-form-section > h3::before {
content: '';
position: absolute;
left: 0;
top: 3px;
bottom: 3px;
width: 3px;
border-radius: 2px;
background: var(--accent);
opacity: .75;
}
/* Tinted table headers on mobile too */
.wonda-card table thead th {
background: #f3f5fa;
color: #475569;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
}
}
/* ==== END WONDA_BRANDED_CONSOLE_CSS ==== */
/* ============================================================
WONDA_ACTIVITY_DETAIL_CSS
Rich activity reports — the kb.rules_filtered card.
============================================================ */
.wonda-act-text {
font-size: 12.5px;
color: var(--muted);
line-height: 1.55;
margin-top: 4px;
}
.wonda-kb-report {
margin-top: 10px;
border: 1px solid #fde68a;
background: linear-gradient(180deg, #fffdf5 0%, #fffbeb 100%);
border-radius: 12px;
padding: 16px 18px;
font-size: 13px;
line-height: 1.55;
color: #78350f;
}
.wonda-kb-report__lead {
font-size: 14px;
color: #78350f;
line-height: 1.5;
margin-bottom: 14px;
}
.wonda-kb-report__count {
display: inline-block;
min-width: 26px;
height: 26px;
padding: 0 8px;
border-radius: 13px;
background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
color: #fff;
font-weight: 700;
font-size: 13px;
line-height: 26px;
text-align: center;
vertical-align: -6px;
margin-right: 4px;
box-shadow: 0 2px 6px -1px rgba(245, 158, 11, .35);
}
.wonda-kb-report__sub {
margin-top: 6px;
font-size: 12.5px;
color: #92400e;
opacity: .85;
line-height: 1.5;
}
.wonda-kb-report__list {
list-style: none;
counter-reset: kb;
margin: 0;
padding: 0;
}
.wonda-kb-report__item {
counter-increment: kb;
position: relative;
padding: 12px 14px 12px 40px;
background: #fff;
border: 1px solid rgba(120, 53, 15, .10);
border-radius: 10px;
margin-bottom: 8px;
box-shadow: 0 1px 2px rgba(120, 53, 15, .04);
}
.wonda-kb-report__item::before {
content: counter(kb);
position: absolute;
left: 12px;
top: 12px;
width: 18px;
height: 18px;
border-radius: 9px;
background: #fef3c7;
color: #92400e;
font-size: 11px;
font-weight: 700;
text-align: center;
line-height: 18px;
}
.wonda-kb-report__reason {
font-size: 11.5px;
font-weight: 600;
color: #92400e;
text-transform: none;
letter-spacing: 0;
margin-bottom: 6px;
line-height: 1.4;
}
.wonda-kb-report__reason-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .07em;
font-weight: 700;
color: #b45309;
margin-right: 4px;
}
.wonda-kb-report__line {
font-family: var(--font-mono);
font-size: 11px;
color: #b45309;
background: #fef3c7;
padding: 1px 6px;
border-radius: 4px;
margin-left: 4px;
}
.wonda-kb-report__quote {
margin: 0;
padding: 8px 12px;
background: #fdfbf5;
border-left: 3px solid #f59e0b;
border-radius: 4px;
font-family: var(--font-mono);
font-size: 12.5px;
color: #1c1c3c;
line-height: 1.5;
word-break: break-word;
white-space: pre-wrap;
}
.wonda-kb-report__foot {
margin-top: 14px;
padding-top: 12px;
border-top: 1px dashed rgba(120, 53, 15, .20);
font-size: 12.5px;
color: #78350f;
line-height: 1.55;
}
.wonda-kb-report__foot strong { color: #7c2d12; }
.wonda-kb-report__foot a {
color: #b45309;
font-weight: 600;
text-decoration: underline;
white-space: nowrap;
}
.wonda-kb-report__foot a:hover { text-decoration: none; }
.wonda-kb-report__meta {
margin-top: 10px;
font-size: 11px;
color: #b45309;
opacity: .8;
font-family: var(--font-mono);
}
/* Dark mode (the widget sets .wonda-dark on its own root — the
console follows it if the body ever gets a [data-theme="dark"]). */
[data-theme="dark"] .wonda-kb-report,
.wonda-dark .wonda-kb-report {
border-color: rgba(180, 83, 9, .35);
background: rgba(180, 83, 9, .12);
color: #fbbf24;
}
[data-theme="dark"] .wonda-kb-report__sub,
.wonda-dark .wonda-kb-report__sub { color: #fbbf24; }
[data-theme="dark"] .wonda-kb-report__item,
.wonda-dark .wonda-kb-report__item {
background: rgba(15, 23, 42, .35);
border-color: rgba(255, 255, 255, .06);
}
[data-theme="dark"] .wonda-kb-report__quote,
.wonda-dark .wonda-kb-report__quote {
background: rgba(15, 23, 42, .55);
color: #e2e8f0;
}
/* ---------- Bell: items become clickable links ---------- */
.wonda-bell__item-inner {
display: block;
color: inherit;
text-decoration: none;
margin: -12px -16px;
padding: 12px 16px;
transition: background .12s ease;
}
.wonda-bell__item-inner:hover {
background: rgba(255, 0, 126, .05);
text-decoration: none;
color: inherit;
}
.wonda-bell__item--link { padding: 0 !important; }
.wonda-bell__item--link.wonda-bell__item--unread .wonda-bell__item-inner {
background: rgba(255, 0, 126, .04);
}
/* Mobile */
@media (max-width: 900px) {
.wonda-kb-report {
padding: 12px 12px;
font-size: 12.5px;
}
.wonda-kb-report__item {
padding: 10px 12px 10px 34px;
}
.wonda-kb-report__item::before {
left: 10px;
top: 10px;
}
.wonda-kb-report__quote {
font-size: 12px;
padding: 7px 10px;
}
}
/* ==== END WONDA_ACTIVITY_DETAIL_CSS ==== */
/* ============================================================
WONDA_MOBILE_FIXES_2_CSS
Targeted fixes for the two issues reported on mobile:
- Chat-logs table overflowing instead of scrolling
- Activity timestamps sitting beside the content
============================================================ */
/* ---------- Table scroll wrapper (applies on any viewport) ---------- */
.wonda-table-scroll {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
scrollbar-width: thin;
scrollbar-color: rgba(148, 163, 184, .5) transparent;
margin: 0;
padding: 0;
}
.wonda-table-scroll::-webkit-scrollbar { height: 6px; }
.wonda-table-scroll::-webkit-scrollbar-track { background: transparent; }
.wonda-table-scroll::-webkit-scrollbar-thumb {
background: rgba(148, 163, 184, .4);
border-radius: 3px;
}
.wonda-table-scroll > table { margin: 0; }
/* Edge-bleed so the scroll area touches the card border on mobile */
@media (max-width: 900px) {
.wonda-card > .wonda-table-scroll {
margin-left: -16px !important;
margin-right: -16px !important;
padding-left: 16px !important;
padding-right: 16px !important;
}
}
/* ---------- Mobile: force tables to scroll, not overflow ---------- */
@media (max-width: 900px) {
.wonda-card table {
min-width: 0;
}
/* Tables that are wide because of content get a min-width
so the scrollbar is meaningful and columns stay readable. */
.wonda-table-scroll > table {
min-width: 640px;
}
/* But tables that only have 2-3 columns stay narrow */
.wonda-table-scroll > table.wonda-table--narrow {
min-width: 100%;
}
.wonda-card table th,
.wonda-card table td {
white-space: nowrap;
}
/* Let max-width cells wrap */
.wonda-card table td[style*="max-width"] {
white-space: normal !important;
}
}
/* ---------- Mobile: activity timeline stacking ---------- */
@media (max-width: 900px) {
/* Item becomes a wrap container — dot + body on row 1,
time drops to row 2, indented under the body. */
.wonda-activity__item {
flex-wrap: wrap;
align-items: flex-start;
row-gap: 4px;
column-gap: 12px;
padding: 14px 0 14px 2px !important;
}
.wonda-activity__dot {
margin-top: 4px;
flex-shrink: 0;
}
.wonda-activity__body {
flex: 1 1 calc(100% - 26px);
min-width: 0;
}
.wonda-activity__time {
/* Full-width row under the body — but indented past the dot
so it visually belongs to the entry above. */
flex: 1 1 100%;
margin-left: 26px;
margin-top: 4px;
padding: 0;
text-align: left;
color: #94a3b8;
font-size: 11px;
font-variant-numeric: tabular-nums;
}
}
@media (max-width: 480px) {
.wonda-activity__time {
margin-left: 24px;
}
.wonda-table-scroll > table { min-width: 560px; }
}
/* ---------- Mobile: chat-logs hero stats stack cleanly ---------- */
@media (max-width: 900px) {
.wonda-convo-hero {
flex-direction: column;
align-items: stretch;
gap: 14px;
}
.wonda-convo-hero__stats {
display: grid !important;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
width: 100%;
}
.wonda-convo-hero__stat {
align-items: flex-start;
padding: 8px 10px;
background: rgba(255, 255, 255, .5);
border-radius: 8px;
}
.wonda-convo-hero__stat-value {
font-size: 16px;
}
}
@media (max-width: 480px) {
.wonda-convo-hero__stats {
grid-template-columns: repeat(2, 1fr);
}
}
/* ---------- Mobile: chat-logs transcript rows ---------- */
@media (max-width: 900px) {
.wonda-transcript__row {
max-width: 100% !important;
}
.wonda-transcript__row--user {
margin-left: 0 !important;
}
}
/* ==== END WONDA_MOBILE_FIXES_2_CSS ==== */
/* ============================================================
WONDA_KB_EDITOR_CSS
Meta bar + flagged panel + editor jump highlight.
============================================================ */
/* ---------- Meta bar ---------- */
.wonda-kb-meta {
margin: 0 0 16px;
padding: 16px 18px;
border-radius: 14px;
background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
border: 1px solid rgba(28, 28, 60, .07);
box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
position: relative;
overflow: hidden;
}
.wonda-kb-meta::before {
content: '';
position: absolute;
top: 0; left: 0; bottom: 0;
width: 3px;
background: linear-gradient(180deg, var(--wonda-navy-2) 0%, var(--wonda-navy-1) 100%);
opacity: .85;
}
.wonda-kb-meta--info::before { background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%); }
.wonda-kb-meta--warn::before { background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%); }
.wonda-kb-meta--error::before { background: linear-gradient(180deg, #f87171 0%, #b91c1c 100%); }
.wonda-kb-meta__row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin-bottom: 10px;
}
.wonda-kb-meta__stat {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.wonda-kb-meta__value {
font-size: 22px;
font-weight: 700;
color: var(--wonda-navy-1);
letter-spacing: -0.02em;
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.wonda-kb-meta--warn .wonda-kb-meta__value { color: #b45309; }
.wonda-kb-meta--error .wonda-kb-meta__value { color: #b91c1c; }
.wonda-kb-meta__label {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: .07em;
font-weight: 700;
color: var(--muted);
}
.wonda-kb-meta__note {
font-size: 12.5px;
line-height: 1.55;
color: #475569;
padding-top: 10px;
border-top: 1px solid rgba(28, 28, 60, .06);
position: relative;
}
.wonda-kb-meta--info .wonda-kb-meta__note { color: #1e40af; }
.wonda-kb-meta--warn .wonda-kb-meta__note { color: #92400e; }
.wonda-kb-meta--error .wonda-kb-meta__note { color: #991b1b; font-weight: 500; }
.wonda-kb-meta__help {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: 50%;
background: rgba(28, 28, 60, .08);
color: #475569;
font-size: 10px;
font-weight: 700;
margin-left: 4px;
cursor: help;
vertical-align: -3px;
}
/* ---------- Flagged panel ---------- */
.wonda-kb-flags {
margin: 0 0 18px;
border: 1px solid #fcd34d;
border-radius: 14px;
background: linear-gradient(180deg, #fffdf5 0%, #fffbeb 100%);
padding: 16px 18px;
box-shadow: 0 1px 2px rgba(120, 53, 15, .05);
}
.wonda-kb-flags__head {
display: flex;
align-items: flex-start;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.wonda-kb-flags__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
color: #fff;
flex-shrink: 0;
box-shadow: 0 4px 10px -4px rgba(245, 158, 11, .45);
}
.wonda-kb-flags__icon svg { width: 18px; height: 18px; display: block; }
.wonda-kb-flags__headtext { flex: 1; min-width: 200px; }
.wonda-kb-flags__title {
display: block;
font-size: 14.5px;
font-weight: 600;
color: #78350f;
line-height: 1.3;
margin-bottom: 3px;
}
.wonda-kb-flags__sub {
font-size: 12.5px;
color: #92400e;
line-height: 1.5;
}
.wonda-kb-flags__next {
padding: 8px 14px;
border-radius: 10px;
border: 0;
background: linear-gradient(180deg, #d97706 0%, #b45309 100%);
color: #fff;
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
font-family: inherit;
box-shadow: 0 4px 10px -4px rgba(180, 83, 9, .40);
transition: transform .1s ease, box-shadow .15s ease;
}
.wonda-kb-flags__next:hover {
transform: translateY(-1px);
box-shadow: 0 6px 14px -4px rgba(180, 83, 9, .48);
}
.wonda-kb-flags__list {
list-style: none;
margin: 0;
padding: 0;
counter-reset: kbf;
}
.wonda-kb-flags__item {
counter-increment: kbf;
position: relative;
padding: 12px 14px 12px 42px;
background: #fff;
border: 1px solid rgba(120, 53, 15, .10);
border-radius: 10px;
margin-bottom: 8px;
box-shadow: 0 1px 2px rgba(120, 53, 15, .04);
}
.wonda-kb-flags__item:last-child { margin-bottom: 0; }
.wonda-kb-flags__item::before {
content: counter(kbf);
position: absolute;
left: 14px;
top: 14px;
width: 18px;
height: 18px;
border-radius: 9px;
background: #fef3c7;
color: #92400e;
font-size: 11px;
font-weight: 700;
text-align: center;
line-height: 18px;
}
.wonda-kb-flags__meta {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 6px;
}
.wonda-kb-flags__line {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
background: #fef3c7;
color: #92400e;
padding: 2px 8px;
border-radius: 6px;
letter-spacing: .02em;
}
.wonda-kb-flags__line--unknown {
background: #f1f5f9;
color: #64748b;
}
.wonda-kb-flags__reason {
font-size: 12px;
color: #92400e;
font-weight: 500;
}
.wonda-kb-flags__quote {
margin: 0 0 8px;
padding: 8px 12px;
background: #fdfbf5;
border-left: 3px solid #f59e0b;
border-radius: 4px;
font-family: var(--font-mono);
font-size: 12.5px;
color: #1c1c3c;
line-height: 1.5;
word-break: break-word;
white-space: pre-wrap;
}
.wonda-kb-flags__actions { display: flex; gap: 6px; }
.wonda-kb-flags__jump {
padding: 6px 14px;
border-radius: 8px;
border: 1px solid rgba(120, 53, 15, .22);
background: #fff;
color: #92400e;
font-size: 12px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
transition: background .12s ease, border-color .12s ease;
}
.wonda-kb-flags__jump:hover {
background: #fef3c7;
border-color: rgba(120, 53, 15, .40);
}
/* ---------- Editor flash when jumping ---------- */
.wonda-kb-editor--flash {
border-color: #f59e0b !important;
animation: wonda-kb-flash 1.4s ease;
}
@keyframes wonda-kb-flash {
0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .65); }
55% { box-shadow: 0 0 0 14px rgba(245, 158, 11, 0); }
100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}
/* ---------- Activity report: per-item fix button ---------- */
.wonda-kb-report__actions {
margin-top: 8px;
display: flex;
gap: 6px;
justify-content: flex-end;
}
.wonda-kb-report__fix {
display: inline-block;
padding: 5px 12px;
border-radius: 8px;
background: #fff;
border: 1px solid rgba(120, 53, 15, .25);
color: #92400e;
font-size: 12px;
font-weight: 600;
text-decoration: none;
transition: background .12s ease, border-color .12s ease;
}
.wonda-kb-report__fix:hover {
background: #fef3c7;
border-color: rgba(120, 53, 15, .40);
text-decoration: none;
color: #78350f;
}
/* ---------- Mobile ---------- */
@media (max-width: 900px) {
.wonda-kb-meta { padding: 12px 14px; }
.wonda-kb-meta__row {
grid-template-columns: 1fr 1fr !important;
gap: 10px;
margin-bottom: 8px;
}
.wonda-kb-meta__value { font-size: 19px; }
.wonda-kb-meta__note { font-size: 12px; }
.wonda-kb-flags { padding: 12px 14px; }
.wonda-kb-flags__head { gap: 10px; }
.wonda-kb-flags__icon { width: 30px; height: 30px; }
.wonda-kb-flags__icon svg { width: 16px; height: 16px; }
.wonda-kb-flags__title { font-size: 13.5px; }
.wonda-kb-flags__sub { font-size: 12px; }
.wonda-kb-flags__next {
width: 100%;
margin-top: 4px;
justify-content: center;
}
.wonda-kb-flags__item { padding: 10px 12px 10px 38px; }
.wonda-kb-flags__item::before { left: 12px; top: 12px; }
.wonda-kb-flags__quote { font-size: 12px; padding: 7px 10px; }
.wonda-kb-flags__jump { width: 100%; justify-content: center; }
}
/* ==== END WONDA_KB_EDITOR_CSS ==== */
/* ============================================================
WONDA_KB_LINENUM_CSS
Line-number gutter next to the KB editor.
============================================================ */
.wonda-kb-editor-wrap {
display: flex;
border: 1px solid rgba(28, 28, 60, .14);
border-radius: 8px;
background: #ffffff;
overflow: hidden;
font-family: var(--font-mono);
font-size: 13px;
line-height: 1.6;
transition: border-color .15s ease, box-shadow .15s ease;
}
.wonda-kb-editor-wrap:focus-within {
border-color: var(--accent);
box-shadow: 0 0 0 4px rgba(255, 0, 126, .10);
}
.wonda-kb-editor-gutter {
flex-shrink: 0;
min-width: 56px;
padding: 12px 8px 12px 12px;
background: linear-gradient(180deg, #f8fafc 0%, #f3f5fa 100%);
border-right: 1px solid rgba(28, 28, 60, .07);
color: #94a3b8;
text-align: right;
user-select: none;
-webkit-user-select: none;
font-variant-numeric: tabular-nums;
font-family: var(--font-mono);
font-size: 12px;
line-height: 1.6;
overflow: hidden;
scrollbar-width: none;
}
.wonda-kb-editor-gutter::-webkit-scrollbar { display: none; }
.wonda-kb-editor-gutter__line {
padding: 0 2px;
color: #94a3b8;
line-height: 1.6;
height: 1.6em;
}
.wonda-kb-editor-gutter__line--flagged {
color: #b45309;
font-weight: 700;
background: rgba(245, 158, 11, .18);
margin: 0 -8px 0 -12px;
padding: 0 8px 0 10px;
border-left: 2px solid #f59e0b;
}
/* Textarea inside the wrapper */
.wonda-kb-editor-wrap textarea {
flex: 1;
min-width: 0;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
padding: 12px 16px !important;
resize: none !important;
font-family: var(--font-mono) !important;
font-size: 13px !important;
line-height: 1.6 !important;
outline: 0 !important;
box-shadow: none !important;
min-height: 400px;
overflow-y: auto;
color: var(--text);
display: block;
}
/* Flash highlight when jumping */
.wonda-kb-editor-wrap:has(.wonda-kb-editor--flash) {
border-color: #f59e0b !important;
animation: wonda-kb-flash 1.4s ease;
}
@keyframes wonda-kb-flash {
0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .65); }
55% { box-shadow: 0 0 0 14px rgba(245, 158, 11, 0); }
100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}
/* ============================================================
Mobile
============================================================ */
@media (max-width: 900px) {
.wonda-kb-editor-wrap { font-size: 12px; }
.wonda-kb-editor-gutter {
min-width: 42px;
padding: 10px 6px 10px 8px;
font-size: 11px;
}
.wonda-kb-editor-gutter__line--flagged {
margin: 0 -6px 0 -8px;
padding: 0 6px 0 6px;
}
.wonda-kb-editor-wrap textarea {
padding: 10px 12px !important;
font-size: 12.5px !important;
min-height: 320px;
}
}
/* ==== END WONDA_KB_LINENUM_CSS ==== */
/* ============================================================
WONDA_KB_INFO_PANEL_CSS
KB stats panel in sidebar-navy. Matches the console's brand.
============================================================ */
.wonda-kb-info {
position: relative;
margin: 0 0 18px;
padding: 18px 20px 16px;
border-radius: 16px;
background:
radial-gradient(600px 200px at 100% 0%, rgba(255, 0, 126, .10), transparent 60%),
linear-gradient(135deg, #1c1c3c 0%, #141433 100%);
color: #e2e8f0;
box-shadow:
0 1px 2px rgba(15, 23, 42, .12),
0 18px 36px -18px rgba(28, 28, 60, .55);
overflow: hidden;
}
.wonda-kb-info::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg,
rgba(255, 0, 126, .85) 0%,
rgba(255, 0, 126, .20) 55%,
transparent 100%);
}
.wonda-kb-info__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.wonda-kb-info__title {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(255, 255, 255, .82);
}
.wonda-kb-info__dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: #ff2a92;
box-shadow: 0 0 0 3px rgba(255, 0, 126, .22);
}
.wonda-kb-info__status {
font-size: 11.5px;
font-weight: 600;
color: rgba(255, 255, 255, .55);
padding: 3px 10px;
border-radius: 10px;
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .06);
white-space: nowrap;
}
.wonda-kb-info__status--dirty {
color: #fbbf24;
background: rgba(245, 158, 11, .14);
border-color: rgba(245, 158, 11, .30);
}
.wonda-kb-info__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.wonda-kb-info__stat {
display: flex;
flex-direction: column;
gap: 3px;
padding: 10px 12px;
border-radius: 10px;
background: rgba(255, 255, 255, .04);
border: 1px solid rgba(255, 255, 255, .06);
min-width: 0;
transition: background .15s ease, border-color .15s ease;
}
.wonda-kb-info__stat:hover {
background: rgba(255, 255, 255, .07);
border-color: rgba(255, 255, 255, .10);
}
.wonda-kb-info__value {
font-size: 20px;
font-weight: 700;
color: #ffffff;
letter-spacing: -0.02em;
line-height: 1.05;
font-variant-numeric: tabular-nums;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wonda-kb-info__label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .09em;
font-weight: 700;
color: rgba(255, 255, 255, .45);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Value-colour variants */
.wonda-kb-info__stat--warn .wonda-kb-info__value { color: #fbbf24; }
.wonda-kb-info__stat--danger .wonda-kb-info__value { color: #fb7185; }
.wonda-kb-info__stat--flag {
background: rgba(245, 158, 11, .10);
border-color: rgba(245, 158, 11, .25);
}
.wonda-kb-info__stat--flag .wonda-kb-info__value { color: #fbbf24; }
.wonda-kb-info__note {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid rgba(255, 255, 255, .08);
font-size: 12.5px;
line-height: 1.55;
color: rgba(226, 232, 240, .78);
}
.wonda-kb-info__note--info { color: #93c5fd; }
.wonda-kb-info__note--warn { color: #fbbf24; font-weight: 500; }
.wonda-kb-info__note--error { color: #fb7185; font-weight: 500; }
/* ============================================================
Flag panel — match the new tone (darker card, amber accents)
============================================================ */
.wonda-kb-flags {
border-color: rgba(245, 158, 11, .30) !important;
background: linear-gradient(180deg, rgba(28, 28, 60, .04) 0%, rgba(28, 28, 60, .02) 100%) !important;
box-shadow:
0 1px 2px rgba(15, 23, 42, .04),
0 12px 30px -18px rgba(120, 53, 15, .18) !important;
}
.wonda-kb-flags__title { color: #7c2d12 !important; }
.wonda-kb-flags__sub { color: #92400e !important; }
.wonda-kb-flags__next {
background: linear-gradient(180deg, #d97706 0%, #b45309 100%) !important;
box-shadow:
0 1px 2px rgba(180, 83, 9, .28),
0 4px 10px -4px rgba(180, 83, 9, .45) !important;
}
/* ============================================================
Editor gutter — refine to feel like a code editor
============================================================ */
.wonda-kb-editor-wrap {
border-color: rgba(28, 28, 60, .14) !important;
border-radius: 12px !important;
background: #fbfcff !important;
}
.wonda-kb-editor-gutter {
background: linear-gradient(180deg, #eef1f8 0%, #e6eaf4 100%) !important;
border-right: 1px solid rgba(28, 28, 60, .08) !important;
color: #94a3b8 !important;
font-size: 11.5px !important;
padding-top: 12px !important;
padding-bottom: 12px !important;
}
.wonda-kb-editor-gutter__line--flagged {
color: #78350f !important;
background: linear-gradient(90deg, rgba(251, 191, 36, .28) 0%, rgba(251, 191, 36, .10) 100%) !important;
border-left: 2px solid #f59e0b !important;
font-weight: 700 !important;
}
/* ============================================================
Mobile
============================================================ */
@media (max-width: 900px) {
.wonda-kb-info {
padding: 14px 16px 12px;
border-radius: 14px;
}
.wonda-kb-info__grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 8px;
}
.wonda-kb-info__stat { padding: 9px 10px; }
.wonda-kb-info__value { font-size: 17px; }
.wonda-kb-info__label { font-size: 9.5px; }
.wonda-kb-info__head { margin-bottom: 12px; padding-bottom: 10px; }
.wonda-kb-info__note { font-size: 12px; margin-top: 12px; padding-top: 10px; }
.wonda-kb-editor-gutter {
min-width: 40px !important;
padding-left: 6px !important;
padding-right: 4px !important;
font-size: 10.5px !important;
}
}
@media (max-width: 480px) {
.wonda-kb-info__grid {
grid-template-columns: repeat(2, 1fr) !important;
}
.wonda-kb-info__value { font-size: 16px; }
}
/* ==== END WONDA_KB_INFO_PANEL_CSS ==== */
/* ============================================================
WONDA_KB_GUTTER_SYNC_CSS
Forces gutter and textarea to share exact pixel line metrics
so the numbers stay glued to their lines, and switches the
gutter to transform-based scroll sync.
============================================================ */
/* ---------- Container ---------- */
.wonda-kb-editor-wrap {
display: flex !important;
align-items: stretch !important;
height: 480px !important; /* fixed height — both children fill */
border: 1px solid rgba(28, 28, 60, .14) !important;
border-radius: 12px !important;
background: #fbfcff !important;
overflow: hidden !important;
font-family: var(--font-mono) !important;
font-size: 13px !important;
line-height: 21px !important;
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
transition: border-color .15s ease, box-shadow .15s ease;
}
.wonda-kb-editor-wrap:focus-within {
border-color: var(--accent) !important;
box-shadow: 0 0 0 4px rgba(255, 0, 126, .10) !important;
}
/* ---------- Gutter ---------- */
.wonda-kb-editor-gutter {
position: relative !important;
flex-shrink: 0 !important;
width: 56px !important;
min-width: 56px !important;
height: 100% !important; /* fill the wrap */
overflow: hidden !important; /* clips content; inner moves via transform */
background: linear-gradient(180deg, #eef1f8 0%, #e6eaf4 100%) !important;
border-right: 1px solid rgba(28, 28, 60, .08) !important;
color: #94a3b8 !important;
font-family: var(--font-mono) !important;
font-size: 13px !important;
line-height: 21px !important;
font-variant-numeric: tabular-nums !important;
user-select: none !important;
-webkit-user-select: none !important;
scrollbar-width: none !important;
}
.wonda-kb-editor-gutter::-webkit-scrollbar { display: none !important; }
/* Inner list — moved with translateY(-scrollTop). */
.wonda-kb-editor-gutter__inner {
position: absolute !important;
top: 12px !important; /* matches textarea padding-top */
left: 0 !important;
right: 0 !important;
will-change: transform !important;
transition: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* Each line — pixel line-height so it aligns with the textarea */
.wonda-kb-editor-gutter__line {
height: 21px !important;
line-height: 21px !important;
padding: 0 10px 0 8px !important;
text-align: right !important;
color: #94a3b8 !important;
font-size: 13px !important;
font-family: var(--font-mono) !important;
font-variant-numeric: tabular-nums !important;
box-sizing: border-box !important;
}
.wonda-kb-editor-gutter__line--flagged {
color: #78350f !important;
background: linear-gradient(90deg, rgba(251, 191, 36, .32) 0%, rgba(251, 191, 36, .12) 100%) !important;
font-weight: 700 !important;
border-left: 2px solid #f59e0b !important;
padding-left: 6px !important;
}
/* ---------- Textarea — same font / line-height / padding as gutter ---------- */
.wonda-kb-editor-wrap textarea {
flex: 1 !important;
min-width: 0 !important;
height: 100% !important;
min-height: 0 !important; /* override the 400px min-height */
border: 0 !important;
border-radius: 0 !important;
background: #ffffff !important;
padding: 12px 16px !important; /* top matches gutter inner */
margin: 0 !important;
resize: none !important;
outline: 0 !important;
box-shadow: none !important;
font-family: var(--font-mono) !important;
font-size: 13px !important;
line-height: 21px !important;
color: var(--text) !important;
overflow-y: auto !important;
overflow-x: auto !important;
display: block !important;
white-space: pre !important;
tab-size: 4 !important;
}
.wonda-kb-editor-wrap textarea::placeholder { color: #94a3b8; }
/* Flash */
.wonda-kb-editor-wrap:has(.wonda-kb-editor--flash) {
border-color: #f59e0b !important;
animation: wonda-kb-flash 1.4s ease;
}
@keyframes wonda-kb-flash {
0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .65); }
55% { box-shadow: 0 0 0 14px rgba(245, 158, 11, 0); }
100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}
/* ============================================================
Mobile
============================================================ */
@media (max-width: 900px) {
.wonda-kb-editor-wrap {
height: 360px !important;
}
.wonda-kb-editor-gutter {
width: 44px !important;
min-width: 44px !important;
font-size: 12px !important;
line-height: 20px !important;
}
.wonda-kb-editor-gutter__inner {
top: 10px !important; /* matches mobile textarea padding-top */
}
.wonda-kb-editor-gutter__line {
height: 20px !important;
line-height: 20px !important;
font-size: 12px !important;
padding: 0 8px 0 6px !important;
}
.wonda-kb-editor-gutter__line--flagged {
padding-left: 4px !important;
}
.wonda-kb-editor-wrap textarea {
padding: 10px 12px !important;
font-size: 13px !important;
line-height: 20px !important;
}
}
/* ==== END WONDA_KB_GUTTER_SYNC_CSS ==== */
/* ============================================================
WONDA_KB_HIGHLIGHT_CSS
Persistent current-line highlight for the KB editor.
The band sits ABOVE the textarea but has pointer-events: none
so all clicks and typing pass through untouched.
============================================================ */
.wonda-kb-editor-wrap {
position: relative !important;
}
.wonda-kb-editor-highlight {
position: absolute !important;
left: 56px !important; /* = gutter width */
right: 0 !important;
top: 0 !important;
height: 21px !important; /* one line, matches CSS line-height */
background:
linear-gradient(90deg,
rgba(251, 191, 36, .30) 0%,
rgba(251, 191, 36, .14) 60%,
rgba(251, 191, 36, .04) 100%) !important;
border-left: 3px solid #f59e0b !important;
pointer-events: none !important;
z-index: 2 !important;
opacity: 0;
transition: opacity .18s ease, transform .05s linear !important;
will-change: transform !important;
box-sizing: border-box !important;
}
/* Blinking indicator dot at the left edge for extra visibility */
.wonda-kb-editor-highlight::before {
content: '';
position: absolute;
left: -8px;
top: 50%;
width: 4px;
height: 4px;
border-radius: 50%;
background: #f59e0b;
transform: translateY(-50%);
box-shadow: 0 0 0 3px rgba(245, 158, 11, .22);
}
/* ---------- Gutter active-line state ---------- */
.wonda-kb-editor-gutter__line--active {
background: linear-gradient(90deg,
rgba(245, 158, 11, .35) 0%,
rgba(245, 158, 11, .10) 100%) !important;
color: #78350f !important;
font-weight: 700 !important;
border-left: 2px solid #d97706 !important;
}
/* If the line is both flagged AND active, make active win */
.wonda-kb-editor-gutter__line--active.wonda-kb-editor-gutter__line--flagged {
background: linear-gradient(90deg,
rgba(245, 158, 11, .45) 0%,
rgba(245, 158, 11, .18) 100%) !important;
border-left: 3px solid #b45309 !important;
}
/* ---------- Mobile ---------- */
@media (max-width: 900px) {
.wonda-kb-editor-highlight {
left: 44px !important; /* matches mobile gutter width */
height: 20px !important;
}
}
/* ==== END WONDA_KB_HIGHLIGHT_CSS ==== */
/* ============================================================
WONDA_KB_REPORT_V2_CSS
Activity KB report — brand navy + pink, FontAwesome warning
triangle in red. Overrides earlier amber styling.
============================================================ */
/* Nuke the old palette by scoping strong overrides with high specificity. */
.wonda-kb-report {
margin-top: 10px;
border: 1px solid rgba(28, 28, 60, .10) !important;
background: #ffffff !important;
border-radius: 14px !important;
padding: 0 !important;
overflow: hidden !important;
font-size: 13px;
line-height: 1.55;
color: var(--text);
box-shadow:
0 1px 2px rgba(15, 23, 42, .04),
0 12px 30px -18px rgba(28, 28, 60, .22);
}
/* ---------- Header row — navy band ---------- */
.wonda-kb-report__head {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px 18px;
background: linear-gradient(135deg, #1c1c3c 0%, #141433 100%);
color: #ffffff;
position: relative;
}
.wonda-kb-report__head::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg,
rgba(255, 0, 126, .85) 0%,
rgba(255, 0, 126, .20) 55%,
transparent 100%);
}
.wonda-kb-report__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 11px;
background: rgba(185, 28, 28, .18);
border: 1px solid rgba(185, 28, 28, .35);
color: #f87171; /* red triangle */
flex-shrink: 0;
margin-top: 2px;
}
.wonda-kb-report__icon svg { width: 20px; height: 20px; display: block; }
.wonda-kb-report__headtext { flex: 1; min-width: 0; }
.wonda-kb-report__title {
display: block;
font-size: 14.5px;
font-weight: 600;
color: #ffffff;
line-height: 1.35;
letter-spacing: -0.005em;
margin-bottom: 4px;
}
.wonda-kb-report__title--ok { color: #86efac; }
.wonda-kb-report__sub {
font-size: 12.5px;
color: rgba(226, 232, 240, .78);
line-height: 1.55;
}
/* ---------- List of conflicts ---------- */
.wonda-kb-report__list {
list-style: none;
counter-reset: kbr;
margin: 0;
padding: 16px 18px 4px;
}
.wonda-kb-report__item {
counter-increment: kbr;
position: relative;
padding: 14px 16px 14px 44px;
background: #ffffff;
border: 1px solid rgba(28, 28, 60, .08);
border-radius: 12px;
margin-bottom: 12px;
box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
transition: border-color .14s ease, box-shadow .14s ease;
}
.wonda-kb-report__item:last-child { margin-bottom: 0; }
.wonda-kb-report__item:hover {
border-color: rgba(28, 28, 60, .16);
box-shadow: 0 4px 12px -6px rgba(28, 28, 60, .14);
}
.wonda-kb-report__item::before {
content: counter(kbr);
position: absolute;
left: 14px;
top: 14px;
width: 20px;
height: 20px;
border-radius: 10px;
background: linear-gradient(135deg, #FF007E 0%, #C8005F 100%);
color: #ffffff;
font-size: 11px;
font-weight: 700;
text-align: center;
line-height: 20px;
box-shadow: 0 2px 6px -2px rgba(255, 0, 126, .45);
}
/* ---------- Meta row — reason + line number ---------- */
.wonda-kb-report__meta {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 8px;
}
.wonda-kb-report__reason {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .07em;
color: #b91c1c; /* red — because it's a warning */
background: rgba(185, 28, 28, .08);
border: 1px solid rgba(185, 28, 28, .14);
padding: 3px 10px;
border-radius: 6px;
}
.wonda-kb-report__line {
font-family: var(--font-mono);
font-size: 11.5px;
font-weight: 700;
color: var(--wonda-navy-1, #1c1c3c);
background: #f3f5fa;
border: 1px solid rgba(28, 28, 60, .08);
padding: 3px 10px;
border-radius: 6px;
letter-spacing: .01em;
}
.wonda-kb-report__line-was {
font-weight: 500;
color: #94a3b8;
font-size: 10.5px;
margin-left: 4px;
letter-spacing: 0;
}
/* ---------- Quote ---------- */
.wonda-kb-report__quote {
margin: 0 0 10px;
padding: 10px 14px;
background: #fbfcff;
border-left: 3px solid #FF007E;
border-radius: 6px;
font-family: var(--font-mono);
font-size: 12.5px;
color: #0f172a;
line-height: 1.55;
word-break: break-word;
white-space: pre-wrap;
}
/* ---------- Fix button ---------- */
.wonda-kb-report__actions {
display: flex;
gap: 6px;
justify-content: flex-end;
margin-top: 4px;
}
.wonda-kb-report__fix {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 7px 16px;
border-radius: 10px;
background: linear-gradient(135deg, #FF2A92 0%, #E60072 100%);
color: #ffffff !important;
font-size: 12.5px;
font-weight: 600;
text-decoration: none !important;
box-shadow:
0 1px 2px rgba(255, 0, 126, .22),
0 4px 12px -4px rgba(255, 0, 126, .28);
transition: transform .1s ease, box-shadow .15s ease;
border: 0;
}
.wonda-kb-report__fix:hover {
transform: translateY(-1px);
box-shadow:
0 4px 14px -2px rgba(255, 0, 126, .34),
inset 0 1px 0 rgba(255, 255, 255, .16);
color: #ffffff !important;
text-decoration: none !important;
}
.wonda-kb-report__fix:active {
transform: translateY(0);
}
/* ---------- Foot ---------- */
.wonda-kb-report__foot {
padding: 14px 18px 16px;
background: #f8fafc;
border-top: 1px solid rgba(28, 28, 60, .06);
font-size: 12.5px;
color: #475569;
line-height: 1.55;
}
.wonda-kb-report__foot strong { color: var(--wonda-navy-1, #1c1c3c); }
.wonda-kb-report__foot a {
color: var(--accent, #FF007E);
font-weight: 600;
text-decoration: underline;
white-space: nowrap;
}
.wonda-kb-report__foot a:hover { text-decoration: none; }
.wonda-kb-report__meta-foot {
padding: 10px 18px 14px;
font-size: 11.5px;
color: #94a3b8;
border-top: 1px dashed rgba(28, 28, 60, .06);
background: #ffffff;
}
/* Legacy amber classes — force-remove their influence */
.wonda-kb-report .wonda-kb-report__lead,
.wonda-kb-report .wonda-kb-report__count,
.wonda-kb-report .wonda-kb-report__reason-label { display: none !important; }
/* ---------- Mobile ---------- */
@media (max-width: 900px) {
.wonda-kb-report { border-radius: 12px; }
.wonda-kb-report__head { padding: 13px 14px; gap: 10px; }
.wonda-kb-report__icon { width: 32px; height: 32px; border-radius: 9px; }
.wonda-kb-report__icon svg { width: 17px; height: 17px; }
.wonda-kb-report__title { font-size: 13.5px; }
.wonda-kb-report__sub { font-size: 12px; }
.wonda-kb-report__list { padding: 14px 14px 4px; }
.wonda-kb-report__item { padding: 12px 12px 12px 38px; }
.wonda-kb-report__item::before { left: 12px; top: 12px; width: 18px; height: 18px; line-height: 18px; }
.wonda-kb-report__quote { font-size: 12px; padding: 8px 12px; }
.wonda-kb-report__fix { width: 100%; justify-content: center; padding: 9px 14px; }
.wonda-kb-report__foot { padding: 12px 14px; font-size: 12px; }
}
/* ==== END WONDA_KB_REPORT_V2_CSS ==== */
/* ============================================================
WONDA_KB_TEMP_CSS
KB info panel — temperature colouring (cool → critical).
Works alongside the base panel from WONDA_KB_INFO_PANEL_CSS.
============================================================ */
/* ---------- Zone-specific top accent + dot ---------- */
.wonda-kb-info--cool::before {
background: linear-gradient(90deg, #10b981 0%, rgba(16,185,129,.25) 55%, transparent 100%) !important;
}
.wonda-kb-info--cool .wonda-kb-info__dot { background: #34d399 !important; box-shadow: 0 0 0 3px rgba(52,211,153,.25) !important; }
.wonda-kb-info--mild::before {
background: linear-gradient(90deg, #14b8a6 0%, rgba(20,184,166,.25) 55%, transparent 100%) !important;
}
.wonda-kb-info--mild .wonda-kb-info__dot { background: #2dd4bf !important; box-shadow: 0 0 0 3px rgba(45,212,191,.25) !important; }
.wonda-kb-info--warm::before {
background: linear-gradient(90deg, #f59e0b 0%, rgba(245,158,11,.25) 55%, transparent 100%) !important;
}
.wonda-kb-info--warm .wonda-kb-info__dot { background: #fbbf24 !important; box-shadow: 0 0 0 3px rgba(251,191,36,.28) !important; }
.wonda-kb-info--hot::before {
background: linear-gradient(90deg, #ea580c 0%, rgba(234,88,12,.28) 55%, transparent 100%) !important;
}
.wonda-kb-info--hot .wonda-kb-info__dot { background: #fb923c !important; box-shadow: 0 0 0 3px rgba(251,146,60,.30) !important; }
.wonda-kb-info--critical::before {
background: linear-gradient(90deg, #dc2626 0%, rgba(220,38,38,.30) 55%, transparent 100%) !important;
}
.wonda-kb-info--critical .wonda-kb-info__dot {
background: #f87171 !important;
box-shadow: 0 0 0 3px rgba(248,113,113,.30) !important;
animation: wonda-kb-dot-pulse 1.6s ease-in-out infinite;
}
@keyframes wonda-kb-dot-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .55; transform: scale(.9); }
}
/* ---------- Note tones ---------- */
.wonda-kb-info__note strong { color: #ffffff; font-weight: 600; }
.wonda-kb-info__note--cool { color: #86efac !important; }
.wonda-kb-info__note--mild { color: #5eead4 !important; }
.wonda-kb-info__note--warm { color: #fcd34d !important; }
.wonda-kb-info__note--hot { color: #fdba74 !important; }
.wonda-kb-info__note--critical { color: #fca5a5 !important; font-weight: 500; }
.wonda-kb-info__note--cool strong,
.wonda-kb-info__note--mild strong,
.wonda-kb-info__note--warm strong,
.wonda-kb-info__note--hot strong,
.wonda-kb-info__note--critical strong { color: inherit; }
/* ---------- Zone stat card (right-most, shows "Critical" etc.) ---------- */
.wonda-kb-info__stat--zone {
background: rgba(255, 255, 255, .08) !important;
border-color: rgba(255, 255, 255, .14) !important;
}
.wonda-kb-info--cool .wonda-kb-info__stat--zone .wonda-kb-info__value { color: #34d399 !important; }
.wonda-kb-info--mild .wonda-kb-info__stat--zone .wonda-kb-info__value { color: #2dd4bf !important; }
.wonda-kb-info--warm .wonda-kb-info__stat--zone .wonda-kb-info__value { color: #fbbf24 !important; }
.wonda-kb-info--hot .wonda-kb-info__stat--zone .wonda-kb-info__value { color: #fb923c !important; }
.wonda-kb-info--critical .wonda-kb-info__stat--zone .wonda-kb-info__value { color: #f87171 !important; }
/* ---------- Temperature meter ---------- */
.wonda-kb-temp {
margin-top: 16px;
padding: 12px 0 4px;
}
.wonda-kb-temp__track {
position: relative;
height: 8px;
border-radius: 4px;
background: linear-gradient(90deg,
#10b981 0%, #14b8a6 30%, #f59e0b 60%, #ea580c 80%, #dc2626 100%);
opacity: .35;
overflow: visible;
}
.wonda-kb-temp__fill {
position: absolute;
inset: 0 auto 0 0;
border-radius: 4px 0 0 4px;
background: linear-gradient(90deg,
#10b981 0%, #14b8a6 30%, #f59e0b 60%, #ea580c 80%, #dc2626 100%);
transition: width .25s ease;
box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset;
}
.wonda-kb-temp__marker {
position: absolute;
top: 50%;
width: 14px;
height: 14px;
border-radius: 50%;
background: #ffffff;
border: 2px solid #141433;
box-shadow: 0 0 0 3px rgba(255,255,255,.15), 0 2px 6px rgba(0,0,0,.35);
transform: translate(-50%, -50%);
transition: left .25s ease;
z-index: 2;
}
.wonda-kb-temp__labels {
display: flex;
justify-content: space-between;
margin-top: 8px;
font-size: 10px;
font-family: var(--font-mono);
color: rgba(255,255,255,.45);
font-variant-numeric: tabular-nums;
letter-spacing: .02em;
}
.wonda-kb-temp__label-red { color: #f87171 !important; font-weight: 700; }
/* ---------- Advice block (warm, hot, critical) ---------- */
.wonda-kb-info__advice {
margin-top: 16px;
padding: 14px 16px 12px;
background: rgba(255, 255, 255, .05);
border: 1px solid rgba(255, 255, 255, .10);
border-radius: 12px;
}
.wonda-kb-info__advice-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
color: #ffffff;
font-size: 13px;
}
.wonda-kb-info__advice-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 6px;
background: rgba(185, 28, 28, .25);
border: 1px solid rgba(185, 28, 28, .40);
color: #f87171;
flex-shrink: 0;
}
.wonda-kb-info__advice-icon svg { width: 12px; height: 12px; display: block; }
.wonda-kb-info__advice-head strong { font-size: 13px; font-weight: 600; }
.wonda-kb-info__advice-list {
margin: 0;
padding-left: 18px;
font-size: 12.5px;
line-height: 1.6;
color: rgba(226, 232, 240, .82);
}
.wonda-kb-info__advice-list li { margin-bottom: 6px; }
.wonda-kb-info__advice-list strong { color: #ffffff; }
.wonda-kb-info__advice-foot {
margin: 12px 0 0;
padding-top: 10px;
border-top: 1px dashed rgba(255, 255, 255, .12);
font-size: 12px;
color: rgba(226, 232, 240, .72);
}
.wonda-kb-info__advice-foot strong { color: #fbbf24; }
.wonda-kb-info--warm .wonda-kb-info__advice {
border-color: rgba(245, 158, 11, .30);
background: linear-gradient(180deg, rgba(245,158,11,.08) 0%, rgba(245,158,11,.03) 100%);
}
.wonda-kb-info--hot .wonda-kb-info__advice {
border-color: rgba(234, 88, 12, .35);
background: linear-gradient(180deg, rgba(234,88,12,.10) 0%, rgba(234,88,12,.04) 100%);
}
.wonda-kb-info--critical .wonda-kb-info__advice {
border-color: rgba(220, 38, 38, .40);
background: linear-gradient(180deg, rgba(220,38,38,.12) 0%, rgba(220,38,38,.04) 100%);
}
.wonda-kb-info--critical .wonda-kb-info__advice-head strong { color: #fca5a5; }
/* ---------- Mobile ---------- */
@media (max-width: 900px) {
.wonda-kb-temp { margin-top: 14px; }
.wonda-kb-temp__labels { font-size: 9.5px; }
.wonda-kb-info__advice { padding: 12px 14px 10px; }
.wonda-kb-info__advice-list { font-size: 12px; padding-left: 16px; }
}
/* ==== END WONDA_KB_TEMP_CSS ==== */
/* ============================================================
WONDA_KB_COLORED_TILES_CSS
Tint the KB info panel and its stat tiles with the current
temperature zone colour so the whole card reads as cool / warm
/ hot / critical instead of only the top accent strip.
============================================================ */
/* ---------- Panel background — zone-coloured radial wash ---------- */
.wonda-kb-info--cool {
background:
radial-gradient(600px 220px at 100% 0%, rgba(16,185,129,.18), transparent 60%),
linear-gradient(135deg, #1c1c3c 0%, #141433 100%) !important;
}
.wonda-kb-info--mild {
background:
radial-gradient(600px 220px at 100% 0%, rgba(20,184,166,.18), transparent 60%),
linear-gradient(135deg, #1c1c3c 0%, #141433 100%) !important;
}
.wonda-kb-info--warm {
background:
radial-gradient(600px 220px at 100% 0%, rgba(245,158,11,.20), transparent 60%),
linear-gradient(135deg, #1c1c3c 0%, #141433 100%) !important;
}
.wonda-kb-info--hot {
background:
radial-gradient(600px 220px at 100% 0%, rgba(234,88,12,.24), transparent 60%),
linear-gradient(135deg, #1c1c3c 0%, #141433 100%) !important;
}
.wonda-kb-info--critical {
background:
radial-gradient(600px 220px at 100% 0%, rgba(220,38,38,.28), transparent 60%),
linear-gradient(135deg, #1c1c3c 0%, #141433 100%) !important;
}
/* ---------- Tiles — tinted by zone ---------- */
.wonda-kb-info--cool .wonda-kb-info__stat {
background: linear-gradient(180deg, rgba(16,185,129,.14) 0%, rgba(16,185,129,.05) 100%) !important;
border-color: rgba(16,185,129,.32) !important;
}
.wonda-kb-info--mild .wonda-kb-info__stat {
background: linear-gradient(180deg, rgba(20,184,166,.14) 0%, rgba(20,184,166,.05) 100%) !important;
border-color: rgba(20,184,166,.32) !important;
}
.wonda-kb-info--warm .wonda-kb-info__stat {
background: linear-gradient(180deg, rgba(245,158,11,.16) 0%, rgba(245,158,11,.06) 100%) !important;
border-color: rgba(245,158,11,.36) !important;
}
.wonda-kb-info--hot .wonda-kb-info__stat {
background: linear-gradient(180deg, rgba(234,88,12,.18) 0%, rgba(234,88,12,.07) 100%) !important;
border-color: rgba(234,88,12,.38) !important;
}
.wonda-kb-info--critical .wonda-kb-info__stat {
background: linear-gradient(180deg, rgba(220,38,38,.20) 0%, rgba(220,38,38,.07) 100%) !important;
border-color: rgba(220,38,38,.42) !important;
}
/* Tile values — white but with a soft zone-coloured glow */
.wonda-kb-info--cool .wonda-kb-info__value { text-shadow: 0 0 14px rgba(52,211,153,.45); }
.wonda-kb-info--mild .wonda-kb-info__value { text-shadow: 0 0 14px rgba(45,212,191,.45); }
.wonda-kb-info--warm .wonda-kb-info__value { text-shadow: 0 0 14px rgba(251,191,36,.45); }
.wonda-kb-info--hot .wonda-kb-info__value { text-shadow: 0 0 14px rgba(251,146,60,.50); }
.wonda-kb-info--critical .wonda-kb-info__value { text-shadow: 0 0 14px rgba(248,113,113,.55); }
/* Tile labels — soften with the zone hue */
.wonda-kb-info--cool .wonda-kb-info__label { color: rgba(110, 231, 183, .80) !important; }
.wonda-kb-info--mild .wonda-kb-info__label { color: rgba(94, 234, 212, .80) !important; }
.wonda-kb-info--warm .wonda-kb-info__label { color: rgba(252, 211, 77, .85) !important; }
.wonda-kb-info--hot .wonda-kb-info__label { color: rgba(253, 186, 116, .85) !important; }
.wonda-kb-info--critical .wonda-kb-info__label { color: rgba(252, 165, 165, .90) !important; }
/* Hover — brighten the tinted tile slightly */
.wonda-kb-info__stat {
transition: filter .15s ease, background .15s ease, border-color .15s ease !important;
}
.wonda-kb-info__stat:hover {
filter: brightness(1.12);
}
/* ---------- Zone tile (KB size) — stronger so it reads as summary ---------- */
.wonda-kb-info--cool .wonda-kb-info__stat--zone {
background: linear-gradient(180deg, rgba(16,185,129,.28) 0%, rgba(16,185,129,.12) 100%) !important;
border-color: rgba(16,185,129,.55) !important;
}
.wonda-kb-info--mild .wonda-kb-info__stat--zone {
background: linear-gradient(180deg, rgba(20,184,166,.28) 0%, rgba(20,184,166,.12) 100%) !important;
border-color: rgba(20,184,166,.55) !important;
}
.wonda-kb-info--warm .wonda-kb-info__stat--zone {
background: linear-gradient(180deg, rgba(245,158,11,.34) 0%, rgba(245,158,11,.14) 100%) !important;
border-color: rgba(245,158,11,.62) !important;
}
.wonda-kb-info--hot .wonda-kb-info__stat--zone {
background: linear-gradient(180deg, rgba(234,88,12,.38) 0%, rgba(234,88,12,.16) 100%) !important;
border-color: rgba(234,88,12,.68) !important;
}
.wonda-kb-info--critical .wonda-kb-info__stat--zone {
background: linear-gradient(180deg, rgba(220,38,38,.42) 0%, rgba(220,38,38,.18) 100%) !important;
border-color: rgba(220,38,38,.72) !important;
}
/* Zone tile value keeps the zone colour it already had (from the
earlier CSS), just ensure it stays bold against the stronger tint */
.wonda-kb-info__stat--zone .wonda-kb-info__value {
font-weight: 700 !important;
}
/* ---------- Mobile — same colours, tighter padding ---------- */
@media (max-width: 900px) {
.wonda-kb-info--critical { background: radial-gradient(340px 180px at 100% 0%, rgba(220,38,38,.28), transparent 65%) , linear-gradient(135deg, #1c1c3c 0%, #141433 100%) !important; }
.wonda-kb-info--hot { background: radial-gradient(340px 180px at 100% 0%, rgba(234,88,12,.24), transparent 65%) , linear-gradient(135deg, #1c1c3c 0%, #141433 100%) !important; }
.wonda-kb-info--warm { background: radial-gradient(340px 180px at 100% 0%, rgba(245,158,11,.20), transparent 65%) , linear-gradient(135deg, #1c1c3c 0%, #141433 100%) !important; }
.wonda-kb-info--mild { background: radial-gradient(340px 180px at 100% 0%, rgba(20,184,166,.18), transparent 65%) , linear-gradient(135deg, #1c1c3c 0%, #141433 100%) !important; }
.wonda-kb-info--cool { background: radial-gradient(340px 180px at 100% 0%, rgba(16,185,129,.18), transparent 65%) , linear-gradient(135deg, #1c1c3c 0%, #141433 100%) !important; }
}
/* ==== END WONDA_KB_COLORED_TILES_CSS ==== */
/* ============================================================
WONDA_KB_ADVICE_FOOT_FIX
The "Target: keep the KB under 30,000 characters" line was
rendering at ~72% opacity pale grey on a dark red background.
This forces a proper callout: bright text, amber accent border,
subtle amber background so it reads as an actionable target.
============================================================ */
.wonda-kb-info__advice-foot {
display: block !important;
margin: 14px 0 0 !important;
padding: 12px 14px !important;
background: linear-gradient(180deg, rgba(251, 191, 36, .14) 0%, rgba(251, 191, 36, .05) 100%) !important;
border: 1px solid rgba(251, 191, 36, .35) !important;
border-left: 3px solid #fbbf24 !important;
border-radius: 8px !important;
font-size: 13px !important;
line-height: 1.5 !important;
color: #fef3c7 !important;
font-weight: 500 !important;
text-align: left !important;
text-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
}
.wonda-kb-info__advice-foot strong {
color: #fbbf24 !important;
font-weight: 700 !important;
text-shadow: 0 1px 2px rgba(0,0,0,.40) !important;
}
/* Critical zone gets a slightly stronger contrast so it survives the
red-tinted background */
.wonda-kb-info--critical .wonda-kb-info__advice-foot {
background: linear-gradient(180deg, rgba(251, 191, 36, .22) 0%, rgba(251, 191, 36, .08) 100%) !important;
border-color: rgba(251, 191, 36, .50) !important;
border-left-color: #fbbf24 !important;
color: #fffbeb !important;
}
.wonda-kb-info--critical .wonda-kb-info__advice-foot strong {
color: #fde68a !important;
}
/* Hot zone — same idea, amber-orange flavour */
.wonda-kb-info--hot .wonda-kb-info__advice-foot {
background: linear-gradient(180deg, rgba(251, 146, 60, .18) 0%, rgba(251, 146, 60, .06) 100%) !important;
border-color: rgba(251, 146, 60, .45) !important;
border-left-color: #fb923c !important;
color: #fff7ed !important;
}
/* Warm zone — softer */
.wonda-kb-info--warm .wonda-kb-info__advice-foot {
background: linear-gradient(180deg, rgba(245, 158, 11, .14) 0%, rgba(245, 158, 11, .04) 100%) !important;
border-color: rgba(245, 158, 11, .38) !important;
border-left-color: #f59e0b !important;
color: #fffbeb !important;
}
/* Mobile — slightly tighter padding */
@media (max-width: 900px) {
.wonda-kb-info__advice-foot {
padding: 10px 12px !important;
font-size: 12.5px !important;
}
}
/* ==== END WONDA_KB_ADVICE_FOOT_FIX ==== */
/* ============================================================
WONDA_KB_CLEAN_PANEL_CSS
Quieter KB info panel. Four stats, one sentence, one accent.
Supersedes the earlier .wonda-kb-info* styling — those rules
are left in place but nothing in this panel uses them.
============================================================ */
.wonda-kb-panel {
margin: 0 0 18px;
padding: 18px 20px 16px;
border-radius: 14px;
background: linear-gradient(135deg, #1c1c3c 0%, #141433 100%);
color: #e2e8f0;
box-shadow: 0 14px 30px -18px rgba(20, 20, 51, .60);
position: relative;
overflow: hidden;
}
/* A single accent line — width tracks the KB's position on the 0→50K scale. */
.wonda-kb-panel::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 3px;
width: 100%;
background:
linear-gradient(90deg,
currentColor 0%,
currentColor var(--wonda-kb-accent, 100%),
rgba(255,255,255,.05) var(--wonda-kb-accent, 100%),
rgba(255,255,255,.05) 100%);
opacity: .75;
}
/* Zone colour is applied as the panel's "currentColor" for the accent. */
.wonda-kb-panel--cool { color: #34d399; --wonda-kb-accent: 0%; }
.wonda-kb-panel--mild { color: #2dd4bf; --wonda-kb-accent: 0%; }
.wonda-kb-panel--warm { color: #fbbf24; --wonda-kb-accent: 0%; }
.wonda-kb-panel--hot { color: #fb923c; --wonda-kb-accent: 0%; }
.wonda-kb-panel--critical { color: #f87171; --wonda-kb-accent: 0%; }
/* Because CSS custom props can't be set per-element from PHP without
inline style, we override the accent width inline via a data
attribute selector below. If the value is missing, full width. */
/* Head row */
.wonda-kb-panel__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.wonda-kb-panel__label {
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(255, 255, 255, .72);
}
.wonda-kb-panel__saved {
font-size: 11.5px;
font-weight: 500;
color: rgba(255, 255, 255, .48);
white-space: nowrap;
}
.wonda-kb-panel__saved--dirty {
color: #fbbf24;
}
/* Stats — four values on one line */
.wonda-kb-panel__stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 4px;
margin-bottom: 4px;
}
.wonda-kb-panel__stat {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.wonda-kb-panel__value {
font-size: 20px;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.1;
color: #ffffff;
font-variant-numeric: tabular-nums;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wonda-kb-panel__unit {
font-size: 10.5px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: rgba(255, 255, 255, .42);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Zone tile — the only element that carries the temperature colour */
.wonda-kb-panel__stat--zone {
align-items: flex-end;
text-align: right;
}
.wonda-kb-panel__zone {
display: inline-block;
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 700;
letter-spacing: .02em;
line-height: 1;
color: #1c1c3c;
background: currentColor;
box-shadow: 0 2px 8px -2px currentColor;
margin-bottom: 6px;
}
.wonda-kb-panel--cool .wonda-kb-panel__zone { background: #34d399; }
.wonda-kb-panel--mild .wonda-kb-panel__zone { background: #2dd4bf; }
.wonda-kb-panel--warm .wonda-kb-panel__zone { background: #fbbf24; }
.wonda-kb-panel--hot .wonda-kb-panel__zone { background: #fb923c; }
.wonda-kb-panel--critical .wonda-kb-panel__zone { background: #f87171; color: #2b0a0a; }
/* Note */
.wonda-kb-panel__note {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid rgba(255, 255, 255, .07);
font-size: 12.5px;
line-height: 1.55;
color: rgba(226, 232, 240, .68);
max-width: 62ch;
}
.wonda-kb-panel--critical .wonda-kb-panel__note { color: rgba(254, 226, 226, .82); }
.wonda-kb-panel--hot .wonda-kb-panel__note { color: rgba(255, 237, 213, .82); }
.wonda-kb-panel--warm .wonda-kb-panel__note { color: rgba(254, 243, 199, .82); }
/* Mobile */
@media (max-width: 900px) {
.wonda-kb-panel {
padding: 14px 16px 12px;
border-radius: 12px;
}
.wonda-kb-panel__head {
margin-bottom: 12px;
padding-bottom: 10px;
}
.wonda-kb-panel__stats {
grid-template-columns: 1fr 1fr;
gap: 12px 16px;
}
.wonda-kb-panel__stat--zone {
align-items: flex-start;
text-align: left;
grid-column: 1 / -1;
padding-top: 4px;
border-top: 1px solid rgba(255, 255, 255, .06);
margin-top: 4px;
}
.wonda-kb-panel__value { font-size: 18px; }
.wonda-kb-panel__note { font-size: 12px; max-width: none; }
}
/* ==== END WONDA_KB_CLEAN_PANEL_CSS ==== */
/* ============================================================
WONDA_KB_LIGHT_TILES_CSS
KB size + impact panel — LIGHT theme.
Panel is a normal white card. Each stat tile is a coloured card
tinted by the KB's current temperature zone. The zone colour
flows through the whole panel via CSS variables set per zone.
============================================================ */
/* ---------- Zone colour variables ---------- */
.wonda-kb-tiles {
--kb-tint-bg: rgba(15, 23, 42, .04);
--kb-tint-border: rgba(15, 23, 42, .12);
--kb-tint-text: #0f172a;
--kb-tint-accent: #64748b;
--kb-tint-soft: #f8fafc;
}
.wonda-kb-tiles--cool {
--kb-tint-bg: rgba(16, 185, 129, .10);
--kb-tint-border: rgba(16, 185, 129, .30);
--kb-tint-text: #065f46;
--kb-tint-accent: #10b981;
--kb-tint-soft: #ecfdf5;
}
.wonda-kb-tiles--mild {
--kb-tint-bg: rgba(20, 184, 166, .10);
--kb-tint-border: rgba(20, 184, 166, .30);
--kb-tint-text: #115e59;
--kb-tint-accent: #14b8a6;
--kb-tint-soft: #f0fdfa;
}
.wonda-kb-tiles--warm {
--kb-tint-bg: rgba(245, 158, 11, .12);
--kb-tint-border: rgba(245, 158, 11, .35);
--kb-tint-text: #78350f;
--kb-tint-accent: #f59e0b;
--kb-tint-soft: #fffbeb;
}
.wonda-kb-tiles--hot {
--kb-tint-bg: rgba(234, 88, 12, .12);
--kb-tint-border: rgba(234, 88, 12, .38);
--kb-tint-text: #7c2d12;
--kb-tint-accent: #ea580c;
--kb-tint-soft: #fff7ed;
}
.wonda-kb-tiles--critical {
--kb-tint-bg: rgba(220, 38, 38, .10);
--kb-tint-border: rgba(220, 38, 38, .35);
--kb-tint-text: #7f1d1d;
--kb-tint-accent: #dc2626;
--kb-tint-soft: #fef2f2;
}
/* ---------- Panel container — light card ---------- */
.wonda-kb-tiles {
margin: 0 0 18px;
padding: 18px 20px 16px;
background: #ffffff;
border: 1px solid var(--kb-tint-border);
border-radius: 14px;
box-shadow:
0 1px 2px rgba(15, 23, 42, .03),
0 12px 28px -22px rgba(15, 23, 42, .22);
position: relative;
overflow: hidden;
}
/* Top accent strip in zone colour */
.wonda-kb-tiles::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg,
var(--kb-tint-accent) 0%,
color-mix(in srgb, var(--kb-tint-accent) 30%, transparent) 60%,
transparent 100%);
}
/* Head */
.wonda-kb-tiles__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(15, 23, 42, .06);
}
.wonda-kb-tiles__title {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11.5px;
font-weight: 700;
letter-spacing: .10em;
text-transform: uppercase;
color: var(--kb-tint-text);
}
.wonda-kb-tiles__title-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--kb-tint-accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--kb-tint-accent) 25%, transparent);
}
.wonda-kb-tiles__status {
font-size: 11.5px;
font-weight: 500;
color: #64748b;
padding: 3px 10px;
background: #f1f5f9;
border-radius: 10px;
white-space: nowrap;
}
.wonda-kb-tiles__status.wonda-kb-tiles__status--dirty {
background: #fef3c7;
color: #92400e;
font-weight: 600;
}
/* ---------- Stat tiles — each carries the zone tint ---------- */
.wonda-kb-tiles__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 16px;
}
.wonda-kb-tile {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px 14px;
background: var(--kb-tint-bg);
border: 1px solid var(--kb-tint-border);
border-radius: 10px;
min-width: 0;
transition: transform .12s ease, box-shadow .12s ease;
}
.wonda-kb-tile:hover {
transform: translateY(-1px);
box-shadow: 0 6px 14px -10px color-mix(in srgb, var(--kb-tint-accent) 60%, transparent);
}
.wonda-kb-tile__value {
font-size: 20px;
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--kb-tint-text);
font-variant-numeric: tabular-nums;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wonda-kb-tile__label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: color-mix(in srgb, var(--kb-tint-text) 70%, transparent);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Zone tile — a touch stronger than the rest so it reads as summary */
.wonda-kb-tile--zone {
background: linear-gradient(180deg,
color-mix(in srgb, var(--kb-tint-accent) 18%, #ffffff) 0%,
var(--kb-tint-bg) 100%);
border-color: color-mix(in srgb, var(--kb-tint-accent) 45%, transparent);
}
.wonda-kb-tile--zone .wonda-kb-tile__value {
font-size: 15px;
letter-spacing: 0;
font-weight: 800;
}
/* ---------- Temperature meter ---------- */
.wonda-kb-tiles__meter {
padding: 4px 0 12px;
margin-bottom: 14px;
}
.wonda-kb-tiles__meter-track {
position: relative;
height: 6px;
border-radius: 3px;
background: linear-gradient(90deg,
#10b981 0%, #14b8a6 30%, #f59e0b 60%, #ea580c 80%, #dc2626 100%);
opacity: .30;
overflow: visible;
}
.wonda-kb-tiles__meter-fill {
position: absolute;
inset: 0 auto 0 0;
border-radius: 3px 0 0 3px;
background: linear-gradient(90deg,
#10b981 0%, #14b8a6 30%, #f59e0b 60%, #ea580c 80%, #dc2626 100%);
transition: width .25s ease;
}
.wonda-kb-tiles__meter-marker {
position: absolute;
top: 50%;
width: 14px;
height: 14px;
border-radius: 50%;
background: #ffffff;
border: 2px solid var(--kb-tint-accent);
box-shadow: 0 2px 6px rgba(15, 23, 42, .18);
transform: translate(-50%, -50%);
transition: left .25s ease;
z-index: 2;
}
.wonda-kb-tiles__meter-labels {
display: flex;
justify-content: space-between;
margin-top: 6px;
font-size: 10px;
font-family: var(--font-mono);
color: #94a3b8;
font-variant-numeric: tabular-nums;
letter-spacing: .02em;
}
.wonda-kb-tiles__meter-red { color: #dc2626 !important; font-weight: 700; }
/* ---------- Note ---------- */
.wonda-kb-tiles__note {
padding: 14px 16px;
background: var(--kb-tint-soft);
border: 1px solid color-mix(in srgb, var(--kb-tint-accent) 20%, transparent);
border-radius: 10px;
font-size: 12.5px;
line-height: 1.6;
color: #334155;
}
.wonda-kb-tiles__note strong {
color: var(--kb-tint-text);
font-weight: 700;
}
/* ---------- Advice block ---------- */
.wonda-kb-tiles__advice {
margin-top: 14px;
padding: 14px 16px 12px;
background: #ffffff;
border: 1px solid color-mix(in srgb, var(--kb-tint-accent) 30%, transparent);
border-left: 3px solid var(--kb-tint-accent);
border-radius: 10px;
}
.wonda-kb-tiles__advice-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
color: var(--kb-tint-text);
font-size: 13.5px;
}
.wonda-kb-tiles__advice-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 6px;
background: color-mix(in srgb, var(--kb-tint-accent) 18%, transparent);
color: var(--kb-tint-accent);
flex-shrink: 0;
}
.wonda-kb-tiles__advice-icon svg { width: 13px; height: 13px; display: block; }
.wonda-kb-tiles__advice-head strong { font-weight: 700; }
.wonda-kb-tiles__advice-list {
margin: 0;
padding-left: 18px;
font-size: 12.5px;
line-height: 1.65;
color: #334155;
}
.wonda-kb-tiles__advice-list li { margin-bottom: 6px; }
.wonda-kb-tiles__advice-list strong {
color: var(--kb-tint-text);
font-weight: 700;
}
.wonda-kb-tiles__advice-target {
display: block;
margin: 12px 0 0;
padding: 10px 12px;
background: color-mix(in srgb, var(--kb-tint-accent) 10%, #ffffff);
border: 1px dashed color-mix(in srgb, var(--kb-tint-accent) 40%, transparent);
border-radius: 8px;
font-size: 12.5px;
line-height: 1.5;
color: var(--kb-tint-text);
font-weight: 500;
}
.wonda-kb-tiles__advice-target strong {
color: var(--kb-tint-accent);
font-weight: 700;
}
/* ---------- Mobile ---------- */
@media (max-width: 900px) {
.wonda-kb-tiles {
padding: 14px 16px 12px;
border-radius: 12px;
}
.wonda-kb-tiles__grid {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.wonda-kb-tile {
padding: 10px 12px;
}
.wonda-kb-tile__value { font-size: 17px; }
.wonda-kb-tile--zone .wonda-kb-tile__value { font-size: 14px; }
.wonda-kb-tile__label { font-size: 9.5px; }
.wonda-kb-tiles__note { font-size: 12px; padding: 12px 14px; }
.wonda-kb-tiles__advice { padding: 12px 14px 10px; }
.wonda-kb-tiles__advice-list { font-size: 12px; padding-left: 16px; }
.wonda-kb-tiles__advice-target { font-size: 12px; }
}
/* ==== END WONDA_KB_LIGHT_TILES_CSS ==== */
/* ============================================================
WONDA_KB_SOLID_TILES_CSS
KB stat tiles — SOLID saturated zone colour with white text.
Overrides the earlier tinted-tile rules. Load order in the file
ensures these win because they're appended last.
============================================================ */
/* ---------- Zone variables: solid fill + matching border + shadow ---------- */
.wonda-kb-tiles {
--kb-fill: #475569; /* slate — fallback */
--kb-fill-2: #334155; /* gradient bottom */
--kb-border: rgba(0, 0, 0, .10);
--kb-accent: #475569;
--kb-soft: #f8fafc;
--kb-text-on-fill: #ffffff;
--kb-glow: rgba(15, 23, 42, .18);
}
.wonda-kb-tiles--cool {
--kb-fill: #059669;
--kb-fill-2: #047857;
--kb-border: rgba(4, 120, 87, .55);
--kb-accent: #10b981;
--kb-soft: #ecfdf5;
--kb-glow: rgba(5, 150, 105, .35);
}
.wonda-kb-tiles--mild {
--kb-fill: #0d9488;
--kb-fill-2: #0f766e;
--kb-border: rgba(15, 118, 110, .55);
--kb-accent: #14b8a6;
--kb-soft: #f0fdfa;
--kb-glow: rgba(13, 148, 136, .35);
}
.wonda-kb-tiles--warm {
--kb-fill: #d97706;
--kb-fill-2: #b45309;
--kb-border: rgba(180, 83, 9, .55);
--kb-accent: #f59e0b;
--kb-soft: #fffbeb;
--kb-glow: rgba(217, 119, 6, .38);
}
.wonda-kb-tiles--hot {
--kb-fill: #ea580c;
--kb-fill-2: #c2410c;
--kb-border: rgba(194, 65, 12, .55);
--kb-accent: #fb923c;
--kb-soft: #fff7ed;
--kb-glow: rgba(234, 88, 12, .40);
}
.wonda-kb-tiles--critical {
--kb-fill: #991b1b; /* deep maroon */
--kb-fill-2: #7f1d1d; /* darker maroon */
--kb-border: rgba(127, 29, 29, .65);
--kb-accent: #dc2626;
--kb-soft: #fef2f2;
--kb-glow: rgba(153, 27, 27, .45);
}
/* ---------- Panel container — stays light, uses accent for border ---------- */
.wonda-kb-tiles {
border: 1px solid var(--kb-border) !important;
background: #ffffff !important;
box-shadow:
0 1px 2px rgba(15, 23, 42, .03),
0 12px 28px -22px var(--kb-glow) !important;
}
.wonda-kb-tiles::before {
background: linear-gradient(90deg,
var(--kb-fill) 0%,
color-mix(in srgb, var(--kb-fill) 40%, transparent) 60%,
transparent 100%) !important;
height: 4px !important;
opacity: 1 !important;
}
/* ---------- Head ---------- */
.wonda-kb-tiles__title { color: var(--kb-fill) !important; }
.wonda-kb-tiles__title-dot {
background: var(--kb-fill) !important;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--kb-fill) 22%, transparent) !important;
}
.wonda-kb-tiles__status {
background: #f1f5f9 !important;
color: #475569 !important;
}
.wonda-kb-tiles__status.wonda-kb-tiles__status--dirty {
background: #fef3c7 !important;
color: #92400e !important;
}
/* ---------- TILES — SOLID COLOUR, WHITE TEXT ---------- */
.wonda-kb-tiles__grid {
gap: 10px !important;
}
.wonda-kb-tile {
background: linear-gradient(180deg, var(--kb-fill) 0%, var(--kb-fill-2) 100%) !important;
border: 1px solid var(--kb-border) !important;
border-radius: 10px !important;
padding: 14px 16px !important;
box-shadow:
0 1px 2px rgba(0, 0, 0, .10),
0 6px 14px -8px var(--kb-glow),
inset 0 1px 0 rgba(255, 255, 255, .14) !important;
transition: transform .12s ease, box-shadow .15s ease !important;
}
.wonda-kb-tile:hover {
transform: translateY(-2px);
box-shadow:
0 4px 10px rgba(0, 0, 0, .14),
0 12px 22px -10px var(--kb-glow),
inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}
.wonda-kb-tile__value {
color: #ffffff !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, .25) !important;
font-size: 21px !important;
font-weight: 700 !important;
letter-spacing: -0.02em !important;
line-height: 1.05 !important;
}
.wonda-kb-tile__label {
color: rgba(255, 255, 255, .84) !important;
text-shadow: 0 1px 1px rgba(0, 0, 0, .18) !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: .09em !important;
text-transform: uppercase !important;
}
/* ---------- Zone tile (KB size / status) — even stronger ---------- */
.wonda-kb-tile--zone {
background: linear-gradient(180deg,
color-mix(in srgb, var(--kb-fill) 78%, black) 0%,
var(--kb-fill-2) 100%) !important;
border-color: var(--kb-border) !important;
box-shadow:
0 1px 2px rgba(0, 0, 0, .14),
0 8px 18px -8px var(--kb-glow),
inset 0 1px 0 rgba(255, 255, 255, .16),
inset 0 0 0 1px rgba(255, 255, 255, .06) !important;
}
.wonda-kb-tile--zone .wonda-kb-tile__value {
font-size: 16px !important;
letter-spacing: .01em !important;
font-weight: 800 !important;
text-transform: none !important;
}
.wonda-kb-tile--zone .wonda-kb-tile__label {
color: rgba(255, 255, 255, .72) !important;
}
/* Critical zone gets a subtle pulse on the KB size tile to say "act now" */
.wonda-kb-tiles--critical .wonda-kb-tile--zone {
animation: wonda-kb-zone-pulse 2.4s ease-in-out infinite;
}
@keyframes wonda-kb-zone-pulse {
0%, 100% {
box-shadow:
0 1px 2px rgba(0, 0, 0, .14),
0 8px 18px -8px var(--kb-glow),
inset 0 1px 0 rgba(255, 255, 255, .16),
0 0 0 0 rgba(220, 38, 38, .45);
}
50% {
box-shadow:
0 1px 2px rgba(0, 0, 0, .14),
0 8px 18px -8px var(--kb-glow),
inset 0 1px 0 rgba(255, 255, 255, .16),
0 0 0 6px rgba(220, 38, 38, 0);
}
}
/* ---------- Temperature meter ---------- */
.wonda-kb-tiles__meter-track {
height: 8px !important;
border-radius: 4px !important;
opacity: 1 !important;
background: linear-gradient(90deg,
#10b981 0%, #14b8a6 30%, #f59e0b 60%, #ea580c 80%, #dc2626 100%) !important;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .12) !important;
}
.wonda-kb-tiles__meter-fill {
background: linear-gradient(90deg,
#10b981 0%, #14b8a6 30%, #f59e0b 60%, #ea580c 80%, #dc2626 100%) !important;
filter: saturate(1.2) brightness(1.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25) !important;
}
.wonda-kb-tiles__meter-marker {
width: 16px !important;
height: 16px !important;
background: #ffffff !important;
border: 3px solid var(--kb-fill) !important;
box-shadow:
0 2px 6px rgba(0, 0, 0, .25),
0 0 0 3px rgba(255, 255, 255, .8) !important;
}
/* ---------- Note — subtle zone tint but not overpowering ---------- */
.wonda-kb-tiles__note {
background: var(--kb-soft) !important;
border: 1px solid color-mix(in srgb, var(--kb-fill) 22%, transparent) !important;
color: #1e293b !important;
}
.wonda-kb-tiles__note strong {
color: var(--kb-fill-2) !important;
}
/* ---------- Advice block ---------- */
.wonda-kb-tiles__advice {
border-left: 4px solid var(--kb-fill) !important;
border-top: 1px solid color-mix(in srgb, var(--kb-fill) 22%, transparent) !important;
border-right: 1px solid color-mix(in srgb, var(--kb-fill) 22%, transparent) !important;
border-bottom: 1px solid color-mix(in srgb, var(--kb-fill) 22%, transparent) !important;
}
.wonda-kb-tiles__advice-head { color: var(--kb-fill-2) !important; }
.wonda-kb-tiles__advice-icon {
background: var(--kb-fill) !important;
color: #ffffff !important;
box-shadow: 0 2px 6px -2px var(--kb-glow);
}
.wonda-kb-tiles__advice-list strong { color: var(--kb-fill-2) !important; }
.wonda-kb-tiles__advice-target {
background: color-mix(in srgb, var(--kb-fill) 8%, #ffffff) !important;
border-color: color-mix(in srgb, var(--kb-fill) 40%, transparent) !important;
color: #1e293b !important;
}
.wonda-kb-tiles__advice-target strong {
color: var(--kb-fill-2) !important;
}
/* ---------- Mobile ---------- */
@media (max-width: 900px) {
.wonda-kb-tile { padding: 12px 14px !important; }
.wonda-kb-tile__value { font-size: 18px !important; }
.wonda-kb-tile--zone .wonda-kb-tile__value { font-size: 15px !important; }
.wonda-kb-tile__label { font-size: 9.5px !important; }
}
/* ==== END WONDA_KB_SOLID_TILES_CSS ==== */
/* ============================================================
WONDA_TRANSCRIPT_NARROW_CSS
Chat-logs transcript — narrow, centred reading column on desktop.
Matches the mobile feel, so long conversations are easy to scan.
============================================================ */
@media (min-width: 901px) {
/* The transcript becomes a centred column. Long messages stay
readable instead of stretching to the full card width. */
.wonda-transcript {
max-width: 720px !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 6px 4px !important;
}
/* Bubbles cap at 78% of that column (~560px), same feel as mobile. */
.wonda-transcript__row {
max-width: 78% !important;
}
/* User rows sit flush right — reverse rows already handle this,
but cap them so a long user message doesn't sprawl. */
.wonda-transcript__row--user {
max-width: 78% !important;
}
/* Slightly bigger bubble text on desktop now that width is
constrained — reads better at 720px than at 1200px. */
.wonda-transcript__bubble {
font-size: 14.5px !important;
padding: 13px 17px !important;
line-height: 1.6 !important;
}
/* Whisper-thin divider line down the middle so the centred column
feels intentional rather than floating. */
.wonda-transcript {
position: relative;
}
.wonda-transcript::before {
content: '';
position: absolute;
top: 20px;
bottom: 20px;
left: 50%;
width: 1px;
transform: translateX(-.5px);
background: linear-gradient(180deg,
transparent 0%,
rgba(15, 23, 42, .06) 15%,
rgba(15, 23, 42, .06) 85%,
transparent 100%);
pointer-events: none;
z-index: 0;
}
/* Rows sit above the divider line */
.wonda-transcript__row {
position: relative;
z-index: 1;
}
/* Also constrain the convo hero above the transcript so the whole
section reads as one column. */
.wonda-convo-hero {
max-width: 720px !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
/* Ultra-wide desktop — nudge the column slightly wider so it doesn't
feel cramped on 1920px+ monitors. */
@media (min-width: 1600px) {
.wonda-transcript {
max-width: 780px !important;
}
.wonda-convo-hero {
max-width: 780px !important;
}
}
/* ==== END WONDA_TRANSCRIPT_NARROW_CSS ==== */
/* ============================================================
WONDA_TRANSCRIPT_NARROW_V2
Force the chat-logs transcript into a narrow, readable column
on every viewport. No media query — applies unconditionally.
Mobile is already narrow so this is a no-op there; desktop gets
the fix it needs.
============================================================ */
/* The wrapper column */
.wonda-card .wonda-transcript,
main .wonda-transcript,
body .wonda-transcript {
max-width: 720px !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 8px 4px !important;
box-sizing: border-box !important;
position: relative !important;
}
/* Bubbles cap at 78% of the narrow column */
.wonda-card .wonda-transcript__row,
main .wonda-transcript__row,
body .wonda-transcript__row {
max-width: 78% !important;
}
/* User rows sit on the right — same cap */
.wonda-card .wonda-transcript__row--user,
main .wonda-transcript__row--user,
body .wonda-transcript__row--user {
max-width: 78% !important;
margin-left: auto !important;
}
/* Centre divider line — makes the narrow column feel intentional */
.wonda-card .wonda-transcript::before,
main .wonda-transcript::before,
body .wonda-transcript::before {
content: '';
position: absolute;
top: 20px;
bottom: 20px;
left: 50%;
width: 1px;
transform: translateX(-.5px);
background: linear-gradient(180deg,
transparent 0%,
rgba(15, 23, 42, .06) 15%,
rgba(15, 23, 42, .06) 85%,
transparent 100%);
pointer-events: none;
z-index: 0;
}
.wonda-card .wonda-transcript__row,
main .wonda-transcript__row,
body .wonda-transcript__row {
position: relative !important;
z-index: 1 !important;
}
/* Slightly bigger bubble text at the narrower width */
.wonda-card .wonda-transcript__bubble,
main .wonda-transcript__bubble,
body .wonda-transcript__bubble {
font-size: 14.5px !important;
padding: 13px 17px !important;
line-height: 1.6 !important;
}
/* Hero card also constrained so the whole section reads as one column */
.wonda-card .wonda-convo-hero,
main .wonda-convo-hero,
body .wonda-convo-hero {
max-width: 720px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Ultra-wide monitors get a touch more room */
@media (min-width: 1600px) {
.wonda-card .wonda-transcript,
main .wonda-transcript,
body .wonda-transcript {
max-width: 780px !important;
}
.wonda-card .wonda-convo-hero,
main .wonda-convo-hero,
body .wonda-convo-hero {
max-width: 780px !important;
}
}
/* ==== END WONDA_TRANSCRIPT_NARROW_V2 ==== */
/* ============================================================
WONDA_CHATLOGS_ACTIVITY_CSS
Base visual styling for the chat-logs transcript and hero card.
This is what makes bubbles look like bubbles and avatars look
like circular badges.
============================================================ */
/* ---------- Session hero card ---------- */
.wonda-convo-hero {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
padding: 18px 20px;
margin: 16px 0 20px;
background: linear-gradient(135deg,
rgba(28, 28, 60, .04) 0%,
rgba(255, 0, 126, .04) 100%);
border: 1px solid rgba(28, 28, 60, .08);
border-radius: 14px;
position: relative;
overflow: hidden;
}
.wonda-convo-hero::before {
content: '';
position: absolute;
top: 0; left: 0; bottom: 0;
width: 3px;
background: linear-gradient(180deg,
#FF007E 0%,
rgba(255, 0, 126, .3) 100%);
}
.wonda-convo-hero__title {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.wonda-convo-hero__icon {
width: 42px;
height: 42px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #1c1c3c 0%, #2a2a52 100%);
color: #fff;
flex-shrink: 0;
box-shadow: 0 4px 12px -4px rgba(28, 28, 60, .30);
}
.wonda-convo-hero__icon svg { width: 20px; height: 20px; display: block; }
.wonda-convo-hero__label {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: .08em;
font-weight: 700;
color: #64748b;
margin-bottom: 2px;
}
.wonda-convo-hero__id {
font-family: var(--font-mono);
font-size: 14px;
font-weight: 600;
color: #1c1c3c;
letter-spacing: -0.01em;
}
.wonda-convo-hero__stats {
display: flex;
gap: 24px;
flex-wrap: wrap;
}
.wonda-convo-hero__stat {
display: flex;
flex-direction: column;
align-items: flex-end;
min-width: 0;
}
.wonda-convo-hero__stat-value {
font-size: 20px;
font-weight: 700;
color: #1c1c3c;
letter-spacing: -0.02em;
line-height: 1.05;
}
.wonda-convo-hero__stat-value small {
font-size: 11px;
font-weight: 500;
color: #64748b;
margin-left: 2px;
}
.wonda-convo-hero__stat-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .07em;
font-weight: 600;
color: #64748b;
margin-top: 3px;
}
/* ---------- Transcript ---------- */
.wonda-transcript {
margin-top: 8px;
display: flex;
flex-direction: column;
gap: 16px;
padding: 4px 0;
}
.wonda-transcript__row {
display: flex;
gap: 12px;
align-items: flex-start;
max-width: 82%;
}
.wonda-transcript__row--bot { flex-direction: row; }
.wonda-transcript__row--user { flex-direction: row-reverse; margin-left: auto; }
.wonda-transcript__avatar {
width: 34px;
height: 34px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 2px 6px rgba(15, 23, 42, .08);
}
.wonda-transcript__avatar svg { width: 17px; height: 17px; display: block; }
.wonda-transcript__row--bot .wonda-transcript__avatar {
background: linear-gradient(135deg, #1c1c3c 0%, #2a2a52 100%);
color: #fff;
}
.wonda-transcript__row--user .wonda-transcript__avatar {
background: linear-gradient(135deg, #FF007E 0%, #c8005f 100%);
color: #fff;
}
.wonda-transcript__bubble {
min-width: 0;
flex: 1;
padding: 12px 16px;
border-radius: 16px;
font-size: 14px;
line-height: 1.55;
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.wonda-transcript__row--bot .wonda-transcript__bubble {
background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
border: 1px solid rgba(28, 28, 60, .08);
border-bottom-left-radius: 6px;
color: #0f172a;
}
.wonda-transcript__row--user .wonda-transcript__bubble {
background: linear-gradient(135deg, #FF2A92 0%, #E60072 100%);
color: #fff;
border-bottom-right-radius: 6px;
box-shadow: 0 6px 16px -8px rgba(255, 0, 126, .55);
}
.wonda-transcript__text { word-break: break-word; overflow-wrap: anywhere; }
.wonda-transcript__meta {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin-top: 8px;
font-size: 11px;
line-height: 1.3;
}
.wonda-transcript__row--bot .wonda-transcript__meta { color: #94a3b8; }
.wonda-transcript__row--user .wonda-transcript__meta { color: rgba(255, 255, 255, .78); }
.wonda-transcript__who { font-weight: 600; }
.wonda-transcript__dot { opacity: .5; }
.wonda-transcript__when { font-family: var(--font-mono); font-size: 10.5px; }
.wonda-transcript__lat {
font-family: var(--font-mono);
font-size: 10.5px;
padding: 1px 6px;
border-radius: 4px;
}
.wonda-transcript__row--bot .wonda-transcript__lat {
background: #f1f5f9;
color: #475569;
}
.wonda-transcript__row--user .wonda-transcript__lat {
background: rgba(255, 255, 255, .18);
color: #fff;
}
.wonda-transcript__model {
background: rgba(15, 23, 42, .05) !important;
border: 0 !important;
color: #64748b !important;
font-size: 10.5px !important;
padding: 1px 6px !important;
}
.wonda-transcript__row--user .wonda-transcript__model {
background: rgba(255, 255, 255, .18) !important;
color: #fff !important;
}
/* ---------- Mobile ---------- */
@media (max-width: 900px) {
.wonda-convo-hero { padding: 14px 16px; gap: 14px; }
.wonda-convo-hero__stats { gap: 16px; width: 100%; }
.wonda-convo-hero__stat { align-items: flex-start; flex: 1; }
.wonda-convo-hero__stat-value { font-size: 17px; }
.wonda-convo-hero__icon { width: 38px; height: 38px; }
.wonda-convo-hero__icon svg { width: 18px; height: 18px; }
.wonda-transcript { gap: 14px; }
.wonda-transcript__row { max-width: 94%; }
.wonda-transcript__bubble { padding: 10px 13px; font-size: 13.5px; }
.wonda-transcript__avatar { width: 30px; height: 30px; }
.wonda-transcript__avatar svg { width: 15px; height: 15px; }
}
/* ==== END WONDA_CHATLOGS_ACTIVITY_CSS ==== */
/* ============================================================
WONDA_CONVO_HERO_STATS_V2
Cleaner stat strip for the conversation hero card.
Each stat is its own column with a soft divider. Values and
labels align left within their block, spacing is even, and the
whole strip reads as one unit instead of five loose numbers.
============================================================ */
.wonda-convo-hero__stats {
display: flex !important;
align-items: stretch !important;
gap: 0 !important;
flex-wrap: wrap;
background: rgba(255, 255, 255, .65);
border: 1px solid rgba(28, 28, 60, .07);
border-radius: 12px;
padding: 4px 4px;
box-shadow: 0 1px 2px rgba(15, 23, 42, .02);
}
.wonda-convo-hero__stat {
position: relative;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 3px;
padding: 10px 18px !important;
min-width: 0;
text-align: left;
}
/* Divider between stats, skipped on the first one */
.wonda-convo-hero__stat + .wonda-convo-hero__stat::before {
content: '';
position: absolute;
left: 0;
top: 22%;
bottom: 22%;
width: 1px;
background: linear-gradient(180deg,
transparent 0%,
rgba(28, 28, 60, .12) 50%,
transparent 100%);
}
/* Value on top */
.wonda-convo-hero__stat-value {
font-size: 20px !important;
font-weight: 700 !important;
color: #1c1c3c !important;
letter-spacing: -0.02em !important;
line-height: 1 !important;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.wonda-convo-hero__stat-value small {
font-size: 11px !important;
font-weight: 500 !important;
color: #64748b !important;
margin-left: 2px !important;
letter-spacing: 0;
}
/* Label under value */
.wonda-convo-hero__stat-label {
font-size: 9.5px !important;
text-transform: uppercase !important;
letter-spacing: .09em !important;
font-weight: 700 !important;
color: #94a3b8 !important;
margin-top: 0 !important;
line-height: 1 !important;
white-space: nowrap;
}
/* Accent the primary stats (Messages, Visitor, Bot) with brand colour */
.wonda-convo-hero__stat:nth-child(1) .wonda-convo-hero__stat-value { color: #1c1c3c !important; }
.wonda-convo-hero__stat:nth-child(2) .wonda-convo-hero__stat-value { color: #FF007E !important; }
.wonda-convo-hero__stat:nth-child(3) .wonda-convo-hero__stat-value { color: #1c1c3c !important; }
/* ---------- Mobile: 2-col grid, dividers removed ---------- */
@media (max-width: 900px) {
.wonda-convo-hero__stats {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 8px !important;
background: transparent;
border: 0;
box-shadow: none;
padding: 0;
width: 100%;
}
.wonda-convo-hero__stat {
align-items: flex-start !important;
padding: 10px 12px !important;
background: rgba(255, 255, 255, .7);
border: 1px solid rgba(28, 28, 60, .07);
border-radius: 10px;
text-align: left;
}
.wonda-convo-hero__stat + .wonda-convo-hero__stat::before {
content: none !important;
display: none !important;
}
.wonda-convo-hero__stat-value { font-size: 16px !important; }
.wonda-convo-hero__stat-label { font-size: 9px !important; letter-spacing: .07em !important; }
}
@media (max-width: 480px) {
.wonda-convo-hero__stats {
grid-template-columns: repeat(2, 1fr) !important;
}
}
/* ==== END WONDA_CONVO_HERO_STATS_V2 ==== */
/* ============================================================
WONDA_BELL_PANEL_PADDING
The panel had no inner padding, and the item-inner anchor had a
negative margin that used to cancel parent padding which is now
gone — pushing content 16px outside the panel on each side.
============================================================ */
.wonda-bell__panel {
padding: 6px;
}
/* Head and foot hug the panel edges (their own padding is inside). */
.wonda-bell__head {
margin: -6px -6px 6px;
border-radius: 12px 12px 0 0;
}
.wonda-bell__foot {
margin: 6px -6px -6px;
border-radius: 0 0 12px 12px;
}
/* Inner anchor fills the item; no more negative margin. */
.wonda-bell__item-inner {
margin: 0;
padding: 12px 16px;
}
/* List items get a subtle inset from the panel edges. */
.wonda-bell__list {
margin: 0;
padding: 0;
list-style: none;
}
.wonda-bell__item {
border-radius: 8px;
overflow: hidden;
}
.wonda-bell__item:last-child {
border-bottom: 0;
}
/* Empty state keeps its own breathing room. */
.wonda-bell__empty {
padding: 24px 16px;
}
/* Mobile — same idea, tighter. */
@media (max-width: 600px) {
.wonda-bell__panel {
padding: 4px;
}
.wonda-bell__head {
margin: -4px -4px 4px;
}
.wonda-bell__foot {
margin: 4px -4px -4px;
}
}
/* ============================================================
WONDA_SHOWCASE_HEADER_RIGHT
Pushes the button cluster hard against the RIGHT edge without
relying on a spacer flex item. `margin-right: auto` on the
brand absorbs every pixel of free space, so the buttons land
flush right no matter what the spacer does.
============================================================ */
.wonda-showcase__header {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 8px !important;
padding: 12px 14px !important;
}
/* Brand takes its natural width and pushes EVERYTHING after it
to the right by absorbing all the free space to its right. */
.wonda-showcase__brand {
margin-right: auto !important;
flex: 0 1 auto !important;
min-width: 0 !important;
}
/* Spacer becomes a zero-width no-op — the brand's auto margin
already does its job, and having two space-eaters fight was
part of what made the layout unpredictable. */
.wonda-showcase__header-spacer {
display: none !important;
}
/* Every button is a fixed-size pill on the right. */
.wonda-showcase__header > .wonda-showcase__header-btn {
flex: 0 0 auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* ============================================================
WONDA_SIDEBAR_PRESCROLL_CSS
Lock the sidebar nav to instant scroll so the pre-scroll set
in the partial (before first paint) can never be animated.
============================================================ */
.wonda-sidebar__nav {
scroll-behavior: auto !important;
}
/* ==== END WONDA_SIDEBAR_PRESCROLL_CSS ==== */
/* ============================================================
WONDA_WELCOME_CSS
Redesigned greeting card at the top of the client dashboard.
Header row (greeting + status pill) over a strip of small
info chips for domain / plan / renewal.
============================================================ */
.wonda-welcome {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
padding: 22px 26px;
margin-bottom: 22px;
background:
radial-gradient(700px 220px at 100% 0%, rgba(255, 0, 126, .05), transparent 60%),
linear-gradient(180deg, #ffffff 0%, #fdfdff 100%);
border: 1px solid var(--wonda-card-border, rgba(28, 28, 60, .07));
border-radius: 16px;
box-shadow:
0 1px 2px rgba(15, 23, 42, .035),
0 8px 24px -14px rgba(15, 23, 42, .10);
position: relative;
overflow: hidden;
}
.wonda-welcome::before {
content: '';
position: absolute;
top: 0; left: 0; bottom: 0;
width: 3px;
background: linear-gradient(180deg,
var(--accent, #FF007E) 0%,
color-mix(in srgb, var(--accent, #FF007E) 45%, transparent) 100%);
}
/* ---------- Body (left column) ---------- */
.wonda-welcome__body {
min-width: 0;
flex: 1 1 420px;
}
.wonda-welcome__eyebrow {
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .12em;
color: var(--muted, #94a3b8);
margin-bottom: 6px;
}
.wonda-welcome__title {
margin: 0 0 14px;
font-size: 24px;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.15;
color: var(--wonda-navy-1, #1c1c3c);
word-break: break-word;
}
/* ---------- Chips ---------- */
.wonda-welcome__meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.wonda-welcome__chip {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 5px 11px;
border-radius: 999px;
background: #f3f5fa;
border: 1px solid rgba(28, 28, 60, .06);
font-size: 12.5px;
font-weight: 500;
color: #475569;
line-height: 1.3;
white-space: nowrap;
}
.wonda-welcome__chip code {
font-family: var(--font-mono);
font-size: 12px;
background: transparent;
border: 0;
padding: 0;
color: inherit;
letter-spacing: .01em;
}
.wonda-welcome__chip strong {
color: var(--wonda-navy-1, #1c1c3c);
font-weight: 700;
}
.wonda-welcome__chip-icon {
width: 13px;
height: 13px;
flex-shrink: 0;
opacity: .65;
color: currentColor;
}
/* Tone variants */
.wonda-welcome__chip--info {
background: rgba(59, 130, 246, .08);
border-color: rgba(59, 130, 246, .18);
color: #1e40af;
}
.wonda-welcome__chip--warn {
background: rgba(245, 158, 11, .10);
border-color: rgba(245, 158, 11, .25);
color: #92400e;
}
.wonda-welcome__chip--warn strong { color: #92400e; }
.wonda-welcome__chip--danger {
background: rgba(185, 28, 28, .08);
border-color: rgba(185, 28, 28, .22);
color: #991b1b;
}
/* ---------- Status (right column) ---------- */
.wonda-welcome__status {
flex-shrink: 0;
align-self: center;
}
.wonda-welcome__status .wonda-pill {
padding: 7px 14px;
font-size: 12.5px;
font-weight: 600;
}
/* ---------- Dark mode (mirrors WONDA_CONSOLE_DARK_MODE) ---------- */
html[data-theme="dark"] .wonda-welcome {
background:
radial-gradient(700px 220px at 100% 0%, rgba(255, 0, 126, .08), transparent 60%),
linear-gradient(180deg, #0f172a 0%, #101a2e 100%);
border-color: rgba(255, 255, 255, .06);
}
html[data-theme="dark"] .wonda-welcome__title { color: #f1f5f9; }
html[data-theme="dark"] .wonda-welcome__chip {
background: rgba(255, 255, 255, .05);
border-color: rgba(255, 255, 255, .08);
color: #cbd5e1;
}
html[data-theme="dark"] .wonda-welcome__chip strong { color: #f1f5f9; }
/* ---------- Mobile ---------- */
@media (max-width: 700px) {
.wonda-welcome {
padding: 18px 18px 16px;
gap: 14px;
}
.wonda-welcome__title {
font-size: 20px;
margin-bottom: 12px;
}
.wonda-welcome__status {
align-self: flex-start;
}
.wonda-welcome__chip {
font-size: 12px;
padding: 4px 10px;
}
.wonda-welcome__chip code { font-size: 11.5px; }
}
/* ==== END WONDA_WELCOME_CSS ==== */
/* ============================================================
WONDA_WELCOME_CSS
Redesigned greeting card at the top of the client dashboard.
============================================================ */
.wonda-welcome {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
padding: 22px 26px;
margin-bottom: 22px;
background:
radial-gradient(700px 220px at 100% 0%, rgba(255, 0, 126, .05), transparent 60%),
linear-gradient(180deg, #ffffff 0%, #fdfdff 100%);
border: 1px solid var(--wonda-card-border, rgba(28, 28, 60, .07));
border-radius: 16px;
box-shadow:
0 1px 2px rgba(15, 23, 42, .035),
0 8px 24px -14px rgba(15, 23, 42, .10);
position: relative;
overflow: hidden;
}
.wonda-welcome::before {
content: '';
position: absolute;
top: 0; left: 0; bottom: 0;
width: 3px;
background: linear-gradient(180deg,
var(--accent, #FF007E) 0%,
rgba(255, 0, 126, .45) 100%);
}
.wonda-welcome__body {
min-width: 0;
flex: 1 1 420px;
}
.wonda-welcome__eyebrow {
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .12em;
color: var(--muted, #94a3b8);
margin-bottom: 6px;
}
.wonda-welcome__title {
margin: 0 0 14px;
font-size: 24px;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.15;
color: var(--wonda-navy-1, #1c1c3c);
word-break: break-word;
}
.wonda-welcome__meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.wonda-welcome__chip {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 5px 11px;
border-radius: 999px;
background: #f3f5fa;
border: 1px solid rgba(28, 28, 60, .06);
font-size: 12.5px;
font-weight: 500;
color: #475569;
line-height: 1.3;
white-space: nowrap;
}
.wonda-welcome__chip code {
font-family: var(--font-mono);
font-size: 12px;
background: transparent;
border: 0;
padding: 0;
color: inherit;
letter-spacing: .01em;
}
.wonda-welcome__chip strong {
color: var(--wonda-navy-1, #1c1c3c);
font-weight: 700;
}
.wonda-welcome__chip-icon {
width: 13px;
height: 13px;
flex-shrink: 0;
opacity: .65;
color: currentColor;
}
.wonda-welcome__chip--info {
background: rgba(59, 130, 246, .08);
border-color: rgba(59, 130, 246, .18);
color: #1e40af;
}
.wonda-welcome__chip--warn {
background: rgba(245, 158, 11, .10);
border-color: rgba(245, 158, 11, .25);
color: #92400e;
}
.wonda-welcome__chip--warn strong { color: #92400e; }
.wonda-welcome__chip--danger {
background: rgba(185, 28, 28, .08);
border-color: rgba(185, 28, 28, .22);
color: #991b1b;
}
.wonda-welcome__status {
flex-shrink: 0;
align-self: center;
}
.wonda-welcome__status .wonda-pill {
padding: 7px 14px;
font-size: 12.5px;
font-weight: 600;
}
/* ---------- Dark mode ---------- */
/* ---------- Mobile ---------- */
@media (max-width: 700px) {
.wonda-welcome {
padding: 18px 18px 16px;
gap: 14px;
}
.wonda-welcome__title {
font-size: 20px;
margin-bottom: 12px;
}
.wonda-welcome__status {
align-self: flex-start;
}
.wonda-welcome__chip {
font-size: 12px;
padding: 4px 10px;
}
.wonda-welcome__chip code { font-size: 11.5px; }
}
/* ==== END WONDA_WELCOME_CSS ==== */
/* END app-v2.css */
/* BEGIN auth-v2.css */
/* Wonda AI — auth v2: split-screen login/register.
Left: animated chatbot showcase.
Right: the login or register form.
Loaded only for pages that request layout=split. */
body.wonda-body--authv2 { background: #ffffff; }
.wonda-authv2 {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 100vh;
min-height: 100dvh;
}
/* ---------- Left: showcase ---------- */
.wonda-authv2__showcase {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 48px 40px;
background:
radial-gradient(900px 500px at 20% 15%, rgba(255, 0, 126, .10), transparent 60%),
radial-gradient(700px 400px at 85% 85%, rgba(28, 28, 60, .08), transparent 55%),
linear-gradient(155deg, #1c1c3c 0%, #0f1029 100%);
color: #e2e8f0;
overflow: visible;
isolation: isolate;
}
.wonda-authv2__showcase::before {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 1px 1px, rgba(255,255,255,.06) 1px, transparent 0);
background-size: 24px 24px;
mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
opacity: .35;
pointer-events: none;
z-index: 0;
}
.wonda-showcase {
position: relative;
z-index: 1;
width: 100%;
max-width: 440px;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 22px;
}
.wonda-showcase__stage {
width: 100%;
aspect-ratio: 4 / 5;
max-height: min(72vh, 640px);
transform-origin: center center;
transition: transform 900ms cubic-bezier(.4, 0, .2, 1);
will-change: transform;
}
.wonda-showcase__window {
width: 100%;
height: 100%;
background: #0f172a;
border-radius: 22px;
border: 1px solid rgba(255,255,255,.08);
box-shadow:
0 30px 60px -30px rgba(0,0,0,.6),
0 12px 30px -12px rgba(0,0,0,.4),
inset 0 1px 0 rgba(255,255,255,.05);
display: flex;
flex-direction: column;
overflow: hidden;
}
.wonda-showcase__head {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
background: #1e293b;
border-bottom: 1px solid rgba(255,255,255,.06);
flex-shrink: 0;
}
.wonda-showcase__avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, #FF007E 0%, #c8005f 100%);
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
flex-shrink: 0;
}
.wonda-showcase__avatar svg { width: 16px; height: 16px; display: block; }
.wonda-showcase__headtext { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wonda-showcase__headtext strong {
font-size: 14px;
font-weight: 600;
color: #f1f5f9;
line-height: 1.15;
}
.wonda-showcase__headtext span {
font-size: 11px;
color: #94a3b8;
display: inline-flex;
align-items: center;
gap: 5px;
line-height: 1.15;
}
.wonda-showcase__headtext span::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 0 2px rgba(34, 197, 94, .2);
}
.wonda-showcase__messages {
flex: 1;
min-height: 0;
padding: 18px 16px;
display: flex;
flex-direction: column;
gap: 14px;
overflow-y: auto;
overflow-x: hidden;
background: #0b1220;
scrollbar-width: none;
}
.wonda-showcase__messages::-webkit-scrollbar { display: none; }
.wonda-showcase__msg {
display: flex;
align-items: flex-end;
gap: 8px;
max-width: 88%;
opacity: 0;
transform: translateY(8px);
transition: opacity 320ms ease, transform 320ms ease;
}
.wonda-showcase__msg.is-in { opacity: 1; transform: translateY(0); }
.wonda-showcase__msg--user { align-self: flex-end; flex-direction: row-reverse; }
.wonda-showcase__msg--bot { align-self: flex-start; }
.wonda-showcase__msg-avatar {
width: 26px;
height: 26px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.wonda-showcase__msg--bot .wonda-showcase__msg-avatar {
background: linear-gradient(135deg, #FF007E 0%, #c8005f 100%);
color: #fff;
}
.wonda-showcase__msg--user .wonda-showcase__msg-avatar {
background: #334155;
color: #cbd5e1;
}
.wonda-showcase__msg-avatar svg { width: 14px; height: 14px; display: block; }
.wonda-showcase__bubble {
padding: 10px 14px;
border-radius: 16px;
font-size: 13.5px;
line-height: 1.5;
word-wrap: break-word;
overflow-wrap: anywhere;
min-width: 0;
}
.wonda-showcase__msg--bot .wonda-showcase__bubble {
background: #1e293b;
color: #e2e8f0;
border-bottom-left-radius: 4px;
}
.wonda-showcase__msg--user .wonda-showcase__bubble {
background: linear-gradient(135deg, #FF007E 0%, #c8005f 100%);
color: #fff;
border-bottom-right-radius: 4px;
}
.wonda-showcase__typing {
display: inline-flex;
gap: 4px;
padding: 4px 2px;
align-items: center;
}
.wonda-showcase__typing span {
width: 6px;
height: 6px;
border-radius: 50%;
background: #94a3b8;
animation: wonda-show-typing 1.2s infinite;
}
.wonda-showcase__typing span:nth-child(2) { animation-delay: .15s; }
.wonda-showcase__typing span:nth-child(3) { animation-delay: .3s; }
@keyframes wonda-show-typing {
0%, 60%, 100% { transform: translateY(0); opacity: .5; }
30% { transform: translateY(-4px); opacity: 1; }
}
.wonda-showcase__cursor {
display: inline-block;
width: 2px;
height: 1em;
background: currentColor;
vertical-align: -2px;
margin-left: 2px;
animation: wonda-show-cursor 1s steps(1) infinite;
}
@keyframes wonda-show-cursor { 50% { opacity: 0; } }
/* ---------- Rich cards (product + location) ---------- */
.wonda-showcase__card {
margin-top: 10px;
border-radius: 12px;
overflow: hidden;
background: #0f172a;
border: 1px solid rgba(255,255,255,.08);
opacity: 0;
transform: translateY(6px);
transition: opacity 400ms ease, transform 400ms ease;
}
.wonda-showcase__card.is-in { opacity: 1; transform: translateY(0); }
.wonda-showcase__card-media {
width: 100%;
aspect-ratio: 16 / 10;
display: block;
background: #111827;
overflow: hidden;
}
.wonda-showcase__card-media svg { width: 100%; height: 100%; display: block; }
.wonda-showcase__card--location .wonda-showcase__card-media { aspect-ratio: 16 / 9; }
.wonda-showcase__card-body { padding: 10px 12px 12px; }
.wonda-showcase__card-name {
font-size: 13.5px;
font-weight: 600;
color: #f1f5f9;
line-height: 1.3;
margin: 0 0 3px;
}
.wonda-showcase__card-meta {
font-size: 11.5px;
color: #94a3b8;
margin: 0 0 8px;
line-height: 1.35;
}
.wonda-showcase__card-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.wonda-showcase__card-price {
font-size: 14px;
font-weight: 700;
color: #f1f5f9;
white-space: nowrap;
}
.wonda-showcase__card-cta {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11.5px;
font-weight: 600;
padding: 6px 12px;
border-radius: 8px;
background: linear-gradient(135deg, #FF007E 0%, #c8005f 100%);
color: #fff;
text-decoration: none;
white-space: nowrap;
}
.wonda-showcase__card-cta svg { width: 11px; height: 11px; }
.wonda-showcase__card--location .wonda-showcase__card-cta {
background: transparent;
color: #f1f5f9;
border: 1px solid rgba(255,255,255,.14);
padding: 6px 12px;
}
.wonda-showcase__caption {
text-align: center;
font-size: 12px;
font-weight: 500;
letter-spacing: .02em;
color: rgba(226,232,240,.55);
min-height: 18px;
transition: opacity 260ms ease;
}
/* ---------- Right: form ---------- */
.wonda-authv2__form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 48px;
background: #ffffff;
overflow-y: auto;
}
.wonda-authv2__inner { width: 100%; max-width: 400px; }
.wonda-authv2__brand {
display: inline-flex;
align-items: flex-end;
gap: 8px;
text-decoration: none;
color: var(--primary, #1c1c3c);
margin-bottom: 36px;
}
.wonda-authv2__brand-logo {
max-height: 44px; width: auto; max-width: 200px;
object-fit: contain; display: block;
}
.wonda-authv2__brand-text {
font-size: 20px; font-weight: 700;
letter-spacing: .3px; color: var(--primary, #1c1c3c); line-height: 1;
}
.wonda-authv2__brand-version {
font-size: 10px; font-weight: 500; color: var(--muted, #64748b);
line-height: 1; margin-left: 2px; margin-bottom: 1px;
}
.wonda-authv2__title {
margin: 0 0 8px;
font-size: 26px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--primary, #1c1c3c);
line-height: 1.2;
}
.wonda-authv2__lead {
margin: 0 0 28px;
font-size: 14.5px;
color: var(--muted, #64748b);
line-height: 1.55;
}
.wonda-authv2__body > .wonda-notice {
margin: 0 0 20px;
font-size: 13.5px;
border-radius: 10px;
}
.wonda-authv2__body .wonda-field { margin-bottom: 16px; }
.wonda-authv2__body .wonda-field label {
display: block;
font-size: 13px;
font-weight: 500;
color: var(--text, #0f172a);
margin-bottom: 6px;
}
.wonda-authv2__body .wonda-field input {
width: 100%;
padding: 11px 14px;
border: 1px solid var(--border, #e5e7eb);
border-radius: 10px;
font-family: inherit;
font-size: 14.5px;
background: #fbfcfe;
color: var(--text, #0f172a);
transition: border-color .15s, background .15s, box-shadow .15s;
-webkit-appearance: none;
appearance: none;
}
.wonda-authv2__body .wonda-field input:hover { border-color: #cbd5e1; }
.wonda-authv2__body .wonda-field input:focus {
outline: none;
border-color: var(--accent, #FF007E);
background: #ffffff;
box-shadow: 0 0 0 4px rgba(255, 0, 126, .10);
}
.wonda-authv2__body .wonda-field small {
display: block;
margin-top: 6px;
font-size: 12px;
color: var(--muted, #64748b);
}
.wonda-authv2__body .wonda-auth__row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin: 4px 0 20px;
font-size: 13px;
color: var(--muted, #64748b);
}
.wonda-authv2__body .wonda-auth__row label {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 500;
color: var(--text, #0f172a);
}
.wonda-authv2__body .wonda-auth__row a {
color: var(--accent, #FF007E);
font-weight: 600;
text-decoration: none;
}
.wonda-authv2__body .wonda-auth__row a:hover { text-decoration: underline; }
.wonda-authv2__body button[type="submit"],
.wonda-authv2__body .wonda-btn--accent {
display: block;
width: 100%;
padding: 13px 20px;
border: 0;
border-radius: 10px;
background: linear-gradient(135deg, #FF2A92 0%, #E60072 100%) !important;
color: #fff !important;
font-size: 14.5px;
font-weight: 600;
cursor: pointer;
transition: transform .12s ease, box-shadow .15s ease;
box-shadow:
0 10px 22px -10px rgba(255, 0, 126, .45),
inset 0 1px 0 rgba(255, 255, 255, .14);
font-family: inherit;
margin-top: 6px;
}
.wonda-authv2__body button[type="submit"]:hover:not([disabled]),
.wonda-authv2__body .wonda-btn--accent:hover:not([disabled]) {
transform: translateY(-1px);
box-shadow:
0 14px 28px -10px rgba(255, 0, 126, .55),
inset 0 1px 0 rgba(255, 255, 255, .16);
}
.wonda-authv2__body button[type="submit"]:disabled {
opacity: .65;
cursor: not-allowed;
}
.wonda-authv2__foot {
margin-top: 28px;
padding-top: 20px;
border-top: 1px solid var(--border, #e5e7eb);
text-align: center;
font-size: 13.5px;
color: var(--muted, #64748b);
}
.wonda-authv2__foot a {
font-weight: 600;
color: var(--accent, #FF007E);
text-decoration: none;
}
.wonda-authv2__foot a:hover { text-decoration: underline; }
.wonda-authv2__credit {
margin-top: 32px;
text-align: center;
font-size: 12px;
color: var(--muted, #64748b);
}
.wonda-authv2__credit a { color: var(--muted, #64748b); text-decoration: underline; }
/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
.wonda-authv2__showcase { padding: 32px 24px; }
.wonda-authv2__form { padding: 32px; }
.wonda-showcase__stage { max-height: min(62vh, 520px); }
}
@media (max-width: 860px) {
.wonda-authv2 { grid-template-columns: 1fr; min-height: 0; }
.wonda-authv2__showcase {
padding: 28px 20px 24px;
order: -1;
}
.wonda-showcase { max-width: 380px; gap: 16px; }
.wonda-showcase__stage { aspect-ratio: 4 / 3; max-height: 340px; }
.wonda-showcase__head { padding: 10px 12px; }
.wonda-showcase__messages { padding: 14px 12px; gap: 10px; }
.wonda-showcase__bubble { font-size: 12.5px; padding: 9px 12px; }
.wonda-authv2__form {
padding: 32px 22px 40px;
justify-content: flex-start;
}
.wonda-authv2__brand { margin-bottom: 24px; }
.wonda-authv2__title { font-size: 22px; }
.wonda-authv2__lead { margin-bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) {
.wonda-showcase__stage { transition: none !important; transform: none !important; }
.wonda-showcase__msg,
.wonda-showcase__card { transition: none !important; opacity: 1 !important; transform: none !important; }
.wonda-showcase__cursor { animation: none !important; opacity: 0; }
}
/* ============================================================
FIX: the grid belongs on , since the aside and section
are direct children of body with no inner wrapper.
============================================================ */
body.wonda-body--authv2 {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
min-height: 100vh !important;
min-height: 100dvh !important;
margin: 0 !important;
padding: 0 !important;
background: #ffffff !important;
}
/* The old .wonda-body--auth gradient must not show through. */
body.wonda-body--authv2.wonda-body--auth {
background: #ffffff !important;
}
body.wonda-body--authv2 > .wonda-authv2__showcase,
body.wonda-body--authv2 > .wonda-authv2__form {
min-width: 0;
min-height: 0;
}
@media (max-width: 860px) {
body.wonda-body--authv2 {
grid-template-columns: 1fr !important;
min-height: 0 !important;
}
}
/* ============================================================
WONDA_SHOWCASE_V2 — composer, cards, themes
Mirrors the production widget: header, message canvas, composer.
Scoped to .wonda-showcase so nothing leaks to the widget.
============================================================ */
.wonda-showcase {
--sc-accent: #FF007E;
--sc-accent-2:#c8005f;
--sc-surface: #0f172a;
--sc-surface-2: #0b1220;
--sc-bubble-bg: #1e293b;
--sc-bubble-border: rgba(255,255,255,.08);
--sc-text: #e2e8f0;
--sc-text-muted: #94a3b8;
--sc-input-bg: #1e293b;
--sc-input-border: rgba(255,255,255,.08);
--sc-on-accent: #ffffff;
}
/* ---------- Window shell (mirrors #wonda-root .wonda-window) --------- */
.wonda-showcase__window {
width: 100%;
height: 100%;
background: var(--sc-surface);
border-radius: 20px;
border: 1px solid var(--sc-bubble-border);
box-shadow:
0 30px 60px -30px rgba(0,0,0,.6),
0 12px 30px -12px rgba(0,0,0,.4),
inset 0 1px 0 rgba(255,255,255,.05);
display: flex;
flex-direction: column;
overflow: hidden;
transition: box-shadow .5s ease;
}
/* ---------- Header (mirrors .wonda-window__header) ------------------- */
.wonda-showcase__header {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 14px;
min-height: 56px;
background: var(--sc-accent);
background: linear-gradient(135deg, var(--sc-accent) 0%, var(--sc-accent-2) 100%);
color: var(--sc-on-accent);
flex-shrink: 0;
transition: background .5s ease;
}
.wonda-showcase__brand {
display: inline-flex;
align-items: flex-end;
gap: 6px;
min-width: 0;
max-width: 70%;
}
.wonda-showcase__brand strong {
font-size: 15px;
font-weight: 600;
letter-spacing: .01em;
color: var(--sc-on-accent);
line-height: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wonda-showcase__brand-logo {
height: 20px;
width: auto;
max-width: 110px;
object-fit: contain;
display: block;
}
.wonda-showcase__version {
font-size: 10px;
font-weight: 500;
opacity: .72;
color: inherit;
line-height: 1;
margin-bottom: 1px;
white-space: nowrap;
pointer-events: none;
}
.wonda-showcase__header-spacer { flex: 1; }
.wonda-showcase__header-btn {
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: rgba(255,255,255,.12);
color: var(--sc-on-accent);
flex-shrink: 0;
}
.wonda-showcase__header-btn svg {
width: 15px;
height: 15px;
display: block;
color: inherit;
fill: currentColor;
}
/* ---------- Message canvas (mirrors .wonda-messages) ---------------- */
.wonda-showcase__messages {
flex: 1;
min-height: 0;
padding: 18px 16px 14px;
display: flex;
flex-direction: column;
gap: 12px;
overflow-y: auto;
overflow-x: hidden;
background: var(--sc-surface-2);
scrollbar-width: none;
scroll-behavior: smooth;
}
.wonda-showcase__messages::-webkit-scrollbar { display: none; }
/* ---------- Message row (mirrors .wonda-message) -------------------- */
.wonda-showcase__msg {
display: flex;
align-items: flex-start;
gap: 8px;
max-width: 90%;
opacity: 0;
transform: translateY(6px);
transition: opacity 320ms ease, transform 320ms ease;
}
.wonda-showcase__msg.is-in { opacity: 1; transform: translateY(0); }
.wonda-showcase__msg--user { align-self: flex-end; flex-direction: row-reverse; }
.wonda-showcase__msg--bot { align-self: flex-start; }
.wonda-showcase__msg-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
align-self: flex-start;
margin-top: 2px;
}
.wonda-showcase__msg-avatar--bot {
background: var(--sc-accent);
background: linear-gradient(135deg, var(--sc-accent) 0%, var(--sc-accent-2) 100%);
color: var(--sc-on-accent);
transition: background .5s ease;
}
.wonda-showcase__msg-avatar--user {
background: rgba(255,255,255,.06);
border: 1px solid var(--sc-bubble-border);
color: var(--sc-text-muted);
}
.wonda-showcase__msg-avatar svg {
width: 15px;
height: 15px;
display: block;
color: inherit;
fill: currentColor;
}
/* ---------- Bubble (mirrors .wonda-bubble) -------------------------- */
.wonda-showcase__bubble {
min-width: 0;
padding: 10px 14px;
border-radius: 16px;
font-size: 13.5px;
line-height: 1.5;
word-wrap: break-word;
overflow-wrap: anywhere;
}
.wonda-showcase__msg--bot .wonda-showcase__bubble {
background: var(--sc-bubble-bg);
color: var(--sc-text);
border: 1px solid var(--sc-bubble-border);
border-bottom-left-radius: 6px;
}
.wonda-showcase__msg--user .wonda-showcase__bubble {
background: var(--sc-accent);
background: linear-gradient(135deg, var(--sc-accent) 0%, var(--sc-accent-2) 100%);
color: var(--sc-on-accent);
border: 0;
border-bottom-right-radius: 6px;
transition: background .5s ease;
}
.wonda-showcase__body { display: inline; }
/* ---------- Typing indicator (mirrors .wonda-typing) --------------- */
.wonda-showcase__typing-wrap {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 2px 0;
}
.wonda-showcase__typing-label {
font-size: 12.5px;
font-weight: 500;
color: var(--sc-text-muted);
line-height: 1;
}
.wonda-showcase__typing {
display: inline-flex;
align-items: center;
gap: 4px;
}
.wonda-showcase__typing span {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--sc-text-muted);
display: inline-block;
animation: wonda-show-typing 1.2s infinite;
}
.wonda-showcase__typing span:nth-child(2) { animation-delay: .15s; }
.wonda-showcase__typing span:nth-child(3) { animation-delay: .30s; }
@keyframes wonda-show-typing {
0%, 60%, 100% { transform: translateY(0); opacity: .45; }
30% { transform: translateY(-4px); opacity: 1; }
}
/* ---------- Composer (mirrors .wonda-composer) ---------------------- */
.wonda-showcase__composer {
display: flex;
align-items: flex-end;
gap: 8px;
padding: 12px 14px 14px;
background: var(--sc-surface);
border-top: 1px solid var(--sc-bubble-border);
flex-shrink: 0;
}
.wonda-showcase__input {
flex: 1;
min-width: 0;
min-height: 40px;
max-height: 96px;
padding: 10px 14px;
border: 1px solid var(--sc-input-border);
border-radius: 20px;
background: var(--sc-input-bg);
color: var(--sc-text);
font-family: inherit;
font-size: 13.5px;
line-height: 1.4;
resize: none;
overflow-y: auto;
scrollbar-width: none;
transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.wonda-showcase__input::-webkit-scrollbar { display: none; }
.wonda-showcase__input::placeholder { color: var(--sc-text-muted); }
.wonda-showcase__input:focus {
outline: none;
border-color: var(--sc-accent);
box-shadow: 0 0 0 3px rgba(255,255,255,.06);
}
/* Show a caret cursor while the showcase is typing */
.wonda-showcase__input.is-typing { caret-color: var(--sc-accent); }
.wonda-showcase__send {
width: 40px;
height: 40px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 14px;
background: var(--sc-accent);
background: linear-gradient(135deg, var(--sc-accent) 0%, var(--sc-accent-2) 100%);
color: var(--sc-on-accent);
cursor: default;
padding: 0;
transition:
transform 120ms ease,
filter 120ms ease,
box-shadow 200ms ease,
background .5s ease;
box-shadow:
0 6px 16px -6px rgba(0,0,0,.5),
inset 0 1px 0 rgba(255,255,255,.15);
pointer-events: none; /* showcase is not interactive */
}
.wonda-showcase__send svg {
width: 17px;
height: 17px;
display: block;
color: inherit;
fill: currentColor;
}
.wonda-showcase__send.is-pressing {
transform: scale(.9);
filter: brightness(.85);
box-shadow:
0 2px 6px -2px rgba(0,0,0,.5),
inset 0 1px 0 rgba(255,255,255,.08);
}
/* ---------- Footer (mirrors .wonda-footer) -------------------------- */
.wonda-showcase__footer {
padding: 6px 0 8px;
text-align: center;
font-size: 10.5px;
color: var(--sc-text-muted);
background: var(--sc-surface);
border-top: 1px solid var(--sc-bubble-border);
flex-shrink: 0;
}
.wonda-showcase__footer a {
color: var(--sc-text-muted);
text-decoration: none;
}
.wonda-showcase__footer a:hover { text-decoration: underline; }
/* ---------- Cards --------------------------------------------------- */
.wonda-showcase__card {
margin-top: 10px;
border-radius: 12px;
overflow: hidden;
background: var(--sc-surface);
border: 1px solid var(--sc-bubble-border);
opacity: 0;
transform: translateY(6px);
transition: opacity 400ms ease, transform 400ms ease;
}
.wonda-showcase__card.is-in { opacity: 1; transform: translateY(0); }
.wonda-showcase__card-media {
width: 100%;
aspect-ratio: 16 / 10;
background: #0b1220;
overflow: hidden;
position: relative;
display: block;
}
.wonda-showcase__card-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.wonda-showcase__card-media--map { aspect-ratio: 16 / 9; }
.wonda-showcase__card-media--map iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
filter: saturate(.9);
}
.wonda-showcase__card-body { padding: 10px 12px 12px; }
.wonda-showcase__card-title {
font-size: 13px;
font-weight: 600;
color: #f1f5f9;
line-height: 1.3;
margin: 0 0 3px;
}
.wonda-showcase__card-meta {
font-size: 11.5px;
color: var(--sc-text-muted);
line-height: 1.35;
margin: 0 0 8px;
}
.wonda-showcase__card-address {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: #e2e8f0;
line-height: 1.4;
margin: 0 0 8px;
}
.wonda-showcase__card-pin {
display: inline-flex;
align-items: center;
color: var(--sc-accent);
flex-shrink: 0;
}
.wonda-showcase__card-pin svg { width: 12px; height: 12px; fill: currentColor; }
.wonda-showcase__card-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.wonda-showcase__card-price {
font-size: 14px;
font-weight: 700;
color: #f1f5f9;
white-space: nowrap;
}
.wonda-showcase__card-cta {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11.5px;
font-weight: 600;
padding: 7px 12px;
border-radius: 9px;
background: var(--sc-accent);
background: linear-gradient(135deg, var(--sc-accent) 0%, var(--sc-accent-2) 100%);
color: var(--sc-on-accent);
text-decoration: none;
white-space: nowrap;
transition: background .5s ease;
}
.wonda-showcase__card-cta svg {
width: 11px;
height: 11px;
fill: currentColor;
}
.wonda-showcase__card--location .wonda-showcase__card-cta {
background: transparent;
color: #e2e8f0;
border: 1px solid rgba(255,255,255,.14);
}
/* ---------- Zoom stage --------------------------------------------- */
.wonda-showcase__stage {
transform-origin: center center;
transition: transform 900ms cubic-bezier(.4, 0, .2, 1);
will-change: transform;
}
/* ---------- Caption ------------------------------------------------- */
.wonda-showcase__caption {
margin: 0;
text-align: center;
font-size: 12.5px;
font-weight: 500;
letter-spacing: .01em;
color: rgba(226,232,240,.6);
min-height: 18px;
transition: opacity 260ms ease;
}
/* ---------- Reduced motion ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.wonda-showcase__stage { transition: none !important; }
.wonda-showcase__msg,
.wonda-showcase__card { transition: none !important; opacity: 1 !important; transform: none !important; }
.wonda-showcase__typing span { animation: none !important; opacity: .6; }
}
/* ============================================================
WONDA_SHOWCASE_SIZE
Narrow, tall chat panel. Matches the real widget's proportion
(approximately 1 : 1.7) so the viewer sees more of the
conversation at once. Zoom stays subtle so the layout reads
like a real phone-shaped chat window.
============================================================ */
.wonda-showcase__stage {
width: 100% !important;
max-width: 340px !important;
aspect-ratio: 9 / 16 !important;
max-height: min(82vh, 720px) !important;
margin: 0 auto !important;
transform-origin: center center;
transition: transform 900ms cubic-bezier(.4, 0, .2, 1);
will-change: transform;
}
/* Give the showcase a touch more vertical room in the panel */
.wonda-showcase {
gap: 14px;
max-width: 380px;
}
/* Tighter message bubbles for the narrower window */
.wonda-showcase__messages {
padding: 14px 13px 12px;
gap: 10px;
}
.wonda-showcase__msg { max-width: 88%; }
.wonda-showcase__bubble {
padding: 9px 12px;
font-size: 13px;
line-height: 1.48;
}
.wonda-showcase__msg-avatar {
width: 26px;
height: 26px;
}
.wonda-showcase__msg-avatar svg { width: 13px; height: 13px; }
/* Slimmer composer to match */
.wonda-showcase__composer {
padding: 10px 12px 12px;
gap: 6px;
}
.wonda-showcase__input {
min-height: 38px;
padding: 9px 13px;
font-size: 13px;
}
.wonda-showcase__send {
width: 38px;
height: 38px;
border-radius: 12px;
}
.wonda-showcase__send svg { width: 16px; height: 16px; }
/* Header a hair shorter */
.wonda-showcase__header {
padding: 10px 12px;
min-height: 50px;
}
.wonda-showcase__brand strong { font-size: 14px; }
.wonda-showcase__header-btn { width: 28px; height: 28px; }
.wonda-showcase__header-btn svg { width: 14px; height: 14px; }
/* Caption below the window — kept clean and small */
.wonda-showcase__caption {
display: block !important;
margin: 0;
text-align: center;
font-size: 12.5px;
font-weight: 500;
letter-spacing: .01em;
color: rgba(226,232,240,.6);
min-height: 18px;
transition: opacity 260ms ease;
}
/* Responsive — narrow but not cramped on small screens */
@media (max-width: 1024px) {
.wonda-showcase__stage {
max-width: 320px !important;
max-height: min(78vh, 640px) !important;
}
}
@media (max-width: 860px) {
.wonda-showcase__stage {
max-width: 280px !important;
aspect-ratio: 9 / 16 !important;
max-height: min(70vh, 500px) !important;
}
.wonda-showcase { max-width: 320px; }
}
@media (max-width: 480px) {
.wonda-showcase__stage {
max-width: 260px !important;
max-height: min(68vh, 460px) !important;
}
}
/* ============================================================
WONDA_SHOWCASE_CHROME + NON-INTERACTIVE
Header extras (WhatsApp, theme toggle), pointer-events lock,
text-selection lock, mobile white surface.
============================================================ */
/* ---------- Fully non-interactive: no clicks, no selection -------- */
.wonda-showcase,
.wonda-showcase * {
user-select: none !important;
-webkit-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
-webkit-touch-callout: none !important;
}
.wonda-authv2__showcase,
.wonda-authv2__showcase * {
pointer-events: none !important;
cursor: default !important;
}
/* Prevent focus outlines on the readonly textarea */
.wonda-showcase__input:focus {
outline: none !important;
box-shadow: none !important;
border-color: var(--sc-input-border) !important;
}
.wonda-showcase__input {
pointer-events: none !important;
caret-color: transparent !important;
}
/* ---------- Header extras ---------------------------------------- */
.wonda-showcase__header-wa svg {
width: 15px !important;
height: 15px !important;
}
/* Theme toggle shows the sun in dark mode (to hint "click for light")
and the moon in light mode. Showcase is dark, so show the sun. */
.wonda-showcase__header-theme .wonda-showcase__icon-moon { display: none; }
.wonda-showcase__header-theme .wonda-showcase__icon-sun { display: block; }
/* ---------- Bot avatar: strong accent background ---------------- */
.wonda-showcase__msg-avatar--bot {
background: var(--sc-accent) !important;
background: linear-gradient(135deg,
var(--sc-accent) 0%,
var(--sc-accent-2) 100%) !important;
color: #ffffff !important;
box-shadow:
0 4px 10px -4px color-mix(in srgb, var(--sc-accent) 55%, transparent),
inset 0 1px 0 rgba(255,255,255,.18);
transition: background .5s ease, box-shadow .5s ease;
}
.wonda-showcase__msg-avatar--bot svg {
color: #ffffff !important;
fill: currentColor !important;
}
/* The header avatar must be replaced by the standard bot avatar.
The showcase header uses .wonda-showcase__avatar only on the
very first version — remove that reference so it uses the same
gradient as bubbles. */
.wonda-showcase__avatar {
background: var(--sc-accent) !important;
background: linear-gradient(135deg,
var(--sc-accent) 0%,
var(--sc-accent-2) 100%) !important;
color: #ffffff !important;
transition: background .5s ease;
}
/* ============================================================
MOBILE — white card on the auth background
============================================================ */
@media (max-width: 860px) {
.wonda-authv2__showcase {
background: #f8fafc !important;
background-image: none !important;
padding: 32px 20px 28px !important;
}
.wonda-authv2__showcase::before {
display: none !important; /* hide the dot grid */
}
/* Showcase window: white card with subtle elevation */
.wonda-showcase__window {
background: #ffffff !important;
border: 1px solid rgba(28, 28, 60, .08) !important;
box-shadow:
0 1px 2px rgba(15, 23, 42, .04),
0 20px 40px -24px rgba(15, 23, 42, .18),
0 6px 16px -8px rgba(15, 23, 42, .08) !important;
border-radius: 22px !important;
}
/* Header — pink gradient still, but no dark chrome */
.wonda-showcase__header {
border-bottom: 0 !important;
}
/* Message canvas on white */
.wonda-showcase__messages {
background: #ffffff !important;
}
.wonda-showcase__msg--bot .wonda-showcase__bubble {
background: #f1f5f9 !important;
color: #0f172a !important;
border: 1px solid rgba(28, 28, 60, .06) !important;
}
.wonda-showcase__msg-avatar--user {
background: #e2e8f0 !important;
color: #475569 !important;
border: 1px solid rgba(28, 28, 60, .08) !important;
}
/* Composer on white */
.wonda-showcase__composer {
background: #ffffff !important;
border-top: 1px solid rgba(28, 28, 60, .06) !important;
}
.wonda-showcase__input {
background: #f8fafc !important;
border-color: rgba(28, 28, 60, .10) !important;
color: #0f172a !important;
}
.wonda-showcase__input::placeholder { color: #94a3b8 !important; }
/* Footer on white */
.wonda-showcase__footer {
background: #ffffff !important;
color: #94a3b8 !important;
border-top: 1px solid rgba(28, 28, 60, .06) !important;
}
.wonda-showcase__footer a { color: #64748b !important; }
/* Card surfaces */
.wonda-showcase__card {
background: #ffffff !important;
border-color: rgba(28, 28, 60, .08) !important;
}
.wonda-showcase__card-title { color: #0f172a !important; }
.wonda-showcase__card-meta { color: #64748b !important; }
.wonda-showcase__card-price { color: #0f172a !important; }
.wonda-showcase__card-address { color: #0f172a !important; }
.wonda-showcase__card--location .wonda-showcase__card-cta {
color: #0f172a !important;
border-color: rgba(28, 28, 60, .12) !important;
}
/* Typing label on white */
.wonda-showcase__typing-label { color: #64748b !important; }
.wonda-showcase__typing span { background: #94a3b8 !important; }
/* Caption below the card */
.wonda-showcase__caption { color: #64748b !important; }
}
/* ============================================================
WONDA_SHOWCASE_MAP — Leaflet + OSM
Overrides Leaflet's light defaults for a dark surface, styles
the accent marker, and provides a text fallback if Leaflet or
tiles fail to load.
============================================================ */
.wonda-showcase__map {
width: 100%;
height: 100%;
background: #111827;
position: relative;
overflow: hidden;
}
/* Leaflet container needs an explicit height inside the aspect box */
.wonda-showcase__map .leaflet-container {
width: 100%;
height: 100%;
background: #0f172a;
font-family: inherit;
font-size: 11px;
}
/* Attribution control — keep, but make it less shouty */
.wonda-showcase__map .leaflet-control-attribution {
background: rgba(15, 23, 42, .78) !important;
color: rgba(226, 232, 240, .75) !important;
font-size: 9.5px !important;
padding: 1px 5px !important;
border-radius: 4px 0 0 0 !important;
backdrop-filter: blur(4px);
}
.wonda-showcase__map .leaflet-control-attribution a {
color: rgba(226, 232, 240, .92) !important;
text-decoration: none !important;
}
.wonda-showcase__map .leaflet-control-attribution a:hover {
text-decoration: underline !important;
}
/* Kill the Leaflet focus outline — this card is decorative */
.wonda-showcase__map .leaflet-container:focus,
.wonda-showcase__map .leaflet-container:focus-visible {
outline: none !important;
}
.wonda-showcase__map .leaflet-interactive { pointer-events: none !important; }
/* Marker has no default Leaflet chrome */
.wonda-showcase__map-marker,
.wonda-showcase__map-marker.leaflet-div-icon {
background: transparent !important;
border: 0 !important;
}
@keyframes wonda-map-pulse {
0% { transform: scale(.8); opacity: .45; }
70% { transform: scale(1.6); opacity: 0; }
100% { transform: scale(1.6); opacity: 0; }
}
/* Fallback card if Leaflet fails to load */
.wonda-showcase__map-fallback {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
background:
linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
color: #e2e8f0;
font-size: 12.5px;
padding: 16px;
text-align: center;
}
.wonda-showcase__map-fallback svg {
width: 22px;
height: 22px;
fill: var(--sc-accent, #FF007E);
opacity: .9;
}
/* ============================================================
WONDA_SHOWCASE_WHITE — light panel on every viewport
Matches the mobile treatment so the whole auth page reads
as one clean white surface.
============================================================ */
.wonda-authv2__showcase {
background: #ffffff !important;
background-image: none !important;
color: #0f172a !important;
overflow: hidden !important;
}
.wonda-authv2__showcase::before { display: none !important; }
.wonda-showcase {
overflow: hidden !important;
}
.wonda-showcase__window {
background: #ffffff !important;
border: 1px solid rgba(28, 28, 60, .08) !important;
box-shadow:
0 1px 2px rgba(15, 23, 42, .04),
0 24px 48px -28px rgba(15, 23, 42, .20),
0 6px 16px -8px rgba(15, 23, 42, .08) !important;
}
.wonda-showcase__messages { background: #ffffff !important; }
.wonda-showcase__msg--bot .wonda-showcase__bubble {
background: #f1f5f9 !important;
color: #0f172a !important;
border: 1px solid rgba(28, 28, 60, .06) !important;
}
.wonda-showcase__msg-avatar--user {
background: #e2e8f0 !important;
color: #475569 !important;
border: 1px solid rgba(28, 28, 60, .08) !important;
}
.wonda-showcase__composer {
background: #ffffff !important;
border-top: 1px solid rgba(28, 28, 60, .06) !important;
}
.wonda-showcase__input {
background: #f8fafc !important;
border-color: rgba(28, 28, 60, .10) !important;
color: #0f172a !important;
}
.wonda-showcase__input::placeholder { color: #94a3b8 !important; }
.wonda-showcase__footer {
background: #ffffff !important;
color: #94a3b8 !important;
border-top: 1px solid rgba(28, 28, 60, .06) !important;
}
.wonda-showcase__footer a { color: #64748b !important; }
.wonda-showcase__caption { color: #64748b !important; }
.wonda-showcase__card {
background: #ffffff !important;
border-color: rgba(28, 28, 60, .08) !important;
}
.wonda-showcase__card-title { color: #0f172a !important; }
.wonda-showcase__card-meta { color: #64748b !important; }
.wonda-showcase__card-price { color: #0f172a !important; }
.wonda-showcase__card-address { color: #0f172a !important; }
.wonda-showcase__card--location .wonda-showcase__card-cta {
color: #0f172a !important;
border-color: rgba(28, 28, 60, .12) !important;
}
.wonda-showcase__typing-label { color: #64748b !important; }
.wonda-showcase__typing span { background: #94a3b8 !important; }
/* ============================================================
WONDA_SHOWCASE_SCENE_SLIDE — crossfade between scenarios
Old scene slides out to the left, new one slides in from the
right. Applied via inline styles in auth-showcase.js.
============================================================ */
.wonda-showcase__window {
will-change: transform, opacity;
}
/* ============================================================
WONDA_SHOWCASE_TYPING_ZOOM_V2
The composer is temporarily detached from the layout via
position: fixed and animated with FLIP so it can grow to fill
the showcase without being clipped by any ancestor. Header
and messages blur behind it while the visitor types.
============================================================ */
/* Stage allows the window to slide beyond it, aside clips at its edge. */
.wonda-showcase__stage { overflow: visible !important; position: relative; }
.wonda-authv2__showcase { overflow: hidden !important; }
/* Blur behind the lifted composer */
.wonda-showcase__header,
.wonda-showcase__messages,
.wonda-showcase__footer {
transition: filter 520ms ease, opacity 520ms ease;
}
.wonda-showcase__stage.is-typing .wonda-showcase__header,
.wonda-showcase__stage.is-typing .wonda-showcase__messages,
.wonda-showcase__stage.is-typing .wonda-showcase__footer {
filter: blur(8px) brightness(.9);
opacity: .22;
}
/* Composer when lifted — internal metrics only. Position/size
are set inline by JS via FLIP. */
/* NOTE: no `transition: none !important` here.
The JS sets inline transition properties per-property during the
FLIP animation, and CSS !important would override them, causing
the composer to snap instead of lift. */
.wonda-showcase__composer.is-lifted {
padding: 24px 28px 26px !important;
border-radius: 30px !important;
background: #ffffff !important;
border: 1px solid rgba(28, 28, 60, .10) !important;
box-shadow:
0 30px 70px -20px rgba(15, 23, 42, .35),
0 8px 24px -12px rgba(15, 23, 42, .18) !important;
gap: 16px !important;
}
.wonda-showcase__composer.is-lifted textarea {
font-size: 20px !important;
line-height: 1.4 !important;
min-height: 68px !important;
padding: 20px 26px !important;
border-radius: 28px !important;
}
.wonda-showcase__composer.is-lifted textarea::placeholder {
font-size: 20px !important;
}
.wonda-showcase__composer.is-lifted button.wonda-showcase__send {
width: 68px !important;
height: 68px !important;
border-radius: 22px !important;
}
.wonda-showcase__composer.is-lifted button.wonda-showcase__send svg {
width: 30px !important;
height: 30px !important;
}
@media (prefers-reduced-motion: reduce) {
.wonda-showcase__stage.is-typing .wonda-showcase__header,
.wonda-showcase__stage.is-typing .wonda-showcase__messages,
.wonda-showcase__stage.is-typing .wonda-showcase__footer {
filter: none !important;
opacity: 1 !important;
}
}
@media (max-width: 480px) {
/* Composer keeps its normal mobile metrics when lifted. */
.wonda-showcase__composer.is-lifted {
padding: 10px 12px 12px !important;
border-radius: 18px !important;
}
}
/* ============================================================
WONDA_SHOWCASE_WIDE_MOBILE
On phones the window fills the showcase, leaving exactly 15px
of margin on the left and right. The old 9/16 aspect-ratio lock
is removed — otherwise widening the box also made it taller
than the viewport.
============================================================ */
@media (max-width: 860px) {
.wonda-authv2__showcase {
padding: 26px 15px 22px !important;
}
.wonda-showcase {
max-width: none !important;
width: 100% !important;
gap: 12px !important;
}
.wonda-showcase__stage {
width: 100% !important;
max-width: none !important;
aspect-ratio: auto !important;
height: min(68vh, 560px) !important;
max-height: none !important;
}
}
@media (max-width: 480px) {
.wonda-authv2__showcase {
padding: 22px 15px 20px !important;
}
.wonda-showcase__stage {
width: 100% !important;
max-width: none !important;
aspect-ratio: auto !important;
height: min(66vh, 520px) !important;
max-height: none !important;
}
}
/* ============================================================
WONDA_SHOWCASE_MOBILE_LIFT_FIX
On mobile the lifted composer must NOT change any layout
property of the container OR its children. The desktop
`.is-lifted textarea { font-size:20px }` and 68px button rules
have `!important` and no media query, so they leak into mobile.
This block is at the end of the file and wins.
============================================================ */
@media (max-width: 860px) {
/* Container keeps its natural mobile padding / gap / radius.
Only a shadow to signal "this is floating". */
.wonda-showcase__composer.is-lifted {
padding: 10px 12px 12px !important;
gap: 6px !important;
border-radius: 20px !important;
box-shadow:
0 24px 50px -16px rgba(15, 23, 42, .32),
0 6px 18px -10px rgba(15, 23, 42, .18) !important;
}
/* Children reset to their natural mobile size. */
.wonda-showcase__composer.is-lifted textarea,
.wonda-showcase__composer.is-lifted textarea::placeholder {
font-size: 13px !important;
line-height: 1.4 !important;
min-height: 38px !important;
max-height: 96px !important;
padding: 9px 13px !important;
border-radius: 20px !important;
}
.wonda-showcase__composer.is-lifted button.wonda-showcase__send {
width: 38px !important;
height: 38px !important;
border-radius: 12px !important;
}
.wonda-showcase__composer.is-lifted button.wonda-showcase__send svg {
width: 16px !important;
height: 16px !important;
}
}
/* ============================================================
WONDA_SHOWCASE_SOFT
Final overrides. Lighter blur behind the lifted composer,
softer transition curves, and a slightly longer feel overall.
Loaded last so it wins.
============================================================ */
/* Desktop blur — was 8px + 22% opacity, too heavy. */
.wonda-showcase__stage.is-typing .wonda-showcase__header,
.wonda-showcase__stage.is-typing .wonda-showcase__messages,
.wonda-showcase__stage.is-typing .wonda-showcase__footer {
filter: blur(4px) brightness(.97);
opacity: .48;
transition: filter 700ms cubic-bezier(.16,1,.3,1),
opacity 700ms cubic-bezier(.16,1,.3,1);
}
/* Soft release on un-blur too. */
.wonda-showcase__header,
.wonda-showcase__messages,
.wonda-showcase__footer {
transition: filter 700ms cubic-bezier(.16,1,.3,1),
opacity 700ms cubic-bezier(.16,1,.3,1);
}
/* Mobile blur — was 4px + 28%, still a touch strong. */
@media (max-width: 860px) {
.wonda-showcase__stage.is-typing .wonda-showcase__header,
.wonda-showcase__stage.is-typing .wonda-showcase__messages,
.wonda-showcase__stage.is-typing .wonda-showcase__footer {
filter: blur(2px) brightness(.98);
opacity: .55;
}
}
/* Every direct composer metric transition gets the soft curve. */
.wonda-showcase__composer,
.wonda-showcase__composer textarea,
.wonda-showcase__composer button.wonda-showcase__send {
transition-timing-function: cubic-bezier(.16,1,.3,1) !important;
transition-duration: 700ms !important;
}
/* ============================================================
WONDA_SHOWCASE_FINAL_DESKTOP
Two layout facts the previous patches got wrong:
1. .wonda-showcase had overflow: hidden — it clipped the
slide-in long before the window could reach the half-
screen edge. Only the aside should clip.
2. The window had will-change: transform, which makes it a
containing block for fixed-position descendants. That's
why the composer couldn't expand past the chat width.
============================================================ */
/* Window slides freely; only the aside clips at the half-screen edge. */
.wonda-showcase { overflow: visible !important; }
.wonda-showcase__stage { overflow: visible !important; }
.wonda-authv2__showcase { overflow: hidden !important; }
/* Composer while lifted — position, size, padding all set inline
by JS so no ancestor can hijack them. */
.wonda-showcase__composer.is-lifted {
z-index: 50 !important;
box-shadow:
0 30px 70px -20px rgba(15, 23, 42, .35),
0 8px 24px -12px rgba(15, 23, 42, .18) !important;
}
/* ============================================================
WONDA_SHOWCASE_TRIM
1. Lifted textarea has a FIXED height (not min-height) and
box-sizing: border-box, so the composer's total height is
exactly padding-top + 68 + padding-bottom = 118px. No blank
space above or below the text.
2. Composer stretch-aligns so the textarea never floats in a
taller box.
3. Header explicitly right-aligns its button cluster.
4. Buttons keep the accent gradient even after the composer is
moved out of .wonda-showcase (the CSS var lives on the
composer itself now).
============================================================ */
/* ── Lifted composer layout on desktop ── */
@media (min-width: 861px) {
.wonda-showcase__composer.is-lifted {
align-items: stretch !important;
height: auto !important;
}
.wonda-showcase__composer.is-lifted textarea {
height: 68px !important;
min-height: 0 !important;
max-height: 68px !important;
box-sizing: border-box !important;
font-size: 20px !important;
line-height: 1.4 !important;
padding: 12px 24px !important;
border-radius: 28px !important;
}
.wonda-showcase__composer.is-lifted button.wonda-showcase__send {
width: 68px !important;
height: 68px !important;
border-radius: 22px !important;
align-self: stretch;
}
}
/* Mobile keeps natural sizing — just a fixed height for consistency. */
@media (max-width: 860px) {
.wonda-showcase__composer.is-lifted {
align-items: stretch !important;
height: auto !important;
}
.wonda-showcase__composer.is-lifted textarea {
box-sizing: border-box !important;
height: 38px !important;
min-height: 0 !important;
max-height: 38px !important;
}
}
/* ── Send button keeps its accent when the composer is a child of
the showcase instead of .wonda-showcase — re-declare the var
locally as a safety net. ── */
.wonda-showcase__composer.is-lifted button.wonda-showcase__send {
background: var(--sc-accent, #FF007E) !important;
background: linear-gradient(135deg,
var(--sc-accent, #FF007E) 0%,
var(--sc-accent-2, #c8005f) 100%) !important;
color: #ffffff !important;
}
.wonda-showcase__composer.is-lifted button.wonda-showcase__send svg {
fill: currentColor !important;
color: inherit !important;
}
/* ── Header: brand left, spacer flexes, buttons cluster right ── */
.wonda-showcase__header {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 8px !important;
}
.wonda-showcase__brand {
flex: 0 1 auto !important;
min-width: 0 !important;
margin-right: 0 !important;
}
.wonda-showcase__header-spacer {
flex: 1 1 auto !important;
min-width: 8px !important;
}
.wonda-showcase__header-btn {
flex: 0 0 auto !important;
margin: 0 !important;
}
/* ============================================================
WONDA_SHOWCASE_HEADER_RIGHT_V3
Spacing restored. No aggressive margin overrides that fought
the header's `gap`. Buttons get their own gap and a small
right offset so the last one isn't flush against the edge.
============================================================ */
.wonda-showcase__header {
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
padding: 12px 14px !important;
/* NO gap here — apply spacing per-element so we control it */
gap: 0 !important;
}
.wonda-showcase__brand {
flex: 0 1 auto !important;
min-width: 0 !important;
max-width: 55% !important;
margin: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
/* Spacer grows to eat all free space, pushing buttons to the right */
.wonda-showcase__header-spacer {
display: block !important;
flex: 1 1 auto !important;
min-width: 4px !important;
height: 1px !important;
margin: 0 !important;
padding: 0 !important;
}
/* Every header button — fixed 30px circle, 8px gap between them */
.wonda-showcase__header > .wonda-showcase__header-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 auto !important;
width: 30px !important;
height: 30px !important;
min-width: 30px !important;
min-height: 30px !important;
padding: 0 !important;
margin: 0 0 0 6px !important; /* left margin = gap to previous button */
visibility: visible !important;
opacity: 1 !important;
box-sizing: border-box !important;
}
/* First button after the spacer sits at the far right, no leading gap */
.wonda-showcase__header-spacer + .wonda-showcase__header-btn {
margin-left: 4px !important;
}
/* Last button gets a small right nudge so it isn't flush to the edge */
.wonda-showcase__header > .wonda-showcase__header-btn:last-child {
margin-right: 2px !important;
}
/* Icons inside the buttons stay centred and consistently sized */
.wonda-showcase__header-btn svg,
.wonda-showcase__header-btn img,
.wonda-showcase__header-btn > span {
display: block !important;
width: 15px !important;
height: 15px !important;
flex-shrink: 0 !important;
pointer-events: none !important;
}
/* ============================================================
WONDA_SHOWCASE_THEME_ICON_FIX
The theme button contains two SVGs (sun + moon). The earlier
`svg { display: block !important }` rule from the header
alignment patch was overriding the original `display: none`
on the moon, so both icons rendered side by side.
Show only the moon — the showcase is on a light background,
so the moon hints "click for dark mode".
============================================================ */
/* Reset icon sizing inside the theme button so it doesn't fight
the visibility rules below. */
.wonda-showcase__header-theme svg {
display: none !important;
width: 15px !important;
height: 15px !important;
}
/* Only the moon is visible. */
.wonda-showcase__header-theme .wonda-showcase__icon-moon {
display: block !important;
}
/* Belt and braces: sun stays hidden even if another rule targets it. */
.wonda-showcase__header-theme .wonda-showcase__icon-sun {
display: none !important;
}
/* ============================================================
WONDA_SHOWCASE_STATIC_TILES_CSS
The showcase location card uses a 2x2 grid of static OSM tiles
instead of an iframe embed. The iframe's own chrome (Contribute,
copyright, zoom buttons) covered most of the small card.
============================================================ */
.wonda-showcase__card-media--map {
position: relative;
overflow: hidden;
background: #e5e7eb;
}
.wonda-showcase__map-grid {
position: absolute;
inset: 0;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
.wonda-showcase__map-grid img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
user-select: none;
-webkit-user-drag: none;
}
.wonda-showcase__map-pin {
position: absolute;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--sc-accent, #FF007E);
border: 3px solid #ffffff;
transform: translate(-50%, -50%);
box-shadow:
0 2px 6px rgba(0, 0, 0, .35),
0 0 0 3px rgba(255, 255, 255, .35);
pointer-events: none;
z-index: 2;
}
.wonda-showcase__map-pin::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 100%;
height: 100%;
border-radius: 50%;
background: var(--sc-accent, #FF007E);
transform: translate(-50%, -50%);
animation: wonda-map-pin-pulse 2.2s ease-out infinite;
pointer-events: none;
}
@keyframes wonda-map-pin-pulse {
0% { transform: translate(-50%, -50%) scale(.7); opacity: .55; }
70% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}
.wonda-showcase__map-attr {
position: absolute;
right: 3px;
bottom: 2px;
font-size: 8px;
line-height: 1;
color: rgba(255, 255, 255, .9);
background: rgba(15, 23, 42, .55);
padding: 2px 4px;
border-radius: 3px;
pointer-events: none;
z-index: 3;
}
.wonda-showcase__map-attr a {
color: inherit;
text-decoration: none;
}
@media (prefers-reduced-motion: reduce) {
.wonda-showcase__map-pin::after { animation: none; opacity: 0; }
}
/* ==== END WONDA_SHOWCASE_STATIC_TILES_CSS ==== */
/* END auth-v2.css */
/* BEGIN home.css */
/* Wonda AI — guest home page. Left hero copy, right showcase. */
.wonda-home__grid {
display: grid !important;
grid-template-columns: 55fr 45fr !important;
min-height: calc(100vh - var(--site-header-h, 72px)) !important;
margin: 0 !important;
padding: 0 !important;
background: #ffffff !important;
}
body.wonda-home {
margin: 0 !important;
padding: 0 !important;
background: #ffffff !important;
}
/* ── Hero half ─────────────────────────────────────────────── */
.wonda-home__hero {
display: flex;
align-items: center;
justify-content: center;
padding: 64px 72px;
background: #ffffff;
order: 1;
}
.wonda-home__hero-inner {
max-width: 620px;
width: 100%;
}
.wonda-home__badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px 6px 8px;
background: rgba(255, 0, 126, .08);
color: #FF007E;
border-radius: 30px;
font-size: 12.5px;
font-weight: 600;
letter-spacing: .01em;
margin-bottom: 26px;
}
.wonda-home__badge-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #FF007E;
box-shadow: 0 0 0 3px rgba(255, 0, 126, .18);
animation: wonda-home-pulse 2s ease-in-out infinite;
}
@keyframes wonda-home-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .5; transform: scale(.85); }
}
.wonda-home__title {
margin: 0 0 22px;
font-size: 62px;
line-height: 1.02;
font-weight: 700;
letter-spacing: -0.032em;
color: #1c1c3c;
}
.wonda-home__accent {
color: #FF007E;
position: relative;
}
.wonda-home__lead {
margin: 0 0 34px;
font-size: 17px;
line-height: 1.6;
color: #64748b;
max-width: 46ch;
}
.wonda-home__ctas {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 24px;
}
.wonda-home__cta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 26px;
border-radius: 14px;
font-size: 15px;
font-weight: 600;
text-decoration: none !important;
transition: transform .12s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
font-family: inherit;
line-height: 1;
}
.wonda-home__cta--primary {
background: linear-gradient(135deg, #FF2A92 0%, #E60072 100%);
color: #fff !important;
box-shadow:
0 10px 24px -10px rgba(255, 0, 126, .45),
inset 0 1px 0 rgba(255, 255, 255, .18);
}
.wonda-home__cta--primary:hover {
transform: translateY(-1px);
box-shadow:
0 14px 30px -10px rgba(255, 0, 126, .55),
inset 0 1px 0 rgba(255, 255, 255, .20);
}
.wonda-home__cta--primary svg {
width: 14px;
height: 14px;
transition: transform .15s ease;
}
.wonda-home__cta--primary:hover svg {
transform: translateX(3px);
}
.wonda-home__cta--ghost {
background: #ffffff;
color: #1c1c3c !important;
border: 1px solid rgba(28, 28, 60, .12);
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.wonda-home__cta--ghost:hover {
background: #f8fafc;
border-color: rgba(28, 28, 60, .22);
}
.wonda-home__trust {
margin: 0;
font-size: 12.5px;
color: #94a3b8;
letter-spacing: .02em;
}
/* Showcase half sits on the right (order 2) */
.wonda-home__grid > .wonda-authv2__showcase {
order: 2;
/* Tighten side padding so the window inside has more room. */
padding: 40px 30px !important;
}
/* ── Mobile — stack, hero first ───────────────────────────── */
@media (max-width: 860px) {
.wonda-home__grid {
grid-template-columns: 1fr !important;
min-height: 0 !important;
}
.wonda-home__hero {
padding: 40px 22px 24px;
order: 1;
}
.wonda-home__title { font-size: 36px; line-height: 1.06; }
.wonda-home__lead { font-size: 15.5px; margin-bottom: 26px; }
.wonda-home__ctas { gap: 10px; margin-bottom: 18px; }
.wonda-home__cta { padding: 12px 20px; font-size: 14px; }
.wonda-home__badge { font-size: 11.5px; margin-bottom: 20px; }
.wonda-home__grid > .wonda-authv2__showcase {
order: 2;
padding: 20px 15px 34px !important;
}
}
/* ═══════════════════════════════════════════════════════════════
WONDA_HOME_MIN
Minimal, safe. Nothing here changes layout or position.
================================================================ */
/* Bigger, bolder hero title. clamp() scales without overflow.
No padding change, no position change. */
body.wonda-home .wonda-home__title {
font-size: clamp(40px, 5vw, 68px);
font-weight: 800;
letter-spacing: -0.034em;
line-height: 1.03;
}
/* Accent word — soft band behind it, no z-index tricks */
body.wonda-home .wonda-home__accent {
color: #FF007E;
background-image: linear-gradient(180deg,
transparent 62%,
rgba(255, 0, 126, .14) 62%,
rgba(255, 0, 126, .04) 100%);
background-repeat: no-repeat;
}
body.wonda-home .wonda-home__lead {
font-size: 17px;
line-height: 1.55;
}
/* Decorative wash behind the hero, applied via background-image
directly on the existing element. No new DOM nodes, no
positioning, no filters, no animation. Cannot break layout. */
body.wonda-home .wonda-home__hero {
background-color: #ffffff;
background-image:
radial-gradient(circle at 12% 22%, rgba(255, 0, 126, .06) 0%, transparent 42%),
radial-gradient(circle at 88% 82%, rgba(108, 68, 244, .05) 0%, transparent 44%);
background-repeat: no-repeat;
}
@media (max-width: 860px) {
body.wonda-home .wonda-home__title {
font-size: clamp(32px, 8vw, 44px);
letter-spacing: -0.03em;
line-height: 1.06;
}
body.wonda-home .wonda-home__lead { font-size: 15.5px; }
}
/* ═══════════════════════════════════════════════════════════════
WONDA_STATS_RAIL_MIN
Same marquee, but each rule is defensive:
- overflow: hidden on the rail
- track has max-content width
- everything inside the rail is position: static
- no will-change on the rail itself (only on the track)
================================================================ */
body.wonda-site .wonda-stats-rail {
position: relative;
display: block;
width: 100%;
box-sizing: border-box;
padding: 28px 0;
margin: 0;
background: #ffffff;
border-top: 1px solid rgba(28, 28, 60, .05);
border-bottom: 1px solid rgba(28, 28, 60, .06);
overflow: hidden;
}
body.wonda-site .wonda-stats-rail::before,
body.wonda-site .wonda-stats-rail::after {
content: '';
position: absolute;
top: 0; bottom: 0;
width: 110px;
z-index: 2;
pointer-events: none;
}
body.wonda-site .wonda-stats-rail::before {
left: 0;
background: linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,0) 100%);
}
body.wonda-site .wonda-stats-rail::after {
right: 0;
background: linear-gradient(-90deg, #ffffff 0%, rgba(255,255,255,0) 100%);
}
body.wonda-site .wonda-stats-rail__track {
display: flex;
flex-wrap: nowrap;
align-items: stretch;
gap: 14px;
width: max-content;
transform: translate3d(0, 0, 0);
animation: wonda-stats-scroll 55s linear infinite;
will-change: transform;
}
body.wonda-site .wonda-stats-rail:hover .wonda-stats-rail__track {
animation-play-state: paused;
}
body.wonda-site .wonda-stats-rail__group {
display: flex;
flex-wrap: nowrap;
align-items: stretch;
gap: 14px;
flex-shrink: 0;
}
@keyframes wonda-stats-scroll {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
body.wonda-site .wonda-stat-block {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 18px;
min-width: 190px;
background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
border: 1px solid rgba(28, 28, 60, .08);
border-radius: 12px;
box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
flex-shrink: 0;
box-sizing: border-box;
}
body.wonda-site .wonda-stat-block__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 9px;
background: linear-gradient(135deg, rgba(255, 0, 126, .10), rgba(255, 0, 126, .04));
color: #FF007E;
flex-shrink: 0;
}
body.wonda-site .wonda-stat-block__icon svg { width: 15px; height: 15px; display: block; }
body.wonda-site .wonda-stat-block__text {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
body.wonda-site .wonda-stat-block__value {
font-size: 18px;
font-weight: 800;
color: #1c1c3c;
letter-spacing: -0.022em;
line-height: 1;
white-space: nowrap;
}
body.wonda-site .wonda-stat-block__value small {
font-size: 12px;
font-weight: 700;
color: #FF007E;
margin-left: 1px;
}
body.wonda-site .wonda-stat-block__label {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .07em;
color: #64748b;
white-space: nowrap;
}
@media (max-width: 860px) {
body.wonda-site .wonda-stats-rail { padding: 20px 0; }
body.wonda-site .wonda-stats-rail::before,
body.wonda-site .wonda-stats-rail::after { width: 48px; }
body.wonda-site .wonda-stat-block { min-width: 164px; padding: 10px 14px; gap: 10px; }
body.wonda-site .wonda-stat-block__value { font-size: 16px; }
body.wonda-site .wonda-stat-block__value small { font-size: 11px; }
body.wonda-site .wonda-stat-block__label { font-size: 9px; }
body.wonda-site .wonda-stat-block__icon { width: 28px; height: 28px; border-radius: 8px; }
body.wonda-site .wonda-stat-block__icon svg { width: 13px; height: 13px; }
body.wonda-site .wonda-stats-rail__track { animation-duration: 40s; }
}
@media (prefers-reduced-motion: reduce) {
body.wonda-site .wonda-stats-rail__track { animation: none; }
}
/* ═══════════════════════════════════════════════════════════════
WONDA_HOME_HERO_FADE
The hero's right edge fades to pure white so it merges
seamlessly with the showcase column next to it. Uses a
pseudo-element on the existing .wonda-home__hero, which
already has position: relative + overflow: hidden.
================================================================ */
body.wonda-home .wonda-home__hero::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: clamp(80px, 14%, 220px);
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, .30) 35%,
rgba(255, 255, 255, .72) 68%,
rgba(255, 255, 255, .94) 88%,
#ffffff 100%
);
pointer-events: none;
z-index: 0;
}
/* Text sits above the fade */
body.wonda-home .wonda-home__hero-inner {
position: relative;
z-index: 1;
}
/* On mobile the columns stack — the fade would sit at the right
edge of a full-width block and look wrong. Turn it off. */
@media (max-width: 860px) {
body.wonda-home .wonda-home__hero::after {
display: none;
}
}
/* ═══════════════════════════════════════════════════════════════
WONDA_HOME_HERO_BLUE_FIX
The hero previously had two unbounded radial gradients. The
second one (violet at 88% 82%) grew to the furthest corner of
the element, so on a tall hero it tinted the bottom edge with
a soft blue-violet wash.
Fix:
· Bound both radials with explicit pixel sizes
· Move both radials to the top half of the hero
· Soften the violet so it reads warm, not cool
================================================================ */
body.wonda-home .wonda-home__hero {
background-color: #ffffff;
background-image:
/* Pink, top-left, bounded 600 px */
radial-gradient(600px 600px at 10% 22%,
rgba(255, 0, 126, .055) 0%,
rgba(255, 0, 126, .015) 45%,
transparent 100%),
/* Warm rose, top-right, bounded 520 px — reads warm not blue */
radial-gradient(520px 520px at 92% 26%,
rgba(255, 60, 140, .040) 0%,
rgba(255, 60, 140, .012) 50%,
transparent 100%);
background-repeat: no-repeat;
background-position: top left, top right;
background-size: auto, auto;
}
/* ═══════════════════════════════════════════════════════════════
WONDA_HOME_HTML_BLUE_FIX
The element still has `background: #f8fafc` from app.css
(a faint blue-grey). On the home page it can peek through in a
sliver beneath the body. Force it white.
Uses :has() so it only touches the home page — the dashboard
keeps its own canvas gradient.
================================================================ */
html:has(body.wonda-home) {
background: #ffffff;
}
/* Fallback for browsers without :has() — harmless if unused. */
body.wonda-home {
background-color: #ffffff;
}
/* ═══════════════════════════════════════════════════════════════
WONDA_HOME_HERO_ONE_WASH
Single radial gradient anchored at the top-left corner.
Fades to fully transparent well before the bottom or right
edge, so the rest of the hero is pure #ffffff.
Ellipse geometry: 1100px wide × 900px tall, centre at (0,0).
Gradient reaches zero alpha at 72% of the ellipse radius,
which lands at roughly (790px, 650px) from the corner —
before the bottom-left corner (~78% radius) and before the
bottom-right corner (~110% radius).
================================================================ */
body.wonda-home .wonda-home__hero {
background-color: #ffffff;
background-image: radial-gradient(
1100px 900px at 0% 0%,
rgba(255, 0, 126, .085) 0%,
rgba(255, 0, 126, .048) 22%,
rgba(255, 0, 126, .014) 46%,
rgba(255, 0, 126, 0) 72%
);
background-repeat: no-repeat;
background-position: top left;
}
/* ═══════════════════════════════════════════════════════════════
WONDA_HOME_TIGHT_GAP
Kill the empty space between the hero copy and the widget.
================================================================ */
/* Cap the whole cluster. On a 2200px screen the layout stays the
same as on a 1600px one, centred, instead of stretching thin. */
/* Grid max-width disabled — was capping the showcase column. */
/* Hero: more padding on the left, less on the right so text moves
toward the centre-line. */
body.wonda-home .wonda-home__hero {
padding: 56px 40px 56px 72px;
}
/* Text block gets wider so it fills more of its column */
body.wonda-home .wonda-home__hero-inner {
max-width: 700px;
}
/* Showcase: widget hugs the left edge of its column instead of
floating in the middle. Padding asymmetric for balance. */
/* Showcase override removed — the animation column is off-limits. */
@media (max-width: 1024px) {
body.wonda-home .wonda-home__hero { padding: 48px 32px 48px 48px; }
}
/* Mobile already stacks — leave it alone */
@media (max-width: 860px) {
body.wonda-home .wonda-home__grid { max-width: none; }
body.wonda-home .wonda-home__hero { padding: 40px 22px 26px; }
}
/* ═══════════════════════════════════════════════════════════════
WONDA_HOME_GAP_HERO_ONLY
Re-applies only the hero-side breathing changes. The showcase
column (animation side) is untouched.
================================================================ */
body.wonda-home .wonda-home__hero {
/* More padding on the left, less on the right so the copy
moves toward the centre. Symmetric top/bottom. */
padding: 56px 40px 56px 72px;
}
body.wonda-home .wonda-home__hero-inner {
/* Wider text block — uses the space instead of floating in it. */
max-width: 700px;
}
@media (max-width: 1024px) {
body.wonda-home .wonda-home__hero {
padding: 48px 32px 48px 48px;
}
}
@media (max-width: 860px) {
body.wonda-home .wonda-home__hero {
padding: 40px 22px 26px;
}
}
/* END home.css */
/* BEGIN site.css */
/* Wonda AI — marketing site chrome and section primitives. */
:root {
--site-header-h: 72px;
--site-max: 1200px;
--site-pad: 24px;
--site-navy: #1c1c3c;
--site-pink: #FF007E;
--site-text: #0f172a;
--site-muted: #64748b;
--site-line: rgba(28, 28, 60, .10);
}
body.wonda-site {
margin: 0;
padding: 0;
background: #ffffff;
color: var(--site-text);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
/* ── Header ─────────────────────────────────────────────────── */
.wonda-site-header {
position: sticky;
top: 0;
z-index: 100;
height: var(--site-header-h);
background: #ffffff;
border-bottom: 1px solid transparent;
transition: border-color .18s ease, box-shadow .18s ease;
}
.wonda-site-header.is-scrolled {
border-bottom-color: var(--site-line);
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.wonda-site-header__inner {
max-width: var(--site-max);
height: 100%;
margin: 0 auto;
padding: 0 var(--site-pad);
display: flex;
align-items: center;
gap: 24px;
}
.wonda-site-header__brand {
display: inline-flex;
align-items: flex-end;
gap: 6px;
text-decoration: none;
flex-shrink: 0;
color: var(--site-navy);
}
.wonda-site-header__brand img {
max-height: 32px;
width: auto;
max-width: 180px;
object-fit: contain;
display: block;
}
.wonda-site-header__brand span {
font-size: 20px;
font-weight: 700;
letter-spacing: .2px;
line-height: 1;
}
.wonda-site-header__brand small {
font-size: 10px;
font-weight: 500;
color: var(--site-muted);
line-height: 1;
margin-bottom: 2px;
}
.wonda-site-header__nav {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
margin: 0 auto;
flex: 1 1 auto;
}
.wonda-site-header__nav a {
display: inline-block;
padding: 8px 14px;
border-radius: 10px;
color: var(--site-text);
font-size: 14px;
font-weight: 500;
text-decoration: none;
transition: background .12s ease, color .12s ease;
}
.wonda-site-header__nav a:hover {
background: #f1f5f9;
color: var(--site-navy);
}
.wonda-site-header__nav a.is-active { color: var(--site-pink); }
.wonda-site-header__actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.wonda-site-header__btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 9px 16px;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
line-height: 1;
transition: background .12s ease, transform .1s ease, box-shadow .15s ease, color .12s ease;
}
.wonda-site-header__btn--ghost {
color: var(--site-text);
background: transparent;
border: 1px solid transparent;
}
.wonda-site-header__btn--ghost:hover {
background: #f1f5f9;
color: var(--site-navy);
}
.wonda-site-header__btn--primary {
color: #ffffff !important;
background: linear-gradient(135deg, #FF2A92 0%, #E60072 100%);
box-shadow: 0 6px 16px -8px rgba(255, 0, 126, .55);
}
.wonda-site-header__btn--primary:hover {
transform: translateY(-1px);
box-shadow: 0 10px 22px -8px rgba(255, 0, 126, .65);
color: #ffffff !important;
}
.wonda-site-header__menu {
display: none;
width: 40px;
height: 40px;
border: 1px solid var(--site-line);
background: #ffffff;
border-radius: 10px;
color: var(--site-text);
cursor: pointer;
align-items: center;
justify-content: center;
padding: 0;
}
.wonda-site-header__menu svg { width: 18px; height: 18px; display: block; }
/* ── Footer ─────────────────────────────────────────────────── */
.wonda-site-footer {
background: #0f172a;
color: #cbd5e1;
margin-top: 0;
}
.wonda-site-footer__inner {
max-width: var(--site-max);
margin: 0 auto;
padding: 64px var(--site-pad) 40px;
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1fr;
gap: 40px;
}
.wonda-site-footer__col h4 {
margin: 0 0 14px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .12em;
color: #94a3b8;
}
.wonda-site-footer__col a {
display: block;
color: #cbd5e1;
text-decoration: none;
font-size: 14px;
padding: 5px 0;
transition: color .12s ease;
}
.wonda-site-footer__col a:hover { color: #ffffff; }
.wonda-site-footer__col--brand strong {
display: block;
color: #ffffff;
font-size: 18px;
font-weight: 700;
margin-bottom: 10px;
letter-spacing: .2px;
}
.wonda-site-footer__col--brand p {
margin: 0;
font-size: 13.5px;
color: #94a3b8;
line-height: 1.6;
max-width: 34ch;
}
.wonda-site-footer__base {
max-width: var(--site-max);
margin: 0 auto;
padding: 20px var(--site-pad) 26px;
border-top: 1px solid rgba(255, 255, 255, .08);
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
font-size: 12.5px;
color: #94a3b8;
}
.wonda-site-footer__base a { color: #cbd5e1; text-decoration: none; }
.wonda-site-footer__base a:hover { color: #ffffff; text-decoration: underline; }
/* ── Section primitives ─────────────────────────────────────── */
.wonda-site-section { padding: 96px var(--site-pad); }
.wonda-site-section--tight { padding: 64px var(--site-pad); }
.wonda-site-section--navy { background: var(--site-navy); color: #ffffff; }
.wonda-site-section--soft { background: #f8fafc; }
.wonda-site-container {
max-width: var(--site-max);
margin: 0 auto;
width: 100%;
}
.wonda-site-eyebrow {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--site-pink);
margin-bottom: 14px;
}
.wonda-site-h2 {
margin: 0 0 16px;
font-size: 40px;
font-weight: 700;
letter-spacing: -0.022em;
line-height: 1.1;
color: var(--site-navy);
}
.wonda-site-section--navy .wonda-site-h2 { color: #ffffff; }
.wonda-site-lead {
margin: 0 0 40px;
font-size: 16.5px;
line-height: 1.6;
color: var(--site-muted);
max-width: 60ch;
}
.wonda-site-section--navy .wonda-site-lead { color: #cbd5e1; }
/* ── Stub pages (filled in later) ───────────────────────────── */
.wonda-site-stub {
max-width: var(--site-max);
margin: 0 auto;
padding: 120px var(--site-pad) 60px;
min-height: 46vh;
}
.wonda-site-stub h1 {
margin: 0 0 12px;
font-size: 44px;
font-weight: 700;
letter-spacing: -0.022em;
color: var(--site-navy);
line-height: 1.05;
}
.wonda-site-stub p {
margin: 0;
font-size: 17px;
color: var(--site-muted);
max-width: 62ch;
line-height: 1.6;
}
/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 860px) {
:root { --site-header-h: 60px; }
.wonda-site-header__nav {
position: fixed;
top: var(--site-header-h);
left: 0;
right: 0;
background: #ffffff;
border-bottom: 1px solid var(--site-line);
box-shadow: 0 8px 24px -12px rgba(15, 23, 42, .18);
flex-direction: column;
align-items: stretch;
padding: 12px 16px 16px;
margin: 0;
transform: translateY(-8px);
opacity: 0;
pointer-events: none;
transition: opacity .18s ease, transform .18s ease;
}
.wonda-site-header.is-open .wonda-site-header__nav {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.wonda-site-header__nav a { padding: 12px 14px; font-size: 15px; }
.wonda-site-header__menu { display: inline-flex; }
.wonda-site-header__btn--ghost { display: none; }
.wonda-site-section { padding: 64px 20px; }
.wonda-site-h2 { font-size: 30px; }
.wonda-site-lead { font-size: 15.5px; }
.wonda-site-footer__inner {
grid-template-columns: 1fr 1fr;
gap: 32px 20px;
padding: 48px 20px 32px;
}
.wonda-site-footer__col--brand { grid-column: 1 / -1; }
.wonda-site-footer__base { padding: 16px 20px 22px; font-size: 12px; }
.wonda-site-stub { padding: 60px 20px 40px; }
.wonda-site-stub h1 { font-size: 32px; }
.wonda-site-stub p { font-size: 15.5px; }
}
@media (max-width: 480px) {
.wonda-site-footer__inner { grid-template-columns: 1fr; gap: 28px; }
}
/* ============================================================
WONDA_HOME_SECTIONS
Trust bar, feature grid, steps, product spotlight, pricing
cards, FAQ, and the final CTA band. All scoped under
.wonda-site-section so nothing leaks.
============================================================ */
/* ── Trust bar ──────────────────────────────────────────────── */
.wonda-home-trust {
padding: 28px 24px;
background: #ffffff;
border-bottom: 1px solid rgba(28, 28, 60, .06);
}
.wonda-home-trust__inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
flex-wrap: wrap;
}
.wonda-home-trust__label {
font-size: 13.5px;
color: #64748b;
letter-spacing: .02em;
}
.wonda-home-trust__num {
color: #1c1c3c;
font-weight: 700;
}
/* ── Feature grid ───────────────────────────────────────────── */
.wonda-grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
@media (max-width: 900px) { .wonda-grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .wonda-grid-3 { grid-template-columns: 1fr; } }
.wonda-feature-card {
padding: 28px 26px;
border-radius: 16px;
border: 1px solid rgba(28, 28, 60, .08);
background: #ffffff;
transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.wonda-feature-card:hover {
border-color: rgba(28, 28, 60, .16);
box-shadow: 0 12px 28px -18px rgba(28, 28, 60, .22);
transform: translateY(-2px);
}
.wonda-feature-card__icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(255, 0, 126, .10) 0%, rgba(255, 0, 126, .04) 100%);
color: #FF007E;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.wonda-feature-card__icon svg { width: 22px; height: 22px; display: block; }
.wonda-feature-card__title {
margin: 0 0 10px;
font-size: 17px;
font-weight: 700;
color: #1c1c3c;
letter-spacing: -0.01em;
line-height: 1.3;
}
.wonda-feature-card__text {
margin: 0;
font-size: 14.5px;
line-height: 1.6;
color: #64748b;
}
/* ── How it works ───────────────────────────────────────────── */
.wonda-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
counter-reset: step;
}
@media (max-width: 800px) {
.wonda-steps { grid-template-columns: 1fr; gap: 28px; }
}
.wonda-step {
position: relative;
padding-top: 60px;
}
.wonda-step::before {
counter-increment: step;
content: counter(step);
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 40px;
border-radius: 12px;
background: linear-gradient(135deg, #FF2A92 0%, #E60072 100%);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 700;
box-shadow: 0 6px 16px -8px rgba(255, 0, 126, .55);
font-variant-numeric: tabular-nums;
}
.wonda-step__title {
margin: 0 0 10px;
font-size: 18px;
font-weight: 700;
color: #1c1c3c;
letter-spacing: -0.01em;
}
.wonda-step__text {
margin: 0;
font-size: 14.5px;
line-height: 1.65;
color: #64748b;
}
.wonda-step__text code {
background: rgba(28, 28, 60, .06);
border: 0;
padding: 1px 6px;
border-radius: 4px;
font-size: 12.5px;
color: #1c1c3c;
}
/* ── Product spotlight ──────────────────────────────────────── */
.wonda-spot {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
@media (max-width: 900px) {
.wonda-spot { grid-template-columns: 1fr; gap: 40px; }
}
.wonda-spot__bullets {
list-style: none;
padding: 0;
margin: 24px 0 0;
}
.wonda-spot__bullets li {
padding: 10px 0 10px 32px;
position: relative;
font-size: 15px;
color: #1c1c3c;
line-height: 1.5;
}
.wonda-spot__bullets li::before {
content: '';
position: absolute;
left: 0;
top: 16px;
width: 18px;
height: 18px;
border-radius: 50%;
background: linear-gradient(135deg, #FF2A92 0%, #E60072 100%);
box-shadow: inset 0 0 0 4px #fff, 0 1px 2px rgba(255, 0, 126, .25);
}
/* Product mock */
.wonda-product-mock {
background: #ffffff;
border: 1px solid rgba(28, 28, 60, .08);
border-radius: 20px;
padding: 20px;
box-shadow: 0 30px 60px -30px rgba(28, 28, 60, .30);
display: flex;
flex-direction: column;
gap: 10px;
}
.wonda-product-mock__row {
display: flex;
gap: 14px;
align-items: center;
padding: 12px;
border-radius: 12px;
background: #f8fafc;
border: 1px solid rgba(28, 28, 60, .05);
transition: background .15s ease;
}
.wonda-product-mock__row:hover { background: #f1f5f9; }
.wonda-product-mock__thumb {
width: 44px;
height: 44px;
border-radius: 10px;
background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
flex-shrink: 0;
}
.wonda-product-mock__body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1;
}
.wonda-product-mock__body strong {
font-size: 13.5px;
color: #1c1c3c;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wonda-product-mock__body span {
font-size: 11.5px;
color: #64748b;
}
.wonda-product-mock__body b {
font-size: 13px;
color: #FF007E;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.wonda-product-mock__query {
margin-top: 8px;
padding: 12px 16px;
background: linear-gradient(135deg, #FF2A92 0%, #E60072 100%);
color: #ffffff;
border-radius: 14px;
align-self: flex-end;
font-size: 13px;
max-width: 85%;
box-shadow: 0 8px 20px -10px rgba(255, 0, 126, .50);
}
.wonda-product-mock__query em { font-style: normal; }
/* ── Pricing cards ──────────────────────────────────────────── */
.wonda-price-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
@media (max-width: 1000px) { .wonda-price-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .wonda-price-grid { grid-template-columns: 1fr; } }
.wonda-price-card {
padding: 30px 24px 26px;
border-radius: 18px;
border: 1px solid rgba(28, 28, 60, .08);
background: #ffffff;
display: flex;
flex-direction: column;
position: relative;
transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.wonda-price-card:hover {
border-color: rgba(28, 28, 60, .16);
box-shadow: 0 14px 32px -20px rgba(28, 28, 60, .25);
transform: translateY(-2px);
}
.wonda-price-card--featured {
border-color: rgba(255, 0, 126, .45);
box-shadow: 0 20px 44px -24px rgba(255, 0, 126, .38);
}
.wonda-price-card--featured:hover {
border-color: #FF007E;
box-shadow: 0 24px 50px -22px rgba(255, 0, 126, .48);
}
.wonda-price-card__badge {
position: absolute;
top: -11px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #FF2A92 0%, #E60072 100%);
color: #ffffff;
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
padding: 5px 12px;
border-radius: 12px;
box-shadow: 0 4px 12px -4px rgba(255, 0, 126, .40);
white-space: nowrap;
}
.wonda-price-card__name {
font-size: 15px;
font-weight: 700;
color: #1c1c3c;
letter-spacing: -0.005em;
}
.wonda-price-card__price {
font-size: 36px;
font-weight: 700;
color: #1c1c3c;
margin: 10px 0 8px;
letter-spacing: -0.032em;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.wonda-price-card__price small {
font-size: 14px;
color: #64748b;
font-weight: 500;
letter-spacing: 0;
}
.wonda-price-card__desc {
font-size: 13.5px;
color: #64748b;
line-height: 1.5;
margin: 0 0 22px;
min-height: 42px;
}
.wonda-price-card__features {
list-style: none;
padding: 20px 0 0;
margin: 0 0 24px;
flex: 1;
border-top: 1px solid rgba(28, 28, 60, .07);
}
.wonda-price-card__features li {
padding: 6px 0 6px 22px;
font-size: 13px;
color: #1c1c3c;
position: relative;
line-height: 1.45;
}
.wonda-price-card__features li::before {
content: '';
position: absolute;
left: 0;
top: 11px;
width: 12px;
height: 12px;
border-radius: 50%;
background: linear-gradient(135deg, #FF2A92 0%, #E60072 100%);
box-shadow: inset 0 0 0 3px #fff;
}
.wonda-price-card__cta {
display: block;
padding: 12px 18px;
text-align: center;
border-radius: 11px;
font-size: 13.5px;
font-weight: 600;
text-decoration: none;
transition: transform .1s ease, box-shadow .15s ease, background .15s ease;
}
.wonda-price-card__cta--primary {
background: linear-gradient(135deg, #FF2A92 0%, #E60072 100%);
color: #fff;
box-shadow: 0 8px 20px -10px rgba(255, 0, 126, .50);
}
.wonda-price-card__cta--primary:hover {
transform: translateY(-1px);
box-shadow: 0 12px 24px -10px rgba(255, 0, 126, .60);
color: #fff;
}
.wonda-price-card__cta--ghost {
background: #f8fafc;
color: #1c1c3c;
border: 1px solid rgba(28, 28, 60, .10);
}
.wonda-price-card__cta--ghost:hover {
background: #f1f5f9;
border-color: rgba(28, 28, 60, .20);
color: #1c1c3c;
}
.wonda-price-foot {
margin: 32px 0 0;
text-align: center;
font-size: 14px;
color: #64748b;
}
.wonda-price-foot a {
color: #FF007E;
font-weight: 600;
text-decoration: none;
}
.wonda-price-foot a:hover { text-decoration: underline; }
/* ── FAQ ────────────────────────────────────────────────────── */
.wonda-faq {
max-width: 780px;
margin: 0 auto;
}
.wonda-faq__item {
border-bottom: 1px solid rgba(28, 28, 60, .08);
}
.wonda-faq__item:first-child { border-top: 1px solid rgba(28, 28, 60, .08); }
.wonda-faq__q {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 22px 4px;
cursor: pointer;
font-size: 16px;
font-weight: 600;
color: #1c1c3c;
list-style: none;
transition: color .12s ease;
user-select: none;
}
.wonda-faq__q:hover { color: #FF007E; }
.wonda-faq__q::-webkit-details-marker { display: none; }
.wonda-faq__q::marker { content: ''; }
.wonda-faq__chev {
flex-shrink: 0;
color: #94a3b8;
transition: transform .22s cubic-bezier(.16,1,.3,1), color .12s ease;
}
.wonda-faq__item[open] .wonda-faq__chev {
transform: rotate(45deg);
color: #FF007E;
}
.wonda-faq__a {
padding: 0 4px 24px;
font-size: 15px;
line-height: 1.7;
color: #64748b;
max-width: 68ch;
}
/* ── Final CTA band ─────────────────────────────────────────── */
.wonda-cta-band {
text-align: center;
max-width: 720px;
margin: 0 auto;
padding: 0;
}
.wonda-cta-band__h {
margin: 0 0 18px;
font-size: 48px;
font-weight: 700;
color: #ffffff;
letter-spacing: -0.026em;
line-height: 1.05;
}
.wonda-cta-band__p {
margin: 0 auto 40px;
font-size: 17px;
color: #cbd5e1;
max-width: 52ch;
line-height: 1.6;
}
.wonda-cta-band__actions {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
.wonda-cta-band__btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 15px 30px;
border-radius: 12px;
font-size: 15px;
font-weight: 600;
text-decoration: none;
transition: transform .1s ease, box-shadow .15s ease, background .15s ease;
line-height: 1;
}
.wonda-cta-band__btn--primary {
background: linear-gradient(135deg, #FF2A92 0%, #E60072 100%);
color: #ffffff !important;
box-shadow: 0 12px 26px -10px rgba(255, 0, 126, .55);
}
.wonda-cta-band__btn--primary:hover {
transform: translateY(-1px);
box-shadow: 0 16px 32px -10px rgba(255, 0, 126, .65);
}
.wonda-cta-band__btn--ghost {
background: rgba(255, 255, 255, .08);
color: #ffffff !important;
border: 1px solid rgba(255, 255, 255, .18);
}
.wonda-cta-band__btn--ghost:hover {
background: rgba(255, 255, 255, .14);
border-color: rgba(255, 255, 255, .30);
}
/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 860px) {
.wonda-home-trust { padding: 22px 20px; }
.wonda-home-trust__label { font-size: 12.5px; text-align: center; }
.wonda-feature-card { padding: 22px 20px; }
.wonda-feature-card__icon { width: 40px; height: 40px; margin-bottom: 16px; }
.wonda-feature-card__icon svg { width: 20px; height: 20px; }
.wonda-feature-card__title { font-size: 15.5px; }
.wonda-feature-card__text { font-size: 13.5px; }
.wonda-step__title { font-size: 16px; }
.wonda-step__text { font-size: 13.5px; }
.wonda-product-mock { padding: 14px; border-radius: 16px; }
.wonda-product-mock__row { padding: 10px; gap: 10px; }
.wonda-product-mock__thumb { width: 38px; height: 38px; }
.wonda-product-mock__query { font-size: 12.5px; padding: 10px 13px; }
.wonda-price-card { padding: 24px 20px 22px; }
.wonda-price-card__price { font-size: 30px; }
.wonda-price-card__desc { min-height: 0; }
.wonda-faq__q { padding: 18px 4px; font-size: 15px; }
.wonda-faq__a { font-size: 14px; padding-bottom: 20px; }
.wonda-cta-band__h { font-size: 32px; }
.wonda-cta-band__p { font-size: 15.5px; }
.wonda-cta-band__btn { padding: 13px 24px; font-size: 14px; }
}
/* ============================================================
WONDA_SUBPAGE_PRIMITIVES
Shared across /features, /pricing, /docs, /contact, legal.
============================================================ */
/* ── Compact page hero for sub-pages ────────────────────────── */
.wonda-page-hero {
padding: 96px 24px 32px;
background: #ffffff;
border-bottom: 1px solid rgba(28, 28, 60, .06);
}
.wonda-page-hero__inner {
max-width: 1200px;
margin: 0 auto;
max-width: 780px;
}
.wonda-page-hero__title {
margin: 0 0 18px;
font-size: 56px;
font-weight: 700;
letter-spacing: -0.028em;
line-height: 1.04;
color: #1c1c3c;
}
.wonda-page-hero__lead {
margin: 0;
font-size: 18px;
line-height: 1.6;
color: #64748b;
max-width: 62ch;
}
.wonda-page-hero__lead a {
color: #FF007E;
font-weight: 500;
text-decoration: none;
}
.wonda-page-hero__lead a:hover { text-decoration: underline; }
/* ── Split content section ──────────────────────────────────── */
.wonda-split-section {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
.wonda-split-section--reverse > .wonda-split-section__copy { order: 2; }
.wonda-split-section--reverse > .wonda-split-section__visual { order: 1; }
@media (max-width: 900px) {
.wonda-split-section { grid-template-columns: 1fr; gap: 40px; }
.wonda-split-section--reverse > .wonda-split-section__copy { order: 1; }
.wonda-split-section--reverse > .wonda-split-section__visual { order: 2; }
}
/* ── Tick list ──────────────────────────────────────────────── */
.wonda-tick-list {
list-style: none;
padding: 0;
margin: 24px 0 0;
}
.wonda-tick-list li {
padding: 10px 0 10px 32px;
position: relative;
font-size: 15px;
color: #1c1c3c;
line-height: 1.55;
}
.wonda-tick-list li strong { color: #1c1c3c; font-weight: 700; }
.wonda-tick-list li::before {
content: '';
position: absolute;
left: 0;
top: 15px;
width: 18px;
height: 18px;
border-radius: 50%;
background: linear-gradient(135deg, #FF2A92 0%, #E60072 100%);
box-shadow: inset 0 0 0 4px #fff, 0 1px 2px rgba(255, 0, 126, .25);
}
/* ── Mock panel (used in feature sections) ──────────────────── */
.wonda-mock-panel {
background: #ffffff;
border: 1px solid rgba(28, 28, 60, .08);
border-radius: 20px;
padding: 20px;
box-shadow: 0 30px 60px -30px rgba(28, 28, 60, .28);
}
.wonda-mock-panel__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-bottom: 14px;
margin-bottom: 14px;
border-bottom: 1px solid rgba(28, 28, 60, .06);
}
.wonda-mock-panel__head strong {
font-size: 14px;
color: #1c1c3c;
font-weight: 700;
}
.wonda-mock-panel__head span {
font-size: 11.5px;
color: #64748b;
font-variant-numeric: tabular-nums;
}
.wonda-mock-panel__code {
margin: 0;
padding: 0;
background: transparent;
border: 0;
font-family: ui-monospace, Menlo, Monaco, Consolas, monospace;
font-size: 12.5px;
line-height: 1.7;
color: #1c1c3c;
white-space: pre-wrap;
word-break: break-word;
}
.wonda-mock-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.wonda-mock-list__row {
padding: 10px 12px;
border-radius: 10px;
background: #f8fafc;
border: 1px solid rgba(28, 28, 60, .05);
font-size: 13px;
color: #1c1c3c;
line-height: 1.4;
}
.wonda-mock-list__row b {
color: #64748b;
font-weight: 500;
margin-right: 8px;
display: inline-block;
min-width: 92px;
font-variant-numeric: tabular-nums;
font-size: 12.5px;
}
.wonda-mock-list__row i {
font-style: normal;
color: #15803d;
font-weight: 600;
font-size: 12px;
margin-left: 6px;
}
/* ── Plan comparison table (was in app.css, needed here) ───── */
.wonda-plan-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: 14px;
border: 1px solid rgba(28, 28, 60, .08);
background: #ffffff;
box-shadow: 0 8px 24px -20px rgba(28, 28, 60, .20);
}
.wonda-plan-table {
width: 100%;
min-width: 720px;
border-collapse: collapse;
font-size: 13px;
}
.wonda-plan-table th,
.wonda-plan-table td {
padding: 12px 16px;
text-align: center;
border-bottom: 1px solid rgba(28, 28, 60, .06);
vertical-align: middle;
}
.wonda-plan-table thead th {
background: #f8fafc;
padding: 20px 16px;
vertical-align: top;
}
.wonda-plan-table thead th:first-child {
text-align: left;
font-size: 11px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: #64748b;
background: #f8fafc;
}
.wonda-plan-col {
min-width: 140px;
border-left: 1px solid rgba(28, 28, 60, .06);
}
.wonda-plan-name {
font-size: 15px;
font-weight: 700;
color: #1c1c3c;
margin-bottom: 4px;
}
.wonda-plan-price {
font-size: 12px;
color: #64748b;
}
.wonda-plan-row-header td {
background: #f8fafc;
font-size: 11px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: #64748b;
text-align: left;
padding: 10px 16px !important;
}
.wonda-plan-label {
text-align: left;
font-weight: 500;
color: #1c1c3c;
}
.wonda-plan-cell { color: #1c1c3c; }
.wonda-plan-tick {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
color: #15803d;
font-weight: 700;
font-size: 12px;
box-shadow: inset 0 0 0 1px rgba(21, 128, 61, .14);
}
.wonda-plan-dash { color: #cbd5e1; font-size: 16px; }
/* ── Docs page ──────────────────────────────────────────────── */
.wonda-docs {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px 96px;
display: grid;
grid-template-columns: 240px 1fr;
gap: 64px;
align-items: start;
}
.wonda-docs__side {
position: sticky;
top: calc(var(--site-header-h, 72px) + 24px);
align-self: start;
}
.wonda-docs__side-inner {
border-left: 1px solid rgba(28, 28, 60, .08);
padding: 8px 0 8px 20px;
}
.wonda-docs__side-head {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: #94a3b8;
margin-bottom: 14px;
}
.wonda-docs__side-nav {
display: flex;
flex-direction: column;
gap: 2px;
}
.wonda-docs__side-nav a {
display: block;
padding: 7px 0;
font-size: 13.5px;
color: #64748b;
text-decoration: none;
transition: color .12s ease;
line-height: 1.4;
}
.wonda-docs__side-nav a:hover { color: #FF007E; }
.wonda-docs__content { min-width: 0; }
.wonda-docs__intro { padding: 32px 0 48px; }
.wonda-docs__section {
padding: 32px 0 8px;
scroll-margin-top: calc(var(--site-header-h, 72px) + 24px);
}
.wonda-docs__section h2 {
margin: 0 0 18px;
font-size: 28px;
font-weight: 700;
letter-spacing: -0.02em;
color: #1c1c3c;
line-height: 1.15;
}
.wonda-docs__section h3 {
margin: 28px 0 10px;
font-size: 17px;
font-weight: 700;
letter-spacing: -0.005em;
color: #1c1c3c;
}
.wonda-docs__section p,
.wonda-docs__section li {
font-size: 15px;
line-height: 1.7;
color: #475569;
}
.wonda-docs__section p { margin: 0 0 16px; }
.wonda-docs__section ul,
.wonda-docs__section ol {
margin: 0 0 16px;
padding-left: 22px;
}
.wonda-docs__section li { margin-bottom: 6px; }
.wonda-docs__section a {
color: #FF007E;
text-decoration: none;
font-weight: 500;
}
.wonda-docs__section a:hover { text-decoration: underline; }
.wonda-docs__section code {
background: #f1f5f9;
border: 0;
padding: 2px 6px;
border-radius: 4px;
font-size: 12.5px;
color: #1c1c3c;
font-family: ui-monospace, Menlo, Monaco, Consolas, monospace;
}
.wonda-docs__code {
margin: 12px 0 20px;
padding: 18px 20px;
background: #0f172a;
color: #e2e8f0;
border-radius: 12px;
font-family: ui-monospace, Menlo, Monaco, Consolas, monospace;
font-size: 12.5px;
line-height: 1.65;
white-space: pre-wrap;
word-break: break-word;
overflow-x: auto;
}
.wonda-docs__code code { background: transparent; color: inherit; padding: 0; }
.wonda-docs__note {
padding: 14px 18px;
background: #eff6ff;
border-left: 3px solid #3b82f6;
border-radius: 8px;
color: #1e40af !important;
font-size: 14px !important;
}
.wonda-docs__table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
margin: 12px 0 20px;
}
.wonda-docs__table td {
padding: 12px 8px;
border-bottom: 1px solid rgba(28, 28, 60, .06);
vertical-align: top;
color: #475569;
line-height: 1.55;
}
.wonda-docs__table td:first-child {
padding-right: 20px;
white-space: nowrap;
width: 1%;
}
/* ── Contact page ───────────────────────────────────────────── */
.wonda-contact {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 48px;
align-items: start;
}
@media (max-width: 860px) {
.wonda-contact { grid-template-columns: 1fr; gap: 32px; }
}
.wonda-contact__form {
background: #ffffff;
border: 1px solid rgba(28, 28, 60, .08);
border-radius: 18px;
padding: 32px;
}
.wonda-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
@media (max-width: 600px) { .wonda-form-row { grid-template-columns: 1fr; } }
.wonda-form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.wonda-form-field label {
font-size: 13px;
font-weight: 600;
color: #1c1c3c;
letter-spacing: -0.005em;
}
.wonda-form-field input,
.wonda-form-field textarea {
width: 100%;
padding: 12px 14px;
border: 1px solid rgba(28, 28, 60, .12);
border-radius: 10px;
font-family: inherit;
font-size: 15px;
background: #fbfcff;
color: #1c1c3c;
transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
box-sizing: border-box;
}
.wonda-form-field input:focus,
.wonda-form-field textarea:focus {
outline: none;
background: #ffffff;
border-color: #FF007E;
box-shadow: 0 0 0 4px rgba(255, 0, 126, .10);
}
.wonda-form-field textarea { resize: vertical; min-height: 140px; }
.wonda-form-submit {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 28px;
border-radius: 12px;
border: 0;
background: linear-gradient(135deg, #FF2A92 0%, #E60072 100%);
color: #fff;
font-size: 15px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
box-shadow: 0 10px 24px -10px rgba(255, 0, 126, .45);
transition: transform .12s ease, box-shadow .15s ease;
width: 100%;
}
.wonda-form-submit:hover {
transform: translateY(-1px);
box-shadow: 0 14px 30px -10px rgba(255, 0, 126, .55);
}
.wonda-contact__side {
display: flex;
flex-direction: column;
gap: 12px;
position: sticky;
top: calc(var(--site-header-h, 72px) + 24px);
}
.wonda-contact__card {
padding: 18px 20px;
background: #f8fafc;
border: 1px solid rgba(28, 28, 60, .06);
border-radius: 14px;
display: flex;
flex-direction: column;
gap: 4px;
}
.wonda-contact__card strong {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: #64748b;
}
.wonda-contact__card a,
.wonda-contact__card span {
font-size: 14.5px;
color: #1c1c3c;
text-decoration: none;
font-weight: 500;
word-break: break-word;
}
.wonda-contact__card a:hover { color: #FF007E; }
.wonda-contact__card--muted { opacity: .75; }
/* ── Legal pages ────────────────────────────────────────────── */
.wonda-legal {
max-width: 720px;
margin: 0 auto;
}
.wonda-legal h2 {
margin: 40px 0 14px;
font-size: 20px;
font-weight: 700;
color: #1c1c3c;
letter-spacing: -0.01em;
}
.wonda-legal h2:first-child { margin-top: 0; }
.wonda-legal p {
margin: 0 0 16px;
font-size: 15px;
line-height: 1.75;
color: #475569;
}
.wonda-legal ul {
margin: 0 0 16px;
padding-left: 22px;
}
.wonda-legal li {
font-size: 15px;
line-height: 1.7;
color: #475569;
margin-bottom: 6px;
}
.wonda-legal a {
color: #FF007E;
text-decoration: none;
font-weight: 500;
}
.wonda-legal a:hover { text-decoration: underline; }
.wonda-legal code {
background: #f1f5f9;
padding: 2px 6px;
border-radius: 4px;
font-family: ui-monospace, Menlo, Monaco, Consolas, monospace;
font-size: 12.5px;
color: #1c1c3c;
}
/* ── Notice (reuse from app) ────────────────────────────────── */
.wonda-notice {
padding: 14px 18px;
border-radius: 12px;
margin-bottom: 20px;
font-size: 14.5px;
line-height: 1.55;
}
.wonda-notice--ok { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.wonda-notice--error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.wonda-notice--info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
/* ── Mobile adjustments ─────────────────────────────────────── */
@media (max-width: 860px) {
.wonda-page-hero { padding: 56px 20px 24px; }
.wonda-page-hero__title { font-size: 34px; }
.wonda-page-hero__lead { font-size: 15.5px; }
.wonda-docs {
grid-template-columns: 1fr;
gap: 0;
padding: 0 20px 64px;
}
.wonda-docs__side {
position: static;
border-bottom: 1px solid rgba(28, 28, 60, .06);
padding-bottom: 20px;
margin-bottom: 24px;
}
.wonda-docs__side-inner {
border-left: 0;
padding-left: 0;
}
.wonda-docs__side-nav {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 4px 16px;
}
.wonda-docs__section h2 { font-size: 22px; }
.wonda-docs__section h3 { font-size: 15.5px; }
.wonda-contact__form { padding: 22px; }
.wonda-contact__side { position: static; }
.wonda-legal h2 { font-size: 18px; }
.wonda-legal p,
.wonda-legal li { font-size: 14.5px; }
.wonda-mock-panel { padding: 14px; border-radius: 16px; }
}
/* ============================================================
WONDA_ALT_FEATURES
Alternating feature rows with mini widget mockups.
Each mockup is pure HTML/CSS — no PNGs, so it stays crisp.
============================================================ */
/* ── Section head ───────────────────────────────────────────── */
.wonda-section-head {
text-align: center;
max-width: 720px;
margin: 0 auto 72px;
}
.wonda-section-head .wonda-site-lead {
margin: 0 auto;
text-align: center;
}
/* ── Rows ───────────────────────────────────────────────────── */
.wonda-alt {
display: flex;
flex-direction: column;
gap: 96px;
}
.wonda-alt__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 72px;
align-items: center;
}
.wonda-alt__row--reverse > .wonda-alt__copy { order: 2; }
.wonda-alt__row--reverse > .wonda-alt__visual { order: 1; }
@media (max-width: 900px) {
.wonda-alt { gap: 56px; }
.wonda-alt__row { grid-template-columns: 1fr; gap: 32px; }
.wonda-alt__row--reverse > .wonda-alt__copy { order: 1; }
.wonda-alt__row--reverse > .wonda-alt__visual { order: 2; }
}
.wonda-alt__num {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: .14em;
color: #FF007E;
margin-bottom: 14px;
font-variant-numeric: tabular-nums;
}
.wonda-alt__title {
margin: 0 0 16px;
font-size: 34px;
font-weight: 700;
letter-spacing: -0.022em;
line-height: 1.12;
color: #1c1c3c;
}
.wonda-alt__text {
margin: 0 0 22px;
font-size: 16px;
line-height: 1.7;
color: #64748b;
max-width: 46ch;
}
.wonda-alt__bullets {
list-style: none;
padding: 0;
margin: 0;
}
.wonda-alt__bullets li {
position: relative;
padding: 7px 0 7px 26px;
font-size: 14.5px;
line-height: 1.5;
color: #1c1c3c;
}
.wonda-alt__bullets li::before {
content: '';
position: absolute;
left: 0;
top: 14px;
width: 14px;
height: 14px;
border-radius: 50%;
background: linear-gradient(135deg, #FF2A92 0%, #E60072 100%);
box-shadow: inset 0 0 0 3px #fff, 0 1px 2px rgba(255, 0, 126, .25);
}
/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 860px) {
.wonda-section-head { margin-bottom: 44px; }
.wonda-alt__title { font-size: 26px; }
.wonda-alt__text { font-size: 15px; }
.wonda-alt__bullets li { font-size: 13.5px; }
.wonda-shot { max-width: 100%; border-radius: 18px; }
.wonda-shot__bubble { font-size: 13px; }
.wonda-shot__stat b { font-size: 17px; }
}
/* ═══════════════════════════════════════════════════════════════
WONDA_SITE_DENSITY_V1
Tighter rhythm, warmer sections, coloured feature icons.
Every rule is scoped to body.wonda-site so it cannot leak.
No !important. No positioning. No overflow tricks.
═══════════════════════════════════════════════════════════════ */
/* ---------- Section rhythm: 96 → 72 px desktop, 64 → 52 mobile --- */
body.wonda-site .wonda-site-section {
padding: 72px var(--site-pad);
}
body.wonda-site .wonda-site-section--tight {
padding: 52px var(--site-pad);
}
@media (max-width: 860px) {
body.wonda-site .wonda-site-section { padding: 52px 20px; }
body.wonda-site .wonda-site-section--tight { padding: 40px 20px; }
}
/* Section head: 72 → 48 px. Keeps a little breathing room. */
body.wonda-site .wonda-section-head {
margin-bottom: 48px;
}
@media (max-width: 860px) {
body.wonda-site .wonda-section-head { margin-bottom: 34px; }
}
/* Alt feature rows: 96 → 68 px gap. Still airy, less empty. */
body.wonda-site .wonda-alt {
gap: 68px;
}
@media (max-width: 900px) {
body.wonda-site .wonda-alt { gap: 44px; }
}
/* ---------- Eyebrow → soft pink pill with a glow dot ------------- */
body.wonda-site .wonda-site-eyebrow {
padding: 4px 12px;
background: rgba(255, 0, 126, .08);
border-radius: 20px;
}
body.wonda-site .wonda-site-eyebrow::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: #FF007E;
box-shadow: 0 0 0 3px rgba(255, 0, 126, .18);
margin-right: 6px;
vertical-align: middle;
position: relative;
top: -1px;
}
/* ---------- Soft sections: layered radial washes ----------------- */
/* Was: flat #f8fafc. Now: pink top-right + violet bottom-left over
the same base colour. Backgrounds only — no layout impact. */
body.wonda-site .wonda-site-section--soft {
background:
radial-gradient(900px 420px at 100% 0%, rgba(255, 0, 126, .055), transparent 62%),
radial-gradient(700px 380px at 0% 100%, rgba(108, 68, 244, .045), transparent 62%),
#f8fafc;
}
/* Navy CTA band: soft pink glow at the top so it isn't a flat slab */
body.wonda-site .wonda-site-section--navy {
background:
radial-gradient(900px 460px at 50% 0%, rgba(255, 0, 126, .12), transparent 62%),
#1c1c3c;
}
/* CTA band heading a touch heavier — matches the new hero weight */
body.wonda-site .wonda-cta-band__h {
font-weight: 800;
letter-spacing: -0.028em;
}
/* ---------- Feature grid: per-card icon colours ------------------ */
/* The 6-card grid becomes a rainbow of one accent per card, so the
section reads as six distinct capabilities instead of one pink
chorus. Same layout, same size, just the icon tile changes. */
body.wonda-site .wonda-grid-3 .wonda-feature-card:nth-child(2) .wonda-feature-card__icon {
background: linear-gradient(135deg, rgba(108, 68, 244, .10), rgba(108, 68, 244, .04));
color: #6c44f4;
}
body.wonda-site .wonda-grid-3 .wonda-feature-card:nth-child(3) .wonda-feature-card__icon {
background: linear-gradient(135deg, rgba(13, 148, 136, .10), rgba(13, 148, 136, .04));
color: #0d9488;
}
body.wonda-site .wonda-grid-3 .wonda-feature-card:nth-child(4) .wonda-feature-card__icon {
background: linear-gradient(135deg, rgba(234, 88, 12, .10), rgba(234, 88, 12, .04));
color: #ea580c;
}
body.wonda-site .wonda-grid-3 .wonda-feature-card:nth-child(5) .wonda-feature-card__icon {
background: linear-gradient(135deg, rgba(217, 119, 6, .10), rgba(217, 119, 6, .04));
color: #d97706;
}
body.wonda-site .wonda-grid-3 .wonda-feature-card:nth-child(6) .wonda-feature-card__icon {
background: linear-gradient(135deg, rgba(5, 150, 105, .10), rgba(5, 150, 105, .04));
color: #059669;
}
/* ---------- Small hover lift on feature cards -------------------- */
/* Already present in the base CSS; this just softens the curve and
adds a border tint so the lift reads better. */
body.wonda-site .wonda-feature-card {
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body.wonda-site .wonda-feature-card:hover {
border-color: rgba(28, 28, 60, .16);
}
/* ═══════════════════════════════════════════════════════════════
WONDA_TESTIMONIALS
Three quiet cards on white. No layout tricks.
═══════════════════════════════════════════════════════════════ */
body.wonda-site .wonda-testimonials {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
body.wonda-site .wonda-testimonial {
margin: 0;
padding: 30px 26px 26px;
background: #ffffff;
border: 1px solid rgba(28, 28, 60, .08);
border-radius: 18px;
display: flex;
flex-direction: column;
gap: 22px;
position: relative;
overflow: hidden;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body.wonda-site .wonda-testimonial:hover {
transform: translateY(-3px);
border-color: rgba(28, 28, 60, .16);
box-shadow:
0 1px 2px rgba(15, 23, 42, .04),
0 18px 38px -22px rgba(28, 28, 60, .28);
}
/* Oversized quote mark, behind the text */
body.wonda-site .wonda-testimonial::before {
content: '\201C'; /* left double quote */
position: absolute;
top: -12px;
left: 18px;
font-family: Georgia, "Times New Roman", serif;
font-size: 96px;
line-height: 1;
font-weight: 700;
color: rgba(255, 0, 126, .10);
pointer-events: none;
}
body.wonda-site .wonda-testimonial__quote {
margin: 0;
font-size: 15.5px;
line-height: 1.62;
color: #1c1c3c;
letter-spacing: -0.005em;
position: relative;
z-index: 1;
}
body.wonda-site .wonda-testimonial__meta {
display: flex;
align-items: center;
gap: 12px;
margin-top: auto;
padding-top: 4px;
}
body.wonda-site .wonda-testimonial__avatar {
width: 42px;
height: 42px;
border-radius: 50%;
background: linear-gradient(135deg, #FF2A92 0%, #E60072 100%);
color: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
letter-spacing: .02em;
flex-shrink: 0;
box-shadow: 0 4px 10px -4px rgba(255, 0, 126, .45);
}
body.wonda-site .wonda-testimonial__who {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
body.wonda-site .wonda-testimonial__who strong {
font-size: 14px;
font-weight: 700;
color: #1c1c3c;
line-height: 1.25;
}
body.wonda-site .wonda-testimonial__who small {
font-size: 12px;
color: #64748b;
line-height: 1.3;
}
@media (max-width: 900px) {
body.wonda-site .wonda-testimonials {
grid-template-columns: 1fr;
gap: 14px;
}
body.wonda-site .wonda-testimonial {
padding: 24px 22px 22px;
border-radius: 16px;
}
body.wonda-site .wonda-testimonial__quote { font-size: 14.5px; }
body.wonda-site .wonda-testimonial::before {
font-size: 78px;
top: -8px;
left: 14px;
}
}
/* ═══════════════════════════════════════════════════════════════
WONDA_STEPS_RICH
Bigger numbered badges, bolder titles, and a connector line
between steps on desktop so the section reads as a sequence
rather than three unrelated boxes.
Pure CSS. Scoped to body.wonda-site. No layout override.
================================================================ */
/* ---------- Bigger, rounder numbered badge ---------- */
body.wonda-site .wonda-step::before {
width: 56px;
height: 56px;
border-radius: 18px;
font-size: 20px;
font-weight: 800;
letter-spacing: -0.01em;
box-shadow:
0 1px 2px rgba(255, 0, 126, .18),
0 12px 24px -10px rgba(255, 0, 126, .55);
transition: transform .18s ease, box-shadow .18s ease;
}
/* ---------- Step becomes a subtle card ---------- */
body.wonda-site .wonda-step {
padding: 32px 26px 28px;
padding-top: 96px; /* clear the absolutely-positioned badge */
background: #ffffff;
border: 1px solid rgba(28, 28, 60, .08);
border-radius: 18px;
position: relative;
overflow: visible; /* keep the connector visible */
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body.wonda-site .wonda-step:hover {
transform: translateY(-3px);
border-color: rgba(28, 28, 60, .16);
box-shadow:
0 1px 2px rgba(15, 23, 42, .04),
0 18px 38px -22px rgba(28, 28, 60, .28);
}
body.wonda-site .wonda-step:hover::before {
transform: scale(1.05);
box-shadow:
0 1px 2px rgba(255, 0, 126, .22),
0 16px 32px -12px rgba(255, 0, 126, .65);
}
/* Badge sits inside the card now (top-left with a 26px gutter) */
body.wonda-site .wonda-step::before {
top: 26px;
left: 26px;
}
/* ---------- Step title: bolder, slightly bigger ---------- */
body.wonda-site .wonda-step__title {
font-size: 20px;
font-weight: 800;
letter-spacing: -0.016em;
line-height: 1.25;
margin: 0 0 10px;
}
body.wonda-site .wonda-step__text {
font-size: 15px;
line-height: 1.62;
color: #64748b;
margin: 0;
}
body.wonda-site .wonda-step__text code {
background: rgba(255, 0, 126, .07);
color: #E60072;
border: 0;
padding: 1px 6px;
border-radius: 5px;
font-size: 12.5px;
}
/* ---------- Connector line between steps on desktop ---------- */
/* A soft pink line runs from the right edge of one card to the
left edge of the next, passing behind the gap between them. */
@media (min-width: 801px) {
body.wonda-site .wonda-step:not(:last-child)::after {
content: '';
position: absolute;
top: 54px; /* aligned with badge centre */
left: calc(100% + 2px);
width: calc(32px - 4px); /* fills the 32px grid gap */
height: 2px;
background: linear-gradient(
90deg,
rgba(255, 0, 126, .30) 0%,
rgba(255, 0, 126, .10) 60%,
rgba(255, 0, 126, .02) 100%
);
border-radius: 1px;
pointer-events: none;
}
/* A tiny dot at the far end of the connector, like a bead */
body.wonda-site .wonda-step:not(:last-child)::after {
box-shadow: none;
}
body.wonda-site .wonda-step:not(:last-child) {
/* Needed so the ::after can position itself relative to the
grid cell even with overflow: visible */
isolation: isolate;
}
}
/* ---------- Mobile: badge over the title, no connector ---------- */
@media (max-width: 800px) {
body.wonda-site .wonda-step {
padding: 26px 22px 24px;
padding-top: 88px;
}
body.wonda-site .wonda-step::before {
width: 48px;
height: 48px;
border-radius: 15px;
font-size: 17px;
top: 22px;
left: 22px;
}
body.wonda-site .wonda-step__title { font-size: 18px; }
body.wonda-site .wonda-step__text { font-size: 14.5px; }
}
/* ---------- The section the steps live in gets a touch more space
so the cards breathe ---------- */
body.wonda-site .wonda-steps {
gap: 32px;
}
@media (max-width: 800px) {
body.wonda-site .wonda-steps { gap: 16px; }
}
/* ═══════════════════════════════════════════════════════════════
WONDA_TESTIMONIAL_STARS + WONDA_STEP_ICON
Font Awesome stars above each testimonial quote, small icon
beside each step title.
================================================================ */
/* ---- Testimonials: 5 amber stars ---- */
body.wonda-site .wonda-testimonial__stars {
display: flex;
gap: 3px;
color: #f59e0b; /* amber */
margin-bottom: 4px;
align-items: center;
}
body.wonda-site .wonda-testimonial__stars svg {
width: 13px;
height: 13px;
display: block;
fill: currentColor;
filter: drop-shadow(0 1px 0 rgba(245, 158, 11, .18));
}
/* Testimonial layout: quote first, then stars, then meta.
Reorder so stars sit above the quote for a classic review look. */
body.wonda-site .wonda-testimonial {
/* grid gives us full control without touching the DOM order */
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"stars"
"quote"
"meta";
gap: 14px;
padding: 26px 26px 24px;
}
body.wonda-site .wonda-testimonial__stars { grid-area: stars; margin-bottom: 0; }
body.wonda-site .wonda-testimonial__quote { grid-area: quote; }
body.wonda-site .wonda-testimonial__meta { grid-area: meta; margin-top: 0; }
/* Move the decorative quote mark so it does not clash with stars */
body.wonda-site .wonda-testimonial::before {
top: 42px;
left: 22px;
font-size: 68px;
opacity: .55;
}
/* ---- Steps: small icon before the title ---- */
body.wonda-site .wonda-step__title {
display: flex;
align-items: center;
gap: 10px;
}
body.wonda-site .wonda-step__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 9px;
background: linear-gradient(135deg, rgba(255, 0, 126, .10) 0%, rgba(255, 0, 126, .04) 100%);
color: #FF007E;
flex-shrink: 0;
}
body.wonda-site .wonda-step__icon svg {
width: 15px;
height: 15px;
display: block;
fill: currentColor;
}
@media (max-width: 800px) {
body.wonda-site .wonda-testimonial {
padding: 22px 20px 20px;
gap: 12px;
}
body.wonda-site .wonda-step__icon {
width: 26px;
height: 26px;
border-radius: 8px;
}
body.wonda-site .wonda-step__icon svg { width: 13px; height: 13px; }
}
/* ============================================================
WONDA_MOBILE_HEADER_RIGHT_V2
On mobile the nav is out of flow (fixed dropdown), so the inner
container has just two children: brand + actions. Pin the brand
to the left and the actions (Sign in button + hamburger) to the
right by pushing the actions with margin-left: auto.
============================================================ */
@media (max-width: 860px) {
.wonda-site-header__inner {
justify-content: space-between !important;
gap: 12px !important;
}
.wonda-site-header__actions {
margin-left: auto !important;
flex-shrink: 0 !important;
gap: 8px !important;
}
.wonda-site-header__btn--primary {
min-height: 40px !important;
padding: 9px 14px !important;
font-size: 13.5px !important;
}
.wonda-site-header__menu {
width: 40px !important;
height: 40px !important;
min-height: 40px !important;
}
}
/* ==== END WONDA_MOBILE_HEADER_RIGHT_V2 ==== */
/* ============================================================
WONDA_HEADER_THEME_LOGO_CSS
wrapper for the guest header brand — matches the
sizing the old ![]()
had, and keeps the flex baseline.
============================================================ */
.wonda-site-header__brand-picture {
display: inline-flex;
align-items: center;
line-height: 0;
max-width: 100%;
}
.wonda-site-header__brand-picture img {
max-height: 32px;
width: auto;
max-width: 180px;
object-fit: contain;
display: block;
}
@media (max-width: 860px) {
.wonda-site-header__brand-picture img { max-height: 26px; max-width: 140px; }
}
/* ==== END WONDA_HEADER_THEME_LOGO_CSS ==== */
/* ============================================================
WONDA_HEADER_THEME_LOGO_V2_CSS
Guest header brand img sizing.
============================================================ */
#wonda-site-brand-img {
max-height: 32px;
width: auto;
max-width: 180px;
object-fit: contain;
display: block;
}
@media (max-width: 860px) {
#wonda-site-brand-img { max-height: 26px; max-width: 140px; }
}
/* ==== END WONDA_HEADER_THEME_LOGO_V2_CSS ==== */
/* ============================================================
WONDA_FEATURE_SHOTS
Real screenshot images replacing the fake widget mockups
in the alternating feature rows on /features (and /).
============================================================ */
.wonda-alt__visual {
position: relative;
width: 100%;
}
.wonda-feature-shot {
width: 100%;
max-width: 520px;
height: auto;
display: block;
margin: 0 auto;
border-radius: 18px;
background: #f1f5f9;
box-shadow:
0 1px 2px rgba(15, 23, 42, .05),
0 30px 60px -30px rgba(28, 28, 60, .35);
border: 1px solid rgba(28, 28, 60, .06);
/* crispness on retina */
image-rendering: -webkit-optimize-contrast;
}
/* Slightly tighter on desktop so screenshots don't tower over text */
@media (min-width: 901px) {
.wonda-feature-shot { max-width: 560px; }
}
/* Dark mode */
html[data-theme="dark"] .wonda-feature-shot {
background: #0f172a;
border-color: rgba(255, 255, 255, .06);
box-shadow:
0 1px 2px rgba(0, 0, 0, .4),
0 30px 60px -30px rgba(0, 0, 0, .8);
}
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) .wonda-feature-shot {
background: #0f172a;
border-color: rgba(255, 255, 255, .06);
box-shadow:
0 1px 2px rgba(0, 0, 0, .4),
0 30px 60px -30px rgba(0, 0, 0, .8);
}
}
/* Mobile — a touch smaller, no giant shadow */
@media (max-width: 900px) {
.wonda-feature-shot {
max-width: 100%;
border-radius: 14px;
box-shadow:
0 1px 2px rgba(15, 23, 42, .05),
0 14px 28px -16px rgba(28, 28, 60, .28);
}
}
/* ============================================================
WONDA_FEATURE_SHOTS_TOGGLE
Every feature row can carry a light and a dark screenshot.
The head.php bootstrap ALWAYS sets html[data-theme] to
"dark" or "light", so this only needs to toggle which ![]()
is visible — no JS, no flicker on theme switch beyond the
one-time image load.
============================================================ */
.wonda-feature-shot {
width: 100%;
max-width: 560px;
height: auto;
display: block;
margin: 0 auto;
border-radius: 18px;
background: #f1f5f9;
border: 1px solid rgba(28, 28, 60, .06);
box-shadow:
0 1px 2px rgba(15, 23, 42, .05),
0 30px 60px -30px rgba(28, 28, 60, .35);
image-rendering: -webkit-optimize-contrast;
}
/* Only one visible at a time. Dark is hidden by default. */
.wonda-feature-shot--dark {
display: none !important;
}
/* When the attribute is "dark", swap them. */
html[data-theme="dark"] .wonda-feature-shot--light {
display: none !important;
}
html[data-theme="dark"] .wonda-feature-shot--dark {
display: block !important;
background: #0f172a;
border-color: rgba(255, 255, 255, .06);
box-shadow:
0 1px 2px rgba(0, 0, 0, .4),
0 30px 60px -30px rgba(0, 0, 0, .8);
}
/* Mobile — smaller radius, softer shadow */
@media (max-width: 900px) {
.wonda-feature-shot {
max-width: 100%;
border-radius: 14px;
box-shadow:
0 1px 2px rgba(15, 23, 42, .05),
0 14px 28px -16px rgba(28, 28, 60, .28);
}
}
/* If a section still has --text-only (no screenshot pair uploaded),
keep the single-column layout that was added earlier. Nothing to
do — that rule is still present in site.css above this one. */
/* Wonda Guest Refresh R1 — marketing-only site chrome, footer and accessibility. */
.wonda-site-header__nav:focus-within { outline: none; }
.wonda-site-header__nav a:focus-visible,
.wonda-site-header__menu:focus-visible,
.wonda-site-header__btn:focus-visible,
.wonda-site-footer a:focus-visible,
.wonda-footer-top a:focus-visible,
.wonda-docs__code-actions button:focus-visible { outline: 3px solid #ff2a92; outline-offset: 3px; }
.wonda-site-header__nav a[aria-current="page"] { color: var(--site-pink); }
.wonda-site-header__btn, .wonda-price-card__cta, .wonda-home__cta, .wonda-form-submit { min-height: 42px; }
.wonda-site-header__inner { min-width: 0; }
.wonda-site-header__nav { min-width: 0; }
.wonda-site-footer { background: #10142c; color: #d7dbe9; }
.wonda-footer-top { background: #202348; border-bottom: 1px solid rgba(255,255,255,.1); }
.wonda-footer-top__content { max-width: var(--site-max); margin: auto; padding: 46px var(--site-pad); display: flex; justify-content: space-between; align-items: center; gap: 32px; }
.wonda-footer-top__label { color: #ff82ba; font-weight: 800; font-size: 11px; letter-spacing: .15em; }
.wonda-footer-top h2 { margin: 9px 0 8px; font-size: clamp(22px, 2.5vw, 31px); line-height: 1.2; color: #fff; letter-spacing: -.025em; }
.wonda-footer-top p { margin: 0; font-size: 14px; color: #cbd2eb; max-width: 62ch; }
.wonda-footer-top__actions { display: flex; gap: 15px; flex-wrap: wrap; align-items: center; flex-shrink: 0; }
.wonda-footer-top__button { background: #ff167f; border-radius: 9px; padding: 13px 19px; font-size: 13px; font-weight: 750; color: #fff !important; text-decoration: none; }
.wonda-footer-top__contact { font-size: 13px; color: #fff !important; text-decoration: none; font-weight: 600; }
.wonda-footer-top a:hover { text-decoration: underline; }
.wonda-site-footer__inner { grid-template-columns: minmax(240px,1.75fr) repeat(4,minmax(125px,1fr)); gap: 35px; padding-top: 60px; padding-bottom: 54px; }
.wonda-site-footer__col { min-width: 0; }
.wonda-site-footer__col h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .13em; margin: 0 0 19px; color: #9ea9c6; font-weight: 750; }
.wonda-site-footer__col a { color: #c8cee0; line-height: 1.4; font-size: 13px; padding: 6px 0; }
.wonda-site-footer__col a:hover { color: #fff; }
.wonda-footer-brand { display: inline-flex !important; gap: 5px; align-items: baseline; color: #fff !important; font-size: 25px !important; font-weight: 800; letter-spacing: -.045em; text-decoration: none; }
.wonda-footer-brand span { color: #ff429e; }
.wonda-site-footer__col--brand p { margin: 14px 0 0; max-width: 34ch; color: #aeb8d1; }
.wonda-site-footer__col--brand .wonda-footer-region { color: #e3e7f4; font-size: 12px; margin-top: 23px; }
.wonda-site-footer__col--brand .wonda-footer-email { display: inline-block; margin-top: 9px; color: #fff; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
.wonda-site-footer__base { border-top: 1px solid rgba(255,255,255,.11); color: #aeb8d1; }
.wonda-footer-dot { padding: 0 8px; }
.wonda-proof { border-bottom: 1px solid #e5e9f1; background: #f8f9fc; }
.wonda-proof__inner { max-width: var(--site-max); margin: 0 auto; padding: 28px var(--site-pad); display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 27px; }
.wonda-proof__inner > div { padding-left: 20px; border-left: 3px solid #efb7d1; min-width: 0; }
.wonda-proof strong { font-size: 14px; display: block; margin-bottom: 4px; color: #1c2340; }
.wonda-proof span { font-size: 13px; color: #657089; }
.wonda-example-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.wonda-example { padding: 29px 25px; background: #f8f9fc; border: 1px solid #e2e6ef; border-radius: 14px; }
.wonda-example > span { color: #be2570; letter-spacing: .13em; font-size: 10px; font-weight: 800; }
.wonda-example h3 { font-size: 18px; color: #192340; margin: 14px 0 8px; }
.wonda-example p { font-size: 14px; line-height: 1.7; color: #67738d; margin: 0; }
.wonda-demo-explainer { font-size: 11px; letter-spacing: .02em; text-align: center; color: #66748f; margin: 0 0 9px; }
.wonda-pricing-empty { grid-column: 1/-1; padding: 36px; background: #f8f9fc; border: 1px solid #e1e6f0; border-radius: 12px; text-align: center; }
.wonda-pricing-empty h3 { margin: 0 0 8px; }
.wonda-pricing-empty p { margin: 0; }
.wonda-plan-scroll-hint { display:none; font-size: 12px; color: #64748b; margin: 10px 0; }
.wonda-docs__code-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 8px; font-size: 12px; color: #596883; }
.wonda-docs__code-actions button { border: 1px solid #b9c1d1; border-radius: 7px; padding: 7px 12px; background: #fff; color: #263049; cursor: pointer; font-size: 12px; font-weight: 650; }
.wonda-signup-approval { background: #f2f7ff; padding: 15px 18px; border: 1px solid #d9e4fc; border-radius: 10px; margin: 0 0 18px; color: #263b5d; }
.wonda-signup-approval strong { display:block; font-size: 13px; margin-bottom: 4px; }
.wonda-signup-approval p { margin:0; font-size: 12.5px; line-height: 1.6; }
.wonda-notice:focus { outline: 2px solid #dd267e; outline-offset: 3px; }
@media (max-width: 1080px) {
.wonda-site-footer__inner { grid-template-columns: repeat(4,minmax(0,1fr)); }
.wonda-site-footer__col--brand { grid-column: 1/-1; }
.wonda-footer-top__content { align-items: flex-start; }
}
@media (max-width: 860px) {
.wonda-site-header__nav { visibility: hidden; }
.wonda-site-header.is-open .wonda-site-header__nav { visibility: visible; }
.wonda-footer-top__content { flex-direction: column; align-items: flex-start; padding: 34px 20px; }
.wonda-site-footer__inner { grid-template-columns: repeat(2,minmax(0,1fr)); }
.wonda-proof__inner { grid-template-columns: 1fr; gap: 15px; padding: 24px 20px; }
.wonda-example-grid { grid-template-columns: 1fr; }
.wonda-plan-scroll-hint { display: block; }
}
@media (min-width: 861px) {
.wonda-site-header__nav { visibility: visible !important; }
}
@media (max-width: 480px) {
.wonda-site-footer__inner { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px 18px; }
.wonda-footer-top__actions { width: 100%; }
.wonda-footer-top__button { width: 100%; justify-content:center; display: inline-flex; }
}
/* END site.css */
/* BEGIN widget-demo.css */
/* Wonda AI — static widget demo stylesheet.
*
* Generated from public/widget/widget.css. Do not edit directly.
* To regenerate: php scripts/rebuild-widget-demo-css.php
*
* The only change is that `#wonda-root` becomes `.wonda-demo`, so
* the exact widget styling can render multiple times on one page
* without the fixed-position rules of the live widget firing.
*/
/* Wonda AI — chat widget styles. All selectors prefixed with .wonda-demo. */
.wonda-demo {
all: initial;
display: block;
position: fixed;
z-index: 2147483000;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.5;
color: #0f172a;
text-align: left;
pointer-events: none;
}
.wonda-demo *, .wonda-demo *::before, .wonda-demo *::after { box-sizing: border-box; }
.wonda-demo.wonda-br { bottom: 20px; right: 20px; }
.wonda-demo.wonda-bl { bottom: 20px; left: 20px; }
.wonda-demo.wonda-tr { top: 20px; right: 20px; }
.wonda-demo.wonda-tl { top: 20px; left: 20px; }
.wonda-demo .wonda-root-inner { pointer-events: none; position: relative; }
.wonda-demo .wonda-launcher {
width: 56px; height: 56px;
border-radius: 28px;
background: var(--wonda-accent, #FF007E);
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
cursor: pointer;
box-shadow: 0 6px 24px rgba(0,0,0,.18);
transition: transform .15s ease, box-shadow .15s ease;
border: 0;
padding: 0;
position: relative;
pointer-events: auto;
font-family: inherit;
overflow: hidden;
}
.wonda-demo .wonda-launcher:hover { transform: scale(1.05); box-shadow: 0 8px 30px rgba(0,0,0,.22); }
.wonda-demo .wonda-launcher:active { transform: scale(.97); }
.wonda-demo .wonda-launcher svg { width: 26px; height: 26px; }
.wonda-demo .wonda-launcher img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wonda-demo .wonda-launcher.wonda-pulse::before {
content: '';
position: absolute;
inset: -4px;
border-radius: 32px;
border: 2px solid var(--wonda-accent, #FF007E);
opacity: 0;
animation: wonda-pulse 2.4s ease-out infinite;
pointer-events: none;
}
@keyframes wonda-pulse {
0% { transform: scale(.92); opacity: .55; }
70% { transform: scale(1.18); opacity: 0; }
100% { transform: scale(1.18); opacity: 0; }
}
.wonda-demo .wonda-launcher__badge {
position: absolute; top: -4px; right: -4px;
min-width: 20px; height: 20px;
background: #ef4444; color: #fff;
border-radius: 10px; font-size: 11px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
padding: 0 6px; box-shadow: 0 2px 6px rgba(0,0,0,.2);
pointer-events: none; line-height: 1;
}
/* ============================================================
Launcher group — teaser + launcher on one inline row
============================================================ */
.wonda-demo .wonda-launcher-group {
display: flex;
align-items: center;
gap: 12px;
flex-direction: row;
pointer-events: none;
}
.wonda-demo.wonda-bl .wonda-launcher-group,
.wonda-demo.wonda-tl .wonda-launcher-group {
flex-direction: row-reverse;
}
/* ============================================================
Teaser bubble — inline, sits next to the launcher
============================================================ */
.wonda-demo .wonda-teaser {
display: none;
align-items: center;
gap: 8px;
padding: 12px 14px 12px 16px;
max-width: 320px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 14px;
box-shadow: 0 10px 30px -10px rgba(0,0,0,.15);
font-size: 13px;
line-height: 1.4;
color: #0f172a;
cursor: pointer;
pointer-events: auto;
flex-shrink: 0;
animation: wonda-teaser-pop-right .3s ease;
}
.wonda-demo.wonda-bl .wonda-teaser,
.wonda-demo.wonda-tl .wonda-teaser {
animation-name: wonda-teaser-pop-left;
}
.wonda-demo .wonda-teaser__text {
flex: 1;
min-width: 0;
overflow-wrap: anywhere;
}
.wonda-demo .wonda-teaser__close {
background: transparent;
border: 0;
color: #94a3b8;
font-size: 16px;
line-height: 1;
padding: 0 2px;
margin-left: 2px;
cursor: pointer;
flex-shrink: 0;
pointer-events: auto;
}
.wonda-demo .wonda-teaser__close:hover { color: #475569; }
/* CSAT card keeps the vertical pop keyframe */
@keyframes wonda-teaser-pop {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* Inline teaser slides in horizontally from the launcher */
@keyframes wonda-teaser-pop-right {
from { opacity: 0; transform: translateX(8px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes wonda-teaser-pop-left {
from { opacity: 0; transform: translateX(-8px); }
to { opacity: 1; transform: translateX(0); }
}
.wonda-demo .wonda-window {
position: absolute;
width: 380px;
height: min(80vh, 620px);
background: #fff;
border-radius: 16px;
box-shadow: 0 20px 50px -10px rgba(0,0,0,.25);
display: none;
flex-direction: column;
overflow: hidden;
border: 1px solid #e5e7eb;
pointer-events: auto;
font-family: inherit;
color: #0f172a;
}
.wonda-demo.wonda-br .wonda-window,
.wonda-demo.wonda-tr .wonda-window { right: 0; }
.wonda-demo.wonda-bl .wonda-window,
.wonda-demo.wonda-tl .wonda-window { left: 0; }
.wonda-demo.wonda-br .wonda-window,
.wonda-demo.wonda-bl .wonda-window { bottom: 72px; }
.wonda-demo.wonda-tr .wonda-window,
.wonda-demo.wonda-tl .wonda-window { top: 72px; }
.wonda-demo .wonda-window.wonda-open { display: flex; }
.wonda-demo .wonda-window__header {
background: var(--wonda-accent, #FF007E);
color: #fff;
padding: 12px 14px;
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
position: relative;
}
.wonda-demo .wonda-window__header strong { font-size: 15px; font-weight: 600; color: #fff; }
.wonda-demo .wonda-window__header-logo { height: 22px; width: auto; max-width: 140px; }
.wonda-demo .wonda-window__header-spacer { flex: 1; }
.wonda-demo .wonda-window__header-btn {
background: rgba(255,255,255,.15);
border: 0;
padding: 0;
color: #fff;
width: 32px; height: 32px;
border-radius: 16px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.wonda-demo .wonda-window__header-btn:hover { background: rgba(255,255,255,.25); }
.wonda-demo .wonda-window__header-btn svg { width: 16px; height: 16px; }
.wonda-demo .wonda-menu {
position: absolute;
top: 46px;
right: 10px;
min-width: 180px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 10px;
box-shadow: 0 12px 30px -8px rgba(0,0,0,.2);
overflow: hidden;
z-index: 5;
display: none;
}
.wonda-demo .wonda-menu.wonda-open { display: block; }
.wonda-demo .wonda-menu a {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
color: #0f172a;
font-size: 13px;
text-decoration: none;
cursor: pointer;
}
.wonda-demo .wonda-menu a:hover { background: #f8fafc; }
.wonda-demo .wonda-menu a svg { width: 14px; height: 14px; color: #64748b; }
.wonda-demo .wonda-messages {
flex: 1;
overflow-y: auto;
padding: 16px;
background: #f8fafc;
display: flex;
flex-direction: column;
gap: 12px;
min-height: 0;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.wonda-demo .wonda-message { max-width: 88%; display: flex; flex-direction: column; }
.wonda-demo .wonda-from-bot { align-self: flex-start; }
.wonda-demo .wonda-from-user { align-self: flex-end; align-items: flex-end; }
.wonda-demo .wonda-bubble {
padding: 10px 14px;
border-radius: 16px;
font-size: 14px;
line-height: 1.5;
word-wrap: break-word;
overflow-wrap: anywhere;
}
.wonda-demo .wonda-from-bot .wonda-bubble {
background: #fff;
border: 1px solid #e5e7eb;
border-bottom-left-radius: 4px;
}
.wonda-demo .wonda-from-user .wonda-bubble {
background: var(--wonda-accent, #FF007E);
color: #fff;
border-bottom-right-radius: 4px;
}
.wonda-demo .wonda-message-body { white-space: pre-wrap; }
.wonda-demo .wonda-message-body p { margin: 0 0 8px; }
.wonda-demo .wonda-message-body p:last-child { margin-bottom: 0; }
.wonda-demo .wonda-message-body h3,
.wonda-demo .wonda-message-body h4 { margin: 8px 0 4px; font-size: 1em; font-weight: 700; }
.wonda-demo .wonda-message-body ul { margin: 6px 0; padding-left: 20px; }
.wonda-demo .wonda-message-body li { margin: 2px 0; }
.wonda-demo .wonda-message-body code {
background: rgba(0,0,0,.06);
padding: 1px 5px;
border-radius: 4px;
font-family: ui-monospace, Menlo, Monaco, Consolas, monospace;
font-size: .9em;
}
.wonda-demo .wonda-message-body pre {
background: #0f172a;
color: #e2e8f0;
padding: 10px 12px;
border-radius: 8px;
overflow-x: auto;
font-size: 12px;
margin: 6px 0;
}
.wonda-demo .wonda-message-body pre code { background: transparent; padding: 0; color: inherit; }
.wonda-demo .wonda-from-user .wonda-message-body code { background: rgba(255,255,255,.18); }
.wonda-demo .wonda-message-body a { color: inherit; text-decoration: underline; }
.wonda-demo .wonda-from-bot .wonda-message-body a { color: var(--wonda-accent, #FF007E); }
.wonda-demo .wonda-message-meta {
display: flex; align-items: center; gap: 8px;
margin-top: 6px; font-size: 11px; color: #94a3b8; min-height: 20px;
}
.wonda-demo .wonda-from-user .wonda-message-meta { color: rgba(255,255,255,.75); }
.wonda-demo .wonda-message-actions { display: flex; gap: 4px; opacity: 1; transition: opacity .12s; }
.wonda-demo .wonda-action {
background: transparent; border: 0; padding: 3px; cursor: pointer;
color: #94a3b8; border-radius: 4px;
display: inline-flex; align-items: center; justify-content: center;
transition: color .12s, background .12s;
}
.wonda-demo .wonda-action:hover { background: rgba(0,0,0,.06); color: #475569; }
.wonda-demo .wonda-action svg { width: 15px; height: 15px; }
.wonda-demo .wonda-action--done { color: #16a34a; }
.wonda-demo .wonda-action--flash { color: #16a34a !important; }
.wonda-demo .wonda-menu-section {
border-top: 1px solid #FFE5F2;
padding: 6px 0;
}
.wonda-demo .wonda-menu-section-title {
padding: 4px 14px 2px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .6px;
color: #94a3b8;
}
.wonda-demo .wonda-menu-theme-item {
display: flex;
justify-content: space-between;
}
.wonda-demo .wonda-menu-theme-check {
color: var(--wonda-accent, #FF007E);
font-weight: 700;
}
.wonda-demo.wonda-dark .wonda-menu-section {
border-top-color: #334155;
}
.wonda-demo.wonda-dark .wonda-menu-section-title { color: #64748b; }
.wonda-demo .wonda-action[disabled] { cursor: default; opacity: .55; }
.wonda-demo .wonda-wa-cta {
display: flex; flex-direction: column; align-items: center;
margin-top: 10px; padding-top: 10px;
border-top: 1px dashed #e5e7eb;
}
.wonda-demo .wonda-wa-cta small { color: #94a3b8; font-size: 11px; margin-bottom: 6px; }
.wonda-demo .wonda-wa-cta a {
display: inline-flex; align-items: center; gap: 6px;
background: #25D366; color: #fff;
padding: 6px 14px; border-radius: 30px;
text-decoration: none; font-weight: 600; font-size: 12px;
}
.wonda-demo .wonda-wa-cta a:hover { background: #1ebe5c; color: #fff; text-decoration: none; }
.wonda-demo .wonda-wa-cta svg { width: 14px; height: 14px; }
.wonda-demo .wonda-typing-cursor {
display: inline-block; width: 2px; height: 1em;
background: currentColor; vertical-align: -2px; margin-left: 2px;
animation: wonda-cursor-blink 1s steps(1) infinite;
}
@keyframes wonda-cursor-blink { 50% { opacity: 0; } }
.wonda-demo .wonda-feedback-box {
background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
padding: 10px; margin-top: 6px; width: 100%;
}
.wonda-demo .wonda-feedback-box textarea {
width: 100%; border: 1px solid #e5e7eb; border-radius: 6px;
padding: 6px 8px; font-size: 12px; font-family: inherit;
resize: vertical; min-height: 60px;
}
.wonda-demo .wonda-feedback-actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 6px; }
.wonda-demo .wonda-feedback-skip,
.wonda-demo .wonda-feedback-send {
padding: 4px 12px; border-radius: 6px; font-size: 12px; cursor: pointer;
border: 1px solid #e5e7eb; background: #fff; font-family: inherit;
}
.wonda-demo .wonda-feedback-send {
background: var(--wonda-accent, #FF007E); color: #fff;
border-color: var(--wonda-accent, #FF007E); font-weight: 600;
}
.wonda-demo .wonda-typing-wrap {
display: inline-flex;
align-items: center;
gap: 8px;
}
.wonda-demo .wonda-typing-label {
font-size: 13px;
color: #64748b;
line-height: 1;
}
.wonda-demo.wonda-dark .wonda-typing-label { color: #94a3b8; }
.wonda-demo .wonda-typing { display: inline-flex; gap: 5px; padding: 4px 2px; }
.wonda-demo .wonda-typing span {
width: 6px; height: 6px; border-radius: 3px;
background: #94a3b8; display: inline-block;
animation: wonda-bounce 1.2s infinite;
}
.wonda-demo .wonda-typing span:nth-child(2) { animation-delay: .15s; }
.wonda-demo .wonda-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes wonda-bounce {
0%, 60%, 100% { transform: translateY(0); opacity: .5; }
30% { transform: translateY(-4px); opacity: 1; }
}
.wonda-demo .wonda-prompts {
display: flex; flex-wrap: wrap; gap: 6px;
padding: 0 16px 12px; background: #f8fafc;
}
.wonda-demo .wonda-prompt {
background: #fff; border: 1px solid #e5e7eb; color: #0f172a;
padding: 6px 12px; border-radius: 16px; font-size: 12px;
cursor: pointer; font-family: inherit;
}
.wonda-demo .wonda-prompt:hover { background: #eef2f7; }
.wonda-demo .wonda-lead {
background: #fff; border: 1px solid #e5e7eb; border-radius: 14px;
padding: 14px; margin: 0 4px; align-self: flex-start; max-width: 90%;
}
.wonda-demo .wonda-lead-title-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 6px;
}
.wonda-demo .wonda-lead-title { font-size: 13px; font-weight: 600; margin: 0; }
.wonda-demo .wonda-lead-close {
background: transparent;
border: 0;
color: #94a3b8;
font-size: 18px;
line-height: 1;
cursor: pointer;
padding: 0 4px;
border-radius: 6px;
font-family: inherit;
}
.wonda-demo .wonda-lead-close:hover { color: #475569; background: #f1f5f9; }
.wonda-demo .wonda-lead label { display: block; font-size: 12px; color: #64748b; margin: 8px 0 4px; }
.wonda-demo .wonda-lead input {
width: 100%; padding: 8px 12px; border: 1px solid #e5e7eb; border-radius: 8px;
font-family: inherit; font-size: 14px; background: #fff; color: #0f172a;
}
.wonda-demo .wonda-lead input:focus { outline: none; border-color: var(--wonda-accent, #FF007E); }
.wonda-demo .wonda-lead button {
margin-top: 10px; padding: 8px 16px;
background: var(--wonda-accent, #FF007E); color: #fff; border: 0;
border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 13px;
width: 100%; font-family: inherit;
}
.wonda-demo .wonda-lead button[disabled] { opacity: .6; cursor: not-allowed; }
/* --- CSAT card --- */
.wonda-demo .wonda-csat {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 14px;
padding: 16px;
align-self: stretch;
max-width: 100%;
box-shadow: 0 2px 6px rgba(0,0,0,.04);
animation: wonda-teaser-pop .3s ease;
}
.wonda-demo .wonda-csat-title {
font-size: 13px;
font-weight: 600;
color: #1c1c3c;
margin-bottom: 12px;
text-align: center;
}
.wonda-demo .wonda-csat-stars {
display: flex;
justify-content: center;
gap: 6px;
}
.wonda-demo .wonda-csat-star {
background: transparent;
border: 0;
font-size: 28px;
line-height: 1;
color: #d1d5db;
cursor: pointer;
padding: 4px;
transition: color .12s, transform .12s;
font-family: inherit;
}
.wonda-demo .wonda-csat-star:hover,
.wonda-demo .wonda-csat-star.wonda-active {
color: #f59e0b;
transform: scale(1.1);
}
.wonda-demo .wonda-csat-thanks {
text-align: center;
font-size: 13px;
color: #15803d;
padding: 8px 0;
}
.wonda-demo .wonda-modal-backdrop {
position: absolute;
top: 56px; left: 0; right: 0; bottom: 0;
background: rgba(15,23,42,.45);
display: flex; align-items: center; justify-content: center;
padding: 20px; z-index: 10;
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
}
.wonda-demo .wonda-modal {
background: #fff; border-radius: 14px; padding: 20px;
max-width: 280px; width: 100%;
box-shadow: 0 20px 40px -12px rgba(0,0,0,.3);
text-align: center; font-size: 13px; line-height: 1.5;
}
.wonda-demo .wonda-modal h3 { margin: 0 0 8px; font-size: 15px; color: #1c1c3c; }
.wonda-demo .wonda-modal p { margin: 0 0 10px; color: #475569; }
.wonda-demo .wonda-modal a { color: var(--wonda-accent, #FF007E); }
.wonda-demo .wonda-modal button {
background: var(--wonda-accent, #FF007E); border: 0;
padding: 8px 18px; border-radius: 8px; color: #fff;
font-weight: 600; font-size: 13px; cursor: pointer;
margin-top: 6px; font-family: inherit;
}
.wonda-demo .wonda-toast {
position: absolute; bottom: 90px; left: 50%;
transform: translateX(-50%);
background: #1e293b; color: #fff; padding: 8px 16px;
border-radius: 40px; font-size: 12px; font-weight: 500;
box-shadow: 0 8px 20px rgba(0,0,0,.2);
opacity: 0; transition: opacity .2s ease, transform .2s ease;
pointer-events: none; white-space: nowrap; z-index: 20;
}
.wonda-demo .wonda-toast.wonda-show {
opacity: 1; transform: translateX(-50%) translateY(-4px);
}
.wonda-demo .wonda-composer {
padding: 12px 14px; background: #fff; border-top: 1px solid #e5e7eb;
display: flex; gap: 8px; align-items: flex-end; flex-shrink: 0; position: relative;
}
.wonda-demo.wonda-reconnecting .wonda-composer::before {
content: 'Reconnecting…';
position: absolute; top: -22px; left: 14px;
font-size: 11px; color: #b45309; background: #fffbeb;
padding: 2px 8px; border-radius: 8px; border: 1px solid #fde68a;
}
.wonda-demo .wonda-composer textarea {
flex: 1; border: 1px solid #e5e7eb; border-radius: 22px;
padding: 10px 16px; font-family: inherit; font-size: 14px;
resize: none; max-height: 120px; min-height: 42px;
line-height: 1.4; background: #f8fafc; color: #0f172a; width: 100%;
}
.wonda-demo .wonda-composer textarea:focus { outline: none; border-color: var(--wonda-accent, #FF007E); background: #fff; }
.wonda-demo .wonda-composer button {
width: 42px; height: 42px; border-radius: 21px; border: 0; padding: 0;
background: var(--wonda-accent, #FF007E); color: #fff;
cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.wonda-demo .wonda-composer button[disabled] { opacity: .5; cursor: not-allowed; }
.wonda-demo .wonda-composer button svg { width: 18px; height: 18px; }
.wonda-demo .wonda-footer {
text-align: center; font-size: 11px; color: #94a3b8;
padding: 0 0 10px; background: #fff; flex-shrink: 0;
}
.wonda-demo .wonda-footer a { color: #64748b; text-decoration: none; }
.wonda-demo .wonda-footer a:hover { text-decoration: underline; }
.wonda-demo.wonda-dark .wonda-window,
.wonda-demo.wonda-dark .wonda-footer,
.wonda-demo.wonda-dark .wonda-composer { background: #0f172a; border-color: #1e293b; }
.wonda-demo.wonda-dark .wonda-messages { background: #020617; }
.wonda-demo.wonda-dark .wonda-from-bot .wonda-bubble { background: #1e293b; border-color: #334155; color: #e2e8f0; }
.wonda-demo.wonda-dark .wonda-message-body code { background: rgba(255,255,255,.08); }
.wonda-demo.wonda-dark .wonda-composer textarea { background: #1e293b; border-color: #334155; color: #e2e8f0; }
.wonda-demo.wonda-dark .wonda-prompt { background: #1e293b; color: #cbd5e1; border-color: #334155; }
.wonda-demo.wonda-dark .wonda-teaser { background: #1e293b; border-color: #334155; color: #e2e8f0; }
.wonda-demo.wonda-dark .wonda-feedback-box { background: #1e293b; border-color: #334155; }
.wonda-demo.wonda-dark .wonda-feedback-box textarea { background: #0f172a; color: #e2e8f0; border-color: #334155; }
.wonda-demo.wonda-dark .wonda-lead { background: #1e293b; border-color: #334155; }
.wonda-demo.wonda-dark .wonda-lead input { background: #0f172a; color: #e2e8f0; border-color: #334155; }
.wonda-demo.wonda-dark .wonda-csat { background: #1e293b; border-color: #334155; }
.wonda-demo.wonda-dark .wonda-csat-title { color: #e2e8f0; }
.wonda-demo.wonda-dark .wonda-menu { background: #1e293b; border-color: #334155; }
.wonda-demo.wonda-dark .wonda-menu a { color: #e2e8f0; }
.wonda-demo.wonda-dark .wonda-menu a:hover { background: #334155; }
.wonda-demo.wonda-dark .wonda-modal { background: #1e293b; color: #e2e8f0; }
.wonda-demo.wonda-dark .wonda-modal h3 { color: #f1f5f9; }
.wonda-demo.wonda-dark .wonda-modal p { color: #cbd5e1; }
.wonda-demo.wonda-dark .wonda-action { color: #64748b; }
.wonda-demo.wonda-dark .wonda-action:hover { background: rgba(255,255,255,.06); color: #cbd5e1; }
@media (prefers-reduced-motion: reduce) {
.wonda-demo *, .wonda-demo *::before, .wonda-demo *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.wonda-demo .wonda-launcher.wonda-pulse::before { animation: none; opacity: 0; }
.wonda-demo .wonda-typing-cursor { animation: none; opacity: .4; }
}
@media (max-width: 480px) {
.wonda-demo.wonda-br { bottom: 12px; right: 12px; }
.wonda-demo.wonda-bl { bottom: 12px; left: 12px; }
.wonda-demo.wonda-tr { top: 12px; right: 12px; }
.wonda-demo.wonda-tl { top: 12px; left: 12px; }
.wonda-demo .wonda-window {
position: fixed;
top: 12px;
left: 12px;
right: 12px;
bottom: auto;
width: auto;
height: calc(var(--wonda-vh-px, 100vh) - 24px);
max-height: calc(100vh - 24px);
border-radius: 14px;
transition: height 0.15s ease;
}
.wonda-demo .wonda-launcher { width: 52px; height: 52px; }
.wonda-demo .wonda-teaser {
max-width: calc(100vw - 110px);
font-size: 12.5px;
padding: 10px 12px;
}
}
/* ============================================================
Phase 7.5 — Visual upgrade (corporate look + avatars)
============================================================ */
.wonda-demo {
--wonda-radius-lg: 20px;
--wonda-radius-md: 14px;
--wonda-radius-sm: 10px;
--wonda-radius-bubble: 18px;
--wonda-shadow-window: 0 24px 60px -20px rgba(15, 23, 42, .30), 0 12px 24px -12px rgba(15, 23, 42, .18);
--wonda-shadow-launcher: 0 10px 30px -8px rgba(0, 0, 0, .28), 0 4px 12px -4px rgba(0, 0, 0, .16);
--wonda-shadow-launcher-hover: 0 14px 36px -8px rgba(0, 0, 0, .32), 0 6px 16px -4px rgba(0, 0, 0, .20);
--wonda-border-soft: rgba(15, 23, 42, .06);
--wonda-text-primary: #0f172a;
--wonda-text-secondary: #64748b;
--wonda-surface-elevated: #ffffff;
--wonda-surface-canvas: #f7f9fc;
--wonda-avatar-size: 34px;
--wonda-header-height: 60px;
}
/* Launcher — squircle with richer depth */
.wonda-demo .wonda-launcher {
width: 60px;
height: 60px;
border-radius: 20px;
background: var(--wonda-accent, #FF007E);
background: linear-gradient(135deg,
var(--wonda-accent, #FF007E) 0%,
color-mix(in srgb, var(--wonda-accent, #FF007E) 78%, black) 100%);
box-shadow: var(--wonda-shadow-launcher);
transition: transform .18s ease, box-shadow .18s ease;
}
.wonda-demo .wonda-launcher:hover {
transform: translateY(-2px) scale(1.03);
box-shadow: var(--wonda-shadow-launcher-hover);
}
/* Window shell */
.wonda-demo .wonda-window {
width: 400px;
height: min(82vh, 660px);
border-radius: var(--wonda-radius-lg);
box-shadow: var(--wonda-shadow-window);
border: 1px solid var(--wonda-border-soft);
}
/* Header */
.wonda-demo .wonda-window__header {
padding: 14px 16px;
min-height: var(--wonda-header-height);
background: var(--wonda-accent, #FF007E);
background: linear-gradient(135deg,
var(--wonda-accent, #FF007E) 0%,
color-mix(in srgb, var(--wonda-accent, #FF007E) 72%, black) 100%);
border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.wonda-demo .wonda-window__header strong {
font-size: 15px;
font-weight: 600;
letter-spacing: .01em;
color: #fff;
}
.wonda-demo .wonda-window__header-btn {
width: 34px;
height: 34px;
border-radius: 10px;
background: rgba(255, 255, 255, .12);
}
.wonda-demo .wonda-window__header-btn:hover {
background: rgba(255, 255, 255, .22);
}
/* Messages canvas */
.wonda-demo .wonda-messages {
padding: 20px 18px 16px;
gap: 14px;
background: var(--wonda-surface-canvas);
}
/* Message row — avatar + bubble */
.wonda-demo .wonda-message {
display: flex;
flex-direction: row;
align-items: flex-end;
gap: 10px;
max-width: 92%;
}
.wonda-demo .wonda-from-user {
flex-direction: row-reverse;
}
/* Avatar */
.wonda-demo .wonda-avatar {
width: var(--wonda-avatar-size);
height: var(--wonda-avatar-size);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
align-self: flex-end;
box-shadow: 0 2px 6px rgba(15, 23, 42, .08);
}
.wonda-demo .wonda-avatar svg {
width: 18px;
height: 18px;
display: block;
}
.wonda-demo .wonda-avatar--bot {
background: var(--wonda-accent, #FF007E);
background: linear-gradient(135deg,
var(--wonda-accent, #FF007E) 0%,
color-mix(in srgb, var(--wonda-accent, #FF007E) 75%, black) 100%);
color: #fff;
}
.wonda-demo .wonda-avatar--user {
background: #fff;
border: 1px solid var(--wonda-border-soft);
color: var(--wonda-text-secondary);
}
/* Bubble — refined */
.wonda-demo .wonda-bubble {
background: #fff;
border: 1px solid var(--wonda-border-soft);
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
padding: 12px 14px;
border-radius: var(--wonda-radius-bubble);
border-bottom-left-radius: 6px;
}
.wonda-demo .wonda-from-user .wonda-bubble {
background: var(--wonda-accent, #FF007E);
background: linear-gradient(135deg,
var(--wonda-accent, #FF007E) 0%,
color-mix(in srgb, var(--wonda-accent, #FF007E) 82%, black) 100%);
color: #fff;
border: 0;
border-bottom-left-radius: var(--wonda-radius-bubble);
border-bottom-right-radius: 6px;
box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--wonda-accent, #FF007E) 55%, transparent);
}
.wonda-demo .wonda-message-body {
font-size: 14px;
line-height: 1.55;
}
.wonda-demo .wonda-message-meta {
margin-top: 8px;
min-height: 16px;
opacity: .92;
}
.wonda-demo .wonda-from-user .wonda-message-meta {
color: rgba(255, 255, 255, .82);
}
.wonda-demo .wonda-action {
width: 24px;
height: 24px;
border-radius: 6px;
}
/* Typing */
.wonda-demo .wonda-typing-wrap {
padding: 3px 2px;
}
.wonda-demo .wonda-typing-label {
font-size: 13px;
font-weight: 500;
color: var(--wonda-text-secondary);
}
/* Composer */
.wonda-demo .wonda-composer {
padding: 14px 16px 16px;
background: #fff;
border-top: 1px solid var(--wonda-border-soft);
gap: 10px;
}
.wonda-demo .wonda-composer textarea {
background: var(--wonda-surface-canvas);
border: 1px solid var(--wonda-border-soft);
border-radius: 14px;
padding: 11px 16px;
font-size: 14px;
transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.wonda-demo .wonda-composer textarea:focus {
background: #fff;
border-color: var(--wonda-accent, #FF007E);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--wonda-accent, #FF007E) 14%, transparent);
outline: none;
}
.wonda-demo .wonda-composer button {
background: var(--wonda-accent, #FF007E);
background: linear-gradient(135deg,
var(--wonda-accent, #FF007E) 0%,
color-mix(in srgb, var(--wonda-accent, #FF007E) 78%, black) 100%);
box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--wonda-accent, #FF007E) 55%, transparent);
width: 44px;
height: 44px;
border-radius: 14px;
transition: transform .1s ease, box-shadow .15s ease;
}
.wonda-demo .wonda-composer button:hover:not([disabled]) {
transform: translateY(-1px);
}
.wonda-demo .wonda-composer button:active:not([disabled]) {
transform: translateY(0) scale(.97);
}
/* Quick prompts */
.wonda-demo .wonda-prompt {
padding: 8px 14px;
border-radius: 12px;
font-size: 12.5px;
font-weight: 500;
background: #fff;
border: 1px solid var(--wonda-border-soft);
transition: all .15s ease;
}
.wonda-demo .wonda-prompt:hover {
border-color: color-mix(in srgb, var(--wonda-accent, #FF007E) 45%, transparent);
background: color-mix(in srgb, var(--wonda-accent, #FF007E) 6%, #fff);
}
/* Lead form */
.wonda-demo .wonda-lead {
border-radius: var(--wonda-radius-md);
padding: 16px;
box-shadow: 0 8px 24px -12px rgba(15, 23, 42, .16);
}
.wonda-demo .wonda-lead input {
border-radius: 10px;
padding: 10px 12px;
background: var(--wonda-surface-canvas);
transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.wonda-demo .wonda-lead input:focus {
background: #fff;
border-color: var(--wonda-accent, #FF007E);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--wonda-accent, #FF007E) 14%, transparent);
outline: none;
}
.wonda-demo .wonda-lead button {
padding: 10px 18px;
border-radius: 12px;
background: var(--wonda-accent, #FF007E);
background: linear-gradient(135deg,
var(--wonda-accent, #FF007E),
color-mix(in srgb, var(--wonda-accent, #FF007E) 78%, black));
box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--wonda-accent, #FF007E) 55%, transparent);
}
/* CSAT */
.wonda-demo .wonda-csat {
border-radius: var(--wonda-radius-md);
box-shadow: 0 10px 28px -14px rgba(15, 23, 42, .18);
}
.wonda-demo .wonda-csat-star {
font-size: 32px;
}
/* Footer */
.wonda-demo .wonda-footer {
background: #fff;
border-top: 1px solid var(--wonda-border-soft);
padding: 8px 0 10px;
font-size: 11px;
}
/* Dark mode refinements */
.wonda-demo.wonda-dark {
--wonda-border-soft: rgba(255, 255, 255, .06);
--wonda-text-primary: #e2e8f0;
--wonda-text-secondary: #94a3b8;
--wonda-surface-canvas: #0b1220;
}
.wonda-demo.wonda-dark .wonda-window {
background: #0f172a;
border-color: rgba(255, 255, 255, .06);
}
.wonda-demo.wonda-dark .wonda-messages {
background: #0b1220;
}
.wonda-demo.wonda-dark .wonda-bubble {
background: #1e293b;
border-color: rgba(255, 255, 255, .06);
color: #e2e8f0;
}
.wonda-demo.wonda-dark .wonda-from-user .wonda-bubble {
color: #fff;
}
.wonda-demo.wonda-dark .wonda-avatar--user {
background: #1e293b;
color: #94a3b8;
border-color: rgba(255, 255, 255, .08);
}
.wonda-demo.wonda-dark .wonda-composer {
background: #0f172a;
border-top-color: rgba(255, 255, 255, .06);
}
.wonda-demo.wonda-dark .wonda-composer textarea {
background: #1e293b;
border-color: rgba(255, 255, 255, .06);
color: #e2e8f0;
}
.wonda-demo.wonda-dark .wonda-composer textarea:focus {
background: #1e293b;
border-color: var(--wonda-accent, #FF007E);
}
.wonda-demo.wonda-dark .wonda-prompt {
background: #1e293b;
border-color: rgba(255, 255, 255, .06);
color: #cbd5e1;
}
.wonda-demo.wonda-dark .wonda-prompt:hover {
background: color-mix(in srgb, var(--wonda-accent, #FF007E) 15%, #1e293b);
}
.wonda-demo.wonda-dark .wonda-lead {
background: #1e293b;
border-color: rgba(255, 255, 255, .06);
}
.wonda-demo.wonda-dark .wonda-lead input {
background: #0b1220;
color: #e2e8f0;
border-color: rgba(255, 255, 255, .08);
}
.wonda-demo.wonda-dark .wonda-csat {
background: #1e293b;
border-color: rgba(255, 255, 255, .06);
}
.wonda-demo.wonda-dark .wonda-footer {
background: #0f172a;
border-top-color: rgba(255, 255, 255, .06);
}
.wonda-demo.wonda-dark .wonda-action:hover {
background: rgba(255, 255, 255, .08);
}
/* ============================================================
Phase 7.6 — Mobile + design fix
============================================================ */
/* --- Avatars top-aligned with the bubble, not beside --- */
.wonda-demo .wonda-message {
align-items: flex-start !important;
}
.wonda-demo .wonda-avatar {
align-self: flex-start !important;
}
/* --- Quick prompts: transparent bg, themed chips --- */
.wonda-demo .wonda-prompts {
background: transparent !important;
border-top: 0 !important;
padding: 4px 18px 12px !important;
gap: 8px !important;
}
.wonda-demo .wonda-prompt {
background: #ffffff !important;
border: 1px solid rgba(15, 23, 42, .10) !important;
color: var(--wonda-text-primary, #0f172a) !important;
padding: 9px 14px !important;
border-radius: 20px !important;
font-size: 12.5px !important;
font-weight: 500 !important;
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
transition: all .15s ease;
}
.wonda-demo .wonda-prompt:hover {
border-color: color-mix(in srgb, var(--wonda-accent, #FF007E) 55%, transparent) !important;
background: color-mix(in srgb, var(--wonda-accent, #FF007E) 6%, #ffffff) !important;
transform: translateY(-1px);
}
.wonda-demo.wonda-dark .wonda-prompt {
background: #1e293b !important;
border-color: rgba(255, 255, 255, .10) !important;
color: #e2e8f0 !important;
}
.wonda-demo.wonda-dark .wonda-prompt:hover {
background: color-mix(in srgb, var(--wonda-accent, #FF007E) 18%, #1e293b) !important;
}
/* --- Lead form: redesigned card --- */
.wonda-demo .wonda-lead {
background: #ffffff;
border: 1px solid rgba(15, 23, 42, .08);
border-radius: 16px;
padding: 18px;
align-self: stretch;
max-width: 100%;
margin: 4px 0 8px;
box-shadow: 0 14px 36px -18px rgba(15, 23, 42, .22);
}
.wonda-demo .wonda-lead-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.wonda-demo .wonda-lead-icon {
width: 40px;
height: 40px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: var(--wonda-accent, #FF007E);
background: linear-gradient(135deg,
var(--wonda-accent, #FF007E) 0%,
color-mix(in srgb, var(--wonda-accent, #FF007E) 75%, black) 100%);
color: #ffffff;
}
.wonda-demo .wonda-lead-icon svg {
width: 20px;
height: 20px;
display: block;
}
.wonda-demo .wonda-lead-headtext {
flex: 1;
min-width: 0;
}
.wonda-demo .wonda-lead-title {
font-size: 15px;
font-weight: 600;
color: var(--wonda-text-primary, #0f172a);
line-height: 1.2;
margin: 0;
}
.wonda-demo .wonda-lead-sub {
font-size: 12px;
color: var(--wonda-text-secondary, #64748b);
margin-top: 2px;
line-height: 1.3;
}
.wonda-demo .wonda-lead-close {
width: 28px;
height: 28px;
border-radius: 8px;
background: transparent;
border: 0;
color: #94a3b8;
font-size: 20px;
line-height: 1;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
transition: background .15s ease, color .15s ease;
flex-shrink: 0;
}
.wonda-demo .wonda-lead-close:hover {
background: rgba(15, 23, 42, .06);
color: #475569;
}
.wonda-demo .wonda-lead-field {
margin-bottom: 12px;
}
.wonda-demo .wonda-lead-label {
display: block;
font-size: 11.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--wonda-text-secondary, #64748b);
margin-bottom: 6px;
}
.wonda-demo .wonda-lead input {
width: 100%;
padding: 12px 14px;
border: 1px solid rgba(15, 23, 42, .10);
border-radius: 10px;
font-family: inherit;
font-size: 14px;
background: #f8fafc;
color: var(--wonda-text-primary, #0f172a);
transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
-webkit-appearance: none;
appearance: none;
}
.wonda-demo .wonda-lead input:focus {
outline: none;
background: #ffffff;
border-color: var(--wonda-accent, #FF007E);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--wonda-accent, #FF007E) 14%, transparent);
}
.wonda-demo .wonda-lead > button {
width: 100%;
padding: 13px 18px;
border-radius: 12px;
border: 0;
background: var(--wonda-accent, #FF007E);
background: linear-gradient(135deg,
var(--wonda-accent, #FF007E) 0%,
color-mix(in srgb, var(--wonda-accent, #FF007E) 78%, black) 100%);
color: #ffffff;
font-weight: 600;
font-size: 14px;
cursor: pointer;
box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--wonda-accent, #FF007E) 60%, transparent);
transition: transform .12s ease, box-shadow .15s ease;
margin-top: 4px;
font-family: inherit;
}
.wonda-demo .wonda-lead > button:hover:not([disabled]) {
transform: translateY(-1px);
}
.wonda-demo .wonda-lead > button[disabled] {
opacity: .65;
cursor: not-allowed;
}
.wonda-demo .wonda-lead-microcopy {
font-size: 11px;
color: #94a3b8;
text-align: center;
margin-top: 10px;
line-height: 1.3;
}
.wonda-demo.wonda-dark .wonda-lead {
background: #1e293b;
border-color: rgba(255, 255, 255, .08);
}
.wonda-demo.wonda-dark .wonda-lead-title { color: #f1f5f9; }
.wonda-demo.wonda-dark .wonda-lead-sub,
.wonda-demo.wonda-dark .wonda-lead-label,
.wonda-demo.wonda-dark .wonda-lead-microcopy { color: #94a3b8; }
.wonda-demo.wonda-dark .wonda-lead input {
background: #0b1220;
border-color: rgba(255, 255, 255, .08);
color: #e2e8f0;
}
.wonda-demo.wonda-dark .wonda-lead input:focus { background: #0b1220; }
.wonda-demo.wonda-dark .wonda-lead-close:hover {
background: rgba(255, 255, 255, .08);
color: #cbd5e1;
}
/* --- Composer: better focus ring --- */
.wonda-demo .wonda-composer textarea {
transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
/* --- Mobile: proper sizing at 768px, docked with margins --- */
@media (max-width: 768px) {
.wonda-demo .wonda-window {
position: fixed !important;
top: 12px !important;
left: 12px !important;
right: 12px !important;
bottom: auto !important;
width: auto !important;
height: calc(var(--wonda-vh-px, 100vh) - 24px) !important;
max-height: calc(var(--wonda-vh-px, 100vh) - 24px) !important;
border-radius: 18px !important;
box-shadow: 0 20px 50px -20px rgba(15, 23, 42, .35) !important;
}
.wonda-demo .wonda-messages {
padding: 16px 14px 12px !important;
gap: 12px !important;
}
.wonda-demo .wonda-composer {
padding: 10px 12px 12px !important;
}
.wonda-demo .wonda-composer textarea {
padding: 10px 14px !important;
font-size: 15px !important; /* iOS zooms inputs < 16px */
}
.wonda-demo .wonda-lead input {
font-size: 16px !important; /* iOS zooms inputs < 16px */
}
.wonda-demo .wonda-window__header {
padding: 12px 14px !important;
min-height: 56px !important;
}
.wonda-demo .wonda-message {
max-width: 88% !important;
}
}
/* ============================================================
Phase 8 — theme menu icons in the widget menu
============================================================ */
.wonda-demo .wonda-menu-theme-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
flex-shrink: 0;
color: #64748b;
}
.wonda-demo .wonda-menu-theme-icon svg {
width: 14px;
height: 14px;
display: block;
}
.wonda-demo .wonda-menu-theme-item {
gap: 8px;
}
/* ============================================================
Phase 8 fix — theme menu row layout (icon left, label, check right)
============================================================ */
.wonda-demo .wonda-menu-theme-item {
justify-content: flex-start !important;
align-items: center;
gap: 10px;
}
.wonda-demo .wonda-menu-theme-label {
flex: 1;
text-align: left;
}
.wonda-demo .wonda-menu-theme-check {
margin-left: auto;
}
/* ============================================================
Header version tag (e.g. v4.0), sits right after the logo
============================================================ */
.wonda-demo .wonda-window__version {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.02em;
opacity: 0.72;
color: inherit;
margin-left: 6px;
vertical-align: middle;
white-space: nowrap;
pointer-events: none;
}
/* ============================================================
Logo sizing — belt and braces
============================================================ */
.wonda-demo .wonda-window__header-logo {
height: 24px !important;
width: auto !important;
max-width: 120px !important;
max-height: 24px !important;
object-fit: contain !important;
display: block !important;
}
.wonda-demo .wonda-window__header img {
height: 24px !important;
max-height: 24px !important;
max-width: 120px !important;
object-fit: contain !important;
}
.wonda-demo .wonda-launcher img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
.wonda-demo .wonda-menu-theme-icon img,
.wonda-demo .wonda-window__header-btn img,
.wonda-demo .wonda-wa-cta img {
width: 14px !important;
height: 14px !important;
object-fit: contain !important;
display: inline-block !important;
}
/* ============================================================
Header tightening — more room for the chat
============================================================ */
.wonda-demo .wonda-window__header {
padding: 10px 14px !important;
min-height: 52px !important;
}
/* Header logo — smaller */
.wonda-demo .wonda-window__header-logo,
.wonda-demo .wonda-window__header img {
height: 18px !important;
max-height: 18px !important;
max-width: 100px !important;
object-fit: contain !important;
}
/* Header buttons — slightly larger icons inside */
.wonda-demo .wonda-window__header-btn {
width: 34px !important;
height: 34px !important;
}
.wonda-demo .wonda-window__header-btn svg {
width: 17px !important;
height: 17px !important;
}
/* Message action icons — larger */
.wonda-demo .wonda-action {
width: 26px !important;
height: 26px !important;
}
.wonda-demo .wonda-action svg {
width: 16px !important;
height: 16px !important;
}
/* Composer send icon */
.wonda-demo .wonda-composer button svg {
width: 19px !important;
height: 19px !important;
}
/* Launcher icon */
.wonda-demo .wonda-launcher svg {
width: 28px !important;
height: 28px !important;
}
/* Bot / user avatar glyphs */
.wonda-demo .wonda-avatar svg {
width: 19px !important;
height: 19px !important;
}
/* ============================================================
Guarantee bot avatar is always present for bot messages
============================================================ */
.wonda-demo .wonda-from-bot > .wonda-avatar {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Keep typing bubble same width as the final message */
.wonda-demo .wonda-from-bot > .wonda-bubble {
flex: 1;
min-width: 0;
}
/* ============================================================
Lead capture form — compact redesign
============================================================ */
.wonda-demo .wonda-lead {
padding: 14px 14px 12px !important;
border-radius: 14px !important;
margin: 2px 0 6px !important;
}
.wonda-demo .wonda-lead-header {
gap: 10px !important;
margin-bottom: 12px !important;
align-items: center !important;
}
.wonda-demo .wonda-lead-icon {
width: 32px !important;
height: 32px !important;
border-radius: 10px !important;
}
.wonda-demo .wonda-lead-icon svg {
width: 16px !important;
height: 16px !important;
}
.wonda-demo .wonda-lead-title {
font-size: 14px !important;
line-height: 1.2 !important;
}
.wonda-demo .wonda-lead-sub {
font-size: 11px !important;
margin-top: 1px !important;
line-height: 1.25 !important;
}
.wonda-demo .wonda-lead-close {
width: 24px !important;
height: 24px !important;
font-size: 18px !important;
}
/* Hide the visible labels — placeholders carry the same info
and we don't want double text. Kept in the DOM for screen readers. */
.wonda-demo .wonda-lead-label {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.wonda-demo .wonda-lead-field {
margin-bottom: 8px !important;
}
.wonda-demo .wonda-lead-field:last-of-type {
margin-bottom: 10px !important;
}
.wonda-demo .wonda-lead input {
padding: 9px 12px !important;
font-size: 13.5px !important;
border-radius: 9px !important;
min-height: 0 !important;
}
.wonda-demo .wonda-lead > button {
padding: 10px 16px !important;
font-size: 13.5px !important;
border-radius: 10px !important;
margin-top: 2px !important;
box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--wonda-accent, #FF007E) 55%, transparent) !important;
}
.wonda-demo .wonda-lead-microcopy {
margin-top: 8px !important;
font-size: 10.5px !important;
line-height: 1.3 !important;
}
/* Dark mode — keep the same compact metrics */
.wonda-demo.wonda-dark .wonda-lead {
padding: 14px 14px 12px !important;
}
.wonda-demo.wonda-dark .wonda-lead-title {
font-size: 14px !important;
}
.wonda-demo.wonda-dark .wonda-lead-sub {
font-size: 11px !important;
}
/* Mobile — even tighter */
@media (max-width: 480px) {
.wonda-demo .wonda-lead {
padding: 12px 12px 10px !important;
border-radius: 12px !important;
}
.wonda-demo .wonda-lead-icon {
width: 28px !important;
height: 28px !important;
}
.wonda-demo .wonda-lead-title {
font-size: 13.5px !important;
}
.wonda-demo .wonda-lead input {
padding: 10px 12px !important;
font-size: 15px !important; /* iOS zoom prevention */
}
.wonda-demo .wonda-lead > button {
padding: 11px 16px !important;
font-size: 14px !important;
}
}
/* ============================================================
Widget header brand wrapper + mobile shrink
============================================================ */
.wonda-demo .wonda-window__brand {
display: inline-flex;
align-items: flex-end;
gap: 5px;
max-width: 100%;
min-width: 0;
}
.wonda-demo .wonda-window__brand strong {
font-size: 15px;
font-weight: 600;
color: #fff;
line-height: 1;
}
.wonda-demo .wonda-window__version {
font-size: 9px !important;
font-weight: 500 !important;
letter-spacing: .02em !important;
color: inherit !important;
opacity: .62 !important;
line-height: 1 !important;
margin-bottom: 1px !important;
white-space: nowrap !important;
pointer-events: none !important;
}
@media (max-width: 480px) {
/* Tighter header on phones */
.wonda-demo .wonda-window__header {
padding: 8px 12px !important;
min-height: 44px !important;
gap: 8px !important;
}
/* Smaller logo on phones */
.wonda-demo .wonda-window__header-logo,
.wonda-demo .wonda-window__header img {
height: 15px !important;
max-height: 15px !important;
max-width: 80px !important;
}
/* Smaller header buttons */
.wonda-demo .wonda-window__header-btn {
width: 30px !important;
height: 30px !important;
}
.wonda-demo .wonda-window__header-btn svg {
width: 15px !important;
height: 15px !important;
}
.wonda-demo .wonda-window__brand strong { font-size: 14px; }
.wonda-demo .wonda-window__version { font-size: 8px !important; }
}
/* ============================================================
Header notice (admin-set, appears below the widget header)
============================================================ */
.wonda-demo .wonda-header-notice {
padding: 8px 14px;
font-size: 12.5px;
font-weight: 500;
line-height: 1.35;
text-align: center;
flex-shrink: 0;
border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.wonda-demo .wonda-header-notice--info {
background: #eff6ff;
color: #1e40af;
}
.wonda-demo .wonda-header-notice--warn {
background: #fffbeb;
color: #92400e;
}
.wonda-demo.wonda-dark .wonda-header-notice--info {
background: rgba(59, 130, 246, .15);
color: #93c5fd;
border-bottom-color: rgba(255, 255, 255, .06);
}
.wonda-demo.wonda-dark .wonda-header-notice--warn {
background: rgba(180, 83, 9, .18);
color: #fbbf24;
border-bottom-color: rgba(255, 255, 255, .06);
}
/* ============================================================
Header icon alignment — force consistent centering
============================================================ */
.wonda-demo .wonda-window__header-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 0 !important;
padding: 0 !important;
}
.wonda-demo .wonda-window__header-btn > * {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 0 !important;
}
.wonda-demo .wonda-window__header-btn svg {
display: block !important;
width: 17px !important;
height: 17px !important;
flex-shrink: 0 !important;
vertical-align: middle !important;
}
.wonda-demo .wonda-window__header-btn img {
display: block !important;
width: 17px !important;
height: 17px !important;
object-fit: contain !important;
flex-shrink: 0 !important;
}
@media (max-width: 480px) {
.wonda-demo .wonda-header-notice {
padding: 6px 12px;
font-size: 12px;
}
.wonda-demo .wonda-window__header-btn svg,
.wonda-demo .wonda-window__header-btn img {
width: 15px !important;
height: 15px !important;
}
}
/* ============================================================
WONDA_WIDGET_TABLE_CSS
Markdown tables rendered inside the widget's message body.
The wrap div scrolls horizontally so long tables (pricing,
comparisons) don't blow out the 380px chat panel.
============================================================ */
.wonda-demo .wonda-md-table-wrap {
margin: 10px -6px 10px -2px;
border: 1px solid rgba(15, 23, 42, .08);
border-radius: 10px;
background: #ffffff;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
scrollbar-width: thin;
scrollbar-color: rgba(148, 163, 184, .55) transparent;
}
.wonda-demo .wonda-md-table-wrap::-webkit-scrollbar { height: 6px; }
.wonda-demo .wonda-md-table-wrap::-webkit-scrollbar-track { background: transparent; }
.wonda-demo .wonda-md-table-wrap::-webkit-scrollbar-thumb {
background: rgba(148, 163, 184, .5);
border-radius: 3px;
}
.wonda-demo .wonda-md-table {
width: 100%;
border-collapse: collapse;
font-size: 12.5px;
line-height: 1.4;
background: #ffffff;
min-width: 280px;
}
.wonda-demo .wonda-md-table__th {
padding: 8px 12px;
background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
color: #475569;
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
border-bottom: 1px solid rgba(15, 23, 42, .08);
white-space: nowrap;
}
.wonda-demo .wonda-md-table__td {
padding: 8px 12px;
color: #0f172a;
border-bottom: 1px solid rgba(15, 23, 42, .05);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.wonda-demo .wonda-md-table__th--right,
.wonda-demo .wonda-md-table__td--right { text-align: right; }
.wonda-demo .wonda-md-table__th--center,
.wonda-demo .wonda-md-table__td--center { text-align: center; }
.wonda-demo .wonda-md-table__th--left,
.wonda-demo .wonda-md-table__td--left { text-align: left; }
.wonda-demo .wonda-md-table tbody tr:last-child .wonda-md-table__td {
border-bottom: 0;
}
.wonda-demo .wonda-md-table tbody tr:hover {
background: rgba(255, 0, 126, .03);
}
/* Bold text in a table cell (package names often come as **bold**) */
.wonda-demo .wonda-md-table strong { font-weight: 700; color: #0f172a; }
/* Dark mode */
.wonda-demo.wonda-dark .wonda-md-table-wrap {
border-color: rgba(255, 255, 255, .08);
background: #0f172a;
}
.wonda-demo.wonda-dark .wonda-md-table { background: #0f172a; }
.wonda-demo.wonda-dark .wonda-md-table__th {
background: linear-gradient(180deg, #1e293b 0%, #172033 100%);
color: #cbd5e1;
border-bottom-color: rgba(255, 255, 255, .08);
}
.wonda-demo.wonda-dark .wonda-md-table__td {
color: #e2e8f0;
border-bottom-color: rgba(255, 255, 255, .06);
}
.wonda-demo.wonda-dark .wonda-md-table strong { color: #f1f5f9; }
.wonda-demo.wonda-dark .wonda-md-table tbody tr:hover {
background: rgba(255, 0, 126, .08);
}
/* ==== END WONDA_WIDGET_TABLE_CSS ==== */
/* ============================================================
WONDA_WIDGET_LINK_STYLE
Link text inherits the bubble's own text colour — whatever is
already readable on that bubble in either theme. The accent only
shows in the underline. Result: legible on every accent, every
theme, every bubble.
============================================================ */
.wonda-demo .wonda-from-bot .wonda-message-body a,
.wonda-demo.wonda-dark .wonda-from-bot .wonda-message-body a {
color: inherit !important;
text-decoration: underline !important;
text-decoration-color: var(--wonda-accent, #FF007E) !important;
text-decoration-thickness: 2px !important;
text-underline-offset: 3px !important;
font-weight: 600;
}
.wonda-demo .wonda-from-user .wonda-message-body a,
.wonda-demo.wonda-dark .wonda-from-user .wonda-message-body a {
color: inherit !important;
text-decoration: underline !important;
text-decoration-color: rgba(255, 255, 255, 0.85) !important;
text-decoration-thickness: 2px !important;
text-underline-offset: 3px !important;
font-weight: 600;
}
/* ==== END WONDA_WIDGET_LINK_STYLE ==== */
/* ============================================================
WONDA_WIDGET_RICH_MAP
Rich map card rendered inside a bot bubble.
============================================================ */
.wonda-demo .wonda-rich {
margin-top: 10px;
border-radius: 12px;
overflow: hidden;
background: #0f172a;
border: 1px solid rgba(255, 255, 255, .08);
animation: wonda-rich-in 420ms ease both;
}
@keyframes wonda-rich-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.wonda-demo .wonda-rich__map {
width: 100%;
aspect-ratio: 16 / 10;
background: #111827;
position: relative;
overflow: hidden;
}
.wonda-demo .wonda-rich__map.leaflet-container {
background: #0f172a;
font-family: inherit;
font-size: 11px;
}
.wonda-demo .wonda-rich__map .leaflet-control-attribution {
background: rgba(15, 23, 42, .78) !important;
color: rgba(226, 232, 240, .75) !important;
font-size: 9.5px !important;
padding: 1px 5px !important;
border-radius: 4px 0 0 0 !important;
}
.wonda-demo .wonda-rich__map .leaflet-control-attribution a {
color: rgba(226, 232, 240, .92) !important;
}
.wonda-demo .wonda-rich__map .leaflet-container:focus,
.wonda-demo .wonda-rich__map .leaflet-container:focus-visible {
outline: none !important;
}
.wonda-demo .wonda-rich__map-marker,
.wonda-demo .wonda-rich__map-marker.leaflet-div-icon {
background: transparent !important;
border: 0 !important;
}
@keyframes wonda-map-pulse {
0% { transform: scale(.8); opacity: .45; }
70% { transform: scale(1.6); opacity: 0; }
100% { transform: scale(1.6); opacity: 0; }
}
.wonda-demo .wonda-rich__body { padding: 10px 12px 12px; }
.wonda-demo .wonda-rich__title {
font-size: 13px;
font-weight: 600;
color: #f1f5f9;
line-height: 1.3;
margin: 0 0 3px;
}
.wonda-demo .wonda-rich__meta {
font-size: 11.5px;
color: #94a3b8;
line-height: 1.4;
margin: 0 0 10px;
}
.wonda-demo .wonda-rich__row {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
.wonda-demo .wonda-rich__cta {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11.5px;
font-weight: 600;
padding: 7px 12px;
border-radius: 9px;
background: var(--wonda-accent, #FF007E);
color: #fff !important;
text-decoration: none !important;
}
.wonda-demo .wonda-rich__cta:hover {
filter: brightness(1.08);
color: #fff !important;
text-decoration: none !important;
}
/* Dark mode inherits the same colours — card is already dark. */
.wonda-demo.wonda-dark .wonda-rich {
border-color: rgba(255, 255, 255, .06);
}
/* ═════════════════════════════════════════════════════════════════
STATIC MODE
Reverses the fixed positioning from the live widget and gives
the window an explicit height so it renders as a self-contained
card inside a marketing page.
═════════════════════════════════════════════════════════════════ */
.wonda-demo {
position: static !important;
z-index: auto !important;
bottom: auto !important;
right: auto !important;
top: auto !important;
left: auto !important;
display: block !important;
pointer-events: none !important;
user-select: none !important;
-webkit-user-select: none !important;
max-width: 100% !important;
}
.wonda-demo * {
pointer-events: none !important;
user-select: none !important;
-webkit-user-select: none !important;
-webkit-touch-callout: none !important;
}
.wonda-demo .wonda-root-inner {
position: relative !important;
pointer-events: none !important;
}
.wonda-demo .wonda-window {
position: static !important;
display: flex !important;
width: 100% !important;
max-width: 400px !important;
height: 500px !important;
max-height: 500px !important;
margin: 0 auto !important;
bottom: auto !important;
right: auto !important;
top: auto !important;
left: auto !important;
box-shadow:
0 40px 80px -40px rgba(15, 23, 42, .55),
0 16px 40px -20px rgba(15, 23, 42, .30) !important;
}
/* Launcher and teaser never show in a static shot. */
.wonda-demo .wonda-launcher,
.wonda-demo .wonda-launcher-group,
.wonda-demo .wonda-teaser {
display: none !important;
}
/* Composer is inert — pointer-events: none is inherited */
.wonda-demo .wonda-composer textarea {
cursor: default !important;
}
/* Small tag under a bot bubble */
.wonda-demo .wonda-demo-tag {
display: block;
font-size: 10.5px;
color: #64748b;
font-family: ui-monospace, Menlo, Monaco, Consolas, monospace;
margin-top: 2px;
padding-left: 2px;
}
/* ═══════════════════════════════════════════════════════════════
Demo-only tweaks
═══════════════════════════════════════════════════════════════ */
/* Product list inside a bot bubble — mirrors the widget's own
markdown bullet list rendering. */
.wonda-demo .wonda-message-body ul.wonda-demo-products {
margin: 8px 0 2px;
padding-left: 20px;
}
.wonda-demo .wonda-message-body ul.wonda-demo-products li {
margin: 5px 0;
line-height: 1.45;
}
.wonda-demo .wonda-message-body ul.wonda-demo-products code {
font-size: 11px;
padding: 1px 5px;
background: rgba(255, 255, 255, .06);
border: 0;
color: #94a3b8;
}
/* The lead form is a direct child of .wonda-messages in the real
widget; keep it flush left like the widget does. */
.wonda-demo .wonda-messages > .wonda-lead {
align-self: flex-start;
max-width: 92%;
margin: 4px 0 8px;
}
/* The CSAT card in the real widget spans the whole message column. */
.wonda-demo .wonda-messages > .wonda-csat {
align-self: stretch;
margin: 4px 0 8px;
}
/* Make the composer's disabled send button look active (it's just
a static shot; the widget's own styling is correct). */
.wonda-demo .wonda-composer button.wonda-composer__send {
opacity: 1 !important;
}
/* Give the readonly textarea the look of the live one. */
.wonda-demo .wonda-composer textarea {
pointer-events: none !important;
cursor: default !important;
}
/* ═════════════════════════════════════════════════════════════════
WONDA_WIDGET_DEMO_AUTOSCROLL_CSS
Homepage widget previews: no scrollbar visible, no user scroll.
The messages container is auto-scrolled by JS in app.js.
═════════════════════════════════════════════════════════════════ */
.wonda-demo .wonda-messages {
scrollbar-width: none !important;
-ms-overflow-style: none !important;
scroll-behavior: auto !important;
overscroll-behavior: contain;
}
.wonda-demo .wonda-messages::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
background: transparent !important;
}
/* ═════════════════════════════════════════════════════════════════
WONDA_WIDGET_DEMO_PRODUCT_CARDS
Products in the homepage preview render as image cards stacked
in a single column, matching how a real widget shows them when
the bot attaches an image.
═════════════════════════════════════════════════════════════════ */
.wonda-demo .wonda-demo-products {
display: flex;
flex-direction: column;
gap: 8px;
margin: 10px 0 2px;
}
.wonda-demo .wonda-demo-product {
display: flex;
gap: 10px;
padding: 8px;
border: 1px solid rgba(255, 255, 255, .08);
background: rgba(255, 255, 255, .04);
border-radius: 10px;
align-items: center;
min-width: 0;
}
.wonda-demo .wonda-demo-product__media {
width: 56px;
height: 56px;
border-radius: 8px;
background-color: #334155;
background-image: linear-gradient(135deg, #334155 0%, #1e293b 100%);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
flex-shrink: 0;
box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
position: relative;
overflow: hidden;
}
.wonda-demo .wonda-demo-product__body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.wonda-demo .wonda-demo-product__title {
font-size: 13px;
font-weight: 600;
color: #f1f5f9;
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wonda-demo .wonda-demo-product__meta {
font-size: 11px;
color: #94a3b8;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wonda-demo .wonda-demo-product__price {
font-size: 13px;
font-weight: 700;
color: #f1f5f9;
font-variant-numeric: tabular-nums;
margin-top: 2px;
}
/* Light-mode fallback (if the demo is ever rendered light) */
.wonda-demo:not(.wonda-dark) .wonda-demo-product {
background: #f8fafc;
border-color: rgba(15, 23, 42, .08);
}
.wonda-demo:not(.wonda-dark) .wonda-demo-product__title,
.wonda-demo:not(.wonda-dark) .wonda-demo-product__price {
color: #0f172a;
}
.wonda-demo:not(.wonda-dark) .wonda-demo-product__meta {
color: #64748b;
}
/* ═════════════════════════════════════════════════════════════════
WONDA_DEMO_INTERACTIVE
Release the pointer-events / user-select lock so the demos are
clickable and typeable. Everything else stays exactly as-is.
═════════════════════════════════════════════════════════════════ */
.wonda-demo,
.wonda-demo * {
pointer-events: auto !important;
user-select: text !important;
-webkit-user-select: text !important;
}
/* Remove the readonly look on the composer textarea when it is live */
.wonda-demo .wonda-composer textarea {
cursor: text !important;
}
/* Demo toast — appears inside the widget when a demo-only action fires */
.wonda-demo-toast {
position: absolute;
left: 50%;
bottom: 88px;
transform: translateX(-50%) translateY(6px);
max-width: min(340px, calc(100% - 24px));
padding: 11px 16px;
border-radius: 12px;
background: rgba(15, 23, 42, .96);
color: #f1f5f9;
font-size: 12.5px;
line-height: 1.5;
text-align: left;
box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .45);
opacity: 0;
pointer-events: none !important;
transition: opacity .22s ease, transform .22s ease;
z-index: 60;
}
.wonda-demo-toast--show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* Lead form success state */
.wonda-demo-lead-success {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 24px 18px;
text-align: center;
}
.wonda-demo-lead-success__icon {
width: 46px;
height: 46px;
border-radius: 50%;
background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
color: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 22px;
font-weight: 800;
box-shadow: 0 8px 20px -6px rgba(34, 197, 94, .45);
}
.wonda-demo-lead-success__title {
font-size: 14.5px;
font-weight: 700;
color: #f1f5f9;
line-height: 1.35;
}
.wonda-demo-lead-success__sub {
font-size: 12.5px;
color: #94a3b8;
line-height: 1.5;
word-break: break-word;
}
.wonda-demo:not(.wonda-dark) .wonda-demo-lead-success__title { color: #0f172a; }
.wonda-demo:not(.wonda-dark) .wonda-demo-lead-success__sub { color: #64748b; }
/* Message actions look clickable in the demo */
.wonda-demo .wonda-action {
cursor: pointer !important;
}
.wonda-demo .wonda-action:hover {
background: rgba(255, 255, 255, .08);
}
/* Header buttons look clickable */
.wonda-demo .wonda-window__header-btn {
cursor: pointer !important;
}
.wonda-demo .wonda-window__header-btn:hover {
background: rgba(255, 255, 255, .22) !important;
}
/* Product cards become clickable teasers */
.wonda-demo .wonda-demo-product {
cursor: pointer;
transition: border-color .14s ease, background .14s ease;
}
.wonda-demo .wonda-demo-product:hover {
border-color: rgba(255, 255, 255, .18);
background: rgba(255, 255, 255, .07);
}
/* CSAT stars become clickable */
.wonda-demo .wonda-csat-star {
cursor: pointer !important;
}
.wonda-demo .wonda-csat-star:disabled {
cursor: default !important;
}
/* ═════════════════════════════════════════════════════════════════
WONDA_DEMO_BUBBLE_WIDTH
Message rows cap at 72% of the messages column, and left/right
rows get a hard minimum gutter so they never touch or cross.
================================================================ */
/* Base row: cap the total row width (avatar + bubble) */
.wonda-demo .wonda-message {
max-width: 84% !important;
box-sizing: border-box;
}
/* Bot rows: hug the left, never cross past 60% of column */
.wonda-demo .wonda-from-bot {
align-self: flex-start !important;
margin-right: auto !important;
margin-left: 0 !important;
max-width: 84% !important;
}
/* User rows: hug the right, never cross into the left side */
.wonda-demo .wonda-from-user {
align-self: flex-end !important;
margin-left: auto !important;
margin-right: 0 !important;
max-width: 84% !important;
}
/* Bubble itself gets a touch more inner padding now that it is narrower */
.wonda-demo .wonda-bubble {
min-width: 0;
}
/* Very narrow screens: relax the cap slightly so it doesn't look cramped */
@media (max-width: 480px) {
.wonda-demo .wonda-message,
.wonda-demo .wonda-from-bot,
.wonda-demo .wonda-from-user {
max-width: 90% !important;
}
}
/* The lead form and CSAT are full-width children, not messages —
they should not be affected by the 72% cap. */
.wonda-demo .wonda-messages > .wonda-lead,
.wonda-demo .wonda-messages > .wonda-csat {
align-self: stretch !important;
max-width: 100% !important;
}
/* END widget-demo.css */
/* BEGIN theme.css */
/* ============================================================
WONDA THEME — single source of truth for dark mode
Load AFTER app-v2.css, site.css, auth.css, auth-v2.css.
Selector strategy: html[data-theme="dark"] only.
The inline bootstrap in partials/head.php ALWAYS sets
data-theme to either "dark" or "light" before first paint,
so no media query is needed — the OS preference is translated
to an attribute by JS.
Delete the dark blocks listed in the checklist at the bottom
of this file from the base CSS files. Otherwise those rules
and these will fight.
============================================================ */
/* ============================================================
1. TOKENS
============================================================ */
html[data-theme="dark"] {
color-scheme: dark;
--surface: #0f172a;
--surface-2: #0b1220;
--border: rgba(255, 255, 255, .08);
--text: #e2e8f0;
--muted: #94a3b8;
--primary: #f1f5f9;
--wonda-navy-1: #f1f5f9;
--wonda-navy-2: #e2e8f0;
--wonda-navy-3: #cbd5e1;
--wonda-canvas-top: #0b1220;
--wonda-canvas-bottom:#0f172a;
--wonda-card-border: rgba(255, 255, 255, .06);
--wonda-card-border-2:rgba(255, 255, 255, .12);
--wonda-tint-accent: rgba(255, 0, 126, .08);
--wonda-tint-navy: rgba(255, 255, 255, .03);
--wonda-shadow-rest:
0 1px 2px rgba(0, 0, 0, .35),
0 8px 24px -14px rgba(0, 0, 0, .55);
--wonda-shadow-hover:
0 1px 2px rgba(0, 0, 0, .45),
0 14px 32px -16px rgba(0, 0, 0, .65);
}
/* ============================================================
2. CONSOLE CANVAS + SHELL
============================================================ */
html[data-theme="dark"] body.wonda-body,
html[data-theme="dark"] body {
background:
radial-gradient(900px 480px at 100% 0%, rgba(255, 0, 126, .06), transparent 60%),
radial-gradient(700px 420px at 0% 0%, rgba(108, 68, 244, .05), transparent 55%),
linear-gradient(180deg, #0b1220 0%, #0f172a 55%, #0b1220 100%);
background-attachment: fixed;
background-repeat: no-repeat;
color: #e2e8f0;
}
/* ---- sidebar ---- */
html[data-theme="dark"] .wonda-sidebar {
background: linear-gradient(180deg, #070c17 0%, #0a101f 100%);
border-right: 1px solid rgba(255, 255, 255, .04);
}
html[data-theme="dark"] .wonda-sidebar__brand { border-bottom-color: rgba(255, 255, 255, .06); }
html[data-theme="dark"] .wonda-sidebar__section { color: rgba(255, 255, 255, .32); }
html[data-theme="dark"] .wonda-sidebar__link { color: #cbd5e1; }
html[data-theme="dark"] .wonda-sidebar__link:hover { background: rgba(255, 255, 255, .05); color: #ffffff; }
html[data-theme="dark"] .wonda-sidebar__link.active { background: rgba(255, 255, 255, .09); color: #ffffff; }
html[data-theme="dark"] .wonda-sidebar__foot { border-top-color: rgba(255, 255, 255, .06); color: #94a3b8; }
html[data-theme="dark"] .wonda-sidebar__foot strong { color: #e2e8f0; }
html[data-theme="dark"] .wonda-sidebar__foot a { color: #cbd5e1; }
html[data-theme="dark"] .wonda-sidebar__foot a:hover { color: #ffffff; }
html[data-theme="dark"] .wonda-sidebar-backdrop { background: rgba(0, 0, 0, .75); }
/* ---- topbar ---- */
html[data-theme="dark"] .wonda-topbar {
background: linear-gradient(180deg, #0f172a 0%, #0b1220 100%);
border-bottom: 1px solid rgba(255, 255, 255, .06);
}
html[data-theme="dark"] .wonda-topbar__title { color: #f1f5f9; }
html[data-theme="dark"] .wonda-topbar__meta { color: #94a3b8; }
html[data-theme="dark"] .wonda-topbar__meta code {
background: #1e293b;
border-color: rgba(255, 255, 255, .08);
color: #cbd5e1;
}
/* ============================================================
3. CARDS, STATS, TABLES
============================================================ */
html[data-theme="dark"] .wonda-card {
background: linear-gradient(180deg, #0f172a 0%, #101a2e 100%);
border-color: rgba(255, 255, 255, .06);
color: #e2e8f0;
}
html[data-theme="dark"] .wonda-card:hover { border-color: rgba(255, 255, 255, .12); }
html[data-theme="dark"] .wonda-card > h1,
html[data-theme="dark"] .wonda-card > h2,
html[data-theme="dark"] .wonda-card > h3 { color: #f1f5f9; }
html[data-theme="dark"] .wonda-card p { color: #cbd5e1; }
html[data-theme="dark"] .wonda-card hr { border-color: rgba(255, 255, 255, .08); }
html[data-theme="dark"] .wonda-card code,
html[data-theme="dark"] .wonda-card pre {
background: #1e293b;
border-color: rgba(255, 255, 255, .08);
color: #cbd5e1;
}
html[data-theme="dark"] .wonda-card pre { background: #070c17; }
html[data-theme="dark"] .wonda-stat {
background: linear-gradient(180deg, #0f172a 0%, #131e36 100%);
border-color: rgba(255, 255, 255, .06);
}
html[data-theme="dark"] .wonda-stat:hover { border-color: rgba(255, 255, 255, .12); }
html[data-theme="dark"] .wonda-stat__label { color: #94a3b8; }
html[data-theme="dark"] .wonda-stat__value { color: #f1f5f9; }
html[data-theme="dark"] .wonda-stat__trend { color: #94a3b8; }
html[data-theme="dark"] .wonda-card table thead th {
background: linear-gradient(180deg, #1e293b 0%, #182236 100%);
color: #cbd5e1;
border-bottom-color: rgba(255, 255, 255, .10) !important;
}
html[data-theme="dark"] .wonda-card table tbody td {
color: #e2e8f0;
border-bottom-color: rgba(255, 255, 255, .05);
}
html[data-theme="dark"] .wonda-card table tbody tr:hover {
background: rgba(255, 0, 126, .06);
}
/* ============================================================
4. FORMS + BUTTONS + TOGGLES
============================================================ */
html[data-theme="dark"] .wonda-field label { color: #e2e8f0; }
html[data-theme="dark"] .wonda-field input,
html[data-theme="dark"] .wonda-field select,
html[data-theme="dark"] .wonda-field textarea {
background: #0b1220;
border-color: rgba(255, 255, 255, .10);
color: #e2e8f0;
}
html[data-theme="dark"] .wonda-field input::placeholder,
html[data-theme="dark"] .wonda-field textarea::placeholder { color: #64748b; }
html[data-theme="dark"] .wonda-field input:hover,
html[data-theme="dark"] .wonda-field select:hover,
html[data-theme="dark"] .wonda-field textarea:hover {
border-color: rgba(255, 255, 255, .20);
}
html[data-theme="dark"] .wonda-field input:focus,
html[data-theme="dark"] .wonda-field select:focus,
html[data-theme="dark"] .wonda-field textarea:focus {
background: #0b1220;
border-color: var(--accent);
box-shadow: 0 0 0 4px rgba(255, 0, 126, .15);
}
html[data-theme="dark"] .wonda-field small { color: #94a3b8; }
html[data-theme="dark"] .wonda-btn--secondary {
background: #1e293b;
color: #e2e8f0;
border: 1px solid rgba(255, 255, 255, .10);
box-shadow: none;
}
html[data-theme="dark"] .wonda-btn--secondary:hover {
background: #263349;
border-color: rgba(255, 255, 255, .22);
color: #ffffff;
}
html[data-theme="dark"] .wonda-btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
html[data-theme="dark"] .wonda-toggle {
background: #0f172a;
border-color: rgba(255, 255, 255, .08);
}
html[data-theme="dark"] .wonda-toggle:hover {
background: #131e36;
border-color: rgba(255, 255, 255, .16);
}
html[data-theme="dark"] .wonda-toggle__label strong { color: #e2e8f0; }
html[data-theme="dark"] .wonda-toggle__label small { color: #94a3b8; }
html[data-theme="dark"] .wonda-feature-check {
background: #0f172a;
border-color: rgba(255, 255, 255, .08);
color: #e2e8f0;
}
html[data-theme="dark"] .wonda-feature-check:hover {
background: #131e36;
border-color: rgba(255, 255, 255, .16);
}
/* ============================================================
5. NOTICES, EMPTY STATES, PILLS
============================================================ */
html[data-theme="dark"] .wonda-notice--info { background: rgba(59, 130, 246, .15); color: #93c5fd; border-color: rgba(59, 130, 246, .35); }
html[data-theme="dark"] .wonda-notice--warn { background: rgba(180, 83, 9, .18); color: #fbbf24; border-color: rgba(180, 83, 9, .45); }
html[data-theme="dark"] .wonda-notice--error { background: rgba(185, 28, 28, .18); color: #fca5a5; border-color: rgba(185, 28, 28, .45); }
html[data-theme="dark"] .wonda-notice--ok { background: rgba(21, 128, 61, .18); color: #86efac; border-color: rgba(21, 128, 61, .45); }
html[data-theme="dark"] .wonda-empty {
background: #0f172a;
border-color: rgba(255, 255, 255, .10);
color: #94a3b8;
}
html[data-theme="dark"] .wonda-empty h3 { color: #f1f5f9; }
html[data-theme="dark"] .wonda-empty p { color: #94a3b8; }
html[data-theme="dark"] .wonda-pill--ok { background: rgba(21, 128, 61, .18); color: #86efac; border-color: rgba(21, 128, 61, .45); }
html[data-theme="dark"] .wonda-pill--bad { background: rgba(185, 28, 28, .18); color: #fca5a5; border-color: rgba(185, 28, 28, .45); }
html[data-theme="dark"] .wonda-pill--warn { background: rgba(180, 83, 9, .18); color: #fbbf24; border-color: rgba(180, 83, 9, .45); }
html[data-theme="dark"] .wonda-pill--info { background: rgba(59, 130, 246, .18); color: #93c5fd; border-color: rgba(59, 130, 246, .45); }
/* ============================================================
6. BELL / NOTIFICATIONS
============================================================ */
html[data-theme="dark"] .wonda-bell__btn {
background: #0f172a;
border-color: rgba(255, 255, 255, .10);
color: #e2e8f0;
}
html[data-theme="dark"] .wonda-bell__btn:hover {
background: #1e293b;
border-color: rgba(255, 255, 255, .22);
}
html[data-theme="dark"] .wonda-bell__badge { box-shadow: 0 0 0 2px #0f172a; }
html[data-theme="dark"] .wonda-bell__panel {
background: #0f172a;
border-color: rgba(255, 255, 255, .10);
box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .7);
}
html[data-theme="dark"] .wonda-bell__head { border-bottom-color: rgba(255, 255, 255, .08); }
html[data-theme="dark"] .wonda-bell__head strong { color: #f1f5f9; }
html[data-theme="dark"] .wonda-bell__head small { color: #94a3b8; }
html[data-theme="dark"] .wonda-bell__item { border-bottom-color: rgba(255, 255, 255, .06); }
html[data-theme="dark"] .wonda-bell__item--unread { background: rgba(255, 0, 126, .06); }
html[data-theme="dark"] .wonda-bell__item-inner:hover { background: rgba(255, 0, 126, .08); }
html[data-theme="dark"] .wonda-bell__item-title { color: #f1f5f9; }
html[data-theme="dark"] .wonda-bell__item-detail { color: #94a3b8; }
html[data-theme="dark"] .wonda-bell__item-time { color: #64748b; }
html[data-theme="dark"] .wonda-bell__foot {
background: #0b1220;
border-top-color: rgba(255, 255, 255, .06);
}
html[data-theme="dark"] .wonda-bell__empty { color: #94a3b8; }
/* ============================================================
7. ACTIVITY FEED + SUMMARY + TIMELINE
============================================================ */
html[data-theme="dark"] .wonda-activity__body > strong { color: #f1f5f9; }
html[data-theme="dark"] .wonda-activity__body small { color: #94a3b8; }
html[data-theme="dark"] .wonda-activity__body small code {
background: #1e293b;
border-color: rgba(255, 255, 255, .06);
color: #cbd5e1;
}
html[data-theme="dark"] .wonda-activity__time { color: #64748b; }
html[data-theme="dark"] .wonda-activity__item:hover { background: rgba(255, 0, 126, .04); }
html[data-theme="dark"] .wonda-activity__dot {
background: #0b1220 !important;
box-shadow: 0 0 0 4px #0b1220, 0 0 0 5px rgba(255, 0, 126, .20);
}
html[data-theme="dark"] .wonda-timeline::before {
background: linear-gradient(180deg,
rgba(255, 0, 126, .30) 0%,
rgba(255, 255, 255, .08) 50%,
rgba(255, 255, 255, .04) 100%);
}
html[data-theme="dark"] .wonda-activity-summary {
background: linear-gradient(180deg, #0f172a 0%, #101a2e 100%);
border-color: rgba(255, 255, 255, .06);
}
html[data-theme="dark"] .wonda-activity-summary__item {
background: #0b1220;
border-color: rgba(255, 255, 255, .06);
}
html[data-theme="dark"] .wonda-activity-summary__item:hover {
background: #0f172a;
border-color: rgba(255, 255, 255, .12);
}
html[data-theme="dark"] .wonda-activity-summary__value { color: #f1f5f9; }
html[data-theme="dark"] .wonda-activity-summary__label { color: #94a3b8; }
/* ============================================================
8. CONVERSATION HERO + TRANSCRIPT (chat-logs)
============================================================ */
html[data-theme="dark"] .wonda-convo-hero {
background: linear-gradient(135deg, rgba(255, 0, 126, .06) 0%, rgba(108, 68, 244, .05) 100%);
border-color: rgba(255, 255, 255, .08);
}
html[data-theme="dark"] .wonda-convo-hero__label { color: #94a3b8; }
html[data-theme="dark"] .wonda-convo-hero__id { color: #f1f5f9; }
html[data-theme="dark"] .wonda-convo-hero__stat-value { color: #f1f5f9; }
html[data-theme="dark"] .wonda-convo-hero__stat-value small { color: #94a3b8; }
html[data-theme="dark"] .wonda-convo-hero__stat-label { color: #94a3b8; }
html[data-theme="dark"] .wonda-convo-hero__stats {
background: rgba(15, 23, 42, .55);
border-color: rgba(255, 255, 255, .06);
}
html[data-theme="dark"] .wonda-convo-hero__stat + .wonda-convo-hero__stat::before {
background: linear-gradient(180deg,
transparent 0%,
rgba(255, 255, 255, .14) 50%,
transparent 100%);
}
html[data-theme="dark"] .wonda-transcript::before {
background: linear-gradient(180deg,
transparent 0%,
rgba(255, 255, 255, .08) 15%,
rgba(255, 255, 255, .08) 85%,
transparent 100%);
}
html[data-theme="dark"] .wonda-transcript__row--bot .wonda-transcript__bubble {
background: linear-gradient(180deg, #1e293b 0%, #182236 100%);
border-color: rgba(255, 255, 255, .06);
color: #e2e8f0;
}
html[data-theme="dark"] .wonda-transcript__row--bot .wonda-transcript__meta { color: #64748b; }
html[data-theme="dark"] .wonda-transcript__row--bot .wonda-transcript__lat {
background: rgba(255, 255, 255, .06);
color: #cbd5e1;
}
html[data-theme="dark"] .wonda-transcript__row--bot .wonda-transcript__model {
background: rgba(255, 255, 255, .06) !important;
color: #94a3b8 !important;
}
/* ============================================================
9. IMPERSONATION + DEMO BANNERS
============================================================ */
html[data-theme="dark"] .wonda-impersonate-banner {
background: linear-gradient(90deg, #4c2a03 0%, #78350f 60%, #92400e 100%);
color: #fef3c7;
border-bottom-color: rgba(251, 191, 36, .35);
}
html[data-theme="dark"] .wonda-impersonate-banner__text strong,
html[data-theme="dark"] .wonda-impersonate-banner__text em { color: #fde68a; }
html[data-theme="dark"] .wonda-demo-banner {
background: linear-gradient(90deg, #0e2b5c 0%, #1e3a8a 100%) !important;
border-bottom-color: rgba(96, 165, 250, .35) !important;
color: #dbeafe !important;
}
html[data-theme="dark"] .wonda-demo-banner__text strong { color: #dbeafe !important; }
html[data-theme="dark"] .wonda-demo-banner__exit {
background: #60a5fa !important;
color: #0b1220 !important;
}
/* ============================================================
10. LOCK HINTS, PLAN TABLE, COLOUR PICKER, UPLOAD
============================================================ */
html[data-theme="dark"] .wonda-lock-hint {
background: rgba(180, 83, 9, .15);
border-color: rgba(180, 83, 9, .35);
color: #fbbf24;
}
html[data-theme="dark"] .wonda-lock-hint__msg { color: #fbbf24; }
html[data-theme="dark"] .wonda-lock-hint__link { color: #fbbf24; }
html[data-theme="dark"] .wonda-field--locked input,
html[data-theme="dark"] .wonda-field--locked select,
html[data-theme="dark"] .wonda-field--locked textarea {
background: #0b1220;
opacity: .7;
}
html[data-theme="dark"] .wonda-lock-badge {
background: rgba(180, 83, 9, .20);
border-color: rgba(180, 83, 9, .45);
color: #fbbf24;
}
html[data-theme="dark"] .wonda-plan-table thead th {
background: #1e293b;
color: #cbd5e1;
}
html[data-theme="dark"] .wonda-plan-table thead th:first-child { background: transparent; }
html[data-theme="dark"] .wonda-plan-table th,
html[data-theme="dark"] .wonda-plan-table td { border-bottom-color: rgba(255, 255, 255, .06); }
html[data-theme="dark"] .wonda-plan-col { border-left-color: rgba(255, 255, 255, .08); }
html[data-theme="dark"] .wonda-plan-col--current { background: rgba(255, 0, 126, .10) !important; }
html[data-theme="dark"] .wonda-plan-name { color: #f1f5f9; }
html[data-theme="dark"] .wonda-plan-price { color: #94a3b8; }
html[data-theme="dark"] .wonda-plan-row-header td { background: #1e293b; color: #94a3b8; }
html[data-theme="dark"] .wonda-plan-label { color: #e2e8f0; }
html[data-theme="dark"] .wonda-plan-cell { color: #e2e8f0; }
html[data-theme="dark"] .wonda-plan-cell--current { background: rgba(255, 0, 126, .06); }
html[data-theme="dark"] .wonda-plan-dash { color: #475569; }
html[data-theme="dark"] .wonda-color-picker input[type="color"] {
background: #0b1220;
border-color: rgba(255, 255, 255, .12);
}
html[data-theme="dark"] .wonda-color-picker input[type="text"] {
background: #0b1220;
border-color: rgba(255, 255, 255, .10);
color: #e2e8f0;
}
html[data-theme="dark"] .wonda-upload {
background: #0b1220;
border-color: rgba(255, 255, 255, .10);
}
html[data-theme="dark"] .wonda-upload__preview {
background: #0f172a;
border-color: rgba(255, 255, 255, .08);
}
html[data-theme="dark"] .wonda-upload__placeholder { color: #64748b; }
html[data-theme="dark"] .wonda-upload__status { color: #94a3b8; }
/* ============================================================
11. KB EDITOR + TILES + FLAGS + REPORT
============================================================ */
html[data-theme="dark"] .wonda-kb-editor-wrap {
background: #0b1220 !important;
border-color: rgba(255, 255, 255, .10) !important;
}
html[data-theme="dark"] .wonda-kb-editor-wrap:focus-within {
border-color: var(--accent) !important;
}
html[data-theme="dark"] .wonda-kb-editor-gutter {
background: linear-gradient(180deg, #0f172a 0%, #0b1220 100%) !important;
border-right-color: rgba(255, 255, 255, .06) !important;
color: #64748b !important;
}
html[data-theme="dark"] .wonda-kb-editor-gutter__line { color: #64748b !important; }
html[data-theme="dark"] .wonda-kb-editor-gutter__line--flagged {
color: #fbbf24 !important;
background: linear-gradient(90deg, rgba(245, 158, 11, .20) 0%, rgba(245, 158, 11, .05) 100%) !important;
border-left-color: #f59e0b !important;
}
html[data-theme="dark"] .wonda-kb-editor-wrap textarea {
background: #0b1220 !important;
color: #e2e8f0 !important;
caret-color: #FF007E !important;
}
html[data-theme="dark"] .wonda-kb-editor-wrap textarea::placeholder { color: #475569; }
html[data-theme="dark"] .wonda-kb-editor-highlight {
background: linear-gradient(90deg,
rgba(245, 158, 11, .22) 0%,
rgba(245, 158, 11, .10) 60%,
rgba(245, 158, 11, .02) 100%) !important;
}
html[data-theme="dark"] .wonda-kb-tiles {
background: #0f172a !important;
}
html[data-theme="dark"] .wonda-kb-tiles__head { border-bottom-color: rgba(255, 255, 255, .06); }
html[data-theme="dark"] .wonda-kb-tiles__note {
background: color-mix(in srgb, var(--kb-tint-accent) 10%, #0f172a) !important;
color: #cbd5e1 !important;
}
html[data-theme="dark"] .wonda-kb-tiles__note strong { color: #f1f5f9 !important; }
html[data-theme="dark"] .wonda-kb-tiles__advice { background: #0f172a !important; }
html[data-theme="dark"] .wonda-kb-tiles__advice-list { color: #cbd5e1; }
html[data-theme="dark"] .wonda-kb-tiles__advice-list strong { color: #f1f5f9 !important; }
html[data-theme="dark"] .wonda-kb-tiles__advice-target {
background: color-mix(in srgb, var(--kb-tint-accent) 15%, #0b1220) !important;
color: #e2e8f0 !important;
}
html[data-theme="dark"] .wonda-kb-tiles__meter-labels { color: #94a3b8; }
html[data-theme="dark"] .wonda-kb-flags {
background: linear-gradient(180deg, #0f172a 0%, #0b1220 100%) !important;
border-color: rgba(245, 158, 11, .30) !important;
}
html[data-theme="dark"] .wonda-kb-flags__title { color: #fbbf24 !important; }
html[data-theme="dark"] .wonda-kb-flags__sub { color: #fcd34d !important; }
html[data-theme="dark"] .wonda-kb-flags__item {
background: #0f172a !important;
border-color: rgba(255, 255, 255, .06) !important;
}
html[data-theme="dark"] .wonda-kb-flags__quote {
background: #0b1220 !important;
color: #e2e8f0 !important;
border-left-color: #f59e0b;
}
html[data-theme="dark"] .wonda-kb-flags__reason { color: #fbbf24 !important; }
html[data-theme="dark"] .wonda-kb-flags__line {
background: rgba(245, 158, 11, .15) !important;
color: #fbbf24 !important;
}
html[data-theme="dark"] .wonda-kb-report {
background: #0f172a !important;
border-color: rgba(255, 255, 255, .08) !important;
}
html[data-theme="dark"] .wonda-kb-report__item {
background: #0f172a !important;
border-color: rgba(255, 255, 255, .06) !important;
}
html[data-theme="dark"] .wonda-kb-report__quote {
background: #0b1220 !important;
color: #e2e8f0 !important;
}
html[data-theme="dark"] .wonda-kb-report__line {
background: #1e293b !important;
border-color: rgba(255, 255, 255, .08) !important;
color: #cbd5e1 !important;
}
html[data-theme="dark"] .wonda-kb-report__foot {
background: #0b1220 !important;
border-top-color: rgba(255, 255, 255, .06) !important;
color: #cbd5e1 !important;
}
html[data-theme="dark"] .wonda-kb-report__foot strong { color: #f1f5f9 !important; }
html[data-theme="dark"] .wonda-kb-report__meta-foot {
background: #0f172a !important;
color: #64748b !important;
}
html[data-theme="dark"] .wonda-act-text { color: #94a3b8; }
/* ============================================================
12. MISC CONSOLE
============================================================ */
html[data-theme="dark"] .wonda-form-section > h3 { color: #94a3b8; }
html[data-theme="dark"] .wonda-page-lead { color: #94a3b8; }
html[data-theme="dark"] .wonda-page-lead code {
background: #1e293b;
border-color: rgba(255, 255, 255, .08);
color: #cbd5e1;
}
html[data-theme="dark"] .wonda-content::-webkit-scrollbar-thumb,
html[data-theme="dark"] textarea.large-text::-webkit-scrollbar-thumb {
background: rgba(148, 163, 184, .25);
}
html[data-theme="dark"] .wonda-content::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] textarea.large-text::-webkit-scrollbar-thumb:hover {
background: rgba(148, 163, 184, .45);
}
html[data-theme="dark"] .wonda-landing__card {
background: #0f172a !important;
border-color: rgba(255, 255, 255, .08) !important;
}
html[data-theme="dark"] .wonda-landing__card h1 { color: #f1f5f9 !important; }
html[data-theme="dark"] .wonda-landing__lead { color: #94a3b8 !important; }
html[data-theme="dark"] .wonda-landing__meta dt { color: #64748b !important; }
html[data-theme="dark"] .wonda-landing__meta dd { color: #e2e8f0 !important; }
/* ============================================================
13. MARKETING SITE (site.css)
============================================================ */
html[data-theme="dark"] body.wonda-site {
background: #0b1220 !important;
color: #e2e8f0 !important;
}
/* header */
html[data-theme="dark"] .wonda-site-header {
background: #0f172a !important;
border-bottom-color: rgba(255, 255, 255, .08) !important;
}
html[data-theme="dark"] .wonda-site-header.is-scrolled {
box-shadow: 0 1px 2px rgba(0, 0, 0, .5) !important;
}
html[data-theme="dark"] .wonda-site-header__brand,
html[data-theme="dark"] .wonda-site-header__brand span,
html[data-theme="dark"] .wonda-site-header__brand small { color: #f1f5f9 !important; }
html[data-theme="dark"] .wonda-site-header__nav a { color: #cbd5e1 !important; }
html[data-theme="dark"] .wonda-site-header__nav a:hover {
background: rgba(255, 255, 255, .06) !important;
color: #fff !important;
}
html[data-theme="dark"] .wonda-site-header__nav a.is-active { color: var(--site-pink) !important; }
html[data-theme="dark"] .wonda-site-header__btn--ghost { color: #cbd5e1 !important; }
html[data-theme="dark"] .wonda-site-header__btn--ghost:hover {
background: rgba(255, 255, 255, .06) !important;
color: #fff !important;
}
html[data-theme="dark"] .wonda-site-header__menu {
background: #1e293b !important;
border-color: rgba(255, 255, 255, .12) !important;
color: #e2e8f0 !important;
}
@media (max-width: 860px) {
html[data-theme="dark"] .wonda-site-header__nav {
background: #0f172a !important;
border-bottom-color: rgba(255, 255, 255, .08) !important;
box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .55) !important;
}
}
/* section primitives */
html[data-theme="dark"] .wonda-site-section { color: #e2e8f0; }
html[data-theme="dark"] .wonda-site-section--soft { background: #0f172a !important; }
html[data-theme="dark"] .wonda-site-section--navy { background: #0b1220 !important; }
html[data-theme="dark"] .wonda-site-h2 { color: #f1f5f9 !important; }
html[data-theme="dark"] .wonda-site-lead { color: #94a3b8 !important; }
html[data-theme="dark"] .wonda-site-eyebrow { color: var(--site-pink) !important; }
/* page hero */
html[data-theme="dark"] .wonda-page-hero {
background: #0b1220 !important;
border-bottom-color: rgba(255, 255, 255, .06) !important;
}
html[data-theme="dark"] .wonda-page-hero__title { color: #f1f5f9 !important; }
html[data-theme="dark"] .wonda-page-hero__lead { color: #94a3b8 !important; }
html[data-theme="dark"] .wonda-page-hero__lead a { color: var(--site-pink) !important; }
/* home hero */
html[data-theme="dark"] .wonda-home__grid { background: #0b1220 !important; }
html[data-theme="dark"] .wonda-home__hero {
background-color: #0b1220 !important;
background-image: radial-gradient(
1100px 900px at 0% 0%,
rgba(255, 0, 126, .15) 0%,
rgba(255, 0, 126, .06) 30%,
rgba(255, 0, 126, 0) 72%
) !important;
}
html[data-theme="dark"] .wonda-home__hero::after {
background: linear-gradient(
90deg,
rgba(11, 18, 32, 0) 0%,
rgba(11, 18, 32, .30) 35%,
rgba(11, 18, 32, .72) 68%,
rgba(11, 18, 32, .94) 88%,
#0b1220 100%
) !important;
}
html[data-theme="dark"] .wonda-home__title { color: #f1f5f9 !important; }
html[data-theme="dark"] .wonda-home__lead { color: #94a3b8 !important; }
html[data-theme="dark"] .wonda-home__badge {
background: rgba(255, 0, 126, .14) !important;
color: #ff5cb0 !important;
}
html[data-theme="dark"] .wonda-home__cta--ghost {
background: #1e293b !important;
color: #f1f5f9 !important;
border-color: rgba(255, 255, 255, .12) !important;
}
html[data-theme="dark"] .wonda-home__cta--ghost:hover {
background: #334155 !important;
border-color: rgba(255, 255, 255, .22) !important;
}
html[data-theme="dark"] .wonda-home__trust { color: #64748b !important; }
/* showcase (right column of home) */
html[data-theme="dark"] .wonda-authv2__showcase { background: #0b1220 !important; }
html[data-theme="dark"] .wonda-showcase__window {
background: #0f172a !important;
border-color: rgba(255, 255, 255, .08) !important;
}
html[data-theme="dark"] .wonda-showcase__messages { background: #0f172a !important; }
html[data-theme="dark"] .wonda-showcase__msg--bot .wonda-showcase__bubble {
background: #1e293b !important;
border-color: rgba(255, 255, 255, .06) !important;
color: #e2e8f0 !important;
}
html[data-theme="dark"] .wonda-showcase__msg-avatar--user {
background: #1e293b !important;
border-color: rgba(255, 255, 255, .08) !important;
color: #94a3b8 !important;
}
html[data-theme="dark"] .wonda-showcase__composer {
background: #0f172a !important;
border-top-color: rgba(255, 255, 255, .06) !important;
}
html[data-theme="dark"] .wonda-showcase__input {
background: #1e293b !important;
border-color: rgba(255, 255, 255, .08) !important;
color: #e2e8f0 !important;
}
html[data-theme="dark"] .wonda-showcase__footer {
background: #0f172a !important;
border-top-color: rgba(255, 255, 255, .06) !important;
color: #64748b !important;
}
html[data-theme="dark"] .wonda-showcase__caption { color: #64748b !important; }
/* stats rail */
html[data-theme="dark"] .wonda-stats-rail { background: #0f172a !important; }
html[data-theme="dark"] .wonda-stats-rail::before {
background: linear-gradient(90deg, #0f172a 0%, rgba(15, 23, 42, 0) 100%) !important;
}
html[data-theme="dark"] .wonda-stats-rail::after {
background: linear-gradient(-90deg, #0f172a 0%, rgba(15, 23, 42, 0) 100%) !important;
}
html[data-theme="dark"] .wonda-stat-block {
background: linear-gradient(180deg, #1e293b 0%, #131c2e 100%) !important;
border-color: rgba(255, 255, 255, .08) !important;
}
html[data-theme="dark"] .wonda-stat-block__value { color: #f1f5f9 !important; }
html[data-theme="dark"] .wonda-stat-block__label { color: #94a3b8 !important; }
/* feature cards */
html[data-theme="dark"] .wonda-feature-card {
background: #0f172a !important;
border-color: rgba(255, 255, 255, .08) !important;
}
html[data-theme="dark"] .wonda-feature-card:hover {
border-color: rgba(255, 255, 255, .16) !important;
box-shadow: 0 12px 28px -18px rgba(0, 0, 0, .6) !important;
}
html[data-theme="dark"] .wonda-feature-card__title { color: #f1f5f9 !important; }
html[data-theme="dark"] .wonda-feature-card__text { color: #94a3b8 !important; }
html[data-theme="dark"] .wonda-feature-card__icon {
background: rgba(255, 0, 126, .14) !important;
color: #ff5cb0 !important;
}
/* price cards */
html[data-theme="dark"] .wonda-price-card {
background: #0f172a !important;
border-color: rgba(255, 255, 255, .08) !important;
}
html[data-theme="dark"] .wonda-price-card:hover {
border-color: rgba(255, 255, 255, .16) !important;
box-shadow: 0 14px 32px -20px rgba(0, 0, 0, .6) !important;
}
html[data-theme="dark"] .wonda-price-card--featured { border-color: rgba(255, 0, 126, .55) !important; }
html[data-theme="dark"] .wonda-price-card--featured:hover { border-color: #FF007E !important; }
html[data-theme="dark"] .wonda-price-card__name,
html[data-theme="dark"] .wonda-price-card__price { color: #f1f5f9 !important; }
html[data-theme="dark"] .wonda-price-card__price small { color: #94a3b8 !important; }
html[data-theme="dark"] .wonda-price-card__desc { color: #94a3b8 !important; }
html[data-theme="dark"] .wonda-price-card__features { border-top-color: rgba(255, 255, 255, .08) !important; }
html[data-theme="dark"] .wonda-price-card__features li { color: #cbd5e1 !important; }
html[data-theme="dark"] .wonda-price-card__features li::before {
box-shadow: inset 0 0 0 3px #0f172a !important;
}
html[data-theme="dark"] .wonda-price-card__cta--ghost {
background: #1e293b !important;
color: #f1f5f9 !important;
border-color: rgba(255, 255, 255, .12) !important;
}
html[data-theme="dark"] .wonda-price-card__cta--ghost:hover {
background: #334155 !important;
border-color: rgba(255, 255, 255, .22) !important;
}
html[data-theme="dark"] .wonda-price-foot { color: #94a3b8 !important; }
/* steps */
html[data-theme="dark"] .wonda-step {
background: #0f172a !important;
border-color: rgba(255, 255, 255, .08) !important;
}
html[data-theme="dark"] .wonda-step:hover {
border-color: rgba(255, 255, 255, .16) !important;
box-shadow: 0 18px 38px -22px rgba(0, 0, 0, .6) !important;
}
html[data-theme="dark"] .wonda-step__title { color: #f1f5f9 !important; }
html[data-theme="dark"] .wonda-step__text { color: #94a3b8 !important; }
html[data-theme="dark"] .wonda-step__text code {
background: rgba(255, 0, 126, .15) !important;
color: #ff5cb0 !important;
}
html[data-theme="dark"] .wonda-step::before {
box-shadow:
0 1px 2px rgba(255, 0, 126, .28),
0 12px 24px -10px rgba(255, 0, 126, .65) !important;
}
html[data-theme="dark"] .wonda-step:not(:last-child)::after {
background: linear-gradient(90deg,
rgba(255, 0, 126, .40) 0%,
rgba(255, 0, 126, .15) 60%,
rgba(255, 0, 126, .04) 100%) !important;
}
/* testimonials */
html[data-theme="dark"] .wonda-testimonial {
background: #0f172a !important;
border-color: rgba(255, 255, 255, .08) !important;
}
html[data-theme="dark"] .wonda-testimonial:hover {
border-color: rgba(255, 255, 255, .16) !important;
box-shadow: 0 18px 38px -22px rgba(0, 0, 0, .6) !important;
}
html[data-theme="dark"] .wonda-testimonial__quote { color: #e2e8f0 !important; }
html[data-theme="dark"] .wonda-testimonial__who strong { color: #f1f5f9 !important; }
html[data-theme="dark"] .wonda-testimonial__who small { color: #94a3b8 !important; }
html[data-theme="dark"] .wonda-testimonial::before { color: rgba(255, 0, 126, .18) !important; }
/* faq */
html[data-theme="dark"] .wonda-faq__item,
html[data-theme="dark"] .wonda-faq__item:first-child { border-color: rgba(255, 255, 255, .08) !important; }
html[data-theme="dark"] .wonda-faq__q { color: #f1f5f9 !important; }
html[data-theme="dark"] .wonda-faq__q:hover { color: var(--site-pink) !important; }
html[data-theme="dark"] .wonda-faq__a { color: #94a3b8 !important; }
html[data-theme="dark"] .wonda-faq__chev { color: #64748b !important; }
html[data-theme="dark"] .wonda-faq__item[open] .wonda-faq__chev { color: var(--site-pink) !important; }
/* section head */
html[data-theme="dark"] .wonda-section-head .wonda-site-h2 { color: #f1f5f9 !important; }
html[data-theme="dark"] .wonda-section-head .wonda-site-lead { color: #94a3b8 !important; }
/* alt feature rows */
html[data-theme="dark"] .wonda-alt__num { color: var(--site-pink) !important; }
html[data-theme="dark"] .wonda-alt__title { color: #f1f5f9 !important; }
html[data-theme="dark"] .wonda-alt__text { color: #94a3b8 !important; }
html[data-theme="dark"] .wonda-alt__bullets li { color: #cbd5e1 !important; }
html[data-theme="dark"] .wonda-alt__bullets li::before {
box-shadow: inset 0 0 0 3px #0b1220, 0 1px 2px rgba(255, 0, 126, .35) !important;
}
/* tick lists */
html[data-theme="dark"] .wonda-tick-list li { color: #cbd5e1 !important; }
html[data-theme="dark"] .wonda-tick-list li strong { color: #f1f5f9 !important; }
html[data-theme="dark"] .wonda-tick-list li::before {
box-shadow: inset 0 0 0 4px #0b1220, 0 1px 2px rgba(255, 0, 126, .35) !important;
}
/* mock panels */
html[data-theme="dark"] .wonda-mock-panel {
background: #0f172a !important;
border-color: rgba(255, 255, 255, .08) !important;
box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7) !important;
}
html[data-theme="dark"] .wonda-mock-panel__head { border-bottom-color: rgba(255, 255, 255, .08) !important; }
html[data-theme="dark"] .wonda-mock-panel__head strong { color: #f1f5f9 !important; }
html[data-theme="dark"] .wonda-mock-panel__head span { color: #94a3b8 !important; }
html[data-theme="dark"] .wonda-mock-panel__code {
background: transparent !important;
border: 0 !important;
color: #e2e8f0 !important;
}
html[data-theme="dark"] .wonda-mock-list__row {
background: #1e293b !important;
border-color: rgba(255, 255, 255, .06) !important;
color: #e2e8f0 !important;
}
html[data-theme="dark"] .wonda-mock-list__row b { color: #94a3b8 !important; }
html[data-theme="dark"] .wonda-mock-list__row i { color: #86efac !important; }
/* product mock */
html[data-theme="dark"] .wonda-product-mock {
background: #0f172a !important;
border-color: rgba(255, 255, 255, .08) !important;
box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7) !important;
}
html[data-theme="dark"] .wonda-product-mock__row {
background: #1e293b !important;
border-color: rgba(255, 255, 255, .06) !important;
}
html[data-theme="dark"] .wonda-product-mock__row:hover { background: #253046 !important; }
html[data-theme="dark"] .wonda-product-mock__thumb {
background: linear-gradient(135deg, #334155 0%, #1e293b 100%) !important;
}
html[data-theme="dark"] .wonda-product-mock__body strong { color: #f1f5f9 !important; }
html[data-theme="dark"] .wonda-product-mock__body span { color: #94a3b8 !important; }
html[data-theme="dark"] .wonda-product-mock__body b { color: var(--site-pink) !important; }
/* docs page */
html[data-theme="dark"] .wonda-docs__side-inner { border-left-color: rgba(255, 255, 255, .08) !important; }
html[data-theme="dark"] .wonda-docs__side-head { color: #64748b !important; }
html[data-theme="dark"] .wonda-docs__side-nav a { color: #94a3b8 !important; }
html[data-theme="dark"] .wonda-docs__side-nav a:hover { color: var(--site-pink) !important; }
html[data-theme="dark"] .wonda-docs__section h2 { color: #f1f5f9 !important; }
html[data-theme="dark"] .wonda-docs__section h3 { color: #e2e8f0 !important; }
html[data-theme="dark"] .wonda-docs__section p,
html[data-theme="dark"] .wonda-docs__section li { color: #cbd5e1 !important; }
html[data-theme="dark"] .wonda-docs__section code { background: #1e293b !important; color: #e2e8f0 !important; }
html[data-theme="dark"] .wonda-docs__code { background: #0b1220 !important; color: #e2e8f0 !important; }
html[data-theme="dark"] .wonda-docs__note { background: rgba(59, 130, 246, .14) !important; color: #93c5fd !important; }
html[data-theme="dark"] .wonda-docs__table td {
border-bottom-color: rgba(255, 255, 255, .08) !important;
color: #cbd5e1 !important;
}
/* legal pages */
html[data-theme="dark"] .wonda-legal h2 { color: #f1f5f9 !important; }
html[data-theme="dark"] .wonda-legal p,
html[data-theme="dark"] .wonda-legal li { color: #cbd5e1 !important; }
html[data-theme="dark"] .wonda-legal code { background: #1e293b !important; color: #e2e8f0 !important; }
/* contact */
html[data-theme="dark"] .wonda-contact__form {
background: #0f172a !important;
border-color: rgba(255, 255, 255, .08) !important;
}
html[data-theme="dark"] .wonda-form-field label { color: #e2e8f0 !important; }
html[data-theme="dark"] .wonda-form-field input,
html[data-theme="dark"] .wonda-form-field textarea {
background: #0b1220 !important;
border-color: rgba(255, 255, 255, .12) !important;
color: #e2e8f0 !important;
}
html[data-theme="dark"] .wonda-form-field input:focus,
html[data-theme="dark"] .wonda-form-field textarea:focus {
background: #0b1220 !important;
border-color: var(--site-pink) !important;
}
html[data-theme="dark"] .wonda-contact__card {
background: #0f172a !important;
border-color: rgba(255, 255, 255, .08) !important;
}
html[data-theme="dark"] .wonda-contact__card strong { color: #94a3b8 !important; }
html[data-theme="dark"] .wonda-contact__card a,
html[data-theme="dark"] .wonda-contact__card span { color: #e2e8f0 !important; }
/* plan table on marketing site */
html[data-theme="dark"] .wonda-plan-table-wrap {
background: #0f172a !important;
border-color: rgba(255, 255, 255, .08) !important;
}
html[data-theme="dark"] .wonda-plan-table thead th:first-child {
background: #1e293b !important;
color: #94a3b8 !important;
}
/* cta band + footer */
html[data-theme="dark"] .wonda-cta-band__h { color: #f1f5f9 !important; }
html[data-theme="dark"] .wonda-cta-band__p { color: #cbd5e1 !important; }
html[data-theme="dark"] .wonda-site-footer { background: #070c17 !important; }
html[data-theme="dark"] .wonda-site-footer__col a,
html[data-theme="dark"] .wonda-site-footer__base,
html[data-theme="dark"] .wonda-site-footer__base a { color: #94a3b8 !important; }
html[data-theme="dark"] .wonda-site-footer__col a:hover,
html[data-theme="dark"] .wonda-site-footer__base a:hover { color: #ffffff !important; }
html[data-theme="dark"] .wonda-site-footer__col--brand p { color: #64748b !important; }
/* home trust bar */
html[data-theme="dark"] .wonda-home-trust {
background: #0f172a !important;
border-bottom-color: rgba(255, 255, 255, .06) !important;
}
html[data-theme="dark"] .wonda-home-trust__label { color: #94a3b8 !important; }
html[data-theme="dark"] .wonda-home-trust__num { color: #f1f5f9 !important; }
/* ============================================================
14. AUTH — card layout (auth.css)
============================================================ */
html[data-theme="dark"] body.wonda-body--auth {
background: radial-gradient(
900px 480px at 50% 0%,
rgba(255, 0, 126, .10),
transparent 60%
), linear-gradient(135deg, #0b1220 0%, #0f172a 100%) !important;
}
html[data-theme="dark"] .wonda-auth__card {
background: #0f172a !important;
border-color: rgba(255, 255, 255, .08) !important;
}
html[data-theme="dark"] .wonda-auth__brand,
html[data-theme="dark"] .wonda-auth__brand:hover { color: #f1f5f9 !important; }
html[data-theme="dark"] .wonda-auth__title { color: #f1f5f9 !important; }
html[data-theme="dark"] .wonda-auth__body { color: #cbd5e1; }
html[data-theme="dark"] .wonda-auth__body label { color: #e2e8f0 !important; }
html[data-theme="dark"] .wonda-auth__body input[type="email"],
html[data-theme="dark"] .wonda-auth__body input[type="password"],
html[data-theme="dark"] .wonda-auth__body input[type="text"] {
background: #1e293b !important;
border-color: rgba(255, 255, 255, .12) !important;
color: #e2e8f0 !important;
}
html[data-theme="dark"] .wonda-auth__body input:focus {
border-color: #FF007E !important;
box-shadow: 0 0 0 3px rgba(255, 0, 126, .18) !important;
}
html[data-theme="dark"] .wonda-auth__body .wonda-auth__row { color: #94a3b8 !important; }
html[data-theme="dark"] .wonda-auth__body .wonda-auth__row label { color: #e2e8f0 !important; }
html[data-theme="dark"] .wonda-auth__foot {
border-top-color: rgba(255, 255, 255, .08) !important;
color: #94a3b8 !important;
}
html[data-theme="dark"] .wonda-auth__foot a { color: #FF4DA6 !important; }
html[data-theme="dark"] .wonda-auth__credit,
html[data-theme="dark"] .wonda-auth__credit a { color: #64748b !important; }
/* ============================================================
15. AUTH v2 — split-screen (auth-v2.css)
============================================================ */
html[data-theme="dark"] body.wonda-body--authv2,
html[data-theme="dark"] body.wonda-body--authv2.wonda-body--auth {
background: #0b1220 !important;
}
html[data-theme="dark"] .wonda-authv2__form { background: #0b1220 !important; }
html[data-theme="dark"] .wonda-authv2__brand,
html[data-theme="dark"] .wonda-authv2__brand-text { color: #f1f5f9 !important; }
html[data-theme="dark"] .wonda-authv2__brand-version { color: #94a3b8 !important; }
html[data-theme="dark"] .wonda-authv2__title { color: #f1f5f9 !important; }
html[data-theme="dark"] .wonda-authv2__lead { color: #94a3b8 !important; }
html[data-theme="dark"] .wonda-authv2__body .wonda-field label { color: #e2e8f0 !important; }
html[data-theme="dark"] .wonda-authv2__body .wonda-field input {
background: #1e293b !important;
border-color: rgba(255, 255, 255, .12) !important;
color: #e2e8f0 !important;
}
html[data-theme="dark"] .wonda-authv2__body .wonda-field input:hover {
border-color: rgba(255, 255, 255, .22) !important;
}
html[data-theme="dark"] .wonda-authv2__body .wonda-field input:focus {
background: #1e293b !important;
border-color: #FF007E !important;
box-shadow: 0 0 0 4px rgba(255, 0, 126, .18) !important;
}
html[data-theme="dark"] .wonda-authv2__body .wonda-field small { color: #94a3b8 !important; }
html[data-theme="dark"] .wonda-authv2__body .wonda-auth__row { color: #94a3b8 !important; }
html[data-theme="dark"] .wonda-authv2__body .wonda-auth__row label { color: #e2e8f0 !important; }
html[data-theme="dark"] .wonda-authv2__body .wonda-auth__row a { color: #FF4DA6 !important; }
html[data-theme="dark"] .wonda-authv2__foot {
border-top-color: rgba(255, 255, 255, .08) !important;
color: #94a3b8 !important;
}
html[data-theme="dark"] .wonda-authv2__foot a { color: #FF4DA6 !important; }
html[data-theme="dark"] .wonda-authv2__credit { color: #64748b !important; }
html[data-theme="dark"] .wonda-authv2__credit a { color: #64748b !important; }
/* notices inside auth */
html[data-theme="dark"] .wonda-authv2__body .wonda-notice--ok,
html[data-theme="dark"] .wonda-auth__body .wonda-notice--ok {
background: rgba(21, 128, 61, .15) !important;
color: #86efac !important;
border-color: rgba(21, 128, 61, .35) !important;
}
html[data-theme="dark"] .wonda-authv2__body .wonda-notice--error,
html[data-theme="dark"] .wonda-auth__body .wonda-notice--error {
background: rgba(185, 28, 28, .15) !important;
color: #fca5a5 !important;
border-color: rgba(185, 28, 28, .35) !important;
}
html[data-theme="dark"] .wonda-authv2__body .wonda-notice--info,
html[data-theme="dark"] .wonda-auth__body .wonda-notice--info {
background: rgba(59, 130, 246, .15) !important;
color: #93c5fd !important;
border-color: rgba(59, 130, 246, .35) !important;
}
html[data-theme="dark"] .wonda-authv2__body .wonda-notice--warn,
html[data-theme="dark"] .wonda-auth__body .wonda-notice--warn {
background: rgba(180, 83, 9, .18) !important;
color: #fbbf24 !important;
border-color: rgba(180, 83, 9, .45) !important;
}
/* showcase panel inside authv2 already covered in §13 */
html[data-theme="dark"] .wonda-authv2__showcase { background: #0b1220 !important; }
html[data-theme="dark"] .wonda-auth__title { color: #f1f5f9 !important; }
/* ============================================================
16. WELCOME CARD (dashboard greeting)
Migrated from the two WONDA_WELCOME_CSS @media blocks in
app-v2.css. Those relied on the OS media query, which ignored
the explicit ?theme=light override. Now attribute-driven.
============================================================ */
html[data-theme="dark"] .wonda-welcome {
background:
radial-gradient(700px 220px at 100% 0%, rgba(255, 0, 126, .08), transparent 60%),
linear-gradient(180deg, #0f172a 0%, #101a2e 100%);
border-color: rgba(255, 255, 255, .06);
}
html[data-theme="dark"] .wonda-welcome__title { color: #f1f5f9; }
html[data-theme="dark"] .wonda-welcome__eyebrow { color: #94a3b8; }
html[data-theme="dark"] .wonda-welcome__chip {
background: rgba(255, 255, 255, .05);
border-color: rgba(255, 255, 255, .08);
color: #cbd5e1;
}
html[data-theme="dark"] .wonda-welcome__chip strong { color: #f1f5f9; }
html[data-theme="dark"] .wonda-welcome__chip--info {
background: rgba(59, 130, 246, .15);
border-color: rgba(59, 130, 246, .30);
color: #93c5fd;
}
html[data-theme="dark"] .wonda-welcome__chip--warn {
background: rgba(245, 158, 11, .15);
border-color: rgba(245, 158, 11, .35);
color: #fbbf24;
}
html[data-theme="dark"] .wonda-welcome__chip--warn strong { color: #fbbf24; }
html[data-theme="dark"] .wonda-welcome__chip--danger {
background: rgba(185, 28, 28, .18);
border-color: rgba(185, 28, 28, .40);
color: #fca5a5;
}
/* ==== END WONDA_WELCOME_DARK ==== */
/* END theme.css */