/* Status dots injected by /js/status.js next to service cards that carry a matching data-service attribute. Kept here rather than in theme.css since only this page uses them. */ .status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 9999px; margin-right: 4px; vertical-align: middle; } .status-dot-up { background-color: #22c55e; } .status-dot-down { background-color: #ef4444; } .status-dot-pending { background-color: #eab308; } .status-dot-maintenance { background-color: #a1a1aa; } .status-dot-unknown { background-color: #52525b; } /* Base Grid Color (Dark Mode & Custom Themes) */ .bg-grid { background-size: 40px 40px; background-image: linear-gradient(to right, color-mix(in oklab, var(--color-pink-500) 3%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in oklab, var(--color-pink-500) 3%, transparent) 1px, transparent 1px); } /* Themed keyboard focus states -- default browser focus rings clash against a dark background and wouldn't adapt across your 7 custom themes anyway. Uses the same --color-pink-500 variable the skater easter egg already relies on, so this automatically matches whichever theme is active, current or future ones. :focus-visible (not :focus) so mouse clicks don't show a ring, only real keyboard/assistive-tech navigation does. */ a:focus-visible, button:focus-visible, select:focus-visible { outline: 2px solid var(--color-pink-500); outline-offset: 2px; border-radius: 2px; } /* Light Mode Custom Variants -- scoped from .light now, not body.light, since the theme class lives on (see the blocking init script above and toggleTheme() below). */ /* Light Mode Custom Variants */ html.light body { background-color: var(--color-zinc-100); color: var(--color-zinc-900); background-image: linear-gradient(to right, color-mix(in oklab, var(--color-pink-500) 5%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in oklab, var(--color-pink-500) 5%, transparent) 1px, transparent 1px); } html.light .terminal-window { background-color: #e4e4e7; /* zinc-200 */ border-color: #d4d4d8; /* zinc-300 */ } html.light .terminal-body { background-color: rgba(255, 255, 255, 0.8); border-color: #d4d4d8; color: #27272a; /* zinc-800 */ } html.light .terminal-text { color: #18181b; } html.light .terminal-desc { color: #52525b; } html.light .service-card { background-color: #ffffff; border-color: #d4d4d8; color: #3f3f46; } html.light .service-card-active { background-color: #fdf2f8; /* pink-50 */ border-color: #ec4899; /* pink-500 */ color: #be185d; /* pink-700 */ } html.light .badge-box { background-color: #fdf2f8; border-color: #fbcfe8; } /* Error-page specific (404.html / 50x.html only) -- unused on index.html, harmless overhead in exchange for one shared stylesheet instead of two to keep in sync. The red accent classes (bg-red-950/20, border-red-900/40, etc., set directly in each error page's own markup) are deliberately NOT theme-reactive like the pink ones -- error pages should read as "something's wrong" regardless of which of the 7 custom themes is active elsewhere; a legibility/semantic choice, not an oversight. */ html.light .error-window { background-color: #e4e4e7; border-color: #fecaca; /* red-200 */ } html.light .error-body { background-color: rgba(255, 255, 255, 0.85); border-color: #fecaca; color: #27272a; } html.light .error-alert { background-color: #fef2f2; /* red-50 */ border-color: #fecaca; color: #b91c1c; /* red-700 */ } html.light .error-desc { color: #52525b; } /* Mobile nav dropdown panel -- a new floating surface, so it needs the same light-mode treatment as .terminal-window / .error-window above: the markup uses plain dark Tailwind utilities (bg-zinc-900, border-zinc-800, hover:bg-zinc-800) which pick up custom [data-theme="..."] palettes for free via CSS vars, but html.light replaces the whole palette with hardcoded hex instead of remapping vars, so it still needs an explicit override here like everything else does. */ .nav-menu-panel { background-color: rgba(24, 24, 27, 0.98); } html.light .nav-menu-panel { background-color: rgba(255, 255, 255, 0.97); border-color: #d4d4d8; /* zinc-300 */ } html.light .nav-menu-panel a { color: #3f3f46; /* zinc-700 */ } html.light .nav-menu-panel a:hover { background-color: #f4f4f5; /* zinc-100 */ color: #be185d; /* pink-700 */ } html.light .nav-menu-panel .border-zinc-800 { border-color: #e4e4e7; /* zinc-200, the panel's internal divider */ } /* Emerald accent contrast fix (mc-commands page) -- text-emerald-400 isn't part of the pink/zinc theme-variable system every other page uses, so on this site's 3 light-background themes the default Tailwind v4 emerald-400 (oklch, ~#00d492) drops to ~1.5-1.8:1 contrast against those backgrounds -- WCAG AA needs 4.5:1 for normal text. These three overrides swap in Tailwind's emerald-800 (#006045) only where the background is light enough to need it (clears 5.9-6.9:1 on all three); the other 6 dark-background themes already clear 6.2-10.3:1 with the default value and are left untouched. */ html.light { --color-emerald-400: #006045; } [data-theme="orange-vanilla"] { --color-emerald-400: #006045; } [data-theme="indigo-lilac"] { --color-emerald-400: #006045; } /* --- Custom Theme Mappings --- */ [data-theme="bronze-midnight"] { --color-pink-300: #df9b58; --color-pink-400: #CD7F32; --color-pink-500: #b56c25; --color-pink-600: #9c591a; --color-pink-900: #4a2705; --color-pink-950: #2b1501; --color-zinc-950: #14213D; --color-zinc-900: #1d2e54; --color-zinc-800: #273b6b; --color-zinc-400: #93a8db; --color-zinc-300: #b6c4e8; --color-zinc-100: #dfe5f5; } [data-theme="neon-violet"] { --color-pink-300: #d6ff66; --color-pink-400: #C8FF3D; --color-pink-500: #aee619; --color-pink-600: #93c70a; --color-pink-900: #334700; --color-pink-950: #1b2600; --color-zinc-950: #2D1B69; --color-zinc-900: #3c258a; --color-zinc-800: #4d31ab; --color-zinc-400: #a791f5; --color-zinc-300: #c5b5fa; --color-zinc-100: #e9e3fe; } [data-theme="orange-vanilla"] { /* Light Theme */ --color-pink-300: #fd905a; --color-pink-400: #FC6C26; --color-pink-500: #e8530b; --color-pink-600: #cc4504; --color-pink-900: #fce2d7; --color-pink-950: #faebd7; --color-zinc-950: #FFF4D6; --color-zinc-900: #ffebb5; --color-zinc-800: #fadd96; --color-zinc-400: #8c6a46; --color-zinc-300: #593f24; --color-zinc-100: #2b1c0e; } [data-theme="mint-graphite"] { --color-pink-300: #cffaf0; --color-pink-400: #B8F7E4; --color-pink-500: #93e8ce; --color-pink-600: #6dd9b8; --color-pink-900: #1f5444; --color-pink-950: #0f3026; --color-zinc-950: #25272C; --color-zinc-900: #2f3238; --color-zinc-800: #3c4048; --color-zinc-400: #9499a3; --color-zinc-300: #b5bac4; --color-zinc-100: #e2e5eb; } [data-theme="lime-olive"] { --color-pink-300: #e2ff9e; --color-pink-400: #CFFF74; --color-pink-500: #bae64c; --color-pink-600: #a1cc2e; --color-pink-900: #425907; --color-pink-950: #233300; --color-zinc-950: #2F3A1D; --color-zinc-900: #3c4a26; --color-zinc-800: #4a5c31; --color-zinc-400: #9db37b; --color-zinc-300: #bdd19f; --color-zinc-100: #e4f2cf; } [data-theme="indigo-lilac"] { /* Light Theme */ --color-pink-300: #8873f7; --color-pink-400: #5B3DF5; --color-pink-500: #4a2ee0; --color-pink-600: #3b20c2; --color-pink-900: #d6ccf5; --color-pink-950: #c9bcf0; --color-zinc-950: #E8DEFF; --color-zinc-900: #d9ccfa; --color-zinc-800: #c6b2f7; --color-zinc-400: #715ea1; --color-zinc-300: #4d3a7d; --color-zinc-100: #291a4d; } [data-theme="orchid-plum"] { --color-pink-300: #ee9cff; --color-pink-400: #E46CFF; --color-pink-500: #d147f0; --color-pink-600: #b522d6; --color-pink-900: #5e1170; --color-pink-950: #3b0547; --color-zinc-950: #2E0F35; --color-zinc-900: #3f1747; --color-zinc-800: #52215c; --color-zinc-400: #ad7cb8; --color-zinc-300: #cca3d6; --color-zinc-100: #ebd3f2; } /* Typewriter cursor for the name heading -- respects reduced-motion via the JS gate below, this is just the blinking-caret visual. */ #typewriter-cursor { display: inline-block; width: 0.05em; border-right: 3px solid #ec4899; animation: blink-caret 0.9s step-end infinite; margin-left: 2px; } @keyframes blink-caret { 0%, 100% { border-color: #ec4899; } 50% { border-color: transparent; } } /* ASCII Skater Easter Egg */ .ascii-skater { position: fixed; bottom: 2rem; left: -150px; /* Start hidden off-screen */ font-family: var(--font-mono); color: var(--color-pink-500); /* Uses your active theme's accent color! */ font-weight: 800; line-height: 1.1; z-index: 9999; pointer-events: none; /* Prevents it from blocking clicks */ white-space: pre; animation: skate-across 4s linear forwards; } @keyframes skate-across { 0% { transform: translateX(0) translateY(0) rotate(0deg); } 40% { transform: translateX(45vw) translateY(0) rotate(0deg); } 45% { transform: translateX(50vw) translateY(-80px) rotate(-15deg); } /* Pop the ollie */ 50% { transform: translateX(55vw) translateY(0) rotate(0deg); } /* Land */ 100% { transform: translateX(calc(100vw + 300px)) translateY(0) rotate(0deg); } /* Off-screen right */ }