/* ============================================================
IKON MOBILITY — WordPress overrides
------------------------------------------------------------
Loaded AFTER css/styles.css, so anything here wins.
The point of this file is that css/styles.css can be replaced
wholesale with a newer export from the static site without
losing these fixes. Do not move them into styles.css unless
you are also maintaining the static site, in which case put
them in both.
Each fix records what it is for, so nobody removes one later
without knowing what it was doing.
============================================================ */
/* ------------------------------------------------------------
1. Starfield respects reduced motion — WCAG 2.2.2
------------------------------------------------------------
The sparkle layers on body::before / body::after are animated
SVGs supplied as data URIs. Their @keyframes live INSIDE the
SVG document, so the global reduced-motion kill-switch in
styles.css cannot reach them — page CSS does not cascade into
an SVG used as a background-image.
Result without this rule: a visitor who has asked their
operating system for less motion gets a page where everything
correctly stops except the stars, which keep pulsing.
Hiding the two layers leaves the black background, the noise
texture and the coloured gradients intact, so the page still
looks deliberate rather than bare.
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
body::before,
body::after {
display: none;
}
}
/* ------------------------------------------------------------
2. Footer contrast — WCAG 1.4.3
------------------------------------------------------------
The audit measured the footer headings against #000000 and
concluded that switching them to --accent-bright (#ef4444)
would be close to passing. The footer is not black: it carries
footer-bg.webp behind a 50-62% overlay.
Measured against the actual photo, sampled across the whole
image at the 50% overlay used at the top of the footer:
#ef4444 headings min 1.09:1, median 3.13:1, 82% of the
area below the required 4.5:1
#ffffff body text min 4.12:1 — marginal in the lightest
corner
Two changes together fix it:
- deepen the overlay to 88-92%, which the photo survives
because it is texture rather than subject matter
- lighten the headings to #fca5a5
After both: headings min 7.04:1, body text min 13.37:1,
nothing below 4.5:1 anywhere in the footer.
------------------------------------------------------------ */
/* Fallback only. inc/social.php prints an inline rule in that
overrides this, built from the photo and overlay strength set at
Settings -> Site Settings -> Footer. This value is what shows if
that inline rule is ever missing. */
footer::before {
background:
linear-gradient(180deg,
rgba(10, 14, 26, 0.88) 0%,
rgba(10, 14, 26, 0.92) 100%),
url('../images/footer-bg.webp') center / cover no-repeat;
}
footer h3 {
color: #fca5a5;
}
/* ------------------------------------------------------------
3. Contact Form 7
------------------------------------------------------------
The existing form styling in styles.css targets bare elements —
form, form label, form input, form button. Contact Form 7 wraps
every field in extra markup and renders its submit control as
rather than