/* libcat reference styles: accessible, desktop-credible, override-friendly. Every component is driven by the --lcat-* tokens below, so an adopter re-themes by re-setting those variables in their own stylesheet (loaded after this one) -- no need to shadow assets/lcat.css or reimplement any chrome (tasks/025). Uses system fonts and CSS grid. The default identity is "library-ish but modern": work titles in a zero-payload system serif (the bookish register), UI chrome in a clean sans, catalog-drawer small caps on facet labels, an index-card double rule under the work heading, and a curator-green accent -- the same ink the cataloging backend renders editorial provenance in. All of it retunes from the tokens; nothing is baked into markup. */ :root { --lcat-fg: #1f2421; /* iron-gall green-black ink */ --lcat-bg: #f7f6f2; /* bone: warm near-white, not cream */ --lcat-accent: #1e6b4e; /* curator green; links, active states (>=4.5:1 on bg) */ --lcat-accent-ink: #14523a; /* darker accent for headings / large text */ --lcat-muted: #5b615d; --lcat-border: #d9d5cb; --lcat-surface: #fff; /* raised cards and the facet panel: index-card white */ --lcat-surface-alt: #edeae2; /* tag chips, subtle fills */ --lcat-radius: 6px; --lcat-shadow: 0 1px 0 rgba(31, 36, 33, 0.07), 0 3px 10px rgba(31, 36, 33, 0.06); --lcat-gap: 2rem; --lcat-maxw: 72rem; /* readable measure, wider than the old minimal 68rem */ /* Type roles: display carries the bookish personality (work titles only); the body stays a modern sans; mono covers identifiers and call numbers. */ --lcat-on-accent: #fff; /* text on accent-filled controls */ --lcat-avail-ok: #1e6b4e; --lcat-avail-hold: #8a5a00; --lcat-avail-none: #a34224; --lcat-display: "Charter", "Iowan Old Style", "Palatino", Georgia, serif; --lcat-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --lcat-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; } /* `hidden` hides only through the UA rule `[hidden] { display: none }`, whose specificity any author `display` on the same element outranks. Every component below that both sets `display` and gets hidden from JS therefore needs this restated -- and twice we restated it per component and once we forgot, leaving the browse paginator on screen and clickable while browse owned the list (tasks/303). State it once, for every element, present and future. `!important` is the point, not a shortcut: the whole failure is that a later, more specific author rule wins. An adopter who wants a hidden element shown should remove the attribute, not outrank this. */ [hidden] { display: none !important; } /* Dark mode: the closed stacks -- the light theme's ink becomes the card surface, bone becomes the text, and the inks brighten to hold AA. Applies automatically from the OS preference, or explicitly via data-lcat-theme="dark"/"light" on (the theme-toggle partial sets and persists it). All pairs AA-verified. */ /* Dark mode: the closed stacks -- the light theme's ink becomes the card surface, bone becomes the text, and the inks brighten to hold AA. Applies automatically from the OS preference, or explicitly via data-lcat-theme="dark"/"light" on (the theme-toggle partial sets and persists it). Values duplicated across the two selectors because a media query and an attribute cannot share one block in plain CSS. */ :root[data-lcat-theme="dark"] { --lcat-fg: #e9e7e0; --lcat-bg: #171b19; --lcat-accent: #6dbd97; --lcat-accent-ink: #8fd0b1; --lcat-muted: #a8ada4; --lcat-border: #3d443f; --lcat-surface: #212724; --lcat-surface-alt: #2a302c; --lcat-shadow: 0 1px 0 rgba(0, 0, 0, 0.35), 0 3px 10px rgba(0, 0, 0, 0.3); --lcat-on-accent: #10261c; --lcat-avail-ok: #6dbd97; --lcat-avail-hold: #d9b96a; --lcat-avail-none: #e09479; color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-lcat-theme="light"]) { --lcat-fg: #e9e7e0; --lcat-bg: #171b19; --lcat-accent: #6dbd97; --lcat-accent-ink: #8fd0b1; --lcat-muted: #a8ada4; --lcat-border: #3d443f; --lcat-surface: #212724; --lcat-surface-alt: #2a302c; --lcat-shadow: 0 1px 0 rgba(0, 0, 0, 0.35), 0 3px 10px rgba(0, 0, 0, 0.3); --lcat-on-accent: #10261c; --lcat-avail-ok: #6dbd97; --lcat-avail-hold: #d9b96a; --lcat-avail-none: #e09479; color-scheme: dark; } } * { box-sizing: border-box; } body { margin: 0; color: var(--lcat-fg); background: var(--lcat-bg); font: 100%/1.5 var(--lcat-sans); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* Underline links by default so in-text links do not rely on color alone (WCAG 1.4.1); chrome links with a non-color affordance (brand, facet rows, tag pills, pagination buttons) opt out below. */ a { color: var(--lcat-accent); text-decoration: underline; text-underline-offset: 0.12em; } a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid var(--lcat-accent); outline-offset: 2px; } .lcat-skip { position: absolute; left: -999px; } .lcat-skip:focus { left: 0.5rem; top: 0.5rem; z-index: 10; background: var(--lcat-bg); padding: 0.5rem 0.75rem; border: 2px solid var(--lcat-accent); } .lcat-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .lcat-header { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; padding: 0.8rem clamp(1rem, 4vw, 2rem); background: var(--lcat-surface); border-bottom: 1px solid var(--lcat-border); } .lcat-brand { display: inline-flex; align-items: center; gap: 0.45em; font-family: var(--lcat-display); font-weight: 700; font-size: 1.25rem; color: var(--lcat-accent-ink); text-decoration: none; } /* The default mark (logo.html, tasks/166) inherits currentColor from the anchor, so it tracks the theme -- including a forced data-lcat-theme -- for free. */ .lcat-logo { height: 1.5em; width: auto; flex: none; } /* Buttons (tasks/120): the module owns both the tokens and these pairings, so the AA contrast of each variant holds in light AND dark mode without per-adopter auditing. --solid and --ghost are made for accent-filled surfaces (a hero); --surface is the neutral chip that flips with the theme. Works on and