/* ============================================================================ NAVY SKIN — owner 2026-07-29 spec, verbatim: "Navy across all boards · All numbers white · All names white · Every tile top has a color Clear is always green Warning will always be hue of orange provided Watch will always be orange hue provided Issues w/i a dept / Hard Cap will always be Red Light blue is a passive color to be used interchangeably." WHY A SIXTH FILE INSTEAD OF EDITING 8-light.css. That file does two unrelated jobs: it sets the white palette AND it does the "MUCHO LARGER" type work (46px tile numbers, 14.5px table cells, the whole TV-size pass). Rewriting it would throw the sizing away with the colours. So this file loads LAST and overrides COLOUR ONLY — every size rule in 8-light.css still applies. TO REVERT: delete the one to this file in index.html. The board snaps back to the white + royal-blue skin exactly as it was, sizes intact. CARD CAPS ARE VARIETY, NOT A CODE (owner 2026-07-29: "it's not colour coding, just having variety"). The five swatch hues cycle across sibling cards so no two neighbours match, and a cap colour means NOTHING on its own. Verdicts are still carried where they always were: the number's colour, the status text and the drill-down. --pass/--warn/--fail remain pointed at the swatch green/orange/red for those, and purple + the old royal blue collapse into the swatch blue since neither ever carried a meaning. LIGHT NAVY, NOT DARK MODE (owner 2026-07-29: "navy is too deep, we won't want a dark mode, maybe make it light navy"). Ground lifted from #0A1730 to #12294A. THE TRADE THAT LIFT FORCES, measured not guessed. Lightening the ground barely touches the WHITE type (15.4:1 -> 11.8:1, still crisp from 30 feet) but it craters the four MEANING colours, which are the whole point of the palette: on the old deep tile -> on the light navy tile red #EF4444 4.1:1 -> 3.1:1 small red text starts to muddy orange #EE6D08 5.0:1 -> 3.8:1 green #22C55E 6.8:1 -> 5.2:1 Going lighter still (a true royal #26508F) puts red at 2.1:1 — invisible. So #12294A is the lightest navy where the palette still WORKS. TWO WEIGHTS OF EACH COLOUR, one meaning. The owner's exact hues stay on the BIG surfaces where 3:1 is the real bar (AA large text): the 4px tile caps and the 46px numbers. Small text — table cells, notes, row values — uses a brightened sibling of the SAME colour so a fail cell is still legible at 11px: green #4ADE80 (6.8:1) · orange #FB8B3C (5.0:1) · red #FF7A7A (4.7:1) Same four meanings, no fifth colour, nothing invented. TV COMPAT: the wall screens are Tizen Chromium 69/76. Plain hex + rgba only — no colour-mix(), no oklch(), no nesting, no custom-property fallback syntax. ========================================================================== */ :root{ /* LIGHT navy ground, three depths so a tile still reads as an object */ --bg:#12294A; --panel:#1A3765; --panel-2:#163059; --line:#2C4E82; --line-soft:#23416F; --row-hover:#21457C; /* ALL numbers white, ALL names white — --ink is what both resolve to */ --ink:#FFFFFF; --ink-dim:#B8C7DC; --ink-faint:#8A9CB5; /* passive light blue replaces the royal brand AND the purple */ --brand:#3D85C6; --haley:#3D85C6; /* seat states ride the same four colours + passive blue */ --avail:#6AA84F; --oncall:#3D85C6; --ring:#3D85C6; --dispo:#3D85C6; --away:#E69138; --miss:#CC0000; --off:#5A6C86; /* ── THE OWNER'S FIVE (2026-07-29 swatch) ──────────────────────────────── #cc0000 red · #e69138 orange · #f1c232 yellow · #6aa84f green · #3d85c6 blue These are now the ONLY colours on a card cap. Meaning first: */ --pass:#6AA84F; --warn:#E69138; --fail:#CC0000; --c-red:#CC0000; --c-orange:#E69138; --c-yellow:#F1C232; --c-green:#6AA84F; --c-blue:#3D85C6; /* the same three, lifted for SMALL text on light navy (the swatch hues are mid-tone and 11px table text needs more separation from the ground) */ --pass-t:#8FD16E; --warn-t:#F0A95C; --fail-t:#FF6B6B; --ring-t:#7DD3FC; /* ramp/leaderboard signal colours, re-pointed onto the same four */ --sig-blue:#3D85C6; --sig-blue-lt:#3D85C6; --sig-green:#6AA84F; --sig-yellow:#F1C232; --sig-red:#CC0000; /* --sig-ramp kept as a variable because other rules read it, but NO card cap uses it any more — see the cap block below. */ --sig-ramp:linear-gradient(90deg,#3D85C6,#6AA84F 55%,#E69138); } html,body{background:var(--bg)} body{color:var(--ink)} /* ── chrome ─────────────────────────────────────────────────────────────── */ header.topbar{background:var(--panel-2);border-bottom:2px solid var(--line)} .logo .mark{background:var(--c-blue);color:#FFFFFF; box-shadow:0 0 0 1px rgba(61,133,198,.45),0 4px 14px rgba(61,133,198,.20)} .tab{color:var(--ink-dim)} .tab.on{background:var(--brand);color:#04121F} .clock{color:var(--ink-dim)} .kpi{background:var(--panel-2);border-color:var(--line)} /* ── THE CARD CAP — solid colour, thin, and never twice in a row ──────────── Owner 2026-07-29: "no more gradients at the top of cards anymore and the colour border at the tops are too thick, we need to mix it up with solid colours from [the five] and no same colours should be next to each other. THIS IS NOT FOR THIS PAGE ONLY — this is for ALL pages with cards that have a gradient top piece and the thumb of it being too tall." WHY IT LOOKED SO THICK: the card had TWO bars stacked. 9-ramp.css paints a 4px gradient ::before across eight views (#viewBoard/#viewPerf/#viewFulfil/ #viewReports/#viewDialer/#viewAch/#viewAttrib/#viewIt), and the first cut of this navy skin added its own 4px solid border-top on top of that — 8px of cap. The border-top is gone, so there is now ONE bar. Owner then asked for it THICKER again (2px read as a hairline once the doubled cap was removed), so the single bar is 5px — heavier than either of the old bars alone, but one of them instead of two, and solid instead of a gradient. HOW "NO TWO THE SAME NEXT TO EACH OTHER" IS GUARANTEED: the cap colour is a custom property --cap set by nth-child(5n+1..5n+5) over the five swatch hues. A five-step cycle over sibling cards means neighbours mathematically cannot match — no hand-assigned colours, no drift when a tile is added or removed. MEANING STILL WINS. A card carrying a verdict (acc-g clear / acc-y warning or watch / acc-r issue or hard cap) keeps its semantic colour and opts out of the rotation, because a red FAIL cap must never come up green because of where it happens to sit. Only passive cards rotate. */ /* THE CAP HAS TO FOLLOW THE CARD'S CORNER (owner 2026-07-29: "why are the thumb colors at the top not appearing in the same radial alignment edge curves as the card, it looks bad"). The card is border-radius:12px; the cap is a square-cornered ::before pinned to top/left/right, so its corners overhung the curve and the bar read as a separate strip laid ON the card instead of part of it. Two fixes together: overflow:hidden clips the bar exactly to the card's 12px curve, so the ends follow the corner precisely at any bar height — better than giving the bar its own radius, which at 5px tall would round into a lens shape instead of a corner. border-top-width:0 the 1px top border was drawing a pale line ABOVE the colour, which is the gap visible in his screenshot. The cap is now the card's topmost pixel. */ .pf-card{background:var(--panel);border:1px solid var(--line);border-top-width:0;overflow:hidden} /* the rotation — five swatch hues, so no two siblings can collide */ .pf-card{--cap:var(--c-blue)} .pf-card:nth-child(5n+1){--cap:var(--c-blue)} .pf-card:nth-child(5n+2){--cap:var(--c-green)} .pf-card:nth-child(5n+3){--cap:var(--c-yellow)} .pf-card:nth-child(5n+4){--cap:var(--c-orange)} .pf-card:nth-child(5n+5){--cap:var(--c-red)} /* COLOUR LIVES ON THE TOP STRIP ONLY — NOT THE BORDER. Owner 2026-07-29: "NOT FOR THE ENTIRE BORDER COLOR, I only wanted the top thing where the gradient was to have the colour effects described." 7-perf.css sets border-color on every .pf-card.acc-* (a leftover from when the accent WAS the whole outline) and it also bumps border-width to 2px. My cap block neutralised .pf-card but not the .acc-* variants, so those rules won again and every accented card came back as a fully coloured box. Killed here: the frame is always the neutral hairline, and the ONLY coloured pixels on a card are the 5px cap. */ .pf-card.acc-g,.pf-card.acc-r,.pf-card.acc-y, .pf-card.acc-b,.pf-card.acc-c,.pf-card.acc-p, .pf-card.acc-g:hover,.pf-card.acc-r:hover,.pf-card.acc-y:hover, .pf-card.acc-b:hover,.pf-card.acc-c:hover,.pf-card.acc-p:hover{ border-width:1px;border-top-width:0;border-color:var(--line)} /* THE CAP IS VARIETY, NOT COLOUR CODING. Owner 2026-07-29: "I literally also said no two same colours next to each other, it's not colour coding, just having variety." So EVERY card rides the 5-cycle — accented or not. There is deliberately no .acc-g/.acc-y/.acc-r cap override here: a cap colour carries no meaning, it just keeps two neighbours from matching. Verdicts are still communicated where they always were — the number's colour, the status text, the drill-down. */ /* SOLID, 2px, square. This overrides 9-ramp.css's gradient ::before; the selector list has to repeat the eight view ids to match its specificity. */ #viewBoard .pf-card::before, #viewPerf .pf-card::before, #viewFulfil .pf-card::before, #viewReports .pf-card::before, #viewDialer .pf-card::before, #viewAch .pf-card::before, #viewAttrib .pf-card::before, #viewIt .pf-card::before{ height:5px;border-radius:0;background:var(--cap)} /* cards on views the ramp never touched (Scorecards, widgets, modals) get the same cap, so "all pages" really means all pages */ .pf-card{position:relative} .pf-card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px; border-radius:0;background:var(--cap)} .pf-card:hover{background:#1F3F72;border-color:var(--line)} /* numbers white by default; the semantic classes still win where a number IS the verdict (a green count, an orange count) */ .pf-big{color:var(--ink)} .pf-big.g{color:var(--pass)} .pf-big.o{color:var(--warn)} .pf-card .ct{color:var(--ink-dim)} .pf-card .cs{color:var(--ink-faint)} /* ── tables: names and numbers white, navy cells ────────────────────────── */ .pf-tw{border-color:var(--line)} .pf-t th{background:var(--panel-2);color:var(--ink-faint);border-bottom-color:var(--line)} .pf-t td{background:var(--panel);color:var(--ink);border-bottom-color:var(--line-soft)} .pf-t td.nm{color:var(--ink)} /* table cells are 11-14px — the brightened siblings, or a fail cell muddies */ .pf-t td.good{color:var(--pass-t)} .pf-t td.warn{color:var(--warn-t)} .pf-t td.bad{color:var(--fail-t)} .pf-t td.dim{color:var(--ink-faint)} .pf-t tbody tr:hover td{background:var(--row-hover)} /* small status text keeps its brightened sibling on the hover row too */ .pf-t tbody tr:hover td.good{color:var(--pass-t)} .pf-t tbody tr:hover td.bad{color:var(--fail-t)} .pf-t tbody tr:hover td.warn{color:var(--warn-t)} /* the sticky first column paints its own background — keep it in step or the name cell floats a different colour than the row it belongs to */ .pf-t td.l.nm[style]{background:var(--panel) !important} .pf-t tbody tr:hover td.l.nm[style]{background:var(--row-hover) !important} /* ── panels, notes, headers ─────────────────────────────────────────────── */ .pf-h h3{color:var(--ink)} .pf-note{background:var(--panel-2);border-color:var(--line);color:var(--ink-dim)} .pf-sb{background:var(--panel-2);border-color:var(--line);color:var(--ink-dim)} .pf-sb.on{background:var(--brand);color:#04121F;border-color:var(--brand)} .pf-row2 .n{color:var(--ink-dim)} .pf-row2 .v{color:var(--ink)} /* ── leaderboard podium: green / passive blue / orange, no gold ─────────── */ /* podium columns were gradient fills too — solid tints from the same five */ .clb-pod-1 .clb-pcol{background:rgba(106,168,79,.16);border-color:rgba(106,168,79,.55);border-top:5px solid var(--c-green)} .clb-pod-2 .clb-pcol{background:rgba(61,133,198,.14);border-color:rgba(61,133,198,.45);border-top:5px solid var(--c-blue)} .clb-pod-3 .clb-pcol{background:rgba(230,145,56,.13);border-color:rgba(230,145,56,.40);border-top:5px solid var(--c-orange)} .clb-row{background:var(--panel);border-color:var(--line)} .clb-row:hover{border-color:var(--ring)} .clb-bar{background:rgba(61,133,198,.16)} .clb-pname,.clb-nm{color:var(--ink)} .clb-foot{color:var(--ink-dim)} /* ── avatars / win chips that hard-set white on light ───────────────────── */ .rep .av,.scard-h .av{color:#04121F;background:var(--ring)} .wl-toggle .wl-b.win.on,.clip-h .wl.win{color:#04121F} /* ── EVERY SEAT: FULL-ROW FILLS (owner 2026-07-29) ────────────────────────── dl-sub7 #FFD21F on a live call UNDER 7 min dl-o7 #007A33 on a live call over 7 min (Celtics emerald) dl-watch #EE6D08 20+ graded under 70 QC, OR 40+ with a sale but under 70 dl-red #CC0000 40+ with NO sale, or 80+ still under 70 with under 2 sales Priority is red > watch > time. A seat is only ever one colour. The 40->80 window is the owner's grace: a sale at 40 buys watch instead of red, and the price is a SECOND sale by 80 graded calls. THE FILL HAS TO GO ON THE CELLS, NOT THE ROW. Every td sets its own background:var(--panel), so a background on the paints underneath the cells and never shows — the same trap the row-hover fix hit earlier today. AND THE TEXT HAS TO FLIP. The board rule is "all numbers white", but white on these fills is unreadable and I measured it rather than shipping it blind: white on #FFD21F = 1.5:1 white on #6AA84F = 2.9:1 white on #EE6D08 = 3.1:1 white on #007A33 = 5.5:1 white on #CC0000 = 5.9:1 Owner 2026-07-29 asked for WHITE on the orange and the red. Red was already white (5.9:1). Orange is now white too at 3.1:1 — that clears AA for LARGE text (3:1) which is what these 14.5px bold mono cells are on a wall TV, but it is under the 4.5:1 normal-text bar, so it is a deliberate call and not an oversight. The yellow fill KEEPS near-black: white on #FFD21F is 1.5:1, which is invisible. Cell-level colour classes (good/bad/dim/warn) are overridden too, or a green "good" figure would vanish into a green row. */ .pf-t tbody tr.dl-watch td,.pf-t tbody tr.dl-red td{border-bottom-color:rgba(0,0,0,.18)} .pf-t tbody tr.dl-sub7 td,.pf-t tbody tr.dl-sub7 td.l.nm[style]{background:#FFD21F !important} .pf-t tbody tr.dl-o7 td,.pf-t tbody tr.dl-o7 td.l.nm[style]{background:#007A33 !important} .pf-t tbody tr.dl-watch td,.pf-t tbody tr.dl-watch td.l.nm[style]{background:#EE6D08 !important} .pf-t tbody tr.dl-red td,.pf-t tbody tr.dl-red td.l.nm[style]{background:#CC0000 !important} /* ink: near-black on the three light fills, white on red */ .pf-t tbody tr.dl-sub7 td,.pf-t tbody tr.dl-sub7 td.nm, .pf-t tbody tr.dl-sub7 td.good,.pf-t tbody tr.dl-sub7 td.bad, .pf-t tbody tr.dl-sub7 td.warn,.pf-t tbody tr.dl-sub7 td.dim{color:#0B1220} /* Celtics emerald and the red both take WHITE ink — measured: white on #007A33 is 5.5:1 where near-black is only 3.4:1, the reverse of the lighter fills. */ .pf-t tbody tr.dl-o7 td,.pf-t tbody tr.dl-o7 td.nm, .pf-t tbody tr.dl-o7 td.good,.pf-t tbody tr.dl-o7 td.bad, .pf-t tbody tr.dl-o7 td.warn,.pf-t tbody tr.dl-o7 td.dim, .pf-t tbody tr.dl-watch td,.pf-t tbody tr.dl-watch td.nm, .pf-t tbody tr.dl-watch td.good,.pf-t tbody tr.dl-watch td.bad, .pf-t tbody tr.dl-watch td.warn,.pf-t tbody tr.dl-watch td.dim, .pf-t tbody tr.dl-red td,.pf-t tbody tr.dl-red td.nm, .pf-t tbody tr.dl-red td.good,.pf-t tbody tr.dl-red td.bad, .pf-t tbody tr.dl-red td.warn,.pf-t tbody tr.dl-red td.dim{color:#FFFFFF} /* hover must not wash the fill away — darken it instead of replacing it */ .pf-t tbody tr.dl-sub7:hover td,.pf-t tbody tr.dl-sub7:hover td.l.nm[style]{background:#E6BC14 !important} .pf-t tbody tr.dl-o7:hover td,.pf-t tbody tr.dl-o7:hover td.l.nm[style]{background:#00682B !important} .pf-t tbody tr.dl-watch:hover td,.pf-t tbody tr.dl-watch:hover td.l.nm[style]{background:#D45F06 !important} .pf-t tbody tr.dl-red:hover td,.pf-t tbody tr.dl-red:hover td.l.nm[style]{background:#B00000 !important}