/* dashboard.css — customer dashboard. Colors/typography/buttons come from the * shared /css/* token system; the dark theme is set by * in dashboard.html. Loads last so it can keep shimmer rings circular. * * Layout: topbar → .dash-shell (sidebar nav + main). Sections are hash-routed * (#overview, #website, #leads, …) and toggled by dashboard-app.js. The one loud * element is the .now-band beacon (shimmer ring + stage headline); everything * else stays quiet cards. */ .dash-body { min-height: 100vh; background: var(--paper); } .dash-topbar { display: flex; align-items: center; justify-content: space-between; padding: 16px var(--pad); border-bottom: 1px solid var(--line); } .dash-topbar .brand { color: var(--ink); font-size: 1.2rem; } .dash-topbar-right { display: flex; align-items: center; gap: var(--s-4); } .stage-pill { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--surface-2); color: var(--muted); } /* ~375px: the stage pill collided with the brand wordmark (audit 2026-08-02). The stage * is already shown by the pipeline tracker (and the /demo bar), so the pill can go. */ @media (max-width: 520px) { .stage-pill { display: none; } } .dash-wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding: var(--s-6) var(--pad) var(--s-9); } /* ---- Auth + status cards ---- */ .auth-card { max-width: 460px; margin: var(--s-7) auto; padding: var(--s-7); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-2); } .auth-card h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); } .auth-card .field { margin-top: var(--s-5); } .auth-card .btn-block { margin-top: var(--s-4); } .center-block { text-align: center; } .auth-ic { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; margin-bottom: var(--s-4); border-radius: var(--r-pill); background: var(--tint); color: var(--forest-2); } .spinner { display: inline-block; width: 22px; height: 22px; margin-bottom: var(--s-3); border: 3px solid rgba(143, 230, 184, .25); border-top-color: var(--forest-2); border-radius: 50%; animation: dashspin .7s linear infinite; } @keyframes dashspin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .spinner { animation: none; } } /* ---- Shell ---- */ .dash-shell { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s-7); align-items: start; } .dash-nav { position: sticky; top: var(--s-5); display: grid; gap: 2px; } .dnav { display: flex; align-items: center; gap: var(--s-3); padding: 10px 12px; border-radius: var(--r-sm); color: var(--muted); font-weight: 600; font-size: 0.94rem; text-decoration: none; border: 1px solid transparent; transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease); } .dnav .ic { width: 17px; height: 17px; flex: none; opacity: .8; } .dnav:hover { color: var(--ink); background: var(--surface-2); } .dnav[aria-current="page"] { color: var(--ink); background: var(--surface); border-color: var(--line); box-shadow: var(--sh-1); } .dnav[aria-current="page"] .ic { color: var(--gold); opacity: 1; } .dnav-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-pill); background: var(--gold); color: var(--gold-ink); font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; } .dash-main { min-width: 0; } .dsec { display: grid; gap: var(--s-5); } /* ---- Head ---- */ .dash-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-6); } .dash-head h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 0; } #dash-business { transition: color var(--dur-2) var(--ease); } #dash-business:hover { background-image: linear-gradient(100deg, var(--gold-dark) 0%, var(--gold) 25%, var(--shimmer-peak) 50%, var(--gold) 75%, var(--gold-dark) 100%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: goldSheen 2.6s linear infinite; } @media (prefers-reduced-motion: reduce) { #dash-business:hover { animation: none; background-position: 0 center; } } /* ---- The beacon: NOW band (the page's one loud element) ---- */ .now-band { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-5); align-items: center; padding: var(--s-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-2); } .now-dot { --shimmer-fill: var(--surface-2); width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .now-dot-core { width: 12px; height: 12px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 18px 2px rgba(215, 182, 93, .45); } .now-copy h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin-bottom: var(--s-2); } .now-copy .panel-body { margin-bottom: 0; } .now-action { align-self: center; } /* ---- Pipeline stepper ---- */ .pipeline { display: flex; margin: var(--s-2) 0 var(--s-3); } .pstep { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; min-width: 0; } .pstep::before { content: ""; position: absolute; top: 17px; left: -50%; width: 100%; height: 2px; background: var(--line-2); z-index: 0; } .pstep:first-child::before { display: none; } .pstep.is-done::before, .pstep.is-active::before { background: var(--forest-2); } .pstep .dot { position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; /* background-color (not the `background` shorthand) so it doesn't reset the * .shimmer background-image on the active dot. */ background-color: var(--surface-2); border: 1.5px solid var(--line-2); color: var(--faint); } .pstep.is-done .dot { background-color: var(--forest-2); border-color: transparent; color: #fff; } .pstep.is-active .dot { --shimmer-fill: var(--surface-2); border-radius: 50%; color: var(--ink); } .pstep .dot .ic { width: 16px; height: 16px; } .pstep .plabel { margin-top: var(--s-2); font-size: 0.78rem; color: var(--muted); line-height: 1.25; } .pstep.is-active .plabel { color: var(--ink); font-weight: 600; } /* ---- Panels ---- */ .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-6); box-shadow: var(--sh-1); } .panel h2 { font-size: 1.2rem; margin-bottom: var(--s-3); } .panel-body { color: var(--muted); margin-bottom: var(--s-4); } .panel-body:last-child { margin-bottom: 0; } .panel-headrow { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); } .review-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); } .changes-box { margin-top: var(--s-4); } /* ---- Overview grid ---- */ .ov-grid { display: grid; grid-template-columns: 1.2fr 0.8fr 1fr; gap: var(--s-5); } .chk-count { color: var(--muted); font-family: var(--font-mono); font-size: 0.78rem; font-weight: 400; margin-left: var(--s-2); } .checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); } .checklist li { display: flex; align-items: center; gap: var(--s-3); color: var(--muted); font-size: 0.95rem; } .checklist li.is-done { color: var(--ink); } .checklist li a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; } .chk-dot { flex: none; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--line-2); background: var(--surface-2); color: #fff; } .checklist li.is-done .chk-dot { background: var(--forest-2); border-color: transparent; } .chk-dot .ic { width: 12px; height: 12px; } .stat-panel { display: flex; flex-direction: column; align-items: flex-start; } .stat-num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1; color: var(--ink); margin: var(--s-2) 0 var(--s-2); } .stat-panel .btn { margin-top: auto; } .activity-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); } .activity-list li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); font-size: 0.92rem; color: var(--ink); padding-bottom: var(--s-3); border-bottom: 1px dashed var(--line); } .activity-list li:last-child { border-bottom: none; padding-bottom: 0; } .act-when { flex: none; color: var(--faint); font-size: 0.8rem; } /* ---- Website: preview ---- */ .preview-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-4); } .preview-head h2 { margin-bottom: 0; } .preview-tools { display: flex; align-items: center; gap: var(--s-3); } .device-toggle { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r-pill); overflow: hidden; } .devbtn { border: none; background: transparent; color: var(--muted); font: inherit; font-size: 0.82rem; font-weight: 600; padding: 6px 14px; cursor: pointer; } .devbtn[aria-pressed="true"] { background: var(--surface-2); color: var(--ink); } .preview-stage { border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; background: var(--surface-2); display: flex; justify-content: center; } .preview-stage iframe { width: 100%; height: min(64vh, 640px); border: 0; display: block; background: #fff; } .preview-stage.is-phone iframe { width: 390px; max-width: 100%; } /* ---- Leads ---- */ .lead-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); } .lead-item { border: 1px solid var(--line); border-radius: var(--r); padding: var(--s-4) var(--s-5); background: var(--surface-2); } .lead-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3); } .lead-top strong { color: var(--ink); } .lead-chip { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--r-pill); background: var(--tint); color: var(--forest-2); border: 1px solid var(--line); } .lead-when { margin-left: auto; color: var(--faint); font-size: 0.8rem; } .lead-detail { margin: var(--s-2) 0 0; color: var(--muted); font-size: 0.94rem; } .lead-foot { margin: var(--s-2) 0 0; color: var(--faint); font-size: 0.85rem; } .empty-state { padding: var(--s-5); border: 1px dashed var(--line-2); border-radius: var(--r); color: var(--muted); } /* ---- Documents ---- */ .doc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); justify-items: start; } /* ---- Toast ---- */ .toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 8px); padding: 12px 20px; border-radius: var(--r-pill); background: var(--deep); color: #fff; font-size: 0.92rem; font-weight: 600; border: 1px solid var(--line-2); box-shadow: var(--sh-2); opacity: 0; transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); z-index: 60; pointer-events: none; } .toast.is-on { opacity: 1; transform: translate(-50%, 0); } @media (prefers-reduced-motion: reduce) { .toast { transition: none; } } /* ---- Responsive ---- */ /* ---- Burger nav (small windows): the section nav becomes a left drawer behind a * hamburger in the topbar — never a horizontal scroll strip. ---- */ .dash-topbar-left { display: flex; align-items: center; gap: var(--s-3); } .dash-burger { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--surface-2); color: var(--muted); cursor: pointer; } .dash-burger:hover { color: var(--ink); border-color: var(--gold); } .dash-burger .ic { width: 18px; height: 18px; } .dash-burger .ic-close { display: none; } .dash-burger.is-open .ic-burger { display: none; } .dash-burger.is-open .ic-close { display: inline; } .dash-burger[hidden] { display: none !important; } .nav-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 89; } @media (max-width: 900px) { .dash-shell { grid-template-columns: 1fr; } .dash-burger { display: inline-flex; } .dash-nav { position: fixed; top: 0; left: 0; bottom: 0; width: min(300px, 82vw); z-index: 90; margin: 0; padding: var(--s-7) var(--s-4) var(--s-6); align-content: start; gap: var(--s-2); background: var(--surface); border-right: 1px solid var(--line); box-shadow: var(--sh-3); overflow-y: auto; transform: translateX(-103%); transition: transform var(--dur-3) var(--ease); } .dash-nav.is-open { transform: none; } .dnav { padding: 12px 14px; font-size: 1rem; } .ov-grid { grid-template-columns: 1fr; } .now-band { grid-template-columns: auto minmax(0, 1fr); } .now-action { grid-column: 1 / -1; } .pstep .plabel { font-size: 0.7rem; } .preview-stage iframe { height: 60vh; } } @media (prefers-reduced-motion: reduce) { .dash-nav { transition: none; } } /* ---- Theme toggle (topbar): sun shows on dark/black, moon on light ---- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--surface-2); color: var(--muted); cursor: pointer; transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); } .theme-toggle:hover { color: var(--gold); border-color: var(--gold); } .theme-toggle .ic { width: 17px; height: 17px; } .theme-toggle .ic-moon { display: none; } [data-theme="light"] .theme-toggle .ic-sun, :root:not([data-theme]) .theme-toggle .ic-sun { display: none; } [data-theme="light"] .theme-toggle .ic-moon, :root:not([data-theme]) .theme-toggle .ic-moon { display: inline; } /* ---- Starfield ambience (.starfx) — the dialer queue/activity panel effect, * one card per section. The card is the window onto the field (mirrors the * dialer's .ck-sidefx: dim, behind everything, never a competing light source). ---- */ .has-starfx { position: relative; overflow: hidden; } .starfx { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .34; pointer-events: none; z-index: 0; } /* Ink stars need more presence than white-on-black — the dark canvas dims the field * to ambience, the light canvas would erase it at the same level (owner 2026-07-26). */ [data-theme="light"] .starfx { opacity: .62; } .has-starfx > *:not(.starfx) { position: relative; z-index: 1; } /* On the light theme the SAME field renders with dark ink/forest/gold stars and * normal blending (dashboard-app.js swaps palettes on theme change) — additive * white stars would vanish on paper. Hidden only under reduced motion. */ @media (prefers-reduced-motion: reduce) { .starfx { display: none; } } /* ---- Gold hover ring: every dashboard card reveals a shimmering gold border. * Same double background-clip mechanic as .shimmer (shimmer.css) with GOLD * anchors; cards keep their 1px border footprint so nothing shifts. ---- */ .panel, .now-band, .auth-card, .lead-item { transition: box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); } .panel:hover, .now-band:hover, .auth-card:hover, .lead-item:hover { border-color: transparent; background-image: linear-gradient(var(--card-fill, var(--surface)), var(--card-fill, var(--surface))), conic-gradient(from var(--shimmer-angle), var(--gold-dark) 0deg, var(--gold-dark) 70deg, var(--gold) 95deg, var(--shimmer-peak) 110deg, var(--gold) 125deg, var(--gold-dark) 150deg, var(--gold-dark) 360deg); background-origin: border-box; background-clip: padding-box, border-box; box-shadow: 0 0 16px rgba(215, 182, 93, .18), var(--sh-1); animation: shimmerRotate var(--shimmer-speed) linear infinite; } .lead-item { --card-fill: var(--surface-2); } @media (prefers-reduced-motion: reduce) { .panel:hover, .now-band:hover, .auth-card:hover, .lead-item:hover { animation: none; border-color: var(--gold); background-image: none; } } /* ---- /demo walkthrough (2026-07-27): presenter bar + analytics/SEO surfaces ---- * Wave D 2026-08-02: the bar docks at the TOP (below the ~70px topbar) instead of the * bottom, wraps instead of truncating on narrow screens (the old overflow-x scroll hid * stages on mobile with no affordance), and is draggable anywhere by its DEMO tag — * dashboard-app.js writes inline left/top via the CSSOM during a drag. */ .demo-bar { position: fixed; top: 78px; bottom: auto; left: 50%; transform: translateX(-50%); z-index: 80; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; padding: 8px 10px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-2); /* Intrinsic width: with left:50% a fixed box would otherwise shrink-to-fit HALF the * viewport and wrap early; max-content keeps one row until the real cap bites. */ width: max-content; max-width: calc(100vw - 16px); } .demo-bar.is-dragging { box-shadow: var(--sh-3); } .demo-tag { font-size: .66rem; font-weight: 700; letter-spacing: .1em; padding: 3px 8px; border-radius: var(--r-pill); background: var(--gold); color: var(--gold-ink); margin-right: 4px; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; } .demo-bar.is-dragging .demo-tag { cursor: grabbing; } .demo-bar .dstep { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: .82rem; padding: 6px 11px; border-radius: var(--r-pill); cursor: pointer; white-space: nowrap; } .demo-bar .dstep:hover { color: var(--ink); background: var(--surface-2); } .demo-bar .dstep.is-on { background: var(--gold); color: var(--gold-ink); font-weight: 600; } .demo-bar .dhelp { width: 26px; height: 26px; margin-left: 2px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-2); border-radius: 50%; background: var(--surface-2); color: var(--muted); font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; } .demo-bar .dhelp:hover { color: var(--ink); border-color: var(--gold); } /* First-visit tour offer: a small pill, never an auto-started overlay. */ .demo-tour-offer { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 79; display: inline-flex; align-items: center; gap: 2px; padding: 4px 4px 4px 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); box-shadow: var(--sh-2); } .demo-tour-go { border: 0; background: var(--gold); color: var(--gold-ink); font: inherit; font-size: .84rem; font-weight: 700; padding: 7px 14px; border-radius: var(--r-pill); cursor: pointer; } .demo-tour-go:hover { filter: brightness(1.06); } .demo-tour-x { border: 0; background: transparent; color: var(--muted); cursor: pointer; font: inherit; font-size: .8rem; padding: 6px 8px; } .demo-tour-x:hover { color: var(--ink); } /* ---- Guided-tour popover theme (driver.js v1.6.0, /demo only). Mirrors the studio's * `lh-tour` popoverClass theming, but as REAL stylesheet rules: this site's CSP is * style-src 'self', so the studio's injected-