404.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>404 — Not Found</title>
    <meta name="description" content="This page doesn't exist, but HydePHP probably does what you're looking for.">
    <link rel="icon" href="/favicon.ico">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            color-scheme: dark;

            --bg: #16110d;
            --bg-2: #1c1611;
            --panel: #211a15;
            --panel-soft: #2a211b;

            --edge: rgba(245, 235, 224, 0.08);
            --edge-2: rgba(245, 235, 224, 0.15);

            --ink: #f6efe6;
            --muted: #ab9c8e;
            --faint: #7c6f64;

            --ember: #f0533b;
            --ember-2: #ff7d59;
            --gold: #e0a75a;
            --sage: #86b98e;

            --display: "Playfair Display", Georgia, "Times New Roman", serif;
            --body: "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
            --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

            --radius: 14px;
            --radius-sm: 10px;
        }

        * { box-sizing: border-box; }

        html { -webkit-text-size-adjust: 100%; }

        body {
            margin: 0;
            min-width: 320px;
            background: var(--bg);
            color: var(--ink);
            font-family: var(--body);
            line-height: 1.5;
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            padding: 40px 20px;
        }

        /* ambient warmth */
        body::before {
            content: "";
            position: fixed;
            inset: 0;
            pointer-events: none;
            background:
                radial-gradient(120% 60% at 78% -8%, rgba(240, 83, 59, 0.16), transparent 60%),
                radial-gradient(90% 50% at 8% 4%, rgba(224, 167, 90, 0.08), transparent 55%);
            z-index: 0;
        }

        a { color: inherit; text-decoration: none; }

        :focus-visible {
            outline: 2px solid var(--ember-2);
            outline-offset: 2px;
            border-radius: 4px;
        }

        .container {
            position: relative;
            z-index: 1;
            width: 100%;
            max-width: 620px;
            text-align: center;
        }

        .code {
            font-family: var(--display);
            font-weight: 700;
            font-size: clamp(5rem, 18vw, 8rem);
            line-height: 0.95;
            letter-spacing: -0.03em;
            background: linear-gradient(165deg, var(--ember) 0%, #ff7d59 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin: 0 0 14px;
        }

        .message {
            font-family: var(--display);
            font-weight: 600;
            font-size: clamp(1.5rem, 4vw, 2.2rem);
            letter-spacing: -0.01em;
            margin: 0 0 20px;
            line-height: 1.1;
        }

        .description {
            color: var(--muted);
            font-size: 1.02rem;
            margin: 0 0 32px;
            max-width: 52ch;
            margin-left: auto;
            margin-right: auto;
        }

        .cta-group {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            justify-content: center;
            margin-bottom: 40px;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            height: 46px;
            padding: 0 20px;
            border-radius: 999px;
            font-weight: 600;
            font-size: 0.96rem;
            cursor: pointer;
            transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
            border: 1px solid transparent;
        }

        .btn-primary {
            background: linear-gradient(150deg, var(--ember) 0%, #d23a22 100%);
            color: #fff;
            box-shadow: 0 12px 30px -12px rgba(240, 83, 59, 0.7);
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 16px 36px -12px rgba(240, 83, 59, 0.8);
        }

        .btn-secondary {
            border: 1px solid var(--edge-2);
            background: rgba(0, 0, 0, 0.18);
            color: var(--muted);
        }

        .btn-secondary:hover {
            color: var(--ink);
            border-color: var(--muted);
        }

        .nav {
            padding-top: 28px;
            border-top: 1px solid var(--edge);
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
            color: var(--faint);
            font-size: 0.85rem;
        }

        .nav a {
            color: var(--muted);
            border-bottom: 1px solid transparent;
            transition: color 0.15s ease, border-color 0.15s ease;
        }

        .nav a:hover {
            color: var(--ember-2);
            border-color: var(--ember);
        }

        /* enter animation */
        .container {
            opacity: 0;
            transform: translateY(20px);
            animation: enter 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        }

        @keyframes enter {
            to {
                opacity: 1;
                transform: none;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .container {
                opacity: 1;
                transform: none;
                animation: none;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="code">404</div>
        <h1 class="message">Page not found</h1>
        <p class="description">
            This path doesn't exist, but our documentation, CLI tools, and community are thriving.
            Let's get you where you need to go.
        </p>

        <div class="cta-group">
            <a class="btn btn-primary" href="/">
                Back to analytics home
                <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none">
                    <path d="M3 12h18M13 7l6 5-6 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </a>
            <a class="btn btn-secondary" href="https://hydephp.com/docs">
                Read the docs
            </a>
        </div>

        <nav class="nav">
            <a href="https://hydephp.com/">HydePHP.com</a>
            <a href="https://hydephp.com/docs">Documentation</a>
            <a href="https://github.com/hydephp/hyde" target="_blank" rel="noopener">GitHub</a>
            <a href="https://discord.hydephp.com" target="_blank" rel="noopener">Discord</a>
        </nav>
    </div>
</body>
</html>