/* ========================================================================== PatriotChat – help.css Purpose: Shared styling for Help / Info / About pages Theme: 100% theme-safe (light/dark/custom) using Bootstrap CSS vars Notes: • No hard-coded #fff/white backgrounds. • Uses the same spacing rhythm as main.css (container + clamp()). • Includes iOS-strong selectors at the end to beat UA paint quirks. ========================================================================== */ /* ---------- 0) Local aliases (read from Bootstrap’s variables) ---------- */ :root{ /* Surface + text tokens that track the active theme */ --pc-body-bg : var(--bs-body-bg, #0e1624); --pc-text : var(--bs-body-color, #e5e7eb); --pc-card-bg : var(--bs-card-bg, #111827); --pc-card-border : var(--bs-card-border-color, #1f2937); --pc-muted : var(--nav-fg-muted, #94a3b8); --pc-shadow : 0 2px 6px rgba(0,0,0,.08); } /* ---------- 1) Page wrapper ---------- */ /* If your Help/Info pages add , keep the bg theme-aware */ body.help-page{ background: var(--pc-body-bg); color: var(--pc-text); } /* Main content container */ .help-container{ max-width: 900px; margin: 0 auto; padding: clamp(16px, 4vw, 32px) 16px; line-height: 1.6; } /* ---------- 2) Hero section ---------- */ .hero-section{ margin-bottom: clamp(16px, 4vw, 32px); text-align: center; } .hero-logo{ max-height: 80px; margin: 0 0 12px 0; object-fit: contain; } .hero-title{ font-size: clamp(22px, 3.6vw, 32px); font-weight: 800; margin: 0 0 6px 0; } .hero-subtitle{ font-size: clamp(14px, 1.6vw, 17px); color: var(--pc-muted); margin: 0; } /* ---------- 3) Information cards ---------- */ .info-card{ background: var(--pc-card-bg); color: var(--pc-text); border: 1px solid var(--pc-card-border); border-radius: 12px; padding: 16px 18px; margin: 0 0 16px 0; box-shadow: var(--pc-shadow); transition: background .2s ease, border-color .2s ease, transform .15s ease; } .info-card:hover{ transform: translateY(-2px); } .info-card h2{ margin: 0 0 10px 0; font-size: clamp(18px, 2.2vw, 22px); border-bottom: 1px solid color-mix(in oklab, var(--pc-card-border) 75%, transparent); padding-bottom: 6px; } .info-card p{ margin: 0 0 10px 0; } .info-card ul{ margin: 8px 0 0 0; padding-left: 1.1rem; } .info-card li{ margin: 4px 0; color: var(--pc-muted); } .info-card pre{ background: color-mix(in oklab, var(--pc-card-bg) 70%, black); color: inherit; padding: 10px; border-radius: 8px; font-size: .9rem; overflow-x: auto; } /* ---------- 4) Utilities ---------- */ .text-center{ text-align: center; } .small-text{ font-size: .85rem; color: var(--pc-muted); } /* ---------- 5) iOS-strong theme enforcement (beats early paint) ---------- */ /* These selectors intentionally use html[data-bs-theme] to outrank UA defaults */ html[data-bs-theme="light"] body.help-page{ background: #ffffff !important; color: #111827 !important; } html[data-bs-theme="dark"] body.help-page{ background: #0e1624 !important; /* brand-dark body */ color: #e5e7eb !important; } html[data-bs-theme="light"] body.help-page .info-card{ background: #ffffff !important; color: #111827 !important; border-color: #e5e7eb !important; } html[data-bs-theme="dark"] body.help-page .info-card{ background: #111827 !important; color: #e5e7eb !important; border-color: #1f2937 !important; }