/* =============================================================
WHY BUY FROM US — css/why-buy-from-us.css
-------------------------------------------------------------
PORTING-MAP §E, E3. Decision changed 16 Aug 2026: **rebuilt to
the mockup**, not restyled in place.
Session 8 first restyled the page's database HTML. Eddy's call
was that `_mockup/WOW Supplies Why Buy From Us.dc.html` is a
materially better page, so `page-why-buy-from-us.php` now
renders it and this file styles that template.
Consequences worth knowing:
- The old `wbfu-hero-inner` / `wbfu-reasons-grid` /
`wbfu-trust` class names are **gone**. They belonged to the
database HTML, which the template no longer outputs. The
database content itself is untouched, so re-activating the
v1 theme restores the old page exactly.
- Class names are now BEM-ish (`wbfu-card__title`) to match
the rest of this theme's templates rather than v1's flat
names.
- The page's FAQPage JSON-LD is still shipped — the template
lifts it out of post_content. See inc/why-buy.php.
1. Hero + stats 2. Intro 3. Section furniture
4. Reason cards 5. Comparison 6. Process
7. Testimonials 8. CTA 9. Buttons 10. Responsive
============================================================= */
/* ==============================================
0. PAGE CONTAINER
============================================== */
/* The template prints its own ; page.php's entry-header is not
rendered by this template at all, so there is nothing to hide. */
.wbfu {
padding-bottom: var(--wows-section-xl);
}
/* ==============================================
1. HERO + STATS
----------------------------------------------
Mockup: copy left, a 2×2 of stat tiles right.
v1 had these four figures in a dark full-width
band further down — same content, new slot.
============================================== */
.wbfu-hero {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: var(--wows-sp-10);
align-items: center;
padding-top: var(--wows-section-sm);
padding-bottom: var(--wows-sp-9);
animation: wows-rise .6s ease both;
}
.wbfu-hero__title {
font-family: var(--wows-font-display);
font-size: var(--wows-fs-hero);
font-weight: 700;
line-height: var(--wows-lh-hero);
letter-spacing: var(--wows-ls-hero);
color: var(--wows-ink);
margin: 0 0 var(--wows-sp-5);
text-wrap: balance;
}
.wbfu-hero__lede {
font-size: var(--wows-fs-lede);
line-height: var(--wows-lh-lede);
color: var(--wows-text);
margin: 0 0 var(--wows-sp-8);
max-width: 540px;
}
.wbfu-hero__actions {
display: flex;
gap: var(--wows-sp-2);
flex-wrap: wrap;
}
.wbfu-hero__stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--wows-sp-3);
}
.wbfu-stat {
background: var(--wows-row-hover);
border: 1px solid var(--wows-border);
border-radius: var(--wows-r-lg);
padding: var(--wows-sp-6);
}
/* Figures vary in length — "5+" next to "Klang Valley" — so the value
is a clamp rather than a fixed 30px, or the long one wraps mid-tile. */
.wbfu-stat__value {
font-family: var(--wows-font-display);
font-size: clamp(20px, 2.2vw, 30px);
font-weight: 700;
letter-spacing: var(--wows-ls-h1);
line-height: 1.1;
color: var(--wows-ink);
margin-bottom: 6px;
}
.wbfu-stat__label {
font-size: var(--wows-fs-sm);
line-height: 1.5;
color: var(--wows-text-muted);
}
/* ==============================================
2. INTRO
============================================== */
.wbfu-intro {
padding-bottom: var(--wows-sp-9);
}
.wbfu-intro p {
font-size: var(--wows-fs-lede);
line-height: var(--wows-lh-lede);
color: var(--wows-text);
max-width: 68ch;
margin: 0;
}
/* ==============================================
3. SECTION FURNITURE
============================================== */
.wbfu-section {
padding-top: var(--wows-section-lg);
}
.wbfu-section__title {
font-family: var(--wows-font-display);
font-size: var(--wows-fs-section);
font-weight: 700;
line-height: var(--wows-lh-heading);
letter-spacing: var(--wows-ls-h2);
color: var(--wows-ink);
margin: 0 0 var(--wows-sp-1);
}
.wbfu-section__lede {
font-size: var(--wows-fs-md);
color: var(--wows-text-muted);
margin: 0 0 var(--wows-sp-7);
}
/* ==============================================
4. REASON CARDS
----------------------------------------------
v1's six, plus the mockup's dark quote card as
a seventh tile. 3-up, so seven fills two rows
and leaves one gap — deliberate, the mockup
does the same with its five + one.
============================================== */
.wbfu-reasons {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--wows-sp-5);
}
.wbfu-card {
display: flex;
flex-direction: column;
gap: var(--wows-sp-2);
background: var(--wows-white);
border: 1px solid var(--wows-border);
border-radius: var(--wows-r-xl);
padding: var(--wows-sp-7);
transition: transform var(--wows-t-slow), box-shadow var(--wows-t-slow),
border-color var(--wows-t-slow);
}
.wbfu-card:hover {
transform: translateY(-4px);
border-color: var(--wows-border-hover);
box-shadow: var(--wows-shadow-card);
}
/* Was an emoji from v1's copy; now an inline SVG, in the mockup's 42px
accent chip. */
.wbfu-card__icon {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
background: var(--wows-accent-tint);
border-radius: var(--wows-r-md);
color: var(--wows-accent);
font-size: var(--wows-fs-xl);
line-height: 1;
}
.wbfu-card__icon .wows-icon {
width: 21px;
height: 21px;
}
.wbfu-card__title {
font-family: var(--wows-font-display);
font-size: var(--wows-fs-lg);
font-weight: 700;
letter-spacing: var(--wows-ls-tight);
color: var(--wows-ink);
margin: 0;
}
.wbfu-card__body {
font-size: var(--wows-fs-base);
line-height: var(--wows-lh-body);
color: var(--wows-text);
margin: 0;
}
/* The "still comparing quotes?" tile — inverted, CTA pinned to the
bottom so it lines up with the neighbouring cards' baselines. */
.wbfu-card--dark {
justify-content: space-between;
gap: var(--wows-sp-5);
background: var(--wows-ink);
border-color: var(--wows-ink);
}
.wbfu-card--dark:hover {
border-color: var(--wows-ink);
}
.wbfu-card--dark .wbfu-card__title {
color: var(--wows-white);
margin-bottom: var(--wows-sp-2);
}
.wbfu-card--dark .wbfu-card__body {
color: var(--wows-on-dark-body);
}
.wbfu-card__cta {
align-self: stretch;
padding: var(--wows-sp-2) var(--wows-sp-5);
background: var(--wows-white);
border-radius: var(--wows-r-sm);
font-family: var(--wows-font-display);
font-size: var(--wows-fs-base);
font-weight: 700;
color: var(--wows-ink);
text-align: center;
text-decoration: none;
transition: background var(--wows-t-base);
}
.wbfu-card__cta:hover {
background: var(--wows-divider);
color: var(--wows-ink);
}
/* ==============================================
5. COMPARISON TABLE
----------------------------------------------
Renders only when inc/why-buy.php has rows.
============================================== */
.wbfu-compare {
border: 1px solid var(--wows-border);
border-radius: var(--wows-r-2xl);
overflow: hidden;
}
/* A grid, not a
: the mockup's three columns are a comparison
layout rather than tabular data, and this collapses cleanly. */
.wbfu-compare__row {
display: grid;
grid-template-columns: 1.3fr 1fr 1fr;
border-bottom: 1px solid var(--wows-border-soft);
}
.wbfu-compare__row:last-child {
border-bottom: none;
}
.wbfu-compare__row--head {
background: var(--wows-row-hover);
border-bottom-color: var(--wows-border);
font-family: var(--wows-font-display);
font-weight: 700;
}
.wbfu-compare__key {
padding: var(--wows-sp-5) var(--wows-sp-7);
font-size: var(--wows-fs-base);
font-weight: 600;
color: var(--wows-ink);
}
.wbfu-compare__us {
display: flex;
gap: var(--wows-sp-2);
padding: var(--wows-sp-5) var(--wows-sp-7);
background: var(--wows-accent-tint-2);
font-size: var(--wows-fs-base);
color: var(--wows-ink);
}
.wbfu-compare__row--head .wbfu-compare__us {
background: var(--wows-accent-tint);
color: var(--wows-accent-dark);
}
.wbfu-compare__tick {
flex-shrink: 0;
color: var(--wows-success-text);
font-weight: 700;
}
.wbfu-compare__them {
padding: var(--wows-sp-5) var(--wows-sp-7);
font-size: var(--wows-fs-base);
color: var(--wows-text-faint);
}
/* ==============================================
6. PROCESS
----------------------------------------------
Renders only when inc/why-buy.php has steps.
============================================== */
.wbfu-process {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--wows-sp-5);
}
.wbfu-step {
display: flex;
flex-direction: column;
gap: var(--wows-sp-2);
padding-top: var(--wows-sp-5);
border-top: 3px solid var(--wows-accent);
}
.wbfu-step__num {
font-family: var(--wows-font-display);
font-size: var(--wows-fs-sm);
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--wows-ls-eyebrow);
color: var(--wows-text-faint);
}
.wbfu-step__title {
font-family: var(--wows-font-display);
font-size: var(--wows-fs-lg);
font-weight: 700;
letter-spacing: var(--wows-ls-tight);
color: var(--wows-ink);
margin: 0;
}
.wbfu-step__body {
font-size: var(--wows-fs-base);
line-height: var(--wows-lh-body);
color: var(--wows-text);
margin: 0;
}
/* ==============================================
7. TESTIMONIALS
----------------------------------------------
Renders only when inc/why-buy.php has real,
attributed quotes. Never fill this with
plausible-sounding examples.
============================================== */
.wbfu-quotes {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--wows-sp-5);
}
.wbfu-quote {
display: flex;
flex-direction: column;
gap: var(--wows-sp-4);
margin: 0;
background: var(--wows-row-hover);
border: 1px solid var(--wows-border-soft);
border-radius: var(--wows-r-xl);
padding: var(--wows-sp-8);
}
.wbfu-quote__stars {
color: var(--wows-rating);
font-size: var(--wows-fs-base);
letter-spacing: 2px;
}
.wbfu-quote__text {
flex: 1;
margin: 0;
font-size: var(--wows-fs-md);
line-height: var(--wows-lh-lede);
color: var(--wows-ink);
}
/* Quote marks are decoration, so they come from CSS rather than being
baked into the copy — the schema-safe way round if these ever feed
a Review markup block. */
.wbfu-quote__text::before {
content: '\201C';
}
.wbfu-quote__text::after {
content: '\201D';
}
.wbfu-quote__by {
display: flex;
flex-direction: column;
gap: 2px;
}
.wbfu-quote__name {
font-size: var(--wows-fs-base);
font-weight: 700;
color: var(--wows-ink);
}
.wbfu-quote__role {
font-size: var(--wows-fs-sm);
color: var(--wows-text-faint);
}
/* ==============================================
8. CTA
============================================== */
.wbfu-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--wows-sp-9);
flex-wrap: wrap;
background: var(--wows-gradient-accent);
border-radius: var(--wows-r-2xl);
padding: var(--wows-section-sm) var(--wows-gutter-panel);
color: var(--wows-white);
box-shadow: var(--wows-shadow-accent);
}
.wbfu-cta__title {
font-family: var(--wows-font-display);
font-size: var(--wows-fs-band);
font-weight: 700;
line-height: var(--wows-lh-heading);
letter-spacing: var(--wows-ls-h2);
color: var(--wows-white);
margin: 0 0 var(--wows-sp-2);
}
.wbfu-cta__body {
font-size: var(--wows-fs-md);
line-height: var(--wows-lh-body);
color: var(--wows-on-accent);
margin: 0;
max-width: 520px;
}
.wbfu-cta__actions {
display: flex;
gap: var(--wows-sp-2);
flex-wrap: wrap;
}
/* ==============================================
9. BUTTONS
============================================== */
.wbfu-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--wows-sp-1);
padding: var(--wows-sp-3) var(--wows-sp-7);
border-radius: var(--wows-r-md);
font-family: var(--wows-font-display);
font-size: var(--wows-fs-md);
font-weight: 600;
text-decoration: none;
transition: background var(--wows-t-base), color var(--wows-t-base),
border-color var(--wows-t-base), transform var(--wows-t-fast);
}
.wbfu-btn:hover {
transform: translateY(-2px);
text-decoration: none;
}
.wbfu-btn--dark {
background: var(--wows-ink);
color: var(--wows-white);
}
.wbfu-btn--dark:hover {
background: var(--wows-accent-dark);
color: var(--wows-white);
}
.wbfu-btn--outline {
background: var(--wows-white);
border: 1px solid var(--wows-border-strong);
color: var(--wows-ink);
}
.wbfu-btn--outline:hover {
background: var(--wows-surface-2);
color: var(--wows-ink);
}
/* On the accent CTA panel. */
.wbfu-btn--light {
background: var(--wows-white);
color: var(--wows-accent-dark);
font-weight: 700;
}
.wbfu-btn--light:hover {
background: var(--wows-white);
color: var(--wows-accent-dark);
}
.wbfu-btn--ghost {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.4);
color: var(--wows-white);
}
.wbfu-btn--ghost:hover {
background: rgba(255, 255, 255, 0.14);
color: var(--wows-white);
}
/* ==============================================
10. RESPONSIVE
----------------------------------------------
Theme breakpoints 1040 / 900 / 680.
============================================== */
@media (max-width: 1040px) {
.wbfu-reasons,
.wbfu-quotes {
grid-template-columns: repeat(2, 1fr);
}
.wbfu-process {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 900px) {
.wbfu-hero {
grid-template-columns: 1fr;
gap: var(--wows-sp-9);
}
.wbfu-hero__lede {
max-width: none;
}
/*
* The comparison grid stacks — at this width the two value columns are
* ~120px each and every cell wraps to four lines.
*/
.wbfu-compare__row {
grid-template-columns: 1fr;
}
/*
* The header row goes, because a stacked table has no columns for it to
* head. Its labels move onto each value cell instead: hiding the header
* on its own left two unlabelled paragraphs per row with no way to tell
* which was WOW Supplies and which was the marketplace seller.
*/
.wbfu-compare__row--head {
display: none;
}
.wbfu-compare__key {
padding-bottom: 0;
font-family: var(--wows-font-display);
font-size: var(--wows-fs-lg);
}
/* Text comes from data-label in the template, which is populated from
the same strings the hidden header used. */
.wbfu-compare__us::before,
.wbfu-compare__them::before {
content: attr(data-label);
display: block;
width: 100%;
margin-bottom: 4px;
font-family: var(--wows-font-display);
font-size: var(--wows-fs-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--wows-ls-eyebrow);
}
.wbfu-compare__us::before {
color: var(--wows-accent-dark);
}
.wbfu-compare__them::before {
color: var(--wows-text-faint);
}
/* The tick sits beside the value, so the label needs a full-width row of
its own above both — hence flex-wrap rather than a third column. */
.wbfu-compare__us {
flex-wrap: wrap;
}
/* Stacked, the two cells sit directly on top of each other; a hairline
keeps "ours" and "theirs" from reading as one paragraph. */
.wbfu-compare__them {
border-top: 1px solid var(--wows-border-soft);
}
}
@media (max-width: 680px) {
.wbfu-reasons,
.wbfu-quotes,
.wbfu-process {
grid-template-columns: 1fr;
}
.wbfu-hero__stats {
gap: var(--wows-sp-2);
}
.wbfu-hero__actions .wbfu-btn,
.wbfu-cta__actions .wbfu-btn {
flex: 1 1 100%;
}
.wbfu-cta {
padding: var(--wows-sp-9) var(--wows-sp-6);
}
}