/*!****************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./styles/globals.css ***! \****************************************************************************************************************************************************************************************************************************************************************/ /* styles.css — find.camp * * Responsive breakpoints — canonical set going forward: * 1100px desktop → tablet (multi-col grids collapse to 2 / 1) * 760px tablet → mobile (drawers become bottom sheets, * admin low-priority columns hidden) * 480px small phone (full-bleed cards, headlines tighten, * single-column grids) * * Older rules at 1180/980/720/420 still exist in this file and migrate * to the canonical set as their sections are touched. New rules should * use 1100 / 760 / 480 only. */ :root { color-scheme: light; /* Mobile-friendliness tokens — referenced by the @media blocks below * so every touch target / sheet shares the same baseline. */ --tap-min: 44px; --sheet-radius: 16px; --mobile-pad: 16px; --bg: #faf6ee; --bg-alt: #f3ecdc; --ink: #1f2418; --ink-soft: #5a5e4d; --line: #e3dcc8; --primary: #2f5a3a; --primary-deep: #1f3f28; --accent: #e8693a; --accent-2: #e8a838; --map-bg: #e9ecdc; --map-land: #d4dcb8; --map-stroke: #9aa67a; --map-water: #8aaad0; /* Surface tokens — flip in dark mode. Use these for any "card"-like surface (nav, modals, cards, panels) instead of literal #fff. */ --surface: #ffffff; --surface-2: var(--bg-alt); --surface-overlay: rgba(255,255,255,.97); --surface-overlay-strong: rgba(255,255,255,.92); --surface-overlay-soft: rgba(255,255,255,.7); /* Always-dark slab (footer, "Open map" CTA over light photo). */ --surface-inverse: #1f2418; --on-inverse: #ffffff; /* Toggle "on" state — ink in light, accent-aware in dark. */ --toggle-on-bg: var(--ink); --toggle-on-text: #ffffff; /* Modal scrim. */ --scrim: rgba(20, 24, 16, 0.55); --radius: 14px; --radius-lg: 22px; --shadow-sm: 0 1px 2px rgba(20,30,15,.06), 0 4px 14px rgba(20,30,15,.05); --shadow-md: 0 4px 10px rgba(20,30,15,.08), 0 14px 30px rgba(20,30,15,.08); --display: 'Bricolage Grotesque', ui-serif, Georgia, serif; --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; } * { box-sizing: border-box; } html, body, #root { height: 100%; } /* Always reserve room for the vertical scrollbar so navigating between a short page (no scrollbar) and a tall one (scrollbar) doesn't shift the layout horizontally. On macOS where scrollbars overlay, this draws no visible track — it just stops the jump. */ html { scrollbar-gutter: stable; } body { margin: 0; font-family: var(--sans); background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .home, .dp, .tp, .mapview { min-height: 100vh; display: flex; flex-direction: column; } .home > .foot, .dp > .foot, .tp > .foot, .mapview > .foot { margin-top: auto; } button { font-family: inherit; cursor: pointer; } /* Anchors are never underlined. Site-wide rule — individual call-sites that need decoration should opt in explicitly. */ a { text-decoration: none; color: inherit; } img { display: block; max-width: 100%; } h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; margin: 0; color: var(--ink); text-wrap: balance; } h1 { font-size: clamp(48px, 7vw, 92px); line-height: 0.96; letter-spacing: -0.035em; } h2 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.05; } h3 { font-size: 18px; line-height: 1.25; } h4 { font-size: 16px; line-height: 1.3; } em { font-style: italic; font-family: 'Bricolage Grotesque', serif; color: var(--accent); } .btn-primary, .btn-ghost { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; border-radius: 999px; font-weight: 600; font-size: 14px; padding: 10px 18px; display: inline-flex; align-items: center; gap: 6px; transition: transform .15s, background .15s, color .15s, border-color .15s; } .btn-primary { background: var(--primary); color: #fff; } .btn-primary:hover { background: var(--primary-deep); } .btn-primary.lg { padding: 14px 24px; font-size: 15px; border-radius: 999px; } .btn-primary.sm { padding: 7px 12px; font-size: 13px; } .btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid transparent; } .btn-ghost:hover { background: rgba(31,36,24,.06); } .btn-ghost.sm { padding: 7px 12px; font-size: 13px; border: 1.5px solid var(--line); } .btn-ghost.sm[data-on="true"] { color: var(--accent); border-color: var(--accent); background: var(--surface); } /* ───────── Mobile touch targets ───────── * Lift compact buttons + icon-only triggers to >= 44 × 44 px on phones * without changing their desktop look. Inner padding rises with the * box so the icons stay centred. */ @media (max-width: 760px) { .btn-primary.sm, .btn-ghost.sm { min-height: var(--tap-min); padding: 10px 14px; } .modal-close, .nav-avatar { min-width: var(--tap-min); min-height: var(--tap-min); } } /* ───────── Auth card / form shell ───────── * Shared shell for the inline-form pages (sign-in, verify-request, * trips/new). Class-driven so the @media blocks below can flatten the * card on phones. Pages still render the headings + copy themselves * — only the shell + typography defaults live here. */ .auth-card { max-width: 440px; margin: 60px auto 80px; padding: 40px 32px; background: var(--bg-alt); border: 1px solid var(--line); border-radius: 16px; } .auth-card.center { text-align: center; } .auth-card h1 { font-family: var(--display); font-size: 32px; font-weight: 600; letter-spacing: -0.02em; margin: 8px 0 12px; } .auth-card .auth-lead { color: var(--ink-soft); font-size: 14px; line-height: 1.55; margin: 0 0 24px; } .auth-card .auth-note { color: var(--ink-soft); font-size: 13px; line-height: 1.6; margin: 0; } .auth-card .auth-back { display: inline-block; margin-top: 24px; color: var(--ink-soft); font-size: 13px; } .auth-card .auth-icon-circle { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--surface); color: var(--primary); margin-bottom: 16px; } .auth-card label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; } .auth-card input[type="email"], .auth-card input[type="text"] { width: 100%; padding: 12px 14px; font-size: 15px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font-family: var(--sans); margin-bottom: 20px; } /* Form shell — wider page-level form container (e.g. trips/new). Same * mobile collapse story as .auth-card. */ .form-shell { max-width: 880px; margin: 40px auto 80px; padding: 0 32px; } .form-shell h1 { font-family: var(--display); font-size: 40px; font-weight: 600; letter-spacing: -0.02em; margin: 8px 0 12px; } .form-shell .form-lead { color: var(--ink-soft); font-size: 15px; line-height: 1.6; margin: 0 0 32px; } @media (max-width: 760px) { .auth-card { max-width: none; margin: 32px 16px 56px; padding: 28px 24px; } .auth-card h1 { font-size: 28px; } .form-shell { padding: 0 24px; margin-top: 32px; } .form-shell h1 { font-size: 32px; } } @media (max-width: 480px) { .auth-card { margin: 0; padding: 28px var(--mobile-pad) 36px; border-left: 0; border-right: 0; border-radius: 0; background: var(--bg); } .auth-card h1 { font-size: 26px; } .auth-card input[type="email"], .auth-card input[type="text"] { min-height: var(--tap-min); } .form-shell { padding: 0 var(--mobile-pad); margin: 24px 0 56px; } .form-shell h1 { font-size: 28px; } } .section-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 14px; } .section-eyebrow .dash { width: 28px; height: 2px; background: var(--accent); border-radius: 2px; } /* ───────── HERO ───────── */ .hero { position: relative; min-height: 760px; padding: 0 0 80px; overflow: hidden; } .hero-bg { position: absolute; inset: 0; z-index: 0; } .hero-bg img { width: 100%; height: 100%; object-fit: cover; } .hero-bg-tint { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31,63,40,.55) 0%, rgba(31,63,40,.35) 30%, var(--bg) 95%), linear-gradient(90deg, rgba(31,63,40,.4), rgba(31,63,40,.1)); } .topo-overlay { position: absolute; inset: 0; pointer-events: none; opacity: 0.18; z-index: 1; background-image: repeating-radial-gradient(ellipse at 30% 60%, transparent 0 60px, rgba(255,255,255,.4) 60px 61px), repeating-radial-gradient(ellipse at 70% 30%, transparent 0 80px, rgba(255,255,255,.4) 80px 81px); mix-blend-mode: overlay; } .nav { position: relative; z-index: 5; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 18px 56px; color: var(--ink); background: var(--surface); border-bottom: 1px solid var(--line); } .nav-brand { display: flex; align-items: center; gap: 10px; justify-self: start; } .brand-mark { width: 34px; height: 34px; border-radius: 10px; background: var(--accent); color: #fff; display: grid; place-items: center; box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); } .brand-mark.sm { width: 26px; height: 26px; border-radius: 8px; } .brand-name { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; color: var(--ink); } .brand-name.sm { font-size: 16px; } .brand-dot { color: var(--accent); } .nav-links { display: flex; gap: 30px; justify-self: center; } .nav-links a { color: var(--ink-soft); font-weight: 500; font-size: 14px; cursor: pointer; text-decoration: none; } .nav-links a:hover { color: var(--ink); } .nav-links a.active { color: var(--ink); font-weight: 600; } .nav-actions { display: flex; gap: 10px; align-items: center; justify-self: end; } .nav-actions .btn-ghost { color: var(--ink); } .nav-actions .btn-ghost:hover { background: var(--bg-alt); } .nav-account { position: relative; } .nav-account summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.82); cursor: pointer; } .nav-account summary::-webkit-details-marker { display: none; } .admin-edit-diff > summary::-webkit-details-marker { display: none; } .admin-edit-diff > summary { list-style: none; } .admin-edit-diff[open] > summary .admin-edit-diff-caret { transform: rotate(90deg); } .nav-account summary:hover { background: var(--bg-alt); } .nav-avatar { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; background: var(--primary); color: #fff; font: 700 12px/1 var(--sans); } .nav-account-panel { position: absolute; top: calc(100% + 10px); right: 0; width: 250px; padding: 10px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-md); } .nav-settings-panel { width: 190px; } .nav-account-panel::before { content: ""; position: absolute; top: -6px; right: 16px; width: 10px; height: 10px; transform: rotate(45deg); background: var(--surface); border-left: 1px solid var(--line); border-top: 1px solid var(--line); } .nav-account-head { display: grid; grid-template-columns: auto 1fr; grid-gap: 10px; gap: 10px; align-items: center; padding: 6px 6px 10px; border-bottom: 1px solid var(--line); margin-bottom: 8px; } .nav-account-head b, .nav-account-head span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-account-head b { font-size: 13px; } .nav-account-head span { font-size: 12px; color: var(--ink-soft); } .nav-menu-row { padding: 6px; display: flex; justify-content: stretch; } .nav-menu-row label, .nav-menu-row select { width: 100%; } .nav-menu-action { width: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; background: transparent; display: flex; align-items: center; padding: 9px 10px; color: var(--ink); border-radius: 5px; font: 600 13px/1.2 var(--sans); text-align: left; } .nav-menu-action:hover { background: var(--bg-alt); } .hero-inner { position: relative; z-index: 4; max-width: 1080px; margin: 0 auto; padding: 80px 56px 0; color: #fff; text-align: center; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.15); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; margin-bottom: 24px; } .hero-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 10px var(--accent-2); } .hero-title { color: #fff; max-width: 880px; margin: 0 auto; } .hero-title em { color: var(--accent-2); } .hero-sub { max-width: 520px; margin: 22px auto 36px; font-size: 17px; color: rgba(255,255,255,.88); line-height: 1.55; } .search { display: flex; align-items: center; background: var(--surface); border-radius: 999px; padding: 8px 8px 8px 24px; max-width: 560px; margin: 0 auto; box-shadow: 0 8px 30px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.04); } .search-icon { color: var(--ink-soft); display: grid; place-items: center; margin-right: 10px; } .search input { flex: 1 1; border: 0; outline: 0; background: transparent; font: 500 16px/1 var(--sans); color: var(--ink); padding: 16px 8px; } .search input::placeholder { color: #a8a89a; } .search-go { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; background: var(--accent); color: #fff; font-weight: 600; font-size: 14px; padding: 12px 20px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; } .search-go:hover { background: #d05a2c; } .suggest { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; } .suggest-lbl { font-size: 13px; color: rgba(255,255,255,.85); font-weight: 500; } .chip { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid rgba(255,255,255,.55); background: rgba(0,0,0,.3); color: #fff; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 999px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); text-shadow: 0 1px 2px rgba(0,0,0,.3); } .chip:hover { background: rgba(255,255,255,.95); color: var(--ink); border-color: #fff; text-shadow: none; } .hero-stamps { position: absolute; inset: 0; pointer-events: none; z-index: 2; } .stamp { position: absolute; color: rgba(255,255,255,.35); width: 180px; height: 54px; } /* ───────── SECTIONS ───────── */ .section { max-width: 1280px; margin: 0 auto; padding: 88px 56px; } .section-alt { background: var(--bg-alt); max-width: none; padding-left: 0; padding-right: 0; } .section-alt > * { max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 56px; padding-right: 56px; } .section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 36px; } /* Featured spots grid */ .featured-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 24px; gap: 24px; } .spot-card { background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .25s, box-shadow .25s; cursor: pointer; display: flex; flex-direction: column; } .spot-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .spot-img { position: relative; aspect-ratio: 4/3; overflow: hidden; } .spot-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; } .spot-card:hover .spot-img img { transform: scale(1.04); } .spot-heart { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.92); border: 0; display: grid; place-items: center; color: var(--ink); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .spot-heart:hover { color: var(--accent); } .spot-type-badge { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; color: #fff; font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 999px; letter-spacing: 0.01em; } .spot-meta { padding: 18px 20px 20px; flex: 1 1; display: flex; flex-direction: column; gap: 4px; } .spot-row { display: flex; justify-content: space-between; align-items: start; gap: 10px; } .spot-row h3 { font-size: 18px; } .spot-rating { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; } .spot-region { font-size: 13px; color: var(--ink-soft); } .spot-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--ink-soft); font-weight: 500; } .spot-foot span:first-child { color: var(--ink); font-weight: 600; } .spot-dot { color: var(--line); } /* Collections */ .coll-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 2fr; grid-auto-rows: 280px; grid-gap: 18px; gap: 18px; } .coll-grid > :nth-child(1) { grid-column: span 2; } .coll-grid > :nth-child(4) { grid-column: span 2; } .coll-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; transition: transform .25s; } .coll-card:hover { transform: translateY(-3px); } .coll-img { position: relative; height: 100%; } .coll-img img { width: 100%; height: 100%; object-fit: cover; } .coll-tint { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.7) 100%); } .coll-tag { position: absolute; top: 14px; left: 14px; background: var(--surface); color: var(--ink); font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.06em; } .coll-text { position: absolute; bottom: 18px; left: 18px; right: 18px; color: #fff; } .coll-text h3 { color: #fff; font-size: 22px; } .coll-text p { font-size: 13px; color: rgba(255,255,255,.85); margin: 4px 0 0; } /* Recent */ .recent-wrap { display: grid; grid-template-columns: 320px 1fr; grid-gap: 56px; gap: 56px; align-items: start; } .recent-side { position: -webkit-sticky; position: sticky; top: 30px; } .recent-side p { color: var(--ink-soft); margin: 14px 0 22px; font-size: 15px; } .recent-list { display: flex; flex-direction: column; gap: 14px; } .recent-row { display: grid; grid-template-columns: 88px 1fr auto; grid-gap: 18px; gap: 18px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; transition: border-color .15s, box-shadow .15s; } .recent-row:hover { border-color: var(--ink); box-shadow: var(--shadow-sm); } .recent-thumb { width: 88px; height: 88px; object-fit: cover; border-radius: 10px; } .recent-mid h4 { margin-top: 4px; font-size: 17px; } .recent-mid p { margin: 4px 0 0; font-size: 13px; color: var(--ink-soft); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .recent-top { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-soft); } .recent-pill { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: 11px; padding: 3px 8px; border-radius: 999px; } .recent-by b { color: var(--ink); } .recent-arrow { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-alt); border: 0; display: grid; place-items: center; color: var(--ink); transition: background .15s, transform .15s; } .recent-arrow:hover { background: var(--primary); color: #fff; transform: translateX(3px); } /* Map preview */ .map-preview { max-width: 1280px; margin: 0 auto; padding: 88px 56px; display: grid; grid-template-columns: 5fr 6fr; grid-gap: 56px; gap: 56px; align-items: center; } .map-preview-text p { color: var(--ink-soft); font-size: 16px; margin: 16px 0 28px; max-width: 420px; } .map-stats { display: flex; gap: 32px; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); } .map-stats > div { display: flex; flex-direction: column; } .map-stats b { font-family: var(--display); font-size: 32px; font-weight: 600; letter-spacing: -0.02em; } .map-stats span { font-size: 13px; color: var(--ink-soft); } .map-preview-img { position: relative; aspect-ratio: 5/4; border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; box-shadow: var(--shadow-md); border: 1px solid var(--line); } .minimap { position: relative; width: 100%; height: 100%; } .minimap-svg { width: 100%; height: 100%; display: block; } .minimap-pin { position: absolute; transform: translate(-50%, -100%); } .minimap-route { position: absolute; inset: 0; pointer-events: none; } .minimap-route svg { width: 100%; height: 100%; } .map-open-cta { position: absolute; bottom: 18px; right: 18px; background: var(--surface-inverse); color: var(--on-inverse); padding: 10px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; } /* Footer */ .foot { background: var(--surface-inverse); color: rgba(255,255,255,.75); padding: 64px 56px 32px; } .foot-top { display: flex; justify-content: space-between; align-items: end; max-width: 1280px; margin: 0 auto 40px; } .foot-brand { display: flex; align-items: center; gap: 10px; color: #fff; } .foot-top p { color: rgba(255,255,255,.65); max-width: 320px; text-align: right; } .foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 40px; gap: 40px; max-width: 1280px; margin: 0 auto; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.1); } .foot-cols > div { display: flex; flex-direction: column; gap: 8px; } .foot-cols b { color: #fff; margin-bottom: 8px; font-size: 14px; } .foot-cols a { color: rgba(255,255,255,.65); font-size: 14px; cursor: pointer; } .foot-cols a:hover { color: #fff; } .foot-bot { max-width: 1280px; margin: 24px auto 0; font-size: 13px; color: rgba(255,255,255,.5); } .foot-slim { padding: 14px 32px; flex-shrink: 0; } .foot-slim-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: auto auto 1fr; align-items: center; grid-gap: 24px; gap: 24px; } .foot-slim-brand { display: inline-flex; align-items: center; gap: 8px; color: #fff; font: 700 14px/1 var(--display); } .foot-slim-links { display: flex; gap: 16px; } .foot-slim-links a { color: rgba(255,255,255,.68); font: 600 12px/1 var(--sans); text-decoration: none; } .foot-slim-links a:hover { color: #fff; } .foot-slim-copy { justify-self: end; color: rgba(255,255,255,.5); font-size: 12px; } /* ───────── MAP PAGE ───────── */ .mapview { height: 100vh; min-height: 100vh; overflow: hidden; position: relative; } .mapview > .foot { display: none; } .map-global-nav { background: var(--surface); border-bottom: 1px solid var(--line); color: var(--ink); padding: 14px 32px; flex-shrink: 0; } .map-global-nav .nav-links a { color: var(--ink-soft); } .map-global-nav .nav-links a:hover { color: var(--ink); } .map-global-nav .nav-links a.active { color: var(--ink); font-weight: 600; } .map-global-nav .nav-actions .btn-ghost { color: var(--ink); } .map-global-nav .nav-actions .btn-ghost:hover { background: var(--bg-alt); } .map-nav { position: relative; display: grid; grid-template-columns: minmax(180px, 1fr) minmax(280px, 420px) minmax(280px, 1fr); align-items: center; grid-gap: 12px; gap: 12px; min-height: 56px; padding: 8px 20px; background: var(--surface-overlay); border-bottom: 1px solid var(--line); z-index: 20; pointer-events: auto; flex-shrink: 0; } .map-app-brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); justify-self: start; } .map-app-exit-icon { width: 28px; height: 28px; border-radius: 999px; display: inline-grid; place-items: center; color: var(--ink-soft); transform: rotate(180deg); transition: background .15s, color .15s; } .map-app-brand:hover .map-app-exit-icon { background: var(--bg-alt); color: var(--ink); } .map-app-brand .brand-mark { width: 32px; height: 32px; border-radius: 9px; } .map-app-brand .brand-name { font-size: 20px; } .map-app-signin { color: var(--ink); font: 700 13px/1 var(--sans); white-space: nowrap; justify-self: end; } .map-app-add { display: inline-flex; align-items: center; justify-content: center; background: var(--primary); color: #fff; min-height: 38px; padding: 0 16px; border-radius: 5px; font: 700 13px/1 var(--sans); white-space: nowrap; } .nav-back { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 0; color: var(--ink); font-weight: 600; padding: 6px 10px; border-radius: 8px; } .nav-back:hover { background: var(--bg-alt); } .nav-back-arrow { display: inline-grid; place-items: center; transform: rotate(180deg); } /* Map nav search bar — matches the site's form-input language (white * surface, subtle --line border, slight ink darkening on focus) so it * reads as an active input field rather than a beige inset. The icon * is the submit affordance, so it gets the ink-soft tint by default * and the deeper ink on focus to match the input border. */ .map-search { width: 100%; display: flex; align-items: center; gap: 10px; background: var(--bg-alt); border: 1px solid transparent; border-radius: 10px; padding: 0 12px; transition: border-color .15s, box-shadow .15s, background .15s; } .map-search-slot { grid-column: 2; grid-row: 1; justify-self: center; width: min(420px, 100%); } .map-nav-actions { grid-column: 3; grid-row: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; } .map-tool-actions, .map-user-actions { display: inline-flex; align-items: center; gap: 10px; min-width: 0; } .map-user-actions { margin-left: auto; } .map-filter-toggle { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; background: var(--bg-alt); min-height: 38px; padding: 0 12px; border-radius: 8px; display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font: 600 13px/1 var(--sans); white-space: nowrap; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; } .map-filter-toggle:hover { background: var(--surface); } .map-filter-toggle[data-open="true"] { background: var(--bg-alt); } .map-filter-toggle:focus { outline: 0; } .map-filter-toggle:focus-visible { box-shadow: 0 0 0 3px rgba(47, 90, 58, 0.14); } .map-filter-toggle[data-active="true"] { color: var(--ink); } .map-filter-count { display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 5px; border-radius: 999px; background: var(--primary); color: #fff; font: 700 10px/1 var(--sans); } .map-filter-toggle[data-active="true"] .map-filter-count { background: var(--primary); color: #fff; } .map-search:focus-within { border-color: var(--ink-soft); background: var(--surface); box-shadow: 0 0 0 3px rgba(47, 90, 58, 0.08); } .map-search-icon { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; background: transparent; padding: 0; display: grid; place-items: center; color: var(--ink-soft); cursor: pointer; transition: color .15s; } .map-search:focus-within .map-search-icon { color: var(--ink); } .map-search-icon:disabled { cursor: progress; opacity: 0.7; } .map-search input { flex: 1 1; border: 0; outline: 0; background: transparent; font: 500 14px/1 var(--sans); color: var(--ink); padding: 10px 0; } .map-search input::placeholder { color: #a8a89a; } .map-view-toggle { display: flex; background: var(--bg-alt); border-radius: 10px; padding: 4px; } .map-view-toggle button { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; background: transparent; font: 600 13px/1 var(--sans); color: var(--ink-soft); padding: 8px 14px; border-radius: 7px; display: inline-flex; align-items: center; gap: 6px; } .map-view-toggle button[data-on="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); } .fb-filters-btn { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid var(--line); background: var(--surface); font: 600 13px/1 var(--sans); padding: 8px 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; color: var(--ink); white-space: nowrap; flex-shrink: 0; } .fb-filters-btn:hover { background: var(--bg-alt); } .fb-filters-btn[data-on="true"] { background: var(--toggle-on-bg); color: var(--toggle-on-text); border-color: var(--toggle-on-bg); } .fb-filters-btn .cnt { background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 999px; min-width: 18px; text-align: center; } .map-results-pill { font-size: 13px; color: var(--ink-soft); font-weight: 500; white-space: nowrap; padding: 0 8px; flex-shrink: 0; } /* "Search this area" floating button — sits centered near the top of the map canvas, only visible when the user has panned/zoomed off the last fetched bbox. Pattern is borrowed from Google Maps / Yelp / Airbnb. */ .map-search-here { /* Match .btn-primary so the floating action reads as a primary affordance consistent with "Add a spot" in the nav. The drop-shadow stays — this button floats over the map and needs lift to separate from terrain. */ position: absolute; top: 16px; left: 50%; transform: translateX(-50%); -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; border-radius: 999px; background: rgba(47, 90, 58, .94); color: #fff; font-weight: 600; font-size: 13px; font-family: var(--sans); padding: 9px 15px; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.16); cursor: pointer; z-index: 10; transition: transform .15s, background .15s; animation: mshFadeIn .18s ease-out; } .map-search-here:hover { background: var(--primary-deep); } .map-search-here:disabled { opacity: 0.7; cursor: progress; } @keyframes mshFadeIn { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } } .map-spinner { width: 12px; height: 12px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: mshSpin .7s linear infinite; } @keyframes mshSpin { to { transform: rotate(360deg); } } /* Modal backdrop fade — shared by Modal.tsx (AddPhoto / EditSpot / ReportProblem placeholders). Short duration so the modal feels responsive rather than animated. */ @keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } } /* "Showing N — zoom in for more" tag when the server capped the result. */ .map-cap-note { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); background: var(--surface-overlay-strong); color: var(--ink-soft); font: 500 12px/1 var(--sans); padding: 7px 12px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.08), 0 0 0 1px var(--line); z-index: 9; pointer-events: none; } .fb-route { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: var(--bg-alt); border: 0; font: 600 13px/1 var(--sans); padding: 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; color: var(--ink); white-space: nowrap; flex-shrink: 0; cursor: pointer; } .fb-route span { display: none; } .fb-route:hover { background: var(--surface); } .fb-route[data-on="true"] { background: var(--accent); color: #fff; padding: 10px 12px; } .fb-route[data-on="true"] span { display: inline; } @media (max-width: 1180px) { .map-nav { grid-template-columns: auto minmax(220px, 1fr) auto; } .map-search-slot { grid-column: 2; width: min(420px, 100%); } .map-nav-actions { grid-column: 3; justify-content: flex-end; } .map-user-actions { display: none; } } @media (max-width: 760px) { .map-nav { grid-template-columns: auto 1fr auto; gap: 8px; padding: 8px 12px; } .map-app-brand .brand-name { display: none; } .map-search-slot { grid-column: 2; min-width: 0; width: 100%; } .fb-route { display: none; } .map-filter-toggle { min-height: 38px; padding: 0 10px; } .map-filter-toggle > span:not(.map-filter-count) { display: none; } /* Detail sheet — at 380px wide it overflows a 375px viewport. Convert * to a peek-style bottom sheet that shows just enough to identify the * spot (cover thumb, name, rating) and expands on tap to reveal * actions + the "View full" CTA. Amenities + "added by" never appear * here — they live on the full /spots/[slug] page two taps away. */ .detail { top: auto; /* Peek default: floating card with 8 px gutters so it reads as the * same family as .route-panel (also floating with 8 px gutters). * Full 16 px radius on all four corners. The expanded state below * snaps it to the viewport bottom for a true bottom-sheet feel. */ left: 8px; right: 8px; bottom: 8px; width: auto; height: auto; max-height: 70vh; border-radius: var(--sheet-radius); animation: detailSlideUp .24s cubic-bezier(.3,.7,.4,1); transition: max-height .22s cubic-bezier(.3,.7,.4,1), bottom .22s cubic-bezier(.3,.7,.4,1), left .22s cubic-bezier(.3,.7,.4,1), right .22s cubic-bezier(.3,.7,.4,1), border-radius .22s cubic-bezier(.3,.7,.4,1); } .detail[data-expanded] { left: 0; right: 0; bottom: 0; border-radius: var(--sheet-radius) var(--sheet-radius) 0 0; } /* Peek mode: list-card layout — full-height thumb on the left, * grab handle and info stacked on the right. The cover, type pill, * route button, amenities, "added by", and "View full" CTA are all * hidden; tapping the thumbnail or the grab handle expands the * sheet to reveal them. */ .detail:not([data-expanded]) { display: grid; /* Image spans the full left column for both rows; the grab handle * and body share the right column. Image height ends up equal to * grab + body content height — i.e. the full card. */ grid-template-areas: "img grab" "img body"; grid-template-columns: 96px 1fr; grid-template-rows: 14px auto; max-height: none; } .detail:not([data-expanded]) .detail-grab { grid-area: grab; position: relative; top: auto; left: auto; right: auto; height: 14px; background: transparent; } .detail:not([data-expanded]) .detail-grab-bar { background: var(--ink-soft); opacity: 0.45; box-shadow: none; } .detail:not([data-expanded]) .detail-img { grid-area: img; width: 96px; height: 100%; aspect-ratio: auto; cursor: pointer; } /* Type pill on a 96 px thumb is too dense — drop it in peek. */ .detail:not([data-expanded]) .detail-type { display: none; } .detail:not([data-expanded]) .detail-body { grid-area: body; padding: 6px 14px 8px 14px; display: flex; flex-direction: column; justify-content: center; gap: 4px; } .detail:not([data-expanded]) .detail-by, .detail:not([data-expanded]) .detail-region, .detail:not([data-expanded]) .detail-close, .detail:not([data-expanded]) .detail-body > a { display: none; } /* Amenities in peek: a flex row of icon glyphs (no labels, no * heading). Slots between the title row and the actions row via * CSS order so the JSX source order doesn't have to flip for the * expanded layout below. */ .detail:not([data-expanded]) .detail-amen { display: block; order: 1; margin: 4px 0 0; } .detail:not([data-expanded]) .detail-price-row { order: 2; } .detail:not([data-expanded]) .detail-amen h4 { display: none; } .detail:not([data-expanded]) .detail-amen-grid { display: flex; flex-direction: row; gap: 8px; align-items: center; flex-wrap: nowrap; overflow: hidden; } .detail:not([data-expanded]) .detail-amen-item { background: transparent; padding: 0; color: var(--ink-soft); flex: 0 0 auto; } .detail:not([data-expanded]) .detail-amen-label { display: none; } .detail:not([data-expanded]) .detail-head h2 { font-size: 16px; line-height: 1.2; /* Truncate long names rather than wrapping them across the whole * peek body — keeps the card height predictable. */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .detail:not([data-expanded]) .detail-head { /* The desktop @media (max-width: 760px) block down-page sets * align-items: stretch on .detail-head. In peek that stretches the * rating into a full-width slab. Pin children to their natural * width instead. */ align-items: flex-start; gap: 2px; } .detail:not([data-expanded]) .detail-rating { font-size: 12.5px; padding-top: 0; } /* Surface Save + Route in peek, both pushed to the right edge of the * row. Price is hidden (the spot detail page is a tap away on the * card itself). */ .detail:not([data-expanded]) .detail-price-row { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 8px; margin: 2px 0 0; padding: 0; border: 0; } .detail:not([data-expanded]) .detail-price { display: none; } .detail:not([data-expanded]) .detail-actions { width: auto; flex-shrink: 0; gap: 6px; } .detail:not([data-expanded]) .detail-actions .btn-primary.sm, .detail:not([data-expanded]) .detail-actions .btn-ghost.sm { flex: 0 0 auto; min-height: 36px; /* Ditch the "saved/started route" labels on a 251 px-wide body — * the icons carry the meaning; "Save" / "Route" labels keep two * buttons readable side-by-side in peek without overflowing. */ padding: 7px 10px; font-size: 12px; } .detail:not([data-expanded]) .detail-actions .btn-primary.sm { min-width: 0; } /* Expanded mode: actions + price + CTA appear, cover stays * banner-shaped so the content sits in the viewer's thumb zone. */ .detail[data-expanded] .detail-img { aspect-ratio: 21/9; } .detail[data-expanded] .detail-body { padding: 14px 16px 16px; overflow: visible; } .detail[data-expanded] .detail-head h2 { font-size: 20px; } .detail[data-expanded] .detail-region { font-size: 12.5px; } .detail[data-expanded] .detail-amen, .detail[data-expanded] .detail-by { display: none; } .detail[data-expanded] .detail-price-row { margin: 12px 0; padding: 10px 0; } .detail[data-expanded] .detail-price { font-size: 18px; } .detail[data-expanded] .detail-actions .btn-primary.sm { min-width: 0; } .detail-close { width: var(--tap-min); height: var(--tap-min); /* Sit a bit lower in peek so it's vertically centered in the * 96 px-tall row rather than crashing into the grab handle. */ top: 18px; right: 8px; } .detail[data-expanded] .detail-close { top: 12px; right: 12px; } /* Grab handle — wide invisible tap zone with a centred bar. Big * enough to drive the peek↔expand toggle reliably with a thumb. */ .detail-grab { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; background: transparent; position: absolute; top: 0; left: 0; right: 0; height: 24px; z-index: 3; display: flex; align-items: center; justify-content: center; cursor: pointer; /* Sit on top of the cover; semi-transparent so the photo shows * through but the bar is still visible. */ background: linear-gradient(180deg, rgba(0,0,0,.18), transparent); } .detail-grab-bar { width: 38px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.85); box-shadow: 0 1px 3px rgba(0,0,0,.25); } /* Results list — at 360px wide it overlaps the map and clips content * below 375px. Make it a bottom-anchored sheet that takes the bottom * half of the viewport when toggled open. */ .map-body.view-split .spotlist { position: absolute; top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-width: none; max-height: 60vh; border-radius: var(--sheet-radius) var(--sheet-radius) 0 0; } .spotlist-close { width: var(--tap-min); height: var(--tap-min); } /* Map "search this area" / cap-note pills shouldn't push past the * filter toggle on a 375px viewport. */ .map-search-here { font-size: 13px; padding: 9px 14px; } /* Floating filter panel: clamp width so it can't overflow. The panel * itself has its own internal layout, this just bounds it. */ .floating-filter, .filterdrawer { max-width: 100vw; } } @keyframes detailSlideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Filters drawer */ .filterdrawer { background: var(--surface); border-bottom: 1px solid var(--line); padding: 18px 32px 22px; flex-shrink: 0; animation: fdSlideIn .2s cubic-bezier(.3,.7,.4,1); max-height: 50vh; overflow-y: auto; } @keyframes fdSlideIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } .fd-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .fd-head h3 { font-size: 16px; font-family: var(--sans); font-weight: 600; } .fd-head-actions { display: flex; align-items: center; gap: 8px; } .fd-clear { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; background: transparent; font: 600 13px/1 var(--sans); color: var(--ink-soft); padding: 6px 10px; border-radius: 6px; } .fd-clear:hover { color: var(--accent); background: var(--bg-alt); } .fd-x { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; background: var(--bg-alt); color: var(--ink); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; } .fd-x:hover { background: var(--line); } .fd-body { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 22px 40px; gap: 22px 40px; max-width: 980px; } .fd-group { display: flex; flex-direction: column; gap: 10px; } .fd-group:first-child { grid-column: 1 / -1; } .fd-group:last-child { grid-column: 1 / -1; } .fd-lbl { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); font-weight: 600; } .fd-lbl b { color: var(--ink); font-weight: 600; font-size: 13px; letter-spacing: 0; text-transform: none; } .fd-range-input { width: 100%; max-width: 320px; accent-color: var(--accent); } .fb-types { display: flex; flex-wrap: wrap; gap: 6px; } .fb-type { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: var(--surface); border: 1.5px solid; font: 600 12.5px/1 var(--sans); padding: 7px 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; transition: all .15s; } .fb-rating { display: flex; align-items: center; gap: 6px; } .fb-rating button { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid var(--line); background: var(--surface); font: 600 12px/1 var(--sans); padding: 8px 14px; border-radius: 8px; color: var(--ink-soft); } .fb-rating button[data-on="true"] { background: var(--toggle-on-bg); color: var(--toggle-on-text); border-color: var(--toggle-on-bg); } .fd-amen-grid { display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 6px; gap: 6px; } .fd-amen { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid var(--line); background: var(--surface); font: 500 13px/1 var(--sans); padding: 10px 12px; border-radius: 8px; display: inline-flex; align-items: center; gap: 8px; color: var(--ink); } .fd-amen:hover { background: var(--bg-alt); } .fd-amen[data-on="true"] { background: var(--primary); color: #fff; border-color: var(--primary); } .map-body { display: flex; flex: 1 1; min-height: 0; } .map-body.view-split .spotlist { width: 360px; } .map-body.view-list .spotlist { width: 100%; } .map-body.view-map .map-canvas-wrap { width: 100%; } .spotlist { position: absolute; top: 16px; left: 16px; bottom: 16px; z-index: 28; background: var(--surface-overlay); border: 1px solid rgba(31,36,24,.1); border-radius: 10px; box-shadow: 0 18px 50px rgba(0,0,0,.18), 0 3px 10px rgba(0,0,0,.08); display: flex; flex-direction: column; overflow: hidden; max-width: calc(100% - 32px); } .spotlist-head { padding: 12px 14px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; } .spotlist-head h3 { font-size: 15px; font-family: var(--sans); font-weight: 600; } .spotlist-head span { font-size: 12px; color: var(--ink-soft); } .spotlist-head-actions { display: inline-flex; align-items: center; gap: 8px; } .spotlist-close { width: 30px; height: 30px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--bg-alt); color: var(--ink-soft); } .spotlist-close:hover { background: var(--line); color: var(--ink); } .spotlist-scroll { flex: 1 1; overflow-y: auto; padding: 8px; } .map-body.view-list .spotlist-scroll { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); grid-gap: 10px; gap: 10px; padding: 16px 24px; } .map-results-toggle { position: absolute; top: 16px; left: 16px; z-index: 28; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 13px/1 var(--sans); padding: 8px 14px; border-radius: 4px; display: inline-flex; align-items: center; gap: 6px; box-shadow: none; } .map-results-toggle:hover { background: var(--bg-alt); box-shadow: none; } .sl-item { display: grid; grid-template-columns: 84px 1fr auto; grid-gap: 10px; gap: 10px; padding: 8px; border-radius: 8px; cursor: pointer; border: 2px solid transparent; } .sl-item:hover { background: var(--bg-alt); } .sl-item.sel { border-color: var(--accent); background: #fff8f0; } .sl-img { position: relative; width: 84px; height: 84px; border-radius: 7px; overflow: hidden; } .sl-img img { width: 100%; height: 100%; object-fit: cover; } .sl-type { position: absolute; top: 6px; left: 6px; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; } .sl-mid { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .sl-top { display: flex; justify-content: space-between; gap: 8px; } .sl-top h4 { font-size: 14px; font-family: var(--sans); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sl-rating { font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; } .sl-region { font-size: 12px; color: var(--ink-soft); } .sl-amen { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .sl-amen-pill { font-size: 10.5px; color: var(--ink-soft); background: var(--bg-alt); padding: 2px 6px; border-radius: 4px; } .sl-foot { display: flex; gap: 6px; margin-top: 4px; font-size: 12px; color: var(--ink-soft); } .sl-price { font-weight: 700; color: var(--ink); } .sl-actions { display: flex; flex-direction: column; gap: 6px; align-items: end; } .sl-icon { width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--bg-alt); color: var(--ink-soft); display: grid; place-items: center; } .sl-icon[data-on="true"] { background: var(--accent); color: #fff; } .sl-route { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1.5px solid var(--accent); background: var(--surface); color: var(--accent); font: 700 12px/1 var(--sans); width: 28px; height: 28px; border-radius: 50%; } .sl-route[data-on="true"] { background: var(--accent); color: #fff; } /* Map canvas */ .map-canvas-wrap { flex: 1 1; position: relative; min-width: 0; min-height: 0; overflow: hidden; } .mapcanvas { position: relative; width: 100%; height: 100%; cursor: -webkit-grab; cursor: grab; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .mapcanvas:active { cursor: -webkit-grabbing; cursor: grabbing; } .map-bg { position: absolute; inset: 0; } .map-bg-svg { width: 100%; height: 100%; transform-origin: center; } .map-pin-layer { position: absolute; inset: 0; transform-origin: center; } .map-pin-btn { position: absolute; transform: translate(-50%, -100%); background: transparent; border: 0; padding: 0; opacity: .88; transition: transform .15s, opacity .15s; } .map-pin-btn:hover { transform: translate(-50%, -110%); opacity: 1; } .map-pin-btn[data-selected="true"] { opacity: 1; } .map-pin-tag { position: absolute; top: 100%; left: 50%; transform: translate(-50%, 4px); background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 600; white-space: nowrap; padding: 5px 10px; border-radius: 8px; box-shadow: var(--shadow-md); } .map-pin-routenum { position: absolute; top: -6px; right: -6px; background: var(--accent); color: #fff; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 12px/1 var(--sans); border: 2px solid #fff; } .map-cluster { position: absolute; transform: translate(-50%, -50%); background: var(--primary); color: #fff; border: 3px solid #fff; width: 48px; height: 48px; border-radius: 50%; font: 700 14px/1 var(--sans); display: grid; place-items: center; box-shadow: 0 4px 12px rgba(0,0,0,.25), 0 0 0 6px rgba(47,90,58,.18); } .map-route-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .map-controls { position: absolute; top: 16px; right: 16px; z-index: 30; display: flex; flex-direction: column; background: var(--surface); border-radius: 10px; box-shadow: var(--shadow-md); overflow: hidden; } .map-controls button { width: 40px; height: 40px; border: 0; background: var(--surface); display: grid; place-items: center; border-bottom: 1px solid var(--line); } .map-controls button:hover { background: var(--bg-alt); } .map-controls button:last-of-type { border-bottom: 0; } .map-zoom-ind { font: 600 11px/1 var(--mono); padding: 6px; text-align: center; color: var(--ink-soft); border-top: 1px solid var(--line); background: var(--bg-alt); } .map-attrib { position: absolute; bottom: 8px; left: 12px; z-index: 5; font: 500 11px/1 var(--sans); color: var(--ink-soft); background: var(--surface-overlay-soft); padding: 4px 8px; border-radius: 6px; } /* Detail sheet */ .detail { position: absolute; top: 16px; left: 16px; bottom: 16px; width: 380px; z-index: 40; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; display: flex; flex-direction: column; animation: slideIn .25s ease; /* Clicking the card body navigates to the spot detail page; the * grab handle, close X, save, and route buttons all stopPropagation * so they keep their own behaviour. */ cursor: pointer; } @keyframes slideIn { from { transform: translateX(-12px); opacity: 0; } to { transform: none; opacity: 1; } } .detail-close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255,255,255,.95); color: var(--ink); display: grid; place-items: center; } /* Grab handle is a mobile-only affordance (the bottom-sheet variant of * the detail card). Hidden by default; the @media (max-width: 760px) * block above flips it on. */ .detail-grab { display: none; } .detail-img { position: relative; aspect-ratio: 16/10; } .detail-img img { width: 100%; height: 100%; object-fit: cover; } .detail-type { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; color: #fff; font: 600 12px/1 var(--sans); padding: 6px 10px; border-radius: 999px; } .detail-body { padding: 20px 22px; overflow-y: auto; flex: 1 1; } .detail-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; } .detail-head h2 { font-size: 24px; } .detail-region { font-size: 13px; color: var(--ink-soft); margin-top: 2px; } .detail-rating { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--ink-soft); flex-shrink: 0; padding-top: 6px; } .detail-rating b { color: var(--ink); } .detail-price-row { display: flex; justify-content: space-between; align-items: center; margin: 16px 0; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .detail-price { font-family: var(--display); font-size: 22px; font-weight: 600; } .detail-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; } .detail-actions .btn-primary.sm, .detail-actions .btn-ghost.sm { min-width: 78px; min-height: 38px; justify-content: center; white-space: nowrap; } .detail-actions .btn-primary.sm { min-width: 104px; } .detail-desc { font-size: 14px; color: var(--ink-soft); line-height: 1.6; margin: 0 0 20px; } .detail-amen h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); margin-bottom: 10px; font-family: var(--sans); } .detail-amen-grid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 8px; gap: 8px; } .detail-amen-item { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 8px 10px; background: var(--bg-alt); border-radius: 8px; color: var(--ink); } .detail-by { font-size: 13px; color: var(--ink-soft); margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); } .detail-by b { color: var(--ink); } /* When the amenities block is hidden (no amenities for this spot) the price-row's bottom border sits right next to the detail-by top border, making a doubled-up divider with empty space in between. Collapse to a single rule by dropping detail-by's top border in that case. */ .detail-price-row + .detail-by { border-top: 0; padding-top: 0; margin-top: 14px; } .route-panel { position: absolute; bottom: 16px; right: 16px; z-index: 35; width: 340px; background: var(--surface); /* Match the spot detail card's larger corner + roomier padding so * the two floating cards read as the same family of surface. */ border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 20px 22px; overflow: hidden; } .route-head { display: flex; justify-content: space-between; align-items: start; margin-bottom: 14px; gap: 12px; } .route-head h4 { font-family: var(--display); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin: 0; } .route-head span { font-size: 12px; color: var(--ink-soft); } .route-mobile-toggle { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; background: transparent; padding: 0; min-width: 0; color: inherit; font: inherit; text-align: left; display: none; gap: 2px; cursor: default; } .route-head-copy { min-width: 0; } .route-mobile-toggle svg { display: none; } .route-title { font-family: var(--display); font-size: 18px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); } .route-summary { font-size: 12px; color: var(--ink-soft); } .route-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; max-height: 200px; overflow-y: auto; } .route-empty { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px dashed var(--line); border-radius: 8px; background: var(--bg-alt); color: var(--ink-soft); font: 500 12px/1.35 var(--sans); } .route-empty svg { flex-shrink: 0; color: var(--primary); } .route-row { display: grid; grid-template-columns: 26px 1fr auto; grid-gap: 10px; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; background: var(--bg-alt); cursor: -webkit-grab; cursor: grab; -webkit-user-select: none; -moz-user-select: none; user-select: none; transition: opacity 0.12s ease; } .route-row:active { cursor: -webkit-grabbing; cursor: grabbing; } /* Browsers paint the drag image themselves; we dim the in-place row so the user sees clearly what they picked up. */ .route-row[data-dragging] { opacity: 0.35; } /* Drop-position indicator: drawn as an inset box-shadow so it doesn't add height to the row. Inserting a real DOM node here would shift sibling rows and make the cursor jitter between targets. */ .route-row[data-drop-pos="before"] { box-shadow: inset 0 3px 0 0 var(--accent); } .route-row[data-drop-pos="after"] { box-shadow: inset 0 -3px 0 0 var(--accent); } .route-num { background: var(--accent); color: #fff; font: 700 12px/1 var(--sans); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; } .route-info { display: flex; flex-direction: column; min-width: 0; } .route-info b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .route-info span { font-size: 11px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .route-x { width: 22px; height: 22px; border-radius: 50%; border: 0; background: transparent; color: var(--ink-soft); display: grid; place-items: center; } .route-x:hover { background: rgba(0,0,0,.08); color: var(--ink); } /* Per-leg distance row — sits between two route-rows. The vertical line visually connects the two stop bullets to communicate "this is the travel between them". */ .route-leg { display: flex; align-items: center; gap: 10px; padding: 2px 8px 2px 0; margin-left: 18px; /* aligns with the left edge of the route-num bullet */ pointer-events: none; /* never absorb dragover events meant for rows */ transition: opacity 0.12s ease; } .route-leg[data-stale] { opacity: 0.35; } .route-leg-dot { width: 1.5px; height: 18px; background: var(--line); margin-left: 6px; flex-shrink: 0; } .route-leg-label { font: 500 11px/1 var(--sans); color: var(--ink-soft); letter-spacing: 0.01em; } .route-error { margin: -2px 0 10px; color: #9b2f20; font: 600 12px/1.35 var(--sans); } .route-go { width: 100%; justify-content: center; } .route-go:disabled { opacity: .55; cursor: not-allowed; background: var(--primary); } /* Route settings cog — sits in the panel header next to "Clear". */ .route-head-actions { position: relative; display: flex; align-items: center; gap: 6px; } .route-cog { position: relative; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); border-radius: 4px; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; } .route-cog:hover { color: var(--ink); border-color: var(--ink-soft); } .route-cog[data-on="true"] { color: var(--accent); border-color: var(--accent); background: rgba(232, 105, 58, 0.08); } .route-cog-badge { position: absolute; top: -5px; right: -5px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px; background: var(--accent); color: #fff; font: 700 9px/14px var(--sans); text-align: center; border: 1.5px solid #fff; } /* Popover: anchored under the cog button, opens to the left so it doesn't clip the right edge of the panel. */ .route-settings { position: absolute; top: calc(100% + 6px); right: 0; z-index: 5; min-width: 220px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-md); padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; } .route-settings-head { font: 600 12px/1 var(--sans); color: var(--ink); text-transform: uppercase; letter-spacing: 0.06em; padding-bottom: 4px; border-bottom: 1px solid var(--line); margin-bottom: 2px; } .route-settings-row { display: flex; align-items: center; gap: 10px; font: 500 13px/1.2 var(--sans); color: var(--ink); cursor: pointer; padding: 4px 2px; border-radius: 4px; } .route-settings-row:hover { background: var(--bg-alt); } .route-settings-row input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--accent); cursor: pointer; margin: 0; } .route-settings-hint { font: 400 11px/1.4 var(--sans); color: var(--ink-soft); padding-top: 4px; border-top: 1px solid var(--line); margin-top: 2px; } /* Responsive */ @media (max-width: 1100px) { .featured-grid { grid-template-columns: repeat(2, 1fr); } .coll-grid { grid-template-columns: 1fr 1fr; } .coll-grid > :nth-child(1), .coll-grid > :nth-child(4) { grid-column: span 1; } .recent-wrap { grid-template-columns: 1fr; gap: 32px; } .map-preview { grid-template-columns: 1fr; } } @media (max-width: 720px) { .nav { padding: 16px 24px; } .nav-links { display: none; } .hero-inner { padding: 60px 24px 0; } .section { padding: 60px 24px; } .section-alt > * { padding-left: 24px; padding-right: 24px; } .featured-grid { grid-template-columns: 1fr; } .coll-grid { grid-template-columns: 1fr; grid-auto-rows: 220px; } .map-preview { padding: 60px 24px; } .foot-cols { grid-template-columns: 1fr 1fr; } .foot { padding: 40px 24px 24px; } } @media (max-width: 480px) { /* Landing hero is 760px tall by default — half a phone screen of dead * space before content. Drop to a more reasonable height + tighten * the headline lower bound so the title fits on one or two lines. */ .hero { min-height: 540px; padding-bottom: 48px; } .hero-inner { padding: 40px var(--mobile-pad) 0; } h1 { font-size: clamp(34px, 9vw, 64px); } .hero-sub { font-size: 15px; margin: 16px auto 24px; } .search { padding: 6px 6px 6px 16px; } .search input { font-size: 15px; padding: 12px 6px; } .search-go { padding: 10px 14px; } /* Section padding tightens further than 720 to let content breathe on * iPhone SE. */ .section { padding: 48px var(--mobile-pad); } .section-alt > * { padding-left: var(--mobile-pad); padding-right: var(--mobile-pad); } .nav { padding: 12px var(--mobile-pad); } .foot-cols { grid-template-columns: 1fr; } .foot { padding: 32px var(--mobile-pad) 20px; } /* Detail-page side gallery — at 480 the 2-col strip still squeezes * 90px thumbs. Make a single horizontally-scrollable row so admins * can swipe through extras without the layout fighting them. */ .dp-gallery-side { grid-template-columns: repeat(4, 32%); grid-template-rows: 90px; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; } .dp-gallery-side > * { scroll-snap-align: start; } } /* ───────── DETAIL PAGE ───────── */ .dp { background: var(--bg); min-height: 100vh; } .dp-nav { background: var(--surface); border-bottom: 1px solid var(--line); color: var(--ink); padding: 16px 56px; } .dp-nav .nav-actions .btn-ghost { color: var(--ink); } .dp-nav .nav-actions .btn-ghost:hover { background: var(--bg-alt); } .dp-links a { color: var(--ink-soft); } .dp-links a:hover { color: var(--ink); } .dp-share { border: 1.5px solid var(--line); } .dp-crumbs { width: 100%; max-width: 1280px; margin: 0 auto; padding: 18px 56px 0; font-size: 13px; color: var(--ink-soft); display: flex; gap: 8px; align-items: center; } .dp-crumbs a { color: var(--ink-soft); cursor: pointer; } .dp-crumbs a:hover { color: var(--accent); } .dp-crumbs-cur { color: var(--ink); font-weight: 600; } .dp-gallery { width: 100%; max-width: 1280px; margin: 18px auto 0; padding: 0 56px; display: grid; grid-template-columns: 2fr 1fr; grid-gap: 8px; gap: 8px; height: 460px; } .dp-gallery-main { position: relative; overflow: hidden; border-radius: var(--radius-lg); cursor: pointer; } .dp-gallery-main img { width: 100%; height: 100%; object-fit: cover; } .dp-gallery-tint { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, transparent 30%, transparent 70%, rgba(0,0,0,.35) 100%); pointer-events: none; } .dp-gallery-overlay { position: absolute; inset: 0; padding: 18px; display: flex; justify-content: space-between; align-items: start; pointer-events: none; } .dp-gallery-overlay > * { pointer-events: auto; } .dp-type-pill { display: inline-flex; align-items: center; gap: 6px; color: #fff; font: 600 13px/1 var(--sans); padding: 8px 12px; border-radius: 999px; align-self: start; } .dp-saveall { align-self: end; margin-top: auto; background: rgba(255,255,255,.95); color: var(--ink); border: 0; padding: 9px 14px; border-radius: 999px; font: 600 13px/1 var(--sans); position: absolute; bottom: 18px; right: 18px; text-decoration: none; } .dp-saveall:hover { background: var(--surface); } .dp-gallery-side { display: grid; grid-template-rows: 1fr 1fr; grid-template-columns: 1fr 1fr; grid-gap: 8px; gap: 8px; } .dp-thumb { position: relative; overflow: hidden; border-radius: var(--radius-lg); border: 0; padding: 0; cursor: pointer; transition: opacity .15s, outline-color .15s; outline: 3px solid transparent; } .dp-thumb img { width: 100%; height: 100%; object-fit: cover; } .dp-thumb:hover img { opacity: 0.92; } .dp-thumb.sel { outline-color: var(--accent); } .dp-titlerow { width: 100%; max-width: 1280px; margin: 28px auto 0; padding: 0 56px; display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; } .dp-title-left h1 { font-size: 48px; line-height: 1; } .dp-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; font-size: 14px; color: var(--ink-soft); } .dp-meta b { color: var(--ink); } .dp-meta > span { display: inline-flex; align-items: center; gap: 5px; } .dp-rating { font-weight: 500; } .dp-dot { color: var(--line); } .dp-title-right { display: flex; gap: 8px; } .dp-edit-mode-toggle { border-color: var(--line); white-space: nowrap; } .dp-edit-mode-toggle[data-on="true"] { background: var(--primary); border-color: var(--primary); color: #fff; } .dp-edit-mode-toggle[data-on="true"]:hover { background: var(--primary-deep); } .admin-inline-value { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1.5px dashed transparent; border-radius: 8px; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; line-height: inherit; margin: -2px -4px; max-width: 100%; padding: 2px 4px; text-align: left; display: inline-flex; align-items: baseline; gap: 8px; } .admin-inline-value:hover, .admin-inline-value:focus-visible { background: var(--surface); border-color: var(--accent); outline: 0; } .admin-inline-value[data-empty="true"] { color: var(--ink-soft); font-weight: 500; } .admin-inline-value svg, .admin-inline-card-button svg, .admin-inline-row-button svg:last-child, .admin-inline-contact-row svg:last-child { color: var(--accent); flex-shrink: 0; opacity: .55; } .admin-description-stack { display: grid; grid-gap: 18px; gap: 18px; } .admin-description-locale-tag { font: 600 11px/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; } .admin-description-locale-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .admin-description-locale-row .admin-description-locale-tag { margin-bottom: 0; } .admin-description-translate { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; border: 1px solid var(--line); border-radius: 999px; font: 500 11.5px/1 var(--sans); color: var(--ink-soft); padding: 5px 10px; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; transition: all .15s; } .admin-description-translate:hover:not(:disabled) { background: var(--bg-alt); color: var(--ink); border-color: var(--ink-soft); } .admin-description-translate:disabled { opacity: .5; cursor: default; } .admin-inline-form, .admin-inline-card-form, .admin-inline-row-form, .admin-inline-contact-form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); display: grid; grid-gap: 10px; gap: 10px; padding: 12px; } .admin-inline-form-heading { max-width: 760px; } .admin-inline-form-heading input { font-family: var(--display); font-size: 34px; font-weight: 600; line-height: 1.05; } .admin-inline-form input, .admin-inline-form textarea, .admin-inline-card-form input, .admin-inline-row-form input, .admin-inline-contact-form input { width: 100%; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); padding: 10px 12px; font: 500 14px/1.45 var(--sans); } .admin-inline-form textarea { min-height: 120px; resize: vertical; } .admin-inline-form input:focus, .admin-inline-form textarea:focus, .admin-inline-card-form input:focus, .admin-inline-row-form input:focus, .admin-inline-contact-form input:focus { outline: 2px solid rgba(232, 105, 58, .2); border-color: var(--accent); } .admin-inline-actions { display: flex; justify-content: flex-end; gap: 8px; } .admin-inline-actions[data-compact="true"] { justify-content: flex-start; } .admin-inline-error { color: #8d2e18; background: #fff4ed; border: 1px solid #f3c7b3; border-radius: 8px; padding: 8px 10px; font: 600 12px/1.35 var(--sans); } .admin-inline-card-button { width: 100%; border: 1.5px dashed transparent; border-radius: 10px; background: transparent; color: inherit; padding: 4px 28px 4px 4px; position: relative; text-align: left; } .admin-inline-card-button:hover, .admin-inline-card-button:focus-visible { border-color: var(--accent); outline: 0; } .admin-inline-card-button svg { position: absolute; right: 6px; top: 8px; } .admin-inline-card-form label { display: grid; grid-gap: 6px; gap: 6px; } .admin-inline-card-form label span { color: var(--ink-soft); font: 700 12px/1 var(--sans); } .admin-inline-row[data-empty="true"] > span { color: var(--ink-soft); } .admin-inline-row[data-editing="true"] { align-items: stretch; flex-direction: column; } .admin-inline-row-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1.5px dashed transparent; border-radius: 8px; background: transparent; color: var(--ink); padding: 4px 6px; font: 700 13px/1 var(--sans); display: inline-flex; align-items: center; gap: 5px; min-width: 0; } .admin-inline-row-button:hover, .admin-inline-row-button:focus-visible { background: var(--surface); border-color: var(--accent); outline: 0; } .admin-inline-row-button[data-empty="true"] { color: var(--ink-soft); font-weight: 600; } .admin-inline-row-form, .admin-inline-choice { width: 100%; } .admin-inline-choice { display: flex; flex-wrap: wrap; gap: 7px; } .admin-inline-choice button, .admin-inline-amenity-grid button { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); min-height: 34px; padding: 7px 11px; display: inline-flex; align-items: center; gap: 6px; font: 700 12px/1 var(--sans); } .admin-inline-choice button[data-on="true"], .admin-inline-amenity-grid button[data-on="true"] { background: var(--primary); border-color: var(--primary); color: #fff; } .admin-inline-choice .admin-inline-cancel { color: var(--ink-soft); border-style: dashed; } .admin-inline-amenities { display: grid; grid-gap: 12px; gap: 12px; } .admin-inline-amenity-grid { display: flex; flex-wrap: wrap; gap: 8px; } .admin-inline-amenity-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .admin-inline-contact { gap: 6px; } .admin-inline-contact-row { width: 100%; border: 1.5px dashed transparent; background: transparent; padding: 6px 4px; text-align: left; } .admin-inline-contact-row:hover, .admin-inline-contact-row:focus-visible { background: var(--bg-alt); border-color: var(--accent); outline: 0; } .admin-inline-contact-row[data-empty="true"] span { color: var(--ink-soft); } .admin-inline-contact-form { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 8px; } .admin-inline-contact-form .admin-inline-actions, .admin-inline-contact-form .admin-inline-error { grid-column: 2; } .admin-inline-contact-form svg { color: var(--ink-soft); } .admin-location-preview { position: relative; display: grid; grid-gap: 8px; gap: 8px; } .admin-location-preview .dp-mini-map { display: block; color: inherit; text-decoration: none; } .admin-location-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; position: absolute; top: 12px; right: 12px; z-index: 2; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.94); color: var(--ink); padding: 8px 12px; display: inline-flex; align-items: center; gap: 6px; font: 700 12px/1 var(--sans); box-shadow: 0 6px 18px rgba(0,0,0,.12); } .admin-location-button:hover, .admin-location-button:focus-visible { border-color: var(--accent); outline: 0; } .admin-location-coords { display: flex; flex-wrap: wrap; gap: 8px; } .admin-location-coords span { border: 1px solid var(--line); border-radius: 999px; background: var(--bg-alt); color: var(--ink-soft); padding: 5px 9px; font: 700 11px/1 var(--sans); } .admin-location-editor { display: grid; grid-gap: 12px; gap: 12px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); } .admin-location-search { position: relative; } .admin-location-search input { width: 100%; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); padding: 11px 82px 11px 12px; font: 500 14px/1.35 var(--sans); } .admin-location-search input:focus { outline: 2px solid rgba(232, 105, 58, .2); border-color: var(--accent); } .admin-location-search > span { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); color: var(--ink-soft); font: 700 12px/1 var(--sans); pointer-events: none; } .admin-location-search ul { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; margin: 0; padding: 0; list-style: none; max-height: 280px; overflow: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.08); } .admin-location-search button { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; border: 0; background: transparent; color: var(--ink); padding: 10px 12px; text-align: left; } .admin-location-search button:hover, .admin-location-search button:focus-visible { background: var(--bg-alt); outline: 0; } .admin-location-search b, .admin-location-search small { display: block; } .admin-location-search b { font: 700 13px/1.25 var(--sans); } .admin-location-search small { margin-top: 2px; color: var(--ink-soft); font: 500 12px/1.3 var(--sans); } .admin-location-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 10px; gap: 10px; } .admin-location-fields label { display: grid; grid-gap: 6px; gap: 6px; } .admin-location-fields span { color: var(--ink-soft); font: 700 12px/1 var(--sans); } .admin-location-fields input { width: 100%; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); padding: 10px 11px; font: 600 14px/1.2 var(--sans); } .admin-location-fields input:focus { outline: 2px solid rgba(232, 105, 58, .2); border-color: var(--accent); } .admin-inline-actions button:disabled, .admin-inline-choice button:disabled, .admin-inline-amenity-actions button:disabled { opacity: .55; cursor: not-allowed; } .admin-derived-address { min-height: 36px; } .admin-derived-address[data-empty="true"] span { color: var(--ink-soft); } .dp-tabs { width: 100%; max-width: 1280px; margin: 32px auto 0; padding: 0 56px; display: flex; gap: 4px; border-bottom: 1px solid var(--line); } /* Tabs render as on the server (linkable, deep-link-friendly) but could just as well be