/* ============================================================================ FORGE — plumbing site design system Synthesized from papas-plumbing (bold trade), a-sure-plumbing (dark luxe) and gr-plumbing (didone luxe). One structure, three themes. Set the theme with . ========================================================================= */ /* ---------- 1. THEMES ---------------------------------------------------- */ :root { --ease: cubic-bezier(0.32, 0.72, 0, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --wrap: 1240px; --gut: clamp(20px, 5vw, 64px); --sect: clamp(72px, 9vw, 132px); } /* Dark-luxe editorial — charcoal + champagne, Fraunces. From a-sure. */ [data-theme='dark-luxe'] { --disp: 'Fraunces', Georgia, serif; --ui: 'Plus Jakarta Sans', system-ui, sans-serif; --disp-weight: 400; --dark: #121316; --dark-2: #17181c; --light: #efece5; --light-2: #f5f3ed; --ink: #1b1a17; --accent: #c9a65a; --accent-hi: #eab010; --accent-on-light: #a08034; --light-mut: #6e6a61; --dark-mut: #a9a69e; --dark-txt: #f2efe8; --dark-txt-2: #cfccc4; --hair-d: rgba(255, 255, 255, 0.09); --hair-l: rgba(27, 26, 23, 0.12); --hair-a: rgba(201, 166, 90, 0.28); --grain: 0; --h1-max: 112px; --h1-vw: 8.6vw; } /* Refined didone — Playfair, brass, slightly cooler charcoal. From gr. */ [data-theme='didone-luxe'] { --disp: 'Playfair Display', Georgia, serif; --ui: 'Plus Jakarta Sans', system-ui, sans-serif; --disp-weight: 400; --dark: #101114; --dark-2: #16171b; --light: #f1ede6; --light-2: #f7f4ee; --ink: #191713; --accent: #c6a15b; --accent-hi: #d9b87a; --accent-on-light: #a5834a; --light-mut: #6e695f; --dark-mut: #a8a49b; --dark-txt: #f2efe8; --dark-txt-2: #cfccc4; --hair-d: rgba(255, 255, 255, 0.09); --hair-l: rgba(25, 23, 19, 0.12); --hair-a: rgba(198, 161, 91, 0.32); --grain: 0; --h1-max: 92px; --h1-vw: 7vw; } /* Bold trade — warm paper, ember orange, Clash Display. From papas. */ [data-theme='bold-trade'] { --disp: 'Clash Display', 'Arial Black', sans-serif; --ui: 'Plus Jakarta Sans', system-ui, sans-serif; --disp-weight: 600; --dark: #151109; --dark-2: #100d08; --light: #eae6df; --light-2: #f1eee8; --ink: #1c1915; --accent: #e8751a; --accent-hi: #ff8a2a; --accent-on-light: #b8560c; --light-mut: #756d62; --dark-mut: #a9a196; --dark-txt: #f5efe6; --dark-txt-2: rgba(245, 239, 230, 0.66); --hair-d: rgba(255, 255, 255, 0.1); --hair-l: rgba(28, 25, 21, 0.1); --hair-a: rgba(232, 117, 26, 0.3); --grain: 0.05; --h1-max: 118px; --h1-vw: 8.4vw; --disp-upper: uppercase; --disp-lh: 0.94; } /* ---------- 2. RESET & BASE --------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; /* clip, not hidden — hidden creates a scroll container and breaks sticky */ overflow-x: clip; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: var(--light); color: var(--ink); font-family: var(--ui); font-size: 15px; font-weight: 500; line-height: 1.8; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Film grain — no request, no flat dead fills. Off unless the theme wants it. */ body::after { content: ''; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: var(--grain, 0); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; } /* Focus ring that survives on both surfaces. None of the source sites had one. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; } .skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--accent); color: #fff; padding: 12px 20px; font-size: 12px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; } .skip:focus { left: 0; } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------- 3. TYPE ------------------------------------------------------ */ h1, h2, h3 { margin: 0; font-family: var(--disp); font-weight: var(--disp-weight); } h1 { font-size: clamp(46px, var(--h1-vw), var(--h1-max)); line-height: var(--disp-lh, 1.03); letter-spacing: 0.003em; text-transform: var(--disp-upper, none); } h2 { font-size: clamp(32px, 4.5vw, 54px); line-height: var(--disp-lh, 1.1); letter-spacing: 0.002em; text-transform: var(--disp-upper, none); } h3 { font-size: 21px; line-height: 1.25; } /* The one consistent typographic device: accent-italic clause inside a heading. */ h1 em, h2 em, h3 em { font-style: italic; color: var(--accent); } /* The outlined headline word. The stroke color must be an explicit variable — `currentColor` resolves against this element's own `color`, which is transparent, so the word paints invisibly. --stroke flips per surface. */ [data-theme='bold-trade'] h1 em, [data-theme='bold-trade'] h2 em { font-style: normal; color: transparent; -webkit-text-stroke: 1.5px var(--stroke); } /* If text-stroke is unsupported the word would vanish — fall back to accent fill. */ @supports not (-webkit-text-stroke: 1px black) { [data-theme='bold-trade'] h1 em, [data-theme='bold-trade'] h2 em { color: var(--accent); -webkit-text-stroke: 0; } } .on-light h1 em, .on-light h2 em, .on-light h3 em { color: var(--accent-on-light); } p { margin: 0 0 1em; } .kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); margin: 0 0 18px; } .on-light .kicker { color: var(--accent-on-light); } .lead { font-size: clamp(15px, 1.4vw, 17px); line-height: 1.75; max-width: 58ch; } .mut { color: var(--light-mut); } .on-dark .mut { color: var(--dark-mut); } /* The gold rule — draws itself left-to-right on reveal. Cheapest "expensive" tell. */ .rule { width: 68px; height: 2px; background: var(--accent); margin: 26px 0; border: 0; } .on-light .rule { background: var(--accent-on-light); } /* ---------- 4. SURFACES -------------------------------------------------- */ /* --stroke tracks the surface's text color so the outlined headline word on bold-trade stays visible on both dark and light sections. */ :root { --stroke: var(--ink); } .on-dark, .on-dark-2, .hero, .page-hero, .er, .nav, .menu, footer { --stroke: var(--dark-txt); } .on-light, .on-light-2 { --stroke: var(--ink); } .on-dark { background: var(--dark); color: var(--dark-txt); } .on-dark-2 { background: var(--dark-2); color: var(--dark-txt); } .on-light { background: var(--light); color: var(--ink); } .on-light-2 { background: var(--light-2); color: var(--ink); } section { padding: var(--sect) 0; position: relative; } section.tight { padding: clamp(48px, 6vw, 82px) 0; } .sect-head { max-width: 62ch; margin-bottom: clamp(38px, 4.5vw, 62px); } .sect-head.center { margin-left: auto; margin-right: auto; text-align: center; } .sect-head.center .rule { margin-left: auto; margin-right: auto; } /* ---------- 5. BUTTONS --------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; transition: all 0.4s var(--ease); border: 1px solid transparent; } .btn:active { transform: scale(0.97); } .btn-accent { background: var(--accent); color: #fff; box-shadow: 0 0 0 1px var(--hair-a), 0 0 24px -4px var(--accent-hi); } .btn-accent:hover { background: var(--accent-hi); box-shadow: 0 0 0 1px var(--accent-hi), 0 0 34px -4px var(--accent-hi); } .btn-ghost { border-color: var(--hair-a); color: var(--accent); } .on-light .btn-ghost { color: var(--accent-on-light); } .btn-ghost:hover { background: var(--accent); color: #fff; border-color: var(--accent); } .btn-ink { background: var(--ink); color: var(--light); } .btn-ink:hover { background: var(--dark); } .btn .ic { display: inline-flex; transition: transform 0.4s var(--ease); } .btn:hover .ic { transform: translate(2px, -2px) scale(1.05); } .cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .link-arrow { display: inline-flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); } .on-light .link-arrow { color: var(--accent-on-light); } .link-arrow svg { transition: transform 0.4s var(--ease); } .link-arrow:hover svg { transform: translateX(6px); } /* ---------- 6. NAV ------------------------------------------------------- */ .nav { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 90; width: calc(100% - 2 * var(--gut)); max-width: var(--wrap); display: flex; align-items: center; gap: 20px; padding: 10px 10px 10px 22px; border-radius: 999px; background: rgba(18, 19, 22, 0.72); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); border: 1px solid var(--hair-d); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08), 0 18px 40px -24px rgba(0, 0, 0, 0.7); color: var(--dark-txt); } .nav .mark { display: flex; align-items: center; gap: 11px; margin-right: auto; } .nav .mono { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; border: 1.5px solid var(--accent); border-radius: 6px; font-family: var(--disp); font-size: 17px; color: var(--accent); } .nav .mark .t { font-size: 12.5px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.35; } .nav .mark .t small { display: block; font-size: 8.5px; letter-spacing: 0.3em; color: var(--dark-mut); font-weight: 600; } .nav-links { display: flex; gap: 26px; } .nav-links a { position: relative; font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dark-txt-2); padding: 6px 0; transition: color 0.3s var(--ease); } .nav-links a:hover, .nav-links a.on { color: var(--dark-txt); } .nav-links a::after { content: ''; position: absolute; left: 50%; bottom: -2px; width: 18px; height: 2px; background: var(--accent); box-shadow: 0 0 12px 2px var(--accent-hi); transform: translateX(-50%) scaleX(0); transition: transform 0.45s var(--ease); } .nav-links a.on::after { transform: translateX(-50%) scaleX(1); } .nav .btn { padding: 12px 20px; font-size: 11px; } .burger { display: none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--hair-d); place-items: center; } .burger span { display: block; width: 16px; height: 1.5px; background: currentColor; transition: transform 0.4s var(--ease), opacity 0.3s; } .burger span + span { margin-top: 4px; } body.menu-open .burger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); } body.menu-open .burger span:nth-child(2) { opacity: 0; } body.menu-open .burger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); } .menu { position: fixed; inset: 0; z-index: 85; display: grid; place-content: center; gap: 6px; text-align: center; background: rgba(16, 17, 20, 0.96); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); opacity: 0; visibility: hidden; /* Visibility must flip instantly on open (a hidden element cannot take focus) and only after the fade on close. Transitioning it over the same duration leaves it hidden while it appears to open, so the focus trap never engages. */ transition: opacity 0.45s var(--ease), visibility 0s linear 0.45s; } body.menu-open .menu { opacity: 1; visibility: visible; transition: opacity 0.45s var(--ease), visibility 0s linear 0s; } .menu a { font-family: var(--disp); font-size: clamp(32px, 8vw, 52px); color: var(--dark-txt); padding: 8px 0; opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } body.menu-open .menu a { opacity: 1; transform: none; } /* All items get a delay — the source sites stopped at 3 and the 4th link snapped in. */ body.menu-open .menu a:nth-child(1) { transition-delay: 0.08s; } body.menu-open .menu a:nth-child(2) { transition-delay: 0.13s; } body.menu-open .menu a:nth-child(3) { transition-delay: 0.18s; } body.menu-open .menu a:nth-child(4) { transition-delay: 0.23s; } body.menu-open .menu a:nth-child(5) { transition-delay: 0.28s; } body.menu-open .menu a:nth-child(6) { transition-delay: 0.33s; } body.menu-open .menu a:nth-child(7) { transition-delay: 0.38s; } @media (max-width: 940px) { .nav-links, .nav > .btn { display: none; } .burger { display: grid; } .nav { padding: 8px 8px 8px 18px; } } /* ---------- 7. HERO ------------------------------------------------------ */ .hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; padding: 132px 0 0; background: var(--dark); color: var(--dark-txt); overflow: hidden; } .hero-img { position: absolute; inset: 0; z-index: 0; animation: kb 2.6s var(--ease-out) both; } .hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-pos, 62% 45%); } @keyframes kb { from { transform: scale(1.07); } to { transform: scale(1); } } /* inset:-8% so a parallax translate can never expose an ungradiented edge */ .hero-img::after { content: ''; position: absolute; inset: -8% 0; background: linear-gradient(97deg, rgba(16, 17, 20, 0.95) 18%, rgba(16, 17, 20, 0.84) 46%, rgba(16, 17, 20, 0.22) 74%, rgba(16, 17, 20, 0.06) 100%), linear-gradient(180deg, rgba(16, 17, 20, 0.55), transparent 26%, transparent 62%, var(--dark) 100%); } .hero .wrap { position: relative; z-index: 2; margin: auto 0; padding-top: 40px; padding-bottom: 40px; } .hero h1 { max-width: 15ch; } .hero .lead { max-width: 46ch; color: var(--dark-txt-2); font-size: clamp(14px, 1.3vw, 16.5px); } .hero .cta-row { margin-top: 30px; } /* Anchored to the CONTENT COLUMN, not the viewport — it can never collide. */ .score-chip { position: absolute; right: var(--gut); bottom: 0; text-align: right; padding: 16px 20px; border: 1px solid var(--hair-a); border-radius: 10px; background: rgba(16, 17, 20, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .score-chip .stars { color: var(--accent); letter-spacing: 0.3em; font-size: 13px; } .score-chip .t { font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dark-mut); margin-top: 6px; } @media (max-width: 1140px) { .score-chip { position: static; display: inline-block; text-align: left; margin-top: 28px; } } /* Trust row IN FLOW at the bottom of the hero. Absolute positioning collided with content on small viewports; the image layer still spans the whole hero, so the look is identical and nothing can ever overlap. */ .hero-trust { position: relative; z-index: 2; margin-top: auto; border-top: 1px solid var(--hair-d); background: rgba(16, 17, 20, 0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .hero-trust .wrap { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 auto; padding-top: 0; padding-bottom: 0; } .ht { display: flex; gap: 13px; align-items: flex-start; padding: 22px 22px 22px 0; border-right: 1px solid var(--hair-d); } .ht:last-child { border-right: 0; } .ht svg { flex: 0 0 20px; color: var(--accent); margin-top: 2px; } .ht .k { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.4; } .ht .s { font-size: 11.5px; color: var(--dark-mut); line-height: 1.5; margin-top: 3px; } @media (max-width: 980px) { .hero-trust .wrap { grid-template-columns: repeat(2, 1fr); } .ht:nth-child(2) { border-right: 0; } .ht:nth-child(-n + 2) { border-bottom: 1px solid var(--hair-d); } } @media (max-width: 560px) { .hero-trust .wrap { grid-template-columns: 1fr; } .ht { border-right: 0; padding: 16px 0; } .ht:not(:last-child) { border-bottom: 1px solid var(--hair-d); } } /* On phones the call button must come before the descriptive paragraph. */ @media (max-width: 700px) { .hero .wrap { display: flex; flex-direction: column; } .hero .kicker { order: 0; } .hero h1 { order: 1; } .hero .rule { order: 2; } .hero .cta-row { order: 3; margin-top: 24px; } .hero .lead { order: 4; margin-top: 22px; } .hero .score-chip { order: 5; } } /* Interior page hero — shorter, same language. */ .page-hero { position: relative; padding: 190px 0 clamp(60px, 8vw, 100px); background: var(--dark); color: var(--dark-txt); overflow: hidden; } .page-hero .hero-img::after { background: linear-gradient(97deg, rgba(16, 17, 20, 0.94) 18%, rgba(16, 17, 20, 0.8) 52%, rgba(16, 17, 20, 0.35) 100%), linear-gradient(180deg, rgba(16, 17, 20, 0.6), transparent 40%, var(--dark) 100%); } .page-hero .wrap { position: relative; z-index: 2; } .crumb { font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dark-mut); margin-bottom: 20px; } .crumb a:hover { color: var(--accent); } /* ---------- 8. EMERGENCY STRIP ------------------------------------------ */ .strip { background: var(--accent); color: #fff; padding: 15px 0; } .strip .wrap { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; text-align: center; } .strip .t { font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .strip a { text-decoration: underline; text-underline-offset: 3px; } /* ---------- 9. SERVICES -------------------------------------------------- */ .svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 22px; } .svc { position: relative; border: 1px solid var(--hair-l); border-radius: 18px; overflow: hidden; background: var(--light-2); transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease); display: flex; flex-direction: column; } .on-dark .svc { background: var(--dark-2); border-color: var(--hair-d); } .svc:hover { transform: translateY(-8px); box-shadow: 0 30px 60px -34px rgba(25, 23, 19, 0.4); } .on-dark .svc:hover { border-color: var(--hair-a); box-shadow: none; } .svc-img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; } .svc-img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.88); /* 1.4s is a cinematic push, not a snap */ transition: transform 1.4s var(--ease-out), filter 0.6s var(--ease); } .svc:hover .svc-img img { transform: scale(1.06); filter: saturate(1); } /* Dark disc biting into a light card — highest-contrast cheap "designed" moment */ .svc-ic { position: absolute; left: 18px; bottom: -24px; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--dark); border: 1px solid var(--hair-a); color: var(--accent); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.6); z-index: 2; } .svc-body { padding: 38px 20px 22px; display: flex; flex-direction: column; flex: 1; } .svc-body h3 { font-family: var(--disp); font-size: 20px; margin-bottom: 8px; } .svc-body .promise { font-size: 13.5px; color: var(--light-mut); line-height: 1.7; margin-bottom: 14px; } .on-dark .svc-body .promise { color: var(--dark-mut); } .svc-price { display: inline-block; align-self: flex-start; font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--hair-a); color: var(--accent-on-light); margin-bottom: 14px; } .on-dark .svc-price { color: var(--accent); } .svc-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--hair-l); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .on-dark .svc-foot { border-color: var(--hair-d); } .exp { font-size: 10.5px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--light-mut); display: inline-flex; align-items: center; gap: 7px; } .on-dark .exp { color: var(--dark-mut); } .exp .pm { display: inline-block; transition: transform 0.45s var(--ease); font-size: 14px; } .svc.open .exp .pm { transform: rotate(45deg); } .svc-list { max-height: 0; overflow: hidden; transition: max-height 0.65s var(--ease); margin: 0; padding: 0; list-style: none; } .svc.open .svc-list { max-height: 640px; } .svc-list li { font-size: 13px; color: var(--light-mut); padding: 7px 0 7px 18px; position: relative; line-height: 1.6; } .on-dark .svc-list li { color: var(--dark-mut); } .svc-list li::before { content: ''; position: absolute; left: 0; top: 15px; width: 6px; height: 1px; background: var(--accent); } .svc-list li:first-child { padding-top: 14px; } /* ---------- 10. CHAPTERS (deep service content) ------------------------- */ .chapters { display: grid; gap: 0; } .ch { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(34px, 5vw, 74px); align-items: center; padding: clamp(50px, 6vw, 86px) 0; border-bottom: 1px solid var(--hair-l); } .on-dark .ch { border-color: var(--hair-d); } .ch:first-child { padding-top: 0; } .ch:last-child { border-bottom: 0; padding-bottom: 0; } .ch:nth-child(even) .ch-img { order: 2; } .ch-img { border: 1px solid var(--hair-l); padding: 10px; background: var(--light-2); } .on-dark .ch-img { border-color: var(--hair-d); background: var(--dark-2); } .ch-img img { aspect-ratio: 16 / 11; object-fit: cover; width: 100%; } .ch-num { font-family: var(--disp); font-style: italic; font-size: 34px; color: var(--accent-on-light); line-height: 1; margin-bottom: 12px; } .on-dark .ch-num { color: var(--accent); } .ch-list { columns: 2; column-gap: 30px; list-style: none; padding: 0; margin: 22px 0; } .ch-list li { break-inside: avoid; font-size: 13.5px; padding: 6px 0 6px 18px; position: relative; color: var(--light-mut); } .on-dark .ch-list li { color: var(--dark-mut); } .ch-list li::before { content: ''; position: absolute; left: 0; top: 14px; width: 6px; height: 1px; background: var(--accent); } /* Asymmetric radius — square on the ruled edge reads as a pull-quote, not a box */ .ch-expect { border-left: 2px solid var(--accent-on-light); border-radius: 0 6px 6px 0; background: var(--light-2); padding: 16px 20px; margin: 22px 0; } .on-dark .ch-expect { background: var(--dark-2); border-left-color: var(--accent); } .ch-expect .k { font-size: 9.5px; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-on-light); margin-bottom: 7px; } .on-dark .ch-expect .k { color: var(--accent); } .ch-expect p { font-size: 13.5px; margin: 0; color: var(--light-mut); } .on-dark .ch-expect p { color: var(--dark-mut); } @media (max-width: 880px) { .ch { grid-template-columns: 1fr; } .ch:nth-child(even) .ch-img { order: -1; } .ch-img { order: -1; } .ch-list { columns: 1; } } /* ---------- 11. STATS ---------------------------------------------------- */ .stats { display: flex; border-top: 1px solid var(--hair-d); border-bottom: 1px solid var(--hair-d); } .on-light .stats { border-color: var(--hair-l); } .stat { flex: 1; padding: clamp(26px, 3vw, 40px) 20px; border-right: 1px solid var(--hair-d); } .on-light .stat { border-right-color: var(--hair-l); } .stat:last-child { border-right: 0; } .stat .n { font-family: var(--disp); font-size: clamp(36px, 4vw, 56px); line-height: 1; color: var(--accent); } .on-light .stat .n { color: var(--accent-on-light); } /* Long values (license numbers, phone numbers) step down so they optically match */ .stat .n.long { font-size: clamp(24px, 2.6vw, 36px); padding-top: 10px; } .stat .n .st { font-size: 0.55em; letter-spacing: 0.1em; vertical-align: middle; } .stat .l { font-size: 10.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dark-mut); margin-top: 12px; } .on-light .stat .l { color: var(--light-mut); } @media (max-width: 900px) { .stats { flex-wrap: wrap; } .stat { flex: 0 0 50%; } .stat:nth-child(2) { border-right: 0; } .stat:nth-child(-n + 2) { border-bottom: 1px solid var(--hair-d); } .on-light .stat:nth-child(-n + 2) { border-bottom-color: var(--hair-l); } } /* ---------- 12. STEPS / PROMISE ----------------------------------------- */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 30px; } .step .n { font-family: var(--disp); font-style: italic; font-size: 40px; color: var(--accent-on-light); line-height: 1; margin-bottom: 14px; } .on-dark .step .n { color: var(--accent); } .step h3 { font-size: 19px; margin-bottom: 8px; } .step p { font-size: 13.5px; color: var(--light-mut); margin: 0; } .on-dark .step p { color: var(--dark-mut); } .promise { display: grid; grid-template-columns: 1fr 0.8fr; gap: clamp(34px, 5vw, 70px); align-items: center; } .promise-list { list-style: none; margin: 26px 0 0; padding: 0; } .promise-list li { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--hair-d); } .on-light .promise-list li { border-color: var(--hair-l); } .promise-list li:last-child { border-bottom: 0; } .promise-list svg { flex: 0 0 20px; color: var(--accent); margin-top: 3px; } .promise-list .k { font-size: 14.5px; font-weight: 800; margin-bottom: 3px; } .promise-list .s { font-size: 13px; color: var(--dark-mut); line-height: 1.65; } .on-light .promise-list .s { color: var(--light-mut); } /* Mat-and-frame — reads as a gallery print, not a stock photo */ .framed { border: 1px solid var(--hair-l); padding: 10px; background: var(--light-2); } .on-dark .framed { border-color: var(--hair-d); background: var(--dark-2); } .framed img { width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover; } @media (max-width: 880px) { .promise { grid-template-columns: 1fr; } .promise .framed { order: -1; } } /* ---------- 13. REVIEWS -------------------------------------------------- */ .rev-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; } .rev { border: 1px solid var(--hair-l); border-radius: 14px; padding: 26px 24px; background: var(--light-2); display: flex; flex-direction: column; } .on-dark .rev { border-color: var(--hair-d); background: var(--dark-2); } .rev .stars { color: var(--accent); letter-spacing: 0.28em; font-size: 13px; margin-bottom: 14px; } .on-light .rev .stars { color: var(--accent-on-light); } .rev p { font-size: 14px; line-height: 1.75; margin: 0 0 18px; } .rev .who { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--hair-l); display: flex; align-items: center; gap: 11px; } .on-dark .rev .who { border-color: var(--hair-d); } .rev .who .av { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 800; flex: 0 0 34px; } .rev .who .nm { font-size: 13px; font-weight: 800; } .rev .who .dt { font-size: 11px; color: var(--light-mut); } .on-dark .rev .who .dt { color: var(--dark-mut); } .pull { font-family: var(--disp); font-style: italic; font-size: clamp(24px, 3.4vw, 38px); line-height: 1.32; max-width: 24ch; margin: 0 auto; text-align: center; } /* ---------- 14. FAQ ------------------------------------------------------ */ .faq { max-width: 860px; margin: 0 auto; } .qa { border-bottom: 1px solid var(--hair-l); } .on-dark .qa { border-color: var(--hair-d); } .qa-q { width: 100%; text-align: left; padding: 24px 44px 24px 0; position: relative; font-size: clamp(15px, 1.6vw, 18px); font-weight: 700; line-height: 1.5; } .qa-q .pm { position: absolute; right: 6px; top: 26px; font-size: 18px; color: var(--accent-on-light); transition: transform 0.45s var(--ease); } .on-dark .qa-q .pm { color: var(--accent); } .qa.open .qa-q .pm { transform: rotate(45deg); } .qa-a { max-height: 0; overflow: hidden; transition: max-height 0.6s var(--ease); } .qa.open .qa-a { max-height: 520px; } .qa-a p { font-size: 14.5px; line-height: 1.8; color: var(--light-mut); padding-bottom: 24px; margin: 0; max-width: 68ch; } .on-dark .qa-a p { color: var(--dark-mut); } /* ---------- 15. FORM ----------------------------------------------------- */ .form-split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(34px, 5vw, 70px); align-items: start; } @media (max-width: 900px) { .form-split { grid-template-columns: 1fr; } } .form { border: 1px solid var(--hair-l); border-radius: 18px; padding: clamp(24px, 3vw, 38px); background: var(--light-2); } .on-dark .form { border-color: var(--hair-d); background: var(--dark-2); } .fr { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } .fr.one { grid-template-columns: 1fr; } @media (max-width: 560px) { .fr { grid-template-columns: 1fr; } } .field label { display: block; font-size: 10px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--light-mut); margin-bottom: 8px; } .on-dark .field label { color: var(--dark-mut); } .field input, .field select, .field textarea { width: 100%; font: inherit; font-size: 14px; padding: 13px 15px; border-radius: 9px; border: 1px solid var(--hair-l); background: var(--light); color: var(--ink); transition: border-color 0.3s var(--ease); } .on-dark .field input, .on-dark .field select, .on-dark .field textarea { border-color: var(--hair-d); background: var(--dark); color: var(--dark-txt); } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); outline: none; } .field textarea { min-height: 110px; resize: vertical; } .field .req { color: var(--accent-on-light); } .form-note { font-size: 12px; color: var(--light-mut); line-height: 1.65; margin: 16px 0 0; } .on-dark .form-note { color: var(--dark-mut); } .form-status { margin-top: 16px; padding: 14px 16px; border-radius: 9px; border: 1px solid var(--hair-a); font-size: 13.5px; display: none; } .form-status.show { display: block; } /* ---------- 16. AREAS ---------------------------------------------------- */ .area-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 12px; } .area { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 18px; border: 1px solid var(--hair-l); border-radius: 11px; font-size: 13.5px; font-weight: 700; transition: all 0.35s var(--ease); } .on-dark .area { border-color: var(--hair-d); } .area:hover { border-color: var(--accent); transform: translateY(-3px); } .area svg { color: var(--accent); flex: 0 0 14px; } .map-embed { border: 1px solid var(--hair-l); border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 8; } .map-embed iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(0.4) contrast(1.05); } /* ---------- 17. MARQUEE -------------------------------------------------- */ .marq { overflow: hidden; border-top: 1px solid var(--hair-d); border-bottom: 1px solid var(--hair-d); padding: 17px 0; background: var(--dark); } .marq-track { display: flex; width: max-content; white-space: nowrap; animation: marq 34s linear infinite; } @keyframes marq { to { transform: translateX(-50%); } } .marq span { font-family: var(--disp); font-style: italic; font-size: 17px; color: var(--dark-txt-2); display: inline-flex; align-items: center; } .marq span i { color: var(--accent); padding: 0 0 0 52px; font-size: 11px; font-style: normal; } /* ---------- 18. GALLERY / BEFORE-AFTER ---------------------------------- */ .gal { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } .shot { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--hair-l); } .on-dark .shot { border-color: var(--hair-d); } .shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.2s var(--ease-out); } .shot:hover img { transform: scale(1.05); } .shot .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 16px 13px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, 0.82)); } @media (max-width: 640px) { .gal { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut) 8px; -webkit-overflow-scrolling: touch; } .shot { flex: 0 0 74vw; scroll-snap-align: center; } } /* ---------- 19. FINAL CTA / FOOTER -------------------------------------- */ .er { position: relative; text-align: center; background: var(--dark); color: var(--dark-txt); overflow: hidden; } .er::before { content: ''; position: absolute; inset: 0; background: radial-gradient(50% 55% at 50% 100%, var(--hair-a), transparent 70%); } .er .wrap { position: relative; z-index: 2; } .er .phone { display: block; font-family: var(--disp); font-size: clamp(34px, 6vw, 58px); color: var(--accent); margin: 26px 0 10px; line-height: 1.1; } .er .phone:hover { color: var(--accent-hi); } footer { background: var(--dark-2); color: var(--dark-txt); padding: clamp(50px, 6vw, 78px) 0 30px; border-top: 1px solid var(--hair-d); } .foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 34px; } @media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; } } .foot-col .k { font-size: 10px; font-weight: 800; letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; } .foot-col a, .foot-col p { display: block; font-size: 13px; color: var(--dark-mut); line-height: 1.9; margin: 0; } .foot-col a:hover { color: var(--dark-txt); } .foot-col .big { font-family: var(--disp); font-size: 24px; color: var(--dark-txt); line-height: 1.3; } .foot-fine { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--hair-d); display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; font-size: 11.5px; color: var(--dark-mut); } /* ---------- 20. STICKY CALL BAR ----------------------------------------- */ /* Mobile: full-width bar. Desktop: a floating pill — the source sites had nothing on desktop, so half the traffic lost its persistent CTA on scroll. */ .callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; padding: 12px var(--gut) calc(12px + env(safe-area-inset-bottom)); background: rgba(16, 17, 20, 0.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--hair-d); transform: translateY(120%); transition: transform 0.5s var(--ease); display: flex; gap: 10px; } .callbar.show { transform: none; } .callbar a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 14px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .callbar .primary { background: var(--accent); color: #fff; } .callbar .secondary { border: 1px solid var(--hair-a); color: var(--accent); flex: 0 0 auto; padding: 13px 20px; } @media (min-width: 941px) { .callbar { left: auto; right: 24px; bottom: 24px; width: auto; padding: 8px; border-radius: 999px; border: 1px solid var(--hair-d); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7); } .callbar.show { transform: none; } } /* ---------- 21. MOTION --------------------------------------------------- */ .rv { opacity: 0; transform: translateY(26px); filter: blur(6px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out), filter 0.9s var(--ease-out); transition-delay: var(--d, 0s); } .rv.in { opacity: 1; transform: none; filter: none; } /* The rule reuses .rv's opacity/blur but swaps the transform — it draws itself. */ .rule.rv { transform: translateY(24px) scaleX(0); transform-origin: left; } .rule.rv.in { transform: none; } .sect-head.center .rule.rv { transform-origin: center; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .rv { opacity: 1; transform: none; filter: none; } .hero-img { animation: none; } .marq-track { animation: none; } } /* ---------- 22. PRINT ---------------------------------------------------- */ /* People print the page to get the phone number and license. */ @media print { .nav, .menu, .callbar, .marq, .burger, .hero-img, .map-embed, .form { display: none !important; } body, .on-dark, .on-dark-2, .hero, .er, footer { background: #fff !important; color: #000 !important; } .rv { opacity: 1 !important; transform: none !important; filter: none !important; } .svc-list, .qa-a { max-height: none !important; } a[href^='tel:']::after { content: ' (' attr(href) ')'; font-size: 0.85em; } section { padding: 18px 0; break-inside: avoid; } }