/* BuffetPricesUSA Location Finder - scoped production styles */ #bp-locations-root, #bp-locations-root * { box-sizing: border-box; } #bp-locations-root { --navy:#0f172a; --slate:#475569; --muted:#64748b; --line:#e2e8f0; --bg:#f8fafc; --orange:#d96b00; color:var(--navy); font-family:inherit; } #bp-locations-root .bp-loc-shell { background:#f8fafc; min-height:100vh; } #bp-locations-root .bp-loc-container { width:min(1280px,100%); margin:0 auto; padding:0 24px; } #bp-locations-root .bp-loc-hero { background:#fff; border-bottom:1px solid var(--line); padding:64px 0; } #bp-locations-root .bp-loc-hero-copy { max-width:780px; } #bp-locations-root .bp-loc-eyebrow { display:block; margin-bottom:14px; color:var(--orange); font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; } #bp-locations-root h1 { margin:0 0 18px; color:var(--navy); font-size:clamp(36px,5vw,52px); line-height:1.08; letter-spacing:-.035em; font-weight:850; } #bp-locations-root .bp-loc-hero-copy>p { margin:0 0 28px; color:var(--slate); font-size:18px; line-height:1.65; } #bp-locations-root .bp-loc-independent { display:flex; align-items:flex-start; gap:10px; width:fit-content; max-width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--muted); font-size:12px; line-height:1.55; } #bp-locations-root .bp-loc-independent p { margin:0; } #bp-locations-root .bp-loc-independent strong { color:#52637a; } #bp-locations-root .bp-loc-main { padding:48px 0 72px; } #bp-locations-root .bp-loc-grid { display:grid; grid-template-columns:minmax(270px,1fr) minmax(0,2fr); gap:40px; align-items:stretch; } #bp-locations-root .bp-loc-card, #bp-locations-root .bp-loc-map-card { background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 1px 3px rgba(15,23,42,.06); } #bp-locations-root .bp-loc-card { padding:24px; } #bp-locations-root .bp-loc-card h2 { margin:0 0 18px; font-size:21px; line-height:1.25; font-weight:800; } #bp-locations-root .bp-loc-input-wrap { position:relative; } #bp-locations-root .bp-loc-input-wrap>.bp-loc-icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); width:19px; height:19px; color:#94a3b8; } #bp-locations-root .bp-loc-input-wrap input { width:100%; min-width:0; padding:13px 14px 13px 43px; border:1px solid #cbd5e1; border-radius:10px; background:#fff; color:var(--navy); font:inherit; font-size:15px; outline:none; transition:.2s; } #bp-locations-root .bp-loc-input-wrap input:focus { border-color:var(--orange); box-shadow:0 0 0 3px rgba(217,107,0,.12); } #bp-locations-root .bp-loc-primary, #bp-locations-root .bp-loc-secondary { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:48px; border-radius:10px; font:inherit; font-weight:800; cursor:pointer; transition:.18s; } #bp-locations-root .bp-loc-primary { margin-top:14px; border:1px solid var(--orange); background:var(--orange); color:#fff; } #bp-locations-root .bp-loc-primary:hover { filter:brightness(.93); } #bp-locations-root .bp-loc-secondary { border:1px solid #cbd5e1; background:#fff; color:#334155; } #bp-locations-root .bp-loc-secondary:hover { background:#f8fafc; } #bp-locations-root .bp-loc-secondary:disabled { opacity:.65; cursor:not-allowed; } #bp-locations-root .bp-loc-divider { display:flex; align-items:center; gap:13px; margin:20px 0; } #bp-locations-root .bp-loc-divider span { flex:1; border-top:1px solid var(--line); } #bp-locations-root .bp-loc-divider b { color:#94a3b8; font-size:11px; letter-spacing:.12em; } #bp-locations-root .bp-loc-privacy { margin:10px 0 0; color:var(--muted); font-size:11px; line-height:1.4; text-align:center; } #bp-locations-root .bp-loc-error { display:flex; align-items:flex-start; gap:8px; margin-top:12px; padding:11px 12px; border:1px solid #fde68a; border-radius:9px; background:#fffbeb; color:#b45309; font-size:13px; line-height:1.4; } #bp-locations-root .bp-loc-map-card { min-height:500px; overflow:hidden; } #bp-locations-root .bp-loc-empty { min-height:500px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px; text-align:center; background:linear-gradient(180deg,#fff,#fbfdff); } #bp-locations-root .bp-loc-empty-icon { width:66px; height:66px; display:grid; place-items:center; margin-bottom:16px; border:1px solid var(--line); border-radius:50%; background:#f1f5f9; color:#94a3b8; } #bp-locations-root .bp-loc-empty-icon .bp-loc-icon { width:32px; height:32px; } #bp-locations-root .bp-loc-empty h3 { margin:0 0 8px; font-size:21px; font-weight:800; } #bp-locations-root .bp-loc-empty p { max-width:390px; margin:0; color:var(--muted); line-height:1.6; } #bp-locations-root .bp-loc-map-active { position:relative; min-height:500px; height:100%; } #bp-locations-root .bp-loc-map-active iframe { display:block; width:100%; min-height:500px; height:100%; border:0; } #bp-locations-root .bp-loc-map-action { position:absolute; left:50%; bottom:22px; transform:translateX(-50%); } #bp-locations-root .bp-loc-map-action a { display:flex; align-items:center; gap:8px; padding:12px 20px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--navy); box-shadow:0 8px 24px rgba(15,23,42,.18); font-size:14px; font-weight:800; text-decoration:none; white-space:nowrap; } #bp-locations-root .bp-loc-official { display:flex; align-items:flex-start; gap:12px; margin-top:18px; padding:16px; border:1px solid #dbeafe; border-radius:12px; background:#eff6ff; color:#1e40af; font-size:13px; } #bp-locations-root .bp-loc-official strong { display:block; margin-bottom:4px; color:#1e3a8a; } #bp-locations-root .bp-loc-official p { margin:0 0 8px; line-height:1.55; } #bp-locations-root .bp-loc-official a { display:inline-flex; align-items:center; gap:5px; color:#1d4ed8; font-weight:800; text-decoration:none; } #bp-locations-root .bp-loc-support { max-width:900px; margin:82px auto 0; display:flex; flex-direction:column; gap:62px; } #bp-locations-root .bp-loc-support h2 { margin:0 0 20px; color:var(--navy); font-size:clamp(26px,3.5vw,34px); line-height:1.2; letter-spacing:-.025em; font-weight:850; } #bp-locations-root .bp-loc-support p { margin:0; color:var(--slate); font-size:17px; line-height:1.8; } #bp-locations-root .bp-loc-info-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; } #bp-locations-root .bp-loc-info-grid article { min-width:0; padding:24px; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:0 1px 3px rgba(15,23,42,.05); } #bp-locations-root .bp-loc-info-grid article>.bp-loc-icon { width:21px; height:21px; margin-bottom:14px; color:var(--orange); } #bp-locations-root .bp-loc-info-grid h3 { margin:0 0 8px; font-size:18px; font-weight:800; } #bp-locations-root .bp-loc-info-grid p { font-size:14px; line-height:1.65; } #bp-locations-root .bp-loc-why { padding:28px; border:1px solid var(--line); border-radius:16px; background:#f1f5f9; } #bp-locations-root .bp-loc-why h2 { font-size:25px; } #bp-locations-root .bp-loc-why p { font-size:15px; } #bp-locations-root .bp-loc-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; } #bp-locations-root .bp-loc-links>a { display:flex; flex-direction:column; min-width:0; padding:20px; border:1px solid var(--line); border-radius:13px; background:#fff; color:inherit; text-decoration:none; box-shadow:0 1px 3px rgba(15,23,42,.05); transition:.18s; } #bp-locations-root .bp-loc-links>a:hover { border-color:#fdba74; box-shadow:0 8px 20px rgba(15,23,42,.08); transform:translateY(-1px); } #bp-locations-root .bp-loc-links strong { margin-bottom:7px; font-size:16px; } #bp-locations-root .bp-loc-links span { margin-bottom:16px; color:var(--muted); font-size:13px; line-height:1.55; } #bp-locations-root .bp-loc-links b { display:flex; align-items:center; gap:3px; margin-top:auto; color:var(--orange); font-size:11px; letter-spacing:.08em; text-transform:uppercase; } #bp-locations-root .bp-loc-links b .bp-loc-icon { width:14px; height:14px; } #bp-locations-root .bp-loc-faq-title { display:flex; align-items:center; gap:10px; margin-bottom:20px; } #bp-locations-root .bp-loc-faq-title>.bp-loc-icon { width:24px; height:24px; color:var(--orange); } #bp-locations-root .bp-loc-faq-title h2 { margin:0; } #bp-locations-root .bp-loc-faqs { display:flex; flex-direction:column; gap:10px; } #bp-locations-root .bp-loc-faq-item { overflow:hidden; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:0 1px 2px rgba(15,23,42,.04); } #bp-locations-root .bp-loc-faq-btn { width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; border:0; background:#fff; color:var(--navy); font:inherit; font-weight:800; text-align:left; cursor:pointer; } #bp-locations-root .bp-loc-faq-btn:hover { background:#f8fafc; } #bp-locations-root .bp-loc-faq-btn .bp-loc-icon { width:18px; height:18px; color:#94a3b8; flex:0 0 auto; } #bp-locations-root .bp-loc-faq-answer { padding:16px 20px 19px; border-top:1px solid #f1f5f9; color:var(--slate); font-size:14px; line-height:1.7; } #bp-locations-root .bp-loc-icon { width:18px; height:18px; flex:0 0 auto; } #bp-locations-root .bp-loc-spin { animation:bp-loc-spin 1s linear infinite; } #bp-locations-root .bp-loc-sr { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; } @keyframes bp-loc-spin { to { transform:rotate(360deg); } } @media (max-width:900px) { #bp-locations-root .bp-loc-grid { grid-template-columns:1fr; gap:24px; } #bp-locations-root .bp-loc-map-card, #bp-locations-root .bp-loc-empty, #bp-locations-root .bp-loc-map-active, #bp-locations-root .bp-loc-map-active iframe { min-height:430px; } #bp-locations-root .bp-loc-links { grid-template-columns:1fr; } } @media (max-width:640px) { #bp-locations-root .bp-loc-container { padding:0 16px; } #bp-locations-root .bp-loc-hero { padding:38px 0; } #bp-locations-root h1 { font-size:34px; } #bp-locations-root .bp-loc-hero-copy>p { font-size:16px; } #bp-locations-root .bp-loc-main { padding:28px 0 50px; } #bp-locations-root .bp-loc-card { padding:18px; } #bp-locations-root .bp-loc-info-grid { grid-template-columns:1fr; } #bp-locations-root .bp-loc-support { margin-top:58px; gap:46px; } #bp-locations-root .bp-loc-support p { font-size:16px; } #bp-locations-root .bp-loc-map-card, #bp-locations-root .bp-loc-empty, #bp-locations-root .bp-loc-map-active, #bp-locations-root .bp-loc-map-active iframe { min-height:360px; } #bp-locations-root .bp-loc-map-action a { padding:11px 16px; font-size:13px; } #bp-locations-root .bp-loc-why { padding:22px 18px; } } @media (max-width:360px) { #bp-locations-root .bp-loc-container { padding:0 12px; } #bp-locations-root h1 { font-size:31px; } #bp-locations-root .bp-loc-map-action { width:calc(100% - 24px); } #bp-locations-root .bp-loc-map-action a { justify-content:center; width:100%; white-space:normal; text-align:center; } } /* ========================================================= PREMIUM LOCATION FINDER HERO Matches BuffetPricesUSA article + utility design language ========================================================= */ #bp-locations-root .bp-loc-hero { position: relative; overflow: hidden; isolation: isolate; width: calc(100% - 32px); margin: 16px auto 0; border: 1px solid rgba(203, 213, 225, 0.75); border-radius: 24px; background: radial-gradient( circle at 14% 25%, rgba(217, 107, 0, 0.09), transparent 30% ), radial-gradient( circle at 87% 68%, rgba(255, 184, 87, 0.11), transparent 31% ), linear-gradient( 135deg, #f8fafc 0%, #fffaf4 50%, #f8fafc 100% ); background-size: 140% 140%; box-shadow: 0 12px 35px rgba(15, 23, 42, 0.06); animation: bpLocationHeroBackground 18s ease-in-out infinite alternate; } /* Keep actual hero content above decorative layers */ #bp-locations-root .bp-loc-hero > .bp-loc-container { position: relative; z-index: 3; } /* Soft warm floating glow — left */ #bp-locations-root .bp-loc-hero::before { content: ""; position: absolute; width: 520px; height: 520px; top: -285px; left: -125px; border-radius: 999px; background: radial-gradient( circle, rgba(217, 107, 0, 0.15) 0%, rgba(255, 184, 87, 0.08) 38%, rgba(255, 255, 255, 0) 72% ); filter: blur(8px); opacity: 0.9; pointer-events: none; z-index: 1; animation: bpLocationHeroHaloLeft 13s ease-in-out infinite alternate; } /* Right glow + dotted pattern */ #bp-locations-root .bp-loc-hero::after { content: ""; position: absolute; width: 620px; height: 420px; right: -180px; bottom: -205px; border-radius: 48%; background-image: radial-gradient( circle at 50% 50%, rgba(255, 174, 66, 0.13) 0%, rgba(217, 107, 0, 0.06) 42%, transparent 72% ), radial-gradient( circle, rgba(15, 23, 42, 0.07) 1.2px, transparent 1.4px ); background-size: 100% 100%, 24px 24px; opacity: 0.72; pointer-events: none; z-index: 1; animation: bpLocationHeroHaloRight 17s ease-in-out infinite alternate; } @keyframes bpLocationHeroBackground { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } @keyframes bpLocationHeroHaloLeft { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(55px, 24px, 0) scale(1.06); } 100% { transform: translate3d(90px, 8px, 0) scale(1.02); } } @keyframes bpLocationHeroHaloRight { 0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); } 50% { transform: translate3d(-45px, -24px, 0) rotate(3deg) scale(1.04); } 100% { transform: translate3d(-75px, -8px, 0) rotate(-2deg) scale(1.02); } } /* Mobile refinement */ @media (max-width: 640px) { #bp-locations-root .bp-loc-hero { width: calc(100% - 16px); margin-top: 8px; border-radius: 22px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05); } #bp-locations-root .bp-loc-hero::before { width: 360px; height: 360px; top: -210px; left: -150px; opacity: 0.72; } #bp-locations-root .bp-loc-hero::after { width: 400px; height: 300px; right: -210px; bottom: -175px; opacity: 0.48; } } /* Accessibility */ @media (prefers-reduced-motion: reduce) { #bp-locations-root .bp-loc-hero, #bp-locations-root .bp-loc-hero::before, #bp-locations-root .bp-loc-hero::after { animation: none !important; } }