via @property above) makes
any consumer of var(--pf-trail-progress) interpolate smoothly. */
transition: --pf-trail-progress 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Plane follows the EXACT same path the SVG drew. Both use the 400x60
coordinate space, so at 100% offset-distance the plane lands on the
right-most crest. offset-rotate: auto tilts the plane with tangent.
Inline SVG with gradient fill - bulletproof visibility across themes. */
.plane {
position: absolute;
/* Match .runway-wave's top so offset-path coordinates stay aligned -
the plane's offset-path uses the same 0..400 / 0..60 space as the
wave SVG, so both must anchor at the same loader-relative y. */
top: 2.125rem;
left: 0;
width: 1.75rem;
height: 1.75rem;
display: block;
overflow: visible;
pointer-events: none;
offset-path: path("M 0 30 Q 50 5, 100 30 T 200 30 T 300 30 T 400 30");
/* SVG plane is drawn nose-up (local -Y). +90deg rotates it CW so the
nose points along the tangent direction (nose-forward flight). */
offset-rotate: auto 90deg;
offset-anchor: center;
/* The plane's position rides Blazor's actual load percentage - same
source of truth as the runway-trail fill above. At 0% it sits at
the start of the runway; at 100% it has reached the right-most
crest; in between it advances along the cubic curve via
`offset-path`. Pulse glow keeps running independently so the
brand mark never feels frozen.
Two-layer drop-shadow (small white highlight + larger accent halo)
lifts the plane off the violet trail underneath so the nose always
reads clearly. */
filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 14px var(--pf-accent));
offset-distance: var(--blazor-load-percentage, 0%);
transition: offset-distance 0.35s cubic-bezier(0.4, 0, 0.2, 1);
animation: planePulse 1.8s ease-in-out infinite;
}
/* (planeFly @keyframes removed - plane's offset-distance is now driven
directly by var(--blazor-load-percentage) with a CSS transition.) */
@keyframes planePulse {
0%,
100% {
filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 12px var(--pf-accent));
}
50% {
filter: drop-shadow(0 0 4px rgba(255, 255, 255, 1)) drop-shadow(0 0 22px var(--pf-accent-strong, var(--pf-accent)));
}
}
.runway-status {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
font-size: 0.8125rem;
font-family: var(--pf-font-mono);
color: var(--pf-text-subtle);
letter-spacing: 0.02em;
min-height: 1em;
}
.runway-status:after {
content: var(--blazor-load-percentage-text, "Preparing the runway…");
}
/* ─── Error banner ─────────────────────────────────────── */
#blazor-error-ui {
background: #f59e0b;
color: #0f172a;
bottom: 0;
box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
display: none;
left: 0;
padding: 0.75rem 1.25rem;
position: fixed;
width: 100%;
z-index: 1000;
font-family: var(--pf-font-sans);
}
#blazor-error-ui .dismiss {
cursor: pointer;
position: absolute;
right: 0.75rem;
top: 0.5rem;
}
/* ─── XML live preview (Advanced page sidebar) ─────────────
A compact code surface with an accent-bordered left edge and a
dedicated toolbar. Three icon buttons (copy / download / expand)
replace the old mixed-appearance FluentButtons so the chrome reads
as a single component instead of a stealth/accent collision. */
.pf-xml-panel {
display: flex;
flex-direction: column;
gap: 0.625rem;
}
.pf-xml-toolbar {
display: flex;
align-items: center;
gap: 0.5rem;
min-height: 2rem;
flex-wrap: wrap;
}
.pf-xml-toolbar__title {
font-weight: 600;
font-size: 0.8125rem;
color: var(--pf-text);
letter-spacing: 0.01em;
}
.pf-xml-toolbar__meta {
font-family: var(--pf-font-mono);
font-size: 0.6875rem;
color: var(--pf-text-subtle);
padding: 0.125rem 0.4rem;
background: var(--pf-surface-2);
border: 1px solid var(--pf-border);
border-radius: var(--pf-radius-sm);
white-space: nowrap;
}
.pf-xml-toolbar__actions {
margin-left: auto;
display: inline-flex;
gap: 0.25rem;
}
.pf-xml-iconbtn {
appearance: none;
-webkit-appearance: none;
background: var(--pf-chrome-bg);
border: 1px solid var(--pf-border-strong);
color: var(--pf-text-muted);
width: 1.75rem;
height: 1.75rem;
padding: 0;
border-radius: var(--pf-radius-sm);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(10px);
transition:
color 0.15s var(--pf-ease),
border-color 0.15s var(--pf-ease),
background 0.15s var(--pf-ease),
transform 0.15s var(--pf-ease),
box-shadow 0.2s var(--pf-ease);
}
.pf-xml-iconbtn:hover {
color: var(--pf-accent);
border-color: var(--pf-accent);
transform: translateY(-1px);
box-shadow: 0 2px 8px var(--pf-accent-ring);
}
.pf-xml-iconbtn:active {
transform: translateY(0);
}
.pf-xml-iconbtn:focus-visible {
outline: 2px solid var(--pf-accent-ring);
outline-offset: 2px;
}
.pf-xml-iconbtn.is-copied {
color: var(--pf-accent);
border-color: var(--pf-accent);
background: var(--pf-accent-soft);
}
.pf-xml-iconbtn svg {
width: 0.875rem;
height: 0.875rem;
display: block;
color: currentColor;
}
/* Code surface - sidebar variant. Left accent border ties it visually to
the app palette; monospace with relaxed leading makes deep trees legible. */
.pf-xml-code {
margin: 0;
padding: 0.75rem 0.875rem;
font-family: var(--pf-font-mono);
font-size: 0.7188rem;
line-height: 1.55;
background: var(--pf-surface-2);
border: 1px solid var(--pf-border);
border-left: 3px solid var(--pf-accent);
border-radius: var(--pf-radius-md);
overflow: auto;
max-height: 32.5rem;
white-space: pre;
color: var(--pf-text);
tab-size: 2;
}
.pf-xml-code code {
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: inherit;
background: transparent;
text-shadow: none;
}
.pf-xml-code::-webkit-scrollbar {
width: 0.625rem;
height: 0.625rem;
}
.pf-xml-code::-webkit-scrollbar-track {
background: transparent;
}
.pf-xml-code::-webkit-scrollbar-thumb {
background: var(--pf-border-strong);
border-radius: 5px;
border: 2px solid var(--pf-surface-2);
}
.pf-xml-code::-webkit-scrollbar-thumb:hover {
background: var(--pf-accent);
}
/* ─── Advanced code editor (textarea + Prism overlay) ────
A sits absolutely behind a
transparent textarea. Both share font metrics, padding, line-height and
`white-space: pre` so a character at row R column C lines up across layers.
JS keeps the 's scrollTop/scrollLeft mirrored to the textarea's. */
.pf-code-editor {
position: relative;
background: var(--pf-surface-2);
border: 1px solid var(--pf-border);
border-left: 3px solid var(--pf-accent);
border-radius: var(--pf-radius-md);
overflow: hidden;
transition: border-color 0.15s var(--pf-ease);
}
.pf-code-editor:focus-within {
border-color: var(--pf-accent-strong);
box-shadow: 0 0 0 2px var(--pf-accent-ring);
}
/* Highlighted mirror. Reuses .pf-xml-code's palette (tokens are coloured by
the shared .pf-xml-code .token.* rules below) but disables its own border,
max-height and radius since the wrapper owns those. */
.pf-code-editor__view {
position: absolute;
inset: 0;
margin: 0;
background: transparent;
border: none;
border-radius: 0;
max-height: none;
pointer-events: none;
overflow: hidden;
}
.pf-code-editor__view code {
display: block;
min-height: 100%;
}
/* Transparent textarea on top. Caret/selection remain visible because the
text itself (rendered transparent) lines up 1:1 with the Prism-painted
characters behind it. */
.pf-code-editor__input {
position: relative;
display: block;
width: 100%;
padding: 0.75rem 0.875rem;
margin: 0;
font-family: var(--pf-font-mono);
font-size: 0.7188rem;
line-height: 1.55;
color: transparent;
caret-color: var(--pf-text);
background: transparent;
border: none;
outline: none;
resize: vertical;
white-space: pre;
overflow: auto;
tab-size: 2;
min-height: 15rem;
}
.pf-code-editor__input::selection {
color: transparent;
background: rgba(139, 92, 246, 0.35);
}
.pf-code-editor__input::placeholder {
color: var(--pf-text-muted);
opacity: 0.6;
}
/* ─── Prism token theme (scoped to .pf-xml-code) ──────────
We don't pull Prism's default CSS - it targets token classes with
generic greens/blues that fight the indigo/violet palette. Instead
we paint each token in a palette-native colour. Scoping to
.pf-xml-code keeps this from leaking onto elsewhere. */
.pf-xml-code .token.comment,
.pf-xml-code .token.prolog,
.pf-xml-code .token.cdata {
color: var(--pf-text-subtle);
font-style: italic;
}
.pf-xml-code .token.doctype {
color: var(--pf-text-muted);
font-weight: 500;
}
.pf-xml-code .token.punctuation {
color: var(--pf-text-muted);
}
/* Light theme: indigo tag / fuchsia attr / burnt-orange value - works against
a white/slate surface. Dark theme: the sidebar's card background carries a
violet tint, so the indigo/violet tag colour that worked on light blends
into the chrome and becomes unreadable. We shift to three distinct hues
(cool sky for tags, warm amber for attr-names, soft green for strings) so
every token stands off the violet surface regardless of theme. */
.pf-xml-code .token.tag {
color: var(--pf-accent-strong);
font-weight: 500;
}
html.theme-dark .pf-xml-code .token.tag {
color: #7dd3fc;
}
/* sky-300 */
.pf-xml-code .token.tag .token.punctuation {
color: var(--pf-accent);
opacity: 0.75;
}
html.theme-dark .pf-xml-code .token.tag .token.punctuation {
color: #7dd3fc;
opacity: 0.55;
}
.pf-xml-code .token.attr-name {
color: #c026d3;
}
/* fuchsia-600 */
html.theme-dark .pf-xml-code .token.attr-name {
color: #fbbf24;
}
/* amber-400 */
.pf-xml-code .token.attr-value,
.pf-xml-code .token.string {
color: #c2410c;
/* orange-700 */
}
html.theme-dark .pf-xml-code .token.attr-value,
html.theme-dark .pf-xml-code .token.string {
color: #86efac;
/* green-300 */
}
.pf-xml-code .token.attr-value .token.punctuation {
color: inherit;
opacity: 0.55;
}
.pf-xml-code .token.entity,
.pf-xml-code .token.namespace {
color: var(--pf-accent);
}
html.theme-dark .pf-xml-code .token.entity,
html.theme-dark .pf-xml-code .token.namespace {
color: #f472b6;
/* pink-400 */
}
/* ─── Additional token types for non-XML languages (JSON / batch /
powershell / ini / vbnet). Reuse the XML palette so the CodeEditor
looks consistent regardless of which Prism grammar produced it. */
.pf-xml-code .token.keyword,
.pf-xml-code .token.selector,
.pf-xml-code .token.important,
.pf-xml-code .token.atrule,
.pf-xml-code .token.class-name {
color: var(--pf-accent-strong);
font-weight: 500;
}
html.theme-dark .pf-xml-code .token.keyword,
html.theme-dark .pf-xml-code .token.selector,
html.theme-dark .pf-xml-code .token.important,
html.theme-dark .pf-xml-code .token.atrule,
html.theme-dark .pf-xml-code .token.class-name {
color: #c4b5fd;
/* violet-300 */
}
.pf-xml-code .token.property,
.pf-xml-code .token.variable,
.pf-xml-code .token.constant,
.pf-xml-code .token.symbol {
color: #c026d3;
}
html.theme-dark .pf-xml-code .token.property,
html.theme-dark .pf-xml-code .token.variable,
html.theme-dark .pf-xml-code .token.constant,
html.theme-dark .pf-xml-code .token.symbol {
color: #fbbf24;
/* amber-400 */
}
.pf-xml-code .token.function,
.pf-xml-code .token.builtin {
color: var(--pf-accent);
font-weight: 500;
}
html.theme-dark .pf-xml-code .token.function,
html.theme-dark .pf-xml-code .token.builtin {
color: #67e8f9;
/* cyan-300 */
}
.pf-xml-code .token.number,
.pf-xml-code .token.boolean,
.pf-xml-code .token.null,
.pf-xml-code .token.regex {
color: #c2410c;
}
html.theme-dark .pf-xml-code .token.number,
html.theme-dark .pf-xml-code .token.boolean,
html.theme-dark .pf-xml-code .token.null,
html.theme-dark .pf-xml-code .token.regex {
color: #f0abfc;
/* fuchsia-300 */
}
.pf-xml-code .token.operator,
.pf-xml-code .token.url {
color: var(--pf-text);
opacity: 0.8;
}
/* ─── XML expand modal ────────────────────────────────────
Overlay uses the shared .pf-overlay backdrop-blur, then centres a
wide dialog (up to 1200px) that takes most of the viewport so a
large autounattend.xml can actually breathe. */
.pf-xml-modal.pf-overlay {
align-items: center;
padding: 4vh 4vw;
}
.pf-xml-dialog {
width: min(75rem, 100%);
max-height: 92vh;
background: var(--pf-modal-bg);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
border: 1px solid var(--pf-modal-border);
border-radius: var(--pf-radius-lg);
box-shadow:
var(--pf-card-highlight),
0 32px 90px rgba(0, 0, 0, 0.35),
0 0 100px var(--pf-accent-ring);
display: flex;
flex-direction: column;
overflow: hidden;
opacity: 0;
transform: translateY(-16px) scale(0.96);
transition:
opacity 0.32s var(--pf-ease-out),
transform 0.4s var(--pf-ease-out);
}
.pf-overlay.is-open .pf-xml-dialog {
opacity: 1;
transform: translateY(0) scale(1);
}
.pf-xml-dialog__header {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.875rem 1.125rem;
border-bottom: 1px solid var(--pf-border);
}
.pf-xml-dialog__title {
font-weight: 600;
font-size: 0.9375rem;
color: var(--pf-text);
}
.pf-xml-dialog__actions {
margin-left: auto;
display: inline-flex;
gap: 0.25rem;
}
.pf-xml-dialog .pf-xml-code {
margin: 0.875rem;
max-height: none;
flex: 1;
min-height: 0;
font-size: 0.8125rem;
line-height: 1.6;
border-left-width: 4px;
}
/* ─── XML preview FAB ─────────────────────────────────────
A compact floating action button pinned to the bottom-right of the viewport.
Replaces the old sticky 3rd-column preview panel - the form now has that
width to breathe in, and the XML is one click (or Ctrl+Shift+X) away. */
.pf-xml-fab {
position: fixed;
right: 1.5rem;
bottom: 1.5rem;
z-index: 40;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 0.875rem;
border-radius: 999px;
background: var(--pf-chrome-bg);
border: 1px solid var(--pf-border-strong);
color: var(--pf-text);
cursor: pointer;
backdrop-filter: blur(12px) saturate(160%);
-webkit-backdrop-filter: blur(12px) saturate(160%);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.18),
0 2px 6px rgba(0, 0, 0, 0.08);
transition:
transform 0.18s var(--pf-ease),
background 0.18s var(--pf-ease),
border-color 0.18s var(--pf-ease),
box-shadow 0.25s var(--pf-ease);
}
.pf-xml-fab:hover {
transform: translateY(-1px);
background: var(--pf-surface-2);
border-color: var(--pf-accent);
box-shadow:
0 12px 28px rgba(0, 0, 0, 0.22),
0 0 18px var(--pf-accent-ring);
}
.pf-xml-fab:active {
transform: translateY(0);
}
.pf-xml-fab:focus-visible {
outline: 2px solid var(--pf-accent);
outline-offset: 2px;
}
.pf-xml-fab__icon {
display: inline-flex;
color: var(--pf-accent);
}
.pf-xml-fab__icon svg {
width: 1.125rem;
height: 1.125rem;
}
.pf-xml-fab__label {
font-weight: 600;
font-size: 0.8125rem;
letter-spacing: 0.02em;
}
.pf-xml-fab__count {
font-family: var(--pf-font-mono);
font-size: 0.6875rem;
color: var(--pf-text-subtle);
padding: 0.125rem 0.4rem;
background: var(--pf-surface-2);
border: 1px solid var(--pf-border);
border-radius: var(--pf-radius-sm);
}
.pf-xml-fab.is-pulsing {
animation: xmlFabPulse 0.9s var(--pf-ease);
}
.pf-xml-fab.is-pulsing .pf-xml-fab__count {
animation: xmlFabCountBlink 0.9s var(--pf-ease);
}
@keyframes xmlFabPulse {
0% {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), 0 0 0 0 var(--pf-accent-ring);
}
50% {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), 0 0 0 10px transparent;
}
100% {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), 0 0 0 0 transparent;
}
}
@keyframes xmlFabCountBlink {
0%,
100% {
color: var(--pf-text-subtle);
}
30% {
color: var(--pf-accent);
}
}
@media (prefers-reduced-motion: reduce) {
.pf-xml-fab.is-pulsing,
.pf-xml-fab.is-pulsing .pf-xml-fab__count {
animation: none;
}
}
@media (max-width: 600px) {
.pf-xml-fab {
right: 0.75rem;
bottom: 0.75rem;
padding: 0.5rem 0.75rem;
}
.pf-xml-fab__label {
display: none;
}
}
/* ─── Responsive tweaks ────────────────────────────────── */
@media (max-width: 820px) {
.pf-breadcrumbs {
display: none;
}
.pf-icon-btn {
padding: 0.375rem 0.5rem;
}
}
@media (max-width: 600px) {
/* Hide language labels - just flags on tight mobile header */
.pf-switcher:not(.pf-switcher--icon) .pf-switcher__btn>span:not(.pf-switcher__icon) {
display: none;
}
.pf-switcher:not(.pf-switcher--icon) .pf-switcher__btn {
padding: 0.375rem 0.5rem;
}
.layout {
padding: 0.375rem !important;
gap: 0.375rem !important;
}
.layout>.header {
top: 0.375rem !important;
padding: 0 0.75rem !important;
}
}
@media (max-width: 420px) {
.pf-icon-btn {
display: none;
}
/* Ctrl+K shortcut still works via kbd */
}
/* ─── Motion reduction ───────────────────────────────────
WAI guidance: kill decorative/hover motion but keep progress
indicators visible. A user with reduced-motion preference still
expects to see the loading spinner / plane - just not flashy
card-lifts or transform transitions.
Explicit opt-in list instead of a universal `*` rule so the
loader animations survive. */
@media (prefers-reduced-motion: reduce) {
fluent-card.pf-card--interactive,
fluent-card.pf-card--interactive::before,
fluent-button[appearance="accent"]::part(control),
.pf-switcher__indicator,
.pf-switcher__btn,
.fluent-nav-link,
.pf-brand,
.pf-author,
.pf-footer-link {
transition-duration: 0.01ms !important;
}
/* Page-enter is driven by WAAPI in js/theme.js and downgrades to a
plain opacity fade when matchMedia reports reduce=true. No CSS
rule is needed here.
Theme crossfade on colored properties is motion-free - it stays
on for reduced-motion users. View Transitions (which do a paint
snapshot crossfade, still motion-free) also stay on. */
fluent-card.pf-card--interactive:hover {
transform: none !important;
}
fluent-button[appearance="accent"]:hover::part(control),
.fluent-nav-link:hover {
transform: none !important;
}
}
/* ─── Section group sub-heading ──────────────────────────────
Separates logical clusters of checkboxes (e.g. Explorer,
System, Edge) inside a single section. Uses the same muted
text tone as option descriptions so it reads as metadata,
not as a second-level header competing with the section
title. */
.pf-section__group-heading {
margin: 1.25rem 0 0.25rem;
color: var(--pf-text-muted);
font-size: 0.8125rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* The first group heading in a section doesn't need the top
margin - the section's own spacing already handles it. */
.pf-section__options>.pf-section__group-heading:first-child {
margin-top: 0;
}
/* ─── Radio group ────────────────────────────────────────────
Used by OptionKind.Radio (and the bespoke lock-keys /
sticky-keys forms). Vertical stack of labelled radios with
enough spacing that the click target isn't cramped. */
.pf-radio-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.pf-radio {
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
color: var(--pf-text);
font-size: 0.95rem;
line-height: 1.4;
}
.pf-radio input[type="radio"] {
accent-color: var(--pf-accent);
width: 1rem;
height: 1rem;
margin: 0;
cursor: pointer;
}
.pf-radio__label {
user-select: none;
}
/* ─── Checkbox group (CheckboxGroup kind) ────────────────────
Stacked checkboxes where each item corresponds to one
InlineValues entry. Uses the same rhythm as pf-radio-group
so both feel like members of the same control family. */
.pf-checkbox-group {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.pf-checkbox-row {
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
color: var(--pf-text);
font-size: 0.95rem;
line-height: 1.4;
}
.pf-checkbox-row__label {
user-select: none;
}
/* ─── Textarea ───────────────────────────────────────────────
Full-width, resizable-vertical only so a long script stays
within the option card. */
.pf-textarea {
width: 100%;
}
/* ─── Wizard step runway ─────────────────────────────────────
Takes the loading-screen plane-on-runway motif and shrinks it into a
horizontal step indicator. Progress flows left → right along the same
S-curve: the track is a faint guide, the trail a gradient accent that
fades toward its tail, and the plane rides the curve at --pf-step-progress
(0-100%). 36px tall, 240px wide by default - fits next to "Step 2 of 5". */
.pf-step-runway {
--pf-step-progress: 0%;
position: relative;
width: 15rem;
height: 2.25rem;
/* Allow the runway to shrink (down to ~9rem) on narrow viewports so it
stays inside the wrapping step-header row instead of pushing siblings
out. The plane's offset-path uses the SVG's 240x36 viewBox via
preserveAspectRatio="none", so non-uniform scaling is fine. */
flex: 0 1 15rem;
min-width: 9rem;
max-width: 100%;
}
.pf-step-runway__wave {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
overflow: visible;
fill: none;
stroke-linecap: round;
}
.pf-step-runway__track {
stroke: var(--pf-border-strong);
stroke-width: 1.5;
opacity: 0.35;
}
/* The trail grows from 0 → progress% by masking its stroke with a left→right
linear gradient. Dash-based reveals are brittle across path shapes; a mask
is exact at every percentage and also gives us the fading tail for free. */
.pf-step-runway__trail {
stroke: url(#pfStepTrailGradient);
stroke-width: 2.5;
stroke-linecap: round;
/* All stops are fractions of the current progress so the gradient stays
monotonic at every step. Fixed absolute stops (e.g. "30%") overshoot
the progress tip at low percentages and blanked the line out entirely,
leaving only the filter drop-shadow visible as a violet blob. */
-webkit-mask-image: linear-gradient(to right,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.35) calc(var(--pf-step-progress) * 0.15),
rgba(0, 0, 0, 0.9) calc(var(--pf-step-progress) * 0.55),
rgba(0, 0, 0, 1) calc(var(--pf-step-progress) - 0.5%),
rgba(0, 0, 0, 0) var(--pf-step-progress));
mask-image: linear-gradient(to right,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.35) calc(var(--pf-step-progress) * 0.15),
rgba(0, 0, 0, 0.9) calc(var(--pf-step-progress) * 0.55),
rgba(0, 0, 0, 1) calc(var(--pf-step-progress) - 0.5%),
rgba(0, 0, 0, 0) var(--pf-step-progress));
filter: drop-shadow(0 0 3px var(--pf-accent));
transition: -webkit-mask-image 0.5s var(--pf-ease-out),
mask-image 0.5s var(--pf-ease-out);
}
.pf-step-runway__plane {
position: absolute;
top: 0;
left: 0;
width: 1.375rem;
height: 1.375rem;
pointer-events: none;
color: var(--pf-accent);
/* Ride the same S-curve at the current progress. Match the SVG's 240x36
coordinate space so the plane lands on the crest. */
offset-path: path("M 2 18 Q 32 4, 62 18 T 122 18 T 182 18 T 238 18");
offset-rotate: auto 90deg;
offset-anchor: center;
offset-distance: var(--pf-step-progress);
filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 10px var(--pf-accent));
transition: offset-distance 0.5s var(--pf-ease-out);
}
@media (prefers-reduced-motion: reduce) {
.pf-step-runway__trail,
.pf-step-runway__plane {
transition: none;
}
}
/* ─── Docs index: plain filter input above the cards grid ────
Reuses the pf-nav-search primitive without the wrapping card - on the
index page the input is a single standalone control, not a toolbar.
Auto margins centre it inside the page's max-width so the filter sits
over the middle of the cards grid rather than hugging the left edge. */
.pf-docs-search {
max-width: 32.5rem;
margin: 0 auto 1rem;
}
/* ─── Themed global scrollbars ───────────────────────────────
The default Chrome/Edge scrollbar reads as "system OS chrome" which
clashes with the bespoke violet-on-dark palette. The custom rule below
paints a thin accent-gradient thumb on a translucent track so scrollbars
feel like part of the app. Firefox uses scrollbar-color / width - a close
visual match without pseudo-elements. */
*::-webkit-scrollbar {
width: 0.625rem;
height: 0.625rem;
}
*::-webkit-scrollbar-track {
background: rgba(var(--pf-bg-rgb), 0.4);
border-radius: 10px;
}
*::-webkit-scrollbar-thumb {
background: linear-gradient(180deg,
rgba(var(--pf-accent-rgb), 0.85) 0%,
rgba(var(--pf-accent-rgb), 0.55) 100%);
border: 2px solid transparent;
background-clip: padding-box;
border-radius: 10px;
min-height: 2.25rem;
transition: background 0.2s var(--pf-ease);
}
*::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg,
var(--pf-accent) 0%,
var(--pf-accent-strong) 100%);
background-clip: padding-box;
}
*::-webkit-scrollbar-corner {
background: transparent;
}
/* Firefox */
* {
scrollbar-color: rgba(var(--pf-accent-rgb), 0.65) rgba(var(--pf-bg-rgb), 0.35);
scrollbar-width: thin;
}
/* ─── Go-to-top plane button ─────────────────────────────────
Appears bottom-left after the user scrolls past ~400px. Clicking it
scrolls the page back to top with a brief "takeoff" animation on the
plane glyph (tilt + translate). Mirrors the loading screen motif. */
.pf-go-top {
position: fixed;
right: 1.5rem;
/* Default: corner. The body:has(.pf-xml-fab) rule below pushes us up
on /advanced where the XML preview FAB takes the corner instead.
Sitting in the corner everywhere else avoids overlapping inline
page controls (e.g. wizard Back/Next/Finish buttons at the bottom
of /wizard/* on small screens). */
bottom: 1.5rem;
width: 3.25rem;
height: 3.25rem;
display: none;
align-items: center;
justify-content: center;
padding: 0;
/* Solid accent gradient instead of glass - the previous translucent
chrome with subtle border washed out on light backgrounds and read
as "decorative", not "press me". Now it pops as a dedicated CTA. */
background: var(--pf-accent-gradient);
border: 0;
border-radius: 50%;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.18) inset,
0 8px 24px rgba(var(--pf-accent-rgb), 0.42),
0 2px 6px rgba(0, 0, 0, 0.18);
/* White plane glyph with its own gradient drop-shadow gives the
button a "lit launchpad" feel without burying the icon in a halo. */
color: #ffffff;
cursor: pointer;
z-index: 60;
transition:
transform 0.25s var(--pf-ease-out),
box-shadow 0.3s var(--pf-ease-out),
opacity 0.25s var(--pf-ease),
filter 0.2s var(--pf-ease);
opacity: 1;
}
.pf-go-top.is-visible {
display: inline-flex;
}
/* On /advanced the XML-preview FAB occupies the bottom-right corner, so
stack the go-top above it instead of overlapping. */
body:has(.pf-xml-fab) .pf-go-top {
bottom: 5.5rem;
}
@media (max-width: 600px) {
.pf-go-top {
right: 1rem;
bottom: 1rem;
width: 2.5rem;
height: 2.5rem;
}
body:has(.pf-xml-fab) .pf-go-top {
bottom: 4.25rem;
}
}
.pf-go-top:hover {
transform: translateY(-4px) scale(1.04);
filter: brightness(1.1) saturate(1.1);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.22) inset,
0 14px 36px rgba(var(--pf-accent-rgb), 0.55),
0 4px 10px rgba(0, 0, 0, 0.2);
}
.pf-go-top:active {
transform: translateY(0) scale(0.96);
transition:
transform 0.1s var(--pf-ease),
box-shadow 0.1s var(--pf-ease),
filter 0.1s var(--pf-ease);
}
.pf-go-top:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 3px;
}
.pf-go-top:active .pf-go-top__plane {
animation: pfGoTopTakeoff 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.pf-go-top__plane {
width: 1.5rem;
height: 1.5rem;
display: block;
/* Nose-up default orientation so the glyph looks ready to launch. */
transform: rotate(-45deg);
/* On the new accent-gradient background a halo isn't needed - instead
give the glyph a soft inner glow + a subtle drop shadow underneath
so it reads as engraved on the button. */
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}
@keyframes pfGoTopTakeoff {
0% {
transform: rotate(-45deg) translate(0, 0);
opacity: 1;
}
60% {
transform: rotate(-45deg) translate(12px, -18px);
opacity: 0.4;
}
61% {
transform: rotate(-45deg) translate(-12px, 18px);
opacity: 0;
}
80% {
transform: rotate(-45deg) translate(-12px, 18px);
opacity: 0;
}
100% {
transform: rotate(-45deg) translate(0, 0);
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.pf-go-top:active .pf-go-top__plane {
animation: none;
}
}
/* ─── Sidebar toolbar (filter + view toggle) ──────────────
Sits above the groups; small search input + single icon button to
flip between grouped and flat. Uses native so
the OS-provided clear icon survives (plus our explicit ✕ when focus
is lost). Keeps the surface dense but not cramped. */
.pf-nav-toolbar {
display: flex;
align-items: stretch;
gap: 0.375rem;
padding: 0.25rem 0.375rem 0.5rem;
border-bottom: 1px solid var(--pf-border);
margin-bottom: 0.25rem;
}
.pf-nav-search {
position: relative;
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
}
.pf-nav-search__icon {
position: absolute;
left: 0.5rem;
top: 50%;
transform: translateY(-50%);
font-size: 0.85rem;
color: var(--pf-text-subtle);
pointer-events: none;
}
.pf-nav-search__input {
width: 100%;
padding: 0.375rem 1.625rem 0.375rem 1.75rem;
background: var(--pf-surface-2);
border: 1px solid var(--pf-border);
border-radius: var(--pf-radius-sm);
color: var(--pf-text);
font-size: 0.86rem;
font-family: inherit;
outline: none;
transition: border-color 0.15s var(--pf-ease), background 0.15s var(--pf-ease);
}
.pf-nav-search__input::placeholder {
color: var(--pf-text-muted);
opacity: 0.7;
}
.pf-nav-search__input:focus {
border-color: var(--pf-accent);
background: var(--pf-bg);
}
.pf-nav-search__input::-webkit-search-cancel-button {
display: none;
}
.pf-nav-search__clear {
position: absolute;
right: 0.25rem;
top: 50%;
transform: translateY(-50%);
width: 1.25rem;
height: 1.25rem;
border: none;
background: transparent;
color: var(--pf-text-muted);
font-size: 0.75rem;
cursor: pointer;
border-radius: 3px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.pf-nav-search__clear:hover {
color: var(--pf-text);
background: var(--pf-surface-2);
}
.pf-nav-toggle {
flex: 0 0 auto;
width: 2rem;
height: 2rem;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--pf-surface-2);
border: 1px solid var(--pf-border);
border-radius: var(--pf-radius-sm);
color: var(--pf-text-muted);
font-size: 0.95rem;
cursor: pointer;
transition: color 0.15s var(--pf-ease), background 0.15s var(--pf-ease), border-color 0.15s var(--pf-ease);
}
.pf-nav-toggle:hover {
color: var(--pf-text);
border-color: var(--pf-border-strong);
}
.pf-nav-toggle.is-active {
color: var(--pf-accent-strong);
border-color: var(--pf-accent);
background: rgba(var(--pf-accent-rgb), 0.12);
}
.pf-nav-flat {
list-style: none;
margin: 0;
padding: 2px 0.25rem;
display: flex;
flex-direction: column;
gap: 1px;
}
.pf-nav-flat__empty {
padding: 0.75rem 0.625rem;
text-align: center;
color: var(--pf-text-muted);
font-size: 0.85rem;
}
/* Prev/Next nav at the bottom of each Advanced section - same palette as the
Advanced.Preview modal buttons for visual continuity. */
.pf-section-nav {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 1px solid var(--pf-border);
}
/* ─── Advanced sidebar (grouped nav) ──────────────────────
The 28 sections live under ~6 collapsible groups so the list reads
as chapters, not a wall of links. Native handles open/close;
the group owning the active section opens automatically (razor-side). */
.pf-nav-card {
padding: 0.375rem !important;
}
.pf-nav-groups {
display: flex;
flex-direction: column;
gap: 2px;
}
.pf-nav-group {
border-radius: var(--pf-radius-sm);
background: transparent;
}
.pf-nav-group[open] {
background: rgba(var(--pf-accent-rgb, 139, 92, 246), 0.06);
}
.pf-nav-group__summary {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
list-style: none;
cursor: pointer;
color: var(--pf-text-muted);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
border-radius: var(--pf-radius-sm);
user-select: none;
transition: color 0.15s var(--pf-ease), background 0.15s var(--pf-ease);
}
.pf-nav-group__summary::-webkit-details-marker {
display: none;
}
.pf-nav-group__summary::marker {
content: '';
}
.pf-nav-group__summary::after {
content: '▾';
margin-left: auto;
font-size: 0.75rem;
color: var(--pf-text-subtle);
transform: rotate(-90deg);
transition: transform 0.2s var(--pf-ease);
}
.pf-nav-group[open]>.pf-nav-group__summary::after {
transform: rotate(0deg);
}
.pf-nav-group__summary:hover {
color: var(--pf-text);
background: rgba(var(--pf-accent-rgb, 139, 92, 246), 0.1);
}
.pf-nav-group__icon {
font-size: 0.95rem;
line-height: 1;
}
.pf-nav-group__title {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pf-nav-group__count {
font-size: 0.7rem;
font-weight: 600;
color: var(--pf-text-subtle);
padding: 1px 0.375rem;
background: var(--pf-surface-2);
border: 1px solid var(--pf-border);
border-radius: 10px;
min-width: 1.25rem;
text-align: center;
}
.pf-nav-group__list {
list-style: none;
margin: 0;
padding: 2px 0.25rem 0.375rem 1.75rem;
display: flex;
flex-direction: column;
gap: 1px;
}
.pf-nav-group__link {
display: block;
padding: 0.375rem 0.625rem;
border-radius: var(--pf-radius-sm);
color: var(--pf-text-muted);
text-decoration: none;
font-size: 0.9rem;
line-height: 1.3;
transition: color 0.15s var(--pf-ease), background 0.15s var(--pf-ease);
}
.pf-nav-group__link:hover {
color: var(--pf-text);
background: rgba(var(--pf-accent-rgb, 139, 92, 246), 0.08);
}
.pf-nav-group__link.active {
color: var(--pf-accent-strong);
background: rgba(var(--pf-accent-rgb, 139, 92, 246), 0.18);
font-weight: 600;
}
/* ─── Loading skeleton placeholders ───────────────────────
Shown in place of a real control while its data source is still
fetching (e.g. FluentSelect populated from a 130-entry JSON). The
shimmer is a shifting linear-gradient overlay; `prefers-reduced-motion`
replaces it with a static tint so the animation doesn't trigger users
who've opted out of motion. */
.pf-skeleton {
display: block;
border-radius: var(--pf-radius-md);
background: linear-gradient(90deg,
var(--pf-surface-2) 0%,
rgba(var(--pf-accent-rgb, 139, 92, 246), 0.08) 50%,
var(--pf-surface-2) 100%);
background-size: 200% 100%;
animation: pfSkeletonShimmer 1.4s ease-in-out infinite;
border: 1px solid var(--pf-border);
}
.pf-skeleton--select {
height: 2.5rem;
width: 100%;
}
@keyframes pfSkeletonShimmer {
0% {
background-position: 100% 0;
}
100% {
background-position: -100% 0;
}
}
@media (prefers-reduced-motion: reduce) {
.pf-skeleton {
animation: none;
background: var(--pf-surface-2);
}
}
/* ─── Custom scripts section ──────────────────────────────
Each phase is a card: title + description on the left, "Add script"
on the right. Slots grow below as the user adds them; empty phases
show a dashed placeholder so the section's shape reads immediately. */
.pf-scripts-phase {
display: flex;
flex-direction: column;
gap: 0.75rem;
padding: 1rem 1.125rem;
background: rgba(var(--pf-bg-rgb), 0.55);
border: 1px solid var(--pf-border);
border-radius: var(--pf-radius-lg);
}
.pf-scripts-phase__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.pf-scripts-phase__title {
margin: 0 0 0.2rem;
font-size: 1.05rem;
font-weight: 700;
color: var(--pf-text);
}
.pf-scripts-phase__desc {
margin: 0;
max-width: 68ch;
color: var(--pf-text-muted);
font-size: 0.9rem;
line-height: 1.5;
}
.pf-scripts-phase__empty {
padding: 0.75rem 1rem;
color: var(--pf-text-muted);
background: transparent;
border: 1px dashed var(--pf-border);
border-radius: var(--pf-radius-md);
font-size: 0.9rem;
text-align: center;
}
.pf-script-slot {
display: flex;
flex-direction: column;
gap: 0.55rem;
padding: 0.85rem 0.95rem;
background: var(--pf-surface-2);
border: 1px solid var(--pf-border);
border-radius: var(--pf-radius-md);
}
.pf-script-slot__head {
display: flex;
align-items: center;
gap: 0.6rem;
}
.pf-script-slot__num {
font-family: var(--pf-font-mono);
font-size: 0.85rem;
color: var(--pf-text-muted);
min-width: 1.625rem;
}
.pf-components {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.pf-component-slot {
display: flex;
flex-direction: column;
gap: 0.55rem;
padding: 0.85rem 0.95rem;
background: var(--pf-surface-2);
border: 1px solid var(--pf-border);
border-radius: var(--pf-radius-md);
}
.pf-component-slot__head {
display: flex;
align-items: center;
gap: 0.6rem;
}
.pf-component-slot__num {
font-family: var(--pf-font-mono);
font-size: 0.85rem;
color: var(--pf-text-muted);
min-width: 1.625rem;
}
.pf-scripts-global {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: 1rem 1.125rem;
margin-top: 0.5rem;
background: rgba(var(--pf-bg-rgb), 0.55);
border: 1px solid var(--pf-border);
border-radius: var(--pf-radius-md);
}
/* ─── Users section ────────────────────────────────────────
Four self-contained blocks (accounts / first-logon / expiration /
lockout). Each `.pf-users__block` already has `.pf-option` framing
from the shared Advanced palette; we override the default compact
padding + add breathing room between blocks so the long form
doesn't feel crammed. */
.pf-users {
gap: 1.25rem;
}
.pf-section--advanced .pf-users__block {
padding: 1.125rem 1.25rem;
display: flex;
flex-direction: column;
gap: 0.875rem;
}
.pf-section--advanced .pf-users__block+.pf-users__block {
margin-top: 0.25rem;
}
.pf-users__block .pf-option__description {
margin: 0;
}
/* Accounts table: wraps so narrow viewports scroll rather than squish
the cells. Header row uses the muted palette so it reads as chrome. */
.pf-users__table-wrap {
/* No overflow clipping: setting overflow-x: auto here implicitly coerced
overflow-y to auto (CSS spec - can't mix visible with a scrolling axis),
which chopped the Group dropdown's listbox at the table's bottom edge.
The table is narrow enough on any real viewport that horizontal overflow
isn't an issue; if it ever happens the page scrolls instead of the wrap. */
overflow: visible;
border: 1px solid var(--pf-border);
border-radius: var(--pf-radius-md);
background: rgba(var(--pf-bg-rgb), 0.4);
}
.pf-users__table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 0.92rem;
}
.pf-users__table th,
.pf-users__table td {
padding: 0.55rem 0.7rem;
text-align: left;
vertical-align: middle;
}
.pf-users__table th {
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--pf-text-muted);
background: var(--pf-surface-2);
border-bottom: 1px solid var(--pf-border);
}
.pf-users__table tbody tr+tr td {
border-top: 1px solid var(--pf-border);
}
.pf-users__table-actions {
width: 2.75rem;
text-align: center !important;
}
.pf-users__password {
display: flex;
align-items: center;
gap: 0.3rem;
width: 100%;
}
.pf-users__icon-btn {
flex: 0 0 auto;
width: 1.875rem;
height: 1.875rem;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
background: transparent;
color: var(--pf-text-muted);
border: 1px solid transparent;
border-radius: var(--pf-radius-sm);
cursor: pointer;
transition: color 0.15s var(--pf-ease), background 0.15s var(--pf-ease), border-color 0.15s var(--pf-ease);
}
.pf-users__icon-btn:hover {
color: var(--pf-text);
background: var(--pf-surface-2);
border-color: var(--pf-border);
}
.pf-users__icon-btn:focus-visible {
outline: 2px solid var(--pf-accent-ring);
outline-offset: 2px;
}
.pf-users__icon-btn--danger:hover {
color: #ef4444;
border-color: #ef4444;
}
.pf-users__icon-btn svg {
width: 1rem;
height: 1rem;
display: block;
}
.pf-users__empty {
padding: 0.875rem 1rem;
color: var(--pf-text-muted);
background: rgba(var(--pf-bg-rgb), 0.4);
border: 1px dashed var(--pf-border);
border-radius: var(--pf-radius-md);
font-size: 0.92rem;
}
.pf-users__add-btn {
align-self: flex-start;
}
.pf-users__sub-field {
display: flex;
flex-direction: column;
gap: 0.35rem;
padding-left: 1.25rem;
border-left: 2px solid var(--pf-border);
max-width: 26.25rem;
}
.pf-users__sub-label {
font-size: 0.88rem;
font-weight: 600;
color: var(--pf-text);
}
.pf-users__checkbox-stack {
display: flex;
flex-direction: column;
gap: 0.55rem;
margin-top: 0.25rem;
}
.pf-users__hint {
display: block;
color: var(--pf-text-muted);
font-size: 0.8rem;
line-height: 1.4;
padding-left: 1.75rem;
}
/* Give the shared option-card grid a touch more breathing room so that
radio groups, number fields and checkbox clusters don't visually run
into each other. 0.75 was noticeably tight; 1rem reads as a clear
divider without wasting vertical space. */
.pf-section--advanced .pf-section__options {
gap: 1rem;
}
/* Consistent pad+gap on the RadioGroup rendered by SectionView so the
FluentRadio rows aren't wedged against the description line above. */
.pf-section--advanced fluent-radio-group.pf-radio-group {
display: flex;
flex-direction: column;
gap: 0.4rem;
margin-top: 0.1rem;
}
/* When a radio group carries illustrative images (taskbar-search etc), give each
row more breathing room so the image doesn't crowd the next option. */
.pf-section--advanced fluent-radio-group.pf-radio-group--images {
gap: 0.75rem;
}
.pf-radio__with-image {
display: inline-flex;
align-items: center;
gap: 0.625rem;
}
.pf-radio__image {
width: 8.75rem;
height: auto;
max-height: 2.25rem;
display: block;
border-radius: 4px;
border: 1px solid var(--pf-border);
background: var(--pf-surface-2);
padding: 2px;
object-fit: contain;
}
/* ─── 404 page ─────────────────────────────────────────────────
Hero composition: "4 [icon] 4" where the centre 0 is the actual
app icon. Stays on-brand and gives the user three on-ramps
(home / wizard / docs) instead of just a sad "go home". */
.pf-404 {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.25rem;
padding: clamp(2rem, 6vw, 4.5rem) 1rem 4rem;
max-width: 720px;
margin: 0 auto;
text-align: center;
position: relative;
isolation: isolate;
}
.pf-404__hero {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(0.75rem, 2vw, 1.5rem);
line-height: 1;
user-select: none;
}
.pf-404__digit {
font-family: var(--pf-font-sans);
font-weight: 800;
font-size: clamp(6rem, 18vw, 11.25rem);
letter-spacing: -0.05em;
background: var(--pf-accent-gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
/* Soft purple glow so the gradient text reads against any theme. */
text-shadow: 0 8px 28px rgba(var(--pf-accent-rgb), 0.18);
}
.pf-404__icon {
display: inline-block;
width: clamp(5rem, 15vw, 9.5rem);
height: clamp(5rem, 15vw, 9.5rem);
/* Bob the icon gently to suggest it's hovering, not lost. */
animation: pf-404-bob 3.6s var(--pf-ease-out) infinite;
filter: drop-shadow(0 14px 28px rgba(var(--pf-accent-rgb), 0.32));
}
.pf-404__icon svg {
width: 100%;
height: 100%;
display: block;
}
@keyframes pf-404-bob {
0%,
100% {
transform: translateY(0) rotate(0);
}
50% {
transform: translateY(-10px) rotate(-3deg);
}
}
/* Subtle dashed flight trail behind the hero - visually echoes the
one in the loading overlay so the page feels native. */
.pf-404__trail {
position: absolute;
top: clamp(1rem, 4vw, 2.5rem);
left: 0;
right: 0;
width: 100%;
height: 80px;
z-index: -1;
color: var(--pf-accent);
opacity: 0.32;
pointer-events: none;
}
.pf-404__title {
margin: 0.5rem 0 0;
font-family: var(--pf-font-sans);
font-size: clamp(1.5rem, 3.2vw, 2.25rem);
font-weight: 700;
color: var(--pf-text);
letter-spacing: -0.01em;
}
.pf-404__message {
margin: 0;
max-width: 32rem;
font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
color: var(--pf-text-muted);
line-height: 1.55;
}
.pf-404__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.625rem;
margin-top: 0.75rem;
}
/* Respect users who opted out of motion. */
@media (prefers-reduced-motion: reduce) {
.pf-404__icon {
animation: none;
}
}
/* ─── View Transitions API ────────────────────────────────────
Browser-native snapshot crossfade between routes, driven from
js/view-transitions.js (it intercepts internal anchor clicks and
wraps Blazor's navigation in document.startViewTransition()).
The default UA crossfade is 250ms linear "old fades out, new fades
in" - it works but reads as plain. We replace it with directional
slide+fade keyframes so navigation feels intentional: the page that
leaves drifts up and dissolves, the page that enters lifts in from
below. Mirrors the wave-of-paper feel of the rest of the brand.
Falls back silently in browsers that don't implement the spec
(Firefox at time of writing) - the pseudo-elements simply don't
exist there and Blazor's normal click handler runs the navigation
without any crossfade. No flicker, just instant nav. */
::view-transition-old(root) {
animation: 0.32s cubic-bezier(0.4, 0, 1, 1) both pfViewOldOut;
}
::view-transition-new(root) {
animation: 0.42s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both pfViewNewIn;
}
@keyframes pfViewOldOut {
to {
opacity: 0;
transform: translateY(-12px) scale(0.99);
}
}
@keyframes pfViewNewIn {
from {
opacity: 0;
transform: translateY(18px) scale(0.992);
}
}
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0.18s;
animation-delay: 0s;
}
@keyframes pfViewOldOut {
to {
opacity: 0;
}
}
@keyframes pfViewNewIn {
from {
opacity: 0;
}
}
}