/, so the open/closed behaviour and
keyboard support come from the browser rather than from us -
and the filters still work with JavaScript disabled.
This became necessary when the ten-value cap came off: the
sidebar went from about 110 options to 357, and eleven groups
expanded at once is a wall.
============================================================ */
.gp-facet-group { border-bottom: 1px solid var(--gp-border, #E6E7E8); padding: 0; margin: 0; }
.gp-facet-summary {
display: flex; align-items: center; justify-content: space-between;
gap: 0.6rem; cursor: pointer; padding: 0.85rem 0; list-style: none;
}
.gp-facet-summary::-webkit-details-marker { display: none; }
.gp-facet-summary::marker { content: ''; }
.gp-facet-summary h3 {
margin: 0; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em;
font-family: "URWDINStdBold", Arial, Helvetica, sans-serif;
}
.gp-facet-summary:hover h3 { color: var(--gp-red, #BB0027); }
.gp-facet-summary:focus-visible { outline: 2px solid var(--gp-red, #BB0027); outline-offset: 2px; }
/* the +/- indicator, drawn rather than an icon font */
.gp-facet-summary::after {
content: ''; flex: none; width: 14px; height: 14px; margin-left: auto;
background:
linear-gradient(var(--gp-red, #BB0027), var(--gp-red, #BB0027)) center/14px 2px no-repeat,
linear-gradient(var(--gp-red, #BB0027), var(--gp-red, #BB0027)) center/2px 14px no-repeat;
transition: transform .15s ease;
}
.gp-facet-group[open] > .gp-facet-summary::after {
background:
linear-gradient(var(--gp-red, #BB0027), var(--gp-red, #BB0027)) center/14px 2px no-repeat;
}
.gp-facet-group > .facetwp-facet { margin: 0 0 1rem; }
/* catalog-filters.js hides a group with nothing to offer in the current result
set - that is how the specialist attributes stay scoped to the categories
where they apply. Stated here so a later `display` rule on .gp-facet-group
cannot silently outrank the [hidden] attribute. */
.gp-facet-group[hidden] { display: none; }
/* Collapse all / Expand all. Quiet by design - it is a utility beside eighteen
filter groups, not something to compete with them for attention. */
.gp-facet-collapse-all {
display: block; width: 100%; margin: 0 0 1rem; padding: 0.45rem 0.6rem;
background: none; border: 1px solid var(--gp-border, #E6E7E8); border-radius: 2px;
font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em;
color: var(--gp-grey, #666); cursor: pointer;
}
/* Astra paints `button:hover` with --ast-global-color-1, which we retargeted to
Grabber red - so tinting the TEXT red on hover put red on red. Hover matches
.facetwp-reset instead: red ground, white label. */
.gp-facet-collapse-all:hover,
.gp-facet-collapse-all:focus-visible {
background: var(--gp-red, #BB0027);
border-color: var(--gp-red, #BB0027);
color: #fff;
}
.gp-facet-collapse-all[hidden] { display: none; }
/* how many filters are active inside a collapsed group */
.gp-facet-active {
flex: none; min-width: 1.35rem; padding: 0 0.4rem; border-radius: 999px;
background: var(--gp-red, #BB0027); color: #fff;
font-size: 0.72rem; font-weight: 700; line-height: 1.35rem; text-align: center;
}
@media (prefers-reduced-motion: reduce) { .gp-facet-summary::after { transition: none; } }
/* "No matches in this category - search all products" - see catalog-filters.js.
Styled as guidance rather than an error: nothing has gone wrong, the visitor
is just standing in the wrong aisle. */
.gp-search-elsewhere {
margin: 0 0 1.25rem;
padding: 0.85rem 1rem;
background: var(--gp-border, #E6E7E8);
border-left: 3px solid var(--gp-red, #BB0027);
font-size: 0.95rem;
color: var(--gp-dark, #1a1a1a);
}
.gp-search-elsewhere a { font-weight: 700; color: var(--gp-red, #BB0027); }
.gp-search-elsewhere a:hover { text-decoration: underline; }
/* The category row falls back to siblings when a category has no children, so
the visitor keeps the set they were choosing from. The current one is a span,
not a link - it needs to read as "you are here" rather than as a dead link. */
.gp-subcategory-link.is-current {
background: var(--gp-red, #BB0027);
color: #fff;
cursor: default;
}
.gp-subcategory-link.gp-subcategory-up { font-weight: 700; }
/* Non-PDF documents say so. A .docx opened in a new tab just starts a download
and leaves an empty tab behind, which reads as a broken link. */
.gp-doc-kind { color: var(--gp-grey, #666); font-size: 0.85em; font-weight: 400; }
/* ===================================================================
Content image sizing (Jason 9/15, Carly 9/21)
-------------------------------------------------------------------
Jason: "Can we make the images bigger? See existing site for
reference" (green-construction-leed).
Carly: "The images are sized very small, can that be fixed?" and
"Can the images and thumbnail size be increased?" (the-grabber-
difference, twice).
One rule caused all three. `.gp-page-body .gp-pm-image img` capped
EVERY extracted CMS image at max-width:120px. That number was chosen
for the small catalogue thumbnails that sit beside a text column, and
it was then inherited by every other kind of image on the page.
Live declares an explicit imageWidth per image - 600 for the LEED
graphic, 500 for the adhesive product shots - so a blanket 120px
renders them at a fifth of their intended size. On the LEED page the
600x550 graphic is not even inside a .gp-pm-col; it sits directly in
a single-column row, so nothing else was ever going to constrain it.
Three contexts, three sizes, matching what the CMS actually declares:
single-column row a content image, the page's main visual 600px
card / logo grid partner logos, product cards 300px
promo thumbnail catalogue cover beside a text column 220px
width:auto rather than width:100% - a 300px logo stretched to fill a
590px grid cell is upscaled and blurry. max-width carries the sizing;
the 100% keeps it inside a narrow cell.
=================================================================== */
.gp-page-body .gp-pm-image img,
.gp-page-body .gp-pm-col:has(> .gp-pm-image) .gp-pm-image img {
width: auto;
max-width: min(100%, 220px);
height: auto;
}
/* A single-column row is the page's main content image. */
.gp-page-body .gp-pm-row-1 .gp-pm-image img,
.gp-page-body .gp-pm-row.gp-pm-row-1 .gp-pm-image img {
max-width: min(100%, 600px);
}
/* Card / logo grids: every column is a card, so the image fills it. */
.gp-page-body .gp-pm-row:has(> .gp-pm-col:first-child > .gp-pm-image) .gp-pm-image img,
.gp-page-body .gp-pm-row:has(> .gp-pm-col:first-child > .gp-pm-image) .gp-pm-col:has(> .gp-pm-image) .gp-pm-image img {
max-width: min(100%, 300px);
}
/* Centre a single-column content image; it is the focal point of the row. */
.gp-page-body .gp-pm-row-1 .gp-pm-image {
text-align: center;
}
/* Fallback for browsers without :has() - keep images usefully large
rather than falling back to the old 120px. */
@supports not selector(:has(*)) {
.gp-page-body .gp-pm-image img { max-width: min(100%, 300px); }
}
@media (max-width: 700px) {
.gp-page-body .gp-pm-image img,
.gp-page-body .gp-pm-col:has(> .gp-pm-image) .gp-pm-image img {
max-width: min(100%, 220px);
}
.gp-page-body .gp-pm-row-1 .gp-pm-image img,
.gp-page-body .gp-pm-row.gp-pm-row-1 .gp-pm-image img {
max-width: 100%;
}
.gp-page-body .gp-pm-row:has(> .gp-pm-col:first-child > .gp-pm-image) .gp-pm-image img {
max-width: min(100%, 260px);
}
}
/* The "More Literature & Resources" panel is one grey box split into three
columns (the .gp-pm-row:has(> .gp-pm-col > .gp-sub-links) rule above).
The .gp-sub-links component carries its own background and red rule for
standalone use, which doubles up inside that panel - neutralise it there. */
.gp-pm-row:has(> .gp-pm-col > .gp-sub-links) .gp-sub-links {
background: none;
border-left: 0;
padding: 0 0.75rem;
margin-bottom: 0;
}
/* What's New: line the two images up on a common baseline.
Carly: "Can the ACTup photo align horizontally with the combat mat image?"
Both images are the same 2560x1783, so the images were never the problem.
The grid was align-items:start, so each tile sized to its own text - and the
Combat Mat description is several lines longer than the ACTup one, which
pushed its image down and left the two out of line.
Each tile is now a full-height flex column with the media pushed to the
bottom, so the images share a baseline whatever the copy above them does.
Same technique as the icon-card grid, where margin-top:auto holds the
buttons on one line. Marketing can now write copy of any length without
knocking the layout out. */
.gp-whats-new-grid {
align-items: stretch;
}
.gp-whats-new-item {
display: flex;
flex-direction: column;
}
.gp-whats-new-item .gp-whats-new-media {
margin-top: auto;
}
/* ===================================================================
Carly 9/24 - two corrections
------------------------------------------------------------------- */
/* 1. "The star icons are massive" (The Grabber Difference).
Those are the four small product shots in a row - Grabber screws,
SuperDrive N7, CM10P, No-Coat bucket - which read as icons at the
intended size. Live declares imageWidth 150 for each of them.
This is a regression from my own fix on 23 Sep: raising the blanket
120px cap to 300px for card grids was right for partner logos and
wrong for these, which doubled. Live is the reference, so match it
exactly rather than splitting the difference.
A card grid of three or more is an icon row: 150.
A card grid of exactly two is an image beside text - live declares
300 for the Marvin Maxwell portrait in that layout. */
.gp-page-body .gp-pm-row:has(> .gp-pm-col:first-child > .gp-pm-image):has(> .gp-pm-col:nth-child(3)) .gp-pm-image img {
max-width: min(100%, 150px);
}
.gp-page-body .gp-pm-row:has(> .gp-pm-col:first-child > .gp-pm-image):has(> .gp-pm-col:nth-child(2)):not(:has(> .gp-pm-col:nth-child(3))) .gp-pm-image img {
max-width: min(100%, 300px);
}
/* 2. "Scorpion thumbnail cut off. I uploaded a larger version and it is
still being cut off."
Two causes. The catalogue covers we inherited are all 70x100 portrait,
so the thumb was built as a fixed 84x120 box with object-fit:cover -
a 0.7 ratio that those images fill exactly, with nothing cropped.
Carly's replacement is 2000x1765, which is LANDSCAPE. Forcing a 1.13
ratio into a 0.7 box with `cover` crops roughly 38% off the width, so
supplying a better image made the crop worse rather than better.
`contain` letterboxes instead of cropping, so any aspect ratio now
renders whole. The white background fills the unused space, which the
box already had. Slightly larger box since a real asset now exists. */
.gp-catalog-feature-thumb img,
.gp-catalog-card-thumb {
width: 100px;
height: 140px;
object-fit: contain;
}
/* =====================================================================
Accessibility fixes from Meticular's pre-launch review, 15 Oct 2026
===================================================================== */
/* Header drop-downs were mouse-only.
.gp-mega-menu and .gp-mega-flyout were shown on :hover and on a JS
.is-open class, so a keyboard user could Tab to "PRODUCTS" and never
reach anything inside it. :focus-within opens the panel as soon as
focus lands on any descendant, which is what Tab does, and closes it
again when focus leaves - no JS, and it cannot get out of step with
the hover behaviour. */
.gp-nav-item.gp-has-mega:focus-within .gp-mega-menu {
display: block;
}
.gp-mega-item.gp-has-flyout:focus-within .gp-mega-flyout {
display: block;
}
/* Consistent, visible focus.
Reported as weak or missing on the main nav (white on red), the
consent button, the mobile filter button, and inconsistent on the
search icon. One rule, high contrast on both the red chrome and white
content, and only for keyboard users so mouse clicks stay clean. */
.gp-main-nav a:focus-visible,
.gp-main-nav button:focus-visible,
.gp-utility-bar a:focus-visible,
.gp-search-form button:focus-visible,
.gp-search-form input:focus-visible,
.gp-logo:focus-visible,
.gp-menu-toggle:focus-visible {
outline: 3px solid #fff;
outline-offset: 2px;
border-radius: 2px;
}
.gp-filter-toggle:focus-visible,
.gp-facet-close:focus-visible,
.gp-facet-collapse-all:focus-visible,
.gp-facet-summary:focus-visible,
.cmplz-manage-consent:focus-visible,
.cmplz-btn:focus-visible,
.footer-col a:focus-visible,
.footer-col__cta:focus-visible,
.site-footer__legal a:focus-visible {
outline: 3px solid var(--gp-red, #BB0027);
outline-offset: 2px;
border-radius: 2px;
}
/* The consent banner sits on its own white panel, so the red ring above
works there - but the floating "Your Privacy Choices" trigger can land
on either, so give it a ring that reads on both. */
.cmplz-manage-consent:focus-visible {
outline: 3px solid #1a1a1a;
box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.9);
}
/* Filter options are now keyboard-operable (see catalog-filters.js), so
they need a focus ring of their own - without this the fix works but is
invisible, which is no use to a sighted keyboard user. */
.gp-facet-sidebar .facetwp-checkbox:focus-visible,
.gp-facet-sidebar .facetwp-link:focus-visible {
outline: 3px solid var(--gp-red, #BB0027);
outline-offset: 1px;
border-radius: 2px;
}
/* The live region that announces result counts must be available to a
screen reader but never visible. Clip rather than display:none, which
would hide it from assistive technology as well. */
.screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* A drawer marked inert should not respond to a stray click either. */
.gp-facet-sidebar[inert] {
pointer-events: none;
}
/* =====================================================================
Layout shift on the form pages - Meticular, 15 Oct 2026
=====================================================================
CLS measured at ~0.91 on /contact-us/, with the same risk on the
subscriber and catalog order forms. Two causes, both fixed here.
1. The HubSpot form is injected by JavaScript into an empty div. Until
it arrives the div is zero-height, so everything below it - the rest
of the page and the whole footer - sits too high and then jumps down
when the form renders. That is the bulk of the 0.91.
Reserving height stops the jump. The values below are an ESTIMATE:
HubSpot's form definition endpoint returns nothing for this form, so
the height could not be measured from here, and there is no browser
in this environment to render it. They are deliberately a little
generous - a small gap under the form is a far smaller problem than
the page lurching - and they should be tuned once somebody can
measure the rendered height. Tune these numbers, do not remove them.
2. Web font swap. font-display:swap keeps text visible while URW DIN
loads, which is right, but the fallback and the real face have
different metrics so the text reflows on arrival. Preloading the two
woff2 files (see gp_preload_fonts in functions.php) shortens that
window; the remaining shift is small and confined to text.
===================================================================== */
#hubspot-contact-form,
.gp-hubspot-form,
.hbspt-form {
min-height: 620px;
}
@media (max-width: 782px) {
/* Fields stack on a phone, so the same form is considerably taller. */
#hubspot-contact-form,
.gp-hubspot-form,
.hbspt-form {
min-height: 780px;
}
}
/* Once the form is actually in the DOM, let it size itself - otherwise a
short form leaves a permanent gap. The class is added by the embed
itself, so this needs no JavaScript of ours. */
#hubspot-contact-form:has(form),
.gp-hubspot-form:has(form),
.hbspt-form:has(form) {
min-height: 0;
}
.gp-pm-image-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.gp-pm-image-grid .gp-pm-image { margin: 0; }
.gp-pm-image-grid img {
width: 50%;
aspect-ratio: 1 / 1;
object-fit: cover;
display: block;
}
.gp-pm-row { display: flex; gap: 30px; }
.gp-pm-row > .gp-pm-col { flex: 1; }
@media (max-width: 768px) { .gp-pm-row { flex-direction: column; }
}
/* ===== Hero banner fixes ===== */
/* 1. Phones: the "media must never push the page wider" rule
(.gp-page-body img { height: auto }) out-ranks .gp-banner-img and
shrinks the image, leaving a grey band. Restore the full-cover fill. */
.gp-page-body .gp-banner-img {
height: 100%;
}
/* 2. The Grabber Difference: full-width hero like the Optimizely page,
sitting directly under the red header. */
.page-id-5386 .gp-page-content { padding-top: 0; }
.page-id-5386 .gp-banner-hero {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-top: 0;
margin-bottom: 0;
min-height: 430px;
border-radius: 0;
}
.page-id-5386 .gp-banner-hero .gp-banner-body {
max-width: 1200px;
margin: 0 auto;
padding: 2rem 2.5rem;
justify-content: flex-start;
}
.page-id-5386 .gp-banner-hero .gp-banner-heading { font-size: 2.6rem; }
.page-id-5386 { overflow-x: clip; } /* 100vw includes the scrollbar; stop a sideways scroll */
/* 3. Hide the page title above the hero (still read by screen readers & Google). */
.page-id-5386 .gp-page-content > h1 {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
@media (max-width: 700px) {
.page-id-5386 .gp-banner-hero { min-height: 340px; }
.page-id-5386 .gp-banner-hero .gp-banner-heading { font-size: 1.7rem; }
.page-id-5386 .gp-banner-hero .gp-banner-body { padding: 2rem 1.25rem; }
}
/* ===================================================================
The Grabber Difference page
Mirrors the Optimizely layout: centred content, image/text rows,
grey dividers between sections, 2x2 feature grid, small product tiles.
=================================================================== */
.gp-gd {
max-width: 1080px;
margin: 0 auto;
padding: 3rem 1rem 1rem;
}
.gp-gd section {
max-width: 880px;
margin: 0 auto;
}
/* Grey rule between sections */
.gp-gd-divider {
border: 0;
border-top: 1px solid #CFCFCF;
margin: 3.5rem 0;
}
/* Centred section heading (THE GRABBER DIFFERENCE / LET US SHOW YOU...) */
.gp-page-body .gp-gd-heading {
text-align: center;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1.2;
color: #212121;
margin: 0 0 3.5rem;
}
/* Small red-ruled title, left-aligned */
.gp-page-body .gp-gd-title {
margin: 0 0 1.25rem;
padding: 0.55rem 0;
border-top: 1px solid var(--gp-red, #BB0027);
border-bottom: 1px solid var(--gp-red, #BB0027);
text-align: left;
text-transform: uppercase;
letter-spacing: 0.02em;
font-size: 0.85rem;
font-weight: 700;
color: #212121;
}
.gp-gd p {
font-size: 0.9rem;
line-height: 1.7;
margin: 0 0 1rem;
}
.gp-gd-center { text-align: center; }
/* WordPress auto-formatting adds
, so the open/closed behaviour and
keyboard support come from the browser rather than from us -
and the filters still work with JavaScript disabled.
This became necessary when the ten-value cap came off: the
sidebar went from about 110 options to 357, and eleven groups
expanded at once is a wall.
============================================================ */
.gp-facet-group { border-bottom: 1px solid var(--gp-border, #E6E7E8); padding: 0; margin: 0; }
.gp-facet-summary {
display: flex; align-items: center; justify-content: space-between;
gap: 0.6rem; cursor: pointer; padding: 0.85rem 0; list-style: none;
}
.gp-facet-summary::-webkit-details-marker { display: none; }
.gp-facet-summary::marker { content: ''; }
.gp-facet-summary h3 {
margin: 0; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em;
font-family: "URWDINStdBold", Arial, Helvetica, sans-serif;
}
.gp-facet-summary:hover h3 { color: var(--gp-red, #BB0027); }
.gp-facet-summary:focus-visible { outline: 2px solid var(--gp-red, #BB0027); outline-offset: 2px; }
/* the +/- indicator, drawn rather than an icon font */
.gp-facet-summary::after {
content: ''; flex: none; width: 14px; height: 14px; margin-left: auto;
background:
linear-gradient(var(--gp-red, #BB0027), var(--gp-red, #BB0027)) center/14px 2px no-repeat,
linear-gradient(var(--gp-red, #BB0027), var(--gp-red, #BB0027)) center/2px 14px no-repeat;
transition: transform .15s ease;
}
.gp-facet-group[open] > .gp-facet-summary::after {
background:
linear-gradient(var(--gp-red, #BB0027), var(--gp-red, #BB0027)) center/14px 2px no-repeat;
}
.gp-facet-group > .facetwp-facet { margin: 0 0 1rem; }
/* catalog-filters.js hides a group with nothing to offer in the current result
set - that is how the specialist attributes stay scoped to the categories
where they apply. Stated here so a later `display` rule on .gp-facet-group
cannot silently outrank the [hidden] attribute. */
.gp-facet-group[hidden] { display: none; }
/* Collapse all / Expand all. Quiet by design - it is a utility beside eighteen
filter groups, not something to compete with them for attention. */
.gp-facet-collapse-all {
display: block; width: 100%; margin: 0 0 1rem; padding: 0.45rem 0.6rem;
background: none; border: 1px solid var(--gp-border, #E6E7E8); border-radius: 2px;
font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em;
color: var(--gp-grey, #666); cursor: pointer;
}
/* Astra paints `button:hover` with --ast-global-color-1, which we retargeted to
Grabber red - so tinting the TEXT red on hover put red on red. Hover matches
.facetwp-reset instead: red ground, white label. */
.gp-facet-collapse-all:hover,
.gp-facet-collapse-all:focus-visible {
background: var(--gp-red, #BB0027);
border-color: var(--gp-red, #BB0027);
color: #fff;
}
.gp-facet-collapse-all[hidden] { display: none; }
/* how many filters are active inside a collapsed group */
.gp-facet-active {
flex: none; min-width: 1.35rem; padding: 0 0.4rem; border-radius: 999px;
background: var(--gp-red, #BB0027); color: #fff;
font-size: 0.72rem; font-weight: 700; line-height: 1.35rem; text-align: center;
}
@media (prefers-reduced-motion: reduce) { .gp-facet-summary::after { transition: none; } }
/* "No matches in this category - search all products" - see catalog-filters.js.
Styled as guidance rather than an error: nothing has gone wrong, the visitor
is just standing in the wrong aisle. */
.gp-search-elsewhere {
margin: 0 0 1.25rem;
padding: 0.85rem 1rem;
background: var(--gp-border, #E6E7E8);
border-left: 3px solid var(--gp-red, #BB0027);
font-size: 0.95rem;
color: var(--gp-dark, #1a1a1a);
}
.gp-search-elsewhere a { font-weight: 700; color: var(--gp-red, #BB0027); }
.gp-search-elsewhere a:hover { text-decoration: underline; }
/* The category row falls back to siblings when a category has no children, so
the visitor keeps the set they were choosing from. The current one is a span,
not a link - it needs to read as "you are here" rather than as a dead link. */
.gp-subcategory-link.is-current {
background: var(--gp-red, #BB0027);
color: #fff;
cursor: default;
}
.gp-subcategory-link.gp-subcategory-up { font-weight: 700; }
/* Non-PDF documents say so. A .docx opened in a new tab just starts a download
and leaves an empty tab behind, which reads as a broken link. */
.gp-doc-kind { color: var(--gp-grey, #666); font-size: 0.85em; font-weight: 400; }
/* ===================================================================
Content image sizing (Jason 9/15, Carly 9/21)
-------------------------------------------------------------------
Jason: "Can we make the images bigger? See existing site for
reference" (green-construction-leed).
Carly: "The images are sized very small, can that be fixed?" and
"Can the images and thumbnail size be increased?" (the-grabber-
difference, twice).
One rule caused all three. `.gp-page-body .gp-pm-image img` capped
EVERY extracted CMS image at max-width:120px. That number was chosen
for the small catalogue thumbnails that sit beside a text column, and
it was then inherited by every other kind of image on the page.
Live declares an explicit imageWidth per image - 600 for the LEED
graphic, 500 for the adhesive product shots - so a blanket 120px
renders them at a fifth of their intended size. On the LEED page the
600x550 graphic is not even inside a .gp-pm-col; it sits directly in
a single-column row, so nothing else was ever going to constrain it.
Three contexts, three sizes, matching what the CMS actually declares:
single-column row a content image, the page's main visual 600px
card / logo grid partner logos, product cards 300px
promo thumbnail catalogue cover beside a text column 220px
width:auto rather than width:100% - a 300px logo stretched to fill a
590px grid cell is upscaled and blurry. max-width carries the sizing;
the 100% keeps it inside a narrow cell.
=================================================================== */
.gp-page-body .gp-pm-image img,
.gp-page-body .gp-pm-col:has(> .gp-pm-image) .gp-pm-image img {
width: auto;
max-width: min(100%, 220px);
height: auto;
}
/* A single-column row is the page's main content image. */
.gp-page-body .gp-pm-row-1 .gp-pm-image img,
.gp-page-body .gp-pm-row.gp-pm-row-1 .gp-pm-image img {
max-width: min(100%, 600px);
}
/* Card / logo grids: every column is a card, so the image fills it. */
.gp-page-body .gp-pm-row:has(> .gp-pm-col:first-child > .gp-pm-image) .gp-pm-image img,
.gp-page-body .gp-pm-row:has(> .gp-pm-col:first-child > .gp-pm-image) .gp-pm-col:has(> .gp-pm-image) .gp-pm-image img {
max-width: min(100%, 300px);
}
/* Centre a single-column content image; it is the focal point of the row. */
.gp-page-body .gp-pm-row-1 .gp-pm-image {
text-align: center;
}
/* Fallback for browsers without :has() - keep images usefully large
rather than falling back to the old 120px. */
@supports not selector(:has(*)) {
.gp-page-body .gp-pm-image img { max-width: min(100%, 300px); }
}
@media (max-width: 700px) {
.gp-page-body .gp-pm-image img,
.gp-page-body .gp-pm-col:has(> .gp-pm-image) .gp-pm-image img {
max-width: min(100%, 220px);
}
.gp-page-body .gp-pm-row-1 .gp-pm-image img,
.gp-page-body .gp-pm-row.gp-pm-row-1 .gp-pm-image img {
max-width: 100%;
}
.gp-page-body .gp-pm-row:has(> .gp-pm-col:first-child > .gp-pm-image) .gp-pm-image img {
max-width: min(100%, 260px);
}
}
/* The "More Literature & Resources" panel is one grey box split into three
columns (the .gp-pm-row:has(> .gp-pm-col > .gp-sub-links) rule above).
The .gp-sub-links component carries its own background and red rule for
standalone use, which doubles up inside that panel - neutralise it there. */
.gp-pm-row:has(> .gp-pm-col > .gp-sub-links) .gp-sub-links {
background: none;
border-left: 0;
padding: 0 0.75rem;
margin-bottom: 0;
}
/* What's New: line the two images up on a common baseline.
Carly: "Can the ACTup photo align horizontally with the combat mat image?"
Both images are the same 2560x1783, so the images were never the problem.
The grid was align-items:start, so each tile sized to its own text - and the
Combat Mat description is several lines longer than the ACTup one, which
pushed its image down and left the two out of line.
Each tile is now a full-height flex column with the media pushed to the
bottom, so the images share a baseline whatever the copy above them does.
Same technique as the icon-card grid, where margin-top:auto holds the
buttons on one line. Marketing can now write copy of any length without
knocking the layout out. */
.gp-whats-new-grid {
align-items: stretch;
}
.gp-whats-new-item {
display: flex;
flex-direction: column;
}
.gp-whats-new-item .gp-whats-new-media {
margin-top: auto;
}
/* ===================================================================
Carly 9/24 - two corrections
------------------------------------------------------------------- */
/* 1. "The star icons are massive" (The Grabber Difference).
Those are the four small product shots in a row - Grabber screws,
SuperDrive N7, CM10P, No-Coat bucket - which read as icons at the
intended size. Live declares imageWidth 150 for each of them.
This is a regression from my own fix on 23 Sep: raising the blanket
120px cap to 300px for card grids was right for partner logos and
wrong for these, which doubled. Live is the reference, so match it
exactly rather than splitting the difference.
A card grid of three or more is an icon row: 150.
A card grid of exactly two is an image beside text - live declares
300 for the Marvin Maxwell portrait in that layout. */
.gp-page-body .gp-pm-row:has(> .gp-pm-col:first-child > .gp-pm-image):has(> .gp-pm-col:nth-child(3)) .gp-pm-image img {
max-width: min(100%, 150px);
}
.gp-page-body .gp-pm-row:has(> .gp-pm-col:first-child > .gp-pm-image):has(> .gp-pm-col:nth-child(2)):not(:has(> .gp-pm-col:nth-child(3))) .gp-pm-image img {
max-width: min(100%, 300px);
}
/* 2. "Scorpion thumbnail cut off. I uploaded a larger version and it is
still being cut off."
Two causes. The catalogue covers we inherited are all 70x100 portrait,
so the thumb was built as a fixed 84x120 box with object-fit:cover -
a 0.7 ratio that those images fill exactly, with nothing cropped.
Carly's replacement is 2000x1765, which is LANDSCAPE. Forcing a 1.13
ratio into a 0.7 box with `cover` crops roughly 38% off the width, so
supplying a better image made the crop worse rather than better.
`contain` letterboxes instead of cropping, so any aspect ratio now
renders whole. The white background fills the unused space, which the
box already had. Slightly larger box since a real asset now exists. */
.gp-catalog-feature-thumb img,
.gp-catalog-card-thumb {
width: 100px;
height: 140px;
object-fit: contain;
}
/* =====================================================================
Accessibility fixes from Meticular's pre-launch review, 15 Oct 2026
===================================================================== */
/* Header drop-downs were mouse-only.
.gp-mega-menu and .gp-mega-flyout were shown on :hover and on a JS
.is-open class, so a keyboard user could Tab to "PRODUCTS" and never
reach anything inside it. :focus-within opens the panel as soon as
focus lands on any descendant, which is what Tab does, and closes it
again when focus leaves - no JS, and it cannot get out of step with
the hover behaviour. */
.gp-nav-item.gp-has-mega:focus-within .gp-mega-menu {
display: block;
}
.gp-mega-item.gp-has-flyout:focus-within .gp-mega-flyout {
display: block;
}
/* Consistent, visible focus.
Reported as weak or missing on the main nav (white on red), the
consent button, the mobile filter button, and inconsistent on the
search icon. One rule, high contrast on both the red chrome and white
content, and only for keyboard users so mouse clicks stay clean. */
.gp-main-nav a:focus-visible,
.gp-main-nav button:focus-visible,
.gp-utility-bar a:focus-visible,
.gp-search-form button:focus-visible,
.gp-search-form input:focus-visible,
.gp-logo:focus-visible,
.gp-menu-toggle:focus-visible {
outline: 3px solid #fff;
outline-offset: 2px;
border-radius: 2px;
}
.gp-filter-toggle:focus-visible,
.gp-facet-close:focus-visible,
.gp-facet-collapse-all:focus-visible,
.gp-facet-summary:focus-visible,
.cmplz-manage-consent:focus-visible,
.cmplz-btn:focus-visible,
.footer-col a:focus-visible,
.footer-col__cta:focus-visible,
.site-footer__legal a:focus-visible {
outline: 3px solid var(--gp-red, #BB0027);
outline-offset: 2px;
border-radius: 2px;
}
/* The consent banner sits on its own white panel, so the red ring above
works there - but the floating "Your Privacy Choices" trigger can land
on either, so give it a ring that reads on both. */
.cmplz-manage-consent:focus-visible {
outline: 3px solid #1a1a1a;
box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.9);
}
/* Filter options are now keyboard-operable (see catalog-filters.js), so
they need a focus ring of their own - without this the fix works but is
invisible, which is no use to a sighted keyboard user. */
.gp-facet-sidebar .facetwp-checkbox:focus-visible,
.gp-facet-sidebar .facetwp-link:focus-visible {
outline: 3px solid var(--gp-red, #BB0027);
outline-offset: 1px;
border-radius: 2px;
}
/* The live region that announces result counts must be available to a
screen reader but never visible. Clip rather than display:none, which
would hide it from assistive technology as well. */
.screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* A drawer marked inert should not respond to a stray click either. */
.gp-facet-sidebar[inert] {
pointer-events: none;
}
/* =====================================================================
Layout shift on the form pages - Meticular, 15 Oct 2026
=====================================================================
CLS measured at ~0.91 on /contact-us/, with the same risk on the
subscriber and catalog order forms. Two causes, both fixed here.
1. The HubSpot form is injected by JavaScript into an empty div. Until
it arrives the div is zero-height, so everything below it - the rest
of the page and the whole footer - sits too high and then jumps down
when the form renders. That is the bulk of the 0.91.
Reserving height stops the jump. The values below are an ESTIMATE:
HubSpot's form definition endpoint returns nothing for this form, so
the height could not be measured from here, and there is no browser
in this environment to render it. They are deliberately a little
generous - a small gap under the form is a far smaller problem than
the page lurching - and they should be tuned once somebody can
measure the rendered height. Tune these numbers, do not remove them.
2. Web font swap. font-display:swap keeps text visible while URW DIN
loads, which is right, but the fallback and the real face have
different metrics so the text reflows on arrival. Preloading the two
woff2 files (see gp_preload_fonts in functions.php) shortens that
window; the remaining shift is small and confined to text.
===================================================================== */
#hubspot-contact-form,
.gp-hubspot-form,
.hbspt-form {
min-height: 620px;
}
@media (max-width: 782px) {
/* Fields stack on a phone, so the same form is considerably taller. */
#hubspot-contact-form,
.gp-hubspot-form,
.hbspt-form {
min-height: 780px;
}
}
/* Once the form is actually in the DOM, let it size itself - otherwise a
short form leaves a permanent gap. The class is added by the embed
itself, so this needs no JavaScript of ours. */
#hubspot-contact-form:has(form),
.gp-hubspot-form:has(form),
.hbspt-form:has(form) {
min-height: 0;
}
.gp-pm-image-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.gp-pm-image-grid .gp-pm-image { margin: 0; }
.gp-pm-image-grid img {
width: 50%;
aspect-ratio: 1 / 1;
object-fit: cover;
display: block;
}
.gp-pm-row { display: flex; gap: 30px; }
.gp-pm-row > .gp-pm-col { flex: 1; }
@media (max-width: 768px) { .gp-pm-row { flex-direction: column; }
}
/* ===== Hero banner fixes ===== */
/* 1. Phones: the "media must never push the page wider" rule
(.gp-page-body img { height: auto }) out-ranks .gp-banner-img and
shrinks the image, leaving a grey band. Restore the full-cover fill. */
.gp-page-body .gp-banner-img {
height: 100%;
}
/* 2. The Grabber Difference: full-width hero like the Optimizely page,
sitting directly under the red header. */
.page-id-5386 .gp-page-content { padding-top: 0; }
.page-id-5386 .gp-banner-hero {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-top: 0;
margin-bottom: 0;
min-height: 430px;
border-radius: 0;
}
.page-id-5386 .gp-banner-hero .gp-banner-body {
max-width: 1200px;
margin: 0 auto;
padding: 2rem 2.5rem;
justify-content: flex-start;
}
.page-id-5386 .gp-banner-hero .gp-banner-heading { font-size: 2.6rem; }
.page-id-5386 { overflow-x: clip; } /* 100vw includes the scrollbar; stop a sideways scroll */
/* 3. Hide the page title above the hero (still read by screen readers & Google). */
.page-id-5386 .gp-page-content > h1 {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
@media (max-width: 700px) {
.page-id-5386 .gp-banner-hero { min-height: 340px; }
.page-id-5386 .gp-banner-hero .gp-banner-heading { font-size: 1.7rem; }
.page-id-5386 .gp-banner-hero .gp-banner-body { padding: 2rem 1.25rem; }
}
/* ===================================================================
The Grabber Difference page
Mirrors the Optimizely layout: centred content, image/text rows,
grey dividers between sections, 2x2 feature grid, small product tiles.
=================================================================== */
.gp-gd {
max-width: 1080px;
margin: 0 auto;
padding: 3rem 1rem 1rem;
}
.gp-gd section {
max-width: 880px;
margin: 0 auto;
}
/* Grey rule between sections */
.gp-gd-divider {
border: 0;
border-top: 1px solid #CFCFCF;
margin: 3.5rem 0;
}
/* Centred section heading (THE GRABBER DIFFERENCE / LET US SHOW YOU...) */
.gp-page-body .gp-gd-heading {
text-align: center;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1.2;
color: #212121;
margin: 0 0 3.5rem;
}
/* Small red-ruled title, left-aligned */
.gp-page-body .gp-gd-title {
margin: 0 0 1.25rem;
padding: 0.55rem 0;
border-top: 1px solid var(--gp-red, #BB0027);
border-bottom: 1px solid var(--gp-red, #BB0027);
text-align: left;
text-transform: uppercase;
letter-spacing: 0.02em;
font-size: 0.85rem;
font-weight: 700;
color: #212121;
}
.gp-gd p {
font-size: 0.9rem;
line-height: 1.7;
margin: 0 0 1rem;
}
.gp-gd-center { text-align: center; }
/* WordPress auto-formatting adds
and empty tags to this markup;
inside the grids they become extra cells, so hide them. */
.gp-gd p:empty,
.gp-gd-tiles br { display: none; }
/* Image | text row */
.gp-gd-split {
display: flex;
align-items: center;
gap: 3.5rem;
}
.gp-gd-media { flex: 0 0 48%; }
.gp-gd-media-sm { flex-basis: 40%; text-align: center; }
.gp-gd-media-sm img { max-width: 280px; }
.gp-gd-text { flex: 1; min-width: 0; }
.gp-gd-media img {
display: block;
width: 100%;
height: auto;
}
.gp-gd-media-sm img { margin: 0 auto; }
/* 2x2 feature grid */
.gp-gd-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem 3.5rem;
max-width: 720px;
margin: 0 auto;
}
/* Portfolio: text left, small 2x2 product tiles right */
.gp-gd-portfolio .gp-gd-text { flex: 1 1 55%; }
.gp-gd-tiles {
flex: 0 0 auto;
display: grid;
grid-template-columns: repeat(2, 120px);
gap: 1.5rem 3rem;
}
.gp-gd-tiles img {
display: block;
width: 120px;
height: 120px;
object-fit: cover;
}
/* Phones / small tablets: stack everything */
@media (max-width: 768px) {
.gp-gd-split { flex-direction: column; gap: 1.5rem; }
.gp-gd-media, .gp-gd-media-sm { flex-basis: auto; width: 100%; }
.gp-gd-grid { grid-template-columns: 1fr; gap: 2rem; }
.gp-gd-tiles { grid-template-columns: repeat(2, 1fr); gap: 1rem; width: 100%; max-width: 320px; margin: 0 auto; }
.gp-gd-tiles img { width: 100%; height: auto; aspect-ratio: 1 / 1; }
.gp-gd-divider { margin: 2.5rem 0; }
.gp-page-body .gp-gd-heading { margin-bottom: 2rem; }
}
/* Hero copy: white on the dark hero image, red accent, red CTA button.
(The grey .gp-hero-caption colours above were for the old light video.) */
.gp-hero-caption { color: #fff; z-index: 2; max-width: 46%; }
.gp-hero-caption h1 {
color: #fff;
font-size: clamp(1.75rem, 2.6vw, 2.75rem);
line-height: 1.15;
}
.gp-hero-caption .gp-red-text { color: var(--gp-red, #BB0027); }
.gp-hero-subheadline {
margin: 0.75rem 0 1.5rem;
color: #fff;
font-size: 1.05rem;
}
.gp-home a.gp-hero-button,
.gp-home a.gp-hero-button:visited {
display: inline-block;
padding: 0.75rem 1.6rem;
background: var(--gp-red, #BB0027);
color: #fff;
border: 2px solid var(--gp-red, #BB0027);
border-radius: 2px;
font-family: "URWDINStdBold", Arial, Helvetica, sans-serif;
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
text-decoration: none;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.gp-home a.gp-hero-button:hover,
.gp-home a.gp-hero-button:focus-visible {
background: var(--gp-red-dark, #95001F);
border-color: var(--gp-red-dark, #95001F);
color: #fff;
}
.gp-home a.gp-hero-button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (max-width: 767px) {
/* Keep the copy in the black sky at the top of the portrait image. */
.gp-hero-caption { max-width: 90%; top: 1.75rem; transform: none; }
.gp-hero-subheadline { font-size: 0.95rem; margin-bottom: 1rem; }
}
/* ===================================================================
Site-wide content width
One value controls how wide the header, page content, homepage
sections and footer are, so their left and right edges line up on
every page. Backgrounds, banners and red rules stay full-bleed; only
the content inside them is capped and centred.
Change --gp-site-width to make the whole site wider or narrower.
Every container below is border-box with 1.5rem side padding, so the
visible content edge is the same everywhere.
=================================================================== */
:root { --gp-site-width: 1400px; }
.gp-utility-inner,
.gp-header-inner,
.gp-footer-inner,
.site-footer .site-footer__inner, /* footer.css loads after style.css */
.gp-page-content,
.gp-pm-page,
.gp-part-lookup,
.gp-family-index,
.gp-family-archive,
.gp-home-free,
.gp-whats-new,
.gp-resources { max-width: var(--gp-site-width); }
/* Homepage sections whose inner wrapper has no side padding of its own. */
.gp-catalog-promo-inner,
.gp-featured-grid,
.gp-application-grid { max-width: calc(var(--gp-site-width) - 3rem); }
/* Full-width hero copy on The Grabber Difference lines up with the logo. */
.page-id-5386 .gp-banner-hero .gp-banner-body { max-width: var(--gp-site-width); padding-left: 1.5rem; padding-right: 1.5rem; }
/* Phones: image rows (.gp-pm-row with a .gp-pm-image) stack.
The 700px rule above is meant to do this, but the desktop column rules
(2.4fr 1fr 1fr, 1.4fr 1fr, ...) use longer :has()/:not() selectors and
out-rank it, so phones kept the 3-column desktop grid. !important is the
only reliable way past selectors that specific. */
@media (max-width: 700px) {
.gp-page-body .gp-pm-row:has(> .gp-pm-col > .gp-pm-image) {
grid-template-columns: 1fr !important;
}
/* Text + two catalog covers: text full width, covers side by side. */
.gp-page-body .gp-pm-row:has(> .gp-pm-col:nth-child(3) > .gp-pm-image):not(:has(> .gp-pm-col:first-child > .gp-pm-image)) {
grid-template-columns: 1fr 1fr !important;
}
.gp-page-body .gp-pm-row:has(> .gp-pm-col:nth-child(3) > .gp-pm-image):not(:has(> .gp-pm-col:first-child > .gp-pm-image)) > .gp-pm-col:first-child {
grid-column: 1 / -1;
}
}
/* Last row: let the image fill its column like the two video rows above,
instead of the 280px cap meant for the old square headshot. */
.gp-gd-media.gp-gd-media-sm { flex-basis: 48%; }
.gp-gd-media-sm img { max-width: 100%; }
/* Hero banner: the art is a black panel on the left (for the text) and the
photo on the right, starting about 53% of the way across. On narrower
screens the black panel must not show inside the photo.
- Wide screens (over 1200px): unchanged - text on the black panel, photo
on the right. The image is pinned to its right edge.
- Tablets (701-1200px): text on the left half on black, the photo cropped
to fill the right half.
- Phones (700px and below): the photo on top, cropped to just the photo,
full width, with the text underneath on black. */
.gp-banner-hero .gp-banner-img { object-position: right center; }
@media (max-width: 1200px) {
.gp-page-body .gp-banner-hero {
background: #000;
min-height: 0;
}
.gp-page-body .gp-banner-hero::after { display: none; } /* no dimming: the text is never on the photo here */
.gp-page-body .gp-banner-hero .gp-banner-body {
max-width: none;
margin: 0;
}
}
/* Tablets: side by side. */
@media (min-width: 701px) and (max-width: 1200px) {
.gp-page-body .gp-banner-hero {
display: block;
position: relative;
}
.gp-page-body .gp-banner-hero .gp-banner-img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: auto;
width: 50%;
height: 100%;
aspect-ratio: auto;
max-height: none;
object-fit: cover;
object-position: right center;
}
.gp-page-body .gp-banner-hero .gp-banner-body {
position: relative;
width: 50%;
min-height: 360px;
padding: 2rem 1.75rem;
justify-content: center;
}
}
/* Phones: stacked, photo only. A 7:5 crop pinned to the right edge stays
inside the photo (which is about 3:2), so no black shows at either side. */
@media (max-width: 700px) {
.gp-page-body .gp-banner-hero {
display: flex;
flex-direction: column;
}
.gp-page-body .gp-banner-hero .gp-banner-img {
position: static;
width: 100%;
height: auto;
aspect-ratio: 7 / 5;
max-height: none;
object-fit: cover;
object-position: right center;
}
.gp-page-body .gp-banner-hero .gp-banner-body {
min-height: 0;
align-self: stretch;
padding: 1.25rem 1.25rem 1.5rem;
}
}
/* What's New: images at 65% of their column (about a third smaller),
centred under their text. Phones keep the full width - there the
images are already small. Change 65% to tune: 75% = 25% smaller,
60% = 40% smaller. */
@media (min-width: 783px) {
.gp-whats-new-item .gp-whats-new-media {
width: 65%;
margin-left: auto;
margin-right: auto;
}
}
/* Homepage hero: always fill the full width of the banner.
The ![]()
carries width="1920" from WordPress, so on screens wider than
1920px it stopped there and the black section background showed to its
right. Stretch it to 100% instead, and cap the height at 600px so very
wide screens don't get a giant banner - object-fit crops the top and
bottom rather than squashing the photo, keeping the right-hand side
(the subject) in view. */
.gp-hero picture,
.gp-hero .gp-hero-image {
display: block;
width: 100%;
}
.gp-hero .gp-hero-image {
height: auto;
max-height: 600px;
object-fit: cover;
object-position: right center;
}
/* Homepage: light grey from "Search Fasteners by Application" down to the
footer, the same #f7f7f7 as the category row and Featured Products, to
break up the run of white. Grabber Resources is a centred box, so its grey
is extended to the screen edges with a wide box-shadow (clip-path stops
it spilling above or below the section). */
.gp-by-application {
background: #f7f7f7;
}
.gp-resources {
background: #f7f7f7;
box-shadow: 0 0 0 100vmax #f7f7f7;
clip-path: inset(0 -100vmax);
}
/* "Search Fasteners by Application" heading: same red lines as What's New
and Grabber Resources - a rule above and below, the same width as those
sections' content instead of the full width of the screen. */
.gp-by-application h2,
.gp-featured h2 {
max-width: calc(var(--gp-site-width, 1400px) - 3rem);
margin: 0 auto 2.5rem;
padding: 0.75rem 0;
border-top: 2px solid var(--gp-red, #BB0027);
border-bottom: 2px solid var(--gp-red, #BB0027);
font-size: 1rem;
letter-spacing: 0.08em;
}
/* Hero banners: no dark overlay. The hero art carries its own solid black
panel for the text, so the 50% dimming meant for text-on-photo tiles only
darkened the photo - and only on screens wider than 1100px, since the
stacked tablet/phone layout already drops it. */
.gp-banner-hero::after { display: none; }
/* Find Your GrabberPro: the
tags between the Canada / International /
LBM buttons count as extra spacers in the row, doubling the gap. */
.gp-region-tile-grid-secondary br { display: none; }
/* Phones: centre the stacked buttons, like the region buttons above them. */
@media (max-width: 700px) {
.gp-region-tile-grid-secondary { align-items: center; }
}
/* Dealers / Where to Buy: header image at half size (640px instead of its
full 1280px), lined up with the left edge of the text below it.
Smaller screens keep it at full width. For a centred image instead,
change "margin: 0 0 1.5rem" to "margin: 0 auto 1.5rem". */
.gp-cta-image img {
display: block;
width: 100%;
max-width: 640px;
height: auto;
margin: 0 0 1.5rem;
}
/* Spacing that the empty
lines used to fake: room above and
below the button, and a readable line length for the intro text. */
.gp-cta-content p { max-width: 70ch; }
.gp-cta-content .gp-cta-button { margin: 1.75rem 0; }
/* ===================================================================
Literature & Resources hub
The page's job is to route people to one of eight resource pages, so
the resources come first as large, fully clickable cards; the help
options sit right under them; the descriptive (SEO) copy follows.
=================================================================== */
.gp-lit-lead {
max-width: 70ch;
font-size: 1.05rem;
margin: 0 0 1.75rem;
}
.gp-lit-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
margin: 0 0 2.5rem;
}
.gp-page-body a.gp-lit-card {
display: flex;
flex-direction: column;
gap: 0.45rem;
padding: 1.25rem 1.25rem 1.1rem;
background: #fff;
border: 1px solid var(--gp-border, #E6E7E8);
border-top: 3px solid var(--gp-red, #BB0027);
border-radius: 2px;
/* !important: the site-wide content-link rules (red, underlined) use long
:not() chains that out-rank anything shorter. A whole card is one link,
so it must not inherit link styling. */
color: #333 !important;
text-decoration: none !important;
transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.gp-page-body a.gp-lit-card:hover {
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
border-color: #cfcfcf;
border-top-color: var(--gp-red, #BB0027);
}
.gp-lit-card-title {
font-family: "URWDINStdBold", Arial, Helvetica, sans-serif;
font-weight: 700;
font-size: 1.05rem;
line-height: 1.25;
color: var(--gp-dark, #212121);
}
.gp-lit-card-text {
font-size: 0.9rem;
line-height: 1.5;
flex: 1; /* pushes the "View" line to the bottom so cards line up */
}
.gp-lit-card-go {
margin-top: 0.4rem;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--gp-red, #BB0027);
}
.gp-page-body a.gp-lit-card:hover .gp-lit-card-go { text-decoration: underline; }
/* Help strip */
.gp-lit-help {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem 2rem;
padding: 1.5rem 1.75rem;
margin: 0 0 3rem;
background: #f7f7f7;
border-left: 4px solid var(--gp-red, #BB0027);
}
.gp-lit-help h2 { font-size: 1.2rem; margin: 0 0 0.25rem; }
.gp-lit-help p { margin: 0; }
.gp-lit-help-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
/* Descriptive copy, below the fold on purpose */
.gp-lit-about { max-width: 75ch; }
.gp-lit-about h2 { font-size: 1.1rem; margin: 0 0 0.75rem; }
.gp-lit-about p { font-size: 0.92rem; }
@media (max-width: 1100px) {
.gp-lit-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.gp-lit-lead { font-size: 1rem; margin-bottom: 1.25rem; }
.gp-lit-cards { grid-template-columns: 1fr; gap: 0.75rem; }
.gp-page-body a.gp-lit-card { padding: 1rem; }
.gp-lit-card-text { font-size: 0.88rem; }
.gp-lit-help { padding: 1.25rem; }
.gp-lit-help-actions,
.gp-lit-help-actions .gp-btn { width: 100%; }
}
/* Literature & Resources - fixes after review */
/* WordPress auto-formatting turns the line breaks in this page's HTML into
tags - inside each card (doubling its height) and between cards
(where each
takes a grid cell). They carry no content; hide them. */
.gp-lit-cards br,
.gp-lit-help br { display: none; }
/* Keyboard users get a clear ring on each card (the browser default was a
1px dotted line, easy to miss). */
.gp-page-body a.gp-lit-card:focus-visible {
outline: 3px solid var(--gp-red, #BB0027);
outline-offset: 2px;
}
/* ===================================================================
Literature & Resources child pages (SDS, Certifications, Manuals,
Online Training, Catalogs): one shared layout.
Intro line -> "Find a document" search -> documents grouped in cards
-> partner logos -> the same "Can't find a document?" help strip as the
hub page (styled by the .gp-lit-help rules).
=================================================================== */
.gp-docs-lead {
max-width: 70ch;
font-size: 1.05rem;
margin: 0 0 1.5rem;
}
/* Search box (shown by docs-filter.js; hidden if scripts don't run) */
.gp-docs-filter {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 1rem;
margin: 0 0 1.75rem;
}
.gp-docs-filter[hidden] { display: none; }
.gp-docs-filter label {
font-weight: 700;
color: var(--gp-dark, #212121);
}
.gp-docs-filter input {
flex: 0 1 26rem;
min-width: 0;
padding: 0.7rem 0.9rem;
font: inherit;
border: 1px solid #b5b5b5;
border-radius: 2px;
}
.gp-docs-filter input:focus-visible {
outline: 3px solid var(--gp-red, #BB0027);
outline-offset: 1px;
}
.gp-docs-count {
margin: 0;
font-size: 0.85rem;
color: var(--gp-grey, #666);
}
/* Document groups: cards in two columns on wide screens */
.gp-docs {
columns: 2;
column-gap: 1.25rem;
margin: 0 0 2.5rem;
}
.gp-docs-group {
break-inside: avoid;
margin: 0 0 1.25rem;
padding: 1.1rem 1.25rem 0.6rem;
background: #fff;
border: 1px solid var(--gp-border, #E6E7E8);
border-top: 3px solid var(--gp-red, #BB0027);
border-radius: 2px;
}
.gp-docs-group[hidden] { display: none; }
.gp-page-body .gp-docs-group h2 {
font-size: 1.05rem;
line-height: 1.3;
margin: 0 0 0.5rem;
color: var(--gp-dark, #212121);
}
.gp-page-body .gp-docs-list {
list-style: none;
margin: 0;
padding: 0;
}
.gp-docs-list li {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.25rem 0.6rem;
padding: 0.55rem 0;
border-top: 1px solid var(--gp-border, #E6E7E8);
font-size: 0.92rem;
line-height: 1.4;
}
.gp-docs-list li:first-child { border-top: 0; }
.gp-docs-list li[hidden] { display: none; }
.gp-docs-list a { flex: 1 1 14rem; }
.gp-docs-note {
font-size: 0.8rem;
color: var(--gp-grey, #666);
}
/* What kind of thing opens: PDF / Video / External site */
.gp-docs-type {
flex: 0 0 auto;
margin-left: auto;
padding: 0.05rem 0.45rem;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #555;
background: #f1f1f1;
border-radius: 2px;
}
.gp-docs-empty {
padding: 1rem 1.25rem;
margin: 0 0 2rem;
background: #f7f7f7;
}
.gp-docs-empty[hidden] { display: none; }
/* Partner logos */
.gp-docs-partners { margin: 0 0 2.5rem; }
.gp-page-body .gp-docs-partners h2,
.gp-page-body .gp-docs-heading {
font-size: 1.15rem;
margin: 0 0 0.5rem;
}
.gp-docs-logos {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 1rem;
margin-top: 1rem;
}
.gp-docs-logos a {
display: block;
border: 1px solid var(--gp-border, #E6E7E8);
border-radius: 2px;
background: #fff;
}
.gp-docs-logos img {
display: block;
width: 100%;
height: auto;
}
/* Catalogs: its own featured/grid layout, with the shared heading size */
.gp-page-body .gp-docs-heading { margin-top: 2rem; }
/* WordPress auto-formatting can add
tags; they carry no content here */
.gp-docs br, .gp-docs-partners br, .gp-docs-filter br, .gp-catalog-grid > br { display: none; }
@media (max-width: 900px) {
.gp-docs { columns: 1; }
.gp-docs-logos { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 600px) {
.gp-docs-lead { font-size: 1rem; }
.gp-docs-filter input { flex-basis: 100%; }
.gp-docs-group { padding: 1rem 1rem 0.5rem; }
.gp-docs-logos { grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
}
/* Literature & Resources sub-navigation on phones (see lr-nav.js).
The toggle button only exists once the script has run, so without
JavaScript the full list still shows, exactly as before. */
.gp-lr-toggle { display: none; }
@media (max-width: 782px) {
.gp-lr-nav.gp-lr-collapsible {
padding: 0;
margin-bottom: 1.5rem;
}
.gp-lr-toggle {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
padding: 0.8rem 3rem 0.8rem 1rem;
position: relative;
background: none;
border: 0;
text-align: left;
font: inherit;
color: var(--gp-dark, #1a1a1a);
cursor: pointer;
}
.gp-lr-toggle-kicker {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--gp-grey, #666);
}
.gp-lr-toggle-current {
font-weight: 700;
font-size: 0.95rem;
line-height: 1.3;
}
/* Chevron: points down when closed, up when open. */
.gp-lr-toggle::after {
content: "";
position: absolute;
right: 1.2rem;
top: 50%;
width: 0.6rem;
height: 0.6rem;
border-right: 2px solid var(--gp-red, #BB0027);
border-bottom: 2px solid var(--gp-red, #BB0027);
transform: translateY(-70%) rotate(45deg);
}
.gp-lr-nav.is-open .gp-lr-toggle::after {
transform: translateY(-30%) rotate(-135deg);
}
/* Astra turns every button red on hover/focus/tap; keep this one plain. */
.gp-lr-nav .gp-lr-toggle:hover,
.gp-lr-nav .gp-lr-toggle:focus,
.gp-lr-nav .gp-lr-toggle:active {
background: transparent;
color: var(--gp-dark, #1a1a1a);
}
.gp-lr-toggle:focus-visible {
outline: 3px solid var(--gp-red, #BB0027);
outline-offset: -3px;
}
.gp-lr-nav.gp-lr-collapsible ul { display: none; }
.gp-lr-nav.gp-lr-collapsible.is-open ul {
display: block;
padding: 0.25rem 1rem 1rem;
border-top: 1px solid var(--gp-border, #E6E7E8);
}
.gp-lr-nav.gp-lr-collapsible li {
margin: 0;
border-bottom: 1px solid var(--gp-border, #E6E7E8);
}
.gp-lr-nav.gp-lr-collapsible li:last-child { border-bottom: 0; }
/* Full-width rows give a comfortable tap target (at least 44px tall). */
.gp-lr-nav.gp-lr-collapsible li a,
.gp-lr-nav.gp-lr-collapsible li > span {
display: block;
padding: 0.7rem 0;
}
}
/* Literature & Resources sub-navigation on phones (see lr-nav.js).
The toggle button only exists once the script has run, so without
JavaScript the full list still shows, exactly as before. */
.gp-lr-toggle { display: none; }
@media (max-width: 782px) {
.gp-lr-nav.gp-lr-collapsible {
padding: 0;
margin-bottom: 1.5rem;
}
.gp-lr-toggle {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
padding: 0.8rem 3rem 0.8rem 1rem;
position: relative;
background: none;
border: 0;
text-align: left;
font: inherit;
color: var(--gp-dark, #1a1a1a);
cursor: pointer;
}
.gp-lr-toggle-kicker {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--gp-grey, #666);
}
.gp-lr-toggle-current {
font-weight: 700;
font-size: 0.95rem;
line-height: 1.3;
}
/* Chevron: points down when closed, up when open. */
.gp-lr-toggle::after {
content: "";
position: absolute;
right: 1.2rem;
top: 50%;
width: 0.6rem;
height: 0.6rem;
border-right: 2px solid var(--gp-red, #BB0027);
border-bottom: 2px solid var(--gp-red, #BB0027);
transform: translateY(-70%) rotate(45deg);
}
.gp-lr-nav.is-open .gp-lr-toggle::after {
transform: translateY(-30%) rotate(-135deg);
}
/* Astra turns every button red on hover/focus/tap; keep this one plain. */
.gp-lr-nav .gp-lr-toggle:hover,
.gp-lr-nav .gp-lr-toggle:focus,
.gp-lr-nav .gp-lr-toggle:active {
background: transparent;
color: var(--gp-dark, #1a1a1a);
}
.gp-lr-toggle:focus-visible {
outline: 3px solid var(--gp-red, #BB0027);
outline-offset: -3px;
}
.gp-lr-nav.gp-lr-collapsible ul { display: none; }
.gp-lr-nav.gp-lr-collapsible.is-open ul {
display: block;
padding: 0.25rem 1rem 1rem;
border-top: 1px solid var(--gp-border, #E6E7E8);
}
.gp-lr-nav.gp-lr-collapsible li {
margin: 0;
border-bottom: 1px solid var(--gp-border, #E6E7E8);
}
.gp-lr-nav.gp-lr-collapsible li:last-child { border-bottom: 0; }
/* Full-width rows give a comfortable tap target (at least 44px tall). */
.gp-lr-nav.gp-lr-collapsible li a,
.gp-lr-nav.gp-lr-collapsible li > span {
display: block;
padding: 0.7rem 0;
}
}
/* ===================================================================
Sustainable Construction - LEED
Uses the shared Literature page styles (.gp-docs-*, .gp-lit-help);
these rules add the key-facts strip, product cards and commitment block.
=================================================================== */
.gp-page-body .gp-leed-facts {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
list-style: none;
margin: 0 0 2.5rem;
padding: 0;
}
.gp-leed-facts li {
display: flex;
flex-direction: column;
gap: 0.35rem;
margin: 0;
padding: 1.1rem 1.25rem;
background: #f7f7f7;
border-left: 4px solid var(--gp-red, #BB0027);
}
.gp-leed-fact-num {
font-family: "URWDINStdBold", Arial, Helvetica, sans-serif;
font-weight: 700;
font-size: 1.5rem;
line-height: 1.1;
color: var(--gp-dark, #212121);
}
.gp-leed-fact-text { font-size: 0.9rem; line-height: 1.45; }
.gp-leed-products {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
margin: 0 0 2.5rem;
}
.gp-leed-product {
display: flex;
gap: 1.25rem;
align-items: flex-start;
padding: 1.25rem;
background: #fff;
border: 1px solid var(--gp-border, #E6E7E8);
border-top: 3px solid var(--gp-red, #BB0027);
}
.gp-leed-product-img { flex: 0 0 34%; }
.gp-leed-product-img img { display: block; width: 100%; height: auto; }
.gp-leed-product-body { min-width: 0; }
.gp-page-body .gp-leed-product h3 { font-size: 1.05rem; line-height: 1.3; margin: 0 0 0.5rem; }
.gp-leed-code { font-size: 0.8rem; color: var(--gp-grey, #666); white-space: nowrap; }
.gp-leed-product p { font-size: 0.92rem; }
.gp-leed-product-links {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1.25rem;
margin: 0.75rem 0 0;
}
.gp-leed-commit {
display: grid;
grid-template-columns: 1fr 320px;
gap: 2rem;
align-items: start;
margin: 0 0 2.5rem;
}
.gp-leed-commit-text { max-width: 75ch; }
.gp-leed-commit ul { margin: 0 0 0 1.25rem; padding: 0; }
.gp-leed-commit li { margin: 0 0 0.4rem; }
.gp-leed-commit-img img { display: block; width: 100%; height: auto; }
/* WordPress auto-formatting can add
tags; they carry no content here */
.gp-leed-facts br, .gp-leed-products br, .gp-leed-commit br { display: none; }
@media (max-width: 900px) {
.gp-leed-products { grid-template-columns: 1fr; }
.gp-leed-commit { grid-template-columns: 1fr; }
.gp-leed-commit-img { display: none; } /* decorative; keeps the page short on phones */
}
@media (max-width: 700px) {
.gp-page-body .gp-leed-facts { grid-template-columns: 1fr; gap: 0.6rem; }
.gp-leed-facts li { flex-direction: row; align-items: baseline; gap: 0.75rem; padding: 0.85rem 1rem; }
.gp-leed-fact-num { font-size: 1.15rem; flex: 0 0 auto; }
}
@media (max-width: 480px) {
.gp-leed-product { flex-direction: column; }
.gp-leed-product-img { flex: none; width: 60%; }
}
/* Homepage hero on phones: copy above the photo, not on top of it.
Overlaid on the portrait image, the copy only fit in the black area at
the top while the headline stayed on two lines; on narrow phones (or with
larger text settings) it wrapped and the button landed on the worker's
face. Stacked, the two can never collide. The photo below is cropped to
its lower part, since its black top area is no longer needed behind the text. */
@media (max-width: 767px) {
.gp-hero { display: flex; flex-direction: column; }
.gp-hero-caption {
position: static;
order: -1;
max-width: none;
transform: none;
padding: 1.5rem 1rem 1.75rem;
}
.gp-hero .gp-hero-image {
aspect-ratio: 7 / 5;
height: auto;
object-fit: cover;
object-position: center bottom;
}
}
/* Tablets: the wide banner is only ~240-340px tall here, so centre the copy
vertically instead of placing it at 40%, which pushed the headline up
against the top edge. */
@media (min-width: 768px) and (max-width: 1100px) {
.gp-hero-caption { top: 50%; }
}
//* TrueShear product page. Scoped to .gp-ts-* so other products are unaffected. */
.gp-product-description .gp-ts-lead { font-size: 1.05rem; max-width: 70ch; }
.gp-product-description .gp-ts-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.25rem 0 2rem; }
.gp-product-description h2 { font-size: 1.25rem; margin: 2rem 0 0.75rem; }
.gp-ts-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 0 0 1.25rem; }
.gp-ts-benefits > div { padding: 1rem 1.15rem; background: #f7f7f7; border-top: 3px solid var(--gp-red, #BB0027); }
.gp-product-description .gp-ts-benefits h3 { font-size: 1rem; margin: 0 0 0.5rem; }
.gp-ts-benefits ul { margin: 0 0 0 1.1rem; padding: 0; font-size: 0.92rem; }
.gp-ts-benefits li { margin: 0 0 0.35rem; }
.gp-ts-table-wrap { overflow-x: auto; margin: 0 0 1rem; }
.gp-ts-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.gp-ts-table th, .gp-ts-table td { padding: 0.6rem 0.8rem; text-align: left; border-bottom: 1px solid var(--gp-border, #E6E7E8); vertical-align: top; }
.gp-ts-table thead th { background: #555; color: #fff; font-weight: 700; }
.gp-ts-table tbody th { font-weight: 700; width: 32%; background: #f7f7f7; }
.gp-product-description .gp-ts-note { font-size: 0.88rem; color: var(--gp-grey, #666); }
.gp-ts-notes { margin: 0 0 1rem 1.1rem; padding: 0; font-size: 0.92rem; }
.gp-product-description .gp-ts-warning { padding: 0.85rem 1.1rem; background: #fff7e0; border-left: 4px solid #e0a800; font-size: 0.92rem; }
.gp-ts-safety { padding: 1rem 1.25rem; background: #f7f7f7; border-left: 4px solid var(--gp-red, #BB0027); font-size: 0.92rem; }
.gp-ts-safety ul { margin: 0.5rem 0 0 1.1rem; padding: 0; }
.gp-ts-safety li { margin: 0 0 0.3rem; }
.gp-product-description .gp-lit-help { margin: 2rem 0 0; }
.gp-product-description br { display: none; }
@media (max-width: 900px) { .gp-ts-benefits { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
.gp-product-description .gp-ts-actions .gp-btn { width: 100%; text-align: center; }
.gp-ts-table th, .gp-ts-table td { padding: 0.5rem 0.6rem; }
.gp-ts-table tbody th { width: auto; }
}
/* Buttons: the site's .gp-btn colours are scoped to .gp-page-body, which the
product template doesn't use, so buttons here would show as plain links. */
.gp-product-description a.gp-btn {
display: inline-block;
padding: 0.75rem 1.5rem;
border: 2px solid var(--gp-red, #BB0027);
border-radius: 2px;
font-family: "URWDINStdBold", Arial, Helvetica, sans-serif;
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
text-decoration: none;
text-align: center;
}
.gp-product-description a.gp-btn-primary { background: var(--gp-red, #BB0027); color: #fff; }
.gp-product-description a.gp-btn-primary:hover,
.gp-product-description a.gp-btn-primary:focus-visible { background: var(--gp-red-dark, #95001F); border-color: var(--gp-red-dark, #95001F); color: #fff; }
.gp-product-description a.gp-btn-outline { background: transparent; color: var(--gp-grey, #444); border-color: var(--gp-grey, #444); }
.gp-product-description a.gp-btn-outline:hover,
.gp-product-description a.gp-btn-outline:focus-visible { background: var(--gp-grey, #444); color: #fff; }
.gp-product-description .gp-lit-help-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
/* Demo request form: the Request a demo buttons jump here. The scroll margin
keeps the heading clear of the sticky header. The form's reserved height
(so the page doesn't jump while HubSpot loads) comes from the existing
.gp-hubspot-form rules. */
.gp-product-description #request-demo { scroll-margin-top: 7rem; }
.gp-ts-form { max-width: 720px; margin: 0 0 1rem; }
/* Part-number and connection lists (used on the TrueFramer page too) */
.gp-product-description .gp-ts-parts {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
gap: 0.5rem 0.75rem;
list-style: none;
margin: 0 0 1rem;
padding: 0;
}
.gp-product-description .gp-ts-parts-wide { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.gp-ts-parts li {
margin: 0;
padding: 0.5rem 0.75rem;
background: #f7f7f7;
border-left: 3px solid var(--gp-red, #BB0027);
font-size: 0.92rem;
}
.gp-product-description h3 { font-size: 1rem; margin: 1.25rem 0 0.5rem; }
tags between the Canada / International / LBM buttons count as extra spacers in the row, doubling the gap. */ .gp-region-tile-grid-secondary br { display: none; } /* Phones: centre the stacked buttons, like the region buttons above them. */ @media (max-width: 700px) { .gp-region-tile-grid-secondary { align-items: center; } } /* Dealers / Where to Buy: header image at half size (640px instead of its full 1280px), lined up with the left edge of the text below it. Smaller screens keep it at full width. For a centred image instead, change "margin: 0 0 1.5rem" to "margin: 0 auto 1.5rem". */ .gp-cta-image img { display: block; width: 100%; max-width: 640px; height: auto; margin: 0 0 1.5rem; } /* Spacing that the empty