/* Lawn Leads core: structure only, no brand look. Every page loads this first, then its look. A look themes the shared pieces by setting these variables on :root (or on its wrapper, which must be ): --ll-font-body, --ll-font-display fonts --ll-bg, --ll-ink, --ll-muted page colors --ll-surface, --ll-surface-ink dialog panel colors --ll-line dialog border (e.g. 2px solid #123) --ll-radius dialog corner radius --ll-shadow dialog shadow --ll-accent, --ll-accent-ink primary button fill and text --ll-good, --ll-warn area open / taken colors --ll-focus focus ring color --ll-backdrop dialog backdrop Buttons: .btn .btn-primary and .btn .btn-ghost exist in every look; this file only gives them a sane base. The look decides everything visual. */ :root { --ll-font-body: system-ui, -apple-system, "Segoe UI", sans-serif; --ll-font-display: var(--ll-font-body); --ll-bg: #fff; --ll-ink: #111; --ll-muted: #555; --ll-surface: #fff; --ll-surface-ink: #111; --ll-line: 2px solid #111; --ll-radius: 18px; --ll-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); --ll-accent: #ff5a1f; --ll-accent-ink: #111; --ll-good: #1f7a3a; --ll-warn: #b45309; --ll-focus: #ff5a1f; --ll-backdrop: rgba(10, 20, 12, 0.62); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; overflow-x: clip; } img, svg, video { max-width: 100%; } img { height: auto; } :focus-visible { outline: 3px solid var(--ll-focus); outline-offset: 3px; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 48px; padding: 0 1.4em; cursor: pointer; text-decoration: none; font: inherit; font-weight: 700; line-height: 1.1; white-space: nowrap; -webkit-tap-highlight-color: transparent; } /* ---------- reveal: hidden only when JS confirmed it can show them ---------- */ html.reveal-on .reveal:not(.in) { opacity: 0; transform: translateY(18px); } .reveal { transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } /* ---------- iOS ghost-tap guard for any closed mobile drawer ---------- */ @media (max-width: 1080px) { .nav-links:not(.open), .nav-links:not(.open) * { visibility: hidden !important; pointer-events: none !important; } } /* ---------- area form inline error ---------- */ .area-err { margin: 0.5em 0 0; font-size: 0.9rem; font-weight: 600; color: var(--ll-warn); } /* ---------- dialogs (booking, area check, lightbox) ---------- */ dialog.book-modal, dialog.area-modal, dialog.wall-lb { border: 0; padding: 0; margin: auto; background: transparent; color: var(--ll-surface-ink); max-width: none; max-height: none; overflow: visible; } dialog.book-modal::backdrop, dialog.area-modal::backdrop, dialog.wall-lb::backdrop { background: var(--ll-backdrop); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .book-panel { width: min(760px, calc(100vw - 24px)); height: min(820px, calc(100dvh - 24px)); display: flex; flex-direction: column; overflow: hidden; background: var(--ll-surface); border: var(--ll-line); border-radius: var(--ll-radius); box-shadow: var(--ll-shadow); font-family: var(--ll-font-body); } .book-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 12px 20px; border-bottom: var(--ll-line); font-family: var(--ll-font-display); font-size: 1.1rem; } .book-x, .area-x, .lb-x { width: 44px; height: 44px; border-radius: 999px; border: var(--ll-line); cursor: pointer; background: var(--ll-surface); color: var(--ll-surface-ink); font-size: 1.1rem; line-height: 1; display: grid; place-items: center; flex: none; } .book-frame { position: relative; flex: 1; background: #fff; } .book-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .book-status { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 24px; text-align: center; background: #fff; color: #333; z-index: 1; } .book-status[hidden] { display: none; } .book-status p { margin: 0; max-width: 34ch; } .book-spinner { width: 34px; height: 34px; border-radius: 50%; border: 4px solid #e5e5e5; border-top-color: var(--ll-accent); animation: ll-spin 0.9s linear infinite; } .book-status.slow .book-spinner { display: none; } .book-help { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 20px; padding: 10px 16px; border-top: var(--ll-line); font-size: 0.9rem; } .book-help button, .book-help a { background: none; border: 0; padding: 6px 0; cursor: pointer; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; } @keyframes ll-spin { to { transform: rotate(360deg); } } .area-panel { position: relative; width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; padding: 36px 28px 28px; background: var(--ll-surface); color: var(--ll-surface-ink); border: var(--ll-line); border-radius: var(--ll-radius); box-shadow: var(--ll-shadow); font-family: var(--ll-font-body); } .area-x { position: absolute; top: 12px; right: 12px; } .area-step[hidden] { display: none; } .area-panel h2 { margin: 0.2em 0 0.4em; padding-right: 40px; font-family: var(--ll-font-display); font-size: clamp(1.6rem, 5vw, 2.1rem); line-height: 1.1; } .area-panel h2:focus { outline: none; } .area-kicker { margin: 0; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; } .area-badge { display: inline-block; padding: 4px 10px; border-radius: 999px; opacity: 1; color: #fff; background: var(--ll-good); } .area-modal.is-taken .area-badge { background: var(--ll-warn); } .area-form-modal label { display: block; font-weight: 700; margin-bottom: 8px; } .area-row { display: flex; gap: 10px; flex-wrap: wrap; } .area-row input { flex: 1 1 160px; min-height: 52px; padding: 0 16px; font: inherit; font-size: 1.15rem; letter-spacing: 0.08em; border: var(--ll-line); border-radius: calc(var(--ll-radius) * 0.6); background: #fff; color: #111; } .area-row .btn { flex: 1 1 160px; } .area-body { margin: 0 0 20px; font-size: 1.05rem; line-height: 1.5; } .area-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; } .area-again { background: none; border: 0; padding: 8px 0; cursor: pointer; font: inherit; font-weight: 600; color: inherit; text-decoration: underline; text-underline-offset: 3px; } .area-again, .book-help button, .book-help a { min-height: 44px; display: inline-flex; align-items: center; } dialog.wall-lb { width: 100vw; height: 100dvh; display: none; place-items: center; } dialog.wall-lb[open] { display: grid; align-content: center; justify-items: center; gap: 14px; } dialog.wall-lb img { max-width: min(92vw, 720px); max-height: 86dvh; width: auto; border-radius: 12px; box-shadow: 0 30px 80px rgba(0,0,0,.5); } dialog.wall-lb:has(.lb-cap:not([hidden])) img { max-height: calc(86dvh - 60px); } dialog.wall-lb .lb-cap { max-width: min(92vw, 720px); text-align: center; } dialog.wall-lb .lb-x { position: fixed; top: 16px; right: 16px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; /* delays too: a staggered scene never waits half-drawn before it snaps to done */ animation-delay: 0s !important; transition-delay: 0s !important; } html.reveal-on .reveal:not(.in) { opacity: 1; transform: none; } }