/* ============================================================================
ShopRite — SITE-WIDE DARK MODE · Phase 1: HOMEPAGE
----------------------------------------------------------------------------
Activated by the `sr-dark` class on , driven by the same
localStorage key ('srMembersDark') as the members-area dark mode, so a
member's choice is consistent across the dashboard and the public site.
Account-area dark rules live in account-pages.css. This file ONLY styles
the public homepage sections, scoped to their block classes (.sr-benefits,
.sr-why, .sr-gq, .sr-app-wrap, etc.) so nothing leaks onto other pages.
The purple bands (header, stats, member-stories, CTA) and the footer are
already dark/vivid and are intentionally left as-is.
Cache-bust: bump ?v= in head.phtml on every change.
(DEPLOY-MARKER sr-home-dark)
============================================================================ */
html.sr-dark {
--srd-bg: #15171c; /* primary section background (was #eceef2 / #f6f4f9) */
--srd-bg2: #191c22; /* alternate section background (was #ffffff) */
--srd-card: #20242c; /* cards, pills, accordions */
--srd-card2: #262b34; /* card hover */
--srd-imgbg: #0f1115; /* media placeholder behind images */
--srd-line: #2b303a; /* borders / dividers */
--srd-text: #f0f1f5; /* headings / strong text (was #1a1530) */
--srd-body: #cdd0d6; /* body text */
--srd-muted: #9aa0ad; /* sub / secondary text (was #6b6580) */
--srd-accent: #c8aef0; /* lavender accent (was #7330b3 / #7c2dbf) */
}
/* ---- Page base: fills the gaps between sections (jumbotron area, etc.) ---- */
html.sr-dark body,
html.sr-dark #main_page,
html.sr-dark .main-container,
html.sr-dark #outer_mid_inner,
html.sr-dark .col-main,
html.sr-dark .col-main .std { background: var(--srd-bg2) !important; }
html.sr-dark .col-main { color: var(--srd-body); } /* gentle base, no !important so section rules win */
/* ---- Bare layout wrappers: the base theme paints .container / .container-fluid
a light colour, which shows as a white band between sections (e.g. the strip
just above the benefit cards — the narrow "step" is the centered .container
inside the full-width .container-fluid). Neutralise them on the homepage so
the dark page base shows through. Every real section (.sr-benefits, .sr-why,
.sr-gq, .sr-cta, .sr-app3d, footer) paints its OWN background, so blanking
these structural wrappers can't lighten anything that should stay coloured. */
html.sr-dark .col-main .container,
html.sr-dark .col-main .container-fluid,
html.sr-dark .col-main .widget-static-block { background: transparent !important; }
/* ---- Homepage purple SVG banner: hidden in dark mode (decided 2026-06-12).
The flat dark hero was previously a side effect — the opaque dark paint on
#main_page/.col-main happened to cover the negative-z-index .svg-bg. Both
the full gradient and a deepened variant were trialled and rejected; flat
dark is the chosen look. This rule makes that explicit and skips painting
the 749px SVG entirely. Light mode keeps the animated banner untouched. */
html.sr-dark body.cms-home .svg-bg { display: none !important; }
/* ---- BUSINESS DIRECTORY (/member-benefits.html, body.cms-member-benefits-html,
added 2026-06-12): the page reuses the homepage building blocks (wheel
banner, .jumbotron, .sr-benefits tabs/cards, .sr-giftvault, .shipping_wrap),
all of which are already covered by the html.sr-dark rules above. Only
page-specific extras live here: hide its banner SVG the same way as the
homepage, and keep the "View More Benefits" strip transparent so the dark
page base shows through. */
html.sr-dark body.cms-member-benefits-html .svg-bg { display: none !important; }
html.sr-dark body.cms-member-benefits-html .view-full-list,
html.sr-dark body.cms-member-benefits-html .faq-business { background: transparent !important; }
/* ---- APPLIANCE DISCOUNTS (/electrical-appliances.html,
body.cms-electrical-appliances-html, added 2026-06-12): the wheel banner,
jumbotron, shipping strip and footer ride on the global html.sr-dark rules,
and the section backgrounds are already blanked by the global
.container/.container-fluid rule. This block darkens the page-specific
pieces styled by electricalappliences6.css: the "Members Save More" panel
text, the category pill row (plain ul.maximum-tabs — NOT the sr-tabs
variant), and the product-room image strip. The Request A Quote a.button
keeps its theme styling. */
html.sr-dark body.cms-electrical-appliances-html .svg-bg { display: none !important; }
html.sr-dark body.cms-electrical-appliances-html .quality,
html.sr-dark body.cms-electrical-appliances-html .quality .row,
html.sr-dark body.cms-electrical-appliances-html .appliance,
html.sr-dark body.cms-electrical-appliances-html .blank-section { background: transparent !important; }
html.sr-dark body.cms-electrical-appliances-html .appliance h3 { color: var(--srd-text) !important; }
html.sr-dark body.cms-electrical-appliances-html .appliance p { color: var(--srd-body) !important; }
html.sr-dark body.cms-electrical-appliances-html ul.maximum-tabs li a {
background: var(--srd-card) !important;
border-color: var(--srd-line) !important;
color: var(--srd-muted) !important;
box-shadow: none !important;
}
html.sr-dark body.cms-electrical-appliances-html ul.maximum-tabs li a:hover {
background: var(--srd-card2) !important;
border-color: rgba(200,174,240,.40) !important;
color: var(--srd-text) !important;
}
/* ---- CAR BUYING SERVICE (/car-sales.html, body.cms-car-sales-html,
added 2026-06-12): wheel banner/jumbotron/shipping strip/footer ride on the
global rules, and the animated stats band carries its own purple gradient so
it's already dark-native. Page-specific (styled by cars/main.css): the
two-column "how-does" intro, the video-testimonial carousel cards, and the
"Login to enquire" strip. Wrappers go transparent so the dark page base
shows through; testimonial cards get the dark card treatment. The red
LET'S GET STARTED CTA and theme a.button keep their own styling. */
html.sr-dark body.cms-car-sales-html .svg-bg { display: none !important; }
html.sr-dark body.cms-car-sales-html .mid-content,
html.sr-dark body.cms-car-sales-html .how-does,
html.sr-dark body.cms-car-sales-html .how-does .left-section,
html.sr-dark body.cms-car-sales-html .how-does .right-section,
html.sr-dark body.cms-car-sales-html .how-does .space-left,
html.sr-dark body.cms-car-sales-html .how-does .space-right,
html.sr-dark body.cms-car-sales-html .mid_inner.video,
html.sr-dark body.cms-car-sales-html .inner-text1,
html.sr-dark body.cms-car-sales-html .car-video,
html.sr-dark body.cms-car-sales-html .car-page-faq,
html.sr-dark body.cms-car-sales-html .car-page-form,
html.sr-dark body.cms-car-sales-html .car-page-form .product-box { background: transparent !important; }
html.sr-dark body.cms-car-sales-html .how-does h4 { color: var(--srd-text) !important; }
html.sr-dark body.cms-car-sales-html .how-does p { color: var(--srd-body) !important; }
html.sr-dark body.cms-car-sales-html .how-does p strong { color: var(--srd-text) !important; }
html.sr-dark body.cms-car-sales-html .mid_inner.video .mid-content > h2 { color: var(--srd-text) !important; }
/* Testimonial carousel cards */
html.sr-dark body.cms-car-sales-html .car-video .item {
background: var(--srd-card) !important;
border-color: var(--srd-line) !important;
}
html.sr-dark body.cms-car-sales-html .car-video .video-content { background: transparent !important; }
html.sr-dark body.cms-car-sales-html .car-video .entry-title,
html.sr-dark body.cms-car-sales-html .car-video .entry-title a { color: var(--srd-text) !important; }
html.sr-dark body.cms-car-sales-html .car-video .entry-content p { color: var(--srd-body) !important; }
html.sr-dark body.cms-car-sales-html .car-video .entry-footer,
html.sr-dark body.cms-car-sales-html .car-video .entry-footer__inner { background: transparent !important; border-color: var(--srd-line) !important; }
html.sr-dark body.cms-car-sales-html .car-video .b-post-social { color: var(--srd-muted) !important; }
/* Dark fix (2026-06-12g): the Buy Smart / Trusted by Members / Seal the Deal
icons are light-plate images with no alpha (from cars/main.css), so on the
dark base they read as floating white boxes. A background-image can't be
inverted on its own, so in dark mode we drop the plates — the headings,
body text and purple divider strokes carry the column fine. Covers every
way the icon might be attached: li background-image, a ::before block, or
an inline ![]()
. Light mode keeps the icons untouched. */
html.sr-dark body.cms-car-sales-html .how-does .space-right ul li {
background-image: none !important;
padding-left: 0 !important;
}
html.sr-dark body.cms-car-sales-html .how-does .space-right ul li::before {
content: none !important;
display: none !important;
}
html.sr-dark body.cms-car-sales-html .how-does .space-right ul li img {
display: none !important;
}
/* ---- PLICO ENERGY partner page (/plico-energy, body.cms-plico-energy,
added 2026-06-12): self-contained .sr-plico landing page with its own
Plico palette, all inline. The hero and trust band are navy/teal gradients
— already dark-native — and the white $500 offer card in the hero is KEPT
light deliberately as the contrast pop. This block darkens the light
middle: benefit cards, the soft .sys pricing band, section headings, range
tags, fineprint and the final CTA. Plico teal stays the accent colour. */
html.sr-dark body.cms-plico-energy .svg-bg { display: none !important; }
html.sr-dark body.cms-plico-energy .sr-plico .shead h2 { color: var(--srd-text) !important; }
html.sr-dark body.cms-plico-energy .sr-plico .shead p { color: var(--srd-muted) !important; }
/* The teal-dark kick colour (#0f7e97) has poor contrast on the dark base —
lift it to full Plico teal. */
html.sr-dark body.cms-plico-energy .sr-plico .shead .kick { color: #2abddf !important; }
html.sr-dark body.cms-plico-energy .sr-plico .bcard,
html.sr-dark body.cms-plico-energy .sr-plico .pcard {
background: var(--srd-card) !important;
border-color: var(--srd-line) !important;
}
/* The "Already have solar?" callout carries an inline navy background; the
!important card rule above outranks inline styles, so restore its navy. */
html.sr-dark body.cms-plico-energy .sr-plico .pcard[style*="background:var(--p)"] { background: #19304c !important; }
html.sr-dark body.cms-plico-energy .sr-plico .bcard:hover {
border-color: rgba(42,189,223,.5) !important;
box-shadow: 0 16px 36px rgba(0,0,0,.45) !important;
}
html.sr-dark body.cms-plico-energy .sr-plico .pcard:hover { box-shadow: 0 18px 42px rgba(0,0,0,.5) !important; }
html.sr-dark body.cms-plico-energy .sr-plico .bcard h3,
html.sr-dark body.cms-plico-energy .sr-plico .pcard h3 { color: var(--srd-text) !important; }
html.sr-dark body.cms-plico-energy .sr-plico .pcard[style*="background:var(--p)"] h3 { color: #ffffff !important; }
html.sr-dark body.cms-plico-energy .sr-plico .bcard p,
html.sr-dark body.cms-plico-energy .sr-plico .pcard .blurb { color: var(--srd-muted) !important; }
html.sr-dark body.cms-plico-energy .sr-plico .pcard[style*="background:var(--p)"] .blurb { color: rgba(255,255,255,.85) !important; }
html.sr-dark body.cms-plico-energy .sr-plico .specs li span { color: var(--srd-muted) !important; }
html.sr-dark body.cms-plico-energy .sr-plico .specs li b { color: var(--srd-text) !important; }
html.sr-dark body.cms-plico-energy .sr-plico .sys { background: var(--srd-bg2) !important; }
html.sr-dark body.cms-plico-energy .sr-plico .range-tag span {
background: var(--srd-card) !important;
border-color: var(--srd-line) !important;
color: var(--srd-muted) !important;
}
html.sr-dark body.cms-plico-energy .sr-plico .range-tag b { color: var(--srd-text) !important; }
html.sr-dark body.cms-plico-energy .sr-plico .fineprint { color: var(--srd-muted) !important; }
html.sr-dark body.cms-plico-energy .sr-plico .final h2 { color: var(--srd-text) !important; }
html.sr-dark body.cms-plico-energy .sr-plico .final p { color: var(--srd-body) !important; }
/* ---- Jumbotron headline ("Benefits & Savings.") ---- */
html.sr-dark .jumbotron { background: transparent !important; }
html.sr-dark .jumbotron h1,
html.sr-dark .jumbotron h2 { color: var(--srd-text) !important; }
/* =====================================================================
BENEFITS GRID (.sr-benefits — was #eceef2 with white tabs + cards)
===================================================================== */
html.sr-dark .sr-benefits { background: var(--srd-bg) !important; }
/* The base theme paints the tab PANEL (.tab-content, main.css:1770) with a
hardcoded #efefef background + padding/margin — that's the white band that
shows above and around the cards. Blank it; the section is already dark and
the cards carry their own background. */
html.sr-dark .sr-benefits .tab-content,
html.sr-dark .sr-benefits .sr-tab-content { background: transparent !important; }
/* category tabs */
html.sr-dark .sr-benefits ul.sr-tabs li.sr-tab-link {
background: var(--srd-card) !important;
border-color: var(--srd-line) !important;
color: var(--srd-muted) !important;
}
html.sr-dark .sr-benefits ul.sr-tabs li.sr-tab-link:hover {
background: var(--srd-card2) !important;
border-color: rgba(200,174,240,.40) !important;
color: var(--srd-text) !important;
}
/* keep the active tab on the purple gradient with white text */
html.sr-dark .sr-benefits ul.sr-tabs li.sr-tab-link.current { color: #ffffff !important; }
/* benefit cards */
html.sr-dark .sr-benefits .sr-card {
background: var(--srd-card) !important;
border-color: var(--srd-line) !important;
box-shadow: 0 1px 3px rgba(0,0,0,.4) !important;
}
html.sr-dark .sr-benefits .sr-card:hover {
border-color: rgba(200,174,240,.35) !important;
box-shadow: 0 20px 40px -12px rgba(0,0,0,.6) !important;
}
html.sr-dark .sr-benefits .sr-card-image { background: var(--srd-imgbg) !important; }
/* The inline homepage CSS sets these via `.sr-benefits a.sr-card .sr-card-title`
(#1a1530) and `… .sr-card-desc` (#6b6580) with !important — same specificity
as a plain override, and it's declared later (in ), so it wins the tie
and the titles render near-black on the dark card. Match the a.sr-card chain
so these out-specify the inline rule. */
html.sr-dark .sr-benefits a.sr-card .sr-card-title,
html.sr-dark section.sr-benefits a.sr-card .sr-card-title { color: var(--srd-text) !important; }
html.sr-dark .sr-benefits a.sr-card .sr-card-desc,
html.sr-dark section.sr-benefits a.sr-card .sr-card-desc { color: var(--srd-muted) !important; }
html.sr-dark .sr-benefits .sr-card-cta {
color: var(--srd-accent) !important;
border-top-color: var(--srd-line) !important;
}
/* the gift-cards "vault" tab is already a dark frosted gate — left as-is */
/* =====================================================================
APP DOWNLOAD BLOCK (.sr-app-wrap — was #eceef2; phone + store
buttons are already dark and are left untouched)
===================================================================== */
html.sr-dark .sr-app-wrap { background: var(--srd-bg) !important; }
html.sr-dark .sr-app-title { color: var(--srd-text) !important; }
html.sr-dark .sr-app-desc { color: var(--srd-muted) !important; }
html.sr-dark .sr-app-features li { color: var(--srd-body) !important; }
html.sr-dark .sr-app-eyebrow {
background: var(--srd-card) !important;
border-color: var(--srd-line) !important;
color: var(--srd-accent) !important;
box-shadow: none !important;
}
/* FAQ panel that is themed to match the app block background */
html.sr-dark .accordion-panel,
html.sr-dark .accordion-panel .accordion,
html.sr-dark .accordion-panel .accordion.ac-active,
html.sr-dark .accordion-panel .panel { background: var(--srd-bg) !important; }
/* =====================================================================
WHY SHOPRITE (.sr-why — was #ffffff with #f6f4f9 cards)
===================================================================== */
html.sr-dark .sr-why { background: var(--srd-bg2) !important; }
html.sr-dark .sr-why-title { color: var(--srd-text) !important; }
html.sr-dark .sr-why-title .sr-why-accent { color: var(--srd-accent) !important; }
html.sr-dark .sr-why-sub { color: var(--srd-muted) !important; }
html.sr-dark .sr-why-card {
background: var(--srd-card) !important;
border-color: var(--srd-line) !important;
}
html.sr-dark .sr-why-card:hover {
background: var(--srd-card2) !important;
border-color: var(--srd-accent) !important;
box-shadow: 0 20px 40px -16px rgba(0,0,0,.55) !important;
}
html.sr-dark .sr-why-card h4 { color: var(--srd-text) !important; }
html.sr-dark .sr-why-card p { color: var(--srd-muted) !important; }
/* .sr-why-icon gradient badge is kept as-is */
/* =====================================================================
GENERAL QUESTIONS / FAQ (.sr-gq — was #f6f4f9 with white items)
===================================================================== */
html.sr-dark .sr-gq { background: var(--srd-bg) !important; }
html.sr-dark .sr-gq-title { color: var(--srd-text) !important; }
html.sr-dark .sr-gq-item {
background: var(--srd-card) !important;
border-color: var(--srd-line) !important;
}
html.sr-dark .sr-gq-item[open] { border-color: var(--srd-accent) !important; }
html.sr-dark .sr-gq-item > summary { color: var(--srd-text) !important; }
html.sr-dark .sr-gq-item > summary::after { border-color: var(--srd-accent) !important; }
html.sr-dark .sr-gq-a { color: var(--srd-muted) !important; }
/* =====================================================================
"PREMIUM MEMBER BENEFITS" strip above the footer (.shipping_wrap)
===================================================================== */
html.sr-dark .shipping_wrap,
html.sr-dark .shipping { background: var(--srd-bg2) !important; }
html.sr-dark .shipping h6,
html.sr-dark .shipping h6 span { color: var(--srd-muted) !important; }
/* =====================================================================
MOBILE APP BAR (#sr-appbar — was white)
===================================================================== */
html.sr-dark #sr-appbar {
background: var(--srd-bg2) !important;
border-bottom-color: var(--srd-line) !important;
}
html.sr-dark #sr-appbar .sr-name { color: var(--srd-text) !important; }
html.sr-dark #sr-appbar .sr-sub { color: var(--srd-muted) !important; }
/* Stats band, member-stories band, CTA band and the footer are already
dark/vivid by design and are intentionally NOT overridden here. */
/* ============================================================================
DARK-MODE TOGGLE (header pill row)
----------------------------------------------------------------------------
Intentionally NOT styled here. The toggle markup built by srHomeDark() is
identical to the account toggle (button.sr-dark-toggle.sr-dark-toggle--header
inside li.sr-dark-toggle-li), and account-pages.css — which loads on every
page including the homepage — already styles those exact classes globally
(track 64x32 #e6e3ef / #3a2d52 dark, white knob -> #7330b3 purple in dark,
amber sun, grey/light moon). Letting those rules win keeps the homepage
toggle PIXEL-IDENTICAL to the members-area dashboard toggle. Any override
added here would only make the two diverge again, so this block is left
empty on purpose.
============================================================================ */
/* ============================================================================
LOGIN PAGE DARK MODE (/customer/account/login/ — body.customer-account-login)
----------------------------------------------------------------------------
The login page was excluded from the members dark toggle, so account-pages.css
has NO dark rules for it. head.phtml's srMembersDark now opts the login page
back in (injects the toggle + applies html.sr-dark early from the shared
'srMembersDark' key). These rules give the page a dark treatment that matches
the members-area palette (#191c22 page/cards, #20242c inputs, #2b303a borders,
#e8eaf0 ink, #9aa0ad muted, #c8aef0 lavender accent). They live here because
dark-site.css loads on every page AFTER account-pages.css, so the html.sr-dark
prefix + later cascade reliably beats the !important light rules. Scoped to
body.customer-account-login so nothing else is touched.
============================================================================ */
/* page + structural wrappers */
html.sr-dark body.customer-account-login { background:#191c22 !important; }
/* eyebrow heading above the cards */
html.sr-dark body.customer-account-login #outer_breadcrumb h1 { color:#9aa0ad !important; }
/* The breadcrumb section carries a full-width divider line under the eyebrow
(a light grey rule in the light theme). In dark mode it stayed light and read
as a harsh white streak across the page, so recolour it to the dark line
token and clear any light background, matching the register page treatment. */
html.sr-dark body.customer-account-login #outer_breadcrumb,
html.sr-dark body.customer-account-login #outer_breadcrumb .breadcrumb {
background:transparent !important; border-color:#2b303a !important;
}
html.sr-dark body.customer-account-login #outer_breadcrumb { border-bottom-color:#2b303a !important; }
html.sr-dark body.customer-account-login .mid-account { border-top-color:#2b303a !important; }
/* both cards */
html.sr-dark body.customer-account-login .account-login {
background:#191c22 !important;
border-color:#2b303a !important;
box-shadow:0 6px 20px -10px rgba(0,0,0,.7) !important;
}
/* card headings + divider */
html.sr-dark body.customer-account-login .account-login h2,
html.sr-dark body.customer-account-login .account-login .legend {
color:#e8eaf0 !important;
border-bottom-color:#2b303a !important;
}
/* labels + required asterisk */
html.sr-dark body.customer-account-login .account-login label,
html.sr-dark body.customer-account-login .account-login .form-list li label { color:#c3c8d4 !important; }
html.sr-dark body.customer-account-login .account-login label em { color:#ff7a7a !important; }
/* inputs */
html.sr-dark body.customer-account-login .account-login input.input-text,
html.sr-dark body.customer-account-login .account-login .form-list li input.input-text {
background:#20242c !important;
color:#e8eaf0 !important;
border-color:#2b303a !important;
}
html.sr-dark body.customer-account-login .account-login input.input-text:focus {
border-color:#c8aef0 !important;
box-shadow:0 0 0 3px rgba(200,174,240,.18) !important;
}
html.sr-dark body.customer-account-login .account-login input.input-text::placeholder { color:#6b7280 !important; }
/* forgot-password link */
html.sr-dark body.customer-account-login .forgotpassword a,
html.sr-dark body.customer-account-login .account-login .forgotpassword a { color:#c8aef0 !important; }
html.sr-dark body.customer-account-login .forgotpassword a:hover,
html.sr-dark body.customer-account-login .account-login .forgotpassword a:hover { color:#dcc8f7 !important; }
/* primary Sign In button keeps its purple gradient — only deepen the shadow */
html.sr-dark body.customer-account-login .account-login.pro-login .buttons-set button.button {
box-shadow:0 6px 16px -6px rgba(0,0,0,.6) !important;
}
/* secondary (Register) outlined button -> lavender on dark */
html.sr-dark body.customer-account-login .account-login:not(.pro-login) .buttons-set button.button {
background:transparent !important;
color:#c8aef0 !important;
border-color:#c8aef0 !important;
}
html.sr-dark body.customer-account-login .account-login:not(.pro-login) .buttons-set button.button:hover {
background:rgba(200,174,240,.10) !important;
border-color:#dcc8f7 !important;
color:#dcc8f7 !important;
}
/* Register card benefit list */
html.sr-dark body.customer-account-login .account-login .min-col p { color:#9aa0ad !important; }
html.sr-dark body.customer-account-login .account-login .min-col ul li {
color:#e8eaf0 !important;
border-bottom-color:#2b303a !important;
}
html.sr-dark body.customer-account-login .account-login .min-col ul li a { color:#c8aef0 !important; }
/* "Forgot which email?" help block (JS-injected into the Sign In card) */
html.sr-dark body.customer-account-login .login-help-block { border-top-color:#2b303a !important; }
html.sr-dark body.customer-account-login .login-help-heading { color:#e8eaf0 !important; }
html.sr-dark body.customer-account-login .login-help-text { color:#9aa0ad !important; }
html.sr-dark body.customer-account-login .login-help-link { color:#c8aef0 !important; }
html.sr-dark body.customer-account-login .login-help-link:hover { color:#dcc8f7 !important; }
/* flash messages (success / error / notice) -> dark-tinted, not bright pastel */
html.sr-dark body.customer-account-login .messages .success-msg,
html.sr-dark body.customer-account-login ul.messages .success-msg,
html.sr-dark body.customer-account-login .success-msg {
background:#13251a !important; border-color:#1f5132 !important;
border-left-color:#2f9e4d !important; color:#9be3b0 !important;
box-shadow:none !important;
}
html.sr-dark body.customer-account-login .messages .error-msg,
html.sr-dark body.customer-account-login ul.messages .error-msg,
html.sr-dark body.customer-account-login .error-msg {
background:#2a1416 !important; border-color:#5c2126 !important;
border-left-color:#d63838 !important; color:#f3a8a8 !important;
box-shadow:none !important;
}
html.sr-dark body.customer-account-login .messages .notice-msg,
html.sr-dark body.customer-account-login ul.messages .notice-msg,
html.sr-dark body.customer-account-login .notice-msg {
background:#2a2110 !important; border-color:#5c4a1f !important;
border-left-color:#d39022 !important; color:#f0cd8a !important;
box-shadow:none !important;
}
/* End login-page dark mode */
/* ============================================================================
LOGOUT-SUCCESS PAGE DARK MODE (/customer/account/logoutSuccess/)
----------------------------------------------------------------------------
This page has no custom restyle in account-pages.css — it uses Magento's
default markup and auto-redirects to the homepage after a few seconds. The
generic wrapper rules above already darken the page background and base text
once html.sr-dark is set (head.phtml now opts this page in). These add the
finishing touches so the heading, links and any continue button read on dark.
Scoped to body.customer-account-logoutsuccess. If the live markup uses a
different class for any element, send a screenshot and I'll target it.
============================================================================ */
html.sr-dark body.customer-account-logoutsuccess { background:#191c22 !important; }
/* headings (page-title / std) */
html.sr-dark body.customer-account-logoutsuccess .page-title h1,
html.sr-dark body.customer-account-logoutsuccess .col-main h1,
html.sr-dark body.customer-account-logoutsuccess .col-main h2,
html.sr-dark body.customer-account-logoutsuccess .col-main .std h1,
html.sr-dark body.customer-account-logoutsuccess .col-main .std h2 { color:#e8eaf0 !important; }
/* body copy */
html.sr-dark body.customer-account-logoutsuccess .col-main,
html.sr-dark body.customer-account-logoutsuccess .col-main .std,
html.sr-dark body.customer-account-logoutsuccess .col-main .std p,
html.sr-dark body.customer-account-logoutsuccess .col-main p { color:#cdd0d6 !important; }
/* links + any continue button */
html.sr-dark body.customer-account-logoutsuccess .col-main a { color:#c8aef0 !important; }
html.sr-dark body.customer-account-logoutsuccess .col-main a:hover { color:#dcc8f7 !important; }
html.sr-dark body.customer-account-logoutsuccess .buttons-set button.button,
html.sr-dark body.customer-account-logoutsuccess .col-main button.button {
background:linear-gradient(135deg,#7330b3 0%,#5a2390 100%) !important;
color:#ffffff !important; border-color:transparent !important;
}
/* any hardcoded white content box -> dark card */
html.sr-dark body.customer-account-logoutsuccess .col-main .std,
html.sr-dark body.customer-account-logoutsuccess .account-create,
html.sr-dark body.customer-account-logoutsuccess .col-main .box {
background:transparent !important;
}
/* End logout-success dark mode */
/* ============================================================================
REGISTER PAGE (customer-account-create) — dark mode
----------------------------------------------------------------------------
The membership registration form is stock-Magento-rendered (not a CMS page
with its own dark block), so it gets a complete self-contained dark block
here, the same way the login page does. Scoped entirely to
body.customer-account-create so it can never touch another page. Covers the
breadcrumb heading, the form card, every label/input/select, the Union
autocomplete dropdown (which ships hardcoded white inline styles), the
#result union panel, the State-select tooltip, the captcha box, the JS-built
terms checkbox proxy, validation errors and the submit button. head.phtml now
opts this page in (removed from the no-flash noDark list + a create re-include
in srMembersDark). If any element still reads light, send a screenshot and
I'll target it. (added 2026-06-11)
============================================================================ */
/* breadcrumb / page heading */
html.sr-dark body.customer-account-create #outer_breadcrumb { background:transparent !important; }
html.sr-dark body.customer-account-create #outer_breadcrumb h1 { color:#e8eaf0 !important; }
html.sr-dark body.customer-account-create #outer_breadcrumb .breadcrumb ul,
html.sr-dark body.customer-account-create #outer_breadcrumb .breadcrumb li { color:#9aa0ad !important; }
html.sr-dark body.customer-account-create #outer_breadcrumb a { color:#c8aef0 !important; }
/* form shells: keep the outer section transparent (page bg shows), make the
article the dark card */
html.sr-dark body.customer-account-create section.inner_mid_part { background:transparent !important; }
html.sr-dark body.customer-account-create article.personal-details {
background:#1c2029 !important; border-color:#2b303a !important;
}
/* section sub-headings + intro note */
html.sr-dark body.customer-account-create .personal-details-heading h4 { color:#e8eaf0 !important; }
html.sr-dark body.customer-account-create .personal-details-heading h4 span,
html.sr-dark body.customer-account-create .personal-details-heading h4 span span { color:#9aa0ad !important; }
html.sr-dark body.customer-account-create p.note,
html.sr-dark body.customer-account-create #form-validate > p { color:#cdd0d6 !important; }
/* labels + required asterisks */
html.sr-dark body.customer-account-create label { color:#c3c8d4 !important; }
html.sr-dark body.customer-account-create label span,
html.sr-dark body.customer-account-create label em { color:#ff7a7a !important; }
/* inputs / selects / captcha / union search box */
html.sr-dark body.customer-account-create input.input-text,
html.sr-dark body.customer-account-create select,
html.sr-dark body.customer-account-create #search_org_box,
html.sr-dark body.customer-account-create #txtcaptcha {
background:#20242c !important; background-color:#20242c !important;
color:#f0f1f5 !important; border-color:#2b303a !important;
}
html.sr-dark body.customer-account-create input.input-text::placeholder,
html.sr-dark body.customer-account-create #search_org_box::placeholder,
html.sr-dark body.customer-account-create #txtcaptcha::placeholder { color:#6b7280 !important; }
html.sr-dark body.customer-account-create input.input-text:focus,
html.sr-dark body.customer-account-create select:focus,
html.sr-dark body.customer-account-create #search_org_box:focus,
html.sr-dark body.customer-account-create #txtcaptcha:focus {
border-color:#c8aef0 !important; box-shadow:0 0 0 3px rgba(200,174,240,.18) !important; outline:none !important;
}
html.sr-dark body.customer-account-create select option { background:#20242c !important; color:#f0f1f5 !important; }
/* State select specifically. It sits in , whose
light rule paints a white background, and #region (id) outranks the generic
"select" rule above — so target both the wrapper and the select by id, and
double html.sr-dark to clear the light cascade. */
html.sr-dark body.customer-account-create .form-row .input-box.help { background:transparent !important; }
html.sr-dark html.sr-dark body.customer-account-create #region,
html.sr-dark body.customer-account-create .input-box.help #region,
html.sr-dark body.customer-account-create select#region {
background:#20242c !important; background-color:#20242c !important;
color:#f0f1f5 !important; border-color:#2b303a !important;
}
/* the "?" help bubble next to the State select */
html.sr-dark body.customer-account-create .input-box.help .que { color:#c8aef0 !important; }
/* Union/Organisation autocomplete dropdown — overrides the inline white box */
html.sr-dark body.customer-account-create #org_suggesstion-box {
background:#20242c !important; color:#cdd0d6 !important; border-color:#2b303a !important;
box-shadow:0 10px 30px rgba(0,0,0,.45) !important;
}
html.sr-dark body.customer-account-create #org_suggesstion-box li,
html.sr-dark body.customer-account-create #org_suggesstion-box div,
html.sr-dark body.customer-account-create #org_suggesstion-box a,
html.sr-dark body.customer-account-create #org_suggesstion-box span { color:#cdd0d6 !important; background:transparent !important; }
html.sr-dark body.customer-account-create #org_suggesstion-box li:hover,
html.sr-dark body.customer-account-create #org_suggesstion-box a:hover { background:#262b34 !important; color:#f0f1f5 !important; }
/* #result union info panel (AJAX) + loading text */
html.sr-dark body.customer-account-create #result,
html.sr-dark body.customer-account-create #result * { color:#cdd0d6 !important; }
html.sr-dark body.customer-account-create #result .content,
html.sr-dark body.customer-account-create #result .box { background:transparent !important; }
html.sr-dark body.customer-account-create #LoadingImage { color:#9aa0ad !important; }
/* State-select helper tooltip (.que / .tip) */
html.sr-dark body.customer-account-create .que .tip,
html.sr-dark body.customer-account-create .tip,
html.sr-dark body.customer-account-create .tip p {
background:#20242c !important; color:#cdd0d6 !important; border-color:#2b303a !important;
}
/* Captcha box. The equation in #logoindivCaptcha renders as an image with a
baked-in white background (the captcha JS writes it in), so CSS can't recolour
it dark — instead we frame it as a deliberate light "chip" with rounded
corners and padding so it reads as intentional rather than a white leak. */
html.sr-dark body.customer-account-create .captcha-box { background:transparent !important; }
html.sr-dark body.customer-account-create #logoindivCaptcha {
color:#1f2430 !important; background:#eef0f4 !important; border-radius:8px !important;
padding:6px 12px !important; box-shadow:0 1px 2px rgba(0,0,0,.35) !important;
}
html.sr-dark body.customer-account-create #logoindivCaptcha img { mix-blend-mode:multiply; }
html.sr-dark body.customer-account-create .captcha-box .red { color:#c8aef0 !important; }
html.sr-dark body.customer-account-create #captchamsg { color:#ff7a7a !important; }
/* Terms & Conditions checkbox + JS-built proxy. The light-mode rule for the
proxy carries higher specificity, so we match it with the .terms-check-box
ancestor + a doubled html.sr-dark to win without resorting to brittle hacks. */
html.sr-dark body.customer-account-create .terms-check-box .yes { color:#cdd0d6 !important; }
html.sr-dark body.customer-account-create .terms-check-box .yes span { color:#ff7a7a !important; }
html.sr-dark body.customer-account-create .terms-link { color:#c8aef0 !important; }
html.sr-dark html.sr-dark body.customer-account-create .terms-check-box .terms-proxy-checkbox,
html.sr-dark body.customer-account-create .terms-check-box .terms-proxy-checkbox {
background:#20242c !important; background-color:#20242c !important;
border:1px solid #3a4150 !important;
}
html.sr-dark body.customer-account-create .terms-check-box .terms-proxy-checkbox.is-checked {
background:linear-gradient(135deg,#7330b3,#5a2390) !important;
background-color:#7330b3 !important; border-color:transparent !important;
}
/* the checkmark glyph (drawn via ::after by account-pages.css) stays white so it
reads on both the dark empty box and the purple checked state */
html.sr-dark body.customer-account-create .terms-check-box .terms-proxy-checkbox::after { border-color:#ffffff !important; color:#ffffff !important; }
/* validation errors */
html.sr-dark body.customer-account-create .validation-advice { color:#ff7a7a !important; }
/* submit button stays on brand gradient */
html.sr-dark body.customer-account-create #form-validate button.button,
html.sr-dark body.customer-account-create button.button {
background:linear-gradient(135deg,#7330b3 0%,#5a2390 100%) !important;
color:#ffffff !important; border-color:transparent !important;
}
/* End register page dark mode */
/* ==========================================================================
PEST CONTROL partner page dark mode (body.cms-pest-control-html,
added 2026-06-12, v20260612i): self-contained .sr-pest landing page.
KEPT AS DESIGNED (already dark-native): the hero (brown-black gradient
with red radials) and the red member-offer strip. Everything light goes
to the srd palette; Perth Pest's brand red #c8102e is lifted to #ff6b7d
for small text/accents so it passes contrast on dark cards.
========================================================================== */
/* page chrome: hide the purple header SVG, blank the theme wrappers */
html.sr-dark body.cms-pest-control-html .svg-bg { display: none !important; }
html.sr-dark body.cms-pest-control-html #outer_mid_inner,
html.sr-dark body.cms-pest-control-html .mid_inner,
html.sr-dark body.cms-pest-control-html .main-container,
html.sr-dark body.cms-pest-control-html .std { background: transparent !important; }
/* base canvas + section rhythm (white sections -> bg2, grey sections -> bg) */
html.sr-dark body.cms-pest-control-html .sr-pest { background: var(--srd-bg) !important; color: var(--srd-text) !important; }
html.sr-dark body.cms-pest-control-html .sr-pest-why,
html.sr-dark body.cms-pest-control-html .sr-pest-about { background: var(--srd-bg2) !important; }
html.sr-dark body.cms-pest-control-html .sr-pest-services,
html.sr-dark body.cms-pest-control-html .sr-pest-community,
html.sr-dark body.cms-pest-control-html .sr-pest-contact { background: var(--srd-bg) !important; }
/* headings + copy */
html.sr-dark body.cms-pest-control-html .sr-pest__title,
html.sr-dark body.cms-pest-control-html .sr-pest-about h2,
html.sr-dark body.cms-pest-control-html .sr-pest-community h2 { color: var(--srd-text) !important; }
html.sr-dark body.cms-pest-control-html .sr-pest__sub { color: var(--srd-muted) !important; }
html.sr-dark body.cms-pest-control-html .sr-pest-about p,
html.sr-dark body.cms-pest-control-html .sr-pest-community p { color: var(--srd-body) !important; }
html.sr-dark body.cms-pest-control-html .sr-pest-community__sign { color: var(--srd-text) !important; }
html.sr-dark body.cms-pest-control-html .sr-pest-community__sign small { color: var(--srd-muted) !important; }
/* eyebrows: lift the brand red for dark, but keep the hero's white one */
html.sr-dark body.cms-pest-control-html .sr-pest__eyebrow { color: #ff6b7d !important; }
html.sr-dark body.cms-pest-control-html .sr-pest-hero__eyebrow { color: rgba(255,255,255,.85) !important; }
/* why cards */
html.sr-dark body.cms-pest-control-html .sr-pest-card {
background: var(--srd-card) !important; border-color: var(--srd-line) !important;
box-shadow: 0 1px 3px rgba(0,0,0,.4) !important;
}
html.sr-dark body.cms-pest-control-html .sr-pest-card:hover {
box-shadow: 0 20px 40px -14px rgba(0,0,0,.65) !important;
border-color: rgba(255,107,125,.45) !important;
}
html.sr-dark body.cms-pest-control-html .sr-pest-card h3 { color: var(--srd-text) !important; }
html.sr-dark body.cms-pest-control-html .sr-pest-card p { color: var(--srd-body) !important; }
html.sr-dark body.cms-pest-control-html .sr-pest-card a { color: #ff6b7d !important; }
html.sr-dark body.cms-pest-control-html .sr-pest-card__ico,
html.sr-dark body.cms-pest-control-html .sr-pest-detail__ico {
background: rgba(200,16,46,.18) !important; color: #ff8a98 !important;
}
/* service cards (page forces h3 #15110f !important — this outranks it) */
html.sr-dark body.cms-pest-control-html .sr-pest-svc {
background: var(--srd-card) !important; border-color: var(--srd-line) !important;
border-top-color: #c8102e !important; box-shadow: 0 1px 3px rgba(0,0,0,.4) !important;
}
html.sr-dark body.cms-pest-control-html .sr-pest-svc:hover { box-shadow: 0 24px 46px -16px rgba(0,0,0,.7) !important; }
html.sr-dark body.cms-pest-control-html .sr-pest-svc__img { background: var(--srd-card2) !important; }
html.sr-dark body.cms-pest-control-html .sr-pest-svc__tag { color: #ff6b7d !important; }
html.sr-dark body.cms-pest-control-html .sr-pest-svc h3 { color: var(--srd-text) !important; }
html.sr-dark body.cms-pest-control-html .sr-pest-svc p { color: var(--srd-body) !important; }
/* guarantee chip */
html.sr-dark body.cms-pest-control-html .sr-pest-guarantee {
background: rgba(200,16,46,.14) !important; border-color: rgba(200,16,46,.38) !important;
color: #ffb3bd !important;
}
html.sr-dark body.cms-pest-control-html .sr-pest-guarantee svg { color: #ff6b7d !important; }
/* contact: detail + form cards */
html.sr-dark body.cms-pest-control-html .sr-pest-detailcard,
html.sr-dark body.cms-pest-control-html .sr-pest-formcard {
background: var(--srd-card) !important; border-color: var(--srd-line) !important;
box-shadow: 0 4px 16px rgba(0,0,0,.45) !important;
}
html.sr-dark body.cms-pest-control-html .sr-pest-detailcard h3,
html.sr-dark body.cms-pest-control-html .sr-pest-formcard h3 { color: var(--srd-text) !important; }
html.sr-dark body.cms-pest-control-html .sr-pest-detailcard > p,
html.sr-dark body.cms-pest-control-html .sr-pest-formcard > p { color: var(--srd-muted) !important; }
html.sr-dark body.cms-pest-control-html .sr-pest-detail { border-top-color: var(--srd-line) !important; }
html.sr-dark body.cms-pest-control-html .sr-pest-detail__lbl { color: var(--srd-muted) !important; }
html.sr-dark body.cms-pest-control-html .sr-pest-detail__val,
html.sr-dark body.cms-pest-control-html .sr-pest-detail__val a { color: var(--srd-text) !important; }
html.sr-dark body.cms-pest-control-html .sr-pest-detail__val small { color: var(--srd-muted) !important; }
html.sr-dark body.cms-pest-control-html .sr-pest-phone,
html.sr-dark body.cms-pest-control-html .sr-pest-phone a { color: #ff6b7d !important; }
/* partner logo (white JPG): deliberate white plate so it doesn't float raw on dark */
html.sr-dark body.cms-pest-control-html .sr-pest-detailcard__logo { border-top-color: var(--srd-line) !important; }
html.sr-dark body.cms-pest-control-html .sr-pest-detailcard__logo img {
background: #ffffff !important; padding: 10px 16px !important; border-radius: 12px !important;
height: 78px !important; box-sizing: border-box !important;
}
/* embedded webform (selectors outrank the page's #webform_16_form rules) */
html.sr-dark body.cms-pest-control-html #webform_16_form h2.legend { color: var(--srd-text) !important; }
html.sr-dark body.cms-pest-control-html #webform_16_form label,
html.sr-dark body.cms-pest-control-html #webform_16_form .label { color: var(--srd-body) !important; }
html.sr-dark body.cms-pest-control-html #webform_16_form .required,
html.sr-dark body.cms-pest-control-html #webform_16_form .required em,
html.sr-dark body.cms-pest-control-html #webform_16_form em,
html.sr-dark body.cms-pest-control-html #webform_16_form label span { color: #ff6b7d !important; }
html.sr-dark body.cms-pest-control-html #webform_16_form input[type="text"],
html.sr-dark body.cms-pest-control-html #webform_16_form input[type="email"],
html.sr-dark body.cms-pest-control-html #webform_16_form input[type="tel"],
html.sr-dark body.cms-pest-control-html #webform_16_form input[type="number"],
html.sr-dark body.cms-pest-control-html #webform_16_form input.input-text,
html.sr-dark body.cms-pest-control-html #webform_16_form textarea,
html.sr-dark body.cms-pest-control-html #webform_16_form select {
background: var(--srd-card2) !important; background-color: var(--srd-card2) !important;
border-color: var(--srd-line) !important; color: var(--srd-text) !important;
}
html.sr-dark body.cms-pest-control-html #webform_16_form input:focus,
html.sr-dark body.cms-pest-control-html #webform_16_form textarea:focus,
html.sr-dark body.cms-pest-control-html #webform_16_form select:focus {
border-color: #ff6b7d !important; box-shadow: 0 0 0 3px rgba(255,107,125,.18) !important;
}
html.sr-dark body.cms-pest-control-html #webform_16_form #webform_16_progress_text { color: var(--srd-body) !important; }
html.sr-dark body.cms-pest-control-html #webform_16_success_text {
background: rgba(200,16,46,.12) !important; border-color: rgba(200,16,46,.32) !important;
color: var(--srd-text) !important;
}
html.sr-dark body.cms-pest-control-html #webform_16_success_text * { color: var(--srd-text) !important; }
/* End pest control page dark mode */
/* ==========================================================================
OFX partner page dark mode (body.cms-ofx-html, added 2026-06-12,
v20260612j): self-contained .sr-ofx international-money-transfer landing.
KEPT AS DESIGNED (already dark-native): the navy hero, the navy app
banner and the navy trust band all read well on a dark page and are
on-brand, so they are left untouched. Everything light flips — the page's
own --ink / --muted / --line / --soft vars are remapped to the shared srd
palette (so OFX tracks any future global dark-palette change), the white
benefit / step / offer cards become dark panels, and the handful of navy
foregrounds (eyebrow, card link, offer badge, ghost button) are lifted to
light or to OFX's brand gold var(--gold) #ff5100 so they stay visible.
========================================================================== */
/* remap the page's own custom properties onto the shared dark palette */
html.sr-dark body.cms-ofx-html .sr-ofx {
--ink: var(--srd-text); /* headings + body text on the page background */
--muted: var(--srd-muted); /* secondary text */
--line: var(--srd-line); /* borders / dividers */
--soft: var(--srd-bg); /* light grey band, if ever used */
}
/* white cards -> dark panels */
html.sr-dark body.cms-ofx-html .sr-ofx .bcard,
html.sr-dark body.cms-ofx-html .sr-ofx .offer,
html.sr-dark body.cms-ofx-html .sr-ofx .step {
background: var(--srd-card) !important;
border-color: var(--srd-line) !important;
}
html.sr-dark body.cms-ofx-html .sr-ofx .bcard:hover {
border-color: var(--gold) !important;
box-shadow: 0 16px 36px rgba(0,0,0,.45) !important;
}
/* navy-as-foreground bits would vanish on dark -> lighten or accent each */
html.sr-dark body.cms-ofx-html .sr-ofx .shead .kick { color: #aab2c2 !important; }
html.sr-dark body.cms-ofx-html .sr-ofx .bcard .lnk { color: var(--gold) !important; }
html.sr-dark body.cms-ofx-html .sr-ofx .bcard .lnk svg { stroke: var(--gold) !important; }
html.sr-dark body.cms-ofx-html .sr-ofx .offer .badge { color: var(--gold) !important; }
html.sr-dark body.cms-ofx-html .sr-ofx .offer .foot b { color: var(--srd-text) !important; }
/* offer checklist chips -> solid gold so the ticks stay crisp on a dark card */
html.sr-dark body.cms-ofx-html .sr-ofx .offer ul .ck { background: var(--gold) !important; }
/* ghost button: navy text + faint line -> light text + a visible outline */
html.sr-dark body.cms-ofx-html .sr-ofx .btn-ghost {
color: var(--srd-text) !important; border-color: #39414e !important;
}
html.sr-dark body.cms-ofx-html .sr-ofx .btn-ghost:hover {
border-color: var(--gold) !important; background: rgba(255,255,255,.05) !important;
}
/* member-support card (signed-in only): white card -> dark panel; the navy
avatar / badge / contact-row text would disappear on dark, so lift them to
gold or light. The card icons are already gold and need no change. */
html.sr-dark body.cms-ofx-html .sr-ofx .help-card {
background: var(--srd-card) !important; border-color: var(--srd-line) !important;
}
html.sr-dark body.cms-ofx-html .sr-ofx .help-badge { color: var(--gold) !important; }
html.sr-dark body.cms-ofx-html .sr-ofx .help-avatar { background: var(--gold) !important; color: var(--p) !important; }
html.sr-dark body.cms-ofx-html .sr-ofx .help-row { color: var(--srd-text) !important; border-color: var(--srd-line) !important; }
html.sr-dark body.cms-ofx-html .sr-ofx .help-row:hover { border-color: var(--gold) !important; }
/* End OFX page dark mode */
/* ==========================================================================
UNION LANDING PAGES dark mode — shared template, per-page accent.
The union benefit pages share ONE html structure but each has its own
namespace + brand palette, so each gets its own scoped block:
.sr-wapu (wapu.html) — WA Police Union, navy/blue -> accent #8fc0f0
.sr-hsuwa (hsuwa.html) — purple-branded -> accent --srd-accent
.sr-cpsu (community-...-of-wa.html) — CPSU/CSA, navy/red -> accent #ff5b4d
.sr-fcawa (fcawa.html) — FCAWA, teal/emerald -> accent #5ad1b4
In every block the coloured hero, app banner and trust band, the white offer
card on the hero, and all brand buttons + icon tiles are KEPT AS DESIGNED
(they already read correctly on dark); only the light/neutral surfaces are
recoloured. Scoped to the namespace, not the body class. To add a new union
page: copy a block, swap the namespace + accent, gate its URL in head.phtml.
----------------------------------------------------------------------------
WAPU (.sr-wapu) — WA Police Union, navy/blue, accent #8fc0f0 (2026-06-14)
========================================================================== */
/* base body text (the namespace sets a dark --ink colour we must lift) */
html.sr-dark .sr-wapu{color:var(--srd-body) !important;}
/* "How it works" band: light blue-grey -> dark surface */
html.sr-dark .sr-wapu .how{background:var(--srd-bg) !important;}
/* section headers + final CTA copy */
html.sr-dark .sr-wapu .shead h2,
html.sr-dark .sr-wapu .final h2{color:var(--srd-text) !important;}
html.sr-dark .sr-wapu .shead p,
html.sr-dark .sr-wapu .final p{color:var(--srd-muted) !important;}
html.sr-dark .sr-wapu .shead .kick{color:#8fc0f0 !important;}
/* benefit cards: white -> dark card */
html.sr-dark .sr-wapu .bcard{background:var(--srd-card) !important;border-color:var(--srd-line) !important;}
html.sr-dark .sr-wapu .bcard h3{color:var(--srd-text) !important;}
html.sr-dark .sr-wapu .bcard p{color:var(--srd-muted) !important;}
html.sr-dark .sr-wapu .bcard .lnk{color:#8fc0f0 !important;}
html.sr-dark .sr-wapu .bcard .lnk svg{stroke:#8fc0f0 !important;}
/* steps: white -> dark card */
html.sr-dark .sr-wapu .step{background:var(--srd-card) !important;border-color:var(--srd-line) !important;}
html.sr-dark .sr-wapu .step h3{color:var(--srd-text) !important;}
html.sr-dark .sr-wapu .step p{color:var(--srd-muted) !important;}
/* ghost button (final CTA): navy text/border would vanish on dark */
html.sr-dark .sr-wapu .btn-ghost{color:var(--srd-text) !important;border-color:var(--srd-line) !important;}
html.sr-dark .sr-wapu .btn-ghost:hover{background:var(--srd-card) !important;border-color:#8fc0f0 !important;color:#fff !important;}
/* End WAPU page dark mode */
/* ==========================================================================
HSUWA (.sr-hsuwa) — purple brand (--p #6a3190, crimson + pink accents),
same template as .sr-wapu above. Uses the site lavender (--srd-accent
#c8aef0) for dark accents so it keeps its purple identity. KEPT AS DESIGNED:
purple hero / app banner / trust band, white offer card, purple/crimson/
white buttons + icon tiles. Only the light/neutral surfaces below change.
(added 2026-06-14)
========================================================================== */
html.sr-dark .sr-hsuwa{color:var(--srd-body) !important;}
html.sr-dark .sr-hsuwa .how{background:var(--srd-bg) !important;}
html.sr-dark .sr-hsuwa .shead h2,
html.sr-dark .sr-hsuwa .final h2{color:var(--srd-text) !important;}
html.sr-dark .sr-hsuwa .shead p,
html.sr-dark .sr-hsuwa .final p{color:var(--srd-muted) !important;}
html.sr-dark .sr-hsuwa .shead .kick{color:var(--srd-accent) !important;}
html.sr-dark .sr-hsuwa .bcard{background:var(--srd-card) !important;border-color:var(--srd-line) !important;}
html.sr-dark .sr-hsuwa .bcard h3{color:var(--srd-text) !important;}
html.sr-dark .sr-hsuwa .bcard p{color:var(--srd-muted) !important;}
html.sr-dark .sr-hsuwa .bcard .lnk{color:var(--srd-accent) !important;}
html.sr-dark .sr-hsuwa .bcard .lnk svg{stroke:var(--srd-accent) !important;}
html.sr-dark .sr-hsuwa .step{background:var(--srd-card) !important;border-color:var(--srd-line) !important;}
html.sr-dark .sr-hsuwa .step h3{color:var(--srd-text) !important;}
html.sr-dark .sr-hsuwa .step p{color:var(--srd-muted) !important;}
html.sr-dark .sr-hsuwa .btn-ghost{color:var(--srd-text) !important;border-color:var(--srd-line) !important;}
html.sr-dark .sr-hsuwa .btn-ghost:hover{background:var(--srd-card) !important;border-color:var(--srd-accent) !important;color:#fff !important;}
/* End HSUWA page dark mode */
/* ==========================================================================
CPSU/CSA (.sr-cpsu) — Community & Public Sector Union / Civil Service
Association of WA. Navy brand (--p #002f5d) with a red accent (--gold
#ee3226), same template as .sr-wapu / .sr-hsuwa above. Dark accent is a
lifted red (#ff5b4d) so it reads on dark cards (the raw #ee3226 fails AA)
while keeping CPSU's red identity. KEPT AS DESIGNED: navy hero / app banner /
trust band, white offer card, navy/red/white buttons + icon tiles. Only the
light/neutral surfaces below change. (added 2026-06-14)
========================================================================== */
html.sr-dark .sr-cpsu{color:var(--srd-body) !important;}
html.sr-dark .sr-cpsu .how{background:var(--srd-bg) !important;}
html.sr-dark .sr-cpsu .shead h2,
html.sr-dark .sr-cpsu .final h2{color:var(--srd-text) !important;}
html.sr-dark .sr-cpsu .shead p,
html.sr-dark .sr-cpsu .final p{color:var(--srd-muted) !important;}
html.sr-dark .sr-cpsu .shead .kick{color:#ff5b4d !important;}
html.sr-dark .sr-cpsu .bcard{background:var(--srd-card) !important;border-color:var(--srd-line) !important;}
html.sr-dark .sr-cpsu .bcard h3{color:var(--srd-text) !important;}
html.sr-dark .sr-cpsu .bcard p{color:var(--srd-muted) !important;}
html.sr-dark .sr-cpsu .bcard .lnk{color:#ff5b4d !important;}
html.sr-dark .sr-cpsu .bcard .lnk svg{stroke:#ff5b4d !important;}
html.sr-dark .sr-cpsu .step{background:var(--srd-card) !important;border-color:var(--srd-line) !important;}
html.sr-dark .sr-cpsu .step h3{color:var(--srd-text) !important;}
html.sr-dark .sr-cpsu .step p{color:var(--srd-muted) !important;}
html.sr-dark .sr-cpsu .btn-ghost{color:var(--srd-text) !important;border-color:var(--srd-line) !important;}
html.sr-dark .sr-cpsu .btn-ghost:hover{background:var(--srd-card) !important;border-color:#ff5b4d !important;color:#fff !important;}
/* End CPSU/CSA page dark mode */
/* ==========================================================================
FCAWA (.sr-fcawa) — Financial Counsellors' Association of WA. Teal brand
(--p #0e6b5e) with an emerald accent (--gold #1f9d76), same template as the
union pages above. Dark accent is a light emerald (#5ad1b4) so it reads on
dark cards (the brand teal is too dark). KEPT AS DESIGNED: teal hero / app
banner / trust band, white offer card, teal/emerald/white buttons + icon
tiles. Only the light/neutral surfaces below change. (added 2026-06-14)
========================================================================== */
html.sr-dark .sr-fcawa{color:var(--srd-body) !important;}
html.sr-dark .sr-fcawa .how{background:var(--srd-bg) !important;}
html.sr-dark .sr-fcawa .shead h2,
html.sr-dark .sr-fcawa .final h2{color:var(--srd-text) !important;}
html.sr-dark .sr-fcawa .shead p,
html.sr-dark .sr-fcawa .final p{color:var(--srd-muted) !important;}
html.sr-dark .sr-fcawa .shead .kick{color:#5ad1b4 !important;}
html.sr-dark .sr-fcawa .bcard{background:var(--srd-card) !important;border-color:var(--srd-line) !important;}
html.sr-dark .sr-fcawa .bcard h3{color:var(--srd-text) !important;}
html.sr-dark .sr-fcawa .bcard p{color:var(--srd-muted) !important;}
html.sr-dark .sr-fcawa .bcard .lnk{color:#5ad1b4 !important;}
html.sr-dark .sr-fcawa .bcard .lnk svg{stroke:#5ad1b4 !important;}
html.sr-dark .sr-fcawa .step{background:var(--srd-card) !important;border-color:var(--srd-line) !important;}
html.sr-dark .sr-fcawa .step h3{color:var(--srd-text) !important;}
html.sr-dark .sr-fcawa .step p{color:var(--srd-muted) !important;}
html.sr-dark .sr-fcawa .btn-ghost{color:var(--srd-text) !important;border-color:var(--srd-line) !important;}
html.sr-dark .sr-fcawa .btn-ghost:hover{background:var(--srd-card) !important;border-color:#5ad1b4 !important;color:#fff !important;}
/* End FCAWA page dark mode */