/* ============================================= RELEASES LIGHT MODE THEME Applies only to release pages via [data-theme="light"] on . ============================================= */ html[data-theme="light"] { --color-primary: #4fa800; --color-primary-dark: #3d8400; --color-primary-subtle: rgba(79, 168, 0, 0.1); --color-bg: #ffffff; --color-bg-elevated: #f7f7f8; --color-bg-card: #f2f2f3; --color-bg-card-hover: #eaeaeb; --color-text: #0a0a0a; --color-text-secondary: #4a4a4a; --color-text-muted: #707070; --color-border: #e5e5e7; color-scheme: light; } html[data-theme="light"], html[data-theme="light"] body { background: var(--color-bg); color: var(--color-text); } /* Status bar cover */ html[data-theme="light"] .status-bar-cover { background: #ffffff; } /* Keep brand green on primary buttons regardless of theme */ html[data-theme="light"] .btn--primary { background: #a5fa01; color: #000; } html[data-theme="light"] .btn--primary:hover { background: #8ad400; color: #000; } html[data-theme="light"] .btn--secondary { background: rgba(0, 0, 0, 0.06); color: var(--color-text); } html[data-theme="light"] .btn--secondary:hover { background: rgba(0, 0, 0, 0.1); color: var(--color-text); } html[data-theme="light"] .btn--ghost { color: var(--color-primary); } /* Navbar — adapt scrolled background */ html[data-theme="light"] .navbar.scrolled { background: rgba(255, 255, 255, 0.88); border-bottom: 1px solid rgba(0, 0, 0, 0.06); } /* Mobile-only: modern.css forces .navbar { background: #000 !important } under max-width:768px. Override it for light mode. */ @media (max-width: 768px) { html[data-theme="light"] .navbar { background: #ffffff !important; border-bottom: 1px solid rgba(0, 0, 0, 0.06); } } html[data-theme="light"] .navbar__cta { background: #a5fa01; color: #000 !important; } html[data-theme="light"] .navbar__cta:hover { background: #8ad400; color: #000 !important; box-shadow: 0 4px 20px rgba(165, 250, 1, 0.4); } html[data-theme="light"] .navbar__toggle span { background: var(--color-text); } /* Mobile navigation background */ html[data-theme="light"] .mobile-nav { background: rgba(255, 255, 255, 0.98); } html[data-theme="light"] .mobile-nav a { color: var(--color-text); } /* Hero gradient titles — inline styles use bright green gradient that is unreadable on white. Override via attribute selector. */ html[data-theme="light"] h1 span[style*="linear-gradient"], html[data-theme="light"] h2 span[style*="linear-gradient"] { background: linear-gradient(135deg, #4fb300, #9ce612) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; } /* Section divider backgrounds used in the index hero */ html[data-theme="light"] section[style*="#000"] { /* rarely used, safe no-op */ } /* Feature release cards on the index page */ html[data-theme="light"] .release-card, html[data-theme="light"] article[class*="release"] { background: var(--color-bg-card); border-color: var(--color-border); } /* CTA section radial gradient — lighten */ html[data-theme="light"] .cta-section::before { background: radial-gradient(circle, rgba(77, 117, 0, 0.05) 0%, transparent 60%); } /* Footer */ html[data-theme="light"] .footer { background: var(--color-bg-elevated); border-top-color: var(--color-border); } html[data-theme="light"] .footer__bottom { border-top-color: var(--color-border); } /* Grain overlay — disable on light to avoid visible noise */ html[data-theme="light"] .grain::after { display: none; } /* Pill/tag style used on release pages (green background tags) */ html[data-theme="light"] span[style*="rgba(165,250,1"] { background: rgba(79, 168, 0, 0.1) !important; border-color: rgba(79, 168, 0, 0.25) !important; color: var(--color-primary) !important; } /* Current-page link marker — works in both themes */ .navbar__links a[aria-current="page"] { color: var(--color-text); } .navbar__links a[aria-current="page"]::after { width: 100%; } .mobile-nav a[aria-current="page"] { color: var(--color-primary); } /* Scrollbar colors follow color-scheme automatically. */ /* ============================================= THEME TOGGLE BUTTON ============================================= */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: transparent; border: none; border-radius: 100px; cursor: pointer; color: var(--color-text-secondary); transition: color 0.2s, background 0.2s; padding: 0; margin: 0; flex-shrink: 0; position: relative; } .theme-toggle:hover { color: var(--color-text); background: rgba(255, 255, 255, 0.06); } html[data-theme="light"] .theme-toggle:hover { background: rgba(0, 0, 0, 0.05); } .theme-toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .theme-toggle svg { width: 18px; height: 18px; display: block; transition: transform 0.25s cubic-bezier(.16,1,.3,1); } /* Show the right icon depending on active theme */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } html[data-theme="light"] .theme-toggle .icon-sun { display: block; } html[data-theme="light"] .theme-toggle .icon-moon { display: none; } /* Strip the underline animation on the toggle wrapper li (inherited from navbar__links a::after) */ .theme-toggle-wrapper { list-style: none; } /* Mobile nav toggle placement */ .mobile-nav .theme-toggle { width: 48px; height: 48px; } .mobile-nav .theme-toggle svg { width: 22px; height: 22px; }