/* ============ CashApp theme ============ */ /* Dark is the default. Setting data-theme="light" on switches palettes. */ :root, :root[data-theme="dark"] { --bg: #0b1120; --bg-soft: #111a2e; --panel: #16223c; --panel-2: #1b2a49; --border: #24365c; --text: #e8eefc; --muted: #93a4c8; --accent: #34d399; --accent-2: #0ea5e9; --danger: #f87171; --on-accent: #06121f; --hover-surface: rgba(255,255,255,.06); --skeleton: rgba(255,255,255,.12); --glow-1: rgba(14,165,233,.18); --glow-2: rgba(52,211,153,.14); --radius: 18px; --shadow: 0 20px 50px rgba(0,0,0,.45); --hero-card-bg: transparent; --hero-card-shadow: none; --atm-shadow: rgba(11,20,40,.35); --atm-body: #1f2f50; --atm-edge: #2c3f66; --atm-bezel: #263857; --atm-face: #1b2a49; --atm-screen-frame: #16233f; --atm-slot: #101c33; --atm-keypad: #223350; --atm-key: #cfd8e6; } :root[data-theme="light"] { --bg: #f4f7fb; --bg-soft: #ffffff; --panel: #ffffff; --panel-2: #eef3fa; --border: #d7e0ee; --text: #0e1a2e; --muted: #5a6b86; --hero-card-bg: linear-gradient(160deg, #eaf1fb, #dde8f6); --hero-card-shadow: 0 16px 40px rgba(24, 45, 82, .14); --atm-shadow: rgba(24,45,82,.12); --atm-body: #ccd8ec; --atm-edge: #b3c4de; --atm-bezel: #dbe5f4; --atm-face: #eef3fb; --atm-screen-frame: #b8c7e0; --atm-slot: #aab9d4; --atm-keypad: #d3ddef; --atm-key: #6b7c9c; --accent: #059669; --accent-2: #0284c7; --danger: #dc2626; --on-accent: #ffffff; --hover-surface: rgba(15,23,42,.05); --skeleton: rgba(15,23,42,.10); --glow-1: rgba(2,132,199,.14); --glow-2: rgba(5,150,105,.12); --radius: 18px; --shadow: 0 20px 50px rgba(15,23,42,.12); } * { box-sizing: border-box; } /* Use overflow-x: clip (not hidden) so horizontal overflow is trimmed without turning html/body into a scroll container, which would break position: sticky on the search map. */ html, body { overflow-x: clip; } body { margin: 0; background: radial-gradient(1200px 600px at 80% -10%, var(--glow-1), transparent 60%), radial-gradient(1000px 500px at -10% 10%, var(--glow-2), transparent 55%), var(--bg); color: var(--text); font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; -webkit-font-smoothing: antialiased; min-height: 100vh; } .app-shell { max-width: 1100px; margin: 0 auto; padding: 0 20px 40px; min-height: 100vh; display: flex; flex-direction: column; } .app-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 20px 0; position: sticky; top: 0; z-index: 20; backdrop-filter: blur(8px); } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-weight: 700; font-size: 1.25rem; min-width: 0; flex: 0 1 auto; } .brand img { width: 36px; height: 36px; flex: none; } .brand strong { color: var(--accent); font-weight: 800; } .app-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; min-width: 0; } .app-nav a { color: var(--muted); text-decoration: none; padding: 8px 14px; border-radius: 999px; font-weight: 500; transition: .2s; } .app-nav a:hover { color: var(--text); background: var(--hover-surface); } .install-button { border: 1px solid var(--border); background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--on-accent); font-weight: 700; padding: 8px 16px; border-radius: 999px; cursor: pointer; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-soft); color: var(--text); cursor: pointer; transition: background .2s, color .2s, border-color .2s; } .theme-toggle:hover { background: var(--hover-surface); } .theme-toggle svg { width: 18px; height: 18px; display: block; } /* Show the sun in dark mode (click to go light), moon in light mode. */ .theme-toggle .icon-sun { display: block; } .theme-toggle .icon-moon { display: none; } :root[data-theme="light"] .theme-toggle .icon-sun { display: none; } :root[data-theme="light"] .theme-toggle .icon-moon { display: block; } main { flex: 1; } /* Buttons */ /* The HTML `hidden` attribute must win even over flex/inline-flex display rules. */ [hidden] { display: none !important; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; cursor: pointer; padding: 14px 22px; border-radius: 14px; font-weight: 700; font-size: 1rem; text-decoration: none; transition: transform .15s, box-shadow .2s; } .btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--on-accent); box-shadow: 0 10px 24px rgba(14,165,233,.35); } .btn-primary:hover { transform: translateY(-2px); } .btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border); } .btn-block { width: 100%; } /* Hero */ .hero { display: grid; grid-template-columns: 1.3fr .7fr; gap: 30px; align-items: center; padding: 40px 0 20px; } .pill { display: inline-block; padding: 6px 14px; border-radius: 999px; background: rgba(52,211,153,.12); color: var(--accent); font-weight: 600; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; } .hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.05; margin: 18px 0 14px; font-weight: 800; letter-spacing: -.02em; } .hero .accent { color: var(--accent); } .lede { color: var(--muted); font-size: 1.1rem; max-width: 520px; } .hero-actions { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; } .hero-card { display: flex; align-items: center; justify-content: center; padding: 18px; border-radius: 28px; background: var(--hero-card-bg); box-shadow: var(--hero-card-shadow); } .hero-image { display: block; width: 100%; max-width: 420px; height: auto; } /* Features */ .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; } .feature { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; } .feature-icon { font-size: 1.8rem; } .feature h3 { margin: 12px 0 6px; } .feature p { color: var(--muted); margin: 0; } /* Search page */ .search-page { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 20px; align-items: start; } .search-panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; } .search-panel h1 { margin: 0 0 18px; font-size: 1.6rem; } .segmented { display: inline-flex; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 999px; padding: 4px; margin-bottom: 18px; } .segmented-option { border: none; background: transparent; color: var(--muted); padding: 9px 18px; border-radius: 999px; cursor: pointer; font-weight: 600; } .segmented-option.is-active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--on-accent); } .hint { color: var(--muted); margin: 0 0 14px; } .hint-muted { font-size: .85rem; opacity: .8; margin-top: 10px; } .field-label { display: block; margin-bottom: 8px; font-weight: 600; } .field-row { display: flex; gap: 10px; } .field-input { flex: 1; min-width: 0; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg-soft); color: var(--text); font-size: 1rem; } .field-input:focus { outline: none; border-color: var(--accent); } .search-status { margin: 16px 0 4px; color: var(--muted); } .search-status.is-error { color: var(--danger); } .results { display: grid; gap: 14px; margin-top: 18px; } .atm-card { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 16px; padding: 18px; } .atm-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .atm-card-head h3 { margin: 0; font-size: 1.05rem; } .atm-distance { color: var(--accent); font-weight: 700; white-space: nowrap; } .atm-address { color: var(--muted); margin: 6px 0 12px; } .atm-address-pending { font-style: italic; opacity: 0.85; } .atm-address-pending .dots { display: inline-block; margin-left: 2px; } .atm-address-pending .dots span { opacity: 0; animation: cashapp-dots 1.4s infinite; } .atm-address-pending .dots span:nth-child(2) { animation-delay: 0.2s; } .atm-address-pending .dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes cashapp-dots { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 0; } } .atm-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .chip { font-size: .8rem; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid var(--border); color: var(--text); } .chip-ok { background: rgba(52,211,153,.14); color: var(--accent); border-color: transparent; } .chip-closed { background: rgba(248,113,113,.14); color: var(--danger); border-color: transparent; } .chip-muted { background: var(--panel-2); color: var(--muted); border-color: var(--border); } .chip-unknown { background: transparent; color: var(--muted); border-color: var(--border); border-style: dashed; } .chip-source { background: rgba(99,102,241,.12); color: var(--muted); border-color: transparent; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; } .chip-hours { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font-family: inherit; background: var(--panel-2); color: var(--accent-2); border-color: var(--border); transition: background .15s, transform .15s; } .chip-hours:hover { background: var(--hover-surface); transform: translateY(-1px); } .chip-hours-icon { font-size: .9em; } .atm-link { color: var(--accent-2); font-weight: 600; text-decoration: none; } /* Opening hours modal */ .hours-modal { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 20px; } .hours-modal[hidden] { display: none; } .hours-modal-backdrop { position: absolute; inset: 0; background: rgba(3, 8, 20, .72); backdrop-filter: blur(4px); } .hours-modal-card { position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; max-width: 420px; width: 100%; box-shadow: var(--shadow); } .hours-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .hours-modal-head h2 { margin: 0; font-size: 1.25rem; } .hours-modal-close { background: none; border: none; color: var(--muted); font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 4px; } .hours-modal-close:hover { color: var(--text); } .hours-modal-name { color: var(--muted); margin: 4px 0 16px; } .hours-list { list-style: none; margin: 0; padding: 0; } .hours-row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 12px; border-radius: 10px; } .hours-row + .hours-row { margin-top: 2px; } .hours-row.is-today { background: rgba(52,211,153,.12); font-weight: 700; } .hours-day { color: var(--text); } .hours-value { color: var(--muted); } .hours-row.is-today .hours-value { color: var(--accent); } body.modal-open { overflow: hidden; } /* Load more */ .load-more-wrap { display: flex; justify-content: center; margin-top: 18px; } .load-more-btn { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 999px; padding: 11px 26px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background .15s, transform .15s; } .load-more-btn:hover { background: var(--hover-surface); transform: translateY(-1px); } .load-more-btn:disabled { opacity: .6; cursor: default; transform: none; } .load-more-btn[hidden] { display: none; } /* Result card actions */ .atm-card-title { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; } .atm-card-title:hover { color: var(--accent); text-decoration: underline; } .atm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .atm-action { display: inline-flex; align-items: center; gap: 6px; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px; font-size: 0.85rem; font-weight: 600; font-family: inherit; cursor: pointer; text-decoration: none; transition: background .15s; } .atm-action:hover { background: var(--hover-surface); } .atm-action-icon { font-size: 0.95rem; line-height: 1; } /* Street View modal */ .streetview-modal[hidden] { display: none; } .streetview-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 20px; } .streetview-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); } .streetview-modal-card { position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); max-width: 720px; width: 100%; box-shadow: 0 20px 50px rgba(0,0,0,.5); overflow: hidden; } .streetview-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); } .streetview-modal-head h2 { margin: 0; font-size: 1.1rem; } .streetview-modal-close { background: none; border: 0; color: var(--muted); font-size: 1.4rem; line-height: 1; cursor: pointer; } .streetview-modal-close:hover { color: var(--text); } .streetview-modal-body { padding: 0; } .streetview-modal-body img { display: block; width: 100%; height: auto; } .streetview-pano { width: 100%; height: 420px; } .streetview-empty { padding: 40px 20px; text-align: center; color: var(--muted); } .map-panel { position: sticky; top: 90px; align-self: start; } .map-attribution { margin: 8px 2px 0; font-size: 11px; color: var(--muted); } .map-attribution a { color: var(--muted); text-decoration: underline; } .map { min-height: 420px; height: calc(100vh - 110px); border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; } /* Google InfoWindow renders on a white background; force readable dark text so it stays legible under the app's dark theme. */ .gm-iw-content { color: #1f2937; font-family: inherit; line-height: 1.4; } .gm-iw-content strong { color: #111827; } .gm-style .gm-style-iw-c, .gm-style .gm-style-iw-d { color: #1f2937; } .map-placeholder { min-height: 420px; border-radius: var(--radius); border: 1px dashed var(--border); background: repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 12px, transparent 12px 24px), var(--panel); display: flex; align-items: center; justify-content: center; text-align: center; padding: 30px; } .map-placeholder-inner { max-width: 320px; } .map-pin { font-size: 2.4rem; } .map-placeholder h3 { margin: 10px 0 8px; } .map-placeholder p { color: var(--muted); margin: 0; } /* Google Places Autocomplete dropdown (appended to body) */ .pac-container { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; margin-top: 4px; box-shadow: 0 12px 30px rgba(0,0,0,.45); font-family: inherit; overflow: hidden; max-width: calc(100vw - 32px); box-sizing: border-box; } .pac-item { color: var(--text); border-top: 1px solid var(--border); padding: 8px 12px; cursor: pointer; } .pac-item:hover, .pac-item-selected { background: rgba(52,211,153,.12); } .pac-item-query { color: var(--text); } .pac-matched { color: var(--accent); } .pac-icon { filter: invert(1) opacity(.6); } .pac-logo:after { filter: invert(1) opacity(.5); } /* Footer */ .app-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 30px 0 10px; color: var(--muted); border-top: 1px solid var(--border); margin-top: 40px; } .app-footer-slogan { font-size: 0.8rem; } .app-footer a { color: var(--muted); text-decoration: none; } .app-footer a:hover { color: var(--text); } /* Legal / prose pages */ .legal { max-width: 760px; margin: 0 auto; padding: 20px 0 40px; } .legal h1 { margin: 0 0 6px; } .legal .legal-updated { color: var(--muted); font-size: 0.85rem; margin: 0 0 24px; } .legal h2 { margin: 28px 0 8px; font-size: 1.15rem; } .legal p, .legal li { color: var(--text); line-height: 1.6; } .legal ul { padding-left: 20px; } .legal a { color: var(--accent-2); } @media (max-width: 820px) { .hero { grid-template-columns: 1fr; } .hero-card { display: none; } .features { grid-template-columns: 1fr; } .search-page { grid-template-columns: 1fr; } .field-row { flex-direction: column; align-items: stretch; } .field-row .btn { width: 100%; } .map-panel { position: static; } .app-nav > a:not(:last-child) { display: none; } .app-footer { flex-direction: column; align-items: flex-start; gap: 8px; } } /* Very narrow phones: shrink header controls so nothing overflows the edge. */ @media (max-width: 400px) { .app-header { padding: 14px 0; gap: 8px; } .brand { font-size: 1.05rem; } .brand img { width: 30px; height: 30px; } .app-nav { gap: 4px; } .lang-select { font-size: .78rem; padding: 7px 26px 7px 10px; } .theme-toggle { width: 34px; height: 34px; } .install-button { padding: 7px 12px; font-size: .85rem; } } /* Accessibility helper */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Language selector in the header nav */ .lang-form { display: inline-flex; margin: 0; } .lang-select { appearance: none; background: var(--bg-soft); color: var(--text); border: 1px solid var(--border); border-radius: 999px; padding: 8px 30px 8px 14px; font: inherit; font-size: .85rem; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: right 14px center, right 9px center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .lang-select:focus { outline: none; border-color: var(--accent); } /* First-load language picker modal */ .lang-picker-overlay[hidden] { display: none; } .lang-picker-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(3, 8, 20, .72); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; } .lang-picker { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px; max-width: 380px; width: 100%; text-align: center; box-shadow: var(--shadow); } .lang-picker-logo { height: 44px; margin-bottom: 12px; } .lang-picker h2 { margin: 0 0 8px; } .lang-picker p { color: var(--muted); margin: 0 0 20px; } .lang-picker-trilingual span { display: block; } .lang-picker-trilingual span[lang="fr"], .lang-picker-trilingual span[lang="en"] { opacity: .7; font-weight: 500; } .lang-picker-title-trilingual span:first-child { font-weight: 800; } .lang-picker-sub span { font-size: .85rem; line-height: 1.5; } .lang-picker-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; text-align: left; } .lang-option { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-soft); cursor: pointer; } .lang-option:hover { border-color: var(--accent); } .btn-block { width: 100%; display: block; text-align: center; }