/* ═══════════════════════════════════════════════════════ HOME CLEANHOME SERVICES — SHARED SITE STYLES Used by index.html and every /*.html service landing page. Design tokens (colors, fonts) mirror the tailwind.config block duplicated at the top of each page's . ════════════════════════════════════════════════════════ */ /* ─── Base ─────────────────────────────────────────── */ * { -webkit-font-smoothing: antialiased; box-sizing: border-box; } body { font-family: 'Inter', system-ui, sans-serif; color: #0F172A; } /* ─── Glassmorphism Nav ─────────────────────────────── */ .glass-nav { background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(42, 157, 143, 0.1); } /* ─── Teal Glow Button ──────────────────────────────── */ .btn-teal { background-color: #2A9D8F; color: #fff; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 18px rgba(42, 157, 143, 0.30); } .btn-teal:hover { background-color: #228B7E; box-shadow: 0 8px 28px rgba(42, 157, 143, 0.50); transform: translateY(-2px); } .btn-teal:active { transform: scale(0.96); } /* ─── Outline Button ────────────────────────────────── */ .btn-outline { border: 2px solid #2A9D8F; color: #2A9D8F; background: transparent; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .btn-outline:hover { background-color: #2A9D8F; color: #fff; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(42, 157, 143, 0.35); } .btn-outline:active { transform: scale(0.96); } /* ─── Card Hover Effects ────────────────────────────── */ .benefit-card { transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.3s ease; } .benefit-card:hover { transform: translateY(-10px); box-shadow: 0 24px 64px rgba(15, 23, 42, 0.12); } .service-card { transition: transform 0.4s ease, box-shadow 0.4s ease; } .service-card:hover { transform: translateY(-8px); box-shadow: 0 20px 56px rgba(15, 23, 42, 0.12); } .testimonial-card { transition: transform 0.3s ease, box-shadow 0.3s ease; } .testimonial-card:hover { transform: translateY(-6px); box-shadow: 0 16px 44px rgba(15, 23, 42, 0.10); } /* ─── Gradient Text ─────────────────────────────────── */ .teal-text { background: linear-gradient(135deg, #2A9D8F 0%, #1A6A5E 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ─── Float animation (hero badges) ────────────────── */ @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .float-slow { animation: float 4s ease-in-out infinite; } .float-fast { animation: float 3s ease-in-out infinite; animation-delay: 1.5s; } /* ─── Teal check circles ────────────────────────────── */ .check-circle { flex-shrink: 0; width: 34px; height: 34px; background: #E6F7F5; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #2A9D8F; font-size: 13px; } /* ─── Metric icon glow ──────────────────────────────── */ .metric-icon { color: #2A9D8F; filter: drop-shadow(0 0 10px rgba(42, 157, 143, 0.6)); } /* ─── Mobile menu ───────────────────────────────────── */ #mobile-menu { display: none; } #mobile-menu.open { display: flex; } /* ─── Scrollbar ─────────────────────────────────────── */ ::-webkit-scrollbar { width: 7px; } ::-webkit-scrollbar-track { background: #f1f5f9; } ::-webkit-scrollbar-thumb { background: #2A9D8F; border-radius: 4px; } /* ─── Image zoom on card hover ──────────────────────── */ .img-zoom { transition: transform 0.6s ease; } .service-card:hover .img-zoom { transform: scale(1.06); } /* ─── Quote Forms ───────────────────────────────────── */ .form-label { display: block; font-size: 0.8rem; font-weight: 700; color: #0F172A; margin-bottom: 0.4rem; } .form-input, .form-textarea { width: 100%; border: 1.5px solid #E2E8F0; border-radius: 0.75rem; padding: 0.7rem 1rem; font-size: 0.925rem; color: #0F172A; background: #fff; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .form-input:focus, .form-textarea:focus { outline: none; border-color: #2A9D8F; box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.15); } .form-check-label { display: flex; align-items: center; gap: 0.55rem; font-size: 0.875rem; color: #334155; padding: 0.6rem 0.85rem; border: 1.5px solid #E2E8F0; border-radius: 0.65rem; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; } .form-check-label:hover { border-color: #2A9D8F; background: #F0FDFB; } .form-check-label input[type="checkbox"], .form-check-label input[type="radio"] { accent-color: #2A9D8F; width: 16px; height: 16px; flex-shrink: 0; } .form-section-title { display: flex; align-items: center; gap: 0.6rem; font-weight: 800; font-size: 1.15rem; color: #0F172A; } .form-step-num { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: #E6F7F5; color: #2A9D8F; font-size: 0.8rem; font-weight: 800; display: flex; align-items: center; justify-content: center; } .quote-form.is-hidden { display: none; } .quote-success { display: none; } .quote-success.show { display: block; } .quote-panel { margin-top: 1.5rem; } .quote-panel.is-collapsed { display: none; } /* ─── FAQ Accordion ─────────────────────────────────── */ .faq-item summary::-webkit-details-marker { display: none; } .faq-item[open] .faq-chevron { transform: rotate(180deg); }