/* ══════════════════════════════════════ 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 { background: linear-gradient(135deg, var(--orange), var(--orange2)); 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); transition: opacity .2s, transform .2s !important; flex-shrink: 0; } .nav-cta:hover { opacity: .9; transform: translateY(-1px); background: none !important; background: linear-gradient(135deg, var(--orange), var(--orange2)) !important; } /* 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; } .btn-orange { background: linear-gradient(135deg, var(--orange), var(--orange2)); color: #fff; box-shadow: 0 6px 24px rgba(255,111,0,0.35); } .btn-orange:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(255,111,0,0.45); } .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; }