/* ═══════════════════════════════════════════════════════════════════════ LiveThreat Scorecard — VERISQ.AI Light Theme Brand: Orange accent · Clean white surfaces · Easy on the eyes ═══════════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root { --primary: #E8600A; --primary-light: #F07B2E; --primary-dim: #E8600A66; --primary-bg: #E8600A0C; --primary-border: #E8600A22; --primary-hover: #D4570A; --advanced: #16a34a; --intermediate: #eab308; --basic: #dc2626; --grade-a: #16a34a; --grade-b: #65a30d; --grade-c: #d97706; --grade-d: #ea580c; --grade-f: #dc2626; --bg: #F0F3F8; --card-bg: #ffffff; --surface: #fafafa; --card-raised: #ffffff; --text: #1a1a1a; --text-mid: #4b5563; --text-muted: #9ca3af; --border: #e5e7eb; --border-light: #f3f4f6; --sidebar-bg: #ffffff; --green: #16a34a; --green-dim: #dcfce7; --red: #dc2626; --red-bg: #fee2e2; --sidebar-text: #6b7280; --sidebar-active: var(--primary, #E8600A); --blue: #2563eb; --purple: #7c3aed; --radius: 10px; --radius-lg: 14px; --green: #16a34a; --green-dim: rgba(22,163,74,.08); --red: #dc2626; --red-dim: rgba(220,38,38,.08); --amber: #d97706; --shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04); --shadow-lg: 0 10px 25px rgba(0,0,0,.12), 0 4px 10px rgba(0,0,0,.08); --shadow-xl: 0 20px 40px rgba(0,0,0,.16); --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.04); --font-display: 'Inter', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; } /* ─── Layout ────────────────────────────────────────────────────────── */ .app-layout { display: flex; min-height: 100vh; } .sidebar { width: 252px; background: var(--sidebar-bg); color: var(--sidebar-text); display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; z-index: 100; border-right: 1px solid var(--border); transition: width .2s ease; height: 100vh; height: 100dvh; overflow: hidden; } .sidebar-brand { padding: 1.25rem 1.25rem; display: flex; align-items: center; gap: 0.5rem; border-bottom: 1px solid var(--border); flex: 0 0 auto; } .brand-icon { font-size: 1.5rem; } .brand-text { font-size: 1rem; font-weight: 800; color: var(--text); letter-spacing: 1px; font-family: var(--font-display); } .brand-dot { color: var(--primary); font-weight: 900; } .sidebar-nav { flex: 1 1 0px; padding: 0.5rem 0.4rem; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .sidebar-nav::-webkit-scrollbar { width: 4px; } .sidebar-nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } .sidebar-nav::-webkit-scrollbar-track { background: transparent; } .nav-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 1rem; color: var(--sidebar-text); text-decoration: none; transition: all 0.15s; font-size: 0.82rem; border-radius: 6px; margin-bottom: 1px; font-family: var(--font-body); } .nav-item:hover { color: var(--text); background: var(--surface); } .nav-item.active { color: var(--primary); background: var(--primary-bg); border: 1px solid var(--primary-border); font-weight: 600; } .nav-section-label { display:block; font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color: var(--text-muted); padding:.6rem 1rem .25rem; font-family: var(--font-mono); } .nav-icon { font-size: 0.9rem; width: 18px; text-align: center; } .sidebar-footer { padding: 0.75rem 1.25rem; border-top: 1px solid var(--border); flex-shrink: 0; } .version { font-size: 0.7rem; color: var(--text-muted); font-family: var(--font-mono); } .nav-badge { font-size: 7px; padding: 1px 5px; border-radius: 3px; background: var(--primary); color: #fff; font-weight: 800; margin-left: auto; font-family: var(--font-mono); } .main-content { flex: 1; min-width: 0; min-height: 100vh; background: var(--bg); color: var(--text); } .top-bar { padding: 1rem 2rem; background: var(--card-bg); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; } .page-title { font-size: 1.1rem; font-weight: 700; font-family: var(--font-display); } .content-area { padding: 2rem 2.5rem; } /* ─── Cards ─────────────────────────────────────────────────────────── */ .card { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem; margin-bottom: 1.25rem; border: 1px solid var(--border); } .card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 1rem; color: var(--text); font-family: var(--font-display); } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.25rem; } .full-width { grid-column: 1 / -1; } /* ─── Metric Cards ──────────────────────────────────────────────────── */ .metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .metric-grid.compact { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } .metric-card { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem; text-align: center; border: 1px solid var(--border); } .metric-card.accent { border-top: 3px solid var(--primary); } .metric-card.card-advanced { border-top: 3px solid var(--advanced); } .metric-card.card-intermediate { border-top: 3px solid var(--intermediate); } .metric-card.card-basic { border-top: 3px solid var(--basic); } .metric-value { font-size: 1.75rem; font-weight: 900; line-height: 1.2; font-family: var(--font-display); color: var(--text); } .metric-label { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; } /* ─── Tables ────────────────────────────────────────────────────────── */ .data-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .data-table th { text-align: left; padding: 0.6rem 0.75rem; font-weight: 600; color: var(--text-muted); border-bottom: 2px solid var(--border); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; font-family: var(--font-mono); } .data-table td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border-light); } .data-table tbody tr:hover { background: var(--surface); } .font-medium { font-weight: 500; } .text-muted { color: var(--text-muted); } .text-sm { font-size: 0.8rem; } /* ─── Badges ────────────────────────────────────────────────────────── */ .grade-badge { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; font-weight: 700; font-size: 0.85rem; color: #fff; } .grade-badge.sm { width: 22px; height: 22px; font-size: 0.7rem; border-radius: 4px; } .grade-a { background: var(--grade-a); } .grade-b { background: var(--grade-b); } .grade-c { background: var(--grade-c); } .grade-d { background: var(--grade-d); } .grade-f { background: var(--grade-f); } .rating { font-weight: 600; } .rating-advanced { color: var(--advanced); } .rating-intermediate { color: var(--intermediate); } .rating-basic { color: var(--basic); } .status-badge { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 500; } .status-badge.large { font-size: 0.85rem; padding: 0.3rem 0.8rem; } .status-completed { background: #dcfce7; color: #166534; } .status-failed { background: #fee2e2; color: #991b1b; } .status-active { background: #dbeafe; color: #1e40af; } .severity-badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; } .severity-badge.critical { background: #fee2e2; color: #991b1b; } .severity-badge.high { background: #ffedd5; color: #c2410c; } .severity-badge.medium { background: #fef3c7; color: #a16207; } .severity-badge.low { background: #dcfce7; color: #166534; } .severity-badge.info { background: #dbeafe; color: #1e40af; } .cve-tag { display: inline-block; background: #f3e8ff; color: #6b21a8; padding: 0.1rem 0.4rem; border-radius: 3px; font-size: 0.7rem; margin-left: 0.4rem; font-weight: 500; } /* ─── Distribution Bars ─────────────────────────────────────────────── */ .dist-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; } .dist-label { width: 140px; font-size: 0.85rem; font-weight: 500; } .tier-advanced { color: var(--advanced); } .tier-intermediate { color: var(--intermediate); } .tier-basic { color: var(--basic); } .dist-bar-track { flex: 1; height: 20px; background: var(--border-light); border-radius: 10px; overflow: hidden; } .dist-bar { height: 100%; border-radius: 10px; transition: width 0.5s; min-width: 4px; } .dist-bar.advanced { background: var(--advanced); } .dist-bar.intermediate { background: var(--intermediate); } .dist-bar.basic { background: var(--basic); } .dist-count { width: 30px; text-align: right; font-weight: 600; font-size: 0.85rem; } /* ─── Progress ──────────────────────────────────────────────────────── */ .progress-section { margin: 1.5rem 0; } .progress-bar-track { height: 12px; background: var(--border-light); border-radius: 6px; overflow: hidden; } .progress-bar-fill { height: 100%; border-radius: 6px; transition: width 0.5s; } .progress-early { background: linear-gradient(90deg, #60a5fa, #3b82f6); } .progress-mid { background: linear-gradient(90deg, #3b82f6, #2563eb); } .progress-complete { background: linear-gradient(90deg, #4ade80, #16a34a); } .progress-info { display: flex; justify-content: space-between; margin-top: 0.4rem; } .progress-pct { font-weight: 700; font-size: 1.1rem; } .progress-stage { color: var(--text-muted); font-size: 0.85rem; } .progress-message { color: var(--text-muted); font-size: 0.85rem; margin-top: 0.25rem; } .mini-progress { width: 80px; height: 6px; background: var(--border-light); border-radius: 3px; overflow: hidden; } .mini-bar { height: 100%; background: #3b82f6; border-radius: 3px; } /* ─── Pipeline Stages ───────────────────────────────────────────────── */ .pipeline-stages { margin: 1.5rem 0; } .stage { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.5rem 0; opacity: 0.4; } .stage.completed { opacity: 1; } .stage.active { opacity: 1; } .stage-indicator { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 0.75rem; background: var(--border-light); color: var(--text-muted); } .stage.completed .stage-indicator { background: #dcfce7; color: #166534; } .stage.active .stage-indicator { background: #dbeafe; color: #1e40af; } .stage-name { font-weight: 500; font-size: 0.85rem; } .stage-desc { font-size: 0.75rem; color: var(--text-muted); display: block; } /* ─── Forms ─────────────────────────────────────────────────────────── */ .form-section { margin-bottom: 1.5rem; } .form-section h4 { font-size: 0.95rem; font-weight: 600; color: var(--text); margin-bottom: 0.75rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--border); } .form-group { margin-bottom: 1rem; } .form-group label { display: block; font-size: 0.85rem; font-weight: 500; margin-bottom: 0.3rem; color: var(--text-mid); } .form-control { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.9rem; transition: border-color 0.15s; background: var(--card-bg); color: var(--text); font-family: var(--font-body); } .form-control:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-bg); } .form-row { display: flex; gap: 1rem; } .flex-1 { flex: 1; } .form-check { display: flex; align-items: center; gap: 0.5rem; } .form-check-input { width: 18px; height: 18px; accent-color: var(--primary); } .form-actions { margin-top: 1.5rem; } /* ─── Buttons ───────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; border: none; border-radius: 6px; font-size: 0.85rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: all 0.15s; font-family: var(--font-body); } .btn-sm { padding: 0.3rem 0.6rem; font-size: 0.8rem; } .btn-lg { padding: 0.65rem 1.5rem; font-size: 1rem; } .btn-primary { background: var(--primary); color: #fff; } .btn-primary:hover { background: var(--primary-hover); } .btn-outline { background: transparent; color: var(--primary); border: 1px solid var(--primary-border); } .btn-outline:hover { background: var(--primary-bg); } /* ─── Report Page ───────────────────────────────────────────────────── */ .report-page { max-width: 960px; margin: 0 auto; } .report-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; padding: 2rem; background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--border); } .report-title h1 { font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 600; } .report-title h2 { font-size: 1.75rem; font-weight: 700; margin-top: 0.25rem; } .report-rating { text-align: center; } .big-rating { display: block; font-size: 3rem; font-weight: 800; line-height: 1; } .big-grade { display: block; font-size: 1.25rem; font-weight: 700; margin-top: 0.25rem; } .tier-label { font-size: 0.85rem; } .tier-advanced .big-rating, .tier-advanced .big-grade { color: var(--advanced); } .tier-intermediate .big-rating, .tier-intermediate .big-grade { color: var(--intermediate); } .tier-basic .big-rating, .tier-basic .big-grade { color: var(--basic); } .category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; } .category-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; background: var(--card-bg); } .cat-header { display: flex; justify-content: space-between; margin-bottom: 0.5rem; } .cat-name { font-weight: 600; } .cat-weight { font-size: 0.8rem; color: var(--text-muted); } .score-bar-track { flex: 1; height: 8px; background: var(--border-light); border-radius: 4px; overflow: hidden; } .score-bar { height: 100%; border-radius: 4px; } .bar-good { background: var(--advanced); } .bar-warn { background: var(--intermediate); } .bar-bad { background: var(--basic); } .cat-score { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; } .score-value { font-weight: 600; font-size: 0.85rem; min-width: 50px; } .vector-list { border-top: 1px solid var(--border); padding-top: 0.5rem; } .vector-row { display: flex; justify-content: space-between; align-items: center; padding: 0.25rem 0; } .vector-name { font-size: 0.85rem; } .vector-detail { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; margin-bottom: 0.75rem; background: var(--card-bg); } .vector-detail-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; } .vector-detail-header .vector-name { font-weight: 600; } .vector-stats { display: flex; gap: 1rem; font-size: 0.8rem; margin-bottom: 0.5rem; } .stat.good { color: var(--advanced); } .stat.warn { color: var(--intermediate); } .stat.bad { color: var(--basic); } .ransomware-warning { background: #fee2e2; color: #991b1b; padding: 0.4rem 0.6rem; border-radius: 4px; font-size: 0.8rem; margin-top: 0.5rem; } .remediation-note { background: #fef3c7; color: #a16207; padding: 0.4rem 0.6rem; border-radius: 4px; font-size: 0.8rem; margin-top: 0.5rem; } .ransomware-card { border-left: 3px solid #dc2626; } .ransomware-header { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1rem; } .ransomware-score { font-size: 2.5rem; font-weight: 800; } .ransomware-tier { font-size: 1.25rem; font-weight: 600; } .remediation-item { display: flex; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--border-light); } .remediation-priority { font-size: 1.5rem; font-weight: 700; color: var(--primary); min-width: 40px; text-align: center; padding-top: 0.25rem; } .remediation-body { flex: 1; } .remediation-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; } .effort-badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.7rem; font-weight: 600; } .effort-badge.quick-win { background: #dcfce7; color: #166534; } .effort-badge.medium { background: #fef3c7; color: #a16207; } .effort-badge.long-term { background: #fee2e2; color: #991b1b; } .remediation-stats { display: flex; gap: 1.5rem; font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem; } .report-actions { text-align: center; padding: 2rem 0; } .findings-summary { display: flex; gap: 0.75rem; margin-top: 0.75rem; flex-wrap: wrap; } .finding-count { font-size: 0.8rem; font-weight: 500; padding: 0.2rem 0.5rem; border-radius: 4px; } .finding-count.critical { background: #fee2e2; color: #991b1b; } .finding-count.high { background: #ffedd5; color: #c2410c; } .finding-count.medium { background: #fef3c7; color: #a16207; } .finding-count.low { background: #dcfce7; color: #166534; } /* ─── Vendor Grid ───────────────────────────────────────────────────── */ .vendor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.25rem; } .vendor-card { padding: 1.25rem; } .vendor-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.75rem; } .vendor-header h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.15rem; } .vendor-rating { text-align: right; } .rating-value { font-size: 1.5rem; font-weight: 700; display: block; line-height: 1; } .vendor-details { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; } .detail-chip { display: inline-block; padding: 0.15rem 0.5rem; background: var(--surface); border-radius: 4px; font-size: 0.75rem; color: var(--text-muted); } .detail-chip.rescan { background: #dbeafe; color: #1e40af; } .vendor-footer { border-top: 1px solid var(--border); padding-top: 0.5rem; } /* ─── Page Headers ──────────────────────────────────────────────────── */ .page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; } .page-header h2 { font-size: 1.25rem; font-weight: 600; } /* ─── States ────────────────────────────────────────────────────────── */ .loading-state { display: flex; flex-direction: column; align-items: center; padding: 4rem 2rem; color: var(--text-muted); } .spinner { width: 36px; height: 36px; border: 3px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.7s linear infinite; margin-bottom: 1rem; } .spinner-sm { width: 16px; height: 16px; border: 2px solid rgba(0,0,0,0.1); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } } .empty-state { text-align: center; padding: 3rem; color: var(--text-muted); } .error-state { text-align: center; padding: 3rem; } .success-state { text-align: center; padding: 2rem; } .success-icon { font-size: 3rem; margin-bottom: 0.5rem; } .action-row { display: flex; gap: 0.75rem; justify-content: center; margin-top: 1rem; } .timestamps { display: flex; gap: 1.5rem; font-size: 0.8rem; color: var(--text-muted); margin-top: 1.5rem; padding-top: 0.75rem; border-top: 1px solid var(--border); } .alert { padding: 0.75rem 1rem; border-radius: 6px; margin-bottom: 1rem; font-size: 0.9rem; } .alert-error { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; } /* ─── Responsive ────────────────────────────────────────────────────── */ @media (max-width: 768px) { .sidebar { display: none; } .main-content { margin-left: 0; } .card-grid { grid-template-columns: 1fr; } .metric-grid { grid-template-columns: repeat(2, 1fr); } .form-row { flex-direction: column; gap: 0; } .report-header { flex-direction: column; text-align: center; } } /* ─── Toast Notifications ──────────────────────────────────────────── */ .toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 9999; display: flex; flex-direction: column; gap: 0.5rem; max-width: 400px; } .toast { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 1rem; border-radius: 8px; background: var(--card-bg); box-shadow: var(--shadow-md); border-left: 4px solid #999; animation: toastIn 0.3s ease-out; transition: opacity 0.3s, transform 0.3s; } .toast-exit { opacity: 0; transform: translateX(100%); } .toast-success { border-left-color: var(--advanced); } .toast-info { border-left-color: #2563eb; } .toast-warning { border-left-color: var(--intermediate); } .toast-error { border-left-color: var(--basic); } .toast-icon { font-size: 1.1rem; padding-top: 1px; } .toast-success .toast-icon { color: var(--advanced); } .toast-info .toast-icon { color: #2563eb; } .toast-warning .toast-icon { color: var(--intermediate); } .toast-error .toast-icon { color: var(--basic); } .toast-body { flex: 1; } .toast-title { font-weight: 600; font-size: 0.9rem; } .toast-detail { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.15rem; } .toast-close { background: none; border: none; font-size: 1.25rem; cursor: pointer; color: var(--text-muted); padding: 0 0.25rem; line-height: 1; } .toast-close:hover { color: var(--text); } @keyframes toastIn { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } } /* ─── Toggle Switch ────────────────────────────────────────────────── */ .toggle { position: relative; display: inline-block; width: 44px; height: 24px; cursor: pointer; } .toggle input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; inset: 0; background: #d1d5db; border-radius: 24px; transition: 0.2s; } .toggle-slider:before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: 0.2s; } .toggle input:checked + .toggle-slider { background: var(--primary); } .toggle input:checked + .toggle-slider:before { transform: translateX(20px); } /* ─── Settings ─────────────────────────────────────────────────────── */ .settings-grid { display: flex; flex-direction: column; } .setting-row { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 0; border-bottom: 1px solid var(--border-light); } .setting-row:last-child { border-bottom: none; } .setting-info { display: flex; flex-direction: column; gap: 0.15rem; } .integration-card { margin-bottom: 1rem; } /* ─── Error Boundary ───────────────────────────────────────────────── */ .error-boundary { padding: 2rem; } /* ═══════════════════════════════════════════════════════════════════════ VENDOR DETAIL — Tabbed Interface ═══════════════════════════════════════════════════════════════════════ */ /* Tab Navigation */ .vendor-tabs { display: flex; gap: 2px; margin-bottom: 1.5rem; border-bottom: 2px solid var(--border); padding-bottom: 0; } .vendor-tab { padding: 0.6rem 1.1rem; background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--text-muted); font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: all 0.15s; font-family: var(--font-body); display: flex; align-items: center; gap: 6px; margin-bottom: -2px; } .vendor-tab:hover { color: var(--text); border-bottom-color: var(--border); } .vendor-tab.active { color: var(--primary); border-bottom-color: var(--primary); } .vendor-tab .tab-new { font-size: 7px; padding: 1px 5px; border-radius: 3px; background: var(--primary); color: #fff; font-weight: 800; font-family: var(--font-mono); } /* Vendor Header */ /* Subtle vertical gradient softens the wall-of-white when this header sits next to stacked cards below. Top edge picks up a barely-perceptible warm tint (≈3% of the primary orange) so the page has a focal point without being loud. */ .vendor-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; background: linear-gradient(180deg, #FDF6F1 0%, #FFFFFF 65%); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 1rem; box-shadow: var(--shadow); } .vendor-header .vendor-identity { display: flex; align-items: center; gap: 16px; } .vendor-header .vendor-logo { width: 48px; height: 48px; border-radius: 10px; background: var(--primary-bg); border: 1px solid var(--primary-border); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 900; color: var(--primary); font-family: var(--font-display); } .vendor-header .vendor-name { font-size: 1.1rem; font-weight: 800; font-family: var(--font-display); } .vendor-header .vendor-domain { font-size: 0.82rem; color: var(--primary); font-family: var(--font-mono); } .vendor-header .rating-hero { display: flex; align-items: center; gap: 14px; } .vendor-header .rating-circle { width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--primary); display: flex; align-items: center; justify-content: center; background: var(--primary-bg); } .vendor-header .rating-number { font-size: 1.4rem; font-weight: 900; color: var(--primary); font-family: var(--font-display); } .vendor-header .rating-meta .big-grade { font-size: 2rem; font-weight: 900; color: var(--primary); font-family: var(--font-display); line-height: 1; } /* Grade badges (light theme) */ .grade-badge { display: inline-flex; align-items: center; justify-content: center; font-weight: 800; border-radius: 4px; font-family: var(--font-mono); } .grade-badge.sm { padding: 2px 8px; font-size: 0.7rem; } .grade-badge.lg { padding: 4px 12px; font-size: 0.85rem; } .grade-a { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; } .grade-b { background: #ecfccb; color: #3f6212; border: 1px solid #bef264; } .grade-c { background: #fef3c7; color: #a16207; border: 1px solid #fde68a; } .grade-d { background: #ffedd5; color: #c2410c; border: 1px solid #fed7aa; } .grade-f { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; } /* Severity badges */ .sev-badge { padding: 2px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: 700; font-family: var(--font-mono); text-transform: uppercase; } .sev-critical { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; } .sev-high { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; } .sev-medium { background: #fef3c7; color: #a16207; border: 1px solid #fde68a; } .sev-low { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; } .sev-info { background: var(--border-light); color: var(--text-muted); border: 1px solid var(--border); } /* Section label */ .section-label { font-size: 0.65rem; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: 1.2px; font-family: var(--font-mono); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 6px; } /* Scanner pipeline step */ .pipeline-step { display: flex; align-items: center; gap: 14px; padding: 0.75rem 1rem; background: var(--card-bg); border-radius: 8px; margin-bottom: 6px; border: 1px solid var(--border); } .pipeline-step.is-new { background: var(--primary-bg); border-color: var(--primary-border); } .pipeline-step .step-num { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 800; font-family: var(--font-mono); flex-shrink: 0; } .pipeline-step .step-num.live { background: #dcfce7; color: #166534; } .pipeline-step .step-num.new { background: var(--primary); color: #fff; } .pipeline-step .step-name { font-size: 0.9rem; font-weight: 700; font-family: var(--font-display); } .pipeline-step .step-desc { font-size: 0.75rem; color: var(--text-muted); } .pipeline-step .step-source { font-size: 0.7rem; color: var(--text-muted); font-family: var(--font-mono); } /* DKIM record card */ .dkim-record { padding: 1rem; background: var(--card-bg); border-radius: 8px; margin-bottom: 8px; border: 1px solid var(--border); } .dkim-record.weak { border-color: #fca5a5; background: #fef2f2; } .dkim-record .selector-name { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 700; color: var(--primary); } /* Header scan result */ .header-result { padding: 0.85rem 1rem; background: var(--card-bg); border-radius: 8px; margin-bottom: 6px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .header-result.missing-high { border-color: #fca5a5; background: #fef2f2; } /* Enrichment info row */ .enrich-row { display: flex; padding: 5px 0; border-bottom: 1px solid var(--border-light); } .enrich-row .enrich-label { width: 130px; font-size: 0.75rem; color: var(--text-muted); flex-shrink: 0; } .enrich-row .enrich-value { font-size: 0.82rem; font-weight: 500; } /* 4th party card */ .fourth-party-card { padding: 0.85rem 1rem; background: var(--card-bg); border-radius: 8px; border: 1px solid var(--border); display: flex; align-items: center; gap: 14px; } .fourth-party-card .fp-initial { width: 36px; height: 36px; border-radius: 8px; background: var(--primary-bg); display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 800; color: var(--primary); font-family: var(--font-display); } /* Empty / loading states */ .loading-state { text-align: center; padding: 3rem 0; color: var(--text-muted); } .empty-state { text-align: center; padding: 3rem; } /* Score bar (small progress bar inside vector rows) */ .score-bar-track { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; margin-top: 4px; } .score-bar { height: 100%; border-radius: 2px; transition: width 0.3s; } /* Stat block */ .stat-block { text-align: center; } .stat-block .stat-value { font-size: 1.6rem; font-weight: 900; font-family: var(--font-display); line-height: 1; color: var(--text); } .stat-block .stat-label { font-size: 0.65rem; color: var(--text-muted); font-weight: 600; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px; } /* ─── Scrollbar (light theme) ────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* ─── Page Section Headers ──────────────────────────────────────────── */ .section-title { font-size: 1.25rem; font-weight: 700; color: var(--text); font-family: var(--font-display); margin: 0; } .section-subtitle { font-size: 0.85rem; color: var(--text-muted); margin: 0.25rem 0 0; } /* ─── Tabs ──────────────────────────────────────────────────────────── */ .tab-bar { display: flex; gap: 0; border-bottom: 2px solid var(--border); } .tab-btn { padding: 0.6rem 1.25rem; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; font-size: 0.85rem; font-weight: 500; color: var(--text-muted); cursor: pointer; transition: all 0.15s; font-family: var(--font-body); } .tab-btn:hover { color: var(--text); } .tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; } /* ─── Toolbar ───────────────────────────────────────────────────────── */ .toolbar { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } .toolbar-count { font-size: 0.85rem; color: var(--text-muted); } /* ─── Form Cards (inline forms) ─────────────────────────────────────── */ .form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1.25rem; } .form-card h3 { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1.25rem; } .form-field { display: flex; flex-direction: column; gap: 0.25rem; } .form-field label { font-size: 0.8rem; font-weight: 600; color: var(--text-mid); } .form-field input, .form-field select, .form-field textarea { padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.88rem; font-family: var(--font-body); background: var(--card-bg); } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-dim); } .form-actions { display: flex; gap: 0.75rem; margin-top: 1rem; } /* ─── Tenant Cards ──────────────────────────────────────────────────── */ .tenant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; } .tenant-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); transition: box-shadow 0.15s; } .tenant-card:hover { box-shadow: var(--shadow-md); } .tenant-card.inactive { opacity: 0.5; } .tenant-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.5rem; } .tenant-name { font-size: 1rem; font-weight: 700; margin: 0; } .tenant-domain { font-size: 0.78rem; color: var(--text-muted); font-family: var(--font-mono); } .tenant-badges { display: flex; gap: 0.25rem; } .sub-type-badge { font-size: 0.7rem; padding: 2px 8px; border-radius: 4px; font-weight: 700; text-transform: uppercase; font-family: var(--font-mono); letter-spacing: 0.5px; } .sub-type-badge.verisq { background: var(--primary-bg); color: var(--primary); border: 1px solid var(--primary-border); } .sub-type-badge.directsignup { background: #e0f2fe; color: #0369a1; } .sub-type-badge.enterprise { background: #f3e8ff; color: #7c3aed; } .tenant-stats { display: flex; gap: 1rem; margin-top: 0.5rem; font-size: 0.82rem; color: var(--text-mid); } /* ─── Form Sections ─────────────────────────────────────────────────── */ .form-section { margin-bottom: 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border-light); } .form-section:last-of-type { border-bottom: none; margin-bottom: 0; } /* ─── Enrichment Chips ──────────────────────────────────────────────── */ .chip { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 0.75rem; background: var(--surface-alt, #f3f4f6); color: var(--text-secondary, #555); border: 1px solid var(--border-light, #e5e7eb); line-height: 1.4; white-space: nowrap; } /* ═══════════════════════════════════════════════════════════════════════ RAPIDRISK™ FLAGSHIP NAVIGATION — rr-prefixed classes Width: 256px expanded / 68px collapsed · DM Sans · Orange accent ═══════════════════════════════════════════════════════════════════════ */ /* ======= SIDEBAR ======= */ .rr-sidebar{ width:256px;background:#fff;display:flex;flex-direction:column; position:fixed;top:0;bottom:0;z-index:100; border-right:1.5px solid #d5d8de;box-shadow:2px 0 12px rgba(0,0,0,.045); transition:width .32s cubic-bezier(.4,0,.2,1);overflow:visible; } .rr-sidebar.collapsed{width:68px} /* --- BRAND --- */ .brand{ padding:16px 0 0;display:flex;align-items:center;gap:11px; margin-bottom:14px;overflow:hidden; justify-content:center; } .rr-sidebar:not(.collapsed) .brand{justify-content:flex-start;padding-left:18px;padding-right:18px} .rr-brand-mark{ width:40px;height:40px;min-width:40px; background:linear-gradient(150deg,#E8600A,#c04a04);border-radius:11px; display:flex;align-items:center;justify-content:center; box-shadow:0 4px 14px rgba(232,96,10,.32),0 1px 3px rgba(232,96,10,.15); position:relative;transition:transform .25s; } .rr-brand-mark:hover{transform:scale(1.04)} .rr-brand-mark::after{content:'';position:absolute;top:2px;left:5px;right:5px;height:38%;background:linear-gradient(180deg,rgba(255,255,255,.22),transparent);border-radius:7px 7px 50% 50%;pointer-events:none} .rr-brand-mark svg{width:21px;height:21px;position:relative;z-index:1} .rr-brand-text{display:flex;flex-direction:column;white-space:nowrap;opacity:1;transition:opacity .18s .1s,width .3s,margin .3s;overflow:hidden} .collapsed .rr-brand-text{opacity:0;width:0;margin:0;transition:opacity .12s,width .3s,margin .3s} .brand-title{font-size:17px;font-weight:800;color:#111;letter-spacing:-.4px;line-height:1.1} .brand-title span{color:var(--primary,#E8600A)} .brand-sub{font-size:7.5px;font-weight:600;letter-spacing:2.2px;text-transform:uppercase;color:var(--primary,#E8600A);font-family:'JetBrains Mono',monospace;margin-top:3px} /* --- TENANT --- */ .tenant{ margin:0 12px 12px;padding:10px 12px; background:#f8f9fb;border:1.5px solid #dfe2e8;border-radius:10px; display:flex;align-items:center;gap:9px; overflow:hidden;transition:all .32s cubic-bezier(.4,0,.2,1); } .collapsed .tenant{ margin:0 10px 10px;padding:0; background:transparent;border-color:transparent; justify-content:center; box-shadow:none; } .tenant-icon{ width:30px;height:30px;min-width:30px; background:#fff;border:1.5px solid #dfe2e8;border-radius:8px; display:flex;align-items:center;justify-content:center; font-size:12.5px;font-weight:800;color:#E8600A; box-shadow:0 1px 3px rgba(0,0,0,.06); transition:all .32s; } .collapsed .tenant-icon{ width:36px;height:36px;min-width:36px;border-radius:10px; font-size:14px; } .tenant-info{overflow:hidden;opacity:1;transition:opacity .18s .1s,width .3s;white-space:nowrap} .collapsed .tenant-info{opacity:0;width:0;transition:opacity .12s,width .3s} .tenant-name{font-size:13px;font-weight:700;color:#111;overflow:hidden;text-overflow:ellipsis;line-height:1.2} .tenant-plan-row{display:flex;align-items:center;gap:5px;margin-top:1px} .plan-dot{width:6px;height:6px;border-radius:50%;background:#3b82f6;box-shadow:0 0 0 2.5px rgba(59,130,246,.15)} .tenant-plan{font-size:10.5px;color:#6b7280;font-weight:500} /* --- NAV SCROLL --- */ .rr-nav-scroll{ flex:1;padding:0 10px;overflow-y:auto;overflow-x:hidden; scrollbar-width:thin;scrollbar-color:#d5d8de transparent; transition:padding .32s; } .collapsed .rr-nav-scroll{padding:0 6px} .nav-group{margin-bottom:2px} .rr-nav-label{ font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase; color:#7c8590;padding:16px 10px 6px;font-family:'JetBrains Mono',monospace; user-select:none;white-space:nowrap;overflow:hidden; opacity:1;max-height:36px; transition:opacity .15s,max-height .25s,padding .25s; } .nav-group:first-child .rr-nav-label{padding-top:4px} .collapsed .rr-nav-label{opacity:0;max-height:0;padding:0;overflow:hidden} /* --- NAV ITEM --- */ .rr-nav-item{ display:flex;align-items:center;gap:12px; padding:10px 11px;border-radius:10px; color:#1a1a1a;text-decoration:none;font-size:14px;font-weight:500; cursor:pointer;position:relative;margin:2px 0; transition:all .2s ease;overflow:visible;white-space:nowrap; border:1.5px solid transparent; } /* COLLAPSED: center the icon, fixed square size */ .collapsed .rr-nav-item{ padding:0; width:48px;height:48px; margin:2px auto; justify-content:center; align-items:center; border-radius:12px; } .rr-nav-item:hover{color:#111;background:#f3f4f6;border-color:#e5e7eb} .rr-nav-item:hover .rr-nav-icon{color:#374151} .rr-nav-item:active{transform:scale(.98)} .rr-nav-item.active{color:#9a3412;background:#fff;font-weight:600;border:1.5px solid rgba(232,96,10,.18);box-shadow:0 2px 6px rgba(232,96,10,.1),0 8px 24px rgba(232,96,10,.05)} .rr-nav-item.active .rr-nav-icon{color:var(--primary,#E8600A)} /* Pip */ .rr-nav-pip{position:absolute;left:-11px;top:50%;width:0;height:0;background:var(--primary,#E8600A);border-radius:0 4px 4px 0;transform:translateY(-50%);transition:all .3s cubic-bezier(.34,1.56,.64,1)} .rr-nav-item.active .rr-nav-pip{width:4px;height:28px;box-shadow:3px 0 12px rgba(232,96,10,.2)} .collapsed .rr-nav-pip{left:-6px !important} .collapsed .rr-nav-item.active .rr-nav-pip{width:3px;height:22px} /* Active glow */ .rr-nav-item.active .rr-nav-icon::after{content:'';position:absolute;inset:-5px;border-radius:10px;background:rgba(232,96,10,.08);z-index:-1} /* --- ICON --- */ .rr-nav-icon{ width:28px;height:28px;min-width:28px; display:flex;align-items:center;justify-content:center; color:#5f6672;position:relative; transition:color .2s,transform .2s; } .rr-nav-icon svg{width:26px;height:26px} /* Text hides on collapse */ .rr-nav-text{opacity:1;transition:opacity .18s .06s,width .3s;overflow:hidden} .collapsed .rr-nav-text{opacity:0;width:0;transition:opacity .1s,width .3s} /* Badge */ .rr-nav-badge{ position:relative;margin-left:auto; font-size:9.5px;font-weight:700; min-width:22px;height:22px;padding:0 7px;border-radius:11px; background:#E8600A;color:#fff;font-family:'JetBrains Mono',monospace; display:flex;align-items:center;justify-content:center; box-shadow:0 2px 6px rgba(232,96,10,.3);transition:transform .2s; } .rr-nav-item:hover .rr-nav-badge{transform:scale(1.08)} .collapsed .rr-nav-badge{ position:absolute;top:2px;right:2px; min-width:16px;height:16px;font-size:8px;padding:0 4px;margin:0; } /* Divider */ .nav-divider{height:1.5px;background:linear-gradient(90deg,transparent 2%,#e0e3e9 20%,#e0e3e9 80%,transparent 98%);margin:8px 10px;transition:margin .32s} .collapsed .nav-divider{margin:6px 8px} /* Tooltip */ .rr-nav-item .rr-tooltip{ position:absolute;left:calc(100% + 12px);top:50%; transform:translateY(-50%) scale(.92); background:#1a1a1a;color:#fff;font-size:12.5px;font-weight:500; padding:6px 12px;border-radius:7px;white-space:nowrap; pointer-events:none;opacity:0; transition:all .18s cubic-bezier(.4,0,.2,1); box-shadow:0 4px 14px rgba(0,0,0,.18);z-index:200; } .rr-nav-item .rr-tooltip::before{content:'';position:absolute;left:-4px;top:50%;transform:translateY(-50%) rotate(45deg);width:8px;height:8px;background:#1a1a1a;border-radius:1px} .collapsed .rr-nav-item:hover .rr-tooltip{opacity:1;transform:translateY(-50%) scale(1)} /* --- COLLAPSE BTN --- */ .collapse-area{padding:4px 10px 6px;transition:padding .32s;display:flex;justify-content:center} .collapsed .collapse-area{padding:4px 6px 6px} .rr-collapse-btn{ width:100%;max-width:100%;padding:8px; background:#f8f9fb;border:1.5px solid #dfe2e8;border-radius:8px; cursor:pointer;color:#7c8590; display:flex;align-items:center;justify-content:center; transition:all .25s; } .collapsed .rr-collapse-btn{width:48px} .rr-collapse-btn:hover{background:#eef0f4;color:#6b7280;border-color:#c8ccd4} .rr-collapse-btn svg{transition:transform .32s cubic-bezier(.4,0,.2,1)} .collapsed .rr-collapse-btn svg{transform:rotate(180deg)} /* --- UPGRADE CTA --- */ .upgrade{ margin:0 12px 8px;padding:12px 13px; background:linear-gradient(135deg,#E8600A,#c84a04);border-radius:11px; text-decoration:none;display:flex;align-items:center;gap:10px; cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1); box-shadow:0 3px 12px rgba(232,96,10,.28),0 0 0 1px rgba(232,96,10,.08); position:relative;overflow:hidden; justify-content:flex-start; } .collapsed .upgrade{ margin:0 10px 8px;padding:0; width:48px;height:48px; justify-content:center; border-radius:12px; } .upgrade::before{content:'';position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.15),transparent);pointer-events:none;border-radius:11px 11px 0 0} .upgrade::after{content:'';position:absolute;top:-50%;left:-80%;width:60%;height:200%;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.2) 50%,transparent 60%);transform:skewX(-15deg);animation:rr-shimmer 4s ease-in-out infinite;pointer-events:none} @keyframes rr-shimmer{0%,100%{left:-80%}40%,60%{left:140%}} .upgrade:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(232,96,10,.36),0 0 0 1px rgba(232,96,10,.12)} .upgrade:active{transform:translateY(0)} .upgrade-bolt{font-size:17px;min-width:20px;text-align:center;position:relative} .collapsed .upgrade-bolt{min-width:auto;margin:0} .upgrade-content{overflow:hidden;white-space:nowrap;opacity:1;transition:opacity .18s .06s,width .3s} .collapsed .upgrade-content{opacity:0;width:0;transition:opacity .1s,width .3s} .upgrade-text{font-size:13.5px;font-weight:600;color:#fff;position:relative} .upgrade-hint{font-size:10px;color:rgba(255,255,255,.65);margin-top:1px;font-weight:400;position:relative} /* --- USER AREA --- */ .rr-user-area{ padding:12px 14px 14px;display:flex;align-items:center;gap:10px; cursor:pointer;border-top:1.5px solid #dfe2e8; transition:all .25s;overflow:hidden; justify-content:flex-start; } .collapsed .rr-user-area{padding:12px 0 14px;justify-content:center} .rr-user-area:hover{background:#f8f9fb} .user-avatar{ width:36px;height:36px;min-width:36px; background:linear-gradient(150deg,#E8600A,#c04a04);border-radius:10px; display:flex;align-items:center;justify-content:center; color:#fff;font-size:14px;font-weight:700; box-shadow:0 2px 8px rgba(232,96,10,.25); position:relative;transition:transform .2s; } .rr-user-area:hover .user-avatar{transform:scale(1.04)} .user-avatar::after{content:'';position:absolute;bottom:-1px;right:-1px;width:10px;height:10px;background:#22c55e;border:2.5px solid #fff;border-radius:50%;box-shadow:0 0 0 1px rgba(34,197,94,.25)} .user-details{flex:1;min-width:0;opacity:1;transition:opacity .18s .06s,width .3s;overflow:hidden} .collapsed .user-details{opacity:0;width:0;transition:opacity .1s,width .3s} .user-name{font-size:13px;font-weight:600;color:#111;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .user-email{font-size:10.5px;color:#7c8290;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .user-chevron{color:#b0b7c3;transition:transform .2s,opacity .2s} .rr-user-area:hover .user-chevron{transform:translateY(1px)} .collapsed .user-chevron{display:none} /* ======= MAIN ======= */ .rr-main{margin-left:256px;flex:1;min-height:100vh;padding:28px 32px;transition:margin-left .32s cubic-bezier(.4,0,.2,1)} .rr-sidebar.collapsed ~ .rr-main{margin-left:68px} .demo-header{margin-bottom:20px} .demo-title{font-size:22px;font-weight:700;color:#111;letter-spacing:-.3px} .demo-sub{font-size:13px;color:#7c8290;margin-top:3px} .demo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px} .demo-card{background:#fff;border:1.5px solid #dfe2e8;border-radius:12px;padding:20px;box-shadow:0 1px 4px rgba(0,0,0,.05)} .demo-card-label{font-size:11px;color:#7c8290;font-weight:600;text-transform:uppercase;letter-spacing:.5px} .demo-card-val{font-size:28px;font-weight:800;color:#111;margin-top:4px} .demo-card-hint{font-size:11px;color:#7c8290;margin-top:2px} .demo-bar{height:4px;background:#e5e7eb;border-radius:2px;margin-top:10px;overflow:hidden} .demo-bar-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,#E8600A,#f59e0b)} @keyframes rr-fadeUp{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}} .rr-nav-item{animation:rr-fadeUp .3s ease both} .nav-group:nth-child(1) .rr-nav-item{animation-delay:.02s} .nav-group:nth-child(2) .rr-nav-item{animation-delay:.05s} .nav-group:nth-child(3) .rr-nav-item:nth-child(2){animation-delay:.08s} .nav-group:nth-child(3) .rr-nav-item:nth-child(3){animation-delay:.11s} .nav-group:nth-child(3) .rr-nav-item:nth-child(4){animation-delay:.14s} .nav-group:nth-child(4) .rr-nav-item{animation-delay:.17s} .nav-group:nth-child(5) .rr-nav-item{animation-delay:.2s} /* ═══════════════════════════════════════════════════════════════════════ RAPIDRISK™ NAV CLASS BRIDGE Maps Razor-side class names to their CSS counterparts where the prototype→rr prefix conversion was inconsistent. ═══════════════════════════════════════════════════════════════════════ */ /* nav-icon → rr-nav-icon (Razor uses unprefixed) */ .rr-nav-item .nav-icon { width:28px;height:28px;min-width:28px; display:flex;align-items:center;justify-content:center; color:#5f6672;position:relative; font-size:18px;transition:color .2s; } .rr-nav-item:hover .nav-icon { color:#374151 } .rr-nav-item.active .nav-icon { color:var(--primary,#E8600A) } /* nav-text → rr-nav-text (Razor uses unprefixed) */ .rr-nav-item .nav-text, .rr-sidebar .nav-text { opacity:1;transition:opacity .18s .06s,width .3s;overflow:hidden; white-space:nowrap;font-size:.8125rem; } .rr-sidebar.collapsed .nav-text { opacity:0;width:0;transition:opacity .1s,width .3s } /* rr-brand (Razor) → brand (CSS) */ .rr-brand { padding:16px 0 0;display:flex;align-items:center;gap:11px; margin-bottom:14px;overflow:hidden;justify-content:center; } .rr-sidebar:not(.collapsed) .rr-brand { justify-content:flex-start;padding-left:18px;padding-right:18px; } /* rr-sidebar-footer */ .rr-sidebar-footer { margin-top:auto;padding:6px 8px 10px; border-top:1.5px solid #e5e7eb; display:flex;flex-direction:column;gap:2px; } /* rr-upgrade-cta */ .rr-upgrade-cta { margin:0 12px;padding:10px 0; background:linear-gradient(135deg,#E8600A 0%,#c04a04 100%); border:none;border-radius:10px;color:#fff; font-weight:700;font-size:.8125rem; display:flex;align-items:center;justify-content:center;gap:6px; cursor:pointer;text-decoration:none; box-shadow:0 4px 14px rgba(232,96,10,.32); transition:transform .18s,box-shadow .18s; position:relative;overflow:hidden; } .rr-upgrade-cta:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(232,96,10,.4); } /* shimmer animation on upgrade CTA */ .rr-upgrade-cta::after { content:'';position:absolute;top:0;left:-60%; width:50%;height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.18),transparent); animation:rr-shimmer 3s infinite; } /* rr-user-area (may exist but add safe fallback) */ .rr-user-area { margin:0 12px 12px;padding:10px 12px; background:#f8f9fb;border:1.5px solid #dfe2e8;border-radius:10px; display:flex;align-items:center;gap:9px; overflow:hidden;cursor:pointer;transition:all .2s; position:relative; } .rr-user-area:hover { background:#f0f1f5 } .rr-sidebar.collapsed .rr-user-area { margin:0 10px 10px;padding:0; background:transparent;border-color:transparent; justify-content:center; } /* rr-avatar */ .rr-avatar { width:30px;height:30px;min-width:30px; background:#E8600A;border-radius:8px; display:flex;align-items:center;justify-content:center; color:#fff;font-size:12px;font-weight:700; box-shadow:0 1px 3px rgba(0,0,0,.06); } /* rr-user-dropdown */ .rr-user-dropdown { position:absolute;bottom:calc(100% + 8px);left:8px;right:8px; background:#fff;border:1.5px solid #e5e7eb;border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.12); padding:6px 0;z-index:200; opacity:0;transform:translateY(8px);pointer-events:none; transition:opacity .2s,transform .2s; } .rr-user-dropdown.show { opacity:1;transform:translateY(0);pointer-events:auto; } /* rr-dd-item */ .rr-dd-item { display:flex;align-items:center;gap:8px; padding:8px 14px;font-size:.8125rem;color:#374151; cursor:pointer;transition:background .15s; border:none;background:none;width:100%;text-align:left; } .rr-dd-item:hover { background:#f3f4f6 } .rr-dd-item.danger { color:#dc2626 } .rr-dd-item.danger:hover { background:#fef2f2 } /* rr-tier-dot */ .rr-tier-dot { display:inline-block;width:7px;height:7px;border-radius:50%; background:#94a3b8; } .rr-tier-dot.tier-core { background:#22c55e } .rr-tier-dot.tier-plus { background:#3b82f6 } .rr-tier-dot.tier-enterprise { background:#a855f7 } .rr-tier-dot.tier-trial { background:#f59e0b } /* nav-lock icon for feature-gated items */ .rr-nav-item .nav-lock { font-size:10px;margin-left:auto;color:#d1d5db; } /* rr-main content area offset */ .rr-main { flex:1;margin-left:256px; transition:margin-left .32s cubic-bezier(.4,0,.2,1); min-height:100vh;background:#eef0f4; } .rr-sidebar.collapsed ~ .rr-main { margin-left:68px } /* rr-collapse-btn */ .rr-collapse-btn { position:absolute;right:-12px;top:24px; width:24px;height:24px;border-radius:50%; background:#fff;border:1.5px solid #d5d8de; display:flex;align-items:center;justify-content:center; cursor:pointer;z-index:101; font-size:11px;color:#6b7280; box-shadow:0 2px 6px rgba(0,0,0,.08); transition:all .2s; } .rr-collapse-btn:hover { background:#f3f4f6;border-color:#9ca3af; } /* ── Shared page content wrapper ── */ .page-content { flex: 1; overflow-y: auto; padding: 24px; background: var(--bg); min-height: 0; } /* ── QFX Assessment Shell ─────────────────────────────────────────────────── */ /* Ensures theme background/text vars apply to the assessment builder layout */ .qfx-shell, .qfx-header, .qfx-body, .qfx-sidebar, .qfx-content { background: var(--bg); color: var(--text); } .qfx-header { background: var(--card-bg); border-bottom: 1px solid var(--border); } /* ── Verisq Platform Nav Override ─────────────────────────────────────────── */ /* The NavMenu.razor uses