/* ============================================================
Anderman & Company — extended.css
------------------------------------------------------------
Restyles three registered blocks to the "feature card" pattern
(photo · bottom gradient · white title · circular arrow button).
ENQUEUE LAST in functions.php — after anderman.css AND
additional.css — so these rules win on equal specificity.
Blocks affected:
product_grid.php → .product-tile-photo (CYAN overlay + ACF icon)
materials_grid.php → .materials-grid-photo (NAVY overlay + formula chip)
industries_grid.php → .deco-bg-industries (light-grey layered gradients)
Uses the existing :root tokens defined in anderman.css.
============================================================ */
/* ---------- Shared feature-card shape (products + materials) ---------- */
.product-tile-photo,
.materials-grid-photo .material-tile {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
isolation: isolate;
overflow: hidden;
border: 0;
border-radius: var(--r-lg);
background-color: var(--dark);
min-height: 300px;
padding: 0;
text-decoration: none;
transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
/* products grid carries .product-grid .product-tile-photo (0,2,0) elsewhere —
match that specificity so the card height/padding actually apply. */
.product-grid .product-tile-photo {
min-height: 300px;
height: auto;
padding: 0;
}
.product-tile-photo:hover,
.materials-grid-photo .material-tile:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-card-hover);
}
/* the photo */
.product-tile-image,
.materials-grid-photo .material-tile-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 1;
transition: transform .6s var(--ease);
}
.product-tile-photo:hover .product-tile-image,
.materials-grid-photo .material-tile:hover .material-tile-image { transform: scale(1.05); }
/* retire the old slug-based ::before/::after photo system on materials —
the block now outputs a real ![]()
from the ACF hero_image. */
.materials-grid-photo .material-tile::before,
.materials-grid-photo .material-tile::after { content: none; }
/* gradient overlay — shared geometry, different hue per block */
.product-tile-cover,
.materials-grid-photo .material-tile-cover {
position: absolute;
inset: 0;
z-index: 2;
transition: opacity .4s var(--ease);
}
/* MATERIALS — neutral navy, darkest at the TOP (flipped vs products) */
.materials-grid-photo .material-tile-cover {
background: linear-gradient(to bottom,
rgba(28,43,58,.94) 0%,
rgba(28,43,58,.78) 28%,
rgba(28,43,58,.30) 62%,
rgba(28,43,58,0) 100%);
}
/* PRODUCTS — deep teal-cyan: dark enough at the base for white text/icon
to stand out on light-on-dark product photos, while the hue still reads
distinctly cyan against the materials navy. */
.product-tile-cover {
background: linear-gradient(to top,
rgba(2,44,66,.97) 0%,
rgba(3,74,104,.90) 26%,
rgba(4,108,150,.58) 52%,
rgba(4,150,205,.16) 80%,
rgba(4,173,238,0) 100%);
}
.product-tile-photo:hover .product-tile-cover,
.materials-grid-photo .material-tile:hover .material-tile-cover { opacity: .92; }
/* title block — anchored bottom, leaves room for the arrow */
.product-tile-photo .product-tile-detail,
.materials-grid-photo .material-tile-detail {
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
gap: .45rem;
padding: 1.5rem 4.25rem 1.6rem 1.5rem;
color: #fff;
}
/* materials title block sits at the TOP, under the dark band */
.materials-grid-photo .material-tile-detail { height: 100%; justify-content: flex-start; }
.product-tile-photo .product-name,
.materials-grid-photo .material-tile h3 {
font-size: 1.18rem;
font-weight: 700;
line-height: 1.25;
color: #fff;
margin: 0;
text-shadow: 0 1px 3px rgba(0,0,0,.35); /* legibility on busy photos */
}
.product-tile-photo .product-desc { display: none; }
/* PRODUCTS — ACF icon (pasted inline