/* ========================================================================== Foxall & Young — Modern UI/UX enhancement layer Scope: body.fy-redesign (Gallery, Services, FAQ, About, Contact only) Inherits the theme's fonts, colours and grid. Adds motion + polish. No layout shift (CLS-safe), honours prefers-reduced-motion. ========================================================================== */ :root{ --fy-accent:#ffb600; --fy-accent-d:#e0a000; --fy-ink:#1a1d1f; --fy-muted:#6b7177; --fy-line:rgba(20,22,24,.09); --fy-shadow:0 18px 40px -18px rgba(18,22,26,.35); --fy-shadow-sm:0 8px 22px -12px rgba(18,22,26,.28); --fy-ease:cubic-bezier(.22,.61,.36,1); --fy-radius:14px; } /* -------------------------------------------------------------------------- 1. Scroll reveal — hidden state gated on .fy-anim (added by JS in ). If JS is off, .fy-anim is never set => content is fully visible (safe). A 2.5s JS fallback also force-reveals everything if the observer fails. -------------------------------------------------------------------------- */ .fy-anim body.fy-redesign .gsf-heading, .fy-anim body.fy-redesign .wpb_text_column, .fy-anim body.fy-redesign .gsf-feature-box, .fy-anim body.fy-redesign .vc_single_image, .fy-anim body.fy-redesign .vc_toggle, .fy-anim body.fy-redesign .fy-reveal, .fy-anim body.fy-redesign .fy-gallery-item{ opacity:0; transform:translate3d(0,30px,0); transition:opacity .7s var(--fy-ease), transform .7s var(--fy-ease); will-change:opacity,transform; } /* will-change:auto is NOT cosmetic — it fixes blurry text. will-change:transform promotes the element to its own compositor layer, and a promoted layer is rasterised into a GPU texture WITHOUT subpixel (LCD) antialiasing, so text reads soft/fuzzy. It was set on the base rule above and never released, so every revealed section kept that layer permanently, long after the 0.7s animation finished. Per MDN: remove will-change once the element stops animating. */ .fy-anim body.fy-redesign .is-visible, .fy-anim-fallback body.fy-redesign .gsf-heading, .fy-anim-fallback body.fy-redesign .wpb_text_column, .fy-anim-fallback body.fy-redesign .gsf-feature-box, .fy-anim-fallback body.fy-redesign .vc_single_image, .fy-anim-fallback body.fy-redesign .vc_toggle, .fy-anim-fallback body.fy-redesign .fy-reveal, .fy-anim-fallback body.fy-redesign .fy-gallery-item{ opacity:1 !important; transform:none !important; will-change:auto; } /* directional + scale variants (set via data-fy on element) */ .fy-anim body.fy-redesign [data-fy="left"]{transform:translate3d(-40px,0,0);} .fy-anim body.fy-redesign [data-fy="right"]{transform:translate3d(40px,0,0);} .fy-anim body.fy-redesign [data-fy="scale"]{transform:scale(.94);} .fy-anim body.fy-redesign [data-fy="blur"]{filter:blur(10px);transition:opacity .8s var(--fy-ease),transform .8s var(--fy-ease),filter .8s var(--fy-ease);} /* Reset to `none`, not `blur(0)`. Any filter value — including a zero-radius blur — keeps the element in the filter rendering path: it stays on its own composited layer and its text keeps being resampled through the filter pipeline, so it never returns to crisp subpixel-antialiased text. `none` removes the filter entirely and takes the element off that path. The animation is unaffected: per the Filter Effects spec, interpolating a filter list against `none` substitutes each function's identity value — for blur that IS blur(0) — so blur(10px) -> none animates exactly as blur(10px) -> blur(0) did, and simply ends with the filter removed instead of latent. */ .fy-anim body.fy-redesign [data-fy="blur"].is-visible{filter:none;} /* -------------------------------------------------------------------------- 2. Hero — cinematic overlay + slow ken-burns zoom -------------------------------------------------------------------------- */ body.fy-redesign .fy-hero-row{position:relative;overflow:hidden;} body.fy-redesign .fy-hero-row .fy-hero-img img, body.fy-redesign .fy-hero-row .vc_single_image img{ width:100%;height:clamp(280px,42vw,560px);object-fit:cover;display:block; transform:scale(1.06);animation:fyKenburns 18s var(--fy-ease) infinite alternate; } body.fy-redesign .fy-hero-row:after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(18,20,22,.15) 0%,rgba(18,20,22,.05) 40%,rgba(18,20,22,.45) 100%); } @keyframes fyKenburns{from{transform:scale(1.02)}to{transform:scale(1.1)}} /* Rolling hero slider (built by JS from the page's own project photos) */ body.fy-redesign .fy-hero-slider{position:relative;width:100%;height:clamp(300px,44vw,580px);overflow:hidden;} body.fy-redesign .fy-hero-slides{position:absolute;inset:0;} body.fy-redesign .fy-hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s var(--fy-ease);} body.fy-redesign .fy-hero-slide img{width:100%;height:100%;object-fit:cover;display:block;} body.fy-redesign .fy-hero-slide.is-active{opacity:1;z-index:1;} body.fy-redesign .fy-hero-slide.is-active img{animation:fyHeroZoom 7s var(--fy-ease) forwards;} @keyframes fyHeroZoom{from{transform:scale(1.06)}to{transform:scale(1)}} body.fy-redesign .fy-hero-dots{position:absolute;left:0;right:0;bottom:20px;z-index:3; display:flex;gap:10px;justify-content:center;} body.fy-redesign .fy-hero-dot{width:10px;height:10px;padding:0;border:0;border-radius:50%;cursor:pointer; background:rgba(255,255,255,.55);box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .3s var(--fy-ease),background .3s var(--fy-ease);} body.fy-redesign .fy-hero-dot:hover{background:#fff;} body.fy-redesign .fy-hero-dot.is-active{background:var(--fy-accent);transform:scale(1.25);} /* Service Gallery section (replaces the removed "Recent Projects" block) */ body.fy-redesign .fy-service-gallery{padding:58px 0 10px;} body.fy-redesign .fy-service-gallery .fy-sg-head{text-align:center;margin:0 0 36px;} body.fy-redesign .fy-service-gallery .fy-sg-title{ margin:0;color:#000;text-transform:uppercase;letter-spacing:.02em; font:800 clamp(24px,3vw,32px)/1.2 'Montserrat',sans-serif;} @media(max-width:600px){body.fy-redesign .fy-service-gallery{padding:40px 0 6px;}} /* -------------------------------------------------------------------------- 3. Section headings — refined accent underline -------------------------------------------------------------------------- */ body.fy-redesign .gsf-heading .accent-color{position:relative;} body.fy-redesign .gsf-heading strong.uppercase{letter-spacing:.02em;} /* -------------------------------------------------------------------------- 4. Feature-box cards — elevation, image zoom, icon nudge -------------------------------------------------------------------------- */ body.fy-redesign .gsf-feature-box{ background:#fff;border:1px solid var(--fy-line);border-radius:var(--fy-radius); overflow:hidden;transition:transform .45s var(--fy-ease),box-shadow .45s var(--fy-ease),border-color .45s var(--fy-ease); height:100%; } body.fy-redesign .gsf-feature-box:hover{ transform:translateY(-8px);box-shadow:var(--fy-shadow);border-color:rgba(255,182,0,.5); } body.fy-redesign .gsf-feature-box .feature-box-image, body.fy-redesign .gsf-feature-box img{overflow:hidden;} body.fy-redesign .gsf-feature-box img{transition:transform .7s var(--fy-ease);width:100%;} body.fy-redesign .gsf-feature-box:hover img{transform:scale(1.07);} body.fy-redesign .gsf-feature-box .feature-box-content{padding:22px 26px 26px;} body.fy-redesign .gsf-feature-box .feature-box-title a{transition:color .3s var(--fy-ease);} body.fy-redesign .gsf-feature-box:hover .feature-box-title a{color:var(--fy-accent-d);} /* -------------------------------------------------------------------------- 5. Buttons — micro-interaction (lift + sheen) -------------------------------------------------------------------------- */ body.fy-redesign .btn, body.fy-redesign .gsf-button .btn{ position:relative;overflow:hidden; transition:transform .3s var(--fy-ease),box-shadow .3s var(--fy-ease),background-color .3s var(--fy-ease),color .3s var(--fy-ease); } body.fy-redesign .btn:hover{transform:translateY(-3px);box-shadow:var(--fy-shadow-sm);} body.fy-redesign .btn:active{transform:translateY(-1px);} body.fy-redesign .btn:before{ content:"";position:absolute;top:0;left:-120%;width:60%;height:100%; background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent); transform:skewX(-20deg);transition:left .6s var(--fy-ease); } body.fy-redesign .btn:hover:before{left:130%;} /* -------------------------------------------------------------------------- 6. Gallery — filterable masonry + hover overlay + lightbox trigger -------------------------------------------------------------------------- */ /* Remove the "Our Work" heading + the "A selection of recent…" intro paragraph from the Gallery page (per client feedback). Both are DB content that sit before the [fy_gallery] shortcode output; the gallery itself (.fy-gallery-wrap) is not a .gf-heading / .wpb_text_column, so it is unaffected. */ body.fy-gallery .gf-entry-content .gf-heading, body.fy-gallery .gf-entry-content .wpb_text_column{ display:none !important; } body.fy-redesign .fy-gallery-wrap{max-width:100%;} body.fy-redesign .fy-filter{ display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 34px; } body.fy-redesign .fy-filter-btn{ border:1px solid var(--fy-line);background:#fff;color:var(--fy-muted); font:600 12px/1 'Montserrat',sans-serif;letter-spacing:.04em;text-transform:uppercase; padding:11px 18px;border-radius:40px;cursor:pointer; transition:all .3s var(--fy-ease); } body.fy-redesign .fy-filter-btn:hover{color:var(--fy-ink);border-color:rgba(255,182,0,.6);transform:translateY(-2px);} body.fy-redesign .fy-filter-btn.is-active{background:var(--fy-accent);border-color:var(--fy-accent);color:#1a1d1f;} body.fy-redesign .fy-gallery{column-count:4;column-gap:16px;} body.fy-redesign .fy-gallery-item{ break-inside:avoid;margin:0 0 16px;border-radius:12px;overflow:hidden;position:relative; transition:opacity .5s var(--fy-ease),transform .5s var(--fy-ease); } body.fy-redesign .fy-gallery-item.is-hidden{display:none;} body.fy-redesign .fy-gallery-item a{display:block;position:relative;overflow:hidden;} body.fy-redesign .fy-gallery-item img{width:100%;display:block;transform:scale(1);transform-origin:center;backface-visibility:hidden;will-change:transform;transition:transform .7s cubic-bezier(.19,1,.22,1) .04s;} /* Hover: the image glides to a 12% zoom under an amber wash, then a frosted "+" springs in over it — the overlay and badge are drawn on the so they stay inside the lightbox trigger and never swallow the click. The .fy-gallery-cap label stays hidden — the lightbox titles itself from the anchor's aria-label. Both surfaces share .fy-gallery-item: the Gallery page and the service-page "Our Work" grids. :focus-visible mirrors :hover for keyboard parity. */ body.fy-redesign .fy-gallery-cap{display:none;} body.fy-redesign .fy-gallery-item a:hover img, body.fy-redesign .fy-gallery-item a:focus-visible img{transform:scale(1.12);} body.fy-redesign .fy-gallery-item a:before{ content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(to top,rgba(255,182,0,.68),rgba(255,182,0,.40) 55%,rgba(18,18,20,.30)); opacity:0;transition:opacity .45s ease; } body.fy-redesign .fy-gallery-item a:hover:before, body.fy-redesign .fy-gallery-item a:focus-visible:before{opacity:1;} /* The "+" is drawn with two gradient bars rather than a text glyph. Bently sets content:"+" and lets it render in Assistant, its body font — Assistant isn't loaded here (Foxall's body font is Montserrat), so the same glyph would come out a different weight and length. Bars match Bently's optical size (~22x3 at 32px) and stay identical regardless of what font loads. */ body.fy-redesign .fy-gallery-item a:after{ content:"";position:absolute;z-index:2;top:50%;left:50%; width:64px;height:64px;border-radius:50%;border:1px solid rgba(255,255,255,.6); background: linear-gradient(#fff,#fff) center/22px 3px no-repeat, linear-gradient(#fff,#fff) center/3px 22px no-repeat, rgba(255,255,255,.18); -webkit-backdrop-filter:blur(6px) saturate(1.1);backdrop-filter:blur(6px) saturate(1.1); box-shadow:0 10px 30px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.35); opacity:0;transform:translate(-50%,-50%) scale(.5); transition:opacity .4s ease .1s,transform .5s cubic-bezier(.34,1.56,.64,1) .1s,background .3s ease,box-shadow .3s ease; } body.fy-redesign .fy-gallery-item a:hover:after, body.fy-redesign .fy-gallery-item a:focus-visible:after{ opacity:1;transform:translate(-50%,-50%) scale(1); /* Re-declare the bars: this shorthand replaces every layer, so listing only the brighter tint here would erase the plus at the moment it becomes visible. */ background: linear-gradient(#fff,#fff) center/22px 3px no-repeat, linear-gradient(#fff,#fff) center/3px 22px no-repeat, rgba(255,255,255,.28); box-shadow:0 14px 40px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.45); } /* Inset offset: .fy-gallery-item clips (overflow:hidden), so a positive offset would put the focus ring outside the figure and clip it away entirely. */ body.fy-redesign .fy-gallery-item a:focus-visible{outline:3px solid var(--fy-accent);outline-offset:-3px;} @media(max-width:1200px){body.fy-redesign .fy-gallery{column-count:3;}} @media(max-width:768px){body.fy-redesign .fy-gallery{column-count:2;}} @media(max-width:460px){body.fy-redesign .fy-gallery{column-count:1;}} /* Smaller "+" on touch/phone widths — bars rescale with the badge. Applies to both resting and hover states so the brighter hover tint keeps its plus. */ @media(max-width:600px){ body.fy-redesign .fy-gallery-item a:after{ width:54px;height:54px; background: linear-gradient(#fff,#fff) center/18px 2.5px no-repeat, linear-gradient(#fff,#fff) center/2.5px 18px no-repeat, rgba(255,255,255,.18); } body.fy-redesign .fy-gallery-item a:hover:after, body.fy-redesign .fy-gallery-item a:focus-visible:after{ background: linear-gradient(#fff,#fff) center/18px 2.5px no-repeat, linear-gradient(#fff,#fff) center/2.5px 18px no-repeat, rgba(255,255,255,.28); } } /* Reduced motion — keep the overlay + "+" fade, drop the zoom and the spring. */ @media (prefers-reduced-motion:reduce){ body.fy-redesign .fy-gallery-item img, body.fy-redesign .fy-gallery-item a:hover img, body.fy-redesign .fy-gallery-item a:focus-visible img{transform:none;transition:none;} body.fy-redesign .fy-gallery-item a:after, body.fy-redesign .fy-gallery-item a:hover:after, body.fy-redesign .fy-gallery-item a:focus-visible:after{ transform:translate(-50%,-50%); transition:opacity .2s ease,background .3s ease; } } /* Lightbox */ .fy-lb{position:fixed;inset:0;z-index:99999;background:rgba(12,13,15,.94); display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden; transition:opacity .35s var(--fy-ease),visibility .35s;} .fy-lb.is-open{opacity:1;visibility:visible;} /* Image + caption scale up together (fade comes from the overlay opacity). */ .fy-lb-figure{margin:0;display:flex;flex-direction:column;align-items:center;max-height:90vh; transform:scale(.96);transition:transform .35s var(--fy-ease);} .fy-lb.is-open .fy-lb-figure{transform:scale(1);} .fy-lb img{max-width:90vw;max-height:80vh;width:auto;height:auto;display:block;border-radius:10px; box-shadow:0 30px 80px -20px rgba(0,0,0,.7);background:#fff;} .fy-lb-cap{margin-top:16px;color:#fff;text-align:center;max-width:80vw;opacity:.95; font:600 15px/1.5 'Montserrat',sans-serif;letter-spacing:.3px;} .fy-lb-btn{position:absolute;background:rgba(255,255,255,.1);border:0;color:#fff;width:52px;height:52px; border-radius:50%;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center; transition:background .25s;} .fy-lb-btn:hover{background:var(--fy-accent);color:#1a1d1f;} .fy-lb-close{top:22px;right:22px;} .fy-lb-prev{left:22px;top:50%;transform:translateY(-50%);} .fy-lb-next{right:22px;top:50%;transform:translateY(-50%);} .fy-lb-count{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:rgba(255,255,255,.7); font:600 12px/1 'Montserrat',sans-serif;letter-spacing:.1em;} @media(max-width:600px){.fy-lb-prev{left:10px}.fy-lb-next{right:10px}.fy-lb-btn{width:44px;height:44px;font-size:17px}} /* -------------------------------------------------------------------------- 7. FAQ accordion — modern card, smooth reveal, animated icon -------------------------------------------------------------------------- */ body.fy-redesign .vc_toggle.fy-faq, body.fy-redesign .vc_tta-panel{ background:#fff;border:1px solid var(--fy-line);border-radius:12px;margin:0 0 14px; overflow:hidden;transition:box-shadow .35s var(--fy-ease),border-color .35s var(--fy-ease); } body.fy-redesign .vc_toggle.fy-faq:hover{box-shadow:var(--fy-shadow-sm);border-color:rgba(255,182,0,.4);} body.fy-redesign .vc_toggle.fy-faq .vc_toggle_title{ padding:20px 56px 20px 24px;position:relative;cursor:pointer; font:600 16px/1.4 'Montserrat',sans-serif;color:var(--fy-ink); } body.fy-redesign .vc_toggle.fy-faq .vc_toggle_title h4{font-size:16px;margin:0;} body.fy-redesign .vc_toggle.fy-faq .vc_toggle_icon{ right:22px;left:auto;border:0;width:20px;height:20px;transition:transform .4s var(--fy-ease); } body.fy-redesign .vc_toggle.fy-faq .vc_toggle_icon:before, body.fy-redesign .vc_toggle.fy-faq .vc_toggle_icon:after{ content:"";position:absolute;top:50%;left:50%;background:var(--fy-accent);border-radius:2px; } body.fy-redesign .vc_toggle.fy-faq .vc_toggle_icon:before{width:16px;height:2px;transform:translate(-50%,-50%);} body.fy-redesign .vc_toggle.fy-faq .vc_toggle_icon:after{width:2px;height:16px;transform:translate(-50%,-50%);transition:transform .4s var(--fy-ease);} body.fy-redesign .vc_toggle.fy-faq.vc_toggle_active .vc_toggle_icon:after{transform:translate(-50%,-50%) scaleY(0);} body.fy-redesign .vc_toggle.fy-faq .vc_toggle_content{padding:0 24px 22px;color:var(--fy-muted);line-height:1.7;} body.fy-redesign .vc_toggle.fy-faq.vc_toggle_active{border-color:rgba(255,182,0,.55);box-shadow:var(--fy-shadow-sm);} /* -------------------------------------------------------------------------- 8. Contact — info cards + modern form fields (floating-ish focus) -------------------------------------------------------------------------- */ body.fy-redesign .fy-map iframe{filter:grayscale(.15) contrast(1.02);transition:filter .5s var(--fy-ease);} body.fy-redesign .fy-map:hover iframe{filter:none;} body.fy-redesign .wpcf7-form .row{display:flex;flex-wrap:wrap;margin:0 -8px;} body.fy-redesign .wpcf7-form .col-sm-6{padding:0 8px;} body.fy-redesign .wpcf7-form label{display:block;font:600 12px/1 'Montserrat',sans-serif;color:var(--fy-muted); text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;} body.fy-redesign .wpcf7-form input:not([type=submit]), body.fy-redesign .wpcf7-form textarea{ width:100%;border:1px solid var(--fy-line);border-radius:10px;background:#fbfbfc; padding:14px 16px;margin-bottom:18px;transition:border-color .3s var(--fy-ease),box-shadow .3s var(--fy-ease),background .3s; } body.fy-redesign .wpcf7-form input:focus, body.fy-redesign .wpcf7-form textarea:focus{ outline:none;border-color:var(--fy-accent);background:#fff; box-shadow:0 0 0 4px rgba(255,182,0,.14); } body.fy-redesign .wpcf7-form textarea{min-height:140px;resize:vertical;} /* Contact feedback: add breathing room between each field LABEL and its input. CF7 wraps the input inside