/* ============================================================ Whitfield.IT — portal.css v8 (§8 visual pass, MERGED v-next) Structure: SECTION 1 — the live v7 sheet VERBATIM (tokens, body.wit bridge, header pin, every legacy class). Un-migrated pages render pixel-identical. SECTION 2 — §8 token EXTENSIONS (additive only; the new shadow values live under NEW names --wit-elev/--wit-elev-lg because --wit-shadow is a COLOUR with live consumers). SECTION 3 — §8 components with NO name collision (four axes, facts, expander, nav rail/bottomnav, states, toast…) — global, usable by any page immediately. SECTION 4 — §8 PRIMITIVES that collide with live names (card, btn, inputs, table…) — scoped under body.wit.s8. A migrated page opts in via . Recipe per page: style.css?v=N + portal.css?v=N + Bump ?v=N on every page you migrate (LiteSpeed caches CSS). ============================================================ */ /* ╔══════════════════════════════════════════════════════════╗ ║ SECTION 1 — LIVE v7 VERBATIM (do not edit in place) ║ ╚══════════════════════════════════════════════════════════╝ */ /* ============================================================ Whitfield.IT — portal.css Style-guide component classes, namespaced `wit-`, with LIGHT + DARK themes. Theme is driven by (default = light). All component colours come from CSS custom properties, so the same classes work in both themes. Load ALONGSIDE the existing assets/style.css. Markup reference: OUTPUTS/WIT-StyleGuide.html / .md ============================================================ */ /* ── Theme tokens ─────────────────────────────────────────── */ :root, body[data-theme="light"]{ --wit-navy:#1a1040; --wit-amber:#faac5c; --wit-amber-dk:#f59e3c; /* contrast hierarchy: grey page → white cards (#fff) → distinct grey sub-surfaces → #e5e7eb border */ --wit-bg:#eef0f3; --wit-surface:#ffffff; --wit-surface-2:#f3f4f6; /* text tiers (dark for light mode): strong/navy → body → muted → faint */ --wit-strong:#1a1040; --wit-text:#374151; --wit-muted:#6b7280; --wit-faint:#9ca3af; --wit-border:#e5e7eb; --wit-btn-bd:#d1d5db; --wit-code-bg:#f3f4f6; --wit-shadow:rgba(26,16,64,.12); --wit-navy-surface:#1a1040; /* nav / credentials stay navy in both themes */ --wit-navlink:#cbd5e1; --wit-success:#16a34a; --wit-success-bg:#f0fdf4; --wit-success-bd:#bbf7d0; --wit-success-tx:#15803d; --wit-warning:#d97706; --wit-warning-bg:#fffbeb; --wit-warning-bd:#fde68a; --wit-warning-tx:#b45309; --wit-error:#dc2626; --wit-error-bg:#fef2f2; --wit-error-bd:#fecaca; --wit-error-tx:#b91c1c; --wit-info:#2563eb; --wit-info-bg:#eff6ff; --wit-info-bd:#bfdbfe; --wit-info-tx:#1d4ed8; --wit-slate:#64748b; --wit-slate-bg:#f8fafc; --wit-slate-bd:#e2e8f0; --wit-slate-tx:#64748b; --wit-nurture:#7c3aed; --wit-nurture-bg:#f5f3ff; --wit-nurture-bd:#ddd6fe; --wit-nurture-tx:#7c3aed; --wit-neutral-bg:#f9fafb; --wit-neutral-bd:#e5e7eb; --wit-bubble-out-bg:#fff7ed; --wit-bubble-out-bd:#fed7aa; --wit-bubble-in-bg:#eff6ff; --wit-bubble-in-bd:#bfdbfe; } body[data-theme="dark"]{ --wit-navy:#1a1040; --wit-amber:#faac5c; --wit-amber-dk:#f59e3c; --wit-bg:#0f0a24; --wit-surface:#1a1338; --wit-surface-2:#221a44; --wit-strong:#ffffff; --wit-text:#e7e4f0; --wit-muted:#9b96b3; --wit-faint:#6f6a86; --wit-border:#2e2750; --wit-btn-bd:rgba(255,255,255,.2); --wit-code-bg:rgba(255,255,255,.06); --wit-shadow:rgba(0,0,0,.45); --wit-navy-surface:#140d30; --wit-navlink:#cbd5e1; --wit-success:#4ade80; --wit-success-bg:rgba(34,197,94,.14); --wit-success-bd:rgba(34,197,94,.40); --wit-success-tx:#4ade80; --wit-warning:#faac5c; --wit-warning-bg:rgba(250,172,92,.14); --wit-warning-bd:rgba(250,172,92,.40); --wit-warning-tx:#faac5c; --wit-error:#f87171; --wit-error-bg:rgba(239,68,68,.14); --wit-error-bd:rgba(239,68,68,.40); --wit-error-tx:#f87171; --wit-info:#60a5fa; --wit-info-bg:rgba(59,130,246,.14); --wit-info-bd:rgba(59,130,246,.40); --wit-info-tx:#60a5fa; --wit-slate:#94a3b8; --wit-slate-bg:rgba(148,163,184,.14); --wit-slate-bd:rgba(148,163,184,.35); --wit-slate-tx:#94a3b8; --wit-nurture:#a78bfa; --wit-nurture-bg:rgba(124,58,237,.20); --wit-nurture-bd:rgba(124,58,237,.45); --wit-nurture-tx:#a78bfa; --wit-neutral-bg:rgba(255,255,255,.05); --wit-neutral-bd:#2e2750; --wit-bubble-out-bg:rgba(250,172,92,.14); --wit-bubble-out-bd:rgba(250,172,92,.35); --wit-bubble-in-bg:rgba(96,165,250,.14); --wit-bubble-in-bd:rgba(96,165,250,.35); } /* Page canvas — add class="wit" to to apply the themed background/text */ .wit{background:var(--wit-bg);color:var(--wit-text);transition:background .2s ease,color .2s ease;} /* Legacy bridge: pages that opt into the theme (body.wit) remap the OLD style.css design tokens onto the wit theme, so existing var(--surface/border/text/muted/amber)-based components on those pages adopt light/dark automatically — no rewrite needed. */ body.wit{ --bg:var(--wit-bg); --surface:var(--wit-surface); --border:var(--wit-border); --text:var(--wit-text); --muted:var(--wit-muted); --amber:var(--wit-amber); --amber-hover:var(--wit-amber-dk); } /* Light-mode legibility for legacy status pills + the category badge: they used light pastel text for dark backgrounds → force dark #374151 text on their (now pale) coloured chip + an edge. */ body.wit[data-theme="light"] .pill{ color:#374151; border:1px solid rgba(26,16,64,.15); } body.wit[data-theme="light"] .badge{ color:#374151; border-color:rgba(245,158,60,.55); } /* The nav bar is ALWAYS dark (#1a1040) in BOTH themes — pin its design tokens to the dark palette so the body.wit light bridge doesn't lighten the nav's text/links/borders. */ .header{ --text:#f4f0ea; --muted:rgba(244,240,234,.5); --border:rgba(244,240,234,.12); --amber:#faac5c; --amber-hover:#e89840; --surface:rgba(255,255,255,.04); } /* Clear separation between client-view sections: amber left accent + dark bold titles. */ body.wit .section{ border-left:3px solid var(--wit-amber); padding-left:.9rem; margin-bottom:1.4rem; } body.wit .section-title{ color:var(--wit-text); font-weight:700; } /* ── Typography ───────────────────────────────────────────── */ .wit-h1{font-size:2rem;color:var(--wit-text);font-weight:800;margin:.2rem 0;} .wit-h2{font-size:1.5rem;color:var(--wit-text);font-weight:700;margin:.2rem 0;} .wit-h3{font-size:1.2rem;color:var(--wit-text);font-weight:700;margin:.2rem 0;} .wit-h4{font-size:1rem;color:var(--wit-text);font-weight:700;margin:.2rem 0;} .wit-muted{color:var(--wit-muted);} .wit-small{font-size:.8rem;color:var(--wit-muted);} .wit-code{font-family:'SF Mono',Menlo,Consolas,monospace;background:var(--wit-code-bg);border:1px solid var(--wit-border);border-radius:5px;padding:.15rem .4rem;font-size:.85rem;color:var(--wit-text);} /* ── Buttons ──────────────────────────────────────────────── */ .wit-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border-radius:8px;padding:.6rem 1.1rem;font-weight:700;font-size:.9rem;cursor:pointer;min-height:42px;border:1px solid transparent;text-decoration:none;line-height:1.2;transition:filter .12s;} .wit-btn:hover:not(:disabled):not(.is-disabled){filter:brightness(.97);} .wit-btn-primary{background:var(--wit-amber);color:#1a1040;border-color:var(--wit-amber);} .wit-btn-secondary{background:var(--wit-surface);color:var(--wit-text);border-color:var(--wit-btn-bd);} .wit-btn-danger{background:var(--wit-error);color:#fff;border-color:var(--wit-error);} .wit-btn-ghost{background:transparent;color:var(--wit-muted);border-color:var(--wit-border);font-weight:600;} .wit-btn:disabled,.wit-btn.is-disabled{background:var(--wit-border);color:var(--wit-muted);border-color:var(--wit-border);cursor:not-allowed;opacity:.8;} .wit-btn-sm{padding:.4rem .7rem;min-height:34px;font-size:.82rem;} .wit-btn-group{display:inline-flex;border:1px solid var(--wit-border);border-radius:8px;overflow:hidden;} .wit-btn-group .wit-btn{border:none;border-radius:0;min-height:auto;} .wit-btn-group .wit-btn+.wit-btn{border-left:1px solid var(--wit-border);} /* ── Alerts ───────────────────────────────────────────────── */ .wit-alert{display:flex;gap:.75rem;border:1px solid;border-left-width:4px;border-radius:8px;padding:.9rem 1.1rem;font-size:.92rem;color:var(--wit-text);} .wit-alert-ico{font-size:1.2rem;line-height:1;} .wit-alert-title{font-weight:700;} .wit-alert-success{background:var(--wit-success-bg);border-color:var(--wit-success-bd);border-left-color:var(--wit-success);} .wit-alert-success .wit-alert-title{color:var(--wit-success-tx);} .wit-alert-warning{background:var(--wit-warning-bg);border-color:var(--wit-warning-bd);border-left-color:var(--wit-warning);} .wit-alert-warning .wit-alert-title{color:var(--wit-warning-tx);} .wit-alert-error{background:var(--wit-error-bg);border-color:var(--wit-error-bd);border-left-color:var(--wit-error);} .wit-alert-error .wit-alert-title{color:var(--wit-error-tx);} .wit-alert-info{background:var(--wit-info-bg);border-color:var(--wit-info-bd);border-left-color:var(--wit-info);} .wit-alert-info .wit-alert-title{color:var(--wit-info-tx);} .wit-alert-neutral{background:var(--wit-neutral-bg);border-color:var(--wit-neutral-bd);border-left-color:var(--wit-muted);} .wit-alert-neutral .wit-alert-title{color:var(--wit-text);} /* ── Badges / pills ───────────────────────────────────────── */ .wit-badge{font-size:.72rem;font-weight:800;padding:.18rem .6rem;border-radius:8px;border:1px solid;display:inline-block;white-space:nowrap;} .wit-badge-hot{color:var(--wit-error);background:var(--wit-error-bg);border-color:var(--wit-error-bd);} .wit-badge-warm{color:var(--wit-warning);background:var(--wit-warning-bg);border-color:var(--wit-warning-bd);} .wit-badge-cool{color:var(--wit-info);background:var(--wit-info-bg);border-color:var(--wit-info-bd);} .wit-badge-cold{color:var(--wit-slate);background:var(--wit-slate-bg);border-color:var(--wit-slate-bd);} .wit-badge-nurture{color:var(--wit-nurture);background:var(--wit-nurture-bg);border-color:var(--wit-nurture-bd);} .wit-pill{font-size:.74rem;font-weight:700;padding:.2rem .65rem;border-radius:999px;border:1px solid;display:inline-block;white-space:nowrap;} .wit-pill-active{color:var(--wit-success-tx);background:var(--wit-success-bg);border-color:var(--wit-success-bd);} .wit-pill-cold{color:var(--wit-info-tx);background:var(--wit-info-bg);border-color:var(--wit-info-bd);} .wit-pill-archived{color:var(--wit-muted);background:var(--wit-neutral-bg);border-color:var(--wit-neutral-bd);} .wit-pill-won{color:#1a1040;background:var(--wit-amber);border-color:var(--wit-amber-dk);} .wit-role{font-size:.74rem;font-weight:700;padding:.2rem .65rem;border-radius:999px;display:inline-block;white-space:nowrap;} .wit-role-admin{color:#fff;background:var(--wit-navy);} .wit-role-staff{color:#1a1040;background:var(--wit-amber);} .wit-role-client{color:var(--wit-text);background:var(--wit-neutral-bd);} /* ── Cards ────────────────────────────────────────────────── */ .wit-card{background:var(--wit-surface);border:1px solid var(--wit-border);border-radius:12px;padding:1.25rem 1.5rem;transition:background .2s ease,border-color .2s ease;} .wit-card-accent{border-left:3px solid var(--wit-amber);} .wit-stat{background:var(--wit-surface);border:1px solid var(--wit-border);border-radius:12px;padding:1rem 1.25rem;transition:background .2s ease,border-color .2s ease;} .wit-stat-num{font-size:1.9rem;font-weight:800;color:var(--wit-text);line-height:1;} .wit-stat-lbl{font-size:.78rem;color:var(--wit-muted);margin-top:.35rem;} .wit-lead-card{background:var(--wit-surface);border:1px solid var(--wit-border);border-radius:12px;padding:1rem 1.25rem;display:flex;gap:1rem;align-items:flex-start;} /* ── Forms ────────────────────────────────────────────────── */ .wit-label{display:block;font-size:.82rem;font-weight:600;color:var(--wit-text);margin-bottom:.3rem;} .wit-input,.wit-select,.wit-textarea{width:100%;padding:.6rem .75rem;border:1px solid var(--wit-border);border-radius:8px;font-size:.92rem;color:var(--wit-text);background:var(--wit-surface);font-family:inherit;} .wit-textarea{resize:vertical;} .wit-input:focus,.wit-select:focus,.wit-textarea:focus{outline:none;border-color:var(--wit-amber);box-shadow:0 0 0 3px rgba(250,172,92,.22);} .wit-input.is-valid{border-color:var(--wit-success);box-shadow:0 0 0 3px rgba(22,163,74,.14);} .wit-input.is-error{border-color:var(--wit-error);box-shadow:0 0 0 3px rgba(220,38,38,.14);} .wit-help{color:var(--wit-muted);font-size:.78rem;margin-top:.25rem;} .wit-error-text{color:var(--wit-error);font-size:.78rem;margin-top:.25rem;} .wit-valid-text{color:var(--wit-success);font-size:.78rem;margin-top:.25rem;} .wit-input-icon{display:flex;align-items:center;border:1px solid var(--wit-border);border-radius:8px;background:var(--wit-surface);padding:0 .65rem;} .wit-input-icon input{border:none;outline:none;padding:.6rem .5rem;font-size:.92rem;flex:1;background:transparent;color:var(--wit-text);} .wit-check{display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--wit-text);cursor:pointer;} .wit-check input{width:18px;height:18px;accent-color:var(--wit-amber);} .wit-toggle{position:relative;display:inline-block;width:44px;height:24px;vertical-align:middle;} .wit-toggle input{opacity:0;width:0;height:0;} .wit-toggle .wit-toggle-track{position:absolute;inset:0;background:var(--wit-border);border-radius:999px;transition:.2s;} .wit-toggle .wit-toggle-knob{position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:.2s;} .wit-toggle input:checked~.wit-toggle-track{background:var(--wit-amber);} .wit-toggle input:checked~.wit-toggle-knob{left:23px;} /* ── Tables ───────────────────────────────────────────────── */ .wit-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--wit-border);border-radius:10px;} .wit-table{width:100%;border-collapse:collapse;font-size:.9rem;background:var(--wit-surface);} .wit-table th,.wit-table td{text-align:left;padding:.6rem .75rem;border-bottom:1px solid var(--wit-border);color:var(--wit-text);} .wit-table thead th{background:var(--wit-surface-2);font-weight:700;} .wit-table tbody tr:last-child td{border-bottom:none;} .wit-empty{border:1px dashed var(--wit-border);border-radius:10px;padding:2.5rem 1rem;text-align:center;color:var(--wit-muted);} .wit-empty-ico{font-size:2rem;} .wit-empty-title{font-weight:600;color:var(--wit-text);margin-top:.5rem;} /* ── Navigation (nav bar stays navy in both themes) ───────── */ .wit-topnav{display:flex;align-items:center;justify-content:space-between;background:var(--wit-navy-surface);padding:.7rem 1.1rem;flex-wrap:wrap;gap:.5rem;} .wit-brand{color:#fff;font-weight:800;} .wit-brand .dot{color:var(--wit-amber);} .wit-navlink{color:var(--wit-navlink);text-decoration:none;padding:.35rem .7rem;border-radius:6px;font-size:.85rem;} .wit-navlink:hover{background:rgba(255,255,255,.08);color:#fff;} .wit-navlink.is-active{color:var(--wit-amber);background:rgba(250,172,92,.15);font-weight:600;} .wit-tabs{display:flex;border-bottom:1px solid var(--wit-border);overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;} .wit-tab{flex:0 0 auto;padding:.6rem 1.1rem;text-decoration:none;font-size:.88rem;color:var(--wit-muted);border-bottom:2px solid transparent;display:inline-flex;align-items:center;gap:.4rem;} .wit-tab.is-active{color:var(--wit-text);border-bottom-color:var(--wit-amber);font-weight:700;} .wit-breadcrumb{font-size:.88rem;color:var(--wit-muted);} .wit-breadcrumb a{color:var(--wit-text);text-decoration:none;} .wit-breadcrumb .sep{color:var(--wit-muted);opacity:.6;} /* theme toggle button (sun/moon) — themed for content headers; nav override below */ .wit-theme-toggle{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--wit-border);color:var(--wit-text);border-radius:8px;width:40px;height:40px;font-size:1.05rem;line-height:1;cursor:pointer;padding:0;margin-bottom:.4rem;} .wit-theme-toggle:hover{background:var(--wit-surface-2);} .wit-topnav .wit-theme-toggle{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff;margin-bottom:0;} .wit-topnav .wit-theme-toggle:hover{background:rgba(255,255,255,.18);} /* ── Progress ─────────────────────────────────────────────── */ .wit-progress{height:10px;background:var(--wit-border);border-radius:999px;overflow:hidden;} .wit-progress-bar{height:100%;background:var(--wit-amber);} .wit-score-row{display:flex;align-items:center;gap:.6rem;} .wit-score-num{width:28px;font-weight:800;text-align:center;} .wit-score-track{flex:1;height:8px;background:var(--wit-border);border-radius:999px;overflow:hidden;} .wit-score-fill{height:100%;} .wit-c-hot{color:var(--wit-error);} .wit-c-warm{color:var(--wit-warning);} .wit-c-cool{color:var(--wit-info);} .wit-fill-hot{background:var(--wit-error);} .wit-fill-warm{background:var(--wit-warning);} .wit-fill-cool{background:var(--wit-info);} .wit-pipeline{display:flex;gap:.3rem;flex-wrap:wrap;} .wit-pstep{flex:1 1 90px;text-align:center;font-size:.72rem;font-weight:700;padding:.4rem .3rem;border-radius:8px;background:var(--wit-surface-2);color:var(--wit-muted);border:1px solid var(--wit-border);} .wit-pstep.is-done{background:var(--wit-amber);color:#1a1040;border-color:var(--wit-amber-dk);} .wit-pstep.is-current{background:var(--wit-navy);color:#fff;border-color:var(--wit-navy);} .wit-steps{display:flex;align-items:center;gap:.5rem;} .wit-step{width:26px;height:26px;border-radius:50%;background:var(--wit-border);color:var(--wit-muted);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:800;flex:none;} .wit-step.is-done{background:var(--wit-success);color:#fff;} .wit-step.is-current{background:var(--wit-amber);color:#1a1040;} .wit-step-line{width:40px;height:2px;background:var(--wit-border);} .wit-step-line.is-done{background:var(--wit-success);} /* ── Special ──────────────────────────────────────────────── */ .wit-cred{background:var(--wit-navy-surface);border-radius:10px;padding:1rem 1.25rem;font-family:'SF Mono',Menlo,Consolas,monospace;} .wit-cred-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;} .wit-cred-val{color:#e5e7eb;font-size:.85rem;word-break:break-all;} .wit-warnbox{background:var(--wit-error-bg);border:1px solid var(--wit-error-bd);border-left:4px solid var(--wit-error);border-radius:8px;padding:1rem 1.25rem;} .wit-warnbox-title{font-weight:800;color:var(--wit-error-tx);} .wit-url{display:inline-flex;align-items:center;gap:.6rem;background:var(--wit-surface-2);border:1px solid var(--wit-border);border-radius:8px;padding:.6rem .9rem;font-family:'SF Mono',Menlo,monospace;font-size:.88rem;color:var(--wit-text);} .wit-pw{display:flex;align-items:center;border:1px solid var(--wit-border);border-radius:8px;background:var(--wit-surface);padding:0 .5rem 0 .75rem;} .wit-pw input{border:none;outline:none;padding:.6rem 0;font-size:.92rem;flex:1;background:transparent;color:var(--wit-text);} .wit-pw button{background:none;border:none;color:var(--wit-muted);cursor:pointer;font-size:.82rem;padding:.4rem;} .wit-link{color:var(--wit-text);text-decoration:underline;text-underline-offset:2px;} .wit-link-amber{color:var(--wit-warning);font-weight:600;text-decoration:none;} .wit-link-muted{color:var(--wit-muted);text-decoration:none;font-size:.85rem;} .wit-timeline-item{display:flex;gap:.75rem;} .wit-timeline-rail{display:flex;flex-direction:column;align-items:center;} .wit-timeline-dot{width:10px;height:10px;border-radius:50%;background:var(--wit-amber);margin-top:.35rem;flex:none;} .wit-timeline-dot.is-muted{background:var(--wit-border);} .wit-timeline-line{flex:1;width:2px;background:var(--wit-border);} .wit-bubble-row{display:flex;margin:.35rem 0;} .wit-bubble-row.out{justify-content:flex-end;} .wit-bubble-row.in{justify-content:flex-start;} .wit-bubble-row.note{justify-content:center;} .wit-bubble{max-width:78%;border:1px solid;border-radius:12px;padding:.5rem .7rem;} .wit-bubble-meta{font-size:.68rem;color:var(--wit-muted);margin-bottom:.2rem;} .wit-bubble-body{font-size:.9rem;color:var(--wit-text);white-space:pre-wrap;word-break:break-word;} .wit-bubble.out{background:var(--wit-bubble-out-bg);border-color:var(--wit-bubble-out-bd);} .wit-bubble.in{background:var(--wit-bubble-in-bg);border-color:var(--wit-bubble-in-bd);} .wit-bubble.note{background:var(--wit-surface-2);border-color:var(--wit-border);max-width:88%;} .wit-spinner{display:inline-block;width:28px;height:28px;border:3px solid var(--wit-border);border-top-color:var(--wit-amber);border-radius:50%;animation:wit-spin .8s linear infinite;} @keyframes wit-spin{to{transform:rotate(360deg)}} .wit-modal{background:var(--wit-surface);border:1px solid var(--wit-border);border-radius:12px;overflow:hidden;box-shadow:0 10px 30px var(--wit-shadow);} .wit-modal-head{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;border-bottom:1px solid var(--wit-border);} .wit-modal-title{font-weight:700;color:var(--wit-text);} .wit-modal-close{background:none;border:none;font-size:1.2rem;color:var(--wit-muted);cursor:pointer;line-height:1;} .wit-modal-body{padding:1.25rem;color:var(--wit-text);font-size:.92rem;} .wit-divider{display:flex;align-items:center;gap:.75rem;color:var(--wit-muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;} .wit-divider:before,.wit-divider:after{content:"";flex:1;height:1px;background:var(--wit-border);} /* ── Utilities ────────────────────────────────────────────── */ .wit-row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;} .wit-stack{display:flex;flex-direction:column;gap:.75rem;} @media(max-width:768px){ .wit-hide-mobile{display:none!important;} } /* ╔══════════════════════════════════════════════════════════╗ ║ SECTION 2 — §8 TOKEN EXTENSIONS (additive) ║ ║ NB: the new elevation values are NOT --wit-shadow — that ║ ║ token is a COLOUR with live consumers (4 pages+.wit-modal)║ ╚══════════════════════════════════════════════════════════╝ */ :root, body[data-theme="light"]{ --wit-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --wit-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, "Cascadia Code", Consolas, monospace; /* score magnitude ramp — NEUTRAL (grey->ink): score reads as QUANTITY, never heat */ --wit-score-low: var(--wit-faint); --wit-score-mid: var(--wit-muted); --wit-score-high: var(--wit-text); --wit-score-top: var(--wit-strong); /* elevation (full box-shadow values — new names, see NB above) */ --wit-elev: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10); --wit-elev-lg: 0 10px 30px rgba(16,24,40,.16); /* rhythm */ --wit-card-pad: 20px; --wit-radius: 16px; --wit-radius-sm: 10px; color-scheme: light; } body[data-theme="dark"]{ --wit-elev: 0 1px 2px rgba(0,0,0,.4), 0 2px 10px rgba(0,0,0,.35); --wit-elev-lg: 0 14px 36px rgba(0,0,0,.55); color-scheme: dark; } /* a11y — keyboard focus ring (invisible to mouse users) + reduced motion */ .wit a:focus-visible, .wit button:focus-visible, .wit input:focus-visible, .wit select:focus-visible, .wit textarea:focus-visible, .wit [role="button"]:focus-visible { outline: 2px solid var(--wit-amber); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .wit *, .wit *::before, .wit *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } } /* ╔══════════════════════════════════════════════════════════╗ ║ SECTION 3 — §8 COMPONENTS, NO NAME COLLISION (global) ║ ╚══════════════════════════════════════════════════════════╝ */ /* type-scale additions (collision-free names only; h2/h3/small live in §4) */ .wit-display { font-size: clamp(28px,5vw,44px); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: var(--wit-strong); } .wit-body { font-size: 14.5px; line-height: 1.55; color: var(--wit-text); } .wit-micro { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--wit-faint); } .wit-num { font-family: var(--wit-mono); } /* layout */ .wit-cols { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .wit-min0 { min-width: 0; } .wit-shell { display: grid; grid-template-columns: 232px minmax(0,1fr); align-items: start; min-height: 100vh; } @media (max-width: 950px) { .wit-shell { grid-template-columns: 1fr; } } /* card extensions (base .wit-card stays live; new geometry in §4) */ .wit-card--pad0 { padding: 0; } .wit-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px var(--wit-card-pad); border-bottom: 1px solid var(--wit-border); } /* Lead card = the decision unit — whole card is tappable */ .wit-leadcard { cursor: pointer; transition: border-color .13s ease, box-shadow .13s ease, transform .13s ease; } .wit-leadcard:hover { border-color: var(--wit-amber); box-shadow: 0 0 0 2px var(--wit-amber), 0 10px 26px rgba(250,172,92,.22); transform: translateY(-2px); } .wit-leadcard:active { transform: translateY(0); box-shadow: var(--wit-elev); } /* ============================================================ THE FOUR-AXIS BADGE SYSTEM (each axis a distinct FORM) 1 Engine state = FILLED pill + dot (semantic ramp) 2 Temperature = segmented DIAL + icon (human, settable) 3 Score = mono NUMERAL, neutral magnitude ramp (quantity) 4 Quote status = OUTLINED pill + glyph (never a filled state) Status->class mapping lives in ONE place: includes/wit-ui.php ============================================================ */ /* 1 — Engine / task state */ .wit-eng { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; } .wit-eng::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .wit-eng.is-pending, .wit-eng.is-blocked { background: var(--wit-slate-bg); color: var(--wit-slate-tx); border: 1px solid var(--wit-slate-bd); } .wit-eng.is-running { background: var(--wit-info-bg); color: var(--wit-info-tx); border: 1px solid var(--wit-info-bd); } .wit-eng.is-await { background: var(--wit-warning-bg); color: var(--wit-warning-tx); border: 1px solid var(--wit-warning-bd); } .wit-eng.is-alert { background: var(--wit-error-bg); color: var(--wit-error-tx); border: 1px solid var(--wit-error-bd); } .wit-eng.is-done { background: var(--wit-success-bg); color: var(--wit-success-tx); border: 1px solid var(--wit-success-bd); } .wit-eng.is-alert.wit-eng--pulse { animation: witPulse 2s ease-in-out infinite; } @keyframes witPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); } 50% { box-shadow: 0 0 0 4px rgba(220,38,38,.18); } } /* 2 — Lead temperature (settable dial; icons in markup: ❄ ☀️ 🔥) */ .wit-temp { display: inline-flex; border: 1px solid var(--wit-border); border-radius: 999px; overflow: hidden; background: var(--wit-surface); } .wit-temp__seg { appearance: none; border: none; background: transparent; font-family: inherit; min-height: 44px; padding: 0 14px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--wit-faint); cursor: pointer; } .wit-temp__seg + .wit-temp__seg { border-left: 1px solid var(--wit-border); } .wit-temp__seg.is-active-cold { color: var(--wit-info-tx); background: var(--wit-info-bg); } .wit-temp__seg.is-active-warm { color: var(--wit-warning-tx); background: var(--wit-warning-bg); } .wit-temp__seg.is-active-hot { color: var(--wit-error-tx); background: var(--wit-error-bg); } /* 3 — Quality score (neutral magnitude numeral; thresholds in wit-ui.php) */ .wit-score { font-family: var(--wit-mono); font-size: 17px; font-weight: 700; line-height: 1; background: var(--wit-surface-2); border: 1px solid var(--wit-border); border-radius: 8px; padding: 2px 9px; } .wit-score.is-low { color: var(--wit-strong); } .wit-score.is-mid { color: var(--wit-strong); } .wit-score.is-high { color: var(--wit-strong); } .wit-score.is-top { color: var(--wit-score-top); font-weight: 800; border-bottom: 2px solid var(--wit-amber-dk); } .wit-pitchable { font-size: 13px; color: var(--wit-muted); } /* 4 — Quote status (outlined pill; glyphs in markup: ✎ → ✓ ✕) */ .wit-quote { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; background: transparent; border: 1px solid var(--wit-border); color: var(--wit-faint); } .wit-quote.is-sent { color: var(--wit-info-tx); border-color: var(--wit-info-bd); } .wit-quote.is-approved, .wit-quote.is-accepted { color: var(--wit-success-tx); border-color: var(--wit-success-bd); } .wit-quote.is-rejected, .wit-quote.is-declined, .wit-quote.is-failed { color: var(--wit-error-tx); border-color: var(--wit-error-bd); } .wit-quote.is-draft, .wit-quote.is-queued, .wit-quote.is-unsent { color: var(--wit-slate-tx); border-color: var(--wit-slate-bd); } /* ---------- FACTS PANEL (signature component) ---------- */ .wit-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .wit-facts__group { padding: var(--wit-card-pad); border-right: 1px solid var(--wit-border); border-bottom: 1px solid var(--wit-border); } .wit-fact { padding: 9px 0; border-bottom: 1px solid var(--wit-border); } .wit-fact:last-child { border-bottom: none; } .wit-fact__row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; } .wit-fact__label { font-size: 13.5px; color: var(--wit-muted); } .wit-fact__value { font-size: 14px; font-weight: 700; color: var(--wit-strong); text-align: right; } .wit-fact__meta { font-size: 11.5px; color: var(--wit-faint); margin-top: 3px; } .wit-fact__meta .ok { color: var(--wit-success-tx); } .wit-stale { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--wit-warning-tx); background: var(--wit-warning-bg); border: 1px solid var(--wit-warning-bd); border-radius: 999px; padding: 1px 8px; } .wit-facts__empty { padding: var(--wit-card-pad); background: var(--wit-surface-2); grid-column: 1 / -1; } /* ---------- SCORE-BREAKDOWN EXPANDER ---------- */ .wit-expander__trigger { width: 100%; text-align: left; background: var(--wit-surface-2); border: none; font-family: inherit; cursor: pointer; padding: 14px var(--wit-card-pad); display: flex; align-items: center; justify-content: space-between; gap: 12px; transition: background .12s ease; } .wit-expander__trigger:hover { background: var(--wit-border); } .wit-expander__chev { width: 26px; height: 26px; border-radius: 7px; background: var(--wit-amber); color: var(--wit-navy); display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; } .wit-expander__chev > span { display: inline-block; transition: transform .25s ease; } .wit-expander.is-open .wit-expander__chev > span { transform: rotate(90deg); } .wit-expander__body { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .3s ease, opacity .22s ease; } .wit-expander.is-open .wit-expander__body { max-height: 720px; opacity: 1; } /* ---------- one-tap outcome chips + custom select chevron ---------- */ .wit-outcome { min-height: 44px; padding: 0 15px; border-radius: 11px; cursor: pointer; font-family: inherit; font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; background: var(--wit-surface); color: var(--wit-text); border: 1px solid var(--wit-btn-bd); transition: all .12s ease; } .wit-outcome.is-active { background: var(--wit-amber); color: var(--wit-navy); border-color: var(--wit-amber); box-shadow: var(--wit-elev); } .wit-select-wrap { position: relative; } .wit-select-wrap .wit-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 34px; cursor: pointer; } .wit-select-wrap::after { content: ""; position: absolute; right: 15px; top: 50%; width: 8px; height: 8px; border: solid var(--wit-muted); border-width: 0 2px 2px 0; transform: translateY(-70%) rotate(45deg); pointer-events: none; } /* ---------- mobile card-stack partner for tables (opt-in markup) ---------- */ .wit-cellclamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .wit-cardstack { display: none; } @media (max-width: 950px) { .wit-cardstack { display: grid; gap: 12px; } } /* ---------- NAV (rail + topbar + bottomnav; always navy band) ---------- */ .wit-rail { background: var(--wit-navy); display: flex; flex-direction: column; padding: 12px 8px; transition: width .2s ease; overflow: hidden; } .wit-rail__item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--wit-navlink); cursor: pointer; white-space: nowrap; } .wit-rail__item.is-active { color: var(--wit-amber); background: rgba(250,172,92,.16); } .wit-topbar { height: 52px; background: var(--wit-surface); border-bottom: 1px solid var(--wit-border); display: flex; align-items: center; gap: 10px; padding: 0 14px; } .wit-bottomnav { height: 60px; background: var(--wit-navy); display: flex; align-items: stretch; } .wit-bottomnav__tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; justify-content: center; background: transparent; border: none; cursor: pointer; font-family: inherit; color: var(--wit-navlink); } .wit-bottomnav__tab.is-active { color: var(--wit-amber); } .wit-utilitystrip { background: var(--wit-surface); border-bottom: 1px solid var(--wit-border); display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 4px 13px; } /* ---------- STATES ---------- */ .wit-errorstate { text-align: center; padding: 30px 20px; } .wit-empty__icon { width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 14px; } .wit-skel { background: linear-gradient(90deg, var(--wit-surface-2) 0, var(--wit-border) 70px, var(--wit-surface-2) 140px); background-size: 440px 100%; animation: witShimmer 1.3s infinite linear; border-radius: 6px; } @keyframes witShimmer { 0% { background-position: -440px 0; } 100% { background-position: 440px 0; } } /* ---------- TOAST ---------- */ .wit-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 9999; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 12px; font-size: 14px; font-weight: 600; background: var(--wit-surface); box-shadow: var(--wit-elev-lg); animation: witToast .28s cubic-bezier(.2,.9,.3,1); } .wit-toast.is-success { color: var(--wit-success-tx); border: 1px solid var(--wit-success-bd); } .wit-toast.is-info { color: var(--wit-info-tx); border: 1px solid var(--wit-info-bd); } .wit-toast.is-warning { color: var(--wit-warning-tx); border: 1px solid var(--wit-warning-bd); } .wit-toast.is-error { color: var(--wit-error-tx); border: 1px solid var(--wit-error-bd); } @keyframes witToast { from { opacity: 0; transform: translateX(-50%) translateY(12px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } /* hidden scrollbars for dense rails/lists */ .wit-noscroll { scrollbar-width: none; } .wit-noscroll::-webkit-scrollbar { width: 0; height: 0; display: none; } /* ╔══════════════════════════════════════════════════════════╗ ║ SECTION 4 — §8 PRIMITIVES, SCOPED (opt-in per page) ║ ║ These names COLLIDE with live classes above. A MIGRATED ║ ║ page opts in with and gets the new ║ ║ geometry; un-migrated pages keep the live look untouched. ║ ║ Both button spellings work under s8 (-primary/--primary). ║ ╚══════════════════════════════════════════════════════════╝ */ body.wit.s8 { font-family: var(--wit-font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .s8 a { color: var(--wit-amber-dk); text-decoration: none; } .s8 a:hover { color: var(--wit-amber); text-decoration: underline; } .s8 ::selection { background: var(--wit-amber); color: var(--wit-navy); } /* type scale (s8) */ .s8 .wit-h2 { font-size: clamp(22px,3vw,30px); font-weight: 800; letter-spacing: -.01em; color: var(--wit-strong); } .s8 .wit-h3 { font-size: 18px; font-weight: 700; color: var(--wit-strong); } .s8 .wit-small { font-size: 13px; font-weight: 500; color: var(--wit-muted); } /* card (s8) */ .s8 .wit-card { background: var(--wit-surface); border: 1px solid var(--wit-border); border-radius: var(--wit-radius); padding: var(--wit-card-pad); box-shadow: var(--wit-elev); transition: none; } /* buttons (s8) — one primary dominates per screen; both spellings alias to the same rules */ .s8 .wit-btn { min-height: 44px; padding: 0 18px; border-radius: var(--wit-radius-sm); font-family: inherit; font-weight: 600; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; text-decoration: none; line-height: 1.2; transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease; filter: none; } .s8 .wit-btn:hover:not(:disabled):not(.is-disabled) { filter: none; } .s8 .wit-btn--sm, .s8 .wit-btn-sm { min-height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: 8px; } .s8 .wit-btn--md { min-height: 38px; padding: 0 15px; font-size: 13.5px; border-radius: 9px; } .s8 .wit-btn--primary, .s8 .wit-btn-primary { background: var(--wit-amber); color: var(--wit-navy); border-color: var(--wit-amber); font-weight: 700; } .s8 .wit-btn--primary:hover, .s8 .wit-btn-primary:hover { background: var(--wit-amber-dk); border-color: var(--wit-navy); transform: translateY(-1px); box-shadow: 0 0 0 2px var(--wit-amber), var(--wit-elev-lg); filter: brightness(1.06); color: var(--wit-navy); text-decoration: none; } .s8 .wit-btn--primary:active, .s8 .wit-btn-primary:active { transform: translateY(0); box-shadow: none; } .s8 .wit-btn--secondary, .s8 .wit-btn-secondary { background: var(--wit-surface); color: var(--wit-strong); border-color: var(--wit-btn-bd); } .s8 .wit-btn--secondary:hover, .s8 .wit-btn-secondary:hover { border-color: var(--wit-amber); background: var(--wit-surface-2); transform: translateY(-1px); color: var(--wit-strong); text-decoration: none; } .s8 .wit-btn--ghost, .s8 .wit-btn-ghost { background: transparent; color: var(--wit-text); border-color: transparent; } .s8 .wit-btn--ghost:hover, .s8 .wit-btn-ghost:hover { background: var(--wit-surface-2); color: var(--wit-text); text-decoration: none; } .s8 .wit-btn--danger, .s8 .wit-btn-danger { background: var(--wit-error-bg); color: var(--wit-error-tx); border-color: var(--wit-error-bd); } .s8 .wit-btn--danger:hover, .s8 .wit-btn-danger:hover { background: var(--wit-error-tx); color: #fff; border-color: var(--wit-error-tx); transform: translateY(-1px); text-decoration: none; } .s8 .wit-btn:disabled, .s8 .wit-btn[aria-disabled="true"], .s8 .wit-btn.is-disabled { background: var(--wit-surface-2); color: var(--wit-faint); border-color: var(--wit-border); cursor: not-allowed; opacity: 1; } /* forms (s8) */ .s8 .wit-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--wit-muted); margin-bottom: 6px; } .s8 .wit-input, .s8 .wit-select, .s8 .wit-textarea { width: 100%; min-height: 44px; padding: 0 13px; border-radius: var(--wit-radius-sm); border: 1px solid var(--wit-btn-bd); background: var(--wit-surface); color: var(--wit-text); font-family: inherit; font-size: 14px; } .s8 .wit-textarea { padding: 11px 13px; resize: vertical; min-height: 0; } .s8 .wit-check { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--wit-text); cursor: pointer; } .s8 .wit-check input { width: 20px; height: 20px; accent-color: var(--wit-amber-dk); cursor: pointer; } /* table (s8) — pairs with .wit-cardstack markup below 950px */ .s8 .wit-table { width: 100%; border-collapse: collapse; font-size: 13.5px; background: transparent; } .s8 .wit-table thead tr { background: var(--wit-surface-2); } .s8 .wit-table th { text-align: left; padding: 11px 14px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wit-faint); border-bottom: none; } .s8 .wit-table td { padding: 11px 14px; border-top: 1px solid var(--wit-border); border-bottom: none; color: var(--wit-text); } .s8 .wit-table td.num { text-align: right; font-family: var(--wit-mono); } .s8 .wit-table-wrap { display: block; overflow-x: visible; border: 1px solid var(--wit-border); border-radius: var(--wit-radius-sm); } @media (max-width: 950px) { .s8 .wit-table-wrap { display: none; } /* s8 pages MUST ship .wit-cardstack markup */ } /* empty state (s8) */ .s8 .wit-empty { border: none; border-radius: var(--wit-radius-sm); padding: 30px 20px; text-align: center; color: var(--wit-muted); } /* HOTFIX 2026-07-08: facts long-value overflow (min-width:0 + wrap) */ .wit-facts__group{min-width:0;} .wit-fact__row{min-width:0;} .wit-fact__value{min-width:0;overflow-wrap:anywhere;word-break:break-word;} /* ============================================================ §8 G2 COMPOSITION APPEND — appended to the live portal.css at deploy (bump to ?v=9). ONLY additions: the desktop shell, rail metrics, topbar, facts 3-col cap and breakdown composition, replicated from the RENDERED MOCKUP (Whitfield-Component-System.html). - New class names (nav8-*, g8s-*) or body.wit.s8 scope ONLY — no Section-1 legacy class redefinitions, no token redefinitions (the --nav8-* names below are NEW tokens). - Does NOT duplicate the live hotfix (min-width:0 / overflow-wrap on .wit-facts__group / .wit-fact__row / .wit-fact__value — already on the deployed sheet). Mockup measurements replicated: rail 60px collapsed / 208px pinned / 212px peek drawer · rail item 9px 10px pad, r9, 13px/600, icon w22 · collapsed icon tile 40×40 r10 fs17 · group header 9.5px/700 .1em uppercase rgba(255,255,255,.38) · topbar 52px · content measure 920px · card radius 16 / pad var(--wit-card-pad) / 16px rhythm. ============================================================ */ :root { --nav8-topbar: 52px; --nav8-strip: 48px; --nav8-bottom: 60px; } /* ── DESKTOP SHELL: fixed navy rail + content column (mockup desktop frame) ── */ .nav8-rail { position: fixed; left: 0; top: 0; bottom: 0; width: 60px; z-index: 70; background: var(--wit-navy); display: flex; flex-direction: column; padding: 12px 9px; transition: width .2s ease; overflow: hidden; } html.nav8-pinned .nav8-rail { width: 208px; } body.wit.s8 { padding-left: 60px; } html.nav8-pinned body.wit.s8 { padding-left: 208px; } /* Brand blocks — collapsed column ("w." + ☰) vs pinned row ("whitfield.it" + 📌) */ .nav8-brandcol { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 0 0 12px; } .nav8-brandcol .nav8-wordmark { font-weight: 800; color: #fff; font-size: 16px; text-decoration: none; } .nav8-brandrow { display: none; align-items: center; justify-content: space-between; gap: 6px; padding: 0 4px 12px; } .nav8-brandrow .nav8-wordmark { font-weight: 800; color: #fff; font-size: 15px; white-space: nowrap; text-decoration: none; } .nav8-wordmark .dot { color: var(--wit-amber); } html.nav8-pinned .nav8-brandcol { display: none; } html.nav8-pinned .nav8-brandrow { display: flex; } .nav8-hamb { width: 40px; height: 40px; border: none; border-radius: 10px; background: rgba(255,255,255,.12); color: #fff; font-size: 16px; cursor: pointer; } .nav8-pinbtn { flex: none; width: 30px; height: 30px; border: none; border-radius: 8px; background: rgba(255,255,255,.12); color: #fff; font-size: 14px; cursor: pointer; } /* Rail body: groups + items (pinned = labelled rows; collapsed = 40×40 icon tiles) */ .nav8-scroll { flex: 1; overflow: auto; min-height: 0; } .nav8-grp { display: none; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.38); padding: 9px 10px 4px; } html.nav8-pinned .nav8-grp { display: block; } .nav8-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--wit-navlink); white-space: nowrap; text-decoration: none; cursor: pointer; min-width: 0; } .nav8-item .nav8-ico { font-size: 16px; flex: none; width: 22px; text-align: center; } .nav8-item.is-active { color: var(--wit-amber); background: rgba(250,172,92,.16); } .nav8-item:hover { color: #fff; } .nav8-item.is-active:hover { color: var(--wit-amber); } html:not(.nav8-pinned) .nav8-rail .nav8-item { width: 40px; height: 40px; padding: 0; justify-content: center; margin: 0 auto 2px; border-radius: 10px; } html:not(.nav8-pinned) .nav8-rail .nav8-item .nav8-ico { font-size: 17px; width: auto; } html:not(.nav8-pinned) .nav8-rail .nav8-item .nav8-lbl { display: none; } .nav8-foot { margin-top: auto; border-top: 1px solid rgba(255,255,255,.12); padding-top: 7px; } /* ── PEEK drawer (☰): 212px overlay, no reflow (mockup) ── */ .nav8-peekscrim { position: fixed; inset: 0; background: rgba(10,6,25,.4); z-index: 74; opacity: 0; pointer-events: none; transition: opacity .2s ease; } .nav8-peekscrim.is-open { opacity: 1; pointer-events: auto; } .nav8-peekdrawer { position: fixed; top: 0; bottom: 0; left: 0; width: 212px; z-index: 75; background: var(--wit-navy); box-shadow: var(--wit-elev-lg); padding: 12px 10px; overflow: auto; transform: translateX(-100%); transition: transform .2s ease; } .nav8-peekdrawer.is-open { transform: none; } .nav8-peekhead { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 6px 10px; } .nav8-peekhead .nav8-wordmark { font-size: 14px; } .nav8-peekbtns { display: flex; gap: 5px; } .nav8-peekpin { width: 28px; height: 28px; border: none; border-radius: 7px; background: rgba(250,172,92,.2); color: var(--wit-amber); font-size: 12px; cursor: pointer; } .nav8-peekclose { width: 28px; height: 28px; border: none; border-radius: 7px; background: rgba(255,255,255,.12); color: #fff; font-size: 13px; cursor: pointer; } .nav8-peekdrawer .nav8-grp { display: block; } .nav8-peekdrawer .nav8-item { width: auto; height: auto; padding: 9px 10px; justify-content: flex-start; margin: 0; } .nav8-peekdrawer .nav8-item .nav8-lbl { display: inline; } /* ── TOPBAR: 52px awareness bar (breadcrumb · theme · user) — stubs render nothing ── */ .nav8-topbar { position: sticky; top: 0; z-index: 60; height: var(--nav8-topbar); } .nav8-crumb { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--wit-muted); min-width: 0; } .nav8-crumb a { color: var(--wit-muted); text-decoration: none; flex: none; } .nav8-crumb a:hover { color: var(--wit-amber-dk); text-decoration: none; } .nav8-crumb .sep { color: var(--wit-faint); flex: none; } .nav8-crumb b { color: var(--wit-strong); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .nav8-user { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; min-width: 0; flex: none; } .nav8-name { font-size: 13px; font-weight: 600; color: var(--wit-muted); white-space: nowrap; } .nav8-themebtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--wit-border); border-radius: 10px; background: var(--wit-surface); color: var(--wit-strong); font-size: 16px; cursor: pointer; flex: none; } .nav8-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--wit-amber); color: var(--wit-navy); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; } /* ── MOBILE (<950): strip + bottom-nav + More sheet (G1 behaviour preserved) ── */ .nav8-strip { display: none; } .nav8-bottom { display: none; } .nav8-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 80; opacity: 0; pointer-events: none; transition: opacity .2s ease; } .nav8-scrim.is-open { opacity: 1; pointer-events: auto; } .nav8-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 81; background: var(--wit-surface); border: 1px solid var(--wit-border); border-bottom: none; border-radius: 16px 16px 0 0; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform .25s ease; } .nav8-sheet.is-open { transform: none; } .nav8-sheet a, .nav8-sheet .nav8-sheetbtn { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 10px; font-size: 14.5px; font-weight: 600; color: var(--wit-text); text-decoration: none; background: transparent; border: none; width: 100%; font-family: inherit; cursor: pointer; } .nav8-sheet a:hover, .nav8-sheet .nav8-sheetbtn:hover { background: var(--wit-surface-2); } .nav8-sheet a.is-active { color: var(--wit-amber-dk); } @media (max-width: 950px) { .nav8-rail, .nav8-topbar, .nav8-peekdrawer, .nav8-peekscrim { display: none; } body.wit.s8 { padding-left: 0; padding-bottom: calc(var(--nav8-bottom) + env(safe-area-inset-bottom)); } html.nav8-pinned body.wit.s8 { padding-left: 0; } .nav8-strip { display: flex; position: sticky; top: 0; z-index: 60; padding-top: calc(4px + env(safe-area-inset-top)); min-height: var(--nav8-strip); } .nav8-strip .nav8-brandm { color: var(--wit-strong); font-weight: 800; text-decoration: none; font-size: 15px; } .nav8-strip .nav8-brandm .dot { color: var(--wit-amber-dk); } .nav8-bottom { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; padding-bottom: env(safe-area-inset-bottom); } .nav8-bottom .wit-bottomnav__tab { min-height: 44px; text-decoration: none; font-size: 10.5px; font-weight: 700; } .nav8-bottom .nav8-tabico { font-size: 1.15rem; line-height: 1; } } /* ── CONTENT COLUMN: the mockup's 920px measure + rhythm (fixes the 1400px river) ── */ .g8s-content { max-width: 920px; margin: 0 auto; padding: clamp(16px, 2.5vw, 28px) clamp(14px, 3vw, 28px) 90px; } .g8s-content > * + * { margin-top: 16px; } @media (min-width: 950px) { .g8s-content { padding-bottom: 28px; } } /* ── FACTS: cap at 3 columns on desktop; Contact empty spans full width beneath ── */ .g8s-facts3 { grid-template-columns: 1fr; } @media (min-width: 700px) and (max-width: 949px) { .g8s-facts3 { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (min-width: 950px) { .g8s-facts3 { grid-template-columns: repeat(3, minmax(0,1fr)); } } /* long verified URLs: clamp to 2 lines inside the cell (mockup cell-clamp pattern) */ .g8s-clampurl { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; } /* honest empty row (mockup contact empty-state composition) */ .g8s-emptyrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .g8s-emptyrow > * { min-width: 0; } .g8s-emptyleft { display: flex; align-items: center; gap: 10px; min-width: 0; } .g8s-emptyico { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--wit-surface); border: 1px dashed var(--wit-btn-bd); display: inline-flex; align-items: center; justify-content: center; color: var(--wit-faint); font-size: 15px; } .g8s-emptytitle { font-size: 13.5px; font-weight: 600; color: var(--wit-text); } .g8s-emptysub { font-size: 12px; color: var(--wit-faint); } /* ── SCORE BREAKDOWN: mockup body composition (dim tiles · fit rows · note chips) ── */ .g8s-trigscore { font-family: var(--wit-mono); font-size: 18px; font-weight: 800; } .g8s-trigscore.is-low { color: var(--wit-strong); } .g8s-trigscore.is-mid { color: var(--wit-strong); } .g8s-trigscore.is-high { color: var(--wit-strong); } .g8s-trigscore.is-top { color: var(--wit-score-top); } .g8s-dims { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin: 16px 0; } .g8s-dimtile { background: var(--wit-surface-2); border: 1px solid var(--wit-border); border-radius: 12px; padding: 12px; text-align: center; min-width: 0; } .g8s-dimtile .lbl { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wit-faint); } .g8s-dimtile .val { font-family: var(--wit-mono); font-size: 22px; font-weight: 800; color: var(--wit-strong); margin-top: 4px; word-break: break-word; } .g8s-fitrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--wit-border); } .g8s-fitrow:last-child { border-bottom: none; } .g8s-fitrow .svc { font-size: 14px; color: var(--wit-text); min-width: 0; } .g8s-fitrow .prc { font-family: var(--wit-mono); font-size: 14px; font-weight: 700; color: var(--wit-strong); flex: none; } .g8s-notechips { display: flex; flex-wrap: wrap; gap: 8px; } .g8s-notechip { font-size: 12px; color: var(--wit-text); background: var(--wit-surface-2); border: 1px solid var(--wit-border); border-radius: 999px; padding: 4px 11px; min-width: 0; } .g8s-computed { font-family: var(--wit-mono); font-size: 11.5px; color: var(--wit-faint); margin-top: 16px; } /* ============================================================ §8 G3 POLISH APPEND — appended to the live portal.css AFTER the G2 append (bump ?v=10). ONLY new rules: the labelled micro-column header metrics + the stage PROGRESS states. Same constraints as G2's append: no token redefinitions, no Section-1 legacy class redefinitions — new g8s-* names only (state classes attach ALONGSIDE .wit-pstep, whose base geometry is untouched). ============================================================ */ /* ── Header metrics: .wit-micro label over value, aligned micro-columns (mockup) ── */ .g8s-metric { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .g8s-metric .wit-micro { line-height: 1; } .g8s-metric .val { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; } .g8s-metric .val .txt { font-size: 15px; font-weight: 700; color: var(--wit-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Stage progress states (ride on .wit-pstep base geometry; later sheet wins) ── completed = green + ✓ (prefix in markup) · current = amber-filled · later = muted */ .g8s-pstep.is-complete { background: var(--wit-success-bg); color: var(--wit-success-tx); border-color: var(--wit-success-bd); } .g8s-pstep.is-current { background: var(--wit-amber); color: var(--wit-navy); border-color: var(--wit-amber-dk); font-weight: 700; } .g8s-pstep.is-later { background: var(--wit-surface-2); color: var(--wit-muted); border-color: var(--wit-border); } /* ============================================================ §8 TIER-1 SHARED APPEND — appended ONCE to the live portal.css before page 1 deploys (bump ?v to the Tier-1 shared value at that point). Same constraints as the G2/G3 appends: new .t1-/.g8s- names only, no token redefinitions, no Section-1 redefinitions, and NO new colour ramps — the two stateful rules below re-express EXISTING axes in a compact FORM: the temperature chip reuses the dial's exact token mapping (cold→info · warm→warning · hot→error, per WIT-Component-System-Review §5), zero new colours. Shared by: clients.php + pipeline.php (chips, temp chip) · all Tier-1 lists (row link). ============================================================ */ /* ── Filter chips (replace form controls on list pages; single-select per group) ── */ .t1-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; } .t1-chipgrp { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; } .t1-chip { min-height: 44px; padding: 0 14px; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; background: var(--wit-surface); color: var(--wit-muted); border: 1px solid var(--wit-btn-bd); transition: all .12s ease; min-width: 0; } .t1-chip:hover { border-color: var(--wit-amber); } .t1-chip[aria-pressed="true"] { background: var(--wit-amber); color: var(--wit-navy); border-color: var(--wit-amber); font-weight: 700; } /* ── Compact READ-ONLY temperature chip (list contexts; the dial stays a detail-page setter). Same axis, same tokens as .wit-temp__seg.is-active-* — a form, not a palette. ── */ .t1-temp { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; border: 1px solid var(--wit-border); background: var(--wit-surface); color: var(--wit-muted); } .t1-temp.is-cold { color: var(--wit-info-tx); background: var(--wit-info-bg); border-color: var(--wit-info-bd); } .t1-temp.is-warm { color: var(--wit-warning-tx); background: var(--wit-warning-bg); border-color: var(--wit-warning-bd); } .t1-temp.is-hot { color: var(--wit-error-tx); background: var(--wit-error-bg); border-color: var(--wit-error-bd); } /* ── Clickable list rows (desktop tables) ── */ .t1-rowlink { cursor: pointer; transition: background .12s ease, box-shadow .12s ease; } .t1-rowlink:hover { background: var(--wit-surface-2); box-shadow: inset 3px 0 0 var(--wit-amber); } /* ── Lead cardstack internals (mockup lead-card: title/meta left · score + £ right) ── */ .t1-cardtop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .t1-cardtop > * { min-width: 0; } .t1-cardname { font-weight: 800; color: var(--wit-strong); font-size: 16px; word-break: break-word; } .t1-cardmeta { font-size: 12.5px; color: var(--wit-muted); margin-top: 2px; } .t1-cardscore { text-align: right; flex: none; } .t1-cardscore .n { font-family: var(--wit-mono); font-size: 19px; font-weight: 800; color: var(--wit-strong); } .t1-cardscore .p { font-size: 12px; color: var(--wit-muted); } .t1-cardwhy { margin: 12px 0 14px; font-size: 13.5px; line-height: 1.5; color: var(--wit-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .t1-cardbadges { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } /* t1-punch1 2026-07-08: stat-value overflow clamp (s8-scoped) + empty pipeline column state */ .s8 .wit-stat { min-width: 0; } .s8 .wit-stat-num { font-size: clamp(19px, 1.9vw, 30px); min-width: 0; overflow-wrap: anywhere; } .s8 .pipeline-col-cards:empty::after { content: 'Nothing at this stage'; display: block; text-align: center; color: var(--wit-faint); font-size: 12.5px; padding: 22px 8px; } /* t1-punch2 2026-07-08: anchor-hover leak guard. style.css:24 (a:hover -> amber, 0,1,1) outranks .wit-btn-* (0,1,0) on EVERY themed page, so anchor-styled buttons washed out on hover portal-wide. These (0,3,1) rules pin label colour for both class spellings. */ .wit a.wit-btn:hover { text-decoration: none; } .wit a.wit-btn-primary:hover, .wit a.wit-btn--primary:hover { color: var(--wit-navy); text-decoration: none; } .wit a.wit-btn-secondary:hover, .wit a.wit-btn--secondary:hover { color: var(--wit-strong); text-decoration: none; } .wit a.wit-btn-ghost:hover, .wit a.wit-btn--ghost:hover { color: var(--wit-text); text-decoration: none; } .wit a.wit-btn-danger:hover, .wit a.wit-btn--danger:hover { color: #fff; text-decoration: none; } /* ============================================================ §8 NAV-V2 COMPOSITION APPEND — appended to the live portal.css AFTER all prior appends (bump ?v at deploy). Overrides the G2-append nav8-* rules to the mockup rail metrics. Constraints held: no token redefinitions (--nav8-rail-w is a NEW var), no Section-1 redefinitions — every rule below targets nav8-* (G2-append names, later-sheet-wins). Metrics: collapsed 58px · pinned 232px (in-flow, content offset transitions) · peek drawer 232px overlay · labels 13px/600 · items 9px 10px r9 · group headers 10.5px uppercase faint · collapsed = top-packed stack with 1px group dividers, footer alone at the bottom. ============================================================ */ /* ── The rail width is ONE variable; the content offset consumes it (in-flow pin) ── */ :root { --nav8-rail-w: 58px; } html.nav8-pinned { --nav8-rail-w: 232px; } .nav8-rail { width: var(--nav8-rail-w); } html.nav8-pinned .nav8-rail { width: var(--nav8-rail-w); } .nav8-peekdrawer { width: 232px; } @media (min-width: 951px) { body.wit.s8 { padding-left: var(--nav8-rail-w); transition: padding-left .2s ease; } html.nav8-pinned body.wit.s8 { padding-left: var(--nav8-rail-w); } } /* body-level transition isn't covered by the system's `.wit *` reduced-motion rule */ @media (prefers-reduced-motion: reduce) { body.wit.s8, .nav8-rail { transition-duration: .001ms !important; } } /* ── Collapsed rail: tight top-packed stack; footer group ALONE pushes to the bottom ── */ .nav8-scroll { display: flex; flex-direction: column; } .nav8-scroll .nav8-foot { margin-top: auto; } html:not(.nav8-pinned) .nav8-rail .nav8-item { margin: 0 auto 2px; } /* ── Group headers: pinned/peek = 10.5px uppercase faint; collapsed = 1px DIVIDERS ── */ html.nav8-pinned .nav8-grp, .nav8-peekdrawer .nav8-grp { font-size: 10.5px; } html:not(.nav8-pinned) .nav8-rail .nav8-grp { display: block; height: 1px; padding: 0; margin: 8px 8px; background: rgba(255,255,255,.12); overflow: hidden; font-size: 0; line-height: 0; } html:not(.nav8-pinned) .nav8-rail .nav8-grp:first-child { display: none; } /* no rule above MAIN */ /* t1-punch3 2026-07-08: eyeball round-up system fixes. (a) content width 920->1280 (wasted side space on desktop); (b) classed anchors never underline on hover (bare prose links keep it); (c) nav skin repair: .nav8-item (0,1,0) was losing to .s8 a (0,1,1) -> all-amber nav. */ .g8s-content { max-width: 1280px; } .s8 a[class]:hover { text-decoration: none; } .wit .nav8-item { color: var(--wit-navlink); font-size: 13px; font-weight: 600; text-decoration: none; } .wit .nav8-item:hover { color: #fff; background: rgba(255,255,255,.08); text-decoration: none; } .wit .nav8-item.is-active { color: var(--wit-amber); background: rgba(250,172,92,.16); } .wit .nav8-wordmark { color: #fff; font-weight: 800; font-size: 16px; letter-spacing: -.01em; text-decoration: none; } .wit .nav8-wordmark:hover { color: #fff; text-decoration: none; } .wit .nav8-wordmark .dot { color: var(--wit-amber); } /* ============================================================ §8 TIER-2A SHARED APPEND — appended ONCE to the live portal.css before task-view deploys (the deploy chat owns the ?v bump). Same constraints as every append: no token or Section-1 redefinitions, no colour ramps — one new reusable rule family. .wit-log — THE OVERFLOW FIX (banked from Alex's task-view screenshot): the ONE shared block style for ALL log/JSON/evidence content — meta-JSON lines, curl/header blocks, command_output, long URLs. pre-wrap + overflow-wrap:anywhere + word-break so nothing can spill a card; consumers must keep min-width:0 on every ancestor (the page's job). task-view adopts it now; cockpit/verify surfaces adopt on their next pass. ============================================================ */ .wit-log { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; min-width: 0; max-width: 100%; font-family: var(--wit-mono); font-size: 12px; line-height: 1.5; color: var(--wit-text); background: var(--wit-surface-2); border: 1px solid var(--wit-border); border-radius: 8px; padding: 8px 10px; margin: 0; } /* tall payloads scroll INSIDE the block, never the page */ .wit-log--capped { max-height: 320px; overflow-y: auto; } /* inline variant for short one-line meta (no box chrome) */ .wit-log--bare { background: transparent; border: none; padding: 0; border-radius: 0; } /* ══════════════════════════════════════════════════════════════════ E-BATCH append — deploy appends this to portal.css and bumps ?v estate-wide. Two additions only; everything else in the batch rides existing classes or page-local