(not ) because Learn More needs its own distinct href per tile — nesting a link inside the old whole-tile link isn't valid HTML. */ .what-we-do{ padding:84px 0 70px; background:#fff; position:relative; overflow:hidden; } .what-we-do::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22280%22%20height%3D%22200%22%20viewBox%3D%220%200%20280%20200%22%3E%0A%3Cg%20fill%3D%22none%22%20stroke%3D%22%2315181D%22%20stroke-width%3D%221%22%3E%0A%20%20%3Cpath%20d%3D%22M20%20130%20L70%2070%20L120%20130%22/%3E%0A%20%20%3Cpath%20d%3D%22M30%20130%20L30%20108%22/%3E%0A%20%20%3Cpath%20d%3D%22M110%20130%20L110%20108%22/%3E%0A%20%20%3Crect%20x%3D%2258%22%20y%3D%2282%22%20width%3D%2212%22%20height%3D%2218%22/%3E%0A%20%20%3Cpath%20d%3D%22M150%20150%20L205%2092%20L260%20150%22/%3E%0A%20%20%3Cpath%20d%3D%22M162%20150%20L162%20122%22/%3E%0A%20%20%3Cpath%20d%3D%22M248%20150%20L248%20122%22/%3E%0A%20%20%3Cpath%20d%3D%22M0%20168%20L280%20168%22%20stroke-dasharray%3D%222%206%22/%3E%0A%20%20%3Cpath%20d%3D%22M0%204%20L10%204%20M4%200%20L4%2010%22%20stroke-width%3D%22.8%22/%3E%0A%20%20%3Cpath%20d%3D%22M270%20190%20L280%20190%20M275%20185%20L275%20195%22%20stroke-width%3D%22.8%22/%3E%0A%3C/g%3E%0A%3C/svg%3E"); background-repeat:repeat; background-size:280px 200px; opacity:.05; } .what-we-do > .wrap{ position:relative; z-index:1; } .what-we-do h2{ margin-bottom:32px; } .wwd-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:18px; } .wwd-stack{ display:flex; flex-direction:column; gap:18px; } .wwd-tile{ position:relative; display:block; overflow:hidden; border-radius:12px; min-height:230px; background:var(--dark); color:#fff; cursor:pointer; box-shadow:0 20px 44px -16px rgba(11,12,15,.38), 0 6px 14px -6px rgba(11,12,15,.22); transition:box-shadow .3s var(--ease-out); } /* .wwd-tile is now the itself (whole-tile click, not just "Learn More") — :focus covers the tile receiving focus directly, :focus-within is kept as a harmless no-op fallback since no focusable descendant remains inside it. */ .wwd-tile:hover, .wwd-tile:focus, .wwd-tile:focus-within{ box-shadow:0 26px 54px -14px rgba(11,12,15,.46), 0 8px 18px -6px rgba(11,12,15,.26); } .wwd-tile:focus, .wwd-tile:focus-within{ outline:2px solid var(--azure); outline-offset:2px; } .wwd-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-out); } .wwd-tile:hover img, .wwd-tile:focus img, .wwd-tile:focus-within img{ transform:scale(1.06); } /* Round 4 (2026-08-19 night): scrim replaced with Puetz's OWN measured geometry (puetzconstruction.com ".service_img.overlay::before", live-inspected via getComputedStyle) — a 10deg diagonal wash, flat at full opacity from 0% to 24.39% up the tile, fading to transparent by 70.46%. Puetz's own values: linear-gradient(10deg, rgba(97,94,80,.65) 24.39%, rgba(97,94,80,0) 70.46%) — their warm olive tone swapped 1:1 for Holmes off-black (#0B0C0F / rgba(11,12,15,*)) per the brand-color-swap discipline already established in _design-refs/puetz-teardown/MEASUREMENTS.md. This reads as a genuine graduated wash across ~46% of the tile height (a visible "texture" band) instead of the prior purely-vertical gradient that compressed almost all its opacity into the bottom ~20% and read flat/ thin — the exact gap Lex flagged. */ .wwd-tile::before{ /* Round 5 fix (2026-08-19): was z-index:0, same stacking level as .wwd-tile img's implicit z-index:auto — since ::before paints first in tree order (generated content is always the element's first child) and img comes after it in the markup, the photo painted OVER this scrim and the gradient never actually showed at rest. Bumped to z-index:1 (above the auto/0-level img) so the scrim renders on top of the photo as intended; .wwd-content bumped to z-index:2 so icon/label/reveal text stay above the scrim. */ content:''; position:absolute; inset:0; background:linear-gradient(10deg, rgba(11,12,15,.65) 24.39%, rgba(11,12,15,0) 70.46%); z-index:1; } .wwd-tile.big{ min-height:478px; } .wwd-stack .wwd-tile{ min-height:230px; } /* Round 4 (2026-08-19 night): .wwd-content replaces three separately absolutely-positioned layers (.ic / .lbl / .wwd-reveal) with ONE bottom-anchored flex column — this is the structural change that makes the Puetz hover mechanic reproducible. Puetz's own tile (measured live, puetzconstruction.com, 2026-08-19): icon+heading stay visible always; a sibling ".editor-conetn" block (desc + Learn More) sits inside the same bottom-anchored flex column at max-height:0/opacity:0 rest, and on hover/focus expands to max-height:200px/opacity:1 over 0.4s ease-in-out — the icon+heading above it get pushed UPWARD by ordinary flex reflow (parent is display:flex; flex-direction:column; justify-content:flex-end), not by a transform. That reflow-based push (not a fade) is the "animation" Lex flagged as missing. Reproduced 1:1 below with the same 0.4s ease-in-out timing and the same 200px max-height cap. */ .wwd-content{ position:absolute; left:0; right:0; bottom:0; z-index:2; display:flex; flex-direction:column; justify-content:flex-end; padding:24px; box-sizing:border-box; } .wwd-tile.big .wwd-content{ padding:24px 24px 28px; } .wwd-tile .ic{ flex:0 0 auto; width:44px; height:44px; color:#fff; margin-bottom:12px; } .wwd-tile.big .ic{ width:52px; height:52px; margin-bottom:16px; } .wwd-tile .lbl{ flex:0 0 auto; font-family:'Poppins',sans-serif; font-weight:700; font-size:22px; letter-spacing:.2px; text-transform:uppercase; text-shadow:0 2px 10px rgba(0,0,0,.35); } .wwd-tile.big .lbl{ font-size:28px; } .wwd-tile.panel{ background:linear-gradient(135deg, var(--slate-d) 0%, var(--dark) 100%); } .wwd-tile.panel .wwd-content{ justify-content:flex-start; } /* Hover/focus reveal (Puetz mechanic, measured 2026-08-19 — see comment above .wwd-content): rest = collapsed (max-height:0, opacity:0, overflow:hidden — occupies zero layout height, so icon+label sit at the tile's bottom edge). Hover/focus = grows open, pushing icon+label up via ordinary flex reflow. No JS: :hover/:focus-within are pure CSS, so this fires with JS fully disabled — a mouse/keyboard user can always reach the content, it's never invisibly-present-forever. Mobile has no hover, so the @media block below forces this open permanently instead (same "nothing hidden without an escape hatch" rule as before). */ .wwd-reveal{ max-height:0; opacity:0; overflow:hidden; margin-top:0; transition:max-height .4s ease-in-out, opacity .4s ease-in-out, margin-top .4s ease-in-out; } .wwd-tile:hover .wwd-reveal, .wwd-tile:focus .wwd-reveal, .wwd-tile:focus-within .wwd-reveal{ max-height:200px; opacity:1; margin-top:10px; } .wwd-reveal p{ margin:0 0 8px; font-family:'Open Sans',sans-serif; font-size:12px; line-height:1.42; color:rgba(255,255,255,.94); max-width:96%; text-shadow:0 1px 5px rgba(0,0,0,.55); } .wwd-tile.big .wwd-reveal p{ font-size:13.5px; max-width:66%; } .wwd-more{ display:inline-flex; align-items:center; gap:5px; font-family:'Poppins',sans-serif; font-weight:700; font-size:12px; letter-spacing:.3px; color:#fff; text-decoration:none; border-bottom:1.5px solid rgba(255,255,255,.55); padding-bottom:1px; transition:border-color .2s, color .2s; text-shadow:0 1px 5px rgba(0,0,0,.55); } .wwd-more:hover, .wwd-more:focus-visible{ color:#8FB4F5; border-color:#8FB4F5; } /* Honesty mechanism (2026-08-18): quiet corner disclosure on any tile/slide showing an AI stain-finish visualization of a real Holmes job photo — never removed, only ever adjusted for legibility. Shared class, used inside both .wwd-tile (position:relative, overflow:hidden) and .rw-item (same) so no per-context override is needed. */ .viz-badge{ position:absolute; z-index:2; top:10px; right:10px; font-family:'Poppins',sans-serif; font-weight:600; font-size:9px; letter-spacing:.9px; text-transform:uppercase; color:rgba(255,255,255,.8); background:rgba(11,12,15,.5); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); padding:4px 8px; border-radius:4px; pointer-events:none; } @media (max-width:760px){ .what-we-do{ padding:56px 0 46px; } .wwd-grid{ grid-template-columns:1fr; } .wwd-tile.big{ min-height:280px; } .wwd-stack .wwd-tile{ min-height:190px; } .wwd-tile.big .wwd-content{ padding:20px 20px 22px; } .wwd-content{ padding:20px; } /* No hover on touch, so the reveal is forced open + compact instead — icon+label stay visible (unchanged from desktop rest state, Puetz keeps them on too), description + Learn More are always shown below them. Zero JS either way — this is a plain media-query override. */ .wwd-reveal{ max-height:none; opacity:1; margin-top:8px; } .wwd-reveal p{ font-size:11px; line-height:1.35; max-width:100%; } .wwd-tile.big .wwd-reveal p{ font-size:11.5px; max-width:100%; } .wwd-more{ font-size:11px; } } /* ========================================================================== BRAND MARQUEE (Round 4, 2026-08-19 night) — Puetz-style continuously scrolling logo strip below the WWD tile grid, replacing the old static 2-logo .partner-strip. Pure CSS: duplicated .bm-set track + a translateX keyframe over the FULL track (2 sets), moved by exactly -50% so the loop is seamless (both sets are identical width by construction). Needs no JS — CSS animations run with JS fully disabled. Pauses on hover so a mouse user can actually read a logo. Honors prefers-reduced-motion by disabling the animation and wrapping to a static row instead of endlessly moving content past a vestibular- sensitive viewer. ========================================================================== */ .brand-marquee{ margin-top:30px; padding-top:26px; border-top:1px solid var(--line); } .bm-label{ display:block; margin-bottom:16px; font-family:'Poppins',sans-serif; font-weight:600; font-size:11px; letter-spacing:1.6px; text-transform:uppercase; color:var(--steel); } .bm-viewport{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%); } .bm-track{ display:flex; width:max-content; animation:bm-scroll 32s linear infinite; will-change:transform; } .brand-marquee:hover .bm-track{ animation-play-state:paused; } .bm-set{ display:flex; align-items:center; flex:0 0 auto; gap:20px; padding-right:20px; } .bm-chip{ display:inline-flex; align-items:center; gap:10px; flex:0 0 auto; white-space:nowrap; padding:10px 18px; border:1px solid var(--line-strong); border-radius:8px; background:#fff; } .bm-chip img{ display:block; height:26px; width:auto; max-width:130px; object-fit:contain; } .bm-chip em{ font-style:normal; font-family:'Poppins',sans-serif; font-weight:700; font-size:13px; color:var(--ink-soft); white-space:nowrap; } @keyframes bm-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } @media (prefers-reduced-motion:reduce){ .bm-track{ animation:none; flex-wrap:wrap; width:auto; } .bm-set[aria-hidden="true"]{ display:none; } .bm-viewport{ -webkit-mask-image:none; mask-image:none; overflow:visible; } } @media (max-width:760px){ .bm-chip{ padding:8px 14px; gap:8px; } .bm-chip img{ height:21px; } .bm-chip em{ font-size:11.5px; } .bm-track{ animation-duration:24s; } } /* ========================================================================== WHY-CHOOSE — literal 2-col grid (Puetz "Trusted Partner For Life" pattern): copy+CTA left, contained real photo right. ========================================================================== */ .why-choose{ padding:84px 0; background:var(--bg-tint); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .why-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; } .why-copy{ max-width:520px; } .why-copy h2{ margin:12px 0 16px; } .why-copy p{ color:var(--ink-soft); font-size:16.5px; line-height:1.65; margin-bottom:12px; } .why-copy .btn{ margin-top:14px; } .why-photo-panel{ border-radius:12px; overflow:hidden; border:1px solid var(--line-strong); box-shadow:0 20px 44px -26px rgba(21,24,29,.22); } .why-photo-panel img{ width:100%; height:420px; object-fit:cover; object-position:70% 30%; display:block; } @media (max-width:900px){ .why-grid{ grid-template-columns:1fr; gap:32px; } .why-photo-panel{ order:-1; } .why-photo-panel img{ height:280px; } .why-choose{ padding:56px 0; } } /* ========================================================================== STAT BAND — quiet numerals rhythm-break between why-choose and reviews. ========================================================================== */ .stat-band{ background:#fff; border-bottom:1px solid var(--line); padding:44px 0; } .stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; } .stat{ padding:0 22px; border-left:1px solid var(--line); text-align:center; } .stat:first-child{ border-left:none; } .stat .num{ font-family:'Poppins',sans-serif; font-weight:700; font-size:clamp(24px,3vw,34px); color:var(--ink); letter-spacing:.1px; line-height:1; } .stat .num .accent{ color:var(--azure); } .stat .num.stars{ color:var(--gstar); letter-spacing:2px; } .stat .lbl{ margin-top:9px; font-family:'Poppins',sans-serif; font-weight:600; font-size:10.5px; letter-spacing:1.4px; text-transform:uppercase; color:var(--steel); } @media (max-width:760px){ .stat-grid{ grid-template-columns:1fr 1fr; row-gap:26px; } .stat{ border-left:1px solid var(--line); } .stat:nth-child(odd){ border-left:none; } } /* ========================================================================== PROOF / REVIEWS — reviews as neighbors: quote cards with a per-review 5-star row + verified attribution (first name + last initial + platform; no neighborhood claim — none is on file, per SCOPE.md). ========================================================================== */ .proof-band{ padding:78px 0 20px; background:var(--bg-tint); } .proof-head{ text-align:center; max-width:640px; margin:0 auto 44px; } .proof-head h2{ margin-top:12px; } .rev-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .rev{ background:#fff; border:1px solid var(--line-strong); border-radius:14px; padding:28px 26px; box-shadow:0 14px 34px -22px rgba(21,24,29,.2); display:flex; flex-direction:column; } .rev-top{ display:flex; align-items:center; gap:9px; margin-bottom:14px; } .rev-top .g-mark{ width:20px; height:20px; } .rev-top .stars{ color:var(--gstar); font-size:14px; letter-spacing:2px; margin-bottom:0; } .rev .stars{ color:var(--gstar); font-size:14px; letter-spacing:2px; margin-bottom:14px; } .rev p{ color:var(--ink); font-size:15.5px; line-height:1.6; font-weight:400; flex:1; } .rev .who{ margin-top:18px; padding-top:14px; border-top:1px solid var(--line); font-family:'Poppins',sans-serif; font-weight:700; font-size:13px; color:var(--ink); } .rev .who .plat{ display:block; margin-top:2px; font-family:'Open Sans',sans-serif; font-weight:600; font-size:11.5px; letter-spacing:.3px; text-transform:none; color:var(--steel); } @supports (animation-timeline: view()){ .rev{ animation:revDrift linear both; animation-timeline:view(); animation-range:entry 0% cover 40%; } @keyframes revDrift{ from{ transform:translateY(18px); } to{ transform:translateY(-4px); } } } @media (max-width:900px){ .rev-grid{ grid-template-columns:1fr; } } .repeat-cta{ text-align:center; padding:36px 0 4px; } /* ========================================================================== RECENT WORK — curated proof gallery: uniform aspect ratio via object-fit cropping (no letterboxed/contain oddball — the 5th before/after photo, a 620x1102 vertical composite that can't crop into a uniform cell without losing its own point, was dropped for grid coherence), larger tiles, high-contrast captions. ========================================================================== */ .recent-work{ padding:80px 0 84px; } .rw-head{ max-width:640px; margin:0 auto 36px; text-align:center; } .rw-head h2{ margin-top:12px; } .rw-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; } .rw-item{ position:relative; overflow:hidden; border-radius:12px; border:1px solid var(--line-strong); aspect-ratio:4/3; cursor:pointer; } /* ---- per-tile mini-slider: each .rw-item can hold 2-4 .rw-slide images. Rest state (no JS): only .rw-slide.is-active (hard-authored on the FIRST image in the markup) sits at translateX(0); every other slide is plain markup with no positioning class, which the base rule below parks at translateX(100%) — clipped out of view by the tile's overflow:hidden, never opacity:0/display:none. A no-JS render is therefore a complete, normal-looking 4-tile gallery of first photos. JS (initTileSliders) only toggles which slide carries .is-active / .is-prev on top of this. */ .rw-slides{ position:absolute; inset:0; } .rw-slide{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 32%; transition:translate .6s var(--ease-out), scale .6s var(--ease-out); translate:100% 0; } .rw-slide.is-prev{ translate:-100% 0; } .rw-slide.is-active{ translate:0 0; } .rw-item:hover .rw-slide.is-active{ scale:1.05; } .rw-item .tag{ position:absolute; left:0; right:0; bottom:0; padding:18px 20px 16px; z-index:2; background:linear-gradient(0deg, rgba(11,12,15,.85) 0%, rgba(11,12,15,.4) 62%, rgba(11,12,15,0) 100%); font-family:'Poppins',sans-serif; font-weight:700; font-size:12.5px; letter-spacing:1.3px; text-transform:uppercase; color:#fff; display:flex; align-items:center; justify-content:space-between; gap:10px; } .rw-dots{ display:flex; align-items:center; gap:5px; flex-shrink:0; } .rw-dots .dot{ width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.4); transition:background .25s, transform .25s; } .rw-dots .dot.is-active{ background:#fff; transform:scale(1.35); } @media (prefers-reduced-motion:reduce){ .rw-slide{ transition:none; } } @media (max-width:860px){ .rw-grid{ grid-template-columns:1fr 1fr; gap:14px; } .rw-item{ aspect-ratio:1/1; } } @media (max-width:600px){ .rw-grid{ grid-template-columns:1fr; gap:16px; } .rw-item{ aspect-ratio:4/3; } } /* ========================================================================== PROCESS — Puetz 3-equal-column bordered-card grid: centered icon, STEP N: label, corner "Call Now!" ribbon tab on card 1. ========================================================================== */ .process{ padding:80px 0; background:var(--bg-tint); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .process-head{ max-width:640px; margin:0 auto 40px; text-align:center; } .process-head h2{ margin-top:12px; } .process-cards{ display:grid; grid-template-columns:repeat(3,1fr); } .pc{ position:relative; background:#fff; border:1px solid var(--line-strong); padding:44px 30px 34px; text-align:center; } .pc + .pc{ border-left:none; } .pc:first-child{ border-radius:14px 0 0 14px; } .pc:last-child{ border-radius:0 14px 14px 0; } .pc-ribbon{ position:absolute; left:0; top:22px; } .pc-ribbon a{ display:inline-flex; align-items:center; gap:7px; background:var(--azure); color:#fff; font-family:'Poppins',sans-serif; font-weight:700; font-size:12px; letter-spacing:.6px; text-transform:uppercase; padding:9px 16px 9px 14px; clip-path:polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); } .pc-ribbon svg{ width:14px; height:14px; } .pc-ic{ display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; margin:0 auto 18px; border-radius:50%; background:var(--azure-tint); color:var(--azure); } .pc-ic svg{ width:30px; height:30px; } .pc-step{ font-family:'Poppins',sans-serif; font-weight:700; font-size:11.5px; letter-spacing:1.8px; text-transform:uppercase; color:var(--azure); margin-bottom:4px; } .pc h3{ font-size:21px; margin-bottom:12px; } .pc p{ color:var(--steel); font-size:14.5px; line-height:1.6; max-width:280px; margin:0 auto; } @media (max-width:900px){ .process-cards{ grid-template-columns:1fr; } .pc{ border-left:1px solid var(--line-strong) !important; border-radius:0 !important; } .pc + .pc{ border-top:none; } .pc:first-child{ border-radius:14px 14px 0 0 !important; } .pc:last-child{ border-radius:0 0 14px 14px !important; } } /* ========================================================================== JOSHUA + WARRANTY — the differentiation centerpiece. Dark accent band (per BRAND.md: dark appears only as accent bands, never the whole page) — real transparent-cutout photo, first-person guarantee, signature webfont, framed as JOSHUA's personal commitment behind the warranty numbers. ========================================================================== */ .owner-warranty{ position:relative; background:var(--dark); overflow:hidden; } .ow-outer{ position:relative; z-index:1; display:grid; grid-template-columns:42% 58%; align-items:stretch; min-height:600px; } .ow-figure{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; text-align:center; overflow:hidden; padding:0 24px 40px; } .ow-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:68% 62%; z-index:0; } .ow-bg-fade{ position:absolute; inset:0; z-index:0; background:linear-gradient(180deg, rgba(11,12,15,.15) 0%, rgba(11,12,15,.55) 60%, rgba(11,12,15,.92) 100%), linear-gradient(90deg, rgba(11,12,15,.35) 0%, rgba(11,12,15,0) 30%); } .ow-cutout-frame{ position:relative; z-index:1; width:min(300px,68%); } .ow-cutout-frame::before{ content:''; position:absolute; left:50%; top:44%; transform:translate(-50%,-50%); width:120%; height:120%; background:radial-gradient(circle, rgba(42,107,232,.32) 0%, transparent 66%); filter:blur(6px); z-index:0; } .owner-cutout{ position:relative; z-index:1; width:100%; display:block; filter:drop-shadow(0 24px 36px rgba(0,0,0,.5)); animation:ownerDrop .9s var(--ease-out) both; animation-delay:.15s; } @keyframes ownerDrop{ from{ opacity:0; transform:translateY(-14px) scale(.94); } to{ opacity:1; transform:none; } } .ow-sig{ position:relative; z-index:1; margin-top:6px; } .ow-sig .sig{ font-family:'Alex Brush',cursive; font-size:44px; color:#fff; line-height:1; } .ow-sig .role{ margin-top:6px; font-family:'Poppins',sans-serif; font-weight:600; font-size:11px; letter-spacing:1.8px; text-transform:uppercase; color:#8FB2E8; } .ow-copy{ padding:88px max(28px, calc((100vw - 1200px) / 2 + 28px)) 88px 56px; position:relative; } .ow-copy::before{ content:''; position:absolute; right:-10%; top:-18%; width:56%; height:80%; background:radial-gradient(ellipse 60% 60% at 60% 40%, rgba(42,107,232,.24) 0%, transparent 68%); pointer-events:none; z-index:0; } .ow-copy > *{ position:relative; z-index:1; } .ow-copy .kicker{ margin-bottom:14px; } .ow-copy h2{ color:#fff; font-size:clamp(32px,4.4vw,46px); margin-bottom:20px; } .ow-quote{ position:relative; padding-left:22px; border-left:2.5px solid var(--azure); margin-bottom:28px; } .ow-quote p{ color:#EDEFF2; font-size:19px; line-height:1.58; font-style:italic; } .ow-quote .composed-tag{ display:block; margin-top:8px; font-family:'Poppins',sans-serif; font-weight:600; font-size:10px; letter-spacing:1px; color:#6E7883; font-style:normal; text-transform:uppercase; } .warranty-cards{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:22px; } .wc{ background:rgba(255,255,255,.05); border:1px solid var(--dark-line); border-radius:12px; padding:20px 20px 18px; } .wc .wc-num{ font-family:'Poppins',sans-serif; font-weight:700; font-size:clamp(26px,3vw,32px); color:#fff; line-height:1; } .wc .wc-num span{ color:var(--azure); } .wc .wc-lbl{ margin-top:8px; font-family:'Poppins',sans-serif; font-weight:600; font-size:11.5px; letter-spacing:.6px; color:#B9C0C9; line-height:1.4; } .wc .wc-sub{ margin-top:10px; padding-top:10px; border-top:1px solid var(--dark-line); font-size:12.5px; color:#8790A0; } .ow-copy .btn{ margin-top:4px; } @media (max-width:920px){ .ow-outer{ grid-template-columns:1fr; min-height:0; } .ow-figure{ padding:56px 24px 40px; min-height:380px; } .ow-copy{ padding:48px 24px 64px; text-align:left; } .ow-quote{ text-align:left; } } @media (max-width:560px){ .warranty-cards{ grid-template-columns:1fr; } } /* ========================================================================== FINANCING — real partnership block, styled Synchrony wordmark (no logo file available from the client's own live site), no invented numbers. ========================================================================== */ .financing{ padding:80px 0; background:#fff; } .fin-grid{ display:grid; grid-template-columns:1fr .82fr; gap:56px; align-items:center; } .fin-copy h2{ margin:12px 0 16px; } .fin-copy p{ color:var(--ink-soft); font-size:16px; line-height:1.65; margin-bottom:14px; max-width:480px; } .fin-list{ list-style:none; margin:20px 0 0; display:flex; flex-direction:column; gap:12px; } .fin-list li{ display:flex; align-items:flex-start; gap:10px; font-size:14.5px; color:var(--ink-soft); } .fin-list svg{ flex:0 0 auto; width:18px; height:18px; margin-top:2px; stroke:var(--azure); } .fin-panel{ background:var(--bg-tint); border:1px solid var(--line-strong); border-radius:16px; padding:36px 30px; text-align:center; } .synchrony-mark{ display:inline-flex; align-items:center; justify-content:center; padding:14px 28px; border:1.5px solid var(--line-strong); border-radius:8px; background:#fff; } .synchrony-mark img{ display:block; height:30px; width:auto; } .fin-panel .fp-label{ margin-top:14px; font-family:'Poppins',sans-serif; font-weight:600; font-size:11px; letter-spacing:1.6px; text-transform:uppercase; color:var(--steel); } .fin-panel .fp-copy{ margin-top:14px; font-size:13.5px; color:var(--steel); line-height:1.6; } @media (max-width:920px){ .fin-grid{ grid-template-columns:1fr; } .fin-copy p{ max-width:none; } } /* ========================================================================== QUOTE FORM (full, bottom) — 4 required fields (Name/Phone/Email/Service) + optional message, single step. ========================================================================== */ .quote-band{ padding:24px 0 88px; background:var(--bg-tint); border-top:1px solid var(--line); } .quote-band .head{ max-width:600px; margin:0 auto 30px; text-align:center; } .quote-band .head h2{ margin-top:12px; } .bridge-note{ margin-top:14px; font-family:'Open Sans',sans-serif; font-size:14.5px; color:var(--ink-soft); } .contact-form{ background:#fff; border:1px solid var(--line-strong); border-top:3px solid var(--azure); border-radius:16px; padding:36px; max-width:600px; margin:0 auto; box-shadow:0 24px 54px -30px rgba(21,24,29,.22); } .contact-form label{ display:block; font-family:'Poppins',sans-serif; font-weight:600; font-size:10.5px; letter-spacing:1.3px; text-transform:uppercase; color:var(--steel); margin-bottom:7px; } .contact-form .f{ margin-bottom:17px; } .contact-form .f-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } .contact-form input, .contact-form select, .contact-form textarea{ width:100%; background:var(--bg-tint); border:1px solid var(--line-strong); color:var(--ink); padding:13px 14px; font-family:'Open Sans',sans-serif; font-size:14.5px; border-radius:7px; appearance:none; transition:border-color .25s, box-shadow .25s, transform .25s; } .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{ outline:none; border-color:var(--azure); box-shadow:0 0 0 3px var(--azure-tint); transform:scale(1.006); } .contact-form textarea{ min-height:90px; resize:vertical; } .contact-form .btn{ width:100%; margin-top:6px; } .form-promise{ margin-top:15px; text-align:center; font-family:'Poppins',sans-serif; font-weight:600; font-size:11px; letter-spacing:1.2px; text-transform:uppercase; color:var(--steel); } .form-note{ margin-top:7px; text-align:center; font-size:12.5px; color:var(--steel); } .confirm-panel{ display:none; text-align:center; padding:10px 4px; } .confirm-panel.showing{ display:block; animation:heroIn .5s var(--ease-out) both; } .confirm-panel .ck{ width:46px; height:46px; margin:0 auto 14px; border-radius:50%; background:var(--azure); display:flex; align-items:center; justify-content:center; } .confirm-panel .ck svg{ width:22px; height:22px; stroke:#fff; } .confirm-panel p{ font-size:15.5px; color:var(--ink); } .confirm-panel p a{ color:inherit; font-weight:700; text-decoration:underline; } .confirm-panel.is-fail .ck{ background:#B3261E; } .contact-form.confirmed .f, .contact-form.confirmed button, .contact-form.confirmed .form-note{ display:none; } /* Honeypot field (leadwire, 2026-08-19): off-screen, not screen-reader-visible, never receives focus — real visitors never see or fill it; a bot filling every input trips it, and the Worker silently no-ops the submit. */ .hp-field{ position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; } /* ========================================================================== CLOSING CTA BANNER — Puetz full-bleed photo + dark gradient + centered headline + button, directly before the closing form. ========================================================================== */ .cta-banner{ position:relative; min-height:340px; display:flex; align-items:center; justify-content:center; overflow:hidden; } .cta-banner img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; } .cta-banner-fade{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(11,12,15,.35) 0%, rgba(11,12,15,.55) 55%, rgba(11,12,15,.86) 100%); } .cta-banner-copy{ position:relative; z-index:2; text-align:center; padding:60px 28px; } .cta-banner-copy h2{ color:#fff; font-size:clamp(28px,4.6vw,44px); text-transform:uppercase; letter-spacing:-.2px; margin-bottom:26px; } @media (max-width:640px){ .cta-banner{ min-height:260px; } } /* ========================================================================== FOOTER (dark accent band, compliance boilerplate) — Puetz 3-block structure: brand / in-page link column / real contact column. ========================================================================== */ footer.site{ background:var(--dark); border-top:2px solid var(--slate-d); } .foot-grid{ padding:56px 0 40px; border-bottom:1px solid var(--dark-line); } /* Round 3 (2026-08-17): 4-column real sitemap (brand + Roofing + Home Exteriors + Company), replacing the prior 3-col in-page-anchor layout — Change 2 crawl-path preservation. */ .foot-grid-inner{ display:grid; grid-template-columns:1.1fr 1fr 1fr 1fr; gap:32px; } .foot-brand img{ height:40px; width:auto; margin-bottom:14px; } .foot-brand p{ font-family:'Poppins',sans-serif; font-weight:600; font-size:12.5px; color:#8FB2E8; letter-spacing:.3px; margin-bottom:16px; } .foot-brand-contact{ display:flex; flex-direction:column; gap:8px; } .foot-brand-contact a{ font-family:'Open Sans',sans-serif; font-size:13.5px; color:#B9C0C9; transition:color .25s; } .foot-brand-contact a:hover{ color:var(--azure); } .foot-h{ font-family:'Poppins',sans-serif; font-weight:700; font-size:11.5px; letter-spacing:1.6px; text-transform:uppercase; color:#fff; margin-bottom:14px; } .foot-col{ display:flex; flex-direction:column; gap:10px; } .foot-col a{ font-family:'Open Sans',sans-serif; font-size:13.5px; color:#B9C0C9; transition:color .25s; } .foot-col a:hover{ color:var(--azure); } .foot-addr{ font-family:'Open Sans',sans-serif; font-size:13.5px; color:#B9C0C9; line-height:1.6; } @media (max-width:900px){ .foot-grid{ padding:40px 0 28px; } .foot-grid-inner{ grid-template-columns:1fr 1fr; gap:28px; } .foot-brand{ grid-column:1 / -1; } } @media (max-width:480px){ .foot-grid-inner{ grid-template-columns:1fr; } } .foot-trust{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; padding:24px 24px; border-bottom:1px solid var(--dark-line); font-family:'Poppins',sans-serif; font-weight:600; font-size:11.5px; letter-spacing:1.2px; text-transform:uppercase; color:#B9C0C9; text-align:center; } .foot-trust .dot{ color:var(--slate-2); } .foot-legal{ max-width:900px; margin:0 auto; padding:22px 24px; text-align:center; font-size:12.5px; color:#8790A0; line-height:1.7; } .foot-bottom{ border-top:1px solid var(--dark-line); padding:16px 24px; text-align:center; font-size:11.5px; color:#6E7883; font-family:'Poppins',sans-serif; } /* ========================================================================== STICKY MOBILE CALL BAR ========================================================================== */ .mobile-call-bar{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:70; align-items:stretch; justify-content:center; box-shadow:0 -8px 22px rgba(21,24,29,.22); } .mobile-call-bar a{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:15px 10px; font-family:'Poppins',sans-serif; font-weight:700; font-size:13px; letter-spacing:.3px; color:#fff; background:var(--azure); transition:background .25s; } .mobile-call-bar a.mc-form{ background:var(--slate-d); } .mobile-call-bar a:active{ background:#3a78f5; } .mobile-call-bar a + a{ border-left:1px solid rgba(255,255,255,.25); } .mobile-call-bar svg{ width:15px; height:15px; flex:0 0 auto; } /* ---------- responsive ---------- */ @media (max-width:640px){ .wrap{ padding:0 18px; } h2{ font-size:25px; } .header-row{ padding:10px 16px; } .phone-link{ display:none; } .header-cta .btn{ padding:11px 16px; font-size:11px; } .badge-rail{ padding:24px 0; } .stat-band{ padding:32px 0; } .proof-band{ padding:56px 0 8px; } .recent-work{ padding:56px 0 60px; } .process{ padding:56px 0; } .owner-warranty{ padding:64px 0; } .financing{ padding:56px 0; } .mobile-call-bar{ display:flex; } body{ padding-bottom:60px; } .contact-form{ padding:26px 20px; } .contact-form .f-row{ grid-template-columns:1fr; } .pc{ padding:36px 22px 28px; } .foot-legal{ padding:18px 20px; } } /* ========================================================================== MOBILE ONE-SCREEN FIT (2026-08-18, rewritten for the full-bleed hero 2026-08-19) — Lex loved the pre-replica build's mobile because everything essential (brand, headline, trust, form) sat in the first screen. This block compresses the full-bleed hero for mobile ONLY (<=640px) — desktop is completely untouched (every rule below lives inside this media query). No opacity:0/visibility:hidden/display:none rest states introduced here beyond ordinary responsive sizing, so the no-JS rule stays intact. ========================================================================== */ @media (max-width:640px){ /* header: keep the full lockup — wordmark + "& Exterior Solutions" line — visible on mobile too (Lex, 2026-08-26: read the missing sub-line as a dropped logo on his phone). Compressed, not hidden. */ .brand-mark{ gap:1px; } .brand-mark .sub{ font-size:6.5px; letter-spacing:1.2px; } /* storm-cue: stacked to exactly two lines — message on top, the distinct Call JOSHUA Now pill directly under it — never more than two lines */ .storm-cue{ padding:8px 12px; } .storm-cue .wrap{ flex-direction:column; gap:6px; } .storm-cue .sc-txt{ font-size:10.5px; line-height:1.2; } .storm-cue .sc-btn{ font-size:10.5px; padding:6px 14px; } /* full-bleed hero: compact but still immersive — logo/kicker/h1/lede/ chips/CTA all inside the first screen, ahead of the form bar */ .hero{ min-height:0; } .hero-content{ padding:26px 18px 20px; } .hero-logo{ width:min(190px,58vw); margin-bottom:10px; } .hero-content .kicker{ font-size:10px; margin-bottom:6px; } .hero-content h1{ font-size:clamp(26px,9vw,34px); line-height:1.04; margin-bottom:8px; } .hero-lede{ font-size:13px; line-height:1.4; margin-bottom:12px; } .hero-trust-stack{ gap:6px; margin-bottom:14px; } .hero-trust-stack li{ font-size:9px; padding:5px 9px 5px 5px; gap:5px; } .hero-trust-stack li.tc-google .ic{ width:16px; height:16px; } .hero-trust-stack li.tc-gaf .ic{ width:16px; height:16px; } .hero-trust-stack li.tc-synchrony .ic{ flex-basis:30px; width:30px; height:16px; } .hero-cta{ gap:8px; } .hero-cta .btn{ padding:11px 16px; font-size:11px; } /* form bar: tighter overlap + denser fields */ .hero-form-bar-wrap{ margin-top:-20px; padding-bottom:10px; } .hero-bar-form{ padding:12px 14px; gap:6px; } .hbf-label{ font-size:12.5px; } .hbf-fields{ gap:5px; } .hbf-fields input, .hbf-fields select{ padding:8px 12px; font-size:13px; } .hbf-fields .btn{ padding:11px 20px; } .hero-bar-form .hf-note{ font-size:9.5px; } /* badge rail directly below: tighter chips, still reachable fast */ .badge-rail{ padding:16px 0; } .badge-grid{ gap:8px; } .chip{ padding:10px 11px; } /* storm strip: single column, tighter rows */ .storm-strip{ padding:36px 0; } .ss-txt p{ max-width:none; } } /* ========================================================================== TRANCHE 1 INNER PAGES (2026-08-21) — roofing.html, home-exteriors.html, financing.html, warranty.html, reviews.html. New components below reuse the existing token system (--dark/--azure/--bg-tint/.kicker/.btn) and the established card/dark-band idioms already on index.html (badge chips, process cards, the owner-warranty dark band) rather than inventing a new visual language. Same no-JS/no-rest-state-hiding rule applies throughout. ========================================================================== */ /* ---- page hero: smaller full-bleed dark-duotone variant of the main hero, for every inner page's top band. Same family as .hero (dark bg, photo, fade-to-dark), compressed to a single content stack, no logo/form-bar. */ .page-hero{ position:relative; min-height:340px; display:flex; align-items:center; overflow:hidden; background:var(--dark); border-bottom:2px solid var(--azure); } .page-hero-photo{ position:absolute; inset:0; z-index:0; overflow:hidden; } .page-hero-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 42%; } .page-hero-photo::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,12,15,.80) 0%, rgba(11,12,15,.58) 42%, rgba(11,12,15,.88) 100%); } .page-hero-content{ position:relative; z-index:1; width:100%; max-width:760px; margin:0 auto; text-align:center; padding:76px 28px 62px; } .page-hero-content .kicker{ display:block; margin-bottom:12px; color:#fff; } .page-hero-content h1{ font-size:clamp(30px,4.8vw,50px); line-height:1.06; letter-spacing:-.4px; text-transform:uppercase; margin-bottom:14px; color:#fff; } .page-hero-lede{ max-width:540px; margin:0 auto 26px; color:#dde1e6; font-size:15.5px; line-height:1.6; } .page-hero-cta{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; } .page-hero-cta .btn.on-dark svg{ width:16px; height:16px; flex:0 0 auto; } @media (max-width:640px){ .page-hero{ min-height:0; } .page-hero-content{ padding:34px 20px 30px; } .page-hero-content h1{ font-size:clamp(24px,8vw,32px); } .page-hero-lede{ font-size:13.5px; margin-bottom:18px; } .page-hero-cta .btn{ padding:11px 16px; font-size:11px; } } /* ---- section intro: reuses the .why-choose/.why-grid 2-col idiom (photo right, copy left) already proven on index.html, under a page-scoped wrapper so background/border can vary per section without touching the original .why-choose rules. */ .pg-intro{ padding:80px 0; background:#fff; } .pg-intro.tint{ background:var(--bg-tint); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .pg-intro .why-grid{ align-items:center; } /* ---- service section cards: same bordered/shadowed white-card language as .rev / .chip / .pc, generalized to any grid count (auto-fit, not a fixed 3-col with first/last-child radius hacks). */ .svc-section{ padding:80px 0; background:#fff; } .svc-section.tint{ background:var(--bg-tint); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .svc-head{ max-width:640px; margin:0 auto 40px; text-align:center; } .svc-head h2{ margin-top:12px; } .svc-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; } .svc-card{ position:relative; background:#fff; border:1px solid var(--line-strong); border-radius:14px; padding:30px 26px 28px; box-shadow:0 22px 48px -32px rgba(21,24,29,.22); display:flex; flex-direction:column; transition:box-shadow .25s, border-color .25s; } .svc-card .svc-ic{ flex:0 0 auto; width:46px; height:46px; margin-bottom:16px; border-radius:12px; background:var(--azure-tint); color:var(--azure); display:flex; align-items:center; justify-content:center; } .svc-card .svc-ic svg{ width:24px; height:24px; } .svc-card h3{ font-size:19px; margin-bottom:10px; } .svc-card p{ color:var(--steel); font-size:14px; line-height:1.6; flex:1; margin-bottom:14px; } .svc-more{ display:inline-flex; align-items:center; gap:6px; align-self:flex-start; font-family:'Poppins',sans-serif; font-weight:700; font-size:12.5px; letter-spacing:.3px; color:var(--azure); border-bottom:1.5px solid transparent; transition:border-color .25s, color .25s; } .svc-more:hover, .svc-more:focus-visible{ border-color:var(--azure); } /* ---- whole-tile click target (Lex, 2026-08-27): "the whole tile should be clickable, not just Learn More." Stretched-link pattern — the ::after pseudo-element belongs to the svc-more anchor but is absolutely positioned against .svc-card (its nearest positioned ancestor), so it covers the entire card. Because the enlarged hit area IS generated content of the anchor, :hover/:focus-visible on .svc-more already fire from anywhere on the card — no JS, no markup change, no new class. Scoped to `> a.svc-more` only, so it never touches the "why choose us" trust-bullet cards that reuse .svc-card with no CTA (or a plain inline text link) — those keep their original behavior untouched. Zero cards site-wide carry a second link inside .svc-card (verified before shipping), so one overlay per card is safe everywhere this runs. */ .svc-card > a.svc-more::after{ content:""; position:absolute; inset:0; z-index:1; } .svc-card:has(> a.svc-more:hover){ border-color:var(--azure); box-shadow:0 26px 54px -30px rgba(42,107,232,.32); } .svc-card:has(> a.svc-more:focus-visible){ outline:2px solid var(--azure); outline-offset:2px; } @media (max-width:760px){ .svc-section{ padding:56px 0; } .svc-grid{ grid-template-columns:1fr; } } /* ---- warranty band: single-column version of the .owner-warranty dark band (no cutout/figure — copy + warranty-cards only), for warranty.html. Reuses .warranty-cards/.wc verbatim from the owner-warranty section. */ .warranty-band{ padding:88px 0; background:var(--dark); text-align:center; } .warranty-band .wb-inner{ max-width:720px; margin:0 auto; } .warranty-band .kicker{ margin-bottom:14px; } .warranty-band h2{ color:#fff; margin-bottom:20px; } .warranty-band .ow-quote{ text-align:left; margin:0 auto 30px; } .warranty-band .warranty-cards{ text-align:left; margin-bottom:30px; } @media (max-width:640px){ .warranty-band{ padding:56px 0; } } /* ---- owner byline photo (2026-08-26 owner-card fix, Variant A): small flat-framed cutout beside the "Joshua Holmes / Owner-Operator" signature on the #promise .warranty-band. Reuses the .wc tile look (translucent fill + hairline border) — no new color/radius/glow. Folded in from the QA build (leadgen-page-qa-ownercard/variants/A/). */ .ow-byline{ display:flex; align-items:center; gap:16px; margin:0 0 22px; } .ow-byline-photo{ flex:none; width:56px; height:81px; border-radius:8px; overflow:hidden; background:rgba(255,255,255,.05); border:1px solid var(--dark-line); display:flex; align-items:flex-end; justify-content:center; } .ow-byline-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 8%; display:block; } .ow-byline .ow-sig{ margin-top:0; text-align:left; } .ow-byline .ow-sig .sig{ font-size:28px; line-height:1; } .ow-byline .ow-sig .role{ margin-top:2px; } @media (max-width:480px){ .ow-byline-photo{ width:48px; height:70px; } .ow-byline .ow-sig .sig{ font-size:24px; } } /* ---- google review badge link (reviews.html): same glass-chip language as the hero trust stack, standalone on a light background. */ .rev-google{ display:inline-flex; align-items:center; gap:10px; margin:0 auto 8px; background:#fff; border:1px solid var(--line-strong); border-radius:999px; padding:10px 20px 10px 12px; box-shadow:0 14px 30px -20px rgba(21,24,29,.28); transition:box-shadow .25s, border-color .25s; } .rev-google:hover, .rev-google:focus-visible{ border-color:var(--azure); box-shadow:0 18px 36px -18px rgba(42,107,232,.35); } .rev-google img{ width:22px; height:22px; } .rev-google .stars{ color:var(--gstar); font-size:13px; letter-spacing:1px; } .rev-google .lbl{ font-family:'Poppins',sans-serif; font-weight:700; font-size:13px; color:var(--ink); } /* ---- financing extra: simple 3-up "what you can finance" links, reusing .svc-card visual language at a smaller scale via the same classes. */ .fin-more-head{ text-align:center; max-width:600px; margin:0 auto 30px; }