tags cannot push our real content into the wrong grid cell. */ .wpchar-hp-tabs__panel > .wpchar-hp-tabs__copy { grid-column: 1; grid-row: 1; } .wpchar-hp-tabs__panel > .wpchar-hp-tabs__media { grid-column: 2; grid-row: 1; } /* Hide any empty
or
tags WordPress injects between our grid children. */
.wpchar-hp-tabs__panel > p:empty,
.wpchar-hp-tabs__panel > br {
display: none;
}
/* ---------------------------------------------------------------------------
Tab-switch fade. The copy comes in first, the media follows just behind it.
These are animations rather than transitions on purpose: the inactive panels
are display:none, and display is not an animatable property, so a transition
would never run. An animation restarts every time the element is rendered
again out of display:none, which is exactly the switch we want to catch.
--------------------------------------------------------------------------- */
@keyframes wpchar-hp-tabs-rise-in {
from {
opacity: 0;
transform: translateY(5px);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes wpchar-hp-tabs-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.wpchar-hp-tabs__panel[data-active="true"] > .wpchar-hp-tabs__copy {
animation: wpchar-hp-tabs-rise-in 200ms ease-out both;
}
/* Delayed just enough to read as "text, then image" without feeling slow.
Opacity only: a 700px-wide photographic composite sliding looks heavy. */
.wpchar-hp-tabs__panel[data-active="true"] > .wpchar-hp-tabs__media {
animation: wpchar-hp-tabs-fade-in 260ms ease-out 110ms both;
}
@media (prefers-reduced-motion: reduce) {
.wpchar-hp-tabs__panel[data-active="true"] > .wpchar-hp-tabs__copy,
.wpchar-hp-tabs__panel[data-active="true"] > .wpchar-hp-tabs__media {
animation: none;
}
}
/* Eyebrow removed per design revision — headline stands on its own. */
.wpchar-hp-tabs__eyebrow {
display: none;
}
/* ---------------------------------------------------------------------------
Copy column. Figma stacks headline / body / bullets with a 20px gap, then
40px before the CTA.
--------------------------------------------------------------------------- */
.wpchar-hp-tabs__headline {
font-size: 20px;
font-weight: 700;
line-height: 32px;
letter-spacing: normal;
color: var(--wpchar-hp-tabs-ink);
margin: 0 0 20px;
}
.wpchar-hp-tabs__body {
font-size: 18px;
font-weight: 500;
line-height: 28px;
letter-spacing: 0.25px;
color: var(--wpchar-hp-tabs-ink-60);
margin: 0 0 20px;
}
.wpchar-hp-tabs__bullets {
list-style: none;
padding: 0;
/* 40px to the CTA, less the 12px row gap already below the last bullet. */
margin: 0 0 28px;
display: flex;
flex-direction: column;
gap: 12px;
}
.wpchar-hp-tabs__bullets li {
position: relative;
/* 16px check glyph + the 16px gap Figma sets between glyph and label. */
padding: 0 0 0 32px;
margin: 0;
font-size: 16px;
line-height: normal;
letter-spacing: 0.25px;
color: var(--wpchar-hp-tabs-ink-60);
/* Figma applies a capitalize text-case to every bullet, which is why the
designed strings mix "and" with "And" yet all render in title case. */
text-transform: capitalize;
}
/* The bullet label is wrapped in by the shortcode; Figma sets these
at Medium, not bold, so undo the user-agent weight. */
.wpchar-hp-tabs__bullets li strong {
font-weight: 500;
}
/* Check glyph exported from the Figma bullet rows (16x24, #3d914b). */
.wpchar-hp-tabs__bullets li::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 24px;
background-image: url('data:image/svg+xml;utf8,');
background-size: 16px 24px;
background-repeat: no-repeat;
background-position: center;
}
/* Addon badges hidden for now — the copy inside each bullet already conveys
the same info, and the Figma design has no badges. Keep the markup so we
can flip these back on cheaply later. */
.wpchar-hp-tabs__addon-tag {
display: none;
}
/* CTA row. Figma: Satoshi Bold 14px ink, a 1px 50%-opacity ink rule beneath,
and a 13.37x11.03 stroked arrow at 1.7 weight. */
.wpchar-hp-tabs__cta-row {
display: inline-flex;
align-items: center;
gap: 7px;
margin: 0;
}
.wpchar-hp-tabs__cta {
color: var(--wpchar-hp-tabs-ink);
font-size: 14px;
font-weight: 700;
letter-spacing: -0.21px;
text-decoration: underline;
text-decoration-thickness: 1px;
text-decoration-color: rgba(30, 21, 21, 0.5);
text-underline-offset: 10px;
}
.wpchar-hp-tabs__cta:hover {
text-decoration-color: rgba(30, 21, 21, 1);
}
.wpchar-hp-tabs__cta-arrow {
color: var(--wpchar-hp-tabs-ink);
width: 13.37px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
}
.wpchar-hp-tabs__cta-arrow svg {
width: 13.37px;
height: 11.03px;
display: block;
fill: none;
}
/* ---------------------------------------------------------------------------
Media column. The V1 design supplies one flat composite per tab (stock photo
with floating UI cards), exported from Figma at 2x and converted to WebP.
Transparent background, so no card framing.
--------------------------------------------------------------------------- */
.wpchar-hp-tabs__media {
background: transparent;
border-radius: 0;
padding: 0;
min-height: 0;
box-shadow: none;
display: flex;
align-items: flex-start;
justify-content: center;
overflow: visible;
}
.wpchar-hp-tabs__media img,
.wpchar-hp-tabs__media video {
display: block;
width: 100%;
height: auto;
border-radius: 0;
}
/* The feature-grid section sits directly below the tabs. This block used to
force `padding-top: 40px !important; margin-top: 0 !important` so the tabs
butted flush against the bottom of the tab gradient. That gradient no longer
exists (see the flat-background note above), and with only 40px of padding
the "Finally, a WordPress Donation Plugin" heading was pulled up onto the
cream top strip of the section's own hero-bg.png. Removing the override lets
am-theme/style.css supply its `padding-top: 200px`, which is what production
renders and which clears that strip by ~115px.
The `margin-top: 0 !important` was already dead: am-theme/style.css declares
`margin-top: -50px !important` at equal specificity and loads after this
file, so it won. Dropping it here removes a landmine that would have
reversed the -50px overlap if the enqueue order ever flipped. */
/* The video branch is retained so a tab can go back to an autoplay clip by
setting media_video. Transparent-background clips need no framing. */
.wpchar-hp-tabs__media--video {
background: transparent;
padding: 0;
min-height: 0;
box-shadow: none;
}
.wpchar-hp-tabs__media--video video {
display: block;
width: 100%;
border-radius: 12px;
}
/* Fallback card, shown only when a tab has neither an image nor a video. */
.wpchar-hp-tabs__media-placeholder {
background: var(--wpchar-hp-tabs-yellow);
border-radius: 12px;
padding: 1.5rem;
min-height: 280px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
color: #7a5a00;
font-size: 0.85rem;
line-height: 1.5;
}
.wpchar-hp-tabs__media-placeholder strong {
display: block;
color: #5a3f00;
margin-bottom: 0.3rem;
font-size: 0.95rem;
}
/* ---------------------------------------------------------------------------
Responsive.
One breakpoint at 960px governs the whole narrow treatment, because both
halves of the design run out of room at roughly the same place: the copy
column drops under ~350px (it is 331px at 900 and 318px at 866), and the four
18px nav labels stop fitting on one row.
What this replaces: the nav used to become a horizontally scrollable strip
below 1080px with `scrollbar-width: none`. Measured, that left 49px of the nav
off-screen at 866px and 451px off-screen at 390px, i.e. more than half of it,
with no scrollbar, fade or arrow to say so. Tabs 3 and 4 read as missing
rather than scrollable, and the panel meanwhile stayed two cramped columns all
the way down to 860px.
--------------------------------------------------------------------------- */
/* Four across still fits between 961px and 1080px, but the longest label
outgrows its own 1fr cell on the way down: measured headroom for
"Launch Your Fundraiser" is +19px at 1080, +1px at 1000 and -8px at 961,
and because the label is `white-space: nowrap` inside a centred flex item
with `min-width: 0`, the overspill lands in the neighbouring cell rather
than being clipped. Letting it wrap keeps all four columns without that
collision, and is why this file no longer needs the hidden-scrollbar nav
strip it used to switch to at this width. */
@media (max-width: 1080px) {
.wpchar-hp-tabs__tab-label {
white-space: normal;
}
}
@media (max-width: 960px) {
/* Nav: 2x2 grid. Every tab stays visible and tappable, the per-tab underline
stays the active indicator, and no new markup or JS is needed. */
.wpchar-hp-tabs__nav {
grid-template-columns: repeat(2, 1fr);
row-gap: 0;
/* At wide widths the 3px track is this border and each tab pulls its own
transparent 3px border down over its quarter of it. That trick only works
for a single row, so in two rows the track moves onto the tabs. */
border-bottom: 0;
}
.wpchar-hp-tabs__tab {
padding: 12px 8px;
font-size: 16px;
margin-bottom: 0;
}
/* Colour only the inactive tabs, so the [aria-selected="true"] green further
up the file still wins on the active one. */
.wpchar-hp-tabs__tab:not([aria-selected="true"]) {
border-bottom-color: var(--wpchar-hp-tabs-track);
}
/* Labels wrap from 1080px down; see the block above. In the 2x2 grid they
need to wrap *neatly*, because greedy wrapping produced a one-word orphan:
"Skip the Admin Work" broke as "Skip the Admin / Work", and at 390px
"Collect Donations" still fitted on one line while its three neighbours
were on two, so the row read ragged.
`text-wrap: balance` minimises the longest line rather than filling the
first, which fixes the orphan. The 11ch cap is what forces the shorter
labels to wrap at all, so all four tabs land on exactly two lines.
Measured at 360 and 390: Launch Your / Fundraiser, Collect / Donations,
Skip the / Admin Work, Grow Your / Support.
11ch specifically: 12ch leaves "Collect Donations" on one line at 390px,
and 10ch works but squeezes every label to 111px. `margin-inline: auto`
keeps the capped box centred under the icon.
Width-based wrapping cannot produce "Grow / Your Support", because the
longest line always has to fit and "Your Support" is wider than
"Grow Your". That split would need per-tab break markup in
shortcodes-homepage-tabs.php, where the label currently goes through
esc_html(). Deliberately not done; the balanced break is tidier. */
.wpchar-hp-tabs__tab-label {
text-wrap: balance;
max-width: 11ch;
margin-inline: auto;
}
/* Panel: one column, media first. The media is the point of each tab, and on
a narrow screen a reader should not have to scroll past five bullets to
reach it. */
.wpchar-hp-tabs__panel[data-active="true"] {
grid-template-columns: 1fr;
row-gap: 32px;
padding: 32px 0 20px;
}
.wpchar-hp-tabs__panel > .wpchar-hp-tabs__copy,
.wpchar-hp-tabs__panel > .wpchar-hp-tabs__media {
grid-column: 1;
}
.wpchar-hp-tabs__panel > .wpchar-hp-tabs__media {
grid-row: 1;
}
.wpchar-hp-tabs__panel > .wpchar-hp-tabs__copy {
grid-row: 2;
}
.wpchar-hp-tabs__headline {
font-size: 20px;
line-height: 28px;
}
.wpchar-hp-tabs__body {
font-size: 16px;
line-height: 26px;
}
}