/* * Base family. MudBlazor.min.css is linked after app.css and sets `body` from * --mud-typography-default-family, so this rule never actually applied — it * named Helvetica Neue while the site has always rendered in the theme's * Roboto. Kept, but matching the theme, so the two can't disagree if the * stylesheet order ever changes. */ html, body { font-family: Roboto, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; } h1:focus { outline: none; } .content { padding-top: 1.1rem; } .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; } /* Headings step DOWN on small screens. This block used to scale them up — h6 went from the theme's 1rem to 1.8rem, larger than desktop h3 — which flattened h3–h6 into near-identical sizes and pushed card text outside its container. Mobile sizes must never exceed the desktop scale in Themes/EilikoTheme.cs (h1 3 / h2 2.25 / h3 1.75 / h4 1.375 / h5 1.125 / h6 1rem); h4–h6 are already small enough to need no override. */ @media (max-width: 600px) { h1 { font-size: 2.25rem !important; } h2 { font-size: 1.75rem !important; } h3 { font-size: 1.5rem !important; } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* * Navigation typography. * * The appbar used to be set in Roboto Slab (a serif), while the dropdowns it * opens inherited the body sans from the popover — so the top bar, its menus and * the rest of the site were three different faces. Navigation now uses the same * display face as the headings (see Typography in Themes/EilikoTheme.cs), which * keeps the chrome part of the site's type system instead of an exception to it. * * Menus render into MudPopoverProvider at the end of , not inside * .mud-appbar, so the dropdown rules are scoped by .mud-menu-item rather than by * ancestry. That deliberately covers every MudMenu on the site — the account and * language menus included — so all dropdowns match. MudSelect / MudAutocomplete * popovers render .mud-list-item and are untouched; they stay form controls. */ :root { --eiliko-font-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } /* Top-level appbar links and menu triggers. */ .mud-appbar .mud-button, .mud-appbar .mud-menu .mud-button { font-family: var(--eiliko-font-display); font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.005em; text-transform: none; font-optical-sizing: auto; font-style: normal; } /* * Dropdown rows. MudMenuItem wraps its content in *

, so a rule * on .mud-menu-item alone is outranked by .mud-typography-body1 (MudBlazor.min.css * is linked after this file) — hence the two-class selector on the text element. * Body1 is the site's reading size (1.0625rem/1.7); menu rows are UI, so they are * set at the UI scale one weight below the appbar, which keeps the bar reading as * the primary level. Nested submenu triggers render as .mud-menu-item too, so they * pick this up and line up with the plain rows beside them. */ .mud-menu-item .mud-menu-item-text { font-family: var(--eiliko-font-display); font-size: 0.9375rem; font-weight: 500; line-height: 1.5; letter-spacing: -0.005em; text-transform: none; font-optical-sizing: auto; font-style: normal; } /* * Readability fix: Color="Color.Secondary" is used across the site for muted * body/description text, but in this theme the Secondary palette entry is a teal * BRAND color (see EilikoTheme.cs). MudBlazor therefore renders that text teal * (.mud-secondary-text { color: var(--mud-palette-secondary) }), which is low * contrast on light backgrounds (fails WCAG AA) and dim/hard to read on dark. * * Remap secondary-colored TEXT (MudText + MudLink both carry .mud-typography) to * the theme's neutral secondary text color, which is a proper gray in both the * light (#6B7280) and dark (#94A3B8) palettes. The two-class selector outranks * MudBlazor's single-class !important rule. Icons/avatars/buttons that use * Color.Secondary are NOT .mud-typography, so they keep the teal accent. */ .mud-typography.mud-secondary-text { color: var(--mud-palette-text-secondary) !important; } /* Keep links visually distinct from plain muted text: nudge to the brand color on hover. */ a.mud-link.mud-secondary-text:hover { color: var(--mud-palette-primary) !important; } /* * Button system: calmer, consistent motion. Text-casing/weight is set in the * theme (Button typography). Here we add a subtle lift on primary (filled) * buttons and smooth every state change so the whole site's CTAs feel like one * system. Icon buttons are excluded from the lift so toolbar icons stay put. */ .mud-button-filled, .mud-button-outlined, .mud-button-text { transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease; } .mud-button-filled:not(.mud-icon-button):hover { transform: translateY(-1px); } /* * Card system: one restrained treatment site-wide. A hairline border that warms * to the brand accent on hover replaces the assorted bright top-bars, so the * accent color is applied consistently and works in both light and dark themes * (var(--mud-palette-primary) resolves per palette). Pages keep their local * lift/shadow; this only adds the border-color behaviour. */ .card-hover { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .card-hover:hover { border-color: var(--mud-palette-primary) !important; } /* * Bootstrap utility fallbacks. * * The markup uses a handful of Bootstrap utility classes, but Bootstrap is no longer * loaded (the in App.razor is commented out) and MudBlazor defines no * equivalents — it ships .d-flex and .align-center, but not these. Every usage was * therefore silently doing nothing. SiteAssetTests guards against the class of bug. * * .h-100 (47 usages): MudGrid is display:flex with the default align-items:stretch, * so .mud-grid-item already fills the tallest card in its row; only the card itself * needs to fill the item, which is what makes card grids equal-height. * * .text-center (15 usages) centres the individual lines of wrapped text. MudBlazor's * .align-center centres the block but leaves its lines ragged, which is why the * difference is easy to miss on single-line content. * * .bg-transparent (1 usage) drops the MudPaper surface colour. */ .h-100 { height: 100%; } .text-center { text-align: center; } .bg-transparent { background-color: transparent !important; } /* * Legal documents (sopimusehdot, tietosuoja, tietojenkasittelysopimus). * * Their prose is Typo.body1 (1.0625rem), but MudListItem renders its content as * body2 (0.9375rem). These pages are mostly bulleted obligations and definitions, * so the bulk of the text was rendering two pixels smaller than the paragraphs it * sits between — 39 items on sopimusehdot, 32 on tietosuoja, 63 on the DPA. One * item on sopimusehdot had been hand-set to body1, which is what gave the drift * away. Normalizing here keeps the 171 list items untouched. */ .legal-document .mud-list-item-text .mud-typography-body2 { font-size: 1.0625rem; line-height: 1.7; } /* * Document table of contents (DocumentTocComponent). * * Rendered twice: a sticky sidebar for wide viewports and a collapsed

* panel for narrow ones, since a 14-item list expanded at the top of a phone * screen would push the document itself below the fold. Only one is ever shown. */ .doc-toc-title, .doc-toc-summary { font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif; font-size: 1rem; font-weight: 600; margin: 0 0 0.75rem; color: var(--mud-palette-text-primary); } .doc-toc-list { list-style: none; margin: 0; padding: 0; } .doc-toc-list li { margin: 0; } .doc-toc-link { display: block; padding: 0.35rem 0.75rem; border-left: 2px solid var(--mud-palette-divider); color: var(--mud-palette-text-secondary); text-decoration: none; font-size: 0.9375rem; line-height: 1.45; } .doc-toc-link:hover { color: var(--mud-palette-text-primary); border-left-color: var(--mud-palette-primary); } .doc-toc-link--active { color: var(--mud-palette-primary); border-left-color: var(--mud-palette-primary); font-weight: 600; } /* Anchor jumps must clear the fixed app bar, or the heading lands under it. */ .doc-section-anchor { scroll-margin-top: 88px; } /* Sidebar on wide viewports, collapsible panel on narrow ones. */ .doc-toc--mobile { display: block; margin-bottom: 1.5rem; padding: 1rem 1.25rem; border-radius: 12px; background: var(--mud-palette-background-gray); } .doc-toc--mobile .doc-toc-summary { cursor: pointer; margin-bottom: 0; } .doc-toc--mobile[open] .doc-toc-summary { margin-bottom: 0.75rem; } .doc-toc--sidebar { display: none; } @media (min-width: 960px) { .doc-toc--mobile { display: none; } .doc-toc--sidebar { display: block; position: sticky; top: 88px; max-height: calc(100vh - 112px); overflow-y: auto; } } /* * Form controls: harmonize with the site text scale. MudBlazor sizes input * labels and the typed value from Subtitle1 (1.1875rem / 19px in this theme), * so form fields rendered noticeably larger than the site's body copy (17px) * and UI text (16px). Normalize the label and input value to 1rem — the * conventional input size — so text fields, selects and text areas match the * rest of the site. Helper/counter text keeps its own small size. Applies to * all MudTextField / MudSelect / MudNumericField / MudAutocomplete controls. */ .mud-input-label-inputcontrol { font-size: 1rem !important; } .mud-input-slot, .mud-input-slot input, .mud-input > input, .mud-select .mud-input-slot { font-size: 1rem !important; }