livewire-material/resources/css/components/error-page.css

/*
 * `errors::minimal`: the layout the package's 403/404/419/429/500/503 pages and the framework's
 * own 401/402 (which extend this layout, `src/Support/ErrorPage.php`'s docblock) render through.
 * A page's own `@section`s fill `title`, `code`, `headline`, `message`, `shape` and `actions`
 * (`resources/views/error-pages/errors/minimal.blade.php`'s header) — none of that is this file's
 * concern, only the geometry and colour of the parts that show them:
 *
 *   body
 *     [data-md-error-page]
 *       [data-md-error-art]
 *         [data-md-error-shape]   an <x-shape>, turning once a minute unless reduced motion asks
 *                                 otherwise (its `svg` fills the art box and is coloured here,
 *                                 since <x-shape size> only takes a fixed px, not "fill parent")
 *         [data-md-error-code]    the status, in display type over the shape
 *       [data-md-error-headline]  what happened
 *       [data-md-error-message]  one sentence on what to do, only when `headline` is its own
 *                                 section (otherwise `message` doubles as the headline)
 *       [data-md-error-actions]
 *
 * `body` carries no hook of its own — `src/Support/ErrorPage.php`'s `fallbackStyles()`, the
 * stylesheet an application without a Vite build gets instead, styles the bare element the same
 * way, so this file matches it rather than inventing a hook the fallback has no equivalent of.
 * That fallback still needs updating by hand when this file changes, until step 40 replaces how
 * it is built.
 *
 * The page's own font is a literal system stack, not `var(--md-ref-typeface-brand)`: an error
 * page must read correctly before any webfont has had a chance to load (`@font-face` is what the
 * fallback path has none of, and this file matches it even on the path that does), and Tailwind's
 * `font-sans` this replaces never carried the brand font either
 * (`resources/css/tokens/theme.css`'s `--font-sans` is the only utility that does).
 *
 * Colours from the roles (`docs/reference/m3/styles.md` § Typography, "Accessibility
 * requirements": surface/on-surface); the display code over its primary-container shape is the
 * pairing `docs/audits/m3-alignment/containment.md`'s "Aligned" section confirms; 24px page
 * gutters and the 600px growth of the art and headline are the same numbers the audit found
 * clean. `--md-sys-typescale-emphasized-display-lg` is the code's weight and roundedness; the
 * shape's 60s linear turn has no motion token (`--md-sys-motion-*` pairs a duration with a spring
 * for a state change, not an ambient loop) and stays a literal, gated the way the audit's
 * "Aligned" section already found it: behind `prefers-reduced-motion: no-preference`.
 */

@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;

@import './button.css';
@import './shape.css';

@layer material.components {
    body {
        margin: 0;
        min-height: 100dvh;
        background-color: var(--md-sys-color-surface);
        color: var(--md-sys-color-on-surface);
        font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
        -webkit-font-smoothing: antialiased;
    }

    [data-md-error-page] {
        display: flex;
        min-height: 100dvh;
        max-width: 576px;
        margin-inline: auto;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-inline: var(--md-sys-measurement-space300);
        padding-block: var(--md-sys-measurement-space600);
        text-align: center;
    }

    [data-md-error-art] {
        position: relative;
        display: grid;
        flex-shrink: 0;
        place-items: center;
        width: 192px;
        height: 192px;
    }

    @media (width >= 600px) {
        [data-md-error-art] {
            width: 240px;
            height: 240px;
        }
    }

    [data-md-error-shape] {
        position: absolute;
        inset: 0;
    }

    [data-md-error-shape] svg {
        width: 100%;
        height: 100%;
        color: var(--md-sys-color-primary-container);
    }

    @media (prefers-reduced-motion: no-preference) {
        [data-md-error-shape] {
            animation: material-error-turn 60s linear infinite;
        }
    }

    @keyframes material-error-turn {
        to {
            transform: rotate(1turn);
        }
    }

    [data-md-error-code] {
        position: relative;
        margin: 0;
        color: var(--md-sys-color-on-primary-container);
        font: var(--md-sys-typescale-emphasized-display-lg);
        letter-spacing: var(--md-sys-typescale-emphasized-display-lg-tracking);
        font-variation-settings: 'ROND' 100;
        font-variant-numeric: tabular-nums;
    }

    [data-md-error-headline] {
        margin: var(--md-sys-measurement-space500) 0 0;
        font: var(--md-sys-typescale-headline-md);
        letter-spacing: var(--md-sys-typescale-headline-md-tracking);
        text-wrap: balance;
    }

    @media (width >= 600px) {
        [data-md-error-headline] {
            font: var(--md-sys-typescale-headline-lg);
            letter-spacing: var(--md-sys-typescale-headline-lg-tracking);
        }
    }

    [data-md-error-message] {
        margin: 12px 0 0;
        max-width: 448px;
        color: var(--md-sys-color-on-surface-variant);
        font: var(--md-sys-typescale-body-lg);
        letter-spacing: var(--md-sys-typescale-body-lg-tracking);
        text-wrap: balance;
    }

    [data-md-error-actions] {
        display: flex;
        margin-top: var(--md-sys-measurement-space500);
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }
}