/* ========================================================================== * Responsive pass over the product slice: machine-detail pages, model-range * (product_categories) pages, makes pages, and the equipment listing * templates. Loaded only on those pages - see inc/product-responsive.php, * which puts `acl-prod-resp` on . Every rule below is scoped to that * class, so nothing here can reach the homepage, areas, services or training. * * Scope note: the header, orange utility bar, main nav and footer are NOT * touched here. Neither is the category cross-sell rail. Both are owned * elsewhere; the two chrome defects found while measuring are written up in * the handover rather than patched here. * * Everything was measured on dev at 1440 / 915 / 768 / 375. Where a rule * changes a size, the desktop value is preserved exactly as the top of a * clamp() so the signed-off desktop layout does not move - only the narrow * end changes. * ========================================================================== */ /* -------------------------------------------------------------------------- * 1. Headings scale with the viewport * * Measured before: every heading on the category / makes / listing pages was * the SAME pixel size at 1440 and at 375 - * * .faq-Sectionnew h2 .............. 45px at all four widths * .faq-Sectionnew .card-header h3 . 28px at all four widths * .acl-seo-depots h2 / news h2 .... 32px at all four widths * .sidebar_section h2 ............. 35px at all four widths * * 45px on a 375px screen is 12% of the viewport width, and the FAQ heading * wrapped to three lines. The sizes come from three places: an explicit 45px * rule, an explicit 35px rule, and Bootstrap's `.h2,h2{font-size:2rem}` / * `.h3,h3{font-size:1.75rem}` defaults, which are rem and therefore fixed. * * Each clamp below is solved through two anchors - the current desktop size * at 1440px, and a readable size at 375px - so desktop is byte-identical and * the middle widths interpolate instead of stepping. * * These are deliberately written as an explicit list of selectors rather than * a blanket `h2` rule. A blanket rule would also catch the rail headings * (.acl-rail-h, 19px) and the rich-text headings (.acl-rich-h, 22px) and * GROW them, which is the opposite of the point. * ------------------------------------------------------------------------ */ /* 45px -> 26px */ body.acl-prod-resp #main-content .faq-Sectionnew .col-md-12.text-center h2, body.acl-prod-resp #main-content .recent-product h2, body.acl-prod-resp #main-content .welcome_sec h2.orange_text_teaxnomies { font-size: clamp(26px, 19.31px + 1.784vw, 45px); line-height: 1.2; } /* 35px -> 24px (filter sidebar heading) */ body.acl-prod-resp #main-content .sidebar_section h2 { font-size: clamp(24px, 20.13px + 1.033vw, 35px); line-height: 1.2; } /* Bootstrap 2rem default -> 22px..32px, only inside this slice's own sections */ body.acl-prod-resp #main-content .acl-seo-depots .acl-seo-h, body.acl-prod-resp #main-content .acl-seo-news h2, body.acl-prod-resp #main-content .tranning-cat-section h2 { font-size: clamp(22px, 18.48px + 0.939vw, 32px); line-height: 1.25; } /* Bootstrap 1.75rem default -> 19px..28px (FAQ question rows) */ body.acl-prod-resp #main-content .faq-Sectionnew .card-header h3 { font-size: clamp(19px, 15.83px + 0.845vw, 28px); line-height: 1.3; } /* WPBakery custom headings on the listing templates carry their size as an * inline style written into the page content - * *

* * so there is no stylesheet rule to lose to and !important is the only way in. * Surveyed across /products/, /product-search/, /forklifts/, /new-equipment/ * and /new-in-stock/, these are h1/h2 at 45px, h3 at 42px, and h6 at 16px. * The tag selectors below are what keeps the 16px h6 out of it - a blanket * .vc_custom_heading rule with a 23px floor would grow it by half again. / body.acl-prod-resp #main-content h1.vc_custom_heading, body.acl-prod-resp #main-content h2.vc_custom_heading { font-size: clamp(24px, 16.61px + 1.972vw, 45px) !important; line-height: 1.2; } body.acl-prod-resp #main-content h3.vc_custom_heading { font-size: clamp(23px, 16.31px + 1.784vw, 42px) !important; line-height: 1.2; } / Machine-detail page title: 45px flat from 1440 all the way down to 768, * then a single hard drop to 25px at 767. Made continuous, with the 45px * desktop value kept as the ceiling. * * The category/makes banner title (.contact-cat-section h1.title) is * deliberately NOT touched. acclaim-revamp.css pins it to 32px !important * below 992px as part of a rule that also covers .all_banner_bottom_sec and * .training_bottom_sec - i.e. one banner size shared across areas, services * and training. 32px at 375 is 8.5% of the viewport and does not overflow, so * there is nothing here worth breaking that consistency for. / body.acl-prod-resp #main-content .contact-product-section h1.title { font-size: clamp(26px, 19.31px + 1.784vw, 45px); line-height: 1.15; } / Machine-detail: the product name repeated above the spec table (30px flat * from 1440 down to 768, then 20px). / body.acl-prod-resp #main-content .product-single-description-box h3 { font-size: clamp(20px, 16.48px + 0.939vw, 30px); line-height: 1.25; } / Long machine names are a single unbroken token often enough (model codes, * fleet numbers) that they need an explicit break opportunity at 375. / body.acl-prod-resp #main-content .contact-product-section h1.title, body.acl-prod-resp #main-content .product-single-description-box h3, body.acl-prod-resp #main-content .main_box .description-box h3 { overflow-wrap: break-word; word-break: break-word; } / -------------------------------------------------------------------------- * 2. Card spec rows: label above value once the column gets narrow * * The card is `.main_box` (a Bootstrap col-sm-6) holding an image column and * a details column, each col-sm-6, with the details column additionally * pinned to max-width:50% by an inline style from acclaim_render_model_groups(). * * Measured at 768px on /products/counterbalance-forklifts/: * * .main_box .............. 347px * .image-box ........... 173px * .description-box ..... 173px (max-width:50%, inline) * .headings .......... 77px <- "Equipment Type" * .headings-1 ........ 77px <- "Diesel" * * "Equipment Type" does not fit in 77px, so it sets as "Equipment" + "Type" * on two lines - and the value column starts at exactly the pixel the label * runs out at, with no gutter. On screen the card reads * * EquipmentDiesel * Type * * which is the text collision in the tablet before-shots. It is the same at * 915px, and it hits every make/category/listing page because every one of * them renders these cards. * * The fix is the smallest one that removes the collision: in the range where * the card is two-up, the label and value stop sharing a line and stack. The * card keeps its image-left / details-right shape, so nothing about the * card's height, image sizing or grid behaviour changes. * * The range is 576-991px and not "below 992px" on purpose. Below 576px the * grid is one card per row, the details column is the full ~345px, and the * 50/50 split has 172px a side - which fits "Equipment Type" with room over. * Stacking there would add two lines to all 179 cards and roughly 7,500px to * an already 77,000px page for no gain. * * Deliberately NOT done here: the image box, the card height, the equal-height * grid and the 13px spec text are all set, with !important and with measured * reasoning, by the inline block in inc/category-layout.php. Overriding any of * it from this file would silently undo that work - so this file does not * touch .image-box, .description-box sizing, or the spec font-size at all. * ------------------------------------------------------------------------ / @media (min-width: 576px) and (max-width: 991.98px) { body.acl-prod-resp #main-content .main_box .modals_box .headings, body.acl-prod-resp #main-content .main_box .modals_box .headings-1 { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; text-align: left !important; } / Stacked, the label owns the line above its value, so the pair reads as * one unit and the next label needs air above it rather than beside it. / body.acl-prod-resp #main-content .main_box .modals_box .headings { padding-bottom: 0 !important; } body.acl-prod-resp #main-content .main_box .modals_box .headings-1 { padding-top: 0 !important; padding-bottom: 6px !important; } } / -------------------------------------------------------------------------- * 3. Spec rows: a gutter and a break opportunity, at every width * * Belt and braces for section 2, and the same guard for the machine-detail * spec table, which uses the same .headings / .headings-1 pair. The two * columns are a bare 50/50 with no gutter, so any label one character wider * than its half touches the value beside it. A little padding plus a break * opportunity means the worst case is a wrapped label, never two overlapping * words. * * No font-size is set here - see the note in section 2. * ------------------------------------------------------------------------ / body.acl-prod-resp #main-content .modals_box .headings, body.acl-prod-resp #main-content .modals_box .headings-1 { min-width: 0; overflow-wrap: break-word; word-break: break-word; } body.acl-prod-resp #main-content .modals_box .headings { padding-right: 10px !important; } / Body copy: break a word only when it genuinely cannot fit. /makes/genie/ * cites "legislation.gov.uk/uksi/1998/2307/regulation/9." - 47 characters with * no space or hyphen in them, which at 15px overran its 295px column by 53px * at 375. overflow-wrap (not word-break) leaves every other line untouched. * * The citation style is shared with the areas and services pages, so the same * overrun is likely there too - flagged in the handover rather than fixed * from here, since those are not this slice. / body.acl-prod-resp #main-content p, body.acl-prod-resp #main-content li, body.acl-prod-resp #main-content dd, body.acl-prod-resp #main-content td { overflow-wrap: break-word; } / -------------------------------------------------------------------------- * 4. Machine detail: the hire / purchase price block * * single-product.php used to carry `style="font-size:28px"` on the two price * labels and `style="font-size:27px"` on the two values. At 915px and below * that wrapped as * * Hire From £ 385 per * week * Purchase * From £ 83,700 * * The inline styles are gone from the template; the two classes below replace * them, keeping 28/27px on desktop and easing to 18px at 375. * ------------------------------------------------------------------------ / body.acl-prod-resp #main-content .acl-price-label strong { font-size: clamp(18px, 14.48px + 0.939vw, 28px); line-height: 1.3; } body.acl-prod-resp #main-content .acl-price-value strong { font-size: clamp(18px, 14.83px + 0.845vw, 27px); line-height: 1.3; white-space: nowrap; / "£ 385 per week" is one fact, not two lines / } @media (max-width: 575.98px) { / At 375 the pair is comfortably wider than half the screen, so the value * drops under its own label instead of being squeezed beside it. / body.acl-prod-resp #main-content .acl-price-label, body.acl-prod-resp #main-content .acl-price-value { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; text-align: left !important; } body.acl-prod-resp #main-content .acl-price-label { padding-bottom: 0 !important; } body.acl-prod-resp #main-content .acl-price-value { padding-top: 0 !important; } } / -------------------------------------------------------------------------- * 5. "Similar Products" carousel * * `.recent-product .image img` is min-height:350px + max-height:350px + * object-fit:cover. On a 375px screen that is a 350px slab - 43% of the * viewport - and when a machine has no photo the slab is 350px of nothing, * which is the large empty card in the before screenshots. `cover` also * crops, on a carousel whose entire job is showing what the machine looks * like. * * Below 992px the slab becomes proportional and switches to contain. The * theme already does exactly this between 730 and 766px - a 36px-wide window * that reads like an attempt at this fix that never got widened. * ------------------------------------------------------------------------ / @media (max-width: 991.98px) { body.acl-prod-resp #main-content .recent-product .image img { min-height: clamp(160px, 130px + 8vw, 240px) !important; max-height: clamp(160px, 130px + 8vw, 240px) !important; object-fit: contain !important; background: #fff; } / Slides were 437px / 461px / 437px tall - the ragged bottoms in the * tablet screenshot. A common height lines the captions up. / body.acl-prod-resp #main-content .product-single-recen-slide { display: flex !important; flex-direction: column; } / No margin-top:auto here on purpose. The image box above is a fixed * height, so every caption already starts on the same line as its * neighbours; pushing it to the bottom of the flex column instead just * stranded it under the tallest slide. / body.acl-prod-resp #main-content .product-single-recen-slide h3 { font-size: clamp(15px, 13.6px + 0.375vw, 20px); padding: 12px 0 0 !important; line-height: 1.3; } body.acl-prod-resp #main-content .product-single-recent .slick-track { display: flex !important; align-items: stretch; } body.acl-prod-resp #main-content .product-single-recent .slick-slide { height: auto !important; } / The arrows are pulled 58px outside the track at every width above 767, * which at 915px puts them on top of the first and last slide. / body.acl-prod-resp #main-content .product-single-recent .slick-prev { left: -12px !important; } body.acl-prod-resp #main-content .product-single-recent .slick-next { right: -12px !important; } body.acl-prod-resp #main-content .recent-product { padding-left: 24px; padding-right: 24px; } } / -------------------------------------------------------------------------- * 6. Clearance under the pinned mobile bar * * At 991px and below `.mob-menu-header-holder` is position:fixed and 50px * tall. Nothing on these pages loads at rest underneath it, but an in-page * jump would land a heading behind it. inc/category-layout.php already sets * scroll-margin-top on the category templates' anchors; the machine-detail * template does not load that file, so its own anchors are covered here. * 66px matches the value used there rather than inventing a second number. * ------------------------------------------------------------------------ */ @media (max-width: 991.98px) { body.acl-prod-resp.single-product #main-content [id], body.acl-prod-resp.single-makes #main-content .acl-rich-card[id] { scroll-margin-top: 66px; } }