/* Theme Name: Water Works Plus Theme URI: https://waterworksplus.example Author: Built for Water Works Plus, LLC Description: Block theme for Water Works Plus, LLC — water purification, well and septic services in Weston, Colorado. Every section of every page, images included, is edited with the normal WordPress block editor. Ships with the site's pages, patterns and menus. Version: 3.9.3 Requires at least: 6.3 Tested up to: 6.6 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: wwp Tags: block-patterns, full-site-editing, business, custom-colors, custom-logo, custom-menu, wide-blocks */ /* -------------------------------------------------------------------------- Layout-only support for the block markup. Colors, type and spacing come from theme.json and from each block's own settings in the editor. -------------------------------------------------------------------------- */ /* Banner: the Spanish Peaks photo behind the top bar, logo and navigation --- */ .wwp-banner{position:relative;isolation:isolate;min-height:320px; background-image:url(assets/img/spanish-peaks.jpg); background-size:cover;background-position:center 46%;background-repeat:no-repeat} /* A navy wash over the photo instead of a white one: the snow and sky are far too bright to carry white type on their own, and a light scrim drained the colour out of the peaks. Heaviest behind the menu, easing off lower down. */ .wwp-banner::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(180deg, rgba(17,28,42,.86) 0px, rgba(17,28,42,.66) 120px, rgba(17,28,42,.42) 200px, rgba(17,28,42,.32) 280px, rgba(17,28,42,.30) 100%)} .wwp-banner>*{position:relative} /* The contact strip keeps its navy, just translucent enough to sit on the photo. */ .wwp-banner .wwp-topbar{background-color:rgba(12,20,31,.92)} /* Top bar ---------------------------------------------------------------- */ .wwp-topbar{font-size:.8rem} .wwp-topbar p{margin:0} .wwp-topbar a{color:#fff;font-weight:400;text-decoration:none} .wwp-topbar a:hover{color:var(--wp--preset--color--teal)} /* Header ----------------------------------------------------------------- */ .wwp-header .wp-block-site-logo img{max-height:132px;width:auto;display:block} .wwp-header .wp-block-site-logo{margin:0;flex:0 0 auto} .wwp-brand{flex-shrink:0} .wwp-nav{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em} /* Bold white. Core wraps each link in its own span, and a colour set on the navigation block in the editor lands on that inner element, so every part of the link is forced here. The shadow is tight rather than soft — a wide blur reads as fuzzy type against a photo. */ .wwp-nav, .wwp-nav a, .wwp-nav li, .wwp-nav span, .wwp-nav .wp-block-navigation-item__content, .wwp-nav .wp-block-navigation-item__label{color:#fff !important} .wwp-nav a{text-decoration:none;font-weight:700;text-shadow:0 1px 2px rgba(9,16,26,.5)} .wwp-nav a:hover, .wwp-nav a:hover span, .wwp-nav a:hover .wp-block-navigation-item__label{color:var(--wp--preset--color--teal) !important} .wwp-nav .current-menu-item a{color:var(--wp--preset--color--teal);box-shadow:inset 0 -2px 0 var(--wp--preset--color--teal)} /* Half-and-half bands ----------------------------------------------------- */ /* Left panel text lines up with the page container; the photo bleeds to the edge. */ .wwp-panel{display:flex;flex-direction:column;justify-content:center;align-items:flex-end} .wwp-panel>.wwp-panel__inner{width:100%;max-width:calc(var(--wp--style--global--wide-size, 1280px) * .5 - 32px)} .wwp-panel h1{max-width:17ch} .wwp-split{gap:0 !important;align-items:stretch !important} .wwp-split>.wp-block-column{margin:0 !important;align-self:stretch !important} /* The photo is pinned to all four edges of its column, so it matches the panel beside it at any width without depending on a percentage height resolving. The !important flags are needed because core prints the image block's stylesheet after this one, at equal specificity. */ .wwp-split>.wp-block-column:not(.wwp-panel){padding:0 !important;position:relative !important; overflow:hidden !important;min-height:420px !important;display:block !important} /* Whatever the photo is wrapped in — a figure, a cover block or a bare img — it gets pinned to all four edges of the column, so it always matches the panel beside it. aspect-ratio is neutralised because the editor writes one onto an image when someone resizes it, and that fights the fill. */ .wwp-split>.wp-block-column:not(.wwp-panel)>figure, .wwp-split>.wp-block-column:not(.wwp-panel)>img, .wwp-split>.wp-block-column:not(.wwp-panel)>.wp-block-cover, .wwp-split>.wp-block-column:not(.wwp-panel)>.wp-block-image{position:absolute !important; top:0 !important;right:0 !important;bottom:0 !important;left:0 !important; width:100% !important;height:100% !important;margin:0 !important;padding:0 !important; line-height:0 !important;max-width:none !important;aspect-ratio:auto !important} .wwp-split>.wp-block-column:not(.wwp-panel) img{width:100% !important;height:100% !important; min-height:100% !important;aspect-ratio:auto !important;object-fit:cover !important; display:block !important;margin:0 !important;max-width:none !important} /* Full-width navy hero band: copy on the left, service list on the right ---- */ .wwp-hero-band h1{max-width:18ch} .wwp-hero-band__label{color:var(--wp--preset--color--teal)} .wwp-hero-services{list-style:none;padding:0;margin:0 0 26px; display:grid;grid-template-columns:1fr 1fr;gap:14px 28px} .wwp-hero-services li{margin:0;padding-left:26px;position:relative;font-size:.95rem;line-height:1.35} .wwp-hero-services li::before{content:"";position:absolute;left:0;top:.6em;width:14px;height:2px; background:var(--wp--preset--color--teal)} .wwp-hero-services a{color:#fff;text-decoration:none;font-weight:500} .wwp-hero-services a:hover{color:var(--wp--preset--color--teal)} .wwp-hero-band__estimate{margin:0;padding-top:20px;border-top:1px solid rgba(255,255,255,.14)} /* Section head: label left, note right, rule underneath ------------------- */ .wwp-sec-head{border-bottom:1px solid var(--wp--preset--color--ink);padding-bottom:14px;margin-bottom:56px;gap:24px} .wwp-sec-head p{margin:0} .wwp-sec-head .wwp-sec-head__note{text-align:right;color:var(--wp--preset--color--muted)} /* Services grid ----------------------------------------------------------- */ .wwp-svc-grid{display:grid;grid-template-columns:repeat(4,1fr)} .wwp-svc-grid>*{margin:0} .wwp-svc{padding:34px 28px 34px 0;border-right:1px solid var(--wp--preset--color--line)} .wwp-svc:not(:nth-child(4n+1)){padding-left:28px} .wwp-svc:nth-child(4n){border-right:0;padding-right:0} .wwp-svc::before{content:"";display:block;width:26px;height:3px;background:var(--wp--preset--color--teal);margin-bottom:26px} .wwp-svc h3,.wwp-svc p{margin:0} .wwp-svc h3{font-size:1.02rem;font-weight:600} .wwp-svc a{color:inherit;text-decoration:none} .wwp-svc a:hover{color:var(--wp--preset--color--teal)} .wwp-svc.wwp-svc--cta{background:var(--wp--preset--color--wash);padding:34px 28px;border-right:0} .wwp-svc.wwp-svc--cta::before{display:none} .wwp-svc--cta p{margin:0 0 4px} .wwp-svc--cta a{color:var(--wp--preset--color--teal);font-weight:600} /* Numbered reasons -------------------------------------------------------- */ .wwp-reasons{list-style:none;padding:0;margin:0;counter-reset:wwp-reason} .wwp-reasons li{counter-increment:wwp-reason;position:relative;padding-left:52px;margin-bottom:20px;line-height:1.55} .wwp-reasons li::before{content:counter(wwp-reason,decimal-leading-zero);position:absolute;left:0;top:0; color:var(--wp--preset--color--teal);font-weight:600} /* Values row -------------------------------------------------------------- */ .wwp-values{display:grid;grid-template-columns:repeat(5,1fr);gap:28px} .wwp-values>*{margin:0} .wwp-value{text-align:center} .wwp-value::before{content:"";display:block;width:84px;height:84px;border-radius:50%;margin:0 auto 20px; background-color:#eaf8fa;background-repeat:no-repeat;background-position:center;background-size:38px 38px} .wwp-value.is-icon-clock::before{background-image: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-linecap%3D%22round%22%3E%3Crect%20x%3D%229.6%22%20y%3D%221.4%22%20width%3D%224.8%22%20height%3D%222.2%22%20rx%3D%221.1%22%20fill%3D%22%2316b6cb%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M12%203.6v2.2%22%20stroke%3D%22%23111c2a%22%20stroke-width%3D%221.7%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M18.6%206.2l1.5-1.5%22%20stroke%3D%22%23111c2a%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2214%22%20r%3D%227.6%22%20fill%3D%22none%22%20stroke%3D%22%23111c2a%22%20stroke-width%3D%221.7%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M12%2014V9.6%22%20stroke%3D%22%2316b6cb%22%20stroke-width%3D%222.1%22%20stroke-linecap%3D%22round%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M12%2014l3.2%202.4%22%20stroke%3D%22%23111c2a%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E")} .wwp-value.is-icon-tool::before{background-image: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-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M15.2%202.6a5.6%205.6%200%200%200-5.1%207.8L3.2%2017.3a2.3%202.3%200%201%200%203.2%203.2l6.9-6.9a5.6%205.6%200%200%200%206.9-7.6l-3%203-2.6-.6-.6-2.6%203-3a5.6%205.6%200%200%200-1.8-.2z%22%0A%20%20%20%20%20fill%3D%22none%22%20stroke%3D%22%23111c2a%22%20stroke-width%3D%221.7%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%225.1%22%20cy%3D%2218.6%22%20r%3D%221.25%22%20fill%3D%22%2316b6cb%22%2F%3E%3C%2Fsvg%3E")} .wwp-value.is-icon-case::before{background-image: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-linecap%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%224.2%22%20width%3D%2216%22%20height%3D%2217.2%22%20rx%3D%222.2%22%20fill%3D%22%2316b6cb%22%20fill-opacity%3D%22.16%22%20stroke%3D%22%23111c2a%22%20stroke-width%3D%221.7%22%2F%3E%0A%20%20%3Crect%20x%3D%228.6%22%20y%3D%221.9%22%20width%3D%226.8%22%20height%3D%223.8%22%20rx%3D%221.4%22%20fill%3D%22%23111c2a%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M7.8%2011.6l1.8%201.8%203.2-3.4%22%20fill%3D%22none%22%20stroke%3D%22%2316b6cb%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M15.2%2011.4h1.4%22%20stroke%3D%22%23111c2a%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M7.8%2017h8.8%22%20stroke%3D%22%23111c2a%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E")} .wwp-value.is-icon-badge::before{background-image: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-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M12%203.2v16.4%22%20stroke%3D%22%23111c2a%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M7.2%2020.4h9.6%22%20stroke%3D%22%23111c2a%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M4%206.6h16%22%20stroke%3D%22%23111c2a%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%2212%22%20cy%3D%226.6%22%20r%3D%221.5%22%20fill%3D%22%2316b6cb%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M4%206.6%201.6%2012.4h4.8z%22%20fill%3D%22%2316b6cb%22%20fill-opacity%3D%22.22%22%20stroke%3D%22%23111c2a%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M20%206.6l-2.4%205.8h4.8z%22%20fill%3D%22%2316b6cb%22%20fill-opacity%3D%22.22%22%20stroke%3D%22%23111c2a%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E")} .wwp-value.is-icon-shield::before{background-image: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-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M12%202.2l8%203.2v6c0%204.6-3.3%208.6-8%209.8-4.7-1.2-8-5.2-8-9.8v-6z%22%0A%20%20%20%20%20fill%3D%22%2316b6cb%22%20fill-opacity%3D%22.16%22%20stroke%3D%22%23111c2a%22%20stroke-width%3D%221.7%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M8.2%2012.1l2.7%202.7%205-5.2%22%20fill%3D%22none%22%20stroke%3D%22%2316b6cb%22%20stroke-width%3D%222.3%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E")} .wwp-value.is-icon-drop::before{background-image: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-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M12%202.4s6.6%207%206.6%2011.2A6.6%206.6%200%200%201%205.4%2013.6C5.4%209.4%2012%202.4%2012%202.4z%22%0A%20%20%20%20%20fill%3D%22%2316b6cb%22%20fill-opacity%3D%22.18%22%20stroke%3D%22%23111c2a%22%20stroke-width%3D%221.7%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M9%2014.2a3%203%200%200%200%203%203%22%20fill%3D%22none%22%20stroke%3D%22%2316b6cb%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E")} .wwp-value p{margin:0;font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase; color:var(--wp--preset--color--ink)} /* Helpful links ----------------------------------------------------------- */ .wwp-helpful{border-top:1px solid var(--wp--preset--color--line); border-bottom:1px solid var(--wp--preset--color--line)} .wwp-helpful .wp-block-buttons{justify-content:center} /* Smaller than the standard button so all three primers fit on one row. */ .wwp-helpful .wp-block-button>.wp-block-button__link{font-size:.88rem;font-weight:500; letter-spacing:0;text-transform:none;padding:13px 18px!important} /* Link cards: logo, name and a line of context, each linking out ---------- */ /* Bordered cards rather than a 1px-gap grid: the row is not always a multiple of three, and empty cells showed through as gray blocks. */ .wwp-link-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .wwp-link-grid>*{margin:0} .wwp-link-card{background:#fff;padding:28px;border:1px solid var(--wp--preset--color--line)} .wwp-link-card .wwp-link-card__logo{margin:0 0 18px} .wwp-link-card .wwp-link-card__logo img{width:170px;height:85px;object-fit:contain;display:block} .wwp-link-card h3{margin:0 0 8px;font-size:1rem;line-height:1.3} .wwp-link-card h3 a{color:var(--wp--preset--color--ink);text-decoration:none} .wwp-link-card h3 a:hover{color:var(--wp--preset--color--teal)} .wwp-link-card p{margin:0;font-size:.92rem;color:var(--wp--preset--color--muted)} /* Affiliations: every logo is pre-sized to the same tile, so they sit on one centered row and wrap evenly on narrow screens. */ .wwp-affil-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px} .wwp-affil-row>*{margin:0} .wwp-affil-logo{width:150px} .wwp-affil-logo img{width:150px;height:75px;object-fit:contain;display:block} /* Service area bar -------------------------------------------------------- */ .wwp-area-bar p{margin:0} /* Footer ------------------------------------------------------------------ */ .wwp-footer a{text-decoration:none} .wwp-footer p{margin:0 0 8px} .wwp-footer ul{list-style:none;padding:0;margin:0} .wwp-footer li{margin-bottom:10px} .wwp-paycards{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px; list-style:none;padding:0} /* The list text stays in the markup for screen readers; the chip itself is the brand mark. Items are matched by position, so keep them in this order: Visa, Mastercard, Amex, Discover, Cash, Check, Zelle. */ .wwp-paycards li{width:64px;height:40px;margin:0;padding:0;border-radius:3px;overflow:hidden; font-size:0;line-height:0;color:transparent;background:#fff center/cover no-repeat} .wwp-paycards li:nth-child(1){background-image:url(assets/img/pay/visa.png)} .wwp-paycards li:nth-child(2){background-image:url(assets/img/pay/mastercard.png)} .wwp-paycards li:nth-child(3){background-image:url(assets/img/pay/amex.png)} .wwp-paycards li:nth-child(4){background-image:url(assets/img/pay/discover.png)} .wwp-paycards li:nth-child(5){background-image:url(assets/img/pay/cash.png)} .wwp-paycards li:nth-child(6){background-image:url(assets/img/pay/check.png)} .wwp-paycards li:nth-child(7){background-image:url(assets/img/pay/zelle.png)} .wwp-legal{font-size:.74rem;line-height:1.6} /* Editor content ---------------------------------------------------------- */ /* Body copy sits in a readable column, left-aligned with the rest of the page. */ /* One measure for every child, left-aligned with the rest of the page. The !important margins are deliberate: core's layout CSS sets auto margins with !important, and headings must line up with the text under them. */ .wwp-prose.wwp-prose>*:not(.alignfull):not(.alignwide){ max-width:46rem; margin-left:max(0px,calc((100% - var(--wp--style--global--content-size,1280px)) / 2))!important; margin-right:auto!important} .wwp-prose li{margin-bottom:10px} .wwp-card{background:var(--wp--preset--color--wash);padding:30px} /* Sections butt up against each other; each one carries its own padding. */ .wp-site-blocks>*{margin-block-start:0;margin-block-end:0} .wp-block-post-content>.alignfull{margin-block-start:0;margin-block-end:0} /* Two dark bands in a row read as one section, split by a hairline rather than by a stripe of white page showing through. */ .wp-block-post-content>:is(.has-ink-background-color,.has-ink-deep-background-color) +:is(.has-ink-background-color,.has-ink-deep-background-color){ border-top:1px solid rgba(255,255,255,.12)} /* Sensible defaults for content written in the editor --------------------- */ .wp-block-post-content li{margin-bottom:8px} :where(.wp-block-image) img{height:auto} /* Responsive -------------------------------------------------------------- */ @media (max-width:1100px){ .wwp-svc-grid{grid-template-columns:repeat(2,1fr)} .wwp-svc,.wwp-svc:not(:nth-child(4n+1)){padding-left:0;padding-right:28px;border-right:1px solid var(--wp--preset--color--line)} .wwp-svc:not(:nth-child(2n+1)){padding-left:28px} .wwp-svc:nth-child(2n){border-right:0;padding-right:0} .wwp-values{grid-template-columns:repeat(3,1fr);gap:34px} } @media (max-width:781px){ /* Phones: the header rows sit on white, with the photo showing as a strip underneath, so a wrapped menu never lands on the mountains. */ /* aspect-ratio off here: the header rows set the height and the photo shows as a strip beneath them */ .wwp-banner{min-height:0;padding-bottom:150px;background-position:center 40%} .wwp-banner::before{background:linear-gradient(180deg, rgba(17,28,42,.86) 0px, rgba(17,28,42,.70) 120px, rgba(17,28,42,.42) calc(100% - 120px), rgba(17,28,42,.32) 100%)} /* On phones the scrim runs bottom-up instead of left-to-right. */ .wwp-hero-photo::before{background:linear-gradient(180deg, rgba(17,28,42,.55) 0%, rgba(17,28,42,.88) 38%, rgba(17,28,42,.96) 100%)} .wwp-hero-photo img.wp-block-cover__image-background{object-position:center 30%} .wwp-header>.wp-block-group{flex-wrap:wrap;gap:16px} /* the block writes an inline width, so both axes need pinning here */ .wwp-header .wp-block-site-logo img{width:88px !important;height:auto !important;max-height:88px} .wwp-hero-services{grid-template-columns:1fr} .wwp-panel{align-items:flex-start} .wwp-panel>.wwp-panel__inner{max-width:none} .wwp-split>.wp-block-column:not(.wwp-panel){min-height:300px !important} .wwp-helpful .wp-block-buttons{justify-content:flex-start} .wwp-sec-head .wwp-sec-head__note{text-align:left} } @media (max-width:640px){ .wwp-svc-grid,.wwp-values{grid-template-columns:1fr} .wwp-svc,.wwp-svc:not(:nth-child(4n+1)),.wwp-svc:not(:nth-child(2n+1)){border-right:0; border-bottom:1px solid var(--wp--preset--color--line);padding:26px 0} .wwp-svc.wwp-svc--cta{padding:26px 20px;border-bottom:0} } @media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;transition-duration:.01ms!important} } /* Quote form ([wwp_quote_form]) ------------------------------------------- */ .wwp-form__row--2{display:grid;grid-template-columns:1fr 1fr;gap:20px} .wwp-form p{margin:0 0 20px} .wwp-form label{display:block;margin-bottom:8px;font-size:.78rem;font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:var(--wp--preset--color--ink)} .wwp-form input[type=text],.wwp-form input[type=email],.wwp-form input[type=tel], .wwp-form select,.wwp-form textarea{box-sizing:border-box;width:100%;max-width:100%; padding:14px 16px;border:1px solid var(--wp--preset--color--line); background:#fff;font-family:inherit;font-size:.95rem;color:var(--wp--preset--color--body-text)} /* Without border-box the padding and border are added to the 100% width, which pushes the fields past the right edge of the card. */ .wwp-form,.wwp-form *{box-sizing:border-box} .wwp-form{max-width:100%} .wwp-form input:focus,.wwp-form select:focus,.wwp-form textarea:focus{border-color:var(--wp--preset--color--teal);outline:none} .wwp-form textarea{resize:vertical} .wwp-form__hp{position:absolute;left:-9999px} .wwp-form__notice{padding:16px 20px;border-left:3px solid var(--wp--preset--color--teal); background:var(--wp--preset--color--wash);font-size:.95rem} .wwp-form__notice.is-error{border-left-color:#c0392b} .wwp-form__submit{cursor:pointer;border:0} @media (max-width:640px){.wwp-form__row--2{grid-template-columns:1fr}} /* Feature cards (service pages) ------------------------------------------ */ .wwp-features{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--wp--preset--color--line)} .wwp-features>*{margin:0;background:#fff;padding:32px 28px} .wwp-feature::before{content:"";display:block;width:26px;height:3px;background:var(--wp--preset--color--teal);margin-bottom:22px} .wwp-feature h3{margin:0 0 10px;font-size:1rem} .wwp-feature p{margin:0;font-size:.92rem;color:var(--wp--preset--color--muted)} /* Numbered process band --------------------------------------------------- */ .wwp-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px} .wwp-steps>*{margin:0;border-top:2px solid var(--wp--preset--color--teal);padding-top:18px} .wwp-step h3{margin:10px 0 8px;font-size:1rem} .wwp-step p{margin:0;font-size:.9rem} .wwp-step .wwp-step__label{font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--wp--preset--color--teal);margin:0} /* Checklist band ---------------------------------------------------------- */ .wwp-checklist{list-style:none;padding:0;margin:0;columns:2;column-gap:48px} .wwp-checklist li{break-inside:avoid;padding-left:26px;position:relative;margin-bottom:12px} .wwp-checklist li::before{content:"";position:absolute;left:0;top:11px;width:12px;height:2px; background:var(--wp--preset--color--teal)} /* Bold type is wider: tighten the menu before it wraps to two rows. */ @media (max-width:1320px){ .wwp-nav{font-size:.72rem;letter-spacing:.03em} .wwp-nav .wp-block-navigation__container, .wwp-nav ul{gap:17px !important} } @media (max-width:1100px){ .wwp-link-grid{grid-template-columns:repeat(2,1fr)} .wwp-features{grid-template-columns:repeat(2,1fr)} .wwp-steps{grid-template-columns:repeat(2,1fr)} } @media (max-width:640px){ .wwp-link-grid{grid-template-columns:1fr} .wwp-features,.wwp-steps{grid-template-columns:1fr} .wwp-checklist{columns:1} } /* Footer BBB badge -------------------------------------------------------- */ /* The badge artwork ships with the theme; the text inside stays for screen readers. */ .wwp-badge{display:block;width:220px;height:84px;margin-left:auto;margin-bottom:12px; background:url(assets/img/bbb-badge.png) center/contain no-repeat; font-size:0;line-height:0;color:transparent} .wwp-badge>*{display:none} /* A real BBB badge image dropped into the last footer column: same 24px radius, and the rating text below it sits inset so it centers under the badge. */ .wwp-footer .wp-block-column:last-child figure.wp-block-image{margin:0 0 0 auto} .wwp-footer .wp-block-column:last-child figure.wp-block-image img{border-radius:24px;display:block} .wwp-footer .wp-block-column:last-child figure.wp-block-image+p, .wwp-footer .wp-block-column:last-child .wwp-badge+p{ padding-top:.67rem;margin-left:2.25rem;margin-right:2.25rem;text-align:center} .wwp-badge>*{margin:0} .wwp-badge__mark{font-size:1.5rem;font-weight:700;line-height:1;color:var(--wp--preset--color--ink)} .wwp-badge__text{font-size:.7rem;line-height:1.3;color:var(--wp--preset--color--muted)} .wwp-footer .wp-block-column:last-child{display:flex;flex-direction:column;align-items:flex-end} /* Header brand ------------------------------------------------------------ */ .wwp-brand{gap:12px} .wwp-brand .wp-block-site-title, .wwp-brand .wp-block-site-title a{text-decoration:none;color:#fff !important;font-weight:700; text-shadow:0 1px 2px rgba(9,16,26,.5)} /* The site title is only a stand-in until a logo is uploaded. */ .wwp-brand:has(.wp-block-site-logo img) .wp-block-site-title{display:none} .wwp-header>.wp-block-group{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:32px} /* Contact page ------------------------------------------------------------ */ .wwp-details{list-style:none;padding:0;margin:0} .wwp-details li{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:14px 0; border-bottom:1px solid var(--wp--preset--color--line);margin:0;font-size:.95rem} .wwp-details li strong{font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase; color:var(--wp--preset--color--muted);padding-top:3px} .wwp-form-card{background:var(--wp--preset--color--wash);padding:36px} .wwp-form-card>*:first-child{margin-top:0} .wwp-form-card>h2{margin-bottom:28px} @media (max-width:640px){.wwp-details li{grid-template-columns:1fr;gap:2px}} /* Headings ---------------------------------------------------------------- */ /* Zero-specificity default, so any color set on a block always wins. */ :where(h1,h2,h3,h4,h5,h6){color:var(--wp--preset--color--ink)} /* Headings sitting on a navy panel, even if the color class is missing. */ :is(.has-ink-background-color,.has-ink-deep-background-color,.wwp-panel) :is(h1,h2,h3,h4,h5,h6){ color:var(--wp--preset--color--white)} /* An explicit choice on the block beats everything, including stale cached CSS. */ :is(h1,h2,h3,h4,h5,h6).has-white-color{color:var(--wp--preset--color--white)!important} :is(h1,h2,h3,h4,h5,h6).has-teal-color{color:var(--wp--preset--color--teal)!important} :is(h1,h2,h3,h4,h5,h6).has-ink-color{color:var(--wp--preset--color--ink)!important} :is(h1,h2,h3,h4,h5,h6).has-light-color{color:var(--wp--preset--color--light)!important} :is(h1,h2,h3,h4,h5,h6).has-muted-color{color:var(--wp--preset--color--muted)!important} /* Buttons ----------------------------------------------------------------- */ /* Both styles carry the same padding and a 1px border, so the outline button is exactly the same size as the filled one. Core's outline style sets its own em-based padding and a 2px border, which is why they did not match. */ .wp-block-button>.wp-block-button__link{ padding:16px 28px !important;border:1px solid transparent !important; transition:background-color .15s ease,color .15s ease,border-color .15s ease} .wp-block-button:not(.is-style-outline)>.wp-block-button__link:hover{ background-color:var(--wp--preset--color--teal-dark);color:var(--wp--preset--color--white)} .wp-block-button.is-style-outline>.wp-block-button__link{background-color:transparent} /* Outline buttons on a navy panel: white text, white fill and dark text on hover. The !important on the hover color is deliberate — the color preset classes WordPress generates carry !important themselves. */ :is(.has-ink-background-color,.has-ink-deep-background-color,.wwp-panel) .wp-block-button.is-style-outline>.wp-block-button__link{ color:var(--wp--preset--color--white) !important; border-color:rgba(255,255,255,.55) !important} :is(.has-ink-background-color,.has-ink-deep-background-color,.wwp-panel) .wp-block-button.is-style-outline>.wp-block-button__link:hover, :is(.has-ink-background-color,.has-ink-deep-background-color,.wwp-panel) .wp-block-button.is-style-outline>.wp-block-button__link:focus-visible{ background-color:var(--wp--preset--color--white) !important; color:var(--wp--preset--color--ink) !important; border-color:var(--wp--preset--color--white) !important} /* Outline buttons on a light background. */ .wp-block-button.is-style-outline>.wp-block-button__link:hover{ background-color:var(--wp--preset--color--ink);color:var(--wp--preset--color--white); border-color:var(--wp--preset--color--ink)} /* Lists used as layout should never show markers. */ .wwp-paycards,.wwp-values,.wwp-svc-grid,.wwp-features,.wwp-steps{list-style:none} .wwp-footer .wp-block-column>ul{list-style:none;padding-left:0} /* Phones: buttons and the footer badge center up ------------------------- */ @media (max-width:781px){ /* Core sets justify-content on the buttons container via a generated class, so this needs !important to win. */ .wp-block-buttons{justify-content:center !important} .wwp-footer .wp-block-column:last-child{align-items:center;text-align:center} .wwp-footer .wp-block-column:last-child p{text-align:center} .wwp-footer .wp-block-column:last-child figure.wp-block-image{margin-left:auto;margin-right:auto} .wwp-badge{margin-left:auto;margin-right:auto} } /* Full-width photo band --------------------------------------------------- */ .wp-block-image.wwp-photo-band{margin:0} .wp-block-image.wwp-photo-band img{width:100%;height:420px;object-fit:cover;display:block} @media (max-width:781px){ .wp-block-image.wwp-photo-band img{height:260px} } /* FAQ accordions ---------------------------------------------------------- */ .wwp-faq{max-width:52rem} .wwp-faq>*{margin:0} .wwp-faq .wwp-faq__item{border-bottom:1px solid var(--wp--preset--color--line);padding:0} .wwp-faq .wwp-faq__item:first-child{border-top:1px solid var(--wp--preset--color--line)} .wwp-faq .wwp-faq__item summary{cursor:pointer;list-style:none;padding:20px 44px 20px 0;position:relative; font-weight:600;font-size:1.02rem;color:var(--wp--preset--color--ink);line-height:1.4} .wwp-faq .wwp-faq__item summary::-webkit-details-marker{display:none} /* plus sign that becomes a minus when the answer is open */ .wwp-faq .wwp-faq__item summary::after{content:"";position:absolute;right:8px;top:50%;width:16px;height:2px; background:var(--wp--preset--color--teal);transform:translateY(-50%)} .wwp-faq .wwp-faq__item summary::before{content:"";position:absolute;right:15px;top:50%;width:2px;height:16px; background:var(--wp--preset--color--teal);transform:translateY(-50%);transition:opacity .15s ease} .wwp-faq .wwp-faq__item[open] summary::before{opacity:0} .wwp-faq .wwp-faq__item summary:hover{color:var(--wp--preset--color--teal-dark)} .wwp-faq .wwp-faq__item p{margin:0 0 20px;max-width:64ch;color:var(--wp--preset--color--muted)} .wwp-faq .wwp-faq__item p a{color:var(--wp--preset--color--teal-dark)}