/* ======================================== Reset & Base ======================================== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { height: 100%; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; position: relative; overflow-x: hidden; } /* ======================================== Brand defaults (overridden by head.html inline style) ======================================== */ :root { --brand-primary: #4B0082; --brand-accent: #9400D3; --brand-text: #DDA0DD; --brand-subtle: #F0E6FA; } /* ======================================== Theme: System (default) ======================================== */ [data-theme="system"] { /* Default system = light-ish values that match `light` theme */ --bg-color: #ffffff; --text-color: var(--brand-text); --container-bg: color-mix(in srgb, var(--brand-primary) 8%, #ffffff); --container-text: var(--brand-primary); --container-subtext: #4a5568; --container-border: var(--brand-accent); --footer-color: #5a6a7e; --link-color: var(--brand-primary); } @media (prefers-color-scheme: dark) { [data-theme="system"] { --bg-color: #1a1a2e; --text-color: #e0e0e0; --container-bg: color-mix(in srgb, var(--brand-primary) 80%, transparent); --container-text: var(--brand-text); --container-subtext: var(--brand-subtle); --container-border: var(--brand-accent); --footer-color: #a0a0b0; --link-color: #ffcc00; } } /* Fallback for environments where prefers-color-scheme isn't reported reliably (some Linux desktop/browser combos). JS adds `os-dark` class to the element when the browser reports dark; mimic the @media block so `data-theme="system"` follows the OS. */ html.os-dark[data-theme="system"] { --bg-color: #1a1a2e; --text-color: #e0e0e0; --container-bg: color-mix(in srgb, var(--brand-primary) 80%, transparent); --container-text: var(--brand-text); --container-subtext: var(--brand-subtle); --container-border: var(--brand-accent); --footer-color: #a0a0b0; --link-color: #ffcc00; } /* Explicit os-light fallback to ensure parity with manual `light` selection */ html.os-light[data-theme="system"] { --bg-color: #ffffff; --text-color: var(--brand-text); --container-bg: color-mix(in srgb, var(--brand-primary) 8%, #ffffff); --container-text: var(--brand-primary); --container-subtext: #4a5568; --container-border: var(--brand-accent); --footer-color: #5a6a7e; --link-color: var(--brand-primary); } /* ======================================== Theme: Light ======================================== */ [data-theme="light"] { /* bind canonical brand tokens to the light variant */ --brand-primary: var(--brand-primary-light); --brand-accent: var(--brand-accent-light); --brand-text: var(--brand-text-light); --brand-subtle: var(--brand-subtle-light); --bg-color: #ffffff; --text-color: var(--brand-text); --container-bg: color-mix(in srgb, var(--brand-primary) 8%, #ffffff); --container-text: var(--brand-primary); --container-subtext: var(--brand-subtle); --container-border: var(--brand-accent); --footer-color: var(--brand-subtle); --link-color: var(--brand-primary); } /* ======================================== Theme: Grey ======================================== */ /* grey theme removed */ /* ======================================== Theme: Dark ======================================== */ [data-theme="dark"] { /* bind canonical brand tokens to the dark variant */ --brand-primary: var(--brand-primary-dark); --brand-accent: var(--brand-accent-dark); --brand-text: var(--brand-text-dark); --brand-subtle: var(--brand-subtle-dark); --bg-color: #1a1a2e; --text-color: #e0e0e0; --container-bg: color-mix(in srgb, var(--brand-primary) 80%, transparent); --container-text: var(--brand-text); --container-subtext: var(--brand-subtle); --container-border: var(--brand-accent); --footer-color: #808090; --link-color: #ffcc00; } /* ======================================== Theme Application ======================================== */ [data-theme="light"] body, [data-theme="dark"] body { background-color: var(--bg-color) !important; text-shadow: none !important; animation: none !important; } body { color: var(--text-color); } /* ======================================== Layout: Container ======================================== */ .container { background: var(--container-bg); border-radius: 16px; border: 2px solid var(--container-border); max-width: 800px; width: 100%; padding: 60px 40px; position: relative; z-index: 10; backdrop-filter: blur(10px); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); } .container h1 { font-size: 3rem; margin-bottom: 10px; color: var(--container-text); font-weight: 700; letter-spacing: -0.02em; } .container p { font-size: 1.2rem; margin-top: 10px; color: var(--container-subtext); } .container a { color: var(--link-color); text-decoration: none; font-weight: bold; transition: color 0.2s ease; } .container a:hover { text-decoration: underline; } /* ======================================== Layout: Footer ======================================== */ .site-footer { position: fixed; bottom: 10px; left: 0; right: 0; text-align: center; font-size: 0.9rem; color: var(--footer-color); z-index: 10; } /* ======================================== 404 Page ======================================== */ .error-code { font-size: 6rem; font-weight: 700; color: var(--container-text); line-height: 1; margin-bottom: 20px; } .error-message { font-size: 1.3rem; color: var(--container-subtext); margin-bottom: 30px; } .return-link { display: inline-block; margin-top: 20px; font-size: 1.1rem; color: var(--link-color); text-decoration: none; padding: 12px 24px; border: 2px solid var(--container-border); border-radius: 8px; transition: all 0.2s ease; font-weight: bold; } .return-link:hover { background: rgba(255, 255, 255, 0.1); text-decoration: none; } /* ======================================== Animated Gradient Background ======================================== */ @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ======================================== Image Content ======================================== */ .poster-wrapper { position: relative; display: inline-block; width: 100%; } .poster-wrapper img { max-width: 100%; height: auto; display: block; border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); animation: fadeInScale 0.8s ease-out; } @keyframes fadeInScale { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } /* ======================================== Theme Switcher UI ======================================== */ .theme-switcher { position: fixed; bottom: 20px; right: 20px; z-index: 1000; } .theme-switcher-toggle { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--container-border); background: var(--container-bg); color: var(--text-color); cursor: pointer; font-size: 20px; display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); } .theme-switcher-toggle:hover { transform: scale(1.1); } .theme-icon { line-height: 1; } .theme-switcher-menu { display: none; position: absolute; bottom: 54px; right: 0; background: var(--container-bg); border: 2px solid var(--container-border); border-radius: 12px; padding: 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); backdrop-filter: blur(10px); min-width: 140px; } .theme-switcher-menu.active { display: block; } .theme-switcher-menu button { display: block; width: 100%; padding: 8px 12px; border: none; background: transparent; color: var(--text-color); cursor: pointer; font-size: 14px; text-align: left; border-radius: 6px; transition: background 0.15s ease, color 0.15s ease; white-space: nowrap; } .theme-switcher-menu button:hover { background: color-mix(in srgb, var(--text-color) 8%, transparent); } .theme-switcher-menu button.active-theme { background: color-mix(in srgb, var(--text-color) 12%, transparent); color: var(--text-color); font-weight: 600; } /* ======================================== Responsive: Tablet ======================================== */ @media (max-width: 768px) { .container { padding: 60px 40px; margin: 0 20px; } .container h1 { font-size: 3rem; } .container p { font-size: 1.1rem; } .error-code { font-size: 4.5rem; } .site-footer { font-size: 0.85rem; } } /* ======================================== Responsive: Mobile ======================================== */ @media (max-width: 480px) { .container { padding: 40px 30px; margin: 0 15px; } .container h1 { font-size: 2.5rem; } .container p { font-size: 1rem; } .error-code { font-size: 3.5rem; } .return-link { font-size: 1rem; padding: 10px 20px; } .site-footer { font-size: 0.8rem; } }