/* ───────────────────────────────────────────────────────────────────────────── venue-page.css — the one editorial template for every individual venue page. Owned by scripts/compose-venue-page.cjs and the two venue renderers (scripts/build-venue-flagship-pages.cjs, scripts/lib/venue-research-page.js). Loaded LAST in so it settles the segments the earlier presentation passes (venue-research.css, mauve-system.css, house-system.css, site-cohesion.css) each style in their own way. Nothing here is edited by any other pass; house tokens only, no literal colours. The defects it answers (founder review of the Conrad page, 19 Sep 2026): · the lead paragraph rendered at headline size for eight lines · segments arriving in a different order, with different eyebrows, per page · two galleries of the same six photographs · an inline-styled "In this guide" box above the section nav · an enquiry form whose labels were invisible ───────────────────────────────────────────────────────────────────────────── */ /* ── Section nav ──────────────────────────────────────────────────────────── */ [data-vp-nav] { display: flex; flex-wrap: wrap; gap: 4px 26px; align-items: center; margin: 0; padding: 14px var(--house-gutter, 24px); background: var(--house-paper); border-block: 1px solid var(--house-rule); font-family: var(--house-sans); font-size: 13px; letter-spacing: .02em; } [data-vp-nav] a { color: var(--house-muted); text-decoration: none; padding: 9px 0; min-height: 44px; display: inline-flex; align-items: center; border-bottom: 1px solid transparent; } [data-vp-nav] a:hover, [data-vp-nav] a:focus-visible { color: var(--house-ink); border-bottom-color: var(--house-mauve); } @media (min-width: 900px) { [data-vp-nav] { position: sticky; top: 0; z-index: 30; justify-content: center; gap: 4px 34px; } } /* ── Segment shell ────────────────────────────────────────────────────────── */ .vp-seg { padding: clamp(40px, 5vw, 72px) 0; border-top: 1px solid var(--house-rule); scroll-margin-top: 96px; } .vp-seg:first-of-type { border-top: 0; } /* Specific enough to beat `.vp-seg p` below it and the shared [data-house] heading rule. */ .vr-page .vp-seg > .vp-eyebrow, .vp-enquiry-band .vp-eyebrow, .vp-eyebrow { margin: 0 0 14px; font-family: var(--house-sans); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--house-mauve); } .vp-seg > h2.vp-h2 { font-family: var(--house-serif); font-weight: 400; font-size: clamp(30px, 3.1vw, 46px); line-height: 1.12; letter-spacing: -.015em; margin: 0 0 26px; max-width: 22ch; text-wrap: balance; color: var(--house-ink); } /* The house makes every heading serif with !important (css/studio.css, css/site-cohesion.css), so a sub-heading follows it rather than fighting it. */ .vr-page .vp-seg h3, .vr-page .vp-seg .vp-sub, .vp-seg h3, .vp-seg .vp-sub { font-weight: 500; font-size: 22px; line-height: 1.25; margin: 36px 0 12px; color: var(--house-ink); } /* Inner blocks were whole sections before compose folded them in: flatten the padding and the rules they each carried so a segment reads as one piece. */ .vp-seg .vr-section, .vp-seg .vr-answer, .vp-seg .pg-flagship, .vp-seg .vp-part { padding: 0; margin: 0; border-top: 0; max-width: none; } .vp-seg .vp-part + .vp-part { margin-top: 34px; } .vp-seg .studio-eyebrow { display: none; } .vp-seg .vp-eyebrow { display: block; } /* ── Body copy. The lead paragraph is prose, never a headline. ────────────── */ .vp-seg p, .vp-seg li, .vp-seg dd { font-family: var(--house-sans); font-size: 17px; line-height: 1.75; color: var(--house-ink); } .vp-seg p { margin: 0 0 18px; max-width: 72ch; } /* The defect: .vr-answer>p:first-child was set at clamp(1.55rem,2.2vw,2rem). */ .vp-seg .vr-answer > p, .vp-seg .vr-answer > p:first-child, .vr-page .vp-seg .vr-answer > p:first-child, .vp-lead { font-family: var(--house-sans) !important; font-size: 17px !important; line-height: 1.75 !important; letter-spacing: 0 !important; max-width: 72ch; } .vr-page .vr-hero-copy > p.answer-first, .vr-page .vr-hero-answer { font-family: var(--house-sans) !important; font-size: 18px !important; line-height: 1.65 !important; max-width: 54ch; color: var(--house-ink); } .vp-seg .vr-small, .vp-seg .vr-source, .vp-seg .pg-fl-note, .vp-seg small { font-size: 13px; line-height: 1.65; color: var(--house-muted); max-width: 78ch; } .vp-seg a { color: var(--house-ink); text-decoration-color: var(--house-mauve); } /* ── Hero: facts strip and mini enquiry ───────────────────────────────────── */ .vp-facts-strip { display: flex; flex-wrap: wrap; gap: 0 30px; margin: 22px 0 4px; padding: 0; list-style: none; } .vp-facts-strip li { padding: 12px 0; border-top: 1px solid var(--house-rule); min-width: 132px; font-family: var(--house-sans); font-size: 14px; line-height: 1.5; color: var(--house-ink); } .vp-facts-strip b { display: block; font-weight: 600; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--house-muted); margin-bottom: 4px; } .vp-facts-strip .vp-prov { display: block; font-size: 11px; color: var(--house-muted); } /* ── Tables ───────────────────────────────────────────────────────────────── */ .vp-seg .pg-fl-scroll, .vp-table-wrap { overflow-x: auto; margin: 0 0 22px; } .vp-seg table { width: 100%; border-collapse: collapse; font-family: var(--house-sans); font-size: 14px; line-height: 1.6; text-align: left; } .vp-seg th, .vp-seg td { padding: 13px 14px 13px 0; vertical-align: top; border-bottom: 1px solid var(--house-rule); min-width: 120px; } .vp-seg thead th { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--house-muted); font-weight: 600; } .vp-seg tbody th { font-weight: 600; width: 30%; color: var(--house-ink); } .vp-seg .vr-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 46px; margin: 0 0 22px; } .vp-seg .vr-facts > div { border-bottom: 1px solid var(--house-rule); padding: 16px 0; } .vp-seg .vr-facts dt { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--house-muted); } .vp-seg .vr-facts dd { margin: 5px 0 0; font-size: 15px; } @media (max-width: 700px) { .vp-seg .vr-facts { grid-template-columns: 1fr; } } /* ── The single gallery. One frame ratio, one caption line, one credit. ───── */ .vp-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 26px 22px; margin: 0 0 20px; } .vp-gallery figure { margin: 0; } .vp-gallery a { display: block; cursor: zoom-in; } .vp-gallery img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover !important; max-height: none !important; background: var(--house-pale); display: block; } .vp-gallery figcaption { margin-top: 10px; font-family: var(--house-sans); font-size: 12px; line-height: 1.55; color: var(--house-muted); } .vp-gallery .vp-credit { display: block; margin-top: 2px; font-size: 11px; } .vp-gallery figcaption a { color: var(--house-muted); } /* ── Cards: real weddings, similar venues, journal ────────────────────────── */ .vp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 30px 24px; margin: 0 0 12px; padding: 0; list-style: none; } .vp-cards li { margin: 0; } .vp-card { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; } .vp-card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover !important; max-height: none !important; background: var(--house-pale); display: block; } .vp-card-noimg { aspect-ratio: 4 / 3; background: var(--house-pale); display: flex; align-items: flex-end; padding: 18px; font-family: var(--house-serif); font-size: 22px; line-height: 1.2; color: var(--house-deep); } .vp-card-kicker { margin: 14px 0 0; font-family: var(--house-sans); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--house-mauve); } .vp-card-title { margin: 6px 0 0; font-family: var(--house-serif); font-size: 22px; line-height: 1.2; font-weight: 400; color: var(--house-ink); } .vp-card-meta { margin: 8px 0 0; font-family: var(--house-sans); font-size: 13px; line-height: 1.55; color: var(--house-muted); } .vp-card:hover .vp-card-title { text-decoration: underline; text-decoration-color: var(--house-mauve); } /* ── Enquiry band ─────────────────────────────────────────────────────────── */ .vp-seg--enquiry { border-top: 0; padding: 0; } .vp-enquiry-band { background: var(--house-deep); color: var(--house-paper); padding: clamp(36px, 5vw, 72px) var(--house-gutter, 24px); margin: 0; } .vp-enquiry-inner { max-width: 1060px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 60px); align-items: start; } .vp-enquiry-band .vp-eyebrow { color: var(--house-pale-2); } .vp-enquiry-band h2 { font-family: var(--house-serif); font-weight: 400; font-size: clamp(30px, 3.1vw, 44px); line-height: 1.12; margin: 0 0 16px; color: var(--house-paper); } .vp-enquiry-band p { font-family: var(--house-sans); font-size: 16px; line-height: 1.7; color: var(--house-pale-2); max-width: 46ch; } .vp-enquiry-band a { color: var(--house-paper); } .vp-enquiry-card { background: var(--house-paper); color: var(--house-ink); padding: clamp(22px, 3vw, 34px); } .vp-enquiry-card label, .vp-enquiry-card .studio-field, .vp-enquiry-card p { color: var(--house-ink); font-family: var(--house-sans); } .vp-enquiry-card label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--house-ink) !important; } .vp-enquiry-card input, .vp-enquiry-card textarea, .vp-enquiry-card select { width: 100%; margin-top: 7px; padding: 12px; border: 1px solid var(--house-rule); background: var(--house-ivory); color: var(--house-ink); border-radius: 0; font: inherit; font-size: 16px; min-height: 47px; } .vp-enquiry-card .vr-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .vp-enquiry-card .vr-wide { grid-column: 1 / -1; } .vp-enquiry-card .studio-button { margin-top: 18px; } .vp-enquiry-card .vr-small { font-size: 12px; color: var(--house-muted); } .vp-enquiry-card [data-planning-fee] { margin: 0 0 18px; font-size: 13px; line-height: 1.6; color: var(--house-muted); } .vp-reply { margin: 14px 0 0; font-size: 13px; color: var(--house-muted); } @media (max-width: 860px) { .vp-enquiry-inner { grid-template-columns: 1fr; } .vp-enquiry-card .vr-form-grid { grid-template-columns: 1fr; } } /* ── Sources & updated ────────────────────────────────────────────────────── */ .vp-seg--sources { background: var(--house-ivory); } .vp-seg--sources ul { padding-left: 18px; } .vp-seg--sources li { font-size: 13px; line-height: 1.7; color: var(--house-muted); } .vp-updated { font-size: 13px; color: var(--house-muted); margin: 18px 0 0; } /* ── Things the template replaces ─────────────────────────────────────────── */ /* The inline-styled "In this guide" box; compose strips the markup, this covers any copy that predates a rebuild. */ .vr-page nav[aria-label="In this venue guide"]:not([data-vp-nav]) { display: none; } .vr-page .vr-jump, .vr-page .pg-fl-toc { display: none; } /* Both earlier galleries: compose emits .vp-gallery and nothing else. */ .vp-seg .vr-gallery, .vp-seg .pg-fl-gallery { display: contents; } @media (max-width: 700px) { .vp-seg { padding: 34px 0; } .vp-gallery { grid-template-columns: 1fr; gap: 22px; } .vp-cards { grid-template-columns: 1fr; } } /* 20 Sep 2026: wide data tables scroll inside their own box on phones; the page never scrolls sideways. */ .pg-fl-scroll, .vp-table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } @media (max-width: 760px) { #main table { max-width: 100%; } #main table:not(.pg-fl-scroll table) { display: block; overflow-x: auto; } .pg-fl-scroll table { display: table; } .pg-fl-scroll table.pg-fl-spaces { min-width: 640px; } }