/* Global landing page styles — uses brand CSS vars */ /* NOTE: Google Fonts are loaded non-blocking via BrandLayout.astro . Do NOT add @import url(fonts.googleapis.com) here — it blocks render. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; overflow-x: hidden; } body { font-family: var(--brand-font-primary); color: var(--brand-text-base); background: var(--brand-bg); line-height: 1.6; overflow-x: hidden; } /* ---- Typography ---- */ h1, h2, h3, h4, h5, h6 { font-family: var(--brand-font-secondary, var(--brand-font-primary)); color: var(--brand-text-heading); line-height: 1.2; } h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 700; } h2 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; } h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 600; } a { color: var(--brand-text-link); text-decoration: none; } /* ---- Navbar ---- */ .lp-nav { background: var(--brand-bg-nav); padding: 0.875rem 1.5rem; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 2px 8px rgba(0,0,0,0.12); position: sticky; top: 0; z-index: 100; } .lp-nav__logo { font-family: var(--brand-font-primary); font-size: 1.35rem; font-weight: 900; color: var(--brand-text-white); letter-spacing: -0.02em; } .lp-nav__cta { background: var(--brand-btn-primary); color: var(--brand-btn-text); padding: 0.5rem 1.25rem; border-radius: 4px; font-weight: 700; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.04em; transition: background 0.15s ease; } .lp-nav__cta:hover { background: var(--brand-btn-primary-hover); color: var(--brand-btn-text); } /* ---- Hero ---- */ .lp-hero { background: var(--brand-bg-hero); color: var(--brand-text-white); padding: 3.5rem 1.5rem 4rem; text-align: center; } .lp-hero__inner { max-width: 720px; margin: 0 auto; } .lp-hero h1 { color: var(--brand-text-white); margin-bottom: 1rem; } .lp-hero__sub { font-size: 1.1rem; opacity: 0.9; margin-bottom: 2rem; color: var(--brand-text-white); } /* ---- Search / CTA form box ---- */ .lp-search-box { background: #ffffff; border-radius: 8px; padding: 1.5rem; max-width: 560px; margin: 0 auto; box-shadow: 0 4px 20px rgba(0,0,0,0.2); } .lp-search-box__label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--brand-text-base); margin-bottom: 0.4rem; text-align: left; } .lp-search-box__row { display: flex; gap: 0.5rem; } .lp-input { flex: 1; padding: 0.75rem 1rem; border: 1.5px solid var(--brand-border); border-radius: 4px; font-size: 1rem; font-family: var(--brand-font-primary); color: var(--brand-text-base); outline: none; transition: border-color 0.15s; } .lp-input:focus { border-color: var(--brand-primary); } .lp-btn { display: inline-block; background: var(--brand-btn-primary); color: var(--brand-btn-text); padding: 0.75rem 1.5rem; border-radius: 4px; font-weight: 700; font-size: 1rem; font-family: var(--brand-font-primary); border: none; cursor: pointer; text-transform: uppercase; letter-spacing: 0.04em; transition: background 0.15s; white-space: nowrap; } .lp-btn:hover { background: var(--brand-btn-primary-hover); color: var(--brand-btn-text); } .lp-btn--secondary { background: var(--brand-btn-secondary); } .lp-btn--lg { padding: 1rem 2rem; font-size: 1.1rem; } /* ---- Trust bar ---- */ .lp-trust { background: var(--brand-bg-light); padding: 1rem 1.5rem; text-align: center; } .lp-trust__items { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; list-style: none; } .lp-trust__item { font-size: 0.85rem; font-weight: 600; color: var(--brand-primary); display: flex; align-items: center; gap: 0.4rem; } .lp-trust__item::before { content: "✓"; color: var(--brand-btn-primary); font-weight: 900; } /* ---- Content sections ---- */ .lp-section { padding: 3rem 1.5rem; } .lp-section--alt { background: var(--brand-bg-light); } .lp-section--dark { background: var(--brand-dark); color: var(--brand-text-white); } .lp-section--dark h2, .lp-section--dark h3 { color: var(--brand-text-white); } .lp-section__inner { max-width: 860px; margin: 0 auto; } .lp-section__title { text-align: center; margin-bottom: 2rem; } /* ---- Stats row ---- */ .lp-stats { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; margin: 2rem 0; } .lp-stat { text-align: center; } .lp-stat__number { font-size: 2rem; font-weight: 900; color: var(--brand-primary); display: block; } .lp-stat__label { font-size: 0.85rem; color: var(--brand-text-base); } /* ---- Feature grid ---- */ .lp-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin-top: 2rem; } .lp-feature { background: var(--brand-bg); border: 1px solid var(--brand-border); border-radius: 8px; padding: 1.5rem; text-align: center; } .lp-feature__icon { font-size: 2rem; margin-bottom: 0.75rem; } .lp-feature__title { font-size: 1rem; font-weight: 700; color: var(--brand-primary); margin-bottom: 0.5rem; } .lp-feature__desc { font-size: 0.9rem; color: var(--brand-text-base); } /* ---- CTA band ---- */ .lp-cta-band { background: var(--brand-btn-primary); color: var(--brand-btn-text); text-align: center; padding: 2.5rem 1.5rem; } .lp-cta-band h2 { color: var(--brand-btn-text); margin-bottom: 1rem; } /* ---- Testimonials ---- */ .lp-testimonials { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; } .lp-testimonial { background: var(--brand-bg); border-left: 4px solid var(--brand-accent); padding: 1.25rem 1.5rem; border-radius: 0 8px 8px 0; box-shadow: 0 2px 8px rgba(0,0,0,0.06); } .lp-testimonial__text { font-style: italic; font-size: 0.95rem; margin-bottom: 0.75rem; } .lp-testimonial__author { font-size: 0.8rem; font-weight: 700; color: var(--brand-primary); } /* ---- Footer ---- */ .lp-footer { background: var(--brand-bg-footer); color: var(--brand-text-white); padding: 2rem 1.5rem; font-size: 0.8rem; } .lp-footer__inner { max-width: 860px; margin: 0 auto; text-align: center; opacity: 0.85; line-height: 1.7; } .lp-footer__links { display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1rem; list-style: none; } .lp-footer__links a { color: var(--brand-text-white); opacity: 0.75; font-size: 0.8rem; } .lp-footer__links a:hover { opacity: 1; } .lp-footer__disclaimer { opacity: 0.65; font-size: 0.72rem; line-height: 1.6; } /* ---- Google Places Autocomplete dropdown (custom, Places API New) ---- */ .lp-places-dropdown { /* position/size set via JS to align with input bounds */ background: #fff; border: 1.5px solid var(--brand-border); border-top: none; border-radius: 0 0 4px 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); list-style: none; margin: 0; padding: 0; font-family: var(--brand-font-primary); font-size: 0.9rem; } .lp-places-item { padding: 0.6rem 1rem; cursor: pointer; display: flex; flex-direction: column; gap: 0.1rem; border-bottom: 1px solid var(--brand-bg-light); } .lp-places-item:last-child { border-bottom: none; } .lp-places-item:hover { background: var(--brand-bg-light); } .lp-places-main { font-weight: 600; color: var(--brand-text-heading); } .lp-places-secondary { font-size: 0.8rem; color: var(--brand-text-base); opacity: 0.75; } /* ---- Responsive ---- */ @media (max-width: 600px) { .lp-search-box__row { flex-direction: column; } .lp-nav__logo { font-size: 1.1rem; } .lp-trust__items { gap: 1rem; } } /* ---- font-display: swap fallback ---- Ensures text renders immediately in system font while web font loads. Prevents FOIT (flash of invisible text) which hurts LCP/CLS. */ body, h1, h2, h3, h4, h5, h6, button, input, a { font-display: swap; } /* ---- Cloudflare Turnstile — reserve space to prevent CLS ---- The Turnstile widget injects a hidden iframe (1px tall in invisible mode). Without this, it causes a tiny layout shift when injected. We give it a fixed 0-height container so it never causes a reflow. */ .cf-turnstile { height: 0 !important; overflow: hidden; visibility: hidden; } .cf-turnstile iframe { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* ---- FAQ ---- */ .lp-faq { display: flex; flex-direction: column; gap: 1rem; } .lp-faq__item { background: var(--brand-bg); border: 1px solid var(--brand-border); border-radius: 6px; padding: 1.25rem 1.5rem; } .lp-faq__question { font-size: 1rem; font-weight: 700; color: var(--brand-text-heading); margin: 0 0 0.5rem; } .lp-faq__answer { font-size: 0.9rem; color: var(--brand-text-base); line-height: 1.6; margin: 0; }