/* * weddingvenues.co.nz — Design Foundation * * Warm oat paper, Fraunces display + Hanken Grotesk body. * Gold = editorial voice. Rose = the couple's marks only. * Pine = brand + primary actions. Sage = available/positive. * * Applied via .wv class on when surface is weddingvenues or weddingvendors. */ /* ── Tokens ─────────────────────────────────────────── */ .wv { --oat: #F1ECDF; --oat-2: #EAE4D3; --paper: #FCFAF4; --ink: #211D15; --ink-soft: #5B5446; --ink-faint: #948C79; --pine: #2C4636; --pine-deep: #172619; --pine-mid: #3C5C48; --gold: #B0843A; --gold-soft: #D9B777; --rose: #AC6151; --sage: #5F8060; --line: rgba(33,29,21,.13); --line-soft: rgba(33,29,21,.07); --wv-serif: var(--font-fraunces), "Fraunces", Georgia, serif; --wv-sans: var(--font-hanken), "Hanken Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; --wv-ease: cubic-bezier(.22,.61,.36,1); --wv-ease-soft: cubic-bezier(.33,1,.68,1); background: var(--oat); color: var(--ink); font-family: var(--wv-sans); font-size: 17px; line-height: 1.72; -webkit-font-smoothing: antialiased; } .wv ::selection { background: var(--pine); color: var(--oat); } .wv :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; } /* ── Typography ─────────────────────────────────────── */ /* Display — Fraunces */ .wv-display { font-family: var(--wv-serif); font-feature-settings: "ss01"; letter-spacing: -0.028em; line-height: 0.95; } /* Eyebrow — gold tick + uppercase tracked label */ .wv-eyebrow { font-family: var(--wv-sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); display: inline-flex; align-items: center; gap: 0.45rem; } .wv-eyebrow::before { content: ""; width: 14px; height: 1px; background: var(--gold); display: inline-block; flex-shrink: 0; } /* Section title */ .wv-section-title { font-family: var(--wv-serif); font-feature-settings: "ss01"; font-weight: 400; font-size: clamp(1.85rem, 3.4vw, 2.7rem); line-height: 1.08; letter-spacing: -0.02em; color: var(--ink); } /* 3-column step flow (for-businesses, directories hub pattern) */ .wv-step-flow { margin-top: clamp(2rem, 4vw, 3.2rem); } .wv-step-flow-grid { display: grid; gap: 2.5rem; } @media (min-width: 640px) { .wv-step-flow-grid { grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 4rem); } .wv-step-flow-item { border-left: 1px solid var(--line); padding-left: clamp(1.5rem, 3vw, 2rem); } .wv-step-flow-item:first-child { border-left: none; padding-left: 0; } } @media (max-width: 639px) { .wv-step-flow-item + .wv-step-flow-item { border-top: 1px solid var(--line); padding-top: 2.5rem; } } .wv-step-flow-num { display: block; font-family: var(--wv-serif); font-size: clamp(3rem, 6vw, 4rem); font-weight: 200; line-height: 1; letter-spacing: -0.04em; color: var(--line); font-feature-settings: "ss01"; } .wv-step-flow-item h3 { margin-top: 1rem; font-family: var(--wv-sans); font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: var(--ink); } .wv-step-flow-item p { margin-top: 0.75rem; font-size: 0.95rem; line-height: 1.65; color: var(--ink-soft); } /* For-couples content blocks */ .wv-value-props-list { margin-top: 1.5rem; display: grid; gap: 1.25rem; max-width: 40rem; } .wv-value-props-item { display: flex; gap: 0.75rem; align-items: flex-start; } .wv-value-props-icon { flex-shrink: 0; margin-top: 0.15rem; } .wv-free-plan-section { padding-bottom: clamp(4rem, 10vh, 7rem); } .wv-free-plan-card { border: 1px solid var(--line); border-radius: 1rem; padding: clamp(2rem, 4vw, 3rem); max-width: 40rem; } .wv-free-plan-title { font-family: var(--wv-serif); font-size: var(--wvd-title-subsection); font-weight: 350; letter-spacing: -.02em; margin-top: .75rem; } .wv-free-plan-body { margin-top: 0.75rem; opacity: 0.7; } .wv-free-plan-cta { margin-top: 1.5rem; } /* Lede */ .wv-lede { font-family: var(--wv-serif); font-feature-settings: "ss01"; font-weight: 340; font-size: clamp(1.4rem, 2.5vw, 2rem); line-height: 1.35; letter-spacing: -0.01em; color: var(--ink-soft); max-width: 65ch; } /* Body copy — ~65 char measure */ .wv-body { font-family: var(--wv-sans); font-size: 17px; line-height: 1.72; color: var(--ink-soft); max-width: 65ch; } /* Coords / documentary details */ .wv-coords { font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-faint); font-variant-numeric: tabular-nums; } /* ── Layout ──────────────────────────────────────────── */ /* Shared content width — matches wedding nav inner row */ .wv-wrap { width: 100%; max-width: 1260px; margin-left: auto; margin-right: auto; padding-left: clamp(1.3rem, 5vw, 5rem); padding-right: clamp(1.3rem, 5vw, 5rem); box-sizing: border-box; } /* Page-content slot in WeddingRouteChrome. Reserves a viewport of height so that during streaming SSR (async page data) the footer stays below the fold instead of painting at y=0 and getting shoved down when content streams in — which otherwise registers as a large cumulative layout shift on detail pages (vendor/venue galleries). */ .wv-route-main { min-height: 100vh; } .wv-section { padding-top: clamp(3rem, 6vw, 5.5rem); padding-bottom: clamp(3rem, 6vw, 5.5rem); } /* ── Cards ───────────────────────────────────────────── */ .wv-card { background: var(--paper); border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden; transition: box-shadow 0.3s var(--wv-ease), transform 0.3s var(--wv-ease); } .wv-card:hover { box-shadow: 0 8px 32px -8px rgba(33,29,21,.1); transform: translateY(-2px); } /* ── Buttons ─────────────────────────────────────────── */ /* Primary — pine */ /* ── Unified buttons ────────────────────────────────── */ .wv-btn { --growth: 0; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--wv-sans); font-size: .9375rem; font-weight: 500; padding: .5rem 1.4rem; border-radius: 9px; border: 1.5px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background .25s var(--wv-ease), border-color .25s var(--wv-ease), color .25s var(--wv-ease), transform .12s; } .wv-btn:hover, .wv-btn:focus-visible { --growth: 1; } .wv-btn:active { transform: scale(.985); } .wv-btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; } .wv-btn:disabled:active { transform: none; } .wv-btn svg { width: 15px; height: 15px; flex-shrink: 0; } /* Primary — filled pine */ .wv-btn-primary, .wv-btn.wv-primary { background: var(--pine); color: var(--oat); border-color: var(--pine); } .wv-btn-primary:hover, .wv-btn.wv-primary:hover { background: var(--pine-deep); border-color: var(--pine-deep); } /* Secondary — outlined */ .wv-btn-secondary, .wv-btn.wv-secondary { background: transparent; color: var(--ink); border-color: var(--line); } .wv-btn-secondary:hover, .wv-btn.wv-secondary:hover { border-color: var(--ink-faint); background: var(--paper); } /* Tertiary — ghost / text-only */ .wv-btn-tertiary, .wv-btn.wv-tertiary { background: transparent; color: var(--pine); border-color: transparent; padding-left: .4rem; padding-right: .4rem; } .wv-btn-tertiary:hover, .wv-btn.wv-tertiary:hover { color: var(--pine-deep); text-decoration: underline; text-underline-offset: 3px; } /* On-dark variants */ .wv-btn.wv-on-dark.wv-primary { background: var(--oat); color: var(--pine-deep); border-color: var(--oat); } .wv-btn.wv-on-dark.wv-primary:hover { background: #fff; border-color: #fff; } .wv-btn.wv-on-dark.wv-secondary { background: transparent; color: var(--oat); border-color: rgba(241,236,223,.34); } .wv-btn.wv-on-dark.wv-secondary:hover { border-color: var(--oat); background: rgba(241,236,223,.08); } .wv-btn.wv-on-dark.wv-tertiary { color: var(--oat); } .wv-btn.wv-on-dark.wv-tertiary:hover { color: #fff; } /* Gold editorial variant */ .wv-btn.wv-gold { background: var(--gold-soft); color: var(--pine-deep); border-color: var(--gold-soft); } .wv-btn.wv-gold:hover { background: #E6CA96; border-color: #E6CA96; } /* Size: small */ .wv-btn.wv-sm { font-size: .875rem; padding: .36rem 1rem; border-radius: 8px; } /* Size: full width */ .wv-btn.wv-full { width: 100%; } /* ── Dividers ────────────────────────────────────────── */ .wv-divider { border: none; border-top: 1px solid var(--line); } .wv-divider-soft { border: none; border-top: 1px solid var(--line-soft); } /* ── Animated chevron → arrow ────────────────────────── */ .wv-arrow-svg { overflow: visible; width: 14px; height: 14px; flex-shrink: 0; margin-top: -1px; } .wv-arrow-tail, .wv-arrow-chev { stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; transition: transform 340ms var(--wv-ease); } .wv-arrow-tail { transform-origin: 7px 7px; transform: scaleX(var(--growth, 0)) translateX(calc(var(--growth, 0) * 5px)); } .wv-arrow-chev { fill: none; stroke-linejoin: round; transform: translateX(calc(var(--growth, 0) * 5px)); } /* ── Save / Shortlist (rose — the couple's mark) ────── */ .wv-save-btn { color: var(--ink-faint); transition: color 0.3s var(--wv-ease); } .wv-save-btn:hover { color: var(--rose); } .wv-save-btn.saved { color: var(--rose); } /* ── Availability / positive state (sage) ────────────── */ .wv-available { color: var(--sage); font-size: 0.82rem; font-weight: 500; } /* ── Gold editorial accent ───────────────────────────── */ .wv-gold { color: var(--gold); } .wv-gold-soft { color: var(--gold-soft); } /* ── Dark crescendo section ──────────────────────────── */ .wv-dark { background: var(--pine-deep); color: var(--oat); } .wv-dark .wv-section-title { color: var(--oat); } .wv-dark .wv-body { color: rgba(241,236,223,.82); } /* ── Motion ──────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .wv *, .wv *::before, .wv *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ── Nav elements — scroll-state driven via data-scrolled ── */ /* Nav links */ .wv-nav-link { display: none; font-size: .9375rem; font-weight: 500; padding-bottom: 2px; background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .4s var(--wv-ease), color .3s; } @media (min-width: 640px) { .wv-nav-link { display: block; } } .wv-nav-link:hover { background-size: 100% 1px; } nav:not([data-scrolled]) .wv-nav-link { color: rgba(241,236,223,.9); } nav:not([data-scrolled]) .wv-nav-link:hover { color: #fff; } nav[data-scrolled] .wv-nav-link { color: #211D15; } nav[data-scrolled] .wv-nav-link:hover { color: #2C4636; } /* Search button */ nav:not([data-scrolled]) .wv-search-btn { color: rgba(241,236,223,.9); } nav:not([data-scrolled]) .wv-search-btn:hover { color: #fff; background: rgba(241,236,223,.12); } nav[data-scrolled] .wv-search-btn { color: var(--ink); } nav[data-scrolled] .wv-search-btn:hover { color: var(--pine); background: var(--oat-2); } /* ══════════════════════════════════════════════════════ Homepage — CSS landscape scenes, doors, regions, featured venue, promise, journal, owner, closing ══════════════════════════════════════════════════════ */ /* ── Grain overlay ──────────────────────────────────── */ .wv-grain { position: fixed; inset: 0; z-index: 900; pointer-events: none; opacity: .4; mix-blend-mode: multiply; } .wv-grain::before { content: ""; position: absolute; inset: -50%; opacity: .05; background-image: url("data:image/svg+xml;utf8,"); } /* ── Title emphasis (shared chassis) ───────────────── */ .wv h1 em, .wv h2 em { font-style: normal; font-weight: inherit; color: inherit; } /* ── Shared section scaffold ────────────────────────── */ .wv-s-head { margin-bottom: clamp(2rem, 4vw, 3.4rem); max-width: 60ch; } .wv-s-head h2 { font-family: var(--wv-serif); font-weight: 400; letter-spacing: -.018em; font-size: clamp(1.95rem, 3.6vw, 3rem); line-height: 1.06; margin-top: .9rem; font-feature-settings: "ss01"; } .wv-s-head p { color: var(--ink-soft); font-size: 1.06rem; margin-top: 1rem; max-width: 54ch; } /* ── Hero ───────────────────────────────────────────── */ .wv-hero { position: relative; height: 100svh; min-height: 640px; overflow: hidden; } .wv-hero-grad { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(to bottom, rgba(17,24,18,.5) 0%, rgba(17,24,18,.22) 8%, rgba(17,24,18,.06) 15%, rgba(17,24,18,0) 24%), linear-gradient(to top, rgba(17,24,18,.86) 0%, rgba(17,24,18,.78) 12%, rgba(17,24,18,.6) 24%, rgba(17,24,18,.4) 38%, rgba(17,24,18,.22) 54%, rgba(17,24,18,.08) 72%, rgba(17,24,18,0) 88%); } .wv-hero-inner { position: relative; z-index: 4; height: 100%; max-width: 1260px; margin: 0 auto; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 clamp(1.3rem, 5vw, 5rem) clamp(2.6rem, 6vh, 4.6rem); text-shadow: 0 1px 12px rgba(10,14,11,.55), 0 1px 3px rgba(10,14,11,.4); } .wv-hero h1 { font-family: var(--wv-serif); font-weight: 380; color: var(--oat); font-size: clamp(3rem, 8.2vw, 7rem); line-height: 0.95; letter-spacing: -0.028em; margin: 1.2rem 0 0; max-width: 17ch; font-feature-settings: "ss01"; } .wv-hero-sub { margin-top: 1.5rem; max-width: 46ch; font-size: 1.05rem; color: rgba(241,236,223,.84); } .wv-hero-foot { display: flex; flex-wrap: nowrap; align-items: center; gap: .7rem 1.6rem; margin-top: 1.9rem; padding-top: 1.4rem; border-top: 1px solid rgba(241,236,223,.18); overflow-x: auto; scrollbar-width: none; } .wv-hero-foot .wv-stat { display: flex; flex-direction: row; align-items: baseline; gap: .5rem; white-space: nowrap; } .wv-hero-foot .wv-stat-n { font-family: var(--wv-serif); font-size: 1.4rem; color: var(--oat); font-variant-numeric: tabular-nums; } .wv-hero-foot .wv-stat-l { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(241,236,223,.62); } .wv-hero-foot .wv-stat-div { width: 1px; height: 20px; background: rgba(241,236,223,.22); } .wv-hero-foot .wv-stat-line { font-size: .82rem; color: rgba(241,236,223,.72); font-style: italic; font-family: var(--wv-serif); } /* ── CSS landscape scenes ───────────────────────────── */ .wv-scene { position: relative; overflow: hidden; isolation: isolate; background: #cdd3c9; } .wv-scene .wv-terrain { position: absolute; inset: 0; } .wv-scene .wv-sky { position: absolute; inset: 0; } .wv-scene .wv-sky::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 54%; } .wv-scene .wv-sun { position: absolute; border-radius: 50%; animation: wv-sunbreath 12s ease-in-out infinite; } .wv-scene .wv-sun::before, .wv-scene .wv-sun::after { content: ""; position: absolute; border-radius: 50%; } .wv-scene .wv-sun::before { inset: 17%; } .wv-scene .wv-sun::after { inset: 37%; } .wv-scene .wv-ridge { position: absolute; left: -2%; right: -2%; bottom: 0; top: 0; } .wv-r-back { clip-path: polygon(0 54%,13% 39%,27% 51%,41% 33%,56% 49%,71% 31%,86% 47%,100% 37%,100% 100%,0 100%); } .wv-r-mid { clip-path: polygon(0 69%,16% 57%,34% 68%,50% 52%,67% 67%,83% 56%,100% 65%,100% 100%,0 100%); } .wv-r-front { clip-path: polygon(0 84%,21% 75%,43% 87%,61% 73%,79% 85%,100% 77%,100% 100%,0 100%); } .wv-scene .wv-fg { position: absolute; left: 0; right: 0; bottom: 0; } .wv-scene::before { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; } .wv-scene::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; background: radial-gradient(133% 118% at 50% 24%, transparent 57%, rgba(15,19,13,.24) 100%); } @keyframes wv-sunbreath { 0%,100% { opacity: .88; } 50% { opacity: 1; } } @keyframes wv-twinkle { 0%,100% { opacity: .6; } 50% { opacity: .92; } } @keyframes wv-emberglow { 0%,100% { opacity: .8; } 50% { opacity: 1; } } @keyframes wv-herofloat { from { transform: scale(1.02); } to { transform: scale(1.08); } } /* Hero float */ .wv-hero .wv-scene .wv-terrain { animation: wv-herofloat 26s ease-in-out infinite alternate; } /* Lakeside — homepage hero */ .wv-s-lake .wv-sky { background: linear-gradient(183deg,#E9C9A0 0%,#EBD2AC 22%,#E4D2B6 42%,#CFD3C2 64%,#AEC2C3 84%,#9DB7BC 100%); } .wv-s-lake .wv-sky::after { display: none; } .wv-s-lake .wv-sun { width: 30%; padding-bottom: 30%; left: 52%; top: 14%; background: radial-gradient(circle,rgba(255,238,206,.4) 0%,rgba(255,232,194,.14) 44%,transparent 66%); } .wv-s-lake .wv-sun::before { background: radial-gradient(circle,rgba(255,243,218,.62) 0%,transparent 64%); } .wv-s-lake .wv-sun::after { background: radial-gradient(circle,#FFFCF2 0%,rgba(255,246,224,.7) 52%,transparent 80%); } .wv-s-lake .wv-r-back { top: 0; bottom: 0; clip-path: polygon(0 49%,11% 38%,24% 47%,38% 31%,49% 44%,61% 29%,74% 45%,87% 34%,100% 43%,100% 64%,0 64%); background: linear-gradient(180deg,#B6BFC4 0%,#A6B2B6 100%); } .wv-s-lake .wv-r-mid { top: 0; bottom: 0; clip-path: polygon(0 58%,14% 46%,30% 57%,45% 41%,58% 55%,72% 43%,88% 56%,100% 47%,100% 64%,0 64%); background: linear-gradient(180deg,#8FA0A0 0%,#6E8284 70%,#5E7375 100%); } .wv-s-lake .wv-r-mid::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 54%; clip-path: polygon(0 84%,14% 70%,30% 86%,45% 62%,58% 84%,72% 64%,88% 86%,100% 70%,100% 0,0 0); background: linear-gradient(180deg,#F4F6F4 0%,#CDD7D6 100%); opacity: .92; } .wv-s-lake .wv-fg { height: 9%; background: linear-gradient(180deg,#46554C 0%,#384A41 100%); } .wv-s-lake .wv-lake { position: absolute; left: 0; right: 0; bottom: 9%; top: 64%; overflow: hidden; background: linear-gradient(180deg,#9DB7BC 0%,#AEC2C3 16%,#CFD3C2 38%,#E4D2B6 62%,#EBD2AC 82%,#E3C9A2 100%); } .wv-s-lake .wv-lake::before { content: ""; position: absolute; left: -2%; right: -2%; top: -2%; height: 62%; clip-path: polygon(0 16%,14% 30%,30% 14%,45% 38%,58% 16%,72% 36%,88% 14%,100% 30%,100% 100%,0 100%); background: linear-gradient(180deg,#7E9294 0%,#6E8284 100%); opacity: .5; } .wv-s-lake .wv-lake::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg,rgba(255,255,255,.16) 0 1px,transparent 1px 9px); } .wv-s-lake::before { background: radial-gradient(54% 60% at 56% 22%,rgba(255,238,206,.4) 0%,transparent 64%); } .wv-s-lake::after { background: radial-gradient(140% 120% at 50% 40%,transparent 54%,rgba(15,19,13,.32) 100%); } /* Golden lawn — late afternoon */ .wv-s-lawn .wv-sky { background: linear-gradient(183deg,#DCC489 0%,#E7D49E 30%,#EFDCAB 56%,#ECD7A5 82%,#E3CA95 100%); } .wv-s-lawn .wv-sky::after { background: linear-gradient(180deg,transparent,rgba(249,240,214,.92)); } .wv-s-lawn .wv-sun { width: 40%; padding-bottom: 40%; left: 56%; top: 5%; background: radial-gradient(circle,rgba(255,247,222,.42) 0%,rgba(255,243,210,.15) 42%,transparent 66%); } .wv-s-lawn .wv-sun::before { background: radial-gradient(circle,rgba(255,249,228,.7) 0%,transparent 64%); } .wv-s-lawn .wv-sun::after { background: radial-gradient(circle,#FFFEF6 0%,rgba(255,250,230,.7) 50%,transparent 78%); } .wv-s-lawn .wv-r-back { background: linear-gradient(180deg,#BEC4A4 0%,#ADB694 60%,#A3AD8C 100%); } .wv-s-lawn .wv-r-mid { background: linear-gradient(180deg,#8C9D72 16%,#73865B 66%,#677953 100%); } .wv-s-lawn .wv-r-front { background: linear-gradient(180deg,#5A6C42 10%,#485835 60%,#3D4C2D 100%); } .wv-s-lawn .wv-fg { height: 30%; background: linear-gradient(180deg,#6A8050 0%,#54693F 32%,#445A39 70%,#3A4E33 100%); } .wv-s-lawn::before { background: radial-gradient(58% 68% at 70% 20%,rgba(255,239,198,.36) 0%,transparent 66%); } /* Coastal — bright sea light */ .wv-s-coast .wv-sky { background: linear-gradient(183deg,#A7C8D6 0%,#BBD3DC 38%,#D2DFDF 70%,#E2E7E2 100%); } .wv-s-coast .wv-sky::after { background: linear-gradient(180deg,transparent,rgba(228,231,226,.5)); } .wv-s-coast .wv-sun { width: 34%; padding-bottom: 34%; left: 62%; top: 8%; background: radial-gradient(circle,rgba(255,250,232,.4) 0%,transparent 64%); } .wv-s-coast .wv-sun::before { background: radial-gradient(circle,rgba(255,252,240,.62) 0%,transparent 66%); } .wv-s-coast .wv-sun::after { background: radial-gradient(circle,#FFFFFB 0%,rgba(255,253,243,.7) 52%,transparent 80%); } .wv-s-coast .wv-r-back { background: linear-gradient(180deg,#9DB6BC 0%,#8CA7AC 100%); } .wv-s-coast .wv-r-mid { background: linear-gradient(180deg,#6F9298 16%,#5C8085 100%); } .wv-s-coast .wv-fg { height: 40%; background: linear-gradient(180deg,#5E97A4 0%,#3E7E8E 44%,#2F6878 100%); } .wv-s-coast .wv-fg::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 60%; background: repeating-linear-gradient(91deg,rgba(255,255,255,.16) 0 3px,transparent 3px 22px); } .wv-s-coast::before { background: radial-gradient(60% 60% at 64% 20%,rgba(255,252,236,.4) 0%,transparent 66%); } /* Winery — warm afternoon vines */ .wv-s-vines .wv-sky { background: linear-gradient(183deg,#CDC192 0%,#D6CA9B 42%,#D0C394 78%,#C3B787 100%); } .wv-s-vines .wv-sky::after { background: linear-gradient(180deg,transparent,rgba(216,206,158,.86)); } .wv-s-vines .wv-sun { width: 30%; padding-bottom: 30%; left: 60%; top: 9%; background: radial-gradient(circle,rgba(255,243,206,.36) 0%,transparent 64%); } .wv-s-vines .wv-sun::before { background: radial-gradient(circle,rgba(255,246,214,.54) 0%,transparent 66%); } .wv-s-vines .wv-sun::after { background: radial-gradient(circle,#FFFDF2 0%,rgba(255,248,224,.66) 54%,transparent 80%); } .wv-s-vines .wv-r-back { background: linear-gradient(180deg,#A8B088 0%,#99A27B 100%); } .wv-s-vines .wv-r-mid { background: linear-gradient(180deg,#808D61 14%,#6C7A52 100%); } .wv-s-vines .wv-fg { height: 46%; background: linear-gradient(180deg,rgba(70,82,46,0) 0%,rgba(38,48,26,.5) 100%), repeating-linear-gradient(95deg,#667C49 0 6px,#4D6034 6px 25px); } .wv-s-vines::before { background: radial-gradient(64% 58% at 62% 22%,rgba(255,241,202,.32) 0%,transparent 68%); } /* Woolshed / barn at dusk */ .wv-s-shed .wv-sky { background: linear-gradient(183deg,#3C415E 0%,#585370 32%,#8A7273 58%,#BC9069 82%,#CE9F6C 100%); } .wv-s-shed .wv-sky::after { background: linear-gradient(180deg,transparent,rgba(210,156,103,.62)); } .wv-s-shed .wv-sun { width: 32%; padding-bottom: 32%; left: 8%; top: 42%; background: radial-gradient(circle,rgba(255,205,150,.34) 0%,transparent 66%); } .wv-s-shed .wv-sun::before { background: radial-gradient(circle,rgba(255,210,156,.5) 0%,transparent 66%); } .wv-s-shed .wv-sun::after { background: radial-gradient(circle,rgba(255,228,186,.85) 0%,rgba(255,206,150,.5) 56%,transparent 82%); } .wv-s-shed .wv-r-back { background: linear-gradient(180deg,#5D6275 0%,#4E5263 100%); } .wv-s-shed .wv-r-mid { background: linear-gradient(180deg,#3F4250 16%,#33353F 100%); } .wv-s-shed .wv-fg { height: 34%; background: linear-gradient(180deg,#2C2F34 0%,#1F2226 100%); } .wv-s-shed .wv-barn { position: absolute; z-index: 2; left: 50%; bottom: 18%; transform: translateX(-50%); width: 38%; height: 34%; background: linear-gradient(180deg,#35352D 0%,#232420 38%,#1B1C18 100%); clip-path: polygon(0 32%,50% 0,100% 32%,100% 100%,0 100%); } .wv-s-shed .wv-win { position: absolute; z-index: 3; left: 50%; bottom: 21%; transform: translateX(-50%); width: 7%; height: 11%; border-radius: 1px; background: #FFD98C; box-shadow: 0 0 30px 8px rgba(255,205,125,.62); animation: wv-emberglow 5.5s ease-in-out infinite; } .wv-s-shed::before { background: radial-gradient(66% 52% at 50% 82%,rgba(255,196,124,.22) 0%,transparent 72%); } /* Alpine range — bright midday */ .wv-s-range .wv-sky { background: linear-gradient(183deg,#9BBAD1 0%,#B4CADA 40%,#CCD8DD 72%,#D9E0DD 100%); } .wv-s-range .wv-sky::after { background: linear-gradient(180deg,transparent,rgba(228,233,233,.92)); } .wv-s-range .wv-sun { display: none; } .wv-s-range .wv-r-back { background: linear-gradient(180deg,#A9BEC6 0%,#99B0B6 100%); } .wv-s-range .wv-r-mid { background: linear-gradient(180deg,#7E969B 14%,#6A8287 100%); } .wv-s-range .wv-r-front { background: linear-gradient(180deg,#577169 10%,#445C50 100%); } .wv-s-range .wv-fg { height: 24%; background: linear-gradient(180deg,#47614F 0%,#374B3D 100%); } .wv-s-range .wv-snow { position: absolute; z-index: 2; left: -2%; right: -2%; top: 0; bottom: 0; clip-path: polygon(37% 36%,43% 27%,49% 35%,55% 30%,60% 37%,52% 43%,43% 43%); background: linear-gradient(180deg,#FCFDFE 0%,#DAE4E9 100%); } .wv-s-range::before { background: radial-gradient(80% 56% at 50% 16%,rgba(255,255,255,.24) 0%,transparent 70%); } /* Night */ .wv-s-night .wv-sky { background: linear-gradient(183deg,#0F141E 0%,#171F2C 44%,#26303D 78%,#313947 100%); } .wv-s-night .wv-sky::after { background: linear-gradient(180deg,transparent,rgba(58,70,88,.5)); } .wv-s-night .wv-sun { width: 22%; padding-bottom: 22%; left: 64%; top: 9%; background: radial-gradient(circle,rgba(205,214,228,.26) 0%,transparent 60%); } .wv-s-night .wv-sun::before { background: radial-gradient(circle,rgba(216,224,236,.42) 0%,transparent 66%); } .wv-s-night .wv-sun::after { background: radial-gradient(circle,#FBFCF6 0%,rgba(238,240,230,.62) 56%,transparent 82%); } .wv-s-night .wv-r-mid { background: linear-gradient(180deg,#1D2723 0%,#161E1B 100%); } .wv-s-night .wv-r-front { background: linear-gradient(180deg,#121916 0%,#0C110F 100%); } .wv-s-night .wv-fg { height: 24%; background: linear-gradient(180deg,#0D130F 0%,#080C0A 100%); } .wv-s-night .wv-stars { position: absolute; inset: 0; opacity: .8; animation: wv-twinkle 6.5s ease-in-out infinite; background-image: radial-gradient(1.5px 1.5px at 14% 20%,#fff,transparent), radial-gradient(1.2px 1.2px at 26% 12%,#fff,transparent), radial-gradient(1.6px 1.6px at 39% 25%,#fff,transparent), radial-gradient(1.1px 1.1px at 52% 9%,#fff,transparent), radial-gradient(1.4px 1.4px at 61% 22%,#fff,transparent), radial-gradient(1.2px 1.2px at 73% 14%,#fff,transparent), radial-gradient(1.5px 1.5px at 86% 26%,#fff,transparent), radial-gradient(1.1px 1.1px at 8% 33%,#fff,transparent), radial-gradient(1.3px 1.3px at 45% 33%,#fff,transparent); } .wv-s-night::before { background: radial-gradient(58% 58% at 71% 19%,rgba(182,196,220,.2) 0%,transparent 68%); } /* ── Garden scene ── */ .wv-s-garden .wv-sky { background: linear-gradient(183deg,#C6D29C,#DDE3B4 64%,#E8E4C6); } .wv-s-garden .wv-sun { width: 30%; padding-bottom: 30%; left: 14%; top: 10%; background: radial-gradient(circle,rgba(255,250,214,.4),transparent 66%); } .wv-s-garden .wv-sun::after { background: radial-gradient(circle,#FFFEF4,rgba(255,252,228,.6) 54%,transparent 80%); } .wv-s-garden .wv-r-back { background: linear-gradient(180deg,#AFBE86,#9DAD72); } .wv-s-garden .wv-r-mid { background: linear-gradient(180deg,#84985C 14%,#6F8449); } .wv-s-garden .wv-fg { height: 50%; background: linear-gradient(180deg,rgba(78,96,50,0),rgba(48,60,30,.4)), radial-gradient(circle at 20% 80%,#7E9A52 0 8%,transparent 9%), radial-gradient(circle at 55% 88%,#6D8945 0 10%,transparent 11%), radial-gradient(circle at 82% 82%,#88A35C 0 7%,transparent 8%), linear-gradient(180deg,#5E7740,#3E5230); } /* ── City scene ── */ .wv-s-city .wv-sky { background: linear-gradient(183deg,#B7C3CC,#D6DBDA 64%,#E4E0D2); } .wv-s-city .wv-sun { width: 22%; padding-bottom: 22%; left: 64%; top: 14%; background: radial-gradient(circle,rgba(255,246,224,.36),transparent 64%); } .wv-s-city .wv-sun::after { background: radial-gradient(circle,#FFFEF6,rgba(255,250,230,.55) 54%,transparent 80%); } .wv-s-city .wv-fg { height: 46%; background: linear-gradient(180deg,#8A9499,#6E797E); } .wv-s-city .wv-skyline { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 52%; background: linear-gradient(90deg,transparent 8%,#3E4A4E 8% 17%,transparent 17% 22%, #495559 22% 28%,transparent 28% 36%,#364145 36% 48%,transparent 48% 54%, #44504F 54% 63%,transparent 63% 70%,#3A4548 70% 82%,transparent 82% 88%, #4B5654 88% 96%,transparent 96%); clip-path: polygon(0 38%,8% 38%,8% 20%,17% 20%,17% 38%,28% 38%,28% 10%,36% 10%, 36% 38%,48% 38%,48% 26%,54% 26%,54% 38%,63% 38%,63% 4%,70% 4%,70% 38%, 82% 38%,82% 22%,88% 22%,88% 38%,96% 38%,96% 30%,100% 30%,100% 100%,0 100%); } /* ── Regions atlas page ─────────────────────────────── */ /* ── Unified select / dropdown ─────────────────────── */ select.wv-select, .wv-field select, .wv-fselect, .wv-sort-inline select, .wv-fb-sort select { appearance: none; -webkit-appearance: none; background: var(--paper); border: 1.5px solid var(--line); border-radius: 9px; padding: .7rem 2.2rem .7rem .85rem; font-size: .95rem; color: var(--ink); font-family: var(--wv-sans); cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235B5446' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; transition: border-color .25s var(--wv-ease), background-color .25s; } select.wv-select:focus, .wv-field select:focus, .wv-fselect:focus, .wv-sort-inline select:focus, .wv-fb-sort select:focus { outline: none; border-color: var(--pine); background-color: var(--paper); } /* Compact variant for inline sort controls */ .wv-sort-inline select, .wv-fb-sort select { padding: .45rem 2rem .45rem .65rem; font-size: .85rem; border-width: 1px; border-radius: 8px; } /* Full-width variant for form fields and filter drawers */ .wv-field select, .wv-fselect { width: 100%; } /* Form field uses oat background */ .wv-field select { background-color: var(--oat); } .wv-field select:focus { background-color: var(--paper); } /* ── Custom dropdown ───────────────────────────────── */ .wv-dropdown { position: relative; display: inline-block; } .wv-dropdown-trigger { display: inline-flex; align-items: center; gap: .4rem; background: var(--paper); border: 1.5px solid var(--line); border-radius: 9px; padding: .7rem 2.2rem .7rem .85rem; font-size: .95rem; color: var(--ink); font-family: var(--wv-sans); cursor: pointer; white-space: nowrap; transition: border-color .25s var(--wv-ease); } .wv-dropdown-trigger:hover { border-color: var(--ink-faint); } .wv-dropdown-trigger:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .wv-dropdown[aria-expanded] .wv-dropdown-trigger, .wv-dropdown-trigger[aria-expanded="true"] { border-color: var(--pine); } .wv-dropdown-trigger svg { width: 18px; height: 18px; color: var(--ink-faint); position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); transition: transform .2s var(--wv-ease); } .wv-dropdown-trigger[aria-expanded="true"] svg { transform: translateY(-50%) rotate(180deg); } .wv-dropdown-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 100%; z-index: 120; background: var(--paper); border: 1.5px solid var(--line); border-radius: 10px; padding: .35rem; list-style: none; box-shadow: 0 12px 32px -8px rgba(15,21,15,.18); max-height: min(20rem, calc(100vh - 2rem)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; animation: wv-dd-in .15s var(--wv-ease); } @keyframes wv-dd-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .wv-dropdown-menu li { display: flex; align-items: center; padding: .55rem .75rem; border-radius: 7px; font-size: .9rem; color: var(--ink); font-family: var(--wv-sans); cursor: pointer; white-space: nowrap; transition: background .15s; } .wv-dropdown-menu li:hover { background: var(--oat-2); } .wv-dropdown-menu li.wv-dd-active { color: var(--pine); font-weight: 500; } /* Compact variant for inline sort */ .wv-dropdown-compact .wv-dropdown-trigger { padding: .45rem 2rem .45rem .65rem; font-size: .85rem; border-width: 1px; border-radius: 8px; } .wv-dropdown-compact .wv-dropdown-menu { border-radius: 9px; } .wv-dropdown-compact .wv-dropdown-menu li { font-size: .85rem; padding: .5rem .7rem; } /* Full-width variant */ .wv-dropdown-full { display: block; } .wv-dropdown-full .wv-dropdown-trigger { width: 100%; justify-content: space-between; } /* Dropdown heading (non-selectable label) */ .wv-dropdown-menu li.wv-dd-heading { font-size: .78rem; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); cursor: default; padding: .45rem .75rem .25rem; } .wv-dropdown-menu li.wv-dd-heading:hover { background: none; } /* Dropdown check indicator */ .wv-dd-check { display: inline-block; width: 16px; height: 16px; flex-shrink: 0; border: 1.5px solid var(--line); border-radius: 4px; margin-right: .5rem; position: relative; transition: border-color .15s, background .15s; } .wv-dd-checked { border-color: var(--pine); background: var(--pine); } .wv-dd-checked::after { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 9px; border: solid var(--paper, #fff); border-width: 0 2px 2px 0; transform: translate(-50%, -60%) rotate(45deg); } /* Grouped dropdown — flat parent + indented children */ .wv-dd-parent { position: relative; } .wv-dd-parent-label { flex: 1; } .wv-dd-chevron { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: none; background: none; border-radius: 6px; cursor: pointer; color: var(--ink-faint); transition: background .12s; margin-left: auto; } .wv-dd-chevron:hover { background: var(--oat-2); } .wv-dd-chevron svg { width: 18px; height: 18px; transition: transform .2s var(--wv-ease); } .wv-dd-chevron-open svg { transform: rotate(180deg); } .wv-dropdown-menu li.wv-dd-child { padding-left: 2rem; font-size: .85rem; color: var(--ink-soft); } .wv-dropdown-menu li.wv-dd-child:hover { background: rgba(0,0,0,.06); } .wv-dropdown-menu li.wv-dd-child.wv-dd-active { color: var(--pine); font-weight: 500; } /* ── Style page hero ───────────────────────────────── */ .wv-style-hero { position: relative; min-height: 340px; overflow: hidden; display: flex; align-items: flex-end; } .wv-style-hero-scene { position: absolute; inset: 0; } .wv-style-hero-scene .wv-scene { position: absolute; inset: 0; } .wv-style-hero-grad { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(17,24,18,.4) 0%, rgba(17,24,18,.1) 20%, transparent 40%), linear-gradient(to top, rgba(17,24,18,.78) 0%, rgba(17,24,18,.4) 30%, transparent 60%); } .wv-style-hero-inner { position: relative; z-index: 2; width: 100%; text-align: left; padding-top: calc(var(--wv-nav-h, 64px) + clamp(2rem, 5vw, 4rem)); padding-bottom: clamp(2rem, 4vw, 3rem); color: var(--oat); } .wv-style-hero h1 { font-family: var(--wv-serif); font-weight: 320; letter-spacing: -.022em; font-size: clamp(2.4rem, 5.6vw, 4.2rem); line-height: 1.02; font-feature-settings: "ss01"; margin-top: .6rem; max-width: 18ch; } .wv-style-hero-lede { margin-top: .8rem; font-size: 1.05rem; color: rgba(241,236,223,.8); max-width: 50ch; line-height: 1.6; } .wv-style-desc { font-size: 1.05rem; color: var(--ink-soft); max-width: 68ch; line-height: 1.7; } /* ── Pagination ────────────────────────────────────── */ .wv-pagination { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: clamp(2rem, 4vw, 3rem); } .wv-page-num { width: 36px; height: 36px; border-radius: 8px; font-size: .88rem; font-weight: 400; font-family: var(--wv-serif); cursor: pointer; display: flex; align-items: center; justify-content: center; background: none; color: var(--ink-soft); border: 1px solid var(--line-soft); transition: background .2s var(--wv-ease), color .2s, border-color .2s; } .wv-page-num:hover { border-color: var(--line); } .wv-page-num.wv-active { background: var(--pine); color: var(--oat); border-color: var(--pine); font-weight: 600; } /* ── Mobile menu ───────────────────────────────────── */ .wv-mobile-menu-btn { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--line); background: var(--paper); cursor: pointer; transition: border-color .2s; } .wv-mobile-menu-btn:hover { border-color: var(--ink-faint); } .wv-mobile-menu-btn svg { width: 18px; height: 18px; } @media (min-width: 640px) { .wv-mobile-menu-btn { display: none; } } .wv-nav-cta { display: none; } @media (min-width: 640px) { .wv-nav-cta { display: inline-flex; } div.wv-nav-cta { display: flex; } } .wv-mobile-nav { display: flex; flex-direction: column; gap: .25rem; } .wv-mobile-nav-link { display: block; padding: .75rem .5rem; font-size: 1.06rem; font-weight: 500; color: var(--ink); text-decoration: none; border-radius: 8px; transition: background .15s, color .15s; } .wv-mobile-nav-link:hover { background: var(--oat-2); } .wv-mobile-nav-link.wv-active { color: var(--pine); } .wv-mobile-nav-divider { height: 1px; background: var(--line-soft); margin: .6rem 0; } /* Middot separator — minimum 200% scale */ .wv-mid { font-size: max(200%, 1.4rem); line-height: 0; vertical-align: middle; } /* Shared page-top spacing — clears the sticky nav */ .wv-page-top { padding-top: calc(var(--wv-nav-h, 64px) + clamp(1.5rem, 3.5vw, 2.8rem)); } .wv-atlas-hero { padding-bottom: clamp(1.2rem, 2.2vw, 1.8rem); } .wv-atlas-hero h1 { font-family: var(--wv-serif); font-weight: 320; letter-spacing: -.022em; font-size: clamp(2.4rem, 5.6vw, 4.2rem); line-height: 1.02; font-feature-settings: "ss01"; max-width: 16ch; } .wv-atlas-hero .wv-eyebrow + h1 { margin-top: 1.1rem; } /* For-businesses masthead (venues surface) */ .wvd-fb-masthead { padding-top: calc(var(--wv-nav-h, 64px) + clamp(1.5rem, 3.5vw, 2.8rem)); } .wv-atlas-hero .wv-lede { margin-top: .8rem; color: var(--ink-soft); font-family: var(--wv-sans); font-weight: 400; font-size: 1.05rem; line-height: 1.7; max-width: 60ch; } /* stat band */ .wv-statband { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--oat-2); } .wv-statband-inner { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; padding-top: 1rem; padding-bottom: 1rem; } .wv-stat { display: flex; flex-direction: column; gap: .1rem; } .wv-stat-num { font-family: var(--wv-serif); font-weight: 380; font-size: 1.8rem; line-height: 1; font-feature-settings: "ss01"; } .wv-stat-label { font-size: .78rem; letter-spacing: .04em; color: var(--ink-soft); } /* island sections */ .wv-island { padding-top: clamp(1.7rem, 3vw, 2.6rem); padding-bottom: clamp(.4rem, .8vw, .8rem); } .wv-island-head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.15rem; } .wv-island-head h2 { font-family: var(--wv-serif); font-weight: 380; font-size: clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing: -.016em; font-feature-settings: "ss01"; } .wv-island-head .wv-ih-meta { font-size: .8rem; letter-spacing: .04em; color: var(--ink-faint); margin-left: auto; white-space: nowrap; } /* region grid */ .wv-region-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } @media(max-width: 980px) { .wv-region-grid { grid-template-columns: repeat(2, 1fr); } } @media(max-width: 600px) { .wv-region-grid { grid-template-columns: 1fr; } } /* region card */ .wv-rc { position: relative; background: var(--paper); border: 1px solid var(--line-soft); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: border-color .3s var(--wv-ease), box-shadow .3s var(--wv-ease), transform .3s var(--wv-ease); } .wv-rc:hover { border-color: var(--line); transform: translateY(-3px); } .wv-rc-scene { position: relative; aspect-ratio: 2/1; overflow: hidden; } .wv-rc-scene .wv-scene, .wv-rc-scene .wvd-studio { position: absolute; inset: 0; width: 100%; height: 100%; } .wv-rc-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(15,21,15,.32)); } .wv-rc-body { padding: 1.05rem 1.15rem 1.2rem; display: flex; flex-direction: column; flex: 1; } .wv-rc-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .wv-rc-name { font-family: var(--wv-serif); font-weight: 430; font-size: 1.42rem; line-height: 1.22; letter-spacing: -.016em; font-feature-settings: "ss01"; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wv-rc-venues { font-size: .82rem; color: var(--gold); white-space: nowrap; flex-shrink: 0; } .wv-rc-char { margin-top: .4rem; font-size: .92rem; color: var(--ink-soft); line-height: 1.5; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .wv-rc-foot { margin-top: .95rem; padding-top: .75rem; border-top: 1px solid var(--line-soft); display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .wv-rc-price { font-size: .82rem; color: var(--ink-faint); } .wv-rc-price b { font-family: var(--wv-serif); font-weight: 400; font-size: 1.1rem; color: var(--pine); font-feature-settings: "ss01"; } .wv-rc-go { --growth: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--oat-2); display: flex; align-items: center; justify-content: center; transition: background .25s var(--wv-ease), transform .25s var(--wv-ease); } .wv-rc:hover .wv-rc-go { --growth: 1; background: var(--pine); transform: translateX(3px); } .wv-rc-go svg { width: 14px; height: 14px; color: var(--pine); transition: color .25s var(--wv-ease); } .wv-rc:hover .wv-rc-go svg { color: var(--oat); } .wv-rc-name a { color: inherit; text-decoration: none; } .wv-rc-name a::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: 14px; } .wv-rc-name a:focus-visible { outline: none; } .wv-rc-name a:focus-visible::after { outline: 2px solid var(--gold); outline-offset: 2px; } .wv-rc:hover .wv-rc-name { color: var(--pine); } /* popular areas strip */ .wv-areas { padding-top: clamp(1.6rem, 2.8vw, 2.2rem); padding-bottom: .4rem; } .wv-areas-head { margin-bottom: 1rem; } .wv-areas-head .wv-eyebrow { margin-bottom: .45rem; } .wv-areas-head p { font-size: .92rem; color: var(--ink-faint); max-width: 52ch; } .wv-area-chips { display: flex; flex-wrap: wrap; gap: .6rem; } .wv-area-chip { display: inline-flex; align-items: center; gap: .5rem; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: .5rem .55rem .5rem .95rem; font-size: .9rem; color: var(--ink); transition: border-color .2s var(--wv-ease), background .2s, transform .14s; text-decoration: none; } .wv-area-chip:hover { border-color: var(--ink-faint); transform: translateY(-1px); } .wv-area-chip .wv-ac-region { font-size: .74rem; color: var(--ink-faint); } .wv-area-chip .wv-ac-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--line); } .wv-area-chip .wv-ac-arrow { --growth: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--oat-2); display: flex; align-items: center; justify-content: center; } .wv-area-chip:hover .wv-ac-arrow { --growth: 1; } .wv-area-chip .wv-ac-arrow svg { width: 12px; height: 12px; color: var(--pine); } /* closing atlas block */ .wv-atlas-closing { margin-top: clamp(2.5rem, 5vw, 4rem); margin-bottom: clamp(3rem, 6vw, 5rem); } .wv-atlas-closing-inner { background: var(--pine-deep); border-radius: 18px; padding: clamp(2rem, 4vw, 3.2rem); text-align: center; position: relative; overflow: hidden; } .wv-atlas-closing-inner::before { content: ""; position: absolute; inset: 0; opacity: .5; background: radial-gradient(ellipse at 70% 0%, rgba(176,132,58,.28), transparent 60%); } .wv-atlas-closing-inner > * { position: relative; } .wv-atlas-closing h2 { font-family: var(--wv-serif); font-weight: 330; color: var(--oat); font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.12; margin: .8rem 0 .5rem; font-feature-settings: "ss01"; } .wv-atlas-closing p { color: rgba(241,236,223,.72); max-width: 46ch; margin: 0 auto 1.5rem; font-size: 1rem; } .wv-atlas-closing-cta { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; } /* ── Doorway intro ──────────────────────────────────── */ .wv-doorways-intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: end; } .wv-doorways-intro .wv-lede { max-width: 20ch; } .wv-doorways-intro .wv-lede em { font-style: italic; color: var(--pine); } /* ── Three doors ────────────────────────────────────── */ .wv-doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: clamp(2rem, 4vw, 3rem); } .wv-door { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(380px, 46vw, 540px); border-radius: 8px; overflow: hidden; border: none; padding: 0; cursor: pointer; background: none; text-align: left; color: var(--oat); } .wv-door .wv-scene .wv-terrain { transition: transform 1.1s var(--wv-ease-soft); } .wv-door:hover .wv-scene .wv-terrain, .wv-door:focus-visible .wv-scene .wv-terrain { transform: scale(1.07); } .wv-door .wv-veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(15,21,15,.82) 0%, rgba(15,21,15,.42) 38%, rgba(15,21,15,.08) 66%, rgba(15,21,15,0) 100%); transition: opacity .5s var(--wv-ease); } .wv-door:hover .wv-veil { opacity: .86; } .wv-door-body { position: relative; z-index: 2; padding: 1.7rem 1.6rem 1.6rem; text-shadow: 0 1px 10px rgba(10,14,11,.5); } .wv-door-num { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(241,236,223,.6); } .wv-door h3 { font-family: var(--wv-serif); font-weight: 400; font-size: clamp(1.5rem, 2.3vw, 1.95rem); letter-spacing: -.012em; margin: .55rem 0 .5rem; font-feature-settings: "ss01"; } .wv-door p { font-size: .94rem; color: rgba(241,236,223,.82); max-width: 30ch; } .wv-door-preview { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .95rem; } .wv-chip { font-size: .71rem; letter-spacing: .02em; color: rgba(241,236,223,.92); border: 1px solid rgba(241,236,223,.32); border-radius: 999px; padding: .26rem .68rem; background: rgba(15,21,15,.28); backdrop-filter: blur(3px); transition: background .4s var(--wv-ease), border-color .4s var(--wv-ease); } .wv-door:hover .wv-chip { background: rgba(15,21,15,.42); border-color: rgba(241,236,223,.5); } .wv-chip-more { border-style: dashed; color: rgba(241,236,223,.7); } .wv-door-go { --growth: 0; display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--oat); } .wv-door:hover .wv-door-go { --growth: 1; } /* ── Featured venue ─────────────────────────────────── */ .wv-featured { background: var(--pine-deep); color: var(--oat); position: relative; overflow: hidden; border-radius: 14px; padding: clamp(1.6rem, 3vw, 2.4rem); } .wv-featured .wv-f-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem, 3vw, 2.4rem); align-items: stretch; } .wv-f-visual { position: relative; border-radius: 8px; overflow: hidden; min-height: 360px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); } .wv-f-visual .wv-scene { position: absolute; inset: 0; } .wv-f-visual .wv-f-tag { position: absolute; z-index: 7; top: 1rem; left: 1rem; background: rgba(252,250,244,.95); color: var(--pine); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; padding: .42rem .85rem; border-radius: 999px; } .wv-f-visual .wv-f-cr { position: absolute; z-index: 7; right: .9rem; bottom: .8rem; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(241,236,223,.72); } .wv-f-name { font-family: var(--wv-serif); font-weight: 400; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.04; letter-spacing: -.018em; margin: 1rem 0 .4rem; font-feature-settings: "ss01"; } .wv-f-loc { display: flex; align-items: center; gap: .45rem; color: rgba(241,236,223,.7); font-size: .95rem; } .wv-f-loc svg { width: 15px; height: 15px; } .wv-f-quote { font-family: var(--wv-serif); font-weight: 300; font-style: italic; font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.46; color: rgba(241,236,223,.9); margin: 1.5rem 0 .7rem; max-width: 32ch; } .wv-f-byline { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(241,236,223,.5); margin-bottom: 1.6rem; } .wv-f-facts { display: flex; flex-wrap: wrap; gap: .9rem 1.8rem; margin-bottom: 1.7rem; } .wv-f-facts .wv-ff-k { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(241,236,223,.55); margin-bottom: .2rem; } .wv-f-facts .wv-ff-v { font-family: var(--wv-serif); font-size: 1.18rem; } .wv-f-cta { display: flex; flex-wrap: wrap; gap: .7rem; } /* ── Regions strip ──────────────────────────────────── */ .wv-regions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; } .wv-region { position: relative; min-height: clamp(220px, 24vw, 280px); border-radius: 7px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; cursor: pointer; border: none; padding: 0; background: none; text-align: left; } .wv-region .wv-scene .wv-terrain { transition: transform 1s var(--wv-ease-soft); } .wv-region:hover .wv-scene .wv-terrain { transform: scale(1.08); } .wv-region .wv-r-veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(15,21,15,.78), rgba(15,21,15,.05) 70%); } .wv-region-body { position: relative; z-index: 2; padding: 1.1rem 1.15rem; text-shadow: 0 1px 8px rgba(10,14,11,.5); } .wv-region-name { font-family: var(--wv-serif); font-size: 1.24rem; color: var(--oat); letter-spacing: -.01em; font-feature-settings: "ss01"; } .wv-region-count { font-size: .74rem; letter-spacing: .06em; color: rgba(241,236,223,.74); margin-top: .2rem; } .wv-region .wv-r-line { position: absolute; left: 1.15rem; bottom: 0; height: 2px; width: 0; background: var(--gold-soft); transition: width .45s var(--wv-ease); } .wv-region:hover .wv-r-line { width: 36px; } /* Carousel card sizing */ .wv-region.wv-region-compact { min-width: clamp(220px, 24vw, 280px); flex-shrink: 0; } /* Horizontal carousel */ .wv-regions-carousel { display: flex; gap: 11px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: .5rem; } .wv-regions-carousel::-webkit-scrollbar { display: none; } .wv-regions-carousel .wv-region { scroll-snap-align: start; } .wv-regions-carousel .wv-rc { scroll-snap-align: start; width: calc((100% - 33px) / 3.25); min-width: 260px; flex: 0 0 auto; } @media(max-width: 980px) { .wv-regions-carousel .wv-rc { width: calc((100% - 22px) / 2.25); } } @media(max-width: 600px) { .wv-regions-carousel .wv-rc { width: calc(100% - 60px); } } /* Carousel wrapper + header nav */ .wv-carousel-wrap { position: relative; } .wv-carousel-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: clamp(1.4rem, 3vw, 2rem); } .wv-carousel-header-content { flex: 1; min-width: 0; } .wv-carousel-navs { display: flex; gap: .5rem; flex-shrink: 0; } .wv-carousel-nav-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s var(--wv-ease), border-color .2s, opacity .2s; } .wv-carousel-nav-btn:hover:not(:disabled) { background: #fff; border-color: var(--ink-faint); } .wv-carousel-nav-btn:disabled { opacity: .3; cursor: default; } .wv-carousel-nav-btn svg { width: 18px; height: 18px; color: var(--ink); } /* ── Promise band ───────────────────────────────────── */ .wv-promise { background: var(--oat-2); } .wv-promise-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 3vw, 3rem); margin-top: clamp(1.8rem, 3vw, 2.6rem); } .wv-pcard-ico { width: 42px; height: 42px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; } .wv-pcard-ico svg { width: 20px; height: 20px; color: var(--pine); stroke-width: 1.7; } .wv-pcard h3 { font-family: var(--wv-serif); font-weight: 400; font-size: 1.32rem; letter-spacing: -.01em; margin-bottom: .45rem; } .wv-pcard p { color: var(--ink-soft); font-size: .98rem; } /* ── Journal ────────────────────────────────────────── */ .wv-journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 3vw, 2.4rem); } .wv-jcard { cursor: pointer; border-radius: 7px; padding: 10px; transition: background .3s var(--wv-ease); } .wv-jcard:hover { background: var(--oat-2); } .wv-jcard-body { padding: 20px; } .wv-jcard-visual { position: relative; border-radius: 7px; overflow: hidden; aspect-ratio: 3/2; } .wv-jcard-visual .wv-scene { position: absolute; inset: 0; } .wv-jcard-visual .wv-scene .wv-terrain { transition: transform 1s var(--wv-ease-soft); } .wv-jcard:hover .wv-jcard-visual .wv-scene .wv-terrain { transform: scale(1.07); } .wv-jcard-kind { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: .5rem; } .wv-jcard h3 { font-family: var(--wv-serif); font-weight: 400; font-size: 1.34rem; line-height: 1.22; letter-spacing: -.012em; margin: 0 0 .4rem; background-image: linear-gradient(var(--ink), var(--ink)); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .4s var(--wv-ease); display: inline; } .wv-jcard:hover h3 { background-size: 100% 1px; } .wv-jcard p { color: var(--ink-soft); font-size: .96rem; margin-top: .5rem; } .wv-jcard-read { font-size: .78rem; letter-spacing: .04em; color: var(--ink-faint); margin-top: .7rem; } /* ── Owner band ─────────────────────────────────────── */ .wv-owner { position: relative; overflow: hidden; background: var(--pine); color: var(--oat); } .wv-owner-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; } .wv-owner h2 { font-family: var(--wv-serif); font-weight: 400; font-size: clamp(1.9rem, 3.2vw, 2.7rem); line-height: 1.1; letter-spacing: -.016em; margin: .9rem 0 1rem; font-feature-settings: "ss01"; } .wv-owner .wv-owner-lead { color: rgba(241,236,223,.82); font-size: 1.05rem; max-width: 46ch; } .wv-owner-points { list-style: none; margin-top: 1.6rem; display: flex; flex-direction: column; gap: .9rem; } .wv-owner-points li { display: flex; gap: .7rem; align-items: flex-start; color: rgba(241,236,223,.88); font-size: .99rem; } .wv-owner-points li svg { width: 18px; height: 18px; color: var(--gold-soft); flex-shrink: 0; margin-top: 3px; stroke-width: 1.8; } .wv-owner-cta { margin-top: 1.8rem; } .wv-owner-aside { background: rgba(241,236,223,.06); border: 1px solid rgba(241,236,223,.16); border-radius: 10px; padding: clamp(1.6rem, 3vw, 2.4rem); } .wv-owner-aside .wv-oa-stat { padding: 1rem 0; border-bottom: 1px solid rgba(241,236,223,.14); } .wv-owner-aside .wv-oa-stat:last-child { border-bottom: none; padding-bottom: 0; } .wv-owner-aside .wv-oa-stat:first-child { padding-top: 0; } .wv-owner-aside .wv-oa-n { font-family: var(--wv-serif); font-size: 2rem; color: var(--oat); font-variant-numeric: tabular-nums; } .wv-owner-aside .wv-oa-l { font-size: .86rem; color: rgba(241,236,223,.66); margin-top: .15rem; } /* ── Closing CTA ────────────────────────────────────── */ .wv-closing { text-align: center; } .wv-closing .wv-eyebrow { justify-content: center; } .wv-closing h2 { font-family: var(--wv-serif); font-weight: 330; font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.06; letter-spacing: -.022em; margin: 1.1rem auto .4rem; max-width: 16ch; font-feature-settings: "ss01"; } .wv-closing p { color: var(--ink-soft); font-size: 1.06rem; max-width: 44ch; margin: 1rem auto 1.9rem; } /* ── Footer ─────────────────────────────────────────── */ .wv-footer, .wv-legal-footer { overflow-x: clip; } /* Venues footer */ .wv-footer { border-top: 1px solid var(--line); background: var(--oat-2); padding: clamp(2rem, 4vw, 3rem) 0 2.4rem; } .wv-f-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.6rem; max-width: 100%; min-width: 0; } .wv-f-brand { display: flex; align-items: center; gap: .6rem; color: var(--ink); text-decoration: none; transition: color .25s var(--wv-ease); } .wv-f-brand:hover { color: var(--ink); } .wv-f-name { font-size: .9375rem; font-weight: 600; } .wv-f-tag { color: var(--ink-soft); font-size: .95rem; margin-top: .5rem; max-width: 34ch; } .wv-f-cols { display: flex; gap: clamp(2rem, 5vw, 4.5rem); flex-wrap: wrap; max-width: 100%; min-width: 0; } .wv-f-col h4 { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: .8rem; display: flex; align-items: center; gap: .45rem; } .wv-f-col h4::before { content: ""; width: 14px; height: 1px; background: var(--gold); flex-shrink: 0; } .wv-f-col a { display: block; font-size: .92rem; color: var(--ink-soft); padding: .2rem 0; transition: color .25s var(--wv-ease); } .wv-f-col a:hover { color: var(--pine); } .wv-f-col a.wv-f-external { display: inline-flex; align-items: center; gap: .3rem; } .wv-f-external svg { width: 13px; height: 13px; color: var(--ink-faint); transition: color .15s; } .wv-f-external:hover svg { color: var(--pine); } @media (max-width: 860px) { .wv-f-cols { gap: clamp(1.5rem, 4vw, 2.5rem); } } @media (max-width: 640px) { .wv-f-top { flex-direction: column; gap: 2rem; } .wv-f-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; } } @media (max-width: 380px) { .wv-f-cols { grid-template-columns: 1fr; } } .wv-legal-footer { border-top: 1px solid var(--line); background: var(--oat-2); } .wv-legal-footer .wv-legal-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; padding-block: 1.4rem; min-height: 4.125rem; box-sizing: border-box; font-size: .8rem; line-height: 1.5; color: var(--ink-faint); } .wv-legal-footer .wv-legal-inner > span { flex: 1 1 12rem; min-width: 0; } .wv-legal-footer a { color: var(--ink-faint); transition: color .2s var(--wv-ease); } .wv-legal-footer a:hover { color: var(--pine); } .wv-legal-links { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; } .wv-legal-host { color: var(--pine); font-weight: 500; } /* ── Reveal animation ───────────────────────────────── */ .wv-reveal { opacity: 0; transform: translateY(26px); } .wv-reveal.wv-in { opacity: 1; transform: none; transition: opacity .9s var(--wv-ease), transform .9s var(--wv-ease); } .wv-stagger > * { opacity: 0; transform: translateY(20px); } .wv-stagger.wv-in > * { opacity: 1; transform: none; transition: opacity .8s var(--wv-ease), transform .8s var(--wv-ease); } .wv-stagger.wv-in > *:nth-child(2) { transition-delay: .08s; } .wv-stagger.wv-in > *:nth-child(3) { transition-delay: .16s; } .wv-stagger.wv-in > *:nth-child(4) { transition-delay: .24s; } /* ── Homepage responsive ────────────────────────────── */ @media (max-width: 960px) { .wv-doors { grid-template-columns: 1fr; } .wv-door { min-height: 300px; } .wv-doorways-intro { grid-template-columns: 1fr; gap: 1.4rem; } .wv-featured .wv-f-grid { grid-template-columns: 1fr; gap: 1.8rem; } .wv-regions { grid-template-columns: 1fr 1fr; } .wv-promise-grid { grid-template-columns: 1fr; gap: 1.4rem; } .wv-journal-grid { grid-template-columns: 1fr; } .wv-owner-grid { grid-template-columns: 1fr; gap: 1.8rem; } } @media (max-width: 680px) { .wv-hero h1 { font-size: clamp(2.6rem, 9vw, 3.6rem); } .wv-regions { grid-template-columns: 1fr; } .wv-hero-foot .wv-stat-div { display: none; } } /* ══════════════════════════════════════════════════════ Search drawer — conversational venue search ══════════════════════════════════════════════════════ */ /* ── Surface switcher ───────────────────────────────── */ .wv-switcher-panel { background: var(--paper); border: 1px solid var(--line-soft); } .wv-switcher-row { display: flex; align-items: center; gap: .625rem; padding: .625rem 1rem; } .wv-switcher-hover { transition: background .2s var(--wv-ease); } .wv-switcher-hover:hover { background: rgba(217,183,119,.12); } .wv-switcher-caret { display: flex; align-items: center; gap: .375rem; border-left: 1px solid var(--line-soft); padding: .5rem .375rem; align-self: stretch; color: var(--ink-faint); cursor: pointer; border-top: none; border-bottom: none; border-right: none; background: none; } @media (min-width: 640px) { .wv-switcher-caret { padding-left: .625rem; padding-right: .625rem; } } .wv-switcher-name { font-size: .9375rem; font-weight: 600; color: var(--ink); } .wv-switcher-name-alt { font-size: .875rem; font-weight: 500; color: var(--ink-soft); } .wv-switcher-divider { border-top: 1px solid var(--line-soft); } /* ══════════════════════════════════════════════════════ Shortlist — nav button, slide-in panel, compare table, toast ══════════════════════════════════════════════════════ */ /* ── Nav heart button ───────────────────────────────── */ .wv-heart-btn { position: relative; display: flex; align-items: center; gap: .5rem; background: none; border: 1px solid var(--line); border-radius: 999px; padding: .45rem .9rem .45rem .75rem; font-size: .82rem; color: var(--ink); font-family: var(--wv-sans); cursor: pointer; transition: border-color .25s var(--wv-ease), background .25s; } .wv-heart-btn:hover { border-color: var(--ink); background: var(--paper); } .wv-heart-btn svg { width: 16px; height: 16px; color: var(--rose); } .wv-heart-btn svg path { fill: var(--rose); } .wv-heart-btn .wv-hb-count { min-width: 19px; height: 19px; border-radius: 999px; background: var(--rose); color: var(--oat); font-size: .7rem; font-weight: 600; display: flex; align-items: center; justify-content: center; padding: 0 5px; } nav:not([data-scrolled]) .wv-heart-btn { border-color: rgba(241,236,223,.36); color: rgba(241,236,223,.9); } nav:not([data-scrolled]) .wv-heart-btn:hover { border-color: rgba(241,236,223,.7); background: rgba(241,236,223,.12); } /* ── Modal ──────────────────────────────────────────── */ .wv-modal-scrim { position: fixed; inset: 0; z-index: 300; background: rgba(15,21,15,.42); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; animation: wv-fade-in .2s ease-out; } @keyframes wv-fade-in { from { opacity: 0; } to { opacity: 1; } } .wv-modal { background: var(--paper); border: 1.5px solid var(--line); border-radius: 14px; width: min(420px, calc(100vw - 2rem)); box-shadow: 0 24px 60px -20px rgba(15,21,15,.4); animation: wv-modal-in .25s var(--wv-ease); } @keyframes wv-modal-in { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } } .wv-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); } .wv-modal-head h3 { font-family: var(--wv-serif); font-weight: 400; font-size: 1.1rem; color: var(--ink); } .wv-modal-close { width: 28px; height: 28px; border: none; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ink-faint); border-radius: 6px; } .wv-modal-close:hover { background: var(--oat-2); color: var(--ink); } .wv-modal-close svg { width: 16px; height: 16px; } .wv-modal-body { padding: 1.2rem; } /* ── Shared slide drawer ────────────────────────────── */ .wv-slide-drawer-scrim { position: fixed; inset: 0; z-index: 200; background: rgba(15,21,15,.42); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .3s var(--wv-ease); } .wv-slide-drawer-scrim.wv-open { opacity: 1; pointer-events: auto; } .wv-slide-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 210; background: var(--oat); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .4s var(--wv-ease), box-shadow .3s; } .wv-slide-drawer.wv-open { transform: translateX(0); box-shadow: -24px 0 60px -30px rgba(15,21,15,.5); } .wv-slide-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.4rem; border-bottom: 1px solid var(--line); } .wv-slide-drawer-head h2 { font-family: var(--wv-serif); font-weight: 400; font-size: 1.4rem; font-feature-settings: "ss01"; } .wv-slide-drawer-close { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); background: var(--paper); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .2s; } .wv-slide-drawer-close:hover { border-color: var(--ink-faint); } .wv-slide-drawer-close svg { width: 15px; height: 15px; } .wv-slide-drawer-body { flex: 1; overflow-y: auto; padding: 1.4rem; } .wv-slide-drawer-foot { padding: 1.1rem 1.4rem; border-top: 1px solid var(--line); background: var(--paper); } /* ── Panel scrim + slide-in ─────────────────────────── */ .wv-panel-scrim { position: fixed; inset: 0; z-index: 200; background: rgba(15,21,15,.42); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .3s var(--wv-ease); } .wv-panel-scrim.wv-open { opacity: 1; pointer-events: auto; } .wv-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 210; width: min(412px, 100vw); background: var(--oat); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .4s var(--wv-ease), box-shadow .3s; } .wv-panel.wv-open { transform: translateX(0); box-shadow: -24px 0 60px -30px rgba(15,21,15,.5); } .wv-panel-head { padding: 1rem 1.3rem; border-bottom: 1px solid var(--line); } .wv-panel-head .wv-ph-top { display: flex; align-items: center; justify-content: space-between; } .wv-panel-head h2 { font-family: var(--wv-serif); font-weight: 400; font-size: 1.45rem; letter-spacing: -.014em; font-feature-settings: "ss01"; } .wv-panel-head .wv-ph-sub { font-size: .84rem; color: var(--ink-faint); margin-top: .2rem; } .wv-panel-close { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: none; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; transition: background .2s, border-color .2s; } .wv-panel-close:hover { background: var(--paper); border-color: var(--ink); } .wv-panel-close svg { width: 14px; height: 14px; } /* Panel body + list */ .wv-panel-body { flex: 1; overflow-y: auto; padding: 1rem 1.3rem; } .wv-panel-list { display: flex; flex-direction: column; gap: .7rem; } .wv-sl-item { position: relative; display: flex; gap: .8rem; background: var(--paper); border: 1px solid var(--line-soft); border-radius: 10px; padding: .6rem; transition: border-color .2s var(--wv-ease), opacity .35s var(--wv-ease), transform .35s var(--wv-ease); } .wv-sl-item:hover { border-color: var(--line); } .wv-sl-item.wv-removing { opacity: 0; transform: translateX(28px); } .wv-sl-thumb { width: 86px; height: 66px; border-radius: 7px; overflow: hidden; flex-shrink: 0; position: relative; background: var(--oat-2); } .wv-sl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .wv-sl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .wv-sl-loc { font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); } .wv-sl-name { font-family: var(--wv-serif); font-size: 1.02rem; letter-spacing: -.01em; line-height: 1.16; margin: .12rem 0 .26rem; font-feature-settings: "ss01"; } .wv-sl-facts { display: flex; flex-wrap: wrap; gap: .15rem .7rem; font-size: .76rem; color: var(--ink-soft); margin-top: auto; } .wv-sl-facts b { color: var(--ink); font-weight: 600; } .wv-sl-remove { position: absolute; top: .45rem; right: .45rem; width: 24px; height: 24px; border-radius: 50%; border: none; background: var(--oat-2); display: flex; align-items: center; justify-content: center; color: var(--ink-soft); cursor: pointer; transition: background .2s, color .2s; } .wv-sl-remove:hover { background: var(--rose); color: var(--oat); } .wv-sl-remove svg { width: 11px; height: 11px; } .wv-sl-strip-cta { flex-shrink: 0; align-self: center; } /* Panel footer */ .wv-panel-foot { padding: 1rem 1.3rem 1.3rem; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: .6rem; } /* Panel empty state */ .wv-panel-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 3rem 1.3rem; } .wv-panel-empty .wv-pe-heart { width: 54px; height: 54px; border-radius: 50%; background: var(--oat-2); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; } .wv-panel-empty .wv-pe-heart svg { width: 26px; height: 26px; color: var(--rose); } .wv-panel-empty h3 { font-family: var(--wv-serif); font-weight: 400; font-size: 1.2rem; margin-bottom: .4rem; } .wv-panel-empty p { font-size: .88rem; color: var(--ink-soft); } /* ── Toast ──────────────────────────────────────────── */ .wv-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px); background: var(--pine-deep); color: var(--oat); font-size: .88rem; padding: .8rem 1.2rem; border-radius: 9px; z-index: 500; display: flex; align-items: center; gap: .6rem; opacity: 0; pointer-events: none; box-shadow: 0 14px 34px -14px rgba(0,0,0,.5); transition: opacity .3s var(--wv-ease), transform .3s var(--wv-ease); } .wv-toast.wv-show { opacity: 1; transform: translateX(-50%) translateY(0); } .wv-toast svg { width: 16px; height: 16px; color: var(--gold-soft); flex-shrink: 0; } /* ── Compare control bar ───────────────────────────── */ .wvd-compare-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1.1rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); padding-left: calc(50vw - 50%); padding-right: calc(50vw - 50%); margin-bottom: clamp(1.6rem, 3vw, 2.4rem); } .wvd-compare-summary { font-family: var(--wv-serif); font-size: 1.15rem; white-space: nowrap; } .wvd-compare-summary b { font-weight: 500; } .wvd-compare-summary-sub { font-family: var(--wv-sans); font-size: .86rem; color: var(--ink-faint); } .wvd-compare-spacer { flex: 1; } /* ── Compare table ──────────────────────────────────── */ .wv-compare-scroll { overflow-x: auto; padding-bottom: .5rem; scrollbar-width: thin; } .wv-compare-table { border-collapse: separate; border-spacing: 0; width: 100%; table-layout: fixed; } .wv-compare-table th, .wv-compare-table td { padding: 1rem 1.05rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); } .wv-ct-rowlabel { position: sticky; left: 0; z-index: 2; background: var(--oat-2); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; width: 142px; min-width: 142px; } .wv-compare-table thead .wv-ct-rowlabel { background: var(--oat); border-bottom: 1px solid var(--line); } .wv-compare-table thead th { background: var(--oat); border-bottom: 1px solid var(--line); padding-top: 0; } .wv-ct-col-label { width: 142px; } .wv-ct-col-data { width: auto; } /* Equal-width data columns */ .wv-compare-table .wv-ct-venue, .wv-compare-table tbody td:not(.wv-ct-rowlabel), .wv-compare-table tfoot td:not(.wv-ct-rowlabel) { min-width: 208px; } .wv-ct-photo { aspect-ratio: 3/2; border-radius: 9px; overflow: hidden; position: relative; margin-bottom: .7rem; background: var(--oat-2); } .wv-ct-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .wv-ct-photo .wv-scene, .wv-ct-photo .wvd-studio { position: absolute; inset: 0; } .wv-ct-name { font-family: var(--wv-serif); font-weight: 400; font-size: 1.18rem; letter-spacing: -.014em; line-height: 1.14; font-feature-settings: "ss01"; overflow-wrap: break-word; } .wv-ct-loc { font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); margin-top: .22rem; display: flex; align-items: center; gap: .3rem; } .wv-ct-loc svg { width: 11px; height: 11px; } .wv-ct-remove { margin-top: .55rem; font-size: .76rem; color: var(--rose); background: none; border: none; display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; } .wv-ct-remove svg { width: 12px; height: 12px; } .wv-compare-table tbody td .wv-cv { font-size: .95rem; color: var(--ink); } .wv-cv.wv-muted { color: var(--ink-faint); } .wv-cv.wv-best { color: var(--pine); font-weight: 600; } .wv-cv .wv-badge { display: inline-block; font-size: .6rem; letter-spacing: .05em; text-transform: uppercase; color: var(--sage); border: 1px solid rgba(95,128,96,.4); border-radius: 4px; padding: .04rem .3rem; margin-left: .35rem; vertical-align: 1px; } .wv-cv .wv-tags { display: flex; flex-wrap: wrap; gap: .28rem; } .wv-cv .wv-tag { font-size: .66rem; color: var(--pine); background: var(--oat-2); border-radius: 5px; padding: .16rem .42rem; } .wv-compare-table tfoot td { border-bottom: none; padding-top: 1.1rem; } .wv-compare-table tfoot .wv-ct-rowlabel { background: var(--oat-2); } .wv-ct-enq { display: flex; align-items: center; justify-content: center; gap: .45rem; width: 100%; background: var(--pine); color: var(--oat); border: none; border-radius: 8px; padding: .72rem 1rem; font-size: .86rem; font-weight: 500; font-family: var(--wv-sans); cursor: pointer; transition: background .25s; } .wv-ct-enq:hover { background: var(--pine-deep); } .wv-ct-enq svg { width: 14px; height: 14px; } /* ── Shortlist page empty state ─────────────────────── */ .wv-sl-page-empty { text-align: center; padding: clamp(3rem, 7vw, 6rem) 1rem; } .wv-sl-page-empty .wv-heart-circle { width: 64px; height: 64px; margin: 0 auto 1.4rem; border-radius: 50%; background: var(--oat-2); display: flex; align-items: center; justify-content: center; } .wv-sl-page-empty .wv-heart-circle svg { width: 30px; height: 30px; color: var(--rose); } .wv-sl-page-empty h2 { font-family: var(--wv-serif); font-weight: 400; font-size: 1.7rem; letter-spacing: -.014em; margin-bottom: .5rem; } .wv-sl-page-empty p { color: var(--ink-soft); max-width: 38ch; margin: 0 auto 1.5rem; } /* ── Shortlist responsive ───────────────────────────── */ @media (max-width: 680px) { .wv-heart-btn .wv-hb-label { display: none; } } /* ══════════════════════════════════════════════════════ Enquiry flow — step rail, form, review, confirmation ══════════════════════════════════════════════════════ */ /* ── Step rail ──────────────────────────────────────── */ .wv-steprail { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: calc(var(--wv-nav-h, 64px) + 1.4rem) 0 .4rem; } .wv-step { display: flex; align-items: center; gap: .5rem; } .wv-step-dot { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--paper); display: flex; align-items: center; justify-content: center; font-size: .76rem; font-weight: 600; color: var(--ink-faint); transition: background .3s var(--wv-ease), border-color .3s, color .3s; } .wv-step-label { font-size: .78rem; letter-spacing: .04em; color: var(--ink-faint); transition: color .3s; } .wv-step.wv-active .wv-step-dot { background: var(--pine); border-color: var(--pine); color: var(--oat); } .wv-step.wv-active .wv-step-label { color: var(--ink); font-weight: 500; } .wv-step.wv-done .wv-step-dot { background: var(--sage); border-color: var(--sage); color: var(--oat); } .wv-step-dot svg { width: 12px; height: 12px; } .wv-step-sep { width: 34px; height: 1px; background: var(--line); } .wv-step-sep.wv-done { background: var(--sage); } /* ── Flow shell ─────────────────────────────────────── */ .wv-flow { padding: clamp(1.6rem, 3vw, 2.6rem) 0 5rem; } .wv-screen-head { text-align: center; max-width: 36ch; margin: 0 auto clamp(1.8rem, 3vw, 2.6rem); } .wv-screen-head h1 { font-family: var(--wv-serif); font-weight: 330; letter-spacing: -.02em; font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.08; margin: .9rem 0 .5rem; font-feature-settings: "ss01"; } .wv-screen-head p { color: var(--ink-soft); font-size: 1.02rem; } /* ── Form + summary grid ────────────────────────────── */ .wv-flow-grid { display: grid; grid-template-columns: 1fr 332px; gap: clamp(1.6rem, 3vw, 2.6rem); align-items: start; } @media (max-width: 820px) { .wv-flow-grid { grid-template-columns: 1fr; } } /* Form card */ .wv-enq-card { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: clamp(1.4rem, 3vw, 2rem); } .wv-enq-card + .wv-enq-card { margin-top: 1.1rem; } /* Field */ .wv-field { margin-bottom: 1.1rem; } .wv-field:last-child { margin-bottom: 0; } .wv-field label { display: block; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .45rem; } .wv-field label .wv-opt { text-transform: none; letter-spacing: 0; font-size: .78rem; } .wv-field input, .wv-field textarea { width: 100%; background: var(--oat); border: 1.5px solid var(--line); border-radius: 9px; padding: .7rem .85rem; font-size: .98rem; color: var(--ink); font-family: var(--wv-sans); transition: border-color .25s var(--wv-ease), background .25s; } .wv-field input:focus, .wv-field textarea:focus { outline: none; border-color: var(--pine); background: var(--paper); box-shadow: 0 0 0 3px rgba(44,70,54,.15); } .wv-field input:focus-visible, .wv-field textarea:focus-visible { outline: none; border-radius: 9px; } .wv-field textarea { resize: vertical; min-height: 92px; line-height: 1.55; } .wv-field .wv-hint { font-size: .78rem; color: var(--ink-faint); margin-top: .4rem; } .wv-field-invalid input, .wv-field-invalid textarea { border-color: var(--red, #c0392b); } .wv-field-invalid input:focus, .wv-field-invalid textarea:focus { border-color: var(--red, #c0392b); box-shadow: 0 0 0 3px rgba(192,57,43,.15); } .wv-field-error { font-size: .82rem; color: var(--red, #c0392b); margin-top: .35rem; } .wv-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; } @media (max-width: 560px) { .wv-field-row { grid-template-columns: 1fr; } .wv-steprail .wv-step-label { display: none; } .wv-steprail .wv-step-sep { width: 20px; } } /* Prefill chip */ .wv-prefill { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; background: var(--oat-2); border-radius: 10px; padding: .85rem 1rem; margin-bottom: 1.1rem; } .wv-prefill-ico { width: 30px; height: 30px; border-radius: 8px; background: var(--paper); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .wv-prefill-ico svg { width: 15px; height: 15px; color: var(--pine); } .wv-prefill-text { font-size: .86rem; color: var(--ink-soft); } .wv-prefill-text b { color: var(--ink); font-weight: 600; } /* ── Summary rail ───────────────────────────────────── */ .wv-enq-summary { position: sticky; top: 90px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; } @media (max-width: 820px) { .wv-enq-summary { position: static; order: -1; } } .wv-enq-summary-head { padding: 1.1rem 1.2rem .9rem; border-bottom: 1px solid var(--line-soft); } .wv-enq-summary-head h3 { font-family: var(--wv-serif); font-weight: 400; font-size: 1.2rem; margin-top: .3rem; font-feature-settings: "ss01"; } .wv-enq-summary-venues { padding: .6rem; display: flex; flex-direction: column; gap: .4rem; max-height: 280px; overflow-y: auto; } .wv-sv-item { display: flex; align-items: center; gap: .7rem; padding: .5rem; border-radius: 9px; transition: background .2s; } .wv-sv-item:hover { background: var(--oat); } .wv-sv-name { font-family: var(--wv-serif); font-size: .96rem; line-height: 1.15; font-feature-settings: "ss01"; } .wv-sv-loc { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin-top: .1rem; } .wv-sv-remove { width: 22px; height: 22px; border-radius: 50%; border: none; background: var(--oat-2); color: var(--ink-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; transition: background .2s, color .2s; } .wv-sv-remove:hover { background: var(--rose); color: var(--oat); } .wv-sv-remove svg { width: 10px; height: 10px; } .wv-enq-summary-foot { padding: .9rem 1.2rem 1.1rem; border-top: 1px solid var(--line); background: var(--oat-2); } .wv-sf-line { display: flex; align-items: flex-start; gap: .5rem; font-size: .8rem; color: var(--ink-soft); } .wv-sf-line svg { width: 15px; height: 15px; color: var(--pine); flex-shrink: 0; margin-top: 2px; } .wv-sf-line + .wv-sf-line { margin-top: .55rem; } /* ── Per-venue note ─────────────────────────────────── */ .wv-venue-note { border: 1px solid var(--line-soft); border-radius: 11px; overflow: hidden; margin-bottom: .8rem; } .wv-venue-note:last-child { margin-bottom: 0; } .wv-vn-head { display: flex; align-items: center; gap: .7rem; padding: .7rem .85rem; background: var(--oat); } .wv-vn-name { font-family: var(--wv-serif); font-size: 1rem; font-feature-settings: "ss01"; } .wv-vn-loc { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); } .wv-vn-toggle { margin-left: auto; font-size: .76rem; color: var(--pine); background: none; border: none; font-weight: 500; cursor: pointer; } /* ── Review envelopes ───────────────────────────────── */ .wv-review-intro { background: var(--oat-2); border-radius: 12px; padding: 1.1rem 1.3rem; margin-bottom: 1.4rem; display: flex; gap: .8rem; align-items: flex-start; } .wv-review-intro svg { width: 20px; height: 20px; color: var(--pine); flex-shrink: 0; margin-top: 2px; } .wv-review-intro span { font-size: .95rem; color: var(--ink-soft); } .wv-review-intro b { color: var(--ink); font-weight: 600; } .wv-envelope { background: var(--paper); border: 1px solid var(--line); border-radius: 13px; overflow: hidden; margin-bottom: .9rem; } .wv-env-head { display: flex; align-items: center; gap: .85rem; padding: .95rem 1.1rem; border-bottom: 1px solid var(--line-soft); } .wv-env-to-label { font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); } .wv-env-to-name { font-family: var(--wv-serif); font-size: 1.12rem; font-feature-settings: "ss01"; margin-top: .1rem; } .wv-env-sep { margin-left: auto; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sage); display: flex; align-items: center; gap: .35rem; } .wv-env-sep svg { width: 13px; height: 13px; } .wv-env-body { padding: 1rem 1.1rem; font-size: .93rem; color: var(--ink-soft); line-height: 1.62; } .wv-env-body .wv-eb-meta { display: flex; flex-wrap: wrap; gap: .4rem .9rem; padding-top: .7rem; margin-top: .2rem; border-top: 1px solid var(--line-soft); font-size: .8rem; color: var(--ink-faint); } .wv-env-body .wv-eb-meta b { color: var(--ink); font-weight: 600; } /* ── Confirmation ───────────────────────────────────── */ .wv-confirm { text-align: center; max-width: 46ch; margin: 0 auto; padding: clamp(1.5rem, 3vw, 2.5rem) 0; } .wv-confirm-seal { width: 74px; height: 74px; border-radius: 50%; background: var(--pine); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.6rem; } .wv-confirm-seal svg { width: 34px; height: 34px; color: var(--oat); } .wv-confirm h1 { font-family: var(--wv-serif); font-weight: 330; letter-spacing: -.02em; font-size: clamp(2rem, 4.4vw, 2.9rem); line-height: 1.1; margin-bottom: .6rem; font-feature-settings: "ss01"; } .wv-confirm-sub { color: var(--ink-soft); font-size: 1.04rem; margin-bottom: 1.7rem; } .wv-confirm-list { background: var(--paper); border: 1px solid var(--line); border-radius: 13px; text-align: left; overflow: hidden; margin-bottom: 1.6rem; } .wv-cl-item { display: flex; align-items: center; gap: .8rem; padding: .85rem 1.1rem; } .wv-cl-item + .wv-cl-item { border-top: 1px solid var(--line-soft); } .wv-cl-name { font-family: var(--wv-serif); font-size: 1rem; flex: 1; font-feature-settings: "ss01"; } .wv-cl-status { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--sage); display: flex; align-items: center; gap: .35rem; } .wv-cl-status svg { width: 13px; height: 13px; } .wv-confirm-what { background: var(--oat-2); border-radius: 12px; padding: 1.1rem 1.3rem; text-align: left; margin-bottom: 1.7rem; } .wv-confirm-what h3 { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .7rem; } .wv-confirm-what li { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; color: var(--ink-soft); padding: .25rem 0; list-style: none; } .wv-confirm-what li svg { width: 16px; height: 16px; color: var(--pine); flex-shrink: 0; margin-top: 3px; } .wv-confirm-cta { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; } /* ── Action bar ─────────────────────────────────────── */ .wv-actionbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.4rem; } @media (max-width: 560px) { .wv-actionbar { flex-wrap: wrap; } } /* ── Search trigger button ──────────────────────────── */ .wv-search-btn { width: 38px; height: 38px; border-radius: 50%; border: none; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .25s var(--wv-ease), color .3s var(--wv-ease); } .wv-search-btn svg { width: 19px; height: 19px; } /* ── Scrim ──────────────────────────────────────────── */ .wv-drawer-scrim { position: fixed; inset: 0; z-index: 40; display: none; background: rgba(15,21,15,.32); backdrop-filter: blur(2px); } .wv-drawer-scrim.wv-show { display: block; animation: wv-scrimfade .3s var(--wv-ease); } @keyframes wv-scrimfade { from { opacity: 0; } to { opacity: 1; } } /* ── Drawer ─────────────────────────────────────────── */ .wv-drawer { position: fixed; left: 50%; right: auto; top: var(--wv-nav-h, 64px); z-index: 45; width: min(100%, 1260px); box-sizing: border-box; transform: translateX(-50%); background: var(--oat); border-bottom: 1px solid var(--line); box-shadow: 0 24px 50px -24px rgba(15,21,15,.4); max-height: 0; overflow: hidden; transition: max-height .44s var(--wv-ease), opacity .3s var(--wv-ease); opacity: 0; pointer-events: none; } .wv-drawer.wv-open { max-height: min(86svh, 1400px); opacity: 1; pointer-events: auto; } .wv-drawer-inner { overflow-y: auto; max-height: min(86svh, 1400px); padding: 1.6rem clamp(1.3rem, 5vw, 5rem) 2rem; } /* ── Prompt input ───────────────────────────────────── */ .wv-prompt-row { display: flex; align-items: flex-start; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); } .wv-prompt-field { position: relative; flex: 1; } .wv-prompt-field textarea { width: 100%; border: none; outline: none !important; resize: none; background: none; font-family: var(--wv-serif); font-weight: 300; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.3; color: var(--ink); letter-spacing: -.012em; min-height: 1.3em; max-height: 5em; padding-top: .1rem; position: relative; z-index: 2; } .wv-prompt-field textarea::placeholder { color: transparent; } /* Rotating ghost placeholder */ .wv-ghost { position: absolute; left: 0; top: .1rem; right: 0; z-index: 1; pointer-events: none; font-family: var(--wv-serif); font-weight: 300; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.3; letter-spacing: -.012em; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .42s var(--wv-ease), transform .42s var(--wv-ease); } .wv-ghost.wv-swap-out { opacity: 0; transform: translateY(-13px); } .wv-ghost.wv-swap-in { opacity: 0; transform: translateY(13px); transition: none; } /* Send button */ .wv-send { --growth: 0; width: 48px; height: 48px; border-radius: 8px; border: none; flex-shrink: 0; background: var(--oat-2); color: var(--ink-faint); display: flex; align-items: center; justify-content: center; font-family: var(--wv-sans); font-weight: 500; transition: background .3s var(--wv-ease), color .3s var(--wv-ease), transform .14s var(--wv-ease); cursor: pointer; } .wv-send.wv-ready { background: var(--pine); color: var(--oat); } .wv-send:hover, .wv-send:focus-visible { --growth: 1; } .wv-send.wv-ready:hover { background: var(--pine-deep); } .wv-send:active { transform: scale(.985); } .wv-send svg { width: 18px; height: 18px; } /* ── Idle state ─────────────────────────────────────── */ .wv-idle-label-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .85rem; margin-bottom: .85rem; } .wv-mono-label { font-family: var(--wv-sans); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); } .wv-mono-label.wv-search-hint { color: var(--sage); display: inline-flex; align-items: center; gap: .35rem; } .wv-idle-list { display: flex; flex-direction: column; gap: .5rem; } .wv-idle-q { display: flex; align-items: center; gap: .75rem; width: 100%; text-align: left; background: none; border: 1px solid var(--line-soft); border-radius: 9px; padding: .75rem .9rem; color: var(--ink-soft); font-size: .97rem; font-family: var(--wv-sans); transition: border-color .2s var(--wv-ease), background .2s var(--wv-ease), transform .14s; cursor: pointer; } .wv-idle-q:hover { border-color: var(--line); background: var(--paper); } .wv-idle-q:active { transform: scale(.995); } .wv-idle-q .wv-iq-ico { width: 30px; height: 30px; border-radius: 7px; background: var(--oat-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .wv-idle-q .wv-iq-ico svg { width: 15px; height: 15px; color: var(--pine); } .wv-idle-q .wv-iq-arrow { margin-left: auto; color: var(--ink-faint); opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; } .wv-idle-q:hover .wv-iq-arrow { opacity: 1; transform: none; } /* ── Thinking state ─────────────────────────────────── */ .wv-thinking { display: flex; align-items: center; gap: .6rem; margin-top: 1.5rem; font-size: .95rem; color: var(--ink-soft); } .wv-thinking .wv-dots { display: inline-flex; gap: 3px; } .wv-thinking .wv-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--pine); font-style: normal; animation: wv-bob 1.1s var(--wv-ease-soft) infinite; } .wv-thinking .wv-dots i:nth-child(2) { animation-delay: .16s; } .wv-thinking .wv-dots i:nth-child(3) { animation-delay: .32s; } @keyframes wv-bob { 0%,100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } } /* ── Thread ─────────────────────────────────────────── */ .wv-thread { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1.7rem; } .wv-turn { animation: wv-rise .5s var(--wv-ease); } @keyframes wv-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* Question bubble — right-aligned */ .wv-q-row { display: flex; justify-content: flex-end; } .wv-q-bubble { background: var(--oat-2); border-radius: 12px 12px 4px 12px; padding: .7rem 1.05rem; font-size: 1rem; color: var(--ink); max-width: 80%; } /* Answer body */ .wv-answer .wv-a-body { font-size: 1.06rem; color: var(--ink-soft); max-width: 64ch; } .wv-answer .wv-a-body b { color: var(--ink); font-weight: 600; } /* Helpful row */ .wv-helpful { display: flex; align-items: center; gap: .7rem; margin-top: 1.1rem; } .wv-helpful button { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--line-soft); background: var(--paper); display: flex; align-items: center; justify-content: center; color: var(--ink-faint); cursor: pointer; transition: border-color .2s, color .2s, background .2s; } .wv-helpful button:hover { border-color: var(--line); color: var(--ink-soft); } .wv-helpful button.wv-picked { background: var(--pine); border-color: var(--pine); color: var(--oat); } .wv-helpful button svg { width: 14px; height: 14px; } /* Venue result cards */ .wv-a-block { margin-top: 1.5rem; } .wv-a-block .wv-ab-label { margin-bottom: .8rem; } .wv-venue-card { display: flex; align-items: center; gap: 1rem; width: 100%; text-align: left; background: var(--paper); border: 1px solid var(--line-soft); border-radius: 10px; padding: .85rem; margin-bottom: .6rem; cursor: pointer; font-family: var(--wv-sans); transition: border-color .22s var(--wv-ease), transform .14s, box-shadow .22s var(--wv-ease); } .wv-venue-card:hover { border-color: var(--line); transform: translateY(-1px); box-shadow: 0 12px 26px -18px rgba(0,0,0,.34); } .wv-venue-card .wv-vc-visual { width: 112px; height: 82px; border-radius: 7px; overflow: hidden; flex-shrink: 0; position: relative; } .wv-venue-card .wv-vc-visual .wv-scene { position: absolute; inset: 0; } .wv-venue-card .wv-vc-cover { width: 100%; height: 100%; object-fit: cover; } .wv-venue-card .wv-vc-main { flex: 1; min-width: 0; } .wv-venue-card .wv-vc-name { font-family: var(--wv-serif); font-size: 1.16rem; letter-spacing: -.01em; font-feature-settings: "ss01"; } .wv-venue-card .wv-vc-loc { font-size: .82rem; color: var(--gold); margin-top: .1rem; display: flex; align-items: center; gap: .32rem; } .wv-venue-card .wv-vc-loc svg { width: 12px; height: 12px; } .wv-venue-card .wv-vc-why { font-size: .86rem; color: var(--pine); margin-top: .45rem; display: flex; align-items: flex-start; gap: .4rem; } .wv-venue-card .wv-vc-why svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 3px; } .wv-venue-card .wv-vc-go { flex-shrink: 0; color: var(--ink-faint); transition: transform .22s var(--wv-ease), color .22s; } .wv-venue-card:hover .wv-vc-go { transform: translateX(3px); color: var(--pine); } .wv-venue-card .wv-vc-go svg { width: 18px; height: 18px; } .wv-a-block .wv-ab-all { --growth: 0; display: inline-flex; align-items: center; gap: .4rem; margin-top: .4rem; font-size: .88rem; color: var(--pine); font-weight: 500; } .wv-a-block .wv-ab-all:hover, .wv-a-block .wv-ab-all:focus-visible { --growth: 1; text-decoration: underline; } /* "Also try" chips */ .wv-also { margin-top: 1.5rem; } .wv-also .wv-ab-label { margin-bottom: .7rem; } .wv-also-row { display: flex; flex-wrap: wrap; gap: .5rem; } .wv-also-chip { background: var(--oat-2); border: none; border-radius: 8px; padding: .5rem .85rem; font-size: .9rem; color: var(--ink-soft); font-family: var(--wv-sans); cursor: pointer; transition: background .2s, color .2s; } .wv-also-chip:hover { background: var(--pine); color: var(--oat); } /* ══════════════════════════════════════════════════════ Venue card — listings grid component ══════════════════════════════════════════════════════ */ .wv-vcard { position: relative; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden; text-align: left; isolation: isolate; -webkit-mask-image: -webkit-radial-gradient(white, black); transition: transform .3s var(--wv-ease), box-shadow .3s var(--wv-ease), border-color .3s var(--wv-ease); } .wv-vcard:hover { transform: translateY(-4px); border-color: var(--line); box-shadow: 0 22px 40px -24px rgba(15,21,15,.4); } /* Photo area */ .wv-vcard-photo { position: relative; aspect-ratio: 3/2; overflow: hidden; border-radius: 12px 12px 0 0; } .wv-vcard-slide .wv-scene { transition: transform 1s var(--wv-ease-soft); } .wv-vcard:hover .wv-vcard-slide .wv-scene { transform: scale(1.05); } /* Gallery track */ .wv-vcard-track { position: absolute; inset: 0; display: flex; transform: translateX(-100%); } .wv-vcard-slide { position: relative; flex: 0 0 100%; height: 100%; } .wv-vcard-slide .wv-scene { position: absolute; inset: 0; } /* Dot indicators */ .wv-vcard-dots { position: absolute; z-index: 4; right: .8rem; bottom: .7rem; display: flex; align-items: center; gap: 5px; pointer-events: none; } .wv-vcard-dots button { width: 6px; height: 6px; border-radius: 50%; border: none; padding: 0; background: rgba(241,236,223,.55); pointer-events: auto; cursor: pointer; transition: background .25s var(--wv-ease), width .25s var(--wv-ease); } .wv-vcard-dots button.wv-on { background: var(--oat); width: 18px; border-radius: 3px; height: 6px; } /* Prev / next nav arrows */ .wv-vcard-prev, .wv-vcard-next { position: absolute; z-index: 4; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(252,250,244,.92); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity .25s var(--wv-ease), background .2s; } .wv-vcard-prev svg, .wv-vcard-next svg { width: 16px; height: 16px; color: var(--ink); } .wv-vcard-prev { left: .6rem; } .wv-vcard-next { right: .6rem; } .wv-vcard:hover .wv-vcard-prev, .wv-vcard:hover .wv-vcard-next { opacity: 1; } .wv-vcard-prev:hover, .wv-vcard-next:hover { background: #fff; } .wv-vcard-photo::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to bottom, rgba(15,21,15,.34) 0%, rgba(15,21,15,0) 20%, rgba(15,21,15,0) 62%, rgba(15,21,15,.5) 100%); } /* Top row: flag + save heart */ .wv-vcard-toprow { position: absolute; z-index: 5; top: .7rem; left: .7rem; right: .7rem; display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; pointer-events: none; } .wv-vcard-toprow > * { pointer-events: auto; } .wv-vcard-flag { display: inline-flex; align-items: center; gap: .34rem; background: rgba(252,250,244,.94); color: var(--pine); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; padding: .32rem .6rem; border-radius: 999px; backdrop-filter: blur(3px); } .wv-vcard-flag svg { width: 11px; height: 11px; } /* Save heart */ .wv-vcard-save { width: 38px; height: 38px; border-radius: 50%; border: none; flex-shrink: 0; margin-left: auto; background: rgba(252,250,244,.94); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .25s var(--wv-ease), background .25s; } .wv-vcard-save:hover { transform: scale(1.1); background: #fff; } .wv-vcard-save svg { width: 18px; height: 18px; color: var(--ink); transition: color .2s; } .wv-vcard-save.wv-saved svg { color: var(--rose); fill: var(--rose); } .wv-vcard-save.wv-pulse { animation: wv-pulse .55s var(--wv-ease); } @keyframes wv-pulse { 0% { transform: scale(1); } 42% { transform: scale(1.24); } 100% { transform: scale(1); } } /* Photographer credit — visible on hover, aligned with dots */ .wv-vcard-credit { position: absolute; z-index: 3; left: .8rem; bottom: .7rem; height: 6px; font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(241,236,223,.82); display: flex; align-items: center; gap: .3rem; opacity: 0; transition: opacity .3s var(--wv-ease); } .wv-vcard:hover .wv-vcard-credit { opacity: 1; } .wv-vcard-credit svg { width: 11px; height: 11px; } /* Body */ .wv-vcard-body { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; flex: 1; min-width: 0; } .wv-vcard-loc { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: .35rem; } .wv-vcard-loc svg { width: 12px; height: 12px; } .wv-vcard-name { font-family: var(--wv-serif); font-weight: 400; font-size: 1.22rem; letter-spacing: -.014em; line-height: 1.14; margin: .3rem 0 .55rem; font-feature-settings: "ss01"; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* Character tags */ .wv-vcard-tags { display: flex; flex-wrap: wrap; gap: .32rem; margin-bottom: .7rem; } .wv-vcard-tag { font-size: .68rem; letter-spacing: .02em; color: var(--pine); background: var(--oat-2); border-radius: 5px; padding: .2rem .46rem; } /* Fact strip + price footer */ .wv-vcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .7rem; border-top: 1px solid var(--line-soft); margin-top: auto; } .wv-vcard-facts { display: flex; gap: 1.1rem; } .wv-vcard-fact { display: flex; align-items: center; gap: .4rem; } .wv-vcard-fact svg { width: 15px; height: 15px; color: var(--pine); flex-shrink: 0; } .wv-vcard-fact .wv-ft { font-size: .84rem; color: var(--ink-soft); } .wv-vcard-fact .wv-ft b { color: var(--ink); font-weight: 600; } .wv-vcard-price { text-align: right; flex-shrink: 0; } .wv-vcard-price-from { font-size: .82rem; color: var(--ink-faint); } .wv-vcard-price-val { font-family: var(--wv-serif); font-size: 1.1rem; color: var(--pine); font-weight: 400; font-feature-settings: "ss01"; } .wv-vcard-pk { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); } .wv-vcard-pv { font-family: var(--wv-serif); font-size: 1.02rem; color: var(--pine); margin-top: .08rem; } .wv-vcard-pv .wv-dim { color: var(--ink-faint); } .wv-vcard-view { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); } .wv-vcard-view { --growth: 0; } .wv-vcard:hover .wv-vcard-view { --growth: 1; } /* Venue card grid */ .wv-vcard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.1rem, 2.4vw, 1.8rem); } @media (max-width: 960px) { .wv-vcard-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .wv-vcard-grid { grid-template-columns: 1fr; } } /* Full-card link overlay */ .wv-vcard-link { position: absolute; inset: 0; z-index: 1; } /* ══════════════════════════════════════════════════════ Region page — hero, intro, filter bar, grid ══════════════════════════════════════════════════════ */ /* ── Region hero ────────────────────────────────────── */ .wv-region-hero { position: relative; height: 62svh; min-height: 420px; max-height: 560px; overflow: hidden; } .wv-region-hero .wv-scene .wv-terrain { animation: wv-herofloat 30s ease-in-out infinite alternate; } .wv-region-hero-grad { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(to bottom, rgba(17,24,18,.5) 0%, rgba(17,24,18,.1) 14%, rgba(17,24,18,0) 26%), linear-gradient(to top, rgba(17,24,18,.82) 0%, rgba(17,24,18,.5) 22%, rgba(17,24,18,.2) 44%, rgba(17,24,18,0) 70%); } .wv-region-hero-inner { position: relative; z-index: 4; height: 100%; width: 100%; max-width: 1260px; box-sizing: border-box; margin: 0 auto; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 clamp(1.3rem, 5vw, 5rem) clamp(2rem, 5vh, 3.4rem); text-shadow: 0 1px 14px rgba(10,14,11,.5), 0 1px 3px rgba(10,14,11,.4); } .wv-region-hero h1 { font-family: var(--wv-serif); font-weight: 330; color: var(--oat); font-size: clamp(2.6rem, 6.6vw, 5.2rem); line-height: 1.0; letter-spacing: -.026em; margin: .9rem 0 0; font-feature-settings: "ss01"; } .wv-region-stats { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin-top: 1.3rem; padding-top: 1.2rem; border-top: 1px solid rgba(241,236,223,.2); color: rgba(241,236,223,.88); } .wv-region-stats .wv-hs { display: flex; align-items: baseline; gap: .45rem; } .wv-region-stats .wv-hs b { font-family: var(--wv-serif); font-size: 1.25rem; color: var(--oat); font-variant-numeric: tabular-nums; } .wv-region-stats .wv-hs span { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(241,236,223,.62); } .wv-region-stats .wv-hs-div { width: 1px; height: 18px; background: rgba(241,236,223,.24); } /* ── Region intro ───────────────────────────────────── */ .wv-region-intro { padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.3rem, 5vw, 5rem) clamp(1.8rem, 3vw, 2.6rem); } .wv-region-intro-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.8rem, 4vw, 4rem); align-items: start; } .wv-region-intro .wv-region-body { text-shadow: none; } .wv-region-intro .wv-lede em { font-style: italic; color: var(--pine); } .wv-region-intro .wv-region-body p { color: var(--ink-soft); font-size: 1.03rem; margin-bottom: .9rem; } .wv-region-intro .wv-region-body p:last-child { margin-bottom: 0; } /* ── Filter bar ─────────────────────────────────────── */ .wv-filterbar { position: sticky; top: 58px; z-index: 30; background: rgba(241,236,223,.94); backdrop-filter: blur(12px); transition: box-shadow .3s var(--wv-ease); } .wv-filterbar-inner { position: relative; max-width: 1260px; box-sizing: border-box; margin: 0 auto; padding: .8rem clamp(1.3rem, 5vw, 5rem); display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; } .wv-filterbar-inner::before, .wv-filterbar-inner::after { content: ""; position: absolute; left: clamp(1.3rem, 5vw, 5rem); right: clamp(1.3rem, 5vw, 5rem); height: 1px; background: var(--line); } .wv-filterbar-inner::before { top: 0; } .wv-filterbar-inner::after { bottom: 0; } .wv-fb-count { font-family: var(--wv-serif); font-size: 1.05rem; white-space: nowrap; margin-right: .3rem; } .wv-fb-count b { font-weight: 500; } .wv-fb-count span { font-family: var(--wv-sans); font-size: .85rem; color: var(--ink-faint); } .wv-fb-chip { display: flex; align-items: center; gap: .4rem; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: .42rem .85rem; font-size: .84rem; color: var(--ink-soft); font-family: var(--wv-sans); cursor: pointer; transition: border-color .2s var(--wv-ease), background .2s var(--wv-ease), color .2s; } .wv-fb-chip:hover { border-color: var(--ink-faint); } .wv-fb-chip.wv-on { background: var(--pine); border-color: var(--pine); color: var(--oat); } .wv-fb-chip svg { width: 13px; height: 13px; } .wv-fb-spacer { flex: 1; min-width: 1rem; } .wv-fb-sort { display: flex; align-items: center; gap: .45rem; font-size: .83rem; color: var(--ink-soft); white-space: nowrap; } .wv-fb-clear { font-size: .8rem; color: var(--pine); background: none; border: none; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } /* ── Region responsive ──────────────────────────────── */ @media (max-width: 980px) { .wv-region-intro-grid { grid-template-columns: 1fr; gap: 1.4rem; } } @media (max-width: 680px) { .wv-fb-spacer { display: none; width: 100%; } .wv-fb-sort { order: 5; } } /* ══════════════════════════════════════════════════════ Venues index — header, filter bar, filter drawer ══════════════════════════════════════════════════════ */ /* ── Index header ───────────────────────────────────── */ .wv-index-head { padding-bottom: clamp(1.1rem, 2.2vw, 1.6rem); } .wv-index-head h1 { font-family: var(--wv-serif); font-weight: 320; letter-spacing: -.022em; font-size: clamp(2.4rem, 5.6vw, 4.2rem); line-height: 1.02; font-feature-settings: "ss01"; max-width: 18ch; } .wv-index-head p { margin-top: .8rem; color: var(--ink-soft); font-size: 1.05rem; max-width: 60ch; } /* ── Sticky filter chip bar ─────────────────────────── */ .wv-index-filterbar { position: sticky; top: var(--wv-nav-h, 58px); z-index: 30; background: rgba(241,236,223,.94); backdrop-filter: blur(12px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .wv-index-filterbar-inner { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; padding-top: .8rem; padding-bottom: .8rem; } .wv-filters-btn { display: inline-flex; align-items: center; gap: .5rem; background: var(--pine); color: var(--oat); border: none; border-radius: 9px; padding: .6rem 1.05rem; font-size: .9rem; font-weight: 500; font-family: var(--wv-sans); cursor: pointer; transition: background .2s var(--wv-ease), transform .14s; } .wv-filters-btn:active { transform: scale(.98); } .wv-filters-btn:hover { background: var(--pine-deep); } .wv-filters-btn svg { width: 15px; height: 15px; } .wv-filters-btn .wv-fb-ct { background: var(--gold-soft); color: var(--pine-deep); font-size: .7rem; font-weight: 700; min-width: 18px; height: 18px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 5px; } .wv-result-count { font-size: .88rem; color: var(--ink-soft); } .wv-result-count b { color: var(--ink); font-weight: 600; font-family: var(--wv-serif); } /* Active filter chips */ .wv-active-chips { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; min-width: 0; } .wv-fchip { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: .32rem .35rem .32rem .75rem; color: var(--ink); font-family: var(--wv-sans); } .wv-fchip button { width: 18px; height: 18px; border-radius: 50%; border: none; background: var(--oat-2); color: var(--ink-soft); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .18s, color .18s; } .wv-fchip button:hover { background: var(--rose); color: var(--oat); } .wv-fchip button svg { width: 9px; height: 9px; } .wv-clear-all { font-size: .82rem; color: var(--pine); font-weight: 500; background: none; border: none; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font-family: var(--wv-sans); } .wv-sort-inline { margin-left: auto; display: flex; align-items: center; gap: .5rem; flex-shrink: 0; } .wv-sort-inline label { font-size: .8rem; color: var(--ink-faint); } @media (max-width: 560px) { .wv-sort-inline { margin-left: 0; } } /* ── Filter drawer ──────────────────────────────────── */ .wv-fdrawer-scrim { position: fixed; inset: 0; background: rgba(15,21,15,.42); z-index: 250; opacity: 0; pointer-events: none; transition: opacity .3s var(--wv-ease); } .wv-fdrawer-scrim.wv-open { opacity: 1; pointer-events: auto; } .wv-fdrawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); z-index: 260; background: var(--oat); box-shadow: -20px 0 50px -20px rgba(15,21,15,.4); transform: translateX(100%); transition: transform .4s var(--wv-ease); display: flex; flex-direction: column; } .wv-fdrawer.wv-open { transform: translateX(0); } .wv-fdrawer-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.4rem; border-bottom: 1px solid var(--line); } .wv-fdrawer-head h2 { font-family: var(--wv-serif); font-weight: 400; font-size: 1.4rem; font-feature-settings: "ss01"; } .wv-fdrawer-close { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); background: var(--paper); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .2s; } .wv-fdrawer-close:hover { border-color: var(--ink-faint); } .wv-fdrawer-close svg { width: 15px; height: 15px; } .wv-fdrawer-body { flex: 1; overflow-y: auto; padding: 1.4rem; } /* Filter groups */ .wv-fgroup { margin-bottom: 1.7rem; } .wv-fgroup:last-child { margin-bottom: 0; } .wv-fgroup-label { font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .85rem; display: flex; align-items: center; gap: .6rem; } .wv-fgroup-label::before { content: ""; width: 14px; height: 1px; background: var(--gold); } /* Character chips in drawer */ .wv-chipset { display: flex; flex-wrap: wrap; gap: .5rem; } .wv-fchip-toggle { font-size: .85rem; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink-soft); border-radius: 999px; padding: .45rem .9rem; font-family: var(--wv-sans); cursor: pointer; transition: background .18s var(--wv-ease), border-color .18s, color .18s; } .wv-fchip-toggle:hover { border-color: var(--ink-faint); } .wv-fchip-toggle.wv-on { background: var(--pine); border-color: var(--pine); color: var(--oat); } .wv-fchip-toggle.wv-pinned { cursor: default; opacity: .7; } /* Toggle switches */ .wv-ftoggle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-top: 1px solid var(--line-soft); } .wv-ftoggle:first-child { border-top: none; } .wv-ft-text { font-size: .94rem; } .wv-ft-sub { font-size: .8rem; color: var(--ink-faint); } .wv-switch { width: 44px; height: 25px; border-radius: 999px; background: var(--oat-2); border: 1.5px solid var(--line); position: relative; flex-shrink: 0; cursor: pointer; transition: background .22s var(--wv-ease), border-color .22s; } .wv-switch::after { content: ""; position: absolute; top: 1.5px; left: 1.5px; width: 18px; height: 18px; border-radius: 50%; background: var(--paper); box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .22s var(--wv-ease); } .wv-switch.wv-on { background: var(--sage); border-color: var(--sage); } .wv-switch.wv-on::after { transform: translateX(19px); } /* Price band radios */ .wv-fradio { display: flex; align-items: center; gap: .6rem; padding: .5rem 0; font-size: .92rem; cursor: pointer; } .wv-fradio input { appearance: none; width: 18px; height: 18px; border: 1.5px solid var(--line); border-radius: 50%; flex-shrink: 0; position: relative; transition: border-color .18s; } .wv-fradio input:checked { border-color: var(--pine); } .wv-fradio input:checked::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--pine); } /* Drawer footer */ .wv-fdrawer-foot { padding: 1.1rem 1.4rem; border-top: 1px solid var(--line); display: flex; gap: .7rem; background: var(--paper); } .wv-drawer-actions { display: flex; gap: .7rem; width: 100%; } .wv-drawer-actions > * { flex: 1; } .wv-df-clear, .wv-df-apply { border-radius: 9px; padding: .8rem; font-size: .92rem; font-weight: 500; font-family: var(--wv-sans); cursor: pointer; transition: background .2s, border-color .2s, transform .14s; } .wv-df-clear:active, .wv-df-apply:active { transform: scale(.985); } .wv-df-clear { background: none; border: 1px solid var(--line); color: var(--ink); } .wv-df-clear:hover { border-color: var(--ink); } .wv-df-apply { background: var(--pine); border: none; color: var(--oat); } .wv-df-apply:hover { background: var(--pine-deep); } /* ── Index empty state ──────────────────────────────── */ .wv-index-empty { text-align: center; padding: 4rem 1rem; } .wv-index-empty .wv-em-mark { font-family: var(--wv-serif); font-style: italic; font-size: 1.5rem; color: var(--pine); margin-bottom: .5rem; } .wv-index-empty p { color: var(--ink-soft); max-width: 42ch; margin: 0 auto 1.2rem; } /* ── Search drawer responsive ───────────────────────── */ @media (max-width: 720px) { .wv-venue-card .wv-vc-visual { width: 84px; height: 64px; } .wv-q-bubble { max-width: 88%; } } /* ── Print ───────────────────────────────────────────── */ @media print { .wv { background: #fff; color: #000; } .wv-card { border: 1px solid #ccc; box-shadow: none; } } /* ================================================================ /my-wedding — Couple workspace (shared route on both twins) Neutral shell; accent palette follows entry twin — pine/sage/gold on weddingvenues, plum/clay on weddingvendors. See .wvd .mw-main overrides in wedding-vendors.css. ================================================================ */ /* ── Masthead ─────────────────────────────────────────── */ .mw-main { padding-bottom: clamp(2.5rem, 5vw, 4rem); } .mw-masthead { padding-top: calc(var(--wv-nav-h, 64px) + clamp(1.6rem, 3vw, 2.4rem)); padding-bottom: clamp(1.4rem, 3vw, 2.2rem); } .mw-title { font-family: var(--wv-serif); font-weight: 330; letter-spacing: -0.022em; font-size: clamp(2.3rem, 5vw, 3.6rem); line-height: 1.02; font-feature-settings: "ss01"; margin-top: 0.9rem; } .mw-masthead .mw-title em { color: var(--gold); } .mw-sub { margin-top: 0.6rem; color: var(--ink-soft); font-size: 1.04rem; max-width: 48ch; } /* Profile bar */ .mw-profile { margin-top: 1.5rem; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; display: flex; flex-wrap: wrap; align-items: stretch; overflow: hidden; } .mw-pf-item { display: flex; align-items: center; gap: 0.7rem; padding: 1rem 1.25rem; flex: 1; min-width: 160px; border-right: 1px solid var(--line-soft); } .mw-pf-item:last-of-type { border-right: none; } .mw-pf-ico { width: 34px; height: 34px; border-radius: 9px; background: var(--oat-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .mw-pf-ico svg { width: 16px; height: 16px; color: var(--ink-soft); } .mw-pf-label { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); display: block; } .mw-pf-val { font-family: var(--wv-serif); font-size: 1.06rem; line-height: 1.15; margin-top: 0.1rem; font-feature-settings: "ss01"; display: block; } .mw-pf-edit { margin-left: auto; align-self: center; margin-right: 1.1rem; font-size: 0.82rem; color: var(--ink-soft); font-weight: 500; background: none; border: none; display: flex; align-items: center; gap: 0.35rem; cursor: pointer; } .mw-pf-edit:hover { color: var(--ink); } .mw-pf-edit svg { width: 13px; height: 13px; } /* ── Budget tracker ──────────────────────────────────── */ .mw-budget { margin-top: 1rem; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; } .mw-budget-sum { display: flex; align-items: center; gap: 1.1rem 1.4rem; flex-wrap: wrap; padding: 1.1rem 1.3rem; cursor: pointer; } .mw-bd-ico { width: 38px; height: 38px; border-radius: 10px; background: var(--oat-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .mw-bd-ico svg { width: 18px; height: 18px; color: var(--ink-soft); } .mw-bd-main { flex: 1; min-width: min(100%, 16rem); } .mw-bd-figure { font-family: var(--wv-serif); font-weight: 430; font-size: 1.18rem; line-height: 1.2; font-feature-settings: "ss01"; } .mw-bd-range { color: var(--ink); } .mw-bd-of { color: var(--ink-faint); font-weight: 400; } .mw-bd-read { font-size: 0.84rem; margin-top: 0.15rem; } .mw-bd-ok { color: var(--sage); } .mw-bd-close { color: var(--rose); } .mw-bd-high { color: var(--rose); } .mw-bd-caveat { font-size: 0.78rem; color: var(--ink-faint); margin-top: 0.3rem; display: flex; align-items: flex-start; gap: 0.4rem; } .mw-bd-caveat svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 2px; } .mw-bd-bar { flex: 1; min-width: min(100%, 13rem); } .mw-bd-track { height: 10px; border-radius: 999px; background: var(--oat-2); overflow: hidden; display: flex; } .mw-bd-firm { height: 100%; background: var(--sage); } .mw-bd-est { height: 100%; background: repeating-linear-gradient(45deg, var(--gold-soft) 0 5px, rgba(217,183,119,.45) 5px 10px); } .mw-bd-legend { display: flex; gap: 1rem; margin-top: 0.45rem; flex-wrap: wrap; } .mw-bd-legend span { font-size: 0.72rem; color: var(--ink-faint); display: flex; align-items: center; gap: 0.34rem; } .mw-bd-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; } .mw-bd-legend i.firm { background: var(--sage); } .mw-bd-legend i.est { background: repeating-linear-gradient(45deg, var(--gold-soft) 0 3px, rgba(217,183,119,.45) 3px 6px); } .mw-bd-chev { flex-shrink: 0; color: var(--ink-faint); transition: transform 0.3s var(--wv-ease); } .mw-bd-chev svg { width: 18px; height: 18px; } .mw-budget.open .mw-bd-chev { transform: rotate(180deg); } /* Breakdown detail */ .mw-bd-detail { border-top: 1px solid var(--line-soft); padding: 0.4rem 1.3rem 1rem; animation: mw-bdslide 0.3s var(--wv-ease); } @keyframes mw-bdslide { from { opacity: 0; } to { opacity: 1; } } .mw-bd-row { display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line-soft); } .mw-bd-row:last-child { border-bottom: none; } .mw-bd-category { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); width: 5.5rem; flex-shrink: 0; } .mw-bd-name { font-family: var(--wv-serif); font-size: 1rem; flex: 1; font-feature-settings: "ss01"; } .mw-bd-open { color: var(--ink-faint); font-style: italic; font-family: var(--wv-sans); font-size: 0.88rem; } .mw-bd-tag { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.15rem 0.42rem; border-radius: 5px; } .mw-bd-tag.confirmed { background: rgba(95,128,96,.16); color: var(--sage); } .mw-bd-tag.estimated { background: rgba(176,132,58,.16); color: var(--gold); } .mw-bd-tag.uncosted { background: var(--oat-2); color: var(--ink-faint); } .mw-bd-amt { font-family: var(--wv-serif); font-size: 1rem; font-weight: 500; width: 6rem; text-align: right; flex-shrink: 0; font-feature-settings: "ss01"; } .mw-bd-amt.soft { color: var(--ink-faint); font-weight: 400; } .mw-bd-set { margin-top: 0.85rem; font-size: 0.82rem; color: var(--ink-soft); } .mw-bd-set button { background: none; border: none; color: var(--pine); font-weight: 500; font-size: 0.82rem; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } /* ── Section ─────────────────────────────────────────── */ .mw-section { padding-top: clamp(1.6rem, 3vw, 2.4rem); padding-bottom: 0.5rem; } .mw-sec-head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.1rem; flex-wrap: wrap; } .mw-sec-head h2 { font-family: var(--wv-serif); font-weight: 400; font-size: 1.4rem; letter-spacing: -0.014em; font-feature-settings: "ss01"; display: flex; align-items: baseline; gap: 0.5rem; } .mw-sh-tag { font-size: 0.7rem; letter-spacing: 0.04em; color: var(--ink-faint); font-family: var(--wv-sans); } /* ── Venue anchor ────────────────────────────────────── */ .mw-anchor { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: grid; grid-template-columns: 300px 1fr; } .mw-anchor-img { position: relative; min-height: 230px; } .mw-anchor-img .wv-scene { position: absolute; inset: 0; } .mw-ai-flag { position: absolute; top: 0.8rem; left: 0.8rem; z-index: 3; display: inline-flex; align-items: center; gap: 0.4rem; background: rgba(252,250,244,.95); backdrop-filter: blur(4px); border-radius: 7px; padding: 0.3rem 0.6rem; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--pine); } .mw-ai-flag svg { width: 12px; height: 12px; } .mw-anchor-body { padding: 1.5rem 1.6rem; display: flex; flex-direction: column; } .mw-anchor-kicker { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pine); font-weight: 600; display: flex; align-items: center; gap: 0.45rem; } .mw-anchor-kicker::before { content: ""; width: 14px; height: 1px; background: var(--pine); } .mw-anchor-name { font-family: var(--wv-serif); font-weight: 420; font-size: 1.7rem; line-height: 1.08; letter-spacing: -0.018em; margin: 0.4rem 0 0.15rem; font-feature-settings: "ss01"; } .mw-anchor-loc { font-size: 0.86rem; color: var(--ink-soft); display: flex; align-items: center; gap: 0.35rem; } .mw-anchor-loc svg { width: 13px; height: 13px; color: var(--ink-faint); } .mw-anchor-facts { display: flex; flex-wrap: wrap; gap: 0.4rem 1.3rem; margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--line-soft); } .mw-anchor-fact { font-size: 0.84rem; color: var(--ink-soft); } .mw-anchor-fact b { color: var(--ink); font-weight: 600; } .mw-anchor-status { margin-top: auto; padding-top: 1rem; display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; } .mw-anchor-link { --growth: 0; font-size: 0.84rem; font-weight: 500; color: var(--pine); display: flex; align-items: center; gap: 0.3rem; } .mw-anchor-link:hover, .mw-anchor-link:focus-visible { --growth: 1; } .mw-anchor-link svg { width: 13px; height: 13px; } /* ── Booking status control ──────────────────────────── */ .mw-status-ctl { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.55rem; border-radius: 9px; border: 1px solid var(--line-soft); background: var(--oat-2); cursor: pointer; transition: border-color 0.2s var(--wv-ease), background 0.2s var(--wv-ease); } .mw-status-ctl:hover { border-color: var(--line); } .mw-status-step { display: flex; gap: 2px; } .mw-status-step i { width: 8px; height: 4px; border-radius: 1px; background: var(--line); transition: background 0.3s var(--wv-ease); } .mw-status-label { font-size: 0.74rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.32rem; white-space: nowrap; } .mw-status-label svg { width: 12px; height: 12px; } .mw-status-caret { width: 13px; height: 13px; color: var(--ink-faint); transition: transform 0.25s var(--wv-ease); } .mw-status-ctl.open .mw-status-caret { transform: rotate(180deg); } .mw-status-note { font-size: 0.78rem; color: var(--sage); font-weight: 500; } /* Status colour stages */ .mw-st-saved .mw-status-step i.on { background: var(--ink-faint); } .mw-st-saved .mw-status-label { color: var(--ink-faint); } .mw-st-enquired .mw-status-step i.on { background: var(--ink-soft); } .mw-st-enquired .mw-status-label { color: var(--ink-soft); } .mw-st-quoted .mw-status-step i.on { background: var(--gold); } .mw-st-quoted .mw-status-label { color: var(--gold); } .mw-st-booked .mw-status-step i.on { background: var(--sage); } .mw-st-booked .mw-status-label { color: var(--sage); } .mw-st-booked { background: rgba(95,128,96,.1); border-color: rgba(95,128,96,.28); } /* Status update menu */ .mw-status-menu { position: absolute; bottom: calc(100% + 7px); left: 0; z-index: 30; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 20px 44px -18px rgba(35,30,26,.45); padding: 0.3rem; min-width: 180px; animation: mw-smpop 0.18s var(--wv-ease); } @keyframes mw-smpop { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } .mw-status-menu button { display: flex; align-items: center; gap: 0.55rem; width: 100%; background: none; border: none; border-radius: 8px; padding: 0.52rem 0.55rem; font-size: 0.83rem; color: var(--ink-soft); text-align: left; cursor: pointer; transition: background 0.15s; } .mw-status-menu button:hover { background: var(--oat-2); } .mw-sm-ico { width: 14px; height: 14px; flex-shrink: 0; } .mw-status-menu button.current { color: var(--ink); font-weight: 600; } .mw-sm-check { width: 14px; height: 14px; margin-left: auto; color: var(--sage); } /* ── Team grid ───────────────────────────────────────── */ .mw-progress { background: var(--paper); border: 1px solid var(--line); border-radius: 13px; padding: 1.05rem 1.2rem; margin-bottom: 1.1rem; display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; } .mw-pg-text { flex: 1; min-width: min(100%, 15rem); } .mw-pg-count { font-family: var(--wv-serif); font-weight: 430; font-size: 1.12rem; font-feature-settings: "ss01"; } .mw-pg-count b { color: var(--sage); } .mw-pg-line { font-size: 0.84rem; color: var(--ink-soft); margin-top: 0.1rem; } .mw-pg-bar { flex: 1; min-width: min(100%, 12rem); height: 9px; border-radius: 999px; background: var(--oat-2); overflow: hidden; display: flex; gap: 2px; } .mw-pg-bar i { display: block; height: 100%; flex: 1; background: var(--oat-2); border-radius: 2px; transition: background 0.5s var(--wv-ease); } .mw-pg-bar i.on { background: linear-gradient(90deg, var(--sage), var(--gold)); } .mw-team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; } .mw-role { position: relative; background: var(--paper); border: 1px solid var(--line-soft); border-radius: 13px; padding: 1.1rem 1.15rem; display: flex; flex-direction: column; min-height: 150px; transition: border-color 0.25s var(--wv-ease), box-shadow 0.25s var(--wv-ease), transform 0.25s var(--wv-ease); } .mw-role:hover { border-color: var(--line); transform: translateY(-2px); box-shadow: 0 18px 36px -26px rgba(35,30,26,.5); } .mw-role-top { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; } .mw-role-ico { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .mw-role-ico svg { width: 17px; height: 17px; } .mw-role-category { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; } /* Filled role */ .mw-role.filled .mw-role-ico { background: rgba(44,70,54,.12); } .mw-role.filled .mw-role-ico svg { color: var(--pine-mid); } .mw-role-name { font-family: var(--wv-serif); font-weight: 430; font-size: 1.16rem; line-height: 1.1; letter-spacing: -0.012em; font-feature-settings: "ss01"; } .mw-role-name a { color: inherit; text-decoration: none; } .mw-role-name a::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 13px; } .mw-role-name a:focus-visible { outline: none; } .mw-role-name a:focus-visible::after { outline: 2px solid var(--gold); outline-offset: 2px; } .mw-role.filled:hover .mw-role-name { color: var(--pine); } .mw-role-meta { font-size: 0.8rem; color: var(--ink-soft); margin-top: 0.2rem; } .mw-role-foot { margin-top: auto; padding-top: 0.8rem; display: flex; align-items: center; gap: 0.5rem; } .mw-role-remove { margin-left: auto; width: 24px; height: 24px; border-radius: 50%; border: none; background: var(--oat-2); color: var(--ink-faint); display: flex; align-items: center; justify-content: center; z-index: 3; position: relative; cursor: pointer; transition: background 0.2s, color 0.2s; } .mw-role-remove:hover { background: var(--rose); color: #fff; } .mw-role-remove svg { width: 10px; height: 10px; } /* Open role */ .mw-role.open { background: transparent; border-style: dashed; border-color: var(--line); } .mw-role.open .mw-role-ico { background: var(--oat-2); } .mw-role.open .mw-role-ico svg { color: var(--ink-faint); } .mw-role.open .mw-role-name { color: var(--ink-faint); font-weight: 400; } .mw-role-hint { font-size: 0.8rem; color: var(--ink-faint); margin-top: 0.2rem; line-height: 1.45; } .mw-role-find { margin-top: auto; padding-top: 0.8rem; } .mw-role-find a { --growth: 0; font-size: 0.8rem; font-weight: 500; color: var(--pine); display: inline-flex; align-items: center; gap: 0.4rem; background: rgba(44,70,54,.1); border-radius: 8px; padding: 0.45rem 0.75rem; transition: background 0.2s var(--wv-ease); } .mw-role-find a:hover, .mw-role-find a:focus-visible { --growth: 1; background: rgba(44,70,54,.18); } /* ── Collaborators ───────────────────────────────────── */ .mw-collab { margin-top: 1.4rem; display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; padding: 1rem 1.2rem; background: var(--paper); border: 1px solid var(--line-soft); border-radius: 12px; } .mw-collab-avs { display: flex; } .mw-av { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--paper); margin-left: -8px; display: flex; align-items: center; justify-content: center; font-size: 0.74rem; font-weight: 600; color: #fff; font-family: var(--wv-serif); } .mw-av:first-child { margin-left: 0; } .mw-collab-text { font-size: 0.86rem; color: var(--ink-soft); } .mw-collab-text b { color: var(--ink); font-weight: 600; } .mw-collab-invite { margin-left: auto; font-size: 0.83rem; font-weight: 500; color: var(--ink-soft); background: none; border: 1px solid var(--line); border-radius: 8px; padding: 0.5rem 0.85rem; cursor: pointer; transition: border-color 0.2s, color 0.2s; } .mw-collab-invite:hover { border-color: var(--ink-faint); color: var(--ink); } /* ── Enquiry history ─────────────────────────────────── */ .mw-enq-history { display: grid; gap: .6rem; margin-top: 1rem; } .mw-enq-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1.1rem; } .mw-enq-info { display: flex; flex-direction: column; gap: .15rem; min-width: 0; } .mw-enq-name { font-weight: 600; font-size: .95rem; color: var(--ink); text-decoration: none; } .mw-enq-name:hover { text-decoration: underline; } .mw-enq-when { font-size: .8rem; color: var(--ink-faint); } .mw-enq-badge { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: .25rem .6rem; border-radius: 6px; flex-shrink: 0; } .mw-enq-sent { background: var(--oat-2); color: var(--ink-soft); } .mw-enq-replied { background: rgba(95,122,92,.15); color: var(--pine); } /* ── Next step CTA ───────────────────────────────────── */ .mw-nextstep { margin-top: 1.4rem; background: linear-gradient(120deg, var(--pine-deep), var(--pine-mid)); border-radius: 16px; padding: clamp(1.5rem, 3vw, 2.2rem); position: relative; overflow: hidden; } .mw-nextstep::before { content: ""; position: absolute; inset: 0; opacity: 0.5; background: radial-gradient(ellipse at 80% 0%, rgba(176,132,58,.26), transparent 60%); } .mw-nextstep-inner { position: relative; display: flex; align-items: center; gap: 1.4rem 2rem; flex-wrap: wrap; } .mw-nextstep-text { flex: 1; min-width: min(100%, 20rem); } .mw-nextstep h2 { font-family: var(--wv-serif); font-weight: 340; color: var(--oat); font-size: clamp(1.4rem, 2.5vw, 1.95rem); line-height: 1.14; margin: 0.5rem 0 0.3rem; font-feature-settings: "ss01"; } .mw-nextstep p { color: rgba(239,233,223,.72); font-size: 0.92rem; max-width: 44ch; } .mw-btn-step { --growth: 0; background: var(--gold-soft); color: var(--pine-deep); flex-shrink: 0; border: none; border-radius: 10px; padding: 0.82rem 1.5rem; font-size: 0.92rem; font-weight: 500; display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; transition: background 0.2s, transform 0.14s; } .mw-btn-step:active { transform: scale(0.98); } .mw-btn-step:hover, .mw-btn-step:focus-visible { --growth: 1; background: #E8C893; } .mw-btn-step svg { width: 15px; height: 15px; } /* ── Responsive ──────────────────────────────────────── */ @media (max-width: 880px) { .mw-team-grid { grid-template-columns: repeat(2, 1fr); } .mw-anchor { grid-template-columns: 1fr; } .mw-anchor-img { min-height: 180px; } } @media (max-width: 560px) { .mw-team-grid { grid-template-columns: 1fr; } .mw-pf-item { min-width: 50%; border-right: none; border-bottom: 1px solid var(--line-soft); } .mw-pf-edit { display: none; } } /* Venues entry — editorial accents */ .wv:not(.wvd) .mw-main .mw-av--a { background: var(--pine); } .wv:not(.wvd) .mw-main .mw-av--b { background: var(--pine-mid); } .wv:not(.wvd) .mw-main .mw-av--c { background: var(--gold); } /* ================================================================ Skeleton loading — shared across both wedding twins ================================================================ */ @keyframes wv-pulse { 0%, 100% { opacity: .45; } 50% { opacity: .25; } } .wv-skel { background: var(--oat-2); border-radius: 6px; animation: wv-pulse 1.8s ease-in-out infinite; } .wv-skel-fill { position: absolute; inset: 0; border-radius: 0; } .wv-skel-line { display: block; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { .wv-skel { animation: none; opacity: .35; } }