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:has(> [data-md-error-page])
 *     [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]
 *
 * The page carries this file itself: `src/Support/ErrorPage.php` inlines it, with its imports, into
 * every error page (`Stylesheets::bundle()`) — beside the application's Vite tags when there is a
 * build (`layoutStyles()`), inside the whole fallback stylesheet when there is none
 * (`fallbackStyles()`, plan step 40) — so an application imports nothing for its error pages
 * (plan step 46). The body is still matched only when it holds the layout
 * (`body:has(> [data-md-error-page])`): an application that imports `all.css` has this file in
 * its bundle beside every other page, where a bare `body` rule would restyle them all.
 *
 * The page's font is the foundation's, `--md-ref-typeface-brand` on `html` (foundation/base.css),
 * as the old `font-sans` was; only the fallback, which has no `@font-face`, uses a system stack.
 *
 * Colours from the roles (`docs/reference/m3/styles.md` § Typography, "Accessibility
 * requirements": surface/on-surface); the display code over its primary-container shape is a
 * correct on-primary-container/primary-container contrast pairing; 24px page gutters and the
 * 600px growth of the art and headline follow the same spacing rules as every other M3 surface in
 * the library. `--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 behind
 * `prefers-reduced-motion: no-preference` like every other ambient animation in the library.
 */

@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:has(> [data-md-error-page]) {
        margin: 0;
        min-height: 100dvh;
        background-color: var(--md-sys-color-surface);
        color: var(--md-sys-color-on-surface);
    }

    [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;
    }
}