/* ============================================================ Hustlers Crib — Dark Mode Activated by (set by the pre-paint script in _head.tpl and toggled from the profile dropdown). Strategy -------- The site ships a light theme baked in with lots of !important colors (mainly in global-overrides.css). To flip to dark without touching every rule, we: 1. define a dark palette as CSS variables on the root, 2. broadly re-map the common light surfaces / text / borders to those variables (high specificity + !important so we beat the light !important rules), 3. add targeted fixes for the custom HC components that hardcode their own colors (header bar, profile dropdown, message/notif panels, bottom nav, etc.). The brand gold accent is intentionally preserved in both modes. ============================================================ */ :root[data-theme="dark"] { --hc-dk-bg: #0f1115; /* page background */ --hc-dk-surface: #181b21; /* cards / panels / header */ --hc-dk-surface-2: #20242c; /* raised / hover / inputs */ --hc-dk-surface-3: #2a2f39; /* active / stronger hover */ --hc-dk-border: #2c313b; /* hairline borders */ --hc-dk-border-strong:#3a414d; /* stronger borders / inputs */ --hc-dk-text: #e7e9ee; /* primary text */ --hc-dk-text-soft: #aeb4bf; /* secondary text */ --hc-dk-text-mute: #7d8593; /* muted / placeholder */ --hc-dk-gold: #ffcc00; /* brand accent (unchanged) */ --hc-dk-gold-soft: #ffcc00; --hc-dk-danger: #ff6b6b; --hc-dk-shadow: 0 6px 24px rgba(0,0,0,.55); } /* =========================================================== 1. GLOBAL SURFACES =========================================================== */ :root[data-theme="dark"] body, :root[data-theme="dark"] body.night-mode { background: var(--hc-dk-bg) !important; color: var(--hc-dk-text) !important; } :root[data-theme="dark"] { color-scheme: dark; } /* Generic text — let dark surfaces inherit a light text color. Scoped to common containers to avoid clobbering brand-colored bits. */ :root[data-theme="dark"] p, :root[data-theme="dark"] span:not([class*="badge"]):not([class*="dot"]), :root[data-theme="dark"] li, :root[data-theme="dark"] td, :root[data-theme="dark"] th, :root[data-theme="dark"] dd, :root[data-theme="dark"] dt, :root[data-theme="dark"] label, :root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3, :root[data-theme="dark"] h4, :root[data-theme="dark"] h5, :root[data-theme="dark"] h6 { color: var(--hc-dk-text); } :root[data-theme="dark"] small, :root[data-theme="dark"] .text-muted, :root[data-theme="dark"] .text-secondary, :root[data-theme="dark"] .text-gray, :root[data-theme="dark"] .text-grey { color: var(--hc-dk-text-soft) !important; } /* Links keep gold where the site already uses gold; default links go light */ :root[data-theme="dark"] a { color: var(--hc-dk-text); } :root[data-theme="dark"] a:hover { color: var(--hc-dk-gold-soft); } /* Bootstrap dark text helpers that would be black on dark */ :root[data-theme="dark"] .text-dark, :root[data-theme="dark"] .text-black, :root[data-theme="dark"] .text-body { color: var(--hc-dk-text) !important; } /* Horizontal rules / dividers */ :root[data-theme="dark"] hr, :root[data-theme="dark"] .dropdown-divider { border-color: var(--hc-dk-border) !important; } /* =========================================================== 2. CARDS / PANELS / CONTAINERS =========================================================== */ :root[data-theme="dark"] .card, :root[data-theme="dark"] .panel, :root[data-theme="dark"] .side-panel, :root[data-theme="dark"] .card-header, :root[data-theme="dark"] .card-footer, :root[data-theme="dark"] .card-body, :root[data-theme="dark"] .well, :root[data-theme="dark"] .box, :root[data-theme="dark"] .widget, :root[data-theme="dark"] .list-group-item { background: var(--hc-dk-surface) !important; border-color: var(--hc-dk-border) !important; color: var(--hc-dk-text) !important; } :root[data-theme="dark"] .bg-white, :root[data-theme="dark"] .bg-light { background: var(--hc-dk-surface) !important; color: var(--hc-dk-text) !important; } /* Light gray fills become a slightly raised dark tone */ :root[data-theme="dark"] .bg-faded, :root[data-theme="dark"] .bg-gray, :root[data-theme="dark"] .bg-grey { background: var(--hc-dk-surface-2) !important; } /* =========================================================== 3. FORMS / INPUTS =========================================================== */ :root[data-theme="dark"] .form-control, :root[data-theme="dark"] .form-select, :root[data-theme="dark"] input[type="text"], :root[data-theme="dark"] input[type="search"], :root[data-theme="dark"] input[type="email"], :root[data-theme="dark"] input[type="password"], :root[data-theme="dark"] input[type="number"], :root[data-theme="dark"] input[type="url"], :root[data-theme="dark"] input[type="tel"], :root[data-theme="dark"] textarea, :root[data-theme="dark"] select { background: var(--hc-dk-surface-2) !important; border-color: var(--hc-dk-border-strong) !important; color: var(--hc-dk-text) !important; } :root[data-theme="dark"] .form-control:focus, :root[data-theme="dark"] .form-select:focus, :root[data-theme="dark"] textarea:focus, :root[data-theme="dark"] select:focus, :root[data-theme="dark"] input:focus { background: var(--hc-dk-surface-2) !important; border-color: var(--hc-dk-gold) !important; color: var(--hc-dk-text) !important; box-shadow: none !important; } :root[data-theme="dark"] ::placeholder { color: var(--hc-dk-text-mute) !important; opacity: 1; } :root[data-theme="dark"] .input-group-text { background: var(--hc-dk-surface-3) !important; border-color: var(--hc-dk-border-strong) !important; color: var(--hc-dk-text-soft) !important; } /* Buttons — keep colored buttons, only soften the neutral ones */ :root[data-theme="dark"] .btn-light, :root[data-theme="dark"] .btn-white, :root[data-theme="dark"] .btn-default, :root[data-theme="dark"] .btn-outline-secondary, :root[data-theme="dark"] .btn-secondary { background: var(--hc-dk-surface-2) !important; border-color: var(--hc-dk-border-strong) !important; color: var(--hc-dk-text) !important; } :root[data-theme="dark"] .btn-light:hover, :root[data-theme="dark"] .btn-white:hover, :root[data-theme="dark"] .btn-default:hover, :root[data-theme="dark"] .btn-secondary:hover { background: var(--hc-dk-surface-3) !important; color: var(--hc-dk-text) !important; } /* Badges that used a light bg with primary text */ :root[data-theme="dark"] .badge.bg-light { background: var(--hc-dk-surface-3) !important; color: var(--hc-dk-gold-soft) !important; } /* =========================================================== 4. DROPDOWNS / MODALS / POPOVERS (Bootstrap) =========================================================== */ :root[data-theme="dark"] .dropdown-menu { background: var(--hc-dk-surface) !important; border-color: var(--hc-dk-border) !important; box-shadow: var(--hc-dk-shadow) !important; } :root[data-theme="dark"] .dropdown-item { color: var(--hc-dk-text) !important; } :root[data-theme="dark"] .dropdown-item:hover, :root[data-theme="dark"] .dropdown-item:focus, :root[data-theme="dark"] .dropdown-item.active { background: var(--hc-dk-surface-2) !important; color: var(--hc-dk-text) !important; } :root[data-theme="dark"] .modal-content, :root[data-theme="dark"] .modal-header, :root[data-theme="dark"] .modal-body, :root[data-theme="dark"] .modal-footer, :root[data-theme="dark"] .popover, :root[data-theme="dark"] .popover-body, :root[data-theme="dark"] .toast, :root[data-theme="dark"] .offcanvas { background: var(--hc-dk-surface) !important; border-color: var(--hc-dk-border) !important; color: var(--hc-dk-text) !important; } :root[data-theme="dark"] .modal-header, :root[data-theme="dark"] .modal-footer { border-color: var(--hc-dk-border) !important; } :root[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.6); } /* Tooltips */ :root[data-theme="dark"] .tooltip-inner { background: var(--hc-dk-surface-3) !important; color: var(--hc-dk-text) !important; } /* Tables */ :root[data-theme="dark"] .table, :root[data-theme="dark"] table { color: var(--hc-dk-text); border-color: var(--hc-dk-border); } :root[data-theme="dark"] .table > :not(caption) > * > * { background: var(--hc-dk-surface) !important; border-color: var(--hc-dk-border) !important; color: var(--hc-dk-text) !important; } :root[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background: var(--hc-dk-surface-2) !important; } /* Generic borders */ :root[data-theme="dark"] .border, :root[data-theme="dark"] .border-top, :root[data-theme="dark"] .border-bottom, :root[data-theme="dark"] .border-start, :root[data-theme="dark"] .border-end, :root[data-theme="dark"] .border-left, :root[data-theme="dark"] .border-right { border-color: var(--hc-dk-border) !important; } /* =========================================================== 5. HC HEADER BAR (.hc-hb*) — overrides global-overrides.css =========================================================== */ :root[data-theme="dark"] .hc-hb, :root[data-theme="dark"] .main-header { background: var(--hc-dk-surface) !important; border-bottom-color: var(--hc-dk-border) !important; box-shadow: none !important; } :root[data-theme="dark"] .main-header .navbar-wrapper ul li a, :root[data-theme="dark"] .main-header .navbar-wrapper ul li button { color: var(--hc-dk-text-soft) !important; } /* Header search field */ :root[data-theme="dark"] .main-header .search-wrapper .form-control, :root[data-theme="dark"] .hc-hb-discover-search input { background: var(--hc-dk-surface-2) !important; border-color: var(--hc-dk-border-strong) !important; color: var(--hc-dk-text) !important; } :root[data-theme="dark"] .main-header .search-wrapper .form-control:focus, :root[data-theme="dark"] .hc-hb-discover-search input:focus { background: var(--hc-dk-surface-3) !important; border-color: var(--hc-dk-gold) !important; } :root[data-theme="dark"] .hc-hb-discover-search svg { color: var(--hc-dk-text-mute) !important; } /* Header icon buttons */ :root[data-theme="dark"] .hc-hb-icon-btn { color: var(--hc-dk-text-soft) !important; } :root[data-theme="dark"] .hc-hb-icon-btn:hover, :root[data-theme="dark"] .hc-hb-icon-btn.active { background: var(--hc-dk-surface-2) !important; color: var(--hc-dk-text) !important; } :root[data-theme="dark"] .hc-hb-divider { background: var(--hc-dk-border) !important; } /* Ghost / gold guest buttons */ :root[data-theme="dark"] .hc-hb-ghost-btn { color: var(--hc-dk-text) !important; border-color: var(--hc-dk-border-strong) !important; } :root[data-theme="dark"] .hc-hb-ghost-btn:hover { background: var(--hc-dk-surface-2) !important; color: var(--hc-dk-text) !important; } /* =========================================================== 6. PROFILE DROPDOWN (.hc-pd*) =========================================================== */ :root[data-theme="dark"] .hc-pd-panel { background: var(--hc-dk-surface) !important; border-color: var(--hc-dk-border) !important; box-shadow: var(--hc-dk-shadow) !important; } :root[data-theme="dark"] .hc-pd-ident-name { color: var(--hc-dk-text) !important; } :root[data-theme="dark"] .hc-pd-ident-email { color: var(--hc-dk-text-soft) !important; } :root[data-theme="dark"] .hc-pd-sep, :root[data-theme="dark"] .hc-pd-comm-sep { background: var(--hc-dk-border) !important; border-color: var(--hc-dk-border) !important; } :root[data-theme="dark"] .hc-pd-section-label { color: var(--hc-dk-text-mute) !important; } :root[data-theme="dark"] .hc-pd-item { color: var(--hc-dk-text) !important; } :root[data-theme="dark"] .hc-pd-item:hover { background: var(--hc-dk-surface-2) !important; color: var(--hc-dk-text) !important; } :root[data-theme="dark"] .hc-pd-item.active { background: var(--hc-dk-surface-2) !important; } :root[data-theme="dark"] .hc-pd-gold { color: var(--hc-dk-gold-soft) !important; } :root[data-theme="dark"] .hc-pd-logout { color: var(--hc-dk-danger) !important; } :root[data-theme="dark"] .hc-pd-logout:hover { background: rgba(255,107,107,.12) !important; color: var(--hc-dk-danger) !important; } /* My Communities rows — base bg was #fff !important; make dark */ :root[data-theme="dark"] .hc-pd-comm-item { background: transparent !important; color: var(--hc-dk-text) !important; } :root[data-theme="dark"] .hc-pd-comm-item:hover { background: var(--hc-dk-surface-2) !important; } :root[data-theme="dark"] .hc-pd-comm-name { color: var(--hc-dk-text) !important; } :root[data-theme="dark"] .hc-pd-comm-img { border-color: var(--hc-dk-border) !important; } :root[data-theme="dark"] .hc-pd-comm-arrow { color: var(--hc-dk-text-mute) !important; } :root[data-theme="dark"] .hc-pd-comm-item:hover .hc-pd-comm-arrow { color: var(--hc-dk-text-soft) !important; } /* gold .hc-pd-comm-badge (Owner) kept */ /* Dark-mode toggle item: show sun when dark, moon when light */ .hc-pd-darktoggle { width: 100%; text-align: left; background: none; border: 0; font: inherit; cursor: pointer; } .hc-pd-darktoggle .hc-pd-light-icon { display: none; } :root[data-theme="dark"] .hc-pd-darktoggle .hc-pd-dark-icon { display: none; } :root[data-theme="dark"] .hc-pd-darktoggle .hc-pd-light-icon { display: inline; } :root[data-theme="dark"] .hc-pd-darktoggle .hc-pd-light-icon { color: var(--hc-dk-gold-soft); } /* =========================================================== 7. MESSAGES + NOTIFICATIONS PANELS (.mp-* / .np-* / .hc-hp-*) =========================================================== */ :root[data-theme="dark"] .hc-hp-panel, :root[data-theme="dark"] .mp-panel, :root[data-theme="dark"] .hc-np-panel { background: var(--hc-dk-surface) !important; border-color: var(--hc-dk-border) !important; box-shadow: var(--hc-dk-shadow) !important; color: var(--hc-dk-text) !important; } :root[data-theme="dark"] .mp-head, :root[data-theme="dark"] .np-head, :root[data-theme="dark"] .mp-conv-head, :root[data-theme="dark"] .np-toolbar, :root[data-theme="dark"] .mp-search-wrap { background: var(--hc-dk-surface) !important; border-color: var(--hc-dk-border) !important; } :root[data-theme="dark"] .mp-title, :root[data-theme="dark"] .mp-row-name, :root[data-theme="dark"] .hc-hp-item-title, :root[data-theme="dark"] .mp-conv-name { color: var(--hc-dk-text) !important; } :root[data-theme="dark"] .mp-subtitle, :root[data-theme="dark"] .mp-row-preview, :root[data-theme="dark"] .mp-row-time, :root[data-theme="dark"] .hc-hp-item-text, :root[data-theme="dark"] .hc-hp-item-time, :root[data-theme="dark"] .mp-conv-sub, :root[data-theme="dark"] .hc-hp-loading, :root[data-theme="dark"] .hc-hp-empty, :root[data-theme="dark"] .mp-empty, :root[data-theme="dark"] .np-empty-text { color: var(--hc-dk-text-soft) !important; } :root[data-theme="dark"] .mp-row:hover, :root[data-theme="dark"] .hc-hp-item:hover, :root[data-theme="dark"] .np-row:hover { background: var(--hc-dk-surface-2) !important; } :root[data-theme="dark"] .mp-row.is-unread, :root[data-theme="dark"] .np-row.is-unread, :root[data-theme="dark"] .hc-np-panel .np-row.is-unread { background: rgba(230,181,65,.10) !important; } :root[data-theme="dark"] .np-tab { color: var(--hc-dk-text-soft) !important; } :root[data-theme="dark"] .np-tab.is-active { color: var(--hc-dk-text) !important; } :root[data-theme="dark"] .np-action { color: var(--hc-dk-text-soft) !important; } :root[data-theme="dark"] .np-action:hover { background: var(--hc-dk-surface-2) !important; color: var(--hc-dk-text) !important; } :root[data-theme="dark"] .mp-close, :root[data-theme="dark"] .mp-back { color: var(--hc-dk-text-soft) !important; } :root[data-theme="dark"] .mp-close:hover, :root[data-theme="dark"] .mp-back:hover { background: var(--hc-dk-surface-2) !important; color: var(--hc-dk-text) !important; } /* Conversation view + composer */ :root[data-theme="dark"] .mp-view-conv, :root[data-theme="dark"] .mp-msgs { background: var(--hc-dk-bg) !important; } :root[data-theme="dark"] .mp-composer { background: var(--hc-dk-surface) !important; border-color: var(--hc-dk-border) !important; } :root[data-theme="dark"] .mp-input { background: var(--hc-dk-surface-2) !important; border-color: var(--hc-dk-border-strong) !important; color: var(--hc-dk-text) !important; } :root[data-theme="dark"] .mp-icon-btn { color: var(--hc-dk-text-soft) !important; } :root[data-theme="dark"] .mp-icon-btn:hover { background: var(--hc-dk-surface-2) !important; color: var(--hc-dk-text) !important; } :root[data-theme="dark"] .mp-emoji, :root[data-theme="dark"] .mp-msg-menu { background: var(--hc-dk-surface) !important; border-color: var(--hc-dk-border) !important; box-shadow: var(--hc-dk-shadow) !important; } :root[data-theme="dark"] .mp-msg-menu-item { color: var(--hc-dk-text) !important; } :root[data-theme="dark"] .mp-msg-menu-item:hover { background: var(--hc-dk-surface-2) !important; } :root[data-theme="dark"] .mp-search input { background: var(--hc-dk-surface-2) !important; border-color: var(--hc-dk-border-strong) !important; color: var(--hc-dk-text) !important; } /* Incoming message bubbles (own bubbles usually stay gold) */ :root[data-theme="dark"] .mp-msg-in .mp-bubble, :root[data-theme="dark"] .mp-bubble-in { background: var(--hc-dk-surface-3) !important; color: var(--hc-dk-text) !important; } /* =========================================================== 8. MOBILE BOTTOM NAV (.hc-bottom-nav / .hc-bn-*) =========================================================== */ :root[data-theme="dark"] .hc-bottom-nav { background: var(--hc-dk-surface) !important; border-top-color: var(--hc-dk-border) !important; box-shadow: 0 -4px 18px rgba(0,0,0,.5) !important; } :root[data-theme="dark"] .hc-bn-item { color: var(--hc-dk-text-soft) !important; } :root[data-theme="dark"] .hc-bn-item:hover, :root[data-theme="dark"] .hc-bn-item.active { color: var(--hc-dk-gold-soft) !important; } :root[data-theme="dark"] .hc-bn-create span, :root[data-theme="dark"] .hc-bn-item span { color: inherit !important; } :root[data-theme="dark"] .hc-bn-create-panel { background: var(--hc-dk-surface) !important; border-color: var(--hc-dk-border) !important; box-shadow: var(--hc-dk-shadow) !important; } /* =========================================================== 9. FEED / POSTS / COMMENTS (community feed) =========================================================== */ :root[data-theme="dark"] .post, :root[data-theme="dark"] .post-box, :root[data-theme="dark"] .publisher, :root[data-theme="dark"] .publisher-box, :root[data-theme="dark"] .comments, :root[data-theme="dark"] .comment, :root[data-theme="dark"] .feed-card, :root[data-theme="dark"] .feed-item { background: var(--hc-dk-surface) !important; border-color: var(--hc-dk-border) !important; color: var(--hc-dk-text) !important; } :root[data-theme="dark"] .comment-text, :root[data-theme="dark"] .comment-box, :root[data-theme="dark"] .comment .text { background: var(--hc-dk-surface-2) !important; color: var(--hc-dk-text) !important; } /* =========================================================== 10. MEDIA / IMAGES — tone down pure-white image frames =========================================================== */ :root[data-theme="dark"] img { /* keep images as-is; only the chrome around them is dark */ } /* Avatars & logos sometimes sit in white circles — leave them. Nothing to invert globally to avoid breaking photos. */ /* =========================================================== 11. SCROLLBARS =========================================================== */ :root[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; } :root[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--hc-dk-bg); } :root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--hc-dk-surface-3); border-radius: 6px; } :root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #3a414d; } :root[data-theme="dark"] * { scrollbar-color: var(--hc-dk-surface-3) var(--hc-dk-bg); } /* =========================================================== 12. SAFETY: keep brand-gold elements readable, never dim gold =========================================================== */ :root[data-theme="dark"] .text-primary { color: var(--hc-dk-gold-soft) !important; } /* =========================================================== 13. COMMUNITY PAGES Feed (.cf-*), About (.gab-*), Members (.cm-*), Learning Hub (.lh-*), Earnings (.cfe-*), Audience (.ga-*), Owner Settings (.gos-*). These ship their own hardcoded light surfaces, so we re-map by structural suffix (card / panel / modal / header / …) rather than listing every class. =========================================================== */ /* Page bodies / shells */ :root[data-theme="dark"] .cf-body, :root[data-theme="dark"] .cf-page, :root[data-theme="dark"] .gab-about, :root[data-theme="dark"] .cm-page, :root[data-theme="dark"] .lh-page, :root[data-theme="dark"] .cfe-page, :root[data-theme="dark"] .ga-page, :root[data-theme="dark"] .gos-page, :root[data-theme="dark"] .gos { background: var(--hc-dk-bg) !important; color: var(--hc-dk-text) !important; } /* Cards / panels / modals / sheets — any prefixed component whose class contains these surface words gets the dark surface. */ :root[data-theme="dark"] [class*="cf-"][class*="card"], :root[data-theme="dark"] [class*="gab-"][class*="card"], :root[data-theme="dark"] [class*="cm-"][class*="card"], :root[data-theme="dark"] [class*="lh-"][class*="card"], :root[data-theme="dark"] [class*="cfe-"][class*="card"], :root[data-theme="dark"] [class*="ga-"][class*="card"], :root[data-theme="dark"] [class*="gos-"][class*="card"], :root[data-theme="dark"] [class*="cf-"][class*="panel"], :root[data-theme="dark"] [class*="cm-"][class*="panel"], :root[data-theme="dark"] [class*="lh-"][class*="panel"], :root[data-theme="dark"] [class*="ga-"][class*="panel"], :root[data-theme="dark"] [class*="gos-"][class*="panel"], :root[data-theme="dark"] [class*="cf-"][class*="modal"], :root[data-theme="dark"] [class*="cm-"][class*="modal"], :root[data-theme="dark"] [class*="lh-"][class*="modal"], :root[data-theme="dark"] [class*="ga-"][class*="modal"], :root[data-theme="dark"] [class*="gos-"][class*="modal"], :root[data-theme="dark"] [class*="cf-"][class*="sheet"], :root[data-theme="dark"] [class*="cf-"][class*="popup"], :root[data-theme="dark"] [class*="cf-"][class*="dropdown"], :root[data-theme="dark"] [class*="cf-"][class*="menu"], :root[data-theme="dark"] [class*="lh-"][class*="tile"] { background: var(--hc-dk-surface) !important; border-color: var(--hc-dk-border) !important; color: var(--hc-dk-text) !important; box-shadow: none !important; } /* Learning Hub course progress must remain visible over dark cards. */ :root[data-theme="dark"] .lh-course-card .lh-course-card-progress-track { min-width: 0; height: 5px; background: #ffc000 !important; } :root[data-theme="dark"] .lh-course-card .lh-course-card-progress-fill { background: #ffc000 !important; } /* Sidebars / tab rails / nav columns within communities */ :root[data-theme="dark"] [class*="cf-"][class*="sidebar"], :root[data-theme="dark"] [class*="cf-"][class*="rail"], :root[data-theme="dark"] [class*="cf-"][class*="nav"], :root[data-theme="dark"] [class*="cm-"][class*="sidebar"], :root[data-theme="dark"] [class*="gos-"][class*="nav"], :root[data-theme="dark"] [class*="ga-"][class*="sidebar"], :root[data-theme="dark"] .cf-tabs, :root[data-theme="dark"] .gab-about-head, :root[data-theme="dark"] .ga-automation-head { background: var(--hc-dk-surface) !important; border-color: var(--hc-dk-border) !important; } /* Headings / titles / primary text inside communities */ :root[data-theme="dark"] [class*="cf-"][class*="title"], :root[data-theme="dark"] [class*="cf-"][class*="name"], :root[data-theme="dark"] [class*="cf-"][class*="heading"], :root[data-theme="dark"] [class*="gab-"][class*="title"], :root[data-theme="dark"] [class*="cm-"][class*="title"], :root[data-theme="dark"] [class*="cm-"][class*="name"], :root[data-theme="dark"] [class*="lh-"][class*="title"], :root[data-theme="dark"] [class*="lh-"][class*="name"], :root[data-theme="dark"] [class*="cfe-"][class*="title"], :root[data-theme="dark"] [class*="ga-"][class*="title"], :root[data-theme="dark"] [class*="gos-"][class*="title"] { color: var(--hc-dk-text) !important; } /* Secondary / muted / meta / desc text */ :root[data-theme="dark"] [class*="cf-"][class*="desc"], :root[data-theme="dark"] [class*="cf-"][class*="meta"], :root[data-theme="dark"] [class*="cf-"][class*="muted"], :root[data-theme="dark"] [class*="cf-"][class*="sub"], :root[data-theme="dark"] [class*="cf-"][class*="time"], :root[data-theme="dark"] [class*="gab-"][class*="desc"], :root[data-theme="dark"] [class*="gab-"][class*="text"], :root[data-theme="dark"] [class*="cm-"][class*="meta"], :root[data-theme="dark"] [class*="cm-"][class*="sub"], :root[data-theme="dark"] [class*="lh-"][class*="desc"], :root[data-theme="dark"] [class*="lh-"][class*="meta"], :root[data-theme="dark"] [class*="cfe-"][class*="desc"], :root[data-theme="dark"] [class*="ga-"][class*="desc"], :root[data-theme="dark"] [class*="ga-"][class*="meta"], :root[data-theme="dark"] [class*="gos-"][class*="desc"], :root[data-theme="dark"] [class*="gos-"][class*="hint"] { color: var(--hc-dk-text-soft) !important; } /* Inputs inside community components (BEM-scoped, often overriding .form-control) */ :root[data-theme="dark"] [class*="cf-"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), :root[data-theme="dark"] [class*="cf-"] textarea, :root[data-theme="dark"] [class*="cf-"] select, :root[data-theme="dark"] [class*="cm-"] input:not([type="checkbox"]):not([type="radio"]), :root[data-theme="dark"] [class*="cm-"] textarea, :root[data-theme="dark"] [class*="lh-"] input:not([type="checkbox"]):not([type="radio"]), :root[data-theme="dark"] [class*="lh-"] textarea, :root[data-theme="dark"] [class*="ga-"] input:not([type="checkbox"]):not([type="radio"]), :root[data-theme="dark"] [class*="ga-"] textarea, :root[data-theme="dark"] [class*="gos-"] input:not([type="checkbox"]):not([type="radio"]), :root[data-theme="dark"] [class*="gos-"] textarea, :root[data-theme="dark"] [class*="gos-"] select { background: var(--hc-dk-surface) !important; /* #181b21 (was surface-2) */ border-color: var(--hc-dk-border-strong) !important; color: var(--hc-dk-text) !important; } /* Rows / list items that highlight on hover */ :root[data-theme="dark"] [class*="cf-"][class*="row"]:hover, :root[data-theme="dark"] [class*="cm-"][class*="row"]:hover, :root[data-theme="dark"] [class*="lh-"][class*="row"]:hover, :root[data-theme="dark"] [class*="ga-"][class*="row"]:hover, :root[data-theme="dark"] [class*="gos-"][class*="row"]:hover { background: var(--hc-dk-surface-2) !important; } /* Neutral / outline / cancel buttons in communities (keep gold/colored ones) */ :root[data-theme="dark"] .cfe-btn--outline, :root[data-theme="dark"] .gos-btn:not(.gos-btn-dark), :root[data-theme="dark"] .lh-btn-cancel, :root[data-theme="dark"] .cm-btn:not([class*="primary"]):not([class*="gold"]), :root[data-theme="dark"] .gab-about-edit-btn { background: var(--hc-dk-surface-2) !important; border-color: var(--hc-dk-border-strong) !important; color: var(--hc-dk-text) !important; } /* Dividers inside communities */ :root[data-theme="dark"] [class*="cf-"][class*="divider"], :root[data-theme="dark"] [class*="cm-"][class*="divider"], :root[data-theme="dark"] [class*="lh-"][class*="divider"], :root[data-theme="dark"] [class*="ga-"][class*="divider"], :root[data-theme="dark"] [class*="gos-"][class*="divider"] { background: var(--hc-dk-border) !important; border-color: var(--hc-dk-border) !important; } /* =========================================================== 14. DISCOVER / "FIND YOUR PEOPLE" PAGE (groups.tpl) Classes are scoped under body.hc-groups-logged-landing with !important + a beige light theme, so we match that selector chain (and add :root[data-theme="dark"]) to win. =========================================================== */ /* Page + hero background */ :root[data-theme="dark"] body.hc-groups-logged-landing, :root[data-theme="dark"] body.hc-groups-discover, :root[data-theme="dark"] body.hc-groups-guest { background: var(--hc-dk-bg) !important; color: var(--hc-dk-text) !important; } :root[data-theme="dark"] body.hc-groups-logged-landing .hc-logged-hero { border-bottom-color: var(--hc-dk-border) !important; } /* Soften the bright pastel glow so it isn't a milky haze on black */ :root[data-theme="dark"] body.hc-groups-logged-landing .hc-logged-hero-bg { opacity: 0.4; } /* Trust pill */ :root[data-theme="dark"] body.hc-groups-logged-landing .hc-logged-trust-pill { background: var(--hc-dk-surface-2) !important; border-color: var(--hc-dk-border) !important; color: var(--hc-dk-text-soft) !important; } /* Hero heading + subtitle */ :root[data-theme="dark"] body.hc-groups-logged-landing .hc-logged-title { color: var(--hc-dk-text) !important; } :root[data-theme="dark"] body.hc-groups-logged-landing .hc-logged-title span { color: var(--hc-dk-gold-soft) !important; } :root[data-theme="dark"] body.hc-groups-logged-landing .hc-logged-subtitle, :root[data-theme="dark"] body.hc-groups-logged-landing .hc-logged-explore-copy p { color: var(--hc-dk-text-soft) !important; } /* Hero search field (the bright white pill) */ :root[data-theme="dark"] body.hc-groups-logged-landing .hc-logged-search { background: var(--hc-dk-surface-2) !important; border-color: var(--hc-dk-border-strong) !important; box-shadow: none !important; } :root[data-theme="dark"] body.hc-groups-logged-landing .hc-logged-search input { color: var(--hc-dk-text) !important; } :root[data-theme="dark"] body.hc-groups-logged-landing .hc-logged-search input::placeholder { color: var(--hc-dk-text-mute) !important; } :root[data-theme="dark"] body.hc-groups-logged-landing .hc-logged-search-icon { color: var(--hc-dk-text-mute) !important; } /* gold search button keeps its gold — no override needed */ /* Hero buttons: navy primary is too dark on black → gold; white secondary → dark surface */ :root[data-theme="dark"] body.hc-groups-logged-landing .hc-logged-primary-btn { background: var(--hc-dk-gold) !important; color: #221a07 !important; box-shadow: 0 14px 26px rgba(0,0,0,.45) !important; } :root[data-theme="dark"] body.hc-groups-logged-landing .hc-logged-secondary-btn { background: var(--hc-dk-surface-2) !important; border-color: var(--hc-dk-border-strong) !important; color: var(--hc-dk-text) !important; } /* Stat counts */ :root[data-theme="dark"] body.hc-groups-logged-landing .hc-logged-stat strong { color: var(--hc-dk-text) !important; } :root[data-theme="dark"] body.hc-groups-logged-landing .hc-logged-stat span { color: var(--hc-dk-text-soft) !important; } :root[data-theme="dark"] body.hc-groups-logged-landing .hc-logged-stat + .hc-logged-stat { border-left-color: var(--hc-dk-border-strong) !important; } /* Section heading "Find Your People" */ :root[data-theme="dark"] body.hc-groups-logged-landing .hc-logged-explore-copy h2 { color: var(--hc-dk-text) !important; } /* Category tabs / chips */ :root[data-theme="dark"] body.hc-groups-logged-landing .hc-logged-tab { background: var(--hc-dk-surface-2) !important; border-color: var(--hc-dk-border-strong) !important; color: var(--hc-dk-text-soft) !important; } :root[data-theme="dark"] body.hc-groups-logged-landing .hc-logged-tab.active { background: var(--hc-dk-gold) !important; border-color: var(--hc-dk-gold) !important; color: #221a07 !important; } /* Community cards — transparent (blend into page bg, both modes) */ :root[data-theme="dark"] body.hc-groups-logged-landing .hc-logged-card, :root[data-theme="dark"] body.hc-groups-discover .hc-logged-card, :root[data-theme="dark"] body.hc-groups-guest .hc-guest-card, :root[data-theme="dark"] body.hc-groups-logged-landing .hc-logged-card-link { background: transparent !important; border-color: transparent !important; box-shadow: none !important; } :root[data-theme="dark"] body.hc-groups-logged-landing .hc-logged-card-cover, :root[data-theme="dark"] body.hc-groups-logged-landing .hc-logged-card-cover-placeholder { background: linear-gradient(180deg, var(--hc-dk-surface-2) 0%, var(--hc-dk-surface-3) 100%) !important; } :root[data-theme="dark"] body.hc-groups-logged-landing .hc-logged-card-chip-category { background: rgba(20,23,28,.86) !important; color: var(--hc-dk-text) !important; } /* gold/navy price + joined chips keep their colors */ :root[data-theme="dark"] body.hc-groups-logged-landing .hc-logged-card-title { color: var(--hc-dk-text) !important; } :root[data-theme="dark"] body.hc-groups-logged-landing .hc-logged-card-desc, :root[data-theme="dark"] body.hc-groups-logged-landing .hc-logged-members { color: var(--hc-dk-text-soft) !important; } :root[data-theme="dark"] body.hc-groups-logged-landing .hc-logged-card-meta { border-top-color: var(--hc-dk-border) !important; } /* gold card CTA keeps its gold */ /* Empty state + load-more */ :root[data-theme="dark"] body.hc-groups-logged-landing .hc-logged-empty { background: var(--hc-dk-surface) !important; border-color: var(--hc-dk-border) !important; } :root[data-theme="dark"] body.hc-groups-logged-landing .hc-logged-empty h2 { color: var(--hc-dk-text) !important; } :root[data-theme="dark"] body.hc-groups-logged-landing .hc-logged-empty p { color: var(--hc-dk-text-soft) !important; } :root[data-theme="dark"] body.hc-groups-logged-landing .hc-loadmore-btn { background: var(--hc-dk-surface-2) !important; border-color: var(--hc-dk-border-strong) !important; color: var(--hc-dk-text) !important; } /* Discover-page header bar (body.hc-groups-discover variant) */ :root[data-theme="dark"] body.hc-groups-discover .hc-hb { background: var(--hc-dk-surface) !important; } :root[data-theme="dark"] body.hc-groups-discover .hc-hb-discover-search input { background: var(--hc-dk-surface-2) !important; border-color: var(--hc-dk-border-strong) !important; color: var(--hc-dk-text) !important; } :root[data-theme="dark"] body.hc-groups-discover .hc-hb-discover-search input::placeholder { color: var(--hc-dk-text-mute) !important; } /* Guest grid variant reuses the same card classes via .hc-guest-card-* — catch the inner card pieces (but NOT the outer .hc-guest-card wrapper, which is kept transparent above to blend into the page background). */ :root[data-theme="dark"] body.hc-groups-guest [class*="hc-guest-"][class*="card-"] { color: var(--hc-dk-text) !important; } /* Guest discover page */ :root[data-theme="dark"] body.hc-groups-guest .hc-guest-main { background: var(--hc-dk-bg) !important; } :root[data-theme="dark"] body.hc-groups-guest .hc-guest-explore-copy h2 { color: var(--hc-dk-text) !important; } :root[data-theme="dark"] body.hc-groups-guest .hc-guest-explore-copy p { color: var(--hc-dk-text-soft) !important; } :root[data-theme="dark"] body.hc-groups-guest .hc-guest-tab { background: var(--hc-dk-surface-2) !important; border-color: var(--hc-dk-border-strong) !important; color: var(--hc-dk-text-soft) !important; } :root[data-theme="dark"] body.hc-groups-guest .hc-guest-tab:hover { background: var(--hc-dk-surface-3) !important; color: var(--hc-dk-text) !important; } :root[data-theme="dark"] body.hc-groups-guest .hc-guest-tab.active { background: var(--hc-dk-gold) !important; border-color: var(--hc-dk-gold) !important; color: #221a07 !important; } :root[data-theme="dark"] body.hc-groups-guest .hc-guest-card { background: var(--hc-dk-surface) !important; border-color: var(--hc-dk-border) !important; box-shadow: 0 12px 28px rgba(0, 0, 0, .24) !important; } :root[data-theme="dark"] body.hc-groups-guest .hc-guest-card:hover { border-color: var(--hc-dk-border-strong) !important; box-shadow: 0 16px 34px rgba(0, 0, 0, .34) !important; } :root[data-theme="dark"] body.hc-groups-guest .hc-guest-card-link, :root[data-theme="dark"] body.hc-groups-guest .hc-guest-card-body { background: var(--hc-dk-surface) !important; color: var(--hc-dk-text) !important; } :root[data-theme="dark"] body.hc-groups-guest .hc-guest-card-cover-placeholder { background: linear-gradient(135deg, var(--hc-dk-surface-2), var(--hc-dk-surface-3)) !important; } :root[data-theme="dark"] body.hc-groups-guest .hc-guest-card-logo { background: var(--hc-dk-surface-3) !important; box-shadow: inset 0 0 0 1px var(--hc-dk-border) !important; } :root[data-theme="dark"] body.hc-groups-guest .hc-guest-card-title { color: var(--hc-dk-text) !important; } :root[data-theme="dark"] body.hc-groups-guest .hc-guest-card-desc { color: var(--hc-dk-text-soft) !important; } :root[data-theme="dark"] body.hc-groups-guest .hc-guest-card-meta, :root[data-theme="dark"] body.hc-groups-guest .hc-guest-members, :root[data-theme="dark"] body.hc-groups-guest .hc-guest-card-price { color: var(--hc-dk-text-soft) !important; } :root[data-theme="dark"] body.hc-groups-guest .hc-guest-card-dot { background: var(--hc-dk-text-mute) !important; } :root[data-theme="dark"] body.hc-groups-guest .hc-guest-empty { background: var(--hc-dk-surface) !important; border-color: var(--hc-dk-border) !important; } :root[data-theme="dark"] body.hc-groups-guest .hc-guest-empty h2 { color: var(--hc-dk-text) !important; } :root[data-theme="dark"] body.hc-groups-guest .hc-guest-empty p { color: var(--hc-dk-text-soft) !important; } :root[data-theme="dark"] body.hc-groups-discover .hc-groups-pagination, :root[data-theme="dark"] body.hc-groups-guest .hc-groups-pagination { color: #aeb7c5 !important; } :root[data-theme="dark"] body.hc-groups-discover .hc-groups-page, :root[data-theme="dark"] body.hc-groups-discover .hc-groups-page-nav, :root[data-theme="dark"] body.hc-groups-discover .hc-groups-page-ellipsis, :root[data-theme="dark"] body.hc-groups-guest .hc-groups-page, :root[data-theme="dark"] body.hc-groups-guest .hc-groups-page-nav, :root[data-theme="dark"] body.hc-groups-guest .hc-groups-page-ellipsis { color: #aeb7c5 !important; } :root[data-theme="dark"] body.hc-groups-discover .hc-groups-page:hover, :root[data-theme="dark"] body.hc-groups-discover .hc-groups-page-nav:hover, :root[data-theme="dark"] body.hc-groups-guest .hc-groups-page:hover, :root[data-theme="dark"] body.hc-groups-guest .hc-groups-page-nav:hover { color: #f8fafc !important; } :root[data-theme="dark"] body.hc-groups-discover .hc-groups-page.is-active, :root[data-theme="dark"] body.hc-groups-guest .hc-groups-page.is-active { background: #ffe3a0 !important; color: #111827 !important; } :root[data-theme="dark"] body.hc-groups-discover .hc-groups-page-nav.is-disabled, :root[data-theme="dark"] body.hc-groups-guest .hc-groups-page-nav.is-disabled { color: #4b5563 !important; } /* =========================================================== 15. HEADER-PANEL FIXES (white list bodies / search fields) These global-overrides.css rules use 2-class specificity, so the earlier generic dark rules didn't win. Match or exceed it. =========================================================== */ /* ---- Header DISCOVER search (white pill) ---- The input is transparent; the white comes from the WRAPPER (.hc-hb-modern .hc-hb-discover-search). */ :root[data-theme="dark"] .hc-hb-modern .hc-hb-discover-search { background: var(--hc-dk-surface-2) !important; border-color: var(--hc-dk-border-strong) !important; box-shadow: none !important; } :root[data-theme="dark"] .hc-hb-modern .hc-hb-discover-search input { color: var(--hc-dk-text) !important; } :root[data-theme="dark"] .hc-hb-modern .hc-hb-discover-search input::placeholder { color: var(--hc-dk-text-mute) !important; } :root[data-theme="dark"] .hc-hb-modern .hc-hb-discover-search svg { color: var(--hc-dk-text-mute) !important; } /* ---- Panel containers (covers notifications + messages base) ---- */ :root[data-theme="dark"] .hc-hp-panel, :root[data-theme="dark"] .hc-hp-panel.mp-panel, :root[data-theme="dark"] .hc-hp-panel.mp-panel.hc-np-panel { background: var(--hc-dk-surface) !important; border-color: var(--hc-dk-border) !important; } /* ---- MESSAGES: white list body + search pill ---- */ :root[data-theme="dark"] .mp-list, :root[data-theme="dark"] .mp-view-list, :root[data-theme="dark"] .mp-search-wrap { background: var(--hc-dk-surface) !important; } :root[data-theme="dark"] .mp-search { background: var(--hc-dk-surface-2) !important; border: 1px solid var(--hc-dk-border-strong) !important; } :root[data-theme="dark"] .mp-search input { color: var(--hc-dk-text) !important; } :root[data-theme="dark"] .mp-search input::placeholder, :root[data-theme="dark"] .mp-search svg { color: var(--hc-dk-text-mute) !important; } :root[data-theme="dark"] .mp-row { border-bottom-color: var(--hc-dk-border) !important; } :root[data-theme="dark"] .mp-row:hover { background: var(--hc-dk-surface-2) !important; } :root[data-theme="dark"] .mp-list::-webkit-scrollbar-thumb { background: var(--hc-dk-surface-3) !important; } /* ---- NOTIFICATIONS: list + rows + toolbar ---- */ :root[data-theme="dark"] .hc-np-panel .np-list, :root[data-theme="dark"] .hc-hp-list { background: var(--hc-dk-surface) !important; } :root[data-theme="dark"] .hc-np-panel .np-toolbar { border-bottom-color: var(--hc-dk-border) !important; } :root[data-theme="dark"] .hc-np-panel .np-tabs { background: var(--hc-dk-surface-3) !important; } :root[data-theme="dark"] .hc-np-panel .np-tab { color: var(--hc-dk-text-soft) !important; } /* active gold tab keeps its gradient */ :root[data-theme="dark"] .hc-np-panel .np-row { border-bottom-color: var(--hc-dk-border) !important; } :root[data-theme="dark"] .hc-np-panel .np-row:hover { background: var(--hc-dk-surface-2) !important; } :root[data-theme="dark"] .hc-np-panel .np-row.is-unread { background: rgba(230,181,65,.10) !important; } :root[data-theme="dark"] .hc-np-panel .np-row .hc-hp-item-title, :root[data-theme="dark"] .hc-np-panel .np-empty-title { color: var(--hc-dk-text) !important; } :root[data-theme="dark"] .hc-np-panel .np-row .hc-hp-item-text { color: var(--hc-dk-text-soft) !important; } :root[data-theme="dark"] .hc-np-panel .np-row .hc-hp-item-time, :root[data-theme="dark"] .hc-np-panel .np-empty-text, :root[data-theme="dark"] .hc-np-panel .hc-hp-empty, :root[data-theme="dark"] .hc-np-panel .hc-hp-loading { color: var(--hc-dk-text-mute) !important; } :root[data-theme="dark"] .hc-np-panel .np-row-dismiss:hover { background: var(--hc-dk-surface-3) !important; color: var(--hc-dk-text) !important; } :root[data-theme="dark"] .hc-np-panel .np-empty-icon { background: var(--hc-dk-surface-3) !important; color: var(--hc-dk-text-soft) !important; } /* ---- Messages conversation view (was beige) ---- */ :root[data-theme="dark"] .mp-view-conv, :root[data-theme="dark"] .mp-msgs { background: var(--hc-dk-bg) !important; } /* =========================================================== 16. CREATE COMMUNITY PAGE (community-create.tpl, .hc-create-*) The page CSS is driven by --hc-create-* variables plus some hardcoded light values, and the body uses an inline mesh gradient. Remap the variables (one shot) + the hardcoded bits. =========================================================== */ /* Re-point the create-page design tokens to the dark palette */ :root[data-theme="dark"] body.hc-create-page, :root[data-theme="dark"] .hc-create-page { --hc-create-bg: #0f1115; --hc-create-surface: #111318; --hc-create-text: #e7e9ee; --hc-create-muted: #aeb4bf; --hc-create-line: rgba(255, 255, 255, 0.10); /* gold/navy accents kept */ } /* Kill the bright inline mesh-gradient background */ :root[data-theme="dark"] body.hc-create-page { background-color: var(--hc-dk-bg) !important; background-image: none !important; color: var(--hc-dk-text) !important; } /* Hardcoded light surfaces → dark */ :root[data-theme="dark"] .hc-create-page .hc-create-select-trigger, :root[data-theme="dark"] .hc-create-page .hc-create-upload { background: var(--hc-dk-surface-2) !important; border-color: var(--hc-dk-border-strong) !important; color: var(--hc-dk-text) !important; } :root[data-theme="dark"] .hc-create-page .hc-create-choice-card, :root[data-theme="dark"] .hc-create-page .hc-create-radio-card, :root[data-theme="dark"] .hc-create-page .hc-create-preview-card, :root[data-theme="dark"] .hc-create-page .hc-create-payment-plan, :root[data-theme="dark"] .hc-create-page .hc-create-summary-card, :root[data-theme="dark"] .hc-create-page .hc-create-select-menu { background: var(--hc-dk-surface) !important; border-color: var(--hc-dk-border) !important; color: var(--hc-dk-text) !important; } /* Card / panel / plan-card already use var(--hc-create-surface), handled by the token remap above, but force border + text for safety */ :root[data-theme="dark"] .hc-create-page .hc-create-card, :root[data-theme="dark"] .hc-create-page .hc-create-plan-card, :root[data-theme="dark"] .hc-create-page .hc-create-shell { border-color: var(--hc-dk-border) !important; color: var(--hc-dk-text) !important; } /* Text colors that were hardcoded dark navy */ :root[data-theme="dark"] .hc-create-page, :root[data-theme="dark"] .hc-create-page h1, :root[data-theme="dark"] .hc-create-page h2, :root[data-theme="dark"] .hc-create-page h3, :root[data-theme="dark"] .hc-create-page h4, :root[data-theme="dark"] .hc-create-page .hc-create-field, :root[data-theme="dark"] .hc-create-page .hc-create-select-trigger, :root[data-theme="dark"] .hc-create-page .hc-create-summary-card, :root[data-theme="dark"] .hc-create-page strong { color: var(--hc-dk-text) !important; } :root[data-theme="dark"] .hc-create-page p, :root[data-theme="dark"] .hc-create-page .hc-create-note, :root[data-theme="dark"] .hc-create-page .hc-create-intro, :root[data-theme="dark"] .hc-create-page .hc-create-kicker, :root[data-theme="dark"] .hc-create-page .hc-create-step { color: var(--hc-dk-text-soft) !important; } /* Inputs / textareas / selects inside the create flow */ :root[data-theme="dark"] .hc-create-page input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), :root[data-theme="dark"] .hc-create-page textarea, :root[data-theme="dark"] .hc-create-page select { background: var(--hc-dk-surface-2) !important; border-color: var(--hc-dk-border-strong) !important; color: var(--hc-dk-text) !important; } :root[data-theme="dark"] .hc-create-page input::placeholder, :root[data-theme="dark"] .hc-create-page textarea::placeholder { color: var(--hc-dk-text-mute) !important; } /* Select dropdown options */ :root[data-theme="dark"] .hc-create-page .hc-create-select-option { color: var(--hc-dk-text) !important; } :root[data-theme="dark"] .hc-create-page .hc-create-select-option:hover, :root[data-theme="dark"] .hc-create-page .hc-create-select-option.is-selected { background: var(--hc-dk-surface-2) !important; } /* Selected / active choice & radio cards keep a gold-tinted highlight */ :root[data-theme="dark"] .hc-create-page .hc-create-choice-card.is-selected, :root[data-theme="dark"] .hc-create-page .hc-create-radio-card.is-selected, :root[data-theme="dark"] .hc-create-page .hc-create-payment-plan.is-selected, :root[data-theme="dark"] .hc-create-page .hc-create-plan-card.is-featured { background: rgba(230,181,65,.10) !important; border-color: var(--hc-dk-gold) !important; } /* Light secondary button → dark surface (gold/navy primaries kept) */ :root[data-theme="dark"] .hc-create-page .hc-create-plan-btn-light, :root[data-theme="dark"] .hc-create-page .hc-create-link-btn { background: var(--hc-dk-surface-2) !important; border-color: var(--hc-dk-border-strong) !important; color: var(--hc-dk-text) !important; } /* Success modal */ :root[data-theme="dark"] .hc-create-page .hc-create-success-dialog, :root[data-theme="dark"] .hc-create-page .hc-create-success-modal { background: var(--hc-dk-surface) !important; border-color: var(--hc-dk-border) !important; color: var(--hc-dk-text) !important; } /* Preview card cover placeholder gradient */ :root[data-theme="dark"] .hc-create-page .hc-create-preview-cover { background: linear-gradient(180deg, var(--hc-dk-surface-2) 0%, var(--hc-dk-surface-3) 100%) !important; } /* Header bar on this page (it also carries .hc-groups-discover) */ :root[data-theme="dark"] body.hc-create-page .hc-hb { background: var(--hc-dk-surface) !important; border-bottom-color: var(--hc-dk-border) !important; } /* =========================================================== 16b. CREATE PAGE — inline-