/* ============================================================================ SyRF Identity — authentication surface (Surface A) ---------------------------------------------------------------------------- Hand-rolled CSS for the server-rendered Razor pages. Tokens are ported verbatim from the SyRF design system (`colors_and_type.css`); component rules follow the auth-UI design handoff. No framework, no CDN: these pages must load fast and make no third-party requests. Fonts are self-hosted subsets of the design system's variable fonts: - Roboto (wght 300..700, Latin-1) ~33 KB - Roboto Mono (wght 400..500, Latin-1) ~21 KB - Material Symbols Outlined (24 glyphs, static) ~2 KB The full Material Symbols variable font is ~4 MB, so it is subset to the glyphs this surface actually uses and addressed by codepoint. Icon glyphs are referenced through the `.ms-*` helper classes below. ========================================================================= */ /* ---------------------------------------------------------------- fonts -- */ @font-face { font-family: "Roboto"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/syrf-roboto.woff2") format("woff2"); } @font-face { font-family: "Roboto Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("../fonts/syrf-roboto-mono.woff2") format("woff2"); } @font-face { font-family: "Material Symbols Outlined"; font-style: normal; font-weight: 400; font-display: block; src: url("../fonts/syrf-symbols.woff2") format("woff2"); } /* --------------------------------------------------------------- tokens -- */ :root { /* Brand primary (navy) */ --syrf-primary-50: #e4e7eb; --syrf-primary-100: #bcc2cd; --syrf-primary-500: #203457; --syrf-primary-900: #0b152c; /* Brand surface — deliberately does not flip in dark mode */ --syrf-brand-ink: #1c3053; --syrf-on-brand-ink: #ffffff; /* M3 primary tone 40 — buttons, links, focus */ --syrf-accent: #4b5e84; --syrf-on-accent: #ffffff; /* Semantic status */ --syrf-success: #4caf50; --syrf-success-dark: #388e3c; --syrf-warning: #ff9800; --syrf-warning-dark: #e65100; --syrf-warning-light-bg: #fff3cd; --syrf-warning-text: #856404; --syrf-error: #f44336; --syrf-error-light: #ffebee; --syrf-error-border: #ffcdd2; --syrf-error-text: #721c24; /* Surface (M3 light) */ --syrf-surface: #fdfcff; --syrf-surface-variant: #e1e2ec; --syrf-surface-container: #f3f3fa; --syrf-surface-container-low: #f8f9fd; --syrf-background: #fdfcff; /* Text and borders */ --syrf-on-surface: #1a1c1e; --syrf-on-surface-variant: #393b42; --syrf-text-disabled: rgba(0, 0, 0, 0.38); --syrf-disabled-surface: #f2f2f2; --syrf-divider: rgba(0, 0, 0, 0.12); --syrf-outline: #74777f; --syrf-outline-variant: #c5c6cf; --syrf-primary-tint: rgba(32, 52, 87, 0.08); /* Type */ --syrf-font-sans: "Roboto", "Helvetica Neue", Arial, sans-serif; --syrf-font-mono: "Roboto Mono", ui-monospace, Menlo, Consolas, monospace; /* Spacing — 4px grid */ --syrf-sp-1: 4px; --syrf-sp-2: 8px; --syrf-sp-3: 12px; --syrf-sp-4: 16px; --syrf-sp-5: 20px; --syrf-sp-6: 24px; --syrf-sp-8: 32px; /* Radii */ --syrf-radius-sm: 4px; --syrf-radius-md: 8px; --syrf-radius-lg: 16px; /* Motion */ --syrf-dur-normal: 250ms; --syrf-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --syrf-shadow-nav: 0 2px 8px rgba(0, 0, 0, 0.28); } /* Dark mode. Values ported from the production `.global-dark-theme`. Honoured by system preference, and forcible with data-theme on . */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --syrf-surface: #1c1e24; --syrf-surface-variant: #2a2e38; --syrf-surface-container: #23262f; --syrf-surface-container-low: #20232b; --syrf-background: #16181e; --syrf-on-surface: #e3e4e9; --syrf-on-surface-variant: #c5c6cf; --syrf-text-disabled: rgba(255, 255, 255, 0.38); --syrf-disabled-surface: #2a2e38; --syrf-divider: rgba(255, 255, 255, 0.08); --syrf-outline: #8e919b; --syrf-outline-variant: #44474e; --syrf-accent: #b3c7f2; /* The design system hardcodes white on the filled button, which is 1.7:1 against the dark accent. M3 puts a dark tone on primary in dark mode. */ --syrf-on-accent: #0b152c; --syrf-primary-tint: rgba(179, 199, 242, 0.1); --syrf-success: #66bb6a; --syrf-success-dark: #4caf50; --syrf-warning: #ffa726; --syrf-warning-dark: #ff9800; --syrf-warning-light-bg: #3e2723; --syrf-warning-text: #ffcc80; /* Error steps to the 400 tone exactly as success and warning do above. The light 500 (#f44336) only reaches 4.18:1 on the dark surface, which is short of AA for the field-error text that uses it. */ --syrf-error: #ef5350; --syrf-error-light: #4e342e; /* One step out from the notice background, matching how the light palette sets its border one tone deeper than its own background. Left at the light value this stayed a pale pink edge on a dark brown surface. */ --syrf-error-border: #6d4c41; --syrf-error-text: #ef9a9a; } } [data-theme="dark"] { color-scheme: dark; --syrf-surface: #1c1e24; --syrf-surface-variant: #2a2e38; --syrf-surface-container: #23262f; --syrf-surface-container-low: #20232b; --syrf-background: #16181e; --syrf-on-surface: #e3e4e9; --syrf-on-surface-variant: #c5c6cf; --syrf-text-disabled: rgba(255, 255, 255, 0.38); --syrf-disabled-surface: #2a2e38; --syrf-divider: rgba(255, 255, 255, 0.08); --syrf-outline: #8e919b; --syrf-outline-variant: #44474e; --syrf-accent: #b3c7f2; --syrf-on-accent: #0b152c; --syrf-primary-tint: rgba(179, 199, 242, 0.1); --syrf-success: #66bb6a; --syrf-success-dark: #4caf50; --syrf-warning: #ffa726; --syrf-warning-dark: #ff9800; --syrf-warning-light-bg: #3e2723; --syrf-warning-text: #ffcc80; --syrf-error: #ef5350; --syrf-error-light: #4e342e; --syrf-error-border: #6d4c41; --syrf-error-text: #ef9a9a; } /* ------------------------------------------------------------- elements -- */ *, *::before, *::after { box-sizing: border-box; } html { height: 100%; } body { margin: 0; min-height: 100%; font-family: var(--syrf-font-sans); font-size: 14.5px; line-height: 1.62; color: var(--syrf-on-surface); background: var(--syrf-background); -webkit-font-smoothing: antialiased; } a { color: var(--syrf-accent); text-decoration: none; } a:hover, a:focus-visible { text-decoration: underline; } code, kbd, samp { font-family: var(--syrf-font-mono); font-size: 0.92em; } /* One focus treatment everywhere. Never removed, always visible in both themes, and offset so it reads against the card as well as the panel. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--syrf-accent); outline-offset: 2px; border-radius: var(--syrf-radius-sm); } .syrf-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Skip link — first tab stop, invisible until focused. */ .syrf-skip-link { position: absolute; left: var(--syrf-sp-4); top: -60px; z-index: 10; padding: var(--syrf-sp-2) var(--syrf-sp-4); background: var(--syrf-surface); color: var(--syrf-on-surface); border: 1px solid var(--syrf-outline); border-radius: var(--syrf-radius-sm); font: 500 13px/1.4 var(--syrf-font-sans); transition: top var(--syrf-dur-normal) var(--syrf-ease-standard); } .syrf-skip-link:focus { top: var(--syrf-sp-4); } /* ---------------------------------------------------------------- icons -- */ /* Material Symbols Outlined, subset and addressed by codepoint. Every glyph is decorative: the helper always renders aria-hidden content, so state is never conveyed by icon alone. */ .ms { /* sans-serif only ever applies if the icon font fails to load, in which case the glyph is missing anyway; the helper's content is aria-hidden. */ font-family: "Material Symbols Outlined", sans-serif; font-weight: 400; font-style: normal; font-size: 20px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; flex: none; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; } .ms-error::before { content: "\e000"; } .ms-warning::before { content: "\e002"; } .ms-mail::before { content: "\e0be"; } .ms-check-circle::before { content: "\e86c"; } .ms-info::before { content: "\e88e"; } .ms-radio-unchecked::before { content: "\e836"; } .ms-visibility::before { content: "\e417"; } .ms-visibility-off::before { content: "\e8f5"; } .ms-passkey::before { content: "\f87f"; } .ms-check::before { content: "\e5ca"; } .ms-dot::before { content: "\e061"; } .ms-chevron-right::before { content: "\e315"; } .ms-lock::before { content: "\e88d"; } .ms-key::before { content: "\e73c"; } .ms-arrow-back::before { content: "\e5c4"; } .ms-arrow-forward::before { content: "\e5c8"; } .ms-delete::before { content: "\e872"; } .ms-add::before { content: "\e145"; } .ms-logout::before { content: "\e9ba"; } .ms-help::before { content: "\e887"; } .ms-shield-person::before { content: "\f650"; } .ms-at::before { content: "\e0e6"; } .ms-person::before { content: "\e7fd"; } .ms-link::before { content: "\e157"; } /* ---------------------------------------------------------------- shell -- */ .syrf-shell { position: relative; display: flex; flex-direction: column; min-height: 100vh; background: var(--syrf-background); } /* Split-brand chrome: navy panel on the left, card centred in the right column. The panel runs full-bleed to the bottom, so the footer occupies the right column only. */ .syrf-brand-panel { position: absolute; left: 0; top: 0; bottom: 0; width: 44%; overflow: hidden; background: var(--syrf-brand-ink); } .syrf-brand-panel__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.26; clip-path: polygon(0 0, 100% 0, 100% 72%, 0 100%); } .syrf-brand-panel__mark { position: absolute; right: -96px; bottom: -72px; width: 300px; opacity: 0.17; } .syrf-brand-panel__inner { position: relative; display: flex; flex-direction: column; height: 100%; padding: 44px 40px; } .syrf-brand-panel__logo { align-self: flex-start; height: 26px; width: auto; } .syrf-brand-panel__copy { margin-top: auto; } .syrf-brand-panel__title { margin: 0 0 var(--syrf-sp-3); font: 300 26px/1.28 var(--syrf-font-sans); color: #fff; } .syrf-brand-panel__sub { margin: 0; max-width: 290px; font: 400 14px/1.6 var(--syrf-font-sans); color: rgba(255, 255, 255, 0.76); } .syrf-main { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 44px; } .syrf-shell--split .syrf-main { padding-left: calc(44% + 44px); } /* ----------------------------------------------------------------- card -- */ /* M3 tonal elevation: a surface tint plus a hairline, never a shadow. */ .syrf-card { width: 100%; max-width: 432px; padding: var(--syrf-sp-8); background: var(--syrf-surface); border: 1px solid var(--syrf-outline-variant); border-radius: var(--syrf-radius-md); } .syrf-card--wide { max-width: 552px; } .syrf-card__logo { display: block; height: 29px; width: auto; margin: 0 0 26px; } .syrf-shell--split .syrf-card__logo { display: none; } .syrf-card__title { margin: 0 0 10px; font: 400 25px/1.26 var(--syrf-font-sans); color: var(--syrf-on-surface); text-wrap: pretty; } .syrf-card__lede, .syrf-prose { margin: 0 0 18px; font: 400 14.5px/1.62 var(--syrf-font-sans); color: var(--syrf-on-surface-variant); text-wrap: pretty; } .syrf-caption { margin: 0 0 var(--syrf-sp-4); font: 400 12px/1.55 var(--syrf-font-sans); color: var(--syrf-on-surface-variant); opacity: 0.85; text-wrap: pretty; } .syrf-section-heading { margin: 26px 0 14px; padding-top: var(--syrf-sp-5); border-top: 1px solid var(--syrf-outline-variant); font: 500 13px/1.3 var(--syrf-font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--syrf-on-surface-variant); } .syrf-section:first-of-type > .syrf-section-heading { margin-top: var(--syrf-sp-5); } /* --------------------------------------------------------------- fields -- */ .syrf-field { position: relative; margin: 0 0 18px; } /* A real