/* ========================================================================== site/panel.css · THE SELECTION-PANEL MATERIAL Loaded LAST on every page that has one — after ds.css / shelf.css / uifinish.css / hier.css — so every rule wins on source order at the SAME specificity as the rule it corrects. No !important anywhere. --------------------------------------------------------------------------- WHAT THIS IS --------------------------------------------------------------------------- On 2026-09-09 Our System (Google Ads page) was re-coloured through three approved steps — A · Quarried Stone, S5 · Solid Slab, D1 · Deeper Floor — and the brief was then to put the same material on every other selection section on the site, horizontal rails and vertical rails alike. This file is that material, declared once and mapped onto each group's REAL selectors. Every selector below was read off the live DOM with site/_sel-dom.html, not guessed from the markup — several of these groups are built by script after load, and several of the obvious names (.tmx-card, .lx-p, .gss-tab) do not exist. --------------------------------------------------------------------------- THE MATERIAL, and its five rules --------------------------------------------------------------------------- rail #F6F8FC the strip unselected controls sit on well #DCE3EE the recess that CARDS stand in (L* 90.0) card #FFFFFF anything standing on a well select #0F1B3D the selected state — site/hier.css tier 3, unchanged 1 · every fill is FLAT — no gradient anywhere. 2 · every shadow has ZERO BLUR — depth is a hard offset, never a haze. 3 · every edge is a 1px solid ring, plus a 2-3px solid offset if raised. 4 · the selected control carries the WELL tone. It is the opening into the panel, never a saturated fill. 5 · nothing is darker than #DCE3EE. That is the floor of the system. --------------------------------------------------------------------------- WHEN A PANEL BECOMES A WELL — the one judgement in this file --------------------------------------------------------------------------- D1's figure is CARDS STANDING IN A WELL. That figure only exists where a panel actually holds cards. So: · a panel that holds cards -> becomes the well, cards go white · a panel whose content sits DIRECTLY on it -> stays white. Flooding running text (#office .lx-pw, #about5 .ab-split) with #DCE3EE would change what the section IS, not what colour it is, and this file may not do that. Both kinds still take rules 1-4 on their rail, their selected control, their shadows and their cards, which is what makes them read as one system. --------------------------------------------------------------------------- DELIBERATELY NOT TOUCHED — and why --------------------------------------------------------------------------- · #hp1 .hp-types (home) selected state is a navy FILL, set by hier.css on 2026-09-09 as tier 3 of the interaction-colour ladder. Newer than this decision, and about meaning rather than material. · #svc3 (home) five per-service hues — a colour CODE. hier.css records them as out of scope. · .lx-i Google's four brand colours and the step markers: data encoding and progress, not interface surfaces. · the drawn SERP / Shopping / WhatsApp plates pictures, not interface. ========================================================================== */ :root{ --pnl-rail: #F6F8FC; --pnl-well: #DCE3EE; --pnl-card: #FFFFFF; --pnl-sel: #0F1B3D; --pnl-ring: rgba(11,13,18,.17); /* a card's 1px rim */ --pnl-rim: rgba(11,13,18,.18); /* a plate's 1px rim */ --pnl-cut: rgba(11,13,18,.22); /* the hard cut */ --pnl-wall: rgba(11,13,18,.12); /* the side walls */ --pnl-lip: #FFFFFF; --pnl-lift: 0 2px 0 rgba(11,13,18,.11), 0 3px 0 rgba(11,13,18,.045); --pnl-lift-s: 0 2px 0 rgba(11,13,18,.10); } /* ========================================================================== 1 · RULE 2 EVERYWHERE — the blurred shadows go Every one of these plates was drawn with the site's old soft shadow (0 2px 6px / 0 3px 8px + a long ambient). They become the same hard offset the Our System blocks now use. This single change is what makes the six sections read as one material, and it costs no geometry. ========================================================================== */ #about5 .ab-split, /* home · About the company */ #office .lx{ /* contact · the office rail */ box-shadow: inset 0 0 0 1px var(--pnl-rim), var(--pnl-lift); } /* ========================================================================== 2 · HORIZONTAL GROUPS ========================================================================== */ /* ---- home · About the company — folder tabs over a white plate ---------- */ #about5 .ab-ftab[aria-selected="true"]{ background: var(--pnl-card); background-image: none; border-color: var(--pnl-cut); border-bottom-color: var(--pnl-card); color: var(--ink); } #about5 .ab-shot{ background: var(--pnl-well); background-image: none; } /* ---- Google Ads · the monthly-budget chips ----------------------------- A chip has no panel under it, so it takes the material's RAISED half: the rail tone behind, flat white and a hard offset on the one that is chosen. */ #pricing .a9-chips, #cmp .a9-chips{ background: var(--pnl-rail); background-image: none; } #pricing .a9-chip[aria-checked="true"], #cmp .a9-chip[aria-checked="true"]{ background: var(--pnl-card); background-image: none; box-shadow: inset 0 0 0 1px var(--pnl-ring), var(--pnl-lift-s); color: var(--ink); } #pricing .a9-chip:hover:not([aria-checked="true"]), #cmp .a9-chip:hover:not([aria-checked="true"]){ background: var(--pnl-card); background-image: none; box-shadow: inset 0 0 0 1px rgba(11,13,18,.12); } /* ---- about · REMOVED 2026-09-10 ---------------------------------------- About Us was rebuilt as the symmetric spec (about-k9/k9.css) and none of the four selectors this file named there exist any more: .tc-pier, .c1-rx-r, .tmx-tab and .tmx-dir went with the markup. The page's three controls are painted by site/paper.css section 3, which supersedes this file's well material everywhere in any case — see the header. Nothing is re-pointed here on purpose: a rule that only paper.css would outrank a moment later is dead code that reads as live. */ /* ========================================================================== 3 · VERTICAL GROUPS -------------------------------------------------------------------------- The same material turned a quarter turn. On a vertical rail the selected row is still the OPENING into the panel — it just opens sideways, so the hard cut runs down its LEADING EDGE instead of across its top. This is the half of the brief about tabs that run vertically, and it is the same five rules: flat fills, zero-blur offsets, a 1px ring, the well tone on the selected control, nothing darker than #DCE3EE. ========================================================================== */ /* ---- contact · the office rail ------------------------------------------ */ #office .lx-rail{ background: var(--pnl-rail); background-image: none; } #office .lx-r[aria-selected="true"]{ background: var(--pnl-well); background-image: none; box-shadow: inset 3px 0 0 var(--pnl-cut); color: var(--ink); } #office .lx-r:hover:not([aria-selected="true"]){ background: var(--pnl-card); background-image: none; } /* ========================================================================== 4 · THE PHONE Every vertical rail here becomes a horizontal one under 860px — the site's existing mobile pattern, which this file does not change. It only turns the cut back through ninety degrees so the material still matches the shape. ========================================================================== */ @media (max-width: 860px){ #office .lx-r[aria-selected="true"]{ box-shadow: inset 0 3px 0 var(--pnl-cut); } }