/* SiteSmith AI — Client Dashboard styles CSS custom properties lifted verbatim from sites/enrichment/output/preview-v3/dashboard/index.html Client brand colors are injected at deploy-time via scripts/deploy-client-dashboard.sh Placeholder values below are the defaults when opening _template directly (blue/light). */ /* ── Google Fonts load is in index.html ── */ :root { /* ── Lifted from internal dashboard (verbatim) ── */ --bg: #ffffff; --surface: #f4f4f4; --surface-hover: #e8e8e8; /* Borders */ --border: #e2e2e2; --border-strong: #cccccc; /* Text */ --text-primary: #1a1a1a; --text-secondary: #666666; --text-dim: #999999; /* Accent (internal dashboard default — steel blue) */ --accent: #3b82f6; --accent-dim: #60a5fa; --accent-bg: #eff6ff; /* Status colors */ --amber: #d97706; --amber-bg: #fef3c7; --red: #dc2626; --red-bg: #fee2e2; --orange: #ea580c; --orange-bg: #ffedd5; --green: #16a34a; --green-bg: #dcfce7; --purple: #7c3aed; --purple-bg: #ede9fe; /* ── Client brand tokens (injected by deploy-client-dashboard.sh) ── */ --client-primary: #0c4a6e; /* CLIENT_PRIMARY_PLACEHOLDER */ --client-accent: #fbbf24; /* CLIENT_ACCENT_PLACEHOLDER */ } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Barlow', sans-serif; background: var(--bg); color: var(--text-primary); line-height: 1.5; font-size: 14px; } .container { max-width: 1400px; margin: 0 auto; padding: 24px 28px 80px; } /* ── Header ── */ .dashboard-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; padding-bottom: 20px; border-bottom: 2px solid var(--client-primary); } .header-left { display: flex; align-items: center; gap: 16px; } .client-logo { font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 700; color: var(--client-primary); letter-spacing: 0.06em; text-transform: uppercase; } .client-meta { display: flex; flex-direction: column; gap: 2px; } .client-location { font-family: 'Barlow', sans-serif; font-size: 13px; color: var(--text-secondary); font-weight: 500; } .as-of-stamp { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; color: var(--text-dim); letter-spacing: 0.04em; text-transform: uppercase; } .header-badge { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 12px; border-radius: 20px; background: var(--client-primary); color: #ffffff; } /* ── Widget grid ── */ .widget-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } /* ── Widget card base (lifted from internal badge/card pattern) ── */ .widget-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06); padding: 20px; position: relative; overflow: hidden; } .widget-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--client-primary); opacity: 0.6; } .widget-title { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 12px; } .widget-primary { font-family: 'Barlow Condensed', sans-serif; font-size: 36px; font-weight: 700; color: var(--text-primary); line-height: 1; margin-bottom: 6px; } .widget-secondary { font-size: 13px; color: var(--text-secondary); margin-bottom: 8px; } /* ── Trend badges (lifted from internal status badge pattern) ── */ .trend-badge { display: inline-flex; align-items: center; gap: 3px; font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 5px; } .trend-up { background: var(--green-bg); color: var(--green); border: 1px solid rgba(22, 163, 74, 0.25); } .trend-down { background: var(--red-bg); color: var(--red); border: 1px solid rgba(220, 38, 38, 0.25); } .trend-flat { background: var(--surface); color: var(--text-dim); border: 1px solid var(--border); } /* ── Rating stars ── */ .rating-row { display: flex; align-items: center; gap: 6px; } .rating-stars { color: var(--amber); font-size: 16px; letter-spacing: 1px; } .rating-score { font-family: 'Barlow Condensed', sans-serif; font-size: 20px; font-weight: 700; color: var(--amber); } /* ── Source breakdown ── */ .source-list { list-style: none; margin-top: 8px; } .source-list li { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--border); font-size: 13px; } .source-list li:last-child { border-bottom: none; } .source-name { color: var(--text-secondary); } .source-count { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; color: var(--client-primary); } /* ── Pipeline bars ── */ .pipeline-list { list-style: none; margin-top: 8px; } .pipeline-stage { margin-bottom: 12px; } .pipeline-stage-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; } .pipeline-stage-name { font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-secondary); } .pipeline-stage-meta { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; color: var(--text-dim); } .pipeline-bar-track { background: var(--border); border-radius: 3px; height: 6px; overflow: hidden; } .pipeline-bar-fill { height: 100%; border-radius: 3px; background: var(--client-primary); transition: width 0.4s ease; } /* ── Conversion rate ── */ .conv-fraction { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; color: var(--text-secondary); } /* ── Industry extra ── */ .industry-extra-value { font-family: 'Barlow Condensed', sans-serif; font-size: 48px; font-weight: 700; color: var(--client-primary); line-height: 1; } .industry-extra-unit { font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 600; color: var(--text-secondary); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.04em; } /* ── Footer ── */ .dashboard-footer { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--border); text-align: center; } .dashboard-footer p { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; color: var(--text-dim); letter-spacing: 0.04em; text-transform: uppercase; } .powered-by { color: var(--client-primary); font-weight: 700; } /* ── Mobile responsive breakpoints (lifted from internal dashboard pattern) ── */ @media (max-width: 1024px) { .widget-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .container { padding: 16px 16px 60px; } .widget-grid { grid-template-columns: 1fr; } .dashboard-header { flex-direction: column; align-items: flex-start; } .client-logo { font-size: 18px; } .widget-primary { font-size: 28px; } .industry-extra-value { font-size: 36px; } } @media (max-width: 480px) { .container { padding: 12px 12px 60px; } .widget-card { padding: 16px; } }