h1:focus { outline: none; } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid #e50000; } .validation-message { color: #e50000; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } .darker-border-checkbox.form-check-input { border-color: #929292; } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* ============================================================================ JLSM public site — global system Cross-component only: design tokens, accent tokens, the section tone/striping system, section-intro colour + feature-band inversion, and the reduced-motion scroll-reveal utility. Each component's own look and motion live in its co-located *.razor.css; the one exception kept here is the click-to-zoom lightbox overlay, global because SiteFigure mounts it on , outside any component's scope. Everything here is namespaced .site-* / .accent-* and keyed to the public-site page-template wrappers, so the manager (which shares MainLayout on a couple of utility pages) is unaffected. ============================================================================ */ :root { --site-ink: #231F20; --site-body: #4A4547; --site-muted-ink: #7A7A7A; --site-line: #E7E6E6; --site-muted: #F5F4F2; --site-tint: #F8F4F9; --site-callout: #F4FAFA; --site-red: #C1272D; --site-red-dark: #A11F24; --site-red-tint: #FBECEC; --site-purple: #99419F; --site-purple-dark: #633569; --site-gold: #FFDA03; --site-font: 'Montserrat', ui-sans-serif, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif; --site-ease-out: cubic-bezier(0.23, 1, 0.32, 1); } /* site typography, applied only inside the Sitecore page-template wrappers */ #header, #content, #footer { font-family: var(--site-font); } /* The starter kit lays #header/#content/#footer out as flex rows (starterKit.css), which collapses the bespoke full-width bands into a narrow row. The site's bands are block and stack, so restore block flow for the content and footer wrappers; the header keeps flex (its inner lockup uses it) and SiteHeader fills the row via its own width:100%. */ #content, #footer { display: block; } /* Base public-site link style: brand purple, underlined for prose links. starterKit.css only gives links a grey default; this stylesheet loads after it (and only on the public site), so a bare rule sets the brand appearance. It stays at element specificity on purpose, so every component link that sets its own colour/decoration — CtaButton, card links, footer links — still wins over it. */ a { color: var(--site-purple); text-decoration: underline; text-underline-offset: 3px; } a:hover { color: var(--site-purple-dark); } /* Sticky header. position:sticky only holds when the sticky element's containing block spans the scrollable page. SiteHeader's own wrapper (#header) is only as tall as the header, so the sticky sits on the page-template

instead, whose containing block is the body. The site-header--sticky style (an author toggle on SiteHeader) is the hook :has() keys on. */ header:has(.site-header--sticky) { position: sticky; top: 0; z-index: 50; } /* accent tokens — an author sets one on a card or section intro and the components derive border / icon-chip tint / title / eyebrow colour from it */ .accent-red { --accent: #C1272D; } .accent-blue { --accent: #31506E; } .accent-teal { --accent: #0E7C86; } .accent-green { --accent: #1F6B47; } .accent-gold { --accent: #8A5A13; } .accent-purple { --accent: #99419F; } .accent-slate { --accent: #5B5754; } /* section tone / striping / separation */ .site-section { background: #fff; padding: clamp(44px, 6vw, 76px) 40px; } .site-section__inner { max-width: 1120px; margin: 0 auto; } /* vertical rhythm between stacked section-content blocks: intro, consecutive card grids, a trailing callout card, or the register form. Deterministic (no margin-collapse reliance). */ .site-section__inner > * + * { margin-top: 30px; } .site-section--muted { background: var(--site-muted); } .site-section--tint { background: var(--site-tint); } .site-section--feature { background: var(--site-red); color: #fff; } .site-section--dark { background: var(--site-ink); color: #fff; } /* a hairline only where two plain (white) bands meet; any tone change is its own divider */ .site-section:not(.site-section--muted):not(.site-section--tint):not(.site-section--feature):not(.site-section--dark) + .site-section:not(.site-section--muted):not(.site-section--tint):not(.site-section--feature):not(.site-section--dark) { border-top: 1px solid var(--site-line); } @media (max-width: 860px) { .site-section { padding: 38px 20px; } } /* section-intro colour (geometry is in SectionIntro.razor.css) */ .section-intro__eyebrow { color: var(--accent, var(--site-purple)); } .section-intro__heading { color: var(--site-ink); } .section-intro__lead { color: var(--site-body); } /* feature-band inversion — higher specificity so it wins over the geometry scope */ .site-section--feature .section-intro .section-intro__eyebrow { color: var(--site-gold); } .site-section--feature .section-intro .section-intro__heading { color: #fff; } .site-section--feature .section-intro .section-intro__lead { color: rgba(255, 255, 255, .92); } /* dark-band inversion — gold eyebrow, white heading, dimmed lead, matching the feature band */ .site-section--dark .section-intro .section-intro__eyebrow { color: var(--site-gold); } .site-section--dark .section-intro .section-intro__heading { color: #fff; } .site-section--dark .section-intro .section-intro__lead { color: rgba(255, 255, 255, .80); } /* scroll-reveal utility. SectionBand.razor.js arms elements (.is-armed) only when motion is allowed and IntersectionObserver is available, then reveals each once (.is-visible) as it enters — so content is always visible if JS is off or reduced motion is set. Elements that enter together are staggered by the script via transition-delay, so a row of cards cascades rather than appearing all at once. */ @media (prefers-reduced-motion: no-preference) { .reveal.is-armed { opacity: 0; transform: translateY(24px); } .reveal.is-armed.is-visible { opacity: 1; transform: none; transition: opacity .64s var(--site-ease-out), transform .64s var(--site-ease-out); } } /* ---------------------------------------------------------------------------- Lightbox overlay for the click-to-zoom figures. SiteFigure.razor.js builds this overlay and appends it to , outside every component's scope, so these styles cannot be isolated and stay global. The figure trigger that opens it (.site-figure*) is component-scoped in SiteFigure.razor.css. ---------------------------------------------------------------------------- */ .site-lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(35, 31, 32, .92); display: none; align-items: center; justify-content: center; padding: 32px; } .site-lightbox.is-open { display: flex; } .site-lightbox__box { max-width: min(1500px, 96vw); max-height: 94vh; display: flex; flex-direction: column; gap: 14px; } .site-lightbox__box img { max-width: 100%; max-height: calc(94vh - 70px); width: auto; height: auto; border-radius: 10px; background: #fff; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6); } .site-lightbox__cap { margin: 0 auto; max-width: 90ch; color: rgba(255, 255, 255, .88); font-size: 14.5px; line-height: 1.5; text-align: center; } .site-lightbox__close { position: absolute; top: 18px; right: 22px; font-family: inherit; font-size: 15px; font-weight: 700; color: var(--site-ink); background: #fff; border: none; border-radius: 8px; padding: 10px 16px; cursor: pointer; } /* On phones the lightbox scrolls and pinch-zooms rather than shrinking the screenshot to fit */ @media (max-width: 860px) { .site-lightbox { align-items: flex-start; justify-content: flex-start; overflow: auto; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y pinch-zoom; padding: 56px 0 24px; } .site-lightbox__box { max-width: none; max-height: none; width: auto; gap: 8px; } .site-lightbox__box img { max-width: none; max-height: none; width: 900px; border-radius: 0; } .site-lightbox__cap { padding: 0 16px; text-align: left; } .site-lightbox__close { position: fixed; top: 10px; right: 10px; } } /* Two-column layout (TwoColumns) is component-scoped in the variant sheets TwoColumnsVariants/DefaultVariant.razor.css and NoPaddingVariant.razor.css. */