access-to/404.html at main · dougdevitre/access-to · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="robots" content="noindex, nofollow">
  <title>Page Not Found — Access To</title>
  <link rel="icon" href="favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="favicon.svg">
  <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=DM+Serif+Display&family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="styles.css">
  <script>(function(){var t=localStorage.getItem("theme");if(t==="dark"||(!t&&window.matchMedia("(prefers-color-scheme: dark)").matches)){document.documentElement.setAttribute("data-theme","dark")}})()</script>
  <style>
    .error-page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; text-align: center; padding: 2rem; }
    .error-code { font-family: var(--font-display); font-size: clamp(4rem, 10vw, 8rem); color: var(--color-muted); line-height: 1; margin-bottom: 0.5rem; }
    .error-message { font-size: 1.25rem; color: var(--color-muted); margin-bottom: 2rem; max-width: 480px; }
    .error-actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
  </style>
</head>
<body>
  <header>
    <div class="topbar">
      <div class="topbar-logo"><a href="index.html">Access To</a></div>
      <nav class="topbar-links">
        <a href="index.html#pillars">Pillars</a>
        <a href="index.html#how-it-works">How It Works</a>
        <a href="https://github.com/dougdevitre" target="_blank" rel="noopener">GitHub</a>
        <button class="theme-toggle" onclick="toggleTheme()" aria-label="Toggle dark mode">
          <svg class="icon-moon" viewBox="0 0 20 20" fill="currentColor"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/></svg>
          <svg class="icon-sun" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"/></svg>
        </button>
      </nav>
    </div>
  </header>
  <main>
    <div class="error-page">
      <div class="error-code">404</div>
      <h1>Page not found</h1>
      <p class="error-message">The page you're looking for doesn't exist or has been moved. Let's get you back on track.</p>
      <div class="error-actions">
        <a href="index.html" class="btn-primary">Go Home</a>
        <a href="index.html#pillars" class="btn-secondary">Browse Pillars</a>
      </div>
    </div>
  </main>
  <footer class="site-footer"><div class="footer-bottom"><p>&copy; 2026 Doug Devitre. Open source under MIT unless otherwise noted.</p></div></footer>
  <script>function toggleTheme(){var d=document.documentElement.getAttribute("data-theme")==="dark";if(d){document.documentElement.removeAttribute("data-theme");localStorage.setItem("theme","light")}else{document.documentElement.setAttribute("data-theme","dark");localStorage.setItem("theme","dark")}}</script>
</body></html>