/* ═════════════════════════════════════════════════════════════════
⛔ LOCKED ⛔ — DO NOT MODIFY WITHOUT EXPLICIT CHARL APPROVAL
═════════════════════════════════════════════════════════════════
Charl explicitly approved this footer state on 2026-06-04 and
asked that it not be changed again. Verified across:
index.html (homepage reference)
contact.html, advertise.html, countries.html,
how-it-works.html, user-dashboard.html
All 6 pages now have BYTE-IDENTICAL computed CSS on:
- footer.pw-pwf-share-row (transparent bg, 0 border-radius)
- footer.pw-pwf-link (22x22, transparent)
- footer SVG icons (fill = #f0e8d5 cream, monochrome)
- .pw-pwf-block (transparent, no border, no margin)
- .pw-pwf-tagline (no border-top)
- .pw-pwf-wordmark-strip (#141B2B, matches rest of footer)
If a future task requires footer changes, ASK CHARL FIRST.
See _audit/_compare-footers.js + _audit/_inspect-icons.js to
re-verify computed-style parity before/after any edit.
═════════════════════════════════════════════════════════════════
Propworths Footer Flow Mode — mobile only (Charl 2026-06-03)
Match the homepage footer treatment on every page:
one continuous dark-navy stretch with no internal "card-on-card"
block boundaries (divider lines, floating boxes, darker bottom
strips). Loaded as a single tag right before .
Selectors target only .pw-pwf-* classes that already exist on
every page that includes the standard footer — no structural
change, just visual flattening. The Rev 3 social-icon rules use
the `body footer.pw-pwf ...` selector prefix specifically to beat
the inline Rev 2 (cream pill) blocks present on ~75 production
pages — DO NOT REMOVE THE `body ` PREFIX, it is load-bearing.
───────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
/* Brand block — keep 16px from the screen edges so it aligns with
the rest of the page content vertically. */
footer.pw-pwf .pw-pwf-brand {
padding-left: 16px !important;
padding-right: 16px !important;
}
/* "Share this page" — remove the divider line and the side offsets
so it flows straight into the next block. */
footer.pw-pwf .pw-pwf-share {
padding: 18px 16px 14px !important;
margin-left: 0 !important;
margin-right: 0 !important;
border-bottom: 0 !important;
}
/* "Follow Propworths" heading row + the inner regional grid blocks
— kill the side offset / floating-card look. Block backgrounds
become transparent so the surrounding navy shows through. */
footer.pw-pwf .pw-pwf-heading,
footer.pw-pwf .pw-pwf-block {
padding-left: 16px !important;
padding-right: 16px !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
footer.pw-pwf .pw-pwf-block,
footer.pw-pwf .pw-pwf-block-global {
background: transparent !important;
border: 0 !important;
}
footer.pw-pwf .pw-pwf-block {
padding-top: 6px !important;
padding-bottom: 6px !important;
}
/* "Listings across 185 countries" tagline — drop the gold divider
line above it. */
footer.pw-pwf .pw-pwf-tagline {
border-top: 0 !important;
padding: 10px 16px !important;
}
/* The very bottom wordmark strip used to be #0E1422 (slightly darker
than the rest of the footer) which read as a separate band.
Match it to the rest of the footer so there's no visible step. */
footer.pw-pwf .pw-pwf-wordmark-strip {
background: #141B2B !important;
padding: 14px 16px !important;
}
/* "Follow Propworths" expander pill — flatten the gold border so
it doesn't read as another floating card. */
footer.pw-pwf .pw-pwf-toggle {
margin: 10px 16px 4px !important;
width: calc(100% - 32px) !important;
background: transparent !important;
border-color: rgba(196, 164, 124, 0.25) !important;
}
}
/* ─────────────────────────────────────────────────────────────────
PLAIN MONOCHROMATIC SOCIAL ICONS — REV 3
(Charl 2026-06-02 / re-rolled-out 2026-06-03)
Property24 / Rola Motor Group style: no pill, no background,
no border, no brand colours. Just clean cream-white icon glyphs
sitting on the dark navy footer. Hover lifts to gold (#c4a47c).
The homepage's inline footer style block already had these rules,
but the other 76 pages did NOT — so their share row still showed
the old colored-icons-in-cream-pill look. Adding them here makes
them apply globally via the existing on every page.
No @media wrapper: rules apply at every viewport, matching the
homepage exactly. ────────────────────────────────────────────── */
body footer.pw-pwf .pw-pwf-share-row,
body footer.pw-pwf .pw-pwf-block-global .pw-pwf-row {
display: inline-flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: center !important;
gap: 22px !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
padding: 4px 0 !important;
box-shadow: none !important;
width: auto !important;
max-width: calc(100% - 16px) !important;
vertical-align: middle !important;
}
body footer.pw-pwf .pw-pwf-share-row .pw-pwf-link,
body footer.pw-pwf .pw-pwf-block-global .pw-pwf-link-global {
background: transparent !important;
background-color: transparent !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
margin: 0 !important;
font-size: 0 !important;
line-height: 0 !important;
letter-spacing: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
flex-grow: 0 !important;
min-width: 0 !important;
width: 26px !important;
height: 26px !important;
color: transparent !important;
text-decoration: none !important;
vertical-align: middle !important;
transition: transform 0.18s ease !important;
}
body footer.pw-pwf .pw-pwf-share-row .pw-pwf-link svg,
body footer.pw-pwf .pw-pwf-block-global .pw-pwf-link-global svg {
width: 26px !important;
height: 26px !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
flex-shrink: 0 !important;
vertical-align: middle !important;
fill: #f0e8d5 !important; /* override inline brand colour */
transition: fill 0.18s ease !important;
}
body footer.pw-pwf .pw-pwf-share-row .pw-pwf-link svg path,
body footer.pw-pwf .pw-pwf-block-global .pw-pwf-link-global svg path {
fill: inherit !important; /* path inherits fill from