/*
* Responsive pass over the company / content / misc pages.
*
* Loaded only where inc/content-responsive.php puts `acl-content-resp` on
* , and every selector below repeats that class, so nothing here can
* reach the homepage, the /service/* singles, the machine pages or the area
* pages. assets/css/style.css is a minified build artefact and
* acclaim-revamp.css is shared with several other passes, so neither is touched
* - this file exists for the same reason acclaim-revamp.css does.
*
* Four viewports were measured for every rule: 1440x900, 768x1024, 375x812 and
* 844x390. Numbers in the comments are from those, in Chrome, on the dev pod.
*
* The house pattern for type here is clamp(min, vw, max). The faults being
* fixed are all the same shape - a pixel size chosen once for a wide screen,
* written inline by WPBakery or into a rule with no media query, and then
* carried unchanged down to a 375px phone. A clamp gives the min and max the
* design already implies and lets everything between fall out of the viewport
* width, which is what "scales fluidly" has to mean if it is to survive the
* next viewport nobody tested.
*/
/* ==========================================================================
1. About us - the figures band
--------------------------------------------------------------------------
acclaim-revamp.css rebuilt this band as a 5 / 3 / 2 column grid with proper
breakpoints, then closed the file with
.page-id-147 .counter_sec h4 { font-size: 46px !important; }
at the root, AFTER the max-width:767px block. Later in source order at equal
specificity, so the figure stayed 46px at every width - measured 46px at
1440, 768, 844 AND 375.
At 375 the grid is two columns of 120px. "10 years" needs 168px at 46px, so
it broke onto two lines, pushed its own cell 60px taller than its neighbour
and left the band visibly ragged with the fifth figure orphaned.
clamp floor 27px keeps "10 years" on one line inside a 120px cell; the 46px
ceiling is the value the band was designed at and is reached by ~740px.
========================================================================== */
body.acl-content-resp.page-id-147 .counter_sec h4 {
font-size: clamp(27px, 6.2vw, 46px) !important;
line-height: 1.1 !important;
}
/* The caption under each figure was sized for a 5-across desktop row. In a
120px cell it wraps to five lines; 14px brings it to three. */
@media (max-width: 575px) {
body.acl-content-resp.page-id-147 .counter_sec p {
font-size: 14px !important;
line-height: 20px !important;
}
}
/* ==========================================================================
2. The WPBakery intro band - #welcome_sec, 4 / 8 split
--------------------------------------------------------------------------
Stored in the content of Careers, Training, Forklift training near me,
News & guides and Equipment maintenance. A heading column ranged right
against a body column, with the headings written inline at 45px and 30px and
the column given padding-right:50px by a vc_custom class.
Bootstrap's .vc_col-sm-4 stays a third of the row from 768px up. Measured at
768: the column is 256px wide, 50px of that is padding, so 45px type is
trying to set in 191px - "Equipment" alone filled a line and "Maintenance &
Repairs" took two more. Same at 844 landscape.
Below 768 the columns stack full width and the band is fine, which is why
this is bounded at both ends rather than being a max-width rule.
About us is excluded: acclaim-revamp.css rebuilt its #welcome_sec into a
single centred column with its own type scale, and this would fight it.
========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
/* The orange rule between the two columns is drawn by
.welcome_sec .vc_col-sm-8:after at left:-35px, i.e. 35px INSIDE the
heading column rather than on the boundary. At full width the 50px
padding cleared it with room to spare; at 768 it does not, and simply
trimming the padding walked the heading straight through the rule
(measured: heading box ended at 238, rule at 221).
So the rule moves to the boundary it is meant to mark and the padding is
set from there: rule at 250, heading ends at 236, body copy starts at 271.
Nothing overlaps and the gap either side of the rule is even. */
body.acl-content-resp:not(.page-id-147) #welcome_sec > .vc_col-sm-8:after {
left: -6px !important;
}
body.acl-content-resp:not(.page-id-147) #welcome_sec > .vc_col-sm-4 > .vc_column-inner {
padding-right: 20px !important;
}
body.acl-content-resp:not(.page-id-147) #welcome_sec > .vc_col-sm-4 h1,
body.acl-content-resp:not(.page-id-147) #welcome_sec > .vc_col-sm-4 h2 {
font-size: clamp(22px, 3.5vw, 34px) !important;
line-height: 1.16 !important;
}
/* The eyebrow above them is 16px with line-height:16px, which clips its own
descenders once it wraps - and at this width it always wraps. */
body.acl-content-resp:not(.page-id-147) #welcome_sec > .vc_col-sm-4 h6 {
font-size: 14px !important;
line-height: 1.35 !important;
}
}
/* ==========================================================================
3. Bare Bootstrap rows on the training_category archives
--------------------------------------------------------------------------
taxonomy-training_category.php opens three sections as
with no .container between them. Bootstrap gives .row margin:0 -15px on the
assumption a container's 15px padding will cancel it. Nothing does, so each
row runs 15px past both edges and the global body{overflow-x:hidden} clips
it - no scrollbar, no warning, the right-hand 15px of every line simply gone.
Measured at 768 and 844: .welcome_sec > .row ran to 783 and 859 against
viewports of 768 and 844, and the body copy lost its last word on most lines.
Zeroing the row margin is the fix rather than padding the section, because
the columns already carry the matching 15px padding - the gutter comes back
and the text stops at the edge instead of under it.
========================================================================== */
body.acl-content-resp.tax-training_category .welcome_sec > .row,
body.acl-content-resp.tax-training_category .contact-cat-section > .row,
body.acl-content-resp.tax-training_category .tranning-cat-section > .row {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Same shape on a news post and on a career post: single.php and
single-career_post.php both open .post_banner_bottom with a bare .row. */
body.acl-content-resp .post_banner_bottom > .row {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* ==========================================================================
4. The SEO FAQ block on news posts
--------------------------------------------------------------------------
Same 15px loss, one layer deeper, and already diagnosed in full at
inc/category-layout.php:378 - style.css sets
.faq-Sectionnew .container{padding-left:0;padding-right:0} and
seo-sections.php sets .acl-seo-faq{padding:36px 0}, so once again nothing
cancels the nested row's -15px margins.
That file restored the padding for the listing pages it owns. The same block
renders on the restyled news posts, which it does not own, so the fix has
never reached them: measured 15px over at 1440, 768, 844 and 375 on
/what-is-a-pallet-truck/ and /reach-truck-vs-forklift/.
This is the identical one-liner, scoped to posts. The shared defect in
seo-sections.php is reported rather than edited.
========================================================================== */
body.acl-content-resp.single-post .acl-seo-faq .container {
padding-left: 15px;
padding-right: 15px;
}
/* The FAQ heading is a flat 45px. In a 375px column that is one word per line;
measured box width 375 against a 45px "Pallet truck FAQs". */
body.acl-content-resp.single-post .acl-seo-faq .container > .row > .col-md-12 > h2 {
font-size: clamp(26px, 5.2vw, 45px) !important;
line-height: 1.15 !important;
}
/* ==========================================================================
5. Tables written into post content without a scroll wrapper
--------------------------------------------------------------------------
Eleven posts carry a . Ten of them are either narrow enough to fit or
wrapped in div.table-responsive, which scrolls and is the right answer.
/how-do-i-find-out-what-forklift-is-right-for-my-operation/ has neither: the
table lays out at 399px inside a 375px viewport, so 49px - the whole of the
last column's right edge - is clipped away by body{overflow-x:hidden} with
no way to reach it.
Markup cannot be added from CSS, so the table itself becomes the scroll
container. display:block is what makes overflow apply to it at all; without
that line overflow-x on a table box is ignored, which is exactly the trap
.table-responsive falls into when it is put on the instead of a
wrapper (see the privacy policy, where it happens to work only because the
class also sets display:block).
Bounded to 767 and below so the desktop table keeps real table layout.
========================================================================== */
@media (max-width: 767px) {
body.acl-content-resp.single-post .blog_content_sec table,
body.acl-content-resp.single-post .acl-rich table {
display: block;
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* A scroll container with no visible edge reads as truncated rather than
scrollable, so the right edge gets a hairline to sit against. */
body.acl-content-resp.single-post .blog_content_sec table,
body.acl-content-resp.single-post .acl-rich table {
border-right: 1px solid #e6e6e6;
}
}
/* ==========================================================================
6. Headings written inline at a desktop size and never scaled
--------------------------------------------------------------------------
WPBakery writes style="font-size:70px" onto the element. An inline
declaration outranks any stylesheet rule that is not !important, which is why
the theme's own mobile rules never landed on these three.
Measured:
Thank you h1 70px at 768 and at 844x390 - half the landscape
fold spent on two words
Contact us h1 45px in a 375px column
Workplace inclusivity h1 40px in a 345px column
Each keeps its designed maximum and gains a floor and a slope.
========================================================================== */
/* Thank you */
body.acl-content-resp.page-id-667 .wpb-content-wrapper h1.vc_custom_heading {
font-size: clamp(30px, 5vw, 70px) !important;
line-height: 1.1 !important;
}
/* Contact us */
body.acl-content-resp.page-id-218 .wpb-content-wrapper h1.vc_custom_heading {
font-size: clamp(28px, 4.4vw, 45px) !important;
line-height: 1.14 !important;
}
/* Workplace inclusivity */
body.acl-content-resp.page-id-21804 .wpb-content-wrapper h1 {
font-size: clamp(27px, 4.2vw, 40px) !important;
line-height: 1.16 !important;
}
/* ==========================================================================
8. Related posts on a blog post - the button
--------------------------------------------------------------------------
Scope note: there are TWO blocks in this theme called .recent-blog-post.
single.php .recent-blog-post + .blog_post_sliders (a slick
carousel, cards with a .read-more-tag button)
inc/seo-sections.php .recent-blog-post + .acl-seo-news (a plain
3-column grid, whole card is one link, NO button)
Only the first has a button, and it renders on blog posts and nowhere else.
The second is shared with the listing and restyled pages, so every selector
below hangs off .blog_post_sliders and cannot reach it.
The fault, measured at 1440:
.read-more-tag a is an inline with padding:15px 25px and
border-radius:51px. Given a label longer than the card, it wrapped - and an
inline box that wraps paints its background as one fragment per line, with
the horizontal padding applied only at the very start and the very end. So
the pill split into two offset lozenges, the text sat outside them, and the
whole thing hung past the card's right edge on cards 1 and 3. At 375 it
overflowed both edges.
The label itself is fixed in single.php. These rules make the button
structurally incapable of breaking again whatever the label says.
========================================================================== */
body.acl-content-resp .blog_post_sliders .read-more-tag a {
/* inline-block is the load-bearing line: one unbreakable box, so the pill
is drawn once and the padding applies all the way round. */
display: inline-block;
white-space: nowrap;
/* Never wider than the card it sits in, whatever the label. 30px is the
card's own 15px side padding, doubled. */
max-width: calc(100% - 30px);
overflow: hidden;
text-overflow: ellipsis;
vertical-align: top;
box-sizing: border-box;
}
/* Equal card heights, so the absolutely-positioned buttons share one baseline
no matter how the titles fall. The title is already clamped to two lines by
-webkit-line-clamp, so this holds the line even if that clamp is ever lifted.
slick floats its slides; making the track a flex row is what lets a slide
stretch to the tallest in view. */
body.acl-content-resp .blog_post_sliders .slick-track {
display: flex;
align-items: stretch;
}
body.acl-content-resp .blog_post_sliders .slick-slide {
height: auto;
}
body.acl-content-resp .blog_post_sliders .slick-slide > div,
body.acl-content-resp .blog_post_sliders .blog_post_slider,
body.acl-content-resp .blog_post_sliders .blog_releted-description-box {
height: 100%;
}
/* .read-more-tag is position:absolute at bottom:23px, which is what aligns the
buttons; the description needs to reserve that strip so a three-line title
can never run underneath one. */
body.acl-content-resp .blog_post_sliders .blog_releted_description {
position: relative;
padding-bottom: 78px;
box-sizing: border-box;
}
/* ==========================================================================
9. 404
--------------------------------------------------------------------------
h1.entry-title is 70px from 768px up. At 844x390 - a phone held sideways -
the icon and those three words filled the entire fold and every recovery link
sat below it, which is the one thing this page exists to show.
Two rules: a fluid size, and a tighter pass when the viewport is short as
well as wide, since that is the case the flat 70px was worst for.
========================================================================== */
body.acl-content-resp.error404 .error404-content h1.entry-title {
font-size: clamp(30px, 4.8vw, 70px) !important;
line-height: 1.1 !important;
}
@media (max-height: 500px) and (orientation: landscape) {
/* Measured at 844x390 before this block: the first recovery link sat at
y=515 against a 390 fold, so a visitor who hit a dead URL saw an apology
and nothing else without scrolling. The three costs above it were 100px of
container padding, a 62px icon and a 70px heading.
After: first link at ~344, inside the fold, with the whole list and the
Back to home button reachable without scrolling. */
body.acl-content-resp.error404 .error404-content {
padding-top: 24px !important;
}
body.acl-content-resp.error404 .error404-content h1.entry-title {
font-size: 30px !important;
margin-bottom: 10px !important;
}
body.acl-content-resp.error404 .error404-content .intro-text {
margin-bottom: 14px !important;
}
/* The sad face above it is the other half of the problem, and it is a font
icon () rather than an image - so it is sized by
font-size, not by height. */
body.acl-content-resp.error404 .error404-content .fa-frown {
font-size: 42px !important;
margin-bottom: 6px !important;
}
}
/* ==========================================================================
10. Training Terms & Conditions (page 29194)
--------------------------------------------------------------------------
This page carries no page template, so it falls through to the parent theme's
singular.php and renders as a bare Twenty Twenty article - .entry-header,
.post-inner.thin, .entry-content - none of which the child theme styles.
Nothing had gone wrong; the page had simply never been dressed.
Measured before, at 1440:
.entry-content 1440px wide, starting at x=0 no measure, no padding
body copy 15px / 29px, margin-bottom 0 no paragraph spacing
section h2 32px, margin-top 0 no separation
p.acl-terms-clause padding-left 0 numbers run into the text
ul li no marker, no indent the global reset
*,li,ol,ul{margin:0;padding:0}
leaves nowhere for a marker
to sit, so the two bullet
lists read as loose sentences
characters per line 192 against a 45-75 comfortable range
The treatment is deliberately plain: a legal document people scroll to check
one clause in, not a landing page. Measure, rhythm, hierarchy, a hanging
indent for the clause numbers so a reader can run an eye down them, and the
brand present only as a rule - never as ink. That last point is the palette's
own rule in acclaim-revamp.css: #f68b1f is 2.43:1 on white and fails AA at
any size, so here it is a material (bars, borders, list markers) and never a
text colour.
The document structure comes from scripts/build-training-terms-html.php,
which is why there is a class to hook: the clause numbers are written into
the markup as N.M because Word numbering cannot be
reproduced by nested , and clause numbers in a contract have to read
exactly as the signed document does. So they are styled here, never generated.
========================================================================== */
/* --- 1. measure and page gutter --------------------------------------- */
body.acl-content-resp.page-id-29194 .entry-content,
body.acl-content-resp.page-id-29194 .entry-header-inner {
/* ~72 characters at the body size set below, inside the comfortable range at
every width. The header takes the same value so the title sits on the same
left edge as the text under it. */
max-width: 820px;
margin-left: auto;
margin-right: auto;
/* Never edge to edge: 20px on a phone, 32px from tablet up. */
padding-left: clamp(20px, 4vw, 32px);
padding-right: clamp(20px, 4vw, 32px);
box-sizing: border-box;
}
body.acl-content-resp.page-id-29194 .post-inner {
padding-top: 0;
}
body.acl-content-resp.page-id-29194 .entry-content {
padding-bottom: 56px;
/* A long unbroken reference or URL in a clause must not be able to push the
column wider than the screen. */
overflow-wrap: break-word;
}
/* --- 2. the page title ------------------------------------------------ */
body.acl-content-resp.page-id-29194 .entry-header {
padding-top: 40px;
padding-bottom: 0;
}
body.acl-content-resp.page-id-29194 h1.entry-title {
font-size: clamp(27px, 3.6vw, 42px) !important;
line-height: 1.14;
margin: 0 0 10px;
}
/* --- 3. the document's own title, which is the first h2 --------------- */
/*
* The .docx opens with its formal title and the import keeps it as an h2 so the
* document reads as it was signed. Two h2s of different rank in a row is a
* hierarchy problem, so this one is set as a subtitle: smaller than the h1,
* lighter, and closed with the one piece of brand on the page.
*/
body.acl-content-resp.page-id-29194 .entry-content > h2:first-child {
font-size: clamp(15px, 1.6vw, 18px) !important;
line-height: 1.45;
font-weight: 400;
letter-spacing: .01em;
text-align: center;
color: #4a4a4a;
max-width: 44em;
margin: 0 auto 34px;
padding: 0 0 22px;
border: 0;
position: relative;
}
body.acl-content-resp.page-id-29194 .entry-content > h2:first-child::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 56px;
height: 3px;
background: var(--acl-orange, #f68b1f);
}
/* --- 4. numbered sections --------------------------------------------- */
/*
* The heading text already carries its number ("2. Training Services") because
* it has to match the signed document, so the accent cannot hang off a
* generated counter. A hairline with a short orange bar sitting on it gives
* each section a visible start without competing with the words.
*/
body.acl-content-resp.page-id-29194 .entry-content > h2:not(:first-child) {
font-size: clamp(20px, 2.1vw, 26px) !important;
line-height: 1.25;
font-weight: 700;
color: #1a1a1a;
margin: 46px 0 16px;
padding-top: 22px;
border-top: 1px solid #e6e0da;
position: relative;
}
body.acl-content-resp.page-id-29194 .entry-content > h2:not(:first-child)::before {
content: "";
position: absolute;
top: -2px;
left: 0;
width: 44px;
height: 3px;
background: var(--acl-orange, #f68b1f);
}
/* --- 5. body copy ------------------------------------------------------ */
body.acl-content-resp.page-id-29194 .entry-content p {
font-size: clamp(15.5px, 1.15vw, 17px);
line-height: 1.75;
margin: 0 0 16px;
color: #23282d;
}
/* --- 6. clauses: a hanging indent, which is the readability win -------- */
/*
* padding-left pushes the wrapped lines in; the matching negative text-indent
* pulls the first line - and therefore the number - back out into the
* gutter that padding just created. The result is a column of clause numbers a
* reader can run an eye down, with the prose aligned beside it, at no cost in
* markup.
*/
body.acl-content-resp.page-id-29194 .entry-content p.acl-terms-clause {
padding-left: 3.5em;
text-indent: -3.5em;
margin-bottom: 14px;
}
/*
* :first-child matters. Three clauses carry a SECOND mid-sentence -
* 3.2 "Thorough Examination Certificate", 5.4 "Note:", 10.1 "Customer
* Responsibility". Styling every in the clause turned those into
* inline-blocks in the middle of a sentence, which swallowed the space beside
* them and, inside a paragraph carrying a negative text-indent, painted "Note:"
* straight over the words before it. Only the clause number is the gutter.
*/
body.acl-content-resp.page-id-29194 .entry-content p.acl-terms-clause > strong:first-child {
/* min-width keeps "5.7" and "12.1" on one left edge; inline-block is what
lets a width apply at all without breaking the hanging indent. */
display: inline-block;
min-width: 2.9em;
font-weight: 700;
color: #1a1a1a;
/*
* This line is not optional. text-indent inherits, and an inline-block is a
* block container - so the paragraph's -3.5em was being applied a SECOND
* time, inside the number's own box, painting it 58px left of where the box
* sits. On desktop that put the numbers out in the page margin; at 375px it
* put them at x=-23, off the screen entirely, and every clause number on the
* page was invisible. Measured: the element box was correctly at x=20 while
* an element screenshot of it came back blank.
*/
text-indent: 0;
}
/* --- 7. the two bullet lists ------------------------------------------ */
/*
* style.css opens with *,li,ol,ul{margin:0;padding:0}. With no padding there is
* nowhere for a marker to sit, so both lists rendered as plain sentences and the
* cancellation charge schedule under clause 5.1 read as running prose. Restored
* locally rather than by touching that reset, which the whole site stands on.
*/
body.acl-content-resp.page-id-29194 .entry-content ul {
list-style: disc outside;
margin: 0 0 20px;
padding-left: 1.35em;
}
/* A list belonging to the clause above it lines up with that clause's text
rather than with the page margin. */
body.acl-content-resp.page-id-29194 .entry-content p.acl-terms-clause + ul {
padding-left: 4.6em;
}
body.acl-content-resp.page-id-29194 .entry-content ul li {
font-size: clamp(15.5px, 1.15vw, 17px);
line-height: 1.7;
margin: 0 0 8px;
padding: 0;
color: #23282d;
}
body.acl-content-resp.page-id-29194 .entry-content ul li::marker {
color: var(--acl-orange, #f68b1f);
}
/* --- 8. narrow screens ------------------------------------------------- */
@media (max-width: 575px) {
/* A 3.5em gutter is 12% of the column once the page padding is off a 375px
screen. Tightening it holds roughly 46 characters on a line, which is the
floor for comfortable reading. */
body.acl-content-resp.page-id-29194 .entry-content p.acl-terms-clause {
padding-left: 2.8em;
text-indent: -2.8em;
}
body.acl-content-resp.page-id-29194 .entry-content p.acl-terms-clause > strong:first-child {
min-width: 2.4em;
}
body.acl-content-resp.page-id-29194 .entry-content p.acl-terms-clause + ul {
padding-left: 3.6em;
}
body.acl-content-resp.page-id-29194 .entry-content > h2:not(:first-child) {
margin-top: 34px;
padding-top: 18px;
}
body.acl-content-resp.page-id-29194 .entry-header {
padding-top: 26px;
}
}
/* Phone held sideways: the viewport is short rather than narrow, so the measure
is already fine and only the vertical rhythm needs winding in. */
@media (max-height: 500px) and (orientation: landscape) {
body.acl-content-resp.page-id-29194 .entry-header {
padding-top: 22px;
}
body.acl-content-resp.page-id-29194 .entry-content > h2:not(:first-child) {
margin-top: 34px;
}
}
/* --- 9. print ---------------------------------------------------------- */
/*
* People print the terms they agreed to, or save them as a PDF. Without this it
* prints at the screen measure with the orange bars eating toner.
*/
@media print {
body.acl-content-resp.page-id-29194 .entry-content,
body.acl-content-resp.page-id-29194 .entry-header-inner {
max-width: none;
padding: 0;
}
body.acl-content-resp.page-id-29194 .entry-content p,
body.acl-content-resp.page-id-29194 .entry-content ul li {
font-size: 11pt;
line-height: 1.5;
color: #000;
}
/* A section heading stranded at the foot of a page, or a clause split across
two, is what makes a printed contract hard to cite. */
body.acl-content-resp.page-id-29194 .entry-content > h2 {
break-after: avoid;
page-break-after: avoid;
border-top-color: #999;
}
body.acl-content-resp.page-id-29194 .entry-content p.acl-terms-clause {
break-inside: avoid;
page-break-inside: avoid;
}
body.acl-content-resp.page-id-29194 .entry-content > h2::before,
body.acl-content-resp.page-id-29194 .entry-content > h2::after {
display: none;
}
}