— every hover rule scoped to the anchor missed all six of
them and the row had no hover at all. */
.hpx-ig-plain .hpx-igcard:hover {
transform: translateY(-3px);
background: var(--hpx-card);
border-color: var(--tone-line);
box-shadow: 0 18px 34px -26px var(--tone-ink), var(--hpx-sh-soft);
}
.hpx-ig-plain .hpx-igcard:hover::before { opacity: 1; transform: translateX(-50%) scale(1.12); }
.hpx-igcard:hover .hpx-igcard-title { color: var(--tone-ink); }
.hpx-igcard:hover .hpx-ico { transform: scale(1.08) rotate(-4deg); }
/* The arrow chip used to be the showcase card's alone. Every linked card
gets it now — the Discover-More tiles are six navigation targets and had
nothing on them to say so. */
.hpx-ig-tile a.hpx-igcard:hover .hpx-igcard-go { opacity: 1; transform: translateX(0) scale(1); }
}
/* No hover on touch, so the chip would never appear — but the tile IS a link.
It rests visible instead, the same compromise the feature cards make. */
@media (hover: none) {
.hpx-ig-tile a.hpx-igcard .hpx-igcard-go { opacity: .5; transform: none; }
}
a.hpx-igcard:focus-visible {
outline: none;
border-color: var(--tone-ink);
box-shadow: 0 0 0 3px var(--tone-line);
}
a.hpx-igcard:focus-visible .hpx-igcard-go { opacity: 1; transform: translateX(0) scale(1); }
/* ── 14b. The tile card ─────────────────────────────────────────────
Six navigation targets, built to the supplied reference: a haloed icon plate
with scattered tone dots, a title, three lines of copy, a LABELLED action,
and a tone bar along the bottom edge that tells the six apart at a glance.
What it replaced was a captioned box — icon, title, one line, and nothing at
all to say the thing was a link. */
.hpx-ig-tile .hpx-igcard {
padding: 26px 18px 22px;
gap: 0;
justify-content: flex-start;
border-radius: 20px;
}
/* The bottom tone bar. Inset and short at rest so it reads as an accent, full
bleed on hover so the card confirms the pointer is on it. */
.hpx-igcard-bar {
position: absolute;
inset-block-end: 0;
inset-inline: 22%;
z-index: 2;
height: 4px;
border-radius: 4px 4px 0 0;
background: linear-gradient(90deg, var(--tone-bg) 0%, var(--tone-ink) 50%, var(--tone-bg) 100%);
transition: inset-inline .34s var(--hpx-a-ease), height .24s ease;
pointer-events: none;
}
/* ── The icon and its dots ──────────────────────────────────────── */
/* A SOLID tone fill with a white glyph — the same plate the library and
category bands use, overriding the lit-tint treatment `.hpx-igcard .hpx-ico`
carries from §14. Scoped to `.hpx-ig-tile` on purpose: the `feature` variant
(Why choose) is a different card with its own lead-card logic and keeps the
tinted chip.
The sheen supplies the second gradient stop, so no per-tone "light twin"
token has to exist. Geometry is unchanged — only the FILL — so the 52px
sideways-phone override below still holds. */
.hpx-ig-tile .hpx-igcard .hpx-ico {
position: relative;
z-index: 1;
width: 64px; height: 64px;
border-radius: 19px;
font-size: 25px;
margin-bottom: 18px;
background-color: var(--tone-ink);
background-image: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .26) 100%);
color: var(--hpx-ink-invert);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .24),
0 10px 22px -10px var(--tone-ink);
}
/* The base chip draws its glyph at 55% of the plate, a ratio tuned for a tinted
background where a large silhouette still reads as light. On a solid fill
that is a white slab; 47% is the library plate's 22/46, as a percentage so
the 52px phone variant scales with it instead of needing its own rule. */
.hpx-ig-tile .hpx-igcard .hpx-ico svg { width: 47%; height: 47%; }
.hpx-igcard-dots {
position: absolute;
inset-block-start: 18px;
inset-inline: 0;
z-index: 0;
height: 76px;
pointer-events: none;
}
.hpx-igcard-dots i {
position: absolute;
display: block;
border-radius: 50%;
background: var(--tone-ink);
transition: opacity .3s ease, transform .4s var(--hpx-a-ease);
}
/* Four fixed positions rather than random ones: the set has to look identical
on every card or it reads as noise instead of as a motif. */
.hpx-igcard-dots i:nth-child(1) { width: 6px; height: 6px; inset-inline-start: calc(50% - 62px); top: 22px; opacity: .28; }
.hpx-igcard-dots i:nth-child(2) { width: 4px; height: 4px; inset-inline-start: calc(50% - 48px); top: 52px; opacity: .18; }
.hpx-igcard-dots i:nth-child(3) { width: 5px; height: 5px; inset-inline-start: calc(50% + 44px); top: 12px; opacity: .34; }
.hpx-igcard-dots i:nth-child(4) { width: 4px; height: 4px; inset-inline-start: calc(50% + 58px); top: 44px; opacity: .2; }
/* ── Copy ───────────────────────────────────────────────────────── */
.hpx-ig-tile .hpx-igcard-title { font-size: 17px; font-weight: 740; }
.hpx-ig-tile .hpx-igcard-sub {
margin-top: 9px;
font-size: 13px;
line-height: 1.62;
color: var(--hpx-ink-2);
}
/* ── The action ─────────────────────────────────────────────────── */
/* Tone-tinted, with the hue's own ink — the reference's treatment, and at
roughly 6:1 in light and 8:1 in dark it is comfortably legible. It fills with
the solid tone on hover, the same rest→fill move the tool cards make.
THE LABEL WRAPS, and that is not cosmetic. Six cards across a 1200px band are
175px wide, which leaves 137px of button — and "Explore Companies" plus its
arrow needs 168px. FOUR of the six labels were being clipped on a 1440px
desktop. No font size fixes that at this column count: shrinking the type
only moves the failure to the next viewport down, and these labels are the
whole point of the button ("Explore Companies" says where it goes; a bare
arrow does not). So the label is allowed to take two lines, and every button
reserves the height for two whether it needs them or not — otherwise a row of
six has three tall buttons and three short ones. */
.hpx .hpx-igcard-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
width: 100%;
/* Two lines' worth, always. Around 1280px some labels wrap and some do not,
so without this the row is 44px/49px/44px/49px — five pixels of ragged
that is only visible because the six sit side by side. It also clears the
44px minimum touch target with room to spare. */
min-height: 50px;
margin-top: auto;
padding: 8px 12px;
border-radius: 12px;
background-color: var(--tone-bg);
color: var(--tone-ink);
font-size: 12.5px;
font-weight: 720;
line-height: 1.3;
letter-spacing: -.004em;
text-align: center;
box-shadow: inset 0 0 0 1px var(--tone-line);
transition: background-color .2s ease, background-image .2s ease, color .2s ease,
box-shadow .22s ease, gap .2s ease;
}
/* `margin-top: auto` needs somewhere to push from, and the copy above it is
variable-length — this is what pins six buttons to one line. */
.hpx-ig-tile .hpx-igcard-sub { margin-bottom: 18px; }
/* `balance` splits "Explore Companies" evenly rather than leaving one word
stranded on line two. Unsupported browsers just wrap normally. */
.hpx-igcard-btnlabel { text-wrap: balance; }
.hpx-igcard-btn svg { flex: 0 0 auto; width: 13px; height: 13px; transition: transform .2s var(--hpx-a-ease); }
[dir="rtl"] .hpx-igcard-btn svg { transform: scaleX(-1); }
@media (hover: hover) {
.hpx-ig-tile a.hpx-igcard:hover .hpx-igcard-bar { inset-inline: 0; height: 5px; }
.hpx-ig-tile a.hpx-igcard:hover .hpx-igcard-dots i:nth-child(1) { transform: translate(-3px, -4px); opacity: .5; }
.hpx-ig-tile a.hpx-igcard:hover .hpx-igcard-dots i:nth-child(2) { transform: translate(-5px, 3px); opacity: .34; }
.hpx-ig-tile a.hpx-igcard:hover .hpx-igcard-dots i:nth-child(3) { transform: translate(4px, -3px); opacity: .56; }
.hpx-ig-tile a.hpx-igcard:hover .hpx-igcard-dots i:nth-child(4) { transform: translate(6px, 4px); opacity: .38; }
.hpx .hpx-ig-tile a.hpx-igcard:hover .hpx-igcard-btn {
gap: 11px;
background-color: var(--tone-ink);
background-image: linear-gradient(160deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 58%);
color: var(--hpx-ink-invert);
box-shadow: 0 10px 20px -10px var(--tone-ink);
}
/* The dark twins of `--tone-ink` are LIGHTENED so they can serve as ink on a
dark surface, so white on one measures about 1.5:1. Neutral black rather
than the blue-black scrim used on large surfaces: on a small pill the
blue-black desaturates the hue (amber goes khaki, rose goes mauve). */
body.theme-dark .hpx .hpx-ig-tile a.hpx-igcard:hover .hpx-igcard-btn {
background-image:
linear-gradient(0deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)),
linear-gradient(160deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 58%);
box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .9);
}
.hpx-ig-tile a.hpx-igcard:hover .hpx-igcard-btn svg { transform: translateX(3px); }
[dir="rtl"] .hpx-ig-tile a.hpx-igcard:hover .hpx-igcard-btn svg { transform: scaleX(-1) translateX(3px); }
}
/* Keyboard parity — the card is a link and a keyboard visitor gets the same
"this one is active" state a pointer visitor does. */
.hpx-ig-tile a.hpx-igcard:focus-visible .hpx-igcard-bar { inset-inline: 0; height: 5px; }
.hpx .hpx-ig-tile a.hpx-igcard:focus-visible .hpx-igcard-btn {
background-color: var(--tone-ink);
color: var(--hpx-ink-invert);
}
body.theme-dark .hpx .hpx-ig-tile a.hpx-igcard:focus-visible .hpx-igcard-btn {
background-image: linear-gradient(0deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .5));
}
/* `is-noflank` kept as a hook — no band uses it now that Discover More takes
the full showcase head, flanks and all, but it is one class away for any band
that wants the eyebrow pill on its own. */
.hpx-al-center .hpx-head.is-showcase.is-noflank .hpx-title::before,
.hpx-al-center .hpx-head.is-showcase.is-noflank .hpx-title::after { display: none; }
/* ── Phone: one column, laid out sideways ───────────────────────────
Two columns stop working here, and not by a little. At 390px a tile is 166px
wide, which leaves 128px of button — and "Explore Companies" plus its arrow
needs 168px. FIVE of the six labels overflowed their button. Narrowing the
type would only move the failure to the next phone down.
So below 480px the card turns sideways: the plate beside the copy, the button
full width underneath. Each card comes in around 150px instead of 300px, so
six of them stack shorter than the two-column version they replace, and every
label has room to be read. */
@media (max-width: 480px) {
.hpx-icongrid.hpx-ig-tile { grid-template-columns: 1fr; gap: 10px; }
.hpx-icongrid.is-centred.hpx-ig-tile .hpx-igcard {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
align-content: center;
gap: 0 14px;
padding: 16px 16px 14px;
text-align: start;
}
.hpx-ig-tile .hpx-igcard .hpx-ico {
grid-column: 1;
grid-row: 1 / span 2;
width: 52px; height: 52px;
border-radius: 16px;
font-size: 21px;
margin-bottom: 0;
}
.hpx-icongrid.is-centred.hpx-ig-tile .hpx-igcard-title {
grid-column: 2; grid-row: 1;
justify-content: flex-start;
font-size: 15.5px;
}
.hpx-ig-tile .hpx-igcard-sub {
grid-column: 2; grid-row: 2;
margin-top: 2px;
margin-bottom: 0;
font-size: 12.5px;
line-height: 1.5;
}
.hpx .hpx-ig-tile .hpx-igcard-btn {
grid-column: 1 / -1;
grid-row: 3;
margin-top: 14px;
justify-content: space-between;
padding: 10px 14px;
}
/* The dots are positioned against a centred plate; sideways they would land
on the copy. */
.hpx-igcard-dots { display: none; }
.hpx-igcard-bar { inset-inline: 16%; }
}
@media (prefers-reduced-motion: reduce) {
.hpx-igcard-bar, .hpx-igcard-dots i, .hpx-igcard-btn, .hpx-igcard-btn svg { transition: none; }
.hpx-ig-tile a.hpx-igcard:hover .hpx-igcard-dots i { transform: none; }
}
body.theme-dark .hpx .hpx-igcard .hpx-ico {
background-image: linear-gradient(155deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, 0) 58%);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, .07),
0 4px 10px -6px rgba(0, 0, 0, .8);
}
/* The dark twins of `--tone-ink` are LIGHTENED so they can serve as ink on a
dark surface, which is what makes them a poor fill under a white glyph —
white on #8CBEFA measures 2.4:1. A scrim deepens the fill without touching
the token, and takes every tone past 4.2:1.
(0,5,1) against the (0,4,1) rule directly above, so it wins on specificity
rather than on source order — the feature variant is left on the tinted
treatment either way. */
body.theme-dark .hpx .hpx-ig-tile .hpx-igcard .hpx-ico {
background-image:
linear-gradient(0deg, rgba(9, 18, 33, .45), rgba(9, 18, 33, .45)),
linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .22) 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .14),
0 10px 22px -10px rgba(0, 0, 0, .8);
}
body.theme-dark .hpx .hpx-ig-plain .hpx-igcard:hover {
box-shadow: 0 18px 34px -26px rgba(0, 0, 0, .85);
}
/* ── 14b. `feature` — the value-prop showcase ────────────────────────
A lead card in the brand gradient followed by tinted cards, each with a
short tone rule under its title. Used by Why-choose.
Every coloured rule below is written `.hpx .hpx-x`, i.e. (0,2,0). The
stylesheet neutralises Tabler's global link colour with `.hpx a{color:
inherit}` at (0,1,1), which out-ranks any single-class colour however late
it appears — that is exactly how a white label on a blue card ends up
painted in dark body ink and reads as "the text is hidden". */
.hpx-ig-feature { align-items: stretch; }
/* A card flagged `meta.mobile_only` exists to square off the two-column phone
grid — the lead card takes a full row, so an odd number of the rest leaves a
gap beside the last one. `display: none` above the phone breakpoint, so it is
out of the flow entirely rather than an invisible grid cell holding a column
open on desktop. The ≤640 block re-shows it. */
.hpx-igcard.is-mobileonly { display: none; }
.hpx-ig-feature .hpx-igcard {
gap: 0;
padding: 26px 20px 24px;
background: var(--hpx-card);
border: 1px solid var(--hpx-line);
border-radius: var(--hpx-r);
overflow: hidden;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .7),
0 1px 2px rgba(16, 24, 40, .04),
0 12px 26px -20px rgba(16, 24, 40, .3);
}
body.theme-dark .hpx .hpx-ig-feature .hpx-igcard {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .06),
0 1px 2px rgba(0, 0, 0, .4),
0 12px 26px -20px rgba(0, 0, 0, .75);
}
/* Tone wash from the top, hidden at rest. The card already has a surface, so a
resting tint would muddy it rather than identify it. */
.hpx-ig-feature .hpx-igcard::after {
content: '';
position: absolute;
inset: 0;
/* 0, not -1: the card sets no z-index of its own, so a negative pseudo
would escape to the band's stacking context and paint UNDER the card.
`.hpx-igcard > *` already lifts the content to 1 above this. */
z-index: 0;
border-radius: inherit;
background: radial-gradient(120% 78% at 50% 0%, var(--tone-bg) 0%, transparent 68%);
opacity: 0;
transition: opacity .3s ease;
pointer-events: none;
}
/* A rounded SQUARE, not a disc — matched to the tile card's plate so the two
icongrid bands read as one family rather than as two different components
that happen to share a grid. Same 64/19px metrics, the same sheen, and the
glow underneath in the plate's own hue. */
.hpx-ig-feature .hpx-ico {
position: relative;
z-index: 1;
width: 64px; height: 64px;
font-size: 25px;
margin-bottom: 18px;
border-radius: 19px;
}
/* A SOLID tone fill with a white glyph, matching the tile variant next door.
`:not(.is-lead)` is load-bearing, not tidiness: the lead card sits on the
brand gradient and carries a WHITE plate with brand ink, and the dark twin
below would otherwise out-rank that rule at (0,6,1) vs (0,4,0) and drop a
scrim over the white plate. Excluding the card is the only version that
cannot go wrong in one theme while looking right in the other. */
.hpx-ig-feature .hpx-igcard:not(.is-lead) .hpx-ico {
background-color: var(--tone-ink);
background-image: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .26) 100%);
color: var(--hpx-ink-invert);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .24),
0 10px 22px -10px var(--tone-ink);
}
.hpx-ig-feature .hpx-igcard:not(.is-lead) .hpx-ico svg { width: 47%; height: 47%; }
/* Deepens the lightened dark twins so a white glyph clears AA. Placed here so
it out-ranks the shared `body.theme-dark .hpx .hpx-igcard .hpx-ico` above. */
body.theme-dark .hpx .hpx-ig-feature .hpx-igcard:not(.is-lead) .hpx-ico {
background-image:
linear-gradient(0deg, rgba(9, 18, 33, .45), rgba(9, 18, 33, .45)),
linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .22) 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .14),
0 10px 22px -10px rgba(0, 0, 0, .8);
}
/* The dots are the tile card's motif, borrowed. On the lead card they sit on
the brand gradient, where a tone-ink dot is all but invisible — white at a
low opacity is the only version that reads on both surfaces. */
.hpx .hpx-ig-feature .is-lead .hpx-igcard-dots i { background: #fff; }
/* Tone at REST, not only on hover. The reference card carries its hue in the
title, and these cards are no longer links — there is no hover state left to
put it in. The lead card overrides this back to invert at (0,4,0). */
.hpx .hpx-ig-feature .hpx-igcard-title {
display: block;
font-size: 16px;
font-weight: 740;
letter-spacing: -.016em;
color: var(--tone-ink);
/* Two lines' worth, always. At six across, "Verified & Trusted" wraps and
"Comprehensive" does not — without a floor the rule and the copy under
each title land at a different height on every other card, and the row
stops reading as a set. 2 × the inherited 1.35 line-height. */
min-height: 2.7em;
}
/* The rule is the resting colour a feature card gets instead of a tinted
surface, and the one element that moves on hover. */
.hpx-igcard-rule {
display: block;
width: 26px; height: 3px;
margin: 11px 0 12px;
border-radius: 999px;
background: var(--tone-ink);
opacity: .9;
transition: width .3s var(--hpx-a-ease), opacity .2s ease;
}
.hpx-icongrid.is-centred .hpx-igcard-rule { margin-left: auto; margin-right: auto; }
.hpx-ig-feature .hpx-igcard-sub {
display: block;
font-size: 13.5px;
line-height: 1.6;
color: var(--hpx-ink-2);
}
/* Arrow chip — the affordance that says the card is a link. It occupies no
layout space at rest, so a linked card and an unlinked one are the same
height. */
.hpx-igcard-go {
position: absolute;
inset-block-start: 16px;
inset-inline-end: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px; height: 26px;
border-radius: 50%;
background: var(--tone-bg);
color: var(--tone-ink);
opacity: 0;
transform: translateX(-6px) scale(.85);
transition: opacity .24s ease, transform .28s var(--hpx-a-ease);
pointer-events: none;
}
.hpx-igcard-go svg { width: 13px; height: 13px; }
/* RTL: the glyph points at the reading direction, not at a fixed edge. */
[dir="rtl"] .hpx-igcard-go svg { transform: scaleX(-1); }
/* ── The lead card ───────────────────────────────────────────────── */
/* The signature button gradient, plus a scrim.
White on `--hpx-brand` alone measures 3.84:1 in light mode and 2.6:1 in dark
— the dark twins are LIGHTENED so they can serve as ink on a dark surface,
which is exactly what makes them a poor fill under white text. The scrim
deepens the fill without touching the tokens (nothing else that uses brand
blue would want to be dragged along), and takes both themes past 4.5:1. */
.hpx .hpx-ig-feature .hpx-igcard.is-lead {
background-color: var(--hpx-brand-700);
background-image:
linear-gradient(0deg, rgba(9, 18, 33, .12), rgba(9, 18, 33, .12)),
linear-gradient(135deg, var(--hpx-brand) 0%, var(--hpx-brand-600) 62%, var(--hpx-brand-700) 100%);
border-color: transparent;
color: var(--hpx-ink-invert);
box-shadow: 0 18px 40px -24px var(--hpx-brand-glow), 0 2px 4px rgba(16, 24, 40, .08);
}
body.theme-dark .hpx .hpx-ig-feature .hpx-igcard.is-lead {
background-image:
linear-gradient(0deg, rgba(9, 18, 33, .34), rgba(9, 18, 33, .34)),
linear-gradient(135deg, var(--hpx-brand) 0%, var(--hpx-brand-600) 62%, var(--hpx-brand-700) 100%);
}
/* Soft light pooling in the bottom corner, so the fill is not a flat slab. */
.hpx .hpx-ig-feature .hpx-igcard.is-lead::after {
background: radial-gradient(90% 70% at 18% 108%, rgba(255, 255, 255, .28) 0%, transparent 62%);
opacity: 1;
}
/* Both at full white. The hierarchy is carried by size and weight — dimming
the copy to .92 was buying a little elegance with the one thing this card
cannot spare, which is contrast against its own fill. */
.hpx .hpx-ig-feature .is-lead .hpx-igcard-title,
.hpx .hpx-ig-feature .is-lead .hpx-igcard-sub { color: var(--hpx-ink-invert); }
.hpx .hpx-ig-feature .is-lead .hpx-ico {
background: rgba(255, 255, 255, .96);
background-image: none;
color: var(--hpx-brand-600);
box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .45);
}
.hpx .hpx-ig-feature .is-lead .hpx-igcard-rule {
background: rgba(255, 255, 255, .82);
opacity: 1;
}
.hpx .hpx-ig-feature .is-lead .hpx-igcard-go {
background: rgba(255, 255, 255, .2);
color: var(--hpx-ink-invert);
}
/* The corner ribbon. Absolute, so a two-word promise and a five-word one leave
the icon at the same height on every card in the row. */
.hpx .hpx-igcard-chip {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
padding: 6px 12px 6px 14px;
border-end-end-radius: var(--hpx-r-md);
background: rgba(255, 255, 255, .2);
color: var(--hpx-ink-invert);
font-size: 10px;
font-weight: 750;
letter-spacing: .1em;
text-transform: uppercase;
line-height: 1.4;
backdrop-filter: blur(2px);
}
/* A ribbon on a plain (non-lead) card has no gradient to sit on. */
.hpx .hpx-ig-feature .hpx-igcard:not(.is-lead) .hpx-igcard-chip {
background: var(--tone-bg);
color: var(--tone-ink);
}
/* The lead card is taller than its copy needs, and centring the block inside
it is what keeps the six-card row optically level. */
.hpx-ig-feature .hpx-igcard.is-lead { justify-content: center; }
@media (hover: hover) {
.hpx-ig-feature a.hpx-igcard:hover,
.hpx-ig-feature a.hpx-igcard:focus-visible {
transform: translateY(-5px);
border-color: var(--tone-line);
box-shadow: 0 26px 44px -28px var(--tone-ink), var(--hpx-sh-lift);
}
.hpx-ig-feature a.hpx-igcard:hover::after,
.hpx-ig-feature a.hpx-igcard:focus-visible::after { opacity: 1; }
.hpx-ig-feature a.hpx-igcard:hover .hpx-igcard-go,
.hpx-ig-feature a.hpx-igcard:focus-visible .hpx-igcard-go {
opacity: 1;
transform: translateX(0) scale(1);
}
/* `a.` on BOTH: these two were the only hover reactions in the band not
scoped to a link, so a card with no URL still grew a rule and tilted its
icon under the pointer — a thing that responds like a control and then
does nothing when clicked. */
.hpx-ig-feature a.hpx-igcard:hover .hpx-igcard-rule { width: 46px; }
.hpx-ig-feature a.hpx-igcard:hover .hpx-ico { transform: scale(1.07) rotate(-5deg); }
.hpx .hpx-ig-feature a.hpx-igcard.is-lead:hover {
border-color: transparent;
box-shadow: 0 30px 54px -26px var(--hpx-brand-glow), 0 3px 6px rgba(16, 24, 40, .1);
}
/* The lead card is a gradient, not a tinted surface — a tone wash on top of
it would only dull the brand. It gets a light sweep instead. */
.hpx .hpx-ig-feature a.hpx-igcard.is-lead:hover::after {
background: radial-gradient(90% 70% at 18% 108%, rgba(255, 255, 255, .38) 0%, transparent 66%);
}
body.theme-dark .hpx .hpx-ig-feature a.hpx-igcard:hover {
box-shadow: 0 26px 44px -28px rgba(0, 0, 0, .88);
}
}
/* The card is the link, so the ring belongs on the card. Written at (0,2,0)
for the same reason the colours are. */
.hpx .hpx-ig-feature a.hpx-igcard:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--hpx-brand-line), 0 26px 44px -28px var(--tone-ink);
}
/* ---------------------------------------------------------------------------
15. Explore grid
------------------------------------------------------------------------ */
.hpx-explore {
display: grid;
grid-template-columns: repeat(var(--hpx-cd), minmax(0, 1fr));
gap: 14px;
}
/* The install tile is phone-only — an "add to home screen" offer on a desktop
grid is noise, and the tile also exists to square off the two-column phone
layout, which desktop's three or four columns do not need. The ≤640 block
re-shows it (and keeps `[hidden]` winning over that). */
.hpx-exp.is-pwa { display: none; }
/* It is a