/* public/assets/css/dark.css FULL DROP-IN (manual toggle via ) - Keeps fixtures/sizing the same - No @media required (toggle controls everything) */ /* ------------------------- Theme Tokens (the key fix) ------------------------- */ html.dark{ color-scheme: dark; /* Surfaces */ --bg:#070b12; --card:rgba(12,18,28,0.78); /* Typography */ --text:#e7eefc; --muted:rgba(231,238,252,0.72); /* Lines + shadows */ --line:rgba(231,238,252,0.12); --shadow:0 12px 34px rgba(0,0,0,0.55); --shadow2:0 22px 66px rgba(0,0,0,0.62); /* Brand colors (kept) */ --blue:#1d4ed8; --blue2:#2563eb; --gold:#b08900; --gold2:#f5d87a; --rose:#e11d48; } /* ------------------------- Global page surface ------------------------- */ html.dark body{ color:var(--text); background: radial-gradient(900px 520px at 15% -10%, rgba(37,99,235,0.18), transparent 60%), radial-gradient(780px 540px at 90% 0%, rgba(245,216,122,0.12), transparent 55%), radial-gradient(880px 560px at 50% 120%, rgba(29,78,216,0.14), transparent 60%), var(--bg); } /* Links: keep your “inherit” behavior but make hover readable */ html.dark a:hover{ opacity:.95; } /* ------------------------- Skip link ------------------------- */ html.dark .skip-link:focus{ background:rgba(12,18,28,0.92); border:1px solid rgba(231,238,252,0.14); box-shadow:var(--shadow); color:rgba(231,238,252,0.92); } /* ------------------------- Header / Nav ------------------------- */ html.dark .site-header{ background:rgba(7,11,18,0.72); border-bottom:1px solid rgba(231,238,252,0.10); } html.dark .brand-mark{ border:1px solid rgba(231,238,252,0.10); box-shadow:0 12px 28px rgba(0,0,0,0.45); } html.dark .brand-mark:after{ background:linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.12), transparent 70%); } html.dark .brand-title span{ color:var(--muted); } html.dark .nav-links a{ color:rgba(231,238,252,0.82); } html.dark .nav-links a:hover{ background:rgba(231,238,252,0.06); } html.dark .nav-links a.active{ background:rgba(37,99,235,0.16); border:1px solid rgba(37,99,235,0.26); color:rgba(231,238,252,0.92); } /* ------------------------- Buttons ------------------------- */ html.dark .btn{ border:1px solid rgba(231,238,252,0.12); background:rgba(12,18,28,0.66); box-shadow:0 12px 30px rgba(0,0,0,0.45); color:rgba(231,238,252,0.92); } html.dark .btn:hover{ box-shadow:var(--shadow); } html.dark .btn-primary{ border-color:rgba(29,78,216,0.60); box-shadow:0 18px 46px rgba(29,78,216,0.30); } html.dark .btn-primary:hover{ box-shadow:0 22px 56px rgba(29,78,216,0.36); } html.dark .btn-gold{ color: #FFFFFF !important; border-color:rgba(176,137,0,0.42); box-shadow:0 18px 46px rgba(176,137,0,0.22); } html.dark .btn-ghost{ background:rgba(12,18,28,0.52); } /* ------------------------- Hamburger / Mobile nav ------------------------- */ html.dark .hamburger{ border:1px solid rgba(231,238,252,0.12); background:rgba(12,18,28,0.62); box-shadow:0 12px 30px rgba(0,0,0,0.45); } html.dark .hamburger span, html.dark .hamburger span:before, html.dark .hamburger span:after{ background:rgba(231,238,252,0.78); } html.dark .mobile-card{ background:rgba(12,18,28,0.72); border:1px solid rgba(231,238,252,0.12); box-shadow:var(--shadow); } html.dark .mobile-links a{ color:rgba(231,238,252,0.82); } html.dark .mobile-links a:hover{ background:rgba(231,238,252,0.06); border-color:rgba(231,238,252,0.10); } html.dark .mobile-links a.active{ background:rgba(37,99,235,0.16); border-color:rgba(37,99,235,0.26); } /* ------------------------- Section typography ------------------------- */ html.dark .eyebrow{ color:rgba(135,170,255,0.92); background:rgba(37,99,235,0.16); border:1px solid rgba(37,99,235,0.26); } html.dark .p{ color:var(--muted); } html.dark .lead{ color:rgba(231,238,252,0.68); } /* ------------------------- Cards / badges ------------------------- */ html.dark .card{ background:rgba(12,18,28,0.74); border:1px solid rgba(231,238,252,0.12); box-shadow:var(--shadow); } html.dark .card.soft{ background:rgba(12,18,28,0.62); } html.dark .card p{ color:var(--muted); } html.dark .badge{ color:rgba(231,238,252,0.82); background:rgba(245,216,122,0.10); border:1px solid rgba(176,137,0,0.22); } html.dark .badge.blue{ background:rgba(37,99,235,0.16); border-color:rgba(37,99,235,0.26); color:rgba(135,170,255,0.92); } html.dark .badge.rose{ background:rgba(225,29,72,0.14); border-color:rgba(225,29,72,0.24); color:rgba(255,145,170,0.92); } /* ------------------------- Hero ------------------------- */ html.dark .hero-card{ background: radial-gradient(1200px 460px at 10% 10%, rgba(37,99,235,0.22), transparent 55%), radial-gradient(900px 520px at 95% 20%, rgba(245,216,122,0.14), transparent 55%), rgba(12,18,28,0.72); border:1px solid rgba(231,238,252,0.12); box-shadow:var(--shadow2); } html.dark .hero-card:before{ background:linear-gradient(90deg, rgba(37,99,235,0.0), rgba(37,99,235,0.18), rgba(37,99,235,0.0)); opacity:.38; } html.dark .hero-mini{ background:rgba(12,18,28,0.72); border:1px solid rgba(231,238,252,0.12); box-shadow:var(--shadow2); } html.dark .stat span{ color:var(--muted); } html.dark .li{ color:rgba(231,238,252,0.78); } html.dark .check{ background:rgba(37,99,235,0.18); border:1px solid rgba(37,99,235,0.28); } html.dark .check svg{ fill:rgba(135,170,255,0.92); } html.dark hr.sep{ border-top:1px solid rgba(231,238,252,0.10); } /* Callout */ html.dark .callout{ background:rgba(245,216,122,0.10); border:1px solid rgba(176,137,0,0.22); } html.dark .callout p{ color:rgba(231,238,252,0.70); } /* ------------------------- Pricing ------------------------- */ html.dark .price-card{ background:rgba(12,18,28,0.74); border:1px solid rgba(231,238,252,0.12); box-shadow:var(--shadow2); } html.dark .price-card.featured{ background: radial-gradient(920px 520px at 20% 20%, rgba(37,99,235,0.20), transparent 55%), radial-gradient(780px 460px at 90% 40%, rgba(245,216,122,0.14), transparent 55%), rgba(12,18,28,0.74); border-color:rgba(37,99,235,0.26); } html.dark .price small{ color:rgba(231,238,252,0.62); } html.dark .features li{ color:rgba(231,238,252,0.78); } html.dark .features li svg{ fill:rgba(135,170,255,0.92); } /* ------------------------- Forms ------------------------- */ html.dark .input, html.dark .textarea{ border:1px solid rgba(231,238,252,0.14); background:rgba(10,14,20,0.72); color:rgba(231,238,252,0.92); } html.dark .input::placeholder, html.dark .textarea::placeholder{ color:rgba(231,238,252,0.45); } html.dark .input:focus, html.dark .textarea:focus{ border-color:rgba(37,99,235,0.52); box-shadow:0 0 0 4px rgba(37,99,235,0.18); } html.dark .label{ color:rgba(231,238,252,0.72); } html.dark .notice{ border:1px solid rgba(231,238,252,0.12); background:rgba(12,18,28,0.72); color:rgba(231,238,252,0.82); box-shadow:var(--shadow); } html.dark .notice.ok{ border-color:rgba(34,197,94,0.26); background:rgba(34,197,94,0.12); } html.dark .notice.err{ border-color:rgba(225,29,72,0.26); background:rgba(225,29,72,0.12); } /* ------------------------- Footer ------------------------- */ html.dark .footer{ border-top:1px solid rgba(231,238,252,0.10); background:rgba(12,18,28,0.46); } html.dark .footer a{ color:rgba(231,238,252,0.78); } html.dark .footer a:hover{ background:rgba(231,238,252,0.06); } html.dark .footer .muted{ color:rgba(231,238,252,0.62); } /* IN-LINE IMPORTED - browse churches */ .listing-grid{display:grid; gap:12px;} .church-item{ border:1px solid var(--line); border-radius:18px; padding:14px; background: var(--card); display:flex; gap:14px; align-items:stretch; } .church-left{flex:1;} .church-title{margin:0; font-weight:900; font-size:18px; letter-spacing:-.2px;} .church-meta{margin-top:6px; color:var(--muted); line-height:1.6;} .stars{display:inline-flex; gap:4px; vertical-align:middle;} .mini{ font-size:12px; color:var(--muted); } .rating-line{ margin-top:8px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; } .tier-badge{ display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:6px 10px; font-size:12px; font-weight:800; border:1px solid var(--line); color: #FFFFFF !important;; background: rgba(148,163,184,.10); } .tier-pro{ color: #FFFFFF !important; background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.25); } .tier-starter{ color: #FFFFFF !important; background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.25); } .church-actions{display:flex; flex-direction:column; gap:10px; justify-content:center; min-width:190px;} .church-actions .btn{width:100%;} .starter-card{ background: radial-gradient(900px 420px at 70% 20%, rgba(59,130,246,.18), transparent 60%), linear-gradient(180deg, rgba(59,130,246,.08), rgba(255,255,255,.0)); border-color: rgba(59,130,246,.28); box-shadow: 0 18px 45px rgba(59,130,246,.10); } .pro-card{ background: radial-gradient(900px 420px at 70% 20%, rgba(245,158,11,.18), transparent 60%), linear-gradient(180deg, rgba(245,158,11,.07), rgba(255,255,255,.0)); border-color: rgba(245,158,11,.28); box-shadow: 0 18px 45px rgba(245,158,11,.10); } /* church profile */ html.dark .discovery-packmeta{ font-size:12px; font-weight:900; color: #FFFFFF; } /*giving*/ html.dark .giving-title{ font-size:12px; font-weight:950; letter-spacing:.22px; text-transform:uppercase; color:rgba(231,238,252,0.82); } .give-meta .top{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:240px; } .give-meta .sub{ font-weight:800; color:rgba(231,238,252,0.82); font-size:11px; margin-top:3px; } /* ========================= HIERARCHY (POLISHED) Dark mode overrides ========================= */ html.dark .hier-card{ border:1px solid rgba(231,238,252,.12); background: radial-gradient(1100px 520px at 10% 0%, rgba(37,99,235,.18), transparent 60%), radial-gradient(900px 520px at 95% 10%, rgba(245,216,122,.10), transparent 55%), rgba(12,18,28,.72); box-shadow: 0 22px 66px rgba(0,0,0,.62); } html.dark .hier-head{ border-bottom:1px solid rgba(231,238,252,.10); } html.dark .hier-sub{ color:rgba(231,238,252,.70); } html.dark .tier{ border:1px solid rgba(231,238,252,.12); background: radial-gradient(900px 420px at 20% 0%, rgba(37,99,235,.16), transparent 60%), rgba(12,18,28,.66); box-shadow: 0 18px 55px rgba(0,0,0,.55); } html.dark .tier-top{ border-bottom:1px solid rgba(231,238,252,.10); } html.dark .tier-label{ color:rgba(231,238,252,.82); } html.dark .tier-label:before{ box-shadow:0 14px 30px rgba(176,137,0,.22); } html.dark .role-pill{ border:1px solid rgba(37,99,235,.28); background:rgba(37,99,235,.14); color:rgba(190,210,255,.92); } html.dark .role{ border:1px solid rgba(231,238,252,.12); background:rgba(12,18,28,.72); } html.dark .role-name{ color:rgba(231,238,252,.92); } html.dark .role-desc{ color:rgba(231,238,252,.68); } html.dark .slot{ border:1px solid rgba(231,238,252,.12); background: radial-gradient(700px 260px at 10% 0%, rgba(245,216,122,.08), transparent 60%), rgba(10,14,20,.72); } html.dark .slot-k{ color:rgba(231,238,252,.62); } html.dark .slot-v{ color:rgba(231,238,252,.92); } html.dark .slot-empty{ color:rgba(231,238,252,.62); } /* ========================= EVENTS (POLISHED) Dark mode overrides ========================= */ html.dark .events-card{ border:1px solid rgba(231,238,252,.12); border-radius:22px; padding:18px; background: radial-gradient(1100px 520px at 10% 0%, rgba(37,99,235,.18), transparent 60%), radial-gradient(900px 520px at 95% 10%, rgba(245,216,122,.10), transparent 55%), radial-gradient(900px 420px at 20% 10%, rgba(16,185,129,.10), transparent 60%), rgba(12,18,28,.72); box-shadow: 0 22px 66px rgba(0,0,0,.62); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); margin-top:14px; } html.dark .events-head{ border-bottom:1px solid rgba(231,238,252,.10); } html.dark .events-title{ color:rgba(231,238,252,.92); letter-spacing:-.2px; } html.dark .events-sub{ color:rgba(231,238,252,.70); } /* Tabs */ html.dark .events-tabs{ gap:10px; } html.dark .events-tab{ border:1px solid rgba(231,238,252,.12); background: rgba(12,18,28,.62); color: rgba(231,238,252,.86); box-shadow: 0 12px 30px rgba(0,0,0,.35); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); transition: transform .08s ease, box-shadow .12s ease, background .12s ease; } html.dark .events-tab:hover{ background: rgba(231,238,252,.06); box-shadow: 0 18px 46px rgba(0,0,0,.45); transform: translateY(-1px); } html.dark .events-tab.active{ border-color: rgba(16,185,129,.30); background: rgba(16,185,129,.14); color: rgba(225,255,245,.92); } /* List item */ html.dark .ev-item{ border:1px solid rgba(231,238,252,.12); background: radial-gradient(900px 320px at 15% 0%, rgba(37,99,235,.14), transparent 60%), rgba(12,18,28,.66); border-radius:18px; box-shadow: 0 18px 55px rgba(0,0,0,.52); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); } html.dark .ev-title{ color: rgba(231,238,252,.92); letter-spacing:-.2px; } html.dark .ev-desc{ color: rgba(231,238,252,.70); } html.dark .ev-meta{ color: rgba(231,238,252,.62); } /* Pills */ html.dark .pill{ border:1px solid rgba(231,238,252,.14); background: rgba(148,163,184,.10); color: rgba(231,238,252,.86); box-shadow: 0 10px 26px rgba(0,0,0,.30); } html.dark .pill.green{ border-color: rgba(16,185,129,.32); background: rgba(16,185,129,.14); color: rgba(225,255,245,.92); } html.dark .pill.blue{ border-color: rgba(59,130,246,.34); background: rgba(59,130,246,.16); color: rgba(205,225,255,.92); } html.dark .pill.gold{ border-color: rgba(245,158,11,.34); background: rgba(245,158,11,.14); color: rgba(255,245,220,.92); } html.dark .pill.red{ border-color: rgba(239,68,68,.34); background: rgba(239,68,68,.14); color: rgba(255,205,205,.92); } /* Small buttons */ html.dark .btn-sm{ border:1px solid rgba(231,238,252,.12); background: rgba(12,18,28,.62); color: rgba(231,238,252,.86); box-shadow: 0 12px 30px rgba(0,0,0,.35); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); transition: transform .08s ease, box-shadow .12s ease, background .12s ease; } html.dark .btn-sm:hover{ background: rgba(231,238,252,.06); box-shadow: 0 18px 46px rgba(0,0,0,.45); transform: translateY(-1px); } html.dark .btn-sm.primary{ border-color: rgba(16,185,129,.32); background: rgba(16,185,129,.14); color: rgba(225,255,245,.92); } html.dark .btn-sm.danger{ border-color: rgba(239,68,68,.34); background: rgba(239,68,68,.14); color: rgba(255,205,205,.92); } /* Inline notices */ html.dark .notice-inline{ border:1px solid rgba(231,238,252,.12); background: rgba(148,163,184,.10); color: rgba(231,238,252,.78); box-shadow: 0 14px 40px rgba(0,0,0,.40); } html.dark .notice-inline.ok{ border-color: rgba(16,185,129,.30); background: rgba(16,185,129,.14); color: rgba(225,255,245,.92); } html.dark .notice-inline.err{ border-color: rgba(239,68,68,.32); background: rgba(239,68,68,.14); color: rgba(255,205,205,.92); } /* Past events details */ html.dark details.ev-past{ border:1px solid rgba(231,238,252,.12); background: rgba(12,18,28,.62); border-radius:18px; box-shadow: 0 18px 55px rgba(0,0,0,.52); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); } html.dark details.ev-past summary{ color: rgba(231,238,252,.86); } /* ========================= ENHANCED PROFILE (POLISHED) Dark mode overrides ========================= */ html.dark .enhanced-card{ border:1px solid rgba(231,238,252,.12); border-radius:22px; padding:18px; background: radial-gradient(1100px 520px at 10% 0%, rgba(37,99,235,.18), transparent 60%), radial-gradient(900px 520px at 95% 10%, rgba(245,216,122,.12), transparent 55%), radial-gradient(900px 420px at 20% 10%, rgba(245,158,11,.10), transparent 60%), rgba(12,18,28,.72); box-shadow: 0 22px 66px rgba(0,0,0,.62); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); margin-top:14px; } html.dark .enhanced-head{ border-bottom:1px solid rgba(231,238,252,.10); padding-bottom:12px; margin-bottom:14px; } html.dark .enhanced-title{ color: rgba(231,238,252,.92); letter-spacing:-.2px; } html.dark .enhanced-sub{ color: rgba(231,238,252,.70); } /* Groups layout stays the same, but make containers feel premium */ html.dark .enhanced-group{ border:1px solid rgba(231,238,252,.12); background: radial-gradient(900px 360px at 15% 0%, rgba(37,99,235,.12), transparent 60%), rgba(12,18,28,.62); border-radius:18px; padding:14px; box-shadow: 0 18px 55px rgba(0,0,0,.52); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); } html.dark .enhanced-group-head{ border-bottom:1px solid rgba(231,238,252,.10); padding-bottom:10px; margin-bottom:12px; } html.dark .enhanced-group-title{ color: rgba(231,238,252,.86); letter-spacing:.28px; } /* Chip becomes a proper glass pill */ html.dark .enhanced-chip{ border:1px solid rgba(231,238,252,.14); background: rgba(148,163,184,.10); color: rgba(231,238,252,.78); box-shadow: 0 10px 26px rgba(0,0,0,.30); } /* Item cards */ html.dark .enhanced-item{ border:1px solid rgba(231,238,252,.12); background: radial-gradient(900px 320px at 20% 0%, rgba(245,216,122,.08), transparent 60%), rgba(12,18,28,.60); border-radius:16px; padding:12px 12px; box-shadow: 0 16px 48px rgba(0,0,0,.48); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); } html.dark .enhanced-k{ color: rgba(231,238,252,.62); } html.dark .enhanced-v{ color: rgba(231,238,252,.90); font-weight:850; } /* Empty */ html.dark .enhanced-empty{ color: rgba(231,238,252,.62); } /* ========================= FAQs (POLISHED) Dark mode overrides ========================= */ html.dark .faq-card{ border:1px solid rgba(231,238,252,.12); border-radius:22px; padding:18px; background: radial-gradient(1100px 520px at 10% 0%, rgba(37,99,235,.18), transparent 60%), radial-gradient(900px 520px at 95% 10%, rgba(245,216,122,.10), transparent 55%), radial-gradient(900px 420px at 80% 10%, rgba(59,130,246,.12), transparent 60%), rgba(12,18,28,.72); box-shadow: 0 22px 66px rgba(0,0,0,.62); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); margin-top:14px; } html.dark .faq-head{ border-bottom:1px solid rgba(231,238,252,.10); padding-bottom:12px; margin-bottom:14px; } html.dark .faq-title{ color: rgba(231,238,252,.92); letter-spacing:-.2px; } html.dark .faq-sub{ color: rgba(231,238,252,.70); } /* Top pill (Pro / Starter badge) */ html.dark .faq-pill{ font-size:12px; font-weight:900; padding:6px 11px; border-radius:999px; border:1px solid rgba(231,238,252,.14); background: rgba(12,18,28,.62); color: rgba(231,238,252,.86); box-shadow: 0 10px 26px rgba(0,0,0,.35); } html.dark .faq-pill.pro{ border-color: rgba(59,130,246,.32); background: rgba(59,130,246,.16); color: rgba(205,225,255,.92); } html.dark .faq-pill.starter{ border-color: rgba(245,158,11,.32); background: rgba(245,158,11,.14); color: rgba(255,235,190,.92); } /* FAQ items */ html.dark .faq-item{ border:1px solid rgba(231,238,252,.12); background: radial-gradient(900px 320px at 15% 0%, rgba(37,99,235,.14), transparent 60%), rgba(12,18,28,.64); border-radius:18px; padding:14px; box-shadow: 0 18px 55px rgba(0,0,0,.52); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); } /* Question row */ html.dark .faq-q{ color: rgba(231,238,252,.92); letter-spacing:-.2px; } html.dark .faq-a{ color: rgba(231,238,252,.72); line-height:1.65; } /* Meta */ html.dark .faq-meta{ color: rgba(231,238,252,.60); } /* Chips */ html.dark .faq-chip{ border:1px solid rgba(231,238,252,.14); background: rgba(148,163,184,.10); color: rgba(231,238,252,.82); box-shadow: 0 8px 20px rgba(0,0,0,.30); } html.dark .faq-chip.pin{ border-color: rgba(59,130,246,.32); background: rgba(59,130,246,.16); color: rgba(205,225,255,.92); } /* DASHBOARD IMPORTS */ /* ========================= Dashboard Stat Rows Dark mode overrides ========================= */ html.dark .stat-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border:1px solid rgba(231,238,252,.12); border-radius:16px; background: radial-gradient(900px 320px at 15% 0%, rgba(37,99,235,.14), transparent 60%), rgba(12,18,28,.64); box-shadow: 0 16px 46px rgba(0,0,0,.50); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); } html.dark .stat-k{ font-size:12px; color: rgba(231,238,252,.64); margin:0 0 3px 0; } html.dark .stat-v{ margin:0; font-weight:950; letter-spacing:.2px; color: rgba(231,238,252,.92); } /* Inspect button */ html.dark .inspect{ width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border-radius:12px; border:1px solid rgba(59,130,246,.34); background: radial-gradient(700px 220px at 30% 20%, rgba(37,99,235,.22), transparent 60%), rgba(59,130,246,.14); box-shadow: 0 12px 28px rgba(0,0,0,.35); text-decoration:none; flex:0 0 auto; transition: transform .08s ease, box-shadow .12s ease, background .12s ease; } html.dark .inspect:hover{ transform: translateY(-1px); box-shadow: 0 16px 40px rgba(0,0,0,.45); background: radial-gradient(700px 220px at 30% 20%, rgba(37,99,235,.30), transparent 60%), rgba(59,130,246,.18); } html.dark .inspect:active{ transform: translateY(0px); } html.dark .inspect svg{ width:18px; height:18px; color: rgba(231,238,252,.92); } /* ========================= Dashboard Module Cards Dark mode overrides ========================= */ html.dark .module-card{ border:1px solid rgba(231,238,252,.12); border-radius:18px; background: radial-gradient(900px 360px at 15% 0%, rgba(37,99,235,.16), transparent 60%), radial-gradient(900px 360px at 90% 10%, rgba(245,216,122,.10), transparent 55%), rgba(12,18,28,.66); box-shadow: 0 18px 58px rgba(0,0,0,.55); padding:16px; display:flex; gap:12px; align-items:flex-start; backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); } html.dark .module-ico{ width:40px; height:40px; border-radius:14px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(59,130,246,.34); background: radial-gradient(600px 260px at 35% 25%, rgba(37,99,235,.26), transparent 60%), rgba(59,130,246,.12); box-shadow: 0 14px 34px rgba(0,0,0,.35); flex:0 0 auto; } html.dark .module-title{ margin:0; font-size:16px; font-weight:950; letter-spacing:.15px; color: rgba(231,238,252,.92); } html.dark .module-desc{ margin:6px 0 0 0; color: rgba(231,238,252,.66); line-height:1.6; } html.dark .module-meta{ margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; } /* pills */ html.dark .module-pill{ font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid rgba(231,238,252,.14); background: rgba(231,238,252,.06); color: rgba(231,238,252,.82); box-shadow: 0 10px 26px rgba(0,0,0,.22); } html.dark .module-pill.locked{ border-color: rgba(231,238,252,.12); background: rgba(148,163,184,.10); color: rgba(231,238,252,.62); } /* actions spacing unchanged */ html.dark .module-actions{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; } /* locked card: subdued, still premium */ html.dark .module-card.locked{ background: radial-gradient(900px 360px at 15% 0%, rgba(148,163,184,.10), transparent 60%), rgba(12,18,28,.54); border-color: rgba(231,238,252,.10); opacity: .92; filter: saturate(.92); } html.dark .module-card.locked .module-ico{ border-color: rgba(231,238,252,.14); background: radial-gradient(600px 260px at 35% 25%, rgba(148,163,184,.18), transparent 60%), rgba(148,163,184,.08); box-shadow: 0 12px 30px rgba(0,0,0,.28); } /* ========================= CONGREGATION MEMBERS Dark mode overrides ========================= */ html.dark .member-table{ width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border:1px solid rgba(231,238,252,.12); border-radius:18px; background: radial-gradient(1000px 380px at 15% 0%, rgba(37,99,235,.14), transparent 60%), rgba(12,18,28,.72); box-shadow: 0 22px 66px rgba(0,0,0,.62); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); } /* Cells */ html.dark .member-table th, html.dark .member-table td{ text-align:left; padding:12px 12px; border-bottom:1px solid rgba(231,238,252,.10); vertical-align:middle; color: rgba(231,238,252,.88); } html.dark .member-table tr:last-child td{ border-bottom:none; } /* Header */ html.dark .member-table th{ font-size:12px; text-transform:uppercase; letter-spacing:.12em; color: rgba(231,238,252,.62); background: linear-gradient( 180deg, rgba(37,99,235,.18), rgba(12,18,28,.85) ); border-bottom:1px solid rgba(231,238,252,.14); } /* Subtle row hover */ html.dark .member-table tbody tr:hover{ background: rgba(231,238,252,.04); } /* Mono text */ html.dark .mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:12px; color: rgba(231,238,252,.78); } /* Pills */ html.dark .pill{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:950; padding:6px 10px; border-radius:999px; border:1px solid rgba(231,238,252,.14); background: rgba(231,238,252,.06); color: rgba(231,238,252,.86); white-space:nowrap; box-shadow: 0 10px 26px rgba(0,0,0,.28); } html.dark .pill.green{ border-color: rgba(16,185,129,.32); background: rgba(16,185,129,.14); color: rgba(225,255,245,.92); } html.dark .pill.red{ border-color: rgba(239,68,68,.34); background: rgba(239,68,68,.14); color: rgba(255,205,205,.92); } html.dark .pill.blue{ border-color: rgba(59,130,246,.34); background: rgba(59,130,246,.16); color: rgba(205,225,255,.92); } /* Inspect button */ html.dark .inspect{ width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border-radius:12px; border:1px solid rgba(59,130,246,.34); background: radial-gradient(700px 220px at 30% 20%, rgba(37,99,235,.26), transparent 60%), rgba(59,130,246,.14); text-decoration:none; box-shadow: 0 12px 28px rgba(0,0,0,.35); transition: transform .08s ease, box-shadow .12s ease, background .12s ease; } html.dark .inspect:hover{ transform: translateY(-1px); box-shadow: 0 16px 40px rgba(0,0,0,.45); background: radial-gradient(700px 220px at 30% 20%, rgba(37,99,235,.32), transparent 60%), rgba(59,130,246,.18); } html.dark .inspect svg{ width:18px; height:18px; color: rgba(231,238,252,.92); } /* Pager */ html.dark .pager{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between; margin-top:14px; } html.dark .pager .muted{ font-size:13px; color: rgba(231,238,252,.64); } html.dark .pager-actions{ display:flex; gap:10px; flex-wrap:wrap; } html.dark .btn-mini{ padding:8px 10px; border-radius:12px; font-size:12px; font-weight:950; border:1px solid rgba(231,238,252,.14); background: rgba(12,18,28,.62); color: rgba(231,238,252,.86); text-decoration:none; cursor:pointer; box-shadow: 0 12px 30px rgba(0,0,0,.35); transition: transform .08s ease, box-shadow .12s ease, background .12s ease; } html.dark .btn-mini:hover{ transform: translateY(-1px); box-shadow: 0 16px 40px rgba(0,0,0,.45); background: rgba(231,238,252,.06); } /* ============================== PROFILE VIEW - DARK GLASS FIX Put this at the VERY END. This force-kills the grey light surfaces. ============================== */ html.dark .profile-grid .card, html.dark .ladder-grid .card, html.dark .follow-card, html.dark .member-table, html.dark .events-card, html.dark .enhanced-card, html.dark .faq-card{ border-color: rgba(231,238,252,.12) !important; background: rgba(10,14,22,.62) !important; box-shadow: 0 26px 80px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.05) !important; backdrop-filter: blur(14px) saturate(155%) !important; -webkit-backdrop-filter: blur(14px) saturate(155%) !important; } /* Same thing if your project uses body.dark instead of html.dark */ body.dark .profile-grid .card, body.dark .ladder-grid .card, body.dark .follow-card, body.dark .member-table, body.dark .events-card, body.dark .enhanced-card, body.dark .faq-card{ border-color: rgba(231,238,252,.12) !important; background: rgba(10,14,22,.62) !important; box-shadow: 0 26px 80px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.05) !important; backdrop-filter: blur(14px) saturate(155%) !important; -webkit-backdrop-filter: blur(14px) saturate(155%) !important; } /* Add subtle blue+gold glow ONLY on the top two profile cards (looks premium) */ html.dark .profile-grid .card, body.dark .profile-grid .card{ background: radial-gradient(900px 420px at 18% 8%, rgba(37,99,235,.18), transparent 62%), radial-gradient(900px 420px at 82% 0%, rgba(245,158,11,.12), transparent 65%), rgba(10,14,22,.62) !important; } /* Fix text contrast inside those cards */ html.dark .profile-grid .card, body.dark .profile-grid .card{ color: rgba(231,238,252,.82) !important; } html.dark .profile-grid .card h1, html.dark .profile-grid .card h2, html.dark .profile-grid .card h3, body.dark .profile-grid .card h1, body.dark .profile-grid .card h2, body.dark .profile-grid .card h3{ color: rgba(231,238,252,.94) !important; } html.dark .profile-grid .card b, html.dark .profile-grid .card strong, body.dark .profile-grid .card b, body.dark .profile-grid .card strong{ color: rgba(231,238,252,.92) !important; } /* Pills inside those cards (the green + joined timestamp) */ html.dark .profile-grid .pill, body.dark .profile-grid .pill{ border-color: rgba(231,238,252,.14) !important; background: rgba(231,238,252,.06) !important; color: rgba(231,238,252,.88) !important; } html.dark .profile-grid .pill.green, body.dark .profile-grid .pill.green{ border-color: rgba(16,185,129,.30) !important; background: rgba(16,185,129,.14) !important; color: rgba(207,255,236,.92) !important; } /* Badge cards: stop the washed look, improve readability */ html.dark .badge .name, body.dark .badge .name{ color: rgba(231,238,252,.94) !important; } html.dark .badge .desc, body.dark .badge .desc{ color: rgba(231,238,252,.72) !important; } html.dark .badge .meta, body.dark .badge .meta{ color: rgba(231,238,252,.55) !important; } /* Ladder bar polish */ html.dark .bar, body.dark .bar{ border-color: rgba(231,238,252,.14) !important; background: rgba(231,238,252,.06) !important; } html.dark .bar > div, body.dark .bar > div{ background: linear-gradient(90deg, rgba(59,130,246,.92), rgba(37,99,235,.92)) !important; box-shadow: 0 0 22px rgba(37,99,235,.30) !important; } /* ============================== VOLUNTEER MODULE - DARK MODE Put this at the VERY END ============================== */ /* Works whether you toggle html.dark or body.dark */ html.dark .vm-card, body.dark .vm-card{ border-color: rgba(231,238,252,.12) !important; background: radial-gradient(900px 420px at 18% 10%, rgba(37,99,235,.18), transparent 62%), radial-gradient(900px 420px at 84% 0%, rgba(245,158,11,.10), transparent 64%), rgba(10,14,22,.62) !important; box-shadow: 0 26px 80px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.05) !important; backdrop-filter: blur(14px) saturate(155%) !important; -webkit-backdrop-filter: blur(14px) saturate(155%) !important; } /* Text + labels */ html.dark .field label, body.dark .field label{ color: rgba(231,238,252,.62) !important; } /* Inputs */ html.dark .field input, html.dark .field textarea, html.dark .field select, body.dark .field input, body.dark .field textarea, body.dark .field select{ border-color: rgba(231,238,252,.14) !important; background: rgba(8,12,18,.55) !important; color: rgba(231,238,252,.90) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 28px rgba(0,0,0,.35) !important; } html.dark .field input::placeholder, html.dark .field textarea::placeholder, body.dark .field input::placeholder, body.dark .field textarea::placeholder{ color: rgba(231,238,252,.40) !important; } html.dark .field input:focus, html.dark .field textarea:focus, html.dark .field select:focus, body.dark .field input:focus, body.dark .field textarea:focus, body.dark .field select:focus{ outline: none !important; border-color: rgba(245,158,11,.30) !important; box-shadow: 0 0 0 4px rgba(245,158,11,.12), 0 16px 40px rgba(0,0,0,.48) !important; } /* Pills (status chips) */ html.dark .pill, body.dark .pill{ border-color: rgba(231,238,252,.14) !important; background: rgba(231,238,252,.06) !important; color: rgba(231,238,252,.88) !important; } html.dark .pill.green, body.dark .pill.green{ border-color: rgba(16,185,129,.30) !important; background: rgba(16,185,129,.14) !important; color: rgba(207,255,236,.92) !important; } html.dark .pill.red, body.dark .pill.red{ border-color: rgba(239,68,68,.30) !important; background: rgba(239,68,68,.12) !important; color: rgba(255,214,214,.92) !important; } /* Table */ html.dark .table, body.dark .table{ border-color: rgba(231,238,252,.12) !important; background: rgba(10,14,22,.52) !important; box-shadow: 0 22px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05) !important; } html.dark .table th, body.dark .table th{ color: rgba(231,238,252,.62) !important; background: rgba(231,238,252,.05) !important; border-bottom-color: rgba(231,238,252,.12) !important; } html.dark .table td, body.dark .table td{ color: rgba(231,238,252,.84) !important; border-bottom-color: rgba(231,238,252,.10) !important; } html.dark .table tr:hover td, body.dark .table tr:hover td{ background: rgba(37,99,235,.06) !important; } /* Muted text */ html.dark .muted-sm, body.dark .muted-sm{ color: rgba(231,238,252,.62) !important; } /* Mono text */ html.dark .mono, body.dark .mono{ color: rgba(231,238,252,.78) !important; } /* Buttons inside volunteer module (if your site uses .btn) */ html.dark .vm-card .btn, body.dark .vm-card .btn{ border-color: rgba(231,238,252,.14) !important; background: rgba(231,238,252,.06) !important; color: rgba(231,238,252,.90) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 30px rgba(0,0,0,.38) !important; } html.dark .vm-card .btn:hover, body.dark .vm-card .btn:hover{ border-color: rgba(245,158,11,.30) !important; background: rgba(245,158,11,.10) !important; transform: translateY(-1px); } html.dark .vm-card .btn:active, body.dark .vm-card .btn:active{ transform: translateY(0); } /* MOBILE: keep your stacked-table labels readable in dark */ @media (max-width: 520px){ html.dark .table td::before, body.dark .table td::before{ color: rgba(231,238,252,.55) !important; } html.dark .table tr, body.dark .table tr{ border-bottom-color: rgba(231,238,252,.10) !important; } } /* ============================== CHURCH QR MODULE - DARK MODE Put this at the VERY END ============================== */ html.dark .qr-card, body.dark .qr-card, html.dark .pro-card, body.dark .pro-card{ border-color: rgba(231,238,252,.12) !important; background: radial-gradient(900px 420px at 16% 10%, rgba(37,99,235,.18), transparent 62%), radial-gradient(900px 420px at 86% 0%, rgba(245,158,11,.10), transparent 64%), rgba(10,14,22,.62) !important; box-shadow: 0 26px 80px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.05) !important; backdrop-filter: blur(14px) saturate(155%) !important; -webkit-backdrop-filter: blur(14px) saturate(155%) !important; } /* QR display box + image */ html.dark .qr-box, body.dark .qr-box{ border-color: rgba(231,238,252,.14) !important; background: rgba(8,12,18,.55) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 55px rgba(0,0,0,.45) !important; } html.dark .qr-box img, body.dark .qr-box img{ border-color: rgba(231,238,252,.12) !important; background: rgba(255,255,255,.02) !important; box-shadow: 0 18px 55px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06) !important; } /* Key-value text + mono */ html.dark .kv, body.dark .kv{ color: rgba(231,238,252,.86) !important; } html.dark .mono, body.dark .mono{ color: rgba(231,238,252,.78) !important; } /* Pills */ html.dark .pill, body.dark .pill{ border-color: rgba(231,238,252,.14) !important; background: rgba(231,238,252,.06) !important; color: rgba(231,238,252,.88) !important; } html.dark .pill.green, body.dark .pill.green{ border-color: rgba(16,185,129,.30) !important; background: rgba(16,185,129,.14) !important; color: rgba(207,255,236,.92) !important; } html.dark .pill.red, body.dark .pill.red{ border-color: rgba(239,68,68,.30) !important; background: rgba(239,68,68,.12) !important; color: rgba(255,214,214,.92) !important; } /* CTA panel (gold) */ html.dark .cta, body.dark .cta{ border-color: rgba(245,158,11,.26) !important; background: radial-gradient(900px 420px at 18% 10%, rgba(245,158,11,.14), transparent 62%), rgba(10,14,22,.62) !important; box-shadow: 0 26px 80px rgba(0,0,0,.62), 0 18px 55px rgba(245,158,11,.10), inset 0 1px 0 rgba(255,255,255,.05) !important; backdrop-filter: blur(14px) saturate(155%) !important; -webkit-backdrop-filter: blur(14px) saturate(155%) !important; } html.dark .cta h4, body.dark .cta h4{ color: rgba(231,238,252,.92) !important; } html.dark .cta p, body.dark .cta p{ color: rgba(231,238,252,.66) !important; } /* Pro head text */ html.dark .pro-title, body.dark .pro-title{ color: rgba(231,238,252,.92) !important; } html.dark .pro-sub, body.dark .pro-sub{ color: rgba(231,238,252,.66) !important; } /* Pro toggle */ html.dark .pro-toggle, body.dark .pro-toggle{ border-color: rgba(231,238,252,.14) !important; background: rgba(231,238,252,.06) !important; color: rgba(231,238,252,.88) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important; } /* Switch + knob */ html.dark .switch, body.dark .switch{ border-color: rgba(231,238,252,.18) !important; background: rgba(231,238,252,.10) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important; } html.dark .knob, body.dark .knob{ background: rgba(231,238,252,.92) !important; box-shadow: 0 14px 34px rgba(0,0,0,.45) !important; } html.dark .pro-on .switch, body.dark .pro-on .switch{ border-color: rgba(245,158,11,.30) !important; background: linear-gradient(180deg, rgba(245,158,11,.45), rgba(245,158,11,.18)) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 14px 36px rgba(245,158,11,.12) !important; } html.dark .pro-off .switch, body.dark .pro-off .switch{ opacity: .92 !important; } /* Stats */ html.dark .stat, body.dark .stat{ border-color: rgba(231,238,252,.12) !important; background: rgba(8,12,18,.52) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important; } html.dark .stat .k, body.dark .stat .k{ color: rgba(231,238,252,.62) !important; } html.dark .stat .v, body.dark .stat .v{ color: rgba(231,238,252,.90) !important; } html.dark .stat .h, body.dark .stat .h{ color: rgba(231,238,252,.58) !important; } /* Table */ html.dark .tbl, body.dark .tbl{ border-color: rgba(231,238,252,.12) !important; background: rgba(10,14,22,.52) !important; box-shadow: 0 22px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05) !important; } html.dark .tbl th, body.dark .tbl th{ color: rgba(231,238,252,.62) !important; background: rgba(231,238,252,.05) !important; border-bottom-color: rgba(231,238,252,.12) !important; } html.dark .tbl td, body.dark .tbl td{ color: rgba(231,238,252,.84) !important; border-bottom-color: rgba(231,238,252,.10) !important; } html.dark .tbl tr:hover td, body.dark .tbl tr:hover td{ background: rgba(37,99,235,.06) !important; } /* Mobile stacked-table labels */ @media (max-width: 720px){ html.dark .tbl tr, body.dark .tbl tr{ border-bottom-color: rgba(231,238,252,.10) !important; } html.dark .tbl td::before, body.dark .tbl td::before{ color: rgba(231,238,252,.55) !important; } } /* Tag chip */ html.dark .tag, body.dark .tag{ border-color: rgba(231,238,252,.14) !important; background: rgba(231,238,252,.06) !important; color: rgba(231,238,252,.88) !important; } /* Locked overlay */ html.dark .locked-overlay, body.dark .locked-overlay{ background: rgba(0,0,0,.42) !important; backdrop-filter: blur(14px) saturate(155%) !important; -webkit-backdrop-filter: blur(14px) saturate(155%) !important; } html.dark .locked-box, body.dark .locked-box{ border-color: rgba(245,158,11,.26) !important; background: radial-gradient(900px 420px at 18% 10%, rgba(245,158,11,.16), transparent 62%), rgba(10,14,22,.70) !important; box-shadow: 0 26px 80px rgba(0,0,0,.70), 0 18px 55px rgba(245,158,11,.12), inset 0 1px 0 rgba(255,255,255,.05) !important; backdrop-filter: blur(14px) saturate(155%) !important; -webkit-backdrop-filter: blur(14px) saturate(155%) !important; } html.dark .locked-box h4, body.dark .locked-box h4{ color: rgba(231,238,252,.92) !important; } html.dark .locked-box p, body.dark .locked-box p{ color: rgba(231,238,252,.66) !important; } /* Optional: buttons inside CTA/locked/pro areas (if you use .btn / .btn-sm / .btn-mini) */ html.dark .cta .btn, html.dark .cta .btn-sm, html.dark .cta .btn-mini, html.dark .locked-actions .btn, html.dark .locked-actions .btn-sm, html.dark .locked-actions .btn-mini, html.dark .pro-card .btn, html.dark .pro-card .btn-sm, html.dark .pro-card .btn-mini, body.dark .cta .btn, body.dark .cta .btn-sm, body.dark .cta .btn-mini, body.dark .locked-actions .btn, body.dark .locked-actions .btn-sm, body.dark .locked-actions .btn-mini, body.dark .pro-card .btn, body.dark .pro-card .btn-sm, body.dark .pro-card .btn-mini{ border-color: rgba(231,238,252,.14) !important; background: rgba(231,238,252,.06) !important; color: rgba(231,238,252,.90) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 30px rgba(0,0,0,.38) !important; } html.dark .cta .btn:hover, html.dark .cta .btn-sm:hover, html.dark .cta .btn-mini:hover, html.dark .locked-actions .btn:hover, html.dark .locked-actions .btn-sm:hover, html.dark .locked-actions .btn-mini:hover, html.dark .pro-card .btn:hover, html.dark .pro-card .btn-sm:hover, html.dark .pro-card .btn-mini:hover, body.dark .cta .btn:hover, body.dark .cta .btn-sm:hover, body.dark .cta .btn-mini:hover, body.dark .locked-actions .btn:hover, body.dark .locked-actions .btn-sm:hover, body.dark .locked-actions .btn-mini:hover, body.dark .pro-card .btn:hover, body.dark .pro-card .btn-sm:hover, body.dark .pro-card .btn-mini:hover{ border-color: rgba(245,158,11,.30) !important; background: rgba(245,158,11,.10) !important; transform: translateY(-1px); } /* ============================== ENHANCED PROFILE (EP) - DARK MODE Put this at the VERY END ============================== */ html.dark .ep-q, body.dark .ep-q{ border-color: rgba(231,238,252,.12) !important; border-radius:14px; background: radial-gradient(900px 420px at 18% 10%, rgba(37,99,235,.14), transparent 62%), rgba(10,14,22,.58) !important; box-shadow: 0 22px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05) !important; backdrop-filter: blur(12px) saturate(155%) !important; -webkit-backdrop-filter: blur(12px) saturate(155%) !important; } html.dark .ep-q.disabled, body.dark .ep-q.disabled{ opacity:.62 !important; filter:saturate(.75) contrast(.98) !important; } /* Text */ html.dark .ep-label, body.dark .ep-label{ color: rgba(231,238,252,.92) !important; } html.dark .ep-hint, body.dark .ep-hint{ color: rgba(231,238,252,.64) !important; } html.dark .ep-mini, body.dark .ep-mini{ color: rgba(231,238,252,.58) !important; } /* Input */ html.dark .ep-input, body.dark .ep-input{ border-color: rgba(231,238,252,.14) !important; background: rgba(8,12,18,.62) !important; color: rgba(231,238,252,.90) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important; } html.dark .ep-input::placeholder, body.dark .ep-input::placeholder{ color: rgba(231,238,252,.48) !important; } html.dark .ep-input:focus, body.dark .ep-input:focus{ border-color: rgba(245,158,11,.30) !important; box-shadow: 0 0 0 4px rgba(245,158,11,.10), inset 0 1px 0 rgba(255,255,255,.05) !important; } /* Toggle row */ html.dark .ep-toggle, body.dark .ep-toggle{ color: rgba(231,238,252,.82) !important; } html.dark .ep-toggle input, body.dark .ep-toggle input{ accent-color: rgb(245,158,11); } /* Optional: buttons inside EP actions if you use .btn / .btn-sm / .btn-mini */ html.dark .ep-actions .btn, html.dark .ep-actions .btn-sm, html.dark .ep-actions .btn-mini, body.dark .ep-actions .btn, body.dark .ep-actions .btn-sm, body.dark .ep-actions .btn-mini{ border-color: rgba(231,238,252,.14) !important; background: rgba(231,238,252,.06) !important; color: rgba(231,238,252,.90) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 30px rgba(0,0,0,.38) !important; } html.dark .ep-actions .btn:hover, html.dark .ep-actions .btn-sm:hover, html.dark .ep-actions .btn-mini:hover, body.dark .ep-actions .btn:hover, body.dark .ep-actions .btn-sm:hover, body.dark .ep-actions .btn-mini:hover{ border-color: rgba(245,158,11,.30) !important; background: rgba(245,158,11,.10) !important; transform: translateY(-1px); } /* ============================== FAQS - DARK MODE Put this at the VERY END ============================== */ html.dark .faq-shell, body.dark .faq-shell{ border-color: rgba(231,238,252,.12) !important; background: radial-gradient(1000px 520px at 10% 0%, rgba(245,158,11,.14), transparent 62%), radial-gradient(900px 520px at 85% 0%, rgba(37,99,235,.12), transparent 60%), rgba(10,14,22,.58) !important; box-shadow: 0 22px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05) !important; backdrop-filter: blur(12px) saturate(155%) !important; -webkit-backdrop-filter: blur(12px) saturate(155%) !important; } html.dark .faq-top, body.dark .faq-top{ border-bottom-color: rgba(231,238,252,.10) !important; } html.dark .faq-title, body.dark .faq-title{ color: rgba(231,238,252,.92) !important; } html.dark .faq-sub, body.dark .faq-sub{ color: rgba(231,238,252,.64) !important; } /* Pills (Starter/Pro) */ html.dark .faq-pill, body.dark .faq-pill{ border-color: rgba(231,238,252,.14) !important; background: rgba(231,238,252,.06) !important; color: rgba(231,238,252,.86) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important; } html.dark .faq-pill.pro, body.dark .faq-pill.pro{ border-color: rgba(59,130,246,.32) !important; background: rgba(59,130,246,.12) !important; } html.dark .faq-pill.starter, body.dark .faq-pill.starter{ border-color: rgba(245,158,11,.34) !important; background: rgba(245,158,11,.12) !important; } /* Alerts */ html.dark .faq-alert, body.dark .faq-alert{ border-color: rgba(231,238,252,.12) !important; background: rgba(8,12,18,.58) !important; color: rgba(231,238,252,.84) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important; } html.dark .faq-alert.ok, body.dark .faq-alert.ok{ border-color: rgba(34,197,94,.28) !important; background: rgba(34,197,94,.08) !important; } html.dark .faq-alert.err, body.dark .faq-alert.err{ border-color: rgba(239,68,68,.28) !important; background: rgba(239,68,68,.08) !important; } /* Side cards */ html.dark .faq-card, body.dark .faq-card{ border-color: rgba(231,238,252,.12) !important; background: rgba(10,14,22,.48) !important; box-shadow: 0 16px 48px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.05) !important; } html.dark .faq-card h4, body.dark .faq-card h4{ color: rgba(231,238,252,.92) !important; } html.dark .faq-card p, body.dark .faq-card p{ color: rgba(231,238,252,.64) !important; } /* Form */ html.dark .f label, body.dark .f label{ color: rgba(231,238,252,.62) !important; } html.dark .f input[type="text"], html.dark .f textarea, html.dark .f select, body.dark .f input[type="text"], body.dark .f textarea, body.dark .f select{ border-color: rgba(231,238,252,.14) !important; background: rgba(8,12,18,.62) !important; color: rgba(231,238,252,.90) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important; } html.dark .f input[type="text"]::placeholder, html.dark .f textarea::placeholder, body.dark .f input[type="text"]::placeholder, body.dark .f textarea::placeholder{ color: rgba(231,238,252,.48) !important; } html.dark .f input[type="text"]:focus, html.dark .f textarea:focus, html.dark .f select:focus, body.dark .f input[type="text"]:focus, body.dark .f textarea:focus, body.dark .f select:focus{ border-color: rgba(245,158,11,.30) !important; box-shadow: 0 0 0 4px rgba(245,158,11,.10), inset 0 1px 0 rgba(255,255,255,.05) !important; } html.dark .f small, body.dark .f small{ color: rgba(231,238,252,.56) !important; } /* FAQ list items */ html.dark .faq-item, body.dark .faq-item{ border-color: rgba(231,238,252,.12) !important; background: rgba(10,14,22,.52) !important; box-shadow: 0 16px 48px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.05) !important; } html.dark .faq-q, body.dark .faq-q{ color: rgba(231,238,252,.92) !important; } html.dark .faq-meta, body.dark .faq-meta{ color: rgba(231,238,252,.60) !important; } /* Chips */ html.dark .chip, body.dark .chip{ border-color: rgba(231,238,252,.14) !important; background: rgba(231,238,252,.06) !important; color: rgba(231,238,252,.86) !important; } html.dark .chip.pin, body.dark .chip.pin{ border-color: rgba(59,130,246,.30) !important; background: rgba(59,130,246,.10) !important; } /* Answer text */ html.dark .faq-a, body.dark .faq-a{ color: rgba(231,238,252,.84) !important; } /* Mini buttons */ html.dark .mini-btn, body.dark .mini-btn{ border-color: rgba(231,238,252,.14) !important; background: rgba(231,238,252,.06) !important; color: rgba(231,238,252,.88) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important; } html.dark .mini-btn:hover, body.dark .mini-btn:hover{ border-color: rgba(245,158,11,.28) !important; background: rgba(245,158,11,.10) !important; transform: translateY(-1px); transition: transform .15s ease, border-color .15s ease, background .15s ease; } html.dark .mini-btn svg, body.dark .mini-btn svg{ opacity: .95 !important; } html.dark .mini-btn.danger, body.dark .mini-btn.danger{ border-color: rgba(239,68,68,.30) !important; background: rgba(239,68,68,.08) !important; } /* Edit details */ html.dark details.faq-edit, body.dark details.faq-edit{ border-top-color: rgba(231,238,252,.10) !important; } html.dark details.faq-edit summary, body.dark details.faq-edit summary{ color: rgba(231,238,252,.78) !important; } /* Muted helper */ html.dark .muted, body.dark .muted{ color: rgba(231,238,252,.62) !important; } /* ============================== EVENTS AREA - DARK MODE Put this at the VERY END ============================== */ html.dark .ev-wrap, body.dark .ev-wrap{ color: rgba(231,238,252,.90); } html.dark .panel, body.dark .panel{ border-color: rgba(231,238,252,.12) !important; background: rgba(10,14,22,.56) !important; box-shadow: 0 22px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05) !important; backdrop-filter: blur(12px) saturate(155%) !important; -webkit-backdrop-filter: blur(12px) saturate(155%) !important; } html.dark .panel.pro, body.dark .panel.pro{ background: radial-gradient(1000px 480px at 70% 15%, rgba(59,130,246,.18), transparent 62%), radial-gradient(900px 520px at 20% 0%, rgba(245,158,11,.10), transparent 60%), rgba(10,14,22,.56) !important; } html.dark .panel.starter, body.dark .panel.starter{ background: radial-gradient(1000px 480px at 70% 15%, rgba(245,158,11,.18), transparent 62%), radial-gradient(900px 520px at 20% 0%, rgba(59,130,246,.10), transparent 60%), rgba(10,14,22,.56) !important; } /* Pills */ html.dark .pill, body.dark .pill{ border-color: rgba(231,238,252,.14) !important; background: rgba(231,238,252,.06) !important; color: rgba(231,238,252,.86) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important; } html.dark .pill.blue, body.dark .pill.blue{ border-color: rgba(59,130,246,.32) !important; background: rgba(59,130,246,.12) !important; } html.dark .pill.gold, body.dark .pill.gold{ border-color: rgba(245,158,11,.34) !important; background: rgba(245,158,11,.12) !important; } html.dark .pill.muted, body.dark .pill.muted{ border-color: rgba(148,163,184,.26) !important; background: rgba(148,163,184,.10) !important; color: rgba(231,238,252,.74) !important; } /* Tabs */ html.dark .tab, body.dark .tab{ border-color: rgba(231,238,252,.12) !important; background: rgba(231,238,252,.06) !important; color: rgba(231,238,252,.86) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important; } html.dark .tab:hover, body.dark .tab:hover{ border-color: rgba(245,158,11,.26) !important; background: rgba(245,158,11,.10) !important; transform: translateY(-1px); transition: transform .15s ease, border-color .15s ease, background .15s ease; } html.dark .tab.active, body.dark .tab.active{ border-color: rgba(59,130,246,.32) !important; background: rgba(59,130,246,.14) !important; } /* Event items */ html.dark .ev-item, body.dark .ev-item{ border-color: rgba(231,238,252,.12) !important; background: rgba(10,14,22,.50) !important; box-shadow: 0 16px 48px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.05) !important; } html.dark .ev-item:hover, body.dark .ev-item:hover{ border-color: rgba(245,158,11,.22) !important; box-shadow: 0 22px 60px rgba(0,0,0,.52), 0 0 0 4px rgba(245,158,11,.08), inset 0 1px 0 rgba(255,255,255,.05) !important; } html.dark .ev-title, body.dark .ev-title{ color: rgba(231,238,252,.92) !important; } html.dark .ev-meta, body.dark .ev-meta{ color: rgba(231,238,252,.62) !important; } /* Buttons */ html.dark .btn-sm, body.dark .btn-sm{ border-color: rgba(231,238,252,.12) !important; background: rgba(231,238,252,.06) !important; color: rgba(231,238,252,.88) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important; } html.dark .btn-sm:hover, body.dark .btn-sm:hover{ border-color: rgba(245,158,11,.26) !important; background: rgba(245,158,11,.10) !important; transform: translateY(-1px); transition: transform .15s ease, border-color .15s ease, background .15s ease; } html.dark .btn-sm.primary, body.dark .btn-sm.primary{ border-color: rgba(59,130,246,.32) !important; background: rgba(59,130,246,.14) !important; } html.dark .btn-sm.danger, body.dark .btn-sm.danger{ border-color: rgba(239,68,68,.32) !important; background: rgba(239,68,68,.10) !important; color: rgba(254,226,226,.92) !important; } /* Form labels + inputs */ html.dark label, body.dark label{ color: rgba(231,238,252,.70) !important; } html.dark .in, html.dark textarea, html.dark select, body.dark .in, body.dark textarea, body.dark select{ border-color: rgba(231,238,252,.14) !important; background: rgba(8,12,18,.62) !important; color: rgba(231,238,252,.90) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important; } html.dark .in::placeholder, html.dark textarea::placeholder, body.dark .in::placeholder, body.dark textarea::placeholder{ color: rgba(231,238,252,.48) !important; } html.dark .in:focus, html.dark textarea:focus, html.dark select:focus, body.dark .in:focus, body.dark textarea:focus, body.dark select:focus{ border-color: rgba(245,158,11,.30) !important; box-shadow: 0 0 0 4px rgba(245,158,11,.10), inset 0 1px 0 rgba(255,255,255,.05) !important; outline: none !important; } /* Muted + small helper */ html.dark .muted, body.dark .muted{ color: rgba(231,238,252,.62) !important; } html.dark .small, body.dark .small{ color: rgba(231,238,252,.62) !important; } /* RSVP table */ html.dark .rsvp-table, body.dark .rsvp-table{ border-color: rgba(231,238,252,.12) !important; background: rgba(10,14,22,.52) !important; box-shadow: 0 16px 48px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.05) !important; } html.dark .rsvp-table th, body.dark .rsvp-table th{ color: rgba(231,238,252,.70) !important; background: rgba(231,238,252,.06) !important; border-bottom-color: rgba(231,238,252,.10) !important; } html.dark .rsvp-table td, body.dark .rsvp-table td{ color: rgba(231,238,252,.84) !important; border-bottom-color: rgba(231,238,252,.10) !important; } /* Links inside pager */ html.dark .pager a, body.dark .pager a{ color: rgba(231,238,252,.82) !important; } html.dark .pager a:hover, body.dark .pager a:hover{ color: rgba(245,158,11,.88) !important; } /* ========================= HG (dark mode) ========================= */ html.dark .hg-card, body.dark .hg-card{ border-color: rgba(231,238,252,.12); background: radial-gradient(1000px 520px at 18% 0%, rgba(59,130,246,.14), transparent 60%), radial-gradient(900px 520px at 90% 10%, rgba(245,158,11,.10), transparent 55%), rgba(10,14,22,.56); box-shadow: 0 26px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05); backdrop-filter: blur(12px) saturate(155%); -webkit-backdrop-filter: blur(12px) saturate(155%); } /* text helpers */ html.dark .muted-sm, body.dark .muted-sm{ color: rgba(231,238,252,.64); } /* labels */ html.dark .field label, body.dark .field label{ color: rgba(231,238,252,.64); } /* inputs (field + search) */ html.dark .field input, html.dark .search input, body.dark .field input, body.dark .search input{ border-color: rgba(231,238,252,.14); background: rgba(8,12,18,.55); color: rgba(231,238,252,.92); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); } html.dark .field input::placeholder, html.dark .search input::placeholder, body.dark .field input::placeholder, body.dark .search input::placeholder{ color: rgba(231,238,252,.44); } html.dark .field input:focus, html.dark .search input:focus, body.dark .field input:focus, body.dark .search input:focus{ outline: none; border-color: rgba(59,130,246,.38); box-shadow: 0 0 0 3px rgba(59,130,246,.14), inset 0 1px 0 rgba(255,255,255,.05); } /* chips (draggable people) */ html.dark .chip, body.dark .chip{ border-color: rgba(231,238,252,.14); background: rgba(11,16,26,.55); color: rgba(231,238,252,.88); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 34px rgba(0,0,0,.35); } html.dark .chip small, body.dark .chip small{ color: rgba(231,238,252,.60); } html.dark .chip:hover, body.dark .chip:hover{ border-color: rgba(59,130,246,.28); transform: translateY(-1px); transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 50px rgba(0,0,0,.45); } /* ladder role cards */ html.dark .role-card, body.dark .role-card{ border-color: rgba(231,238,252,.12); background: linear-gradient(180deg, rgba(12,17,28,.72), rgba(10,14,22,.58)); box-shadow: 0 20px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05); } html.dark .role-title, body.dark .role-title{ color: rgba(231,238,252,.92); } html.dark .role-meta, body.dark .role-meta{ color: rgba(231,238,252,.70); } /* pills */ html.dark .pill, body.dark .pill{ border-color: rgba(231,238,252,.14); background: rgba(9,13,20,.55); color: rgba(231,238,252,.86); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); } html.dark .pill.off, body.dark .pill.off{ border-color: rgba(148,163,184,.22); background: rgba(148,163,184,.10); color: rgba(231,238,252,.62); } /* slots */ html.dark .slot, body.dark .slot{ border-color: rgba(231,238,252,.18); background: rgba(9,13,20,.50); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); } html.dark .slot-k, body.dark .slot-k{ color: rgba(231,238,252,.58); } html.dark .slot-v, body.dark .slot-v{ color: rgba(231,238,252,.92); } html.dark .slot-sub, body.dark .slot-sub{ color: rgba(231,238,252,.60); } /* filled slots (blue glow) */ html.dark .slot.filled, body.dark .slot.filled{ border-color: rgba(59,130,246,.32); background: rgba(59,130,246,.10); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 14px 45px rgba(59,130,246,.10); } /* mini buttons */ html.dark .mini, body.dark .mini{ border-color: rgba(231,238,252,.14); background: rgba(12,17,28,.62); color: rgba(231,238,252,.86); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); } html.dark .mini:hover, body.dark .mini:hover{ border-color: rgba(59,130,246,.26); background: rgba(12,18,30,.78); } /* drag/drop states */ html.dark .dragging, body.dark .dragging{ opacity: .55; filter: saturate(.85); } html.dark .drop-target, body.dark .drop-target{ outline: 2px solid rgba(59,130,246,.45); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(59,130,246,.12); } /* drop hint */ html.dark .drop-hint, body.dark .drop-hint{ color: rgba(231,238,252,.55); } /* ========================= GIVING (dark mode) ========================= */ html.dark .giving-wrap, body.dark .giving-wrap{ border-color: rgba(231,238,252,.12); background: radial-gradient(1000px 520px at 14% 0%, rgba(59,130,246,.12), transparent 60%), radial-gradient(900px 520px at 88% 10%, rgba(245,158,11,.10), transparent 55%), rgba(10,14,22,.56); box-shadow: 0 26px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05); backdrop-filter: blur(12px) saturate(155%); -webkit-backdrop-filter: blur(12px) saturate(155%); } html.dark .giving-row, body.dark .giving-row{ border-color: rgba(231,238,252,.12); background: rgba(11,16,26,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 16px 50px rgba(0,0,0,.40); } html.dark .giving-name, body.dark .giving-name{ color: rgba(231,238,252,.92); } html.dark .giving-fields label, body.dark .giving-fields label{ color: rgba(231,238,252,.62); } /* inputs inside the giving rows */ html.dark .giving-fields .field, html.dark .mini, body.dark .giving-fields .field, body.dark .mini{ border-color: rgba(231,238,252,.14); background: rgba(8,12,18,.55); color: rgba(231,238,252,.92); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); } html.dark .giving-fields .field::placeholder, html.dark .mini::placeholder, body.dark .giving-fields .field::placeholder, body.dark .mini::placeholder{ color: rgba(231,238,252,.44); } html.dark .giving-fields .field:focus, html.dark .mini:focus, body.dark .giving-fields .field:focus, body.dark .mini:focus{ outline: none; border-color: rgba(59,130,246,.38); box-shadow: 0 0 0 3px rgba(59,130,246,.14), inset 0 1px 0 rgba(255,255,255,.05); } html.dark .giving-hint, body.dark .giving-hint{ color: rgba(231,238,252,.56); } /* toggle label text */ html.dark .toggle, body.dark .toggle{ color: rgba(231,238,252,.78); } /* make the “right column” feel aligned/polished */ html.dark .giving-right, body.dark .giving-right{ align-items: flex-end; } @media (max-width: 880px){ html.dark .giving-right, body.dark .giving-right{ align-items: stretch; } } /* subhead */ html.dark .subhead, body.dark .subhead{ color: rgba(231,238,252,.90); } html.dark .subhead .muted, body.dark .subhead .muted{ color: rgba(231,238,252,.62); } /* ========================= AI DISCOVERY (dark mode) ========================= */ html.dark .ai-wrap, body.dark .ai-wrap{ border-color: rgba(245,158,11,.45); background: radial-gradient(1000px 600px at 12% 8%, rgba(245,158,11,.22), transparent 55%), radial-gradient(900px 560px at 88% 0%, rgba(59,130,246,.16), transparent 60%), linear-gradient(180deg, rgba(12,16,26,.82), rgba(8,12,18,.72)); box-shadow: 0 30px 100px rgba(0,0,0,.65), 0 0 60px rgba(245,158,11,.12), inset 0 1px 0 rgba(255,255,255,.05); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); } /* top section */ html.dark .ai-title, body.dark .ai-title{ color: rgba(231,238,252,.95); } html.dark .ai-sub, body.dark .ai-sub{ color: rgba(231,238,252,.68); } /* cards */ html.dark .ai-card, body.dark .ai-card{ border-color: rgba(245,158,11,.28); background: rgba(14,20,32,.65); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 20px 60px rgba(0,0,0,.45); } html.dark .ai-card h3, body.dark .ai-card h3{ color: rgba(231,238,252,.92); } html.dark .ai-card p, body.dark .ai-card p{ color: rgba(231,238,252,.62); } /* main AI output box */ html.dark .ai-box, body.dark .ai-box{ border-color: rgba(231,238,252,.12); background: rgba(9,13,20,.65); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 18px 60px rgba(0,0,0,.45); } html.dark .ai-box textarea, body.dark .ai-box textarea{ color: rgba(231,238,252,.92); background: transparent; } html.dark .ai-box textarea::placeholder, body.dark .ai-box textarea::placeholder{ color: rgba(231,238,252,.42); } /* metadata row */ html.dark .ai-meta, body.dark .ai-meta{ color: rgba(231,238,252,.60); } /* orange pill */ html.dark .pill, body.dark .pill{ border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.16); color: rgba(255,236,204,.95); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 30px rgba(245,158,11,.10); } /* blue pill */ html.dark .pill.blue, body.dark .pill.blue{ border-color: rgba(59,130,246,.35); background: rgba(59,130,246,.18); color: rgba(219,234,254,.95); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 30px rgba(59,130,246,.12); } /* action area */ html.dark .card-actions, body.dark .card-actions{ align-items: center; } /* ========================= UPGRADE PAGE FIXES (DARK) Dark-glass / premium polish ========================= */ /* Gate everything to dark mode ONLY */ html.dark .upgrade .upgrade-account-lines, body.dark .upgrade .upgrade-account-lines{ color: rgba(226,232,240,.82); } /* Cards: true dark glass (not gray haze) */ html.dark .upgrade .price-card, body.dark .upgrade .price-card{ background: radial-gradient(1200px 700px at 30% 0%, rgba(59,130,246,.14), transparent 55%), linear-gradient(180deg, rgba(15,23,42,.78), rgba(2,6,23,.78)); border-color: rgba(148,163,184,.18); box-shadow: 0 24px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* Featured: deeper + a little more “pro” glow */ html.dark .upgrade .price-card.featured, body.dark .upgrade .price-card.featured{ background: radial-gradient(1100px 650px at 50% -10%, rgba(59,130,246,.22), transparent 55%), radial-gradient(900px 520px at 90% 20%, rgba(99,102,241,.14), transparent 60%), linear-gradient(180deg, rgba(15,23,42,.84), rgba(2,6,23,.82)); border-color: rgba(59,130,246,.34); box-shadow: 0 30px 85px rgba(0,0,0,.60), 0 0 0 1px rgba(59,130,246,.10) inset, inset 0 1px 0 rgba(255,255,255,.07); } /* Text: crisp + readable */ html.dark .upgrade .price-top .p, html.dark .upgrade .features, body.dark .upgrade .price-top .p, body.dark .upgrade .features{ color: rgba(226,232,240,.80); } /* Price + /month etc */ html.dark .upgrade .price, body.dark .upgrade .price{ color: rgba(241,245,249,.96); } html.dark .upgrade .price small, body.dark .upgrade .price small{ color: rgba(148,163,184,.92); opacity: 1; } /* Pills: dark glass pills (not flat gray) */ html.dark .upgrade .price-top .badge, body.dark .upgrade .price-top .badge{ background: rgba(148,163,184,.10); border-color: rgba(148,163,184,.22); color: rgba(241,245,249,.90); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); } /* Success pill: premium green */ html.dark .upgrade .upgrade-badge-success, html.dark .badge.upgrade-badge-success, body.dark .upgrade .upgrade-badge-success, body.dark .badge.upgrade-badge-success{ background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.34); color: rgba(220,252,231,.96); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); } /* Buttons: dark-glass buttons with clean hover */ html.dark .upgrade .price-actions .btn, body.dark .upgrade .price-actions .btn{ background: rgba(15,23,42,.62); border-color: rgba(148,163,184,.22); color: rgba(241,245,249,.92); box-shadow: 0 12px 28px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.06); } html.dark .upgrade .price-actions .btn:hover, body.dark .upgrade .price-actions .btn:hover{ border-color: rgba(59,130,246,.38); box-shadow: 0 14px 34px rgba(0,0,0,.42), 0 0 0 1px rgba(59,130,246,.10) inset, inset 0 1px 0 rgba(255,255,255,.07); } /* Disabled: still readable, not “dead blob” */ html.dark .upgrade .price-actions .btn.is-disabled, body.dark .upgrade .price-actions .btn.is-disabled{ opacity: .58; filter: saturate(.92); box-shadow: none; } /* Keep button height consistent */ html.dark .price-actions .btn, html.dark .upgrade-help-actions .btn, body.dark .price-actions .btn, body.dark .upgrade-help-actions .btn{ min-height: 44px; } /* Badge pill behavior (dark only) */ html.dark .upgrade .badge, body.dark .upgrade .badge{ display:inline-flex; align-items:center; justify-content:center; width:auto; max-width:100%; white-space:nowrap; border-radius:999px; padding:6px 10px; font-size:12px; font-weight:900; line-height:1; min-height:0 !important; } /* ========================= Tier badges: LIGHT mode contrast bump ========================= */ html.dark .tier-badge, body.dark .tier-badge{ border-width: 1px; border-color: rgba(15,23,42,.22); color: #FFFFFF !important; background: rgba(15,23,42,.06); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 8px 18px rgba(2,6,23,.08); } /* Starter: richer blue pill */ html.dark .tier-badge.tier-starter, body.dark .tier-badge.tier-starter{ background: rgba(59,130,246,.16); border-color: rgba(59,130,246,.42); color: #FFFFFF !important; } /* Pro: richer gold pill */ html.dark .tier-badge.tier-pro, body.dark .tier-badge.tier-pro{ background: rgba(245,158,11,.18); border-color: rgba(245,158,11,.48); color: #FFFFFF !important; } /* CHURCHGOER SIDE STYLING */ /* ============================= CHURCHGOER DASHBOARD (DARK) Drop-in replacement (dark.css) ============================= */ html.dark .cg-wrap, body.dark .cg-wrap{ margin-top:12px; } html.dark .cg-top, body.dark .cg-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; } /* Rank card */ html.dark .cg-rank, body.dark .cg-rank{ display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid rgba(148,163,184,.16); border-radius:16px; background: radial-gradient(900px 520px at 30% 0%, rgba(59,130,246,.18), transparent 60%), linear-gradient(180deg, rgba(2,6,23,.72), rgba(2,6,23,.46)); box-shadow: 0 18px 55px rgba(0,0,0,.45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } html.dark .cg-medal, body.dark .cg-medal{ width:38px; height:38px; border-radius:14px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(245,158,11,.30); background: radial-gradient(240px 160px at 30% 20%, rgba(245,158,11,.22), transparent 60%), rgba(245,158,11,.10); flex:0 0 auto; box-shadow: 0 14px 30px rgba(0,0,0,.45); } html.dark .cg-medal svg, body.dark .cg-medal svg{ width:18px; height:18px; } html.dark .cg-title, body.dark .cg-title{ font-weight:950; letter-spacing:.2px; color: rgba(226,232,240,.94); } html.dark .cg-sub, body.dark .cg-sub{ font-size:12px; color: rgba(148,163,184,.92); margin-top:2px; } html.dark .cg-pts, body.dark .cg-pts{ font-weight:950; color: rgba(226,232,240,.94); } html.dark .cg-bar, body.dark .cg-bar{ margin-top:10px; border:1px solid rgba(148,163,184,.16); border-radius:999px; overflow:hidden; height:12px; background: rgba(255,255,255,.06); } html.dark .cg-bar > div, body.dark .cg-bar > div{ height:100%; width:0%; background: linear-gradient(90deg, rgba(59,130,246,.78), rgba(245,158,11,.70)); } /* Mini stats */ html.dark .cg-mini, body.dark .cg-mini{ margin-top:10px; display:grid; grid-template-columns: 1fr 1fr; gap:10px; } @media(max-width: 900px){ html.dark .cg-mini, body.dark .cg-mini{ grid-template-columns:1fr; } } html.dark .cg-mini .row, body.dark .cg-mini .row{ border:1px solid rgba(148,163,184,.16); border-radius:16px; padding:12px 14px; background: radial-gradient(900px 420px at 15% 0%, rgba(59,130,246,.12), transparent 60%), rgba(2,6,23,.46); box-shadow: 0 16px 45px rgba(0,0,0,.40); display:flex; align-items:center; justify-content:space-between; gap:12px; } html.dark .cg-mini .k, body.dark .cg-mini .k{ font-size:12px; color: rgba(148,163,184,.92); } html.dark .cg-mini .v, body.dark .cg-mini .v{ font-weight:950; color: rgba(226,232,240,.94); } /* Badge grid */ html.dark .badge-grid, body.dark .badge-grid{ margin-top:12px; display:grid; gap:12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } @media(max-width: 1100px){ html.dark .badge-grid, body.dark .badge-grid{ grid-template-columns: repeat(2, minmax(240px, 1fr)); } } @media(max-width: 640px){ html.dark .badge-grid, body.dark .badge-grid{ grid-template-columns: 1fr; } } /* Force badge cards to be cards even if .badge is globally a pill */ html.dark .badge-grid > .badge, body.dark .badge-grid > .badge{ display:block !important; width:100% !important; max-width:none !important; white-space:normal !important; align-items:stretch !important; justify-content:flex-start !important; border-radius:18px !important; padding:14px !important; border:1px solid rgba(148,163,184,.16) !important; background: radial-gradient(900px 520px at 25% 0%, rgba(59,130,246,.16), transparent 62%), linear-gradient(180deg, rgba(2,6,23,.62), rgba(2,6,23,.40)) !important; box-shadow: 0 18px 55px rgba(0,0,0,.45) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); overflow:hidden; } html.dark .badge-ico, body.dark .badge-ico{ width:40px; height:40px; border-radius:14px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(59,130,246,.24); background: rgba(59,130,246,.10); flex:0 0 auto; font-size:18px; line-height:1; box-shadow: 0 14px 30px rgba(0,0,0,.40); } html.dark .badge-name, body.dark .badge-name{ margin:0; font-weight:950; font-size:14px; line-height:1.2; color: rgba(226,232,240,.94); min-width:0; white-space:normal; overflow-wrap:anywhere; } html.dark .badge-desc, body.dark .badge-desc{ margin:8px 0 0 0; font-size:12px; color: rgba(148,163,184,.92); line-height:1.45; overflow-wrap:anywhere; } /* ========================= TABLE overflow fix (DARK) ========================= */ html.dark .cg-wrap table, body.dark .cg-wrap table{ display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling: touch; border:1px solid rgba(148,163,184,.16); border-radius:16px; background: rgba(2,6,23,.46); box-shadow: 0 18px 55px rgba(0,0,0,.45); } html.dark .cg-wrap table thead, html.dark .cg-wrap table tbody, body.dark .cg-wrap table thead, body.dark .cg-wrap table tbody{ display:table; width:100%; } html.dark .cg-wrap table th, html.dark .cg-wrap table td, body.dark .cg-wrap table th, body.dark .cg-wrap table td{ padding:10px 12px; border-bottom:1px solid rgba(148,163,184,.14); color: rgba(226,232,240,.90); } html.dark .cg-wrap table th, body.dark .cg-wrap table th{ font-weight:900; color: rgba(226,232,240,.94); } html.dark .cg-wrap table tr:last-child td, body.dark .cg-wrap table tr:last-child td{ border-bottom:none; } /* =============================== CHURCHGOER MEMBERSHIP (DARK) Drop into dark.css =============================== */ html.dark .member-wrap, body.dark .member-wrap{ margin-top:18px; } html.dark .member-head, body.dark .member-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 10px 0; } html.dark .member-head .label, body.dark .member-head .label{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color: rgba(148,163,184,.92); } html.dark .member-grid, body.dark .member-grid{ display:grid; gap:12px; grid-template-columns: repeat(3, minmax(0, 1fr)); } @media(max-width: 1100px){ html.dark .member-grid, body.dark .member-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media(max-width: 720px){ html.dark .member-grid, body.dark .member-grid{ grid-template-columns: 1fr; } } /* Card */ html.dark .mcard, body.dark .mcard{ border:1px solid rgba(148,163,184,.16); border-radius:18px; background: radial-gradient(900px 520px at 18% 0%, rgba(59,130,246,.16), transparent 62%), linear-gradient(180deg, rgba(2,6,23,.66), rgba(2,6,23,.42)); box-shadow: 0 18px 55px rgba(0,0,0,.45); padding:14px; min-width:0; overflow:hidden; display:flex; flex-direction:column; gap:10px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* Top row */ html.dark .mrow, body.dark .mrow{ display:flex; gap:10px; align-items:flex-start; min-width:0; } /* Icon */ html.dark .micon, body.dark .micon{ width:40px; height:40px; border-radius:14px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(59,130,246,.24); background: radial-gradient(260px 180px at 30% 20%, rgba(59,130,246,.18), transparent 62%), rgba(59,130,246,.10); box-shadow: 0 14px 30px rgba(0,0,0,.40); flex:0 0 auto; } /* Text */ html.dark .mtitle, body.dark .mtitle{ margin:0; font-size:15px; font-weight:950; letter-spacing:.2px; color: rgba(226,232,240,.94); min-width:0; white-space:normal; overflow-wrap:anywhere; } html.dark .msub, body.dark .msub{ margin:4px 0 0 0; font-size:12px; color: rgba(148,163,184,.92); line-height:1.45; min-width:0; white-space:normal; overflow-wrap:anywhere; } /* Pills */ html.dark .mbadges, body.dark .mbadges{ display:flex; gap:8px; flex-wrap:wrap; } html.dark .mpill, body.dark .mpill{ font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid rgba(148,163,184,.16); background: rgba(255,255,255,.06); color: rgba(226,232,240,.92); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; box-shadow: 0 10px 22px rgba(0,0,0,.30); } /* Actions */ html.dark .mactions, body.dark .mactions{ display:flex; gap:10px; flex-wrap:wrap; } html.dark .mactions a, body.dark .mactions a{ text-decoration:none; } /* Optional: make the "Open church page" button match dark premium */ html.dark .mcard .btn, body.dark .mcard .btn{ border-color: rgba(148,163,184,.18); background: rgba(15,23,42,.55); color: rgba(226,232,240,.92); } html.dark .mcard .btn:hover, body.dark .mcard .btn:hover{ border-color: rgba(59,130,246,.30); } /* login stuff */ .password-wrap { position: relative; } .password-wrap .input { padding-right: 42px; } .password-toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: none; background: transparent; cursor: pointer; font-size: 16px; opacity: 0.6; } .password-toggle:hover { opacity: 1; } /* ========================= FAQ ITEM (Glass / Pro look) ========================= */ .faq-item-acc{ border:1px solid rgba(59,130,246,.25); border-radius:18px; overflow:hidden; background: linear-gradient(180deg, rgba(30,58,138,.22), rgba(15,23,42,.35)), radial-gradient(120% 200% at 50% 0%, rgba(59,130,246,.18), transparent); backdrop-filter: blur(8px); box-shadow: 0 18px 45px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05); transition: all .18s ease; } .faq-item-acc + .faq-item-acc{ margin-top:12px; } .faq-item-acc:hover{ border-color: rgba(96,165,250,.45); transform: translateY(-1px); } .faq-item-acc > summary{ list-style:none; cursor:pointer; user-select:none; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 16px; color:#e6edf7; } .faq-item-acc > summary::-webkit-details-marker{ display:none; } /* question text */ .faq-item-acc .faq-q{ margin:0; font-weight:800; font-size:15px; letter-spacing:.2px; color:#f1f5f9; } /* answer text */ .faq-item-acc .faq-a{ margin:0; padding: 0 16px 16px 16px; color:rgba(226,232,240,.9); line-height:1.65; font-size:14px; } /* meta chips */ .faq-item-acc .faq-meta{ display:flex; gap:8px; align-items:center; } /* category / pinned chip */ .faq-item-acc .faq-chip{ background:rgba(59,130,246,.22); border:1px solid rgba(96,165,250,.35); color:#bfdbfe; font-size:11px; font-weight:700; padding:5px 10px; border-radius:999px; } /* chevron */ .faq-item-acc .chev{ width:32px; height:32px; border-radius:14px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(59,130,246,.35); background: linear-gradient(180deg, rgba(59,130,246,.22), rgba(59,130,246,.10)); box-shadow: 0 10px 25px rgba(37,99,235,.25); color:#93c5fd; transition: transform .18s ease; } .faq-item-acc[open] .chev{ transform: rotate(180deg); } /* ========================= ENHANCED GROUPS (DARK) ...dominant override Applies when you add: ...or body.dark / [data-theme="dark"] ========================= */ html.dark .enh-group-acc, body.dark .enh-group-acc, body[data-theme="dark"] .enh-group-acc{ border:1px solid rgba(96,165,250,.28); border-radius:18px; overflow:hidden; background: linear-gradient(180deg, rgba(2,6,23,.78), rgba(15,23,42,.58)), radial-gradient(140% 260% at 38% 0%, rgba(59,130,246,.20), transparent 60%); box-shadow: 0 18px 44px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04) inset; backdrop-filter: blur(10px); } html.dark .enh-group-acc:hover, body.dark .enh-group-acc:hover, body[data-theme="dark"] .enh-group-acc:hover{ border-color: rgba(147,197,253,.45); transform: translateY(-1px); } /* kill any theme margin weirdness (keep from light, but make it dominant) */ html.dark .enh-group-acc summary, html.dark .enh-group-acc summary *, body.dark .enh-group-acc summary, body.dark .enh-group-acc summary *, body[data-theme="dark"] .enh-group-acc summary, body[data-theme="dark"] .enh-group-acc summary *{ margin:0; } /* header */ html.dark .enh-group-acc > summary, body.dark .enh-group-acc > summary, body[data-theme="dark"] .enh-group-acc > summary{ padding:16px 16px; min-height:78px; color:#e6edf7; } /* title */ html.dark .enh-group-title, body.dark .enh-group-title, body[data-theme="dark"] .enh-group-title{ color:#f1f5f9; text-shadow: 0 1px 0 rgba(0,0,0,.45); } /* "X details" chip */ html.dark .enh-group-chip, body.dark .enh-group-chip, body[data-theme="dark"] .enh-group-chip{ color:#bfdbfe; border:1px solid rgba(96,165,250,.28); background: rgba(59,130,246,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); } /* chevron */ html.dark .enh-group-chev, body.dark .enh-group-chev, body[data-theme="dark"] .enh-group-chev{ border:1px solid rgba(96,165,250,.30); background: linear-gradient(180deg, rgba(59,130,246,.22), rgba(59,130,246,.10)); color:#93c5fd; box-shadow: 0 10px 22px rgba(37,99,235,.22); } html.dark .enh-group-acc[open] .enh-group-chev, body.dark .enh-group-acc[open] .enh-group-chev, body[data-theme="dark"] .enh-group-acc[open] .enh-group-chev{ transform: rotate(180deg); } /* body panel */ html.dark .enh-group-body, body.dark .enh-group-body, body[data-theme="dark"] .enh-group-body{ border-top:1px solid rgba(148,163,184,.14); padding:14px 16px 16px 16px; background: rgba(2,6,23,.40); } /* open glow */ html.dark .enh-group-acc[open], body.dark .enh-group-acc[open], body[data-theme="dark"] .enh-group-acc[open]{ border-color: rgba(147,197,253,.46); box-shadow: 0 22px 52px rgba(0,0,0,.60), 0 0 0 6px rgba(59,130,246,.10); } /* ========================================== FAQ ITEM (DARK MODE) ========================================== */ html.dark .faq-item-acc{ border:1px solid rgba(96,165,250,.25); background: linear-gradient(180deg,rgba(15,23,42,.82),rgba(2,6,23,.85)), radial-gradient(140% 220% at 40% 0%, rgba(59,130,246,.20), transparent) !important; box-shadow: 0 20px 55px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05); } html.dark .faq-item-acc:hover{ border-color: rgba(147,197,253,.45); } html.dark .faq-q{ color:#f1f5f9 !important; } html.dark .faq-a{ color:rgba(226,232,240,.88); } html.dark .faq-chip{ background: rgba(59,130,246,.18) !important; border:1px solid rgba(96,165,250,.35); color:#bfdbfe !important; } html.dark .faq-chip.pin{ background: rgba(245,158,11,.20) !important; border:1px solid rgba(245,158,11,.30); color:#fde68a !important; } html.dark .faq-item-acc .chev{ border:1px solid rgba(96,165,250,.35); background: linear-gradient(180deg,rgba(59,130,246,.25),rgba(59,130,246,.12)) !important; color:#93c5fd !important; } html.dark .faq-item-acc > summary .qwrap{ min-width:0; } html.dark .faq-item-acc > summary .faq-right{ flex:0 1 auto; min-width:0; max-width:55%; } html.dark .faq-item-acc > summary .faq-meta{ flex-wrap:wrap; min-width:0; } html.dark .faq-item-acc > summary .chev{ flex:0 0 auto; } /* ====== Stars: premium gold filled, subtle empty ====== */ .stars{ display:inline-flex; gap:3px; vertical-align:middle; align-items:center; } .stars .star{ width:16px; height:16px; display:block; } /* empty stars stay subtle in both themes */ .stars .star.off{ opacity:.22; color: currentColor; /* respects theme text color */ filter: none; } /* filled stars: deep gold + glow, looks expensive */ .stars .star.on{ opacity:1; color:#fbbf24; /* fallback if gradient isn't supported */ /* gold gradient paint */ background: linear-gradient( 180deg, #fff7cc 0%, #ffe08a 18%, #fbbf24 45%, #f59e0b 70%, #b45309 100% ); -webkit-background-clip: text; background-clip: text; /* this makes the SVG use the gradient via currentColor */ color: transparent; /* glow + depth */ filter: drop-shadow(0 0 6px rgba(245,158,11,.35)) drop-shadow(0 2px 6px rgba(0,0,0,.35)); } /* ensure the SVG path uses "currentColor" behavior via CSS */ .stars .star path{ fill: currentColor; } /* Dark mode: more glow, slightly brighter highlight */ @media (prefers-color-scheme: dark){ .stars .star.off{ opacity:.18; } .stars .star.on{ filter: drop-shadow(0 0 8px rgba(245,158,11,.55)) drop-shadow(0 2px 10px rgba(0,0,0,.55)); } } .row form { display:inline-flex; width:auto; margin:0; } .row form .btn { width:auto; } @media (max-width:640px){ .row .btn, .row form { width:100%; } .row form .btn{ width:100%; } }