/* ============================================================ SEOVALLY — Dark / Light theme system Loaded LAST in so these overrides win over tools.css, home.css and any per-template inline styles. Dark is the default palette; `:root[data-theme='light']` re-maps the shared custom properties and patches the few hard-coded dark surfaces left in templates. ============================================================ */ :root { color-scheme: dark; } :root[data-theme='light'] { color-scheme: light; } /* ---------- Light palette (tools.css / home.css core vars) ---------- */ :root[data-theme='light'] { --primary: #4f46e5; --primary-dark: #4338ca; --primary-light: #4f46e5; --primary-bg: rgba(79, 70, 229, 0.1); --dark: #eef2f7; /* page background (was #0f172a) */ --dark-card: #ffffff; /* cards / surfaces */ --dark-border: #d9e1ec; /* borders */ --dark-bg: #f1f5f9; /* sunken inputs */ --text: #0f172a; --text-muted: #475569; --text-dim: #64748b; --error: #dc2626; --surface: #ffffff; --surface-hover: #e9eef6; --shadow: 0 4px 24px rgba(15, 23, 42, 0.07); --shadow-lg: 0 12px 48px rgba(15, 23, 42, 0.1); --bg-gradient: linear-gradient(135deg, #eef2f7 0%, #e0e7ff 50%, #eef2f7 100%); } /* ---------- site.html report-page vars ---------- */ :root[data-theme='light'] { --page-bg: #eef2f7; --card-bg: #ffffff; --card-alt: #eef2f7; --card-border: rgba(100, 116, 139, 0.25); --card-shadow: 0 8px 28px rgba(15, 23, 42, 0.08); } /* ---------- Translucent dark surfaces -> light ---------- */ :root[data-theme='light'] .tool-nav, :root[data-theme='light'] .nav { background: rgba(255, 255, 255, 0.9); } :root[data-theme='light'] .tool-nav.scrolled, :root[data-theme='light'] .nav.scrolled { background: rgba(255, 255, 255, 0.98); box-shadow: 0 4px 30px rgba(15, 23, 42, 0.08); } :root[data-theme='light'] .mobile-drawer, :root[data-theme='light'] .site-footer { background: rgba(255, 255, 255, 0.98); } /* site.html collapsible groups + AI cards (inner wells) */ :root[data-theme='light'] .checks-section, :root[data-theme='light'] .ai-card { background: rgba(255, 255, 255, 0.6); } :root[data-theme='light'] .checks-group-items, :root[data-theme='light'] .ai-card-body { background: rgba(100, 116, 139, 0.06); } /* ---------- Tables in light theme ---------- */ :root[data-theme='light'] { --table-line: rgba(100, 116, 139, 0.18); --row-stripe: rgba(100, 116, 139, 0.055); --row-hover: rgba(79, 70, 229, 0.07); } /* Striping must never render as dark bands on a light card */ :root[data-theme='light'] .bot-table tbody tr:nth-child(even) td, :root[data-theme='light'] .detail-table tbody tr:nth-child(even) td { background: var(--row-stripe) !important; } /* Subtle header fill for every table in light mode (was white-on-white) */ :root[data-theme='light'] .bot-table th, :root[data-theme='light'] .detail-table th, :root[data-theme='light'] .placement-table th, :root[data-theme='light'] .top-kw-table th, :root[data-theme='light'] .data-table th { background: #e8edf5 !important; } :root[data-theme='light'] .detail-table td:first-child { color: #0f172a; } :root[data-theme='light'] .detail-table td.val { color: #475569; } /* ---------- Status / tinted chip text -> darker for light bg ---------- */ :root[data-theme='light'] .sev-pass, :root[data-theme='light'] .gp-pass, :root[data-theme='light'] .bot-status-allowed { color: #059669 !important; } :root[data-theme='light'] .sev-warn, :root[data-theme='light'] .gp-warn, :root[data-theme='light'] .bot-status-mentioned, :root[data-theme='light'] .check-importance.important { color: #b45309 !important; } :root[data-theme='light'] .sev-fail, :root[data-theme='light'] .gp-fail, :root[data-theme='light'] .bot-status-blocked, :root[data-theme='light'] .check-importance.very { color: #b91c1c !important; } :root[data-theme='light'] .sev-info { color: #1d4ed8 !important; } :root[data-theme='light'] .check-importance.low { color: #64748b !important; } :root[data-theme='light'] .check-importance.nice { color: #7c3aed !important; } :root[data-theme='light'] .priority-tag.ai { color: #0e7490 !important; } :root[data-theme='light'] .priority-tag.seo { color: #4338ca !important; } :root[data-theme='light'] .intent-transactional { color: #b91c1c !important; } :root[data-theme='light'] .intent-informational { color: #1d4ed8 !important; } :root[data-theme='light'] .intent-commercial { color: #7c3aed !important; } :root[data-theme='light'] .intent-navigational { color: #b45309 !important; } :root[data-theme='light'] .intent-unknown { color: #64748b !important; } /* ---------- Theme toggle button ---------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; border: 1px solid var(--dark-border); background: var(--dark-card); color: var(--text); cursor: pointer; transition: all 0.2s; padding: 0; } .theme-toggle:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); } .theme-toggle svg { width: 17px; height: 17px; display: block; } /* In dark mode show the sun (tap to go light); in light mode show the moon. */ :root[data-theme='dark'] .theme-toggle .icon-sun { display: block; } :root[data-theme='dark'] .theme-toggle .icon-moon { display: none; } :root[data-theme='light'] .theme-toggle .icon-sun { display: none; } :root[data-theme='light'] .theme-toggle .icon-moon { display: block; } /* On small screens keep the header uncluttered: logo + theme toggle + hamburger */ @media (max-width: 900px) { .nav-links .nav-btn-primary { display: none; } } /* Print stays light regardless of theme */ @media print { :root, :root[data-theme='light'], :root[data-theme='dark'] { --dark: #fff; --page-bg: #fff; --card-bg: #fff; --text: #111; --text-muted: #333; } } /* ---- Signed-in auth chip in the nav (guest / Google account) ---- */ .nav-auth { display: inline-flex; align-items: center; gap: 10px; } .nav-user-name { font-size: 13px; font-weight: 600; color: var(--text-muted); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-auth .nav-btn { padding: 8px 16px; } /* Mobile drawer auth block */ .mobile-auth-form { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding: 0; } .mobile-auth-form .mobile-user-name { display: block; text-align: center; font-size: 13.5px; font-weight: 600; color: var(--text-muted); padding: 2px 0; } .mobile-auth-form button.mobile-btn { display: block; width: 100%; text-align: center; padding: 14px; border-radius: 10px; font-weight: 600; font-size: 15px; font-family: inherit; background: transparent; color: var(--text); border: 1px solid var(--dark-border); cursor: pointer; } .mobile-auth-form button.mobile-btn:hover { border-color: var(--primary); } /* Footer sign-out (home page) */ .footer-auth-form button { background: none; border: none; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; } .footer-auth-form button:hover { color: var(--primary-light); } /* Buttons in the tool nav inherit the page font (anchors already do) */ button.tool-nav-btn { font-family: inherit; line-height: 1.4; }