/* =========================================================================== EasyQuoteNext -- one stylesheet for the whole application. SELF-HOSTED ONLY. No CDN, ever, and no web font. The legacy app pulls from six external hosts, several over plain http on an https page, and one page loads its stylesheet from w3schools.com -- every one of those is a failure point on a flaky link. A web font would be 30-100KB before a single pixel of content renders, so the type stack below is entirely local. No npm, no build step, no preprocessor: one file of custom properties, in the house style of QbAutoBilling.Web. Structure 1 tokens 2 reset and base 3 layout: the full-viewport rule 4 application shell (top bar, navigation) 5 page furniture (headings, cards, panels) 6 forms and controls 7 buttons 8 data grid 9 pagination 10 status pills (legacy traffic-light colours, meaning preserved) 11 busy states 12 login 13 utilities and motion =========================================================================== */ /* --------------------------------------------------------------------------- 1 TOKENS Colour discipline is 60 neutral / 30 ink / 10 brand, per MD Docs/Web Design Brief.md. Hierarchy comes from weight and size, not from extra colours. --------------------------------------------------------------------------- */ :root { /* Brand. #465c71 is EasyQuote's existing slate chrome, carried across so the new screens are recognisably the same product. --brand-deep is the one used behind white text: the mid slate fails WCAG AA at small sizes. */ --brand: #465c71; --brand-deep: #33475a; --brand-tint: #eef2f7; --brand-tint-strong:#dde5ee; /* Ink and neutrals. */ --ink: #1b2733; --ink-soft: #47566a; --muted: #6b7a8d; --bg: #f4f6f9; --surface: #ffffff; --border: #e2e8f0; --border-strong: #cbd5e1; /* Status. These three are LOAD-BEARING: the call-status traffic lights at EQnet/Main.Master:44-66 carry meaning to users and must not be restyled into something prettier. Green #459E00, black #000000, red #CC0000. */ --good: #459e00; --neutral: #000000; --bad: #cc0000; /* ------------------------------------------------------------------ HOW TALL A DATA GRID MAY GET before it scrolls inside itself, which is what keeps its column headings on screen (see .grid-scroll). 100vh less an allowance for the chrome above it -- the 56px title bar, the 34px menu strip, the page heading and the filter row. Deliberately ONE number rather than per-screen: a heading that sticks on one report and not another is worse than either. A short table is unaffected. This is a MAXIMUM, so a grid with six rows stays six rows tall and never shows a scrollbar. ------------------------------------------------------------------ */ --grid-viewport: calc(100vh - 15rem); /* ------------------------------------------------------------------ THE STICKY CHROME'S HEIGHT, as ONE number. Two tiers, both sticky: .topbar at top:0, and .menustrip at top:56px with a 34px inner -- which is where 90px comes from, and it is the project's own figure already (rule 5.4d quotes the same number when it explains the page-level sticky heading it rejected). IT EXISTS SO THAT ANYTHING SCROLLED TO LANDS BELOW THE CHROME rather than underneath it. Used as scroll-margin-top, which both scrollIntoView() and a #fragment jump honour -- so one number serves the script and the browser, and they cannot drift apart. ------------------------------------------------------------------ */ --eq-chrome-h: 90px; /* Tints for the status pills, so the three hues above stay exact while the pill background stays light enough for dark text. */ --good-tint: #e8f5e0; --bad-tint: #fbe6e6; --warn: #b26a00; --warn-tint: #fdf0dd; --info-tint: #e7eef7; /* Legacy error colours, reused for form validation so the two systems agree on what "wrong" looks like: error pink #ffb5b5, error text #990000. */ --error-bg: #ffb5b5; --error-ink: #990000; /* Microsoft Excel's own brand green, on Tim's instruction (21 August 2026) that the Excel button carry the Excel colour. #217346 is the current Office value; the darker #1a5c38 is for hover. WHY A BRAND COLOUR IS ALLOWED HERE when nothing else in this application uses one: the green is not decoration, it is the affordance. The legacy screens signal "this downloads a spreadsheet" with the green Excel icon (images/Excel Icon.jpg, used on every report in EQNetAdmin), so a user of twenty years reads green-and-Excel as one thing. Reproducing the SIGNAL without reproducing a bitmap is the point -- see .btn--excel. */ --excel: #217346; --excel-hover: #1a5c38; /* Type. One family, local only. Segoe UI Variable is present on Windows 11, which is what every user of this system runs. */ --font: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "Cascadia Mono", Consolas, "SF Mono", "Courier New", monospace; --fs-eyebrow: .75rem; --fs-small: .8125rem; --fs-body: .9375rem; --fs-lead: 1.0625rem; --fs-h3: 1.0625rem; --fs-h2: 1.25rem; --fs-h1: 1.5rem; /* Spacing, on an 8px scale. */ --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4rem; --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --radius-pill: 999px; /* Flat surfaces, depth from tint rather than heavy shadow. --shadow-sm is a hairline that seats a small control on its background; --shadow-lg is the cast of something that OVERLAYS the page -- a menu, a popover, a dialog. Neither is the panel lift. THERE IS NO --shadow, AND THAT IS DELIBERATE (12 September 2026). It used to sit here, between the two, and it was a second opinion about the same job --eq-lift does: lifting a panel off the ground. Two tokens for one job is a standard waiting to drift, and it did -- --eq-lift was strengthened at Tim's request in August and --shadow was not, so every .card got deeper while every .grid-wrap stayed flat, for three weeks, until he spotted it on screen. A panel, a card, a grid: all lift with var(--eq-lift). Rule 5.4l. */ --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05); --shadow-lg: 0 4px 8px rgba(16, 24, 40, .06), 0 24px 48px -16px rgba(16, 24, 40, .18); --ring: 0 0 0 3px rgba(70, 92, 113, .22); /* ------------------------------------------------------------------ THE LIFT -- the shadow that makes a panel float off the page. ------------------------------------------------------------------ Tim, 26 August 2026: "one of the graphical design features i like is where there is a Shodow effect on the elements to make them look as if they are floating off the page." Recorded as a design rule in MD Docs/Web Design Brief.md 1a.21, and as ONE token here so every panel lifts by the same amount. Panels that disagree about their shadow read as being at different depths, which is the thing that makes a page look assembled rather than designed. Two layers, and both are doing a job: a 1px contact shadow that sits the panel ON the surface, and a wide soft one that gives it height. A single large blur alone reads as a smudge. Deliberately stronger than --shadow, which is the app's general-purpose one: these panels sit on the legacy's grey ground (--eq-ground #b6b7bc), and a shadow tuned for a near-white page disappears on it. NOT applied to a field box inside a panel (.eq-formbox) or to a table. Nested shadows cancel the effect -- if everything floats, nothing does. ------------------------------------------------------------------ */ /* STRENGTHENED 27 August 2026 on Tim's instruction: "Can you make the shadow element more pronounced?" Three layers now, not two, and each is doing a different job -- which is why this reads as depth rather than as a grey smudge: 1. a 1px contact shadow, so the panel sits ON the surface; 2. a mid shadow at 6px, which is what the eye reads as HEIGHT; 3. a wide, soft, far-offset one, which is the ambient cast. Turning one blur up instead would just darken the edge. The middle layer is the one that made the difference. Still tuned against the legacy's grey ground (--eq-ground #b6b7bc) and the page slab (--eq-page #f6f6f6), which are both mid-tones -- a shadow calibrated on white disappears on them. If the ground ever changes, re-check this. */ --eq-lift: 0 1px 2px rgba(16, 24, 40, .14), 0 6px 12px -4px rgba(16, 24, 40, .22), 0 18px 40px -12px rgba(16, 24, 40, .38); /* ----------------------------------------------------------------------- THE LEGACY PALETTE, LIFTED EXACTLY -- Tim, 25 August 2026: "I'm happy for you to continue to use the web design brief from a styling point of view, but please retain my color scheme." So the CRAFT comes from MD Docs/Web Design Brief.md (spacing scale, type hierarchy from weight not colour, restraint) and the COLOURS come from here. Every value below is copied from the legacy stylesheets, not sampled from a screenshot, so they are exact: EQnet/Styles/BaseStyle.css the chrome, page, headings, links EQnet/Styles/GM.css the "Ext" grid skin and the form box Do NOT "modernise" these into a tidier ramp. A user of twenty years reads this blue-on-slate as EasyQuote; that recognition is the requirement. ----------------------------------------------------------------------- */ /* Chrome. Two tiers: a lighter blue title bar above a darker menu strip. */ --eq-titlebar: #4b6c9e; /* BaseStyle .header */ --eq-menustrip: #3a4f63; /* BaseStyle div.hideSkiplink */ --eq-menu: #465c71; /* BaseStyle div.menu ul li a */ --eq-menu-ink: #dde4ec; --eq-menu-line: #4e667d; --eq-menu-on: #afd7fb; /* selected tab, with BLACK text */ --eq-menu-hover: #bfcbd6; /* hover, with #465c71 text */ /* The page slab: a light sheet with a slate hairline, on a grey ground. */ --eq-page: #f6f6f6; /* BaseStyle .page */ --eq-page-line: #496077; --eq-ground: #b6b7bc; /* the body colour behind the slab */ /* Type. Headings are small-caps at a LIGHT weight -- unusual, and the most recognisable thing about the legacy screens. Body ink is a soft grey. */ --eq-heading: #666666; --eq-body-ink: #696969; /* Links. A saturated blue, underlined -- the legacy's default anchor. */ --eq-link: #034af3; --eq-link-hover: #1d60ff; /* The green forward arrow on every quote step, sampled from the legacy's Images/arrow_right_32.png. Tokens rather than literals inside the inline SVG, so the one path is reused by every step and a theme cannot end up drawing a green arrow on a green ground. */ --eq-arrow: #8dc63f; --eq-arrow-line: #5a8f1e; /* The "Ext" grid skin from GM.css: a pale blue header over banded rows, every cell hairlined. This is what the stats table on the home page and every legacy GridView actually look like. */ --eq-grid-head: #afd7fb; --eq-grid-head-ink: #15428b; /* The gridline a RULED list draws, on every cell and around the table. GM.css .ExtGridRowStyle td and .ExtGridHeaderStyle both use it (:467, :498), so one token serves the header and the body as the legacy does. */ /* THE LEGACY'S ACCORDION BARS, read from the jQuery UI theme the admin master page actually links (Scripts/jQuery/3.6.0/jquery-ui.min.css): .ui-state-default for a closed bar and .ui-state-active for the open one. Tim asked for this screen to wear the legacy's styling, 14 September 2026. */ /* THE COSTING LIST'S TWO ROW COLOURS. The legacy sets Drawing.Color.LightYellow and Drawing.Color.LightPink on the row, which are exact named colours -- #FFFFE0 and #FFB6C1. Kept exactly, because a manager reads this screen by colour and has done for years. */ --eq-row-yellow: #ffffe0; --eq-row-red: #ffb6c1; /* LightGreen, #90EE90 -- the third of the legacy's named colours. Franchise Leads paints all three CELL BY CELL where Costing paints whole rows, so the green was not needed until 15 September 2026. Same source, same exactness: a rep reads these screens by colour. */ --eq-row-green: #90ee90; --eq-acc-bar: #d7ebf9; /* closed bar */ --eq-acc-bar-ink: #2779aa; /* closed bar text */ --eq-acc-bar-edge: #aed0ea; /* closed bar border */ --eq-acc-bar-on: #3baae3; /* the open bar -- solid, white text */ --eq-acc-bar-on-edge: #2694e8; --eq-grid-rule: #99bbe8; --eq-grid-line: #99bbe8; --eq-grid-row: #e0eefb; /* band 1; band 2 is plain white */ --eq-grid-ink: #333333; /* The pale blue box a group of fields sits in (GM.css .SectionsDiv). */ --eq-formbox: #e0eefb; --eq-formbox-line: #99bbe8; /* THE TAB STRIP -- jQuery UI's cupertino theme, which is what the legacy tabs actually are (cupertino/jquery-ui-1.10.3.custom.css:822-828 and :846-852). ONE blue at two strengths, exactly as cupertino does it with its 80% and 50% glass overlays; see the note above .eq-tabs for why this is expressed as tints of a single value rather than two loose hexes. Requested by Tim on 5 September 2026 in place of a flat grey strip. */ --eq-tab-blue: #3baae3; /* cupertino's one tab colour */ --eq-tab-line: #aed0ea; /* its inactive border */ --eq-tab-line-on: #2694e8; /* its active border */ /* The two strengths, as literal hex. ==================================================================== NO color-mix() HERE -- THE SAME RULING AS THE CLOSE BUTTON'S. ==================================================================== color-mix(in srgb, var(--eq-tab-blue) 18%, #fff) is the tidier way to say this and it was the first version written. The house decision against it is already recorded on .eq-x below: it needs a browser this project cannot assume, because the target is low-spec machines, some of them old. It is worse in a custom property than in a normal declaration, which is worth adding to that note: an unsupported value does not fall back to the previous rule, it becomes invalid at computed-value time, so `background: var(--eq-tab-off)` resolves to NOTHING and the tab loses its colour entirely -- the exact thing this change exists to add. So the mix is done here, over #ffffff, and recorded so it can be redone: blue*p + 255*(1-p) per channel, from #3baae3. 18% -> #DCF0FA 34% -> #BCE2F5 10% -> #EBF6FC Change --eq-tab-blue and these three must be recomputed with it. */ --eq-tab-off: #dcf0fa; /* 18% of the blue */ --eq-tab-hover: #bce2f5; /* 34% */ --eq-tab-on: var(--eq-tab-blue); --eq-tab-strip: #ebf6fc; /* 10% -- the band behind the tabs */ /* Cupertino puts BLACK on the inactive tabs and WHITE on the active one. The black is softened to the Ext header ink, which is the blue this application already uses for text on a pale blue ground -- pure black on a tinted tab is heavier than any other label on these screens. */ --eq-tab-off-ink: #15428b; --eq-tab-on-ink: #0d3a6b; --eq-tab-on-ink-solid: #ffffff; /* THE ACCORDION on Vehicle Details (AjaxControlToolkit Accordion, 550 uses across the estate). Sampled from Tim's screenshots of 26 August 2026. Its own tokens rather than reusing the grid palette, because the open pane is a saturated blue with white text that nothing else here uses -- the grid header (--eq-grid-head) is far paler and would leave the open pane indistinguishable from the closed ones, which is the one thing this control exists to communicate. */ --eq-acc-open: #45a3dd; /* the OPEN pane's bar */ --eq-acc-open-hi: #7cc4ec; /* its gradient top -- the legacy has one */ --eq-acc-open-ink: #ffffff; --eq-acc-shut: #eaf4fd; /* a CLOSED pane's bar */ --eq-acc-shut-hi: #ffffff; --eq-acc-shut-ink: #15428b; /* the same ink as the grid header */ /* THE SETTINGS ACCORDION -- Settings > Dealership Details, Settings > Staff Administration. SEPARATE TOKENS FROM THE --eq-acc-* SET ABOVE, and the separation is the point: those were sampled from Tim's screenshots of the quote wizard's Vehicle Details pane, that screen is signed off, and retuning them here would restyle a screen nobody asked to change. THESE ARE MEASURED, not sampled from a picture, and they come from the legacy screen Tim was comparing against. EQNetAdmin/Main.Master:15 loads Scripts/jQuery/3.6.0/jquery-ui.min.css -- the "Redmond" theme -- and DealershipPref.aspx:169 builds the page with $("#DealerPrefAccordian") .accordion(), so every bar on it is drawn by .ui-state-default and .ui-state-active. The values below are that file's, verbatim. WHY THIS CHANGED, 11 September 2026. Tim, comparing the two screens: "your accordion levels are predominantly white on a white background with everything else white as well, so it doesn't stand out". He was right and the cause was exact -- a closed bar ran a gradient from #ffffff down to #eaf4fd on a white surface, so its top half WAS the page, and the body below it was #fff on #fff as well. Redmond never puts white on a bar. A closed one is a solid #d7ebf9 inside a definite #aed0ea border, and the pane body is tinted too. The body tint is half the fix and is the half easily left out: without it an open pane's content still dissolves into the page under a coloured bar. */ --eq-set-shut: #d7ebf9; /* .ui-state-default */ --eq-set-shut-hi: #e8f3fb; /* its glass_80 sheen -- a TINT, never white */ --eq-set-shut-edge: #aed0ea; --eq-set-shut-ink: #2779aa; --eq-set-hover: #e4f1fb; /* .ui-state-hover */ --eq-set-hover-edge: #74b2e2; --eq-set-hover-ink: #0070a3; --eq-set-open: #3baae3; /* .ui-state-active */ --eq-set-open-hi: #63bde9; --eq-set-open-edge: #2694e8; --eq-set-open-ink: #ffffff; --eq-set-body: #f2f5f7; /* .ui-widget-content */ --eq-set-body-edge: #dddddd; /* ------------------------------------------------------------------ THE STAFF EDITOR'S GROUND AND ITS SECTION CARDS Tim, 11 September 2026, putting our Account Rights layer beside the legacy's: "white on white on white on white. vs legacy. which looks better?" The legacy, plainly -- and the reason is that the legacy gives a card something to sit ON, which ours never did. Measured from EQNetAdmin/StaffAdministration.aspx, not sampled from the screenshot: .PopUpbody on the RIGHTS layer -> #e7e7e7 (:966, overridden) .PopUpbody default -> #f2f2f2 (YUIAjaxModelPopupCSS) .TABCOVER_0 section card -> #e5f3ff, 1px #000, radius 15px, 20px padding, centred (:159-166) every table and -> solid 1px lightgray THE GROUND IS THE WHOLE TRICK. A blue card on a grey body reads as a card; the same card on a white body reads as nothing at all. Both tones are here because the two layers genuinely differ: Rights holds four cards and gets the darker #e7e7e7, Details holds one table and keeps the paler default. ------------------------------------------------------------------ */ --eq-sunken: #e7e7e7; /* the Rights layer's ground */ --eq-panel-quiet: #f2f2f2; /* the Details layer's ground */ --eq-fieldset: #e5f3ff; /* .TABCOVER_0 */ --eq-fieldset-edge: #000000; /* the legacy really does use black */ --eq-rule: #d3d3d3; /* "lightgray", the table and cell border */ /* SELECTION. BaseStyle.css .GridSelectedRowStyle, verbatim: background-color: #a0dbf9; font-weight: bold; color: Navy; All three carry the signal together -- see the .is-selected rule for why the weight and the colour are not optional. */ --eq-selected: #a0dbf9; --eq-selected-ink: #000080; /* The NOTE list's own highlight, and it is a DIFFERENT blue from the grid selection above on purpose: ClientNotes.ascx.vb:437 uses #99CCFF while BaseStyle.css's GridSelectedRowStyle uses #a0dbf9. Two lists, two blues, in the system being reproduced. Do not "tidy" them into one -- a rep comparing the two screens would see the note list change colour. */ --eq-note-picked: #99ccff; } /* --------------------------------------------------------------------------- 2 RESET AND BASE --------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* =========================================================================== THE ROOT SCALE -- ONE KNOB FOR THE SIZE OF THE WHOLE INTERFACE Tim, 26 August 2026, with the two home pages side by side: "your app is still a lot larger than the legacy." Most of that difference is not padding, it is TYPE SIZE, and the figure is worth writing down: the legacy sets body { font-size: .80em } (EQnet/Styles/BaseStyle.css:8), which is 12.8px on a default 16px root. This app was running 15px. Every rem in this file -- every padding, gap, radius and heading -- is a multiple of the root, so a 15px root shrinks the entire interface by about 6% at once, proportionally, rather than making the text small inside boxes that stayed big. This is the knob. 16px is the browser default and what this app used to run. 15px is here. 14px lands almost exactly on the legacy's density; 12.8px would match it to the pixel and is, in my view, too small to ask a rep on a laptop to read all day. NOT set on `body`, and that matters: rem resolves against the ROOT element, so a font-size on body would shrink the text and leave every rem-based dimension where it was -- which is the "small text in big boxes" failure this is meant to avoid. It respects the user's own browser text size, because it is set in px on a root that -webkit-text-size-adjust already pins: a rep who has scaled their browser up still gets the scaling, since browser zoom multiplies px too. =========================================================================== */ html { font-size: 15px; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--fs-body); line-height: 1.55; -webkit-font-smoothing: antialiased; } a { color: var(--brand-deep); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 2px solid var(--brand-deep); outline-offset: 2px; border-radius: var(--radius-sm); } /* Keyboard users must be able to skip the navigation. */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--surface); color: var(--ink); padding: var(--s3) var(--s4); border-radius: 0 0 var(--radius) 0; box-shadow: var(--eq-lift); } .skip-link:focus { left: 0; } /* --------------------------------------------------------------------------- 3 LAYOUT -- APPLICATION SCREENS USE THE WHOLE SCREEN Read outwards: 92% use nearly all of the viewport max(1200px, 92%) 1200px is a FLOOR, never a ceiling. On a 2560px monitor this is 2355px; on 1920px it is 1766px. min(100%, ...) but never wider than the viewport, so the PAGE never scrolls sideways -- inner regions scroll on their own. The legacy app is pinned at a fixed 1340px (EQnet/Styles/BaseStyle.css:119), so a 2560px monitor wastes 1220px while the user scrolls past content that would have fitted. That is a defect to remove, not a behaviour to reproduce. --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- THE APPLICATION SURFACE: 92% of the screen, floor 1200px, CEILING 2200px. THE CEILING IS A DELIBERATE AMENDMENT TO RULE 5.5, MADE BY TIM ON 27 AUGUST 2026: "can we limit this width to 2200 px max width please". Do not "restore" max-width: none - read this first. Rule 5.5 as originally written said the 1200px was "a floor, not a ceiling" and the user-level standard says never to cap a working screen. That was aimed at the legacy's 1340px cap, which wasted 1220px on a 2560px monitor and made a rep scroll sideways past content that would have fitted. The rule was right about the problem and slightly wrong about the remedy: past roughly 2200px a quote screen stops gaining anything, and a line of key-and-value that runs 2355px puts the label and its number so far apart that the eye loses the row. Tim is reading this on a 2560px screen and asked for the cap. So the floor and the ceiling now do different jobs, and both are needed: 92% use nearly all of an ordinary screen, with a gutter either side 1200px FLOOR - a 1280px laptop must not end up narrower than a marketing page, which is what 92% alone would do 2200px CEILING - beyond this, width stops helping and starts hurting 100% never wider than the viewport, so the PAGE never scrolls sideways on a phone; inner regions scroll on their own instead Worked through, so nobody has to re-derive it: 2560 -> 2200 (capped, was 2355); 1920 -> 1766 (untouched, below the cap); 1280 -> 1200 (the floor lifts it); 400 -> 400 (the min clamps it). Only the widest screens change. This caps the CONTENT of the chrome as well, because .topbar__inner and .menustrip__inner are both .app-surface. That is intended: the coloured bars stay full-bleed while the menu items line up with the content beneath them. Capping only main would leave the menu strip visibly wider than the page. Data-dense grids may still go full-bleed with their own internal scroll - that part of rule 5.5 is unchanged, and .grid-scroll is where it happens. --------------------------------------------------------------------------- */ .app-surface { width: min(100%, max(1200px, 92%)); max-width: 2200px; margin-inline: auto; padding-inline: var(--s4); } main.app-surface { padding-block: var(--s6) var(--s8); } /* Widening the frame must widen the LAYOUT, never the line length. Only running prose keeps a reading measure. */ p, .lead, .note, .prose { max-width: 68ch; } /* --------------------------------------------------------------------------- THE CENTRED CONTENT COLUMN -- and why this is not a return to the 1340px cap The legacy centres its content in narrow columns inside the page slab: the home page search is a 1000px fieldset (BaseStyle .Reso_Fieldset_1), the stats table is 700px (Default.aspx:666), the Prospecting and Stocklist panels are 500px each. Tim's instruction of 25 August 2026 is to match that layout. That does NOT conflict with the full-screen rule, because the rule is about WORKING SCREENS -- boards, grids, lists, editors. A four-field search form stretched across 2355px is not more usable, it is less: the eye has to travel the width of the monitor between a label and its box. So the split is by CONTENT, not by page: .app-surface the shell and every data grid -> full width, unchanged .eq-column forms, panels, summary tables -> a centred measure Open Quotes and Used stock therefore stay full-bleed and keep the width win; the home page, login and the quote steps get a column. If a screen ever needs both, the grid simply sits outside .eq-column. --------------------------------------------------------------------------- */ .eq-column { width: min(100%, 1040px); margin-inline: auto; } .eq-column--narrow { width: min(100%, 720px); margin-inline: auto; } /* THE CLIENT SEARCH COLUMN. 350px, and that figure is the legacy's own: Default.aspx:596 wraps the entire search block -- heading, instruction, the pale blue field box and the button -- in style="width:350px; margin:0 auto" inside a fieldset roughly a thousand pixels wide. Reproduced rather than widened because Tim's side-by-side screenshots (26 August 2026) made the cost of the wider version measurable: filling the card gave a 709px input for a surname and a card 521px tall against the legacy's 353px, which is why the legacy fits FOUR blocks in 888px of screen (search, the counts table, Prospecting, Stocklist) and this page fitted two. A short column of fields is also read straight down, where a 709px row has to be scanned across. */ .eq-searchcol { width: min(100%, 350px); margin-inline: auto; } /* --------------------------------------------------------------------------- 4 APPLICATION SHELL --------------------------------------------------------------------------- */ /* TWO TIERS, as the legacy has: a lighter blue title bar carrying the identity, over a darker strip carrying the tabs. Reproduced because it is doing real work -- the title bar answers "which dealership am I in and as whom", which on a system where one person holds three credential rows across several branches is the question a rep needs answered before they trust anything on screen. */ .topbar { position: sticky; top: 0; z-index: 20; background: var(--eq-titlebar); color: #fff; box-shadow: var(--shadow-sm); } .topbar__inner { display: flex; align-items: center; gap: var(--s5); min-height: 56px; } /* The dealership line, in the legacy's light small-caps. Font-variant rather than text-transform, so "FOR123" keeps its full-height capitals while the words around it get small ones -- which is exactly how the legacy renders it and why the branch code stands out without being bolded. */ .brand { display: inline-flex; align-items: baseline; gap: .4rem; color: #f9f9f9; white-space: nowrap; font-size: 1.3125rem; font-weight: 700; font-variant: small-caps; letter-spacing: .01em; } .brand:hover { text-decoration: none; } .brand strong { font-weight: 700; } .brand span { font-weight: 700; } /* The section badge -- "Sales" in green beside the logo in the screenshot. The green is the legacy's own #459E00, already a token here because the call status lights use it. It marks WHICH MODULE you are signed in to, and that matters: the same human can hold a Sales and an Admin session at once, in two tabs, and the only thing distinguishing them is this word. */ .topbar__section { font-size: 1.125rem; font-weight: 600; font-variant: small-caps; color: #8fe04a; letter-spacing: .02em; } /* The menu strip is a SECOND bar below the title bar. */ .menustrip { position: sticky; top: 56px; z-index: 19; background: var(--eq-menustrip); } .menustrip__inner { display: flex; align-items: stretch; gap: var(--s4); min-height: 34px; } .nav { display: flex; align-items: stretch; gap: 2px; flex: 1 1 auto; flex-wrap: wrap; } /* SQUARE TABS, not pills. The legacy menu item is a bordered rectangle (BaseStyle div.menu ul li a: background #465c71, 1px #4e667d border, 4px 20px padding) and the selected one inverts to pale blue on black. Rounded pills read as a different product. */ .nav a { display: flex; align-items: center; background: var(--eq-menu); border: 1px solid var(--eq-menu-line); color: var(--eq-menu-ink); padding: .25rem 1.1rem; font-size: var(--fs-body); line-height: 1.35; white-space: nowrap; transition: background-color .12s ease, color .12s ease; } .nav a:hover { background: var(--eq-menu-hover); color: var(--eq-menu); text-decoration: none; } .nav a[aria-current="page"] { background: var(--eq-menu-on); color: #000; } /* Submenus use a real
, so they work with no JavaScript at all. */ .nav details { position: relative; } .nav details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; background: var(--eq-menu); border: 1px solid var(--eq-menu-line); color: var(--eq-menu-ink); padding: .25rem 1.1rem; line-height: 1.35; white-space: nowrap; height: 100%; } .nav details > summary::-webkit-details-marker { display: none; } .nav details > summary::after { content: " \25be"; opacity: .7; margin-left: .35rem; } .nav details > summary:hover { background: var(--eq-menu-hover); color: var(--eq-menu); } .nav details[open] > summary { background: var(--eq-menu-on); color: #000; } .nav details > .submenu { position: absolute; left: 0; top: calc(100% + .35rem); z-index: 30; min-width: 15rem; padding: var(--s2); /* WHITE ON DARK, BECAUSE THAT IS WHAT THE LEGACY MENU IS. Tim, 13 September 2026, on the Reports menu: "Please notice white font on dark menu buttons." The top-level buttons already used --eq-menu / --eq-menu-ink; only the DROPDOWN PANEL was painted on --surface, so opening a menu went from dark slate to a white card and back. The legacy's is one continuous dark strip (BaseStyle div.menu ul li a, #465c71 on a #4e667d border) and a rep of twenty years reads the whole menu as one object. Same tokens as the summary above, so the two can never drift apart again. */ background: var(--eq-menu); border: 1px solid var(--eq-menu-line); border-radius: var(--radius); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 2px; /* A DROPDOWN MUST NOT GROW PAST THE SCREEN. The Settings menu reproduces the legacy's own list -- around twenty items, most of them not yet built -- and on a laptop it was TALLER THAN THE VIEWPORT with no way to reach the bottom. The items were rendered, correctly, and simply could not be got at: Tim could not reach Mail Status at all (11 September 2026). It fails silently and it gets worse with every screen added, so the cap is on the rule rather than on one menu. 100vh minus the chrome minus a small gutter, so the panel always ends on screen whatever the window height. --eq-chrome-h is the title bar plus the menu strip, which is exactly what sits above it. */ max-height: calc(100vh - var(--eq-chrome-h) - 2rem); overflow-y: auto; /* NOTE: overscroll-behavior is NOT set here. Rule 5.4k -- it may only ever be in effect on a box that can actually scroll, and app.js section 22 adds .is-scrollable when this one overflows. Declaring it statically is what killed the mouse wheel over short lists twice in one day. */ } .nav details > .submenu a { color: var(--eq-menu-ink); border-radius: var(--radius-sm); padding: .4rem .6rem; } /* Hover inverts to the same pale-blue-on-dark the legacy uses for a selected item, so hover and current read as one family. */ .nav details > .submenu a:hover { background: var(--eq-menu-hover); color: var(--eq-menu); } .nav details > .submenu a[aria-current="page"] { background: var(--eq-menu-on); color: #000; } /* On the dark panel --muted is unreadable, so a not-yet-built item is dimmed from the menu's OWN ink rather than from the page's. */ .nav details > .submenu .nav-soon { color: color-mix(in srgb, var(--eq-menu-ink) 55%, transparent); } /* A legacy menu item whose replacement screen is not built yet. Shown, not hidden, so the remaining scope stays visible at a glance. */ .nav-soon { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: .4rem .6rem; border-radius: var(--radius-sm); color: var(--muted); font-size: var(--fs-body); cursor: default; } .userchip { display: flex; align-items: center; gap: var(--s3); margin-left: auto; white-space: nowrap; } .userchip__who { display: flex; flex-direction: column; line-height: 1.25; text-align: right; } .userchip__name { font-weight: 600; font-size: var(--fs-body); } .userchip__org { font-size: var(--fs-small); color: rgba(255, 255, 255, .68); } @media (max-width: 900px) { .topbar__inner { flex-wrap: wrap; padding-block: var(--s2); } .userchip { order: 2; } .nav { order: 3; width: 100%; } .userchip__who { text-align: left; } } /* --------------------------------------------------------------------------- 5 PAGE FURNITURE --------------------------------------------------------------------------- */ .pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; margin-bottom: var(--s5); } .eyebrow { font-size: var(--fs-eyebrow); font-weight: 650; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 var(--s1); } h1 { font-size: var(--fs-h1); font-weight: 650; letter-spacing: -.015em; margin: 0; } h2 { font-size: var(--fs-h2); font-weight: 650; letter-spacing: -.01em; margin: var(--s6) 0 var(--s3); } h3 { font-size: var(--fs-h3); font-weight: 650; margin: var(--s5) 0 var(--s2); } .lead { font-size: var(--fs-lead); color: var(--ink-soft); margin: var(--s2) 0 0; } .note { font-size: var(--fs-small); color: var(--muted); } .mono { font-family: var(--font-mono); font-size: .9em; } .num { font-variant-numeric: tabular-nums; } code { background: var(--brand-tint); color: var(--ink-soft); padding: .1rem .35rem; border-radius: 4px; font-family: var(--font-mono); font-size: .875em; } /* --------------------------------------------------------------------------- .card IS NOW THE LEGACY WHITE PANEL, not a floating modern card. Tim, 26 August 2026, with the quote view and the legacy screen side by side: "All pages should copy the same styling of the legacy." It used to be a shadowed, 14px-radius sheet with 24px of padding and no border -- a different visual language from every screen already rebuilt in the legacy skin (.eq-card: white, hairline, 8px radius). Changing it here rather than swapping the class on each page means the screens still using it (Clients, Drafts, the used manual entry) pick the legacy look up without a markup change; the quote view goes further and uses .eq-card .eq-step, which is the panel the approved wizard steps use. The heading rule matters as much as the frame. A bare

carries margin-top: var(--s6) -- 32px of air above the first line of every panel, which was the single largest piece of the whitespace Tim was pointing at. Inside a card it becomes the legacy's Head3: light small-caps grey, tight. (BaseStyle .Head3 12pt/200/#666666, font-variant small-caps.) --------------------------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: var(--s4); margin-block: var(--s3) var(--s4); /* The lift. Tim likes panels reading as if they float off the page -- see design brief 1a.21, and --eq-lift in section 1. */ box-shadow: var(--eq-lift); } .card--flush { padding: 0; overflow: hidden; } .card > :first-child { margin-top: 0; } .card > h2 { font-size: var(--fs-h3); font-weight: 200; font-variant: small-caps; letter-spacing: 0; color: var(--eq-heading); margin: var(--s4) 0 var(--s2); } .panel { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-sm); border-left: 3px solid var(--brand); padding: var(--s4) var(--s5); margin: var(--s4) 0; } .panel > :first-child { margin-top: 0; } .panel > :last-child { margin-bottom: 0; } .panel--good { border-left-color: var(--good); } .panel--bad { border-left-color: var(--bad); } .panel--warn { border-left-color: var(--warn); } /* Stat tiles. A 3-up grid that collapses cleanly, per the design brief. */ .stats { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } .stat { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--s4) var(--s5); } .stat__label { font-size: var(--fs-eyebrow); font-weight: 650; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 0; } .stat__value { font-size: 1.75rem; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin: var(--s1) 0 0; } .stat__hint { font-size: var(--fs-small); color: var(--muted); margin: var(--s1) 0 0; max-width: none; } /* THE dl.kv RULE THAT USED TO BE HERE IS DELETED, and this note replaces it so nobody reinstates it. It set grid-template-columns on the
itself, for a list whose direct children were dt/dd. No screen has been built that way -- every one of them wraps each pair in .kv__row (see _Kv.cshtml) -- so the columns applied to the ROW WRAPPERS instead, and being more specific than the real .kv rule further down, it silently won. Two rules for one component, one of them describing markup that does not exist. The live definition is in the quote detail section. */ .empty { text-align: center; padding: var(--s8) var(--s5); color: var(--muted); } .empty h3 { margin: 0 0 var(--s2); color: var(--ink); } .empty p { margin: 0 auto; max-width: 46ch; } /* --------------------------------------------------------------------------- 6 FORMS AND CONTROLS --------------------------------------------------------------------------- */ label { font-size: var(--fs-small); font-weight: 600; color: var(--ink-soft); } /* CONTROL HEIGHT IS DELIBERATELY TIGHT -- Tim, 25 August 2026: "One of the general themes that you have is to extend things vertically, which requires users to scroll to be able to interact with the page. Can you try and keep the height of elements the same as what I show you in my screenshots?" He is right, and it was a systematic fault rather than one page's: .45rem of padding on top of a 1.55 body line-height gives a 36px control where the legacy has 24px. Over a six-field form that is 72px of nothing, which is the difference between a form that fits and a form that scrolls. line-height is set EXPLICITLY here. Without it the control inherits body's 1.55, which is right for paragraphs and wrong inside a box -- and it is the larger of the two contributions, so tightening only the padding barely moves the height. The floor is the pointing target, not the pixel count. This lands at about 28px, which is comfortable for a mouse on the desktop PCs these users run. Do not tighten it further for a phone layout: touch wants 44px, so if this app ever gets a real mobile view these controls grow again at that breakpoint. */ input[type="text"], input[type="search"], input[type="password"], input[type="date"], input[type="number"], input[type="tel"], select, textarea { width: 100%; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: .22rem .45rem; line-height: 1.35; transition: border-color .12s ease, box-shadow .12s ease; } textarea { line-height: 1.45; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); } input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--bad); } input:disabled, select:disabled { background: var(--bg); color: var(--muted); } /* 2px, not .25rem. A label belongs to the box under it, and the gap only has to be big enough to separate them -- any more and it starts to look like a gap between fields, which is the next rule's job. */ .field { display: flex; flex-direction: column; gap: 2px; } .field > label { line-height: 1.3; } .field--grow { flex: 1 1 14rem; min-width: 0; } /* The filter bar above a grid. Wraps rather than scrolls, so nothing is hidden on a narrow window. */ .filters { display: flex; align-items: flex-end; gap: var(--s3) var(--s4); flex-wrap: wrap; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--s3) var(--s4); margin-bottom: var(--s3); } .filters__actions { display: flex; gap: var(--s2); align-items: center; } /* Segmented control, standing in for the legacy screen's three radio buttons. Still real radios underneath, so it works without JavaScript and reads correctly to a screen reader. */ .segmented { display: inline-flex; background: var(--bg); border-radius: var(--radius-pill); padding: 3px; } .segmented input { position: absolute; opacity: 0; width: 0; height: 0; } .segmented label { padding: .35rem .85rem; border-radius: var(--radius-pill); cursor: pointer; font-weight: 600; font-size: var(--fs-small); color: var(--ink-soft); white-space: nowrap; transition: background-color .12s ease, color .12s ease, box-shadow .12s ease; } .segmented input:checked + label { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); } .segmented input:focus-visible + label { box-shadow: var(--ring); } /* Searchable drop-down (.ss-*), styled to match the native controls above so the enhancement is invisible. See wwwroot/js/searchable-select.js. */ .ss-wrap { position: relative; } .ss-input { cursor: text; } .ss-panel { position: absolute; z-index: 40; inset-inline: 0; top: calc(100% + 4px); max-height: 16rem; overflow-y: auto; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: var(--s1); } .ss-row { padding: .35rem .55rem; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--fs-body); } .ss-row:hover, .ss-row.ss-hi { background: var(--brand-tint); } .ss-row.ss-current { font-weight: 650; } .ss-none { padding: .45rem .55rem; color: var(--muted); font-size: var(--fs-small); } /* --------------------------------------------------------------------------- 7 BUTTONS -- one vocabulary, repeated --------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; font: inherit; font-weight: 600; font-size: var(--fs-body); padding: .45rem 1rem; border: 1px solid transparent; border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap; transition: background-color .12s ease, border-color .12s ease, color .12s ease; } .btn--primary { background: var(--brand-deep); color: #fff; } .btn--primary:hover { background: #26374a; text-decoration: none; } .btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--border-strong); } .btn--secondary:hover { background: var(--brand-tint); text-decoration: none; } .btn--ghost { background: transparent; color: var(--ink-soft); } .btn--ghost:hover { background: var(--brand-tint); text-decoration: none; } /* Excel green, for anything that downloads a workbook. See --excel for why a brand colour is used here and nowhere else. White text on #217346 measures 5.82:1 and on the hover #1a5c38 measures 7.98:1, so both clear WCAG AA for normal text with no lightening needed. Computed, not estimated. */ .btn--excel { background: var(--excel); color: #fff; } .btn--excel:hover { background: var(--excel-hover); color: #fff; text-decoration: none; } .btn--excel:focus-visible { outline: 2px solid var(--excel-hover); outline-offset: 2px; } /* The "X" mark, standing in for the Excel icon. A LETTER RATHER THAN AN IMAGE is deliberate: the legacy ships a 6 KB JPEG per report page for this, and on this project bytes on the wire are the acceptance criterion. It costs nothing, scales with the text, and cannot 404. aria-hidden in the markup, because a screen reader should hear "Excel" once, not "X Excel". */ .btn__icon { display: inline-grid; place-items: center; width: 1.05em; height: 1.05em; border-radius: 2px; background: rgba(255, 255, 255, .22); font-size: .8em; font-weight: 700; line-height: 1; } .btn--block { width: 100%; } .btn:disabled, .btn[aria-disabled="true"] { opacity: .6; cursor: not-allowed; } .btn-row { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; } /* --------------------------------------------------------------------------- 8 DATA GRID Wide content scrolls inside its own container, never the page body. --------------------------------------------------------------------------- */ .grid-wrap { background: var(--surface); border-radius: var(--radius-lg); /* THE ONE LIFT. Not a grid-specific shadow -- see rule 5.4l. This used to be var(--shadow), and that is exactly how the standard drifted. On 27 August 2026 Tim asked for the shadow to be "more pronounced"; --eq-lift was strengthened from two layers to three and every .card in the application got deeper. .grid-wrap was never moved across, so cards kept floating and GRIDS QUIETLY STOPPED -- which is the regression Tim reported on 12 September, pointing at Staff Administration (a .card) against Mail Status (a grid) and asking why one popped and the other did not. Nobody wrote that bug. Two tokens for one job is enough on its own: the moment one is tuned, everything on the other silently diverges. So there is now ONE, and GridStandardsTests fails if a second appears. */ box-shadow: var(--eq-lift); overflow: hidden; } /* --------------------------------------------------------------------------- ONE LIFT PER STACK. A raised surface inside a raised surface stays flat. --eq-lift's own note has said this since August -- "NOT applied to a field box inside a panel or to a table. Nested shadows cancel the effect: if everything floats, nothing does" -- and nothing enforced it, so Mail Status ended up with a shadowed grid inside a shadowed panel and read as one flat slab. The outermost panel is the one that meets the page ground, so it is the only one with any contrast to cast against. Everything nested inside it is already floating by virtue of being in it. .eq-card ADDED 30 September 2026. It lifts with --eq-lift exactly as .card does, and was missing here, so the OTP wizard's Cash Accessories grid cast a second shadow inside its own panel -- the defect this rule exists to prevent, on the screen Tim asked to be brought into line. --------------------------------------------------------------------------- */ .eq-fieldset .grid-wrap, .eq-dialog .grid-wrap, .card .grid-wrap, .eq-card .grid-wrap { box-shadow: none; } /* --------------------------------------------------------------------------- THE GRID SCROLL BOX -- and it is what makes the column headings stick. Tim, 27 August 2026, as a system-wide ruling: "the heading remains static while the remaining content of the report scrolls underneath it so that the heading is always visible in the report." BOTH AXES, AND A BOUNDED HEIGHT. This used to be overflow-x: auto, which looks like "scroll sideways only" and is not a thing CSS can do -- overflow-x auto computes overflow-y to auto as well. So the box was already a scroll container, but with a height that grows to fit its content, so it never scrolled vertically. thead th has carried position: sticky; top: 0 all along and had nothing to stick to: it sat at the top of a box that never moved, and the PAGE scrolled it out of sight. Giving the box a viewport-bounded height is what turns the existing sticky rule on. The rows scroll under the heading, and the heading stays. max-height, not height: a short grid keeps its natural size and shows no scrollbar at all. THIS BOX DELIBERATELY DOES NOT CONTAIN ITS OVERSCROLL, and that is a reversal of what this comment used to say. It claimed `contain` stopped the page lurching at the last row; Tim used it and decided the other way on 12 September 2026. The box is nearly viewport-tall, so stopping the wheel at its last row strands the totals row and the footer below the fold unless the reader moves the cursor off the table. --------------------------------------------------------------------------- */ .grid-scroll { overflow: auto; max-height: var(--grid-viewport); /* NO overscroll-behavior, in either direction, and BOTH omissions are deliberate. It must not be here STATICALLY, because a container that cannot scroll must never carry `contain` -- it swallows the wheel and the page behind it does not move either (rule 5.4k). And it is not on this box's .is-scrollable form either, which is where the dialogs and the menu get theirs. A grid CHAINS: at its last row the page takes over, with no need to move the cursor off the table. The whole argument is above the .eq-dialog__body.is-scrollable rule. */ } table.grid { width: 100%; border-collapse: separate; border-spacing: 0; } /* --------------------------------------------------------------------------- ROW HEIGHT. Vertical padding is 20% off what it was. Tim, 4 September 2026, comparing this grid against the legacy's side by side: "I do prefer the styling of the new one with the exception that I think the line heights are a bit too tall. Please make them about twenty percent narrower in height to allow more content to be visible on the page at once." .6rem -> .48rem, which is the 20% he asked for and no more. HORIZONTAL padding is untouched at .85rem: he asked about height, and squeezing the sides would run a client name into the column beside it. Why this is the right place and the only place: every grid family in the application inherits these cells (.grid--eq and the pickers set their own, tighter, values -- they were already dense). One number, whole application, and no screen can drift from it. THE 44px TOUCH FLOOR STILL APPLIES ON A PHONE. Section 30 sets its own padding for card mode, so this cannot shrink a touch target below the minimum rule 5.4e requires -- check that block before reducing this further. --------------------------------------------------------------------------- */ table.grid th, table.grid td { padding: .48rem .85rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; } /* THE STICKY HEADING. top: 0 is the top of .grid-scroll, not of the page -- see that rule for why the box has to be height-bounded for this to do anything. z-index 2, above the rows and the sticky totals row, and BELOW the page chrome's 19 and 20 so a heading can never sit over the menu strip. The background must stay opaque or rows show through it while they pass underneath; every skin that restyles this header sets one. */ table.grid thead th { position: sticky; top: 0; z-index: 2; background: var(--brand-tint); color: var(--ink-soft); font-size: var(--fs-eyebrow); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; border-bottom: 1px solid var(--border-strong); } table.grid tbody tr:last-child td { border-bottom: 0; } /* --------------------------------------------------------------------------- RULED -- the legacy's own gridlines on a list Tim, 11 September 2026: "copy the styling of the staff admin list page". Measured from EQNetAdmin/Styles/GM.css, which is what that GridView actually wears (StaffAdministration.aspx:276 sets HeaderStyle to ExtGridHeaderStyle): .ExtGridHeaderStyle #15428b ink, 1px #99bbe8 border (:462-476) .ExtGridRowStyle td 1px #99bbe8, 5px either side (:495-500) The ROW BANDS were already the legacy's -- rule 5.4f took #e0eefb / white from the same stylesheet. What was missing is that the legacy rules EVERY cell, which is what turns a wide row of ticks and buttons into something the eye can follow across. A MODIFIER, not a change to table.grid. Fourteen screens use .grid and were built and reviewed without gridlines; restyling all of them off one screen's complaint would be a change nobody asked for. Rolling it out further is a decision, and Tim's to make. The header keeps its sticky position, z-index and opaque background from the base rule -- rule 5.4d depends on all three, and only the colours change. */ table.grid--ruled { border: 1px solid var(--eq-grid-rule); } table.grid--ruled > thead > tr > th, table.grid--ruled > tbody > tr > td { border: 1px solid var(--eq-grid-rule); padding-left: .5rem; padding-right: .5rem; } table.grid--ruled > thead > tr > th { background: var(--eq-grid-head); color: var(--eq-grid-head-ink); } /* The base rule strips the last row's bottom border to sit flush on the card. A ruled table draws its own box, so the line has to come back or the grid ends in mid air. */ table.grid--ruled > tbody > tr:last-child > td { border-bottom: 1px solid var(--eq-grid-rule); } /* --------------------------------------------------------------------------- ALTERNATING ROW BANDS -- light blue, then white. Tim's standing instruction, 4 September 2026, given as a system-wide standard for every list of information in the application: "This alternating [light] blue white ... to easily be able to follow a line horizontally while reading. Please also remember that clicking anywhere in the line should have the same hyperlink effect as clicking the trigger ... That is a standard for all reports. Both the colour scheme and the trigger." IT IS A READING AID, NOT DECORATION, which is why it lives on the base .grid and is not opted into per screen. Reading across nine columns at 1766px the eye loses the row, looks up, and takes a date off one client and a phone number off the one below. THE COLOURS ARE THE LEGACY'S OWN, not a new palette. GM.css sets ExtGridRowStyle to #e0eefb and ExtGridAltRowStyle to white (EQnet/Styles/GM.css:540-549), and that pair is what a rep of twenty years is reading today. Held in --eq-grid-row so the four grid families cannot drift: the legacy skin (.grid--eq, section 16), the small summary tables (.eq-table, section 15) and the pickers (.eq-pick) were ALL already banded with it. This family was the only one that was not, which is the whole defect. BAND 1 IS TINTED AND BAND 2 WHITE, so the first row is blue -- matching the legacy, where RowStyle paints the odd rows and AlternatingRowStyle the even ones. The other way round makes a single-row result look greyed out. > td, NOT THE ROW, and this is the part that would be "tidied" and break. A background on a paints UNDERNEATH its cells, so any rule that fills a cell hides it. Every state that has to beat a band therefore also paints > td -- hover here, .is-selected in section 16, .is-activated just below. Add a fifth state on the and it will silently do nothing. --------------------------------------------------------------------------- */ table.grid tbody tr:nth-child(odd) > td { background: var(--eq-grid-row); } table.grid tbody tr:nth-child(even) > td { background: #fff; } /* Hover after the bands, at equal specificity, so it wins on both. */ table.grid tbody tr:hover > td { background: var(--brand-tint); } table.grid td.num, table.grid th.num { text-align: right; font-variant-numeric: tabular-nums; } table.grid td.nowrap { white-space: nowrap; } /* Whole-row navigation on a grid whose rows open a record. Tim's instruction, 22 August 2026, and it reproduces the legacy: on EQnet/OpenQuotes.aspx every cell is its own LinkButton, so clicking anywhere on the line opens the quote. .is-row-linked IS ADDED BY JAVASCRIPT, NEVER BY THE MARKUP. If app.js is blocked -- routine on these connections -- the rows genuinely are not clickable, so they must not advertise that they are. The quote number stays a real link and keeps working regardless. Do not move this class into the Razor view to "save a line of script": a pointer cursor over dead space is worse than no cursor at all. Text stays selectable on purpose (no user-select: none) because reps copy client names and quote numbers out of this grid; app.js tells a drag from a click instead. */ table.grid.is-row-linked tbody tr { cursor: pointer; } /* THE SAME AFFORDANCE ON EVERY GRID FAMILY, not only table.grid. Tim's 4 September ruling is "a standard for all reports", and the application has four table families for historical reasons -- .grid, .grid--eq (a modifier on it), .eq-table (the small legacy transcriptions, which is what the home page drill-down uses) and .eq-pick. The row-click JS has always been family-agnostic; it selects table[data-row-link]. Only the CURSOR was written against .grid, so an .eq-table row was clickable and never said so. Scoped to .is-row-linked alone, so it follows the attribute wherever it goes. Still added by app.js and never by the markup -- see the note above for why a pointer cursor must not appear when the script is blocked. */ .is-row-linked tbody tr { cursor: pointer; } /* --------------------------------------------------------------------------- A GRID WHOSE ROWS DO NOT ALL GO SOMEWHERE. Reminders is the first: an overdue prospect opens its quote, a Courtesy Call has no destination built yet (Default.aspx.vb:851-860 lands it on the Notes tab, which needs a route that does not exist). Both kinds sit in one grid. So a view may mark the rows that ARE clickable with .is-row-target, and the pointer is then withheld from the rest. Opting IN per row rather than out, because a grid whose rows are uniformly clickable -- which is all the others -- must keep working with no markup change at all: hence the :not() form rather than requiring the class everywhere. THE CURSOR IS THE WHOLE POINT. app.js already refuses to activate a row with no target, so those rows were harmless; they simply LOOKED clickable and did nothing, which is the same lie a pointer tells when script is blocked. --------------------------------------------------------------------------- */ .is-row-linked:has(tbody tr.is-row-target) tbody tr:not(.is-row-target) { cursor: default; } .is-row-linked tbody tr.is-activated > td { background: var(--brand-tint-strong); } /* The click acknowledgement. The quote page answers in about 21ms, so a spinner would flash and read as a glitch -- what the user needs is to see which line they hit, so the eye can find its place again if the navigation is slow. Repeated for :hover because the pointer is by definition still on the row. A colour change with no animation, so prefers-reduced-motion is deliberately not consulted: this is the feedback a reduced-motion user should still get. */ /* > td, because the rows are banded now and a background would paint under the band and never be seen. See the banding rule above. THE RING IS ASSEMBLED FROM PER-CELL INSETS, which is fiddlier than the single `inset 0 0 0 1px` on the it replaces, and unavoidable for the same reason the background is: a row-level shadow sits under the cells. So every cell draws the top and bottom edge, and only the end cells draw a side. Drawing the sides on all of them would rule every column boundary and turn the highlight into a grid; drawing top and bottom only on the ends would leave the middle of a nine-column row unlined, which is what the first attempt at this did. */ table.grid.is-row-linked tbody tr.is-activated > td, table.grid.is-row-linked tbody tr.is-activated:hover > td { background: var(--brand-tint-strong); box-shadow: inset 0 1px 0 var(--border-strong), inset 0 -1px 0 var(--border-strong); } table.grid.is-row-linked tbody tr.is-activated > td:first-child { box-shadow: inset 0 1px 0 var(--border-strong), inset 0 -1px 0 var(--border-strong), inset 1px 0 0 var(--border-strong); } table.grid.is-row-linked tbody tr.is-activated > td:last-child { box-shadow: inset 0 1px 0 var(--border-strong), inset 0 -1px 0 var(--border-strong), inset -1px 0 0 var(--border-strong); } /* A SUBMIT BUTTON THAT READS AS THE ROW'S TEXT, not as a control. Tim's instruction, 25 August 2026: "we make any text in EasyQuote clickable. We don't have a separate select button." On grids whose row opens a URL that is a plain anchor. On the CLIENT grid it cannot be: a ClientID identifies a person, so it travels in a submit button's value and never in a URL or an access log (see rule 5.3 and the POST-only client search). This class is what lets that button carry the client's NAME and look like every other clickable name in the app. Not a variant of .btn on purpose -- it inherits nothing from the pill treatment, because a name in a grid must not look like a call to action. It is styled from the browser's button defaults up, since those are what have to be removed. Left-aligned and inline rather than block: the name sits beside its "also known as" and "marketing prospect" tags, so a full-width target would swallow them. The whole row is the large target, added by app.js. */ .textlink { display: inline; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: var(--brand-deep); text-align: left; cursor: pointer; } .textlink:hover { text-decoration: underline; } .textlink:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: 2px; } /* Disabled means the row genuinely cannot be chosen -- a draft whose payload can no longer be read. It must not look clickable, and app.js refuses to activate it. */ .textlink:disabled { color: var(--muted); cursor: default; text-decoration: none; } /* Sortable column headers are real links, so sorting survives JavaScript being blocked and each sort order is a bookmarkable URL. The legacy grid sorts by posting the whole page back and re-reading a DataTable out of ViewState. */ table.grid thead a { color: inherit; display: inline-flex; align-items: center; gap: .3rem; } table.grid thead a::after { content: ""; width: .55em; opacity: .45; } table.grid thead a[data-sort="asc"]::after { content: "\25b2"; opacity: 1; } table.grid thead a[data-sort="desc"]::after { content: "\25bc"; opacity: 1; } .grid-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; padding: var(--s3) var(--s5); background: var(--surface); border-top: 1px solid var(--border); font-size: var(--fs-small); color: var(--muted); } /* --------------------------------------------------------------------------- 9 PAGINATION --------------------------------------------------------------------------- */ .pager { display: flex; align-items: center; gap: var(--s1); } .pager a, .pager span { min-width: 2rem; padding: .25rem .5rem; border-radius: var(--radius-sm); text-align: center; color: var(--ink-soft); font-variant-numeric: tabular-nums; } .pager a:hover { background: var(--brand-tint); text-decoration: none; } .pager [aria-current="page"] { background: var(--brand-deep); color: #fff; font-weight: 600; } .pager .is-disabled { opacity: .4; pointer-events: none; } /* --------------------------------------------------------------------------- 10 STATUS PILLS The hues are EasyQuote's existing call-status traffic lights and they carry meaning to users, so they are preserved exactly rather than restyled. --------------------------------------------------------------------------- */ .pill { display: inline-block; padding: .15rem .55rem; border-radius: var(--radius-pill); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .03em; white-space: nowrap; } .pill--open { background: var(--info-tint); color: var(--brand-deep); } .pill--otp { background: var(--warn-tint); color: var(--warn); } .pill--invoiced { background: var(--good-tint); color: var(--good); } .pill--convert { background: var(--good-tint); color: var(--good); } .pill--rental { background: var(--brand-tint-strong); color: var(--brand-deep); } /* CONTACT PREFERENCES -- the four opt-out channels on the client profile. Two new pills. They reuse the existing good/error tints rather than introducing colours, so a rep reads "stop" here the same way they read it everywhere else in the application. */ .pill--ok { background: var(--good-tint); color: var(--good); } .pill--stop { background: var(--error-bg); color: var(--error-ink); } /* Collapsed by default: four rows on an already dense screen, and the common case is that nothing is opted out. */ .eq-optouts { margin: var(--s3) 0; } .eq-optouts > summary { cursor: pointer; font-weight: 600; letter-spacing: .02em; padding: .45rem .6rem; border-radius: var(--radius-sm); background: var(--eq-sunken); color: var(--ink); } .eq-optouts > summary:hover { background: var(--brand-tint); } .eq-optouts__body { padding: var(--s2) 0; } /* The grid is key-and-value detail, not a list of records -- so no row trigger, and it is named in GridStandardsTests' baseline with that reason. */ .eq-optouts__grid td { vertical-align: middle; } /* Reason and button on one line, wrapping on a phone rather than being hidden -- rule 5.4e: nothing interactive is ever hidden, it is re-laid-out. */ .eq-optouts__form { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; } .eq-optouts__form input[type="text"] { min-width: 12rem; flex: 1 1 12rem; } /* Secondary text inside a cell. Deliberately not a size on the element, so it scales with whatever the surrounding grid is using. */ .small { font-size: .85em; } .pill--closed { background: var(--bad-tint); color: var(--bad); } .pill--neutral { background: var(--bg); color: var(--neutral); } .tag { display: inline-block; padding: .1rem .45rem; border-radius: var(--radius-sm); background: var(--bg); font-size: var(--fs-eyebrow); font-weight: 600; color: var(--muted); } /* --------------------------------------------------------------------------- CALL TRAFFIC LIGHTS -- the quote list's primary information design. These three hues are NOT a design choice and must not be adjusted. They are EasyQuote's existing call-status colours, fixed in the legacy stylesheet at Styles/BaseStyle.css:678-692 and repeated in Main.Master:44-56, and they carry meaning that reps rely on: black #000000 recently contacted, or a callback is scheduled green #459E00 contacted between the two thresholds red #CC0000 NO FUTURE DATED REMINDER -- the quote is going cold The "red" wording is the legacy's own tooltip text (EQNetAdmin/OpenQuotes.aspx.vb:377-381), which is the only place in the whole system where the meaning of these colours is written down. The legacy applies the colour to the LINK inside every cell of the row. Here it is applied to the row, which is the same visual result while the cells are not yet links. Colour is NEVER the only carrier: every coloured row also gets a title attribute and screen-reader-only text, because red/green is precisely the distinction that colour-blind users cannot make. The legacy has no such fallback. --------------------------------------------------------------------------- */ table.grid tr.zone-black td { color: #000000; } table.grid tr.zone-green td { color: #459e00; } table.grid tr.zone-red td { color: #cc0000; } /* THE WHOLE LINE TAKES THE LINE'S COLOUR, CONTROLS INCLUDED -- Tim, 15 September 2026: "the font color is determined solely by the due date ... we should not have red text for overdue then birthday reminders in black text ... the entire line entry is 100% governed by the due date." The rules above colour the CELL, and a