/* Sitewide light theme — complements Tailwind utility classes */ /* Brand color fallbacks — Tailwind CDN may not emit custom bg-brand-orange utilities */ .bg-brand-orange { background-color: #ff6b35 !important; } a.bg-brand-orange:hover, button.bg-brand-orange:hover, .bg-brand-orange.hover\:bg-orange-600:hover { background-color: #ea580c !important; } .text-brand-orange { color: #ff6b35 !important; } .from-brand-orange { --tw-gradient-from: #ff6b35 var(--tw-gradient-from-position) !important; } html { color-scheme: light only; } html.dark-mode, .dark-mode { background-color: #ffffff !important; color: #1f2937 !important; } #dark-mode-toggle, .theme-toggle-btn { display: none !important; } .glowing-orb { opacity: 0.35 !important; } .orb-1 { background: rgba(255, 107, 53, 0.07) !important; } .orb-2 { background: rgba(59, 130, 246, 0.05) !important; } .bento-card { background: #ffffff !important; border: 1px solid #e5e7eb !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important; backdrop-filter: none !important; } .bento-card::before { background: linear-gradient(90deg, transparent, rgba(255, 107, 53, 0.15), transparent) !important; } .bento-card:hover { border-color: rgba(255, 107, 53, 0.35) !important; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08) !important; } /* Avoid forcing white on intentional dark utility leftovers outside panels */ .share-modal, #share-modal .share-modal { background-color: #ffffff !important; } [class*="bg-[#111]"]:not(.share-modal), [class*="bg-[#0a0a0a]"]:not(body) { background-color: #ffffff !important; } [class*="bg-[#0a0a0a]/"] { background-color: rgba(255, 255, 255, 0.95) !important; } .md-preview h1 { color: #111827 !important; } .md-preview h2 { color: #1f2937 !important; } .md-preview h3 { color: #374151 !important; } .md-preview code { background: #f3f4f6 !important; color: #1f2937 !important; } .md-preview pre { background: #f9fafb !important; border: 1px solid #e5e7eb; } .bg-glow { background: radial-gradient(circle, rgba(255, 107, 53, 0.06) 0%, rgba(255, 255, 255, 0) 70%) !important; } .dark-mode .bg-white, .dark-mode .bg-gray-50 { background-color: #ffffff !important; } .site-footer .text-white { color: #111827 !important; } .site-footer .text-gray-300, .site-footer .text-gray-400 { color: #6b7280 !important; } .site-footer .border-gray-800 { border-color: #e5e7eb !important; } /* Nav dropdowns — always light, even if legacy dark-mode class remains on */ .dark-mode .dropdown-menu, html.dark .dropdown-menu { background: #ffffff !important; border-color: #e5e7eb !important; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1) !important; } .dark-mode .dropdown-item, html.dark .dropdown-item { color: #1f2937 !important; } .dark-mode .dropdown-item .item-text .item-name, html.dark .dropdown-item .item-text .item-name { color: #111827 !important; } .dark-mode .dropdown-item .item-text .item-desc, html.dark .dropdown-item .item-text .item-desc { color: #6b7280 !important; } .dark-mode .dropdown-item:hover, html.dark .dropdown-item:hover { color: #ff6b35 !important; background: rgba(255, 107, 53, 0.08) !important; } /* Light pages — body copy should not use washed-out gray-400 */ body.bg-white .text-gray-400, body.bg-white .text-gray-300 { color: #4b5563 !important; } .dropdown-item .item-text .item-desc { color: #4b5563 !important; } /* Legacy dark-theme heading colors on light pages */ body.bg-white :is(h1, h2, h3).text-gray-100, body.bg-white .text-gray-100.font-extrabold, body.bg-white .text-gray-100.font-bold { color: #111827 !important; } .site-footer .bg-white\/5 { background: #ffffff !important; border-color: #e5e7eb !important; } .site-footer .bg-black\/40 { background: #f3f4f6 !important; border-color: #e5e7eb !important; color: #6b7280 !important; } .diff-added { background: rgba(34, 197, 94, 0.12) !important; color: #15803d !important; } .diff-removed { background: rgba(239, 68, 68, 0.1) !important; color: #b91c1c !important; } .diff-unchanged { color: #6b7280 !important; }