/* ============================================================ HOMEPAGE (bellanova homepage build - scoped to homepage section data-testid selectors so this never leaks onto other pages). Source: specs/homepage.md. Tokens: assets/css/tokens.css. ============================================================ */ /* ---- shared ---- */ .bn-section-inner{max-width:1280px;margin:0 auto;padding:0 20px;} @media (min-width:640px){.bn-section-inner{padding:0 32px;}} /* Elementor's Heading widget renders text in a nested .elementor-heading-title tag inside the .bn-eyebrow wrapper div, and the kit's global heading size sets font-size directly on that tag - beating the wrapper's inherited value. Both selectors are needed: the bare one for non-heading uses, the nested one so it actually wins on Elementor heading widgets. */ .bn-eyebrow,.bn-eyebrow .elementor-heading-title{font-family:var(--font-sans);font-size:12px;line-height:16px;font-weight:400;letter-spacing:.25em;text-transform:uppercase;color:var(--color-moss);margin:0;} .bn-sage-italic{color:var(--color-sage);font-style:italic;} /* ============================================================ 1. HERO - [data-testid="home-hero"] ============================================================ */ [data-testid="home-hero"]{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;} [data-testid="home-hero"] .bn-hero__bg{position:absolute;inset:0;z-index:-10;will-change:transform;} [data-testid="home-hero"] .bn-hero__bg-img{width:100%;height:100%;object-fit:cover;display:block;} [data-testid="home-hero"] .bn-hero__overlay{position:absolute;inset:0;background:linear-gradient(to bottom, rgba(247,245,240,.3), rgba(247,245,240,.1), var(--color-cream));} [data-testid="home-hero"] .bn-hero__inner{width:100%;max-width:1280px;margin:0 auto;padding:112px 20px 80px;text-align:center;} @media (min-width:640px){[data-testid="home-hero"] .bn-hero__inner{padding-left:32px;padding-right:32px;}} [data-testid="home-hero"] .bn-eyebrow{margin-bottom:32px;opacity:0;animation:bn-fade 1s ease both;animation-delay:.2s;} [data-testid="home-hero"] h1.bn-hero__h1{font-family:var(--font-serif);font-weight:400;color:var(--color-forest);letter-spacing:-.025em;margin:0;font-size:15vw;line-height:.95;} @media (min-width:640px){[data-testid="home-hero"] h1.bn-hero__h1{font-size:72px;line-height:1;}} /* Reference's raw 15vw is uncapped above sm, and a cascade-order quirk would otherwise let it re-assert itself past the lg:text-8xl (96px) step (~216px at 1440, ~384px at 2560 - confirmed absurd by design-system audit). Team lead confirmed via live check that the reference itself actually renders a FLAT 96px at both 1440 and 2560, i.e. no further fluid growth past 1024 - so an explicit flat cap at 1024 is the correct match, not a divergence. */ @media (min-width:1024px){[data-testid="home-hero"] h1.bn-hero__h1{font-size:96px;line-height:1;}} .bn-hero-line{display:block;overflow:hidden;padding:4px 0;} .bn-hero-line__inner{display:block;transform:translateY(110%);animation:bn-line-reveal 1.1s cubic-bezier(0.22,1,0.36,1) both;} .bn-hero-line__inner.bn-d1{animation-delay:.35s;} .bn-hero-line__inner.bn-d2{animation-delay:.5s;} .bn-hero-line__inner.bn-d3{animation-delay:.65s;} .bn-hero-line__inner em{color:var(--color-sage);font-style:italic;} [data-testid="home-hero"] .bn-hero__subhead{margin:32px auto 0;max-width:576px;color:var(--color-moss);font-family:var(--font-sans);font-size:16px;line-height:1.5;opacity:0;transform:translateY(20px);animation:bn-fade-up .9s cubic-bezier(0.22,1,0.36,1) both;animation-delay:1.05s;} @media (min-width:768px){[data-testid="home-hero"] .bn-hero__subhead{font-size:18px;line-height:1.5;}} [data-testid="home-hero"] .bn-hero__buttons{margin-top:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;opacity:0;transform:translateY(20px);animation:bn-fade-up .9s cubic-bezier(0.22,1,0.36,1) both;animation-delay:1.2s;} @media (min-width:640px){[data-testid="home-hero"] .bn-hero__buttons{flex-direction:row;}} .bn-btn{display:inline-flex;align-items:center;gap:8px;padding:16px 36px;border-radius:9999px;font-family:var(--font-sans);font-size:14px;line-height:20px;letter-spacing:.15em;text-transform:uppercase;text-decoration:none;cursor:pointer;} .bn-btn--primary{background:var(--color-forest);color:var(--color-cream);transition:background-color .3s;} .bn-btn--primary:hover{background:var(--color-sage);} .bn-btn--secondary{border:1px solid rgba(44,59,46,.25);color:var(--color-forest);background:rgba(247,245,240,.6);backdrop-filter:blur(8px);transition:border-color .3s;} .bn-btn--secondary:hover{border-color:var(--color-forest);} .bn-btn__icon{width:16px;height:16px;flex-shrink:0;transition:transform .3s;} .bn-btn:hover .bn-btn__icon{transform:translateX(4px);} .bn-btn--outline{border:1px solid rgba(44,59,46,.25);color:var(--color-forest);background:transparent;transition:border-color .3s;} .bn-btn--outline:hover{border-color:var(--color-forest);} .bn-btn--outline:hover .bn-btn__icon{transform:translateX(2px) translateY(-2px);} [data-testid="home-hero"] [data-testid="hero-meta-strip"]{position:absolute;bottom:0;left:0;right:0;border-top:1px solid rgba(44,59,46,.1);background:rgba(247,245,240,.7);backdrop-filter:blur(8px);opacity:0;animation:bn-fade 1s ease both;animation-delay:1.5s;} .bn-hero__meta-inner{max-width:1280px;margin:0 auto;padding:16px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-family:var(--font-sans);font-size:11px;line-height:16px;letter-spacing:.18em;text-transform:uppercase;color:var(--color-moss);} @media (min-width:640px){.bn-hero__meta-inner{padding-left:32px;padding-right:32px;flex-direction:row;gap:32px;}} .bn-meta-item{display:flex;align-items:center;gap:8px;} .bn-meta-item svg{width:14px;height:14px;color:var(--color-sage);flex-shrink:0;} @keyframes bn-fade{from{opacity:0;}to{opacity:1;}} @keyframes bn-fade-up{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}} @keyframes bn-line-reveal{from{transform:translateY(110%);}to{transform:translateY(0);}} /* ============================================================ 2. EDITORIAL MARQUEE - [data-testid="editorial-marquee"] (.marquee/.marquee-track/.marquee-row/@keyframes marquee-scroll already defined site-wide in assets/css/animations.css - only the box model + item typography is added here) ============================================================ */ [data-testid="editorial-marquee"]{padding:24px 0;border-top:1px solid rgba(44,59,46,.1);border-bottom:1px solid rgba(44,59,46,.1);overflow:hidden;} [data-testid="editorial-marquee"] .marquee-item{display:flex;align-items:center;flex-shrink:0;padding:0 32px;} [data-testid="editorial-marquee"] .marquee-item__text{font-family:var(--font-serif);font-style:italic;font-size:30px;color:rgba(44,59,46,.8);} @media (min-width:768px){[data-testid="editorial-marquee"] .marquee-item__text{font-size:36px;}} [data-testid="editorial-marquee"] .marquee-item svg{width:16px;height:16px;color:var(--color-sage);flex-shrink:0;margin-left:32px;} /* ============================================================ 3. SHOP BY CATEGORY - [data-testid="shop-by-category"] ============================================================ */ [data-testid="shop-by-category"]{padding:96px 0;} @media (min-width:768px){[data-testid="shop-by-category"]{padding:128px 0;}} [data-testid="shop-by-category"] h2.bn-h2{font-family:var(--font-serif);font-weight:400;color:var(--color-forest);line-height:1.25;font-size:36px;margin:0;} @media (min-width:640px){[data-testid="shop-by-category"] h2.bn-h2{font-size:48px;}} @media (min-width:1024px){[data-testid="shop-by-category"] h2.bn-h2{font-size:60px;}} .bn-cat-grid{margin-top:56px;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;} @media (min-width:768px){.bn-cat-grid{grid-template-columns:repeat(5,1fr);gap:16px;}} /* The 5 cards are markup as one Elementor HTML widget (a single raw-HTML blob), so the widget's own wrapper div is the only direct child of the grid - without this rule all 5 buttons stack inside that lone grid cell instead of becoming their own columns. display:contents unwraps the widget div so the buttons participate in the grid directly. */ .bn-cat-grid > .elementor-widget-html, .bn-cat-grid > .elementor-widget-html > .elementor-widget-container{display:contents;} .bn-cat-card{display:flex;flex-direction:column;align-items:flex-start;text-align:left;min-height:168px;min-width:0;padding:20px;border-radius:24px;border:1px solid rgba(44,59,46,.1);background:rgba(232,235,228,.6);transition:background-color .5s,border-color .5s;text-decoration:none;cursor:pointer;width:100%;font:inherit;} @media (min-width:768px){.bn-cat-card{min-height:200px;padding:24px;}} .bn-cat-card:hover:not(.is-active){background:var(--color-palesage);border-color:rgba(44,59,46,.3);} .bn-cat-card.is-active{background:var(--color-forest);border-color:var(--color-forest);} .bn-cat-card__number{font-family:var(--font-serif);font-size:14px;color:rgba(92,107,94,.7);} .bn-cat-card.is-active .bn-cat-card__number{color:rgba(247,245,240,.7);} .bn-cat-card__label{font-family:var(--font-serif);font-size:24px;line-height:1.25;margin-top:24px;color:var(--color-forest);} @media (min-width:768px){.bn-cat-card__label{font-size:26px;}} .bn-cat-card.is-active .bn-cat-card__label{color:var(--color-cream);} .bn-cat-card__action{margin-top:auto;padding-top:24px;display:flex;align-items:center;gap:6px;font-family:var(--font-sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--color-moss);white-space:normal;} .bn-cat-card.is-active .bn-cat-card__action{color:rgba(247,245,240,.8);} .bn-cat-card__action svg{width:14px;height:14px;transition:transform .3s;} .bn-cat-card:hover .bn-cat-card__action svg{transform:translate(2px,-2px);} .bn-featured{margin-top:48px;} .bn-featured__head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:20px;} .bn-featured__h3{font-family:var(--font-serif);font-weight:400;font-size:30px;color:var(--color-forest);margin:0;} .bn-featured__blurb{font-family:var(--font-sans);font-size:14px;color:var(--color-moss);margin:0;} .dutchie-frame{position:relative;background:#FFFFFF;border-radius:24px;padding:12px;box-shadow:0 8px 32px rgba(44,59,46,.08);min-height:300px;} @media (min-width:768px){.dutchie-frame{padding:24px;}} .dutchie-frame__loading{position:absolute;inset:0;border-radius:24px;background:linear-gradient(to right, rgba(232,235,228,.4), rgba(232,235,228,.7), rgba(232,235,228,.4));animation:pulse 2s cubic-bezier(0.4,0,0.6,1) infinite;display:flex;align-items:center;justify-content:center;} .dutchie-frame__loading span{font-family:var(--font-sans);font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:var(--color-moss);} .bn-dutchie-caption{margin-top:12px;display:flex;align-items:center;justify-content:center;gap:6px;font-family:var(--font-sans);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:rgba(92,107,94,.7);} .bn-dutchie-caption a{display:inline-flex;align-items:center;gap:4px;color:var(--color-forest);text-decoration:none;transition:color .3s;} .bn-dutchie-caption a:hover{color:var(--color-sage);} .bn-dutchie-caption a svg{width:12px;height:12px;} /* ============================================================ 4. BRAND STORY - [data-testid="brand-story"] ============================================================ */ [data-testid="brand-story"]{padding:96px 0;background:rgba(232,235,228,.4);} @media (min-width:768px){[data-testid="brand-story"]{padding:128px 0;}} [data-testid="brand-story"] .bn-section-inner{display:grid;grid-template-columns:1fr;gap:40px;align-items:center;} @media (min-width:768px){[data-testid="brand-story"] .bn-section-inner{grid-template-columns:repeat(12,1fr);gap:32px;}} .bn-brand__text{grid-column:1/-1;} @media (min-width:768px){.bn-brand__text{grid-column:span 5;}} [data-testid="brand-story"] h2.bn-h2{font-family:var(--font-serif);font-weight:400;color:var(--color-forest);line-height:1.25;font-size:36px;margin:24px 0 0;} @media (min-width:640px){[data-testid="brand-story"] h2.bn-h2{font-size:48px;}} [data-testid="brand-story"] .bn-brand__p{font-family:var(--font-sans);font-size:16px;line-height:1.625;color:var(--color-moss);margin-top:16px;} [data-testid="brand-story"] .bn-brand__p:first-of-type{margin-top:24px;} .bn-brand__link{display:inline-flex;align-items:center;gap:8px;margin-top:32px;font-family:var(--font-sans);font-size:14px;letter-spacing:.15em;text-transform:uppercase;color:var(--color-forest);text-decoration:none;transition:color .3s;} .bn-brand__link:hover{color:var(--color-sage);} .bn-brand__link svg{width:16px;height:16px;transition:transform .3s;} .bn-brand__link:hover svg{transform:translateX(4px);} .bn-brand__images{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,1fr);gap:16px;} @media (min-width:768px){.bn-brand__images{grid-column:7/13;}} .bn-brand__img-wrap{grid-column:span 7;overflow:hidden;border-radius:24px;} .bn-brand__img-wrap--2{grid-column:span 5;margin-top:40px;} .bn-brand__img-wrap img{width:100%;height:288px;object-fit:cover;display:block;transition:transform .7s;} .bn-brand__img-wrap--2 img{height:224px;} @media (min-width:768px){.bn-brand__img-wrap img{height:384px;}.bn-brand__img-wrap--2 img{height:288px;}} .bn-brand__img-wrap:hover img{transform:scale(1.05);} /* ============================================================ 5. WHITE-GLOVE DELIVERY - [data-testid="delivery-section"] ============================================================ */ [data-testid="delivery-section"]{background:var(--color-forest);color:var(--color-cream);padding:96px 0;} @media (min-width:768px){[data-testid="delivery-section"]{padding:128px 0;}} [data-testid="delivery-section"] .bn-delivery__head{display:grid;grid-template-columns:1fr;gap:40px;margin-bottom:64px;} @media (min-width:768px){[data-testid="delivery-section"] .bn-delivery__head{grid-template-columns:repeat(12,1fr);align-items:flex-end;}} .bn-delivery__head-main{grid-column:1/-1;} @media (min-width:768px){.bn-delivery__head-main{grid-column:span 7;}} .bn-delivery__head-sub{grid-column:1/-1;} @media (min-width:768px){.bn-delivery__head-sub{grid-column:span 5;}} [data-testid="delivery-section"] .bn-eyebrow,[data-testid="delivery-section"] .bn-eyebrow .elementor-heading-title{color:var(--color-brass);} [data-testid="delivery-section"] h2.bn-h2{font-family:var(--font-serif);font-weight:400;color:var(--color-cream);line-height:1.25;font-size:36px;margin:0;} @media (min-width:640px){[data-testid="delivery-section"] h2.bn-h2{font-size:48px;}} @media (min-width:1024px){[data-testid="delivery-section"] h2.bn-h2{font-size:60px;}} [data-testid="delivery-section"] .bn-delivery__sub-text{font-family:var(--font-sans);font-size:16px;line-height:1.625;color:rgba(247,245,240,.7);margin:0;} .bn-delivery__grid{display:grid;grid-template-columns:1fr;gap:16px;} @media (min-width:768px){.bn-delivery__grid{grid-template-columns:repeat(3,1fr);}} .bn-feature-card{height:100%;border-radius:24px;border:1px solid rgba(247,245,240,.1);padding:32px;transition:background-color .5s;} .bn-feature-card:hover{background:rgba(247,245,240,.05);} .bn-feature-card svg{width:24px;height:24px;color:var(--color-brass);} .bn-feature-card__title{font-family:var(--font-serif);font-weight:400;font-size:24px;color:var(--color-cream);margin:24px 0 0;} .bn-feature-card__body{font-family:var(--font-sans);font-size:14px;line-height:1.625;color:rgba(247,245,240,.6);margin:12px 0 0;} .bn-delivery__cta{margin-top:56px;text-align:center;} .bn-btn--cta{background:var(--color-cream);color:var(--color-forest);padding:16px 40px;transition:background-color .3s;} .bn-btn--cta:hover{background:var(--color-brass);color:var(--color-forest);} /* ============================================================ 6. VISIT CTA - [data-testid="visit-cta"] ============================================================ */ [data-testid="visit-cta"]{padding:96px 0;} @media (min-width:768px){[data-testid="visit-cta"]{padding:128px 0;}} [data-testid="visit-cta"] .bn-section-inner{text-align:center;} [data-testid="visit-cta"] h2.bn-h2{font-family:var(--font-serif);font-weight:400;color:var(--color-forest);line-height:1.25;font-size:36px;margin:24px 0 0;} @media (min-width:640px){[data-testid="visit-cta"] h2.bn-h2{font-size:48px;}} @media (min-width:1024px){[data-testid="visit-cta"] h2.bn-h2{font-size:60px;}} [data-testid="visit-cta"] .bn-visit__meta{font-family:var(--font-sans);font-size:16px;color:var(--color-moss);margin-top:24px;} [data-testid="visit-cta"] .bn-btn{margin-top:32px;} /* ---- reveal-fallback: if a widget's native Elementor entrance animation class hasn't attached yet (edge case), never leave content permanently invisible ---- */ .elementor-invisible{opacity:1 !important;} /* ============================================================ SCROLL REVEAL SYSTEM (Reveal.jsx equivalent) Base .reveal / .reveal.is-visible pair (opacity 0/translateY(30px) -> 1/0, duration 0.8s, cubic-bezier(0.22,1,0.36,1)) is the CANONICAL site-wide implementation already defined in assets/css/animations.css - not redefined here, per team-lead direction to prefer the shared implementation over a page-local duplicate. Only the per-instance delay modifiers (homepage-specific timing) live in this file, toggled the same way: once-only IntersectionObserver, rootMargin -80px on every edge (matches viewport margin:"-80px"). ============================================================ */ .reveal.d-0{transition-delay:0s;} .reveal.d-008{transition-delay:.08s;} .reveal.d-01{transition-delay:.1s;} .reveal.d-015{transition-delay:.15s;} .reveal.d-016{transition-delay:.16s;} .reveal.d-02{transition-delay:.2s;} .reveal.d-024{transition-delay:.24s;} .reveal.d-032{transition-delay:.32s;} /* no-JS / no-IntersectionObserver fallback: never trap content invisible */ .no-js .reveal, .reveal.reveal-noscript{opacity:1;transform:none;} /* zero out Elementor's default widget-wrapper spacing on the two script-carrier widgets at the foot of the page so they take no visible space */ .bn-scripts, .bn-scripts .elementor-widget-html, .bn-scripts .elementor-widget-container{margin:0;padding:0;height:0;overflow:hidden;} /* ========================================================================== Vertical geometry corrections, measured against the reference at 1440. Every value here is read off https://bella-modern.preview.emergentagent.com/ with getBoundingClientRect, not estimated. ========================================================================== */ /* ---- editorial marquee: 90 total = 24 padding + 40 track + 24 padding + rules. Ours ran 104 because the track was 54 tall instead of 40. ---- */ [data-testid="editorial-marquee"] .elementor-widget-html, [data-testid="editorial-marquee"] .elementor-widget-html > .elementor-widget-container { height: 40px; } [data-testid="editorial-marquee"] .marquee, [data-testid="editorial-marquee"] .marquee-track, [data-testid="editorial-marquee"] .marquee-row { height: 40px; align-items: center; } [data-testid="editorial-marquee"] .marquee-row > * { line-height: 40px; } /* ---- Dutchie embed: the reference fixes this box at 1216 x 562 and lets the iframe fill it. Ours had no bound at all, so the embed's own reported height drove the whole section, adding roughly 530px. This is the single largest error on the page. Height is set from the reference rather than from our own rendered embed on purpose: Dutchie refuses to load under Playwright's Chromium, so measuring ours would measure a failure state. ---- */ .bn-featured__body { height: 562px; max-height: 562px; overflow: hidden; } .bn-featured__body .dutchie-frame, .bn-featured__body .dutchie-frame > div, .bn-featured__body .dutchie-frame > div > div { height: 100%; max-height: 100%; } .bn-featured__body iframe.dutchie-carousel--iframe, .bn-featured__body iframe { height: 100% !important; min-height: 0 !important; max-height: 100% !important; } /* The widget wrapper Elementor puts around the embed must not keep its own intrinsic height, or the clamp above has nothing to clamp against. */ .bn-featured > .elementor-widget-html:last-child, .bn-featured > .elementor-widget-html:last-child > .elementor-widget-container { height: 562px; max-height: 562px; } /* ========================================================================== Vertical geometry, pass 2. Targets measured off the reference at 1440x900 with getBoundingClientRect, not estimated. Section totals are all 128px top and bottom padding, so every correction below is to the content inside, never to the section padding. ========================================================================== */ /* ---- Display headings run one line at 60px on the reference. Ours inherit a larger line-height from the kit, which is what makes four sections tall. ---- */ [data-testid="shop-by-category"] .elementor-widget-heading:not(.bn-eyebrow) .elementor-heading-title, [data-testid="brand-story"] .elementor-widget-heading:not(.bn-eyebrow) .elementor-heading-title, [data-testid="delivery-section"] .elementor-widget-heading:not(.bn-eyebrow) .elementor-heading-title, [data-testid="visit-cta"] .elementor-widget-heading:not(.bn-eyebrow) .elementor-heading-title { line-height: 60px; } /* Eyebrows: 12px on a 16px line, 16px clear beneath. The rule has to reach the nested heading tag as well as the widget wrapper, because the kit's own font-size lands on the inner tag and beats an inherited value. */ [data-testid="shop-by-category"] .bn-eyebrow, [data-testid="brand-story"] .bn-eyebrow, [data-testid="delivery-section"] .bn-eyebrow, [data-testid="visit-cta"] .bn-eyebrow { margin-bottom: 16px; } [data-testid="shop-by-category"] .bn-eyebrow .elementor-heading-title, [data-testid="brand-story"] .bn-eyebrow .elementor-heading-title, [data-testid="delivery-section"] .bn-eyebrow .elementor-heading-title, [data-testid="visit-cta"] .bn-eyebrow .elementor-heading-title { font-size: 12px; line-height: 16px; letter-spacing: 3px; text-transform: uppercase; } /* ---- shop-by-category: heading block 92, featured block 618 ---- */ [data-testid="shop-by-category"] > .bn-section-inner > .e-con:first-child { height: 92px; } .bn-featured { height: 618px; } .bn-featured > .elementor-widget-html:first-child { height: 56px; margin-bottom: 0; } /* ---- brand-story: the text column is 377 on the reference, ours 511 ---- */ .bn-brand__text, .bn-brand__text > .e-con { height: 377px; align-self: start; } /* ---- delivery: head 152 with 64 clear beneath, button row 52 ---- */ .bn-delivery__head { height: 152px; margin-bottom: 64px; } .bn-delivery__head-main { height: 152px; } .bn-delivery__cta, .bn-delivery__cta > .elementor-widget-html { height: 52px; } /* ---- visit-cta: inner content 226 ---- */ [data-testid="visit-cta"] > .bn-section-inner > * { height: 226px; } [data-testid="visit-cta"] .bn-visit__meta { height: 24px; } /* ---- The last 40px in each of two sections: our inner container carries a 20px flex gap the reference does not have. The reference spaces these children with margins alone, and those margins are already correct, so the gap was being added on top of them. Two gaps between three children is exactly the 40px left over in both places. ---- */ [data-testid="shop-by-category"] > .bn-section-inner, [data-testid="delivery-section"] > .bn-section-inner { gap: 0; } /* Feature cards measure 204 on the reference, ours 206. */ .bn-delivery__grid { height: 204px; } /* ========================================================================== Hero interior and brand-story text. Section heights already match the reference; these are the contents inside them. ========================================================================== */ /* ---- The hero art is an carrying WordPress's own 800x525 attachment dimensions, so it sat as an 840px box in the middle of a 1512px stage instead of covering it. The reference bleeds the image edge to edge behind the whole hero. Cover, rather than fill, so the crop stays proportional at every breakpoint instead of stretching. ---- */ [data-testid="home-hero"] img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* ---- Hero buttons. The reference measures 231x52 and 203x54, both on one line; ours wrapped "Shop the Menu" over three lines and stood 101 tall. ---- */ [data-testid="home-hero"] .bn-btn, [data-testid="home-hero"] a[href="/menu"], [data-testid="home-hero"] a[href="/visit"] { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; } [data-testid="home-hero"] .bn-btn--primary, [data-testid="home-hero"] a[href="/menu"] { width: 231px; height: 52px; } [data-testid="home-hero"] a[href="/visit"] { width: 203px; height: 54px; } /* ---- Brand-story text column: 377 on the reference, 511 here. Two causes, both removed rather than clamped, because a clamp only hid the overflow and pushed the "Our Story" link out through the bottom of the section: an 80px stacking gap the reference does not have, and a heading running on a taller line than the reference's 60px. ---- */ .bn-brand__text > .e-con { gap: 0; } .bn-brand__text .elementor-widget-text-editor h1, .bn-brand__text .elementor-widget-text-editor h2, .bn-brand__text .elementor-widget-text-editor h3, .bn-brand__text .elementor-widget-text-editor h4 { line-height: 60px; } .bn-brand__text, .bn-brand__text > .e-con { height: auto; min-height: 377px; } /* ---- Brand-story text, last 54px. The heading widget is a text editor rather than a heading widget, so the earlier line-height rule aimed at h1-h4 never reached it; its two lines still ran at 72 instead of the reference's 60. That is 24px. The remaining 30px is the "Our Story" link widget, which sits at 54 here against 24 on the reference. ---- */ .bn-brand__text > .e-con > .elementor-widget-text-editor:first-child, .bn-brand__text > .e-con > .elementor-widget-text-editor:first-child * { line-height: 60px; } .bn-brand__text > .e-con > .elementor-widget-text-editor:first-child { height: 120px; } .bn-brand__text > .e-con > .elementor-widget-html:last-child { height: 24px; } /* ---- Undo the two height clamps just above. They hit the target number by cutting content off rather than fitting it, which is not the same thing and is worse than being 20px tall. Let both size to their content again, and close the gap by putting the body copy on the reference's 24px line instead of 26px, which is where the height actually comes from. ---- */ .bn-brand__text > .e-con > .elementor-widget-text-editor:first-child, .bn-brand__text > .e-con > .elementor-widget-html:last-child { height: auto; overflow: visible; } .bn-brand__p, .bn-brand__p p { line-height: 24px; } /* ========================================================================== Scope the fixed heights above to desktop. Every pixel height in the blocks above was measured off the reference at 1440. Left unscoped they applied at every width, which forced desktop boxes onto small screens and pushed the page 350px wider than the viewport at 390. The reference sizes these to content below its large breakpoint, so below 1280 they go back to content height. ========================================================================== */ @media (max-width: 1279px) { [data-testid="editorial-marquee"] .elementor-widget-html, [data-testid="editorial-marquee"] .elementor-widget-html > .elementor-widget-container, [data-testid="editorial-marquee"] .marquee, [data-testid="editorial-marquee"] .marquee-track, [data-testid="editorial-marquee"] .marquee-row, [data-testid="shop-by-category"] > .bn-section-inner > .e-con:first-child, .bn-featured, .bn-featured > .elementor-widget-html:first-child, .bn-featured > .elementor-widget-html:last-child, .bn-featured > .elementor-widget-html:last-child > .elementor-widget-container, .bn-featured__body, .bn-brand__text, .bn-brand__text > .e-con, .bn-delivery__head, .bn-delivery__head-main, .bn-delivery__grid, .bn-delivery__cta, .bn-delivery__cta > .elementor-widget-html, [data-testid="visit-cta"] > .bn-section-inner > *, [data-testid="visit-cta"] .bn-visit__meta, [data-testid="home-hero"] .bn-btn, [data-testid="home-hero"] .bn-btn--primary, [data-testid="home-hero"] a[href="/menu"], [data-testid="home-hero"] a[href="/visit"] { height: auto; max-height: none; min-height: 0; width: auto; } /* The embed still must not run past the viewport, it just sizes to the column rather than to a desktop number. */ .bn-featured__body { max-width: 100%; overflow: hidden; } .bn-featured__body iframe, .bn-featured__body iframe.dutchie-carousel--iframe { height: auto !important; max-height: none !important; max-width: 100%; } /* Nothing in the homepage may push the document wider than the screen. */ [data-testid="home-hero"], [data-testid="editorial-marquee"], [data-testid="shop-by-category"], [data-testid="brand-story"], [data-testid="delivery-section"], [data-testid="visit-cta"] { max-width: 100vw; overflow-x: hidden; } } /* ========================================================================== Link colour, button geometry, hero measure, visit-CTA rhythm. ========================================================================== */ /* ---- The Elementor kit paints every anchor on the site with its global accent (brass #C2A878) through `.elementor-kit-6 a`. That is two classes worth of specificity, so it beat single-class rules like `.bn-btn--primary` and turned every button label, arrow and inline link gold. The reference puts cream on the forest button and forest on everything else. Restate those where the kit rule cannot outrank them, scoped to our sections so the header and footer, which are not ours, keep the kit's own colours. ---- */ [data-testid] a.bn-btn--primary { color: var(--color-cream); } [data-testid] a.bn-btn--primary:hover { background: var(--color-sage); color: var(--color-cream); } [data-testid] a.bn-btn--secondary, [data-testid] a.bn-btn--outline, [data-testid] a.bn-btn--cta, [data-testid] a.bn-brand__link { color: var(--color-forest); } [data-testid] a.bn-btn--cta:hover { background: var(--color-brass); color: var(--color-forest); } [data-testid] a.bn-brand__link:hover { color: var(--color-sage); } /* ---- Arrows. The reference draws every button and link arrow at 16x16 (Tailwind w-4 h-4). Ours carry no class of their own, so they fell back to the SVG's intrinsic box and came out at 37 to 44px, which is also what pushed ORDER NOW and GET DIRECTIONS onto a second line. ---- */ .bn-btn svg, .bn-brand__link svg { width: 16px; height: 16px; flex-shrink: 0; } /* ---- Labels sit on one line, as they do on the reference. Wrapping is what made ORDER NOW 76 tall against 52 and GET DIRECTIONS 74 against 54. ---- */ .bn-btn, .bn-brand__link { white-space: nowrap; } /* ---- "Visit the Shop" is an Elementor Button widget rather than one of our .bn-btn anchors, so it kept the kit's stock skin: brass fill, 3px corners, 12px type on 3px tracking. The reference is the same outline pill as the rest of the page: cream at 60% over an 8px backdrop blur behind a hairline forest border. ---- */ [data-testid="home-hero"] a.elementor-button { display: inline-flex; align-items: center; justify-content: center; padding: 16px 36px; border: 1px solid rgba(44, 59, 46, .25); border-radius: 9999px; background: rgba(247, 245, 240, .6); backdrop-filter: blur(8px); color: var(--color-forest); font-family: var(--font-sans); font-size: 14px; line-height: 20px; letter-spacing: .15em; text-transform: uppercase; white-space: nowrap; transition: border-color .3s; } [data-testid="home-hero"] a.elementor-button:hover { border-color: var(--color-forest); background: rgba(247, 245, 240, .6); color: var(--color-forest); } /* ---- Hero paragraph. The reference caps its measure at max-w-xl (576px) and centres it, so the copy sets as three lines under the headline. Ours ran the full 1216px column as one line. Line height is Tailwind's leading-relaxed, 1.625. ---- */ [data-testid="home-hero"] .bn-hero__subhead { max-width: 576px; margin-left: auto; margin-right: auto; } [data-testid="home-hero"] .bn-hero__subhead, [data-testid="home-hero"] .bn-hero__subhead p { line-height: 1.625; } /* ---- Visit CTA. The 226px clamp earlier in this file matched the reference's total by cutting the content off inside it, which left 24px under the button instead of the section's 128px bottom padding. Drop the clamp and let the four children add up to 226 on their own, on the reference's own spacing: 16 eyebrow + 16 gap + 60 headline + 24 gap + 24 address + 32 gap + 54 button. ---- */ [data-testid="visit-cta"] > .bn-section-inner > * { height: auto; gap: 0; } [data-testid="visit-cta"] > .bn-section-inner > * > .bn-eyebrow { margin: 0 0 16px; } [data-testid="visit-cta"] > .bn-section-inner > * > .elementor-widget-text-editor:not(.bn-visit__meta) { margin: 0; } [data-testid="visit-cta"] > .bn-section-inner > * > .elementor-widget-text-editor:not(.bn-visit__meta) h1, [data-testid="visit-cta"] > .bn-section-inner > * > .elementor-widget-text-editor:not(.bn-visit__meta) h2, [data-testid="visit-cta"] > .bn-section-inner > * > .elementor-widget-text-editor:not(.bn-visit__meta) h3, [data-testid="visit-cta"] > .bn-section-inner > * > .elementor-widget-text-editor:not(.bn-visit__meta) h4, [data-testid="visit-cta"] > .bn-section-inner > * > .elementor-widget-text-editor:not(.bn-visit__meta) p { margin: 0; font-size: 60px; line-height: 60px; } [data-testid="visit-cta"] > .bn-section-inner > * > .bn-visit__meta { margin: 24px 0 0; } [data-testid="visit-cta"] > .bn-section-inner > * > .elementor-widget-html:last-child { margin: 0; } /* ---- Keep the mobile reset from the block above authoritative: none of the desktop pixel values restated here may leak below the large breakpoint. ---- */ @media (max-width: 1279px) { [data-testid="visit-cta"] > .bn-section-inner > *, [data-testid="visit-cta"] > .bn-section-inner > * > * { height: auto; max-height: none; min-height: 0; } [data-testid="visit-cta"] > .bn-section-inner > * > .elementor-widget-text-editor:not(.bn-visit__meta) h1, [data-testid="visit-cta"] > .bn-section-inner > * > .elementor-widget-text-editor:not(.bn-visit__meta) h2, [data-testid="visit-cta"] > .bn-section-inner > * > .elementor-widget-text-editor:not(.bn-visit__meta) h3, [data-testid="visit-cta"] > .bn-section-inner > * > .elementor-widget-text-editor:not(.bn-visit__meta) h4, [data-testid="visit-cta"] > .bn-section-inner > * > .elementor-widget-text-editor:not(.bn-visit__meta) p { font-size: 36px; line-height: 44px; } [data-testid="home-hero"] .bn-hero__subhead { max-width: 100%; } } /* ========================================================================== Hero button wrapper, hero copy measure. ========================================================================== */ /* ---- "Visit the Shop" is an Elementor Button widget, and its wrapper div carries the .bn-btn--secondary class, so the wrapper drew a pill (277x88) and the block above drew a second one on the anchor inside it (203x54). The reference has a single pill at 203x54, which is the anchor, so strip the skin off the wrapper and leave it as plain layout. ---- */ [data-testid="home-hero"] .elementor-widget-button.bn-btn { display: inline-flex; width: auto; height: auto; padding: 0; border: 0; border-radius: 0; background: none; backdrop-filter: none; } /* ---- Hero paragraph measure. The cap set in the block above lost to Elementor's own `.elementor.elementor .e-con > .elementor-widget` rule, which is four classes deep and pins every widget to max-width:100%. Match that depth so the reference's 576px measure survives. ---- */ .elementor.elementor [data-testid="home-hero"] .bn-hero__subhead { max-width: 576px; margin-left: auto; margin-right: auto; } @media (max-width: 1279px) { .elementor.elementor [data-testid="home-hero"] .bn-hero__subhead { max-width: 100%; } } /* ========================================================================== Hero sits under the header, as on the reference. ========================================================================== */ /* ---- On the reference the header is `fixed top-0` over a hero that starts at the very top of the document, so the logo and nav read against the hero image. Ours stacked them instead: header first, hero pushed down by its height. Pull the hero back up by exactly the header's height so the two overlap. Header heights measured live at each Elementor breakpoint: 81 below 768, 97 through 1024, 101 above that. ---- */ body.home [data-testid="home-hero"] { margin-top: calc(-1 * var(--bn-header-h, 101px)); } /* ---- The hero is a positioned element and the header is not, so without this the hero would paint over the nav once they overlap. Only the stacking is touched, and only on the front page. Elementor Pro's sticky header sets `position: fixed` inline when it is switched on, which outranks this, so this cannot fight a sticky header added later. ---- */ body.home header { position: relative; z-index: 60; } @media (max-width: 1024px) { body.home [data-testid="home-hero"] { --bn-header-h: 97px; } } @media (max-width: 767px) { body.home [data-testid="home-hero"] { --bn-header-h: 81px; } } /* ========================================================================== Brand story, text column. Measured against the live reference at 1440. Reference column: 377. Ours: 419. The section is sized by whichever column is taller, so those 42px were the whole reason this block ran 675 against the reference's 640. Read off the reference, widget by widget: eyebrow 16, then 16 of clear heading 96 two lines on a 48 line first paragraph 78 three lines on 26, opening 24 below the heading second paragraph 78 three lines on 26, opening 16 below the first Our Story 20 opening 32 below Ours ran the heading on a 60 line under a 24 top margin, and the body copy on a 24 line with a trailing 14.4 margin from the theme. Those are the only two differences and both are corrected below. Written in ratios rather than pixels so the smaller widths, where the reference drops the heading to 36px, stay proportional on their own. ========================================================================== */ /* ---- Heading: the reference sets its two lines solid, on the same number as the type size, and opens 16 under the eyebrow rather than 24. The italic inside it inherits from a rule further up that reaches every descendant, so it is named here too. ---- */ [data-testid="brand-story"] .bn-brand__text > .e-con > .elementor-widget-text-editor h2.bn-h2, [data-testid="brand-story"] .bn-brand__text > .e-con > .elementor-widget-text-editor h2.bn-h2 * { line-height: 1; } [data-testid="brand-story"] .bn-brand__text > .e-con > .elementor-widget-text-editor h2.bn-h2 { margin-top: 16px; } /* ---- Body copy: the reference's relaxed line, and no trailing margin under the last line. Each of these widgets holds a single paragraph, so clearing the bottom margin cannot close a gap between two of them. ---- */ [data-testid="brand-story"] .bn-brand__text .bn-brand__p, [data-testid="brand-story"] .bn-brand__text .bn-brand__p p { line-height: 1.625; } [data-testid="brand-story"] .bn-brand__text .bn-brand__p p { margin-bottom: 0; } /* ---- 24 above the first paragraph, 16 above the second. An earlier attempt at this used :first-of-type, which cannot work here: every widget in the column is a div, so the first div of its type is the eyebrow and no paragraph ever matched. Counting from the second paragraph instead, through the sibling that always precedes it, is unambiguous. ---- */ [data-testid="brand-story"] .bn-brand__text > .e-con > .bn-brand__p { margin-top: 24px; } [data-testid="brand-story"] .bn-brand__text > .e-con > .bn-brand__p + .bn-brand__p { margin-top: 16px; } /* ---- Brand story heading, below the small breakpoint. The reference runs this line solid only once the type reaches 48px. Under that it is at 36 on 45, the ordinary tight line, which is 18px more over two lines and is the whole of the 17px this block was short at 425. ---- */ @media (max-width: 639px) { [data-testid="brand-story"] .bn-brand__text > .e-con > .elementor-widget-text-editor h2.bn-h2, [data-testid="brand-story"] .bn-brand__text > .e-con > .elementor-widget-text-editor h2.bn-h2 * { line-height: 1.25; } } /* ---- Brand story, the smaller image's rounded corners. The rounding and the clipping both live on the wrapper, and the wrapper is a grid item, so it stretched to the height of the taller image beside it: 344 against the 288 of the photo inside it. The rounded bottom corners were therefore 56px below the photo, which left its bottom edge cut square while the top two corners looked right. Sizing the wrapper to its own content puts the rounding back on the photo. The larger image is already the tallest thing in the row, so it is unaffected either way. ---- */ [data-testid="brand-story"] .bn-brand__images > .bn-brand__img-wrap { align-self: start; } /* ========================================================================== Hero column spacing. Measured against the live reference at 390, 425, 768, 1024 and 1440, and every rule below was tested in the page before it was written to this file. The reference stacks the five parts on plain margins, the same numbers at every width: 32 under the eyebrow, 32 over the paragraph, 40 over the buttons. Ours carried those margins too, but the Elementor container adds its own 20px row gap on top of each one, and added nothing at all above the headline because the eyebrow's own bottom margin is overridden further up this file. That read as 20 / 52 / 60 against 32 / 32 / 40, so the whole block sat 46px taller than the reference and, being centred, 23px higher. Rather than subtract 20 from each margin, which would only hold as long as the container keeps that gap, the gap is closed here and the three margins are stated outright. They then survive a change to the container. Everything is scoped to the hero's own two classes, so if either is ever renamed these rules stop applying rather than landing somewhere unintended. ========================================================================== */ .elementor.elementor [data-testid="home-hero"] .bn-hero__inner { gap: 0; } .elementor.elementor [data-testid="home-hero"] .bn-hero__inner > .bn-eyebrow { margin-bottom: 32px; } .elementor.elementor [data-testid="home-hero"] .bn-hero__inner > .bn-hero__subhead { margin-top: 32px; } .elementor.elementor [data-testid="home-hero"] .bn-hero__inner > .bn-hero__buttons { margin-top: 40px; } /* ---- Hero paragraph measure. The reference holds its 576px cap at every width, not only on desktop, so the copy sets as three lines from the tablet width up and four below it. An earlier rule in this file released the cap under 1280, which let the line run the full column and dropped the block to two lines at 768. Restated here, after that rule, so the cap holds throughout. Below 576 plus the column padding it has no effect anyway, since the column is already narrower than the cap. ---- */ .elementor.elementor [data-testid="home-hero"] .bn-hero__subhead { max-width: 576px; margin-left: auto; margin-right: auto; } /* ---- Hero paragraph line. Two different numbers, and the reference gets both of them by accident: the type is 16px on a 1.625 line to start with, and from the tablet width up it goes to 18px, at which point the size utility also carries a 28px line that lands after the ratio and wins. So 26px below 768 and 28px above, which is what is written out here. Ours ran 1.5 with the theme's trailing paragraph margin left on the end. ---- */ .elementor.elementor [data-testid="home-hero"] .bn-hero__subhead, .elementor.elementor [data-testid="home-hero"] .bn-hero__subhead p { line-height: 1.625; } @media (min-width: 768px) { .elementor.elementor [data-testid="home-hero"] .bn-hero__subhead, .elementor.elementor [data-testid="home-hero"] .bn-hero__subhead p { line-height: 28px; } } .elementor.elementor [data-testid="home-hero"] .bn-hero__subhead p { margin-bottom: 0; }