/*
* Shared shell baseline - the document-level typography and page furniture every
* NightBuilds host shell assumes, independent of which shell components it renders.
*
* WHY THIS FILE EXISTS
* Before this file, these exact rules were hand-copied into IdentityService.API's
* global.css and into FIVE byte-for-byte-identical `site.css` copies (NotificationService,
* Licensing, Provisioning, Subscription, Payment). The copies had already drifted: the
* site.css line used `line-height: var(--line-height-base)` (= 1.5) while IdentityService
* hardcoded 1.6, which is why "the same list renders ~7% tighter on NotificationService"
* was reported as a component bug when it was really a host-stylesheet bug
* (SHELL_NORMALIZATION.md instance #2).
*
* VALUES ARE IdentityService.API's. That host is the visual reference; taking its numbers
* means this file changes nothing there (its global.css still loads after this one and
* re-declares the same values), and levels every other host up to it.
*
* LOAD ORDER: after tokens/theme.css (which defines the custom properties consumed here)
* and after Bootstrap, before any host stylesheet. See ShellStylesheets for the canonical
* ordered link block, and ShellCssGuard for the check that enforces it.
*
* Consumes theme.css's tokens; defines none of its own.
*/
/* The brand face ---------------------------------------------------------------------
Montserrat, self-hosted from this library (wwwroot/fonts, SIL OFL 1.1 - see
Montserrat-OFL.txt beside the files). The token stack had named it since 2026-08 and no
host ever loaded it, so every page silently rendered the next face in the stack.
Self-hosted rather than a Google Fonts : that would send every visitor's IP to a
third party, and IdentityService.API's nonce CSP would refuse it anyway.
ONE variable file per subset covers weights 500-700, which is every weight the display
role uses. latin covers en/pt/es/fr/de/it; latin-ext loads only if a page actually draws
a character in its range (unicode-range), which none of the six locales needs.
font-display: swap - titles render immediately in the fallback and swap when ready. */
@font-face {
font-family: "Montserrat";
font-style: normal;
font-weight: 500 700;
font-display: swap;
src: url("../fonts/montserrat-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Montserrat";
font-style: normal;
font-weight: 500 700;
font-display: swap;
src: url("../fonts/montserrat-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Base Typography ------------------------------------------------------------------- */
/* Deliberately line-height: 1.6, NOT var(--line-height-base). That token IS 1.5, so using
it here would drag IdentityService's shell tighter instead of levelling the other hosts
up to it - the wrong direction for the one host that is the visual reference. Same
reasoning as .dropdown-menu-account's explicit line-height in site-header.css. */
body {
font-family: var(--font-family-sans-serif);
line-height: 1.6;
color: var(--text-primary);
background-color: var(--bg-primary);
transition: var(--transition-base);
}
/* Heading Scale. The five site.css copies stopped at h3 and omitted margin-bottom, so an
on those hosts fell back to the browser default (bold, ~1.33em) instead of the
token scale, and headings sat flush against the text under them. */
h1, .h1 { font-size: var(--font-size-4xl); font-weight: 700; line-height: 1.2; margin-bottom: var(--spacing-lg); }
h2, .h2 { font-size: var(--font-size-3xl); font-weight: 600; line-height: 1.3; margin-bottom: var(--spacing-md); }
h3, .h3 { font-size: var(--font-size-2xl); font-weight: 600; line-height: 1.4; margin-bottom: var(--spacing-md); }
h4, .h4 { font-size: var(--font-size-xl); font-weight: 500; line-height: 1.5; margin-bottom: var(--spacing-sm); }
h5, .h5 { font-size: var(--font-size-lg); font-weight: 500; line-height: 1.5; margin-bottom: var(--spacing-sm); }
h6, .h6 { font-size: var(--font-size-base); font-weight: 500; line-height: 1.5; margin-bottom: var(--spacing-sm); }
/* The display role: where the brand speaks. Headings and buttons here; the page title, the
stat figures and the navbar's brand label carry it in their own component sheets. Running
text, form fields and grid cells stay on the system face (--font-family-sans-serif) - see
the note on --nb-font-system in theme.css for why. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.btn {
font-family: var(--font-family-display);
}
/* Links ------------------------------------------------------------------------------
Bootstrap's Reboot colours anchors from --bs-link-color-RGB - a "r, g, b" triple - not
from --bs-link-color, so setting the latter in bootstrap-bridge.css left every plain
link at Bootstrap's own #0d6efd. Measured 2026-08-21: 4.50:1 on a white page (passing,
but the wrong colour), 4.14 on the dark page and 3.68 on a card, i.e. failing AA in the
default theme - and identical on all three brand accents, which is what gave it away.
Supplying the triple instead would mean carrying every accent a second time as raw
channel numbers and keeping the two spellings in step: exactly the forked-value problem
the token set exists to prevent. An element rule costs nothing and loses only the
.link-opacity-* utilities, which nothing in this workspace uses.
Specificity is (0,0,1), so every .btn / .nav-link / .home-card-link / .dropdown-item
class rule still wins - this only reaches anchors nobody styled. */
a {
color: var(--text-link);
}
a:hover {
color: var(--text-link-hover);
}
/* Focus Management ------------------------------------------------------------------ */
/* Universal focus ring. A blunt instrument, but it is the reference host's behaviour and
the alternative - every host deciding for itself - is what produced shells where
keyboard focus was invisible on some pages and not others. Individual components may
still override it with a tighter ring (see .nav-icon-btn:focus-visible). */
*:focus {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
/* Control height outside a console ---------------------------------------------------- */
/* Outside a console every button and field is 44px (UI_GUIDE.md section 3.4, 2026-09-29).
Only the primary had the floor, so a page mixed 44px primaries with Bootstrap's 38px
secondaries and 31px btn-sm (the cookie notice on five hosts, measured). Consoles are
excluded outright: their sizes are page-chrome.css's (36px, 28px grid row actions).
inline-flex + centring so the label stays centred in the taller box. In base.css, not
themes.css, so Portal and Community (which load theme.css + base.css only) get it too. */
body:not(.console) .btn:not(.btn-link),
body:not(.console) .form-control:not(textarea):not([type="file"]),
body:not(.console) .form-select:not([multiple]):not([size]) {
min-height: 2.75rem;
}
body:not(.console) .btn:not(.btn-link) {
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Cookie notice --------------------------------------------------------------------- */
/* Functional cookies only (theme preference, culture), so this is a notice-and-acknowledge
banner rather than a granular consent manager. Markup is
(TagHelpers/CookieNoticeTagHelper.cs), dismissal is js/cookie-consent.js, both in this
library since 2026-09-29; the button is .btn-themed-primary, 44px.
Shipped here rather than per-host because the banner is page furniture the shell renders
on every route - the same argument that moved .site-footer into site-footer.css. It was
previously duplicated across six host stylesheets. */
.cookie-consent-banner {
position: fixed;
left: 1rem;
right: 1rem;
bottom: 1rem;
z-index: 1050;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem 1.5rem;
max-width: 42rem;
margin: 0 auto;
padding: 1rem 1.25rem;
background-color: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-lg);
}
.cookie-consent-banner p {
margin: 0;
font-size: var(--font-size-sm);
color: var(--text-secondary);
flex: 1 1 16rem;
}
.cookie-consent-banner a {
color: var(--text-link);
}