@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Marcellus&display=swap'); /* ========================================================================== sbdowntown.com — shared styles Phase 1 skeleton. Colors live in CSS variables so the phase-2 weather theme engine only needs to swap a class on — no rebuild required. ========================================================================== */ /* ---- Theme variables (default: sunny day) -------------------------------- */ :root { --bg: #faf6ef; /* page background */ --surface: #ffffff; /* cards, panels */ --ink: #23292e; /* main text */ --ink-soft: #5c666e; /* secondary text */ --accent: #d95f2b; /* terracotta — links, buttons */ --accent-2: #1b7f8e; /* ocean teal — highlights */ --band: #14343f; /* header/footer background */ --band-ink: #f3ede2; /* text on header/footer */ --line: #e5ddd0; /* borders */ } /* ========================================================================== Phase 2 theme engine — js/theme.js sets two classes on : a TIME class (time-morning / time-afternoon / time-evening / time-night) and a CONDITION class (cond-clear / cond-overcast / cond-fog / cond-rain / cond-wind). Time sets the full palette; condition adjusts it on top. ========================================================================== */ /* ---- Time of day (Santa Barbara moods) ---- */ /* Morning: marine layer just burning off — soft, cool, gentle */ body.time-morning { --bg: #f1f1ec; --surface: #fbfbf8; --ink: #2b3238; --ink-soft: #64707a; --accent: #c96f3b; --accent-2: #5e8ca0; --band: #3d5a66; --band-ink: #f1f1ec; --line: #dfe0d8; } /* Afternoon: full sun on white stucco and red tile (default palette) */ body.time-afternoon { --bg: #faf6ef; --surface: #ffffff; --ink: #23292e; --ink-soft: #5c666e; --accent: #d95f2b; --accent-2: #1b7f8e; --band: #14343f; --band-ink: #f3ede2; --line: #e5ddd0; } /* Evening: sunset over the harbor — warm peach and dusk plum */ body.time-evening { --bg: #f8ead9; --surface: #fff5e9; --ink: #3a2a33; --ink-soft: #7c6470; --accent: #e0562e; --accent-2: #8a4d76; --band: #4b2545; --band-ink: #f8ead9; --line: #ecd9c2; } /* Night: deep marine dark with warm streetlight accents */ body.time-night { --bg: #131a24; --surface: #1d2634; --ink: #e8edf4; --ink-soft: #9aa7b6; --accent: #f0a35e; --accent-2: #6db3c9; --band: #0b1017; --band-ink: #e8edf4; --line: #2c3744; } /* ---- Weather conditions (layered on top of time) ---- */ /* Fog: everything goes gray-blue and quiet */ body.cond-fog { --accent: #5d7f8d; --accent-2: #8a9aa5; } body.time-morning.cond-fog, body.time-afternoon.cond-fog { --bg: #e9ebec; --surface: #f6f7f7; --band: #46545c; --line: #d7dcdf; } /* Rain: cooler, bluer */ body.cond-rain { --accent: #2f6fa8; --accent-2: #48918a; } body.time-morning.cond-rain, body.time-afternoon.cond-rain { --bg: #e8edf2; --surface: #f6f9fb; --band: #1f3345; --line: #d3dbe3; } /* Wind: crisp, kicked-up ocean teal */ body.cond-wind { --accent: #0e8a99; --accent-2: #d95f2b; } /* Overcast: muted, softer contrast */ body.cond-overcast { --accent: #a05a35; --accent-2: #55808e; } body.time-morning.cond-overcast, body.time-afternoon.cond-overcast { --bg: #efede8; --surface: #f9f8f5; --band: #3a4a52; } /* Back-to-top button — floats bottom-right, fades in after scrolling */ .to-top { position: fixed; right: 1.1rem; bottom: 1.1rem; width: 46px; height: 46px; border: none; border-radius: 50%; background: var(--accent); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.28); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease, background 0.6s ease; z-index: 1000; } .to-top.show { opacity: 0.92; transform: translateY(0); pointer-events: auto; } .to-top:hover { opacity: 1; } /* Atmosphere canvas — rain/fog/clouds/leaves/stars drawn over the page */ #fx-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; /* never blocks clicks */ z-index: 999; } /* Santa Barbara skyline band under the header (mountains, mission, palms) */ .skyline { line-height: 0; background: var(--bg); transition: background 0.6s ease; } .skyline svg { display: block; width: 100%; height: 56px; fill: var(--band); opacity: 0.85; transition: fill 0.6s ease; } /* Header weather chip */ .wx-chip { font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.8rem; color: var(--band-ink); opacity: 0.85; border: 1px solid currentColor; border-radius: 999px; padding: 0.15rem 0.7rem; white-space: nowrap; } /* ---- Base ---------------------------------------------------------------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: Georgia, 'Times New Roman', serif; background: var(--bg); color: var(--ink); line-height: 1.6; transition: background 0.6s ease, color 0.6s ease; } /* Mission-style serif for headlines — Marcellus has that Spanish Revival feel */ h1, h2, h3 { font-family: 'Marcellus', Georgia, serif; letter-spacing: 0.015em; font-weight: 400; } .nav, .btn, .tag, .ad-label { font-family: 'Helvetica Neue', Arial, sans-serif; } a { color: var(--accent); } img { max-width: 100%; height: auto; } .wrap { max-width: 1100px; margin: 0 auto; padding: 0 1rem; } /* ---- Header & nav -------------------------------------------------------- */ .site-header { background: var(--band); color: var(--band-ink); padding: 1rem 0; } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; } .brand { color: var(--band-ink); text-decoration: none; font-family: 'Marcellus', Georgia, serif; font-size: 1.5rem; letter-spacing: 0.03em; } .brand span { color: var(--accent); } .tagline { width: 100%; margin: 0; font-size: 0.85rem; opacity: 0.75; font-style: italic; } .nav-toggle { display: none; background: none; border: 1px solid var(--band-ink); color: var(--band-ink); font-size: 1.1rem; padding: 0.3rem 0.7rem; border-radius: 6px; cursor: pointer; } .nav ul { list-style: none; display: flex; gap: 1.25rem; margin: 0; padding: 0; flex-wrap: wrap; } .nav a { color: var(--band-ink); text-decoration: none; font-size: 0.95rem; padding-bottom: 2px; border-bottom: 2px solid transparent; } .nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--accent); } /* ---- Ad slots ------------------------------------------------------------ */ .ad-slot { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; text-align: center; padding: 0.5rem 0.5rem 0.6rem; margin: 1.25rem 0; } .ad-label { display: block; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft); margin-bottom: 0.35rem; } .ad-slot a { text-decoration: none; color: var(--ink); display: block; } .ad-banner { margin-top: 0; } /* ---- Branded ads (styled after each advertiser's own site) ---------------- */ .ad-brand { border-radius: 10px; padding: 1.1rem 1.2rem; text-align: center; overflow: hidden; position: relative; transition: transform 0.15s ease; } .ad-slot a:hover .ad-brand { transform: scale(1.015); } .ad-brand strong { display: block; } .ad-brand em { display: block; } .ad-brand small { display: block; margin-top: 0.4rem; font-size: 0.72rem; opacity: 0.75; } /* Grayphics — ink-black print house, elegant serif, CMYK registration dots */ .ad-gx { background: #121216; color: #f2efe8; font-family: Georgia, 'Times New Roman', serif; } .ad-gx .gx-dots { display: block; margin-bottom: 0.4rem; } .ad-gx .gx-dots i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin: 0 3px; } .ad-gx .gx-dots i:nth-child(1) { background: #00b6e3; } /* cyan */ .ad-gx .gx-dots i:nth-child(2) { background: #e5007d; } /* magenta */ .ad-gx .gx-dots i:nth-child(3) { background: #ffd400; } /* yellow */ .ad-gx .gx-dots i:nth-child(4) { background: #555; border: 1px solid #777; } /* key */ .ad-gx strong { font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 1.05rem; letter-spacing: 0.35em; font-weight: 700; } .ad-gx em { font-style: italic; font-size: 1.05rem; margin-top: 0.15rem; } .ad-gx em span { color: #ffd400; } .ad-gx small { color: #b9b4a8; font-family: 'Helvetica Neue', Arial, sans-serif; } /* BigAutoWrap — dark studio charcoal with a vinyl color-shift stripe */ .ad-baw { background: #1a1d21; color: #f4f6f8; font-family: 'Helvetica Neue', Arial, sans-serif; } .ad-baw .baw-stripe { position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, #ff2d55, #ff9500, #ffcc00, #34c759, #00c7be, #007aff, #af52de); } .ad-baw strong { font-size: 1.2rem; font-weight: 800; letter-spacing: 0.01em; } .ad-baw strong i { font-style: italic; color: #ff9500; } .ad-baw em { font-size: 0.92rem; margin-top: 0.15rem; color: #c9ced4; } .ad-baw small { color: #8b939c; } /* SB Stickers — playful die-cut sticker chip on kraft-paper cream */ .ad-sbs { background: #f6efe2; color: #2b2b2b; font-family: 'Helvetica Neue', Arial, sans-serif; } .ad-sbs .sbs-chip { display: inline-block; background: #fff; border: 2px dashed #c9bda6; border-radius: 999px; padding: 0.3rem 1rem; font-weight: 800; font-size: 1.05rem; letter-spacing: 0.02em; transform: rotate(-2deg); box-shadow: 0 2px 6px rgba(0,0,0,0.12); } .ad-sbs .sbs-chip b { color: #d95f2b; } .ad-sbs em { font-size: 0.95rem; margin-top: 0.45rem; font-style: italic; } .ad-sbs small { color: #7a715f; } /* ---- Layout -------------------------------------------------------------- */ .page-grid { display: grid; grid-template-columns: 1fr 300px; gap: 2rem; padding: 1.5rem 0 3rem; } .hero { padding: 2.5rem 0 1rem; } .hero h1 { font-size: 2.2rem; margin: 0 0 0.5rem; } .hero p { font-size: 1.1rem; color: var(--ink-soft); max-width: 46rem; } .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; margin: 1.5rem 0; } .card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 1.1rem 1.2rem; } .card h3 { margin-top: 0; } .card .src { font-size: 0.8rem; color: var(--ink-soft); } .tag { display: inline-block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; background: var(--accent-2); color: #fff; border-radius: 999px; padding: 0.15rem 0.6rem; margin-bottom: 0.5rem; } .btn { display: inline-block; background: var(--accent); color: #fff; text-decoration: none; padding: 0.6rem 1.2rem; border-radius: 8px; font-weight: 600; } .btn:hover { opacity: 0.9; } .placeholder-note { font-size: 0.85rem; color: var(--ink-soft); font-style: italic; } /* ---- Events calendar ------------------------------------------------------ */ .filters { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.75rem 0 1.25rem; } .filters button { font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.85rem; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 0.35rem 1rem; cursor: pointer; } .filters button.active { background: var(--accent); border-color: var(--accent); color: #fff; } /* Floating Food <-> Nightlife side switcher (rides the right edge) */ .side-switch { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 60; display: flex; flex-direction: column; gap: 2px; background: var(--band); border-radius: 12px 0 0 12px; padding: 4px; box-shadow: -2px 2px 10px rgba(0,0,0,0.18); } .side-switch a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0.55rem 0.5rem; width: 3.4rem; border-radius: 9px; text-decoration: none; color: var(--band-ink); font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; opacity: 0.75; transition: opacity 0.15s ease, background 0.15s ease; } .side-switch a .ss-icon { font-size: 1.3rem; line-height: 1; } .side-switch a:hover { opacity: 1; } .side-switch a[aria-current="page"] { background: var(--accent); color: #fff; opacity: 1; } @media (max-width: 640px) { .side-switch a { width: 2.9rem; padding: 0.45rem 0.35rem; font-size: 0.6rem; } .side-switch a .ss-icon { font-size: 1.1rem; } } /* Fun "did you know" stat callout in the hero */ .stat-note { display: flex; align-items: center; gap: 0.65rem; background: var(--surface); border-left: 4px solid var(--accent); border-radius: 6px; padding: 0.6rem 0.9rem; margin-top: 0.9rem; font-size: 0.95rem; color: var(--ink-soft); font-style: italic; } .stat-note .stat-num { font-style: normal; font-weight: 800; font-size: 1.4rem; line-height: 1; color: var(--accent); flex: 0 0 auto; } .stat-src { font-style: normal; font-size: 0.78rem; color: var(--ink-soft); text-decoration: underline; white-space: nowrap; } /* Availability row sits just above the cuisine row, tightened together */ .filters-avail { margin-bottom: 0.4rem; } /* "Can't Decide?" dice picker */ .decide-bar { margin: 0.25rem 0 1rem; } .decide-btn { font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.95rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.5rem; background: var(--accent); color: #fff; border: none; border-radius: 999px; padding: 0.5rem 1.2rem; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.12); transition: transform 0.08s ease, filter 0.15s ease; } .decide-btn:hover { filter: brightness(1.06); } .decide-btn:active { transform: translateY(1px); } .decide-btn .dice { font-size: 1.2rem; display: inline-block; } .decide-btn.spinning .dice { animation: dice-tumble 0.5s linear infinite; } @keyframes dice-tumble { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.25); } 100% { transform: rotate(360deg) scale(1); } } .decide-result { display: none; margin-top: 0.9rem; } .decide-result.show { display: block; } .decide-msg { display: block; font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 0.35rem; } .decide-flash { display: block; font-size: 1.3rem; font-weight: 700; color: var(--accent); min-height: 1.6em; } .decide-result.landed .decide-card { border: 2px solid var(--accent); animation: decide-pop 0.35s ease; } @keyframes decide-pop { 0% { transform: scale(0.96); opacity: 0.4; } 60% { transform: scale(1.02); } 100% { transform: scale(1); opacity: 1; } } .decide-again { font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.85rem; background: var(--surface); color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 0.35rem 1rem; cursor: pointer; margin-top: 0.5rem; } .decide-again:hover { background: var(--accent); color: #fff; } .event-day { font-size: 1.15rem; border-bottom: 2px solid var(--accent); padding-bottom: 0.25rem; margin: 1.75rem 0 0.75rem; } .event { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 0.9rem 1.1rem; margin-bottom: 0.75rem; } .event h3 { margin: 0.25rem 0 0.2rem; font-size: 1.05rem; } .event p { margin: 0.2rem 0; } .event-meta { color: var(--ink-soft); font-size: 0.9rem; } .event-compact { padding: 0.6rem 0.9rem; } .event-compact h3 { font-size: 0.98rem; display: inline; } .event-compact .tag { float: right; } .tag-food { background: var(--accent); } .tag-nightlife { background: #6b4d8a; } .tag-culture { background: var(--accent-2); } /* Sidebar cards get the same breathing room as ad slots (1.25rem) */ aside .card { margin: 1.25rem 0; } /* Sticky sidebar: ads, calendar, and submit-event card follow the reader once the top of the page scrolls away (desktop two-column layout only). Caps at viewport height and scrolls internally if the column is tall. */ @media (min-width: 801px) { .page-grid > aside { position: sticky; top: 1rem; align-self: start; max-height: calc(100vh - 2rem); overflow-y: auto; } } /* ---- Mini month calendar (sidebar) ---------------------------------------- */ .mini-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.9rem; } .mini-cal-nav { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; color: var(--ink); font-size: 1rem; line-height: 1; padding: 0.15rem 0.55rem; cursor: pointer; } .mini-cal-nav:hover { border-color: var(--accent); color: var(--accent); } .mini-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.8rem; } .mini-cal-dow { color: var(--ink-soft); font-size: 0.68rem; padding: 0.2rem 0; } .mini-cal-day { padding: 0.3rem 0; border-radius: 6px; color: var(--ink-soft); } button.mini-cal-day.has-events { background: var(--accent); color: #fff; border: none; cursor: pointer; font-weight: 600; } button.mini-cal-day.has-events:hover { opacity: 0.85; } .mini-cal-today { outline: 2px solid var(--accent-2); outline-offset: -2px; } /* ---- Search box + found-result glow --------------------------------------- */ .search-box { font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.95rem; width: 100%; max-width: 340px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 0.5rem 1.1rem; margin: 0.75rem 0 0.25rem; outline: none; } .search-box:focus { border-color: var(--accent); } .search-box::placeholder { color: var(--ink-soft); } @keyframes found-glow { 0% { box-shadow: 0 0 0 3px var(--accent), 0 0 18px 4px var(--accent); background-color: rgba(217, 95, 43, 0.16); } 70% { box-shadow: 0 0 0 3px var(--accent), 0 0 18px 4px var(--accent); background-color: rgba(217, 95, 43, 0.16); } 100% { box-shadow: none; background-color: transparent; } } .found { animation: found-glow 3s ease-out; } tr.found td { animation: found-glow 3s ease-out; } /* ---- Dolphin ratings (blended Yelp + Google) ------------------------------ */ .rating { display: flex; align-items: center; gap: 0.5rem; margin: 0.15rem 0 0.1rem; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.85rem; } .dolphins { position: relative; display: inline-block; white-space: nowrap; line-height: 1; font-size: 1rem; } .dolphins-bg { opacity: 0.25; filter: grayscale(1); } .dolphins-fill { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; } .rating-num { font-weight: 700; color: var(--accent-2); } .rating-count { color: var(--ink-soft); font-size: 0.78rem; } /* ---- Food section: open/closed status badges ------------------------------ */ .status { float: right; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; border-radius: 999px; padding: 0.2rem 0.7rem; margin-left: 0.5rem; } .status-open { background: #2e7d4f; color: #fff; } .status-closing { background: #c77c1b; color: #fff; } .status-closed { background: var(--line); color: var(--ink-soft); } .status-opening { background: var(--accent-2); color: #fff; } .status-closed-today { background: #8a3232; color: #fff; } .status-happy { background: #b5327d; color: #fff; } .tag-pet { background: #5a7d3a; color: #fff; } .food-row h3 { display: inline; margin-right: 0.5rem; } /* Name on the left, dolphin rating right-aligned on the same line */ .food-row .row-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; clear: both; } .food-row .row-head h3 { margin: 0; } .food-row .row-head .rating { margin: 0; flex: 0 0 auto; } /* Give status pills (float right) and tag pills (inline) the SAME box metrics so their heights match — that was the only real problem. */ .food-row .status, .food-row .tag { display: inline-flex; align-items: center; box-sizing: border-box; min-height: 1.4rem; padding: 0.2rem 0.7rem; font-size: 0.7rem; line-height: 1; vertical-align: middle; } .food-row .status { float: right; margin: 0 0 0.4rem 0.5rem; } .food-row .tag { float: none; margin: 0 0.4rem 0.4rem 0; } /* ---- Directory table ----------------------------------------------------- */ .dir-table { width: 100%; border-collapse: collapse; background: var(--surface); } .dir-table th, .dir-table td { text-align: left; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--line); font-size: 0.95rem; } .dir-table th { font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); } /* ---- Footer -------------------------------------------------------------- */ .site-footer { background: var(--band); color: var(--band-ink); padding: 2rem 0; margin-top: 2rem; font-size: 0.9rem; } .site-footer a { color: var(--band-ink); } .site-footer .cols { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; } .site-footer ul { list-style: none; padding: 0; margin: 0.5rem 0 0; } /* ---- Mobile -------------------------------------------------------------- */ @media (max-width: 800px) { .page-grid { grid-template-columns: 1fr; } .nav-toggle { display: block; } .nav { display: none; width: 100%; } .nav.open { display: block; } .nav ul { flex-direction: column; gap: 0.6rem; padding-top: 0.5rem; } .hero h1 { font-size: 1.7rem; } } /* ========================================================================== SOL direction — a modern Santa Barbara field guide Editorial typography, tile-and-ocean color, richer depth, and a compact touch-first discovery experience. Existing weather palettes still drive the page; these rules give the system a more expressive visual language. ========================================================================== */ :root { --coral: #ec6b4f; --teal: #087d83; --navy: #12323b; --sand: #f4e8d5; --sun: #f2bd5b; --paper: rgba(255,255,255,0.82); --shadow-sm: 0 8px 28px rgba(25, 43, 48, 0.08); --shadow-lg: 0 28px 80px rgba(25, 43, 48, 0.16); --radius-sm: 12px; --radius: 20px; --radius-lg: 32px; } * { -webkit-tap-highlight-color: transparent; } body { font-family: "Manrope", "Helvetica Neue", Arial, sans-serif; font-size: 15px; line-height: 1.65; background-image: radial-gradient(circle at 8% 8%, color-mix(in srgb, var(--accent) 8%, transparent) 0 1px, transparent 2px), linear-gradient(180deg, color-mix(in srgb, var(--surface) 35%, transparent), transparent 34rem); background-size: 22px 22px, auto; overflow-x: hidden; } h1, h2, h3 { font-family: "Marcellus", Georgia, serif; letter-spacing: -0.025em; } h2 { font-size: clamp(1.5rem, 3vw, 2rem); } a { text-underline-offset: 3px; text-decoration-thickness: 1px; } a, button { transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease; } button, input { font: inherit; } button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 48%, transparent); outline-offset: 3px; } .wrap { max-width: 1240px; padding-inline: clamp(1rem, 3vw, 2rem); } /* Masthead */ .site-header { position: relative; z-index: 100; padding: .8rem 0; background: linear-gradient(110deg, color-mix(in srgb, var(--band) 91%, #000), var(--band)); box-shadow: 0 10px 35px rgba(5, 25, 32, .14); } .site-header::before { content: ""; position: absolute; inset: auto 0 0; height: 4px; background: linear-gradient(90deg, var(--accent), var(--sun), var(--accent-2), var(--accent)); } .site-header .wrap { gap: 1.1rem; flex-wrap: nowrap; } .brand { display: inline-flex; align-items: center; gap: .75rem; min-width: 238px; } .brand-seal { position: relative; display: grid; place-items: center; width: 43px; height: 43px; flex: 0 0 auto; border-radius: 50% 50% 46% 46%; background: var(--accent); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), 0 4px 12px rgba(0,0,0,.18); overflow: hidden; } .brand-seal::before { content: ""; width: 21px; height: 23px; border: 3px solid #fff; border-bottom: 0; border-radius: 14px 14px 0 0; transform: translateY(5px); } .brand-seal::after { content: ""; position: absolute; width: 5px; height: 16px; bottom: 0; left: 19px; background: #fff; box-shadow: -12px 0 #fff, 12px 0 #fff; } .brand-copy { display: flex; flex-direction: column; line-height: 1; } .brand-copy strong { color: var(--band-ink); font-family: "Marcellus", Georgia, serif; font-size: 1.22rem; font-weight: 400; letter-spacing: -.02em; white-space: nowrap; } .brand-copy strong b { color: var(--accent); font-weight: 400; } .brand-copy small { margin-top: .35rem; color: var(--band-ink); opacity: .55; font-size: .58rem; text-transform: uppercase; letter-spacing: .16em; } .site-header .tagline { display: none; } .nav { margin-left: auto; } .nav ul { gap: .25rem; flex-wrap: nowrap; } .nav a { display: block; padding: .55rem .72rem; border: 0; border-radius: 999px; font-size: .78rem; font-weight: 700; letter-spacing: .015em; white-space: nowrap; } .nav a:hover { background: rgba(255,255,255,.1); } .nav a[aria-current="page"] { color: #fff; background: var(--accent); border: 0; box-shadow: 0 5px 14px rgba(0,0,0,.15); } .wx-chip { order: 2; border: 0; background: rgba(255,255,255,.09); padding: .45rem .75rem; font-family: "Manrope", sans-serif; font-weight: 600; } .scroll-progress { position: absolute; inset: auto 0 -1px; height: 3px; z-index: 2; transform: scaleX(0); transform-origin: left; background: #fff; opacity: .8; } .skyline { overflow: hidden; } .skyline svg { height: 30px; opacity: .1; } /* Hero system */ .hero { position: relative; isolation: isolate; overflow: hidden; min-height: 290px; margin-top: 1.5rem; padding: clamp(2.25rem, 6vw, 4.6rem); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: var(--radius-lg); background: linear-gradient(125deg, color-mix(in srgb, var(--surface) 92%, var(--accent) 8%), var(--surface)); box-shadow: var(--shadow-lg); } .hero::after { content: ""; position: absolute; z-index: -1; width: 320px; height: 320px; right: -80px; top: -110px; border: 40px solid color-mix(in srgb, var(--accent) 13%, transparent); border-radius: 50% 50% 45% 45%; box-shadow: 0 0 0 40px color-mix(in srgb, var(--accent-2) 8%, transparent), 0 0 0 80px color-mix(in srgb, var(--sun) 7%, transparent); } .hero-eyebrow, .section-kicker { margin: 0 0 .8rem !important; color: var(--accent) !important; font-family: "Manrope", sans-serif; font-size: .7rem !important; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; } .hero h1 { max-width: 900px; margin: 0 0 .8rem; font-size: clamp(2.7rem, 7vw, 5.8rem); line-height: .96; letter-spacing: -.055em; } .hero > p:not(.hero-eyebrow):not(.stat-note) { max-width: 680px; margin: .8rem 0 0; font-size: clamp(1rem, 2vw, 1.18rem); line-height: 1.65; } .hero-actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.6rem; } .btn { border-radius: 999px; padding: .75rem 1.15rem; font-size: .82rem; } .btn-primary { background: var(--accent); color: #fff; box-shadow: 0 10px 26px rgba(0,0,0,.16); } .btn-primary span { padding-left: .4rem; } .btn-quiet { color: var(--ink); background: color-mix(in srgb, var(--surface) 86%, transparent); border: 1px solid var(--line); } .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.15); opacity: 1; } .page-home .hero { min-height: clamp(450px, 58vw, 625px); display: flex; flex-direction: column; justify-content: center; color: #fff; border: 0; background-image: linear-gradient(90deg, rgba(8, 39, 47, .92) 0%, rgba(8, 39, 47, .76) 37%, rgba(8, 39, 47, .16) 72%, rgba(8, 39, 47, .08)), linear-gradient(0deg, rgba(8, 39, 47, .35), transparent 55%), url("../assets/sb-panorama.jpg"); background-size: cover; background-position: center; } .page-home .hero::after { display: none; } .page-home .hero h1 { max-width: 720px; text-shadow: 0 8px 30px rgba(0,0,0,.2); } .page-home .hero > p:not(.hero-eyebrow) { max-width: 620px; color: rgba(255,255,255,.84); } .page-home .hero-eyebrow { color: #f6c86f !important; } .page-home .btn-quiet { color: #fff; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.32); backdrop-filter: blur(10px); } .page-food .hero { background: linear-gradient(120deg, #fff8ec, #f4d9c2); } .page-nightlife .hero { color: #fff; background: radial-gradient(circle at 80% 25%, rgba(233,118,91,.32), transparent 26%), linear-gradient(120deg, #152d3c, #402941 76%, #7a3d55); } .page-nightlife .hero p { color: rgba(255,255,255,.76) !important; } .page-nightlife .hero .stat-note { color: rgba(255,255,255,.78); background: rgba(255,255,255,.09); border-color: #ef8d6e; } .page-nightlife .hero .stat-src { color: rgba(255,255,255,.7); } .page-culture .hero { background: linear-gradient(120deg, #edf8f6, #cee8e2); } .page-directory .hero { background: linear-gradient(120deg, #f6f0e7, #e7dccb); } .page-advertise .hero { background: linear-gradient(120deg, #f1e7f4, #d8e6f2); } .stat-note { width: fit-content; max-width: 840px !important; margin-top: 1.35rem; padding: .8rem 1rem; border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-left: 4px solid var(--accent); border-radius: 14px; box-shadow: var(--shadow-sm); font-style: normal; } /* Layout, cards, and advertising */ .page-grid { grid-template-columns: minmax(0, 1fr) 290px; gap: clamp(1.5rem, 4vw, 3rem); padding: 2.8rem 0 4.5rem; } .page-grid main > h2:first-child { margin-top: 0; } .card, .event, .ad-slot { border-color: color-mix(in srgb, var(--line) 82%, transparent); box-shadow: var(--shadow-sm); } .card { position: relative; overflow: hidden; border-radius: var(--radius); padding: 1.35rem 1.45rem; } .cards { gap: 1rem; } .cards .card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--accent); } .cards .card:nth-child(2)::before { background: var(--accent-2); } .cards .card:nth-child(3)::before { background: #7b5ea7; } .cards .card:nth-child(4)::before { background: var(--sun); } .card h3 a { text-decoration: none; color: var(--ink); } .card h3 a:hover { color: var(--accent); } .ad-slot { padding: .4rem; border-radius: 18px; background: color-mix(in srgb, var(--surface) 86%, transparent); } .ad-label { margin-top: .15rem; } .ad-brand { border-radius: 14px; } aside .card { background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(14px); } /* Discovery controls */ .discovery-panel { position: relative; overflow: hidden; margin-bottom: 2.35rem; padding: clamp(1.2rem, 3vw, 1.8rem); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: 26px; background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 94%, var(--accent) 6%), var(--surface)); box-shadow: var(--shadow-lg); } .discovery-panel::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: linear-gradient(90deg, var(--accent), var(--sun), var(--accent-2)); } .discovery-heading, .discovery-footer, .list-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .discovery-heading h2 { margin: 0; } .section-kicker { display: block; } .live-dot { display: inline-flex; align-items: center; gap: .45rem; color: var(--ink-soft); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; } .live-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2f9b63; box-shadow: 0 0 0 5px rgba(47,155,99,.12); animation: live-pulse 2s ease-in-out infinite; } @keyframes live-pulse { 50% { box-shadow: 0 0 0 9px rgba(47,155,99,0); } } .search-shell { display: flex; align-items: center; gap: .6rem; width: 100%; margin: 1.3rem 0 1.15rem; padding: .25rem .95rem; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); } .search-shell:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent); } .search-shell > span { color: var(--accent); font-size: 1.35rem; line-height: 1; } .search-shell .search-box { max-width: none; margin: 0; padding: .7rem 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: 0; } .filter-group { display: grid; grid-template-columns: 105px minmax(0, 1fr); gap: .8rem; padding: 1rem 0; border-top: 1px solid var(--line); } .filter-label { display: flex; flex-direction: column; padding-top: .35rem; } .filter-label strong { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; } .filter-label span { color: var(--ink-soft); font-size: .66rem; } .filters { gap: .45rem; margin: 0; } .filters button { min-height: 36px; padding: .45rem .82rem; border-color: color-mix(in srgb, var(--line) 82%, transparent); background: color-mix(in srgb, var(--surface) 84%, transparent); font-family: "Manrope", sans-serif; font-size: .72rem; font-weight: 700; } .filters button:hover { border-color: var(--accent); transform: translateY(-1px); } .filters button.active { background: var(--accent); border-color: var(--accent); box-shadow: 0 5px 14px color-mix(in srgb, var(--accent) 25%, transparent); } .filters-multi button.active::before { content: "✓"; margin-right: .38rem; } .filters-multi { display: grid; grid-template-columns: repeat(auto-fit, minmax(124px, 1fr)); align-items: stretch; } .filters-multi button { display: flex; align-items: center; justify-content: space-between; gap: .35rem; width: 100%; min-width: 0; border-radius: 12px; text-align: left; } .filters-multi button.active::before { flex: 0 0 auto; } .filters-multi button .filter-count { margin-left: auto; flex: 0 0 auto; } .filters-sort { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); } .filters-sort button { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; width: 100%; border-radius: 12px; } .filter-count { display: inline-grid; min-width: 19px; height: 19px; margin-left: .25rem; place-items: center; border-radius: 999px; background: color-mix(in srgb, var(--ink) 8%, transparent); font-size: .62rem; } .filters button.active .filter-count { background: rgba(255,255,255,.2); } .discovery-footer { padding-top: 1rem; border-top: 1px solid var(--line); } .filter-summary { margin: 0; color: var(--ink-soft); font-size: .72rem; } .filter-summary strong { color: var(--ink); font-size: .95rem; } .decide-bar { margin: 0; } .decide-btn { padding: .65rem 1rem; border: 1px solid color-mix(in srgb, var(--accent) 70%, #000); background: var(--accent); box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 24%, transparent); font-size: .78rem; } .decide-btn .dice { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(255,255,255,.16); } .decide-result.show { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); } .decide-flash { font-family: "Marcellus", serif; } .list-heading { align-items: end; margin: 0 0 1rem; } .list-heading h2 { margin: 0; } .list-heading > span { color: var(--ink-soft); font-size: .68rem; } /* Listings */ .event { position: relative; overflow: hidden; margin-bottom: .65rem; padding: 1rem 1.1rem; border-radius: 16px; background: color-mix(in srgb, var(--surface) 94%, transparent); } .event:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); transform: translateY(-1px); box-shadow: 0 12px 34px rgba(25,43,48,.11); } .food-row { padding: 1rem 1.1rem .9rem; } .food-row::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: color-mix(in srgb, var(--accent) 70%, transparent); } .food-row .row-head { min-height: 32px; } .food-row .row-head h3 { font-size: 1.1rem; } .food-row .row-head h3 a { color: var(--ink); text-decoration: none; } .food-row .row-head h3 a:hover { color: var(--accent); } .event-meta { margin-top: .42rem !important; font-size: .76rem; line-height: 1.45; } .tag, .status { min-height: 24px !important; padding: .3rem .62rem !important; border: 1px solid rgba(255,255,255,.12); font-family: "Manrope", sans-serif; font-size: .61rem !important; line-height: 1 !important; letter-spacing: .06em; } .tag { color: #fff; } .rating { font-size: .74rem; } .dolphins { font-size: .86rem; } .rating-count { font-size: .66rem; } .status-open { background: #277855; } .status-closing { background: #b76d16; } .status-opening { background: #1c7582; } .status-happy { background: #a52d72; } .status-closed-today { background: #79353b; } .event-day { margin-top: 2rem; padding: .5rem .1rem; border: 0; color: var(--ink); font-size: 1.15rem; } .event-day::before { content: "●"; padding-right: .55rem; color: var(--accent); font-size: .65rem; vertical-align: .18em; } .page-culture #events-list > .event { padding-left: 1.3rem; } .page-culture #events-list > .event::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--accent-2); } .event h3 a { color: var(--ink); text-decoration: none; } .event h3 a:hover { color: var(--accent); } .mini-cal-grid { gap: 4px; } .mini-cal-day { min-height: 30px; display: grid; place-items: center; } button.mini-cal-day.has-events { background: var(--accent); } .mini-cal-today { outline-color: var(--sun); } /* Directory becomes an easy-scanning modern index */ .page-directory .search-box { max-width: none; margin: 0 0 1rem; padding: .8rem 1rem; border-radius: 14px; box-shadow: var(--shadow-sm); } .dir-table { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; border-collapse: separate; border-spacing: 0; box-shadow: var(--shadow-sm); } .dir-table th { padding-block: .9rem; background: color-mix(in srgb, var(--surface) 80%, var(--accent) 4%); } .dir-table td:first-child { font-weight: 700; color: var(--ink); } .dir-table tr:hover td { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); } /* Footer and floating utilities */ .site-footer { position: relative; overflow: hidden; padding: 3.5rem 0 6rem; margin-top: 0; background: linear-gradient(130deg, color-mix(in srgb, var(--band) 92%, #000), var(--band)); } .site-footer::before { content: ""; position: absolute; width: 420px; height: 210px; right: -120px; top: -120px; border: 34px solid rgba(255,255,255,.035); border-radius: 50% 50% 0 0; } .site-footer strong { font-family: "Marcellus", serif; font-size: 1.05rem; } .site-footer p, .site-footer li { opacity: .72; } .to-top { right: 1.25rem; bottom: 1.25rem; border: 1px solid rgba(255,255,255,.25); background: var(--band); } .mobile-dock { display: none; } /* Dark weather/night refinement */ body.time-night .discovery-panel, body.time-night .event, body.time-night .card, body.time-night .search-shell { background: color-mix(in srgb, var(--surface) 94%, #fff 2%); } body.time-night .page-food .hero { color: var(--ink); } /* Tablet */ @media (max-width: 1050px) { .nav a { padding-inline: .5rem; font-size: .72rem; } .brand { min-width: 210px; } .brand-copy small { display: none; } } /* Give discovery-heavy pages their full width before the desktop becomes cramped. The sidebar moves below rather than squeezing dozens of choices. */ @media (max-width: 1100px) and (min-width: 801px) { .page-grid { grid-template-columns: minmax(0, 1fr); } .page-grid > main, .page-grid > aside { min-width: 0; } .page-grid > aside { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; max-height: none; overflow: visible; } .page-grid > aside > * { margin: 0; } .filters-multi { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); } } /* Mobile: all primary actions live within thumb reach */ @media (max-width: 800px) { body { padding-bottom: 74px; font-size: 14px; } .wrap { padding-inline: .85rem; } .site-header { padding: .65rem 0; } .site-header .wrap { gap: .55rem; flex-wrap: wrap; } .brand { min-width: 0; margin-right: auto; } .brand-seal { width: 38px; height: 38px; } .brand-copy strong { font-size: 1.05rem; } .wx-chip { order: 0; padding: .38rem .55rem; font-size: .65rem; } .nav-toggle { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; font-size: 0; } .nav-toggle::before { content: "☰"; font-size: 1rem; } .nav-toggle.is-open::before { content: "×"; font-size: 1.5rem; } .nav { order: 4; width: 100%; padding: .5rem 0 .25rem; } .nav ul { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; } .nav a { padding: .65rem .8rem; background: rgba(255,255,255,.06); text-align: center; } .skyline svg { height: 18px; } .ad-banner { margin-top: .8rem; } .hero { min-height: 250px; margin-top: .8rem; padding: 1.65rem 1.3rem; border-radius: 24px; } .hero h1 { font-size: clamp(2.5rem, 15vw, 4.4rem); } .hero::after { width: 220px; height: 220px; right: -100px; } .page-home .hero { min-height: 470px; padding: 2rem 1.25rem; background-image: linear-gradient(90deg, rgba(8,39,47,.9), rgba(8,39,47,.57)), linear-gradient(0deg, rgba(8,39,47,.58), transparent 60%), url("../assets/sb-panorama.jpg"); background-position: 61% center; } .page-home .hero h1 { font-size: clamp(3rem, 16vw, 4.7rem); } .hero-actions { margin-top: 1.25rem; } .hero-actions .btn { flex: 1 1 auto; text-align: center; } .stat-note { align-items: flex-start; flex-wrap: wrap; font-size: .77rem !important; } .stat-src { width: 100%; } .page-grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding: 1.7rem 0 3rem; } .page-grid > main, .page-grid > aside { min-width: 0; } .page-grid > aside { padding-top: .5rem; } .cards { grid-template-columns: 1fr; } .card { border-radius: 17px; } .discovery-panel { margin-inline: -.15rem; padding: 1.1rem; border-radius: 22px; } .discovery-heading { align-items: flex-start; } .discovery-heading h2 { font-size: 1.55rem; } .search-shell { margin-top: 1rem; } .filter-group { grid-template-columns: 1fr; gap: .45rem; padding: .85rem 0; } .filter-label { flex-direction: row; align-items: baseline; gap: .5rem; padding-top: 0; } .filters { flex-wrap: wrap; overflow: visible; padding: 2px; margin-inline: -2px; } .filters button { min-height: 40px; } .filters-avail { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; scroll-snap-type: x proximity; } .filters-avail::-webkit-scrollbar { display: none; } .filters-avail button { flex: 0 0 auto; scroll-snap-align: start; } .filters-multi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; overflow: visible; padding-bottom: 2px; } .filters-multi button { min-height: 42px; padding-inline: .7rem; white-space: normal; } .discovery-footer { align-items: flex-start; flex-direction: column; } .decide-bar, .decide-btn { width: 100%; } .decide-btn { justify-content: center; min-height: 46px; } .list-heading { align-items: flex-start; flex-direction: column; gap: .1rem; } .food-row { padding: .9rem; } .food-row .row-head { align-items: flex-start; flex-direction: column; gap: .25rem; } .food-row .row-head .rating { align-self: flex-start; } .food-row .status { float: none; margin: 0 .35rem .35rem 0; } .food-row .tag { margin-bottom: .35rem; } .rating-count { white-space: nowrap; } .side-switch { display: none; } .mobile-dock { position: fixed; z-index: 1100; display: grid; grid-template-columns: repeat(5, 1fr); left: max(.55rem, env(safe-area-inset-left)); right: max(.55rem, env(safe-area-inset-right)); bottom: max(.45rem, env(safe-area-inset-bottom)); height: 62px; padding: 5px; border: 1px solid rgba(255,255,255,.16); border-radius: 20px; background: color-mix(in srgb, var(--band) 94%, transparent); box-shadow: 0 18px 45px rgba(0,0,0,.32); backdrop-filter: blur(18px); } .mobile-dock a { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1px; border-radius: 15px; color: var(--band-ink); text-decoration: none; opacity: .62; } .mobile-dock a > span { font-size: 1.05rem; line-height: 1; } .mobile-dock a small { font-size: .55rem; font-weight: 700; } .mobile-dock a[aria-current="page"] { color: #fff; background: var(--accent); opacity: 1; } .to-top { right: .9rem; bottom: 5rem; width: 42px; height: 42px; } .site-footer { padding-bottom: 7rem; } .dir-table, .dir-table tbody, .dir-table tr, .dir-table td { display: block; width: 100%; } .dir-table thead { display: none; } .dir-table { border: 0; background: transparent; box-shadow: none; } .dir-table tr { margin-bottom: .65rem; padding: .8rem .9rem; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: var(--shadow-sm); } .dir-table td { padding: .25rem 0; border: 0; font-size: .78rem; } .dir-table td:first-child { font-family: "Marcellus", serif; font-size: 1rem; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } } /* ========================================================================== Bespoke navigation iconography Five small Santa Barbara-inspired marks built from CSS so they stay sharp, theme-colored, and lightweight at every screen size. ========================================================================== */ .dock-icon { position: relative; display: inline-block; width: 23px; height: 23px; flex: 0 0 23px; color: currentColor; } /* Home — Mission arch and doorway */ .dock-home::before { content: ""; position: absolute; left: 3px; top: 2px; width: 15px; height: 18px; border: 2px solid currentColor; border-bottom-width: 3px; border-radius: 10px 10px 2px 2px; } .dock-home::after { content: ""; position: absolute; left: 8px; bottom: 2px; width: 5px; height: 9px; border: 2px solid currentColor; border-bottom: 0; border-radius: 5px 5px 0 0; background: color-mix(in srgb, currentColor 16%, transparent); } /* Events — eight-point Fiesta rosette */ .dock-events::before { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: repeating-conic-gradient( from 0deg, currentColor 0deg 12deg, transparent 12deg 45deg ); -webkit-mask: radial-gradient(circle, transparent 0 28%, #000 30%); mask: radial-gradient(circle, transparent 0 28%, #000 30%); } .dock-events::after { content: ""; position: absolute; left: 8px; top: 8px; width: 7px; height: 7px; box-sizing: border-box; border: 2px solid currentColor; border-radius: 50%; } /* Food — sliced California citrus doubles as a plate */ .dock-food::before { content: ""; position: absolute; inset: 2px; box-sizing: border-box; border: 2px solid currentColor; border-radius: 50%; background: repeating-conic-gradient( from 0deg, currentColor 0deg 2deg, transparent 2deg 45deg ); } .dock-food::after { content: ""; position: absolute; inset: 8px; border: 2px solid currentColor; border-radius: 50%; background: color-mix(in srgb, currentColor 12%, transparent); } /* Nightlife — crescent suspended over two ocean swells */ .dock-night::before { content: ""; position: absolute; left: 7px; top: 1px; width: 11px; height: 11px; border: 2px solid currentColor; border-top-color: transparent; border-right-color: transparent; border-radius: 50%; transform: rotate(-28deg); } .dock-night::after { content: ""; position: absolute; left: 2px; bottom: 2px; width: 19px; height: 6px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; border-radius: 50%; transform: skewX(-18deg); } /* Directory — rolled parchment with three directory lines */ .dock-directory::before { content: ""; position: absolute; left: 5px; top: 3px; width: 13px; height: 17px; box-sizing: border-box; border-left: 2px solid currentColor; border-right: 2px solid currentColor; background: linear-gradient(currentColor, currentColor) 50% 5px / 6px 1.5px no-repeat, linear-gradient(currentColor, currentColor) 50% 9px / 6px 1.5px no-repeat, linear-gradient(currentColor, currentColor) 50% 13px / 6px 1.5px no-repeat, color-mix(in srgb, currentColor 9%, transparent); } .dock-directory::after { content: ""; position: absolute; left: 3px; top: 1px; width: 17px; height: 21px; box-sizing: border-box; border-top: 4px double currentColor; border-bottom: 4px double currentColor; border-radius: 5px; } .nav a { display: inline-flex; align-items: center; justify-content: center; gap: .32rem; min-height: 38px; line-height: 1; } .nav-icon { width: 23px; height: 23px; flex: 0 0 23px; transform: scale(.74); transform-origin: center; opacity: .78; margin: -2px -2px -2px -3px; vertical-align: middle; } .nav a:hover .nav-icon, .nav a[aria-current="page"] .nav-icon { opacity: 1; } /* Illustrated dice pair — recognizable without borrowing a system emoji */ .chance-mark { position: relative; display: inline-block; width: 35px; height: 27px; flex: 0 0 35px; } .chance-mark i { position: absolute; display: block; width: 18px; height: 18px; border: 1px solid rgba(255,255,255,.72); border-radius: 5px; background-color: #fff; box-shadow: 0 3px 7px rgba(65,30,20,.22); } .chance-mark i:first-child { left: 1px; top: 6px; z-index: 2; transform: rotate(-12deg); background-image: radial-gradient(circle at 28% 28%, #a84431 0 1.7px, transparent 1.9px), radial-gradient(circle at 50% 50%, #a84431 0 1.7px, transparent 1.9px), radial-gradient(circle at 72% 72%, #a84431 0 1.7px, transparent 1.9px); } .chance-mark i:last-child { right: 1px; top: 2px; transform: rotate(10deg); background-image: radial-gradient(circle at 27% 27%, #a84431 0 1.55px, transparent 1.8px), radial-gradient(circle at 73% 27%, #a84431 0 1.55px, transparent 1.8px), radial-gradient(circle at 50% 50%, #a84431 0 1.55px, transparent 1.8px), radial-gradient(circle at 27% 73%, #a84431 0 1.55px, transparent 1.8px), radial-gradient(circle at 73% 73%, #a84431 0 1.55px, transparent 1.8px); } .decide-btn .chance-mark { width: 35px; height: 27px; border-radius: 0; background: transparent; } .decide-btn.spinning .chance-mark { animation: dice-tumble .5s linear infinite; } @media (max-width: 800px) { .mobile-dock a > .dock-icon { width: 24px; height: 24px; flex-basis: 24px; font-size: 0; } .mobile-dock a small { margin-top: 1px; } .nav a { justify-content: center; } } /* ========================================================================== Selected venue map MapLibre's vector layers are recolored in js/map.js whenever the site's time-of-day or weather theme changes. These rules make the surrounding controls, selected marker, popup, and mobile sheet feel native to the site. ========================================================================== */ :root { --map-land: #faf6ef; --map-water: #78aeb7; } .venue-map-card { position: relative; padding: .75rem !important; overflow: hidden; border-color: color-mix(in srgb, var(--accent-2) 30%, var(--line)) !important; background: linear-gradient(155deg, color-mix(in srgb, var(--surface) 93%, transparent), color-mix(in srgb, var(--surface) 78%, var(--accent-2) 6%)) !important; box-shadow: 0 16px 45px rgba(22, 51, 57, .13) !important; } .venue-map-card::before { content: ""; position: absolute; z-index: 2; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--accent), var(--sun), var(--accent-2)); } .venue-map-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .2rem .25rem .7rem; } .venue-map-head h3 { margin: .05rem 0 0; font-size: 1.18rem; line-height: 1.1; } .venue-map-head .section-kicker { color: var(--accent-2); font-size: .58rem; font-weight: 800; letter-spacing: .14em; line-height: 1; text-transform: uppercase; } .venue-map-canvas { position: relative; isolation: isolate; width: 100%; height: 280px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent-2) 26%, var(--line)); border-radius: 17px; background: radial-gradient(circle at 22% 42%, color-mix(in srgb, var(--map-water) 26%, transparent) 0 2px, transparent 3px), linear-gradient(135deg, var(--map-land), color-mix(in srgb, var(--map-water) 18%, var(--map-land))); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); transition: background .6s ease, border-color .6s ease; } .map-orientation { position: absolute; z-index: 7; left: 9px; top: 9px; display: grid; grid-template-columns: auto auto; align-items: center; gap: 0 .28rem; padding: .36rem .55rem .34rem; border: 1px solid color-mix(in srgb, var(--accent-2) 26%, var(--line)); border-radius: 11px; color: var(--ink); background: color-mix(in srgb, var(--surface) 89%, transparent); box-shadow: 0 5px 16px rgba(20,45,52,.13); backdrop-filter: blur(11px); pointer-events: none; } .map-orientation span { font-size: .56rem; font-weight: 800; letter-spacing: .09em; line-height: 1; text-transform: uppercase; } .map-orientation b { grid-area: 1 / 2 / 3; color: var(--accent); font-size: 1rem; font-weight: 700; line-height: 1; } .map-orientation small { color: var(--ink-soft); font-size: .45rem; letter-spacing: .045em; line-height: 1; } .map-placeholder { position: absolute; z-index: 8; inset: 0; display: grid; place-content: center; justify-items: center; gap: .25rem; padding: 1rem; color: var(--ink); text-align: center; background: linear-gradient(160deg, color-mix(in srgb, var(--surface) 93%, transparent), color-mix(in srgb, var(--surface) 78%, var(--map-water) 8%)); backdrop-filter: blur(8px); transition: opacity .3s ease, visibility .3s ease; } .map-placeholder.is-map-ready { background: linear-gradient(160deg, color-mix(in srgb, var(--surface) 88%, transparent), color-mix(in srgb, var(--surface) 72%, var(--map-water) 10%)); } .map-placeholder.is-hidden { visibility: hidden; opacity: 0; pointer-events: none; } .map-placeholder strong { margin-top: .35rem; font-family: "Marcellus", Georgia, serif; font-size: 1.05rem; font-weight: 400; } .map-placeholder small { color: var(--ink-soft); font-size: .68rem; } /* Mission arch over an ocean line: our map mark rather than a generic pin. */ .map-placeholder-mark { position: relative; display: block; width: 54px; height: 54px; border-radius: 50%; background: var(--accent); box-shadow: 0 9px 24px color-mix(in srgb, var(--accent) 28%, transparent); } .map-placeholder-mark::before { content: ""; position: absolute; left: 15px; top: 10px; width: 20px; height: 25px; border: 3px solid #fff; border-bottom: 0; border-radius: 14px 14px 0 0; } .map-placeholder-mark::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: 10px; height: 7px; border-top: 2px solid #fff; border-bottom: 2px solid #fff; border-radius: 50%; transform: skewX(-18deg); } .venue-map-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .08rem .75rem; padding: .7rem .25rem .1rem; min-height: 57px; } .venue-map-meta > strong { overflow: hidden; color: var(--ink); font-family: "Marcellus", Georgia, serif; font-size: .88rem; font-weight: 400; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } .venue-map-meta > span { overflow: hidden; color: var(--ink-soft); font-size: .62rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .venue-map-meta.has-map-warning { grid-template-columns: minmax(0, 1fr); gap: .24rem; } .venue-map-meta.has-map-warning > strong, .venue-map-meta.has-map-warning > span { overflow: visible; text-overflow: clip; white-space: normal; } .venue-map-meta.has-map-warning > span { padding-right: .15rem; color: var(--ink-soft); line-height: 1.45; } .venue-map-meta.has-map-warning .map-directions { grid-area: auto; justify-self: start; margin-top: .35rem; } .map-directions { grid-area: 1 / 2 / 3 / 3; display: inline-flex; align-items: center; gap: .3rem; min-height: 34px; padding: .45rem .7rem; border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); border-radius: 999px; color: var(--accent); font-size: .64rem; font-weight: 800; text-decoration: none; white-space: nowrap; } .map-directions:hover { color: #fff; border-color: var(--accent); background: var(--accent); transform: translateY(-1px); } .map-directions[hidden] { display: none; } .row-foot { display: flex; align-items: center; justify-content: space-between; gap: .7rem; clear: both; } .row-foot .event-meta { min-width: 0; margin-bottom: 0; } .venue-map-btn { display: inline-flex; align-items: center; flex: 0 0 auto; gap: .34rem; min-height: 31px; padding: .34rem .62rem; border: 1px solid color-mix(in srgb, var(--accent-2) 36%, var(--line)); border-radius: 999px; color: var(--accent-2); background: color-mix(in srgb, var(--surface) 88%, transparent); cursor: pointer; font-size: .62rem; font-weight: 800; line-height: 1; white-space: nowrap; } .venue-map-btn:hover { color: #fff; border-color: var(--accent-2); background: var(--accent-2); box-shadow: 0 6px 16px color-mix(in srgb, var(--accent-2) 22%, transparent); transform: translateY(-1px); } .mini-map-mark { position: relative; width: 13px; height: 15px; flex: 0 0 13px; border: 1.5px solid currentColor; border-radius: 8px 8px 8px 1px; transform: rotate(-45deg); } .mini-map-mark::after { content: ""; position: absolute; left: 3px; top: 3px; width: 4px; height: 4px; border: 1px solid currentColor; border-radius: 50%; } .venue-map-btn:hover .mini-map-mark::after { background: rgba(255,255,255,.22); } .map-sheet-close { display: none; width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: var(--surface); cursor: pointer; font-size: 1.5rem; line-height: 1; } /* Re-skin MapLibre rather than leaving a default third-party map floating in the interface. The map data remains fully interactive and attributed. */ .venue-map-canvas .maplibregl-canvas { outline: none; } .venue-map-canvas .maplibregl-ctrl-top-right { top: 8px; right: 8px; } .venue-map-canvas .maplibregl-ctrl-group { overflow: hidden; margin: 0 !important; border: 1px solid color-mix(in srgb, var(--accent-2) 24%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--surface) 90%, transparent); box-shadow: 0 6px 18px rgba(20,45,52,.14); backdrop-filter: blur(12px); } .venue-map-canvas .maplibregl-ctrl-group button { width: 32px; height: 32px; color: var(--ink); background-color: transparent; } .venue-map-canvas .maplibregl-ctrl-group button + button { border-top: 1px solid var(--line); } .venue-map-canvas .maplibregl-ctrl-group button:hover { background-color: color-mix(in srgb, var(--accent) 11%, var(--surface)); } .venue-map-canvas .maplibregl-ctrl-icon { filter: sepia(.2) saturate(.8); } .venue-map-canvas .maplibregl-ctrl-attrib { padding: 2px 6px; border-radius: 8px 0 0 0; color: var(--ink-soft); background: color-mix(in srgb, var(--surface) 82%, transparent); font-size: 9px; backdrop-filter: blur(8px); } .venue-map-canvas .maplibregl-ctrl-attrib a { color: var(--ink-soft); } .sb-map-marker { position: relative; width: 38px; height: 46px; border: 3px solid #fff; border-radius: 23px 23px 23px 5px; color: #fff; background: var(--accent); box-shadow: 0 9px 23px rgba(26,44,50,.32), 0 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent); cursor: pointer; transform: rotate(-45deg); animation: map-marker-arrive .45s cubic-bezier(.2,.85,.35,1.25); } .sb-marker-arch { position: absolute; left: 10px; top: 9px; width: 13px; height: 16px; border: 2px solid currentColor; border-bottom: 0; border-radius: 9px 9px 1px 1px; transform: rotate(45deg); } .sb-marker-arch::after { content: ""; position: absolute; left: 3px; bottom: -5px; width: 4px; height: 8px; border: 2px solid currentColor; border-bottom: 0; border-radius: 4px 4px 0 0; } @keyframes map-marker-arrive { from { opacity: 0; transform: translateY(-12px) rotate(-45deg) scale(.72); } to { opacity: 1; transform: translateY(0) rotate(-45deg) scale(1); } } .venue-map-canvas .maplibregl-popup { max-width: 210px !important; } .venue-map-canvas .maplibregl-popup-content { display: grid; gap: .15rem; padding: .68rem .8rem; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); border-radius: 13px; color: var(--ink); background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: 0 10px 26px rgba(20,39,45,.2); backdrop-filter: blur(12px); } .venue-map-canvas .maplibregl-popup-tip { border-top-color: var(--surface) !important; } .sb-map-popup strong { font-family: "Marcellus", Georgia, serif; font-size: .8rem; font-weight: 400; line-height: 1.2; } .sb-map-popup span { color: var(--ink-soft); font-size: .57rem; line-height: 1.35; } .map-sheet { position: fixed; z-index: 1400; inset: 0; visibility: hidden; pointer-events: none; } .map-sheet-scrim { position: absolute; inset: 0; opacity: 0; background: rgba(5,18,23,.62); backdrop-filter: blur(2px); transition: opacity .24s ease; } .map-sheet-stage { position: absolute; inset: auto 0 0; transform: translateY(105%); transition: transform .32s cubic-bezier(.22,.82,.31,1); } .map-sheet.open { visibility: visible; pointer-events: auto; } .map-sheet.open .map-sheet-scrim { opacity: 1; } .map-sheet.open .map-sheet-stage { transform: translateY(0); } body.map-sheet-open { overflow: hidden; } body.time-night .venue-map-canvas .maplibregl-ctrl-icon { filter: invert(1) opacity(.78); } body.time-night .venue-map-card { box-shadow: 0 18px 50px rgba(0,0,0,.32) !important; } @media (max-width: 800px) { .page-grid > aside .venue-map-card { display: none; } .map-sheet .venue-map-card { display: block; width: 100%; max-height: min(87vh, 720px); margin: 0 !important; padding: .8rem .85rem calc(.85rem + env(safe-area-inset-bottom)) !important; border: 0 !important; border-radius: 27px 27px 0 0 !important; box-shadow: 0 -20px 60px rgba(0,0,0,.28) !important; } .map-sheet .venue-map-card::after { content: ""; position: absolute; left: 50%; top: 7px; width: 42px; height: 4px; border-radius: 99px; background: color-mix(in srgb, var(--ink-soft) 36%, transparent); transform: translateX(-50%); } .map-sheet .venue-map-head { padding-top: .65rem; } .map-sheet-close { display: grid; place-items: center; } .map-sheet .venue-map-canvas { height: min(54vh, 430px); border-radius: 20px; } .map-sheet .venue-map-meta { padding: .75rem .25rem .15rem; } .map-sheet .venue-map-meta > strong { font-size: .98rem; } .map-sheet .venue-map-meta > span { font-size: .67rem; } .map-sheet .map-directions { min-height: 40px; padding-inline: .85rem; } .row-foot { align-items: flex-end; } .row-foot .event-meta { flex: 1 1 auto; } .venue-map-btn { min-height: 36px; padding: .42rem .68rem; } .to-top { z-index: 1200; } } @media (prefers-reduced-motion: reduce) { .sb-map-marker { animation: none; } .map-sheet-stage, .map-sheet-scrim { transition-duration: .01ms; } }