/* ================================================================ PTM Dark — ptm-dark.css Dark theme for the PTM marketing pages (pricing + reviews) plus the floating toggle button. Activated by data-ptm-theme="dark" on , set before paint by an inline boot script. Register/checkout pages never enqueue this file and stay light. Palette: bg #0C1826 · surface #132437 · surface-2 #17293E ink #E7EEF6 · muted #9FB2C6 · line rgba(148,170,192,.25) teal-bright #3FD0C0 (links on dark) ================================================================ */ /* ---- Header theme toggle (both themes) -------------------------- */ .ptm-theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; min-width: 40px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--ptm-line, #DFE5EC); background: transparent; color: var(--ptm-navy, #0B2239); font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; } .ptm-theme-toggle:hover { border-color: var(--ptm-teal, #00A896); color: var(--ptm-teal-dark, #00857A); } .ptm-theme-toggle:focus-visible { outline: 3px solid rgba(0,168,150,0.5); outline-offset: 2px; } .ptm-theme-toggle__icon { display: inline-flex; } html[data-ptm-theme="dark"] .ptm-theme-toggle { border-color: rgba(148,170,192,0.4); color: #DCE6F1; } html[data-ptm-theme="dark"] .ptm-theme-toggle:hover { border-color: #3FD0C0; color: #3FD0C0; } /* Desktop: compact icon-only circular button (label kept for a11y via aria/title) */ @media (min-width: 701px) { .ptm-theme-toggle { width: 40px; min-width: 40px; padding: 0; } .ptm-theme-toggle__text { display: none; } } /* Inside the opened mobile menu panel: full-width row with icon + label */ @media (max-width: 700px) { .ptm-theme-toggle { width: 100%; justify-content: center; min-height: 44px; } .ptm-theme-toggle__text { display: inline; } } @media (prefers-reduced-motion: reduce) { .ptm-theme-toggle { transition: none; } } /* ---- Native form controls / scrollbars on themed pages ---------- */ html[data-ptm-theme="dark"]:has(.ptm-pricing-page) { color-scheme: dark; } html[data-ptm-theme="dark"]:has(.ptm-reviews-page) { color-scheme: dark; } /* ---- Page updated line (both themes) ---------------------------- */ .ptm-page-updated { text-align: center; font-size: 12.5px; color: var(--ptm-grey, #5B6B7B); margin: 0; padding: 16px 20px 22px; background: transparent; } html[data-ptm-theme="dark"] .ptm-page-updated { color: #9FB2C6; } /* ================================================================ PRICING PAGE — dark ================================================================ */ html[data-ptm-theme="dark"] .ptm-pricing-page { --pri-bg: #0C1826; --pri-ink: #E7EEF6; --pri-grey: #9FB2C6; --pri-line: rgba(148,170,192,0.25); background: #0C1826; } /* Card surfaces */ html[data-ptm-theme="dark"] .ptm-pricing-page .ptm-pri-card, html[data-ptm-theme="dark"] .ptm-pricing-page .ptm-pri-feature, html[data-ptm-theme="dark"] .ptm-pricing-page .ptm-pri-show__card, html[data-ptm-theme="dark"] .ptm-pricing-page .ptm-pri-specialties__inner, html[data-ptm-theme="dark"] .ptm-pricing-page .ptm-pri-faq__item, html[data-ptm-theme="dark"] .ptm-pricing-page .ptm-pri-discount, html[data-ptm-theme="dark"] .ptm-pricing-page .ptm-pri-testi__card { background: #132437; border-color: rgba(148,170,192,0.25); box-shadow: 0 10px 28px rgba(0,0,0,0.35); } html[data-ptm-theme="dark"] .ptm-pricing-page .ptm-pri-faq__item[open] { background: #17293E; border-color: rgba(148,170,192,0.4); } /* Headings & strong text that use navy in light mode */ html[data-ptm-theme="dark"] .ptm-pricing-page .ptm-pri-h2, html[data-ptm-theme="dark"] .ptm-pricing-page .ptm-pri-card__price, html[data-ptm-theme="dark"] .ptm-pricing-page .ptm-pri-show__head, html[data-ptm-theme="dark"] .ptm-pricing-page .ptm-pri-feature__text strong, html[data-ptm-theme="dark"] .ptm-pricing-page .ptm-pri-discount__text strong, html[data-ptm-theme="dark"] .ptm-pricing-page .ptm-pri-faq__item summary, html[data-ptm-theme="dark"] .ptm-pricing-page .ptm-pri-chip, html[data-ptm-theme="dark"] .ptm-pricing-page .ptm-pri-discount__code code { color: #EAF1F8; } html[data-ptm-theme="dark"] .ptm-pricing-page .ptm-pri-testi__card blockquote p { color: #E7EEF6; } /* Teal links & accents need the brighter variant on dark */ html[data-ptm-theme="dark"] .ptm-pricing-page .ptm-pri-textlink, html[data-ptm-theme="dark"] .ptm-pricing-page .ptm-pri-card__equiv, html[data-ptm-theme="dark"] .ptm-pricing-page .ptm-pri-show__label, html[data-ptm-theme="dark"] .ptm-pricing-page .ptm-pri-faq__item summary::after, html[data-ptm-theme="dark"] .ptm-pricing-page .ptm-pri-faq__item p a, html[data-ptm-theme="dark"] .ptm-pricing-page .ptm-pri-faq__more a, html[data-ptm-theme="dark"] .ptm-pricing-page .ptm-pri-chip--sjt { color: #3FD0C0; } html[data-ptm-theme="dark"] .ptm-pricing-page .ptm-pri-discount__code button { background: transparent; color: #3FD0C0; } html[data-ptm-theme="dark"] .ptm-pricing-page .ptm-pri-discount__code button:hover, html[data-ptm-theme="dark"] .ptm-pricing-page .ptm-pri-discount__code button.is-copied { background: var(--pri-teal); color: #06221E; } html[data-ptm-theme="dark"] .ptm-pricing-page .ptm-pri-discount__code code { background: #0C1826; border-color: rgba(148,170,192,0.4); } /* Screenshot frames: dark mount, screenshots stay as-is (content) */ html[data-ptm-theme="dark"] .ptm-pricing-page .ptm-pri-show__imgbtn { background: #0C1826; border-color: rgba(148,170,192,0.25); } /* Lightbox */ html[data-ptm-theme="dark"] .ptm-pri-lightbox { background: #132437; } html[data-ptm-theme="dark"] .ptm-pri-lightbox::backdrop { background: rgba(0,0,0,0.8); } /* ================================================================ REVIEWS PAGE — dark ================================================================ */ html[data-ptm-theme="dark"] .ptm-reviews-page { --rev-bg: #0C1826; --rev-ink: #E7EEF6; --rev-grey: #9FB2C6; --rev-line: rgba(148,170,192,0.25); background: #0C1826; } html[data-ptm-theme="dark"] .ptm-reviews-page .ptm-rev-card, html[data-ptm-theme="dark"] .ptm-reviews-page .ptm-rev-share__inner { background: #132437; border-color: rgba(148,170,192,0.25); box-shadow: 0 10px 28px rgba(0,0,0,0.35); } html[data-ptm-theme="dark"] .ptm-reviews-page .ptm-rev-h2, html[data-ptm-theme="dark"] .ptm-reviews-page .ptm-rev-card__who strong { color: #EAF1F8; } html[data-ptm-theme="dark"] .ptm-reviews-page .ptm-rev-card__label, html[data-ptm-theme="dark"] .ptm-reviews-page .ptm-rev-card--link a { color: #3FD0C0; } html[data-ptm-theme="dark"] .ptm-reviews-page .ptm-rev-card--link { background: rgba(0,168,150,0.12); border-color: rgba(63,208,192,0.4); } html[data-ptm-theme="dark"] .ptm-reviews-page .ptm-rev-card--link p { color: #E7EEF6; } html[data-ptm-theme="dark"] .ptm-reviews-page .ptm-rev-share__cta { background: transparent; color: #3FD0C0 !important; border-color: #3FD0C0; } html[data-ptm-theme="dark"] .ptm-reviews-page .ptm-rev-share__cta:hover { background: var(--rev-teal); color: #06221E !important; } /* ================================================================ HEADER — precise (header-ptm.php: .ptm-header / .ptm-nav / .ptm-brand / .ptm-menu-toggle) ================================================================ */ html[data-ptm-theme="dark"] .ptm-header { background: #0F1D2E; border-bottom: 1px solid rgba(148,170,192,0.2); box-shadow: 0 2px 14px rgba(0,0,0,0.35); } /* Matches the header colour: invisible on desktop, correctly dark when the mobile menu panel opens. */ html[data-ptm-theme="dark"] .ptm-nav { background-color: #0F1D2E; } html[data-ptm-theme="dark"] .ptm-nav a { color: #DCE6F1; } html[data-ptm-theme="dark"] .ptm-nav a:hover { color: #3FD0C0; } html[data-ptm-theme="dark"] .ptm-nav a.ptm-button, html[data-ptm-theme="dark"] .ptm-nav a.ptm-button:hover { color: #ffffff; } html[data-ptm-theme="dark"] .ptm-brand__text { color: #EAF1F8; } html[data-ptm-theme="dark"] .ptm-menu-toggle { color: #DCE6F1; background: transparent; border-color: rgba(148,170,192,0.4); } /* The logo is a white-background JPG: give it a deliberate white mount instead of a glaring floating rectangle. */ html[data-ptm-theme="dark"] .ptm-brand__logo, html[data-ptm-theme="dark"] .ptm-footer__logo { background: #ffffff; border-radius: 6px; padding: 2px; } html[data-ptm-theme="dark"] .ptm-skip-link { background: #132437; color: #EAF1F8; } /* ================================================================ FOOTER — precise (footer-ptm.php: .ptm-footer--light) ================================================================ */ html[data-ptm-theme="dark"] .ptm-footer, html[data-ptm-theme="dark"] .ptm-footer--light { background: #0F1D2E; color: #B9C8D8; border-top: 1px solid rgba(148,170,192,0.2); } html[data-ptm-theme="dark"] .ptm-footer h2 { color: #EAF1F8; } html[data-ptm-theme="dark"] .ptm-footer a { color: #C7D4E2; } html[data-ptm-theme="dark"] .ptm-footer a:hover { color: #3FD0C0; } html[data-ptm-theme="dark"] .ptm-footer__brand span { color: #EAF1F8; } html[data-ptm-theme="dark"] .ptm-footer__desc, html[data-ptm-theme="dark"] .ptm-footer__note, html[data-ptm-theme="dark"] .ptm-footer__meta, html[data-ptm-theme="dark"] .ptm-footer__meta span, html[data-ptm-theme="dark"] .ptm-footer__bottom span { color: #9FB2C6; } html[data-ptm-theme="dark"] .ptm-footer__meta a { color: #3FD0C0; } html[data-ptm-theme="dark"] .ptm-soc { color: #C7D4E2; } html[data-ptm-theme="dark"] .ptm-soc:hover { color: #3FD0C0; } /* Low-specificity border sweep for internal dividers */ html[data-ptm-theme="dark"] .ptm-footer :where(div, p, nav, h2, a, span) { border-color: rgba(148,170,192,0.22); } /* ================================================================ All Policies page (/all-policies/) — dark theme Palette matches the shared dark tokens above: bg #0C1826 · surface #132437 · ink #E7EEF6 · muted #9FB2C6 line rgba(148,170,192,.25) · teal-bright #3FD0C0 The hero keeps its navy gradient (already dark-friendly). ================================================================ */ html[data-ptm-theme="dark"]:has(.ptm-policies-page) { color-scheme: dark; } html[data-ptm-theme="dark"] .ptm-policies-page { background: #0C1826; } /* Section labels + divider */ html[data-ptm-theme="dark"] .ptm-policies-grouplabel h2 { color: #E7EEF6; } html[data-ptm-theme="dark"] .ptm-policies-line { background: rgba(148,170,192,0.25); } /* Policy cards */ html[data-ptm-theme="dark"] .ptm-policy-card { background: #132437; border-color: rgba(148,170,192,0.25); box-shadow: none; } html[data-ptm-theme="dark"] .ptm-policy-card::before { background: #3FD0C0; } html[data-ptm-theme="dark"] .ptm-policy-card:hover { border-color: rgba(63,208,192,0.55); box-shadow: 0 14px 34px rgba(0,0,0,0.45); } html[data-ptm-theme="dark"] .ptm-policy-icon { background: rgba(63,208,192,0.14); color: #3FD0C0; } html[data-ptm-theme="dark"] .ptm-policy-card:hover .ptm-policy-icon { background: rgba(63,208,192,0.22); } html[data-ptm-theme="dark"] .ptm-policy-card h3 { color: #E7EEF6; } html[data-ptm-theme="dark"] .ptm-policy-card p { color: #9FB2C6; } html[data-ptm-theme="dark"] .ptm-policy-link { color: #3FD0C0; } /* Help strip */ html[data-ptm-theme="dark"] .ptm-policies-help__inner { background: #132437; border-color: rgba(148,170,192,0.25); border-left-color: #3FD0C0; box-shadow: none; } html[data-ptm-theme="dark"] .ptm-policies-help__icon { color: #3FD0C0; } html[data-ptm-theme="dark"] .ptm-policies-help__text h4 { color: #E7EEF6; } html[data-ptm-theme="dark"] .ptm-policies-help__text p { color: #9FB2C6; } /* Review note */ html[data-ptm-theme="dark"] .ptm-policies-note { color: #9FB2C6; } /* ================================================================ Testimonials page (page-ptm-testimonials.php, .ptm-testimonials) dark theme. Everything is scoped under .ptm-testimonials so the shared component classes it borrows (.ptm-page-hero, .ptm-cta, .ptm-testimonial-card, etc.) are NOT affected on any other page. Palette matches the shared dark tokens above. ================================================================ */ html[data-ptm-theme="dark"]:has(.ptm-testimonials) { color-scheme: dark; } html[data-ptm-theme="dark"] .ptm-testimonials { background: #0C1826; } /* Hero */ html[data-ptm-theme="dark"] .ptm-testimonials .ptm-page-hero { background: linear-gradient(135deg, #0C1826 0%, #132437 100%); } /* Headings + supporting text */ html[data-ptm-theme="dark"] .ptm-testimonials h1, html[data-ptm-theme="dark"] .ptm-testimonials h2 { color: #E7EEF6; } html[data-ptm-theme="dark"] .ptm-testimonials .ptm-eyebrow { color: #3FD0C0; } html[data-ptm-theme="dark"] .ptm-testimonials .ptm-lead, html[data-ptm-theme="dark"] .ptm-testimonials .ptm-muted { color: #9FB2C6; } /* Testimonial cards */ html[data-ptm-theme="dark"] .ptm-testimonials .ptm-testimonial-card { background: #132437; border-color: rgba(148,170,192,0.25); box-shadow: none; } html[data-ptm-theme="dark"] .ptm-testimonials .ptm-testimonial-card blockquote { color: #E7EEF6; } html[data-ptm-theme="dark"] .ptm-testimonials .ptm-testimonial-card cite { color: #9FB2C6; } /* Tinted "try before you decide" band */ html[data-ptm-theme="dark"] .ptm-testimonials .ptm-section--tint { background: #0F1E30; } html[data-ptm-theme="dark"] .ptm-testimonials .ptm-check-list li, html[data-ptm-theme="dark"] .ptm-testimonials .ptm-check-list strong { color: #E7EEF6; } html[data-ptm-theme="dark"] .ptm-testimonials .ptm-check-list--dark li:before { color: #3FD0C0; } /* Admin-only note (visible to logged-in admins) */ html[data-ptm-theme="dark"] .ptm-testimonials .ptm-admin-note { background: #132437; border-left-color: #3FD0C0; color: #E7EEF6; } /* The final CTA band is navy in both themes, which already sits well on the dark page — left as-is for brand consistency. */