@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500..800&display=swap'); /* ============================================================ EXPLOSION HOME SOLUTIONS LLC — SHARED DESIGN SYSTEM Version: 2.0 | Updated: 2026 ============================================================ */ /* ---- Google Fonts preload handled in HTML ---- */ :root { --ink-soft: #2d3b4a; --surface-warm: #f2ebd9; --ink: #0F172A; /* Navy */ --ink2: #1E293B; /* Slate */ --ink-soft: #334155; /* Slate Light */ --clay: #F59E0B; /* Terracotta */ --clay-light: #FEF3C7;/* Terracotta Light */ --gold: #F59E0B; /* Rust Accent */ --surface: #ffffff; /* Surface (Cards) */ --paper: #FFFFFF; /* Base background */ --mist: #F8FAFC; /* Mist */ --line: #cbd5e1; /* Lines */ --muted: #64748b; /* Muted text */ --r-lg: 22px; --r-md: 14px; --r-sm: 9px; } /* ---- Reset & Base ---- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); color: var(--ink); font-family: Manrope, sans-serif; line-height: 1.55; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: Fraunces, serif; line-height: 1.02; letter-spacing: -.01em; margin: 0; } a { color: inherit; text-decoration: none; } img { max-width: 100%; } ul, ol { padding: 0; margin: 0; list-style: none; } /* ---- Layout ---- */ .wrap { width: min(1200px, calc(100% - 44px)); margin: auto; } section { padding: 100px 0; } /* ---- Typography Utilities ---- */ .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--clay); } .eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--clay); display: inline-block; } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; gap: 9px; padding: 15px 24px; border-radius: 16px; font-weight: 800; font-size: .88rem; border: 0; cursor: pointer; transition: .25s; white-space: nowrap; font-family: Manrope, sans-serif; transition: transform 0.25s ease, background 0.25s ease, opacity 0.25s ease; } .btn-clay { background: var(--clay); color: var(--surface); box-shadow: 0 10px 24px -6px #c1531f66; } .btn-clay:hover { background: #a8461a; transform: translateY(-2px); } .btn-ink { background: var(--ink); color: var(--surface); } .btn-ink:hover { background: var(--ink2); transform: translateY(-2px); } .btn-ghost { background: transparent; border: 1.5px solid #d7c3ab; color: var(--ink); } .btn-ghost:hover { border-color: var(--clay); color: var(--clay); } .btn-light { background: var(--surface); color: var(--ink); } .btn-teal { background: var(--teal); color: var(--surface); } .btn-teal:hover { background: #0a5a50; transform: translateY(-2px); } /* ---- Icon ---- */ .icon { width: 1em; height: 1em; display: inline-block; vertical-align: -.12em; } /* ---- Pulse dot ---- */ .pulse { width: 7px; height: 7px; border-radius: 50%; background: #3ddc97; box-shadow: 0 0 0 0 #3ddc9766; animation: pulse 2.2s infinite; flex-shrink: 0; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 #3ddc9755; } 70% { box-shadow: 0 0 0 6px #3ddc9700; } 100% { box-shadow: 0 0 0 0 #3ddc9700; } } /* ============================================================ TOPBAR ============================================================ */ .topbar { background: #0F172A; color: #94A3B8; font-size: 0.85rem; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.05); } .topbar .wrap { height: 40px; display: flex; align-items: center; justify-content: space-between; } .topbar .status { display: flex; align-items: center; gap: 8px; font-weight: 600; } .topbar .langs { display: flex; gap: 8px; } .topbar .langs a { background: rgba(253, 252, 249, 0.08); padding: 4px 10px; border-radius: 16px; font-weight: 800; font-size: .7rem; color: var(--surface); transition: .2s; } .topbar .langs a:hover { background: rgba(253, 252, 249, 0.15); } /* ============================================================ NAVIGATION ============================================================ */ .navwrap { position: sticky; top: 0; z-index: 100; background: rgba(15,23,42,0.95); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,0.1); } .navwrap.scrolled { box-shadow: 0 4px 20px #0b254018; } .nav { height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .brand { display: flex; align-items: center; gap: 11px; } .brand-mark { width: 44px; height: 44px; border-radius: 16px; background: var(--ink); position: relative; flex-shrink: 0; } .brand-mark svg { position: absolute; inset: 0; margin: auto; width: 24px; height: 24px; } .brand-name { font-family: Fraunces, serif; font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em; } .brand-sub { font-size: .6rem; color: var(--muted); letter-spacing: .16em; text-transform: uppercase; font-weight: 700; } .nav-links { display: flex; align-items: center; gap: 28px; font-size: .87rem; font-weight: 700; color: var(--ink-soft); } .nav-links a { position: relative; padding: 4px 0; transition: color .2s; } .nav-links a:hover { color: var(--clay); } .nav-links a.active { color: var(--clay); } .nav-links a.active::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: var(--clay); border-radius: 16px; } /* Dropdown */ .nav-dropdown { position: relative; } .nav-dropdown-menu { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%); background: var(--surface); border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-md); padding: 10px 0; min-width: 220px; box-shadow: 0 20px 40px -10px #0b254030; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; transform: translateX(-50%) translateY(-6px); z-index: 50; } .nav-dropdown-menu::before { content: ''; position: absolute; top: -20px; left: 0; width: 100%; height: 20px; } .nav-dropdown:hover .nav-dropdown-menu { opacity: 1; pointer-events: all; transform: translateX(-50%) translateY(0); } .nav-dropdown-menu a { display: block; padding: 9px 18px; font-size: .85rem; font-weight: 700; color: var(--ink-soft); transition: .15s; } .nav-dropdown-menu a:hover { background: var(--mist); color: var(--clay); } .nav-dropdown > a::after { content: ' ▾'; font-size: .65em; } .nav-right { display: flex; align-items: center; gap: 18px; } .nav-phone { display: flex; flex-direction: column; font-size: .78rem; line-height: 1.2; } .nav-phone b { font-size: .95rem; } .burger { display: none; background: none; border: 0; font-size: 1.6rem; color: var(--ink); cursor: pointer; padding: 4px 8px; } /* Mobile nav panel */ .mobile-nav-panel { position: fixed; top:0; right:-100%; width: 100%; max-width: 360px; height: 100vh; background: #0F172A; z-index: 999; padding: 30px; transition: right 0.3s ease; box-shadow: -10px 0 30px rgba(0,0,0,0.2); overflow-y:auto; color: #FFF; display: flex; flex-direction: column; } .mobile-nav-panel.open { right: 0; } .mobile-nav-close { position: absolute; top: 30px; right: 30px; background: none; border: 0; color: var(--surface); font-size: 1.8rem; cursor: pointer; z-index: 10; } .mobile-nav-links { display: flex; flex-direction: column; gap: 0; margin-top: 20px; } .mobile-nav-links a { color: var(--surface); font-size: 1.2rem; font-weight: 700; padding: 16px 0; border-bottom: 1px solid rgba(253, 252, 249, 0.08); font-family: Fraunces, serif; } .mobile-nav-links a:hover { color: var(--gold); } .mobile-nav-ctas { display: none; } /* Hide redundant CTAs inside menu */ .mobile-nav-ctas .btn { justify-content: center; width: 100%; transition: transform 0.25s ease, background 0.25s ease, opacity 0.25s ease; } .mobile-nav-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } .mobile-nav-logo .brand-name { color: var(--surface); font-size: 1.3rem; } .mobile-nav-logo .brand-sub { color: #8fa4b8; } /* ============================================================ HERO (Homepage) ============================================================ */ .hero { position: relative; overflow: hidden; background: radial-gradient(circle at 85% 20%, #f5e8d6 0%, var(--paper) 55%); } .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; padding: 64px 0 40px; position: relative; } .hero h1 { font-size: clamp(2.9rem, 5vw, 4.4rem); margin: 22px 0 20px; color: var(--ink); } .hero h1 .accent { color: var(--clay); font-style: italic; } .hero p.lead { font-size: 1.13rem; color: var(--ink-soft); max-width: 500px; margin: 0 0 32px; } .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 44px; } .stat-row { display: flex; gap: 0; border-top: 1px solid #d9c9b2; } .stat { padding: 20px 26px 4px; border-right: 1px solid #d9c9b2; } .stat:first-child { padding-left: 0; } .stat b { display: block; font-family: Fraunces, serif; font-size: 1.9rem; color: var(--ink); } .stat span { font-size: .68rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; } .hero-visual { position: relative; height: 530px; } .hero-photo { position: absolute; inset: 26px 0 0 8%; border-radius: 16px; overflow: hidden; box-shadow: 0 40px 70px -30px #0b254055; } .hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .badge-float { position: absolute; background: var(--surface); border-radius: 16px; box-shadow: 0 20px 44px -14px #0b254040; padding: 14px 16px; display: flex; gap: 11px; align-items: center; } .badge-float.top { top: 0; right: 24px; } .badge-float.bottom { left: -18px; bottom: 34px; max-width: 250px; align-items: flex-start; } .badge-icon { width: 38px; height: 38px; border-radius: 16px; flex-shrink: 0; display: grid; place-items: center; color: var(--surface); } .b-teal { background: var(--teal); } .b-clay { background: var(--clay); } .b-gold { background: var(--gold); } .badge-float b { font-size: .82rem; display: block; } .badge-float span { font-size: .7rem; color: var(--muted); } .review-stars { color: var(--gold); font-size: .85rem; margin-bottom: 6px; display: flex; gap: 2px; } /* ============================================================ PAGE HERO (Inner pages — slimmer) ============================================================ */ .page-hero { background: var(--ink); color: var(--surface); padding: 56px 0 52px; position: relative; overflow: hidden; } .page-hero::before { content: ''; position: absolute; top: -60px; right: -80px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(253, 252, 249, 0.03), transparent 70%); border-radius: 50%; } .page-hero .eyebrow { color: var(--gold); } .page-hero .eyebrow::before { background: var(--gold); } .page-hero h1 { color: var(--surface); font-size: clamp(2rem, 4vw, 3rem); margin: 14px 0 16px; } .page-hero p.lead { color: #b9cadb; font-size: 1.05rem; max-width: 560px; margin: 0 0 28px; } .page-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; } /* Breadcrumb */ .breadcrumb { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; color: #8fa4b8; margin-bottom: 16px; flex-wrap: wrap; } .breadcrumb a { color: #8fa4b8; transition: color .2s; } .breadcrumb a:hover { color: var(--gold); } .breadcrumb .sep { opacity: .4; } .breadcrumb .current { color: var(--surface); } /* ============================================================ TRUST STRIP ============================================================ */ .trust { background: var(--ink); color: #e8eef4; } .trust .wrap { display: grid; grid-template-columns: repeat(4, 1fr); padding: 26px 0; } .trust-item { display: flex; align-items: center; gap: 12px; font-size: .82rem; font-weight: 700; border-right: 1px solid rgba(253, 252, 249, 0.10); padding: 0 18px; } .trust-item:last-child { border: 0; } .trust-item .ic { color: var(--gold); flex-shrink: 0; } /* ============================================================ SECTION HEAD ============================================================ */ .section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 52px; } .section-head h2 { font-size: clamp(2.1rem, 3.6vw, 2.9rem); } .section-head p { color: var(--muted); max-width: 420px; margin-top: 12px; } /* ============================================================ SERVICES SECTION ============================================================ */ .services { background: linear-gradient(180deg, var(--surface), var(--paper)); } .service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .service-card { background: var(--surface); border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-lg); padding: 32px 28px; position: relative; transition: .3s; } .service-card:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -24px #0b254030; border-color: transparent; } .s-icon { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 22px; color: var(--surface); } .i1 { background: linear-gradient(135deg, #155e5a, #0f6e63); } .i2 { background: linear-gradient(135deg, #c1531f, #e0742f); } .i3 { background: linear-gradient(135deg, #0b2540, #123863); } .service-card h3 { font-size: 1.32rem; margin-bottom: 9px; } .service-card p { color: var(--muted); font-size: .9rem; margin-bottom: 20px; } .service-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 22px; } .service-tags span { font-size: .68rem; font-weight: 700; background: var(--mist); color: var(--ink-soft); padding: 5px 10px; border-radius: 16px; } .svc-link { font-weight: 800; font-size: .83rem; display: inline-flex; align-items: center; gap: 7px; color: var(--ink); } .service-card:hover .svc-link { color: var(--clay); } /* ============================================================ WHY US ============================================================ */ .why { background: var(--ink); color: var(--surface); } .why .section-head h2, .why .section-head p { color: var(--surface); } .why .section-head p { color: #adc0d1; } .why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .why-card { transition: transform 0.3s ease, background 0.3s ease; background: rgba(253, 252, 249, 0.05); border: 1px solid rgba(253, 252, 249, 0.12); border-radius: var(--r-md); padding: 26px 22px; } .why-icon { width: 44px; height: 44px; border-radius: 16px; background: var(--gold); color: var(--ink); display: grid; place-items: center; margin-bottom: 18px; } .why-card h3 { font-family: Manrope, sans-serif; font-size: 1.02rem; font-weight: 800; margin-bottom: 8px; } .why-card p { font-size: .85rem; color: #b9cadb; margin: 0; } /* ============================================================ PROCESS / TIMELINE ============================================================ */ .process { background: var(--paper); color: var(--ink); } .timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; margin-top: 20px; } .timeline::before { content: ''; position: absolute; top: 26px; left: 5%; right: 5%; height: 2px; background: repeating-linear-gradient(90deg, #d9c9b2 0 8px, transparent 8px 16px); } .tl-step { position: relative; padding-right: 20px; } .tl-num { width: 52px; height: 52px; border-radius: 50%; background: var(--surface); border: 2px solid var(--clay); color: var(--clay); display: grid; place-items: center; font-family: Fraunces, serif; font-weight: 700; font-size: 1.15rem; margin-bottom: 22px; position: relative; z-index: 2; } .tl-step h3 { font-size: 1.05rem; font-family: Manrope, sans-serif; font-weight: 800; margin-bottom: 8px; } .tl-step p { font-size: .85rem; color: var(--muted); margin: 0; } /* ============================================================ OFFERS / PRICING ============================================================ */ .offers { background: var(--surface); } .offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .offer-card { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-lg); padding: 34px 28px; position: relative; display: flex; flex-direction: column; } .offer-card.feat { background: var(--ink); color: var(--surface); border-color: var(--ink); transform: scale(1.02); } .offer-tag { position: absolute; top: -13px; left: 28px; background: var(--gold); color: var(--ink); font-size: .68rem; font-weight: 800; padding: 5px 13px; border-radius: 16px; text-transform: uppercase; letter-spacing: .05em; } .offer-card h3 { font-size: 1.4rem; margin-bottom: 6px; } .offer-card > p.desc { color: var(--muted); font-size: .87rem; margin-bottom: 22px; } .offer-card.feat p.desc { color: #c1d0dc; } .price-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 5px; } .price { font-family: Fraunces, serif; font-size: 2.6rem; font-weight: 700; } .was { color: #b2b8bd; text-decoration: line-through; font-size: 1.1rem; } .offer-card.feat .was { color: rgba(253, 252, 249, 0.33); } .save { color: var(--teal); font-weight: 800; font-size: .83rem; margin-bottom: 22px; } .offer-card.feat .save { color: var(--gold); } .offer-list { list-style: none; padding: 0; margin: 0 0 26px; flex: 1; display: flex; flex-direction: column; gap: 11px; font-size: .87rem; } .offer-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-soft); } .offer-card.feat .offer-list li { color: #dbe6ee; } .offer-list .chk { color: var(--teal); flex-shrink: 0; margin-top: 2px; } .offer-card.feat .offer-list .chk { color: var(--gold); } /* ============================================================ REVIEWS ============================================================ */ .reviews { background: var(--mist); } .review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .review-card { transition: transform 0.3s ease, box-shadow 0.3s ease; background: var(--surface); border-radius: var(--r-md); padding: 28px; border: 1px solid var(--line); background: var(--surface); } .review-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } .review-card p.txt { font-size: .9rem; color: var(--ink-soft); font-style: italic; margin: 0 0 20px; } .reviewer { display: flex; align-items: center; gap: 11px; padding-top: 16px; border-top: 1px solid var(--line); } .avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--surface); font-weight: 800; font-size: .8rem; flex-shrink: 0; } .reviewer b { display: block; font-size: .85rem; } .reviewer span { font-size: .74rem; color: var(--muted); } .review-source { font-size: .7rem; color: var(--muted); display: flex; align-items: center; gap: 4px; } /* ============================================================ SERVICE AREAS ============================================================ */ .areas { background: var(--surface); } .areas-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: center; } .area-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .area-card { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-sm); padding: 16px 18px; display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: .9rem; transition: .2s; } .area-card:hover { border-color: var(--clay); background: var(--clay-light); } .area-card .pin { color: var(--clay); flex-shrink: 0; } /* ============================================================ FAQ ACCORDION ============================================================ */ .faq { background: var(--paper); color: var(--ink); } .faq-list { max-width: 760px; margin: 0 auto; } .faq-item { border-bottom: 1px solid var(--line); padding: 22px 0; } .faq-q { display: flex; justify-content: space-between; align-items: center; font-weight: 800; cursor: pointer; font-size: 1rem; gap: 16px; user-select: none; } .faq-q:focus { outline: 2px solid var(--clay); outline-offset: 4px; border-radius: 16px; } .faq-q .plus { font-size: 1.3rem; color: var(--clay); transition: .25s; flex-shrink: 0; } .faq-item.open .plus { transform: rotate(45deg); } .faq-a { display: none; color: var(--muted); font-size: .9rem; margin-top: 12px; max-width: 640px; line-height: 1.7; } .faq-item.open .faq-a { display: block; } /* ============================================================ CTA BAND ============================================================ */ .cta-band { background: var(--clay); color: var(--surface); text-align: center; padding: 80px 0; } .cta-band h2 { color: var(--surface); font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin-bottom: 16px; } .cta-band p { color: #ffe3cf; margin-bottom: 28px; } .cta-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; } /* ============================================================ CONTACT SECTION ============================================================ */ .contact { background: var(--ink); color: var(--surface); } .contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; } .contact .section-head h2, .contact .section-head p, .contact h2 { color: var(--surface); } .contact .section-head p, .contact p { color: #b9cadb; } .contact-line { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 22px; } .contact-line .ic { width: 38px; height: 38px; border-radius: 16px; background: rgba(253, 252, 249, 0.08); display: grid; place-items: center; color: var(--gold); flex-shrink: 0; } .contact-line b { display: block; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: #9db3c6; margin-bottom: 3px; } .contact-line span, .contact-line a { font-size: .95rem; font-weight: 700; } .form-card { background: var(--surface); color: var(--ink); border-radius: var(--r-lg); padding: 32px; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .field { display: flex; flex-direction: column; gap: 7px; font-size: .7rem; font-weight: 800; letter-spacing: .05em; color: var(--ink-soft); } .field.full { grid-column: 1/-1; } input, select, textarea { font: inherit; font-size: 16px; border: 1.5px solid var(--line); border-radius: 16px; padding: 12px 13px; color: var(--ink); background: #fbf7ef; transition: border-color .2s ease, box-shadow .2s ease; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.15); } textarea { resize: vertical; min-height: 82px; } .form-card .btn { width: 100%; justify-content: center; margin-top: 6px; border: 0; transition: transform 0.25s ease, background 0.25s ease, opacity 0.25s ease; } .form-status { display: none; text-align: center; color: var(--teal); font-weight: 800; font-size: .85rem; margin-top: 12px; } .form-note { font-size: .74rem; color: var(--muted); margin-top: 10px; text-align: center; } /* ============================================================ FOOTER ============================================================ */ footer { background: #071b30; color: #8fa4b8; padding: 60px 0 100px; font-size: .85rem; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 40px; margin-bottom: 40px; } .footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .footer-brand b { color: var(--surface); font-family: Fraunces, serif; font-size: 1.1rem; } footer p { margin: 0 0 12px; line-height: 1.7; } footer h4 { color: var(--surface); font-family: Manrope, sans-serif; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 16px; } footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } footer a:hover { color: var(--surface); } .footer-bottom { border-top: 1px solid rgba(253, 252, 249, 0.10); padding-top: 24px; display: flex; justify-content: space-between; font-size: .78rem; flex-wrap: wrap; gap: 10px; } .footer-badges { display: flex; gap: 10px; flex-wrap: wrap; } .footer-badge { background: rgba(253, 252, 249, 0.05); border: 1px solid rgba(253, 252, 249, 0.08); border-radius: 16px; padding: 6px 12px; font-size: .72rem; font-weight: 700; color: #8fa4b8; } /* ============================================================ MOBILE FIXED CTA ============================================================ */ .mobile-cta { display: none; } /* ============================================================ SERVICE DETAIL PAGE STYLES ============================================================ */ .service-detail { background: var(--paper); color: var(--ink); } .service-detail-grid { display: grid; grid-template-columns: 1fr 340px; gap: 52px; align-items: start; } .prose h2 { font-size: 1.9rem; margin: 0 0 16px; } .prose h3 { font-size: 1.25rem; margin: 32px 0 12px; color: var(--ink); } .prose p { color: var(--ink-soft); margin: 0 0 20px; line-height: 1.75; } .prose ul { display: flex; flex-direction: column; gap: 10px; margin: 0 0 24px; } .prose ul li { display: flex; gap: 10px; color: var(--ink-soft); font-size: .95rem; } .prose ul li::before { content: '→'; color: var(--clay); font-weight: 800; flex-shrink: 0; } /* Sticky sidebar */ .sidebar { position: sticky; top: 100px; } .sidebar-card { background: var(--surface); border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-lg); padding: 28px; margin-bottom: 20px; } .sidebar-card h3 { font-size: 1.1rem; margin-bottom: 16px; } .sidebar-card .btn { width: 100%; justify-content: center; margin-bottom: 10px; transition: transform 0.25s ease, background 0.25s ease, opacity 0.25s ease; } .sidebar-card p { font-size: .84rem; color: var(--muted); margin: 0; } .sidebar-highlight { background: var(--ink); color: var(--surface); border-color: var(--ink); } .sidebar-highlight h3, .sidebar-highlight p { color: var(--surface); } .sidebar-highlight p { color: #b9cadb; } /* Service feature list */ .feature-list { display: flex; flex-direction: column; gap: 16px; margin: 32px 0; } .feature-item { display: flex; gap: 16px; align-items: flex-start; padding: 20px; background: var(--surface); border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); } .feature-item .fi-icon { width: 44px; height: 44px; border-radius: 16px; display: grid; place-items: center; flex-shrink: 0; color: var(--surface); } .feature-item h4 { font-family: Manrope, sans-serif; font-size: .95rem; font-weight: 800; margin-bottom: 4px; } .feature-item p { font-size: .85rem; color: var(--muted); margin: 0; } /* Before/after cards */ .before-after-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 32px 0; } .before-after-card { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); background: var(--surface); } .before-after-card img { width: 100%; height: 220px; object-fit: cover; display: block; } .before-after-label { padding: 12px 16px; background: var(--surface); font-weight: 800; font-size: .82rem; } .before-after-label.before { color: var(--muted); } .before-after-label.after { color: var(--teal); } /* ============================================================ CITY PAGE STYLES ============================================================ */ .city-hero { background: var(--ink); color: var(--surface); padding: 60px 0; } .city-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: center; } .neighborhood-section { background: var(--surface); } .neighborhood-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .neighborhood-tag { background: var(--mist); border-radius: var(--r-sm); padding: 12px 16px; font-weight: 700; font-size: .88rem; color: var(--ink-soft); display: flex; align-items: center; gap: 8px; } .neighborhood-tag::before { content: '📍'; font-size: .85em; } /* City service list */ .city-services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .city-service-item { background: var(--surface); border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-md); padding: 22px; display: flex; gap: 14px; align-items: flex-start; transition: .2s; } .city-service-item:hover { border-color: var(--clay); transform: translateY(-2px); box-shadow: 0 10px 30px -10px #0b254020; } .city-service-item .cs-icon { width: 42px; height: 42px; border-radius: 16px; display: grid; place-items: center; flex-shrink: 0; color: var(--surface); } .city-service-item h3 { font-size: .97rem; margin-bottom: 5px; } .city-service-item p { font-size: .83rem; color: var(--muted); margin: 0; } /* Local testimonial */ .local-testimonial { background: var(--clay-light); border-left: 4px solid var(--clay); border-radius: 0 var(--r-md) var(--r-md) 0; padding: 24px 28px; margin: 32px 0; } .local-testimonial p { font-style: italic; color: var(--ink-soft); font-size: .97rem; margin-bottom: 12px; } .local-testimonial .cred { font-weight: 800; font-size: .84rem; color: var(--ink); } .local-testimonial .disclaimer { font-size: .7rem; color: var(--muted); margin-top: 4px; } /* ============================================================ BLOG STYLES ============================================================ */ .blog-section { background: var(--paper); color: var(--ink); } .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .blog-card { background: var(--surface); border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-lg); overflow: hidden; transition: .3s; display: flex; flex-direction: column; } .blog-card:hover { transform: translateY(-5px); box-shadow: 0 24px 48px -18px #0b254028; border-color: transparent; } .blog-card-img { height: 200px; overflow: hidden; } .blog-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; } .blog-card:hover .blog-card-img img { transform: scale(1.05); } .blog-card-body { padding: 24px; flex: 1; display: flex; flex-direction: column; } .blog-cat { font-size: .67rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--clay); margin-bottom: 10px; } .blog-card h3 { font-size: 1.12rem; margin-bottom: 10px; line-height: 1.3; } .blog-card p { font-size: .87rem; color: var(--muted); flex: 1; margin-bottom: 18px; } .blog-meta { display: flex; align-items: center; gap: 10px; font-size: .75rem; color: var(--muted); font-weight: 700; } .blog-meta span { display: flex; align-items: center; gap: 4px; } /* Article prose */ .article-hero { background: var(--ink); color: var(--surface); padding: 60px 0 50px; } .article-hero h1 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); margin: 16px 0 18px; color: var(--surface); } .article-grid { display: grid; grid-template-columns: 1fr 300px; gap: 52px; align-items: start; padding: 64px 0; } .article-body h2 { font-size: 1.7rem; margin: 40px 0 14px; } .article-body h3 { font-size: 1.25rem; margin: 28px 0 10px; } .article-body p { color: var(--ink-soft); line-height: 1.8; margin: 0 0 20px; } .article-body ul, .article-body ol { display: flex; flex-direction: column; gap: 10px; margin: 0 0 24px; padding-left: 0; } .article-body ul li { display: flex; gap: 10px; color: var(--ink-soft); font-size: .95rem; } .article-body ul li::before { content: '✓'; color: var(--teal); font-weight: 800; flex-shrink: 0; } .article-body ol { counter-reset: item; } .article-body ol li { display: flex; gap: 12px; color: var(--ink-soft); } .article-body ol li::before { counter-increment: item; content: counter(item); color: var(--clay); font-weight: 800; font-family: Fraunces, serif; flex-shrink: 0; font-size: 1.1rem; } .article-body img { border-radius: var(--r-md); margin: 28px 0; width: 100%; } .callout { background: var(--clay-light); border-left: 4px solid var(--clay); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 20px 24px; margin: 28px 0; } .callout p { margin: 0; color: var(--ink-soft); font-size: .95rem; } .callout strong { color: var(--clay); } /* ============================================================ ABOUT PAGE ============================================================ */ .about-timeline { display: flex; flex-direction: column; gap: 0; position: relative; padding-left: 40px; } .about-timeline::before { content: ''; position: absolute; left: 12px; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--clay), var(--teal)); } .about-tl-item { position: relative; padding: 0 0 40px; } .about-tl-dot { position: absolute; left: -34px; width: 26px; height: 26px; border-radius: 50%; background: var(--clay); border: 3px solid var(--surface); box-shadow: 0 0 0 3px var(--clay); display: grid; place-items: center; } .about-tl-year { font-family: Fraunces, serif; font-weight: 700; font-size: .88rem; color: var(--clay); margin-bottom: 6px; } .about-tl-item h3 { font-size: 1.1rem; margin-bottom: 6px; } .about-tl-item p { color: var(--muted); font-size: .9rem; margin: 0; } .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .team-card { background: var(--surface); border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-lg); padding: 28px; text-align: center; } .team-avatar { width: 80px; height: 80px; border-radius: 50%; margin: 0 auto 16px; display: grid; place-items: center; font-family: Fraunces, serif; font-size: 1.8rem; color: var(--surface); } .team-card h3 { font-size: 1.1rem; margin-bottom: 4px; } .team-card .role { font-size: .8rem; color: var(--clay); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px; } .team-card p { font-size: .87rem; color: var(--muted); margin: 0; } /* ============================================================ REVIEWS PAGE ============================================================ */ .reviews-hero { background: var(--ink); color: var(--surface); padding: 60px 0; text-align: center; } .rating-summary { display: flex; justify-content: center; align-items: center; gap: 24px; margin-top: 28px; flex-wrap: wrap; } .rating-big { font-family: Fraunces, serif; font-size: 4.5rem; font-weight: 700; color: var(--gold); line-height: 1; } .rating-detail { text-align: left; } .rating-detail .stars-big { font-size: 1.8rem; color: var(--gold); letter-spacing: 2px; } /* ============================================================ 404 PAGE ============================================================ */ .not-found { min-height: 70vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 80px 0; } .not-found-num { font-family: Fraunces, serif; font-size: clamp(6rem, 15vw, 10rem); color: var(--clay); line-height: 1; margin-bottom: 16px; } .not-found h1 { font-size: 2rem; margin-bottom: 16px; } .not-found p { color: var(--muted); max-width: 440px; margin: 0 auto 32px; } /* ============================================================ PRIVACY POLICY ============================================================ */ .legal-content { max-width: 760px; margin: 0 auto; padding: 60px 0; } .legal-content h2 { font-size: 1.5rem; margin: 36px 0 12px; } .legal-content h3 { font-size: 1.15rem; margin: 24px 0 8px; } .legal-content p { color: var(--ink-soft); margin: 0 0 16px; line-height: 1.75; } .legal-content ul { display: flex; flex-direction: column; gap: 8px; margin: 0 0 20px; padding-left: 20px; list-style: disc; } .legal-content ul li { color: var(--ink-soft); font-size: .95rem; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 980px) { .nav-links, .nav-phone { display: none; } .burger { display: block; } .hero-grid { grid-template-columns: 1fr; padding-top: 40px; } .hero-visual { height: 380px; margin-top: 20px; } .badge-float.bottom { left: 0; } .trust .wrap { grid-template-columns: 1fr 1fr; } .trust-item:nth-child(2) { border-right: 0; } .trust-item:nth-child(4) { border-right: 0; } .service-grid, .review-grid, .offer-grid { grid-template-columns: 1fr 1fr; } .why-grid { grid-template-columns: 1fr 1fr; } .timeline { grid-template-columns: 1fr 1fr; row-gap: 36px; } .timeline::before { display: none; } .areas-grid, .contact-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } .city-hero-grid { grid-template-columns: 1fr; } .service-detail-grid { grid-template-columns: 1fr; } .sidebar { position: static; } .article-grid { grid-template-columns: 1fr; } .before-after-grid { grid-template-columns: 1fr; } .team-grid { grid-template-columns: 1fr 1fr; } .blog-grid { grid-template-columns: 1fr 1fr; } .neighborhood-grid { grid-template-columns: 1fr 1fr; } .city-services-grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { .topbar { display: none; } /* Hide cramped topbar, phones are in bottom CTA */ .nav-right .btn { display: none; } /* Hide top nav Free Estimate button */ .stat-row { flex-wrap: wrap; gap: 20px 0; } .stat { border-right: 0; padding-left: 0; width: 50%; padding-bottom: 10px; } .stat strong { font-size: 2rem; } .hero h1 { font-size: 2.2rem; line-height: 1.15; } .hero p { font-size: 1.05rem; } .hero-actions { display: flex; flex-direction: column; gap: 14px; } .hero-actions .btn-primary { display: none; } /* Hide hero CTA, rely on sticky bottom bar */ .hero-actions .btn { width: 100%; justify-content: center; } .service-grid, .review-grid, .offer-grid, .why-grid, .timeline, .area-list { grid-template-columns: 1fr; } .section-head { flex-direction: column; align-items: flex-start; } .offer-card.feat { transform: none; } .form-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; gap: 26px; } footer { padding-bottom: 110px !important; } .mobile-cta { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; box-shadow: 0 -6px 24px #0b254040; } .mobile-cta a { flex: 1; text-align: center; padding: 16px 8px; font-weight: 800; font-size: .85rem; font-family: Manrope, sans-serif; } .mobile-cta a:first-child { background: var(--ink); color: var(--surface); } .mobile-cta a:last-child { background: var(--clay); color: var(--surface); } section { padding: 50px 0; } .blog-grid { grid-template-columns: 1fr; } .neighborhood-grid { grid-template-columns: 1fr; } .team-grid { grid-template-columns: 1fr; } .cta-band { padding: 60px 0; } .page-hero { padding: 44px 0 40px; } } /* ============================================================ SERVICE DETAIL PAGES — 2-COLUMN LAYOUT ============================================================ */ .service-detail-grid { display: grid; grid-template-columns: 1fr 360px; gap: 48px; align-items: start; } .prose { font-size: 1rem; line-height: 1.7; color: var(--ink); } .prose h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 48px 0 16px; color: var(--ink); } .prose h3 { font-size: 1.15rem; margin: 28px 0 10px; color: var(--ink2); } .prose p { margin: 0 0 18px; } .prose ul { list-style: disc; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; } .prose ul li { color: var(--ink); } .prose a { color: var(--clay); } .blog-article h2 { margin-top: 44px; } /* Feature list (service pages) */ .feature-list { display: flex; flex-direction: column; gap: 20px; margin: 24px 0 36px; } .feature-item { display: flex; gap: 18px; align-items: flex-start; } .fi-icon { width: 46px; height: 46px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .feature-item h4 { font-size: 1rem; margin-bottom: 6px; } .feature-item p { font-size: .88rem; color: var(--muted); margin: 0; } /* Sidebar */ .sidebar { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 100px; } .sidebar-card { background: var(--surface); border-radius: var(--r-md); padding: 26px; border: 1px solid var(--line); background: var(--surface); } .sidebar-card h3 { font-size: 1.1rem; margin-bottom: 16px; color: var(--ink); } .sidebar-highlight { background: var(--ink); border-color: var(--ink); } /* Page hero (inner pages) */ .page-hero { background: linear-gradient(135deg, var(--ink) 0%, var(--ink2) 100%); padding: 60px 0 56px; color: var(--surface); } .page-hero h1 { font-size: clamp(1.8rem, 4vw, 3rem); color: var(--surface); margin: 12px 0 14px; } .page-hero .lead { color: #b9cadb; max-width: 680px; font-size: 1.05rem; line-height: 1.65; } .page-hero-actions { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; } .breadcrumb { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: #7a9ab8; margin-bottom: 8px; } .breadcrumb a { color: #7a9ab8; } .breadcrumb a:hover { color: var(--gold); } .breadcrumb .sep { opacity: .6; } .breadcrumb .current { color: var(--gold); } /* ============================================================ CITY PAGES ============================================================ */ .city-services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 28px 0 40px; } .city-service-item { display: flex; gap: 14px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-md); padding: 20px; text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s; } .city-service-item:hover { transform: translateY(-3px); box-shadow: 0 8px 24px #0b254016; border-color: var(--clay); } .cs-icon { width: 44px; height: 44px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .city-service-item h3 { font-size: .95rem; color: var(--ink); margin-bottom: 6px; } .city-service-item p { font-size: .82rem; color: var(--muted); margin: 0; line-height: 1.5; } .neighborhood-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; } .neighborhood-tag { background: var(--surface); border: 1px solid var(--line); background: var(--surface); border-radius: 16px; padding: 6px 16px; font-size: .82rem; font-weight: 700; color: var(--ink2); } .local-testimonial { background: linear-gradient(135deg, var(--ink) 0%, var(--ink2) 100%); border-radius: var(--r-md); padding: 28px 32px; margin: 36px 0; color: var(--surface); font-style: italic; font-size: 1rem; line-height: 1.7; } .local-testimonial .cred { margin-top: 14px; font-style: normal; font-weight: 800; font-size: .88rem; color: var(--gold); } .local-testimonial .disclaimer { font-style: normal; font-size: .72rem; color: #8fa4b8; margin-top: 8px; } /* ============================================================ REVIEWS PAGE ============================================================ */ .review-summary-card { display: grid; grid-template-columns: 180px 1fr 220px; gap: 40px; align-items: center; background: var(--surface); border-radius: var(--r-lg); padding: 36px 40px; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 4px 24px #0b254010; margin-bottom: 16px; } .rs-number { font-family: Fraunces, serif; font-size: 4.5rem; font-weight: 800; color: var(--ink); line-height: 1; } .rs-stars { font-size: 1.5rem; color: var(--gold); margin: 4px 0; } .rs-count { font-size: .85rem; color: var(--muted); } .review-summary-score { text-align: center; } .review-summary-bars { display: flex; flex-direction: column; gap: 8px; } .rb-row { display: flex; align-items: center; gap: 10px; font-size: .82rem; font-weight: 700; } .rb-bar { flex: 1; height: 8px; background: var(--line); border-radius: 16px; overflow: hidden; } .rb-fill { height: 100%; background: var(--gold); border-radius: 16px; transition: width .8s; } .reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .review-card { transition: transform 0.3s ease, box-shadow 0.3s ease; background: var(--surface); border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-md); padding: 24px; transition: transform .2s, box-shadow .2s; } .review-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px #0b254018; } .rc-stars { font-size: 1.1rem; color: var(--gold); margin-bottom: 12px; } .review-card blockquote { margin: 0 0 16px; font-size: .9rem; line-height: 1.65; color: var(--ink); font-style: italic; } .rc-meta { font-size: .78rem; color: var(--muted); font-weight: 700; } /* ============================================================ BLOG ============================================================ */ .blog-featured-card { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; background: var(--surface); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 6px 28px #0b254012; } .blog-featured-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .blog-featured-content { padding: 36px 40px 36px 0; } .blog-featured-content h2 { font-size: 1.6rem; margin: 10px 0 14px; } .blog-featured-content h2 a { color: var(--ink); } .blog-featured-content h2 a:hover { color: var(--clay); } .blog-featured-content p { color: var(--muted); font-size: .95rem; margin-bottom: 16px; } .blog-meta { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--muted); flex-wrap: wrap; } .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .blog-card { background: var(--surface); border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); overflow: hidden; transition: transform .2s, box-shadow .2s; } .blog-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px #0b254018; } .blog-card-img-wrap { display: block; overflow: hidden; height: 200px; } .blog-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; } .blog-card:hover .blog-card-img-wrap img { transform: scale(1.04); } .blog-card-body { padding: 20px; } .blog-card-body h2 { font-size: 1.05rem; margin: 10px 0 10px; line-height: 1.3; } .blog-card-body h2 a { color: var(--ink); } .blog-card-body h2 a:hover { color: var(--clay); } .blog-card-body p { font-size: .85rem; color: var(--muted); margin-bottom: 12px; } .blog-cat { display: inline-block; background: var(--clay-light); color: var(--clay); font-size: .72rem; font-weight: 800; padding: 4px 10px; border-radius: 16px; text-transform: uppercase; letter-spacing: .04em; } /* ============================================================ ABOUT PAGE TIMELINE ============================================================ */ .about-timeline { display: flex; flex-direction: column; gap: 0; } .about-tl-item { display: flex; gap: 20px; padding-left: 20px; padding-bottom: 28px; position: relative; } .about-tl-item::before { content: ''; position: absolute; left: 9px; top: 16px; bottom: 0; width: 2px; background: var(--line); } .about-tl-item:last-child::before { display: none; } .about-tl-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--clay); flex-shrink: 0; margin-top: 4px; position: relative; z-index: 1; margin-left: -29px; } .about-tl-year { font-family: Fraunces, serif; font-size: 1.1rem; font-weight: 700; color: var(--gold); min-width: 50px; margin-top: 2px; } .about-tl-item h3 { font-size: 1rem; margin-bottom: 4px; color: var(--ink); } .about-tl-item p { font-size: .88rem; color: var(--muted); margin: 0; } /* ============================================================ BEFORE/AFTER GALLERY (REMODELING) ============================================================ */ .before-after-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; } .before-after-card { position: relative; border-radius: var(--r-md); overflow: hidden; } .before-after-card img { width: 100%; height: 240px; object-fit: cover; display: block; } .before-after-label { position: absolute; bottom: 12px; left: 12px; padding: 5px 12px; border-radius: 16px; font-size: .78rem; font-weight: 800; } .before-after-label.after { background: var(--teal); color: var(--surface); } .before-after-label.before { background: var(--muted); color: var(--surface); } /* ============================================================ INLINE TIMELINE GRID (REMODELING PROCESS) ============================================================ */ .timeline { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; } .tl-step { background: var(--paper); color: var(--ink); border-radius: var(--r-md); padding: 24px; border-left: 4px solid var(--clay); } .tl-num { font-family: Fraunces,serif; font-size: 2rem; font-weight: 800; color: var(--clay); opacity: .4; margin-bottom: 8px; } .tl-step h3 { font-size: 1rem; margin-bottom: 8px; } .tl-step p { font-size: .88rem; color: var(--muted); margin: 0; } /* ============================================================ SILVER = MUTED COLOR (UTILITY) ============================================================ */ .silver { color: var(--muted); } /* ============================================================ RESPONSIVE ADDITIONS ============================================================ */ @media (max-width: 900px) { .service-detail-grid { grid-template-columns: 1fr; } .sidebar { position: static; } .city-services-grid { grid-template-columns: 1fr; } .review-summary-card { grid-template-columns: 1fr; text-align: center; } .reviews-grid { grid-template-columns: repeat(2,1fr); } .blog-grid { grid-template-columns: repeat(2,1fr); } .blog-featured-card { grid-template-columns: 1fr; } .blog-featured-content { padding: 24px; } .blog-featured-img { height: 240px; } .timeline { grid-template-columns: 1fr; } .before-after-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 600px) { .reviews-grid { grid-template-columns: 1fr; } .blog-grid { grid-template-columns: 1fr; } .before-after-grid { grid-template-columns: 1fr; } .page-hero-actions { flex-direction: column; } .city-services-grid { grid-template-columns: 1fr; } } /* ============================================================ PRINT ============================================================ */ @media print { .topbar, .navwrap, .mobile-cta, .cta-band, footer { display: none; } .contact { background: var(--surface); color: var(--ink); } } .review-card:hover { transform: translateY(-3px); box-shadow: 0 12px 24px -10px rgba(0,0,0,0.05); } .why-card:hover { background: var(--mist); transform: translateY(-3px); } .city-service-item { transition: transform 0.25s ease; } .city-service-item:hover { transform: translateY(-2px); } .offer-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -10px rgba(0,0,0,0.08); } /* Custom Process Flow */ .process-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin-top: 40px; } .pf-step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 32px 24px; text-align: center; transition: transform 0.3s ease; position: relative; } .pf-step:hover { transform: translateY(-4px); } .pf-icon { background: var(--clay-light); width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; } .pf-step h3 { font-size: 1.1rem; margin-bottom: 12px; } .pf-step p { font-size: 0.95rem; color: var(--muted); margin: 0; } .pf-step::after { content: ''; position: absolute; right: -12px; top: 64px; width: 24px; height: 2px; background: var(--line); z-index: -1; } .pf-step:last-child::after { display: none; } @media(max-width: 800px) { .pf-step::after { display: none; } } /* Promo Flyers */ .promo-flyers { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 40px; } .promo-flyer { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface); display: flex; flex-direction: column; text-align: center; transition: transform 0.3s ease; } .promo-flyer:hover { transform: translateY(-4px); box-shadow: 0 12px 24px -10px rgba(0,0,0,0.05); } .pf-header { background: var(--clay-light); color: var(--clay); font-weight: 700; padding: 12px; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 1px; } .pf-body { padding: 32px 24px; flex-grow: 1; display: flex; flex-direction: column; } .pf-body h3 { font-size: 1.2rem; margin-bottom: 12px; } .pf-body p { color: var(--muted); font-size: 0.95rem; margin-bottom: 24px; } .pf-price { font-size: 1.8rem; font-weight: 800; font-family: 'Fraunces', serif; margin-bottom: 24px; color: var(--ink); } .pf-body .btn { margin-top: auto; } /* --- PREMIUM UI HIERARCHY OVERRIDES --- */ .blog-featured-card { box-shadow: 0 16px 40px rgba(10, 20, 40, 0.08); border: 1px solid rgba(0,0,0,0.04); transform: translateY(-2px); background: #fff; } .blog-card, .service-card, .promo-flyer { box-shadow: 0 4px 12px rgba(10, 20, 40, 0.04); border: 1px solid rgba(0,0,0,0.06); transition: transform 0.3s ease, box-shadow 0.3s ease; } .blog-card:hover, .service-card:hover, .promo-flyer:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(10, 20, 40, 0.08); border-color: rgba(0,0,0,0.08); } .promo-flyer.featured-flyer { box-shadow: 0 20px 40px rgba(224, 161, 58, 0.15); border: 2px solid var(--gold); } h2, h3, h4 { color: var(--ink); } p.lead { color: var(--ink-soft); } .topbar a { color: #CBD5E1; transition: color 0.2s; } .topbar a:hover { color: #FFF; } .nav-links > a, .nav-dropdown > a { color: #F1F5F9 !important; font-weight: 500; } .nav-links > a:hover, .nav-dropdown > a:hover { color: var(--clay) !important; } .nav-phone { color: #F1F5F9; } .nav-phone b a { color: #FFF; } .burger { color: #FFF; } .nav-dropdown-menu { background: #FFF; box-shadow: 0 10px 25px rgba(0,0,0,0.1); border-radius: 16px; } .nav-dropdown-menu a { color: var(--ink) !important; } .nav-dropdown-menu a:hover { background: #F8FAFC; color: var(--clay) !important; } .mobile-nav-panel.open { right: 0; } .mobile-nav-close { color: #FFF; } .mobile-nav-links a { color: #FFF; border-bottom-color: rgba(255,255,255,0.1); } .mobile-nav-links a:hover { color: var(--clay); } footer { background: #0F172A; color: #94A3B8; } footer h4 { color: #FFF; } footer a { color: #CBD5E1; } footer a:hover { color: #FFF; } .btn { border-radius: 8px; } .tag { border-radius: 4px; } /* --- HERO ANIMATIONS & PREMIUM UI --- */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes float { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } } .hero .eyebrow { animation: fadeInUp 0.8s ease-out forwards; opacity: 0; } .hero h1 { animation: fadeInUp 0.8s ease-out 0.1s forwards; opacity: 0; } .hero p.lead { animation: fadeInUp 0.8s ease-out 0.2s forwards; opacity: 0; } .hero .hero-actions { animation: fadeInUp 0.8s ease-out 0.3s forwards; opacity: 0; } .hero .stat-row { animation: fadeInUp 0.8s ease-out 0.4s forwards; opacity: 0; } .hero .hero-visual { animation: fadeInUp 1s ease-out 0.2s forwards; opacity: 0; } .hero { background: radial-gradient(circle at top right, rgba(245, 158, 11, 0.05) 0%, transparent 40%), linear-gradient(to bottom, #FFFFFF, #F8FAFC); border-bottom: 1px solid rgba(0,0,0,0.03); } h1 .accent { background: linear-gradient(135deg, var(--gold) 0%, #D97706 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; } .badge-float.top { animation: float 6s ease-in-out infinite; } .badge-float.bottom { animation: float 7s ease-in-out infinite reverse; } .hero-photo img { transition: transform 0.6s ease; } .hero-photo:hover img { transform: scale(1.03); } .brand-logo { height: 60px !important; width: auto; } /* --- PREMIUM SERVICES GRID --- */ .service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 32px; } .service-card { background: #FFFFFF !important; border-radius: 24px !important; overflow: hidden; padding: 0 !important; border: 1px solid rgba(0,0,0,0.04); box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04) !important; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; display: flex; flex-direction: column; position: relative; } .service-card:hover { transform: translateY(-10px) !important; box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12) !important; } .service-card-img { width: 100%; height: 220px; object-fit: cover; border-bottom: 3px solid var(--gold); transition: transform 0.6s ease; } .service-card:hover .service-card-img { transform: scale(1.05); } .service-card-img-wrap { overflow: hidden; height: 220px; } .service-card-body { padding: 32px 28px; flex-grow: 1; display: flex; flex-direction: column; } .service-card-body h3 { font-size: 1.5rem; margin-bottom: 12px; } .service-card-body p { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.6; margin-bottom: 24px; flex-grow: 1; } .service-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; } .service-tags span { background: #F8FAFC; border: 1px solid rgba(15, 23, 42, 0.06); color: var(--ink-soft); font-size: 0.75rem; font-weight: 600; padding: 6px 12px; border-radius: 100px; letter-spacing: 0.3px; } .svc-link { color: var(--ink); font-weight: 700; display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.5px; transition: color 0.3s ease; margin-top: auto; } .svc-link::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; } .svc-link svg { transition: transform 0.3s ease; } .service-card:hover .svc-link { color: var(--gold); } .service-card:hover .svc-link svg { transform: translateX(4px); } /* --- PREMIUM WHY US SECTION --- */ .why { background: radial-gradient(circle at top right, rgba(30, 41, 59, 1) 0%, rgba(15, 23, 42, 1) 100%) !important; position: relative; overflow: hidden; } .why::before { content: ''; position: absolute; top: -50%; right: -20%; width: 80%; height: 200%; background: radial-gradient(circle, rgba(245, 158, 11, 0.03) 0%, transparent 60%); pointer-events: none; } .why h2, .why h3, .why-card h3 { color: #FFFFFF !important; } .why p, .why-card p, .why .section-head p { color: #94A3B8 !important; } .why-card { background: rgba(255, 255, 255, 0.02) !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; border-radius: 20px !important; padding: 32px 24px !important; backdrop-filter: blur(12px); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; } .why-card:hover { transform: translateY(-8px) !important; background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(245, 158, 11, 0.3) !important; box-shadow: 0 20px 40px rgba(0,0,0,0.4) !important; } .why-icon { width: 48px !important; height: 48px !important; border-radius: 14px !important; background: linear-gradient(135deg, var(--gold) 0%, #D97706 100%) !important; color: #FFFFFF !important; box-shadow: 0 8px 24px rgba(245, 158, 11, 0.3) !important; border: 1px solid rgba(255, 255, 255, 0.2); } .why-icon svg { stroke: #FFF !important; } /* --- PREMIUM PROCESS SECTION --- */ .process { background: #F8FAFC !important; border-top: 1px solid rgba(0,0,0,0.03); border-bottom: 1px solid rgba(0,0,0,0.03); } .process-flow { gap: 32px !important; } .pf-step { background: #FFFFFF !important; border: none !important; border-radius: 24px !important; padding: 40px 24px !important; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04) !important; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; } .pf-step:hover { transform: translateY(-8px) !important; box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08) !important; } .pf-icon { background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%) !important; width: 80px !important; height: 80px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 auto 24px !important; box-shadow: 0 12px 24px rgba(15, 23, 42, 0.15) !important; position: relative; z-index: 2; } .pf-icon svg { width: 32px !important; height: 32px !important; stroke: var(--gold) !important; stroke-width: 1.5 !important; } .pf-step h3 { font-size: 1.25rem !important; margin-bottom: 12px !important; color: var(--ink) !important; } .pf-step p { color: #64748B !important; font-size: 0.95rem !important; line-height: 1.6 !important; } .pf-step::after { content: '' !important; position: absolute !important; right: -32px !important; top: 80px !important; width: 64px !important; height: 0 !important; border-top: 2px dashed var(--gold) !important; background: transparent !important; z-index: 1 !important; } @media(max-width: 800px) { .pf-step::after { display: none !important; } } /* --- SOLID COLORS PROMO FLYERS --- */ .promo-flyers { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; align-items: center; margin-top: 60px; } .promo-flyer { border-radius: 20px !important; padding: 40px 32px !important; display: flex; flex-direction: column; transition: transform 0.3s ease !important; position: relative; text-align: left; overflow: visible !important; } .promo-flyer:hover { transform: translateY(-8px) !important; } /* Outer Cards (Solid White) */ .pf-solid-white { background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05) !important; } /* Inner Featured Card (Solid Blue) */ .featured-flyer-solid { background: #0F172A !important; border: 2px solid var(--gold) !important; box-shadow: 0 20px 40px rgba(15, 23, 42, 0.15) !important; transform: scale(1.05) !important; z-index: 10; } .featured-flyer-solid:hover { transform: scale(1.05) translateY(-8px) !important; } /* Badges */ .pf-badge { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 0.75rem; letter-spacing: 1.5px; text-transform: uppercase; padding: 6px 16px; border-radius: 100px; margin-bottom: 24px; display: inline-block; } .pf-badge-gray { background: #F1F5F9; color: #475569; } .pf-badge-gold { background: rgba(245, 158, 11, 0.15); color: #F59E0B; } /* Ribbon for Featured */ .pf-ribbon { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); background: #F59E0B; color: #FFFFFF; padding: 6px 20px; border-radius: 100px; font-size: 0.75rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3); white-space: nowrap; z-index: 20; } /* Typography */ .promo-flyer h3 { font-family: 'Inter', sans-serif !important; font-size: 1.4rem !important; font-weight: 800 !important; margin-bottom: 20px !important; line-height: 1.3 !important; } .pf-solid-white h3 { color: #0F172A !important; } .featured-flyer-solid h3 { color: #FFFFFF !important; } /* Pricing */ .pf-price { margin-bottom: 32px; display: flex; align-items: baseline; gap: 12px; } .price-strike { font-size: 1.25rem; font-family: 'Inter', sans-serif; font-weight: 600; text-decoration: line-through; } .pf-solid-white .price-strike { color: #94A3B8; } .featured-flyer-solid .price-strike { color: #64748B; } .price-now { font-size: 3.2rem; font-weight: 900; font-family: 'Inter', sans-serif; letter-spacing: -1.5px; line-height: 1; } .pf-solid-white .price-now { color: #0F172A; } .featured-flyer-solid .price-now { color: #FFFFFF; } /* Features List */ .pf-features { list-style: none; padding: 0; margin: 0 0 32px 0; flex-grow: 1; } .pf-features li { font-family: 'Inter', sans-serif; font-size: 0.95rem; margin-bottom: 16px; display: flex; align-items: center; gap: 12px; line-height: 1.5; } .pf-solid-white .pf-features li { color: #475569; } .featured-flyer-solid .pf-features li { color: #CBD5E1; } .pf-features svg { flex-shrink: 0; width: 18px; height: 18px; stroke: #F59E0B; } /* Buttons */ .btn-solid-blue { background: #0F172A !important; color: #FFFFFF !important; font-weight: 800 !important; width: 100% !important; text-align: center; border-radius: 12px !important; padding: 16px !important; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.3s ease !important; border: none !important; } .btn-solid-blue:hover { background: #1E293B !important; transform: translateY(-2px); } .btn-solid-gold { background: #F59E0B !important; color: #FFFFFF !important; font-weight: 800 !important; width: 100% !important; text-align: center; border-radius: 12px !important; padding: 16px !important; text-transform: uppercase; letter-spacing: 0.5px; border: none !important; transition: all 0.3s ease !important; } .btn-solid-gold:hover { background: #D97706 !important; transform: translateY(-2px); } @media (max-width: 800px) { .featured-flyer-solid { transform: scale(1) !important; } .featured-flyer-solid:hover { transform: translateY(-8px) !important; } } /* --- PREMIUM SOLID REVIEWS SECTION --- */ .reviews { background: #0F172A !important; padding: 100px 0 !important; border-top: 4px solid var(--gold) !important; } .reviews .section-head h2 { color: #FFFFFF !important; } .reviews .section-head p { color: #CBD5E1 !important; font-family: 'Inter', sans-serif !important; font-weight: 600 !important; } .reviews .eyebrow { color: var(--gold) !important; } .review-grid { gap: 32px !important; margin-top: 60px !important; } .review-card { background: #FFFFFF !important; border: none !important; border-radius: 20px !important; padding: 40px 32px !important; box-shadow: 0 20px 40px rgba(0,0,0,0.2) !important; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; } .review-card:hover { transform: translateY(-8px) !important; box-shadow: 0 30px 60px rgba(0,0,0,0.3) !important; } .review-top { margin-bottom: 24px !important; } .review-stars { color: #F59E0B !important; font-size: 1.4rem !important; letter-spacing: 4px !important; } .review-card p.txt { font-family: 'Inter', sans-serif !important; font-size: 1.05rem !important; color: #0F172A !important; font-style: italic !important; line-height: 1.7 !important; margin-bottom: 32px !important; } .reviewer { padding-top: 24px !important; border-top: 1px solid #E2E8F0 !important; gap: 16px !important; } .avatar { width: 48px !important; height: 48px !important; font-size: 1rem !important; box-shadow: 0 4px 10px rgba(15, 23, 42, 0.15) !important; border: 2px solid #FFFFFF !important; } .reviewer b { font-family: 'Inter', sans-serif !important; font-size: 1rem !important; color: #0F172A !important; font-weight: 800 !important; } .reviewer span { font-family: 'Inter', sans-serif !important; font-size: 0.85rem !important; color: #64748B !important; font-weight: 500 !important; } /* --- PREMIUM SOLID SERVICE AREAS --- */ .areas { background: #F8FAFC !important; padding: 100px 0 !important; border-top: 1px solid rgba(0,0,0,0.03); border-bottom: 1px solid rgba(0,0,0,0.03); } .areas-grid { gap: 80px !important; } .area-list { gap: 16px !important; } .area-card { background: #FFFFFF !important; border: none !important; border-radius: 16px !important; padding: 18px 24px !important; display: flex; align-items: center; gap: 16px !important; font-family: 'Inter', sans-serif !important; font-weight: 700 !important; font-size: 0.95rem !important; color: #0F172A !important; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03) !important; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; } .area-card:hover { transform: translateY(-4px) !important; box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08) !important; background: #FFFFFF !important; } .area-card .pin { color: #F59E0B !important; background: rgba(245, 158, 11, 0.1) !important; width: 36px !important; height: 36px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0; } .area-card .pin svg { width: 18px !important; height: 18px !important; stroke: #F59E0B !important; } /* Ensure the button matches solid blue */ .areas .btn-ink { background: #0F172A !important; color: #FFFFFF !important; border: none !important; font-weight: 800 !important; padding: 16px 32px !important; border-radius: 12px !important; box-shadow: 0 10px 20px rgba(15, 23, 42, 0.15) !important; } .areas .btn-ink:hover { background: #1E293B !important; transform: translateY(-2px) !important; } /* --- PREMIUM FAQ SECTION --- */ .faq { background: #FFFFFF !important; padding: 100px 0 !important; } .faq-list { display: flex !important; flex-direction: column !important; gap: 16px !important; max-width: 800px !important; margin: 0 auto !important; } .faq-item { background: #FFFFFF !important; border: 1px solid rgba(15, 23, 42, 0.05) !important; border-radius: 16px !important; padding: 24px 32px !important; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02) !important; transition: all 0.3s ease !important; margin-bottom: 0 !important; } .faq-item:hover { box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06) !important; transform: translateY(-2px) !important; border-color: rgba(245, 158, 11, 0.3) !important; } .faq-item.open { border-color: var(--gold) !important; box-shadow: 0 12px 32px rgba(245, 158, 11, 0.1) !important; } .faq-q { font-family: 'Inter', sans-serif !important; font-size: 1.15rem !important; color: #0F172A !important; font-weight: 800 !important; letter-spacing: -0.2px !important; } .faq-q .plus { background: rgba(245, 158, 11, 0.1) !important; color: var(--gold) !important; width: 32px !important; height: 32px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 1.5rem !important; font-weight: 400 !important; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; line-height: 0 !important; padding-bottom: 3px !important; } .faq-item.open .plus { transform: rotate(135deg) !important; background: var(--gold) !important; color: #FFFFFF !important; } .faq-a { font-family: 'Inter', sans-serif !important; font-size: 1rem !important; color: #475569 !important; line-height: 1.8 !important; margin-top: 16px !important; padding-top: 16px !important; border-top: 1px dashed rgba(15, 23, 42, 0.08) !important; max-width: 100% !important; } /* --- PREMIUM CTA & CONTACT SECTION --- */ .cta-band { background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%) !important; color: #FFFFFF !important; padding: 100px 0 !important; box-shadow: inset 0 10px 40px rgba(0,0,0,0.1) !important; } .cta-band h2 { color: #FFFFFF !important; font-family: 'Inter', sans-serif !important; font-weight: 800 !important; letter-spacing: -1px !important; } .cta-band p { color: #FFFbeb !important; /* Extremely light gold/white */ font-size: 1.1rem !important; } .cta-band .btn-clay { background: #FFFFFF !important; color: #0F172A !important; font-weight: 800 !important; border-radius: 12px !important; padding: 16px 32px !important; border: none !important; box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important; } .cta-band .btn-clay:hover { transform: translateY(-2px) !important; box-shadow: 0 15px 30px rgba(0,0,0,0.2) !important; } .cta-band .btn-outline { background: transparent !important; color: #FFFFFF !important; border: 2px solid #FFFFFF !important; font-weight: 800 !important; border-radius: 12px !important; padding: 16px 32px !important; } .cta-band .btn-outline:hover { background: rgba(255,255,255,0.1) !important; } /* CONTACT SECTION */ .contact { background: #0B1120 !important; /* Match ultimate dark navy */ padding: 100px 0 !important; } .contact-line .ic { background: rgba(245, 158, 11, 0.1) !important; color: #F59E0B !important; width: 48px !important; height: 48px !important; border-radius: 50% !important; box-shadow: none !important; display: flex !important; align-items: center !important; justify-content: center !important; } .contact-line .ic svg { width: 20px !important; height: 20px !important; stroke: #F59E0B !important; } .contact-line b { color: #94A3B8 !important; font-family: 'Inter', sans-serif !important; font-weight: 800 !important; letter-spacing: 1.5px !important; } .contact-line span, .contact-line a { color: #F8FAFC !important; font-family: 'Inter', sans-serif !important; } /* FORM CARD */ .form-card { background: #FFFFFF !important; border-radius: 24px !important; padding: 48px 40px !important; box-shadow: 0 20px 50px rgba(0,0,0,0.4) !important; scroll-margin-top: 100px !important; } .form-card form { display: flex !important; flex-direction: column !important; gap: 20px !important; } .form-card input, .form-card select, .form-card textarea { background: #F8FAFC !important; border: 1px solid #E2E8F0 !important; border-radius: 12px !important; padding: 16px !important; font-family: 'Inter', sans-serif !important; font-size: 16px !important; color: #0F172A !important; transition: all 0.3s ease !important; width: 100% !important; } .form-card input:focus, .form-card select:focus, .form-card textarea:focus { outline: none !important; border-color: #F59E0B !important; box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.1) !important; background: #FFFFFF !important; } .form-card label { font-family: 'Inter', sans-serif !important; font-weight: 800 !important; font-size: 0.75rem !important; color: #64748B !important; letter-spacing: 1px !important; text-transform: uppercase !important; margin-bottom: 8px !important; display: block !important; } .form-card .btn { background: #F59E0B !important; color: #FFFFFF !important; font-family: 'Inter', sans-serif !important; font-weight: 800 !important; padding: 20px !important; border-radius: 12px !important; border: none !important; margin-top: 16px !important; transition: all 0.3s ease !important; text-transform: uppercase !important; letter-spacing: 1px !important; box-shadow: 0 10px 20px rgba(245, 158, 11, 0.25) !important; } .form-card .btn:hover { background: #D97706 !important; transform: translateY(-2px) !important; box-shadow: 0 15px 30px rgba(245, 158, 11, 0.35) !important; } /* --- PREMIUM FOOTER --- */ footer { background: #050810 !important; /* Pitch dark navy */ color: #94A3B8 !important; padding: 80px 0 40px !important; border-top: 1px solid rgba(255,255,255,0.02) !important; } @media (max-width: 600px) { footer { padding-bottom: 110px !important; } } .footer-grid { margin-bottom: 80px !important; } footer p { color: #64748B !important; font-family: 'Inter', sans-serif !important; font-size: 0.95rem !important; line-height: 1.8 !important; } footer h4 { color: #FFFFFF !important; font-family: 'Inter', sans-serif !important; font-weight: 800 !important; letter-spacing: 1.5px !important; font-size: 0.85rem !important; margin-bottom: 24px !important; text-transform: uppercase !important; } footer ul { gap: 16px !important; } footer a { color: #94A3B8 !important; font-family: 'Inter', sans-serif !important; font-size: 0.95rem !important; text-decoration: none !important; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; display: inline-block !important; } footer a:hover { color: #F59E0B !important; /* Gold */ transform: translateX(4px) !important; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.05) !important; padding-top: 32px !important; color: #475569 !important; font-family: 'Inter', sans-serif !important; font-size: 0.85rem !important; display: flex !important; justify-content: space-between !important; align-items: center !important; } .footer-bottom a { color: #64748B !important; font-size: 0.85rem !important; } .footer-bottom a:hover { color: #F59E0B !important; } /* Custom phone style */ .footer-brand-phone { font-family: 'Inter', sans-serif !important; font-size: 1.4rem !important; font-weight: 900 !important; color: #F59E0B !important; margin-top: 8px !important; display: inline-block !important; transition: transform 0.3s ease !important; } .footer-brand-phone:hover { transform: translateY(-2px) !important; color: #D97706 !important; } .footer-brand-email { display: inline-block !important; margin-top: 4px !important; color: #94A3B8 !important; font-size: 0.95rem !important; font-family: 'Inter', sans-serif !important; text-decoration: none !important; transition: color 0.3s ease !important; } .footer-brand-email:hover { color: #FFFFFF !important; } .footer-hq { font-family: 'Inter', sans-serif !important; font-weight: 700 !important; color: #F8FAFC !important; font-size: 0.9rem !important; text-transform: uppercase !important; letter-spacing: 1px !important; } /* --- PREMIUM SUBPAGE AESTHETICS --- */ /* Page Hero */ .page-hero { background-color: #0F172A !important; } .page-hero::before { display: none !important; } .page-hero h1 { font-family: 'Inter', sans-serif !important; font-weight: 800 !important; letter-spacing: -1px !important; } .page-hero-actions .btn-clay { background: #F59E0B !important; color: #FFFFFF !important; border: none !important; box-shadow: 0 10px 20px rgba(245, 158, 11, 0.25) !important; } .page-hero-actions .btn-clay:hover { background: #D97706 !important; transform: translateY(-2px) !important; } .page-hero-actions .btn[style*="border"] { border-color: rgba(255,255,255,0.4) !important; } .page-hero-actions .btn[style*="border"]:hover { background: rgba(255,255,255,0.1) !important; } /* Breadcrumbs */ .breadcrumb, .breadcrumb a, .breadcrumb .sep, .breadcrumb .current { font-family: 'Inter', sans-serif !important; font-weight: 500 !important; } .breadcrumb .current { color: #F59E0B !important; } /* Service Details (Prose) */ .service-detail { background: #FFFFFF !important; } .prose h2, .prose h3 { font-family: 'Inter', sans-serif !important; font-weight: 800 !important; color: #0F172A !important; letter-spacing: -0.5px !important; } .prose p { font-family: 'Inter', sans-serif !important; color: #475569 !important; font-size: 1.05rem !important; line-height: 1.8 !important; } .prose ul li { font-family: 'Inter', sans-serif !important; color: #475569 !important; font-size: 1.05rem !important; } .prose ul li::before { content: '→' !important; color: #F59E0B !important; font-weight: 900 !important; } /* Sidebar */ .sidebar-card { background: #FFFFFF !important; border: none !important; border-radius: 24px !important; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05) !important; padding: 32px !important; } .sidebar-card h3 { font-family: 'Inter', sans-serif !important; color: #0F172A !important; font-weight: 800 !important; } .sidebar-highlight { background: #0F172A !important; box-shadow: 0 20px 40px rgba(15, 23, 42, 0.2) !important; } .sidebar-highlight h3 { color: #FFFFFF !important; } .sidebar-highlight p { color: #CBD5E1 !important; } .sidebar-highlight .btn { background: #F59E0B !important; color: #FFFFFF !important; border: none !important; font-weight: 800 !important; } .sidebar-highlight .btn:hover { background: #D97706 !important; box-shadow: 0 10px 20px rgba(245,158,11,0.2) !important; } /* About Page Timeline & Features */ .about-tl-item { border-left: 2px solid rgba(15, 23, 42, 0.1) !important; } .about-tl-dot { background: #F59E0B !important; border-color: #FFFFFF !important; box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2) !important; } .about-tl-year { color: #F59E0B !important; font-family: 'Inter', sans-serif !important; font-weight: 800 !important; } .about-tl-item h3 { color: #0F172A !important; font-family: 'Inter', sans-serif !important; } .about-tl-item p { color: #475569 !important; font-family: 'Inter', sans-serif !important; } .feature-item { background: #F8FAFC !important; border: none !important; border-radius: 16px !important; padding: 24px !important; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.03) !important; } .feature-item .fi-icon { background: rgba(245, 158, 11, 0.1) !important; } .feature-item .fi-icon svg { stroke: #F59E0B !important; } .feature-item .fi-icon svg path[fill="#fff"] { fill: #F59E0B !important; } .feature-item h4 { color: #0F172A !important; font-family: 'Inter', sans-serif !important; font-weight: 800 !important; } .feature-item p { color: #475569 !important; font-family: 'Inter', sans-serif !important; } /* Blog Cards */ .blog-card, .blog-featured-card { background: #FFFFFF !important; border: none !important; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05) !important; border-radius: 20px !important; transition: all 0.3s ease !important; } .blog-card:hover, .blog-featured-card:hover { box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1) !important; transform: translateY(-4px) !important; } .blog-content h2 a, .blog-featured-content h2 a { font-family: 'Inter', sans-serif !important; font-weight: 800 !important; color: #0F172A !important; } .blog-content h2 a:hover, .blog-featured-content h2 a:hover { color: #F59E0B !important; } .blog-content p, .blog-featured-content p { color: #475569 !important; font-family: 'Inter', sans-serif !important; } /* --- PREMIUM DUOTONE ICONS --- */ /* Trust bar icon containers */ .trust-item .ic { display: flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; background: rgba(245, 158, 11, 0.1) !important; border-radius: 50% !important; box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.2), 0 4px 10px rgba(0,0,0,0.2) !important; margin-right: 12px !important; flex-shrink: 0 !important; } .trust-item .ic svg { width: 20px !important; height: 20px !important; } /* Feature item icon containers */ .fi-icon { background: #FFFFFF !important; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08) !important; border: 1px solid rgba(15, 23, 42, 0.05) !important; } .fi-icon svg { stroke: #0F172A !important; fill: none !important; } .fi-icon svg path[fill="#fff"], .fi-icon svg circle[fill="#fff"] { fill: #F59E0B !important; stroke: none !important; } /* Service link arrow upgrades */ .svc-link svg.icon { stroke: #F59E0B !important; stroke-width: 2.5 !important; } /* --- PREMIUM WHY ICONS --- */ .why-icon { background: rgba(245, 158, 11, 0.1) !important; box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.2), 0 4px 10px rgba(0,0,0,0.3) !important; color: #F59E0B !important; } .why-icon svg { width: 24px !important; height: 24px !important; } /* --- PREMIUM CITY SERVICE ICONS --- */ .city-service-item .cs-icon { background: rgba(245, 158, 11, 0.1) !important; box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.2), 0 4px 10px rgba(0,0,0,0.1) !important; } .city-service-item .cs-icon svg { width: 24px !important; height: 24px !important; }