/* Shared custom styles, loaded on every page. */ /* Custom scrollbar (Webkit) */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #fff; } ::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #999; } /* Utility to hide scrollbar but allow scroll */ .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* Respect users who prefer reduced motion: disable entrance animations and force animated elements (which start at opacity-0) to be visible. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .animate-fade-in, .animate-slide-up, .reveal-init { opacity: 1 !important; transform: none !important; } } /* Reveal-on-scroll. Initial hidden state is added by JS (main.js) so content stays visible when JS is disabled. */ .reveal-init { opacity: 0; transform: translateY(24px); } .reveal-in { opacity: 1; transform: none; transition: opacity 0.7s ease-out, transform 0.7s ease-out; } /* Visible keyboard focus for links and buttons */ a:focus-visible, button:focus-visible { outline: 2px solid #007AFF; outline-offset: 2px; border-radius: 4px; } /* ============================================================ DARK MODE Every rule is scoped under html.dark, so light mode is never affected. The .dark class is toggled on by an inline no-flash script in each page and by the floating toggle button created in main.js. ============================================================ */ html.dark { color-scheme: dark; } html.dark body { background-color: #0b0b0d; color: #e6e6e8; } /* Surfaces */ html.dark .bg-white { background-color: #17171a !important; } html.dark .bg-white\/80 { background-color: rgba(20, 20, 23, 0.82) !important; } html.dark .bg-white\/70 { background-color: rgba(23, 23, 26, 0.7) !important; } html.dark .bg-gray-50, html.dark .bg-gray-50\/50 { background-color: #101013 !important; } html.dark .bg-gray-100, html.dark .bg-gray-100\/80 { background-color: #232327 !important; } html.dark .bg-gray-200 { background-color: #2a2a2e !important; } /* Accent chip backgrounds */ html.dark .bg-blue-50 { background-color: #16202e !important; } html.dark .bg-blue-100 { background-color: #1a2740 !important; } html.dark .bg-purple-50 { background-color: #1d1830 !important; } html.dark .bg-purple-100 { background-color: #241a38 !important; } html.dark .bg-red-50, html.dark .bg-\[\#FEE8EB\] { background-color: #2a1517 !important; } /* Primary buttons (bg-black text-white) invert to a light button */ html.dark .bg-black { background-color: #f5f5f7 !important; color: #0a0a0b !important; } html.dark .hover\:bg-gray-800:hover { background-color: #e2e2e6 !important; } html.dark .hover\:bg-gray-200:hover { background-color: #d8d8dc !important; } html.dark .hover\:bg-gray-50:hover { background-color: #1c1c20 !important; } html.dark .hover\:bg-gray-100:hover { background-color: #232327 !important; } /* Text */ html.dark .text-apple-text, html.dark .text-black { color: #e6e6e8 !important; } html.dark .text-apple-text\/80 { color: rgba(230, 230, 232, 0.8) !important; } html.dark .text-gray-900 { color: #f2f2f4 !important; } html.dark .text-gray-800 { color: #e6e6e8 !important; } html.dark .text-gray-700 { color: #d4d4d8 !important; } html.dark .text-gray-600 { color: #b6b6bc !important; } html.dark .text-gray-500, html.dark .text-apple-gray { color: #9a9aa2 !important; } html.dark .text-gray-400 { color: #85858d !important; } /* Accent text, brightened for dark backgrounds */ html.dark .text-apple-blue { color: #4da3ff !important; } html.dark .text-blue-600 { color: #60a5fa !important; } html.dark .text-blue-800 { color: #bfdbfe !important; } html.dark .text-blue-900 { color: #93c5fd !important; } html.dark .text-purple-600 { color: #a78bfa !important; } html.dark .text-purple-700, html.dark .text-purple-800, html.dark .text-purple-900 { color: #c4b5fd !important; } html.dark .text-green-600 { color: #34d399 !important; } html.dark .text-red-600 { color: #f87171 !important; } /* Article drop cap */ html.dark .first-letter\:text-black::first-letter { color: #f2f2f4 !important; } /* Borders */ html.dark .border-gray-50 { border-color: #1f1f24 !important; } html.dark .border-gray-100 { border-color: #26262b !important; } html.dark .border-gray-200 { border-color: #2e2e34 !important; } html.dark .border-blue-100 { border-color: #1e2a40 !important; } html.dark .border-purple-100 { border-color: #2c2440 !important; } html.dark .border-white { border-color: #17171a !important; } /* Special elements with bright gradients that class overrides cannot reach */ html.dark #venture > div { background-image: none !important; background-color: #161114 !important; } /* The ZoniteAI wordmark is black text + red rings; give it a white plate so it stays readable (and on-brand) on the dark venture card. */ html.dark #venture img { box-sizing: content-box; background-color: #ffffff; padding: 0.4rem 0.6rem; border-radius: 0.6rem; } html.dark #expertise > div:first-child { opacity: 0.18 !important; } /* The EN logo is solid black; invert it to show on the dark nav */ html.dark nav img { filter: invert(1); } /* Dark scrollbar */ html.dark ::-webkit-scrollbar-track { background: #0b0b0d; } html.dark ::-webkit-scrollbar-thumb { background: #3a3a40; } html.dark ::-webkit-scrollbar-thumb:hover { background: #4a4a52; } /* ---- Floating theme toggle (button created in main.js) ---- */ #theme-toggle { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 60; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; border-radius: 9999px; background: #ffffff; color: #1d1d1f; border: 1px solid #e5e7eb; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); cursor: pointer; transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease; } #theme-toggle:hover { transform: scale(1.06); } html.dark #theme-toggle { background: #17171a; color: #f2f2f4; border-color: #2e2e34; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); } .theme-icon-sun { display: none; } html.dark .theme-icon-moon { display: none; } html.dark .theme-icon-sun { display: inline; }