/* Fresh Fold Laundromat - Design System */ /* Premium, modern static site styles */ /* ============================================ Font - Be Vietnam Pro (Google Fonts CDN) Self-hosted @font-face removed; using Google Fonts link in HTML instead. ============================================ */ /* ============================================ Motion Tokens ============================================ */ :root { --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-default: ease-out; --duration-fast: 150ms; --duration-medium: 250ms; --duration-slow: 500ms; --translate-sm: 12px; --translate-md: 16px; } /* ============================================ Global Focus Ring ============================================ */ *:focus-visible { outline: 2px solid #E07B2B; outline-offset: 2px; } /* ============================================ Base & Reset ============================================ */ html { scroll-behavior: smooth; font-size: 16px; } @media (min-width: 1024px) { html { font-size: 18px; } } body { font-family: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.01em; } /* ============================================ Fluid Typography Scale ============================================ */ .heading-xl { font-size: clamp(1.85rem, 5vw, 3.25rem); line-height: 1.08; letter-spacing: -0.03em; font-weight: 700; } .about-headline { font-size: clamp(1.65rem, 3.4vw, 2.65rem); line-height: 1.1; letter-spacing: -0.03em; font-weight: 700; white-space: nowrap; } @media (max-width: 767px) { .about-headline { white-space: normal; } } .heading-lg { font-size: clamp(1.5rem, 3.4vw, 2.975rem); line-height: 1.15; letter-spacing: -0.025em; font-weight: 600; } .heading-md { font-size: clamp(1.35rem, 2.5vw, 1.875rem); line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; } .heading-sm { font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.3; letter-spacing: -0.015em; font-weight: 600; } .body-lg { font-size: clamp(1.05rem, 1.2vw, 1.2rem); line-height: 1.7; } .body-md { font-size: clamp(0.925rem, 1vw, 1.05rem); line-height: 1.7; } .label-sm { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; } /* ============================================ Mobile Centering (below 768px) ============================================ */ @media (max-width: 767px) { .heading-xl, .heading-lg, .heading-md, .heading-sm, .body-lg, .body-md, .label-sm { text-align: center; } /* FAQ answers left-aligned for readability */ .faq-section .body-md { text-align: left; } /* Center and unconstrain containers on mobile */ .max-w-2xl, .max-w-xl, .max-w-lg, .max-w-md { max-width: 100% !important; margin-left: auto; margin-right: auto; } /* Homepage hero centering */ #hero-headline { text-align: center; } /* CTA buttons full-width and centered on mobile */ .btn-primary, .btn-secondary, .btn-nav { display: flex !important; width: 100% !important; max-width: 100% !important; text-align: center; justify-content: center; box-sizing: border-box; } /* Button containers stretch full width */ .flex.flex-col.sm\:flex-row, .flex.flex-col.gap-3, .mt-8.flex.flex-col { align-items: stretch; width: 100%; } /* Inline-flex buttons forced to block flex */ a[class*="btn-"].inline-flex, button[class*="btn-"] { display: flex; width: 100%; } /* Feature pills center */ .feature-pill { justify-content: center; } /* Trenton visit info blocks centered */ .flex.items-start.gap-4 { flex-direction: column; align-items: center; text-align: center; } /* Footer mobile */ footer { text-align: center; } footer .grid { grid-template-columns: 1fr 1fr !important; gap: 2rem; text-align: center; } footer .grid > div { display: flex; flex-direction: column; align-items: center; } footer .grid > div:first-child { grid-column: 1 / -1; margin-bottom: 1rem; } footer img { width: 32%; height: auto; } footer .flex.flex-col.sm\:flex-row, footer .flex.items-center { justify-content: center; flex-wrap: wrap; } /* Center bottom legal links */ footer .border-t { text-align: center; } footer .border-t .flex { justify-content: center; } } /* ============================================ Promo Banner ============================================ */ .promo-banner { animation: slideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1); overflow: hidden; } @keyframes slideDown { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .promo-banner .promo-text, .promo-banner .promo-text-mobile { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .promo-text.promo-exit, .promo-text-mobile.promo-exit { transform: translateY(-100%); opacity: 0; } .promo-text.promo-enter, .promo-text-mobile.promo-enter { transform: translateY(100%); opacity: 0; } /* ============================================ Frosted Glass Navigation ============================================ */ #header { background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid rgba(8, 64, 98, 0.06); transition: box-shadow 0.3s ease, background 0.3s ease; } #header.scrolled { background: rgba(255, 255, 255, 0.95); box-shadow: 0 1px 3px rgba(8, 64, 98, 0.08), 0 4px 20px rgba(8, 64, 98, 0.04); } .nav-link { position: relative; padding: 4px 0; } .nav-link::after { content: ''; position: absolute; bottom: -2px; left: 50%; width: 0; height: 2px; background: linear-gradient(90deg, #E07B2B, #f0943f); border-radius: 1px; transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1), left 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .nav-link:hover::after, .nav-link.active::after { width: 100%; left: 0; } .dropdown-menu { opacity: 0; visibility: hidden; transform: translateY(8px); transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); background: rgba(255, 255, 255, 0.98); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 4px 24px rgba(8, 64, 98, 0.1), 0 1px 3px rgba(8, 64, 98, 0.06); border: 1px solid rgba(8, 64, 98, 0.06); border-radius: 12px; } .dropdown:hover .dropdown-menu, .dropdown.open .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } /* Mobile menu */ .mobile-menu { transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); background: #ffffff; color: #084062; flex-direction: column; } .mobile-menu.open { transform: translateX(0); } .mobile-menu nav { color: #084062; } .mobile-menu a:not(.btn-primary):not(.btn-secondary) { color: #084062; } .mobile-menu button { color: #084062; } body.menu-open { overflow: hidden; } /* ============================================ Buttons ============================================ */ .btn-primary { display: flex; align-items: center; justify-content: center; gap: 8px; width: auto; padding: 12px 24px; font-weight: 600; font-size: 0.875rem; border-radius: 8px; background: #E07B2B; color: white; transition: transform var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default), background var(--duration-fast) var(--ease-default); box-shadow: 0 1px 2px rgba(224, 123, 43, 0.2); letter-spacing: -0.01em; } .btn-primary:hover { background: #d06a1a; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(224, 123, 43, 0.25); } .btn-primary:active { transform: translateY(0) scale(0.98); } .btn-secondary { display: flex; align-items: center; justify-content: center; gap: 8px; width: auto; padding: 12px 24px; font-weight: 600; font-size: 0.875rem; border-radius: 8px; border: 1.5px solid #084062; color: #084062; transition: transform var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default), background var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default); letter-spacing: -0.01em; } .btn-secondary:hover { background: #084062; color: white; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(8, 64, 98, 0.2); } .btn-secondary:active { transform: translateY(0) scale(0.98); } .btn-nav { display: flex; align-items: center; justify-content: center; width: auto; padding: 10px 20px; font-weight: 600; font-size: 0.8rem; border-radius: 8px; background: #E07B2B; color: white; transition: transform var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default), background var(--duration-fast) var(--ease-default); box-shadow: 0 1px 2px rgba(224, 123, 43, 0.2); } .btn-nav:hover { background: #d06a1a; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(224, 123, 43, 0.25); } /* ============================================ Stats (dark text on white, no background) ============================================ */ .stat-item { position: relative; } .stat-item:not(:last-child)::after { content: ''; position: absolute; left: calc(100% + 0.5rem); transform: translateX(-50%); top: 15%; height: 70%; width: 1px; background: rgba(8, 64, 98, 0.1); z-index: 11; } /* Frosted backdrop behind text — fades bubbles/stars under the numbers */ .stat-item::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(80% + 40px); height: calc(90% + 40px); background: rgba(255, 255, 255, 0.85); filter: blur(15px); z-index: 10; pointer-events: none; border-radius: 50%; } .stat-number { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: #000000; transform: scale(0.95); transition: transform 0.3s ease-out; position: relative; z-index: 20; } .stat-number.counted { transform: scale(1); } .stats-grid { overflow: visible; } /* Orb container */ .stat-orbs { position: absolute; top: -20px; left: -20px; right: -20px; bottom: -30px; z-index: 0; pointer-events: none; } /* Base orb — clean white soap bubble */ .orb { position: absolute; border-radius: 50%; display: block; opacity: 1; background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(160, 160, 160, 0.35); z-index: 1; will-change: transform; } /* Orb sizes and positions — 12 per stat, largest shrunk 20% */ /* Stat 1 — 12 orbs */ .orb-a1 { width: 36px; height: 36px; top: -10px; left: 5%; } .orb-a2 { width: 35px; height: 35px; top: 40px; left: 50%; } .orb-a3 { width: 40px; height: 40px; top: -5px; left: 28%; } .orb-a5 { width: 16px; height: 16px; top: 55px; left: 65%; } .orb-a6 { width: 38px; height: 38px; top: 20px; left: 18%; } .orb-a7 { width: 28px; height: 28px; top: 75px; left: 82%; } .orb-a9 { width: 38px; height: 38px; top: -14px; left: 88%; } .orb-a10 { width: 20px; height: 20px; top: 48px; left: 92%; } .orb-a11 { width: 32px; height: 32px; top: 60px; left: 15%; } .orb-a13 { width: 34px; height: 34px; top: 50px; left: 35%; } .orb-a14 { width: 15px; height: 15px; top: 70px; left: 48%; } .orb-a15 { width: 30px; height: 30px; top: 10px; left: 78%; } /* Stat 2 — 12 orbs, evenly distributed */ .orb-b1 { width: 40px; height: 40px; top: 5px; left: 8%; } .orb-b2 { width: 44px; height: 44px; top: -15px; left: 38%; } .orb-b4 { width: 30px; height: 30px; top: 70px; left: 55%; } .orb-b5 { width: 36px; height: 36px; top: 35px; left: 72%; } .orb-b7 { width: 34px; height: 34px; top: 22px; left: 25%; } .orb-b8 { width: 24px; height: 24px; top: 76px; left: 85%; } .orb-b10 { width: 36px; height: 36px; top: 62px; left: 62%; } .orb-b11 { width: 20px; height: 20px; top: 45px; left: 90%; } .orb-b12 { width: 25px; height: 25px; top: 42px; left: 48%; } .orb-b14 { width: 38px; height: 38px; top: -6px; left: 78%; } .orb-b15 { width: 19px; height: 19px; top: 55px; left: 15%; } .orb-b16 { width: 32px; height: 32px; top: 28px; left: 92%; } /* Stat 3 — 12 orbs, evenly distributed */ .orb-c1 { width: 38px; height: 38px; top: 0; left: 55%; } .orb-c3 { width: 34px; height: 34px; top: -12px; left: 22%; } .orb-c5 { width: 40px; height: 40px; top: 30px; left: 72%; } .orb-c6 { width: 28px; height: 28px; top: 68px; left: 45%; } .orb-c7 { width: 35px; height: 35px; top: -8px; left: 82%; } .orb-c9 { width: 34px; height: 34px; top: -14px; left: 8%; } .orb-c10 { width: 18px; height: 18px; top: 42px; left: 35%; } .orb-c11 { width: 26px; height: 26px; top: 62px; left: 92%; } .orb-c12 { width: 22px; height: 22px; top: 35px; left: 62%; } .orb-c13 { width: 32px; height: 32px; top: 52px; left: 15%; } .orb-c15 { width: 34px; height: 34px; top: 74px; left: 78%; } .orb-c16 { width: 18px; height: 18px; top: 18px; left: 48%; } /* Animations only when active */ .stats-grid.orbs-active .orb-a1 { animation: orbFloat1 7s ease-in-out infinite, orbBreathe1 5s ease-in-out infinite; animation-delay: 0s, 0.3s; } .stats-grid.orbs-active .orb-a2 { animation: orbFloat2 6s ease-in-out infinite, orbBreathe2 4s ease-in-out infinite; animation-delay: 1.2s, 0.8s; } .stats-grid.orbs-active .orb-a3 { animation: orbFloat3 8s ease-in-out infinite, orbBreathe3 6s ease-in-out infinite; animation-delay: 0.5s, 1.5s; } .stats-grid.orbs-active .orb-a5 { animation: orbFloat2 7.5s ease-in-out infinite, orbBreathe1 3.5s ease-in-out infinite; animation-delay: 0.6s, 1.6s; } .stats-grid.orbs-active .orb-a6 { animation: orbFloat3 6.5s ease-in-out infinite, orbBreathe2 5.5s ease-in-out infinite; animation-delay: 2.2s, 0.9s; } .stats-grid.orbs-active .orb-a7 { animation: orbFloat1 8s ease-in-out infinite, orbBreathe3 4s ease-in-out infinite; animation-delay: 0.3s, 2.1s; } .stats-grid.orbs-active .orb-a9 { animation: orbFloat2 7s ease-in-out infinite, orbBreathe2 4.8s ease-in-out infinite; animation-delay: 0.8s, 2.5s; } .stats-grid.orbs-active .orb-a10 { animation: orbFloat1 6s ease-in-out infinite, orbBreathe3 5.2s ease-in-out infinite; animation-delay: 1.4s, 0.2s; } .stats-grid.orbs-active .orb-a11 { animation: orbFloat3 7.8s ease-in-out infinite, orbBreathe1 4.2s ease-in-out infinite; animation-delay: 3s, 1.8s; } .stats-grid.orbs-active .orb-a13 { animation: orbFloat2 7.4s ease-in-out infinite, orbBreathe3 5.3s ease-in-out infinite; animation-delay: 0.4s, 2.9s; } .stats-grid.orbs-active .orb-a14 { animation: orbFloat3 5.3s ease-in-out infinite, orbBreathe1 3.6s ease-in-out infinite; animation-delay: 3.4s, 1.3s; } .stats-grid.orbs-active .orb-a15 { animation: orbFloat1 6.8s ease-in-out infinite, orbBreathe2 4.9s ease-in-out infinite; animation-delay: 0.9s, 3.2s; } .stats-grid.orbs-active .orb-b1 { animation: orbFloat2 6.5s ease-in-out infinite, orbBreathe2 4.5s ease-in-out infinite; animation-delay: 0.7s, 0.2s; } .stats-grid.orbs-active .orb-b2 { animation: orbFloat1 7.5s ease-in-out infinite, orbBreathe1 5.5s ease-in-out infinite; animation-delay: 1.5s, 1s; } .stats-grid.orbs-active .orb-b4 { animation: orbFloat1 8s ease-in-out infinite, orbBreathe2 4s ease-in-out infinite; animation-delay: 2s, 0.5s; } .stats-grid.orbs-active .orb-b5 { animation: orbFloat2 7s ease-in-out infinite, orbBreathe1 5s ease-in-out infinite; animation-delay: 0.9s, 1.4s; } .stats-grid.orbs-active .orb-b7 { animation: orbFloat1 5.5s ease-in-out infinite, orbBreathe2 3.5s ease-in-out infinite; animation-delay: 0.4s, 2.3s; } .stats-grid.orbs-active .orb-b8 { animation: orbFloat2 6.8s ease-in-out infinite, orbBreathe1 4.2s ease-in-out infinite; animation-delay: 2.8s, 0.9s; } .stats-grid.orbs-active .orb-b10 { animation: orbFloat3 7.2s ease-in-out infinite, orbBreathe2 5.2s ease-in-out infinite; animation-delay: 0.2s, 1.5s; } .stats-grid.orbs-active .orb-b11 { animation: orbFloat2 8.2s ease-in-out infinite, orbBreathe1 4.8s ease-in-out infinite; animation-delay: 3.2s, 0.4s; } .stats-grid.orbs-active .orb-b12 { animation: orbFloat3 6.4s ease-in-out infinite, orbBreathe3 4.3s ease-in-out infinite; animation-delay: 1.3s, 2.7s; } .stats-grid.orbs-active .orb-b14 { animation: orbFloat2 7.6s ease-in-out infinite, orbBreathe2 5.4s ease-in-out infinite; animation-delay: 0.5s, 1.9s; } .stats-grid.orbs-active .orb-b15 { animation: orbFloat3 5.8s ease-in-out infinite, orbBreathe3 4.1s ease-in-out infinite; animation-delay: 2.4s, 0.3s; } .stats-grid.orbs-active .orb-b16 { animation: orbFloat1 7.2s ease-in-out infinite, orbBreathe1 5.1s ease-in-out infinite; animation-delay: 0.6s, 3.4s; } .stats-grid.orbs-active .orb-c1 { animation: orbFloat3 7s ease-in-out infinite, orbBreathe1 5s ease-in-out infinite; animation-delay: 0.4s, 1.2s; } .stats-grid.orbs-active .orb-c3 { animation: orbFloat2 8s ease-in-out infinite, orbBreathe2 5.5s ease-in-out infinite; animation-delay: 0.9s, 2s; } .stats-grid.orbs-active .orb-c5 { animation: orbFloat3 7.5s ease-in-out infinite, orbBreathe3 5s ease-in-out infinite; animation-delay: 0.2s, 1.7s; } .stats-grid.orbs-active .orb-c6 { animation: orbFloat2 5.5s ease-in-out infinite, orbBreathe2 3.5s ease-in-out infinite; animation-delay: 1.3s, 0.8s; } .stats-grid.orbs-active .orb-c7 { animation: orbFloat1 7s ease-in-out infinite, orbBreathe1 4.5s ease-in-out infinite; animation-delay: 0.7s, 2.4s; } .stats-grid.orbs-active .orb-c9 { animation: orbFloat2 6.8s ease-in-out infinite, orbBreathe1 5.2s ease-in-out infinite; animation-delay: 0.6s, 2.8s; } .stats-grid.orbs-active .orb-c10 { animation: orbFloat1 7.8s ease-in-out infinite, orbBreathe2 3.8s ease-in-out infinite; animation-delay: 1.6s, 1s; } .stats-grid.orbs-active .orb-c11 { animation: orbFloat3 6.2s ease-in-out infinite, orbBreathe3 4.8s ease-in-out infinite; animation-delay: 3.1s, 0.7s; } .stats-grid.orbs-active .orb-c12 { animation: orbFloat2 5.4s ease-in-out infinite, orbBreathe1 4.4s ease-in-out infinite; animation-delay: 2.2s, 1.1s; } .stats-grid.orbs-active .orb-c13 { animation: orbFloat1 7.6s ease-in-out infinite, orbBreathe2 5.3s ease-in-out infinite; animation-delay: 0.8s, 3s; } .stats-grid.orbs-active .orb-c15 { animation: orbFloat2 8.1s ease-in-out infinite, orbBreathe1 4.7s ease-in-out infinite; animation-delay: 0.3s, 2.2s; } .stats-grid.orbs-active .orb-c16 { animation: orbFloat1 5.9s ease-in-out infinite, orbBreathe2 4s ease-in-out infinite; animation-delay: 1.5s, 3.6s; } /* Float keyframes — gentle drifting */ @keyframes orbFloat1 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(12px, -8px) scale(1.1); } 66% { transform: translate(-8px, 10px) scale(0.9); } } @keyframes orbFloat2 { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(-10px, -12px) scale(0.85); } 50% { transform: translate(8px, 6px) scale(1.15); } 75% { transform: translate(-6px, 14px) scale(0.95); } } @keyframes orbFloat3 { 0%, 100% { transform: translate(0, 0) scale(0.95); } 40% { transform: translate(15px, 8px) scale(1.2); } 70% { transform: translate(-12px, -6px) scale(0.85); } } /* Breathe keyframes — gentle opacity pulsing in visible range */ @keyframes orbBreathe1 { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } } @keyframes orbBreathe2 { 0%, 100% { opacity: 0.8; } 50% { opacity: 0.95; } } @keyframes orbBreathe3 { 0%, 100% { opacity: 0.7; } 50% { opacity: 0.9; } } /* Sparkles — simple + cross shape */ .sparkle { position: absolute; z-index: 5; pointer-events: none; opacity: 0; background: #93C5FD; clip-path: polygon( 50% 0%, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0% 50%, 38% 38% ); } .stats-grid.orbs-active .sparkle { animation: twinkle var(--tw-dur, 2.5s) ease-in-out infinite; animation-delay: var(--tw-delay, 0s); } /* Positions: 20 stars, 9-16px Stars placed at outer edges (0-4%, 95-100%), column gaps (29-37%, 63-71%), and well above (-50 to -30px) or below (95-120px) the numbers */ /* Top edge — well above numbers */ .sparkle-1 { width: 14px; height: 14px; top: -45px; left: 3%; --tw-dur: 2.2s; --tw-delay: 0.3s; } .sparkle-2 { width: 11px; height: 11px; top: -38px; left: 34%; --tw-dur: 2.6s; --tw-delay: 1.5s; } .sparkle-3 { width: 16px; height: 16px; top: -42px; left: 66%; --tw-dur: 2.4s; --tw-delay: 0.8s; } .sparkle-4 { width: 10px; height: 10px; top: -35px; left: 97%; --tw-dur: 2.8s; --tw-delay: 2.1s; } /* Bottom edge — well below labels */ .sparkle-6 { width: 16px; height: 16px; top: 100px; left: 1%; --tw-dur: 2.3s; --tw-delay: 1.8s; } .sparkle-7 { width: 10px; height: 10px; top: 108px; left: 33%; --tw-dur: 2.7s; --tw-delay: 1.1s; } .sparkle-8 { width: 14px; height: 14px; top: 112px; left: 65%; --tw-dur: 2.9s; --tw-delay: 2.5s; } .sparkle-9 { width: 12px; height: 12px; top: 98px; left: 98%; --tw-dur: 2.1s; --tw-delay: 0.9s; } /* Far left edge (0-4%) */ .sparkle-11 { width: 9px; height: 9px; top: 10px; left: 1%; --tw-dur: 2.4s; --tw-delay: 0.6s; } .sparkle-12 { width: 12px; height: 12px; top: 45px; left: 2%; --tw-dur: 2.7s; --tw-delay: 2.3s; } /* Far right edge (95-100%) */ .sparkle-14 { width: 11px; height: 11px; top: 8px; left: 98%; --tw-dur: 2.6s; --tw-delay: 0.4s; } .sparkle-15 { width: 14px; height: 14px; top: 50px; left: 96%; --tw-dur: 3s; --tw-delay: 2.8s; } /* Narrow gap between stat 1 & 2 (29-37%) */ .sparkle-17 { width: 15px; height: 15px; top: 5px; left: 31%; --tw-dur: 2.9s; --tw-delay: 0.7s; } .sparkle-18 { width: 12px; height: 12px; top: 38px; left: 35%; --tw-dur: 2.5s; --tw-delay: 2s; } /* Narrow gap between stat 2 & 3 (63-71%) */ .sparkle-20 { width: 13px; height: 13px; top: 8px; left: 67%; --tw-dur: 2.6s; --tw-delay: 1.9s; } .sparkle-21 { width: 16px; height: 16px; top: 42px; left: 64%; --tw-dur: 2.1s; --tw-delay: 3.1s; } .sparkle-22 { width: 11px; height: 11px; top: 72px; left: 69%; --tw-dur: 2.8s; --tw-delay: 0.8s; } /* Corner accents — far from any text */ .sparkle-23 { width: 14px; height: 14px; top: -32px; left: 15%; --tw-dur: 2.4s; --tw-delay: 2.4s; } .sparkle-25 { width: 15px; height: 15px; top: 110px; left: 18%; --tw-dur: 2.2s; --tw-delay: 3.4s; } .sparkle-26 { width: 12px; height: 12px; top: 102px; left: 82%; --tw-dur: 3s; --tw-delay: 0.6s; } @keyframes twinkle { 0%, 100% { opacity: 0; } 50% { opacity: 0.7; } } .stat-label { color: #94A3B8; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; position: relative; z-index: 20; margin-top: 8px; } /* Mobile stats — stack vertically */ @media (max-width: 767px) { .stats-grid { grid-template-columns: 1fr !important; gap: 3rem; } .stat-item { padding: 0.75rem 0; } .stat-number { font-size: 2.75rem; } /* Vertical divider → horizontal divider between stacked stats */ .stat-item:not(:last-child)::after { top: auto; bottom: -0.5rem; left: 20%; right: 20%; transform: none; width: auto; height: 1px; } /* Shrink orb field 25% on mobile — scales container so no animation conflicts */ .stat-orbs { transform: scale(0.75); } /* Stronger frosted backdrop on mobile — covers center text area */ .stat-item::before { width: 60%; height: 100%; background: rgba(255, 255, 255, 0.93); filter: blur(20px); border-radius: 40%; } /* Hide ~25% of orbs — biggest/most centered ones */ .orb-a2, .orb-a3, .orb-a14, .orb-b2, .orb-b4, .orb-b12, .orb-c1, .orb-c6, .orb-c10 { display: none; } /* Hide ~25% of sparkles — column-gap ones that overlap centered text */ .sparkle-17, .sparkle-18, .sparkle-20, .sparkle-21, .sparkle-22 { display: none; } /* Redistribute remaining sparkle tops for taller stacked grid. Desktop pixel tops cluster in top 1/3; percentages spread across full height. */ .sparkle-1 { top: -5%; } .sparkle-23 { top: 8%; } .sparkle-11 { top: 22%; } .sparkle-2 { top: 34%; } .sparkle-12 { top: 48%; } .sparkle-7 { top: 62%; } .sparkle-6 { top: 78%; } .sparkle-25 { top: 102%; } .sparkle-4 { top: 0%; } .sparkle-3 { top: 15%; } .sparkle-14 { top: 30%; } .sparkle-15 { top: 45%; } .sparkle-8 { top: 60%; } .sparkle-9 { top: 80%; } .sparkle-26 { top: 100%; } } /* Tablet stats — keep 3-col but scale down */ @media (min-width: 768px) and (max-width: 1023px) { .stat-number { font-size: clamp(2rem, 4vw, 3rem); } } /* ============================================ Homepage Entrance Animation ============================================ */ .hero-entrance { opacity: 0; transform: translateY(var(--translate-md)); animation: heroFadeUp 0.7s var(--ease-out) forwards; } /* Headline */ .hero-entrance-1 { animation: heroFadeUp 0.7s var(--ease-out) forwards; animation-delay: 0s; } .hero-entrance-2 { animation-delay: 0.15s; } .hero-entrance-3 { animation-delay: 0.3s; } /* Hero image — fade from right */ .hero-entrance-4 { animation: heroFadeRight 0.7s var(--ease-out) forwards; animation-delay: 0.2s; transform: translateX(20px); } @keyframes heroFadeUp { to { opacity: 1; transform: translateY(0); } } @keyframes heroFadeRight { to { opacity: 1; transform: translateX(0); } } /* ============================================ Feature Pills ============================================ */ .feature-pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 24px; background: white; border: 1px solid rgba(8, 64, 98, 0.08); border-radius: 8px; font-size: 1rem; font-weight: 500; color: #084062; white-space: nowrap; transition: border-color 0.2s ease; } @media (max-width: 767px) { .feature-pill { flex: 0 0 calc(50% - 6px); padding: 10px 12px; font-size: clamp(0.7rem, 2.8vw, 0.85rem); white-space: normal; } } @media (min-width: 768px) { .feature-pill { flex: 0 0 calc(25% - 12px); } } /* Staggered entrance animations */ .pill-hidden { opacity: 0; transform: translateY(var(--translate-sm)); transition: opacity 300ms var(--ease-default), transform 300ms var(--ease-default); } .pill-visible { opacity: 1; transform: translateY(0); transition: opacity 300ms var(--ease-default), transform 300ms var(--ease-default); } .card-hidden { opacity: 0; transform: translateY(var(--translate-md)); transition: opacity 350ms var(--ease-default), transform 350ms var(--ease-default); } .card-visible { opacity: 1; transform: translateY(0); transition: opacity 350ms var(--ease-default), transform 350ms var(--ease-default); } .slide-left-hidden { opacity: 0; transform: translateX(-20px); transition: opacity 400ms var(--ease-default), transform 400ms var(--ease-default); } .slide-left-visible { opacity: 1; transform: translateX(0); transition: opacity 400ms var(--ease-default), transform 400ms var(--ease-default); } .slide-right-hidden { opacity: 0; transform: translateX(20px); transition: opacity 400ms var(--ease-default), transform 400ms var(--ease-default); } .slide-right-visible { opacity: 1; transform: translateX(0); transition: opacity 400ms var(--ease-default), transform 400ms var(--ease-default); } .faq-stagger-hidden { opacity: 0; transform: translateY(var(--translate-sm)); transition: opacity 300ms var(--ease-default), transform 300ms var(--ease-default); } .faq-stagger-visible { opacity: 1; transform: translateY(0); transition: opacity 300ms var(--ease-default), transform 300ms var(--ease-default); } .pill-check { width: 24px; height: 24px; color: #D4691A; flex-shrink: 0; } /* Feature pills are informational — no hover effect */ /* ============================================ Testimonial Cards ============================================ */ /* Scroll-snap carousel track */ .testimonial-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 16px; padding-bottom: 4px; } .testimonial-track::-webkit-scrollbar { display: none; } .testimonial-card { scroll-snap-align: start; flex: 0 0 calc(100% - 16px); } @media (min-width: 768px) { .testimonial-card { flex: 0 0 calc(50% - 12px); } } @media (min-width: 1024px) { .testimonial-card { flex: 0 0 calc(33.333% - 12px); } } /* Carousel dot indicators */ .carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 24px; } .carousel-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(8, 64, 98, 0.15); border: none; padding: 0; cursor: pointer; transition: background 0.2s var(--ease-default), transform 0.2s var(--ease-default); } .carousel-dot.active { background: #E07B2B; transform: scale(1.25); } /* Hide dots on mobile — swipe is the primary interaction */ @media (max-width: 767px) { .carousel-dots { display: none; } } .testimonial-card-inner { background: white; border: 1px solid rgba(8, 64, 98, 0.06); border-radius: 16px; padding: 32px; height: 100%; display: flex; flex-direction: column; transition: box-shadow 0.2s var(--ease-default); box-shadow: 0 1px 4px rgba(8, 64, 98, 0.05); } .testimonial-card-inner:hover { box-shadow: 0 4px 20px rgba(8, 64, 98, 0.10); } .stars { color: #E07B2B; letter-spacing: 5px; font-size: 1.625rem; } .testimonial-quote { font-size: 1.05rem; line-height: 1.7; color: #4A4A4A; } .testimonial-bottom { margin-top: auto; padding-top: 24px; display: flex; align-items: center; gap: 10px; } .testimonial-author { font-weight: 600; font-size: 1rem; color: #084062; } .google-review { display: flex; align-items: center; gap: 6px; margin-top: 6px; } .google-review span { font-size: 0.75rem; color: #94A3B8; letter-spacing: 0.02em; } /* ============================================ Photo Gallery Cards ============================================ */ /* Scroll-snap gallery track */ .gallery-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 16px; padding-bottom: 4px; } .gallery-track::-webkit-scrollbar { display: none; } .gallery-card { scroll-snap-align: start; flex: 0 0 calc(100% - 16px); } @media (min-width: 768px) { .gallery-card { flex: 0 0 calc(50% - 12px); } } @media (min-width: 1024px) { .gallery-card { flex: 0 0 calc(33.333% - 12px); } } .gallery-card .card-surface { transition: box-shadow 0.2s var(--ease-default); } .gallery-card .card-surface:hover { box-shadow: 0 4px 20px rgba(8, 64, 98, 0.10); } /* ============================================ FAQ Accordion ============================================ */ .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; } .faq-question { padding: 20px 0; font-weight: 500; font-size: 1.125rem; letter-spacing: -0.01em; transition: color 0.2s ease; } .faq-question span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 767px) { .faq-question { font-size: 0.9rem; } } .faq-question:hover { color: #E07B2B; } .faq-item .faq-icon { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .faq-item.open .faq-icon { transform: rotate(45deg); } .faq-item { border-bottom: 1px solid rgba(8, 64, 98, 0.08); border-radius: 8px; padding: 0 16px; margin: 0 -16px; background: transparent; } .faq-item.open { background: rgba(8, 64, 98, 0.02); } /* ============================================ Card Surfaces ============================================ */ .card-surface { background: white; border: 1px solid rgba(8, 64, 98, 0.06); border-radius: 16px; box-shadow: 0 1px 3px rgba(8, 64, 98, 0.04); transition: box-shadow 0.2s var(--ease-default), border-color 0.2s var(--ease-default); } .card-surface:hover { box-shadow: 0 4px 20px rgba(8, 64, 98, 0.08); border-color: rgba(8, 64, 98, 0.1); } /* ============================================ Section Divider ============================================ */ .section-label { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; background: rgba(224, 123, 43, 0.08); border: 1px solid rgba(224, 123, 43, 0.15); border-radius: 100px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #E07B2B; } /* ============================================ Image Treatments ============================================ */ .img-hero { border-radius: 20px; object-fit: cover; box-shadow: 0 8px 40px rgba(8, 64, 98, 0.12); } .img-feature { border-radius: 16px; object-fit: cover; box-shadow: 0 4px 24px rgba(8, 64, 98, 0.08); } /* ============================================ Form Styles ============================================ */ .form-input { background: white; border: 1.5px solid rgba(8, 64, 98, 0.12); border-radius: 10px; padding: 14px 16px; font-size: 0.9rem; transition: all 0.2s ease; outline: none; } .form-input::placeholder { color: #9ca3af; } .form-input:focus { border-color: #E07B2B; box-shadow: 0 0 0 3px rgba(224, 123, 43, 0.08); } /* Honeypot */ .hp-field { position: absolute; left: -9999px; top: -9999px; opacity: 0; height: 0; width: 0; z-index: -1; } /* ============================================ Scroll Animations ============================================ */ .fade-up { opacity: 0; transform: translateY(var(--translate-md)); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); } .fade-up.visible { opacity: 1; transform: translateY(0); } /* Stagger children */ .stagger-children > * { opacity: 0; transform: translateY(20px); transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .stagger-children.visible > *:nth-child(1) { transition-delay: 0s; opacity: 1; transform: translateY(0); } .stagger-children.visible > *:nth-child(2) { transition-delay: 0.08s; opacity: 1; transform: translateY(0); } .stagger-children.visible > *:nth-child(3) { transition-delay: 0.16s; opacity: 1; transform: translateY(0); } .stagger-children.visible > *:nth-child(4) { transition-delay: 0.24s; opacity: 1; transform: translateY(0); } /* ============================================ Language Toggle - Pill Segmented Control ============================================ */ .lang-pill { background: #f5f5f5; border: 1px solid rgba(8, 64, 98, 0.1); border-radius: 8px; padding: 3px; } .lang-toggle { padding: 4px 12px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 6px; color: #084062; background: transparent; border: none; cursor: pointer; transition: background 0.2s var(--ease-default), color 0.2s var(--ease-default); } .lang-toggle:hover:not(.active) { background: rgba(8, 64, 98, 0.08); } .lang-toggle.active { background: #084062; color: white; } .lang-toggle[data-lang="es"].active { background: #E07B2B; } /* Compact pill for mobile header bar */ .lang-pill-sm { background: #f5f5f5; border: 1px solid rgba(8, 64, 98, 0.1); border-radius: 6px; padding: 2px; } .lang-pill-sm .lang-toggle { padding: 6px 10px; font-size: 0.7rem; border-radius: 4px; } /* Larger pill for mobile menu panel */ .lang-pill-lg { background: #f5f5f5; border: 1px solid rgba(8, 64, 98, 0.1); border-radius: 8px; padding: 3px; } .lang-pill-lg .lang-toggle { padding: 10px 18px; font-size: 0.8rem; border-radius: 6px; } /* ============================================ Gradient Accents ============================================ */ .gradient-text { background: linear-gradient(135deg, #E07B2B 0%, #f0943f 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* gradient-border removed — orange decorative line */ /* ============================================ Carousel Navigation ============================================ */ .carousel-btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: white; border: 1px solid rgba(8, 64, 98, 0.1); border-radius: 10px; color: #084062; transition: background 0.2s var(--ease-default), color 0.2s var(--ease-default), box-shadow 0.2s var(--ease-default); box-shadow: 0 2px 8px rgba(8, 64, 98, 0.06); } .carousel-btn:hover { background: #084062; color: white; border-color: #084062; box-shadow: 0 4px 12px rgba(8, 64, 98, 0.15); } /* ============================================ Page hero pattern (inner pages) - no colored bg ============================================ */ .page-hero { background: transparent; position: relative; } /* ============================================ Feature pills on white body need subtle bg ============================================ */ .feature-pill { background: #fafbfc; border-color: rgba(8, 64, 98, 0.07); } /* ============================================ Pickup & Delivery Timeline ============================================ */ @media (max-width: 767px) { .timeline-step .heading-sm, .timeline-step .body-md { text-align: left; } .trust-card { text-align: center; } } .timeline-animated .timeline-content { opacity: 0; transform: translateY(10px); } .timeline-animated .timeline-step.active .timeline-content { opacity: 1; transform: translateY(0); transition: opacity 0.4s ease-out, transform 0.4s ease-out; } .timeline-node.active { border-color: #E07B2B !important; background-color: #E07B2B !important; } .timeline-animated .timeline-node.active { animation: timeline-pulse 0.6s ease-out; } .timeline-node.active .timeline-icon { color: white !important; } @keyframes timeline-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } } .timeline-progress-line-h, .timeline-progress-line-v { transition: width 0.08s linear, height 0.08s linear; } /* ============================================ Town Pills (Service Area grids) ============================================ */ .town-pill { background: #f9fafb; border: 1px solid rgba(8, 64, 98, 0.08); border-radius: 10px; padding: 0.75rem 1rem; font-size: 0.925rem; font-weight: 500; color: #4A4A4A; text-align: center; transition: transform 0.2s ease, box-shadow 0.2s ease; } /* Town pills are informational — no hover lift */ /* ============================================ Commercial Page - Industry Cards ============================================ */ .commercial-industry-card { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2.75rem 1rem; background: white; border: 1px solid rgba(8, 64, 98, 0.07); border-radius: 16px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); transition: box-shadow 0.2s ease, transform 0.2s ease; } .commercial-industry-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); transform: translateY(-2px); } .commercial-industry-card span { font-size: 1rem; } /* ============================================ Commercial Page - Timeline Mobile Fix ============================================ */ @media (max-width: 767px) { .timeline-step { min-height: 100px; } } /* ============================================ Commercial Page - What We Handle Cards ============================================ */ .commercial-item-card { padding: 0.875rem 0.5rem; } .commercial-item-card svg { width: 28px; height: 28px; } .commercial-item-card span { margin-top: 0.5rem; font-size: 0.8125rem; } @media (min-width: 768px) { .commercial-item-card { padding: 1.5rem 0.75rem; } .commercial-item-card svg { width: 36px; height: 36px; } .commercial-item-card span { margin-top: 0.75rem; font-size: 0.875rem; } } /* ============================================ Commercial Page - Item Tags Grid ============================================ */ .commercial-items-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } @media (min-width: 640px) { .commercial-items-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 768px) { .commercial-items-grid { grid-template-columns: repeat(6, 1fr); } } .commercial-item-tag { display: flex; align-items: center; justify-content: center; padding: 0.875rem 0.75rem; background: #FFF7F0; border: 1px solid rgba(224, 123, 43, 0.12); border-left: 3px solid rgba(224, 123, 43, 0.25); border-radius: 12px; font-size: 0.9375rem; font-weight: 500; color: #4A4A4A; text-align: center; transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; } .commercial-item-tag:hover { background: #FFEFE0; box-shadow: 0 3px 10px rgba(224, 123, 43, 0.12); transform: translateY(-1px); } /* ============================================ Commercial Page - Item Cards (What We Handle) ============================================ */ .item-card { display: flex; align-items: center; justify-content: center; padding: 1.25rem 1rem; background: #f0f4f7; border: 1px solid rgba(8, 64, 98, 0.1); border-radius: 12px; font-size: 1.05rem; font-weight: 500; color: #084062; text-align: center; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .item-card:hover { transform: translateY(-2px); background: #e8eef3; box-shadow: 0 6px 16px rgba(8, 64, 98, 0.1); } /* ============================================ Commercial Page - Form Card ============================================ */ .commercial-form-card { background: #f9fafb; border: 1px solid rgba(8, 64, 98, 0.07); border-radius: 20px; padding: 2.5rem 2rem; } @media (min-width: 640px) { .commercial-form-card { padding: 3rem 2.5rem; } } @media (min-width: 768px) { .commercial-form-card { padding: 3.5rem 3.5rem; } } .commercial-form-card select.form-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234A4A4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 2.5rem; } /* ============================================ Reduced Motion (Accessibility) ============================================ */ @media (prefers-reduced-motion: reduce) { .hero-entrance, .hero-entrance-1, .hero-entrance-2, .hero-entrance-3, .hero-entrance-4, .fade-up, .pill-hidden, .card-hidden, .slide-left-hidden, .slide-right-hidden, .faq-stagger-hidden { opacity: 1 !important; transform: none !important; transition: none !important; filter: none !important; } .fade-up.visible, .pill-visible, .card-visible, .slide-left-visible, .slide-right-visible, .faq-stagger-visible { transition: none !important; } .orb, .sparkle { animation: none !important; } .testimonial-track, .gallery-track { scroll-behavior: auto !important; } .timeline-animated .timeline-content { opacity: 1 !important; transform: none !important; } .timeline-node.active { animation: none !important; } } /* ============================================ Footer Wave Divider ============================================ */ .footer-wave { display: block; width: 100%; height: 40px; color: #FEF9F2; } /* Footer heading-to-first-link gap matched to between-links gap on both breakpoints; the bold navy heading is enough visual separation. Placed outside the @media block so it sets the desktop default (10px), then the mobile override below drops it further to 4px. */ footer h4 { margin-bottom: 0.625rem; } /* Footer mobile spacing tightening */ @media (max-width: 767px) { footer > div:first-child { padding-top: 3rem; } footer .grid { row-gap: 1.5rem; } footer h4 { margin-bottom: 0.25rem; } footer ul > li + li { margin-top: 0.25rem; } } /* ============================================ Print Styles ============================================ */ @media print { .no-print, header, footer, .promo-banner { display: none !important; } }