/* ════════════════════════════════════════════════════════════════════════
CIRCA 1990 — Windows 2000 GUI · beveled material layer
────────────────────────────────────────────────────────────────────────
Every rule here is scoped to :root[data-theme="win2000"], so the file is
completely inert under Classic / Jarvis / Ivory / Arsenal. The color + type
TOKENS live in variables.css (that block alone re-skins every page); this
file adds the material qualities of a Windows 2000 program:
· raised / sunken 3D bevels built from the classic four-color edge
(white + light-gray highlight, gray + black shadow)
· gradient caption bars — the single most recognisable Win2000 detail
· sunken WHITE client areas inside gray window frames
· square corners everywhere, zero rounded geometry
· gray push-buttons that press IN on :active
· one type size (11px) with weight and caption bars carrying hierarchy
· dotted focus rectangles (the Windows focus marquee)
· no transitions, no soft shadows, no animation — it's meant to feel inert
── The four material primitives ────────────────────────────────────────
Nearly every rule below is one of four moves. Reach for these before
inventing anything new, so a surface added later still looks like it came
out of the same GUI toolkit:
WINDOW raised gray frame, 3px padding → --w2k-window
CAPTION gradient title strip, white bold → --w2k-cap
WELL sunken white client area → --w2k-well
GROOVE etched 1px divider → --w2k-groove / --w2k-ridge
A cohesion pass neutralises the warm-gold / serif / rounded values
hardcoded in base files so nothing modern leaks through. Loaded LAST in
index.html so these scoped overrides win the cascade.
════════════════════════════════════════════════════════════════════════ */
/* The classic 3D edge colors + reusable bevel shadows, local to this theme. */
:root[data-theme="win2000"] {
--w2k-face: #d4d0c8; /* the Win2000 "3D face" (Win95 was #c0c0c0) */
--w2k-hilite: #ffffff; /* outer top-left highlight */
--w2k-light: #dfdfdf; /* inner top-left highlight */
--w2k-shadow: #808080; /* inner bottom-right shadow */
--w2k-dark: #000000; /* outer bottom-right shadow */
/* Raised (button / panel out): light top-left, dark bottom-right.
Edge order is the canonical Win32 EDGE_RAISED — outer ring ButtonLight
(#dfdfdf) / ButtonDkShadow (#000), inner ring ButtonHighlight (#fff) /
ButtonShadow (#808080). The white sits INSIDE the light gray, which is
what makes the edge read as a lit bevel rather than a drawn outline. */
--w2k-raised:
inset 1px 1px 0 0 var(--w2k-light),
inset -1px -1px 0 0 var(--w2k-dark),
inset 2px 2px 0 0 var(--w2k-hilite),
inset -2px -2px 0 0 var(--w2k-shadow);
/* Sunken (input / well in): dark top-left, light bottom-right. */
--w2k-sunken:
inset 1px 1px 0 0 var(--w2k-shadow),
inset -1px -1px 0 0 var(--w2k-hilite),
inset 2px 2px 0 0 var(--w2k-dark),
inset -2px -2px 0 0 var(--w2k-light);
/* Pressed (button held): reuse the sunken edge. */
--w2k-pressed:
inset 1px 1px 0 0 var(--w2k-dark),
inset -1px -1px 0 0 var(--w2k-hilite),
inset 2px 2px 0 0 var(--w2k-shadow),
inset -2px -2px 0 0 var(--w2k-light);
/* ── WINDOW ──────────────────────────────────────────────────────────
A top-level surface (card, panel, modal) rather than a control. Same
four-color edge as --w2k-raised; named separately because it means a
different thing, and because window frames pair with a 3px padding so
the caption and the client area sit flush inside the bevel. */
--w2k-window: var(--w2k-raised);
--w2k-frame: 3px;
/* ── CAPTION ─────────────────────────────────────────────────────────
The active title bar: SOLID dark navy, flat across its whole width.
Windows 2000 shipped a #0a246a → #a6caf0 gradient by default, and this
started there, but solid is the better call and not only on taste:
white on the flat navy is 14.3:1 everywhere, where the gradient fell
to 5.0:1 at the midpoint and 1.7:1 at its pale end, so a long title in
a wide caption became genuinely hard to read. Flat navy was also a
first-class Win2000 look — it is what you got on the "Windows Classic"
scheme and on every 95/98 machine — so nothing is lost period-wise.
BLUE IS A HEADER COLOUR. It paints caption bars and the system
selection highlight (active nav row, selected list row, hovered menu
item) — the two things Windows itself painted with it — and nothing
else. Buttons, toggles, links and glyphs are gray and black. */
--w2k-cap: #0a246a;
--w2k-cap-h: 18px; /* caption height — 11px text + 3px above/below */
/* ── WELL ────────────────────────────────────────────────────────────
The sunken white client area a window's content lives in. This is the
defining Win2000 contrast: white content inside a gray frame. Same
edge as --w2k-sunken, kept separate for the same reason as --w2k-window. */
--w2k-well: var(--w2k-sunken);
--w2k-well-bg: #ffffff;
/* ── GROOVE / RIDGE ──────────────────────────────────────────────────
The etched dividers from the Save-As dialog. A groove reads as a line
scored INTO the face (shadow above, highlight below); a ridge reads as
a line standing PROUD of it (highlight above, shadow below). Horizontal
by default; the vertical pair is for toolbar group separators. */
Shadow-list order matters: the FIRST shadow paints on top, so the 1px
line is listed before the 2px band it sits inside. */
--w2k-groove: inset 0 1px 0 0 var(--w2k-shadow), inset 0 2px 0 0 var(--w2k-hilite);
--w2k-ridge: inset 0 -1px 0 0 var(--w2k-hilite), inset 0 -2px 0 0 var(--w2k-shadow);
--w2k-groove-v: inset 1px 0 0 0 var(--w2k-shadow), inset 2px 0 0 0 var(--w2k-hilite);
}
/* Kill the app-wide motion token so state changes snap instantly. */
:root[data-theme="win2000"] * {
transition: none !important;
}
/* ── Square everything, everywhere ────────────────────────────────────────
--radius-card / -control / -pill are already 0 for this appearance, but
that only squares the rules that READ those tokens. Roughly 250 places
across the page and component CSS hardcode a radius instead — 58 in
notes.css alone, and every "pill" in the app is a literal
border-radius: 999px — so the tokens alone leave rounded geometry all
over the live call form, the research lists, the carrier cards and the
calendar. A 1990s GUI has no rounded corners anywhere, so this is a
genuine blanket rule rather than a shortcut.
!important because the hardcodes are not consistently beatable on
specificity: several sit behind an id (#client-panel .cp-section) or a
two-class descendant that ties with this file and would win on source
order. Same reasoning as the font-family hammer below. */
:root[data-theme="win2000"] * {
border-radius: 0 !important;
}
/* Soft glows belong to the other appearances. Bevels do the elevation here,
so anything drawing a blurred halo (the callback bell's drop-shadow, the
brightness lifts on hover) is flattened, and modal scrims go flat rather
than frosted. backdrop-filter is listed separately on purpose: `filter`
alone does not cover it, and the two modal backdrops that use it are
decorative — nothing relies on the blur to obscure content. */
:root[data-theme="win2000"] * {
filter: none;
backdrop-filter: none;
text-shadow: none;
}
/* ── Font cohesion — the GUI sans, everywhere ────────────────────────────────
The base component/page CSS hardcodes 'DM Sans' and 'Cormorant Garamond' in
~160 places (tabs, headers, cards, table cells, message bubbles, buttons …),
none of which read the --font-* token. Left alone they leak a modern sans /
serif into the theme — e.g. the Team/Carriers/bottom-sheet TABS render in DM
Sans instead of MS Sans Serif. Force the period GUI sans over all of them.
!important + the extra specificity beat the single-class hardcodes. */
:root[data-theme="win2000"] * {
font-family: var(--font-body) !important;
}
/* …but keep a fixed font where one is genuinely needed — inline code, MFA
secrets/inputs, invite codes, and the raw SMS/Slack payload fields. A
monospace here reads right even in a 1990 GUI, and the higher specificity
wins over the universal rule above. */
:root[data-theme="win2000"] code,
:root[data-theme="win2000"] pre,
:root[data-theme="win2000"] kbd,
:root[data-theme="win2000"] samp,
:root[data-theme="win2000"] .sms-var-code,
:root[data-theme="win2000"] .sms-template-counter,
:root[data-theme="win2000"] .sms-template-textarea,
:root[data-theme="win2000"] .sms-composer-body,
:root[data-theme="win2000"] .sms-composer-counter,
:root[data-theme="win2000"] .notes-slack-textarea,
:root[data-theme="win2000"] .team-invite-code,
:root[data-theme="win2000"] .mfa-secret,
:root[data-theme="win2000"] .mfa-code-input {
font-family: 'Consolas', 'Courier New', ui-monospace, monospace !important;
}
/* The Settings → Appearance picker previews each theme in ITS OWN typeface, so
the cohesion override above must not flatten them to the GUI sans. Re-assert
the two non-sans previews (Classic = Cormorant, Jarvis = monospace). */
:root[data-theme="win2000"] .theme-tile-preview[data-preview="classic"],
:root[data-theme="win2000"] .theme-tile-preview[data-preview="classic"] .theme-tile-preview-title {
font-family: 'Cormorant Garamond', Georgia, serif !important;
}
:root[data-theme="win2000"] .theme-tile-preview[data-preview="jarvis"],
:root[data-theme="win2000"] .theme-tile-preview[data-preview="jarvis"] .theme-tile-preview-title {
font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Segoe UI Mono', Consolas, monospace !important;
}
/* Same reasoning for SIZE, now that the type ramp below collapses everything
to 11px: a preview showing you what Arsenal looks like has to be at
Arsenal's scale. Classic, Jarvis and Windows 2000 each set their preview size
explicitly at higher specificity, so this restores the default for the rest. */
:root[data-theme="win2000"] .theme-tile-preview-title {
font-size: 18px;
}
/* And for SHAPE. The blanket border-radius:0 !important above would square
off every other theme's preview card too, so the picker would show five
Windows 2000 tiles wearing different colours. !important here because that
is the only thing that beats an !important — the rule it is undoing is
deliberately unbeatable everywhere else. */
:root[data-theme="win2000"] .theme-tile-preview:not([data-preview="win2000"]) .theme-tile-preview-card {
border-radius: 6px !important;
}
:root[data-theme="win2000"] .theme-tile-preview:not([data-preview="win2000"]) .theme-tile-preview-line {
border-radius: 3px !important;
}
:root[data-theme="win2000"] .theme-tile-preview:not([data-preview="win2000"]) .theme-tile-preview-pill {
border-radius: 999px !important;
}
/* ════════════════════════════════════════════════════════════════════════
TYPE RAMP — collapse the whole app onto the 11px pixel grid
────────────────────────────────────────────────────────────────────────
MS Sans Serif is a bitmap face traced to outlines. It is drawn for 11px
and only stays crisp at 11px and integer multiples of it — at 13px or
23px the stems land between pixels and it turns to mush. So the app's
9px→28px ramp has to be snapped onto that grid.
This is not just a rendering constraint, it is what the era actually
looked like. Windows 2000 set essentially all UI at 8pt and got its
hierarchy from WEIGHT and from CAPTION BARS, not from size. Two sizes is
the whole system: 11px for everything, 22px (exactly 2×) for the figures
a dashboard exists to show.
The universal selector is deliberate — ~160 hardcoded sizes across the
component and page CSS would each need their own override otherwise. The
opt-outs below it are the handful of places that genuinely need to differ. */
:root[data-theme="win2000"] * {
font-size: 11px;
line-height: 1.35; /* ~15px — 1.5 floats a bitmap face apart */
letter-spacing: 0; /* tracking on a pixel font just breaks it */
}
/* Figures — the one place size is allowed to speak. 22px is exactly 2×, so
every stem still lands on a whole pixel. */
:root[data-theme="win2000"] .kpi-value,
:root[data-theme="win2000"] .stat-value,
:root[data-theme="win2000"] .tracker-greeting-name,
:root[data-theme="win2000"] .page-title,
:root[data-theme="win2000"] .forecast-result-value,
:root[data-theme="win2000"] .chart-donut-total {
font-size: 22px;
font-weight: 700;
line-height: 1.2;
}
/* Icons are sized in em against their own font-size, so the universal rule
above would shrink every glyph to 11px. Restore a 16px icon box — the
Windows small-icon size, and what the pixel line art in emoji-icons.js is
drawn on a 16×16 viewBox for. */
:root[data-theme="win2000"] .kpi-icon,
:root[data-theme="win2000"] .card-icon,
:root[data-theme="win2000"] .nav-icon,
:root[data-theme="win2000"] .emoji-ico,
:root[data-theme="win2000"] .emoji-ico > svg,
:root[data-theme="win2000"] .ribbon-cmd-ico,
:root[data-theme="win2000"] .callback-bell {
font-size: 16px;
}
/* UPPERCASE + tracked micro-labels are a modern dashboard idiom that did not
exist in a Win2000 dialog — those were sentence case and untracked. */
:root[data-theme="win2000"] .kpi-label,
:root[data-theme="win2000"] .stat-label,
:root[data-theme="win2000"] .column-label,
:root[data-theme="win2000"] .card-title,
:root[data-theme="win2000"] .edit-menu-section-title,
:root[data-theme="win2000"] .settings-section-label,
:root[data-theme="win2000"] .form-label,
:root[data-theme="win2000"] .forecast-output-title,
:root[data-theme="win2000"] .chart-caption {
text-transform: none;
}
/* Serif italic subtitles (Cormorant Garamond, hardcoded in tracker-classic.css
and elsewhere). The family is already forced to the GUI sans by the rule
above; the italic has to go too — MS Sans Serif has no italic, so the
browser would synthesise a sheared fake that looks broken at 11px. */
:root[data-theme="win2000"] .tracker-greeting-week,
:root[data-theme="win2000"] .tracker-kpi-state,
:root[data-theme="win2000"] .page-subtitle,
:root[data-theme="win2000"] em,
:root[data-theme="win2000"] i {
font-style: normal;
}
/* Turn antialiasing off where the browser lets us, so the bitmap shapes stay
hard-edged. Honest limitation: -webkit-font-smoothing is a WebKit/macOS
property — Windows Chrome ignores it and will still antialias slightly.
The self-hosted face is what actually delivers the right glyphs; this is a
bonus on the platforms that honour it. */
:root[data-theme="win2000"] {
-webkit-font-smoothing: none;
-moz-osx-font-smoothing: grayscale;
font-smooth: never;
}
/* Emoji → monochrome line icons: the styling now lives in
components/emoji-icons.css, shared with the Arsenal icon set. Nothing about
it was specific to this appearance once a second one wanted icons too. */
/* Flat gray program canvas — no backdrop. */
:root[data-theme="win2000"] #content {
background: var(--bg);
}
/* ════════════════════════════════════════════════════════════════════════
SIDEBAR — a raised gray panel with a ridge edge
No blur / backdrop-filter / transform (would trap the fixed dropdown +
tooltips inside the sidebar's overflow box).
════════════════════════════════════════════════════════════════════════ */
:root[data-theme="win2000"] #sidebar {
background: var(--w2k-face);
border-right: 2px solid var(--w2k-shadow);
box-shadow: inset -1px 0 0 0 var(--w2k-dark), 1px 0 0 0 var(--w2k-hilite);
}
/* Nav rows: plain gray menu entries; the active row is the navy selection bar. */
:root[data-theme="win2000"] .nav-item {
border-left: 3px solid transparent; /* keep the box model identical… */
border-radius: 0;
padding-left: 11px; /* …recover the 3px the rule ate */
}
:root[data-theme="win2000"] .nav-item:hover {
background: rgba(0,0,0,0.06);
color: var(--text);
}
:root[data-theme="win2000"] .nav-item.active {
border-left-color: transparent;
background: var(--gold); /* navy highlight */
color: #ffffff;
font-weight: 400;
}
/* Brand wordmark → plain GUI sans (base files hardcode 'Cormorant Garamond'). */
:root[data-theme="win2000"] .brand-name {
font-family: var(--font-display);
font-weight: 700;
letter-spacing: 0;
}
/* ── Images — the Arsenal logo + the agent's profile photo ─────────────────
Reveal the real Arsenal logo (an , hidden by default) in place of the
round monogram, exactly like the Classic / Jarvis appearances do. Both the
logo and the profile avatar are squared off — round images look wrong in a
Win-3.1 GUI — and the avatar gets a sunken image well so a real photo reads
as a framed picture. The avatar photo itself is applied inline by
sidebar.js (background-image), so it renders regardless of theme. */
:root[data-theme="win2000"] .brand-logo { border-radius: 0; }
:root[data-theme="win2000"] .avatar-sm {
border-radius: 0;
box-shadow: var(--w2k-sunken);
background-color: #ffffff; /* white well behind initials / photo */
color: var(--gold);
}
/* ════════════════════════════════════════════════════════════════════════
BUTTONS — gray push-buttons that press IN
All buttons share the raised gray bevel + black label. The primary gets an
extra hard black outer ring (the Win95 "default button") and bold weight.
════════════════════════════════════════════════════════════════════════ */
:root[data-theme="win2000"] .btn-primary,
:root[data-theme="win2000"] .btn-secondary,
:root[data-theme="win2000"] .btn-ghost,
:root[data-theme="win2000"] .btn-add,
:root[data-theme="win2000"] .btn-ribbon,
:root[data-theme="win2000"] .btn-pill,
:root[data-theme="win2000"] .tracker-edit-btn,
:root[data-theme="win2000"] .tracker-toggle,
:root[data-theme="win2000"] .edit-menu-seg,
:root[data-theme="win2000"] .ribbon-seg-btn,
:root[data-theme="win2000"] .cal-add-btn {
border-radius: 0;
border: 0;
background: var(--w2k-face);
color: var(--text);
box-shadow: var(--w2k-raised);
font-family: var(--font-body); /* .btn-secondary hardcodes 'DM Sans' */
font-weight: 400;
letter-spacing: 0;
text-transform: none;
min-height: 21px; /* the Win2000 dialog button height */
}
:root[data-theme="win2000"] .btn-primary {
font-weight: 700;
outline: 1px solid var(--w2k-dark); /* the "default button" heavy ring */
outline-offset: 0;
}
:root[data-theme="win2000"] .btn-primary:hover,
:root[data-theme="win2000"] .btn-secondary:hover,
:root[data-theme="win2000"] .btn-ghost:hover,
:root[data-theme="win2000"] .btn-add:hover,
:root[data-theme="win2000"] .btn-ribbon:hover,
:root[data-theme="win2000"] .btn-pill:hover,
:root[data-theme="win2000"] .tracker-edit-btn:hover,
:root[data-theme="win2000"] .tracker-toggle:hover,
:root[data-theme="win2000"] .edit-menu-seg:hover,
:root[data-theme="win2000"] .ribbon-seg-btn:hover,
:root[data-theme="win2000"] .cal-add-btn:hover {
background: var(--w2k-face);
color: var(--text);
box-shadow: var(--w2k-raised);
border-color: transparent;
transform: none;
}
/* Press IN on click. */
:root[data-theme="win2000"] .btn-primary:active,
:root[data-theme="win2000"] .btn-secondary:active,
:root[data-theme="win2000"] .btn-ghost:active,
:root[data-theme="win2000"] .btn-add:active,
:root[data-theme="win2000"] .btn-ribbon:active,
:root[data-theme="win2000"] .btn-pill:active,
:root[data-theme="win2000"] .tracker-edit-btn:active,
:root[data-theme="win2000"] .tracker-toggle:active,
:root[data-theme="win2000"] .edit-menu-seg:active,
:root[data-theme="win2000"] .ribbon-seg-btn:active {
box-shadow: var(--w2k-pressed);
padding-top: 1px; /* nudge the label down-right */
padding-left: 1px;
}
/* A latched toggle stays pressed in — the Win2000 toolbar "on" state. */
:root[data-theme="win2000"] .btn-pill.is-active,
:root[data-theme="win2000"] .tracker-edit-btn.active,
:root[data-theme="win2000"] .tracker-toggle.is-active,
:root[data-theme="win2000"] .edit-menu-seg.is-active,
:root[data-theme="win2000"] .ribbon-seg-btn.active {
background: var(--w2k-face);
color: var(--text);
box-shadow: var(--w2k-pressed);
}
/* Dotted focus marquee inside the button face. */
:root[data-theme="win2000"] .btn-primary:focus-visible,
:root[data-theme="win2000"] .btn-secondary:focus-visible,
:root[data-theme="win2000"] .btn-ghost:focus-visible,
:root[data-theme="win2000"] .btn-add:focus-visible,
:root[data-theme="win2000"] .btn-ribbon:focus-visible,
:root[data-theme="win2000"] .btn-pill:focus-visible,
:root[data-theme="win2000"] .tracker-edit-btn:focus-visible {
outline: 1px dotted var(--w2k-dark);
outline-offset: -4px;
}
/* The segmented controls are just rows of buttons here — drop the pill track
they sit in, or the bevels read as buttons inside a button. */
:root[data-theme="win2000"] .edit-menu-segmented,
:root[data-theme="win2000"] .ribbon-segmented {
background: transparent;
border: 0;
border-radius: 0;
overflow: visible;
padding: 0;
gap: 2px;
}
/* ════════════════════════════════════════════════════════════════════════
INPUTS — sunken white wells
════════════════════════════════════════════════════════════════════════ */
:root[data-theme="win2000"] input,
:root[data-theme="win2000"] select,
:root[data-theme="win2000"] textarea {
border-radius: 0;
border: 1px solid var(--w2k-shadow);
background: #ffffff;
color: var(--text);
box-shadow: var(--w2k-sunken);
}
:root[data-theme="win2000"] input:focus,
:root[data-theme="win2000"] select:focus,
:root[data-theme="win2000"] textarea:focus,
:root[data-theme="win2000"] .tag-input-wrap:focus-within {
outline: 1px dotted var(--w2k-dark);
outline-offset: -3px;
border-color: var(--w2k-shadow);
box-shadow: var(--w2k-sunken);
}
/* ════════════════════════════════════════════════════════════════════════
WINDOWS — every panel becomes a little Windows 2000 window
────────────────────────────────────────────────────────────────────────
Frame (raised gray, 3px padding) + caption (gradient strip, white bold) +
client area (sunken white well). That three-part anatomy is the whole
look; the rest of this file is applying it to the shapes the app actually
has. Nothing here uses a border — the four-color bevel IS the edge, and an
extra 1px outline on top of it flattens the illusion.
════════════════════════════════════════════════════════════════════════ */
:root[data-theme="win2000"] .card,
:root[data-theme="win2000"] .settings-section,
:root[data-theme="win2000"] .kpi-card {
border-radius: 0;
border: 0;
padding: var(--w2k-frame);
gap: 0;
background: var(--w2k-face);
box-shadow: var(--w2k-window);
}
/* ── CAPTION BARS ─────────────────────────────────────────────────────────
One rule for every "this panel's title" element in the app. Left-aligned
white bold on the gradient, 18px tall, flush inside the 3px frame.
Grouped rather than repeated because a caption is a caption — if a new
surface needs one, it gets added to this list, not given its own block. */
/* The caption list is written ONCE, inside :is(), and the rule below reuses
it verbatim to paint the caption's contents white. Keep the two lists
identical — they are deliberately adjacent so a new caption is added in
both places or in neither. */
:root[data-theme="win2000"] :is(
.card-head, .settings-section-label, .kpi-cal-head, .pipeline-header-row,
.forecast-header, .kanban-column-header, .edit-menu-header,
/* Live call form (notes) — the section bars down the whole page */
.notes-section-header, .notes-assoc-head, .notes-hx-group-head,
.notes-condition-meds-head, .notes-engine-head, .notes-engine-pick-head,
.notes-quote-grid-header, .notes-tips-callout-head,
/* Research — condition / medication / region group titles */
.research-cat-header, .research-region-header, .research-letter-header,
.research-suggest-group-title,
/* Calendar — the appointment panel */
.cal-side-panel-header, .cal-upcoming-title,
/* Carriers */
.carrier-section-title, .carrier-product-header, .carrier-notes-header,
/* Costs */
.costs-section-header, .costs-vendor-manager-head,
/* Admin + Team */
.admin-section-title, .admin-triage-head, .team-section-title,
.team-group-header,
/* CRM client detail panel */
.cp-section-title, .cp-msg-head, .cp-quotes-selected-head,
.cp-quotes-other-head,
/* SMS, import, MFA, calendar sync, phone table, script library */
.sms-rules-head, .sms-template-head, .sms-confirm-section-head,
.import-panel-head, .mfa-recovery-head, .calendar-sync-source-head,
.au-section-title, .pn-head, .modal-section-title, .script-lib-header
) {
display: flex;
align-items: center;
gap: 4px;
width: auto;
min-height: var(--w2k-cap-h);
height: var(--w2k-cap-h);
margin: 0 0 6px;
padding: 0 2px 0 3px;
border: 0;
background: var(--w2k-cap);
color: #ffffff;
font-weight: 700;
font-size: 11px;
text-transform: none;
letter-spacing: 0;
overflow: hidden;
}
/* Everything sitting ON a caption goes white — the title spans, counts and
chevrons inside these headers otherwise carry their own var(--text) black,
which is invisible on the navy. Descendant, not child, because several of
these wrap their label one level deeper. */
:root[data-theme="win2000"] :is(
.card-head, .settings-section-label, .kpi-cal-head, .pipeline-header-row,
.forecast-header, .kanban-column-header, .edit-menu-header,
.notes-section-header, .notes-assoc-head, .notes-hx-group-head,
.notes-condition-meds-head, .notes-engine-head, .notes-engine-pick-head,
.notes-quote-grid-header, .notes-tips-callout-head,
.research-cat-header, .research-region-header, .research-letter-header,
.research-suggest-group-title,
.cal-side-panel-header, .cal-upcoming-title,
.carrier-section-title, .carrier-product-header, .carrier-notes-header,
.costs-section-header, .costs-vendor-manager-head,
.admin-section-title, .admin-triage-head, .team-section-title,
.team-group-header,
.cp-section-title, .cp-msg-head, .cp-quotes-selected-head,
.cp-quotes-other-head,
.sms-rules-head, .sms-template-head, .sms-confirm-section-head,
.import-panel-head, .mfa-recovery-head, .calendar-sync-source-head,
.au-section-title, .pn-head, .modal-section-title, .script-lib-header
) *,
:root[data-theme="win2000"] .pipeline-title,
:root[data-theme="win2000"] .forecast-header-title,
:root[data-theme="win2000"] .column-label {
color: #ffffff;
font-weight: 700;
background: transparent;
border: 0;
}
/* The caption's leading glyph — a plain 16px white icon, no tinted chip. */
:root[data-theme="win2000"] .card-icon,
:root[data-theme="win2000"] .kpi-cal-head .kpi-icon {
width: 16px;
height: 16px;
margin: 0;
border-radius: 0;
background: transparent;
color: #ffffff;
}
/* ── CLIENT AREAS ─────────────────────────────────────────────────────────
The sunken white well a window's content sits in. White-inside-gray is the
single strongest Win2000 signal after the caption gradient. */
:root[data-theme="win2000"] .card-body,
:root[data-theme="win2000"] .kpi-cal-list,
:root[data-theme="win2000"] .kpi-cal-empty,
:root[data-theme="win2000"] .edit-menu-list,
:root[data-theme="win2000"] .forecast-output,
:root[data-theme="win2000"] .kanban-cards {
margin-top: var(--w2k-frame);
padding: 6px 7px;
border: 0;
border-radius: 0;
background: var(--w2k-well-bg);
box-shadow: var(--w2k-well);
}
/* ── Section labels that are NOT captions ────────────────────────────────
Field labels and dialog headings stay plain black text on the face — a
Win2000 dialog captioned the window, not every label inside it. */
:root[data-theme="win2000"] .form-label,
:root[data-theme="win2000"] .edit-menu-section-title,
:root[data-theme="win2000"] .forecast-output-title {
font-family: var(--font-display);
color: var(--text);
font-weight: 700;
text-transform: none;
letter-spacing: 0;
background: none;
}
:root[data-theme="win2000"] .settings-title {
font-family: var(--font-display);
font-weight: 700;
text-transform: none;
letter-spacing: 0;
}
:root[data-theme="win2000"] .settings-subtitle {
color: var(--text-muted);
}
/* ── Etched dividers ─────────────────────────────────────────────────────
Group separators become the scored groove from the Save-As dialog rather
than a modern hairline. Existing 1px borders are removed so the groove is
not drawn twice. */
:root[data-theme="win2000"] .edit-menu-section,
:root[data-theme="win2000"] .edit-menu-hint {
border-top: 0;
border-bottom: 0;
box-shadow: var(--w2k-groove);
padding-top: 8px;
}
:root[data-theme="win2000"] .edit-menu-section:first-of-type {
box-shadow: none;
}
/* ════════════════════════════════════════════════════════════════════════
TRACKER KPI TILES — the flat tile becomes a window, with no markup change
────────────────────────────────────────────────────────────────────────
.kpi-card is built inline in six places (tracker-classic.js, admin.js ×2,
team.js, member-detail-modal.js) as four FLAT sibling divs — icon, label,
value, note — with no head/body wrappers to hang a caption and a client
area on. Rather than add wrappers to all six call sites and risk the five
other appearances, the two zones are painted with pseudo-elements and the
four children are placed onto a grid over the top. Team, Admin and the
member modal inherit the treatment for free.
Row 2 is a 3px spacer so the grid rows line up exactly with the ::after
well below (frame 3 + caption 18 + gap 3 = 24px). Change one, change both.
════════════════════════════════════════════════════════════════════════ */
:root[data-theme="win2000"] .kpi-card:not(.kpi-calendar-card) {
position: relative;
display: grid;
grid-template-columns: 16px 1fr;
grid-template-rows: var(--w2k-cap-h) var(--w2k-frame) auto auto;
}
/* The caption bar, spanning both columns behind the icon + label. */
:root[data-theme="win2000"] .kpi-card:not(.kpi-calendar-card)::before {
content: '';
position: absolute;
inset: var(--w2k-frame) var(--w2k-frame) auto var(--w2k-frame);
height: var(--w2k-cap-h);
background: var(--w2k-cap);
}
/* The client area — a sunken white well behind the value + note. */
:root[data-theme="win2000"] .kpi-card:not(.kpi-calendar-card)::after {
content: '';
position: absolute;
inset: calc(var(--w2k-frame) * 2 + var(--w2k-cap-h)) var(--w2k-frame) var(--w2k-frame) var(--w2k-frame);
background: var(--w2k-well-bg);
box-shadow: var(--w2k-well);
}
/* The four children, lifted above both pseudo-elements. */
:root[data-theme="win2000"] .kpi-card .kpi-icon,
:root[data-theme="win2000"] .kpi-card .kpi-label,
:root[data-theme="win2000"] .kpi-card .kpi-value,
:root[data-theme="win2000"] .kpi-card .kpi-note {
position: relative;
z-index: 1;
}
:root[data-theme="win2000"] .kpi-card:not(.kpi-calendar-card) .kpi-icon {
grid-area: 1 / 1;
align-self: center;
width: 16px;
height: 16px;
margin: 0;
padding-left: 3px;
color: #ffffff;
}
:root[data-theme="win2000"] .kpi-card:not(.kpi-calendar-card) .kpi-label {
grid-area: 1 / 2;
align-self: center;
padding: 0 3px 0 1px;
color: #ffffff;
font-weight: 700;
text-transform: none;
letter-spacing: 0;
line-height: var(--w2k-cap-h);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Value and note both live inside the well, so they carry its padding rather
than the card's — the card's own padding is the 3px window frame now. */
:root[data-theme="win2000"] .kpi-card:not(.kpi-calendar-card) .kpi-value {
grid-area: 3 / 1 / 4 / 3;
padding: 6px 8px 8px;
color: var(--text);
}
:root[data-theme="win2000"] .kpi-card:not(.kpi-calendar-card) .kpi-note {
grid-area: 4 / 1 / 5 / 3;
margin-top: -5px;
padding: 0 8px 8px;
color: var(--text-dim);
}
/* The double-width calendar tile already HAS a real head element, so it keeps
the plain flex column and picks up the shared caption / client-area rules
above — it only needs its rounded rows squared off and its hover turned
into the navy selection bar. */
:root[data-theme="win2000"] .kpi-calendar-card {
gap: 0;
}
:root[data-theme="win2000"] .kpi-cal-item,
:root[data-theme="win2000"] .kpi-cal-more {
border-radius: 0;
}
:root[data-theme="win2000"] .kpi-cal-item:hover {
background: var(--gold);
color: #ffffff;
}
:root[data-theme="win2000"] .kpi-cal-item:hover .kpi-cal-time,
:root[data-theme="win2000"] .kpi-cal-item:hover .kpi-cal-name,
:root[data-theme="win2000"] .kpi-cal-item:hover .kpi-cal-date {
color: #ffffff;
}
:root[data-theme="win2000"] .kpi-cal-more {
color: var(--gold);
text-decoration: underline; /* a 1999 hyperlink, not a tinted button */
}
/* ════════════════════════════════════════════════════════════════════════
SELECTION TILES — theme picker + call routing
Raised gray tiles; the active tile presses IN and shows the dotted marquee.
════════════════════════════════════════════════════════════════════════ */
:root[data-theme="win2000"] .theme-tile,
:root[data-theme="win2000"] .call-mode-tile {
border-radius: 0;
border: 1px solid var(--w2k-dark);
box-shadow: var(--w2k-raised);
}
:root[data-theme="win2000"] .theme-tile:hover,
:root[data-theme="win2000"] .call-mode-tile:hover {
transform: none;
box-shadow: var(--w2k-raised);
}
:root[data-theme="win2000"] .theme-tile.is-active,
:root[data-theme="win2000"] .call-mode-tile.is-active {
box-shadow: var(--w2k-pressed);
outline: 1px dotted var(--w2k-dark);
outline-offset: -4px;
}
/* ════════════════════════════════════════════════════════════════════════
FAB — a raised gray square button with a black glyph
────────────────────────────────────────────────────────────────────────
layout.css builds this as a 52px circle with a gold glow and a 24px "+".
Squaring it is not enough on its own: the type-ramp rule above drops every
font to 11px, which left an 11px plus sign floating in a 52px box — that
is the "flat" reading. It comes down to a 28px toolbar button with a
glyph sized to match, which is also closer to what a Win2000 app would
have put in the corner.
════════════════════════════════════════════════════════════════════════ */
:root[data-theme="win2000"] #fab {
width: 28px;
height: 28px;
bottom: 20px;
right: 20px;
background: var(--w2k-face);
color: var(--text); /* blue is for headers and selection only */
border: 0;
box-shadow: var(--w2k-raised);
font-size: 18px;
font-weight: 400;
line-height: 1;
}
:root[data-theme="win2000"] #fab:hover {
background: var(--w2k-face);
transform: none;
box-shadow: var(--w2k-raised);
}
:root[data-theme="win2000"] #fab:active {
box-shadow: var(--w2k-pressed);
}
/* ════════════════════════════════════════════════════════════════════════
PILLS, CHIPS AND BADGES — squared off and given an edge
────────────────────────────────────────────────────────────────────────
The blanket border-radius rule at the top already kills the 999px pill
shape, but a squared-off tinted lozenge with no edge still reads modern.
These get a hairline so they land as period status fields. The semantic
fill stays — it is carrying meaning, and it is the one place a colour
other than gray is doing real work.
════════════════════════════════════════════════════════════════════════ */
:root[data-theme="win2000"] .badge,
:root[data-theme="win2000"] .tag-pill,
:root[data-theme="win2000"] .delta,
:root[data-theme="win2000"] .cal-product-pill,
:root[data-theme="win2000"] .notes-engine-chip,
:root[data-theme="win2000"] .notes-engine-tier,
:root[data-theme="win2000"] .cal-appt-external-badge,
:root[data-theme="win2000"] .team-tab-badge,
:root[data-theme="win2000"] .modal-xref-chip {
border: 1px solid var(--w2k-shadow);
padding: 0 4px;
font-weight: 400;
line-height: 14px;
}
/* ════════════════════════════════════════════════════════════════════════
COHESION PASS — neutralise warm-gold / serif values hardcoded in base files
so the light-theme palette never leaks through. (Mirrors the spots the
jarvis cohesion pass already had to cover.)
════════════════════════════════════════════════════════════════════════ */
/* ── Where blue is NOT allowed ───────────────────────────────────────────
Navy is reserved for caption bars and the system selection highlight.
Everything below used to reach for var(--gold) as a generic accent, which
is what put blue on toggles, links, glyphs and button fills all over the
app. They become gray chrome and black ink instead. */
/* layout.css drop overlay hardcodes gold rgba + a serif label. */
:root[data-theme="win2000"] .drop-zone {
background: var(--w2k-face);
border: 1px dashed var(--w2k-shadow);
}
:root[data-theme="win2000"] .drop-zone.is-over {
background: var(--w2k-face);
border-style: solid;
border-color: var(--w2k-dark);
}
:root[data-theme="win2000"] .drop-label {
font-family: var(--font-display);
color: var(--text);
text-transform: none;
letter-spacing: 0;
}
/* messages.css SMS toggle "on" track hardcodes a warm brown. A checked
switch is a control, not a selection — it reads as a pressed-in well. */
:root[data-theme="win2000"] .sms-toggle input:checked + .sms-toggle-track {
background: var(--w2k-face);
box-shadow: var(--w2k-pressed);
}
/* Calendar add button + the "+N more" links: plain toolbar button and plain
underlined black text. Both were filled/tinted navy. */
:root[data-theme="win2000"] .cal-add-btn {
color: var(--text);
background: var(--w2k-face);
box-shadow: var(--w2k-raised);
}
:root[data-theme="win2000"] .kpi-cal-more,
:root[data-theme="win2000"] .tracker-inline-btn,
:root[data-theme="win2000"] .edit-menu-reset {
color: var(--text);
text-decoration: underline;
}
:root[data-theme="win2000"] .avatar-sm {
color: var(--text);
}
/* ════════════════════════════════════════════════════════════════════════
LIVE CALL FORM (notes) — the page the agent actually works in
────────────────────────────────────────────────────────────────────────
The biggest page sheet in the app (2,400 lines) and the one that was
still entirely flat: its panels inherit .cp-section's card frame, and its
section bars, engine panel, quote grid and phone table all carry their own
modern geometry. Panels become windows; the section bars are already
captions via the group above.
════════════════════════════════════════════════════════════════════════ */
:root[data-theme="win2000"] .notes-section,
:root[data-theme="win2000"] .cp-section {
border: 0;
padding: var(--w2k-frame);
background: var(--w2k-face);
box-shadow: var(--w2k-window);
}
/* Inner content gets its breathing room back, since the panel padding is
now the 3px frame — same fix the settings sections needed.
ONE rule with both captions excluded, not two rules. notes-section.js
renders `class="cp-section notes-section"`, so a panel is both: written as
two rules, the .cp-section one would match .notes-section-header (it is
not a .cp-section-title) and indent the caption off the frame edge. */
:root[data-theme="win2000"] :is(.notes-section, .cp-section)
> :not(.notes-section-header):not(.cp-section-title) {
margin-left: 7px;
margin-right: 7px;
}
/* The Underwriting Engine result panel — a window in its own right, with the
recommendation in a sunken well. Its gold left rule is an accent bar that
no Win2000 panel would have had. */
:root[data-theme="win2000"] .notes-engine {
border: 0;
padding: var(--w2k-frame);
background: var(--w2k-face);
box-shadow: var(--w2k-window);
overflow: visible;
}
:root[data-theme="win2000"] .notes-engine-body,
:root[data-theme="win2000"] .notes-engine-backup-list,
:root[data-theme="win2000"] .notes-engine-ledger {
background: var(--w2k-well-bg);
box-shadow: var(--w2k-well);
padding: 6px 7px;
}
/* Field rows and the medication/condition sub-blocks: flat, square, no tint. */
:root[data-theme="win2000"] .notes-condition-meds,
:root[data-theme="win2000"] .notes-assoc-row,
:root[data-theme="win2000"] .notes-beneficiary-row,
:root[data-theme="win2000"] .notes-eapps-row,
:root[data-theme="win2000"] .notes-tips-callout {
border: 1px solid var(--w2k-shadow);
background: var(--w2k-face);
}
/* ════════════════════════════════════════════════════════════════════════
CALENDAR — month grid and the appointment list
────────────────────────────────────────────────────────────────────────
The grid is a sunken white client area with hairline cells; the
appointment list is a well of selectable rows, so it gets the same navy
selection bar the nav and the CRM grid use.
════════════════════════════════════════════════════════════════════════ */
:root[data-theme="win2000"] .cal-grid-wrap,
:root[data-theme="win2000"] .cal-appt-list {
border: 0;
background: var(--w2k-well-bg);
box-shadow: var(--w2k-well);
}
:root[data-theme="win2000"] .cal-side-panel {
border: 0;
padding: var(--w2k-frame);
background: var(--w2k-face);
box-shadow: var(--w2k-window);
}
:root[data-theme="win2000"] .cal-cell {
border-right: 1px solid var(--w2k-shadow);
border-bottom: 1px solid var(--w2k-shadow);
}
:root[data-theme="win2000"] .cal-appt-item {
border-bottom: 1px solid var(--w2k-light);
}
/* No selection-bar hover: appointment rows aren't click targets, only their
buttons are (see .cal-appt-item in pages/calendar.css). */
/* Square the round type/legend dots — the only round things left on the page. */
:root[data-theme="win2000"] .cal-event-dot,
:root[data-theme="win2000"] .cal-legend-dot,
:root[data-theme="win2000"] .cal-appt-type-dot,
:root[data-theme="win2000"] .status-dot {
border: 1px solid var(--w2k-dark);
}
/* ── CRM Fluent command bar → Windows 2000 ────────────────────────────────
The command buttons already inherit the beveled .btn-ribbon treatment above
(higher specificity than the flat .crm-ribbon .btn-ribbon base), so they read
as discrete raised buttons — on-theme. Only the structural pieces need
period styling: the group divider becomes the etched groove primitive, and
the overflow flyout squares off. */
:root[data-theme="win2000"] .ribbon-cmd-bar .ribbon-group + .ribbon-group {
border-left: 0;
box-shadow: var(--w2k-groove-v);
margin-left: 6px;
padding-left: 7px;
}
:root[data-theme="win2000"] .ribbon-overflow-menu .ribbon-group + .ribbon-group {
border-top: 0;
box-shadow: var(--w2k-groove);
}
:root[data-theme="win2000"] .ribbon-overflow-menu .btn-ribbon { border-radius: 0; }
/* Search: one cohesive Win95 sunken well. The global input rule above would
give the inner its own sunken box (a bar-inside-a-bar), so flatten
the input and move the well onto the wrapper instead. */
:root[data-theme="win2000"] .crm-search-wrap {
border-radius: 0;
border: 1px solid var(--w2k-shadow);
background: #ffffff;
box-shadow: var(--w2k-sunken);
}
:root[data-theme="win2000"] .crm-search-wrap:focus-within {
outline: 1px dotted var(--w2k-dark);
outline-offset: -3px;
}
:root[data-theme="win2000"] .crm-search {
border: none;
background: transparent;
box-shadow: none;
}
:root[data-theme="win2000"] .crm-search:focus {
outline: none;
box-shadow: none;
}
/* ════════════════════════════════════════════════════════════════════════
TOOLBARS — raised strips with an etched bottom edge
────────────────────────────────────────────────────────────────────────
A Win2000 toolbar is the window face with a ridge along its bottom, which
is what separates it from the client area below without drawing a border.
════════════════════════════════════════════════════════════════════════ */
:root[data-theme="win2000"] .crm-ribbon,
:root[data-theme="win2000"] .ribbon-cmd-bar,
:root[data-theme="win2000"] .script-ribbon,
:root[data-theme="win2000"] .audit-toolbar,
:root[data-theme="win2000"] .tracker-header-row,
:root[data-theme="win2000"] .page-header {
background: var(--w2k-face);
border: 0;
box-shadow: var(--w2k-ridge);
padding: 3px 4px 5px;
}
/* ── Window captions on the two persistent chrome surfaces ────────────────
The sidebar and the CRM command bar are the app's two permanent frames,
and in a Win2000 app a frame carries a title bar. The sidebar has a real
element to use — the brand row, which already holds the wordmark.
The ribbon does not: crm-table.js renders straight into .ribbon-cmd-bar
with no title node. Rather than push a theme-only
into shared
markup that the other five appearances would then have to hide, the
caption is drawn with ::before. The string is hardcoded here, which is
the real cost of that choice — it is a fixed chrome label on a fixed
page, not data, so it will not drift; but if the CRM page is ever
retitled, this is the second place to change. */
:root[data-theme="win2000"] .sidebar-brand {
background: var(--w2k-cap);
color: #ffffff;
padding: 2px 4px;
margin: 0 0 2px;
gap: 5px;
min-height: var(--w2k-cap-h);
}
:root[data-theme="win2000"] .sidebar-brand .brand-name,
:root[data-theme="win2000"] .sidebar-brand .brand-monogram {
color: #ffffff;
font-weight: 700;
font-size: 11px;
letter-spacing: 0;
background: transparent;
}
:root[data-theme="win2000"] .crm-ribbon::before {
content: 'Clients';
display: flex;
align-items: center;
height: var(--w2k-cap-h);
margin: -3px -4px 4px;
padding: 0 3px;
background: var(--w2k-cap);
color: #ffffff;
font-weight: 700;
font-size: 11px;
}
/* The command buttons already inherit the beveled treatment from the button
group above. What they do NOT lose on their own is the Fluent base's
rounded corner and transition (buttons.css .crm-ribbon .btn-ribbon), which
outranks a single-class selector — spell them out here. */
:root[data-theme="win2000"] .crm-ribbon .btn-ribbon,
:root[data-theme="win2000"] .ribbon-overflow-menu .btn-ribbon,
:root[data-theme="win2000"] .ribbon-overflow-btn {
border-radius: 0;
border: 0;
background: var(--w2k-face);
color: var(--text);
box-shadow: var(--w2k-raised);
transition: none;
}
/* ════════════════════════════════════════════════════════════════════════
FLOATING WINDOWS — popovers, dropdowns, modals and the client panel
────────────────────────────────────────────────────────────────────────
A modal IS a window, so this is where the caption treatment pays off most.
Soft drop shadows and rounded corners are removed wholesale: a Win2000
dialog sat on the desktop with a hard bevel and nothing underneath it.
════════════════════════════════════════════════════════════════════════ */
:root[data-theme="win2000"] .tracker-edit-popover,
:root[data-theme="win2000"] .import-modal,
:root[data-theme="win2000"] .audit-panel,
:root[data-theme="win2000"] .help-card,
:root[data-theme="win2000"] .feedback-card,
:root[data-theme="win2000"] .research-modal,
:root[data-theme="win2000"] .carrier-modal,
:root[data-theme="win2000"] .sms-confirm-dialog,
:root[data-theme="win2000"] .notes-confirm-dialog,
:root[data-theme="win2000"] .notes-knockouts-dialog,
:root[data-theme="win2000"] .notes-knockouts-matrix-dialog,
:root[data-theme="win2000"] .notes-tips-dialog,
:root[data-theme="win2000"] .au-dialog,
:root[data-theme="win2000"] .ws-panel,
:root[data-theme="win2000"] #lead-panel,
:root[data-theme="win2000"] #client-panel,
:root[data-theme="win2000"] #upload-sheet,
:root[data-theme="win2000"] .ribbon-dropdown,
:root[data-theme="win2000"] .ribbon-overflow-menu,
:root[data-theme="win2000"] .ribbon-popover,
:root[data-theme="win2000"] .comp-popover,
:root[data-theme="win2000"] .team-row-menu-popover,
:root[data-theme="win2000"] .typeahead-dropdown,
:root[data-theme="win2000"] .state-dropdown,
:root[data-theme="win2000"] .fab-choice,
:root[data-theme="win2000"] .brand-dropdown {
border: 0;
border-radius: 0;
background: var(--w2k-face);
box-shadow: var(--w2k-window);
padding: var(--w2k-frame);
}
/* Dialog captions. Same treatment as .card-head, listed separately because
each feature ships its own header class — there is no shared modal. */
:root[data-theme="win2000"] .import-header,
:root[data-theme="win2000"] .audit-header,
:root[data-theme="win2000"] .help-header,
:root[data-theme="win2000"] .feedback-header,
:root[data-theme="win2000"] .research-modal-header,
:root[data-theme="win2000"] .carrier-modal-header,
:root[data-theme="win2000"] .notes-knockouts-header,
:root[data-theme="win2000"] .au-header,
:root[data-theme="win2000"] .sheet-header,
:root[data-theme="win2000"] .cp-header,
:root[data-theme="win2000"] .ws-panel-bar {
display: flex;
align-items: center;
gap: 4px;
min-height: var(--w2k-cap-h);
height: var(--w2k-cap-h);
margin: 0;
padding: 0 2px 0 3px;
border: 0;
border-radius: 0;
background: var(--w2k-cap);
color: #ffffff;
font-weight: 700;
overflow: hidden;
}
:root[data-theme="win2000"] .import-title,
:root[data-theme="win2000"] .help-title,
:root[data-theme="win2000"] .feedback-title,
:root[data-theme="win2000"] .carrier-modal-title,
:root[data-theme="win2000"] .au-title,
:root[data-theme="win2000"] .ws-panel-title {
color: #ffffff;
font-weight: 700;
background: transparent;
}
/* A dialog's own close/back button rides the light end of the gradient, so it
is a raised GRAY button with a black glyph — exactly like the real title-bar
controls, and the only combination that stays legible there. */
:root[data-theme="win2000"] .ws-panel-btn,
:root[data-theme="win2000"] .card-info,
:root[data-theme="win2000"] .research-modal-back {
width: 16px;
height: 14px;
border: 0;
border-radius: 0;
background: var(--w2k-face);
color: var(--text);
box-shadow: var(--w2k-raised);
}
/* Menu rows inside a dropdown: the navy selection bar on hover, nothing else. */
:root[data-theme="win2000"] .ribbon-dropdown-item:hover,
:root[data-theme="win2000"] .brand-dropdown-item:hover,
:root[data-theme="win2000"] .typeahead-item:hover,
:root[data-theme="win2000"] .state-option:hover,
:root[data-theme="win2000"] .edit-menu-item:hover {
background: var(--gold);
color: #ffffff;
border-radius: 0;
}
/* ════════════════════════════════════════════════════════════════════════
NOTEBOOK TABS — the Win2000 property-sheet look
────────────────────────────────────────────────────────────────────────
No shared tab component exists; every surface rolls its own, so they are
grouped here. The active tab is 2px taller and loses its bottom shadow so
it bleeds into the panel below — that overlap is the whole trick.
════════════════════════════════════════════════════════════════════════ */
:root[data-theme="win2000"] .admin-tab,
:root[data-theme="win2000"] .team-tab,
:root[data-theme="win2000"] .build-tab,
:root[data-theme="win2000"] .sheet-tab,
:root[data-theme="win2000"] .team-find-tab {
position: relative;
margin: 2px 1px 0 0;
padding: 2px 10px;
border: 0;
border-radius: 0;
background: var(--w2k-face);
color: var(--text);
box-shadow:
inset 1px 1px 0 0 var(--w2k-light),
inset -1px 0 0 0 var(--w2k-dark),
inset 2px 2px 0 0 var(--w2k-hilite),
inset -2px 0 0 0 var(--w2k-shadow);
}
:root[data-theme="win2000"] .admin-tab.is-active,
:root[data-theme="win2000"] .admin-tab.active,
:root[data-theme="win2000"] .team-tab.is-active,
:root[data-theme="win2000"] .team-tab.active,
:root[data-theme="win2000"] .build-tab.is-active,
:root[data-theme="win2000"] .build-tab.active,
:root[data-theme="win2000"] .sheet-tab.active,
:root[data-theme="win2000"] .team-find-tab.active {
margin-top: 0;
padding: 4px 12px 4px;
z-index: 1;
font-weight: 700;
background: var(--w2k-face);
color: var(--text);
}
/* ════════════════════════════════════════════════════════════════════════
TABLES + CHARTS — plots and grids sit in the white client area
════════════════════════════════════════════════════════════════════════ */
:root[data-theme="win2000"] .crm-table-wrap,
:root[data-theme="win2000"] .costs-table-wrap,
:root[data-theme="win2000"] .audit-table-wrap,
:root[data-theme="win2000"] .chart-plot,
:root[data-theme="win2000"] .research-modal-body {
border: 0;
border-radius: 0;
background: var(--w2k-well-bg);
box-shadow: var(--w2k-well);
}
/* Column headers are raised buttons — clicking one sorted the grid, and it
looked like something you could click. */
:root[data-theme="win2000"] .crm-table th,
:root[data-theme="win2000"] .costs-table th,
:root[data-theme="win2000"] .audit-table th,
:root[data-theme="win2000"] .admin-table th,
:root[data-theme="win2000"] .pn-table th {
background: var(--w2k-face);
color: var(--text);
font-weight: 400;
text-transform: none;
letter-spacing: 0;
border: 0;
border-radius: 0;
box-shadow: var(--w2k-raised);
}
/* Selected row = the navy system highlight, the same one the nav uses. */
:root[data-theme="win2000"] .crm-table tbody tr.is-selected,
:root[data-theme="win2000"] .crm-table tbody tr.selected {
background: var(--gold);
color: #ffffff;
}
/* Square legend keys — a round dot is a modern chart idiom. */
:root[data-theme="win2000"] .chart-legend-dot,
:root[data-theme="win2000"] .column-dot {
border-radius: 0;
}
/* ════════════════════════════════════════════════════════════════════════
SCROLLBARS — the raised thumb and arrow buttons on a dithered track
────────────────────────────────────────────────────────────────────────
WebKit-only (::-webkit-scrollbar has no standard equivalent), which covers
Chrome and Edge. Firefox falls back to its own scrollbar; that is a visible
difference between browsers, but the alternative is a custom-drawn overlay
scrollbar, which would break real scrolling to win a detail.
The track's dither is the authentic 50% checkerboard, drawn as a 2px
repeating gradient rather than an image so it costs nothing.
════════════════════════════════════════════════════════════════════════ */
:root[data-theme="win2000"] ::-webkit-scrollbar {
width: 16px;
height: 16px;
}
:root[data-theme="win2000"] ::-webkit-scrollbar-track {
background-color: var(--w2k-face);
background-image:
linear-gradient(45deg, var(--w2k-hilite) 25%, transparent 25%, transparent 75%, var(--w2k-hilite) 75%),
linear-gradient(45deg, var(--w2k-hilite) 25%, transparent 25%, transparent 75%, var(--w2k-hilite) 75%);
background-size: 2px 2px;
background-position: 0 0, 1px 1px;
}
:root[data-theme="win2000"] ::-webkit-scrollbar-thumb {
background: var(--w2k-face);
border-radius: 0;
box-shadow: var(--w2k-raised);
}
:root[data-theme="win2000"] ::-webkit-scrollbar-corner {
background: var(--w2k-face);
}
/* ════════════════════════════════════════════════════════════════════════
IMAGES — nearest-neighbour, so a scaled logo shows its pixels
════════════════════════════════════════════════════════════════════════ */
:root[data-theme="win2000"] .brand-logo,
:root[data-theme="win2000"] .nav-icon-img,
:root[data-theme="win2000"] .carrier-logo,
:root[data-theme="win2000"] .avatar-sm {
image-rendering: pixelated;
}
/* ════════════════════════════════════════════════════════════════════════
FITTING THE CHROME TO SURFACES THAT ALREADY HAD THEIR OWN PADDING
────────────────────────────────────────────────────────────────────────
The window rules above set a 3px frame on the container. That is correct
for the modals — they carry no container padding of their own, only their
header and body do — but it collapses the two surfaces that DID pad
themselves, and it clips the controls that ride inside a now-18px caption.
These are those corrections; last in the file so they win the ties.
════════════════════════════════════════════════════════════════════════ */
/* .settings-section padded itself 28px/32px. The frame has to win, so the
inner breathing room moves onto the children instead — except the label,
which is the caption and must bleed to the frame edge. */
:root[data-theme="win2000"] .settings-section {
padding: var(--w2k-frame) var(--w2k-frame) 12px;
}
:root[data-theme="win2000"] .settings-section > :not(.settings-section-label) {
margin-left: 8px;
margin-right: 8px;
}
:root[data-theme="win2000"] .settings-section-label + * {
margin-top: 10px;
}
/* The forecast simulator is a collapsible panel, so it gets the full window
treatment: frame, caption, sunken output. Its own border/radius/clipping
would otherwise cut the bevel off. */
:root[data-theme="win2000"] .forecast-section {
border: 0;
border-radius: 0;
overflow: visible;
padding: var(--w2k-frame);
background: var(--w2k-face);
box-shadow: var(--w2k-window);
}
:root[data-theme="win2000"] .forecast-body {
padding: 8px 6px 4px;
}
/* Each pipeline column becomes its own little window — it already had a
header and a card list, which map exactly onto caption and client area. */
:root[data-theme="win2000"] .kanban-column {
gap: 0;
border: 0; /* the colored border is set inline by kanban.js */
border-radius: 0;
padding: var(--w2k-frame);
background: var(--w2k-face);
box-shadow: var(--w2k-window);
}
:root[data-theme="win2000"] .kanban-card {
border: 0;
border-radius: 0;
background: var(--w2k-face);
box-shadow: var(--w2k-raised);
}
/* Controls that ride INSIDE a caption bar. The caption is 18px with
overflow:hidden, so anything taller than ~14px gets clipped — these were
sized for a 26px modern header. They become raised gray micro-buttons with
black glyphs, which is both what fits and what the real title-bar buttons
looked like: gray, never white-on-blue. */
:root[data-theme="win2000"] .forecast-edit-btn,
:root[data-theme="win2000"] .edit-menu-reset,
:root[data-theme="win2000"] .column-count,
:root[data-theme="win2000"] .card-actions > button,
:root[data-theme="win2000"] .cp-header-actions > button,
:root[data-theme="win2000"] .forecast-header-right > button {
width: auto;
min-width: 16px;
height: 14px;
min-height: 14px;
padding: 0 4px;
border: 0;
border-radius: 0;
background: var(--w2k-face);
color: var(--text);
box-shadow: var(--w2k-raised);
font-weight: 400;
line-height: 14px;
}
/* The collapse chevron is a glyph, not a button — it stays white on the
caption like the title it sits beside. */
:root[data-theme="win2000"] .forecast-chevron {
color: #ffffff;
}
/* Admin's "needs reconnect" tile flagged itself with border-color: var(--red),
which the frame bevel replaced — a window has no border to colour. The alert
moves onto the caption instead, which is louder anyway and still leaves the
count itself black-on-white in the client area. */
:root[data-theme="win2000"] .kpi-card.admin-kpi-warn::before {
background: linear-gradient(90deg, #7a0000 0%, #b00000 45%, #e08080 100%);
}