/* * Copyright Stefan Press Consulting * Created using Claude Code. */ /* Auto Appraisal Software — tablet-first UI */ :root{ --bg:#0e1116; --bg2:#151a22; --panel:#1b212b; --panel2:#222a36; --line:#2e3846; --line2:#3d4a5c; /* --ink3 was #748296, which measured 4.14:1 on --panel and 3.70:1 on --panel2 — under the 4.5:1 minimum, on the colour used for every hint, caption and secondary line in the app. This is read at a kerbside in daylight, where a screen is already fighting the sun. #8b99ad measures 5.59, 5.00 and 6.54 against panel, panel2 and bg. */ --ink:#e8edf4; --ink2:#a7b4c6; --ink3:#8b99ad; /* --------------------------------------------------------------------- THE BRAND, AS TOKENS, BECAUSE A COMPANY CAN NOW REPLACE IT. These used to be two variables and a scattering of literals: #d9a63c and #b0821d in the primary button's gradient, #8d6716 on its border, #241a05 for the text on top of it, and rgba(201,150,46,…) at five different alphas for every focus ring and soft wash in the application. All of them were the amber, written out by hand, and every one of them would have stayed amber on a firm that had chosen navy. So the whole family is derived from one accent and named here. ui.js recomputes the lot from a company's brand_accent — see applySkin() — and the values below are the product's own, which is what a company that has never opened the Appearance panel keeps. --brand-rgb IS THE SAME COLOUR AS --brand, as three numbers. It exists because rgba() cannot take a hex, and the washes need the alpha: written as rgba(var(--brand-rgb), .18) each rule keeps its own transparency instead of every one of them collapsing to a single "tint" token. --brand-ink is the text ON the brand, and it is the reason this is a family rather than a colour. Amber wants near-black on it; a navy brand wants white. Picking that by luminance is one line in applySkin() and unanswerable in a stylesheet. --------------------------------------------------------------------- */ --brand:#c9962e; /* chrome / amber */ --brand-rgb:201,150,46; --brand2:#f0c05a; /* the lighter partner: links, figures, active tabs */ --brand-hi:#d9a63c; /* top of the primary button's gradient */ --brand-dark:#b0821d; /* and its bottom */ --brand-hi2:#e6b64c; /* the same two, hovered */ --brand-dark2:#c08f22; --brand-edge:#8d6716; /* its border */ --brand-ink:#241a05; /* text and icons ON any of the above */ --accent:#4ea3e0; --ok:#3fa46a; --warn:#d9973a; --bad:#d0554b; --radius:10px; --tap:46px; /* minimum tablet tap target */ /* Height of the sticky top bar: a 46px tap row, 10px padding top and bottom, and a 1px border. Four places used to hard-code this by hand as 76, 78, 60 and 170, and three of them were already wrong. Every anchor offset now derives from here — if the bar ever gains a row, change this line only. */ --bar:67px; --shadow:0 8px 28px rgba(0,0,0,.45); --font:"Segoe UI",Roboto,-apple-system,"Helvetica Neue",Arial,sans-serif; } /* --------------------------------------------------------------------------- `hidden` MUST ACTUALLY HIDE. The HTML `hidden` attribute is not a CSS feature — it is a rule in the browser's OWN stylesheet, `[hidden] { display: none }`, at user-agent origin. In the cascade every author declaration beats every user-agent one, whatever the specificity, so any rule in THIS file that sets `display` on an element silently cancels it. `.topbar nav a{display:inline-flex}` and `.btn{display:inline-flex}` did exactly that: every control the application hides by setting el.hidden — the Companies and Test System links, the New company button, the Sys Admin badge — was styled straight back into view, on every browser, for every account. Nothing caught it. The pages set the property correctly, the property read back as true, and the jsdom suites asserting el.hidden === true all passed: jsdom does not model cascade origin, so the one thing that was wrong is the one thing it cannot see. In a browser the link was simply there. !important on purpose. `hidden` means "not relevant", which is a statement about the document and not a layout suggestion; no styling rule has any business overruling it. This also has to sit ABOVE the rules it protects, and apply to everything rather than to the elements somebody remembered — a per-element patch is what was here before, one line for one button, which left every other hidden control still visible. --------------------------------------------------------------------------- */ [hidden]{display:none !important} /* Tell the browser this is a dark UI, so the controls it draws ITSELF follow. Without it the native date picker, the beside it, * and a reader had to work out that the second was the one that could change. * * .brand-pick is added by ui.js ONLY when there is more than one place to go. * Without it the name is text and looks like text — a control that opens a * list of one is a promise the bar cannot keep. */ .topbar .brand-words.brand-pick{ cursor:pointer;border-radius:6px;padding:1px 5px;margin-left:-5px; text-decoration:underline;text-decoration-style:dotted; text-decoration-color:var(--ink3);text-underline-offset:3px; } .topbar .brand-words.brand-pick:hover{background:var(--panel);text-decoration-color:var(--ink)} .topbar .brand-words.brand-pick:focus-visible{ outline:2px solid var(--brand);outline-offset:2px;text-decoration:none} /* Working somewhere other than your own company: the name itself goes amber, because it is the thing naming whose records are on screen. */ .topbar .brand-words.firm-elsewhere{color:var(--warn)} /* ---- the picker itself ---- */ .pick-list{display:flex;flex-direction:column;gap:6px;margin-bottom:4px} .pick-head{ font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3); margin:10px 2px 2px} /* Each choice says what it MEANS, which is the whole reason this is a dialog and not a dropdown: a