/* === FK-HOME START === */ /* Fishkill Cannabis WP homepage: section CSS. Owned exclusively by the homepage-build agent; do not append other areas' rules here. Keyed to stable custom classes set via each Elementor element's css_classes (Advanced tab), not to Elementor's own generated selectors, so the layout survives an editor re-save. Relies on tokens already defined in fk-tokens.css (colors, .glass-card, .btn-gold, .text-outline-gold, .img-spotlight, .text-gold/.text-sage/.text-moss). */ .fk-eyebrow { display:block; font-family:'JetBrains Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:.4em; } .fk-caption { font-family:'JetBrains Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.25em; display:block; } .fk-section-title { font-family:'Cormorant Garamond',serif; font-size:2rem; line-height:1.2; color:#F4F6F4; margin-top:.5rem; } /* Elementor wraps every "boxed" container's real children in an auto-generated .e-con-inner div; .e-con-inner defaults to flex-direction:column regardless of what the outer .e-con is set to. Every row/grid layout below is therefore applied to " > .e-con-inner", not to the class itself (bare-class rules stay for box-model properties: background, border, padding, margin on the outer element). */ .fk-section-header-row { margin-bottom:3rem; } .fk-section-header-row > .e-con-inner { display:flex !important; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.5rem; } .fk-text-link, .fk-text-link a { font-family:'Cabinet Grotesk',sans-serif; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.25em; } /* HERO */ .fk-hero { min-height:90vh; padding-top:6rem; padding-bottom:4rem; } .fk-hero > .e-con-inner { display:flex !important; align-items:center; min-height:inherit; } .fk-hero-content { max-width:48rem; } .fk-hero-title-wrap h1.fk-hero-title { font-family:'Cormorant Garamond',serif; font-size:2.25rem; line-height:1.08; letter-spacing:-0.02em; color:#F4F6F4; margin:1.25rem 0 0; } @media (min-width:640px){ .fk-hero-title-wrap h1.fk-hero-title{ font-size:3rem; } } @media (min-width:1024px){ .fk-hero-title-wrap h1.fk-hero-title{ font-size:3.75rem; } } .fk-hero-sub p { margin-top:1.5rem; max-width:36rem; font-size:1rem; line-height:1.625; } @media (min-width:640px){ .fk-hero-sub p{ font-size:1.125rem; } } .fk-hero-buttons { margin-top:2rem !important; } .fk-hero-buttons > .e-con-inner { display:flex !important; flex-wrap:wrap; align-items:center; gap:1rem; } .fk-btn, .fk-btn-outline { border-radius:9999px !important; padding:1rem 2rem !important; font-family:'Cabinet Grotesk',sans-serif !important; font-size:.875rem !important; font-weight:700 !important; text-transform:uppercase; letter-spacing:.2em; } .fk-btn-outline { border:1px solid #33353A !important; color:#F4F6F4 !important; background:transparent !important; transition:border-color .3s,color .3s; } .fk-btn-outline:hover { border-color:rgba(216,192,140,.6) !important; color:#D8C08C !important; } .fk-open-status { display:inline-flex; align-items:center; gap:.6rem; margin-top:2.5rem; border:1px solid rgba(216,192,140,.25); background:rgba(216,192,140,.1); border-radius:9999px; padding:.5rem 1rem; } .fk-status-dot { width:8px; height:8px; border-radius:50%; background:#D8C08C; display:inline-block; } .fk-status-text { font-family:'JetBrains Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.25em; color:#D8C08C; } /* MARQUEE STRIP (between Hero and Category grid) */ /* .marquee-track's own display:flex/width:max-content/animation live in fk-tokens.css since that class is the portable component root, reused here via a plain text-editor widget's raw HTML rather than a nested Elementor container, so its layout is never subject to the .e-con-inner forced-column rule noted above. */ .fk-marquee-section { overflow:hidden; border-top:1px solid #1C1D20; border-bottom:1px solid #1C1D20; background:#141517; padding:1.25rem 0; } .fk-marquee-item { padding:0 2rem; font-family:'Cabinet Grotesk',sans-serif; font-size:.875rem; font-weight:500; text-transform:uppercase; letter-spacing:.35em; white-space:nowrap; flex:0 0 auto; } .fk-marquee-dot { width:.375rem; height:.375rem; transform:rotate(45deg); flex:0 0 auto; } /* CATEGORY GRID */ .fk-category-section { padding:4rem 0; background:#141517; } @media (min-width:1024px){ .fk-category-section{ padding:6rem 0; } } .fk-category-grid > .e-con-inner { display:grid !important; grid-template-columns:1fr; gap:1rem; } @media (min-width:768px){ .fk-category-grid > .e-con-inner{ grid-template-columns:repeat(2,1fr); } } @media (min-width:1024px){ .fk-category-grid > .e-con-inner{ grid-template-columns:repeat(12,1fr); gap:1.5rem; } } .fk-category-card.elementor-widget-icon-box { display:flex; flex-direction:column; justify-content:space-between; min-height:180px; border:1px solid #26272A; background:#1C1D20; border-radius:1rem; padding:1.5rem; transition:all .5s; } .fk-category-card:hover { border-color:rgba(216,192,140,.5); transform:translateY(-4px); } .fk-category-card .elementor-icon-box-icon { transform:rotate(45deg); border:1px solid rgba(216,192,140,.4); background:rgba(20,21,23,.6); border-radius:.5rem; width:48px; height:48px; display:flex; align-items:center; justify-content:center; } .fk-category-card .elementor-icon-box-icon i { transform:rotate(-45deg); color:#D8C08C; } .fk-category-card .elementor-icon-box-description { display:inline-block; margin-top:2.5rem; border:1px solid rgba(216,192,140,.25); background:rgba(216,192,140,.1); border-radius:9999px; padding:.25rem .75rem; font-family:'JetBrains Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.2em; color:#D8C08C; } .fk-category-card .elementor-icon-box-title { margin-top:.75rem; font-family:'Cormorant Garamond',serif; font-size:1.5rem; color:#F4F6F4; } @media (min-width:1024px){ .fk-cat-flower{ grid-column:span 7; } .fk-cat-pre-rolls{ grid-column:span 5; } .fk-cat-vaporizers, .fk-cat-edibles, .fk-cat-concentrates, .fk-cat-tinctures, .fk-cat-topicals, .fk-cat-accessories{ grid-column:span 4; } } /* DELIVERY BANNER */ .fk-delivery-section { border-top:1px solid #1C1D20; border-bottom:1px solid #1C1D20; background:#141517; padding:4rem 0; } @media (min-width:1024px){ .fk-delivery-section{ padding:6rem 0; } } .fk-delivery-section > .e-con-inner, .fk-delivery-section.e-con > .e-con-inner { display:grid; gap:3rem; align-items:center; } @media (min-width:1024px){ .fk-delivery-section > .e-con-inner, .fk-delivery-section.e-con > .e-con-inner{ grid-template-columns:1fr 1fr; gap:4rem; } } .fk-delivery-photo-wrap { position:relative; border-radius:1.5rem; overflow:hidden; border:1px solid #26272A; } .fk-delivery-photo img { height:420px; width:100%; object-fit:cover; object-position:center 78%; } @media (min-width:640px){ .fk-delivery-photo img{ height:520px; } } .fk-delivery-stat-badge { position:absolute; bottom:1.5rem; left:1.5rem; display:flex; flex-direction:column; border:1px solid rgba(216,192,140,.3); background:rgba(20,21,23,.85); border-radius:1rem; padding:1rem 1.5rem; backdrop-filter:blur(6px); } .fk-stat-value { margin-top:.25rem; font-family:'Cormorant Garamond',serif; font-size:1.875rem; } .fk-h2 { font-family:'Cormorant Garamond',serif; font-size:1.5rem; line-height:1.35; color:#F4F6F4; margin-top:1rem; } @media (min-width:640px){ .fk-h2{ font-size:1.875rem; } } @media (min-width:1024px){ .fk-h2{ font-size:2.25rem; } } .fk-body p { margin-top:1.5rem; font-size:1rem; line-height:1.625; } .fk-delivery-points-grid { margin-top:2.5rem !important; } .fk-delivery-points-grid > .e-con-inner { display:grid !important; grid-template-columns:1fr 1fr; gap:1rem; } .fk-delivery-point { border:1px solid #26272A; background:#1C1D20; border-radius:1rem; padding:1.25rem; } .fk-point-value { margin-top:.5rem; display:block; font-family:'Cabinet Grotesk',sans-serif; font-size:1.125rem; font-weight:700; color:#F4F6F4; } .fk-delivery-cta { margin-top:2.5rem !important; } /* MANIFESTO */ .fk-manifesto-section { padding:4rem 0; background:#141517; } @media (min-width:1024px){ .fk-manifesto-section{ padding:6rem 0; } } .fk-manifesto-rows { margin-top:3rem !important; } .fk-manifesto-row { border-top:1px solid #1C1D20; padding:2.5rem 0; } .fk-manifesto-row:last-child { border-bottom:1px solid #1C1D20; } .fk-manifesto-row > .e-con-inner { display:grid !important; grid-template-columns:1fr; gap:1rem; } @media (min-width:768px){ .fk-manifesto-row > .e-con-inner{ grid-template-columns:repeat(12,1fr); gap:2rem; align-items:baseline; } } .fk-chapter-num-wrap { grid-column:span 2; } .fk-chapter-num { font-family:'Cabinet Grotesk',sans-serif; font-size:3rem; font-weight:800; } .fk-chapter-title.fk-chapter-title { grid-column:span 4; font-family:'Cormorant Garamond',serif; font-size:1.5rem; color:#F4F6F4; } .fk-chapter-desc { grid-column:span 6; } .fk-chapter-desc p { font-size:1rem; line-height:1.625; margin:0; } /* GOOGLE REVIEWS */ .fk-reviews-section { border-top:1px solid #26272A; background:#141517; padding:4rem 0; } @media (min-width:1024px){ .fk-reviews-section{ padding:6rem 0; } } .fk-rating-summary { border:1px solid #26272A; background:#1C1D20; border-radius:1rem; padding:1rem 1.5rem; } .fk-rating-summary > .e-con-inner { display:flex !important; align-items:center; gap:1.25rem; } .fk-rating-badge { display:flex; align-items:baseline; gap:.5rem; } .fk-rating-num { font-family:'Cormorant Garamond',serif; font-size:1.875rem; color:#F4F6F4; } .fk-stars { letter-spacing:2px; } .fk-listing-link-wrap a.fk-listing-link { font-family:'JetBrains Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.2em; } .fk-btn-ghost { border-radius:9999px !important; border:1px solid rgba(216,192,140,.3) !important; padding:.6rem 1.25rem !important; font-family:'Cabinet Grotesk',sans-serif !important; font-size:11px !important; font-weight:700 !important; text-transform:uppercase; letter-spacing:.2em; background:transparent !important; } .fk-reviews-grid { margin-top:3rem !important; } .fk-reviews-grid > .e-con-inner { display:grid !important; grid-template-columns:1fr; gap:1rem; } @media (min-width:768px){ .fk-reviews-grid > .e-con-inner{ grid-template-columns:1fr 1fr; } } @media (min-width:1024px){ .fk-reviews-grid > .e-con-inner{ grid-template-columns:1fr 1fr 1fr; gap:1.5rem; } } .fk-review-card { position:relative; display:flex; flex-direction:column; height:100%; border:1px solid #26272A; background:#1C1D20; border-radius:1rem; padding:1.5rem; transition:border-color .5s; } .fk-review-card:hover { border-color:rgba(216,192,140,.4); } .fk-review-avatar .fk-avatar { display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:rgba(216,192,140,.15); font-family:'Cabinet Grotesk',sans-serif; font-weight:700; color:#D8C08C; } .fk-review-name { font-family:'Cabinet Grotesk',sans-serif; font-size:.875rem; font-weight:600; color:#F4F6F4; margin-top:.75rem; } .fk-review-meta-wrap { font-size:.75rem; } .fk-review-stars-row { display:flex; align-items:center; gap:.6rem; margin-top:1rem; font-size:.75rem; } .fk-review-text p { margin-top:1rem; font-size:.875rem; line-height:1.625; } .fk-posted-on-wrap { margin-top:1.25rem; display:block; font-family:'JetBrains Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.25em; color:rgb(110 122 108); } /* CLUB CTA */ .fk-club-section { padding:4rem 0; background:#141517; } @media (min-width:1024px){ .fk-club-section{ padding:6rem 0; } } .fk-club-card { position:relative; overflow:hidden; border:1px solid rgba(216,192,140,.25); border-radius:1.5rem; background:linear-gradient(135deg,#26272A,#141517 60%,#141517); padding:4rem 1.5rem; text-align:center; } @media (min-width:640px){ .fk-club-card{ padding:6rem 3rem; } } .fk-club-card .fk-club-title.fk-h2 { max-width:42rem; margin-left:auto; margin-right:auto; } .fk-club-card .fk-body p { max-width:36rem; margin-left:auto; margin-right:auto; } .fk-club-buttons { margin-top:2.5rem !important; } .fk-club-buttons > .e-con-inner { display:flex !important; flex-wrap:wrap; align-items:center; justify-content:center; gap:1rem; } /* === FK-HOME END === */ /* === FK-HOME-AUDIT-R1 START === */ /* Audit round 1 fixes (computed-style diff vs fishkill-modern.preview.emergentagent.com). ROOT CAUSE for most findings: the rules above are keyed to the custom class on the Elementor WIDGET WRAPPER, but Elementor styles the INNER element (.elementor-heading-title / .elementor-button-text / .elementor-icon-box-title) at equal-or-greater specificity from a stylesheet that loads later, so the wrapper rule is silently lost. Every rule below is keyed to the inner element. Values are measured from the reference, not estimated. */ /* 1. Eyebrow/caption label: ref 12px / 16px / .35em (was 11px / 16.5px / .25em) */ .fk-caption { font-size:12px !important; line-height:16px !important; letter-spacing:.35em !important; } /* 2. Hero eyebrow: ref JetBrains Mono 400 / lh16 (was Cormorant Garamond 600 / lh12) */ .fk-eyebrow, .fk-eyebrow * { font-family:'JetBrains Mono',monospace !important; font-weight:400 !important; line-height:16px !important; } /* 3. Section display headings. Reference ramp, measured: <=425: 24px/33px 768: 30px/36px >=1024: 36px/40px, weight 400, -0.025em. */ .fk-section-title, h2.fk-section-title, .fk-h2, .fk-club-card .fk-club-title.fk-h2 { font-size:24px !important; line-height:33px !important; font-weight:400 !important; letter-spacing:-0.025em !important; } @media (min-width:768px){ .fk-section-title, h2.fk-section-title, .fk-h2, .fk-club-card .fk-club-title.fk-h2 { font-size:30px !important; line-height:36px !important; } } @media (min-width:1024px){ .fk-section-title, h2.fk-section-title, .fk-h2, .fk-club-card .fk-club-title.fk-h2 { font-size:36px !important; line-height:40px !important; } } /* 4. Manifesto chapter title: ref 24px/32px/400/#F4F6F4 (was 28/28/600/#D8C08C) */ .fk-chapter-title .elementor-heading-title { font-size:24px !important; line-height:32px !important; font-weight:400 !important; color:#F4F6F4 !important; } /* 5. Review author name: ref Cabinet Grotesk / lh20 / #F4F6F4 */ .fk-review-name .elementor-heading-title { font-family:'Cabinet Grotesk',sans-serif !important; line-height:20px !important; color:#F4F6F4 !important; } /* 6. Muted body copy: ref #A1AD9F (build rendered heading colour #F4F6F4). */ .fk-chapter-desc p, .fk-review-text p, .fk-body p { color:#A1AD9F !important; } /* 7. Numeric display values: ref line-height 48px / 36px (was 72px / 45px) */ .fk-chapter-num { line-height:48px !important; } .fk-rating-num, .fk-stat-value { line-height:36px !important; } /* 8. Category cards: reference left-aligns card content. */ .fk-category-card, .fk-category-card .elementor-icon-box-wrapper, .fk-category-card .elementor-icon-box-content { text-align:left !important; } .fk-category-card .elementor-icon-box-title, .fk-category-card .elementor-icon-box-title a { font-weight:400 !important; line-height:32px !important; } /* 9. Buttons: ref Cabinet Grotesk 700 (was JetBrains Mono 500 / 15px / white) */ .fk-btn a, .fk-btn .elementor-button-text, .fk-btn-outline a, .fk-btn-outline .elementor-button-text { font-family:'Cabinet Grotesk',sans-serif !important; font-size:14px !important; font-weight:700 !important; letter-spacing:.2em !important; line-height:20px !important; } .fk-btn a, .fk-btn .elementor-button-text { color:#141517 !important; } .fk-btn-ghost a, .fk-btn-ghost .elementor-button-text { font-family:'Cabinet Grotesk',sans-serif !important; font-size:11px !important; font-weight:700 !important; letter-spacing:.2em !important; line-height:16.5px !important; color:#D8C08C !important; } /* === FK-HOME-AUDIT-R1 END === */ /* === FK-HOME-BUGFIX-R2 START === */ /* Round-2 fixes (computed-style diff vs fishkill-modern.preview.emergentagent.com), verified via live style injection on fishkillnew before this was written to disk. Bug 1 (SUPERSEDED 2026-09-13, see FK-HOME-HERO-DECOR below): this originally dimmed a cannabis-bud photo used as the hero's background-image via Elementor's own `background_image` setting on the .fk-hero container. Direct 1440px side-by-side comparison against the true reference confirmed the reference hero has NO photo at all -- it renders a decorative graphic (concentric rings + a rotated diamond holding a leaf icon) on the right side instead. The photo, the Elementor `background_image`/ `background_overlay_*` settings that placed it, and this darkening-gradient rule are all removed. See FK-HOME-HERO-DECOR for the real replacement. */ /* Bug 2: "Get Delivery" rendered identically to "Shop the Menu" (both solid gold, Get Delivery even picked up white text with no border, reading as a second primary button). Root cause: Elementor's own site-wide default, `.elementor-widget-button .elementor-button{background-color:var(--e-global-color-accent)}` (see post-13.css), plus its core default `.elementor-button{color:#fff}` (frontend.min.css), both apply directly to the INSIDE the .fk-btn/.fk-btn-outline wrapper divs. The existing .fk-btn/.fk-btn-outline rules in this file only style the outer wrapper div (border-radius, padding, background:transparent, color), which the inner .elementor-button anchor does not inherit over its own more specific declared values, so the anchor kept rendering flat gold + white text regardless of the wrapper's styling. Fix targets the actual .elementor-button anchor directly, at the shared-class level so it corrects every reuse in one place: hero (Shop the Menu / Get Delivery), delivery-banner CTA (.fk-delivery-cta, carries .fk-btn), and the club-signup CTAs (.fk-btn / .fk-btn-outline pair). .fk-btn-ghost (reviews "Write a review") is a separate, unrelated class and is intentionally not touched here. Verified live against the reference's measured values: Shop the Menu: background linear-gradient(120deg,#e6d3a3 0%,#d8c08c 45%,#c5a059 100%), color #141517, border 0 -- matches reference exactly. Get Delivery: background rgba(0,0,0,0), color #F4F6F4, border 1px solid #33353A -- matches reference exactly. */ .fk-btn .elementor-button { background-image: linear-gradient(120deg, #e6d3a3 0%, #d8c08c 45%, #c5a059 100%) !important; background-color: transparent !important; color: #141517 !important; border: 0 !important; } .fk-btn-outline .elementor-button { background-image: none !important; background-color: transparent !important; border: 1px solid #33353A !important; color: #F4F6F4 !important; } /* === FK-HOME-BUGFIX-R2 END === */ /* === FK-HOME-BUGFIX-R3 START === */ /* Round-3 fixes (2026-09-13), confirmed via getComputedStyle on fishkillnew live and cross-checked against Emergent reference computed values from the team-lead brief. Bug 1: "View Full Menu" (.fk-text-link wrapper, near the Category grid) rendered as a solid gold FILLED button with WHITE text in JetBrains Mono, instead of the reference's plain gold text link (no fill, no border, no padding). Root cause: the pre-existing .fk-text-link rule above (see "HERO" section) only ever set font-family on the wrapper/anchor; it never touched background or color, so the widget kept rendering through Elementor's own button chrome -- .elementor-widget-button .elementor-button (post-13.css) pulls background-color and font-family straight from the Kit's global "accent" tokens (JetBrains Mono weight 500 + gold, per the Phase-2 Kit mapping), and Elementor's core frontend.min.css sets color:#fff on every .elementor-button by default. Both outrank the old low-specificity `.fk-text-link a` rule. Fix targets the actual anchor and button-text span directly and strips the button chrome entirely. Verified live: background none/transparent, color rgb(216,192,140), font-family "Cabinet Grotesk", 12px/700/3px letter-spacing, padding 0 -- matches reference. */ .fk-text-link a.elementor-button { background-image: none !important; background-color: transparent !important; border: 0 !important; padding: 0 !important; color: #D8C08C !important; } .fk-text-link a, .fk-text-link .elementor-button-text { font-family: 'Cabinet Grotesk', sans-serif !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 3px !important; text-transform: uppercase !important; color: #D8C08C !important; } /* Bugs 2 & 3: "How Delivery Works" and "Join the Club" (both .fk-btn, same gold-gradient treatment as "Shop the Menu") rendered with NO background at all on first paint -- background-image: none, background-color transparent -- while their text color was already correctly near-black (rgb(20,21,23)), so both read as near-invisible dark text on a dark section. Root cause, confirmed by walking the live CSSOM's matched rules: Elementor core's own background LAZY-LOAD feature injects an inline stylesheet rule, `.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload) * { background-image: none !important }`, targeting every 4th-and-later top-level section container on the page until an IntersectionObserver adds the `.e-lazyloaded` class once that container scrolls into view. "Shop the Menu" sits in the hero, inside one of the first 3 containers, so it is never touched by this rule. "How Delivery Works" and "Join the Club" both sit inside later containers, so on first paint -- before a visitor scrolls that far -- Elementor force-nulls ANY background-image inside them, including ours from `.fk-btn .elementor-button` (FK-HOME-BUGFIX-R2, immediately above). Confirmed live by scrolling: the gradient reappears the instant the ancestor container picks up `.e-lazyloaded`, proving this is a lazy-load TIMING bug, not a missing rule -- and confirmed the club-section container never received `.e-lazyloaded` at all until scrolled all the way to the bottom of the page, so this is not a one-scroll fluke. Relying on scroll timing means every visitor sees a broken button on first paint of that section, so the fix instead raises OUR rule's specificity above Elementor's injected one (Elementor's selector computes to specificity (0,5,0): .e-con + .e-parent + :nth-of-type + 2x :not(); repeating .fk-btn six times below reaches (0,7,0)), so the gradient survives regardless of lazy-load state, with no plugin file touched and no Elementor experiment toggled. Verified live at rest (no scroll, cache-busted reload): both buttons now show linear-gradient(120deg,#e6d3a3 0%,#d8c08c 45%,#c5a059 100%), matching "Shop the Menu" and the reference exactly; color remains rgb(20,21,23), unchanged (was already correct). */ .fk-btn.fk-btn.fk-btn.fk-btn.fk-btn.fk-btn .elementor-button { background-image: linear-gradient(120deg, #e6d3a3 0%, #d8c08c 45%, #c5a059 100%) !important; } /* === FK-HOME-BUGFIX-R3 END === */ /* === FK-HOME-HERO-DECOR START === */ /* Urgent fix (2026-09-13): the hero previously used a cannabis-bud photo (wp-content/uploads/2026/09/hero.jpg) as an Elementor `background_image` on the .fk-hero container (see the now-removed FK-HOME-BUGFIX-R2 "Bug 1" darkening rule above). Confirmed WRONG by direct live side-by-side comparison against the true reference at 1440px: the reference hero carries no photo at all. Instead it shows a purely decorative graphic on the right: two concentric circles (one slowly rotating, dashed, gold-25%; one static, solid, gold-10%) plus a rotated diamond box (gold-50% border, dark glass fill, soft gold glow, backdrop blur) holding an upright Leaf icon. The Elementor `background_image`/`background_background`/`background_overlay_*` settings were removed from the hero container in `_elementor_data` (post 13), and an HTML widget carrying the markup below (class `fk-hero-decor`) was added as a sibling of `.fk-hero-content` inside the same container. `.animate-slow-spin`/`@keyframes fk-spin` already exist in fk-tokens.css and are reused here rather than re-declared. Desktop-only per spec: hidden below the `lg` (1024px) breakpoint. Measured/spec'd values (not guessed): 288x288 outer box, absolute right:8%, vertically centered. */ .fk-hero-decor { display: none; } @media (min-width: 1024px) { .fk-hero-decor { display: block; position: absolute; top: 0; bottom: 0; right: 8%; margin-top: auto; margin-bottom: auto; width: 288px; height: 288px; z-index: 1; } } .fk-hero-decor-box { position: relative; width: 100%; height: 100%; } .fk-hero-decor-ring-outer { position: absolute; inset: 0; border-radius: 9999px; border: 1px dashed rgba(216, 192, 140, 0.25); } .fk-hero-decor-ring-inner { position: absolute; inset: 24px; border-radius: 9999px; border: 1px solid rgba(216, 192, 140, 0.1); } .fk-hero-decor-diamond { position: absolute; top: 50%; left: 50%; width: 144px; height: 144px; margin-top: -72px; margin-left: -72px; display: flex; align-items: center; justify-content: center; transform: rotate(45deg); border: 1px solid rgba(216, 192, 140, 0.5); background: rgba(20, 21, 23, 0.6); box-shadow: 0 0 80px rgba(216, 192, 140, 0.15); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .fk-hero-decor-leaf { width: 56px; height: 56px; transform: rotate(-45deg); color: #D8C08C; stroke-width: 1.25; } /* Ensure .fk-hero itself is a positioning context for the absolutely-positioned decor. */ .fk-hero { position: relative; } /* === FK-HOME-HERO-DECOR END === */ /* === FK-HOME-BUGFIX-R5 START === */ /* Urgent fix (2026-09-13), reported live by team lead after the FK-HOME-HERO-DECOR deploy above: Bug 1: hero now renders with NO background at all (computed background-color rgba(0,0,0,0), background-image none) -- removing the photo's 6 Elementor background_* settings also removed the only background source the hero ever had; there was no plain dark fallback color configured underneath the photo. Body is white, so the hero showed white with barely-legible off-white text. Fix: give .fk-hero an explicit solid background-color, matching the token used directly (as a literal hex, the same pattern every other section in this file already uses -- .fk-category-section/.fk-delivery-section/.fk-manifesto-section/etc. all set `background:#141517` directly rather than via a CSS custom property). Bug 2: .fk-hero-decor measured at y=800-1088 in a 900px-tall viewport -- sitting near/past the bottom edge instead of vertically centered in the hero's visible area. The box's own size measured correctly (288px, matching spec), only its vertical position was wrong. Two defensive corrections, since the live cause could not be isolated further without browser access in this environment (both the shared chrome-devtools-mcp instance and a fallback isolated headless Chrome were unavailable/hung here -- flagged to the team lead, needs a fresh live re-check after this deploy, not just this comment as proof): a) The `top:50%; transform:translateY(-50%)` technique (FK-HOME-HERO-DECOR above) requires percentage math against whatever ends up being the nearest positioned ancestor's height -- if that resolves to anything other than exactly .fk-hero's own visible box (e.g. a taller ancestor), the manual 50%-then-shift-back-50%-of-own-height arithmetic silently centers against the WRONG box. Replaced with the auto-margin centering technique (`top:0;bottom:0;margin-top:auto;margin-bottom:auto`) instead, which needs no arithmetic at all and centers correctly within whatever the actual containing block's determinate height turns out to be. b) Added `position:relative` explicitly to `.fk-hero > .e-con-inner` (the actual flex row that directly wraps both `.fk-hero-content` and the decor widget, confirmed via the real served DOM) so the nearest positioned ancestor search stops there -- the box whose height most precisely matches the hero's own visible content area -- rather than continuing up past it. */ .fk-hero { background-color: #141517; } .fk-hero > .e-con-inner { position: relative; } /* === FK-HOME-BUGFIX-R5 END === */ /* === FK-HOME-BUGFIX-R6 START === */ /* Urgent fix (2026-09-13), root-caused live by team lead via `decor.offsetParent` after R5 landed but the decor still measured at the identical wrong rect (top=800.2, bottom=1088.2 -- pixel-for-pixel unchanged). Actual cause: `.fk-hero-decor`'s offsetParent was the HTML widget's OWN wrapper div (`.elementor-element-3acb99b`), not `.e-con-inner` -- Elementor gives `.elementor-widget` wrapper divs `position:relative` by default, and that wrapper sits CLOSER to `.fk-hero-decor` in the DOM than `.e-con-inner`/`.fk-hero`, so CSS's "nearest positioned ancestor" rule picked it, never even reaching the `position:relative` added on `.e-con-inner` in R5. That wrapper's own height is 0px (confirmed via getBoundingClientRect): it holds nothing but the absolutely- positioned `.fk-hero-decor`, and an absolutely-positioned child never contributes to its static-flow parent's size, so the wrapper never grows. R5's auto-margin centering was centering correctly -- inside a 0-height box, which does nothing visually, so the decor rendered unmoved at whatever fallback position the browser resolved. Fix: strip that specific widget-wrapper's default `position:relative` so position:absolute walks straight past it to `.e-con-inner` (already position:relative per R5), which has the hero's real ~970px content height. Scoped to this exact widget id, under `.fk-hero`, so it cannot affect any other HTML widget elsewhere on the page. */ .fk-hero .elementor-element-3acb99b { position: static !important; } /* === FK-HOME-BUGFIX-R6 END === */ /* === FK-HOME-BUGFIX-R7 START === */ /* Urgent fix (2026-09-13): R6's `position:static` override did not change the live rendered position at all -- team lead re-measured with a hard cache-busted load (ruling out caching) and the rect was pixel-identical, 6 decimal places, to every prior check. Confirmed via careful re-derivation that the R6 selector (`.fk-hero .elementor-element-3acb99b`, specificity 0,2,0) legitimately outranks Elementor's `.elementor-widget{position:relative}` (0,1,0) and loads later in the cascade, so on paper it should have won -- but the live result says otherwise, and rather than keep guessing at cascade specifics with no way to inspect the live cascade directly (no working browser in this environment), this fix stops depending on winning that fight at all. Instead of removing the widget wrapper as a containing block, this makes it the DELIBERATE, explicitly-sized containing block: forces it (with !important, so no further cascade ambiguity is possible either way) to fill `.e-con-inner` exactly (`position:absolute!important; inset:0!important`), which already carries `position:relative` (R5) and the hero's real ~970px content height. `.fk-hero-decor`'s own top:0/bottom:0/margin:auto centering (R5) then resolves against a box that is guaranteed to be the hero's actual visible height, regardless of whatever the wrapper's own `position` value independently resolves to. `pointer-events:none` keeps the now full-size, otherwise-invisible wrapper from intercepting clicks on the hero-content column (Shop the Menu / Get Delivery buttons), which sits in a separate sibling but would otherwise be painted over by this wrapper's default DOM-order stacking. */ .fk-hero .elementor-element-3acb99b { position: absolute !important; inset: 0 !important; pointer-events: none !important; } /* === FK-HOME-BUGFIX-R7 END === */ /* === FK-HOME-BUGFIX-R4 START === */ /* Urgent fix (2026-09-13): hero buttons "Shop the Menu" and "Get Delivery" measured live with border-radius:3px / padding:12px 24px instead of the site-wide pill treatment (9999px / 16px 32px) already used everywhere else on this page (How Delivery Works, Join the Club, View Full Menu, Write a Review). Root cause, confirmed by reading the actual cascade: the existing `.fk-btn, .fk-btn-outline { border-radius:9999px !important; padding:1rem 2rem !important; ... }` rule near the top of this file ("HERO" section) only ever targeted the OUTER Elementor widget wrapper div that carries the `fk-btn`/`fk-btn-outline` class (`.elementor-widget-button`), not the actual visible `` inside it -- exactly the same wrapper-vs-inner-element mistake already documented and fixed for background/color in FK-HOME-BUGFIX-R2 above (`.fk-btn .elementor-button`), just never extended to radius/padding. Elementor's own core frontend.min.css bakes `.elementor-button{border-radius:3px;padding:12px 24px}` at specificity (0,1,0) directly onto that inner anchor for every `elementor-size-sm` button (no per-size override exists for "sm"), which is exactly the wrong value measured live on the hero buttons. Every other `.fk-btn`/`.fk-btn-outline` button on this page shares the identical wrapper markup (data-widget_type="button.default", elementor-size-sm), so this rule is scoped at the shared-class level, the same technique already used in R2/R3, rather than only to the hero: it corrects the true visible element everywhere this wrapper class is used, without touching background, border, color, font, or any other already-correct property on any button. Verified live via curl fetch of post-13.css (no per-widget-id border-radius or padding rule exists anywhere for any button element, so nothing here is fighting a more specific Elementor per-widget setting) and via frontend.min.css (confirmed the 3px/12px 24px values are exactly Elementor's stock `.elementor-button` default with no `elementor-size-*` override, matching the reported wrong measurement). */ .fk-btn .elementor-button, .fk-btn-outline .elementor-button { border-radius: 9999px !important; padding: 16px 32px !important; } /* === FK-HOME-BUGFIX-R4 END === */ /* === FK-HOME-BUGFIX-R8 START === */ /* Urgent fix (2026-09-13): the hero's two buttons, "Shop the Menu" and "Get Delivery", were the last two of five buttons on this page still typing a literal Unicode arrow character ("↗"/"↗" i.e. ↗ and →) into the label instead of a real icon -- the other three (View full menu / How delivery works / Join the Club) were already converted to lucide SVG masks earlier today in fk-r2-home.css's "18. ICONS" / "19. Arrow glyphs" rules (rule 19 there documents the exact same root cause and fix for widgets dde84c1, 3880668, d509f9d). Same technique here, applied to the two remaining widgets (350bf05 "Shop the Menu", f9bc81d "Get Delivery"): the " ↗"/" →" suffixes were removed from _elementor_data (post 13; verified those three other widgets' fixes were still intact both before and after this write), and the real glyph is drawn here as a CSS mask, identical paths/geometry to fk-r2-home.css rule 19/20, so it inherits the button's own colour with no image request. Shop the Menu links off-site (fishkillcannabis.com/stores/...) so it gets the reference's arrow-up-right glyph, same as "View full menu" (also an off-site link, same fk-btn/fk-text-link family). Get Delivery links in-site (/delivery/) so it gets arrow-right, same as "How delivery works". Scoped to `.fk-hero` only so it cannot affect the same .fk-btn/.fk-btn-outline classes reused by the delivery/club sections (those already have their own section-scoped ::after rules in fk-r2-home.css). The a.elementor-button anchor is made an explicit inline-flex row (matching the same display/gap declaration fk-r2-home.css's "9. BUTTONS" rule already uses for the other converted buttons) so the pseudo-element icon sits inline after the text with a consistent 8px gap. */ .fk-hero .fk-btn a.elementor-button, .fk-hero .fk-btn-outline a.elementor-button { display: inline-flex !important; align-items: center; gap: .5rem !important; } .fk-hero .fk-btn a.elementor-button::after, .fk-hero .fk-btn-outline a.elementor-button::after { content: ""; display: inline-block; width: 16px; height: 16px; flex: 0 0 16px; background-color: currentColor; } /* Shop the Menu (external link): lucide arrow-up-right */ .fk-hero .fk-btn a.elementor-button::after { -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%207h10v10%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M7%2017%2017%207%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/16px 16px no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%207h10v10%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M7%2017%2017%207%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/16px 16px no-repeat; } /* Get Delivery (internal link): lucide arrow-right */ .fk-hero .fk-btn-outline a.elementor-button::after { -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22m12%205%207%207-7%207%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/16px 16px no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22m12%205%207%207-7%207%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/16px 16px no-repeat; } /* === FK-HOME-BUGFIX-R8 END === */ /* === FK-HOME-BUGFIX-R9 START (final pixel sweep, 2026-09-13) === */ /* All values below were measured live at 320/768/1024/1440 against the reference app, reachable without the nested preview iframes at fishkill-modern.preview.static.emergentagent.com. Reference page container model (same one applied to the header/footer in fk-header-footer.css R10): full-width gutters of 16px (<640) / 32px (640-1023) / 64px (>=1024) wrapping a max-width:1152px block centred with margin auto. That reproduces the reference's measured content left edge at every breakpoint: 1440->144, 1024->64, 768->32, 320->16, 2560->704. BUG 1, hero column inset and width. The hero used Elementor's default 1140px content cap plus 10px container padding, so `.fk-hero-content` measured x=150 w=768 with its inner content running 160..908 (748 wide). The reference hero text column measures x=144 w=768 (144..912) at 1440, x=64 w=768 at 1024, x=32 w=704 at 768 and x=16 w=288 at 320. */ .fk-hero { padding-left: 64px !important; padding-right: 64px !important; } .fk-hero > .e-con-inner { max-width: 1152px !important; margin-left: auto !important; margin-right: auto !important; } .fk-hero-content { max-width: 768px !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: auto !important; } .fk-hero-content > .e-con-inner { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } @media (max-width: 1023px) { .fk-hero { padding-left: 32px !important; padding-right: 32px !important; } } @media (max-width: 639px) { .fk-hero { padding-left: 16px !important; padding-right: 16px !important; } } /* BUG 2, hero CTAs stacked instead of side by side. `.fk-hero-buttons > .e-con-inner` was given `display:flex` (FK-HOME "HERO" rule) but never a `flex-direction`, so it inherited Elementor's own `.e-con-inner` default of `column` and the two CTAs stacked vertically at EVERY breakpoint. Measured at 1440: Shop the Menu at y=606 and Get Delivery at y=707, against the reference's y=633/632 (one row). The reference stacks them only below its `sm` breakpoint (640px): at 320 it renders them stacked and LEFT aligned at x=16, at 768 and up side by side with a 16px gap (Shop 144..375, Delivery starts 391). `align-items:center` on a column container was also centring them horizontally, which is why they measured x=62 at 320/768 instead of the reference's left-aligned x=16/32. */ .fk-hero-buttons { padding-left: 0 !important; padding-right: 0 !important; } .fk-hero-buttons > .e-con-inner { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; } @media (min-width: 640px) { .fk-hero-buttons > .e-con-inner { flex-direction: row !important; align-items: center !important; flex-wrap: wrap !important; } } /* BUG 3, hero buttons painted twice (full-width gold slab behind each button). `btn-gold` / `fk-btn` / `fk-btn-outline` are applied through Elementor's "CSS Classes" field, which puts them on the OUTER `.elementor-widget-button` wrapper - a block-level, full-width element - not on the visible `` inside it. The wrapper therefore picked up `.btn-gold`'s gradient + glow (fk-tokens.css) and `.fk-btn`'s `border-radius:9999px; padding:1rem 2rem`, and rendered a 728px-wide gold pill behind the real 231px button. Measured at 1440: wrapper w=728 h=84 with a gradient background, anchor w=231 - and the same at 320 (wrapper 260 vs anchor 196). Every other button on this page already renders correctly because the delivery/club sections got wrapper-level resets earlier; the hero was the only place left unfixed. The inner anchor is fully self-sufficient (FK-HOME-BUGFIX-R2/R3/R4 give it its own gradient, radius and padding), so the wrapper's painted box can be neutralised outright. Typography is deliberately NOT reset here, since the wrapper's font-family/size/weight/letter-spacing are inherited by the anchor. */ .fk-hero .fk-btn.elementor-widget-button, .fk-hero .fk-btn-outline.elementor-widget-button { background-image: none !important; background-color: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; width: auto !important; max-width: 100% !important; flex: 0 0 auto !important; } /* BUG 4, "OPEN NOW" status pill stretched full width. `.fk-open-status` is a text-editor widget, so its wrapper is a full-width block and the pill treatment (bg rgba(216,192,140,.1), 1px rgba(216,192,140,.25) border, 9999px radius, 8px 16px padding - all already correct) was painted across the whole column: measured x=160 w=748 at 1440 against the reference's inline-flex x=144 w=314. The reference pill is shrink-to-fit and capped by the container, which is why it measures 314 at 768/1440 but 288 (the full column) at 320. */ .fk-hero .fk-open-status { width: -moz-fit-content !important; width: fit-content !important; max-width: 100% !important; align-self: flex-start !important; } /* BUG 5, hero H1 typography. Measured built vs reference at 1440: font-weight 500 vs 400, letter-spacing -1.2px vs -1.5px, line-height 64.8px vs 60px. The reference's tracking is Tailwind's `tracking-tight` (-0.025em, i.e. -1.5px at 60px) and its leading is 1.0, both of which scale correctly with the responsive font-size, so they are expressed in relative units here rather than pinned per breakpoint. */ .fk-hero .fk-hero-title { font-weight: 400 !important; letter-spacing: -0.025em !important; line-height: 1 !important; } /* === FK-HOME-BUGFIX-R9 END === */ /* === FK-HOME-BUGFIX-R15 (2026-09-13, interactive-state sweep) ============= 1. Hero "Get Delivery" outline button had NO hover state at all. The existing .fk-btn-outline:hover rule targets Elementor's WIDGET WRAPPER; the inner never inherits it because .fk-btn-outline .elementor-button (0,2,1) sets colour and border-color explicitly. The club section already had its own a-scoped hover rule; the hero one was missed. Reference (Home.jsx): hover:border-gold/60 hover:text-gold. Measured live, hovering the real button at 1440 before this fix: colour rgb(244,246,244), border rgb(51,53,58) -- i.e. no change. */ .fk-hero .fk-btn-outline a.elementor-button:hover, .fk-hero .fk-btn-outline a.elementor-button:focus{ color:#D8C08C !important; border-color:rgba(216,192,140,.6) !important; } /* 2. "336 reviews on Google" (a.fk-listing-link) carries hover:text-gold in the reference. Here it only had .text-moss (0,1,0), so reset.css's a:hover (0,1,1) won and the link computed rgb(51,51,102) navy on hover -- confirmed live by hovering the real element. */ .fk-listing-link:hover,.fk-listing-link:focus{color:var(--fk-gold);} /* 3. Category tiles: the reference swaps the glass-card shadow for a gold lift shadow on hover (hover:shadow-[0_20px_50px_-20px_rgba(216,192,140,0.2)]). The built card only changed border-color and transform. */ .fk-category-section .fk-category-card:hover{ box-shadow:0 20px 50px -20px rgba(216,192,140,.2); } /* === FK-HOME-BUGFIX-R16 (2026-09-13, interactive-state sweep) ============= Category tile hover border never turned gold. fk-r2-home.css sets the REST border with `border:1px solid rgba(255,255,255,.08) !important` at .fk-category-section .fk-category-card (0,2,0 + important), which outranks the un-important .fk-category-card:hover (0,2,0) in fk-home.css, so the gold hover border was silently dead. Measured live with the real card hovered at 1440 before this fix: border rgba(255,255,255,0.08), against the reference's rgba(216,192,140,0.5) (hover:border-gold/50). Matched here at (0,3,0)+important so it beats the rest-state !important. */ .fk-category-section .fk-category-card:hover{ border-color:rgba(216,192,140,.5) !important; } /* === FK-HOME-CATEGORY-STRETCHED-LINK (2026-09-14, client Slack feedback) == Mostafa (Slack #C09JE0NUDCK, p1789397053240129): "these sections, make the whole box clickable" -- each Shop-by-category tile only had two tiny clickable regions (the 20x20 icon-link and the heading-text link), confirmed live via an accessibility-tree snapshot. Standard "stretched link" pattern: the card becomes the positioning context, and an ::after on the existing heading link is stretched to cover the full card, so the whole box shares the same href with no markup change. */ .fk-category-section .fk-category-card{position:relative;cursor:pointer;} .fk-category-section .fk-category-card .elementor-icon-box-title>a{position:static;} .fk-category-section .fk-category-card .elementor-icon-box-title>a::after{ content:""; position:absolute; inset:0; z-index:1; } /* === FK-HOME-BUGFIX-R17 (2026-09-15, hero background photo) ============ Trigger: Mostafa, Slack #C09JE0NUDCK, p1789401971546099 ("Lets change the homepage hero section to look like this", same Emergent reference). Live re-measured the reference today (chrome-devtools-mcp computed styles): it now shows a full-bleed background photo behind the hero content that was NOT there when FK-HOME-HERO-DECOR (above) was built on 2026-09-13 -- that entry's own comment explicitly says "the reference hero carries no photo at all" as of that date. The reference has evidently been updated since; today's live DOM shows a real opacity:0.35, height:115%, object-fit:cover behind the text on every breakpoint checked (320/375/1024/1440/2560), only the decor emblem stays desktop-only (>=1024px, unchanged). Photo re-hosted, never hotlinked: downloaded from the reference's own source, fishkillcannabis.com/wp-content/uploads/2024/05/medicinal- marijuana-weed-cannabis-dope-shell-1.jpg (Fishkill's own prior site, not a third party), and imported into THIS install's own media library via `wp media import` (attachment 241, .../wp-content/uploads/2026/09/ hero-bg.jpg, 2000x1754, byte-identical to source per REST API check before this rule shipped). Implemented as a `.fk-hero::before` pseudo-element rather than editing `_elementor_data` again, since it is a second purely decorative layer with no text and Elementor content editing already cost a 3-round debugging saga (R5-R7 above) once already on this exact container. `::before` naturally paints behind `.e-con-inner` (the real DOM child holding both `.fk-hero-content` and `.fk-hero-decor`) with no z-index needed, since generated `::before` content precedes it in `.fk-hero`'s own child order -- confirmed live via getComputedStyle z-index/paint order, not assumed. */ .fk-hero{overflow:hidden;} .fk-hero::before{ content:""; position:absolute; inset:0; width:100%; height:115%; background-image:url(https://fishkillnew.wpenginepowered.com/wp-content/uploads/2026/09/hero-bg.jpg); background-size:cover; background-position:center; opacity:.35; filter:saturate(.85) contrast(1.06) brightness(.92); pointer-events:none; } /* === FK-HOME-BUGFIX-R17 END === */ /* === FK-HOME-BUGFIX-R18 (2026-09-15, hero pixel re-check) ============== Alan flagged this build had not actually been re-verified measurement- for-measurement against the reference after the R17 background-photo fix; a real side-by-side getComputedStyle diff (not a screenshot glance) at 1440px found two genuine, pre-existing mismatches, unrelated to R17: Bug 1: `.fk-hero{min-height:90vh}` (line 24, original build) vs. the reference's own `min-h-screen` (Tailwind, =100vh). Confirmed live: build section height 810px at a 900px viewport (810/900=0.90) vs. reference's 900px (full viewport). This alone explains every other measured y-offset difference in the hero (eyebrow, h1, paragraph, buttons, badge all sit ~36-56px higher in the build than the reference) -- the content is vertically centered via flex, so a shorter box centers its content higher. Fixing the height alone re-centers everything else with it, no separate position patch needed (verified: the two builds' element y-offsets differ by roughly half the 90px height delta, ~45px, exactly what re-centering predicts). Bug 2: the hero subhead paragraph rendered off-white (rgb(244,246,244), Elementor's `--e-global-color-text` global default) instead of the intended muted sage (rgb(161,173,159), the reference's own measured color). Root cause, confirmed via a live rule-match sweep (iterating every stylesheet for selectors actually matching the element, not guessed): the wrapper carries `.text-sage` (single class, fk-tokens.css) AND Elementor's own generated `post-13.css` sets `.elementor-widget-text-editor{color:var(--e-global-color-text)}` on the same wrapper, also a single class, so the two tie on specificity, and Elementor's own later-enqueued generated stylesheet wins the cascade. Fixed by targeting the actual `

` one level deeper (`.fk-hero-sub p`, class+type = higher specificity than either single-class competitor), so it wins outright rather than depending on enqueue order. Value is `.text-sage`'s own rgb, not a new one. */ .fk-hero{min-height:100vh;} .fk-hero-sub p{color:rgb(161 173 159 / 1);} /* === FK-HOME-BUGFIX-R18 END === */ /* === FK-HOME-BUGFIX-R19 (2026-09-15, remove hero decor emblem) ========== Alan: remove the diamond/leaf emblem from the hero entirely (explicit client-facing decision, overriding the earlier "it's already in the Emergent reference, matches an existing Elementor widget" read from earlier this session -- the client wants it gone from this build regardless of what the reference currently shows). Hidden via CSS rather than touching `_elementor_data` again (same reasoning as R17/the original FK-HOME-HERO-DECOR entry): this is a purely decorative widget with no text content, and Elementor content edits on this exact container already have a 3-round debugging history (R5-R7). Overrides the widget's own `@media(min-width:1024px){display: block}` rule with a later, equally-specific rule -- append-only, so it wins the cascade tie by load order, matching this file's own established technique elsewhere (see the R16 entry above). The widget itself, and its Elementor content, are left untouched and still exist if a future ask brings it back. */ .fk-hero-decor{display:none !important;} /* === FK-HOME-BUGFIX-R19 END === */ /* === FK-HOME-BUGFIX-R20 (2026-09-15, hero vertical spacing, step 1) ===== Alan flagged the hero's element positions/alignment as off vs. the reference, after R18 (min-height + paragraph color) left a residual unexplained. Root-caused: `.fk-hero-content > .e-con-inner` computed `gap:20px` live (Elementor Kit's own default "Widgets Space" flex gap), ADDING to every child widget's own CSS margin-top on top of it. Same systemic gotcha already flagged in the replicate-reference-site skill for this exact build ("leaks onto every flex container... hit the category row and card grids... as separate bugs") -- this is that bug hitting the hero content stack, never caught before this pass. Step 1: remove the extra flex-gap only, then re-measure against the reference's real per-pair gaps (eyebrow-h1 30px, h1-paragraph 28px, paragraph-buttons 40px, buttons-badge 40px) before touching any individual margin, since margins can collapse in ways that make guessing the second number wrong even when the first (this one) is right. */ .fk-hero-content > .e-con-inner { gap:0 !important; } /* === FK-HOME-BUGFIX-R20 END === */ /* === FK-HOME-BUGFIX-R20 continued (2026-09-15, hero vertical spacing, step 2) === After removing the extra Kit flex-gap (previous block), re-measured the real per-pair gaps against the reference at 1440px, apples-to-apples (actual text-bearing elements on both sides, not a mix of wrapper divs and leaf elements): eyebrow-h1 20px (need 30), h1-paragraph 24px (need 28), paragraph-buttons 57px (need 41), buttons-badge 60px (need 50). Each pair's gap is that element's own margin-top plus a fixed internal offset (padding/line-height inside its own widget wrapper) that does not change when the margin does, so each fix is the exact live-measured delta applied to the existing margin-top, not a guessed absolute value: h1 20->30 (+10), paragraph 24->28 (+4), button row 32->16 (-16), badge wrapper 40->30 (-10). */ .fk-hero-title-wrap h1.fk-hero-title { margin-top:30px !important; } .fk-hero-sub p { margin-top:28px !important; } .fk-hero-buttons.elementor-element { margin-top:16px !important; } .fk-open-status.elementor-element { margin-top:30px !important; } /* === FK-HOME-BUGFIX-R20 END === */ /* === FK-HOME-BUGFIX-R20 continued (2026-09-15, hero vertical spacing, step 3) === After the step-2 margin fixes, every internal gap in the hero content stack matches the reference exactly (eyebrow-h1 30px, h1-paragraph 28px, paragraph-buttons 41px, buttons-badge 50px, all re-measured live and confirmed). What remained was a single uniform 46px offset for the whole block (eyebrow top 196px in the build vs. 242px in the reference), traced to the build's header reserving real document-flow height above `.fk-hero` where the reference's own header does not (both sides already set `.fk-hero{padding-top:96px}` identically, so the gap is structural, not a padding mismatch). Rather than restructure the header (its own long, separate bugfix history, out of scope for a hero-only fix), compensated directly on the hero's own padding-top: 96px -> 142px (+46px), the exact live-measured delta. Verified this lands the whole stack at the reference's exact absolute y-positions, not just matching gaps. */ .fk-hero { padding-top:142px !important; } /* === FK-HOME-BUGFIX-R20 END === */ /* === FK-HOME-BUGFIX-R21 (2026-09-15, hero total section height) ======== Found by an independent second-round audit, then confirmed live (getBoundingClientRect, not just the declared CSS property): the hero section rendered 1106px tall at a 900px-tall viewport, not the reference's actual 900px. Root cause, pre-existing since before this session (line 25 of this file, from the original FK-HOME-HERO-DECOR round): `.fk-hero > .e-con-inner { min-height:inherit; }` copies `.fk-hero`'s own computed min-height (900px after R18) onto the INNER flex row too. With `.fk-hero` on `box-sizing:border-box`, that inner 900px sits inside the outer box's padding (142px top + 64px bottom, per R18/R20), so the outer box is forced to grow to 142+900+64=1106px to contain it -- min-height is a floor, not a cap, so the section grows past its own declared min-height rather than the padding sharing the 900px. That inner `min-height:inherit` was added deliberately in FK-HOME-BUGFIX-R5/R6/R7 (see the history above) so the now-removed decor emblem's `top:0;bottom:0;margin:auto` centering technique had a determinate-height ancestor to center against. Since R19 (this same session) hides that emblem with `display:none`, nothing depends on `.e-con-inner` having an inflated height any more -- a `display:none` element doesn't need its positioning context solved at all. Safe to let `.e-con-inner` size to its own natural content height instead, and let `.fk-hero`'s own `align-items:center` (already flex) center that content within the real, correctly-sized 900px/100vh box, matching how the reference itself is built (a single `min-h-screen items-center` on the section, no inner height duplicated). If the decor emblem is ever turned back on for a future ask, this rule needs revisiting together with it, since the R5-R7 fix it depended on would need reinstating too. */ .fk-hero > .e-con-inner { min-height:auto !important; } /* === FK-HOME-BUGFIX-R21 END === */ /* === FK-HOME-BUGFIX-R22 (2026-09-15, marquee text color) ================ Alan: the sliding/marquee text font color is wrong vs. Emergent. Root cause: the reference had genuinely been redesigned (confirmed by cache-busting the reference URL itself for the first time this session, `?cachebust=...` -- every earlier check this session had been reading a stale cached copy of the Emergent preview, not a WP-side bug). The current live reference's marquee items are gold (`rgb(216,192,140)`, this theme's own `--fk-gold` token) at font-weight 700, not the `.text-sage` muted color/weight-500 this build's `.fk-marquee-item` carries. Overridden directly rather than removing the `.text-sage` class from markup, since the item's `.text-sage` may be relied on by other theme conventions -- this rule wins on specificity (`.fk-marquee-item.text-sage` = 2 classes vs. `.text-sage` alone = 1). */ .fk-marquee-item.text-sage { color:var(--fk-gold,#D8C08C) !important; font-weight:700 !important; } /* === FK-HOME-BUGFIX-R22 END === */ /* === FK-HOME-BUGFIX-R23 (2026-09-15, hero full redesign) ================= Trigger: hero full redesign per the latest Emergent reference (logo emblem + centered layout + gold-shine "Cannabis" span + unified gold pill buttons + full-bleed photo w/ layered dark overlays, replacing the 35%-opacity/filtered photo from R17). Text content itself (H1 copy, subhead copy, marquee item text, button labels/icons) is being changed separately via the Elementor editor UI by another workstream -- this block is CSS-only and targets class names that will exist once that editor pass lands (`.fk-hero-emblem`, `.text-gold-shine`, `.fk-btn-icon`), named here so both pieces of work line up without either side blocking on the other. All pixel/color targets below are the reference's supplied spec values (from the redesign brief), not independently re-measured live by this pass -- no browser was used to write this file. A live getComputedStyle pass against the real DOM once the editor markup exists is recommended before calling any of this "confirmed," per this project's own anti-false-fix convention (see R18/R21's "confirmed live" language for contrast with what that actually means here). */ /* ----------------------------------------------------------------------- 1. HERO CONTENT CENTERING The hero was built left-aligned on purpose: FK-HOME-BUGFIX-R9 "Bug 1" explicitly set `.fk-hero-content{margin-left:0!important; margin-right:auto!important}` so the text column would sit at the left edge of the row, leaving room for FK-HOME-HERO-DECOR's diamond/leaf graphic on the right. That graphic was removed from layout entirely by R19 (`display:none`) and never depended on again, so nothing still needs the column pinned left -- the redesign's single-column, centered layout is free to use the full row width. `margin-right:auto` from R9 already centers correctly on that side; only `margin-left` needs to flip from the R9 value (0) to auto so the column centers as a whole inside `.fk-hero > .e-con-inner` (a flex row with a single in-flow child now that the decor is out of flow via R7's `position:absolute`), rather than only centering the TEXT inside a box that itself still hugs the left edge. `.fk-hero-content > .e-con-inner` is the Elementor-generated inner flex column already targeted by R20 (`gap:0`) -- it holds the eyebrow/h1/sub/ buttons/badge stack, so `align-items:center` there centers each child as a block instead of stretching them left-aligned. `.fk-hero-content` itself is a plain box (not a flex container), so it only gets text-align, not align-items. None of this touches the R20/R21 margin-top or min-height values -- only alignment properties are added. */ .fk-hero-content { text-align: center; margin-left: auto !important; /* was 0 !important per R9; decor R9 was centering against no longer exists (R19) */ } .fk-hero-content > .e-con-inner { align-items: center; } /* Buttons row: the base FK-HOME rule (`align-items:center`, no justify-content) was itself superseded by R9 "Bug 2" for the old left-aligned layout: `flex-direction:column;align-items:flex-start` below 640px (so stacked buttons hug the left edge) and `flex-direction:row` with no `justify-content` at 640px+ (so side-by-side buttons default to flex-start, i.e. left-aligned as a group). Centering the group now needs BOTH halves of that R9 rule touched, not just the row breakpoint the brief called out -- fixing only justify-content at 640px+ would leave the stacked mobile buttons still flush left, which would contradict the "hero content ... must become centered" goal for the same element at a smaller viewport. */ .fk-hero-buttons > .e-con-inner { align-items: center !important; /* overrides R9's flex-start (mobile, stacked) */ justify-content: center !important; /* overrides R9's implicit flex-start (>=640px, row) */ } /* ----------------------------------------------------------------------- 2. LOGO EMBLEM (new element, inserted above .fk-eyebrow via the editor) Sized per the redesign spec: contain-fit, responsive height ramp, centered as a block. No text content of its own, so no font rules needed. */ .fk-hero-emblem { display: block; margin-left: auto; margin-right: auto; height: 72px; width: auto; object-fit: contain; } @media (min-width: 640px) { .fk-hero-emblem { height: 84px; } } @media (min-width: 1024px) { .fk-hero-emblem { height: 108px; } } /* The redesign drops the eyebrow text entirely in favor of the emblem mark. `.fk-eyebrow` (base rule, top of fk-home.css) is reused elsewhere on the page (also re-styled globally by FK-HOME-AUDIT-R1's font-family/ weight/line-height fix) -- touching the base rule would hide eyebrows sitewide, so the hide is scoped to the hero content column only. */ .fk-hero-content .fk-eyebrow { display: none !important; } /* ----------------------------------------------------------------------- 3. H1 GOLD-SHINE SPAN + TYPOGRAPHY MISMATCH CHECK Per the brief's own instruction, cross-checked `.fk-hero-title`'s current rules (fk-home.css line 27 + R9 "Bug 5") against the reference spec at 1440px (fontSize 72px / weight 800 / letterSpacing -1.8px / lineHeight 72px / uppercase / Cabinet Grotesk / #F4F6F4) and found real mismatches, fixed below, scoped to the hero H1 only: - font-size: build is 60px (3.75rem) at >=1024px (fk-home.css line 29); reference wants 72px. FIXED (>=1024px tier only -- the brief gave no target below that breakpoint, so the existing 36px/48px ramp at <1024px is left alone rather than guessed at). - font-weight: R9 explicitly set 400; reference wants 800. FIXED. - font-family: base rule is 'Cormorant Garamond', serif; reference wants 'Cabinet Grotesk' (matching the redesign's sans-serif system used elsewhere for buttons/labels). FIXED. - text-transform: never set on this element (defaults to none); reference wants uppercase. FIXED. - letter-spacing: R9 already set -0.025em (a relative unit) rather than a pinned px value. At the corrected 72px font-size that computes to exactly -1.8px, matching the reference automatically -- NOT touched, no bug here. - line-height: R9 already set unitless `1`, which resolves to 1x the element's own font-size. At 72px that is 72px, matching the reference automatically -- NOT touched, no bug here. - color: build is already #F4F6F4, reference is rgb(244,246,244) (the same color) -- NOT touched, no bug here. Overriding at `.fk-hero .fk-hero-title-wrap h1.fk-hero-title` (higher specificity than R9's `.fk-hero .fk-hero-title` and the base file's `.fk-hero-title-wrap h1.fk-hero-title`) plus !important, so it wins outright regardless of load-order specifics. */ .fk-hero .fk-hero-title-wrap h1.fk-hero-title { font-family: 'Cabinet Grotesk', sans-serif !important; font-weight: 800 !important; text-transform: uppercase !important; } @media (min-width: 1024px) { .fk-hero .fk-hero-title-wrap h1.fk-hero-title { font-size: 72px !important; } } /* Gold-shine treatment for the "Cannabis" run inside the H1. Values are the reference's own gradient stops, applied as a text-clip fill. */ .fk-hero .text-gold-shine { background-image: linear-gradient(110deg, rgb(230,211,163), rgb(216,192,140) 40%, rgb(197,160,89) 70%, rgb(230,211,163)); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } /* ----------------------------------------------------------------------- 4. SUBHEAD PARAGRAPH FK-HOME-BUGFIX-R18 set `.fk-hero-sub p{color:rgb(161 173 159 / 1)}` (the sage token) because THAT round's reference measured the subhead as muted sage. The current redesign reference instead measures this same paragraph at rgb(244,246,244) -- i.e. the design has since moved away from the sage subhead R18 was fixing toward. This rule intentionally sets color back to off-white, superseding R18's sage value specifically for this reason (not reverting R18 as a mistake -- R18 was correct for the reference as it existed on 2026-09-15 before this redesign). Also adds the reference's weight/case/tracking/width and re-centers the now-wider max-width under the new centered layout (section 1 above). */ .fk-hero-sub p { color: rgb(244,246,244) !important; /* supersedes R18's sage rgb(161,173,159) -- see comment above */ font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.025em !important; max-width: 42rem !important; margin-left: auto !important; margin-right: auto !important; } /* ----------------------------------------------------------------------- 5. BUTTONS -- unify to the same gold-pill treatment, add icon slot `.fk-btn`'s gold gradient (`linear-gradient(120deg,#e6d3a3 0%,#d8c08c 45%,#c5a059 100%)`) was already established in FK-HOME-BUGFIX-R2 and reinforced against Elementor's lazy-load background-nuking in R3 -- reused verbatim here rather than re-deriving new stop values, since #e6d3a3/#d8c08c/#c5a059 already equal the reference's rgb(230,211,163)/rgb(216,192,140)/rgb(197,160,89). Applied to `.fk-btn-outline`, scoped to `.fk-hero` only, so the outline style used elsewhere on the page (delivery banner, club CTA) is untouched. Padding is corrected to the reference's 16px 36px (R4 set 16px 32px sitewide) -- scoped to the hero only for the same reason, rather than changing R4's global value and risking the delivery/club buttons' already-correct padding. box-shadow is new (not previously defined for either button anywhere in this file) -- added to BOTH `.fk-btn` and `.fk-btn-outline` in the hero so the two are pixel-identical, not just gradient-identical. NOTE (deviation, deliberate, not fixed here): the reference's letter-spacing is 2.52px (~0.18em); the existing FK-HOME-AUDIT-R1 rule already unifies both buttons' letter-spacing at 0.2em (2.8px) sitewide (delivery/club buttons included). Left untouched -- the two buttons already match EACH OTHER exactly, the ask was to unify them, and a ~0.3px sitewide nudge for the hero only would be scope creep past what was requested; flagging here instead of silently changing it. */ .fk-hero .fk-btn .elementor-button, .fk-hero .fk-btn-outline .elementor-button { padding: 16px 36px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 8px 24px -10px rgba(216,192,140,.35) !important; } .fk-hero .fk-btn-outline .elementor-button { background-image: linear-gradient(120deg, #e6d3a3 0%, #d8c08c 45%, #c5a059 100%) !important; background-color: transparent !important; color: #141517 !important; border: 0 !important; } /* R8 drew a literal arrow (mask/pseudo-element `::after`) on both hero buttons because, at that time, there was no real icon in the button text. The editor is now adding real inline icons before the label ("Shop Now" / "Order Delivery"), so the old drawn arrow would render alongside the new icon and visually compete/duplicate -- hidden here, scoped to `.fk-hero` only so R8's arrow rule (and the separate, unrelated delivery-banner CTA arrow noted in R8's own comment) still apply anywhere else that reuses `.fk-btn`/`.fk-btn-outline`. R8's rule itself is left in the file untouched (append-only), just visually overridden. */ .fk-hero .fk-btn a.elementor-button::after, .fk-hero .fk-btn-outline a.elementor-button::after { display: none !important; } /* New icon slot before the button label ("🛍"/"🚚"-style icon element, class `fk-btn-icon`, coordinating by name with the editor's inline content). Sized to sit inline with the 14px/700 label text (R1), colored to match the buttons' own dark text so it never needs a separate color per button variant. */ .fk-hero .fk-btn-icon, .fk-hero .fk-btn-outline .fk-btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex: 0 0 16px; margin-right: .5rem; color: #141517; } .fk-hero .fk-btn-icon svg { width: 100%; height: 100%; stroke: currentColor; } /* Correction found before deploy: the actual editor pass used Elementor's native button icon control (Font Awesome, via `selected_icon`), not a hand-authored `.fk-btn-icon` span -- confirmed live via the real DOM, which renders `.elementor-button-icon > i.fas.fa-*` (or an inlined `.e-font-icon-svg` for icons Elementor pre-converts to SVG, e.g. the truck icon here). The `.fk-btn-icon` rules above are kept as harmless dead CSS (append-only convention) in case a future pass switches to that markup; this rule targets what is actually on the page today. */ .fk-hero .fk-btn .elementor-button-icon, .fk-hero .fk-btn-outline .elementor-button-icon { display: inline-flex !important; align-items: center; justify-content: center; width: 16px; height: 16px; margin-right: .5rem; color: #141517; } .fk-hero .elementor-button-icon i, .fk-hero .elementor-button-icon svg { font-size: 16px; width: 16px; height: 16px; color: #141517; fill: currentColor; } /* ----------------------------------------------------------------------- 6. BACKGROUND PHOTO + OVERLAYS (replaces R17's filtered/dimmed photo) R17's `.fk-hero::before` rule (single photo layer, opacity .35, saturate/contrast/brightness filters) is left in the file untouched, per the append-only convention -- every property this block redeclares on the same `::before` selector wins the cascade by source order (later + equal specificity), and every property it does NOT redeclare (content/position/inset/width/height/pointer-events) keeps R17's already-correct values, so those are not repeated here. New image is re-scoped to full opacity with no CSS filters; the darkening the old .35 opacity + filters used to provide is now baked in as three stacked dark gradient layers ahead of the photo in the background-image list (first-listed = topmost/frontmost per spec). A flat color can't be combined with image layers in a `background-image` list (that property only accepts values, and a plain color is not one) -- expressed as a zero-stop gradient between the same color twice, per the brief's own note, so it paints as a flat tint. */ .fk-hero::before { background-image: linear-gradient(to bottom, rgba(20,21,23,.8), transparent, rgb(20,21,23)), linear-gradient(to right, rgb(20,21,23), rgba(20,21,23,.55), rgba(20,21,23,.1)), linear-gradient(rgba(20,21,23,.7), rgba(20,21,23,.7)), url(https://fishkillnew.wpenginepowered.com/wp-content/uploads/2026/09/e711bf8d3e8a5cc1650e6f339d5c0ce62ca35fa8700d62605b4735197013328c.jpeg) !important; background-size: cover, cover, cover, cover !important; background-repeat: no-repeat !important; background-position: 70% center !important; opacity: 1 !important; filter: none !important; } @media (min-width: 1024px) { /* Reference crops the photo further right on desktop (object-position 70%-center escalating to right-center at lg, per the brief). A CSS background layer has no separate crop-origin per image, so this shifts ALL layers' position together -- acceptable here since the gradient layers are directional (to bottom/to right) and don't visually depend on background-position the way the photo does. */ .fk-hero::before { background-position: right center !important; } } /* ----------------------------------------------------------------------- 7. MARQUEE -- size/tracking + dot shape (content unchanged, text is being edited separately). R22 (already live) only touches this item's color/font-weight via the higher-specificity `.fk-marquee-item.text-sage` selector -- untouched here, this block only adds size/letter-spacing on the base class, no color/weight collision. */ .fk-marquee-item { font-size: 12px !important; letter-spacing: 0.28em !important; } @media (min-width: 640px) { .fk-marquee-item { font-size: 14px !important; } } /* Base rule (fk-home.css line 49) draws the separator as a rotated square (`transform:rotate(45deg)`), producing a diamond. Reference uses a plain round dot -- un-rotating a square with border-radius:50% yields a circle without needing to touch the existing width/height/ background already set on the base rule. */ .fk-marquee-dot { transform: none !important; border-radius: 50% !important; } /* === FK-HOME-BUGFIX-R23 END === */ /* === FK-HOME-BUGFIX-R23-FIX1 (2026-09-15, hero emblem not sized) ========= R23 set `.fk-hero-emblem{height:72px/84px/108px;...}` but that class landed on Elementor's own widget wrapper

(confirmed live: `
` wraps a plain with no size constraint of its own), not on the tag itself. A div's `height` doesn't clip or scale an oversized img inside it, so the native 998x570 emblem rendered at full size, overlapping the headline. Targeting the descendant directly. */ .fk-hero-emblem img { display: block; margin-left: auto; margin-right: auto; height: 72px !important; width: auto !important; max-width: 100%; object-fit: contain; } @media (min-width: 640px) { .fk-hero-emblem img { height: 84px !important; } } @media (min-width: 1024px) { .fk-hero-emblem img { height: 108px !important; } } /* === FK-HOME-BUGFIX-R23-FIX1 END === */ /* === FK-HOME-BUGFIX-R23-FIX2 (2026-09-15, open-status pill not centered) == Alan: "fix the open now and center it". R23's `.fk-hero-content > .e-con-inner{align-items:center}` should have centered every child in the column, but the pre-existing FK-HOME-BUGFIX-R9 "BUG 4" rule already sets `.fk-hero .fk-open-status{align-self:flex-start!important}` -- confirmed live via getComputedStyle. An explicit `align-self` on a flex ITEM always wins over the parent's `align-items` regardless of source-order or the parent rule having its own !important, since align-items only supplies the item's default when no align-self is set. R9's rule is still correct for what it fixed (shrink-to-fit width, not full-column-width) -- only the alignment axis needs to flip now that the whole hero is centered instead of left-aligned. Overriding align-self only, scoped to the same selector R9 used so it wins by source order at equal specificity. */ .fk-hero .fk-open-status { align-self: center !important; } /* === FK-HOME-BUGFIX-R23-FIX2 END === */ /* === FK-HOME-BUGFIX-R23-FIX4 (2026-09-15, hero buttons double-painted) ==== Regression of the already-fixed FK-HOME-BUGFIX-R2/R3 "BUG 3" (wrapper painted a duplicate gold slab behind the real button). That fix's selector was `.fk-btn.elementor-widget-button, .fk-btn-outline.elementor-widget-button` -- scoped to the WIDGET TYPE class Elementor puts on the wrapper. R23-FIX3 (exact lucide icons, this same day) converted these two widgets from Elementor's `button` type to `html` type so their content could carry the reference's exact inline SVG markup, which changed the wrapper's class to `elementor-widget-html` -- so the old fix's selector stopped matching, and the wrapper's own `.fk-btn`/`.btn-gold` gradient classes started painting again, confirmed live (wrapper width 260px with its own gradient, inner anchor width 196px with an identical gradient, double-painted exactly as the original BUG 3 measured). Re-applying the same neutralization, scoped to the hero only and matched on the actual class combination now in use (`elementor-widget-html`) instead of the no-longer-present `elementor-widget-button`. R2/R3's original rule is left in the file untouched (append-only; still correct for every other `.fk-btn`/`.fk-btn-outline` use on the page, which are still real Button widgets). */ .fk-hero .fk-btn.elementor-widget-html, .fk-hero .fk-btn-outline.elementor-widget-html { background-image: none !important; background-color: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; width: auto !important; max-width: 100% !important; flex: 0 0 auto !important; } /* === FK-HOME-BUGFIX-R23-FIX4 END === */ /* === FK-HOME-BUGFIX-R23-FIX5 (2026-09-15, button icons solid-filled) ====== Alan: icons look "too dark / wrongly filled" vs Emergent. Root cause confirmed live: R23's own icon-sizing rule (`.fk-hero .elementor-button-icon svg { ...; fill:currentColor; }`) was written for Font Awesome's SVG icons (solid, filled glyphs -- that rule is correct for those). R23-FIX3 (same day) replaced these two icons with the reference's actual lucide-react glyphs, which are STROKE-ONLY (`fill="none" stroke="currentColor"` on the , exactly like the reference computes). A CSS `fill` declaration in a stylesheet -- even with no !important -- overrides an SVG's own `fill="none"` presentation attribute (attributes sit below stylesheet rules in the cascade), so the lucide outlines were being filled solid with the dark button-text color instead of staying hollow-stroked, confirmed live via getComputedStyle: fill computed as rgb(20,21,23) despite the element's own `fill="none"` attribute. Scoped narrowly to these two hero buttons' icons only, so R23's original rule is left untouched for icons elsewhere that still need it. */ .fk-hero .fk-btn .elementor-button-icon svg, .fk-hero .fk-btn-outline .elementor-button-icon svg { fill: none !important; stroke: currentColor !important; } /* === FK-HOME-BUGFIX-R23-FIX5 END === */