.elementor-kit-7{--e-global-color-primary:#223956;--e-global-color-secondary:#2E435F;--e-global-color-text:#1A2433;--e-global-color-accent:#9C5520;--e-global-color-copper1:#E0B183;--e-global-color-acctint:#F2E4D6;--e-global-color-surface:#F6F7F9;--e-global-color-surfalt:#E8ECEE;--e-global-color-whitepg:#FFFFFF;--e-global-color-inkmute:#5C6675;--e-global-color-hairlin:#DDE2E6;--e-global-color-navycrd:rgba(255,255,255,0.06);--e-global-color-hairldk:rgba(255,255,255,0.12);--e-global-color-coptrue:#B87333;--e-global-color-copshim:#F7D9B4;--e-global-color-navydp:#16283E;--e-global-typography-primary-font-family:"Zilla Slab";--e-global-typography-primary-font-weight:500;--e-global-typography-secondary-font-family:"Zilla Slab";--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"Mulish";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Mulish";--e-global-typography-accent-font-size:15px;--e-global-typography-accent-font-weight:600;--e-global-typography-accent-text-transform:none;--e-global-typography-eyebrow-font-family:"Mulish";--e-global-typography-eyebrow-font-size:12px;--e-global-typography-eyebrow-font-weight:600;--e-global-typography-eyebrow-text-transform:uppercase;--e-global-typography-eyebrow-line-height:1.4em;--e-global-typography-eyebrow-letter-spacing:0.12em;color:#1A2433;font-family:"Mulish", Sans-serif;font-size:1.0625rem;font-weight:400;line-height:1.7em;}.elementor-kit-7 button,.elementor-kit-7 input[type="button"],.elementor-kit-7 input[type="submit"],.elementor-kit-7 .elementor-button{background-color:#9C5520;font-family:"Mulish", Sans-serif;font-size:15px;font-weight:600;text-transform:none;letter-spacing:0.01em;color:#FFFFFF;border-radius:10px 10px 10px 10px;padding:14px 28px 14px 28px;}.elementor-kit-7 button:hover,.elementor-kit-7 button:focus,.elementor-kit-7 input[type="button"]:hover,.elementor-kit-7 input[type="button"]:focus,.elementor-kit-7 input[type="submit"]:hover,.elementor-kit-7 input[type="submit"]:focus,.elementor-kit-7 .elementor-button:hover,.elementor-kit-7 .elementor-button:focus{background-color:#7E4318;color:#FFFFFF;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-kit-7 a{color:#9C5520;}.elementor-kit-7 a:hover{color:#223956;}.elementor-kit-7 h1{color:#1A2433;font-family:"Zilla Slab", Sans-serif;font-size:clamp(2.75rem, 5vw, 4.25rem);font-weight:500;line-height:1.05em;}.elementor-kit-7 h2{color:#1A2433;font-family:"Zilla Slab", Sans-serif;font-size:clamp(2rem, 3.5vw, 3rem);font-weight:500;line-height:1.1em;}.elementor-kit-7 h3{color:#1A2433;font-family:"Zilla Slab", Sans-serif;font-size:clamp(1.375rem, 2vw, 1.75rem);font-weight:600;line-height:1.25em;}.elementor-kit-7 h4{color:#1A2433;font-family:"Zilla Slab", Sans-serif;font-size:1.25rem;font-weight:600;}.elementor-kit-7 h5{color:#1A2433;font-family:"Mulish", Sans-serif;font-size:1.0625rem;font-weight:600;}.elementor-kit-7 h6{color:#5C6675;font-family:"Mulish", Sans-serif;font-size:0.875rem;font-weight:600;}.elementor-kit-7 label{color:#5C6675;font-family:"Mulish", Sans-serif;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;}.elementor-kit-7 input:not([type="button"]):not([type="submit"]),.elementor-kit-7 textarea,.elementor-kit-7 .elementor-field-textual{font-family:"Mulish", Sans-serif;font-size:16px;color:#1A2433;background-color:#FFFFFF;border-style:solid;border-width:1px 1px 1px 1px;border-color:#DDE2E6;border-radius:10px 10px 10px 10px;padding:14px 14px 14px 14px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1360px;}.e-con{--container-max-width:1360px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:480px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}} /* Start custom CSS *//* =================================================================== FERGUSON PLUMBING DESIGN — site stylesheet Band roles: .fpd-navy (+.fpd-v1..4) .fpd-surface .fpd-surfalt .fpd-tint .fpd-photo Cards: .fpd-card (light) .fpd-card-dark (on navy) =================================================================== */ /* --- 1. NAVY BANDS ------------------------------------------------- A three-stop ramp with a copper glow, plus a blueprint grid. Four variants cycle the light direction so consecutive dark sections never light identically — that repetition is what made them read flat. */ .fpd-navy{ position:relative; } .fpd-navy{ background-image: linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px), radial-gradient(110% 85% at 12% 0%, rgba(184,115,51,.19) 0%, rgba(184,115,51,0) 58%), linear-gradient(168deg, var(--e-global-color-navydp) 0%, var(--e-global-color-primary) 50%, var(--e-global-color-secondary) 100%); background-size:72px 72px, 72px 72px, 100% 100%, 100% 100%; } .fpd-navy.fpd-v2{ background-image: linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px), radial-gradient(110% 85% at 88% 4%, rgba(184,115,51,.19) 0%, rgba(184,115,51,0) 58%), linear-gradient(196deg, var(--e-global-color-navydp) 0%, var(--e-global-color-primary) 50%, var(--e-global-color-secondary) 100%); } .fpd-navy.fpd-v3{ background-image: linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px), radial-gradient(110% 85% at 8% 96%, rgba(184,115,51,.19) 0%, rgba(184,115,51,0) 58%), linear-gradient(152deg, var(--e-global-color-navydp) 0%, var(--e-global-color-primary) 50%, var(--e-global-color-secondary) 100%); } .fpd-navy.fpd-v4{ background-image: linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px), radial-gradient(110% 85% at 92% 100%, rgba(184,115,51,.19) 0%, rgba(184,115,51,0) 58%), linear-gradient(184deg, var(--e-global-color-navydp) 0%, var(--e-global-color-primary) 50%, var(--e-global-color-secondary) 100%); } /* a copper hairline where a dark band begins — ties the palette together and gives the eye an edge to catch on between sections */ .fpd-navy::before{ content:""; position:absolute; inset:0 0 auto 0; height:2px; pointer-events:none; background:linear-gradient(90deg, transparent 0%, var(--e-global-color-coptrue) 18%, var(--e-global-color-copshim) 42%, var(--e-global-color-coptrue) 66%, transparent 100%); opacity:.5; } /* --- 2. LIGHT BANDS ------------------------------------------------ Surface gets a faint dot field; surface-alt a fine diagonal hatch. Different textures rather than different greys, so adjacent light bands separate without another colour entering the palette. */ .fpd-surface{ background-image:radial-gradient(circle, rgba(34,57,86,.055) 1px, transparent 1px); background-size:26px 26px; } .fpd-surfalt{ background-image:repeating-linear-gradient(135deg, rgba(34,57,86,.038) 0px, rgba(34,57,86,.038) 1px, transparent 1px, transparent 9px); } /* --- 3. COPPER TINT BAND ------------------------------------------- Used for the diagnostic-first argument, so it earns the warmest treatment: a copper wash plus a rule at the top edge. */ .fpd-tint{ position:relative; } .fpd-tint{ background-image: radial-gradient(90% 120% at 88% 0%, rgba(184,115,51,.16) 0%, rgba(184,115,51,0) 62%), radial-gradient(70% 100% at 0% 100%, rgba(156,85,32,.10) 0%, rgba(156,85,32,0) 58%); } .fpd-tint::before{ content:""; position:absolute; inset:0 0 auto 0; height:2px; pointer-events:none; background:linear-gradient(90deg, var(--e-global-color-coptrue), var(--e-global-color-copshim) 45%, transparent 92%); opacity:.55; } /* --- 4. PHOTO HEROES ------------------------------------------------ A downward scrim so the band bleeds into whatever follows rather than stopping at a hard horizontal edge. */ .fpd-photo{ position:relative; } .fpd-photo::after{ content:""; position:absolute; inset:auto 0 0 0; height:38%; pointer-events:none; background:linear-gradient(to bottom, rgba(22,40,62,0), rgba(22,40,62,.55)); } .fpd-photo > *{ position:relative; z-index:1; } /* --- 5. CARDS ------------------------------------------------------- A copper top edge that grows on hover, plus a small lift. Cards are the most repeated object on the site, so this is where interaction pays back most. */ .fpd-card, .fpd-card-dark{ position:relative; overflow:hidden; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .fpd-card::after, .fpd-card-dark::after{ content:""; position:absolute; inset:0 0 auto 0; height:2px; background:linear-gradient(90deg, var(--e-global-color-coptrue), var(--e-global-color-copshim)); transform:scaleX(0); transform-origin:left; transition:transform .28s ease; } .fpd-card:hover, .fpd-card-dark:hover{ transform:translateY(-3px); } .fpd-card:hover::after, .fpd-card-dark:hover::after{ transform:scaleX(1); } .fpd-card:hover{ box-shadow:0 24px 54px -28px rgba(22,36,51,.68); border-color:var(--e-global-color-coptrue) !important; } .fpd-card-dark:hover{ box-shadow:0 24px 56px -24px rgba(0,0,0,.72); border-color:rgba(247,217,180,.32) !important; } /* --- 6. TYPE DETAIL ------------------------------------------------- Zilla Slab is a slab; at display sizes it wants tighter tracking than its defaults, and headings read better balanced. */ h1, h2{ letter-spacing:-.012em; text-wrap:balance; } h3{ letter-spacing:-.006em; text-wrap:balance; } .fpd-navy h2, .fpd-navy h3{ text-shadow:0 1px 0 rgba(0,0,0,.12); } /* italic second phrase is the house H1 pattern — give it the copper */ .fpd-navy h1 i, .fpd-navy h2 i, .fpd-photo h1 i{ color:var(--e-global-color-copper1); font-style:italic; } h1 i, h2 i{ color:var(--e-global-color-accent); font-style:italic; } .fpd-navy h1 i, .fpd-navy h2 i, .fpd-photo h1 i, .fpd-photo h2 i{ color:var(--e-global-color-copper1); } /* --- 7. LINKS + FOCUS ----------------------------------------------- */ .fpd-surface a:focus-visible, .fpd-surfalt a:focus-visible, .fpd-tint a:focus-visible, .fpd-navy a:focus-visible, .elementor-button:focus-visible{ outline:2px solid var(--e-global-color-coptrue); outline-offset:3px; border-radius:2px; } .elementor-button{ transition:background-color .18s ease, transform .18s ease; } .elementor-button:hover{ transform:translateY(-1px); } /* --- 8. MOTION ------------------------------------------------------ */ @media (prefers-reduced-motion:reduce){ .fpd-card, .fpd-card-dark, .fpd-card::after, .fpd-card-dark::after, .elementor-button{ transition:none; } .fpd-card:hover, .fpd-card-dark:hover, .elementor-button:hover{ transform:none; } } /* --- 9. MOBILE ------------------------------------------------------ Patterns scale down so they do not coarsen on small screens. */ @media (max-width:767px){ .fpd-navy{ background-size:52px 52px, 52px 52px, 100% 100%, 100% 100%; } .fpd-surface{ background-size:20px 20px; } } /* --- 10. PHONE BUTTONS --------------------------------------------- Every phone CTA reads as the same object: a copper outline that fills on hover. Two variants because copper that is legible on white is not legible on navy. */ .fpd-phone-btn .elementor-button{ background-color:transparent !important; border:2px solid var(--e-global-color-accent) !important; color:var(--e-global-color-accent) !important; border-radius:8px; font-weight:700; white-space:nowrap; transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease; } .fpd-phone-btn .elementor-button:hover, .fpd-phone-btn .elementor-button:focus-visible{ background-color:var(--e-global-color-accent) !important; color:#fff !important; transform:translateY(-1px); } /* on dark ground, swap to the lighter copper so the text stays legible */ .fpd-navy .fpd-phone-btn .elementor-button, .fpd-photo .fpd-phone-btn .elementor-button{ border-color:var(--e-global-color-copper1) !important; color:var(--e-global-color-copper1) !important; } .fpd-navy .fpd-phone-btn .elementor-button:hover, .fpd-navy .fpd-phone-btn .elementor-button:focus-visible, .fpd-photo .fpd-phone-btn .elementor-button:hover, .fpd-photo .fpd-phone-btn .elementor-button:focus-visible{ background-color:var(--e-global-color-copper1) !important; color:var(--e-global-color-navydp) !important; } /* inline phone links styled as buttons (footer, utility bar) */ a.fpd-phone-inline{ display:inline-flex;align-items:center;gap:8px; padding:7px 14px;border-radius:8px; border:2px solid var(--e-global-color-copper1); color:var(--e-global-color-copper1) !important; font-weight:700;text-decoration:none !important;white-space:nowrap; transition:background-color .18s ease,color .18s ease; } a.fpd-phone-inline:hover,a.fpd-phone-inline:focus-visible{ background-color:var(--e-global-color-copper1); color:var(--e-global-color-navydp) !important; } @media (prefers-reduced-motion:reduce){ .fpd-phone-btn .elementor-button{transition:none;} .fpd-phone-btn .elementor-button:hover{transform:none;} } /* --- 11. FLOATING HERO IMAGERY -------------------------------------- Hero cards now sit on photographs rather than flat colour, so they need genuine separation. Wide soft shadow for depth, tight one for the contact edge, hairline rim so it reads as a physical card. */ .fpd-lift img{ border-radius:12px; box-shadow: 0 46px 96px -30px rgba(4,9,17,.82), 0 18px 38px -16px rgba(4,9,17,.55); outline:1px solid rgba(255,255,255,.14); outline-offset:-1px; transition:transform .35s ease, box-shadow .35s ease; } .fpd-lift:hover img{ transform:translateY(-4px); box-shadow: 0 58px 112px -30px rgba(4,9,17,.88), 0 24px 46px -16px rgba(4,9,17,.6); } /* the small fact card that overlaps the image gets a matching lift */ .fpd-floatcard{ box-shadow: 0 36px 76px -24px rgba(4,9,17,.7), 0 12px 26px -12px rgba(4,9,17,.5) !important; } @media (prefers-reduced-motion:reduce){ .fpd-lift img{transition:none;} .fpd-lift:hover img{transform:none;} } /* --- 12. HEADER SHRINK ON SCROLL ------------------------------------ Elementor stamps .elementor-sticky--effects on the sticky wrapper once it detaches, so the condensed state is pure CSS with no script. Desktop only: on a phone the header is already minimal and the mobile action row would fight the animation. */ @media (min-width:1025px){ .fpd-headerbar, .fpd-utilitybar{ transition:padding-block .26s ease, padding .26s ease; } .fpd-headerlogo img{ transition:width .26s ease; } /* condensed state */ .elementor-sticky--effects .fpd-headerbar{ padding-block-start:6px !important; padding-block-end:6px !important; } .elementor-sticky--effects .fpd-utilitybar{ padding-block-start:5px !important; padding-block-end:5px !important; } .elementor-sticky--effects .fpd-headerlogo img{ width:108px !important; } /* trim the buttons so the bar loses real height, not just padding */ .elementor-sticky--effects .fpd-headerbar .elementor-button{ padding-block-start:8px; padding-block-end:8px; } } @media (prefers-reduced-motion:reduce){ .fpd-headerbar,.fpd-utilitybar,.fpd-headerlogo img{transition:none;} } /* ---- qa remediation ---- */ .fpd-card-dark a, .fpd-navy .fpd-card-dark a{color:var(--e-global-color-copper1);} .fpd-card-dark a:hover{color:var(--e-global-color-copshim);} .fpd-card a.fpd-phone-inline,.fpd-surface a.fpd-phone-inline, .fpd-surfalt a.fpd-phone-inline,.fpd-tint a.fpd-phone-inline{ color:var(--e-global-color-accent) !important; border-color:var(--e-global-color-accent);} .fpd-card a.fpd-phone-inline:hover,.fpd-surface a.fpd-phone-inline:hover, .fpd-surfalt a.fpd-phone-inline:hover,.fpd-tint a.fpd-phone-inline:hover{ background-color:var(--e-global-color-accent);color:#fff !important;} @media(max-width:767px){ .elementor-menu-toggle{min-width:44px;min-height:44px; display:inline-flex;align-items:center;justify-content:center;} a.fpd-phone-inline{min-height:44px;padding-top:10px;padding-bottom:10px;} .fpd-chiprow a,.services-grid__cards a{min-height:36px; display:inline-flex;align-items:center;} }/* End custom CSS */