/* Customer dashboard. Loaded only by base_dashboard.html and portfolio.html, so login/admin/runs pages don't pay for it — which is also why the palette below can sit on :root and override the app-wide tokens without leaking off the dashboard. Ported from the handover pack's prototype (260906-aeo-handover-v1210hrs/ dashboard.html) essentially verbatim: same tokens, same class names, same DOM contract. Templates emit the prototype's markup, so a rule here should read the same as its counterpart there. See docs/ui-design.md. Two adaptations the port needs, both because the prototype is a standalone file and we render inside base.html: - the prototype's .shell is base.html's .layout, and its bare `main` selector has to be `main.content` to outrank app.css's `.content` - the prototype is a JS-tabbed SPA; we serve a page per panel, so .panel and its display toggling are dropped. Sub-nav items are in-page anchors. */ :root { --ink: #16241c; --ink2: #4d5f55; --ink3: #83928a; --line: #e2e7e3; --line2: #c9d3cc; --page: #f7f8f6; --card: #fff; --soft: #f0f3f0; --dgreen: #1c7a4e; --green: #1c7a4e; --pale: #eaf3ed; --pale2: #eaf3ed; --gold: #a8790c; --palegold: #f7edd6; --bad: #8c3a2b; --palebad: #f7e5e0; /* The MICHELIN Guide's red, for the key emblem on a portfolio card only. */ --michelin: #c8102e; --bar-you: #1c7a4e; --bar-other: #a8b3ac; --bar-track: #ecefec; --r: 10px; /* Chart.js reads colour vars off document.documentElement (static/js/charts.js), so the series colour has to be global rather than scoped to a component. */ --chart-you: #1c7a4e; } * { box-sizing: border-box; } /* `hidden` is display:none in the UA sheet at the weakest possible specificity, so any class that sets display wins over it — .btn is inline-block, which is why the Clear button stayed on screen after the script had hidden it. */ [hidden] { display: none !important; } html { scroll-behavior: smooth; } a { cursor: pointer; } body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--font, Inter), Inter, system-ui, sans-serif; font-size: 14px; line-height: 1.55; font-feature-settings: "tnum" 1; -webkit-font-smoothing: antialiased; } /* Landing-look backdrop: the gausslabshq.com background grid and colour washes, drawn behind the content area only - the sidebar keeps its solid green. Same construction as the landing page's .bg-grid / .bg-washes: fixed full-viewport layers at z-index 0 under .layout, so the page ground shows them and opaque cards cover them. */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .7; background-image: linear-gradient(rgba(26,28,32,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(26,28,32,.06) 1px, transparent 1px); background-size: 46px 46px; mask-image: linear-gradient(180deg, rgba(0,0,0,1), rgba(0,0,0,.55) 55%, rgba(0,0,0,.8)); -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1), rgba(0,0,0,.55) 55%, rgba(0,0,0,.8)); } body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(900px 620px at 8% 4%, rgba(232,121,28,.12), transparent 60%), radial-gradient(900px 700px at 96% 10%, rgba(28,122,78,.10), transparent 62%), radial-gradient(1000px 700px at 50% 96%, rgba(232,121,28,.07), transparent 60%); } /* Keep the shell above the backdrop layers. */ .topbar, .layout { position: relative; z-index: 1; } /* ---------- shell ---------- base.html gives us