/* Light mode overrides for the public site (active when has no .dark class) */ html:not(.dark) .bg-charcoal { background-color: #F1EFE8 !important; } html:not(.dark) .bg-charcoal-light { background-color: #ffffff !important; } html:not(.dark) .from-charcoal { --tw-gradient-from: #F1EFE8 var(--tw-gradient-from-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; } html:not(.dark) .to-charcoal { --tw-gradient-to: #F1EFE8 var(--tw-gradient-to-position) !important; } html:not(.dark) .text-white { color: #2C2C2A !important; } html:not(.dark) .text-white\/90 { color: rgb(44 44 42 / 0.9) !important; } html:not(.dark) .text-white\/80 { color: rgb(44 44 42 / 0.8) !important; } html:not(.dark) .text-white\/70 { color: rgb(44 44 42 / 0.7) !important; } html:not(.dark) .text-white\/60 { color: rgb(44 44 42 / 0.6) !important; } html:not(.dark) .text-white\/50 { color: rgb(44 44 42 / 0.5) !important; } html:not(.dark) .text-white\/40 { color: rgb(44 44 42 / 0.4) !important; } html:not(.dark) .text-white\/30 { color: rgb(44 44 42 / 0.3) !important; } html:not(.dark) .text-white\/20 { color: rgb(44 44 42 / 0.2) !important; } html:not(.dark) .bg-white\/10 { background-color: rgb(44 44 42 / 0.1) !important; } html:not(.dark) .bg-white\/5 { background-color: rgb(44 44 42 / 0.05) !important; } html:not(.dark) .bg-white\/\[0\.03\] { background-color: rgb(44 44 42 / 0.03) !important; } html:not(.dark) .bg-white\/\[0\.05\] { background-color: rgb(44 44 42 / 0.05) !important; } html:not(.dark) .bg-white\/\[0\.06\] { background-color: rgb(44 44 42 / 0.06) !important; } html:not(.dark) .bg-white\/\[0\.08\] { background-color: rgb(44 44 42 / 0.08) !important; } html:not(.dark) .border-white\/10 { border-color: rgb(44 44 42 / 0.1) !important; } html:not(.dark) .border-white\/20 { border-color: rgb(44 44 42 / 0.2) !important; } html:not(.dark) .border-white\/30 { border-color: rgb(44 44 42 / 0.3) !important; } html:not(.dark) .border-white\/\[0\.08\] { border-color: rgb(44 44 42 / 0.08) !important; } html:not(.dark) .border-white\/\[0\.15\] { border-color: rgb(44 44 42 / 0.15) !important; } html:not(.dark) .hover\:bg-white\/10:hover { background-color: rgb(44 44 42 / 0.1) !important; } html:not(.dark) .hover\:bg-white\/\[0\.03\]:hover { background-color: rgb(44 44 42 / 0.03) !important; } html:not(.dark) .hover\:bg-white\/\[0\.05\]:hover { background-color: rgb(44 44 42 / 0.05) !important; } html:not(.dark) .hover\:bg-white\/\[0\.06\]:hover { background-color: rgb(44 44 42 / 0.06) !important; } html:not(.dark) .hover\:text-white:hover { color: #2C2C2A !important; } html:not(.dark) .hover\:border-white\/\[0\.15\]:hover { border-color: rgb(44 44 42 / 0.15) !important; } /* Form placeholders */ html:not(.dark) .placeholder-white\/20::placeholder { color: rgb(44 44 42 / 0.2) !important; } html:not(.dark) .placeholder-white\/30::placeholder { color: rgb(44 44 42 / 0.3) !important; } html:not(.dark) .placeholder-white\/50::placeholder { color: rgb(44 44 42 / 0.5) !important; } /* Mobile menu translucent background should be light in light mode */ html:not(.dark) .bg-charcoal\/95 { background-color: rgb(241 239 232 / 0.98) !important; } html:not(.dark) .bg-charcoal\/90 { background-color: rgb(241 239 232 / 0.95) !important; } /* Brand backgrounds should keep white text/borders in light mode too */ html:not(.dark) .bg-coral.text-white, html:not(.dark) .bg-coral .text-white, html:not(.dark) .bg-coral [class*="text-white"] { color: #ffffff !important; } html:not(.dark) .bg-amber.text-white, html:not(.dark) .bg-amber .text-white, html:not(.dark) .bg-amber [class*="text-white"] { color: #ffffff !important; } html:not(.dark) .bg-coral.border-white\/30, html:not(.dark) .bg-coral .border-white\/30 { border-color: rgb(255 255 255 / 0.3) !important; } html:not(.dark) .bg-coral [class*="border-white/"], html:not(.dark) .bg-coral [class*="border-white-["] { border-color: rgb(255 255 255 / 0.1) !important; } /* Invert the light logo so it stays visible on the light navbar/footer */ html:not(.dark) img[src*="/logos/code4genius_icon_light_256.svg"] { filter: invert(1); } /* Make prose-invert readable on the light background */ html:not(.dark) .prose-invert { --tw-prose-body: rgb(44 44 42 / 0.7); --tw-prose-headings: #2C2C2A; --tw-prose-lead: rgb(44 44 42 / 0.7); --tw-prose-links: #D85A30; --tw-prose-bold: #2C2C2A; --tw-prose-counters: rgb(44 44 42 / 0.6); --tw-prose-bullets: rgb(44 44 42 / 0.5); --tw-prose-hr: rgb(44 44 42 / 0.2); --tw-prose-quotes: #2C2C2A; --tw-prose-quote-borders: rgb(44 44 42 / 0.2); --tw-prose-captions: rgb(44 44 42 / 0.6); --tw-prose-code: #2C2C2A; --tw-prose-pre-code: #2C2C2A; --tw-prose-pre-bg: rgb(44 44 42 / 0.05); --tw-prose-th-borders: rgb(44 44 42 / 0.2); --tw-prose-td-borders: rgb(44 44 42 / 0.1); }