/* ========================================================= PLUMBING CO. — DESIGN SYSTEM Lancaster, CA — Licensed & Insured Plumbing Services Palette drawn from the trade: copper pipe, ink-blue schematics, safety amber, galvanized steel. NOTE ON FONTS: Google Fonts are loaded via a tag in each page's (non-render-blocking, with preconnect) rather than @import here, which would block CSS parsing. ========================================================= */ :root{ /* ---- Color tokens ---- */ --ink: #12213A; /* deep navy — headers, footer, trust */ --ink-2: #1B3153; /* lighter navy for panels/gradients */ --copper: #C4622D; /* primary accent — copper pipe */ --copper-dark: #A34E22; --copper-light: #E68A52; --amber: #F2A93B; /* emergency / urgency CTA only */ --amber-dark: #D6901F; --steel: #5B6472; /* secondary text, icons */ --steel-light: #8B93A0; --paper: #F7F4EF; /* warm off-white background */ --paper-2: #EFEAE1; --white: #FFFFFF; --line: #E3DED3; /* hairline borders on paper */ --line-dark: rgba(255,255,255,0.14); --success: #2E8B57; --shadow-sm: 0 1px 3px rgba(18,33,58,0.08), 0 1px 2px rgba(18,33,58,0.06); --shadow-md: 0 8px 24px rgba(18,33,58,0.12); --shadow-lg: 0 20px 48px rgba(18,33,58,0.18); /* ---- Type ---- */ --font-display: 'Roboto Slab', Georgia, serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', 'Courier New', monospace; /* ---- Layout ---- */ --container: 1200px; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; } /* ---------- Reset ---------- */ *, *::before, *::after{ box-sizing: border-box; margin:0; padding:0; } html{ scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } body{ font-family: var(--font-body); color: var(--ink); background: var(--paper); line-height: 1.6; font-size: 16px; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img{ max-width:100%; display:block; } a{ color: inherit; text-decoration: none; } ul{ list-style:none; } button{ font-family: inherit; cursor:pointer; } input, textarea, select{ font-family: inherit; font-size: 1rem; } h1,h2,h3,h4{ font-family: var(--font-display); line-height: 1.15; font-weight: 700; color: var(--ink); } svg{ display:block; } /* Visible keyboard focus everywhere */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible{ outline: 3px solid var(--copper); outline-offset: 2px; border-radius: 4px; } .skip-link{ position:absolute; left:-999px; top:0; background:var(--ink); color:var(--white); padding: 12px 20px; z-index: 999; border-radius: 0 0 8px 0; font-weight:600; } .skip-link:focus{ left:0; } /* ---------- Layout helpers ---------- */ .container{ max-width: var(--container); margin: 0 auto; padding: 0 24px; width: 100%; } .container-narrow{ max-width: 820px; margin: 0 auto; padding: 0 24px; width: 100%; } section{ position: relative; } .section-pad{ padding: 96px 0; } @media (max-width: 768px){ .section-pad{ padding: 64px 0; } } @media (max-width: 420px){ .section-pad{ padding: 48px 0; } } .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family: var(--font-mono); font-size: 0.78rem; font-weight:600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--copper-dark); margin-bottom: 14px; } .eyebrow::before{ content:''; width:22px; height:2px; background: var(--copper); } .eyebrow.on-dark{ color: var(--copper-light); } .section-head{ max-width: 640px; margin-bottom: 48px; } .section-head.center{ margin-left:auto; margin-right:auto; text-align:center; } .section-head h2{ font-size: clamp(1.8rem, 3.2vw, 2.6rem); margin-bottom: 14px; } .section-head p{ color: var(--steel); font-size: 1.08rem; } /* ---------- Buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; padding: 15px 28px; border-radius: var(--radius-sm); font-weight:700; font-size: 0.98rem; border: 2px solid transparent; transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease; white-space: nowrap; } .btn-primary{ background: var(--copper); color: var(--white); box-shadow: var(--shadow-sm); } .btn-primary:hover{ background: var(--copper-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-emergency{ background: var(--amber); color: var(--ink); box-shadow: var(--shadow-sm); } .btn-emergency:hover{ background: var(--amber-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-outline{ background: transparent; border-color: currentColor; color: var(--ink); } .btn-outline:hover{ background: var(--ink); color: var(--white); border-color: var(--ink); } .btn-outline.on-dark{ color: var(--white); } .btn-outline.on-dark:hover{ background: var(--white); color: var(--ink); } .btn-ghost{ background: transparent; color: var(--copper); padding: 10px 4px; } .btn-ghost:hover{ color: var(--copper-dark); text-decoration: underline; } .btn-block{ width: 100%; } .btn svg{ width:18px; height:18px; flex-shrink:0; } /* ---------- Top utility bar ---------- */ .topbar{ background: var(--ink); color: var(--steel-light); font-size: 0.85rem; } .topbar .container{ display:flex; align-items:center; justify-content:space-between; padding-top:8px; padding-bottom:8px; flex-wrap:wrap; gap:8px; } .topbar-left{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; } .topbar-left span{ display:inline-flex; align-items:center; gap:6px; } .topbar a{ color: var(--white); } .topbar-left svg{ width:14px; height:14px; color: var(--copper-light); flex-shrink:0; } .topbar-social{ display:flex; gap:14px; flex-shrink:0; } .topbar-social a{ color: var(--steel-light); transition: color .15s; } .topbar-social a:hover{ color: var(--copper-light); } .topbar-social svg{ width:15px; height:15px; } @media (max-width: 620px){ .topbar-left span:nth-child(3){ display:none; } } @media (max-width: 440px){ .topbar-social{ display:none; } } @media (max-width: 400px){ .topbar-left span:nth-child(2){ display:none; } } /* ---------- Header / Nav ---------- */ .site-header{ background: var(--white); border-bottom: 1px solid var(--line); position: sticky; top:0; z-index: 500; } .nav-wrap{ display:flex; align-items:center; justify-content:space-between; padding-top: 16px; padding-bottom: 16px; gap: 16px; } .brand{ display:flex; align-items:center; gap:12px; min-width:0; flex-shrink:1; } .brand-mark{ width:44px; height:44px; flex-shrink:0; } .brand-text{ display:flex; flex-direction:column; line-height:1.1; min-width:0; } .brand-text strong{ font-family: var(--font-display); font-size:1.2rem; letter-spacing:0.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .brand-text span{ font-family: var(--font-mono); font-size: 0.68rem; letter-spacing:0.08em; color: var(--copper-dark); text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .main-nav{ display:flex; align-items:center; gap: 6px; } .main-nav > ul{ display:flex; align-items:center; gap: 2px; } .main-nav a.nav-link{ display:block; padding: 10px 14px; font-weight:600; font-size:0.95rem; color: var(--ink); border-radius: var(--radius-sm); transition: color .15s, background .15s; } .main-nav a.nav-link:hover{ color: var(--copper-dark); background: var(--paper-2); } .main-nav a.nav-link.current{ color: var(--copper-dark); } .has-dropdown{ position: relative; } .has-dropdown > button.nav-link{ display:flex; align-items:center; gap:5px; background:none; border:none; color: var(--ink); padding: 10px 14px; font-weight:600; font-size:0.95rem; border-radius: var(--radius-sm); font-family: inherit; } .has-dropdown > button.nav-link:hover{ color: var(--copper-dark); background: var(--paper-2); } .has-dropdown > button svg{ width:14px; height:14px; transition: transform .18s; } .has-dropdown[data-open="true"] > button svg{ transform: rotate(180deg); } .dropdown-panel{ position:absolute; top: calc(100% + 8px); left:0; background: var(--white); border:1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 10px; min-width: 300px; display: grid; gap:2px; opacity:0; visibility:hidden; transform: translateY(-6px); transition: opacity .15s ease, transform .15s ease, visibility .15s; } .has-dropdown[data-open="true"] .dropdown-panel{ opacity:1; visibility:visible; transform: translateY(0); } .dropdown-panel a{ display:flex; align-items:center; gap:12px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--ink); font-weight:600; font-size:0.92rem; } .dropdown-panel a:hover{ background: var(--paper-2); color: var(--copper-dark); } .dropdown-panel a svg{ width:18px; height:18px; color: var(--copper); flex-shrink:0; } .header-cta{ display:flex; align-items:center; gap:14px; flex-shrink:0; } .header-phone{ display:flex; flex-direction:column; align-items:flex-end; } .header-phone small{ font-size: 0.72rem; color: var(--steel); text-transform:uppercase; letter-spacing:0.06em; white-space:nowrap; } .header-phone a{ font-family: var(--font-mono); font-weight:600; font-size:1.05rem; color: var(--ink); white-space:nowrap; } .nav-toggle{ display:none; background:none; border:1px solid var(--line); border-radius: var(--radius-sm); padding: 9px; flex-shrink:0; } .nav-toggle svg{ width:22px; height:22px; } /* ---------- Mobile nav ---------- */ @media (max-width: 980px){ .main-nav{ position: fixed; inset: 0 0 0 auto; width: min(360px, 88vw); background: var(--white); flex-direction:column; align-items:stretch; padding: 90px 24px 24px; transform: translateX(100%); transition: transform .25s ease; z-index: 600; overflow-y:auto; box-shadow: var(--shadow-lg); } .main-nav[data-mobile-open="true"]{ transform: translateX(0); } .main-nav > ul{ flex-direction:column; align-items:stretch; gap:2px; } .main-nav a.nav-link, .has-dropdown > button.nav-link{ padding: 14px 10px; font-size:1.05rem; width:100%; justify-content:space-between; } .dropdown-panel{ position:static; box-shadow:none; border:none; opacity:1; visibility:visible; transform:none; display:none; padding-left: 10px; } .has-dropdown[data-open="true"] .dropdown-panel{ display:grid; } .nav-toggle{ display:flex; align-items:center; justify-content:center; } .nav-scrim{ display:none; position:fixed; inset:0; background: rgba(18,33,58,0.5); z-index: 550; } .nav-scrim[data-show="true"]{ display:block; } .header-phone small{ display:none; } } @media (max-width: 660px){ .header-phone{ display:none; } } @media (max-width: 560px){ .brand-text strong{ font-size: 1.05rem; } .header-cta .btn-primary span{ display:none; } .header-cta{ gap:10px; } } @media (max-width: 400px){ .brand-text span{ display:none; } .brand-mark{ width:38px; height:38px; } .header-cta{ gap:8px; } .nav-wrap{ gap:10px; } } /* ---------- Hero (blueprint motif) ---------- */ .hero{ background: var(--ink); background-image: linear-gradient(180deg, rgba(18,33,58,0.94), rgba(18,33,58,0.97)), repeating-linear-gradient(0deg, rgba(255,255,255,0.045) 0, rgba(255,255,255,0.045) 1px, transparent 1px, transparent 40px), repeating-linear-gradient(90deg, rgba(255,255,255,0.045) 0, rgba(255,255,255,0.045) 1px, transparent 1px, transparent 40px); color: var(--white); overflow:hidden; position: relative; } .hero-grid{ display:grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items:center; padding-top: 88px; padding-bottom: 96px; } @media (max-width: 980px){ .hero-grid{ grid-template-columns: 1fr; padding-top: 56px; padding-bottom: 48px; } } .hero-badges{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px; } .hero-badge{ display:inline-flex; align-items:center; gap:7px; font-family: var(--font-mono); font-size:0.74rem; letter-spacing: 0.04em; text-transform:uppercase; background: rgba(255,255,255,0.08); border:1px solid var(--line-dark); padding: 7px 12px; border-radius: 100px; color: var(--paper); } .hero-badge svg{ width:14px; height:14px; color: var(--amber); flex-shrink:0; } .hero h1{ color: var(--white); font-size: clamp(2rem, 4.6vw, 3.6rem); margin-bottom: 20px; word-wrap:break-word; } .hero h1 em{ font-style: normal; color: var(--copper-light); } .hero p.lede{ font-size: clamp(1rem, 2.2vw, 1.18rem); color: var(--steel-light); max-width: 540px; margin-bottom: 32px; } .hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom: 36px; } .hero-trust{ display:flex; gap: 28px; flex-wrap:wrap; } .hero-trust div{ display:flex; flex-direction:column; } .hero-trust strong{ font-family: var(--font-display); font-size: 1.6rem; color: var(--white); } .hero-trust span{ font-size:0.82rem; color: var(--steel-light); } .hero-art{ position: relative; } .hero-art .art-card{ background: var(--paper); border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-lg); border: 6px solid rgba(255,255,255,0.08); } .hero-art img{ width:100%; height: 420px; object-fit: cover; } .hero-art .float-card{ position:absolute; background: var(--white); color: var(--ink); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 16px 18px; display:flex; align-items:center; gap:12px; max-width: 250px; } .hero-art .float-1{ bottom: -26px; left: -26px; } .hero-art .float-2{ top: -22px; right: -18px; } .float-card .icon-wrap{ background: var(--paper-2); border-radius: 50%; width:44px; height:44px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .float-card .icon-wrap svg{ width:22px; height:22px; color: var(--copper); } .float-card strong{ display:block; font-size:0.95rem; } .float-card span{ font-size:0.78rem; color: var(--steel); } @media (max-width: 980px){ .hero-art{ margin-top: 8px; } .hero-art .float-1{ left: 12px; } .hero-art .float-2{ right: 12px; } } @media (max-width: 640px){ .hero-art .float-card{ display:none; } } @media (max-width: 640px){ .hero-art img{ height: 260px; } } /* ---------- Emergency strip ---------- */ .emergency-strip{ background: var(--amber); color: var(--ink); } .emergency-strip .container{ display:flex; align-items:center; justify-content:center; gap: 14px; padding-top: 12px; padding-bottom: 12px; flex-wrap:wrap; text-align:center; } .emergency-strip strong{ font-weight:800; } .emergency-strip a.link-inline{ text-decoration: underline; font-weight:700; } /* ---------- Trust bar / logos ---------- */ .trust-bar{ background: var(--white); border-bottom: 1px solid var(--line); padding: 28px 0; } .trust-bar .container{ display:flex; align-items:center; justify-content:space-between; gap: 24px; flex-wrap:wrap; } .trust-item{ display:flex; align-items:center; gap:10px; color: var(--steel); font-weight:600; font-size:0.92rem; } .trust-item svg{ width:22px; height:22px; color: var(--copper); flex-shrink:0; } @media (max-width: 640px){ .trust-bar .container{ justify-content:center; } } /* ---------- Service cards ---------- */ .service-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } @media (max-width: 980px){ .service-grid{ grid-template-columns: repeat(2,1fr); } } @media (max-width: 640px){ .service-grid{ grid-template-columns: 1fr; } } .service-card{ background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 26px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; display:flex; flex-direction:column; height:100%; } .service-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: transparent; } .service-card .icon-badge{ width:56px; height:56px; border-radius: var(--radius-md); background: var(--paper-2); display:flex; align-items:center; justify-content:center; margin-bottom:20px; } .service-card .icon-badge svg{ width:28px; height:28px; color: var(--copper); } .service-card h3{ font-size:1.22rem; margin-bottom:10px; } .service-card p{ color: var(--steel); font-size:0.96rem; margin-bottom:20px; flex-grow:1; } .service-card .card-link{ display:inline-flex; align-items:center; gap:6px; font-weight:700; color: var(--copper-dark); font-size:0.92rem; } .service-card .card-link svg{ width:16px; height:16px; transition: transform .15s; } .service-card:hover .card-link svg{ transform: translateX(4px); } /* ---------- Schematic connector (signature element) ---------- */ .schematic-wrap{ position:relative; } .schematic-line{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:0.5; } @media (max-width: 980px){ .schematic-line{ display:none; } } /* ---------- Process / steps ---------- */ .process-list{ display:grid; grid-template-columns: repeat(4,1fr); gap: 26px; counter-reset: step; } @media (max-width: 980px){ .process-list{ grid-template-columns: repeat(2,1fr); } } @media (max-width: 560px){ .process-list{ grid-template-columns: 1fr; } } .process-item{ position:relative; padding-top: 8px; } .process-num{ font-family: var(--font-mono); font-weight:700; font-size: 0.85rem; color: var(--white); background: var(--copper); width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:18px; } .process-item h3{ font-size:1.1rem; margin-bottom:8px; } .process-item p{ color: var(--steel); font-size:0.94rem; } /* ---------- Dark band ---------- */ .band-dark{ background: var(--ink); background-image: linear-gradient(180deg, rgba(18,33,58,0.97), rgba(18,33,58,0.99)), repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 44px), repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 44px); color: var(--white); } .band-dark .section-head h2{ color: var(--white); } .band-dark .section-head p{ color: var(--steel-light); } /* ---------- Testimonials ---------- */ .review-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; } @media (max-width: 980px){ .review-grid{ grid-template-columns: repeat(2,1fr);} } @media (max-width: 640px){ .review-grid{ grid-template-columns: 1fr; } } .review-card{ background: rgba(255,255,255,0.05); border: 1px solid var(--line-dark); border-radius: var(--radius-lg); padding: 26px; display:flex; flex-direction:column; gap:14px; } .review-card.on-paper{ background: var(--white); border-color: var(--line); } .review-card.on-paper p.quote{ color: var(--ink); } .review-card.on-paper .review-who span{ color: var(--steel); } .stars{ display:flex; gap:3px; } .stars svg{ width:16px; height:16px; color: var(--amber); } .review-card p.quote{ color: var(--paper); font-size: 0.98rem; line-height:1.65; } .review-who{ display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:10px; } .review-avatar{ width:40px; height:40px; border-radius:50%; background: var(--copper); color:var(--white); font-family: var(--font-display); display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0; } .review-who strong{ font-size:0.9rem; display:block; } .review-who span{ font-size:0.78rem; color: var(--steel-light); } .google-badge{ display:inline-flex; align-items:center; gap:10px; background: rgba(255,255,255,0.06); border:1px solid var(--line-dark); padding: 10px 16px; border-radius: 100px; margin-bottom: 20px; } .google-badge strong{ color:var(--white); font-size:0.95rem; } .google-badge .stars svg{ color: var(--amber); } .google-badge.on-paper{ background: var(--white); border-color: var(--line); box-shadow: var(--shadow-sm); } .google-badge.on-paper strong{ color: var(--ink); } /* ---------- Review filters (reviews page) ---------- */ .review-filters{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:36px; } /* ---------- Gallery ---------- */ .gallery-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 16px; } @media (max-width: 980px){ .gallery-grid{ grid-template-columns: repeat(3,1fr);} } @media (max-width: 640px){ .gallery-grid{ grid-template-columns: repeat(2,1fr); } } @media (max-width: 420px){ .gallery-grid{ grid-template-columns: 1fr 1fr; gap:10px; } } .gallery-item{ position:relative; border-radius: var(--radius-md); overflow:hidden; aspect-ratio: 4/3; cursor:zoom-in; background: var(--paper-2); } .gallery-item img{ width:100%; height:100%; object-fit:cover; transition: transform .35s ease; } .gallery-item:hover img{ transform: scale(1.08); } .gallery-item .gallery-tag{ position:absolute; left:10px; bottom:10px; background: rgba(18,33,58,0.85); color:var(--white); font-size:0.72rem; font-weight:600; padding: 5px 10px; border-radius: 100px; font-family: var(--font-mono); letter-spacing:0.03em; } .gallery-filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:30px; justify-content:center; } .filter-btn{ background: var(--white); border: 1px solid var(--line); padding: 9px 18px; border-radius: 100px; font-weight:600; font-size:0.88rem; color: var(--steel); transition: all .15s; } .filter-btn:hover{ border-color: var(--copper); color: var(--copper-dark); } .filter-btn.active{ background: var(--ink); border-color: var(--ink); color: var(--white); } .lightbox{ position:fixed; inset:0; background: rgba(18,33,58,0.92); z-index: 1000; display:none; align-items:center; justify-content:center; padding: 40px; } .lightbox[data-open="true"]{ display:flex; } .lightbox img{ max-width: 92vw; max-height: 85vh; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); } .lightbox-close{ position:absolute; top:24px; right:24px; background: var(--white); border-radius:50%; width:44px; height:44px; display:flex; align-items:center; justify-content:center; } .lightbox-close svg{ width:20px; height:20px; } @media (max-width: 560px){ .lightbox{ padding: 20px; } .lightbox-close{ top:14px; right:14px; width:40px; height:40px; } } /* ---------- CTA band ---------- */ .cta-band{ background: linear-gradient(120deg, var(--copper) 0%, var(--copper-dark) 100%); color: var(--white); border-radius: var(--radius-lg); padding: 56px; display:flex; align-items:center; justify-content:space-between; gap: 32px; flex-wrap:wrap; } .cta-band h2{ color: var(--white); font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 8px; } .cta-band p{ color: rgba(255,255,255,0.9); } .cta-band .btn-outline{ color: var(--white); border-color: rgba(255,255,255,0.6); } .cta-band .btn-outline:hover{ background: var(--white); color: var(--copper-dark); } @media (max-width: 640px){ .cta-band{ padding: 30px 22px; } } @media (max-width: 420px){ .cta-band{ padding: 26px 18px; flex-direction:column; align-items:flex-start; } .cta-band .btn-outline{ width:100%; } } /* ---------- Forms ---------- */ .form-card{ background: var(--white); border:1px solid var(--line); border-radius: var(--radius-lg); padding: 34px; box-shadow: var(--shadow-md); } @media (max-width: 560px){ .form-card{ padding: 22px; } } .form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 560px){ .form-row{ grid-template-columns: 1fr; } } .field{ margin-bottom: 18px; } .field label{ display:block; font-weight:700; font-size:0.88rem; margin-bottom:7px; } .field .req{ color: var(--copper); } .field input, .field textarea, .field select{ width:100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); transition: border-color .15s, background .15s; } .field input:focus, .field textarea:focus, .field select:focus{ border-color: var(--copper); background: var(--white); outline:none; } .field textarea{ resize: vertical; min-height: 120px; } .field small.hint{ display:block; margin-top:6px; color: var(--steel); font-size:0.8rem; } .field-error{ color: #B4232A; font-size: 0.8rem; margin-top: 6px; display:none; } .field.invalid input, .field.invalid textarea, .field.invalid select{ border-color: #B4232A; } .field.invalid .field-error{ display:block; } .checkbox-row{ display:flex; align-items:flex-start; gap:10px; margin-bottom:20px; } .checkbox-row input{ width:auto; margin-top:4px; flex-shrink:0; } .checkbox-row label{ font-weight:500; font-size:0.88rem; color: var(--steel); } .form-status{ margin-top:16px; padding:14px 16px; border-radius: var(--radius-sm); font-size:0.9rem; font-weight:600; display:none; } .form-status.show{ display:block; } .form-status.ok{ background: #E6F3EB; color: var(--success); } .form-status.err{ background: #FBEAEA; color:#B4232A; } /* ---------- FAQ accordion ---------- */ .faq-list{ display:flex; flex-direction:column; gap: 12px; } .faq-item{ background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); overflow:hidden; } .faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding: 18px 22px; background: none; border: none; text-align:left; font-family: var(--font-display); font-weight:700; font-size: 1.02rem; color: var(--ink); } .faq-q svg{ width:20px; height:20px; color: var(--copper); flex-shrink:0; transition: transform .2s; } .faq-item[data-open="true"] .faq-q svg{ transform: rotate(45deg); } .faq-a{ max-height:0; overflow:hidden; transition: max-height .25s ease; } .faq-item[data-open="true"] .faq-a{ max-height: 400px; } .faq-a-inner{ padding: 0 22px 20px; color: var(--steel); font-size: 0.96rem; } @media (max-width: 560px){ .faq-q{ padding: 16px 18px; font-size:0.96rem; } .faq-a-inner{ padding: 0 18px 18px; } } /* ---------- Sidebar (service pages) ---------- */ .service-layout{ display:grid; grid-template-columns: 2.1fr 1fr; gap: 56px; align-items:start; } @media (max-width: 900px){ .service-layout{ grid-template-columns: 1fr; } } .service-sidebar{ position: sticky; top: 96px; display:flex; flex-direction:column; gap: 20px; } @media (max-width: 900px){ .service-sidebar{ position:static; } } .sidebar-card{ background: var(--white); border:1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; } .sidebar-card h4{ font-size:1rem; margin-bottom:14px; } .sidebar-list a{ display:flex; align-items:center; justify-content:space-between; padding: 10px 0; border-bottom:1px solid var(--line); font-weight:600; font-size:0.92rem; color: var(--ink); } .sidebar-list a:last-child{ border-bottom:none; } .sidebar-list a:hover{ color: var(--copper-dark); } .sidebar-list a.current{ color: var(--copper-dark); } .sidebar-emergency{ background: var(--ink); color: var(--white); text-align:center; } .sidebar-emergency p{ color: var(--steel-light); font-size:0.85rem; margin: 8px 0 14px; } .sidebar-emergency .phone-big{ font-family: var(--font-mono); font-size:1.3rem; font-weight:700; color: var(--amber); display:block; margin-bottom:14px; } .prose h2{ font-size: clamp(1.35rem, 3vw, 1.6rem); margin: 40px 0 14px; } .prose h2:first-child{ margin-top:0; } .prose h3{ font-size: 1.2rem; margin: 26px 0 10px; } .prose p{ margin-bottom: 16px; color: var(--ink); } .prose ul{ margin: 0 0 20px 0; display:flex; flex-direction:column; gap:10px; } .prose ul li{ display:flex; align-items:flex-start; gap:10px; color: var(--ink); } .prose ul li svg{ width:18px; height:18px; color: var(--copper); flex-shrink:0; margin-top:3px; } .prose img{ border-radius: var(--radius-md); margin: 24px 0; box-shadow: var(--shadow-sm); width:100%; height:auto; } .pricing-table{ width:100%; border-collapse:collapse; margin: 20px 0 28px; font-size:0.94rem; display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; } .pricing-table th, .pricing-table td{ text-align:left; padding: 12px 14px; border-bottom:1px solid var(--line); white-space:nowrap; } .pricing-table th{ background: var(--paper-2); font-family: var(--font-display); } .pricing-table td:last-child, .pricing-table th:last-child{ text-align:right; font-family: var(--font-mono); font-weight:600; } /* ---------- Breadcrumb ---------- */ .breadcrumb{ padding: 18px 0; font-size: 0.85rem; color: var(--steel); background: var(--paper-2); border-bottom:1px solid var(--line); } .breadcrumb .container{ display:flex; flex-wrap:wrap; align-items:center; } .breadcrumb a{ color: var(--steel); font-weight:600; } .breadcrumb a:hover{ color: var(--copper-dark); } .breadcrumb span.sep{ margin: 0 8px; color: var(--steel-light); } .breadcrumb span.current{ color: var(--ink); font-weight:600; } /* ---------- Page hero (interior pages) ---------- */ .page-hero{ background: var(--ink); background-image: linear-gradient(180deg, rgba(18,33,58,0.95), rgba(18,33,58,0.98)), repeating-linear-gradient(0deg, rgba(255,255,255,0.045) 0, rgba(255,255,255,0.045) 1px, transparent 1px, transparent 40px), repeating-linear-gradient(90deg, rgba(255,255,255,0.045) 0, rgba(255,255,255,0.045) 1px, transparent 1px, transparent 40px); color: var(--white); padding: 56px 0 64px; } @media (max-width: 640px){ .page-hero{ padding: 40px 0 44px; } } .page-hero h1{ color: var(--white); font-size: clamp(1.7rem, 4vw, 2.9rem); max-width: 760px; word-wrap:break-word; } .page-hero p{ color: var(--steel-light); font-size: clamp(0.98rem, 2vw, 1.08rem); max-width: 640px; margin-top: 14px; } .page-hero .hero-actions{ margin-top:26px; margin-bottom:0; } /* ---------- Stats strip ---------- */ .stats-strip{ display:grid; grid-template-columns: repeat(4,1fr); gap: 20px; } @media (max-width: 768px){ .stats-strip{ grid-template-columns: repeat(2,1fr); } } .stat-item{ text-align:center; padding: 20px; } .stat-item strong{ display:block; font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.2rem); color: var(--copper); } .stat-item span{ font-size:0.88rem; color: var(--steel); } .band-dark .stat-item strong{ color: var(--copper-light); } .band-dark .stat-item span{ color: var(--steel-light); } /* ---------- Area / map ---------- */ .area-grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items:center; } @media (max-width: 900px){ .area-grid{ grid-template-columns:1fr; } } .area-list{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; margin-top: 20px; } .area-list li{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:0.94rem; } .area-list li svg{ width:16px; height:16px; color: var(--copper); flex-shrink:0; } .map-frame{ border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-md); border: 1px solid var(--line); } .map-frame iframe{ width:100%; height: 380px; border:0; display:block; } @media (max-width: 560px){ .map-frame iframe{ height: 280px; } } /* ---------- Team ---------- */ .team-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 26px; } @media (max-width: 768px){ .team-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 560px){ .team-grid{ grid-template-columns: 1fr; } } .team-card{ background:var(--white); border:1px solid var(--line); border-radius: var(--radius-lg); overflow:hidden; text-align:center; } .team-card img{ width:100%; height: 260px; object-fit:cover; } .team-card .team-info{ padding: 20px; } .team-card h3{ font-size:1.08rem; margin-bottom:4px; } .team-card span.role{ color: var(--copper-dark); font-weight:600; font-size:0.85rem; } .team-card p{ color: var(--steel); font-size:0.88rem; margin-top:10px; } /* ---------- Values ---------- */ .value-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 22px; } @media (max-width: 900px){ .value-grid{ grid-template-columns: repeat(2,1fr); } } @media (max-width: 560px){ .value-grid{ grid-template-columns: 1fr; } } .value-card{ text-align:left; } .value-card .icon-badge{ width:52px; height:52px; border-radius: var(--radius-md); background: rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; margin-bottom:16px; } .value-card .icon-badge svg{ width:26px; height:26px; color: var(--copper-light); } .value-card h3{ color: var(--white); font-size:1.05rem; margin-bottom:8px; } .value-card p{ color: var(--steel-light); font-size:0.9rem; } /* ---------- Timeline (about) ---------- */ .timeline{ display:flex; flex-direction:column; gap: 0; border-left: 2px solid var(--line); margin-left: 10px; } .timeline-item{ position:relative; padding: 0 0 34px 30px; } .timeline-item::before{ content:''; position:absolute; left:-7px; top:2px; width:12px; height:12px; border-radius:50%; background: var(--copper); border: 3px solid var(--paper); } .timeline-item .yr{ font-family: var(--font-mono); font-weight:700; color: var(--copper-dark); font-size:0.85rem; } .timeline-item h3{ font-size:1.1rem; margin: 6px 0; } .timeline-item p{ color: var(--steel); font-size:0.92rem; } /* ---------- Footer ---------- */ .site-footer{ background: var(--ink); color: var(--steel-light); } .footer-top{ padding-top: 72px; padding-bottom: 48px; display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; } @media (max-width: 900px){ .footer-top{ grid-template-columns: 1fr 1fr; } } @media (max-width: 560px){ .footer-top{ grid-template-columns: 1fr; padding-top: 48px; padding-bottom: 32px; gap: 32px; } } .footer-brand p{ margin: 16px 0 20px; font-size:0.92rem; max-width: 320px; } .footer-social{ display:flex; gap:10px; } .footer-social a{ width:38px; height:38px; border-radius:50%; background: rgba(255,255,255,0.07); display:flex; align-items:center; justify-content:center; transition: background .15s; flex-shrink:0; } .footer-social a:hover{ background: var(--copper); } .footer-social svg{ width:17px; height:17px; color: var(--white); } .footer-col h4{ color: var(--white); font-size:0.98rem; margin-bottom: 18px; } .footer-col ul{ display:flex; flex-direction:column; gap:11px; } .footer-col a{ font-size:0.9rem; transition: color .15s; } .footer-col a:hover{ color: var(--copper-light); } .footer-contact li{ display:flex; align-items:flex-start; gap:10px; font-size:0.9rem; margin-bottom:14px; } .footer-contact svg{ width:17px; height:17px; color: var(--copper-light); flex-shrink:0; margin-top:2px; } .footer-badges{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; } .footer-badges span{ font-family: var(--font-mono); font-size:0.7rem; border:1px solid var(--line-dark); padding:5px 9px; border-radius:5px; } .footer-bottom{ border-top: 1px solid var(--line-dark); padding-top: 22px; padding-bottom: 22px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:0.84rem; } .footer-bottom a{ font-weight:600; color: var(--copper-light); } .footer-legal{ display:flex; gap:18px; flex-wrap:wrap; } /* ---------- Footer credit ---------- */ .footer-credit{ text-align:center; padding: 14px 24px; font-size: 0.78rem; color: var(--steel-light); background: rgba(0,0,0,0.15); border-top: 1px solid var(--line-dark); } .footer-credit a{ color: var(--copper-light); font-weight:700; } .footer-credit a:hover{ text-decoration: underline; } /* ---------- Misc ---------- */ .badge-pill{ display:inline-flex; align-items:center; gap:6px; background: var(--paper-2); color: var(--copper-dark); font-family: var(--font-mono); font-size:0.72rem; font-weight:600; padding:5px 11px; border-radius:100px; text-transform:uppercase; letter-spacing:0.04em; } .two-col{ display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items:center; } @media (max-width: 900px){ .two-col{ grid-template-columns:1fr; gap: 32px; } } .two-col img{ border-radius: var(--radius-lg); box-shadow: var(--shadow-md); width:100%; height: 440px; object-fit:cover; } @media (max-width: 560px){ .two-col img{ height: 260px; } } .check-list{ display:flex; flex-direction:column; gap:12px; margin: 22px 0; } .check-list li{ display:flex; align-items:center; gap:10px; font-weight:600; } .check-list li svg{ width:20px; height:20px; color: var(--success); flex-shrink:0; } .back-to-top{ position:fixed; bottom:26px; right:26px; width:48px; height:48px; border-radius:50%; background: var(--ink); color:var(--white); display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-md); opacity:0; visibility:hidden; transition: opacity .2s, visibility .2s, transform .15s; z-index: 400; } .back-to-top.show{ opacity:1; visibility:visible; } .back-to-top:hover{ transform: translateY(-3px); background: var(--copper); } .back-to-top svg{ width:20px; height:20px; } @media (max-width: 720px){ .back-to-top{ bottom: 74px; right: 16px; width:44px; height:44px; } } .sticky-call-mobile{ display:none; } @media (max-width: 720px){ .sticky-call-mobile{ display:flex; position:fixed; bottom:0; left:0; right:0; z-index: 450; gap:0; box-shadow: 0 -6px 20px rgba(18,33,58,0.18); padding-bottom: env(safe-area-inset-bottom, 0); } .sticky-call-mobile a{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:15px 10px; font-weight:700; font-size:0.92rem; } .sticky-call-mobile a.call{ background: var(--copper); color:var(--white); } .sticky-call-mobile a.book{ background: var(--amber); color: var(--ink); } .sticky-call-mobile svg{ width:18px; height:18px; flex-shrink:0; } body{ padding-bottom: 58px; } } .animate-in{ opacity:0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; } .animate-in.in-view{ opacity:1; transform: translateY(0); } .not-found{ text-align:center; padding: 120px 24px; } .not-found h1{ font-size: 6rem; color: var(--copper); } .not-found p{ color: var(--steel); font-size:1.1rem; margin: 14px 0 28px; } /* ---------- Extra small mobile refinements (<=380px) ---------- */ @media (max-width: 380px){ .hero h1{ font-size: 1.9rem; } .hero p.lede{ font-size: 1.02rem; } .btn{ padding: 13px 20px; font-size:0.92rem; } .stats-strip{ grid-template-columns: 1fr 1fr; gap:10px; } .value-grid, .team-grid, .review-grid{ grid-template-columns: 1fr; } }