/* ============================================================================ LibraryOne Design System Single stylesheet for every LibraryOne web property. Derived from the LibraryOne Brand Styleguide (8 Apr 2026). USAGE <- editorial (the default) needs no attribute <- or opt into an alternate Everything below the THEMES block is theme-agnostic: components read semantic tokens (--l1-action, --l1-surface, --l1-radius ...), never raw brand colours. Swapping the theme attribute restyles the whole app and changes no markup. ========================================================================= */ /* --------------------------------------------------------------------------- 1. TYPEFACES Manrope - primary. All UI, body, labels, tables. Cormorant Garamond - secondary/display. Page titles only. Both are on Google Fonts and free for any use, so there is no licence to buy, no per-pageview tier, and nothing to self-host. The styleguide's secondary face is IvyPresto, which is licensed and served only from a vendor CDN. It was deliberately dropped: the CDN dependency fails silently on networks that cannot reach it (the TS360 Plus services run with public network access disabled) and never works inside a sandboxed embed. Cormorant is the closest free match by structure, not just by feel - IvyPresto is drawn after the 16th-century punchcutter Hendrik van den Keere, so its skeleton is old-style/Garalde (calligraphic stress, organic curves, bracketed serifs) rendered at high contrast, NOT a Didone. Cormorant is Garamond-derived and shares those bones; a Bodoni would not. ------------------------------------------------------------------------ */ @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Cormorant+Garamond:wght@400;500;600&display=swap"); /* --------------------------------------------------------------------------- 2. BRAND CONSTANTS - identical in every theme, never overridden ------------------------------------------------------------------------ */ :root { /* Brand palette - PMS references from the styleguide */ --l1-navy: #1B365D; /* PMS 534 C */ --l1-orange: #F28C14; /* PMS 144 C */ --l1-cyan: #00B5E2; /* PMS 306 C */ --l1-blue: #0094D5; /* PMS 3538 C */ --l1-slate: #326295; /* PMS 653 C */ --l1-mist: #E5E1E6; /* PMS 663 C */ /* Tints - 90 / 75 / 50 / 25% */ --l1-navy-90: #35507A; --l1-navy-75: #5C7296; --l1-navy-50: #8D9BB4; --l1-navy-25: #C0CFE0; --l1-orange-90: #F59C34; --l1-orange-75: #F8B96B; --l1-orange-50: #FBD9AF; --l1-orange-25: #FDEBD2; --l1-cyan-90: #2FC1E7; --l1-cyan-75: #73D5EF; --l1-cyan-50: #B6E9F7; --l1-cyan-25: #E4F4FC; --l1-slate-90: #517AA6; --l1-slate-75: #85A1C1; --l1-slate-50: #C0CFE0; /* Status - derived to sit with the brand, not taken from it */ --l1-danger: #B4341E; --l1-warning: #8A4B00; --l1-success: #1E6F52; /* Type */ --l1-font: "Manrope", ui-sans-serif, "Segoe UI", Arial, sans-serif; --l1-font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif; --l1-font-mono: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace; /* Spacing scale */ --l1-s1: 4px; --l1-s2: 8px; --l1-s3: 12px; --l1-s4: 16px; --l1-s5: 24px; --l1-s6: 32px; --l1-s7: 48px; --l1-s8: 64px; /* Logo assets. Point these at wherever you host the PNGs. Both files are solid black on transparent and are recoloured through a CSS mask, so one asset serves every colourway. */ --l1-logo-mark: url("/libraryone-mark.png"); --l1-logo-text: url("/libraryone-text.png"); } /* --------------------------------------------------------------------------- 3. THEMES - editorial is the default; utility and signal are alternates. ------------------------------------------------------------------------ */ /* -- EDITORIAL - THE LIBRARYONE DEFAULT ------------------------------------- Navy on warm paper, serif headings, orange as a hairline accent only. Chosen 12 Sep 2026. Applied at :root, so it needs no theme attribute - with nothing on it is already correct. The two alternates below are kept for reference and for surfaces that genuinely need them. */ :root, [data-l1-theme="editorial"] { --l1-surface: #FAF9F7; --l1-raised: #FFFFFF; --l1-sunken: #F2F0EC; --l1-border: #E5E1E6; --l1-border-firm: var(--l1-navy); --l1-ink: var(--l1-navy); --l1-ink-muted: var(--l1-slate); --l1-ink-faint: var(--l1-navy-50); --l1-on-action: #FFFFFF; --l1-action: var(--l1-navy); --l1-action-hover: #10243F; --l1-accent: var(--l1-orange); --l1-link: var(--l1-navy); --l1-focus: var(--l1-orange-50); --l1-radius: 4px; --l1-radius-sm: 4px; --l1-control-h: 44px; --l1-control-h-sm: 34px; --l1-row-h: 48px; --l1-shadow: 0 1px 2px rgba(27, 54, 93, .06); --l1-heading-font: var(--l1-font-display); /* 500, not 400: Cormorant's hairlines thin out badly at 400 on Windows. Bump to 600 if titles still look too light on your displays. */ --l1-heading-weight: 500; } /* -- ALTERNATE - UTILITY ----------------------------------------------------- Manrope only, compact controls, orange owns the single primary action. Efficient and calm; built for long tables. Least visually distinctive. */ [data-l1-theme="utility"] { --l1-surface: #F7F8FA; --l1-raised: #FFFFFF; --l1-sunken: #F0F2F6; --l1-border: #D5DCE6; --l1-border-firm: var(--l1-blue); --l1-ink: var(--l1-navy); --l1-ink-muted: var(--l1-slate); --l1-ink-faint: #A9B3C2; --l1-on-action: #FFFFFF; --l1-action: var(--l1-orange); --l1-action-hover: #D97B06; --l1-accent: var(--l1-orange); --l1-link: var(--l1-blue); --l1-focus: var(--l1-cyan-50); --l1-radius: 6px; --l1-radius-sm: 5px; --l1-control-h: 36px; --l1-control-h-sm: 28px; --l1-row-h: 36px; --l1-shadow: 0 1px 2px rgba(27, 54, 93, .05); --l1-heading-font: var(--l1-font); --l1-heading-weight: 800; } /* -- ALTERNATE - SIGNAL ------------------------------------------------------ Navy as canvas. Cyan carries everything interactive; orange is rationed to one primary action per screen so it always means "do this". Strong on dashboards, hard on long reading and on print. */ [data-l1-theme="signal"] { --l1-surface: #10243F; --l1-raised: #16294A; --l1-sunken: #0B1B31; --l1-border: #2F5480; --l1-border-firm: var(--l1-cyan); --l1-ink: #E8EDF4; --l1-ink-muted: #A8BDD6; --l1-ink-faint: #7E97B5; --l1-on-action: #10243F; --l1-action: var(--l1-orange); --l1-action-hover: #FFA33C; --l1-accent: var(--l1-orange); --l1-link: var(--l1-cyan); --l1-focus: var(--l1-cyan); --l1-radius: 2px; --l1-radius-sm: 2px; --l1-control-h: 40px; --l1-control-h-sm: 30px; --l1-row-h: 38px; --l1-shadow: none; --l1-heading-font: var(--l1-font); --l1-heading-weight: 800; --l1-danger: #E8705C; --l1-warning: #FBB040; --l1-success: #4CC79E; } /* --------------------------------------------------------------------------- 4. BASE ------------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--l1-font); font-size: 14px; line-height: 1.6; color: var(--l1-ink); background: var(--l1-surface); -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--l1-heading-font); font-weight: var(--l1-heading-weight); letter-spacing: -0.01em; margin: 0 0 var(--l1-s3); text-wrap: balance; } h1 { font-size: 34px; line-height: 1.18; } h2 { font-size: 20px; line-height: 1.4; } h3 { font-size: 16px; line-height: 1.45; } p { margin: 0 0 var(--l1-s4); text-wrap: pretty; } a { color: var(--l1-link); text-decoration: none; } a:hover { text-decoration: underline; } /* Section label - the small uppercase rubric used above groups */ .l1-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--l1-ink-muted); } /* Any figure the eye has to compare down a column */ .l1-num { font-variant-numeric: tabular-nums; } /* --------------------------------------------------------------------------- 5. LOGO One asset, any colourway, via mask. Set a height; width follows. Modifiers: .l1-logo--onnavy .l1-logo--onorange .l1-logo--mono ------------------------------------------------------------------------ */ .l1-logo { display: inline-flex; align-items: center; gap: 0.42em; height: 32px; /* clearspace: the styleguide specifies the width of the book mark */ padding: 0 0.66em; text-decoration: none; } .l1-logo-mark, .l1-logo-text { display: block; height: 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .l1-logo-mark { aspect-ratio: 137 / 206; -webkit-mask-image: var(--l1-logo-mark); mask-image: var(--l1-logo-mark); background-color: var(--l1-orange); } .l1-logo-text { aspect-ratio: 771 / 206; -webkit-mask-image: var(--l1-logo-text); mask-image: var(--l1-logo-text); background-color: var(--l1-navy); } /* Single-colour applications from the styleguide */ .l1-logo--onnavy .l1-logo-mark, .l1-logo--onnavy .l1-logo-text { background-color: var(--l1-orange); } .l1-logo--onorange .l1-logo-mark, .l1-logo--onorange .l1-logo-text { background-color: var(--l1-navy); } .l1-logo--mono .l1-logo-mark, .l1-logo--mono .l1-logo-text { background-color: currentColor; } /* Dark themes need the wordmark to lift off the canvas */ [data-l1-theme="signal"] .l1-logo-text { background-color: #FFFFFF; } /* --------------------------------------------------------------------------- 6. BUTTONS Variants: --primary --secondary --ghost --danger Sizes: (default) --sm --lg ------------------------------------------------------------------------ */ .l1-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--l1-s2); height: var(--l1-control-h); padding: 0 var(--l1-s4); border: 1px solid transparent; border-radius: var(--l1-radius); font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; background: none; color: inherit; transition: background-color .12s ease, border-color .12s ease, color .12s ease; } .l1-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--l1-focus); } .l1-btn:disabled { cursor: not-allowed; opacity: .55; } .l1-btn--primary { background: var(--l1-action); color: var(--l1-on-action); } .l1-btn--primary:hover:not(:disabled) { background: var(--l1-action-hover); } .l1-btn--secondary { background: var(--l1-raised); color: var(--l1-ink); border-color: var(--l1-border); } .l1-btn--secondary:hover:not(:disabled) { border-color: var(--l1-ink-muted); } .l1-btn--ghost { color: var(--l1-ink-muted); padding: 0 var(--l1-s3); } .l1-btn--ghost:hover:not(:disabled) { color: var(--l1-ink); background: var(--l1-sunken); } .l1-btn--danger { background: var(--l1-raised); color: var(--l1-danger); border-color: currentColor; } .l1-btn--danger:hover:not(:disabled) { background: var(--l1-danger); color: #FFFFFF; } .l1-btn--sm { height: var(--l1-control-h-sm); font-size: 12px; padding: 0 var(--l1-s3); border-radius: var(--l1-radius-sm); } .l1-btn--lg { height: calc(var(--l1-control-h) + 8px); font-size: 14px; padding: 0 var(--l1-s5); } /* Editorial wants a little more air inside its buttons */ [data-l1-theme="editorial"] .l1-btn { font-size: 14px; font-weight: 600; padding: 0 var(--l1-s5); } /* --------------------------------------------------------------------------- 7. FORM CONTROLS ------------------------------------------------------------------------ */ .l1-input, .l1-select { height: var(--l1-control-h); width: 100%; padding: 0 var(--l1-s3); font-family: inherit; font-size: 13px; color: var(--l1-ink); background: var(--l1-raised); border: 1px solid var(--l1-border); border-radius: var(--l1-radius); } .l1-input::placeholder { color: var(--l1-ink-faint); } .l1-input:focus, .l1-select:focus { outline: none; border-color: var(--l1-border-firm); box-shadow: 0 0 0 3px var(--l1-focus); } .l1-label { display: block; margin-bottom: var(--l1-s1); font-size: 12px; font-weight: 600; color: var(--l1-ink-muted); } /* --------------------------------------------------------------------------- 8. CHIPS & BADGES A chip is a removable filter; a badge is read-only status. ------------------------------------------------------------------------ */ .l1-chip, .l1-badge { display: inline-flex; align-items: center; gap: var(--l1-s1); padding: 4px 10px; border-radius: var(--l1-radius-sm); font-size: 12px; font-weight: 600; line-height: 1.4; } .l1-chip { background: var(--l1-raised); color: var(--l1-ink-muted); border: 1px solid var(--l1-border); } .l1-chip--active { background: var(--l1-cyan-25); color: #0B5C86; border-color: var(--l1-cyan-50); } .l1-badge { font-weight: 700; } .l1-badge--warning { background: var(--l1-orange-25); color: var(--l1-warning); } .l1-badge--danger { background: #FBE3DE; color: var(--l1-danger); } .l1-badge--neutral { background: var(--l1-sunken); color: var(--l1-ink-muted); } [data-l1-theme="signal"] .l1-chip--active { background: #063E52; color: #6FDCF7; border-color: #00728F; } [data-l1-theme="signal"] .l1-badge--warning { background: #4A2D05; } [data-l1-theme="signal"] .l1-badge--danger { background: #4A1B14; } /* --------------------------------------------------------------------------- 9. SURFACES ------------------------------------------------------------------------ */ .l1-card { background: var(--l1-raised); border: 1px solid var(--l1-border); border-radius: var(--l1-radius); padding: var(--l1-s5); box-shadow: var(--l1-shadow); } /* --------------------------------------------------------------------------- 10. TABLE Dense by default; row height comes from the theme. ------------------------------------------------------------------------ */ .l1-table { width: 100%; border-collapse: collapse; background: var(--l1-raised); font-size: 13px; } .l1-table th { height: 32px; padding: 0 var(--l1-s3); text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--l1-ink-muted); background: var(--l1-sunken); border-bottom: 1px solid var(--l1-border); position: sticky; top: 0; } .l1-table td { height: var(--l1-row-h); padding: 0 var(--l1-s3); border-bottom: 1px solid var(--l1-sunken); } .l1-table tbody tr:hover td { background: var(--l1-sunken); } /* --------------------------------------------------------------------------- 11. ACCESSIBILITY & MOTION ------------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* Touch targets never drop below 44px on coarse pointers, whatever the theme */ @media (pointer: coarse) { .l1-btn, .l1-input, .l1-select { min-height: 44px; } } /* --------------------------------------------------------------------------- 11. CHART SERIES One categorical ramp for every LibraryOne report, so the same measure is the same colour on every screen. Assign the slots IN ORDER and never cycle them: colour follows the entity, so a filter that drops a series must not repaint the survivors. Only three slots exist, and that is deliberate. These values were chosen by running the palette through a colour-vision-deficiency check against each theme's own surface, and three is the most that clears it in the LibraryOne hues while every series is on screen at once: editorial worst pair dE 13.4 (deutan) - clears the >= 8 target outright signal worst pair dE 7.5 (deutan) - in the 6-8 floor band, so a chart on the signal theme MUST carry direct labels, not colour alone Beyond three simultaneous series, do not invent a fourth hue: fold the rest into "Other", split into small multiples, or label directly. Status colours (--l1-danger / --l1-warning / --l1-success) are reserved for state and are never a series colour - if red appears in a chart it must mean something is wrong. ------------------------------------------------------------------------ */ :root, [data-l1-theme="editorial"], [data-l1-theme="utility"] { --l1-chart-1: #0094D5; /* brand blue, PMS 3538 C */ --l1-chart-2: #C2670A; /* brand orange darkened to clear 3:1 on paper */ --l1-chart-3: #9A3E86; --l1-chart-grid: var(--l1-border); --l1-chart-axis: var(--l1-ink-faint); } [data-l1-theme="signal"] { --l1-chart-1: #2492CC; --l1-chart-2: #CE8021; --l1-chart-3: #BE4F9E; --l1-chart-grid: var(--l1-border); --l1-chart-axis: var(--l1-ink-faint); }