/* ============================================================ NBC Terminal Management System — THE centralized stylesheet National Bus Company of Belize One file serves login.html, app.html and every view in public/views/. The design system is the Nucleus theme (cal.com-derived --cal-* tokens), copied from nucleus-scheduler so the two products look like one family — same geometry, same type scale, same spacing. What differs is the ink: the tokens carry the National Bus Company badge palette. ONE THEME. There is no dark mode and no theme toggle. The inherited Nucleus dark theme worked by INVERTING the brand token (near-black button in light, white in dark); once the primary button is pinned to NBC blue that inversion means nothing, and a half-branded dark theme with no way out is worse than none. color-scheme: light tells the browser to render form controls light even when the operator's OS is dark. DEPTH, SOFTLY. The reference is the ticket wizard (public/ticket-flow.css) and the owner's three screens — a Tesla dashboard, a task board, a proposals console: a soft blue-grey canvas, white cards that FLOAT on it with a hairline AND a layered shadow, rounded corners (14px cards, 10px controls, pills for badges), air kept tight, ONE saturated blue for the action (lit as a gradient on its fills), the logo's azure-to-navy for the two dark surfaces (the sidebar and the accent card — one gradient family) and a selected segment, emerald and gold for status, pearl beige for the warm summary surfaces, red only for error. The palette is the badge's own — the owner asked for it "more HD", so it is lit, not new. Depth is a LADDER and every surface sits on one rung of it: rest --shadow-card a card, tile, table, panel on the canvas raised --shadow-lift the same thing under a hand (hover) floating --shadow-overlay a menu, a popover, a toast, a notify card modal --shadow-modal a modal, an overlay, the sale's Complete A resting card is ALWAYS hairline + --shadow-card; the two together are the depth, and neither alone is. Motion explains what just happened: a staggered rise on entry (.rise), the dashboard filling from the top down (.cascade), real content fading into the room a skeleton held (.fade-in), a 2px lift on hover, a 160ms settle on a menu — all on one curve (--ease) and dropped under prefers-reduced-motion. DENSE, ON PURPOSE. The owner: "compress everything so they are smaller". This is a desk a clerk sits at all day, and the day has to fit above the fold of a 1366×768 laptop, so the whole system runs one notch small: 38px controls (--ctl-h, section 1 — still a comfortable target for a mouse or a finger), 32px toolbar rows, 16–18px card padding, 24px page gutters, 13px table cells. The RAIL is the one exception: the owner asked for it to breathe, so it is a 260px column (--rail-w: a 236px card floating 12px in) with 42px items. Type is a six-step scale of tokens (--fs-*) and the control heights are three (--ctl-h*), so re-toning the density is a handful of edits in section 1. The avatar, the switch and the spinner stay literal circles — a radius token cannot express a circle. Sections 1. Design tokens 9. Toast 2. Reset / base 10. Modal · 10B. Overlay 3. Auth page + grid bg 11. Data table + badges 4. Buttons 12. Empty / loading 5. Fields / inputs 13. Stat tiles 6. Status line 14. Dropdown menu 7. App shell · 7B. Header 15. Calendar 8. Page header 16. Funds ledger 17. Charts 18. Reports 19. Print RULE: components never hardcode a color. Every rule below references a token — that is what makes a repalette a change to section 1 and nothing else. If a rule needs a colour it does not have, ADD A TOKEN; do not inline one. Hex appears only in section 1, in the .bg-grid data URI (CSS variables cannot be read inside url()) and in @media print, where the values are absolute paper and ink rather than palette. ============================================================ */ /* ============================================================ 1. DESIGN TOKENS ============================================================ */ :root { /* ---- NBC brand ink — sampled per-pixel from public/logo.png (modes over 25,883 blue / 19,333 green / 47,645 gold badge pixels). Source of truth: every colour below is derived from or measured against these. */ --nbc-blue: #014F97; /* the badge's lowercase n. Text-safe: 8.18:1 on white. Canonical brand value + favicon */ --nbc-green: #017034; /* the badge's c. 6.23:1 on white. Canonical success token. The calendar re-points it to --nbc-emerald inside .cal (section 15), and the location dot is --nbc-emerald-rich now */ --nbc-gold: #C3A245; /* the ring. 2.45:1 on white — FILL / RULE / MARKER ONLY, NEVER on a glyph. Canonical value + favicon */ /* ---- The rest of the badge, from the owner's brief — Dark Emerald #106639, Steel Azure, Pearl Beige #DDD0A7, Golden Bronze — "more HD, or a gradient inspired by the logo". What the file did not already carry is below; each is a FILL, a MARK or a SURFACE, and the text that may sit on each was measured with it. */ --nbc-emerald: #106639; /* the logo's exact emerald. White on it 7.04:1 (and it on white 7.04:1, on the beige tint 6.13:1) — so it may carry a white glyph: the Done disc, a finished step. The calendar's arrival colour */ --nbc-emerald-rich: #128A48; /* emerald, lit — DOTS, BARS, STROKES ONLY. White on it is 4.42:1: NEVER white text on it. As a mark: 4.42:1 on white, 4.23:1 on --cal-bg-muted, 3.43:1 on --nbc-navy, 3.12:1 on the nav gradient 60% down */ --nbc-gold-bright: #D4A94A; /* the ring gold, brighter — the highlight inside a gold GRADIENT (--gold-grad). 2.19:1 on white: never text, never a mark on its own */ --gold-grad: linear-gradient(90deg, var(--nbc-gold) 0%, var(--nbc-gold-bright) 50%, var(--nbc-gold) 100%); /* the auth card's top accent line — a band of the ring, lit in the middle. Never behind type */ --nbc-beige: #DDD0A7; /* Pearl Beige. The HAIRLINE of a warm surface: 1.34:1 on the tint, 1.39:1 on the canvas — decorative. 9.84:1 on --nbc-navy. Never on type */ --nbc-beige-tint: #F5EFDD; /* THE WARM SURFACE — attention and summary blocks, so the app is not all cool grey. A background only. On it: --cal-text-emphasis 15.11 · --cal-text 9.32 · --cal-text-subtle 5.25 · --nbc-blue 7.12 · --nbc-green-ink 6.73 · --nbc-emerald 6.13 · --nbc-gold-ink 5.02 · --cal-error 7.93. --cal-text-muted is only 4.34 — it FAILS here, hence the next token */ --on-beige-muted: var(--cal-text-subtle); /* the muted step ON the tint — 5.25:1 on #F5EFDD. A warm surface re-points --cal-text-muted to this in its own scope, so every label and hint inside clears 4.5:1 without a rule edit */ /* ---- Gold and green pressed dark enough to be legible. Reach for these, never the raw ink, any time the colour lands on type or a thin mark. */ --nbc-gold-strong: #947824; /* retired, kept: it was the 3px active-nav marker on the old LIGHT rail (3.33:1 on --cal-nav-active, 3.82:1 on --cal-bg-subtle, 3.36:1 on --cal-bg-emphasis). The dark card's marker is --nav-marker. No rule reads it now; it stays so one that names it resolves */ --nbc-gold-ink: #7B631B; /* the ONLY gold allowed on text. 5.76:1 on white, 5.20:1 on the warn-badge fill */ --nbc-green-ink: #016030; /* green that carries type: .status.ok and .badge-ok text. 7.73:1 on white */ /* ---- Backgrounds. Surfaces carry the faintest blue cast (h≈210, 3-13 pts of channel spread); --cal-bg stays PURE WHITE so no text ratio ever depends on the tint. */ --cal-bg: #FFFFFF; /* page canvas, cards, inputs, buttons at rest. Every text floor is measured on this */ --cal-bg-muted: #F9FAFC; /* table row hover, .inp:disabled, .icon-btn:hover fill — 1.06:1 off white */ --cal-canvas: #F1F4F8; /* the page BEHIND the cards (L 0.9018). Soft enough that a white card with its shadow reads as floating, not as a hole. On it: --cal-text 9.71:1 · --cal-text-emphasis 15.74:1 · --cal-text-subtle 5.47:1 · --cal-text-muted 4.52:1 (passes, but prefer -subtle on the bare canvas) · --nbc-blue 7.42:1 */ --cal-bg-subtle: #F0F4F8; /* table head, .badge-off, avatar-menu hover, a filled field, a skeleton's fill on a card — 1.11:1 off white. It is 1.00:1 on --cal-canvas, so a skeleton on the bare canvas swaps it for -emphasis (.skel-on-canvas, section 12). (The sidebar left it when it went dark: --nav-* below) */ --cal-bg-emphasis: #E0E6ED; /* a filled field's hover, skeleton peak — 1.14:1 off --cal-bg-subtle; also a skeleton's FILL on the bare canvas, 1.14:1 on --cal-canvas (the band there is --cal-bg-subtle) */ --cal-bg-inverted: #0D1721; /* toast. Blue-black, not neutral black, so it belongs to this palette */ /* ---- Borders. --cal-border is the INTERACTIVE edge and clears 3:1; -subtle / -muted stay decorative hairlines. */ --cal-border-muted: #E9EEF3; /* faintest rule: table row dividers */ --cal-border-subtle: #DCE2EA; /* card edges, badge-off border — decorative, 1.30:1 (no bar) */ --cal-border: #7E8EA2; /* inputs, .inp, .icon-btn, .seg, .chip, switch track — 3.34:1 on white, 3.03:1 on --cal-bg-subtle */ --cal-border-emphasis: var(--nbc-blue); /* FOCUS. Consumed only by the 4 :focus rules + .icon-btn:hover, so pinning it to blue turns every focus ring brand-blue with ZERO rule edits. 8.18:1 on white, 7.40:1 on --cal-bg-subtle. Not on the dark sidebar: that card focuses in gold (--nav-focus) */ /* ---- Text */ --cal-text-emphasis: #101B28; /* headings, table values, input text — 17.36:1 */ --cal-text: #343F4C; /* body copy, table cells — 10.71:1 (clears the 7:1 AAA floor) */ --cal-text-subtle: #566476; /* secondary copy, .badge-off, disabled input — 6.03:1 (5.25:1 on the beige tint) */ --cal-text-muted: #637181; /* field labels, hints, placeholders — 4.99:1. Only 4.34:1 on the beige tint: a warm surface re-points it to --on-beige-muted. (The dark sidebar's inks are --nav-*, never these) */ --cal-text-inverted: #FFFFFF; /* on --cal-bg-inverted — 18.08:1 */ /* ---- Brand. NBC blue is the primary action, the focus base and every selected state. There is no light/dark inversion any more. */ --cal-brand: #014F97; /* THE FLAT BRAND — text links, focus rings, borders, icons, .avatar, checked switch, the calendar's today marker, and the foot of --brand-grad. Gradients go on fills only; everything that is a line or a glyph reads this */ --cal-brand-emphasis: #013A72; /* :active PRESSES flat to this. White on it: 11.35:1 */ --cal-brand-hover: #0459A8; /* the foot of --brand-grad-hover. White on it 7.00:1 */ --cal-brand-text: #FFFFFF; /* sits on --cal-brand — 8.18:1; on --brand-grad's lightest point 5.69:1 */ /* ---- THE ONE SOLID BUTTON, HD. A brighter azure at the top fading into NBC blue: the light falls on the side of the hand, so the thing to press reads as a lit, physical object — the logo's blue, not a new one. Read by .btn-brand, .qa-tile.is-primary and the wizard's .tf-btn-primary (--tf-brand-grad aliases it). Every white-on ratio is taken at the LIGHTEST stop, the worst point under the label. */ --brand-grad-top: #0A66C2; /* white on it 5.69:1 */ --brand-grad: linear-gradient(180deg, var(--brand-grad-top) 0%, var(--cal-brand) 100%); /* rest: #0A66C2 → #014F97 (white 5.69 → 8.18) */ --brand-grad-hover-top: #1874D0; /* hover LIFTS AND BRIGHTENS. White on it 4.72:1. The brief's #1A78D6 measured 4.47:1 — under the floor — so the stop sits at the nearest value that clears it */ --brand-grad-hover: linear-gradient(180deg, var(--brand-grad-hover-top) 0%, var(--cal-brand-hover) 100%); /* hover: #1874D0 → #0459A8 (white 4.72 → 7.00) */ --on-brand-muted: #DDE9F6; /* a caption ON --brand-grad (the primary tile's sub-line): 4.62:1 on the top stop. --on-navy-muted would be 3.11:1 there */ /* ---- The deep navy. The wizard's sale card already fades into it, so it is not new ink. ACCENT, NOT ACTION: the sidebar and the accent card (both --nav-grad-top → here), a selected segment. Blue means "press this"; navy means "this is where you are". */ --nbc-navy: #02264D; /* white on it 15.14:1 */ --on-navy: #FFFFFF; /* type on --nbc-navy / --nav-grad-top / --cal-brand-emphasis: 15.14:1 / 11.79:1 / 11.35:1 */ --on-navy-muted: #A9C2E0; /* captions on navy: 6.45:1 on #02386B, 6.21:1 on #013A72, 8.28:1 on #02264D */ --on-navy-figure: var(--nav-marker); /* the accent card's big numeral: the ring gold, lifted. 6.53:1 on #02386B, 8.39:1 on #02264D — that clears the 4.5:1 floor for type of ANY size, so no large-text allowance is being spent and the smaller hero (2.1rem, 1.7rem on a phone) stays legal. DISPLAY ONLY by design all the same: gold type at caption size reads as a warning. A caption stays --on-navy-muted */ --hero-grad: linear-gradient(135deg, var(--nav-grad-top) 0%, var(--nav-grad-bottom) 100%); /* the accent card: the sidebar's own two stops, on the diagonal a wide card wants, so the two dark surfaces are one family */ --on-navy-hover: rgba(255, 255, 255, .10); /* a wash, not a colour: a hover on a navy surface */ --on-navy-line: rgba(255, 255, 255, .16); /* a rule or an icon box on a navy surface */ --on-navy-chip: rgba(255, 255, 255, .22); /* a count chip inside a navy selected segment (.rs-tab-n). Over --nbc-navy it composites to #3A5674: its white type 7.60:1 */ /* A ROUND ICON BUTTON ON NAVY — the ticket wizard's back and close, on its pill (public/ticket-flow.css). A fill, so the button reads as a thing to press on a surface where an outline would be one more line. Measured composited over the LIGHTER stop, #02386B (the worst case), with the foot in brackets. The fill is only ~1.4:1 off the navy: a shape, not a boundary — the glyph is what says "press". The focus ring is --nav-focus drawn OUTSIDE the button, on the bare navy: 6.53:1 (8.39:1). */ --on-navy-btn: rgba(255, 255, 255, .12); /* rest: #20507D, its white glyph 8.38:1 (#204062, 10.65:1) */ --on-navy-btn-hover: rgba(255, 255, 255, .20); /* under a hand: #356089, its white glyph 6.59:1 (#355171, 8.18:1) */ --auth-field: #013A72; /* the login page's field — the ONE full-bleed brand surface left. = --cal-brand-emphasis; the .bg-grid hexes were computed against it */ /* ---- Retired from the nav, kept. The active nav item is a frosted pill on the dark card now (--nav-active below), so the rail no longer reads this wash — but .tk-dep.is-selected (section 18E, the ticket window's chosen departure) still does, so it is NOT dead: do not delete it. NOT a general selected-row tint: --cal-text-muted is only 3.94:1 on it. */ --cal-nav-active: #DAE6F1; /* off the rail; still the chosen departure's wash */ /* ---- Semantic. Error stays a true red: none of the logo's colours are ever pressed into meaning "error". */ --cal-error: #8D1B1B; /* .status.error, .btn-danger fill, .icon-btn.danger — 9.11:1 on white, white on it 9.11:1 */ --cal-error-bg: #F6EDED; /* .icon-btn.danger:hover fill, .empty-state.error — error text on it 7.92:1 */ --cal-error-border: #DDBBBB; /* .empty-state.error ring — replaces an unauditable color-mix() */ /* ---- The calendar's now-line. The ONE new red the calendar is allowed, and deliberately NOT --cal-error: "it is 10:42" is not an error condition, and the two must never be confused at a glance. A 2px rule and an 8px marker, so the 3:1 non-text bar is what applies — 4.77:1 on white and 4.50:1 on the weekend tint clear it with room. Never carries type. */ --cal-now: #D93025; /* ---- Backdrop scrim. Neutral black on purpose: it DIMS the page rather than tinting it, which is why it is not built out of a palette token. */ --scrim: rgba(0, 0, 0, .45); /* The scrim for a browser that cannot blur, and for an operator who asked their OS for less transparency. Heavier because it is doing the whole job alone: .45 was chosen to sit UNDER an 8px blur, and without that blur it leaves the page behind the panel legible enough to compete with the form in front of it — worse than either a clean blur or a clean dim. Read by .overlay-backdrop (section 10B) only; .modal-backdrop blurs under the same three guards but keeps --scrim throughout. */ --scrim-strong: rgba(0, 0, 0, .72); /* The overlay's blur radius. A token because two properties (prefixed and standard) must never drift apart, and because it is the one knob to turn if a terminal's hardware struggles. NEVER animate it — see 10B. */ --overlay-blur: 8px; /* ---- Badge trios. Explicit rather than color-mix() chains, so text-on-fill is provable instead of emerging from an expression nobody can audit. */ --badge-ok-bg: #E6F1EB; /* .badge-ok fill */ --badge-ok-text: #016030; /* on its own fill — 6.68:1 */ --badge-ok-border: #94CAAD; /* --nbc-emerald-rich at 45% into white — the pill's edge in the emerald family. 1.60:1 on the fill — decorative. The text stays --nbc-green-ink */ --badge-warn-bg: #F7F3E7; /* .badge-warn fill — a 13% gold tint */ --badge-warn-text: #7B631B; /* on its own fill — 5.20:1 (the raw gold would be 1.6:1 here) */ --badge-warn-border: #D2BE85; /* 1.65:1 on the fill */ --badge-role-bg: #E8EFF6; /* .badge-role fill */ --badge-role-text: #014F97; /* on its own fill — 7.06:1 */ --badge-role-border: #A6C0DA; /* 1.62:1 on the fill */ /* ---- Login grid squares, on the blue field. A whisper by design — 1.13:1 and 1.28:1 against --auth-field — so they texture the page without ever competing with the white auth card sitting on it. CSS vars cannot be read inside url() — these RECORD the values; the hexes in the .bg-grid data URI must be edited to match. */ --grid-fill: #01427F; /* rect fill -> %2301427F in the data URI. 1.13:1 on --auth-field */ --grid-stroke: #014A8C; /* rect stroke -> %23014A8C in the data URI. 1.28:1 on --auth-field */ /* ── The navigation is a DARK card ── THE ONE PLACE THE SIDEBAR'S COLOURS LIVE. The owner: "the nav bar is too white — it needs some colour for better contrast." The floating card keeps its inset, corner and shape and takes the logo's blue: a vertical gradient from deep azure at the top to the navy at the foot — the badge's own field, lit from above. The accent card (section 16) wears the same two stops, so the app's two dark surfaces are one family. The active item is a FROSTED pill — white at 14% with a hairline edge — and the gold marker sits in it; on the dark card the ring gold is at home. The avatar menu is NOT part of this: it drops over the page and stays a light card on the --cal-* tokens. HOW THESE WERE MEASURED: every ratio is taken on the LIGHTER top stop, #02386B — the worst case; the foot is darker and every figure there is higher. A translucent value is measured composited over #02386B. */ --nav-grad-top: #02386B; /* deep azure. White on it 11.79:1 */ --nav-grad-bottom: #02264D; /* = --nbc-navy. White on it 15.14:1. THE FLAT STAND-IN: a rule that needs the card as one colour reads this stop */ --nav-bg: linear-gradient(180deg, var(--nav-grad-top) 0%, var(--nav-grad-bottom) 100%); /* the sidebar card, and the phone drawer. An IMAGE: read it with `background`, never `background-color` */ --nav-card-edge: rgba(255, 255, 255, .06); /* the card's rim — a glint on the gradient, not a line; --shadow-nav does the separating */ --nav-text: #D6E2F0; /* item labels at rest — 8.98:1 (11.53:1 at the foot), 7.19:1 on --nav-hover; also the kbd hint's glyph, 5.19:1 on its keycap */ --nav-text-strong: #FFFFFF; /* the wordmark, the location name, the account name, the search text, a hovered label — 11.79:1; 9.44:1 on --nav-hover, 8.90:1 on --nav-field */ --nav-text-muted: var(--on-navy-muted); /* #A9C2E0 — section headings, the LOCATION caption, a soon item, rest icons, the search glyph and placeholder — 6.45:1; 5.16:1 on --nav-hover; 4.87:1 on --nav-field */ --nav-hover: rgba(255, 255, 255, .08); /* a white wash under a hand */ --nav-active: rgba(255, 255, 255, .14); /* the active PILL, frosted. Its type is --on-navy, 7.91:1 on it; the gold marker inside 4.38:1 (a 3px bar needs 3:1) */ --nav-active-edge: rgba(255, 255, 255, .18); /* the pill's 1px edge, drawn inset so the label never shifts; also the soon tag's and the kbd keycap's edge, and the search field's edge under a hand */ --nav-line: rgba(255, 255, 255, .10); /* the foot rule, the location block's edge, the search field's edge at rest */ --nav-field: rgba(255, 255, 255, .10); /* the menu search and its kbd keycap. It never brightens: at .14 the placeholder falls to 4.33:1, so hover firms the edge and focus draws the gold ring instead */ --nav-marker: #E0BE4A; /* THE RING GOLD, lifted — the 3px bar in the active pill, the avatar disc, the count badge, the focus ring. 6.53:1 on #02386B, 8.39:1 on #02264D. Never on white (1.81:1) */ --nav-focus: var(--nav-marker); /* keyboard focus on the dark card: 6.53:1 on it, 5.23:1 on --nav-hover, 4.38:1 on the active pill, 4.93:1 against --nav-field. The search field's ring is it at 40% */ --nav-dot: var(--nbc-emerald-rich); /* the location dot — #128A48, 3.12:1 on the gradient 60% down, 3.43:1 at the foot (an 8px mark needs 3:1). ON THE BARE CARD ONLY: a white wash under it sinks it (2.73:1 on a 6% one), which is why the location block has no fill */ --nav-avatar-ink: #101B28; /* on the gold avatar and the gold count badge — 9.62:1 */ /* ---- Corners. Five sizes, and the name says WHICH kind of thing a rule means, so re-toning the whole system is five edits. The avatar disc, the switch and the spinner carry 999px / 50% literally: they are circles, and a radius token could never express that. The corners came down with the density pass (file-top comment): a smaller card on the old radius reads as a pill. */ --radius-sm: 8px; /* calendar event chips, a sale row's hover, the day pips, the .skeleton bar, the wizard's --tf-r-sm */ --radius-md: 10px; /* inputs, .btn-sm, icon buttons, nav items, menu items, the KPI / quick-tile icon box, the wizard's --tf-r */ --radius-lg: 12px; /* menus, popovers, toasts, notify cards, small panels, a .skel-block */ --radius-xl: 14px; /* cards, tiles, tables, modals, overlays, the auth card, the sidebar card, the wizard's --tf-r-lg */ --radius-btn: 10px; /* buttons */ --radius-pill: 999px; /* badges, pill tracks, segmented controls, pill IDs, a .skel-line */ /* ---- Density. Three control heights, named by what they sit in, so the whole app's size is three numbers and the gutter/gap pair below — not forty literals. A segment inside a pill track is the track's height less its 3px padding and 1px border, top and bottom (calc(... - 8px) where it is read). */ --ctl-h: 38px; /* THE control: .btn, .inp, a field's input, the page search, the scope select, a full-size .seg track, the phone's hamburger */ --ctl-h-sm: 30px; /* .btn-sm — a row's or a card's own small action */ --ctl-h-row: 32px; /* a TOOLBAR ROW: the range pills' track and the date inputs and filter selects beside it, the calendar's nav + Today + Week|Month, a .seg-sm track */ --gutter: 24px; /* the page's side and foot padding (.page-card) and the header's bleed into it (.page-hd). 16px on a phone (the block after :root) */ --gap-section: 16px; /* between the blocks of a page — tiles, charts, tables, the desk's two columns */ --app-header-h: calc(var(--ctl-h) + 12px); /* the search's FALLBACK row (section 7B), drawn only on a screen with no .page-hd for the field to live in: 12px above + the --ctl-h field. The page under a visible row reserves 100vh less this, so a short page does not scroll by the row's height */ /* ---- The rail. The dark card's width and how far it floats in from the screen's edges, and from those the column the page leaves for it — named once because the page's left margin (.app-main) and the search card's widest reach (7B) both have to agree with the card, or a re-sized rail leaves the page tucked under it. */ --nav-w: 236px; /* the sidebar card, and the phone drawer */ --nav-inset: 12px; /* the card's float off the top, left and bottom edges — and the same again between the card and the page */ --rail-w: calc(var(--nav-inset) + var(--nav-w) + var(--nav-inset)); /* 260px: where the page column starts */ /* ---- Shadows — THE LADDER. Blue-black (rgba 13,23,33), never neutral, so a shadow belongs to this palette. Every surface sits on one rung: rest → raised → floating → modal. A resting card is ALWAYS the hairline (--cal-border-subtle) PLUS --shadow-card; the two together are the depth. Hover moves a thing one rung up and 2px north. */ --shadow-sm: 0 1px 2px rgba(13, 23, 33, .05); /* a control at rest: outline buttons, icon buttons, pill tracks */ --shadow-bar: 0 1px 0 rgba(13, 23, 33, .04); /* the hairline under a sticky bar that wears the canvas (.page-hd, the phone's .mobile-topbar): a shadow, not a border, so it never adds to the bar's height */ --shadow-card: 0 1px 2px rgba(13, 23, 33, .04), 0 4px 14px rgba(13, 23, 33, .06); /* REST — every resting card: panel, tile, table-wrap, desk panel, calendar (the dark sidebar and the accent card take --shadow-nav) */ --shadow-lift: 0 2px 4px rgba(13, 23, 33, .06), 0 12px 28px rgba(13, 23, 33, .10); /* RAISED — hover on any interactive card, tile or chip */ --shadow-overlay: 0 2px 6px rgba(13, 23, 33, .08), 0 16px 40px rgba(13, 23, 33, .14); /* FLOATING — dropdown, avatar menu, calendar popover, toast, notify card, mobile drawer */ --shadow-modal: 0 4px 10px rgba(13, 23, 33, .10), 0 28px 70px rgba(13, 23, 33, .22); /* MODAL — .modal, .overlay, .tk-done */ /* The solid blue button and the primary quick tile carry the brand's own glow (the wizard's), so the one thing to press is also the one thing that shines. Hover deepens it. */ --shadow-brand: 0 1px 2px rgba(1, 79, 151, .24), 0 6px 16px rgba(1, 79, 151, .20); --shadow-brand-hover: 0 2px 4px rgba(1, 79, 151, .24), 0 10px 24px rgba(1, 79, 151, .26); --shadow-auth: 0 2px 6px rgba(1, 15, 34, .18), 0 30px 80px rgba(1, 15, 34, .35); /* the auth card floating on the navy field */ /* The two DARK surfaces at rest — the sidebar and the accent card (.page-hero). A navy object on a light canvas needs a shadow that belongs to it — the grey --shadow-card reads as dirt under navy — so this is the card's own ink, one step deeper than the rest rung. */ --shadow-nav: 0 2px 6px rgba(2, 38, 77, .16), 0 14px 34px rgba(2, 38, 77, .22); /* ---- Motion. One curve and two durations, so every hover, lift and settle in the app moves the same way the wizard's do (= --tf-ease). */ --ease: cubic-bezier(.2, .7, .2, 1); --dur: 200ms; --dur-fast: 150ms; /* ---- Type scale — six steps. Sizes are tokens so a step is one edit. One notch down with the density pass; body stays 14px because it is what a paragraph is read at, and the table steps to 13px on its own (section 11) where the figures are scanned, not read. */ --fs-display: 1.75rem; /* 28px, weight 500, letter-spacing -.02em, line-height 1.1 — KPI values (a tile sizes it down to the room it has, section 13). The accent card's hero figure is its own 2.1rem (section 16) */ --fs-h1: 1.25rem; /* 20px, 600, -.02em — page titles */ --fs-h2: 1rem; /* 16px, 600, -.005em — panel titles, modal titles, the calendar's range */ --fs-body: .875rem; /* 14px, 400/500 — body copy, empty states, the default of anything unsized */ --fs-small: .78rem; /* 12.5px — notes, sub-lines, hints */ --fs-micro: .68rem; /* 10.9px, 600, uppercase, letter-spacing .06em — table heads, section labels, kickers. --cal-text-muted on white is 4.99:1, which holds at this size: no heading here leans on a large-text allowance */ /* ---- Calendar geometry. Named because three separate grids (the day header, the all-day strip and the scrolling body) have to agree on the gutter width to the pixel or the columns visibly step. */ --cal-gutter-w: 56px; /* the time gutter, and the header's empty corner */ --cal-hour-h: 48px; /* one hour row. Every event position is derived from it */ --cal-scrollbar: 0px; /* classic scrollbars steal width from the scrolling body only; the sticky header rows pad by this to stay in step. 0 is correct for macOS/iOS overlay scrollbars — set it from JS (offsetWidth - clientWidth) elsewhere. */ /* ---- Calendar events. Aliases, not new ink. --cal-event-bg is THE event colour: a chip is a 14% tint of it with dark type (--cal-text-emphasis, 17:1 on white and barely less on the tint) and a solid bar of it down the left; the dots, badges and the popover's bar are it at full strength. They exist so a per-event colour can be injected as ONE custom property on the element instead of the component writing colours by hand. --cal-event-text is the type on a FULL-colour surface (the "Next" badge): white, 8.18:1 on the blue and 7.04:1 on the arrival green — which inside .cal is --nbc-emerald (section 15 re-points --nbc-green for that subtree). */ --cal-event-bg: var(--cal-brand); --cal-event-text: var(--cal-brand-text); --cal-event-edge: var(--cal-brand-emphasis); /* ---- The funds ledger. Money IN is the badge green pressed dark enough to carry type (7.73:1 on white). Money OUT is deliberately NOT the error red: an expense is ordinary business — fuel, wages, a part — not a fault, and a column of red numbers cries wolf on every receipt until nobody reads it. Direction is carried by the type badge and a leading minus; the colour only has to make the two columns separable. Only a NEGATIVE NET, a day whose cash went backwards, earns the alarm colour, and that is the one place red means what red means everywhere else. */ --ledger-in: var(--nbc-green-ink); /* income amounts — 7.73:1 on white */ --ledger-out: var(--cal-text-emphasis); /* expense amounts — 17.36:1 on white */ --ledger-net-neg: var(--cal-error); /* a net below zero — 9.11:1 on white */ /* ---- Chart series (section 17). THIS PALETTE WAS COMPUTED AND VALIDATED, NOT CHOSEN. Do not substitute a value on taste, and do not "brighten" one to make a chart pop: every number below was measured, and a hand picked replacement silently re-opens the failure this closes — two series a red-green reader cannot tell apart. Run through the house dataviz validator (scripts/validate_palette.js in the dataviz method) at mode=light, surface=#FFFFFF, pairs=all, it clears every check the tool computes: lightness band · chroma floor · CVD separation across ALL pairs · normal-vision floor · contrast vs surface. To re-verify after any edit: node validate_palette.js "#014F97,#B45309" \ --mode light --surface "#FFFFFF" --pairs all Two series — income vs expense, the pairing every chart here draws: worst all-pairs ΔE 22.4 protan · 27.5 tritan · 30.1 normal. PASS. Three series — if a third measure is ever plotted: worst all-pairs ΔE 10.6 deutan · 7.2 tritan · 17.1 normal. PASS, but that tritan figure sits in the 6–8 floor band, which is legal ONLY with a second identity channel — so a three-series chart owes a legend AND direct labels, never colour alone. WCAG against white: 8.18:1 / 5.02:1 / 7.10:1. Every mark clears the 3:1 non-text floor with room, and the two-series pair separates by LIGHTNESS as well as hue — which is what keeps it readable when the report comes off a mono printer. --chart-1 IS --nbc-blue, so a chart reads as part of this app rather than as something a library drew. And a SINGLE-measure chart uses --chart-1 alone: net across nine locations is a magnitude encoding, so nine hues would encode nothing. Colour is identity, never size. */ --chart-1: #014F97; /* series 1 — income, and the lone hue of every single-measure chart */ --chart-2: #B45309; /* series 2 — expenses */ --chart-3: #6D28D9; /* series 3 */ --chart-4: #0D9488; /* series 4. The four together pass every check on EVERY pair (not just adjacent ones): validate_palette.js "#014F97,#B45309,#6D28D9,#0D9488" --pairs all — which is what a donut needs, since every slice touches every other. Five could not be made to pass: every fifth hue tried fell under the 15 normal-vision floor against amber or the 8 CVD floor against purple or teal. So a part-to-whole chart shows at most FOUR named slices and folds the rest into Other, drawn in --chart-other below, which is deliberately not a series colour. That is the method's own answer ("cut series") and it is why the taxonomy's fifth and sixth categories never get a hue of their own. */ --chart-other: #94A3B8; /* the Other fold in a donut: a mid grey, chroma-free on purpose so it reads as "the rest", never as a sixth identity. 2.6:1 on white — a fill, never text */ /* A chart's chrome — the gridlines, the axes, the zero rule, the crosshair, the 2px ring around a dot — introduces NO ink of its own. charts.js reaches straight for the tokens this app already has: --cal-border-subtle hairline grid and axis, recessive, never black --cal-border the zero rule and the crosshair (3.34:1 — the reader has to see which day is being read) --cal-bg the surface ring on a dot and the gap between touching bars: it must be the colour of the CARD, not a grey, or the gap reads as a stroke --cal-text / -emphasis / -muted every word on the chart Aliases were written here first and then deleted: a second name for --cal-border-subtle is one more thing to keep in step, and it let a chart's grey drift away from the app's. */ --chart-height: 240px; /* the height an EMPTY or loading chart reserves. charts.js draws at 260 (line) / 240 (bar) unless the caller says otherwise, so a card is never taller empty than it is drawn, and the page below never jumps when the numbers arrive */ /* ---- Type — unchanged */ --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --switch-knob: var(--cal-bg); /* white knob on the grey track; becomes --cal-brand-text on the blue checked track (8.18:1) */ color-scheme: light; /* one theme. Tells the UA to render form controls light even when the OS is dark */ } /* The phone's gutter. A token re-pointed here, beside its definition, rather than a literal in each phone override: the page's padding and the header's bleed into it read the same token, so they can never step out of line with each other. */ @media (max-width: 768px) { :root { --gutter: 16px; } } /* ============================================================ 2. RESET / BASE ============================================================ */ /* The hidden attribute must WIN. The browser's own [hidden]{display:none} is a UA rule, and any author display — .form-row{display:grid}, .range-custom {display:inline-flex} — silently beats it, so el.hidden = true does nothing visible. That is exactly how the Expense form kept showing Route and Bus, and how the Custom date inputs never folded away on Funds or Reports. One !important here, in the reset where it belongs, and hidden means hidden. */ [hidden] { display: none !important; } /* THE ENTRANCE. Things arrive one after another rather than all at once — the login card, and any screen that staggers its cards (the dashboard has its own, .cascade, below). --i is the order, set in the markup. Exactly the wizard's .tf-rise: `backwards`, not `both`, so the start state holds during the delay and the element is RELEASED the moment it lands — `both` would pin transform: none on it forever and kill the hover lift. */ .rise { animation: riseIn .46s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 45ms); } @keyframes riseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* THE DASHBOARD'S ENTRANCE — the page FILLS FROM THE TOP DOWN. The owner: "it fades from the top to the bottom". .rise lifts each card UP into place, which reads as the page assembling from below; .cascade drops each one 8px DOWN into place, and the view sets --i in reading order (top-left → bottom-right), so the fill travels down the screen the way the eye does. 60ms apart rather than .rise's 45: the step has to be long enough to read as a direction, and short enough that a dozen blocks are all down inside a second. `backwards`, never `both`, for .rise's reason: the hidden start holds through the delay and the card is RELEASED the moment it lands — `both` would pin transform: none on it and kill the hover lift. */ .cascade { animation: cascadeIn 420ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 60ms); } @keyframes cascadeIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } /* CONTENT LANDING WHERE A SKELETON WAS. The placeholder already holds the room, so the real thing must not POP into it: it fades in over 260ms with a 2px settle in the cascade's direction (down), and a list staggers 35ms a row (the view caps --i at 10, so the longest list is whole inside half a second). --i is reset HERE because custom properties inherit: a list inside a .cascade panel carrying --i: 6 would otherwise wait 210ms for a stagger it never asked for. An --i set inline on a row still wins. Never on the same element as .cascade — both set `animation`, and this later rule would silently take it. */ .fade-in { --i: 0; animation: fadeInSettle 260ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 35ms); } @keyframes fadeInSettle { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } } /* A menu settles into place rather than appearing: 160ms, a 4px drop and a 2% scale, on the same curve. Read by .dropdown-menu, .avatar-menu and .cal-pop — defined once, here, so the three can never drift apart. */ @keyframes menuIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font-sans); background: var(--cal-bg); color: var(--cal-text); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; } .muted { color: var(--cal-text-subtle); } .emphasis { color: var(--cal-text-emphasis); } /* Motion off, on request: the one block for the entrances and the lifts sits at the END of section 18G, not here. A rule inside a media query carries no extra specificity, so `.qa-tile { transition: none }` only beats `.qa-tile { transition: … }` (18D) by coming AFTER it — from here the block quieted .rise alone and nothing else. The per-component blocks (the spinner, the pulse, the overlay's slide) stay beside the thing they quiet, each after its own rule. */ /* ============================================================ 3. AUTH PAGE — centered card over the square-box grid ============================================================ */ /* The arrival screen wears the company's colour — the ONE full-bleed brand surface (the sidebar is dark too, but it is a card) — so the first thing a clerk sees each morning is the badge on its own field. The white card floats on it under the deepest shadow in the file (--shadow-auth): this is the one page with no chrome to hide behind, so the badge, the field and one card have to do the branding on their own. */ .auth-page { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; position: relative; overflow: hidden; background: var(--auth-field); } /* Signature background: a field of squares that fades out from behind the card via a radial mask. The squares used to be rounded (rx='8'); they are rx='8' now, in step with every other corner in the app. NOTE: the square colors are baked into the inline SVG data URL — CSS variables cannot be read inside url(). To recolor, edit the hex INSIDE the url() string below (%23 is an encoded #) and keep --grid-fill / --grid-stroke in section 1 in step with it. */ .bg-grid { position: fixed; inset: -20px; z-index: 0; pointer-events: none; /* Two changes from the inherited tile. The squares are ROUNDED (rx 8), in step with the rest of the theme — a grid of hard corners behind a 14px card would be the last thing still square. And they are BLUE — a whisper above the field at 1.13:1 and 1.28:1 (both computed against the --auth-field value), which is the same relationship the grey tile had to the old white page. Any louder and the texture competes with the card. CSS variables cannot be read inside a url() data URI, so these hexes are baked in: change --auth-field and these two must be recomputed by hand. */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='68'%3E%3Crect x='4' y='4' width='60' height='60' rx='8' fill='%2301427F' stroke='%23014A8C'/%3E%3C/svg%3E"); background-size: 68px 68px; background-position: center; -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 44%, #000 0%, transparent 74%); mask-image: radial-gradient(ellipse 62% 58% at 50% 44%, #000 0%, transparent 74%); } .auth-col { position: relative; z-index: 1; width: 100%; max-width: 380px; display: flex; flex-direction: column; align-items: center; } /* The card FLOATS on the field. --shadow-auth is the deepest shadow in the file because the field is the darkest surface: a shadow that reads on the canvas would vanish on navy. It rises in (.rise, set in login.html) so the page opens rather than snaps. THE GOLD CAP. A 4px band of the ring (--gold-grad) across the card's top edge, so the arrival screen carries the badge's three colours — the blue field, the white card, the gold ring — before a word is read. It is a first background LAYER rather than a pseudo-element: clipped to the border-box it follows the card's own corner, needs no overflow: hidden that could clip a focus ring, and sits under no type. The top border goes transparent so the band starts at the very edge instead of under a grey hairline. */ .auth-card { width: 100%; background: var(--gold-grad) top / 100% 4px no-repeat border-box, var(--cal-bg); border: 1px solid var(--cal-border-subtle); border-top-color: transparent; border-radius: var(--radius-xl); padding: 32px; text-align: center; box-shadow: var(--shadow-auth); } /* The badge is the anchor of the card, not a favicon sat above the title: 76px against the 380px card (the same fifth of its width the old 88 on 400 was). 12px under it — a circle's bottom tangent donates a few px of optical air, so the tighter gap is what actually groups the mark with the title. */ .auth-logo { display: flex; justify-content: center; margin-bottom: 12px; } .auth-logo svg { width: 76px; height: 76px; } /* NBC ships a raster badge (public/logo.png) rather than an inline mark — contain, don't crop, or the gold ring loses its edge. No border-radius: the badge is a CIRCLE on a white field, so the rounded-square crop it inherited from Nucleus's square mark has nothing to round off. */ .auth-logo img { width: 76px; height: 76px; object-fit: contain; display: block; } .auth-title { margin: 0 0 4px; font-size: var(--fs-h1); font-weight: 700; color: var(--cal-text-emphasis); letter-spacing: -.02em; } .auth-subtitle { margin: 0 0 20px; font-size: .85rem; color: var(--cal-text-subtle); } /* The one solid button on the page, a touch taller than a form control so it reads as the destination of the form rather than one more row of it. */ .auth-card .btn-brand.btn-block { height: calc(var(--ctl-h) + 4px); font-size: .9rem; } /* Outside the card, so it is on the FIELD — a muted grey here would be unreadable. --on-navy-muted is 6.21:1 on the field. */ .auth-footer { margin-top: 18px; font-size: .76rem; color: var(--on-navy-muted); } /* The release under it, same ink, a step smaller — a fact to quote, not read. */ .auth-version { margin-top: 4px; font-size: .7rem; color: var(--on-navy-muted); font-variant-numeric: tabular-nums; } /* Divider with centered label */ .divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; } .divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--cal-border-subtle); } .divider span { font-size: .76rem; color: var(--cal-text-muted); } /* ============================================================ 4. BUTTONS ============================================================ */ /* --ctl-h (38px): dense, still a clean target; weight in the type; a 1px lift on hover and back down on press. The transition names its four properties rather than `all`, so a colour token change never animates on load. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: var(--ctl-h); padding: 0 14px; border: 1px solid transparent; border-radius: var(--radius-btn); background: var(--cal-bg); color: var(--cal-text); font-family: inherit; font-size: .85rem; font-weight: 600; line-height: 1; cursor: pointer; transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); text-decoration: none; white-space: nowrap; } .btn:disabled { opacity: .45; cursor: default; } .btn-block { width: 100%; } /* THE ONE SOLID BUTTON, HD. The brand gradient — a brighter azure at the top fading into NBC blue (--brand-grad, white 5.69:1 at its lightest) — with the brand's own glow (the wizard's): hover LIFTS and BRIGHTENS the whole gradient (--brand-grad-hover, 4.72:1 at its lightest), press drops back and goes FLAT and dark (--cal-brand-emphasis, 11.35:1) — the light is on the side of the hand, so the button reads as a physical thing. A gradient cannot be transitioned, so the fill swaps at the hover while the lift and the glow still ease; nothing is lost that a hand would see. */ .btn-brand { background: var(--brand-grad); color: var(--cal-brand-text); border-color: transparent; box-shadow: var(--shadow-brand); } .btn-brand:not(:disabled):hover { background: var(--brand-grad-hover); transform: translateY(-1px); box-shadow: var(--shadow-brand-hover); } .btn-brand:not(:disabled):active { background: var(--cal-brand-emphasis); transform: none; box-shadow: var(--shadow-brand); } /* A dead button must not shine. .btn:disabled only fades it, and a faded gradient under a faded glow still reads as the lit thing to press — so a disabled one goes back to the FLAT brand with no glow, and the .45 fade on top says "not now". Disabled type is exempt from the contrast floor. */ .btn-brand:disabled { background: var(--cal-brand); box-shadow: none; } /* White with a hairline and the control shadow; the edge darkens to the interactive border on hover so a pointer knows it landed. */ .btn-outline { background: var(--cal-bg); color: var(--cal-text-emphasis); border-color: var(--cal-border-subtle); box-shadow: var(--shadow-sm); } .btn-outline:not(:disabled):hover { border-color: var(--cal-border); transform: translateY(-1px); box-shadow: var(--shadow-lift); } .btn-outline:not(:disabled):active { transform: none; box-shadow: var(--shadow-sm); } .btn-ghost { background: transparent; border-color: transparent; color: var(--cal-text-subtle); box-shadow: none; } .btn-ghost:hover { background: var(--cal-bg-subtle); color: var(--cal-text-emphasis); } /* Compact variant for row / toolbar actions. */ .btn-sm { height: var(--ctl-h-sm); padding: 0 10px; font-size: .78rem; gap: 5px; border-radius: var(--radius-md); } .btn-sm svg { width: 14px; height: 14px; } /* Destructive confirm. The one place red is a fill: same geometry as the brand button, the control shadow rather than the glow. */ .btn-danger { background: var(--cal-error); color: var(--cal-text-inverted); border-color: var(--cal-error); box-shadow: var(--shadow-sm); } /* Hover resolves to #7A1B1D; white on it is 10.49:1. */ .btn-danger:not(:disabled):hover { background: color-mix(in srgb, var(--cal-error) 85%, var(--cal-text-emphasis)); transform: translateY(-1px); } .btn-danger:not(:disabled):active { transform: none; } .btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--cal-bg), 0 0 0 4px var(--cal-brand); } .btn svg { width: 15px; height: 15px; flex: none; } /* ============================================================ 5. FIELDS / INPUTS ============================================================ */ .field { display: block; text-align: left; margin-bottom: 12px; } .field > span { display: block; font-size: .76rem; font-weight: 600; color: var(--cal-text-emphasis); margin-bottom: 5px; } .field input { width: 100%; height: var(--ctl-h); padding: 0 12px; border: 1px solid var(--cal-border); /* the 3.34:1 interactive edge, kept */ border-radius: var(--radius-md); background: var(--cal-bg); color: var(--cal-text-emphasis); font-family: inherit; font-size: .85rem; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .field input::placeholder { color: var(--cal-text-muted); } .field input:hover { border-color: var(--cal-text-subtle); } /* --cal-border-emphasis IS --nbc-blue, so focus is brand-blue everywhere without a single rule naming a colour. The compliant indicator is the BORDER (8.18:1); the 30% ring is a halo on top of it. */ .field input:focus { outline: none; border-color: var(--cal-border-emphasis); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cal-border-emphasis) 30%, transparent); } /* Password field with show/hide toggle */ .field-pw { position: relative; } .field-pw input { padding-right: 38px; } .pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; display: grid; place-items: center; background: none; border: none; border-radius: var(--radius-md); color: var(--cal-text-muted); cursor: pointer; } .pw-toggle:hover { color: var(--cal-text-emphasis); } .pw-toggle svg { width: 16px; height: 16px; } /* Show one eye at a time via a class on the button (robust — not the hidden attr). */ .pw-toggle .eye-hide { display: none; } .pw-toggle.revealed .eye-show { display: none; } .pw-toggle.revealed .eye-hide { display: block; } /* Label row with a trailing action (e.g. Password … Forgot?) */ .field-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; } .field-label-row label { font-size: .78rem; font-weight: 500; color: var(--cal-text-emphasis); } .field-label-row .link-inline { font-size: .76rem; font-weight: 500; color: var(--cal-text-subtle); } .field-label-row .link-inline:hover { color: var(--cal-text-emphasis); } .link-inline { background: none; border: none; padding: 0; font: inherit; font-weight: 500; color: var(--cal-text-emphasis); cursor: pointer; text-decoration: none; } .link-inline:hover { text-decoration: underline; } /* ── In-app form controls (modals, views) ── */ .form-row { display: grid; gap: 5px; margin-bottom: 12px; } .form-row > label { font-size: .76rem; font-weight: 600; color: var(--cal-text-emphasis); } .form-hint { font-size: var(--fs-small); color: var(--cal-text-muted); margin-top: 2px; } .inp { width: 100%; height: var(--ctl-h); padding: 0 12px; border: 1px solid var(--cal-border); border-radius: var(--radius-md); /* the 3.34:1 interactive edge, kept */ background: var(--cal-bg); color: var(--cal-text-emphasis); font: inherit; font-size: .85rem; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .inp:hover:not(:disabled):not(:focus):not([readonly]) { border-color: var(--cal-text-subtle); } .inp:focus { outline: none; border-color: var(--cal-border-emphasis); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cal-border-emphasis) 30%, transparent); } .inp::placeholder { color: var(--cal-text-muted); } .inp:disabled { background: var(--cal-bg-muted); color: var(--cal-text-subtle); cursor: not-allowed; } select.inp { cursor: pointer; } textarea.inp { height: auto; min-height: 72px; padding: 8px 12px; resize: vertical; line-height: 1.5; } /* A FIELD INSIDE A CARD is filled, not outlined — the wizard's rule. The card is white, the places you type are grey, and the one you are in turns white with the brand ring. The eye finds the inputs by tone before it reads a label. Scoped to the three card surfaces that hold forms, so a field standing on the canvas (a filter, a search) keeps its outline. */ .modal .inp, .overlay .inp, .wiz-card .inp { background: var(--cal-bg-subtle); border-color: transparent; } .modal .inp:hover:not(:disabled):not(:focus):not([readonly]), .overlay .inp:hover:not(:disabled):not(:focus):not([readonly]), .wiz-card .inp:hover:not(:disabled):not(:focus):not([readonly]) { background: var(--cal-bg-emphasis); border-color: transparent; } .modal .inp:focus, .overlay .inp:focus, .wiz-card .inp:focus { background: var(--cal-bg); border-color: var(--cal-border-emphasis); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cal-border-emphasis) 30%, transparent); } /* Input with a trailing button (password + Generate). The button and the field are both --ctl-h, so the row lines up with every other field in the modal. */ .field-with-action { display: flex; gap: 8px; align-items: center; } .field-with-action .inp { flex: 1; min-width: 0; } .field-with-action .btn { flex: none; } /* A generated password, shown exactly once. Monospace and letter-spaced because somebody has to read it off the screen and type it correctly — and select-all on click so it can be copied without the button. */ .password-reveal { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--cal-border); border-radius: var(--radius-md); background: var(--cal-bg-muted); } .password-reveal code { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: .95rem; font-weight: 600; letter-spacing: .04em; color: var(--cal-text-emphasis); word-break: break-all; user-select: all; } .password-reveal-actions { display: inline-flex; gap: 5px; flex: none; } .password-reveal-actions .icon-btn { width: 28px; height: 28px; } .password-reveal-actions .icon-btn svg { width: 14px; height: 14px; } /* Segmented control (All / Active / Inactive, Week | Month, Cash | Card). A grey pill TRACK with the chosen segment in NAVY — the task board's Card | List. Navy, not blue: a selected segment is a state, and blue is reserved for the thing to press. The track has no shadow: it sits in the surface rather than on it. */ .seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--cal-bg-subtle); border: 1px solid var(--cal-border-subtle); border-radius: var(--radius-pill); box-shadow: none; overflow: visible; } /* The track is --ctl-h overall, so it stands level with a button beside it; a segment is that less the track's 3px padding and 1px border. */ .seg button { height: calc(var(--ctl-h) - 8px); padding: 0 12px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--cal-text-subtle); font: inherit; font-size: .78rem; font-weight: 600; line-height: 1; cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .seg button:hover { color: var(--cal-text-emphasis); background: var(--cal-bg); } .seg button.on { background: var(--nbc-navy); color: var(--on-navy); } /* 15.14:1 */ .seg button + button { border-left: 0; } .seg button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--cal-brand); } /* Toggleable filter chip: a pill with a hairline; chosen, it takes the brand TINT trio (7.06:1) rather than solid blue, so a row of chosen chips never out-shouts the one solid button on the page. */ .chip { border: 1px solid var(--cal-border-subtle); background: var(--cal-bg); color: var(--cal-text-subtle); border-radius: var(--radius-pill); padding: 4px 10px; font: inherit; font-size: .72rem; font-weight: 500; cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .chip:hover { border-color: var(--cal-border); color: var(--cal-text-emphasis); } .chip.on { background: var(--badge-role-bg); color: var(--badge-role-text); border-color: var(--badge-role-border); } /* Two-column layout (collapses on mobile) */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; } .two-col .col-h { font-size: .92rem; font-weight: 600; margin: 0 0 2px; color: var(--cal-text-emphasis); } @media (max-width: 720px) { .two-col { grid-template-columns: 1fr; gap: 4px; } } /* 34px: an icon button mostly rides in a table row (the row menu, the users' actions), and at the full control height it would set the row's height instead of the 13px text doing so. */ .icon-btn { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--cal-border-subtle); border-radius: var(--radius-md); background: var(--cal-bg); color: var(--cal-text-subtle); cursor: pointer; box-shadow: var(--shadow-sm); transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } /* .icon-btn is not a .btn, so .btn:disabled never reaches it — a disabled icon button would otherwise sit at full strength while doing nothing. Opacity, not a colour, so this needs no new token. */ .icon-btn:disabled { opacity: .4; cursor: default; } /* Reads --cal-border-emphasis, so the outline now snaps grey -> NBC blue on hover. Stronger than stock Nucleus, and deliberate: blue means "you are interacting with this" everywhere else in the app — which is exactly why the :not(:disabled) guard is here: a dead control must never claim that. */ .icon-btn:not(:disabled):hover { color: var(--cal-text-emphasis); border-color: var(--cal-border-emphasis); background: var(--cal-bg-muted); } .icon-btn svg { width: 15px; height: 15px; } .icon-btn.danger:not(:disabled):hover { color: var(--cal-error); border-color: var(--cal-error); background: var(--cal-error-bg); } /* DELIBERATE ROUND EXCEPTION (2 of 3). A square track with a square knob does not read as a switch — it reads as a broken segmented control. Google keeps its switch round for the same reason. Do not square these two radii. */ /* 36×20 with a 14px knob 3px in from each end, so the knob travels 36 − 3 − 14 − 3 = 16px. */ .switch { position: relative; display: inline-block; width: 36px; height: 20px; } .switch input { opacity: 0; width: 0; height: 0; } .switch span { position: absolute; inset: 0; background: var(--cal-border); border-radius: 999px; transition: .15s; cursor: pointer; } .switch span::before { content: ''; position: absolute; width: 14px; height: 14px; left: 3px; top: 3px; background: var(--switch-knob); border-radius: 50%; transition: .15s; } .switch input:checked + span { background: var(--cal-brand); } /* Knob switches to --cal-brand-text on the filled track — white on NBC blue, 8.18:1 — so the knob never dissolves into the bar it sits on. */ .switch input:checked + span::before { transform: translateX(16px); background: var(--cal-brand-text); } /* ============================================================ 6. STATUS LINE ============================================================ */ .status { margin-top: 12px; min-height: 1.2em; font-size: .8rem; color: var(--cal-text-subtle); } .status.error { color: var(--cal-error); } /* The badge green pressed dark enough to carry type: 7.73:1 on white. */ .status.ok { color: var(--nbc-green-ink); } /* ============================================================ 7. APP SHELL + NAVIGATION The nav's CONTENT comes from config/navigation.mjs via /config.js — this section only dresses whatever app.js renders. ============================================================ */ /* THE SIDEBAR IS A DARK CARD. It floats --nav-inset (12px) in from the screen's edge on the canvas like every card does — fixed, so it never scrolls with a long ledger, and the inset is what lets it read as an object on the page rather than a wall the page is bolted to — but where every other card is white it wears the logo's blue (--nav-bg: deep azure at the top into the navy at the foot). The owner found the white rail too white; the one thing that is on every screen now carries the company's colour, and the white page beside it reads against it. EVERY colour here is a --nav-* token from section 1, measured on the dark card — no --cal-* ink below is allowed to touch it, except inside the light avatar menu. The border is a glint, not a line; the navy-tinted --shadow-nav separates it. ROOMY, ON PURPOSE. The density pass took the rail down with everything else and the owner found it cramped: "expand the padding and increase the size". The page stays dense; the rail — read at a glance from across the counter, and now the one place the terminal is named — does not. Sizes only: every ink below is the section-1 pair it was measured as. */ .sidebar { position: fixed; left: var(--nav-inset); top: var(--nav-inset); bottom: var(--nav-inset); width: var(--nav-w); z-index: 40; display: flex; flex-direction: column; gap: 6px; background: var(--nav-bg); /* The card's own ink, so anything inside that names no colour of its own inherits one that reads on the navy rather than the body's dark text. (The light avatar menu resets it to --cal-text on itself.) */ color: var(--nav-text); border: 1px solid var(--nav-card-edge); border-radius: var(--radius-xl); box-shadow: var(--shadow-nav); padding: 16px 16px 14px; } /* The wordmark wraps rather than truncates: "NBC Terminal Management" is the product's name, and two lines of it beside the badge read better than an ellipsis. */ .sidebar-brand { display: flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; color: var(--nav-text-strong); padding: 2px 6px 16px; } .sidebar-brand > span { min-width: 0; } /* 34px, and cut to a CIRCLE. public/logo.png is an RGB file with no alpha: the badge is drawn on a white square, and on the navy card those white corners would frame it as a white tile. The ring runs out to ~250 of the image's 256px radius, so a 50% crop loses nothing of the badge and takes only the corners — then the gold ring sits straight on the navy it was drawn against. The phone topbar's copy (.mobile-brand) is on the light canvas and keeps no crop. */ .sidebar-brand svg { width: 34px; height: 34px; flex: none; } .sidebar-brand .brand-mark { width: 34px; height: 34px; object-fit: contain; flex: none; display: block; border-radius: 50%; } /* The rail scrolls on a short screen; a light UA scrollbar would be a white stripe down the dark card, so the thumb takes the card's own edge. */ .sidebar-nav { display: flex; flex-direction: column; gap: 3px; flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--nav-active-edge) transparent; } /* The group headings — Counter · Manage · System — a hair over the micro step, with a clear gap above each so the three groups read as three. Drawn by App.mountShell only when more than one group has an item. */ .nav-section { padding: 16px 12px 6px; font-size: .7rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--nav-text-muted); } .nav-section:first-child { padding-top: 4px; } /* 42px tall by min-height, not by padding: the label's line box never decides the rail's rhythm, so every item is the same height whatever the font does. */ .nav-item { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 42px; padding: 0 12px; border: none; border-radius: var(--radius-md); background: none; color: var(--nav-text); font: inherit; font-size: .92rem; font-weight: 500; cursor: pointer; text-align: left; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .nav-item:hover { background: var(--nav-hover); color: var(--nav-text-strong); } .nav-item:hover .nav-ic { color: var(--nav-text-strong); } /* THE ACTIVE PILL, FROSTED. White at 14% over the gradient with a 1px edge of its own and white type (7.91:1) — glass on the navy, so "where am I" is answered from across the room without a second dark colour. The edge is an INSET shadow, not a border, so the label does not shift a pixel when an item becomes active. */ .nav-item.active { background: var(--nav-active); color: var(--on-navy); font-weight: 600; box-shadow: inset 0 0 0 1px var(--nav-active-edge); } .nav-item.active .nav-ic { color: var(--on-navy); } /* NBC gold marker — the badge's ring colour, so the chrome reads as NBC without competing with blue for "action". Inside the frosted pill it is 4.38:1 at the lightest point of the card (a 3px bar needs 3:1). Inset and rounded: flush against the left edge a square bar would poke out past the pill's corner radius. Centred by top/transform, so it follows the item's height; 18px is the 42px item's own proportion of the old 14/36. */ .nav-item.active::before { content: ''; position: absolute; left: 5px; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; border-radius: 999px; background: var(--nav-marker); } /* Room for the marker (12px + its 3px), so it never sits under the icon. */ .nav-item.active { padding-left: 15px; } /* KEYBOARD FOCUS ON THE DARK CARD. The browser's own ring is dark blue or black and sinks into the navy, so focus is the gold (6.53:1 on the card, 4.38:1 on the active pill). Inset, because the rail is a scroll box (overflow-y: auto) and an outline drawn outside an item is clipped at its left and right edges. */ .nav-item:focus-visible, .avatar-btn:focus-visible { outline: 2px solid var(--nav-focus); outline-offset: -2px; } /* Quiet pale line icons at rest — the Tesla dashboard's — that go white with the label on hover and in the active pill. */ .nav-ic { display: inline-flex; flex: none; color: var(--nav-text-muted); transition: color var(--dur-fast) var(--ease); } .nav-ic svg { width: 20px; height: 20px; } /* Phase 2+ modules: visible so the operator can see what is coming, but plainly not clickable yet. */ .nav-item.soon { color: var(--nav-text-muted); } .nav-item.soon:hover { background: var(--nav-hover); color: var(--nav-text); } .nav-item.soon .nav-ic { opacity: .7; } /* An OUTLINED tag, no fill: a wash of its own on top of a hovered item's would take its muted type to 3.93:1. Bare, it is 6.45:1 at rest and 5.16:1 on a hovered item. */ .nav-soon { margin-left: auto; font-size: .62rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 1px 6px; border-radius: var(--radius-pill); line-height: 1.5; color: var(--nav-text-muted); background: transparent; border: 1px solid var(--nav-active-edge); } /* A count on a nav item — how many cash outs are waiting on To verify (App.setNavBadge, for the collector and an admin). The ring gold with the avatar's dark ink (9.62:1), so on the dark card it is the brightest thing there, the one thing asking for a hand (the gold against the card itself: 6.53:1). Round like the .nav-soon pill and the avatar disc: a square 20px count reads as a broken checkbox. Hidden at zero by the JS; the [hidden] rule in section 2 wins over this display. */ .nav-badge { display: inline-grid; place-items: center; margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: .7rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--nav-avatar-ink); background: var(--nav-marker); } /* Which location (bus terminal) this account is on — the operator should never have to guess which one their day's figures belong to. THIS IS THE ONE PLACE the terminal is named: the global header's chip is gone and the page subtitles no longer repeat it (the owner: "once is fine"), so the block is drawn to be found — a caption over the name at a readable size, and the name WRAPS rather than truncating, because a clipped "Belize City Termin…" would be the only copy on screen. */ /* An OUTLINED block — the card's hairline, no fill — so it reads as a quiet fact beside the pressable items. It used to share the search field's fill; on the dark card it cannot, because the emerald dot is measured on the BARE gradient (3.12:1 60% down, and the block always sits lower than that, between the rail and the foot) and any white wash under it sinks it below the 3:1 a small mark needs. A two-row grid: the caption sits over the name, and the dot hangs in its own column beside the NAME, so both lines start at one edge. The text wrapper steps aside (display: contents) to let its two lines be cells of this grid — the markup is unchanged. */ .sidebar-location { display: grid; grid-template-columns: 8px minmax(0, 1fr); grid-template-areas: ". label" "dot name"; column-gap: 10px; row-gap: 2px; align-items: start; margin: 10px 0 6px; padding: 10px 12px 11px; border: 1px solid var(--nav-line); border-radius: var(--radius-md); background: transparent; } /* Emerald, lit (--nav-dot = --nbc-emerald-rich): "open, trading" in the badge's own green, on the navy. Centred on the name's FIRST line — its line box is .9rem × 1.3 — so a name that wraps keeps the dot beside its start. */ .sidebar-location .dot { grid-area: dot; width: 8px; height: 8px; margin-top: calc((.9rem * 1.3 - 8px) / 2); border-radius: 999px; background: var(--nav-dot); } .sidebar-location-text { display: contents; min-width: 0; } .sidebar-location-label { grid-area: label; font-size: var(--fs-micro); font-weight: 600; letter-spacing: .07em; line-height: 1.4; text-transform: uppercase; color: var(--nav-text-muted); } .sidebar-location-name { grid-area: name; min-width: 0; font-size: .9rem; font-weight: 600; line-height: 1.3; color: var(--nav-text-strong); overflow-wrap: anywhere; } .sidebar-foot { position: relative; border-top: 1px solid var(--nav-line); padding-top: 10px; } .avatar-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: none; border-radius: var(--radius-md); background: none; cursor: pointer; transition: background var(--dur-fast) var(--ease); } .avatar-btn:hover { background: var(--nav-hover); } /* DELIBERATE ROUND EXCEPTION (1 of 3). An avatar is a disc everywhere — a square one reads as a missing image. */ .avatar { width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; background: var(--cal-brand); color: var(--cal-brand-text); font-size: .72rem; font-weight: 600; flex: none; } .avatar-name { flex: 1; text-align: left; font-size: .88rem; font-weight: 500; color: var(--nav-text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .avatar-btn svg { width: 16px; height: 16px; color: var(--nav-text-muted); flex: none; } /* The third logo colour: the account disc is the ring gold, so the card carries blue (the card itself), emerald (the location dot) and gold (the person) — the badge, in three marks. Dark ink on it reads 9.62:1; the disc against the card, 8.39:1 at the foot. The avatar in the MENU below keeps the blue fill. THE MENU STAYS LIGHT. It drops over the page, not over the card, so it is a white floating card on the --cal-* tokens like every other menu — the --nav-* inks above never reach it. */ .sidebar-foot .avatar { width: 30px; height: 30px; font-size: .76rem; background: var(--nav-marker); color: var(--nav-avatar-ink); } /* The release this server runs (package.json via /config.js), under the account button — the answer to "which version is this terminal on?". */ .sidebar-version { padding: 6px 8px 0; font-size: var(--fs-micro); line-height: 1.4; color: var(--nav-text-muted); font-variant-numeric: tabular-nums; } /* A floating layer: the overlay rung of the ladder, and it settles in. */ .avatar-menu { position: absolute; left: 8px; right: 8px; bottom: calc(100% + 6px); background: var(--cal-bg); border: 1px solid var(--cal-border-subtle); border-radius: var(--radius-lg); color: var(--cal-text); /* its own ink — it sits in the dark card's DOM and must not inherit --nav-text */ box-shadow: var(--shadow-overlay); padding: 5px; z-index: 50; animation: menuIn 160ms var(--ease); } .avatar-menu-head { padding: 6px 8px 8px; border-bottom: 1px solid var(--cal-border-subtle); margin-bottom: 4px; } .avatar-menu-name { font-size: .82rem; font-weight: 600; color: var(--cal-text-emphasis); } .avatar-menu-mail { font-size: .74rem; color: var(--cal-text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .avatar-menu-meta { font-size: .7rem; color: var(--cal-text-muted); margin-top: 2px; } .avatar-menu-location { margin-left: 6px; } .avatar-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: none; border-radius: var(--radius-md); background: none; color: var(--cal-text); font: inherit; font-size: .82rem; font-weight: 500; cursor: pointer; text-align: left; } .avatar-menu-item:hover { background: var(--cal-bg-subtle); color: var(--cal-text-emphasis); } .avatar-menu-item svg { width: 15px; height: 15px; flex: none; } .app-body { background: var(--cal-canvas); } /* 12px inset + 236px card + 12px gap = 260px (--rail-w): the page starts one inset past the sidebar card's right edge. */ .app-main { margin-left: var(--rail-w); min-height: 100vh; padding: 0; } /* NOT a surface. The house layout used to put every screen on one white sheet and then place white tiles and tables INSIDE it — card-on-card, where a hairline was the only thing separating them and nothing read as a distinct object. So this keeps its padding and is a plain layout box: the canvas shows through as the page, and the tiles, tables and panels below are the cards floating on it. The gutter is a token (--gutter, 24px; 16px on a phone) because the header bleeds into it by the same amount. */ .page-card { background: transparent; border: none; min-height: 100vh; padding: 0 var(--gutter) var(--gutter); } /* A view arrives the way a card does: an 8px rise on the house curve. */ #view.view-in { animation: viewIn 260ms var(--ease); } @keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* EXCEPT the dashboard, which fades only. Its blocks drop into place from above (.cascade, section 2), and a whole view rising 8px underneath them would pull the other way — the first card would hang still while the two motions cancelled. The fade stays, so anything the view leaves un-cascaded still arrives rather than popping. Keyed on body[data-view] (set by App.renderRoute before the view draws, and stable for its whole life) — not on :has(.cascade), which would flip the animation name back the moment a re-render dropped the class and replay the view's entrance. */ body[data-view="dashboard"] #view.view-in { animation-name: viewFade; } @keyframes viewFade { from { opacity: 0; } to { opacity: 1; } } .mobile-topbar { display: none; } .sidebar-backdrop { display: none; } @media (max-width: 768px) { /* On a phone the card becomes a DRAWER: flush to the left edge, rounded on the side that faces the page, and on the floating rung of the ladder because it is now a layer over the page rather than a card beside it. It keeps the same gradient (--nav-bg, from the rule above), so the rail is the same dark object on every screen size. */ .sidebar { left: 0; top: 0; bottom: 0; /* The card's own width, never more of a small phone than 86% of it: the scrim beside it is what a tap closes the drawer on. */ width: var(--nav-w); max-width: 86vw; border-radius: 0 var(--radius-xl) var(--radius-xl) 0; box-shadow: var(--shadow-overlay); transform: translateX(-100%); transition: transform var(--dur) var(--ease); } .sidebar.open { transform: none; } /* The fixed 56px topbar owns the top of the phone screen. The header bar's own phone override lives at the end of section 8, AFTER the desktop rule it has to beat — the same-specificity rule here would lose on source order; the hero's is at the end of its own block in section 16. */ .app-main { margin-left: 0; padding: 56px 0 0; } /* The padding follows --gutter, which section 1 re-points to 16px here. */ .page-card { min-height: calc(100vh - 56px); } /* The frosted canvas the page header wears, so the two bars a phone stacks read as one surface. Solid canvas is the base; the blur is the upgrade (guarded in section 8 alongside .page-hd's). */ .mobile-topbar { display: flex; align-items: center; gap: 10px; position: fixed; top: 0; left: 0; right: 0; height: 56px; z-index: 30; padding: 0 12px; background: var(--cal-canvas); box-shadow: var(--shadow-bar); } .mobile-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--cal-text-emphasis); } /* 24px — sized to the 56px bar, not to the rail's 34px badge: the drawer that opens from here carries the big one. No circle crop here: the topbar is the light canvas, and the PNG's white corners sit on it at 1.1:1 — nothing there to cut. */ .mobile-brand svg { width: 24px; height: 24px; flex: none; } .mobile-brand .brand-mark { width: 24px; height: 24px; object-fit: contain; flex: none; display: block; } /* The one control that opens the navigation on a phone: a --ctl-h icon button on the white-card recipe (hairline + control shadow), the edge going brand-blue under a hand like every other icon button. It stays the full control height, unlike a table's icon buttons: it is the phone's only way into the app. */ .hamburger { display: grid; place-items: center; width: var(--ctl-h); height: var(--ctl-h); border: 1px solid var(--cal-border-subtle); border-radius: var(--radius-md); background: var(--cal-bg); color: var(--cal-text); cursor: pointer; box-shadow: var(--shadow-sm); } .hamburger:hover { border-color: var(--cal-border-emphasis); color: var(--cal-text-emphasis); } .hamburger svg { width: 18px; height: 18px; } /* A scrim, not a shadow: it stays neutral black so it dims rather than tints. */ .sidebar-backdrop.show { display: block; position: fixed; inset: 0; background: var(--scrim); z-index: 35; } } /* ============================================================ 7B. APP HEADER — the global search (App.search, public/app.js) ONE field for every staff page, drawn ONCE by App.mountShell and then MOVED, never re-drawn: App.search._home puts it inside the view's own .page-hd (section 8) — level with the page title, pushed right, before the page's actions — so the search and the title share one row instead of the search stacking a row of its own above the title (the owner: "the search can be at the same height as the header"). The .app-header row above #view is only its FALLBACK, for a screen that draws no .page-hd; the JS hides the row, so it takes no height, whenever the field is homed. The row holds nothing else — the terminal is named once, in the rail's location block, and a page's subtitle carries the date where the page needs it. HIDDEN. A screen whose own header takes the page-header's place — the ticket wizard's navy pill — takes the field away with App.search.hide(). That state needs no rule of its own here: the JS sets the `hidden` ATTRIBUTE on the field (it travels with it wherever it is homed) and on the row, and section 2's [hidden] rule beats both their displays. The row's hidden attribute is also what the .page-card reservation at the end of this section keys on, so a hidden row reserves nothing. The row is the CANVAS, not a bar — no fill, no rule, no shadow of its own — and it scrolls away with the page. The conductor's shell draws none of this. ============================================================ */ /* z 21 at rest: over the page's sticky .page-hd (20) — the two never overlap at rest, the number only matters for the card below. Height is the token, so the page under a VISIBLE row can reserve exactly the rest of the screen (the .page-card rule at the end of this section). */ .app-header { position: relative; z-index: 21; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--app-header-h); padding: 12px var(--gutter) 0; } /* Open, the card must clear every sticky bar a page draws under the header — a page's own bar may sit at 30 (the ticket wizard's pill does, though it hides the field for as long as it is up) — so the header rises to 31 only for as long as the list is up. On a phone that is also over the fixed topbar (30); the list closes on blur, so it never lingers there. */ .app-header.is-open { z-index: 31; } /* HOMED IN THE PAGE'S OWN HEADER. Its own flex item in .page-hd's row: after the title block, before .page-hd-actions, and margin-left: auto takes the free space so the field (and the actions after it) sit at the right while the title keeps the left. It GROWS from 260px up to 380px: the small basis is what lets it share a laptop's row with a page's range pills and solid button before anything wraps, the cap is a ticket number and a destination with room to spare. .page-hd centres its items, so the field sits on the title row's middle. */ .page-hd > .app-search { flex: 1 1 260px; max-width: 380px; margin-left: auto; } /* The page header is a sticky bar with a stacking context of its own (z 20), and the card of matches lives INSIDE it — so the card can only ever be as high as the bar. While the list is up the bar rises to the fallback row's open level (31, over the ticket window's 30 and the calendar's own popover at 20, which comes later in the page and would win a tie); App.search._paintOpen sets the class and takes it off. */ .page-hd.has-search-open { z-index: 31; } /* The field: white on the canvas at the control height, a hairline and the control shadow at rest — the white card's recipe, so it reads as the thing to type in without the 3:1 edge of a form field; the glyph and the placeholder name it. Under a hand the edge firms to --cal-border; in focus it is the brand border and ring every field in the app wears. */ .app-search { position: relative; flex: 0 1 480px; min-width: 0; } .app-search-ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); display: flex; color: var(--cal-text-muted); pointer-events: none; } .app-search-ic svg { width: 15px; height: 15px; } .app-search input { -webkit-appearance: none; appearance: none; /* Safari draws type=search as a rounded well of its own otherwise */ display: block; width: 100%; height: var(--ctl-h); margin: 0; padding: 0 38px 0 33px; /* 38 on the right: the keycap sits there until the field is used */ border: 1px solid var(--cal-border-subtle); border-radius: var(--radius-md); background: var(--cal-bg); color: var(--cal-text-emphasis); font: inherit; font-size: .85rem; box-shadow: var(--shadow-sm); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .app-search input::placeholder { color: var(--cal-text-muted); } .app-search input::-webkit-search-decoration { -webkit-appearance: none; } .app-search input:hover:not(:focus) { border-color: var(--cal-border); } .app-search input:focus { outline: none; border-color: var(--cal-border-emphasis); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cal-border-emphasis) 30%, transparent); } /* In use, the keycap steps aside and the native × takes the right edge. */ .app-search input:focus, .app-search input:not(:placeholder-shown) { padding-right: 10px; } /* The "/" keycap: the hint that the key exists, where the eye already is. The same keycap the ticket window's hint row draws (.tk-hint kbd, section 18E) — a 6px corner, because the control radius on a 20px box reads as a pill. Gone once the field has focus or words. */ .app-search-kbd { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); min-width: 20px; height: 20px; padding: 0 5px; display: inline-grid; place-items: center; border: 1px solid var(--cal-border-subtle); border-bottom-width: 2px; border-radius: 6px; background: var(--cal-bg-subtle); color: var(--cal-text-subtle); /* ~5.4:1 */ font-family: inherit; font-size: .7rem; font-weight: 600; line-height: 1; pointer-events: none; } .app-search input:focus + .app-search-kbd, .app-search input:not(:placeholder-shown) + .app-search-kbd { display: none; } /* THE CARD OF MATCHES — the floating rung of the ladder, settling in on menuIn like every menu. Anchored under the field and at least 480px wide (never wider than the page column — the screen less the rail and the two gutters), so a ticket's full route line has room even when the field has been squeezed. Eight rows at most, so the max-height is a guard for a short window, not a scroll the list needs. */ .app-search-pop { position: absolute; left: 0; right: 0; top: calc(100% + 6px); min-width: min(480px, calc(100vw - var(--rail-w) - 2 * var(--gutter))); max-height: min(420px, calc(100vh - 140px)); overflow-y: auto; overscroll-behavior: contain; padding: 5px; background: var(--cal-bg); color: var(--cal-text); border: 1px solid var(--cal-border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-overlay); transform-origin: top left; animation: menuIn 160ms var(--ease); } /* A row: the kind badge in a fixed column (so every handle starts at the same x), the handle over one line of what it is, and the money on the right. Two lines in 42px — dense, the tape's own rhythm. The highlight is ONE state for the arrows and the mouse (the JS moves .is-active on hover), so two rows are never lit at once. */ .app-search-item { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 42px; padding: 5px 8px; border-radius: var(--radius-md); cursor: pointer; transition: background var(--dur-fast) var(--ease); } .app-search-item.is-active { background: var(--cal-bg-subtle); } .app-search-item.is-active .app-search-title { color: var(--cal-brand); } /* 7.40:1 on the highlight */ /* The kind, in the badge trios section 1 measured: a ticket in the brand tint, a cash out (drawer or bag) in the gold, a deposit in the green, a plain ledger entry in the neutral grey. Micro type in a fixed column. */ .app-search-kind { justify-self: start; max-width: 100%; display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border: 1px solid var(--cal-border-subtle); border-radius: var(--radius-pill); background: var(--cal-bg-subtle); color: var(--cal-text-subtle); font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-search-kind.is-ticket { background: var(--badge-role-bg); color: var(--badge-role-text); border-color: var(--badge-role-border); } .app-search-kind.is-drawer, .app-search-kind.is-bag { background: var(--badge-warn-bg); color: var(--badge-warn-text); border-color: var(--badge-warn-border); } .app-search-kind.is-deposit { background: var(--badge-ok-bg); color: var(--badge-ok-text); border-color: var(--badge-ok-border); } .app-search-main { display: flex; flex-direction: column; min-width: 0; } .app-search-title { font-size: .82rem; font-weight: 600; line-height: 1.25rem; color: var(--cal-text-emphasis); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-search-sub { font-size: .72rem; line-height: 1.05rem; color: var(--cal-text-subtle); /* ~5.4:1 on the highlight */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-search-side { display: flex; flex-direction: column; align-items: flex-end; text-align: right; white-space: nowrap; } .app-search-amount { font-size: .8rem; font-weight: 600; line-height: 1.25rem; color: var(--cal-text-emphasis); font-variant-numeric: tabular-nums; } .app-search-status { font-size: .68rem; font-weight: 600; line-height: 1.05rem; color: var(--cal-text-subtle); } /* A refunded ticket or a voided entry is no longer money held: the amount is struck, as My sales strikes it. Colour, not opacity, so the figure keeps its 4.5:1 on the highlight. */ .app-search-item.is-void .app-search-amount { text-decoration: line-through; color: var(--cal-text-subtle); } .app-search-empty { padding: 14px 10px; text-align: center; font-size: .8rem; color: var(--cal-text-subtle); } /* FLIPPED. Homed at the right end of a page's title row — often with nothing after it — a card dropping from the field's LEFT edge at 480px would run off the screen. App.search._placePop measures that on every open and hangs the card from the field's RIGHT edge instead, opening leftward over the page, as wide as the field or 480px, whichever is more. Measured rather than assumed, because with a short title and a squeezed field a fixed right anchor would push the card under the rail. */ .app-search-pop.is-flipped { left: auto; right: 0; width: 100%; transform-origin: top right; } /* NARROW. Up to 900px the column is too tight to share, so the field takes a whole line of its own. In the fallback row it is simply the row. In a page header it breaks onto its own full-width line straight under the title block (the flex basis does it; the markup already puts it after the title and before the actions), and its card, as wide as the field, never needs to flip. On a phone the fixed topbar is above all of this, and the keycap goes wherever there is no keyboard to press it on. */ @media (max-width: 900px) { .app-search { flex: 1 1 auto; } .page-hd > .app-search { flex: 1 1 100%; max-width: none; margin-left: 0; } } @media (max-width: 768px) { .app-search-pop { min-width: 0; } .app-search-kbd { display: none; } } @media (hover: none) { .app-search-kbd { display: none; } } /* The page under a VISIBLE fallback row reserves the REST of the screen, not all of it — otherwise every short page would scroll by exactly the row's height. A hidden row (the field homed in the page) takes no height, so the page's own min-height stands. Screen only: on paper .page-card's min-height is 0 (section 19), and this selector would outrank that rule. */ @media screen { .app-header:not([hidden]) + #view .page-card { min-height: calc(100vh - var(--app-header-h)); } } @media screen and (max-width: 768px) { .app-header:not([hidden]) + #view .page-card { min-height: calc(100vh - 56px - var(--app-header-h)); } } /* ============================================================ 8. PAGE HEADER ============================================================ */ /* THE HEADER BREATHES. Every view renders a .page-hd at the top of its card, so styling it here frames every screen at once with no view changing. It is not a white bar any more — the cards are the white things — but the CANVAS ITSELF, frosted, so the page scrolls up under it through a blur and the title, the location selector and the one solid button stay reachable however far down a month of ledger rows you are. It bleeds to the card's edges with negative margins of the card's own side padding (--gutter, so the two are one number). It is also where the global search lives: App.search moves its ONE field into this row, after the title block and before the actions (section 7B styles it here, as .page-hd > .app-search). z-index above the sheet's sticky table header (2) and below the sidebar (40) and every overlay — and 31 while the search's card is open (.has-search-open, 7B), so the card clears every bar under it. THREE GUARDS, the same three 10B uses for the overlay's scrim: 1. the SOLID canvas is the base; the translucent canvas and the blur are an upgrade applied only inside @supports, so a browser that cannot blur never lands on a see-through bar with rows showing through it; 2. the blur is NEVER ANIMATED — a sticky backdrop-filter re-rasterizes the page under it every frame it moves; 3. an operator who asked their OS for less transparency gets the solid canvas back (the block must come AFTER @supports to win on order). */ .page-hd { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin: 0 calc(-1 * var(--gutter)) var(--gap-section); padding: 12px var(--gutter) 10px; background: var(--cal-canvas); border-bottom: 0; box-shadow: var(--shadow-bar); } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .page-hd, .mobile-topbar { background: color-mix(in srgb, var(--cal-canvas) 84%, transparent); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); } } @media (prefers-reduced-transparency: reduce) { .page-hd, .mobile-topbar { background: var(--cal-canvas); -webkit-backdrop-filter: none; backdrop-filter: none; } } .page-hd h1 { font-size: var(--fs-h1); font-weight: 600; letter-spacing: -.02em; color: var(--cal-text-emphasis); margin: 0; } .page-hd p { font-size: var(--fs-small); color: var(--cal-text-subtle); margin: 2px 0 0; } .page-hd-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .page-search { position: relative; } .page-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--cal-text-muted); pointer-events: none; } .page-search input { height: var(--ctl-h); padding: 0 12px 0 32px; width: 220px; max-width: 44vw; border: 1px solid var(--cal-border); border-radius: var(--radius-md); background: var(--cal-bg); color: var(--cal-text-emphasis); font: inherit; font-size: .85rem; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .page-search input:hover { border-color: var(--cal-text-subtle); } .page-search input:focus { outline: none; border-color: var(--cal-border-emphasis); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cal-border-emphasis) 25%, transparent); } /* Which location a screen is showing. An ADMIN gets a