/* ============================================================ AZERRA Agency Portal — recreated UI styles Themed via [data-theme="light|dark"] on ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); /* ---------- tokens ---------- */ :root { --font: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --mono: 'IBM Plex Mono', ui-monospace, monospace; --brand: #2b6c8f; --brand-bright: #3f97bd; --radius: 14px; --radius-sm: 10px; } /* Light theme */ [data-theme="light"] { --bg: #ffffff; --bg-elev: #ffffff; --sidebar: #fbfbfa; --sidebar-border: #ededeb; --topbar-border: #efefed; --card: #ffffff; --card-border: #e9e9e6; --card-hover: #faf9f8; --row-border: #f0efed; --text: #1b1b19; --text-2: #5f5f5b; --muted: #97968f; --label: #9b9a93; --brand-link: #2f7da0; --accent-bar: #2b6c8f; --pill-bg: #f4f4f1; --pill-text: #6b6a64; --input-bg: #ffffff; --input-border: #e4e3df; --seg-bg: #f3f2ef; --seg-active: #ffffff; --shadow: 0 1px 2px rgba(20,20,18,.04), 0 1px 3px rgba(20,20,18,.05); --green: #2f9e5f; --green-bg: #e7f5ec; --green-bd:#c4e7d2; --amber: #9a6a16; --amber-bg: #fbf2df; --amber-bd:#f0dcae; --red: #c0463d; --red-bg: #fcebe9; --red-bd:#f4ccc7; --blue: #2f7da0; --blue-bg: #e8f2f7; --blue-bd:#c5e0ec; --neutral-bg:#f1f1ee; --neutral-text:#7c7b75; --chart-bar: #5fa8cf; --kpi-num:#1b1b19; } /* Dark theme — teal-tinted */ [data-theme="dark"] { --bg: #08191d; --bg-elev: #08191d; --sidebar: #061418; --sidebar-border: #14323a; --topbar-border: #122c33; --card: #0c242b; --card-border: #1a3d46; --card-hover: #0f2a32; --row-border: #16353d; --text: #eef4f5; --text-2: #a4b6ba; --muted: #6f8488; --label: #6f8488; --brand-link: #5bb8d4; --accent-bar: #4ea7cf; --pill-bg: #122e35; --pill-text: #aebfc3; --input-bg: #0b2228; --input-border: #1d3f48; --seg-bg: #0d262d; --seg-active: #163840; --shadow: 0 1px 2px rgba(0,0,0,.4); --green:#5fd494; --green-bg: rgba(63,191,111,.13); --green-bd:rgba(63,191,111,.28); --amber:#e3b454; --amber-bg: rgba(224,169,59,.13); --amber-bd:rgba(224,169,59,.30); --red:#f06a60; --red-bg: rgba(240,90,79,.14); --red-bd:rgba(240,90,79,.32); --blue:#5bb8d4; --blue-bg: rgba(91,184,212,.13); --blue-bd:rgba(91,184,212,.30); --neutral-bg:#16353d; --neutral-text:#9aaeb2; --chart-bar:#4f9fd1; --kpi-num:#eef4f5; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; } body { font-family: var(--font); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; font-size: 15px; line-height: 1.45; } a { color: inherit; text-decoration: none; } .mono { font-family: var(--mono); letter-spacing: -.01em; } /* ---------- shell ---------- */ .app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; } /* sidebar */ .sidebar { background: var(--sidebar); border-right: 1px solid var(--sidebar-border); display: flex; flex-direction: column; padding: 0; } .brand { padding: 30px 28px 26px; } .brand-wordmark { display:flex; align-items:flex-end; gap:0; line-height:1; } .brand-wordmark .w { font-weight: 800; font-size: 30px; letter-spacing: .04em; color: var(--brand); } [data-theme="dark"] .brand-wordmark .w { color:#e9eef1; } .brand-sub { font-size: 8.5px; letter-spacing: .34em; font-weight: 700; color: var(--brand); opacity:.85; margin-top: 5px; padding-left:3px; } [data-theme="dark"] .brand-sub { color:#8fa6b2; } .nav { padding: 6px 16px 16px; flex: 1; overflow-y:auto; } .nav-group { margin-top: 22px; } .nav-label { font-size: 10.5px; letter-spacing: .18em; font-weight: 700; color: var(--label); padding: 0 12px 10px; } .nav-item { display: flex; align-items: center; gap: 13px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text-2); font-weight: 600; font-size: 14.5px; cursor: pointer; margin-bottom: 2px; } .nav-item svg { width: 19px; height: 19px; flex: none; opacity: .85; } .nav-item:hover { background: var(--card-hover); color: var(--text); } .nav-item.active { background: color-mix(in oklab, var(--brand) 12%, transparent); color: var(--brand-link); font-weight: 700; } .nav-item.active svg { opacity: 1; } .nav-foot { padding: 14px 16px 22px; border-top: 1px solid var(--sidebar-border); } /* main column */ .main { display: flex; flex-direction: column; min-width: 0; background:var(--bg); } .topbar { display: flex; align-items: center; gap: 18px; padding: 18px 34px; border-bottom: 1px solid var(--topbar-border); } .topbar .toggle-ico { width: 22px; height:22px; color: var(--muted); flex:none; } .org { display: flex; flex-direction: column; gap: 3px; white-space: nowrap; } .org .name { font-weight: 700; font-size: 17px; color: var(--text); } .org .role { font-size: 10.5px; letter-spacing: .2em; font-weight: 700; color: var(--muted); } .topbar .spacer { flex: 1; } .theme-ico { width: 21px; height: 21px; color: var(--text-2); } .user { display: flex; align-items: center; gap: 12px; } .user .ava { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #6db6e0, #2f7da0); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; } .user .email { font-weight: 600; font-size: 15px; color: var(--text); } .content { padding: 40px 46px 60px; max-width: 1500px; width: 100%; } /* ---------- generic bits ---------- */ .breadcrumb { font-size: 12px; letter-spacing: .2em; font-weight: 700; color: var(--brand-link); } .page-title { font-size: 40px; font-weight: 800; letter-spacing: -.02em; margin: 14px 0 0; display: flex; align-items: center; gap: 16px; } .page-title::before { content:""; width: 5px; height: 38px; border-radius: 3px; background: var(--accent-bar); display:inline-block; } .page-sub { color: var(--text-2); font-size: 17px; margin-top: 14px; max-width: 720px; } .label { font-size: 11px; letter-spacing: .15em; font-weight: 700; color: var(--label); text-transform: uppercase; } .pill { display: inline-flex; align-items:center; gap:7px; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; border: 1px solid transparent; } .pill .dot { width:7px; height:7px; border-radius:50%; background: currentColor; } .pill.green { color: var(--green); background: var(--green-bg); border-color: var(--green-bd); } .pill.amber { color: var(--amber); background: var(--amber-bg); border-color: var(--amber-bd); } .pill.red { color: var(--red); background: var(--red-bg); border-color: var(--red-bd); } .pill.blue { color: var(--blue); background: var(--blue-bg); border-color: var(--blue-bd); } .pill.neutral { color: var(--neutral-text); background: var(--neutral-bg); } .pill.solid-red { color:#fff; background: var(--red); border:none; letter-spacing:.06em; } [data-theme="light"] .pill.solid-red { background:#d8473d; } .tag-up { font-size: 11.5px; letter-spacing: .12em; font-weight: 800; text-transform: uppercase; } .btn { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: var(--radius-sm); font-weight: 700; font-size: 14px; border: 1px solid var(--input-border); background: var(--input-bg); color: var(--text); cursor: pointer; } .btn:hover { background: var(--card-hover); } .btn svg { width: 17px; height: 17px; } .btn.brand { background: var(--brand); border-color: var(--brand); color:#fff; } .seg { display: inline-flex; gap: 4px; padding: 5px; background: var(--seg-bg); border-radius: 12px; border:1px solid var(--card-border); } .seg button { font-family: inherit; border: none; background: transparent; color: var(--text-2); padding: 9px 18px; border-radius: 9px; font-weight: 700; font-size: 14.5px; cursor: pointer; } .seg button.on { background: var(--seg-active); color: var(--text); box-shadow: var(--shadow); } .filters { display:flex; gap:24px; align-items:center; flex-wrap:wrap; } .filter-row { display:flex; align-items:center; gap:18px; } .chips { display:flex; gap:6px; flex-wrap:wrap; } .chip { padding: 7px 14px; border-radius: 8px; font-weight: 600; font-size: 14px; color: var(--text-2); cursor: pointer; } .chip:hover { background: var(--card-hover); } .chip.on { background: var(--card); border:1px solid var(--card-border); color: var(--text); font-weight:700; box-shadow:var(--shadow); } .input { display:flex; align-items:center; gap:10px; padding: 11px 15px; border:1px solid var(--input-border); border-radius: var(--radius-sm); background: var(--input-bg); color: var(--muted); font-size: 14.5px; min-width: 280px; } .input svg { width:17px; height:17px; } .select { display:flex; align-items:center; gap:10px; padding: 11px 16px; border:1px solid var(--input-border); border-radius: var(--radius-sm); background: var(--input-bg); color: var(--text); font-weight:600; font-size: 14.5px; justify-content:space-between; } /* cards */ .card { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); box-shadow: var(--shadow); } .card.pad { padding: 26px 28px; } /* ---------- KPI grid (insights) ---------- */ .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .kpi { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 22px 24px 24px; position: relative; } .kpi .hdr { display:flex; justify-content:space-between; align-items:center; } .kpi .hdr svg { width:16px; height:16px; color: var(--muted); } .kpi .num { font-size: 42px; font-weight: 800; letter-spacing: -.02em; margin: 12px 0 8px; color: var(--kpi-num); } .kpi .foot { font-size: 13.5px; color: var(--text-2); } .kpi.accent-amber { border-top: 2px solid var(--amber); } .kpi.accent-red { border-color: var(--red-bd); } .kpi .num.green { color: var(--green); } .kpi .num.amber { color: var(--amber); } .kpi .num.red { color: var(--red); } .section-label { font-size: 12px; letter-spacing:.2em; font-weight:800; color: var(--label); margin: 40px 0 18px; text-transform:uppercase; } /* chart */ .chart { padding: 28px 30px 22px; } .chart h3 { font-size: 21px; font-weight: 800; margin: 0; } .chart .sub { color: var(--text-2); font-size: 14.5px; margin-top: 6px; } .bars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 30px; align-items: end; height: 240px; margin-top: 30px; padding: 0 8px; border-bottom:1px solid var(--row-border); } .bar-col { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; } .bar { width: 60%; max-width: 78px; background: var(--chart-bar); border-radius: 5px 5px 0 0; } .bar-x { display:grid; grid-template-columns: repeat(6, 1fr); gap:30px; padding: 12px 8px 0; } .bar-x span { text-align:center; font-size: 13.5px; color: var(--text-2); } .legend { display:flex; justify-content:center; gap:8px; align-items:center; margin-top:18px; font-size:13.5px; color:var(--text-2); } .legend .d { width:9px;height:9px;border-radius:50%;background:var(--chart-bar); } /* tables */ .tbl { width:100%; border-collapse: collapse; } .tbl thead th { text-align:left; font-size: 11.5px; letter-spacing:.12em; font-weight:700; color: var(--label); text-transform:uppercase; padding: 14px 16px; border-bottom:1px solid var(--card-border); } .tbl tbody td { padding: 18px 16px; border-bottom: 1px solid var(--row-border); font-size:14.5px; vertical-align:middle; } .tbl tbody tr:last-child td { border-bottom: none; } .tbl .r { text-align: right; } .tbl .num-cell { font-weight: 700; } .tbl .sub2 { color: var(--muted); font-size: 12.5px; margin-top: 3px; } .ico-btn { width:34px;height:34px;border-radius:9px;border:1px solid var(--input-border);background:var(--input-bg);display:grid;place-items:center;color:var(--text-2);cursor:pointer; } .ico-btn svg{width:16px;height:16px;} .link-strong { color: var(--brand-link); font-weight:700; display:inline-flex; align-items:center; gap:7px; } /* consultant header */ .cons-head { display:flex; align-items:center; gap:28px; margin-top: 26px; } .cons-ava { width: 116px; height: 116px; border-radius: 50%; flex:none; background: var(--pill-bg); color: var(--text-2); display:grid; place-items:center; font-size: 38px; font-weight: 700; } .cons-name { font-size: 46px; font-weight: 800; letter-spacing: -.02em; margin: 0; } .cons-meta { display:flex; align-items:center; gap:16px; margin-top: 12px; flex-wrap:wrap; font-size: 17px; color: var(--text-2); } .cons-meta .strong { color: var(--text); font-weight:600; } .tabs { display:flex; gap:2px; padding: 6px; background: var(--seg-bg); border:1px solid var(--card-border); border-radius: 13px; margin-top: 30px; width: fit-content; } .tabs button { font-family:inherit; border:none; background:transparent; color: var(--text-2); padding: 11px 20px; border-radius: 9px; font-weight:700; font-size:15px; cursor:pointer; } .tabs button.on { background: var(--seg-active); color: var(--text); box-shadow: var(--shadow); } .tabs button .ct { color: var(--muted); font-weight:700; } .two-col { display:grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 30px; } .detail-card .dc-head { display:flex; justify-content:space-between; align-items:center; padding-bottom: 18px; border-bottom:1px solid var(--row-border); margin-bottom: 22px; } .detail-card .dc-title { font-size: 13px; letter-spacing:.16em; font-weight:800; color: var(--label); } .field-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 24px 30px; } .field .k { font-size: 11px; letter-spacing:.13em; font-weight:700; color: var(--label); text-transform:uppercase; } .field .v { font-size: 19px; font-weight: 600; margin-top: 7px; } .field .v.mono { font-weight:600; } .dc-foot { margin-top: 24px; display:flex; gap:12px; } /* agency costs table groups */ .acct thead th { text-align:right; } .acct thead th:first-child { text-align:left; } .acct .grp td { font-size: 11.5px; letter-spacing:.14em; font-weight:800; color: var(--brand-link); text-transform:uppercase; padding-top: 22px; padding-bottom: 10px; border:none; } .acct .grp.muted td { color: var(--label); } .acct td { text-align:right; } .acct td:first-child { text-align:left; } .acct .cat { display:flex; align-items:center; gap:12px; font-weight:600; } .acct .cat .d { width:9px;height:9px;border-radius:50%; } .acct td.money { color: var(--text); font-variant-numeric: tabular-nums; } .acct td.zero { color: var(--muted); } .acct tr.total td { border-top: 1px solid var(--card-border); font-weight: 800; padding-top: 18px; } .acct tr.total td:last-child { color: var(--brand-link); } /* ---------- operational realism ---------- */ .badge{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:6px;font-size:10.5px;letter-spacing:.07em;font-weight:800;text-transform:uppercase;border:1px solid transparent;white-space:nowrap;line-height:1;} .badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor;} .badge.red{color:var(--red);background:var(--red-bg);border-color:var(--red-bd);} .badge.amber{color:var(--amber);background:var(--amber-bg);border-color:var(--amber-bd);} .badge.green{color:var(--green);background:var(--green-bg);border-color:var(--green-bd);} .badge.neutral{color:var(--neutral-text);background:var(--neutral-bg);border-color:var(--card-border);} .notif-strip{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;} .notif{display:flex;align-items:center;gap:10px;padding:11px 15px;border-radius:11px;border:1px solid var(--card-border);background:var(--card);font-size:13.5px;font-weight:600;color:var(--text);} .notif svg{width:17px;height:17px;flex:none;} .notif.red{border-color:var(--red-bd);} .notif.red svg{color:var(--red);} .notif.amber{border-color:var(--amber-bd);} .notif.amber svg{color:var(--amber);} .notif.blue svg{color:var(--brand-link);} .activity{display:flex;flex-direction:column;} .activity .row{display:flex;gap:14px;align-items:flex-start;padding:15px 0;border-bottom:1px solid var(--row-border);} .activity .row:last-child{border-bottom:none;padding-bottom:0;} .activity .ic{width:32px;height:32px;border-radius:9px;background:var(--pill-bg);display:grid;place-items:center;color:var(--text-2);flex:none;font-size:12px;font-weight:700;letter-spacing:.02em;} .activity .ic svg{width:16px;height:16px;} .activity .t{font-weight:600;font-size:14.5px;} .activity .time{color:var(--muted);font-size:12.5px;margin-top:2px;font-variant-numeric:tabular-nums;} .flow{display:flex;align-items:center;margin-top:6px;} .flow .step{display:flex;flex-direction:column;gap:8px;align-items:flex-start;} .flow .step .s-lbl{font-size:11px;letter-spacing:.1em;font-weight:800;text-transform:uppercase;color:var(--text-2);} .flow .step .s-dot{width:13px;height:13px;border-radius:50%;border:2px solid var(--card-border);background:var(--card);} .flow .step.done .s-dot{background:var(--green);border-color:var(--green);} .flow .step.done .s-lbl{color:var(--text);} .flow .step.active .s-dot{background:var(--brand-link);border-color:var(--brand-link);box-shadow:0 0 0 4px color-mix(in oklab,var(--brand-link) 22%,transparent);} .flow .step.active .s-lbl{color:var(--brand-link);} .flow .bar{flex:1;height:2px;background:var(--row-border);margin:0 12px 19px;} .flow .bar.done{background:var(--green);} .dc-meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--row-border);color:var(--muted);font-size:12.5px;} .dc-meta span{display:inline-flex;align-items:center;gap:7px;} .dc-meta .gd{width:6px;height:6px;border-radius:50%;background:var(--green);} .hide { display:none !important; } /* ---------- mobile ---------- */ .mtopbar { display:none; } @media (max-width: 820px) { .app { grid-template-columns: 1fr; } .sidebar { display:none; } .topbar { display:none; } .mtopbar { display:flex; align-items:center; gap:14px; padding: 16px 18px; border-bottom:1px solid var(--topbar-border); position:sticky; top:0; background:var(--bg); z-index:5; } .mtopbar .w { font-weight:800; font-size:21px; letter-spacing:.04em; color: var(--brand); } [data-theme="dark"] .mtopbar .w { color:#e9eef1; } .mtopbar .spacer { flex:1; } .mtopbar svg { width:22px; height:22px; color: var(--text-2); } .mtopbar .ava { width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 30% 30%, #6db6e0, #2f7da0);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px; } .content { padding: 24px 18px 50px; } .page-title { font-size: 30px; } .page-title::before { height: 28px; } .page-sub { font-size: 15px; } .kpi-grid { grid-template-columns: 1fr 1fr; gap: 12px; } .kpi .num { font-size: 30px; } .two-col { grid-template-columns: 1fr; } .cons-head { flex-direction: column; align-items:flex-start; gap:18px; } .cons-ava { width:84px;height:84px;font-size:28px; } .cons-name { font-size: 32px; } .tabs { width:100%; overflow-x:auto; } .field-grid { grid-template-columns: 1fr 1fr; } .mobile-scroll { overflow-x:auto; } }