/* Global, non-component styles. Plain CSS, no build step — loaded directly by wwwroot/index.html after design-tokens.css. Anything specific to one component/page belongs in that file's scoped ComponentName.razor.css instead (Blazor's native CSS isolation), not here. */ /* Self-hosted (not Google's CDN, so no external request/dependency at runtime) Inter, latin subset. This one file is a variable font covering the whole 400-800 weight range used across the site — Google serves the identical file for every weight in that range, so there's no need for separate per-weight files. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fonts/inter-latin-var.woff2') format('woff2'); } /* Minimal reset */ *, *::before, *::after { box-sizing: border-box; } body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; } ol, ul, menu { list-style: none; margin: 0; padding: 0; } img, picture, video, canvas, svg { display: block; max-width: 100%; } button, input, textarea, select { font: inherit; } button { -webkit-appearance: button; background-color: transparent; background-image: none; } html, body { font-family: var(--fl-font-body); margin: 0; } /* Toggled on by MainNavMenu while the mobile full-screen nav overlay is open — without it, the page behind the overlay still scrolls along with it (the overlay itself already scrolls independently via its own overflow-y:auto). height:100% is needed alongside overflow:hidden for this to reliably hold on iOS Safari, which otherwise still allows a rubber-band scroll of the body. */ html.fl-scroll-lock, body.fl-scroll-lock { overflow: hidden; height: 100%; } main { padding: 1rem; } /* Floating nav bar shared by the dark-hero pages. position:fixed ignores
's 1rem padding (it's positioned against the viewport, not an ancestor's padding box) — set explicitly so the nav's left/right edges line up with the hero's. */ .fixed-navigation { position: fixed; top: 0; left: 1rem; right: 1rem; z-index: 100; background: rgba(10, 14, 23, 0.75); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3); } h1:focus { outline: none; } a { color: #0071c1; } /* NavLink's auto-applied "active" class — used by the plain content links (Login, etc.); the custom nav components (MainNavMenu/TopNavMenu/AdminNavMenu) style their own active state and set their own colors directly, so this doesn't affect them. */ nav a.active { font-weight: bold; } code { color: #c02d76; } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid red; } .validation-message { color: red; } #blazor-error-ui { color-scheme: light only; background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); box-sizing: border-box; display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } .blazor-error-boundary { background: #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } .loading-progress { position: absolute; display: block; width: 8rem; height: 8rem; inset: 20vh 0 auto 0; margin: 0 auto 0 auto; } .loading-progress circle { fill: none; stroke: #e0e0e0; stroke-width: 0.6rem; transform-origin: 50% 50%; transform: rotate(-90deg); } .loading-progress circle:last-child { stroke: #1b6ec2; stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; transition: stroke-dasharray 0.05s ease-in-out; } .loading-progress-text { position: absolute; text-align: center; font-weight: bold; inset: calc(20vh + 3.25rem) 0 auto 0.2rem; } .loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); } /* Public Locations page: Leaflet needs an explicit map height to render. */ .locations-map { height: 400px; width: 100%; margin-bottom: 1.5rem; border-radius: 6px; } .location-list { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .location-card { border: 1px solid #ddd; border-radius: 6px; padding: 1rem; } .location-card h2 { margin-top: 0; font-size: 1.1rem; } .location-card p { margin: 0.25rem 0; }