/* * Farmhouse Butter — main stylesheet * * Ported from the approved homepage mockup (farmhousebutter-mockups/mockups/homepage.html). * Two deliberate changes from the mockup: * 1. Nav selectors use WordPress's native menu classes (.menu-item-has-children, * .sub-menu) rather than the mockup's .has-sub / .submenu, so no custom * Walker_Nav_Menu is needed. * 2. The hero background image comes in as the --hero-bg custom property, set inline * by fhb_render_hero() in inc/block-renderers.php — CSS files can't call * get_template_directory_uri(). (This said "front-page.php" until 2026-08-24; * that template's hardcoded fallback was dropped on 2026-08-17 and it now has no * hero reference at all.) */ :root{ --green:#1f4d34; /* deep forest green (logo bg) */ --green-900:#143423; /* darker green */ --green-700:#295d40; /* lighter green for hover */ --gold:#d4a53a; /* warm gold / mustard rule lines */ --gold-600:#bd8f27; /* deeper gold for text on cream */ --cream:#f7f2e7; /* off-white / cream background */ --cream-2:#efe7d5; /* slightly deeper cream panel */ --ink:#2a2823; /* warm near-black body text */ --ink-soft:#5b564c; /* muted body text */ --white:#ffffff; --shadow:0 18px 45px -20px rgba(20,52,35,.45); --shadow-sm:0 8px 24px -14px rgba(20,52,35,.4); /* Offset-highlight sizes — the hard-shadow counterpart to the two blurred shadows above, used only by is-style-fhb-highlight-* (see CARD HIGHLIGHT). Fluid, so the block scales with the card rather than needing a breakpoint: 18px on a desktop viewport, ~11px at 680px. */ --fhb-hl-sm:clamp(6px,1.2vw,12px); --fhb-hl-md:clamp(8px,1.6vw,18px); --maxw:1180px; --serif:"Playfair Display",Georgia,serif; --serif-soft:"Cormorant Garamond",Georgia,serif; --sans:"Montserrat",-apple-system,Segoe UI,Roboto,sans-serif; /* Display face for eyebrows and badges only — never for running text. One weight (400), no italic; see fhb_fonts_url() in functions.php. */ --uncial:"Uncial Antiqua",Georgia,serif; /* ---- core block support (see the three rules below) ---- Named measures, so theme.json and this file cannot drift apart. */ --fhb-gutter:clamp(20px,5vw,40px); /* was inline in .wrap */ --fhb-wide:var(--maxw); /* == theme.json settings.layout.wideSize */ --fhb-content:760px; /* == theme.json settings.layout.contentSize */ } /* ===================================================================== CORE BLOCK SUPPORT — the three rules Added 2026-08-22 so an editor can use core WordPress blocks alongside the theme's own and have them render on brand at any nesting depth. 1. CONTEXT TRAVELS BY CUSTOM PROPERTY, NOT BY SELECTOR. Custom properties inherit through arbitrary nesting for free, so `.section--green{--fhb-heading:var(--cream)}` reaches an h4 six Groups deep with no selector work and no specificity risk. Every colour that depends on which band it sits in is a token: --fhb-heading, --fhb-body, --fhb-link. Never write `.section--green .some-thing{color:…}` again. 2. SPACING INSIDE CORE CONTAINERS IS CORE'S JOB. .wrap is plain PHP markup, so the theme owns its rhythm. A core/group gets core's own layout CSS, driven by theme.json settings.spacing.blockGap. If this file also wrote nested flow rules they would beat core's (0,1,0) and the Block spacing control would silently do nothing — the same class of bug as shipping align-wide with no .alignwide CSS. So: NO nested flow rules. Set the default in theme.json styles.spacing.blockGap instead. 3. DEFAULTS GO IN :where(); VARIANTS KEEP REAL SPECIFICITY. The eyebrow bug (see the note further down) and the identical, unfixed lead-paragraph bug both happened because a *default* was written at higher specificity than a *variant*. The fix is to drop the default to (0,0,0), not to bump the variant — bumping is what the eyebrow patch did, and it has to be "kept in step by hand" forever. Corollary: new rules stay in PHYSICAL properties (margin-left, not margin-inline). This file is 100% physical; mixing the two resolves by declaration order across separate properties and is a footgun for no gain. ===================================================================== */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;font-family:var(--sans);color:var(--ink);background:var(--cream); font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} /* The `hidden` attribute has to beat a component's own `display`. [hidden]{display:none} lives ONLY in the UA stylesheet, and any author declaration beats the UA origin regardless of specificity. So `.recipe{display:flex}` silently defeated `card.hidden = true`, and the recipe filter hid nothing from the day it shipped (both arrived in cc70ed6, 2026-08-19). Two more were broken the same way and for the same reason: the filter bar ships `hidden` so it is absent without JavaScript, but `.rfilter{display:flex}` revealed it anyway — inert controls, the exact failure its own comment claims to prevent — and `.rfilter__badge{display:grid}` left the checked-count badge showing a literal "0". !important, not source order. Ordering this above the components would work today and then break the moment someone adds a `display` below it, with no error and nothing to see. Hidden means hidden; it is not a cascade opinion. This is the one rule in the file that is allowed to say so. */ [hidden]{display:none !important} /* These three are a RESET, not a design decision — everything downstream is meant to win. :where() puts them at (0,0,0), so a component rule, a block style variation or an editor's own output all beat them without a fight. The author sheet still beats the UA sheet at (0,0,0). */ :where(a){color:inherit;text-decoration:none} :where(h1,h2,h3,h4,h5,h6){font-family:var(--serif);font-weight:600;line-height:1.12; margin:0;color:var(--fhb-heading,var(--green))} :where(p){margin:0 0 1rem} /* Heading sizes, also at (0,0,0). Every existing component rule (.hero h1, .product__body h3, .recipe__body h3, .page-content h2 …) keeps winning untouched. This is what gives a heading NESTED inside a core Group or Column a sensible size — before this it fell back to the UA's 1.5em, because the only size rule was `.section > .wrap > .wp-block-heading`. Deliberate consequence: a top-level h2 in a section keeps the larger clamp(1.9rem,4vw,3rem); the same h2 wrapped in a Group drops to the size below. That reads as a sub-heading, which is the intent. */ :where(h1){font-size:clamp(2.2rem,5vw,3.2rem)} :where(h2){font-size:clamp(1.7rem,3.2vw,2.4rem)} :where(h3){font-size:1.5rem} :where(h4){font-size:1.15rem} :where(h5){font-size:1rem} :where(h6){font-family:var(--sans);font-size:.85rem;letter-spacing:.1em;text-transform:uppercase} .wrap{max-width:var(--fhb-wide);margin:0 auto;padding:0 var(--fhb-gutter)} /* .eyebrow is used by the PHP templates; .is-style-fhb-eyebrow is the core-block style variation registered in inc/blocks.php. Same treatment, two entry points. Uncial Antiqua as of 2026-08-22, which finally settles the contradiction brand-voice.md has carried since the start: it specified an uncial for eyebrows and badges while nothing in the theme ever loaded one. Three values changed with the face, and none of them is cosmetic: · font-weight 700 → 400. The family ships one weight. Asking for 700 gets a browser-synthesised bold, which smears an already-decorative face. · letter-spacing .22em → .12em, the reference mockup's value. Uncial letterforms are wide and irregular to begin with; Montserrat's tracking pulled them apart into individual glyphs. · .74rem → .78rem, because the face reads smaller than Montserrat at a given size — its capitals sit lower and its strokes are lighter. */ .eyebrow, .is-style-fhb-eyebrow{ font-family:var(--uncial);font-size:.78rem;font-weight:400;letter-spacing:.12em; text-transform:uppercase;color:var(--fhb-eyebrow,var(--gold-600));margin:0 0 .9rem } .eyebrow.on-dark{color:var(--gold)} /* The colour is a TOKEN, not a literal. It was var(--ink-soft) at (0,1,0), which beats the (0,0,0) prose default, so a Lead paragraph on a dark band rendered warm grey on deep green — about 1.3:1. Latent until now because every use was on a light band, where --fhb-body IS --ink-soft and the output is unchanged. */ .is-style-fhb-lead{font-size:1.18rem;color:var(--fhb-body,var(--ink-soft));font-family:var(--serif-soft)} .screen-reader-text{position:absolute;left:-999px;width:1px;height:1px;overflow:hidden} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:.55em;font-family:var(--sans); font-weight:600;font-size:.86rem;letter-spacing:.05em;text-transform:uppercase; padding:.9em 1.9em;border-radius:2px;cursor:pointer;border:1.5px solid transparent; transition:.2s ease;white-space:nowrap } .btn-gold{background:var(--gold);color:var(--green-900)} .btn-gold:hover{background:#e4b74d;transform:translateY(-1px)} .btn-green{background:var(--green);color:var(--cream)} .btn-green:hover{background:var(--green-700)} .btn-ghost{background:transparent;color:var(--cream);border-color:rgba(247,242,231,.55)} .btn-ghost:hover{border-color:var(--gold);color:var(--gold)} .btn-outline{background:transparent;color:var(--green);border-color:var(--green)} .btn-outline:hover{background:var(--green);color:var(--cream)} .btn-sm{padding:.7em 1.4em;font-size:.76rem} /* ================= TOP BAR ================= */ .topbar{background:var(--green-900);color:var(--cream)} .topbar .wrap{display:flex;align-items:center;justify-content:center;gap:.6em; min-height:38px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500} .topbar .shamrock{color:var(--gold)} /* ================= HEADER / NAV ================= */ .site-header{position:sticky;top:0;z-index:60;background:var(--cream); border-bottom:1px solid var(--cream-2);box-shadow:0 2px 12px -8px rgba(20,52,35,.4)} .header-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem; min-height:92px} .brand{display:flex;align-items:center;gap:.7rem;flex-shrink:0} .brand img{height:64px;width:auto} .brand .fallback{font-family:var(--serif);color:var(--green);font-size:1.35rem;line-height:1;font-weight:700} .main-nav{display:flex;align-items:center;gap:2.1rem} .main-nav ul{list-style:none;margin:0;padding:0} .main-nav > ul{display:flex;align-items:center;gap:2.1rem} .main-nav a{font-family:var(--sans);font-size:.82rem;font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:var(--ink);padding:.4em 0;position:relative;transition:.2s} .main-nav a:hover{color:var(--green)} .main-nav a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0; background:var(--gold);transition:width .25s} .main-nav a:hover::after,.main-nav .menu-item-has-children:hover > a::after{width:100%} .main-nav .menu-item-has-children{position:relative} .main-nav .menu-item-has-children > a::before{content:"";display:inline-block;width:.4em;height:.4em;margin-right:3px; border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px);vertical-align:middle;opacity:.7} .main-nav .sub-menu{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(8px); background:var(--white);min-width:230px;border-radius:4px;box-shadow:var(--shadow); padding:.5rem;opacity:0;visibility:hidden;transition:.2s;border-top:3px solid var(--gold)} .main-nav .menu-item-has-children:hover .sub-menu, .main-nav .menu-item-has-children:focus-within .sub-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .main-nav .sub-menu a{display:block;padding:.7em .9em;text-transform:none;letter-spacing:.02em; font-size:.92rem;border-radius:3px;color:var(--ink)} .main-nav .sub-menu a::after{display:none} .main-nav .sub-menu a:hover{background:var(--cream);color:var(--green)} /* A non-linking menu item (url set to "#") renders as a small gold section label. */ .main-nav .sub-menu .sub-label > a{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase; color:var(--gold-600);padding:.5em .9em 0;font-weight:700;pointer-events:none} .header-actions{display:flex;align-items:center;gap:1.3rem} .social{display:flex;align-items:center;gap:.85rem} .social a{color:var(--green);opacity:.8;transition:.2s;display:grid;place-items:center} .social a:hover{opacity:1;color:var(--gold-600);transform:translateY(-1px)} .social svg{width:19px;height:19px;fill:currentColor} .nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;color:var(--green)} .nav-toggle svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:2} /* ================= HERO ================= */ /* 570px as of 2026-08-24, down from 760px. THE HEIGHT ONLY GOVERNS BECAUSE THE CONTENT NOW FITS UNDER IT. At 760px this min-height was dead code: the natural stack measured ~767px, so content set the height and the declaration never applied. Two things came out to make 570 real — the stat badges (~127px, removed from fhb_render_hero()) and half the inner padding (80px) — leaving ~561px of content. Anything added back here that pushes the stack over 570 silently returns this line to being decorative, so measure before trusting it. The min() is a viewport guard, as on .page-hero: on a short landscape phone a flat 570px band would fill the screen before a word of the page showed. */ .hero{position:relative;min-height:min(570px,88vh);display:flex;align-items:center; color:var(--cream);overflow:hidden} .hero__bg{position:absolute;inset:0;background:#111 var(--hero-bg) center 30%/cover no-repeat} .hero__scrim{position:absolute;inset:0; background:linear-gradient(100deg,rgba(15,35,24,.92) 0%,rgba(20,52,35,.72) 42%,rgba(20,52,35,.15) 100%)} .hero .wrap{position:relative;z-index:2;width:100%} .hero__inner{max-width:620px;padding:2.5rem 0} .hero h1{color:var(--cream);font-size:clamp(2.6rem,6vw,4.5rem);line-height:1.03;margin:.2rem 0 1.2rem; font-weight:600;text-shadow:0 2px 30px rgba(0,0,0,.35)} .hero h1 em{font-family:var(--serif-soft);font-style:italic;color:var(--gold);font-weight:500} .hero__lead{font-size:1.15rem;max-width:37ch;color:rgba(247,242,231,.92);margin-bottom:2rem} .hero__cta{display:flex;flex-wrap:wrap;gap:1rem} /* .hero__badges / .hero__badge were removed 2026-08-24 with the stat badges themselves (see fhb_render_hero()); nothing emits those classes any more, and unreachable rules are not kept here. The 82% / 100% / Traditional Irish Recipe claims still run in the topbar on every page — see header.php. */ /* ================= PAGE HERO (fhb/page-hero) ================= Masthead for pages other than the homepage. A palette colour instead of a mandatory photograph, left-aligned display type, and none of .hero's stat badges. Text colour comes from the --tone-* modifier, which render.php derives from the chosen background — it is never a separate editor choice, so cream-on-cream cannot be saved. */ /* Rebuilt 2026-08-23 from the approved Whey Butter Difference mockup (v2), replacing the 340px centred band ported from the Our Heritage mockup. Height, alignment and type scale are one decision, not three: the band is shorter, so the type has to carry the masthead, and display type at this size cannot be centred in a 720px measure without reading as a poster. This block disables the color, spacing and typography supports, so there is no per-instance override path — every value here is universal by construction. The two pages that already use it are /recipes and /whey-butter-difference/our-heritage. min-height, NOT the mockup's flat `height:280px`. The mockup hero carries no lead paragraph; the Recipes hero carries eyebrow + heading + lead, and a fixed height would clip it. min-height lets that one case grow past 280px instead. The min() keeps the viewport guard the old min(46vh,400px) provided — on a short landscape phone a flat band would fill the screen before a word of the page showed. */ .page-hero{position:relative;overflow:hidden;display:flex;align-items:center; min-height:min(280px,60vh);padding:1.25rem 0;text-align:left} .page-hero .wrap{position:relative;z-index:2;width:100%} .page-hero__inner{max-width:720px;margin:0} .page-hero h1{font-size:clamp(3rem,6vw,5.2rem);font-weight:500;line-height:.93; letter-spacing:-.055em;margin:0 0 1rem} /* The accent is the same Playfair face as the heading, upright, one weight lighter — not the italic Cormorant the homepage marquee uses. At 5.2rem with -.055em tracking the italic broke the line's rhythm rather than accenting it. Colour still comes from the --tone-* rules below, never from here. WORTH KNOWING: Our Heritage's hero is `Our` + accent `Heritage`, so this is the whole composition of that page's masthead. Reverting is these three declarations. */ .page-hero h1 em{font-family:inherit;font-style:normal;font-weight:500} .page-hero__lead{font-size:1.08rem;max-width:56ch;margin:0} /* Scoped to the hero on purpose. The global .eyebrow stays at .78rem — that value was chosen for the Uncial face in 2026-08-22 and is used site-wide; only the masthead's eyebrow drops to the mockup's .7rem, against much larger display type. */ .page-hero .eyebrow{font-size:.7rem;margin-bottom:.9rem} /* --fhb-ph-a / --fhb-ph-b are the two tones of the diagonal split applied under --tone-light below. Declared per band so each light background splits against its own neighbour; cream-deep inverts its pair rather than inventing a third cream, there being no --cream-3. The dark and gold bands declare neither and stay flat. NB: tools/check-block-consistency.js string-matches the literal `.page-hero--{slug}{`, so these six selectors must keep this exact shape — no space before the brace. */ .page-hero--white{background:var(--white);--fhb-ph-a:var(--white);--fhb-ph-b:var(--cream)} .page-hero--cream{background:var(--cream);--fhb-ph-a:var(--cream);--fhb-ph-b:var(--cream-2)} .page-hero--cream-deep{background:var(--cream-2);--fhb-ph-a:var(--cream-2);--fhb-ph-b:var(--cream)} .page-hero--gold{background:var(--gold)} .page-hero--green{background:var(--green)} .page-hero--green-dark{background:var(--green-900)} /* ---- the light-band background pattern ---- A diagonal two-tone split, a soft gold bloom, and a rotated green ellipse bleeding off the bottom-right corner, from the Whey Butter Difference mockup. Keyed off --tone-light rather than the three background slugs, because render.php already derives that class from exactly white | cream | cream-deep, AND forces tone dark whenever an image is set. So one selector covers the light bands and image heroes are excluded for free — their scrim is the treatment and a gradient under it would never be seen. MUST STAY AFTER the six band rules above: those use the `background` shorthand, which resets background-image to none. Same specificity, so cascade order is what decides. */ .page-hero--tone-light{background-image: radial-gradient(circle at 77% 38%,rgba(212,165,58,.19),transparent 19%), linear-gradient(112deg,var(--fhb-ph-a) 0 59%,var(--fhb-ph-b) 59%)} /* Clipped by .page-hero's overflow:hidden; sits under the copy because .page-hero .wrap is already position:relative with z-index 2. */ .page-hero--tone-light::after{content:"";position:absolute;right:-8vw;bottom:-37vw; width:69vw;height:50vw;background:var(--green);border-radius:50% 50% 0 0; transform:rotate(-8deg);pointer-events:none} /* Background image, using the same dark-green scrim inks as the homepage marquee. The angle differs on purpose: the marquee's 100deg gradient is weighted to the left because its text is left-aligned, which would leave centred text sitting on the transparent side. Symmetrical vertical falloff keeps the same treatment readable under centred copy. */ .page-hero__bg{position:absolute;inset:0; background:#111 var(--page-hero-bg) center/cover no-repeat} .page-hero__scrim{position:absolute;inset:0; background:linear-gradient(180deg,rgba(15,35,24,.86) 0%,rgba(20,52,35,.66) 50%,rgba(15,35,24,.86) 100%)} .page-hero--tone-light h1{color:var(--green)} /* The base rule paints h1 em in --gold, which is ~1.9:1 on cream — the accent half of the page title, unreadable. --gold-600 clears 3:1 at this size. Latent until now because no page-hero on a light background had used the accent. */ .page-hero--tone-light h1 em{color:var(--gold-600)} .page-hero--tone-light .page-hero__lead{color:var(--ink-soft)} .page-hero--tone-light .eyebrow{color:var(--gold-600)} /* Gold needs its own tone: cream is illegible on it and the ink used on cream is muddy. Values match the newsletter band, which is the same gold. */ .page-hero--tone-gold h1{color:var(--green-900)} .page-hero--tone-gold .page-hero__lead{color:#4a3c14} .page-hero--tone-gold .eyebrow{color:var(--green-900)} .page-hero--tone-gold h1 em{color:var(--green)} .page-hero--tone-dark h1{color:var(--cream)} .page-hero--tone-dark .page-hero__lead{color:rgba(247,242,231,.9)} .page-hero--tone-dark .eyebrow{color:var(--gold)} /* ================= INTRO ================= */ .intro{background:var(--cream);text-align:center;padding:clamp(4rem,8vw,6.5rem) 0} .intro__inner{max-width:760px;margin:0 auto} .intro h2{font-size:clamp(1.9rem,4vw,2.9rem);margin-bottom:1.4rem} .intro p{font-size:1.18rem;color:var(--ink-soft);font-family:var(--serif-soft)} .rule{display:flex;align-items:center;justify-content:center;gap:.9rem;margin:0 auto 1.6rem;color:var(--gold)} .rule::before,.rule::after{content:"";height:1px;width:56px;background:var(--gold)} .rule .shamrock{font-size:1.1rem;color:var(--gold)} /* ================= SECTION SHELL ================= */ .section{padding:clamp(4rem,8vw,7rem) 0} .section-head{text-align:center;max-width:640px;margin:0 auto clamp(2.5rem,5vw,3.8rem)} .section-head h2{font-size:clamp(1.9rem,4vw,3rem);margin-bottom:1rem} /* (0,0,0) per Rule 3, like the other prose defaults. At its ported specificity of (0,1,1) this beat both `.is-style-fhb-lead` and `.is-style-fhb-eyebrow` — the third instance of the bug those two have already hit twice. No PHP in this theme renders .section-head today (only the mockups do), so nothing changes visually; the rule is defused rather than left as a trap for whoever uses the class next. */ :where(.section-head) > :where(p){color:var(--fhb-body,var(--ink-soft));font-size:1.08rem} .section--cream2{background:var(--cream-2)} .section-cta{text-align:center;margin-top:3rem} /* ---- generic modifiers used by the fhb/section block ---- Slugs match the `background` enum in src/section/block.json. The older .section--cream2 / .locator / .intro classes remain for the PHP templates that still render those sections directly. Per Rule 1 each band declares TOKENS, not per-element colour rules. That is what carries the right colour into a heading, paragraph or link nested inside a core Group or Column — the old `.section--green h2,h3{color:…}` patches only ever reached one level, and they retired three bugs on the way out: · no rule anywhere recoloured h1, so an h1 on --green was forest green on forest green; · h4 was invisible on --green, because that patch listed only h2 and h3; · h5/h6 were absent from the base heading rule entirely. */ /* --fhb-band is the band's OWN background colour, published as a token so a component sitting on it can paint with it. The timeline's rail node needs exactly this: a ring in the band colour, so the hairline rail reads as passing behind the dot rather than butting into it. Each modifier declares it once and then uses it for `background`, so the token and the paint cannot drift apart. --fhb-hair is the divider colour for component rules (hairline card grids, card borders). Translucent rather than a flat value, so it works over an image or a nested background too; only the dark bands need to flip it. */ .section{--fhb-body:var(--ink-soft);--fhb-link:var(--green);--fhb-link-hover:var(--gold-600)} /* White and cream declare no colour tokens beyond the band. The .section base above already sets body and link, and --fhb-heading/--fhb-eyebrow fall through to their (0,0,0) defaults, which are the green and gold-600 they want. Restating them would be four more values to keep in step for no change in output. */ /* --fhb-card-bg always contrasts with the band: a white card on white is a 1px border and nothing else. Cream-deep and the dark bands take the var() default of --cream. */ .section--white{--fhb-band:var(--white);--fhb-card-bg:var(--cream);background:var(--fhb-band)} .section--cream{--fhb-band:var(--cream);--fhb-card-bg:var(--white);background:var(--fhb-band)} .section--cream-deep{--fhb-band:var(--cream-2);background:var(--fhb-band)} /* Gold. Text is deep green rather than cream — cream on gold fails contrast badly, and the --ink-soft used on the cream sections is muddy against it. These are the values the newsletter band was ported with, kept identical so the two match. */ .section--gold{--fhb-band:var(--gold);background:var(--fhb-band);color:var(--green-900); --fhb-heading:var(--green-900);--fhb-body:#4a3c14;--fhb-eyebrow:var(--green-900); --fhb-link:var(--green-900);--fhb-link-hover:var(--green)} .section--green{--fhb-band:var(--green);background:var(--fhb-band);color:var(--cream); --fhb-heading:var(--cream);--fhb-body:rgba(247,242,231,.85);--fhb-eyebrow:var(--gold); --fhb-link:var(--gold);--fhb-link-hover:var(--cream);--fhb-hair:rgba(247,242,231,.22)} .section--green-dark{--fhb-band:var(--green-900);background:var(--fhb-band);color:var(--cream); --fhb-heading:var(--cream);--fhb-body:rgba(247,242,231,.85);--fhb-eyebrow:var(--gold); --fhb-link:var(--gold);--fhb-link-hover:var(--cream);--fhb-hair:rgba(247,242,231,.22)} /* The inverse case. A light card sitting inside a dark band inherits that band's tokens, so an unstyled heading would come out cream on white. Reset them at the card. */ /* --fhb-hair is in the list for the same reason as the colours: on a dark band it inherits the band's cream hairline, which is invisible on a light card. */ .product,.recipe,.quote-card,.modal,.rfilter__menu,.wp-block-details,.info-card{ --fhb-heading:var(--green);--fhb-body:var(--ink-soft); --fhb-eyebrow:var(--gold-600);--fhb-link:var(--green);--fhb-link-hover:var(--gold-600); --fhb-hair:rgba(20,52,35,.16)} /* Core Cover ships a dark overlay and light body text of its own; without this its heading renders forest green on the photograph. */ .wp-block-cover{--fhb-heading:var(--cream);--fhb-body:rgba(247,242,231,.9); --fhb-eyebrow:var(--gold);--fhb-link:var(--gold);--fhb-link-hover:var(--cream)} /* ---- palette backgrounds chosen in the editor ---- Rule 1 applied to core's own colour control. When an editor gives a Group, Column or Cover a background from the locked palette, core emits only `.has--background-color` — it has no idea the theme's headings read their colour from --fhb-heading, so an h3 on a deep-green Group came out forest green on forest green. That is the same bug the .section--* bands were rewritten to kill, reappearing one level down because the band classes only cover fhb/section. Keyed off core's generated class, so it needs no block support and no attribute: choosing the colour is what turns it on. Values are copied from the matching .section--* modifier above so the two cannot read differently. */ .has-green-background-color, .has-green-dark-background-color, .has-ink-background-color{ --fhb-heading:var(--cream);--fhb-body:rgba(247,242,231,.85);--fhb-eyebrow:var(--gold); --fhb-link:var(--gold);--fhb-link-hover:var(--cream); --fhb-qcard-bg:var(--cream);--fhb-qcard-fg:var(--ink); --fhb-qcard-accent:var(--gold-600);--fhb-qcard-shadow:var(--gold);--fhb-quote:var(--cream); --fhb-hair:rgba(247,242,231,.22);--fhb-band:var(--green-900);--fhb-motif-ink:var(--cream) } .has-gold-background-color{ --fhb-heading:var(--green-900);--fhb-body:#4a3c14;--fhb-eyebrow:var(--green-900); --fhb-link:var(--green-900);--fhb-link-hover:var(--green); --fhb-qcard-bg:var(--green-900);--fhb-qcard-fg:var(--cream); --fhb-qcard-accent:var(--gold);--fhb-qcard-shadow:var(--green);--fhb-quote:var(--green-900); --fhb-motif-ink:var(--green-900) } /* The reverse: a light Group nested inside a dark band has to put the tokens back, or its own headings inherit the band's cream. */ .has-white-background-color, .has-cream-background-color, .has-cream-deep-background-color{ --fhb-heading:var(--green);--fhb-body:var(--ink-soft);--fhb-eyebrow:var(--gold-600); --fhb-link:var(--green);--fhb-link-hover:var(--gold-600); --fhb-qcard-bg:var(--green);--fhb-qcard-fg:var(--cream); --fhb-qcard-accent:var(--gold);--fhb-qcard-shadow:var(--gold);--fhb-quote:var(--green) } .section--centered{text-align:center} /* Cap the centred *text*, not the wrap. The mockup constrained .section-head (640px) and .intro__inner (760px) while .wrap stayed at --maxw, so the card grids beneath a centred heading ran the full width. Capping .wrap itself squeezed those grids to 760px as well — wrong on the Products and Recipes sections, and fatal to the testimonial rail, which needs the full width for the next card to peek into view. */ /* The measure itself now lives in one place — see "reading measure for core text blocks" in the CORE BLOCK ALIGNMENT section below, which caps every core text block rather than just headings and paragraphs, and centres them here. */ .section--centered .wp-block-buttons{justify-content:center} /* ---- typographic rhythm for core blocks inside fhb/section ---- The mockup's spacing lived in .section-head, which a composed section (core heading + core paragraph + a component block) never produces. These rules reproduce that rhythm from the block markup instead: a consistent 1rem flow between text blocks, and the larger section-head gap before whatever component follows the copy. */ .section > .wrap > *{margin-top:0;margin-bottom:0} .section > .wrap > * + *{margin-top:1rem} .section > .wrap > .wp-block-heading{font-size:clamp(1.9rem,4vw,3rem);line-height:1.12} /* Prose defaults, at (0,0,0) — Rule 3. This replaces `.section > .wrap > p{color:…;font-size:1.08rem}`, which was (0,2,1) and silently beat two things it had no business beating: · `.is-style-fhb-lead` (0,1,0), so the Lead style rendered at body size — the same bug the eyebrow hit, and the reason the eyebrow needed a (0,3,0) patch that had to be kept in step by hand. Both are now structurally gone: the default lost the fight instead of the variants winning it, and the eyebrow patch is deleted. · anything an editor set via Additional CSS class, which is also (0,1,0). The second selector group is what reaches INTO core containers, which the old child combinator could not. The `>` throughout keeps `.quote-card blockquote p`, `.product__body p`, `.benefit p` and `.recipe__body p` out of scope — they are children of component wrappers that are not listed here. The size is a TOKEN, not a literal. The timeline and the info cards both want smaller prose (.98rem and .88rem), and the obvious way to get it — `.info-card p{font-size:.88rem}` at (0,1,1) — is precisely the bug this comment is about: it would beat `.is-style-fhb-lead` at (0,1,0) all over again. Setting --fhb-prose-size on the component keeps the cascade flat. */ :where(.section > .wrap,.page-content) > :where(p,ul,ol,dl,table,blockquote), :where(.section .wp-block-group,.section .wp-block-column, .section .wp-block-media-text__content,.section .wp-block-details, .section .wp-block-cover__inner-container, .section .timeline__body,.section .info-card__body) > :where(p,ul,ol,dl,table,blockquote){ color:var(--fhb-body,inherit);font-size:var(--fhb-prose-size,1.08rem) } .page-content{--fhb-body:var(--ink)} /* Links in editorial copy. Scoped by the PROSE ELEMENT, not by the container. A container-scoped rule would also hit `.recipe__body h3 a` — the bare anchor stretched over an entire recipe card — and underline every card title. (0,1,1): the scope is in :where() so it contributes nothing, leaving `a` plus `:not([class])`. Just enough to beat the :where(a) reset, low enough that the editor's own link colour output (.wp-elements- a, (0,2,0)) still wins — settings.color.link is true, so that control has to keep working. `:not([class])` excludes every link core gives a class to: buttons, page numbers, coloured links. */ :where(.section > .wrap,.page-content,.recipe-detail, .section .wp-block-group,.section .wp-block-column, .section .wp-block-media-text__content,.section .wp-block-details) :where(p,li,dd,td,th,blockquote,figcaption) > a:not([class]){ color:var(--fhb-link,var(--green));text-decoration:underline; text-decoration-color:var(--gold);text-decoration-thickness:1px; text-underline-offset:.18em } :where(.section > .wrap,.page-content,.recipe-detail, .section .wp-block-group,.section .wp-block-column, .section .wp-block-media-text__content,.section .wp-block-details) :where(p,li,dd,td,th,blockquote,figcaption) > a:not([class]):hover{ color:var(--fhb-link-hover,var(--gold-600));text-decoration-color:currentColor } /* core/spacer carries its height as an inline style; the owl rule above then added 1rem on top, so a 100px spacer measured 116px and the editor's number never matched the render. (0,3,0) beats the (0,2,0) owl. */ .section > .wrap > .wp-block-spacer{margin-top:0;margin-bottom:0} .section > .wrap > .wp-block-spacer + *{margin-top:0} /* The component that follows the copy gets the old .section-head bottom margin. */ .section > .wrap > .products, .section > .wrap > .recipes, .section > .wrap > .recipes-wrap, .section > .wrap > .benefits, .section > .wrap > .proof, .section > .wrap > .proof-carousel, .section > .wrap > .locator-map, .section > .wrap > .wp-block-buttons{margin-top:clamp(2.5rem,5vw,3.8rem)} /* ================= CORE BLOCK ALIGNMENT ================= The half that was missing when align-wide was removed on 2026-08-19. See the long note in functions.php → fhb_setup() for the history and the invariant. Written longhand rather than with a leading :is(). add_editor_style() runs every selector through the editor's prefixer to scope it to .editor-styles-wrapper, and a selector that BEGINS with :is( / :where( is the case most likely to be mangled. Keeping the first compound a plain class is cheap insurance and makes each selector's specificity legible on its own. Scoped to the theme's two measured columns. Core's own constrained containers are deliberately excluded: inside a core Group, `.is-layout-constrained > .alignwide` is already correct (driven by theme.json wideSize), and a viewport-relative breakout there would escape the Group entirely. .split__text is excluded too. It is a grid cell, so the 50% below would be half the CELL, and an .alignfull inside a split would land off-centre. Alignment is a deliberate no-op there. */ .section > .wrap > .alignwide, .page-content > .alignwide{ --_w:min(var(--fhb-wide), 100vw - 2 * var(--fhb-gutter)); width:var(--_w);max-width:none; /* 50% is half the containing block, so the box centres on the column it is breaking out of — which is itself centred in the viewport. */ margin-left:calc(50% - var(--_w) / 2); margin-right:calc(50% - var(--_w) / 2) } .section > .wrap > .alignfull, .page-content > .alignfull{ width:100vw;max-width:none; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw) } /* A full-bleed container still needs the page gutter inside it, or its text runs into the viewport edge. An editor-set padding is an inline style and still wins. */ .section > .wrap > .alignfull.wp-block-group, .section > .wrap > .alignfull.wp-block-columns, .section > .wrap > .alignfull.wp-block-cover, .section > .wrap > .alignfull.wp-block-media-text, .page-content > .alignfull.wp-block-group, .page-content > .alignfull.wp-block-columns, .page-content > .alignfull.wp-block-cover, .page-content > .alignfull.wp-block-media-text{ padding-left:var(--fhb-gutter);padding-right:var(--fhb-gutter) } /* 100vw includes the scrollbar, so .alignfull is a few pixels wider than the viewport and would push a horizontal scrollbar. `clip`, NOT `hidden`. `hidden` creates a scroll container, which would break position:sticky on .site-header and would also force overflow-y to auto, clipping the recipe filter dropdown. `clip` does neither, and overflow-x:clip paired with overflow-y:visible is legal. On #main rather than body, because overflow on body propagates to the viewport. .site-header renders before
opens (header.php), so the sticky header is structurally out of reach of this rule either way. */ #main{overflow-x:clip} /* ---- reading measure for core text blocks ---- Without this a paragraph in a non-centred section runs the full ~1100px, contentSize:760px is fiction, and .alignwide has almost nothing to widen from. An explicit allow-list of CORE selectors, never `.section > .wrap > *` with :not() exclusions — see the .section--centered note above for why capping .wrap's children wholesale broke the product and recipe grids and the testimonial rail. An allow-list also fails better: a future fhb/* block defaults to full width, which is today's behaviour, rather than silently to 760px. */ .section > .wrap > p, .section > .wrap > .wp-block-heading, .section > .wrap > .wp-block-list, .section > .wrap > .wp-block-quote, .section > .wrap > .wp-block-pullquote, .section > .wrap > .wp-block-table, .section > .wrap > .wp-block-details, .section > .wrap > .wp-block-accordion, .section > .wrap > .wp-block-preformatted, .section > .wrap > .wp-block-code, .section > .wrap > .wp-block-group:not(.alignwide):not(.alignfull), .section > .wrap > .wp-block-columns:not(.alignwide):not(.alignfull), .section > .wrap > .wp-block-image:not(.alignwide):not(.alignfull), .section > .wrap > .wp-block-media-text:not(.alignwide):not(.alignfull){ max-width:var(--fhb-content) } /* Centred sections additionally pull the measure to the middle. This list must stay in step with the one above it. Five entries were missing — pullquote, accordion, preformatted, code, columns and media-text were capped at 760px by the measure list but never centred, so inside a .section--centered they were narrow AND hugging the left edge. Nothing on the site used that combination yet; Our Heritage uses two of them. */ .section--centered > .wrap > p, .section--centered > .wrap > .wp-block-heading, .section--centered > .wrap > .wp-block-list, .section--centered > .wrap > .wp-block-quote, .section--centered > .wrap > .wp-block-pullquote, .section--centered > .wrap > .wp-block-table, .section--centered > .wrap > .wp-block-details, .section--centered > .wrap > .wp-block-accordion, .section--centered > .wrap > .wp-block-preformatted, .section--centered > .wrap > .wp-block-code, .section--centered > .wrap > .wp-block-group:not(.alignwide):not(.alignfull), .section--centered > .wrap > .wp-block-columns:not(.alignwide):not(.alignfull), .section--centered > .wrap > .wp-block-image:not(.alignwide):not(.alignfull), .section--centered > .wrap > .wp-block-media-text:not(.alignwide):not(.alignfull){ margin-left:auto;margin-right:auto } /* ---- core Button (style variations registered in inc/blocks.php) ---- The geometry is declared ONCE for every core Button, not per variation. It used to be restated only inside the four is-style-fhb-* selectors, which duplicated .btn verbatim and left a Button with no variation selected rendering as core's stock pill. An editor who drops in a Button and types a label now gets a brand button by default; the variations only change colour. */ .wp-block-button__link{ display:inline-flex;align-items:center;gap:.55em;font-family:var(--sans); font-weight:600;font-size:.86rem;letter-spacing:.05em;text-transform:uppercase; padding:.9em 1.9em;border-radius:2px;border:1.5px solid transparent;transition:.2s ease } /* Default colours, matching .btn-green. Excluded when a variation is chosen, and when the editor has set its own colour (core emits .has-*-background-color). */ .wp-block-button:not([class*="is-style-fhb-"]) .wp-block-button__link:not([class*="has-"]){ background:var(--green);color:var(--cream) } .wp-block-button:not([class*="is-style-fhb-"]) .wp-block-button__link:not([class*="has-"]):hover{ background:var(--green-700) } .wp-block-button.is-style-fhb-gold .wp-block-button__link{background:var(--gold);color:var(--green-900)} .wp-block-button.is-style-fhb-gold .wp-block-button__link:hover{background:#e4b74d} .wp-block-button.is-style-fhb-green .wp-block-button__link{background:var(--green);color:var(--cream)} .wp-block-button.is-style-fhb-green .wp-block-button__link:hover{background:var(--green-700)} .wp-block-button.is-style-fhb-outline .wp-block-button__link{background:transparent;color:var(--green);border-color:var(--green)} .wp-block-button.is-style-fhb-outline .wp-block-button__link:hover{background:var(--green);color:var(--cream)} .wp-block-button.is-style-fhb-ghost .wp-block-button__link{background:transparent;color:var(--cream);border-color:rgba(247,242,231,.55)} .wp-block-button.is-style-fhb-ghost .wp-block-button__link:hover{border-color:var(--gold);color:var(--gold)} /* ---- fhb/split media position ---- */ .split--media-right .split__media{order:2} .split--media-right .split__text{order:1} /* ================= PRODUCTS ================= */ /* Column count is driven by the card count (.products--2 / --3) from the fhb/product-cards block. The bare .products rule keeps two-up as the default for any markup that doesn't carry a count class. */ .products{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,2.5rem)} .products--1{grid-template-columns:minmax(0,460px);justify-content:center} .products--2{grid-template-columns:repeat(2,1fr)} .products--3{grid-template-columns:repeat(3,1fr)} .product{background:var(--white);border-radius:6px;overflow:hidden;box-shadow:var(--shadow-sm); display:flex;flex-direction:column;transition:.25s} .product:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .product__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--white); display:grid;place-items:center;padding:1.4rem} .product__media img{width:100%;height:100%;object-fit:contain;transition:.5s} .product:hover .product__media img{transform:scale(1.04)} .product__tag{position:absolute;top:16px;left:16px;background:var(--gold);color:var(--green-900); font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; padding:.45em 1em;border-radius:2px} .product__body{padding:1.8rem 1.9rem 2rem;display:flex;flex-direction:column;flex:1} .product__body h3{font-size:1.6rem;margin-bottom:.5rem} .product__body p{color:var(--ink-soft);font-size:.98rem;flex:1} .product__actions{display:flex;gap:.9rem;margin-top:1.3rem;flex-wrap:wrap} .product__actions .btn{font-size:.76rem;padding:.75em 1.4em} /* ================= BENEFITS ================= */ .benefits{display:grid;grid-template-columns:repeat(5,1fr);gap:1.4rem} .benefit{text-align:center;padding:1.2rem .6rem} .benefit__icon{width:76px;height:76px;margin:0 auto 1.1rem;border-radius:50%; border:2px solid var(--gold);display:grid;place-items:center;color:var(--gold)} /* Round caps and joins were added with the refined icon set (2026-08-19): these are organic shapes — a heart, a feather, a sprout — and mitred corners left visible spurs on the curves at 34px. */ .benefit__icon svg{width:34px;height:34px;stroke:currentColor;fill:none;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round} .benefit h3{margin-bottom:.5rem;font-family:var(--sans);font-weight:700; letter-spacing:.02em;color:var(--cream);text-transform:uppercase;font-size:.82rem} .benefit p{font-size:.92rem;color:rgba(247,242,231,.82);margin:0} /* ================= STORY / HERITAGE ================= */ .split{display:grid;grid-template-columns:1.05fr 1fr;align-items:center; gap:clamp(2rem,5vw,4.5rem)} .split__media{position:relative} .split__media img{border-radius:6px;box-shadow:var(--shadow);aspect-ratio:4/3.2;object-fit:cover;width:100%} .split__media .stamp{position:absolute;bottom:-26px;right:-10px;background:var(--gold); color:var(--green-900);width:118px;height:118px;border-radius:50%;display:grid;place-items:center; text-align:center;font-family:var(--serif);line-height:1.05;font-size:.82rem;box-shadow:var(--shadow-sm); transform:rotate(-8deg)} .split__media .stamp b{font-size:1.7rem;display:block} .story h2{font-size:clamp(2rem,4vw,3rem);margin-bottom:1.3rem} .story p{color:var(--ink-soft)} .story .btn{margin-top:.8rem} /* ================= TIMELINE (fhb/timeline + fhb/timeline-item) ================= An
    , because a dated sequence of events has a meaningful order and a count — both announced for free by the list semantics, even though the numerals themselves are decorative and come from CSS. THE NUMERALS ARE A COUNTER, NOT SAVED TEXT. Reordering or deleting a step renumbers the whole sequence, and no editor can save 01, 02, 02, 04. The per-item `label` attribute overrides it when a story page wants years instead of ordinals, which is the only reason the two are separate elements. */ .timeline{ counter-reset:fhb-tl;list-style:none;position:relative; width:min(980px,100%);margin-left:auto;margin-right:auto;padding:0; /* The section head above is centred and .section--centered sets text-align on the whole band, which lands on every step. Same reset as .info-cards. */ text-align:left } /* The spine. Fades downward so it reads as a receding thread rather than a border. */ .timeline::before{ content:"";position:absolute;top:.5rem;bottom:0;left:50%;width:1px; background:linear-gradient(var(--gold),rgba(212,165,58,.18)) } .timeline__item{ counter-increment:fhb-tl;position:relative;width:50%; padding:0 clamp(1.8rem,4.5vw,4.4rem) clamp(2.4rem,5vw,5rem) 0 } .timeline__item:nth-child(even){ margin-left:50%; padding:0 0 clamp(2.4rem,5vw,5rem) clamp(1.8rem,4.5vw,4.4rem) } .timeline__item:last-child{padding-bottom:0} /* Node on the spine. The wide ring is painted in the band's own colour (--fhb-band), so the spine appears to pass behind the dot. A hardcoded green-900 here — which is what the reference mockup used — turns into a dark halo the moment the timeline is dropped on any other background. */ .timeline__item::after{ content:"";position:absolute;top:.6rem;right:-7px;width:14px;height:14px; border-radius:50%;background:var(--gold); box-shadow:0 0 0 6px var(--fhb-band,var(--green-900)),0 0 0 7px var(--gold) } .timeline__item:nth-child(even)::after{left:-7px;right:auto} .timeline__num{ display:block;font-family:var(--serif);font-weight:600;line-height:1; color:var(--gold);font-size:clamp(2.4rem,5.5vw,4.3rem) } .timeline__num--auto::before{content:counter(fhb-tl,decimal-leading-zero)} .timeline__body{--fhb-prose-size:.98rem} .timeline__body h3{font-size:clamp(1.2rem,2.4vw,1.6rem);line-height:1.2;margin:.55rem 0 .85rem} .timeline__body > :last-child{margin-bottom:0} /* ================= INFO CARDS (fhb/info-cards + fhb/info-card) ================= One block pair, two presentations, because they are the same content object — a headed card with a body and optional link: --grid flat cards divided by hairlines, indexed with a roman numeral. --gallery separated cards with a 16:10 thumbnail tile, a media badge and a link. The variant is an editor choice on the parent, like fhb/section's background. What is NOT a choice, and is derived instead: the column count (from the number of children), the numerals (a counter), the tile (renders iff the card has a badge or an image), and the placeholder tile's colour (rotates by position). */ .info-cards{list-style:none;margin:0;padding:0;display:grid;text-align:left} .info-cards--1{grid-template-columns:minmax(0,460px);justify-content:center} .info-cards--2{grid-template-columns:repeat(2,1fr)} .info-cards--3{grid-template-columns:repeat(3,1fr)} .info-cards--4{grid-template-columns:repeat(4,1fr)} /* Hairline grid. The dividers are the 1px grid gap showing the container's own background through — one colour value instead of a border-collapse puzzle over which card owns which edge. */ .info-cards--grid{ counter-reset:fhb-ic;gap:1px; background:var(--fhb-hair,rgba(20,52,35,.16)); border:1px solid var(--fhb-hair,rgba(20,52,35,.16)) } .info-cards--gallery{gap:clamp(1.2rem,2.4vw,1.75rem)} /* Gallery caps at two columns however many cards there are. A 16:10 tile above a heading, a paragraph and a link cannot survive a quarter of the content width, so the cap is derived from the variant rather than added as a second control. */ .info-cards--gallery.info-cards--3, .info-cards--gallery.info-cards--4{grid-template-columns:repeat(2,1fr)} .info-card{ position:relative;display:flex;flex-direction:column; --fhb-prose-size:.88rem; background:var(--fhb-card-bg,var(--cream)) } .info-cards--grid > .info-card{ counter-increment:fhb-ic; padding:clamp(1.7rem,3.4vw,2.5rem) clamp(1.2rem,2.4vw,1.75rem) } .info-cards--grid > .info-card::before{ content:counter(fhb-ic,upper-roman);display:block; font-family:var(--uncial);font-size:.72rem;letter-spacing:.1em; color:var(--fhb-eyebrow,var(--gold-600));margin-bottom:.75rem } /* Levels the paragraphs across a row when the headings run to different lengths. Dropped below 680px, where the cards stack and there is nothing to level against. */ .info-cards--grid > .info-card h3{ font-size:clamp(1.1rem,2.2vw,1.4rem);line-height:1.25; margin-bottom:.8rem;min-height:3.5em } .info-cards--grid > .info-card > :last-child{margin-bottom:0} /* Both variants emit identical markup, so switching Presentation never needs the cards re-saved. The difference is only which element carries the padding: the card in the hairline grid (where the numeral has to sit inside it) and the body in the gallery (where the tile has to run edge to edge). */ .info-cards--grid .info-card__body{padding:0} .info-cards--gallery > .info-card{ border:1px solid var(--fhb-hair,rgba(20,52,35,.16)); transition:transform .25s ease,box-shadow .25s ease } .info-cards--gallery > .info-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)} /* One stretched link per card (see .info-card__link a::after), so the whole card is clickable with a mouse while keyboard users get exactly one tab stop. The ring has to move to the card, since the anchor itself is a 1px-tall label. */ .info-card:focus-within{outline:2px solid var(--gold);outline-offset:2px} .info-card__tile{ position:relative;aspect-ratio:16/10;overflow:hidden; display:grid;place-items:center;padding:1.4rem;text-align:center } .info-card__tile img{width:100%;height:100%;object-fit:cover} .info-card__tile::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(transparent 45%,rgba(20,52,35,.72)) } .info-card__tile-label{position:relative;z-index:1;font-family:var(--serif); font-size:clamp(1rem,1.9vw,1.2rem);line-height:1.2} /* Placeholder colours rotate by position rather than by an attribute, so an editor cannot pick an unreadable pairing and four cards in a row cannot come out identical. */ .info-cards > .info-card:nth-child(4n+1) .info-card__tile--placeholder{background:var(--green);color:var(--cream)} .info-cards > .info-card:nth-child(4n+2) .info-card__tile--placeholder{background:var(--green-900);color:var(--gold)} .info-cards > .info-card:nth-child(4n+3) .info-card__tile--placeholder{background:var(--gold);color:var(--green-900)} .info-cards > .info-card:nth-child(4n+4) .info-card__tile--placeholder{background:var(--green-700);color:var(--cream)} .info-card__kind{ position:absolute;left:14px;top:13px;z-index:3;line-height:1; background:var(--cream);color:var(--green-900);padding:.55em .75em; font-family:var(--sans);font-size:.61rem;font-weight:700;letter-spacing:.12em; text-transform:uppercase } .info-card__body{display:flex;flex-direction:column;flex:1;padding:clamp(1.4rem,2.6vw,1.9rem)} .info-card__body h3{font-size:clamp(1.15rem,2.3vw,1.5rem);line-height:1.25;margin-bottom:.9rem} .info-card__body > :last-child{margin-bottom:0} .info-card__link{margin-top:auto;padding-top:1.1rem} .info-card__link a, .info-card__link span{ display:inline-block;padding-bottom:2px;font-family:var(--sans);font-size:.72rem; font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--fhb-link,var(--green));border-bottom:2px solid var(--gold) } .info-card__link a::after{content:"";position:absolute;inset:0;z-index:4} .info-card:hover .info-card__link a{color:var(--fhb-link-hover,var(--gold-600))} /* No URL for this reference yet, so the label is plain text. Never a dead href="#" — that is a link that announces itself to a screen reader and then does nothing. */ .info-card__link--inert span{color:var(--ink-soft);border-bottom-color:rgba(20,52,35,.18)} /* ================= PANEL (core/group style variations) ================= Registered on core/group in inc/blocks.php as Panel, Panel · Ireland map and Panel · England map. A tall bordered block with an optional country silhouette bleeding off the bottom-right corner. NO CUSTOM BLOCK. A block with a `country` attribute fails the reusability test outright, and the generic thing underneath — a padded panel with a decorative corner motif — is a core Group that already accepts a palette background, a heading and body copy. Only the treatment was missing, and a treatment is a style variation. The motif is a MASK, not a background-image: mask + background-color:currentColor means the silhouette takes the panel's own text colour, so it reads as a dark ghost on the cream panel and a light one on the green panel with no second asset and no per-panel rule. A `fill="currentColor"` SVG in background-image would inherit nothing — the browser loads it as a separate document. The url()s are relative to this stylesheet; WordPress rewrites them to absolute for the editor canvas via _wp_normalize_relative_css_links(). */ .is-style-fhb-panel, .is-style-fhb-panel-ireland, .is-style-fhb-panel-england{ position:relative;overflow:hidden; padding:clamp(1.7rem,4vw,3.1rem); border:1px solid var(--fhb-hair,rgba(20,52,35,.12)); /* The section head above these is centred; a tall slab of centred body copy is not. Same reasoning as the quote card. */ text-align:left } /* THE TALL FLOOR BELONGS TO THE MAP PANELS ONLY. Split off the shared rule 2026-08-24. It is load-bearing here twice over: it is the sole reason the Ireland/England pair reads as equal height — their columns do not stretch, so both simply bottom out on this same value — and the silhouette is ~341px tall under overflow:hidden, so a shorter panel crops it to a stub. */ .is-style-fhb-panel-ireland, .is-style-fhb-panel-england{min-height:clamp(300px,40vw,540px)} /* Plain Panel keeps a modest floor so the band still has weight, but CENTRES its content. That second part is the fix: a floor above content height on a normal-flow block box always dumps its slack below the content, never around it, which is why the one card using this style carried ~180px of dead space under its copy against the old 540px. Grid + align-content splits whatever slack remains. Note .is-style-fhb-panel does not match .is-style-fhb-panel-ireland — different class tokens — so the map variants keep block flow and their own floor above. */ .is-style-fhb-panel{min-height:380px;display:grid;align-content:center} .is-style-fhb-panel-ireland::after, .is-style-fhb-panel-england::after{ content:"";position:absolute;right:-4%;bottom:-7%;pointer-events:none; width:min(260px,58%);aspect-ratio:var(--fhb-motif-ratio); /* currentColor by default, but NOT currentColor directly. Core only emits a `color` when the editor picks a text colour, so a Group given a deep-green background and nothing else still has ink as its currentColor — the silhouette came out near-black on near-black and vanished. The dark background sets below override the token. Overriding `color` there instead would beat core's own text-colour control, which prints earlier in the cascade at the same specificity. */ background-color:var(--fhb-motif-ink,currentColor);opacity:.12; -webkit-mask:var(--fhb-motif) no-repeat center/contain; mask:var(--fhb-motif) no-repeat center/contain } .is-style-fhb-panel-ireland{ --fhb-motif:url("../images/maps/ireland.svg");--fhb-motif-ratio:299.2/393 } .is-style-fhb-panel-england{ --fhb-motif:url("../images/maps/england.svg");--fhb-motif-ratio:451/581 } /* ================= RECIPES ================= */ /* Column count comes from how many cards actually rendered (.recipes--1/2/3), so asking for three when two are published still produces a correct grid. */ .recipes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,2rem)} .recipes--1{grid-template-columns:minmax(0,420px);justify-content:center} .recipes--2{grid-template-columns:repeat(2,1fr)} .recipes--3{grid-template-columns:repeat(3,1fr)} /* Card style follows mockups/homepage-2.html (.rcard there): softer 10px radius, the category as a pill overlaid on the image rather than a meta line above the title, and a bordered footer carrying the time beside a clock. Typography stays on this theme's tokens — h3 inherits --serif from the global heading rule, micro-labels use --sans. */ .recipe{background:var(--white);border-radius:10px;overflow:hidden;box-shadow:var(--shadow-sm); transition:.25s;position:relative;display:flex;flex-direction:column} /* One link per card, on the title, stretched over the whole card. Keeps the card navigable by keyboard and screen reader while staying clickable by mouse. */ .recipe__body h3 a{color:inherit;text-decoration:none} .recipe__body h3 a::after{content:"";position:absolute;inset:0;z-index:2} .recipe__body h3 a:focus-visible{outline:none} .recipe:focus-within{outline:2px solid var(--gold);outline-offset:2px;box-shadow:var(--shadow)} .recipe:hover{transform:translateY(-5px);box-shadow:var(--shadow)} .recipe__media{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--cream-2)} .recipe__media img{width:100%;height:100%;object-fit:cover;transition:.5s} .recipe:hover .recipe__media img{transform:scale(1.05)} /* Sits above the image, below the stretched title link (z-index 2). A recipe can carry more than one category and the card shows all of them, so the positioning lives on the wrapper and the pills wrap along the top edge rather than stacking on top of each other. max-width keeps them inside the 12px inset on both sides. */ .recipe__cats{position:absolute;top:12px;left:12px;z-index:1; display:flex;flex-wrap:wrap;gap:.35rem;max-width:calc(100% - 24px)} .recipe__cat{background:rgba(20,52,35,.88); color:var(--cream);font-family:var(--sans);font-size:.6rem;font-weight:700;letter-spacing:.14em; text-transform:uppercase;padding:.45em .9em;border-radius:50px;backdrop-filter:blur(2px)} .recipe__body{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;flex:1} .recipe__body h3{font-size:1.5rem;line-height:1.05;margin-bottom:.5rem} /* flex:1 pushes the footer down, so footers line up across cards whose descriptions differ in length. */ .recipe__body p{font-size:.9rem;color:var(--ink-soft);flex:1;margin:0 0 1rem} .recipe__foot{display:flex;justify-content:space-between;align-items:center;gap:1rem; border-top:1px solid var(--cream-2);padding-top:.9rem;font-family:var(--sans); font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase; color:var(--ink-soft)} .recipe__time{display:inline-flex;align-items:center;gap:.4em} .recipe__foot svg{width:13px;height:13px;stroke:var(--gold-600);fill:none;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round} /* A span, not a link — the whole card is already the title's link. Pushed right so it still reads as the affordance the mockup drew. */ .recipe__view{color:var(--gold-600);margin-left:auto} /* Retained for the single recipe template's header, which still uses a meta line. */ .recipe__meta{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-600); font-weight:700;margin-bottom:.6rem;display:flex;gap:.7rem;flex-wrap:wrap} /* ---- single recipe ---- Ingredients beside a numbered method, following the Kerrygold reference. Stacks below 820px with ingredients first, which is the order you cook in. */ .recipe-detail{max-width:900px} .recipe-detail__head{text-align:center;max-width:680px;margin:0 auto 2rem} .recipe-detail__head h1{font-size:clamp(2.2rem,5vw,3.4rem);margin:.4rem 0 1rem} .recipe-detail__head .recipe__meta{justify-content:center} .recipe-detail__head .recipe__meta a{color:var(--gold-600)} .recipe-detail__hero{margin:0 0 2.6rem} .recipe-detail__hero img{border-radius:6px;box-shadow:var(--shadow);width:100%} .recipe-detail__method{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:clamp(2rem,5vw,4rem);align-items:start} .recipe-detail__method h2{font-size:1.5rem;margin-bottom:1rem;padding-bottom:.6rem; border-bottom:2px solid var(--gold)} .recipe-detail__ingredients ul{margin:0;padding-left:1.2rem} .recipe-detail__ingredients li{margin-bottom:.6rem;color:var(--ink-soft)} .recipe-detail__instructions ol{margin:0;padding-left:1.4rem} .recipe-detail__instructions li{margin-bottom:1rem;padding-left:.3rem} .recipe-detail__instructions li::marker{font-family:var(--serif);font-weight:700;color:var(--gold-600)} .recipe-detail__notes{margin-top:2.6rem;max-width:none} .recipe-detail__cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:3rem; padding-top:2rem;border-top:1px solid var(--cream-2)} @media(max-width:820px){ .recipe-detail__method{grid-template-columns:1fr} } /* ---- recipe filter (fhb/recipe-cards with filtering on) ---- Two dropdown multi-selects, Categories and Times. Ships hidden and is revealed by main.js, so without JS visitors get every recipe rather than controls that do nothing. Each menu holds plain checkboxes: multiple choices within a group are OR'd, and the two groups are AND'd together. */ .rfilter{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem; margin-bottom:clamp(1.8rem,4vw,2.6rem);padding-bottom:1.4rem; border-bottom:1px solid var(--cream-2)} .rfilter__group{position:relative} .rfilter__toggle{display:inline-flex;align-items:center;gap:.6em;cursor:pointer; font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--ink);background:var(--white); border:1.5px solid var(--cream-2);border-radius:50px;padding:.75em 1.2em; transition:.2s ease} .rfilter__toggle:hover{border-color:var(--gold)} .rfilter__toggle[aria-expanded="true"]{border-color:var(--green);color:var(--green)} .rfilter__chev{display:grid;place-items:center;transition:transform .2s ease} .rfilter__chev svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2; stroke-linecap:round;stroke-linejoin:round} .rfilter__toggle[aria-expanded="true"] .rfilter__chev{transform:rotate(180deg)} /* Count of checked options, so a collapsed menu still says how much is filtered. */ .rfilter__badge{display:grid;place-items:center;min-width:1.5em;height:1.5em;padding:0 .35em; border-radius:50px;background:var(--green);color:var(--cream);font-size:.66rem; letter-spacing:0} .rfilter__menu{position:absolute;top:calc(100% + 8px);left:0;z-index:30;min-width:220px; max-height:min(340px,60vh);overflow-y:auto;background:var(--white);border-radius:6px; border-top:3px solid var(--gold);box-shadow:var(--shadow);padding:.5rem} .rfilter__opt{display:flex;align-items:center;gap:.7em;padding:.6em .8em;border-radius:3px; cursor:pointer;font-family:var(--sans);font-size:.9rem;color:var(--ink);transition:.15s ease} .rfilter__opt:hover{background:var(--cream)} .rfilter__opt input{width:17px;height:17px;flex:0 0 auto;accent-color:var(--green);cursor:pointer; margin:0} .rfilter__opt:has(input:checked){color:var(--green);font-weight:600} .rfilter__clear{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.08em; text-transform:uppercase;color:var(--ink-soft);background:none;border:0;cursor:pointer; padding:.6em .4em;text-decoration:underline;text-underline-offset:3px} .rfilter__clear:hover{color:var(--green)} .rfilter__empty{text-align:center;color:var(--ink-soft);font-family:var(--serif-soft); font-size:1.1rem;margin:2rem 0 0} /* On a dark section the closed control has to invert; the open menu stays a light panel, because it sits above the section rather than in it. */ .section--green .rfilter__toggle, .section--green-dark .rfilter__toggle{background:transparent;color:rgba(247,242,231,.85); border-color:rgba(247,242,231,.3)} .section--green .rfilter__toggle:hover, .section--green-dark .rfilter__toggle:hover{border-color:var(--gold);color:var(--gold)} .section--green .rfilter__toggle[aria-expanded="true"], .section--green-dark .rfilter__toggle[aria-expanded="true"]{border-color:var(--gold); color:var(--gold)} .section--green .rfilter__badge, .section--green-dark .rfilter__badge{background:var(--gold);color:var(--green-900)} .section--green .rfilter__clear, .section--green-dark .rfilter__clear{color:rgba(247,242,231,.75)} .section--green .rfilter__clear:hover, .section--green-dark .rfilter__clear:hover{color:var(--gold)} .section--green .rfilter__empty, .section--green-dark .rfilter__empty{color:rgba(247,242,231,.85)} /* ================= SOCIAL PROOF ================= */ /* Resized 2026-08-24: 50/50 rather than the mockup's 1.15fr/.85fr, both cards floored at 520px (440px once stacked), and the quote and play control scaled up to suit. THE FLOORS GO ON THE TWO CHILDREN, NOT ON .proof. A min-height on the grid container is distributed across its rows, so once the grid collapses to one column at 960px a 520px container would give two ~260px cards rather than two 520px ones. On the children it reads correctly in both layouts: at desktop align-items:stretch equalises them to the taller of the two, and stacked each floors independently. */ .proof{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:stretch} .quote-card{background:var(--white);border-radius:6px;padding:clamp(2.4rem,4.6vw,4rem); min-height:520px; box-shadow:var(--shadow-sm);display:flex;flex-direction:column;justify-content:center; border-left:4px solid var(--gold)} .quote-card .qmark{font-family:var(--serif);font-size:4.8rem;color:var(--gold);line-height:.6;height:2.4rem} /* The prose default deliberately does not reach .quote-card blockquote p (see the "Prose defaults" note), so this font-size is the single source and the paragraphs inherit it. Do not add --fhb-prose-size here. */ .quote-card blockquote{margin:0;font-family:var(--serif-soft);font-size:clamp(1.55rem,2.4vw,2.05rem); line-height:1.35;color:var(--green);font-style:italic} .quote-card cite{display:block;margin-top:1.9rem;font-style:normal;font-family:var(--sans); font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);font-weight:600} .quote-card cite b{color:var(--gold-600);display:block;letter-spacing:.12em} .quote-card .placeholder-note{display:block;font-weight:400;letter-spacing:.04em;text-transform:none; margin-top:.4rem;font-family:var(--serif-soft);font-style:italic;color:var(--ink-soft)} /* No min-height here: the renderer always emits `class="proof__media video"`, so the floor is declared once on .proof__media below rather than in both places. */ .video{position:relative;border-radius:6px;overflow:hidden;box-shadow:var(--shadow-sm); background:var(--green-900);display:grid;place-items:center;text-align:center; color:var(--cream)} .video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45} .video__inner{position:relative;z-index:2;padding:2.4rem} .video__label{font-family:var(--serif);font-size:1.3rem} .video .play{width:96px;height:96px;border-radius:50%;background:rgba(247,242,231,.15); border:2px solid var(--cream);display:grid;place-items:center;margin:0 auto 1.1rem;cursor:pointer; transition:.2s} .video .play:hover{background:var(--gold);border-color:var(--gold)} .video .play svg{width:34px;height:34px;fill:var(--cream);margin-left:5px} .video .play:hover svg{fill:var(--green-900)} .video small{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase; opacity:.75;margin-top:.6rem} /* .play is a real