/* assets/home-v2.css — homepage v2 layout (inc/homepage-v2.php), modeled on
ultra.md's structure (persistent category sidebar + hero + promo cards,
then a large category tile grid up front) but built entirely from this
theme's own navy/coral design tokens (style.css :root) — no new colors,
radii or shadows are defined here. Loaded only on the front page when v2
is the active homepage version (functions.php). .phv2- prefix keeps this
fully separate from v1's .ph- component CSS in style.css. */
/* ---------- Hero row: sidebar + carousel + promo cards ---------- */
.phv2-herorow {
/* Full-bleed, same 100vw technique as .ph-bleed (style.css) — was
capped at max-width:1280px inside Astra's own (wider) content column,
so the hero/promo row read visibly narrower than the full-bleed brand
strip and category grid sections right below it. max-width here is a
ceiling for ultra-wide monitors, not the everyday width — on common
1440-1920px screens this now renders edge-to-edge (minus padding). */
position: relative;
left: 50%;
transform: translateX(-50%);
width: 100vw;
max-width: 1600px;
margin: 0.5rem 0 var(--pl-section-gap-lg);
padding: 0 1rem;
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
/* Same fix v1's .ph-herorow needs — .printerland-hero-wrap carries its own
max-width/margin/padding for standalone use, which double-applies once
nested inside a grid column that already provides that spacing. */
.phv2-herorow .printerland-hero-wrap { max-width: none; margin: 0; padding: 0; }
@media (min-width: 1024px) {
.phv2-herorow { grid-template-columns: 240px minmax(0, 1fr) 280px; align-items: stretch; }
/* Grid stretch already makes .phv2-herorow-main as tall as the sidebar
(its content-driven height, the tallest of the 3 columns) — but the
carousel itself kept sizing off its own aspect-ratio inside that box,
leaving empty space below it while the 2 promo cards on the other
side filled their column exactly. height:100% down the chain (slide
images already use object-fit:cover, see .ph-slide-img in style.css)
makes the carousel fill the same height the row already allocated it,
so all 3 columns read as one consistent row instead of 2 matching
banners plus a shorter one with a gap underneath. */
.phv2-herorow-main,
.phv2-herorow-main .printerland-hero-wrap,
.phv2-herorow-main .printerland-hero-carousel {
height: 100%;
}
.phv2-herorow-main .printerland-hero-carousel { aspect-ratio: auto; }
/* Subcategory flyout (assets/home-v2.js) — ultra.md's sidebar opens a
panel like this on hover, overlaying the hero/promo columns rather
than pushing the page down. Only relevant at this breakpoint; the
sidebar itself (and the JS that opens this) is desktop-only. Content
markup reuses .ph-mega-menu-subcats/-subcat-pill/-subcat-img
(style.css) as-is — same subcategory list styling as the header
Catalog dropdown, not a second implementation to keep in sync. */
.phv2-flyout {
position: absolute;
top: 0;
bottom: 0;
/* left/width are set inline by assets/home-v2.js from the sidebar's
actual measured rect when it opens, not fixed here — .phv2-herorow
is now a full-bleed, viewport-relative width (see above), so a
hand-derived CSS calc() offset would drift out of sync with it. */
background: var(--pl-white-gradient);
border-radius: var(--pl-radius-card);
box-shadow: var(--pl-shadow-card-lg);
padding: 1.5rem;
overflow-y: auto;
z-index: 20;
}
.phv2-flyout[hidden] { display: none; }
.phv2-sidebar-item.is-active { background: rgb(var(--pl-navy-rgb) / 0.06); color: var(--pl-navy) !important; }
}
/* Persistent category sidebar — desktop only. A fourth stacked column below
the carousel would read as an odd afterthought on mobile/tablet, and the
same categories are already one tap away via the Catalog dropdown and the
category grid further down this page. */
.phv2-sidebar {
display: none;
background: var(--pl-white-gradient);
border-radius: var(--pl-radius-card);
box-shadow: var(--pl-shadow-card);
padding: 1rem 0.5rem;
flex-direction: column;
}
@media (min-width: 1024px) {
.phv2-sidebar { display: flex; }
}
.phv2-sidebar-title {
display: flex;
align-items: center;
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--pl-navy);
padding: 0.35rem 0.6rem 0.75rem;
margin-bottom: 0.25rem;
border-bottom: 2px solid var(--pl-accent);
}
.phv2-sidebar-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.1rem;
overflow-y: auto;
}
.phv2-sidebar-item {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.55rem 0.5rem;
border-radius: var(--pl-radius-sm);
color: var(--pl-navy);
text-decoration: none;
font-size: 0.85rem;
font-weight: 600;
}
/* Astra's global a:hover rule sets an accent/orange text color — without an
explicit override here it bled through on this plain , same collision
class already fixed on the search submit/lang-switcher/wishlist buttons
(see style.css). Force it back to the navy this component was designed
with instead of relying on the default. */
.phv2-sidebar-item:hover {
background: rgb(var(--pl-navy-rgb) / 0.06);
color: var(--pl-navy) !important;
}
.phv2-sidebar-item:hover .phv2-sidebar-chevron {
color: var(--pl-navy);
}
/* Tinted circle chip — matches the icon treatment already used on the
promo cards/contact card; bare stroke icons directly on the white
sidebar background read flat next to those. */
.phv2-sidebar-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 9999px;
background: rgb(var(--pl-navy-rgb) / 0.08);
color: var(--pl-navy);
transition: background-color 0.15s ease, color 0.15s ease;
}
.phv2-sidebar-icon .ph-svg-icon { width: 16px; height: 16px; }
.phv2-sidebar-item:hover .phv2-sidebar-icon,
.phv2-sidebar-item.is-active .phv2-sidebar-icon {
background: var(--pl-navy);
color: #fff;
}
.phv2-sidebar-name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.phv2-sidebar-chevron { color: var(--pl-gray-600); display: flex; flex-shrink: 0; }
.phv2-sidebar-chevron .ph-svg-icon { width: 14px; height: 14px; }
/* Promo cards — finance/installments (informational) + live sale card
(real numbers, same data source as v1's promo banner). */
.phv2-herorow-side { display: grid; grid-template-rows: 1fr 1fr; gap: 1rem; }
.phv2-promo-card {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.3rem;
border-radius: var(--pl-radius-card);
padding: 1.25rem;
min-height: 110px;
text-decoration: none;
overflow: hidden;
transition: transform 0.2s ease;
}
.phv2-promo-card:hover { transform: translateY(-2px); }
.phv2-promo-card-finance {
background: var(--pl-gray-100);
border: 1px solid rgb(var(--pl-navy-rgb) / 0.1);
}
.phv2-promo-card-sale {
background: var(--pl-navy-sheen);
box-shadow: var(--pl-shadow-card-lg);
}
.phv2-promo-card-icon {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 9999px;
margin-bottom: 0.15rem;
}
.phv2-promo-card-finance .phv2-promo-card-icon { background: rgb(var(--pl-navy-rgb) / 0.08); color: var(--pl-navy); }
.phv2-promo-card-sale .phv2-promo-card-icon { background: rgb(255 255 255 / 0.15); color: #fff; }
.phv2-promo-card-icon .ph-svg-icon { width: 18px; height: 18px; }
.phv2-promo-card-title { font-weight: 800; font-size: 1rem; }
.phv2-promo-card-finance .phv2-promo-card-title { color: var(--pl-navy); }
.phv2-promo-card-sale .phv2-promo-card-title { color: #fff; }
.phv2-promo-card-sub { font-size: 0.78rem; }
.phv2-promo-card-finance .phv2-promo-card-sub { color: var(--pl-gray-600); }
.phv2-promo-card-sale .phv2-promo-card-sub { color: rgb(255 255 255 / 0.75); }
.phv2-promo-card-cta {
margin-top: 0.4rem;
align-self: flex-start;
font-size: 0.8rem;
font-weight: 700;
text-decoration: none;
border-radius: 9999px;
padding: 0.4rem 0.9rem;
}
.phv2-promo-card-finance .phv2-promo-card-cta { background: var(--pl-navy-gradient); box-shadow: var(--pl-shadow-chip); color: #fff; }
.phv2-promo-card-sale .phv2-promo-card-cta { background: var(--pl-accent-gradient); box-shadow: var(--pl-shadow-chip); color: #fff; }
/* ---------- Brand pills ---------- */
/* -gap-lg, not the plain -gap — every other full-bleed-band-to-content
transition on this page (category grid -> deal band, deal band ->
product rows, etc.) uses the larger gap; this one was the one outlier
still on the smaller value, measured live as a visibly tighter 40px
next to the 64px used everywhere else. */
.phv2-brands-bleed { background: var(--pl-gray-100); margin: 0 0 var(--pl-section-gap-lg); }
.phv2-brands-bleed .ph-bleed-inner { padding: 1.5rem 1rem; }
.phv2-brands { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.phv2-brand-pill {
display: flex;
align-items: center;
justify-content: center;
min-width: 100px;
height: 52px;
padding: 0.5rem 1.25rem;
border-radius: var(--pl-radius-card);
border: 1px solid rgb(var(--pl-navy-rgb) / 0.12);
background: #fff;
text-decoration: none;
transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.phv2-brand-pill:hover { box-shadow: var(--pl-shadow-card); border-color: transparent; }
.phv2-brand-pill img { max-width: 90px; max-height: 32px; object-fit: contain; }
.phv2-brand-pill-text { font-weight: 700; color: var(--pl-navy); font-size: 0.9rem; letter-spacing: -0.01em; }
/* ---------- Category tile grid — the dominant homepage feature ---------- */
/* Full-bleed gray band, matching the brand-strip/deal-band alternating
rhythm — was a plain white div, blending directly into the white page
background above (brand strip) and below (first product row) with no
visual separation at all (reported/confirmed live). Same 100vw
technique as .phv2-herorow. */
.phv2-catgrid-wrap {
position: relative;
left: 50%;
transform: translateX(-50%);
width: 100vw;
max-width: 1600px;
/* --pl-gray-gradient reads as near-invisible here (#f5f7fa on white,
confirmed live) since this section has no bordered tiles anchoring
its edge the way the category-archive strip does — needs its own
stronger, brand-tinted panel instead of the shared token. */
background: linear-gradient(135deg, rgb(var(--pl-navy-rgb) / 0.05) 0%, rgb(var(--pl-navy-rgb) / 0.1) 100%);
margin: 0 0 var(--pl-section-gap-lg);
padding: 2.5rem 1rem;
}
.phv2-catgrid-title {
max-width: 1280px;
margin: 0 auto 1.25rem;
color: var(--pl-navy);
font-size: 1.6rem;
font-weight: 700;
letter-spacing: -0.01em;
text-align: center;
}
/* Flexbox, not grid — with 8 real categories, a fixed grid-template-
columns leaves the last row's leftover cells empty (e.g. 6-col grid,
row 2 has only 2 tiles, 4 empty slots beside them — reported live).
Flex-wrap + justify-content:center centers whatever's in the last row
instead, same tile sizing per breakpoint via flex-basis. */
.phv2-catgrid {
max-width: 1280px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
}
.phv2-catgrid > .phv2-cattile { flex: 0 0 calc((100% - 1rem) / 2); }
@media (min-width: 640px) {
.phv2-catgrid > .phv2-cattile { flex-basis: calc((100% - 2rem) / 3); }
}
@media (min-width: 1024px) {
/* 4 columns at every desktop width, not 6 above 1280px — with 8 real
categories, 4 columns divides evenly into 2 full rows (6 left an
orphan row of 2, reported live as looking unfinished). Bonus: larger
tiles at wide desktop instead of shrinking further at 6-up. */
.phv2-catgrid > .phv2-cattile { flex-basis: calc((100% - 3rem) / 4); }
}
.phv2-cattile {
position: relative;
display: flex;
flex-direction: column;
/* Solid white, not the gray-tinted --pl-white-gradient — against this
section's now-tinted panel bg, the gradient's gray-100 corner read as
a dirty/gray card instead of a crisp surface (reported live). */
background: #fff;
box-shadow: var(--pl-shadow-card);
border-radius: var(--pl-radius-card);
padding: 1.25rem 1rem 1rem;
text-decoration: none;
transition: box-shadow 0.15s ease;
}
.phv2-cattile:hover { box-shadow: var(--pl-shadow-card-lg); }
.phv2-cattile-arrow {
position: absolute;
top: 1rem;
right: 1rem;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 9999px;
background: var(--pl-gray-100);
color: var(--pl-navy);
}
.phv2-cattile-arrow .ph-svg-icon { width: 14px; height: 14px; }
.phv2-cattile-img {
width: 100%;
aspect-ratio: 1;
max-height: 96px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.75rem;
color: var(--pl-navy);
/* Was a separate white well behind each photo — with the card itself
now solid white, that just created a visible seam where the photo's
own white background met a very slightly different container white
(reported live as a "gray" box). Transparent lets photos sit
directly on the card. */
background: transparent;
border-radius: var(--pl-radius-sm);
}
.phv2-cattile-img img { max-width: 78%; max-height: 78%; object-fit: contain; }
.phv2-cattile-name {
font-weight: 700;
color: var(--pl-navy);
font-size: 0.95rem;
line-height: 1.3;
padding-right: 1.5rem; /* clears the corner arrow on narrow tiles */
}
.phv2-cattile-count { font-size: 0.8rem; color: var(--pl-gray-600); margin-top: 0.2rem; }
/* ---------- SEO text + contact card + static map link ---------- */
.phv2-seo-bleed { background: var(--pl-gray-100); margin: var(--pl-section-gap-lg) 0 0; }
.phv2-seo-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
align-items: start;
}
@media (min-width: 900px) {
.phv2-seo-grid { grid-template-columns: minmax(0, 1fr) 340px; }
}
.phv2-contact-card {
background: var(--pl-white-gradient);
border-radius: var(--pl-radius-card);
box-shadow: var(--pl-shadow-card);
padding: 1.5rem;
}
.phv2-contact-card h3 {
margin: 0 0 1rem;
color: var(--pl-navy);
font-size: 1.1rem;
font-weight: 700;
}
.phv2-contact-row {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.6rem 0;
border-bottom: 1px solid var(--pl-gray-100);
}
.phv2-contact-row:last-of-type { border-bottom: none; }
.phv2-contact-icon {
width: 32px;
height: 32px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 9999px;
background: rgb(var(--pl-navy-rgb) / 0.08);
color: var(--pl-navy);
}
.phv2-contact-icon .ph-svg-icon { width: 16px; height: 16px; }
.phv2-contact-label {
display: block;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--pl-gray-600);
}
.phv2-contact-value { display: block; color: var(--pl-navy); font-size: 0.9rem; font-weight: 600; line-height: 1.5; }
.phv2-contact-value a { color: inherit; text-decoration: none; }
.phv2-contact-map {
margin-top: 1rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
border-radius: var(--pl-radius-card);
background: var(--pl-navy-gradient);
box-shadow: var(--pl-shadow-chip);
color: #fff;
text-decoration: none;
font-weight: 700;
font-size: 0.85rem;
}
.phv2-contact-map:hover { background: var(--pl-ink); color: #fff !important; }
/* ---------- Hover text-color lock ----------
Astra's global a:hover rule sets an accent/orange text color on every
plain — the .phv2-sidebar-item flyout trigger actually shipped with
this bug (icon+label flashed orange on hover, only the background tint
this component was designed with was showing through). Same collision
class already fixed for the search submit/lang-switcher/wishlist buttons
in style.css. Every other clickable card in this file is a plain
too, so lock text color explicitly on each rather than wait for the
same bug to resurface component by component. */
.phv2-cattile:hover .phv2-cattile-name { color: var(--pl-navy) !important; }
.phv2-cattile:hover .phv2-cattile-count { color: var(--pl-gray-600) !important; }
.phv2-brand-pill:hover .phv2-brand-pill-text { color: var(--pl-navy) !important; }
.phv2-promo-card-finance .phv2-promo-card-cta:hover { color: #fff !important; }
.phv2-promo-card-sale:hover .phv2-promo-card-title,
.phv2-promo-card-sale:hover .phv2-promo-card-sub,
.phv2-promo-card-sale:hover .phv2-promo-card-cta { color: #fff !important; }