From 7da1cb27099fb96e2d89319275eab2c4c362befd Mon Sep 17 00:00:00 2001 From: Theo Date: Thu, 24 Sep 2026 07:14:19 +0000 Subject: [PATCH 1/8] styles: delete dead admin.css rules, empty media blocks and unused keyframes --- apps/admin/src/styles/admin.css | 1581 +------------------------------ 1 file changed, 32 insertions(+), 1549 deletions(-) diff --git a/apps/admin/src/styles/admin.css b/apps/admin/src/styles/admin.css index 90733ef..fc1d06f 100644 --- a/apps/admin/src/styles/admin.css +++ b/apps/admin/src/styles/admin.css @@ -5,7 +5,7 @@ @import url('./colors-and-type.css'); * { box-sizing: border-box; } -html, body, #root { margin: 0; padding: 0; } +html, body { margin: 0; padding: 0; } html, body { min-height: 100%; } /* Always reserve the vertical scrollbar gutter so the document never re-centers .main when a page's height crosses the viewport (e.g. switching the Mail folder Outreach -> Inbox drops the @@ -36,316 +36,6 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } --row-pad-y: 11px; --row-pad-x: 14px; } -:root[data-density="compact"] { - --gutter: 10px; - --row-pad-y: 7px; - --row-pad-x: 11px; -} - -/* Responsive widths */ -.desktop-only { } -.mobile-only { display: none !important; } -@media (max-width: 880px) { - .desktop-only { display: none !important; } - .mobile-only { display: inline-flex !important; } -} - -/* --------------------------------------------------------- - App shell - --------------------------------------------------------- */ -.shell { - display: grid; - grid-template-columns: var(--sidebar-w) 1fr; - grid-template-rows: var(--topbar-h) 1fr; - min-height: 100vh; - background: var(--paper); -} -.shell.collapsed { --sidebar-w: var(--sidebar-w-collapsed); } - -@media (max-width: 880px) { - .shell { - grid-template-columns: 1fr; - grid-template-rows: var(--topbar-h) 1fr; - } -} - -/* --------------------------------------------------------- - Top bar - --------------------------------------------------------- */ -.topbar { - grid-column: 1 / -1; - display: flex; - align-items: center; - height: var(--topbar-h); - padding: 0 14px; - background: rgba(251,247,240,0.92); - backdrop-filter: blur(20px); - -webkit-backdrop-filter: blur(20px); - border-bottom: 1px solid var(--border-soft); - gap: 10px; - z-index: 30; - position: sticky; - top: 0; -} -.topbar .logo { - display: flex; - align-items: center; - gap: 8px; - font-family: var(--font-display); - font-weight: 700; - letter-spacing: -0.01em; - font-size: 15px; - flex-shrink: 0; -} -.topbar .logo img { width: 22px; height: 22px; } -.topbar .logo-tag { - font-family: var(--font-body); - font-size: 10.5px; - font-weight: 700; - letter-spacing: 0.05em; - text-transform: uppercase; - color: var(--ink-3); - background: var(--paper-2); - border: 1px solid var(--border-soft); - padding: 1px 6px; - border-radius: 5px; - margin-left: 2px; -} -.topbar .crumbs { - display: flex; - align-items: center; - gap: 6px; - font-size: 13px; - color: var(--ink-2); - font-weight: 600; - margin-left: 4px; -} -.topbar .crumbs .here { - color: var(--ink); - font-family: var(--font-display); - font-size: 14px; - letter-spacing: -0.01em; -} -.topbar .spacer { flex: 1; } - -.topbar .cmdk { - display: flex; - align-items: center; - gap: 8px; - padding: 6px 8px 6px 10px; - background: #fff; - border: 1px solid var(--border-soft); - border-radius: 8px; - font-size: 12.5px; - color: var(--ink-3); - width: 300px; - cursor: text; - transition: border-color 120ms var(--ease-out); -} -.topbar .cmdk:hover { border-color: var(--border); } -.topbar .cmdk .kbd { - margin-left: auto; - font-family: var(--font-mono); - font-size: 10.5px; - color: var(--ink-3); - background: var(--paper-2); - border: 1px solid var(--border-soft); - border-bottom-width: 1.5px; - border-radius: 4px; - padding: 1px 5px; -} -@media (max-width: 640px) { - .topbar .cmdk { width: 38px; padding: 6px; justify-content: center; } - .topbar .cmdk .cmdk-placeholder, - .topbar .cmdk .kbd { display: none; } -} - -.topbar .iconbtn { - width: 32px; height: 32px; - display: inline-flex; - align-items: center; - justify-content: center; - border-radius: 7px; - border: 1px solid transparent; - background: transparent; - color: var(--ink-2); - position: relative; - transition: background 120ms var(--ease-out), color 120ms var(--ease-out); -} -.topbar .iconbtn:hover { background: var(--paper-2); color: var(--ink); } -.topbar .iconbtn .pip { - position: absolute; - top: 7px; right: 7px; - width: 6px; height: 6px; - background: var(--bloom); - border-radius: 50%; - box-shadow: 0 0 0 2px var(--paper); -} -.topbar .avatar { - width: 28px; height: 28px; - border-radius: 50%; - background: linear-gradient(135deg, var(--lilac) 0%, var(--bloom) 100%); - color: #fff; - display: inline-flex; - align-items: center; - justify-content: center; - font-weight: 700; - font-size: 11px; - flex-shrink: 0; - border: 2px solid var(--paper); - box-shadow: var(--shadow-1); -} - -/* --------------------------------------------------------- - Sidebar - --------------------------------------------------------- */ -.sidebar-wrap { - position: sticky; - top: var(--topbar-h); - height: calc(100vh - var(--topbar-h)); - align-self: start; - z-index: 10; -} -.sidebar { - border-right: 1px solid var(--border-soft); - padding: 12px 10px; - background: var(--paper); - display: flex; - flex-direction: column; - gap: 2px; - font-size: 13px; - height: 100%; - overflow-y: auto; -} -.sidebar-divider { - height: 1px; - background: var(--border-soft); - margin: 12px 4px 8px; -} -.sidebar .nav { - display: flex; - align-items: center; - gap: 10px; - padding: 7px 10px; - border-radius: 7px; - color: var(--ink-2); - font-weight: 600; - font-size: 13px; - cursor: pointer; - transition: background 120ms var(--ease-out), color 120ms var(--ease-out); - position: relative; - border: 1px solid transparent; - background: transparent; - width: 100%; - text-align: left; -} -.sidebar .nav:hover { background: var(--paper-2); color: var(--ink); } -.sidebar .nav.active { - background: #fff; - color: var(--ink); - box-shadow: var(--shadow-1); - border-color: var(--border-soft); -} -.sidebar .nav.active::before { - content: ""; - position: absolute; - left: -10px; - top: 8px; bottom: 8px; - width: 2.5px; - border-radius: 0 2px 2px 0; - background: var(--bloom); -} -.sidebar .nav svg { - width: 16px; height: 16px; - flex-shrink: 0; - color: var(--ink-3); - transition: color 120ms var(--ease-out); -} -.sidebar .nav .label { - flex: 1; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} -.sidebar .nav.active svg { color: var(--bloom); } -.sidebar .nav .count { - margin-left: auto; - font-family: var(--font-mono); - font-size: 11px; - color: var(--ink-3); - background: var(--paper-2); - border: 1px solid var(--border-soft); - border-radius: 5px; - padding: 0 5px; - font-feature-settings: "tnum" 1; - font-weight: 600; -} -.sidebar .nav .count.hot { - background: var(--bloom-50); - color: var(--bloom-700); - border-color: color-mix(in oklab, var(--bloom) 22%, transparent); -} - -.sidebar .me { - margin-top: auto; - display: flex; - gap: 9px; - align-items: center; - padding: 10px 8px 4px; - border-top: 1px solid var(--border-soft); - margin-top: 16px; -} -.sidebar .me .who { - font-size: 12.5px; - font-weight: 700; - line-height: 1.1; - white-space: nowrap; -} -.sidebar .me .me-text { flex: 1; min-width: 0; } - -/* Sidebar collapsed (desktop only) */ -.shell.collapsed .sidebar .nav .label, -.shell.collapsed .sidebar .nav .count, -.shell.collapsed .sidebar .me .me-text { - display: none; -} -.shell.collapsed .sidebar .nav { justify-content: center; padding: 8px; } -.shell.collapsed .sidebar .me { justify-content: center; } -.shell.collapsed .topbar .logo .wd, -.shell.collapsed .topbar .logo-tag { display: none; } - -/* Mobile sidebar = drawer */ -.sidebar-backdrop { - position: fixed; - inset: 0; - background: rgba(26,23,20,0.32); - backdrop-filter: blur(2px); - z-index: 55; - opacity: 0; - pointer-events: none; - transition: opacity 240ms var(--ease-out); - display: none; -} -.sidebar-backdrop.open { opacity: 1; pointer-events: auto; } - -@media (max-width: 880px) { - .sidebar-wrap { - position: fixed; - top: 0; - left: 0; - height: 100vh; - width: 264px; - z-index: 60; - transform: translateX(-100%); - transition: transform 280ms var(--ease-out); - } - .sidebar-wrap .sidebar { - padding-top: calc(var(--topbar-h) + 8px); - box-shadow: var(--shadow-3); - } - .sidebar-wrap.mobile-open { transform: translateX(0); } - .sidebar-backdrop { display: block; } -} /* --------------------------------------------------------- Main work area @@ -396,33 +86,6 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } font-feature-settings: "tnum" 1; } -/* Hero + map row */ -.hero-row { - display: grid; - grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); - gap: var(--gutter); - align-items: start; -} -@media (max-width: 1180px) { - .hero-row { grid-template-columns: 1fr; } -} - -/* Queue + rail row */ -.work-row { - display: grid; - grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); - gap: var(--gutter); - align-items: start; -} -.work-rail { - display: flex; - flex-direction: column; - gap: var(--gutter); -} -@media (max-width: 980px) { - .work-row { grid-template-columns: 1fr; } -} - /* --------------------------------------------------------- Card primitive --------------------------------------------------------- */ @@ -481,20 +144,6 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } .card .card-head .head-action svg { width: 12px; height: 12px; flex-shrink: 0; } .card .card-head .head-action:hover { background: var(--paper-2); color: var(--ink); } -.live-inline-dot { - width: 7px; height: 7px; - border-radius: 50%; - background: var(--bloom); - box-shadow: 0 0 0 0 color-mix(in oklab, var(--bloom) 60%, transparent); - animation: pulseSoft 2.2s ease-in-out infinite; - display: inline-block; - flex-shrink: 0; -} -@keyframes pulseSoft { - 0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--bloom) 60%, transparent); } - 50% { box-shadow: 0 0 0 6px color-mix(in oklab, var(--bloom) 0%, transparent); } -} - /* --------------------------------------------------------- Status strip --------------------------------------------------------- */ @@ -555,310 +204,38 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } .statcell.tone-alert::before { content: ""; position: absolute; - top: 14px; left: 0; - width: 3px; height: 20px; - background: var(--bloom); - border-radius: 0 2px 2px 0; -} -.statcell.tone-ok .statcell-hot { color: var(--moss-700); } -.statcell.tone-info .statcell-hot { color: var(--sky-700); } - -@media (max-width: 880px) { - .statusstrip { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - .statcell:nth-child(2) { border-right: none; } - .statcell:nth-child(1), .statcell:nth-child(2) { - border-bottom: 1px solid var(--border-soft); - } -} - -/* --------------------------------------------------------- - Up next hero - --------------------------------------------------------- */ -.upnext { - background: - linear-gradient(135deg, var(--bloom-50) 0%, transparent 45%), - #fff; - border: 1px solid color-mix(in oklab, var(--bloom) 18%, transparent); - border-radius: var(--card-radius); - padding: 18px 20px 20px; - box-shadow: var(--shadow-2); - position: relative; - overflow: hidden; -} -.upnext::before { - content: ""; - position: absolute; - inset: 0; - background-image: url('/ds/topo-pattern.svg'); - background-size: 280px; - opacity: 0.05; - pointer-events: none; -} -.upnext-meta { - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 12px; - flex-wrap: wrap; - gap: 8px; -} -.upnext-eyebrow { - display: inline-flex; - align-items: center; - gap: 7px; - font-size: 11px; - font-weight: 700; - letter-spacing: 0.07em; - text-transform: uppercase; - color: var(--bloom-700); - white-space: nowrap; - flex-shrink: 0; -} -.upnext-pulse { - width: 7px; height: 7px; - background: var(--bloom); - border-radius: 50%; - animation: pulseSoft 2.2s ease-in-out infinite; - box-shadow: 0 0 0 0 color-mix(in oklab, var(--bloom) 60%, transparent); -} -.upnext-because { - font-size: 12px; - color: var(--ink-3); - font-weight: 500; -} - -.upnext-grid { - display: grid; - grid-template-columns: minmax(0, 1fr) 180px; - gap: 18px; - align-items: start; - position: relative; -} -@media (max-width: 720px) { - .upnext-grid { grid-template-columns: 1fr; } -} - -.upnext-main { min-width: 0; } - -.upnext-titles { - display: flex; - align-items: flex-start; - gap: 12px; - margin-bottom: 10px; -} -.upnext-pin { - width: 44px; height: 44px; - border-radius: 10px; - background: #fff; - border: 1px solid var(--border-soft); - padding: 5px; - flex-shrink: 0; - box-shadow: var(--shadow-1); -} -.upnext-pin img { width: 100%; height: 100%; object-fit: contain; } -.upnext-title-text { flex: 1; min-width: 0; } -.upnext-title-text h2 { - font-family: var(--font-display); - font-weight: 700; - font-size: 24px; - letter-spacing: -0.025em; - line-height: 1.05; - margin: 0 0 5px; - color: var(--ink); - word-break: break-word; -} -.upnext-sub { - font-size: 13px; - color: var(--ink-3); - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 4px 6px; - line-height: 1.4; -} -.upnext-sub > * { white-space: nowrap; } -.upnext-sub .strong { color: var(--ink); font-weight: 700; } -.upnext-sub .sep { color: var(--ink-4); } - -.upnext-slabadge { - display: inline-flex; - align-items: center; - gap: 5px; - background: var(--bloom); - color: #fff; - border-radius: 999px; - padding: 3px 10px 3px 9px; - font-size: 11px; - font-weight: 700; - letter-spacing: 0.02em; - white-space: nowrap; - flex-shrink: 0; - box-shadow: 0 1px 3px rgba(229,95,80,0.35); -} - -.upnext-desc { - font-size: 13.5px; - color: var(--ink-2); - line-height: 1.5; - margin: 4px 0 16px; - text-wrap: pretty; - max-width: 60ch; -} - -.upnext-cta-row { - display: flex; - align-items: center; - gap: 8px; - flex-wrap: wrap; -} -.upnext-hint { - font-size: 12px; - color: var(--ink-3); - margin-left: 6px; - white-space: nowrap; -} - -.upnext-side { - display: flex; - flex-direction: column; - gap: 14px; -} -.upnext-stat { - background: transparent; - border: none; - border-radius: 0; - padding: 0; -} -.upnext-stat + .upnext-stat { - border-top: 1px solid var(--border-soft); - padding-top: 14px; -} -.upnext-stat-label { - font-size: 10.5px; - font-weight: 700; - letter-spacing: 0.06em; - text-transform: uppercase; - color: var(--ink-3); - margin-bottom: 4px; -} -.upnext-stat-num { - font-family: var(--font-display); - font-variation-settings: "opsz" 38, "wdth" 88; - font-weight: 700; - font-size: 26px; - letter-spacing: -0.022em; - line-height: 1; - color: var(--ink); - font-feature-settings: "tnum" 1, "lnum" 1; -} -.upnext-stat-num.small { - font-size: 18px; - font-variation-settings: "opsz" 24, "wdth" 100; - letter-spacing: -0.015em; -} -.upnext-stat-foot { - font-size: 11px; - color: var(--ink-3); - margin-top: 4px; -} - -/* --------------------------------------------------------- - Live US activity - --------------------------------------------------------- */ -.live-map-card { min-height: 360px; } -.live-map { - position: relative; - flex: 1; - min-height: 320px; - overflow: hidden; -} -.pi-map-canvas { - position: absolute; - inset: 0; - z-index: 0; - background: var(--paper-2); -} - -/* Leaflet brand pin (divIcon) */ -.pi-map-pin-wrap { background: none !important; border: none !important; } -.pi-map-pin { - position: relative; - aspect-ratio: 1 / 1.25; - transform-origin: 50% 100%; - filter: drop-shadow(0 3px 5px var(--pin-glow, rgba(26,23,20,0.3))); - transition: transform 140ms var(--ease-spring); -} -.pi-map-pin img { - width: 100%; - height: 100%; - display: block; - object-fit: contain; -} -.pi-map-pin:hover { transform: translateY(-2px) scale(1.06); } -.pi-map-pin.is-active { transform: translateY(-2px) scale(1.08); z-index: 5; } -.pi-map-pin .pi-map-count { - position: absolute; - top: -5px; right: -7px; - min-width: 16px; - height: 16px; - padding: 0 4px; - background: #fff; - border: 1px solid var(--border); - border-radius: 999px; - font-family: var(--font-mono); - font-size: 10px; - font-weight: 700; - color: var(--ink); - display: flex; - align-items: center; - justify-content: center; - box-shadow: var(--shadow-1); - font-feature-settings: "tnum" 1; -} -/* draft = unregistered jurisdiction -> dashed coral ring + ping */ -.pi-map-pin.is-draft::before { - content: ""; - position: absolute; - left: 50%; - top: 38%; - width: 30px; height: 30px; - transform: translate(-50%, -50%); - border: 2px dashed var(--bloom); - border-radius: 50%; - opacity: 0.9; -} -.pi-map-pin.is-draft::after { - content: ""; - position: absolute; - left: 50%; - top: 38%; - width: 30px; height: 30px; - transform: translate(-50%, -50%); - border-radius: 50%; + top: 14px; left: 0; + width: 3px; height: 20px; background: var(--bloom); - opacity: 0.18; - animation: draftPing 2.4s var(--ease-out) infinite; -} -@keyframes draftPing { - 0% { transform: translate(-50%, -50%) scale(0.7); opacity: 0.25; } - 100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; } + border-radius: 0 2px 2px 0; } -.pi-map-pin.is-draft .pi-map-count { - background: var(--bloom-50); - border-color: color-mix(in oklab, var(--bloom) 32%, transparent); - color: var(--bloom-700); +.statcell.tone-ok .statcell-hot { color: var(--moss-700); } + +@media (max-width: 880px) { + .statusstrip { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + .statcell:nth-child(2) { border-right: none; } + .statcell:nth-child(1), .statcell:nth-child(2) { + border-bottom: 1px solid var(--border-soft); + } } -/* user dot */ -.pi-map-userdot { - width: 18px; height: 18px; - border-radius: 50%; - background: var(--sky); - border: 3px solid #fff; - box-shadow: var(--shadow-2), 0 0 0 0 color-mix(in oklab, var(--sky) 55%, transparent); - animation: pulseSoft 2.2s ease-in-out infinite; +/* --------------------------------------------------------- + Live US activity + --------------------------------------------------------- */ +.live-map-card { min-height: 360px; } +.live-map { + position: relative; + flex: 1; + min-height: 320px; + overflow: hidden; +} +.pi-map-canvas { + position: absolute; + inset: 0; + z-index: 0; + background: var(--paper-2); } /* Leaflet tooltip override -> on-brand */ @@ -963,60 +340,6 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } /* --------------------------------------------------------- Queue tabs + rows --------------------------------------------------------- */ -.queue-card { min-height: 380px; } -.queue-tabs { - padding-left: 6px !important; - padding-right: 8px !important; - padding-top: 6px !important; - padding-bottom: 6px !important; -} -.qtab { - display: inline-flex; - align-items: center; - gap: 7px; - padding: 7px 12px 7px 10px; - border-radius: 7px; - background: transparent; - border: 1px solid transparent; - font-size: 13px; - font-weight: 700; - color: var(--ink-3); - font-family: var(--font-body); - transition: background 120ms var(--ease-out), color 120ms var(--ease-out); - white-space: nowrap; -} -.qtab:hover { background: var(--paper-2); color: var(--ink-2); } -.qtab.active { - background: var(--paper-2); - color: var(--ink); - border-color: var(--border-soft); -} -.qtab-count { - font-family: var(--font-mono); - font-size: 11px; - color: var(--ink-3); - background: var(--paper); - border: 1px solid var(--border-soft); - border-radius: 5px; - padding: 0 5px; - font-feature-settings: "tnum" 1; - font-weight: 600; -} -.qtab.active .qtab-count { - background: #fff; - color: var(--ink); - border-color: var(--border); -} -.qtab-hot { - font-size: 10.5px; - color: var(--bloom-700); - font-weight: 700; - background: var(--bloom-50); - padding: 1px 6px; - border-radius: 4px; - border: 1px solid color-mix(in oklab, var(--bloom) 20%, transparent); -} - .queue-list { display: flex; flex-direction: column; } .qrow { display: grid; @@ -1183,8 +506,6 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } } .pill.tight { padding: 0px 6px; font-size: 10px; } .pill .dot { width: 4.5px; height: 4.5px; border-radius: 50%; background: currentColor; } -.pill.priority-high { background: var(--bloom-50); color: var(--bloom-700); border-color: color-mix(in oklab, var(--bloom) 18%, transparent); } -.pill.priority-med { background: var(--sun-50); color: var(--sun-700); border-color: color-mix(in oklab, var(--sun) 28%, transparent); } .pill.priority-low { background: var(--paper-2); color: var(--ink-2); border-color: var(--border-soft); } .pill.status-new { background: var(--sky-50); color: var(--sky-700); border-color: color-mix(in oklab, var(--sky) 20%, transparent); } .pill.status-progress { background: var(--lilac-50); color: var(--lilac-600); border-color: color-mix(in oklab, var(--lilac) 18%, transparent); } @@ -1201,22 +522,6 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } letter-spacing: 0.03em; text-transform: uppercase; } -.pill.kbd { - font-family: var(--font-mono); - background: var(--paper-2); - border-color: var(--border-soft); - color: var(--ink-3); - font-weight: 600; -} - -.led { - display: inline-block; - width: 7px; height: 7px; - border-radius: 50%; -} -.led.ok { background: var(--moss); } -.led.warn { background: var(--sun-600); } -.led.bad { background: var(--bloom); } /* --------------------------------------------------------- Buttons @@ -1357,18 +662,6 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } text-overflow: ellipsis; } .panel-head .spacer { flex: 1; } -.panel-head .nav-arr { - width: 28px; height: 28px; - display: inline-flex; - align-items: center; - justify-content: center; - border-radius: 7px; - border: 1px solid var(--border-soft); - background: #fff; - color: var(--ink-2); - transition: background 120ms var(--ease-out); -} -.panel-head .nav-arr:hover { background: var(--paper-2); } .panel-head .closebtn { width: 32px; height: 32px; border-radius: 7px; @@ -1416,7 +709,6 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } align-items: center; gap: 8px; } -.panel-foot .left { display: flex; align-items: center; gap: 8px; } .panel-foot .spacer { flex: 1; } /* Sub sections inside panel */ @@ -1445,51 +737,6 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } } .sub > .sub-body { padding: 14px; } -/* Report preview */ -.report-preview { - display: flex; - gap: 12px; - padding: 10px; - background: var(--paper-2); - border-radius: 10px; - border: 1px solid var(--border-soft); -} -.report-preview .photo { - width: 88px; height: 88px; - border-radius: 8px; - background-image: - linear-gradient(135deg, var(--ink-4) 0%, var(--ink-5) 60%, var(--moss-100) 100%); - background-size: cover; - flex-shrink: 0; - position: relative; - border: 1px solid var(--border-soft); -} -.report-preview .photo .pin-on-photo { - position: absolute; - bottom: 4px; right: 4px; - width: 18px; height: 22px; - border-radius: 50% 50% 50% 4px; - transform: rotate(-45deg); - background: var(--bloom); - box-shadow: var(--shadow-2); -} -.report-preview .info { flex: 1; min-width: 0; } -.report-preview .info .desc { - font-size: 13px; - color: var(--ink); - line-height: 1.4; - text-wrap: pretty; -} -.report-preview .info .row { - font-size: 11px; - color: var(--ink-3); - margin-top: 6px; - display: flex; - gap: 6px; - flex-wrap: wrap; -} -.report-preview .info .row .strong { color: var(--ink-2); font-weight: 700; } - /* Mini map in panel */ .mini-map { height: 140px; @@ -1511,30 +758,6 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } font-feature-settings: "tnum" 1; color: var(--ink); } .juris-stat-sub { font-size: 11px; color: var(--ink-3); margin-top: 2px; } -.mini-map .juris-shape { - position: absolute; - inset: 16px; - border: 2px dashed color-mix(in oklab, var(--bloom) 55%, transparent); - background: color-mix(in oklab, var(--bloom) 5%, transparent); - border-radius: 22px 30px 24px 32px / 28px 22px 30px 26px; - transform: rotate(-3deg); -} -.mini-map .juris-pin { - position: absolute; - top: 50%; left: 50%; - width: 22px; height: 28px; - border-radius: 50% 50% 50% 4px; - transform: translate(-50%, -90%) rotate(-45deg); - background: var(--bloom); - box-shadow: var(--shadow-2); -} -.mini-map .juris-pin::after { - content: ''; - position: absolute; - inset: 7px; - background: #fff; - border-radius: 50%; -} .mini-map .juris-label { position: absolute; top: 50%; left: 50%; @@ -1549,109 +772,6 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } box-shadow: var(--shadow-1); white-space: nowrap; } -.mini-map .scribble { - position: absolute; - inset: 0; - background-image: url('/ds/topo-pattern.svg'); - background-size: 200px; - opacity: 0.13; - pointer-events: none; -} - -/* Browser pane mock */ -.browser-pane { - border: 1px solid var(--border); - border-radius: 10px; - overflow: hidden; - background: #fff; -} -.browser-tabs { - display: flex; - gap: 4px; - padding: 6px 10px 0; - background: var(--paper-2); - border-bottom: 1px solid var(--border-soft); - overflow: hidden; -} -.browser-tab { - font-size: 11px; - padding: 4px 10px; - background: var(--paper); - border: 1px solid var(--border-soft); - border-bottom: none; - border-radius: 6px 6px 0 0; - color: var(--ink-3); - font-weight: 600; - white-space: nowrap; - max-width: min(200px, 100%); - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; -} -.browser-tab.active { background: #fff; color: var(--ink); } -.browser-bar { - background: var(--paper-2); - padding: 7px 10px; - display: flex; - align-items: center; - gap: 8px; - border-bottom: 1px solid var(--border-soft); -} -.browser-bar .tld { - display: inline-flex; - gap: 5px; - align-items: center; -} -.browser-bar .tld span { - width: 9px; height: 9px; - border-radius: 50%; - background: var(--ink-4); -} -.browser-bar .tld span.r { background: #ff5f57; } -.browser-bar .tld span.y { background: #febc2e; } -.browser-bar .tld span.g { background: #28c840; } -.browser-bar .url { - flex: 1; - background: #fff; - border-radius: 5px; - padding: 4px 9px; - font-family: var(--font-mono); - font-size: 11px; - color: var(--ink-2); - border: 1px solid var(--border-soft); - display: flex; - align-items: center; - gap: 6px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; -} -.browser-content { - height: 180px; - padding: 14px; - background: #fff; - position: relative; - overflow: hidden; -} -.browser-content .g-result { margin-bottom: 12px; } -.browser-content .g-result .crumb { - font-size: 10.5px; - color: var(--ink-3); - font-family: var(--font-mono); -} -.browser-content .g-result .ttl { - font-size: 13px; - color: var(--sky-700); - font-weight: 600; - margin: 2px 0; - text-decoration: underline; - text-decoration-color: color-mix(in oklab, var(--sky) 30%, transparent); -} -.browser-content .g-result .snip { - font-size: 11px; - color: var(--ink-2); - line-height: 1.4; -} /* Fields */ .field { @@ -1760,93 +880,7 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } font-family: var(--font-body); font-size: 12.5px; color: var(--ink); - padding: 8px 0; -} -.tag-input { - display: flex; - flex-wrap: wrap; - gap: 4px; - padding: 4px; - border: 1px solid var(--border); - background: #fff; - border-radius: 7px; - min-height: 36px; - align-items: center; -} -.tag-input .tag { - background: var(--moss-50); - color: var(--moss-700); - font-size: 11.5px; - padding: 3px 7px 3px 8px; - border-radius: 5px; - font-weight: 600; - border: 1px solid color-mix(in oklab, var(--moss) 18%, transparent); - display: inline-flex; - align-items: center; - gap: 4px; -} -.tag-input .tag .x { - color: var(--moss-700); - opacity: 0.6; - cursor: pointer; -} -.tag-input .tag .x:hover { opacity: 1; } -.tag-input input { - flex: 1; - min-width: 80px; - border: none; - background: transparent; - padding: 3px 6px; - font-size: 13px; - color: var(--ink); - outline: none; -} - -/* Similar nearby + notes */ -.similar-list { display: flex; flex-direction: column; gap: 2px; } -.similar-row { - display: flex; - align-items: center; - gap: 9px; - padding: 7px 8px; - border-radius: 6px; - font-size: 12.5px; - cursor: pointer; - transition: background 120ms var(--ease-out); -} -.similar-row:hover { background: var(--paper-2); } -.similar-row .city { font-weight: 700; color: var(--ink); } -.similar-row .state { - color: var(--ink-3); - font-family: var(--font-mono); - font-size: 10.5px; -} -.similar-row .reuse { - margin-left: auto; - font-size: 10.5px; - color: var(--moss-700); - background: var(--moss-50); - padding: 1px 7px; - border-radius: 999px; - font-weight: 700; - border: 1px solid color-mix(in oklab, var(--moss) 18%, transparent); -} - -.notes { display: flex; flex-direction: column; gap: 8px; } -.note { - font-size: 12.5px; - color: var(--ink-2); - background: var(--sun-50); - border-left: 2px solid var(--sun); - padding: 8px 11px; - border-radius: 0 6px 6px 0; - line-height: 1.4; -} -.note .meta { - font-size: 10.5px; - color: var(--ink-3); - font-family: var(--font-mono); - margin-top: 4px; + padding: 8px 0; } /* Toast */ @@ -1900,26 +934,10 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } .mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; } .muted { color: var(--ink-3); } .row-flex { display: flex; align-items: center; gap: 8px; } -.row-flex.wrap { flex-wrap: wrap; } - -/* Tweaks panel */ -#tweaks-host { z-index: 100; } /* ========================================================= Pages: toolbar, filters, search ========================================================= */ -.statcell.clickable { - border: none; - border-right: 1px solid var(--border-soft); - background: transparent; - text-align: left; - font: inherit; - cursor: pointer; - transition: background 120ms var(--ease-out); -} -.statcell.clickable:last-child { border-right: none; } -.statcell.clickable:hover { background: var(--paper-2); } - .toolbar { display: flex; align-items: center; @@ -2084,132 +1102,11 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } } .trow.thead:hover { background: var(--paper-2); } .trow .td-strong { font-weight: 700; color: var(--ink); } -.trow .td-route { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.trow .td-bad { color: var(--bloom-700); font-weight: 700; } .trow.jt { grid-template-columns: 2fr 0.6fr 0.8fr; } /* card padding helper */ .card-pad { padding: 16px; } -/* ========================================================= - Moderation detail - ========================================================= */ -.mod-detail { display: flex; flex-direction: column; height: 100%; } -.mod-detail-head { - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: 12px; - padding: 16px 16px 12px; -} -.mod-detail-head h2 { - font-family: var(--font-display); - font-weight: 700; - font-size: 19px; - letter-spacing: -0.015em; - margin: 0; -} -.mod-detail-head .crumb { - font-size: 10.5px; - color: var(--ink-3); - letter-spacing: 0.06em; - text-transform: uppercase; - font-weight: 700; - margin-bottom: 4px; - white-space: nowrap; -} -.mod-auto { - display: flex; - align-items: center; - gap: 7px; - margin: 0 16px 14px; - padding: 8px 12px; - background: var(--sun-50); - border: 1px solid color-mix(in oklab, var(--sun) 26%, transparent); - border-radius: 8px; - font-size: 12px; - font-weight: 600; - color: var(--sun-700); -} -.mod-detail-grid { - display: grid; - grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); - gap: 14px; - padding: 0 16px; - flex: 1; -} -@media (max-width: 720px) { .mod-detail-grid { grid-template-columns: 1fr; } } -.mod-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; } - -.mod-media { display: flex; gap: 12px; flex-wrap: wrap; } -.mod-photo { - width: 120px; height: 120px; max-width: 100%; - border-radius: 10px; - background: - repeating-linear-gradient(45deg, color-mix(in oklab, var(--cat) 18%, var(--paper-2)) 0 10px, var(--paper-2) 10px 20px); - border: 1px solid var(--border-soft); - position: relative; - flex-shrink: 0; - overflow: hidden; -} -.mod-photo-pin { - position: absolute; - left: 50%; top: 50%; - transform: translate(-50%, -50%); - width: 38px; height: 38px; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - filter: blur(0.5px); - opacity: 0.85; -} -.mod-photo-pin img { width: 22px; height: 22px; filter: brightness(0) invert(1); } -.mod-photo-flag { - position: absolute; - bottom: 6px; left: 6px; - display: inline-flex; - align-items: center; - gap: 4px; - background: rgba(26,23,20,0.7); - color: #fff; - font-size: 10px; - font-weight: 700; - padding: 2px 7px; - border-radius: 6px; - backdrop-filter: blur(4px); -} -.mod-media-meta { flex: 1; min-width: 0; } -.mod-media-meta .desc { font-size: 13px; color: var(--ink); line-height: 1.45; text-wrap: pretty; } -.mod-media-meta .row { margin-top: 8px; font-size: 11.5px; color: var(--ink-3); } -.mod-textblock p { font-size: 13.5px; color: var(--ink); line-height: 1.5; margin: 0 0 8px; text-wrap: pretty; } - -.signal-grid { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 8px; -} -.signal { - padding: 10px 12px; - border-radius: 9px; - background: var(--paper-2); - border: 1px solid var(--border-soft); -} -.signal-val { - font-family: var(--font-mono); - font-weight: 700; - font-size: 16px; - letter-spacing: -0.01em; - color: var(--ink); - font-feature-settings: "tnum" 1; -} -.signal-label { font-size: 11px; color: var(--ink-3); margin-top: 2px; font-weight: 600; } -.signal.tone-bad { background: var(--bloom-50); border-color: color-mix(in oklab, var(--bloom) 18%, transparent); } -.signal.tone-bad .signal-val { color: var(--bloom-700); } -.signal.tone-warn { background: var(--sun-50); border-color: color-mix(in oklab, var(--sun) 26%, transparent); } -.signal.tone-warn .signal-val { color: var(--sun-700); } -.signal.tone-ok .signal-val { color: var(--moss-700); } - /* User context block (in moderation + users) */ .user-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .user-head > div { flex: 1; min-width: 0; } @@ -2234,41 +1131,7 @@ img.user-av { object-fit: cover; background: var(--paper-2); } .user-name { font-weight: 700; font-size: 14px; color: var(--ink); } .user-handle { font-size: 11.5px; color: var(--ink-3); } -.user-stats { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 8px; - margin-bottom: 12px; -} -.user-stats.wide { grid-template-columns: repeat(4, 1fr); } -.ustat { - text-align: center; - padding: 10px 4px; - background: var(--paper-2); - border: 1px solid var(--border-soft); - border-radius: 9px; -} -.ustat-n { - display: block; - font-family: var(--font-display); - font-variation-settings: "opsz" 24, "wdth" 90; - font-weight: 700; - font-size: 20px; - letter-spacing: -0.02em; - color: var(--ink); - font-feature-settings: "tnum" 1; -} -.ustat-n.bad { color: var(--bloom-700); } -.ustat-n.warn { color: var(--sun-700); } -.ustat-l { font-size: 10.5px; color: var(--ink-3); font-weight: 600; } .user-meta-rows { display: flex; flex-direction: column; gap: 1px; } -.user-meta-rows.boxed { - background: var(--paper-2); - border: 1px solid var(--border-soft); - border-radius: 9px; - padding: 4px 12px; - margin-bottom: 14px; -} .umr { display: grid; grid-template-columns: auto minmax(0, 1fr); @@ -2284,11 +1147,10 @@ img.user-av { object-fit: cover; background: var(--paper-2); } break them anywhere rather than pushing the panel sideways. */ .umr > span:last-child { text-align: right; min-width: 0; overflow-wrap: anywhere; } .umr > span:last-child a { overflow-wrap: anywhere; } -.user-meta-rows.boxed .umr:last-child { border-bottom: none; } .umr .strong { color: var(--ink); font-weight: 700; } .btn.full { width: 100%; justify-content: center; margin-top: 10px; } -.mod-actions, .user-actions { +.user-actions { display: flex; align-items: center; gap: 8px; @@ -2323,30 +1185,6 @@ img.user-av { object-fit: cover; background: var(--paper-2); } line-height: 1.15; text-wrap: pretty; } -.rep-statusbar { - display: flex; - align-items: center; - gap: 12px; - padding: 10px 16px; - margin: 0 16px 4px; - background: var(--paper-2); - border: 1px solid var(--border-soft); - border-radius: 11px; - flex-wrap: wrap; -} -.rep-statusbar-label { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); } -.rep-submitted { font-size: 11.5px; color: var(--ink-3); font-family: var(--font-mono); } - -.status-seg { display: inline-flex; gap: 4px; background: #fff; border: 1px solid var(--border-soft); border-radius: 9px; padding: 3px; } -.status-seg-btn { - display: inline-flex; align-items: center; gap: 6px; - font-size: 12px; font-weight: 700; color: var(--ink-3); - padding: 5px 11px; border-radius: 6px; white-space: nowrap; - transition: background 120ms var(--ease-out), color 120ms var(--ease-out); -} -.status-seg-btn:hover { color: var(--ink); } -.status-seg-btn.on { background: var(--hue-50); color: var(--hue-700); } - .rep-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); @@ -2451,16 +1289,6 @@ img.user-av { object-fit: cover; background: var(--paper-2); } /* Follow-up composer */ .rep-to { display: flex; gap: 6px; margin-bottom: 8px; } -.rep-to-btn { - flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; - font-size: 12px; font-weight: 700; color: var(--ink-3); - padding: 7px 10px; border-radius: 8px; - background: var(--paper-2); border: 1px solid var(--border-soft); - transition: background 120ms var(--ease-out), color 120ms var(--ease-out), border-color 120ms var(--ease-out); -} -.rep-to-btn:hover:not(:disabled) { color: var(--ink); } -.rep-to-btn.on { background: #fff; color: var(--sky-700); border-color: color-mix(in oklab, var(--sky) 32%, transparent); box-shadow: var(--shadow-1); } -.rep-to-btn:disabled { opacity: 0.45; cursor: not-allowed; } .rep-followup { width: 100%; resize: vertical; min-height: 64px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; @@ -2555,8 +1383,6 @@ img.user-av { object-fit: cover; background: var(--paper-2); } background: var(--paper); border: 1px solid var(--border-soft); } .dsc-reaction.mine { background: var(--bloom-50); color: var(--bloom-700); border-color: color-mix(in oklab, var(--bloom) 20%, transparent); } -.dsc-msg-replies { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ink-3); font-weight: 600; } -.dsc-msg-replies svg { color: var(--ink-4); } /* Operator composer under the report chat (same treatment as the Mail reply composer). */ .dsc-composer { border-top: 1px solid var(--border-soft); padding: 12px 14px 14px; } @@ -2647,7 +1473,7 @@ img.user-av { object-fit: cover; background: var(--paper-2); } .udh-sub { font-size: 12.5px; color: var(--ink-3); display: flex; gap: 6px; align-items: center; margin-top: 3px; } .udh-sub .sep { color: var(--ink-4); } .udh-badges { display: flex; gap: 6px; flex-wrap: wrap; } -.user-detail .user-stats, .user-detail .user-meta-rows, .user-detail .mod-auto { margin-left: 16px; margin-right: 16px; } +.user-detail .user-meta-rows { margin-left: 16px; margin-right: 16px; } /* -- User profile: info + reports/events/messages -------- */ .profile-meta { @@ -2716,8 +1542,6 @@ button.prow-main { color: inherit; font: inherit; background: none; border: 0; p .prow-title { font-weight: 600; font-size: 13px; color: var(--ink); line-height: 1.35; text-wrap: pretty; } .prow-meta { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .prow-age { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); font-weight: 600; flex-shrink: 0; white-space: nowrap; } -.profile-empty { padding: 28px 0; text-align: center; font-size: 13px; color: var(--ink-3); } - /* ========================================================= Mail page @@ -2764,21 +1588,6 @@ button.prow-main { color: inherit; font: inherit; background: none; border: 0; p } .mbx.active .mbx-c { color: var(--sky-700); } -/* Sending-domain health chips (the row beneath the deliverability strip). */ -.mail-domains { display: flex; flex-wrap: wrap; gap: 8px; } -.mail-domain { - display: inline-flex; - align-items: center; - gap: 8px; - padding: 6px 10px; - border: 1px solid var(--border-soft); - border-radius: 9px; - background: #fff; - box-shadow: var(--shadow-1); -} -.mail-domain-name { font-size: 11.5px; } -.mail-domain-note { font-size: 12px; color: var(--ink-3); } - /* Inbox attachment links (the reader's download row). */ .mail-attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } @@ -3034,50 +1843,6 @@ button.prow-main { color: inherit; font: inherit; background: none; border: 0; p .dialog-foot { justify-content: flex-end; } .btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; } -/* Slide-up sheet (manual contact form) */ -.sheet-overlay { - position: fixed; - inset: 0; - background: rgba(26,23,20,0.28); - backdrop-filter: blur(3px); - z-index: 72; - display: flex; - align-items: center; - justify-content: center; - padding: 20px; - animation: panelFadeIn 200ms ease-out both; -} -@keyframes panelFadeIn { from { opacity: 0; } to { opacity: 1; } } -.sheet { - background: var(--paper); - border-radius: var(--radius-xl, 28px); - width: min(540px, 100%); - max-height: 88vh; - display: grid; - grid-template-rows: auto 1fr auto; - box-shadow: var(--shadow-4); - overflow: hidden; - animation: sheetRise 320ms var(--ease-spring) both; -} -@keyframes sheetRise { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } -.sheet-head { - display: flex; - align-items: flex-start; - justify-content: space-between; - padding: 18px 20px 14px; - border-bottom: 1px solid var(--border-soft); -} -.sheet-head h2 { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.015em; margin: 0; } -.sheet-head .crumb { font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; margin-bottom: 4px; } -.sheet-head .closebtn { - width: 32px; height: 32px; border-radius: 7px; background: transparent; border: 1px solid transparent; color: var(--ink-2); - display: inline-flex; align-items: center; justify-content: center; -} -.sheet-head .closebtn:hover { background: var(--paper-2); } -.sheet-body { padding: 16px 20px; overflow-y: auto; } -.sheet-intro { font-size: 13px; color: var(--ink-3); line-height: 1.5; margin: 0 0 16px; } -.sheet-foot { padding: 14px 20px; border-top: 1px solid var(--border-soft); display: flex; align-items: center; gap: 8px; background: #fff; } - /* ========================================================= Analytics ========================================================= */ @@ -3188,86 +1953,6 @@ button.prow-main { color: inherit; font: inherit; background: none; border: 0; p .contrib-text { display: flex; flex-direction: column; min-width: 0; } .contrib-city { font-size: 11px; color: var(--ink-3); } -/* ========================================================= - Service health + Settings - ========================================================= */ -.health-grid { - display: grid; - grid-template-columns: repeat(4, minmax(0, 1fr)); - gap: var(--gutter); -} -@media (max-width: 880px) { .health-grid { grid-template-columns: repeat(2, 1fr); } } -@media (max-width: 480px) { .health-grid { grid-template-columns: 1fr; } } -.health-card { - background: #fff; - border: 1px solid var(--border-soft); - border-radius: var(--card-radius); - box-shadow: var(--shadow-1); - padding: 14px 16px; -} -.health-card.warn { border-color: color-mix(in oklab, var(--sun) 30%, transparent); background: linear-gradient(180deg, var(--sun-50) 0%, #fff 60%); } -.health-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } -.health-name { font-weight: 700; font-size: 13.5px; color: var(--ink); } -.health-val { - font-family: var(--font-display); - font-variation-settings: "opsz" 24, "wdth" 90; - font-weight: 700; - font-size: 20px; - letter-spacing: -0.02em; - color: var(--ink); -} -.health-status { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; font-weight: 600; } -.health-card.warn .health-status { color: var(--sun-700); } - -.settings-grid { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: var(--gutter); -} -@media (max-width: 720px) { .settings-grid { grid-template-columns: 1fr; } } -.setting-row { - display: flex; - align-items: center; - justify-content: space-between; - gap: 14px; - padding: 11px 0; - border-bottom: 1px solid var(--border-soft); -} -.setting-row:last-child { border-bottom: none; } -.setting-label { font-size: 13px; font-weight: 600; color: var(--ink); } -.setting-hint { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; max-width: 40ch; } -.seg { display: inline-flex; background: var(--paper-2); border: 1px solid var(--border-soft); border-radius: 8px; padding: 2px; gap: 2px; } -.seg-btn { - padding: 5px 12px; - border-radius: 6px; - border: none; - background: transparent; - font-size: 12px; - font-weight: 600; - color: var(--ink-3); -} -.seg-btn.active { background: #fff; color: var(--ink); box-shadow: var(--shadow-1); } -.toggle { - width: 38px; height: 22px; - border-radius: 999px; - background: var(--ink-4); - position: relative; - cursor: pointer; - transition: background 160ms var(--ease-out); - flex-shrink: 0; -} -.toggle.on { background: var(--moss); } -.toggle-knob { - position: absolute; - top: 2px; left: 2px; - width: 18px; height: 18px; - border-radius: 50%; - background: #fff; - box-shadow: var(--shadow-1); - transition: transform 160ms var(--ease-spring); -} -.toggle.on .toggle-knob { transform: translateX(16px); } - /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { @@ -3368,15 +2053,6 @@ button.prow-main { color: inherit; font: inherit; background: none; border: 0; p display: flex; align-items: center; justify-content: center; } .backbar .spacer { flex: 1; } -.backbar-brand { display: flex; align-items: center; gap: 7px; opacity: 0.85; } -.backbar-brand img { width: 18px; height: 18px; } -.backbar-brand > span:not(.backbar-tag) { font-family: var(--font-display); font-weight: 700; font-size: 14px; } -.backbar-tag { - font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; - color: var(--ink-3); background: var(--paper-2); border: 1px solid var(--border-soft); - padding: 1px 5px; border-radius: 4px; -} -@media (max-width: 560px) { .backbar-brand { display: none; } } /* Back bar never overflows: the section name + operator name truncate, the buttons never shrink, and on phones the button labels collapse to their icons. */ .backbar { min-width: 0; } @@ -3397,41 +2073,6 @@ button.prow-main { color: inherit; font: inherit; background: none; border: 0; p ========================================================= */ .hub { display: flex; flex-direction: column; gap: 20px; } -/* -- Masthead --------------------------------------------- */ -.hub-head { display: flex; flex-direction: column; gap: 14px; padding: 4px 2px 0; } -.hub-mast { display: flex; align-items: center; gap: 8px; } -.hub-bug { width: 22px; height: 22px; } -.hub-word { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; } -.hub-tag { - font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; - color: var(--ink-3); background: var(--paper-2); border: 1px solid var(--border-soft); - padding: 1px 6px; border-radius: 5px; -} -.hub-date { margin-left: auto; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); } -.hub-greetrow { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; } -.hub-h1 { - font-family: var(--font-display); - font-weight: 700; - font-size: 32px; - letter-spacing: -0.028em; - line-height: 1; - margin: 0; -} -.hub-chips { display: flex; gap: 8px; flex-wrap: wrap; } -.hub-chip { - display: inline-flex; align-items: center; gap: 6px; - height: 34px; padding: 0 14px; - border-radius: 999px; - border: 1px solid var(--border-soft); - background: #fff; - font-size: 12.5px; font-weight: 600; color: var(--ink-2); - transition: background 120ms var(--ease-out), border-color 120ms var(--ease-out), transform 120ms var(--ease-out); - white-space: nowrap; -} -.hub-chip:hover { background: var(--hue-50); border-color: color-mix(in oklab, var(--hue) 32%, transparent); transform: translateY(-1px); } -.hub-chip-n { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--hue-700); font-feature-settings: "tnum" 1; } -.hub-chip.quiet .hub-chip-n { color: var(--ink-3); } - /* -- Spark ------------------------------------------------ */ .hub-spark { display: flex; align-items: flex-end; gap: 3px; height: 38px; width: 116px; flex-shrink: 0; } .hub-spark-bar { @@ -3571,16 +2212,6 @@ button.prow-main { color: inherit; font: inherit; background: none; border: 0; p margin-top: -4px; } } -.stile-status { - margin-left: auto; - display: inline-flex; align-items: center; gap: 5px; - font-size: 11px; font-weight: 700; color: var(--ink-3); white-space: nowrap; -} -.stile-status .led { width: 6px; height: 6px; border-radius: 50%; } -.stile-status.tone-alert { color: var(--bloom-700); } .stile-status.tone-alert .led { background: var(--bloom); } -.stile-status.tone-warn { color: var(--sun-700); } .stile-status.tone-warn .led { background: var(--sun-600); } -.stile-status.tone-ok { color: var(--moss-700); } .stile-status.tone-ok .led { background: var(--moss); } -.stile-mid { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; } .stile-lead { display: flex; align-items: baseline; gap: 7px; min-width: 0; flex: 1 1 auto; flex-wrap: wrap; row-gap: 4px; } .stile-num { font-family: var(--font-display); @@ -3626,17 +2257,8 @@ button.prow-main { color: inherit; font: inherit; background: none; border: 0; p } .smg-delta { display: inline-flex; align-items: center; gap: 1px; font-size: 10px; font-weight: 700; color: var(--moss-700); } .smg-k { font-size: 10.5px; color: var(--ink-3); font-weight: 600; margin-top: 2px; } -.stile-catmini { display: flex; flex-direction: column; gap: 6px; } -.scm-row { display: grid; grid-template-columns: 8px 58px 1fr 26px; gap: 8px; align-items: center; } -.scm-dot { width: 8px; height: 8px; border-radius: 50%; } -.scm-name { font-size: 11.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } -.scm-track { height: 5px; background: var(--paper-2); border-radius: 999px; overflow: hidden; position: relative; } -.scm-track span { position: absolute; inset: 0 auto 0 0; border-radius: 999px; } -.scm-n { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; color: var(--ink-2); text-align: right; font-feature-settings: "tnum" 1; } - /* In-card entry list */ -.stile-listwrap { display: flex; flex-direction: column; flex: 1; min-height: 0; } .stile-list { display: flex; flex-direction: column; } .slr { display: flex; align-items: center; gap: 9px; @@ -3666,32 +2288,6 @@ button.prow-main { color: inherit; font: inherit; background: none; border: 0; p .slr-age { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); font-weight: 600; flex-shrink: 0; white-space: nowrap; } .slr-arr { color: var(--ink-4); flex-shrink: 0; display: flex; opacity: 0; transition: opacity 240ms ease, transform 240ms cubic-bezier(0.25, 0.8, 0.3, 1); transform: translateX(-4px); } .slr:hover .slr-arr { opacity: 1; transform: none; color: var(--hue-700); } -.slr-more { - display: flex; - align-items: center; - width: 100%; - text-align: left; - padding: 8px 5px 2px; - border: none; - font-size: 11.5px; - font-weight: 600; - color: var(--ink-3); - background: none; - cursor: pointer; - white-space: nowrap; - transition: color 160ms ease; -} -.slr-more:hover { color: var(--hue-700); } -.stile-peek { - display: flex; align-items: center; gap: 10px; - padding: 9px 10px; - background: var(--paper-2); - border: 1px solid var(--border-soft); - border-radius: 10px; -} -.stile-peek .peek-body { min-width: 0; flex: 1; } -.peek-title { font-weight: 700; font-size: 12.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } -.peek-meta { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; } .stile-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border-soft); } .stile-foot.opens { cursor: pointer; margin: auto -6px 0; padding: 8px 6px 2px; border-radius: 0 0 8px 8px; @@ -3705,8 +2301,6 @@ button.prow-main { color: inherit; font: inherit; background: none; border: 0; p click away) instead of pushing the CTA out of the tile. */ .stile-moreinline { font-size: 11.5px; font-weight: 600; color: var(--ink-3); white-space: nowrap; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .spacer-flex { flex: 1; min-width: 0; } -.stile-total { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; } -.stile-total b { color: var(--ink); font-weight: 700; font-feature-settings: "tnum" 1; } .stile-stats { display: flex; gap: 14px; min-width: 0; flex-wrap: wrap; } .stile-stat { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; } .stile-stat b { font-weight: 700; color: var(--ink); font-feature-settings: "tnum" 1; } @@ -3722,40 +2316,6 @@ button.prow-main { color: inherit; font: inherit; background: none; border: 0; p .stile:hover .stile-cta { opacity: 1; transform: translateX(2px); } /* -- Layout B: Triage ------------------------------------- */ -.hub-triage { - display: grid; - grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); - gap: var(--gutter); - align-items: start; -} -@media (max-width: 980px) { .hub-triage { grid-template-columns: 1fr; } } -.triage-list { display: flex; flex-direction: column; } -.triage-row { - display: flex; align-items: center; gap: 12px; - padding: 12px 14px 12px 17px; - border-bottom: 1px solid var(--border-soft); - background: transparent; width: 100%; text-align: left; - cursor: pointer; position: relative; - transition: background 120ms var(--ease-out); -} -.triage-row:last-child { border-bottom: none; } -.triage-row:hover { background: var(--paper-2); } -.triage-stripe { position: absolute; left: 0; top: 11px; bottom: 11px; width: 3px; border-radius: 0 2px 2px 0; background: var(--hue); } -.triage-body { flex: 1; min-width: 0; } -.triage-top { display: flex; align-items: center; gap: 8px; } -.triage-title { font-weight: 700; font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; letter-spacing: -0.005em; } -.triage-tag { - font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; - padding: 1px 7px; border-radius: 999px; - background: var(--hue-50); color: var(--hue-700); flex-shrink: 0; - border: 1px solid color-mix(in oklab, var(--hue) 16%, transparent); -} -.triage-meta { font-size: 12px; color: var(--ink-3); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } -.triage-trail { display: flex; align-items: center; gap: 8px; color: var(--ink-4); flex-shrink: 0; } -.triage-age { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); font-weight: 600; white-space: nowrap; } -.triage-row:hover .triage-trail { color: var(--hue-700); } -.triage-rail { display: flex; flex-direction: column; gap: var(--gutter); } -.launch-list { display: flex; flex-direction: column; } .launch-row { display: flex; align-items: center; gap: 11px; padding: 11px 14px; @@ -3778,85 +2338,8 @@ button.prow-main { color: inherit; font: inherit; background: none; border: 0; p .launch-sub.tone-alert { color: var(--bloom-700); } .launch-sub.tone-warn { color: var(--sun-700); } .launch-sub.tone-ok { color: var(--moss-700); } -.launch-num { font-family: var(--font-display); font-variation-settings: "wdth" 90; font-weight: 700; font-size: 20px; letter-spacing: -0.02em; color: var(--ink); font-feature-settings: "tnum" 1; } .launch-row > svg:last-child { color: var(--ink-4); flex-shrink: 0; } -/* -- Layout C: Bands -------------------------------------- */ -.hub-bands { display: flex; flex-direction: column; gap: var(--gutter); } -.bands-top { - display: grid; - grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); - gap: var(--gutter); - align-items: stretch; -} -@media (max-width: 980px) { .bands-top { grid-template-columns: 1fr; } } -.bands-mapwrap { display: flex; } -.bands-mapwrap .card { flex: 1; } -.bands-mapwrap .live-map-card { min-height: 268px; } -.bands-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); } -@media (max-width: 480px) { .bands-stats { grid-template-columns: 1fr 1fr; } } -.bands-stat { - background: #fff; border: 1px solid var(--border-soft); - border-radius: var(--card-radius); box-shadow: var(--shadow-1); - padding: 13px 15px; display: flex; flex-direction: column; gap: 3px; justify-content: center; -} -.bands-stat-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); } -.bands-stat-v { - font-family: var(--font-display); - font-variation-settings: "wdth" 88; - font-weight: 700; font-size: 27px; letter-spacing: -0.025em; line-height: 1; - font-feature-settings: "tnum" 1; color: var(--ink); -} -.bands-stat-sub { font-size: 11.5px; color: var(--ink-3); font-weight: 500; } -.bands-stat-sub.tone-ok { color: var(--moss-700); font-weight: 600; } -.bands-list { display: flex; flex-direction: column; } -.band { - display: grid; - grid-template-columns: 40px minmax(160px, 1.5fr) 130px minmax(140px, 1fr) 130px 24px; - align-items: center; gap: 16px; - padding: 16px 16px 16px 18px; - border-bottom: 1px solid var(--border-soft); - position: relative; cursor: pointer; width: 100%; text-align: left; - transition: background 120ms var(--ease-out); -} -.band:last-child { border-bottom: none; } -.band:hover { background: var(--hue-50); } -.band-stripe { position: absolute; left: 0; top: 13px; bottom: 13px; width: 3px; border-radius: 0 2px 2px 0; background: var(--hue); opacity: 0.5; transition: opacity 120ms var(--ease-out); } -.band:hover .band-stripe { opacity: 1; } -.band-ico { - width: 40px; height: 40px; border-radius: 11px; - background: var(--hue-50); color: var(--hue-700); - display: flex; align-items: center; justify-content: center; - transition: background 120ms var(--ease-out); -} -.band:hover .band-ico { background: #fff; } -.band-id { min-width: 0; } -.band-label { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.015em; } -.band-blurb { font-size: 12px; color: var(--ink-3); margin-top: 2px; line-height: 1.35; text-wrap: pretty; } -.band-lead { display: flex; flex-direction: column; gap: 2px; } -.band-num { font-family: var(--font-display); font-variation-settings: "wdth" 86; font-weight: 700; font-size: 30px; line-height: 0.85; letter-spacing: -0.03em; font-feature-settings: "tnum" 1; } -.band-unit { font-size: 11px; color: var(--ink-3); font-weight: 600; } -.band-stats { display: flex; gap: 18px; } -.band-stat { display: flex; flex-direction: column; gap: 1px; } -.band-stat-v { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; font-feature-settings: "tnum" 1; color: var(--ink); } -.band-stat-v.alert { color: var(--bloom-700); } -.band-stat-v.warn { color: var(--sun-700); } -.band-stat-k { font-size: 10.5px; color: var(--ink-3); font-weight: 600; } -.band-side { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; } -.band-status { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--ink-3); white-space: nowrap; } -.band-status .led { width: 6px; height: 6px; border-radius: 50%; } -.band-status.tone-alert { color: var(--bloom-700); } .band-status.tone-alert .led { background: var(--bloom); } -.band-status.tone-warn { color: var(--sun-700); } .band-status.tone-warn .led { background: var(--sun-600); } -.band-status.tone-ok { color: var(--moss-700); } .band-status.tone-ok .led { background: var(--moss); } -.band-go { color: var(--ink-4); display: flex; justify-content: flex-end; } -.band:hover .band-go { color: var(--hue-700); } -@media (max-width: 900px) { - .band { display: flex; align-items: center; gap: 14px; } - .band-id { flex: 1; } - .band-blurb { display: none; } - .band-stats, .band-side { display: none; } -} - /* ========================================================= Cross-entity clickability affordances (A1) NOTE to following agents: keep new CSS in its own block below this one. From f5bda57752f63f9592574020f85242efeb596c8b Mon Sep 17 00:00:00 2001 From: Theo Date: Thu, 24 Sep 2026 07:14:19 +0000 Subject: [PATCH 2/8] styles: delete dead colors-and-type utility classes --- apps/admin/src/styles/colors-and-type.css | 111 +--------------------- 1 file changed, 5 insertions(+), 106 deletions(-) diff --git a/apps/admin/src/styles/colors-and-type.css b/apps/admin/src/styles/colors-and-type.css index 737b50d..0244f27 100644 --- a/apps/admin/src/styles/colors-and-type.css +++ b/apps/admin/src/styles/colors-and-type.css @@ -199,71 +199,6 @@ --dur-4: 500ms; } -/* ========================================================================= - GRAVITY ANIMATION THEME - Things fall into place. Things fall off the screen. Quick + non-invasive. - Implemented as TRANSITIONS (not @keyframes) for mounted-iframe robustness. - ========================================================================= */ - -.gravity-in, -.gravity-pin, -.gravity-cascade > * { - opacity: 0; - transform: translateY(-14px); - transition: opacity 280ms cubic-bezier(0.22, 1, 0.36, 1), - transform 280ms cubic-bezier(0.5, 0, 0.3, 1.35); - will-change: transform, opacity; -} -.gravity-pin { - transform: translateY(-26px) scale(0.92); - transition: opacity 240ms cubic-bezier(0.22, 1, 0.36, 1), - transform 420ms cubic-bezier(0.5, 0, 0.3, 1.35); -} -.gravity-sheet { - transform: translateY(100%); - transition: transform 380ms cubic-bezier(0.34, 1.56, 0.64, 1); - will-change: transform; -} - -/* Entered: rested state */ -.gravity-in.gv-entered, -.gravity-pin.gv-entered, -.gravity-cascade.gv-entered > * { - opacity: 1; - transform: translateY(0); -} -.gravity-pin.gv-entered { - transform: translateY(0) scale(1); -} -.gravity-sheet.gv-entered { - transform: translateY(0); -} - -/* Cascade stagger via transition-delay (animation-delay would be wrong here) */ -.gravity-cascade > *:nth-child(1) { transition-delay: 0ms; } -.gravity-cascade > *:nth-child(2) { transition-delay: 40ms; } -.gravity-cascade > *:nth-child(3) { transition-delay: 80ms; } -.gravity-cascade > *:nth-child(4) { transition-delay: 120ms; } -.gravity-cascade > *:nth-child(5) { transition-delay: 160ms; } -.gravity-cascade > *:nth-child(6) { transition-delay: 200ms; } -.gravity-cascade > *:nth-child(7) { transition-delay: 240ms; } -.gravity-cascade > *:nth-child(8) { transition-delay: 280ms; } -.gravity-cascade > *:nth-child(9) { transition-delay: 320ms; } -.gravity-cascade > *:nth-child(n+10) { transition-delay: 360ms; } - -/* Exit utility - flip to this class to drop off-screen */ -.gravity-out { - opacity: 0 !important; - transform: translateY(28px) !important; - transition: opacity 180ms ease-in, transform 220ms ease-in !important; -} - -@media (prefers-reduced-motion: reduce) { - .gravity-in, .gravity-pin, .gravity-sheet, .gravity-cascade > * { - opacity: 1; transform: none; transition: none; - } -} - /* ========================================================================= SEMANTIC TYPE STYLES Apply directly to elements OR use as utility class. @@ -279,17 +214,7 @@ html, body { text-rendering: optimizeLegibility; } -.display, h1.display { - font-family: var(--font-display); - font-size: var(--fs-64); - line-height: var(--lh-tight); - letter-spacing: var(--tracking-tight); - font-weight: 700; - font-variation-settings: "opsz" 72, "wdth" 95; - color: var(--fg-1); -} - -h1, .h1 { +h1 { font-family: var(--font-display); font-size: var(--fs-48); line-height: var(--lh-tight); @@ -299,7 +224,7 @@ h1, .h1 { color: var(--fg-1); } -h2, .h2 { +h2 { font-family: var(--font-display); font-size: var(--fs-38); line-height: var(--lh-snug); @@ -308,7 +233,7 @@ h2, .h2 { font-variation-settings: "opsz" 38, "wdth" 95; } -h3, .h3 { +h3 { font-family: var(--font-display); font-size: var(--fs-30); line-height: var(--lh-snug); @@ -317,7 +242,7 @@ h3, .h3 { font-variation-settings: "opsz" 30, "wdth" 100; } -h4, .h4 { +h4 { font-family: var(--font-display); font-size: var(--fs-24); line-height: var(--lh-snug); @@ -325,19 +250,13 @@ h4, .h4 { font-variation-settings: "opsz" 24, "wdth" 100; } -h5, .h5 { +h5 { font-family: var(--font-body); font-size: var(--fs-20); line-height: var(--lh-snug); font-weight: 700; } -.lead { - font-size: var(--fs-18); - line-height: var(--lh-base); - color: var(--fg-2); -} - p, .body { font-size: var(--fs-16); line-height: var(--lh-base); @@ -345,18 +264,6 @@ p, .body { text-wrap: pretty; } -.body-sm { - font-size: var(--fs-14); - line-height: var(--lh-base); - color: var(--fg-2); -} - -.caption { - font-size: var(--fs-13); - line-height: var(--lh-snug); - color: var(--fg-3); -} - .eyebrow { font-size: var(--fs-12); font-weight: 700; @@ -365,14 +272,6 @@ p, .body { color: var(--fg-3); } -.num, .stat { - font-family: var(--font-display); - font-variation-settings: "opsz" 48, "wdth" 85; /* narrower for stats */ - font-weight: 700; - letter-spacing: -0.03em; - font-feature-settings: "tnum" 1, "lnum" 1; -} - code, .mono { font-family: var(--font-mono); font-size: 0.92em; From c84fd0e05dde28175dad11d7220e1b2c0f2ccc0a Mon Sep 17 00:00:00 2001 From: Theo Date: Thu, 24 Sep 2026 07:14:19 +0000 Subject: [PATCH 3/8] styles: delete the dead op-login-error rule --- apps/admin/src/styles/app.css | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/apps/admin/src/styles/app.css b/apps/admin/src/styles/app.css index 31c800f..7006385 100644 --- a/apps/admin/src/styles/app.css +++ b/apps/admin/src/styles/app.css @@ -115,16 +115,6 @@ .op-login-submit { margin-top: 2px; } -.op-login-error { - color: var(--bloom-700); - background: var(--bloom-50); - border: 1px solid color-mix(in oklab, var(--bloom) 25%, transparent); - border-radius: 8px; - padding: 8px 11px; - font-size: 12.5px; - font-weight: 600; - margin: 4px 0 0; -} /* -- App-level loading / error / empty states (data hooks) ---------------- */ /* Reuse .empty-state from the design for empty + error; these add a spinner row and a skeleton shimmer for loading. */ From b7f1ccfd50eff46d1175fd8cf2c3ae1d978b0ff5 Mon Sep 17 00:00:00 2001 From: Theo Date: Thu, 24 Sep 2026 07:39:01 +0000 Subject: [PATCH 4/8] styles: merge duplicate selectors and identical rule bodies --- apps/admin/src/styles/admin.css | 145 +++++++--------------- apps/admin/src/styles/app.css | 13 +- apps/admin/src/styles/colors-and-type.css | 8 ++ 3 files changed, 59 insertions(+), 107 deletions(-) diff --git a/apps/admin/src/styles/admin.css b/apps/admin/src/styles/admin.css index 067013a..642119b 100644 --- a/apps/admin/src/styles/admin.css +++ b/apps/admin/src/styles/admin.css @@ -5,8 +5,7 @@ @import url('./colors-and-type.css'); * { box-sizing: border-box; } -html, body { margin: 0; padding: 0; } -html, body { min-height: 100%; } +html, body { margin: 0; padding: 0; min-height: 100%; } /* Always reserve the vertical scrollbar gutter so the document never re-centers .main when a page's height crosses the viewport (e.g. switching the Mail folder Outreach -> Inbox drops the deliverability strip): without this the scrollbar appears/disappears and the centered content jumps a @@ -14,11 +13,7 @@ html, body { min-height: 100%; } html { scrollbar-gutter: stable; } body { - font-family: var(--font-body); font-size: var(--fs-14); - color: var(--ink); - background: var(--paper); - -webkit-font-smoothing: antialiased; font-feature-settings: "ss01" 1, "cv11" 1; } @@ -26,26 +21,15 @@ button { font-family: inherit; cursor: pointer; } button:focus-visible { outline: none; box-shadow: var(--ring); } :focus-visible { outline: none; } -/* -- Design knobs ---------------------------------------- */ -:root { - --sidebar-w: 220px; - --sidebar-w-collapsed: 56px; - --topbar-h: 52px; - --gutter: 16px; - --card-radius: 12px; - --row-pad-y: 11px; - --row-pad-x: 14px; -} - -/* --------------------------------------------------------- - Main work area - --------------------------------------------------------- */ .main { - padding: var(--gutter); display: flex; flex-direction: column; gap: var(--gutter); min-width: 0; + max-width: 1600px; + margin: 0 auto; + width: 100%; + padding: var(--gutter) clamp(22px, 2.4vw, 56px) 72px; } /* Page header */ @@ -330,7 +314,6 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } .map-active-card .mac-pin.is-routed { background: #8A8378; } .map-active-card .mac-pin.is-needs { background: #E5564B; } .map-active-card .mac-pin.is-event { background: #E5AE1C; } -.map-active-card .mac-pin img { width: 100%; height: 100%; object-fit: contain; } .map-active-card .mac-body { min-width: 0; flex: 1; } .map-active-card .mac-title { font-weight: 700; font-size: 13px; color: var(--ink); } .map-active-card .mac-sub { font-size: 11.5px; color: var(--ink-3); display: flex; gap: 5px; align-items: center; margin-top: 1px; } @@ -350,6 +333,7 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } cursor: pointer; transition: background 100ms var(--ease-out); align-items: center; + position: relative; } .qrow:last-child { border-bottom: none; } .qrow:hover { background: var(--paper-2); } @@ -357,17 +341,14 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } .qrow.selected { background: linear-gradient(90deg, color-mix(in oklab, var(--bloom) 8%, transparent) 0%, transparent 100%); } -.qrow.selected::before { +.qrow.selected::before, +.mail-row.selected::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2.5px; background: var(--bloom); } -.qrow { - position: relative; -} - .qrow .leading { width: 32px; height: 32px; display: flex; @@ -384,10 +365,6 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } border-radius: 8px; padding: 3px; } -.qrow .leading.has-pin img { - width: 100%; height: 100%; - object-fit: contain; -} .qrow .leading.has-thumb { position: relative; background: var(--paper-2); @@ -402,11 +379,6 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } height: 3px; background: var(--cat, transparent); } -.qrow .leading.has-thumb img { - width: 100%; height: 100%; - object-fit: cover; - display: block; -} .qrow .body { min-width: 0; } .qrow .body .top { @@ -782,6 +754,9 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } } .field:last-child { margin-bottom: 0; } .field .lbl { + display: flex; + align-items: center; + gap: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; @@ -812,7 +787,16 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } box-shadow: var(--ring); } .field textarea { resize: vertical; min-height: 56px; } -.field .hint { font-size: 11px; color: var(--ink-3); margin-top: 1px; } +.field .hint { + display: flex; + align-items: flex-start; + gap: 4px; + font-size: 11px; + line-height: 1.45; + color: var(--ink-3); + margin-top: 1px; + overflow-wrap: anywhere; +} /* -- Per-report-type routing contacts --------------------- */ .ccat-grid { @@ -833,7 +817,6 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } } .ccat-cell-head { display: flex; align-items: center; gap: 8px; } .ccat-pin { width: 22px; height: 22px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } -.ccat-pin img { width: 100%; height: 100%; object-fit: contain; } .ccat-label { font-weight: 700; font-size: 12.5px; color: var(--ink); letter-spacing: -0.005em; } .sub-caption { font-size: 11px; color: var(--ink-3); line-height: 1.4; margin-top: -2px; overflow-wrap: anywhere; } .ccat-count { @@ -931,7 +914,7 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } } /* Util */ -.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; } +.mono { font-feature-settings: "tnum" 1; } .muted { color: var(--ink-3); } .row-flex { display: flex; align-items: center; gap: 8px; } @@ -1156,15 +1139,14 @@ img.user-av { object-fit: cover; background: var(--paper-2); } gap: 8px; padding: 14px 16px; border-top: 1px solid var(--border-soft); - margin-top: 14px; + margin-top: 0; flex-wrap: wrap; } -.user-actions { margin-top: 0; } /* ========================================================= Reports detail ========================================================= */ -.rep-detail { display: flex; flex-direction: column; height: 100%; } +.rep-detail, .user-detail, .mail-reader { display: flex; flex-direction: column; height: 100%; } .rep-head { display: flex; align-items: center; @@ -1172,7 +1154,12 @@ img.user-av { object-fit: cover; background: var(--paper-2); } padding: 16px 16px 12px; } .rep-head-pin { width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } -.rep-head-pin img { width: 100%; height: 100%; object-fit: contain; } +.map-active-card .mac-pin img, +.qrow .leading.has-pin img, +.ccat-pin img, +.rep-head-pin img, +.prow-pin img, +.peek-pin img { width: 100%; height: 100%; object-fit: contain; } .rep-head-text { flex: 1; min-width: 0; } .rep-head-text .crumb { font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.05em; @@ -1259,7 +1246,7 @@ img.user-av { object-fit: cover; background: var(--paper-2); } background: var(--paper-2); color: var(--ink-3); border: 1px solid var(--border-soft); position: relative; z-index: 1; } -.rep-tl-row.kind-confirm .rep-tl-ico { background: var(--moss-50); color: var(--moss-700); border-color: color-mix(in oklab, var(--moss) 20%, transparent); } +.rep-tl-row.kind-confirm .rep-tl-ico, .rep-tl-row.kind-done .rep-tl-ico { background: var(--moss-50); color: var(--moss-700); border-color: color-mix(in oklab, var(--moss) 20%, transparent); } .rep-tl-row.kind-warn .rep-tl-ico { background: var(--sun-50); color: var(--sun-700); border-color: color-mix(in oklab, var(--sun) 26%, transparent); } .rep-tl-row.kind-followup .rep-tl-ico { background: var(--sky-50); color: var(--sky-700); border-color: color-mix(in oklab, var(--sky) 20%, transparent); } @@ -1374,6 +1361,7 @@ img.user-av { object-fit: cover; background: var(--paper-2); } display: flex; align-items: center; justify-content: center; background: var(--paper); border: 1px solid var(--border-soft); color: var(--ink-4); } +.qrow .leading.has-thumb img, .dsc-msg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .dsc-msg-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .dsc-msg-reactions { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; } @@ -1394,7 +1382,8 @@ img.user-av { object-fit: cover; background: var(--paper-2); } thumb/glyph, a title, a status/kind sub-row, and an address/organizer line. Used on both the event detail ("Linked reports") and the report detail ("Linked events"). */ .evt-linked-list { display: flex; flex-direction: column; gap: 8px; } -.evt-linked-card { +.evt-linked-card, +.evt-pick-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 10px; cursor: pointer; background: var(--paper-2); border: 1px solid var(--border-soft); @@ -1408,9 +1397,9 @@ img.user-av { object-fit: cover; background: var(--paper-2); } } .evt-linked-thumb.hue-sun { background: var(--sun-50, #FFF6DC); color: var(--sun-700); border-color: transparent; } .evt-linked-thumb img { width: 100%; height: 100%; object-fit: cover; } -.evt-linked-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } -.evt-linked-title { font-size: 13px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.evt-linked-sub { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-3); flex-wrap: wrap; } +.evt-linked-body, .evt-pick-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } +.evt-linked-title, .evt-pick-title { font-size: 13px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.evt-linked-sub, .evt-pick-sub { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-3); flex-wrap: wrap; } .evt-linked-sub .sep { color: var(--ink-4); } .evt-linked-cat { font-weight: 600; } .evt-linked-addr { font-size: 11px; color: var(--ink-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @@ -1435,12 +1424,6 @@ img.user-av { object-fit: cover; background: var(--paper-2); } .evt-pick-search { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 10px; border: 1px solid var(--border); color: var(--ink-3); } .evt-pick-search input { flex: 1; border: none; outline: none; background: none; font-family: var(--font-body); font-size: 13.5px; color: var(--ink); } .evt-pick-list { display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow-y: auto; } -.evt-pick-row { - display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; - padding: 8px 10px; border-radius: 10px; cursor: pointer; - background: var(--paper-2); border: 1px solid var(--border-soft); - transition: border-color 120ms var(--ease-out), background 120ms var(--ease-out); -} .evt-pick-row:hover { border-color: var(--border); background: var(--paper); } .evt-pick-row.on { border-color: var(--sky); background: var(--paper); } .evt-pick-check { @@ -1449,12 +1432,8 @@ img.user-av { object-fit: cover; background: var(--paper-2); } border: 1.5px solid var(--border); color: transparent; background: var(--paper); } .evt-pick-row.on .evt-pick-check { border-color: var(--sky); background: var(--sky); color: #fff; } -.evt-pick-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } -.evt-pick-title { font-size: 13px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.evt-pick-sub { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-3); flex-wrap: wrap; } .evt-pick-sub .sep { color: var(--ink-4); } -.user-detail { display: flex; flex-direction: column; height: 100%; } .user-detail-head { display: flex; align-items: center; @@ -1497,27 +1476,26 @@ button.pm-copy:hover .mono { color: var(--ink); } border: 1px solid var(--border-soft); border-radius: 10px; padding: 3px; + min-width: 0; } .profile-tab { flex: 1; + min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--ink-3); padding: 7px 10px; border-radius: 7px; transition: background 120ms var(--ease-out), color 120ms var(--ease-out); } .profile-tab:hover { color: var(--ink); } -.profile-tab.on { background: #fff; color: var(--ink); box-shadow: var(--shadow-1); } .profile-tab-n { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--ink-3); background: color-mix(in oklab, var(--ink) 7%, transparent); padding: 0 6px; border-radius: 999px; font-feature-settings: "tnum" 1; + flex-shrink: 0; } .profile-tab.on .profile-tab-n { color: var(--ink-2); } /* Tabs share the strip evenly and may shrink; on phones the count sits under the label so three tabs ("Messages 10141") still fit a 375px card. */ -.profile-tabs { min-width: 0; } -.profile-tab { min-width: 0; } -.profile-tab-n { flex-shrink: 0; } @media (max-width: 480px) { .profile-tab { flex-direction: column; gap: 3px; padding: 6px 4px; font-size: 12px; } } @@ -1532,7 +1510,6 @@ button.pm-copy:hover .mono { color: var(--ink); } .prow-main { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; text-align: left; } button.prow-main { color: inherit; font: inherit; background: none; border: 0; padding: 0; } .prow-pin { width: 26px; height: 26px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } -.prow-pin img { width: 100%; height: 100%; object-fit: contain; } .prow-ico { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; @@ -1541,7 +1518,7 @@ button.prow-main { color: inherit; font: inherit; background: none; border: 0; p .prow-body { flex: 1; min-width: 0; } .prow-title { font-weight: 600; font-size: 13px; color: var(--ink); line-height: 1.35; text-wrap: pretty; } .prow-meta { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } -.prow-age { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); font-weight: 600; flex-shrink: 0; white-space: nowrap; } +.prow-age, .slr-age { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); font-weight: 600; flex-shrink: 0; white-space: nowrap; } /* ========================================================= Mail page @@ -1578,7 +1555,7 @@ button.prow-main { color: inherit; font: inherit; background: none; border: 0; p } .mbx svg { width: 13px; height: 13px; flex-shrink: 0; } .mbx:hover { color: var(--ink); } -.mbx.active { background: #fff; color: var(--ink); box-shadow: var(--shadow-1); } +.profile-tab.on, .mbx.active { background: #fff; color: var(--ink); box-shadow: var(--shadow-1); } .mbx-c { font-family: var(--font-mono); font-size: 10px; @@ -1605,9 +1582,6 @@ button.prow-main { color: inherit; font: inherit; background: none; border: 0; p .mail-row:last-child { border-bottom: none; } .mail-row:hover { background: var(--paper-2); } .mail-row.selected { background: var(--bloom-50); } -.mail-row.selected::before { - content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2.5px; background: var(--bloom); -} .mail-dir { width: 26px; height: 26px; border-radius: 7px; @@ -1632,7 +1606,6 @@ button.prow-main { color: inherit; font: inherit; background: none; border: 0; p .mail-preview { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mail-status-pill { align-self: center; } -.mail-reader { display: flex; flex-direction: column; height: 100%; } .mail-reader-head { padding: 16px 18px 14px; border-bottom: 1px solid var(--border-soft); } .mail-reader-subj { font-family: var(--font-display); @@ -1739,7 +1712,7 @@ button.prow-main { color: inherit; font: inherit; background: none; border: 0; p .modal-head .closebtn:hover { background: var(--paper-2); color: var(--ink); } .modal-body { padding: 16px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; } .compose-field { display: flex; flex-direction: column; gap: 5px; } -.compose-field label { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); } +.compose-field label, .dialog-label { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); } .compose-field input, .compose-field textarea { width: 100%; border: 1px solid var(--border); @@ -1825,7 +1798,6 @@ button.prow-main { color: inherit; font: inherit; background: none; border: 0; p .dialog-modal { max-width: 460px; } .dialog-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; } .dialog-text { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); } -.dialog-label { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); } .dialog-input { width: 100%; border: 1px solid var(--border); @@ -1953,14 +1925,6 @@ button.prow-main { color: inherit; font: inherit; background: none; border: 0; p .contrib-text { display: flex; flex-direction: column; min-width: 0; } .contrib-city { font-size: 11px; color: var(--ink-3); } -/* Reduced motion */ -@media (prefers-reduced-motion: reduce) { - *, *::before, *::after { - animation-duration: 0.01ms !important; - transition-duration: 0.01ms !important; - } -} - /* ========================================================= FLAT SHELL - no global top bar, no sidebar ========================================================= */ @@ -1968,13 +1932,6 @@ button.prow-main { color: inherit; font: inherit; background: none; border: 0; p panel); the real fixes are min-width:0 / overflow-wrap on the components themselves. `clip` (not hidden) so the sticky back bar keeps working. */ .shell-flat { min-height: 100vh; background: var(--paper); overflow-x: clip; } -.main { - max-width: 1600px; - margin: 0 auto; - width: 100%; - padding: var(--gutter) clamp(22px, 2.4vw, 56px) 72px; - gap: var(--gutter); -} @media (max-width: 640px) { .main { padding: var(--gutter) 14px 56px; } } /* Home dashboard fills a tall viewport but grows + scrolls naturally when content doesn't fit, so the @@ -2017,6 +1974,7 @@ button.prow-main { color: inherit; font: inherit; background: none; border: 0; p backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border-soft); + min-width: 0; } @media (max-width: 640px) { .backbar { margin-left: -14px; margin-right: -14px; padding: 0 14px; } } .backbar-btn { @@ -2031,6 +1989,8 @@ button.prow-main { color: inherit; font: inherit; background: none; border: 0; p color: var(--ink-2); font-weight: 600; font-size: 13px; + white-space: nowrap; + flex-shrink: 0; transition: background 120ms var(--ease-out), border-color 120ms var(--ease-out), color 120ms var(--ease-out); } .backbar-btn:hover { background: var(--paper-2); border-color: var(--border); color: var(--ink); } @@ -2044,6 +2004,7 @@ button.prow-main { color: inherit; font: inherit; background: none; border: 0; p font-size: 15px; letter-spacing: -0.012em; color: var(--ink); + min-width: 0; } .backbar-ico { width: 25px; height: 25px; @@ -2055,9 +2016,6 @@ button.prow-main { color: inherit; font: inherit; background: none; border: 0; p .backbar .spacer { flex: 1; } /* Back bar never overflows: the section name + operator name truncate, the buttons never shrink, and on phones the button labels collapse to their icons. */ -.backbar { min-width: 0; } -.backbar-btn { flex-shrink: 0; white-space: nowrap; } -.backbar-here { min-width: 0; } .backbar-here > .backbar-ico { flex-shrink: 0; } .backbar > .meta { min-width: 0; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--ink-3); } @media (max-width: 560px) { @@ -2085,8 +2043,7 @@ button.prow-main { color: inherit; font: inherit; background: none; border: 0; p /* -- Peek glyphs (shared) --------------------------------- */ .peek-pin { width: 30px; height: 30px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } -.peek-pin img { width: 100%; height: 100%; object-fit: contain; } -.peek-ico { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--hue-50); color: var(--hue-700); } +.peek-ico, .stile-ico { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--hue-50); color: var(--hue-700); } .peek-dir { width: 27px; height: 27px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .peek-dir.in { background: var(--sky-50); color: var(--sky-700); } .peek-dir.out { background: var(--moss-50); color: var(--moss-700); } @@ -2180,11 +2137,6 @@ button.prow-main { color: inherit; font: inherit; background: none; border: 0; p font: inherit; text-align: left; } .stile-head:focus-visible { outline: 2px solid var(--sky); outline-offset: -2px; } -.stile-ico { - width: 28px; height: 28px; border-radius: 8px; - background: var(--hue-50); color: var(--hue-700); - display: flex; align-items: center; justify-content: center; flex-shrink: 0; -} .stile-label { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; flex-shrink: 0; white-space: nowrap; @@ -2285,7 +2237,6 @@ button.prow-main { color: inherit; font: inherit; background: none; border: 0; p .slr-body { display: block; flex: 1; min-width: 0; } .slr-title { display: block; font-weight: 700; font-size: 12.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.005em; } .slr-meta { display: block; font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; } -.slr-age { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); font-weight: 600; flex-shrink: 0; white-space: nowrap; } .slr-arr { color: var(--ink-4); flex-shrink: 0; display: flex; opacity: 0; transition: opacity 240ms ease, transform 240ms cubic-bezier(0.25, 0.8, 0.3, 1); transform: translateX(-4px); } .slr:hover .slr-arr { opacity: 1; transform: none; color: var(--hue-700); } .stile-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border-soft); } diff --git a/apps/admin/src/styles/app.css b/apps/admin/src/styles/app.css index 7006385..400e34a 100644 --- a/apps/admin/src/styles/app.css +++ b/apps/admin/src/styles/app.css @@ -258,8 +258,7 @@ .pay-note svg, .bcast-note svg { flex-shrink: 0; margin-top: 2px; } .pay-note.tone-alert { color: var(--bloom-700); } -.statcell.tone-alert .statcell-num, -.statcell.tone-alert .statcell-label { color: var(--bloom-700); } +.statcell.tone-alert .statcell-num { color: var(--bloom-700); } /* -- Organization evidence ------------------------------------------------ */ .org-evidence-list { display: flex; flex-direction: column; gap: 8px; } @@ -319,7 +318,8 @@ /* -- Host messaging ------------------------------------------------------- */ .bcast-log { display: flex; flex-direction: column; gap: 9px; } -.bcast-row { +.bcast-row, +.pg-block { border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 9px 11px; @@ -361,11 +361,6 @@ .pg-seo-desc { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; } .pg-seo-meta { font-size: 11px; color: var(--ink-4); margin-top: 3px; } .pg-blocks { display: flex; flex-direction: column; gap: 8px; } -.pg-block { - border: 1px solid var(--border-soft); - border-radius: var(--radius-md); - padding: 9px 11px; -} .pg-block-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .pg-block-kind { font-size: 10.5px; @@ -473,9 +468,7 @@ img.org-logo { object-fit: cover; background: var(--paper-2); } display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--bloom-700); } -.field .lbl { display: flex; align-items: center; gap: 4px; } .field .lbl .counter { margin-left: auto; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-4); font-size: 10.5px; } -.field .hint { display: flex; align-items: flex-start; gap: 4px; line-height: 1.45; overflow-wrap: anywhere; } .field .hint svg { flex-shrink: 0; margin-top: 2px; } .field .hint.tone-warn { color: var(--sun-700); } .field input:disabled, .field textarea:disabled, .field select:disabled { background: var(--paper-2); color: var(--ink-3); } diff --git a/apps/admin/src/styles/colors-and-type.css b/apps/admin/src/styles/colors-and-type.css index 0244f27..93e4a52 100644 --- a/apps/admin/src/styles/colors-and-type.css +++ b/apps/admin/src/styles/colors-and-type.css @@ -157,6 +157,14 @@ --radius-pill: 999px; --radius-pin: 50% 50% 50% 6px; /* signature pin teardrop */ + --sidebar-w: 220px; + --sidebar-w-collapsed: 56px; + --topbar-h: 52px; + --gutter: 16px; + --card-radius: 12px; + --row-pad-y: 11px; + --row-pad-x: 14px; + /* ==================================================================== ELEVATION - Layered, warm-tinted shadows Soft + crisp pair gives the "lifted paper" feel without looking webby. From 2adac771ab3747c8f3599256e01fb7a124abd710 Mon Sep 17 00:00:00 2001 From: Theo Date: Thu, 24 Sep 2026 07:39:01 +0000 Subject: [PATCH 5/8] styles: raw hex colors that equal a token use the token --- apps/admin/src/components/map/leaflet-map.tsx | 8 +- apps/admin/src/styles/admin.css | 96 +++++++++---------- apps/admin/src/styles/app.css | 8 +- 3 files changed, 56 insertions(+), 56 deletions(-) diff --git a/apps/admin/src/components/map/leaflet-map.tsx b/apps/admin/src/components/map/leaflet-map.tsx index 90458cf..94349c4 100644 --- a/apps/admin/src/components/map/leaflet-map.tsx +++ b/apps/admin/src/components/map/leaflet-map.tsx @@ -58,9 +58,9 @@ const GLYPHS: Record = { "M12 9 a2 2 0 0 1 3 -1.3 a2 2 0 0 1 0.5 3 L12 14 L8.5 10.7 a2 2 0 0 1 0.5 -3 A2 2 0 0 1 12 9 Z M4 13 v5 a1 1 0 0 0 1 1 h2 v-6 Z M20 13 v5 a1 1 0 0 1 -1 1 h-2 v-6 Z", } const PIN_FILL: Record = { - routed: "#8A8378", + routed: "var(--ink-3)", needs: "#E5564B", - event: "#E5AE1C", + event: "var(--sun-600)", "event-volunteer": "#5B8C6E", } // Event kinds own their fill and glyph; `draft` never overrides them. @@ -82,8 +82,8 @@ function pinIcon( const html = `
` + `` + - `` + - `` + + `` + + `` + `` + `
` return L.divIcon({ diff --git a/apps/admin/src/styles/admin.css b/apps/admin/src/styles/admin.css index 642119b..11b9067 100644 --- a/apps/admin/src/styles/admin.css +++ b/apps/admin/src/styles/admin.css @@ -74,7 +74,7 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } Card primitive --------------------------------------------------------- */ .card { - background: #fff; + background: var(--card); border-radius: var(--card-radius); border: 1px solid var(--border-soft); box-shadow: var(--shadow-1); @@ -134,7 +134,7 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } .statusstrip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); - background: #fff; + background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--card-radius); overflow: hidden; @@ -225,7 +225,7 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } /* Leaflet tooltip override -> on-brand */ .pi-map-tip.leaflet-tooltip { background: var(--ink); - color: #fff; + color: var(--fg-on-color); border: none; border-radius: 7px; padding: 5px 9px; @@ -243,7 +243,7 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } } .leaflet-control-attribution a { color: var(--ink-2) !important; } .leaflet-bar a { - background: #fff !important; + background: var(--card) !important; color: var(--ink-2) !important; border-color: var(--border-soft) !important; } @@ -276,9 +276,9 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } width: 8px; height: 8px; border-radius: 50%; } -.live-map .map-legend .pin-routed { background: #8A8378; } +.live-map .map-legend .pin-routed { background: var(--ink-3); } .live-map .map-legend .pin-needs { background: #E5564B; } -.live-map .map-legend .pin-events { background: #E5AE1C; } +.live-map .map-legend .pin-events { background: var(--sun-600); } /* Map markers - report-type glyph kept, only color changes */ .pi-pin2-wrap { background: none; border: none; } @@ -309,11 +309,11 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } display: flex; align-items: center; justify-content: center; - color: #fff; + color: var(--fg-on-color); } -.map-active-card .mac-pin.is-routed { background: #8A8378; } +.map-active-card .mac-pin.is-routed { background: var(--ink-3); } .map-active-card .mac-pin.is-needs { background: #E5564B; } -.map-active-card .mac-pin.is-event { background: #E5AE1C; } +.map-active-card .mac-pin.is-event { background: var(--sun-600); } .map-active-card .mac-body { min-width: 0; flex: 1; } .map-active-card .mac-title { font-weight: 700; font-size: 13px; color: var(--ink); } .map-active-card .mac-sub { font-size: 11.5px; color: var(--ink-3); display: flex; gap: 5px; align-items: center; margin-top: 1px; } @@ -511,7 +511,7 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } line-height: 1; border-radius: 8px; border: 1px solid var(--border-soft); - background: #fff; + background: var(--card); color: var(--ink); transition: background 120ms var(--ease-out), border-color 120ms var(--ease-out), transform 120ms var(--ease-out); white-space: nowrap; @@ -524,7 +524,7 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } .btn:active { transform: scale(0.97); } .btn.primary { background: var(--bloom); - color: #fff; + color: var(--fg-on-color); border-color: transparent; box-shadow: 0 1px 0 var(--bloom-600), var(--sheen-top); font-weight: 700; @@ -532,14 +532,14 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } .btn.primary:hover { background: var(--bloom-600); } .btn.success { background: var(--moss); - color: #fff; + color: var(--fg-on-color); border-color: transparent; box-shadow: 0 1px 0 var(--moss-600), var(--sheen-top); font-weight: 700; } .btn.success:hover { background: var(--moss-600); } .btn.danger { - background: #fff; + background: var(--card); color: var(--bloom-700); border-color: color-mix(in oklab, var(--bloom) 25%, transparent); } @@ -606,7 +606,7 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } .panel-head { padding: 12px 18px 14px; border-bottom: 1px solid var(--border-soft); - background: #fff; + background: var(--card); display: flex; align-items: center; gap: 12px; @@ -675,7 +675,7 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } .panel-foot { border-top: 1px solid var(--border-soft); - background: #fff; + background: var(--card); padding: 12px 20px; display: flex; align-items: center; @@ -685,7 +685,7 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } /* Sub sections inside panel */ .sub { - background: #fff; + background: var(--card); border: 1px solid var(--border-soft); border-radius: 10px; overflow: hidden; @@ -734,7 +734,7 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } position: absolute; top: 50%; left: 50%; transform: translate(-50%, calc(-50% + 22px)); - background: #fff; + background: var(--card); padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border-soft); @@ -772,7 +772,7 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } } .field input, .field textarea, .field select { border: 1px solid var(--border); - background: #fff; + background: var(--card); border-radius: 7px; padding: 8px 11px; font-family: var(--font-body); @@ -826,7 +826,7 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } font-size: 10.5px; font-weight: 600; color: var(--ink-2); - background: #fff; + background: var(--card); border: 1px solid var(--border-soft); border-radius: 999px; padding: 1px 7px; @@ -847,7 +847,7 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } align-items: center; gap: 7px; border: 1px solid var(--border); - background: #fff; + background: var(--card); border-radius: 8px; padding: 0 9px; color: var(--ink-4); @@ -873,7 +873,7 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } left: 50%; transform: translateX(-50%) translateY(100px); background: var(--ink); - color: #fff; + color: var(--fg-on-color); padding: 10px 16px 10px 14px; border-radius: 999px; box-shadow: var(--shadow-4); @@ -904,7 +904,7 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } display: inline-flex; align-items: center; justify-content: center; - color: #fff; + color: var(--fg-on-color); } .toast-wrap .undo { margin-left: 6px; @@ -937,7 +937,7 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } padding: 0 13px; border-radius: 8px; border: 1px solid var(--border-soft); - background: #fff; + background: var(--card); font-size: 12.5px; font-weight: 600; color: var(--ink-2); @@ -947,7 +947,7 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } .fchip:hover { background: var(--paper-2); border-color: var(--border); } .fchip.active { background: var(--ink); - color: #fff; + color: var(--fg-on-color); border-color: var(--ink); } .fchip-count { @@ -960,7 +960,7 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } color: var(--ink-3); font-feature-settings: "tnum" 1; } -.fchip.active .fchip-count { background: rgba(255,255,255,0.18); color: #fff; } +.fchip.active .fchip-count { background: rgba(255,255,255,0.18); color: var(--fg-on-color); } .searchbox { display: flex; @@ -968,7 +968,7 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } gap: 8px; height: 34px; padding: 0 11px; - background: #fff; + background: var(--card); border: 1px solid var(--border-soft); border-radius: 8px; color: var(--ink-3); @@ -1001,7 +1001,7 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } .sortbox-label { font-weight: 600; letter-spacing: 0.02em; } .sortbox select { border: 1px solid var(--border-soft); - background: #fff; + background: var(--card); border-radius: 8px; height: 34px; padding: 0 10px; @@ -1096,7 +1096,7 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } .user-av { width: 36px; height: 36px; border-radius: 50%; - color: #fff; + color: var(--fg-on-color); display: inline-flex; align-items: center; justify-content: center; @@ -1224,7 +1224,7 @@ img.user-av { object-fit: cover; background: var(--paper-2); } .rep-photo-tag { position: absolute; bottom: 6px; left: 6px; display: inline-flex; align-items: center; gap: 4px; - background: rgba(26,23,20,0.72); color: #fff; + background: rgba(26,23,20,0.72); color: var(--fg-on-color); font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: 6px; } .rep-minimap { @@ -1295,12 +1295,12 @@ img.user-av { object-fit: cover; background: var(--paper-2); } .evt-row-ico { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; - background: var(--sun-50, #FFF6DC); color: var(--sun-700); + background: var(--sun-50); color: var(--sun-700); } .evt-head-ico { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; - background: var(--sun-50, #FFF6DC); color: var(--sun-700); + background: var(--sun-50); color: var(--sun-700); } .evt-turnout { display: flex; flex-direction: column; gap: 8px; } .evt-turnout-top { display: flex; align-items: baseline; justify-content: space-between; } @@ -1341,7 +1341,7 @@ img.user-av { object-fit: cover; background: var(--paper-2); } .dsc-msg-av { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; - font-size: 10.5px; font-weight: 700; color: #fff; + font-size: 10.5px; font-weight: 700; color: var(--fg-on-color); background: linear-gradient(135deg, var(--sky), var(--moss)); } .dsc-msg.removed .dsc-msg-av { background: var(--paper-2); color: var(--ink-4); border: 1px solid var(--border-soft); } @@ -1395,7 +1395,7 @@ img.user-av { object-fit: cover; background: var(--paper-2); } display: flex; align-items: center; justify-content: center; background: var(--paper); border: 1px solid var(--border-soft); color: var(--ink-3); } -.evt-linked-thumb.hue-sun { background: var(--sun-50, #FFF6DC); color: var(--sun-700); border-color: transparent; } +.evt-linked-thumb.hue-sun { background: var(--sun-50); color: var(--sun-700); border-color: transparent; } .evt-linked-thumb img { width: 100%; height: 100%; object-fit: cover; } .evt-linked-body, .evt-pick-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .evt-linked-title, .evt-pick-title { font-size: 13px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @@ -1431,7 +1431,7 @@ img.user-av { object-fit: cover; background: var(--paper-2); } display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--border); color: transparent; background: var(--paper); } -.evt-pick-row.on .evt-pick-check { border-color: var(--sky); background: var(--sky); color: #fff; } +.evt-pick-row.on .evt-pick-check { border-color: var(--sky); background: var(--sky); color: var(--fg-on-color); } .evt-pick-sub .sep { color: var(--ink-4); } .user-detail-head { @@ -1555,7 +1555,7 @@ button.prow-main { color: inherit; font: inherit; background: none; border: 0; p } .mbx svg { width: 13px; height: 13px; flex-shrink: 0; } .mbx:hover { color: var(--ink); } -.profile-tab.on, .mbx.active { background: #fff; color: var(--ink); box-shadow: var(--shadow-1); } +.profile-tab.on, .mbx.active { background: var(--card); color: var(--ink); box-shadow: var(--shadow-1); } .mbx-c { font-family: var(--font-mono); font-size: 10px; @@ -1749,7 +1749,7 @@ button.prow-main { color: inherit; font: inherit; background: none; border: 0; p width: min(320px, 100%); padding: 24px; text-align: center; - color: #fff; + color: var(--fg-on-color); font-size: 12.5px; background: rgba(26, 23, 20, 0.55); border-radius: 12px; @@ -1760,7 +1760,7 @@ button.prow-main { color: inherit; font: inherit; background: none; border: 0; p margin-top: 4px; padding: 7px 14px; border-radius: 10px; font-size: 12px; font-weight: 700; - color: #fff; background: rgba(26, 23, 20, 0.72); + color: var(--fg-on-color); background: rgba(26, 23, 20, 0.72); transition: background-color 120ms ease; } .lightbox-face-btn:hover { background: rgba(26, 23, 20, 0.9); } @@ -1777,14 +1777,14 @@ button.prow-main { color: inherit; font: inherit; background: none; border: 0; p display: flex; align-items: center; gap: 8px; } .lightbox-count { - font-size: 10.5px; font-weight: 700; color: #fff; + font-size: 10.5px; font-weight: 700; color: var(--fg-on-color); background: rgba(26, 23, 20, 0.72); padding: 4px 8px; border-radius: 8px; } .lightbox-btn { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; - color: #fff; background: rgba(26, 23, 20, 0.72); + color: var(--fg-on-color); background: rgba(26, 23, 20, 0.72); transition: background-color 120ms ease; } .lightbox-btn:hover { background: rgba(26, 23, 20, 0.9); } @@ -1919,7 +1919,7 @@ button.prow-main { color: inherit; font: inherit; background: none; border: 0; p .contrib-av { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; - font-size: 11px; font-weight: 700; color: #fff; + font-size: 11px; font-weight: 700; color: var(--fg-on-color); background: linear-gradient(135deg, var(--sky), var(--moss)); } .contrib-text { display: flex; flex-direction: column; min-width: 0; } @@ -1957,7 +1957,7 @@ button.prow-main { color: inherit; font: inherit; background: none; border: 0; p .hue-sky { --hue: var(--sky); --hue-50: var(--sky-50); --hue-600: var(--sky-600); --hue-700: var(--sky-700); } .hue-sun { --hue: var(--sun); --hue-50: var(--sun-50); --hue-600: var(--sun-600); --hue-700: var(--sun-700); } .hue-moss { --hue: var(--moss); --hue-50: var(--moss-50); --hue-600: var(--moss-600); --hue-700: var(--moss-700); } -.hue-slate { --hue: #8A8378; --hue-50: var(--paper-2); --hue-600: var(--ink-2); --hue-700: var(--ink-2); } +.hue-slate { --hue: var(--ink-3); --hue-50: var(--paper-2); --hue-600: var(--ink-2); --hue-700: var(--ink-2); } /* -- Back bar (section pages) ----------------------------- */ .backbar { @@ -1985,7 +1985,7 @@ button.prow-main { color: inherit; font: inherit; background: none; border: 0; p padding: 0 13px 0 9px; border-radius: 8px; border: 1px solid var(--border-soft); - background: #fff; + background: var(--card); color: var(--ink-2); font-weight: 600; font-size: 13px; @@ -2050,7 +2050,7 @@ button.prow-main { color: inherit; font: inherit; background: none; border: 0; p .peek-av { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; - font-size: 11px; font-weight: 700; color: #fff; + font-size: 11px; font-weight: 700; color: var(--fg-on-color); background: linear-gradient(135deg, var(--ink-3), var(--ink-4)); } @@ -2099,7 +2099,7 @@ button.prow-main { color: inherit; font: inherit; background: none; border: 0; p /* -- Section tile ----------------------------------------- */ .stile { - background: #fff; + background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--card-radius); padding: 14px 15px 13px; @@ -2128,7 +2128,7 @@ button.prow-main { color: inherit; font: inherit; background: none; border: 0; p .stile:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; } .stile:hover::after { opacity: 1; } .stile.feature { - background: linear-gradient(150deg, var(--hue-50) 0%, transparent 44%), #fff; + background: linear-gradient(150deg, var(--hue-50) 0%, transparent 44%), var(--card); border-color: color-mix(in oklab, var(--hue) 20%, transparent); } .stile-head { @@ -2282,7 +2282,7 @@ button.prow-main { color: inherit; font: inherit; background: none; border: 0; p display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 120ms var(--ease-out); } -.launch-row:hover .launch-ico { background: #fff; } +.launch-row:hover .launch-ico { background: var(--card); } .launch-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .launch-label { font-weight: 700; font-size: 13px; color: var(--ink); min-width: 0; overflow-wrap: anywhere; } .launch-sub { font-size: 11px; color: var(--ink-3); font-weight: 600; min-width: 0; line-height: 1.3; overflow-wrap: anywhere; text-wrap: pretty; } @@ -2373,7 +2373,7 @@ button.prow-main { color: inherit; font: inherit; background: none; border: 0; p transition: background 120ms var(--ease-out), border-color 120ms var(--ease-out), transform 80ms var(--ease-out); } .tpl-chip:hover { - background: #fff; + background: var(--card); border-color: var(--sky); } .tpl-chip:active { transform: translateY(1px); } @@ -2386,7 +2386,7 @@ button.prow-main { color: inherit; font: inherit; background: none; border: 0; p } .tpl-email { - background: #fff; + background: var(--card); border: 1px solid var(--border-soft); border-radius: 8px; overflow: hidden; diff --git a/apps/admin/src/styles/app.css b/apps/admin/src/styles/app.css index 400e34a..1eab4ec 100644 --- a/apps/admin/src/styles/app.css +++ b/apps/admin/src/styles/app.css @@ -159,7 +159,7 @@ or errored, the state renders here as one clean full-width card instead of being squeezed into a single stat cell of the grid. Mirrors the strip's card footprint (border + radius + shadow). */ .strip-state { - background: #fff; + background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--card-radius); box-shadow: var(--shadow-1); @@ -478,7 +478,7 @@ img.org-logo { object-fit: cover; background: var(--paper-2); } display: flex; align-items: center; gap: 0; border: 1px solid var(--border); border-radius: 7px; - background: #fff; + background: var(--card); overflow: hidden; transition: border-color 120ms var(--ease-out), box-shadow 120ms var(--ease-out); } @@ -526,7 +526,7 @@ img.org-logo { object-fit: cover; background: var(--paper-2); } .user-pick-results { border: 1px solid var(--border-soft); border-radius: 9px; - background: #fff; + background: var(--card); max-height: 224px; overflow-y: auto; list-style: none; @@ -578,7 +578,7 @@ img.org-logo { object-fit: cover; background: var(--paper-2); } position: fixed; z-index: 80; min-width: 200px; - background: #fff; + background: var(--card); border: 1px solid var(--border-soft); border-radius: 10px; box-shadow: 0 12px 32px rgba(26, 23, 20, 0.16); From ee45fc2cc1fc72c6d1f21286960d31f0168294e1 Mon Sep 17 00:00:00 2001 From: Theo Date: Thu, 24 Sep 2026 07:39:02 +0000 Subject: [PATCH 6/8] styles: drop class names that have no css rule --- apps/admin/src/features/analytics/analytics-page.tsx | 2 +- apps/admin/src/features/home/home-page.tsx | 2 +- apps/admin/src/features/mail/mail-page.tsx | 2 +- apps/admin/src/features/pages/page-preview.tsx | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/admin/src/features/analytics/analytics-page.tsx b/apps/admin/src/features/analytics/analytics-page.tsx index 2d14fe9..8650e04 100644 --- a/apps/admin/src/features/analytics/analytics-page.tsx +++ b/apps/admin/src/features/analytics/analytics-page.tsx @@ -307,7 +307,7 @@ export function AnalyticsPage(_props: SectionPageProps) { return (
{d.rows.map((r) => ( -
+
{REPORT_CATEGORY_LABELS[r.cat]} diff --git a/apps/admin/src/features/home/home-page.tsx b/apps/admin/src/features/home/home-page.tsx index efe502a..3c34e7a 100644 --- a/apps/admin/src/features/home/home-page.tsx +++ b/apps/admin/src/features/home/home-page.tsx @@ -544,7 +544,7 @@ function SectionTile({ label={`Pins per week, last ${s.spark.length} weeks: ${s.spark.join(", ")}`} /> ) : ( -
No data yet
+
No data yet
))}
{s.metrics && ( diff --git a/apps/admin/src/features/mail/mail-page.tsx b/apps/admin/src/features/mail/mail-page.tsx index 37783d2..a5f0dc6 100644 --- a/apps/admin/src/features/mail/mail-page.tsx +++ b/apps/admin/src/features/mail/mail-page.tsx @@ -160,7 +160,7 @@ function ComposeEditor({ onClose, onSend, pending }: ComposeModalProps) {
)} -
+
{page.seo.title ?? title}
{page.seo.description &&
{page.seo.description}
}
From 503169db61b783935e3bf85d845a7dde9358fe42 Mon Sep 17 00:00:00 2001 From: Theo Date: Thu, 24 Sep 2026 07:39:02 +0000 Subject: [PATCH 7/8] styles: delete custom properties nothing references --- apps/admin/src/styles/admin.css | 12 ++--- apps/admin/src/styles/colors-and-type.css | 53 +---------------------- 2 files changed, 7 insertions(+), 58 deletions(-) diff --git a/apps/admin/src/styles/admin.css b/apps/admin/src/styles/admin.css index 11b9067..776fe6c 100644 --- a/apps/admin/src/styles/admin.css +++ b/apps/admin/src/styles/admin.css @@ -1952,12 +1952,12 @@ button.prow-main { color: inherit; font: inherit; background: none; border: 0; p .main-home .bt-analytics .hub-spark { height: 30px; } /* Hue helpers - every section owns a brand color */ -.hue-bloom { --hue: var(--bloom); --hue-50: var(--bloom-50); --hue-600: var(--bloom-600); --hue-700: var(--bloom-700); } -.hue-lilac { --hue: var(--lilac); --hue-50: var(--lilac-50); --hue-600: var(--lilac-600); --hue-700: var(--lilac-600); } -.hue-sky { --hue: var(--sky); --hue-50: var(--sky-50); --hue-600: var(--sky-600); --hue-700: var(--sky-700); } -.hue-sun { --hue: var(--sun); --hue-50: var(--sun-50); --hue-600: var(--sun-600); --hue-700: var(--sun-700); } -.hue-moss { --hue: var(--moss); --hue-50: var(--moss-50); --hue-600: var(--moss-600); --hue-700: var(--moss-700); } -.hue-slate { --hue: var(--ink-3); --hue-50: var(--paper-2); --hue-600: var(--ink-2); --hue-700: var(--ink-2); } +.hue-bloom { --hue: var(--bloom); --hue-50: var(--bloom-50); --hue-700: var(--bloom-700); } +.hue-lilac { --hue: var(--lilac); --hue-50: var(--lilac-50); --hue-700: var(--lilac-600); } +.hue-sky { --hue: var(--sky); --hue-50: var(--sky-50); --hue-700: var(--sky-700); } +.hue-sun { --hue: var(--sun); --hue-50: var(--sun-50); --hue-700: var(--sun-700); } +.hue-moss { --hue: var(--moss); --hue-50: var(--moss-50); --hue-700: var(--moss-700); } +.hue-slate { --hue: var(--ink-3); --hue-50: var(--paper-2); --hue-700: var(--ink-2); } /* -- Back bar (section pages) ----------------------------- */ .backbar { diff --git a/apps/admin/src/styles/colors-and-type.css b/apps/admin/src/styles/colors-and-type.css index 93e4a52..cddacc2 100644 --- a/apps/admin/src/styles/colors-and-type.css +++ b/apps/admin/src/styles/colors-and-type.css @@ -18,35 +18,26 @@ --bloom-50: #FFEDE9; /* coral wash, alert surfaces */ --bloom-100: #FFD5CD; - --bloom-300: #FFA89A; --bloom: #FF7A6B; /* PRIMARY - pins, CTAs, "report" */ --bloom-600: #E55F50; --bloom-700: #B8463A; --moss-50: #E8F3E8; /* clean / community */ - --moss-100: #CDE5CD; --moss-300: #9BCF9B; --moss: #6FB36F; /* SUCCESS - cleanups, completed */ --moss-600: #4F9551; --moss-700: #347338; --sun-50: #FFF6DA; /* highlight / cleanup events */ - --sun-100: #FFE9A4; - --sun-300: #FFD668; --sun: #FFCB47; --sun-600: #E5AE1C; --sun-700: #A77B0A; --sky-50: #E6F2FB; /* info / map water */ - --sky-100: #C9E3F4; - --sky-300: #A0CDE9; --sky: #6FB1DC; - --sky-600: #3F8DC0; --sky-700: #2A6996; --lilac-50: #F0EBFB; /* secondary accent */ - --lilac-100: #DED2F5; - --lilac-300: #BFA9EC; --lilac: #9C82DE; --lilac-600: #7657C2; @@ -56,35 +47,24 @@ --paper: #FBF7F0; /* base canvas - warm cream */ --paper-2: #F4EFE6; /* sunken surface */ --card: #FFFFFF; /* elevated card */ - --card-tint:#FCFAF6; /* soft elevated */ --ink: #1A1714; /* primary text */ --ink-2: #4A453F; /* secondary text */ --ink-3: #8A8378; /* tertiary / placeholder */ --ink-4: #C9C2B5; /* hairlines, disabled */ - --ink-5: #E8E2D5; /* dividers */ /* ==================================================================== COLOR - Semantic ==================================================================== */ --fg-1: var(--ink); - --fg-2: var(--ink-2); --fg-3: var(--ink-3); --fg-on-color: #FFFFFF; --bg-1: var(--paper); - --bg-2: var(--paper-2); - --bg-card: var(--card); --border-soft: rgba(26, 23, 20, 0.06); /* hairline on cards */ --border: rgba(26, 23, 20, 0.10); - --border-strong: rgba(26, 23, 20, 0.16); - --accent: var(--bloom); - --accent-fg:#FFFFFF; - --success: var(--moss); - --warning: var(--sun-600); - --info: var(--sky); --danger: var(--bloom-600); /* Map / category colors - used for pin types */ @@ -112,53 +92,32 @@ /* Type scale - built on 1.25 (major third), tightened at small end */ --fs-12: 0.75rem; /* 12 - micro labels, badges */ - --fs-13: 0.8125rem; /* 13 - captions */ --fs-14: 0.875rem; /* 14 - UI body small */ - --fs-15: 0.9375rem; /* 15 - UI body */ --fs-16: 1rem; /* 16 - base body */ - --fs-18: 1.125rem; /* 18 - lead body */ --fs-20: 1.25rem; /* 20 - h5 */ --fs-24: 1.5rem; /* 24 - h4 */ --fs-30: 1.875rem; /* 30 - h3 */ --fs-38: 2.375rem; /* 38 - h2 */ --fs-48: 3rem; /* 48 - h1 */ - --fs-64: 4rem; /* 64 - display */ --lh-tight: 1.05; --lh-snug: 1.2; --lh-base: 1.45; - --lh-loose: 1.6; --tracking-tight: -0.02em; /* display */ --tracking-snug: -0.01em; /* headlines */ - --tracking-base: 0; --tracking-wide: 0.06em; /* eyebrows, all-caps labels */ /* ==================================================================== SHAPE & SPACE ==================================================================== */ - --space-1: 4px; --space-2: 8px; --space-3: 12px; - --space-4: 16px; - --space-5: 20px; - --space-6: 24px; - --space-8: 32px; - --space-10: 40px; - --space-12: 48px; - --space-16: 64px; --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; - --radius-lg: 20px; /* default card */ - --radius-xl: 28px; /* hero card / sheet */ - --radius-2xl: 36px; - --radius-pill: 999px; - --radius-pin: 50% 50% 50% 6px; /* signature pin teardrop */ - - --sidebar-w: 220px; - --sidebar-w-collapsed: 56px; + --topbar-h: 52px; --gutter: 16px; --card-radius: 12px; @@ -187,10 +146,6 @@ /* Inset highlight for floating elements - gives the soft "candy" sheen */ --sheen-top: inset 0 1px 0 rgba(255,255,255,0.6); - /* Pin drop shadow (used on map markers) */ - --shadow-pin: 0 6px 10px -2px rgba(255,122,107,0.45), - 0 2px 4px rgba(26,23,20,0.20); - /* Focus ring - colored, not blue-default */ --ring: 0 0 0 3px rgba(255,122,107,0.30); @@ -199,12 +154,6 @@ ==================================================================== */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* default UI */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* press release / pin drop */ - --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); - - --dur-1: 120ms; - --dur-2: 200ms; - --dur-3: 320ms; - --dur-4: 500ms; } /* ========================================================================= From d19abd63a93409d375be3c468294046bf8929585 Mon Sep 17 00:00:00 2001 From: Theo Date: Thu, 24 Sep 2026 07:39:02 +0000 Subject: [PATCH 8/8] styles: css comments explain why, not what --- apps/admin/src/styles/admin.css | 141 ++-------------------- apps/admin/src/styles/app.css | 46 +------ apps/admin/src/styles/colors-and-type.css | 112 ++++++----------- 3 files changed, 49 insertions(+), 250 deletions(-) diff --git a/apps/admin/src/styles/admin.css b/apps/admin/src/styles/admin.css index 776fe6c..cf0a83a 100644 --- a/apps/admin/src/styles/admin.css +++ b/apps/admin/src/styles/admin.css @@ -1,7 +1,3 @@ -/* ========================================================================= - PinIt Admin Dashboard - Operations - Linear-density x PinIt's warm cream paper. Responsive desktop -> mobile. - ========================================================================= */ @import url('./colors-and-type.css'); * { box-sizing: border-box; } @@ -32,7 +28,6 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } padding: var(--gutter) clamp(22px, 2.4vw, 56px) 72px; } -/* Page header */ .page-head { display: flex; align-items: flex-start; @@ -70,9 +65,6 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } font-feature-settings: "tnum" 1; } -/* --------------------------------------------------------- - Card primitive - --------------------------------------------------------- */ .card { background: var(--card); border-radius: var(--card-radius); @@ -128,9 +120,6 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } .card .card-head .head-action svg { width: 12px; height: 12px; flex-shrink: 0; } .card .card-head .head-action:hover { background: var(--paper-2); color: var(--ink); } -/* --------------------------------------------------------- - Status strip - --------------------------------------------------------- */ .statusstrip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); @@ -205,9 +194,6 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } } } -/* --------------------------------------------------------- - Live US activity - --------------------------------------------------------- */ .live-map-card { min-height: 360px; } .live-map { position: relative; @@ -222,7 +208,6 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } background: var(--paper-2); } -/* Leaflet tooltip override -> on-brand */ .pi-map-tip.leaflet-tooltip { background: var(--ink); color: var(--fg-on-color); @@ -249,7 +234,6 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } } .leaflet-bar a:hover { background: var(--paper-2) !important; } -/* Legend + active card overlays */ .live-map .map-legend { position: absolute; bottom: 10px; left: 12px; @@ -280,7 +264,6 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } .live-map .map-legend .pin-needs { background: #E5564B; } .live-map .map-legend .pin-events { background: var(--sun-600); } -/* Map markers - report-type glyph kept, only color changes */ .pi-pin2-wrap { background: none; border: none; } .pi-pin2 { display: block; filter: drop-shadow(0 2px 3px rgba(26,23,20,0.3)); transition: transform 120ms var(--ease-out); } .pi-pin2 svg { display: block; } @@ -320,9 +303,6 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } .map-active-card .mac-sub .sep { color: var(--ink-4); } .card-head .ha-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; } -/* --------------------------------------------------------- - Queue tabs + rows - --------------------------------------------------------- */ .queue-list { display: flex; flex-direction: column; } .qrow { display: grid; @@ -462,7 +442,6 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } .qrow:hover .row-arrow { opacity: 1; transform: translateX(2px); color: var(--ink-3); } .qrow.selected .row-arrow { opacity: 1; color: var(--bloom); } -/* Pills */ .pill { display: inline-flex; align-items: center; @@ -495,9 +474,6 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } text-transform: uppercase; } -/* --------------------------------------------------------- - Buttons - --------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; @@ -570,9 +546,6 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } color: var(--ink-3); } -/* --------------------------------------------------------- - Slide-over task panel - --------------------------------------------------------- */ .panel-overlay { position: fixed; inset: 0; @@ -683,7 +656,6 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } } .panel-foot .spacer { flex: 1; } -/* Sub sections inside panel */ .sub { background: var(--card); border: 1px solid var(--border-soft); @@ -709,7 +681,6 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } } .sub > .sub-body { padding: 14px; } -/* Mini map in panel */ .mini-map { height: 140px; background: @@ -745,7 +716,6 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } white-space: nowrap; } -/* Fields */ .field { display: flex; flex-direction: column; @@ -798,7 +768,6 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } overflow-wrap: anywhere; } -/* -- Per-report-type routing contacts --------------------- */ .ccat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); @@ -866,7 +835,6 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } padding: 8px 0; } -/* Toast */ .toast-wrap { position: fixed; bottom: 22px; @@ -913,14 +881,10 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } cursor: pointer; } -/* Util */ .mono { font-feature-settings: "tnum" 1; } .muted { color: var(--ink-3); } .row-flex { display: flex; align-items: center; gap: 8px; } -/* ========================================================= - Pages: toolbar, filters, search - ========================================================= */ .toolbar { display: flex; align-items: center; @@ -1013,7 +977,6 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } } .sortbox select:focus { border-color: var(--bloom); box-shadow: var(--ring); } -/* Empty state */ .empty-state { display: flex; flex-direction: column; @@ -1036,7 +999,6 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } .empty-title { font-weight: 700; font-size: 15px; color: var(--ink); } .empty-sub { font-size: 13px; color: var(--ink-3); margin-top: 4px; max-width: 36ch; } -/* Master-detail layout */ .master-detail { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); @@ -1051,7 +1013,6 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } .md-list { position: static; max-height: none; } } -/* Generic table */ .table { display: flex; flex-direction: column; } /* Horizontal scroll container for grid "tables" on narrow viewports: the table keeps a sane minimum width and the WRAPPER scrolls, so the page itself never scrolls sideways. */ @@ -1087,10 +1048,8 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } .trow .td-strong { font-weight: 700; color: var(--ink); } .trow.jt { grid-template-columns: 2fr 0.6fr 0.8fr; } -/* card padding helper */ .card-pad { padding: 16px; } -/* User context block (in moderation + users) */ .user-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .user-head > div { flex: 1; min-width: 0; } .user-av { @@ -1103,12 +1062,8 @@ button:focus-visible { outline: none; box-shadow: var(--ring); } font-weight: 700; font-size: 13px; flex-shrink: 0; - /* Per-seed brand color is set inline (matching the shared Avatar's solid fill, NOT a single hardcoded - gradient). When the user has a real photo this is an rendered at the same size, cover-cropped. */ overflow: hidden; } -/* The real-photo variant: same circle, the uploaded/provider avatar fills it (center-cover) so admin - shows the IDENTICAL photo as web/mobile. object-fit keeps the aspect ratio inside the round clip. */ img.user-av { object-fit: cover; background: var(--paper-2); } .user-av.lg { width: 48px; height: 48px; font-size: 16px; } .user-name { font-weight: 700; font-size: 14px; color: var(--ink); } @@ -1143,9 +1098,6 @@ img.user-av { object-fit: cover; background: var(--paper-2); } flex-wrap: wrap; } -/* ========================================================= - Reports detail - ========================================================= */ .rep-detail, .user-detail, .mail-reader { display: flex; flex-direction: column; height: 100%; } .rep-head { display: flex; @@ -1233,7 +1185,6 @@ img.user-av { object-fit: cover; background: var(--paper-2); } border: 1px solid var(--border-soft); } -/* Timeline */ .rep-timeline { display: flex; flex-direction: column; } .rep-tl-row { display: flex; gap: 10px; padding: 7px 0; position: relative; } .rep-tl-row:not(:last-child)::before { @@ -1256,7 +1207,6 @@ img.user-av { object-fit: cover; background: var(--paper-2); } .rep-tl-text b { color: var(--ink); font-weight: 700; } .rep-tl-when { font-size: 10.5px; color: var(--ink-4); font-family: var(--font-mono); margin-top: 1px; } -/* Routed city block */ .rep-city { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .rep-city-ico { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; @@ -1274,7 +1224,6 @@ img.user-av { object-fit: cover; background: var(--paper-2); } .rep-city-contact .mono { font-size: 11.5px; } .rep-city-contact.warn { background: var(--sun-50); border-color: color-mix(in oklab, var(--sun) 26%, transparent); color: var(--sun-700); font-weight: 600; } -/* Follow-up composer */ .rep-to { display: flex; gap: 6px; margin-bottom: 8px; } .rep-followup { width: 100%; resize: vertical; min-height: 64px; margin-bottom: 8px; @@ -1291,7 +1240,6 @@ img.user-av { object-fit: cover; background: var(--paper-2); } } .rep-actions-label { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); margin-right: 2px; } -/* -- Events ----------------------------------------------- */ .evt-row-ico { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; @@ -1330,7 +1278,6 @@ img.user-av { object-fit: cover; background: var(--paper-2); } .evt-msg-text { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink); line-height: 1.4; } .evt-post-hint { font-size: 11px; color: var(--ink-3); margin-top: 6px; } -/* -- Report discussion (public comment thread; distinct from the Activity timeline) -- */ .dsc-list { display: flex; flex-direction: column; gap: 10px; } .dsc-msg { display: flex; gap: 10px; @@ -1372,15 +1319,11 @@ img.user-av { object-fit: cover; background: var(--paper-2); } } .dsc-reaction.mine { background: var(--bloom-50); color: var(--bloom-700); border-color: color-mix(in oklab, var(--bloom) 20%, transparent); } -/* Operator composer under the report chat (same treatment as the Mail reply composer). */ .dsc-composer { border-top: 1px solid var(--border-soft); padding: 12px 14px 14px; } .dsc-composer-foot { display: flex; align-items: center; gap: 8px; } .dsc-composer-foot .hint { font-size: 11px; color: var(--ink-3); min-width: 0; } .dsc-composer-foot .spacer { flex: 1; min-width: 4px; } -/* Linked reports/events galleries (event<->report linking). A vertical list of clickable cards: a - thumb/glyph, a title, a status/kind sub-row, and an address/organizer line. Used on both the event - detail ("Linked reports") and the report detail ("Linked events"). */ .evt-linked-list { display: flex; flex-direction: column; gap: 8px; } .evt-linked-card, .evt-pick-row { @@ -1404,8 +1347,7 @@ img.user-av { object-fit: cover; background: var(--paper-2); } .evt-linked-cat { font-weight: 600; } .evt-linked-addr { font-size: 11px; color: var(--ink-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -/* A linked-report row: the deep-link card plus a trailing operator unlink control (a card is a -