:root { --surface-900: #0f1216; --surface-800: #131922; --surface-700: #18202b; --border-700: #213041; --text-100: #e8eef2; --text-200: #d4dde3; --text-300: #b7c6cf; --muted-400: #90a4ae; --accent: #2FA89F; --accent-700: #23867f; } /* Scope all overrides to pages that opt-in with .dealer-skin on */ .dealer-skin .muted { color: var(--muted-400); } /* DARK SURFACES (cards/boxes) */ .dealer-skin .card.plan, .dealer-skin .why-card, .dealer-skin .bundles, .dealer-skin .addons, .dealer-skin .footnotes, .dealer-skin .compare-table, .dealer-skin .cta .cta-inner { background: var(--surface-900); color: var(--text-100); border: 1px solid var(--border-700); box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset, 0 12px 24px rgba(0,0,0,0.25); backdrop-filter: saturate(110%) blur(0.5px); } /* Headings and prices inside dark boxes */ .dealer-skin .plan .plan-head h4, .dealer-skin .why-card h3, .dealer-skin .cta .cta-inner h2 { color: var(--text-100); } .dealer-skin .price-row .price { color: var(--text-100); } .dealer-skin .price-row .unit { color: var(--text-300); } /* Lists inside dark cards */ .dealer-skin .plan-list li, .dealer-skin .addon-list li, .dealer-skin .bundle-list li { color: var(--text-200); border-color: var(--border-700); } /* Bundles block spacing to feel like dealer.html tiles */ .dealer-skin .bundles { padding: 1.25rem 1rem; border-radius: 12px; } .dealer-skin .addons { margin-top: 0.75rem; padding: 0.75rem 0.75rem 0.5rem; border-radius: 10px; } /* WHY GRID */ .dealer-skin .why-grid { gap: 1rem; } .dealer-skin .why-card { border-radius: 12px; padding: 1.25rem; } /* COMPARISON TABLE */ .dealer-skin .table-wrap { background: transparent; } .dealer-skin .compare-table { border-collapse: collapse; width: 100%; border-radius: 12px; overflow: hidden; } .dealer-skin .compare-table th, .dealer-skin .compare-table td { border: 1px solid var(--border-700); } .dealer-skin .compare-table thead th { background: var(--surface-800); color: var(--text-100); } .dealer-skin .compare-table tbody td { background: transparent; color: var(--text-200); } /* FOOTNOTES */ .dealer-skin details.footnotes { border-radius: 10px; padding: 0.5rem 0.75rem; } .dealer-skin details.footnotes summary { color: var(--text-200); } /* CTA box */ .dealer-skin .cta .cta-inner { border-radius: 14px; } /* Tooltip accent for “What makes an image feed‑safe?” */ .dealer-skin .tooltip { color: var(--accent); border-bottom: 1px dashed var(--accent); } /* Simple pure-CSS tooltip if your base CSS uses [data-tooltip] */ .dealer-skin .tooltip[data-tooltip] { position: relative; cursor: help; } .dealer-skin .tooltip[data-tooltip]:hover::after, .dealer-skin .tooltip[data-tooltip]:focus::after { content: attr(data-tooltip); position: absolute; left: 0; top: 100%; margin-top: 8px; background: var(--surface-800); color: var(--text-100); border: 1px solid var(--border-700); padding: 10px 12px; font-size: 0.875rem; line-height: 1.3; min-width: 240px; max-width: 360px; border-radius: 8px; z-index: 20; box-shadow: 0 8px 20px rgba(0,0,0,0.35); } /* Badges & buttons retain site palette; just increase contrast on dark */ .dealer-skin .badge { border-color: rgba(255,255,255,0.12); color: var(--text-200); } .dealer-skin .btn.primary { background: var(--accent); border-color: var(--accent); color: #0a0f12; } .dealer-skin .btn.primary:hover, .dealer-skin .btn.primary:focus { background: var(--accent-700); border-color: var(--accent-700); } /* Make the Before/After handle more visible on dark cards nearby */ .dealer-skin .ba-handle { border-color: var(--accent); } /* Optional: subtle section separators to match dealer page rhythm */ .dealer-skin section + section { border-top: 1px solid rgba(33, 48, 65, 0.3); } /* Ensure text inside dark cards isn't too tight */ .dealer-skin .card.plan .plan-head, .dealer-skin .card.plan .plan-list { padding-right: 0.5rem; }