/* ═══════════════════════════════════════════════════════════════════════ theme.css — Site-wide theme overrides for worldwidefriends.net / Kindred Strategy: Each page defines its own :root { … } inline (dark defaults). html[data-theme="light"] and html[data-theme="colorful"] have higher CSS specificity than :root and therefore override every variable sitewide. Loaded from nav.php (included in every page's ). Theme choice is stored in localStorage under key "kTheme". ═══════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════ LIGHT / BRIGHT THEME ══════════════════════════════════════════════════════════════════════ */ html[data-theme="light"] { /* backgrounds */ --bg: #F5F4FF; --bg-2: #ECEAFB; /* cards / surfaces */ --card: rgba(255,255,255,0.85); --card-hover: rgba(255,255,255,0.98); /* borders */ --border: rgba(0,0,0,0.09); --border-light: rgba(0,0,0,0.16); /* text */ --text: #12102A; --text-muted: #5C5A7A; --text-faint: #9E9CBB; /* accents — slightly darkened for contrast on light bg */ --violet: #6D28D9; --pink: #DB2777; --cyan: #0284C7; --green: #059669; --amber: #D97706; --red: #DC2626; --purple: #7C3AED; /* gradients */ --grad: linear-gradient(135deg, #6D28D9 0%, #DB2777 100%); --grad-text: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%); /* shadow */ --shadow: 0 20px 60px rgba(0,0,0,0.10); /* alternate variable names used on some pages */ --surface: #ECEAFB; --muted: #5C5A7A; --faint: #9E9CBB; /* radius (unchanged) */ --radius: 16px; --radius-lg: 24px; } /* ── Light: nav overrides (nav.php uses hardcoded rgba values, not vars) ── */ html[data-theme="light"] .site-nav { background: rgba(245,244,255,0.94); border-bottom-color: rgba(0,0,0,0.10); } html[data-theme="light"] .sn-logo-name { color: #12102A; } html[data-theme="light"] .sn-btn { color: #5C5A7A; } html[data-theme="light"] .sn-btn:hover, html[data-theme="light"] .sn-group.open .sn-btn { background: rgba(0,0,0,0.06); color: #12102A; } html[data-theme="light"] .sn-drop { background: rgba(245,244,255,0.99); border-color: rgba(0,0,0,0.09); box-shadow: 0 16px 48px rgba(0,0,0,0.12); } html[data-theme="light"] .sn-drop li a { color: #5C5A7A; } html[data-theme="light"] .sn-drop li a:hover { background: rgba(109,40,217,0.10); color: #12102A; } html[data-theme="light"] .sn-drop .sn-sep { background: rgba(0,0,0,0.09); } html[data-theme="light"] .sn-hamburger span { background: #5C5A7A; } @media (max-width: 680px) { html[data-theme="light"] .sn-groups { background: rgba(245,244,255,0.99); border-bottom-color: rgba(0,0,0,0.10); } } /* ── Light: theme-dot active ring ── */ html[data-theme="light"] .sn-theme-btn.sn-theme-active { border-color: rgba(109,40,217,0.55); } /* ── Light: page card overrides (hardcoded rgba(13,13,26) backgrounds) ── These classes use hardcoded dark values instead of CSS variables, so they must be explicitly overridden here. ── */ /* Shared light card surface */ html[data-theme="light"] .content-card, html[data-theme="light"] .profile-header, html[data-theme="light"] .profile-header .section, html[data-theme="light"] .section, html[data-theme="light"] .album-card, html[data-theme="light"] .filter-card, html[data-theme="light"] .member-card, html[data-theme="light"] .add-form-wrap, html[data-theme="light"] .book-card, html[data-theme="light"] .quote-card, html[data-theme="light"] .modal-inner, html[data-theme="light"] .msg-card, html[data-theme="light"] .likes-box, html[data-theme="light"] .bm-box, html[data-theme="light"] .sent-panel, html[data-theme="light"] .tri-card, html[data-theme="light"] .inbox-section, html[data-theme="light"] .card { background: rgba(255,255,255,0.88) !important; border-color: rgba(0,0,0,0.09) !important; color: #12102A; } /* friends.php — inner elements that use hardcoded rgba(255,255,255,…) */ html[data-theme="light"] .box-count { background: rgba(0,0,0,0.07) !important; color: var(--text-muted); } html[data-theme="light"] .person-card:hover, html[data-theme="light"] .sent-card:hover { background: rgba(0,0,0,0.04) !important; } html[data-theme="light"] .pa-btn { background: rgba(0,0,0,0.05) !important; border-color: rgba(0,0,0,0.12) !important; color: var(--text-muted) !important; } html[data-theme="light"] .pa-btn:hover { background: rgba(109,40,217,0.10) !important; color: var(--violet) !important; border-color: rgba(109,40,217,0.25) !important; } html[data-theme="light"] .pa-btn.msg-btn:hover { background: rgba(2,132,199,0.10) !important; color: #0284C7 !important; } html[data-theme="light"] .pa-btn.unfriend-btn:hover { background: rgba(220,38,38,0.10) !important; color: #DC2626 !important; } html[data-theme="light"] .req-btn.decline, html[data-theme="light"] .req-btn.cancel { background: rgba(0,0,0,0.05) !important; border-color: rgba(0,0,0,0.12) !important; color: var(--text-muted) !important; } html[data-theme="light"] .req-btn.decline:hover { background: rgba(220,38,38,0.10) !important; border-color: rgba(220,38,38,0.30) !important; color: #DC2626 !important; } html[data-theme="light"] .req-btn.cancel:hover { background: rgba(0,0,0,0.08) !important; } html[data-theme="light"] .sent-avatar { background: rgba(0,0,0,0.06) !important; border-color: rgba(0,0,0,0.12) !important; } /* Unread message card keeps a tinted accent instead of just white */ html[data-theme="light"] .msg-card.unread { background: rgba(109,40,217,0.07) !important; border-color: rgba(109,40,217,0.25) !important; } /* Select option dropdowns (search page) */ html[data-theme="light"] .filter-group select option { background: #F5F4FF; color: #12102A; } /* edit-profile.php sidebar — a bare `nav { background:rgba(8,8,14,.85) }` rule in that page's CSS matches every