/* * weddingvendors.co.nz — Token overrides & vendor-specific components * * Twin of weddingvenues. Same chassis (layout, typography, motion). * Own identity: plum + warm shell + clay. Subject is CATEGORY, not landscape. * Language: a couple gathers a TEAM, not "hires vendors." * * Applied via .wvd class on alongside .wv. * Inherits all shared .wv component styles; only overrides tokens + adds new components. */ /* ── Token overrides ───────────────────────────────── */ .wvd { --oat: #EEE7E2; --oat-2: #E3D9D1; --paper: #FAF6F1; --ink: #241B22; --ink-soft: #4C3F46; --ink-faint: #6E626A; --pine: #4A2A52; --pine-deep: #2A1530; --pine-mid: #7A4FB5; --gold: #9B5230; --gold-soft: #DDA271; --line: rgba(36,27,34,.14); --line-soft: rgba(36,27,34,.07); /* Named aliases for clarity in vendor-specific code */ --plum: #4A2A52; --plum-deep: #2A1530; --plum-mid: #7A4FB5; --lilac: #B79AD4; --clay: #9B5230; --clay-soft: #DDA271; --cream: #F2E4CF; --venues-teal: #2C4636; /* Gap below nav / above breadcrumb — mirrored below page masthead intro copy */ --wvd-page-head-gap: clamp(1.5rem, 3.5vw, 2.8rem); --wvd-title-section: clamp(1.9rem, 3.6vw, 2.9rem); --wvd-title-subsection: clamp(1.15rem, 2.15vw, 1.75rem); background: var(--oat); } .wvd ::selection { background: var(--plum); color: var(--oat); } .wvd :focus-visible { outline-color: var(--clay); } /* Eyebrows — shared label style, vendor accent */ .wvd .wv-eyebrow { color: var(--clay); } .wvd .wv-eyebrow::before { background: var(--clay); } /* Header — shared structure, vendor accent */ .wvd nav[data-scrolled] .wv-nav-link:hover, .wvd nav[data-scrolled] .wv-search-btn:hover, .wvd .wv-mobile-nav-link.wv-active { color: var(--plum); } /* ── Category studio scenes ────────────────────────── */ .wvd-studio { position: relative; overflow: hidden; isolation: isolate; background: var(--oat-2); width: 100%; height: 100%; } .wvd-studio .wvd-glow { position: absolute; border-radius: 50%; z-index: 1; background: radial-gradient(circle, rgba(255,239,212,.6), transparent 68%); animation: wvd-lift 9s var(--wv-ease-soft) infinite; } @keyframes wvd-lift { 0%,100% { transform: scale(1); opacity: .92; } 50% { transform: scale(1.06); opacity: 1; } } .wvd-studio .wvd-m { position: absolute; z-index: 2; } /* Scene grounds */ .wvd-bloom { background: linear-gradient(162deg, #5E7457, #374633); } .wvd-lens { background: linear-gradient(162deg, #5A3A66, #311B3C); } .wvd-vow { background: linear-gradient(162deg, #9A5436, #5E3322); } .wvd-table { background: linear-gradient(162deg, #9C5A4C, #5E332B); } .wvd-sound { background: linear-gradient(162deg, #4C5575, #2A3048); } .wvd-cloth { background: linear-gradient(162deg, #7E5A86, #4A3052); } .wvd-tier { background: linear-gradient(162deg, #6B3F5E, #3A2036); } .wvd-mirror { background: linear-gradient(162deg, #3E2348, #22122B); } /* Bloom — vase + blooms */ .wvd-bloom .wvd-glow { width: 70%; padding-bottom: 70%; left: 15%; top: 4%; } .wvd-bloom .wvd-m:nth-child(2) { width: 20%; height: 24%; left: 40%; bottom: 12%; background: var(--cream); clip-path: polygon(26% 0, 74% 0, 90% 100%, 10% 100%); } .wvd-bloom .wvd-m:nth-child(3) { width: 15%; aspect-ratio: 1; border-radius: 50%; left: 32%; bottom: 33%; background: var(--cream); } .wvd-bloom .wvd-m:nth-child(4) { width: 17%; aspect-ratio: 1; border-radius: 50%; left: 42%; bottom: 44%; background: var(--cream); } .wvd-bloom .wvd-m:nth-child(5) { width: 14%; aspect-ratio: 1; border-radius: 50%; left: 55%; bottom: 34%; background: var(--cream); } /* Lens — concentric circles */ .wvd-lens .wvd-glow { width: 62%; padding-bottom: 62%; left: 19%; top: 12%; } .wvd-lens .wvd-m:nth-child(2) { width: 54%; aspect-ratio: 1; border-radius: 50%; left: 23%; top: 20%; border: 3px solid var(--cream); } .wvd-lens .wvd-m:nth-child(3) { width: 34%; aspect-ratio: 1; border-radius: 50%; left: 33%; top: 30%; border: 3px solid var(--cream); } .wvd-lens .wvd-m:nth-child(4) { width: 16%; aspect-ratio: 1; border-radius: 50%; left: 42%; top: 39%; background: var(--cream); } /* Vow — paired rings */ .wvd-vow .wvd-glow { width: 64%; padding-bottom: 64%; left: 18%; top: 10%; } .wvd-vow .wvd-m:nth-child(2) { width: 33%; aspect-ratio: 1; border-radius: 50%; left: 24%; top: 31%; border: 4px solid var(--cream); } .wvd-vow .wvd-m:nth-child(3) { width: 33%; aspect-ratio: 1; border-radius: 50%; left: 43%; top: 31%; border: 4px solid var(--cream); } /* Table — plates on surface */ .wvd-table .wvd-glow { width: 62%; padding-bottom: 62%; left: 19%; top: 4%; } .wvd-table .wvd-m:nth-child(2) { width: 74%; height: 6%; left: 13%; bottom: 27%; border-radius: 4px; background: var(--cream); } .wvd-table .wvd-m:nth-child(3) { width: 15%; aspect-ratio: 1; border-radius: 50%; left: 22%; bottom: 33%; background: var(--cream); } .wvd-table .wvd-m:nth-child(4) { width: 15%; aspect-ratio: 1; border-radius: 50%; left: 42.5%; bottom: 33%; background: var(--cream); } .wvd-table .wvd-m:nth-child(5) { width: 15%; aspect-ratio: 1; border-radius: 50%; left: 63%; bottom: 33%; background: var(--cream); } /* Sound — emanating rings */ .wvd-sound .wvd-glow { width: 54%; padding-bottom: 54%; left: 8%; top: 22%; } .wvd-sound .wvd-m:nth-child(2) { width: 30%; aspect-ratio: 1; border-radius: 50%; left: -14%; top: 36%; border: 3px solid var(--cream); } .wvd-sound .wvd-m:nth-child(3) { width: 56%; aspect-ratio: 1; border-radius: 50%; left: -27%; top: 23%; border: 3px solid var(--cream); } .wvd-sound .wvd-m:nth-child(4) { width: 82%; aspect-ratio: 1; border-radius: 50%; left: -40%; top: 9%; border: 3px solid var(--cream); } /* Cloth — draped panels */ .wvd-cloth .wvd-glow { width: 64%; padding-bottom: 64%; left: 18%; top: 6%; } .wvd-cloth .wvd-m:nth-child(2) { width: 17%; height: 60%; left: 27%; top: 15%; background: var(--cream); border-radius: 0 0 50% 50% / 0 0 28% 28%; } .wvd-cloth .wvd-m:nth-child(3) { width: 17%; height: 70%; left: 42%; top: 9%; background: var(--cream); border-radius: 0 0 50% 50% / 0 0 28% 28%; } .wvd-cloth .wvd-m:nth-child(4) { width: 17%; height: 56%; left: 57%; top: 17%; background: var(--cream); border-radius: 0 0 50% 50% / 0 0 28% 28%; } /* Tier — cake layers */ .wvd-tier .wvd-glow { width: 60%; padding-bottom: 60%; left: 20%; top: 6%; } .wvd-tier .wvd-m:nth-child(2) { width: 42%; height: 15%; left: 29%; bottom: 20%; background: var(--cream); border-radius: 5px; } .wvd-tier .wvd-m:nth-child(3) { width: 31%; height: 14%; left: 34.5%; bottom: 35%; background: var(--cream); border-radius: 5px; } .wvd-tier .wvd-m:nth-child(4) { width: 21%; height: 13%; left: 39.5%; bottom: 49%; background: var(--cream); border-radius: 5px; } .wvd-tier .wvd-m:nth-child(5) { width: 6.5%; aspect-ratio: 1; border-radius: 50%; left: 46.7%; bottom: 62%; background: var(--cream); } /* Mirror — vanity mirror */ .wvd-mirror .wvd-glow { width: 52%; padding-bottom: 52%; left: 24%; top: 16%; } .wvd-mirror .wvd-m:nth-child(2) { width: 46%; aspect-ratio: 1; border-radius: 50%; left: 27%; top: 15%; border: 4px solid var(--cream); } .wvd-mirror .wvd-m:nth-child(3) { width: 7%; height: 22%; left: 46.5%; bottom: 16%; background: var(--cream); } .wvd-mirror .wvd-m:nth-child(4) { width: 30%; height: 5%; left: 35%; bottom: 14%; background: var(--cream); border-radius: 4px; } /* ── Hero — editorial split ────────────────────────── */ .wvd-hero { padding-top: calc(var(--wv-nav-h, 64px) + clamp(.5rem, 1.125vw, .9rem) + 12px); padding-bottom: clamp(2.4rem, 5vw, 4.4rem); } .wvd-hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(1.5rem, 4vw, 3.4rem); align-items: start; } .wvd-hero-copy { max-width: 31rem; align-self: center; } .wvd-hero-copy h1, .wvd-jnl-title, .wvd .wv-index-head h1, .wvd .wv-atlas-hero h1, .wvd-cat-head h1 { font-family: var(--wv-serif); font-weight: 350; letter-spacing: -.025em; font-size: clamp(2.6rem, 5.4vw, 4.4rem); line-height: 1.0; font-feature-settings: "ss01"; } .wvd-hero-copy h1 { margin: 1.1rem 0 0; } .wvd .wv-atlas-hero .wv-eyebrow + h1 { margin-top: 1.1rem; } /* For-businesses — match atlas/detail vertical rhythm */ .wvd-fb-masthead { padding-top: calc(var(--wv-nav-h, 64px) + var(--wvd-page-head-gap)); } @media (min-width: 769px) { .wvd .wvd-page-head-col { max-width: 50%; } .wvd-atlas-split { grid-template-columns: minmax(0, 50%) 1fr; } } .wvd-hero-lede { margin-top: 1.15rem; color: var(--ink-soft); font-size: clamp(1.02rem, 1.5vw, 1.16rem); max-width: 44ch; } .wvd-hero-cta { margin-top: 1.6rem; display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; } .wvd-hero-stats { margin-top: 1.8rem; display: flex; gap: 1.6rem; flex-wrap: wrap; padding-top: 1.3rem; border-top: 1px solid var(--line); } .wvd-hstat-num { font-family: var(--wv-serif); font-weight: 400; font-size: 1.5rem; line-height: 1; font-feature-settings: "ss01"; } .wvd-hstat-label { font-size: .78rem; color: var(--ink-faint); margin-top: .2rem; } /* Hero collage — natural height so 20px gap is never compressed */ .wvd-collage { display: flex; flex-direction: column; align-items: stretch; gap: 20px; width: 100%; } .wvd-cc { position: relative; border-radius: 15px; overflow: hidden; border: 1px solid rgba(255,255,255,.35); box-shadow: 0 26px 52px -34px rgba(42,21,48,.5); width: 100%; aspect-ratio: 3/2; flex: none; min-height: clamp(168px, 20vw, 240px); transition: transform .5s var(--wv-ease); } .wvd-cc.wvd-left { transform: rotate(-4deg); z-index: 2; } .wvd-cc.wvd-right { transform: rotate(4deg); z-index: 1; } .wvd-hero-grid:hover .wvd-cc.wvd-left, .wvd-hero-grid:hover .wvd-cc.wvd-right { transform: rotate(0); } .wvd-cc .wvd-studio { position: absolute; inset: 0; } .wvd-db-vendor-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .wvd-cc-tag { position: absolute; left: 1rem; bottom: 1rem; z-index: 4; background: rgba(250,246,241,.94); backdrop-filter: blur(5px); border-radius: 11px; padding: .55rem .9rem; max-width: calc(100% - 2rem); } .wvd-cc-category { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--clay); font-weight: 400; } .wvd-cc-name { font-family: var(--wv-serif); font-size: .95rem; line-height: 1.1; margin-top: .05rem; font-feature-settings: "ss01"; } /* ── Discipline grid ───────────────────────────────── */ .wvd-disc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: clamp(1.4rem, 3vw, 2.2rem); } .wvd-disc { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-soft); background: var(--paper); display: flex; flex-direction: column; transition: transform .3s var(--wv-ease), box-shadow .3s var(--wv-ease), border-color .3s; } .wvd-disc:hover { transform: translateY(-4px); border-color: var(--line); box-shadow: 0 24px 44px -30px rgba(42,21,48,.5); } .wvd-disc-top { aspect-ratio: 5/3; position: relative; } .wvd-disc-top .wvd-studio { position: absolute; inset: 0; } .wvd-disc-body { padding: 1.05rem 1.15rem 1.2rem; display: flex; flex-direction: column; flex: 1; } .wvd-disc-line { margin-top: .4rem; font-size: .92rem; color: var(--ink-soft); line-height: 1.45; flex: 1; } /* "Browse all" tile */ .wvd-disc-all { background: var(--plum); border-color: var(--plum); } .wvd-disc-all:hover { background: var(--plum-deep); border-color: var(--plum-deep); } .wvd-disc-all-inner { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 1.2rem; } .wvd-disc-all .wvd-da-arrow { width: 38px; height: 38px; border-radius: 50%; background: rgba(238,231,226,.14); display: flex; align-items: center; justify-content: center; margin-bottom: .85rem; transition: background .25s var(--wv-ease); } .wvd-disc-all:hover .wvd-da-arrow { background: rgba(238,231,226,.22); } .wvd-disc-all .wvd-da-arrow svg { width: 17px; height: 17px; color: var(--oat); transition: transform .25s var(--wv-ease); } .wvd-disc-all:hover .wvd-da-arrow svg { transform: translateX(2px); } .wvd-disc-all .wvd-da-title { font-family: var(--wv-serif); font-weight: 440; font-size: 1.16rem; line-height: 1.12; color: var(--oat); font-feature-settings: "ss01"; } .wvd-disc-all .wvd-da-sub { font-size: .82rem; color: rgba(238,231,226,.6); margin-top: .25rem; } /* ── Featured band ─────────────────────────────────── */ .wvd-featured { margin-top: clamp(2rem, 4vw, 3.4rem); margin-bottom: clamp(2rem, 4vw, 3.4rem); } .wvd-featured-inner { --featured-pad: 8px; --featured-inner-r: calc(20px - var(--featured-pad)); background: var(--plum-deep); border-radius: 20px; overflow: hidden; padding: var(--featured-pad); display: grid; grid-template-columns: .82fr 1.18fr; position: relative; } .wvd-featured-inner::before { content: ""; position: absolute; inset: 0; opacity: .6; z-index: 0; background: radial-gradient(ellipse at 30% 0%, rgba(194,115,74,.3), transparent 58%); } .wvd-featured-scene { position: relative; min-height: 340px; border-radius: var(--featured-inner-r); overflow: hidden; } .wvd-featured-scene .wvd-studio { position: absolute; inset: 0; } .wvd-featured-text { padding: clamp(1.8rem, 4vw, 3.4rem); position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; color: rgba(238, 231, 226, .92); } .wvd-f-identity { display: flex; align-items: center; gap: 1rem; margin: .8rem 0 .3rem; min-width: 0; } .wvd-f-medallion { flex: 0 0 auto; width: 64px; height: 64px; min-width: 64px; max-width: 64px; min-height: 64px; max-height: 64px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; border: 2px solid rgba(250,246,241,.4); background: var(--paper); box-shadow: 0 4px 14px rgba(15,10,18,.35); box-sizing: border-box; } .wvd-f-medallion img { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: cover; } .wvd-f-medallion.is-logo { padding: .3rem; } .wvd-f-medallion.is-logo img { object-fit: contain; object-position: center; border-radius: 50%; } .wvd-f-medallion.is-headshot img { object-fit: cover; } .wvd-f-medallion.is-monogram { background: var(--plum); border-color: rgba(250,246,241,.5); } .wvd-f-medallion.is-monogram span { font-family: var(--wv-serif); font-weight: 420; font-size: 1.15rem; color: var(--cream); font-feature-settings: "ss01"; line-height: 1; } .wvd-f-id-text { min-width: 0; flex: 1; } .wvd-featured-text .wvd-f-name { font-family: var(--wv-serif); font-weight: 340; color: var(--paper); font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1.25; margin: 0; padding-block: .06em; font-feature-settings: "ss01"; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wvd-featured-text .wvd-f-name em { font-style: italic; color: var(--lilac); } .wvd-featured-text .wvd-f-meta { margin: .28rem 0 0; font-family: var(--wv-sans); font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--clay); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wvd-featured-text .wvd-f-meta .wvd-id-meta-dot { background: var(--clay); opacity: .45; } .wvd-featured-text .wvd-f-quote { font-family: var(--wv-serif); font-style: italic; font-weight: 330; color: rgba(238,231,226,.86); font-size: clamp(1.05rem, 1.7vw, 1.32rem); line-height: 1.45; margin: 1.1rem 0; padding-left: 1rem; border-left: 2px solid var(--clay-soft); } .wvd-featured-text .wvd-f-byline { font-size: .76rem; color: rgba(238,231,226,.5); letter-spacing: .04em; margin-bottom: 1.4rem; } /* ── Honesty cards ─────────────────────────────────── */ .wvd-honesty-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: clamp(1.2rem, 2.5vw, 2rem); } .wvd-hcard { position: relative; overflow: hidden; min-height: 100%; padding: 1.45rem 1.4rem 1.55rem; background: linear-gradient(145deg, var(--paper) 0%, rgba(250,246,241,.82) 100%); border: 1px solid var(--line-soft); border-radius: 16px; box-shadow: 0 12px 30px -28px rgba(42,21,48,.6); transition: transform .3s var(--wv-ease), box-shadow .3s var(--wv-ease), border-color .3s var(--wv-ease); } .wvd-hcard::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(180deg, var(--clay-soft), rgba(221,162,113,.18)); opacity: .72; } .wvd-hcard:hover { transform: translateY(-5px); border-color: var(--line); box-shadow: 0 24px 42px -28px rgba(42,21,48,.48); } .wvd-hcard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.15rem; } .wvd-hcard-ico { position: relative; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(145deg, rgba(250,246,241,.96), rgba(227,217,209,.74)); border: 1px solid rgba(74,42,82,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 7px 14px -12px rgba(42,21,48,.62); display: flex; align-items: center; justify-content: center; transition: background .3s var(--wv-ease), border-color .3s var(--wv-ease), box-shadow .3s var(--wv-ease); } .wvd-hcard-ico::before { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(155,82,48,.12); border-radius: 8px; pointer-events: none; } .wvd-hcard-ico svg { position: relative; width: 19px; height: 19px; color: var(--plum); transition: transform .3s var(--wv-ease), color .3s var(--wv-ease); } .wvd-hcard:hover .wvd-hcard-ico { background: linear-gradient(145deg, rgba(255,252,249,.98), rgba(227,217,209,.82)); border-color: rgba(155,82,48,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 9px 16px -12px rgba(42,21,48,.7); } .wvd-hcard:hover .wvd-hcard-ico svg { transform: translateY(-1px); color: var(--clay); } .wvd-hcard-num { padding-top: .15rem; font-family: var(--wv-sans); font-size: .66rem; font-weight: 600; letter-spacing: .14em; color: var(--clay); opacity: .72; } .wvd-hcard h3 { max-width: 16ch; font-family: var(--wv-serif); font-weight: 440; font-size: 1.16rem; line-height: 1.16; letter-spacing: -.01em; margin-bottom: .55rem; font-feature-settings: "ss01"; } .wvd-hcard p { font-size: .86rem; color: var(--ink-soft); line-height: 1.62; } @media (prefers-reduced-motion: reduce) { .wvd-hcard { transition: none; } .wvd-hcard:hover { transform: none; } .wvd-hcard-ico, .wvd-hcard-ico svg { transition: none; } .wvd-hcard:hover .wvd-hcard-ico svg { transform: none; } } /* ── Team cards ────────────────────────────────────── */ .wvd-team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: clamp(1.2rem, 2.5vw, 2rem); } .wvd-tcard { position: relative; background: var(--paper); border: 1px solid var(--line-soft); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: transform .3s var(--wv-ease), box-shadow .3s var(--wv-ease), border-color .3s; } .wvd-tcard:hover { transform: translateY(-4px); border-color: var(--line); box-shadow: 0 24px 44px -30px rgba(42,21,48,.5); } .wvd-tcard-scene { aspect-ratio: 4/5; position: relative; } .wvd-tcard-scene .wvd-studio { position: absolute; inset: 0; } .wvd-tcard-avail { position: absolute; left: .7rem; top: .7rem; z-index: 4; display: inline-flex; align-items: center; gap: .36rem; background: rgba(250,246,241,.94); backdrop-filter: blur(4px); padding: .26rem .55rem; border-radius: 7px; font-size: .68rem; font-weight: 500; color: var(--ink); } .wvd-tcard-avail .wvd-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sage); } .wvd-tcard-body { padding: .95rem 1.05rem 1.1rem; display: flex; flex-direction: column; flex: 1; } .wvd-tcard-category { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--clay); font-weight: 600; } .wvd-tcard-name { font-family: var(--wv-serif); font-weight: 440; font-size: 1.22rem; line-height: 1.08; letter-spacing: -.012em; margin: .25rem 0 .35rem; font-feature-settings: "ss01"; } .wvd-tcard-name a { color: inherit; text-decoration: none; } .wvd-tcard-name a::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: 14px; } .wvd-tcard:hover .wvd-tcard-name { color: var(--plum); } .wvd-tcard-region { font-size: .8rem; color: var(--ink-soft); display: flex; align-items: center; gap: .34rem; } .wvd-tcard-region svg { width: 12px; height: 12px; color: var(--ink-faint); } .wvd-tcard-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin: .6rem 0 .7rem; flex: 1; align-content: flex-start; } .wvd-tcard-tag { font-size: .68rem; color: var(--plum); background: var(--oat-2); border-radius: 5px; padding: .16rem .44rem; } .wvd-tcard-price { padding-top: .65rem; border-top: 1px solid var(--line-soft); font-size: .82rem; color: var(--ink-soft); } .wvd-tcard-price b { font-family: var(--wv-serif); font-weight: 500; font-size: .98rem; color: var(--ink); } /* ── FAQ section — two-column accordion ─────────────── */ .wv-faq-section { padding-block: clamp(2.5rem, 5vw, 4rem); } .wv-faq-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.8rem, 3vw, 2.5rem); align-items: start; } .wv-faq-intro { max-width: 22rem; } .wv-faq-intro .wv-eyebrow { margin-bottom: .85rem; } .wvd .wv-faq-heading { color: var(--ink); } .wv-faq-lede { margin: 1rem 0 0; font-size: .95rem; line-height: 1.6; color: var(--ink-soft); max-width: 34ch; } .wv-faq-accordion { border-top: 1px solid var(--line); } .wv-faq-row { border-bottom: 1px solid var(--line); } .wv-faq-trigger { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem; padding: 1.15rem 0; border: none; background: none; cursor: pointer; text-align: left; color: inherit; font: inherit; } .wv-faq-trigger:hover .wv-faq-q { color: var(--plum); } .wvd .wv-faq-trigger:hover .wv-faq-q { color: var(--plum); } .wv-faq-q { font-family: var(--wv-sans); font-weight: 500; font-size: .98rem; line-height: 1.45; color: var(--ink); transition: color .2s var(--wv-ease); } .wv-faq-chevron { flex-shrink: 0; margin-top: .2rem; color: var(--ink-faint); transition: transform .28s var(--wv-ease-soft), color .2s var(--wv-ease); } .wv-faq-chevron.is-open { transform: rotate(180deg); color: var(--ink-soft); } .wv-faq-panel { display: grid; transition: grid-template-rows .28s var(--wv-ease-soft); } .wv-faq-panel-inner { overflow: hidden; } .wv-faq-a { margin: 0 0 1.15rem; padding-right: 1.5rem; font-size: .92rem; line-height: 1.65; color: var(--ink-soft); } @media (min-width: 900px) { .wv-faq-grid { grid-template-columns: minmax(0, 0.36fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem); } .wv-faq-intro { position: sticky; top: 5.5rem; } } @media (prefers-reduced-motion: reduce) { .wv-faq-panel, .wv-faq-chevron { transition: none; } } /* Page mastheads — gap below intro = gap above breadcrumb (not vendor detail) */ .wvd .wv-index-head, .wvd .wvd-jnl-masthead, .wvd .wv-atlas-hero, .wvd .wvd-cat-head, .wvd .wvd-article-header { padding-bottom: var(--wvd-page-head-gap); } .wvd .wvd-article-byline { padding-bottom: 0; } /* ── Categories header split layout ────────────────── */ .wvd-atlas-split { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2rem; } .wvd-atlas-fan { padding-top: calc(var(--wv-nav-h, 64px) + var(--wvd-page-head-gap)); } @media (max-width: 768px) { .wvd-atlas-split { grid-template-columns: 1fr; } .wvd-atlas-fan { display: none; } } /* ── Category cover fan ───────────────────────────── */ .wvd-cat-fan { display: flex; align-items: center; } .wvd-cat-fan-card { position: relative; width: 160px; height: 192px; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 24px -4px rgba(36,27,34,.12); transition: margin .5s var(--wv-ease), transform .5s var(--wv-ease), box-shadow .5s var(--wv-ease); } .wvd-cat-fan-0 { margin-right: -70px; transform: rotate(-14deg) scale(.95); z-index: 1; } .wvd-cat-fan-1 { z-index: 3; transform: scale(1.05); box-shadow: 0 8px 32px -4px rgba(36,27,34,.2); } .wvd-cat-fan-2 { margin-left: -70px; transform: rotate(14deg) scale(.95); z-index: 2; } .wvd-atlas-split:hover .wvd-cat-fan-0 { margin-right: 5px; transform: rotate(0) scale(1); } .wvd-atlas-split:hover .wvd-cat-fan-1 { transform: scale(1); box-shadow: 0 6px 24px -4px rgba(36,27,34,.14); } .wvd-atlas-split:hover .wvd-cat-fan-2 { margin-left: 5px; transform: rotate(0) scale(1); } /* ── VendorVenuesTwinTie — bottom CTA spacing (content via InfoBanner) ── */ .wvd-venues-twintie { padding-bottom: clamp(2.5rem, 5vw, 4.5rem); } /* ── Journal masthead ─────────────────────────────── */ .wvd-jnl-kicker { font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--clay); display: inline-flex; align-items: center; gap: .7rem; margin-bottom: 1.1rem; } .wvd-jnl-kicker::before { content: ""; width: 22px; height: 1px; background: var(--clay); } /* Intro copy — sans lede (categories, journal, compare, index, etc.) */ .wvd :is(.wv-atlas-hero, .wvd-jnl-masthead, .wvd-cat-head, .wv-index-head, .wvd-page-head-col, .wvd-sec-head) .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; letter-spacing: normal; } /* Search-results header affordance — "Clear search" under the lede */ .wvd .wvd-page-head-action { margin-top: 1rem; } .wvd .wvd-link { color: var(--plum); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; font-size: .9rem; } .wvd .wvd-link:hover { color: var(--plum-deep); } /* Inline meta row (detail identity, featured card) */ .wvd-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: .24rem .66rem; } /* ── Journal featured lead ───────────────────────── */ .wvd-jnl-featured { padding-bottom: clamp(2rem, 4vw, 3rem); } .wvd-feat-card { display: block; background: var(--paper); border: 1px solid var(--line-soft); border-radius: 18px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .35s var(--wv-ease), box-shadow .35s var(--wv-ease), border-color .3s; } .wvd-feat-has-img { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; } .wvd-feat-img { position: relative; min-height: 340px; overflow: hidden; } .wvd-feat-img img { transition: transform .6s var(--wv-ease); } .wvd-feat-card:hover .wvd-feat-img img { transform: scale(1.05); } @media (max-width: 880px) { .wvd-feat-has-img { grid-template-columns: 1fr; } .wvd-feat-img { min-height: 240px; } } .wvd-feat-card:hover { transform: translateY(-4px); border-color: var(--line); box-shadow: 0 32px 60px -36px rgba(42,21,48,.55); } .wvd-feat-body { padding: clamp(1.8rem, 3vw, 2.8rem); } .wvd-feat-tag { font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--clay); display: flex; align-items: center; gap: .6rem; } .wvd-feat-pill { background: var(--plum); color: var(--oat); padding: .18rem .5rem; border-radius: 5px; letter-spacing: .1em; } .wvd-feat-title { font-family: var(--wv-serif); font-weight: 400; font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.12; letter-spacing: -.018em; margin: .9rem 0 .7rem; font-feature-settings: "ss01"; } .wvd-feat-card:hover .wvd-feat-title { color: var(--plum); } .wvd-feat-excerpt { font-size: .98rem; color: var(--ink-soft); line-height: 1.6; max-width: 54ch; } .wvd-feat-meta { display: flex; align-items: center; gap: .7rem; margin-top: 1.3rem; font-size: .82rem; color: var(--ink-faint); } .wvd-feat-av { width: 32px; height: 32px; border-radius: 50%; background: var(--plum); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--wv-serif); font-size: .78rem; color: var(--cream, #F2E4CF); } .wvd-feat-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-faint); } /* ── Journal collection ──────────────────────────── */ .wvd-jnl-collection { padding-bottom: clamp(2.5rem, 5vw, 4.5rem); } .wvd-jnl-coll-head { padding-top: 2rem; border-top: 1px solid var(--line); margin-bottom: 1.5rem; } /* ── Journal article cards (shared by index + article "more" footer) ── */ .wvd-jnl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } .wvd-jnl-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line-soft); border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .3s var(--wv-ease), box-shadow .3s var(--wv-ease), border-color .3s; } .wvd-jnl-card:hover { transform: translateY(-4px); border-color: var(--line); box-shadow: 0 24px 44px -30px rgba(42,21,48,.5); } .wvd-jnl-card-img { position: relative; aspect-ratio: 3/2; overflow: hidden; } .wvd-jnl-card-img img { transition: transform .5s var(--wv-ease); } .wvd-jnl-card:hover .wvd-jnl-card-img img { transform: scale(1.05); } .wvd-jnl-card-body { padding: 1.1rem 1.2rem 1.25rem; display: flex; flex-direction: column; flex: 1; } .wvd-jnl-card-kicker { font-size: .64rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--clay); } .wvd-jnl-card-title { font-family: var(--wv-serif); font-weight: 430; font-size: 1.42rem; line-height: 1.22; letter-spacing: -.016em; font-feature-settings: "ss01"; margin: .35rem 0 .5rem; transition: color .2s; } .wvd-jnl-card:hover .wvd-jnl-card-title { color: var(--plum); } .wvd-jnl-card-excerpt { font-size: .86rem; color: var(--ink-soft); flex: 1; line-height: 1.6; min-height: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .wvd-jnl-card-meta { font-size: .76rem; color: var(--ink-faint); margin-top: 1.35rem; padding-top: .75rem; border-top: 1px solid var(--line-soft); display: flex; align-items: center; gap: .5rem; } .wvd-jnl-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-faint); } @media (max-width: 880px) { .wvd-jnl-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .wvd-jnl-grid { grid-template-columns: 1fr; } } /* ── Article detail ───────────────────────────────── */ .wvd-article { max-width: 680px; margin: 0 auto; padding-top: 0; } .wvd-article-kicker { font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--clay); display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1rem; } .wvd-article-kicker::before { content: ""; width: 18px; height: 1px; background: var(--clay); } .wvd-article-header h1 { font-family: var(--wv-serif); font-weight: 380; font-size: clamp(2.1rem, 5.5vw, 3.2rem); line-height: 1.08; letter-spacing: -.02em; font-feature-settings: "ss01"; color: var(--ink); } .wvd-article-lede { font-family: var(--wv-serif); font-weight: 340; font-size: clamp(1.15rem, 2.4vw, 1.4rem); line-height: 1.5; color: var(--ink-soft); margin-top: 1.1rem; } .wvd-article-byline { display: flex; align-items: center; gap: .8rem; margin-top: 1.8rem; padding-bottom: 1.8rem; border-bottom: 1px solid var(--line); } .wvd-by-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--plum); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--wv-serif); font-size: 1rem; color: var(--cream, #F2E4CF); } .wvd-by-name { font-size: .9rem; font-weight: 600; } .wvd-by-sub { font-size: .8rem; color: var(--ink-faint); } .wvd-by-read { margin-left: auto; font-size: .8rem; color: var(--ink-faint); } .wvd-article-hero { position: relative; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; margin: 2rem 0 .6rem; } .wvd-article-body { max-width: 680px; padding: 2rem 0 clamp(2rem, 4vw, 3rem); } .wvd-article-body h2 { font-family: var(--wv-serif); font-weight: 440; font-size: clamp(1.4rem, 3vw, 1.75rem); line-height: 1.2; letter-spacing: -.012em; margin: 2.6rem 0 1rem; font-feature-settings: "ss01"; } .wvd-article-body h3 { font-family: var(--wv-serif); font-weight: 460; font-size: 1.18rem; margin: 1.9rem 0 .7rem; } .wvd-article-body p { margin-bottom: 1.3rem; } .wvd-article-body p:first-of-type { font-size: 1.08rem; } .wvd-article-body strong { font-weight: 600; } .wvd-article-body em { font-style: italic; } /* share row */ .wvd-share-row { display: flex; align-items: center; gap: .9rem; padding: 1.5rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .wvd-share-row .wvd-sr-label { font-size: .84rem; color: var(--ink-faint); } .wvd-share-row button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); display: flex; align-items: center; justify-content: center; transition: border-color .2s, transform .14s; } .wvd-share-row button:hover { border-color: var(--ink); } .wvd-share-row button:active { transform: scale(.92); } .wvd-share-row button svg { width: 16px; height: 16px; color: var(--ink-soft); } /* more from the journal */ .wvd-more-journal { max-width: 1080px; margin: 3.5rem auto 0; padding: 2.6rem 0 clamp(2.5rem, 5vw, 4.5rem); border-top: 1px solid var(--line); } .wvd-more-journal-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; } .wvd-more-journal-head a { font-size: .86rem; font-weight: 500; color: var(--plum); } .wvd-compare-head { padding-bottom: clamp(1.4rem, 3vw, 2.2rem); } /* ── Section titles (homepage bands, carousel, FAQ) ── */ .wvd-sec-head { max-width: 46ch; margin-bottom: clamp(1.4rem, 2.5vw, 2rem); } .wvd-sec-head.is-flush { margin-bottom: 0; } .wvd-sec-head h1, .wvd-sec-head h2, .wvd .wv-faq-heading { font-family: var(--wv-serif); font-weight: 350; letter-spacing: -.02em; font-size: var(--wvd-title-section); line-height: 1.06; margin-top: .7rem; font-feature-settings: "ss01"; } /* Subsection titles — detail, related grid, journal */ .wvd-sec h2, .wvd-more-head h2, .wvd-jnl-coll-head h2, .wvd-more-journal-head h2 { font-family: var(--wv-serif); font-weight: 440; letter-spacing: -.02em; font-size: var(--wvd-title-subsection); line-height: 1.06; font-feature-settings: "ss01"; } .wvd-sec h2, .wvd-more-head h2 { margin-top: .7rem; } .wvd-jnl-coll-head h2, .wvd-more-journal-head h2 { margin-top: 0; } .wvd-sec-head p:not(.wv-lede) { margin-top: .7rem; color: var(--ink-soft); } /* ── Responsive ────────────────────────────────────── */ @media (max-width: 1040px) { .wvd-disc-grid, .wvd-honesty-grid, .wvd-team-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 860px) { .wvd-hero-grid { grid-template-columns: 1fr; } .wvd-hero-copy { align-self: stretch; } .wvd-collage { max-width: 520px; margin: 0 auto; gap: 20px; } .wvd-cc { aspect-ratio: 3/2; min-height: 200px; } .wvd-cc.wvd-left { transform: rotate(-2.5deg); } .wvd-cc.wvd-right { transform: rotate(2.5deg); } .wvd-featured-inner { grid-template-columns: 1fr; } .wvd-featured-scene { min-height: 260px; } } @media (max-width: 560px) { .wvd-disc-grid, .wvd-team-grid { grid-template-columns: 1fr 1fr; gap: .8rem; } .wvd-honesty-grid { grid-template-columns: 1fr; } .wvd-hero-stats { gap: 1.1rem; } .wvd-collage { flex-direction: column; gap: 20px; max-width: min(100%, 440px); margin-inline: auto; } .wvd-cc { aspect-ratio: 3/2; min-height: 180px; } .wvd-cc.wvd-left { transform: rotate(-2.5deg); } .wvd-cc.wvd-right { transform: rotate(2.5deg); } } /* ── Footer — shared structure, vendor accent ───────── */ .wvd .wv-f-col h4 { color: var(--clay); } .wvd .wv-f-col h4::before { background: var(--clay); } .wvd .wv-f-col a:hover { color: var(--plum); } .wvd .wv-legal-footer a:hover, .wvd .wv-legal-host { color: var(--plum); } /* Social icons — vendors only */ .wv-f-social { display: flex; align-items: center; gap: .55rem; margin-top: .85rem; } .wv-f-social a { width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line); background: var(--paper); display: flex; align-items: center; justify-content: center; color: var(--ink-soft); transition: color .2s var(--wv-ease), border-color .2s var(--wv-ease), background .2s var(--wv-ease); } .wv-f-social a:hover { color: var(--plum); border-color: var(--ink-faint); background: var(--oat); } .wv-f-social a svg { width: 16px; height: 16px; } /* ── /my-wedding — vendors entry palette ───────────── */ .wvd .mw-masthead .mw-title em { color: var(--clay); } .wvd .mw-main .mw-bd-ok { color: var(--plum); } .wvd .mw-main .mw-bd-close { color: var(--clay); } .wvd .mw-main .mw-bd-firm { background: var(--plum); } .wvd .mw-main .mw-bd-est { background: repeating-linear-gradient(45deg, var(--clay-soft) 0 5px, rgba(221,162,113,.45) 5px 10px); } .wvd .mw-main .mw-bd-legend i.firm { background: var(--plum); } .wvd .mw-main .mw-bd-legend i.est { background: repeating-linear-gradient(45deg, var(--clay-soft) 0 3px, rgba(221,162,113,.45) 3px 6px); } .wvd .mw-main .mw-bd-tag.confirmed { background: rgba(74,42,82,.14); color: var(--plum); } .wvd .mw-main .mw-bd-tag.estimated { background: rgba(155,82,48,.16); color: var(--clay); } .wvd .mw-main .mw-bd-set button { color: var(--plum); } .wvd .mw-main .mw-ai-flag, .wvd .mw-main .mw-anchor-kicker, .wvd .mw-main .mw-anchor-kicker::before, .wvd .mw-main .mw-anchor-link { color: var(--venues-teal); } .wvd .mw-main .mw-anchor-kicker::before { background: var(--venues-teal); } .wvd .mw-main .mw-st-quoted .mw-status-step i.on { background: var(--clay); } .wvd .mw-main .mw-st-quoted .mw-status-label { color: var(--clay); } .wvd .mw-main .mw-st-booked .mw-status-step i.on { background: var(--plum); } .wvd .mw-main .mw-st-booked .mw-status-label { color: var(--plum); } .wvd .mw-main .mw-st-booked { background: rgba(74,42,82,.1); border-color: rgba(74,42,82,.28); } .wvd .mw-main .mw-status-note { color: var(--plum); } .wvd .mw-main .mw-sm-check { color: var(--plum); } .wvd .mw-main .mw-pg-count b { color: var(--plum); } .wvd .mw-main .mw-pg-bar i.on { background: linear-gradient(90deg, var(--plum), var(--clay)); } .wvd .mw-main .mw-role.filled .mw-role-ico { background: rgba(74,42,82,.12); } .wvd .mw-main .mw-role.filled .mw-role-ico svg { color: var(--plum-mid); } .wvd .mw-main .mw-role.filled:hover .mw-role-name { color: var(--plum); } .wvd .mw-main .mw-role-name a:focus-visible::after { outline-color: var(--clay); } .wvd .mw-main .mw-role-find a { color: var(--plum); background: rgba(74,42,82,.1); } .wvd .mw-main .mw-role-find a:hover { background: rgba(74,42,82,.18); } .wvd .mw-main .mw-av--a { background: var(--plum); } .wvd .mw-main .mw-av--b { background: var(--plum-mid); } .wvd .mw-main .mw-av--c { background: var(--clay); } .wvd .mw-main .mw-nextstep { background: linear-gradient(120deg, var(--plum-deep), var(--plum-mid)); } .wvd .mw-main .mw-nextstep::before { background: radial-gradient(ellipse at 80% 0%, rgba(221,162,113,.26), transparent 60%); } .wvd .mw-main .mw-btn-step { background: var(--clay-soft); color: var(--plum-deep); } .wvd .mw-main .mw-btn-step:hover { background: #E8BE8F; } /* ================================================================ Vendor detail page — /vendor/[slug] ================================================================ */ /* ── Breadcrumb ──────────────────────────────────────── */ .wvd-crumb { padding-top: calc(var(--wv-nav-h, 64px) + var(--wvd-page-head-gap)); padding-bottom: clamp(.6rem, 1.2vw, 1rem); } .wvd-crumb-detail { padding-top: calc(var(--wv-nav-h, 64px) + 1.1rem); padding-bottom: 1.1rem; } .wvd-crumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-size: .8rem; color: var(--ink-faint); } .wvd-crumb a:hover { color: var(--ink-soft); } .wvd-crumb-sep { opacity: .5; } .wvd-crumb [aria-current] { color: var(--ink-soft); } /* ── Hero ────────────────────────────────────────────── */ .wvd-detail-hero { padding-top: 0; } .wvd-hero-stage { position: relative; border-radius: 18px; overflow: hidden; background: var(--oat-2); aspect-ratio: 16/9; } /* Visual: grid gallery */ .wvd-grid-gallery { display: grid; gap: .5rem; border-radius: 18px; overflow: hidden; } .wvd-grid-cell { position: relative; overflow: hidden; background: var(--oat-2); border-radius: 18px; cursor: pointer; } .wvd-grid-cell img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--wv-ease); } .wvd-grid-cell:hover img { transform: scale(1.04); } /* 1 image — single full-width */ .wvd-grid-g1 { grid-template-columns: 1fr; aspect-ratio: 16/9; } /* 2 images — side by side */ .wvd-grid-g2 { grid-template-columns: 1fr 1fr; aspect-ratio: 2.4/1; } /* 3 images — large left, two stacked right */ .wvd-grid-g3 { grid-template-columns: 3fr 2fr; grid-template-rows: 1fr 1fr; aspect-ratio: 2.2/1; } .wvd-grid-g3 .wvd-grid-cell:first-child { grid-row: 1 / -1; } /* 4+ images — large left, top-right tall + two small bottom-right */ .wvd-grid-g4 { grid-template-columns: 3fr 1fr 1fr; grid-template-rows: 1.4fr 1fr; aspect-ratio: 2.2/1; } .wvd-grid-g4 .wvd-grid-cell:first-child { grid-row: 1 / -1; } .wvd-grid-g4 .wvd-grid-cell:nth-child(2) { grid-column: 2 / -1; } /* Overflow badge */ .wvd-grid-overflow { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; background: rgba(15,10,18,.45); backdrop-filter: blur(2px); color: #fff; } .wvd-grid-overflow svg { width: 24px; height: 24px; opacity: .85; } .wvd-grid-overflow span { font-size: .95rem; font-weight: 600; letter-spacing: .02em; } @media (min-width: 601px) { .wvd-grid-overflow--mobile { display: none; } } /* All cells share uniform corners — gallery overflow:hidden clips the outer edges */ @media (max-width: 600px) { .wvd-grid-gallery { overflow: visible; gap: .45rem; } .wvd-grid-g1 { aspect-ratio: 3/2; } .wvd-grid-g2 { grid-template-columns: 1fr 1fr; aspect-ratio: auto; } .wvd-grid-g2 .wvd-grid-cell { aspect-ratio: 1 / 1; } .wvd-grid-g3, .wvd-grid-g4 { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; aspect-ratio: auto; } .wvd-grid-g3 .wvd-grid-cell:first-child, .wvd-grid-g4 .wvd-grid-cell:first-child { grid-row: 1; grid-column: 1 / -1; aspect-ratio: 3/2; } .wvd-grid-g3 .wvd-grid-cell:nth-child(2), .wvd-grid-g4 .wvd-grid-cell:nth-child(2) { display: block; grid-row: 2; grid-column: 1; aspect-ratio: 1 / 1; } .wvd-grid-g3 .wvd-grid-cell:nth-child(3), .wvd-grid-g4 .wvd-grid-cell:nth-child(3) { display: block; grid-row: 2; grid-column: 2; aspect-ratio: 1 / 1; } .wvd-grid-g4 .wvd-grid-cell:nth-child(4) { display: none; } .wvd-grid-gallery .wvd-grid-cell { border-radius: 16px !important; } .wvd-grid-overflow--desktop { display: none; } } /* ── Image lightbox ───────────────────────────────────── */ .wvd-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(10,6,12,.92); backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; animation: wvd-lb-in .3s var(--wv-ease); } @keyframes wvd-lb-in { from { opacity: 0; } to { opacity: 1; } } .wvd-lb-content { max-width: min(90vw, 1200px); max-height: 85vh; animation: wvd-lb-img-in .35s var(--wv-ease); } @keyframes wvd-lb-img-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } } .wvd-lb-content img { display: block; max-width: 100%; max-height: 85vh; object-fit: contain; border-radius: 12px; } .wvd-lb-fade { animation: wvd-lb-fade-in .3s var(--wv-ease); } @keyframes wvd-lb-fade-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } } .wvd-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 46px; height: 46px; border: none; border-radius: 50%; background: rgba(255,255,255,.12); backdrop-filter: blur(6px); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s var(--wv-ease), transform .2s var(--wv-ease); opacity: .7; } .wvd-lb-nav:hover { background: rgba(255,255,255,.25); opacity: 1; transform: translateY(-50%) scale(1.08); } .wvd-lb-nav:active { transform: translateY(-50%) scale(.95); } .wvd-lb-nav svg { width: 20px; height: 20px; } .wvd-lb-nav.prev { left: 1.2rem; } .wvd-lb-nav.next { right: 1.2rem; } .wvd-lb-counter { position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%); background: rgba(255,255,255,.1); backdrop-filter: blur(6px); border-radius: 8px; color: rgba(255,255,255,.7); font-size: .82rem; font-weight: 500; padding: .3rem .8rem; letter-spacing: .05em; } .wvd-lb-close { position: absolute; top: 1.2rem; right: 1.2rem; z-index: 4; width: 42px; height: 42px; border: none; border-radius: 50%; background: rgba(255,255,255,.1); backdrop-filter: blur(6px); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s var(--wv-ease), transform .2s var(--wv-ease); opacity: .6; } .wvd-lb-close:hover { background: rgba(255,255,255,.22); opacity: 1; transform: scale(1.08); } .wvd-lb-close:active { transform: scale(.92); } .wvd-lb-close svg { width: 20px; height: 20px; } @media (max-width: 600px) { .wvd-lb-nav { width: 38px; height: 38px; } .wvd-lb-nav.prev { left: .6rem; } .wvd-lb-nav.next { right: .6rem; } .wvd-lb-close { top: .8rem; right: .8rem; width: 36px; height: 36px; } } /* Visual: portfolio gallery */ .wvd-pf-track { display: flex; height: 100%; transition: transform .5s var(--wv-ease); } .wvd-pf-frame { min-width: 100%; height: 100%; position: relative; } .wvd-pf-frame .wvd-studio { position: absolute; inset: 0; } .wvd-pf-img { width: 100%; height: 100%; object-fit: cover; } .wvd-pf-credit { position: absolute; left: 1rem; bottom: 1rem; z-index: 4; background: rgba(36,27,34,.6); backdrop-filter: blur(5px); border-radius: 7px; padding: .34rem .7rem; font-size: .72rem; color: rgba(255,255,255,.92); } .wvd-pf-credit b { font-weight: 600; } .wvd-pf-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 42px; height: 42px; border-radius: 50%; border: none; background: rgba(250,246,241,.92); backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; transition: background .2s, transform .15s; cursor: pointer; } .wvd-pf-nav:hover { background: #fff; } .wvd-pf-nav:active { transform: translateY(-50%) scale(.92); } .wvd-pf-nav.prev { left: 1rem; } .wvd-pf-nav.next { right: 1rem; } .wvd-pf-nav svg { width: 18px; height: 18px; color: var(--ink); } .wvd-pf-dots { position: absolute; left: 50%; transform: translateX(-50%); bottom: 1rem; z-index: 5; display: flex; gap: .4rem; } .wvd-pf-dots button { width: 7px; height: 7px; border-radius: 50%; border: none; padding: 0; background: rgba(250,246,241,.5); transition: background .2s, width .2s; cursor: pointer; } .wvd-pf-dots button.on { background: #fff; width: 22px; border-radius: 4px; } .wvd-pf-thumbs { display: flex; gap: .6rem; margin-top: .7rem; overflow-x: auto; padding-bottom: .3rem; -webkit-overflow-scrolling: touch; } .wvd-pf-thumbs button { flex-shrink: 0; width: 92px; aspect-ratio: 4/3; border-radius: 9px; overflow: hidden; border: 2px solid transparent; padding: 0; position: relative; transition: border-color .2s; cursor: pointer; } .wvd-pf-thumbs button.on { border-color: var(--plum); } .wvd-pf-thumbs button .wvd-studio { position: absolute; inset: 0; } .wvd-pf-thumb-img { width: 100%; height: 100%; object-fit: cover; } .wvd-person-monogram { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--wv-serif); font-size: 2rem; color: var(--plum); background: var(--oat-2); border-radius: 50%; } /* Performance: quote hero */ .wvd-perf-hero { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem; } .wvd-perf-hero .wvd-studio, .wvd-perf-hero .wvd-hero-bg { position: absolute; inset: 0; z-index: 0; } .wvd-hero-bg { width: 100%; height: 100%; object-fit: cover; } .wvd-perf-quote { position: relative; z-index: 2; max-width: 30ch; } .wvd-pq-mark { font-family: var(--wv-serif); font-size: 3rem; line-height: .4; color: var(--clay-soft); } .wvd-perf-quote p { font-family: var(--wv-serif); font-style: italic; font-weight: 330; color: var(--cream); font-size: clamp(1.1rem, 2.4vw, 1.7rem); line-height: 1.4; margin-top: .6rem; } .wvd-pq-by { margin-top: .9rem; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(242,228,207,.7); font-weight: 600; } .wvd-perf-sample { position: relative; z-index: 2; margin-top: 1.3rem; display: flex; align-items: center; gap: .6rem; background: rgba(36,27,34,.42); backdrop-filter: blur(6px); border-radius: 999px; padding: .5rem 1rem; border: 1px dashed rgba(242,228,207,.4); } .wvd-ps-ico { width: 30px; height: 30px; border-radius: 50%; background: rgba(242,228,207,.16); display: flex; align-items: center; justify-content: center; } .wvd-ps-ico svg { width: 14px; height: 14px; color: var(--cream); } .wvd-ps-label { font-size: .8rem; color: rgba(242,228,207,.82); } .wvd-ps-label b { color: var(--cream); font-weight: 600; } /* Logistics: split hero */ .wvd-log-hero { --log-pad: 8px; --log-inner-r: calc(18px - var(--log-pad)); position: absolute; inset: 0; display: grid; grid-template-columns: 1.1fr .9fr; background: var(--plum-deep); padding: var(--log-pad); gap: 0; } .wvd-log-scene { position: relative; border-radius: var(--log-inner-r); overflow: hidden; } .wvd-log-scene .wvd-studio, .wvd-log-scene .wvd-hero-bg { position: absolute; inset: 0; } .wvd-log-panel { padding: clamp(1rem, 2.5vw, 1.8rem); display: flex; flex-direction: column; justify-content: center; gap: .85rem; } .wvd-log-fact { display: flex; flex-direction: column; gap: .1rem; } .wvd-lf-t { font-family: var(--wv-serif); font-size: 1.05rem; color: var(--cream); font-feature-settings: "ss01"; } .wvd-lf-s { font-size: .8rem; color: rgba(238,231,226,.62); } /* ── Identity row ────────────────────────────────────── */ .wvd-identity { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem 2rem; align-items: end; padding-top: 1.6rem; position: relative; z-index: 2; } .wvd-id-row { display: flex; align-items: center; gap: 1.2rem; } .wvd-id-medallion { flex: 0 0 auto; width: 110px; height: 110px; min-width: 110px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; border: 2px solid rgba(250,246,241,.4); background: var(--paper); box-shadow: 0 4px 14px rgba(15,10,18,.15); box-sizing: border-box; } .wvd-id-medallion img { display: block; width: 100%; height: 100%; object-fit: cover; } .wvd-id-medallion.is-logo img { width: 100%; height: 100%; border-radius: 50%; object-fit: contain; } .wvd-id-medallion.is-monogram { background: var(--plum); border-color: rgba(250,246,241,.5); } .wvd-id-medallion.is-monogram span { font-family: var(--wv-serif); font-weight: 420; font-size: 1.3rem; color: var(--cream); font-feature-settings: "ss01"; line-height: 1; } .wvd-id-category { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--clay); font-weight: 600; } .wvd-id-name { font-family: var(--wv-serif); font-weight: 380; letter-spacing: -.022em; font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1.02; margin: .35rem 0 .1rem; font-feature-settings: "ss01"; } .wvd-id-meta { margin-top: .5rem; font-size: .88rem; color: var(--ink-soft); } .wvd-id-meta span { display: flex; align-items: center; gap: .34rem; } .wvd-id-meta svg { width: 14px; height: 14px; color: var(--ink-faint); } .wvd-id-meta-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-faint); opacity: .5; align-self: center; flex-shrink: 0; } .wvd-id-actions { display: flex; gap: .6rem; align-items: center; } .wvd-btn { --growth: 0; display: inline-flex; align-items: center; gap: .5rem; border-radius: 10px; font-size: .92rem; font-weight: 500; padding: .75rem 1.3rem; border: none; text-decoration: none; transition: background .2s var(--wv-ease), transform .14s; cursor: pointer; } .wvd-btn:hover, .wvd-btn:focus-visible { --growth: 1; } .wvd-btn:active { transform: scale(.98); } .wvd-btn svg { width: 15px; height: 15px; } .wvd-btn-plum { background: var(--plum); color: var(--oat); } .wvd-btn-plum:hover { background: var(--plum-deep); } .wvd-save-btn { width: 46px; height: 46px; border-radius: 11px; border: 1px solid var(--line); background: var(--paper); display: flex; align-items: center; justify-content: center; transition: border-color .2s, transform .15s; cursor: pointer; } .wvd-save-btn:hover { border-color: var(--rose); } .wvd-save-btn:active { transform: scale(.94); } .wvd-save-btn svg { width: 19px; height: 19px; color: var(--ink-soft); fill: none; transition: color .2s, fill .2s; } .wvd-save-btn.saved { border-color: var(--rose); } .wvd-save-btn.saved svg { color: var(--rose); fill: var(--rose); } /* ── Claim card (unclaimed profiles) ─────────────────── */ .wvd-claim { margin-top: 1.4rem; } .wvd-claim-card { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); padding: 1.1rem 1.3rem; box-shadow: 0 2px 10px rgba(15,10,18,.05); } .wvd-claim-text { flex: 1 1 16rem; min-width: 0; } .wvd-claim-text p { margin: .3rem 0 0; font-size: .92rem; line-height: 1.5; color: var(--ink-soft); } .wvd-claim-eyebrow { font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--plum); } .wvd-claim-cta { flex: 0 0 auto; } .wvd-claim-tick { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(250,246,241,.22); } .wvd-claim-tick svg { width: 11px; height: 11px; } /* ── Body layout ─────────────────────────────────────── */ .wvd-layout { display: grid; grid-template-columns: 1fr 340px; gap: clamp(1.8rem, 4vw, 3.5rem); padding-top: clamp(1.8rem, 3.5vw, 2.8rem); padding-bottom: clamp(3rem, 6vw, 5rem); align-items: start; } .wvd-rail { position: sticky; top: 84px; } .wvd-sec { padding-bottom: clamp(1.8rem, 3.5vw, 2.6rem); margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem); border-bottom: 1px solid var(--line-soft); } .wvd-sec:last-child, .wvd-sec.is-flush { border-bottom: none; margin-bottom: 0; } .wvd-sec p { margin-top: .8rem; font-size: .96rem; line-height: 1.7; color: var(--ink-soft); } .wvd-sec p strong { color: var(--ink); font-weight: 600; } .wvd-sec p.wvd-lede { font-family: var(--wv-serif); font-weight: 340; font-size: clamp(1.03rem, 2.1vw, 1.33rem); line-height: 1.5; color: var(--ink-soft); } .wvd-sec p + p { margin-top: 1rem; } .wvd-sec .wv-step-flow { margin-top: 1.2rem; } /* Tags */ .wvd-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; } .wvd-tag { font-size: .8rem; color: var(--plum); background: var(--oat-2); border-radius: 7px; padding: .32rem .7rem; text-decoration: none; transition: background .2s, color .2s; } a.wvd-tag:hover { background: var(--plum); color: var(--oat); } /* Person */ .wvd-person { display: flex; gap: 1.3rem; margin-top: 1.1rem; align-items: flex-start; } .wvd-person-photo { width: 130px; flex-shrink: 0; aspect-ratio: 4/5; border-radius: 13px; overflow: hidden; position: relative; } .wvd-person-photo .wvd-studio { position: absolute; inset: 0; } .wvd-person-photo img { display: block; width: 100%; height: 100%; object-fit: cover; } .wvd-person-bio p { margin-top: 0; } .wvd-person-bio p + p { margin-top: .7rem; } /* Included */ .wvd-incl { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: 1.1rem; } .wvd-incl-item { background: var(--paper); border: 1px solid var(--line-soft); border-radius: 11px; padding: .85rem .95rem; } .wvd-ii-t { font-weight: 500; font-size: .92rem; } .wvd-ii-s { font-size: .82rem; color: var(--ink-faint); margin-top: .05rem; } /* Pricing */ .wvd-pricing { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 1.3rem 1.4rem; margin-top: 1rem; } .wvd-price-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--line-soft); } .wvd-price-row:last-of-type { border-bottom: none; } .wvd-pr-label { font-size: .92rem; color: var(--ink-soft); } .wvd-pr-sub { display: block; font-size: .78rem; color: var(--ink-faint); } .wvd-pr-amt { font-family: var(--wv-serif); font-weight: 500; font-size: 1.15rem; white-space: nowrap; font-feature-settings: "ss01"; } .wvd-price-total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--line); } .wvd-pt-label { font-size: .86rem; font-weight: 500; } .wvd-pt-sub { display: block; font-size: .78rem; color: var(--ink-faint); font-weight: 400; } .wvd-pt-amt { font-family: var(--wv-serif); font-weight: 500; font-size: 1.5rem; color: var(--plum); font-feature-settings: "ss01"; } .wvd-price-note { font-size: .82rem; color: var(--ink-faint); margin-top: .9rem; display: flex; gap: .45rem; align-items: flex-start; } .wvd-price-note svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 3px; } /* Coverage */ .wvd-cov { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.1rem; } .wvd-cov-card { flex: 1; min-width: 170px; background: var(--paper); border: 1px solid var(--line-soft); border-radius: 12px; padding: 1rem 1.1rem; } .wvd-cv-label { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; } .wvd-cv-val { font-family: var(--wv-serif); font-size: 1.1rem; margin-top: .3rem; font-feature-settings: "ss01"; } .wvd-cv-sub { font-size: .83rem; color: var(--ink-soft); margin-top: .2rem; } /* Availability */ .wvd-avail-line, .wvd-av-open, .wvd-av-held, .wvd-av-booked { display: inline-flex; align-items: center; gap: .45rem; margin-top: .3rem; font-size: .88rem; font-weight: 500; } .wvd-av-dot { width: 7px; height: 7px; border-radius: 50%; } .wvd-av-open { color: var(--sage); } .wvd-av-open .wvd-av-dot { background: var(--sage); } .wvd-av-held { color: var(--clay); } .wvd-av-held .wvd-av-dot { background: var(--clay); } .wvd-av-booked { color: var(--ink-faint); } .wvd-av-booked .wvd-av-dot { background: var(--ink-faint); } /* Reviews */ .wvd-reviews { display: flex; flex-direction: column; gap: .9rem; margin-top: 1.1rem; } .wvd-review { background: var(--paper); border: 1px solid var(--line-soft); border-radius: 12px; padding: 1.1rem 1.2rem; } .wvd-review p { margin-top: 0; font-family: var(--wv-serif); font-style: italic; font-weight: 330; font-size: 1.04rem; color: var(--ink); line-height: 1.5; } .wvd-rv-by { margin-top: .7rem; font-size: .82rem; color: var(--ink-faint); font-style: normal !important; } .wvd-rv-by b { color: var(--ink-soft); font-weight: 600; font-style: normal; } .wvd-fineprint { font-size: .83rem; color: var(--ink-faint); margin-top: .9rem; } /* ── More in category ────────────────────────────────── */ .wvd-more { padding-bottom: clamp(1.8rem, 4vw, 3rem); } .wvd-more-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; } .wvd-more-head a { --growth: 0; font-size: .85rem; font-weight: 500; color: var(--plum); display: inline-flex; align-items: center; gap: .35rem; text-decoration: none; } .wvd-more-head a:hover, .wvd-more-head a:focus-visible { --growth: 1; } .wvd-more-head.is-end { margin-top: clamp(1rem, 2vw, 1.35rem); margin-bottom: 0; justify-content: flex-end; width: 100%; } .wvd-more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } /* ── Responsive (detail-specific) ────────────────────── */ @media (max-width: 880px) { .wvd-layout { grid-template-columns: 1fr; } .wvd-rail { position: static; } .wvd-identity { grid-template-columns: 1fr; } .wvd-id-actions { flex-wrap: wrap; } } @media (max-width: 680px) { .wvd-more-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .wvd-log-hero { grid-template-columns: 1fr; padding: 0; } .wvd-log-scene { display: none; } .wvd-log-panel { border-radius: 0; } } @media (max-width: 560px) { .wvd-incl { grid-template-columns: 1fr; } .wvd-hero-stage { aspect-ratio: 4/3; } .wvd-person { flex-direction: column; } .wvd-person-photo { width: 110px; } } @media (max-width: 440px) { .wvd-more-grid { grid-template-columns: 1fr; } } /* ================================================================ Vendor category page — /photographers, /celebrants, etc. ================================================================ */ /* ── Editorial head ──────────────────────────────────── */ .wvd-cat-head { padding-top: .70rem; max-width: 62ch; } .wvd-cat-split { max-width: none; display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .wvd-cat-split > :first-child { max-width: 62ch; } .wvd-cat-hero-img { position: relative; width: 340px; height: 220px; border-radius: 14px; overflow: hidden; flex-shrink: 0; transform: rotate(4deg); box-shadow: 0 12px 36px -12px rgba(36,27,34,.18); transition: transform .5s var(--wv-ease), box-shadow .5s var(--wv-ease); } .wvd-cat-split:hover .wvd-cat-hero-img { transform: rotate(0); box-shadow: 0 8px 24px -8px rgba(36,27,34,.12); } @media (max-width: 768px) { .wvd-cat-split { flex-direction: column; } .wvd-cat-hero-img { display: none; } } .wvd-cat-head h1 { margin: 0; } .wvd-cat-count { margin-top: .7rem; font-size: .86rem; color: var(--clay); } .wvd-cat-count b { color: inherit; font-weight: 600; } /* ── Filter bar ──────────────────────────────────────── */ .wvd-filterbar { position: sticky; top: var(--wv-nav-h, 58px); z-index: 30; background: rgba(238,231,226,.94); backdrop-filter: blur(12px); } .wvd-filterbar-inner { padding: .75rem 0; display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; } .wvd-filterbar::before, .wvd-filterbar::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--line); } .wvd-filterbar::before { top: 0; } .wvd-filterbar::after { bottom: 0; } /* Availability checkbox on the bar */ .wvd-bar-check { display: inline-flex; align-items: center; gap: .5rem; font-size: .88rem; font-weight: 500; color: var(--ink-soft); cursor: pointer; } .wvd-bar-check input { appearance: none; width: 18px; height: 18px; border: 1.5px solid var(--line); border-radius: 5px; flex-shrink: 0; position: relative; cursor: pointer; transition: border-color .2s, background .2s; } .wvd-bar-check input:checked { background: var(--sage); border-color: var(--sage); } .wvd-bar-check input:checked::after { content: ""; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px; border: solid var(--paper); border-width: 0 2px 2px 0; transform: rotate(45deg); } /* Active chips */ .wvd-active-row { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; width: 100%; margin-top: .65rem; } .wvd-active-clear { font-size: .78rem; color: var(--plum); font-weight: 500; background: none; border: none; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } /* ── Filter drawer — vendor palette overrides for shared wv- classes ── */ .wvd .wv-fgroup-label { color: var(--clay); } .wvd .wv-fgroup-label::before { background: var(--clay); } .wvd .wv-fchip-toggle.wv-on { background: var(--plum); border-color: var(--plum); } .wvd .wv-fradio input:checked { border-color: var(--plum); } .wvd .wv-fradio input:checked::after { background: var(--plum); } .wvd .wv-df-apply { background: var(--plum); } .wvd .wv-df-apply:hover { background: var(--plum-deep); } .wvd .wv-filters-btn { background: var(--plum); } .wvd .wv-filters-btn:hover { background: var(--plum-deep); } .wvd .wv-fb-ct { background: var(--clay-soft); color: var(--plum-deep); } /* ── Vendor card grid ────────────────────────────────── */ .wvd-grid-sec { padding-top: 1.5rem; padding-bottom: clamp(2.5rem, 5vw, 4rem); } .wvd-vendor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } /* ── Vendor card — extracted from weddingvendors-category.html reference ── */ .wvd-vc { --wvd-vc-pad: 7px; --wvd-vc-inner-r: calc(15px - var(--wvd-vc-pad)); position: relative; display: flex; flex-direction: column; container-type: inline-size; background: var(--paper); border: none; border-radius: 15px; overflow: hidden; box-shadow: none; transition: background .3s var(--wv-ease); } .wvd-vc:hover { border-color: transparent; box-shadow: none; transform: none; } .wvd-vc:focus-within, .wvd-vc.is-saved { background: #e2d9d1; border-color: transparent; box-shadow: none; transform: none; } @media (hover: hover) { .wvd-vc:hover { background: #e2d9d1; } } /* Cover */ .wvd-vc-cover { position: relative; aspect-ratio: 3/2; overflow: hidden; background: var(--oat-2); margin: var(--wvd-vc-pad) var(--wvd-vc-pad) 0; border-radius: var(--wvd-vc-inner-r); } .wvd-vc-slide img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--wv-ease); } .wvd-vc-cover .wvd-studio { position: absolute; inset: 0; transition: transform .5s var(--wv-ease); } @media (hover: hover) { .wvd-vc:hover .wvd-vc-slide img, .wvd-vc:hover .wvd-vc-cover .wvd-studio { transform: scale(1.045); } } /* Gallery track — mirrors venue card carousel */ .wvd-vc-track { position: absolute; inset: 0; display: flex; transform: translateX(-100%); } .wvd-vc-slide { position: relative; flex: 0 0 100%; height: 100%; } .wvd-vc-dots { position: absolute; z-index: 4; left: 50%; bottom: .7rem; transform: translateX(-50%); display: flex; align-items: center; gap: 5px; pointer-events: none; } .wvd-vc-dots button { width: 6px; height: 6px; border-radius: 50%; border: none; padding: 0; background: rgba(250,246,241,.55); pointer-events: auto; cursor: pointer; transition: background .25s var(--wv-ease), width .25s var(--wv-ease); } .wvd-vc-dots button.wvd-on { background: var(--oat); width: 18px; border-radius: 3px; height: 6px; } .wvd-vc-prev, .wvd-vc-next { position: absolute; z-index: 4; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(250,246,241,.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; } .wvd-vc-prev svg, .wvd-vc-next svg { width: 16px; height: 16px; color: var(--ink); } .wvd-vc-prev { left: .6rem; } .wvd-vc-next { right: .6rem; } .wvd-vc:hover .wvd-vc-prev, .wvd-vc:hover .wvd-vc-next { opacity: 1; } .wvd-vc-prev:hover, .wvd-vc-next:hover { background: #fff; } .wvd-vc-cover::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to bottom, rgba(36,27,34,.22) 0%, rgba(36,27,34,0) 20%, rgba(36,27,34,0) 62%, rgba(36,27,34,.32) 100%); } /* "New" state */ .wvd-vc-cover.is-new { background: linear-gradient(155deg, var(--oat-2), var(--oat)); display: flex; align-items: center; justify-content: center; } .wvd-vc-cover.is-new::after { display: none; } .wvd-vcn-inner { text-align: center; color: rgba(110,98,106,.6); } .wvd-vcn-mark { width: 34px; height: 34px; border-radius: 9px; background: var(--paper); border: 1px solid var(--line); margin: 0 auto .5rem; display: flex; align-items: center; justify-content: center; } .wvd-vcn-mark svg { width: 17px; height: 17px; color: var(--plum-mid); } .wvd-vcn-text { font-size: .88rem; font-weight: 300; letter-spacing: .04em; } /* Save button */ .wvd-vc-save { position: absolute; top: .75rem; right: .75rem; z-index: 5; width: 38px; height: 38px; border-radius: 50%; border: none; background: rgba(250,246,241,.94); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(36,27,34,.16); cursor: pointer; transition: transform .25s var(--wv-ease-soft); } .wvd-vc-save:hover { transform: scale(1.1); } .wvd-vc-save:active { transform: scale(.9); } .wvd-vc-save svg { width: 18px; height: 18px; color: var(--ink-soft); fill: none; transition: color .2s, fill .2s; } .wvd-vc-save.saved svg { color: var(--rose); fill: var(--rose); } /* Medallion */ .wvd-vc-medallion { position: absolute; right: calc(var(--wvd-vc-pad) + .75rem); top: calc(var(--wvd-vc-pad) + ((100cqw - (var(--wvd-vc-pad) * 2)) * 2 / 3) - 29px); z-index: 6; width: 58px; height: 58px; border-radius: 50%; background: #fff; border: 2px solid #fff; box-shadow: 0 3px 12px rgba(36,27,34,.32); display: flex; align-items: center; justify-content: center; overflow: hidden; } .wvd-vc-medallion.is-logo { padding: 0; } .wvd-vc-medallion.is-logo img { width: 100%; height: 100%; border-radius: 50%; object-fit: contain; } .wvd-vc-medallion.is-headshot { padding: 0; } .wvd-vc-medallion.is-headshot img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .wvd-vc-medallion.is-monogram { background: var(--plum); } .wvd-vc-medallion.is-monogram span { font-family: var(--wv-serif); font-weight: 420; font-size: 1.2rem; color: var(--cream); font-feature-settings: "ss01"; line-height: 1; } /* Body */ .wvd-vc-body { padding: 1.35rem 1.15rem 1.15rem; display: flex; flex-direction: column; flex: 1; min-width: 0; } .wvd-vc-metarow { display: flex; align-items: center; justify-content: space-between; gap: .8rem; } .wvd-vc-category { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--clay); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wvd-vc-name { font-family: var(--wv-serif); font-weight: 400; letter-spacing: -.014em; font-size: 1.22rem; line-height: 1.2; margin: .3rem 0 .55rem; font-feature-settings: "ss01"; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .wvd-vc-name a { color: inherit; text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wvd-vc-name a::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: 15px; } .wvd-vc-name a:focus-visible { outline: none; } .wvd-vc-name a:focus-visible::after { outline: 2px solid var(--clay); outline-offset: -2px; } .wvd-vc:hover .wvd-vc-name { color: var(--plum); } .wvd-vc-location { display: flex; align-items: center; gap: .35rem; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--clay); line-height: 1; } .wvd-vc-location svg { width: 12px; height: 12px; display: block; flex-shrink: 0; } /* Rating */ .wvd-vc-rating { display: flex; align-items: center; gap: .3rem; flex-shrink: 0; font-size: .82rem; color: var(--ink-soft); } .wvd-vc-rating svg { width: 13px; height: 13px; color: var(--gold, var(--clay-soft)); flex-shrink: 0; } .wvd-vr-score { font-weight: 600; color: var(--ink); } .wvd-vr-count { color: var(--ink-faint); } .wvd-vc-rating.is-zero svg { color: var(--ink-faint); fill: none; } .wvd-vc-rating.is-zero { color: var(--ink-faint); font-size: .76rem; } /* Tags */ .wvd-vc-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .40rem; flex: 1; align-content: flex-start; } .wvd-vc-tag { font-size: .69rem; color: var(--plum); background: var(--oat-2); border-radius: 5px; padding: .17rem .46rem; } /* Footer — price + availability side by side */ .wvd-vc-foot { margin-top: .85rem; padding-top: .7rem; border-top: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; gap: .8rem; } .wvd-vc-price { font-size: .82rem; color: var(--ink-soft); } .wvd-vc-price b { font-family: var(--wv-serif); font-weight: 500; font-size: 1.04rem; color: var(--ink); } .wvd-vc-avail { display: inline-flex; align-items: center; gap: .34rem; font-size: .74rem; font-weight: 500; line-height: 1; white-space: nowrap; } .wvd-vc-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .wvd-vc-av-open { color: var(--sage); } .wvd-vc-av-open .wvd-vc-dot { background: var(--sage); } .wvd-vc-av-held { color: var(--clay); } .wvd-vc-av-held .wvd-vc-dot { background: var(--clay); } .wvd-vc-av-booked { color: var(--ink-faint); } .wvd-vc-av-booked .wvd-vc-dot { background: var(--ink-faint); } /* Empty state */ .wvd-empty { text-align: center; padding: 3rem 1rem; } .wvd-empty-art { width: 54px; height: 54px; border-radius: 14px; background: var(--oat-2); display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; } .wvd-empty-art svg { width: 26px; height: 26px; color: var(--ink-faint); } .wvd-empty h3 { font-family: var(--wv-serif); font-weight: 400; font-size: 1.3rem; font-feature-settings: "ss01"; } .wvd-empty p { color: var(--ink-soft); font-size: .92rem; margin-top: .4rem; max-width: 38ch; margin-left: auto; margin-right: auto; } .wvd-empty button { margin-top: 1rem; background: var(--plum); color: var(--oat); border: none; border-radius: 9px; padding: .7rem 1.3rem; font-size: .9rem; font-weight: 500; cursor: pointer; } /* Category cards — inset image wrapper mirrors the In focus feature */ .wvd .wv-rc { --wvd-rc-pad: 7px; --wvd-rc-inner-r: calc(14px - var(--wvd-rc-pad)); border: none; box-shadow: none; transition: background .3s var(--wv-ease), color .3s var(--wv-ease); } .wvd .wv-rc:hover { border-color: transparent; box-shadow: none; transform: none; } .wvd .wv-rc-scene { margin: var(--wvd-rc-pad) var(--wvd-rc-pad) 0; border-radius: var(--wvd-rc-inner-r); } .wvd .wv-rc-cover { object-fit: cover; border-radius: inherit; transition: transform .5s var(--wv-ease); } .wvd .wv-rc-name, .wvd .wv-rc-venues, .wvd .wv-rc-char, .wvd .wv-rc-foot { transition: color .3s var(--wv-ease), border-color .3s var(--wv-ease); } .wvd .wv-rc:hover .wv-rc-name { color: inherit; } .wvd .wv-rc:focus-within { background: #e2d9d1; } @media (hover: hover) { .wvd .wv-rc:hover { background: #e2d9d1; } .wvd .wv-rc:hover .wv-rc-cover { transform: scale(1.045); } } /* ── Category responsive ─────────────────────────────── */ @media (max-width: 760px) { .wvd-vendor-grid { grid-template-columns: repeat(2, 1fr); } .wvd-filterbar { position: static; } } @media (max-width: 440px) { .wvd-vendor-grid { grid-template-columns: 1fr; } }