/* skin: voltage */ /* Wavemark plumbing template — industrial/utilitarian. Steel + copper. Mobile-first. */ :root { --steel: #141416; --steel-deep: #09090b; --paper: #f4f4f5; --paper-card: #ffffff; --ink: #0d0d0f; --ink-soft: #55555e; --copper: #1f5fd0; /* Small accent text on light backgrounds only. The bright accent stays on buttons, tickers and dark sections where it already passes. */ --accent-ink: #1f5fd0; --copper-deep: #17489e; --copper-light: #c3d7f7; --line: #dcdce1; --radius: 6px; --shadow: 0 10px 28px rgba(9, 9, 11, 0.18); --display: "Archivo", "Helvetica Neue", sans-serif; --body: "Inter", system-ui, sans-serif; /* Button background only. The base accent is unchanged; white label text on it measured 4.40:1 against the 4.5 minimum. */ --btn-bg: #1f5fd0; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } } body { font-family: var(--body); color: var(--ink); background: var(--paper); line-height: 1.6; font-size: 16px; } h1, h2, h3, .logo { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.08; } h1 { font-size: clamp(2.4rem, 7vw, 4.4rem); } h2 { font-size: clamp(1.7rem, 4.5vw, 2.7rem); } h3 { font-size: 1.05rem; letter-spacing: 0.02em; } .accent-text { color: var(--copper-light); } /* light variant: .accent-text sits on the DARK hero photo, never on the white page. The base accent measured 2.50:1 there on the foundry skin (needs 3.0); the -light variant measures 10.34:1. Fixed 2026-08-06. */ a { color: inherit; } .eyebrow { font-family: var(--display); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-ink); font-weight: 600; margin-bottom: 12px; } .eyebrow-light { color: var(--copper-light); } .concept-banner { background: var(--steel-deep); color: #d8dde2; font-size: 0.8rem; text-align: center; padding: 8px 16px; font-family: var(--body); } .concept-banner strong { color: #fff; } /* Nav */ .site-header { position: sticky; top: 0; z-index: 60; background: transparent; transition: background 0.25s ease, box-shadow 0.25s ease; } .site-header.scrolled { background: rgba(28, 33, 40, 0.96); backdrop-filter: blur(10px); box-shadow: 0 2px 20px rgba(0,0,0,0.2); } .header-inner { max-width: 1180px; margin: 0 auto; padding: 18px 20px; display: flex; align-items: center; gap: 20px; justify-content: space-between; } .logo { font-size: 1.1rem; white-space: nowrap; color: #fff; } .logo-mark { display: inline-block; background: var(--copper); color: #fff; padding: 3px 9px; margin-right: 6px; font-size: 0.95rem; } .logo-sub { color: var(--accent-ink); } .header-nav { display: none; gap: 26px; font-size: 0.86rem; font-family: var(--display); letter-spacing: 0.05em; text-transform: uppercase; } .header-nav a { text-decoration: none; color: rgba(255,255,255,0.8); } .header-nav a:hover { color: var(--copper-light); } .header-cta { display: none; align-items: center; gap: 14px; } .nav-phone { font-family: var(--display); font-weight: 600; color: #fff; text-decoration: none; letter-spacing: 0.02em; } .hamburger { display: flex; flex-direction: column; gap: 5px; background: none; border: none; padding: 8px; cursor: pointer; } .hamburger span { width: 22px; height: 2px; background: #fff; display: block; } .mobile-menu { display: none; flex-direction: column; background: var(--steel); padding: 8px 20px 20px; gap: 4px; } .mobile-menu.open { display: flex; } .mobile-menu a { color: rgba(255,255,255,0.85); text-decoration: none; padding: 10px 0; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.9rem; border-bottom: 1px solid rgba(255,255,255,0.08); } .mobile-menu .btn { margin-top: 10px; text-align: center; border-bottom: none; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 13px 24px; border: 2px solid transparent; border-radius: var(--radius); font-family: var(--display); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; cursor: pointer; transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.12s; } .btn:active { transform: scale(0.97); } .btn-primary { background: var(--btn-bg); color: #fff; border-color: var(--btn-bg); } .btn-primary:hover { background: var(--copper-deep); border-color: var(--copper-deep); } .btn-outline-light { border-color: rgba(255,255,255,0.6); color: #fff; background: transparent; } .btn-outline-light:hover { background: rgba(255,255,255,0.12); border-color: #fff; } /* 64px, not 44px. 44 is Apple's floor for any tap target; on a trades site the call button is the product. Measured guidance for home-service sites is 64-80px with the number readable at arm's length. Applies to the hero pair only -- .btn-lg is not used elsewhere. Raised 2026-08-08. */ .btn-lg { padding: 0 30px; font-size: 17px; min-height: 64px; } @media (max-width: 600px) { /* One thumb, one tap: the whole row is the target. */ .hero-actions { display: grid; gap: 10px; } .hero-actions .btn-lg { width: 100%; min-height: 68px; font-size: 18px; } } /* Hero */ .hero { position: relative; min-height: 88vh; display: flex; align-items: flex-end; overflow: hidden; margin-top: -70px; } .hero-media { position: absolute; inset: 0; z-index: 0; } .hero-media img { width: 100%; height: 100%; object-fit: cover; } .hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,21,26,0.55) 0%, rgba(18,21,26,0.50) 30%, rgba(18,21,26,0.82) 62%, rgba(18,21,26,0.94) 100%); } .hero-content { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 140px 20px 64px; width: 100%; color: #fff; } h1 { color: #fff; } .hero-lead { max-width: 560px; margin-top: 20px; font-size: 1.08rem; color: rgba(255,255,255,0.82); } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } /* Ticker */ .ticker-wrap { background: var(--copper); overflow: hidden; white-space: nowrap; padding: 11px 0; } .ticker-track { display: inline-block; white-space: nowrap; animation: ticker 32s linear infinite; } .ticker-track span { font-family: var(--display); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; } .ticker-track .dot { margin: 0 18px; color: rgba(255,255,255,0.6); font-size: 0.6rem; vertical-align: middle; } @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Trust strip */ .trust-strip { background: var(--steel); color: var(--paper); } .trust-inner { max-width: 1180px; margin: 0 auto; padding: 30px 20px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } .trust-item { display: flex; flex-direction: column; gap: 3px; } .trust-num { font-family: var(--display); font-size: 1.5rem; font-weight: 600; color: var(--copper-light); text-transform: uppercase; } .trust-label { font-size: 0.8rem; color: #9aa3ac; letter-spacing: 0.02em; } /* Sections */ .section { max-width: 1180px; margin: 0 auto; padding: 76px 20px; } .gallery { padding: 76px 20px; background: var(--steel-deep); } .section-head { margin-bottom: 40px; max-width: 640px; } .section-sub { color: var(--ink-soft); font-size: 1rem; margin-top: 6px; } .section-note { margin-top: 8px; font-size: 0.86rem; color: var(--ink-soft); font-style: italic; } .gallery .section-head .eyebrow, .gallery .section-head h2 { color: #fff; } .gallery .section-note { color: #8b929a; } /* Services */ .services-grid { display: grid; gap: 2px; background: var(--line); border: 1px solid var(--line); } .service-card { background: var(--paper-card); padding: 30px 26px; } .service-card h3 { margin-bottom: 10px; color: var(--ink); } .service-card p { color: var(--ink-soft); font-size: 0.95rem; } /* Gallery */ .gallery-grid { display: grid; gap: 14px; margin-top: 8px; } .gallery-card { position: relative; border-radius: var(--radius); overflow: hidden; } .gallery-card img { width: 100%; height: 230px; object-fit: cover; display: block; } .gallery-card figcaption { position: absolute; bottom: 0; left: 0; right: 0; padding: 12px 16px; font-family: var(--display); font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: linear-gradient(0deg, rgba(0,0,0,0.75), transparent); } /* Process */ .process-grid { display: grid; gap: 24px; } .process-step { padding: 6px 0; } .process-num { font-family: var(--display); font-size: 2.4rem; font-weight: 600; color: var(--copper); line-height: 1; margin-bottom: 10px; } .process-step h3 { margin-bottom: 6px; } .process-step p { color: var(--ink-soft); font-size: 0.94rem; } /* Area band */ .area-band { background: var(--copper); color: #fff; } .area-inner { max-width: 1180px; margin: 0 auto; padding: 48px 20px; } .area-inner h2 { color: #fff; } .area-inner p { margin-top: 8px; color: rgba(255,255,255,0.85); } /* Form */ .form-section { background: var(--paper); } .form-grid { display: grid; gap: 40px; } .form-phone { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); } .form-phone a { display: block; font-family: var(--display); font-size: 1.5rem; font-weight: 600; color: var(--copper); text-decoration: none; margin-top: 4px; } .form-lead { color: var(--ink-soft); margin: 10px 0 0; } .form-wrap { background: var(--paper-card); padding: 32px; border-radius: var(--radius); box-shadow: var(--shadow); } form label { display: block; font-family: var(--display); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; margin: 16px 0 6px; color: var(--ink-soft); } form label:first-child { margin-top: 0; } form input, form select { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); font-family: var(--body); font-size: 1rem; color: var(--ink); } form input:focus, form select:focus { outline: 2px solid var(--copper); outline-offset: 1px; } /* :not(.chat-input) so the chat Send button keeps its natural width — without it the full-width estimate-form rule collapses the chat text field */ form:not(.chat-input) .btn { margin-top: 22px; width: 100%; } .success-panel { margin-top: 18px; padding: 16px 18px; background: #eaf3ea; border: 1px solid #b9d6b9; border-radius: var(--radius); color: #2c4a2c; } /* Footer */ .site-footer { background: var(--steel-deep); color: #8b929a; margin-bottom: 64px; } .footer-inner { max-width: 1180px; margin: 0 auto; padding: 40px 20px; display: grid; gap: 18px; } .site-footer .logo { color: var(--paper); margin-bottom: 8px; } .footer-note { font-size: 0.8rem; max-width: 480px; } /* Sticky call (mobile) */ .sticky-call { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; padding: 10px 14px; background: rgba(20, 24, 29, 0.97); } .sticky-call .btn { width: 100%; } /* Chat */ .chat-toggle { position: fixed; right: 16px; bottom: 74px; z-index: 60; background: var(--steel); color: #fff; border: none; border-radius: 999px; padding: 13px 20px; font-family: var(--display); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; cursor: pointer; box-shadow: var(--shadow); } .chat-panel[hidden] { display: none; } .chat-panel { position: fixed; right: 12px; bottom: 74px; z-index: 70; width: min(360px, calc(100vw - 24px)); background: var(--paper-card); border-radius: 4px; box-shadow: 0 20px 50px rgba(0,0,0,0.3); display: flex; flex-direction: column; overflow: hidden; } .chat-head { display: flex; align-items: center; gap: 8px; padding: 14px; background: var(--steel); color: #fff; } .chat-head strong { font-family: var(--display); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.03em; } .chat-demo-tag { font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; background: var(--copper); color: #fff; padding: 2px 8px; border-radius: 999px; } .chat-head button { margin-left: auto; background: none; border: none; color: #fff; font-size: 1.3rem; cursor: pointer; line-height: 1; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; margin-right: -10px; } .chat-log { height: 280px; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--paper); } .chat-msg { max-width: 85%; padding: 10px 13px; border-radius: 6px; font-size: 0.9rem; } .chat-msg.bot { background: var(--paper-card); border: 1px solid var(--line); align-self: flex-start; } .chat-msg.user { background: var(--copper); color: #fff; align-self: flex-end; } .chat-input { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); background: var(--paper-card); } .chat-input input { flex: 1; min-width: 0; /* without this the button's intrinsic width collapses the input */ border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; font-family: var(--body); font-size: 0.94rem; } .chat-input .btn { padding: 10px 16px; } .toast { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); background: var(--steel); color: #fff; padding: 12px 18px; border-radius: var(--radius); opacity: 0; pointer-events: none; z-index: 100; transition: opacity 0.2s; } .toast.visible { opacity: 1; } /* Voice assistant widget */ .icon { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } .icon[hidden] { display: none; } .voice-hint-wrap { position: fixed; right: 24px; bottom: 96px; z-index: 61; display: flex; align-items: center; gap: 10px; justify-content: flex-end; } .voice-picker { pointer-events: auto; background: var(--steel); color: #d8dde2; border: 1px solid #343c47; border-radius: 999px; font-size: 0.72rem; padding: 7px 12px; font-family: var(--body); cursor: pointer; opacity: 0; transform: translateX(6px); transition: opacity 0.2s ease, transform 0.2s ease; } .voice-hint-wrap:hover .voice-picker { opacity: 1; transform: translateX(0); } .voice-hint { background: var(--steel); color: #fff; font-size: 0.76rem; letter-spacing: 0.02em; padding: 9px 16px; border-radius: 999px; white-space: nowrap; border: 1px solid var(--line); opacity: 0; transform: translateX(6px); transition: opacity 0.2s ease, transform 0.2s ease; display: flex; align-items: center; gap: 8px; } .voice-hint-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--copper-light); flex-shrink: 0; } .voice-toggle:hover ~ .voice-hint-wrap .voice-hint, .voice-toggle-wrap:hover .voice-hint { opacity: 1; transform: translateX(0); } .voice-toggle { color: #fff; position: fixed; right: 20px; bottom: 20px; z-index: 62; width: 62px; height: 62px; border-radius: 50%; background: linear-gradient(135deg, var(--copper-light), var(--copper)); border: none; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(193,90,46,0.45), inset 0 1px 0 rgba(255,255,255,0.25); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; } .voice-toggle:hover { transform: scale(1.06); } .voice-toggle:hover ~ .voice-hint-wrap .voice-hint { opacity: 1; transform: translateX(0); } .voice-toggle-ring { position: absolute; inset: 0; border-radius: 50%; background: rgba(193,90,46,0.35); animation: voicePing 1.4s ease-out 3; } .voice-toggle.in-call { display: none; } @keyframes voicePing { 0% { transform: scale(0.9); opacity: 0.7; } 100% { transform: scale(1.9); opacity: 0; } } .call-panel[hidden] { display: none; } .call-panel { position: fixed; right: 16px; bottom: 20px; z-index: 70; width: min(360px, calc(100vw - 24px)); max-height: calc(100vh - 40px); background: var(--steel); border: 1px solid var(--steel-deep); border-radius: 20px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.4); display: flex; flex-direction: column; } .call-head { position: relative; padding: 18px 18px 16px; border-bottom: 1px solid var(--steel-deep); overflow: hidden; flex-shrink: 0; } .call-head::before { content: ''; position: absolute; top: -60px; right: -60px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(193,90,46,0.25), transparent 70%); pointer-events: none; } .call-head-row { position: relative; display: flex; align-items: center; gap: 12px; } .call-avatar { position: relative; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--copper-light), var(--copper)); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; color: var(--steel); flex-shrink: 0; } .call-avatar-dot { position: absolute; bottom: -1px; right: -1px; width: 11px; height: 11px; border-radius: 50%; background: #4ade80; border: 2px solid var(--steel); } .call-avatar-icon { width: 20px; height: 20px; } .call-avatar-dot.paused { background: #9aa4ad; } .call-info { min-width: 0; } .call-info strong { font-family: var(--display); color: #fff; font-size: 0.92rem; display: block; text-transform: uppercase; letter-spacing: 0.02em; } .call-meta { font-size: 0.72rem; color: #9aa4ad; display: flex; align-items: center; gap: 5px; margin-top: 2px; } .call-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; animation: callBlink 1.4s ease-in-out infinite; flex-shrink: 0; } .call-live-dot.paused { background: #9aa4ad; animation: none; } @keyframes callBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } } .call-end-btn { margin-left: auto; width: 44px; height: 44px; border-radius: 50%; background: #e5484d; border: none; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; } .call-end-btn .icon { width: 18px; height: 18px; } .call-waveform { position: relative; margin-top: 14px; background: var(--steel-deep); border: 1px solid #343c47; border-radius: 999px; padding: 11px 16px; display: flex; align-items: center; justify-content: center; gap: 3px; height: 36px; } .call-waveform i { width: 3px; height: 6px; background: var(--copper-light); border-radius: 2px; display: block; transition: height 0.08s ease; } .call-transcript { padding: 14px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; background: linear-gradient(180deg, var(--steel), var(--steel-deep)); flex: 1 1 auto; min-height: 0; } .call-transcript .who { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--copper-light); margin-bottom: 3px; } .call-transcript .who.you { color: #9aa4ad; text-align: right; } .call-bubble { background: rgba(255,255,255,0.05); border: 1px solid #343c47; border-radius: 14px; border-bottom-left-radius: 4px; padding: 9px 12px; font-size: 0.84rem; color: #f0f2f4; max-width: 85%; } .call-bubble.you { background: var(--copper); color: #fff; border: none; margin-left: auto; border-radius: 14px; border-bottom-right-radius: 4px; } .call-foot { padding: 12px 18px 14px; display: flex; align-items: center; justify-content: center; border-top: 1px solid var(--steel-deep); flex-shrink: 0; } .call-mic-btn { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, var(--copper-light), var(--copper)); border: none; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 0 0 6px rgba(193,90,46,0.18); } .call-mic-btn.paused { background: #2f3742; box-shadow: none; border: 1px solid #343c47; } .call-type-instead { background: none; border: 0; color: #9aa4ad; font: inherit; font-size: 0.72rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 10px 12px; min-height: 44px; white-space: nowrap; } .call-type-instead:hover, .call-type-instead:focus { color: #cfd6dc; } /* .voice-hint-wrap is display:none below 820px on purpose -- the voice picker needs hover, which a touch screen does not have. But the typing escape hatch matters MORE on a phone, not less: that is exactly where someone is sitting next to family or standing on a job site and will not talk out loud. Put the wrapper back for this button alone. */ @media (max-width: 820px) { .voice-hint-wrap { display: flex !important; right: 16px; bottom: 150px; background: rgba(20,22,25,.82); backdrop-filter: blur(8px); border-radius: 999px; padding: 0 4px; } .voice-hint-wrap .voice-picker, .voice-hint-wrap .voice-hint { display: none !important; } } .call-status-text { text-align: center; font-size: 0.7rem; color: #9aa4ad; padding-bottom: 14px; letter-spacing: 0.04em; text-transform: uppercase; flex-shrink: 0; } @media (max-width: 759px) { /* 759, not 640: .sticky-call is only hidden at min-width 760px, so anything narrower still has a Call button the orb can cover. */ .voice-toggle { bottom: 84px; } .voice-hint-wrap { bottom: 160px; } .call-panel { bottom: 84px; } /* Sticky bar at the bottom already has a persistent Call button on mobile — the hero's inline Call button just crowds the voice-call icon here. */ .hero-call-btn { display: none; } } /* Reveal */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } .stagger-1 { transition-delay: 0.08s; } .stagger-2 { transition-delay: 0.16s; } .stagger-3 { transition-delay: 0.24s; } .stagger-4 { transition-delay: 0.32s; } .stagger-5 { transition-delay: 0.40s; } @media (min-width: 760px) { .header-nav { display: flex; } .header-cta { display: flex; } .hamburger { display: none; } .trust-inner { grid-template-columns: repeat(4, 1fr); } .services-grid { grid-template-columns: repeat(3, 1fr); } .gallery-grid { grid-template-columns: repeat(3, 1fr); } .gallery-card img { height: 270px; } .process-grid { grid-template-columns: repeat(4, 1fr); } .form-grid { grid-template-columns: 1fr 1.1fr; } .sticky-call { display: none; } .site-footer { margin-bottom: 0; } .chat-toggle { bottom: 20px; } .chat-panel { bottom: 20px; } .footer-inner { grid-template-columns: 1fr 1fr; align-items: start; } } /* ---------- FAQ ---------- Native
/: no JavaScript, keyboard accessible and screen-reader friendly for free, works with JS off, and the answer text is indexable — which is worth more for a local business than any animation. */ .faq-list { max-width: 760px; border-top: 1px solid var(--line); } .faq-item { border-bottom: 1px solid var(--line); } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 4px; font-family: var(--display); font-size: 1.05rem; font-weight: 600; color: var(--ink); cursor: pointer; list-style: none; } /* Safari/Chrome draw their own triangle; we supply our own +/- instead. */ .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::marker { content: ""; } .faq-item summary:hover { color: var(--copper); } .faq-item summary:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; } .faq-item summary::after { content: "+"; flex: 0 0 auto; font-size: 1.5rem; font-weight: 400; line-height: 1; color: var(--copper); transition: transform 0.2s ease; } .faq-item[open] summary::after { content: "\2212"; /* minus sign */ } .faq-item p { margin: 0; padding: 0 4px 22px; max-width: 66ch; color: var(--ink-soft); line-height: 1.65; } @media (max-width: 600px) { .faq-item summary { font-size: 1rem; padding: 18px 4px; } } /* Minimum tap target. No template had one; the header phone link measured 19-26px against Apple's 44px minimum. On a trades site the phone number is the product -- a homeowner with water on the floor who mis-taps goes back to Google. Applied via padding so the visual size is unchanged on desktop. */ .nav-phone, .btn, .btn-primary, .chat-toggle, .form-phone a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* Any phone number in the footer is a real tap target, not just text. Measured 2026-08-06 on the live site: the footer number rendered 19px tall against Apple's 44px minimum, so a thumb missed it. Every other phone link on the page is already a button; this one was a bare . */ footer a[href^="tel:"], /* The "Or call directly" number beside the estimate form is a bare with no class, so every earlier tap-target rule missed it. Measured 38px on a 390px viewport 2026-08-08 -- the last phone link on the page and the one a visitor reaches for when they decide the form is too slow. */ .form-phone a[href^="tel:"] { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; } /* WAVEMARK-NAV-GAP The header is transparent on purpose so the hero photo shows through it. But
began BELOW the header, so the band the header occupied showed the cream page background -- a white line across the top of every site. It measured 10px on Pro and 19px on Pro+AI because the two headers are different heights (80px vs 89px -- the button sets differ), which is exactly why it looked like the line "changed between plans". Reported by Sawyer, measured 2026-08-06. Two earlier attempts and why they were wrong: 1. margin-top: -80px on the hero -- hardcoded, left a 9px line on Pro+AI. 2. position:absolute on the header -- killed the gap but pulled the hero over the concept banner, hiding the "this is a preview, not your real site" warning. That banner is not decoration; it is the thing that keeps a demo from being mistaken for a live site. What works: leave the banner and header in normal flow, and let the HERO reach up under the header by exactly the header's own height, measured at runtime. No hardcoded number, no element leaves the flow. */ main > .hero:first-child { margin-top: calc(-1 * var(--wm-header-h, 0px)); padding-top: var(--wm-header-h, 0px); } /* WAVEMARK-TAP-TARGETS Apple's minimum comfortable touch target is 44x44px. Measured on a real iPhone viewport 2026-08-06: the hamburger rendered 32px and the header phone number 38px. The phone number is the single most important thing to tap on a contractor's site, so a thumb missing it costs the client a call. */ .hamburger { min-width: 44px; min-height: 44px; /* No `display` here on purpose. This block sits after the `@media (min-width: 760px) { .hamburger { display: none } }` rule, so any display set here wins at every width and the mobile menu button appears on desktop next to the full nav. Fixed 2026-08-08. */ align-items: center; justify-content: center; } .nav-phone, .header-inner a[href^="tel:"] { display: inline-flex; align-items: center; min-height: 44px; } /* WAVEMARK-VOICE-PICKER The voice picker is a developer control for auditioning TTS voices. It was styled with opacity:0 and revealed on hover -- but an /