/* ═══════════════════════════════ HOMORA — SHARED STYLESHEET ═══════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* Brand blue (logo blue) — primary across site */ --brand:#1470F7; --brand-light:#3B8AFF; --brand-pale:#EBF3FF; --brand-dark:#0E58CC; --blue:#1470F7; --blue-pale:#EBF3FF; --amber:#F59E0B; --amber-pale:#FEF3C7; --rose:#E84393; --rose-pale:#FDE8F3; --teal:#0EA5E9; --text:#0F1117; --text-muted:#6B7280; --text-light:#9CA3AF; --border:#E5E7EB; --bg-gray:#F9FAFB; --bg-gray-2:#FAFAFA; --radius:16px; --radius-sm:10px; } html { scroll-behavior: smooth; } body { font-family: 'Inter', sans-serif; background: #fff; color: var(--text); overflow-x: hidden; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* ── Animations ── */ @keyframes orb1 { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(60px,-80px) scale(1.15)} 66%{transform:translate(-40px,40px) scale(0.9)} } @keyframes orb2 { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(-80px,50px) scale(1.1)} 66%{transform:translate(50px,-60px) scale(0.85)} } @keyframes orb3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(40px,60px) scale(1.2)} } @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)} } @keyframes float2 { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-20px) rotate(4deg)} } @keyframes fadeUp { from{opacity:0;transform:translateY(32px)} to{opacity:1;transform:translateY(0)} } @keyframes fadeIn { from{opacity:0} to{opacity:1} } @keyframes slideInLeft { from{opacity:0;transform:translateX(-40px)} to{opacity:1;transform:translateX(0)} } @keyframes slideInRight { from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:translateX(0)} } @keyframes ping { 0%{transform:scale(1);opacity:0.8} 100%{transform:scale(2.2);opacity:0} } @keyframes langDrop { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} } /* `.animate-in` elements: * - When JS-driven scroll observer is active, the page sets * at boot. Until an element gets `.visible`, * it's invisible (so the fadeUp animation looks correct). * - Without that boot signal (JS failed, observer missed an * element because it was injected after init, etc.), elements * stay fully visible — fixes the "invisible block = blank * whitespace" failure mode. */ html.js-anim .animate-in, html.js-anim .animate-in-left, html.js-anim .animate-in-right { opacity:0; } html.js-anim .animate-in.visible { animation:fadeUp 0.8s cubic-bezier(.16,1,.3,1) forwards; } html.js-anim .animate-in-left.visible { animation:slideInLeft 0.8s cubic-bezier(.16,1,.3,1) forwards; } html.js-anim .animate-in-right.visible { animation:slideInRight 0.8s cubic-bezier(.16,1,.3,1) forwards; } /* Belt-and-suspenders: after 4 s, force-show any unfaded element * so a stuck observer can never leave the page with blank regions. */ @media (prefers-reduced-motion: no-preference) { html.js-anim .animate-in:not(.visible), html.js-anim .animate-in-left:not(.visible), html.js-anim .animate-in-right:not(.visible) { animation: fadeUp 0.8s cubic-bezier(.16,1,.3,1) forwards 4s; } } /* ── NAV ── */ nav { position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(255,255,255,0.88); backdrop-filter:blur(20px); border-bottom:1px solid rgba(0,0,0,0.06); transition:box-shadow 0.3s; } nav.scrolled { box-shadow:0 4px 24px rgba(0,0,0,0.08); } .nav-inner { max-width:1200px; margin:0 auto; padding:0 24px; height:72px; display:flex; align-items:center; justify-content:space-between; } .nav-logo { display:flex; align-items:center; gap:10px; text-decoration:none; } .nav-logo img { height:34px; width:auto; } .nav-links { display:flex; align-items:center; gap:24px; } .nav-links a, .nav-dropdown-trigger { text-decoration:none; color:var(--text-muted); font-size:14px; font-weight:500; transition:color 0.2s; background:none; border:none; cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; gap:4px; } .nav-links a:hover, .nav-dropdown-trigger:hover { color:var(--text); } .nav-links a.active, .nav-links a.nav-active, .nav-links .nav-dropdown-trigger.nav-active { color:var(--brand); font-weight:700; } .nav-links a.nav-active::after, .nav-links .nav-dropdown-trigger.nav-active::after { content:''; display:block; height:2px; background:var(--brand); margin-top:4px; border-radius:2px; } .nav-right { display:flex; align-items:center; gap:12px; } /* Nav mega-dropdown */ .nav-dropdown { position:relative; } .nav-dropdown-menu { position:absolute; top:calc(100% + 16px); left:50%; transform:translateX(-50%); background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:0 16px 40px rgba(0,0,0,0.12); min-width:280px; opacity:0; visibility:hidden; transition:all 0.2s; padding:8px; } .nav-dropdown:hover .nav-dropdown-menu { opacity:1; visibility:visible; top:calc(100% + 8px); } .nav-dropdown-menu a { display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:10px; font-size:14px; font-weight:500; color:var(--text); transition:background 0.15s; text-decoration:none; } .nav-dropdown-menu a:hover { background:var(--bg-gray); color:var(--brand); } .nav-dropdown-menu a .icon { width:44px; height:44px; border-radius:8px; background-size:cover; background-position:center; flex-shrink:0; box-shadow:0 1px 4px rgba(0,0,0,0.1); } /* Language switcher */ .lang-switcher { position:relative; } .lang-btn { display:flex; align-items:center; gap:6px; background:#F9FAFB; border:1px solid var(--border); border-radius:50px; padding:6px 14px; cursor:pointer; font-size:14px; font-weight:600; color:var(--text); transition:all 0.2s; white-space:nowrap; font-family:inherit; } .lang-btn:hover { background:#F3F4F6; border-color:#D1D5DB; } .lang-flag { font-size:16px; } .lang-arrow { font-size:10px; color:var(--text-muted); transition:transform 0.2s; } .lang-switcher.open .lang-arrow { transform:rotate(180deg); } .lang-dropdown { position:absolute; top:calc(100% + 8px); right:0; background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:0 16px 40px rgba(0,0,0,0.12); overflow:hidden; display:none; min-width:180px; animation:langDrop 0.2s ease; z-index:1000; } .lang-switcher.open .lang-dropdown { display:block; } .lang-option { display:flex; align-items:center; gap:10px; padding:11px 16px; cursor:pointer; font-size:14px; font-weight:500; transition:background 0.15s; color:var(--text); } .lang-option:hover { background:#F9FAFB; } .lang-option.active { background:var(--brand-pale); color:var(--brand); font-weight:700; } .lang-option .flag { font-size:18px; } .lang-option .check { margin-left:auto; font-size:12px; } .nav-cta { background:var(--brand); color:#fff; border:none; cursor:pointer; padding:10px 22px; border-radius:50px; font-size:15px; font-weight:600; text-decoration:none; transition:all 0.2s; white-space:nowrap; } .nav-cta:hover { background:var(--brand-light); transform:translateY(-1px); box-shadow:0 6px 20px rgba(20,112,247,0.30); } @media(max-width:900px) { .nav-links { display:none } } /* Mobile menu */ .mobile-menu-toggle { display:none; background:none; border:none; cursor:pointer; padding:8px; font-size:24px; color:var(--text); } @media(max-width:900px) { .mobile-menu-toggle { display:block; } } .mobile-menu { position:fixed; top:72px; left:0; right:0; bottom:0; background:#fff; z-index:99; padding:24px; overflow-y:auto; transform:translateX(100%); transition:transform 0.3s; } .mobile-menu.open { transform:translateX(0); } .mobile-menu a { display:block; padding:14px 0; border-bottom:1px solid var(--border); color:var(--text); text-decoration:none; font-weight:500; } /* ── Hero ── */ .hero { position:relative; overflow:hidden; padding-top:72px; background:#fff; } .hero-bg { position:absolute; inset:0; overflow:hidden; z-index:0; } .hero-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(0,0,0,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,0.025) 1px,transparent 1px); background-size:64px 64px; } .orb { position:absolute; border-radius:50%; filter:blur(90px); } .orb-1 { width:700px;height:700px; background:radial-gradient(circle,rgba(20,112,247,0.18) 0%,transparent 70%); top:-15%;right:-10%; animation:orb1 12s ease-in-out infinite; } .orb-2 { width:600px;height:600px; background:radial-gradient(circle,rgba(59,138,255,0.16) 0%,transparent 70%); bottom:-20%;left:-5%; animation:orb2 10s ease-in-out infinite 2s; } .orb-3 { width:450px;height:450px; background:radial-gradient(circle,rgba(14,88,204,0.12) 0%,transparent 70%); top:30%;left:35%; animation:orb3 14s ease-in-out infinite 1s; } .orb-4 { width:350px;height:350px; background:radial-gradient(circle,rgba(91,165,255,0.10) 0%,transparent 70%); top:10%;left:20%; animation:orb1 16s ease-in-out infinite 4s; } .hero-home { min-height:100vh; display:flex; align-items:center; } .hero-page { padding:100px 24px 48px; } @media (max-width:780px) { .hero-page { padding:80px 18px 28px; } } .hero-content { position:relative;z-index:1; max-width:1200px;margin:0 auto;padding:48px 24px; } @media (max-width:780px) { .hero-content { padding:32px 18px; } } .hero-content.two-col { display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center; } @media(max-width:900px) { .hero-content.two-col{grid-template-columns:1fr;gap:40px;padding:48px 20px} } .hero-badge { display:inline-flex;align-items:center;gap:8px; background:var(--brand-pale);border:1px solid rgba(20,112,247,0.2); border-radius:50px;padding:6px 14px;margin-bottom:24px; font-size:13px;font-weight:600;color:var(--brand); } .hero-badge::before { content:'';width:6px;height:6px;border-radius:50%;background:var(--brand);flex-shrink:0;animation:ping 1.5s ease infinite; } .hero-badge.amber { background:var(--amber-pale); color:#92400E; border-color:rgba(245,158,11,0.3); } .hero-badge.amber::before { background:var(--amber); } .hero-badge.blue { background:var(--blue-pale); color:var(--blue); border-color:rgba(20,112,247,0.2); } .hero-badge.blue::before { background:var(--blue); } .hero-badge.hero-badge-yellow { background:#FEF9C3; color:#854D0E; border-color:#FACC15; font-weight:700; padding:7px 16px; font-size:13.5px; } .hero-badge.hero-badge-yellow::before { background:#EAB308; } /* Larger primary CTA used in the hero */ .btn-primary.btn-primary-xl { font-size:18px; padding:18px 36px; border-radius:50px; box-shadow:0 12px 30px rgba(20,112,247,0.32); } .btn-primary.btn-primary-xl:hover { transform:translateY(-3px); box-shadow:0 18px 40px rgba(20,112,247,0.42); } /* Bouncing arrow that lives under the Book button */ .hero-scroll-indicator { width:36px;height:36px;border-radius:50%; background:rgba(20,112,247,0.10); color:var(--blue); display:inline-flex;align-items:center;justify-content:center; align-self:center; cursor:default; animation:hero-arrow-bounce 1.6s ease-in-out infinite; } .hero-scroll-indicator svg { width:20px; height:20px; } @keyframes hero-arrow-bounce { 0%,100% { transform:translateY(0); } 50% { transform:translateY(8px); } } /* Scroll arrow anchored to the absolute bottom-center of the hero section (used on service pages — bridges the hero and the next section). */ .hero.service-hero { position:relative; } .service-hero .hero-scroll-indicator-bottom { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:3; align-self:auto; } @media (max-width:900px) { .service-hero .hero-scroll-indicator-bottom { display:none; } } /* Floating scroll-to-explore indicator at end of viewport */ .scroll-hint { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--text-muted); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; pointer-events:none; z-index:5; } .scroll-hint .mouse { width:24px; height:38px; border:2px solid var(--text-muted); border-radius:14px; display:flex; justify-content:center; align-items:flex-start; padding-top:6px; } .scroll-hint .mouse::before { content:''; width:3px; height:8px; background:var(--text-muted); border-radius:3px; animation:scroll-wheel 1.6s ease-in-out infinite; } @keyframes scroll-wheel { 0%,100% { transform:translateY(0); opacity:1; } 50% { transform:translateY(8px); opacity:0.2; } } /* Animated arrow inside buttons (used on "Explore all services and pricing →") */ .btn-arrow-anim { display:inline-block; transition:transform 0.3s ease; } .btn-outline:hover .btn-arrow-anim, .btn-primary:hover .btn-arrow-anim { transform:translateX(4px); } /* Service card title: keep on one line to avoid layout jumps */ .service-card-title { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Service card "Book" hover treatment */ .service-card .service-card-link { transition:color 0.2s, background 0.2s; } .service-card:hover .service-card-link { color:#fff; background:var(--blue); padding:6px 14px; border-radius:50px; } /* Quote field error/success */ .quote-field-error[style*="block"] { animation:fadeUp 0.2s ease; } /* SAVE-30% promo badge — high-contrast attention color (orange→red gradient + soft pulse) */ .save-badge { animation: save-badge-pulse 2s ease-in-out infinite; } @keyframes save-badge-pulse { 0%, 100% { transform:translateX(-50%) scale(1); box-shadow:0 8px 20px rgba(249,115,22,0.45); } 50% { transform:translateX(-50%) scale(1.06); box-shadow:0 12px 28px rgba(249,115,22,0.65); } } /* "How to book a service?" form */ .bk-label { display:block; font-size:13px; font-weight:600; color:var(--text); margin-bottom:6px; } .bk-input { width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:10px; font-size:15px; font-family:inherit; background:#fff; transition:border-color 0.15s; } .bk-input:focus { outline:none; border-color:var(--blue); } .bk-input.bk-invalid { border-color:#dc2626; background:#FEF2F2; } .bk-select-placeholder { color:var(--text-light); } .bk-select-placeholder:valid:not([value=""]), .bk-select-placeholder option { color:var(--text); } .bk-phone-row { display:flex; align-items:stretch; } .bk-phone-prefix { display:inline-flex; align-items:center; padding:0 12px; border:1px solid var(--border); border-right:0; border-radius:10px 0 0 10px; background:var(--bg-gray); font-size:15px; font-weight:600; color:var(--text); user-select:none; pointer-events:none; } .bk-phone-input { border-radius:0 10px 10px 0; } .bk-err { display:none; color:#dc2626; font-size:12px; margin:6px 4px 0; } .bk-err.bk-err-show { display:block; } .hero-title { font-family:'Fraunces',Georgia,serif; font-size:clamp(2.6rem,5vw,4rem); font-weight:600; line-height:1.15; letter-spacing:-0.02em; color:var(--text); margin-bottom:20px; /* Prevent ridiculously long single words ("Carpet/Cleaning/Service…") from blowing out the viewport */ overflow-wrap:break-word; word-wrap:break-word; hyphens:auto; } .hero-title em { font-style:italic; color:var(--brand); } /* Service pages have longer, sentence-style titles (e.g. "House Cleaning Services in Helsinki – Book a Trusted Cleaner in Minutes"). Use a smaller size + tighter line-height there so they fit in ~2 lines instead of blowing up to four. The homepage hero (.hero-home) keeps the big display size. */ .service-hero .hero-title { font-size:clamp(1.7rem,2.6vw,2.3rem); line-height:1.2; } @media (max-width:480px) { .hero-title { font-size:clamp(2rem,9vw,2.4rem); line-height:1.18; } .service-hero .hero-title { font-size:clamp(1.45rem,6vw,1.8rem); line-height:1.22; } .hero-sub { font-size:16px; } } .hero-sub { font-size:18px;color:var(--text-muted);line-height:1.7;margin-bottom:24px;max-width:560px; } .hero-features { display:flex; flex-wrap:wrap; gap:20px 28px; margin-bottom:32px; font-size:14px; color:var(--text); } .hero-feature { display:inline-flex; align-items:center; gap:8px; font-weight:500; } .hero-feature svg { width:18px; height:18px; color:var(--brand); } .hero-actions { display:flex;align-items:center;gap:16px;flex-wrap:wrap; } .btn-primary { display:inline-flex;align-items:center;gap:8px; background:var(--brand);color:#fff;padding:14px 28px;border-radius:50px;font-size:16px;font-weight:600; text-decoration:none;border:none;cursor:pointer; transition:all 0.25s cubic-bezier(.16,1,.3,1); box-shadow:0 4px 20px rgba(20,112,247,0.30); } .btn-primary:hover { background:var(--brand-light);transform:translateY(-2px);box-shadow:0 8px 30px rgba(20,112,247,0.40); } .btn-primary.large { padding:16px 32px; font-size:17px; } .btn-secondary { display:inline-flex;align-items:center;gap:8px;color:var(--text);font-size:16px;font-weight:500; text-decoration:none;padding:14px 4px;border-bottom:2px solid transparent;transition:border-color 0.2s,color 0.2s; } .btn-secondary:hover { border-color:var(--brand);color:var(--brand); } .btn-outline { display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--text); border:1.5px solid var(--border); padding:13px 26px; border-radius:50px; font-size:15px; font-weight:600; text-decoration:none; transition:all 0.2s; } .btn-outline:hover { border-color:var(--brand); color:var(--brand); background:var(--brand-pale); } /* WhatsApp button — soft secondary style (pale green bg + brand-green text/border). Sits next to a primary blue button without competing for attention. */ .btn-whatsapp { display:inline-flex;align-items:center;gap:10px; background:#ECFDF5; color:#15803D; border:1.5px solid #BBF7D0; padding:14px 28px;border-radius:50px;font-size:16px;font-weight:600; text-decoration:none;transition:all 0.2s ease; } .btn-whatsapp:hover { background:#D1FAE5; border-color:#86EFAC; color:#166534; transform:translateY(-1px); } .btn-whatsapp svg path { fill:#25D366; } /* Keep the floating round WhatsApp button in the page corner unchanged */ .hero-stats { display:flex;gap:32px;margin-top:40px;flex-wrap:wrap; } .hero-stat-num { font-size:28px;font-weight:800;color:var(--text);line-height:1; } .hero-stat-label { font-size:13px;color:var(--text-muted);margin-top:2px; } .hero-visual { position:relative; } .hero-img-wrap { border-radius:24px;overflow:hidden;box-shadow:0 32px 80px rgba(0,0,0,0.15),0 8px 24px rgba(0,0,0,0.08);aspect-ratio:4/3; } .hero-img-wrap img { width:100%;height:100%;object-fit:cover; } /* Larger hero image variant — used on service pages where text is shorter */ .hero-img-wrap-xl { aspect-ratio:3/4; min-height:560px; } @media(max-width:900px) { .hero-img-wrap-xl { aspect-ratio:4/3; min-height:0; } } .hero-float-card { position:absolute;background:#fff;border-radius:14px;padding:14px 18px; box-shadow:0 16px 40px rgba(0,0,0,0.12),0 2px 8px rgba(0,0,0,0.06); display:flex;align-items:center;gap:12px;font-size:14px;font-weight:500; } .card-tax { bottom:-20px;left:-30px;animation:float 5s ease-in-out infinite 0.5s; } .card-rating { top:-16px;right:-20px;animation:float2 6s ease-in-out infinite 1.5s; } .hero-float-card-icon { width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0; } /* ── Trust Bar ── */ .trust-bar { padding:40px 24px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:#FAFAFA; } .trust-bar-inner { max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:32px;text-align:center; } @media(max-width:640px) { .trust-bar-inner{grid-template-columns:repeat(2,1fr)} } .trust-item-num { font-size:36px;font-weight:800;color:var(--text); } .trust-item-num span { background:linear-gradient(135deg,var(--brand),var(--blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; } .trust-item-label { font-size:14px;color:var(--text-muted);margin-top:4px;font-weight:500; } /* ── Sections ── */ /* Standardized vertical rhythm — designed to match homora.fi's tighter spacing. Each section: 56px top + 56px bottom (= 112px gap between adjacent sections). On mobile: 36px + 36px (= 72px gap). Section-header bottom margin halved so the gap between header text and section content isn't visually compounded with the section padding. */ section { padding:56px 24px; } @media (max-width:780px) { section { padding:36px 18px; } } @media (max-width:480px) { section { padding:28px 16px; } } .section-inner { max-width:1200px;margin:0 auto; } .section-inner-narrow { max-width:860px; margin:0 auto; } .section-header { text-align:center; margin-bottom:32px; } @media (max-width:780px) { .section-header { margin-bottom:20px; } } .section-header .section-sub { margin:0 auto; } .section-tag { display:inline-block;font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:0.10em;color:var(--brand);margin-bottom:14px; } .section-tag.amber { color:#92400E; } .section-tag.blue { color:var(--blue); } /* Designer note: keep ALL .section-tag the same size sitewide */ .section-title { font-family:'Fraunces',Georgia,serif;font-size:clamp(2rem,3.5vw,2.8rem);font-weight:600;line-height:1.2;letter-spacing:-0.02em;color:var(--text);margin-bottom:16px; } .section-title em { font-style:italic;color:var(--brand); } .section-sub { font-size:17px;color:var(--text-muted);max-width:560px;line-height:1.7; } /* ── Service Cards (grid) ── */ .services-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px; } .service-card { border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);background:#fff;transition:all 0.4s cubic-bezier(.16,1,.3,1);cursor:pointer;text-decoration:none;color:inherit;display:block; } .service-card:hover { transform:translateY(-8px);box-shadow:0 32px 64px rgba(0,0,0,0.10),0 8px 16px rgba(0,0,0,0.05);border-color:transparent; } .service-img-wrap { overflow:hidden; } .service-img { width:100%;height:200px;object-fit:cover;transition:transform 0.5s ease;display:block; } .service-card:hover .service-img { transform:scale(1.05); } .service-card-body { padding:20px 22px 24px; } .service-card-icon { width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:12px; } .service-card-title { font-size:17px;font-weight:700;margin-bottom:6px; } .service-card-desc { font-size:14px;color:var(--text-muted);line-height:1.6; } .service-card-link { display:inline-flex;align-items:center;gap:4px;margin-top:14px;font-size:14px;font-weight:600;color:var(--brand);transition:gap 0.2s; } .service-card:hover .service-card-link { gap:8px; } /* ── Tax Section ── */ .tax-box { background:linear-gradient(135deg,#F0F7FF 0%,#EBF3FF 100%);border-radius:32px;overflow:hidden; } .tax-inner { display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:center; } @media(max-width:768px) { .tax-inner{grid-template-columns:1fr} .tax-img-side{display:none} } .tax-content { padding:40px 48px; } @media(max-width:768px) { .tax-content{padding:28px 24px} } .tax-badge { display:inline-flex;align-items:center;gap:8px;background:var(--amber-pale);border:1px solid rgba(245,158,11,0.3);border-radius:50px;padding:6px 14px;margin-bottom:20px;font-size:13px;font-weight:700;color:#92400E; } .tax-number { font-size:clamp(4rem,8vw,7rem);font-weight:900;line-height:1;margin-bottom:8px;background:linear-gradient(135deg,var(--brand),var(--blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; } .tax-title { font-family:'Fraunces',serif;font-size:clamp(1.6rem,2.5vw,2.2rem);font-weight:600;color:var(--text);margin-bottom:16px;line-height:1.3; } .tax-desc { font-size:16px;color:var(--text-muted);line-height:1.7;margin-bottom:20px; } .tax-img-side { height:100%;min-height:400px; } .tax-img-side img { width:100%;height:100%;object-fit:contain;padding:32px; } /* ── How It Works ── */ .how-grid { display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center; } @media(max-width:900px) { .how-grid{grid-template-columns:1fr;gap:24px} } @media(max-width:480px) { .how-grid{gap:18px} } .how-steps { display:flex;flex-direction:column;margin-top:40px; } .how-step { display:flex;gap:20px;position:relative;padding-bottom:36px; } .how-step:last-child { padding-bottom:0; } .how-step-line { position:absolute;left:19px;top:48px;bottom:0;width:2px;background:linear-gradient(to bottom,var(--brand),transparent); } .how-step:last-child .how-step-line { display:none; } .how-step-num { width:40px;height:40px;border-radius:50%;flex-shrink:0;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;position:relative;z-index:1; } .how-step-body { padding-top:8px; } .how-step-title { font-size:18px;font-weight:700;margin-bottom:6px; } .how-step-desc { font-size:15px;color:var(--text-muted);line-height:1.6; } .how-img { border-radius:24px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,0.12); } .how-img img { width:100%;height:100%;object-fit:cover;display:block; } /* ── Feature columns (3 across) ── */ .feature-cols { display:grid;grid-template-columns:repeat(3,1fr);gap:24px; } @media(max-width:768px) { .feature-cols{grid-template-columns:1fr} } .feature-col { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:28px; transition:all 0.3s ease; } .feature-col:hover { border-color:transparent; box-shadow:0 20px 40px rgba(0,0,0,0.08); transform:translateY(-4px); } .feature-col-icon { width:48px;height:48px;border-radius:12px; display:flex;align-items:center;justify-content:center; font-size:22px; margin-bottom:16px; background:var(--brand-pale); color:var(--brand); } .feature-col h3 { font-size:18px;font-weight:700;margin-bottom:8px; } .feature-col p { font-size:14px;color:var(--text-muted);line-height:1.7; } /* ── Inclusion Lists (for service pages) ── */ .inclusion-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:28px; } @media(max-width:768px) { .inclusion-grid{grid-template-columns:1fr;gap:16px} } .inclusion-block h3 { font-family:'Fraunces',serif; font-size:22px; font-weight:600; margin-bottom:16px; color:var(--text); display:flex; align-items:center; gap:10px; } .inclusion-block h3 .icon { width:32px;height:32px;border-radius:8px;background:var(--brand-pale);display:flex;align-items:center;justify-content:center;font-size:16px; color:var(--brand); } .inclusion-list { list-style:none; padding:0; } .inclusion-list li { display:flex; align-items:flex-start; gap:10px; padding:8px 0; font-size:14.5px; color:var(--text); line-height:1.6; } .inclusion-list li::before { content:''; width:18px; height:18px; flex-shrink:0; margin-top:3px; background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232D7D46'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z'/%3E%3C/svg%3E") center/contain no-repeat; } /* ── Pricing Table ── */ .pricing-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-bottom:32px; } .pricing-card-header { padding:24px 28px; background:var(--bg-gray); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:14px; } .pricing-card-header .icon { width:40px;height:40px;border-radius:10px;background:var(--brand-pale); display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--brand); } .pricing-card-header h3 { font-size:18px;font-weight:700; } .pricing-table { width:100%; border-collapse:collapse; } .pricing-table th, .pricing-table td { text-align:left; padding:14px 28px; border-bottom:1px solid var(--border); font-size:14.5px; } .pricing-table th { color:var(--text-muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:0.05em; background:var(--bg-gray-2); } .pricing-table tr:last-child td { border-bottom:none; } .pricing-table .price { font-weight:700; color:var(--text); text-align:right; white-space:nowrap; } .pricing-table tr:hover { background:var(--bg-gray-2); } /* ── FAQ ── */ .faq-list { max-width:800px; margin:0 auto; } .faq-item { border:1px solid var(--border); border-radius:12px; background:#fff; margin-bottom:12px; overflow:hidden; transition:all 0.2s; } .faq-item:hover { border-color:#D1D5DB; } .faq-item.open { border-color:var(--brand); box-shadow:0 8px 24px rgba(20,112,247,0.08); } .faq-q { padding:20px 24px; cursor:pointer; font-weight:600; font-size:15.5px; color:var(--text); display:flex; justify-content:space-between; align-items:center; gap:16px; } .faq-q::after { content:'+'; font-size:22px; font-weight:400; color:var(--text-muted); transition:transform 0.2s; flex-shrink:0; } .faq-item.open .faq-q::after { transform:rotate(45deg); color:var(--brand); } .faq-a { max-height:0; overflow:hidden; transition:max-height 0.3s ease, padding 0.3s ease; padding:0 24px; font-size:15px; color:var(--text-muted); line-height:1.7; } .faq-item.open .faq-a { max-height:600px; padding-bottom:20px; } /* ── Before/After ── */ .ba-container { position:relative;border-radius:24px;overflow:hidden;max-width:800px;margin:0 auto;cursor:col-resize;box-shadow:0 24px 60px rgba(0,0,0,0.12); } .ba-img { width:100%;display:block; } .ba-after-overlay { position:absolute;top:0;left:0;height:100%;overflow:hidden; } .ba-after-overlay img { height:100%;width:auto;max-width:none;position:absolute;top:0;left:0; } .ba-divider { position:absolute;top:0;height:100%;width:3px;background:#fff;transform:translateX(-50%);display:flex;align-items:center;justify-content:center; } .ba-handle { width:44px;height:44px;border-radius:50%;background:#fff;box-shadow:0 4px 16px rgba(0,0,0,0.2);display:flex;align-items:center;justify-content:center;font-size:18px;user-select:none; } .ba-label { position:absolute;top:16px;background:rgba(0,0,0,0.6);color:#fff;font-size:12px;font-weight:700;padding:4px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:0.05em; } .ba-label-before { left:16px; } .ba-label-after { right:16px; } /* ── Locations ── */ .locations-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:20px; } @media(max-width:768px) { .locations-grid{grid-template-columns:repeat(2,1fr)} } .location-card { border-radius:16px;overflow:hidden;position:relative;aspect-ratio:3/4;cursor:default; } .location-card img { width:100%;height:100%;object-fit:cover;transition:transform 0.4s ease; } .location-card:hover img { transform:scale(1.03); } .location-overlay { position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.65) 0%,transparent 50%);display:flex;flex-direction:column;justify-content:flex-end;padding:20px; } .location-name { color:#fff;font-size:18px;font-weight:700; } .location-sub { color:rgba(255,255,255,0.8);font-size:13px;margin-top:2px; } /* ── Testimonials ── */ .testimonials-bg { background:linear-gradient(135deg,#F9FAFB 0%,#F0F7FF 100%); } .testimonials-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:24px; } @media(max-width:768px) { .testimonials-grid{grid-template-columns:1fr} } .testimonial-card { background:#fff;border-radius:var(--radius);padding:28px;border:1px solid var(--border);transition:all 0.3s ease; } .testimonial-card:hover { transform:translateY(-4px);box-shadow:0 20px 40px rgba(0,0,0,0.07); } /* Reviews horizontal carousel with prev/next arrows */ .reviews-carousel { position:relative; } .reviews-scroll { display:flex; gap:20px; overflow-x:auto; scroll-behavior:smooth; padding:4px 4px 24px; scroll-snap-type:x mandatory; scrollbar-width:thin; } .reviews-scroll::-webkit-scrollbar { height:6px; } .reviews-scroll::-webkit-scrollbar-thumb { background:rgba(20,112,247,0.25); border-radius:3px; } .reviews-scroll .testimonial-card { flex:0 0 320px; scroll-snap-align:start; } @media(max-width:640px) { .reviews-scroll .testimonial-card { flex-basis:85%; } } .reviews-arrow { position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; background:#fff; color:var(--blue); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,0.10); z-index:2; transition:all 0.2s; } .reviews-arrow:hover { background:var(--blue); color:#fff; transform:translateY(-50%) scale(1.05); } .reviews-arrow-prev { left:-8px; } .reviews-arrow-next { right:-8px; } @media(max-width:640px) { .reviews-arrow-prev { left:4px; } .reviews-arrow-next { right:4px; } } .testimonial-stars { color:#F59E0B;font-size:16px;margin-bottom:14px;letter-spacing:2px; } .testimonial-text { font-size:15px;color:var(--text);line-height:1.7;margin-bottom:20px;font-style:italic; } .testimonial-author { display:flex;align-items:center;gap:12px; } .testimonial-avatar { width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--blue));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:16px;flex-shrink:0; } .testimonial-name { font-weight:700;font-size:15px; } .testimonial-role { font-size:13px;color:var(--text-muted); } /* ── CTA ── */ .cta-section { position:relative;text-align:center;overflow:hidden;background:#fff; } .cta-bg { position:absolute;inset:0;overflow:hidden;z-index:0; } .cta-orb-1 { position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(20,112,247,0.15) 0%,transparent 70%);filter:blur(80px);top:-100px;right:-100px;animation:orb1 12s ease-in-out infinite; } .cta-orb-2 { position:absolute;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(20,112,247,0.12) 0%,transparent 70%);filter:blur(80px);bottom:-80px;left:-60px;animation:orb2 14s ease-in-out infinite 3s; } .cta-inner { position:relative;z-index:1; } .cta-title { font-family:'Fraunces',serif;font-size:clamp(2.2rem,4vw,3.5rem);font-weight:600;line-height:1.15;letter-spacing:-0.02em;color:var(--text);margin-bottom:16px; } .cta-title em { font-style:italic;color:var(--brand); } .cta-sub { font-size:18px;color:var(--text-muted);max-width:480px;margin:0 auto 36px;line-height:1.6; } .cta-buttons { display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap; } /* ── Footer ── */ footer { background:var(--text);color:rgba(255,255,255,0.8);padding:72px 24px 32px;font-size:15px; } .footer-inner { max-width:1200px;margin:0 auto; } .footer-grid { display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px; } @media(max-width:768px) { .footer-grid{grid-template-columns:1fr 1fr;gap:32px} } .footer-brand img { height:36px;margin-bottom:18px;filter:brightness(0) invert(1);opacity:0.95; } .footer-brand p { font-size:15px;line-height:1.75;max-width:340px; margin-bottom:14px;color:rgba(255,255,255,0.8); } .footer-brand address { font-style:normal; font-size:14px; line-height:1.7; color:rgba(255,255,255,0.75); } .footer-col-title { color:#fff;font-size:16px;font-weight:700;margin-bottom:18px; letter-spacing:0.01em; } .footer-col a { display:block;color:rgba(255,255,255,0.75);font-size:15px;text-decoration:none;margin-bottom:12px;transition:color 0.2s; } .footer-col a:hover { color:#fff; } .footer-bottom { border-top:1px solid rgba(255,255,255,0.12);padding-top:28px;display:flex;justify-content:space-between;align-items:center;font-size:14px;flex-wrap:wrap;gap:14px; } /* Footer icons with circular backgrounds (matches the rest of the site) */ .footer-icon { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.10); font-size:14px; flex-shrink:0; } .footer-icon-social { background:rgba(255,255,255,0.10); color:rgba(255,255,255,0.9); transition:background 0.2s, color 0.2s; } .footer-col a:hover .footer-icon-social { background:#fff; color:var(--text); } [id] { scroll-margin-top:80px; } /* Floating action buttons (call + whatsapp) */ .float-actions { position:fixed; bottom:24px; right:24px; z-index:999; display:flex; flex-direction:column; gap:12px; } .float-btn { width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; text-decoration:none; transition:transform 0.2s, box-shadow 0.2s; position:relative; } .float-btn:hover { transform:scale(1.08); } .float-btn.wa { background:#25D366; box-shadow:0 8px 24px rgba(37,211,102,0.45); } .float-btn.wa:hover { box-shadow:0 12px 32px rgba(37,211,102,0.55); } .float-btn.call { background:var(--brand); box-shadow:0 8px 24px rgba(20,112,247,0.45); } .float-btn.call:hover { box-shadow:0 12px 32px rgba(20,112,247,0.55); } .float-btn .label { position:absolute; right:64px; top:50%; transform:translateY(-50%); background:var(--text); color:#fff; font-size:13px; font-weight:600; padding:6px 12px; border-radius:50px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity 0.2s; } .float-btn:hover .label { opacity:1; } .wa-float { display:none; } /* legacy */ /* Calc type button hover */ .calc-type-btn:hover { border-color:var(--brand-light) !important; } /* Reserve vertical space for the JS-rendered calculator + reviews widgets so the page doesn't show a blank gap / layout-shift while widgets.js runs. Once the widget's real markup replaces the placeholder div, the min-height no longer applies (the element is replaced via outerHTML). */ [data-calc]:empty { display:block; min-height:560px; } [data-reviews]:empty { display:block; min-height:360px; } @media (max-width:780px) { [data-calc]:empty { min-height:680px; } [data-reviews]:empty { min-height:520px; } } /* Service-page hero specific */ .service-hero { padding:110px 24px 56px; position:relative; } @media (max-width:780px) { .service-hero { padding:88px 18px 36px; } } .service-hero-content { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1.2fr 1fr; gap:64px; align-items:center; position:relative; z-index:1; } @media(max-width:900px) { .service-hero-content{grid-template-columns:1fr} } .breadcrumb { font-size:13px; color:var(--text-muted); margin-bottom:20px; } .breadcrumb a { color:var(--text-muted); text-decoration:none; transition:color 0.2s; } .breadcrumb a:hover { color:var(--brand); } .breadcrumb .sep { margin:0 8px; color:#D1D5DB; } .breadcrumb .current { color:var(--text); font-weight:500; } /* Utility */ .mt-16 { margin-top:16px; } .mt-24 { margin-top:24px; } .mt-32 { margin-top:32px; } .center { text-align:center; } /* ════════════════════════════════════════════════════════════ KAN-18 — Mobile responsive fixes ════════════════════════════════════════════════════════════ */ /* Defensive: stop horizontal overflow on the whole document */ html, body { max-width:100vw; overflow-x:hidden; } img, video, iframe, table { max-width:100%; } /* Hero quote form (homepage + service pages) — stack inputs vertically on small screens */ @media (max-width:540px) { #hero-quote-form > div[style*="flex"], [data-quote-form] form > div[style*="flex"] { flex-direction:column !important; gap:8px !important; } #hero-quote-form input[name="phone"], #hero-quote-form input[name="zip"], #hero-quote-form button[type="submit"], [data-quote-form] input[name="phone"], [data-quote-form] input[name="zip"], [data-quote-form] button[type="submit"] { width:100% !important; min-width:0 !important; flex:0 0 auto !important; } } /* Service hero: visual column should stack below the text + form on mobile */ @media (max-width:900px) { .service-hero-content { grid-template-columns:1fr !important; gap:32px; } .service-hero .hero-visual { order:-1; } .service-hero .hero-img-wrap img { width:100%; height:auto; } } /* Pricing tables: keep rows readable & prevent horizontal scroll */ @media (max-width:540px) { .pricing-card { padding:16px; } .pricing-table th, .pricing-table td { padding:10px 8px; font-size:14px; } .pricing-table .price { font-size:13px; } } /* Calculator widgets: 3-up tier grid → stack on small screens */ @media (max-width:640px) { .calc-type-grid { grid-template-columns:1fr !important; } /* Booking-page calculator (Next.js) tiers — only mounted as iframe child but the same selectors apply when previewed standalone. */ .calc-shell { padding:20px 16px; } } /* Locations: 4-up → 2-up below 640 (already 2-up below 768 — tighten layout). */ @media (max-width:540px) { .locations-grid { grid-template-columns:repeat(2,1fr); gap:12px; } .location-tile { padding:18px 12px; } } /* Reviews scroll: better thumb area on mobile */ @media (max-width:640px) { .reviews-scroll { padding:0 16px; } } /* Footer: single column at very small widths */ @media (max-width:480px) { .footer-grid { grid-template-columns:1fr !important; gap:28px; } } /* Buttons that say "Book service" etc — full width on mobile so they're easy to tap */ @media (max-width:540px) { .btn-primary, .btn-outline { width:100%; justify-content:center; text-align:center; } .hero-actions { width:100%; } } /* Tax / calculator boxes overflow protection */ @media (max-width:540px) { .tax-inner, .how-grid { gap:24px; } .tax-content { padding:32px 20px; } } /* Hero floating cards on homepage clip viewport — hide on small screens */ @media (max-width:640px) { .hero-float-card { display:none; } } /* Section header bottom margin tightened on mobile (paired with KAN-23 padding fix) */ @media (max-width:540px) { .section-header { margin-bottom:20px; } .section-title { font-size:clamp(1.6rem,7vw,2rem); margin-bottom:10px; } .section-tag { margin-bottom:10px; font-size:13px; } .section-header .section-sub { font-size:15px; line-height:1.55; } } /* ════════════════════════════════════════════════════════════ KAN-23 / Mobile whitespace — aggressive collapse so mobile users don't scroll through huge empty bands between sections. ════════════════════════════════════════════════════════════ */ @media (max-width:540px) { /* Section spacing already 28px top + 28px bottom (= 56px total gap) via the base `section { padding:28px 16px }`. Inline styles override that on a few sections (look for style="background:...;" with no padding), so guarantee them at the section level. */ section[style] { padding-top:28px !important; padding-bottom:28px !important; } /* Utility margins collapse on mobile — they're paired with section padding. */ .mt-32 { margin-top:18px; } .mt-24 { margin-top:14px; } .mt-16 { margin-top:10px; } /* Hero — drop the floating-card padding and tighten the badge gap. */ .hero-features { gap:10px 16px; margin-bottom:16px; } .hero-feature { font-size:13px; } .hero-sub { font-size:15px; margin-bottom:14px; } .hero-badge { margin-bottom:12px; padding:5px 12px; font-size:12px; } .breadcrumb { font-size:12px; margin-bottom:10px; } /* Calculator widget — the inner padding & vertical gaps stack on phones. */ [data-calc] section { padding:24px 12px; } .calc-shell { padding:18px 14px; } .calc-type-grid { gap:8px; margin-bottom:16px; } .calc-type-btn { padding:12px; } /* Feature columns: each card has its own padding; rows had 24px gap. */ .feature-cols { gap:14px; } .feature-col { padding:18px; } /* CTA section at end of pages — was bumpy with 100px padding inherited. */ .cta-section { padding:32px 16px; } .cta-buttons { gap:10px; flex-direction:column; align-items:stretch; } /* Footer: tighter spacing between columns and within columns. */ footer { padding:32px 16px 16px; } .footer-inner { gap:24px; } .footer-grid { gap:24px; } .footer-col { gap:8px; } .footer-bottom { margin-top:20px; padding-top:16px; flex-direction:column; gap:10px; } /* FAQ items — collapse vertical padding between Q&As. */ .faq-item { padding:12px 0; } .faq-list { gap:0; } /* Reviews / testimonials carousel — less padding between cards. */ .reviews-scroll, .testimonials-grid { gap:12px; } .testimonial-card { padding:18px; } }