margins were ~1em. */
margin: 0 0 0.9rem;
}
.rr-home-editorial a {
color: var(--rr-red);
text-decoration: none;
}
.rr-home-editorial p a {
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
text-decoration-color: color-mix(in srgb, var(--rr-red) 38%, transparent);
}
.rr-home-editorial a:hover,
.rr-home-editorial a:focus-visible {
color: var(--rr-red-dark);
text-decoration-color: currentColor;
}
/* Lead-image table (the header art + "See Best Picks" button rows).
* Strip the table chrome so the art floats cleanly, full-width. */
.rr-home-editorial > table:first-of-type,
.rr-home-editorial > table:first-of-type tbody,
.rr-home-editorial > table:first-of-type tr,
.rr-home-editorial > table:first-of-type td {
display: block;
width: 100%;
border: 0 !important;
background: transparent !important;
padding: 0 !important;
}
.rr-home-editorial > table:first-of-type td {
text-align: center;
}
.rr-home-editorial > table:first-of-type img {
height: auto;
border-radius: var(--rr-radius-lg);
}
/* The "See Best Picks" CTA image: lift it as a real button affordance. */
.rr-home-editorial > table:first-of-type tr:last-child img {
border-radius: var(--rr-radius-pill);
box-shadow: var(--rr-shadow-card);
transition: transform 0.18s var(--rr-ease-out), box-shadow 0.18s var(--rr-ease-out);
}
.rr-home-editorial > table:first-of-type tr:last-child a:hover img,
.rr-home-editorial > table:first-of-type tr:last-child a:focus-visible img {
transform: translateY(-2px);
box-shadow: var(--rr-shadow-card-hover);
}
/* Drop the stray
spacing the CMS injects around the lead art. */
.rr-home-editorial > table:first-of-type br { display: none; }
/* ============================================================
* 3. "OUR TOP TREADMILL PICKS" — comparison table → cards
* ------------------------------------------------------------
* Source markup: a 4-col
(Category | Model | Why We
* Like It | Review) with INLINE styles on thead/tr/td
* (border:1px solid #ddd; background:#222 / #f7f7f7; padding).
* Inline styles beat selector specificity, so border/background/
* padding overrides use !important, tightly scoped to this article.
* Strategy: keep it a table on desktop (refined, borderless,
* zebra via tokens) and collapse to stacked labeled cards on
* mobile via display overrides (display is NOT set inline).
* ============================================================ */
/* Target the data tables (the comparison + price tables), but not
* the lead-image table handled above. They are the tables that
* follow an editorial H2. */
.rr-home-editorial table:not(:first-of-type) {
display: table;
width: 100%;
border-collapse: separate !important;
border-spacing: 0;
margin: 0 0 clamp(var(--rr-space-6), 4vw, var(--rr-space-8)) !important;
border: 1px solid var(--rr-ink-200) !important;
border-radius: var(--rr-radius-lg);
overflow: hidden;
background: var(--rr-bg) !important;
box-shadow: var(--rr-shadow-card);
font-size: 0.975rem;
}
/* Header row — ink slab, not pure black; sans, confident. */
.rr-home-editorial table:not(:first-of-type) thead tr,
.rr-home-editorial table:not(:first-of-type) thead th {
background: var(--rr-ink-900) !important;
color: #fff !important;
}
.rr-home-editorial table:not(:first-of-type) thead th {
font-family: var(--rr-font-sans);
font-weight: 700;
font-size: 0.78rem;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 0.85rem 1.1rem !important;
border: 0 !important;
border-bottom: 0 !important;
}
/* Body cells — generous editorial padding, hairline row seams,
* no heavy 1px box grid. */
.rr-home-editorial table:not(:first-of-type) tbody td {
padding: 1rem 1.1rem !important;
border: 0 !important;
border-bottom: 1px solid var(--rr-ink-100) !important;
vertical-align: top;
color: var(--rr-ink-600);
background: transparent !important;
}
.rr-home-editorial table:not(:first-of-type) tbody tr:last-child td {
border-bottom: 0 !important;
}
/* Kill the inline zebra (#f7f7f7) and re-apply a token zebra so it
* tracks the ink ramp. Override inline tr background. */
.rr-home-editorial table:not(:first-of-type) tbody tr {
background: transparent !important;
transition: background 0.15s var(--rr-ease-out);
}
.rr-home-editorial table:not(:first-of-type) tbody tr:nth-child(even) {
background: var(--rr-ink-50) !important;
}
.rr-home-editorial table:not(:first-of-type) tbody tr:hover {
background: var(--rr-red-50) !important;
}
/* First cell (the "Best Overall" / price-band label) — make it the
* card's eyebrow: ink, bold, slightly larger. */
.rr-home-editorial table:not(:first-of-type) tbody td:first-child {
width: 1%;
white-space: nowrap;
}
.rr-home-editorial table:not(:first-of-type) tbody td:first-child strong {
color: var(--rr-ink-900);
font-family: var(--rr-font-sans);
font-weight: 700;
}
/* The model name (2nd cell in the picks table) — emphasize. */
.rr-home-editorial table:not(:first-of-type) thead + tbody td:nth-child(2) {
color: var(--rr-ink-900);
font-weight: 600;
}
/* "Read Review" / "View Options" link cell → a real pill CTA. */
.rr-home-editorial table:not(:first-of-type) tbody td:last-child a {
display: inline-flex;
align-items: center;
gap: 0.4em;
white-space: nowrap;
font-family: var(--rr-font-sans);
font-weight: 600;
font-size: 0.85rem;
color: var(--rr-red-dark);
text-decoration: none;
padding: 0.4rem 0.9rem;
border: 1px solid color-mix(in srgb, var(--rr-red) 30%, var(--rr-ink-200));
border-radius: var(--rr-radius-pill);
background: var(--rr-bg);
transition: background 0.16s var(--rr-ease-out), color 0.16s var(--rr-ease-out),
border-color 0.16s var(--rr-ease-out), transform 0.16s var(--rr-ease-out);
}
.rr-home-editorial table:not(:first-of-type) tbody td:last-child a::after {
content: "\2192"; /* → */
font-size: 1.05em;
line-height: 1;
transition: transform 0.16s var(--rr-ease-out);
}
.rr-home-editorial table:not(:first-of-type) tbody td:last-child a:hover,
.rr-home-editorial table:not(:first-of-type) tbody td:last-child a:focus-visible {
background: var(--rr-red);
border-color: var(--rr-red);
color: #fff;
transform: translateY(-1px);
}
.rr-home-editorial table:not(:first-of-type) tbody td:last-child a:hover::after,
.rr-home-editorial table:not(:first-of-type) tbody td:last-child a:focus-visible::after {
transform: translateX(2px);
}
/* ============================================================
* 4. MOBILE: collapse comparison tables into stacked cards
* ------------------------------------------------------------
* Below 720px, dense 4-col tables are unreadable. Flip them to
* block-level cards with data-label rows. We only have inline
* styles on td/tr (not on table layout display), so flipping
* `display` works without fighting specificity.
* ============================================================ */
@media (max-width: 720px) {
.rr-home-editorial table:not(:first-of-type),
.rr-home-editorial table:not(:first-of-type) tbody,
.rr-home-editorial table:not(:first-of-type) tr,
.rr-home-editorial table:not(:first-of-type) td {
display: block;
width: 100% !important;
}
/* Visually hide the header row but keep it for AT. */
.rr-home-editorial table:not(:first-of-type) thead {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* Each row becomes a standalone card. */
.rr-home-editorial table:not(:first-of-type) {
border: 0 !important;
border-radius: 0;
overflow: visible;
box-shadow: none;
background: transparent !important;
}
.rr-home-editorial table:not(:first-of-type) tbody tr,
.rr-home-editorial table:not(:first-of-type) tbody tr:nth-child(even),
.rr-home-editorial table:not(:first-of-type) tbody tr:hover {
margin: 0 0 var(--rr-space-4);
border: 1px solid var(--rr-ink-200);
border-radius: var(--rr-radius-lg);
background: var(--rr-bg) !important;
box-shadow: var(--rr-shadow-card);
overflow: hidden;
}
.rr-home-editorial table:not(:first-of-type) tbody td {
padding: 0.7rem 1.1rem !important;
border-bottom: 1px solid var(--rr-ink-100) !important;
white-space: normal !important;
width: 100% !important;
}
/* Label column heads the card with a tinted strip. */
.rr-home-editorial table:not(:first-of-type) tbody td:first-child {
background: var(--rr-ink-50);
padding-top: 0.9rem !important;
}
.rr-home-editorial table:not(:first-of-type) tbody td:last-child {
border-bottom: 0 !important;
padding-bottom: 1rem !important;
}
.rr-home-editorial table:not(:first-of-type) tbody td:last-child a {
width: 100%;
justify-content: center;
}
}
/* ============================================================
* 5. "BY TYPE" / "MOST POPULAR BRANDS" prose lists
* ------------------------------------------------------------
* These render as a run of Name: …
* paragraphs. Give them a defined, scannable two-line-row look
* with a subtle left accent so they read as an editorial list,
* not loose body copy. Targeted via the H2 that precedes them
* using the general-sibling combinator scoped to the article.
* (No markup change; purely visual.)
* ============================================================ */
/* A paragraph that is essentially "…: text"
* — we style every editorial that contains a leading
* with an inline link as a definition row. */
.rr-home-editorial p > strong:first-child > a {
color: var(--rr-ink-900);
font-weight: 700;
}
.rr-home-editorial p:has(> strong:first-child > a) {
position: relative;
max-width: 760px;
margin: 0;
/* G4: tightened vertical padding (was 0.7rem) so the "Getting Started"
* callout rows sit closer together — David asked to tighten this area. */
padding: 0.45rem 0.5rem 0.45rem 1.1rem;
border-bottom: 1px solid var(--rr-ink-100);
}
.rr-home-editorial p:has(> strong:first-child > a)::before {
content: "";
position: absolute;
left: 0;
top: 0.6rem;
bottom: 0.6rem;
width: 3px;
border-radius: var(--rr-radius-pill);
background: var(--rr-ink-200);
transition: background 0.16s var(--rr-ease-out);
}
.rr-home-editorial p:has(> strong:first-child > a):hover::before {
background: var(--rr-red);
}
.rr-home-editorial p:has(> strong:first-child > a) > strong:first-child > a {
text-decoration: none;
}
.rr-home-editorial p:has(> strong:first-child > a):hover > strong:first-child > a {
color: var(--rr-red-dark);
}
/* ============================================================
* 6. CARD + TILE MEDIA POLISH + BRANDED PLACEHOLDERS (Task B)
* ------------------------------------------------------------
* Root cause of the "empty gray boxes": the images themselves
* are present & 200 OK. The washed-out look came from product
* shots letterboxing (object-fit:contain) on a light-gray media
* background, plus any card whose source image is genuinely
* absent rendering a bare gray box. Fixes:
* - give product media a clean white field + hairline frame so
* `contain` reads as intentional product imagery;
* - render a branded, tinted placeholder (site initial) whenever
* a card/tile has NO image (the *--placeholder hooks we add in
* PHP, plus a :has() guard so it never double-paints).
* ============================================================ */
/* Shared branded placeholder surface for card media + tiles. */
.front-page--home .rr-card__media--placeholder,
.front-page--home .rr-card__media:not(:has(img)),
.front-page--home .rr-tile--placeholder {
background:
radial-gradient(120% 120% at 0% 0%, var(--rr-red-50), transparent 55%),
linear-gradient(135deg, var(--rr-ink-100), var(--rr-ink-50));
}
/* The initial/site-mark glyph that fills an image-less card. */
.front-page--home .rr-card__placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--rr-font-display);
font-weight: 700;
font-size: clamp(2rem, 6vw, 3rem);
line-height: 1;
color: color-mix(in srgb, var(--rr-red) 70%, var(--rr-ink-400));
letter-spacing: -0.02em;
user-select: none;
}
/* Card media must be a positioning context for the absolute glyph. */
.front-page--home .rr-card__media--placeholder {
position: relative;
}
/* A small site-mark dot accent in the corner of the placeholder. */
.front-page--home .rr-card__media--placeholder::after {
content: "";
position: absolute;
top: 0.6rem;
right: 0.6rem;
width: 0.55rem;
height: 0.55rem;
border-radius: 2px;
background: var(--rr-red);
opacity: 0.65;
}
/* Image-less Other Resources tile: branded block + centered label. */
.front-page--home .rr-tile--placeholder {
display: flex;
align-items: flex-end;
}
/* Soften the dark gradient overlay on placeholder tiles (no photo to
* darken) so the label stays legible on the light branded field. */
.front-page--home .rr-tile--placeholder::after {
background: linear-gradient(
to top,
rgba(21, 23, 28, 0.55) 0%,
rgba(21, 23, 28, 0.10) 55%,
rgba(21, 23, 28, 0) 80%
);
}
.front-page--home .rr-tile--placeholder .rr-tile__label {
color: var(--rr-ink-900);
text-shadow: none;
}
/* ============================================================
* 7. READ OUR POPULAR ARTICLES — grid polish
* ============================================================ */
/* Column heading: de-uppercase the legacy treatment into an
* editorial label with a refined red tick. */
.rr-popular-topics .rr-topics-column__heading {
font-family: var(--rr-font-display);
font-weight: 600;
font-size: 1.05rem;
letter-spacing: -0.01em;
text-transform: none;
text-align: left;
color: var(--rr-ink-900);
border-bottom: 1px solid var(--rr-ink-200);
padding-bottom: var(--rr-space-3);
margin-bottom: var(--rr-space-4);
display: flex;
align-items: center;
gap: 0.5rem;
}
.rr-popular-topics .rr-topics-column__heading::before {
content: "";
width: 0.65rem;
height: 0.65rem;
border-radius: 3px;
background: var(--rr-red);
flex: none;
}
/* Card refinements within the topic columns. */
.rr-popular-topics .rr-topics-item .rr-card {
border-radius: var(--rr-radius-md);
}
.rr-popular-topics .rr-card__media {
aspect-ratio: 16 / 10;
background: #fff;
}
.rr-popular-topics .rr-card__media img {
object-fit: cover;
}
.rr-popular-topics .rr-card__title {
font-family: var(--rr-font-sans);
font-weight: 600;
color: var(--rr-ink-900);
line-height: 1.3;
}
/* Slightly tighter column gap, roomier card gap for editorial calm. */
.rr-popular-topics .rr-topics-grid {
gap: clamp(var(--rr-space-5), 3vw, var(--rr-space-7));
}
/* ============================================================
* 8. OTHER RESOURCES — tile grid polish
* ============================================================ */
.rr-other-resources .rr-tile {
border-radius: var(--rr-radius-md);
box-shadow: var(--rr-shadow-card);
transition: transform 0.18s var(--rr-ease-out), box-shadow 0.18s var(--rr-ease-out);
}
.rr-other-resources .rr-tile:hover,
.rr-other-resources .rr-tile:focus-visible {
transform: translateY(-3px);
box-shadow: var(--rr-shadow-card-hover);
}
.rr-other-resources .rr-tile__label {
font-family: var(--rr-font-sans);
font-weight: 600;
font-size: 0.9rem;
letter-spacing: 0;
}
/* A touch more gap so the 6-up strip breathes. */
.rr-other-resources .rr-tile-grid {
gap: clamp(var(--rr-space-3), 1.6vw, var(--rr-space-4));
}
/* ============================================================
* 9. LATEST REVIEWS — grid polish
* ------------------------------------------------------------
* Product shots vary wildly (white-bg cutouts, wide hero photos).
* Keep object-fit:contain so we never crop a product, but place
* it on a clean white field with a hairline frame + soft inner
* padding so it reads as a deliberate product card, not an empty
* letterboxed gray box.
* ============================================================ */
.rr-latest-reviews .rr-card {
border-radius: var(--rr-radius-lg);
}
.rr-latest-reviews__item .rr-card__media {
aspect-ratio: 4 / 3;
background: #fff;
border-bottom: 1px solid var(--rr-ink-100);
}
.rr-latest-reviews__item .rr-card__media img {
padding: var(--rr-space-4);
object-fit: contain;
transition: transform 0.3s var(--rr-ease-out);
}
.rr-latest-reviews__item .rr-card:hover .rr-card__media img,
.rr-latest-reviews__item .rr-card:focus-within .rr-card__media img {
transform: scale(1.03);
}
.rr-latest-reviews .rr-card__title {
font-family: var(--rr-font-sans);
font-weight: 600;
color: var(--rr-ink-900);
line-height: 1.3;
padding-top: var(--rr-space-4);
}
/* Price-range meta → a refined ink pill chip, not loose caps text. */
.rr-latest-reviews .rr-card__meta {
display: inline-flex;
align-items: center;
width: fit-content;
margin: var(--rr-space-2) 0 var(--rr-space-4) var(--rr-space-4);
padding: 0.25rem 0.6rem;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--rr-red-dark);
background: var(--rr-red-50);
border-radius: var(--rr-radius-pill);
}
/* Roomier grid gutters for the 3-up review wall. */
.rr-latest-reviews__grid {
gap: clamp(var(--rr-space-5), 2.5vw, var(--rr-space-6));
}
/* ============================================================
* 10. RESPONSIVE REFINEMENTS (mobile-first additions)
* ============================================================ */
/* On wide screens give the editorial article a touch more measure
* room beside the sidebar without changing the layout grid. */
@media (min-width: 1100px) {
.rr-home-editorial {
font-size: 1.0625rem;
}
}
/* Mid screens: keep the 6-up Other Resources strip from getting
* cramped by relaxing to readable rows (main.css already steps
* 2→3→6; we just ensure labels stay legible at the 3-up step). */
@media (min-width: 600px) and (max-width: 899px) {
.rr-other-resources .rr-tile__label {
font-size: 0.85rem;
}
}
/* Small phones: tighten section rhythm so the page isn't endless. */
@media (max-width: 540px) {
.front-page--home .rr-section {
padding-block: clamp(var(--rr-space-6), 9vw, var(--rr-space-8));
}
.rr-latest-reviews__item .rr-card__media img {
padding: var(--rr-space-3);
}
.rr-home-editorial p:has(> strong:first-child > a) {
padding-left: 0.85rem;
}
}
/* Honor reduced-motion: neutralize the hover transforms we added. */
@media (prefers-reduced-motion: reduce) {
.front-page--home .rr-card,
.front-page--home .rr-tile,
.front-page--home .rr-card__media img,
.front-page--home .rr-tile__media,
.rr-home-editorial table:not(:first-of-type) tbody td:last-child a,
.rr-home-editorial > table:first-of-type tr:last-child img {
transition: none !important;
}
}