/* Thriving Oregon — 2026 Redesign · Lane County character */ :root { --dark-blue: #2f4858; --blue: #33658a; --light-blue: #86bbd8; --yellow: #f1b71b; --yellow-hot: #ffc93a; --green: #4f8a5b; --green-deep: #3a6b45; --green-bright: #7db88a; --green-soft: rgba(79, 138, 91, 0.14); --fog: #e8f0f3; --mist: #cfe0e8; --cream-soft: #f2f6f4; --antique-cream: #f4e6c8; --ink: #1a2c36; --muted: #54707e; --white: #ffffff; --shadow-soft: 0 18px 40px rgba(47, 72, 88, 0.12); --radius: 3px; --radius-lg: 8px; --max: 1120px; --font-display: "Fraunces", "Times New Roman", serif; --font-body: "Bricolage Grotesque", "Segoe UI", sans-serif; --ease: cubic-bezier(0.22, 1, 0.36, 1); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6; color: var(--ink); background: radial-gradient(ellipse 85% 55% at 92% -8%, rgba(134, 187, 216, 0.38), transparent 58%), radial-gradient(ellipse 60% 48% at 0% 55%, rgba(125, 184, 138, 0.16), transparent 52%), radial-gradient(ellipse 70% 40% at 50% 105%, rgba(51, 101, 138, 0.07), transparent 55%), linear-gradient(180deg, #eef5f8 0%, #f4f8f6 42%, #eef2f0 100%); -webkit-font-smoothing: antialiased; overflow-x: hidden; isolation: isolate; } .page-texture { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 1; background: radial-gradient(ellipse 110% 70% at 50% -15%, rgba(255, 255, 255, 0.65), transparent 58%), radial-gradient(ellipse 90% 55% at 50% 120%, rgba(47, 72, 88, 0.045), transparent 52%); } img { max-width: 100%; display: block; } a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 0.18em; } a:hover { color: var(--dark-blue); } h1, h2, h3, .brand-wordmark { font-family: var(--font-display); font-weight: 600; line-height: 1.15; color: var(--dark-blue); } h1, h2 { font-style: italic; letter-spacing: -0.03em; } p { margin: 0 0 1rem; } .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; } .container { width: min(100% - 2rem, var(--max)); margin-inline: auto; } /* ——— Header ——— */ .site-header { position: absolute; inset: 0 0 auto; z-index: 40; padding: 1.25rem 0; } /* Home overlay: lock prior bar height and optically center the row (logo has extra top pad) */ .site-header:not(.is-solid) { display: flex; align-items: center; box-sizing: border-box; height: calc(4.85rem + 2.5rem); padding: 0; } .site-header:not(.is-solid) > .header-inner { width: min(100% - 2rem, var(--max)); margin-inline: auto; /* margin, not transform — transform traps position:fixed nav inside the header */ margin-top: -0.4rem; } .site-header.is-solid { position: sticky; top: 0; background: rgba(247, 250, 251, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(47, 72, 88, 0.08); padding: 0.85rem 0; } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } /* Logo style toggle — on : data-logo="type" → circular mark + Fraunces wordmark (default) data-logo="image" → previous full PNG lockup */ .logo { display: flex; align-items: center; text-decoration: none; color: #ffffff; } .logo-lockup--image, .logo-lockup--type { display: none; } html[data-logo="image"] .logo-lockup--image { display: contents; } html:not([data-logo]) .logo-lockup--type, html[data-logo="type"] .logo-lockup--type { display: inline-flex; align-items: center; gap: 0.7rem; } /* Full PNG lockup (revert mode) */ .logo-img { display: block; height: 4.85rem; width: auto; max-width: min(19rem, 62vw); } .logo-img--on-light { display: none; } .site-header.is-solid .logo-img--on-dark { display: none; } .site-header.is-solid .logo-img--on-light { display: block; } /* Mark + live Fraunces wordmark */ .logo-mark { display: block; height: 3.55rem; width: 3.55rem; flex-shrink: 0; } .logo-mark--on-light { display: none; } .site-header.is-solid .logo-mark--on-dark { display: none; } .site-header.is-solid .logo-mark--on-light { display: block; } .logo-wordmark { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: clamp(1.15rem, 1.9vw, 1.4rem); line-height: 0.92; letter-spacing: -0.03em; color: #ffffff; transform: rotate(-1.75deg); transform-origin: left center; } .site-header.is-solid .logo-wordmark { color: var(--dark-blue); } .brand-wordmark { font-size: 1.4rem; letter-spacing: -0.03em; font-style: italic; font-weight: 700; } .nav { display: flex; align-items: center; gap: 1.75rem; } .nav a { color: rgba(255, 255, 255, 0.92); text-decoration: none; font-family: var(--font-display); font-size: 1.05rem; font-style: italic; font-weight: 600; letter-spacing: -0.01em; } .site-header.is-solid .nav a { color: var(--dark-blue); } .nav a:hover, .nav a[aria-current="page"] { color: var(--green-bright); } .site-header.is-solid .nav a:hover, .site-header.is-solid .nav a[aria-current="page"] { color: var(--green); } .nav-cta { background: var(--yellow); color: var(--ink) !important; padding: 0.55rem 1rem; border-radius: var(--radius); font-family: var(--font-body) !important; font-size: 0.95rem !important; font-style: normal !important; font-weight: 700 !important; letter-spacing: 0.02em; transition: transform 0.25s var(--ease), background 0.25s; } .nav-cta:hover { background: var(--yellow-hot); transform: translateY(-1px) rotate(-0.5deg); color: var(--ink) !important; } .menu-toggle { display: none; position: relative; z-index: 70; align-items: center; justify-content: center; background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.45); color: var(--white); width: 2.75rem; height: 2.75rem; border-radius: 999px; cursor: pointer; font-size: 1.15rem; line-height: 1; transition: background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease); } .menu-toggle:hover, .menu-toggle:focus-visible { background: rgba(255, 255, 255, 0.1); outline: none; } .menu-toggle[aria-expanded="true"] { background: var(--yellow); border-color: var(--yellow); color: var(--ink); } .site-header.is-solid .menu-toggle { border-color: rgba(47, 72, 88, 0.28); color: var(--dark-blue); } .site-header.is-solid .menu-toggle:hover, .site-header.is-solid .menu-toggle:focus-visible { background: rgba(47, 72, 88, 0.06); } .site-header.is-solid .menu-toggle[aria-expanded="true"] { background: var(--yellow); border-color: var(--yellow); color: var(--ink); } body.nav-is-open .site-header { z-index: 65; } /* ——— Hero ——— */ .hero { position: relative; min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; color: var(--white); overflow: hidden; } .hero-media { position: absolute; inset: 0; z-index: 0; } .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 72%; transform: scale(1.03); animation: heroDrift 18s var(--ease) infinite alternate; } @keyframes heroDrift { from { transform: scale(1.03) translate3d(0, 0, 0); } to { transform: scale(1.07) translate3d(-1%, -0.5%, 0); } } .hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 26, 32, 0.42) 0%, rgba(16, 26, 32, 0.45) 28%, rgba(16, 26, 32, 0.9) 100%), linear-gradient(90deg, rgba(16, 26, 32, 0.4) 0%, rgba(16, 26, 32, 0.15) 55%, rgba(16, 26, 32, 0.28) 100%); } .hero-content { position: relative; z-index: 1; width: min(100% - 2rem, var(--max)); margin-inline: auto; --hero-pad-top: 7.75rem; padding: var(--hero-pad-top) 0 1.25rem; } .hero-content::before { content: ""; position: absolute; z-index: -1; top: var(--hero-pad-top); right: -0.5rem; bottom: 0.15rem; left: -0.5rem; background: radial-gradient(ellipse at 25% 30%, rgba(16, 26, 32, 0.52), transparent 72%); pointer-events: none; } .hero-stamp { display: inline-block; margin: 0 0 0.85rem; padding: 0.38rem 0.7rem; font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); background: var(--yellow); box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.18); transform: rotate(-1.75deg); opacity: 0; animation: stampIn 0.7s var(--ease) 0.05s forwards; } @keyframes stampIn { from { opacity: 0; transform: rotate(-6deg) scale(0.92) translateY(10px); } to { opacity: 1; transform: rotate(-1.75deg) scale(1) translateY(0); } } .hero-kicker { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--yellow); margin: 0 0 0.4rem; opacity: 0; transform: translateY(18px); animation: riseIn 0.9s var(--ease) 0.15s forwards; } .hero-kicker a { color: inherit; text-decoration: none; } .hero-kicker a:hover, .hero-kicker a:focus-visible { color: var(--yellow-hot); } .hero-kicker-arrow { display: inline-block; margin-left: 0.4em; letter-spacing: 0; transition: transform 0.2s var(--ease); } .hero-kicker a:hover .hero-kicker-arrow, .hero-kicker a:focus-visible .hero-kicker-arrow { transform: translateX(4px); } .hero h1 { color: var(--white); font-size: clamp(1.35rem, 2.8vw, 2.1rem); font-weight: 600; font-style: italic; margin: 0 0 0.85rem; max-width: min(100%, 38rem); letter-spacing: -0.02em; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45); text-wrap: balance; opacity: 0; transform: translateY(18px); animation: riseIn 0.9s var(--ease) 0.35s forwards; } .hero-lead { color: rgba(255, 255, 255, 0.93); font-size: clamp(0.95rem, 2vw, 1.05rem); max-width: 48ch; margin-bottom: 0.85rem; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); opacity: 0; transform: translateY(18px); animation: riseIn 0.9s var(--ease) 0.5s forwards; } .hero-ozzi-panel { opacity: 0; transform: translateY(18px); animation: riseIn 0.9s var(--ease) 0.65s forwards; padding: 0.85rem 0.95rem 0.95rem; border-top: 4px solid var(--yellow); border-radius: var(--radius-lg) var(--radius-lg) var(--radius) var(--radius); box-shadow: 0 20px 48px rgba(20, 35, 45, 0.35); } .hero-photo-credit { margin: 0.55rem 0 0; font-size: 0.7rem; line-height: 1.4; color: rgba(255, 255, 255, 0.7); opacity: 0; transform: translateY(12px); animation: riseIn 0.9s var(--ease) 0.8s forwards; } .hero-photo-credit a { color: var(--green-bright); text-decoration: none; } .hero-photo-credit a:hover { color: var(--yellow); text-decoration: underline; } @keyframes riseIn { to { opacity: 1; transform: translateY(0); } } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.85rem 1.35rem; border-radius: var(--radius); font-family: var(--font-body); font-weight: 700; font-size: 1rem; border: none; cursor: pointer; text-decoration: none; transition: transform 0.25s var(--ease), background 0.25s, color 0.25s, border-color 0.25s; } .btn:hover { transform: translateY(-2px); } .btn-primary { background: var(--yellow); color: var(--ink); } .btn-primary:hover { background: var(--yellow-hot); color: var(--ink); } .btn-ghost { background: transparent; color: var(--white); border: 1.5px solid rgba(244, 230, 200, 0.72); } .btn-ghost:hover { background: rgba(255, 255, 255, 0.12); color: var(--white); border-color: var(--antique-cream); } .btn-blue { background: var(--blue); color: var(--white); } .btn-blue:hover { background: var(--dark-blue); color: var(--white); } .btn-green { background: var(--green); color: var(--white); } .btn-green:hover { background: var(--green-deep); color: var(--white); } .btn-outline { background: transparent; color: var(--dark-blue); border: 1.5px solid var(--dark-blue); } .btn-outline:hover { background: rgba(47, 72, 88, 0.08); color: var(--dark-blue); border-color: var(--dark-blue); } /* ——— Sections ——— */ .section { padding: 1.75rem 0; } .section-tight { padding: 1.75rem 0; } .section-kicker { display: inline-block; font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); margin-bottom: 0.75rem; } .section-title { font-size: clamp(2rem, 4vw, 2.85rem); margin: 0 0 0.75rem; letter-spacing: -0.03em; font-style: italic; } .section-lead { color: var(--muted); font-size: 1.125rem; max-width: 40rem; margin-bottom: 2rem; } .section-head { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 1.5rem 2.5rem; align-items: end; margin-bottom: 0.5rem; } .section-head .section-title { margin-bottom: 0; } .section-lead-aside { margin-bottom: 2rem; max-width: none; } .section-head .section-lead-aside { margin-bottom: 0.85rem; } /* This is home — belonging pillars */ .home-section { position: relative; overflow: hidden; background: radial-gradient(ellipse 90% 70% at 8% 0%, rgba(134, 187, 216, 0.22), transparent 55%), radial-gradient(ellipse 60% 50% at 100% 100%, rgba(125, 184, 138, 0.35), transparent 50%), linear-gradient(155deg, var(--green-deep) 0%, #2f5a3a 42%, var(--green) 100%); box-shadow: inset 0 3px 0 var(--antique-cream); color: var(--white); } .home-section .section-kicker { color: var(--antique-cream); } .home-section .section-title { color: var(--white); } .home-section .section-lead { color: rgba(232, 240, 243, 0.92); } .home-intro { max-width: 42rem; margin-bottom: 2.5rem; } .home-pillars { list-style: none; margin: 0; padding: 2rem 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.75rem 1.5rem; border-top: 2px solid rgba(244, 230, 200, 0.42); } .home-pillar { position: relative; padding-top: 0.25rem; } .home-pillar-mark { display: block; font-family: var(--font-display); font-style: italic; font-size: 1.65rem; font-weight: 600; color: var(--yellow); line-height: 1; margin-bottom: 0.65rem; text-shadow: 1px 1px 0 rgba(26, 44, 54, 0.2); } .home-pillar h3 { margin: 0 0 0.45rem; font-size: 1.2rem; font-style: normal; letter-spacing: -0.02em; color: var(--white); } .home-pillar p { margin: 0; color: rgba(207, 224, 232, 0.95); font-size: 0.98rem; line-height: 1.55; } /* Ozzi panel — used in hero */ .ozzi-ask-cue { margin: 0 0 0.65rem; padding: 0.45rem 0.7rem; max-width: max-content; font-family: var(--font-display); font-size: 1.05rem; font-style: italic; font-weight: 600; line-height: 1.3; color: var(--dark-blue); background: linear-gradient(135deg, rgba(241, 183, 27, 0.95), rgba(255, 201, 58, 0.92)); box-shadow: 3px 3px 0 rgba(26, 44, 54, 0.18); transform: rotate(-1.4deg) translateY(6px); opacity: 0; pointer-events: none; } .ozzi-ask-cue[hidden] { display: none !important; } .ozzi-ask-cue.is-visible { display: inline-block; animation: ozziCueIn 0.45s var(--ease) forwards; } .ozzi-ask-cue.is-typing::after { content: "▍ display: inline-block; margin-left: 0.08em; animation: ozziCueBlink 0.7s steps(1) infinite; } .ozzi-panel.is-cue-active .ozzi-form input.is-cue-focus, .ozzi-form input.is-cue-focus { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(241, 183, 27, 0.35); animation: ozziInputPulse 1.1s var(--ease) 2; } @keyframes ozziCueIn { from { opacity: 0; transform: rotate(-4deg) translateY(12px) scale(0.94); } to { opacity: 1; transform: rotate(-1.4deg) translateY(0) scale(1); } } @keyframes ozziCueBlink { 50% { opacity: 0; } } @keyframes ozziInputPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(241, 183, 27, 0.28); } 50% { box-shadow: 0 0 0 6px rgba(241, 183, 27, 0.16); } } .ozzi-panel { position: relative; display: flex; flex-direction: column; min-width: 0; max-width: 100%; background: var(--white); border: 1px solid rgba(51, 101, 138, 0.12); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow-soft); color: var(--ink); } .ozzi-chat-tools { display: inline-flex; align-items: center; gap: 0.4rem; flex-shrink: 0; margin-left: auto; } .ozzi-fs-btn, .ozzi-clear-btn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.15rem; height: 2.15rem; padding: 0; border: 1px solid rgba(51, 101, 138, 0.16); border-radius: var(--radius); background: var(--white); color: var(--muted); cursor: pointer; box-shadow: 0 4px 12px rgba(26, 44, 54, 0.08); } .ozzi-fs-btn:hover, .ozzi-fs-btn:focus-visible, .ozzi-clear-btn:hover, .ozzi-clear-btn:focus-visible { color: var(--dark-blue); background: rgba(47, 72, 88, 0.08); outline: none; } .ozzi-fs-icon { display: block; width: 1.05rem; height: 1.05rem; } .ozzi-panel.is-fs { position: fixed; inset: 0; z-index: 95; width: 100%; max-width: none; height: 100dvh; margin: 0; border-radius: 0; border: 0; animation: none; opacity: 1; transform: none; background: var(--white); padding: max(0.85rem, env(safe-area-inset-top)) max(0.85rem, env(safe-area-inset-right)) max(0.85rem, env(safe-area-inset-bottom)) max(0.85rem, env(safe-area-inset-left)); box-shadow: none; } .hero-ozzi-panel.has-fs-moved, .ozzi-page-panel.has-fs-moved, .ozzi-panel.has-fs-moved.reveal { animation: none; opacity: 1; transform: none; } .ozzi-panel.is-fs .ozzi-thread, .hero-ozzi-panel.is-fs .ozzi-thread, .ozzi-page-panel.is-fs .ozzi-thread, .hero-ozzi-panel.is-fs.is-chatting .ozzi-thread, .ozzi-page-panel.is-fs.is-chatting .ozzi-thread { flex: 1 1 auto; height: auto !important; max-height: none !important; min-height: 0; } .ozzi-thread { display: flex; flex-direction: column; gap: 0.5rem; height: 24.5rem; overflow-y: auto; min-width: 0; max-width: 100%; margin: 0 0 0.7rem; padding: 0.5rem 0.55rem; font-size: 0.88rem; line-height: 1.4; overscroll-behavior: auto; touch-action: auto; background: rgba(238, 245, 248, 0.65); border: 1px solid rgba(51, 101, 138, 0.12); border-radius: var(--radius); } .hero-ozzi-panel:not(.is-chatting):not(.is-fs) .ozzi-thread, .ozzi-page-panel:not(.is-chatting):not(.is-fs) .ozzi-thread { height: 0; max-height: 0; min-height: 0; margin: 0; padding: 0; border-width: 0; overflow: hidden; } .hero-ozzi-panel.is-chatting:not(.is-fs) .ozzi-thread, .ozzi-page-panel.is-chatting:not(.is-fs) .ozzi-thread { height: auto; min-height: 0; max-height: min(48vh, 24rem); } .hero-ozzi-panel:not(.is-fs) .ozzi-welcome, .ozzi-page-panel:not(.is-fs) .ozzi-welcome { display: none; } .ozzi-welcome, .ozzi-turn-bot, .ozzi-response { margin-top: 0; padding: 0.5rem 0.65rem; background: var(--antique-cream); border-left: 3px solid var(--green); border-radius: 0 var(--radius) var(--radius) 0; overflow-wrap: anywhere; } .ozzi-welcome { border-left-color: var(--yellow); } .ozzi-welcome strong, .ozzi-turn-bot strong, .ozzi-response strong { color: var(--dark-blue); font-family: var(--font-display); font-size: 0.95rem; } .ozzi-welcome p, .ozzi-turn-bot p, .ozzi-response p { margin: 0.28rem 0 0; } .ozzi-turn-bot a, .ozzi-event a, .ozzi-text-link { color: var(--green-deep); font-weight: 650; text-decoration: underline; text-underline-offset: 0.12em; overflow-wrap: anywhere; } .ozzi-turn-bot a:hover, .ozzi-event a:hover, .ozzi-text-link:hover { color: var(--green); } .ozzi-turn-user { margin: 0 0 0.28rem; padding: 0.22rem 0.5rem; max-width: 100%; background: rgba(47, 72, 88, 0.08); border-radius: var(--radius); font-size: 0.82rem; font-weight: 650; color: var(--dark-blue); } .ozzi-turn.is-error .ozzi-turn-bot, .ozzi-response.is-error { border-left-color: #b45309; background: rgba(241, 183, 27, 0.12); } .ozzi-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.65rem; flex-shrink: 0; width: 100%; max-width: 100%; min-width: 0; } .ozzi-form input { width: 100%; min-width: 0; padding: 0.8rem 0.95rem; border: 1.5px solid rgba(51, 101, 138, 0.25); border-radius: var(--radius); font: inherit; color: var(--ink); background: var(--fog); outline: none; transition: border-color 0.2s, box-shadow 0.2s; } .ozzi-form input:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); background: var(--white); } .ozzi-suggest { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.55rem; margin: 0 0 0.75rem; min-width: 0; max-width: 100%; } .ozzi-suggest[hidden] { display: none !important; } .ozzi-suggest-label { margin: 0; font-size: 0.88rem; font-weight: 650; color: var(--muted); white-space: nowrap; } .ozzi-prompts { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; flex: 1; min-width: 0; max-width: 100%; } .ozzi-prompts[hidden] { display: none !important; } .prompt-chip { appearance: none; border: 1px solid rgba(79, 138, 91, 0.35); background: var(--green-soft); color: var(--green-deep); font: inherit; font-size: 0.92rem; padding: 0.45rem 0.85rem; border-radius: var(--radius); cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; } .prompt-chip:hover { background: rgba(79, 138, 91, 0.22); border-color: var(--green); color: var(--dark-blue); } .ozzi-thinking { color: var(--muted); font-style: italic; } .ozzi-biz-list { display: grid; gap: 0.3rem; margin-top: 0.5rem; } .ozzi-biz { display: grid; gap: 0.05rem; padding: 0.38rem 0.55rem; background: var(--white); border: 1px solid rgba(79, 138, 91, 0.22); border-radius: var(--radius); text-decoration: none; color: var(--ink); } .ozzi-biz:hover { border-color: var(--green); color: var(--ink); } .ozzi-biz strong { font-family: var(--font-body); font-size: 0.88rem; color: var(--dark-blue); } .ozzi-biz span { font-size: 0.78rem; color: var(--muted); } .ozzi-more { margin: 0.4rem 0 0; font-size: 0.84rem; } .ozzi-more a, .ozzi-more-btn { appearance: none; border: 0; background: none; padding: 0; font: inherit; font-weight: 650; color: var(--green-deep); cursor: pointer; text-decoration: none; } .ozzi-more a:hover, .ozzi-more-btn:hover, .ozzi-more-btn:focus-visible { color: var(--green); } .ozzi-event-list { display: grid; gap: 0.3rem; margin-top: 0.45rem; } .ozzi-event { padding: 0.38rem 0.55rem; background: var(--white); border: 1px solid rgba(79, 138, 91, 0.22); border-radius: var(--radius); } .ozzi-event p { margin: 0; font-size: 0.84rem; line-height: 1.4; } .ozzi-form button[type="submit"]:disabled, .prompt-chip:disabled { opacity: 0.65; cursor: wait; } .ozzi-links { display: flex; align-items: center; gap: 0.65rem 1rem; margin-top: 1rem; font-size: 0.92rem; min-width: 0; max-width: 100%; } .ozzi-links-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem 1.15rem; flex: 1 1 auto; min-width: 0; } .ozzi-links a { font-weight: 650; text-decoration: none; color: var(--green-deep); } .ozzi-links a:hover { color: var(--green); } /* Explore — asymmetric, trail-marker energy */ .explore-section { background: radial-gradient(ellipse 60% 45% at 100% 100%, rgba(241, 183, 27, 0.12), transparent 55%), radial-gradient(ellipse 70% 50% at 0% 0%, var(--green-soft), transparent 55%), rgba(255, 255, 255, 0.72); } .explore-grid { display: grid; grid-template-columns: 1fr 1fr 1.2fr; grid-auto-rows: minmax(210px, 1fr); gap: 0.85rem; } .explore-link { position: relative; display: block; min-height: 210px; overflow: hidden; border-radius: var(--radius); text-decoration: none; color: var(--white); box-shadow: 0 0 0 1px rgba(47, 72, 88, 0.08); } .explore-link-tall { grid-column: 3; grid-row: 1 / span 2; min-height: 100%; } .explore-grid > .explore-link:last-child { grid-column: 1 / 3; } .explore-link:hover, .explore-link:focus-visible { color: var(--white); } .explore-link img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); } .explore-link--food img { object-position: 22% 68%; } .explore-link--home img { object-position: center 42%; } .explore-link--market img { object-position: center 42%; } .explore-link:hover img { transform: scale(1.06); } .explore-link::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(26, 44, 54, 0.88) 100%); transition: background 0.3s var(--ease); } .explore-link:hover::after { background: linear-gradient(180deg, transparent 20%, rgba(26, 44, 54, 0.94) 100%); } .explore-link::before { content: ""; position: absolute; top: 0.85rem; left: 0.85rem; z-index: 2; width: 0.55rem; height: 0.55rem; background: var(--yellow); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.25); transform: rotate(45deg); } .explore-label { position: absolute; left: 1.1rem; right: 1.1rem; bottom: 1.1rem; z-index: 1; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; font-style: italic; color: var(--white); } .explore-sub { display: block; font-family: var(--font-body); font-size: 0.88rem; font-weight: 500; font-style: normal; opacity: 0.88; margin-top: 0.25rem; color: rgba(255, 255, 255, 0.9); } /* Events — community board */ .events-section { background: repeating-linear-gradient( -11deg, transparent, transparent 28px, rgba(241, 183, 27, 0.04) 28px, rgba(241, 183, 27, 0.04) 29px ), linear-gradient(180deg, #1a2f3a 0%, #243a48 100%); color: var(--white); } .events-section .section-kicker { color: var(--yellow); } .events-section .section-title, .events-section .section-lead { color: var(--white); } .events-section .section-lead { opacity: 0.82; } .events-list { display: grid; gap: 0.65rem; border-top: none; } .event-row { display: grid; grid-template-columns: 5.75rem 1fr auto; gap: 1.15rem; align-items: center; width: 100%; padding: 0.85rem 1rem; border: 1px solid rgba(134, 187, 216, 0.22); background: rgba(255, 255, 255, 0.03); text-align: left; text-decoration: none; color: inherit; font: inherit; cursor: pointer; appearance: none; -webkit-appearance: none; transition: background 0.25s, border-color 0.25s, transform 0.25s var(--ease); } .home-events-empty { margin: 0; padding: 1rem 0.25rem; color: rgba(255, 255, 255, 0.78); font-size: 0.98rem; } .home-events-empty a { color: var(--yellow); font-weight: 700; text-decoration: none; } .home-events-empty a:hover { color: var(--yellow-hot); } .event-row:hover, .event-row:focus-visible { background: rgba(241, 183, 27, 0.1); border-color: rgba(241, 183, 27, 0.45); color: var(--white); transform: translateX(4px); } .events-section .event-row:hover .event-title, .events-section .event-row:hover .event-meta, .events-section .event-row:hover .event-date { color: var(--white); } .events-section .event-row:hover .event-date { color: var(--ink); background: var(--yellow-hot); } .events-section .event-row:hover .event-arrow { color: var(--yellow); } .event-date { font-family: var(--font-display); font-size: 1.05rem; font-style: italic; color: var(--ink); line-height: 1.15; background: var(--yellow); text-align: center; padding: 0.55rem 0.35rem; transform: rotate(-1.5deg); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2); } .event-date span { display: block; font-family: var(--font-body); font-size: 0.72rem; font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; margin-top: 0.1rem; } .events-section .event-date { display: grid; place-content: center; width: 3.65rem; height: 3.65rem; padding: 0.2rem; border-radius: 50%; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.18); line-height: 1.05; font-size: 0.95rem; } .events-section .event-date span { margin-top: 0.05rem; font-size: 0.68rem; } .event-title { font-family: var(--font-display); font-size: 1.25rem; font-style: italic; margin: 0 0 0.2rem; color: var(--white); } .event-meta { font-size: 0.92rem; opacity: 0.75; } .event-arrow { color: var(--green-bright); font-size: 1.25rem; } .section-footer-link { margin-top: 1.75rem; } .section-footer-link a { color: var(--yellow); font-weight: 700; text-decoration: none; } .section-footer-link a:hover { color: var(--yellow-hot); } /* Events page — light list (live calendar) */ .events-status { margin: 0 0 1rem; color: var(--muted); font-size: 0.98rem; } .events-status.is-error { color: #9a3412; } .featured-events { margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px solid rgba(47, 72, 88, 0.12); } .featured-events-head .section-title { margin-bottom: 0.5rem; } .featured-events-head .section-lead { margin-bottom: 1.75rem; } .featured-events-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .featured-events-loading { grid-column: 1 / -1; margin: 0; color: var(--muted); } .featured-event { --feat-accent: var(--blue); display: grid; grid-template-columns: auto 1fr auto; gap: 0.9rem; align-items: start; width: 100%; min-height: 8.5rem; padding: 1.05rem 1rem; text-align: left; border: 1px solid rgba(51, 101, 138, 0.14); border-top: 3px solid var(--feat-accent); border-radius: var(--radius-lg); background: linear-gradient(165deg, rgba(255, 255, 255, 0.96), rgba(232, 240, 243, 0.72)), var(--white); color: inherit; cursor: pointer; transition: transform 0.25s var(--ease), border-color 0.2s ease, box-shadow 0.25s var(--ease); } .featured-event:hover, .featured-event:focus-visible { transform: translateY(-3px); border-color: rgba(51, 101, 138, 0.28); box-shadow: 0 14px 28px rgba(47, 72, 88, 0.12); } .featured-event-date { min-width: 3.6rem; padding: 0.45rem 0.3rem; background: var(--yellow); color: var(--ink); text-align: center; font-family: var(--font-display); font-size: 0.98rem; font-style: italic; line-height: 1.15; box-shadow: 2px 2px 0 rgba(47, 72, 88, 0.16); transform: rotate(-1.5deg); } .featured-event-date span { display: block; margin-top: 0.12rem; font-family: var(--font-body); font-size: 0.68rem; font-style: normal; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.85; } .featured-event-copy { min-width: 0; } .featured-event-cat { display: inline-block; margin-bottom: 0.4rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green); } .featured-event-copy h3 { margin: 0 0 0.35rem; font-family: var(--font-display); font-size: 1.2rem; font-style: italic; font-weight: 600; line-height: 1.2; color: var(--dark-blue); } .featured-event-copy p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.4; } .featured-event-go { align-self: center; color: var(--blue); font-size: 1.25rem; font-weight: 700; transition: transform 0.2s var(--ease), color 0.2s ease; } .featured-event:hover .featured-event-go, .featured-event:focus-visible .featured-event-go { color: var(--green); transform: translateX(3px); } .events-list-light { gap: 0.55rem; } .event-row-light { border: 1px solid rgba(51, 101, 138, 0.14); background: rgba(255, 255, 255, 0.72); color: var(--ink); } .event-row-light:hover, .event-row-light:focus-visible { background: rgba(241, 183, 27, 0.12); border-color: rgba(241, 183, 27, 0.45); color: var(--ink); transform: translateX(4px); } .event-row-light .event-date { color: var(--ink); background: var(--yellow); } .event-row-light .event-title { color: var(--dark-blue); font-style: italic; } .event-row-light .event-meta { opacity: 1; color: var(--muted); } .event-row-light .event-arrow { color: var(--green); } .event-row-light:hover .event-date { background: var(--yellow-hot); color: var(--ink); } .event-row-light:hover .event-title, .event-row-light:hover .event-meta { color: var(--dark-blue); } .event-row-light:hover .event-arrow { color: var(--green-deep); } .events-more { margin-top: 1.5rem; display: flex; justify-content: center; } /* Stories */ .stories-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.5rem; } .story-feature, .story-item { position: relative; display: block; text-decoration: none; color: inherit; overflow: hidden; } .story-feature { min-height: 420px; border-radius: var(--radius); box-shadow: 4px 4px 0 rgba(47, 72, 88, 0.12); } .story-feature img, .story-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); } .story-feature:hover img, .story-item:hover img { transform: scale(1.04); } .story-feature-copy { position: absolute; inset: auto 0 0; padding: 1.75rem; background: linear-gradient(180deg, transparent, rgba(30, 48, 59, 0.9)); color: var(--white); } .story-feature-copy h3 { color: var(--white); margin: 0.35rem 0 0.4rem; font-size: 1.85rem; font-style: italic; } .story-stack { display: grid; gap: 1.5rem; } .story-item { display: grid; grid-template-columns: 140px 1fr; gap: 1rem; align-items: center; } .story-item img { width: 140px; height: 110px; border-radius: var(--radius); } .story-item h3 { margin: 0.2rem 0 0.35rem; font-size: 1.2rem; } .story-item p { margin: 0; color: var(--muted); font-size: 0.95rem; } .story-tag { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--yellow); } .story-item .story-tag { color: var(--green); } /* Business CTA */ .biz-section { position: relative; overflow: hidden; background: linear-gradient(115deg, rgba(47, 72, 88, 0.94) 0%, rgba(58, 107, 69, 0.88) 55%, rgba(51, 101, 138, 0.9) 100%), url("https://images.unsplash.com/photo-1556740738-b6a63e27c4df?auto=format&fit=crop&w=1600&q=80") center / cover; box-shadow: inset 0 3px 0 var(--antique-cream); color: var(--white); } .biz-section .section-kicker { color: var(--yellow); } .biz-section .section-title { color: var(--white); } .biz-section .section-lead { color: rgba(255, 255, 255, 0.85); } .biz-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } /* Page hero (inner pages) — same vertical rhythm as .section */ .page-hero { padding: 1.75rem 0; background: radial-gradient(ellipse 70% 80% at 100% 0%, rgba(134, 187, 216, 0.35), transparent 55%), linear-gradient(180deg, var(--fog), var(--cream-soft)); border-bottom: 1px solid rgba(134, 187, 216, 0.35); } .page-hero h1 { font-size: clamp(2.4rem, 5vw, 3.5rem); font-style: italic; letter-spacing: -0.03em; margin: 0 0 0.75rem; } .page-hero .section-lead { font-family: var(--font-body); font-size: 1.125rem; } .page-meet-ozzi { margin: 0.55rem 0 0; font-size: 0.95rem; font-weight: 650; } .page-meet-ozzi a { color: var(--green-deep); text-decoration: none; } .page-meet-ozzi a:hover, .page-meet-ozzi a:focus-visible { color: var(--green); } .page-hero--compact { padding: 1.75rem 0; } .page-hero--compact h1 { font-size: clamp(1.7rem, 3.4vw, 2.2rem); margin-bottom: 0.35rem; } .page-hero--compact .section-lead { font-size: 1rem; max-width: 38rem; } .page-hero--green { background: radial-gradient(ellipse 70% 80% at 100% 0%, rgba(125, 184, 138, 0.35), transparent 55%), linear-gradient(155deg, var(--green-deep) 0%, #2f5a3a 42%, var(--green) 100%); border-bottom: none; box-shadow: inset 0 3px 0 var(--antique-cream); color: var(--white); } .page-hero--green .section-kicker { color: var(--yellow); } .page-hero--green h1 { color: var(--white); } .page-hero--green .section-lead { color: rgba(232, 240, 243, 0.92); } .page-hero--weather { position: relative; overflow: hidden; padding: 1.85rem 0 2.1rem; background: radial-gradient(circle 17rem at 90% 0%, rgba(244, 230, 200, 0.88), transparent 58%), radial-gradient(ellipse 70% 45% at 8% 110%, rgba(244, 230, 200, 0.5), transparent 52%), linear-gradient(175deg, #3d6f8f 0%, #5a8fad 40%, var(--light-blue) 70%, var(--antique-cream) 100%); border-bottom: none; box-shadow: inset 0 3px 0 var(--antique-cream); color: var(--white); } .page-hero--weather .section-kicker { color: var(--antique-cream); } .page-hero--weather h1 { color: var(--white); } .page-hero--weather .section-lead { max-width: 38rem; color: rgba(255, 255, 255, 0.92); } .wx-jumps { display: flex; flex-wrap: wrap; gap: 0.5rem 0.55rem; margin: 1.1rem 0 0; } .wx-jumps button { padding: 0.38rem 0.95rem 0.4rem; border: 0; border-radius: 999px; background: var(--antique-cream); color: var(--dark-blue); font-family: var(--font-display); font-size: 1.05rem; font-style: italic; font-weight: 600; cursor: pointer; } .wx-jumps button:hover, .wx-jumps button:focus-visible { background: var(--white); } .wx-jumps button.is-active { background: var(--white); box-shadow: 0 0 0 2px rgba(47, 72, 88, 0.22); } .wx-jumps button:focus-visible { outline: 2px solid var(--antique-cream); outline-offset: 3px; } .page-hero--weather .page-meet-ozzi a { color: var(--antique-cream); } .page-hero--weather .page-meet-ozzi a:hover, .page-hero--weather .page-meet-ozzi a:focus-visible { color: var(--white); } .page-hero--green .section-lead { color: rgba(232, 240, 243, 0.92); } /* Directory — shop-window / main street (not the Events board) */ .page-hero--directory { position: relative; padding: 1.75rem 0 2.2rem; background: radial-gradient(ellipse 70% 80% at 100% 0%, rgba(244, 230, 200, 0.16), transparent 55%), linear-gradient(155deg, var(--green-deep) 0%, #2f5a3a 48%, var(--green) 100%); border-bottom: none; box-shadow: inset 0 3px 0 var(--antique-cream); color: var(--white); } .page-hero--directory::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0.72rem; background: repeating-linear-gradient( 90deg, var(--green-deep) 0 1.15rem, var(--antique-cream) 1.15rem 2.3rem ); box-shadow: 0 3px 0 rgba(47, 72, 88, 0.16); } .page-hero--directory .section-kicker { color: var(--antique-cream); } .page-hero--directory h1 { color: var(--white); } .page-hero--directory .section-lead { max-width: 38rem; color: rgba(244, 230, 200, 0.92); } .directory-page.page-tight .page-hero--directory { padding-bottom: 2.25rem; } .dir-jumps { display: flex; flex-direction: column; gap: 0.7rem; margin: 1.15rem 0 0; } .dir-jumps-towns, .dir-jumps-shops { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem 0.65rem; } .dir-jumps-towns button { position: relative; margin-top: 0.35rem; padding: 0.42rem 0.85rem 0.4rem; border: 2px solid var(--antique-cream); border-radius: 3px; background: #1e3d28; color: var(--antique-cream); font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; } .dir-jumps-towns button::before { content: ""; position: absolute; top: -7px; left: 50%; width: 8px; height: 7px; margin-left: -4px; background: #c9b48a; border-radius: 1px 1px 0 0; } .dir-jumps-towns button:hover, .dir-jumps-towns button:focus-visible { background: #163022; color: var(--white); } .dir-jumps-towns button:focus-visible { outline: 2px solid var(--antique-cream); outline-offset: 3px; } .dir-jumps-shops button { padding: 0.36rem 0.95rem 0.4rem; border: 0; border-radius: 999px; background: var(--antique-cream); color: var(--green-deep); font-family: var(--font-display); font-size: 1.02rem; font-style: italic; font-weight: 600; cursor: pointer; } .dir-jumps-shops button:hover, .dir-jumps-shops button:focus-visible { background: var(--white); color: var(--green); } .dir-jumps-shops button:focus-visible { outline: 2px solid var(--antique-cream); outline-offset: 3px; } .page-hero--directory .page-meet-ozzi a { color: var(--antique-cream); } .page-hero--directory .page-meet-ozzi a:hover, .page-hero--directory .page-meet-ozzi a:focus-visible { color: var(--white); } .directory-page .filter-bar--directory .filter-bar-head { grid-column: 1 / -1; margin: 0 0 0.2rem; } .directory-page .filter-bar--directory .filter-bar-title { margin: 0; font-size: 1.2rem; color: var(--antique-cream); } .filter-bar--directory .filter-bar-clear-all { color: var(--antique-cream); } .directory-block-kicker { margin: 0 0 0.15rem; } .directory-page .featured-biz { overflow: visible; background: #fffdf8; border: 5px solid #f6efe2; border-radius: 2px; box-shadow: 0 0 0 1px rgba(47, 90, 58, 0.22), 0 16px 34px rgba(47, 72, 88, 0.12); } .directory-page .featured-biz-photo { position: relative; display: block; min-width: 0; overflow: hidden; background: #e8eef2; } .directory-page .featured-biz--lead .featured-biz-photo { height: 100%; min-height: 17rem; } .directory-page .featured-biz--lead .featured-biz-photo img { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; } .directory-page .featured-biz-town { position: absolute; top: 0.7rem; left: 0.7rem; z-index: 1; padding: 0.22rem 0.5rem 0.2rem; background: #1e3d28; color: var(--antique-cream); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; border: 1px solid rgba(244, 230, 200, 0.45); } .directory-page .browse-cta { align-items: center; padding: 1rem 1.1rem; background: linear-gradient(180deg, rgba(244, 230, 200, 0.45), rgba(244, 230, 200, 0.18)); border: 1px solid rgba(47, 90, 58, 0.16); border-radius: var(--radius-lg); } .directory-page .browse-cta p { color: var(--green-deep); font-family: var(--font-display); font-style: italic; font-size: 1.15rem; font-weight: 600; } @media (max-width: 760px) { .dir-jumps-towns button { letter-spacing: 0.08em; font-size: 0.72rem; padding: 0.36rem 0.65rem 0.34rem; } .dir-jumps-shops button { font-size: 0.95rem; padding: 0.32rem 0.75rem 0.34rem; } .directory-page .featured-biz--lead .featured-biz-photo { min-height: 0; } .directory-page .featured-biz--lead .featured-biz-photo img { position: static; height: 11rem; } } .page-hero--ozzi { background: radial-gradient(ellipse 70% 80% at 0% 0%, rgba(241, 183, 27, 0.28), transparent 55%), radial-gradient(ellipse 55% 70% at 100% 100%, rgba(134, 187, 216, 0.18), transparent 50%), linear-gradient(155deg, var(--dark-blue) 0%, #243844 52%, var(--ink) 100%); border-bottom: none; border-top: 4px solid var(--yellow); color: var(--white); } .page-hero--ozzi .section-kicker { color: var(--yellow); } .page-hero--ozzi h1 { color: var(--white); } .page-hero--ozzi .section-lead { color: rgba(232, 240, 243, 0.92); max-width: 38rem; } .page-hero--events { background: repeating-linear-gradient( -11deg, transparent, transparent 28px, rgba(241, 183, 27, 0.05) 28px, rgba(241, 183, 27, 0.05) 29px ), radial-gradient(ellipse 70% 55% at 100% 0%, rgba(241, 183, 27, 0.16), transparent 52%), linear-gradient(180deg, #1a2f3a 0%, #243a48 100%); border-bottom: 0; box-shadow: inset 0 3px 0 var(--antique-cream); color: var(--white); } .page-hero--events .section-kicker { color: var(--yellow); } .page-hero--events h1 { margin: 0.2rem 0 0.65rem; font-size: clamp(2.5rem, 6vw, 4rem); color: var(--white); } .page-hero--events .section-lead { max-width: 38rem; margin-bottom: 0; color: rgba(232, 240, 243, 0.9); } .events-page.page-tight .page-hero--events { padding: 2.35rem 0 2.15rem; } .events-jumps-block { margin: 1.2rem 0 0; } .events-jumps-label { margin: 0 0 0.45rem; font-family: var(--font-body); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--yellow); } .events-jumps { display: flex; flex-wrap: wrap; gap: 0.55rem 0.5rem; align-items: center; margin: 0; } .events-jumps button { display: inline-flex; align-items: center; gap: 0.32rem; padding: 0.34rem 0.72rem; border: 0; border-radius: 0; background: var(--yellow); color: var(--ink); font-family: var(--font-body); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; line-height: 1.2; text-transform: uppercase; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.22); transform: rotate(-1.4deg); cursor: pointer; transition: background 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease); } .events-jumps-cal { width: 0.78rem; height: 0.78rem; flex: 0 0 auto; display: block; } .events-jumps button:nth-child(even) { transform: rotate(1.1deg); } .events-jumps button:nth-child(3n) { transform: rotate(-0.55deg); } .events-jumps button:hover, .events-jumps button:focus-visible { background: var(--yellow-hot); color: var(--ink); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.28); transform: translateY(-1px) rotate(-0.6deg); } .events-jumps button:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; } .events-page .filter-bar--compact .filter-bar-head { margin: 0 0 0.7rem; } .events-page .filter-bar--compact .filter-bar-title { margin: 0; font-size: 1.2rem; color: var(--antique-cream); } .events-page .featured-events { margin-top: 1.85rem; padding-top: 0; border-top: 0; } .events-page .featured-events-grid { display: grid; grid-template-columns: 1fr; gap: 0.55rem; padding: 1rem 1.05rem 1.1rem; background: repeating-linear-gradient( -11deg, transparent, transparent 28px, rgba(241, 183, 27, 0.05) 28px, rgba(241, 183, 27, 0.05) 29px ), linear-gradient(180deg, #1a2f3a 0%, #243a48 100%); border-radius: var(--radius-lg); } .events-page .featured-events-grid .event-row { color: var(--white); } .events-page .event-row--lead .event-title { font-size: clamp(1.3rem, 2.4vw, 1.55rem); } @media (max-width: 760px) { .events-page .featured-events-grid .event-row, .events-page .event-row--lead { grid-template-columns: 4.4rem 1fr; gap: 0.75rem; padding: 0.7rem 0.75rem; } .events-page .featured-events-grid .event-arrow { display: none; } .events-page .event-row--lead .event-title { font-size: 1.2rem; } } @media (max-width: 560px) { .featured-events-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .events-jumps button, .events-jumps button:nth-child(even), .events-jumps button:nth-child(3n), .events-jumps button:hover, .events-jumps button:focus-visible { transform: none; } } /* Articles browse — county weekly / newsprint, not the Events board or Directory shop */ .page-hero--articles { position: relative; background: repeating-linear-gradient( 0deg, transparent, transparent 31px, rgba(47, 72, 88, 0.045) 31px, rgba(47, 72, 88, 0.045) 32px ), linear-gradient(168deg, #f8efd8 0%, var(--antique-cream) 46%, #ead9b4 100%); border-bottom: 0; box-shadow: inset 0 3px 0 var(--dark-blue); color: var(--ink); } .page-hero--articles .section-kicker { color: var(--green-deep); } .page-hero--articles h1 { margin: 0.2rem 0 0.65rem; font-size: clamp(2.5rem, 6vw, 4rem); color: var(--ink); } .page-hero--articles .section-lead { max-width: 40rem; margin-bottom: 0; color: var(--dark-blue); } .articles-page.page-tight .page-hero--articles { padding: 2.35rem 0 2.15rem; } .articles-jumps { display: flex; flex-wrap: wrap; gap: 0.5rem 0.45rem; align-items: center; margin: 1.15rem 0 0; } .articles-jumps button { display: inline-block; padding: 0.34rem 0.7rem; border: 0; border-radius: 0; background: var(--ink); color: var(--antique-cream); font-family: var(--font-body); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; line-height: 1.2; text-transform: uppercase; box-shadow: 3px 3px 0 rgba(47, 72, 88, 0.22); transform: rotate(-1.1deg); cursor: pointer; transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease); } .articles-jumps button:nth-child(even) { transform: rotate(0.9deg); } .articles-jumps button:nth-child(3n) { transform: rotate(-0.4deg); } .articles-jumps button:hover, .articles-jumps button:focus-visible { background: var(--dark-blue); color: var(--white); outline: none; } .articles-jumps button.is-active { background: var(--yellow); color: var(--ink); } .articles-cat-menu { display: none; } .page-hero--articles .page-meet-ozzi a { color: var(--green-deep); } .page-hero--articles .page-meet-ozzi a:hover, .page-hero--articles .page-meet-ozzi a:focus-visible { color: var(--ink); } .articles-toolbar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.65rem 1rem; margin: 0 0 1.25rem; } .articles-count { margin: 0; font-family: var(--font-display); font-size: 1.35rem; font-style: italic; font-weight: 600; color: var(--dark-blue); } .articles-status { margin: 0; color: var(--muted); font-size: 0.95rem; } .articles-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } .article-card { display: grid; grid-template-rows: auto 1fr; min-width: 0; text-decoration: none; color: inherit; background: var(--white); border: 1px solid rgba(47, 72, 88, 0.1); border-radius: var(--radius); box-shadow: 4px 4px 0 rgba(47, 72, 88, 0.1); overflow: hidden; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); } .article-card:hover, .article-card:focus-visible { color: inherit; transform: translateY(-2px); box-shadow: 6px 6px 0 rgba(47, 72, 88, 0.14); outline: none; } .article-card--lead { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: auto; } .article-card-media { position: relative; min-height: 11.5rem; background: linear-gradient(160deg, rgba(47, 72, 88, 0.16), rgba(79, 138, 91, 0.18)), var(--antique-cream); overflow: hidden; } .article-card--lead .article-card-media { min-height: 16rem; } .article-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); } .article-card:hover img { transform: scale(1.04); } .article-card-copy { display: grid; align-content: start; gap: 0.35rem; padding: 1.05rem 1.1rem 1.15rem; } .article-card--lead .article-card-copy { padding: 1.4rem 1.35rem 1.5rem; } .article-card-tag { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); } .article-card-copy h2 { margin: 0; font-family: var(--font-display); font-size: 1.28rem; font-style: italic; font-weight: 600; line-height: 1.25; color: var(--ink); } .article-card--lead .article-card-copy h2 { font-size: clamp(1.55rem, 3vw, 2.1rem); } .article-card-copy p { margin: 0; color: var(--muted); font-size: 0.95rem; } .article-card-date { margin-top: 0.25rem; font-size: 0.82rem; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dark-blue); opacity: 0.72; } .articles-more { display: flex; justify-content: center; margin: 1.75rem 0 0; } .articles-empty { margin: 0; color: var(--muted); } .stories-more { margin: 1.5rem 0 0; } .stories-more a { color: var(--green-deep); font-weight: 700; text-decoration: none; } .stories-more a:hover, .stories-more a:focus-visible { color: var(--ink); } @media (max-width: 960px) { .articles-jumps { display: none; } .articles-cat-menu { display: grid; gap: 0.28rem; width: min(16.5rem, 100%); max-width: 16.5rem; margin: 1rem 0 0; font-family: var(--font-body); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--green-deep); } .page-hero--articles .articles-cat-menu .filter-combo-trigger, .page-hero--articles .articles-cat-menu select { padding: 0.48rem 0.7rem; background: var(--ink); color: var(--antique-cream); border-color: rgba(47, 72, 88, 0.28); font-size: 0.9rem; text-transform: none; letter-spacing: normal; font-weight: 600; } .page-hero--articles .articles-cat-menu .filter-combo-trigger:hover, .page-hero--articles .articles-cat-menu .filter-combo-trigger:focus-visible { outline: none; background: #243844; } } @media (max-width: 760px) { .article-card--lead { grid-template-columns: 1fr; } .articles-grid { grid-template-columns: 1fr; } .articles-cat-menu { width: min(14.5rem, 100%); max-width: 14.5rem; margin-top: 0.85rem; gap: 0.2rem; font-size: 0.66rem; } .page-hero--articles .articles-cat-menu .filter-combo-trigger, .page-hero--articles .articles-cat-menu select { padding: 0.4rem 0.6rem; font-size: 0.86rem; } } @media (prefers-reduced-motion: reduce) { .articles-jumps button, .articles-jumps button:nth-child(even), .articles-jumps button:nth-child(3n), .article-card, .article-card:hover, .article-card img { transform: none; } } html[data-ozzi-page] .page-hero, html[data-ozzi-page] .section, .page-tight .page-hero, .page-tight .section { padding: 1.75rem 0; } .ozzi-hero-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; margin: 1.15rem 0 0; } .ozzi-ask-section { scroll-margin-top: 5.5rem; } .ozzi-ask-wrap { display: grid; gap: 1.5rem; min-width: 0; } .ozzi-ask-wrap > .reveal:not(.ozzi-panel) { max-width: 44rem; } .ozzi-ask-wrap .ozzi-page-panel { width: 100%; max-width: 100%; min-width: 0; } .ozzi-page-panel { padding: 1rem 1.05rem 1.1rem; border-top: 4px solid var(--yellow); width: 100%; max-width: 100%; min-width: 0; } .ozzi-help-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; } .ozzi-help { margin: 0; padding: 1.35rem 1.25rem 1.4rem; background: var(--white); border: 1px solid rgba(51, 101, 138, 0.12); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); } .ozzi-help-mark { display: block; font-family: var(--font-display); font-style: italic; font-size: 1.45rem; font-weight: 600; color: var(--yellow); line-height: 1; margin-bottom: 0.65rem; } .ozzi-help h3 { margin: 0 0 0.45rem; font-size: 1.25rem; font-style: normal; } .ozzi-help p { margin: 0; color: var(--muted); font-size: 0.98rem; } .ozzi-why-band { margin-top: 0; } .ozzi-try { display: flex; flex-wrap: wrap; gap: 0.5rem; } .filter-bar--compact { margin: 0 0 1rem; padding: 0.75rem 0.8rem 0.8rem; gap: 0.5rem 0.65rem; box-shadow: none; } .filter-bar--compact.filter-bar--events { padding: 0.75rem 0.8rem 0.8rem; } .filter-bar--compact .filter-bar-grid { margin-bottom: 0.5rem; gap: 0.5rem 0.65rem; } .filter-bar--compact .filter-bar-dates { padding-top: 0.65rem; gap: 0.5rem 0.65rem; } .filter-bar--compact label { font-size: 0.7rem; gap: 0.28rem; } .filter-bar.filter-bar--compact select, .filter-bar.filter-bar--compact input, .filter-bar.filter-bar--compact .search-field, .filter-bar.filter-bar--compact .filter-combo-trigger, .filter-bar.filter-bar--compact .btn { box-sizing: border-box; height: 2.5rem; min-height: 2.5rem; font-size: 0.9rem; line-height: 1.2; } .filter-bar.filter-bar--compact select, .filter-bar.filter-bar--compact input, .filter-bar.filter-bar--compact .search-field, .filter-bar.filter-bar--compact .filter-combo-trigger { padding: 0.48rem 0.6rem; } .filter-bar.filter-bar--compact input[type="search"] { -webkit-appearance: none; appearance: none; } .filter-bar.filter-bar--compact .btn { padding: 0.48rem 0.9rem; } .filter-bar--compact .filter-show-btn { min-width: 0; } .browse-page .directory-results-head { margin: 0.35rem 0 0.65rem; } .browse-page .directory-results-title { font-size: clamp(1.25rem, 2.2vw, 1.55rem); } .browse-page .directory-count, .browse-page .directory-status, .browse-page .events-status { font-size: 0.86rem; } .browse-page .events-status { margin: 0 0 0.65rem; } .featured-events--compact { margin-top: 0.35rem; padding-top: 0.85rem; border-top: 1px solid rgba(47, 72, 88, 0.1); } .featured-events--compact .featured-events-head { margin-bottom: 0.7rem; } .featured-events--compact .section-title { margin: 0.1rem 0 0; font-size: clamp(1.35rem, 2.4vw, 1.7rem); } .browse-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; } .browse-list .featured-events-loading, .browse-list .results-event-card--lead { grid-column: 1 / -1; } .browse-list .featured-events-loading { margin: 0; } .browse-list .results-event-card--lead { padding: 0.95rem 1rem; gap: 0.45rem; } .browse-list .results-event-card--lead .results-event-main h3 { font-size: clamp(1.15rem, 2.2vw, 1.45rem); } .browse-list .directory-result-card { grid-template-columns: 56px 1fr auto; gap: 0.65rem; padding: 0.5rem; } .browse-list .directory-result-thumb { width: 56px; height: 56px; } .browse-list .directory-result-main h3 { font-size: 1.02rem; } .browse-list .directory-result-main p { font-size: 0.84rem; } .browse-list .results-event-card { min-width: 0; padding: 0.7rem 0.8rem; gap: 0.35rem; } .browse-list .results-event-main, .browse-list .results-event-main h3, .browse-list .results-event-main p, .browse-list .results-event-cat { max-width: 100%; overflow-wrap: anywhere; } .browse-list .results-event-main h3 { font-size: 1.05rem; margin-bottom: 0.15rem; } .browse-list .results-event-main p, .browse-list .results-event-when span { font-size: 0.84rem; } .browse-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.65rem 1rem; margin-top: 1.35rem; padding-top: 0.9rem; border-top: 1px solid rgba(47, 72, 88, 0.1); } .browse-cta p { margin: 0; color: var(--muted); font-size: 0.92rem; } .browse-cta .btn { min-height: 0; padding: 0.48rem 0.9rem; font-size: 0.9rem; } @media (max-width: 760px) { .browse-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; } .browse-list .results-event-card--lead { padding: 0.7rem 0.75rem; } .browse-list .results-event-card { padding: 0.55rem 0.55rem; gap: 0.28rem; } .browse-list .results-event-cat { margin-bottom: 0.28rem; padding: 0.14rem 0.35rem; font-size: 0.62rem; } .browse-list .results-event-main h3 { font-size: 0.92rem; } .browse-list .results-event-main p, .browse-list .results-event-when span, .browse-list .results-event-when strong { font-size: 0.75rem; } } .about-prose { max-width: 42rem; } .about-prose .section-title { font-size: 1.85rem; margin-top: 2.5rem; } .legal-prose { max-width: 46rem; } .legal-prose p, .legal-prose li { color: var(--ink); } .legal-prose h2 { font-size: 1.38rem; font-style: italic; margin: 1.65rem 0 0.5rem; letter-spacing: -0.02em; } .legal-prose h3 { font-family: var(--font-body); font-size: 1.02rem; font-style: normal; font-weight: 700; margin: 1.15rem 0 0.4rem; } .legal-prose ul, .legal-prose ol { margin: 0 0 1rem; padding-left: 1.2rem; } .legal-prose li { margin: 0 0 0.4rem; } .legal-prose li ul, .legal-prose li ol { margin: 0.35rem 0 0.15rem; } .legal-prose a { color: var(--green-deep); font-weight: 650; } .legal-prose a:hover, .legal-prose a:focus-visible { color: var(--green); } .legal-prose code { font-size: 0.88em; font-family: ui-monospace, "Cascadia Code", "Segoe UI Mono", Menlo, Consolas, monospace; background: rgba(47, 72, 88, 0.06); padding: 0.08em 0.28em; border-radius: 4px; } .legal-table-wrap { overflow-x: auto; margin: 0.65rem 0 1.15rem; border: 1px solid rgba(51, 101, 138, 0.14); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-soft); } .legal-prose table { width: 100%; min-width: 36rem; border-collapse: collapse; font-size: 0.88rem; line-height: 1.45; } .legal-prose th, .legal-prose td { padding: 0.7rem 0.85rem; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(51, 101, 138, 0.12); } .legal-prose th { font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green-deep); background: rgba(232, 240, 243, 0.72); } .legal-prose tr:last-child td { border-bottom: 0; } .legal-disclaimer { font-size: 0.98rem; letter-spacing: 0.01em; } /* Filters — interactive, so light surface OK */ .filter-bar { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 0.75rem; margin: 2rem 0 2.5rem; padding: 1.15rem; background: var(--white); border: 1px solid rgba(51, 101, 138, 0.12); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); } .filter-bar--events { display: block; padding: 1.5rem; background: var(--dark-blue); border-color: rgba(244, 230, 200, 0.32); box-shadow: inset 0 2px 0 var(--antique-cream); } .filter-bar--events .filter-bar-title { color: var(--antique-cream); } .filter-bar--events .filter-bar-dates { border-top-color: rgba(134, 187, 216, 0.28); } .filter-bar--events select, .filter-bar--events input, .filter-bar--events .search-field, .filter-bar--events .filter-combo-trigger { color-scheme: light; } .filter-bar-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.85rem; margin: 0 0 1.15rem; } .filter-bar-head .filter-bar-title { margin: 0; } .filter-bar-clear-all { flex: 0 0 auto; margin: 0; padding: 0; border: 0; background: none; font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: inherit; cursor: pointer; opacity: 0.72; } .filter-bar-clear-all:hover, .filter-bar-clear-all:focus-visible { opacity: 1; text-decoration: underline; outline: none; } .filter-bar--events .filter-bar-clear-all { color: var(--antique-cream); } .filter-bar-title { margin: 0 0 1.15rem; font-family: var(--font-display); font-size: 1.35rem; font-style: italic; font-weight: 600; color: var(--dark-blue); } .filter-bar-grid, .filter-bar-dates { display: grid; gap: 1rem 1.25rem; align-items: end; } .filter-bar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 1.25rem; } .filter-bar-dates { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; padding-top: 1.15rem; border-top: 1px solid rgba(51, 101, 138, 0.12); } .filter-bar label { display: grid; gap: 0.4rem; min-width: 0; font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .filter-bar.filter-bar--events label, .filter-bar.filter-bar--events .filter-combo-label { color: #f4f8fa; } .filter-bar select, .filter-bar input, .search-field { width: 100%; min-width: 0; max-width: 100%; padding: 0.75rem 0.85rem; border: 1.5px solid rgba(51, 101, 138, 0.22); border-radius: var(--radius); font-family: var(--font-body); font-size: 1rem; background: var(--fog); color: var(--ink); } .filter-bar select { text-overflow: ellipsis; } .filter-combo-label { position: relative; } .filter-combo { position: relative; min-width: 0; } .filter-combo-native { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; appearance: none !important; } .filter-combo-trigger { display: flex; align-items: center; justify-content: space-between; gap: 0.65rem; width: 100%; min-width: 0; padding: 0.75rem 0.85rem; border: 1.5px solid rgba(51, 101, 138, 0.22); border-radius: var(--radius); font-family: var(--font-body); font-size: 1rem; font-weight: 500; text-align: left; text-transform: none; letter-spacing: normal; background: var(--fog); color: var(--ink); cursor: pointer; } .filter-combo-trigger > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .filter-field-head { display: flex; align-items: center; justify-content: space-between; gap: 0.35rem; min-width: 0; } .filter-field-title { min-width: 0; } .filter-field-clear { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin: -0.2rem -0.15rem -0.2rem 0; padding: 0; border: 0; border-radius: 999px; background: transparent; color: inherit; opacity: 0; visibility: hidden; pointer-events: none; font-family: inherit; font-size: 1.2rem; font-weight: 500; line-height: 1; letter-spacing: normal; text-transform: none; cursor: pointer; } .filter-field-clear.is-visible { opacity: 0.85; visibility: visible; pointer-events: auto; } .filter-field-clear.is-visible:hover, .filter-field-clear.is-visible:focus-visible { opacity: 1; background: rgba(47, 72, 88, 0.12); outline: none; } .filter-bar.filter-bar--events .filter-field-clear.is-visible:hover, .filter-bar.filter-bar--events .filter-field-clear.is-visible:focus-visible, .filter-bar.filter-bar--directory .filter-field-clear.is-visible:hover, .filter-bar.filter-bar--directory .filter-field-clear.is-visible:focus-visible { background: rgba(255, 255, 255, 0.16); } .filter-combo-chevron, .filter-combo-duck-arrow { flex: 0 0 auto; width: 0.55rem; height: 0.55rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.18s var(--ease); } .filter-combo.is-open .filter-combo-chevron { transform: rotate(-135deg); margin-top: 0.2rem; } .filter-combo-panel { position: absolute; top: calc(100% + 0.35rem); left: 0; right: 0; z-index: 40; max-height: min(22rem, 60vh); overflow: auto; padding: 0.35rem; border: 1.5px solid rgba(51, 101, 138, 0.18); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-soft); } .filter-combo-panel[hidden] { display: none !important; } .filter-combo-option { display: block; width: 100%; padding: 0.65rem 0.75rem; border: 0; border-radius: calc(var(--radius) - 2px); background: transparent; color: var(--ink); font-family: var(--font-body); font-size: 0.95rem; font-weight: 500; text-align: left; text-transform: none; letter-spacing: normal; cursor: pointer; } .filter-combo-option:hover, .filter-combo-option:focus-visible { background: rgba(51, 101, 138, 0.08); outline: none; } .filter-combo-option.is-selected { background: rgba(79, 138, 91, 0.14); color: var(--green-deep); font-weight: 700; } .filter-combo-option.is-unavailable, .filter-combo-option:disabled { color: #8a9aa3; cursor: not-allowed; font-weight: 500; } .filter-combo-option.is-unavailable:hover, .filter-combo-option.is-unavailable:focus-visible, .filter-combo-option:disabled:hover, .filter-combo-option:disabled:focus-visible { background: transparent; color: #8a9aa3; } .filter-combo-option.is-unavailable.is-selected { background: rgba(79, 138, 91, 0.08); color: #7d9086; } .filter-date-trigger.is-empty { color: #6b7c86; } .filter-date-panel { width: max(100%, 17.75rem); max-width: min(20rem, calc(100vw - 2rem)); max-height: none; overflow: visible; padding: 0.75rem 0.8rem 0.85rem; } .filter-date-nav { display: grid; grid-template-columns: 2rem 1fr 2rem; align-items: center; gap: 0.35rem; margin-bottom: 0.65rem; } .filter-date-month { margin: 0; font-family: var(--font-body); font-size: 0.95rem; font-weight: 700; text-align: center; color: var(--ink); } .filter-date-nav-btn { width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: calc(var(--radius) - 2px); background: transparent; color: var(--ink); font-size: 1.35rem; line-height: 1; cursor: pointer; } .filter-date-nav-btn:hover, .filter-date-nav-btn:focus-visible { background: rgba(51, 101, 138, 0.08); outline: none; } .filter-date-weekdays, .filter-date-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.15rem; } .filter-date-weekdays { margin-bottom: 0.2rem; } .filter-date-weekdays span { padding: 0.2rem 0; font-family: var(--font-body); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-align: center; text-transform: uppercase; color: var(--muted); } .filter-date-day { display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1; width: 100%; padding: 0; border: 0; border-radius: calc(var(--radius) - 4px); background: transparent; color: var(--ink); font-family: var(--font-body); font-size: 0.88rem; font-weight: 700; line-height: 1; cursor: pointer; } .filter-date-day:not(.is-unavailable):not(.is-pad)::after { content: ""; width: 0.26rem; height: 0.26rem; margin-top: 0.12rem; border-radius: 50%; background: currentColor; opacity: 0.42; } .filter-date-day.is-pad { visibility: hidden; pointer-events: none; } .filter-date-day:hover, .filter-date-day:focus-visible { background: rgba(51, 101, 138, 0.08); outline: none; } .filter-date-day.is-today:not(.is-selected) { box-shadow: inset 0 0 0 1.5px rgba(51, 101, 138, 0.35); } .filter-date-day.is-selected { background: rgba(79, 138, 91, 0.16); color: var(--green-deep); } .filter-date-day.is-unavailable, .filter-date-day:disabled { color: #c8d1d6; cursor: not-allowed; font-weight: 500; } .filter-date-day.is-unavailable:hover, .filter-date-day.is-unavailable:focus-visible, .filter-date-day:disabled:hover, .filter-date-day:disabled:focus-visible { background: transparent; color: #b0bbc2; } .filter-date-day.is-unavailable.is-selected, .filter-date-day:disabled.is-selected { background: rgba(79, 138, 91, 0.08); color: #7d9086; } .filter-date-empty { margin: 0.55rem 0 0; font-family: var(--font-body); font-size: 0.78rem; font-weight: 500; text-align: center; color: var(--muted); } .filter-combo-duck-header.is-unavailable { color: #8a9aa3; } .filter-combo-duck-header { display: flex; align-items: center; justify-content: space-between; gap: 0.65rem; width: 100%; padding: 0.65rem 0.75rem; border: 0; border-radius: calc(var(--radius) - 2px); background: transparent; color: var(--ink); font-family: var(--font-body); font-size: 0.95rem; font-weight: 700; text-align: left; text-transform: none; letter-spacing: normal; cursor: pointer; } .filter-combo-duck-header:hover, .filter-combo-duck-header:focus-visible { background: rgba(51, 101, 138, 0.08); outline: none; } .filter-combo-duck-label { min-width: 0; } .filter-combo-duck-header.is-expanded .filter-combo-duck-arrow { transform: rotate(-135deg); margin-top: 0.15rem; } .filter-combo-duck-sports { padding: 0.1rem 0 0.25rem 0.85rem; } .filter-combo-option--sport { font-size: 0.92rem; color: var(--muted-ink, #3d4f5c); } .filter-show-btn { white-space: nowrap; min-width: 11.5rem; justify-self: stretch; } /* Events modals — results list + detail */ .event-modal[hidden] { display: none !important; } .event-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 1.25rem; } .event-modal--detail { z-index: 90; } .event-modal-backdrop { position: absolute; inset: 0; background: rgba(26, 44, 54, 0.55); backdrop-filter: blur(2px); } .event-modal-panel { position: relative; z-index: 1; display: flex; flex-direction: column; width: min(100%, 34rem); max-height: min(88vh, 44rem); overflow: hidden; background: var(--white); border: 1px solid rgba(47, 72, 88, 0.12); border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(26, 44, 54, 0.28); } .event-modal-panel--results { width: min(100%, 42rem); max-height: min(88vh, 48rem); } .events-page .event-modal-panel--results.event-modal-panel--explore { background: repeating-linear-gradient( -11deg, transparent, transparent 28px, rgba(241, 183, 27, 0.05) 28px, rgba(241, 183, 27, 0.05) 29px ), linear-gradient(180deg, #1a2f3a 0%, #243a48 100%); box-shadow: inset 0 3px 0 var(--antique-cream); } .event-modal-panel--results .outdoors-modal-body { display: grid; gap: 0.55rem; background: transparent; } .event-modal-panel--results .event-row { color: var(--white); } .event-modal-panel--results .event-title { font-size: 1.12rem; } .event-modal-panel--results .event-modal-empty { color: rgba(232, 240, 243, 0.82); } @media (max-width: 760px) { .event-modal-panel--results .event-row { grid-template-columns: 4.4rem 1fr; gap: 0.75rem; padding: 0.7rem 0.75rem; } .event-modal-panel--results .event-arrow { display: none; } } .event-modal-panel--browse { width: min(100%, 54rem); max-height: min(92vh, 56rem); } .event-modal-panel--explore { width: min(100%, 46rem); max-height: min(86vh, 42rem); border: 0; background: var(--cream-soft); box-shadow: 0 28px 70px rgba(26, 44, 54, 0.38); } .event-modal-panel--outdoors { width: min(100%, 58rem); max-height: min(90vh, 52rem); border: 1px solid rgba(241, 183, 27, 0.28); border-top: 4px solid var(--yellow); background: var(--dark-blue); box-shadow: 0 32px 80px rgba(26, 44, 54, 0.55); } .event-modal:has(.event-modal-panel--ozzi) { padding: max(0.5rem, env(safe-area-inset-top)) max(0.5rem, env(safe-area-inset-right)) max(0.5rem, env(safe-area-inset-bottom)) max(0.5rem, env(safe-area-inset-left)); place-items: center stretch; } .event-modal-panel--ozzi { width: 100%; max-width: none; max-height: min(92dvh, calc(100dvh - 1rem)); border-top: 4px solid var(--yellow); align-self: center; } .event-modal-panel--ozzi .outdoors-modal-header { padding: 0.55rem 2.6rem 0.5rem 0.85rem; } .event-modal-panel--ozzi .outdoors-modal-kicker { margin-bottom: 0.05rem; font-size: 0.62rem; } .event-modal-panel--ozzi .outdoors-modal-header h2 { margin: 0; font-size: clamp(1.05rem, 2.4vw, 1.28rem); } .ozzi-modal-body { padding: 0.7rem 0.75rem 0.8rem; flex: 1; min-height: 0; display: flex; flex-direction: column; } .ozzi-modal-panel { padding: 0; border: 0; box-shadow: none; background: transparent; flex: 1; min-height: 0; height: 100%; } .event-modal-panel--ozzi .ozzi-thread { height: 24.5rem; flex: 0 0 auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; } .event-modal-panel--ozzi .ozzi-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.45rem; margin-top: 0; width: 100%; flex-shrink: 0; } .event-modal-panel--ozzi .ozzi-form label { display: none; } .event-modal-panel--ozzi .ozzi-form input { grid-column: 1 / -1; width: 100%; min-width: 0; padding: 0.65rem 0.8rem; } .event-modal-panel--ozzi .ozzi-form .btn { width: 100%; } .event-modal-panel--ozzi .ozzi-suggest { margin: 0 0 0.55rem; } .event-modal-panel--ozzi .ozzi-suggest-label { font-size: 0.8rem; } .event-modal-panel--ozzi .ozzi-prompts { margin: 0; gap: 0.35rem; } .event-modal-panel--ozzi .prompt-chip { font-size: 0.82rem; padding: 0.35rem 0.7rem; } .event-modal-panel--ozzi .ozzi-welcome, .event-modal-panel--ozzi .ozzi-turn-bot, .event-modal-panel--ozzi .ozzi-response { padding: 0.45rem 0.55rem; } .event-modal-panel--ozzi .ozzi-links { margin-top: 0.7rem; gap: 0.55rem 0.9rem; font-size: 0.86rem; } .event-modal-panel--ozzi .ozzi-links-nav { gap: 0.55rem 0.9rem; } @media (min-width: 721px) { .event-modal:has(.event-modal-panel--ozzi) { padding: max(0.65rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right)) max(0.65rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left)); } .event-modal-panel--ozzi .outdoors-modal-header { padding: 0.6rem 2.75rem 0.55rem 1rem; } .ozzi-modal-body { padding: 0.8rem 1rem 0.95rem; } .event-modal-panel--ozzi .ozzi-form { grid-template-columns: minmax(0, 1fr); } .event-modal-panel--ozzi .ozzi-form .btn { width: auto; min-width: 7.25rem; justify-self: end; } } .filter-bar--modal { margin: 0 0 1.15rem; padding: 1.1rem 1.2rem; background: rgba(242, 246, 244, 0.85); border: 1px solid rgba(51, 101, 138, 0.12); border-radius: var(--radius-lg); box-shadow: none; } .filter-bar--modal.filter-bar--directory { margin-bottom: 1.15rem; } /* Explore events modal — dedicated layout (avoids .filter-bar 5-col grid). */ .explore-filter-bar { display: grid; gap: 1rem; margin: 0 0 1.15rem; padding: 1.2rem 1.25rem 1.3rem; background: rgba(242, 246, 244, 0.9); border: 1px solid rgba(51, 101, 138, 0.14); border-radius: var(--radius-lg); } .explore-filter-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem 1.1rem; align-items: end; } .explore-filter-row--directory { margin-bottom: 0.15rem; } .explore-filter-row--refine { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 0; } .explore-filter-row--dates { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-top: 1rem; border-top: 1px solid rgba(51, 101, 138, 0.14); } .explore-filter-bar--city-only label:has([data-explore-dir-q]), .explore-filter-bar--city-only label:has([data-explore-dir-category]) { display: none; } .explore-filter-bar--city-only .explore-filter-row--directory { grid-template-columns: minmax(0, 1fr); } .explore-filter-bar--no-category label:has([data-explore-evt-category]) { display: none; } .explore-filter-bar--no-category .explore-filter-row:not(.explore-filter-row--dates) { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 760px) { .explore-filter-bar--no-category .explore-filter-row:not(.explore-filter-row--dates) { grid-template-columns: 1fr; } } .explore-filter-bar label { display: grid; gap: 0.4rem; min-width: 0; font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .explore-filter-bar .filter-combo-trigger, .explore-filter-bar select, .explore-filter-bar input { width: 100%; min-width: 0; padding: 0.75rem 0.85rem; border: 1.5px solid rgba(51, 101, 138, 0.22); border-radius: var(--radius); font-family: var(--font-body); font-size: 1rem; background: var(--fog); color: var(--ink); } .explore-filter-bar select option:disabled, .explore-filter-bar select option[data-unavailable="1"] { color: #8a9aa3; } .explore-filter-bar select.is-unavailable { color: #8a9aa3; background: #e4e8ea; border-color: rgba(51, 101, 138, 0.12); } .explore-filter-bar label:has(select.is-unavailable) { opacity: 0.72; } .explore-modal-footer { display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: center; justify-content: space-between; } .explore-modal-footer .btn-ghost { color: var(--dark-blue); border-color: rgba(47, 72, 88, 0.35); background: transparent; text-decoration: none; } .explore-modal-footer .btn-ghost:hover { color: var(--white); background: var(--dark-blue); border-color: var(--dark-blue); } .event-modal-close { position: absolute; top: 0.85rem; right: 0.9rem; z-index: 3; width: 2.25rem; height: 2.25rem; border: 0; border-radius: var(--radius); background: var(--white); color: var(--muted); font-size: 1.6rem; line-height: 1; cursor: pointer; } .event-modal-close:hover, .event-modal-close:focus-visible { color: var(--dark-blue); background: rgba(47, 72, 88, 0.08); } .event-modal-header { flex-shrink: 0; position: relative; z-index: 2; padding: 1.5rem 3rem 1rem 1.5rem; background: var(--white); border-bottom: 1px solid rgba(47, 72, 88, 0.08); } .event-modal-header h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 1.85rem); } .event-modal-subtitle { margin: 0.35rem 0 0; color: var(--muted); } .event-modal-category { display: inline-block; margin-bottom: 0.55rem; padding: 0.28rem 0.55rem; border-radius: var(--radius); background: var(--blue); color: var(--white); font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .event-modal-body { display: grid; gap: 0.85rem; flex: 1 1 auto; min-height: 0; overflow: auto; padding: 1.15rem 1.5rem 1.25rem; overscroll-behavior: contain; } .event-modal-empty { margin: 0; color: var(--muted); } .event-detail-row strong { display: block; margin-bottom: 0.2rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green); } .event-detail-row p { margin: 0; color: var(--ink); } .event-detail-maps { display: inline-block; margin-top: 0.35rem; font-size: 0.92rem; font-weight: 600; text-decoration: none; } .trinket-preview-image { margin: 0 0 1.15rem; border-radius: var(--radius-lg); overflow: hidden; background: var(--mist); } .trinket-preview-image img { display: block; width: 100%; height: min(34vh, 240px); object-fit: cover; } .event-modal-footer { flex-shrink: 0; margin-top: 0; padding: 1rem 1.5rem 1.25rem; border-top: 1px solid rgba(47, 72, 88, 0.12); background: var(--white); } .event-modal-footer .btn { width: 100%; justify-content: center; } .results-event-card { display: grid; gap: 0.55rem; width: 100%; text-align: left; padding: 0.95rem 1rem; border: 1px solid rgba(51, 101, 138, 0.14); border-left: 4px solid var(--blue); border-radius: var(--radius); background: rgba(242, 246, 244, 0.65); color: inherit; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s var(--ease); } .results-event-card:hover, .results-event-card:focus-visible { background: rgba(134, 187, 216, 0.16); border-color: rgba(51, 101, 138, 0.28); transform: translateY(-1px); } .results-event-cat { display: inline-block; margin-bottom: 0.4rem; padding: 0.2rem 0.45rem; border-radius: var(--radius); color: var(--white); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .results-event-main h3 { margin: 0 0 0.25rem; font-family: var(--font-display); font-size: 1.15rem; font-style: italic; font-weight: 600; color: var(--dark-blue); } .results-event-main p { margin: 0; color: var(--muted); font-size: 0.95rem; } .results-event-when { display: flex; flex-wrap: wrap; gap: 0.35rem 0.85rem; align-items: baseline; } .results-event-when strong { color: var(--blue); font-size: 0.95rem; } .results-event-when span { color: var(--muted); font-size: 0.88rem; } .filter-bar--directory { grid-template-columns: 1.6fr 1fr 1fr auto; align-items: end; } .filter-bar.filter-bar--directory:not(.filter-bar--modal) { background: var(--green-deep); border-color: rgba(244, 230, 200, 0.32); box-shadow: inset 0 2px 0 var(--antique-cream); } .filter-bar.filter-bar--directory:not(.filter-bar--modal) label { color: var(--white); } .filter-bar--directory .btn { align-self: end; } .filter-bar--directory .filter-show-btn { min-width: 13rem; } .directory-results-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1.25rem; margin: 1.75rem 0 1rem; } .directory-results-title { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: clamp(1.45rem, 2.4vw, 1.85rem); color: var(--dark-blue); letter-spacing: -0.02em; } .directory-count { margin: 0; color: var(--muted); font-size: 0.92rem; } .directory-status { margin: 0 0 1rem; color: var(--muted); font-size: 0.95rem; } .directory-status.is-error { color: #8a3b2a; } .btn-directory-more { background: var(--dark-blue); color: var(--white); border: 1.5px solid var(--dark-blue); } .btn-directory-more:hover { background: var(--blue); border-color: var(--blue); color: var(--white); } .directory-results-footer { display: flex; justify-content: center; } .directory-results-footer .btn-directory-more[hidden] { display: none; } .directory-result-card { display: grid; grid-template-columns: 72px 1fr auto; gap: 0.85rem; align-items: center; width: 100%; text-align: left; padding: 0.75rem; border: 1px solid rgba(51, 101, 138, 0.14); border-radius: var(--radius); background: rgba(242, 246, 244, 0.65); color: var(--ink); text-decoration: none; transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s var(--ease); } .directory-result-card:hover, .directory-result-card:focus-visible { background: var(--antique-cream); color: var(--ink); border-color: rgba(47, 72, 88, 0.22); transform: translateY(-1px); outline: none; } .directory-result-card:hover .directory-result-main h3, .directory-result-card:focus-visible .directory-result-main h3 { color: var(--dark-blue); } .directory-result-card:hover .directory-result-main p, .directory-result-card:focus-visible .directory-result-main p { color: var(--muted); } .directory-result-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: calc(var(--radius) - 2px); background: #e8eef2; } .directory-result-cat { display: inline-block; margin-bottom: 0.3rem; padding: 0.18rem 0.45rem; border-radius: var(--radius); background: var(--green); color: var(--white); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .directory-result-main h3 { margin: 0 0 0.2rem; font-family: var(--font-display); font-size: 1.12rem; font-style: italic; font-weight: 600; color: var(--dark-blue); } .directory-result-main p { margin: 0; color: var(--muted); font-size: 0.92rem; } .directory-result-arrow { color: var(--dark-blue); font-size: 1.15rem; opacity: 0.55; } .listing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .featured-biz-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.15rem; } .featured-biz { display: flex; flex-direction: column; min-width: 0; min-height: 100%; overflow: hidden; background: var(--white); border: 1px solid rgba(51, 101, 138, 0.12); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); text-decoration: none; color: inherit; transition: transform 0.25s var(--ease), box-shadow 0.25s; } .featured-biz:hover, .featured-biz:focus-visible { transform: translateY(-4px); box-shadow: 0 22px 40px rgba(47, 72, 88, 0.16); color: inherit; } .featured-biz img { width: 100%; height: 13.5rem; object-fit: cover; background: linear-gradient(145deg, #d7e4ec, #eef4f7); } .featured-biz.featured-biz--lead { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(16rem, 0.9fr) minmax(0, 1.2fr); align-items: stretch; } .featured-biz--lead img { width: 100%; height: 100%; min-height: 17rem; object-fit: cover; } .featured-biz--lead .featured-biz-body { justify-content: center; gap: 0.45rem; padding: 1.45rem 1.65rem 1.55rem 1.4rem; } .featured-biz--lead .featured-biz-body h3 { font-size: clamp(1.55rem, 2.5vw, 2.05rem); } .featured-biz-excerpt { margin: 0.15rem 0 0; color: var(--muted); font-size: 0.98rem; line-height: 1.45; } .featured-biz-more { margin-top: 0.35rem; font-size: 0.92rem; font-weight: 700; color: var(--green); } .featured-biz-body { display: flex; flex-direction: column; gap: 0.28rem; padding: 1.05rem 1.1rem 1.2rem; flex: 1; } .featured-biz-cat { display: inline-block; margin-bottom: 0.2rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green); } .featured-biz-body h3 { margin: 0; font-size: 1.35rem; font-style: italic; letter-spacing: -0.02em; color: var(--dark-blue); } .featured-biz-cat, .featured-biz-body h3, .featured-biz-body p { max-width: 100%; overflow-wrap: anywhere; } .featured-biz-body p { margin: 0; color: var(--muted); font-size: 0.95rem; } .listing-media-fallback { background: linear-gradient(145deg, #d7e4ec, #eef4f7); } .listing { background: var(--white); border: 1px solid rgba(51, 101, 138, 0.1); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: inherit; transition: transform 0.25s var(--ease), box-shadow 0.25s; } .listing:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); } .listing img { width: 100%; height: 180px; object-fit: cover; } .listing-body { padding: 1.1rem 1.15rem 1.25rem; } .listing-body h3 { margin: 0 0 0.35rem; font-size: 1.25rem; font-style: italic; letter-spacing: -0.02em; } .listing-meta { color: var(--muted); font-size: 0.92rem; margin: 0; } .listing-badge { display: inline-block; margin-top: 0.75rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--green); } /* Weather page — live forecast + environmental dials */ .weather-page { position: relative; padding-bottom: 1.75rem; } .weather-city-bar { margin-bottom: 1.75rem; padding-top: 1.15rem; } .weather-city-label { margin: 0 0 0.65rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); } .weather-cities { display: flex; flex-wrap: wrap; gap: 0.45rem 0.35rem; } .weather-city-bar .filter-combo { display: none; width: 100%; max-width: 22rem; } .weather-city-select { display: none; width: 100%; max-width: 22rem; min-height: 2.75rem; padding: 0.55rem 2.2rem 0.55rem 0.8rem; border: 1.5px solid rgba(51, 101, 138, 0.25); border-radius: var(--radius); background: var(--fog) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%232f4858' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 0.85rem center; color: var(--ink); font-family: var(--font-body); font-size: 1rem; font-weight: 600; appearance: none; -webkit-appearance: none; } .weather-city { appearance: none; border: 0; background: transparent; color: var(--muted); font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; padding: 0.35rem 0.7rem; cursor: pointer; border-bottom: 2px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; } .weather-city:hover, .weather-city:focus-visible { color: var(--dark-blue); } .weather-city.is-active { color: var(--dark-blue); border-bottom-color: var(--yellow); } .weather-stage { display: grid; gap: 1.75rem; } .weather-forecast-block { min-width: 0; } .weather-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.85rem; } .weather-block-head h2 { margin: 0; font-size: 1.55rem; } .weather-block-head p { margin: 0; font-weight: 600; color: var(--muted); } .weather-forecast { min-height: 6.5rem; overflow: hidden; border: 1px solid rgba(47, 72, 88, 0.12); background: rgba(255, 255, 255, 0.55); } .weather-forecast .weatherwidget-io { display: block; width: 100%; } .weather-env { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem 1.5rem; padding-top: 0.5rem; border-top: 1px solid rgba(47, 72, 88, 0.12); } .env-dial { min-width: 0; text-align: center; } .env-dial h3 { margin: 0 0 0.35rem; font-family: var(--font-body); font-size: 0.82rem; font-weight: 700; font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); } .env-dial-face { width: min(100%, 168px); margin: 0 auto; } .env-dial-face svg { display: block; width: 100%; height: auto; } .env-dial-value { margin: 0.15rem 0 0.2rem; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; font-style: italic; color: var(--dark-blue); line-height: 1.25; } .env-dial-meta { margin: 0; font-size: 0.82rem; color: var(--muted); } .env-dial-source { margin: 0.35rem 0 0; font-size: 0.72rem; color: rgba(84, 112, 126, 0.85); } @media (max-width: 960px) { .weather-env { gap: 0.75rem 0.65rem; } .env-dial-face { width: min(100%, 128px); } .env-dial h3 { font-size: 0.68rem; letter-spacing: 0.06em; } .env-dial-value { font-size: 0.92rem; } .env-dial-meta { font-size: 0.74rem; } .env-dial-source { font-size: 0.62rem; } } @media (max-width: 480px) { .weather-env { gap: 0.55rem 0.4rem; padding-top: 0.35rem; } .env-dial-face { width: min(100%, 104px); } .env-dial h3 { font-size: 0.62rem; letter-spacing: 0.04em; } .env-dial-value { margin-top: 0.05rem; font-size: 0.85rem; } } .weather-credit { margin: 2rem 0 0; font-size: 0.85rem; color: var(--muted); max-width: 48rem; } .wx-page.page-tight .page-hero--weather { padding-bottom: 2.15rem; } .wx-page .weather-block-kicker { margin: 0 0 0.15rem; } .wx-page .weather-block-head h2 { font-size: clamp(1.45rem, 2.4vw, 1.85rem); } .wx-page .weather-city-bar { margin-top: 0.35rem; padding: 0.95rem 1rem 1rem; background: rgba(255, 255, 255, 0.62); border: 1px solid rgba(47, 72, 88, 0.1); border-radius: var(--radius-lg); } .wx-page .weather-city { border: 1px solid rgba(47, 72, 88, 0.12); border-radius: 999px; background: rgba(255, 255, 255, 0.78); color: var(--dark-blue); } .wx-page .weather-city:hover, .wx-page .weather-city:focus-visible { background: var(--antique-cream); color: var(--dark-blue); } .wx-page .weather-city.is-active { background: var(--dark-blue); color: var(--antique-cream); border-color: var(--dark-blue); border-bottom-color: var(--dark-blue); } .wx-page .weather-forecast { border: 5px solid var(--antique-cream); border-radius: 2px; box-shadow: 0 0 0 1px rgba(47, 72, 88, 0.2), 0 16px 34px rgba(47, 72, 88, 0.1); background: var(--dark-blue); } .wx-page .weather-env { padding-top: 0; border-top: 0; } .wx-page .env-dial { padding: 0.85rem 0.7rem 1rem; background: #fffdf8; border: 4px solid var(--antique-cream); border-radius: 2px; box-shadow: 0 0 0 1px rgba(47, 72, 88, 0.12); } .wx-page .wx-ask { margin: 1.5rem 0 0; padding: 1rem 1.1rem; background: linear-gradient(180deg, rgba(244, 230, 200, 0.5), rgba(244, 230, 200, 0.2)); border: 1px solid rgba(47, 90, 58, 0.14); border-radius: var(--radius-lg); color: var(--dark-blue); font-size: 1.02rem; } .wx-page .wx-ask a { color: var(--green-deep); font-weight: 650; } @media (max-width: 760px) { .wx-jumps button { font-size: 0.98rem; padding: 0.34rem 0.8rem 0.36rem; } .wx-page .weather-city-bar { padding: 0.75rem 0.8rem 0.85rem; } .wx-page .env-dial { padding: 0.55rem 0.35rem 0.7rem; border-width: 3px; } } /* Title sponsor — slim in-flow bar, not sticky */ .sponsor-bar { background: linear-gradient(90deg, rgba(79, 138, 91, 0.1), rgba(241, 183, 27, 0.1) 55%, rgba(134, 187, 216, 0.12)); border-top: 1px solid rgba(79, 138, 91, 0.22); border-bottom: 3px solid var(--yellow); } .sponsor-bar--after-hero { border-top: none; } .sponsor-bar-inner { display: flex; align-items: center; gap: 0.85rem 1.25rem; padding: 0.7rem 0; } .sponsor-bar-kicker { flex: 0 0 auto; margin: 0; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-deep); white-space: nowrap; } .sponsor-bar-copy { flex: 1 1 auto; margin: 0; font-size: 0.92rem; line-height: 1.35; color: var(--muted); } .sponsor-bar-copy strong { display: inline; margin-right: 0.35em; color: var(--ink); font-weight: 700; } .sponsor-bar-cta { flex: 0 0 auto; display: inline-flex; align-items: center; padding: 0.42rem 0.85rem; border-radius: 999px; background: var(--green); color: var(--white); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; } .sponsor-bar-cta:hover { background: var(--green-deep); color: var(--white); } .sponsor-perks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; margin: 0 0 2rem; padding: 0; list-style: none; } .sponsor-perk { padding: 1rem 1.1rem 1.05rem; background: var(--white); border: 1px solid rgba(134, 187, 216, 0.35); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); } .sponsor-perk h3 { margin: 0 0 0.35rem; font-family: var(--font-body); font-size: 1.05rem; font-weight: 700; } .sponsor-perk p { margin: 0; color: var(--muted); font-size: 0.95rem; } .sponsor-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0 0 0.85rem; } .sponsor-hours { margin: 0; color: var(--muted); font-size: 0.92rem; } @media (max-width: 720px) { .sponsor-bar-inner { flex-wrap: wrap; padding: 0.8rem 0; } .sponsor-bar-kicker { width: 100%; } .sponsor-bar-copy { flex: 1 1 12rem; } .sponsor-bar-cta { margin-left: auto; } .sponsor-perks { grid-template-columns: 1fr; } .event-modal:has(.event-modal-panel--ozzi) { padding: 0; place-items: stretch; } .event-modal-panel--ozzi { width: 100%; max-height: 100%; height: 100%; border-radius: 0; } .event-modal-panel--ozzi .outdoors-modal-header { padding: 0.5rem 2.4rem 0.45rem 0.75rem; } .ozzi-modal-body { padding: 0.6rem 0.65rem 0.7rem; overflow: hidden; } .event-modal-panel--ozzi .ozzi-thread { flex: 1 1 0; min-height: 4.5rem; height: auto; max-height: none; } .ozzi-help-grid { grid-template-columns: 1fr; } .ozzi-hero-actions .btn { width: 100%; } } /* Footer */ .site-footer { background: var(--dark-blue); color: rgba(255, 255, 255, 0.82); padding: 4rem 0 2rem; border-top: 3px solid var(--antique-cream); } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 3rem; } .site-footer .brand-wordmark { color: var(--white); font-size: 1.5rem; margin: 0 0 0.75rem; } .site-footer a { color: rgba(255, 255, 255, 0.82); text-decoration: none; } .site-footer a:hover { color: var(--green-bright); } .footer-col h3 { color: var(--yellow); font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 1rem; } .footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; } .footer-bottom { border-top: 1px solid rgba(244, 230, 200, 0.28); padding-top: 1.25rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.9rem; } .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .reveal.is-in { opacity: 1; transform: translateY(0); } /* Responsive */ @media (max-width: 960px) { .hero-content { --hero-pad-top: 7.5rem; padding-bottom: 1.15rem; width: min(100% - 2rem, var(--max)); } .section-head, .home-pillars { grid-template-columns: 1fr 1fr; } .explore-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(200px, auto); } .featured-biz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .explore-link-tall { grid-column: 1 / -1; grid-row: auto; min-height: 260px; } .explore-grid > .explore-link:last-child { grid-column: auto; } .stories-grid, .footer-grid, .listing-grid { grid-template-columns: 1fr 1fr; } .filter-bar { grid-template-columns: 1fr 1fr; } .filter-bar--directory { grid-template-columns: 1fr 1fr; } .event-modal-panel--browse { width: min(100%, 42rem); } .filter-bar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .filter-bar-dates { grid-template-columns: 1fr 1fr; } .filter-show-btn { grid-column: 1 / -1; } .explore-filter-row, .explore-filter-row--directory, .explore-filter-row--refine, .explore-filter-row--dates { grid-template-columns: 1fr; } .featured-events-grid { grid-template-columns: 1fr 1fr; } .section, .page-hero, .page-hero--compact, .hub-chapter, html[data-ozzi-page] .page-hero, html[data-ozzi-page] .section, .page-tight .page-hero, .page-tight .section { padding: 1.35rem 0; } .weather-page { padding-bottom: 1.35rem; } } @media (max-width: 760px) { .btn { padding: 0.45rem 0.75rem; font-size: 0.82rem; line-height: 1.25; } .filter-bar.filter-bar--compact .btn { height: auto; min-height: 0; } .article-body .wp-block-button__link, .article-body .button { padding: 0.45rem 0.75rem; font-size: 0.82rem; } .menu-toggle { display: inline-flex; } .site-header { padding: 0.85rem 0; } .header-inner { position: relative; } .nav { display: flex; position: absolute; top: calc(100% + 0.55rem); right: 0; left: auto; bottom: auto; z-index: 60; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 0; width: min(17.5rem, calc(100vw - 2rem)); height: auto; margin: 0; padding: 1rem 1.15rem 1.15rem; border-radius: 1.05rem; max-height: none; overflow: visible; background: repeating-linear-gradient( -11deg, transparent, transparent 28px, rgba(241, 183, 27, 0.04) 28px, rgba(241, 183, 27, 0.04) 29px ), linear-gradient(180deg, #1a2f3a 0%, #243a48 100%); box-shadow: 0 16px 40px rgba(16, 26, 32, 0.32); border: 1px solid rgba(134, 187, 216, 0.22); opacity: 0; visibility: hidden; pointer-events: none; transform: translate3d(0, -0.45rem, 0); transition: opacity 0.28s var(--ease), transform 0.32s var(--ease), visibility 0.28s; } .nav.is-open { display: flex; opacity: 1; visibility: visible; pointer-events: auto; transform: none; } .nav::before { content: "Explore Lane County"; display: block; margin: 0 0 0.55rem; color: var(--yellow); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0; transform: translateY(0.4rem); transition: opacity 0.3s var(--ease) 0.04s, transform 0.35s var(--ease) 0.04s; } .nav.is-open::before { opacity: 0.95; transform: none; } .nav a { position: relative; color: rgba(255, 255, 255, 0.94) !important; padding: 0.48rem 0.2rem 0.48rem 0.85rem; border-radius: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); min-height: 0; font-family: var(--font-display) !important; font-size: 1.15rem !important; font-style: italic; font-weight: 600 !important; line-height: 1.2; letter-spacing: -0.01em; opacity: 0; transform: translateY(0.45rem); transition: color 0.2s var(--ease), opacity 0.35s var(--ease), transform 0.4s var(--ease), padding-left 0.25s var(--ease); } .nav.is-open a { opacity: 1; transform: none; } .nav.is-open a:nth-child(1) { transition-delay: 0.05s; } .nav.is-open a:nth-child(2) { transition-delay: 0.08s; } .nav.is-open a:nth-child(3) { transition-delay: 0.11s; } .nav.is-open a:nth-child(4) { transition-delay: 0.14s; } .nav.is-open a:nth-child(5) { transition-delay: 0.17s; } .nav.is-open a:nth-child(6) { transition-delay: 0.2s; } .nav.is-open a:nth-child(7) { transition-delay: 0.23s; } .nav a:hover, .nav a:focus-visible { color: var(--yellow) !important; background: transparent; padding-left: 1.05rem; outline: none; } .nav a[aria-current="page"] { color: var(--yellow) !important; background: transparent; } .nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0.15rem; top: 50%; width: 0.32rem; height: 0.32rem; border-radius: 50%; background: var(--yellow); transform: translateY(-50%); } .nav-cta { align-self: stretch; width: auto; text-align: center; margin-top: 0.85rem; margin-bottom: 0; padding: 0.65rem 1rem !important; border: 0 !important; border-radius: var(--radius) !important; background: var(--yellow) !important; color: var(--ink) !important; font-family: var(--font-body) !important; font-size: 0.88rem !important; font-style: normal !important; font-weight: 700 !important; letter-spacing: 0.02em; min-height: 0; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); } .nav-cta:hover, .nav-cta:focus-visible { background: var(--yellow-hot) !important; color: var(--ink) !important; padding-left: 1rem !important; transform: translateY(-1px); } .nav a[aria-current="page"].nav-cta, .nav-cta[aria-current="page"] { color: var(--ink) !important; } .nav-cta[aria-current="page"]::after { display: none; } .weather-city-bar { margin-bottom: 1rem; padding-top: 0.5rem; } .weather-city-label { margin-bottom: 0.4rem; font-size: 0.72rem; } .weather-cities { display: none; } .weather-city-select { display: block; } .weather-city-bar .filter-combo { display: block; } .hub-jump-select-wrap:has(.filter-combo)::after { display: none; } .hero-content { --hero-pad-top: 7.35rem; padding-bottom: 1.1rem; width: min(100% - 1.5rem, var(--max)); } .hero h1 { font-size: clamp(1.35rem, 5.5vw, 1.85rem); max-width: none; margin-bottom: 0.4rem; } .hero-stamp { font-size: 0.68rem; margin-bottom: 0.45rem; } .section-head, .home-pillars { grid-template-columns: 1fr; } .hero-lead, .ozzi-ask-wrap .section-lead { display: none; } .hero-ozzi-panel, .ozzi-page-panel { padding: 0.65rem 0.7rem 0.7rem; } .hero-ozzi-panel .ozzi-thread, .ozzi-page-panel .ozzi-thread { order: 1; } .hero-ozzi-panel.is-chatting:not(.is-fs) .ozzi-thread, .ozzi-page-panel.is-chatting:not(.is-fs) .ozzi-thread { max-height: min(52dvh, 22rem); margin-bottom: 0.45rem; } .hero-ozzi-panel .ozzi-ask-cue, .ozzi-page-panel .ozzi-ask-cue { order: 2; } .hero-ozzi-panel .ozzi-form, .ozzi-page-panel .ozzi-form, .event-modal-panel--ozzi .ozzi-form { grid-template-columns: minmax(0, 1fr) auto; gap: 0.4rem; width: 100%; max-width: 100%; min-width: 0; } .hero-ozzi-panel .ozzi-form, .ozzi-page-panel .ozzi-form { order: 3; } .event-modal-panel--ozzi .ozzi-form { order: 6; } .hero-ozzi-panel .ozzi-form input, .ozzi-page-panel .ozzi-form input, .event-modal-panel--ozzi .ozzi-form input { min-height: 2.15rem; padding: 0.28rem 0.65rem; font-size: 0.88rem; line-height: 1.25; grid-column: auto; } .hero-ozzi-panel .ozzi-form .btn, .ozzi-page-panel .ozzi-form .btn, .event-modal-panel--ozzi .ozzi-form .btn { width: auto; min-height: 2.15rem; padding: 0.28rem 0.75rem; font-size: 0.84rem; } .hero-ozzi-panel .ozzi-suggest, .ozzi-page-panel .ozzi-suggest, .event-modal-panel--ozzi .ozzi-suggest { order: 4; margin: 0.5rem 0 0; } .hero-ozzi-panel:not(.is-fs) .ozzi-links-nav, .ozzi-page-panel:not(.is-fs) .ozzi-links-nav { display: none; } .hero-ozzi-panel .ozzi-suggest, .ozzi-page-panel .ozzi-suggest { position: relative; } .hero-ozzi-panel .ozzi-suggest.has-more-prompts:not([hidden])::after, .ozzi-page-panel .ozzi-suggest.has-more-prompts:not([hidden])::after { content: ""; position: absolute; right: 0; bottom: 0.12rem; z-index: 1; width: 2.25rem; height: 1.9rem; pointer-events: none; background: linear-gradient(90deg, transparent, var(--white) 58%); } .hero-ozzi-panel .ozzi-suggest.has-more-prompts:not([hidden])::before, .ozzi-page-panel .ozzi-suggest.has-more-prompts:not([hidden])::before { content: ""; position: absolute; right: 0.4rem; bottom: 0.72rem; z-index: 2; width: 0.4rem; height: 0.4rem; border-right: 1.5px solid rgba(47, 72, 88, 0.4); border-bottom: 1.5px solid rgba(47, 72, 88, 0.4); transform: rotate(-45deg); pointer-events: none; } .hero-ozzi-panel:not(.is-fs) .ozzi-links, .ozzi-page-panel:not(.is-fs) .ozzi-links { order: 5; justify-content: flex-end; margin-top: 0.35rem; } .event-modal-panel--ozzi .ozzi-links, .hero-ozzi-panel.is-fs .ozzi-links, .ozzi-page-panel.is-fs .ozzi-links { order: 5; margin-top: 0.55rem; } .event-modal-panel--ozzi .ozzi-thread { order: 1; margin-bottom: 0.45rem; } .ozzi-form { grid-template-columns: 1fr; } .ozzi-form .btn { width: 100%; } .ozzi-suggest { flex-direction: column; align-items: stretch; gap: 0.3rem; margin: 0 0 0.55rem; } .ozzi-suggest-label { font-size: 0.78rem; } .ozzi-prompts { flex-wrap: nowrap; gap: 0.4rem; min-width: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-x; padding: 0.05rem 0 0.2rem; } .hero-ozzi-panel .ozzi-prompts, .ozzi-page-panel .ozzi-prompts { padding-right: 1.7rem; } .ozzi-prompts::-webkit-scrollbar { display: none; } .prompt-chip { flex: 0 0 auto; white-space: nowrap; font-size: 0.78rem; padding: 0.35rem 0.65rem; min-height: 0; line-height: 1.25; } .ozzi-links { gap: 0.75rem 1rem; font-size: 0.9rem; } .ozzi-links-nav { gap: 0.75rem 1rem; } .event-row, .story-item, .stories-grid, .listing-grid, .filter-bar, .filter-bar--directory, .filter-bar--modal.filter-bar--directory, .filter-bar-grid, .filter-bar-dates, .explore-filter-row, .explore-filter-row--directory, .explore-filter-row--refine, .explore-filter-row--dates { grid-template-columns: 1fr; } .directory-result-card { grid-template-columns: 64px 1fr auto; gap: 0.7rem; } .directory-result-thumb { width: 64px; height: 64px; } .featured-biz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } .featured-biz img { height: 8.5rem; } .featured-biz.featured-biz--lead { display: flex; flex-direction: column; } .featured-biz--lead img { height: 11rem; min-height: 0; } .featured-biz--lead .featured-biz-body { padding: 0.75rem 0.8rem 0.9rem; } .featured-biz--lead .featured-biz-body h3 { font-size: 1.05rem; } .featured-biz-excerpt, .featured-biz-more { display: none; } .featured-biz-body { padding: 0.75rem 0.8rem 0.9rem; } .featured-biz-body h3 { font-size: 1.05rem; } .featured-biz-body p { font-size: 0.82rem; } .event-row { gap: 0.35rem; padding: 1rem 0; } .event-arrow { display: none; } .explore-grid { grid-template-columns: 1fr 1fr; } .explore-link, .explore-link-tall { min-height: 168px; } .explore-grid > .explore-link:first-child, .explore-grid > .explore-link:last-child { grid-column: 1 / -1; min-height: 190px; } .explore-link-tall { grid-column: auto; } .event-row { grid-template-columns: 4.75rem 1fr; } .section, .page-hero, .page-hero--compact, .hub-chapter, html[data-ozzi-page] .page-hero, html[data-ozzi-page] .section, .page-tight .page-hero, .page-tight .section { padding: 1.1rem 0; } .weather-page { padding-bottom: 1.1rem; } .section-title { font-size: clamp(1.65rem, 6vw, 2.2rem); } .biz-actions { flex-direction: column; align-items: stretch; } .biz-actions .btn { width: 100%; } .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.15rem 0.7rem; margin-bottom: 1.75rem; } .footer-grid > :first-child { grid-column: 1 / -1; } .footer-col h3 { margin-bottom: 0.5rem; font-size: 0.68rem; letter-spacing: 0.08em; } .footer-col ul { gap: 0.38rem; } .footer-col a { font-size: 0.82rem; line-height: 1.3; } .footer-bottom { flex-direction: column; } } @media (max-width: 480px) { body { font-size: 1rem; } .container { width: min(100% - 1.25rem, var(--max)); } .logo-img { height: 3.85rem; } .logo-mark { height: 2.85rem; width: 2.85rem; } .logo-wordmark { font-size: 1.1rem; } .site-header:not(.is-solid) { height: calc(3.85rem + 1.7rem); } .hero-content { --hero-pad-top: 5.85rem; padding-bottom: 1.15rem; } .hero-photo-credit { font-size: 0.68rem; } .story-item { grid-template-columns: 1fr; } .story-item img { width: 100%; height: 160px; } } /* Pocket finds — green stamp chips (echoes hero “Made for Lane County”) */ .trinket-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 0.75rem; margin: -0.85rem 0 1.75rem; } .trinket-row--tight { margin: -0.85rem 0 1.5rem; } .trinket-row--after { margin: 1.75rem 0 0; padding-top: 1.15rem; border-top: 1px solid rgba(47, 72, 88, 0.12); } .stories-section .trinket-row--after, .paradise-section .trinket-row--after { margin-bottom: 0; } .explore-section .trinket-row { margin: 0; } .trinket { --trinket-tilt: -1.75deg; --trinket-fill: #4f8a5b; --trinket-fill-end: #3a6b45; position: relative; display: inline-flex; align-items: center; justify-content: center; width: fit-content; max-width: 100%; margin-right: 11px; padding: 0.48rem 0.95rem 0.48rem 1.05rem; border: 0; border-radius: 999px 0 0 999px; color: var(--white); font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; line-height: 1.2; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; appearance: none; -webkit-appearance: none; background: linear-gradient(152deg, #5f9a6c 0%, var(--trinket-fill) 45%, var(--trinket-fill-end) 100%); filter: drop-shadow(0 2px 0 rgba(26, 44, 54, 0.18)); transform: rotate(var(--trinket-tilt)); transition: transform 0.22s var(--ease), background 0.22s var(--ease), filter 0.22s var(--ease), color 0.22s var(--ease); } /* Arrow tip on the right edge (shape only — no inner chevron) */ .trinket::after { content: ""; position: absolute; top: 0; left: 100%; width: 12px; height: 100%; background: linear-gradient(152deg, #5f9a6c 0%, var(--trinket-fill) 45%, var(--trinket-fill-end) 100%); clip-path: polygon(0 0, 100% 50%, 0 100%); pointer-events: none; } .trinket:nth-child(2n) { --trinket-tilt: 1.45deg; } .trinket:nth-child(3n) { --trinket-tilt: -2.2deg; } .trinket:nth-child(4n) { --trinket-tilt: 0.9deg; } .trinket:nth-child(5n) { --trinket-tilt: -1.15deg; } .trinket:hover, .trinket:focus-visible { --trinket-fill: #5a9867; --trinket-fill-end: #457a50; color: var(--white); background: linear-gradient(152deg, #6fad7c 0%, var(--trinket-fill) 45%, var(--trinket-fill-end) 100%); filter: drop-shadow(0 3px 0 rgba(26, 44, 54, 0.22)); transform: rotate(0deg) translateY(-2px); outline: none; } .trinket:hover::after, .trinket:focus-visible::after { background: linear-gradient(152deg, #6fad7c 0%, var(--trinket-fill) 45%, var(--trinket-fill-end) 100%); } .trinket:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; } .events-section .trinket-row--after, .events-section .trinket-row { border-top-color: rgba(255, 255, 255, 0.12); } .trinket-row--navy { margin-top: 1.35rem; padding-top: 1.15rem; } .trinket-row--navy .trinket { --trinket-fill: var(--dark-blue); --trinket-fill-end: #243844; background: linear-gradient(152deg, #3d5d70 0%, var(--trinket-fill) 45%, var(--trinket-fill-end) 100%); } .trinket-row--navy .trinket::after { background: linear-gradient(152deg, #3d5d70 0%, var(--trinket-fill) 45%, var(--trinket-fill-end) 100%); } .trinket-row--navy .trinket:hover, .trinket-row--navy .trinket:focus-visible { --trinket-fill: var(--blue); --trinket-fill-end: var(--dark-blue); background: linear-gradient(152deg, #4a7390 0%, var(--trinket-fill) 45%, var(--trinket-fill-end) 100%); } .trinket-row--navy .trinket:hover::after, .trinket-row--navy .trinket:focus-visible::after { background: linear-gradient(152deg, #4a7390 0%, var(--trinket-fill) 45%, var(--trinket-fill-end) 100%); } /* Article reader */ .article-page .site-header { position: sticky; top: 0; } .article-loading, .article-error { padding: 4.5rem 0 3rem; } .article-loading-copy { margin: 0.75rem 0 0; font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.2rem); font-style: italic; color: var(--dark-blue); } .article-hero { position: relative; width: 100%; min-height: min(68vh, 560px); max-height: 640px; overflow: hidden; background: linear-gradient(160deg, rgba(47, 72, 88, 0.2), rgba(79, 138, 91, 0.18)), var(--mist); animation: articleHeroIn 0.9s var(--ease) both; } .article-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 35%; background: linear-gradient(180deg, transparent, rgba(26, 44, 54, 0.35)); pointer-events: none; } .article-hero img { display: block; width: 100%; height: min(68vh, 560px); max-height: 640px; object-fit: cover; transform: scale(1.04); animation: articleImageSettle 1.2s var(--ease) both; } .article-header { padding: 2.75rem 0 1.25rem; max-width: 46rem; margin-inline: auto; animation: articleRise 0.75s var(--ease) 0.1s both; } .article-back { margin: 0 0 1.25rem; } .article-back a { color: var(--blue); font-weight: 600; text-decoration: none; } .article-back a:hover, .article-back a:focus-visible { color: var(--green-deep); } .article-header h1 { margin: 0.35rem 0 0.85rem; font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 600; font-style: italic; line-height: 1.12; letter-spacing: -0.02em; color: var(--dark-blue); } .article-dek { margin: 0 0 1.15rem; font-size: 1.2rem; line-height: 1.55; color: var(--muted); max-width: 38rem; } .article-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin: 0; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.02em; color: var(--dark-blue); } .article-meta span:not([hidden])::before { content: "·"; margin-right: 1rem; color: var(--green); } .article-body { max-width: 42rem; margin: 0 auto; padding: 0.5rem 0 3rem; font-size: 1.125rem; line-height: 1.75; color: var(--ink); animation: articleRise 0.8s var(--ease) 0.2s both; } .article-body > *:first-child { margin-top: 0; } .article-body h2, .article-body h3, .article-body h4 { font-family: var(--font-display); font-weight: 600; color: var(--dark-blue); line-height: 1.25; margin: 2.25rem 0 0.85rem; } .article-body h2 { font-size: clamp(1.55rem, 2.6vw, 1.9rem); font-style: italic; } .article-body h3 { font-size: 1.35rem; } .article-body p, .article-body ul, .article-body ol, .article-body blockquote, .article-body figure { margin: 0 0 1.35rem; } .article-body a { color: var(--blue); text-underline-offset: 0.15em; } .article-body a:hover { color: var(--green-deep); } .article-body ul, .article-body ol { padding-left: 1.25rem; } .article-body li + li { margin-top: 0.4rem; } .article-body blockquote { margin-left: 0; margin-right: 0; padding: 0.25rem 0 0.25rem 1.15rem; border-left: 3px solid var(--green); color: var(--dark-blue); font-family: var(--font-display); font-style: italic; font-size: 1.25rem; } .article-body img, .article-body .wp-block-image img { display: block; width: 100%; height: auto; border-radius: var(--radius); margin: 0.35rem 0 0.5rem; } .article-body figure { margin-left: 0; margin-right: 0; } .article-body figcaption, .article-body .wp-element-caption { margin-top: 0.45rem; font-size: 0.88rem; color: var(--muted); } .article-body .wp-block-columns, .article-body .wp-block-group, .article-body .wp-block-media-text { display: grid; gap: 1rem; margin-bottom: 1.5rem; } .article-body .alignwide, .article-body .alignfull { width: 100%; max-width: 100%; } .article-body .wp-block-button__link, .article-body .button { display: inline-flex; align-items: center; justify-content: center; padding: 0.7rem 1.1rem; border-radius: var(--radius); background: var(--green); color: var(--white) !important; text-decoration: none; font-weight: 700; } .article-body .wp-block-embed, .article-body .wp-block-table { overflow-x: auto; margin-bottom: 1.5rem; } .article-body table { width: 100%; border-collapse: collapse; font-size: 0.95rem; } .article-body th, .article-body td { padding: 0.55rem 0.65rem; border-bottom: 1px solid rgba(51, 101, 138, 0.15); text-align: left; } .article-footer { padding: 0 0 4rem; } .article-footer-panel { padding: 2.25rem 0 0; border-top: 1px solid rgba(51, 101, 138, 0.14); max-width: 42rem; margin: 0 auto; } .article-footer-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; } .article-footer-actions .btn-ghost { color: var(--dark-blue); border-color: rgba(47, 72, 88, 0.45); background: transparent; } .article-footer-actions .btn-ghost:hover { color: var(--white); background: var(--dark-blue); border-color: var(--dark-blue); } /* Listing shell — redesign header/footer around the live business page */ .listing-shell-page [hidden] { display: none !important; } .listing-shell-page .site-header { position: sticky; top: 0; z-index: 40; } .listing-shell { min-height: 50vh; } .listing-shell-error { padding: 4.5rem 0 3rem; } .listing-shell-error h1 { margin: 0.35rem 0 0.85rem; font-family: var(--font-display); font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 600; font-style: italic; color: var(--dark-blue); } .listing-shell-error .section-lead { max-width: 36rem; } .listing-detail { padding: 2.4rem 0 4rem; } .listing-detail-back { margin: 0 0 0.85rem; } .listing-detail-back a { color: var(--dark-blue); font-weight: 600; text-decoration: none; } .listing-detail-back a:hover, .listing-detail-back a:focus-visible { color: var(--green); } .listing-detail-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(16rem, 0.8fr); gap: 2rem; align-items: start; } .listing-detail h1 { margin: 0.2rem 0 0.55rem; font-family: var(--font-display); font-size: clamp(2rem, 4.5vw, 3.1rem); font-weight: 600; font-style: italic; color: var(--dark-blue); } .listing-detail-place { margin: 0 0 0.85rem; color: var(--muted); font-size: 1.05rem; } .listing-detail-summary { margin: 0 0 1.15rem; max-width: 40rem; font-size: 1.08rem; line-height: 1.55; } .listing-detail-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; margin: 0 0 1.5rem; } .listing-detail-actions .btn-ghost, .listing-detail-actions .btn-outline { color: var(--dark-blue) !important; border: 1.5px solid var(--dark-blue) !important; background: transparent !important; } .listing-detail-actions .btn-ghost:hover, .listing-detail-actions .btn-outline:hover { color: var(--dark-blue) !important; border-color: var(--dark-blue) !important; background: rgba(47, 72, 88, 0.08) !important; } .listing-detail-copy { max-width: 42rem; } .listing-detail-copy p { margin: 0 0 1rem; line-height: 1.65; } .listing-detail-photo { width: 100%; height: 16rem; object-fit: cover; border-radius: var(--radius); background: #e8eef2; } .listing-detail-facts { margin-top: 1rem; padding: 1rem 1.1rem; background: var(--white); border: 1px solid rgba(51, 101, 138, 0.14); border-radius: var(--radius); box-shadow: 0 18px 40px rgba(47, 72, 88, 0.08); } .listing-detail-facts p { margin: 0 0 0.85rem; } .listing-detail-facts p:last-child { margin-bottom: 0; } .listing-detail-facts span { display: block; margin-bottom: 0.15rem; color: var(--muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .listing-detail-facts strong, .listing-detail-facts a { color: var(--dark-blue); font-weight: 600; text-decoration: none; } .listing-pills { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0 0 1rem; padding: 0; list-style: none; } .listing-pills li { padding: 0.42rem 0.9rem; border-radius: 999px; background: var(--green); color: var(--white); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.01em; } .listing-note { margin: 0 0 1.1rem; max-width: 42rem; padding: 0.75rem 0.9rem; background: rgba(241, 183, 27, 0.12); border-left: 3px solid var(--yellow); color: var(--dark-blue); font-size: 0.95rem; } .listing-note a { color: var(--dark-blue); font-weight: 700; text-underline-offset: 0.15em; } .listing-note a:hover { color: var(--green-deep); } .listing-block { margin: 2rem 0 0; } .listing-block h2, .listing-hours h2, .listing-claim h2 { margin: 0 0 0.85rem; font-family: var(--font-display); font-size: 1.55rem; font-weight: 600; font-style: italic; color: var(--dark-blue); } .listing-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.55rem; } .listing-gallery-item, .listing-detail-photo { cursor: zoom-in; } .listing-gallery-item { display: block; padding: 0; border: 0; border-radius: var(--radius); overflow: hidden; background: #e8eef2; } .listing-gallery-item img { width: 100%; height: 7.5rem; object-fit: cover; } .listing-faq details { border-top: 1px solid rgba(47, 72, 88, 0.12); padding: 0.7rem 0; } .listing-faq details:last-child { border-bottom: 1px solid rgba(47, 72, 88, 0.12); } .listing-faq summary { cursor: pointer; font-weight: 700; color: var(--dark-blue); } .listing-faq p { margin: 0.45rem 0 0; color: var(--muted); } .listing-related { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.55rem; } .listing-related a { font-weight: 700; color: var(--dark-blue); text-decoration: none; } .listing-related a:hover { color: var(--green); } .listing-related span { color: var(--muted); } .listing-related-more { margin: 0.85rem 0 0; } .listing-claim { margin: 2.2rem 0 0; padding: 1.2rem 1.25rem 1.3rem; background: var(--white); border: 1px solid rgba(79, 138, 91, 0.22); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); } .listing-claim p { margin: 0 0 1rem; color: var(--muted); } .listing-claim-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; } .listing-claim-actions .btn-outline, .listing-hours .btn-outline { color: var(--dark-blue) !important; border: 1.5px solid var(--dark-blue) !important; background: transparent !important; } .listing-hours { margin-top: 1rem; padding: 1rem 1.1rem; background: var(--white); border: 1px solid rgba(51, 101, 138, 0.14); border-radius: var(--radius); box-shadow: 0 18px 40px rgba(47, 72, 88, 0.08); } .listing-hours p { margin: 0; color: var(--muted); } .listing-hours ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.45rem; } .listing-hours li { display: flex; justify-content: space-between; gap: 0.75rem; } .listing-hours li span { color: var(--muted); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; } .listing-lightbox { border: 0; padding: 0; max-width: min(92vw, 56rem); background: transparent; } .listing-lightbox::backdrop { background: rgba(26, 44, 54, 0.72); } .listing-lightbox img { display: block; width: 100%; max-height: 86vh; object-fit: contain; background: #111; } .listing-lightbox-close { position: absolute; top: 0.4rem; right: 0.4rem; width: 2.4rem; height: 2.4rem; border: 0; border-radius: 999px; background: var(--white); color: var(--dark-blue); font-size: 1.4rem; cursor: pointer; } /* Stacked listing: photo + contact stay near the top (phone & tablet) */ @media (max-width: 860px) { .listing-detail-layout { display: flex; flex-direction: column; gap: 1rem; } .listing-detail-main, .listing-detail-aside { display: contents; } .listing-detail-layout > .listing-detail-main > h1 { order: 1; } .listing-detail-layout .listing-detail-place { order: 2; } .listing-detail-layout .listing-pills { order: 3; } .listing-detail-layout .listing-detail-summary { order: 4; } .listing-detail-layout .listing-detail-photo { order: 5; height: 14rem; margin: 0.25rem 0 0; } .listing-detail-layout .listing-detail-facts { order: 6; margin-top: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem 0.85rem; padding: 0.85rem 0.95rem; } .listing-detail-layout .listing-detail-facts .listing-fact { margin: 0; min-width: 0; } .listing-detail-layout .listing-detail-facts .listing-fact--wide { grid-column: 1 / -1; } .listing-detail-layout .listing-detail-facts .listing-fact a, .listing-detail-layout .listing-detail-facts .listing-fact strong { display: block; overflow-wrap: anywhere; word-break: break-word; font-size: 0.92rem; line-height: 1.35; } .listing-detail-layout .listing-detail-facts .listing-fact span { margin-bottom: 0.1rem; } .listing-detail-layout .listing-hours { order: 7; margin: 0; } .listing-detail-layout .listing-detail-actions { order: 8; margin: 0; } .listing-detail-layout .listing-note { order: 9; margin: 0; } .listing-detail-layout .listing-detail-copy { order: 10; } .listing-detail-layout .listing-block { order: 11; } .listing-detail-layout .listing-gallery { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0.4rem; width: 100%; } .listing-detail-layout .listing-gallery-item { width: 100%; } .listing-detail-layout .listing-gallery-item img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; } .listing-detail-layout .listing-claim { order: 12; } } /* Phone-only compact controls + full-bleed photo grid */ @media (max-width: 720px) { .listing-detail-layout .listing-detail-actions { gap: 0.45rem; } .listing-detail-layout .listing-detail-actions .btn { padding: 0.45rem 0.75rem; font-size: 0.82rem; line-height: 1.25; border-radius: var(--radius); } .listing-detail-layout [data-listing-gallery] { position: relative; left: 50%; width: 100vw; max-width: 100vw; transform: translateX(-50%); box-sizing: border-box; } .listing-detail-layout [data-listing-gallery] > h2 { padding-inline: 1rem; } .listing-detail-layout .listing-gallery { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 0.3rem; width: 100%; margin: 0; } .listing-detail-layout .listing-gallery-item { width: 100%; border-radius: 0; } .listing-detail-layout .listing-gallery-item img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; } .listing-detail-layout .listing-claim-actions { gap: 0.45rem; } .listing-detail-layout .listing-claim-actions .btn { padding: 0.45rem 0.75rem; font-size: 0.82rem; line-height: 1.25; border-radius: var(--radius); } } @keyframes articleHeroIn { from { opacity: 0; } to { opacity: 1; } } @keyframes articleImageSettle { from { transform: scale(1.08); opacity: 0.7; } to { transform: scale(1.04); opacity: 1; } } @keyframes articleRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 720px) { .article-hero, .article-hero img { min-height: 42vh; height: 42vh; } .article-header { padding-top: 2rem; } .article-body { font-size: 1.05rem; } .article-footer-actions { flex-direction: column; } .article-footer-actions .btn { width: 100%; justify-content: center; } } @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; } .hero-media img { transform: none; } .reveal { opacity: 1; transform: none; } .article-hero img { transform: none; } .trinket, .trinket:nth-child(n), .trinket:hover, .trinket:focus-visible, .spot-hero .article-back a, body[data-spot-hub] .spot-hero .article-back a, body[data-outdoors-hub] .page-hero .article-back a, .parks-page .page-hero .article-back a, .hub-jump-pills a, .hub-jump-pills a:nth-child(n), .hub-jump-pills a:hover, .hub-jump-pills a:focus-visible { transform: none; } .ozzi-ask-cue.is-visible { animation: none; opacity: 1; transform: none; } .ozzi-form input.is-cue-focus { animation: none; } } /* ——— Outdoors hubs, modal, destination guides ——— */ .event-modal-panel--explore .event-modal-close, .event-modal-panel--outdoors .event-modal-close { top: 0.7rem; right: 0.75rem; background: rgba(255, 255, 255, 0.14); color: var(--white); } .event-modal-panel--explore .event-modal-close:hover, .event-modal-panel--explore .event-modal-close:focus-visible { background: var(--white); color: var(--green-deep); } .event-modal-panel--outdoors .event-modal-close:hover, .event-modal-panel--outdoors .event-modal-close:focus-visible { background: var(--yellow); color: var(--ink); } .explore-modal-header { padding-bottom: 0.9rem; } .explore-modal-header h2 { margin-bottom: 0.15rem; } .explore-modal-status { margin: 0.2rem 0 0; color: rgba(232, 240, 243, 0.8); font-size: 0.86rem; } .event-modal-panel--explore .explore-filter-bar { gap: 0.65rem; margin: 0 0 0.75rem; padding: 0.75rem 0.8rem 0.8rem; } .event-modal-panel--explore .explore-filter-row { gap: 0.5rem 0.65rem; } .event-modal-panel--explore .explore-filter-row--dates { padding-top: 0.65rem; } .event-modal-panel--explore .explore-filter-bar label { font-size: 0.7rem; gap: 0.28rem; } .event-modal-panel--explore .explore-filter-bar select, .event-modal-panel--explore .explore-filter-bar input, .event-modal-panel--explore .explore-filter-bar .filter-combo-trigger { padding: 0.48rem 0.6rem; font-size: 0.9rem; } .event-modal-panel--explore .event-modal-footer .btn { width: auto; } .directory-results-footer.outdoors-modal-footer { justify-content: space-between; } .event-modal-panel--explore .btn-directory-more { min-height: 0; padding: 0.4rem 0.75rem; font-size: 0.82rem; } .event-modal-panel--explore .directory-result-card { grid-template-columns: 56px 1fr auto; gap: 0.65rem; padding: 0.5rem; } .event-modal-panel--explore .directory-result-thumb { width: 56px; height: 56px; } .event-modal-panel--explore .directory-result-main h3 { font-size: 1.02rem; } .event-modal-panel--explore .directory-result-main p { font-size: 0.84rem; } .event-modal-panel--explore .results-event-card { padding: 0.7rem 0.8rem; gap: 0.35rem; } .event-modal-panel--explore .results-event-main h3 { font-size: 1.05rem; margin-bottom: 0.15rem; } .event-modal-panel--explore .results-event-main p, .event-modal-panel--explore .results-event-when span { font-size: 0.84rem; } .outdoors-modal-header { padding: 0.85rem 3rem 0 1.05rem; background: radial-gradient(ellipse 70% 90% at 100% 0%, rgba(125, 184, 138, 0.28), transparent 58%), linear-gradient(145deg, #2a4a32 0%, var(--green-deep) 48%, #2f5a3a 100%); border-bottom: 0; color: var(--white); } .outdoors-modal-kicker { margin: 0 0 0.15rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--light-blue); } .outdoors-modal-kicker a { color: inherit; text-decoration: none; } .outdoors-modal-kicker a:hover, .outdoors-modal-kicker a:focus-visible { color: var(--white); } .outdoors-modal-header h2 { margin: 0 0 0.65rem; font-size: clamp(1.35rem, 2.4vw, 1.55rem); font-style: italic; color: var(--white); } .outdoors-modal-deck { margin: -0.35rem 0 0.85rem; max-width: 34rem; font-size: 0.92rem; line-height: 1.4; color: rgba(232, 240, 243, 0.82); } .outdoors-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin: 0 -1.15rem 0; padding: 0; } .outdoors-tab { margin: 0; border: 0; border-radius: 8px 8px 0 0; padding: 0.65rem 0.28rem 0.6rem; background: transparent; color: rgba(232, 240, 243, 0.78); font-family: var(--font-body); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em; cursor: pointer; position: relative; } .outdoors-tab:hover, .outdoors-tab:focus-visible { color: var(--white); background: rgba(255, 255, 255, 0.08); } .outdoors-tab.is-active { background: var(--cream-soft); color: var(--green-deep); box-shadow: none; } .outdoors-tab.is-active::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 0.28rem; height: 2px; background: var(--yellow); border-radius: 2px; } .outdoors-modal-body { padding: 0.9rem 1.15rem 1rem; background: var(--cream-soft); } .outdoors-modal-footer { padding: 0.55rem 1.15rem 0.7rem; background: var(--cream-soft); border-top: 1px solid rgba(51, 101, 138, 0.12); justify-content: flex-end; } .outdoors-modal-footer a { font-size: 0.84rem; font-weight: 700; color: var(--green-deep); text-decoration: none; } .outdoors-modal-footer a:hover { color: var(--blue); } .event-modal-panel--outdoors .outdoors-modal-header { padding: 0.9rem 3rem 0.75rem 1.15rem; background: radial-gradient(ellipse 80% 120% at 100% 0%, rgba(241, 183, 27, 0.28), transparent 52%), radial-gradient(ellipse 70% 90% at 0% 120%, rgba(134, 187, 216, 0.2), transparent 58%), linear-gradient(145deg, #3d6178 0%, var(--dark-blue) 42%, #33658a 100%); box-shadow: inset 0 -3px 0 var(--yellow); } .event-modal-panel--outdoors .outdoors-modal-kicker { color: var(--yellow); } .event-modal-panel--outdoors .outdoors-modal-header h2 { margin: 0 0 0.28rem; font-size: clamp(1.55rem, 2.8vw, 1.95rem); } .event-modal-panel--outdoors .outdoors-modal-deck { margin: 0; } .event-modal-panel--outdoors .outdoors-modal-body { padding: 0.75rem 0.8rem 0.85rem; background: radial-gradient(ellipse 70% 50% at 10% 0%, rgba(241, 183, 27, 0.08), transparent 48%), radial-gradient(ellipse 60% 40% at 90% 100%, rgba(51, 101, 138, 0.35), transparent 52%), var(--dark-blue); } .event-modal-panel--outdoors .outdoors-modal-footer { padding: 0.5rem 1rem 0.65rem; background: var(--dark-blue); border-top: 1px solid rgba(241, 183, 27, 0.28); } .event-modal-panel--outdoors .outdoors-modal-footer a { color: var(--yellow); } .event-modal-panel--outdoors .outdoors-modal-footer a:hover, .event-modal-panel--outdoors .outdoors-modal-footer a:focus-visible { color: var(--yellow-hot); } .hub-mosaic { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(7.6rem, 1fr); gap: 0.55rem; min-height: 28rem; } .hub-mosaic-card { position: relative; display: block; min-height: 0; overflow: hidden; border-radius: 10px; color: var(--white); text-decoration: none; background: #1a2c36; box-shadow: inset 0 0 0 1px rgba(241, 183, 27, 0.14); isolation: isolate; } .hub-mosaic-card--feature { grid-column: 1 / 5; grid-row: 1 / 3; } .hub-mosaic-card:nth-child(2) { grid-column: 5 / 7; grid-row: 1; } .hub-mosaic-card:nth-child(3) { grid-column: 5 / 7; grid-row: 2; } .hub-mosaic-card:nth-child(4) { grid-column: 1 / 3; } .hub-mosaic-card:nth-child(5) { grid-column: 3 / 5; } .hub-mosaic-card:nth-child(6) { grid-column: 5 / 7; } .hub-mosaic-card:nth-child(7) { grid-column: 1 / 4; } .hub-mosaic-card:nth-child(8) { grid-column: 4 / 7; } .hub-mosaic-card img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transform: scale(1.04); transition: transform 0.7s var(--ease); } .hub-mosaic-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26, 44, 54, 0.08) 18%, rgba(26, 44, 54, 0.78) 100%); z-index: 1; } .hub-mosaic-card--parks::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.55; background: repeating-linear-gradient( 90deg, transparent, transparent 22px, rgba(241, 183, 27, 0.08) 22px, rgba(241, 183, 27, 0.08) 23px ), repeating-linear-gradient( 0deg, transparent, transparent 22px, rgba(241, 183, 27, 0.05) 22px, rgba(241, 183, 27, 0.05) 23px ); } .hub-mosaic-card--play::after { background: linear-gradient(180deg, rgba(88, 52, 8, 0.12) 10%, rgba(36, 22, 6, 0.82) 100%); } .hub-mosaic-copy { position: absolute; inset: auto 0 0; z-index: 3; padding: 0.85rem 0.95rem 0.9rem; color: var(--white); } .hub-mosaic-card--feature .hub-mosaic-copy { padding: 1.15rem 1.2rem 1.2rem; } .hub-mosaic-copy em { display: block; margin-bottom: 0.12rem; font-family: var(--font-body); font-size: 0.66rem; font-style: normal; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--yellow); } .hub-mosaic-copy strong { display: block; font-family: var(--font-display); font-size: clamp(1.2rem, 1.8vw, 1.45rem); font-style: italic; font-weight: 600; line-height: 1.1; color: inherit; } .hub-mosaic-card--feature .hub-mosaic-copy strong { font-size: clamp(1.85rem, 3.2vw, 2.55rem); } .hub-mosaic-sub { display: block; margin-top: 0.2rem; max-width: 22rem; font-size: 0.82rem; line-height: 1.35; color: rgba(232, 240, 243, 0.88); } .hub-mosaic-card:hover, .hub-mosaic-card:focus-visible { color: var(--white); box-shadow: inset 0 0 0 1px rgba(241, 183, 27, 0.55), 0 14px 28px rgba(26, 44, 54, 0.4); } .hub-mosaic-card:hover img, .hub-mosaic-card:focus-visible img { transform: scale(1.1); } .hub-mosaic-card:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; } @media (max-width: 960px) { .event-modal-panel--outdoors { width: min(100%, 44rem); max-height: min(90vh, 46rem); } .event-modal-panel--outdoors .outdoors-modal-header { padding: 0.75rem 2.8rem 0.6rem 1rem; } .hub-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(6.2rem, auto); min-height: 0; gap: 0.45rem; } .hub-mosaic-card:nth-child(n) { grid-column: auto; grid-row: auto; min-height: 0; } .hub-mosaic-card.hub-mosaic-card--feature { grid-column: 1 / -1; grid-row: span 2; } .hub-mosaic-card:last-child:not(.hub-mosaic-card--feature) { grid-column: 1 / -1; } .hub-mosaic-card--feature .hub-mosaic-copy strong { font-size: clamp(1.55rem, 4vw, 2rem); } .hub-mosaic-sub { font-size: 0.76rem; } } @media (max-width: 720px) { .event-modal:has(.event-modal-panel--outdoors) { padding: 0.4rem; place-items: end stretch; } .event-modal-panel--outdoors { width: 100%; max-height: min(92dvh, 42rem); border-radius: 12px; } .event-modal-panel--outdoors .outdoors-modal-header { padding: 0.62rem 2.6rem 0.5rem 0.8rem; } .event-modal-panel--outdoors .outdoors-modal-header h2 { margin: 0; font-size: 1.28rem; } .event-modal-panel--outdoors .outdoors-modal-deck { display: none; } .event-modal-panel--outdoors .outdoors-modal-body { padding: 0.45rem 0.5rem 0.5rem; } .event-modal-panel--outdoors .outdoors-modal-footer { padding: 0.38rem 0.75rem 0.5rem; } .event-modal-panel--outdoors .outdoors-modal-footer a { font-size: 0.78rem; } .hub-mosaic { gap: 0.34rem; grid-auto-rows: minmax(5.15rem, auto); } .hub-mosaic-card--parks::before { display: none; } .hub-mosaic-card::after { background: linear-gradient(180deg, rgba(26, 44, 54, 0.02) 30%, rgba(26, 44, 54, 0.72) 100%); } .hub-mosaic-card--play::after { background: linear-gradient(180deg, rgba(88, 52, 8, 0.04) 20%, rgba(36, 22, 6, 0.74) 100%); } .hub-mosaic-card { border-radius: 8px; } .hub-mosaic-card.hub-mosaic-card--feature { grid-column: 1 / -1; grid-row: span 2; } .hub-mosaic-card:last-child:not(.hub-mosaic-card--feature) { grid-column: 1 / -1; } .hub-mosaic-copy { padding: 0.5rem 0.6rem 0.55rem; } .hub-mosaic-card--feature .hub-mosaic-copy { padding: 0.7rem 0.75rem 0.75rem; } .hub-mosaic-copy em, .hub-mosaic-sub { display: none; } .hub-mosaic-card--feature .hub-mosaic-copy em { display: block; } .hub-mosaic-copy strong, .hub-mosaic-card--feature .hub-mosaic-copy strong { font-size: 1.08rem; } .hub-mosaic-card--feature .hub-mosaic-copy strong { font-size: 1.45rem; } } @media (max-width: 480px) { .event-modal-panel--outdoors { max-height: min(94dvh, 38rem); } .hub-mosaic { grid-auto-rows: minmax(4.85rem, auto); } .hub-mosaic-copy strong { font-size: 1rem; } .hub-mosaic-card--feature .hub-mosaic-copy strong { font-size: 1.32rem; } } @media (prefers-reduced-motion: reduce) { .hub-mosaic-card img, .hub-mosaic-card:hover img, .hub-mosaic-card:focus-visible img { transform: none; transition: none; } } .outdoors-panel { display: grid; gap: 0.85rem; } .outdoors-panel-bar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.35rem 1rem; } .outdoors-panel-lead, .outdoors-group-blurb { color: var(--muted); margin: 0; font-size: 0.92rem; line-height: 1.45; flex: 1 1 16rem; } .outdoors-panel-guide { flex: 0 0 auto; font-size: 0.82rem; font-weight: 700; color: var(--green-deep); text-decoration: none; white-space: nowrap; } .outdoors-panel-guide:hover { color: var(--blue); } .outdoors-groups, .outdoors-extras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem 1.1rem; } .outdoors-group { min-width: 0; padding: 0.75rem 0.85rem 0.85rem; background: var(--white); border: 1px solid rgba(51, 101, 138, 0.1); border-radius: var(--radius-lg); box-shadow: 0 8px 18px rgba(47, 72, 88, 0.05); } .outdoors-group h3 { margin: 0 0 0.5rem; font-size: 1rem; font-style: italic; color: var(--dark-blue); } .outdoors-chip-list, .outdoors-link-list, .outdoors-community-list { list-style: none; margin: 0; padding: 0; } .outdoors-chip-list { display: flex; flex-wrap: wrap; gap: 0.35rem; } .outdoors-chip-list a { display: inline-block; padding: 0.28rem 0.6rem; border-radius: 999px; background: var(--fog); color: var(--blue); font-size: 0.82rem; font-weight: 600; text-decoration: none; line-height: 1.3; } .outdoors-chip-list a:hover { background: var(--green); color: var(--white); } .outdoors-link-list a, .outdoors-community-list a, .outdoors-group-more a { color: var(--blue); text-decoration: none; font-weight: 600; } .outdoors-link-list li + li, .outdoors-community-list li + li { margin-top: 0.3rem; } .outdoors-community-list a { display: block; padding: 0.2rem 0; font-size: 0.9rem; } .outdoors-community-list span { display: block; color: var(--muted); font-weight: 400; font-size: 0.8rem; line-height: 1.35; } .outdoors-group-more { margin: 0.55rem 0 0; font-size: 0.8rem; } .outdoors-card-grid--modal { grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: 0.55rem; } .outdoors-card--compact { padding: 0.7rem 0.8rem 0.75rem; gap: 0.15rem; box-shadow: none; } .outdoors-card--compact h3 { font-size: 1rem; } .outdoors-card--compact p { font-size: 0.8rem; } .outdoors-parks-list { display: grid; gap: 0.65rem; margin-bottom: 1.25rem; } /* Paradise in Lane County — home board based on the Outdoors modal */ .paradise-section { background: radial-gradient(ellipse 70% 50% at 0% 100%, var(--green-soft), transparent 55%), radial-gradient(ellipse 55% 45% at 100% 0%, rgba(134, 187, 216, 0.18), transparent 52%), rgba(255, 255, 255, 0.55); } .paradise-board { overflow: hidden; background: var(--cream-soft); border-radius: 12px; box-shadow: 0 28px 70px rgba(26, 44, 54, 0.16); } .paradise-header { padding: 1.15rem 1.35rem 0; background: radial-gradient(ellipse 70% 90% at 100% 0%, rgba(125, 184, 138, 0.28), transparent 58%), linear-gradient(145deg, #2a4a32 0%, var(--green-deep) 48%, #2f5a3a 100%); color: var(--white); } .paradise-kicker { margin: 0 0 0.2rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--light-blue); } .paradise-header h2 { margin: 0 0 0.4rem; font-size: clamp(1.85rem, 3.4vw, 2.45rem); font-style: italic; color: var(--white); } .paradise-deck { margin: 0 0 0.95rem; max-width: 36rem; color: rgba(232, 240, 243, 0.9); font-size: 1.02rem; line-height: 1.5; } .paradise-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0 -1.35rem 0; } .paradise-tab { margin: 0; border: 0; border-radius: 8px 8px 0 0; padding: 0.7rem 0.18rem 0.62rem; background: transparent; color: rgba(232, 240, 243, 0.78); font-family: var(--font-body); font-size: 0.8rem; font-weight: 700; cursor: pointer; position: relative; } .paradise-tab:hover, .paradise-tab:focus-visible { color: var(--white); background: rgba(255, 255, 255, 0.08); } .paradise-tab.is-active { background: var(--cream-soft); color: var(--green-deep); } .paradise-tab.is-active::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 0.3rem; height: 2px; background: var(--yellow); border-radius: 2px; } .paradise-body { padding: 1.1rem 1.35rem 1.2rem; } .paradise-panel { display: grid; gap: 1rem; } .paradise-bar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 1.1rem; } .paradise-bar p, .paradise-empty { margin: 0; color: var(--muted); font-size: 0.98rem; line-height: 1.5; flex: 1 1 16rem; } .paradise-hub { flex: 0 0 auto; font-size: 0.88rem; font-weight: 700; color: var(--green-deep); text-decoration: none; white-space: nowrap; } .paradise-hub:hover { color: var(--blue); } .paradise-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); gap: 0.85rem 1.05rem; } .paradise-group { min-width: 0; padding: 0.85rem 0.95rem 0.95rem; background: var(--white); border: 1px solid rgba(51, 101, 138, 0.1); border-radius: var(--radius-lg); box-shadow: 0 8px 18px rgba(47, 72, 88, 0.05); } .paradise-group h3 { margin: 0 0 0.55rem; font-size: 1.12rem; font-style: italic; color: var(--dark-blue); } .paradise-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; } .paradise-chips a { display: inline-block; padding: 0.32rem 0.68rem; border-radius: 999px; background: var(--fog); color: var(--blue); font-size: 0.86rem; font-weight: 600; text-decoration: none; line-height: 1.3; } .paradise-chips a:hover { background: var(--green); color: var(--white); } .paradise-parks { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: 0.6rem; } .paradise-park { display: grid; gap: 0.15rem; padding: 0.75rem 0.85rem 0.8rem; background: var(--white); border: 1px solid rgba(51, 101, 138, 0.1); border-radius: var(--radius-lg); text-decoration: none; color: inherit; } .paradise-park h3 { margin: 0; font-size: 1.02rem; color: var(--dark-blue); } .paradise-park p { margin: 0; color: var(--muted); font-size: 0.8rem; } .paradise-park:hover { border-color: rgba(79, 138, 91, 0.45); } .paradise-footer { display: flex; flex-wrap: wrap; gap: 0.45rem 1.15rem; padding: 0.75rem 1.35rem 0.9rem; border-top: 1px solid rgba(51, 101, 138, 0.12); background: var(--cream-soft); } .paradise-footer a { font-size: 0.86rem; font-weight: 700; color: var(--green-deep); text-decoration: none; } .paradise-footer a:hover { color: var(--blue); } .outdoors-hero { background: radial-gradient(ellipse 70% 80% at 100% 0%, rgba(79, 138, 91, 0.22), transparent 55%), linear-gradient(180deg, var(--fog), var(--cream-soft)); } .outdoors-hero--photo { position: relative; min-height: min(58vh, 480px); display: grid; align-items: end; overflow: hidden; padding: 0; background: var(--green-deep); color: var(--white); border-bottom: 0; } .outdoors-hero--photo::before { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: 3px; background: var(--antique-cream); } .outdoors-hero--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .outdoors-hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26, 44, 54, 0.18) 0%, rgba(26, 44, 54, 0.78) 78%), linear-gradient(90deg, rgba(58, 107, 69, 0.28), transparent 48%); } .outdoors-hero--photo .outdoors-hero-copy { position: relative; z-index: 1; padding: 5.5rem 0 2.4rem; max-width: 46rem; } .outdoors-hero--photo .article-back a, .outdoors-hero--photo .section-kicker { color: var(--light-blue); } .outdoors-hero--photo h1 { margin: 0.2rem 0 0.7rem; font-size: clamp(2.8rem, 7vw, 4.6rem); color: var(--white); } .outdoors-hero--photo .section-lead { max-width: 38rem; color: rgba(232, 240, 243, 0.94); } .hub-toolbar { position: relative; z-index: 20; margin-top: -1.35rem; padding-bottom: 0.35rem; } .hub-switch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 1rem; position: relative; z-index: 2; background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 16px 36px rgba(26, 44, 54, 0.14); } .hub-switch-link { padding: 0.85rem 0.45rem; text-align: center; font-weight: 700; text-decoration: none; color: var(--muted); background: var(--white); } .hub-switch-link:hover { color: var(--green-deep); background: var(--cream-soft); } .hub-switch-link.is-active { background: var(--green-deep); color: var(--white); } body[data-outdoors-hub="biking"] .hub-switch-link.is-active { background: var(--blue); } body[data-outdoors-hub="fishing"] .hub-switch-link.is-active { background: var(--fish-steel, #7ea8b6); } body[data-outdoors-hub="golfing"] .hub-switch-link.is-active { background: #2e5a3c; } body[data-outdoors-hub="camping"] .hub-switch-link.is-active { background: #4a5c32; } body[data-outdoors-hub="water"] .hub-switch-link.is-active { background: #1f6f8b; } .hub-jump { margin: 0 0 1.4rem; } .hub-jump-dropdown { display: none; position: relative; z-index: 2; } .hub-jump-pills { display: flex; flex-wrap: wrap; gap: 0.55rem 0.5rem; align-items: center; } .hub-jump-pills a { display: inline-block; padding: 0.34rem 0.72rem; border-radius: 0; background: var(--yellow); color: var(--ink); font-family: var(--font-body); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; line-height: 1.2; text-transform: uppercase; text-decoration: none; box-shadow: 3px 3px 0 rgba(47, 72, 88, 0.22); transform: rotate(-1.4deg); transition: background 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease); } .hub-jump-pills a:nth-child(even) { transform: rotate(1.1deg); } .hub-jump-pills a:nth-child(3n) { transform: rotate(-0.55deg); } .hub-jump-pills a:hover, .hub-jump-pills a:focus-visible { background: var(--yellow-hot); color: var(--ink); box-shadow: 4px 4px 0 rgba(47, 72, 88, 0.28); transform: translateY(-1px) rotate(-0.6deg); } .hub-jump-pills a:focus-visible { outline: 2px solid var(--dark-blue); outline-offset: 3px; } @media (max-width: 760px) { .hub-switch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 0.75rem; border-radius: var(--radius); box-shadow: 0 10px 24px rgba(26, 44, 54, 0.12); overflow: hidden; } .hub-switch-link { padding: 0.62rem 0.35rem; font-size: 0.82rem; font-weight: 700; line-height: 1.2; white-space: normal; } .hub-jump-pills { display: none; } .hub-jump-dropdown { display: block; } .hub-jump-dropdown-label { display: block; margin: 0 0 0.2rem; color: var(--dark-blue); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .hub-jump-select-wrap { position: relative; } .hub-jump-select-wrap::after { content: ""; position: absolute; top: 50%; right: 0.85rem; width: 0.38rem; height: 0.38rem; border-right: 2px solid var(--dark-blue); border-bottom: 2px solid var(--dark-blue); transform: translateY(-65%) rotate(45deg); pointer-events: none; } .hub-jump-select { appearance: none; -webkit-appearance: none; width: 100%; margin: 0; padding: 0.36rem 1.7rem 0.36rem 0.65rem; border: 1px solid rgba(47, 72, 88, 0.16); border-radius: var(--radius); background: var(--white); color: var(--dark-blue); font-family: var(--font-body); font-size: 0.8rem; font-style: normal; font-weight: 550; line-height: 1.25; box-shadow: none; cursor: pointer; } .hub-jump-select:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } body[data-outdoors-hub="play"] .hub-jump-select { background: var(--ink); border-color: rgba(241, 183, 27, 0.45); color: var(--yellow); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); } body[data-outdoors-hub="play"] .hub-jump-select-wrap::after { border-color: var(--yellow); } body[data-outdoors-hub="play"] .hub-jump-dropdown-label { color: var(--dark-blue); } } .hub-chapter { padding: 1.75rem 0; scroll-margin-top: 5.5rem; border-top: 1px solid rgba(47, 72, 88, 0.07); } .hub-chapter--green { background: rgba(242, 246, 244, 0.72); } .hub-chapter--bright { background: rgba(255, 255, 255, 0.32); } .hub-chapter--fog { background: rgba(232, 240, 243, 0.42); } .hub-chapter--blue { background: rgba(232, 240, 243, 0.58); } .hub-chapter--sun { background: rgba(247, 245, 240, 0.82); } .hub-chapter--mist { background: rgba(242, 246, 244, 0.48); } .hub-chapter--navy { background: rgba(226, 236, 242, 0.58); } .hub-chapter--deep { background: rgba(236, 242, 237, 0.68); } .hub-chapter-head { display: grid; grid-template-columns: 1fr auto; gap: 0.4rem 1.5rem; align-items: end; margin-bottom: 1.35rem; } .hub-chapter-head h2 { margin: 0.1rem 0 0.35rem; font-size: clamp(2rem, 4.2vw, 3.15rem); font-style: italic; color: var(--dark-blue); } .hub-chapter-head p { margin: 0; max-width: 36rem; color: var(--muted); } .hub-chapter-count { margin: 0; font-family: var(--font-display); font-size: clamp(2.8rem, 6vw, 4.4rem); font-style: italic; font-weight: 600; line-height: 0.85; color: var(--green); opacity: 0.55; } body[data-outdoors-hub="biking"] .hub-chapter-count { color: var(--blue); } body[data-outdoors-hub="fishing"] .hub-chapter-count { color: #2c5d73; } body[data-outdoors-hub="golfing"] .hub-chapter-count { color: #2e5a3c; } body[data-outdoors-hub="camping"] .hub-chapter-count { color: #4a5c32; } body[data-outdoors-hub="water"] .hub-chapter-count { color: #1f6f8b; } body[data-outdoors-hub="water"] .hub-chapter--pool-2 .hub-dest { min-height: 11.25rem; } .hub-dest { position: relative; z-index: 0; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: 13.5rem; overflow: hidden; border-radius: var(--radius); text-decoration: none; color: var(--white); background: var(--green-deep); box-shadow: 0 12px 28px rgba(26, 44, 54, 0.16); } .hub-dest:hover, .hub-dest:focus-visible { color: var(--white); } .hub-dest img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); } .hub-dest:hover img { transform: scale(1.06); } .hub-dest::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, transparent 32%, rgba(26, 44, 54, 0.9) 100%); } .hub-dest::before { content: ""; position: absolute; top: 0.8rem; left: 0.8rem; z-index: 0; width: 0.5rem; height: 0.5rem; background: var(--yellow); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.22); transform: rotate(45deg); } .hub-dest-copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 0.12rem; padding: 1.05rem 1.05rem 1.1rem; } .hub-dest-place { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--yellow); } .hub-dest strong { font-family: var(--font-display); font-size: clamp(1.15rem, 2vw, 1.45rem); font-style: italic; font-weight: 600; line-height: 1.15; } .hub-dest em { font-style: normal; font-size: 0.78rem; font-weight: 700; opacity: 0.88; } .hub-dest-pair > .hub-dest, .hub-dest-lead > .hub-dest, .hub-dest-stack > .hub-dest { height: 100%; min-height: 100%; } .hub-dest--feature strong { font-size: clamp(1.6rem, 3vw, 2.25rem); } .hub-dest--banner { min-height: min(46vh, 24rem); margin-bottom: 0.75rem; } .hub-dest--banner strong { font-size: clamp(1.8rem, 3.4vw, 2.6rem); } .hub-dest-pair, .hub-dest-lead { display: grid; gap: 0.75rem; margin-bottom: 0.75rem; min-height: min(50vh, 28rem); } .hub-dest-pair { grid-template-columns: 1.35fr 1fr; } .hub-dest-lead { grid-template-columns: 1.45fr 1fr; } .hub-dest-stack { display: grid; grid-template-rows: 1fr 1fr; gap: 0.75rem; } .hub-dest-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; } .hub-dest-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hub-dest-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hub-dest-grid--roomy .hub-dest { min-height: 17.5rem; } body[data-outdoors-hub="water"] .hub-dest-lead-list .hub-dest-pair, body[data-outdoors-hub="water"] .hub-chapter--lead-list .hub-dest-pair, body[data-outdoors-hub="water"] .hub-chapter--lead-list .hub-dest-lead { min-height: min(34vh, 18.5rem); margin-bottom: 1.15rem; } body[data-outdoors-hub="water"] .hub-dest-rows { margin-top: 0.15rem; } body[data-outdoors-hub="water"] .hub-dest-rows-kicker { margin: 0 0 0.45rem; color: var(--muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } body[data-outdoors-hub="water"] .hub-dest-row-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; } body[data-outdoors-hub="water"] .hub-dest-row { display: grid; grid-template-columns: minmax(5.5rem, 7.25rem) 1fr auto; gap: 0.55rem 0.75rem; align-items: baseline; padding: 0.72rem 0.1rem; border-bottom: 1px dashed rgba(26, 44, 54, 0.16); text-decoration: none; color: var(--ink); } body[data-outdoors-hub="water"] .hub-dest-row:hover, body[data-outdoors-hub="water"] .hub-dest-row:focus-visible { color: var(--ink); } body[data-outdoors-hub="water"] .hub-dest-row:hover strong, body[data-outdoors-hub="water"] .hub-dest-row:focus-visible strong { color: #1f6f8b; } body[data-outdoors-hub="water"] .hub-dest-row-place { color: var(--muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } body[data-outdoors-hub="water"] .hub-dest-row strong { font-family: var(--font-display); font-size: 1.05rem; font-style: italic; font-weight: 600; letter-spacing: -0.01em; } body[data-outdoors-hub="water"] .hub-dest-row em { color: #1f6f8b; font-size: 0.7rem; font-weight: 700; font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.78; } @media (max-width: 900px) { body[data-outdoors-hub="water"] .hub-dest-row-grid { grid-template-columns: 1fr; } body[data-outdoors-hub="water"] .hub-jump-dropdown-label { color: var(--ink); letter-spacing: 0.12em; } body[data-outdoors-hub="water"] .hub-jump-select-wrap::after { border-color: var(--ink); } body[data-outdoors-hub="water"] .hub-jump-dropdown .filter-combo-trigger, body[data-outdoors-hub="water"] .hub-jump-select { padding: 0.42rem 1.7rem 0.42rem 0.72rem; border: 0; border-radius: 0; background: var(--yellow); color: var(--ink); font-family: var(--font-body); font-size: 0.72rem; font-style: normal; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; box-shadow: 3px 3px 0 rgba(47, 72, 88, 0.22); } body[data-outdoors-hub="water"] .hub-jump-dropdown .filter-combo-trigger::before { display: none; } body[data-outdoors-hub="water"] .hub-jump-dropdown .filter-combo-chevron { border-color: var(--ink); } body[data-outdoors-hub="water"] .hub-jump-dropdown .filter-combo.is-open .filter-combo-trigger { border-radius: 0; } body[data-outdoors-hub="water"] .hub-jump-dropdown .filter-combo-panel { border: 0; border-radius: 0; background: var(--white); box-shadow: 3px 3px 0 rgba(47, 72, 88, 0.22); } body[data-outdoors-hub="water"] .hub-jump-dropdown .filter-combo-option { border-bottom-color: rgba(47, 72, 88, 0.12); color: var(--ink); font-family: var(--font-body); font-size: 0.68rem; font-style: normal; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } body[data-outdoors-hub="water"] .hub-jump-dropdown .filter-combo-option:hover, body[data-outdoors-hub="water"] .hub-jump-dropdown .filter-combo-option:focus-visible, body[data-outdoors-hub="water"] .hub-jump-dropdown .filter-combo-option.is-selected { color: var(--ink); background: var(--yellow-hot); } body[data-outdoors-hub="water"] .hub-jump-dropdown .filter-combo-option.is-selected::after { width: 0.32rem; height: 0.32rem; border-radius: 0; background: var(--ink); transform: translateY(-50%); } } @media (max-width: 560px) { body[data-outdoors-hub="water"] .hub-chapter--lead-list .hub-dest-pair, body[data-outdoors-hub="water"] .hub-chapter--lead-list .hub-dest-lead { min-height: 0; grid-template-columns: 1fr; } body[data-outdoors-hub="water"] .hub-chapter--lead-list .hub-dest::before { content: none; } body[data-outdoors-hub="water"] .hub-dest-row { grid-template-columns: 1fr auto; padding: 0.78rem 0; } body[data-outdoors-hub="water"] .hub-dest-row-place { grid-column: 1 / -1; margin-bottom: -0.28rem; } } .hub-chapter--shops { padding: 1.75rem 0; } .hub-spot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 0.7rem; } .hub-spot { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 0.8rem; row-gap: 0.15rem; align-items: start; padding: 0.95rem 1rem 1rem; background: var(--white); border: 1px solid rgba(51, 101, 138, 0.1); border-left: 4px solid var(--yellow); border-radius: var(--radius-lg); text-decoration: none; color: inherit; box-shadow: 0 8px 18px rgba(47, 72, 88, 0.05); transition: transform 0.2s var(--ease), border-color 0.2s var(--ease); } .hub-spot:hover { transform: translateY(-3px); border-left-color: var(--green); color: inherit; } .hub-spot-num { grid-row: 1 / span 2; font-family: var(--font-display); font-size: 1.25rem; font-style: italic; font-weight: 600; color: var(--green); line-height: 1.1; padding-top: 0.1rem; } body[data-outdoors-hub="biking"] .hub-spot-num { color: var(--blue); } body[data-outdoors-hub="fishing"] .hub-spot-num { color: #2c5d73; } body[data-outdoors-hub="golfing"] .hub-spot-num { color: #2e5a3c; } body[data-outdoors-hub="camping"] .hub-spot-num { color: #4a5c32; } body[data-outdoors-hub="water"] .hub-spot-num { color: #1f6f8b; } .hub-spot strong { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; color: var(--dark-blue); } .hub-spot em { font-style: normal; font-size: 0.8rem; font-weight: 700; color: var(--green); } .hub-intel-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0.75rem; } .hub-intel:first-child { grid-row: span 2; } .hub-intel { display: grid; align-content: start; gap: 0.3rem; padding: 1.15rem 1.15rem 1.2rem; background: var(--white); border-radius: var(--radius-lg); text-decoration: none; color: inherit; border: 1px solid transparent; box-shadow: 0 8px 18px rgba(47, 72, 88, 0.05); } .hub-intel:first-child { padding: 1.4rem 1.4rem 1.5rem; } .hub-intel:hover { border-color: rgba(79, 138, 91, 0.4); color: inherit; } .hub-intel strong { font-family: var(--font-display); font-size: 1.15rem; font-style: italic; color: var(--dark-blue); } .hub-intel:first-child strong { font-size: 1.55rem; } .hub-intel p { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.45; } .hub-intel em { font-style: normal; font-size: 0.8rem; font-weight: 700; color: var(--green); } .outdoors-block { margin-bottom: 2.75rem; } .outdoors-block-head { max-width: 42rem; margin-bottom: 1.25rem; } .outdoors-block-head .section-lead { margin-bottom: 0.7rem; } .outdoors-block-head .section-lead:last-of-type { margin-bottom: 0; } .outdoors-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 0.9rem; } .outdoors-card { display: grid; gap: 0.35rem; padding: 1.05rem 1.1rem; background: var(--white); border: 1.5px solid rgba(51, 101, 138, 0.14); border-radius: var(--radius-lg); text-decoration: none; color: inherit; box-shadow: var(--shadow-soft); } .outdoors-card h3 { margin: 0; font-size: 1.15rem; color: var(--dark-blue); } .outdoors-card p { margin: 0; color: var(--muted); font-size: 0.92rem; } .outdoors-card span { color: var(--green); font-size: 0.85rem; font-weight: 700; } .outdoors-card:hover { border-color: rgba(79, 138, 91, 0.45); } .outdoors-hub-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding-top: 1.25rem; } .outdoors-hub-tile { position: relative; display: block; min-height: 16rem; overflow: hidden; border-radius: var(--radius-lg); color: var(--white); text-decoration: none; background: var(--green-deep); box-shadow: 0 10px 24px rgba(26, 44, 54, 0.16); transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), color 0.2s var(--ease); } .outdoors-hub-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.01); transition: transform 0.7s var(--ease); } .outdoors-hub-tile span { position: absolute; inset: auto 0 0; padding: 1.1rem 1.2rem 1.2rem; background: linear-gradient(180deg, transparent, rgba(26, 44, 54, 0.82)); color: var(--white); transition: background 0.45s var(--ease); } .outdoors-hub-tile strong { display: block; font-family: var(--font-display); font-size: 1.7rem; font-style: italic; color: inherit; } .outdoors-hub-tile em { font-style: normal; opacity: 0.9; color: inherit; } .outdoors-hub-tile:hover, .outdoors-hub-tile:focus-visible { color: var(--white); transform: translateY(-5px); box-shadow: 0 16px 32px rgba(26, 44, 54, 0.28); } .outdoors-hub-tile:hover img, .outdoors-hub-tile:focus-visible img { transform: scale(1.07); } .outdoors-hub-tile:hover span, .outdoors-hub-tile:focus-visible span { color: var(--white); background: linear-gradient(180deg, transparent, rgba(26, 44, 54, 0.9)); } .outdoors-hub-tile:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; } .outdoors-block-more { margin: 1rem 0 0; } /* Something Different / play hub */ .play-hero { background: radial-gradient(ellipse 70% 60% at 100% 0%, rgba(241, 183, 27, 0.28), transparent 52%), radial-gradient(ellipse 50% 50% at 0% 100%, rgba(134, 187, 216, 0.18), transparent 55%), linear-gradient(165deg, #152028 0%, #1a2c36 48%, #243846 100%); color: var(--white); border-bottom: 3px solid var(--yellow); } .play-hero .article-back a, .play-hero .section-kicker { color: var(--yellow); } .play-hero h1 { color: var(--white); margin: 0.15rem 0 0.45rem; font-size: clamp(2.8rem, 7vw, 4.5rem); } .play-hero .section-lead { color: rgba(232, 240, 243, 0.92); max-width: 38rem; } .play-hero-tag { margin: 0 0 0.85rem; display: inline-block; padding: 0.28rem 0.75rem; border: 1.5px solid var(--yellow); border-radius: 999px; color: var(--yellow); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .play-place-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1.15rem 0 0; } .play-place-chips span { padding: 0.28rem 0.7rem; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(241, 183, 27, 0.35); color: rgba(232, 240, 243, 0.92); font-size: 0.8rem; font-weight: 600; } .hub-toolbar--play { margin-top: 0.85rem; } .hub-jump--play .hub-jump-pills a { background: var(--ink); color: var(--yellow); border: 1px solid rgba(241, 183, 27, 0.45); box-shadow: none; transform: rotate(-1.2deg); } .hub-jump--play .hub-jump-pills a:nth-child(even) { transform: rotate(1deg); } .hub-jump--play .hub-jump-pills a:hover { background: var(--yellow); color: var(--ink); border-color: var(--yellow); } .play-tease { padding: 0.85rem 1.35rem 1.15rem; border-top: 1px solid rgba(47, 72, 88, 0.1); background: rgba(26, 44, 54, 0.03); } .play-tease-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem 0.85rem; margin: 0; justify-items: stretch; } .play-tease-btns a { display: flex; align-items: center; justify-content: center; width: 100%; padding: 0.38rem 0.7rem; border: 1px solid rgba(241, 183, 27, 0.45); border-radius: 999px; background: var(--ink); color: var(--yellow); font-size: 0.78rem; font-weight: 700; text-align: center; text-decoration: none; box-shadow: 0 4px 12px rgba(26, 44, 54, 0.12); transform: rotate(-1deg); } .play-tease-btns a:hover, .play-tease-btns a:focus-visible { background: var(--yellow); color: var(--ink); border-color: var(--yellow); } .play-tease-btns a:nth-child(2) { transform: rotate(1.1deg); } .play-tease-btns a:nth-child(3) { transform: rotate(-0.7deg); } @media (max-width: 560px) { .play-tease-btns { grid-template-columns: 1fr; } .play-tease-btns a, .play-tease-btns a:nth-child(2), .play-tease-btns a:nth-child(3) { transform: rotate(0deg); } .play-tease-btns a:nth-child(odd) { transform: rotate(-0.8deg); } .play-tease-btns a:nth-child(even) { transform: rotate(0.9deg); } } .hub-chapter--volt { background: rgba(241, 183, 27, 0.08); } .hub-chapter--ember { background: rgba(51, 101, 138, 0.08); } .hub-chapter--neon { background: rgba(26, 44, 54, 0.05); } .hub-chapter--sand { background: rgba(247, 245, 240, 0.9); } body[data-outdoors-hub="play"] .hub-chapter-count { color: var(--yellow); opacity: 0.85; } body[data-outdoors-hub="play"] .hub-chapter-head--play { align-items: start; } body[data-outdoors-hub="play"] .hub-chapter-head--play .hub-chapter-count { order: -1; justify-self: start; margin-bottom: 0.2rem; } body[data-outdoors-hub="play"] .hub-chapter-head--play { grid-template-columns: auto 1fr; gap: 0.6rem 1.2rem; } body[data-outdoors-hub="play"] .hub-dest-tag { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 2; padding: 0.22rem 0.55rem; border-radius: 999px; background: var(--yellow); color: var(--ink); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; } body[data-outdoors-hub="play"] .hub-dest::before { background: var(--yellow); } body[data-outdoors-hub="play"] .hub-dest-grid--posters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } body[data-outdoors-hub="play"] .hub-dest--poster { min-height: 18.5rem; aspect-ratio: 3 / 4; max-height: 24rem; } body[data-outdoors-hub="play"] .hub-jump-pills a:hover { background: var(--yellow); color: var(--ink); } .outdoors-alt-strip { margin-bottom: 1.25rem; padding-top: 0.25rem; padding-bottom: 0.35rem; } .outdoors-alt-strip-inner { padding: 1.15rem 0 0; border-top: 3px solid rgba(241, 183, 27, 0.55); } .outdoors-alt-kicker { margin: 0 0 0.35rem; color: var(--muted); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .outdoors-alt-copy { margin: 0 0 0.85rem; max-width: 40rem; color: var(--muted); font-size: 0.95rem; line-height: 1.55; } .trinket--play { --trinket-tilt: -1.75deg; margin-top: 0.15rem; margin-right: 0; padding: 0.42rem 0.9rem; border: 1px solid rgba(241, 183, 27, 0.45); border-radius: 999px; background: var(--ink); color: var(--yellow); filter: none; box-shadow: 0 4px 12px rgba(26, 44, 54, 0.12); } .trinket--play::after { content: none; } .trinket--play:hover, .trinket--play:focus-visible { background: var(--yellow); color: var(--ink); border-color: var(--yellow); filter: none; } .trinket--play:hover::after, .trinket--play:focus-visible::after { content: none; } body[data-spot-hub="play"] .spot-hero-shade { background: linear-gradient(180deg, rgba(21, 32, 40, 0.2) 0%, rgba(21, 32, 40, 0.82) 78%), linear-gradient(90deg, rgba(241, 183, 27, 0.22), transparent 48%); } body[data-spot-hub="play"] .section-kicker, body[data-spot-hub="play"] .article-back a { color: var(--yellow); } @media (max-width: 900px) { body[data-outdoors-hub="play"] .hub-dest-grid--posters { grid-template-columns: repeat(2, minmax(0, 1fr)); } body[data-outdoors-hub="play"] .hub-dest--poster { aspect-ratio: auto; min-height: 16rem; max-height: none; } } @media (max-width: 560px) { body[data-outdoors-hub="play"] .hub-chapter-head--play { grid-template-columns: 1fr; } } .spot-page { padding-bottom: 0; } .spot-hero { position: relative; min-height: min(72vh, 620px); display: grid; align-items: end; overflow: visible; background: var(--green-deep); color: var(--white); } .spot-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .spot-hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26, 44, 54, 0.15) 0%, rgba(26, 44, 54, 0.72) 72%), linear-gradient(90deg, rgba(58, 107, 69, 0.28), transparent 45%); } .spot-hero-stage { position: relative; z-index: 1; padding-bottom: 0.5rem; } .spot-hero-copy { position: relative; z-index: 1; max-width: 52rem; } .spot-hero .article-back a, .spot-hero .section-kicker { color: var(--light-blue); } .spot-hero h1 { margin: 0.35rem 0 0.85rem; font-size: clamp(2.6rem, 6vw, 4.4rem); font-style: italic; letter-spacing: -0.03em; color: var(--white); } .spot-dek { margin: 0; max-width: 40rem; font-size: 1.12rem; line-height: 1.6; color: rgba(232, 240, 243, 0.94); } .spot-dek a { color: inherit; font-weight: 650; text-underline-offset: 0.18em; } .spot-dek a:hover, .spot-dek a:focus-visible { color: var(--white); } .spot-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 0.85rem; margin-top: 1.35rem; margin-bottom: 0; position: relative; z-index: 2; } .spot-stat { padding: 0.95rem 1rem 1.05rem; background: var(--white); border-radius: var(--radius-lg); border: 1.5px solid rgba(51, 101, 138, 0.12); box-shadow: var(--shadow-soft); } .spot-stat p { margin: 0 0 0.35rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--green); } .spot-stat strong { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; color: var(--dark-blue); line-height: 1.3; } .spot-stat a { color: inherit; text-decoration: underline; text-underline-offset: 0.18em; } .spot-stat a:hover, .spot-stat a:focus-visible { color: var(--green-deep); } .spot-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(16rem, 0.8fr); gap: 2.5rem 2.75rem; align-items: start; padding-top: 2.5rem; padding-bottom: 1rem; } body[data-spot-hub="camping"] .spot-layout { padding-top: 1.35rem; } .spot-prose { font-size: 1.08rem; line-height: 1.7; color: var(--ink); } .spot-section + .spot-section { margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid rgba(51, 101, 138, 0.14); } .spot-prose h2 { margin: 0 0 0.8rem; font-size: clamp(1.45rem, 2.4vw, 1.85rem); font-style: italic; color: var(--dark-blue); } .spot-prose a { color: var(--green-deep); font-weight: 600; text-underline-offset: 0.18em; } .spot-prose a:hover, .spot-prose a:focus-visible { color: var(--ink); } .spot-prose p { margin: 0 0 1.1rem; } .spot-prose p:last-child { margin-bottom: 0; } .spot-aside { display: grid; gap: 1.15rem; } .spot-weather-card, .spot-map-card, .spot-related { padding: 1.1rem 1.15rem 1.2rem; background: var(--white); border: 1.5px solid rgba(51, 101, 138, 0.12); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); } .spot-weather-card h2, .spot-map-card h2, .spot-related h2 { margin: 0 0 0.85rem; font-size: 1.25rem; color: var(--dark-blue); } .spot-weather-card iframe, .spot-weather-card a.weatherwidget-io { display: block; width: 100% !important; min-height: 12rem; border: 0; border-radius: var(--radius); } .spot-map-card iframe { width: 100%; min-height: 16rem; border: 0; border-radius: var(--radius); } .spot-related ul { list-style: none; margin: 0; padding: 0; } .spot-related li + li { margin-top: 0.55rem; } .spot-related a { color: var(--blue); font-weight: 600; text-decoration: none; } .spot-related a:hover { color: var(--green-deep); } .spot-sources { padding: 0 0 2.5rem; color: var(--muted); font-size: 0.92rem; } .spot-sources p { margin: 0 0 0.45rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--green); } .spot-sources ul { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; list-style: none; margin: 0; padding: 0; } .spot-sources a { color: var(--blue); } @media (max-width: 900px) { .hub-jump { margin: 0 0 0.85rem; } .hub-jump-pills { display: none; } .hub-jump-dropdown { display: block; } .hub-jump-dropdown-label, .weather-city-bar .weather-city-label { display: block; margin: 0 0 0.2rem; color: var(--dark-blue); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .hub-jump-select-wrap:has(.filter-combo)::after { display: none; } .weather-city-bar .filter-combo, .weather-city-select { max-width: none; } .hub-jump-dropdown .filter-combo-trigger, .hub-jump-select, .weather-city-bar .filter-combo-trigger, .weather-city-select { min-height: 0; height: auto; padding: 0.4rem 1.7rem 0.4rem 0.75rem; border: 1px solid rgba(134, 187, 216, 0.22); border-radius: 0.85rem; background: repeating-linear-gradient( -11deg, transparent, transparent 28px, rgba(241, 183, 27, 0.04) 28px, rgba(241, 183, 27, 0.04) 29px ), linear-gradient(180deg, #1a2f3a 0%, #243a48 100%); color: rgba(255, 255, 255, 0.94); font-family: var(--font-display); font-size: 0.92rem; font-style: italic; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; box-shadow: 0 10px 24px rgba(16, 26, 32, 0.18); } .hub-jump-dropdown .filter-combo-chevron, .weather-city-bar .filter-combo-chevron { width: 0.32rem; height: 0.32rem; border-color: var(--yellow); } .hub-jump-dropdown .filter-combo.is-open .filter-combo-trigger, .weather-city-bar .filter-combo.is-open .filter-combo-trigger { border-bottom-left-radius: 0.35rem; border-bottom-right-radius: 0.35rem; } .hub-jump-dropdown .filter-combo-panel, .weather-city-bar .filter-combo-panel { top: calc(100% + 0.28rem); max-height: min(16rem, 52vh); padding: 0.35rem 0.45rem 0.45rem; border: 1px solid rgba(134, 187, 216, 0.22); border-radius: 0.85rem; background: repeating-linear-gradient( -11deg, transparent, transparent 28px, rgba(241, 183, 27, 0.04) 28px, rgba(241, 183, 27, 0.04) 29px ), linear-gradient(180deg, #1a2f3a 0%, #243a48 100%); box-shadow: 0 16px 40px rgba(16, 26, 32, 0.32); } .weather-city-bar .filter-combo-panel { max-height: min(22rem, 62vh); } .hub-jump-dropdown .filter-combo-option, .weather-city-bar .filter-combo-option { position: relative; padding: 0.42rem 0.35rem 0.42rem 0.75rem; border-radius: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); background: transparent; color: rgba(255, 255, 255, 0.94); font-family: var(--font-display); font-size: 0.98rem; font-style: italic; font-weight: 600; letter-spacing: -0.01em; } .hub-jump-dropdown .filter-combo-option:last-child, .weather-city-bar .filter-combo-option:last-child { border-bottom: 0; } .hub-jump-dropdown .filter-combo-option:hover, .hub-jump-dropdown .filter-combo-option:focus-visible, .weather-city-bar .filter-combo-option:hover, .weather-city-bar .filter-combo-option:focus-visible { background: transparent; color: var(--yellow); padding-left: 0.95rem; } .hub-jump-dropdown .filter-combo-option.is-selected, .weather-city-bar .filter-combo-option.is-selected { background: transparent; color: var(--yellow); font-weight: 600; } .hub-jump-dropdown .filter-combo-option.is-selected::after, .weather-city-bar .filter-combo-option.is-selected::after { content: ""; position: absolute; left: 0.12rem; top: 50%; width: 0.28rem; height: 0.28rem; border-radius: 50%; background: var(--yellow); transform: translateY(-50%); } body[data-outdoors-hub="play"] .hub-jump-dropdown-label { color: var(--dark-blue); } .outdoors-groups, .outdoors-extras, .spot-layout, .hub-intel-grid { grid-template-columns: 1fr; } .outdoors-hub-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hub-switch { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hub-dest-grid, .hub-dest-grid--3, .hub-dest-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hub-dest-pair, .hub-dest-lead { min-height: min(42vh, 22rem); gap: 0.55rem; margin-bottom: 0.55rem; } .hub-dest-pair > .hub-dest, .hub-dest-lead > .hub-dest, .hub-dest-stack > .hub-dest { min-height: 0; } .hub-dest-stack > .hub-dest::before { content: none; } .hub-dest-stack, .hub-dest-grid, .hub-dest-grid--3, .hub-dest-grid--2 { gap: 0.55rem; } .hub-dest--feature, .hub-dest--banner, .hub-dest-grid--roomy .hub-dest { min-height: 16rem; } .hub-dest-copy { padding: 0.7rem 0.75rem 0.75rem; } .hub-dest--feature strong { font-size: clamp(1.2rem, 4.2vw, 1.7rem); } .hub-intel:first-child { grid-row: auto; } .spot-hero { min-height: 70vh; } .spot-hero-stage { padding-top: 2.15rem; } body[data-outdoors-hub] .page-hero, .parks-page .page-hero { padding-top: 2.15rem; } body[data-outdoors-hub] .page-hero.outdoors-hero--photo { align-items: start; padding-top: 0; } .outdoors-hero--photo .outdoors-hero-copy { padding-top: 2.15rem; } .spot-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; margin-top: 0.7rem; margin-bottom: 0; } .spot-stat { padding: 0.45rem 0.55rem 0.48rem; } .spot-stat p { margin: 0 0 0.08rem; font-size: 0.6rem; letter-spacing: 0.06em; } .spot-stat strong { font-size: 0.88rem; line-height: 1.2; } .spot-stats > .spot-stat:last-child:nth-child(odd) { grid-column: 1 / -1; } .spot-layout { padding-top: 2rem; } body[data-spot-hub="camping"] .spot-layout { padding-top: 1.15rem; } } @media (max-width: 720px) { .outdoors-tabs, .paradise-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 560px) { .outdoors-tabs, .paradise-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } .outdoors-hub-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hub-switch { grid-template-columns: repeat(3, minmax(0, 1fr)); } .outdoors-tab, .outdoors-tab.is-active, .paradise-tab, .paradise-tab.is-active { border-radius: 0; } .hub-chapter-head { grid-template-columns: 1fr; } .hub-chapter-count { display: none; } .hub-dest--banner { min-height: 14rem; margin-bottom: 0.65rem; } } /* ——— Marsha (voice front desk) ——— */ .marsha-hero .section-lead { max-width: 42rem; margin-bottom: 1.35rem; } .marsha-hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0; } .marsha-call { position: relative; overflow: hidden; background: radial-gradient(ellipse 90% 70% at 8% 0%, rgba(134, 187, 216, 0.22), transparent 55%), radial-gradient(ellipse 60% 50% at 100% 100%, rgba(125, 184, 138, 0.28), transparent 50%), linear-gradient(155deg, var(--green-deep) 0%, #2f5a3a 42%, var(--green) 100%); color: var(--white); padding: 1.75rem 0; } .marsha-call .section-kicker { color: var(--light-blue); } .marsha-call .section-title { color: var(--white); } .marsha-call .section-lead { color: rgba(232, 240, 243, 0.92); margin-bottom: 1.5rem; } .marsha-stage { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, 400px); gap: 2.25rem 3rem; align-items: start; } .marsha-steps { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 1rem; } .marsha-steps li { display: grid; grid-template-columns: 2rem 1fr; gap: 0.85rem; align-items: start; } .marsha-step-num { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--yellow); color: var(--ink); font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 1.05rem; line-height: 1; } .marsha-steps strong { display: block; color: var(--white); font-size: 1.02rem; margin-bottom: 0.15rem; } .marsha-steps p { margin: 0; color: rgba(207, 224, 232, 0.95); font-size: 0.95rem; } .marsha-starters-label { margin: 0 0 0.55rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--yellow); } .marsha-starters { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; } .marsha-starters li { margin: 0; padding: 0.4rem 0.75rem; border: 1px solid rgba(232, 240, 243, 0.28); border-radius: 999px; color: var(--fog); font-size: 0.88rem; background: rgba(26, 44, 54, 0.18); } .marsha-desk-wrap { position: relative; } .marsha-desk-pulse { position: absolute; inset: 8% 6%; border-radius: 50%; background: radial-gradient(circle, rgba(241, 183, 27, 0.28), transparent 68%); pointer-events: none; animation: marshaPulse 3.6s ease-in-out infinite; } @keyframes marshaPulse { 0%, 100% { transform: scale(0.92); opacity: 0.55; } 50% { transform: scale(1.08); opacity: 1; } } .marsha-desk { position: relative; background: var(--white); border-radius: var(--radius-lg); border-top: 4px solid var(--yellow); box-shadow: 0 22px 48px rgba(26, 44, 54, 0.28); padding: 0.85rem 0.85rem 1rem; } .marsha-desk-label { margin: 0 0 0.55rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); text-align: center; } .marsha-desk-frame { display: block; width: 100%; height: 28.5rem; border: 0; border-radius: var(--radius); background: #ffffff; } .marsha-desk-note, .marsha-noscript { margin: 0.75rem 0 0; font-size: 0.88rem; line-height: 1.5; color: rgba(232, 240, 243, 0.82); text-align: center; } .marsha-noscript { color: var(--muted); padding: 0.5rem 0.35rem 0; } .marsha-desk-note a, .marsha-noscript a { color: var(--yellow); } #desk:target .marsha-desk { box-shadow: 0 0 0 3px var(--yellow), 0 22px 48px rgba(26, 44, 54, 0.28); } .marsha-help-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.15rem; } .marsha-help { margin: 0; padding: 1.35rem 1.25rem 1.4rem; background: var(--white); border: 1px solid rgba(51, 101, 138, 0.12); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); } .marsha-help-mark { display: block; font-family: var(--font-display); font-style: italic; font-size: 1.45rem; font-weight: 600; color: var(--green); line-height: 1; margin-bottom: 0.65rem; } .marsha-help h3 { margin: 0 0 0.45rem; font-size: 1.25rem; font-style: normal; } .marsha-help p { margin: 0; color: var(--muted); font-size: 0.98rem; } .marsha-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; } .marsha-pair-card { padding: 1.5rem 1.4rem 1.55rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); } .marsha-pair-card h3 { margin: 0 0 0.55rem; font-size: 1.65rem; } .marsha-pair-card p { margin: 0 0 1.15rem; } .marsha-pair-kicker { margin: 0 0 0.4rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .marsha-pair-card--voice { background: radial-gradient(ellipse 80% 60% at 100% 0%, rgba(134, 187, 216, 0.2), transparent 55%), linear-gradient(165deg, var(--green-deep), var(--green)); color: var(--white); } .marsha-pair-card--voice h3 { color: var(--white); } .marsha-pair-card--voice p { color: rgba(232, 240, 243, 0.92); } .marsha-pair-card--voice .marsha-pair-kicker { color: var(--yellow); } .marsha-pair-card--text { background: var(--white); border: 1px solid rgba(51, 101, 138, 0.12); } .marsha-pair-card--text .marsha-pair-kicker { color: var(--blue); } .marsha-pair-card--text p:not(.marsha-pair-kicker) { color: var(--muted); } .marsha-fallback-inner { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 1.5rem 2.5rem; align-items: start; padding: 1.75rem 1.6rem; background: var(--white); border: 1px solid rgba(51, 101, 138, 0.12); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); } .marsha-fallback .section-lead { margin-bottom: 0; } .marsha-address { font-style: normal; margin: 0; padding: 0.35rem 0 0; color: var(--ink); line-height: 1.7; } .marsha-address a { color: var(--green-deep); font-weight: 650; text-decoration: none; } .marsha-address a:hover { color: var(--green); } @media (max-width: 960px) { .marsha-stage, .marsha-help-grid, .marsha-pair, .marsha-fallback-inner { grid-template-columns: 1fr; } .marsha-desk-wrap { order: -1; } .marsha-desk-frame { height: 26rem; } } @media (max-width: 560px) { .marsha-desk-frame { height: 24.5rem; } .marsha-hero-actions .btn { width: 100%; } } /* ——— Parks Atlas ——— */ .parks-page { background: radial-gradient(ellipse 70% 50% at 0% 0%, rgba(58, 107, 69, 0.14), transparent 55%), radial-gradient(ellipse 50% 40% at 100% 8%, rgba(134, 187, 216, 0.16), transparent 50%); } .parks-hero { padding-bottom: 0.5rem; } .parks-atlas-section { padding-top: 0.5rem; } .parks-atlas-stage { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr); gap: 1.15rem; align-items: start; } .parks-map-card { padding: 1rem 1.1rem 1.05rem; border-radius: 12px; background: radial-gradient(ellipse 70% 80% at 100% 0%, rgba(125, 184, 138, 0.22), transparent 55%), linear-gradient(155deg, #24382c 0%, var(--green-deep) 48%, #2c4a34 100%); color: var(--white); box-shadow: 0 22px 50px rgba(26, 44, 54, 0.18); } .parks-map-kicker, .parks-chip-label { margin: 0 0 0.45rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .parks-map-kicker { color: var(--light-blue); } .parks-map-hint { margin: 0.35rem 0 0; color: rgba(232, 240, 243, 0.78); font-size: 0.86rem; line-height: 1.45; } .parks-map-svg { display: block; width: 100%; height: auto; overflow: visible; } .parks-map-region { fill: rgba(125, 184, 138, 0.42); stroke: rgba(242, 246, 244, 0.55); stroke-width: 1.4; cursor: pointer; transition: fill 0.2s var(--ease), stroke 0.2s var(--ease), opacity 0.2s var(--ease); } .parks-map-region[data-region="coast"] { fill: rgba(134, 187, 216, 0.5); } .parks-map-region[data-region="fern-ridge"] { fill: rgba(79, 138, 91, 0.55); } .parks-map-region[data-region="eugene"] { fill: rgba(241, 183, 27, 0.42); } .parks-map-region[data-region="springfield"] { fill: rgba(125, 184, 138, 0.58); } .parks-map-region[data-region="south-lane"] { fill: rgba(51, 101, 138, 0.5); } .parks-map-region[data-region="mckenzie"] { fill: rgba(232, 240, 243, 0.22); } .parks-map-region[data-region="oakridge"] { fill: rgba(47, 72, 88, 0.55); } .parks-map-region:not(.is-unavailable):hover, .parks-map-region:not(.is-unavailable):focus-visible, .parks-map-region.is-active { fill: rgba(241, 183, 27, 0.72); stroke: var(--yellow); stroke-width: 2; } .parks-map-region:focus { outline: none; } .parks-map-region.is-dim { opacity: 0.38; } .parks-map-label, .parks-map-edge { fill: var(--white); font-family: var(--font-display); font-style: italic; pointer-events: none; } .parks-map-label { font-size: 15px; } .parks-map-edge { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; font-style: normal; font-family: var(--font-body); font-weight: 700; fill: rgba(232, 240, 243, 0.55); } .parks-atlas-tools { display: grid; gap: 0.85rem; padding: 1rem 1.05rem 1.1rem; border-radius: 12px; background: var(--cream-soft); border: 1px solid rgba(51, 101, 138, 0.12); box-shadow: var(--shadow-soft); } .parks-search { display: grid; gap: 0.35rem; color: var(--dark-blue); font-size: 0.82rem; font-weight: 600; } .parks-chip-label { color: var(--muted); } .parks-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; } .parks-chip { margin: 0; padding: 0.32rem 0.7rem; border: 1px solid rgba(51, 101, 138, 0.18); border-radius: 999px; background: var(--white); color: var(--ink); font: inherit; font-size: 0.82rem; cursor: pointer; } .parks-chip:hover, .parks-chip:focus-visible { border-color: var(--green-deep); color: var(--green-deep); } .parks-chip.is-on { background: var(--green-deep); border-color: var(--green-deep); color: var(--white); } .parks-chip.is-unavailable, .parks-chip:disabled { color: #8a9aa3; background: var(--fog); border-color: transparent; cursor: not-allowed; } .parks-chip.is-unavailable:hover, .parks-chip.is-unavailable:focus-visible, .parks-chip:disabled:hover, .parks-chip:disabled:focus-visible { border-color: transparent; color: #8a9aa3; } .parks-chip.is-unavailable.is-on { background: rgba(79, 138, 91, 0.12); border-color: transparent; color: #7d9086; cursor: pointer; } .parks-map-region.is-unavailable { opacity: 0.28; cursor: not-allowed; } .parks-map-region.is-unavailable.is-active { opacity: 0.55; cursor: pointer; } .parks-show-row { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; } .parks-clear { margin: 0; padding: 0; border: 0; background: none; color: var(--blue); font: inherit; font-size: 0.88rem; cursor: pointer; text-decoration: underline; text-underline-offset: 0.15em; } .parks-results { margin-top: 1.35rem; } .parks-status { margin: 0 0 0.75rem; color: var(--muted); font-size: 0.92rem; } .parks-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; align-items: start; } .parks-card { border: 1px solid rgba(51, 101, 138, 0.12); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-soft); scroll-margin-top: 5.5rem; } .parks-card.is-open { border-color: var(--green); } .parks-card-btn { display: grid; gap: 0.18rem; width: 100%; margin: 0; padding: 0.85rem 0.95rem 0.55rem; border: 0; background: none; text-align: left; font: inherit; color: inherit; } .parks-card-btn:last-child { padding-bottom: 0.9rem; } .parks-card-place { color: var(--green); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .parks-card-btn strong { font-family: var(--font-display); font-size: 1.15rem; font-style: italic; font-weight: 600; color: var(--dark-blue); } .parks-card-badges, .parks-dots { display: flex; flex-wrap: wrap; gap: 0.3rem; } .parks-badge, .parks-dot { padding: 0.12rem 0.45rem; border-radius: 999px; background: var(--fog); color: var(--muted); font-size: 0.72rem; } .parks-badge--city { background: rgba(51, 101, 138, 0.12); color: var(--blue); } .parks-badge--county { background: rgba(79, 138, 91, 0.16); color: var(--green-deep); } .parks-badge--state { background: rgba(241, 183, 27, 0.22); color: #8a6408; } .parks-badge--federal { background: rgba(47, 72, 88, 0.12); color: var(--dark-blue); } .parks-badge--willamalane { background: rgba(134, 187, 216, 0.28); color: var(--blue); } .parks-badge--river-road { background: rgba(74, 92, 50, 0.16); color: #4a5c32; } .parks-detail { padding: 0 0.95rem 0.95rem; color: var(--muted); font-size: 0.92rem; line-height: 1.5; } .parks-detail p { margin: 0 0 0.45rem; } .parks-detail-meta { font-size: 0.8rem; } .parks-detail-link { color: var(--green-deep); font-weight: 600; text-decoration: none; } .parks-detail-links { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin: 0; } .parks-detail-link:hover, .parks-detail-link:focus-visible { text-decoration: underline; } .parks-empty { grid-column: 1 / -1; margin: 0; color: var(--muted); } .parks-portal { display: grid; grid-template-columns: minmax(10rem, 0.9fr) minmax(0, 1.2fr); gap: 1rem; align-items: center; padding: 0.85rem 1rem; border-radius: 12px; text-decoration: none; color: var(--white); background: radial-gradient(ellipse 70% 90% at 0% 0%, rgba(125, 184, 138, 0.28), transparent 58%), linear-gradient(145deg, #2a4a32 0%, var(--green-deep) 48%, #2f5a3a 100%); box-shadow: 0 18px 40px rgba(26, 44, 54, 0.16); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); } .parks-portal:hover, .parks-portal:focus-visible { transform: translateY(-2px); box-shadow: 0 24px 48px rgba(26, 44, 54, 0.2); } .parks-portal-map .parks-map-svg { max-height: 9.5rem; } .parks-portal-copy { min-width: 0; } .parks-portal-kicker { margin: 0 0 0.2rem; color: var(--light-blue); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .parks-portal h2 { margin: 0 0 0.35rem; font-size: clamp(1.55rem, 2.4vw, 2.1rem); font-style: italic; color: var(--white); } .parks-portal p { margin: 0 0 0.55rem; color: rgba(232, 240, 243, 0.9); font-size: 0.95rem; line-height: 1.45; } .parks-portal span { color: var(--yellow); font-weight: 600; } .parks-portal--compact { grid-template-columns: 1fr; padding: 0.9rem 1rem 1rem; } .parks-portal--compact .parks-portal-map { display: none; } .parks-portal--tease { margin: 0; } .parks-portal-map .parks-map-region { cursor: default; pointer-events: none; } .paradise-body .parks-portal, .outdoors-modal-body .parks-portal { margin-top: 0.15rem; } @media (max-width: 960px) { .parks-atlas-stage, .parks-portal { grid-template-columns: 1fr; } .parks-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .parks-portal-map .parks-map-svg { max-height: 8rem; } } @media (max-width: 760px) { .parks-map-label { font-size: 13px; } .parks-card-btn strong { font-size: 1.05rem; } } @media (max-width: 640px) { .parks-list { grid-template-columns: 1fr; } } /* Camping — At the pad kit (packing list, not Atlas chips) */ .camp-pad-bar { margin: 0 0 0.35rem; padding: 1.35rem 0 1.45rem; background: linear-gradient(180deg, rgba(26, 44, 54, 0.04), transparent 40%), repeating-linear-gradient( 90deg, transparent, transparent 11px, rgba(74, 92, 50, 0.07) 11px, rgba(74, 92, 50, 0.07) 12px ); border-top: 3px solid #4a5c32; border-bottom: 1px dashed rgba(74, 92, 50, 0.35); } .camp-pad-bar-copy .section-kicker { color: #4a5c32; } .camp-pad-bar-copy h2 { margin: 0 0 0.35rem; font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.25rem); font-style: italic; font-weight: 600; color: var(--ink); } .camp-pad-bar-copy p { margin: 0 0 0.95rem; max-width: 38rem; color: var(--muted); font-size: 0.95rem; line-height: 1.5; } .camp-pad-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; } .camp-pad-chip { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0; padding: 0.42rem 0.72rem 0.42rem 0.5rem; border: 1.5px solid rgba(74, 92, 50, 0.28); border-radius: 3px; background: var(--white); color: var(--ink); font: inherit; font-size: 0.84rem; font-weight: 700; cursor: pointer; } .camp-pad-chip::before { content: ""; display: inline-grid; place-items: center; width: 0.78rem; height: 0.78rem; flex-shrink: 0; border: 1.5px solid #4a5c32; background: transparent; box-shadow: 1px 1px 0 rgba(26, 44, 54, 0.12); color: transparent; font-size: 0.62rem; font-weight: 900; line-height: 1; } .camp-pad-chip:hover, .camp-pad-chip:focus-visible { border-color: #4a5c32; color: #4a5c32; } .camp-pad-chip.is-on { background: var(--yellow); border-color: var(--yellow); color: var(--ink); } .camp-pad-chip.is-on::before { content: "✓"; background: transparent; border-color: var(--ink); color: var(--ink); } .camp-pad-chip.is-unavailable, .camp-pad-chip:disabled { color: #8a9aa3; background: var(--fog); border-color: transparent; cursor: not-allowed; } .camp-pad-chip.is-unavailable::before, .camp-pad-chip:disabled::before { border-color: #b7c4ca; box-shadow: none; } .camp-pad-chip.is-unavailable:hover, .camp-pad-chip.is-unavailable:focus-visible, .camp-pad-chip:disabled:hover, .camp-pad-chip:disabled:focus-visible { color: #8a9aa3; border-color: transparent; } .camp-pad-count { margin: 0.85rem 0 0; color: #4a5c32; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .camp-pad-empty { margin: 0 0 1.5rem; padding: 1rem 0 0; color: var(--muted); } .camp-region-nav { margin: 0 0 0.35rem; padding: 0.85rem 0 1.05rem; } .camp-region-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; } .camp-region-pill { padding: 0.35rem 0.8rem; border-radius: 999px; background: var(--fog); color: #4a5c32; font-size: 0.84rem; font-weight: 700; text-decoration: none; } .camp-region-pill:hover { background: #4a5c32; color: var(--white); } .camp-region-pill.is-unavailable { color: #8a9aa3; background: #e8eef2; cursor: not-allowed; pointer-events: none; opacity: 0.62; } .hub-dest--pad { min-height: 15.25rem; } .hub-dest--pad .hub-dest-copy { gap: 0.2rem; } .camp-pad-strip { display: flex; flex-wrap: wrap; gap: 0.28rem; margin: 0.28rem 0 0.1rem; } .camp-pad-strip span { display: inline-flex; align-items: center; gap: 0.18rem; padding: 0; background: transparent; color: rgba(255, 255, 255, 0.92); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; font-style: normal; line-height: 1.3; } .camp-pad-strip span::before { content: "✓"; color: var(--yellow); font-size: 0.78rem; font-weight: 900; line-height: 1; } body[data-outdoors-hub="camping"] .hub-dest-tag, .camp-pad-flag { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 2; padding: 0.22rem 0.55rem; border-radius: 3px; background: var(--yellow); color: var(--ink); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .camp-pad-flag--closed { background: #8a4a3a; color: var(--white); } .camp-pad-flag--day-use { background: var(--light-blue); color: var(--ink); } .camp-pad-flag--event { background: var(--yellow); color: var(--ink); } .hub-dest--pad-quiet img { filter: grayscale(0.35) saturate(0.75); } .hub-dest--pad-quiet::after { background: linear-gradient(180deg, transparent 24%, rgba(26, 44, 54, 0.94) 100%); } body[data-outdoors-hub="camping"] .hub-chapter { padding: 0.45rem 0 1.55rem; border-top: 0; background: transparent; } body[data-outdoors-hub="camping"] .hub-chapter .container { padding-top: 1.2rem; } body[data-outdoors-hub="camping"] .hub-chapter-head--camp { align-items: end; margin-bottom: 1rem; padding-bottom: 0.85rem; border-bottom: 1px dashed rgba(74, 92, 50, 0.28); } body[data-outdoors-hub="camping"] .hub-chapter-head .section-kicker { color: #4a5c32; letter-spacing: 0.14em; } body[data-outdoors-hub="camping"] .hub-chapter-head h2 { color: #2f3d22; } body[data-outdoors-hub="camping"] .hub-chapter-head p { max-width: 40rem; color: #5a6b52; } body[data-outdoors-hub="camping"] .hub-chapter-tally { margin: 0; color: #4a5c32; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } body[data-outdoors-hub="camping"] .hub-dest-sheet { gap: 0.7rem; } body[data-outdoors-hub="camping"] .hub-dest--sheet { display: grid; grid-template-columns: minmax(9.25rem, 27%) 1fr; min-height: 0; overflow: hidden; border: 1px solid rgba(74, 92, 50, 0.16); border-radius: 0.85rem; background: #f7f8f3; color: var(--ink); box-shadow: 0 8px 18px rgba(26, 44, 54, 0.06); } body[data-outdoors-hub="camping"] .hub-dest--sheet.hub-dest--pad { min-height: 0; } body[data-outdoors-hub="camping"] .hub-dest--sheet:hover, body[data-outdoors-hub="camping"] .hub-dest--sheet:focus-visible { color: var(--ink); border-color: rgba(74, 92, 50, 0.45); } body[data-outdoors-hub="camping"] .hub-dest--sheet::before, body[data-outdoors-hub="camping"] .hub-dest--sheet::after, body[data-outdoors-hub="camping"] .hub-dest--sheet.hub-dest--pad-quiet::after { content: none; } body[data-outdoors-hub="camping"] .hub-dest--sheet img { position: relative; inset: auto; width: 100%; height: 100%; min-height: 8.6rem; object-fit: cover; } body[data-outdoors-hub="camping"] .hub-dest--sheet:hover img { transform: none; } body[data-outdoors-hub="camping"] .hub-dest--sheet:not(:has(img)) { grid-template-columns: 1fr; } body[data-outdoors-hub="camping"] .hub-dest--sheet .hub-dest-copy { justify-content: center; padding: 0.8rem 1.05rem 0.9rem; } body[data-outdoors-hub="camping"] .hub-dest--sheet .hub-dest-place { color: #4a5c32; } body[data-outdoors-hub="camping"] .hub-dest--sheet strong { color: #2f3d22; font-size: clamp(1.05rem, 1.8vw, 1.28rem); } body[data-outdoors-hub="camping"] .hub-dest-blurb { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: 0.12rem 0 0; color: #5a6b52; font-size: 0.88rem; font-weight: 500; line-height: 1.45; } body[data-outdoors-hub="camping"] .hub-dest--sheet .camp-pad-strip span { color: #4a5c32; } body[data-outdoors-hub="camping"] .hub-dest--sheet .camp-pad-strip span::before { color: #4a5c32; } body[data-outdoors-hub="camping"] .hub-dest--sheet em { margin-top: 0.22rem; color: #4a5c32; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: none; opacity: 0.9; } body[data-outdoors-hub="camping"] .hub-dest--sheet .hub-dest-tag { top: 0.5rem; right: auto; left: 0.5rem; } @media (max-width: 760px) { body[data-outdoors-hub="camping"] .hub-chapter-head--camp { grid-template-columns: 1fr auto; align-items: start; } body[data-outdoors-hub="camping"] .hub-dest-sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; } body[data-outdoors-hub="camping"] .hub-dest--sheet { grid-template-columns: 1fr; } body[data-outdoors-hub="camping"] .hub-dest--sheet img { height: 5.6rem; min-height: 5.6rem; } body[data-outdoors-hub="camping"] .hub-dest--sheet .hub-dest-copy { flex: 1; justify-content: flex-start; padding: 0.5rem 0.55rem 0.55rem; } body[data-outdoors-hub="camping"] .hub-dest--sheet .hub-dest-place { font-size: 0.6rem; letter-spacing: 0.06em; } body[data-outdoors-hub="camping"] .hub-dest--sheet strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 0.92rem; line-height: 1.18; } body[data-outdoors-hub="camping"] .hub-dest--sheet .camp-pad-strip { gap: 0.1rem 0.2rem; margin: 0.1rem 0 0.02rem; } body[data-outdoors-hub="camping"] .hub-dest--sheet .camp-pad-strip span { font-size: 0.54rem; } body[data-outdoors-hub="camping"] .hub-dest--sheet em { margin-top: auto; padding-top: 0.28rem; font-size: 0.64rem; } body[data-outdoors-hub="camping"] .hub-dest-blurb { display: none; } } .camp-pad-board { margin-top: -2.15rem; margin-bottom: 1.35rem; position: relative; z-index: 2; } .camp-pad-board[hidden] { display: none; } .camp-pad-board-inner { padding: 1.15rem 1.2rem 1.25rem; background: #1f2d24; color: var(--white); border-radius: var(--radius-lg); box-shadow: 0 18px 40px rgba(26, 44, 54, 0.28); border: 1px solid rgba(241, 183, 27, 0.22); } .camp-pad-board-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.95rem; } .camp-pad-board-head .section-kicker { color: var(--yellow); } .camp-pad-board-head h2 { margin: 0; font-family: var(--font-display); font-size: clamp(1.45rem, 2.4vw, 1.9rem); font-style: italic; font-weight: 600; color: var(--white); } .camp-pad-board-flag { position: static; margin: 0; padding: 0.22rem 0.55rem; border-radius: 3px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .camp-pad-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; list-style: none; margin: 0; padding: 0; } .camp-pad-checks li { display: grid; grid-template-columns: 0.95rem 1fr; gap: 0.55rem; align-items: start; padding: 0.55rem 0.6rem 0.6rem; background: rgba(232, 240, 243, 0.06); border: 1px dashed rgba(241, 183, 27, 0.28); } .camp-pad-checks li.is-on { border-style: solid; border-color: rgba(241, 183, 27, 0.55); background: rgba(241, 183, 27, 0.12); } .camp-pad-checks li.is-off { opacity: 0.46; } .camp-pad-check-mark { display: inline-grid; place-items: center; width: 0.82rem; height: 0.82rem; margin-top: 0.22rem; border: 1.5px solid rgba(241, 183, 27, 0.55); background: transparent; color: transparent; font-size: 0.68rem; font-weight: 900; line-height: 1; } .camp-pad-checks li.is-on .camp-pad-check-mark { border-color: var(--yellow); color: var(--yellow); } .camp-pad-checks li.is-on .camp-pad-check-mark::after { content: "✓"; } .camp-pad-checks em { display: block; margin: 0 0 0.12rem; font-style: normal; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--yellow); } .camp-pad-checks strong { font-family: var(--font-display); font-size: 1rem; font-weight: 600; line-height: 1.25; color: var(--white); } body[data-spot-hub="camping"] .spot-hero { overflow: hidden; } body[data-spot-hub="camping"] .spot-hero-shade { background: linear-gradient(180deg, rgba(26, 44, 54, 0.18) 0%, rgba(26, 44, 54, 0.76) 78%), linear-gradient(90deg, rgba(26, 44, 54, 0.08) 42%, rgba(26, 44, 54, 0.5) 100%); } body[data-spot-hub="camping"] .spot-hero-stage { display: grid; grid-template-columns: 1fr; align-items: end; gap: 1.15rem 1.75rem; min-height: min(72vh, 620px); padding-top: 5.75rem; padding-bottom: 2rem; padding-inline: 0.35rem; } body[data-spot-hub="camping"] .spot-hero-stage:has(.spot-stats:not([hidden])) { grid-template-columns: minmax(0, 1fr) minmax(15.25rem, 18.5rem); } body[data-spot-hub="camping"] .spot-hero-copy { max-width: 38rem; } body[data-spot-hub="camping"] .spot-stats { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; width: 100%; } body[data-spot-hub="camping"] .spot-stat { padding: 0.68rem 0.85rem 0.72rem; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); } body[data-spot-hub="camping"] .spot-stat strong { font-size: 1.02rem; } body[data-spot-hub="camping"] .camp-pad-board { margin-top: 1.35rem; } body[data-spot-hub="camping"]:has([data-spot-pad]:not([hidden])) .spot-stats { margin-top: 0; margin-bottom: 0; } @media (max-width: 900px) { body[data-spot-hub="camping"] .spot-hero-stage, body[data-spot-hub="camping"] .spot-hero-stage:has(.spot-stats:not([hidden])) { grid-template-columns: 1fr; min-height: min(68vh, 540px); padding-top: 5.25rem; padding-bottom: 1.5rem; } body[data-spot-hub="camping"] .spot-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; } body[data-spot-hub="camping"] .spot-stat { padding: 0.45rem 0.55rem 0.48rem; } body[data-spot-hub="camping"] .spot-stat strong { font-size: 0.88rem; } } @media (max-width: 760px) { body[data-spot-hub="camping"] .spot-hero-stage, body[data-spot-hub="camping"] .spot-hero-stage:has(.spot-stats:not([hidden])) { padding-top: 2.15rem; } } @media (max-width: 640px) { .camp-pad-bar { padding: 0.95rem 0 1.05rem; } .camp-pad-bar-copy p { margin-bottom: 0.7rem; font-size: 0.88rem; } .camp-pad-chips { gap: 0.28rem; } .camp-pad-chip { gap: 0.28rem; padding: 0.26rem 0.48rem 0.26rem 0.34rem; font-size: 0.74rem; } .camp-pad-chip::before { width: 0.68rem; height: 0.68rem; font-size: 0.52rem; } .camp-pad-count { margin-top: 0.6rem; font-size: 0.74rem; } .camp-region-nav { padding: 0.55rem 0 0.75rem; } .camp-region-pills { gap: 0.28rem; } .camp-region-pill { padding: 0.26rem 0.55rem; font-size: 0.74rem; } .camp-pad-board-inner { padding: 0.85rem 0.8rem 0.9rem; } .camp-pad-board-head { flex-direction: column; align-items: flex-start; margin-bottom: 0.65rem; } .camp-pad-checks { gap: 0.28rem; } .camp-pad-checks li { grid-template-columns: 0.72rem 1fr; align-items: center; padding: 0.28rem 0.34rem; gap: 0.32rem; } .camp-pad-check-mark { width: 0.72rem; height: 0.72rem; margin-top: 0; font-size: 0.58rem; } .camp-pad-checks em { margin-bottom: 0.04rem; font-size: 0.58rem; letter-spacing: 0.06em; } .camp-pad-checks strong { font-size: 0.8rem; line-height: 1.2; } .hub-dest--pad { min-height: 14rem; } } @media (min-width: 641px) { .camp-pad-checks { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 860px) { .camp-pad-checks { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1080px) { .camp-pad-checks { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (min-width: 1280px) { .camp-pad-checks { grid-template-columns: repeat(6, minmax(0, 1fr)); } } /* Golfing hub — yardage book */ body[data-outdoors-hub="golfing"] { --golf-fairway: #1c3228; --golf-fairway-deep: #13241d; --golf-gold: #c9a227; --golf-parchment: #f3ead4; --golf-card: #faf6ea; --font-score: "IBM Plex Mono", ui-monospace, monospace; background: radial-gradient(ellipse 80% 42% at 100% 0%, rgba(201, 162, 39, 0.14), transparent 52%), linear-gradient(180deg, #efe6cf 0%, #f6f0de 46%, #ebe3cc 100%); } body[data-outdoors-hub="golfing"] .page-texture { background: repeating-linear-gradient( 180deg, transparent 0, transparent 27px, rgba(19, 36, 29, 0.035) 27px, rgba(19, 36, 29, 0.035) 28px ); } .golf-hero { position: relative; overflow: hidden; padding: 2.15rem 0 2.45rem; color: var(--golf-parchment); background: radial-gradient(ellipse 48% 70% at 100% 0%, rgba(201, 162, 39, 0.18), transparent 52%), repeating-linear-gradient( -18deg, transparent, transparent 46px, rgba(250, 246, 234, 0.04) 46px, rgba(250, 246, 234, 0.04) 47px ), linear-gradient(165deg, #13241d 0%, #1c3228 46%, #244233 100%); border-bottom: 4px solid var(--golf-gold); } .golf-hero::before { content: "18"; position: absolute; right: 5%; top: 54%; transform: translateY(-50%); font-family: var(--font-score); font-size: clamp(7rem, 22vw, 13.5rem); font-weight: 600; letter-spacing: -0.06em; line-height: 0.75; color: rgba(250, 246, 234, 0.06); pointer-events: none; } .golf-hero .article-back a, .golf-hero .section-kicker { color: var(--golf-gold); font-family: var(--font-score); letter-spacing: 0.14em; } .golf-hero h1 { margin: 0.2rem 0 0.7rem; color: var(--golf-parchment); font-size: clamp(3rem, 8vw, 5rem); } .golf-hero .section-lead { max-width: 38rem; color: rgba(243, 234, 212, 0.88); } .golf-hero-tag { margin: 0 0 0.85rem; display: inline-block; padding: 0.22rem 0 0.28rem; border-bottom: 1.5px solid var(--golf-gold); color: var(--golf-gold); font-family: var(--font-score); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .golf-tee-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1.2rem 0 0; } .golf-tee-chips span { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.22rem 0.7rem 0.22rem 0.5rem; border: 1px solid rgba(201, 162, 39, 0.38); background: rgba(19, 36, 29, 0.28); color: rgba(243, 234, 212, 0.92); font-family: var(--font-score); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.04em; } .golf-tee-chips span::before { content: ""; width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--golf-gold); } .golf-tee-chips span:nth-child(2)::before { background: #f4f1e6; } .golf-tee-chips span:nth-child(3)::before { background: #3d7ea6; } .golf-tee-chips span:nth-child(4)::before { background: #b23a3a; } .golf-tee-chips span:nth-child(5)::before { background: #2f6b46; } .golf-tee-chips span:nth-child(6)::before { background: #c9a227; } .hub-toolbar--golf { margin-top: 0.95rem; } body[data-outdoors-hub="golfing"] .hub-switch { background: var(--golf-fairway); box-shadow: 0 14px 30px rgba(19, 36, 29, 0.22); } body[data-outdoors-hub="golfing"] .hub-switch-link { background: var(--golf-fairway); color: rgba(243, 234, 212, 0.68); } body[data-outdoors-hub="golfing"] .hub-switch-link:hover { background: #244233; color: var(--golf-parchment); } body[data-outdoors-hub="golfing"] .hub-switch-link.is-active { background: var(--golf-gold); color: var(--golf-fairway-deep); } .hub-jump--golf .hub-jump-pills a { display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid rgba(19, 36, 29, 0.12); border-radius: 0; background: var(--golf-card); color: var(--golf-fairway); font-family: var(--font-score); font-size: 0.74rem; letter-spacing: 0.03em; text-transform: none; box-shadow: none; transform: none; } .hub-jump--golf .hub-jump-pills a::before { content: ""; width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--golf-gold); } .hub-jump--golf .hub-jump-pills a:nth-child(2)::before { background: #f4f1e6; box-shadow: 0 0 0 1px rgba(19, 36, 29, 0.25); } .hub-jump--golf .hub-jump-pills a:nth-child(3)::before { background: #3d7ea6; } .hub-jump--golf .hub-jump-pills a:nth-child(4)::before { background: #b23a3a; } .hub-jump--golf .hub-jump-pills a:nth-child(5)::before { background: #2f6b46; } .hub-jump--golf .hub-jump-pills a:hover { background: var(--golf-fairway); color: var(--golf-parchment); transform: none; } body[data-outdoors-hub="golfing"] .hub-chapter { padding: 0.35rem 0 1.55rem; border-top: 0; background: transparent; } body[data-outdoors-hub="golfing"] .hub-chapter .container { padding-top: 1.2rem; border-top: 2px solid rgba(201, 162, 39, 0.42); } body[data-outdoors-hub="golfing"] .hub-chapter-head--golf, body[data-outdoors-hub="golfing"] .hub-chapter-head { align-items: center; } body[data-outdoors-hub="golfing"] .hub-chapter-head .section-kicker { color: var(--golf-gold); font-family: var(--font-score); letter-spacing: 0.16em; } body[data-outdoors-hub="golfing"] .hub-chapter-head h2 { color: var(--golf-fairway-deep); } body[data-outdoors-hub="golfing"] .hub-chapter-head p { color: #5d6b5a; } body[data-outdoors-hub="golfing"] .hub-chapter-count { display: grid; place-items: center; width: 4.15rem; height: 4.15rem; border: 2px solid var(--golf-gold); color: var(--golf-gold); font-family: var(--font-score); font-size: 1.7rem; font-style: normal; font-weight: 600; line-height: 1; opacity: 1; } .hub-dest-sheet { display: grid; gap: 0.65rem; } .hub-dest-sheet--bays { grid-template-columns: repeat(2, minmax(0, 1fr)); } body[data-outdoors-hub="golfing"] .hub-dest--sheet { display: grid; grid-template-columns: minmax(10.5rem, 30%) 1fr; min-height: 8.4rem; overflow: hidden; border: 1px solid rgba(19, 36, 29, 0.1); border-radius: 0; background: var(--golf-card); color: var(--golf-fairway-deep); box-shadow: 0 10px 22px rgba(19, 36, 29, 0.06); } body[data-outdoors-hub="golfing"] .hub-dest--sheet:hover, body[data-outdoors-hub="golfing"] .hub-dest--sheet:focus-visible { color: var(--golf-fairway-deep); border-color: rgba(201, 162, 39, 0.7); } body[data-outdoors-hub="golfing"] .hub-dest--sheet::before, body[data-outdoors-hub="golfing"] .hub-dest--sheet::after { content: none; } body[data-outdoors-hub="golfing"] .hub-dest--sheet img { position: relative; inset: auto; width: 100%; height: 100%; min-height: 8.4rem; object-fit: cover; } body[data-outdoors-hub="golfing"] .hub-dest--sheet .hub-dest-copy { justify-content: center; padding: 0.85rem 1.15rem 0.9rem 1.05rem; } body[data-outdoors-hub="golfing"] .hub-dest--sheet .hub-dest-place { color: var(--golf-gold); font-family: var(--font-score); letter-spacing: 0.12em; } body[data-outdoors-hub="golfing"] .hub-dest--sheet strong { color: var(--golf-fairway-deep); } body[data-outdoors-hub="golfing"] .hub-dest--sheet em { margin-top: 0.2rem; color: var(--golf-fairway); font-family: var(--font-score); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.78; } .hub-dest-hole { position: absolute; top: 0.55rem; left: 0.55rem; z-index: 2; display: grid; justify-items: center; min-width: 2.7rem; padding: 0.28rem 0.32rem 0.34rem; background: var(--golf-fairway); color: var(--golf-parchment); font-family: var(--font-score); font-size: 0.95rem; font-weight: 600; line-height: 1; } .hub-dest-hole span { font-size: 0.5rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.68; } body[data-outdoors-hub="golfing"] .hub-spot { border: 1px solid rgba(19, 36, 29, 0.1); border-left: 0; border-radius: 0; background: var(--golf-card); box-shadow: none; } body[data-outdoors-hub="golfing"] .hub-spot:hover { border-color: rgba(201, 162, 39, 0.7); transform: none; } body[data-outdoors-hub="golfing"] .hub-spot-num { color: var(--golf-gold); font-family: var(--font-score); font-style: normal; } body[data-outdoors-hub="golfing"] .hub-spot em { color: var(--golf-fairway); font-family: var(--font-score); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; } body[data-outdoors-hub="golfing"] .hub-intel { border: 1px solid rgba(19, 36, 29, 0.1); border-radius: 0; background: var(--golf-card); box-shadow: none; } body[data-outdoors-hub="golfing"] .hub-intel:hover { border-color: rgba(201, 162, 39, 0.7); } body[data-outdoors-hub="golfing"] .hub-intel em { color: var(--golf-gold); font-family: var(--font-score); letter-spacing: 0.08em; text-transform: uppercase; } body[data-outdoors-hub="golfing"] .outdoors-block-more a { color: var(--golf-fairway); font-family: var(--font-score); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; } @media (max-width: 900px) { .hub-dest-sheet--bays { grid-template-columns: 1fr; } } @media (max-width: 760px) { body[data-outdoors-hub="golfing"] .hub-jump-select { background: var(--golf-fairway); border-color: rgba(201, 162, 39, 0.45); color: var(--golf-gold); } body[data-outdoors-hub="golfing"] .hub-jump-select-wrap::after { border-color: var(--golf-gold); } body[data-outdoors-hub="golfing"] .hub-jump-dropdown-label { color: var(--golf-fairway); font-family: var(--font-score); } body[data-outdoors-hub="golfing"] .hub-dest--sheet { grid-template-columns: 1fr; } body[data-outdoors-hub="golfing"] .hub-dest--sheet img { height: 9.4rem; min-height: 9.4rem; } } @media (max-width: 560px) { .golf-hero h1 { font-size: clamp(2.6rem, 14vw, 3.4rem); } body[data-outdoors-hub="golfing"] .hub-chapter-head { grid-template-columns: 1fr auto; align-items: start; } body[data-outdoors-hub="golfing"] .hub-chapter-count { display: grid; width: 3.15rem; height: 3.15rem; font-size: 1.2rem; } } /* Golf destination pages — scorecard */ body[data-spot-hub="golfing"] { --golf-fairway: #1c3228; --golf-fairway-deep: #13241d; --golf-gold: #c9a227; --golf-parchment: #f3ead4; --golf-card: #faf6ea; --font-score: "IBM Plex Mono", ui-monospace, monospace; background: radial-gradient(ellipse 80% 42% at 100% 0%, rgba(201, 162, 39, 0.14), transparent 52%), linear-gradient(180deg, #efe6cf 0%, #f6f0de 46%, #ebe3cc 100%); } body[data-spot-hub="golfing"] .page-texture { background: repeating-linear-gradient( 180deg, transparent 0, transparent 27px, rgba(19, 36, 29, 0.035) 27px, rgba(19, 36, 29, 0.035) 28px ); } body[data-spot-hub="golfing"] .spot-hero { overflow: hidden; border-bottom: 4px solid var(--golf-gold); background: var(--golf-fairway-deep); } body[data-spot-hub="golfing"] .spot-hero-shade { background: linear-gradient(180deg, rgba(19, 36, 29, 0.16) 0%, rgba(19, 36, 29, 0.8) 78%), linear-gradient(90deg, rgba(201, 162, 39, 0.2), transparent 48%); } body[data-spot-hub="golfing"] .spot-hero-stage { padding-top: 5.5rem; padding-bottom: 1.35rem; } body[data-spot-hub="golfing"] .spot-hero-copy { position: relative; padding-right: 5.25rem; } body[data-spot-hub="golfing"] .spot-hero .article-back a, body[data-spot-hub="golfing"] .spot-hero .section-kicker { color: var(--golf-gold); font-family: var(--font-score); letter-spacing: 0.14em; } body[data-spot-hub="golfing"] .spot-hero h1 { margin: 0.35rem 0 0.75rem; color: var(--golf-parchment); } body[data-spot-hub="golfing"] .spot-dek { color: rgba(243, 234, 212, 0.9); } body[data-spot-hub="golfing"] .spot-dek a { color: var(--golf-gold); } body[data-spot-hub="golfing"] .spot-dek a:hover, body[data-spot-hub="golfing"] .spot-dek a:focus-visible { color: var(--golf-parchment); } .spot-golf-hole { position: absolute; top: 1.65rem; right: 0; z-index: 2; display: grid; place-items: center; justify-items: center; min-width: 4rem; min-height: 4rem; padding: 0.35rem 0.4rem; border: 2px solid var(--golf-gold); background: transparent; color: var(--golf-gold); font-family: var(--font-score); font-size: 1.35rem; font-weight: 600; line-height: 1; } .spot-golf-hole span { font-size: 0.5rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.68; } .spot-golf-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.75rem; } .spot-golf-chips span { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.65rem 0.2rem 0.48rem; border: 1px solid rgba(201, 162, 39, 0.4); background: rgba(19, 36, 29, 0.32); color: rgba(243, 234, 212, 0.92); font-family: var(--font-score); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.05em; } .spot-golf-chips span::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--golf-gold); } .spot-golf-chips span:nth-child(2)::before { background: #f4f1e6; } body[data-spot-hub="golfing"] .spot-stats { gap: 0.55rem; margin-top: 1.15rem; } body[data-spot-hub="golfing"] .spot-stat { padding: 0.8rem 0.9rem 0.88rem; border: 1px solid rgba(19, 36, 29, 0.1); border-radius: 0; background: var(--golf-card); box-shadow: 0 10px 22px rgba(19, 36, 29, 0.08); } body[data-spot-hub="golfing"] .spot-stat p { color: var(--golf-gold); font-family: var(--font-score); letter-spacing: 0.12em; } body[data-spot-hub="golfing"] .spot-stat strong { color: var(--golf-fairway-deep); } body[data-spot-hub="golfing"] .spot-stat a:hover, body[data-spot-hub="golfing"] .spot-stat a:focus-visible { color: var(--golf-fairway); } body[data-spot-hub="golfing"] .spot-layout { padding-top: 2.15rem; } body[data-spot-hub="golfing"] .spot-section + .spot-section { border-top: 2px solid rgba(201, 162, 39, 0.42); } body[data-spot-hub="golfing"] .spot-prose h2 { color: var(--golf-fairway-deep); } body[data-spot-hub="golfing"] .spot-prose a { color: var(--golf-fairway); } body[data-spot-hub="golfing"] .spot-prose a:hover, body[data-spot-hub="golfing"] .spot-prose a:focus-visible { color: var(--golf-fairway-deep); } body[data-spot-hub="golfing"] .spot-weather-card, body[data-spot-hub="golfing"] .spot-map-card, body[data-spot-hub="golfing"] .spot-related { border: 1px solid rgba(19, 36, 29, 0.1); border-radius: 0; background: var(--golf-card); box-shadow: none; } body[data-spot-hub="golfing"] .spot-weather-card h2, body[data-spot-hub="golfing"] .spot-map-card h2, body[data-spot-hub="golfing"] .spot-related h2 { color: var(--golf-fairway-deep); } body[data-spot-hub="golfing"] .spot-related li { display: grid; grid-template-columns: auto 1fr; gap: 0.55rem; align-items: baseline; } body[data-spot-hub="golfing"] .spot-related li + li { margin-top: 0.65rem; padding-top: 0.65rem; border-top: 1px solid rgba(19, 36, 29, 0.08); } body[data-spot-hub="golfing"] .spot-related a { color: var(--golf-fairway-deep); font-family: var(--font-display); font-style: italic; font-weight: 600; } body[data-spot-hub="golfing"] .spot-related a:hover { color: var(--golf-fairway); } .spot-related-hole { color: var(--golf-gold); font-family: var(--font-score); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; } body[data-spot-hub="golfing"] .spot-sources p { color: var(--golf-gold); font-family: var(--font-score); letter-spacing: 0.12em; } body[data-spot-hub="golfing"] .spot-sources a { color: var(--golf-fairway); } body[data-spot-hub="golfing"] .article-footer-panel { border-top: 2px solid rgba(201, 162, 39, 0.42); } body[data-spot-hub="golfing"] .article-footer .section-kicker { color: var(--golf-gold); font-family: var(--font-score); letter-spacing: 0.14em; } body[data-spot-hub="golfing"] .article-footer .section-title { color: var(--golf-fairway-deep); } body[data-spot-hub="golfing"] .article-footer-actions .btn-primary { background: var(--golf-fairway); border-color: var(--golf-fairway); color: var(--golf-parchment); } body[data-spot-hub="golfing"] .article-footer-actions .btn-primary:hover, body[data-spot-hub="golfing"] .article-footer-actions .btn-primary:focus-visible { background: var(--golf-gold); border-color: var(--golf-gold); color: var(--golf-fairway-deep); } body[data-spot-hub="golfing"] .article-footer-actions .btn-ghost { color: var(--golf-fairway); border-color: rgba(28, 50, 40, 0.35); } body[data-spot-hub="golfing"] .article-footer-actions .btn-ghost:hover { background: var(--golf-fairway); border-color: var(--golf-fairway); color: var(--golf-parchment); } @media (max-width: 760px) { body[data-spot-hub="golfing"] .spot-stats { gap: 0.4rem; margin-top: 0.7rem; } body[data-spot-hub="golfing"] .spot-stat { padding: 0.45rem 0.55rem 0.48rem; } body[data-spot-hub="golfing"] .spot-hero-copy { padding-right: 4.25rem; } .spot-golf-hole { top: 1.35rem; min-width: 3.2rem; min-height: 3.2rem; font-size: 1.05rem; } body[data-spot-hub="golfing"] .spot-hero-stage { padding-top: 2.15rem; } } /* Fishing hub — the fishing report */ body[data-outdoors-hub="fishing"] { --fish-deep: #102832; --fish-river: #1a3f4c; --fish-steel: #7ea8b6; --fish-foam: #e4eef2; --fish-paper: #e8f2f4; --fish-card: #f4f9fa; --fish-moss: #3f7a68; background: radial-gradient(ellipse 70% 45% at 0% 0%, rgba(126, 168, 182, 0.22), transparent 52%), linear-gradient(180deg, #dce8ec 0%, #e8f2f4 48%, #d7e4e8 100%); } body[data-outdoors-hub="fishing"] .page-texture { background: repeating-linear-gradient( -12deg, transparent 0, transparent 22px, rgba(16, 40, 50, 0.03) 22px, rgba(16, 40, 50, 0.03) 23px ); } .fish-hero { position: relative; overflow: hidden; padding: 2.15rem 0 2.45rem; color: var(--fish-foam); background: radial-gradient(ellipse 58% 80% at 92% 8%, rgba(126, 168, 182, 0.18), transparent 46%), radial-gradient(ellipse 42% 55% at 0% 100%, rgba(5, 16, 20, 0.55), transparent 58%), linear-gradient(168deg, #071318 0%, #0b1f28 44%, #12303a 100%); border-bottom: 0; } .fish-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(14.5rem, 19rem); gap: 1.6rem 2.4rem; align-items: end; } .fish-hero .article-back a, .fish-hero .section-kicker { color: var(--fish-steel); letter-spacing: 0.14em; } .fish-hero h1 { margin: 0.2rem 0 0.7rem; color: var(--fish-foam); font-size: clamp(3rem, 8vw, 5rem); } .fish-hero .section-lead { max-width: 36rem; color: rgba(228, 238, 242, 0.88); } .fish-gauge-box { min-width: 0; } .fish-gauge-trigger { display: none; } .fish-gauge { list-style: none; margin: 0 0 0.15rem; padding: 0.15rem 0 0; border-left: 3px solid var(--fish-steel); } .fish-gauge li + li { border-top: 1px solid rgba(228, 238, 242, 0.12); } .fish-gauge a { display: grid; grid-template-columns: 4.6rem 1fr; gap: 0.65rem; align-items: baseline; padding: 0.48rem 0 0.48rem 0.9rem; color: var(--fish-foam); text-decoration: none; } .fish-gauge a:hover, .fish-gauge a:focus-visible { color: #fff; } .fish-gauge span { color: var(--fish-steel); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .fish-gauge strong { font-family: var(--font-display); font-size: 1.35rem; font-style: italic; font-weight: 600; } .hub-toolbar--fish { margin-top: 0.9rem; } body[data-outdoors-hub="fishing"] .hub-switch { background: var(--fish-card); box-shadow: 0 16px 36px rgba(7, 19, 24, 0.12); } body[data-outdoors-hub="fishing"] .hub-switch-link { background: var(--fish-card); color: #4d6b74; } body[data-outdoors-hub="fishing"] .hub-switch-link:hover { background: var(--fish-foam); color: var(--fish-deep); } body[data-outdoors-hub="fishing"] .hub-switch-link.is-active { background: var(--fish-steel); color: var(--fish-deep); } .hub-jump--fish .hub-jump-pills a { padding: 0.15rem 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--fish-river); } .hub-jump--fish .hub-jump-pills a:hover { background: transparent; border-bottom-color: var(--fish-steel); color: var(--fish-deep); } body[data-outdoors-hub="fishing"] .hub-chapter { padding: 0.55rem 0 1.75rem; border-top: 0; background: transparent; } body[data-outdoors-hub="fishing"] .hub-chapter .container { padding-top: 1.35rem; } body[data-outdoors-hub="fishing"] .hub-chapter-head--fish { align-items: end; padding-bottom: 0.85rem; border-bottom: 1px dashed rgba(16, 40, 50, 0.18); } body[data-outdoors-hub="fishing"] .hub-chapter-head .section-kicker { color: var(--fish-moss); letter-spacing: 0.14em; } body[data-outdoors-hub="fishing"] .hub-chapter-head h2 { color: var(--fish-deep); } body[data-outdoors-hub="fishing"] .hub-chapter-head p { color: #4d6b74; } body[data-outdoors-hub="fishing"] .hub-chapter-tally { margin: 0; color: var(--fish-river); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .hub-also { margin-top: 1.15rem; padding-top: 0.95rem; border-top: 1px dashed rgba(26, 44, 54, 0.16); } .hub-also-kicker { margin: 0 0 0.55rem; color: var(--muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .hub-also ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; } .hub-also li { color: var(--muted); font-size: 0.92rem; line-height: 1.45; } .hub-also strong { color: var(--ink); font-weight: 700; } .hub-also a { color: inherit; text-decoration: underline; text-underline-offset: 0.12em; } body[data-outdoors-hub="fishing"] .hub-also { border-top-color: rgba(16, 40, 50, 0.18); } body[data-outdoors-hub="fishing"] .hub-also-kicker { color: var(--fish-moss); } body[data-outdoors-hub="fishing"] .hub-also li { color: #4d6b74; } body[data-outdoors-hub="fishing"] .hub-also strong, body[data-outdoors-hub="fishing"] .hub-also a { color: var(--fish-deep); } .hub-dest-pool { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem; } .hub-dest-pool--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 901px) { body[data-outdoors-hub="water"] .hub-dest-pool--2, body[data-outdoors-hub="fishing"] .hub-dest-pool, body[data-outdoors-hub="fishing"] .hub-dest-pool--2 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } body[data-outdoors-hub="fishing"] .hub-dest--pool { display: flex; flex-direction: column; justify-content: flex-start; min-height: 0; overflow: hidden; border: 1px solid rgba(16, 40, 50, 0.1); border-radius: 1.05rem; background: var(--fish-card); color: var(--fish-deep); box-shadow: 0 10px 22px rgba(16, 40, 50, 0.07); } body[data-outdoors-hub="fishing"] .hub-dest--pool:hover, body[data-outdoors-hub="fishing"] .hub-dest--pool:focus-visible { color: var(--fish-deep); border-color: rgba(126, 168, 182, 0.75); } body[data-outdoors-hub="fishing"] .hub-dest--pool::before, body[data-outdoors-hub="fishing"] .hub-dest--pool::after { content: none; } body[data-outdoors-hub="fishing"] .hub-dest--pool img { position: relative; inset: auto; width: 100%; height: 9.4rem; object-fit: cover; } body[data-outdoors-hub="fishing"] .hub-dest--pool .hub-dest-copy { justify-content: flex-start; padding: 0.85rem 0.95rem 0.95rem; } body[data-outdoors-hub="fishing"] .hub-dest--pool .hub-dest-place { color: var(--fish-moss); } body[data-outdoors-hub="fishing"] .hub-dest--pool strong { color: var(--fish-deep); } body[data-outdoors-hub="fishing"] .hub-dest--pool em { margin-top: 0.28rem; color: var(--fish-river); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: none; opacity: 0.86; } body[data-outdoors-hub="fishing"] .hub-spot { border: 1px solid rgba(16, 40, 50, 0.1); border-left: 4px solid var(--fish-steel); border-radius: 0 0.85rem 0.85rem 0; background: var(--fish-card); box-shadow: none; } body[data-outdoors-hub="fishing"] .hub-spot:hover { border-color: rgba(126, 168, 182, 0.7); transform: none; } body[data-outdoors-hub="fishing"] .hub-spot-num { color: var(--fish-steel); } body[data-outdoors-hub="fishing"] .hub-spot em { color: var(--fish-river); } body[data-outdoors-hub="fishing"] .hub-intel { border: 1px solid rgba(16, 40, 50, 0.1); border-radius: 0 0.85rem 0.85rem 0; background: var(--fish-card); box-shadow: none; } body[data-outdoors-hub="fishing"] .hub-intel:hover { border-color: rgba(126, 168, 182, 0.7); } body[data-outdoors-hub="fishing"] .hub-intel em { color: var(--fish-moss); } body[data-outdoors-hub="fishing"] .outdoors-block-more a { color: var(--fish-river); } @media (max-width: 900px) { .hub-dest-pool, .hub-dest-pool--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1025px) { .fish-gauge-box { display: contents; } } @media (max-width: 1024px) { .fish-hero { padding: 1.55rem 0 2.2rem; } .hub-toolbar--fish { margin-top: 0.7rem; } .fish-hero-grid { grid-template-columns: 1fr; gap: 0.85rem; } .fish-hero h1 { margin: 0.1rem 0 0.4rem; } .fish-gauge-box { border-left: 3px solid var(--fish-steel); } .fish-gauge-trigger { display: grid; grid-template-columns: 4.6rem 1fr auto; gap: 0.65rem; align-items: baseline; width: 100%; padding: 0.48rem 0.15rem 0.48rem 0.9rem; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; color: var(--fish-foam); } .fish-gauge-box:not(.is-open) .fish-gauge { display: none; } .fish-gauge-trigger::-webkit-details-marker { display: none; } .fish-gauge-trigger::after { content: ""; width: 0.46rem; height: 0.46rem; margin-right: 0.2rem; border-right: 1.5px solid var(--fish-steel); border-bottom: 1.5px solid var(--fish-steel); transform: translateY(-0.12rem) rotate(45deg); } .fish-gauge-box.is-open .fish-gauge-trigger::after { transform: translateY(0.12rem) rotate(225deg); } .fish-gauge-trigger span { color: var(--fish-steel); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .fish-gauge-trigger strong { font-family: var(--font-display); font-size: 1.35rem; font-style: italic; font-weight: 600; } .fish-gauge { margin: 0; padding: 0; border-left: 0; } } @media (max-width: 560px) { .fish-hero h1 { font-size: clamp(2.6rem, 14vw, 3.4rem); } .hub-dest-pool, .hub-dest-pool--2 { grid-template-columns: 1fr; } body[data-outdoors-hub="water"] .hub-dest-pool--2, body[data-outdoors-hub="fishing"] .hub-dest-pool, body[data-outdoors-hub="fishing"] .hub-dest-pool--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; } body[data-outdoors-hub="water"] .hub-chapter--pool-2 .hub-dest { min-height: 10.75rem; } body[data-outdoors-hub="water"] .hub-chapter--pool-2 .hub-dest strong { font-size: 1.05rem; } body[data-outdoors-hub="fishing"] .hub-dest--pool img { height: 7.4rem; } body[data-outdoors-hub="fishing"] .hub-chapter-head--fish { grid-template-columns: 1fr auto; align-items: start; } } /* Fishing destination pages — the report */ body[data-spot-hub="fishing"] { --fish-deep: #102832; --fish-river: #1a3f4c; --fish-steel: #7ea8b6; --fish-foam: #e4eef2; --fish-card: #f4f9fa; --fish-moss: #3f7a68; background: radial-gradient(ellipse 70% 45% at 0% 0%, rgba(126, 168, 182, 0.2), transparent 52%), linear-gradient(180deg, #dce8ec 0%, #e8f2f4 48%, #d7e4e8 100%); } body[data-spot-hub="fishing"] .page-texture { background: repeating-linear-gradient( -12deg, transparent 0, transparent 22px, rgba(16, 40, 50, 0.03) 22px, rgba(16, 40, 50, 0.03) 23px ); } body[data-spot-hub="fishing"] .spot-hero { overflow: hidden; border-bottom: 4px solid var(--fish-steel); background: var(--fish-deep); } body[data-spot-hub="fishing"] .spot-hero-shade { background: linear-gradient(180deg, rgba(13, 34, 43, 0.16) 0%, rgba(13, 34, 43, 0.8) 78%), linear-gradient(90deg, rgba(126, 168, 182, 0.22), transparent 48%); } body[data-spot-hub="fishing"] .spot-hero-stage { padding-top: 5.5rem; padding-bottom: 1.35rem; } body[data-spot-hub="fishing"] .spot-hero-copy { position: relative; padding-right: 5.25rem; } body[data-spot-hub="fishing"] .spot-hero .article-back a, body[data-spot-hub="fishing"] .spot-hero .section-kicker { color: var(--fish-steel); letter-spacing: 0.14em; } .spot-hero .article-back a, body[data-spot-hub] .spot-hero .article-back a, body[data-outdoors-hub] .page-hero .article-back a, .parks-page .page-hero .article-back a { display: inline-block; padding: 0.22rem 0.55rem; border-radius: 0; background: var(--white); color: var(--dark-blue); font-family: var(--font-body); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; line-height: 1.2; text-transform: uppercase; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.18); transform: rotate(-1.75deg); } .spot-hero .article-back a:hover, .spot-hero .article-back a:focus-visible, body[data-spot-hub] .spot-hero .article-back a:hover, body[data-spot-hub] .spot-hero .article-back a:focus-visible, body[data-outdoors-hub] .page-hero .article-back a:hover, body[data-outdoors-hub] .page-hero .article-back a:focus-visible, .parks-page .page-hero .article-back a:hover, .parks-page .page-hero .article-back a:focus-visible { color: var(--green-deep); background: var(--white); transform: rotate(-1.75deg); } @media (min-width: 761px) { .spot-hero .article-back a, body[data-spot-hub] .spot-hero .article-back a, body[data-outdoors-hub] .page-hero .article-back a, .parks-page .page-hero .article-back a { padding: 0.32rem 0.68rem; font-size: 0.72rem; } } body[data-spot-hub="fishing"] .spot-hero h1 { margin: 0.35rem 0 0.75rem; color: var(--fish-foam); } body[data-spot-hub="fishing"] .spot-dek { color: rgba(228, 238, 242, 0.9); } body[data-spot-hub="fishing"] .spot-dek a { color: var(--fish-steel); } body[data-spot-hub="fishing"] .spot-dek a:hover, body[data-spot-hub="fishing"] .spot-dek a:focus-visible { color: var(--fish-foam); } .spot-fish-log { position: absolute; top: 1.65rem; right: 0; z-index: 2; display: grid; place-items: center; justify-items: center; min-width: 4rem; min-height: 4rem; padding: 0.35rem 0.4rem; border: 2px solid var(--fish-steel); border-radius: 50%; background: transparent; color: var(--fish-steel); font-size: 1.25rem; font-weight: 700; line-height: 1; } .spot-fish-log span { font-size: 0.5rem; font-weight: 650; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.72; } .spot-fish-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.75rem; } .spot-fish-chips span { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.7rem 0.2rem 0.5rem; border: 1px solid rgba(126, 168, 182, 0.4); border-radius: 999px; background: rgba(13, 34, 43, 0.32); color: rgba(228, 238, 242, 0.92); font-size: 0.72rem; font-weight: 650; } .spot-fish-chips span::before { content: ""; width: 0.5rem; height: 0.2rem; border-radius: 99px; background: var(--fish-steel); } .spot-fish-chips span:nth-child(2)::before { background: var(--fish-moss); } body[data-spot-hub="fishing"] .spot-stats { gap: 0.55rem; margin-top: 1.15rem; } body[data-spot-hub="fishing"] .spot-stat { padding: 0.8rem 0.9rem 0.88rem; border: 1px solid rgba(16, 40, 50, 0.1); border-radius: 0 0.85rem 0.85rem 0; border-left: 4px solid var(--fish-steel); background: var(--fish-card); box-shadow: 0 10px 22px rgba(16, 40, 50, 0.08); } body[data-spot-hub="fishing"] .spot-stat p { color: var(--fish-moss); } body[data-spot-hub="fishing"] .spot-stat strong { color: var(--fish-deep); } body[data-spot-hub="fishing"] .spot-stat a:hover, body[data-spot-hub="fishing"] .spot-stat a:focus-visible { color: var(--fish-river); } body[data-spot-hub="fishing"] .spot-layout { padding-top: 2.15rem; } body[data-spot-hub="fishing"] .spot-section + .spot-section { border-top: 2px solid rgba(126, 168, 182, 0.42); } body[data-spot-hub="fishing"] .spot-prose h2 { color: var(--fish-deep); } body[data-spot-hub="fishing"] .spot-prose a { color: var(--fish-river); } body[data-spot-hub="fishing"] .spot-weather-card, body[data-spot-hub="fishing"] .spot-map-card, body[data-spot-hub="fishing"] .spot-related { border: 1px solid rgba(16, 40, 50, 0.1); border-left: 4px solid var(--fish-steel); border-radius: 0 0.85rem 0.85rem 0; background: var(--fish-card); box-shadow: none; } body[data-spot-hub="fishing"] .spot-weather-card h2, body[data-spot-hub="fishing"] .spot-map-card h2, body[data-spot-hub="fishing"] .spot-related h2 { color: var(--fish-deep); } body[data-spot-hub="fishing"] .spot-related li { display: grid; grid-template-columns: auto 1fr; gap: 0.55rem; align-items: baseline; } body[data-spot-hub="fishing"] .spot-related li + li { margin-top: 0.65rem; padding-top: 0.65rem; border-top: 1px solid rgba(16, 40, 50, 0.08); } body[data-spot-hub="fishing"] .spot-related a { color: var(--fish-deep); font-family: var(--font-display); font-style: italic; font-weight: 600; } body[data-spot-hub="fishing"] .spot-related a:hover { color: var(--fish-river); } .spot-related-log { color: var(--fish-steel); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; } body[data-spot-hub="fishing"] .spot-sources p { color: var(--fish-moss); } body[data-spot-hub="fishing"] .spot-sources a { color: var(--fish-river); } body[data-spot-hub="fishing"] .article-footer-panel { border-top: 2px solid rgba(126, 168, 182, 0.42); } body[data-spot-hub="fishing"] .article-footer .section-kicker { color: var(--fish-moss); letter-spacing: 0.14em; } body[data-spot-hub="fishing"] .article-footer .section-title { color: var(--fish-deep); } body[data-spot-hub="fishing"] .article-footer-actions .btn-primary { background: var(--fish-river); border-color: var(--fish-river); color: var(--fish-foam); } body[data-spot-hub="fishing"] .article-footer-actions .btn-primary:hover, body[data-spot-hub="fishing"] .article-footer-actions .btn-primary:focus-visible { background: var(--fish-steel); border-color: var(--fish-steel); color: var(--fish-deep); } body[data-spot-hub="fishing"] .article-footer-actions .btn-ghost { color: var(--fish-river); border-color: rgba(26, 63, 76, 0.35); } body[data-spot-hub="fishing"] .article-footer-actions .btn-ghost:hover { background: var(--fish-river); border-color: var(--fish-river); color: var(--fish-foam); } @media (max-width: 760px) { body[data-spot-hub="fishing"] .spot-stats { gap: 0.4rem; margin-top: 0.7rem; } body[data-spot-hub="fishing"] .spot-stat { padding: 0.45rem 0.55rem 0.48rem; } body[data-spot-hub="fishing"] .spot-hero-copy { padding-right: 4.25rem; } .spot-fish-log { top: 1.35rem; min-width: 3.2rem; min-height: 3.2rem; font-size: 1.05rem; } body[data-spot-hub="fishing"] .spot-hero-stage { padding-top: 2.15rem; } }