/* * Table of contents * 01. Foundations and tokens * 02. Header and navigation * 03. Hero and booking * 04. Reviews and services * 05. Trust, brands, and FAQ * 06. Contact, CTA, and footer * 07. Responsive and visual polish * 08. WordPress and content templates * 09. Articles and optional media * 10. Interactive controls */ /* == 01. Foundations and tokens == */ :root { --ink: #102b33; --muted: #5b6e73; --paper: #f7faf9; --surface: #fff; --accent: #e4a340; --accent-ink: #142a31; --line: #dbe5e3; --soft: #edf4f2; --deep: #0d3440; /* Service-area map boundary (read by service-area.js). Kept out of the basemap's own hues — its water is #80deea and its parkland #9cd3b4 — so the border never reads as a bay or a park. Deep rather than light for the same reason: a pale teal scores only ~2.6 against that water, and the boundary crosses Galveston Bay. This holds 6.3 on land and 5.4 over water. */ --map-boundary: #075661; --radius: 18px; --shadow: 0 20px 60px rgba(18, 43, 51, 0.12); --font: Inter, 'Inter Fallback', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --display: Inter, 'Inter Fallback', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --serif: Georgia, 'Times New Roman', serif; --shell: min(1180px, calc(100% - 40px)); } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 102px; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 16px; /* On this displaces sticky positioning under the WP admin bar — keep it on . */ overflow-x: clip; line-height: 1.6; } html[data-theme='dark'] { --ink: #ecf5f2; --muted: #a9bdb8; --paper: #081412; --surface: #0f211e; --line: #29403b; --soft: #122a25; --deep: #071d20; --accent-ink: #081412; /* Near-inverted for the dark basemap (earth #1f1f1f, water #31353f), where the light theme's mid-teal would sink into the background instead of reading as a drawn border. */ --map-boundary: #5ee0d0; } .section-shell, .header-shell, .hero-shell { width: var(--shell); margin-inline: auto; } .section { padding: 96px 0; } h1, h2, h3, p { margin-top: 0; } h1, h2 { font-family: var(--display); letter-spacing: -0.045em; line-height: 1.03; } h1 { font-size: clamp(3rem, 6vw, 5.9rem); max-width: 800px; margin-bottom: 22px; } h2 { font-size: clamp(2.3rem, 4vw, 4.2rem); margin-bottom: 20px; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; } .button { min-height: 52px; padding: 0 24px; border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 12px; font-weight: 750; cursor: pointer; transition: 0.2s ease; } .button.is-loading { pointer-events: none; opacity: 0.85; } .button.is-loading::after { content: ''; width: 1.05em; height: 1.05em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: np-btn-spin 0.7s linear infinite; } @keyframes np-btn-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .button.is-loading::after { animation: none; border-right-color: currentColor; opacity: 0.5; } } .primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .primary:hover { filter: brightness(1.06); transform: translateY(-2px); } .secondary, .ghost { background: transparent; border-color: var(--line); color: var(--ink); } .ghost { border-color: rgba(255, 255, 255, 0.4); color: white; } /* == 02. Header and navigation == */ .site-header { height: 86px; background: color-mix(in srgb, var(--paper) 92%, transparent); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; transition: box-shadow 0.3s ease; } /* The glass blur lives on a pseudo-element: backdrop-filter on the header itself would make it the containing block for the fixed mobile drawer/overlay, clipping them to header height. */ .site-header::before { content: ''; position: absolute; inset: 0; z-index: -1; backdrop-filter: blur(16px); } .site-header.scrolled { box-shadow: 0 8px 30px -18px rgba(5, 22, 28, 0.35); } /* Keep the sticky header below the WP admin bar for logged-in users. */ .admin-bar .site-header { top: 32px; } html:has(body.admin-bar) { scroll-padding-top: 134px; } @media (max-width: 782px) { .admin-bar .site-header { top: 46px; } html:has(body.admin-bar) { scroll-padding-top: 148px; } } /* Below 600px WordPress makes the admin bar position:absolute (it scrolls away), so the sticky header goes back to the very top for logged-in users too. */ @media (max-width: 600px) { .admin-bar .site-header { top: 0; } html:has(body.admin-bar) { scroll-padding-top: 102px; } } .header-shell { height: 100%; display: flex; align-items: center; gap: 32px; } .brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; } .logo-crop { width: 58px; height: 58px; overflow: hidden; border-radius: 50%; background: white; border: 1px solid var(--line); display: block; } .logo-crop img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .brand-copy { line-height: 1.1; } .brand-copy b { display: block; font-size: 15px; letter-spacing: 0.18em; text-transform: uppercase; } .brand-copy small { font-size: 9px; letter-spacing: 0.23em; text-transform: uppercase; color: var(--muted); } nav { display: flex; gap: 25px; margin-left: auto; } nav a { font-size: 14px; font-weight: 650; color: var(--muted); } nav a:hover { color: var(--ink); } nav a.is-current { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 7px; } .header-actions { display: flex; align-items: center; gap: 14px; } .theme-toggle, .nav-toggle { border: 1px solid var(--line); color: var(--ink); background: var(--surface); width: 42px; height: 42px; border-radius: 50%; cursor: pointer; } .nav-toggle { display: none; } .phone { line-height: 1.15; } .phone small, .phone b { display: block; } .phone small { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); } .phone b { font-size: 13px; } .header-book { min-height: 44px; padding: 0 18px; font-size: 13px; } /* == 03. Hero and booking == */ .hero { min-height: 760px; position: relative; background-image: linear-gradient(90deg, rgba(5, 22, 28, 0.87), rgba(5, 22, 28, 0.55) 55%, rgba(5, 22, 28, 0.12)), var(--hero-image); background-size: cover; background-position: center; display: flex; align-items: center; color: white; } .hero-overlay { position: absolute; inset: 0; pointer-events: none; } .hero-shell { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.7fr); gap: 64px; align-items: center; padding: 64px 0; } .eyebrow, .kicker { display: block; font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 19px; } .eyebrow { color: #f2c87f; } .hero-copy > p { font-size: 19px; max-width: 610px; color: #dce6e8; margin-bottom: 28px; } .offer { display: inline-flex; align-items: center; gap: 18px; padding: 11px 18px 11px 11px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22); backdrop-filter: blur(8px); margin-bottom: 28px; } .offer > b { padding: 10px 16px; background: var(--accent); color: var(--accent-ink); font-size: 21px; border-radius: 999px; white-space: nowrap; /* The eligibility line can wrap to two lines; the amount must never squeeze with it. */ flex-shrink: 0; } .offer > span { font-size: 14px; font-weight: 700; line-height: 1.2; } /* Who the discount is for: one micro-label line, matching .eyebrow/.kicker treatment. Kept inside the badge so the hero gains a line of type, not a whole new row. */ .offer-groups { display: block; font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; } .offer-groups > i { font-style: normal; color: var(--accent); margin: 0 2px; } .offer small { display: block; font-size: 10px; font-weight: 500; color: #cbd7d9; margin-top: 4px; } .hero-actions { display: flex; gap: 12px; margin-bottom: 30px; } .proof { display: flex; gap: 22px; flex-wrap: wrap; font-size: 12px; color: #cfdddf; } .form-wrap { align-self: center; } .booking-form { background: color-mix(in srgb, var(--surface) 94%, transparent); color: var(--ink); padding: 28px; box-shadow: var(--shadow); border: 1px solid rgba(255, 255, 255, 0.24); } .booking-form [hidden] { display: none !important; } .form-heading { margin-bottom: 22px; } .form-heading span { display: block; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.13em; } .form-heading b { font-size: 22px; } /* Name/phone share a row, the appliance select gets a full row, and the service address shares the preferred-day row — so the address adds no form height. */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } /* The compact sidebar form is too narrow for two columns — stack every field. */ .booking-form.compact .form-grid { grid-template-columns: 1fr; } .booking-form.compact .form-grid > label { grid-column: 1 / -1; } .form-grid .label-email { grid-column: 1 / -1; } /* Appliance names are long: the select gets a full row. */ .form-grid label:has(select) { grid-column: 1 / -1; } /* Brand-styled animated dropdown where customizable