/* ========================================================================== Page-scoped layout, lifted out of WPBakery per-page Custom CSS. These rules used to live in each page's _wpb_post_custom_css meta and were emitted inline after this stylesheet, which is why they won specificity ties against it. The body.page-id-N prefix preserves that: it adds a class and an element to every selector, so each rule still beats the unscoped theme rule it was written to override. Declarations are copied verbatim. Nothing here has been merged or rewritten - deduplicating the shared components is F-714, and it comes after this lands. New rules: a component used on more than one page belongs ABOVE this block, unscoped. Only genuinely page-specific layout belongs here. ========================================================================== */ /* --- page 3 ------------------------------------------------------- */ /* Privacy Policy — reuses the Terms band so the two legal pages read as a pair. Tokens + components live in the "The Green — Design System" plugin stylesheet. */ :where(body.page-id-3) .tg-terms { background:var(--surface-sage-soft); } :where(body.page-id-3) .wpb-content-wrapper .tg-terms-inner { padding:96px var(--gutter); } :where(body.page-id-3) .wpb-content-wrapper .tg-terms-title { max-width:573px;margin:0 0 28px; } :where(body.page-id-3) .tg-terms-body { max-width:552px;margin:0 0 28px; } :where(body.page-id-3) .tg-terms-body:last-child { margin-bottom:0; } :where(body.page-id-3) .tg-terms-body p { font-size:18px;line-height:1.5;margin:0; } /* This policy has sections; the Kids Eat Free terms do not, so the subheading is the one thing that page's CSS has no rule for. Pulled tight to the paragraph it introduces and given its air above instead, so each section reads as a block rather than as evenly-spaced lines. */ :where(body.page-id-3) .wpb-content-wrapper .tg-terms-sub { max-width:552px;margin:12px 0 12px;font-size:22px;font-weight:700;line-height:1.2; } /* Lists live inside a body block so they inherit the same 552 measure. The body rule targets `p` only, so `li` needs its own type size. */ :where(body.page-id-3) .tg-terms-body ul { margin:12px 0 0;padding-left:22px; } :where(body.page-id-3) .tg-terms-body li { font-size:18px;line-height:1.5;margin:0 0 8px; } :where(body.page-id-3) .tg-terms-body li:last-child { margin-bottom:0; } :where(body.page-id-3) .tg-terms-body p + p { margin-top:18px; } /* The revision stamp is furniture, not prose. */ :where(body.page-id-3) .tg-terms-stamp p { font-size:15px;opacity:.7; } @media (max-width:900px) { :where(body.page-id-3) .wpb-content-wrapper .tg-terms-inner { padding:56px var(--gutter); } } /* --- page 23 ------------------------------------------------------- */ /* Homepage — section framing. Tokens + components live in the "The Green — Design System" plugin stylesheet. */ /* ---- 02 Hero Whats On ---- Left is a 640 column: a 750px mid-dark-green panel holding the nav list and the wordmark, then the 640x832 image flush beneath it, then forest-dark for the rest of the row. The nav list is PERMANENT furniture here — the file draws it inline in the hero on the homepage, and only the interior pages rely on the hamburger overlay for it. Geometry from the frame: Nav List at (56,64) 351x345, Logo Mark at (56,649) 500x60, panel 750 tall. The wrapper selector is `> .vc_column-inner > .wpb_wrapper`, not a descendant match: vc_single_image renders its as `class="wpb_wrapper vc_figure"`, so `.tg-hero-left .wpb_wrapper{padding}` also pads the inside of the hero image and pushes it in by the gutter. */ :where(body.page-id-23) .tg-hero > .wpb_column { width:50%; } :where(body.page-id-23) .wpb-content-wrapper .tg-hero-left { background:var(--forest-dark);padding:0; } :where(body.page-id-23) .wpb-content-wrapper .tg-hero-left > .vc_column-inner > .wpb_wrapper { padding:64px var(--gutter) 0;background:var(--mid-dark-green); } :where(body.page-id-23) .wpb-content-wrapper .tg-hero-navlink { margin:0 0 10px; } :where(body.page-id-23) .wpb-content-wrapper .tg-hero-wordmark { color:var(--white);font-size:clamp(40px,6.6vw,84px); font-weight:700;letter-spacing:-.025em;line-height:1;margin:240px 0 0;padding:0 0 17px; } /* The image is full-bleed in the file, so it breaks out of the panel gutter. */ :where(body.page-id-23) .tg-hero-img { margin:0 calc(var(--gutter) * -1); } :where(body.page-id-23) .tg-hero-img img { width:100%;aspect-ratio:640/832;object-fit:cover; } :where(body.page-id-23) .wpb-content-wrapper .tg-hero-events { background:var(--surface-light);padding:96px var(--gutter); } :where(body.page-id-23) .tg-parking { background:var(--forest-dark); } :where(body.page-id-23) .wpb-content-wrapper .tg-parking-inner { padding:96px var(--gutter);text-align:center; } /* Stack gaps are the file's own auto-layout values: Free Parking Copy gap=25, Group Bookings Copy gap=20, Stay Up To Date Text gap=20. */ :where(body.page-id-23) .tg-parking-body { max-width:650px;margin:25px auto; } :where(body.page-id-23) .tg-parking-body p { margin:0; } :where(body.page-id-23) .tg-groupbook { background:var(--olive); } :where(body.page-id-23) .wpb-content-wrapper .tg-groupbook-copy { background:var(--olive);padding:0 80px 0 var(--gutter); display:flex;align-items:center; } :where(body.page-id-23) .tg-groupbook-body { max-width:432px;margin:20px 0; } :where(body.page-id-23) .tg-groupbook-body p { margin:0; } :where(body.page-id-23) .tg-groupbook .tg-media-fill img { min-height:560px; } :where(body.page-id-23) .tg-whoshere { background:var(--forest-dark); } :where(body.page-id-23) .tg-regular { background:var(--olive); } :where(body.page-id-23) .wpb-content-wrapper .tg-sec-head-left { padding:88px var(--gutter) 0;display:flex;align-items:flex-end; } :where(body.page-id-23) .wpb-content-wrapper .tg-sec-head-right { padding:88px var(--gutter) 0;display:flex;align-items:flex-end; justify-content:flex-end; } :where(body.page-id-23) .tg-sec-intro { max-width:360px; } :where(body.page-id-23) .tg-sec-intro p { margin:0;text-align:right; } :where(body.page-id-23) .tg-viewall a { color:var(--cream-light);text-decoration:underline; } /* Grid columns all carry 24px side padding, so the sections pull their gutter in by the same amount to keep the outer edge on the 56px margin. */ :where(body.page-id-23) .wpb-content-wrapper .tg-whoshere-grid, :where(body.page-id-23) .wpb-content-wrapper .tg-regular-grid { padding:48px calc(var(--gutter) - 24px) 96px; } /* Two Card/Vendor stack per column. Reserving lines for the title and body keeps the lower row's images on one baseline the way the file's two separate vendor rows do. */ :where(body.page-id-23) .tg-whoshere-grid .tg-vcard-title { min-height:22px; } :where(body.page-id-23) .tg-whoshere-grid .tg-vcard-body { min-height:48px; } :where(body.page-id-23) .tg-whoshere-grid .wpb_wrapper .tg-vcard-img { margin-top:40px; } :where(body.page-id-23) .tg-whoshere-grid .wpb_wrapper .tg-vcard-img:first-child { margin-top:0; } :where(body.page-id-23) .tg-regular-grid .tg-vcard-title { min-height:22px; } :where(body.page-id-23) .tg-subscribe { background:var(--surface-sage); } :where(body.page-id-23) .wpb-content-wrapper .tg-subscribe-copy { padding:0 80px 0 var(--gutter);display:flex;align-items:center; } :where(body.page-id-23) .tg-subscribe-body { max-width:432px;margin:20px 0; } :where(body.page-id-23) .tg-subscribe-body p { margin:0; } :where(body.page-id-23) .tg-subscribe .tg-media-fill img { min-height:424px; } :where(body.page-id-23) .tg-btn-olive .vc_btn3 { color:var(--olive) !important;border-color:var(--olive) !important; } :where(body.page-id-23) .tg-btn-olive .vc_btn3:hover { background:var(--olive) !important;color:var(--white) !important; } :where(body.page-id-23) .tg-gallery { background:var(--surface-sage-soft); } @media (max-width:900px) { :where(body.page-id-23) .wpb-content-wrapper .tg-hero-left > .vc_column-inner > .wpb_wrapper { padding:56px var(--gutter) 0; } :where(body.page-id-23) .wpb-content-wrapper .tg-hero-wordmark { margin-top:96px;padding-bottom:40px; } :where(body.page-id-23) .wpb-content-wrapper .tg-hero-events { padding:56px var(--gutter); } :where(body.page-id-23) .wpb-content-wrapper .tg-groupbook-copy, :where(body.page-id-23) .wpb-content-wrapper .tg-subscribe-copy { padding:64px var(--gutter); } :where(body.page-id-23) .tg-groupbook .tg-media-fill img, :where(body.page-id-23) .tg-subscribe .tg-media-fill img { min-height:320px; } :where(body.page-id-23) .tg-sec-intro p { text-align:left; } :where(body.page-id-23) .wpb-content-wrapper .tg-sec-head-right { justify-content:flex-start;padding-top:16px; } :where(body.page-id-23) .tg-whoshere-grid .tg-vcard-body { min-height:0; } } /* Wordmark: Logo Mark is 500x60 in the frame. Inter at 84px came out 455 wide, so 92px to match the width the file draws. */ :where(body.page-id-23) .wpb-content-wrapper .tg-hero-wordmark { font-size:clamp(40px,7.2vw,92px);padding-bottom:9px; } /* Events column: the first Card/Event Stacked sits at y=216 inside the Events frame, not hard under the header — that offset is what balances the card stack against the nav list. Last card ends 80 short of the frame. */ :where(body.page-id-23) .wpb-content-wrapper .tg-hero-events { padding:216px var(--gutter) 80px; } @media (max-width:900px) { :where(body.page-id-23) .wpb-content-wrapper .tg-hero-events { padding:56px var(--gutter); } } /* Free Parking: heading at y=115 in a 463 band, button ends 348, 115 below. */ :where(body.page-id-23) .wpb-content-wrapper .tg-parking-inner { padding:115px var(--gutter); } /* Group Bookings and Stay Up To Date are NOT a half-and-half split: the copy column is 560, the image 640, and the file's own stack gap of 80 sits between them. Both bands take their height from the image. */ :where(body.page-id-23) .tg-groupbook, :where(body.page-id-23) .tg-subscribe { justify-content:space-between; } :where(body.page-id-23) .tg-groupbook > .wpb_column:first-child, :where(body.page-id-23) .tg-subscribe > .wpb_column:first-child { width:43.75%; } :where(body.page-id-23) .tg-groupbook > .wpb_column + .wpb_column, :where(body.page-id-23) .tg-subscribe > .wpb_column + .wpb_column { width:50%; } :where(body.page-id-23) .wpb-content-wrapper .tg-groupbook-copy, :where(body.page-id-23) .wpb-content-wrapper .tg-subscribe-copy { padding:0 0 0 var(--gutter); } :where(body.page-id-23) .tg-groupbook-body, :where(body.page-id-23) .tg-subscribe-body { max-width:432px; } :where(body.page-id-23) .tg-groupbook .tg-media-fill img { min-height:0;aspect-ratio:640/823; } :where(body.page-id-23) .tg-subscribe .tg-media-fill img { min-height:0;aspect-ratio:640/424; } /* 04 Whos Here: Vendor Row 2 sits 48 below Row 1, section ends 103 after it. */ :where(body.page-id-23) .wpb-content-wrapper .tg-whoshere-grid { padding-bottom:103px; } :where(body.page-id-23) .tg-whoshere-grid .wpb_wrapper .tg-vcard-img { margin-top:48px; } :where(body.page-id-23) .tg-whoshere-grid .wpb_wrapper .tg-vcard-img:first-child { margin-top:0; } /* 07 Gallery is an 823 band, the same height as the large image. */ :where(body.page-id-23) .tg-gallery-large img { min-height:0;aspect-ratio:640/823; } @media (max-width:900px) { :where(body.page-id-23) .wpb-content-wrapper .tg-parking-inner { padding:64px var(--gutter); } :where(body.page-id-23) .tg-groupbook > .wpb_column:first-child, :where(body.page-id-23) .tg-subscribe > .wpb_column:first-child, :where(body.page-id-23) .tg-groupbook > .wpb_column + .wpb_column, :where(body.page-id-23) .tg-subscribe > .wpb_column + .wpb_column { width:100%; } :where(body.page-id-23) .wpb-content-wrapper .tg-groupbook-copy, :where(body.page-id-23) .wpb-content-wrapper .tg-subscribe-copy { padding:64px var(--gutter); } :where(body.page-id-23) .tg-groupbook .tg-media-fill img, :where(body.page-id-23) .tg-subscribe .tg-media-fill img { aspect-ratio:16/10; } :where(body.page-id-23) .tg-gallery-large img { aspect-ratio:16/10; } } /* Heading Row split. Both heading rows in the file (Who's Here and Regular Events & Offers) put the title at x=0 and the 360-wide right block at x=808, so the title has 808 to run in. Built as two vc_col-sm-6 columns each with a gutter on BOTH edges, the title only got 528 — "Regular Events & Offers" wrapped to a second line and held the band 61px open. Gutters now sit on the outer edges only, which puts the two content boxes on 808 / 360 exactly. */ @media (min-width:901px) { :where(body.page-id-23) .wpb-content-wrapper .tg-sec-head-left { width:67.5%;padding:88px 0 0 var(--gutter); } :where(body.page-id-23) .wpb-content-wrapper .tg-sec-head-right { width:32.5%;padding:88px var(--gutter) 0 0; } } /* ---- Mobile Homepage (430x7539) ---- The file reorders the hero rather than reflowing it: Mobile Events (1699) comes FIRST, then Mobile Hero Video (559) below it. Same row, same markup, flex `order` — so there is one copy of each card to maintain, not two. The inline nav list and the hero wordmark are dropped here; the mobile header carries the logo and the hamburger overlay carries the nav. */ @media (max-width:600px) { :where(body.page-id-23) .tg-hero { flex-wrap:wrap; } :where(body.page-id-23) .tg-hero > .wpb_column { width:100%; } :where(body.page-id-23) .tg-hero > .tg-hero-events { order:1; } :where(body.page-id-23) .tg-hero > .tg-hero-left { order:2; } :where(body.page-id-23) .wpb-content-wrapper .tg-hero-navlink, :where(body.page-id-23) .wpb-content-wrapper .tg-hero-wordmark { display:none; } :where(body.page-id-23) .wpb-content-wrapper .tg-hero-left > .vc_column-inner > .wpb_wrapper { padding:0;background:none; } :where(body.page-id-23) .tg-hero-img { margin:0; } :where(body.page-id-23) .tg-hero-img img { aspect-ratio:430/559; } /* Mobile Events — cards 382 wide at x=24, 48 apart, 24 above and 32 below. */ :where(body.page-id-23) .wpb-content-wrapper .tg-hero-events { padding:24px 24px 32px; } :where(body.page-id-23) .tg-card { margin-bottom:48px; } :where(body.page-id-23) .tg-card:last-child { margin-bottom:0; } /* Image 382x240, Text block 22 under it. */ :where(body.page-id-23) .tg-card-img img { height:240px;aspect-ratio:auto; } :where(body.page-id-23) .tg-card .tg-eyebrow { margin:22px 0 14px; } /* Free Parking — 430x329: title at 48, body at 93, button at 229. */ :where(body.page-id-23) .wpb-content-wrapper .tg-parking-inner { padding:48px 24px 56px;text-align:left; } :where(body.page-id-23) .tg-parking-body { max-width:none;margin:16px 0 43px; } /* Group Bookings — copy 305 then a 430x553 image; Stay Up To Date is the same shape with a 246 copy block and a 285 image. Both stack copy first. */ :where(body.page-id-23) .wpb-content-wrapper .tg-groupbook-copy { padding:48px 24px 56px; } :where(body.page-id-23) .tg-groupbook-body { max-width:none;margin:16px 0 40px; } :where(body.page-id-23) .tg-groupbook .tg-media-fill img { aspect-ratio:430/553; } :where(body.page-id-23) .wpb-content-wrapper .tg-subscribe-copy { padding:48px 24px 40px; } :where(body.page-id-23) .tg-subscribe-body { max-width:none;margin:16px 0 40px; } :where(body.page-id-23) .tg-subscribe .tg-media-fill img { aspect-ratio:430/285; } /* Who's Here — a 257 heading block over a horizontally scrolling Vendor Carousel of 280-wide cards. See QUALITY.hd §3. */ :where(body.page-id-23) .wpb-content-wrapper .tg-sec-head-left { width:100%;padding:48px 24px 0; } :where(body.page-id-23) .wpb-content-wrapper .tg-sec-head-right { width:100%;padding:16px 24px 0; } /* Regular Events — 382-wide Activity Grid, two cards per row with the file's full-height divider between the columns. */ :where(body.page-id-23) .wpb-content-wrapper .tg-regular-grid { padding:53px 24px 48px; } /* Gallery — a 430x553 lead image then the carousel slide. */ :where(body.page-id-23) .tg-gallery-large img { aspect-ratio:430/553; } } @media (max-width:600px) { /* Regular Events — the file's Activity Grid is 382 wide, two 180-wide cards per row on a 202 pitch, two rows. The four desktop columns become 2-up; the divider is dropped from the left-hand column of each row. Note the file draws ONE full-height divider spanning both rows (1x848) and a per-column border can only draw it per row, so it breaks at the row gap. */ :where(body.page-id-23) .tg-regular-grid > .wpb_column { width:50%;padding:0 11px 32px; } :where(body.page-id-23) .tg-regular-grid > .wpb_column:nth-child(2n+1) { border-left:0;padding-left:0; } :where(body.page-id-23) .tg-regular-grid > .wpb_column:nth-child(2n) { padding-right:0; } :where(body.page-id-23) .tg-regular-grid .tg-vcard-img img { height:180px; } /* Who's Here — INTERIM. The file makes this a horizontally scrolling Vendor Carousel of seven 280x516 cards (548 tall). The desktop markup is four columns of two stacked cards, which is what lets the full-height dividers run unbroken past the row gap, and it cannot be re-flowed into seven side-by-side items without restructuring the row — see QUALITY.hd §3. Until then this stacks, with the image capped so a 382-wide portrait does not render 505 tall. */ :where(body.page-id-23) .wpb-content-wrapper .tg-whoshere-grid { padding:48px 24px 48px; } :where(body.page-id-23) .tg-whoshere-grid > .wpb_column { padding:0; } :where(body.page-id-23) .tg-whoshere-grid .tg-vcard-img img { height:240px; } :where(body.page-id-23) .tg-whoshere-grid .tg-vcard-body { min-height:0; } :where(body.page-id-23) .tg-whoshere-grid .wpb_wrapper .tg-vcard-img { margin-top:32px; } } @media (max-width:600px) { /* Copy blocks sit 16 under their title and 16 above their button in every mobile band; the earlier 40/43 values were mis-read off the frame. */ :where(body.page-id-23) .tg-parking-body, :where(body.page-id-23) .tg-groupbook-body, :where(body.page-id-23) .tg-subscribe-body { margin:16px 0; } /* Stay Up To Date is the one 28px title in the file (a 34px box). */ :where(body.page-id-23) .wpb-content-wrapper .tg-subscribe-copy .tg-h2 { font-size:28px; } } /* ---- Hero video ---- Replaces the still (attachment 39, now the poster) in the same slot, and keeps the full-bleed breakout it had: the clip has to reach both edges of the mid-dark-green panel, which carries a gutter. ONE aspect-ratio covers every breakpoint here. The desktop slot is 640x832 and the mobile one is 430x559 — both exactly 1:1.30 — and the clip was cut to that, so the ratio lives on the element (inline, from its `ratio` param) and needs no override at 600. The old `.tg-hero-img` rules above are dead; they matched the vc_single_image this replaced. */ :where(body.page-id-23) .tg-hero-video { margin:0 calc(var(--gutter) * -1); } @media (max-width:600px) { :where(body.page-id-23) .tg-hero-video { margin:0; } } /* ---- homepage hero: the pinned video ---- Desktop only, and the whole effect is `position:sticky` — no scroll listener, no JS, nothing that can fall out of step with the scrollbar. The band reads as three moves. The green panel fills the first screen; it scrolls away normally and the video rises behind it. The moment the video's top edge reaches the viewport top it pins, filling the left half, and from there only the events column moves. When the events run out the pin releases and the whole band leaves together, which is what puts Free Parking next. A sticky element can only travel as far as its own containing block, so .wpb_wrapper has to be as tall as the row rather than as tall as its content. WPBakery's column boxes are plain blocks that shrink to fit, so the height is handed down the chain explicitly — .tg-split already sets align-items:stretch on the row, and each box below it passes that on. THE TRAVEL IS NOT GUARANTEED, and this is the thing to know before changing anything here. The panel and the video are one screen each, so the pin only lasts for (events column height - 2 x viewport height + header). Measured at 1440 wide with the three featured events the band carries today: 555px of pinned travel on a 900-tall viewport, and ZERO at 1251 tall — the events column is 2420px against the 2419px needed, so on any taller monitor the video scrolls past without ever pinning. It degrades quietly rather than breaking, but the effect only exists while the events column is longer than two screens. The lever is the event count in the band's `limit`, not anything in this file. */ @media (min-width:901px) { :where(body.page-id-23) .tg-hero-left { display:flex; } :where(body.page-id-23) .tg-hero-left > .vc_column-inner { display:flex;flex:1 1 auto;min-width:0; } /* The gutter moves off the wrapper and onto the panel, so the video below it reaches both edges on its own and no longer needs the negative margin. */ /* min-width:0 is not housekeeping here, it is what lets the mark scale. A flex item's automatic minimum is min-content, so these wrappers floor at the widest thing inside them — the 500px wordmark plus the panel's 112px of gutter — and simply refuse to be narrower than 612 however little room the column has. The mark's own max-width:100% then measures 100% of a box that is already too wide, so it never shrinks and the logo runs out past the column and is clipped. Letting the wrappers shrink hands the real width back down the chain and the mark scales from 500 as the room goes. */ :where(body.page-id-23) .wpb-content-wrapper .tg-hero-left > .vc_column-inner > .wpb_wrapper { flex:1 1 auto;min-width:0;display:flex;flex-direction:column;padding:0; } /* One screen MINUS the header, because the header is above the band and scrolls with it: subtracting it is what makes the first viewport read as header + panel exactly, with nothing of the panel below the fold. It also lands the video's top edge at precisely 100svh of scroll. min-height, not height: on a short laptop the five nav links and the mark can outgrow the screen, and a fixed height would crop the wordmark rather than let the panel run on. */ :where(body.page-id-23) .wpb-content-wrapper .tg-hero-panel { flex:0 0 auto;min-height:calc(100svh - var(--header-h));margin:0;padding:64px var(--gutter) 0; } /* The mark hangs off the BOTTOM of the panel rather than off a fixed 240px gap under the nav. Same look on the frame's own viewport, but the gap is now whatever the screen has left, so the panel is exactly one screen at every height instead of overflowing the fold by the 19px the fixed margin happened to cost at 900. The auto margin collapses to 0 on a screen too short to hold both, and min-height above keeps it readable. */ :where(body.page-id-23) .tg-hero-panel > .wpb_column, :where(body.page-id-23) .tg-hero-panel > .wpb_column > .vc_column-inner { display:flex;flex:1 1 auto;min-width:0; } :where(body.page-id-23) .tg-hero-panel > .wpb_column > .vc_column-inner > .wpb_wrapper { display:flex;flex-direction:column;flex:1 1 auto;min-width:0; } :where(body.page-id-23) .wpb-content-wrapper .tg-hero-panel .tg-hero-wordmark { margin-top:auto; } /* svh rather than vh or dvh. dvh re-measures every time a tablet toolbar slides away, which would resize the pinned box mid-scroll and judder against the column beside it; svh is the one value that never moves. */ :where(body.page-id-23) .tg-hero-video { flex:0 0 auto;position:sticky;top:0;height:100svh;margin:0; /* The shortcode writes `aspect-ratio:640/832` inline from its own ratio param. Left alone it would fight the pinned height and drive the WIDTH off it instead, so the ratio has to be handed back here. */ aspect-ratio:auto !important; } } /* Free Parking, mobile — the client wants the title and the Learn More button hard left. `.tg-parking-inner{text-align:left}` in the mobile block above already asks for that, but neither child inherits it: vc_custom_heading writes the font_container's `text_align:center` INLINE on the , and vc_btn's align="center" wraps the button in `.vc_btn3-center` (`text-align:center`, one class, no !important). So the override has to land on the two children — the heading needs !important to beat its own inline style, the button only needs the extra specificity. The body copy carries no alignment of its own and already inherits left. Desktop is untouched: the band stays centred above 600. */ @media (max-width:600px) { :where(body.page-id-23) .wpb-content-wrapper .tg-parking-inner .tg-h2 { text-align:left !important; } :where(body.page-id-23) .wpb-content-wrapper .tg-parking-inner .tg-btn { text-align:left; } } /* Regular Events & Offers, mobile — the grid above asks for `.tg-regular-grid > .wpb_column{padding:0 11px 32px}`, but that selector is (0,2,0) and loses to the theme's `.wpb-content-wrapper .tg-grid > .wpb_column {padding:0 24px}` at (0,3,0) — a media query adds no specificity. So the authored padding never landed: the 32px row gap resolved to 0, which butted row 1's buttons against row 2's images, and the side padding became 24px a side, opening the gutter to 48 against the frame's 22 and squeezing each card to 147px where the file draws 180. Restated at (0,3,0)+ so it actually wins; the two nth-child rules keep the gutter off the outer edges. */ @media (max-width:600px) { :where(body.page-id-23) .wpb-content-wrapper .tg-regular-grid > .wpb_column { padding:0 11px 32px; } :where(body.page-id-23) .wpb-content-wrapper .tg-regular-grid > .wpb_column:nth-child(2n+1) { padding-left:0; } :where(body.page-id-23) .wpb-content-wrapper .tg-regular-grid > .wpb_column:nth-child(2n) { padding-right:0; } /* This is the one grid that stays 2-up on mobile, so its body copy runs in a ~160px column where the shared 16px/1.5 sets 4-5 words a line and reads oversized against the 18px title. One step down the scale to the eyebrow's 14px. Who's Here is full-width here and keeps 16px. */ :where(body.page-id-23) .tg-regular-grid .tg-vcard-body p { font-size:14px; } } /* Who's Here, mobile — goes 2-up to match Regular Events & Offers. Same specificity trap as that grid: `.tg-whoshere-grid > .wpb_column {padding:0}` above is (0,2,0) and loses to the theme's `.wpb-content-wrapper .tg-grid > .wpb_column{padding:0 24px}` at (0,3,0), so the columns kept a 24px side padding and NO bottom padding — which is why the last button of a column sat flush against the next one's image. Restated at (0,3,0)+. Note the shape differs from the events grid: each column here holds TWO stacked cards (7 vendors over 4 columns), so 2-up reads as a 2-wide grid two cards deep per row. The stacked pair's own 32px gap comes from the theme's `.tg-grid .wpb_wrapper > .tg-vcard-img ~ .tg-vcard-img` and is untouched. nth-child(2n+1) also drops the divider from the left column of each row — it has to beat the theme's `.tg-grid > .wpb_column + .wpb_column` border at (0,3,0), which the extra pseudo-class does. */ @media (max-width:600px) { :where(body.page-id-23) .wpb-content-wrapper .tg-whoshere-grid > .wpb_column { width:50%;padding:0 11px 32px; } :where(body.page-id-23) .wpb-content-wrapper .tg-whoshere-grid > .wpb_column:nth-child(2n+1) { border-left:0;padding-left:0; } :where(body.page-id-23) .wpb-content-wrapper .tg-whoshere-grid > .wpb_column:nth-child(2n) { padding-right:0; } /* The cards run in a ~160px column now, exactly as in the events grid, so the 16px body copy reads oversized here for the same reason and takes the same one-step drop. This supersedes the "Who's Here keeps 16px" note above, which assumed it stayed full-width. */ :where(body.page-id-23) .tg-whoshere-grid .tg-vcard-body p { font-size:14px; } } /* Gallery carousel, stacked — `.tg-gallery-panel{padding:0 56px}` in the theme carries NO vertical padding, because above 901 the panel is a side-by-side flex cell that takes its height from the row and is centred in it. The moment `.tg-split > .wpb_column` goes 100% at 900 the panel becomes a block in the normal flow, so that 0 top/bottom is suddenly real: the carousel sat hard against the lead image above it (measured 0px) and 17px off the next band. The 56px side value is the client's, so it is kept all the way down and only eased at mobile portrait, where 56 a side leaves the slide just 278px wide. */ @media (max-width:900px) { :where(body.page-id-23) .wpb-content-wrapper .tg-gallery-panel { padding:56px; } } @media (max-width:600px) { :where(body.page-id-23) .wpb-content-wrapper .tg-gallery-panel { padding:48px 32px; } } /* Header, 601–900 — the theme sends `.tg-header > .wpb_column` to width:100% at 900, but the mobile treatment that makes that sane (hide Book Now, move it to the sticky bar) only starts at 600. In between, the header stacked into a full-width green burger bar with a second full-width light band under it holding the button — 128px of chrome and an obvious seam. Keep the two cells side by side across that band; (0,3,0) beats the theme's (0,2,0). */ @media (min-width:601px) and (max-width:900px) { :where(body.page-id-23) .wpb-content-wrapper .tg-header > .wpb_column { width:50%; } } /* Mobile header — the frame draws a 52px bar, but that reads cramped once the wordmark is in it, so the client wants it taller: 64px, which also matches the 601–900 bar so the height only steps once on the way down. Both items are centred by `.tg-header-left{align-items:center}` already, but the wordmark is a vc_custom_heading and carries WPBakery's `.vc_do_custom_heading{margin-bottom:.625rem}` (10px). Inside a centre-aligned flex row that margin is part of the box, so it lifted the logo 5px above the burger's axis — measured. Zeroing it puts both on the same centreline. */ @media (max-width:600px) { :where(body.page-id-23) .tg-header { min-height:64px; } :where(body.page-id-23) .tg-header > .wpb_column { min-height:64px; } :where(body.page-id-23) .wpb-content-wrapper .tg-header .tg-wordmark { margin:0; } } /* Header burger — the icon BOX was centring correctly, but the glyph inside it was not. `.tg-burger .vc_icon_element-icon` is given a fixed height (16px on mobile, 27px above) while its line box is the full font-size — 30.1px as computed, because WPBakery's own icon sizing wins over the theme's `line-height:16px`. A block box shorter than its line box does not clip or centre it: the line renders from the box's top edge and simply overflows the bottom, so the ink centre sat 15.1px down inside an 8px half-height — the burger rode 7px below the wordmark's axis (measured). Fix is to stop pinning the height and let the box be its line box. With line-height:1 the line box equals the font bounding box, and for this glyph the ink centre and the font-box centre coincide (ink 23up/1down, font 26up/4down — both centred 11 above the baseline), so the ink lands dead centre of the box and the column's existing align-items:center does the rest. Width is left alone; only the vertical axis was wrong. */ :where(body.page-id-23) .wpb-content-wrapper .tg-header .tg-burger .vc_icon_element-inner, :where(body.page-id-23) .wpb-content-wrapper .tg-header .tg-burger .vc_icon_element-icon { height:auto; } :where(body.page-id-23) .wpb-content-wrapper .tg-header .tg-burger .vc_icon_element-icon { line-height:1; } /* FIX — the rule above set height:auto on BOTH the icon inner and the icon, and the inner one was wrong and broke the menu. `.vc_icon_element-icon` is position:absolute, so it contributes no height to its parent: height:auto collapsed `.vc_icon_element-inner` to 0, and `.vc_icon_element-link` — the anchor to #tg-menu, and the only hit area — is height:100% of that inner. The burger's clickable box became 24x0 and the overlay could not be opened. Restore a real box on the inner. Glyph centring is unaffected: the span is absolutely centred on the inner's MIDPOINT, so only the span's own height and line-height decide where the ink lands, and those are left as they are. */ :where(body.page-id-23) .wpb-content-wrapper .tg-header .tg-burger .vc_icon_element-inner { height:27px; } @media (max-width:600px) { :where(body.page-id-23) .wpb-content-wrapper .tg-header .tg-burger .vc_icon_element-inner { height:16px; } } /* While here: that link is the entire tap target and at 24x16 it is less than half the 44px minimum — easy to miss on a phone, which is the other half of "nothing happens when I tap it". Growing it with negative insets enlarges the hit box only; the inner, the glyph and the 20px right inset do not move. */ :where(body.page-id-23) .wpb-content-wrapper .tg-header .tg-burger .vc_icon_element-link { top:-14px;right:-14px;bottom:-14px;left:-14px;width:auto;height:auto; } /* --- page 134 ------------------------------------------------------- */ /* Who's Here — section framing. Tokens + components live in the "The Green — Design System" plugin stylesheet. */ :where(body.page-id-134) .tg-whoshere { background:var(--forest-dark); } /* Grid columns all carry 24px side padding, so the section pulls its gutter in by the same amount to keep the outer edge on the 56px margin. */ :where(body.page-id-134) .wpb-content-wrapper .tg-whoshere-grid { padding:48px calc(var(--gutter) - 24px) 123px; } /* Vendor Row 1 + Vendor Row 2 are built as four columns of two stacked Card/Vendors, the same way the homepage does it — that is what lets the full-height dividers run unbroken past the row gap. Reserving the title and body lines keeps the lower row's images on one baseline. */ :where(body.page-id-134) .tg-whoshere-grid .tg-vcard-title { min-height:22px; } :where(body.page-id-134) .tg-whoshere-grid .tg-vcard-body { min-height:48px; } /* Vendor Row 2 sits 48px below Vendor Row 1 in the file. */ :where(body.page-id-134) .tg-whoshere-grid .wpb_wrapper .tg-vcard-img { margin-top:48px; } :where(body.page-id-134) .tg-whoshere-grid .wpb_wrapper .tg-vcard-img:first-child { margin-top:0; } @media (max-width:900px) { :where(body.page-id-134) .tg-whoshere-grid .tg-vcard-body { min-height:0; } } /* Intro — the shared .tg-pagehead component pads 118 top / 64 bottom, but the file sets the bottom individually on every page (48 here, then 87 / 31 / 90 / 22 on What's On / Why Come / Getting Here / Booking). Scoped above the 900px breakpoint so the component's own mobile padding still applies. */ @media (min-width:901px) { :where(body.page-id-134) .wpb-content-wrapper .tg-pagehead > .wpb_column { padding-bottom:48px; } } /* --- page 135 ------------------------------------------------------- */ /* What's On — section framing. Tokens + components live in the "The Green — Design System" plugin stylesheet. */ :where(body.page-id-135) .tg-whatson { background:var(--olive); } /* Section head: 55px title left, Filter Controls pinned right and bottom-aligned with it (Filter sits at y=111 against a heading top of 96). */ :where(body.page-id-135) .tg-sec-head { display:flex;align-items:flex-end; } :where(body.page-id-135) .tg-sec-head > .wpb_column { float:none; } :where(body.page-id-135) .wpb-content-wrapper .tg-sec-head-r { display:flex;justify-content:flex-end; } :where(body.page-id-135) .wpb-content-wrapper .tg-events-head { padding:96px var(--gutter) 0; } :where(body.page-id-135) .wpb-content-wrapper .tg-offers-head, :where(body.page-id-135) .wpb-content-wrapper .tg-spot-head { padding:40px var(--gutter) 0; } /* Dropdown - Frequency. Live, not decoration: the select shows and hides the cards in the grid beside it by their data-frequency, in events.js, and its options are built from the frequencies that row actually holds. The chevron is a rotated border rather than an SVG data URI so no angle bracket ever reaches the stylesheet. */ :where(body.page-id-135) .tg-filter p { margin:0;display:flex;align-items:center;gap:32px;justify-content:flex-end; } :where(body.page-id-135) .tg-filter label { font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:rgba(242,237,222,.70); } :where(body.page-id-135) .tg-filter .tg-select { position:relative;display:inline-block; } :where(body.page-id-135) .tg-filter .tg-select::after { content:"";position:absolute;right:16px;top:50%;width:8px;height:8px; border-right:1.5px solid var(--cream-light);border-bottom:1.5px solid var(--cream-light); transform:translateY(-70%) rotate(45deg);pointer-events:none; } :where(body.page-id-135) .tg-filter select { appearance:none;-webkit-appearance:none;width:172px;height:43px; background:transparent;border:1px solid rgba(242,237,222,.50);border-radius:0; color:var(--cream-light);font-family:var(--font);font-size:12px;font-weight:700; letter-spacing:.08em;text-transform:uppercase;line-height:1;padding:0 40px 0 16px; } :where(body.page-id-135) .tg-filter select option { color:var(--ink); } /* Card rows. Every grid column carries 24px side padding so the four content boxes stay identical widths, so each section pulls its own gutter in by the same amount to keep the outer edge on the 56px margin. */ :where(body.page-id-135) .wpb-content-wrapper .tg-events-grid { padding:46px calc(var(--gutter) - 24px) 22px; } :where(body.page-id-135) .wpb-content-wrapper .tg-offers-grid { padding:46px calc(var(--gutter) - 24px) 24px; } :where(body.page-id-135) .wpb-content-wrapper .tg-spot-grid { padding:46px calc(var(--gutter) - 24px) 72px; } /* Row 1 - Regular Events is three equal 595px cards in the file, so reserve the body lines and the Learn More buttons land on one baseline. The Offers and Spotlights rows are deliberately ragged in the file — left alone. */ :where(body.page-id-135) .tg-events-grid .tg-vcard-body { min-height:96px; } @media (max-width:900px) { :where(body.page-id-135) .tg-sec-head { flex-wrap:wrap; } :where(body.page-id-135) .tg-sec-head > .wpb_column { width:100% !important; } :where(body.page-id-135) .wpb-content-wrapper .tg-sec-head-r { justify-content:flex-start;padding-top:20px; } :where(body.page-id-135) .tg-filter p { justify-content:flex-start;gap:16px; } :where(body.page-id-135) .tg-events-grid .tg-vcard-body { min-height:0; } } /* Intro — the shared .tg-pagehead component pads 118 top / 64 bottom, but the file sets the bottom individually on every page (87 here; 48 / 31 / 90 / 22 on Who's Here / Why Come / Getting Here / Booking). Scoped above the 900px breakpoint so the component's own mobile padding still applies. */ @media (min-width:901px) { :where(body.page-id-135) .wpb-content-wrapper .tg-pagehead > .wpb_column { padding-bottom:87px; } } /* Card row bottom padding, measured. Each Row frame in the file is taller than the tallest card it holds — 606 against 595 on Events, 603/594 on Offers, 588/564 on Spotlights — and that slack renders as whitespace under the cards. The built cards land within 2px of the file's, so the difference is carried here rather than by padding the cards out. */ :where(body.page-id-135) .wpb-content-wrapper .tg-events-grid { padding-bottom:35px; } :where(body.page-id-135) .wpb-content-wrapper .tg-offers-grid { padding-bottom:34px; } :where(body.page-id-135) .wpb-content-wrapper .tg-spot-grid { padding-bottom:97px; } /* --- page 136 ------------------------------------------------------- */ /* Why Come — section framing. Tokens + components live in the "The Green — Design System" plugin stylesheet. */ :where(body.page-id-136) .tg-why { background:var(--forest-dark); } /* 05 Why Come Features. Every Card Row in the file is [398 spacer][345][345] with gap=40 across the 1168 column, i.e. the pair is indented by 438 and the left third is deliberately empty. Built as two real columns plus a percentage indent rather than an empty spacer column, which would show up in the builder as a mystery element with nothing in it. 34.22% of the 1280 canvas is that 438px indent. */ :where(body.page-id-136) .tg-why-row { display:flex;gap:40px;padding:0 var(--gutter) 48px calc(var(--gutter) + 34.22%); } /* WPBakery's own clearfix pseudo-elements become flex items once the row is a flex container, and `gap` then reserves 40px for them. */ :where(body.page-id-136) .tg-why-row::before, :where(body.page-id-136) .tg-why-row::after { display:none; } :where(body.page-id-136) .tg-why-row > .wpb_column { float:none;flex:1 1 0;width:auto; } :where(body.page-id-136) .wpb-content-wrapper .tg-why-row-first { padding-top:48px; } :where(body.page-id-136) .wpb-content-wrapper .tg-why-row-last { padding-bottom:104px; } /* Feature Card — vertical stack, gap=16, image 345x196. */ :where(body.page-id-136) .tg-feature-img img { width:100%;aspect-ratio:345/196;object-fit:cover;background:var(--olive); } :where(body.page-id-136) .wpb-content-wrapper .tg-feature-title { font-size:22px;font-weight:700;line-height:1.2;margin:16px 0; } :where(body.page-id-136) .tg-feature-body { margin:0 0 16px; } :where(body.page-id-136) .tg-feature-body p { font-size:16px;line-height:1.5;margin:0; } /* Gallery — Image Grid is 606 / 260 / 270 with gap=16 over a 348px band. */ :where(body.page-id-136) .tg-whygallery { background:var(--surface-sage-soft); } :where(body.page-id-136) .tg-photogrid { display:flex;gap:16px;padding:88px var(--gutter); } :where(body.page-id-136) .tg-photogrid::before, :where(body.page-id-136) .tg-photogrid::after { display:none; } :where(body.page-id-136) .tg-photogrid > .wpb_column { float:none;width:auto; } :where(body.page-id-136) .tg-photogrid > .tg-photo-l { flex:606 1 0; } :where(body.page-id-136) .tg-photogrid > .tg-photo-p { flex:260 1 0; } :where(body.page-id-136) .tg-photogrid > .tg-photo-s { flex:270 1 0; } :where(body.page-id-136) .tg-photogrid img { width:100%;height:348px;object-fit:cover; } @media (max-width:900px) { /* Mobile only, the feature pair reads as the site's standard two-up: a rule down the channel between the columns. The desktop row is the file's [398 spacer][345][345] indent and has no divider, so this is the one breakpoint where the two layouts differ in kind rather than in width. The 40px flex `gap` becomes column padding because the rule needs a box edge to sit on and a gap is not one. 11px each side rather than the 20 that would have reproduced the gap exactly: that is the standard two-up's own figure, so the channel closes from 40 to 22 and each column takes the 9px back — the measure the body copy was short of. Outer padding is untouched, so the cards stay aligned with the heading block above them. */ :where(body.page-id-136) .tg-why-row { flex-wrap:wrap;padding-left:var(--gutter);gap:0; } :where(body.page-id-136) .tg-why-row > .wpb_column { padding:0 11px; } :where(body.page-id-136) .tg-why-row > .wpb_column:first-child { padding-left:0; } :where(body.page-id-136) .tg-why-row > .wpb_column:last-child { padding-right:0; } :where(body.page-id-136) .tg-why-row > .wpb_column + .wpb_column { border-left:1px solid var(--rule-light); } :where(body.page-id-136) .tg-photogrid { flex-wrap:wrap;padding:56px var(--gutter); } :where(body.page-id-136) .tg-photogrid > .wpb_column { flex:1 1 100%; } :where(body.page-id-136) .tg-photogrid img { height:240px; } } /* js_composer's own `.wpb_single_image img{height:auto}` is emitted after the design-system sheet, so the grid rules need two classes to hold. Without this the portrait image keeps its natural ratio and leaves a hole in the row. */ :where(body.page-id-136) .wpb-content-wrapper .tg-feature-img img { width:100%;aspect-ratio:345/196;object-fit:cover;background:var(--olive); } :where(body.page-id-136) .wpb-content-wrapper .tg-photogrid img { width:100%;height:348px;object-fit:cover; } @media (max-width:900px) { :where(body.page-id-136) .wpb-content-wrapper .tg-photogrid img { height:240px; } } /* `.vc_single_image-wrapper` is an inline-block, so it shrink-wraps to the image's own intrinsic size and an `img{width:100%}` inside it resolves against that, not against the column. Landscape images hide this because max-width clamps them to the column anyway; the portrait one stayed 196px wide and left a hole in the row. */ :where(body.page-id-136) .tg-photogrid .wpb_single_image, :where(body.page-id-136) .tg-photogrid .vc_figure, :where(body.page-id-136) .tg-photogrid .vc_single_image-wrapper { display:block;width:100%; } /* Intro — the shared .tg-pagehead component pads 118 top / 64 bottom, but the file sets the bottom individually on every page (31 here; 48 / 87 / 90 / 22 on Who's Here / What's On / Getting Here / Booking). Scoped above the 900px breakpoint so the component's own mobile padding still applies. */ @media (min-width:901px) { :where(body.page-id-136) .wpb-content-wrapper .tg-pagehead > .wpb_column { padding-bottom:31px; } } /* --- page 137 ------------------------------------------------------- */ /* Getting Here — section framing. Tokens + components live in the "The Green — Design System" plugin stylesheet. */ /* Location Map (Full Width) — a 1280x680 image band, edge to edge. */ :where(body.page-id-137) .tg-mapband img { width:100%;aspect-ratio:1280/680;object-fit:cover; } /* Travel modes + address. Copy column is 393 wide at x=56, the image column 686 wide at x=496, so the gutter between them is 47. The image ends at 1182, NOT at the content column's right edge (1224) — the file leaves 98px of slack there. So neither column may GROW: letting the image column absorb that slack scaled it to 728x412 and made the band 25px too tall. They may still shrink, which is what keeps narrow viewports proportional. */ :where(body.page-id-137) .tg-travel { background:var(--surface-light);display:flex;gap:47px; padding:88px var(--gutter) 105px; } :where(body.page-id-137) .tg-travel::before, :where(body.page-id-137) .tg-travel::after { display:none; } :where(body.page-id-137) .tg-travel > .wpb_column { float:none;width:auto; } :where(body.page-id-137) .tg-travel > .tg-travel-copy { flex:0 1 393px; } :where(body.page-id-137) .tg-travel > .tg-travel-map { flex:0 1 686px; } /* Each mode is one text node in the file: the mode name is a bold run on its own line, the description follows. Blocks sit 14px apart. */ :where(body.page-id-137) .tg-travel-copy .tg-mode { margin:0 0 14px; } :where(body.page-id-137) .tg-travel-copy .tg-mode:last-child { margin-bottom:0; } :where(body.page-id-137) .tg-travel-copy .tg-mode p { font-size:18px;line-height:1.5;color:var(--olive);margin:0; } :where(body.page-id-137) .wpb-content-wrapper .tg-travel-img img { width:100%;aspect-ratio:686/388;object-fit:cover; } :where(body.page-id-137) .wpb-content-wrapper .tg-travel-label { margin:24px 0 10px;color:var(--olive); } :where(body.page-id-137) .tg-addr { margin:0 0 9px; } :where(body.page-id-137) .tg-addr p { font-size:16px;line-height:1.5;margin:0; } :where(body.page-id-137) .tg-btn-olive .vc_btn3 { color:var(--olive) !important;border-color:var(--olive) !important; } :where(body.page-id-137) .tg-btn-olive .vc_btn3:hover { background:var(--olive) !important;color:var(--white) !important; } /* Parking — three copy/image pairs, each text block top-aligned with its own 686x388 image (the file positions them on matching y values). Same no-grow columns as the travel band above, and for the same reason. */ :where(body.page-id-137) .tg-parkband { background:var(--olive); } :where(body.page-id-137) .tg-park-row { display:flex;gap:47px;padding:0 var(--gutter) 30px; } :where(body.page-id-137) .tg-park-row::before, :where(body.page-id-137) .tg-park-row::after { display:none; } :where(body.page-id-137) .tg-park-row > .wpb_column { float:none;width:auto; } :where(body.page-id-137) .tg-park-row > .tg-park-copy { flex:0 1 393px; } :where(body.page-id-137) .tg-park-row > .tg-park-img { flex:0 1 686px; } :where(body.page-id-137) .wpb-content-wrapper .tg-park-row-first { padding-top:91px; } :where(body.page-id-137) .wpb-content-wrapper .tg-park-row-last { padding-bottom:98px; } :where(body.page-id-137) .wpb-content-wrapper .tg-park-img img { width:100%;aspect-ratio:686/388;object-fit:cover; } :where(body.page-id-137) .tg-p18, :where(body.page-id-137) .tg-p18 p { font-size:18px;line-height:1.5; } :where(body.page-id-137) .tg-p18 p { margin:0; } :where(body.page-id-137) .tg-park-intro { margin-top:22px; } @media (max-width:900px) { :where(body.page-id-137) .tg-travel, :where(body.page-id-137) .tg-park-row { flex-wrap:wrap;gap:32px; } :where(body.page-id-137) .tg-travel > .wpb_column, :where(body.page-id-137) .tg-park-row > .wpb_column { flex:1 1 100%; } :where(body.page-id-137) .tg-travel { padding:56px var(--gutter); } :where(body.page-id-137) .wpb-content-wrapper .tg-park-row-first { padding-top:56px; } :where(body.page-id-137) .wpb-content-wrapper .tg-park-row-last { padding-bottom:56px; } } /* Intro — the shared .tg-pagehead component pads 118 top / 64 bottom, but the file sets the bottom individually on every page (48 / 87 / 31 / 90 / 22 on Who's Here / What's On / Why Come / here / Booking). 90 here. Scoped above the 900px breakpoint so the component's own mobile padding still applies. */ @media (min-width:901px) { :where(body.page-id-137) .wpb-content-wrapper .tg-pagehead > .wpb_column { padding-bottom:90px; } } /* --- page 154 ------------------------------------------------------- */ /* Group Bookings. Tokens + components live in the "The Green — Design System" plugin stylesheet. */ :where(body.page-id-154) .wpb-content-wrapper .tg-pagehead-cta { margin-top:21px; } /* Bookable spaces. Same [398 spacer][345][345] card rows as Why Come: the pair is indented by 438 across the 1168 column and the left third is deliberately empty. 34.22% of the 1280 canvas is that indent. */ :where(body.page-id-154) .tg-spaces { background:var(--forest-dark); } :where(body.page-id-154) .tg-space-row { display:flex;gap:40px;padding:0 var(--gutter) 48px calc(var(--gutter) + 34.22%); } /* WPBakery's clearfix pseudo-elements become flex items once the row is a flex container, and `gap` then reserves 40px for each. */ :where(body.page-id-154) .tg-space-row::before, :where(body.page-id-154) .tg-space-row::after { display:none; } :where(body.page-id-154) .tg-space-row > .wpb_column { float:none;flex:1 1 0;width:auto; } /* Row 3 holds a single card, which must stay one column wide. */ :where(body.page-id-154) .tg-space-row-last > .wpb_column { flex:0 0 calc(50% - 20px); } :where(body.page-id-154) .wpb-content-wrapper .tg-space-row-first { padding-top:48px; } :where(body.page-id-154) .wpb-content-wrapper .tg-space-row-last { padding-bottom:104px; } :where(body.page-id-154) .tg-space-img img { width:100%;aspect-ratio:345/196;object-fit:cover;background:var(--olive); } :where(body.page-id-154) .wpb-content-wrapper .tg-space-title { font-size:22px;font-weight:500;line-height:1.2;margin:16px 0; } :where(body.page-id-154) .tg-space-body { margin:0 0 16px; } :where(body.page-id-154) .tg-space-body p { font-size:16px;line-height:1.5;margin:0; } /* Map Section: the five spaces listed at 35px on the left, the venue map on the right. The file wires each name to a hover state that highlights its shape on the map — not built; see WORK.hd. */ :where(body.page-id-154) .tg-mapspaces { background:var(--olive);display:flex;align-items:flex-start; } :where(body.page-id-154) .tg-mapspaces > .wpb_column { float:none; } :where(body.page-id-154) .wpb-content-wrapper .tg-mapspaces-list { flex:0 0 38.6%;padding:91px 24px 105px var(--gutter); } :where(body.page-id-154) .wpb-content-wrapper .tg-mapspaces-map { flex:1 1 auto;padding:91px var(--gutter) 105px 0; } :where(body.page-id-154) .wpb-content-wrapper .tg-space-link { font-size:35px;font-weight:500;line-height:1.2;margin:0 0 42px; } :where(body.page-id-154) .tg-space-sub { margin:-38px 0 42px; } :where(body.page-id-154) .tg-space-sub p { font-size:16px;line-height:1.4;margin:0; } :where(body.page-id-154) .wpb-content-wrapper .tg-mapspaces-cta { margin-top:27px; } :where(body.page-id-154) .tg-mapspaces-map img { width:100%;max-width:687px;aspect-ratio:687/461;object-fit:contain; } /* Optional Food Trucks band. */ :where(body.page-id-154) .tg-foodtrucks { background:var(--surface-sage); } :where(body.page-id-154) .wpb-content-wrapper .tg-foodtrucks-copy { padding:0 80px 0 var(--gutter);display:flex;align-items:center; } :where(body.page-id-154) .tg-foodtrucks-body { max-width:432px;margin:20px 0 28px; } :where(body.page-id-154) .tg-foodtrucks-body p { margin:0; } :where(body.page-id-154) .tg-foodtrucks .tg-media-fill img { min-height:424px; } :where(body.page-id-154) .tg-btn-olive .vc_btn3 { color:var(--olive) !important;border-color:var(--olive) !important; } :where(body.page-id-154) .tg-btn-olive .vc_btn3:hover { background:var(--olive) !important;color:var(--white) !important; } /* Gallery — a 591 intro block, then the 606 / 260 / 270 image grid. */ :where(body.page-id-154) .tg-bkgallery { background:var(--surface-sage-soft); } :where(body.page-id-154) .wpb-content-wrapper .tg-bkgallery-intro { padding:88px var(--gutter) 0; } :where(body.page-id-154) .wpb-content-wrapper .tg-bk-heading { color:var(--mid-dark-green);max-width:591px;margin:0 0 24px; } :where(body.page-id-154) .tg-bk-copy { max-width:591px;margin:0 0 32px; } :where(body.page-id-154) .tg-p18, :where(body.page-id-154) .tg-p18 p { font-size:18px;line-height:1.5;color:var(--mid-dark-green); } :where(body.page-id-154) .tg-p18 p { margin:0; } :where(body.page-id-154) .tg-photogrid { display:flex;gap:16px;padding:48px var(--gutter) 167px; } :where(body.page-id-154) .tg-photogrid::before, :where(body.page-id-154) .tg-photogrid::after { display:none; } :where(body.page-id-154) .tg-photogrid > .wpb_column { float:none;width:auto; } :where(body.page-id-154) .tg-photogrid > .tg-photo-l { flex:606 1 0; } :where(body.page-id-154) .tg-photogrid > .tg-photo-p { flex:260 1 0; } :where(body.page-id-154) .tg-photogrid > .tg-photo-s { flex:270 1 0; } /* `.vc_single_image-wrapper` is an inline-block and shrink-wraps to the image's intrinsic size, so a portrait image would keep its own width. */ :where(body.page-id-154) .tg-photogrid .wpb_single_image, :where(body.page-id-154) .tg-photogrid .vc_figure, :where(body.page-id-154) .tg-photogrid .vc_single_image-wrapper { display:block;width:100%; } :where(body.page-id-154) .wpb-content-wrapper .tg-photogrid img { width:100%;height:348px;object-fit:cover; } @media (max-width:900px) { :where(body.page-id-154) .tg-space-row { flex-wrap:wrap;padding-left:var(--gutter); } :where(body.page-id-154) .tg-space-row-last > .wpb_column { flex:1 1 100%; } :where(body.page-id-154) .tg-mapspaces { flex-wrap:wrap; } :where(body.page-id-154) .tg-mapspaces > .wpb_column { flex:0 0 100% !important; } :where(body.page-id-154) .wpb-content-wrapper .tg-mapspaces-list { padding:56px var(--gutter) 24px; } :where(body.page-id-154) .wpb-content-wrapper .tg-mapspaces-map { padding:0 var(--gutter) 56px; } :where(body.page-id-154) .wpb-content-wrapper .tg-foodtrucks-copy { padding:64px var(--gutter); } :where(body.page-id-154) .tg-foodtrucks .tg-media-fill img { min-height:320px; } :where(body.page-id-154) .tg-photogrid { flex-wrap:wrap;padding:32px var(--gutter) 56px; } :where(body.page-id-154) .tg-photogrid > .wpb_column { flex:1 1 100%; } :where(body.page-id-154) .wpb-content-wrapper .tg-photogrid img { height:240px; } } /* Intro — the shared .tg-pagehead component pads 118 top / 64 bottom, but the file sets the bottom individually on every page (22 here; 48 / 87 / 31 / 90 on Who's Here / What's On / Why Come / Getting Here). Scoped above the 900px breakpoint so the component's own mobile padding still applies. */ @media (min-width:901px) { :where(body.page-id-154) .wpb-content-wrapper .tg-pagehead > .wpb_column { padding-bottom:22px; } } /* Gallery intro — Group 4 is heading (134) + 16 + body (81) = the frame's 231. The gap was built at 24. */ :where(body.page-id-154) .wpb-content-wrapper .tg-bk-heading { margin-bottom:16px; } /* Spaces map, mobile — the client wants the zone list AND the map on one screen. The section measured 861px against an 844px viewport, of which the fixed Book Now bar eats 68, so the real budget is 776 and the map was always below the fold. The list is the whole cost: five 35px links on a 42px line with 42px between them is 420px of type and air before the CTA. Dropping to 26px/20px, with the top padding eased from 56, brings the section inside the budget with the map fully visible. The sub-line's negative top margin is what tucks it under its link, so it has to track the new gap: -16 against a 20px margin nets the same ~4px it had at -38 against 42. Desktop is untouched. */ @media (max-width:600px) { :where(body.page-id-154) .wpb-content-wrapper .tg-mapspaces-list { padding-top:40px; } :where(body.page-id-154) .wpb-content-wrapper .tg-space-link { font-size:26px;margin:0 0 20px; } :where(body.page-id-154) .wpb-content-wrapper .tg-space-sub { font-size:16px;margin:-16px 0 20px; } } /* --- page 155 ------------------------------------------------------- */ /* Contact. Tokens + components live in the "The Green — Design System" plugin stylesheet. */ /* Intro: 60px title at x=56, then three 220 blurb columns at 494/749/1004. */ :where(body.page-id-155) .tg-contacthead { background:var(--olive);display:flex; } :where(body.page-id-155) .tg-contacthead > .wpb_column { float:none; } :where(body.page-id-155) .wpb-content-wrapper .tg-contacthead-title { flex:0 0 38.6%;padding:69px 24px 100px var(--gutter); } :where(body.page-id-155) .wpb-content-wrapper .tg-contacthead-cols { flex:1 1 auto;padding:69px var(--gutter) 100px 0; } :where(body.page-id-155) .tg-contactcols { display:flex;gap:35px; } :where(body.page-id-155) .tg-contactcols::before, :where(body.page-id-155) .tg-contactcols::after { display:none; } :where(body.page-id-155) .tg-contactcols > .wpb_column_inner, :where(body.page-id-155) .tg-contactcols > .vc_col-sm-4 { float:none;width:auto;flex:1 1 0; } :where(body.page-id-155) .wpb-content-wrapper .tg-contact-label { margin:0 0 12px; } :where(body.page-id-155) .tg-contact-blurb { margin:0 0 15px; } :where(body.page-id-155) .tg-contact-blurb p { margin:0; } /* Get In Touch: copy left on a 432 measure, the form right from x=494. */ :where(body.page-id-155) .tg-getintouch { background:var(--sage);display:flex; } :where(body.page-id-155) .tg-getintouch > .wpb_column { float:none; } :where(body.page-id-155) .wpb-content-wrapper .tg-git-copy { flex:0 0 38.6%;padding:88px 24px 96px var(--gutter); } :where(body.page-id-155) .wpb-content-wrapper .tg-git-form { flex:1 1 auto;padding:161px var(--gutter) 96px 0; } :where(body.page-id-155) .tg-git-body { max-width:432px;margin:6px 0 0; } :where(body.page-id-155) .tg-p18, :where(body.page-id-155) .tg-p18 p { font-size:18px;line-height:1.5; } :where(body.page-id-155) .tg-p18 p { margin:0; } :where(body.page-id-155) .tg-field-row { display:flex;gap:24px; } :where(body.page-id-155) .tg-field-row::before, :where(body.page-id-155) .tg-field-row::after { display:none; } :where(body.page-id-155) .tg-field-row > .wpb_column_inner, :where(body.page-id-155) .tg-field-row > .vc_col-sm-6 { float:none;width:auto;flex:1 1 0; } :where(body.page-id-155) .tg-field-message { margin-bottom:32px; } :where(body.page-id-155) .tg-field-message textarea { min-height:160px; } :where(body.page-id-155) .tg-btn-olive .vc_btn3 { color:var(--olive) !important;border-color:var(--olive) !important; } :where(body.page-id-155) .tg-btn-olive .vc_btn3:hover { background:var(--olive) !important;color:var(--white) !important; } /* Getting here: title left, copy + address + map right from x=496. */ :where(body.page-id-155) .tg-getting { background:var(--surface-light);display:flex; } :where(body.page-id-155) .tg-getting > .wpb_column { float:none; } :where(body.page-id-155) .wpb-content-wrapper .tg-getting-title { flex:0 0 38.6%;padding:88px 24px 92px var(--gutter); } :where(body.page-id-155) .wpb-content-wrapper .tg-getting-copy { flex:1 1 auto;padding:88px var(--gutter) 92px 0; } :where(body.page-id-155) .tg-getting-body { max-width:678px;margin:0 0 22px; } :where(body.page-id-155) .wpb-content-wrapper .tg-getting-label { margin:0 0 8px; } :where(body.page-id-155) .tg-addr { margin:0 0 27px; } :where(body.page-id-155) .tg-addr p { font-size:16px;line-height:1.5;margin:0; } :where(body.page-id-155) .wpb-content-wrapper .tg-getting-cta { margin:0 0 48px; } :where(body.page-id-155) .tg-getting-map img { width:100%;max-width:686px;aspect-ratio:686/370;object-fit:cover; } /* Central Park credit band: the precinct photo under an 85% centralpark wash. */ :where(body.page-id-155) .tg-cpband { display:flex;align-items:center;min-height:360px; background-image:linear-gradient(rgba(120,185,80,.85),rgba(120,185,80,.85)), url("/wp-content/uploads/2026/09/The-Green_Central-Park-Precinct.png"); background-size:cover;background-position:center; } :where(body.page-id-155) .tg-cpband > .wpb_column { float:none; } :where(body.page-id-155) .wpb-content-wrapper .tg-cp-logo { flex:0 0 38.6%;padding:87px 24px 87px 82px; } :where(body.page-id-155) .tg-cp-logo img { width:221px;height:auto; } :where(body.page-id-155) .wpb-content-wrapper .tg-cp-copy { flex:1 1 auto;padding:0 var(--gutter) 0 0; } :where(body.page-id-155) .tg-cp-statement { max-width:658px; } :where(body.page-id-155) .tg-cp-statement p { font-size:26px;font-weight:700;line-height:1.38;color:var(--white);margin:0; } @media (max-width:900px) { :where(body.page-id-155) .tg-contacthead, :where(body.page-id-155) .tg-getintouch, :where(body.page-id-155) .tg-getting, :where(body.page-id-155) .tg-cpband { flex-wrap:wrap; } :where(body.page-id-155) .tg-contacthead > .wpb_column, :where(body.page-id-155) .tg-getintouch > .wpb_column, :where(body.page-id-155) .tg-getting > .wpb_column, :where(body.page-id-155) .tg-cpband > .wpb_column { flex:0 0 100% !important; } :where(body.page-id-155) .wpb-content-wrapper .tg-contacthead-title { padding:56px var(--gutter) 24px; } :where(body.page-id-155) .wpb-content-wrapper .tg-contacthead-cols { padding:0 var(--gutter) 56px; } :where(body.page-id-155) .tg-contactcols { flex-wrap:wrap;gap:32px; } :where(body.page-id-155) .tg-contactcols > .wpb_column_inner, :where(body.page-id-155) .tg-contactcols > .vc_col-sm-4 { flex:1 1 100%; } :where(body.page-id-155) .wpb-content-wrapper .tg-git-copy { padding:56px var(--gutter) 24px; } :where(body.page-id-155) .wpb-content-wrapper .tg-git-form { padding:0 var(--gutter) 56px; } :where(body.page-id-155) .tg-field-row { flex-wrap:wrap; } :where(body.page-id-155) .tg-field-row > .wpb_column_inner, :where(body.page-id-155) .tg-field-row > .vc_col-sm-6 { flex:1 1 100%; } :where(body.page-id-155) .wpb-content-wrapper .tg-getting-title { padding:56px var(--gutter) 16px; } :where(body.page-id-155) .wpb-content-wrapper .tg-getting-copy { padding:0 var(--gutter) 56px; } :where(body.page-id-155) .wpb-content-wrapper .tg-cp-logo { padding:56px var(--gutter) 24px; } :where(body.page-id-155) .wpb-content-wrapper .tg-cp-copy { padding:0 var(--gutter) 56px; } } /* The form block measures 680 in the file (494 to 1174), not the full remainder of the content column. */ :where(body.page-id-155) .tg-git-form .wpb_wrapper { max-width:680px; } /* Get In Touch — the file's inputs are 328x47 and 680x160 boxes with the prompt as placeholder text INSIDE them; there is no label above. (The event page's form is the opposite: a 12px label, then a 48px input. Same .tg-field component, two different designs.) The labels stay in the markup for screen readers and are taken out of the flow, which puts each field back on the file's 47 and the message on 160. */ :where(body.page-id-155) .tg-getintouch .tg-field label { position:absolute;width:1px;height:1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap; } /* Name/Email row sits at 161, the message at 232 — a 24 gap, carried by the row rather than by the fields inside it. */ :where(body.page-id-155) .wpb-content-wrapper .tg-getintouch .tg-field-row .tg-field { margin-bottom:0; } :where(body.page-id-155) .wpb-content-wrapper .tg-getintouch .tg-field-row { margin-bottom:24px; } /* Getting here — ADDRESS is 13px bold at lh100%, a 16px box, and the address block sits 9 above the Directions button, not 27. */ :where(body.page-id-155) .wpb-content-wrapper .tg-getting-label { line-height:16px; } :where(body.page-id-155) .tg-getting .tg-addr { margin-bottom:9px; } /* --- page 156 ------------------------------------------------------- */ /* Vendor — Turtle Pizza & Pints. Tokens + components live in the "The Green — Design System" plugin stylesheet. */ :where(body.page-id-156) .tg-vendor { background:var(--surface-light); } /* Left Column is a 30px stack rather than the 28 the spotlight pages use. */ :where(body.page-id-156) .tg-vendor-logo { margin:0 0 30px; } :where(body.page-id-156) .tg-vendor-logo img { width:180px;height:auto; } :where(body.page-id-156) .wpb-content-wrapper .tg-vendor-title { margin:0 0 30px; } :where(body.page-id-156) .tg-vendor-body { margin:0 0 30px; } :where(body.page-id-156) .tg-vendor-body p { font-size:18px;line-height:1.5;margin:0 0 18px; } :where(body.page-id-156) .tg-vendor-body p:last-child { margin-bottom:0; } :where(body.page-id-156) .wpb-content-wrapper .tg-vendor-cta { margin:0 0 30px; } /* Opening Hours / Contact / Follow Turtle are gap=8 groups: label, then lines on a 31px pitch. */ :where(body.page-id-156) .wpb-content-wrapper .tg-vendor-label { margin:0 0 8px; } :where(body.page-id-156) .tg-vendor-lines { margin:0 0 30px; } :where(body.page-id-156) .tg-vendor-lines p { font-size:15px;line-height:1.5;margin:0; } :where(body.page-id-156) .tg-vendor-lines a { color:inherit;text-decoration:underline; } :where(body.page-id-156) .tg-vendor-map img { width:396px;max-width:100%;height:auto; } /* The Image Column is 823 tall against a 1982 copy column, so it stops short rather than stretching — same as the file. */ :where(body.page-id-156) .tg-vendor-media img { aspect-ratio:640/823; } :where(body.page-id-156) .tg-vwhatson { background:var(--olive); } :where(body.page-id-156) .tg-sec-head { display:flex;align-items:flex-end; } :where(body.page-id-156) .tg-sec-head > .wpb_column { float:none; } :where(body.page-id-156) .wpb-content-wrapper .tg-sec-head-l { padding:88px var(--gutter) 0; } :where(body.page-id-156) .wpb-content-wrapper .tg-sec-head-r { padding:88px var(--gutter) 0;display:flex; justify-content:flex-end; } :where(body.page-id-156) .tg-sec-intro { max-width:360px; } :where(body.page-id-156) .tg-sec-intro p { margin:0;text-align:right; } :where(body.page-id-156) .tg-viewall a { color:var(--cream-light);text-decoration:underline; } /* Built as a static four-up grid; the file models it as a slider with arrows, but all four cards fit the 1168 column at desktop so the arrows never move anything. */ :where(body.page-id-156) .wpb-content-wrapper .tg-vwhatson-grid { padding:32px calc(var(--gutter) - 24px) 89px; } :where(body.page-id-156) .tg-vwhatson-grid .tg-vcard-title { min-height:22px; } /* Gallery — Image Grid is 348 / 521 / 347 over a 348px band. */ :where(body.page-id-156) .tg-vgallery { background:var(--surface-sage-soft); } :where(body.page-id-156) .wpb-content-wrapper .tg-vgallery-head { padding:88px var(--gutter) 0; } :where(body.page-id-156) .tg-photogrid { display:flex;gap:16px;padding:48px var(--gutter) 88px; } :where(body.page-id-156) .tg-photogrid::before, :where(body.page-id-156) .tg-photogrid::after { display:none; } :where(body.page-id-156) .tg-photogrid > .wpb_column { float:none;width:auto; } :where(body.page-id-156) .tg-photogrid > .tg-photo-a { flex:348 1 0; } :where(body.page-id-156) .tg-photogrid > .tg-photo-b { flex:521 1 0; } :where(body.page-id-156) .tg-photogrid > .tg-photo-c { flex:347 1 0; } /* `.vc_single_image-wrapper` is an inline-block and shrink-wraps to the image's intrinsic size, so a portrait image would keep its own width. */ :where(body.page-id-156) .tg-photogrid .wpb_single_image, :where(body.page-id-156) .tg-photogrid .vc_figure, :where(body.page-id-156) .tg-photogrid .vc_single_image-wrapper { display:block;width:100%; } :where(body.page-id-156) .wpb-content-wrapper .tg-photogrid img { width:100%;height:348px;object-fit:cover; } @media (max-width:900px) { :where(body.page-id-156) .tg-sec-head { flex-wrap:wrap; } :where(body.page-id-156) .tg-sec-head > .wpb_column { width:100% !important; } :where(body.page-id-156) .wpb-content-wrapper .tg-sec-head-r { justify-content:flex-start;padding-top:16px; } :where(body.page-id-156) .tg-sec-intro p { text-align:left; } :where(body.page-id-156) .tg-vendor-media img { aspect-ratio:16/10; } :where(body.page-id-156) .tg-photogrid { flex-wrap:wrap;padding:32px var(--gutter) 56px; } :where(body.page-id-156) .tg-photogrid > .wpb_column { flex:1 1 100%; } :where(body.page-id-156) .wpb-content-wrapper .tg-photogrid img { height:240px; } } /* Measured against the frame. Turtle-Map 1 is a 396x303 box in the file holding a 1000x1000 source, so it is a cropped fill (Figma's default for an image fill) — not height:auto, which let the square run to 396 and made the column 93 too long. */ :where(body.page-id-156) .wpb-content-wrapper .tg-vendor-map img { width:396px;height:303px;object-fit:cover; } /* The back link takes the column's own 30px stack gap here; the shared component's 28 is the spotlight/event pages' value. */ :where(body.page-id-156) .wpb-content-wrapper .tg-backlink { margin-bottom:30px; } /* Paragraph breaks inside a body block are a blank line in the file's text node, so the gap is one 27px line, not 18. */ :where(body.page-id-156) .tg-vendor-body p { margin:0 0 27px; } :where(body.page-id-156) .tg-vendor-body p:last-child { margin-bottom:0; } /* OPENING HOURS / CONTACT / FOLLOW: 13px bold at lh100% is a 16px box. */ :where(body.page-id-156) .wpb-content-wrapper .tg-vendor-label { line-height:16px; } /* Each line in those groups is its own 23px text node on an 8px stack gap, so the pitch is 31. Built as one text block the lines have to carry the pitch as line-height; the trailing half-gap is taken back off the block so the group still measures the file's 140 / 109 / 78. */ :where(body.page-id-156) .tg-vendor-lines p { line-height:31px; } :where(body.page-id-156) .tg-vendor-lines { margin-bottom:22px; } /* What's On heading band. The file's Heading Row is 72 tall — the View All block's height, not the 67 of the title — and the slider starts 48 below it at y=208. The 32px top padding here was tuned against the old (too short) heading and no longer holds. */ :where(body.page-id-156) .wpb-content-wrapper .tg-vwhatson.tg-sec-head > .wpb_column { padding-bottom:5px; } :where(body.page-id-156) .wpb-content-wrapper .tg-vwhatson-grid { padding-top:48px; } /* --- page 157 ------------------------------------------------------- */ /* Event — Corporate Cornhole League. Tokens + components live in the "The Green — Design System" plugin stylesheet. */ :where(body.page-id-157) .tg-event { background:var(--olive); } /* Left Column is a 28px stack; the sub-groups (Details, Register Here, Upcoming Dates) are 18px bold headings with their content 24-44px under. */ :where(body.page-id-157) .tg-event-meta { margin:0 0 28px; } :where(body.page-id-157) .wpb-content-wrapper .tg-event-subhead { font-size:18px;font-weight:700;line-height:1.2; margin:28px 0 24px; } :where(body.page-id-157) .tg-event-list { margin:0; } :where(body.page-id-157) .tg-event-list p { font-size:16px;line-height:1.4;margin:0; } /* CONTACT NAME / CONTACT PHONE share one 512 row with a 16px gap. */ :where(body.page-id-157) .tg-field-row { display:flex;gap:16px; } :where(body.page-id-157) .tg-field-row::before, :where(body.page-id-157) .tg-field-row::after { display:none; } :where(body.page-id-157) .tg-field-row > .wpb_column_inner, :where(body.page-id-157) .tg-field-row > .vc_col-sm-6 { float:none;width:auto;flex:1 1 0; } :where(body.page-id-157) .wpb-content-wrapper .tg-event-submit { margin-top:0; } /* Gallery — Image Grid is 606 / 260 / 270 with gap=16 over a 348px band. */ :where(body.page-id-157) .tg-eventgallery { background:var(--surface-sage-soft); } :where(body.page-id-157) .tg-photogrid { display:flex;gap:16px;padding:88px var(--gutter); } :where(body.page-id-157) .tg-photogrid::before, :where(body.page-id-157) .tg-photogrid::after { display:none; } :where(body.page-id-157) .tg-photogrid > .wpb_column { float:none;width:auto; } :where(body.page-id-157) .tg-photogrid > .tg-photo-l { flex:606 1 0; } :where(body.page-id-157) .tg-photogrid > .tg-photo-p { flex:260 1 0; } :where(body.page-id-157) .tg-photogrid > .tg-photo-s { flex:270 1 0; } /* `.vc_single_image-wrapper` is an inline-block and shrink-wraps to the image's intrinsic size, so a portrait image would keep its own width. */ :where(body.page-id-157) .tg-photogrid .wpb_single_image, :where(body.page-id-157) .tg-photogrid .vc_figure, :where(body.page-id-157) .tg-photogrid .vc_single_image-wrapper { display:block;width:100%; } :where(body.page-id-157) .wpb-content-wrapper .tg-photogrid img { width:100%;height:348px;object-fit:cover; } @media (max-width:900px) { :where(body.page-id-157) .tg-field-row { flex-wrap:wrap; } :where(body.page-id-157) .tg-field-row > .wpb_column_inner, :where(body.page-id-157) .tg-field-row > .vc_col-sm-6 { flex:1 1 100%; } :where(body.page-id-157) .tg-photogrid { flex-wrap:wrap;padding:56px var(--gutter); } :where(body.page-id-157) .tg-photogrid > .wpb_column { flex:1 1 100%; } :where(body.page-id-157) .wpb-content-wrapper .tg-photogrid img { height:240px; } } /* `.wpb-content-wrapper .tg-eyebrow{margin:0}` in the plugin sheet is a two-class rule, so the one-class .tg-event-meta lost to it and the eyebrow sat hard against the title. */ :where(body.page-id-157) .wpb-content-wrapper .tg-event-meta { margin:0 0 28px; } /* Left Column measured against the frame. The three sub-groups each sit 28 below the previous block (the column's own stack gap), but the gap BETWEEN a subhead and its content differs per group in the file — 8 under Details, 22 under Register Here, 12 under Upcoming Dates — so they carry a modifier class each rather than one shared 24. */ :where(body.page-id-157) .wpb-content-wrapper .tg-subhead-details { margin-bottom:8px; } :where(body.page-id-157) .wpb-content-wrapper .tg-subhead-reg { margin-bottom:22px; } :where(body.page-id-157) .wpb-content-wrapper .tg-subhead-dates { margin-bottom:12px; } /* Details is 16px at lh100% (a 19px line, 7 lines = the frame's 133); the Upcoming Dates list beside it is explicitly lh1.5 (5 lines = 120). Same element, two different metrics, both straight off the spec. */ :where(body.page-id-157) .tg-event-list p { font-size:16px;line-height:19px;margin:0; } :where(body.page-id-157) .tg-event-list-dates p { line-height:24px; } /* The two fields sharing the Contact Row keep their own 20px bottom margin inside it, which made the row 92 against the file's 71. */ :where(body.page-id-157) .wpb-content-wrapper .tg-field-row .tg-field { margin-bottom:0; } /* The Contact Row's own 20px gap to the Register button went with the inner fields' margins, so it is put back on the row itself. */ :where(body.page-id-157) .wpb-content-wrapper .tg-field-row { margin-bottom:20px; } /* The file draws the date/frequency line as a 512x34 box — two 17px lines — where the build sets it as one line with a bullet separator. Reserving the box the file draws (rather than re-breaking the client's copy) puts every element below it back on the frame's exact y: heading 209, intro 383, Details 715, Register Here 906, Upcoming Dates 1295. */ :where(body.page-id-157) .wpb-content-wrapper .tg-event-meta { min-height:34px; } /* Details renders as a real , which the frame draws with bullets. The li keeps the p's 19px metric so the block still measures the frame's height for the same number of lines. The indent is padding on the list rather than a margin, so the bullet sits in the gutter and wrapped lines align under the first character instead of under the marker. Mirrors event.css, which does the same job on the generated event pages. */ :where(body.page-id-157) .tg-event-list ul { margin:0;padding:0 0 0 20px;list-style:disc outside; } :where(body.page-id-157) .tg-event-list li { font-size:16px;line-height:19px;margin:0; } /* An item long enough to wrap would otherwise run straight into the next one — six tight lines read as one paragraph with bullets sprinkled in. Only applied between items, so a list of short items keeps the frame's height. */ :where(body.page-id-157) .tg-event-list li + li { margin-top:6px; } :where(body.page-id-157) .tg-event-list li::marker { color:inherit; } /* --- page 158 ------------------------------------------------------- */ /* Spotlight — Food Trucks. Tokens + components live in the "The Green — Design System" plugin stylesheet. */ :where(body.page-id-158) .tg-spotlight { background:var(--olive); } :where(body.page-id-158) .tg-ftoptions { background:var(--forest-dark); } /* Heading Row carries a right-hand intro in the file, but it is visible:false — the section ships with the heading alone. */ :where(body.page-id-158) .wpb-content-wrapper .tg-ftoptions-head { padding:88px var(--gutter) 0; } /* Grid columns all carry 24px side padding, so the section pulls its gutter in by the same amount to keep the outer edge on the 56px margin. */ :where(body.page-id-158) .wpb-content-wrapper .tg-ftoptions-grid { padding:48px calc(var(--gutter) - 24px) 113px; } /* Dividers on this frame are solid white rather than cream-light at 50%. */ :where(body.page-id-158) .tg-ftoptions-grid > .wpb_column + .wpb_column { border-left-color:var(--white); } /* --- page 159 ------------------------------------------------------- */ /* Spotlight — Catering Made Easy. Tokens + components live in the "The Green — Design System" plugin stylesheet. */ :where(body.page-id-159) .tg-spotlight { background:var(--olive); } :where(body.page-id-159) .tg-catoptions { background:var(--forest-dark); } /* Heading Row: 55px title left, a 360px intro right-aligned at x=808. */ :where(body.page-id-159) .tg-sec-head { display:flex;align-items:flex-end; } :where(body.page-id-159) .tg-sec-head > .wpb_column { float:none; } :where(body.page-id-159) .wpb-content-wrapper .tg-sec-head-l { padding:88px var(--gutter) 0; } :where(body.page-id-159) .wpb-content-wrapper .tg-sec-head-r { padding:88px var(--gutter) 0;display:flex; justify-content:flex-end; } :where(body.page-id-159) .tg-sec-intro { max-width:360px; } :where(body.page-id-159) .tg-sec-intro p { margin:0;text-align:right; } /* Vendor Row 1 + Vendor Row 2 built as four columns of two stacked Card/Vendors, so the dividers run unbroken past the 48px row gap. Every grid column carries 24px side padding, so the section pulls its own gutter in by the same amount to keep the outer edge on the 56px margin. */ :where(body.page-id-159) .wpb-content-wrapper .tg-catoptions-grid { padding:48px calc(var(--gutter) - 24px) 108px; } :where(body.page-id-159) .tg-catoptions-grid > .wpb_column + .wpb_column { border-left-color:var(--white); } :where(body.page-id-159) .tg-catoptions-grid .tg-vcard-title { min-height:22px; } :where(body.page-id-159) .tg-catoptions-grid .tg-vcard-body { min-height:48px; } :where(body.page-id-159) .tg-catoptions-grid .wpb_wrapper .tg-vcard-img { margin-top:48px; } :where(body.page-id-159) .tg-catoptions-grid .wpb_wrapper .tg-vcard-img:first-child { margin-top:0; } @media (max-width:900px) { :where(body.page-id-159) .tg-sec-head { flex-wrap:wrap; } :where(body.page-id-159) .tg-sec-head > .wpb_column { width:100% !important; } :where(body.page-id-159) .wpb-content-wrapper .tg-sec-head-r { justify-content:flex-start;padding-top:16px; } :where(body.page-id-159) .tg-sec-intro p { text-align:left; } :where(body.page-id-159) .tg-catoptions-grid .tg-vcard-body { min-height:0; } }