*, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--atw-color-bg); color: var(--atw-color-text); font-family: var(--atw-font-sans); font-size: var(--atw-font-size-base); line-height: var(--atw-line-height-base); } /* The nav is position: fixed (roadmap 9.8), so an in-page anchor would otherwise scroll its target underneath the nav bar. This keeps #services and #availability clear of it — including the hero's two CTAs. */ html { scroll-padding-top: var(--atw-nav-height); } h1, h2, h3, h4 { line-height: var(--atw-line-height-tight); margin: 0 0 var(--atw-space-4); } h1:focus { outline: none; } p { margin: 0 0 var(--atw-space-4); } a { color: var(--atw-color-link); text-decoration: none; } a:hover { text-decoration: underline; } button { font-family: inherit; } .container { max-width: var(--atw-max-width); margin: 0 auto; padding: 0 var(--atw-space-5); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--atw-space-2); padding: var(--atw-space-3) var(--atw-space-5); border-radius: var(--atw-radius-md); border: 1px solid transparent; font-size: var(--atw-font-size-base); font-weight: 600; cursor: pointer; text-decoration: none; } .btn:focus-visible { outline: 2px solid var(--atw-color-accent); outline-offset: 2px; } .btn-primary { background: var(--atw-color-accent); color: var(--atw-color-accent-contrast); } .btn-primary:hover { background: var(--atw-color-accent-hover); text-decoration: none; } .btn-secondary { background: transparent; border-color: var(--atw-color-border); color: var(--atw-color-text); } .btn-secondary:hover { border-color: var(--atw-color-accent); text-decoration: none; } /* --------------------------------------------------------------------------- Static hero (roadmap 9.8) These rules were Components/Hero.razor.css. They are global, unscoped CSS in a real stylesheet because the markup they style now lives in index.html and has to be styled on first paint, before the WASM runtime boots — scoped .razor.css is bundled with generated b-* attribute selectors the static markup does not carry. Values are unchanged from the scoped original, so the rendered hero is pixel-identical at every breakpoint. --------------------------------------------------------------------------- */ /* Holds the box the fixed .nav-bar overlays. Present in the static shell, so it reserves the space before Blazor boots and the hero never jumps. */ .nav-spacer { height: var(--atw-nav-height); } /* index.html is served for every route by navigationFallback, so the hero is in the markup everywhere. The inline script in sets data-route before the body parses; this hides the hero off /studio with no flash. */ html[data-route="other"] #hero { display: none; } .hero { padding: var(--atw-space-12) 0 var(--atw-space-8); background: linear-gradient(180deg, var(--atw-color-bg-raised) 0%, var(--atw-color-bg) 100%); border-bottom: 1px solid var(--atw-color-border); } .hero-inner { max-width: 42rem; } .hero-logo { height: clamp(7.5rem, 12vw, 10rem); width: auto; display: block; margin: 0 auto var(--atw-space-8); } .hero h1 { font-size: var(--atw-font-size-2xl); } .hero-sub { color: var(--atw-color-text-muted); font-size: var(--atw-font-size-md); } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--atw-space-3); margin: var(--atw-space-5) 0 var(--atw-space-3); } .hero-note { color: var(--atw-color-text-faint); font-size: var(--atw-font-size-xs); margin: 0; } @media (min-width: 768px) { .hero h1 { font-size: var(--atw-font-size-3xl); } } .badge-tbd { display: inline-block; padding: var(--atw-space-1) var(--atw-space-2); border-radius: var(--atw-radius-sm); background: var(--atw-color-bg-inset); border: 1px dashed var(--atw-color-text-faint); color: var(--atw-color-text-muted); font-size: var(--atw-font-size-xs); text-transform: uppercase; letter-spacing: 0.04em; } .content { padding-top: 0; } /* Long-form legal text (Terms of Service, Privacy Policy) — narrower measure than .container's 72rem for readable line length. */ .legal-page { max-width: 42rem; padding-top: var(--atw-space-10); padding-bottom: var(--atw-space-12); } .legal-page h2 { margin-top: var(--atw-space-8); font-size: var(--atw-font-size-lg); } .legal-updated { color: var(--atw-color-text-muted); margin-bottom: var(--atw-space-8); } .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; } .validation-message { color: var(--atw-color-danger); } #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: 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."; } /* Fixed, not in flow (roadmap 9.8): the boot spinner must not affect layout. Left in normal flow it gives a height that collapses the moment the app content replaces it, and that counts as a layout shift against CLS. Taking it out of flow means nothing that was painted has to move. Moved to the bottom of the viewport in the static-hero pass: the hero is now real HTML that paints immediately, so the spinner is no longer the only thing on screen — centred at 20vh it sat directly on top of the headline for the ~12 s the runtime takes to boot. Down here it reads as "the rest of the page is still loading", which is what it actually means now. */ .loading-progress { position: fixed; display: block; width: 3rem; height: 3rem; top: auto; bottom: 2.5rem; left: 0; right: 0; margin: 0 auto; z-index: 20; } .loading-progress circle { fill: none; stroke: var(--atw-color-border); stroke-width: 0.6rem; transform-origin: 50% 50%; transform: rotate(-90deg); } .loading-progress circle:last-child { stroke: var(--atw-color-accent); 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: fixed; text-align: center; font-weight: bold; font-size: var(--atw-font-size-xs); inset: auto 0 1rem 0; color: var(--atw-color-text-muted); z-index: 20; } .loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); } code { color: var(--atw-color-accent-text); }