/* * Dark Mode Overrides * Applied when .dark-mode class is on element */ html.dark-mode { color-scheme: dark; } /* Base colors - lighter dark background for better readability */ .dark-mode body, .dark-mode .is-app-grey, .dark-mode .hero.is-app-grey { background-color: #1e1e1e !important; color: #e0e0e0 !important; } /* Navbar */ .dark-mode .navbar, .dark-mode .navbar-minimal { background-color: #1e1e1e !important; } .dark-mode .navbar-item, .dark-mode .navbar-link { color: #e0e0e0 !important; } /* Text colors - titles */ .dark-mode .title, .dark-mode .title.is-2, .dark-mode .title.is-3, .dark-mode .title.is-4, .dark-mode .title.is-5, .dark-mode .title.is-6, .dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode h5 { color: #ffffff !important; } /* Hero section - main headline */ .dark-mode .hero .title, .dark-mode .hero h1, .dark-mode .hero h2 { color: #ffffff !important; } /* Subtitles and body text - improved contrast */ .dark-mode .subtitle, .dark-mode p, .dark-mode .content, .dark-mode .content p { color: #d0d0d0 !important; } .dark-mode .moto, .dark-mode .moto span { color: #c0c0c0 !important; } /* Sections */ .dark-mode .section, .dark-mode section { background-color: #1e1e1e !important; } .dark-mode .section.is-light, .dark-mode .section-light, .dark-mode .section-feature-grey { background-color: #252525 !important; } /* Cards */ .dark-mode .card, .dark-mode .box, .dark-mode .flex-card, .dark-mode .testimonial-card { background-color: #2a2a2a !important; border-color: #3a3a3a !important; } .dark-mode .card-content, .dark-mode .content { color: #e0e0e0 !important; } /* Team cards */ .dark-mode .modern-team-item { background-color: #1e1e1e !important; } .dark-mode .modern-team-item .item-wrapper { background-color: #1e1e1e !important; } /* Borders */ .dark-mode .light-bordered { border-color: #333 !important; } /* Tags */ .dark-mode .tag { background-color: #2a2a2a !important; color: #e0e0e0 !important; } .dark-mode .tag.is-info { background-color: #4a4a4a !important; } .dark-mode .tag.is-danger { background-color: #5a4a4a !important; } /* Labels - keep brand color */ .dark-mode .label { background-color: #9b111e !important; color: #fff !important; } /* Buttons - keep primary brand color */ .dark-mode .button.primary-btn { background-color: #9b111e !important; color: #fff !important; } .dark-mode .button.primary-btn:hover { background-color: #b91428 !important; } .dark-mode .button:not(.primary-btn) { background-color: #2a2a2a !important; color: #ffffff !important; border-color: #555 !important; } /* Secondary/outline buttons */ .dark-mode .button.is-link, .dark-mode .button.secondary-btn { color: #ffffff !important; background-color: #333 !important; } /* Form inputs */ .dark-mode input, .dark-mode textarea, .dark-mode select, .dark-mode .input, .dark-mode .textarea { background-color: #2a2a2a !important; color: #e0e0e0 !important; border-color: #444 !important; } .dark-mode input::placeholder, .dark-mode textarea::placeholder { color: #888 !important; } /* Footer */ .dark-mode .footer, .dark-mode .footer-light-left { background-color: #151515 !important; } .dark-mode .footer-nav-link { color: #d0d0d0 !important; } .dark-mode .footer-nav-link:hover { color: #9b111e !important; } /* Footer right-side navigation links - high specificity */ .dark-mode .footer .footer-nav-right a, .dark-mode .footer .footer-nav-right .footer-nav-link, .dark-mode .footer-light-left .footer-nav-right a, .dark-mode .footer-light-left .footer-nav-right .footer-nav-link, .dark-mode footer .footer-nav-right a.footer-nav-link { color: #e0e0e0 !important; } /* Links - brighten brand red for dark mode */ .dark-mode a { color: #e63946; } .dark-mode a:hover { color: #ff5a67; } /* Override inline red color styles */ .dark-mode [style*="color:#9b111e"], .dark-mode [style*="color: #9b111e"] { color: #e63946 !important; } /* Mark/highlight */ .dark-mode mark { background-image: linear-gradient(to right, rgba(255, 225, 0, 0.15), rgba(255, 225, 0, 0.25) 4%, rgba(255, 225, 0, 0.35)) !important; } /* Star fall animation - make stars brighter */ .dark-mode .falling-star { opacity: 0.8; } /* Logo swap - invert logo for dark mode */ .dark-mode .switcher-logo, .dark-mode .small-footer-logo { filter: brightness(0) invert(1); } /* Dark mode toggle button */ .dark-mode-toggle { background: none; border: none; cursor: pointer; padding: 8px; font-size: 20px; line-height: 1; color: #9b111e; opacity: 0.7; transition: opacity 0.2s; } .dark-mode-toggle:hover { opacity: 1; } /* Show appropriate icon */ .dark-mode-toggle .icon-sun { display: none; } .dark-mode-toggle .icon-moon { display: inline; } .dark-mode .dark-mode-toggle .icon-sun { display: inline; } .dark-mode .dark-mode-toggle .icon-moon { display: none; } /* Mobile padding for toggle */ @media (max-width: 768px) { .dark-mode-toggle { padding: 15px; } } /* Podcast player dark mode - invert Listen Notes iframe */ .dark-mode iframe[src*="listennotes.com"] { filter: invert(1) hue-rotate(180deg); } /* Scrollbar */ .dark-mode ::-webkit-scrollbar { width: 8px; height: 8px; } .dark-mode ::-webkit-scrollbar-track { background: #1a1a1a; } .dark-mode ::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; } .dark-mode ::-webkit-scrollbar-thumb:hover { background: #555; } /* Product/portfolio cards */ .dark-mode .grid-item, .dark-mode .portfolio-item, .dark-mode .feature-card { background-color: #1e1e1e !important; } .dark-mode .grid-item p, .dark-mode .portfolio-item p, .dark-mode .feature-card p { color: #d0d0d0 !important; } /* Small/meta text */ .dark-mode small, .dark-mode .small, .dark-mode .meta, .dark-mode .text-muted, .dark-mode span.meta { color: #b0b0b0 !important; } /* Footer improvements */ .dark-mode .footer p, .dark-mode .footer span, .dark-mode .footer .moto { color: #c0c0c0 !important; } .dark-mode .footer-nav-link { color: #c0c0c0 !important; } /* List items */ .dark-mode li, .dark-mode ul li, .dark-mode ol li { color: #d0d0d0 !important; } /* Inline styles override - for elements with hardcoded colors */ .dark-mode [style*="color: #312C2D"], .dark-mode [style*="color:#312C2D"] { color: #ffffff !important; } .dark-mode [style*="color:#000"], .dark-mode [style*="color: #000"], .dark-mode [style*="color:black"], .dark-mode [style*="color: black"] { color: #5A4A4B !important; } /* Feature headlines */ .dark-mode .feature-headline, .dark-mode .testimonial-title { color: #ffffff !important; } .dark-mode [style*="background-color: #fff"], .dark-mode [style*="background-color:#fff"], .dark-mode [style*="background-color: white"], .dark-mode [style*="background-color:#ffffff"] { background-color: #2a2a2a !important; } /* Specific section fixes */ .dark-mode .side-block, .dark-mode .content-block { color: #d0d0d0 !important; } .dark-mode .side-block h3, .dark-mode .content-block h3 { color: #ffffff !important; } /* Flat foundations cards - value principles */ .dark-mode .value-card, .dark-mode .principle-card { background-color: #1a1a1a !important; border-color: #333 !important; } .dark-mode .value-card p, .dark-mode .principle-card p { color: #d0d0d0 !important; } /* Bold text should be brighter */ .dark-mode strong, .dark-mode b { color: #ffffff !important; } /* Grayscale to color hover effect for images */ .img-grayscale { filter: grayscale(100%); transition: filter 0.3s ease; } .img-grayscale:hover { filter: grayscale(0%); } /* Green "We are green" section - darker green for dark mode */ .dark-mode section[style*="eef0d5"], .dark-mode .section-green { background-color: #3d4a2a !important; } .dark-mode section[style*="eef0d5"] h2, .dark-mode section[style*="eef0d5"] .feature-headline { color: #e0e0e0 !important; } .dark-mode section[style*="eef0d5"] p { color: #c0c0c0 !important; } .dark-mode section[style*="eef0d5"] .flex-card, .dark-mode section[style*="eef0d5"] .testimonial-card { background-color: #2a2a2a !important; } /* Twitter embeds - invert iframe for dark mode */ .dark-mode .twitter-tweet-rendered, .dark-mode iframe[id^="twitter-widget"], .dark-mode iframe[src*="platform.twitter.com"] { filter: invert(1) hue-rotate(180deg) !important; }