/* ==========================================================================
Homepage hero buttons
==========================================================================
The two hero buttons ("Find by Model Number" / "Find by Part Number") are
Toolset button blocks stored in content template 351146, so their markup is
database content and cannot be edited from the repo:
Everything here is presentation only. No block markup and no database
content is touched, so the whole treatment switches off by removing one body
class and nothing has to be re-saved in the editor.
`.cp-hero-tiles` is put on for the front page by
casiopart_hero_button_variant_class() in functions.php. The design is
240px square tiles with a bevelled edge, replacing the 312px rectangles.
SPLIT LABEL. "Find by" sits above the image, "Model Number" / "Part Number"
below it, at one size and one weight. The block only stores a single string,
so the real is moved off-screen (still read by screen readers and
still the accessible name of the link) and the two visible lines are drawn
as ::before / ::after on the link.
!important is used on the box metrics because two other stylesheets target
the same elements and both load after this file: Toolset's per-block
generated CSS (padding, colours, border) and Customizer > Additional CSS
(`#home-hero .tb-button__link { width: 312px }`).
========================================================================== */
:root {
/* Side of the tile. The rectangles were 312px wide; a square that size is
too tall against a 50vh hero, hence 240. */
--cp-hero-shape-size: 240px;
--cp-hero-shape-size-sm: 190px;
/* Matches the 7.5px used on the search field and menu toggle, scaled up for
the bigger surface. */
--cp-hero-square-radius: 10px;
/* One size and one weight for both lines — the label is a single piece of
text that happens to wrap, not a caption above a heading. 600 is the real
Poppins SemiBold we self-host, so nothing gets synthesised. */
--cp-hero-text-size: 1.25rem;
--cp-hero-text-weight: 600;
/* The live buttons carried a 74px image. The square is narrower than the
312px rectangle it replaces, so 74px read small inside it. */
--cp-hero-icon-size: 92px;
}
/* ------------------------------------------------------------ the tile */
/* Turns the link into a centred column and swaps the single stored label for
a kicker + label pair. */
body.cp-hero-tiles #home-hero .tb-button__link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.35em;
position: relative; /* containing block for the visually-hidden label below */
width: var(--cp-hero-shape-size) !important;
height: var(--cp-hero-shape-size) !important;
padding: 1.25rem !important;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
line-height: 1.2;
text-align: center;
border-radius: var(--cp-hero-square-radius) !important;
}
/* The stored "Find by Model Number" string. Kept in the DOM so the link keeps
its accessible name; the visible text is the two pseudo-elements below. */
body.cp-hero-tiles #home-hero .tb-button__content {
position: absolute !important;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* "Find by" — first flex item, so it lands above the image. */
body.cp-hero-tiles #home-hero .tb-button__link::before {
content: "Find by";
display: block;
font-family: var(--cp-font-display, inherit);
font-size: var(--cp-hero-text-size);
font-weight: var(--cp-hero-text-weight);
letter-spacing: 0.04em;
order: -1;
}
/* The image. Already `display: block` with a 74x74 ::before from Additional
CSS; only the flex-item margins need neutralising. */
body.cp-hero-tiles #home-hero .tb-button__icon {
display: block;
flex: 0 0 auto;
margin: 0;
}
/* A square has all its corners, so the image can go up from the 74px it
carried in the rectangle. Additional CSS sets that without !important, so
this only needs the specificity. */
body.cp-hero-tiles #home-hero .tb-button__icon::before {
width: var(--cp-hero-icon-size) !important;
height: var(--cp-hero-icon-size) !important;
}
/* "Model Number" / "Part Number" — last flex item, below the image. */
body.cp-hero-tiles #home-hero .tb-button__link::after {
display: block;
font-family: var(--cp-font-display, inherit);
font-size: var(--cp-hero-text-size);
font-weight: var(--cp-hero-text-weight);
letter-spacing: 0.01em;
}
body.cp-hero-tiles #browse-models-button .tb-button__link::after {
content: "Model Number";
}
body.cp-hero-tiles #browse-parts-button .tb-button__link::after {
content: "Part Number";
}
/* ------------------------------------------------------------------ edge */
/* The button's border was the same #002e95 as its fill, so the shape had no
edge of its own and dissolved wherever the hero photograph goes dark. The
bevel gives it one and gives it depth: a bright inset line under the top
border and a dark one above the bottom, so the 2px reads as a chamfered
edge rather than a flat outline.
Depth comes from the fill gradient plus inset shadows, so the brand blue is
untouched — #002e95 stays the background-color underneath and the gradient
only lightens the top and darkens the bottom of it. Being inset, the depth
also costs no space: the tile still occupies exactly its 240px. */
body.cp-hero-tiles #home-hero .tb-button__link {
border: 2px solid rgba(255, 255, 255, 0.5) !important;
background-image: linear-gradient(
180deg,
rgba(255, 255, 255, 0.2) 0%,
rgba(255, 255, 255, 0) 45%,
rgba(0, 0, 0, 0.18) 100%
);
box-shadow:
inset 0 2px 0 rgba(255, 255, 255, 0.45), /* top facet, catching light */
inset 0 -3px 0 rgba(0, 0, 0, 0.34), /* bottom facet, in shade */
inset 0 0 0 1px rgba(255, 255, 255, 0.1), /* softens the corner join */
0 7px 16px rgba(0, 0, 0, 0.34); /* contact shadow */
/* Faster than Toolset's blanket `all 0.3s ease`, which makes a press feel
like a fade rather than a click. Colour keeps the slower timing so hover
still eases. */
transition: transform 0.11s ease, box-shadow 0.16s ease, filter 0.16s ease,
background-color 0.3s ease, border-color 0.3s ease;
}
/* The lift and the brightness are what make it obvious that ONE tile is
reacting. At 2px on a 240px square the movement was easy to miss, which made
the pair read as inert together rather than responding one at a time.
Both buttons share these rules, so they stay visual peers. */
body.cp-hero-tiles #home-hero .tb-button__link:hover,
body.cp-hero-tiles #home-hero .tb-button__link:focus-visible {
border-color: #ffffff !important;
transform: translateY(-4px);
filter: brightness(1.08);
box-shadow:
inset 0 2px 0 rgba(255, 255, 255, 0.65),
inset 0 -3px 0 rgba(0, 0, 0, 0.34),
inset 0 0 0 1px rgba(255, 255, 255, 0.16),
0 14px 26px rgba(0, 0, 0, 0.42);
}
/* Pressing flattens the bevel: the top facet dims, the bottom cut deepens. */
body.cp-hero-tiles #home-hero .tb-button__link:active {
transform: translateY(2px);
filter: brightness(0.96);
box-shadow:
inset 0 3px 6px rgba(0, 0, 0, 0.34),
inset 0 -1px 0 rgba(255, 255, 255, 0.16),
0 3px 7px rgba(0, 0, 0, 0.3);
}
/* Depth is decorative; the movement is not required to understand the button. */
@media (prefers-reduced-motion: reduce) {
body.cp-hero-tiles #home-hero .tb-button__link {
transition: none;
}
body.cp-hero-tiles #home-hero .tb-button__link:hover,
body.cp-hero-tiles #home-hero .tb-button__link:focus-visible,
body.cp-hero-tiles #home-hero .tb-button__link:active {
transform: none;
}
}
/* ------------------------------------------------ desktop: page placement */
/* The hero breaks out of the content column to sit full-bleed, so the two
tiles floated in a band that lined up with nothing. Put them back on the
page's own measure: each tile is centred in the space between the page's
horizontal centre line and its side of the content column.
The reference is Storefront's `.col-full` CONTENT box — `max-width:
66.49875rem` with a `2.617925rem` gutter and content-box sizing. That is the
box the logo sits flush inside on the left and the search widget on the
right, and because it is centred in the document, its midpoint IS the page
centre line. Rebuilding it here rather than hardcoding the measured pixels
means the tiles follow if Storefront's container ever changes.
`100% + 50px` undoes the hero's own 25px gutters first, so the box is
measured from the viewport edge exactly as `.col-full` measures it.
The column gap has to be ZERO for this to be true: the grid is two 0.5fr
columns, so only with no gap does the split between them fall on the centre
line and each column become exactly one half of the content box. The tiles
then centre themselves in their column via the auto margins above.
Toolset stacks this grid at 599px, and the tiles drop to 190px below 768px,
so this is scoped above that — narrower screens keep the centred layout. */
@media (min-width: 768px) {
body.cp-hero-tiles #home-hero .tb-grid {
box-sizing: border-box;
width: calc(100% + 50px);
max-width: calc(66.49875rem + 5.23585rem); /* .col-full border box */
padding-left: 2.617925rem; /* .col-full gutter */
padding-right: 2.617925rem;
margin-left: auto;
margin-right: auto;
column-gap: 0; /* split falls on the centre line */
}
}
/* ---------------------------------------------------------------- mobile */
@media (max-width: 767px) {
body.cp-hero-tiles #home-hero .tb-button__link {
width: var(--cp-hero-shape-size-sm) !important;
height: var(--cp-hero-shape-size-sm) !important;
padding: 0.75rem !important;
}
:root {
--cp-hero-text-size: 1.05rem;
--cp-hero-icon-size: 62px;
}
}