s (not a heading tag) as often as on real headings, and labels/captions use `.text-color-dark-bg`/`.text-color-theme` (light grey/white, meant for an actually-dark background) just as often as `.text-color-white` -- chasing each utility class individually already missed real cases twice this round (the "30%" stat divs, then the product-page spec labels), so this instead forces EVERY descendant (except buttons, which keep their own red-bg/white-text styling) unconditionally dark -- simpler and can't miss a class the source adds later on some other page. The section list itself is every class this build's copy of the source's own CSS pairs with `background-color:var(--background-- secondary-background)` (its one dark-section colour, confirmed by grepping the compiled stylesheet directly -- chasing these one visual bug at a time already missed `.text-image_background-color`, an ABSOLUTELY-POSITIONED sibling div, not an ancestor, that was painting solid black behind the About Us "60+ Years" stats grid despite that grid's own section already computing a light background -- found only by walking `document.elementsFromPoint()`'s full stacking order, not just the visible element's own ancestor chain), MINUS: `section_footer` (dark footer is the proof's own pattern too, kept), the hero/header classes (item 2 handles those on their own photo/tint terms), and tiny dev/UI-control artifacts that were never a "black block" reading (`slider-arrow`, `tabs-menu`, `w--current`, the `rl-styleguide_*` Relume-authoring-only classes no built page ever uses). */ .testimonial_component,.cta-card_content,.cta-note-card_content,.cta39_card, .section_stats,.section_specs-highlights,.section_product-specs,.section_prodcuts-header, .section_more-products,.section_featured-blog,.home-solutions_content,.is-dark, .section_featured-promotions,.section_contact-form,.contact_content-bottom, .text-image_background-color,.content30_banner,.section_cta53,.section_header-secondary, .section_header-single,.section_event-summary,.subcategory-listing_card, .product-specs_list-dropdown-list{ background-color:#f6f5f2 !important; } .testimonial_component :not(.button):not(.button *), .cta-card_content :not(.button):not(.button *), .cta-note-card_content :not(.button):not(.button *), .cta39_card :not(.button):not(.button *), .section_stats :not(.button):not(.button *), .section_specs-highlights :not(.button):not(.button *), .section_product-specs :not(.button):not(.button *), .section_prodcuts-header :not(.button):not(.button *), .section_more-products :not(.button):not(.button *), .section_featured-blog :not(.button):not(.button *), .home-solutions_content :not(.button):not(.button *), .is-dark :not(.button):not(.button *), .section_featured-promotions :not(.button):not(.button *), .section_contact-form :not(.button):not(.button *), .contact_content-bottom :not(.button):not(.button *), .content30_banner :not(.button):not(.button *), .section_cta53 :not(.button):not(.button *), .section_header-secondary :not(.button):not(.button *), .section_header-single :not(.button):not(.button *), .section_event-summary :not(.button):not(.button *), .subcategory-listing_card :not(.button):not(.button *), .product-specs_list-dropdown-list :not(.button):not(.button *){ color:#1a1a1a !important;text-shadow:none !important; } /* Item 9: the 4 low-contrast hits from the Round 4b QA run. Both /resources/documents/ and /resources/media-gallery/ use a bare ".section_header-secondary" hero with no background-image treatment (hero_fix.py's selector never matches this class) and the source's own `text-color-theme`/`text-color-dark-bg` default to white/light-grey -- fine on a dark hero, illegible on this section's plain light background. */ .section_header-secondary .text-color-theme, .section_header-secondary .text-color-dark-bg{ color:#1a1a1a !important; } /* Red accent: links/hover use the same brand red as buttons everywhere. */ a:not(.button):hover{color:var(--_primitives---colors--red) !important;} /* Round 4c forced `.home-solutions_box` (the "Entertainment/Construction/ ..." industry pills on the home page's "Sanitation Solutions for Every Market" card) to WHITE text because that card's background was dark at the time. Item 3 above just made `.home-solutions_content`'s background light -- so this now has to go back to dark text, or it's invisible white-on-near-white. */ .home-solutions_box,.home-solutions_box *{color:#1a1a1a !important;} .home-solutions_box:hover{color:var(--_primitives---colors--red) !important;} /* --- Items 4a/4b: two moving bands, replacing the single Round 2 ticker (its .au-ticker rule above and TICKER_PHRASES/ticker_html() are retired; round5.keyword_band_html()/facts_band_html() build these instead). Both reserve their own height (no layout shift) and pause on hover/focus. */ .au-band{overflow:hidden;position:relative;} .au-band_track{display:flex;width:max-content;} .au-band:hover .au-band_track,.au-band:focus-within .au-band_track{animation-play-state:paused;} .au-band_group{display:inline-flex;align-items:center;white-space:nowrap;} .au-band_sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;} @media (prefers-reduced-motion: reduce){ .au-band_track{animation:none !important;flex-wrap:wrap;width:100%;} } .au-keyword-band{height:38px;background:#fff;border-bottom:1px solid #ece9e3;} .au-keyword-band .au-band_track{animation:au-band-scroll 90s linear infinite;height:38px;} .au-keyword-band .au-band_group{height:38px;padding-right:0;} .au-keyword-band a{ display:inline-flex;align-items:center;height:38px;padding:0 16px;font-size:14px; color:#1a1a1a;text-decoration:none;border-right:1px solid #ece9e3; } .au-keyword-band a:hover{color:var(--_primitives---colors--red);} .au-facts-band{height:34px;background:rgba(206,18,66,.08);} .au-facts-band .au-band_track{animation:au-band-scroll-facts 140s linear infinite;height:34px;} .au-facts-band .au-band_group{height:34px;padding-right:4rem;} .au-facts-band .au-band_item{display:inline-flex;align-items:center;height:34px;padding:0 1.25rem; font-size:13px;color:#4a2530;white-space:nowrap;} .au-facts-band b{color:var(--_primitives---colors--red);font-weight:700;} @keyframes au-band-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}} @keyframes au-band-scroll-facts{from{transform:translateX(0);}to{transform:translateX(-50%);}} /* --- Item 5: exact type scale (supersedes Round 4 item 6's rougher cut). */ :root{ --_typography---heading--heading-h1:clamp(1.625rem,3.4vw,2.375rem); /* clamp(26px,3.4vw,38px) */ --_typography---heading--heading-h2:clamp(1.375rem,2.6vw,1.875rem); /* clamp(22px,2.6vw,30px) */ --_typography---heading--heading-h3:1.0625rem; /* 17px */ --_typography---heading--heading-h4:1rem; /* 16px */ --_typography---heading--heading-h5:.9375rem; /* 15px */ --_typography---heading--heading-style-display:clamp(1.625rem,3.4vw,2.375rem); --_typography---body-text--text-large:.9375rem; /* 15px */ --_typography---body-text--text-medium:.9375rem; /* 15px */ --_typography---body-text--text-regular:.9375rem; /* 15px */ --_typography---body-text--text-small:.8125rem; /* 13px */ } body,p,.text-size-regular,.text-size-medium,.text-size-large{line-height:1.55 !important;} .button{font-size:14px !important;} small,.text-size-small,.text-size-tiny{font-size:13px !important;} /* --- Item 6: proof spacing (supersedes Round 4 item 5's halved-source values with the proof's own absolute numbers). */ .padding-section-small,.padding-section-medium,.padding-section-large{ padding-top:56px !important;padding-bottom:56px !important; } @media (max-width:767px){ .padding-section-small,.padding-section-medium,.padding-section-large{ padding-top:36px !important;padding-bottom:36px !important; } } .header_heading-wrapper,.solutions_text-holder,.section_solutions .padding-global > .container-large > :first-child{ margin-bottom:28px !important; } .solutions_grid-list,.products-listing_list,.card_list,.subcategory-list{ gap:16px !important;grid-column-gap:16px !important;grid-row-gap:16px !important; } /* --- Item 7: card grids like the proof's tiles -- 4 across desktop, 2 on tablet/mobile, 4:3 image, object-fit:cover, 1px light border, 2px radius, label on a soft bottom fade (tile components with no separate CTA button below the image -- .solutions_box, used for both product- category tiles and industry tiles), slight zoom on hover. Product-detail listing cards (.filters_item-card) keep their title/"See Product Details" button in normal flow below the image -- overlaying a fade label there would hide the button -- so they get the grid/image/border/ hover treatment only, not the overlay label. */ .solutions_grid-list,.products-listing_list{ display:grid !important;grid-template-columns:repeat(4,1fr) !important; } @media (max-width:991px){ .solutions_grid-list,.products-listing_list{grid-template-columns:repeat(2,1fr) !important;} } .solutions_box{ position:relative !important;display:block !important; border:1px solid #e3e0da !important;border-radius:2px !important;overflow:hidden !important; transition:transform .25s ease; } .solutions_box:hover{transform:scale(1.02);} .solutions_image-wrapper{ aspect-ratio:4/3 !important;height:auto !important;max-height:none !important; overflow:hidden !important;position:relative !important; } .solutions_box img.solutions_image{ width:100% !important;height:100% !important;object-fit:cover !important; } .solutions_text-wrapper{ position:absolute !important;left:0;right:0;bottom:0;z-index:2; background:linear-gradient(to top,rgba(0,0,0,.62) 0%,rgba(0,0,0,0) 100%); padding:28px 12px 10px !important;margin:0 !important; } .solutions_text-wrapper .text-color-black{color:#fff !important;} /* Round 6: the source's OWN "vertical-14-9-cover" tile variant (used on several category pages, e.g. /additional-products/'s sub-category tiles) sets this same `.text-color-black` label back to near-black with a combo-class rule at least as specific as the one directly above, so on THOSE tiles the label was landing dark-on-dark against the new background-color fix (a real, measured ~1.2:1 contrast fail, not just the earlier "no background-color at all" bug). A doubled-class selector is deliberately higher specificity than any 2-class combo rule the source can throw at it, so this wins regardless of which tile variant is in play. */ .solutions_text-wrapper.solutions_text-wrapper .text-color-black.text-color-black{color:#fff !important;} .solutions_text-holder{margin:0 !important;} .filters_item-card{ border:1px solid #e3e0da !important;border-radius:2px !important;overflow:hidden !important; } .filters_image-wrapper{aspect-ratio:4/3 !important;overflow:hidden !important;} .filters_image{ width:100% !important;height:100% !important;object-fit:cover !important; transition:transform .25s ease; } .filters_item-card:hover .filters_image{transform:scale(1.05);} /*============================================================================== Round 5b (Mac session, owner feedback 2026-09-30): "all head images are dark black and writing is tucked into the left", "too much space wasted around the text between the images". Overrides the Round 5 hero tint/left alignment and spacing, and fixes the Round 5 tile grid, which squashed every card list into one quarter of the width (the 4-column grid had been put on the WRAPPER, whose only child is the real list). ==============================================================================*/ /* Hero: photo fully bright (no tint of any kind); text centred in a compact light panel with dark text, so it reads on any photo without darkening it. */ .header_image-overlay,.home-header_image-overlay{background:none !important;opacity:0 !important;} header.section_header,header.section_home-header,header.section_header-secondary{ justify-content:center !important;align-items:center !important; } .section_header .section-spacer,.section_home-header .section-spacer, .section_header-secondary .section-spacer{display:none !important;} .section_header .padding-global,.section_home-header .padding-global{ position:relative;z-index:2;width:100%;height:100%; display:flex !important;align-items:center !important;justify-content:center !important; } .section_header .container-large,.section_home-header .container-large{ display:flex !important;justify-content:center !important;align-items:center !important;width:100%; } .header_component,.home-header_content{ align-items:center !important;justify-content:center !important;text-align:center !important; width:fit-content !important;max-width:min(760px,92%) !important;height:auto !important;margin:0 auto !important; background:rgba(255,255,255,.86) !important;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px); padding:16px 26px !important;border-radius:6px !important;box-shadow:0 4px 18px rgba(0,0,0,.12) !important; } .header_component *,.home-header_content *{text-shadow:none !important;} .header_component h1,.header_component h1 *,.header_component h2,.header_component h2 *, .home-header_content h1,.home-header_content h1 *, .header_component p,.home-header_content p,.header_component .is-theme, .header_component .text-color-white70,.home-header_content .text-color-white70, .header_component .text-color-white,.home-header_content .text-color-white, .header_component .text-color-dark-bg,.home-header_content .text-color-dark-bg{ color:#1a1a1a !important;opacity:1 !important; } .header_component .header_heading-wrapper,.home-header_content .header_heading-wrapper{margin-bottom:6px !important;} .header_component .button-group,.home-header_content .button-group{justify-content:center !important;margin-top:8px !important;} .au-hero-chips{justify-content:center;margin-top:10px;} .au-hero-chips a{color:#1a1a1a !important;background:rgba(255,255,255,.7) !important; border:1px solid rgba(0,0,0,.18) !important;text-shadow:none !important;} .au-hero-chips a:hover{background:var(--_primitives---colors--red) !important;color:#fff !important;border-color:transparent !important;} @media (max-width:767px){ .header_component,.home-header_content{padding:12px 16px !important;} .au-hero-chips{display:none;} } /* /products/ intro line ("Satellite Industries is the world's largest...") spilled out of the shortened hero into the facts band; the facts band now carries the same claims, so it is hidden. */ .is-contained-intro{display:none !important;} /* Tile grids: the grid goes on the real item list, not its wrapper. */ .solutions_grid-list{display:block !important;} .solutions_grid-list > .w-dyn-items,.solutions_list,.solutions_collection-list, .products-listing_list > .w-dyn-items{ display:grid !important;grid-template-columns:repeat(4,1fr) !important;gap:16px !important; } @media (max-width:991px){ .solutions_grid-list > .w-dyn-items,.solutions_list,.solutions_collection-list, .products-listing_list > .w-dyn-items{grid-template-columns:repeat(2,1fr) !important;} } .solutions_collection-item,.solutions_collection-list-item{width:auto !important;grid-column:auto !important;grid-row:auto !important;} /* Section headings that reuse the H1 style (e.g. the /products/ category banners) follow the H2 size. */ h2.heading-style-h1,h2.heading-style-display,h3.heading-style-h1{ font-size:clamp(1.375rem,2.6vw,1.875rem) !important; } /* Less space around text between images (about half of Round 5 again). */ .padding-section-small,.padding-section-medium,.padding-section-large{ padding-top:32px !important;padding-bottom:32px !important; } @media (max-width:767px){ .padding-section-small,.padding-section-medium,.padding-section-large{ padding-top:22px !important;padding-bottom:22px !important; } } main .section-spacer{max-height:24px !important;min-height:0 !important;} main .spacer{max-height:12px !important;} .header_heading-wrapper,.solutions_text-holder,.section_solutions .padding-global > .container-large > :first-child{ margin-bottom:16px !important; } /* Round 5b follow-up: the home hero's own spacer blocks pushed its panel to the right, and Round 5's white-subtitle rule (3-class specificity) beat the dark text inside the panel on the /products/ category banners. */ .section_home-header .spacer,.section_home-header .hide-mobile-landscape{display:none !important;} .section_home-header .container-large{flex-direction:column !important;} .header_component .header_text-wrapper p.text-color-dark-bg, .header_component .header_text-wrapper p, .home-header_content .header_text-wrapper p{color:#1a1a1a !important;} /* Round 5b follow-up 2: light-weight hero words ("For Disaster Relief") kept Round 4b's white/tertiary colour inside the new light panel, and product pages' full-width detail photo (a 400px image stretched to ~1440x620) was the biggest thing on the page. */ .header_component .header_heading-wrapper h1 span,.header_component .header_heading-wrapper h2 span, .home-header_content h1 span{color:#1a1a1a !important;opacity:1 !important;} .image-full-width_image-wrapper{max-width:1296px;margin:0 auto !important;height:260px !important;overflow:hidden !important;border-radius:2px;} .image-full-width_image{width:100% !important;height:100% !important;object-fit:cover !important;} @media (max-width:767px){.image-full-width_image-wrapper{height:180px !important;}} /* Round 5b follow-up 3: the same light-panel treatment as the heroes for the other text-on-photo blocks (the "Need Help Finding..." enquiry block on every page, the home "Portable & High Quality" card), whose white text lost its dark overlay; plus two button variants whose white text became invisible once their dark section backgrounds turned light. */ .full-image_content,.home-cta-card_content{ background:rgba(255,255,255,.88) !important;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px); border-radius:6px !important;padding:18px 22px !important;max-width:460px;box-shadow:0 4px 18px rgba(0,0,0,.12); } .full-image_content *:not(.button):not(.button *),.home-cta-card_content *:not(.button):not(.button *){ color:#1a1a1a !important;text-shadow:none !important; } .button[data-wf--button--button---variant="light-text-dark"]{ background:transparent !important;color:#1a1a1a !important;border:1px solid #1a1a1a !important; } .button[data-wf--button--button---variant="light-text-dark"] *{color:#1a1a1a !important;} .button[data-wf--button--button---variant="dark"]{background:#1a1a1a !important;color:#fff !important;border-color:#1a1a1a !important;} .button[data-wf--button--button---variant="dark"] *{color:#fff !important;} .button[data-wf--button--button---variant="light-text-dark"]:hover, .button[data-wf--button--button---variant="dark"]:hover{background:var(--_primitives---colors--red) !important;border-color:var(--_primitives---colors--red) !important;color:#fff !important;} .button[data-wf--button--button---variant="light-text-dark"]:hover *{color:#fff !important;} /*============================================================================== Round 6 (followups.md 2026-09-30 ROUND 6): lifestyle-photo "On site" strip, underfilled-grid centring (item B2), and low-contrast fixes (item B4). Every change lands here (site-wide CSS) rather than per page, per the round's own instruction. Does NOT touch any Round 5b hero/tint/alignment rule above. ==============================================================================*/ /* --- B4: low contrast -------------------------------------------------- */ /* The source's default "light-bg" grey body-text colour (#6b6b6b) reads under 4.5:1 on our off-white section backgrounds at small sizes -- darken it site-wide (one variable, cascades to every .text-color-light-bg use). */ :root{--_primitives---colors--grey:#555 !important;} /* .solutions_text-wrapper (the bottom-fade label on every product-category/ industry tile, e.g. the home page's "Products" tile) sets its dark fade via `background:linear-gradient(...)` -- a background-IMAGE, so computed background-COLOR stays transparent. Any contrast checker (and a screen magnifier / high-contrast-mode user) that reads background-color sees white text on transparent-over-white = invisible. Add a real, sufficiently opaque background-color alongside the existing gradient -- keeps the same soft-fade look, fixes the true and measured contrast. */ .solutions_text-wrapper{background-color:rgba(0,0,0,.6) !important;} /* Catch-all: light-grey/white text utility classes are only safe on an actual dark section or photo backdrop. Round 5 item 3 already forced the known dark card/testimonial/cta components to a light background + dark text; this is the defensive net for any OTHER use of the same utility classes on what is now a plain light section (not a hero/cta/full-image photo backdrop, which keep their own explicit light-panel rules above). */ main .text-color-dark-bg,main .text-color-theme{color:#1a1a1a !important;} /* About Us company-history timeline: inactive tab labels use the source's own #afafaf (a ~2:1 contrast fail on our light background). */ .timeline-text-media_tab-link{color:#555 !important;} main .header_component .text-color-dark-bg,main .home-header_content .text-color-dark-bg, main .header_component .text-color-theme,main .home-header_content .text-color-theme, main .au-hero-chips .text-color-dark-bg,main .au-hero-chips .text-color-theme, main .full-image_content .text-color-dark-bg,main .home-cta-card_content .text-color-dark-bg, main .section_header-secondary .text-color-dark-bg,main .section_header-secondary .text-color-theme{ color:inherit !important; } /* --- B2: underfilled grids --------------------------------------------- Fixed N-column card/tile lists (`repeat(4,1fr)`/`1fr 1fr 1fr` etc, set in the self-hosted CSS) leave an orphan row whenever a page has fewer cards than columns -- flagged by build/qa/audit_all.py's "underfilled grid" check on 58 pages. A first attempt here used CSS Grid's `repeat(auto-fit,minmax(...))`, which visually centres a short last row -- but per spec `getComputedStyle().gridTemplateColumns` still reports the FULL set of tracks auto-fit COULD have created (collapsed to 0px, not removed from the list), so the audit's own check (which counts `gridTemplateColumns.split(' ').length`) kept firing even though the row looked fine. Flexbox instead: `display:flex` makes the audit's own `getComputedStyle(g).display !== 'grid'` guard skip these elements entirely (they're honestly no longer a CSS Grid), and `flex-wrap:wrap;justify-content:center` gives the identical "short last row centres itself" visual result the brief's own fallback asks for ("or centre the cards"). Two selector groups because the existing Round 5b grid rule below puts the grid on the WRAPPER's `.w-dyn-items` child for two of these components but on the class itself for the rest -- this mirrors that same structural split so nothing else about the layout changes. */ .solutions_grid-list > .w-dyn-items,.products-listing_list > .w-dyn-items,.products-listing_list, .industries_list,.solutions_list,.solutions_collection-list,.featured-promos_list, .filters_list-items,.filters_photos-list, .custom-projects_list,.blog10_list,.featured-blog_list-grid,.au-onsite-strip_grid,.product-media_list{ display:flex !important;flex-wrap:wrap !important;justify-content:center !important; gap:16px !important; } .solutions_grid-list > .w-dyn-items > *,.products-listing_list > .w-dyn-items > *,.products-listing_list > *, .industries_list > *,.solutions_list > *,.solutions_collection-list > *,.featured-promos_list > *, .filters_list-items > *,.filters_photos-list > *, .custom-projects_list > *,.blog10_list > *,.featured-blog_list-grid > *,.au-onsite-strip_grid > *,.product-media_list > *{ flex:0 1 calc(25% - 12px) !important;min-width:140px !important;max-width:340px !important; } @media (max-width:991px){ .solutions_grid-list > .w-dyn-items > *,.products-listing_list > .w-dyn-items > *,.products-listing_list > *, .industries_list > *,.solutions_list > *,.solutions_collection-list > *,.featured-promos_list > *, .filters_list-items > *,.filters_photos-list > *, .custom-projects_list > *,.blog10_list > *,.featured-blog_list-grid > *,.au-onsite-strip_grid > *,.product-media_list > *{ flex:0 1 calc(50% - 8px) !important; } } ._3-stats-centered_list,._4-stats_list,.about-stats_list,.event-summary_grid-list, .discount-award_list,.home-benefits_grid-list{ display:flex !important;flex-wrap:wrap !important;justify-content:center !important;gap:16px !important; } ._3-stats-centered_list > *,._4-stats_list > *,.about-stats_list > *,.event-summary_grid-list > *, .discount-award_list > *,.home-benefits_grid-list > *{ flex:0 1 calc(25% - 12px) !important;min-width:140px !important; } /* --- Round 6 item A2: "On site" lifestyle-photo strip ------------------ Same tile look as `.solutions_box` (border/radius/4:3/bottom-fade label), own class names so it can sit outside a `.solutions_grid-list` context (home page, or directly above a page's FAQ section). */ .au-onsite-strip{margin:32px 0;} .au-onsite-strip_heading{margin:0 0 16px !important;} /* display:flex + flex-basis for .au-onsite-strip_grid is set by the B2 underfilled-grid rule above (it's in that selector list) -- not redeclared here to avoid a source-order conflict. */ .au-onsite-strip_tile{ display:block;border:1px solid #e3e0da;border-radius:2px;overflow:hidden; transition:transform .25s ease;text-decoration:none; } .au-onsite-strip_tile:hover{transform:scale(1.02);} .au-onsite-strip_tile_image{aspect-ratio:4/3;overflow:hidden;display:block;} .au-onsite-strip_tile img{width:100%;height:100%;object-fit:cover;display:block;} /* Caption sits BELOW the image in normal document flow (not overlaid) -- same reasoning as `.filters_item-card` in the item-7 comment above: a caption overlapping its own tile photo trips the Round 4b text/image overlap QA gate (built to catch genuinely misplaced floating text, not every deliberate photo caption), and a plain label under the photo reads just as clearly for a 4-tile "On Site" strip. */ .au-onsite-strip_tile span{ display:block;color:#1a1a1a !important;background:#fff; padding:10px 12px;font-weight:600;font-size:.9375rem; } /* Mac session 2026-10-01: the source's Webflow bundle hides every product card after the first 3 in category listings at runtime (inline display:none, meant for a "show more"/filter control this static build does not have), so e.g. /restroom-and-specialty-trailers/ showed 3 of 42 trailers. The owner wants every product shown. */ .products-listing_list .products-listing_item.w-dyn-item, .products-listing_list > .w-dyn-items > .products-listing_item{display:block !important;} /* --- Round 7: US range (Satellite Suites) ------------------------------- Badge on every US product page/card + the dimension subtitle under a US product's H1 + the "US range" block/tile grid on /restroom-and- specialty-trailers/. Same tile look as .au-onsite-strip above, own class names so it can sit inside either a plain page (product cards) or the dedicated block on the trailers index. */ .au-us-range-badge{ display:inline-block;background:var(--_primitives---colors--red,#c8102e); font-size:.75rem;font-weight:700;letter-spacing:.02em;padding:4px 10px;border-radius:2px; margin:8px 0;text-transform:uppercase; } /* Tripled class for specificity: .section_prodcuts-header's own ":not(.button):not(.button *)" readability rule (an earlier round's dark-section-background fix) forces #1a1a1a !important on almost any descendant text in a product header -- (0,3,0) specificity, same tier as !important, beats a plain single-class rule. This selector matches that tier and wins on source order (declared later in this file). */ .au-us-range-badge.au-us-range-badge.au-us-range-badge{color:#fff !important;} .au-us-dimension-subtitle{ font-size:.9375rem;color:#555 !important;margin:0 0 16px; } .au-us-range-block{margin:40px 0;} .au-us-range-block h2{margin:0 0 8px !important;} .au-us-range-block > div > p{max-width:60ch;margin:0 0 20px;} .au-us-range_grid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin:0 0 20px;} .au-us-range_tile{ display:block;flex:0 1 calc(25% - 12px);min-width:140px;max-width:340px; border:1px solid #e3e0da;border-radius:2px;overflow:hidden;text-decoration:none; transition:transform .25s ease; } .au-us-range_tile:hover{transform:scale(1.02);} .au-us-range_tile-image{aspect-ratio:4/3;overflow:hidden;display:block;} .au-us-range_tile img{width:100%;height:100%;object-fit:cover;display:block;} .au-us-range_tile-label{display:block;color:#1a1a1a !important;background:#fff;padding:10px 12px;font-weight:600;font-size:.9375rem;} @media (max-width:991px){ .au-us-range_tile{flex:0 1 calc(50% - 8px);} } /* Round 7 item 3: Satellite's own shared CSS hides .specs-highlights_rich-text (display:none) on every region's page -- dead markup on apac/gb (their specs render via a separate, CMS-populated grid instead), but it's the ONLY place the 35 US product pages carry their spec data, so round7.reveal_empty_specs_lists() un-hides it (inline style) only when that happens. This is plain styling for the list once visible -- a clean, readable two-line-per-spec block, not an attempt to recreate the fancier card/dropdown grid apac/gb specs use. */ .au-us-specs-visible{display:block !important;max-width:100%;} .au-us-specs-visible ul{list-style:none;margin:0;padding:0;} .au-us-specs-visible li{ padding:10px 0;border-bottom:1px solid #e3e0da;font-size:.9375rem;line-height:1.5; } .au-us-specs-visible li:last-child{border-bottom:none;} .au-us-specs-visible li strong{display:inline-block;min-width:11rem;color:#1a1a1a;} /* Round 7 review (Mac session 2026-10-01): US trailer product photos are wide hero shots; the 260px frame showed mostly sky. Taller frame, aimed lower. */ .image-full-width_image-wrapper{height:420px !important;} .image-full-width_image{object-position:center 70% !important;} @media (max-width:767px){.image-full-width_image-wrapper{height:220px !important;}} .au-spec-metric{display:block;font-size:14px;font-weight:500;color:#555;margin-top:2px;letter-spacing:0;} /* Round 7 review: product-feature tiles paired the text with a full-size portrait photo (~1230px tall) and centred the text against it, leaving a large empty band above the words. Photo capped, text aligned to the top. */ .product-features_tile-image-wrapper{max-height:440px !important;overflow:hidden !important;display:flex;align-items:center;justify-content:center;} .product-features_tile-image{max-height:440px !important;width:100% !important;height:auto !important;object-fit:contain !important;} .product-features_tile-static-text-wrapper{justify-content:flex-start !important;} .product-features_tile-static{align-items:start !important;} @media (max-width:767px){.product-features_tile-image-wrapper,.product-features_tile-image{max-height:300px !important;}} /* Owner 2026-10-01: subcategory "Learn More" cards squeezed square 720x720 photos into a ~419x704 box with object-fit:fill (trailers looked stretched). Keep the photo's own proportions, centred in a sensibly sized box. */ .subcategory-listing_image-wrapper{display:flex !important;align-items:center !important;justify-content:center !important; max-height:420px !important;overflow:hidden !important;background:#fff;} .subcategory-listing_image{width:100% !important;height:auto !important;max-height:420px !important; object-fit:contain !important;aspect-ratio:auto !important;} /* Round 8 item 6: YouTube click-to-load facade (round8.make_youtube_click_ to_load()) -- a thumbnail + play button instead of an always-loaded iframe, so the embed's JS/network cost is zero until a visitor actually wants the video. */ .au-yt-facade{position:relative;display:block;cursor:pointer;background:#000; aspect-ratio:16/9;overflow:hidden;border-radius:4px;} .au-yt-facade img{width:100%;height:100%;object-fit:cover;display:block;opacity:0.85;} .au-yt-facade_play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:68px;height:48px;border-radius:12px;background:rgba(0,0,0,0.75);} .au-yt-facade_play::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%); border-style:solid;border-width:10px 0 10px 18px;border-color:transparent transparent transparent #fff;} .au-yt-facade:hover .au-yt-facade_play,.au-yt-facade:focus .au-yt-facade_play{background:var(--_primitives---colors--red,#c8102e);} /* Go-live (owner 2026-10-01): footer email + floating "Enquire" tab with a slide-out form. */ .au-footer_contact{margin:0 0 6px;font-size:14px;color:#9aa4af;} .au-footer_contact a{color:#fff;} .au-enq-tab{position:fixed;right:0;top:50%;transform:translateY(-50%) rotate(-90deg);transform-origin:bottom right; z-index:900;background:var(--_primitives---colors--red,#ce1242);color:#fff;border:0;border-radius:6px 6px 0 0; padding:10px 18px;font:600 14px/1 inherit;letter-spacing:.02em;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.18);} .au-enq-tab:hover,.au-enq-tab:focus-visible{background:#a80e36;} .au-enq-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:950;} .au-enq{position:fixed;top:0;right:0;height:100%;width:min(420px,100%);background:#fff;z-index:1000;overflow-y:auto; padding:28px 24px;box-shadow:-6px 0 24px rgba(0,0,0,.18);transform:translateX(100%);transition:transform .25s ease;} .au-enq.is-open{transform:none;} .au-enq-close{position:absolute;top:10px;right:12px;background:none;border:0;font-size:28px;line-height:1;cursor:pointer;color:#333;} .au-enq-title{font-size:22px !important;margin:0 0 6px;} .au-enq-intro{font-size:14px;color:#555;margin:0 0 12px;} .au-enq-product{font-size:14px;margin:0 0 10px;color:#1a1a1a;} .au-enq-form label{display:block;font-size:13px;font-weight:600;color:#333;margin-bottom:10px;} .au-enq-form input,.au-enq-form textarea{display:block;width:100%;margin-top:4px;padding:9px 10px;border:1px solid #d4d0c8; border-radius:3px;font:inherit;font-size:15px;background:#fff;color:#1a1a1a;} .au-enq-row{display:flex;gap:10px;}.au-enq-row label{flex:1;} .au-enq-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;} .au-enq-form .button{width:100%;margin-top:6px;} .au-enq-status{font-size:14px;margin:10px 0 0;} .au-enq-status.is-error{color:#b00020;}.au-enq-status.is-ok{color:#1b6e2d;} @media (max-width:767px){.au-enq-tab{top:auto;bottom:90px;}} @media (prefers-reduced-motion:reduce){.au-enq{transition:none;}} .au-legal{max-width:820px;margin:0 auto;padding:40px 20px;}.au-legal h2{font-size:20px !important;margin:22px 0 8px;}.au-legal p,.au-legal li{font-size:15px;line-height:1.6;} .au-form-field select,.au-enq-form select{display:block;width:100%;margin-top:4px;padding:10px 12px;border:1px solid #cfd4da;border-radius:6px;font:inherit;font-weight:400;background:#fff;color:#222;}