/*
* Hydro Shield — PPF product page (/products/ppf/).
* Own visual identity, not a homepage-section reskin: the Hero is a
* centered copy block over a large full-width cinematic banner image
* (image as the visual focus, per the brief) rather than the homepage
* Hero's asymmetric side-by-side split. Tone alternates graphite/grey-dark
* the same way the homepage does — Hero/Overview/Process stay graphite,
* Coverage/FAQ/the closing CTA step to grey-dark — so the closing CTA here
* flows straight into the global Footer's own grey-dark CTA band. Cyan
* stays a restrained accent (eyebrows, icons, FAQ markers only). Every
* button here duplicates the established `.hs-*__cta` visual style under
* its own `.hs-ppf__cta` class — this page doesn't load hero.css/
* contact-section.css, so it can't reach into their classes, matching how
* every homepage section already defines its own CTA styles rather than
* sharing one global button class.
*
* REWORKED 2026-09-17 to 7 sections (was 5) with real long-form copy — see
* page-ppf.php's header comment for the reasoning (why zig-zag image
* placement was deliberately rejected, why a "How It's Applied" + FAQ
* section were added).
*/
/* ================= Shared buttons ================= */
.hs-ppf__cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 0.92rem;
font-weight: 700;
letter-spacing: 0.03em;
text-decoration: none;
padding: 16px 30px;
border-radius: var(--hs-radius-sm);
transition: transform var(--hs-duration-fast) var(--hs-ease-standard), box-shadow var(--hs-duration-fast) var(--hs-ease-standard), background var(--hs-duration-fast) var(--hs-ease-standard), border-color var(--hs-duration-fast) var(--hs-ease-standard);
}
.hs-ppf__cta--primary {
background: var(--hs-color-off-white);
color: var(--hs-color-graphite);
border: 1px solid var(--hs-color-off-white);
}
.hs-ppf__cta--primary:hover,
.hs-ppf__cta--primary:focus-visible {
background: #ffffff;
transform: translateY(-1px);
box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.55);
}
.hs-ppf__cta--secondary {
background: transparent;
color: var(--hs-color-text);
border: 1px solid rgba(240, 240, 232, 0.28);
}
.hs-ppf__cta--secondary:hover,
.hs-ppf__cta--secondary:focus-visible {
border-color: var(--hs-color-off-white);
background: rgba(240, 240, 232, 0.06);
transform: translateY(-1px);
}
.hs-ppf__cta:focus-visible {
outline: 2px solid var(--hs-color-accent);
outline-offset: 3px;
}
/* ================= 1. Hero ================= */
/* REWORKED 2026-09-20 (direct user request, structural-layout reference
only — see the project's standing rule: alva.com.my's IA/customer-journey
is a reference, its visual design is never copied). Two columns side by
side in normal flow: a bounded/rounded image gallery box on the LEFT
(was a full-bleed background photo the card floated over) and the
off-white info card on the RIGHT. The card keeps its own established
look (the one deliberate light-on-dark palette exception on this page)
— only the overall arrangement changed, not the colours/branding. */
.hs-ppf-hero {
position: relative;
overflow: hidden;
background: var(--hs-color-bg);
padding: var(--hs-space-6) 0;
}
.hs-ppf-hero__inner {
position: relative;
z-index: 1;
display: grid;
/* Back down from the full-width-filling 1fr version (direct
correction: "ye to images theek say dikhai nahi daitii okay small e
kar doo" — filling all the way to the card, at a fixed height, was
stretching the box wider than the source photos' own aspect and
cropping their left/right edges). 600px pairs with the gallery's
fixed 420px height (below) at roughly a 1.43 aspect, close to the 4
source images' own ~1.35-1.5 aspect, so `object-fit: cover` barely
needs to crop any of them. */
grid-template-columns: minmax(0, 600px) 1fr;
align-items: start;
gap: var(--hs-space-5);
max-width: 1360px;
margin: 0 auto;
width: 100%;
padding: 0 var(--hs-space-4);
}
/* Bounded gallery box — the slides/arrows inside are unchanged from the
old full-bleed version (same crossfade+zoom device, same markup), only
this wrapper's own box changed from "fill the viewport" to "fill this
rounded card". */
/* Fixed HEIGHT, not aspect-ratio (direct correction: "height zada nahi
karni just width" — an earlier aspect-ratio:4/3 pass made the box
taller as it got wider, which wasn't wanted) — width is controlled by
the grid column above instead. 420px matches the height the 4:3 box
had at an earlier 560px-wide size. */
.hs-ppf-hero__gallery {
position: relative;
overflow: hidden;
border-radius: 16px;
height: 420px;
background: rgba(240, 240, 232, 0.04);
}
/* Keyboard-navigable (hero-redesign brief, 2026-09-21) — the gallery box
itself is tabindex="0" (page-ppf.php) so Left/Right arrow keys can step
through slides (page-ppf.js) without needing to tab to the small arrow
buttons first. Cyan ring only on keyboard focus, not on click. */
.hs-ppf-hero__gallery:focus-visible {
outline: 2px solid var(--hs-color-accent);
outline-offset: -2px;
}
/* Image counter ("1 / 4") — small pill, top-right, quiet by default so it
doesn't compete with the photo; page-ppf.js updates the current-index
span on every slide change (manual or auto). */
.hs-ppf-hero__counter {
position: absolute;
z-index: 3;
top: var(--hs-space-4);
right: var(--hs-space-4);
padding: 5px 11px;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.03em;
color: var(--hs-color-off-white);
background: rgba(26, 26, 29, 0.45);
border: 1px solid rgba(240, 240, 232, 0.22);
border-radius: 999px;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.hs-ppf-hero__media {
position: absolute;
inset: 0;
z-index: 0;
}
/* Stacked slides — same crossfade+zoom device as the homepage Hero
(hero.css/hero.js): every slide sits at inset:0, only `.is-active` is
opaque, page-ppf.js swaps that class on a timer and zooms only the
currently-visible slide's own ![]()
(reset to scale:1 while hidden). */
.hs-ppf-hero__slide {
position: absolute;
inset: 0;
opacity: 0;
overflow: hidden;
}
.hs-ppf-hero__slide.is-active {
opacity: 1;
}
.hs-ppf-hero__slide img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* All 4 slides put the Hydroshield PPF product carton near the very
bottom of the source photo — default center/center cropped it off on
this hero's wide/short aspect ratio. Anchoring to the bottom crops
the (unimportant) ceiling/background instead, so the carton stays
fully visible. */
object-position: center bottom;
will-change: transform;
}
/* Manual slider arrows — bottom-center of the gallery box (was bottom-
center of the whole viewport when the photo was full-bleed; same visual
position relative to the image, now scoped to the smaller box). */
.hs-ppf-hero__arrows {
position: absolute;
z-index: 3;
left: 50%;
bottom: var(--hs-space-4);
transform: translateX(-50%);
display: flex;
gap: 10px;
}
.hs-ppf-hero__arrow {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
padding: 0;
appearance: none;
color: var(--hs-color-text);
background: rgba(26, 26, 29, 0.45);
border: 1px solid rgba(240, 240, 232, 0.3);
border-radius: 50%;
cursor: pointer;
transition: background var(--hs-duration-fast) var(--hs-ease-standard), border-color var(--hs-duration-fast) var(--hs-ease-standard), transform var(--hs-duration-fast) var(--hs-ease-standard);
}
.hs-ppf-hero__arrow:hover,
.hs-ppf-hero__arrow:focus-visible {
background: rgba(26, 26, 29, 0.75);
border-color: var(--hs-color-off-white);
}
.hs-ppf-hero__arrow:active {
transform: scale(0.94);
}
.hs-ppf-hero__arrow:focus-visible {
outline: 2px solid var(--hs-color-accent);
outline-offset: 2px;
}
/* Small atmosphere tagline, top-right corner of the section (final-
reference rework, 2026-09-21) — purely decorative brand copy, not
information, so it sits outside the grid rather than taking up a column. */
.hs-ppf-hero__tagline {
position: absolute;
z-index: 2;
top: var(--hs-space-5);
right: var(--hs-space-4);
margin: 0;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--hs-color-text-muted);
opacity: 0.6;
}
@media (max-width: 1023.98px) {
.hs-ppf-hero__tagline {
display: none;
}
}
/* Visual column wrapper (final-reference rework) — the gallery box, the
thumbnail row and the caption stacked as ONE grid column, matching the
provided reference image's left-side composition. */
.hs-ppf-hero__visual {
display: flex;
flex-direction: column;
}
/* Thumbnail row — same 4 images the main gallery already uses, each a
small clickable control. The active thumbnail gets a cyan border (the
one accent colour on this whole row) so it's obvious which image is
currently showing; page-ppf.js keeps this in sync with the main slider
regardless of how the slide was changed (auto-cycle, arrows, keyboard,
or a thumbnail click itself). */
.hs-ppf-hero__thumbs {
display: flex;
gap: 10px;
margin-top: 12px;
}
.hs-ppf-hero__thumb {
flex: 1;
max-width: 96px;
aspect-ratio: 4 / 3;
padding: 0;
overflow: hidden;
appearance: none;
background: rgba(240, 240, 232, 0.05);
border: 2px solid rgba(240, 240, 232, 0.14);
border-radius: 10px;
cursor: pointer;
transition: border-color var(--hs-duration-fast) var(--hs-ease-standard), opacity var(--hs-duration-fast) var(--hs-ease-standard);
}
.hs-ppf-hero__thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center bottom;
opacity: 0.7;
transition: opacity var(--hs-duration-fast) var(--hs-ease-standard);
}
.hs-ppf-hero__thumb:hover {
border-color: var(--hs-color-text-muted);
}
.hs-ppf-hero__thumb:hover img {
opacity: 0.9;
}
.hs-ppf-hero__thumb.is-active {
border-color: var(--hs-color-accent);
box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.14);
}
.hs-ppf-hero__thumb.is-active img {
opacity: 1;
}
.hs-ppf-hero__thumb:focus-visible {
outline: 2px solid var(--hs-color-accent);
outline-offset: 2px;
}
/* Small centered caption under the thumbnails (final-reference rework) —
purely atmospheric copy, matching the reference's composition; no
technical/factual claim, nothing invented. */
.hs-ppf-hero__caption {
margin: 14px 0 0;
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
text-align: center;
color: var(--hs-color-text-muted);
opacity: 0.65;
}
/* ==================================================================
Hero information card — everything under .hs-ppf-hero__card. Nothing
above this comment block (media/slides/gallery/inner/arrows) or below
(every other section) is affected by it.
History (each pass superseded the last, kept here so the reasoning
survives): COMMAND 07 (2026-09-17) reworked an earlier bright-bordered
"spec box" into a translucent warm-white glass card with a left-aligned
icon+label/value spec grid. 2026-09-20 then (a) added the price/badge/
RRP row and rebuilt the spec grid into centered icon-on-top columns
(structural reference: alva.com.my), and (b) recoloured the whole card
from off-white/graphite/cyan to plain white + blue (see the
.hs-ppf-hero__card rule below for why — scoped to this card only, not
a sitewide change). What's still true from COMMAND 07: "Get a Quote" is
the solid/primary button, "Order Now" stays outline/secondary so it
doesn't read as a generic e-commerce buy-button. */
/* REWORKED 2026-09-20 (direct user request: "right section khatam kar kay
alva ki tarhan ka banaooo same juat use white and blue") — the card was
Hydro Shield's usual off-white/graphite/cyan; recoloured to a plain
white + accent-colour scheme (scoped to THIS card only via local custom
properties below, not a sitewide palette change — "left section theek
hai", the gallery/backdrop/rest of the page are untouched). Structure
stays the same (tag, heading, tiers, price, specs, actions) — only
colours changed, per the project's standing "layout only, never ALVA's
actual colours" rule; every colour here is the user's own choice, not
copied from ALVA (which is black/orange/red).
CORRECTION (same day, direct follow-up): accent swapped from the
initial blue (#1d4ed8) to the user-specified teal `#003f3e` — hence
these custom properties being named `--hs-ppf-accent*`, not
`--hs-ppf-blue*` (renamed at the same time so the variable names don't
lie about the colour). Same follow-up also removed the description
paragraph (`.hs-ppf-hero__text`, was between the heading and tier tabs)
— "alva mein price hai nicely fazool text nahi hai" — its copy still
lives in the "Why It Matters" section below, just not duplicated here. */
/* UNBOXED 2026-09-20 (direct user request, with ALVA screenshot: "alva
kay sub kuch alag alag hai lakin ap aik box mein na banao jaisay image
kay nichay price alag" — ALVA's price/title/CTA sit directly on the
page background as separate elements; only its 5-icon spec strip is
its own boxed light card. This card had wrapped ALL of it — tag,
heading, tiers, price, specs, actions — in one white box. Removed that
single box: `.hs-ppf-hero__card` is now just a plain flex column (no
bg/border/shadow), so its children sit directly on the Hero's own dark
background (var(--hs-color-bg) + the blurred backdrop photo) — same as
every other dark-section text on this page. The white boxed-card
treatment MOVED to `.hs-ppf-hero__specs` alone, matching ALVA's one
boxed element. Every child that used to rely on the white background
for contrast (tag, heading, tiers, price value, demo-note, secondary
CTA) was recoloured for dark-bg legibility below — see each rule's own
comment for what changed and why. */
/* Recoloured onto the shared Hydro Shield palette (hero-redesign brief,
2026-09-21) — the earlier bespoke teal (#003f3e) is gone; this card now
pulls from the same --hs-color-* tokens as the rest of the site (cyan
reserved for the option-selector active state + focus rings only). */
.hs-ppf-hero__card {
display: flex;
flex-direction: column;
width: 100%;
max-width: 460px;
}
/* Solid white pill (structural reference: ALVA's own "CAR TINT" pill is
a solid white fill + dark text, not an outline) — reads clearly against
the dark Hero background. Small cyan dot restored as the one accent
touch (matches the tag convention every other product page already
uses). */
.hs-ppf-hero__tag {
display: inline-flex;
align-items: center;
gap: 7px;
margin: 0 0 14px;
padding: 5px 12px;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--hs-color-graphite);
background: #ffffff;
border-radius: 999px;
}
.hs-ppf-hero__tag::before {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--hs-color-accent);
flex-shrink: 0;
}
/* Enlarged + carries the "PPF" short name (direct user request,
2026-09-21) — this pill is now the card's main product-name element,
since the visible heading/description below it were removed by the
same request. */
.hs-ppf-hero__tag--lg {
margin: 0 0 20px;
padding: 9px 18px;
font-size: 1rem;
letter-spacing: 0.04em;
}
.hs-ppf-hero__tag--lg::before {
width: 7px;
height: 7px;
}
.hs-ppf-hero__tag-short {
font-weight: 800;
color: var(--hs-color-accent);
}
.hs-ppf-hero__heading {
/* White now the card has no white background behind it (was
var(--hs-ppf-ink), a near-black, when this sat on the white card). */
margin: 0 0 10px;
font-size: 1.5rem;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--hs-color-off-white);
}
/* Visually hidden but still readable by screen readers/SEO crawlers
(direct user request, 2026-09-21, removed the VISIBLE heading + one-line
description that used to sit here) — a page still needs exactly one
real , so it's kept in the markup, just taken out of visual flow.
Standard "sr-only" clip pattern. */
.hs-ppf-hero__heading--sr {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Section divider (sales-UI rework, 2026-09-21 follow-up) — a hairline
separating PRODUCT / PRICE / OPTIONS / BENEFITS into clearly distinct
groups, per the brief's "clear visual grouping" requirement. Deliberately
plain (no label) — the group headings/labels themselves already say what
follows. */
.hs-ppf-hero__divider {
height: 1px;
margin: 4px 0 16px;
background: rgba(240, 240, 232, 0.12);
}
/* Contextual label above the option selector (hero-redesign brief) — a
first-time visitor needs this to understand the row of pills below is
clickable product variants, not decoration. */
.hs-ppf-hero__tiers-label {
margin: 0 0 8px;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--hs-color-text-muted);
}
/* Tier tabs (2026-09-18, direct client follow-up) — inactive state
recoloured to a light outline + off-white text (same convention this
page already uses for secondary buttons/text on its dark sections),
now that these sit directly on the dark Hero background instead of a
white card. Active stays a solid teal fill, which still reads fine on
dark since it's a filled block, not a thin outline.
assets/js/page-ppf.js's initTierTabs() swaps .hs-ppf-hero__specs-value
text + the price by index when a tab is clicked — no layout shift, since
every tier has the same 5 spec rows, only the values differ. */
.hs-ppf-hero__tiers {
display: flex;
gap: 8px;
margin: 0 0 4px;
}
/* Option selector (hero-redesign brief, 2026-09-21) — rebuilt so the
selected state can never read as ambiguous/decorative. Unselected pills
get a visible border + off-white text on a faintly lighter fill (not
just transparent) so they read as tappable surfaces on their own, not
just labels; selected flips to a solid off-white fill (this card's own
"important readable info" colour, same language as the tag pill/price)
with a 2px cyan border and a small cyan checkmark — cyan stays scoped to
exactly this one active-state accent, never a full cyan fill, per the
brief's "do not make the entire hero cyan" rule. */
.hs-ppf-hero__tier {
position: relative;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 10px 6px;
appearance: none;
font: inherit;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
text-align: center;
color: var(--hs-color-off-white);
background: rgba(240, 240, 232, 0.05);
border: 1px solid rgba(240, 240, 232, 0.3);
border-radius: 8px;
cursor: pointer;
transition: background var(--hs-duration-fast) var(--hs-ease-standard), border-color var(--hs-duration-fast) var(--hs-ease-standard), color var(--hs-duration-fast) var(--hs-ease-standard), transform var(--hs-duration-fast) var(--hs-ease-standard);
}
.hs-ppf-hero__tier:hover {
border-color: var(--hs-color-text-muted);
background: rgba(240, 240, 232, 0.1);
}
/* FINAL-REFERENCE REWORK (2026-09-21): active state recoloured from a
solid off-white fill onto a dark surface + glowing cyan border, matching
the provided reference image (the reference never fills a selected
option white — it keeps the dark surface and lets the cyan border/glow
carry the "selected" signal). */
.hs-ppf-hero__tier.is-active {
background: rgba(0, 229, 255, 0.08);
border: 2px solid var(--hs-color-accent);
color: var(--hs-color-off-white);
box-shadow: 0 0 18px -4px rgba(0, 229, 255, 0.55);
}
.hs-ppf-hero__tier.is-active:hover {
background: rgba(0, 229, 255, 0.13);
}
.hs-ppf-hero__tier:active {
transform: translateY(1px);
}
/* Small check mark — only ever visible on the active pill, communicating
"I am currently selected" beyond colour alone (the brief explicitly
calls for this, for viewers who can't rely on colour/contrast). */
.hs-ppf-hero__tier-check {
display: none;
align-items: center;
justify-content: center;
color: var(--hs-color-accent);
}
.hs-ppf-hero__tier.is-active .hs-ppf-hero__tier-check {
display: inline-flex;
}
/* Floating circular badge overlapping the box's corner (final-reference
rework) — a second, more emphatic selected-state signal matching the
reference image, on top of the inline check mark above. */
.hs-ppf-hero__tier-badge {
display: none;
position: absolute;
top: -8px;
right: -8px;
width: 18px;
height: 18px;
align-items: center;
justify-content: center;
color: var(--hs-color-graphite);
background: var(--hs-color-accent);
border-radius: 50%;
box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.5);
}
.hs-ppf-hero__tier.is-active .hs-ppf-hero__tier-badge {
display: flex;
}
.hs-ppf-hero__tier:focus-visible {
outline: 2px solid var(--hs-color-accent);
outline-offset: 2px;
}
/* Main specification panel (ALVA-structure rework, 2026-09-21) — ONE
bordered horizontal strip with icon-on-top-center columns, structurally
referencing ALVA's own icon-row (see the project's standing "IA/layout
reference only, never its colours/branding" rule) — recoloured onto
Hydro Shield's own subtle elevated surface instead of ALVA's white
card. REPLACES the previous 2x2 grid-of-separate-boxes pass: a single
row reads as ONE clear product-info panel rather than a scattered set
of tiles, and comfortably fits all 5 real spec columns without feeling
like a long list. */
.hs-ppf-hero__specs {
list-style: none;
margin: 0 0 4px;
padding: 14px 6px;
display: flex;
background: rgba(240, 240, 232, 0.05);
border: 1px solid rgba(240, 240, 232, 0.12);
border-radius: 10px;
}
.hs-ppf-hero__specs li {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 0 4px;
text-align: center;
border-right: 1px solid rgba(240, 240, 232, 0.1);
}
.hs-ppf-hero__specs li:last-child {
border-right: none;
}
/* Subtle by design (direct instruction: no oversized/bright icons) —
plain glyphs, no circle/badge behind them. */
.hs-ppf-hero__specs-icon {
display: flex;
align-items: center;
justify-content: center;
color: var(--hs-color-text-muted);
opacity: 0.9;
}
.hs-ppf-hero__specs-icon svg {
width: 17px;
height: 17px;
stroke-width: 1.4;
}
.hs-ppf-hero__specs-label {
font-size: 0.52rem;
font-weight: 600;
line-height: 1.25;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--hs-color-text-muted);
}
.hs-ppf-hero__specs-value {
font-size: 0.74rem;
font-weight: 700;
line-height: 1.25;
color: var(--hs-color-off-white);
}
/* Supporting benefits row — MOVED to the right-side card, direct user
request (2026-09-21): "is 4 ko small kar kay right side mein laga doo
aik row mein" — was a 2x2 grid of bordered chips in the left visual
column; now one small single row here instead, sized to fit the
card's own ~460px max-width without wrapping on desktop. */
.hs-ppf-hero__benefits {
list-style: none;
margin: 14px 0 0;
padding-top: 14px;
border-top: 1px solid rgba(240, 240, 232, 0.1);
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
}
.hs-ppf-hero__benefits li {
display: flex;
align-items: center;
gap: 5px;
}
.hs-ppf-hero__benefits-icon {
display: flex;
align-items: center;
justify-content: center;
color: var(--hs-color-text-muted);
opacity: 0.85;
}
.hs-ppf-hero__benefits-icon svg {
width: 12px;
height: 12px;
stroke-width: 1.6;
}
.hs-ppf-hero__benefits-label {
font-size: 0.62rem;
font-weight: 600;
white-space: nowrap;
color: var(--hs-color-text-muted);
}
/* Lightened for the dark Hero background (was --hs-color-grey-mid, a dark
grey meant for the old white card). */
.hs-ppf-hero__demo-note {
margin: 0;
font-size: 0.68rem;
line-height: 1.45;
font-style: italic;
color: var(--hs-color-text-muted);
}
/* Price panel wrapper + cyan accent bar (final-reference rework,
2026-09-21) — matches the reference image's bordered price panel with a
vertical cyan bar on its leading edge. The bar is this block's only
full-strength cyan fill; everything else in the panel stays off-white/
muted. */
.hs-ppf-hero__price-panel {
display: flex;
gap: 14px;
padding: 16px 18px;
background: rgba(240, 240, 232, 0.04);
border: 1px solid rgba(240, 240, 232, 0.1);
border-radius: 10px;
}
.hs-ppf-hero__price-bar {
width: 3px;
flex-shrink: 0;
align-self: stretch;
background: var(--hs-color-accent);
border-radius: 2px;
}
.hs-ppf-hero__price-body {
flex: 1;
min-width: 0;
}
/* "From" label (sales-UI rework, 2026-09-21) — the price is now the FIRST
thing after the name/description, and the most visually dominant
element in the whole card (bigger than the heading) per the brief's
"BIG PRICE" requirement — a Shopee/e-commerce-style product hero, not a
spec sheet. */
.hs-ppf-hero__price-label {
margin: 0 0 2px;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--hs-color-text-muted);
}
/* Price block — the dominant element. Badge/RRP demoted to a small
secondary stack beside the price (sales-UI rework) rather than sitting
inline at the same visual weight — explicitly NOT styled as a loud
"SALE" badge (brief's direct instruction), just a quiet neutral chip +
muted struck-through RRP. Cyan stays out of this block entirely; it's
reserved for the option selector only. */
.hs-ppf-hero__price {
display: flex;
align-items: flex-end;
gap: 12px;
}
/* Price + "Add to Cart" sit side by side (direct follow-up: button moved
next to the price instead of sitting in the actions row below the
tiers) — wraps to its own line on very narrow cards rather than
squeezing the price. */
.hs-ppf-hero__price-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 4px 0 6px;
}
.hs-ppf-hero__price-cta {
flex-shrink: 0;
white-space: nowrap;
}
/* Standalone "Get a Quote" — the old two-button actions row is gone; this
is now the only button between the price panel and the tier tabs, so it
takes the full card width instead of sitting side by side with anything. */
.hs-ppf-hero__order-cta {
width: 100%;
margin: 0 0 4px;
}
.hs-ppf-hero__price-current {
display: flex;
align-items: baseline;
gap: 5px;
}
.hs-ppf-hero__price-currency {
font-size: 1.1rem;
font-weight: 700;
color: var(--hs-color-off-white);
}
/* Display font (ALVA's own big-price-number face) — it only ships one
weight, so font-weight is pinned to 400 here rather than inheriting the
rest of the card's bold scale (the browser would otherwise synthesize a
fake-bold, which looks poor on a decorative display face). Bumped up
(sales-UI rework, 2026-09-21) — now larger than the product heading, the
single most dominant piece of text in the card. */
.hs-ppf-hero__price-value {
font-family: var(--hs-font-display);
font-size: 2.75rem;
font-weight: 400;
letter-spacing: -0.01em;
line-height: 1;
color: var(--hs-color-off-white);
}
/* Badge + RRP stacked small, beside the big price (not inline with it) —
deliberately the quietest text in this block. */
.hs-ppf-hero__price-sub {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
padding-bottom: 2px;
}
/* Recoloured cyan (final-reference rework, 2026-09-21) — matches the
reference image's badge treatment; still a quiet outline/tint, never a
solid loud fill, so it reads as "a real discount exists" rather than a
cheap flashing "SALE" sticker. */
.hs-ppf-hero__price-badge {
display: inline-flex;
align-items: center;
padding: 2px 8px;
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--hs-color-accent);
background: rgba(0, 229, 255, 0.1);
border: 1px solid rgba(0, 229, 255, 0.35);
border-radius: 999px;
}
/* Lightened for the dark Hero background (was --hs-color-grey-mid). */
.hs-ppf-hero__price-rrp {
font-size: 0.74rem;
color: var(--hs-color-text-muted);
}
.hs-ppf-hero__price-rrp span {
text-decoration: line-through;
}
/* Buttons tighten on this one card — the shared .hs-ppf__cta styles
elsewhere on the page assume a roomier, full-hero-width footprint than
a compact card calls for. FINAL-REFERENCE REWORK (2026-09-21): "Add to
Cart" is now the solid/primary button (cyan, glowing) and "Get a Quote"
the outline/secondary one, matching the provided reference image
exactly — a reversal of the site's earlier "Get a Quote is always
primary" convention on this one page only, since the reference is now
the explicit final direction. This is a visual-only change: "Add to
Cart" is wired to the same real WhatsApp destination the old "Order
Now" button used (see page-ppf.php's inline comment) — no fake
checkout was added. */
.hs-ppf-hero__card .hs-ppf__cta {
padding: 11px 20px;
font-size: 0.82rem;
font-weight: 600;
border-radius: 8px;
transition: transform var(--hs-duration-fast) var(--hs-ease-standard), box-shadow var(--hs-duration-fast) var(--hs-ease-standard), background var(--hs-duration-fast) var(--hs-ease-standard), border-color var(--hs-duration-fast) var(--hs-ease-standard);
}
.hs-ppf-hero__card .hs-ppf__cta:focus-visible {
outline-color: var(--hs-color-accent);
}
.hs-ppf-hero__card .hs-ppf__cta--primary {
background: var(--hs-color-accent);
color: var(--hs-color-graphite);
border: 1px solid var(--hs-color-accent);
box-shadow: 0 0 20px -4px rgba(0, 229, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.hs-ppf-hero__card .hs-ppf__cta--primary:hover,
.hs-ppf-hero__card .hs-ppf__cta--primary:focus-visible {
background: #33eaff;
transform: translateY(-1px);
box-shadow: 0 0 28px -4px rgba(0, 229, 255, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.hs-ppf-hero__card .hs-ppf__cta--primary:active {
transform: translateY(0);
box-shadow: 0 0 14px -4px rgba(0, 229, 255, 0.5);
}
/* Plain light-outline secondary (same convention as .hs-ppf__cta on this
page's other dark sections), replacing the earlier light-teal-tint
fill — that tint was sized for sitting on a white card and would have
read as an odd bright patch straight on the dark Hero background. */
.hs-ppf-hero__card .hs-ppf__cta--secondary {
color: var(--hs-color-text);
background: transparent;
border-color: rgba(240, 240, 232, 0.28);
}
.hs-ppf-hero__card .hs-ppf__cta--secondary:hover,
.hs-ppf-hero__card .hs-ppf__cta--secondary:focus-visible {
border-color: var(--hs-color-off-white);
background: rgba(240, 240, 232, 0.06);
transform: translateY(-1px);
}
.hs-ppf-hero__card .hs-ppf__cta--secondary:active {
transform: translateY(0);
background: rgba(240, 240, 232, 0.03);
}
/* ================= 2. Product Overview ================= */
.hs-ppf-overview {
background: var(--hs-color-bg);
border-top: 1px solid rgba(240, 240, 232, 0.06);
padding-top: var(--hs-space-6);
padding-bottom: var(--hs-space-6);
}
.hs-ppf-overview__inner {
max-width: 1360px;
margin: 0 auto;
padding: 0 var(--hs-space-4);
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: var(--hs-space-6);
align-items: center;
}
.hs-ppf-overview__heading {
margin: 0 0 var(--hs-space-3);
font-size: clamp(1.9rem, 3.4vw, 2.6rem);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.005em;
text-transform: uppercase;
color: var(--hs-color-text);
}
.hs-ppf-overview__text {
margin: 0 0 var(--hs-space-3);
max-width: 52ch;
font-size: 1.02rem;
line-height: 1.65;
color: var(--hs-color-text-muted);
}
.hs-ppf-overview__text:last-of-type {
margin-bottom: 0;
}
.hs-ppf-overview__list-label {
margin: var(--hs-space-4) 0 var(--hs-space-3);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--hs-color-grey-mid);
}
/* Checkmark tick list (direct user request: "detail tick points clearly") —
reused by Coverage's list further down too. */
.hs-ppf-overview__ticks {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--hs-space-3);
}
.hs-ppf-overview__ticks li {
position: relative;
padding-left: 26px;
font-size: 0.96rem;
line-height: 1.5;
color: var(--hs-color-text);
}
.hs-ppf-overview__ticks li::before {
content: '\2713';
position: absolute;
left: 0;
top: -1px;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.72rem;
font-weight: 700;
line-height: 1;
color: var(--hs-color-graphite);
background: var(--hs-color-accent);
border-radius: 50%;
}
/* Single split before/after image (direct user upload, 2026-09-20) —
replaces the earlier two-separate-panel grid (each cell a different
demo photo with its own figcaption). The new image already has its own
built-in vertical divider and "BEFORE PPF"/"AFTER PPF" labels baked in,
so this is now just one framed figure, not a grid. */
.hs-ppf-overview__compare {
margin: 0;
border-radius: 10px;
overflow: hidden;
box-shadow: inset 0 0 0 1px rgba(240, 240, 232, 0.08);
}
.hs-ppf-overview__compare img {
display: block;
width: 100%;
height: auto;
}
/* ================= 3. How It's Applied ================= */
/* Mirrors Coverage's two-column grid (media left, copy right) rather than
flipping sides — see page-ppf.php's header comment: this page keeps every
image on the same side deliberately, since the shared demo images are
decorative and NN/g's research found alternating sides hurts scanning
for decorative (non-informational) imagery. Only the background tone
alternates (graphite here, grey-dark on Coverage) for visual rhythm. */
.hs-ppf-process {
background: var(--hs-color-bg);
border-top: 1px solid rgba(240, 240, 232, 0.06);
padding-top: var(--hs-space-6);
padding-bottom: var(--hs-space-6);
}
.hs-ppf-process__inner {
max-width: 1360px;
margin: 0 auto;
padding: 0 var(--hs-space-4);
display: grid;
grid-template-columns: 0.72fr 1.28fr;
gap: var(--hs-space-6);
align-items: center;
}
.hs-ppf-process__media {
position: relative;
aspect-ratio: 2 / 3;
max-width: 380px;
border-radius: 10px;
overflow: hidden;
background: var(--hs-color-graphite);
box-shadow: inset 0 0 0 1px rgba(240, 240, 232, 0.08);
}
.hs-ppf-process__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.hs-ppf-process__heading {
margin: 0 0 var(--hs-space-3);
font-size: clamp(1.9rem, 3.4vw, 2.6rem);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.005em;
text-transform: uppercase;
color: var(--hs-color-text);
}
.hs-ppf-process__text {
margin: 0 0 var(--hs-space-4);
max-width: 56ch;
font-size: 1.02rem;
line-height: 1.65;
color: var(--hs-color-text-muted);
}
.hs-ppf-process__steps {
list-style: none;
margin: 0;
padding: var(--hs-space-4) 0 0;
display: flex;
flex-direction: column;
gap: var(--hs-space-3);
border-top: 1px solid rgba(240, 240, 232, 0.1);
}
.hs-ppf-process__steps li {
display: flex;
align-items: baseline;
gap: var(--hs-space-3);
}
.hs-ppf-process__step-number {
flex-shrink: 0;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.1em;
color: var(--hs-color-grey-mid);
font-variant-numeric: tabular-nums;
}
.hs-ppf-process__step-body {
display: flex;
flex-direction: column;
gap: 2px;
}
.hs-ppf-process__step-label {
font-size: 0.98rem;
font-weight: 600;
color: var(--hs-color-text);
}
.hs-ppf-process__step-text {
font-size: 0.9rem;
line-height: 1.55;
color: var(--hs-color-text-muted);
}
/* ================= 4. Where PPF Fits ================= */
.hs-ppf-coverage {
background: var(--hs-color-surface);
padding-top: var(--hs-space-6);
padding-bottom: var(--hs-space-6);
}
.hs-ppf-coverage__inner {
max-width: 1360px;
margin: 0 auto;
padding: 0 var(--hs-space-4);
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--hs-space-6);
align-items: center;
}
.hs-ppf-coverage__media {
position: relative;
aspect-ratio: 5 / 4;
border-radius: 10px;
overflow: hidden;
background: var(--hs-color-graphite);
box-shadow: inset 0 0 0 1px rgba(240, 240, 232, 0.08);
}
.hs-ppf-coverage__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.hs-ppf-coverage__heading {
margin: 0 0 var(--hs-space-3);
font-size: clamp(1.9rem, 3.4vw, 2.6rem);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.005em;
text-transform: uppercase;
color: var(--hs-color-text);
}
.hs-ppf-coverage__intro {
margin: 0 0 var(--hs-space-4);
max-width: 52ch;
font-size: 1rem;
line-height: 1.6;
color: var(--hs-color-text-muted);
}
.hs-ppf-coverage__list {
list-style: none;
margin: 0 0 var(--hs-space-4);
padding: 0;
display: flex;
flex-direction: column;
gap: var(--hs-space-3);
border-top: 1px solid rgba(240, 240, 232, 0.1);
padding-top: var(--hs-space-4);
}
.hs-ppf-coverage__list li {
position: relative;
padding-left: 26px;
font-size: 1rem;
color: var(--hs-color-text);
}
/* Checkmark ticks — same device as .hs-ppf-overview__ticks above (direct
user request: "detail tick points clearly"). */
.hs-ppf-coverage__list li::before {
content: '\2713';
position: absolute;
left: 0;
top: 2px;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.72rem;
font-weight: 700;
line-height: 1;
color: var(--hs-color-graphite);
background: var(--hs-color-accent);
border-radius: 50%;
}
.hs-ppf-coverage__note {
margin: 0;
font-size: 0.9rem;
line-height: 1.55;
color: var(--hs-color-text-muted);
}
/* ================= 5. Why Customers Consider PPF ================= */
.hs-ppf-why {
background: var(--hs-color-bg);
padding-top: var(--hs-space-6);
padding-bottom: var(--hs-space-6);
}
.hs-ppf-why__inner {
max-width: 1360px;
margin: 0 auto;
padding: 0 var(--hs-space-4);
}
.hs-ppf-why__heading {
margin: 0 0 var(--hs-space-5);
max-width: 46ch;
font-size: clamp(1.9rem, 3.4vw, 2.6rem);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.005em;
text-transform: uppercase;
color: var(--hs-color-text);
}
.hs-ppf-why__points {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--hs-space-5);
padding-top: var(--hs-space-5);
border-top: 1px solid rgba(240, 240, 232, 0.1);
}
.hs-ppf-why__point-icon {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin-bottom: var(--hs-space-3);
border-radius: 50%;
border: 1px solid rgba(240, 240, 232, 0.14);
color: var(--hs-color-accent);
}
.hs-ppf-why__point-label {
margin: 0 0 8px;
font-size: 1.1rem;
font-weight: 600;
text-transform: uppercase;
color: var(--hs-color-text);
}
.hs-ppf-why__point-text {
margin: 0;
font-size: 0.92rem;
line-height: 1.6;
color: var(--hs-color-text-muted);
max-width: 32ch;
}
/* ================= 6. FAQ ================= */
/* Single narrow column (not full-width) — an FAQ reads as a list of short
answers, not a layout worth splitting into two columns; matches the
"keep the actual reading column narrow" guidance the rest of this page's
copy already follows (52-56ch max-widths above). Native /
in the markup — no JS needed for expand/collapse, and it's
keyboard/screen-reader operable for free. */
.hs-ppf-faq {
background: var(--hs-color-surface);
border-top: 1px solid rgba(240, 240, 232, 0.06);
padding-top: var(--hs-space-6);
padding-bottom: var(--hs-space-6);
}
.hs-ppf-faq__inner {
max-width: 900px;
margin: 0 auto;
padding: 0 var(--hs-space-4);
}
.hs-ppf-faq__intro {
margin: 0 0 var(--hs-space-5);
}
.hs-ppf-faq__heading {
margin: 0;
font-size: clamp(1.9rem, 3.4vw, 2.6rem);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.005em;
text-transform: uppercase;
color: var(--hs-color-text);
}
.hs-ppf-faq__list {
display: flex;
flex-direction: column;
gap: 2px;
}
.hs-ppf-faq__item {
background: var(--hs-color-graphite);
border: 1px solid rgba(240, 240, 232, 0.08);
}
.hs-ppf-faq__item + .hs-ppf-faq__item {
border-top: none;
}
.hs-ppf-faq__question {
position: relative;
list-style: none;
cursor: pointer;
padding: var(--hs-space-4) 44px var(--hs-space-4) var(--hs-space-4);
font-size: 1rem;
font-weight: 600;
color: var(--hs-color-text);
transition: color var(--hs-duration-fast) var(--hs-ease-standard);
}
.hs-ppf-faq__question::-webkit-details-marker {
display: none;
}
.hs-ppf-faq__question::after {
content: '+';
position: absolute;
right: var(--hs-space-4);
top: 50%;
transform: translateY(-50%);
font-size: 1.3rem;
font-weight: 400;
color: var(--hs-color-accent);
transition: transform var(--hs-duration-fast) var(--hs-ease-standard);
}
.hs-ppf-faq__item[open] > .hs-ppf-faq__question::after {
transform: translateY(-50%) rotate(45deg);
}
.hs-ppf-faq__question:hover,
.hs-ppf-faq__question:focus-visible {
color: var(--hs-color-accent);
}
.hs-ppf-faq__question:focus-visible {
outline: 2px solid var(--hs-color-accent);
outline-offset: -2px;
}
.hs-ppf-faq__answer {
margin: 0;
padding: 0 var(--hs-space-4) var(--hs-space-4);
max-width: 68ch;
font-size: 0.96rem;
line-height: 1.65;
color: var(--hs-color-text-muted);
}
/* ================= Renders Gallery (now inside the Hero) ================= */
/* NEW (direct user upload, 2026-09-20) — small-thumbnail grid, own scoped
classes (not homepage gallery.css, which this page never enqueues).
"Chooti chooti" (small tiles) taken literally: a uniform grid, not the
homepage gallery's large-anchor bento mix.
MOVED further up, direct user request (2026-09-21): "gallery wali row
opar le jaoo", then corrected the same day — "wrong i need one row and
sub say big change": confining it to the ~600px left visual column made
"one row" and "bigger tiles" mutually exclusive (4 tiles/row, 2 rows).
`.hs-ppf-hero__gallery-row` is now a full-width wrapper (same 1360px
max-width/padding convention as .hs-ppf-hero__inner) sitting below the
two-column grid but still inside the same — so all 7 images
render in exactly ONE row at a genuinely larger size, while the section
stays visually continuous with the Hero (no seam, same background). */
.hs-ppf-hero__gallery-row {
max-width: 1360px;
margin: 24px auto 0;
padding: 24px var(--hs-space-4) 0;
border-top: 1px solid rgba(240, 240, 232, 0.1);
}
.hs-ppf-gallery__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: var(--hs-space-3);
}
/* Exactly one row of 7 on desktop — see the section comment above for why
this replaced the earlier narrow-column 4-per-row version. Falls back
to a wrapping grid on narrower screens (media query below) where 7
equal columns would otherwise shrink the tiles down to nothing. */
.hs-ppf-gallery__grid--full {
grid-template-columns: repeat(7, 1fr);
}
.hs-ppf-gallery__item {
margin: 0;
position: relative;
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: 8px;
background: var(--hs-color-graphite);
}
.hs-ppf-gallery__item img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s var(--hs-ease-standard);
}
.hs-ppf-gallery__item:hover img,
.hs-ppf-gallery__item:focus-within img {
transform: scale(1.06);
}
@media (prefers-reduced-motion: reduce) {
.hs-ppf-gallery__item img {
transition: none;
}
}
/* ================= 8. Final Enquiry CTA ================= */
.hs-ppf-cta {
background: var(--hs-color-surface);
border-top: 1px solid rgba(240, 240, 232, 0.06);
padding-top: var(--hs-space-6);
padding-bottom: var(--hs-space-6);
}
.hs-ppf-cta__inner {
max-width: 1360px;
margin: 0 auto;
padding: 0 var(--hs-space-4);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--hs-space-5);
}
.hs-ppf-cta__copy {
max-width: 52ch;
}
.hs-ppf-cta__heading {
margin: 0 0 var(--hs-space-3);
font-size: clamp(1.8rem, 3.2vw, 2.4rem);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.005em;
text-transform: uppercase;
color: var(--hs-color-text);
}
.hs-ppf-cta__text {
margin: 0 0 var(--hs-space-4);
font-size: 1rem;
line-height: 1.6;
color: var(--hs-color-text-muted);
}
.hs-ppf-cta__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--hs-space-3);
}
.hs-ppf-cta__contact {
flex-shrink: 0;
padding: var(--hs-space-4);
border: 1px solid rgba(240, 240, 232, 0.1);
border-radius: 10px;
background: var(--hs-color-graphite);
}
.hs-ppf-cta__contact-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.hs-ppf-cta__contact-list li {
font-size: 0.94rem;
color: var(--hs-color-text-muted);
}
.hs-ppf-cta__contact-list a {
color: var(--hs-color-text);
text-decoration: none;
border-bottom: 1px solid rgba(240, 240, 232, 0.25);
padding-bottom: 1px;
transition: color var(--hs-duration-fast) var(--hs-ease-standard), border-color var(--hs-duration-fast) var(--hs-ease-standard);
}
.hs-ppf-cta__contact-list a:hover,
.hs-ppf-cta__contact-list a:focus-visible {
color: var(--hs-color-accent);
border-color: var(--hs-color-accent);
}
.hs-ppf-cta__contact-list a:focus-visible {
outline: 2px solid var(--hs-color-accent);
outline-offset: 3px;
border-radius: var(--hs-radius-sm);
}
/* ================= Responsive ================= */
@media (max-width: 1023.98px) {
.hs-ppf-overview__inner {
grid-template-columns: 1fr;
gap: var(--hs-space-5);
}
.hs-ppf-process__inner {
grid-template-columns: 1fr;
gap: var(--hs-space-5);
}
.hs-ppf-process__media {
max-width: 280px;
}
.hs-ppf-coverage__inner {
grid-template-columns: 1fr;
gap: var(--hs-space-5);
}
.hs-ppf-why__points {
grid-template-columns: 1fr 1fr;
}
.hs-ppf-why__points > :nth-child(3) {
grid-column: 1 / -1;
}
.hs-ppf-hero__inner {
grid-template-columns: 1fr;
}
/* Stacked/full-width here, so the fixed desktop height would be wrong
(too short on a wide tablet, too tall on a narrow phone) — fall back
to a proportional box instead. */
.hs-ppf-hero__gallery {
height: auto;
aspect-ratio: 4 / 3;
}
.hs-ppf-hero__card {
max-width: none;
}
/* 7 equal columns get too narrow once the Hero itself is no longer
wide (tablet/mobile) — fall back to a wrapping grid of larger tiles
instead of shrinking all 7 into one cramped row. */
.hs-ppf-gallery__grid--full {
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}
}
@media (max-width: 899.98px) {
.hs-ppf-cta__inner {
flex-direction: column;
align-items: stretch;
}
.hs-ppf-cta__contact {
align-self: stretch;
}
}
@media (max-width: 639.98px) {
.hs-ppf-overview,
.hs-ppf-process,
.hs-ppf-coverage,
.hs-ppf-why,
.hs-ppf-faq,
.hs-ppf-cta {
padding-top: var(--hs-space-5);
padding-bottom: var(--hs-space-5);
}
.hs-ppf-hero {
padding-top: var(--hs-space-5);
padding-bottom: var(--hs-space-5);
}
.hs-ppf-process__media {
max-width: 220px;
}
.hs-ppf-hero__card {
max-width: none;
}
/* The card goes full-width right above these at this breakpoint (below),
which would leave the arrows sitting on top of/behind it — a manual
slider control isn't essential on a touch/scroll-first mobile layout,
so they're hidden here rather than repositioned. */
.hs-ppf-hero__arrows {
display: none;
}
.hs-ppf-hero__price-row {
flex-direction: column;
align-items: stretch;
}
.hs-ppf-hero__price-cta {
width: 100%;
}
.hs-ppf-cta__actions {
flex-direction: column;
align-items: stretch;
}
.hs-ppf__cta {
width: 100%;
text-align: center;
}
.hs-ppf-why__points {
grid-template-columns: 1fr;
}
.hs-ppf-why__points > :nth-child(3) {
grid-column: auto;
}
/* ============ MOBILE REFINEMENT (2026-09-25) ============
The hero card's inner rows (specs/tiers/benefits/buttons) never had
their own mobile treatment before this pass — below 1023.98px the
card just goes full-width and everything inside it (5 spec columns,
3 tier buttons) kept rendering as the same flex ROW at its original
desktop font-size, so at a real phone width (~360-390px) all of it
visually compressed into cramped, hard-to-read columns instead of
reflowing. Desktop/tablet (>639.98px) are completely untouched by
everything below. */
/* Specs: 5-across flex row -> 2-column grid, odd 5th item spans full
width. Per-column right-border doesn't read in a grid, replaced with
a bottom border on every item so each row still stays visually
separated; last row (the spanning 5th item) gets none. Label/value
both sized up slightly now each item has roughly double the width
it had crammed into a 5-across row. */
.hs-ppf-hero__specs {
flex-wrap: wrap;
padding: 10px;
}
.hs-ppf-hero__specs li {
flex: 1 1 calc(50% - 5px);
border-right: none;
border-bottom: 1px solid rgba(240, 240, 232, 0.1);
padding: 10px 4px;
}
.hs-ppf-hero__specs li:last-child {
flex-basis: 100%;
border-bottom: none;
}
.hs-ppf-hero__specs-label {
font-size: 0.64rem;
}
.hs-ppf-hero__specs-value {
font-size: 0.85rem;
}
/* Tiers stay 3-across (only 3 options, stacking each to its own full
row would waste vertical space) but get more breathing room and a
taller comfortable touch target instead of the desktop's tighter
padding. */
.hs-ppf-hero__tiers {
gap: 6px;
}
.hs-ppf-hero__tier {
padding: 13px 4px;
font-size: 0.72rem;
}
/* Benefits row already wraps (flex-wrap) — just a touch more legible. */
.hs-ppf-hero__benefits-label {
font-size: 0.68rem;
}
/* Hero card buttons ("Add to Cart"/"Get a Quote") — same footprint as
every other full-width mobile button on this page, but taller so the
tap target comfortably clears ~44px (was ~38px: 11px padding +
~16px line-height). */
.hs-ppf-hero__card .hs-ppf__cta {
padding: 14px 20px;
font-size: 0.86rem;
}
}