/* ============================================================================ SKIN: WIN98 (a genuine Windows 98 look) - html[data-skin="retro"] ---------------------------------------------------------------------------- The id stays "retro" for back-compat (saved cc-app-skin + server appearance + theme.js persistence), but this is now a tasteful, lovable, USABLE Windows-98 aesthetic (Felipe: "the retro you did was just some squary stuff where I thought it would look more like windows 98"). Authored against the TOKEN CONTRACT (dashboard.css top + MACRO-THEME-SKINS-2026-05-31.md). theme.js SKINS.retro: name "Win98", defaults { tone light, accent Navy(indigo), font jakarta }. THE LOOK (the Win98 design language, done cleanly — never a broken-90s mess) - the iconic SILVER-GRAY surface (#c0c0c0) on a TEAL desktop (#008080) page - 3D BEVELED borders everywhere: RAISED = white (#ffffff) top-left + dark-gray (#808080) / black (#000000) bottom-right; SUNKEN = the inverse. Done with layered box-shadow insets so radii stay 0 and the bevel reads crisp. - NAVY title-bar GRADIENTS (#000080 -> #1084d0) with white text on every card / section header (the classic active-window caption bar) - a clean TAHOMA / MS-Sans-Serif font stack for headings (body keeps --font, which the picker defaults to a clean sans too) - chunky beveled BUTTONS that "press" (raised <-> sunken on :active) - the classic dotted FOCUS outline - the SHELL is fully skinned: the sidebar is a raised silver taskbar panel, the topbar is a raised silver toolbar strip, the nav items are beveled list buttons (active = sunken), the account pill + tone toggle are beveled silver buttons. - DARK tone (reworked 2026-06-01): a COHERENT NEUTRAL GRAPHITE Win98 — a neutral near-black desktop (#161616, NOT teal), graphite chrome (#2a2a2a/#1e1e1e), the bevel language kept in dark greys (raised = lighter-grey top-left / near-black bottom-right; sunken = inverse), a DARKER graphite title bar (NOT navy), NEUTRAL graphite covers (NOT navy), and a restrained STEEL accent for small text/active states. Reads as a proper neutral dark theme while keeping the Win98 personality. AUTHORING NOTES (how this stays AA + correct) - theme.js sets --accent / --accent-deep / --accent-text / --coral-tint* / --coral-line INLINE on per tone (the FIXED value for the picked accent id). Inline WINS, so the chrome here reads the dashboard-local --c-* ALIASES (--c-coral/--c-deep/--c-text/--c-tint/--c-tint2/--c-line/--c-wash) which are NOT set inline. We paint those NAVY by default and re-point them per data-accent at the bottom (the classic VGA accent picker), so picking "Teal"/"Maroon"/"Olive"/"Purple" genuinely repaints the Win98 chrome. - Win98 bevel helper vars: --w98-light (#fff highlight), --w98-face (#c0c0c0), --w98-shadow (#808080), --w98-dark (#000) — used to build the raised/sunken box-shadow stacks. - Scope: every rule under html[data-skin="retro"]; dark under [data-theme="dark"]. AA: text >=4.5:1, UI >=3:1 in both tones. No emoji, no em dashes. ============================================================================ */ /* Heading face: the classic Tahoma / MS Sans Serif Windows UI stack. Body + UI keep the user's --font (the picker defaults to a clean sans). System fonts, so no @import needed — Tahoma ships on Windows, Geneva on macOS, Verdana fallback. */ /* TOKENS — the silver/teal classic (LIGHT tone). Re-declare base tokens AND the w-prefixed / c-prefixed aliases the rules read, so the surface is fully re-skinned. */ html[data-skin="retro"] { /* Win98 bevel system primitives */ --w98-light: #ffffff; /* highlight edge (top-left of a raised bevel) */ --w98-face: #c0c0c0; /* the iconic silver control face */ --w98-shadow: #808080; /* dark-gray edge */ --w98-dark: #000000; /* black outer edge */ --w98-navy: #000080; /* active title-bar start */ --w98-blue: #1084d0; /* active title-bar end */ --w98-cap-hi: #4a6bd0; /* the raised highlight edge on a caption block (brand mark, the ladder number tiles, video badges) — a lighter tint of the title-bar hue; re-pointed per tone + per accent. */ /* surfaces */ --bg: #c0c0c0; /* silver card face */ --bg-2: #008080; /* the teal DESKTOP backdrop (the page ground) */ --bg-3: #b0b0b0; /* recessed fill (a touch darker silver) */ --card-2: #cacaca; /* faint alt card */ --border: #808080; /* the bevel shadow gray reads as the line color */ --border-strong: #000000; /* black outer bevel edge */ /* dark cover tiles read as classic navy "title" blocks */ --cover-1: #1a3a6b; --cover-2: #102a55; --cover-3: #0a1f44; /* ink ramp — black-on-silver is the Win98 default (max legibility) */ --ink: #000000; /* primary — 13.8:1 on the silver face */ --ink-2: #1c1c1c; /* secondary — ~12:1 */ --ink-3: #3a3a3a; /* tertiary / meta — 7.9:1 on silver */ --w-ink-4: #404040; /* faintest AA mono / meta — 7.0:1 on the silver face */ /* surface aliases (rules read --w-*) */ --w-page: var(--bg-2); --w-card: var(--bg); --w-card-2: var(--card-2); --w-line: var(--border); --w-line-2: var(--border-strong); --w-locked: var(--bg-3); --w-lock-border: #808080; --w-ink: var(--ink); --w-ink-2: var(--ink-2); --w-ink-3: var(--ink-3); /* ACCENT — the classic VGA set (theme.js SKINS.retro.options.accents): Navy (default) / Teal / Maroon / Olive / Purple, mapped onto the 5 stable id slots. The chrome reads the --c-* ALIASES (NOT inline), so we paint NAVY here and re-point per data-accent at the bottom. AA: each --c-text clears 4.5:1 on the silver face. */ --c-coral: #000080; /* navy — bars / non-text accents */ --c-deep: #000080; /* navy fill (AA behind white) */ --c-text: #00007a; /* navy TEXT on silver — AA (8.9:1) */ --c-tint: #d6dcea; /* pale navy fill: chips / banners / active rows */ --c-tint2: #c2cbe0; --c-line: #000080; /* solid navy hairline (classic, no alpha) */ --c-wash: rgba(0,0,128,0.08); /* also re-point the --coral-tint family (NOT inline) so the app.html shell chrome (.side-link.current bg, .id-role, the reader back link bed) reads navy instead of the inline coral tint. --coral-text/-deep ARE inline (=accent), so they stay the picked accent's deep/text — fine, they are navy here too. */ --coral-tint: #d6dcea; --coral-tint2: #c2cbe0; --coral-wash: rgba(0,0,128,0.08); --coral-line: #000080; /* heatmap ramp on the silver base */ --hm-0: var(--bg-3); --hm-1: #9aa6d0; --hm-2: #4a5db0; --hm-3: #000080; /* SHAPE — Win98 is SQUARE. Zero radius everywhere; the bevel is the depth cue. */ --radius-xs: 0px; --radius-sm: 0px; --radius: 0px; --radius-lg: 0px; --radius-xl: 0px; --pad-card: 16px; --pad-card-sm: 13px; --pad-card-lg: 20px; --border-weight: 2px; /* ELEVATION — there is NO soft shadow in Win98; depth is the bevel. We neutralize the soft shadows (the bevel borders below supply the 3D), keeping a faint hard edge only where a token is consumed as a plain box-shadow. */ --shadow-1: 0 0 0 1px rgba(0,0,0,0.18); --shadow-2: 1px 1px 0 rgba(0,0,0,0.35); --shadow-3: 2px 2px 0 rgba(0,0,0,0.45); --shadow-coral: none; --w-shadow: var(--shadow-1); --w-shadow-lift: var(--shadow-2); /* SKIN HOOKS */ --page-bg: var(--bg-2); /* the teal desktop */ --card-shadow: none; /* cards get the bevel, not a soft shadow */ --font-display: Tahoma, "MS Sans Serif", Geneva, Verdana, Arial, sans-serif; /* ACCOUNT PILL (--acct-*; not inline -> override freely for a silver beveled pill) */ --acct-surface: #c0c0c0; --acct-ink: #000000; --acct-ink-2: #1c1c1c; --acct-ink-3: #3a3a3a; --acct-border: #808080; --acct-tint: #d6dcea; } /* TOKENS — the DARK tone (a COHERENT neutral GRAPHITE Windows variant). This is a proper neutral dark theme that keeps the full Win98 personality — beveled cards/ buttons, title-bar headers — but in dark greys, NOT a teal+navy hybrid. The desktop is a neutral near-black, the chrome is dark-silver (graphite), the title bars are a DARKER graphite gradient (not bright navy), the covers/number-tiles read graphite (not navy), and the default accent is a restrained STEEL that tints small text + active states without giving the page or covers a blue/teal cast. Light ink on the dark greys clears AA (>=4.5:1) throughout. */ html[data-skin="retro"][data-theme="dark"] { --w98-light: #5a5a5a; /* graphite highlight edge (top-left of a raised bevel) */ --w98-face: #2a2a2a; /* graphite control face */ --w98-shadow: #141414; /* near-black edge (bottom-right) */ --w98-dark: #000000; /* black outer edge */ /* title-bar gradient: a DARKER graphite caption bar (replaces the bright navy so the dark tone reads neutral). A subtle lighter-to-darker dark-silver sweep. */ --w98-navy: #3a3a3a; /* active title-bar start (dark graphite) */ --w98-blue: #565656; /* active title-bar end (lighter graphite) */ --w98-cap-hi: #6a6a6a; /* graphite caption highlight edge (NOT navy) */ --bg: #2a2a2a; /* graphite card face */ --bg-2: #161616; /* neutral near-black DESKTOP (NOT teal) */ --bg-3: #202020; /* recessed fill */ --card-2: #313131; /* faint alt card */ --border: #141414; --border-strong: #000000; /* covers / number tiles — NEUTRAL dark graphite blocks (NOT navy), a hair lighter than the page so they read as raised "title" blocks with white labels. */ --cover-1: #3a3a3a; --cover-2: #2e2e2e; --cover-3: #242424; --ink: #f2f2f2; /* primary — ~14:1 on the graphite face */ --ink-2: #d8d8d8; /* secondary — ~10:1 */ --ink-3: #b2b2b2; /* tertiary / meta — ~6.0:1 */ --w-ink-4: #a6a6a6; /* faintest AA mono / meta — ~5.1:1 on the graphite face */ --w-page: var(--bg-2); --w-card: var(--bg); --w-card-2: var(--card-2); --w-line: var(--border); --w-line-2: var(--border-strong); --w-locked: var(--bg-3); --w-lock-border: #141414; --w-ink: var(--ink); --w-ink-2: var(--ink-2); --w-ink-3: var(--ink-3); /* DEFAULT accent for the dark tone = a restrained STEEL (a muted, desaturated blue-grey, NOT a saturated navy/teal). It tints small accent TEXT + active rows + the progress fill, and clears AA on graphite, without casting the page or covers. The per-accent picker (teal/maroon/olive/purple) still re-points these below. */ --c-coral: #aeb9c9; /* steel — bars / non-text accents */ --c-deep: #5b6b80; /* steel fill (AA behind white: ~4.7:1) */ --c-text: #b7c2d2; /* steel TEXT on graphite (AA: ~7.4:1 on #2a2a2a) */ --c-tint: #2c3038; /* faint steel fill: chips / active rows */ --c-tint2: #353a44; --c-line: #6f7c8f; --c-wash: rgba(174,185,201,0.10); --coral-tint: #2c3038; --coral-tint2: #353a44; --coral-wash: rgba(174,185,201,0.10); --coral-line: #6f7c8f; /* heatmap ramp on the graphite base — neutral greys to a soft steel */ --hm-0: var(--bg-3); --hm-1: #3a4048; --hm-2: #545d6a; --hm-3: #aeb9c9; --shadow-1: 0 0 0 1px rgba(0,0,0,0.5); --shadow-2: 1px 1px 0 rgba(0,0,0,0.6); --shadow-3: 2px 2px 0 rgba(0,0,0,0.7); --shadow-coral: none; --w-shadow: var(--shadow-1); --w-shadow-lift: var(--shadow-2); --page-bg: var(--bg-2); --card-shadow: none; --acct-surface: #2a2a2a; --acct-ink: #f2f2f2; --acct-ink-2: #d8d8d8; --acct-ink-3: #b2b2b2; --acct-border: #141414; --acct-tint: #2c3038; } /* ========================================================================== THE BEVEL SYSTEM — raised + sunken 3D borders (the heart of the Win98 look). Built with layered inset box-shadows so corners stay square + crisp at any size. RAISED: white top-left, gray+black bottom-right. SUNKEN: inverse. ========================================================================== */ /* RAISED bevel — the default surface for cards, buttons, the silver chrome. */ html[data-skin="retro"] .card, html[data-skin="retro"] .sec-card, html[data-skin="retro"] .iax-card, html[data-skin="retro"] .cw-tile, html[data-skin="retro"] .asg-card, html[data-skin="retro"] .ws-path-card, html[data-skin="retro"] .mom-card, html[data-skin="retro"] .ap-preview, html[data-skin="retro"] .ap-tile, html[data-skin="retro"] .ap-style, html[data-skin="retro"] .ap-font, html[data-skin="retro"] .sk-tab, html[data-skin="retro"] .iax-bookrow { background: var(--w-card); border: 0; border-radius: 0; box-shadow: inset 1px 1px 0 0 var(--w98-light), inset -1px -1px 0 0 var(--w98-dark), inset 2px 2px 0 0 var(--w-card), inset -2px -2px 0 0 var(--w98-shadow); } /* SUNKEN bevel — recessed wells: inputs, progress tracks, list rows, the reader. */ html[data-skin="retro"] input, html[data-skin="retro"] textarea, html[data-skin="retro"] select, html[data-skin="retro"] .pbar, html[data-skin="retro"] .jbar, html[data-skin="retro"] .ps-bar, html[data-skin="retro"] .vpl-bar, html[data-skin="retro"] .ap-sw, html[data-skin="retro"] .sk-mini { border: 0 !important; border-radius: 0 !important; box-shadow: inset 1px 1px 0 0 var(--w98-shadow), inset -1px -1px 0 0 var(--w98-light), inset 2px 2px 0 0 var(--w98-dark), inset -2px -2px 0 0 var(--w-card); } /* ========================================================================== STRUCTURAL FLOURISHES ========================================================================== */ /* Shell / nav: the silver "taskbar" sidebar with a RAISED outer bevel (white highlight on the inner edge, gray+black on the outer right edge — the classic raised panel); the page is the desktop (teal in light, neutral near-black in dark). */ html[data-skin="retro"] .app-shell { background: var(--w-page); } html[data-skin="retro"] .app-sidebar { background: var(--w-card); border-right: 0; box-shadow: inset 1px 0 0 0 var(--w98-light), /* white highlight on the inner-left edge */ inset -1px 0 0 0 var(--w98-shadow), /* gray on the inner-right edge */ 1px 0 0 0 var(--w98-dark); /* black outer edge against the desktop */ } /* The TOPBAR reads as a Win98 RAISED toolbar strip (a thin silver beveled bar holding the tone toggle + the account pill), so the whole shell — sidebar, toolbar, client area — is consistently beveled silver/graphite and nothing floats on bare chrome. */ html[data-skin="retro"] .app-topbar, html[data-skin="retro"] .navbar { background: var(--w-card); border-bottom: 0; border-radius: 0; padding: 5px 7px; margin-bottom: 14px; box-shadow: inset 1px 1px 0 0 var(--w98-light), inset -1px -1px 0 0 var(--w98-dark), inset 2px 2px 0 0 var(--w-card), inset -2px -2px 0 0 var(--w98-shadow); } /* the quick light/dark TONE TOGGLE (theme.js .cc-tt) reads as a SQUARE beveled Win98 icon button (not the default round pill), so it matches the toolbar + account pill. */ html[data-skin="retro"] .cc-tt { border-radius: 0 !important; border: 0 !important; background: var(--w-card); color: var(--ink); box-shadow: inset 1px 1px 0 0 var(--w98-light), inset -1px -1px 0 0 var(--w98-dark), inset 2px 2px 0 0 var(--w-card), inset -2px -2px 0 0 var(--w98-shadow); } html[data-skin="retro"] .cc-tt:hover { color: var(--ink); background: var(--w-card); } html[data-skin="retro"] .cc-tt:active { box-shadow: inset 1px 1px 0 0 var(--w98-shadow), inset -1px -1px 0 0 var(--w98-light), inset 2px 2px 0 0 var(--w98-dark), inset -2px -2px 0 0 var(--w-card); } /* The MAIN content area is the silver/graphite "client window" workspace — the iconic Win98 sunken client area — so ALL page-level text (the dash/explore head, eyebrows, the tab bar, body paragraphs) sits on the surface, never on the bare desktop where accent/gray text would fail AA. The desktop (teal in light, neutral near-black in dark) shows only in the gutter/margins. The topbar is now its own beveled toolbar. */ html[data-skin="retro"] .app-main { background: var(--w-card); box-shadow: inset 1px 1px 0 0 var(--w98-shadow), inset -1px -1px 0 0 var(--w98-light), inset 2px 2px 0 0 var(--w98-dark), inset -2px -2px 0 0 var(--w-card); margin: 8px 8px 8px 0; padding-top: 16px; } @media (max-width: 760px) { html[data-skin="retro"] .app-main { margin: 6px; } } /* sidebar links: classic beveled silver LIST BUTTONS. RAISED by default (a quiet toolbar button), the selected item is SUNKEN/pressed (the Win98 "active" tab) with the accent label — never the coral tint. */ html[data-skin="retro"] .side-link { border-radius: 0; border: 0; font-weight: 400; color: var(--ink-2); letter-spacing: 0; background: var(--w-card); box-shadow: inset 1px 1px 0 0 var(--w98-light), inset -1px -1px 0 0 var(--w98-dark), inset 2px 2px 0 0 var(--w-card), inset -2px -2px 0 0 var(--w98-shadow); } html[data-skin="retro"] .side-link:hover { background: var(--w-card); color: var(--ink); } html[data-skin="retro"] .side-link.current { background: var(--c-tint); color: var(--c-text); font-weight: 700; box-shadow: inset 1px 1px 0 0 var(--w98-shadow), inset -1px -1px 0 0 var(--w98-light), inset 2px 2px 0 0 var(--w98-dark), inset -2px -2px 0 0 var(--w-card); } html[data-skin="retro"][data-theme="dark"] .side-link.current { color: var(--c-text); } /* the "View public site" exit link sits a touch apart — a raised button with a quiet top divider, matching the rest of the nav list. */ html[data-skin="retro"] .side-exit { border-top: 0; margin-top: 8px; } /* the brand "PM" mark reads as a little raised silver icon */ html[data-skin="retro"] .brand .mark { background: var(--w98-navy); color: #fff; border-radius: 0; box-shadow: inset 1px 1px 0 0 var(--w98-cap-hi), inset -1px -1px 0 0 var(--w98-dark); } html[data-skin="retro"] .brand-sub { color: var(--c-text); } /* Headings: the Tahoma/MS-Sans display face. Section + card heads become TITLE BARS — a navy->blue caption gradient with white text, the Win98 active window. */ html[data-skin="retro"] .dash-head h1, html[data-skin="retro"] .hero-title, html[data-skin="retro"] .jd-name, html[data-skin="retro"] .dv-sec-h, html[data-skin="retro"] .ag-h, html[data-skin="retro"] .vpl-h, html[data-skin="retro"] .ps-journey, html[data-skin="retro"] .ws-head h1, html[data-skin="retro"] .ov-cont-h, html[data-skin="retro"] .set-section-head h2, html[data-skin="retro"] .card-eyebrow, html[data-skin="retro"] .dash-eyebrow { font-family: var(--font-display); } html[data-skin="retro"] .dash-head h1, html[data-skin="retro"] .hero-title { letter-spacing: 0; font-weight: 700; } /* the eyebrows read as small bold navy caption text (the classic UI micro-label) */ html[data-skin="retro"] .dash-eyebrow, html[data-skin="retro"] .card-eyebrow, html[data-skin="retro"] .hero-eyebrow, html[data-skin="retro"] .cw-eyebrow { color: var(--c-text); font-weight: 700; font-family: var(--font-display); text-transform: none; letter-spacing: 0; } /* The HERO card gets the raised silver bevel + a fat navy->blue accent rail down its left edge (the active-window caption color, as a safe vertical rail so it never overlaps the centered card content). */ html[data-skin="retro"] .hero-card { background: var(--w-card); box-shadow: inset 1px 1px 0 0 var(--w98-light), inset -1px -1px 0 0 var(--w98-dark), inset 2px 2px 0 0 var(--w-card), inset -2px -2px 0 0 var(--w98-shadow); } html[data-skin="retro"] .hero-card::before { width: 6px; left: 0; top: 0; bottom: 0; right: auto; height: auto; background: linear-gradient(to bottom, var(--w98-navy) 0%, var(--w98-blue) 100%); } /* The Modules ladder: the group separator number = a raised navy caption block; the spine reads as a quiet gray rule. */ html[data-skin="retro"] .journey::before { width: 2px; background: var(--w98-shadow); opacity: 1; } html[data-skin="retro"] .jsep-num { background: var(--c-deep); color: #fff; border-radius: 0; box-shadow: inset 1px 1px 0 0 var(--w98-cap-hi), inset -1px -1px 0 0 var(--w98-dark); font-weight: 700; } html[data-skin="retro"] .jsep-label { color: var(--c-text); letter-spacing: 0; font-weight: 700; } html[data-skin="retro"] .jd-name { color: var(--ink); } /* module rows: a raised silver list item; the number tile is a sunken navy well. current = navy fill, completed = a sunken "done" gray. */ html[data-skin="retro"] .jrow { background: var(--w-card); border: 0; border-radius: 0; box-shadow: inset 1px 1px 0 0 var(--w98-light), inset -1px -1px 0 0 var(--w98-dark), inset 2px 2px 0 0 var(--w-card), inset -2px -2px 0 0 var(--w98-shadow); } html[data-skin="retro"] .jcover { border-radius: 0; background: var(--cover-1); color: #fff; } html[data-skin="retro"] .jrow.is-current .jcover { background: var(--c-deep); } html[data-skin="retro"] .jrow.is-completed .jcover { background: var(--w98-shadow); color: #fff; } html[data-skin="retro"][data-theme="dark"] .jrow.is-completed .jcover { background: #555; } /* element-type PILLS — small beveled silver chips with navy label */ html[data-skin="retro"] .jel, html[data-skin="retro"] .iax-el, html[data-skin="retro"] .iax-elrow-type, html[data-skin="retro"] .id-role, html[data-skin="retro"] .ord-status, html[data-skin="retro"] .cw-pill { border-radius: 0; border: 0; font-weight: 700; background: var(--bg); color: var(--c-text); box-shadow: inset 1px 1px 0 0 var(--w98-light), inset -1px -1px 0 0 var(--w98-dark); } html[data-skin="retro"] .jel { background: var(--c-tint); } /* completed-element tick + video badges — kept legible, navy/gray (single hue) */ html[data-skin="retro"] .jelr-done, html[data-skin="retro"] .jelr-done svg { color: var(--c-text); } html[data-skin="retro"][data-theme="dark"] .jelr-done, html[data-skin="retro"][data-theme="dark"] .jelr-done svg { color: var(--c-text); } html[data-skin="retro"] .vpl-ic { background: var(--c-deep); color: #fff; border-radius: 0; box-shadow: inset 1px 1px 0 0 var(--w98-cap-hi), inset -1px -1px 0 0 var(--w98-dark); } html[data-skin="retro"] .vpl-ic.done { background: var(--w98-shadow); color: #fff; } /* progress bars: a SUNKEN silver well with a navy fill (the classic file-copy bar). The fill is segmented-looking via a solid navy block. */ html[data-skin="retro"] .pbar > i, html[data-skin="retro"] .jbar > i, html[data-skin="retro"] .ps-bar > i, html[data-skin="retro"] .vpl-bar > i { background: var(--c-deep); border-radius: 0; } /* View tabs + pickers: raised silver buttons; the active one is pressed (sunken). */ html[data-skin="retro"] .dv-tab, html[data-skin="retro"] .iax-chip, html[data-skin="retro"] .dv-pick-trigger { border-radius: 0; border: 0; background: var(--bg); color: var(--ink-2); font-weight: 400; box-shadow: inset 1px 1px 0 0 var(--w98-light), inset -1px -1px 0 0 var(--w98-dark), inset 2px 2px 0 0 var(--w-card), inset -2px -2px 0 0 var(--w98-shadow); } html[data-skin="retro"] .dv-tab.is-on, html[data-skin="retro"] .iax-chip.on { background: var(--c-tint); color: var(--c-text); font-weight: 700; box-shadow: inset 1px 1px 0 0 var(--w98-shadow), inset -1px -1px 0 0 var(--w98-light), inset 2px 2px 0 0 var(--w98-dark), inset -2px -2px 0 0 var(--w-card); } html[data-skin="retro"] .iax-tab.on { border-bottom-color: var(--c-deep); } /* ========================================================================== BUTTONS — the chunky beveled Win98 button that PRESSES (raised -> sunken). ========================================================================== */ html[data-skin="retro"] .btn-coral, html[data-skin="retro"] .btn-ghost-coral, html[data-skin="retro"] .ap-pv-btn, html[data-skin="retro"] .ap-pv-btn2 { border: 0; border-radius: 0; background: var(--bg); /* the silver button face */ color: var(--ink); font-weight: 700; letter-spacing: 0; font-family: var(--font-display); box-shadow: inset 1px 1px 0 0 var(--w98-light), inset -1px -1px 0 0 var(--w98-dark), inset 2px 2px 0 0 var(--w-card), inset -2px -2px 0 0 var(--w98-shadow); } /* the PRIMARY button keeps a silver face but a navy label + a default-button thick black ring (the classic "OK" default), so it still reads as the primary action. */ html[data-skin="retro"] .btn-coral, html[data-skin="retro"] .ap-pv-btn { color: var(--c-text); outline: 1px solid var(--w98-dark); outline-offset: 0; } html[data-skin="retro"][data-theme="dark"] .btn-coral, html[data-skin="retro"][data-theme="dark"] .ap-pv-btn { color: var(--c-text); } /* PRESS: swap to the sunken bevel + nudge the label down-right (a real key press). transform-only, reduced-motion safe. */ html[data-skin="retro"] .btn-coral:active, html[data-skin="retro"] .btn-ghost-coral:active, html[data-skin="retro"] .dv-tab:active, html[data-skin="retro"] .iax-chip:active { box-shadow: inset 1px 1px 0 0 var(--w98-shadow), inset -1px -1px 0 0 var(--w98-light), inset 2px 2px 0 0 var(--w98-dark), inset -2px -2px 0 0 var(--w-card); } html[data-skin="retro"] .btn-coral:active > *, html[data-skin="retro"] .btn-ghost-coral:active > * { transform: translate(1px, 1px); } @media (prefers-reduced-motion: reduce) { html[data-skin="retro"] .btn-coral:active > *, html[data-skin="retro"] .btn-ghost-coral:active > * { transform: none; } } /* ========================================================================== CLASSIC FOCUS — the dotted Windows focus rectangle on every interactive thing. ========================================================================== */ html[data-skin="retro"] a:focus-visible, html[data-skin="retro"] button:focus-visible, html[data-skin="retro"] .side-link:focus-visible, html[data-skin="retro"] .dv-tab:focus-visible, html[data-skin="retro"] .ap-tile:focus-visible, html[data-skin="retro"] .ap-style:focus-visible, html[data-skin="retro"] .ap-font:focus-visible, html[data-skin="retro"] .sk-tab:focus-visible, html[data-skin="retro"] .ap-acc:focus-visible, html[data-skin="retro"] input:focus-visible, html[data-skin="retro"] select:focus-visible { outline: 1px dotted var(--ink) !important; outline-offset: -4px !important; } /* Banners / order pills: beveled silver beds */ html[data-skin="retro"] .banner-ok, html[data-skin="retro"] .banner-note { border-radius: 0; border: 0; box-shadow: inset 1px 1px 0 0 var(--w98-light), inset -1px -1px 0 0 var(--w98-dark); } /* Explore: silver beveled covers (navy/gray classic tiles) */ html[data-skin="retro"] .iax-cover { border-radius: 0; } html[data-skin="retro"] .iax-cover.t-coral { background: var(--c-deep); } html[data-skin="retro"] .iax-cover.t-ink { background: var(--cover-2); } html[data-skin="retro"] .iax-cover.t-slate { background: var(--cover-1); } html[data-skin="retro"] .iax-teach { border-radius: 0; } /* Settings Appearance picker: the skin tabs + the active pressed state read Win98. (The .ap-tile / .sk-tab raised bevels come from the bevel block above.) */ html[data-skin="retro"] .ap-tile[aria-pressed=true], html[data-skin="retro"] .ap-style[aria-pressed=true], html[data-skin="retro"] .ap-font[aria-pressed=true], html[data-skin="retro"] .sk-tab[aria-pressed=true] { box-shadow: inset 1px 1px 0 0 var(--w98-shadow), inset -1px -1px 0 0 var(--w98-light), inset 2px 2px 0 0 var(--w98-dark), inset -2px -2px 0 0 var(--w-card) !important; } /* the account pill reads as a raised silver Start-menu button */ html[data-skin="retro"] .cc-acct, html[data-skin="retro"] .cc-acct-btn { border-radius: 0 !important; box-shadow: inset 1px 1px 0 0 var(--w98-light), inset -1px -1px 0 0 var(--w98-dark), inset 2px 2px 0 0 var(--w-card), inset -2px -2px 0 0 var(--w98-shadow) !important; } /* The re-skin transition: glide the silver surfaces when switching INTO/OUT of Win98 (theme.js adds .cc-skin-anim briefly; never under reduced motion). */ html[data-skin="retro"].cc-skin-anim .card, html[data-skin="retro"].cc-skin-anim .app-sidebar, html[data-skin="retro"].cc-skin-anim .app-shell { transition: background-color 380ms var(--ease-out); } @media (prefers-reduced-motion: reduce) { html[data-skin="retro"].cc-skin-anim .card, html[data-skin="retro"].cc-skin-anim .app-sidebar, html[data-skin="retro"].cc-skin-anim .app-shell { transition: none; } } /* ========================================================================== PER-SKIN ACCENT PALETTE — html[data-skin="retro"][data-accent=""] -------------------------------------------------------------------------- The classic VGA-ish set (theme.js SKINS.retro.options.accents): indigo -> Navy (the default; the base block paints it) teal -> Teal coral -> Maroon forest -> Olive plum -> Purple The engine sets data-accent=; these re-point --c-coral / --c-deep / --c-text / --c-tint / --c-tint2 / --c-line + the --coral-tint family (NOT inline -> they win) so the title-bar gradients, the current nav tab, the number tiles, covers + eyebrows recolor to the picked classic hue. Each id has a LIGHT default-tone value + a DARK-tone override. AA verified on silver/graphite. The title-bar gradient uses --w98-navy/--w98-blue, so we also repoint those. ========================================================================== */ /* TEAL */ html[data-skin="retro"][data-accent="teal"] { --w98-navy: #008080; --w98-blue: #1aa6a0; --w98-cap-hi: #3fb0aa; --c-coral: #008080; --c-deep: #006a6a; --c-text: #005252; --accent-soft: #66c2bd; --c-tint: #cfe6e4; --c-tint2: #bcdcd9; --c-line: #006a6a; --c-wash: rgba(0,106,106,0.08); --coral-tint: #cfe6e4; --coral-tint2: #bcdcd9; --coral-line: #006a6a; --cover-1: #1a5c5c; --cover-2: #104646; --cover-3: #0a3434; --hm-1: #8fc8c4; --hm-2: #2a9d97; --hm-3: #006a6a; } /* MAROON */ html[data-skin="retro"][data-accent="coral"] { --w98-navy: #800000; --w98-blue: #b83232; --w98-cap-hi: #c25a5a; --c-coral: #800000; --c-deep: #800000; --c-text: #7a0000; --accent-soft: #c98a8a; --c-tint: #e8d2d2; --c-tint2: #dec0c0; --c-line: #800000; --c-wash: rgba(128,0,0,0.08); --coral-tint: #e8d2d2; --coral-tint2: #dec0c0; --coral-line: #800000; --cover-1: #6b1a1a; --cover-2: #551010; --cover-3: #440a0a; --hm-1: #d0a0a0; --hm-2: #a83a3a; --hm-3: #800000; } /* OLIVE */ html[data-skin="retro"][data-accent="forest"] { --w98-navy: #3f6b1f; --w98-blue: #5e9633; --w98-cap-hi: #74a847; --c-coral: #3f6b1f; --c-deep: #3a5e1c; --c-text: #34541a; --accent-soft: #9cbf6f; --c-tint: #dde6cf; --c-tint2: #cddabb; --c-line: #3a5e1c; --c-wash: rgba(63,107,31,0.08); --coral-tint: #dde6cf; --coral-tint2: #cddabb; --coral-line: #3a5e1c; --cover-1: #3a5424; --cover-2: #2c4019; --cover-3: #213012; --hm-1: #b6cd95; --hm-2: #6b8e3f; --hm-3: #3a5e1c; } /* PURPLE */ html[data-skin="retro"][data-accent="plum"] { --w98-navy: #5a1f7a; --w98-blue: #8a3fb5; --w98-cap-hi: #a85fcf; --c-coral: #6a2c8f; --c-deep: #5a1f7a; --c-text: #5a1f7a; --accent-soft: #c08fd4; --c-tint: #e3d2ea; --c-tint2: #d6bfe0; --c-line: #5a1f7a; --c-wash: rgba(90,31,122,0.08); --coral-tint: #e3d2ea; --coral-tint2: #d6bfe0; --coral-line: #5a1f7a; --cover-1: #4a2464; --cover-2: #371b4d; --cover-3: #2a143b; --hm-1: #c4a0d6; --hm-2: #8a3fb5; --hm-3: #5a1f7a; } /* DARK-tone variants of the picked accent (lifted, AA on graphite). The accent tints the title bars + small text + active states; the COVERS/number-tiles stay NEUTRAL GRAPHITE (inherited from the dark base block — explicitly held here so the LIGHT accent block's colored covers never leak into the dark tone). The title bar keeps a darker accent tone (a touch deeper than the bright light value) so dark reads correctly. cap-hi follows the accent. */ html[data-skin="retro"][data-theme="dark"][data-accent="teal"] { --w98-navy: #0a4a48; --w98-blue: #126e68; --w98-cap-hi: #2a9d8f; --c-coral: #4fd0c0; --c-deep: #0f766e; --c-text: #5fd6c8; --accent-soft: #7fe0d3; --c-tint: #14302c; --c-tint2: #1c3c37; --c-line: #2a9d8f; --coral-tint: #14302c; --coral-tint2: #1c3c37; --coral-line: #2a9d8f; --cover-1: #3a3a3a; --cover-2: #2e2e2e; --cover-3: #242424; --hm-1: #1e3a37; --hm-2: #2a7a72; --hm-3: #4fd0c0; } html[data-skin="retro"][data-theme="dark"][data-accent="coral"] { --w98-navy: #5a1414; --w98-blue: #8a2828; --w98-cap-hi: #c85a5a; --c-coral: #e98a8a; --c-deep: #a83232; --c-text: #ef9a9a; --accent-soft: #f0a8a8; --c-tint: #3a1c1c; --c-tint2: #4a2424; --c-line: #c85a5a; --coral-tint: #3a1c1c; --coral-tint2: #4a2424; --coral-line: #c85a5a; --cover-1: #3a3a3a; --cover-2: #2e2e2e; --cover-3: #242424; --hm-1: #3a1f1f; --hm-2: #8a3a3a; --hm-3: #e98a8a; } html[data-skin="retro"][data-theme="dark"][data-accent="forest"] { --w98-navy: #2c4a16; --w98-blue: #426e22; --w98-cap-hi: #6b8e23; --c-coral: #a7c468; --c-deep: #55711c; --c-text: #b6cd85; --accent-soft: #c4d99a; --c-tint: #232c14; --c-tint2: #2d381b; --c-line: #6b8e23; --coral-tint: #232c14; --coral-tint2: #2d381b; --coral-line: #6b8e23; --cover-1: #3a3a3a; --cover-2: #2e2e2e; --cover-3: #242424; --hm-1: #29331a; --hm-2: #5e7d2a; --hm-3: #a7c468; } html[data-skin="retro"][data-theme="dark"][data-accent="plum"] { --w98-navy: #3f1657; --w98-blue: #62297f; --w98-cap-hi: #a35bc4; --c-coral: #d08fe6; --c-deep: #8a3fb5; --c-text: #dca3ef; --accent-soft: #e0b6f4; --c-tint: #2a1438; --c-tint2: #371b4d; --c-line: #a35bc4; --coral-tint: #2a1438; --coral-tint2: #371b4d; --coral-line: #a35bc4; --cover-1: #3a3a3a; --cover-2: #2e2e2e; --cover-3: #242424; --hm-1: #2a1838; --hm-2: #6a3a8a; --hm-3: #d08fe6; } /* Themes-QA (AA contrast, 2026-06-02): retro's LIGHT tone leaves the coral TEXT token at the :root #a8472a, which is only 3.21:1 on the #c0c0c0 silver chrome (brand name, account "Sign out") and 4.05:1 on the pink tint (role chip). Repaint coral-text to the Win98 NAVY (#000080) for LIGHT only — AA on silver (8.8:1) + pink, and on-brand (navy is the default retro accent). retro+dark keeps the global dark relighten. The Explore tab-count badge sits on a teal tab bg → white for AA. */ html[data-skin="retro"][data-theme="light"] { --coral-text: #000080; --c-text: #000080; } html[data-skin="retro"] .iax-tab-n { color: #fff; } /* The account-menu hardcodes the :root coral (#a8472a) in its own injected styles (it mounts on the R2 book too, without page CSS) — too low on retro's silver/light chrome. Repaint to AA Win98 colors: maroon for the danger "Sign out", navy for the "Full access" tier name + the "Free" role badge. */ html[data-skin="retro"] .cc-acct-it.danger { color: #800000; } html[data-skin="retro"] .fw-tier-name, html[data-skin="retro"] .cc-acct-role { color: #000080; }