:root { --sage: #2f6b4f; --sage-dark: #24553e; --sage-soft: #e8f2ec; --cream: #f7f4ef; --cream-dark: #efe9e0; --text: #1a1a1a; --muted: #5c6670; --cta: #e85d04; --cta-dark: #c44d03; --white: #ffffff; --border: #d8e0d9; --shadow: 0 1px 2px rgba(26, 26, 26, 0.06), 0 8px 24px rgba(47, 107, 79, 0.08); --radius: 14px; --radius-sm: 10px; --font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --focus: 0 0 0 3px rgba(232, 93, 4, 0.45); --header-approx: 7.5rem; --map-mobile-h: 35vh; --select-ring: 0 0 0 2px var(--sage), 0 0 0 5px rgba(47, 107, 79, 0.22); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; height: 100%; } body { margin: 0; min-height: 100%; font-family: var(--font); font-size: 1rem; line-height: 1.55; color: var(--text); background: var(--cream); -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; } img { max-width: 100%; display: block; } a { color: var(--sage); text-decoration-thickness: 1.5px; text-underline-offset: 2px; } a:hover { color: var(--sage-dark); } :focus-visible { outline: none; box-shadow: var(--focus); border-radius: 4px; } .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; } .skip-link { position: absolute; left: 1rem; top: -100px; z-index: 1000; background: var(--cta); color: var(--white); padding: 0.65rem 1rem; border-radius: 8px; font-weight: 600; text-decoration: none; } .skip-link:focus { top: 1rem; color: var(--white); box-shadow: var(--focus); } .site-header { position: sticky; top: 0; z-index: 100; background: rgba(247, 244, 239, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); flex-shrink: 0; } .header-inner { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "brand actions" "search search"; gap: 0.75rem 1rem; align-items: center; padding: 0.85rem 1rem 0.5rem; } .wordmark { grid-area: brand; display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; color: var(--text); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; } .wordmark:hover { color: var(--text); } .wordmark-mark { width: 1.65rem; height: 1.65rem; border-radius: 8px; background: linear-gradient(145deg, var(--sage) 0%, #3d8a64 100%); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.15); position: relative; } .wordmark-mark::after { content: ""; position: absolute; inset: 28% 30% 32% 30%; border-radius: 50% 50% 45% 45%; background: rgba(255, 255, 255, 0.9); } .wordmark-tld { color: var(--sage); font-weight: 600; } .search-form { grid-area: search; display: flex; align-items: stretch; background: var(--white); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; min-width: 0; } .search-form:focus-within { box-shadow: var(--focus); border-color: transparent; } .search-form input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0.7rem 1rem; font: inherit; color: var(--text); } .search-form input::placeholder { color: var(--muted); } .search-form input:focus { outline: none; box-shadow: none; } .header-actions { grid-area: actions; display: flex; align-items: center; gap: 0.4rem; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; font: inherit; font-weight: 600; font-size: 0.9rem; line-height: 1; border-radius: 999px; border: 1px solid transparent; cursor: pointer; text-decoration: none; padding: 0.55rem 0.85rem; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .btn-icon { padding: 0.65rem 0.9rem; background: transparent; color: var(--sage); border: 0; border-radius: 0; } .btn-icon:hover { color: var(--sage-dark); background: var(--sage-soft); } .btn-ghost { background: transparent; color: var(--muted); border-color: transparent; } .btn-ghost:hover { color: var(--sage); background: var(--sage-soft); } .btn-primary { background: var(--cta); color: var(--white); border-color: var(--cta); } .btn-primary:hover { background: var(--cta-dark); color: var(--white); border-color: var(--cta-dark); } .btn-primary:focus-visible { box-shadow: var(--focus); } .header-add .btn-label { display: none; } .btn-ghost .btn-label { display: none; } .filters { display: flex; gap: 0.45rem; padding: 0 1rem 0.85rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .filters::-webkit-scrollbar { display: none; } .chip { flex: 0 0 auto; font: inherit; font-size: 0.875rem; font-weight: 550; padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid var(--border); background: var(--white); color: var(--muted); cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .chip:hover { border-color: var(--sage); color: var(--sage); } .chip.is-active { background: var(--sage); border-color: var(--sage); color: var(--white); } .chip:focus-visible { box-shadow: var(--focus); } .site-main { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; padding: 0; } .split-layout { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .map-panel { flex: 0 0 auto; height: var(--map-mobile-h); min-height: 180px; max-height: 42vh; position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--border); } .map-placeholder { position: relative; width: 100%; height: 100%; overflow: hidden; background: #dce8e1; } .map-grid { position: absolute; inset: -20%; background: linear-gradient(rgba(47, 107, 79, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(47, 107, 79, 0.06) 1px, transparent 1px), linear-gradient(160deg, #d5e6dc, #e8f2ec 45%, #c9d9cf); background-size: 32px 32px, 32px 32px, auto; } .map-pan { position: absolute; inset: 0; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } .map-pins { position: absolute; inset: 0; } .pin { position: absolute; width: 36px; height: 36px; margin: -30px 0 0 -18px; padding: 0; border: 0; background: transparent; cursor: pointer; z-index: 2; transition: transform 0.2s ease; } .pin:focus-visible { outline: none; box-shadow: none; } .pin-dot { display: block; width: 16px; height: 16px; margin: 8px auto 0; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--sage); box-shadow: 0 2px 6px rgba(26, 26, 26, 0.28); border: 2px solid var(--white); transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .pin-label { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%) translateY(2px); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.02em; color: var(--sage-dark); background: rgba(255, 255, 255, 0.92); border: 1px solid var(--border); border-radius: 4px; padding: 0.1rem 0.3rem; opacity: 0; pointer-events: none; white-space: nowrap; transition: opacity 0.15s ease; } .pin:hover .pin-label, .pin.is-hovered .pin-label, .pin.is-selected .pin-label, .pin:focus-visible .pin-label { opacity: 1; } .pin:hover .pin-dot, .pin.is-hovered .pin-dot { background: var(--cta); transform: rotate(-45deg) scale(1.15); } .pin.is-selected { z-index: 5; } .pin.is-selected .pin-dot { background: var(--cta); transform: rotate(-45deg) scale(1.35); box-shadow: 0 3px 10px rgba(232, 93, 4, 0.45), 0 0 0 4px rgba(232, 93, 4, 0.2); } .pin:focus-visible .pin-dot { box-shadow: var(--focus), 0 2px 6px rgba(26, 26, 26, 0.28); } .map-badge { position: absolute; left: 0.75rem; top: 0.75rem; margin: 0; padding: 0.35rem 0.65rem; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px); border-radius: 999px; border: 1px solid var(--border); color: var(--muted); font-size: 0.75rem; line-height: 1.2; z-index: 3; pointer-events: none; } .map-badge strong { color: var(--text); font-weight: 650; } .list-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: var(--cream); } .list-header { padding: 0.85rem 1rem 0.35rem; flex-shrink: 0; } .results-meta { margin: 0; color: var(--muted); font-size: 0.9rem; } .card-list { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.5rem 1rem 6rem; } .place-card { display: grid; grid-template-columns: 88px 1fr; gap: 0.85rem; background: var(--sage-soft); border: 1px solid rgba(47, 107, 79, 0.12); border-radius: var(--radius); padding: 0.85rem; box-shadow: var(--shadow); transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease; cursor: pointer; scroll-margin: 1rem; } .place-card:hover, .place-card.is-hovered { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(26, 26, 26, 0.06), 0 12px 28px rgba(47, 107, 79, 0.12); border-color: rgba(47, 107, 79, 0.35); } .place-card.is-selected { border-color: var(--sage); background: #dff0e6; box-shadow: var(--select-ring), var(--shadow); } .place-card:focus-visible { box-shadow: var(--focus); } .card-media { display: block; text-decoration: none; border-radius: var(--radius-sm); overflow: hidden; align-self: start; } .card-media:focus-visible { box-shadow: var(--focus); } .media-placeholder { display: block; aspect-ratio: 1; width: 100%; background: linear-gradient(145deg, rgba(47, 107, 79, 0.18), rgba(47, 107, 79, 0.05)), repeating-linear-gradient( -45deg, transparent, transparent 6px, rgba(47, 107, 79, 0.06) 6px, rgba(47, 107, 79, 0.06) 7px ); border-radius: var(--radius-sm); position: relative; } .media-placeholder::after { content: attr(data-label); position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.04em; color: var(--sage); opacity: 0.85; } .card-body { min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; } .card-title { margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; } .card-title a { color: var(--sage); text-decoration: none; } .card-title a:hover { text-decoration: underline; color: var(--sage-dark); } .card-meta { margin: 0; font-size: 0.8rem; font-weight: 550; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; } .card-text { margin: 0.15rem 0 0.35rem; font-size: 0.925rem; color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .card-links { margin: auto 0 0; font-size: 0.9rem; font-weight: 600; } .card-links a { text-decoration: none; } .card-links a:hover { text-decoration: underline; } .card-links .sep { margin: 0 0.45rem; color: var(--border); font-weight: 400; } .fab { position: fixed; right: 1rem; bottom: 1.25rem; z-index: 90; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.9rem 1.15rem; border-radius: 999px; background: var(--cta); color: var(--white); font-weight: 700; text-decoration: none; box-shadow: 0 4px 16px rgba(232, 93, 4, 0.4); } .fab:hover { background: var(--cta-dark); color: var(--white); } .fab:focus-visible { box-shadow: var(--focus), 0 4px 16px rgba(232, 93, 4, 0.4); } .fab-label { font-size: 0.95rem; } .site-footer { background: var(--sage-dark); color: rgba(255, 255, 255, 0.88); padding: 2.5rem 1rem 3rem; flex-shrink: 0; } .footer-inner { max-width: 1120px; margin: 0 auto; display: grid; gap: 1.25rem; } .footer-brand strong { display: block; font-size: 1.15rem; color: var(--white); margin-bottom: 0.35rem; } .footer-brand p { margin: 0; max-width: 36ch; color: rgba(255, 255, 255, 0.75); font-size: 0.95rem; } .footer-links { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; } .footer-links a { color: var(--white); font-weight: 600; text-decoration: none; } .footer-links a:hover { text-decoration: underline; color: #ffe8d6; } .footer-note { margin: 0.5rem 0 0; font-size: 0.8rem; color: rgba(255, 255, 255, 0.55); } @media (min-width: 640px) { .header-inner { grid-template-columns: auto 1fr auto; grid-template-areas: "brand search actions"; padding: 0.9rem 1.25rem 0.55rem; } .filters { padding-left: 1.25rem; padding-right: 1.25rem; } .header-add .btn-label, .btn-ghost .btn-label { display: inline; } .place-card { grid-template-columns: 110px 1fr; padding: 1rem; gap: 1rem; } .card-list { padding-left: 1.25rem; padding-right: 1.25rem; } .list-header { padding-left: 1.25rem; padding-right: 1.25rem; } } @media (min-width: 900px) { body { height: 100vh; overflow: hidden; } .site-main { flex: 1 1 auto; min-height: 0; overflow: hidden; } .split-layout { flex-direction: row; height: 100%; min-height: 0; } .map-panel { flex: 0 0 48%; width: 48%; height: auto; max-height: none; min-height: 0; position: relative; top: auto; border-bottom: 0; border-right: 1px solid var(--border); align-self: stretch; } .map-placeholder { height: 100%; } .list-panel { flex: 1 1 52%; width: 52%; overflow-y: auto; -webkit-overflow-scrolling: touch; } .list-header { position: sticky; top: 0; z-index: 5; background: rgba(247, 244, 239, 0.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 1rem 1.25rem 0.65rem; border-bottom: 1px solid transparent; } .card-list { padding: 0.75rem 1.25rem 2rem; gap: 0.85rem; } .fab { display: none; } .site-footer { display: none; } .header-inner, .filters { padding-left: 1.5rem; padding-right: 1.5rem; } .pin { width: 40px; height: 40px; margin: -34px 0 0 -20px; } .pin-dot { width: 18px; height: 18px; } } @media (min-width: 1200px) { .map-panel { flex: 0 0 46%; width: 46%; } .list-panel { flex: 1 1 54%; width: 54%; } .card-list { padding-left: 1.5rem; padding-right: 1.5rem; } .list-header { padding-left: 1.5rem; padding-right: 1.5rem; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .place-card, .btn, .chip, .pin, .pin-dot, .map-pan { transition: none; } .place-card:hover, .place-card.is-hovered { transform: none; } } .legal-page{max-width:48rem;margin:0 auto;padding:1.5rem 1rem 3rem} .legal-card{background:#fff;border-radius:12px;padding:1.25rem 1.35rem;box-shadow:0 1px 3px rgba(0,0,0,.06);margin:1rem 0} .legal-card h1{font-size:1.6rem;margin:0 0 .75rem;color:#2f6b4f} .legal-card h2{font-size:1.15rem;margin:1.25rem 0 .5rem;color:#2f6b4f} .legal-card p,.legal-card li{line-height:1.55} .legal-meta{color:#5c6670;font-size:.95rem}