/* ======================
TAF 2026 — "Warm Oven" design system: tokens + components.
Class prefix .taf-* avoids Kadence collisions (.scallop keeps its upstream name).
Does NOT style WPRM markup — that is wprm-taf2026.css.
Mobile-first at 390px; desktop breakpoint 900px.
====================== */
/* ---- Fonts: self-hosted Poppins (--display) + Mulish (--sans) ----
Poppins = all headings, eyebrows, buttons, nav, labels, numerals, chips.
Mulish = all running body copy. Latin subset, static per-weight woff2,
font-display:swap. Fallback is the platform UI sans (system-ui), which is
metrically close to both faces — swap reflow stays low. */
/* ---- METRIC-OVERRIDE FALLBACKS (2026-07-14). Zero bytes; the real CLS fix.
The comment below used to claim the platform sans is "metrically close to both
faces — swap reflow stays low". That was FALSE, and measured so: rendering the
same string at 100px, Poppins is 110.2% of Arial's width at weight 400 and
106.2% at 700; Mulish is 104.6%. So every heading and every line of body copy
REFLOWS when the webfont swaps in — and Lighthouse blames 100% of the layout
shift on this site on `Web font loaded`, on a recipe template whose field CLS
p75 is 0.10 against a 0.10 bar. Zero margin.
These two faces are the SAME Arial the browser would fall back to anyway, but
stretched so its metrics match the real face. The swap then causes no reflow.
Ratios measured empirically in-browser, NOT from OS/2 xAvgCharWidth — fonts
compute that field differently and it claimed Poppins was 156% of Arial, which
is nonsense. ascent/descent are the real font's values (Poppins 1050/-350,
Mulish 1005/-250 per 1000upm) divided by size-adjust, because the overrides are
relative to the ADJUSTED em. (Both ascent/descent figures re-verified against
the woff2 tables 2026-08-06: Poppins typoAscender 1050, typoDescender -350;
Mulish 1005 / -250, both at 1000upm, both USE_TYPO_METRICS. They are right.) */
/* ---- CORRECTION, 2026-08-06 (audit 07 #5). One face served 400-800 and it was
calibrated against the WRONG denominator, so the July mitigation never worked.
Measured, not argued:
`src: local('Arial')` NEVER RESOLVES TO ARIAL BOLD. Five faces were declared at
400/500/600/700/800 with this identical src and all five measured IDENTICALLY,
at Arial *Regular* widths — while a plain `font-family: Arial` at weight >= 600
does pick up Arial Bold (pangram 1978.77 -> 2139.17px). Chrome applies no
advance widening for synthetic bold either. The shipped 106.2% is Poppins-700 /
Arial *BOLD* (re-measured: 106.12%) — a ratio against a face that never loads.
Against the face that DOES load, every weight was short: -3.37% at 400 rising
to -6.33% at 800, which is where the audit's flat-2296.1-vs-2420->2545 mismatch
came from. H1/.taf-rhero__title/.taf-cat-title are --w-black (800), i.e. the
display type driving CLS sat on the WORST-fitting number in the file.
The five values below are measured against Arial Regular over the site's own
608 post titles (the actual H1 content), fontTools advance sums cross-validated
in-browser to 0.01px, then calibrated to zero corpus error. Payoff on real
geometry (H1 30px/800/lh1.15, count of titles whose block height differs from
real Poppins): 75/608 titles wrong at 342px, mean 4.26px -> 20/608, mean 1.13px.
~5.6x less swap reflow, zero bytes.
line-gap-override stays 0% though real Poppins lineGap is 100/1000 = 10%: it is
inert here because inc/enqueue.php pins `line-height: var(--lh-display)
!important` on h1..h6, and `line-height: normal` appears once in the whole
theme. Kept at parity rather than changed unmeasured.
ANDROID CAVEAT, recorded not hidden: Android ships none of Arial / Helvetica
Neue / Liberation Sans, so this family fails to resolve there and the stack
falls through to system-ui (Roboto). These overrides do nothing on that slice —
before this change and after it. A Roboto-targeted face is a separate piece of
work, not a regression introduced here. */
@font-face {
font-family: 'Poppins Fallback';
font-weight: 400;
src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
size-adjust: 110.42%;
ascent-override: 95.09%; /* 105% / 1.1042 */
descent-override: 31.70%; /* 35% / 1.1042 */
line-gap-override: 0%;
}
@font-face {
font-family: 'Poppins Fallback';
font-weight: 500;
src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
size-adjust: 111.65%;
ascent-override: 94.04%; /* 105% / 1.1165 */
descent-override: 31.35%; /* 35% / 1.1165 */
line-gap-override: 0%;
}
@font-face {
font-family: 'Poppins Fallback';
font-weight: 600;
src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
size-adjust: 112.58%;
ascent-override: 93.27%; /* 105% / 1.1258 */
descent-override: 31.09%; /* 35% / 1.1258 */
line-gap-override: 0%;
}
@font-face {
font-family: 'Poppins Fallback';
font-weight: 700;
src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
size-adjust: 113.66%;
ascent-override: 92.38%; /* 105% / 1.1366 */
descent-override: 30.79%; /* 35% / 1.1366 */
line-gap-override: 0%;
}
@font-face {
font-family: 'Poppins Fallback';
font-weight: 800;
src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
size-adjust: 114.58%;
ascent-override: 91.64%; /* 105% / 1.1458 */
descent-override: 30.55%; /* 35% / 1.1458 */
line-gap-override: 0%;
}
@font-face {
font-family: 'Mulish Fallback';
src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
size-adjust: 104.6%;
ascent-override: 96.08%; /* 100.5% / 1.046 */
descent-override: 23.90%; /* 25% / 1.046 */
line-gap-override: 0%;
}
@font-face {
font-family: 'Poppins';
src: url('../fonts/poppins-400.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Poppins';
src: url('../fonts/poppins-500.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Poppins';
src: url('../fonts/poppins-600.woff2') format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Poppins';
src: url('../fonts/poppins-700.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Poppins';
src: url('../fonts/poppins-800.woff2') format('woff2');
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Mulish';
src: url('../fonts/mulish-400.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Mulish';
src: url('../fonts/mulish-500.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Mulish';
src: url('../fonts/mulish-600.woff2') format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Mulish';
src: url('../fonts/mulish-700.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* ---- Tokens ---- */
/* == GENERATED: tokens — do not edit by hand. Source: design/tokens.json (scripts/build-tokens.py) == */
:root {
/* Palette — every neutral mixed from the brand pink */
--milk: #FEFBFA;
--cream: #FAEDF2;
--paper: #FFFFFF;
--chocolate: #33202B;
--cocoa: #6E5964;
--rose: #E11584;
--rose-deep: #B80E67;
--rose-link: #D01277;
--rose-tint: #FCE7F3;
--saffron: #E29B32;
--saffron-deep: #B87716;
--pistachio: #6E7C4D;
--line: #F0DEE6;
/* Semantic aliases */
--bg-page: var(--milk);
--bg-surface: var(--paper);
--bg-tinted: var(--cream);
--bg-selected: var(--rose-tint);
--text-body: var(--chocolate);
--text-muted: var(--cocoa);
--text-link: var(--rose-link);
--accent: var(--rose);
--accent-hover: var(--rose-deep);
--border-hairline: var(--line);
/* Component fills */
--tag-veg-bg: #EEF2E3;
--tag-season-bg: #FCF0DC;
/* Avatar-initial inks on the tag tints (comment avatars, taf-comments.css).
The base --pistachio / --saffron-deep measure 3.96:1 / 3.28:1 on their own
tint grounds — an AA fail for the 17px-bold initial. These are the same hues
darkened just past 4.5:1 (computed 2026-07-17: veg 4.56:1, season 4.69:1).
Tint BACKGROUNDS stay untouched; rose-tint's ink (--rose-deep, 5.42:1) needs
no companion token. */
--tag-veg-ink: #657246;
--tag-season-ink: #96600F;
/* Footer ground is LIGHT (deeper cream), not chocolate. Chocolate/cocoa ink on
it clears AA (12.4:1 / 5.1:1) — keep new footer ink in that family.
Rationale: inc/footer.php. */
--footer-bg: #F2E0E9;
--footer-text: var(--chocolate);
--footer-label: var(--cocoa);
--footer-legal: var(--cocoa);
--footer-rule: rgba(51, 32, 43, .12);
/* Type — the two self-hosted faces above. --display = Poppins (headings,
eyebrows, buttons, nav, labels, numerals, chips); --sans = Mulish (body). */
--display: 'Poppins', 'Poppins Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--sans: 'Mulish', 'Mulish Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--ui: 'Poppins', 'Poppins Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--fs-hero: 34px;
--fs-h1: 30px;
--fs-h2: 24px;
--fs-h3: 20px;
--fs-h4: 18px;
--fs-body: 18px;
--fs-small: 15px;
--fs-meta: 13px;
--fs-eyebrow: 12px;
/* Weight scale (T0, 2026-07-14). These five ARE the shipped woff2 files —
poppins-400/500/600/700/800, mulish-400/500/600/700. There is no variable
font, so any weight not in this list cannot be rendered as authored.
⛔ DO NOT reintroduce 650. It was used 39x across all seven stylesheets and
it is not a real weight. Per CSS Fonts L4, a requested weight >500 searches
upward first, so 650 already resolved to the 700 file. Measured on the live
page to be sure, rather than trusting the spec:
weight 400 -> 380.75px 600 -> 389.70px
weight 650 -> 395.14px 700 -> 395.14px (byte-identical)
So 650 -> --w-bold (700) moves ZERO pixels; 650 -> --w-semibold (600) would
have visibly LIGHTENED all 39 (389.70 != 395.14). The tokenization audit
recommended 600. It was wrong. */
--w-regular: 400;
--w-medium: 500;
--w-semibold: 600;
--w-bold: 700;
--w-black: 800;
/* ---- The "on-" pair tokens (T0, 2026-07-14). Read this before changing --rose.
`color: #fff` was hardcoded 38 times. They are NOT one thing, and collapsing
them into a single token (as the audit proposed) would be semantics-blind:
each has a DIFFERENT ground, MEASURED with getComputedStyle, and
they must be able to diverge.
🔴 THE AA TRAP THIS FIXES: today a brand-color change silently breaks
contrast on every button on the site. docs/02-design-system.md stakes the
system on "white text on the brand pink = 4.5:1 AA". Lighten --rose and all
27 on-accent uses drop below AA — with no error, no test, nothing. Now there
is exactly ONE place to fix it. If you lighten --rose, you MUST re-check
--color-on-accent against it (and it may have to become --chocolate).
The scrim and dark texts are unaffected by --rose and must NOT follow it. */
--color-on-accent: #fff; /* 27x — text on --rose/--accent: buttons, submits, chips, badges, the #1 rank pill */
--color-on-dark: #fff; /* 3x — text on --chocolate: the jump pill on hover, the search-row CTA */
--color-on-scrim: #fff; /* 8x — text over a photo scrim: hero/mosaic/featband captions. Stays white regardless of brand. */
--lh-body: 1.65;
/* Display leading tuned for Poppins: 1.15 stays open at heading sizes without
going loose on the hero, and matches the per-component display line-heights
below, so the type system shares one value. */
--lh-display: 1.15;
--ls-display: -0.01em;
--ls-eyebrow: 0.14em;
/* Layout */
--maxw: 728px;
--maxw-wide: 1200px;
--pad: 20px;
--hdr-h: 60px;
/* Corner radii — canonical, never hardcode roundness:
surfaces (cards, tiles, images, banners, magnets, search container) = 8px;
controls (buttons, chips, inputs, tags, small thumbs) = 6px;
avatars + category circles = 50%.
Pills are retired — --radius-pill aliases the 6px control radius so existing
pill usages soften automatically. */
--radius: 8px;
--radius-sm: 6px;
--radius-pill: var(--radius-sm); /* retired: controls are soft 6px, not pills */
--radius-round: 50%;
--shadow: 0 1px 2px rgba(51,32,43,.06), 0 6px 24px -8px rgba(51,32,43,.12);
--shadow-hover: 0 2px 4px rgba(51,32,43,.08), 0 10px 28px -8px rgba(51,32,43,.18);
--speed: .15s;
/* Scrims: photo cards that carry white text over the image.
The INK is tokenized (written once, here); the RAMP stays per-band.
Collapsing all three onto one gradient was tried and reverted: it silently
restyled the seasonal hero (home band 1, above the fold) and the feature
band. Tokenizing must move zero pixels — so each band keeps its own stop,
and only the duplicated rgba() ink is deduplicated.
--ink-rgb is --chocolate (#33202B) as channels; rgba() cannot take a hex. */
--ink-rgb: 51, 32, 43;
--scrim-mosaic: linear-gradient(transparent 38%, rgba(var(--ink-rgb), .82)); /* Trending (handoff spec) */
--scrim-seahero: linear-gradient(transparent 45%, rgba(var(--ink-rgb), .8)); /* parity — do not retune */
--scrim-featband: linear-gradient(transparent 30%, rgba(var(--ink-rgb), .78)); /* parity — do not retune */
--scrim-menutile: linear-gradient(transparent 35%, rgba(var(--ink-rgb), .78)); /* Mobile-menu browse tiles (handoff spec) */
/* Spacing scale (T4, 2026-07-14). NAMED, NOT YET RATIONALIZED.
Every distinct padding/margin/gap value already in the theme gets a token at
its CURRENT value, so tokenizing moves zero pixels — css-parity proves it by
construction. 34 tokens is not a scale, it is an inventory. The real scale is
~9 steps, and collapsing 34 into 9 is T6: it MOVES PIXELS and needs sign-off.
T6 MUST NOT remap values inside a rule marked token-frozen. 17 rules build a
44px WCAG tap target, an iOS 16px input floor, or the footer's sticky-ad
clearance out of these very numbers. Snapping those silently breaks
accessibility or ad revenue, and NO automated gate would catch it: in T6
css-parity says 'value changed' and the geometry harness says 'box moved',
both of which are true AND expected. The gates go quiet exactly there. */
--space-2: 2px;
--space-4: 4px;
--space-6: 6px;
--space-8: 8px;
--space-10: 10px;
--space-12: 12px;
--space-14: 14px;
--space-16: 16px;
--space-18: 18px;
--space-20: 20px;
--space-24: 24px;
--space-28: 28px;
--space-32: 32px;
--space-40: 40px;
--space-44: 44px;
--space-48: 48px;
--space-64: 64px;
--space-90: 90px;
/* Font-size scale (T4). VALUE-NAMED ON PURPOSE — do not 'improve' this.
The semantic tokens (--fs-h1 etc.) are RE-DECLARED at min-width:900px, so
mapping a literal 30px onto --fs-h1 is parity on mobile and 42px on DESKTOP.
token-inventory's 'free wins' list actively recommends exactly that trap for
18 sites. Value-named tokens cannot spring it. Collapsing 25 sizes into ~8
steps is T6. */
--fs-10: 10px;
--fs-12: 12px;
--fs-13: 13px;
--fs-14: 14px;
--fs-15: 15px;
--fs-16: 16px;
--fs-16-5: 16.5px;
--fs-17: 17px;
--fs-18: 18px;
--fs-19: 19px;
--fs-20: 20px;
--fs-22: 22px;
--fs-24: 24px;
--fs-26: 26px;
--fs-30: 30px;
--fs-32: 32px;
--fs-36: 36px;
--fs-38: 38px;
--fs-42: 42px;
--fs-54: 54px;
/* Line-height scale (T4), value-named at current values. */
--lh-108: 1.08;
--lh-11: 1.1;
--lh-112: 1.12;
--lh-115: 1.15;
--lh-12: 1.2;
--lh-125: 1.25;
--lh-13: 1.3;
--lh-135: 1.35;
--lh-14: 1.4;
--lh-145: 1.45;
--lh-15: 1.5;
--lh-155: 1.55;
--lh-16: 1.6;
--lh-165: 1.65;
/* Border widths (T4). */
--bw-1: 1px;
--bw-15: 1.5px;
--bw-4: 4px;
/* z-index (T4). The values are ad-hoc — 0,1,2,49,50,55,60,98,99 — and 1001
in the dropdown was chosen to WIN, not to belong to a layer. Named at parity
here; a real semantic scale (--z-header/--z-drawer/--z-modal) is T6. */
--z-0: 0;
--z-1: 1;
--z-2: 2;
--z-49: 49;
--z-50: 50;
--z-55: 55;
--z-60: 60;
--z-98: 98;
--z-99: 99;
/* Opacity (T4). */
--o-6: .6;
--o-7: .7;
--o-75: .75;
--o-8: .8;
--o-85: .85;
--o-9: .9;
/* Motion (T4). --speed (.15s) already existed and was RETYPED as a literal
4x in taf-dropdown.css. .35s is the photo-zoom, a real second duration —
the value the comps specify (design/dist/screens/*.html:146). */
/* Mobile-menu motion (2026-07-17, design_handoff_mobile_menu): .28s is the
sheet's slide-up; .05/.12/.24/.3 are the section stagger delays (with the
pre-existing .18/.35); --ease-out is the comp's decelerate curve. */
--dur-05: .05s;
--dur-12: .12s;
--dur-15: .15s;
--dur-18: .18s;
--dur-2: .2s;
--dur-24: .24s;
--dur-28: .28s;
--dur-3: .3s;
--dur-35: .35s;
/* .5s: the Kit success checkmark stroke-draw (delight B, 2026-07-17). */
--dur-5: .5s;
--ease: ease;
--ease-out: cubic-bezier(.22, .9, .3, 1);
/* Letter-spacing (T4). NOTE the notation duplicates this exposed: .14em and
0.14em were BOTH in the code and are the same value; --ls-eyebrow (0.14em)
already existed and was retyped 6x. Same for .04em / 0.04em. */
--ls--001em: -0.01em;
--ls-04em: 0.04em;
--ls-08em: 0.08em;
--ls-1em: 0.1em;
--ls-14em: 0.14em;
--ls-1px: 1px;
/* Aspect ratios (T4). Notation was inconsistent (4/5 vs '4 / 5' vs 4 / 4.4).
These are content shapes, not a scale — T6 should NOT collapse them. */
--ar-1-1: 1 / 1;
--ar-3-2: 3 / 2;
--ar-4-3: 4 / 3;
--ar-4-5: 4 / 5;
--ar-5-4: 5 / 4;
--ar-6-5: 6 / 5;
--ar-16-9: 16 / 9;
--ar-16-10: 16 / 10;
--ar-4-34: 4 / 3.4;
--ar-4-44: 4 / 4.4;
--ar-24-11: 24 / 11;
/* Pill radius (T4). main.css says 'pills are retired', yet 999px/99px survive
in 5 places — and 2 of those carry a comment saying the HANDOFF sanctioned
them. The token block's claim was simply out of date. One token now. */
--radius-full: 999px;
--radius-99: 99px;
/* Motion easing (T4). 72 uses, exactly ONE value. */
/* z-index, semantic (T4). --z-dropdown was 1001 — a value chosen to WIN,
three orders of magnitude above the sticky header (99) and the scrim (98),
rather than to belong to a layer. Named, at parity. A real layer scale is T6. */
--z-dropdown: 1001;
/* Elevation one-offs (T4). */
--shadow-pill: 0 8px 24px -6px rgba(51, 32, 43, .45);
--shadow-mm-cta: 0 -12px 24px -18px rgba(var(--ink-rgb), .35); /* mobile-menu pinned CTA: the comp's upward lift */
/* Opacity, remaining (T4). */
--o-1: 1;
--o-7: 0.7;
--o-8: 0.8;
/* Line-height, remaining (T4). */
--lh-1: 1;
/* Aspect ratios (T4). Notation was inconsistent — 4/5, '4 / 5' and 4 / 4.4 all
appeared. These are CONTENT SHAPES, not a scale: T6 must not collapse them. */
--ar-1-1: 1 / 1;
--ar-4-3: 4 / 3;
--ar-4-5: 4 / 5;
--ar-5-4: 5 / 4;
--ar-6-5: 6 / 5;
--ar-16-9: 16 / 9;
--ar-16-10: 16 / 10;
--ar-4-34: 4 / 3.4;
--ar-4-44: 4 / 4.4;
--ar-24-11: 24 / 11;
/* Focus ring (T4). Every remaining border-width literal was `outline: 3px` —
the a11y focus ring. It is one decision, in one place, now. */
--focus-ring: 3px;
/* Focus-ring COLOR (WCAG 1.4.11, measured 2026-07-17). Bare --saffron fails the
3:1 minimum for state indicators on every light surface: 2.34:1 vs white,
2.27:1 vs --milk. --saffron-deep (#B87716) measures 3.69:1 vs white — passes.
Focus outlines use THIS token; rating stars, eyebrows and other decorative
saffron keep the bright --saffron on purpose. Do not darken --saffron itself. */
--focus-ring-color: var(--saffron-deep);
/* Star system (D-series rework): saffron anatomy sitewide.
FILLED = --saffron fill + --saffron-deep stroke (bare saffron on cream is
~2.3:1; the deep stroke carries the 3:1 non-text minimum). EMPTY (D1-C
quiet) = --line fill AND stroke — no tint empties, no outline-only
empties, no opacity tricks. Size ladder (D6-A), one tier per surface:
meta 13 (comment-list stars, text-star runs), display 17 (comments
aggregate), interactive 20 (post-meta row, card header row), band 26
(review-band buttons), modal 28 (WPRM rating modal — the plugin inlines
that widget's geometry with !important, so the token is the recorded
tier; no CSS applies it yet). The comment-form widget is the one
interactive surface not on the 20px token: WPRM inlines its sizing,
so it stays on the scale() shim in taf-comments.css. */
--star-meta: 13px;
--star-display: 17px;
--star-interactive: 20px;
--star-band: 26px;
--star-modal: 28px;
/* Ad-placeholder hatching (T4). These 4 colors exist ONLY to draw the dashed
reserved-ad boxes, and the whole block was COPY-PASTED — it appears twice in
main.css (at :582 and :3215). Tokenizing collapses the duplicate to one truth. */
--ad-ph-a: #F7ECF1;
--ad-ph-b: #F3E5EC;
--ad-ph-line: #DFC3D2;
--ad-ph-text: #7D5E6E; /* 4.93:1 on --ad-ph-a, 4.66:1 on --ad-ph-b (was #9A7A8B: 3.29/3.12 — AA fail at 12px) */
/* Translucent surfaces (T4). Every one re-derived --milk/--chocolate by hand
as an rgba() literal, because rgba() cannot take a hex. --ink-rgb/--milk-rgb
are the channel tokens that make them expressible. */
--milk-rgb: 254, 251, 250;
--veil-82: rgba(254, 251, 250, .82);
--veil-80: rgba(254, 251, 250, 0.8);
--veil-55: rgba(254, 251, 250, 0.55);
--veil-0: rgba(254, 251, 250, 0);
--scrim-search: rgba(43, 25, 37, .74);
--scrim-dropdown: rgba(51, 32, 43, .18);
--chocolate-hover: #462D3B;
/* Star glow (delight A): the halo the rating-star thank-you pulse fades
through. A full/zero-alpha PAIR, so the keyframes animate the halo away
without a second hand-derived rgba of --saffron (#E29B32).
SAFFRON since the 2026-08-01 star rework (the glow follows the star
fill; supersedes the 2026-07-17 rose-glow decision, which rode the
short-lived rose-star era). */
--saffron-glow: rgba(226, 155, 50, .5);
--saffron-glow-0: rgba(226, 155, 50, 0);
/* Final T4 tail. */
--lh-1: 1;
--ar-1: 1;
--shadow-underline: inset 0 -2px;
/* CTA-box ink (T4). #F3E4EC is the LIGHT ink on the WPRM 'Tried this recipe?'
box, which is the one chocolate surface left in the system.
⚠️ IT IS NOT --footer-text. The audit's free-win detector matched them by
VALUE, but --footer-text is now var(--chocolate) — the footer was moved OFF
chocolate onto light cream, so its ink was flipped to dark. Substituting
--footer-text here would have rendered the CTA text CHOCOLATE ON CHOCOLATE:
invisible, on 600 recipes. css-parity caught it. Value-equality is not
meaning-equality. */
--cta-ink: #F3E4EC;
/* WPRM ingredient-fade gradient (T4). Eased stops, hand-authored. */
--fade-0: rgba(255, 255, 255, 0);
--fade-08: rgba(255, 255, 255, 0.08);
--fade-30: rgba(255, 255, 255, 0.3);
--fade-72: rgba(255, 255, 255, 0.72);
}
/* == END GENERATED == */
/* ---- Base typography (child sheet loads after Kadence, so it wins ties) ---- */
html { -webkit-text-size-adjust: 100%; }
body {
font-family: var(--sans);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--text-body);
background: var(--bg-page);
}
img { max-width: 100%; height: auto; }
a { color: var(--text-link); text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }
h1, h2, h3, .taf-display {
font-family: var(--display);
font-weight: var(--w-regular);
line-height: var(--lh-display);
letter-spacing: var(--ls-display);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
/* h4 must stay explicitly sized: unset, Kadence's 22px default outranks our h3 and
renders h4 LARGER than h3 (audit). It now equals --fs-body by a review decision.
That is NOT a flat heading: inside post content the winning weight rule is
taf-postfooter.css's `.single-post .taf-post-content :is(h1..h6) { --w-semibold }`,
which outranks the `h4, h5, h6 { --w-regular }` rule further down this sheet — so a
body-copy h4 renders 18px Poppins 600 against 18px Mulish 400 and still reads as a
heading by face + weight. Measured on /lentil-millet-summer-salad/, not assumed. */
h4 { font-size: var(--fs-h4); }
.taf-hero-title { font-size: var(--fs-hero); }
/* H1 = 800, H2 = 600 sitewide. The component title classes are listed explicitly
so a class-specificity rule elsewhere cannot pull them back to a lighter weight.
(.taf-magnetband__title is a deliberate 700 — not listed.) */
h1,
.taf-rhero__title,
.taf-cat-title { font-weight: var(--w-black); }
h2,
.taf-catband__title,
.taf-secthead h2,
.taf-section-head h2 { font-weight: var(--w-semibold); }
.taf-eyebrow {
font-family: var(--display);
font-size: var(--fs-eyebrow);
font-weight: var(--w-bold);
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--text-link);
}
.taf-muted { color: var(--text-muted); }
.taf-small { font-size: var(--fs-small); }
.taf-meta { font-size: var(--fs-meta); color: var(--text-muted); }
[hidden] { display: none !important; }
/* Icons are inline SVG in markup (no icon font). Size to the cap height. */
.taf-icon {
width: 1em;
height: 1em;
display: inline-block;
vertical-align: -0.125em;
fill: currentColor;
flex: none;
}
.taf-icon--lg { width: 1.25em; height: 1.25em; }
/* ---- The paper-liner scallop is RETIRED SITEWIDE:
"no scalloped seams across the site. NOWHERE." The .scallop component and
every call site (6 patterns, post-footer band, subscribe page content) were
removed together; the recipe card's scallop edge was already retired
2026-07-09. Do not reintroduce. ---- */
/* ---- Buttons ---- */
.taf-btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8);
font-family: var(--display); font-size: var(--fs-16); font-weight: var(--w-semibold);
min-height: 48px; padding: var(--space-12) var(--space-20);
border-radius: var(--radius-pill); border: none; cursor: pointer;
text-decoration: none;
transition: background var(--speed) var(--ease), color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.taf-btn--primary { background: var(--accent); color: var(--color-on-accent); }
.taf-btn--primary:hover { background: var(--accent-hover); color: var(--color-on-accent); }
.taf-btn--secondary { background: transparent; color: var(--text-body); border: var(--bw-15) solid var(--chocolate); }
.taf-btn--secondary:hover { border-color: var(--accent); color: var(--accent); }
.taf-btn--ghost { background: transparent; color: var(--accent); min-height: 44px; padding: var(--space-8) var(--space-12); }
.taf-btn--sm { min-height: 40px; padding: var(--space-8) var(--space-16); font-size: var(--fs-15); }
.taf-btn--block { width: 100%; }
/* Chips (category pills) */
.taf-chip {
/* token-frozen: WCAG 2.5.5 — the 44px target is built from padding+size+border in this rule
T6 must NOT remap these values to a scale — tokenize at parity only. */
display: inline-flex; align-items: center; gap: var(--space-6);
min-height: 44px; padding: var(--space-8) var(--space-16); /* 44px tap target */
border-radius: var(--radius-pill); border: var(--bw-15) solid var(--border-hairline);
background: var(--bg-surface); color: var(--text-body);
font-family: var(--display); font-size: var(--fs-15); font-weight: var(--w-semibold); text-decoration: none; white-space: nowrap;
transition: border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
.taf-chip:hover { border-color: var(--accent); color: var(--accent); }
.taf-chip.is-active { background: var(--chocolate); border-color: var(--chocolate); color: var(--milk); }
/* ---- Gutenberg wrapper bridges ----
Pattern markup puts .taf-btn/.taf-chip/.taf-search on the core block WRAPPER
(div.wp-block-button / form.wp-block-search); the element users see is the inner
__link / __input. Bridge the visual onto the inner element. */
.wp-block-button.taf-btn, .wp-block-button.taf-chip { background: transparent; border: none; padding: 0; min-height: 0; }
.wp-block-button.taf-btn .wp-block-button__link,
.wp-block-button.taf-chip .wp-block-button__link {
display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8);
font-family: var(--display); font-weight: var(--w-semibold); text-decoration: none;
border-radius: var(--radius-pill); cursor: pointer;
transition: background var(--speed) var(--ease), color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.wp-block-button.taf-btn .wp-block-button__link { font-size: var(--fs-16); min-height: 48px; padding: var(--space-12) var(--space-20); border: none; }
.wp-block-button.taf-btn--primary .wp-block-button__link { background: var(--accent); color: var(--color-on-accent); }
.wp-block-button.taf-btn--primary .wp-block-button__link:hover { background: var(--accent-hover); color: var(--color-on-accent); }
.wp-block-button.taf-btn--secondary .wp-block-button__link { background: transparent; color: var(--text-body); border: var(--bw-15) solid var(--chocolate); }
.wp-block-button.taf-btn--secondary .wp-block-button__link:hover { border-color: var(--accent); color: var(--accent); }
.wp-block-button.taf-chip .wp-block-button__link {
/* token-frozen: WCAG 2.5.5 — the 44px target is built from padding+size+border in this rule
T6 must NOT remap these values to a scale — tokenize at parity only. */
font-size: var(--fs-15); font-weight: var(--w-semibold); min-height: 44px; padding: var(--space-8) var(--space-16); white-space: nowrap; /* 44px tap target */
background: var(--bg-surface); color: var(--text-body); border: var(--bw-15) solid var(--border-hairline);
}
.wp-block-button.taf-chip .wp-block-button__link:hover { border-color: var(--accent); color: var(--accent); }
.taf-search .wp-block-search__input {
font-size: var(--fs-16); min-height: 48px; padding: var(--space-8) var(--space-12);
background: var(--bg-surface); color: var(--text-body);
border: var(--bw-15) solid var(--border-hairline); border-radius: var(--radius-sm);
}
/* SEARCH focus rings are ROSE — the original searchbar
focus intent was rose (the old inert border-color rule). Rose clears the
3:1 non-text floor on every search ground: 4.5:1 paper, ~4.4:1 milk,
3.98:1 cream. Search-scoped ONLY: the sitewide ring stays
--focus-ring-color (deep saffron) because rose rings on rose buttons/chips
would be invisible. All four search rules below follow this rule. */
.taf-search .wp-block-search__input:focus-visible { outline: var(--focus-ring) solid var(--rose); outline-offset: 1px; }
.taf-search .wp-block-search__button {
font-size: var(--fs-16); font-weight: var(--w-bold); min-height: 48px; padding: var(--space-12) var(--space-20);
background: var(--accent); color: var(--color-on-accent); border: none; border-radius: var(--radius-pill); cursor: pointer;
}
.taf-search .wp-block-search__button:hover { background: var(--accent-hover); }
/* Tags on tiles */
.taf-tag {
display: inline-block; padding: var(--space-2) var(--space-8); border-radius: var(--radius-pill);
font-family: var(--display); font-size: var(--fs-12); font-weight: var(--w-bold); letter-spacing: var(--ls-04em);
background: var(--bg-selected); color: var(--rose-deep);
}
.taf-tag--veg { background: var(--tag-veg-bg); color: var(--pistachio); }
.taf-tag--season { background: var(--tag-season-bg); color: var(--saffron-deep); }
/* ---- Stars ----
Compact text-★ form: SAFFRON (star rework — reverses the
short-lived v0.33.16 rose sweep). Today its only consumers are the recipe
post-meta fallback + count wrapper (inc/recipe-post.php); tile stars are
retired sitewide (D5-C — the tile variants were pruned from this file).
The full 5-star anatomy lives in the WPRM painter near the end of this
file and in wprm-taf2026.css. */
.taf-stars { color: var(--saffron); font-size: var(--star-meta); letter-spacing: var(--ls-1px); white-space: nowrap; }
.taf-stars .n { color: var(--text-muted); font-family: var(--sans); margin-left: var(--space-4); letter-spacing: 0; }
/* ---- Recipe tile (grid card) ---- */
.taf-tile { text-decoration: none; color: inherit; display: block; }
.taf-tile .ph {
border-radius: var(--radius); overflow: hidden; aspect-ratio: var(--ar-4-5);
background: var(--bg-tinted); position: relative;
box-shadow: none;
transition: box-shadow var(--speed) var(--ease);
}
.taf-tile .ph img { width: 100%; height: 100%; object-fit: cover; }
.taf-tile .ph .taf-tag { position: absolute; top: 10px; left: 10px; z-index: var(--z-1); }
.taf-tile:hover .ph,
.taf-tile:focus-visible .ph { box-shadow: var(--shadow-hover); }
.taf-tile h3, .taf-tile .t {
font-family: var(--display); font-weight: var(--w-regular); font-size: var(--fs-17);
/* 1.15: every tile-title markup variant equalized to the majority display leading
(was 1.3 here while .taf-tilecard__title/.taf-mosaic__title sat at 1.15). */
line-height: var(--lh-115); letter-spacing: var(--ls-display); margin-top: var(--space-8);
}
.taf-tile:hover h3, .taf-tile:hover .t,
.taf-tile:focus-visible h3, .taf-tile:focus-visible .t {
text-decoration: underline; text-underline-offset: 3px;
}
/* ---- Grids ---- */
.taf-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); }
.taf-grid-3, .taf-grid-4 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); }
/* ---- Layout scaffolding ---- */
.taf-container { max-width: var(--maxw-wide); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.taf-content { max-width: var(--maxw); margin: 0 auto; }
.taf-section { padding: var(--space-24) var(--pad); max-width: var(--maxw); margin: 0 auto; }
.taf-section--wide { max-width: var(--maxw-wide); }
.taf-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-12); margin-bottom: var(--space-16); }
.taf-section-head .more { font-size: var(--fs-15); font-weight: var(--w-bold); white-space: nowrap; }
/* ---- Ad slots: ALL REMOVED in v0.90.0. The theme owns no ad container ----
Raptive asked us (email, 2026-08-07) to stop targeting theme-owned containers
and to let their spacing logic place content ads dynamically. So the three
recipe-index wrappers (post 42733 block content), the category-archive slot
(inc/category-archive.php) and every rule that reserved, centred or collapsed
them are gone. Their ad code self-reserves a 250px min-height, and that is
what handles CLS on those templates now.
It settles both of the questions that produced it. Nothing of ours ever
forced a 300x250 — the slots set a min-height and no width at all — and the
collapse rule's live `:has()` test really did shift 0 -> 250px at injection.
Deleting the containers answers both by construction rather than by argument.
⛔ Do not re-add a container, a reserve or a collapse rule without agreeing it
with Raptive first. Their placement logic is theirs to tune; a theme box only
constrains what they can serve into it. The --ad-ph-* placeholder tokens stay
in the generated region and nothing uses them now.
Two earlier removals, kept here so their reasoning is not rediscovered:
.taf-ad--sidebar went because Raptive builds its OWN sticky containers inside
the sidebar (.rp-sticky-sidebar) and manages its own reserves — NOT because
it never filled, which was a false headless measurement (live: 9 of 11 units
filled, seven at 300x600). .taf-ad--video and .taf-ad--sticky went with the
containers; nothing emitted either one.
KEPT BELOW, AND LOAD-BEARING: the sticky-footer clearance. Raptive injects
its own adhesion unit and inc/recipe-post.php stamps the body class, so this
reserves the 64px that keeps content and the jump pill clear of it. */
body.taf-has-sticky-ad { padding-bottom: calc(var(--space-64) + env(safe-area-inset-bottom, 0px)); }
/* Recipe anchor (menu.js contract): scroll-margin clears the sticky footer ad
(64px) + jump pill (48px + 8px), which also clears the 60/72px sticky header.
Applies to the #recipe anchor and to WPRM's real card container. */
#recipe,
.wprm-recipe-container { scroll-margin-top: calc(var(--space-64) + var(--space-48)); }
/* FEAST-INDEPENDENCE PIN #2 (2026-08-06): anchor jumps on content headings clear
the 72px sticky header. Today this is FEAST's inline `scroll-margin-top: 80px`
on every content heading (the round-5 jump-to decline recorded that fact);
deactivate Feast and every ToC/anchor jump on ~600 old posts lands under the
header. 80px = the exact value Feast applies, so this is computed-identical
while Feast is active and load-bearing the day it is not.
calc(--space-64 + --space-16) = 80, matching the container idiom above. */
.entry-content :is(h1, h2, h3, h4, h5, h6)[id] { scroll-margin-top: calc(var(--space-64) + var(--space-16)); }
/* ---- Header ---- */
.taf-header {
background: var(--bg-page);
border-bottom: var(--bw-1) solid var(--border-hairline);
padding: 0 var(--pad);
height: var(--hdr-h);
display: flex; align-items: center; justify-content: space-between; gap: var(--space-12);
position: sticky; top: 0; z-index: var(--z-50);
}
.taf-header .taf-brand {
font-family: var(--display); font-size: var(--fs-20); color: var(--text-body);
text-decoration: none; letter-spacing: var(--ls-display);
}
.taf-header .taf-brand .amp { color: var(--accent); }
.taf-logo { height: 34px; width: auto; display: block; }
.taf-header-actions { display: flex; gap: var(--space-8); align-items: center; }
.taf-icon-btn {
width: 44px; height: 44px; border-radius: var(--radius-round);
display: inline-flex; align-items: center; justify-content: center;
background: transparent; border: none; color: var(--text-body);
cursor: pointer; font-size: var(--fs-20);
transition: background var(--speed) var(--ease);
}
.taf-icon-btn:hover { background: var(--bg-tinted); }
/* Desktop nav (hidden on mobile) */
.taf-nav { display: none; }
.taf-nav a {
text-decoration: none; font-weight: var(--w-bold); font-size: var(--fs-15);
color: var(--text-body); transition: color var(--speed) var(--ease);
}
.taf-nav a:hover { color: var(--accent); }
.taf-nav a.is-seasonal { color: var(--accent); }
/* ---- Mobile menu drawer (menu.js contract: [data-taf-menu] + .is-open,
toggle = [data-taf-menu-toggle], body gets .taf-menu-open) ---- */
[data-taf-menu] {
display: none;
position: fixed;
top: var(--hdr-h); left: 0; right: 0; bottom: 0;
z-index: var(--z-49);
background: var(--bg-page);
border-top: var(--bw-1) solid var(--border-hairline);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
[data-taf-menu].is-open { display: block; }
body.taf-menu-open { overflow: hidden; }
.taf-menu-search { padding: var(--space-16) var(--pad) var(--space-4); }
.taf-menu-list { padding: var(--space-8) var(--space-8) var(--space-8); }
.taf-menu-list a {
display: flex; justify-content: space-between; align-items: center;
padding: var(--space-12) var(--space-12); text-decoration: none;
color: var(--text-body); font-family: var(--display); font-weight: var(--w-semibold); font-size: var(--fs-17);
border-bottom: var(--bw-1) solid var(--border-hairline);
}
.taf-menu-list a:last-child { border-bottom: none; }
.taf-menu-list a.is-seasonal { color: var(--accent); }
.taf-menu-list .taf-icon { color: var(--text-muted); }
.taf-menu-cta { padding: var(--space-12) var(--pad) var(--space-20); }
/* ---- Search field ---- */
.taf-search {
display: flex; align-items: center; gap: var(--space-8);
background: var(--bg-surface); border: var(--bw-15) solid var(--border-hairline);
border-radius: var(--radius-pill); padding: 0 var(--space-8) 0 var(--space-16); height: 52px;
box-shadow: var(--shadow);
}
.taf-search--flat { box-shadow: none; }
.taf-search input {
/* token-frozen: iOS Safari zooms an input whose font-size is under 16px
T6 must NOT remap these values to a scale — tokenize at parity only. */
flex: 1; border: none; outline: none; background: transparent;
font-family: var(--sans); font-size: var(--fs-16); /* 16px stops iOS zoom */
color: var(--text-body); min-width: 0;
}
.taf-search input::placeholder { color: var(--text-muted); }
.taf-search .go {
/* token-frozen: WCAG 2.5.5 — the 44px target is built from padding+size+border in this rule
T6 must NOT remap these values to a scale — tokenize at parity only. */
height: 44px; padding: 0 var(--space-18); border-radius: var(--radius-pill); border: none; /* 44px tap target */
background: var(--accent); color: var(--color-on-accent); font-weight: var(--w-bold); font-size: var(--fs-15); cursor: pointer;
}
.taf-search .go:hover { background: var(--accent-hover); }
/* ---- Breadcrumbs (Yoast output, wrapped by inc/breadcrumbs.php) ---- */
.taf-breadcrumbs { font-size: var(--fs-meta); color: var(--text-muted); }
.taf-breadcrumbs a { color: var(--text-muted); text-decoration: none; }
.taf-breadcrumbs a:hover { color: var(--accent); }
.taf-breadcrumbs .sep { margin: 0 var(--space-4); color: var(--border-hairline); }
/* ---- Sticky jump pill (mobile thumb zone; menu.js: .taf-jump-pill) ---- */
.taf-jump-pill {
position: fixed; bottom: 76px; left: 50%; transform: translateX(-50%);
z-index: var(--z-60);
background: var(--chocolate); color: var(--milk);
border-radius: var(--radius-pill); padding: var(--space-12) var(--space-20);
font-weight: var(--w-bold); font-size: var(--fs-15); text-decoration: none;
box-shadow: var(--shadow-pill);
display: inline-flex; gap: var(--space-8); align-items: center;
}
.taf-jump-pill:hover { color: var(--color-on-dark); }
/* ---- Callouts (hairline border, no left stripe) ---- */
.taf-callout {
background: var(--bg-tinted);
border: var(--bw-1) solid var(--border-hairline);
border-radius: var(--radius);
padding: var(--space-16) var(--space-20); margin: var(--space-20) 0;
}
.taf-callout .taf-eyebrow { color: var(--saffron-deep); }
.taf-callout p { margin-top: var(--space-4); font-size: var(--fs-16); }
.taf-callout--why .taf-eyebrow { color: var(--rose-deep); }
/* The "why" callout keeps the signature rose left-accent bar instead of a full
box outline (cream bg + 8px radius from .taf-callout stay). */
.taf-callout--why { border: none; border-left: var(--bw-4) solid var(--rose); }
/* ---- Email lead magnet (Kit) ---- */
.taf-magnet {
background: var(--rose-tint); /* rose-tint ground, matching the home magnet */
border-radius: var(--radius);
padding: var(--space-24) var(--space-20) var(--space-24);
position: relative;
margin: var(--space-24) 0 var(--space-8);
text-align: center;
}
.taf-magnet .taf-eyebrow { color: var(--rose-deep); }
.taf-magnet h3 { font-size: var(--fs-24); margin: var(--space-8) 0 var(--space-4); font-weight: var(--w-semibold); }
.taf-magnet p { font-size: var(--fs-15); color: var(--text-muted); max-width: 42ch; margin: 0 auto; }
.taf-magnet form { display: flex; gap: var(--space-8); margin-top: var(--space-16); }
.taf-magnet input[type="email"] {
/* token-frozen: iOS Safari zooms an input whose font-size is under 16px
T6 must NOT remap these values to a scale — tokenize at parity only. */
flex: 1; height: 48px; border-radius: var(--radius-pill);
border: var(--bw-15) solid var(--border-hairline);
background: var(--bg-surface); padding: 0 var(--space-18);
font-size: var(--fs-16); /* 16px stops iOS zoom */
min-width: 0;
}
.taf-magnet .fine { font-size: var(--fs-12); color: var(--text-muted); margin-top: var(--space-8); }
/* Kit's ASYNC-INJECTED form (formkit) in the magnet band: Kit lays the
Name/Email fields in a flex row and its own stacking never fires inside
our container — measured 136px-wide side-by-side fields at 390
(2026-08-11, /indian-dessert/). Stack them full-width on phones.
Sidebar precedent (.taf-sb-kit): !important beats Kit's [data-uid]
per-form sheet. */
@media (max-width: 699px) {
.taf-magnet .formkit-fields { flex-direction: column !important; }
.taf-magnet .formkit-field { flex: 1 1 100% !important; width: 100% !important; }
.taf-magnet .formkit-input { width: 100% !important; }
}
/* ---- Author bio ---- */
.taf-bio {
display: flex; gap: var(--space-16); align-items: flex-start;
background: var(--bg-surface); border: var(--bw-1) solid var(--border-hairline);
border-radius: var(--radius); padding: var(--space-16); margin: var(--space-24) 0;
}
.taf-bio img { width: 64px; height: 64px; border-radius: var(--radius-round); object-fit: cover; flex-shrink: 0; }
.taf-bio h4 { font-family: var(--display); font-size: var(--fs-17); font-weight: var(--w-regular); }
.taf-bio p { font-size: var(--fs-15); color: var(--text-muted); margin-top: var(--space-4); line-height: var(--lh-15); }
.taf-bio a { font-size: var(--fs-15); font-weight: var(--w-bold); }
/* ---- FAQ (details/summary) ---- */
.taf-faq details { border-bottom: var(--bw-1) solid var(--border-hairline); }
.taf-faq summary {
padding: var(--space-12) 0; cursor: pointer;
font-weight: var(--w-bold); font-size: var(--fs-16); list-style: none;
display: flex; justify-content: space-between; align-items: center; gap: var(--space-12);
}
.taf-faq summary::-webkit-details-marker { display: none; }
.taf-faq summary .taf-icon { color: var(--text-muted); transition: transform var(--speed) var(--ease); }
.taf-faq details[open] summary .taf-icon { transform: rotate(180deg); }
.taf-faq details > div { padding: 0 0 var(--space-16); font-size: var(--fs-16); color: var(--text-body); }
/* ---- Footer (light ground, chocolate text, 4-col grid: brand blurb +
Recipes / Seasonal / About). ---- */
.taf-footer {
/* token-frozen: clears the sticky ad — ad viewability is revenue
T6 must NOT remap these values to a scale — tokenize at parity only. */
background: var(--footer-bg); color: var(--footer-text);
padding: var(--space-44) var(--pad) var(--space-90); /* bottom clears the sticky ad */
margin-top: var(--space-40);
}
.taf-footer__inner { max-width: var(--maxw-wide); margin: 0 auto; }
.taf-footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-24); }
.taf-footer .taf-brand { font-family: var(--display); font-size: var(--fs-20); color: var(--footer-text); margin: 0; }
.taf-footer .taf-blurb { font-size: var(--fs-15); color: var(--footer-label); margin: var(--space-8) 0 0; max-width: 30ch; }
.taf-footer__logo { display: block; width: auto; height: auto; max-width: 190px; margin: 0 0 var(--space-12); }
/* Column headings are (heading order) styled as small uppercase labels. */
.taf-footer h2 {
font-family: var(--display); font-size: var(--fs-12); font-weight: var(--w-bold);
letter-spacing: var(--ls-14em); text-transform: uppercase;
color: var(--footer-label); margin: 0 0 var(--space-12);
}
.taf-footer a { color: var(--footer-text); text-decoration: none; }
.taf-footer a:hover { color: var(--rose); text-decoration: underline; text-underline-offset: 3px; }
.taf-footer__col a { display: block; padding: var(--space-4) 0; font-size: var(--fs-15); } /* ~33px targets — DELIBERATE WAIVER: the 44px house floor is waived for footer links (the 10px padding read as too much air); WCAG AA 2.5.8 (24px) still clears. Do not "fix" back to 44 without asking. */
.taf-footer .legal { margin-top: var(--space-32); padding-top: var(--space-20); border-top: var(--bw-1) solid var(--footer-rule); font-size: var(--fs-12); color: var(--footer-legal); }
@media (min-width: 900px) {
/* logo far left, the 3 nav columns clustered on the right (per reference) */
.taf-footer__grid { grid-template-columns: 1fr auto auto auto; column-gap: var(--space-48); row-gap: var(--space-24); align-items: start; }
}
/* ---- Utilities ---- */
.taf-hr { border: none; border-top: var(--bw-1) solid var(--border-hairline); margin: var(--space-24) 0; }
.taf-center { text-align: center; }
/* Focus visibility: 3px deep-saffron ring everywhere (--focus-ring-color, WCAG 1.4.11) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
outline: var(--focus-ring) solid var(--focus-ring-color);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
transition: none !important;
animation: none !important;
scroll-behavior: auto !important;
}
}
/* ---- Desktop (900px) ---- */
@media (min-width: 900px) {
/* == GENERATED: tokens — do not edit by hand. Source: design/tokens.json (scripts/build-tokens.py) == */
:root {
--fs-hero: 52px;
--fs-h1: 42px;
--fs-h2: 30px;
--fs-h3: 22px;
--pad: 32px;
--hdr-h: 72px; /* 72px desktop header */
}
/* == END GENERATED == */
.taf-section { padding: var(--space-40) var(--pad); }
/* Adjacent plain sections stacked 40+40 = 80px voids (recipe index, measured
2026-07-17) while ad-flanked pairs read 40 — collapse the second section's
top so every boundary lands on the 40 beat. Both :not()s matter: the flush
ad wrapper is itself a .taf-section--wide, and zeroing around it would
crush the ad slot's breathing room. */
.taf-section--wide:not(.taf-section--flush) + .taf-section--wide:not(.taf-section--flush) { padding-top: 0; }
.taf-grid-3 { grid-template-columns: repeat(3, 1fr); gap: var(--space-20); }
.taf-grid-4 { grid-template-columns: repeat(4, 1fr); gap: var(--space-20); }
.taf-logo { height: 42px; }
.taf-nav { display: flex; gap: var(--space-24); align-items: center; }
[data-taf-menu-toggle] { display: none; }
}
/* ======================
Recipe post template. Markup: inc/recipe-post.php.
====================== */
/* ---- Meta row (directly after the H1) ----
The H1→rating-row gap is carried by .entry-header's margin-bottom in the
scaffold block below, not here. */
.taf-post-meta { margin: 0 0 var(--space-16); }
/* (.taf-post-meta__rating row retired 2026-08-01 — the rating now lives
inside the byline line; actions in .taf-post-meta__actions-row.) */
.taf-post-meta__stars { display: inline-flex; align-items: center; gap: var(--space-4); }
.taf-post-meta__stars .taf-stars { font-size: var(--fs-15); }
/* WPRM display stars inside the meta row: TEXT size only (the "4.7 · 9
ratings" line — WPRM's star SVGs size by width/height attrs, not
font-size). Star color/shape comes from the sitewide saffron painter
near the end of this file; glyph geometry (20px interactive tier,
tight tap boxes) lives in wprm-taf2026.css §16. */
.taf-post-meta__stars .wprm-recipe-rating { display: inline-flex; align-items: center; font-size: var(--fs-15); }
/* (.taf-post-meta__facts retired — Option A, no
time/servings up top; the card's facts strip owns them.) */
/* Header layout, Option F (final): one row = avatar ·
[name over date, stacked to the avatar's height] · buttons right-pinned
(desktop-only; the pill covers phones). Stars on their own line below,
sitting above the Grow share row; the rating div is server-omitted when
unrated, so nothing reflows — the header is simply one row shorter. */
.taf-post-meta__byline { display: flex; align-items: center; gap: var(--space-10, 10px); margin: 0; }
.taf-post-meta__who { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
/* Byline type: 13 -> 15 (16 at >=900, in the desktop block below). User
2026-08-04. Two things were wrong with 13px --fs-meta here:
• it was the ONLY header element that did not step at desktop — H1 goes
30 -> 42, h2 24 -> 30, and the rating TEXT beside it 15 -> 16, while the
byline stayed 13, so the desktop header was proportionally the most
imbalanced (42px H1 against 13px attribution);
• it rendered SMALLER than "4.4 · 7 ratings" sitting directly beneath it in
the same block — the author's name was smaller than her rating count.
13px is --fs-meta, the tier for INCIDENTAL chrome (breadcrumbs, comment
dates). Author attribution and the Updated date are primary trust signals on
a recipe post, not chrome. These now ride the rating text's existing 15/16
ladder rather than introducing a new value, so the whole meta block reads as
one tier at each width. Name and date move together — their equal-size
relationship is unchanged, only the tier. */
.taf-post-meta__name { font-size: var(--fs-15); line-height: var(--lh-15, 1.5); }
.taf-post-meta__date { font-size: var(--fs-15); line-height: var(--lh-14, 1.4); }
.taf-post-meta__actions { display: inline-flex; align-items: center; gap: var(--space-8); margin-left: auto; }
.taf-post-meta__rating { display: flex; align-items: center; margin-top: var(--space-8); }
/* Jump + Watch video show at EVERY width now — the fixed
mobile pill is retired, so these two are the only jump affordance and must
not be desktop-only. Below 900 they cannot share the byline's line (avatar +
name/date + two pills overflows 390 badly), so the byline wraps and the
action pair takes its own full-width row directly beneath — still "pinned to
the header", just on the header's second line. */
.taf-post-meta__jump { display: inline-flex; }
@media (max-width: 899.98px) {
.taf-post-meta__byline { flex-wrap: wrap; }
.taf-post-meta__actions {
width: 100%;
margin-left: 0;
margin-top: var(--space-10, 10px);
}
/* 44px floor: these were desktop-only pills at 41px tall, which was fine as a
secondary affordance beside a 49px thumb-zone pill. With the pill retired
they ARE the mobile jump control, so they have to clear WCAG 2.5.5 on their
own. Measured 41 -> 44. */
.taf-post-meta__actions { align-items: stretch; }
.taf-post-meta__actions .taf-btn {
flex: 1 1 0;
justify-content: center;
min-height: var(--space-44);
/* nowrap is load-bearing, not tidiness: sharing the row two-up leaves each
pill ~170px, and "Jump to recipe" + its arrow wrapped to two lines there
— measured 66px tall against Watch video's 44, so the pair rendered
visibly mismatched. Held on one line both land at 44. */
white-space: nowrap;
padding-left: var(--space-10, 10px);
padding-right: var(--space-10, 10px);
}
}
/* Avatar: 40px at EVERY width. Was 36 mobile / 40 desktop,
and the mobile 36 became the odd one out when name+date went 13 -> 15/16
just above: the byline text stack grew to 43.5px and a 36px circle no
longer anchored it — the avatar read small against its own two lines.
40 matches the stack and matches desktop, so there is now one avatar size.
No upscaling risk: recipe-post.php already requests get_avatar(..., 64).
The >=900 override that used to raise it is now redundant and is gone. */
.taf-post-meta__byline .taf-post-meta__avatar {
width: 40px; height: 40px; border-radius: var(--radius-round);
object-fit: cover; flex-shrink: 0;
}
.taf-post-meta__byline p { margin: 0; }
.taf-post-meta__byline a { font-weight: var(--w-bold); }
/* Equal-height meta-row buttons: the bordered secondary (Watch video) rendered 3px
taller than the primary Jump button — same 8px padding PLUS its 1.5px borders.
Compensate the vertical padding by the border width; the primary never moves. */
.taf-post-meta__actions .taf-btn--secondary.taf-btn--sm {
padding-top: calc(var(--space-8) - var(--bw-15));
padding-bottom: calc(var(--space-8) - var(--bw-15));
}
/* ---- Desktop rail (2026-08-01 sidebar handoff, inc/sidebar.php) ----
Five stacked widgets: bio · trusted-site button · Kit magnet · popular ·
seasonal. Kadence's primary sidebar, 320px grid column (see the single-post
grid rule below). NOT sticky — the handoff specs a static rail (the old
rail's `position: sticky; top: calc(var(--hdr-h) + 16px)` was removed here;
restore that one line to revert). Hidden below 900px: Kadence stacks the
sidebar UNDER the content there and the handoff renders no mobile rail. */
.taf-single-sidebar {
display: none;
flex-direction: column;
gap: 36px; /* token-exempt: handoff rail rhythm — 36px widget gap sits between the 32/40 spacing steps */
}
/* Card shells: cream (bio, Kit magnet) and ruled paper (popular, seasonal). */
.taf-sb-card { border-radius: var(--radius); }
.taf-sb-card--cream { background: var(--bg-tinted); }
.taf-sb-card--paper { background: var(--bg-surface); border: var(--bw-1) solid var(--border-hairline); }
/* W1: author bio. */
.taf-sb-bio {
text-align: center;
padding: 26px var(--space-24) var(--space-24); /* token-exempt: comp pad — 26px top, no spacing step */
}
.taf-sb-bio__photo {
display: block; width: 116px; height: 116px; margin: 0 auto; /* comp portrait — 116px circle */
border-radius: var(--radius-round); object-fit: cover;
border: 3px solid var(--paper); /* token-exempt: comp portrait ring — 3px sits between --bw-15 and --bw-4 */
box-shadow: var(--shadow);
}
.taf-sb-bio__hi {
font-family: var(--display); font-weight: var(--w-semibold); font-size: var(--fs-20);
line-height: var(--lh-115); color: var(--text-body);
margin: var(--space-14) 0 var(--space-8);
}
.taf-sb-bio__copy {
font-family: var(--sans); font-size: var(--fs-15); line-height: var(--lh-16);
color: var(--text-muted); margin: 0;
}
/* Shared "more" link (bio + seasonal footer): 15/700 rose-link + 15px arrow.
Rail-scoped: Kadence's content.min.css paints `.widget-area a:where(...)`
at 0,1,1 (chocolate) and `:hover` at 0,2,1 — bare .taf-sb-* class rules
LOSE (verified rendered 2026-08-01). The .taf-single-sidebar prefix wins. */
.taf-single-sidebar .taf-sb-more {
display: inline-flex; align-items: center; gap: var(--space-6);
font-family: var(--sans); font-size: var(--fs-15); font-weight: var(--w-bold);
color: var(--rose-link); text-decoration: none;
}
.taf-sb-bio__more { margin-top: var(--space-12); }
.taf-single-sidebar .taf-sb-more:hover,
.taf-single-sidebar .taf-sb-more:focus-visible { color: var(--rose-deep); }
.taf-sb-more .taf-pf-arrow { width: 15px; height: 15px; flex: none; }
/* W2: trusted-site button — pixel-matches the recipe card's Pin secondary
button (wprm-taf2026.css §7: paper fill, 1.5px rose border, rose-deep text,
46px action height, 12/16 pad, 13/700 uppercase .08em, 17px icon, rose-tint
hover). Wiring is production's exact mechanism: a static Google Preferred
Sources link (Feast's feast_trusted_google_source block) — no JS. */
.taf-single-sidebar .taf-sb-trust {
display: inline-flex; width: 100%; align-items: center; justify-content: center;
gap: var(--space-8);
min-height: 46px; /* token-exempt: V2 action height (matches the card's Print/Pin) */
padding: var(--space-12) var(--space-16);
border-radius: var(--radius-pill);
border: var(--bw-15) solid var(--rose);
background: var(--paper); color: var(--rose-deep);
font-family: var(--display); font-size: var(--fs-13); font-weight: var(--w-bold);
text-transform: uppercase; letter-spacing: var(--ls-08em);
white-space: nowrap; text-decoration: none;
transition: background var(--speed) var(--ease);
}
.taf-single-sidebar .taf-sb-trust:hover,
.taf-single-sidebar .taf-sb-trust:focus-visible { background: var(--rose-tint); color: var(--rose-deep); }
.taf-sb-trust .taf-sb-gicon { width: 17px; height: 17px; flex: none; }
/* W3: email magnet (Kit form 9655435 — same embed as the magnet bands; the
.formkit-* selectors restyle Kit's async-injected markup exactly the way
.taf-magnetband__form does, and may drift with Kit updates the same way). */
.taf-sb-kit {
padding: var(--space-24) 22px 26px; /* token-exempt: comp pad — 22px sides / 26px bottom, no spacing steps */
}
.taf-sb-kit__eyebrow { margin: 0; color: var(--rose-link); }
.taf-sb-kit__title {
font-family: var(--display); font-weight: var(--w-semibold); font-size: var(--fs-22);
line-height: var(--lh-12); color: var(--text-body);
margin: var(--space-10) 0 var(--space-8);
}
.taf-sb-kit__pitch {
font-family: var(--sans); font-size: var(--fs-15); line-height: var(--lh-16);
color: var(--text-muted); margin: 0;
}
.taf-sb-kit__form { margin-top: var(--space-16); }
.taf-sb-kit__form .formkit-form,
.taf-sb-kit__form form { max-width: none; margin: 0; padding: 0; background: transparent; border: none; box-shadow: none; }
.taf-sb-kit__form .formkit-fields,
.taf-sb-kit__form [data-element="fields"],
.taf-sb-kit__form .seva-fields { display: flex; flex-direction: column; gap: var(--space-10); margin: 0; }
.taf-sb-kit__form .formkit-field { flex: 0 0 auto !important; min-width: 0 !important; margin: 0 !important; }
.taf-sb-kit__form .formkit-input,
.taf-sb-kit__form input[type="email"],
.taf-sb-kit__form input[type="text"] {
width: 100%;
/* token-frozen: iOS Safari zooms an input whose font-size is under 16px;
44px is the WCAG tap-target floor. The handoff's 44px/15px maps onto the
sitewide constraint pair — constraint-check asserts both. */
height: var(--space-44); font-size: var(--fs-16);
border-radius: var(--radius-sm) !important;
border: var(--bw-1) solid #E5C8D6; /* token-exempt: sidebar input-border constant — mirrors the V2 #DFC3D2 rule treatment */
background: var(--paper); padding: 0 var(--space-14); box-shadow: none;
}
/* Kit's embedded per-form stylesheet ships `.formkit-form[data-uid]
.formkit-submit { display:inline-block }` (0,2,1) and padded spans — they
beat plain descendant rules and wrapped the button to two lines (verified
rendered 2026-08-01). display/padding carry !important like width does. */
.taf-sb-kit__form .formkit-submit,
.taf-sb-kit__form button[type="submit"],
.taf-sb-kit__form button {
width: 100% !important; flex: 0 0 auto !important;
display: flex !important; align-items: center; justify-content: center; gap: var(--space-8);
min-height: 46px; /* token-exempt: V2 action height (matches the card's Print/Pin) */
background: var(--rose); color: var(--color-on-accent);
font-family: var(--display); font-size: var(--fs-13); font-weight: var(--w-bold);
text-transform: uppercase; letter-spacing: var(--ls-08em);
padding: var(--space-12) var(--space-16);
border-radius: var(--radius-sm) !important; border: none; cursor: pointer;
white-space: nowrap; transition: background var(--speed) var(--ease);
}
.taf-sb-kit__form .formkit-submit:hover,
.taf-sb-kit__form button:hover { background: var(--rose-deep); }
.taf-sb-kit__form .formkit-submit > div,
.taf-sb-kit__form .formkit-submit span { margin: 0 !important; padding: 0 !important; color: var(--color-on-accent); }
.taf-sb-kit__form .taf-sb-plane { width: 17px; height: 17px; flex: none; }
.taf-sb-kit__form .formkit-header,
.taf-sb-kit__form .formkit-subheader,
.taf-sb-kit__form .formkit-guarantee,
.taf-sb-kit__form [data-element="header"],
.taf-sb-kit__form [data-element="subheader"],
.taf-sb-kit__form [data-element="guarantee"],
.taf-sb-kit__form .formkit-powered-by-convertkit-container,
.taf-sb-kit__form .formkit-powered-by-convertkit { display: none !important; }
/* Kit ships a 30px margin under the