/* ============================================================ offshore.css Page-specific styles for /offshore/index.html and /offshore/map.html. Builds on /offshore/baycast-shared.css — link both, this one second. Source date: 2026-05-09 ============================================================ */ /* OFFSHORE HERO BANNER — marlin promo image, full width. Distinct from .hero in shared CSS (which has the Port Phillip Bay sunset bg). This is a banner-style hero where the image carries the tagline + features baked in. */ .offshore-hero-banner { width: 100%; background: #000; display: block; overflow: hidden; border-bottom: 1px solid var(--border); } .offshore-hero-banner picture { display: block; width: 100%; } .offshore-hero-banner img { display: block; width: 100%; height: auto; max-height: 720px; object-fit: cover; object-position: center; } @media (max-width: 720px) { .offshore-hero-banner img { max-height: none; } } /* HERO CTA BAND — sits directly under the marlin image. Dark, tight. */ .offshore-cta-band { background: var(--bg); color: var(--text); padding: var(--space-12) var(--space-6); text-align: center; border-bottom: 1px solid var(--border); } .offshore-cta-band .btn { margin-bottom: var(--space-4); } .offshore-cta-band .offshore-trial { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--text-dim); font-weight: 600; letter-spacing: 0.2px; } .offshore-cta-band .offshore-coverage { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--text-dimmer); font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; } /* WAITLIST — full-width band before footer. Same dark palette as the homepage; amber accents on the input focus + button via shared .btn. */ .offshore-waitlist { background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%); padding: var(--space-24) var(--space-6); border-top: 1px solid var(--border); } .offshore-waitlist-inner { max-width: 580px; margin: 0 auto; text-align: center; } .offshore-waitlist h2 { font-size: var(--text-xl); margin-bottom: var(--space-4); } .offshore-waitlist .wl-sub { font-size: var(--text-base); color: var(--text-dim); line-height: 1.55; margin: 0 0 var(--space-8); } .wl-form { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; } .wl-input { flex: 1 1 280px; min-width: 0; font-family: inherit; font-size: var(--text-base); font-weight: 600; padding: 14px 18px; border-radius: var(--radius); border: 1.5px solid var(--border-strong); background: var(--bg-3); color: var(--text); min-height: 52px; transition: border-color .15s, background .15s; } .wl-input::placeholder { color: var(--text-dimmer); } .wl-input:focus { outline: none; border-color: var(--amber); background: var(--surface); } .wl-note { margin: var(--space-6) 0 0; font-size: var(--text-xs); color: var(--text-dim); letter-spacing: 0.3px; } @media (max-width: 480px) { .wl-form { flex-direction: column; } .wl-form .btn { width: 100%; } } /* Status pill in the map page header — small text the app.js updates with current data freshness ("Loading…", "Updated 14:32 · 154 arrows", "Rate-limited — retrying in 60s", etc.). */ .header-status { font-size: var(--text-xs); color: var(--text-dim); letter-spacing: 0.3px; white-space: nowrap; max-width: 36ch; overflow: hidden; text-overflow: ellipsis; margin-right: var(--space-3); } @media (max-width: 720px) { .header-status { display: none; } /* save space on phones; status still updates DOM for screen-readers */ } /* SOFT ACCESS GATE (map page only) — full-viewport black overlay with a minimal unlock card. Injected by inline script at top of map.html when no valid 30-day token is in localStorage. SHA-256 of the submitted code is checked against a baked hash so the password isn't visible in source. NOT a security gate — friction only. */ .gate-overlay { position: fixed; inset: 0; z-index: 9999; background: #000; display: flex; align-items: center; justify-content: center; padding: var(--space-6); opacity: 0; transition: opacity 320ms ease; pointer-events: none; font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; } .gate-overlay.visible { opacity: 1; pointer-events: auto; } .gate-overlay.unlocking { opacity: 0; pointer-events: none; } .gate-card { max-width: 380px; width: 100%; text-align: center; color: #fff; } .gate-logo { width: 72px; height: 72px; color: var(--amber); margin: 0 auto var(--space-6); display: block; } .gate-title { font-family: 'Anton', Impact, sans-serif; font-weight: 400; font-size: 32px; letter-spacing: 0.02em; text-transform: uppercase; margin: 0 0 var(--space-2); line-height: 1; } .gate-sub { color: var(--text-dim); font-size: 15px; margin: 0 0 var(--space-8); line-height: 1.5; } .gate-form { display: flex; flex-direction: column; gap: var(--space-3); } .gate-form input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 18px; font-weight: 700; padding: 16px; border-radius: var(--radius); border: 1.5px solid var(--border-strong); background: var(--bg-3); color: #fff; text-align: center; letter-spacing: 0.4em; text-transform: uppercase; min-height: 56px; } .gate-form input::placeholder { letter-spacing: 0.04em; text-transform: none; font-family: 'Inter', sans-serif; font-weight: 500; color: var(--text-dimmer); } .gate-form input:focus { outline: none; border-color: var(--amber); background: var(--surface); } .gate-btn { font-family: inherit; font-size: 16px; font-weight: 800; letter-spacing: 0.02em; background: var(--amber); color: #0a1420; border: 0; border-radius: var(--radius); padding: 16px; min-height: 56px; cursor: pointer; transition: transform .15s, background .15s; } .gate-btn:hover { background: var(--amber-bright); transform: translateY(-1px); } .gate-btn:active { transform: translateY(0); } .gate-error { color: #ff7a6e; font-size: 13px; font-weight: 700; margin: var(--space-4) 0 0; letter-spacing: 0.3px; } .gate-help { color: var(--text-dim); font-size: 13px; margin: var(--space-8) 0 0; line-height: 1.5; } .gate-help a { color: var(--amber); border-bottom: 1px dotted var(--amber); } .gate-help a:hover { color: var(--amber-bright); border-color: var(--amber-bright); } /* MAP page — when .map-page body class is set, the layout becomes a full-bleed map under a sticky header. Cancels the homepage's body overflow-x: hidden because Leaflet panes need to overflow. */ body.map-page { overflow-x: hidden; height: 100vh; display: flex; flex-direction: column; } body.map-page .map-shell { flex: 1 1 auto; position: relative; min-height: 0; } body.map-page .map-shell #map { position: absolute; inset: 0; }