/* Applicaa KB — public customer-facing theme. A faithful, self-contained port of the content repo's Astro Starlight theme (site/src/styles/brand.css + the Header/Sidebar/Footer/PageTitle components) so a visitor can't tell the customer KB moved into this Rails app. This is the CUSTOMER site's OWN navy "Starlight" theme — NOT the internal Admissions+ Design System. NO Tailwind, NO `tw-*`/DS classes, NO @import: Propshaft serves this file as-is. The :root token block below is ported VERBATIM from brand.css; everything else is rebuilt against a clean semantic DOM (kb-* class names) rather than Starlight's hashed `.astro-*`/`.sl-*` internals. The article body keeps BOTH `lexxy-content` (gem stylesheet — tables/code/ figures/list spacing) and `sl-markdown-content` (our prose rules below: link colour, heading font, the desktop reading measure + image break-out). */ /* ────────────────────────────────────────────────────────────────────────── Design tokens — ported VERBATIM from brand.css `:root{…}`. ────────────────────────────────────────────────────────────────────────── */ :root { /* ---------- Admissions+ DS tokens (subset used by the KB) ---------- */ --color-primary-100: #eef2fb; --color-primary-200: #d6def0; --color-primary-300: #a7b4dc; --color-primary-400: #546cbd; --color-primary-500: #263c91; /* navy — main brand */ --color-primary-600: #1b2d7c; --color-primary-700: #172458; --color-primary-900: #0e1637; --color-secondary-500: #ec634b; /* coral — accent */ --color-blue-100: #eaf1fe; --color-blue-500: #2563eb; /* links / info — darkened from #3478f7 for WCAG-AA (5.17:1 on white, 4.60:1 on page bg) */ --color-blue-700: #1d4ed8; --color-neutral-0: #ffffff; --color-neutral-100: #f3f4f7; --color-neutral-200: #e4e7ec; --color-neutral-300: #d8e2e7; --color-neutral-400: #a6aebe; --color-neutral-500: #818fa7; --color-neutral-600: #657490; --color-neutral-700: #505b72; --color-neutral-800: #3b4354; --color-neutral-900: #262b36; /* Blue-tinted transparency — ghost buttons, row/sidebar hovers */ --color-neutral-translucent-100: rgba(37, 58, 106, 0.08); --color-neutral-translucent-200: rgba(37, 58, 106, 0.12); --color-background: #eef2f8; /* page bg — NEVER plain white */ /* Text hierarchy + surfaces */ --fg-1: var(--color-neutral-900); --fg-2: var(--color-neutral-800); --fg-3: var(--color-neutral-600); --fg-4: var(--color-neutral-500); --surface-sunk: var(--color-neutral-100); --border-subtle: var(--color-neutral-200); --border-strong: var(--color-neutral-300); /* Centered content container width (hero inner + doc body + home grid all align to this, so the layout reads as one boxed cluster on the page bg). */ --kb-container: 75rem; --kb-sidebar-w: 16.5rem; /* left nav column (desktop) — trimmed from Starlight's 18.75rem so the card breathes */ --kb-col-gap: 2rem; /* column gap: sidebar ↔ content card (desktop) */ /* Radius + elevation (navy-tinted shadows) */ --radius: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --shadow-xs: 0 1px 0 rgba(23, 36, 88, 0.04); --shadow-sm: 0 1px 2px rgba(23, 36, 88, 0.08), 0 1px 1px rgba(23, 36, 88, 0.04); --shadow-md: 0 4px 12px rgba(23, 36, 88, 0.10); --shadow-lg: 0 12px 32px rgba(23, 36, 88, 0.18); /* Type — Arial everywhere (DS body font + chosen heading fallback). */ --font-sans: Arial, 'Helvetica Neue', Helvetica, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-heading: var(--font-sans); /* ---------- Legacy --kb-* aliases (kept so the markup inherits the DS). ---------- */ --kb-navy: var(--color-primary-700); /* hero gradient anchor */ --kb-navy-mid: var(--color-primary-500); --kb-link: var(--color-blue-500); --kb-text: var(--fg-2); --kb-border: var(--border-subtle); --kb-active-bg: var(--color-neutral-translucent-100); } /* ────────────────────────────────────────────────────────────────────────── Base / reset ────────────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--color-background); color: var(--fg-2); font-family: var(--font-sans); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; } /* Visually-hidden but accessible (page

on the splash, field labels). */ .kb-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ────────────────────────────────────────────────────────────────────────── Hero — full-width navy gradient band; inner centres to the container. ────────────────────────────────────────────────────────────────────────── */ .kb-hero { background: linear-gradient(120deg, var(--color-primary-700), var(--color-primary-500)); padding-block: 2.75rem 3.25rem; } .kb-hero--home { padding-bottom: 3.5rem; } .kb-hero__inner { max-width: var(--kb-container); margin: 0 auto; padding-inline: clamp(1rem, 4vw, 1.5rem); display: flex; flex-direction: column; gap: 1.25rem; } .kb-hero__logo-link { align-self: flex-start; display: inline-block; line-height: 0; } .kb-hero__logo { height: 1.75rem; width: auto; display: block; } .kb-hero__greeting { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.75rem, 4vw, 2.625rem); line-height: 1.05; letter-spacing: -0.01em; color: #fff; margin: 0; } .kb-hero__sub { font-size: 1.125rem; line-height: 1.5; color: rgba(255, 255, 255, 0.82); margin: -0.5rem 0 0; max-width: 60ch; } /* Search band — big white DS field with a navy magnifier. */ .kb-hero__search { position: relative; width: 100%; display: block; } .kb-hero__search-input { width: 100%; height: 3.25rem; background: #fff; color: var(--fg-1); border: none; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 0 3.25rem 0 1.25rem; font: 1rem var(--font-sans); } .kb-hero--home .kb-hero__search-input { height: 3.5rem; } .kb-hero__search-input::placeholder { color: var(--fg-3); opacity: 1; } .kb-hero__search-input:focus-visible { outline: 2px solid var(--color-primary-300); outline-offset: 2px; } .kb-hero__search-btn { position: absolute; inset-block: 0; inset-inline-end: 0; width: 3rem; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--color-primary-500); cursor: pointer; } .kb-hero__search-btn svg { width: 20px; height: 20px; } /* ────────────────────────────────────────────────────────────────────────── Breadcrumb band — full-width, page-bg strip below the hero. ────────────────────────────────────────────────────────────────────────── */ .kb-crumb-band { background: var(--color-background); } .kb-breadcrumb { max-width: var(--kb-container); margin: 0 auto; padding: 1.15rem clamp(1rem, 4vw, 1.5rem) 0.2rem; } .kb-breadcrumb__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.1rem; font-size: 0.875rem; line-height: 1; } .kb-breadcrumb__item { display: inline-flex; align-items: center; gap: 0.1rem; } .kb-breadcrumb__link { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.5rem; margin-block: -0.3rem; border-radius: var(--radius); color: var(--color-primary-600); font-weight: 500; text-decoration: none; transition: background-color 140ms ease, color 140ms ease; } .kb-breadcrumb__link:hover { background: var(--color-neutral-translucent-100); color: var(--color-primary-700); } .kb-breadcrumb__link:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 1px; background: var(--color-neutral-translucent-100); } .kb-breadcrumb__home { width: 15px; height: 15px; flex: none; margin-top: -1px; } .kb-breadcrumb__sep { width: 14px; height: 14px; flex: none; color: var(--color-neutral-400); } .kb-breadcrumb__current { padding: 0.3rem 0.15rem; color: var(--fg-1); font-weight: 600; } /* ────────────────────────────────────────────────────────────────────────── Page shells — splash (home, no sidebar) vs doc (section/show, sidebar + card) ────────────────────────────────────────────────────────────────────────── */ .kb-page--splash { display: block; } /* Mobile-first doc shell: single column; the card + sidebar stack. */ .kb-page--doc { padding: 0 clamp(0.85rem, 4vw, 1.25rem); } /* Content card — white elevated surface on the navy-tinted page (doc pages only; the splash main stays flat so the home cards sit straight on the page bg). */ .kb-page--doc .kb-main { background: var(--color-neutral-0); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: clip; margin: 1rem 0 1.5rem; padding: 1.5rem 1.25rem 2rem; } /* Mobile sidebar drawer (checkbox hack — no JS). */ .kb-nav-toggle-cb { display: none; } /* state holder only */ .kb-nav-toggle { display: none; /* shown on mobile, hidden on desktop */ align-items: center; gap: 0.5rem; margin: 0.85rem 0 0; padding: 0.55rem 0.9rem; background: var(--color-neutral-0); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); color: var(--color-primary-600); font: 700 0.9rem var(--font-sans); cursor: pointer; user-select: none; } .kb-nav-toggle svg { width: 18px; height: 18px; } @media (max-width: 49.99rem) { .kb-nav-toggle { display: inline-flex; } .kb-sidebar { display: none; margin-top: 0.75rem; } .kb-nav-toggle-cb:checked ~ .kb-sidebar { display: block; } } /* Desktop: boxed two-column cluster centred to the container, aligned to the hero/breadcrumb. The toggle disappears; the sidebar is always visible. */ @media (min-width: 50rem) { .kb-page--doc { display: flex; align-items: flex-start; column-gap: var(--kb-col-gap); max-width: var(--kb-container); margin: 0 auto; padding: 2.25rem clamp(1rem, 4vw, 1.5rem) 0; } .kb-nav-toggle { display: none; } .kb-sidebar { display: block; flex: 0 0 var(--kb-sidebar-w); width: var(--kb-sidebar-w); } .kb-page--doc .kb-main { flex: 1 1 auto; min-width: 0; margin: 0 0 1.5rem; padding: 2rem clamp(1.5rem, 3vw, 2.5rem) 2.5rem; } } /* ────────────────────────────────────────────────────────────────────────── Sidebar nav — collapsible
groups; title links to the section landing ────────────────────────────────────────────────────────────────────────── */ .kb-sidebar { font-size: 0.875rem; } .kb-nav-group + .kb-nav-group { margin-top: 0.75rem; } .kb-nav-summary { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.2rem 0.5rem; line-height: 1.4; cursor: pointer; list-style: none; } .kb-nav-summary::-webkit-details-marker { display: none; } .kb-nav-group-link { display: flex; flex: 1 1 auto; min-width: 0; text-decoration: none; border-radius: var(--radius); } .kb-nav-group-title { font-size: 0.875rem; font-weight: 700; color: var(--color-blue-500); } .kb-nav-caret { width: 1.1rem; height: 1.1rem; flex: none; color: var(--color-neutral-400); transition: transform 0.2s ease-in-out; } .kb-nav-group[open] > .kb-nav-summary .kb-nav-caret { transform: rotate(90deg); } .kb-nav-list { list-style: none; margin: 0.15rem 0 0; padding: 0; } .kb-nav-list li + li { margin-top: 0.1rem; } .kb-nav-link { display: block; padding: 0.3rem 0.5rem; border-radius: var(--radius); color: var(--fg-3); text-decoration: none; line-height: 1.4; } .kb-nav-link:hover { color: var(--color-primary-500); } .kb-nav-link[aria-current="page"] { background: var(--kb-active-bg); color: var(--color-primary-600); font-weight: 700; border-radius: var(--radius); } /* Subsection block — plain-text label (no landing page → not a link) + its list. */ .kb-nav-sub { margin-top: 0.45rem; padding-inline-start: 0.5rem; border-inline-start: 1px solid var(--border-subtle); } .kb-nav-sublabel { display: block; padding: 0.2rem 0.4rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-4); } /* Active top-level group → blue "you are here" panel. */ .kb-nav-group--active { background: var(--color-blue-100); border: 1px solid var(--color-primary-200); border-radius: var(--radius-md); padding: 0.25rem 0.75rem 0.5rem; } .kb-nav-group--active > .kb-nav-summary .kb-nav-group-title { color: var(--color-primary-600); } /* ────────────────────────────────────────────────────────────────────────── Home — category card grid (ported VERBATIM from brand.css) ────────────────────────────────────────────────────────────────────────── */ .kb-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; max-width: var(--kb-container, 75rem); margin: 0 auto; padding: 2.5rem clamp(1rem, 4vw, 1.5rem) 4rem; } .kb-cat-card { display: flex; flex-direction: column; gap: 0.625rem; padding: 1.5rem; text-decoration: none; background: var(--color-neutral-0); border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: box-shadow 0.15s, transform 0.15s; } .kb-cat-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); } @media (prefers-reduced-motion: reduce) { .kb-cat-card { transition: none; } .kb-cat-card:hover { transform: none; } } .kb-cat-card__title { font-family: var(--font-heading); font-size: 1.125rem; line-height: 1.25; font-weight: 700; color: var(--fg-1); } .kb-cat-card__more { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.875rem; border-radius: var(--radius-md); background: var(--color-neutral-translucent-200); color: var(--color-primary-500); font-weight: 700; font-size: 0.875rem; } .kb-cat-card__arrow { width: 13px; height: 13px; flex: none; } /* ────────────────────────────────────────────────────────────────────────── Section index — page title + a category list of articles ────────────────────────────────────────────────────────────────────────── */ .kb-page-title { font-family: var(--font-heading); font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 600; color: var(--fg-1); letter-spacing: -0.01em; line-height: 1.15; margin: 0 0 1.25rem; } .kb-doc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .kb-doc-list__item { margin: 0; padding: 1rem 0; border-bottom: 1px solid var(--border-subtle); } .kb-doc-list__item:first-child { padding-top: 0; } .kb-doc-list__item:last-child { border-bottom: 0; padding-bottom: 0; } .kb-doc-list__link { color: var(--color-blue-500); font-weight: 700; font-size: 1.05rem; text-decoration: none; } .kb-doc-list__link:hover { text-decoration: underline; } .kb-doc-list__desc { color: var(--fg-3); font-size: 0.9rem; line-height: 1.5; margin: 0.3rem 0 0; } /* Grouped category list — articles grouped under optional subsection headings, each a bulleted blue link followed by its audience tags. */ .kb-cat-body { border-top: 1px solid var(--border-subtle); padding-top: 1.5rem; } .kb-cat-group + .kb-cat-group { margin-top: 1.875rem; } .kb-cat-group__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.25rem, 2.5vw, 1.375rem); line-height: 1.2; color: var(--fg-1); margin: 0 0 0.875rem; } .kb-cat-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; } .kb-cat-links__item { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .kb-cat-links__item::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 9999px; background: var(--color-neutral-400); } .kb-cat-links__link { color: var(--color-blue-500); font-size: 1rem; line-height: 1.45; text-decoration: none; } .kb-cat-links__link:hover { text-decoration: underline; } /* ────────────────────────────────────────────────────────────────────────── Audience tag pills — shared by the article header, category + related lists. ────────────────────────────────────────────────────────────────────────── */ .kb-tags { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; vertical-align: middle; } .kb-tag { display: inline-flex; align-items: center; font: 600 11px/1 var(--font-sans); letter-spacing: 0.03em; padding: 4px 11px; border-radius: 9999px; border: 1px solid transparent; white-space: nowrap; } /* Core — navy primary tint */ .kb-tag--all { background: var(--color-primary-100); color: var(--color-primary-700); border-color: var(--color-primary-200); } /* State — link blue */ .kb-tag--state { background: var(--color-blue-100); color: var(--color-blue-700); border-color: rgba(52, 120, 247, 0.28); } /* Independent — orange tint */ .kb-tag--independent { background: rgba(249, 115, 22, 0.13); color: #9a3412; border-color: rgba(249, 115, 22, 0.32); } /* Bursary16 / Bursary Plus — green tint */ .kb-tag--bursary16, .kb-tag--bursary-plus { background: rgba(34, 197, 94, 0.13); color: #15803d; border-color: rgba(34, 197, 94, 0.30); } /* ────────────────────────────────────────────────────────────────────────── Article — title + prose. lexxy-content.css handles tables/code/figures/list spacing; these rules add the Starlight prose layer. ────────────────────────────────────────────────────────────────────────── */ .kb-article-title { font-family: var(--font-heading); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 600; color: var(--fg-1); letter-spacing: -0.01em; line-height: 1.15; margin: 0 0 1.25rem; } /* Tag pills under the title, then a rule introducing the body. */ .kb-article-tags { margin: 0 0 1.5rem; } .kb-article-body { border-top: 1px solid var(--border-subtle); padding-top: 1.5rem; } .sl-markdown-content :is(h1, h2, h3, h4, h5, h6) { font-family: var(--font-heading); color: var(--fg-1); letter-spacing: -0.01em; } .sl-markdown-content a { color: var(--color-blue-500); text-decoration: none; } .sl-markdown-content a:hover { text-decoration: underline; } /* Desktop: cap prose at a readable measure but let images break out to the full card width (KB articles lean on wide UI screenshots). */ @media (min-width: 50rem) { .kb-main .sl-markdown-content > :where(p, ul, ol, h1, h2, h3, h4, h5, h6, blockquote, dl, details) { max-width: 75ch; margin-inline-end: auto; } .kb-main .sl-markdown-content > p:has(img) { max-width: none; } } /* ────────────────────────────────────────────────────────────────────────── Previous / next article cards (2-up grid, stacks on mobile) ────────────────────────────────────────────────────────────────────────── */ .kb-adjacent { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-block-start: 2.5rem; } .kb-adjacent__card { display: block; background: var(--color-neutral-0); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); padding: 1.125rem 1.25rem; text-decoration: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .kb-adjacent__card:hover { border-color: var(--color-primary-300); box-shadow: var(--shadow-sm); } .kb-adjacent__card--next { text-align: right; } .kb-adjacent__label { display: block; font-size: 0.8125rem; color: var(--fg-4); margin-bottom: 0.375rem; } .kb-adjacent__title { display: flex; align-items: center; gap: 0.625rem; color: var(--color-primary-600); font-family: var(--font-heading); font-weight: 700; font-size: 1rem; line-height: 1.3; } .kb-adjacent__card--next .kb-adjacent__title { justify-content: flex-end; } .kb-adjacent__arrow { width: 16px; height: 16px; flex: none; } .kb-adjacent__spacer { display: block; } @media (max-width: 37.49rem) { .kb-adjacent { grid-template-columns: 1fr; } .kb-adjacent__spacer { display: none; } } /* ────────────────────────────────────────────────────────────────────────── "Was this article helpful?" widget (ported from Footer.astro / brand.css) ────────────────────────────────────────────────────────────────────────── */ .kb-feedback { margin-block-start: 3rem; padding-block-start: 1.5rem; border-top: 1px solid var(--border-subtle); } .kb-feedback__q { font-weight: 700; margin: 0 0 0.75rem; color: var(--fg-1); } .kb-feedback__thanks { display: flex; align-items: center; gap: 0.625rem; margin: 0; color: var(--color-primary-600); font-weight: 600; } .kb-feedback__icon { width: 18px; height: 18px; flex: none; } .kb-feedback__buttons { display: flex; gap: 0.5rem; } .kb-feedback__btn { padding: 0.5rem 1.25rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--color-neutral-0); color: var(--fg-2); cursor: pointer; font: 700 1rem var(--font-sans); } .kb-feedback__btn:hover { border-color: var(--color-primary-300); color: var(--color-primary-600); } /* ────────────────────────────────────────────────────────────────────────── Related articles — a rule-topped list of blue links, each with its tags ────────────────────────────────────────────────────────────────────────── */ .kb-related { margin-block-start: 1.75rem; padding-block-start: 1.5rem; border-top: 1px solid var(--border-subtle); } .kb-related__title { font-family: var(--font-heading); font-weight: 700; font-size: 1.125rem; line-height: 1.2; color: var(--fg-1); margin: 0 0 0.875rem; } .kb-related__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; } .kb-related__item { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .kb-related__link { color: var(--color-blue-500); font-size: 1rem; line-height: 1.45; text-decoration: none; } .kb-related__link:hover { text-decoration: underline; } /* ────────────────────────────────────────────────────────────────────────── 404 — big code, message, and a navy button back to the KB home ────────────────────────────────────────────────────────────────────────── */ .kb-404 { max-width: var(--kb-container); margin: 0 auto; padding: 5rem clamp(1rem, 4vw, 1.5rem) 6rem; } .kb-404__code { font-family: var(--font-heading); font-weight: 900; font-size: clamp(4.5rem, 12vw, 7.5rem); line-height: 1; letter-spacing: -0.02em; color: var(--color-primary-500); margin: 0 0 1.25rem; } .kb-404__message { font-size: 1.25rem; line-height: 1.5; color: var(--fg-3); margin: 0 0 1.75rem; } .kb-404__btn { display: inline-flex; align-items: center; gap: 0.625rem; background: var(--color-primary-500); color: #fff; font-weight: 700; font-size: 0.9375rem; padding: 0.7rem 1.15rem; border-radius: var(--radius-md); text-decoration: none; transition: background-color 0.15s ease; } .kb-404__btn:hover { background: var(--color-primary-600); } .kb-404__btn-arrow { width: 15px; height: 15px; flex: none; } /* ────────────────────────────────────────────────────────────────────────── Search results — 2-col layout: facet panel left, result list right ────────────────────────────────────────────────────────────────────────── */ /* Mobile-first: single column; facets stack above results. */ .kb-search-layout { display: flex; flex-direction: column; gap: 1.5rem; } .kb-search-results { min-width: 0; } @media (min-width: 50rem) { .kb-search-layout { flex-direction: row; align-items: flex-start; gap: 1.75rem; } .kb-facets { flex: 0 0 14rem; width: 14rem; } .kb-search-results { flex: 1 1 auto; } } /* Facet panel — sunk-surface card (matches design left column). */ .kb-facets { background: var(--surface-sunk); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 1rem 1.125rem 1.125rem; } .kb-facets__group + .kb-facets__group { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border-subtle); } .kb-facets__heading { font-weight: 700; font-size: 0.9375rem; color: var(--fg-1); margin: 0 0 0.625rem; } .kb-facets__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .kb-facets__item { margin: 0; } .kb-facets__label { display: flex; align-items: center; gap: 0.625rem; padding: 0.4375rem 0; font-size: 0.875rem; color: var(--fg-2); cursor: pointer; border-bottom: 1px solid var(--border-subtle); } .kb-facets__list li:last-child .kb-facets__label { border-bottom: 0; } .kb-facets__checkbox { flex: none; width: 16px; height: 16px; accent-color: var(--color-primary-500); cursor: pointer; } .kb-facets__label-text { line-height: 1.35; } /* No-JS submit button — the only way to apply a facet selection without JS. */ .kb-facets__apply { display: block; width: 100%; margin-top: 0.875rem; padding: 0.45rem 0.875rem; border: 1px solid var(--color-primary-300); border-radius: var(--radius-md); background: var(--color-neutral-0); color: var(--color-primary-600); font: 700 0.875rem var(--font-sans); cursor: pointer; text-align: center; transition: background-color 0.15s ease, border-color 0.15s ease; } .kb-facets__apply:hover { background: var(--color-primary-100); border-color: var(--color-primary-400); } @media (prefers-reduced-motion: reduce) { .kb-facets__apply { transition: none; } } /* ────────────────────────────────────────────────────────────────────────── Site footer (branded chrome — the per-article widget lives in the card) ────────────────────────────────────────────────────────────────────────── */ .kb-site-footer { border-top: 1px solid var(--border-subtle); margin-top: 2rem; background: var(--color-background); } .kb-site-footer__inner { max-width: var(--kb-container); margin: 0 auto; padding: 1.5rem clamp(1rem, 4vw, 1.5rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; color: var(--fg-3); font-size: 0.875rem; } .kb-site-footer__link { color: var(--color-blue-500); text-decoration: none; font-weight: 600; } .kb-site-footer__link:hover { text-decoration: underline; } /* Honour reduced-motion for the remaining transitions. */ @media (prefers-reduced-motion: reduce) { .kb-breadcrumb__link, .kb-nav-caret, .kb-adjacent__card, .kb-404__btn { transition: none; } } /* ══════════════════════════════════════════════════════════════════════════ DARK THEME (ENG-1354) ══════════════════════════════════════════════════════════════════════════ Light stays the default and is the canonical production appearance. Every rule below is ADDITIVE: either a token remap on `:root[data-theme="dark"]`, or an existing light selector prefixed with `[data-theme="dark"]`. Nothing above this banner is edited, reordered or deleted, and there is no `!important` — the attribute prefix adds one specificity step, which is enough to win over each light counterpart on its own, independent of stylesheet load order. NOTE this file is served on BOTH surfaces: `stylesheet_link_tag :app` is a Propshaft glob, so the internal Knowledge app gets it too, and the `body` rule above is what actually paints the internal page background. That is why the neutral/background values here and the `--tw-color-*` values in application.css are deliberately the same hexes, and why the shared `kb-*` class names (`.kb-nav-toggle`, `.kb-nav-link`) are scoped below to a public-only ancestor. `prefers-color-scheme` is deliberately NOT consulted: AC-1 requires a first-time visit to be light on both domains whatever the OS is set to. Dark is opt-in, per surface. (theme_boot_test.rb enforces this.) ────────────────────────────────────────────────────────────────────────── */ :root[data-theme="dark"] { /* Tells the UA to paint scrollbars, native form controls and default focus rings for a dark page. This is the OPPOSITE of a preference query. */ color-scheme: dark; /* The navy ramp 300–900 is NOT inverted: it paints the hero gradient and the 404 button, which stay navy in dark mode. Only the two pure tints — which are used as light BACKGROUNDS (.kb-tag--all, .kb-facets__apply:hover) — are remapped. */ --color-primary-100: #1c2438; --color-primary-200: #232d45; --color-blue-100: #1b2740; --color-blue-500: #8fb8ff; /* links — 9.2:1 on the page, 8.7:1 on cards */ --color-blue-700: #a8c6ff; --color-neutral-0: #171b25; /* raised surface: content card, buttons */ --color-neutral-100: #12161f; /* sunk surface */ --color-neutral-200: #343c4f; /* subtle border — separators only */ --color-neutral-300: #707b91; /* strong border — every interactive edge */ --color-neutral-400: #7d8798; --color-neutral-500: #9aa3b4; --color-neutral-600: #b3bbc9; --color-neutral-700: #c6cdd9; --color-neutral-800: #dbe1ec; --color-neutral-900: #eef0f6; /* Light-on-dark translucency for the row/sidebar hovers. */ --color-neutral-translucent-100: rgba(220, 228, 245, 0.08); --color-neutral-translucent-200: rgba(220, 228, 245, 0.14); --color-background: #0d1119; --fg-1: #eef0f6; /* headings — 14.6:1 on the card */ --fg-2: #dbe1ec; /* body — 13.7:1 on the page */ --fg-3: #9aa3b4; /* muted — 6.9:1 */ --fg-4: #7d8798; /* faint — 4.8:1 */ --surface-sunk: #12161f; --border-subtle: #343c4f; --border-strong: #707b91; /* Elevation reads as depth against a dark page only when it is darker than the surface, so the navy-tinted light shadows are replaced with black. */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.45); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.50); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.60); /* The legacy --kb-* aliases all resolve through the tokens above, so they need no separate remap. */ } /* ── Lexxy (rendered Action Text body + the internal WYSIWYG editor) ───────── This block lives HERE, not in application.css, because public_kb.css is the one stylesheet served on both surfaces. `:root[…]` (0-2-0) is MANDATORY, not stylistic: lexxy-variables.css declares these on a bare `:root` (0-1-0) and, on the editor pages, `lexxy.css` is linked AFTER this file — so a 0-1-0 `[data-theme="dark"]` block would lose on source order and the editor would stay fully light. Names verified against the gem. Two are traps: ink-lightest is a SURFACE (code/pre background, oklch 96%), and ink-lighter is a BORDER — neither is faint text. --lexxy-color-text-subtle paints attachment captions, so it is remapped directly rather than through ink-medium. */ :root[data-theme="dark"] { --lexxy-color-ink: #eef0f6; /* ink-medium has TWO jobs and they pull in opposite directions: it is the hover surface of .lexxy-floating-controls (whose pill is ink — now the LIGHT #eef0f6 — with ink-inverted #0d1119 glyphs) AND the text of .lexxy-prompt-menu__item--empty on the dark canvas. A dark value satisfies neither: #343c4f would hide the near-black glyph on hover (1.7:1) and the empty-menu text on the canvas. A mid grey clears both (7.4:1 / 6.8:1). */ --lexxy-color-ink-medium: #9aa3b4; --lexxy-color-ink-lighter: #343c4f; /* blockquote + table borders */ --lexxy-color-ink-lightest: #12161f; /* code / pre surface — 15.9:1 */ --lexxy-color-ink-inverted: #0d1119; /* text on the accent chip */ --lexxy-color-text-subtle: #9aa3b4; /* attachment captions — 6.8:1 */ --lexxy-color-canvas: #171b25; --lexxy-color-accent-dark: #a8bdf0; --lexxy-color-accent-light: #232d45; --lexxy-color-accent-lightest: #1c2438; --lexxy-color-link: #8fb8ff; --lexxy-color-table-header-bg: #22293a; --lexxy-shadow: 0 4px 12px rgba(0, 0, 0, 0.55); /* Syntax tokens on the #12161f code surface — all ≥ AA. */ --lexxy-color-code-token-att: #ff9bb3; --lexxy-color-code-token-comment: #8b98ad; --lexxy-color-code-token-function: #b9a4f5; --lexxy-color-code-token-operator: #ff9bb3; --lexxy-color-code-token-property: #8fb8ff; --lexxy-color-code-token-punctuation: #c6cdd9; --lexxy-color-code-token-selector: #a5e5a5; --lexxy-color-code-token-variable: #f4c07a; } /* ── Hero (navy in BOTH themes — the white greeting/sub/404 button text above is already correct and is deliberately left alone) ────────────────────── */ /* Anchors the absolutely-positioned theme toggle. Additive but provably inert in light: the only other absolutely-positioned descendants of the hero are .kb-hero__search-btn and .kb-sr-only, both already inside the `position: relative` .kb-hero__search, and an out-of-flow child consumes no flex `gap`. */ .kb-hero__inner { position: relative; } /* Theme switch. Sits on the navy hero in both themes, so it needs no dark variant. The 0.45 border alpha resolves to ≈3.35:1 against the hero, meeting the 3:1 UI-boundary rule (0.35 would have been 2.6:1). */ .kb-theme-toggle { position: absolute; top: 0; inset-inline-end: clamp(1rem, 4vw, 1.5rem); display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.7rem; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 9999px; background: rgba(255, 255, 255, 0.10); color: #fff; /* 9.5:1 on the hero */ font: 600 0.8125rem var(--font-sans); cursor: pointer; } .kb-theme-toggle:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.60); } .kb-theme-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .kb-theme-toggle__icon { width: 15px; height: 15px; flex: none; } /* Icon state is driven by the pre-paint attribute, so the correct glyph is painted on the first frame (a JS swap would show the wrong one for a frame). */ [data-theme="light"] .kb-theme-toggle__icon--dark { display: none; } [data-theme="dark"] .kb-theme-toggle__icon--light { display: none; } /* The search field is the one genuinely white panel in the hero. */ [data-theme="dark"] .kb-hero__search-input { background: #171b25; color: var(--fg-1); border: 1px solid #707b91; } [data-theme="dark"] .kb-hero__search-input::placeholder { color: #9aa3b4; } /* Navy magnifier would vanish against the now-dark field. */ [data-theme="dark"] .kb-hero__search-btn { color: #a8bdf0; } /* ── Breadcrumb ───────────────────────────────────────────────────────────── These carry navy FOREGROUNDS, which the token remap cannot fix (the navy ramp is intentionally not inverted), so each needs an explicit light foreground. */ [data-theme="dark"] .kb-breadcrumb__link { color: #a8bdf0; } [data-theme="dark"] .kb-breadcrumb__link:hover { color: #c4d2f7; } [data-theme="dark"] .kb-breadcrumb__link:focus-visible { outline-color: #c4d2f7; } /* ── Sidebar nav ──────────────────────────────────────────────────────────── SCOPED to public-only ancestors on purpose: application.css defines .kb-nav-toggle and .kb-nav-link for the internal topbar, and this file is glob-loaded on internal pages too. `.kb-page--doc .kb-nav-toggle` (not `.kb-sidebar .kb-nav-toggle`) because the public toggle