/* ══════════════════════════════════════ LAUNDRY KING — Shared Stylesheet ══════════════════════════════════════ */ /* ── WEB PAYMENT KILL SWITCH ────────────────────────────────── When firebase.js exports WEB_PAYMENT_ENABLED=false, the page adds class="no-web-pay" to . Anything tagged with the .pay-only class collapses out of the layout. To re-enable payments, flip WEB_PAYMENT_ENABLED back to true; this rule no longer applies and all pay-only UI returns automatically. ──────────────────────────────────────────────────────────── */ html.no-web-pay .pay-only { display: none !important; } /* ── iOS auto-zoom guard ────────────────────────────────────── iOS Safari (and WKWebView-based browsers like DuckDuckGo on iOS, PWAs, etc.) automatically zoom the page in when an input/select/ textarea is focused IF its computed font-size is < 16px — and it often doesn't zoom back out. This is jarring across dropdowns, numeric pads, color pickers, etc. Forcing ≥16px on every interactive control kills the auto-zoom without disabling pinch- zoom (the user can still manually zoom anywhere). The visual density of compact forms is preserved by padding / line-height tweaks where it matters. Scoped to mobile widths so desktop layouts that intentionally use 13–14px in tight tables aren't widened. ──────────────────────────────────────────────────────────── */ @media (max-width: 768px) { input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select, textarea { font-size: 16px !important; } } /* ── Muli (Google Fonts ships it as "Mulish" since 2020) ────────── RN app uses Muli — web mirrors with the official Google Fonts name. Weights mirror RN's typography.ts: 300/400/600/700/800/900. Bebas Neue kept as display accent for hero titles. ────────── */ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Mulish:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600;1,700&display=swap'); :root { --navy: #061f75; --navy2: #0D47A1; --orange: #FF6F00; --orange2: #F4511E; --green: #16a34a; /* positive / live action (Start Route, Save, Charge) */ --red: #dc2626; /* destructive / error (Stop Route, Cancel, Delete) */ --amber: #92400e; /* transient / warning (acquiring location, retrying) */ --bg: #F4F5FA; --white: #ffffff; --text: #1a1a2e; --muted: #6b7280; --border: #e5e7eb; --radius: 16px; --shadow: 0 4px 24px rgba(6,31,117,0.10); --nav-h: 72px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; /* Always keep a vertical scrollbar (or its reserved gutter) so toggling between long-content tabs (Orders, Customers) and short-content tabs (Notify, Reports) doesn't shift the page width by ~15px. We use both overflow-y:scroll (universal — forces the scrollbar slot in every browser including older Safari) and scrollbar-gutter:stable (modern — hides the bar but keeps the gutter on macOS overlay-scrollbar setups). */ overflow-y: scroll; scrollbar-gutter: stable; } body { font-family: 'Mulish', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; display: flex; flex-direction: column; } a { text-decoration: none; color: inherit; } img { max-width: 100%; } /* ── NAVBAR ── */ .navbar { background: linear-gradient(135deg, var(--navy) 0%, var(--navy2) 100%); height: var(--nav-h); display: flex; align-items: center; padding: 0 32px; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 20px rgba(6,31,117,0.3); } .nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; } .nav-logo img { height: 64px; width: auto; background: transparent; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15)); } .nav-links { display: flex; align-items: center; gap: 4px; margin: 0 auto; list-style: none; } .nav-links a { color: rgba(255,255,255,0.82); font-size: 14px; font-weight: 500; padding: 8px 14px; border-radius: 8px; transition: color .2s, background .2s; white-space: nowrap; } .nav-links a:hover, .nav-links a.active { color: #fff; background: rgba(255,255,255,0.12); } .nav-cta { /* Same drifting fill as the page buttons, at navbar scale. The glow stays small on purpose — this pill sits in a bar the visitor scrolls past all day, so it should catch the eye without shouting over the page. */ background: linear-gradient(100deg, var(--orange2) 0%, var(--orange) 25%, #FF9838 50%, var(--orange) 75%, var(--orange2) 100%); background-size: 260% 100%; color: #fff !important; padding: 9px 22px !important; border-radius: 100px !important; font-weight: 700 !important; font-size: 14px !important; box-shadow: 0 4px 14px rgba(255,111,0,0.4), inset 0 1px 0 rgba(255,255,255,.32); transition: transform .2s, box-shadow .2s !important; flex-shrink: 0; animation: ctaFlow 9s ease-in-out infinite; } .nav-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(255,111,0,.55), inset 0 1px 0 rgba(255,255,255,.42); } /* Sign-in link — secondary CTA in the desktop navbar, sits beside the primary "Order Now" pill so returning customers have a clear log-in entry point without it competing with the primary CTA. */ .nav-signin { color: #fff !important; opacity: .92; font-weight: 600; font-size: 14px; padding: 9px 14px; border-radius: 100px; border: 1.5px solid rgba(255,255,255,.35); transition: background .2s, border-color .2s, opacity .2s; flex-shrink: 0; } .nav-signin:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.6); opacity: 1; } /* Hide the desktop sign-in on smaller screens — mobile nav has its own */ @media (max-width: 900px) { .nav-signin { display: none; } } /* "My Account" CTA — appears in place of Sign In + Order Now when the customer is authenticated. Visually styled like .nav-cta but in navy so it doesn't look like a call-to-action they need to act on. */ .nav-account { display: none; background: linear-gradient(135deg, var(--navy), var(--navy2)); color: #fff !important; padding: 9px 22px !important; border-radius: 100px !important; font-weight: 700 !important; font-size: 14px !important; box-shadow: 0 4px 14px rgba(6,31,117,0.32); transition: opacity .2s, transform .2s !important; flex-shrink: 0; align-items: center; gap: 6px; } .nav-account::before { content: '👤'; } .nav-account:hover { opacity: .9; transform: translateY(-1px); } /* "Sign Out" — appears in the signed-in navbar where "Sign In" sat. Outline pill matching .nav-signin so the swap reads naturally. */ .nav-signout { display: none; color: #fff !important; opacity: .92; font-weight: 600; font-size: 14px; padding: 9px 14px; border-radius: 100px; border: 1.5px solid rgba(255,255,255,.35); transition: background .2s, border-color .2s, opacity .2s; flex-shrink: 0; } .nav-signout:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.6); opacity: 1; } @media (max-width: 900px) { .nav-signout { display: none !important; } } /* Auth-state swap: when navbar carries .signed-in, hide unauth CTAs and surface the account link + Sign Out. */ .navbar.signed-in .nav-signin, .navbar.signed-in .nav-cta { display: none !important; } .navbar.signed-in .nav-account { display: inline-flex; } .navbar.signed-in .nav-signout { display: inline-flex; } .nav-mobile.signed-in .nav-signin-mobile, .nav-mobile.signed-in .nav-cta { display: none !important; } .nav-mobile.signed-in .nav-account-mobile { display: block; } .nav-mobile.signed-in .nav-signout-mobile { display: block; } .nav-mobile .nav-signout-mobile { display: none; } .nav-mobile .nav-account-mobile { display: none; text-align: center; margin-top: 12px; background: linear-gradient(135deg, var(--navy), var(--navy2)); color: #fff !important; padding: 12px 16px; border-radius: 100px !important; font-weight: 700 !important; font-size: 15px; } /* Hamburger */ .nav-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; margin-left: auto; } .nav-toggle span { display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: all .3s; } /* Mobile nav */ .nav-mobile { display: none; position: fixed; top: var(--nav-h); left: 0; right: 0; background: var(--navy); padding: 16px 24px 24px; z-index: 999; box-shadow: 0 8px 24px rgba(0,0,0,0.3); flex-direction: column; gap: 4px; } .nav-mobile.open { display: flex; } .nav-mobile a { color: rgba(255,255,255,0.85); font-size: 16px; font-weight: 500; padding: 12px 16px; border-radius: 10px; transition: background .2s; } .nav-mobile a:hover, .nav-mobile a.active { background: rgba(255,255,255,0.1); color: #fff; } .nav-mobile .nav-signin-mobile, .nav-mobile .nav-signout-mobile { text-align: center; margin-top: 12px; border: 1.5px solid rgba(255,255,255,.35); padding: 12px 16px; border-radius: 100px !important; font-weight: 700 !important; font-size: 15px; color: #fff !important; } .nav-mobile .nav-signin-mobile:hover, .nav-mobile .nav-signout-mobile:hover { background: rgba(255,255,255,.1); } .nav-mobile .nav-cta { text-align: center; margin-top: 8px; background: linear-gradient(135deg, var(--orange), var(--orange2)) !important; border-radius: 100px !important; padding: 13px !important; font-size: 15px !important; } /* ── Language switcher ── */ .lang-switch { position: relative; margin-right: 12px; flex-shrink: 0; } .lang-switch > button.lang-trigger { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.2); padding: 7px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; transition: background .2s; line-height: 1; } .lang-switch > button.lang-trigger:hover { background: rgba(255,255,255,0.2); } .lang-switch > button.lang-trigger .chev { font-size: 10px; opacity: .8; } .lang-switch ul.lang-menu { position: absolute; top: calc(100% + 6px); right: 0; background: #fff; border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.18); padding: 6px; margin: 0; list-style: none; min-width: 160px; display: none; z-index: 1100; } .lang-switch.open ul.lang-menu { display: block; } .lang-switch ul.lang-menu li { margin: 0; padding: 0; } .lang-switch ul.lang-menu button { width: 100%; background: none; border: none; color: #1f2937; text-align: left; padding: 10px 12px; border-radius: 8px; display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 14px; cursor: pointer; font-family: inherit; transition: background .15s; } .lang-switch ul.lang-menu button:hover { background: #f3f4f6; } .lang-switch ul.lang-menu button.active { background: #061f75; color: #fff; } .lang-switch ul.lang-menu .flag { font-size: 18px; line-height: 1; } /* Mobile: language switch sits in the mobile nav drawer */ .nav-mobile .lang-switch-mobile { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; padding: 14px 16px; border-top: 1px solid rgba(255,255,255,0.1); } .nav-mobile .lang-switch-mobile-label { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: .5px; } .nav-mobile .lang-switch-mobile-row { display: flex; gap: 8px; flex-wrap: wrap; } .nav-mobile .lang-switch-mobile-row button { flex: 1; min-width: 90px; background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.15); padding: 10px; border-radius: 10px; font-weight: 600; font-size: 13px; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .nav-mobile .lang-switch-mobile-row button.active { background: var(--orange); border-color: var(--orange); } /* ── FOOTER ── */ footer { background: linear-gradient(135deg, var(--navy), var(--navy2)); color: rgba(255,255,255,0.7); padding: 48px 32px 24px; margin-top: auto; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; max-width: 1100px; margin: 0 auto; } .footer-brand img { height: 64px; margin-bottom: 12px; } .footer-brand p { font-size: 14px; line-height: 1.6; max-width: 240px; } .footer-col h4 { color: #fff; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 14px; } .footer-col a { display: block; color: rgba(255,255,255,0.65); font-size: 14px; padding: 4px 0; transition: color .2s; } .footer-col a:hover { color: var(--orange); } .footer-bottom { max-width: 1100px; margin: 32px auto 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; align-items: center; font-size: 13px; flex-wrap: wrap; gap: 8px; } .footer-bottom span { color: rgba(255,255,255,0.5); } /* ── BUTTONS ── */ .btn { display: inline-flex; align-items: center; gap: 8px; font-family: 'Mulish', sans-serif; font-weight: 700; font-size: 15px; padding: 14px 32px; border-radius: 100px; border: none; cursor: pointer; transition: all .2s; text-decoration: none; } /* ── PRIMARY CALL TO ACTION ──────────────────────────────────────────── Every button that asks for the order — "Order Now", "Place Order", "Schedule Pickup", the navbar pill, the pricing badge — wears the same three things, so the site has one gesture for "press this" instead of a different one per page: 1. a wide gradient drifting slowly across a narrow window, which reads as depth where a flat swatch reads as a shape; 2. a band of light crossing without a pause; 3. a glow that breathes, and a lift under the cursor. The keyframes live here rather than in any one page because pages that define their own CTA (the green Schedule Pickup, the 404 button) borrow the same motion in their own colours. ------------------------------------------------------------------- */ @keyframes ctaFlow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes ctaGlow { 0%, 100% { box-shadow: 0 8px 26px rgba(255,111,0,.38), inset 0 1px 0 rgba(255,255,255,.35); } 50% { box-shadow: 0 11px 34px rgba(255,111,0,.58), inset 0 1px 0 rgba(255,255,255,.42); } } /* Travel is a transform, not `left`: the band is on several buttons and every service tile at once, and moving them by offset would ask the browser to lay the page out again sixty times a second. The skew has to be repeated in each keyframe — a transform list replaces the whole property. The band sits at left:-60% with width:46%, so crossing to 130% is 190% of the button, which is ~413% of the band's own width. */ @keyframes ctaShine { 0% { transform: translateX(0) skewX(-22deg); } 100% { transform: translateX(413%) skewX(-22deg); } } /* The sweep is a positioned ::before, so any button that wants it needs a stacking context of its own and a clipped edge to run inside. */ .btn-orange, .nav-cta { position: relative; overflow: hidden; isolation: isolate; } .btn-orange::before, .nav-cta::before { content: ''; position: absolute; z-index: 1; top: -20%; bottom: -20%; left: -60%; width: 46%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent); transform: skewX(-22deg); pointer-events: none; animation: ctaShine 2.6s linear infinite; } .btn-orange { background: linear-gradient(100deg, var(--orange2) 0%, var(--orange) 25%, #FF9838 50%, var(--orange) 75%, var(--orange2) 100%); background-size: 260% 100%; color: #fff; box-shadow: 0 8px 26px rgba(255,111,0,.38), inset 0 1px 0 rgba(255,255,255,.35); animation: ctaFlow 9s ease-in-out infinite, ctaGlow 3.4s ease-in-out infinite; } .btn-orange:hover { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(255,111,0,.55), inset 0 1px 0 rgba(255,255,255,.45); } .btn-orange:active { transform: translateY(0); } /* An invitation, not something anyone should have to endure. Covers the page CTAs that borrow these keyframes in their own colours too. */ @media (prefers-reduced-motion: reduce) { .btn-orange, .nav-cta, .min-badge, .sa-btn-primary, .nf-btn.primary { animation: none !important; } .btn-orange::before, .nav-cta::before, .min-badge::before, .sa-btn-primary::before, .nf-btn.primary::before { animation: none !important; opacity: 0 !important; } .btn-orange:hover, .nav-cta:hover, .min-badge:hover, .sa-btn-primary:hover, .nf-btn.primary:hover { transform: none !important; } } .btn-outline { background: transparent; color: var(--navy); border: 2px solid var(--navy); } .btn-outline:hover { background: var(--navy); color: #fff; } .btn-white { background: #fff; color: var(--navy); box-shadow: 0 4px 16px rgba(0,0,0,0.1); } .btn-white:hover { transform: translateY(-2px); } /* ── SECTION WRAPPER ── */ .section { padding: 72px 32px; } .section-sm { padding: 48px 32px; } .container { max-width: 1100px; margin: 0 auto; } .section-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(32px, 5vw, 48px); letter-spacing: 1.5px; color: var(--navy); margin-bottom: 8px; } .section-sub { color: var(--muted); font-size: 16px; max-width: 560px; line-height: 1.6; } /* ── CARDS ── */ .card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px; } /* ── FORMS ── */ .form-field { margin-bottom: 16px; min-width: 0; } .form-field label { display: block; font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 6px; } .form-field input, .form-field select, .form-field textarea { width: 100%; max-width: 100%; min-width: 0; padding: 13px 16px; border: 1.5px solid var(--border); border-radius: 12px; font-size: 15px; font-family: inherit; background: #fafafa; color: var(--text); outline: none; transition: border-color .2s, box-shadow .2s; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--navy); background: #fff; box-shadow: 0 0 0 3px rgba(6,31,117,0.08); } .form-field .hint { font-size: 12px; color: var(--muted); margin-top: 4px; } .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .btn-form { width: 100%; padding: 15px; background: linear-gradient(135deg, var(--orange), var(--orange2)); color: #fff; font-weight: 700; font-size: 16px; border: none; border-radius: 14px; cursor: pointer; font-family: inherit; box-shadow: 0 4px 20px rgba(255,111,0,0.3); transition: opacity .2s, transform .2s; margin-top: 8px; } .btn-form:hover:not(:disabled) { opacity: .9; transform: translateY(-1px); } .btn-form:disabled { opacity: .55; cursor: not-allowed; } .btn-form-sec { width: 100%; padding: 13px; background: transparent; color: var(--navy); font-weight: 600; font-size: 14px; border: 1.5px solid var(--border); border-radius: 14px; cursor: pointer; font-family: inherit; transition: border-color .2s, background .2s; margin-top: 8px; } .btn-form-sec:hover { border-color: var(--navy); background: rgba(6,31,117,0.04); } /* ── ALERTS ── */ .alert { border-radius: 10px; padding: 11px 15px; font-size: 13px; margin-bottom: 14px; display: none; } .alert.show { display: block; } .alert-error { background:#fef2f2; border:1px solid #fecaca; color:#dc2626; } .alert-success { background:#f0fdf4; border:1px solid #86efac; color:#16a34a; } .alert-info { background:#eff6ff; border:1px solid #bfdbfe; color:#1d4ed8; } /* ── SPINNER ── */ .spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: middle; margin-right: 6px; } @keyframes spin { to { transform: rotate(360deg); } } /* ── OTP BOXES ── */ .otp-boxes { display: flex; gap: 10px; justify-content: center; margin: 20px 0; } .otp-box { width: 52px; height: 58px; border: 2px solid var(--border); border-radius: 12px; text-align: center; font-size: 24px; font-weight: 700; color: var(--navy); background: #fafafa; outline: none; font-family: inherit; transition: border-color .2s; } .otp-box:focus { border-color: var(--orange); background: #fff; } /* ── TOGGLE BUTTONS ── */ .tog-group { display: flex; flex-wrap: wrap; gap: 8px; } .tog-btn { padding: 8px 16px; border: 1.5px solid var(--border); border-radius: 100px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 500; color: var(--muted); background: #fafafa; transition: all .2s; } .tog-btn:hover { border-color: var(--navy); color: var(--navy); } .tog-btn.active { border-color: var(--navy); background: var(--navy); color: #fff; } .tog-btn.active-orange { border-color: var(--orange); background: rgba(255,111,0,.08); color: var(--orange); } /* ── RESPONSIVE ── */ @media (max-width: 768px) { .nav-links, .nav-cta { display: none; } /* Signed-in desktop pills collapse into the hamburger drawer, mirroring how Sign In / Order Now collapse for signed-out users. */ .navbar.signed-in .nav-account, .navbar.signed-in .nav-signout { display: none !important; } .nav-toggle { display: flex; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } .row-2 { grid-template-columns: 1fr; } .section { padding: 48px 20px; } } @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } .otp-box { width: 44px; height: 50px; font-size: 20px; } } /* ── SW UPDATE BANNER ── */ .sw-update-bar { display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 9999; background: var(--navy); color: #fff; text-align: center; padding: 12px 16px; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 2px 12px rgba(0,0,0,.3); } .sw-update-bar.show { display: block; } /* ── A11Y FOCUS ── */ :focus-visible { outline: 2px solid var(--navy2); outline-offset: 2px; } button:focus-visible, a:focus-visible, [role="button"]:focus-visible, .so:focus-visible { outline: 2px solid var(--navy2); outline-offset: 2px; } /* ── Z-INDEX LADDER (reference) ─────────────────── 100 topbar (sticky) 500 dropdown menus 1000 navbar 5000 edit-sheet overlay 9100 push-optin overlay 9200 maps-chooser overlay 9500 profile / verify modals 9600 boss-pw modal 9700 toast / alerts 9750 wn-overlay (validation/wallet alert modal) 9760 notif-overlay (notifications inbox) 9999 modal backdrop / sw-update-bar ────────────────────────────────────────────────── */ /* ══════════════════════════════════════ NEIGHBORHOOD LANDING PAGES Shared layout for `-laundry-pickup.html` pages. Each page only writes neighborhood-specific copy — all visual styling lives here. ══════════════════════════════════════ */ .area-hero { background: linear-gradient(135deg, var(--navy), var(--navy2)); color: #fff; padding: 64px 24px 56px; text-align: center; } .area-hero .area-pill { display: inline-block; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); padding: 6px 14px; border-radius: 100px; font-size: 13px; font-weight: 600; letter-spacing: .5px; margin-bottom: 14px; } .area-hero h1 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(34px, 6vw, 52px); letter-spacing: 1.5px; margin: 0 0 14px; line-height: 1.05; } .area-hero h1 .accent { color: var(--orange); } .area-hero p { font-size: 17px; opacity: .88; max-width: 620px; margin: 0 auto 24px; line-height: 1.55; } .area-hero .hero-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .area-hero .hero-cta-row .btn { min-width: 200px; } .area-zips { background: #fff8ec; border-bottom: 1px solid #f0e3c4; padding: 18px 24px; text-align: center; font-size: 14px; color: var(--navy); font-weight: 600; } .area-zips strong { color: var(--orange); font-weight: 800; letter-spacing: .5px; } .area-h2 { text-align: center; font-family: 'Bebas Neue', sans-serif; font-size: 34px; letter-spacing: 1px; color: var(--navy); margin-bottom: 22px; } .area-h2-tight { margin-bottom: 6px; } .area-h2-sub { text-align: center; color: var(--muted); max-width: 620px; margin: 0 auto; font-size: 15px; } .area-intro p { font-size: 16px; line-height: 1.7; color: var(--text); max-width: 760px; margin: 0 auto 18px; } .area-services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 24px; } .area-svc-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 18px; text-align: center; text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s, border-color .15s; } .area-svc-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--orange); } .area-svc-card .ico { font-size: 38px; margin-bottom: 10px; } .area-svc-card .name { font-weight: 800; font-size: 16px; margin-bottom: 4px; color: var(--text); } .area-svc-card .price { font-size: 13px; color: var(--orange); font-weight: 700; } .area-why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 24px; } .area-why-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 20px; } .area-why-card .ico { font-size: 28px; margin-bottom: 10px; } .area-why-card h3 { font-size: 16px; font-weight: 800; color: var(--text); margin-bottom: 6px; } .area-why-card p { font-size: 14px; color: var(--muted); line-height: 1.55; margin: 0; } .area-faq details { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; margin-bottom: 10px; } .area-faq summary { font-weight: 700; font-size: 15px; color: var(--text); list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; } .area-faq summary::-webkit-details-marker { display: none; } .area-faq summary::after { content: '+'; color: var(--orange); font-size: 22px; font-weight: 700; line-height: 1; } .area-faq details[open] summary::after { content: '−'; } .area-faq p { margin-top: 12px; font-size: 14px; color: var(--muted); line-height: 1.65; } .area-cta { background: linear-gradient(135deg, var(--orange), var(--orange2)); color: #fff; padding: 56px 24px; text-align: center; } .area-cta h2 { font-family: 'Bebas Neue', sans-serif; font-size: 38px; letter-spacing: 1.5px; margin-bottom: 14px; } .area-cta p { font-size: 16px; opacity: .92; margin-bottom: 22px; } .area-cta .btn-white { background: #fff; color: var(--navy); } /* ══════════════════════════════════════════════════════════════ ORDER STEPPER — 1:1 port of RN NewOrderStepper widget (iOS NewOrderStepper.xib + NewOrderStepperStep.xib + NewOrderStepperSpacer.xib). Used on the 4 customer flow steps: 1 → service-specific (W&F prefs / W&P / DC / Other items) 2 → Pickup 3 → Drop-Off 4 → Confirmation Spec — Container 80h, WHITE, padding 24. 4 circles 24×24 r12 + 3 spacers h=4 PALE_NAVY. Current = redError bg + white digit; future = PALE_NAVY bg + HELPER digit; past = PALE_NAVY + ✓. ══════════════════════════════════════════════════════════════ */ .lk-order-stepper{display:flex;align-items:center;height:80px;padding:0 24px;background:#fff;} .lk-order-step{position:relative;width:24px;height:24px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:#EDF5FF;font-family:'Mulish',sans-serif;font-weight:700;font-size:13px;color:#819BBD;line-height:1;} .lk-order-step.current{background:#F5372A;color:#fff;} .lk-order-step.past{background:#EDF5FF;font-size:0;} .lk-order-step.past::after{content:'';position:absolute;width:12px;height:10px;background:#819BBD;-webkit-mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;} .lk-order-stepper-spacer{flex:1;height:4px;background:#EDF5FF;margin:0 17px;border-radius:2px;} @media(max-width:480px){.lk-order-stepper{padding:0 16px;}.lk-order-stepper-spacer{margin:0 10px;}} /* ── Real photography ───────────────────────────────────────── Added with the storefront/shop photos recovered from the old site. Images are lazy-loaded and carry width/height so they reserve their space and don't shift the layout while loading. */ .lk-photo { margin: 0 0 28px; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 26px rgba(11, 31, 77, .13); background: #edf5ff; } .lk-photo img { display: block; width: 100%; height: auto; object-fit: cover; } .lk-photo figcaption { padding: 10px 14px; font-size: 13px; color: #5b6b85; background: #fff; } .lk-photo-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin: 26px 0 6px; } .lk-photo-row .lk-photo { margin-bottom: 0; } .lk-photo-wide img { max-height: 460px; } @media (max-width: 600px) { .lk-photo-wide img { max-height: 260px; } } /* ── Services dropdown in the navbar ────────────────────────── The five service pages live under one "Services" item, stacked vertically, the way the old site presented them — rather than spread across the top bar, which crowded it. */ .nav-links .nav-drop { position: relative; } .nav-links .nav-drop > a { display: inline-flex; align-items: center; gap: 5px; } .nav-chev { font-size: 10px; opacity: .75; transition: transform .18s ease; } .nav-links .nav-drop:hover .nav-chev, .nav-links .nav-drop:focus-within .nav-chev { transform: rotate(180deg); } .nav-drop-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px); min-width: 236px; padding: 8px 0; margin: 0; list-style: none; background: #fff; border-radius: 12px; box-shadow: 0 12px 34px rgba(6, 31, 117, .18); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .16s ease, transform .16s ease; z-index: 1200; } /* a small bridge so the pointer can travel from the label to the menu */ .nav-drop-menu::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px; } .nav-links .nav-drop:hover .nav-drop-menu, .nav-links .nav-drop:focus-within .nav-drop-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .nav-drop-menu li { display: block; } .nav-drop-menu a { display: block; padding: 10px 18px; font-size: 14.5px; font-weight: 600; color: #061f75; text-decoration: none; white-space: nowrap; } .nav-drop-menu a:hover, .nav-drop-menu a.active { background: #edf5ff; } .nav-drop-sep { border-top: 1px solid #eef2f9; margin-top: 6px; padding-top: 6px; } /* Mobile drawer: a heading plus indented service links. */ .nav-mobile-head { padding: 12px 20px 4px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #819bbd; } .nav-mobile .nav-mobile-sub { padding-left: 34px; }