/*
Her Daily Fit — Redesign Layer
============================================================
New design system per DESIGN_HANDOFF (see CLAUDE.md).
Token-level reskin: loaded AFTER style.css so these overrides win.
Reverting = remove the 'fr-redesign' enqueue in functions.php.
Key moves:
• Accent gold #A07B3D → brown #C87253
• Near-black warm #1E1A16 → #1a1a1a
• Section bg cream #F8F3EE → beige-light #fafaf8
• Fonts Inter/Jakarta → DM Sans
• Homepage hero: flat cream → 3-colour gradient
============================================================ */
/* ---------------------------------------------------------
1. Design tokens — remap the existing --fr-* variables
--------------------------------------------------------- */
:root {
/* === New palette (handoff) ===
brown #C87253 primary accent
black #1a1a1a text / buttons
beige-light #fafaf8 section backgrounds
beige-card #f5ede4 card / feature backgrounds
beige-border #e8dcd1 soft borders
gray-border #e8e8e8 standard borders
gray-label #999 labels
gray-text #888 secondary body
gray-body #666 primary body
*/
/* Accent → brown scale (#C87253 base) */
--fr-accent-50: #FBF3EF;
--fr-accent-100: #F5E3D9;
--fr-accent-200: #EAC7B4;
--fr-accent-300: #DCA588;
--fr-accent-400: #D08B6C;
--fr-accent-500: #C87253;
--fr-accent-600: #C87253;
--fr-accent-700: #A85336;
--fr-accent-800: #85402A;
--fr-accent-900: #5E2E1E;
/* Secondary (quiz) aliases → brown */
--fr-secondary-300: #DCA588;
--fr-secondary-400: #D08B6C;
--fr-secondary-500: #C87253;
--fr-secondary-600: #C87253;
/* Links → brown */
--fr-link: #C87253;
--fr-link-hover: #A85336;
/* Primary near-black → neutral #1a1a1a (buttons = 600 base, 700 hover) */
--fr-primary-50: #f6f6f6;
--fr-primary-600: #1a1a1a;
--fr-primary-700: #0d0d0d;
--fr-primary-800: #0a0a0a;
--fr-primary-900: #000000;
/* Neutral scale — cooler beige/grey per handoff */
--fr-slate-50: #fafaf8; /* section backgrounds (beige-light) */
--fr-slate-100: #f5ede4; /* card / soft fill (beige-card) */
--fr-slate-200: #e8e8e8; /* borders (gray-border) */
--fr-slate-300: #d8d8d8;
--fr-slate-400: #999999; /* labels (gray-label) */
--fr-slate-500: #888888; /* secondary body (gray-text) */
--fr-slate-600: #666666; /* primary body (gray-body) */
--fr-slate-700: #333333;
--fr-slate-800: #1a1a1a;
--fr-slate-900: #1a1a1a; /* headings */
--fr-slate-950: #141414;
/* Heading colour */
--fr-plum: #1a1a1a;
/* Accent glow → brown rgba */
--fr-shadow-glow-accent: 0 4px 24px rgba(200,114,83,0.15);
/* Fonts → DM Sans everywhere */
--fr-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--fr-font-display: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* Apply DM Sans to base type (some rules set font-family directly) */
body,
button, input, select, textarea {
font-family: var(--fr-font-body);
}
/* ---------------------------------------------------------
2. Homepage hero — WHITE (per reference); gradient moves to
the Editor's Picks band below.
--------------------------------------------------------- */
.fr-home-hero {
background: #fff;
border-bottom: none;
/* kill the tall bottom padding that made room for the overlapping strip */
padding: 72px 0 36px;
}
/* Hero title: DM Sans, reference weight 700, black */
.fr-home-hero__title {
font-family: var(--fr-font-display);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--fr-slate-900);
}
/* "Reviews" emphasis word → black (reference has no accent here) */
.fr-home-hero__title-em { color: inherit; }
/* Eyebrow badge: quiet label on white (reference: uppercase grey text) */
.fr-home-hero__badge {
background: transparent;
color: var(--fr-slate-500);
border: none;
padding: 0;
letter-spacing: 0.16em;
}
/* Editor's Picks becomes the gradient band (reference); drop the overlap */
.fr-hero-preview {
margin-top: 0;
padding: 52px 0 60px;
background: linear-gradient(135deg, #fef3e2 0%, #f0e8ff 50%, #e8f4ff 100%);
border-top: 1px solid var(--fr-slate-200);
border-bottom: 1px solid var(--fr-slate-200);
}
/* Flatten the fanned strip into an even row (reference: plain 3-up grid) */
.fr-hero-card--center { transform: none; }
.fr-hero-card--center:hover { transform: translateY(-4px); }
/* ---------------------------------------------------------
3. Headings — DM Sans, handoff weights
--------------------------------------------------------- */
h1, h2, h3, h4,
.fr-home-section__title,
.fr-section-title {
font-family: var(--fr-font-display);
letter-spacing: -0.02em;
}
/* Reference uses 700 weight for headings (not 800) */
h1, h2 { font-weight: 700; }
h3 { font-weight: 600; }
/* ---------------------------------------------------------
4. Hardcoded-gold overrides (rules that bypass tokens)
--------------------------------------------------------- */
/* Score badges → black (reference shows scores in black, not accent) */
.fr-score-badge--high,
.fr-score-badge--mid,
.fr-score-badge--low { background: #1a1a1a !important; }
/* Nav: hover underline bar + active/hover link colour were hardcoded gold */
nav.top_menu > ul:not(.off-canvas) > li > a:after,
nav.top_menu > ul:not(.off-canvas) > li > a::after,
nav.top_menu > ul:not(.off-canvas) > li:hover > a:after,
nav.top_menu > ul:not(.off-canvas) > li:hover > a::after,
nav.top_menu > ul:not(.off-canvas) > li.hovered > a:after,
nav.top_menu > ul:not(.off-canvas) > li.hovered > a::after,
nav.top_menu > ul:not(.off-canvas) > li.current-menu-item > a:after,
nav.top_menu > ul:not(.off-canvas) > li.current-menu-item > a::after {
background: var(--fr-accent-600) !important;
background-color: var(--fr-accent-600) !important;
}
nav.top_menu ul li ul.sub-menu { border-bottom-color: var(--fr-accent-600) !important; }
nav.top_menu > ul > li > a:hover,
nav.top_menu > ul > li.hovered > a,
nav.top_menu > ul > li.current-menu-item > a,
nav.top_menu > ul > li.current-menu-ancestor > a,
nav.top_menu > ul > li.current_page_item > a {
color: var(--fr-accent-600) !important;
}
/* Logo — reference: two-circle gradient mark + "Her Daily Fit" (DM Sans 18/700) */
.fr-logo {
gap: 10px !important;
align-items: center !important;
letter-spacing: normal !important;
text-transform: none !important;
font-family: var(--fr-font-display) !important;
font-size: 18px !important;
}
.fr-logo__mark { flex-shrink: 0; display: block; }
/* Uploaded image logo (Rehub Theme Options → rehub_logo) */
.fr-logo--image { gap: 0 !important; }
/* The uploaded PNG has ~17px transparent padding baked in top & bottom
(the actual mark is only 210x44 inside a 250x78 canvas). Scale it up and
pull the empty bands out with negative margins so the visible logo fills
the header instead of looking tiny. */
.fr-logo__img {
display: block;
width: auto;
height: 72px;
max-width: 100%;
margin-top: -16px;
margin-bottom: -16px;
}
.fr-logo__slash { display: none !important; }
.fr-logo__her,
.fr-logo__rest {
font-family: var(--fr-font-display) !important;
font-weight: 700 !important;
font-size: 18px !important;
letter-spacing: -0.02em !important;
text-transform: none !important;
color: #1a1a1a !important;
line-height: 1;
}
.fr-logo__her { margin-right: 0.28em; }
/* ---------------------------------------------------------
5. Component touches
--------------------------------------------------------- */
/* Outline buttons — brown accent on hover (secondary = .fr-btn--outline-light) */
.fr-btn--outline:hover,
.fr-btn--outline-light:hover {
border-color: var(--fr-accent-500);
color: var(--fr-accent-700);
}
/* ---------------------------------------------------------
6. Section titles — heavier + tighter (handoff H2: 800)
--------------------------------------------------------- */
.fr-home-section__header h2,
.fr-home-methodology__text h2,
.fr-home-quiz-cta__inner h2 {
font-weight: 700;
letter-spacing: -0.02em;
}
.fr-newsletter-box__text h3 { font-weight: 700; letter-spacing: -0.02em; }
/* Eyebrow spacing: a touch more air under the title before the grid */
.fr-home-section__header { margin-bottom: 48px; }
/* ---------------------------------------------------------
7. Cards — crisp editorial look: 1px border, tighter radius,
flat by default (handoff: borders not shadows)
--------------------------------------------------------- */
.fr-program-card,
.fr-guide-card,
.fr-home-methodology__card,
.fr-home-criteria-preview {
border: 1px solid var(--fr-slate-200);
border-radius: 8px; /* handoff: card radius 8px */
box-shadow: none;
}
.fr-program-card:hover,
.fr-guide-card:hover,
.fr-home-methodology__card:hover {
box-shadow: var(--fr-shadow-soft);
border-color: var(--fr-slate-300);
}
/* Editor's picks — reference: NO card container. Rounded image, then
black score, then name below (image + text on the gradient band). */
.fr-hero-preview__label {
color: var(--fr-slate-500);
letter-spacing: 0.16em;
}
.fr-hero-card {
position: relative;
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
}
.fr-hero-card--center { transform: none; }
.fr-hero-card:hover,
.fr-hero-card--center:hover { transform: translateY(-3px); box-shadow: none; }
.fr-hero-card__thumb {
border-radius: 8px;
overflow: hidden;
height: auto;
aspect-ratio: 4 / 5; /* reference: portrait editor's-pick images */
}
.fr-hero-card__thumb img { height: 100%; width: 100%; object-fit: cover; }
/* Info row → column: score on top (black text), name under it */
.fr-hero-card__info {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
border-top: none;
padding: 12px 2px 0;
}
.fr-hero-card__info .fr-score-badge {
order: -1; /* pull score above the name */
width: auto; height: auto;
background: none !important;
color: #1a1a1a !important;
font-size: 18px !important;
font-weight: 700;
padding: 0 !important;
border-radius: 0;
box-shadow: none;
}
.fr-hero-card__name { color: var(--fr-slate-900); font-weight: 600; font-size: 16px; margin-top: 4px; }
.fr-hero-card__desc {
display: -webkit-box;
-webkit-line-clamp: 2; /* just 2 lines */
-webkit-box-orient: vertical;
overflow: hidden;
margin-top: 8px;
font-size: 14.5px; /* bigger, like the example */
line-height: 1.55;
color: var(--fr-slate-600);
}
/* ---------------------------------------------------------
12. Best Programs for Every Stage — colored corner circle
(reference: soft accent blob top-right, cycling hues)
--------------------------------------------------------- */
.fr-hub-index-card {
overflow: hidden;
border-radius: 8px;
}
.fr-hub-index-card::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 84px;
height: 84px;
border-radius: 0 8px 0 100%;
opacity: 0.12;
pointer-events: none;
z-index: 0;
}
.fr-hub-index-card__header,
.fr-hub-index-card__intro { position: relative; z-index: 1; }
.fr-hub-index-card__arrow { display: none; } /* reference has the corner blob, not an arrow */
.fr-hub-index-card:nth-child(3n+1)::after { background: #667eea; }
.fr-hub-index-card:nth-child(3n+2)::after { background: #f5576c; }
.fr-hub-index-card:nth-child(3n+3)::after { background: #f093fb; }
.fr-hub-index-card:hover { border-color: var(--fr-slate-300); }
/* count label → grey (reference), not brown */
.fr-hub-index-card__count { color: var(--fr-slate-500) !important; }
/* Card images — reference: portrait 4/5 program images, clean (no dark overlay) */
.fr-program-card__thumb {
/* 4/5 forced a 16:9 library into portrait: the box needed 754x943 device
pixels and the source could only supply 610x763, so cards rendered soft.
4/3 is the tallest ratio these images can fill sharply. */
aspect-ratio: 4 / 3;
}
.fr-program-card__thumb::after,
.fr-guide-card__thumb::after { display: none; }
/* Score inline below the image (reference): bold black score + small grey name */
.fr-program-card__scoreline {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 8px;
}
.fr-program-card__scoreline .fr-score-badge {
width: auto !important;
height: auto !important;
background: none !important;
color: #1a1a1a !important;
font-size: 18px !important;
font-weight: 700 !important;
padding: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
flex: 0 0 auto;
}
.fr-program-card__scoreline .fr-program-card__title {
font-size: 13px;
font-weight: 600;
color: var(--fr-slate-500);
margin: 0;
}
/* Program card meta tags — differentiated by TYPE, reusing the theme's
existing semantic .fr-tag--* classes (no new markup/classes). */
.fr-program-card__meta { gap: 6px; }
.fr-program-card__meta .fr-tag {
font-size: 11px !important;
font-weight: 600 !important;
padding: 3px 9px !important;
border-radius: 4px !important;
border: none !important;
line-height: 1.4;
}
/* neutral chips — equipment, delivery, duration */
.fr-program-card__meta .fr-tag--equip,
.fr-program-card__meta .fr-tag--delivery,
.fr-program-card__meta .fr-tag--trial {
background: var(--fr-slate-100) !important; /* beige-card */
color: var(--fr-slate-700) !important;
}
/* impact — semantic soft tints (green / amber / red) */
.fr-program-card__meta .fr-tag--impact-low { background: #eaf6ef !important; color: #2f7d54 !important; }
.fr-program-card__meta .fr-tag--impact-mod { background: #fdf3e3 !important; color: #9a6a1e !important; }
.fr-program-card__meta .fr-tag--impact-high { background: #fbecec !important; color: #a63d3d !important; }
/* price — the key figure, tinted in the brand accent */
.fr-program-card__meta .fr-tag--cost {
background: var(--fr-accent-50) !important;
color: var(--fr-accent-700) !important;
font-weight: 700 !important;
}
/* Life-stage pips — a touch smaller to sit inline like the reference */
.fr-program-card__stages { gap: 4px; margin-bottom: 10px; }
.fr-ls-pip { font-size: 14px; }
/* Program card body: reference name is 15px/600, verdict 13px */
.fr-program-card__title { font-size: 1rem; }
/* Buttons — sharp editorial corners (handoff: 3px) */
.fr-btn,
.fr-btn--lg,
.fr-btn--primary,
.fr-btn--outline,
.fr-btn--outline-light {
border-radius: 3px;
}
.fr-newsletter-box__form .mailpoet_text,
.fr-newsletter-box__form .mailpoet_text_field,
.fr-newsletter-box__form .mailpoet_submit {
border-radius: 3px;
}
/* ---------------------------------------------------------
8. Life-stage tiles — colored tint per stage (reference):
peach / blue / lavender / pink, plain emoji, 2px border
--------------------------------------------------------- */
.fr-life-stage-tile {
border: 2px solid transparent;
border-radius: 8px;
padding: 24px 18px;
transition: transform var(--fr-transition-base), box-shadow var(--fr-transition-base);
}
.fr-life-stage-tile:nth-child(1) { background: #fef3e2; } /* Pre-perimenopause */
.fr-life-stage-tile:nth-child(2) { background: #e8f4ff; } /* Perimenopause */
.fr-life-stage-tile:nth-child(3) { background: #f0e8ff; } /* Menopause */
.fr-life-stage-tile:nth-child(4) { background: #ffeaf2; } /* Postmenopause */
/* Plain emoji (reference: no chip) */
.fr-life-stage-tile__icon {
width: auto; height: auto;
background: none;
border-radius: 0;
margin: 0 0 10px;
font-size: 30px;
}
.fr-life-stage-tile__label { font-size: 0.95rem; letter-spacing: -0.01em; }
.fr-life-stage-tile:hover {
transform: translateY(-3px);
box-shadow: 0 8px 22px rgba(26,26,26,0.06);
}
.fr-life-stage-block__heading { color: var(--fr-slate-400); letter-spacing: 0.14em; }
/* Quiz link — reference: black underlined, not brown */
.fr-life-stage-block__quiz-link a {
color: #1a1a1a !important;
text-decoration: underline !important;
text-underline-offset: 2px;
}
/* ---------------------------------------------------------
9. Section backgrounds (reference): gradient bands appear on
Editor's Picks (above) + Newsletter. Quiz CTA is plain grey.
--------------------------------------------------------- */
.fr-home-quiz-cta {
background: #f8f8f8;
border-top: 1px solid var(--fr-slate-200);
border-bottom: 1px solid var(--fr-slate-200);
}
/* Newsletter signup — the pastel gradient band (reference) */
.fr-newsletter-section {
background: linear-gradient(135deg, #fef3e2 0%, #f0e8ff 50%, #e8f4ff 100%);
border-top: 1px solid var(--fr-slate-200);
border-bottom: 1px solid var(--fr-slate-200);
}
/* ---------------------------------------------------------
9b. How We Score — reference: weight label + colored bar per
criterion (bar width & hue scale with the weight).
--------------------------------------------------------- */
/* Stack the methodology into two parts (reference: How We Score, then a
separate Trust Markers row) instead of a cramped 2-column layout. */
.fr-home-methodology__inner { display: block !important; }
.fr-home-methodology__text { max-width: none !important; }
.fr-home-methodology__text > p { max-width: 700px; }
/* Criteria → 3-column grid across full width (reference) */
.fr-home-criteria-preview {
border: none !important;
box-shadow: none !important;
padding: 0 !important;
background: none !important;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px 40px;
margin: 8px 0 8px;
}
/* How We Score sits on light grey; the trust markers become a full-width
WHITE band below (reference: grey scoring section, white trust section). */
.fr-home-methodology {
background: #fafaf8 !important;
padding-bottom: 0 !important;
}
.fr-home-methodology__inner { padding-bottom: 0 !important; margin-bottom: 0 !important; }
.fr-home-methodology__visual {
grid-template-columns: repeat(3, 1fr) !important;
gap: 40px !important;
margin-top: 56px;
padding: 56px 0 64px;
border-top: none;
/* full-bleed white band without causing horizontal scroll */
background: #fff;
box-shadow: 0 0 0 100vmax #fff;
clip-path: inset(0 -100vmax);
}
.fr-home-methodology__card,
.fr-home-methodology__card:first-child {
grid-column: auto !important;
background: none !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
text-align: center;
}
.fr-home-methodology__card .fr-home-methodology__icon,
.fr-home-methodology__card:first-child .fr-home-methodology__icon {
margin-left: auto;
margin-right: auto;
border-radius: 8px !important;
font-size: 0 !important; /* hide the emoji; symbol comes from ::before */
}
.fr-home-methodology__icon::before {
font-size: 20px;
line-height: 1;
font-weight: 600;
}
/* Reference trust icons: symbol + tinted gradient box, per card */
.fr-home-methodology__card:nth-child(1) .fr-home-methodology__icon {
background: linear-gradient(135deg, rgba(255,107,157,0.15) 0%, rgba(198,69,162,0.15) 100%) !important;
}
.fr-home-methodology__card:nth-child(1) .fr-home-methodology__icon::before { content: '✓'; color: #c44569; }
.fr-home-methodology__card:nth-child(2) .fr-home-methodology__icon {
background: linear-gradient(135deg, rgba(102,126,234,0.15) 0%, rgba(118,75,162,0.15) 100%) !important;
}
.fr-home-methodology__card:nth-child(2) .fr-home-methodology__icon::before { content: '9'; color: #667eea; font-weight: 700; font-size: 18px; }
.fr-home-methodology__card:nth-child(3) .fr-home-methodology__icon {
background: linear-gradient(135deg, rgba(240,147,251,0.15) 0%, rgba(245,87,108,0.15) 100%) !important;
}
.fr-home-methodology__card:nth-child(3) .fr-home-methodology__icon::before { content: '↻'; color: #f093fb; }
.fr-home-criteria-row {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
row-gap: 8px;
padding: 12px 0;
border-bottom: none;
}
.fr-home-criteria-row__name { color: #1a1a1a; font-weight: 600; font-size: 14px; }
/* weight → plain uppercase label, not a brown chip */
.fr-home-criteria-row__weight {
background: none;
color: #1a1a1a;
padding: 0;
border-radius: 0;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
}
/* colored progress bar spanning the row (fill % + hue per weight) */
.fr-home-criteria-row::after {
content: '';
grid-column: 1 / -1;
height: 4px;
border-radius: 2px;
background: #e8e8e8;
}
.fr-home-criteria-row:nth-child(1)::after,
.fr-home-criteria-row:nth-child(2)::after,
.fr-home-criteria-row:nth-child(3)::after { background: linear-gradient(to right, #667eea 100%, #e8e8e8 0); }
.fr-home-criteria-row:nth-child(4)::after { background: linear-gradient(to right, #f5576c 80%, #e8e8e8 0); }
.fr-home-criteria-row:nth-child(5)::after,
.fr-home-criteria-row:nth-child(6)::after { background: linear-gradient(to right, #f093fb 67%, #e8e8e8 0); }
.fr-home-criteria-row:nth-child(7)::after,
.fr-home-criteria-row:nth-child(8)::after { background: linear-gradient(to right, #ffa500 53%, #e8e8e8 0); }
.fr-home-criteria-row:nth-child(9)::after { background: linear-gradient(to right, #888 47%, #e8e8e8 0); }
/* ---------------------------------------------------------
10. MailPoet forms (footer newsletter band + any others)
MailPoet hardcodes a gold submit button + 14px radius via
its own settings, so these need !important to retint.
--------------------------------------------------------- */
.mailpoet_form input.mailpoet_submit,
input.mailpoet_submit,
.mailpoet_submit input[type="submit"] {
background-color: #1a1a1a !important; /* reference: black button */
border-color: #1a1a1a !important;
color: #fff !important;
border-radius: 3px !important;
font-weight: 600 !important;
}
.mailpoet_form input.mailpoet_submit:hover,
input.mailpoet_submit:hover {
background-color: #000 !important;
border-color: #000 !important;
}
/* Email input — sharp corners + visible border on light bg */
.mailpoet_form .mailpoet_text,
.mailpoet_form input.mailpoet_text {
border-radius: 3px !important;
border: 1px solid #ccc !important;
background: #fff !important;
color: #1a1a1a !important;
}
/* ---------------------------------------------------------
11. Newsletter band — dark charcoal → pastel gradient with
dark text (reference: gradient section, black button).
--------------------------------------------------------- */
.fr-home-newsletter {
background: linear-gradient(135deg, #fef3e2 0%, #f0e8ff 50%, #e8f4ff 100%) !important;
border-top: 1px solid var(--fr-slate-200);
border-bottom: 1px solid var(--fr-slate-200);
}
.fr-home-newsletter h2 { color: #1a1a1a !important; font-weight: 700; }
.fr-home-newsletter__label { color: var(--fr-slate-500) !important; }
.fr-home-newsletter__text,
.fr-home-newsletter p { color: var(--fr-slate-600) !important; }
/* Newsletter form — reference: input (grows) + button inline, centered.
The MailPoet wrapper is centered/inline-block so it collapses to content
and the fields stack; force the whole chain to a wide, centered block. */
.fr-home-newsletter .rh-container {
width: 100% !important;
max-width: 1200px;
margin: 0 auto;
}
.fr-home-newsletter__inner {
display: block !important;
width: 100% !important;
max-width: 640px;
margin: 0 auto;
}
.fr-home-newsletter__form,
.fr-home-newsletter .mailpoet_form,
.fr-home-newsletter .mailpoet_form_shortcode {
display: block !important;
width: 100% !important;
max-width: 560px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.fr-home-newsletter .mailpoet_form_form {
display: flex !important;
flex-direction: row !important; /* MailPoet forces column via #id rule */
flex-wrap: wrap !important; /* lets the validation message drop to line 2 */
gap: 12px;
width: 100% !important;
max-width: 560px !important;
margin: 0 auto !important;
align-items: stretch;
}
.fr-home-newsletter .mailpoet_paragraph { margin: 0 !important; padding: 0 !important; }
.fr-home-newsletter .mailpoet_paragraph:not(.last) { flex: 1 1 0 !important; min-width: 0; width: auto !important; }
/* MailPoet forces .mailpoet_paragraph{width:100%}, which makes the button
demand a full row → override to auto so it sits next to the input */
.fr-home-newsletter .mailpoet_paragraph.last { flex: 0 0 auto !important; width: auto !important; }
.fr-home-newsletter .mailpoet_text {
width: 100% !important;
min-width: 0 !important; /* allow the input to shrink below its size-based width */
box-sizing: border-box;
padding: 12px 16px !important;
}
.fr-home-newsletter input.mailpoet_submit {
padding: 12px 24px !important;
width: auto !important;
min-width: 0 !important;
white-space: nowrap;
}
/* validation/confirmation message drops to its own line */
.fr-home-newsletter .mailpoet_message,
.fr-home-newsletter .mailpoet_validate_success { flex: 1 1 100%; text-align: center; }
/* =========================================================
13. Follow-up fixes
========================================================= */
/* #1 Editor's-picks cards fill a 3-col grid (were fixed 270px = too small).
Desktop only — below 768px the grid must collapse, otherwise three
346px columns stay pinned at 1200px and overflow a phone screen. */
@media (min-width: 768px) {
.fr-hero-preview__strip {
display: grid !important;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
max-width: 1200px;
margin: 0 auto;
align-items: start;
padding: 0 40px;
}
.fr-hero-card,
.fr-hero-card--center { width: auto !important; }
}
/* Mobile: all three picks stacked full-width. The base theme hides the
two side cards below 599px (leaving one lonely card); we override that
so every editor's pick shows, each as a proper full-width card. */
@media (max-width: 767px) {
.fr-hero-preview__strip {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 20px !important;
max-width: 460px;
margin: 0 auto;
padding: 0 20px !important;
}
.fr-hero-card,
.fr-hero-card--center { width: auto !important; }
.fr-hero-card:not(.fr-hero-card--center) { display: block !important; }
.fr-hero-card__thumb { height: auto !important; aspect-ratio: 4 / 3; }
}
/* #2 Stage tiles — no brown border on hover; keep tint + soft lift */
.fr-life-stage-tile:hover {
border-color: transparent !important;
background: transparent; /* let the nth-child tint show through */
transform: translateY(-3px);
box-shadow: 0 10px 26px rgba(26,26,26,0.08);
}
.fr-life-stage-tile:nth-child(1):hover { background: #fef3e2 !important; }
.fr-life-stage-tile:nth-child(2):hover { background: #e8f4ff !important; }
.fr-life-stage-tile:nth-child(3):hover { background: #f0e8ff !important; }
.fr-life-stage-tile:nth-child(4):hover { background: #ffeaf2 !important; }
/* #3 How We Score criteria — reference layout: weight on top, name below,
full-width bar; tighten the space above the grid. */
.fr-home-methodology { padding-top: 64px !important; }
.fr-home-methodology__text > h2 { margin-bottom: 12px; }
.fr-home-methodology__text > p { margin-bottom: 32px !important; }
.fr-home-criteria-preview { margin: 0 !important; gap: 28px 40px !important; }
.fr-home-criteria-row {
display: flex !important;
flex-direction: column;
align-items: stretch;
gap: 6px;
padding: 0 !important;
}
.fr-home-criteria-row__weight {
order: -1; /* weight label on top */
align-self: flex-start;
}
.fr-home-criteria-row__name { font-size: 14px; }
.fr-home-criteria-row::after { width: 100%; margin-top: 2px; }
/* #4 Best Programs for Every Stage — white background (reference) */
.fr-home-section--hubs { background: #fff !important; }
/* =========================================================
14. Footer — spread the long filter-link column into
multiple columns on desktop / wide screens (was one tall stack).
========================================================= */
@media (min-width: 1024px) {
/* keep all three columns on one row; give the long list room */
.col_wrap_three {
gap: 48px;
align-items: flex-start;
flex-wrap: nowrap !important;
}
.col_wrap_three .footer_widget { flex: 1 1 0 !important; min-width: 0; }
/* the long "Life Stage" filter list gets more width + 2 columns */
.col_wrap_three .footer_widget:nth-child(2) { flex: 2.4 1 0 !important; }
.col_wrap_three .footer_widget:nth-child(2) ul {
columns: 2;
column-gap: 48px;
}
.col_wrap_three .footer_widget:nth-child(2) ul li {
break-inside: avoid;
-webkit-column-break-inside: avoid;
}
}
@media (min-width: 1500px) {
.col_wrap_three .footer_widget:nth-child(2) { flex: 3 1 0 !important; }
.col_wrap_three .footer_widget:nth-child(2) ul { columns: 3; }
}
/* =========================================================
15. REVIEW PAGES — align with the homepage design system.
Recolors the EXISTING review components (no new markup,
no content change, NO width constraint — full width kept).
========================================================= */
/* --- A. Remap semantic tokens to the muted reference palette.
This alone realigns callouts, pros/cons, risk + adherence. --- */
:root {
--fr-success: #5c9174; /* muted sage (was bright green) */
--fr-success-light: #f0f4f1;
--fr-warning: #9e7e6e; /* terracotta (was amber) */
--fr-warning-light: #f7f2f0;
--fr-danger: #b07d95; /* muted rose (was red) */
--fr-danger-light: #f9f2f7;
/* extra accents from the reference */
--fr-pos: #bcaa82; /* gold/tan */
--fr-key: #a4889c; /* rose/mauve */
--fr-data: #7894a8; /* slate blue */
}
/* --- B1. Hero — match the homepage (light band, brown accent) --- */
.fr-review-hero { background: #f8f8f8; border-bottom: 1px solid var(--fr-slate-200); }
.fr-review-hero__accent { color: var(--fr-accent-600) !important; }
.fr-review-hero__badge {
background: #fff; border: 1px solid var(--fr-slate-200);
color: var(--fr-slate-600); border-radius: 100px; font-size: 12px; padding: 5px 14px;
}
.fr-review-hero__badge--tested {
background: rgba(188,170,130,0.14); border-color: rgba(188,170,130,0.45); color: #7a6b46;
}
/* --- B2. Score block — homepage card language (8px, 1px border, flat) --- */
.fr-overall-score-block {
border: 1px solid var(--fr-slate-200); border-radius: 8px;
background: #fff; box-shadow: none;
}
.fr-overall-score-block__number,
.fr-overall-score-block__price { color: var(--fr-accent-600) !important; }
.fr-overall-score-block__label,
.fr-overall-score-block__price-label {
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: 1px; color: var(--fr-slate-400);
}
/* --- B3. Body text — readable size/contrast (width UNCHANGED) --- */
.fr-review-article.prose p,
.fr-review-article.prose li {
font-size: 16px !important;
line-height: 1.75 !important;
color: #444 !important;
}
.fr-review-article.prose a { color: var(--fr-accent-700); text-underline-offset: 2px; }
.fr-review-article.prose ul li::marker { color: var(--fr-accent-600); }
/* --- B4. Section headings — clear chapter breaks --- */
.fr-review-article.prose h2 {
font-size: 26px !important; font-weight: 700 !important;
color: #1a1a1a !important; letter-spacing: -0.02em;
margin: 56px 0 16px !important; padding-top: 24px;
border-top: 1px solid var(--fr-slate-200);
}
.fr-review-article.prose h3 { font-size: 19px !important; color: #1a1a1a !important; }
/* --- B5. Meta line above the article --- */
.review-header-meta {
font-size: 11px !important; font-weight: 700; text-transform: uppercase;
letter-spacing: 1px; color: var(--fr-slate-400) !important;
}
/* --- B6. Quick Answer (TLDR) — flat card, homepage language --- */
.fr-tldr-block {
background: var(--fr-slate-50); border: 1px solid var(--fr-slate-200);
border-radius: 8px; box-shadow: none;
}
.fr-tldr-block h2 { border-top: none !important; padding-top: 0 !important; margin-top: 0 !important; }
.fr-tldr-row { border-bottom: 1px solid var(--fr-slate-200); }
/* --- B7. Quick Verdict — brand accent card --- */
.fr-verdict-box {
background: #fff; border: 1px solid var(--fr-slate-200);
border-left: 3px solid var(--fr-accent-600); border-radius: 0 8px 8px 0; box-shadow: none;
}
.fr-verdict-box h2 { border-top: none !important; padding-top: 0 !important; margin-top: 0 !important; }
/* --- B8. Jump to Section — quiet TOC card --- */
.fr-jump-sections {
background: var(--fr-slate-50); border: 1px solid var(--fr-slate-200);
border-radius: 8px; box-shadow: none;
}
.fr-jump-sections a { color: var(--fr-slate-700); }
.fr-jump-sections a:hover { color: var(--fr-accent-700); }
/* --- B9. Callouts — map to the reference's 3 muted accents --- */
.fr-callout { border-radius: 0 8px 8px 0; }
.fr-callout--success {
background: linear-gradient(135deg, rgba(188,170,130,0.14) 0%, rgba(188,170,130,0.07) 100%);
border-left: 3px solid var(--fr-pos);
}
.fr-callout--success h4 { color: #7a6b46; }
.fr-callout--info {
background: linear-gradient(135deg, rgba(120,148,168,0.14) 0%, rgba(120,148,168,0.07) 100%);
border-left: 3px solid var(--fr-data);
}
.fr-callout--info h4 { color: #4d657a; }
.fr-callout--warning {
background: linear-gradient(135deg, rgba(158,126,110,0.14) 0%, rgba(158,126,110,0.07) 100%);
border-left: 3px solid var(--fr-warn, #9e7e6e); border-radius: 0 8px 8px 0;
}
.fr-callout--warning h4 { color: #7d6154 !important; }
/* --- B10. Equipment grid — tile treatment, gold accent, brown price --- */
.fr-equipment-item,
.fr-equipment-card {
background: #fff; border: 1px solid var(--fr-slate-200);
border-radius: 8px; transition: border-color .2s;
}
.fr-equipment-item:hover,
.fr-equipment-card:hover { border-color: rgba(188,170,130,0.6); }
.fr-equipment-item strong { color: #1a1a1a; }
.fr-equipment-price { color: var(--fr-accent-600) !important; font-weight: 800; }
.fr-equipment-note { color: var(--fr-slate-500); }
/* --- B11. Adherence / risk — muted semantic chips --- */
.fr-adherence-item, .fr-risk-card { border-radius: 8px; }
.fr-adherence-label, .fr-risk-badge { border-radius: 4px; letter-spacing: 0.08em; }
/* --- B12. Pros & Cons — mint / rose per the reference --- */
.fr-pros-col {
background: linear-gradient(135deg, #f0f4f1 0%, #f6faf8 100%) !important;
border: 1px solid #dfe9e3 !important; border-radius: 8px;
}
.fr-pros-col h3 { color: #3f6f57 !important; }
.fr-cons-col {
background: linear-gradient(135deg, #f9f2f7 0%, #fdf8fc 100%) !important;
border: 1px solid #ecdfe7 !important; border-radius: 8px;
}
.fr-cons-col h3 { color: #8a5a71 !important; }
.fr-pros-col li::before { color: #5c9174; }
.fr-cons-col li::before { color: #b07d95; }
/* --- B13. Tables — homepage table language --- */
.fr-review-article.prose table {
border: 1px solid var(--fr-slate-200); border-radius: 8px;
box-shadow: none !important; font-size: 14.5px;
}
.fr-review-article.prose th {
background: var(--fr-slate-50); font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 1px; color: var(--fr-slate-400);
border: none; border-bottom: 1px solid var(--fr-slate-200);
}
.fr-review-article.prose td {
border: none; border-bottom: 1px solid var(--fr-slate-200); color: #444;
}
/* --- B14. Final score — brown figure on a flat card --- */
.fr-final-score {
background: var(--fr-slate-50); border: 1px solid var(--fr-slate-200);
border-radius: 8px; box-shadow: none;
}
.fr-final-score__number { color: var(--fr-accent-600) !important; }
/* --- B15. Related guides — homepage card language --- */
.related-guides-grid > * {
border: 1px solid var(--fr-slate-200) !important;
border-radius: 8px !important; box-shadow: none !important;
}
/* --- B16. Closing CTA — homepage gradient band --- */
.fr-highlight-box {
background: linear-gradient(135deg, #fef3e2 0%, #f0e8ff 50%, #e8f4ff 100%) !important;
border: 1px solid var(--fr-slate-200) !important;
border-radius: 8px; box-shadow: none;
}
/* (FAQ styling rolled back — left as it was) */
/* --- B10c. Equipment cards → lift off the page with a soft shadow
(no grey panel; the cards themselves carry the emphasis) --- */
.fr-equipment-card,
.fr-equipment-item {
box-shadow: 0 2px 10px rgba(26,26,26,0.06), 0 1px 2px rgba(26,26,26,0.04) !important;
transition: box-shadow .2s, transform .2s;
}
.fr-equipment-card:hover,
.fr-equipment-item:hover {
box-shadow: 0 8px 24px rgba(26,26,26,0.10) !important;
transform: translateY(-2px);
}
/* --- B10b. Equipment icons → gold tinted square tiles (reference style) --- */
.fr-equipment-icon {
width: 44px; height: 44px;
margin: 0 auto 12px;
display: flex; align-items: center; justify-content: center;
font-size: 22px !important;
background: rgba(188,170,130,0.16);
border-radius: 8px;
}
/* --- B1b. Review hero → brand gradient band (trial) --- */
.fr-review-hero {
background: linear-gradient(135deg, #fef3e2 0%, #f0e8ff 50%, #e8f4ff 100%) !important;
border-bottom: 1px solid var(--fr-slate-200);
}
/* =========================================================
16. More from the Program Review reference
========================================================= */
/* --- Section headings → reference scale (28px / -0.5px) --- */
.fr-review-article.prose h2 { font-size: 28px !important; letter-spacing: -0.5px !important; }
/* (FAQ styling rolled back — left as it was) */
/* --- "Stick With It" / adherence — ORIGINAL bold left-bar design kept.
It now reads in the new palette automatically, because the semantic
tokens it uses were remapped (sage / terracotta / rose). --- */
/* --- Risk cards — original design, new palette via the same tokens --- */
/* (Jump to Section → left as ordinary links) */
/* --- Related guides → card hover lift --- */
.related-guides-grid > * { transition: border-color .2s, box-shadow .2s; background: #fff; }
.related-guides-grid > *:hover {
border-color: var(--fr-slate-300) !important;
box-shadow: 0 4px 16px rgba(26,26,26,0.06) !important;
}
/* --- Closing CTA → roomier, but left-aligned as it originally was --- */
.fr-highlight-box { padding: 40px 32px !important; }
.fr-highlight-box h2,
.fr-highlight-box h3 {
font-size: 26px !important; font-weight: 700 !important;
border-top: none !important; padding-top: 0 !important; margin-top: 0 !important;
}
/* --- Related guides: the
tags in the content were acting as grid
items and eating a cell per row, forcing one card per line. --- */
.related-guides-grid { grid-template-columns: repeat(2, 1fr) !important; }
/* only the
s that are grid items — NOT the ones inside each card,
which provide the line break between a card's title and its text */
.related-guides-grid > br { display: none !important; }
/* =========================================================
18. Pros & Cons — matched to the reference spec
(12px radius, no border, flex list rows, softer markers)
========================================================= */
.fr-pros-cons-grid { gap: 40px !important; }
.fr-pros-col,
.fr-cons-col {
padding: 32px !important;
border: none !important;
border-radius: 12px !important;
}
.fr-pros-col { background: linear-gradient(135deg, #f0f4f1 0%, #f6faf8 100%) !important; }
.fr-cons-col { background: linear-gradient(135deg, #f9f2f7 0%, #fdf8fc 100%) !important; }
/* specificity must beat `.fr-review-article.prose h3` */
.fr-review-article.prose .fr-pros-col h3,
.fr-review-article.prose .fr-cons-col h3,
.fr-pros-col h3,
.fr-cons-col h3 {
font-size: 16px !important;
font-weight: 600 !important;
margin: 0 0 20px !important;
}
.fr-review-article.prose .fr-pros-col h3,
.fr-pros-col h3 { color: #5a7a5a !important; }
.fr-review-article.prose .fr-cons-col h3,
.fr-cons-col h3 { color: #8b7a8b !important; }
/* list rows: marker + text on a flex row (reference) */
.fr-pros-col li,
.fr-cons-col li {
display: flex;
gap: 12px;
padding: 0 !important;
margin-bottom: 16px;
font-size: 15px;
line-height: 1.6;
position: static !important;
}
.fr-pros-col li { color: #4a5a4a !important; }
.fr-cons-col li { color: #6a596a !important; }
.fr-pros-col li::before,
.fr-cons-col li::before {
position: static !important;
flex-shrink: 0;
margin-top: 2px;
font-weight: 700;
}
.fr-pros-col li::before { color: #7a9b7a !important; }
.fr-cons-col li::before { color: #b3a0b3 !important; }
/* =========================================================
19. Scanning & navigation
========================================================= */
/* Jump links landed *under* the sticky header — offset the targets */
.fr-review-article.prose h2,
.fr-review-article.prose h3,
.fr-review-article.prose [id],
.fr-review-section[id] { scroll-margin-top: 110px; }
/* Long tables: zebra striping so rows are easier to track across */
.fr-review-article.prose table tbody tr:nth-child(even) td { background: #fcfcfb; }
/* =========================================================
20. Pros/Cons markers — a theme rule was replacing the ✓/✗
with black 8px dots. Restore real tick / cross glyphs.
========================================================= */
.fr-review-article.prose .fr-pros-col ul > li::before,
.fr-review-article.prose .fr-cons-col ul > li::before,
.fr-pros-col ul > li::before,
.fr-cons-col ul > li::before {
background: none !important;
width: auto !important;
height: auto !important;
border-radius: 0 !important;
font-size: 15px !important;
line-height: 1.6 !important;
font-weight: 700 !important;
position: static !important;
flex-shrink: 0;
}
.fr-review-article.prose .fr-pros-col ul > li::before,
.fr-pros-col ul > li::before { content: '✓' !important; color: #7a9b7a !important; }
.fr-review-article.prose .fr-cons-col ul > li::before,
.fr-cons-col ul > li::before { content: '✕' !important; color: #b3a0b3 !important; }
/* =========================================================
21. Equipment cards — all light blue
========================================================= */
.fr-equipment-card {
background: rgba(120,148,168,0.13) !important;
border-color: rgba(120,148,168,0.38) !important;
}
/* icon tile lifts off the tinted card */
.fr-equipment-card .fr-equipment-icon { background: rgba(255,255,255,0.75) !important; }
/* =========================================================
22. Final Verdict band — reusable class (add to the block
in the editor: class="fr-verdict-final")
========================================================= */
.fr-verdict-final {
background: linear-gradient(135deg, #fef3e2 0%, #f0e8ff 50%, #e8f4ff 100%);
border: 1px solid var(--fr-slate-200);
border-radius: 12px;
padding: 40px 36px;
margin: 40px 0;
}
.fr-verdict-final h2,
.fr-verdict-final h3 {
border-top: none !important;
padding-top: 0 !important;
margin-top: 0 !important;
font-size: 28px !important;
}
.fr-verdict-final p:last-child { margin-bottom: 0 !important; }
/* =========================================================
23. Review top section — match the reference (no brown here)
Reference hero: black title, black score in a white card.
========================================================= */
/* title: all black — reference uses no accent colour in the H1 */
.fr-review-hero__accent { color: #1a1a1a !important; }
.fr-review-hero__title {
font-weight: 700 !important;
letter-spacing: -1px !important;
line-height: 1.1 !important;
}
/* score card: white, soft shadow, BLACK figures (reference spec) */
.fr-overall-score-block {
border-radius: 8px !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
border: 1px solid var(--fr-slate-200) !important;
}
.fr-overall-score-block__number,
.fr-overall-score-block__price { color: #1a1a1a !important; }
.fr-overall-score-block__label,
.fr-overall-score-block__price-label {
font-size: 10px !important;
font-weight: 600 !important;
color: #888 !important;
text-transform: uppercase;
letter-spacing: 1px;
}
.fr-overall-score-block__sub { font-size: 12px; color: #666; }
/* =========================================================
24. Review header meta line — was shouting (uppercase + bold).
Sentence case, grey, normal weight.
========================================================= */
.review-header-meta,
.review-header-meta p,
.review-header-meta .uppercase,
.review-header-meta .tracking-wide {
text-transform: none !important;
letter-spacing: normal !important;
font-weight: 400 !important;
font-size: 14px !important;
line-height: 1.65 !important;
color: #8a8a8a !important;
}
/* the bold runs inside it shouldn't be black either */
.review-header-meta strong,
.review-header-meta b {
font-weight: 500 !important;
color: #6f6f6f !important;
text-transform: none !important;
letter-spacing: normal !important;
}
/* =========================================================
25. Scores — black everywhere EXCEPT the header score,
which carries a single deep plum (no gradient).
========================================================= */
/* header score only — deep plum #6b4c6b */
.fr-overall-score-block__number {
background: none !important;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-text-fill-color: #6b4c6b !important;
color: #6b4c6b !important;
}
/* keep the "/10" quiet so the figure carries the colour */
.fr-overall-score-block__number span {
-webkit-text-fill-color: var(--fr-slate-400);
color: var(--fr-slate-400) !important;
}
/* every other score → black, no gradient */
.fr-score,
.fr-rating-detail__score,
.fr-final-score__number {
background: none !important;
-webkit-text-fill-color: #1a1a1a !important;
color: #1a1a1a !important;
}
/* the wrapper holding " / 10" stays grey */
.fr-score-big {
background: none !important;
-webkit-text-fill-color: var(--fr-slate-400) !important;
color: var(--fr-slate-400) !important;
}
.fr-rating-detail__score span,
.fr-final-score__number span {
-webkit-text-fill-color: var(--fr-slate-400) !important;
color: var(--fr-slate-400) !important;
}
/* =========================================================
26. Quick Verdict — drop the brown side rule; use the
current theme palette (soft pink→lavender→blue wash).
========================================================= */
.fr-verdict-box {
background: linear-gradient(135deg, rgba(254,243,226,0.55) 0%, rgba(240,232,255,0.55) 52%, rgba(232,244,255,0.55) 100%) !important;
border: 1px solid var(--fr-slate-200) !important;
border-left: 1px solid var(--fr-slate-200) !important; /* was the brown accent line */
border-radius: 12px !important;
box-shadow: none !important;
padding: 32px 34px !important;
}
.fr-verdict-box h2 {
border-top: none !important;
padding-top: 0 !important;
margin-top: 0 !important;
}
/* chips inside sit on white so they read against the wash */
.fr-verdict-box .fr-tag {
background: rgba(255,255,255,0.75) !important;
border: 1px solid var(--fr-slate-200) !important;
color: var(--fr-slate-700) !important;
}
/* =========================================================
27. Green price chips → blue (theme slate blue)
========================================================= */
.fr-review-article.prose .fr-tag--cost,
.fr-tag--cost {
background: rgba(120,148,168,0.16) !important;
color: #4d657a !important;
}
/* =========================================================
28. Verdict lead statement — bright green → theme blue
("Worth it for women over 40? Yes — …")
========================================================= */
.fr-verdict-box .fr-verdict-lead strong,
.fr-verdict-lead strong,
.fr-verdict-lead b {
color: #4d657a !important;
}
/* =========================================================
29. RETIRE THE BROWN
Links → black w/ underline (plum on hover). Remaining accent
usages → plum. Plum stays reserved for the score + hovers.
========================================================= */
:root {
/* accent scale: brown → plum */
--fr-accent-50: #f5f0f5;
--fr-accent-100: #ece2ec;
--fr-accent-200: #ddcbdd;
--fr-accent-300: #b99bb9;
--fr-accent-400: #9a789a;
--fr-accent-500: #7d5c7d;
--fr-accent-600: #6b4c6b;
--fr-accent-rgb: 107, 76, 107; /* same plum, for rgba() */
--fr-accent-700: #573d57;
--fr-accent-800: #452f45;
--fr-accent-900: #332233;
--fr-secondary-300: #b99bb9;
--fr-secondary-400: #9a789a;
--fr-secondary-500: #7d5c7d;
--fr-secondary-600: #6b4c6b;
/* links: black by default, plum on hover */
--fr-link: #1a1a1a;
--fr-link-hover: #6b4c6b;
--fr-shadow-glow-accent: 0 4px 24px rgba(107,76,107,0.15);
}
/* body links — black, quietly underlined */
.fr-review-article.prose a,
.fr-verdict-box a,
.fr-tldr-block a {
color: #1a1a1a !important;
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-color: rgba(26,26,26,0.28) !important;
}
.fr-review-article.prose a:hover,
.fr-verdict-box a:hover,
.fr-tldr-block a:hover {
color: #6b4c6b !important;
text-decoration-color: rgba(107,76,107,0.55) !important;
}
/* prices and author link → black (were brown) */
.fr-equipment-price { color: #1a1a1a !important; }
.fr-author-box__link { color: #1a1a1a !important; }
/* --- 29b. Inline links MUST stay underlined. Now that links are black,
the underline is the only thing marking them as links. A theme rule
was setting text-decoration:none, so this needs !important. --- */
.fr-review-article.prose p a,
.fr-review-article.prose li a,
.fr-review-article.prose td a,
.fr-verdict-box p a,
.fr-tldr-block a {
text-decoration: underline !important;
text-decoration-line: underline !important;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
}
.fr-review-article.prose p a:hover,
.fr-review-article.prose li a:hover,
.fr-review-article.prose td a:hover,
.fr-verdict-box p a:hover {
color: #6b4c6b !important;
text-decoration-color: rgba(107,76,107,0.6) !important;
}
/* =========================================================
30. Review hero → grey, matching every other page type
(guides + hub heroes use #fafaf8; the reference uses grey too).
Gradient stays reserved for accent bands, not page headers.
========================================================= */
.fr-review-hero {
background: #fafaf8 !important;
border-bottom: 1px solid var(--fr-slate-200);
}
/* =========================================================
31. Chips — tinted by meaning instead of flat grey.
score → plum (brand) · price → blue (data) · trial → gold (offer)
========================================================= */
.fr-verdict-tags .fr-tag,
.fr-tldr-block .fr-tags .fr-tag {
border-width: 1px !important;
border-style: solid !important;
font-weight: 600 !important;
}
/* score → plum, matching the header score */
.fr-verdict-tags .fr-tag--score,
.fr-tldr-block .fr-tag--score {
background: rgba(107,76,107,0.11) !important;
color: #6b4c6b !important;
border-color: rgba(107,76,107,0.24) !important;
}
/* price → blue */
.fr-verdict-tags .fr-tag--cost,
.fr-tldr-block .fr-tag--cost {
background: rgba(120,148,168,0.15) !important;
color: #4d657a !important;
border-color: rgba(120,148,168,0.3) !important;
}
/* trial / offer → gold */
.fr-verdict-tags .fr-tag--trial,
.fr-tldr-block .fr-tag--trial,
.fr-verdict-tags .fr-tag--cancel,
.fr-tldr-block .fr-tag--cancel {
background: rgba(188,170,130,0.16) !important;
color: #7a6b46 !important;
border-color: rgba(188,170,130,0.34) !important;
}
/* delivery / neutral → soft mauve-grey */
.fr-verdict-tags .fr-tag--delivery,
.fr-tldr-block .fr-tag--delivery {
background: rgba(164,136,156,0.12) !important;
color: #7a6a76 !important;
border-color: rgba(164,136,156,0.26) !important;
}
/* score chip reads as one unit — number matches the plum tint, not black */
.fr-verdict-tags .fr-tag--score .fr-score,
.fr-verdict-tags .fr-tag--score .fr-score-big,
.fr-tldr-block .fr-tag--score .fr-score,
.fr-tldr-block .fr-tag--score .fr-score-big {
color: #6b4c6b !important;
-webkit-text-fill-color: #6b4c6b !important;
background: none !important;
}
/* =========================================================
32. Review hero — two columns. The featured image already
exists on every programme; it was just never rendered.
Fills the dead right-hand side and gives the page an anchor.
========================================================= */
.fr-review-hero .rh-container {
display: flex;
align-items: center;
gap: 48px;
}
.fr-review-hero .fr-review-hero__content { flex: 1 1 auto; min-width: 0; }
.fr-review-hero__media {
flex: 0 0 300px;
max-width: 300px;
}
.fr-review-hero__media img,
.fr-review-hero__img {
display: block;
width: 100%;
height: 220px;
object-fit: cover;
border-radius: 10px;
box-shadow: 0 6px 24px rgba(0,0,0,0.10);
}
/* stack on tablet/mobile — image below the title, shorter */
@media (max-width: 900px) {
.fr-review-hero .rh-container { flex-direction: column; align-items: stretch; gap: 24px; }
.fr-review-hero__media { flex: 1 1 auto; max-width: none; }
.fr-review-hero__media img,
.fr-review-hero__img { height: 180px; }
}
/* -------- score card: denser, less dead space -------- */
.fr-overall-score-block {
padding: 26px 32px !important;
gap: 32px !important;
}
.fr-overall-score-block__left { flex: 0 0 auto !important; }
/* price sits next to the score rather than pinned to the far edge */
.fr-overall-score-block__right { flex: 0 0 auto !important; }
/* =========================================================
34. Jump links plum by default (active keeps weight + fill
so it still separates from the rest).
========================================================= */
.fr-railnav__link { color: #1a1a1a !important; }
.fr-railnav__link:hover {
color: #573d57 !important;
background: rgba(107,76,107,0.08);
}
.fr-railnav__link.is-active {
color: #573d57 !important;
font-weight: 700;
background: rgba(107,76,107,0.11);
}
/* the older in-content jump list, same treatment */
.fr-jump-sections a,
.fr-review-toc__links a { color: #1a1a1a !important; }
.fr-jump-sections a:hover,
.fr-review-toc__links a:hover { color: #6b4c6b !important; }
/* =========================================================
35. Quick Verdict — one flat plum tint instead of the
3-stop pastel gradient (leftover from the earlier
gradient direction). Kept a touch stronger than the grey
.fr-tldr-block so it still reads as the highlight.
========================================================= */
.fr-verdict-box {
background: #f5f1f5 !important;
border: 1px solid rgba(107,76,107,0.18) !important;
}
/* =========================================================
36. Section rail (built by review-toc.js).
28 sections over 32,000px needed navigation, but the top
bar ate too much screen. This lives in the ~40px page
margin as a dot rail and costs no reading width; it
expands to labels only while hovered.
========================================================= */
.fr-railnav {
position: fixed;
left: 2px;
top: 50%;
transform: translateY(-50%);
z-index: 998;
opacity: 0;
pointer-events: none;
transition: opacity .25s ease;
}
.fr-railnav.is-visible { opacity: 1; pointer-events: auto; }
.fr-railnav__list {
list-style: none;
margin: 0;
padding: 8px 6px;
max-height: 78vh;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: none;
border-radius: 10px;
transition: background .18s ease, box-shadow .18s ease;
}
.fr-railnav__list::-webkit-scrollbar { display: none; }
/* vertical track: without it the dots read as page noise, not a control */
.fr-railnav__list { position: relative; }
.fr-railnav__list::before {
content: '';
position: absolute;
left: 14px; top: 10px; bottom: 10px;
width: 1px;
background: linear-gradient(180deg,
rgba(107,76,107,0) 0%,
rgba(107,76,107,0.22) 12%,
rgba(107,76,107,0.22) 88%,
rgba(107,76,107,0) 100%);
transition: opacity .18s ease;
}
.fr-railnav:hover .fr-railnav__list::before,
.fr-railnav.is-peek .fr-railnav__list::before { opacity: 0; }
.fr-railnav__list li { margin: 0; padding: 0; }
.fr-railnav__list li::before { content: none !important; } /* kill theme bullets */
.fr-railnav__link {
display: flex;
align-items: center;
gap: 0; /* collapsed rail must clear the content edge */
/* fixed height while collapsed: the label's line-height would
otherwise stretch each row and run the rail down the whole page */
height: 14px;
padding: 0 4px;
text-decoration: none !important;
border-radius: 6px;
}
.fr-railnav:hover .fr-railnav__link {
gap: 10px;
height: auto;
padding: 6px 8px;
}
.fr-railnav__dot {
flex: 0 0 auto;
width: 6px; height: 6px;
border-radius: 50%;
background: rgba(107,76,107,0.42);
transition: background .15s ease, transform .15s ease;
}
.fr-railnav__link:hover .fr-railnav__dot { background: #6b4c6b; }
.fr-railnav__link.is-active .fr-railnav__dot {
background: #6b4c6b;
transform: scale(1.9);
box-shadow: 0 0 0 4px rgba(107,76,107,0.13);
}
/* labels hidden until the rail is hovered — no reading width lost */
.fr-railnav__label {
max-width: 0;
opacity: 0;
overflow: hidden;
text-overflow: ellipsis; /* long headings cut cleanly, not mid-word */
white-space: nowrap;
font-size: 13px;
line-height: 1.5;
color: #1a1a1a;
transition: max-width .22s ease, opacity .18s ease;
}
.fr-railnav.is-peek .fr-railnav__link { gap: 10px; height: auto; padding: 6px 8px; }
.fr-railnav.is-peek .fr-railnav__label { max-width: 330px; opacity: 1; }
.fr-railnav:hover .fr-railnav__list,
.fr-railnav.is-peek .fr-railnav__list {
background: rgba(255,255,255,0.97);
backdrop-filter: saturate(180%) blur(10px);
-webkit-backdrop-filter: saturate(180%) blur(10px);
box-shadow: 0 12px 36px rgba(0,0,0,0.13);
}
.fr-railnav:hover .fr-railnav__label {
max-width: 330px;
opacity: 1;
}
.fr-railnav.is-peek .fr-railnav__link.is-active { background: rgba(107,76,107,0.11); }
.fr-railnav:hover .fr-railnav__link:hover { background: rgba(107,76,107,0.08); }
.fr-railnav:hover .fr-railnav__link.is-active {
background: rgba(107,76,107,0.11);
}
.fr-railnav__link.is-active .fr-railnav__label { font-weight: 700; color: #573d57; }
/* headings must clear the sticky site header when jumped to */
.fr-review-article h2.fr-toc-target { scroll-margin-top: 96px; }
/* -------- mobile: rail out, small launcher in -------- */
.fr-railnav-fab {
position: fixed;
left: 16px; bottom: 20px;
z-index: 999;
display: none;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 0 16px 0 13px;
border-radius: 9999px;
border: 1px solid var(--fr-slate-200);
background: #fff;
color: #1a1a1a;
font: inherit;
font-size: 14px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 6px 20px rgba(0,0,0,0.16);
opacity: 0;
transition: opacity .25s ease;
}
.fr-railnav-fab.is-visible { opacity: 1; }
@media (max-width: 1000px) {
.fr-railnav {
left: 12px; right: 12px;
top: auto; bottom: 76px;
transform: none;
display: none;
}
.fr-railnav.is-sheet { display: block; }
.fr-railnav__list {
max-height: 60vh;
padding: 12px;
background: #fff;
border: 1px solid var(--fr-slate-200);
box-shadow: 0 16px 40px rgba(0,0,0,0.18);
}
.fr-railnav__link {
/* the collapsed rail's fixed 14px height must not survive here:
it clips wrapped labels and leaves an 18px touch target */
height: auto;
min-height: 44px;
gap: 12px;
padding: 9px 10px;
align-items: center;
}
.fr-railnav__label {
max-width: none;
opacity: 1;
white-space: normal;
overflow: visible;
text-overflow: clip;
line-height: 1.35;
}
/* track line is meaningless in sheet mode */
.fr-railnav__list::before { content: none; }
.fr-railnav__link.is-active .fr-railnav__dot { transform: scale(1.6); }
.fr-railnav-fab.is-visible { display: inline-flex; } /* pill needs flex for icon+label */
}
/* rail labels: black at rest, plum on hover. Active stays plum so the
"you are here" marker survives the links going neutral. */
.fr-railnav__link:hover .fr-railnav__label { color: #6b4c6b; }
.fr-railnav__link.is-active .fr-railnav__label { color: #6b4c6b; font-weight: 700; }
/* launcher: labelled pill, not a second hamburger. Three dots echo the
desktop rail so the two read as the same control across breakpoints.
NOTE: display is deliberately NOT set here — the media queries own it.
Setting it globally showed the pill on desktop alongside the rail. */
.fr-railnav-fab__dots {
position: relative;
width: 4px; height: 16px;
flex: 0 0 auto;
}
.fr-railnav-fab__dots::before,
.fr-railnav-fab__dots::after,
.fr-railnav-fab__dots span { content: ''; }
.fr-railnav-fab__dots::before,
.fr-railnav-fab__dots::after {
position: absolute;
left: 0;
width: 4px; height: 4px;
border-radius: 50%;
background: #6b4c6b;
}
.fr-railnav-fab__dots::before { top: 0; }
.fr-railnav-fab__dots::after { bottom: 0; }
.fr-railnav-fab {
/* middle dot, larger — mirrors the active dot on the desktop rail */
background-image: radial-gradient(circle at 15px 50%, #6b4c6b 0 3px, transparent 3px);
}
.fr-railnav-fab[aria-expanded="true"] {
border-color: rgba(107,76,107,0.35);
background-color: #f5f1f5;
}
/* Any touch device gets the sheet, regardless of width — the rail's
expand-on-hover has no touch equivalent, so a 1024px tablet would
otherwise be left with dots it can't read. Width alone isn't the
right test for a hover interaction. */
@media (hover: none) {
.fr-railnav {
left: 12px; right: 12px;
top: auto; bottom: 76px;
transform: none;
display: none;
}
.fr-railnav.is-sheet { display: block; }
.fr-railnav__list {
max-height: 60vh;
padding: 12px;
background: #fff;
border: 1px solid var(--fr-slate-200);
box-shadow: 0 16px 40px rgba(0,0,0,0.18);
}
.fr-railnav__list::before { content: none; }
.fr-railnav__link {
height: auto;
min-height: 44px;
gap: 12px;
padding: 9px 10px;
align-items: center;
}
.fr-railnav__label {
max-width: none;
opacity: 1;
white-space: normal;
overflow: visible;
text-overflow: clip;
line-height: 1.35;
}
.fr-railnav__link.is-active .fr-railnav__dot { transform: scale(1.6); }
.fr-railnav-fab.is-visible { display: inline-flex; }
}
/* =========================================================
37. Mobile UX fixes (found by measuring at 375px)
========================================================= */
/* -- 37a. In-content jump grid: 25px tap targets in two 143px
columns. Below 44px is under the touch minimum, and two columns
at this width forces mid-word wrapping. -- */
@media (max-width: 600px) {
.fr-jump-grid {
grid-template-columns: 1fr !important;
gap: 0 !important;
}
.fr-jump-grid a,
.fr-jump-sections a {
display: flex;
align-items: center;
/* 44px left 19px of dead space around a 25px line and made the block
1,010px tall. These rows are full-width, so the target is large
even at 36px — comfortably over the 24px WCAG AA minimum. */
min-height: 36px;
padding: 4px 10px;
border-radius: 6px;
}
/* hairline separators: the space now reads as list structure
rather than as arbitrary gaps */
.fr-jump-grid a + a,
.fr-jump-sections a + a {
border-top: 1px solid var(--fr-slate-200);
}
.fr-jump-grid a:active,
.fr-jump-sections a:active { background: rgba(107,76,107,0.09); }
}
/* -- 37b. Wide tables scroll but gave no sign of it. The widest is
1021px inside a 345px column, so a reader sees a cut-off table and
no reason to swipe. Edge shadows appear only when there's more
table in that direction (background-attachment: local). -- */
.fr-review-article .wp-block-table,
.fr-review-article figure.wp-block-table {
background-image:
linear-gradient(to right, #fff 30%, rgba(255,255,255,0)),
linear-gradient(to left, #fff 30%, rgba(255,255,255,0)),
radial-gradient(farthest-side at 0 50%, rgba(107,76,107,0.20), rgba(107,76,107,0)),
radial-gradient(farthest-side at 100% 50%, rgba(107,76,107,0.20), rgba(107,76,107,0));
background-position: left center, right center, left center, right center;
background-repeat: no-repeat;
background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
background-attachment: local, local, scroll, scroll;
-webkit-overflow-scrolling: touch;
}
/* =========================================================
38. Reading progress + scroll-aware launcher.
A control that's always on screen during a 32,000px read is
the thing that reads as "annoying" — so the launcher tucks
away while scrolling down and returns on scroll up.
========================================================= */
.fr-readprogress {
position: fixed;
top: 0; left: 0; right: 0;
height: 2px;
z-index: 1000;
background: rgba(107,76,107,0.10);
opacity: 0;
transition: opacity .25s ease;
pointer-events: none;
}
.fr-readprogress.is-visible { opacity: 1; }
.fr-readprogress__bar {
display: block;
height: 100%;
width: 100%;
transform: scaleX(0);
transform-origin: 0 50%;
background: linear-gradient(90deg, #6b4c6b, #8a6b8a);
}
/* launcher tucks off-screen while reading forward */
.fr-railnav-fab {
transition: opacity .25s ease, transform .25s ease, background-color .15s ease;
}
.fr-railnav-fab.is-tucked {
transform: translateY(calc(100% + 28px));
opacity: 0;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.fr-railnav-fab { transition: opacity .2s ease; }
.fr-railnav-fab.is-tucked { transform: none; }
.fr-readprogress__bar { transition: none; }
}
/* 37c. The jump grid's markup separates links with
, which become
their own 18px grid rows — 29px of dead space between every link
despite a 2px row-gap. Same bug as .related-guides-grid.
Direct-child selector only:
INSIDE a link is meaningful. */
.fr-jump-grid > br,
.fr-jump-sections > br { display: none; }
/* =========================================================
39. Table columns on narrow screens.
Auto layout squeezed prose columns to ~115px, producing rows
614px tall. Wrappers already scroll, so give text room and
let the table exceed the viewport instead of distorting.
========================================================= */
@media (max-width: 900px) {
.fr-review-article table th,
.fr-review-article table td {
min-width: 86px; /* nothing gets crushed to a sliver */
}
/* columns .fr-col-prose is applied to hold sentences, not values */
.fr-review-article table th.fr-col-prose,
.fr-review-article table td.fr-col-prose {
min-width: 250px;
}
}
/* =========================================================
40. Hero meta badges on one line.
.fr-page-hero__meta is a block-level flex row, so a sibling
badge after it ("Tested & Ranked", "Side-by-Side Expert
Analysis") was pushed onto its own line. Making the meta row
inline-level lets the trailing badge join it and wrap
naturally with the others.
========================================================= */
/* display:contents dissolves the meta wrapper so all three badges sit in
one inline flow. Keeping it as a flex box meant the trailing badge was
aligned against the flex box's baseline, never quite matching. */
.fr-page-hero__content .fr-page-hero__meta:has(+ .fr-page-hero__badge) {
display: contents;
}
.fr-page-hero__content .fr-page-hero__meta:has(+ .fr-page-hero__badge) > .fr-page-hero__badge {
margin-right: 8px; /* flex gap is lost with display:contents */
}
.fr-page-hero__content .fr-page-hero__meta + .fr-page-hero__badge {
vertical-align: baseline;
}
/* =========================================================
41. Compare pages: styles for markup that never had any.
6 of 44 compare pages use .fr-compare-hero /
.fr-compare-brand-strip instead of .fr-compare-scores.
The score block itself is now handled by aliasing
.fr-compare-hero into compare-pages.css (single source of
truth) — do NOT re-declare display here, it overrode the
grid and killed the divider/delta chip. Only the brand
strip, which has no styles anywhere, is defined below.
========================================================= */
/* Brand strip hidden at Katy's request — the "Evlo ✓ HANDS-ON REVIEW vs …"
row duplicated the H1 and the score cards directly beneath it.
Hidden, NOT deleted: the markup stays in the page content, so removing
this rule brings it straight back. */
.fr-compare-brand-strip { display: none; }
/* -- 41b. .fr-compare-hero pages differ from .fr-compare-scores pages in
two ways the shared component doesn't expect:
(a) their __score already contains a literal " / 10", so the CSS
::after suffix produced "8.6 / 10 / 10";
(b) they carry a __price div, which had no order and so floated
above the name. -- */
.fr-compare-hero .fr-compare-score-card__score::after { content: none; }
.fr-compare-hero .fr-compare-score-card__score {
font-size: 14px;
font-weight: 500;
color: var(--fr-slate-400);
gap: 5px;
}
.fr-compare-hero .fr-compare-score-card__score .fr-score {
font-size: 44px;
font-weight: 800;
color: #1a1a1a;
line-height: 0.92;
}
.fr-compare-hero .fr-compare-score-card--winner .fr-compare-score-card__score .fr-score {
font-size: 52px;
}
/* price below the score, quiet */
.fr-compare-hero .fr-compare-score-card__price {
order: 6;
font-size: 12.5px;
line-height: 1.5;
color: var(--fr-slate-500);
margin-top: 2px;
}
/* =========================================================
42. Hub / "Best X" pages — retire the amber-brown system.
style.css predates the redesign and hardcodes a yellow/amber
palette (#FEF9C3, #FEF3C7, #92400E, #854D0E) for tags and
callout headings, plus warm heading colours in several
callout variants. Retokened here so hub pages match the
plum/neutral theme. Overrides only — style.css untouched.
========================================================= */
/* -- tags: keep the semantic split, drop the amber -- */
.fr-tag--equip {
background: var(--fr-slate-100, #f2f2f2) !important;
color: var(--fr-slate-700, #444) !important;
}
.fr-tag--impact-mod {
background: rgba(var(--fr-accent-rgb, 107,76,107), 0.10) !important;
color: var(--fr-accent-700, #573d57) !important;
}
.fr-tag--impact-low {
background: rgba(92, 145, 116, 0.12) !important;
color: #3f6b53 !important;
}
.fr-tag--impact-high {
background: rgba(176, 125, 149, 0.14) !important;
color: #8a4f68 !important;
}
.fr-tag--cost {
background: rgba(120, 148, 168, 0.14) !important;
color: #4d657a !important;
}
/* -- callout headings: amber -> plum -- */
.fr-callout--warning h4,
.fr-hub-content .amber-box h4,
.fr-hub-article__body .callout-title,
.fr-hub-article__body .warning-box h4,
.fr-hub-article__body .exercise-type h3,
.single-blog .post-inner .callout-title,
.single-blog .post-inner .warning-box h4 {
color: var(--fr-accent-700, #573d57) !important;
}
/* -- score tiles: numbers black like every other score on the
site; the tier is already carried by the label and ordering.
--fr-warning is a brown-grey, which is what read as "brownish". -- */
.fr-score-tile--high .fr-score-tile__num,
.fr-score-tile--mid .fr-score-tile__num,
.fr-score-tile--low .fr-score-tile__num {
color: #1a1a1a !important;
}
/* -- gold accents left over from the earlier reference palette -- */
.fr-review-hero__badge--tested {
background: rgba(var(--fr-accent-rgb, 107,76,107), 0.10) !important;
border-color: rgba(var(--fr-accent-rgb, 107,76,107), 0.30) !important;
color: var(--fr-accent-700, #573d57) !important;
}
.fr-equipment-item:hover,
.fr-equipment-card:hover {
border-color: rgba(var(--fr-accent-rgb, 107,76,107), 0.45) !important;
}
/* success callout was still on the gold --fr-pos while every other
success cue on the site uses the sage --fr-success */
.fr-callout--success {
background: linear-gradient(135deg, rgba(92,145,116,0.12) 0%, rgba(92,145,116,0.06) 100%) !important;
border-left-color: var(--fr-success, #5c9174) !important;
}
.fr-callout--success h4 { color: #3f6b53 !important; }
/* =========================================================
43. Hub / "Best X" pages — bring them level with reviews.
Same long-form shape (12+ sections) but a different wrapper
class, so they were missing the section rail, the reading
progress bar and the table/heading treatments.
========================================================= */
.fr-hub-article__body h2.fr-toc-target { scroll-margin-top: 96px; }
/* facts block: the review pages present this as a card, hubs had it
as loose text directly on the hero band */
.fr-page-hero__facts {
background: #fff;
border: 1px solid var(--fr-slate-200);
border-radius: 12px;
padding: 20px 24px !important;
gap: 16px 32px !important;
margin-top: 20px;
box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.fr-hero-fact {
font-size: 14px;
line-height: 1.55;
color: var(--fr-slate-600);
}
.fr-hero-fact strong {
display: block;
margin-bottom: 2px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--fr-slate-400);
}
/* hub tables get the same prose-column and scroll affordance as reviews */
.fr-hub-article__body .wp-block-table,
.fr-hub-article__body figure.wp-block-table {
background-image:
linear-gradient(to right, #fff 30%, rgba(255,255,255,0)),
linear-gradient(to left, #fff 30%, rgba(255,255,255,0)),
radial-gradient(farthest-side at 0 50%, rgba(107,76,107,0.20), rgba(107,76,107,0)),
radial-gradient(farthest-side at 100% 50%, rgba(107,76,107,0.20), rgba(107,76,107,0));
background-position: left center, right center, left center, right center;
background-repeat: no-repeat;
background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
background-attachment: local, local, scroll, scroll;
-webkit-overflow-scrolling: touch;
}
@media (max-width: 900px) {
.fr-hub-article__body table th,
.fr-hub-article__body table td { min-width: 86px; }
.fr-hub-article__body table th.fr-col-prose,
.fr-hub-article__body table td.fr-col-prose { min-width: 250px; }
.fr-page-hero__facts { grid-template-columns: 1fr !important; padding: 16px 18px !important; }
}
/* =========================================================
44. Hub hero + score tiers (revisions).
- facts block: no card, wider, less vertical space
- score tiers: bring back the good/bad signal, in-theme
========================================================= */
/* facts block reads as part of the hero band again, and uses the
full container width instead of the 800px text column */
.fr-page-hero .fr-page-hero__content { max-width: none; }
.fr-page-hero__facts {
background: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin-top: 14px;
gap: 10px 56px !important;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
}
.fr-hero-fact { font-size: 14px; line-height: 1.5; }
.fr-hero-fact strong {
display: inline; /* label inline = fewer lines, less height */
margin: 0 6px 0 0;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--fr-slate-400);
}
/* -- score tiers: sage / neutral / mauve.
The theme's own semantic trio, so strong and weak still read at a
glance without the traffic-light green-amber-red. Mid is neutral
grey deliberately: an average score shouldn't shout, and the muted
warning tone is the brown that was being retired. -- */
.fr-score-tile--high .fr-score-tile__num,
.fr-rating-detail--high .fr-rating-detail__score {
color: #4e7d63 !important;
}
.fr-score-tile--mid .fr-score-tile__num,
.fr-rating-detail--mid .fr-rating-detail__score {
color: var(--fr-slate-600, #555) !important;
}
.fr-score-tile--low .fr-score-tile__num,
.fr-rating-detail--low .fr-rating-detail__score {
color: #a06a83 !important;
}
/* -- Quick Answer: cream + left bar -> plum tint, fully bordered.
Dropping the left rule means it needs a border on all sides,
otherwise it stops reading as a contained block. -- */
/* matches .fr-overall-score-block on reviews: plain white card,
neutral hairline, 8px radius, no tint and no left rule */
.quick-answer,
.fr-hub-content .quick-answer,
.fr-hub-article__body .quick-answer,
.single-blog .post-inner .quick-answer {
background: #fff !important;
border: 1px solid var(--fr-slate-200) !important;
border-left: 1px solid var(--fr-slate-200) !important;
border-radius: 8px !important;
box-shadow: none !important;
padding: 24px 28px !important;
}
.quick-answer > :first-child { margin-top: 0 !important; }
.quick-answer > :last-child { margin-bottom: 0 !important; }
/* Programme-card score badges sit on a near-black chip — the number must
stay white regardless of tier. Tier colour belongs on the criterion
tiles (light background), never here. */
.fr-score-badge,
.fr-score-badge--high,
.fr-score-badge--mid,
.fr-score-badge--low,
.fr-score-badge--lg,
.fr-score-badge--sm {
color: #fff !important;
}
/* ============================================================
47. Find Your Program — "How it works" band recolour
Snippet #7 renders this band as a full-bleed DARK photo (78% black
overlay) with gold numbers. Keep the PHOTO background (soft dark
bottom-weighted shade), but tint the numbers + text baby blue
(#e8f4ff, the homepage Perimenopause tile). All selectors are one level
more specific than the snippet's single-class rules so they win
regardless of source order; the image path is root-relative so it
resolves on both local and production.
============================================================ */
.fr-hiw.fr-hiw {
background:
linear-gradient(180deg,
rgba(20,14,20,.16) 0%,
rgba(20,14,20,.28) 50%,
rgba(20,14,20,.52) 100%),
url("/wp-content/uploads/2026/03/guide-hiit-perimenopause-v2-2.jpg") center/cover no-repeat;
/* keep the photo; soft bottom-weighted shade so the tinted text stays legible */
}
/* eyebrow label soft purple; flanking rules faint purple */
.fr-hiw .fr-hiw__label {
color: #c6a6e8;
}
.fr-hiw .fr-hiw__label::before,
.fr-hiw .fr-hiw__label::after {
background: rgba(198,166,232,.45);
}
.fr-hiw .fr-hiw__step {
border-right-color: rgba(255,255,255,.14);
}
.fr-hiw .fr-hiw__step:hover {
background: rgba(255,255,255,.06);
}
/* giant numbers: soft purple, shadow to pop over the photo */
.fr-hiw .fr-hiw__num {
color: #c6a6e8;
text-shadow: 0 2px 14px rgba(0,0,0,.5);
}
.fr-hiw .fr-hiw__step:hover .fr-hiw__num {
color: #fff;
}
/* copy: soft purple with a shadow so it holds over the image */
.fr-hiw .fr-hiw__title {
color: #d0b4ee;
text-shadow: 0 1px 8px rgba(0,0,0,.55);
}
.fr-hiw .fr-hiw__text {
color: rgba(208,180,238,.9);
text-shadow: 0 1px 8px rgba(0,0,0,.55);
}
@media (max-width: 600px) {
/* mobile stacks with a bottom hairline instead of a right one */
.fr-hiw .fr-hiw__step {
border-bottom-color: rgba(255,255,255,.14);
}
}
/* Trust-strip pills: Snippet #7 makes them fully-rounded (100px). Square them
to 4px to match the homepage tag convention (.fr-tag). Higher specificity
than the snippet's single-class rule so it wins without !important. */
.fr-trust-strip .fr-trust-item {
border-radius: 4px;
}
/* Unify the two quiz-page heroes: bring the Find Your Program hero title down
to the same restrained size used on Find Your Stage (~40px max). Scoped to
.fr-home-hero--quiz so the homepage hero title is unaffected. */
.fr-home-hero--quiz .fr-home-hero__title {
font-size: clamp(2rem, 4vw, 2.5rem);
}
/* =========================================================
Hero meta badges — square + on-brand plum tint (site-wide).
The "By Katy Cole / Published / Updated / Expert Comparison"
meta rendered as rounded (100px) beige/white pills that were
barely distinct from the warm hero background. Square them to
4px to match the Find Your Stage / Find Your Program tag
convention, and tint them with the homepage plum accent
(--fr-accent-*, the current theme accent after "retire the
brown") so they read clearly and belong to one family across
Best-X hubs, compare, review, blog, archive and page heroes.
NB: .fr-home-hero__badge (the transparent homepage / Find Your
Program eyebrow) is intentionally excluded — it is already the
quiet uppercase label we want. The review "Hands-On Review"
trust badge (--tested) keeps its own tint via its later rule;
it only inherits the squared corners here.
========================================================= */
.fr-page-hero__badge,
.fr-review-hero__badge {
border-radius: 4px;
background: var(--fr-accent-50); /* #f5f0f5 pale plum */
border: 1px solid rgba(var(--fr-accent-rgb), .22); /* plum hairline */
color: var(--fr-accent-700); /* #573d57 deep plum */
letter-spacing: .05em;
}
a.fr-page-hero__badge:hover,
a.fr-review-hero__badge:hover {
color: var(--fr-accent-900); /* #332233 */
background: var(--fr-accent-100); /* #ece2ec */
}
/* =========================================================
Best-X (hub) program cards — mobile layout.
On phones the horizontal desktop card (rank | thumb | body
| score) collapsed badly: the rank + thumbnail floated in a
half-empty left column while the title, verdict and tags
were crushed into a ~55%-width column (verdict wrapped to
7 lines, tags stacked one-per-line). Rebuild it as a clean
stacked card — thumbnail as a full-width banner with the
rank as a corner chip, body full width, score + CTA as a
footer row. Desktop (>767px) is unchanged.
========================================================= */
@media (max-width: 767px) {
.fr-hub-card {
position: relative;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 0;
overflow: hidden;
border-left-width: 0; /* the 3px accent rail reads wrong on a stacked card */
}
.fr-hub-card:hover {
transform: none; /* the desktop translateX nudge is out of place here */
}
/* thumbnail → full-width banner at the top of the card */
.fr-hub-card__thumb {
flex: none;
width: 100%;
height: 168px;
border-radius: 0;
}
/* rank: a small inline chip by default; when a banner exists it
overlays the top-left corner so it never wastes a whole row */
.fr-hub-card__rank {
flex: none;
align-self: flex-start;
margin: 14px 0 0 16px;
min-width: 26px;
height: 26px;
padding: 0 8px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--fr-slate-100);
color: var(--fr-slate-500);
border-radius: 6px;
font-size: .95rem;
line-height: 1;
}
.fr-hub-card:has(.fr-hub-card__thumb) .fr-hub-card__rank {
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
margin: 0;
width: 34px;
height: 34px;
padding: 0;
background: rgba(26, 26, 26, .82);
color: #fff;
border-radius: 8px;
font-size: 1rem;
}
/* body takes the full width — verdict and tags get room to breathe */
.fr-hub-card__body {
width: 100%;
padding: 16px 18px 12px;
}
/* score + "Read Review" become a full-width footer row */
.fr-hub-card__aside {
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 12px;
width: 100%;
padding: 0 18px 18px;
}
.fr-hub-card__aside .fr-btn {
margin-left: auto; /* push the CTA to the right, score stays left */
}
}
/* =========================================================
MailPoet subscription / confirmation page
(/subscriptions/, post 11, body.single-mailpoet_page) —
drop the ReHub sidebar.
After a visitor confirms their email, the ReHub sidebar was
still showing a "Get our weekly newsletter" CTA (the
.widget_text / .fr-guide-sidebar-cta block) — redundant,
because they just subscribed. Hide the whole sidebar and let
the confirmation message use the full content width. Scoped
to the MailPoet page only, so every other page keeps its
sidebar. Complements Snippet #104, which hides the
review-specific chrome on the same pages.
========================================================= */
body.single-mailpoet_page .sidebar {
display: none !important;
}
body.single-mailpoet_page .main-side {
width: 100% !important;
margin: 0 !important;
float: none !important;
}