/* Dispatch Board — signature looks (js/theme.js LOOKS). The colours, corners, shadows and fonts of a look are tokens written by theme.js for ; every screen follows them through css/app.css. This file holds only what tokens can't say: the page backdrop, the frosted top bar, type refinements and the picker's preview cards. Loaded last. Without data-look (the classic look) nothing here applies. */ /* ---------- page ---------- */ :root[data-look] body { background: var(--page-bg, none), var(--bg); background-color: var(--bg); font-family: var(--font-body, "Public Sans", -apple-system, "Segoe UI", sans-serif); } :root[data-look] { --shadow-lift: var(--shadow); } :root[data-look] body, :root[data-look] .btn, :root[data-look] input, :root[data-look] select, :root[data-look] textarea { font-feature-settings: "cv11", "ss01", "calt"; } :root[data-look] h1, :root[data-look] h2, :root[data-look] h3 { letter-spacing: -0.015em; } :root[data-look="executive"] h1, :root[data-look="executive"] h2, :root[data-look="executive"] h3 { font-weight: 600; letter-spacing: -0.005em; } :root[data-look="executive"] .brand h1 { font-size: 22px; } :root[data-look="executive"] .drawer h2, :root[data-look="executive"] .sp-head h2 { font-size: 24px; } /* ---------- top bar: a frosted card when the look has no dark bar or wallpaper of its own ---------- */ :root[data-look][data-wall="none"] .topbar { background: var(--look-bar); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px 10px 16px; box-shadow: var(--shadow); } /* A look's own dark bar: no side shading (that is for photographs), and a fine light edge. */ :root[data-look][data-wall="look"] .topbar { --wall-overlay: linear-gradient(transparent, transparent); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), var(--shadow); } :root[data-look][data-wall="look"] .topbar .brand h1, :root[data-look][data-wall="look"] .topbar .brand-sub, :root[data-look][data-wall="look"] .topbar .top-btn { text-shadow: none; } /* ---------- surfaces ---------- */ :root[data-look] .kpi-card .kpi-value, :root[data-look] .credit-kpi strong, :root[data-look] .kpi-card .value { letter-spacing: -0.02em; } :root[data-look="graphite"] .kpi-card, :root[data-look="graphite"] .credit-kpi, :root[data-look="graphite"] .board, :root[data-look="graphite"] .attention { box-shadow: none; } :root[data-look="graphite"] .drawer { box-shadow: none; border-left: 1px solid var(--border-strong); } :root[data-look="graphite"] .tabbar .tab[aria-selected="true"] { color: var(--ink); } /* Aurora: the summary tiles and the top bar are frosted, so the light behind the page shows through them. Panels that scroll content under sticky headers stay solid. */ :root[data-look="aurora"] .kpi-card, :root[data-look="aurora"] .credit-kpi { background: color-mix(in srgb, var(--surface) 72%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } :root[data-look="obsidian"] .kpi-card, :root[data-look="obsidian"] .credit-kpi, :root[data-look="obsidian"] .board, :root[data-look="obsidian"] .attention { background-image: linear-gradient(180deg, color-mix(in srgb, var(--ink) 2.5%, transparent), transparent 64px); } :root[data-look="porcelain"] .kpi-card, :root[data-look="porcelain"] .credit-kpi, :root[data-look="porcelain"] .board, :root[data-look="porcelain"] .attention { border-color: color-mix(in srgb, var(--border) 55%, transparent); } :root[data-look="carbon"] .kpi-card, :root[data-look="carbon"] .credit-kpi { border-top: 2px solid color-mix(in srgb, var(--accent) 55%, var(--border)); } :root[data-look="executive"] .kpi-card, :root[data-look="executive"] .credit-kpi { border-top: 2px solid color-mix(in srgb, var(--accent) 60%, var(--border)); } /* ---------- the picker (js/themes.js): a small mock of the board drawn with the look's own tokens ---------- */ .look-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .look-card { display: flex; flex-direction: column; padding: 0; font: inherit; text-align: left; cursor: pointer; overflow: hidden; color: var(--ink); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px; transition: border-color .12s ease, box-shadow .12s ease, transform .18s ease; } .look-card:hover { transform: translateY(-1px); border-color: var(--ink-faint); } .look-card.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); } .look-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .look-prev { display: flex; flex-direction: column; gap: 5px; height: 96px; padding: 7px; background: var(--page-bg, none), var(--bg); background-color: var(--bg); border-bottom: 1px solid var(--border); } .look-prev i { display: block; } .look-prev .lp-bar { display: flex; align-items: center; gap: 4px; height: 15px; padding: 0 5px; border-radius: calc(var(--radius) / 2.4); background: var(--look-bar); border: 1px solid var(--border); } .look-prev .lp-bar.dark { border-color: transparent; } .look-prev .lp-mark { width: 7px; height: 7px; border-radius: 2px; background: var(--accent); } .look-prev .lp-line { width: 28px; height: 3px; border-radius: 2px; background: var(--ink); opacity: .75; } .look-prev .lp-bar.dark .lp-line { background: #fff; } .look-prev .lp-dot { width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: var(--surface-3); border: 1px solid var(--border-strong); } .look-prev .lp-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } .look-prev .lp-kpis i { height: 20px; border-radius: calc(var(--radius) / 2.4); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); position: relative; } .look-prev .lp-kpis i::after { content: ""; position: absolute; left: 4px; bottom: 4px; width: 45%; height: 4px; border-radius: 2px; background: var(--ink); opacity: .8; } .look-prev .lp-kpis i:nth-child(3)::after { background: var(--accent); opacity: 1; } .look-prev .lp-rows { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; padding: 0 5px; border-radius: calc(var(--radius) / 2.4); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); } .look-prev .lp-rows i { height: 5px; border-radius: 3px; } .look-prev .lp-rows .a { width: 52%; margin-left: 8%; background: var(--status-transit); } .look-prev .lp-rows .b { width: 34%; margin-left: 40%; background: var(--status-available); } .look-prev .lp-rows .c { width: 26%; margin-left: 20%; background: var(--status-risk); } .look-foot { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px 9px; } .look-foot strong { font-size: 13px; font-weight: 650; } .look-foot small { font-size: var(--fs-sm); line-height: 1.35; color: var(--ink-muted); } .look-card.classic .look-prev { background: var(--bg); } @media (prefers-reduced-motion: reduce) { .look-card:hover { transform: none; } } @media print { :root[data-look] body { background: #fff; } }