/* ===== ADREVA LIGHT MODE ===== */ /* Active when . Loaded after all other styles. */ [data-theme="light"] { /* Backgrounds — warm off-white, slightly cool */ --bg: #f8fafc; --bg-secondary: #eef2f7; --bg-card: rgba(255, 255, 255, 0.9); --bg-card-hover: #ffffff; /* Text — dark slate for less harsh contrast than pure black */ --text: #0f172a; --text-secondary: #475569; --text-muted: #64748b; /* Accent — slightly darker for AA contrast on light bg */ --accent-darkest: #1e3a8a; --accent-dark: #1d4ed8; --accent: #2563eb; --accent-light: #3b82f6; --accent-lighter: #60a5fa; --accent-bg: rgba(37, 99, 235, 0.07); --accent-bg-hover: rgba(37, 99, 235, 0.13); --accent-gradient: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%); /* Borders — neutral with subtle blue tint */ --border: rgba(15, 23, 42, 0.08); --border-hover: rgba(37, 99, 235, 0.25); --border-strong: rgba(37, 99, 235, 0.4); /* Status */ --success: #16a34a; --success-bg: rgba(22, 163, 74, 0.08); --danger: #dc2626; --danger-bg: rgba(220, 38, 38, 0.06); --warning: #d97706; --streak: #ea580c; /* Glass — translucent white over warm bg */ --glass-bg: rgba(255, 255, 255, 0.78); --glass-border: rgba(15, 23, 42, 0.06); --glass-blur: 16px; --glass-shadow: 0 4px 24px rgba(15, 23, 42, 0.06); /* Tier colors */ --tier1: #2563eb; --tier2: #16a34a; --tier3: #6b7280; /* --header-* tokens intentionally NOT overridden — the mockup popup keeps its dark navy gradient in both themes (it's a product preview of the actual extension popup, which is dark). */ } /* ===== Body / page background ===== */ [data-theme="light"] body { background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%); background-attachment: fixed; color: var(--text); } [data-theme="light"] { color-scheme: light; } /* ===== Background effects ===== */ [data-theme="light"] .bg-grid { display: none; } [data-theme="light"] .bg-orb { opacity: 0.10; filter: blur(140px); mix-blend-mode: multiply; } [data-theme="light"] .bg-orb--1 { background: #c7d2fe; } [data-theme="light"] .bg-orb--2 { background: #93c5fd; } [data-theme="light"] .bg-orb--3 { background: #ddd6fe; } [data-theme="light"] .bg-vignette { background: radial-gradient(ellipse at center, transparent 60%, rgba(15, 23, 42, 0.04) 100%); } /* ===== Nav ===== */ [data-theme="light"] .nav__cta { animation: none; box-shadow: 0 4px 20px rgba(37, 99, 235, 0.25); } [data-theme="light"] .nav__cta:hover { box-shadow: 0 6px 28px rgba(37, 99, 235, 0.4); } [data-theme="light"] .nav { background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } [data-theme="light"] .nav--scrolled { background: rgba(255, 255, 255, 0.95); box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06), 0 4px 20px rgba(15, 23, 42, 0.04); } [data-theme="light"] .nav__hamburger span { background: var(--text); } [data-theme="light"] .nav__dropdown-menu { background: rgba(255, 255, 255, 0.97); border-color: rgba(37, 99, 235, 0.18); box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12); } [data-theme="light"] .nav__dropdown-menu a { color: var(--text-secondary); } [data-theme="light"] .nav__dropdown-menu a:hover { background: var(--accent-bg-hover); color: var(--text); } [data-theme="light"] .nav__dropdown-icon { background: var(--accent-bg); } [data-theme="light"] .nav__dropdown-label { color: var(--text); } [data-theme="light"] .nav__dropdown-desc { color: var(--text-muted); } /* Case Studies dropdown — has inline rgba(255,255,255,..) backgrounds; override via more specific rules */ [data-theme="light"] .nav__dropdown-menu a[style*="rgba(255,255,255"] { color: var(--text-secondary) !important; } /* ===== Mobile menu ===== */ [data-theme="light"] .mobile-menu { background: rgba(248, 250, 252, 0.97); } [data-theme="light"] .mobile-menu a { color: var(--text); } [data-theme="light"] .mobile-menu a:hover { color: var(--accent); } [data-theme="light"] .mobile-menu__group-label { color: var(--text-muted); } [data-theme="light"] .mobile-menu__sub { color: var(--text-secondary) !important; } /* ===== Announcement banner ===== */ [data-theme="light"] .announce { background: linear-gradient(90deg, #eff6ff, #dbeafe, #e0e7ff, #dbeafe, #eff6ff); background-size: 200% 100%; color: #1e3a8a; } [data-theme="light"] .announce::after { background: linear-gradient(90deg, rgba(37, 99, 235, 0.3), rgba(168, 85, 247, 0.4), rgba(37, 99, 235, 0.3)); background-size: 200% 100%; } [data-theme="light"] .announce__live { color: #15803d; } [data-theme="light"] .announce__live-dot { background: #16a34a; box-shadow: 0 0 6px rgba(22, 163, 74, 0.5); } [data-theme="light"] .announce__pill { background: rgba(255, 255, 255, 0.55); border-color: rgba(37, 99, 235, 0.18); color: #1e3a8a; } [data-theme="light"] .announce__pill:hover { background: rgba(255, 255, 255, 0.85); } [data-theme="light"] .announce__pill--galxe, [data-theme="light"] .announce__pill--chrome { color: #92400e; border-color: rgba(217, 119, 6, 0.4); } [data-theme="light"] .announce__pill--galxe .announce__label, [data-theme="light"] .announce__pill--chrome .announce__label { color: #b45309; text-shadow: none; } [data-theme="light"] .announce__pill--galxe:hover, [data-theme="light"] .announce__pill--chrome:hover { background: rgba(254, 243, 199, 0.7); border-color: rgba(217, 119, 6, 0.55); box-shadow: 0 0 16px rgba(251, 191, 36, 0.2); } [data-theme="light"] .announce__dismiss { background: rgba(255, 255, 255, 0.5); border-color: rgba(15, 23, 42, 0.1); color: #475569; } [data-theme="light"] .announce__dismiss:hover { background: rgba(255, 255, 255, 0.9); color: var(--text); } /* ===== Buttons ===== */ [data-theme="light"] .btn--primary { box-shadow: 0 4px 20px rgba(37, 99, 235, 0.25); } [data-theme="light"] .btn--primary:hover { box-shadow: 0 6px 28px rgba(37, 99, 235, 0.4); } [data-theme="light"] .btn--ghost { color: var(--text); border-color: rgba(15, 23, 42, 0.12); } [data-theme="light"] .btn--ghost:hover { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); } /* ===== Glass card ===== */ [data-theme="light"] .glass-card { background: rgba(255, 255, 255, 0.78); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(15, 23, 42, 0.06); box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06), 0 1px 0 rgba(255, 255, 255, 0.6) inset; } [data-theme="light"] .glass-card:hover { border-color: rgba(37, 99, 235, 0.25); box-shadow: 0 12px 40px rgba(37, 99, 235, 0.12); } /* ===== Badges ===== */ [data-theme="light"] .badge--glass { background: rgba(255, 255, 255, 0.6); border-color: rgba(15, 23, 42, 0.08); color: var(--text-secondary); } /* ===== Homepage hero / nav / sections — overrides for hardcoded `color: #fff` ===== */ [data-theme="light"] .nav__brand { color: var(--text); } [data-theme="light"] .nav__wordmark { color: var(--text); } [data-theme="light"] .nav__links a { color: var(--text-secondary); } [data-theme="light"] .nav__links a:hover, [data-theme="light"] .nav__links a.active { color: var(--text); } [data-theme="light"] .nav__dropdown-toggle { color: var(--text-secondary); } [data-theme="light"] .nav__dropdown-toggle:hover, [data-theme="light"] .nav__dropdown.active .nav__dropdown-toggle { color: var(--text); } [data-theme="light"] .nav__dropdown-menu a:hover .nav__dropdown-label { color: var(--text); } /* Case Studies dropdown rows have inline rgba(255,255,255,...) colors */ [data-theme="light"] .nav__dropdown-menu a[style*="color:rgba(255,255,255"] { color: var(--text-secondary) !important; } [data-theme="light"] .nav__dropdown-menu a[style*="color:rgba(255,255,255"]:hover { color: var(--text) !important; background: var(--accent-bg-hover) !important; } [data-theme="light"] .nav__dropdown-menu div[style*="border-bottom:1px solid rgba(255,255,255"] { border-bottom-color: var(--border) !important; } [data-theme="light"] .nav__dropdown-menu div[style*="background:rgba(255,255,255"] { background: var(--border) !important; } /* Community cards on homepage */ [data-theme="light"] .community__card h3 { color: var(--text) !important; } [data-theme="light"] .community__card { background: var(--bg-card); border-color: var(--border); } /* Partners section — winners stat values */ [data-theme="light"] .partners__campaign-stat-val { color: var(--text) !important; } [data-theme="light"] .partners__campaigns-cta-text strong { color: var(--text) !important; } /* Footer brand wordmark */ [data-theme="light"] .footer__brand-logo span { color: var(--text) !important; } [data-theme="light"] .footer__col a:hover { color: var(--text) !important; } /* Learn / News card titles + tab hovers */ [data-theme="light"] .blog-card__title, [data-theme="light"] .news-card__title { color: var(--text) !important; } [data-theme="light"] .category-tab:hover, [data-theme="light"] .news-card__cta:hover, [data-theme="light"] .pagination__btn:hover:not(:disabled) { color: var(--text) !important; } /* ===== Footer ===== */ [data-theme="light"] .footer { border-top: 1px solid rgba(15, 23, 42, 0.08); } [data-theme="light"] .footer__bottom { border-top-color: rgba(15, 23, 42, 0.08); } [data-theme="light"] .footer__brand p { color: var(--text-muted); } [data-theme="light"] .footer__brand-logo span { color: var(--text); } [data-theme="light"] .footer__col h4 { color: var(--text-muted); } [data-theme="light"] .footer__col a { color: var(--text-secondary); } [data-theme="light"] .footer__col a:hover { color: var(--text); } [data-theme="light"] .footer__social a { background: var(--accent-bg); border: 1px solid var(--border); color: var(--text-secondary); } [data-theme="light"] .footer__social a:hover { background: var(--accent-bg-hover); border-color: var(--border-hover); color: var(--accent); } /* ===== Newsletter ===== */ [data-theme="light"] .newsletter__inner::before, [data-theme="light"] .newsletter__inner::after { border-color: rgba(37, 99, 235, 0.25); } [data-theme="light"] .newsletter__input { background: #ffffff; border-color: rgba(15, 23, 42, 0.1); color: var(--text); } [data-theme="light"] .newsletter__input::placeholder { color: var(--text-muted); } [data-theme="light"] .newsletter__input:focus { border-color: var(--accent); } [data-theme="light"] .newsletter__success { background: rgba(22, 163, 74, 0.08); border-color: rgba(22, 163, 74, 0.25); color: #166534; } [data-theme="light"] .newsletter__error { background: rgba(220, 38, 38, 0.06); border-color: rgba(220, 38, 38, 0.2); color: #991b1b; } [data-theme="light"] .newsletter__privacy { color: var(--text-muted); } [data-theme="light"] .newsletter__privacy a { color: var(--text-secondary); } [data-theme="light"] .newsletter__privacy a:hover { color: var(--accent); } [data-theme="light"] .newsletter__glow { background: radial-gradient(circle, rgba(37, 99, 235, 0.07) 0%, transparent 70%); } /* ===== Page header ===== */ [data-theme="light"] .section-label { color: var(--accent-dark); } [data-theme="light"] .section-subtitle { color: var(--text-secondary); } /* ===== Prose / blog content ===== */ [data-theme="light"] .prose code { background: rgba(37, 99, 235, 0.08); color: var(--accent-dark); } [data-theme="light"] .prose blockquote { background: rgba(37, 99, 235, 0.05); border-left-color: var(--accent); color: var(--text-secondary); } [data-theme="light"] .prose thead { background: var(--accent-bg); } [data-theme="light"] .prose th { border-bottom-color: var(--border-hover); color: var(--text); } [data-theme="light"] .prose td { border-bottom-color: var(--border); color: var(--text-secondary); } [data-theme="light"] .prose tbody tr:hover { background: rgba(37, 99, 235, 0.04); } [data-theme="light"] .prose hr { border-top-color: var(--border); } [data-theme="light"] .prose a { color: var(--accent); } [data-theme="light"] .prose a:hover { color: var(--accent-dark); } /* ===== Hero (homepage) ===== */ [data-theme="light"] .hero__pulse { background: #16a34a; box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.15); } [data-theme="light"] .hero__waitlist { color: var(--text-secondary); } [data-theme="light"] .hero__waitlist strong { color: var(--text) !important; } /* Hero socials pills */ [data-theme="light"] .hero__socials a { background: rgba(255, 255, 255, 0.7); border-color: rgba(15, 23, 42, 0.1); color: var(--text); } [data-theme="light"] .hero__socials a:hover { background: rgba(255, 255, 255, 0.95); } [data-theme="light"] .hero__socials a.hero__socials--x { --social-color: #0f172a; --social-bg: rgba(15, 23, 42, 0.05); --social-shadow: rgba(15, 23, 42, 0.18); } [data-theme="light"] .hero__socials-icon { color: var(--text-secondary); } [data-theme="light"] .hero__socials-label::before { background: var(--accent); } /* Hero subtitle/title — color is var(--text*); follows automatically */ /* ===== Calculator (attention) ===== */ [data-theme="light"] .att-chip { background: rgba(255, 255, 255, 0.6); border-color: rgba(15, 23, 42, 0.08); color: var(--text); } [data-theme="light"] .att-chip:hover { background: rgba(255, 255, 255, 0.95); border-color: rgba(37, 99, 235, 0.25); } [data-theme="light"] .att-chip.is-selected { background: rgba(37, 99, 235, 0.08); border-color: rgba(37, 99, 235, 0.35); color: var(--accent-dark); box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.3), 0 4px 12px rgba(37, 99, 235, 0.12); } [data-theme="light"] .att-platform { background: rgba(255, 255, 255, 0.6); border-color: rgba(15, 23, 42, 0.08); color: var(--text); } [data-theme="light"] .att-platform:hover { background: rgba(255, 255, 255, 0.95); } [data-theme="light"] .att-platform.is-selected { background: rgba(37, 99, 235, 0.08); border-color: rgba(37, 99, 235, 0.35); } [data-theme="light"] .att-slider__input { background: rgba(15, 23, 42, 0.08); } [data-theme="light"] .att-slider__input::-webkit-slider-runnable-track { background: linear-gradient( to right, var(--accent) 0%, var(--accent) var(--att-slider-pct, 50%), rgba(15, 23, 42, 0.08) var(--att-slider-pct, 50%), rgba(15, 23, 42, 0.08) 100% ); } [data-theme="light"] .att-slider__input::-moz-range-track { background: rgba(15, 23, 42, 0.08); } [data-theme="light"] .att-share__url { background: var(--bg-secondary); border-color: var(--border); } [data-theme="light"] .att-share__url-text { color: var(--text-secondary); } [data-theme="light"] .att-q__progress-dot { background: rgba(15, 23, 42, 0.08); } [data-theme="light"] .att-q__progress-dot.is-done { background: var(--accent); } [data-theme="light"] .att-share-overlay { background: rgba(15, 23, 42, 0.4); } [data-theme="light"] .att-share__close { background: var(--accent-bg); border-color: var(--border); color: var(--text-muted); } [data-theme="light"] .att-share__close:hover { background: var(--accent-bg-hover); color: var(--text); } [data-theme="light"] .att-calc__bar { background: rgba(15, 23, 42, 0.08); } /* Result eyebrow — keep red flavor but tuned for light */ [data-theme="light"] .att-result__eyebrow, [data-theme="light"] .att-intro__eyebrow { background: rgba(220, 38, 38, 0.06); border-color: rgba(220, 38, 38, 0.25); color: #b91c1c; } [data-theme="light"] .att-intro__eyebrow-dot { background: #b91c1c; box-shadow: 0 0 8px rgba(185, 28, 28, 0.5); } [data-theme="light"] .att-intro__meta-dot { background: var(--success); } /* ===== Methodology ===== */ [data-theme="light"] .meth-formula { background: var(--bg-secondary); color: var(--text-secondary); border: 1px solid var(--border); } [data-theme="light"] .meth-formula .c { color: #94a3b8; } [data-theme="light"] .meth-formula .v { color: #0891b2; } [data-theme="light"] .meth-formula .k { color: #1d4ed8; } [data-theme="light"] .meth-table th { background: var(--accent-bg); color: var(--text); border-bottom-color: var(--border-hover); } [data-theme="light"] .meth-table td { color: var(--text-secondary); border-bottom-color: var(--border); } [data-theme="light"] .meth-table tr:hover td { background: rgba(37, 99, 235, 0.04); } [data-theme="light"] .meth-table .num { color: var(--text); } [data-theme="light"] .meth-caveat { background: rgba(220, 38, 38, 0.05); border-color: rgba(220, 38, 38, 0.18); } [data-theme="light"] .meth-caveat strong { color: #b91c1c; } [data-theme="light"] .meth-honesty__col--under h4 { color: var(--accent); } [data-theme="light"] .meth-honesty__col--over h4 { color: #b45309; } [data-theme="light"] .meth-honesty__col li { color: var(--text-secondary); } [data-theme="light"] .meth-hero__updated { background: var(--accent-bg); border-color: var(--border); color: var(--text-muted); } /* ===== Theme toggle button ===== */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--accent-bg); border: 1px solid var(--border); color: var(--text-secondary); cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s; margin-right: 10px; padding: 0; flex-shrink: 0; font-family: inherit; } .theme-toggle:hover { background: var(--accent-bg-hover); border-color: var(--border-hover); color: var(--text); transform: translateY(-1px); } .theme-toggle svg { width: 16px; height: 16px; } .theme-toggle__sun { display: none; } .theme-toggle__moon { display: block; } [data-theme="light"] .theme-toggle__sun { display: block; } [data-theme="light"] .theme-toggle__moon { display: none; } @media (max-width: 480px) { .theme-toggle { width: 34px; height: 34px; margin-right: 6px; } } /* ===== Smooth theme transition (added briefly during toggle) ===== */ html.theme-transition, html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after { transition: background-color 0.3s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, fill 0.25s ease, stroke 0.25s ease !important; transition-delay: 0 !important; } /* Prefer-reduced-motion users skip the transition */ @media (prefers-reduced-motion: reduce) { html.theme-transition, html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after { transition: none !important; } }