/* Project Moneyball — Performance Radar UI (dark mode, renewal-workshop look & feel). Tokens from BRAND-BOOK.md; gold (#FFBE17) = accent / running glow; green = met/exceeded. */ :root { --ink: #1e1e1e; --bg: #161616; /* page */ --panel: #232323; /* cards */ --panel-2: #2c2c2c; /* inputs, raised */ --header-bg: #111111; --border: rgba(255, 255, 255, 0.12); --border-strong: rgba(255, 255, 255, 0.22); --text: #e2e2e2; --muted: #9b9b9b; --heading: #ece9e1; /* soft warm white — avoids the harsh pure-white "glow" */ /* Canonical brand core — must equal STUDIO-BRAND-BOOK.md › "Brand tokens" (never fork). */ --gold: #ffbe17; /* signature accent */ --cream: #faf9f6; /* canonical off-white surface (= growth-engine CREAM) */ --near-white: #f5f2ea; /* canonical near-white (= growth-engine WHITE) */ --deep-dark: #17140e; /* canonical deepest near-black (= growth-engine DARK) */ --gold-tint: #fff2d1; /* legacy warm gold tint — accent backgrounds only (NOT brand-core) */ --teal: #14646e; /* landing sphere teal — the app's second brand accent */ --teal-tint: #e6f0f1; --green: #34c46a; --green-deep: #2a9d57; --red: #e0584f; --font-display: 'Bebas Neue', system-ui, sans-serif; --font-body: 'Open Sans', system-ui, sans-serif; --fs-body: 0.75rem; /* LOCKED default body-copy size = 13.5px at the 18px root (see ui-design-guidelines) */ --container: 1400px; /* legacy token (no longer caps width — the layout now runs full-bleed) */ --gutter: 40px; } * { box-sizing: border-box; } /* Larger base type for easier reading; most sizes are rem so they scale from here. */ /* Always reserve the scrollbar gutter so the fixed strip (and all content) keeps the same width on short pages (Cross-Skill) and long ones (Seller Skills), no few-pixel shift between lenses. */ html { font-size: 18px; scrollbar-gutter: stable; } body { margin: 0; font-family: var(--font-body); font-size: var(--fs-body); color: var(--text); background: var(--bg); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Full-bleed container — header, toolbar, and content span the whole page width (a comfortable side gutter only), instead of being capped and centered. */ .container { max-width: none; margin: 0; padding: 0 var(--gutter); width: 100%; } .band { width: 100%; } /* ============================ App shell: left side-nav + main region ============================ Lean, minimalist chrome. The side-nav is semi-black (#1a1a1a) with the same faint PCB texture as the page; items are light grey, the selected item is gold. The scorer and the roadmap placeholders are `.view` blocks toggled by ui/sidenav.ts (pure show/hide — the scorer DOM is never torn down). */ /* overflow-x: clip removes any unintended page-level horizontal scrollbar. A stray h-scrollbar makes 100vh include its strip, so the sticky sidenav's calc(100vh - 62px) overshoots and the menu shifts up ~15px at the page bottom. `clip` (not `hidden`) clips without creating a scroll container, so the sticky top bar + sidenav keep working. */ .app-shell { display: flex; flex-direction: column; min-height: 100vh; overflow-x: clip; } /* Full-width top header — brand lockup (always visible, survives collapse) on the left, utility nav on the right. Sticky + solid bg so it stays pinned across scroll and view changes. */ .app-header { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 22px; height: 62px; padding: 0 var(--gutter) 0 24px; border-bottom: 1px solid var(--border); background: #2c2c2c; } .app-brand { display: flex; align-items: center; gap: 12px; flex: none; } .app-brand .brand-score { font-size: 2rem; } .brand-logo { height: 34px; width: auto; display: block; } /* The line is contextual — ui/tagline.ts swaps it per view and cross-fades via .is-fading. Nowrap keeps the longest pool lines on one row; the header hides it entirely once space runs short. */ .app-header-tagline { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: .09em; text-transform: uppercase; color: var(--heading); opacity: .78; padding-left: 22px; border-left: 1px solid var(--border); white-space: nowrap; transition: opacity .2s ease; } .app-header-tagline.is-fading { opacity: 0; } @media (prefers-reduced-motion: reduce) { .app-header-tagline { transition: none; } } @media (max-width: 1200px) { .app-header-tagline { display: none; } } .app-body { display: flex; align-items: flex-start; flex: 1 1 auto; } .sidenav { flex: 0 0 236px; width: 236px; position: sticky; top: 62px; height: calc(100vh - 62px); display: flex; flex-direction: column; background-color: #2c2c2c; border-right: 1px solid var(--border); overflow: hidden; z-index: 20; } .sidenav > * { position: relative; z-index: 1; } /* Collapse control: a subtle chevron at the top of the rail (no heavy bar/border). It rotates to point the other way when collapsed, hinting expand. */ .sidenav-top { display: flex; align-items: center; justify-content: flex-end; padding: 10px 12px 4px; } .sidenav-toggle { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; transition: background .12s, color .12s, transform .18s; } .sidenav-toggle svg { width: 17px; height: 17px; } .sidenav-toggle:hover { background: rgba(255, 255, 255, .06); color: var(--gold); } .sidenav.is-collapsed .sidenav-toggle svg { transform: rotate(180deg); } .sidenav-nav { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; } .sidenav-nav::-webkit-scrollbar { width: 0; height: 0; display: none; } .nav-item { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: transparent; border: none; border-radius: 8px; padding: 7px 12px; font-family: var(--font-body); font-size: .75rem; font-weight: 600; color: var(--muted); cursor: pointer; transition: background .12s, color .12s; } .nav-item svg { flex: none; width: 20px; height: 20px; } .nav-item:hover { background: rgba(255, 255, 255, .05); color: var(--text); } /* Selected page: gold font only — no background fill. */ .nav-item.is-active { color: var(--gold); background: transparent; } /* "New" indicator on the What's New nav item: a small gold dot, shown until the page is opened (toggled by ui/sidenav.ts against WHATS_NEW_VERSION). */ .nav-dot { flex: 0 0 auto; margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); display: none; } .nav-dot.is-shown { display: block; } /* Collapsed rail hides labels, so pin the dot to the icon's top-right corner instead. */ .sidenav.is-collapsed .nav-dot.is-shown { position: absolute; top: 6px; right: 9px; margin: 0; } /* Contextual "go back" action (top of the rail): a gold-tinted pill, distinct from the destination nav items, shown only while reading Getting Started after an in-app CTA. Toggled from main.ts. */ .nav-back { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: rgba(255, 190, 23, .12); border: 1px solid rgba(255, 190, 23, .38); border-radius: 8px; padding: 7px 12px; margin-bottom: 8px; font-family: var(--font-body); font-size: .75rem; font-weight: 700; color: var(--gold); cursor: pointer; transition: background .12s, border-color .12s; } .nav-back svg { flex: none; width: 18px; height: 18px; } .nav-back:hover { background: rgba(255, 190, 23, .2); border-color: rgba(255, 190, 23, .58); } .nav-back[hidden] { display: none; } .sidenav.is-collapsed .nav-back { justify-content: center; padding: 8px 0; gap: 0; } .sidenav.is-collapsed .nav-back .nav-back-txt { display: none; } .sidenav-foot { height: 60px; display: flex; flex-direction: column; justify-content: center; padding: 0 10px; border-top: 1px solid var(--border); } .nav-util { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 8px; color: var(--muted); font-size: .75rem; font-weight: 600; text-decoration: none; transition: background .12s, color .12s; } .nav-util svg { flex: none; width: 18px; height: 18px; } .nav-util:hover { background: rgba(255, 255, 255, .05); color: var(--text); } /* Account chip (rail foot): avatar + first name + chevron, opening an upward popover with Account + Sign out. Replaces the old Sign out button. Collapsed rail shows the avatar only. */ .sidenav-foot { position: relative; } .user-chip { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: transparent; border-radius: 10px; color: var(--text); cursor: pointer; font: inherit; text-align: left; transition: background .12s; } .user-chip:hover { background: rgba(255, 255, 255, .05); } .user-chip[aria-expanded="true"] { background: rgba(255, 255, 255, .08); } .user-avatar { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--panel-2); color: var(--gold); font-size: .72rem; font-weight: 700; text-transform: uppercase; box-shadow: inset 0 0 0 1.5px rgba(255, 190, 23, .5); } .user-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .user-chip-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; font-weight: 600; } .user-chevron { flex: none; width: 16px; height: 16px; color: var(--muted); transition: transform .15s; } .user-chip[aria-expanded="true"] .user-chevron { transform: rotate(180deg); } .user-menu { position: absolute; left: 10px; right: 10px; bottom: calc(100% - 4px); margin-bottom: 8px; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 12px; padding: 6px; box-shadow: 0 12px 30px rgba(0, 0, 0, .45); display: flex; flex-direction: column; gap: 2px; z-index: 40; } .user-menu[hidden] { display: none; } .user-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; background: transparent; border-radius: 8px; color: var(--text); cursor: pointer; font: inherit; font-size: .78rem; font-weight: 600; text-align: left; transition: background .12s, color .12s; } .user-menu-item svg { flex: none; width: 17px; height: 17px; color: var(--muted); } .user-menu-item:hover { background: rgba(255, 255, 255, .06); } .user-menu-item:hover svg { color: var(--text); } #user-menu-signout:hover, #user-menu-signout:hover svg { color: #ff7a6b; } .sidenav.is-collapsed .user-chip { justify-content: center; padding: 8px 0; gap: 0; } .sidenav.is-collapsed .user-chip-name, .sidenav.is-collapsed .user-chevron { display: none; } .sidenav.is-collapsed .user-menu { left: calc(100% + 8px); right: auto; bottom: 8px; width: 190px; } /* Account view: profile card (avatar + name + email + a button into Clerk's profile/photo UI). */ .acct-profile { display: flex; align-items: center; gap: 14px; padding: 2px 0 4px; margin-bottom: 20px; background: transparent; border: 0; } .acct-avatar { flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--panel-2); color: var(--gold); font-size: 1.15rem; font-weight: 700; text-transform: uppercase; box-shadow: inset 0 0 0 2px rgba(255, 190, 23, .5); } .acct-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .acct-profile-text { flex: 0 1 auto; min-width: 0; } /* don't grow, so the Edit button sits next to the name */ .acct-profile-name { font-size: 1.05rem; font-weight: 800; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .acct-profile-email { font-size: .8rem; color: #5a5a5a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .acct-profile-actions { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-left: 40px; } .acct-profile-actions .react-nav.acct-edit-trigger { flex: none; padding: 7px 20px; text-align: center; } .acct-profile-namerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .acct-photo-actions { display: flex; align-items: center; gap: 14px; margin-top: 5px; } .acct-photo-msg { font-size: .72rem; color: #6a6a6a; } .acct-name-inp { min-width: 180px; } .acct-microbtn { background: none; border: 0; padding: 0; color: #14646e; font: inherit; font-size: .72rem; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .acct-microbtn:hover { color: #0f4a52; } .acct-microbtn[disabled] { opacity: .5; cursor: default; text-decoration: none; } .acct-btn-outline { background: none; border: 1px solid #cfd4d3; border-radius: 8px; padding: 6px 16px; color: #14646e; font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; transition: border-color .12s, background .12s; } .acct-btn-outline:hover { border-color: #14646e; background: rgba(20, 100, 110, .06); } .acct-edit-photo { display: flex; align-items: center; gap: 16px; width: 100%; margin-bottom: 2px; } .acct-avatar--lg { width: 64px; height: 64px; font-size: 1.35rem; box-shadow: inset 0 0 0 2px rgba(255, 190, 23, .5); } .acct-sec-link { width: 100%; text-align: left; margin-top: 10px; color: #6a6a6a; font-weight: 600; } .acct-sec-link:hover { color: #14646e; } .acct-edit-panel { display: flex; flex-direction: column; } .acct-edit-h { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #8a8a8a; margin: 0 0 12px; } /* Native sign-in & security block (rendered in our own look, no embedded Clerk widget). */ .acct-sec { margin-top: 22px; border-top: 1px solid rgba(0, 0, 0, .1); } .acct-sec-loading { font-size: .78rem; color: #9a9a9a; padding-top: 14px; } .acct-sec-row { display: flex; gap: 18px; padding: 14px 0; border-bottom: 1px solid rgba(0, 0, 0, .07); align-items: flex-start; } .acct-sec-row:last-child { border-bottom: none; } .acct-sec-k { flex: none; width: 130px; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #8a8a8a; padding-top: 3px; } .acct-sec-v { flex: 1 1 auto; min-width: 0; font-size: .82rem; color: #1e1e1e; } .acct-sec-devices { display: flex; flex-direction: column; gap: 14px; } .acct-sec-device { display: flex; align-items: flex-start; gap: 12px; } .acct-sec-device-txt { flex: 1 1 auto; min-width: 0; } .acct-sec-device-title { display: flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 600; color: #1e1e1e; } .acct-sec-device-detail { font-size: .74rem; color: #7a7a7a; margin-top: 2px; } .acct-sec-badge { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #14646e; background: rgba(20, 100, 110, .1); border-radius: 4px; padding: 1px 6px; } .acct-sec-danger { color: #b3433b; } .acct-sec-danger:hover { color: #922f28; } .acct-edit-slot:not(:empty) { margin: 4px 0 20px; } @media (max-width: 560px) { .acct-profile { flex-wrap: wrap; } .acct-profile-actions { flex-basis: 100%; flex-direction: row; align-items: center; gap: 18px; } } .app-region { flex: 1 1 auto; min-width: 0; min-height: calc(100vh - 62px); display: flex; flex-direction: column; } /* ===================== Light working-canvas theme (off-white) ===================== The content region becomes an off-white surface; the top header and left rail stay dark chrome. Framed elements (cards, buttons, the Message Center terminal, the runtime/lifecycle chips, weight dropdowns) keep their dark fills and read as intentional modules on the light canvas — only the FRAMELESS text and cell outlines are re-coloured dark for contrast. Contrast vs #E8E2DA: #1a1a1a 13.5:1, #5a5a5a 5.4:1, score states ≥3.6:1 (all AA for their text size). */ .app-region { position: relative; background-color: #F1F2F3; } .app-region > * { position: relative; z-index: 1; } /* "Keep the momentum" banner: slides down from under the top frame after a call is scored. The overlay sits at the top of .app-region with a z-index BELOW the sticky header (z:30), so the banner slides up behind the opaque header to hide — no clipping needed. Only the banner itself is interactive; the rest of the overlay is click-through. */ /* Hidden by default via visibility, NOT just the transform below: the overlay sits at top:0 of the (header-offset) .app-region, so translateY(calc(-100% - 90px)) alone leaves the tall banner's lower edge on-screen — and pointer-events:auto made that gold strip clickable over Home. visibility:hidden guarantees it's gone until .is-open, regardless of layout. The delayed visibility transition lets the slide-UP finish on close before it disappears; on open it flips visible instantly (delay 0). */ .app-region > .momentum-overlay { position: absolute; top: 0; left: 0; right: 0; z-index: 25; display: flex; justify-content: flex-end; padding: 0 var(--gutter); pointer-events: none; visibility: hidden; transition: visibility 0s linear 1.5s; } .momentum-overlay.is-open { visibility: visible; transition-delay: 0s; } .momentum-banner { pointer-events: auto; margin-top: 7px; width: 100%; max-width: 452px; background: var(--gold); color: #1a1a1a; border-radius: 11px; padding: 9px 22px 8px; text-align: center; box-shadow: 0 16px 34px -10px rgba(0, 0, 0, .42), 0 -5px 20px -8px rgba(0, 0, 0, .34); transform: translateY(calc(-100% - 90px)); transition: transform 1.5s cubic-bezier(.22, .61, .36, 1); will-change: transform; } .momentum-overlay.is-open .momentum-banner { transform: translateY(0); } .momentum-h { font-family: var(--font-body); font-size: .95rem; font-weight: 700; line-height: 1.15; margin: 0 0 3px; color: #1a1a1a; } .momentum-lead { font-size: .79rem; line-height: 1.25; margin: 0 0 3px; color: #1a1a1a; } .momentum-links { font-size: .79rem; font-weight: 400; line-height: 1.25; margin: 0 0 6px; color: #2a2a2a; } .momentum-link { background: none; border: none; font-family: inherit; font-size: inherit; font-weight: 700; color: #1a1a1a; text-decoration: none; cursor: pointer; padding: 0; } .momentum-link:hover { text-decoration: underline; text-underline-offset: 2px; } .momentum-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid rgba(0, 0, 0, .18); padding-top: 6px; } .momentum-dismiss { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; color: #2a2a2a; cursor: pointer; } .momentum-dismiss input { cursor: pointer; } .momentum-close { background: none; border: none; font-family: inherit; font-size: .78rem; font-weight: 700; color: #1a1a1a; cursor: pointer; padding: 2px 4px; } .momentum-close:hover { text-decoration: underline; } @media (prefers-reduced-motion: reduce) { .momentum-banner { transition: none; } } /* Frameless headings + labels → dark. */ .app-region .section-h, .app-region .col-h, .app-region .pt-h, .app-region .view-h { color: #1a1a1a; } .app-region .pt-h.h-weight { color: #5a5a5a; } .app-region .pt-label { color: #1f1f1f; } .app-region .view-sub { color: #5a5a5a; } .app-region [data-view="cross-skill"] .view-sub { color: #1a1a1a; } /* Call Details (label muted, value was gold → dark). */ .app-region .cd-label { color: #5a5a5a; } .app-region .cd-value { color: #1a1a1a; } /* Final Score — meta labels/values + the big number (was gold; re-mapped to dark-enough semantics). */ .app-region .score-meaning-label, .app-region .score-coverage-label { color: #5a5a5a; } .app-region .score-meaning, .app-region .score-coverage { color: #1a1a1a; } .app-region .score-circle { color: #9a6a00; } .app-region .score-circle.circle-good { color: #1d7a40; } .app-region .score-circle.circle-mid { color: #9a6a00; } /* Light region: --gold (#ffbe17) is unreadable as text on white, so the optional-skill bonus takes the same darker gold the mid-score circle already uses here. */ .app-region .score-bonus { color: #9a6a00; } .app-region .score-circle.circle-bad { color: #b3433b; } /* Empty scorecard cell outlines → dark so they read on light (filled Actual/Expected cells keep their green/gold fills, which set their own border colour). */ .app-region .seg-cell { border-color: rgba(0, 0, 0, .32); } /* Lifecycle arrows + the gold dividers, tuned for the light canvas. */ .app-region .lc-arrow { color: #5a5a5a; opacity: .85; } .app-region .divider { border-top-color: rgba(154, 106, 0, .5); } .app-region .divider-strong { border-top-color: rgba(154, 106, 0, .9); } /* Footer now sits on the light canvas. */ .app-region .site-footer { border-top-color: rgba(0, 0, 0, .14); } .app-region .sf-brand, .app-region .sf-contact, .app-region .sf-social { color: #5a5a5a; } .app-region .sf-contact a { color: #9a6a00; } .app-region .sf-site { color: #9a6a00; } /* ---- Header utility buttons (Quick Help, Getting Started, Support, …): frameless light-grey text that turns gold on hover. ---- */ .topbar-nav .btn, .topbar-nav .btn:visited { background: transparent; border-color: transparent; color: #dcdcdc; } .topbar-nav .btn:hover:not(:disabled) { background: transparent; border-color: transparent; color: var(--gold); } /* "Advanced" enablement toggle: gold label so it reads as a state control, not a nav link. The state word is dim when OFF, gold when ON. */ .topbar-nav .adv-toggle { color: var(--gold); font-weight: 600; } /* Fixed-width state box + 4px gap so "Advanced:" never shifts when the state flips ON/OFF (only the word inside changes; left-aligned in a box wide enough for the wider "OFF"). */ .adv-toggle .adv-state { display: inline-block; min-width: 28px; margin-left: 4px; text-align: left; color: #9a9a9a; font-weight: 700; letter-spacing: .03em; } .topbar-nav .adv-toggle[aria-checked="true"] .adv-state { color: var(--gold); } /* ---- Action buttons (toolbar Import/Run/Stop/…, template Reset/Open/Save, and the Copy buttons): frameless text — no fill, no border — dark label that turns gold with a soft warm tint on hover. A disabled button just fades. ---- */ .toolbar-inner .btn, .sk-tools .btn, .dc-tools .btn, .template-actions .btn, .perf-head .btn, .app-region .copy-btn { background: transparent; border-color: transparent; color: #3a3a3a; } .toolbar-inner .btn:hover:not(:disabled), .sk-tools .btn:hover:not(:disabled), .dc-tools .btn:hover:not(:disabled), .template-actions .btn:hover:not(:disabled), .perf-head .btn:hover:not(:disabled), .app-region .copy-btn:hover { background: rgba(0, 0, 0, .06); border-color: transparent; color: #1a1a1a; } .toolbar-inner .btn:disabled, .sk-tools .btn:disabled, .dc-tools .btn:disabled, .template-actions .btn:disabled, .perf-head .btn:disabled { background: transparent; border-color: transparent; color: rgba(0, 0, 0, .26); } .app-region .copy-btn.copied { color: #1d7a40; border-color: transparent; background: transparent; } /* First toolbar button aligns flush with the page content edge (drop its left padding). */ .toolbar-inner .btn:first-child { padding-left: 0; } /* Last template button (Save Template) aligns flush with the weights column's right edge. */ .template-actions .btn:last-child { padding-right: 0; } /* ---- Trust Center link cards: light to match the new theme (were dark panels). ---- */ .app-region .trust-link { background: #fff; border-color: rgba(0, 0, 0, .12); color: #1a1a1a; } .app-region .trust-link:hover { background: #fff; border-color: rgba(154, 106, 0, .6); color: #1a1a1a; } /* ---- Anonymize Transcript page: white cards + dark text (were dark panels). ---- */ .app-region .anon-note, .app-region .anon-prompt { background: #fff; border-color: rgba(0, 0, 0, .12); } .app-region .anon-note { border-left-color: #9a6a00; color: #1a1a1a; } .app-region .anon-note strong { color: #1a1a1a; } .app-region .anon-note a { color: #9a6a00; } .app-region .anon-h { color: #1a1a1a; } .app-region .anon-list { color: #1a1a1a; } .app-region .anon-list strong { color: #1a1a1a; } .app-region .anon-list code { color: #9a6a00; } .app-region .anon-prompt { color: #1a1a1a; border-color: rgba(0, 0, 0, .15); } .app-region .anon-prompt:focus { border-color: #9a6a00; } /* Copy-prompt button: frameless like the other action buttons. The :not(:disabled) / :active / :focus qualifiers keep it flat in every state (the base .btn hover/active rules are declared later with equal specificity, so we out-specify them here). */ .app-region .anon-copy, .app-region .anon-copy:hover:not(:disabled), .app-region .anon-copy:focus, .app-region .anon-copy:active { background: transparent; border-color: transparent; box-shadow: none; color: #3a3a3a; } .app-region .anon-copy:hover:not(:disabled) { background: rgba(0, 0, 0, .06); color: #1a1a1a; } .app-region .anon-copy.copied { background: transparent; border-color: transparent; color: #1d7a40; } /* ---- Roadmap placeholder cards (Buyer-Side, CRO Dash, …): white to match. ---- */ .app-region .placeholder-card { background: #fff; border-color: rgba(0, 0, 0, .12); } .app-region .placeholder-h { color: #1a1a1a; } .app-region .placeholder-sub { color: #5a5a5a; } .app-region .placeholder-icon { color: #9a6a00; } .app-region .placeholder-badge { color: #9a6a00; border-color: rgba(154, 106, 0, .4); } /* Run flicker: keep the gold glow animation, black label (no gold text on the light canvas). */ .toolbar-inner .btn.run-awaiting { color: #1a1a1a; border-color: transparent; } /* ---- Message Center: a clean white panel with dark, readable text (newest darkest, older faded); keeps the ">" DOS prompt and gold accents. ---- */ .app-region .notif-box { background: #fff; border-color: rgba(0, 0, 0, .12); } .app-region .notif-welcome { color: #1a1a1a; } .app-region .notif-welcome a, .app-region .notif-welcome a:visited { color: #9a6a00; } .app-region .note { color: #555; } .app-region .note-latest { color: #1a1a1a; } .app-region .note-warn { color: #8a4400; font-weight: 500; } .app-region .note-alert { color: #b3261e; font-weight: 600; } .app-region .note-error { color: #b3433b; } .app-region .ai-ack-label { color: #1a1a1a; } .app-region .ai-disclosure-msg.is-old, .app-region .ai-disclosure-msg.is-old .notif-welcome, .app-region .ai-disclosure-msg.is-old .notif-welcome strong, .app-region .ai-disclosure-msg.is-old .ai-ack-label { color: #777; } .app-region .ai-disclosure-msg.is-old .notif-welcome a, .app-region .ai-disclosure-msg.is-old .notif-welcome a:visited { color: #9a6a00; } /* ---- Lifecycle boxes: white fill + dark text; the identified (active) stage keeps its gold look. ---- */ .app-region .lc-box:not(.lc-active) { background: #fff; color: #1a1a1a; border-color: rgba(0, 0, 0, .15); } /* ---- Runtime Monitor skill boxes: white fill + dark text; running keeps gold, done/error stay distinguishable on the light canvas. ---- */ .app-region .cb-box { background: #fff; color: #1a1a1a; border-color: rgba(0, 0, 0, .15); } .app-region .cb-done { background: #ececec; color: #4a4a4a; border-color: rgba(0, 0, 0, .12); } .app-region .cb-running { background: var(--gold); color: var(--ink); border-color: var(--gold); } .app-region .cb-error { background: rgba(224, 88, 79, .14); color: #a5342c; border-color: rgba(224, 88, 79, .55); } /* ---- Weights: white fill, dark text, default (skill-label) font size. ---- */ .app-region .pm-weight, .app-region .pt-weight select { background: #fff; color: #1a1a1a; border-color: rgba(0, 0, 0, .2); font-size: .75rem; } /* ---- Score Analysis / Recommendations / MEDDPICC: white fill + dark text. ---- */ .app-region .scroll-box { background: #fff; color: #1a1a1a; border-color: rgba(0, 0, 0, .15); } .app-region .scroll-box ul, .app-region .scroll-box li { color: #1a1a1a; } .app-region .analysis-title { color: #1a1a1a; } .app-region .meddpicc-item { border-bottom-color: rgba(0, 0, 0, .12); } .app-region .meddpicc-letter { background: #efece6; border-color: rgba(0, 0, 0, .15); color: #1a1a1a; } .app-region .meddpicc-label { color: #1a1a1a; } .app-region .meddpicc-note { color: #5a5a5a; } .app-region .meddpicc-evidence { color: #333; border-left-color: rgba(0, 0, 0, .25); } .app-region .meddpicc-status-strong { color: #1d7a40; } .app-region .meddpicc-status-weak { color: #9a6a00; } .app-region .meddpicc-status-missing { color: #b3433b; } .app-region .meddpicc-unavailable { background: #f2efe9; border-color: rgba(0, 0, 0, .15); border-left-color: #9a6a00; color: #5a5a5a; } /* ---- Cross-Skill Diagnostic empty state: no frame, a DOS-style ">" prompt before the message. ---- */ .app-region .cross-skill-box { background: transparent; border: none; padding: 0; color: #1f1f1f; } .app-region .cross-skill-empty { position: relative; padding-left: 16px; color: #5a5a5a; font-style: normal; font-family: ui-monospace, 'Cascadia Code', 'Courier New', monospace; } .app-region .cross-skill-empty::before { content: '>'; position: absolute; left: 0; top: 0; color: #9a6a00; font-weight: 700; } /* Top utility bar (upper menu): page tagline left, help/account links right. Sticky + solid bg so it stays pinned at the top on scroll and across view changes; height matches .sidenav-top (62px). */ .topbar { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; gap: 24px; height: 62px; padding: 0 var(--gutter); border-bottom: 1px solid var(--border); background: var(--bg); } .topbar-title { font-family: var(--font-display); font-size: 1.2rem; letter-spacing: .09em; text-transform: uppercase; color: var(--heading); opacity: .82; } .topbar-nav { display: flex; gap: 10px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; } /* Views: only the active one shows. */ .view { display: none; } .view.is-active { display: block; } .view-placeholder.is-active { display: flex; align-items: center; justify-content: center; min-height: 62vh; padding: 40px var(--gutter); } .placeholder-card { text-align: center; max-width: 460px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); padding: 40px 34px; } .placeholder-icon { color: var(--gold); opacity: .85; margin-bottom: 14px; } .placeholder-icon svg { width: 42px; height: 42px; } .placeholder-h { font-family: var(--font-display); font-size: 1.7rem; font-weight: 400; letter-spacing: .05em; color: var(--heading); margin: 0 0 8px; } .placeholder-sub { color: var(--muted); font-size: .92rem; line-height: 1.55; margin: 0 0 20px; } .placeholder-badge { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(255, 190, 23, .4); border-radius: 999px; padding: 5px 12px; } /* Integration "coming soon" wall: 96x96 logo tiles in wrapping rows. Logo-ready — drop an official 96px logo at /assets/logos/integrations/.svg and swap the .intg-mono span for an . */ .intg-grid { display: flex; flex-wrap: wrap; gap: 22px; margin: 6px 0 26px; } .intg-tile { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 96px; } .intg-logo { width: 96px; height: 96px; border-radius: 20px; background: #fff; border: 1px solid rgba(0, 0, 0, .12); box-shadow: 0 2px 12px rgba(0, 0, 0, .06); display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 10px; } .intg-logo img { max-width: 100%; max-height: 76px; width: auto; height: auto; object-fit: contain; } .intg-mono { font-family: var(--font-display); font-size: 2.6rem; font-weight: 400; letter-spacing: .02em; color: #8a8a8a; line-height: 1; } .intg-name { width: 96px; text-align: center; font-size: .78rem; font-weight: 600; color: #3a3a3a; line-height: 1.2; } .intg-badge { margin-top: 4px; } /* Billing view — manual upgrade request (self-serve checkout comes later). White card, left-aligned content (explicit background so it doesn't inherit the dark --panel in the light app region). */ .bill-card { max-width: 560px; background: #fff; color: #4a4a4a; border: 1px solid rgba(0, 0, 0, .12); border-radius: 14px; padding: 30px 32px; } .bill-card .placeholder-icon { margin-bottom: 10px; } .bill-h { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; letter-spacing: .04em; color: #1e1e1e; margin: 0 0 10px; } .bill-lead { color: #4a4a4a; font-size: .75rem; line-height: 1.6; margin: 0 0 16px; } .bill-list { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 9px; } .bill-list li { color: #4a4a4a; font-size: .75rem; line-height: 1.5; padding-left: 18px; position: relative; } .bill-list li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: #14646e; } .bill-list strong { color: #1e1e1e; font-weight: 700; } .bill-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .bill-plans { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 10px; } .bill-plan { display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid rgba(0, 0, 0, .1); border-radius: 10px; padding: 11px 14px; } .bill-plan-tier { border-color: rgba(255, 190, 23, .55); background: #fffdf5; } .bill-plan-name { font-weight: 700; color: #242320; font-size: 15px; } .bill-plan-sub { font-size: 12.5px; color: #6b6862; margin-top: 2px; } .bill-plan-buy { display: flex; align-items: center; gap: 12px; } .bill-plan-price { font-weight: 700; color: #242320; font-size: 15px; white-space: nowrap; } .bill-plan .bill-buy { padding: 7px 18px; } /* Billing & Plans redesign (Stage 3): plan summary + landing-style cards + invoice history */ .bill2 { max-width: 900px; } .b2-sec-h { font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; color: #1e1e1e; border-left: 4px solid var(--gold); padding-left: 11px; margin: 26px 0 14px; } .bill2-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; background: #fff; border: 1px solid #e5e1d8; border-radius: 14px; padding: 18px 22px; } .b2s-item { display: flex; flex-direction: column; gap: 3px; } .b2s-label { font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; font-size: .6rem; color: #6b6862; } .b2s-val { font-family: var(--font-display); font-size: 1.15rem; color: #1e1e1e; line-height: 1; } .b2s-val-sm { font-size: 1.15rem; } .b2s-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; } /* A class-level `display` beats the UA `[hidden]{display:none}`, so ghost links stay visible when JS hides them (e.g. Manage/Cancel with no portal). Re-assert hidden. */ .b2-ghost[hidden] { display: none !important; } .b2-buy { font-family: var(--font-body); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; font-size: .68rem; border: none; border-radius: 8px; padding: 6px 14px; cursor: pointer; background: linear-gradient(180deg, #ffcb3f, var(--gold) 55%, #f2ad0e); color: #1a1a1a; white-space: nowrap; } .b2-buy:hover:not(:disabled) { background: #ffce50; } .b2-buy:disabled { opacity: .6; cursor: default; } .b2-buy-full { width: 100%; padding: 9px; font-size: .74rem; } .b2-ghost { font-family: var(--font-body); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; font-size: .68rem; border: 1px solid rgba(0, 0, 0, .22); border-radius: 8px; padding: 7px 14px; cursor: pointer; background: #fff; color: #242320; text-decoration: none; display: inline-block; white-space: nowrap; } .b2-ghost:hover { border-color: var(--gold); color: #b26f0d; } .b2-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .b2-card { position: relative; border: 1px solid #e5e1d8; border-radius: 14px; padding: 18px 16px; background: #fff; display: flex; flex-direction: column; gap: 6px; } .b2-badge { align-self: flex-start; font-family: var(--font-body); text-transform: uppercase; letter-spacing: .08em; font-size: .6rem; font-weight: 700; padding: 3px 9px; border-radius: 12px; background: var(--ink); color: var(--gold-tint); } .b2-name { font-family: var(--font-display); text-transform: uppercase; font-size: 1.2rem; letter-spacing: .02em; color: #b26f0d; margin-top: 2px; } .b2-desc { font-size: .78rem; color: #6b6862; min-height: 28px; line-height: 1.4; } .b2-pack { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 0; border-top: 1px dashed #e5e1d8; font-size: .82rem; color: #242320; } .b2-packbuy { display: flex; align-items: center; gap: 8px; white-space: nowrap; font-weight: 600; } .b2-mut { color: #6b6862; font-size: .72rem; font-weight: 400; } .b2-price { font-family: var(--font-display); font-size: 1.95rem; color: #1e1e1e; line-height: 1; margin-top: 2px; } .b2-price small { font-size: .8rem; color: #6b6862; } .b2-rate { font-family: var(--font-display); font-size: 1.75rem; color: #1e1e1e; line-height: 1; margin-top: 6px; } .b2-rate small { font-size: .8rem; color: #6b6862; font-family: var(--font-body); } .b2-rate-pre { display: block; font-family: var(--font-body); text-transform: uppercase; letter-spacing: .08em; font-size: .58rem; font-weight: 700; color: #b26f0d; margin-bottom: 3px; } .b2-teal .b2-rate, .b2-ink .b2-rate { color: #fff; } .b2-teal .b2-rate small { color: #cfe3e7; } .b2-ink .b2-rate small { color: #a9a9a9; } .b2-teal .b2-rate-pre, .b2-ink .b2-rate-pre { color: var(--gold); } /* CRO Lens is unreleased (announced 2027): its copy ships hidden and is revealed for a platform admin only (ui/sidenav.ts). This guarantees the hide beats any element's own display rule; the admin reveal removes the [hidden] attribute so the element shows normally. */ .cro-only[hidden] { display: none !important; } .b2-feat { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .b2-feat li { position: relative; padding-left: 20px; font-size: .76rem; color: #6b6862; } .b2-feat li::before { content: "\2713"; position: absolute; left: 0; color: #b26f0d; font-weight: 700; } .b2-cta { margin-top: auto; padding-top: 10px; } .b2-teal { background: radial-gradient(130% 120% at 50% 0%, #1f8697, #14646e 66%); border-color: rgba(255, 255, 255, .14); color: #fff; } .b2-teal .b2-name { color: var(--gold); } .b2-teal .b2-desc, .b2-teal .b2-pack, .b2-teal .b2-mut { color: #d3e6ea; } .b2-teal .b2-pack { border-top-color: rgba(255, 255, 255, .2); } .b2-teal .b2-badge { background: rgba(255, 255, 255, .16); color: #fff; } .b2-cream { background: var(--gold-tint); border-color: var(--gold); } .b2-cream .b2-badge { background: var(--gold); color: var(--ink); } .b2-cream .b2-feat li { color: #5a4a1e; } .b2-ink { background: radial-gradient(130% 120% at 50% 0%, #343434, #191919 70%); border-color: rgba(255, 255, 255, .12); color: #fff; } .b2-ink .b2-name { color: var(--gold); } .b2-ink .b2-desc { color: #c9c9c9; } .b2-ink .b2-price { color: #fff; } .b2-ink .b2-price small { color: #a9a9a9; } .b2-ink .b2-feat li { color: #d6d6d6; } .b2-ink .b2-feat li::before { color: var(--gold); } .b2-ink .b2-badge { background: rgba(255, 255, 255, .15); color: #fff; } .b2-hist { background: #fff; border: 1px solid #e5e1d8; border-radius: 14px; padding: 2px; overflow-x: auto; } .b2-table { border-collapse: collapse; width: 100%; font-size: .82rem; color: #242320; } .b2-table th, .b2-table td { text-align: left; padding: 11px 18px; border-bottom: 1px solid #eee; } .b2-table th { font-family: var(--font-body); text-transform: uppercase; letter-spacing: .05em; font-size: .64rem; color: #6b6862; font-weight: 700; } .b2-table tbody tr:last-child td { border-bottom: none; } .b2-amt { font-variant-numeric: tabular-nums; } .b2-dl { color: #b26f0d; font-weight: 600; text-decoration: none; } .b2-hist-empty { padding: 16px 18px; font-size: .82rem; color: #6b6862; margin: 0; } .b2-portal-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 18px 12px; } .b2-portal-note { font-size: .74rem; color: #6b6862; } .b2-foot { margin-top: 24px; border-top: 1px solid #e5e1d8; padding-top: 14px; display: flex; flex-direction: column; gap: 10px; } .b2-foot-links { display: flex; flex-wrap: wrap; gap: 14px; font-size: .8rem; } .b2-foot-links a { color: #b26f0d; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(178, 111, 13, .35); } .b2-foot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; } .b2-foot-note { font-size: .78rem; color: #6b6862; } .b2-msg { margin: 12px 0 0; } @media (max-width: 760px) { .b2-plans { grid-template-columns: 1fr; } } .bill-msg { margin: 16px 0 0; font-size: .75rem; font-weight: 600; color: #14646e; } /* Access-session-expiry notice: a full-screen scrim shown for ~1.6s before the reload that re-triggers the Access login. Deliberately covers the app so the underlying (now-failed) view isn't left looking broken during the reload. */ .session-expired-overlay { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; background: rgba(30, 30, 30, .92); color: #fff; font-family: var(--font-display, sans-serif); font-size: 1.15rem; letter-spacing: .02em; } /* ---------- Self-service Account overview (Phase 2) ---------- */ /* The Account view hides the page header, so give its content a deliberate top clearance (the account name would otherwise sit flush under the topbar). ~2x a normal page's page-head top clearance. */ .view[data-view="account"] .view-pad { padding-top: 44px; } /* Explicit dark-on-white (the app content region's --heading resolves light on some grounds). */ .acct-overview { color: #4a4a4a; margin-bottom: 0; } .acct-overview:empty { display: none; } /* Two-column page: LEFT = identity/details + Preferences; RIGHT = usage tiles + note + users. Both top-aligned; the left column is width-capped so Preferences stays narrow and clear of the right column. Collapses to stacked on narrow widths (flex-wrap). */ .acct-page { display: flex; gap: 44px; align-items: flex-start; flex-wrap: wrap; } .acct-col-left { flex: 1 1 340px; min-width: 280px; max-width: 560px; } .acct-col-right { flex: 1 1 420px; min-width: 280px; } .acct-overview-right:empty { display: none; } /* Teams block sits between the usage tiles/note and Your Users in the right column. */ .acct-teams-block { margin-top: 4px; } /* Grey rules above Edit account details and above Preferences. */ .acct-divider { border: none; border-top: 1px solid rgba(0, 0, 0, .12); margin: 22px 0; } .acct-loading { color: #6a6a6a; font-size: .75rem; margin: 0; } .acct-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 18px; } /* Matches the "Your users" sub-heading (.acct-sub) so the account name reads as a section header. */ .acct-title { font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; letter-spacing: .04em; color: #1e1e1e; margin: 0; } .acct-status { font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid transparent; } .acct-status--active { color: #1d6f3f; background: #e6f4ec; border-color: #b8e0c6; } .acct-status--trialing { color: #8a5a00; background: #fff4d6; border-color: #ffe08a; } .acct-status--pending { color: #8a5a00; background: #fff4d6; border-color: #ffe08a; } .acct-status--past_due, .acct-status--canceled { color: #b3433b; background: #fbe9e7; border-color: #f2c4bd; } .acct-status--paused { color: #5a5a5a; background: #eee; border-color: #ddd; } .acct-grid { display: grid; grid-template-columns: auto auto; justify-content: start; column-gap: 48px; row-gap: 18px; margin: 0; } @media (max-width: 420px) { .acct-grid { grid-template-columns: 1fr; } } .acct-field-label { font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #9a9a9a; margin-bottom: 3px; } .acct-field-value { font-size: .8rem; color: #1e1e1e; } .acct-usage { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 14px; } .acct-stat { min-width: 96px; background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 12px; padding: 12px 16px; } .acct-stat-n { font-family: var(--font-display); font-size: 1.4rem; font-weight: 400; color: #1e1e1e; font-variant-numeric: tabular-nums; } .acct-stat-l { font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9a9a9a; margin-top: 2px; } .acct-stat--low .acct-stat-n { color: #b3433b; } .acct-note { font-size: .75rem; color: #4a4a4a; margin: 0; } .acct-link { background: none; border: none; padding: 0; color: #14646e; font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; } .acct-users { margin-top: 24px; } /* The table now lives in the (narrower) right column — let IT scroll horizontally on tight widths so the page body never scrolls sideways. */ .acct-table-scroll { overflow-x: auto; } .acct-users-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; } .acct-sub { font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; letter-spacing: .04em; color: #1e1e1e; border-left: 4px solid var(--gold); padding-left: 11px; margin: 0; } .acct-count { font-size: .68rem; color: #9a9a9a; } .acct-table { width: 100%; min-width: 340px; border-collapse: collapse; font-size: .75rem; } .acct-table th { text-align: left; font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #9a9a9a; padding: 6px 12px 6px 0; border-bottom: 1px solid rgba(0,0,0,.12); } .acct-table td { padding: 9px 12px 9px 0; border-bottom: 1px solid rgba(0,0,0,.07); color: #2a2a2a; vertical-align: top; } .acct-table td.acct-num { font-variant-numeric: tabular-nums; } .acct-user-name { color: #1e1e1e; font-weight: 600; } .acct-user-email { color: #8a8a8a; font-size: .68rem; margin-top: 1px; } .acct-users-note { font-size: .7rem; color: #8a8a8a; margin: 12px 0 0; } .acct-prefs-h { font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; letter-spacing: .04em; color: #1e1e1e; border-left: 4px solid var(--gold); padding-left: 11px; margin: 0 0 16px; } /* Edit-details form (company name + billing email) */ .acct-edit-row { margin: 0; } .acct-edit { display: flex; flex-wrap: wrap; gap: 16px 22px; align-items: flex-end; background: transparent; border: 0; border-top: 1px solid rgba(0,0,0,.1); border-radius: 0; padding: 16px 0 4px; max-width: 620px; } .acct-inp { display: flex; flex-direction: column; gap: 5px; } .acct-inp-label { font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #9a9a9a; } .acct-inp-field { font: inherit; font-size: .78rem; color: #1e1e1e; padding: 7px 10px; border: 1px solid #d8d6d0; border-radius: 7px; min-width: 240px; background: #fff; } .acct-inp-field:focus { outline: 2px solid rgba(20,100,110,.35); outline-offset: 1px; border-color: #14646e; } .acct-phone-row { display: flex; gap: 8px; } .acct-cc-select { font: inherit; font-size: .78rem; color: #1e1e1e; padding: 7px 8px; border: 1px solid #d8d6d0; border-radius: 7px; background: #fff; max-width: 130px; } .acct-cc-select:focus { outline: 2px solid rgba(20,100,110,.35); outline-offset: 1px; border-color: #14646e; } .acct-phone-num { min-width: 150px; } .acct-edit-actions { display: flex; gap: 20px; align-items: center; width: 100%; margin-top: 4px; } /* Save / Cancel as plain default-sized text (no boxed buttons). */ .acct-textbtn { background: none; border: none; padding: 0; font-family: var(--font-body); font-size: 0.75rem; font-weight: 700; color: #14646e; cursor: pointer; } .acct-textbtn:hover { text-decoration: underline; } .acct-textbtn--muted { color: #6a6a6a; font-weight: 400; } .acct-textbtn[disabled] { opacity: .5; cursor: default; text-decoration: none; } /* Teams manager (Account page) */ .acct-teams-sub { font-size: .72rem; color: #6a6a6a; margin: -6px 0 12px; line-height: 1.5; max-width: 460px; } .tm-loading { font-size: .72rem; color: #8a8a8a; margin: 0; } .tm-list { display: flex; flex-direction: column; gap: 8px; } .tm-row { display: flex; align-items: center; gap: 12px; } .tm-name { font: inherit; font-size: .78rem; color: #1e1e1e; padding: 6px 10px; border: 1px solid #d8d6d0; border-radius: 7px; background: #fff; flex: 1 1 auto; min-width: 0; max-width: 280px; } .tm-name:focus { outline: 2px solid rgba(20, 100, 110, .35); outline-offset: 1px; border-color: #14646e; } .tm-name[disabled] { opacity: .55; } .tm-count { font-size: .68rem; color: #9a9a9a; flex: none; white-space: nowrap; } .acct-link.tm-del { color: #b3433b; flex: none; } .tm-add { display: flex; align-items: center; gap: 12px; margin-top: 12px; } .tm-max { font-size: .7rem; color: #8a8a8a; margin: 12px 0 0; } .acct-edit-msg { width: 100%; margin: 8px 0 0; font-size: .72rem; color: #b3433b; font-weight: 600; } /* Member row actions (role select + pause/resume) */ .acct-actions { white-space: nowrap; } .acct-role-select { font: inherit; font-size: .72rem; padding: 4px 6px; border: 1px solid #d8d6d0; border-radius: 6px; background: #fff; color: #1e1e1e; margin-right: 8px; } .acct-homepage-select { font: inherit; font-size: .72rem; padding: 4px 6px; border: 1px solid #d8d6d0; border-radius: 6px; background: #fff; color: #1e1e1e; max-width: 170px; } .acct-homepage-select[disabled] { opacity: .5; cursor: default; } .acct-remove-btn { color: #b0342b; border-color: #e3b7b2; } .acct-remove-btn:hover:not([disabled]) { background: #fbeceb; } /* Invite-a-teammate form under Your Users. */ .acct-invite { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(0,0,0,.1); } .acct-invite-h { margin: 0 0 8px; font-size: .82rem; color: #1a1a1a; } .acct-invite-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .acct-invite-email { min-width: 220px; flex: 1 1 220px; } .acct-invite-btn { flex: none; } .acct-invite-msg { display: block; margin-top: 8px; font-size: .74rem; color: #4a4a4a; min-height: 1em; } .acct-invite-msg.is-err { color: #b0342b; } .acct-invite-note { margin: 8px 0 0; font-size: .72rem; color: #7a7a7a; line-height: 1.5; } .acct-mini-btn { font: inherit; font-size: .72rem; font-weight: 600; padding: 4px 11px; border: 1px solid #1e1e1e; background: #fff; color: #1e1e1e; border-radius: 6px; cursor: pointer; } .acct-mini-btn:hover { background: #1e1e1e; color: #fff; } .acct-mini-btn[disabled], .acct-role-select[disabled] { opacity: .5; cursor: default; } .acct-lock { font-size: .68rem; color: #9a9a9a; } /* ---------- Team Trends (Phase 3) ---------- */ .tt-loading, .tt-empty { color: #5a5a5a; font-size: var(--fs-body); line-height: 1.55; max-width: 620px; margin: 10px 0 0; } .tt-head { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 12px; } .tt-h { font-family: var(--font-display); font-weight: 400; font-size: 1.1rem; letter-spacing: .04em; color: #1e1e1e; margin: 0; } .tt-count { font-size: .68rem; color: #9a9a9a; } .tt-scroll { overflow-x: auto; } .tt-table { width: 100%; min-width: 800px; border-collapse: collapse; font-size: .78rem; } .tt-table th { text-align: left; font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #1e1e1e; padding: 6px 14px 8px 0; border-bottom: 1px solid rgba(0, 0, 0, .12); } /* Sortable header: a button that looks like the header, with an arrow on the active column. */ .tt-table th.tt-th-sort { padding: 0; } .tt-sort-btn { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; padding: 6px 14px 8px 0; font: inherit; font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #1e1e1e; cursor: pointer; } .tt-sort-btn:hover { color: #14646e; } .tt-sort-arrow { color: #14646e; font-size: .8em; } .tt-table td { padding: 11px 14px 11px 0; border-bottom: 1px solid rgba(0, 0, 0, .07); color: #2a2a2a; vertical-align: middle; } .tt-table td.tt-num { font-variant-numeric: tabular-nums; } .tt-table td.tt-avg { font-weight: 800; color: #14646e; } /* the headline Average metric — draws the eye */ .tt-rep-name { color: #1e1e1e; font-weight: 600; } /* Gold "C" flag: this rep is in the active 2-rep Compare. Strong, intense gold so it reads at a glance. */ .tt-compare-flag { display: inline-block; margin-left: 7px; color: #d98411; font-weight: 800; font-size: .82rem; letter-spacing: .02em; } .tt-rep-hint { color: #a08a4a; font-size: .62rem; margin-top: 1px; } .tt-trend-cell { white-space: nowrap; } .tt-delta { font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; } .tt-delta--up { color: #1d7a40; } .tt-delta--down { color: #b3433b; } .tt-delta--flat { color: #8a8a8a; font-weight: 600; } /* Compare page (Phase 4) */ /* Top bar aligned with the page title: "Compare" left; Clear (active only) + Window right — but only as far right as the intro text extends (max-width matches .view-sub), not the full-width screen edge. */ .cmp-topbar { display: flex; align-items: center; gap: 20px; margin: 16px 0 6px; max-width: 720px; } .cmp-topbar .cmp-title { margin: 0; } .cmp-topbar-right { margin-left: auto; display: inline-flex; align-items: center; gap: 24px; } .cmp-link { background: none; border: 0; padding: 0; font: inherit; color: #9a6a00; text-decoration: underline; cursor: pointer; } .cmp-link:hover { color: #7a5400; } .cmp-window { display: inline-flex; align-items: center; gap: 7px; } .cmp-window-label { font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #1e1e1e; } /* The Window control sits near the top of the page, so its tooltip opens DOWNWARD (not clipped above). */ /* The shared .meta-info dims to opacity .7 and inherits a muted colour — too faint on Compare's light header. Give the compare tooltips a solid grey (darkening on hover) and open them downward. */ .app-region [data-view="compare"] .meta-info { color: #5a5a5a; opacity: 1; } .app-region [data-view="compare"] .meta-info:hover, .app-region [data-view="compare"] .meta-info:focus-visible { color: #1a1a1a; } .app-region [data-view="compare"] .meta-info .sc-note-tip { top: calc(100% + 7px); bottom: auto; left: -10px; transform: translateY(-3px); } .app-region [data-view="compare"] .meta-info:hover .sc-note-tip, .app-region [data-view="compare"] .meta-info:focus-visible .sc-note-tip { transform: translateY(0); } .cmp-window-hint { color: #6a6a6a; font-size: .72rem; margin: 0 0 18px; } .cmp-hint-line { display: block; } .cmp-body { display: flex; gap: 80px; align-items: flex-start; flex-wrap: wrap; } .cmp-insights { flex: 1 1 260px; min-width: 240px; max-width: 460px; } .cmp-insights-h { font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; letter-spacing: .04em; color: #1e1e1e; border-left: 4px solid var(--gold); padding-left: 11px; margin: 0 0 12px; } .cmp-insights-headline { font-size: .9rem; font-weight: 700; color: #1e1e1e; margin: 0 0 10px; line-height: 1.35; } .cmp-insights-list { margin: 0; padding-left: 18px; color: #3a3a3a; font-size: .82rem; line-height: 1.5; } .cmp-insights-list li { margin-bottom: 6px; } .cmp-insights-note { color: #6a6a6a; font-size: .82rem; } /* Compact + left-aligned: width hugs content (no full-width stretch), tighter column clearance. */ .cmp-table { width: auto; border-collapse: collapse; font-size: .78rem; } .cmp-table th { text-align: left; font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #9a9a9a; padding: 6px 18px 8px 0; border-bottom: 1px solid rgba(0, 0, 0, .12); vertical-align: bottom; } .cmp-table td { padding: 8px 18px 8px 0; border-bottom: 1px solid rgba(0, 0, 0, .07); color: #2a2a2a; } .cmp-table th:last-child, .cmp-table td:last-child { padding-right: 0; } .cmp-table td.tt-num { font-variant-numeric: tabular-nums; text-align: right; } .cmp-table th:not(:first-child) { text-align: right; } .cmp-table th:first-child, .cmp-table td.cmp-skill { text-align: left; } .cmp-col .cmp-name { font-size: .82rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: #1e1e1e; } .cmp-col .cmp-sub { font-size: .6rem; font-weight: 400; letter-spacing: .04em; text-transform: none; color: #9a9a9a; margin-top: 1px; } .cmp-skill { color: #1e1e1e; } .cmp-final td { font-weight: 700; color: #1e1e1e; border-bottom: 2px solid rgba(0, 0, 0, .18); } .cmp-gap { font-weight: 700; font-variant-numeric: tabular-nums; } .cmp-gap--a { color: #14646e; } .cmp-gap--b { color: #a56a12; } .cmp-gap--flat { color: #9a9a9a; } .cmp-empty { max-width: 860px; } /* wide enough for the picker's two groups + the 80px clearance on one row */ .cmp-empty > .cmp-empty-h:first-child { margin-top: 4px; } .cmp-empty-note { font-size: .75rem; color: #6a6a6a; line-height: 1.55; margin: 0 0 6px; } .cmp-empty-h { font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; letter-spacing: .04em; color: #1e1e1e; margin: 20px 0 10px; } .cmp-picker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .cmp-go-row { margin-top: 16px; } /* Compare button sits on its own line below the cohort pickers */ /* Option 3 — upload two sets. Compact rows + hyperlink-style pickers (no big drop blocks). */ .cmp-upload { margin-top: 6px; } .cmp-up-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .cmp-up-label { font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6a6a6a; min-width: 58px; } .cmp-up-file { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .cmp-up-status { font-size: .75rem; color: #6a6a6a; } .cmp-progress { max-width: 720px; } .cmp-progress-line { font-size: .9rem; font-weight: 700; color: #1e1e1e; margin: 8px 0 6px; } .cmp-team-select { font: inherit; font-size: .78rem; color: #1e1e1e; padding: 6px 10px; border: 1px solid #d8d6d0; border-radius: 7px; background: #fff; } .cmp-vs { font-size: .68rem; color: #9a9a9a; font-weight: 700; text-transform: uppercase; } /* Selection toolbar + checkboxes + removed rows (Phase 3) */ .tt-toolbar { display: inline-flex; align-items: center; gap: 14px; margin-left: auto; flex-wrap: wrap; } /* Rep search box (Team Trends toolbar + Teams assign column). */ .tt-search { font: inherit; font-size: .72rem; color: #1e1e1e; padding: 4px 10px; border: 1px solid #d8d6d0; border-radius: 6px; background: #fff; min-width: 160px; } .tt-search:focus { outline: 2px solid rgba(20, 100, 110, .35); outline-offset: 1px; border-color: #14646e; } .tms-search { display: block; margin: 0 0 12px; min-width: 220px; } .tt-tool-btn { font: inherit; font-size: .72rem; font-weight: 700; padding: 5px 12px; border: 1px solid #1e1e1e; background: #fff; color: #1e1e1e; border-radius: 6px; cursor: pointer; } .tt-tool-btn:hover:not([disabled]) { background: #1e1e1e; color: #fff; } .tt-tool-btn[disabled] { opacity: .4; cursor: default; } .tt-show-removed { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; color: #5a5a5a; cursor: pointer; } .tt-check-cell { width: 34px; } .tt-check { width: 15px; height: 15px; accent-color: #14646e; cursor: pointer; } .tt-row-hidden { opacity: .5; } /* Multi-select team filter (a
dropdown of checkboxes) */ .tt-filter { position: relative; display: inline-block; } .tt-filter-summary { list-style: none; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: .72rem; padding: 4px 10px; border: 1px solid #d8d6d0; border-radius: 6px; background: #fff; color: #1e1e1e; user-select: none; } .tt-filter-summary::-webkit-details-marker { display: none; } .tt-filter-summary::after { content: '▾'; color: #9a9a9a; font-size: .7rem; } .tt-filter-label { font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9a9a9a; } .tt-filter-caption { font-weight: 600; } .tt-filter-menu { position: absolute; z-index: 40; top: calc(100% + 5px); right: 0; min-width: 190px; max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 8px; background: #fff; border: 1px solid #e2e0da; border-radius: 9px; box-shadow: 0 10px 28px rgba(0, 0, 0, .14); } .tt-filter-opt { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; font-size: .74rem; color: #2a2a2a; cursor: pointer; } .tt-filter-opt:hover { background: #f4f2ec; } .tt-filter-clear { align-self: flex-start; margin-top: 4px; background: none; border: none; padding: 4px 6px; font: inherit; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #14646e; cursor: pointer; } /* Team Trends read-only team cell */ .tt-team-name { color: #2a2a2a; } .tt-team-none { color: #b0aca2; } /* Team assignment dropdown (Teams page) */ .tt-team-select { font: inherit; font-size: .72rem; color: #1e1e1e; padding: 4px 6px; border: 1px solid #d8d6d0; border-radius: 6px; background: #fff; max-width: 180px; } .tt-team-select[disabled] { opacity: .5; } .tt-empty-row { color: #8a8a8a; padding: 16px 0; text-align: center; } /* ---------- Teams page (LEFT: rep grid 70% · RIGHT: intro + inline entity lists 30%) ---------- */ .tms-layout { display: grid; grid-template-columns: 7fr 3fr; gap: 48px; align-items: start; } @media (max-width: 900px) { .tms-layout { grid-template-columns: 1fr; gap: 28px; } } .tms-main { min-width: 0; } .tms-sub { font-size: .72rem; color: #6a6a6a; line-height: 1.5; margin: 0; max-width: 640px; } .tms-grid { width: 100%; border-collapse: collapse; font-size: .78rem; } .tms-grid th { text-align: left; font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #1f1f1f; padding: 6px 20px 8px 0; border-bottom: 1px solid rgba(0, 0, 0, .12); } .tms-grid td { padding: 8px 20px 8px 0; border-bottom: 1px solid rgba(0, 0, 0, .07); vertical-align: middle; } .tms-grid td:last-child, .tms-grid th:last-child { padding-right: 0; } .tms-rep-input { width: 100%; min-width: 160px; } /* Assign dropdowns: ~2x the old width so long values like "California" fit without truncation. */ .tms-assign-cell { width: 1%; } /* shrink-to-fit so the Rep column takes the slack */ .tms-select { width: 100%; min-width: 128px; max-width: none; } .tms-col-class .tms-select { min-width: 88px; } /* short values (Top Rep / No class) — keep the column narrow so the grid fits */ /* RIGHT column: moved intro text, then one inline-editable list per dimension (Email-Recipients model: type to rename, clear to delete, trailing blank to add, auto-saved — no popups, no "⋯"). */ .tms-lead { margin: 0 0 22px; font-size: .78rem; color: #5a5a5a; line-height: 1.55; } .tms-entpanel { margin: 0 0 14px; } .tms-entpanel-h { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 400; font-size: .95rem; letter-spacing: .04em; color: #1e1e1e; border-left: 4px solid var(--gold); padding-left: 10px; margin: 0 0 8px; } .tms-entpanel-h::-webkit-details-marker { display: none; } .tms-entpanel-h:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .tms-entpanel-title { flex: 1 1 auto; } .tms-entpanel-count { font-family: var(--font-body); font-size: .7rem; color: #9a9a9a; font-variant-numeric: tabular-nums; } .tms-entpanel-h::after { content: '\203A'; font-size: 2rem; color: #1f1f1f; line-height: 1; transition: transform .15s ease; } .tms-entpanel[open] .tms-entpanel-h::after { transform: rotate(90deg); } .tms-entpanel:not([open]) .tms-entpanel-h { margin-bottom: 0; } .tms-entlist { display: grid; gap: 6px; } .tms-entinput { font: inherit; font-size: .74rem; padding: 6px 9px; border: 1px solid #d8d6d0; border-radius: 7px; color: #1e1e1e; background: #fff; width: 100%; box-sizing: border-box; } .tms-entinput:focus { outline: none; border-color: var(--gold); } .tms-entinput[disabled] { opacity: .5; } .tms-entinput-rec { color: #9a9a9a; } /* recommended default, untouched — greys out once renamed */ .tms-entmsg { display: inline-block; margin-top: 6px; font-size: .68rem; min-height: 1em; } .tms-entmsg.ok { color: #1f8a4c; } .tms-entmsg.err { color: #c0392b; } /* Sidenav divider — thin light-grey rule splitting the menu into two halves (below The CRO Lens). */ .nav-sep { flex: 0 0 auto; height: 1px; background: rgba(255, 255, 255, .14); margin: 4px 14px; } /* ---------- Scorecards page: author one manager scorecard per call type ---------- Two columns: LEFT = call-type dropdown + Save (kept up top so it never scrolls out of reach); RIGHT = per-skill config, System Default minimum beside the editable Custom minimum. No card/frame — it sits directly on the workspace. */ .sc-layout { display: grid; grid-template-columns: 360px max-content; gap: 48px; align-items: start; } .sc-side { display: flex; flex-direction: column; gap: 12px; } .sc-pick-label { font-family: var(--font-display); font-size: .9rem; letter-spacing: .05em; text-transform: uppercase; color: #1a1a1a; } /* Custom call-type picker: a button whose option panel opens to the RIGHT of the button (a native