/* ==========================================================================
GPF Sitewide Consistency Styles — gpf-consistency.css
--------------------------------------------------------------------------
CSS-only, fully reversible restyle. Two independent tasks, one feature flag.
Task A — News page hero (/forklift-news/, the blog posts index).
Restyle the hero to match the Clients-page hero treatment
(cover background image, section height, title type/spacing).
Scoped to: body.blog
Task B — Content Page template pages (page-content-page.php).
Bring BODY typography + section spacing into line with the
client look (heading sizes, line/letter spacing, section
padding). The hero is explicitly NOT touched.
Scoped to: body.page-template-page-content-page
--------------------------------------------------------------------------
ENABLE / DISABLE
--------------------------------------------------------------------------
This file is enqueued by gpf_enqueue_consistency_styles() in the child
theme functions.php, gated behind one boolean flag. Set that flag to false
(or define GPF_CONSISTENCY_STYLES as false) to disable EVERYTHING here in
one move. Deleting this file + removing the enqueue is a complete removal.
--------------------------------------------------------------------------
CASCADE NOTE (why these selectors are body-class scoped)
--------------------------------------------------------------------------
header.php prints css/gpf-styles.css as a raw AFTER wp_head(), so an
enqueued stylesheet (this file) prints earlier in . We therefore win
the cascade by SPECIFICITY, not source order: every rule below is prefixed
with a body class (body.blog / body.page-template-page-content-page), which
adds a class to the selector and reliably beats the bare-class rules in
gpf-styles.css, the parent style.css, and Customizer "Additional CSS".
--------------------------------------------------------------------------
PER-PAGE OPT-OUT (Task B surgical rollback)
--------------------------------------------------------------------------
The Task B scope below is written as a single chained selector prefix:
body.page-template-page-content-page:not(.page-id-237)
The homepage (page id 237) is excluded BY DEFAULT (it has its own design
direction). To drop any other single page from Task B, append another
:not(.page-id-XXX) to EVERY Task B selector prefix (find/replace the
prefix string). Documented exclusion list:
237 — Homepage (excluded by default; decide separately whether to include)
Reference values captured from the Clients page hero + Homepage v2 sections
(gpf-styles.css) and recorded in the handoff report.
========================================================================== */
/* ==========================================================================
TASK A — NEWS PAGE HERO (scope: body.blog)
--------------------------------------------------------------------------
News hero markup (home.php):
(real , not a bg)
...
Clients-hero targets (from gpf-styles.css):
section bg colour ........ #1a1a1a, image cover / center center
inner min-height ......... 524px desktop / 492px <=768 & <=600
content .................. left-aligned, vertically centred,
1400px container, 20px gutters, max-width 640px
title (h1) ............... 44px / line-height 1.1 / weight 800 / #fff
(32px at <=600); letter-spacing normal
text legibility .......... text-shadow 0 1px 3px rgba(0,0,0,.45)
The clients hero applies the image as a CSS background; here the News markup
already ships a real , so we treat that as the cover layer
(object-fit) — no ACF / content / image change required (reversible).
========================================================================== */
body.blog .greenpower_archive_hero.greenpower_blog_archive_hero {
position: relative; /* positioning context for the cover image */
clear: both;
display: block;
width: 100%;
overflow: hidden;
background-color: #1a1a1a; /* matches clients hero base colour */
font-family: Lato, sans-serif;
box-sizing: border-box;
}
/* Existing becomes the cover background layer (clients = size:cover,
position:center center). */
body.blog .greenpower_archive_hero .greenpower_archive_hero_image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
object-fit: cover;
object-position: center center;
display: block;
z-index: 0;
}
/* The clients hero has no dark overlay (it relies on text-shadow). The News
image is lighter, so we keep the existing overlay element as a light scrim
for legibility — the ONE intentional deviation from the clients hero. To
match the clients hero exactly (no scrim), set this to transparent. */
body.blog .greenpower_archive_hero .greenpower_archive_hero_overlay {
position: absolute;
inset: 0;
z-index: 1;
background: rgba(0, 0, 0, 0.32);
}
/* Content layer — vertically centred, left-aligned, 1400px container, the
clients hero min-height + padding + text-shadow. */
body.blog .greenpower_archive_hero .greenpower_archive_hero_inner {
position: relative;
z-index: 2;
max-width: 1400px;
margin: 0 auto;
padding: 40px 20px;
min-height: 524px; /* clients desktop height */
display: flex;
flex-direction: column;
align-items: flex-start; /* horizontally left */
justify-content: center; /* vertically centred */
text-align: left;
box-sizing: border-box;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
body.blog .greenpower_archive_hero .greenpower_archive_hero_inner h1 {
margin: 0;
max-width: 640px;
font-family: Lato, sans-serif;
font-size: 44px; /* clients hero title */
line-height: 1.1;
letter-spacing: normal;
font-weight: 800;
color: #ffffff;
}
/* Tablet / mobile — clients hero uses 492px and a 32px title at <=600. */
@media (max-width: 768px) {
body.blog .greenpower_archive_hero .greenpower_archive_hero_inner {
min-height: 492px;
}
}
@media (max-width: 600px) {
body.blog .greenpower_archive_hero .greenpower_archive_hero_inner {
min-height: 492px;
}
body.blog .greenpower_archive_hero .greenpower_archive_hero_inner h1 {
font-size: 32px;
}
}
/* Edge-to-edge container above the 1400px breakpoint, matching the clients hero. */
@media (min-width: 1441px) {
body.blog .greenpower_archive_hero .greenpower_archive_hero_inner {
padding-left: 0;
padding-right: 0;
}
}
/* ==========================================================================
TASK B — CONTENT PAGE TEMPLATE TYPOGRAPHY & SPACING
--------------------------------------------------------------------------
Scope prefix (homepage id 237 excluded by default — see header):
body.page-template-page-content-page:not(.page-id-237)
HERO IS NOT TOUCHED: every rule targets .section:not(.section-hero), and
the component sections that carry their own client styling (trust-factors /
usps, which use .gpf-* classes and do NOT use .inner-container) are
untouched because all rules are scoped under .inner-container.
Client look reference (Homepage v2 sections, gpf-styles.css):
section heading (h2) ..... 36px / 1.2 / weight 700 / #151515 / mb 24px
sub heading (h3) ....... 28px / 1.25 / weight 700 / #151515
body text ................ line-height 1.6
container ................ max-width 1400px (already matches .inner-container)
Parent defaults being aligned (1rem = 10px via html{font-size:62.5%}):
h1 3.2rem(32) h2 2.8rem(28) h3 2.4rem(24) h4 2rem(20) h5 1.8rem(18)
headings color #24333e, margin 0 0 15px
========================================================================== */
/* --- Headings: client sizes, weight, colour, line-height, letter-spacing --- */
body.page-template-page-content-page:not(.page-id-237) .section:not(.section-hero) .inner-container h1 {
font-size: 40px;
line-height: 1.15;
letter-spacing: normal;
font-weight: 700;
color: #151515;
margin: 0 0 24px;
}
body.page-template-page-content-page:not(.page-id-237) .section:not(.section-hero) .inner-container h2 {
font-size: 36px;
line-height: 1.2;
letter-spacing: normal;
font-weight: 700;
color: #151515;
margin: 0 0 24px;
}
body.page-template-page-content-page:not(.page-id-237) .section:not(.section-hero) .inner-container h3 {
font-size: 28px;
line-height: 1.25;
letter-spacing: normal;
font-weight: 700;
color: #151515;
margin: 0 0 16px;
}
body.page-template-page-content-page:not(.page-id-237) .section:not(.section-hero) .inner-container h4 {
font-size: 22px;
line-height: 1.3;
letter-spacing: normal;
font-weight: 700;
color: #151515;
margin: 0 0 14px;
}
body.page-template-page-content-page:not(.page-id-237) .section:not(.section-hero) .inner-container h5 {
font-size: 18px;
line-height: 1.4;
letter-spacing: normal;
font-weight: 700;
color: #151515;
margin: 0 0 12px;
}
body.page-template-page-content-page:not(.page-id-237) .section:not(.section-hero) .inner-container h6 {
font-size: 16px;
line-height: 1.4;
letter-spacing: normal;
font-weight: 700;
color: #151515;
margin: 0 0 12px;
}
/* --- Body copy: client line-height + neutral letter-spacing (colour left as-is) --- */
body.page-template-page-content-page:not(.page-id-237) .section:not(.section-hero) .inner-container p,
body.page-template-page-content-page:not(.page-id-237) .section:not(.section-hero) .inner-container li {
line-height: 1.6;
letter-spacing: normal;
}
/* --- Section sizing / padding: gentle harmonisation toward the airier client
rhythm. Bare .section gets full-width 1400px content already via
.inner-container, so we only tune vertical spacing here. --- */
body.page-template-page-content-page:not(.page-id-237) .section:not(.section-hero).section-margin-default {
margin-bottom: 60px;
}
body.page-template-page-content-page:not(.page-id-237) .section:not(.section-hero).section-bg-light {
padding: 60px 0;
}
/* --- Mobile heading scale-down (mirrors the clients hero responsive intent) --- */
@media (max-width: 600px) {
body.page-template-page-content-page:not(.page-id-237) .section:not(.section-hero) .inner-container h1 {
font-size: 30px;
}
body.page-template-page-content-page:not(.page-id-237) .section:not(.section-hero) .inner-container h2 {
font-size: 28px;
}
body.page-template-page-content-page:not(.page-id-237) .section:not(.section-hero) .inner-container h3 {
font-size: 22px;
}
}