/* ============================================================================ office.css — the one token + primitive layer for SEG Office. WHY THIS EXISTS. board / quotes / accounts each carried their own inlined copy of the same tokens, and they had drifted. Measured 8 Aug 2026: token board quotes accounts contrast of the odd one out --faint #5F6975 #5F6975 #8B95A1 3.04:1 FAILS AA body --amber #9E6600 #9E6600 #A66B00 4.44:1 FAILS AA body --green #1B7A4B #1B7A4B #1F8A55 4.35:1 FAILS AA body --radius 12px 12px 8px dark mode yes yes NO So accounts was not just visually off, it was failing WCAG AA on three colours and had no dark mode at all. Once the four boards sit inside one shell that is immediately obvious, hence this file. WHERE THE VALUES COME FROM. Harvested, not invented. field.html is the canonical set (board.html's own comment says "the /field set verbatim") and is the most evolved: it had already corrected --amber from #9E6600 to #8A5900 so amber text clears 4.5:1 on --amber-bg at small sizes. That correction never made it back to the other three. It has now. Verified 8 Aug 2026, light and dark, every foreground on --panel and --panel-2. Everything clears 4.5:1 with one deliberate exception, see --blue. ============================================================================ */ @font-face{ font-family:'Archivo'; font-style:normal; font-weight:400 800; font-stretch:62% 125%; font-display:swap; src:url('/public/archivo.woff2') format('woff2'); } :root{ /* ---- grounds and lines. --navy is the page ground; the name is legacy. --- */ --navy:#F4F6F8; --panel:#FFFFFF; --panel-2:#EDF0F3; --line:#D8DEE4; --row-line:#ECEFF2; --stage:#DDE2E8; /* ---- text ------------------------------------------------------------- */ --ink:#14181C; /* 17.8:1 */ --ink-soft:#2A2F35; --muted:#5B6570; /* 5.9:1 */ --faint:#5F6975; /* 5.6:1 — NOT accounts' old #8B95A1, that was 3.0:1 */ /* ---- blue. TWO blues on purpose, do not use them interchangeably: --blue 4.20:1 → borders, fills, chart strokes, LARGE text only --blue-bright 5.42:1 → any link or label at body size Using --blue for 12px text is the one easy way to fail AA here. ---- */ --blue:#4A7FB5; --blue-bright:#2F6DA8; /* ---- status. --amber is #8A5900 (field's fix), not #9E6600/#A66B00. ---- */ --amber:#8A5900; --amber-bg:#FDF4E5; --amber-line:#E8B04B; --green:#1B7A4B; --green-bg:#E9F5EE; --red:#C93438; --red-bg:#FBEAEA; --red-text:#B3282D; --green-text:#1F8A55; --pink-text:#A9437E; /* ---- brand furniture: the navy header band, the bolt, the accent ------- */ --deep:#0E1B2A; --brandtext:#0E1B2A; --on-accent:#FFFFFF; --on-navy:#CFE0EF; /* 12.9:1 on --deep */ --on-navy-dim:#8FB4D6; /* 8.0:1 on --deep */ --bolt:#0E1B2A; --bolt-ink:#FFFFFF; /* ---- pipeline / schedule swatches (board + accounts) ------------------- */ --s-new:#5C6BC0; --s-sched:#B87D24; --s-eod:#3B7FC4; --s-hold:#3D9E6C; --wknd:#EDF0F3; /* ---- overlays (were quotes-only, now shared) --------------------------- */ --scrim:rgba(14,27,42,.5); --shadow:rgba(14,27,42,.22); --tag-ink:#FFFFFF; /* ---- radius ----------------------------------------------------------- */ --r-sm:6px; --r-md:10px; --r-lg:12px; --radius:var(--r-lg); --r-pill:999px; /* ---- ELEVATION. Four steps. This is the single biggest reason the boards read as hand-made rather than built: 16 distinct box-shadow values were in use and none of them agreed. Measured 8 Aug 2026 — 0 6px 24px rgba(0,0,0,.15) board 0 6px 20px rgba(0,0,0,.28) field 0 4px 14px rgba(14,27,42,.30) quotes 0 4px 14px rgba(10,20,32,.28) site — four hand-picked blacks for what is visually the same lift, and every one of those hardcodes its own rgba, so it does NOT darken in dark mode. Built on var(--shadow), which is already themed, so one declaration serves light and dark and there is nothing to keep in sync in the three dark blocks below. Each step is two shadows: a tight contact shadow that anchors the surface, plus a wide ambient one with NEGATIVE spread so it falls off instead of pooling into a grey smear. That pair is what reads as considered depth; a single blurred drop never does. --e-1 resting card, table row, chip --e-2 hover / raised — pairs with a -1px translate, nothing more --e-3 drawer, popover, sticky header once it has content under it --e-4 modal over the scrim There is no fifth step. If something needs to sit above --e-4 it is a layering problem, not a shadow problem — see the z scale below. Snap when migrating: .15/.18 alphas→--e-2 · .28/.30→--e-3 · .55→--e-4 */ --e-1:0 1px 2px var(--shadow); --e-2:0 2px 6px var(--shadow), 0 8px 20px -6px var(--shadow); --e-3:0 4px 10px var(--shadow), 0 18px 40px -10px var(--shadow); --e-4:0 8px 18px var(--shadow), 0 32px 68px -16px var(--shadow); /* Non-shadow lifts that were already in use verbatim on more than one page, named so they stop being retyped slightly differently each time. */ --e-ring:0 0 0 4px rgba(74,127,181,.18); /* selected / focus halo */ --e-edge-l:inset 3px 0 0 var(--blue-bright); /* selected row, left edge */ --e-edge-b:inset 0 -3px 0 var(--blue-bright); /* selected tab, bottom edge */ /* ---- Z SCALE. 38 hardcoded z-indexes across the pages, topping out at the shell's 60 — a number chosen to beat other numbers nobody wrote down. Six layers. Anything new belongs to one of them; if it doesn't, the answer is not a bigger number. --z-header is 60 so the existing shell rule keeps its exact stacking. */ --z-base:0; --z-raised:10; --z-sticky:20; --z-header:60; --z-drawer:100; --z-modal:200; --z-toast:300; /* ---- INTERACTION. Hover and pressed tints were mixed by hand per page, so the same row lit up four different amounts depending which board you were on. Low-alpha blue reads correctly on --panel AND on the dark panel, so these are deliberately theme-independent — do not fork them into the dark blocks. */ --hover:rgba(74,127,181,.08); --pressed:rgba(74,127,181,.14); --selected:rgba(74,127,181,.12); /* ---- TYPE SCALE. Six steps. These are the exact steps already written down in field.html's comment but never actually declared as vars, so every page went on inventing sizes: 14 distinct sizes were in use across the three boards, including 9.5 / 10.5 / 11.5 / 12.5 / 13.5. 11px is the sunlight floor — field.html carries a note about shrinking text to 9.17px and being unreadable on a phone in sun. Snap when migrating: 9.5,10,10.5→--t-label · 11.5,12,12.5,13,13.5→--t-sm · 15→--t-body · 19,22→--t-head. Nothing below --t-label, ever. ------ */ --t-label:11px; /* labels, chips, table meta — never sentences */ --t-sm:12.5px; /* secondary rows, helper text */ --t-body:14px; /* default body. is set to this below */ --t-title:16px; /* inputs, card titles — 16px also stops iOS zoom-on-focus */ --t-head:20px; --t-display:26px; /* ---- WEIGHT. Five weights were in use with nothing naming them, and 176 hardcoded font-weight:700 — which is why "bold" means three different things depending on the page. Archivo is a variable font (400-800 is declared on the @font-face above), so these are free. --w-bold is the workhorse; reach past it only for the numerals and the wordmark, where --font-stretch-tight is usually the better lever. */ --w-regular:400; --w-medium:500; --w-semi:600; --w-bold:700; --w-black:800; /* ---- LINE HEIGHT. Paired to the type steps, because a scale of sizes with one line-height for all of them is only half a scale — and 1.5 on an 11px chip is loose enough to break the row rhythm on a dense board. Tight for anything that is one line by definition, body for sentences. */ --lh-tight:1.15; /* display, headings, numerals, chips — single-line things */ --lh-snug:1.3; /* titles, table cells, two-line card headers */ --lh-body:1.5; /* sentences. is set to this below */ /* ---- TRACKING. Uppercase micro-type needs positive tracking or it reads as a smear; large type needs slightly negative or it reads as loose. Both were being done ad hoc (.03 / .06 / .16em appear across the shell). */ --tr-caps:.16em; /* the .of-sub eyebrow, 11px uppercase */ --tr-label:.06em; /* tabs, chips, uppercase at --t-label/--t-sm */ --tr-wide:.03em; /* the wordmark */ --tr-tight:-.01em; /* --t-head and up */ /* Archivo is a variable font with a 62-125% width axis. The boards already lean on this for the big numerals; naming it stops it being retyped. */ --font-stretch-tight:82%; /* ---- SPACE SCALE. 4-based. The boards were using 4,6,7,8,9,10,11,12,14,16 with no system. Snap: 6,7,9→--sp-2 · 10,11→--sp-3 · 14→--sp-4. ----- */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; /* ---- MOTION. Was one duration and one curve for everything. In practice 14 distinct durations were in use (.12 .14 .15 .16 .18 .3 .35s, 180ms, 300ms…) and every one of them ran the SAME curve for entering, exiting and hovering. That is precisely why the boards feel correct but never feel crafted: real motion is asymmetric. A thing that arrives should decelerate and settle; a thing that leaves should accelerate and be gone. Using one ease for both makes everything feel like it is being dragged through the same syrup. Three durations, four curves, one rule: entering → --ease-out it arrives and settles exiting → --ease-in it leaves, and leaves faster than it came moving → --ease-move already on screen, both ends eased physical → --ease-spring slight overshoot; the bolt fan-out, a chip snapping into a lane. Used sparingly, this is the one people actually notice. Exits should be one step FASTER than their entrance — --dur-fast out against --dur-base in. Waiting for something to leave is the single most common way a fast app feels slow. --dur and --ease stay as aliases so every existing rule keeps working; --ease resolves to the exact curve it always was. Snap: .12/.14/.15/.16→--dur-fast · .18/180ms→--dur-base · .3/.35→--dur-slow */ --dur-fast:120ms; /* hover, focus, colour — must feel instant */ --dur-base:180ms; /* the default. Sits inside the 150-300ms band */ --dur-slow:280ms; /* drawers, sheets, anything crossing the screen */ --dur:var(--dur-base); --ease-out:cubic-bezier(.2,.6,.3,1); /* the original curve, now named */ --ease-in:cubic-bezier(.5,0,.9,.4); --ease-move:cubic-bezier(.4,0,.2,1); --ease:var(--ease-out); /* --ease-expo is the one to reach for when something should feel emphatic. A hard early deceleration reads as fast AND controlled, which is what most "that felt good" motion actually is — not a bounce. Default to this over --ease-spring; a board the office hits all day should never feel springy. */ --ease-expo:cubic-bezier(.16,1,.3,1); /* --ease-spring overshoots, and overshoot is a tool with exactly one job: something the user is physically manipulating, where a dead stop feels wrong (the bolt fan-out, a card released into a lane). Toned from 1.4 to 1.25 — 1.4 reads as cartoon bounce, which dates a UI faster than anything else on this page. NEVER on opacity (an overshoot past 1 clamps and stalls) and never on a hover state. If in doubt, --ease-expo is the right answer. */ --ease-spring:cubic-bezier(.34,1.25,.5,1); } /* Dark is declared three times on purpose: the OS preference, and both data-theme pins, so board.html's existing theme toggle keeps working and a pinned light theme still wins inside a dark OS. Same values in each. */ @media (prefers-color-scheme: dark){ :root{ --navy:#15181C; --panel:#1C2027; --panel-2:#242A32; --line:#333A44; --row-line:#262C34; --stage:#0A0C0F; --ink:#E7EAEE; --ink-soft:#C7CDD4; --muted:#A0A8B2; --faint:#8A929D; --blue:#5A93C9; --blue-bright:#7FB4E0; --amber:#E8B04B; --amber-bg:#2E2413; --amber-line:#8A6A24; --green:#4CBE85; --green-bg:#12261C; --red:#F0797D; --red-bg:#2A1517; --red-text:#F0797D; --green-text:#4CBE85; --pink-text:#E29BC8; --deep:#0E1E31; --brandtext:#E7EAEE; --on-accent:#0B0F14; --bolt:#7FB4E0; --bolt-ink:#0B0F14; --s-new:#9FA8DA; --s-sched:#E8B04B; --s-eod:#7FB4E0; --s-hold:#4CBE85; --wknd:#1A1E24; --scrim:rgba(0,0,0,.6); --shadow:rgba(0,0,0,.5); }} :root[data-theme="dark"]{ --navy:#15181C; --panel:#1C2027; --panel-2:#242A32; --line:#333A44; --row-line:#262C34; --stage:#0A0C0F; --ink:#E7EAEE; --ink-soft:#C7CDD4; --muted:#A0A8B2; --faint:#8A929D; --blue:#5A93C9; --blue-bright:#7FB4E0; --amber:#E8B04B; --amber-bg:#2E2413; --amber-line:#8A6A24; --green:#4CBE85; --green-bg:#12261C; --red:#F0797D; --red-bg:#2A1517; --red-text:#F0797D; --green-text:#4CBE85; --pink-text:#E29BC8; --deep:#0E1E31; --brandtext:#E7EAEE; --on-accent:#0B0F14; --bolt:#7FB4E0; --bolt-ink:#0B0F14; --s-new:#9FA8DA; --s-sched:#E8B04B; --s-eod:#7FB4E0; --s-hold:#4CBE85; --wknd:#1A1E24; --scrim:rgba(0,0,0,.6); --shadow:rgba(0,0,0,.5); } :root[data-theme="light"]{ --navy:#F4F6F8; --panel:#FFFFFF; --panel-2:#EDF0F3; --line:#D8DEE4; --row-line:#ECEFF2; --stage:#DDE2E8; --ink:#14181C; --ink-soft:#2A2F35; --muted:#5B6570; --faint:#5F6975; --blue:#4A7FB5; --blue-bright:#2F6DA8; --amber:#8A5900; --amber-bg:#FDF4E5; --amber-line:#E8B04B; --green:#1B7A4B; --green-bg:#E9F5EE; --red:#C93438; --red-bg:#FBEAEA; --red-text:#B3282D; --green-text:#1F8A55; --pink-text:#A9437E; --deep:#0E1B2A; --brandtext:#0E1B2A; --on-accent:#FFFFFF; --bolt:#0E1B2A; --bolt-ink:#FFFFFF; --s-new:#5C6BC0; --s-sched:#B87D24; --s-eod:#3B7FC4; --s-hold:#3D9E6C; --wknd:#EDF0F3; --scrim:rgba(14,27,42,.5); --shadow:rgba(14,27,42,.22); } /* ---------------------------------------------------------------- base ---- */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--navy); color:var(--ink); font-family:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; font-size:var(--t-body); line-height:var(--lh-body); -webkit-font-smoothing:antialiased; } img{ max-width:100%; height:auto; } /* Focus was invisible on every board — none of them styled :focus-visible, so keyboard users got the UA default or nothing. Two-tone ring so it reads on both the light panel and the navy header band. */ :focus-visible{ outline:2px solid var(--blue-bright); outline-offset:2px; border-radius:var(--r-sm); } .of-onnavy :focus-visible{ outline-color:var(--on-navy); } /* Anything clickable says so. Several boards had bare
click handlers. */ button,[role="button"],.of-tab,summary{ cursor:pointer; } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } } /* ------------------------------------------------------------- the shell -- */ /* THE STAPLE — the SEG letterhead band. Harvested from board.html's own header rule (--deep ground, 3px --blue rule, 0 0 20px 20px corners) because that IS the house style; CLAUDE.md calls it "the navy letterhead header band". Office's is the tall one: it is the piece that stays put whichever board you are on, so it carries the logo at letterhead scale and the board tabs sit IN it rather than under it. --of-logo is a variable, not a hardcoded height, because the first version of this file pinned it to 26px at (0,2,1) specificity and silently beat the page trying to set 56px. Size it from the consumer, not from here. */ /* 84px, up from 56. Darcy's call 8 Aug 2026: "the logo is our main point." The band is the first thing anyone sees and the mark should carry it, so the logo now outweighs the wordmark rather than sitting level with it. */ :root{ --of-logo:84px; } .of-top{ background:var(--deep); color:#FFFFFF; border-bottom:3px solid var(--blue); border-radius:0 0 20px 20px; padding:18px 30px 0; display:flex; flex-direction:column; gap:14px; z-index:var(--z-header); } .of-top .of-row{ display:flex; align-items:center; gap:18px; min-width:0; } .of-top .of-brand{ display:flex; align-items:center; gap:16px; min-width:0; } .of-top .of-brand img{ height:var(--of-logo); width:auto; display:block; flex:none; filter:drop-shadow(0 4px 14px rgba(0,0,0,.35)); } .of-bdiv{ width:1px; height:54px; background:rgba(255,255,255,.22); flex:none; } .of-name{ font-size:var(--t-display); font-weight:var(--w-black); letter-spacing:var(--tr-wide); text-transform:uppercase; font-stretch:var(--font-stretch-tight); line-height:var(--lh-tight); color:#FFFFFF; white-space:nowrap; } .of-sub{ font-size:var(--t-label); letter-spacing:var(--tr-caps); text-transform:uppercase; color:var(--on-navy-dim); margin-top:5px; } .of-top .of-right{ margin-left:auto; display:flex; align-items:center; gap:10px; } /* Clickable: this is the ONE place the name that signs your comments is set, and every board reads it. It used to be dead text showing the word "OFFICE", while the boards told you to go and set your name somewhere they could not point to. */ .of-top .of-who{ font:inherit; font-family:inherit; /* it is a