to the full .container--narrow (820px) and ran 96-104 cpl — the longest lines
on the site after the fix. Same 36em measure, same reason. */
.container--narrow > p,
.container--narrow > ul > li,
.container--narrow > ol > li,
.feature-list li,
.next-list li { max-width: 36em; }
/* Orphan control on lead paragraphs — six leads ended on a single short word
("fluff.", "in.", "now.", "offers", "teams", "out.", "rest."). text-wrap:pretty
is a progressive enhancement: browsers without it render exactly as before. */
.lead, .hero-sub, .article-body p { text-wrap: pretty; }
/* `ch` is the width of "0" and overshoots the average glyph by ~1.28x, so every
measure on the site that was expressed in `ch` ran long: 64ch = 81 cpl,
68ch = 86, 72ch = 91. All prose measures are now in `em`, where 36em is ~76
cpl at any size. Two paragraphs on /work/ still carry an INLINE
style="max-width:70ch" / "66ch" in the page source and no stylesheet can
reach them; they belong to the page owner, not to this layer. */
/* =====================================================================
V3.2 — DESIGN-DIRECTOR SWEEP (measured in-browser, 1280 / 1201 / 390)
Scope: /expertise/ + its five children, /about/, /diagnostic/,
/request-audit/, /contact/. Every rule below is a fix for a defect
that was MEASURED on the rendered page, not inferred from source.
===================================================================== */
/* ---------------------------------------------------------------------
1. A NARROW PAGE HERO CANNOT HOLD A SIDE-BY-SIDE CTA PAIR AT ANY WIDTH.
`.page-hero .container` is capped at 880px at EVERY viewport, so its
text column is ~422px however wide the window is. The CTA pair is
`width:max-content` (correct: equal means "both match the widest
label"), and its 629.5px max-content becomes the MINIMUM of that
1.1fr track. The track therefore refuses to shrink and the whole
.split overflows its own container by 208px, carrying the hero
mockup with it.
The existing stack rule capped the band at 1200px, which fixed only
part of the range. MEASURED on /expertise/revops-crm/:
1201px hero mockup clipped 19px, floating chip clipped 37px
1240px mockup clipped 2px, chip clipped 20px
1280px mockup 16px from the window edge, chip clipped 2px
(all clipped silently by body{overflow-x:hidden} — "Synced" and
"conflicting records" were cut mid-word.)
A narrow page hero has no upper edge to that band, so neither does
the rule. The wide hero (.page-hero--wide, --container 1200px) and
the home hero keep the original 821-1200 band below.
--------------------------------------------------------------------- */
@media (min-width: 821px) {
.page-hero:not(.page-hero--wide) .split .cta-row:has(> .btn + .btn):not(:has(> :not(.btn))) {
grid-auto-flow: row;
grid-auto-rows: 1fr;
width: max-content;
max-width: 100%;
}
}
/* ---------------------------------------------------------------------
2. THE CTA PAIR'S WIDTH WAS BEING SET BY A NOTE, NOT BY ITS LABELS.
`.promo__cta` is `width:max-content` so the buttons size to the
widest LABEL. The panel note lives inside that same box, so on the
two pages whose note is long the note won the max-content contest:
/expertise/growth-channels/ 519px buttons
/services/growth-marketing/ 519px buttons
everywhere else 299-307px buttons
Same component, same two actions, 1.7x apart. Zeroing the note's
width contribution (width:0 + percentage min-width, which is
indefinite under max-content) hands the sizing back to the labels;
the note still fills the resolved box and wraps inside it.
--------------------------------------------------------------------- */
.promo__cta > .promo__note { width: 0; min-width: 100%; }
/* On phones a stacked pair fills its column everywhere else on the site
(.cta-row goes width:100% below 640). The promo stack kept max-content
and rendered 263px buttons inside a 306px panel. */
@media (max-width: 640px) {
.promo__cta { width: 100%; }
}
/* ---------------------------------------------------------------------
3. A CHECK-LIST THAT IS A DIRECT CHILD OF .container IS A FULL-WIDTH
SECTION BLOCK, NOT A COLUMN BESIDE SOMETHING.
`.check-list{max-width:36em}` is the right measure cap inside a split.
Standing alone in a 1200px container it rendered 576px wide against
the container's 1200px and hugged the left edge, so the right HALF of
the section was empty under a full-width diagram — the block read as
a broken two-column layout. Six pages: /expertise/ and its five
children. Laying it on auto-fit tracks makes the block span its own
section and keeps every row inside a comfortable measure (two items
resolve to 2 x ~548px, three to 3 x ~352px).
--------------------------------------------------------------------- */
@media (min-width: 900px) {
.container > .check-list {
max-width: none;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
column-gap: var(--space-8);
align-items: start;
}
}
/* ---------------------------------------------------------------------
4. THE TESTIMONIAL GROUP TOUCHED WHATEVER CAME BEFORE IT.
MEASURED gap between .tq-group and its previous sibling: 0px on
/expertise/, /expertise/revops-crm/, /expertise/strategy-gtm/,
/expertise/ai-personalisation/ and /about/ (where two carousels sat
flush against each other). On /expertise/strategy-gtm/ the quote card
and the mockup above it shared an edge and read as one broken object.
Every other sibling in those containers is separated by 48-64px.
.section-head already carries its own 64px bottom margin, so it keeps
its spacing and does not get a second one.
--------------------------------------------------------------------- */
* + .tq-group { margin-top: var(--space-12); }
.section-head + .tq-group { margin-top: 0; }
/* .pullquote had the same 0px seam against the card grid above it on
/expertise/growth-channels/ and /expertise/strategy-gtm/. */
.container > * + .pullquote { margin-top: var(--space-12); }
.section-head + .pullquote { margin-top: 0; }
/* ---------------------------------------------------------------------
5. ONE CARD, TWO INTERNAL RHYTHMS.
A card title was followed by 8px of space where the page author wrote
and by 0px where they wrote a bare
. Both
spellings appear on the same page (/expertise/revops-crm/: the five
"What lands on your desk" tiles are glued, the three outcome tiles are
not), so the component's spacing depended on how the markup happened
to be typed. One declared value; mt-2 already resolves to the same
8px, so nothing that was correct moves.
--------------------------------------------------------------------- */
.card :is(h2, h3, h4) + p { margin-top: var(--space-2); }
/* ---------------------------------------------------------------------
6. THE TERMINAL LINK IN A CARD SAT AT A DIFFERENT HEIGHT IN EVERY CARD
OF THE SAME ROW.
The cards in a row are already equal height, but their closing link
floated up to wherever the body copy ended, so a three-card row showed
its three "See the service" links on three different baselines
(MEASURED spread 56px on /expertise/). Pushing the last link to the
bottom of the card puts them on one line without touching any copy.
--------------------------------------------------------------------- */
.card--tile { display: flex; flex-direction: column; }
/* padding, not margin, carries the MINIMUM separation: an auto margin
resolves to 0 in the tallest card of the row, which would otherwise
delete the mt-6 the markup asked for and glue the link to the copy. */
.card--tile > .link-arrow:last-child,
.card--tile > .cta-row:last-child,
.card--tile > .card-links:last-child {
margin-top: auto;
padding-top: var(--space-6);
}
/* THE ARROW ON A WRAPPED CARD LINK FLOATED AWAY FROM ITS TEXT.
.link-arrow is an inline-flex box, so on a link short enough to fit
("How I sharpen GTM ->") the arrow follows the words, but on a link that
wraps ("See where this shows up: Fractional Marketing Lead") the arrow
follows the TEXT BOX and lands at the far right of the card, vertically
centred across both lines, ~180px from the last word. Two arrow
behaviours in the same card, decided by label length. Inside a card the
arrow now flows with the text, so it always sits after the last word.
Scoped to cards: elsewhere .link-arrow sits in a row where the flex box
is doing real work. */
.card--tile .link-arrow { display: inline; }
.card--tile .link-arrow svg { display: inline-block; vertical-align: -3px; margin-left: 4px; }
/* ---------------------------------------------------------------------
7. THE JOURNEY RAIL DANGLED PAST THE FIRST AND LAST NODE.
The connecting rail was pinned at left:8%/right:8% for every step
count, which is not where the end badges are. On a three-step journey
(900px, badge centres at 150 / 450 / 750) the rail started at 72px
and ended at 828px, so 44px of dashed line hung in the air off each
end. A rail runs BETWEEN nodes: half a column in from each side, which
is exactly 100%/(2n).
--------------------------------------------------------------------- */
.journey::before { left: 12.5%; right: 12.5%; } /* 4 columns */
.journey--3::before { left: 16.667%; right: 16.667%; } /* 3 columns */
.journey--5::before { left: 10%; right: 10%; } /* 5 columns */
@media (max-width: 980px) {
.journey--5::before { left: 16.667%; right: 16.667%; } /* falls back to 3 */
}
@media (max-width: 860px) {
.journey::before, .journey--3::before, .journey--5::before { left: 25%; right: 25%; }
}
/* ---------------------------------------------------------------------
8. A DECORATIVE CHIP WAS PAINTING OVER FIGURE DATA.
.gfx-chip--bl is positioned bottom:-18px and, at 57px tall, reaches
39px UP into the frame it sits on — past the 16px body padding and
into the last row of content. MEASURED on /diagnostic/: the chip
"2-3 fixes worth making first" covered the label "Weeks 7-12" by
72 x 9px, and it carries z-index 3, so the label lost. Reserving the
chip's own intrusion at the foot of the body is the fix; nothing
moves on a frame that has no bottom chip.
--------------------------------------------------------------------- */
.app-frame:has(> .gfx-chip--bl) .aw-body { padding-bottom: 52px; }
@media (max-width: 640px) {
.app-frame:has(> .gfx-chip--bl) .aw-body { padding-bottom: 44px; }
}
/* ---------------------------------------------------------------------
9. TWO CLIENT LOGOS WERE EFFECTIVELY INVISIBLE ON THE CREAM BAND.
The strip rendered every mark with grayscale(1) at opacity .74, which
preserves the source art's own lightness. MEASURED effective contrast
of each mark's darkest ink against the cream band (#FEF3C7, L 241):
curioinvest 3.01 quantamix 3.14 breachlock 2.88 co-flo 2.12
settly 1.32 bijles 1.43
1.3:1 is not a logo, it is a smudge — and it is the same defect class
as the white-on-cream marks that were fixed earlier, arriving from the
other end of the scale. Every one of these six PNGs is transparent
art with NO light counters (measured: 0% of opaque pixels above
L=200), so a single-ink silhouette loses no shape and gives the
uniform logo wall the brief asked for. Black at .72 over the cream
band measures 3.16:1. Hover still restores the mark in full colour.
The on-dark strip inherits the same treatment so there is exactly one
client-logo appearance on the site.
THE PARTNER STRIP NOW SHARES THIS RULE (Sushil, 02.08: "why are the
certified and training partner animation not as good as the others ...
it's too dark, make it as sleek and smooth as the Trusted by B2B Tech &
SaaS teams logos"). It used to run grayscale(1) brightness(.55) at
opacity 1, which PRESERVES each mark's own lightness instead of removing
it: measured on the #F1F5F9 band, moengage landed at ink L=20 and
crawlq at L=30 while activecampaign sat at L=125 and phantombuster at
L=110. Half the strip read as too dark and half as washed out, against
the client strip's single flat L=67. One rule, one ink, both strips.
PRECONDITION, and it is the whole reason this could not simply be
copied across earlier: brightness(0) maps every OPAQUE pixel to black,
so a counter PAINTED WHITE fills in and the mark becomes a blob.
Measured on the old assets, 82.9% of activecampaign's ink was above
L=200, hubspot 51.2%, phantombuster 39.3%, customer.io 30.7% - all four
collapsed into solid shapes under this rule. Every partner PNG has since
been rebuilt with its counters KNOCKED OUT to alpha 0 rather than filled,
which is the ordinary one-colour derivation of a mark and is what makes
one rule safe for both rosters. Do not add a mark to either strip
without checking it the same way: composite it on the band, apply the
rule, and look at it.
THE PLATE TILES ON /resources/ NOW SHARE IT TOO. They were left
on the superseded grayscale(1) brightness(.55) at opacity 1 when
the two loops moved here, and cogoport.png and settly.png render
in BOTH places on that page - the same two marks, two different
inks, one scroll apart. A treatment that is "the same as the two
loops" has to BE the two loops' rule, not a copy of what it said
at the time. This selector list is the only place on the site
that sets a logo mark's filter or opacity; the transition rides
with it for the same reason.
--------------------------------------------------------------------- */
.trust-mq__item img,
.trust-logos img,
.trust-strip--on-dark .trust-mq__item img,
.partner-mq__item img,
.se-vis--plate img,
.case-mark img {
filter: grayscale(1) brightness(0);
opacity: 0.72;
transition: filter 0.25s var(--ease-out), opacity 0.25s var(--ease-out);
}
.trust-mq__item img:hover,
.trust-logos img:hover,
.trust-strip--on-dark .trust-mq__item img:hover,
.partner-mq__item img:hover,
.se-vis--plate:hover img,
.case-mark:hover img {
filter: none;
opacity: 1;
}
/* ---------------------------------------------------------------------
10. A POSITIONAL HIGHLIGHT THAT ONLY MEANT SOMETHING ON ONE PAGE.
`.kan-col:nth-child(4) .kk-val { color: teal }` tinted whatever
happened to be the fourth column. That reads as "done" on
/services/hubspot-enablement/ (New / Working / Qualified / WON) and
as a rendering bug everywhere else: on /expertise/enablement-
processes/ the four columns are four peer playbooks, and on
/services/fractional-marketing-lead/ the fourth column is "Parked",
where a success colour is actively wrong. The highlight is now
opt-in, carried by the column that means it.
--------------------------------------------------------------------- */
.kan-col:nth-child(4) .kan-card .kk-val { color: var(--ui-ink); }
/* the opt-in must out-specify the positional reset above it (:nth-child
counts as a class), hence the doubled class. */
.kan-col.kan-col--good .kan-card .kk-val { color: var(--color-teal); }
/* =====================================================================
11. ALIGNMENT — TWO THINGS THAT MUST MATCH THEIR COUNTERPART.
Both defects below survived every per-element check the last sweep
ran. Neither element overflows, overlaps, clips or fails contrast;
each one is fine on its own. They are only wrong NEXT TO the thing
they are supposed to line up with, which is the one question a
per-element check never asks.
===================================================================== */
/* ---------------------------------------------------------------------
11a. A CAPTION BESIDE A CTA SHARES THE BUTTON'S BASELINE.
"Free, and I read every one myself." sits beside "Start the HubSpot
Quick Audit" in a .cta-row. .cta-row is a flex row set to
`align-items: stretch` (v2.css item 7, so a button pair cannot come
out at two different heights). Stretch is right for the buttons and
wrong for a text caption: the caption's box was stretched to the
button's full 56px and the text then painted at the TOP of that box,
so measured in the browser the caption's baseline sat 18.5px above
the button label's. Two lines of type, 18.5px apart, side by side.
Measure the button's baseline with care. A .btn is itself a flex
container with align-items:center, so a probe appended to it is
CENTRED rather than baseline-aligned and reports the button's middle,
not its text baseline: that reads the error as 12.0px instead of the
true 18.5px. The number above comes from wrapping the button's own
text node in an inline box and probing inside it.
Every .cta-row on the site was swept at 1440/1280/768/390: this is
the only row anywhere that pairs a button with a text caption on the
same line. The other 275 button-plus-text groupings are STACKED
(.promo__note, .form-note, .hint, the badge pairs), where left edges
are what have to agree, and all 275 measured 0.0px of left-edge
error. So the rule below is written to the pattern rather than to the
page, but it currently binds to exactly one element.
A row carrying a caption aligns on the BASELINE instead, so the
caption's type and the button's label sit on one line of writing.
The gap opens from 16px to 20px: 16px is the gap between two buttons,
and a caption needs to read as an aside to the button rather than as
a second control crowding it.
--------------------------------------------------------------------- */
.cta-row:has(> .cta-note) {
align-items: baseline;
column-gap: var(--space-5);
row-gap: 10px;
}
.cta-note {
font-size: var(--fs-sm);
line-height: 1.5;
color: var(--color-text-muted);
max-width: 42ch;
}
.section--dark .cta-note,
.hero--dark .cta-note { color: var(--color-on-dark-soft); }
/* Below 640px the row wraps and the caption becomes its own flex line,
where baseline alignment has nothing to align against. Left edges are
what agree there, and they already do. */
/* ---------------------------------------------------------------------
11b. THE TWO PROOF BADGES SHARE ONE AXIS, WRAPPED OR NOT.
"Top HubSpot Partner Consultant 2024" wraps to two lines; "HubSpot
Solution Partner" does not. v2.css item 1 reserved two lines of label
height on BOTH pills (min-height: 2.7em) so the pair could not come
out at two different heights, and that worked: measured on all 53
badge groups on the site the cards are 72px and 72px (64px in the
article sidebar), and both badge images are centred on the card.
But reserving the height is not the same as USING it. The label is a
block, so the one-line label rendered on the FIRST of its two
reserved lines and left the second one empty. Measured: the wrapped
label's text block centred at 35.57px against a 36.0px card centre
and a 36.0px image centre, while the one-line label centred at
27.15px, 8.4px higher than its neighbour, with 15px of dead space
beneath it and its own badge art sitting 9px below it. Equal boxes,
centred art, and the type still refusing to line up.
`align-content: center` centres the label block inside the height
that is already reserved for it, so a one-line label and a two-line
label both centre on the card's own axis, which is the axis the badge
image is on. The reservation stays exactly as it was, so the equal
heights it buys are untouched; if a label ever runs to three lines it
overflows the reservation symmetrically and .ratings{align-items:
stretch} still carries the pair to a common height.
--------------------------------------------------------------------- */
.rating-card__meta { display: grid; align-content: center; }
/* ==========================================================================
COUNTERPART PARITY
Two things that play the same role must measure the same. Everything below
was found by grouping elements by ROLE across all 47 pages and diffing each
instance against its group, not by checking any element on its own: every
one of these passes overflow, contrast, size and geometry in isolation and
is only wrong next to the thing it is supposed to match. Each is written as
ONE rule covering BOTH sides of the pair, so the two cannot drift apart
again the way they did.
========================================================================== */
/* --- 1. THE NARROW PROSE COLUMN HAD TWO WIDTHS -----------------------------
`.container--narrow` is the site's reading column, 820px via
--container-narrow. Inside a hero it silently became 880px, because
`.page-hero .container{max-width:880px}` (0,0,2,0) out-specifies
`.container--narrow{max-width:var(--container-narrow)}` (0,0,1,0). The class
was written on those heroes deliberately and had no effect.
MEASURED at 1280 on 23 pages (20 blogs, 2 events, /privacy/, /terms/):
hero copy started at x=224 and the reading column below it started at
x=254. On /privacy/ and /terms/ that is an
and the very body text it
introduces, stacked with nothing between them, disagreeing by 30px. Both
columns are perfectly legible; only the pair is wrong.
Converged on 820px: it is the declared token, it is what the explicit
modifier asks for, and it is what 34 pages already render. The wide hero
(.page-hero--wide, no --narrow) is untouched and stays at --container. */
.page-hero .container--narrow { max-width: var(--container-narrow); }
/* --- 2. THE TWO LOGO STRIPS SAT ON DIFFERENT RHYTHMS -----------------------
.trust-strip (clients, 43 pages) and .partner-strip (technology partners,
45 pages) are the same component in every structural respect: a full-width
band, a centred uppercase label, a looping row of grey marks. A previous
pass unified their label typography and their mark treatment. Their BAND
never got unified, and 30 pages carry both, one after the other.
MEASURED: trust 40px top and bottom, partner 48px, at 1280; 28px against
32px at 390. Two bands, same job, adjacent on the page, 8px apart at
desktop and 4px apart at mobile.
Converged on the trust-strip value, which is the deliberate one: its clamp
was authored specifically to override the older flat token, whereas the
partner strip still carried the generic var(--space-12). One declaration
now feeds both, at both breakpoints. */
.trust-strip:not(.trust-strip--on-dark),
.partner-strip { padding-block: clamp(28px, 3.4vw, 40px); }
/* ==========================================================================
G23. FOUNDER PORTRAIT SLOT - /about/ hero
"Sushil photo placeholder is missing in about section"
THE PAGE IS ABOUT A PERSON AND HAD NO PLACE TO PUT HIM. Every other hero
on the site is a .page-hero--wide .split with a visual in the right column;
/about/ was the one narrow, single-column hero, on the one page whose
subject is the founder. The slot is that column.
It reserves the real photograph's box exactly - 4:5, the same border,
radius and cream band the rest of the page already uses - so the layout
does not move on the day the photograph is dropped in. It is NOT a broken
image and it is NOT a stock face: no photograph of him exists in this
repository and none may be fabricated, so the plate is authored as a plate.
The monogram disc is the .tq__avatar idea at portrait scale, inverted
(white disc on cream, rather than cream disc on white) because a cream disc
on a cream band would disappear. See src/partials/founder-portrait.html for
the one-line swap.
========================================================================== */
.portrait { margin: 0; width: 100%; max-width: 400px; margin-inline: auto; }
.portrait__frame {
display: grid;
place-items: center;
aspect-ratio: 4 / 5;
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
/* the trust strip's cream band, lit from where a portrait light would be,
plus the inset hairline the cards on this page all carry */
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
background:
radial-gradient(112% 78% at 50% 14%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 62%),
linear-gradient(158deg, #FFFFFF 0%, #FFF7ED 58%, #FEF3C7 100%);
}
/* One cell, every occupant: the ring and the monogram today, the photograph
after the swap. Same grid area, so the swap cannot shift anything, and the
photograph covers the plate rather than sitting on it. */
.portrait__frame::before,
.portrait__mark,
.portrait__img { grid-area: 1 / 1; }
/* A single concentric hairline behind the monogram. Without it the disc is an
avatar floating in a field; with it the plate has a centre and reads as
composed - the same reason a portrait is shot to a frame and not to the
middle of a wall. Struck in the border grey the cards already use, so it
belongs to the page rather than decorating it. ONE ring, not two: two put a
bullseye in the frame, which is a different picture. */
.portrait__frame::before {
content: "";
width: 72%; aspect-ratio: 1;
border-radius: 50%;
border: 1px solid var(--color-border);
opacity: 0.8;
pointer-events: none;
}
/* The photograph replaces the plate outright - ring included. */
.portrait__frame:has(.portrait__img)::before { display: none; }
.portrait__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.portrait__mark {
display: grid; place-items: center;
width: clamp(124px, 16vw, 184px); aspect-ratio: 1;
border-radius: 50%;
background: var(--color-surface);
border: 1px solid var(--color-border);
box-shadow: 0 14px 34px rgba(17, 24, 39, 0.10);
font-family: var(--font-heading);
font-weight: 800;
font-size: clamp(2.3rem, 3.2vw, 3.15rem);
line-height: 1;
/* tracking pads the RIGHT of the second S only, which throws a two-letter
monogram off centre inside a circle; the indent pays it back */
letter-spacing: 0.07em;
text-indent: 0.07em;
color: var(--color-primary);
}
.portrait__cap {
margin-top: var(--space-4);
text-align: center;
font-size: var(--fs-sm);
line-height: 1.4;
color: var(--color-text-muted);
}
.portrait__cap strong { color: var(--color-text); font-weight: 700; }
/* Below 820px the .split is one column and the hero reads top to bottom, so
the plate follows the copy at a size that does not push the CTAs off the
first screen. */
@media (max-width: 820px) {
.portrait { max-width: 300px; margin-top: var(--space-8); }
}
/* ==========================================================================
FEEDBACK ITEM 3 + 16 — THE v2 PROOF BADGES, WITH THE RATING BACK
==========================================================================
"Bring back Top HubSpot Partner and HubSpot Solution Partner from v2 with
stars. I prefer v2's rating, stars and number of reviews."
v3 had stripped the card down to a single label line, so the pair proved a
credential but no longer proved a SCORE. The score, the star row and the
review count come back from v2 verbatim (see src/partials/proof-badges.html);
this block is only the geometry that carries three rows instead of one.
THE ONE THING THAT MUST NOT REGRESS: his earlier note, "both should be of
same size across the website." v3 bought that with a two-line reservation on
the single label (v2.css ITEM 1 + figures.css .rating-card__meta grid). A
three-row card cannot be equalised line by line without stacking three
separate reservations and a very tall pill, so the guarantee is moved UP one
level: the CARD carries the min-height, the label block centres inside it,
and .ratings{align-items:stretch} still carries any overflow to a common
height. Same promise, one rule instead of three, and it holds in the stacked
article sidebar where .ratings is a column and stretch buys nothing.
-------------------------------------------------------------------------- */
/* Three rows need a real column, not inline spans that reflow into a
paragraph. justify-content centres the block on the card's own axis, which
is the axis the badge image is already on. */
.rating-card > span {
display: flex;
flex-direction: column;
justify-content: center;
gap: 2px;
}
/* Score and stars share a baseline: the numeral is 1.5rem and the stars 0.9rem,
so aligning the boxes would sit the row visibly high. */
.rating-card__rate { display: flex; align-items: baseline; gap: 7px; }
/* The reservation is retired here, not deleted upstream: the card min-height
below is what equalises the pair now. Left in place it would add a line of
dead space under every label. */
.rating-card__meta {
display: block;
min-height: 0;
line-height: 1.3;
color: var(--color-text);
font-weight: 600;
}
.rating-card__reviews {
display: block;
font-size: var(--fs-xs);
line-height: 1.3;
color: var(--color-text-muted);
}
/* 340px, browser-measured: the longer count, "10 reviews in the HubSpot
ecosystem", asks for 226px of text box. At the old 288px pill it had 196px
and wrapped; at 320px it had 228px, which fits by two pixels and is not a
margin worth shipping. 340px gives it 248px. Two pills plus the 14px gap is
694px, so the pair still sits on one row inside the 768px container, and the
520px rule already in v2.css still takes them full width below that. */
.ratings { --pill-w: 340px; }
.rating-card { min-height: 96px; }
/* THE DARK HERO KEEPS THE LIGHT PILL, DELIBERATELY. Item 3 moves this pair
into the homepage hero, which is .hero--dark. The translucent-plate route
(rgba(255,255,255,.07), the treatment v2 used on its dark sections) was
built and looked at first: both marks are supplied as hexagons with a dark
navy outline and a white fill, so on a #0f172a plate the outline drops into
the background and the badge reads as a grey smudge at 40px. These are two
vendors' certification marks, not decoration, and the reference he pointed
at (fb-1, lower) is the v2 pair on plain white. So the card stays on the
light surface it uses on the other 45 pages and takes a lifted shadow to
sit on the dark band. Every colour inside it is already stated absolutely
(score/meta -> --color-text, reviews -> --color-text-muted) rather than
inherited, so .hero--dark's on-dark body colour cannot leak in. */
.hero--dark .rating-card { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.30); }
.hero--dark .rating-card:hover { box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38); }
/* THE HERO PAIR IS A GRID, NOT A WRAPPING FLEX ROW. The hero's left column is
595px at 1440, so two 340px pills do not fit and flex wraps them onto two
lines. align-items:stretch only equalises WITHIN a flex line, so the moment
they wrap the two cards size independently and the pair comes out 107px
against 96px, which is the exact mismatch his earlier "both should be of
same size" note was about. A two-track grid cannot wrap: both cards take the
same track width and the same row height at every width the hero column
takes, and auto-fit drops them to one full-width card only when the column
is genuinely too narrow for two. */
.ratings--hero {
margin-top: var(--space-6);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 14px;
align-items: stretch;
}
.ratings--hero .rating-card { max-width: none; }