/* FK-SIGNUP. Sign Up page (/sign-up/, post 190) fixes, per team-lead audit 2026-09-13. Scoped to this post's 3 perk Icon Box widgets only. 1. Diamond icon badge: post-190's own widget settings (view=framed, shape=square, border/radius/rotate + per-element custom_css) already matched the reference spec almost exactly, but the generated post-190.css cache was stale (this workspace's documented gotcha: skipping `wp elementor flush-css` + `wp cache flush` + `wp page-cache flush` makes a real fix invisible). A fresh 3-layer cache flush (2026-09-13) confirmed background-color:#14151799 (~60% alpha near- black), border-color:#d8c08c66 (~40% alpha gold), and the 45deg wrapper rotation are all now present and rendering. This block only tightens the two remaining real gaps: exact 12px radius + a fixed 48x48 box (the reference's `h-12 w-12 rounded-lg`, native Elementor has no fixed icon-box-size control, only font-size + 0.5em padding), and, the actual bug: swapping the 3 Font Awesome glyphs for the exact lucide glyphs the reference uses, via the same CSS-mask technique already established in fk-r2-home.css rule 18 (category icons). */ .elementor-190 .elementor-element.elementor-element-57c587d .elementor-icon, .elementor-190 .elementor-element.elementor-element-05f6377 .elementor-icon, .elementor-190 .elementor-element.elementor-element-6158578 .elementor-icon { width: 48px !important; height: 48px !important; border-radius: 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } /* Hide the Font Awesome glyphs (fa-hand-sparkles / fa-truck / fa-bell), replaced below with the exact lucide glyph as a mask, matching the reference and this site's own established icon-swap convention. */ .elementor-190 .elementor-element.elementor-element-57c587d .elementor-icon i, .elementor-190 .elementor-element.elementor-element-57c587d .elementor-icon svg, .elementor-190 .elementor-element.elementor-element-05f6377 .elementor-icon i, .elementor-190 .elementor-element.elementor-element-05f6377 .elementor-icon svg, .elementor-190 .elementor-element.elementor-element-6158578 .elementor-icon i, .elementor-190 .elementor-element.elementor-element-6158578 .elementor-icon svg { display: none !important; } /* Card 1, "Exclusive Drops": lucide sparkles (was fa-hand-sparkles). */ .elementor-190 .elementor-element.elementor-element-57c587d .elementor-icon::before { content: ""; display: block; width: 20px; height: 20px; transform: rotate(-45deg); background-color: #D8C08C; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M11.017%202.814a1%201%200%200%201%201.966%200l1.051%205.558a2%202%200%200%200%201.594%201.594l5.558%201.051a1%201%200%200%201%200%201.966l-5.558%201.051a2%202%200%200%200-1.594%201.594l-1.051%205.558a1%201%200%200%201-1.966%200l-1.051-5.558a2%202%200%200%200-1.594-1.594l-5.558-1.051a1%201%200%200%201%200-1.966l5.558-1.051a2%202%200%200%200%201.594-1.594z%22%20%2F%3E%20%3Cpath%20d%3D%22M20%202v4%22%20%2F%3E%20%3Cpath%20d%3D%22M22%204h-4%22%20%2F%3E%20%3Ccircle%20cx%3D%224%22%20cy%3D%2220%22%20r%3D%222%22%20%2F%3E%20%3C%2Fsvg%3E") center/20px 20px no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M11.017%202.814a1%201%200%200%201%201.966%200l1.051%205.558a2%202%200%200%200%201.594%201.594l5.558%201.051a1%201%200%200%201%200%201.966l-5.558%201.051a2%202%200%200%200-1.594%201.594l-1.051%205.558a1%201%200%200%201-1.966%200l-1.051-5.558a2%202%200%200%200-1.594-1.594l-5.558-1.051a1%201%200%200%201%200-1.966l5.558-1.051a2%202%200%200%200%201.594-1.594z%22%20%2F%3E%20%3Cpath%20d%3D%22M20%202v4%22%20%2F%3E%20%3Cpath%20d%3D%22M22%204h-4%22%20%2F%3E%20%3Ccircle%20cx%3D%224%22%20cy%3D%2220%22%20r%3D%222%22%20%2F%3E%20%3C%2Fsvg%3E") center/20px 20px no-repeat; } /* Card 2, "VIP Delivery Offers": lucide truck (was fa-truck, swapped for exact pixel-fidelity/consistency with the rest of the site's icon system). */ .elementor-190 .elementor-element.elementor-element-05f6377 .elementor-icon::before { content: ""; display: block; width: 20px; height: 20px; transform: rotate(-45deg); background-color: #D8C08C; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M14%2018V6a2%202%200%200%200-2-2H4a2%202%200%200%200-2%202v11a1%201%200%200%200%201%201h2%22%20%2F%3E%20%3Cpath%20d%3D%22M15%2018H9%22%20%2F%3E%20%3Cpath%20d%3D%22M19%2018h2a1%201%200%200%200%201-1v-3.65a1%201%200%200%200-.22-.624l-3.48-4.35A1%201%200%200%200%2017.52%208H14%22%20%2F%3E%20%3Ccircle%20cx%3D%2217%22%20cy%3D%2218%22%20r%3D%222%22%20%2F%3E%20%3Ccircle%20cx%3D%227%22%20cy%3D%2218%22%20r%3D%222%22%20%2F%3E%20%3C%2Fsvg%3E") center/20px 20px no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M14%2018V6a2%202%200%200%200-2-2H4a2%202%200%200%200-2%202v11a1%201%200%200%200%201%201h2%22%20%2F%3E%20%3Cpath%20d%3D%22M15%2018H9%22%20%2F%3E%20%3Cpath%20d%3D%22M19%2018h2a1%201%200%200%200%201-1v-3.65a1%201%200%200%200-.22-.624l-3.48-4.35A1%201%200%200%200%2017.52%208H14%22%20%2F%3E%20%3Ccircle%20cx%3D%2217%22%20cy%3D%2218%22%20r%3D%222%22%20%2F%3E%20%3Ccircle%20cx%3D%227%22%20cy%3D%2218%22%20r%3D%222%22%20%2F%3E%20%3C%2Fsvg%3E") center/20px 20px no-repeat; } /* Card 3, "Strain Alerts": lucide bell-ring (was fa-bell, missing the "ring lines" detail the reference shows). */ .elementor-190 .elementor-element.elementor-element-6158578 .elementor-icon::before { content: ""; display: block; width: 20px; height: 20px; transform: rotate(-45deg); background-color: #D8C08C; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M10.268%2021a2%202%200%200%200%203.464%200%22%20%2F%3E%20%3Cpath%20d%3D%22M22%208c0-2.3-.8-4.3-2-6%22%20%2F%3E%20%3Cpath%20d%3D%22M3.262%2015.326A1%201%200%200%200%204%2017h16a1%201%200%200%200%20.74-1.673C19.41%2013.956%2018%2012.499%2018%208A6%206%200%200%200%206%208c0%204.499-1.411%205.956-2.738%207.326%22%20%2F%3E%20%3Cpath%20d%3D%22M4%202C2.8%203.7%202%205.7%202%208%22%20%2F%3E%20%3C%2Fsvg%3E") center/20px 20px no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M10.268%2021a2%202%200%200%200%203.464%200%22%20%2F%3E%20%3Cpath%20d%3D%22M22%208c0-2.3-.8-4.3-2-6%22%20%2F%3E%20%3Cpath%20d%3D%22M3.262%2015.326A1%201%200%200%200%204%2017h16a1%201%200%200%200%20.74-1.673C19.41%2013.956%2018%2012.499%2018%208A6%206%200%200%200%206%208c0%204.499-1.411%205.956-2.738%207.326%22%20%2F%3E%20%3Cpath%20d%3D%22M4%202C2.8%203.7%202%205.7%202%208%22%20%2F%3E%20%3C%2Fsvg%3E") center/20px 20px no-repeat; } /* --------------------------------------------------------------------- FK-SIGNUP round 2. 2026-09-13, follow-up audit against the reference at https://fishkill-modern.preview.static.emergentagent.com/signup. Measured with getBoundingClientRect()/getComputedStyle() at 1440 and 375 (guard-checked: location.href + window.innerWidth asserted inside every read, since the shared QA browser session was being driven by multiple concurrent agents this session and several reads were caught and discarded mid-collision). Icon diamond badges from round 1 were re-verified here: computed styles (48x48, radius 12px, bg #14151799, border #d8c08c66, +45/-45 rotation pair, 20x20 gold lucide glyph) are byte-for-byte identical to the reference on all widgets checked - no change needed there, confirmed with a live screenshot as well. Scope: post 190 only, by exact widget ID, same convention as round 1. 1. Heading widget elementor-element-55e18a7 ("Join the club."): the reference applies Tailwind's tracking-tight (-0.025em) at every size (measured -1.5px @ 60px desktop and -0.9px @ 36px mobile - both equal -0.025em), the built widget had no letter-spacing at all (computed "normal"). Also the reference's line-height ratio to font-size is NOT constant: 1.0x at desktop (60px/60px, already matched) but 1.25x at mobile (45px/36px, built was rendering 1.0x i.e. 36px, too tight) - so line-height needs a mobile-only rule. 2. Eyebrow widget elementor-element-ff8a95c ("The Fishkill Club"): reference is flat 12px / letter-spacing 4.2px at EVERY size checked (1440 and 375 both). Built matched at 1440 but dropped to 10px / 5px at 375 - forcing both values unconditionally (no media query needed, since the reference itself never varies these). 3. Subcopy widget elementor-element-3afb775: reference is flat 16px font-size / 26px line-height at every size checked. Built matched font-size at 1440 but read 12px/18px at 375 - same fix, forced unconditionally. 4. AlpineIQ iframe (inside widget elementor-element-61fc1cf): the reference's own iframe box (not a wrapper) carries h-[820px] w-full rounded-2xl bg-white per the brief - confirmed via computed style: border-radius:16px, background:#fff, height:820px, all constant across breakpoints. Built iframe had border-radius:0, transparent background, and height:800px (20px short) at both 1440 and 375 - real, confirmed bug. 5. "Glass card" outer frame around the iframe, widget elementor-element-c2bab95: reference is a solid dark card (bg #1C1D20, radius 24px, plus a soft inset-highlight/drop-shadow) with responsive padding (20px desktop / 12px mobile). Built had a transparent background, 20px radius (should be 24), no shadow, and mobile padding of 25px instead of 12px (desktop padding of 20px already matched, so only the mobile padding needed a media query; background/radius/shadow are forced unconditionally). Not fixed here (out of this widget's scope / not confirmed as this file's bug): the iframe and glass-card widths run ~12-14px narrower on the built page than the reference at every breakpoint checked, but that traces to Elementor's site-wide 1140px boxed container vs the reference's 1152px content width - a global container-width difference outside a single post's CSS, reported instead of guessed at here. --------------------------------------------------------- */ .elementor-190 .elementor-element.elementor-element-55e18a7 h2, .elementor-190 .elementor-element.elementor-element-55e18a7 .elementor-heading-title { letter-spacing: -0.025em !important; } @media (max-width: 639px) { .elementor-190 .elementor-element.elementor-element-55e18a7 h2, .elementor-190 .elementor-element.elementor-element-55e18a7 .elementor-heading-title { line-height: 1.25 !important; } } .elementor-190 .elementor-element.elementor-element-ff8a95c { font-size: 12px !important; letter-spacing: 4.2px !important; } .elementor-190 .elementor-element.elementor-element-3afb775, .elementor-190 .elementor-element.elementor-element-3afb775 p { font-size: 16px !important; line-height: 26px !important; } .elementor-190 .elementor-element.elementor-element-61fc1cf iframe { border-radius: 16px !important; background-color: #fff !important; height: 820px !important; } .elementor-190 .elementor-element.elementor-element-c2bab95 { background-color: #1C1D20 !important; border-radius: 24px !important; padding: 20px !important; box-shadow: rgba(255, 255, 255, 0.09) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.35) 0px -1px 0px 0px inset, rgba(0, 0, 0, 0.75) 0px 28px 56px -32px !important; } @media (max-width: 639px) { .elementor-190 .elementor-element.elementor-element-c2bab95 { padding: 12px !important; } }