/* ════════════════════════════════════════════════════════════════════════════
JUNGLE HUGGER · 07-overrides.css — UNLAYERED override tier (Path A de-layer)
────────────────────────────────────────────────────────────────────────────
Single source for the not-yet-folded-into-01-06 sections (was the generated
Customizer "Additional CSS" projection's INTERIM half). Canon's @restate
regions are NOT duplicated here any more — de-layered 01-06 ships them once.
Loaded AFTER 06-utilities, unlayered, so the shim body (17px/1.8) and the A*
traps win over canon's bare-element defaults. ORDER IS LOAD-BEARING.
Optional future tidy: distribute these sections into their owning 01-06 files
(see PATH-A-RECONCILIATION-MAP §2 merge map). Behaviour is identical either way.
════════════════════════════════════════════════════════════════════════════ */
/* ╔═══════════════════════════════════════════════════════════╗
║ A* CASCADE TRAPS — GP link/forest + button safety + GB text-align
╚═══════════════════════════════════════════════════════════╝ */
/* ═══════════ A* TRAP · GP link colour partner (live 39–44) — do not touch ═══════════ */
/* GP link colour — scoped with :where(:not(.jh-btn)) so it does NOT override
canon's button text colour, AND does NOT inflate specificity beyond the
original `a {}` rule. */
a:where(:not(.jh-btn)) { color: var(--gp-forest); text-decoration: none; }
a:where(:not(.jh-btn)):hover { color: var(--copper-deep); } /* A3: was --gp-copper #B5714A (3.65:1, AA-fail) → copper-deep (6.08:1), matches nav hover */
/* ═══════════ A* TRAP · button colour safety net (live 45–71) — do not touch ═══════════ */
/* Button colour safety net — belt-and-braces protection.
Retires in Phase 6 alongside the global `a:not(.jh-btn)` rule. */
a.jh-btn.jh-btn-primary,
a.gb-text.jh-btn-primary {
background: var(--forest);
color: var(--text-on-dark) !important;
border: 1px solid var(--forest);
}
a.jh-btn.jh-btn-primary:hover,
a.gb-text.jh-btn-primary:hover {
background: var(--copper);
border-color: var(--copper);
color: var(--text-on-dark) !important;
}
a.jh-btn.jh-btn-secondary,
a.gb-text.jh-btn-secondary {
background: transparent;
color: var(--forest) !important;
border: 1px solid var(--forest);
}
a.jh-btn.jh-btn-secondary:hover,
a.gb-text.jh-btn-secondary:hover {
background: var(--forest);
color: var(--text-on-dark) !important;
border-color: var(--forest);
}
/* ═══════════ A* TRAP · GB text-align traps (live 1351–1362) — do not touch ═══════════ */
/* ============================================================
CASCADE TRAPS (unlayered safety nets vs GB / plugin overrides)
============================================================ */
/* Cascade trap #5 — GB gb-text + per-instance classes override canon's
text-align AND margin on hero text slots. Force center + auto margins. */
.jh-hero .jh-hero-lead,
.jh-hero .jh-hero-deck,
.jh-hero .jh-hero-disclosure {
text-align: center !important;
margin-inline: auto !important;
}
/* ╔═══════════════════════════════════════════════════════════╗
║ --gp-* TOKENS + base body 17px/1.8 + h1-h6 (wins over canon 02-base by load order)
╚═══════════════════════════════════════════════════════════╝ */
/* ═══════════ INTERIM SHIM · --gp-* defs (live 15–24) — retires Phase 6 (§1.3 map) ═══════════ */
:root {
--gp-forest: #1E3A2F;
--gp-copper: #B5714A;
--gp-gold: #C8915A;
--gp-offwhite: #FAF8F3; /* 2026-06-23: aligned to --bg (shared off-white) — DRIVES the live body bg */
--gp-soft: #F0ECE3; /* aligned to --bg-soft (0 consumers — dead; remove at Phase-6 shim retirement) */
--gp-linen: #E9E3D6; /* aligned to --bg-linen */
--gp-text: #201D18; /* aligned to --text — DRIVES the live body text */
--gp-radius: 6px;
/* ═══════════ INTERIM SHIM · base body/h1–h6 (live 25–38) — settings migration C8, retires Phase 6 ═══════════ */
}
body {
color: var(--gp-text);
background-color: var(--gp-offwhite);
font-size: 17px;
line-height: 1.8;
}
h1, h2, h3, h4, h5, h6 { color: var(--gp-forest); }
h1 { font-size: clamp(2.2rem, 5vw, 3rem); line-height: 1.05; }
h2 { font-size: var(--fs-2xl); line-height: var(--lh-snug); } /* 2026-06-20: bare h2 aligned to canon (was 27→36px shim) so raw gb-headline headings render the canon 28→44px — one global h2 */
h3 { font-size: 20px; font-weight: var(--fw-regular); line-height: 1.4; } /* A6: was untokenised 600 → canon .jh-h3 weight (400, on-voice). If too light on device, set 600 via a new --fw-semibold. */
/* ╔═══════════════════════════════════════════════════════════╗
║ PLUGIN/BLOCK SKINS — GB-Pro, UB-TOC kill, RM-FAQ, #wpforms-277, breadcrumb, author-block
╚═══════════════════════════════════════════════════════════╝ */
/* ═══════════ RM-FAQ skin (live 251–262) — retires on snippet 5984's trigger ═══════════ */
/* =========================
Rank Math FAQ
========================= */
#rank-math-faq .rank-math-list-item { margin: 1em 0; border-bottom: 1px solid var(--gp-linen); }
.rank-math-question { cursor: pointer; position: relative; display: block; margin: 15px 1em 0; font-weight: 500; padding-right: 1em; color: var(--gp-forest); }
.rank-math-question:after { position: absolute; right: 5px; top: 0; content: "\2715"; transform: rotate(-45deg); transition: transform 150ms ease-in-out; }
.rank-math-question.collapse:after { transform: rotate(0deg); }
.rank-math-question:hover { color: var(--gp-copper); }
.rank-math-answer { display: block; opacity: 0; max-height: 0; overflow: hidden; transition: max-height .4s ease, opacity .3s ease; padding-left: 26px; padding-top: 10px; margin-bottom: 5px; }
.rank-math-question.active + .rank-math-answer { max-height: 2000px; opacity: 1; }
/* ═══════════ TOC / inline icon wrappers (live 263–270) + tocultimate kill (live 2623) ═══════════ */
/* =========================
TOC / inline icon wrappers
========================= */
.tocultimate,
.tocblock,
.wpd-inline-icon-wrapper { border: none; background: none; margin-bottom: 30px; font-size: 16px; line-height: 1.5; }
.wp-block-ub-table-of-contents-block,
.tocultimate { display: none !important; }
/* ═══════════ Review images radius (live 271–277) — re-tokenise at Phase 6 ═══════════ */
/* =========================
Review images / general radius
========================= */
.rank-math-review-image img { border-radius: var(--gp-radius); }
/* ═══════════ Author block (live 278–285) ═══════════ */
/* =========================
Author block (article scope; recipe overrides moved to snippet 9659)
========================= */
.author-block { border-radius: var(--gp-radius); }
.author-block .author-img { width: 156px; height: auto; border-radius: var(--gp-radius) !important; overflow: hidden; }
.author-block .author-img img { width: 100%; height: auto; display: block; object-fit: cover; border-radius: var(--gp-radius) !important; }
.author-block .author-img-wrap { width: 156px; }
/* ═══════════ Breadcrumb recipe-course suppression (live 1087–1089; trap-ledgered separator kill) ═══════════ */
/* Recipe-course taxonomy suppression — global */
.rank-math-breadcrumb a[href*="/recipe-course/"],
.rank-math-breadcrumb a[href*="/recipe-course/"] + .separator { display: none !important; }
/* ═══════════ Contact form #wpforms-277 (live 163–202) — Phase 6 → 07-plugin-skins ═══════════ */
#wpforms-277 { margin: 0; }
#wpforms-277 .wpforms-form { padding: 0; border: none; border-radius: 0; background: transparent; box-shadow: none; }
#wpforms-277 .wpforms-field-container { display: flex; flex-direction: column; }
#wpforms-277 .wpforms-field { padding: 0; margin-bottom: 22px; }
#wpforms-277 .wpforms-field-label { font-family: 'Outfit', sans-serif; font-size: 0.70rem; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 8px; }
#wpforms-277 .wpforms-required-label { color: var(--copper); margin-left: 2px; }
#wpforms-277 input[type="text"],
#wpforms-277 input[type="email"],
#wpforms-277 textarea { width: 100%; font-family: 'Outfit', sans-serif; font-size: 0.925rem; font-weight: 300; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 0; padding: 13px 15px; transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; appearance: none; -webkit-appearance: none; box-sizing: border-box; box-shadow: none; }
#wpforms-277 input[type="text"]:focus,
#wpforms-277 input[type="email"]:focus,
#wpforms-277 textarea:focus { outline: none; border-color: var(--copper); background: #FFFDF9; box-shadow: 0 0 0 3px rgba(181, 113, 74, 0.10); }
#wpforms-277 textarea { min-height: 148px; resize: vertical; line-height: 1.6; }
#wpforms-277 .wpforms-field-row { display: flex; gap: 12px; }
#wpforms-277 .wpforms-field-row-block { flex: 1; min-width: 0; }
#wpforms-277 .wpforms-field-sublabel { font-family: 'Outfit', sans-serif; font-size: 0.68rem; font-weight: 300; color: var(--muted); letter-spacing: 0.04em; margin-top: 5px; display: block; }
#wpforms-277 .h-captcha,
#wpforms-277 .frc-captcha { margin-bottom: 22px; }
#wpforms-submit-277.contactbutton { font-family: 'Outfit', sans-serif; font-size: 0.82rem; font-weight: 400; letter-spacing: 0.10em; text-transform: uppercase; color: var(--bg); background: var(--forest); border: 1px solid var(--forest); border-radius: 0; padding: 15px 36px; cursor: pointer; transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease; }
@media (hover: hover) {
#wpforms-submit-277.contactbutton:hover,
#wpforms-submit-277.contactbutton:focus { background: var(--copper); border-color: var(--copper); color: var(--bg); transform: none; }
}
#wpforms-277 .wpforms-error { font-family: 'Outfit', sans-serif; font-size: 0.78rem; color: var(--copper); margin-top: 5px; }
#wpforms-277 input.wpforms-error,
#wpforms-277 textarea.wpforms-error { border-color: var(--copper); }
#wpforms-277 .wpforms-confirmation-container-full { background: var(--bg-linen); border: 1px solid var(--copper); color: var(--text); padding: 24px 28px; font-family: 'Outfit', sans-serif; font-weight: 300; border-radius: 0; }
@media (max-width: 1024px) {
.jh-contact-body { padding: 64px 40px 88px; }
.jh-contact-body-inner { gap: 52px; }
.jh-contact-form-card { padding: 40px 36px; }
}
@media (max-width: 768px) {
.jh-contact-body { padding: 48px 24px 72px; }
.jh-contact-body-inner { grid-template-columns: 1fr; gap: 48px; }
.jh-contact-form-card { padding: 32px 24px; }
#wpforms-277 .wpforms-field-row { flex-direction: column; gap: 22px; }
}
/* ═══════════ GB Pro Accordion / Tabs / Carousel / Site Header skins (live 2036–2209) ═══════════ */
/* ============================================================
GenerateBlocks Pro Accordion — Nordic skin
Styles the block's own classes; descendant selectors (0,2,0)
beat the per-item default CSS (0,1,0), so the black borders /
padding / text the editor applied are overridden, not fought.
The Pro block keeps its own open/close behaviour + icon swap.
============================================================ */
.gb-accordion { display: flex; flex-direction: column; }
.gb-accordion .gb-accordion__item {
margin: 0;
padding: 0;
border: 0;
border-block-end: 1px solid var(--border);
}
.gb-accordion .gb-accordion__item:first-child {
border-block-start: 1px solid var(--border);
}
.gb-accordion .gb-accordion__toggle {
padding-block: var(--space-5);
padding-inline: 0;
min-block-size: 64px;
color: var(--forest);
font-family: var(--ff-serif);
font-weight: var(--fw-regular);
font-size: var(--fs-md);
line-height: var(--lh-snug);
cursor: pointer;
}
@media (min-width: 600px) {
.gb-accordion .gb-accordion__toggle { font-size: var(--fs-lg); }
}
@media (hover: hover) {
.gb-accordion .gb-accordion__toggle:hover { color: var(--copper-deep); }
}
.gb-accordion .gb-accordion__toggle .gb-text { font: inherit; color: inherit; }
/* Chevron — copper, follows the toggle (SVGs use currentColor) */
.gb-accordion .gb-accordion__toggle-icon { color: var(--copper-deep); flex-shrink: 0; }
/* Answer body */
.gb-accordion .gb-accordion__content { padding-block-end: var(--space-5); }
.gb-accordion .gb-accordion__content p {
font-size: var(--fs-base);
line-height: var(--lh-loose);
color: var(--muted);
margin: 0;
}
/* Accordion chevron — constrain the SVG (skin now owns sizing, so block markup needs no inline css) */
.gb-accordion .gb-accordion__toggle-icon svg {
inline-size: 1em;
block-size: 1em;
flex-shrink: 0;
}
/* ═══ GB Pro Tabs — Nordic skin (horizontal tab bar) ═══ */
/* Overrides the editor's per-id menu-item defaults (white bg / black text /
1em box). Active state = .gb-block-is-current. Three-class chain needed to
beat the editor's (0,3,0) :is(.gb-block-is-current,…) current rule. */
.gb-tabs .gb-tabs__menu {
display: flex;
gap: var(--space-5);
border-block-end: 1px solid var(--border);
margin-block-end: var(--space-6);
overflow-x: auto;
scrollbar-width: none;
}
.gb-tabs .gb-tabs__menu::-webkit-scrollbar { display: none; }
.gb-tabs .gb-tabs__menu .gb-tabs__menu-item {
padding: var(--space-3) 0;
background: transparent;
border: 0;
border-block-end: 2px solid transparent;
color: var(--muted);
font-family: var(--ff-sans);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
white-space: nowrap;
cursor: pointer;
transition: color var(--t-base), border-color var(--t-base);
}
.gb-tabs .gb-tabs__menu .gb-tabs__menu-item .gb-text { font: inherit; color: inherit; }
.gb-tabs .gb-tabs__menu .gb-tabs__menu-item:hover,
.gb-tabs .gb-tabs__menu .gb-tabs__menu-item:focus { background: transparent; }
@media (hover: hover) {
.gb-tabs .gb-tabs__menu .gb-tabs__menu-item:hover { color: var(--forest); }
}
.gb-tabs .gb-tabs__menu .gb-tabs__menu-item.gb-block-is-current {
color: var(--forest);
background: transparent;
border-block-end-color: var(--copper);
}
.gb-tabs .gb-tabs__menu .gb-tabs__menu-item:focus-visible {
outline: var(--focus-ring);
outline-offset: 2px;
}
.gb-tabs .gb-tabs__items { background: transparent; }
.gb-tabs .gb-tabs__item { padding-inline: 0; padding-block: var(--space-3); }
.gb-tabs .gb-tabs__item p {
font-size: var(--fs-base);
line-height: var(--lh-loose);
color: var(--muted);
margin: 0;
}
.gb-tabs .gb-tabs__item p + p { margin-block-start: var(--space-4); }
/* ═══ GB Pro Carousel — Nordic skin (controls + pagination) ═══ */
/* Recolours the editor's per-id control defaults (48px white circle, black
glyph, #e0e0e0 border, #fafafa hover) and the plugin's default dots.
Covers Basic, Query, Testimonial, Gallery and Hero variants — all share
these base classes. Slide layout and per-view counts left untouched. */
/* Controls */
.gb-carousel .gb-carousel-control {
inline-size: 44px;
block-size: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--bg);
color: var(--copper);
border: 1px solid var(--border);
border-radius: var(--radius-pill);
cursor: pointer;
transition: color var(--t-base), background var(--t-base), border-color var(--t-base);
}
.gb-carousel .gb-carousel-control:focus { background: var(--bg); border-color: var(--border); }
.gb-carousel .gb-carousel-control:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
@media (hover: hover) {
.gb-carousel .gb-carousel-control:hover {
color: var(--bg);
background: var(--copper);
border-color: var(--copper);
}
}
.gb-carousel .gb-carousel-control:disabled {
color: var(--muted);
border-color: var(--border);
background: var(--bg);
cursor: not-allowed;
opacity: 0.5;
}
/* Pagination — bullet dots */
.gb-carousel .gb-carousel-dot {
inline-size: 8px;
block-size: 8px;
border: 0;
background: var(--border);
border-radius: var(--radius-pill);
cursor: pointer;
transition: background var(--t-base);
}
.gb-carousel .gb-carousel-dot.is-active,
.gb-carousel .gb-carousel-dot.is-active-main { background: var(--copper); }
@media (hover: hover) {
.gb-carousel .gb-carousel-dot:hover,
.gb-carousel .gb-carousel-dot.is-hover { background: var(--copper-lt); }
}
/* Pagination — progress bar + fraction (Gallery / Hero variants) */
.gb-carousel .gb-carousel-pagination-progressbar-fill { background: var(--copper); }
.gb-carousel .gb-carousel-current,
.gb-carousel .gb-carousel-total { color: var(--forest); font-family: var(--ff-sans); }
/* ═══ GB Pro Site Header — Nordic skin (wrapper + sticky state) ═══ */
.gb-site-header { background: var(--bg); }
.gb-site-header.gb-is-sticky {
background: var(--bg);
box-shadow: var(--shadow-sm);
z-index: 100;
}
/* ╔═══════════════════════════════════════════════════════════╗
║ NAV FAMILY — RUN-15 hand-edit incl. L262 background:var(--bg)!important (do NOT revert to color-mix --paper)
╚═══════════════════════════════════════════════════════════╝ */
/* ═══════════ Early nav/submenu/mobile-header polish (live 72–111) — Phase 6 ═══════════ */
.main-navigation ul ul { border: none; box-shadow: none; }
@media (min-width: 1000px) {
.main-navigation ul ul.sub-menu {
border-radius: var(--gp-radius);
border: 1px solid var(--border);
background-color: var(--gp-offwhite);
box-shadow: 0 4px 18px rgba(30, 58, 47, 0.06);
}
}
.navigation-branding img,
.site-logo.mobile-header-logo img { padding: 2px 0; }
@media (max-width: 999px) {
#mobile-header.main-navigation { border-bottom: none; }
#mobile-header .main-nav {
border-bottom: none; /* RUN 15: removed — was showing as line below closed mobile nav */
max-height: calc(100vh - 80px);
overflow-y: auto;
}
#mobile-header .sub-menu a { padding-top: 6px; padding-bottom: 6px; padding-left: 28px; opacity: 0.78; }
#mobile-header .main-nav > ul > li { border-bottom: none; }
#mobile-header .main-nav ul.sub-menu,
#mobile-header .main-nav ul.sub-menu li { border: 0; box-shadow: none; }
#mobile-header .dropdown-menu-toggle { margin-left: 8px; margin-top: 2px; display: inline-flex; align-items: center; opacity: 0.85; }
.main-navigation .menu-toggle,
.main-navigation .dropdown-menu-toggle,
.main-navigation .menu-item-has-children > a { -webkit-tap-highlight-color: transparent; }
.main-navigation .menu-toggle:active,
.main-navigation .menu-toggle:focus,
.main-navigation .dropdown-menu-toggle:active,
.main-navigation .dropdown-menu-toggle:focus,
.main-navigation .menu-item-has-children > a:active,
.main-navigation .menu-item-has-children > a:focus { outline: none; box-shadow: none; background: transparent; }
#mobile-header .main-nav a,
#mobile-header .main-nav a:active,
#mobile-header .main-nav a:focus { background-color: transparent !important; box-shadow: none !important; }
}
/* ═══════════ Menu animations (live 292–307) — Phase 6 ═══════════ */
/* =========================
Menu animations
========================= */
.main-navigation .menu-toggle .gp-icon { transition: transform 0.7s ease, opacity 0.7s ease; }
.main-navigation .menu-toggle[aria-expanded="true"] .gp-icon { transform: rotate(135deg); }
.main-navigation .dropdown-menu-toggle svg { transition: transform 0.7s ease; }
.main-navigation .dropdown-menu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.main-navigation .sub-menu { opacity: 0; transform: translateY(-4px); transition: opacity 0.3s ease, transform 0.3s ease; }
.main-navigation .menu-item-has-children.toggled-on > ul.sub-menu,
.main-navigation li:hover > ul.sub-menu { opacity: 1; transform: translateY(0); }
@media (max-width: 999px) {
#mobile-header .main-nav a[aria-expanded="true"] + ul.sub-menu { opacity: 1; transform: translateY(0); }
}
.main-navigation .main-nav ul ul.sub-menu { margin-top: 0 !important; top: 100% !important; }
/* ═══════════ NAV POLISH (live 1374–1481) — Phase 6 split per C8 ═══════════ */
/* ============================================================
JH NAV POLISH (Bucket D, retires Phase 6)
Appended override — supersedes earlier .menu-toggle colour,
.main-navigation border, and #mobile-header .sub-menu a opacity.
No markup changes.
============================================================ */
/* Burger / close icon to forest */
.menu-toggle,
.menu-toggle svg,
.menu-toggle path {
color: var(--forest);
fill: var(--forest);
}
/* Soften header border — REMOVED RUN 15 (seam between nav and recipe topbar) */
/* .main-navigation { border-block-end: 1px solid var(--border-soft); } */
/* RUN 15: hidden sub-menu border bleeds at nav bottom as 1px line when left:-99999px.
Fix: clip border by hiding it; restored to auto when sub-menu opens. */
@media (min-width: 1000px) {
.main-navigation .main-nav ul ul.sub-menu { border: none; }
.main-navigation .main-nav > ul > li.menu-item-has-children:hover > ul.sub-menu,
.main-navigation .main-nav > ul > li.menu-item-has-children:focus-within > ul.sub-menu,
.main-navigation .main-nav > ul > li.menu-item-has-children.toggled-on > ul.sub-menu,
.main-navigation .main-nav > ul > li.sfHover > ul.sub-menu { border: 1px solid var(--border); }
}
/* ── Desktop nav: editorial typography ─────────────────────── */
@media (min-width: 1000px) {
.main-navigation .main-nav > ul > li > a {
font-family: var(--ff-sans);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--forest);
padding-block: 22px;
padding-inline: 18px;
position: relative;
transition: color var(--t-base);
}
.main-navigation .main-nav > ul > li > a:hover,
.main-navigation .main-nav > ul > li.menu-item-has-children:hover > a {
color: var(--copper-deep);
background: transparent;
}
/* Current page indicator */
.main-navigation .main-nav > ul > li.current-menu-item > a,
.main-navigation .main-nav > ul > li.current-menu-parent > a,
.main-navigation .main-nav > ul > li.current-menu-ancestor > a {
color: var(--copper-deep);
}
.main-navigation .main-nav > ul > li.current-menu-item > a::after,
.main-navigation .main-nav > ul > li.current-menu-parent > a::after,
.main-navigation .main-nav > ul > li.current-menu-ancestor > a::after {
content: '';
position: absolute;
inset-inline: 18px;
inset-block-end: 14px;
block-size: 1px;
background: var(--copper);
}
/* Sub-menu link polish (wrapper styles from existing rule retained) */
.main-navigation ul ul.sub-menu a {
font-family: var(--ff-sans);
font-size: var(--fs-sm);
font-weight: var(--fw-regular);
color: var(--forest);
padding: 10px 18px;
transition: color var(--t-fast);
}
.main-navigation ul ul.sub-menu a:hover {
color: var(--copper-deep);
background: transparent;
}
}
/* ── Mobile drawer link polish ────────────────────────────── */
@media (max-width: 999px) {
#mobile-header .main-nav > ul > li > a {
font-family: var(--ff-sans);
font-size: 0.95rem;
font-weight: var(--fw-regular);
letter-spacing: var(--ls-wide);
color: var(--forest);
padding: 16px 24px;
min-block-size: 48px;
display: flex;
align-items: center;
border-block-end: 1px solid var(--border-soft);
}
#mobile-header .main-nav > ul > li:last-child > a { border-block-end: 0; }
/* Supersedes the opacity 0.78 hack on the earlier rule */
#mobile-header .sub-menu a {
font-size: 0.875rem;
color: var(--muted);
padding: 12px 24px 12px 36px;
opacity: 1;
}
#mobile-header .sub-menu a:hover { color: var(--copper-deep); }
#mobile-header .main-nav > ul > li.current-menu-item > a,
#mobile-header .main-nav > ul > li.current-menu-parent > a {
color: var(--copper-deep);
}
}
/* ── Keyboard focus (a11y) ────────────────────────────────── */
.main-navigation a:focus-visible {
outline: var(--focus-ring); /* A3: was 2px solid --copper (3.65:1) → canon focus token = copper-deep (6.08:1) */
outline-offset: -2px;
border-radius: 2px;
}
/* ═══════════ NAV CHASSIS (live 2391–2478) — Phase 6 settings migration, then delete ═══════════ */
/* ============================================================
13.x · JH NAV CHASSIS REFINEMENT (final)
Replaces all prior chassis refinement blocks.
Targets: desktop ~52px, mobile 55px. Always-on frosted bg.
Retires Phase 6 with the child-theme nav replacement.
============================================================ */
/* ── MOBILE (≤999px) ── */
@media (max-width: 999px) {
#mobile-header .inside-navigation {
min-block-size: 55px !important;
padding-block: 0 !important;
}
/* #mobile-header border-block-end removed RUN 15 — was causing the visible line */
#mobile-header .mobile-header-logo img,
#mobile-header .site-logo.mobile-header-logo img {
max-block-size: 36px !important;
max-height: 36px !important;
block-size: auto !important;
height: auto !important;
inline-size: auto !important;
width: auto !important;
padding: 0 !important;
}
#mobile-header .mobile-header-logo {
margin-inline: 12px 0 !important;
}
#mobile-header .menu-toggle {
padding-inline: 12px !important;
}
#mobile-header .menu-toggle svg {
inline-size: 22px !important;
block-size: 22px !important;
width: 22px !important;
height: 22px !important;
}
}
/* ── DESKTOP (≥1000px) ── */
@media (min-width: 1000px) {
/* Canon Bucket D sets padding-block:22px on links — this was the culprit. */
.main-navigation .main-nav > ul > li > a {
padding-block: 16px !important;
}
.main-navigation:not(#mobile-header) .inside-navigation {
padding-block: 0 !important;
}
.navigation-branding img,
.sticky-navigation-logo img,
.main-navigation:not(#mobile-header) .site-logo img,
.main-navigation:not(#mobile-header) img.is-logo-image {
max-block-size: 40px !important;
max-height: 40px !important;
block-size: auto !important;
height: auto !important;
inline-size: auto !important;
width: auto !important;
padding: 0 !important;
}
}
/* --- Submenu show-on-hover (restores after Menu Item Height change) --- */
@media (min-width: 1000px) {
.main-navigation .main-nav ul ul.sub-menu {
display: block !important;
position: absolute;
left: -99999px;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}
.main-navigation .main-nav > ul > li.menu-item-has-children:hover > ul.sub-menu,
.main-navigation .main-nav > ul > li.menu-item-has-children:focus-within > ul.sub-menu,
.main-navigation .main-nav > ul > li.menu-item-has-children.toggled-on > ul.sub-menu,
.main-navigation .main-nav > ul > li.sfHover > ul.sub-menu {
left: auto !important;
opacity: 1 !important;
visibility: visible !important;
}
}
/* ── Frosted bg (always on, subtle) ── */
.main-navigation,
#mobile-header {
background: var(--bg) !important; /* RUN 15 + 18b fix: was color-mix(--paper 99%) but --paper is undefined in canon → declaration was invalid → nav fell back to transparent and went unreadable over dark backgrounds. --bg (#FAF8F3) is the real page background token; opaque kills the bottom-edge tonal "line" too. */
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
/* ═══════════ Global nav stacking (live 2510–2518) — Phase 6 z-ladder ═══════════ */
/* ============================================================
GLOBAL NAV STACKING
============================================================ */
#site-navigation,
#mobile-header {
position: relative;
z-index: var(--z-nav, 60);
}
/* ╔═══════════════════════════════════════════════════════════╗
║ GREEN LIVING HUB v1
╚═══════════════════════════════════════════════════════════╝ */
/* ═══════════ GREEN LIVING HUB v1 family (live 849–1041) — retires at hub-family rebuild (Phase 5) ═══════════ */
/* ============================================================
GREEN LIVING HUB (v1 trial — retires in Phase 5)
============================================================ */
.jh-hub-hero { min-height: 78vh; display: flex; align-items: center; }
.jh-hub-hero-inner { padding: 60px 64px 100px; max-width: 1100px; position: relative; z-index: 2; margin: 0 auto; width: 100%; }
.jh-hub-hero .jh-eyebrow { margin-bottom: 28px; animation: jh-fade-up 0.7s ease 0.1s both; }
.jh-hub-hero .jh-h1 { margin-bottom: 32px; max-width: 900px; animation: jh-fade-up 0.7s ease 0.25s both; }
.jh-hub-hero .jh-lead { max-width: 620px; margin-bottom: 40px; animation: jh-fade-up 0.7s ease 0.4s both; }
.jh-hub-byline { display: flex; align-items: center; gap: 18px; margin-bottom: 48px; padding-bottom: 32px; border-bottom: 1px solid var(--border); max-width: 560px; animation: jh-fade-up 0.7s ease 0.5s both; }
.jh-hub-byline-avatars { display: flex; }
.jh-hub-byline-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--copper), var(--gold)); display: flex; align-items: center; justify-content: center; font-family: 'Fraunces', serif; font-size: 0.95rem; font-weight: 400; color: white; font-style: italic; border: 2px solid var(--bg); }
.jh-hub-byline-avatar:nth-child(2) { margin-left: -12px; background: linear-gradient(135deg, var(--forest-mid), var(--forest)); }
.jh-hub-byline-names { font-family: 'Fraunces', serif; font-size: 0.95rem; font-weight: 400; color: var(--forest); }
.jh-hub-byline-meta { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 400; margin-top: 2px; }
.jh-hub-hero .jh-btn-row { animation: jh-fade-up 0.7s ease 0.6s both; }
.jh-hub-hero .jh-stats { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--border); animation: jh-fade-up 0.7s ease 0.75s both; }
.jh-strip { background: var(--copper); padding: 16px 64px; display: flex; align-items: center; justify-content: center; gap: 0; overflow: hidden; }
.jh-strip-item { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,0.95); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 400; padding: 0 36px; white-space: nowrap; }
.jh-strip-item svg { width: 14px; height: 14px; fill: rgba(255,255,255,0.8); flex-shrink: 0; }
.jh-strip-div { width: 1px; height: 20px; background: rgba(255,255,255,0.3); flex-shrink: 0; }
.jh-topics-section { padding: 110px 64px; max-width: 1280px; margin: 0 auto; }
.jh-topics-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; margin-bottom: 64px; }
.jh-topics-head-left { max-width: 680px; }
.jh-topics-count-label { font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; font-weight: 400; text-align: right; }
.jh-topics-count-num { font-family: 'Fraunces', serif; font-size: 2.4rem; color: var(--forest); font-weight: 300; line-height: 1; font-style: italic; text-align: right; }
.jh-topics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--border); }
.jh-topic-card { background: var(--bg); padding: 56px 48px 44px; display: grid; grid-template-columns: auto 1fr; gap: 36px; text-decoration: none; transition: background 0.3s; position: relative; min-height: 320px; }
.jh-topic-card:hover { background: var(--bg-soft); }
.jh-topic-card-num { font-family: 'Fraunces', serif; font-size: 2.8rem; font-weight: 300; font-style: italic; color: var(--border); line-height: 1; transition: color 0.3s; }
.jh-topic-card:hover .jh-topic-card-num { color: var(--copper); }
.jh-topic-card-body { display: flex; flex-direction: column; gap: 14px; }
.jh-topic-card-title { font-family: 'Fraunces', serif; font-size: 1.65rem; font-weight: 400; color: var(--forest); line-height: 1.2; margin: 0; }
.jh-topic-card-img { width: 100%; aspect-ratio: 3/1; overflow: hidden; margin-bottom: 4px; }
.jh-topic-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.jh-topic-card:hover .jh-topic-card-img img { transform: scale(1.04); }
.jh-topic-card-desc { font-size: 0.92rem; line-height: 1.75; color: var(--muted); font-weight: 300; margin: 0; }
.jh-topic-card-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--border); }
.jh-topic-card-tag { font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--copper); font-weight: 500; }
.jh-topic-card-go { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--forest); font-weight: 500; transition: color 0.3s; }
.jh-topic-card-go::after { content: ' →'; }
.jh-topic-card:hover .jh-topic-card-go { color: var(--copper); }
.jh-flagship-section { background: var(--forest); padding: 110px 64px; position: relative; overflow: hidden; }
.jh-flagship-section::before { content: ''; position: absolute; top: -60px; left: 50%; transform: translateX(-50%); width: 700px; height: 300px; background: radial-gradient(ellipse, rgba(200,145,90,0.1) 0%, transparent 70%); pointer-events: none; }
.jh-flagship-inner { max-width: 1280px; margin: 0 auto; position: relative; z-index: 1; }
.jh-flagship-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; margin-bottom: 56px; }
.jh-flagship-section .jh-eyebrow { color: var(--copper-lt); }
.jh-flagship-section .jh-eyebrow::before { background: var(--copper-lt); }
.jh-flagship-section .jh-h2 { color: var(--bg); }
.jh-flagship-section .jh-h2 em { color: var(--copper-lt); }
.jh-flagship-section .jh-lead { color: rgba(250,250,248,0.7); }
.jh-flagship-section .jh-view-all { color: rgba(250,250,248,0.65); text-decoration: none; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; border-bottom: 1px solid rgba(250,250,248,0.3); padding-bottom: 4px; transition: color 0.2s, border-color 0.2s; white-space: nowrap; margin-bottom: 4px; }
.jh-flagship-section .jh-view-all:hover { color: var(--copper-lt); border-color: var(--copper-lt); }
.jh-flagship-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; grid-template-rows: auto auto; gap: 2px; }
.jh-flagship-card { position: relative; overflow: hidden; cursor: pointer; text-decoration: none; display: block; min-height: 240px; }
.jh-flagship-card-large { grid-row: span 2; min-height: 520px; }
.jh-flagship-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.jh-flagship-card:hover img { transform: scale(1.03); }
.jh-flagship-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(16,28,22,0.95) 0%, rgba(16,28,22,0.15) 55%, transparent 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 32px; transition: background 0.3s; }
.jh-flagship-card:hover .jh-flagship-overlay { background: linear-gradient(to top, rgba(16,28,22,0.97) 0%, rgba(16,28,22,0.4) 60%, transparent 100%); }
.jh-flagship-tag { display: inline-block; background: var(--copper); color: white; font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; padding: 5px 11px; width: fit-content; margin-bottom: 14px; }
.jh-flagship-name { font-family: 'Fraunces', serif; font-weight: 400; color: var(--bg); line-height: 1.3; margin: 0 0 10px; font-size: 1.2rem; }
.jh-flagship-card-large .jh-flagship-name { font-size: 1.85rem; margin-bottom: 14px; }
.jh-flagship-verdict { font-size: 0.84rem; color: rgba(250,250,248,0.78); line-height: 1.55; font-weight: 300; font-style: italic; margin: 0; }
.jh-flagship-card-large .jh-flagship-verdict { font-size: 0.95rem; }
.jh-flagship-rating { font-size: 0.7rem; color: rgba(250,250,248,0.65); margin-top: 14px; letter-spacing: 0.04em; display: flex; align-items: center; gap: 8px; }
.jh-flagship-rating-stars { color: var(--copper-lt); letter-spacing: 0.1em; }
.jh-latest-section { padding: 110px 64px; max-width: 1280px; margin: 0 auto; }
.jh-latest-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; margin-bottom: 56px; }
.jh-latest-head-left { max-width: 680px; }
.jh-latest-section .jh-view-all { color: var(--forest); border-bottom: 1px solid var(--border); padding-bottom: 4px; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; text-decoration: none; transition: color 0.2s, border-color 0.2s; white-space: nowrap; margin-bottom: 4px; }
.jh-latest-section .jh-view-all:hover { color: var(--copper); border-bottom-color: var(--copper); }
.jh-latest-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 32px 28px; }
.jh-latest-card { text-decoration: none; display: flex; flex-direction: column; }
.jh-latest-card-featured { grid-column: span 1; grid-row: span 2; }
.jh-latest-img { aspect-ratio: 4/3; position: relative; overflow: hidden; margin-bottom: 20px; }
.jh-latest-card-featured .jh-latest-img { aspect-ratio: 4/3.4; margin-bottom: 24px; }
.jh-latest-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; display: block; }
.jh-latest-card:hover .jh-latest-img img { transform: scale(1.03); }
.jh-latest-tag { font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--copper); margin-bottom: 10px; font-weight: 500; }
.jh-latest-title { font-family: 'Fraunces', serif; font-weight: 400; color: var(--forest); line-height: 1.3; font-size: 1.1rem; margin: 0 0 8px; transition: color 0.3s; }
.jh-latest-card-featured .jh-latest-title { font-size: 1.55rem; line-height: 1.25; margin-bottom: 12px; }
.jh-latest-card:hover .jh-latest-title { color: var(--copper); }
.jh-latest-excerpt { font-size: 0.85rem; color: var(--muted); line-height: 1.65; font-weight: 300; margin: 0 0 14px; }
.jh-latest-card-featured .jh-latest-excerpt { font-size: 0.92rem; }
.jh-latest-meta { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 400; margin-top: auto; }
.jh-thumbprint { background: var(--bg-soft); padding: 96px 64px; text-align: center; position: relative; }
.jh-thumbprint::before, .jh-thumbprint::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 24px; height: 1px; background: var(--copper); }
.jh-thumbprint::before { top: 48px; }
.jh-thumbprint::after { bottom: 48px; }
.jh-thumbprint-inner { max-width: 840px; margin: 0 auto; }
.jh-thumbprint-line { font-family: 'Fraunces', serif; font-size: clamp(1.4rem, 2.2vw, 1.85rem); font-weight: 300; font-style: italic; color: var(--forest); line-height: 1.5; margin: 0 0 20px; }
.jh-thumbprint-attr { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.jh-thumbprint-attr a { color: var(--copper-deep); text-decoration: none; border-bottom: 1px solid var(--border); padding-bottom: 2px; transition: border-color 0.2s; } /* A3: rest copper #B5714A failed AA → copper-deep */
.jh-thumbprint-attr a:hover { border-bottom-color: var(--copper); }
.jh-loop-section { padding: 110px 64px; background: var(--bg-linen); }
.jh-loop-inner { max-width: 1280px; margin: 0 auto; }
.jh-loop-head { text-align: center; margin-bottom: 64px; }
.jh-loop-head .jh-eyebrow { justify-content: center; }
.jh-loop-head .jh-lead { margin: 0 auto; }
.jh-loop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.jh-loop-card { background: var(--bg); padding: 48px 44px; text-decoration: none; display: flex; flex-direction: column; gap: 18px; transition: background 0.3s; border-left: 2px solid transparent; }
.jh-loop-card-gold:hover { border-left-color: var(--gold); background: var(--bg-soft); }
.jh-loop-card-copper:hover { border-left-color: var(--copper); background: var(--bg-soft); }
.jh-loop-card-eyebrow { font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--copper); font-weight: 500; }
.jh-loop-card-gold .jh-loop-card-eyebrow { color: var(--gold); }
.jh-loop-card-title { font-family: 'Fraunces', serif; font-size: 1.7rem; font-weight: 400; color: var(--forest); line-height: 1.25; margin: 0; }
.jh-loop-card-title em { font-style: italic; color: var(--copper); }
.jh-loop-card-gold .jh-loop-card-title em { color: var(--gold); }
.jh-loop-card-body { font-size: 0.95rem; line-height: 1.75; color: var(--muted); font-weight: 300; flex: 1; margin: 0; }
.jh-loop-card-link { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--forest); font-weight: 500; margin-top: 12px; }
.jh-loop-card-link::after { content: ' →'; transition: margin 0.3s; display: inline-block; }
.jh-loop-card:hover .jh-loop-card-link::after { margin-left: 6px; }
.jh-hub-promise-section { padding: 100px 64px; max-width: 1280px; margin: 0 auto; }
.jh-hub-promise-head { text-align: center; margin-bottom: 64px; }
.jh-hub-promise-head .jh-eyebrow { justify-content: center; }
.jh-hub-promise-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px; background: var(--border); }
.jh-newsletter-section { background: var(--forest); padding: 96px 64px; text-align: center; position: relative; overflow: hidden; }
.jh-newsletter-section::before { content: ''; position: absolute; top: -80px; left: 50%; transform: translateX(-50%); width: 600px; height: 300px; background: radial-gradient(ellipse, rgba(200,145,90,0.12) 0%, transparent 70%); pointer-events: none; }
.jh-newsletter-section .jh-eyebrow { justify-content: center; color: var(--gold); margin-bottom: 20px; }
.jh-newsletter-section .jh-eyebrow::before { background: var(--gold); }
.jh-newsletter-title { font-family: 'Fraunces', serif; font-size: clamp(1.8rem, 3vw, 3rem); font-weight: 300; color: var(--bg); line-height: 1.25; margin: 0 0 16px; }
.jh-newsletter-title em { font-style: italic; color: var(--gold); }
.jh-newsletter-sub { font-size: 0.95rem; color: rgba(250,250,248,0.75); margin: 0 auto 40px; line-height: 1.7; font-weight: 300; max-width: 520px; }
.jh-newsletter-form { display: flex; max-width: 480px; margin: 0 auto; position: relative; z-index: 1; }
.jh-newsletter-input { flex: 1; padding: 15px 20px; background: rgba(250,250,248,0.1); border: 1px solid rgba(250,250,248,0.25); border-right: none; color: var(--bg); font-family: 'Outfit', sans-serif; font-size: 0.9rem; font-weight: 300; outline: none; transition: border-color 0.2s; }
.jh-newsletter-input::placeholder { color: rgba(250,250,248,0.4); }
.jh-newsletter-input:focus { border-color: rgba(200,145,90,0.6); }
.jh-newsletter-btn { background: var(--copper); color: white; padding: 15px 28px; border: none; font-family: 'Outfit', sans-serif; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: background 0.2s; }
.jh-newsletter-btn:hover { background: var(--copper-lt); }
@media (max-width: 1024px) {
.jh-flagship-grid { grid-template-columns: 1fr 1fr; }
.jh-flagship-card-large { grid-column: span 2; grid-row: auto; min-height: 340px; }
.jh-latest-grid { grid-template-columns: 1fr 1fr; }
.jh-latest-card-featured { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 768px) {
.jh-hub-hero-inner, .jh-topics-section, .jh-flagship-section, .jh-latest-section, .jh-thumbprint, .jh-loop-section, .jh-hub-promise-section, .jh-newsletter-section { padding-left: 24px; padding-right: 24px; }
.jh-strip { padding: 14px 24px; flex-wrap: wrap; justify-content: flex-start; gap: 14px 0; }
.jh-strip-item { padding: 0 14px; font-size: 0.62rem; }
.jh-strip-div { display: none; }
.jh-topics-grid, .jh-flagship-grid, .jh-latest-grid, .jh-loop-grid, .jh-hub-promise-grid { grid-template-columns: 1fr; }
.jh-flagship-card-large { grid-column: auto; }
.jh-flagship-card-large, .jh-flagship-card { min-height: 280px; }
.jh-latest-card-featured { grid-column: auto; }
.jh-topic-card { padding: 40px 28px; gap: 24px; min-height: auto; }
.jh-topic-card-num { font-size: 2.2rem; }
.jh-topics-head, .jh-flagship-head, .jh-latest-head { flex-direction: column; align-items: flex-start; gap: 24px; }
.jh-thumbprint { padding: 72px 24px; }
.jh-thumbprint::before, .jh-thumbprint::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.jh-flagship-card img, .jh-latest-img img, .jh-topic-card-img img { transition: none; }
.jh-flagship-card:hover img, .jh-latest-card:hover .jh-latest-img img, .jh-topic-card:hover .jh-topic-card-img img { transform: none; }
}
/* Latest — full-width horizontal featured + standard 4-up row, tuned for the legacy loop markup */
.jh-latest-img { aspect-ratio: auto; overflow: hidden; margin-bottom: 16px; }
.jh-latest-img img { width: 100%; display: block; object-fit: cover; transition: transform 0.5s ease; }
.jh-latest-card:hover .jh-latest-img img { transform: scale(1.03); }
.jh-latest-card:not(.jh-latest-card-featured) .jh-latest-img img { height: 190px; }
.jh-latest-card-featured { flex-direction: row; align-items: stretch; gap: 44px; grid-column: auto; grid-row: auto; margin-bottom: 72px; }
.jh-latest-card-featured .jh-latest-img { aspect-ratio: auto; flex: 0 0 56%; margin-bottom: 0; }
.jh-latest-card-featured .jh-latest-img img { height: 100%; min-height: 340px; }
.jh-latest-featured-body { display: flex; flex-direction: column; justify-content: center; flex: 1; }
.jh-latest-featured-body .jh-latest-meta { margin-top: 16px; }
@media (max-width: 768px) {
.jh-latest-card-featured { flex-direction: column; gap: 0; margin-bottom: 48px; }
.jh-latest-card-featured .jh-latest-img { flex: none; margin-bottom: 16px; }
.jh-latest-card-featured .jh-latest-img img { height: 220px; min-height: 0; }
}
/* Topic card — pin the action row to the bottom so meta aligns across a row
regardless of description length (applies to both hubs) */
.jh-topic-card-meta { margin-top: auto; }
/* Topics grid: 3-up variant (e.g. Green Insights, 3 sub-areas).
Narrow columns, so stack the number above the body for full-width text. */
.jh-topics-grid.is-three { grid-template-columns: repeat(3, 1fr); }
.jh-topics-grid.is-three .jh-topic-card { display: flex; flex-direction: column; gap: 18px; padding: 44px 32px 36px; }
.jh-topics-grid.is-three .jh-topic-card-num { font-size: 2.2rem; }
.jh-topics-grid.is-three .jh-topic-card-title { font-size: 1.4rem; }
.jh-topics-grid.is-three .jh-topic-card-body { flex: 1 1 auto; }
@media (max-width: 900px) { .jh-topics-grid.is-three { grid-template-columns: 1fr; } }
/* ╔═══════════════════════════════════════════════════════════╗
║ BACK-TO-TOP — mix-blend hand-edit; sole source of .jh-back-to-top
╚═══════════════════════════════════════════════════════════╝ */
/* ═══════════ BACK TO TOP control (live 1482–1552) — retires with child-theme consolidation (Phase 6, trap #3 pairs) ═══════════ */
/* ============================================================
13.26 · JH BACK TO TOP (temp: retires when child theme active)
Cascade trap #3 — GP Customizer button{background-color} beats
canon's @layer. Unlayered rules here win. Full block kept so
GP button rule cannot win on any property.
============================================================ */
/* Restored to working state from "Back to top button redesign" session.
mix-blend-mode:difference = pixel-perfect colour inversion over light/dark.
::before/::after are KILLED — .jh-back-to-top-line child span draws the line.
Do NOT re-add ::before/::after or change color away from #ffffff. */
.jh-back-to-top {
position: fixed;
inset-inline-end: 0;
inset-block-start: 50%;
z-index: var(--z-back-to-top);
transform: translateY(-50%) translateX(8px);
background: transparent !important;
border: 0;
padding: 0;
padding-inline-end: 14px;
cursor: pointer;
opacity: 0;
pointer-events: none;
display: flex;
flex-direction: column;
align-items: center;
color: #ffffff;
mix-blend-mode: difference;
font-family: var(--ff-sans);
font-size: 9px;
gap: 6px;
-webkit-tap-highlight-color: transparent;
transition: opacity var(--t-slow), transform var(--t-slow);
}
/* Kill any GP hover colour injection */
.jh-back-to-top:hover { color: #ffffff !important; opacity: 0.75; }
/* Kill ghost pseudo-elements from any old CSS versions */
.jh-back-to-top::before,
.jh-back-to-top::after { content: none !important; display: none !important; }
.jh-back-to-top .jh-back-to-top-arrow {
line-height: 1;
font-size: 13px;
}
.jh-back-to-top .jh-back-to-top-label {
writing-mode: vertical-rl;
transform: rotate(180deg);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
font-weight: var(--fw-medium);
}
.jh-back-to-top .jh-back-to-top-line {
width: 1px;
height: clamp(40px, 10vh, 80px);
background: currentColor;
opacity: 0.5;
position: relative;
}
/* Copper progress fill inside the line */
.jh-back-to-top .jh-back-to-top-line::after {
content: '';
position: absolute;
inset-inline-start: 0;
inset-block-end: 0;
width: 1px;
height: var(--jh-progress, 0%);
background: var(--copper);
transition: height var(--t-fast);
}
.jh-back-to-top.is-visible {
opacity: 1;
pointer-events: auto;
transform: translateY(-50%) translateX(0);
}
.jh-back-to-top:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
@media (max-width: 680px) {
.jh-back-to-top { padding-inline-end: 10px; }
}
/* ╔═══════════════════════════════════════════════════════════╗
║ PAGE BODIES — Contact/Promise/Home/Legal/About v2
╚═══════════════════════════════════════════════════════════╝ */
/* ═══════════ CONTACT V2 · page body (live 112–162) ═══════════ */
/* ============================================================
CONTACT PAGE V2 — /contact/ (body + form only; hero migrated to canon)
============================================================ */
.jh-contact-body { background: var(--bg); padding: 80px 64px 110px; }
.jh-contact-body-inner {
max-width: 1080px;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 3fr;
gap: 80px;
align-items: start;
}
.jh-contact-info { padding-top: 10px; }
.jh-contact-info .jh-section-eyebrow { display: block; margin-bottom: 16px; }
.jh-contact-info .jh-h3 { margin-bottom: 20px; }
.jh-contact-info .jh-body { margin-bottom: 32px; }
.jh-contact-info .jh-body a {
color: var(--copper);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: transparent;
transition: text-decoration-color 0.25s ease;
}
.jh-contact-info .jh-body a:hover { text-decoration-color: var(--copper); }
.jh-response-note { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: var(--bg-linen); margin-bottom: 32px; }
.jh-response-note svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--copper); }
.jh-response-note span { font-family: 'Outfit', sans-serif; font-size: 0.82rem; font-weight: 300; color: var(--muted); }
.jh-contact-email-block { margin-bottom: 28px; }
.jh-contact-email-label { font-family: 'Outfit', sans-serif; font-size: 0.68rem; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 6px; }
.jh-contact-email-link { font-family: 'Fraunces', serif; font-size: 1.1rem; font-weight: 300; color: var(--copper-deep); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s ease; } /* A3: rest → copper-deep (AA) */
.jh-contact-email-link:hover { border-bottom-color: var(--copper); }
.jh-contact-location { font-family: 'Outfit', sans-serif; font-size: 0.78rem; font-weight: 300; color: var(--muted); margin-bottom: 32px; letter-spacing: 0.02em; }
.jh-contact-topics { list-style: none; padding: 0; margin: 0 0 28px; border-top: 1px solid var(--border); }
.jh-contact-topics li { font-family: 'Outfit', sans-serif; font-size: 0.875rem; font-weight: 300; color: var(--muted); line-height: 1.6; padding: 11px 0; border-bottom: 1px solid var(--border); display: flex; align-items: baseline; gap: 12px; }
.jh-contact-topics li::before { content: ''; display: block; width: 4px; height: 4px; background: var(--copper); border-radius: 50%; flex-shrink: 0; position: relative; top: -2px; }
.jh-contact-meetus { font-family: 'Outfit', sans-serif; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--forest); border-bottom: 1px solid var(--border); padding-bottom: 6px; transition: color 0.2s ease, border-color 0.2s ease; display: inline-block; }
.jh-contact-meetus:hover { color: var(--copper); border-bottom-color: var(--copper); }
.jh-contact-form-card { background: var(--bg-linen); padding: 48px 44px; }
.jh-contact-privacy { margin-top: 18px; font-family: 'Outfit', sans-serif; font-size: 0.72rem; font-weight: 300; color: var(--muted); line-height: 1.55; text-align: center; }
.jh-contact-privacy a { color: var(--copper-deep); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: transparent; transition: text-decoration-color 0.2s ease; } /* A3: rest → copper-deep (AA) */
.jh-contact-privacy a:hover { text-decoration-color: var(--copper); }
/* ═══════════ OUR PROMISE V2 · page body (live 326–465) ═══════════ */
/* ============================================================
JH · OUR PROMISE — V2 REBUILD (hero migrated to canon; body sections retained)
============================================================ */
/* Inline byline primitive — Promise hero uses , NOT the
avatar cluster. Tag-scoped + explicit display:block so the later canon
cluster (.jh-byline{display:flex}) cannot stack it into a column. */
p.jh-byline { display: block; font-family: 'Fraunces', serif; font-style: italic; font-weight: 300; font-size: 0.95rem; color: var(--muted); }
p.jh-byline .jh-byline-name { font-style: normal; color: var(--forest); font-weight: 400; margin-right: 6px; }
/* ── 02 · Why */
.jh-why-section { background: var(--bg); padding: var(--pad-y-section) var(--pad-x-page); }
.jh-why-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 96px; align-items: start; }
.jh-why-inner > * { min-width: 0; }
.jh-why-sidebar { position: static; }
@media (min-width: 1025px) { .jh-why-sidebar { position: sticky; top: 100px; } }
.jh-why-sidebar .jh-h2 { margin-bottom: 36px; }
.jh-author-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1px; margin-top: 8px; background: var(--border); }
/* Scoped to .jh-author-pair so it does NOT collide with the Article Template's
`.jh-author-card` (which uses display: grid with a 140px portrait column). */
.jh-author-pair .jh-author-card {
display: block;
grid-template-columns: none;
background: var(--bg);
padding: 22px 20px;
min-width: 0;
}
.jh-author-name { font-family: 'Fraunces', serif; font-size: 1.05rem; font-weight: 400; color: var(--forest); margin-bottom: 6px; display: block; }
.jh-author-role { font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); display: block; }
.jh-why-section .jh-pull-quote { margin-top: 56px; margin-block-end: 0; padding: 36px 40px; background: var(--bg-soft); border: 0; border-left: 2px solid var(--copper); text-align: start; }
.jh-why-section .jh-pull-quote::before { content: none; }
.jh-why-section .jh-pull-quote-text { font-family: 'Fraunces', serif; font-size: 1.2rem; font-style: italic; font-weight: 300; line-height: 1.55; color: var(--forest); margin-bottom: 18px; display: block; }
.jh-why-section .jh-pull-quote-attribution { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 400; display: block; }
/* ── 03 · Commitments */
.jh-commitments-section { background: var(--bg-linen); padding: var(--pad-y-section) var(--pad-x-page); }
.jh-commitments-header { max-width: 720px; margin: 0 auto 64px; text-align: center; }
.jh-commitments-header .jh-section-eyebrow { display: inline-block; margin-bottom: 16px; }
.jh-commitments-header .jh-h2 { margin-bottom: 0; }
.jh-commitments-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; max-width: 1100px; margin: 0 auto; background: var(--border); }
.jh-commit-card { background: var(--bg); padding: 48px 40px; display: flex; flex-direction: column; }
.jh-commit-num { font-family: 'Fraunces', serif; font-size: 2.6rem; font-style: italic; font-weight: 300; color: var(--border); line-height: 1; margin-bottom: 20px; display: block; }
.jh-commit-card .jh-h3 { margin-bottom: 14px; }
.jh-commit-body { font-size: 0.92rem; line-height: 1.75; color: var(--muted); font-weight: 300; flex-grow: 1; }
.jh-commit-tag { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--copper); font-weight: 400; display: block; }
/* ── 04 · Proof stories */
.jh-proof-section { background: var(--bg); padding: var(--pad-y-section) var(--pad-x-page); }
.jh-proof-header { max-width: 760px; margin: 0 auto 64px; text-align: center; }
.jh-proof-header .jh-section-eyebrow { display: inline-block; margin-bottom: 16px; }
.jh-proof-header .jh-h2 { margin-bottom: 0; }
.jh-stories { max-width: 980px; margin: 0 auto; }
.jh-story { display: grid; grid-template-columns: 90px 1fr; gap: 48px; padding: 56px 0; border-top: 1px solid var(--border); }
.jh-story:last-child { border-bottom: 1px solid var(--border); }
.jh-story-num { font-family: 'Fraunces', serif; font-size: 3.4rem; font-style: italic; font-weight: 300; color: var(--copper); line-height: 1; display: block; }
.jh-story-kicker { font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; font-weight: 400; display: block; }
.jh-story .jh-h3 { font-size: 1.5rem; margin-bottom: 20px; }
.jh-story-body { font-size: 0.95rem; line-height: 1.8; color: var(--muted); font-weight: 300; }
.jh-story-body + .jh-story-body { margin-top: 16px; }
/* ── 05 · Limits */
.jh-limits-section { background: var(--bg-soft); padding: var(--pad-y-section) var(--pad-x-page); }
.jh-limits-header { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.jh-limits-header .jh-section-eyebrow { display: inline-block; margin-bottom: 16px; }
.jh-limits-header .jh-h2 { margin-bottom: 20px; }
.jh-limits-header .jh-lead { margin: 0 auto; max-width: 640px; text-align: center; }
.jh-limits-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; max-width: 1100px; margin: 0 auto; background: var(--border); }
.jh-limit-card { background: var(--bg-soft); padding: 36px 32px; border-left: 2px solid transparent; transition: border-color 0.25s ease, background 0.25s ease; }
.jh-limit-card:hover { border-left-color: var(--copper); background: var(--bg); }
.jh-limit-card .jh-h3 { font-size: 1.1rem; margin-bottom: 12px; }
.jh-limit-body { font-size: 0.88rem; line-height: 1.75; color: var(--muted); font-weight: 300; }
/* ── 06 · Affiliate + Stats */
.jh-affiliate-section { background: var(--forest); color: var(--text-on-dark); padding: var(--pad-y-section) var(--pad-x-page); }
.jh-affiliate-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.15fr 1fr; gap: 96px; align-items: center; }
.jh-affiliate-content .jh-section-eyebrow { color: var(--copper-lt); }
.jh-affiliate-content .jh-h2 { color: var(--text-on-dark); font-size: clamp(1.9rem, 2.6vw, 2.4rem); margin-bottom: 28px; }
.jh-affiliate-content .jh-h2 em { color: var(--copper-lt); }
.jh-affiliate-body { font-size: 0.95rem; line-height: 1.8; color: var(--muted-on-dark); font-weight: 300; }
.jh-affiliate-body + .jh-affiliate-body { margin-top: 18px; }
.jh-stats { display: flex; flex-direction: column; gap: 0; }
.jh-stat { padding: 26px 0; border-bottom: 1px solid var(--border-on-dark); }
.jh-stat:first-child { padding-top: 0; }
.jh-stat:last-child { border-bottom: none; padding-bottom: 0; }
.jh-stat-num { font-family: 'Fraunces', serif; font-size: clamp(2.8rem, 4.5vw, 4rem); font-style: italic; font-weight: 300; color: var(--copper-lt); line-height: 1; margin-bottom: 10px; display: block; }
.jh-stat-label { font-size: 0.84rem; line-height: 1.6; color: var(--muted-on-dark); font-weight: 300; display: block; }
/* ── 07 · Writing test */
.jh-writing-section { background: var(--bg); padding: var(--pad-y-section) var(--pad-x-page); }
.jh-writing-header { max-width: 760px; margin: 0 auto 64px; text-align: center; }
.jh-writing-header .jh-section-eyebrow { display: inline-block; margin-bottom: 16px; }
.jh-writing-header .jh-h2 { margin-bottom: 0; }
.jh-writing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; max-width: 1100px; margin: 0 auto; }
.jh-writing-card { padding-top: 28px; border-top: 2px solid var(--copper); }
.jh-writing-num { font-family: 'Fraunces', serif; font-size: 2.2rem; font-style: italic; font-weight: 300; color: var(--border); line-height: 1; margin-bottom: 18px; display: block; }
.jh-writing-card .jh-h3 { font-size: 1.15rem; margin-bottom: 14px; }
.jh-writing-body { font-size: 0.9rem; line-height: 1.75; color: var(--muted); font-weight: 300; }
/* ── 08 · CTA */
.jh-cta-section { background: var(--forest); color: var(--text-on-dark); padding: var(--pad-y-section) var(--pad-x-page); text-align: center; }
.jh-cta-inner { max-width: 820px; margin: 0 auto; }
.jh-cta-section .jh-section-eyebrow { color: var(--copper-lt); display: inline-block; margin-bottom: 18px; }
.jh-cta-section .jh-h2 { color: var(--text-on-dark); margin-bottom: 28px; }
.jh-cta-section .jh-h2 em { color: var(--copper-lt); }
.jh-cta-section .jh-lead { color: var(--muted-on-dark); max-width: 620px; margin: 0 auto 44px; }
.jh-cta-section .jh-btn-row { justify-content: center; margin-bottom: 0; }
/* A1 — DELIBERATE, not drift: .jh-cta-section is a dark forest band, where a forest
primary is near-invisible, so the CTA primary uses the copper (= the .jh-btn-accent
treatment). Phase-2 markup cleanup: switch these buttons' class to .jh-btn-accent and
drop this context override so there's one named copper variant instead of a reskin. */
.jh-cta-section a.jh-btn.jh-btn-primary,
.jh-cta-section a.gb-text.jh-btn-primary { background: var(--copper); border-color: var(--copper); color: var(--text-on-dark) !important; }
.jh-cta-section a.jh-btn.jh-btn-primary:hover,
.jh-cta-section a.gb-text.jh-btn-primary:hover { background: var(--copper-lt); border-color: var(--copper-lt); }
.jh-cta-section a.jh-btn.jh-btn-primary:active,
.jh-cta-section a.gb-text.jh-btn-primary:active { background: var(--copper-deep); border-color: var(--copper-deep); } /* A1 */
.jh-cta-section a.jh-btn.jh-btn-secondary,
.jh-cta-section a.gb-text.jh-btn-secondary { background: transparent; color: var(--text-on-dark) !important; border-color: var(--border-on-dark); }
.jh-cta-section a.jh-btn.jh-btn-secondary:hover,
.jh-cta-section a.gb-text.jh-btn-secondary:hover { background: var(--surface-on-dark); border-color: var(--text-on-dark) !important; }
/* ── 09 · Tagline */
.jh-tagline-section { background: var(--bg-soft); padding: 84px var(--pad-x-page); text-align: center; }
.jh-tagline-quote { font-family: 'Fraunces', serif; font-size: clamp(1.25rem, 2vw, 1.6rem); font-style: italic; font-weight: 300; line-height: 1.5; color: var(--forest); max-width: 760px; margin: 0 auto 20px; }
.jh-tagline-attribution { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 400; display: block; }
/* ── Responsive */
@media (max-width: 1024px) {
.jh-why-inner { grid-template-columns: 1fr; gap: 56px; }
.jh-affiliate-inner { grid-template-columns: 1fr; gap: 56px; }
.jh-writing-grid { gap: 36px; }
}
@media (max-width: 768px) {
.jh-commitments-grid,
.jh-limits-grid,
.jh-writing-grid { grid-template-columns: 1fr; }
.jh-author-pair { grid-template-columns: 1fr; }
.jh-story { grid-template-columns: 1fr; gap: 16px; padding: 40px 0; }
.jh-story-num { font-size: 2.8rem; }
.jh-h1 { font-size: 2.6rem; }
.jh-h2 { font-size: 1.9rem; }
.jh-why-section .jh-pull-quote { padding: 28px 24px; }
.jh-commit-card,
.jh-limit-card { padding: 32px 24px; }
}
/* ═══════════ HOMEPAGE components (live 486–572) ═══════════ */
/* =========================================================================
HOMEPAGE COMPONENTS (hero migrated to canon; body components retained)
========================================================================= */
/* 2. jh-cross-band */
.jh-cross-band { background: var(--copper); padding: 30px 64px; text-align: center; }
.jh-cross-band-text { margin: 0; font-family: 'Outfit', sans-serif; font-size: 0.82rem; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(250, 250, 248, 0.95); line-height: 1.6; }
.jh-cross-band-text em { font-family: 'Fraunces', serif; font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 1.05rem; color: rgba(250, 250, 248, 1); margin: 0 6px; }
/* 3. Video embed */
.jh-video-wrap { margin: 36px 0 0; }
.jh-video-wrap .wp-block-embed { margin: 0; }
/* 4. jh-flagship-feature */
.jh-flagship-feature { position: relative; padding: 110px 64px; background: var(--bg-soft); overflow: hidden; }
.jh-flagship-feature::before { content: ''; position: absolute; top: -250px; right: -250px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(181, 113, 74, 0.08), transparent 65%); pointer-events: none; }
.jh-flagship-feature .jh-flagship-inner { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.05fr; gap: 88px; align-items: center; }
.jh-flagship-content { max-width: 540px; }
.jh-flagship-lead { font-family: 'Outfit', sans-serif; font-size: 1.08rem; font-weight: 300; line-height: 1.65; color: var(--text); margin: 0 0 32px; }
.jh-flagship-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding: 18px 0 24px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 0 0 36px; }
.jh-flagship-byline { font-family: 'Outfit', sans-serif; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text); }
.jh-flagship-byline em { font-family: 'Fraunces', serif; font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 0.95rem; color: var(--forest); margin-left: 6px; }
.jh-flagship-updated { display: inline-flex; align-items: center; font-family: 'Outfit', sans-serif; font-size: 0.62rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--copper); border: 1px solid var(--copper); padding: 6px 12px; }
.jh-flagship-readtime { font-family: 'Outfit', sans-serif; font-size: 0.72rem; font-weight: 400; letter-spacing: 0.08em; color: var(--muted); }
.jh-flagship-image-wrap { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background-color: var(--bg-linen); transition: transform 0.9s ease; }
.jh-flagship-image-wrap .jh-flagship-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.jh-flagship-feature:hover .jh-flagship-image-wrap { transform: scale(1.02); }
.jh-flagship-image-caption { position: absolute; bottom: 20px; left: 20px; display: inline-flex; align-items: center; background: rgba(30, 58, 47, 0.92); color: var(--bg); padding: 10px 14px; font-family: 'Outfit', sans-serif; font-size: 0.62rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; }
.jh-flagship-image-caption em { font-family: 'Fraunces', serif; font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 0.85rem; color: var(--copper-lt); margin-right: 8px; }
/* 5. jh-hubs-section + jh-hub-card */
.jh-hubs-section { padding: 110px 64px; background: var(--bg-linen); }
.jh-hubs-inner { max-width: 1280px; margin: 0 auto; }
.jh-hubs-header { max-width: 720px; margin: 0 auto 64px; text-align: center; }
.jh-hubs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.jh-hub-card { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--forest); cursor: pointer; isolation: isolate; text-decoration: none; color: var(--bg); }
.jh-hub-card .jh-hub-card-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.7s ease; z-index: 0; display: block; }
.jh-hub-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(30, 58, 47, 0.15) 0%, rgba(30, 58, 47, 0.25) 40%, rgba(30, 58, 47, 0.85) 100%); z-index: 1; transition: opacity 0.4s ease; }
.jh-hub-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(220px circle at var(--gx, 50%) var(--gy, 50%), rgba(200, 145, 90, 0.35), transparent 60%); opacity: 0; transition: opacity 0.3s ease; z-index: 2; pointer-events: none; mix-blend-mode: screen; }
.jh-hub-card:hover::before { opacity: 1; }
.jh-hub-card:hover .jh-hub-card-image { transform: scale(1.04); }
.jh-hub-card-content { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 32px 32px; color: var(--bg); z-index: 3; }
.jh-hub-card-eyebrow { font-family: 'Outfit', sans-serif; font-size: 0.66rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--copper-lt); display: block; margin-bottom: 10px; }
.jh-hub-card-title { font-family: 'Fraunces', serif; font-weight: 300; font-size: 1.7rem; line-height: 1.15; color: var(--bg); display: block; margin-bottom: 10px; }
.jh-hub-card-title em { font-style: italic; color: var(--copper-lt); }
.jh-hub-card-desc { font-family: 'Outfit', sans-serif; font-size: 0.9rem; font-weight: 300; line-height: 1.5; color: rgba(250, 250, 248, 0.78); display: block; }
.jh-hub-card-arrow { position: absolute; top: 28px; right: 28px; width: 36px; height: 36px; border: 1px solid rgba(250, 250, 248, 0.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--bg); font-family: 'Fraunces', serif; font-size: 1rem; transition: all 0.3s ease; z-index: 3; }
.jh-hub-card:hover .jh-hub-card-arrow { background: var(--copper); border-color: var(--copper); transform: translate(2px, -2px); }
/* 6. ff-recipe-strip */
.ff-recipe-strip { padding: 110px 64px; background: var(--bg); }
.ff-recipe-strip-inner { max-width: 1280px; margin: 0 auto; }
.ff-recipe-strip-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 56px; gap: 36px; }
.ff-recipe-strip-header .jh-section-eyebrow { color: var(--copper); }
.ff-recipe-strip-header .jh-h2 { margin-bottom: 0; }
.ff-recipe-strip-view-all { font-family: 'Outfit', sans-serif; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--forest); border-bottom: 1px solid var(--border); padding-bottom: 6px; transition: all 0.25s ease; flex-shrink: 0; }
.ff-recipe-strip-view-all:hover { color: var(--copper); border-bottom-color: var(--copper); }
/* 7. Responsive */
@media (max-width: 1024px) {
.jh-cross-band { padding: 28px 40px; }
.jh-flagship-feature { padding: 90px 40px; }
.jh-flagship-feature .jh-flagship-inner { grid-template-columns: 1fr; gap: 56px; max-width: 720px; }
.jh-flagship-content { max-width: none; }
.jh-hubs-section { padding: 90px 40px; }
.jh-hubs-grid { gap: 20px; }
.ff-recipe-strip { padding: 90px 40px; }
}
@media (max-width: 768px) {
.jh-cross-band { padding: 26px 24px; }
.jh-cross-band-text { font-size: 0.72rem; letter-spacing: 0.14em; }
.jh-cross-band-text em { font-size: 0.95rem; }
.jh-flagship-feature { padding: 72px 24px; }
.jh-flagship-meta { gap: 12px; }
.jh-hubs-section { padding: 72px 24px; }
.jh-hubs-grid { grid-template-columns: 1fr; }
.jh-hub-card { aspect-ratio: 16 / 11; }
.ff-recipe-strip { padding: 72px 24px; }
.ff-recipe-strip-header { flex-direction: column; align-items: flex-start; gap: 20px; }
}
/* 8. prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
.jh-hub-card-image,
.jh-flagship-image-wrap { transition: none; }
}
/* ═══════════ LEGAL PAGES body (live 825–848) ═══════════ */
/* ============================================================
LEGAL PAGES (body content only; hero migrated to canon)
============================================================ */
.jh-legal-content { background: var(--bg); padding: 0 var(--pad-x-page) var(--pad-y-section); }
.jh-legal-content-inner { max-width: var(--max-narrow); margin: 0 auto; }
.jh-legal-content .jh-h2 { font-size: var(--fs-xl); margin: var(--space-8) 0 var(--space-5); }
.jh-legal-content .jh-h2:first-child { margin-top: 0; }
.jh-legal-content .jh-h3 { font-size: var(--fs-lg); margin: var(--space-7) 0 var(--space-4); }
.jh-legal-content .jh-body { margin-bottom: var(--space-4); line-height: var(--lh-loose); }
.jh-legal-content .jh-body:last-child { margin-bottom: 0; }
.jh-legal-content a { color: var(--copper-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: transparent; transition: text-decoration-color 0.25s ease; } /* A3: rest → copper-deep (AA) */
.jh-legal-content a:hover,
.jh-legal-content a:focus-visible { text-decoration-color: var(--copper); }
.jh-legal-content ul,
.jh-legal-content ol { padding-left: 1.4em; margin: var(--space-3) 0 var(--space-5); max-width: var(--max-prose); }
.jh-legal-content li { font-family: var(--ff-sans); font-size: var(--fs-md); font-weight: var(--fw-light); line-height: var(--lh-loose); color: var(--muted); margin-bottom: var(--space-2); }
.jh-legal-contact { background: var(--bg-soft); padding: var(--pad-y-section) var(--pad-x-page); text-align: center; }
.jh-legal-contact-inner { max-width: var(--max-narrow); margin: 0 auto; }
.jh-legal-contact .jh-h3 { margin-bottom: var(--space-3); }
.jh-legal-contact .jh-body { margin: 0 auto var(--space-6); line-height: var(--lh-loose); max-width: var(--max-prose); }
.jh-legal-contact .jh-btn { min-block-size: 48px; display: inline-flex; align-items: center; justify-content: center; }
/* ═══════════ ABOUT V2 body (live 1090–1131) ═══════════ */
/* ============================================================
13.27 · ABOUT PAGE V2 (hero migrated to canon; body sections retained)
============================================================ */
.jh-about-intro { background: var(--bg); padding: var(--pad-y-section) var(--pad-x-page); }
.jh-about-intro-inner { max-width: var(--max-narrow); margin: 0 auto; }
.jh-about-intro .jh-body { max-width: var(--max-prose); margin: 0 auto var(--space-5); font-size: var(--fs-md); }
.jh-about-intro .jh-body:nth-of-type(3) { margin-bottom: var(--space-7); }
.jh-about-video-wrap { margin: 0 auto; max-width: var(--max-narrow); }
.jh-about-video-wrap .wp-block-embed { margin: 0; }
.jh-about-video-wrap .wp-block-embed__wrapper { position: relative; aspect-ratio: 16 / 9; }
.jh-about-video-wrap .wp-block-embed__wrapper iframe,
.jh-about-video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.jh-about-video-caption { margin-top: var(--space-3); font-family: var(--ff-serif); font-style: italic; font-size: var(--fs-sm); color: var(--muted); text-align: center; font-weight: var(--fw-light); }
.jh-bio-card { background: var(--bg); padding: var(--space-6); display: flex; flex-direction: column; }
@media (min-width: 900px) { .jh-bio-card { padding: var(--space-7); } }
.jh-bio-portrait { position: relative; aspect-ratio: 4 / 5; margin-bottom: var(--space-5); background: var(--bg-linen); overflow: hidden; }
.jh-bio-portrait-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.jh-bio-portrait-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--bg-linen) 0%, var(--bg-soft) 100%); }
.jh-bio-portrait-placeholder .mark { font-family: var(--ff-serif); font-style: italic; font-weight: var(--fw-light); font-size: clamp(4rem, 12vw, 7rem); color: var(--copper); line-height: 1; opacity: 0.5; }
.jh-bio-portrait::after { content: ''; position: absolute; bottom: -4px; left: 0; right: 0; height: 2px; background: var(--copper); z-index: 1; }
.jh-bio-eyebrow { font-family: var(--ff-sans); font-size: var(--fs-xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--copper-deep); font-weight: var(--fw-medium); margin-bottom: var(--space-2); display: block; }
.jh-bio-name { font-family: var(--ff-serif); font-size: var(--fs-xl); font-weight: var(--fw-light); color: var(--forest); line-height: var(--lh-tight); margin: 0 0 4px; display: block; }
.jh-bio-role { font-family: var(--ff-sans); font-size: var(--fs-xs); letter-spacing: 0.04em; color: var(--muted); font-weight: var(--fw-light); font-style: italic; display: block; margin-bottom: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); }
.jh-bio-body { font-family: var(--ff-sans); font-size: var(--fs-md); line-height: var(--lh-loose); color: var(--muted); font-weight: var(--fw-light); margin: 0 0 var(--space-3); }
.jh-bio-body:last-child { margin-bottom: 0; }
.jh-about-quote-section { background: var(--bg); padding: var(--pad-y-section) var(--pad-x-page); }
.jh-about-quote-inner { max-width: var(--max-narrow); margin: 0 auto; text-align: center; }
.jh-about-quote-inner::before { content: ''; display: block; width: 28px; height: 1px; background: var(--copper); margin: 0 auto var(--space-5); }
.jh-about-quote-text { font-family: var(--ff-serif); font-style: italic; font-weight: var(--fw-light); font-size: clamp(1.25rem, 2.2vw, 1.65rem); line-height: var(--lh-snug); color: var(--forest); margin: 0 0 var(--space-5); display: block; }
.jh-about-quote-attribution { font-family: var(--ff-sans); font-size: var(--fs-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--copper-deep); font-weight: var(--fw-medium); display: block; }
.jh-commitments-grid.is-three { grid-template-columns: 1fr; }
@media (min-width: 700px) { .jh-commitments-grid.is-three { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .jh-commitments-grid.is-three { grid-template-columns: 1fr 1fr 1fr; } }
a.jh-commit-card { text-decoration: none; color: inherit; transition: background 0.3s ease; }
a.jh-commit-card:hover { background: var(--bg-soft); }
a.jh-commit-card:focus-visible { outline: 2px solid var(--copper-deep); outline-offset: -2px; }
a.jh-commit-card .jh-commit-tag { transition: color 0.25s ease; }
a.jh-commit-card:hover .jh-commit-tag { color: var(--copper-deep); }
/* ╔═══════════════════════════════════════════════════════════╗
║ CANON job4-late RE-EMIT (after page-bodies — live-order law)
╚═══════════════════════════════════════════════════════════╝ */
/* ── job4-late re-emit · from canon 04-layout.css (must beat page-bodies) ── */
.jh-about-intro,
.jh-why-section {
padding-block-start: 0;
}
.jh-author-name { font-family: var(--ff-serif); font-size: var(--fs-xl); font-weight: var(--fw-light); color: var(--forest); margin: 0 0 4px; }
.jh-author-role { font-family: var(--ff-sans); font-size: var(--fs-xs); letter-spacing: 0.04em; font-style: italic; color: var(--muted); margin: 0 0 var(--space-3); padding-block-end: var(--space-3); border-block-end: 1px solid var(--border); }
/* ╔═══════════════════════════════════════════════════════════╗
║ A* NEWSLETTER ENFORCEMENT (after canon 05 .jh-newsletter-input)
╚═══════════════════════════════════════════════════════════╝ */
/* ═══════════ A* TRAP · newsletter input enforcement vs GP form fill (live 1567–1595; ledgered) ═══════════ */
/* Newsletter input — full appearance enforcement on the forest band */
.jh-newsletter-input {
background: var(--surface-on-dark) !important;
border: 1px solid var(--border-on-dark) !important;
border-inline-end: 0 !important;
}
.jh-newsletter-input,
.jh-newsletter-input:focus,
.jh-newsletter-input:active {
color: var(--text-on-dark) !important;
-webkit-text-fill-color: var(--text-on-dark) !important;
caret-color: var(--text-on-dark);
}
.jh-newsletter-input:focus,
.jh-newsletter-input:focus-visible {
border-color: var(--gold-lt) !important;
}
.jh-newsletter-input::placeholder {
color: var(--faint-on-dark) !important;
-webkit-text-fill-color: var(--faint-on-dark) !important;
opacity: 1;
}
.jh-newsletter-input:-webkit-autofill,
.jh-newsletter-input:-webkit-autofill:hover,
.jh-newsletter-input:-webkit-autofill:focus {
-webkit-text-fill-color: var(--text-on-dark) !important;
caret-color: var(--text-on-dark);
transition: background-color 9999s ease-in-out 0s;
}
/* ╔═══════════════════════════════════════════════════════════╗
║ PAGE GLUE — Fabrics + FF-hub gaps
╚═══════════════════════════════════════════════════════════╝ */
/* ═══════════ FABRICS page glue · jh-spec + watch tone context (live 2907–2930) ═══════════ */
/* ================================================================
JUNGLE HUGGER — CSS additions for /sustainable-fabrics/ (post 2401)
Append to Customizer -> Additional CSS (v5.4 -> v5.5).
Mobile-first, min-width only. No tokens invented; all var()s exist
in canon. Everything else the rebuild uses is already live in v5.4
(jh-standfirst, jh-readon, jh-spectrum + is-bio/is-ind/is-home,
jh-spectrum-row/rk/rv, jh-cert-grid-3, jh-cert-card/name, jh-figure,
jh-notice + label/body, jh-pull-quote, jh-takeaways).
TWO small additions only:
1. .jh-spec — the per-fabric Biodegradable/Cost/Score readout.
Reuses the live .jh-spectrum-row atoms standalone
(outside a card), so only wrapper polish is needed.
2. .jh-notice.is-watch — warm-gold spine for the greenwashing warning.
Base .jh-notice tone modifiers are otherwise inert;
label stays --copper-deep for contrast on cream.
================================================================ */
/* 1. Per-fabric spec readout (Biodegradable / Cost / Sustainability Score) */
.jh-spec { margin-block: var(--space-5); max-inline-size: 32rem; }
.jh-spec > * + * { margin-block-start: 0; }
.jh-spec .jh-spectrum-rk { flex-basis: 11rem; }
.jh-spec .jh-spectrum-row:last-child { border-block-end: 1px solid var(--border); }
/* ═══════════ FARAH'S FOODS hub interim fixes (live 1618–1636) — out of rebuild scope; retires with FF sub-brand work ═══════════ */
/* ── Farah's Foods hub — canon gap fixes (interim until current canon ships to child theme) ── */
/* A · Recipe cards: fill the 4:3 frame, kill the grey gap under the photo */
.jh-card.is-below .jh-card-image-wrap { aspect-ratio: 4 / 3; overflow: hidden; }
.jh-card.is-below .jh-card-image { width: 100%; height: 100%; object-fit: cover; display: block; }
/* B · Flagship overlay cards: scrim + on-dark text so the title reads over the photo */
.jh-card.is-overlay { position: relative; isolation: isolate; }
.jh-card.is-overlay::after {
content: ''; position: absolute; inset: 0; z-index: 1;
background: linear-gradient(to top, var(--scrim-dark, rgba(16,28,22,0.92)) 0%, rgba(16,28,22,0.45) 55%, transparent 100%);
}
.jh-card.is-overlay .jh-card-image-wrap { z-index: 0; }
.jh-card.is-overlay .jh-card-body-wrap { position: relative; z-index: 2; }
.jh-card.is-overlay .jh-card-title { color: var(--text-on-dark); }
.jh-card.is-overlay .jh-card-title em { color: var(--copper-lt); }
.jh-card.is-overlay .jh-card-eyebrow { color: var(--copper-lt); }
.jh-card.is-overlay .jh-card-body { color: var(--muted-on-dark, var(--text-on-dark)); }
.jh-card-image { object-position: center; }
/* ─── Grouped-article prose rhythm (2026-07-07) ─────────────────────────────
A wp:group with no explicit layout renders its content inside
.wp-block-group__inner-container, so canon's `.jh-prose > *` rhythm rules
(04-layout.css) never match — plain
paragraphs collapse to a 0px gap and
the whole article touches. This restores the intended owl-rhythm inside the
container. Specificity is 0,2,0, which beats `.jh-prose p { margin:0 }`
(0,1,1) so plain paragraphs space correctly; `.jh-article h2` keeps its
!important section margin. Harmless when no inner-container exists (the
selector requires it). This is the gold-standard review/article body pattern.
Root cause + measurements: 06-build/3496-pela design-review, 2026-07-07. */
.jh-prose > .wp-block-group__inner-container > * + * { margin-block-start: var(--space-5); }
.jh-prose > .wp-block-group__inner-container > .jh-section { padding-block: var(--pad-y-stack); margin-block: 0; }
.jh-prose > .wp-block-group__inner-container > * + .jh-section,
.jh-prose > .wp-block-group__inner-container > .jh-section + * { margin-block-start: 0; }
.jh-prose > .wp-block-group__inner-container > .jh-section + h2,
.jh-prose > .wp-block-group__inner-container > .jh-section + h3 { margin-block-start: 0 !important; }
/* ─── jh-jump-nav mobile (2026-07-07, revised 2026-07-08) ────────────────────
The 5-item section nav overflowed off the right on phones and read as
clipped. On mobile, wrap it to as many rows as needed and centre it so every
item is visible (Finn: "hidden on the right, not centred"). Desktop keeps the
single scrollable row. */
.jh-jump-nav-link { white-space: nowrap; }
@media (max-width: 767px) {
/* Centre + space the nav on phones. The base list is a flex row with
`gap: var(--space-5)` and `overflow-x: auto`. Two traps here, both from the
same component:
1. A SCROLLABLE flex row ignores justify-content:center and left-aligns
(jh-visual-rhythm RULE 9) — so we must make it non-scrolling first.
2. `gap` only applies to flex/grid CONTAINERS. The earlier fix switched to
`display:block`, which silently dropped the gap → items collapsed to a
few px apart and read as ONE SENTENCE (the 2026-07-08 bug). RULE 9b.
Correct fix: stay in flex, but make it WRAP (overflow:visible → no longer
scrolling), so justify-content:center works AND gap survives. Row-gap kept
tight, column-gap keeps clear word separation. High specificity so WP Rocket
Used-CSS keeps it. Verified at 375px. */
.entry-content .jh-jump-nav .jh-jump-nav-list {
flex-wrap: wrap;
justify-content: center;
gap: var(--space-2) var(--space-5);
overflow: visible;
padding-inline: var(--space-2);
}
.jh-jump-nav-link,
.entry-content .jh-jump-nav-list a.jh-jump-nav-link { font-size: 11px; letter-spacing: 0.02em; }
}
/* ═══ END 07-overrides.css ═══ */