/* PiRo Kitchens -- brand interaction pass * --------------------------------------------------------------------------- * Three requested changes, kept in their own file so each can be reviewed or * rolled back without touching the compiler-audit or polish stylesheets: * 1. Instagram follow link takes the brand pink on hover * 2. "What we stand for" icon boxes fill pink with a white icon on hover * 3. Muted grey copy is set solid black */ /* --- 1. Instagram follow --------------------------------------------------- * Targets the link rather than the heading text so the whole "FOLLOW * @PIROKITCHENS" block responds, and matches by href so it applies wherever an * Instagram link appears -- the section on Home and Franchise, and the social * list in the footer -- rather than being pinned to one section's element id. */ a[href*="instagram.com"] { transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1); } a[href*="instagram.com"]:hover, a[href*="instagram.com"]:focus-visible { color: #ED286E !important; } /* The footer social rows put the label and the glyph in child elements, which * would otherwise keep their own inherited colour. */ a[href*="instagram.com"]:hover *, a[href*="instagram.com"]:focus-visible * { color: #ED286E !important; } /* --- 2. "What we stand for" icon boxes ------------------------------------- * The circle is a carrying an inline `background:#FAFAF7;border-radius: * 9999px`, and the icon inside is stroked with currentColor at the olive * --olive. Both need !important to beat that inline background. * * The hover is bound to each of the four TILES (icon + title + copy), not to * the circle or to the 56px icon row, so the whole box is the target. The ids * are listed explicitly rather than matched with a descendant :hover because * these tiles sit inside a shared grid wrapper -- a looser selector would * light all four at once. */ .elementor-element-lwc0000r0 .elementor-widget-html > span, .elementor-element-lwc0000r0 .elementor-widget-html > span svg { transition: background-color 240ms cubic-bezier(0.4, 0, 0.2, 1), color 240ms cubic-bezier(0.4, 0, 0.2, 1); } .elementor-element-0200392:hover .elementor-widget-html > span, .elementor-element-8169758:hover .elementor-widget-html > span, .elementor-element-3495692:hover .elementor-widget-html > span, .elementor-element-8439490:hover .elementor-widget-html > span { background: #ED286E !important; } .elementor-element-0200392:hover .elementor-widget-html > span svg, .elementor-element-8169758:hover .elementor-widget-html > span svg, .elementor-element-3495692:hover .elementor-widget-html > span svg, .elementor-element-8439490:hover .elementor-widget-html > span svg { color: #FFFFFF !important; } /* --- 3. Grey copy to solid black ------------------------------------------- * Two distinct sources, so two mechanisms. * * (a) The signature-dish descriptions inherit #7A7A7A from Elementor's own * generated per-widget CSS on the text-editor widget, which is why there * is no class or inline style to hook -- the card class is used instead. */ .pk-dish-card .elementor-widget-text-editor, .pk-dish-card .elementor-widget-text-editor p, .pk-dish-card p { color: #000000 !important; } /* (b) The remaining muted copy carries its grey as an inline `color:` -- the * "Step 01/02/03" labels and similar. Those cannot be reached by class, so * they are matched on the inline value itself. Restricted to text-bearing * elements so an element merely using the same value for a background or * border is not caught. Both spaced and unspaced forms are listed because * the stored markup uses both. */ p[style*="rgba(28,26,24,0.4)"], p[style*="rgba(28, 26, 24, 0.4)"], span[style*="rgba(28,26,24,0.4)"], span[style*="rgba(28, 26, 24, 0.4)"], li[style*="rgba(28,26,24,0.4)"], li[style*="rgba(28, 26, 24, 0.4)"], p[style*="rgba(28,26,24,.35)"], p[style*="rgba(28, 26, 24, .35)"], span[style*="rgba(28,26,24,.35)"], span[style*="rgba(28, 26, 24, .35)"], li[style*="rgba(28,26,24,.35)"], li[style*="rgba(28, 26, 24, .35)"], p[style*="rgba(0,0,0,0.6)"], p[style*="rgba(0, 0, 0, 0.6)"], span[style*="rgba(0,0,0,0.6)"], span[style*="rgba(0, 0, 0, 0.6)"], li[style*="rgba(0,0,0,0.6)"], li[style*="rgba(0, 0, 0, 0.6)"], p[style*="rgba(0,0,0,.5)"], p[style*="rgba(0, 0, 0, .5)"], span[style*="rgba(0,0,0,.5)"], span[style*="rgba(0, 0, 0, .5)"], p[style*="#7A7A7A"], p[style*="#7a7a7a"], span[style*="#7A7A7A"], span[style*="#7a7a7a"], p[style*="#8A8179"], p[style*="#8a8179"], span[style*="#8A8179"], span[style*="#8a8179"] { color: #000000 !important; } /* (c) Widget-level greys that come from Elementor's own generated per-widget * CSS, which is why the element itself carries no class or inline colour: * the About page's "The team" eyebrow and its Instagram caption. */ .elementor-element-teamEyebrow, .elementor-element-teamEyebrow p, .elementor-element-ab0504, .elementor-element-ab0504 p { color: #000000 !important; } /* (d) The CF7 field labels take rgba(0,0,0,0.6) from the Customizer's own * "Additional CSS", which is printed in wp_head AFTER the enqueued * stylesheets. Both declarations are !important and the plain * `.lwc-cf7-field label` selector ties on specificity, so source order * would hand the win to the Customizer. The leading `body` breaks the tie. */ body .lwc-cf7-field label, body form .lwc-cf7-field label, body .wpcf7-form label { color: #000000 !important; } /* --- Header nav typography ------------------------------------------------- * 22px / weight 400 on the desktop header navigation. * * header-footer-fixes.css already carries a `.pk-header-nav a { font-size:24px; * font-weight:500 !important }`, but that rule is not what the links actually * compute to on the live page, so it is not reliable to edit in place. It is * also grouped with the FOOTER nav column (.elementor-element-6390396) -- * editing it there would have restyled the footer links too, which is not what * was asked, so both properties are restated here instead. * * This sets the size on the link, the button and the label span together: the * label carries its own font-size from Elementor's per-widget CSS, so setting * only the anchor leaves the visible text unchanged. Scoped under * .pk-header-root so the footer and the mobile panel are untouched. */ .pk-header-root .pk-header-nav a, .pk-header-root .pk-header-nav .elementor-button, .pk-header-root .pk-header-nav .elementor-button-text { font-size: 22px !important; font-weight: 400 !important; } /* --- Footer nav row: align to the footer's content box --------------------- * The five nav columns each carry 10px of horizontal padding, so their text * sat 10px inside the box on both sides -- symmetric, but 10px narrower than * the brand row above and the legal bar below, which both sit flush at the * box edge. Measured at 1920: legal text ran 160 -> 160 while the nav text ran * 170 -> 170, which is what read as the footer not being properly boxed. * * Only the two OUTER edges are zeroed. Removing the padding from every column * would also change the gaps between them, and those are distributed by * justify-content:space-between -- the inner spacing is fine as it is. * * Scoped to the breakpoint where the row is actually five columns; below that * the columns stack and the padding is what keeps them off the edge. */ @media (min-width: 1025px) { .elementor-element-6390396 > *:first-child { padding-left: 0 !important; } .elementor-element-6390396 > *:last-child { padding-right: 0 !important; } } /* Below that breakpoint the columns stack full width, so every one of them is * an outer edge. Zeroing the padding on all five keeps them flush with the * legal bar and the hairlines instead of sitting 10px inside. */ @media (max-width: 1024px) { .elementor-element-6390396 > * { padding-left: 0 !important; padding-right: 0 !important; } } /* --- Footer content box: match the page's container ------------------------ * The page's sections are capped at 1280px and centred (max-w-[1280px] * mx-auto). The footer's inner box was capped at 1600px, so it ran wider than * everything above it -- 1340px vs 1280px at a 1440 viewport (50px insets * against the page's 80px), widening to 1600 vs 1280 at 1920 (160 against * 320). That is what made the footer read as not following the page flow. * * Capping the footer's inner at the same 1280px lines its left and right edges * up with every section above it at every width. The outer padding is left * alone so narrow viewports keep their existing gutters. */ footer .elementor-element-7868224 > .e-con-inner { max-width: 1280px !important; } /* The remaining 10px came from the footer's outermost container, which adds * 10px of horizontal padding on top of the boxed container's gutter. That * gutter already tracks the page (40px desktop, 24px mobile), so removing the * outer 10px -- and only horizontally, the vertical padding still spaces the * footer -- makes the two line up at every width rather than at one. */ footer .elementor-element-0811676 { padding-left: 0 !important; padding-right: 0 !important; } /* The brand row carries the same 10px of horizontal padding, which left the * logo sitting 10px inside the content edge while "NAVIGATE" directly below it * sat flush -- the most visible misalignment in the footer, since the two are * stacked. Zeroed so the logo starts on the same line as everything else. */ footer .elementor-element-9303606 { padding-left: 0 !important; padding-right: 0 !important; } /* --- 4. Franchise page: pink-border hover on the card/tile groups ---------- * Requested 2026-08-13: "add hover interactions in franchise page as well with * pink border on hover", plus "FOCO Model section add hover interaction for * all 4 icon boxes". * * Every target below is raw markup inside an Elementor `html` widget with its * styling inline and no classes of its own, so each group is reached through * its widget id (.elementor-element-frXXXX) rather than a shared class. * * The ring is drawn with box-shadow, never `border`. All of these cards carry * an inline `box-shadow: 0 0 0 1px rgba(...)` as their resting outline, so * swapping that shadow's colour keeps the geometry byte-identical -- a real * border would add 1px to every edge and reflow the grid on hover. * * Scoped to .page-id-30 so nothing on the other pages is affected. */ .page-id-30 .elementor-element-fr0007 > div > div, .page-id-30 .elementor-element-fr0023 .piro-stats-grid > div, .page-id-30 .elementor-element-fr0029 .pk-hover-card, .page-id-30 .elementor-element-fr0046 > div > div > article, .page-id-30 .elementor-element-fr0058 > div > div > article, .page-id-30 .elementor-element-fr0034 > div > div, .page-id-30 .elementor-element-fr0034 > div > div > span { transition: box-shadow 240ms cubic-bezier(0.4, 0, 0.2, 1), background 240ms cubic-bezier(0.4, 0, 0.2, 1), color 240ms cubic-bezier(0.4, 0, 0.2, 1); } /* (a) The two 1px-gap divider grids -- the hero feature tiles and the * "opportunity" stat tiles. These sit flush against each other inside a * grid whose background shows through the 1px gaps as the divider lines, * so an outer ring would be clipped by the neighbouring cell. The ring is * drawn `inset` instead, landing just inside the tile's own edge. */ .page-id-30 .elementor-element-fr0007 > div > div:hover, .page-id-30 .elementor-element-fr0023 .piro-stats-grid > div:hover { box-shadow: inset 0 0 0 1px #ED286E !important; } /* (b) Free-standing cards. fr0029 already lifts 4px on hover from * phase4-polish.css, whose rule sets `box-shadow: !important` and * so would drop the ring entirely -- both layers are restated here in one * declaration, and this selector outranks the bare `.pk-hover-card:hover`. */ .page-id-30 .elementor-element-fr0029 .pk-hover-card:hover { box-shadow: 0 0 0 1px #ED286E, 0 16px 32px -12px rgba(28, 26, 24, 0.18) !important; } .page-id-30 .elementor-element-fr0046 > div > div > article:hover, .page-id-30 .elementor-element-fr0058 > div > div > article:hover { box-shadow: 0 0 0 1px #ED286E !important; } /* (c) FOCO Model -- the four icon boxes. * These tiles are bare: icon circle + one line of copy, no padding, no * background, so there is no box for a ring to trace. The padding is added * permanently and cancelled by an equal negative margin, which leaves the * resting layout pixel-identical while giving the hover ring somewhere to * sit. box-sizing is border-box here, so max-width is raised by the same * 2rem to keep the text column at its original 10rem (the 10rem is inline, * hence !important). The 2.5rem grid gap absorbs the 1rem bleed. */ .page-id-30 .elementor-element-fr0034 > div > div { max-width: 12rem !important; padding: 1rem; margin: -1rem; border-radius: 1rem; box-shadow: 0 0 0 1px transparent; } .page-id-30 .elementor-element-fr0034 > div > div:hover { box-shadow: 0 0 0 1px #ED286E; } /* The icon circle fills pink on hover, matching the treatment the "How it * works" stages already use further down the same page. The SVG strokes with * currentColor, so setting the circle's colour recolours the glyph. */ .page-id-30 .elementor-element-fr0034 > div > div:hover > span { background: #ED286E !important; color: #FAFAF7 !important; box-shadow: 0 0 0 1px #ED286E !important; } /* (d) "How it works" stages already had a hover (pink icon fill); the card * beside it now takes the pink ring too so the page is consistent. That * rule lives in a