/* Lodge Sites Engine — baseline frontend styles. Colors are never hardcoded here — they come from the 5 CSS custom properties the selected Organization Profile palette resolves to (see LSE_Color_Palettes::get_css_vars(), applied as a :root block by LSE_Plugin::enqueue_frontend_assets()). Swapping the palette in wp-admin re-colors every page without touching this file. */ /* Applied to itself, not just .lse-site-header/.lse-page's own centered content boxes, so the palette background fills the gap between them too — otherwise that gap shows the page's unstyled default background instead of the selected palette. Blended toward --lse-color-heading rather than left flat, so the page behind .lse-site-header and the .lse-page content panel (see both further down) reads as a distinct third layer rather than matching either of them exactly. Deliberately hardcoded to 100% here, NOT var(--lse-chrome-intensity) — only the .lse-page panel responds to the admin's Page Background Intensity setting; the body layer behind it stays at full strength regardless. Plain var(--lse-color-bg) declared first as the color-mix()-unsupported fallback, same reasoning as .lse-card below. Scoped to the static .lse-classic class every Classic page's now carries (see templates/classic/partials/lse-header.php), and qualified with an extra `html` ancestor, purely to raise specificity to (0,1,2) so this reliably beats GroupBrief's body.gb-frontend (0,1,1) no matter which plugin's stylesheet loads later. GroupBrief's own pages never carry .lse-classic, so they're unaffected. */ html body.lse-classic { background-color: var( --lse-color-bg ); background-color: color-mix( in srgb, var( --lse-color-heading ) 100%, var( --lse-color-bg ) ); } /* Shared max content width for Classic's header, page panel, and footer — one variable so the three stay locked together (mirrors Modern's --lse-modern-width) instead of three independent hardcoded numbers. */ body.lse-classic { --lse-classic-width: 1100px; } /* Shared card treatment — Philanthropy blocks, History blocks, F&B Specials, and the F&B Menu wrapper all add this one class rather than duplicating the same background/border/radius/padding four times over (see each page's own section further down for where it's applied). Background is a lighter, off-white derivative of the page's own --lse-color-bg — every current palette's bg is already a light/pastel tone, so mixing toward white keeps a card feeling like part of the same palette rather than introducing an unrelated color. The plain var(--lse-color-bg) fallback declared first is for browsers old enough not to support color-mix(): an unsupported value invalidates just that one declaration, leaving the earlier one in place — no @supports block needed for that fallback to work. */ .lse-card { box-sizing: border-box; background-color: var( --lse-color-bg ); background-color: color-mix( in srgb, var( --lse-color-bg ) 68%, white 32% ); border: 1px solid var( --lse-color-accent ); border-radius: 12px; padding: 1.25rem 1.5rem; } /* Vertical divider between the two columns of every two-column layout on the site (Philanthropy, History, F&B, Hall Rental) — one shared class, applied to whichever element is the *second* column in each layout's own markup, rather than four separate implementations. Only active above 760px: each layout's own flex-wrap threshold (worked out from that pair's flex-basis values + the 2rem gap — the highest is F&B/Hall Rental's sidebar+main pairing, ~692px) sits below that, so by the time this media query turns the border on, every layout is guaranteed to already be showing its columns side by side, not stacked. A border-left declared unconditionally would otherwise survive the wrap and show up as an orphaned line above a stacked second column on narrow viewports — this is what avoids that. */ @media ( min-width: 760px ) { .lse-col-divider { border-left: 1px solid var( --lse-color-accent ); padding-left: 1.5rem; } } /* The site's visually distinct content panel — .lse-site-header and .lse-site-footer deliberately stay outside it (plain flat --lse-color-bg, untouched), so it reads as one floating panel between them against the now-tinted body behind it (see body, above — body itself is fixed at 100% intensity; only this panel responds to the admin's Page Background Intensity setting). Same color-mix()-with-plain-fallback pattern as body's own background, just driven by var(--lse-chrome-intensity) and blended toward --lse-color-accent instead of --lse-color-heading. Top/bottom margin plus top padding are new here specifically so the rounded corners and shadow have visible breathing room on every side instead of butting flush against the header or the page's own title text. */ .lse-page { max-width: var(--lse-classic-width); margin: 1.5rem auto 2rem; padding: 1.5rem 1rem 2rem; background-color: var( --lse-color-bg ); background-color: color-mix( in srgb, var( --lse-color-accent ) var( --lse-chrome-intensity ), var( --lse-color-bg ) ); border-radius: 16px; box-shadow: 0 4px 24px rgba( 0, 0, 0, 0.08 ); color: var( --lse-color-text ); font-family: var( --lse-font-body ); } /* At .lse-page's full 100% intensity, its background is the palette's pure, unblended Accent color — against which --lse-color-text and --lse-color-heading both fail WCAG contrast for 4 of the 5 palettes, and --lse-color-accent-colored links/buttons become literally invisible (same color as their own background). Below 100% (85% and under), .lse-page blends enough toward the plain --lse-color-bg tone that all of these stay legible as-is — so every rule below only takes effect when carries the lse-chrome-full class, which PHP adds only when the saved Page Background Intensity is exactly '100' (see LSE_Plugin::add_chrome_body_class()). .lse-page's own `color` above is what most plain text (paragraphs, list items, labels, ...) already gets by simple inheritance, so overriding just that one declaration flips all of it at once — no need to enumerate every paragraph/list selector individually. Headings and links/buttons that set their OWN explicit color (--lse-color-heading / --lse-color-accent) need their own matching override instead, listed explicitly below — audited against every template to find each one that renders directly on this panel (i.e. NOT already inside .lse-card, .lse-fnb-menu-card, or another nested light-background container, which keep their own always-off- white background regardless of intensity and are reset back to normal further below so this override can't leak into them). */ body.lse-chrome-full .lse-page { color: var( --lse-color-on-accent ); } body.lse-chrome-full .lse-page a, body.lse-chrome-full .lse-button-secondary { color: var( --lse-color-on-accent ); } body.lse-chrome-full .lse-page-header h1, body.lse-chrome-full .lse-officer-roster h2, body.lse-chrome-full .lse-officer-position, body.lse-chrome-full .lse-calendar-grid-section h2, body.lse-chrome-full .lse-philanthropy-column-title, body.lse-chrome-full .lse-fnb-hours h2, body.lse-chrome-full .lse-fnb-specials h2, body.lse-chrome-full .lse-history-column-title, body.lse-chrome-full .lse-rental-facility h2, body.lse-chrome-full .lse-rental-contact h2, body.lse-chrome-full .lse-rental-hall-photos h2, body.lse-chrome-full .lse-rental-amenities h2, body.lse-chrome-full .lse-rental-fees h2, body.lse-chrome-full .lse-rental-policies h2, body.lse-chrome-full .lse-rental-policy-title, body.lse-chrome-full .lse-about-section-title { color: var( --lse-color-on-accent ); } /* Nested light-background containers (own background never changes with intensity) must NOT inherit the .lse-chrome-full override above — reset back to normal, unconditionally, regardless of intensity. Every other card-nested element with its own explicit color (e.g. .lse-philanthropy-block-title, .lse-fnb-menu-item-price) is unaffected either way, since a direct color rule on an element always wins over an inherited one. */ .lse-card, .lse-fnb-menu-card, .lse-private-club-disclaimer, .lse-entertainment-policy-note, .lse-notice { color: var( --lse-color-text ); } /* The plugin-owned sitewide header (see templates/partials/lse-header.php) — site identity + primary nav together, on every page. It renders outside

, so it carries its own max-width/centering/background rather than inheriting .lse-page's — otherwise it would sit as an unstyled, full-bleed strip above a centered, palette-colored page. Bottom padding matches the 1.5rem the old per-page

used to provide, so removing that duplicate from Home leaves no spacing gap. / / Fixed 20% Accent blend, independent of the admin-adjustable --lse-chrome-intensity panel setting (see .lse-page) -- this one never changes when that dropdown changes. Plain var(--lse-color-bg) declared first as the color-mix()-unsupported fallback, same pattern as .lse-card. / .lse-site-header { max-width: var(--lse-classic-width); margin: 0 auto; padding: 2rem 1rem; background-color: var( --lse-color-bg ); background-color: color-mix( in srgb, var( --lse-color-accent ) 20%, var( --lse-color-bg ) ); color: var( --lse-color-text ); font-family: var( --lse-font-body ); } / A little more room under the nav than above the logo, so a wrapped second row of links reads as sitting inside the card rather than falling out of the bottom of it. Scoped to Classic on purpose: the Modern header shares the .lse-site-header class (see templates/modern/partials/lse-header.php) and would otherwise grow its sticky bar by the same amount. / body.lse-classic .lse-site-header { padding-bottom: 2.75rem; } / Just the logo+name row now — width/centering/background live on .lse-site-header above, since a real
wrapper exists to hold that instead of the identity block standing alone. flex-wrap lets the name drop below the logo on narrow viewports instead of both being squeezed onto one cramped row. / .lse-site-identity { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1rem; } / Wide/landscape logo (a wordmark, say): stack it above the name, centered, rather than sitting beside it. Square and vertical logos keep the default side-by-side row above. align-items: center (inherited) now centers the stack horizontally; the inherited gap: 1rem provides the vertical spacing. / .lse-site-identity-landscape { flex-direction: column; text-align: center; } .lse-site-logo-img { max-width: 200px; width: auto; height: auto; } .lse-site-org-name { margin: 0; / min-width: 0 overrides the flex item's implicit min-width:auto, which otherwise stops long text from wrapping/shrinking inside the flex row. Fluid size instead of one fixed value so it scales with the header rather than sitting small next to a tall logo. / min-width: 0; font-size: clamp( 1.5rem, 4vw, 2.75rem ); line-height: 1.2; font-weight: 700; text-align: center; font-family: var( --lse-font-heading ); color: var( --lse-color-heading ); } .lse-site-org-name-line2 { margin: 0.2em 0 0; min-width: 0; font-size: clamp( 1.2rem, 3.2vw, 2.2rem ); line-height: 1.2; font-weight: 700; text-align: center; font-family: var( --lse-font-heading ); color: var( --lse-color-heading ); } .lse-site-nav { margin-top: 1rem; } .lse-nav-menu { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; / Row gap deliberately small: each link already carries 0.35rem of its own vertical padding (below), so the visible space between two rows of wrapped nav text is that padding twice over plus this. Modern sets its own gap on .lse-modern-nav-menu at higher specificity, so this value is Classic's alone. / gap: 0.1rem 0.75rem; margin: 0; padding: 0; } .lse-nav-menu li { position: relative; } .lse-nav-menu a { display: inline-block; padding: 0.35rem 0; color: var( --lse-color-heading ); text-decoration: none; font-weight: 600; } .lse-nav-menu a:hover, .lse-nav-menu a:focus { color: var( --lse-color-accent ); } / JS-inserted flex line-break (see lse-frontend.js): at 10+ nav items on desktop it forces the first row to hold exactly 8 items and the rest to wrap below. Inert unless the script adds it, so it never affects narrower screens or shorter menus. Shared class, so it covers both designs' nav. / .lse-nav-menu .lse-nav-break { flex-basis: 100%; width: 100%; height: 0; margin: 0; padding: 0; list-style: none; } / Minimal footer, matching GroupBrief's own approach — legal/copyright only, no theme branding or widget areas. Unlike .lse-site-header and .lse-page, this has no background-color of its own — it sits directly on 's own background (fixed at 100% intensity, see body above), so its text needs --lse-color-on-heading, not --lse-color-muted (designed for legibility against the plain --lse-color-bg tone, not the heading-tinted body). The border stays on --lse-color-muted -- a decorative divider, not text. / .lse-site-footer { max-width: var(--lse-classic-width); margin: 0 auto; padding: 1.5rem 1rem; text-align: center; font-size: 0.85rem; color: var( --lse-color-on-heading ); font-family: var( --lse-font-body ); border-top: 1px solid var( --lse-color-muted ); } .lse-site-copyright { margin: 0; } / Address / phone, matching the Modern footer's own contact line. Inherits the footer's small on-heading typography; the phone is a tel: link and so needs its own color reset, same as the links block below. / .lse-site-footer-contact { margin-top: 0.5rem; } .lse-site-footer-contact a { color: var( --lse-color-on-heading ); text-decoration: none; } / Terms & Conditions / Privacy Policy links. Same small, on-heading-colored footer typography as the copyright/extra text above; the links themselves are underlined for affordance against that flat body tone. / .lse-site-footer-links { margin-top: 0.5rem; font-size: 0.85rem; } .lse-site-footer-links a { color: var( --lse-color-on-heading ); text-decoration: underline; } / Optional, blank-by-default (see Organization Info's "Additional Footer Text" field) -- most sites never render this at all. / .lse-site-footer-extra { margin-top: 0.5rem; } .lse-site-footer-extra p { margin: 0; } / The page's own title, e.g. Leadership/Contact's the_title() — kept distinct from .lse-site-org-name above so a page never renders two
s just because it also shows the site identity block. / .lse-page-header h1, .lse-officer-roster h2 { font-family: var( --lse-font-heading ); color: var( --lse-color-heading ); } .lse-page a { color: var( --lse-color-accent ); } .lse-page-header h1 { margin-bottom: 1.5rem; } .lse-home-details p, .lse-contact-details p { margin: 0.5rem 0; } / Reasonable reading-column width — the rest of .lse-page runs the full 960px, but a paragraph or two of prose reads better narrower. / .lse-home-about { margin: 1.5rem 0; } .lse-home-about-content { max-width: 700px; margin: 0 auto; line-height: 1.6; } .lse-home-about-content :first-child { margin-top: 0; } .lse-home-about-content :last-child { margin-bottom: 0; } / Defensive: some themes (confirmed on Twenty Twenty-Five) set an unusually light base body font-weight (300). The browser's default `strong { font-weight: bolder }` is a relative keyword — resolved against an inherited weight that low, "bolder" only steps up to 400, which renders visually identical to normal text. An absolute weight here sidesteps that relative-keyword resolution entirely. / .lse-home-about-content strong, .lse-home-about-content b { font-weight: 700; } .lse-hours-list { list-style: none; margin: 0.5rem 0 0; padding: 0; } .lse-hours-entry-label { font-weight: 600; } .lse-links-list { list-style: none; margin: 1.5rem 0 0; padding: 0; } .lse-links-list li { padding: 0.5rem 0; border-bottom: 1px solid var( --lse-color-muted ); } .lse-links-list li:first-child { border-top: 1px solid var( --lse-color-muted ); } / Same fixed 20% Accent blend as .lse-site-header above, and for the same reason -- independent of --lse-chrome-intensity. / .lse-private-club-disclaimer { margin-top: 2rem; padding: 1rem; border: 1px solid var( --lse-color-muted ); background-color: var( --lse-color-bg ); background-color: color-mix( in srgb, var( --lse-color-accent ) 20%, var( --lse-color-bg ) ); font-size: 0.9rem; } .lse-entertainment-policy-note { padding: 1rem; border: 1px solid var( --lse-color-muted ); background-color: var( --lse-color-bg ); font-size: 0.9rem; } .lse-officer-rosters { display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 1.5rem; } .lse-officer-roster { flex: 1 1 280px; } .lse-officer-list { list-style: none; margin: 0; padding: 0; } .lse-officer { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var( --lse-color-muted ); } .lse-officer-position { font-weight: 600; color: var( --lse-color-heading ); } .lse-photo-gallery-grid { display: grid; grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) ); gap: 1rem; margin-top: 1.5rem; } .lse-photo-gallery-item { display: block; border-radius: 4px; overflow: hidden; cursor: pointer; } .lse-photo-gallery-item-hidden { display: none; } .lse-photo-gallery-img { display: block; width: 100%; height: 200px; object-fit: contain; } .lse-photo-gallery-load-more-wrap { text-align: center; margin-top: 1.5rem; } .lse-photo-gallery-load-more { box-sizing: border-box; background-color: var( --lse-color-accent ); color: var( --lse-color-on-accent ); border: 2px solid var( --lse-color-on-accent ); padding: 0.6rem 1.25rem; border-radius: 4px; font-weight: 600; cursor: pointer; } .lse-photo-gallery-load-more:hover { opacity: 0.9; } / Full-page overlay viewer (see lse-frontend.js initLightbox()). The [hidden] attribute selector needs to out-rank .lse-lightbox's own display:flex below — the native `hidden` attribute already implies display:none via the UA stylesheet, but our own class rule would otherwise win the cascade and show it anyway. / .lse-lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background-color: rgba( 0, 0, 0, 0.85 ); } .lse-lightbox[hidden] { display: none; } .lse-lightbox-img { display: block; max-width: 90vw; max-height: 85vh; } .lse-lightbox-close, .lse-lightbox-prev, .lse-lightbox-next { position: absolute; width: 2.75rem; height: 2.75rem; border: none; border-radius: 50%; background-color: rgba( 255, 255, 255, 0.15 ); color: #fff; font-size: 1.75rem; line-height: 1; cursor: pointer; } .lse-lightbox-close:hover, .lse-lightbox-prev:hover, .lse-lightbox-next:hover { background-color: rgba( 255, 255, 255, 0.3 ); } .lse-lightbox-close { top: 1rem; right: 1rem; } .lse-lightbox-prev { left: 1rem; top: 50%; transform: translateY( -50% ); } .lse-lightbox-next { right: 1rem; top: 50%; transform: translateY( -50% ); } / Prevents the page behind the overlay from scrolling while it's open. / body.lse-lightbox-open { overflow: hidden; } .lse-contact-layout { display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 1.5rem; } .lse-contact-details { flex: 1 1 240px; } .lse-contact-form-wrap { flex: 2 1 360px; } / Sits inside .lse-contact-details now, under the address/phone block — width: 100% here means "fill the column", not the full page, so moving it doesn't need any resize logic beyond where it's nested. / .lse-contact-map-wrap { margin-top: 1rem; } .lse-contact-map { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; border: 1px solid var( --lse-color-muted ); } .lse-contact-map iframe { display: block; width: 100%; height: 100%; border: 0; } .lse-contact-map-link:hover { opacity: 0.9; } .lse-contact-map-caption { margin: 0.4rem 0 0; font-size: 0.85rem; } / Purely decorative placeholder (see templates/partials/simulated-map.php) — colored via the active palette, never real geographic data. / .lse-simulated-map { position: relative; width: 100%; height: 100%; } .lse-simulated-map svg { display: block; width: 100%; height: 100%; } .lse-simulated-map-bg { fill: var( --lse-color-bg ); } .lse-simulated-map-blocks rect { fill: var( --lse-color-muted ); opacity: 0.25; } .lse-simulated-map-roads path { stroke: var( --lse-color-muted ); stroke-linecap: round; } .lse-simulated-map-pin-shape { fill: var( --lse-color-accent ); } .lse-simulated-map-pin-hole { fill: var( --lse-color-bg ); } .lse-simulated-map-caption { position: absolute; bottom: 0.6rem; left: 0.6rem; margin: 0; padding: 0.25rem 0.6rem; font-size: 0.75rem; background-color: var( --lse-color-bg ); color: var( --lse-color-muted ); border-radius: 3px; } .lse-contact-form p { margin-bottom: 1rem; } .lse-contact-form label { display: block; font-weight: 600; margin-bottom: 0.25rem; } .lse-checkbox-group { border: 0; padding: 0; margin: 0 0 1rem; } .lse-checkbox-group legend { font-weight: 600; margin-bottom: 0.25rem; padding: 0; } / Overrides the generic block/bold form-label styling above — each checkbox's own label should sit inline next to it, not read like a separate full-width field label. / .lse-checkbox-group-option { display: flex !important; align-items: center; gap: 0.4rem; font-weight: 400 !important; margin-bottom: 0.35rem; } .lse-checkbox-group-option input { margin: 0; } .lse-contact-form input[type="text"], .lse-contact-form input[type="email"], .lse-contact-form input[type="tel"], .lse-contact-form input[type="url"], .lse-contact-form textarea { width: 100%; padding: 0.5rem; box-sizing: border-box; border: 1px solid var( --lse-color-muted ); background-color: var( --lse-color-bg ); color: var( --lse-color-text ); } / Outlined rather than plain-filled, at every Page Background Intensity. The panel behind these controls is Accent blended toward bg by the admin's intensity setting -- and the fill is Accent too, so at 100% the two were literally the same color and the button vanished, while below 100% it was still only ~1.2-1.6:1. The border is what defines the control now, so one rule works at every intensity instead of a 100%-only override. --lse-color-on-accent is used for both the label and the border because it is already defined per palette as the black-or-white that stays legible against Accent, which makes the outline's contrast against an Accent panel guaranteed rather than incidental (4.77:1 worst case across all ten palettes). box-sizing keeps the 2px border from growing the control, matching the local convention used by .lse-card and the form inputs below -- this stylesheet has no global box-sizing reset. / .lse-contact-form button[type="submit"] { box-sizing: border-box; background-color: var( --lse-color-accent ); color: var( --lse-color-on-accent ); border: 2px solid var( --lse-color-on-accent ); padding: 0.6rem 1.25rem; border-radius: 4px; font-weight: 600; cursor: pointer; } .lse-contact-form button[type="submit"]:hover { opacity: 0.9; } .lse-form-section { margin-top: 1.5rem; } / Membership's outbound apply/pay links, styled the same as the contact form's submit button for visual consistency. / .lse-button { display: inline-block; box-sizing: border-box; background-color: var( --lse-color-accent ); color: var( --lse-color-on-accent ); border: 2px solid var( --lse-color-on-accent ); padding: 0.6rem 1.25rem; border-radius: 4px; font-weight: 600; text-decoration: none; } / .lse-page a (see above) is (0,1,1) and outranks .lse-button's own (0,1,0) color, which left the Membership apply/pay link's label the same Accent as its own fill -- invisible -- at every intensity below 100%. (At 100% the .lse-chrome-full override wins over both and happens to set this same value, so it only ever looked right there by coincidence.) Matching the element and the class together raises this to (0,1,1) as well, and being later in the file it wins -- without inflating specificity further or touching the shared .lse-page a rule, which is correct for ordinary body links. / a.lse-button { color: var( --lse-color-on-accent ); } .lse-button:hover { opacity: 0.9; } / Join and Pay Dues are deliberately two distinct actions, not one merged button — the secondary (outline) treatment keeps them from reading as equally-weighted duplicates of each other. / .lse-button-secondary { background-color: transparent; color: var( --lse-color-accent ); border: 2px solid var( --lse-color-accent ); padding: calc( 0.6rem - 2px ) calc( 1.25rem - 2px ); } .lse-membership-ctas { display: flex; flex-wrap: wrap; gap: 2rem; align-items: flex-start; margin-top: 1.5rem; } / Each CTA (Application, Dues) now always renders -- a description (if set) plus either the real button or a placeholder note when its own URL isn't set yet -- so each gets its own stacked area instead of sitting directly in the flex row. / .lse-membership-cta-area { flex: 1 1 240px; min-width: 0; } .lse-membership-cta-desc { margin: 0 0 0.75rem; } .lse-membership-cta { margin: 0; } .lse-membership-cta-placeholder { margin: 0; font-style: italic; } / No top margin: on Home, this sits directly under the header and should be flush against it (its own bottom padding is zeroed for Home specifically, below). Bottom margin still separates it from the address/phone/hours section that follows. / .lse-home-media { margin: 0 0 1.5rem; } / Home is the only template with a hero image immediately below the header, so only Home's header loses its bottom padding — Leadership, Contact, etc. still get that space before their own page title. / body.page-template-page-home-php .lse-site-header { padding-bottom: 0; } .lse-home-media-img, .lse-carousel-img { width: 100%; max-width: 100%; height: auto; display: block; } / Matches .lse-page's own radius, above -- sharp corners looked wrong sitting directly on the now-rounded panel. Classic only -- Modern's hero reuses this same class for its shared carousel JS but should stay square-cornered and full-bleed. / body.lse-classic .lse-home-media-img { border-radius: 16px; } .lse-home-media-carousel { position: relative; } .lse-carousel-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem; scrollbar-width: thin; } .lse-carousel-slide { flex: 0 0 100%; scroll-snap-align: start; } .lse-carousel-prev, .lse-carousel-next { position: absolute; top: 50%; transform: translateY( -50% ); background: var( --lse-color-bg ); color: var( --lse-color-heading ); border: 1px solid var( --lse-color-muted ); border-radius: 50%; width: 2.25rem; height: 2.25rem; cursor: pointer; font-size: 1.25rem; line-height: 1; } .lse-carousel-prev { left: 0.5rem; } .lse-carousel-next { right: 0.5rem; } / 16:9 responsive wrapper for wp_oembed_get()'s returned iframe. / .lse-home-media-video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .lse-home-media-video iframe, .lse-home-media-video embed, .lse-home-media-video object { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .lse-hp-wrap { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .lse-notice { padding: 1rem; margin-bottom: 1.5rem; border-radius: 4px; } / Success/error notices are semantic status colors, not part of the 5-role brand palette — intentionally not variable-driven. / .lse-notice-success { background: #e6f4ea; border: 1px solid #34a853; } .lse-notice-error { background: #fce8e6; border: 1px solid #ea4335; } / Generous bottom padding gives the popover room to render below a marker in the grid's last row without the page itself having to grow to fit it. Not load-bearing on its own -- initCalendarPopover() in lse-frontend.js flips the popover above the marker instead whenever even this isn't enough room, so there's no exact number to get right here. / .lse-calendar-carousel { margin-top: 1rem; padding-bottom: 20rem; } .lse-calendar-carousel-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; } / .lse-button/.lse-button-secondary were written for the -tag CTAs elsewhere on the site — these are real