`
sibling of the track element. One dot per image module, click to scroll. */
.lf-photo-strip-dots {
display: flex;
gap: 8px;
justify-content: center;
align-items: center;
width: 100vw;
margin-top: 80px;
}
.lf-photo-strip-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: rgba(26, 26, 26, 0.2);
border: 0;
padding: 0;
margin: 0;
cursor: pointer;
transition: background-color 0.2s ease;
}
.lf-photo-strip-dot.is-active { background-color: var(--text-primary); }
.lf-photo-strip-dot:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }
/* Editor canvas: Embla JS is gated out by is_admin(). Render the strip as
a 4-col grid of thumbnails so the author can see every photo and click
any one to open the image popup (swap source, edit alt, etc.).
The 100vw + -50vw full-bleed dance is also undone in admin so the strip
sits inside the normal column boundary — keeps the editor's selection
outlines and add-module affordances aligned with the rest of the canvas. */
body.wp-admin .lf-photo-strip-section { overflow: visible !important; }
body.wp-admin #content-holder .lf-photo-strip-track {
position: static !important;
left: auto !important;
right: auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
width: 100% !important;
max-width: 100% !important;
overflow: visible !important;
height: auto !important;
cursor: default !important;
}
body.wp-admin #content-holder .lf-photo-strip-track > smp-content-wrapper {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
grid-auto-rows: 200px !important;
gap: 16px !important;
padding: 0 !important;
width: 100% !important;
height: auto !important;
transform: none !important;
animation: none !important; /* no marquee in the editor canvas */
}
/* Override the frontend's "natural aspect width" with a uniform cell box
so the grid stays tidy regardless of which photos the author has loaded. */
body.wp-admin .lf-photo-strip-track > smp-content-wrapper > smp-content[data-module="image"] {
width: 100% !important;
height: 200px !important;
}
body.wp-admin .lf-photo-strip-track smp-content[data-module="image"] .smp-image,
body.wp-admin .lf-photo-strip-track smp-content[data-module="image"] .smp-image .is-content {
width: 100% !important;
height: 200px !important;
}
body.wp-admin .lf-photo-strip-track smp-content[data-module="image"] .smp-image .is-content img {
width: 100% !important;
height: 200px !important;
object-fit: cover;
}
body.wp-admin .lf-photo-strip-dots { display: none !important; }
/* ---- Responsive ---- */
@media (max-width: 860px) {
/* Stack the image+text-split columns on small screens. The
max-width / flex-basis overrides are needed to beat Semplice's
`[data-xl-width="N"]` per-instance CSS, which caps both. */
.lf-img-text-split smp-row { gap: 24px !important; flex-direction: column !important; }
.lf-img-text-split__img,
.lf-img-text-split__text {
width: 100% !important;
max-width: 100% !important;
flex-basis: 100% !important;
flex: 0 0 auto !important;
}
.lf-img-text-split__img > smp-content-wrapper { min-height: 360px; }
.lf-h2-32 { font-size: 28px !important; }
.lf-serif-32-body,
#content-holder .lf-serif-32-body p { font-size: 24px !important; }
/* Photo strip row: needs display:block so the row collapses to its
content height. By default smp-row is `display: flex` AND the row
is `flex: 1 1 auto` inside `smp-container { display: flex;
flex-direction: column }`, so the row grows to fill the container's
distributed height — then `align-items: stretch` stretches the
photo-strip column past its explicit 260px. Switching the row to
block layout takes both effects out of play. Scoped via `:has()`
so only the row containing the strip is affected (the text+image
row above it stays flex). */
.lf-photo-strip-section smp-row:has(> smp-column.lf-photo-strip-track) {
display: block !important;
}
#content-holder .lf-photo-strip-track {
height: 360px !important;
}
#content-holder .lf-photo-strip-track > smp-content-wrapper {
gap: 24px !important;
padding: 0 32px !important;
height: 360px !important;
}
/* Mobile: narrower slide width, shorter max-height — same variable
heights pattern as desktop. */
.lf-photo-strip-track > smp-content-wrapper > smp-content[data-module="image"] {
flex: 0 0 220px !important;
width: 220px !important;
max-width: 220px !important;
height: auto !important;
}
.lf-photo-strip-track smp-content[data-module="image"] .smp-image,
.lf-photo-strip-track smp-content[data-module="image"] .smp-image .is-content {
width: 220px !important;
height: auto !important;
}
.lf-photo-strip-track smp-content[data-module="image"] .smp-image .is-content img {
width: 220px !important;
height: auto !important;
max-width: 220px !important;
max-height: 360px !important;
}
.lf-photo-strip-dots { margin-top: 48px; }
}
/* Editor preview-mode mirrors — Semplice's iframe doesn't reflow on
breakpoint switch, so @media never fires there. */
[data-breakpoint="sm"] .lf-img-text-split smp-row,
[data-breakpoint="xs"] .lf-img-text-split smp-row {
gap: 24px !important;
flex-direction: column !important;
}
[data-breakpoint="sm"] .lf-img-text-split__img,
[data-breakpoint="xs"] .lf-img-text-split__img,
[data-breakpoint="sm"] .lf-img-text-split__text,
[data-breakpoint="xs"] .lf-img-text-split__text {
width: 100% !important;
flex: 0 0 auto !important;
}
[data-breakpoint="sm"] .lf-img-text-split__img > smp-content-wrapper,
[data-breakpoint="xs"] .lf-img-text-split__img > smp-content-wrapper {
min-height: 360px;
}
[data-breakpoint="sm"] .lf-h2-32,
[data-breakpoint="xs"] .lf-h2-32 {
font-size: 28px !important;
}
[data-breakpoint="sm"] .lf-serif-32-body,
[data-breakpoint="xs"] .lf-serif-32-body,
[data-breakpoint="sm"] #content-holder .lf-serif-32-body p,
[data-breakpoint="xs"] #content-holder .lf-serif-32-body p {
font-size: 24px !important;
}
[data-breakpoint="sm"] .lf-photo-strip-section smp-row:has(> smp-column.lf-photo-strip-track),
[data-breakpoint="xs"] .lf-photo-strip-section smp-row:has(> smp-column.lf-photo-strip-track) {
display: block !important;
}
[data-breakpoint="sm"] #content-holder .lf-photo-strip-track,
[data-breakpoint="xs"] #content-holder .lf-photo-strip-track {
height: 360px !important;
}
[data-breakpoint="sm"] #content-holder .lf-photo-strip-track > smp-content-wrapper,
[data-breakpoint="xs"] #content-holder .lf-photo-strip-track > smp-content-wrapper {
gap: 24px !important;
padding: 0 32px !important;
height: 360px !important;
}
[data-breakpoint="sm"] .lf-photo-strip-track > smp-content-wrapper > smp-content[data-module="image"],
[data-breakpoint="xs"] .lf-photo-strip-track > smp-content-wrapper > smp-content[data-module="image"] {
flex: 0 0 220px !important;
width: 220px !important;
max-width: 220px !important;
height: auto !important;
}
[data-breakpoint="sm"] .lf-photo-strip-track smp-content[data-module="image"] .smp-image,
[data-breakpoint="xs"] .lf-photo-strip-track smp-content[data-module="image"] .smp-image,
[data-breakpoint="sm"] .lf-photo-strip-track smp-content[data-module="image"] .smp-image .is-content,
[data-breakpoint="xs"] .lf-photo-strip-track smp-content[data-module="image"] .smp-image .is-content {
width: 220px !important;
height: auto !important;
}
[data-breakpoint="sm"] .lf-photo-strip-track smp-content[data-module="image"] .smp-image .is-content img,
[data-breakpoint="xs"] .lf-photo-strip-track smp-content[data-module="image"] .smp-image .is-content img {
width: 220px !important;
height: auto !important;
max-width: 220px !important;
max-height: 360px !important;
}
[data-breakpoint="sm"] .lf-photo-strip-dots,
[data-breakpoint="xs"] .lf-photo-strip-dots { margin-top: 48px; }
/* =============================================================
Captioned Photo Carousel — atomic Saved Block (master_lfcaptionedstrip01)
Like Photo Strip (#47) but each slide is a Semplice subrow containing
[image module, text module] so the author can edit the photo AND the
caption under it via Semplice's native popups. Slide height is fixed
to 640; width follows the image's natural aspect (matches Figma's
variable-width slide design — 480/512/853 wide in the reference).
The wrapper is a CSS-keyframes marquee identical to Photo Strip; dot
pagination is appended by the same JS (lakefront_photo_strip_inline_js,
extended to also match .lf-captioned-strip-track).
Section layer: overflow:hidden + zero smp-container padding so the
track can escape to 100vw. Composite usage (Three Ways) gives the
wrapping section the same overflow:hidden so the bg keeps painting
behind the full-bleed strip.
============================================================= */
.lf-captioned-strip-section { overflow: hidden; }
.lf-captioned-strip-section smp-container { padding-left: 0 !important; padding-right: 0 !important; }
.lf-captioned-strip-section smp-row { width: 100% !important; max-width: none !important; }
/* Track = the column. 100vw escape so the strip spans viewport edges
regardless of the parent column's width — same pattern as Photo Strip. */
#content-holder .lf-captioned-strip-track {
width: 100vw !important;
max-width: 100vw !important;
flex: 1 1 100vw !important;
position: relative;
left: 50%;
margin-left: -50vw !important;
margin-right: -50vw !important;
overflow: hidden;
height: 720px; /* 640 image + 16 gap + caption headroom */
}
/* Marquee container. animation-duration set inline by JS once wrapper width
is known. align-items: flex-start anchors all slides to the same top edge
so the image-row stays level regardless of caption line count. */
#content-holder .lf-captioned-strip-track > smp-content-wrapper {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: flex-start;
gap: 126px; /* matches Figma gap-[126px] */
padding: 0 120px;
width: max-content !important;
height: 720px !important;
will-change: transform;
backface-visibility: hidden;
animation-name: lf-photo-strip-scroll;
animation-timing-function: linear;
animation-iteration-count: infinite;
/* animation-duration set inline by JS */
}
/* Slide = subrow with [image, text]. Vertical stack, 16 gap.
Slides are FIXED 512×640 (4:5 portrait) per Figma node 128:1586 — every
slide same size regardless of source aspect ratio. Images crop to fit
via object-fit:cover. Earlier "variable width by natural aspect" caused
the wide Pod source (853×640) to render 853 wide on desktop and overflow
narrow viewports on mobile, breaking the strip's visual rhythm. */
#content-holder .lf-captioned-strip-track > smp-content-wrapper > smp-subrow {
display: flex !important;
flex-direction: column !important;
align-items: flex-start;
gap: 16px;
flex: 0 0 512px !important;
width: 512px !important;
height: auto !important;
margin: 0 !important;
}
/* Recipe D image-fill chain — fixed 512×640 box, object-fit: cover crops
any non-4:5 source to the box without distorting aspect. */
.lf-captioned-strip-track smp-subrow > smp-content[data-module="image"] {
width: 512px !important;
height: 640px !important;
flex: 0 0 auto !important;
margin: 0 !important;
pointer-events: auto;
user-select: none;
-webkit-user-drag: none;
}
.lf-captioned-strip-track smp-subrow > smp-content[data-module="image"] .smp-image,
.lf-captioned-strip-track smp-subrow > smp-content[data-module="image"] .smp-image .is-content {
width: 512px !important;
height: 640px !important;
}
.lf-captioned-strip-track smp-subrow > smp-content[data-module="image"] .smp-image .is-content img {
width: 512px !important;
height: 640px !important;
max-width: 512px !important;
max-height: 640px !important;
object-fit: cover;
display: block;
border-radius: 0 !important;
}
/* Caption under the image — Inter 16 / 1.3 / text-secondary.
#content-holder prefix beats Semplice's frontend.css `#content-holder p`
which would otherwise impose margin-bottom: 1.3em (gotcha §11 +
core principle 7). */
#content-holder .lf-captioned-strip-track smp-subrow > smp-content[data-module="text"] {
width: auto !important;
max-width: 100%;
margin: 0 !important;
}
#content-holder .lf-captioned-strip__caption,
#content-holder .lf-captioned-strip-track smp-subrow > smp-content[data-module="text"] p {
font-family: 'Inter', sans-serif !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.3 !important;
color: var(--text-secondary) !important;
margin: 0 !important;
}
/* Editor canvas: drop the marquee + full-bleed dance, lay slides out
as a 3-col grid so authors can click each image / caption to edit. */
body.wp-admin .lf-captioned-strip-section { overflow: visible !important; }
body.wp-admin #content-holder .lf-captioned-strip-track {
position: static !important;
left: auto !important;
right: auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
width: 100% !important;
max-width: 100% !important;
overflow: visible !important;
height: auto !important;
cursor: default !important;
}
body.wp-admin #content-holder .lf-captioned-strip-track > smp-content-wrapper {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 24px !important;
padding: 0 !important;
width: 100% !important;
height: auto !important;
transform: none !important;
animation: none !important;
}
body.wp-admin .lf-captioned-strip-track > smp-content-wrapper > smp-subrow {
width: 100% !important;
height: auto !important;
align-items: stretch;
}
body.wp-admin .lf-captioned-strip-track smp-subrow > smp-content[data-module="image"] {
width: 100% !important;
height: 280px !important;
}
body.wp-admin .lf-captioned-strip-track smp-subrow > smp-content[data-module="image"] .smp-image,
body.wp-admin .lf-captioned-strip-track smp-subrow > smp-content[data-module="image"] .smp-image .is-content {
width: 100% !important;
height: 280px !important;
}
body.wp-admin .lf-captioned-strip-track smp-subrow > smp-content[data-module="image"] .smp-image .is-content img {
width: 100% !important;
height: 280px !important;
object-fit: cover;
}
/* The .lf-photo-strip-dots element is appended by JS to the
.lf-captioned-strip-section as well — reuses the same styles already
defined for Photo Strip above. */
/* ---- Responsive ---- */
@media (max-width: 1199px) {
#content-holder .lf-captioned-strip-track,
#content-holder .lf-captioned-strip-track > smp-content-wrapper {
height: 600px !important;
}
/* Slide box scales proportionally to keep 4:5 aspect: 416 × 520 */
#content-holder .lf-captioned-strip-track > smp-content-wrapper > smp-subrow {
flex: 0 0 416px !important;
width: 416px !important;
}
.lf-captioned-strip-track smp-subrow > smp-content[data-module="image"],
.lf-captioned-strip-track smp-subrow > smp-content[data-module="image"] .smp-image,
.lf-captioned-strip-track smp-subrow > smp-content[data-module="image"] .smp-image .is-content,
.lf-captioned-strip-track smp-subrow > smp-content[data-module="image"] .smp-image .is-content img {
width: 416px !important;
max-width: 416px !important;
height: 520px !important;
max-height: 520px !important;
}
#content-holder .lf-captioned-strip-track > smp-content-wrapper {
gap: 80px;
padding: 0 40px;
}
}
@media (max-width: 860px) {
/* Row collapse — same :has() trick as Photo Strip so only this
carousel's row collapses, not other rows in a composite section. */
.lf-captioned-strip-section smp-row:has(> smp-column.lf-captioned-strip-track) {
display: block !important;
}
#content-holder .lf-captioned-strip-track,
#content-holder .lf-captioned-strip-track > smp-content-wrapper {
height: 480px !important;
}
/* Slide box at mobile: 320 × 400 (still 4:5) */
#content-holder .lf-captioned-strip-track > smp-content-wrapper > smp-subrow {
flex: 0 0 320px !important;
width: 320px !important;
}
.lf-captioned-strip-track smp-subrow > smp-content[data-module="image"],
.lf-captioned-strip-track smp-subrow > smp-content[data-module="image"] .smp-image,
.lf-captioned-strip-track smp-subrow > smp-content[data-module="image"] .smp-image .is-content,
.lf-captioned-strip-track smp-subrow > smp-content[data-module="image"] .smp-image .is-content img {
width: 320px !important;
max-width: 320px !important;
height: 400px !important;
max-height: 400px !important;
}
#content-holder .lf-captioned-strip-track > smp-content-wrapper {
gap: 56px;
padding: 0 24px;
}
}
/* Editor preview-mode mirrors */
[data-breakpoint="lg"] #content-holder .lf-captioned-strip-track,
[data-breakpoint="lg"] #content-holder .lf-captioned-strip-track > smp-content-wrapper {
height: 600px !important;
}
[data-breakpoint="lg"] #content-holder .lf-captioned-strip-track > smp-content-wrapper > smp-subrow {
flex: 0 0 416px !important;
width: 416px !important;
}
[data-breakpoint="lg"] .lf-captioned-strip-track smp-subrow > smp-content[data-module="image"],
[data-breakpoint="lg"] .lf-captioned-strip-track smp-subrow > smp-content[data-module="image"] .smp-image,
[data-breakpoint="lg"] .lf-captioned-strip-track smp-subrow > smp-content[data-module="image"] .smp-image .is-content,
[data-breakpoint="lg"] .lf-captioned-strip-track smp-subrow > smp-content[data-module="image"] .smp-image .is-content img {
width: 416px !important;
max-width: 416px !important;
height: 520px !important;
max-height: 520px !important;
}
[data-breakpoint="lg"] #content-holder .lf-captioned-strip-track > smp-content-wrapper {
gap: 80px;
padding: 0 40px;
}
[data-breakpoint="md"] #content-holder .lf-captioned-strip-track,
[data-breakpoint="md"] #content-holder .lf-captioned-strip-track > smp-content-wrapper {
height: 560px !important;
}
[data-breakpoint="md"] #content-holder .lf-captioned-strip-track > smp-content-wrapper > smp-subrow {
flex: 0 0 384px !important;
width: 384px !important;
}
[data-breakpoint="md"] .lf-captioned-strip-track smp-subrow > smp-content[data-module="image"],
[data-breakpoint="md"] .lf-captioned-strip-track smp-subrow > smp-content[data-module="image"] .smp-image,
[data-breakpoint="md"] .lf-captioned-strip-track smp-subrow > smp-content[data-module="image"] .smp-image .is-content,
[data-breakpoint="md"] .lf-captioned-strip-track smp-subrow > smp-content[data-module="image"] .smp-image .is-content img {
width: 384px !important;
max-width: 384px !important;
height: 480px !important;
max-height: 480px !important;
}
[data-breakpoint="md"] #content-holder .lf-captioned-strip-track > smp-content-wrapper {
gap: 64px;
padding: 0 32px;
}
[data-breakpoint="sm"] .lf-captioned-strip-section smp-row:has(> smp-column.lf-captioned-strip-track),
[data-breakpoint="xs"] .lf-captioned-strip-section smp-row:has(> smp-column.lf-captioned-strip-track) {
display: block !important;
}
[data-breakpoint="sm"] #content-holder .lf-captioned-strip-track,
[data-breakpoint="sm"] #content-holder .lf-captioned-strip-track > smp-content-wrapper,
[data-breakpoint="xs"] #content-holder .lf-captioned-strip-track,
[data-breakpoint="xs"] #content-holder .lf-captioned-strip-track > smp-content-wrapper {
height: 480px !important;
}
[data-breakpoint="sm"] #content-holder .lf-captioned-strip-track > smp-content-wrapper > smp-subrow,
[data-breakpoint="xs"] #content-holder .lf-captioned-strip-track > smp-content-wrapper > smp-subrow {
flex: 0 0 320px !important;
width: 320px !important;
}
[data-breakpoint="sm"] .lf-captioned-strip-track smp-subrow > smp-content[data-module="image"],
[data-breakpoint="sm"] .lf-captioned-strip-track smp-subrow > smp-content[data-module="image"] .smp-image,
[data-breakpoint="sm"] .lf-captioned-strip-track smp-subrow > smp-content[data-module="image"] .smp-image .is-content,
[data-breakpoint="sm"] .lf-captioned-strip-track smp-subrow > smp-content[data-module="image"] .smp-image .is-content img,
[data-breakpoint="xs"] .lf-captioned-strip-track smp-subrow > smp-content[data-module="image"],
[data-breakpoint="xs"] .lf-captioned-strip-track smp-subrow > smp-content[data-module="image"] .smp-image,
[data-breakpoint="xs"] .lf-captioned-strip-track smp-subrow > smp-content[data-module="image"] .smp-image .is-content,
[data-breakpoint="xs"] .lf-captioned-strip-track smp-subrow > smp-content[data-module="image"] .smp-image .is-content img {
width: 320px !important;
max-width: 320px !important;
height: 400px !important;
max-height: 400px !important;
}
[data-breakpoint="sm"] #content-holder .lf-captioned-strip-track > smp-content-wrapper,
[data-breakpoint="xs"] #content-holder .lf-captioned-strip-track > smp-content-wrapper {
gap: 56px;
padding: 0 24px;
}
/* =============================================================
Three Ways to Live + Carousel — composite Saved Block
(master_lfthreewayscomp01)
Single section with three rows:
row 1 — header (column.lf-tier-cards-header) heading + lede
row 2 — cards (column.lf-tier-cards-card × 3) 3-up pricing cards
row 3 — carousel (column.lf-captioned-strip-track) captioned photo strip
Section composes `.lf-tier-cards` (so header + card element CSS
continues to apply) with `.lf-three-ways-composite` (which
overrides smp-container to a grid for asymmetric inter-row gaps:
48px between header and cards, 120px between cards and carousel).
grid-template-rows with explicit gap tracks is the right primitive
here because the cards row uses 3 side-by-side columns — restructuring
into nested subrows would lose Tier Cards' existing card CSS, while
keeping the rows flat costs an asymmetric gap problem that flex+gap
can't solve in one container.
============================================================= */
.lf-three-ways-composite {
overflow: hidden; /* carousel row escapes to 100vw; clip inside section */
}
.lf-three-ways-composite smp-container {
/* Override .lf-tier-cards' flex column + uniform 48px gap with a
grid that gives each inter-row track its own value. */
display: grid !important;
grid-template-columns: 1fr;
grid-template-rows: auto 48px auto 120px auto;
row-gap: 0 !important;
}
.lf-three-ways-composite > smp-container > smp-row:nth-of-type(1) { grid-row: 1; }
.lf-three-ways-composite > smp-container > smp-row:nth-of-type(2) { grid-row: 3; }
.lf-three-ways-composite > smp-container > smp-row:nth-of-type(3) { grid-row: 5; }
/* Carousel row needs unconstrained width so the track's 100vw escape
works (the track sits inside the row's column; row clipping the
column width would defeat the escape). */
.lf-three-ways-composite > smp-container > smp-row:nth-of-type(3) {
width: 100% !important;
max-width: none !important;
}
/* Responsive — same scale as the section's own padding ramp. */
@media (max-width: 1199px) {
.lf-three-ways-composite smp-container {
grid-template-rows: auto 40px auto 96px auto;
}
}
@media (max-width: 860px) {
.lf-three-ways-composite smp-container {
grid-template-rows: auto 32px auto 72px auto;
}
}
/* Editor preview-mode mirrors */
[data-breakpoint="lg"] .lf-three-ways-composite smp-container,
[data-breakpoint="md"] .lf-three-ways-composite smp-container {
grid-template-rows: auto 40px auto 96px auto;
}
[data-breakpoint="sm"] .lf-three-ways-composite smp-container,
[data-breakpoint="xs"] .lf-three-ways-composite smp-container {
grid-template-rows: auto 32px auto 72px auto;
}
/* =============================================================
Building and the land — composite Saved Block (master_lfbuildingland01)
Combines the Image + Text Split atomic (row 1) with the Photo Strip
atomic (row 2) inside a single section. The section's CSS class
should compose `lf-img-text-split` (for row 1 column-gap behaviour) +
`lf-building-and-land` (for the overflow clip + inter-row gap) +
`bg-grad-cream-peach-soft` (the gradient).
Inter-row gap is handled by smp-container's column-flex + gap. Section
top/bottom padding lives in the section's ram per breakpoint so authors
can tune it via the Semplice section popup.
============================================================= */
.lf-building-and-land {
overflow: hidden; /* photo strip is full-bleed; clip overflow inside section */
}
.lf-building-and-land smp-container {
flex-direction: column !important;
gap: 200px; /* between rows — matches Figma gap-[200px] */
}
@media (max-width: 860px) {
.lf-building-and-land smp-container { gap: 96px; }
}
[data-breakpoint="sm"] .lf-building-and-land smp-container,
[data-breakpoint="xs"] .lf-building-and-land smp-container {
gap: 96px;
}
/* The map SVG is intrinsically square (560×560 viewBox). With the default
img-text-split img column using a fixed min-height + object-fit: contain,
the SVG letterboxes against the column's ecru background at any aspect
ratio that isn't 1:1 — visible as horizontal/vertical "background tile"
gaps around the SVG, especially when the column reflows narrower or
taller than square. Lock the column wrapper to the SVG's aspect-ratio
so the container resizes to the SVG and no letterbox exists. Scoped to
.lf-building-and-land so other img-text-split usages (with rectangular
photos) keep their existing fixed-height behaviour. */
.lf-building-and-land .lf-img-text-split__img > smp-content-wrapper {
aspect-ratio: 1 / 1;
min-height: 0 !important;
}
/* Map SVG has internal transparency in its viewBox (the lower portion of
the 588×560 illustration is empty). The atomic .lf-img-text-split__img
carries `background-color: var(--color-ecru)` as a missing-image
fallback, but here it leaks through the SVG's transparent regions and
reads as a grey rectangle against the section's cream/peach gradient.
Drop the fallback for this composite so the gradient shows through. */
.lf-building-and-land .lf-img-text-split__img {
background-color: transparent !important;
}
/* =============================================================
Shared horizontal page-gutter — Tier Cards pattern.
Padding lives on smp-container (not the section) so the visual
inset is identical to Tier Cards at every viewport. Section
bg / vertical padding still live in ram (per-instance editable).
--gutter-page rebound locally on smp-container because Semplice
defines --smp-grid-outer-desktop only there, not on :root.
============================================================= */
.lf-img-text-split smp-container,
.lf-text-cta-split smp-container,
.lf-intro-split smp-container,
.lf-image-banner smp-container,
.lf-process-section smp-container,
.lf-about-hero smp-container,
.lf-events-hero smp-container,
.lf-events-section smp-container,
.lf-text-image smp-container,
.lf-about-story smp-container,
.lf-partners-section smp-container,
.lf-larger-ecosystem smp-container,
.lf-pullquote smp-container,
.lf-people-category smp-container {
--gutter-page: var(--smp-grid-outer-desktop, 120px);
padding-left: var(--gutter-page) !important;
padding-right: var(--gutter-page) !important;
}
@media (max-width: 1023px) {
.lf-img-text-split smp-container,
.lf-text-cta-split smp-container,
.lf-intro-split smp-container,
.lf-image-banner smp-container,
.lf-process-section smp-container,
.lf-about-hero smp-container,
.lf-events-hero smp-container,
.lf-events-section smp-container,
.lf-text-image smp-container,
.lf-about-story smp-container,
.lf-partners-section smp-container,
.lf-larger-ecosystem smp-container,
.lf-pullquote smp-container,
.lf-people-category smp-container { --gutter-page: 40px; }
}
@media (max-width: 640px) {
.lf-img-text-split smp-container,
.lf-text-cta-split smp-container,
.lf-intro-split smp-container,
.lf-image-banner smp-container,
.lf-process-section smp-container,
.lf-about-hero smp-container,
.lf-events-hero smp-container,
.lf-events-section smp-container,
.lf-text-image smp-container,
.lf-about-story smp-container,
.lf-partners-section smp-container,
.lf-larger-ecosystem smp-container,
.lf-pullquote smp-container,
.lf-people-category smp-container { --gutter-page: 16px; }
}
@media (max-width: 380px) {
.lf-img-text-split smp-container,
.lf-text-cta-split smp-container,
.lf-intro-split smp-container,
.lf-image-banner smp-container,
.lf-process-section smp-container,
.lf-about-hero smp-container,
.lf-events-hero smp-container,
.lf-events-section smp-container,
.lf-text-image smp-container,
.lf-about-story smp-container,
.lf-partners-section smp-container,
.lf-larger-ecosystem smp-container,
.lf-pullquote smp-container,
.lf-people-category smp-container { --gutter-page: 16px; }
}
/* Editor preview mirrors — Semplice flips data-breakpoint without
resizing the iframe, so @media rules don't fire in the editor. */
[data-breakpoint="md"] .lf-img-text-split smp-container,
[data-breakpoint="md"] .lf-text-cta-split smp-container,
[data-breakpoint="md"] .lf-intro-split smp-container,
[data-breakpoint="md"] .lf-image-banner smp-container,
[data-breakpoint="md"] .lf-process-section smp-container,
[data-breakpoint="md"] .lf-about-hero smp-container,
[data-breakpoint="md"] .lf-events-hero smp-container,
[data-breakpoint="md"] .lf-events-section smp-container,
[data-breakpoint="md"] .lf-text-image smp-container,
[data-breakpoint="md"] .lf-about-story smp-container,
[data-breakpoint="md"] .lf-partners-section smp-container,
[data-breakpoint="md"] .lf-larger-ecosystem smp-container,
[data-breakpoint="md"] .lf-pullquote smp-container,
[data-breakpoint="md"] .lf-people-category smp-container,
[data-breakpoint="sm"] .lf-img-text-split smp-container,
[data-breakpoint="sm"] .lf-text-cta-split smp-container,
[data-breakpoint="sm"] .lf-intro-split smp-container,
[data-breakpoint="sm"] .lf-image-banner smp-container,
[data-breakpoint="sm"] .lf-process-section smp-container,
[data-breakpoint="sm"] .lf-about-hero smp-container,
[data-breakpoint="sm"] .lf-events-hero smp-container,
[data-breakpoint="sm"] .lf-events-section smp-container,
[data-breakpoint="sm"] .lf-text-image smp-container,
[data-breakpoint="sm"] .lf-about-story smp-container,
[data-breakpoint="sm"] .lf-partners-section smp-container,
[data-breakpoint="sm"] .lf-larger-ecosystem smp-container,
[data-breakpoint="sm"] .lf-pullquote smp-container,
[data-breakpoint="sm"] .lf-people-category smp-container,
[data-breakpoint="xs"] .lf-img-text-split smp-container,
[data-breakpoint="xs"] .lf-text-cta-split smp-container,
[data-breakpoint="xs"] .lf-intro-split smp-container,
[data-breakpoint="xs"] .lf-image-banner smp-container,
[data-breakpoint="xs"] .lf-process-section smp-container,
[data-breakpoint="xs"] .lf-about-hero smp-container,
[data-breakpoint="xs"] .lf-events-hero smp-container,
[data-breakpoint="xs"] .lf-events-section smp-container,
[data-breakpoint="xs"] .lf-text-image smp-container,
[data-breakpoint="xs"] .lf-about-story smp-container,
[data-breakpoint="xs"] .lf-partners-section smp-container,
[data-breakpoint="xs"] .lf-larger-ecosystem smp-container,
[data-breakpoint="xs"] .lf-pullquote smp-container,
[data-breakpoint="xs"] .lf-people-category smp-container { --gutter-page: 40px; }
[data-breakpoint="xs"] .lf-img-text-split smp-container,
[data-breakpoint="xs"] .lf-text-cta-split smp-container,
[data-breakpoint="xs"] .lf-intro-split smp-container,
[data-breakpoint="xs"] .lf-image-banner smp-container,
[data-breakpoint="xs"] .lf-process-section smp-container,
[data-breakpoint="xs"] .lf-about-hero smp-container,
[data-breakpoint="xs"] .lf-events-hero smp-container,
[data-breakpoint="xs"] .lf-events-section smp-container,
[data-breakpoint="xs"] .lf-text-image smp-container,
[data-breakpoint="xs"] .lf-about-story smp-container,
[data-breakpoint="xs"] .lf-partners-section smp-container,
[data-breakpoint="xs"] .lf-larger-ecosystem smp-container,
[data-breakpoint="xs"] .lf-pullquote smp-container,
[data-breakpoint="xs"] .lf-people-category smp-container { --gutter-page: 16px; }
/* =============================================================
Text + CTA Split — atomic Saved Block (master_lftextctasplit01)
Two-column 5/7 split: left column is a heading, right column is a
body stack (serif paragraph + Inter paragraph) followed by a CTA
button. Real `gap` on the row produces the 24px column gap — no
`data-gutter="yes"` padding-as-gap hack (which would leave an
unwanted 12px inset on the row edges). Stacks to a single column
at sm/xs.
Horizontal padding lives on smp-container via the shared rule
above (Tier Cards pattern). Vertical padding + bg still in ram.
Section's ram has `data-gutter: "no"`. The row's gap is the only
source of inter-column spacing.
First used by Living at Lakefront's "Life between the apartments"
composition. Reused anywhere a designed 5-7 heading+body+CTA split
is wanted.
============================================================= */
/* Real CSS-grid layout for the 5+7 split with a single 24px gap.
`:has()` keeps this scoped to the text-cta-split row only — when the
composite section also carries `.lf-image-banner`, the single-col
image-banner row (no `__heading` child) is unaffected. */
.lf-text-cta-split smp-row:has(> smp-column.lf-text-cta-split__heading) {
display: grid !important;
grid-template-columns: 5fr 7fr;
gap: 24px;
}
/* Semplice emits per-instance `width: 41.667%` on each column from the
`width` ram field — that constrains the grid item below its track size.
Force columns to fill their grid track. */
.lf-text-cta-split smp-row:has(> smp-column.lf-text-cta-split__heading) > smp-column {
width: 100% !important;
max-width: none !important;
}
/* Left heading column — top-aligned single text module. */
.lf-text-cta-split__heading > smp-content-wrapper {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
width: 100%;
}
/* Right body column — two-subrow stack:
subrow 1 = text paragraphs (gap 16 internally),
then a CTA button below at 40px.
Mirrors Recipe B (50/50 hero) for the button-after-text pattern. */
.lf-text-cta-split__body > smp-content-wrapper {
display: flex !important;
flex-direction: column !important;
gap: 40px !important;
align-items: flex-start !important;
width: 100%;
}
.lf-text-cta-split__body smp-subrow:nth-of-type(1) {
display: flex !important;
flex-direction: column !important;
gap: 16px;
width: 100%;
}
/* Button sizes to its content (Semplice forces smp-content to 100% width
for column-stacking; override so the pill stays compact). */
.lf-text-cta-split__body > smp-content-wrapper > smp-content[data-module="button"] {
width: auto !important;
flex: 0 0 auto;
}
/* =============================================================
Image Banner — atomic Saved Block (master_lfimagebanner01)
Single 12-wide column with one popup-editable Semplice image module.
Image fills the column at 480px height with object-fit: cover.
First used as the photo row in "Life between the apartments". Reused
anywhere a full-bleed-within-grid 480px image banner is wanted.
============================================================= */
.lf-image-banner__img {
align-self: stretch;
overflow: hidden;
}
.lf-image-banner__img > smp-content-wrapper {
display: flex !important;
width: 100%;
height: 480px;
}
/* Recipe D image-fill chain — img stretches to fill the 480px column. */
.lf-image-banner__img smp-content[data-module="image"],
.lf-image-banner__img smp-content[data-module="image"] .smp-image,
.lf-image-banner__img smp-content[data-module="image"] .smp-image .is-content {
width: 100% !important;
height: 100% !important;
margin: 0 !important;
flex: 1 1 auto;
}
.lf-image-banner__img smp-content[data-module="image"] .smp-image .is-content img {
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover !important;
object-position: center;
display: block;
border-radius: 0 !important;
}
/* =============================================================
Text + CTA Split + Image Banner — responsive rules
Stack to single column under 860px; reduce image height.
Mirror @media with [data-breakpoint] for the editor preview.
============================================================= */
@media (max-width: 860px) {
/* Collapse the 5+7 grid to a single column; gap remains the row's. */
.lf-text-cta-split smp-row:has(> smp-column.lf-text-cta-split__heading) {
grid-template-columns: 1fr;
}
.lf-image-banner__img > smp-content-wrapper { height: 320px; }
}
[data-breakpoint="sm"] .lf-text-cta-split smp-row:has(> smp-column.lf-text-cta-split__heading),
[data-breakpoint="xs"] .lf-text-cta-split smp-row:has(> smp-column.lf-text-cta-split__heading) {
grid-template-columns: 1fr;
}
[data-breakpoint="sm"] .lf-image-banner__img > smp-content-wrapper,
[data-breakpoint="xs"] .lf-image-banner__img > smp-content-wrapper {
height: 320px;
}
/* =============================================================
Life between the apartments — composite Saved Block (master_lflifebetween01)
Combines the Text + CTA Split atomic (row 1) with the Image Banner
atomic (row 2) inside a single section. The composite section
stacks both atomic class names plus its own `lf-life-between`
for the inter-row gap + overflow clip.
Section gradient bg + top/bottom padding live in the section's ram
per breakpoint so authors can tune them via the Semplice section
popup. Gradient is `linear-gradient(180deg,#fefdf4 0%,#fefdf4 30%,#f1fb9f 100%)`
stored in `styles.xl.background-color` — Semplice's Background::css
detects the gradient substring and emits as background-image.
============================================================= */
.lf-life-between {
overflow: hidden;
}
.lf-life-between smp-container {
flex-direction: column !important;
gap: 120px; /* between rows — matches Figma gap-[120px] */
}
@media (max-width: 860px) {
.lf-life-between smp-container { gap: 72px; }
}
[data-breakpoint="sm"] .lf-life-between smp-container,
[data-breakpoint="xs"] .lf-life-between smp-container {
gap: 72px;
}
/* =============================================================
Intro Split — atomic Saved Block (master_lfintrosplit01)
Two-column 5/7 split: left column is a short section heading, right
column is a body stack (serif lead paragraph + Inter paragraphs).
Same shape as `.lf-text-cta-split` but without a CTA button — use
when the section needs intro copy, not an action. Real `gap` on the
row produces the 24px column gap (no `data-gutter="yes"` padding
hack). Stacks to a single column at sm/xs.
Horizontal padding lives on smp-container via the shared
--gutter-page rule. Vertical padding + bg still in ram.
Section's ram has `data-gutter: "no"`. The row's gap is the only
source of inter-column spacing.
First used by the About page's "Emerge Institute" composite.
============================================================= */
/* Real CSS-grid 5+7 split with a single 24px gap. `:has()` keeps this
scoped to the intro-split row only — when the composite section
also carries `.lf-image-banner`, the single-col image-banner row
(no `__heading` child) is unaffected. */
.lf-intro-split smp-row:has(> smp-column.lf-intro-split__heading) {
display: grid !important;
grid-template-columns: 5fr 7fr;
gap: 24px;
}
/* Semplice emits per-instance `width: 41.667%` on each column from the
`width` ram field — that constrains the grid item below its track
size. Force columns to fill their grid track. */
.lf-intro-split smp-row:has(> smp-column.lf-intro-split__heading) > smp-column {
width: 100% !important;
max-width: none !important;
}
/* Left heading column — top-aligned single text module. */
.lf-intro-split__heading > smp-content-wrapper {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
width: 100%;
}
/* Right body column — single subrow stack: serif lead + Inter body.
No CTA button in this variant (that's what differentiates it from
`.lf-text-cta-split`). Subrow gap of 16px matches Figma's gap-[16px]
between text fields inside the segment. */
.lf-intro-split__body > smp-content-wrapper {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
width: 100%;
}
.lf-intro-split__body smp-subrow:nth-of-type(1) {
display: flex !important;
flex-direction: column !important;
gap: 16px;
width: 100%;
}
/* Stack to single column under 860px — mirror @media with
[data-breakpoint] for the editor preview. */
@media (max-width: 860px) {
.lf-intro-split smp-row:has(> smp-column.lf-intro-split__heading) {
grid-template-columns: 1fr;
}
}
[data-breakpoint="sm"] .lf-intro-split smp-row:has(> smp-column.lf-intro-split__heading),
[data-breakpoint="xs"] .lf-intro-split smp-row:has(> smp-column.lf-intro-split__heading) {
grid-template-columns: 1fr;
}
/* =============================================================
Emerge Institute — composite Saved Block (master_lfemergeinst01)
Combines the Intro Split atomic (row 1) with the Image Banner
atomic (row 2) inside a single section. The composite section
stacks both atomic class names plus its own `lf-emerge-institute`
for the inter-row gap + overflow clip.
Section solid bg `#f1fb9f` (Sun accent) + top/bottom padding
live in the section's ram per breakpoint so authors can tune
them via the Semplice section popup.
First used on the About page.
============================================================= */
.lf-emerge-institute {
overflow: hidden;
}
.lf-emerge-institute smp-container {
flex-direction: column !important;
gap: 120px; /* between rows — matches Figma gap-[120px] */
}
@media (max-width: 860px) {
.lf-emerge-institute smp-container { gap: 72px; }
}
[data-breakpoint="sm"] .lf-emerge-institute smp-container,
[data-breakpoint="xs"] .lf-emerge-institute smp-container {
gap: 72px;
}
/* =============================================================
From curious to moved in — composite Saved Block
(master_lfprocess01)
Three rows in a single section:
row 1 — eyebrow (full-width text)
row 2 — 4 numbered process steps in a 7-col list + 5-col image
row 3 — fineprint + CTA pill (max-width 554)
Each step row is a Semplice subrow inside the steps column,
structured as [number-text-module, content-text-module]. The
border-top + 32 top/bottom padding per subrow gives the divider
line pattern from the Figma.
Horizontal page-gutter handled by the shared --gutter-page rule.
Vertical padding (top 120, bottom 200) lives in section ram.
Section's ram has `data-gutter: "no"` so the explicit row gap is
the only spacing source. Section bg yellow lives in section ram
(popup-editable).
============================================================= */
.lf-process-section smp-container {
flex-direction: column !important;
gap: 32px; /* eyebrow → steps → footer */
}
/* Row 2 (steps + image): cols 7+5=12 fit the full row width with NO
explicit gap. The visual "right inset" the Figma shows comes from
padding-right on the image column (see below), not a column gap. */
/* Steps column — 4 subrows stacked, each with internal flex row. */
.lf-process-steps > smp-content-wrapper {
display: flex !important;
flex-direction: column !important;
width: 100%;
}
/* Each step row: number on the left (78px), content fills the rest.
Border-top + 32 top/bottom padding gives the divider pattern. */
.lf-process-steps smp-subrow {
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
gap: 24px;
padding-top: 32px;
padding-bottom: 32px;
border-top: 1px solid var(--border-weak);
width: 100%;
}
.lf-process-steps smp-subrow > smp-content:first-child {
flex: 0 0 78px;
width: 78px !important;
}
.lf-process-steps smp-subrow > smp-content:last-child {
flex: 1 1 auto;
min-width: 0;
}
/* Step content text wraps at Figma's ~384px so the right half of the
row stays visually empty for the floating image. */
.lf-process-steps smp-subrow > smp-content:last-child .lf-h2-32 {
max-width: 384px;
}
/* Image column — centered vertically within the steps row. */
.lf-process-image {
align-self: center !important;
}
.lf-process-image > smp-content-wrapper {
display: flex !important;
width: 100%;
aspect-ratio: 447 / 308; /* matches Figma image */
}
/* Recipe D image-fill chain. */
.lf-process-image smp-content[data-module="image"],
.lf-process-image smp-content[data-module="image"] .smp-image,
.lf-process-image smp-content[data-module="image"] .smp-image .is-content {
width: 100% !important;
height: 100% !important;
margin: 0 !important;
flex: 1 1 auto;
}
.lf-process-image smp-content[data-module="image"] .smp-image .is-content img {
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover !important;
object-position: center;
display: block;
border-radius: 0 !important;
}
/* Footer column — fineprint + CTA pill, max-width 554, gap 32 between. */
.lf-process-footer > smp-content-wrapper {
display: flex !important;
flex-direction: column !important;
gap: 32px !important;
align-items: flex-start !important;
max-width: 554px;
width: 100%;
}
.lf-process-footer > smp-content-wrapper > smp-content[data-module="button"] {
width: auto !important;
flex: 0 0 auto;
}
/* Responsive: stack steps + image at narrow viewports, drop the
max-width cap on step content so it uses full width. At sm/xs the
number→text gap also tightens (24 → 16) so the narrow column
doesn't waste space on the gutter.
The max-width / flex-basis overrides on the columns are needed to
beat Semplice's `[data-xl-width="N"]` per-instance CSS (xl=7/5
here), which caps both — same pattern as lf-img-text-split. */
@media (max-width: 860px) {
.lf-process-section smp-row:has(> smp-column.lf-process-steps) {
flex-direction: column !important;
gap: 48px;
}
.lf-process-steps,
.lf-process-image {
width: 100% !important;
max-width: 100% !important;
flex-basis: 100% !important;
flex: 0 0 auto !important;
}
.lf-process-steps smp-subrow > smp-content:last-child .lf-h2-32 {
max-width: none;
}
}
@media (max-width: 640px) {
.lf-process-steps smp-subrow { gap: 16px; }
/* Number column shrinks to fit its content (just the "01" digits)
instead of holding a fixed 78px gutter — gives the text more room
on narrow screens. */
.lf-process-steps smp-subrow > smp-content:first-child {
flex: 0 0 auto !important;
width: auto !important;
}
}
[data-breakpoint="sm"] .lf-process-section smp-row:has(> smp-column.lf-process-steps),
[data-breakpoint="xs"] .lf-process-section smp-row:has(> smp-column.lf-process-steps) {
flex-direction: column !important;
gap: 48px;
}
[data-breakpoint="sm"] .lf-process-steps,
[data-breakpoint="sm"] .lf-process-image,
[data-breakpoint="xs"] .lf-process-steps,
[data-breakpoint="xs"] .lf-process-image {
width: 100% !important;
max-width: 100% !important;
flex-basis: 100% !important;
flex: 0 0 auto !important;
}
[data-breakpoint="sm"] .lf-process-steps smp-subrow > smp-content:last-child .lf-h2-32,
[data-breakpoint="xs"] .lf-process-steps smp-subrow > smp-content:last-child .lf-h2-32 {
max-width: none;
}
[data-breakpoint="sm"] .lf-process-steps smp-subrow,
[data-breakpoint="xs"] .lf-process-steps smp-subrow {
gap: 16px;
}
[data-breakpoint="sm"] .lf-process-steps smp-subrow > smp-content:first-child,
[data-breakpoint="xs"] .lf-process-steps smp-subrow > smp-content:first-child {
flex: 0 0 auto !important;
width: auto !important;
}
/* =============================================================
About Hero — composite Saved Block (master_lfabouthero01)
Two rows in a single section:
row 1 — centered heading + body subgroup
(heading max-width 792, body max-width 588)
row 2 — full-width image, 720px tall
Section bg is a vertical gradient (cream at top → sky blue at bottom,
transparent until 30%); lives in section ram so the popup picker
pre-fills correctly. Vertical padding (top 160, bottom 120) also in
ram. Horizontal page-gutter handled by the shared --gutter-page rule.
============================================================= */
.lf-about-hero smp-container {
flex-direction: column !important;
gap: 64px; /* between header and image */
}
/* Header column — centered heading + body stack. Heading and body have
different max-widths per the Figma spec, both centered.
Shared with `.lf-events-hero__header` — same centered-hero pattern. */
.lf-about-hero__header > smp-content-wrapper,
.lf-events-hero__header > smp-content-wrapper {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 24px;
width: 100%;
}
/* Heading: max 792 wide, centered, text-align center */
.lf-about-hero__header smp-content[data-module="text"]:nth-of-type(1),
.lf-events-hero__header smp-content[data-module="text"]:nth-of-type(1) {
width: 100%;
max-width: 792px;
}
.lf-about-hero__header smp-content[data-module="text"]:nth-of-type(1) .lf-h1-48,
.lf-events-hero__header smp-content[data-module="text"]:nth-of-type(1) .lf-h1-48 {
text-align: center;
}
/* Body paragraph: max 588 wide, centered */
.lf-about-hero__header smp-content[data-module="text"]:nth-of-type(2),
.lf-events-hero__header smp-content[data-module="text"]:nth-of-type(2) {
width: 100%;
max-width: 588px;
}
.lf-about-hero__header smp-content[data-module="text"]:nth-of-type(2) .lf-body-16,
.lf-about-hero__header smp-content[data-module="text"]:nth-of-type(2) .lf-body-16--muted,
.lf-about-hero__header smp-content[data-module="text"]:nth-of-type(2) .lf-body-16--muted p,
.lf-events-hero__header smp-content[data-module="text"]:nth-of-type(2) .lf-body-16,
.lf-events-hero__header smp-content[data-module="text"]:nth-of-type(2) .lf-body-16--muted,
.lf-events-hero__header smp-content[data-module="text"]:nth-of-type(2) .lf-body-16--muted p {
text-align: center;
}
/* Image column — 720px tall, white bg as load placeholder. */
.lf-about-hero__image {
align-self: stretch;
background-color: #ffffff;
overflow: hidden;
}
.lf-about-hero__image > smp-content-wrapper {
display: flex !important;
width: 100%;
height: 720px;
}
/* Recipe D image-fill chain. */
.lf-about-hero__image smp-content[data-module="image"],
.lf-about-hero__image smp-content[data-module="image"] .smp-image,
.lf-about-hero__image smp-content[data-module="image"] .smp-image .is-content {
width: 100% !important;
height: 100% !important;
margin: 0 !important;
flex: 1 1 auto;
}
.lf-about-hero__image smp-content[data-module="image"] .smp-image .is-content img {
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover !important;
object-position: center;
display: block;
border-radius: 0 !important;
}
/* Responsive — shrink image height + heading size at narrow viewports. */
@media (max-width: 860px) {
.lf-about-hero smp-container { gap: 48px; }
.lf-about-hero__image > smp-content-wrapper { height: 480px; }
.lf-h1-48 { font-size: 36px !important; }
}
@media (max-width: 640px) {
.lf-about-hero__image > smp-content-wrapper { height: 360px; }
.lf-h1-48 { font-size: 32px !important; }
}
[data-breakpoint="sm"] .lf-about-hero smp-container,
[data-breakpoint="xs"] .lf-about-hero smp-container {
gap: 48px;
}
[data-breakpoint="sm"] .lf-about-hero__image > smp-content-wrapper {
height: 480px;
}
[data-breakpoint="xs"] .lf-about-hero__image > smp-content-wrapper {
height: 360px;
}
[data-breakpoint="sm"] .lf-h1-48 { font-size: 36px !important; }
[data-breakpoint="xs"] .lf-h1-48 { font-size: 32px !important; }
/* =============================================================
Events hero — composite Saved Block (master_lfeventshero01)
Single-row centered hero: serif headline + Inter muted body,
both center-aligned. Shares the centered-header CSS pattern with
`.lf-about-hero__header` (see selector unions above) — heading
capped at 792px, body capped at 588px, 24px gap between them.
Section pink-to-cream gradient bg + vertical padding (top 160,
bottom 120) live in the section's ram so the Semplice section
popup pre-fills correctly. Gradient stored in
`styles.xl.background-color` as the gradient string — Semplice's
Background::css detects the substring and emits as background-image.
Horizontal page-gutter handled by the shared --gutter-page rule.
First used at the top of the Events page.
============================================================= */
/* No section-level overrides needed — the centered-header pattern
shared with `.lf-about-hero` covers content layout. Heading and
body responsive font-size shrinkage are global on `.lf-h1-48` and
`.lf-body-16`, so they apply automatically. */
/* =============================================================
Upcoming Events — composite Saved Block (master_lfevents01)
Section heading + dynamic event card list. Cards are rendered by
the lf-events-list custom module which fetches from
dandelion.events/o/lakefront/events.json (cached 1h, see
lakefront_fetch_dandelion_events_raw in functions.php).
Each card is a 50/50 split:
LEFT — title, tag chips, meta rows (facilitator/date/location),
"With X & Y" subtitle. Lives on the section bg.
RIGHT — clickable
wrapping a 50/50 split:
inner-left = colored "ticket" (cycled palette per card)
inner-right = full-bleed event image
Clicking the right half opens the dandelion event detail page.
Horizontal page-gutter handled by the shared --gutter-page rule.
Section bg + vertical padding live in section ram (popup-editable).
============================================================= */
/* Column wrapper — stack header subrow + cards with 48px gap. */
.lf-events-section__col > smp-content-wrapper {
display: flex !important;
flex-direction: column !important;
gap: 48px;
width: 100%;
align-items: stretch !important;
}
/* Header subrow — two text modules (title + subtitle) with 16px gap and
max-width 588 per Figma. The first subrow in the column carries this. */
.lf-events-section smp-subrow:first-of-type {
display: flex !important;
flex-direction: column !important;
gap: 16px;
width: 100%;
max-width: 588px;
}
/* Section subtitle uses text-primary (not muted) per design feedback —
readable charcoal rather than the soft secondary tone used in card
meta. Scoped to the section header subrow so card subtitles still
use their own --text-secondary rule. */
#content-holder .lf-events-section smp-subrow:first-of-type .lf-body-16,
#content-holder .lf-events-section smp-subrow:first-of-type .lf-body-16--muted,
#content-holder .lf-events-section smp-subrow:first-of-type .lf-body-16--muted p {
color: var(--text-primary) !important;
}
/* Card list — vertical stack with 48px gap matching Figma. */
.lf-events-list {
display: flex;
flex-direction: column;
gap: 48px;
width: 100%;
}
.lf-events-empty {
font-family: var(--font-sans);
font-size: 16px;
color: var(--text-secondary);
margin: 0;
}
/* Semplice's frontend.css applies aggressive content-level resets inside
`#content-holder` that bulldoze our card typography:
- `.is-content h*`, `.is-content p` → margin-bottom 1.66667rem (~30px)
- `#content-holder h3` → font-size 1.77778rem / line-height 1.94444rem
- `#content-holder p`, `#content-holder smp-content li`
→ font-size 0.888889rem / line-height 1.16667
Our class selectors (0,1,0) lose to Semplice's `#content-holder X` (1,0,1),
so this block re-declares the Figma values with `#content-holder` in the
selector. Specificity becomes (1,2,0) — wins without `!important`. */
#content-holder .lf-events-list .lf-event-card__title,
#content-holder .lf-events-list .lf-event-card__ticket-title,
#content-holder .lf-events-list .lf-event-card__subtitle,
#content-holder .lf-events-list .lf-event-card__with,
#content-holder .lf-events-list .lf-event-card__chips,
#content-holder .lf-events-list .lf-event-card__chip,
#content-holder .lf-events-list .lf-event-card__meta,
#content-holder .lf-events-list .lf-event-card__meta-row {
margin: 0;
}
#content-holder .lf-events-list .lf-event-card__title {
font-size: 24px;
line-height: 1.1;
color: var(--text-primary);
}
#content-holder .lf-events-list .lf-event-card__ticket-title {
font-size: 24px;
line-height: 1.1;
color: inherit; /* picks up palette text colour */
}
#content-holder .lf-events-list .lf-event-card__subtitle {
font-size: 14px;
line-height: 1.3;
color: var(--text-secondary);
}
#content-holder .lf-events-list .lf-event-card__with {
font-size: 10px;
line-height: 1.3;
color: inherit;
}
#content-holder .lf-events-list .lf-event-card__chip {
font-size: 12px;
line-height: 1.3;
letter-spacing: 0;
color: var(--text-primary);
}
#content-holder .lf-events-list .lf-event-card__meta-row {
font-size: 14px;
line-height: 1.3;
letter-spacing: 0;
color: var(--text-primary);
}
/* Single card — 50/50 outer split, min-height matches Figma 314.
No card-level bg — the left half carries a translucent tint that
composes against the section bg, and the right half's ticket + image
fill their grid cells with their own colours/content.
`position: relative` is the stretched-link anchor — the right half's
`` gets a `::after` overlay (below) that absolutely positions to
fill the entire card, making the whole card clickable. */
.lf-event-card {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 314px;
align-items: stretch;
position: relative;
}
.lf-event-card__right::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
/* No background — purely an invisible click target overlaying the card. */
}
/* LEFT half — meta column.
Single flex column with uniform 16px gap between all four children
(title, chips, meta, subtitle) and the whole stack vertically centered
in the card. Matches Figma node 500:3478 (p-[32px] gap-[16px]
justify-center). 32px padding on every side. */
.lf-event-card__left {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 16px;
padding: 32px;
background: rgba(0, 0, 0, 0.04);
}
.lf-event-card__title {
font-family: var(--font-serif);
font-size: 24px;
line-height: 1.1;
color: var(--text-primary);
margin: 0;
}
.lf-event-card__chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
list-style: none;
padding: 0;
margin: 0;
}
.lf-event-card__chip {
font-family: var(--font-sans);
font-size: 12px;
line-height: 1.3;
padding: 4px 8px;
border-radius: 32px;
background: rgba(0, 0, 0, 0.04);
color: var(--text-primary);
opacity: 0.8;
white-space: nowrap;
}
.lf-event-card__meta {
display: flex;
flex-direction: column;
gap: 8px;
list-style: none;
padding: 0;
margin: 0;
}
.lf-event-card__meta-row {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.3;
color: var(--text-primary);
}
.lf-event-card__icon {
width: 20px;
height: 20px;
flex: 0 0 20px;
color: var(--text-primary);
}
.lf-event-card__subtitle {
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.3;
color: var(--text-secondary);
margin: 0;
}
/* RIGHT half — clickable with flex row layout (Figma 500:3503).
16px gap between ticket and image; palette bg lives HERE so the gap
visually fills with the palette colour. Items align to top so the
ticket and image rows start flush at the card's top edge. */
.lf-event-card__right {
display: flex;
align-items: stretch;
gap: 16px;
text-decoration: none;
color: inherit;
}
/* Ticket — flex column with uniform 40px gap between brand, body and
credits. The body group's `flex: 1 0 0` lets it grow to fill the
remaining vertical space, pushing credits to the bottom naturally
— no `justify-content: space-between` hack. Transparent bg: the
palette colour shows through from `.lf-event-card__right`. */
.lf-event-card__ticket {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: 40px;
padding: 16px;
position: relative;
overflow: hidden;
}
.lf-event-card__brand {
font-family: var(--font-serif);
font-size: 16px;
letter-spacing: 0.64px;
text-transform: uppercase;
line-height: 1;
white-space: nowrap;
}
.lf-event-card__ticket-body {
flex: 1 1 0;
min-height: 0;
display: flex;
flex-direction: column;
gap: 12px; /* headline-group -> date */
}
.lf-event-card__ticket-headline {
display: flex;
flex-direction: column;
gap: 4px; /* eyebrow -> title */
}
.lf-event-card__eyebrow {
font-family: var(--font-sans);
font-size: 10px;
line-height: 1.3;
letter-spacing: 0.2px;
text-transform: uppercase;
opacity: 0.7;
}
.lf-event-card__ticket-title {
font-family: var(--font-serif);
font-size: 24px;
line-height: 1.1;
margin: 0;
}
.lf-event-card__ticket-date {
font-family: var(--font-sans);
font-size: 12px;
line-height: 1.3;
white-space: nowrap;
}
.lf-event-card__credits {
display: flex;
flex-direction: column;
gap: 8px; /* avatars -> with */
}
.lf-event-card__avatars {
display: flex;
align-items: flex-start;
isolation: isolate; /* matches Figma `isolate` — scoped stacking
so z-index on avatars works regardless of
ancestor stacking contexts. */
}
.lf-event-card__avatar {
width: 24px;
height: 24px;
border-radius: 24px;
border: 0.6px solid var(--off-white, #FEFDF4);
background: #D9D9D9;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
line-height: 1;
color: #1a1a1a;
box-sizing: border-box;
}
.lf-event-card__avatar[data-i="0"] {
/* Leftmost avatar paints on top of any following ones — z-index works
on flex items without needing position. Stacking order: left to right. */
z-index: 2;
}
.lf-event-card__avatar[data-i="1"] {
/* The avatars container has no gap because the overlap is by design.
This is the only legit "negative margin" in the file — it produces
the deliberate Figma overlap effect (24px circles with 18px stride),
not a sibling-spacing hack. */
margin-left: -6px;
z-index: 1;
}
.lf-event-card__with {
font-family: var(--font-sans);
font-size: 10px;
line-height: 1.3;
margin: 0;
overflow-wrap: anywhere; /* long facilitator lists wrap inside ticket */
word-break: break-word;
}
/* Image — flexes 1:1 with the ticket so they always split the right
half 50/50 (matches Figma's 292/292 at the 1200 design width and
scales proportionally at narrower viewports). #d9d9d9 placeholder
matches Figma's image-loading fallback. */
.lf-event-card__image {
flex: 1 1 0;
min-width: 0;
overflow: hidden;
background: #d9d9d9;
}
.lf-event-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.lf-event-card__image[data-empty="1"] {
background: #d9d9d9;
}
/* Palette cycle — 5 colors taken from the brand. Avatars on dark
tickets keep their cream background; on light tickets we tint
slightly darker so the initial letter stays readable. */
/* Ticket palette — pulls from the Figma brand tokens defined in :root.
Cycles every 8 cards via the `data-palette` attribute (i % 8 in PHP).
Palette bg lives on `.lf-event-card__right` (the flex parent) so the
16px gap between ticket and image fills with the same palette colour
— matches Figma 500:3503 etc. Text color flips per swatch lightness
so the LAKEFRONT brand line and ticket title always read clearly. */
.lf-event-card[data-palette="0"] .lf-event-card__right { background: var(--color-light-blue); color: var(--text-primary); }
.lf-event-card[data-palette="1"] .lf-event-card__right { background: var(--color-navy); color: var(--color-ecru); }
.lf-event-card[data-palette="2"] .lf-event-card__right { background: var(--color-peach); color: var(--text-primary); }
.lf-event-card[data-palette="3"] .lf-event-card__right { background: var(--color-burgundy); color: var(--color-ecru); }
.lf-event-card[data-palette="4"] .lf-event-card__right { background: var(--color-yellow); color: var(--text-primary); }
.lf-event-card[data-palette="5"] .lf-event-card__right { background: var(--color-olive); color: var(--color-ecru); }
.lf-event-card[data-palette="6"] .lf-event-card__right { background: var(--color-fuchsia); color: var(--text-primary); }
.lf-event-card[data-palette="7"] .lf-event-card__right { background: var(--color-ecru); color: var(--text-primary); }
/* Avatars are a single neutral grey with an off-white hairline border —
reads clearly on every palette so no per-palette overrides needed. */
/* Pagination — visible only when the module emits the nav (per_page > 0
and more than 1 page). The list hides cards whose data-page doesn't
match the active page; the JS toggles `is-active` on the nav button. */
/* Pagination — only show cards whose `data-page` matches the list's
`data-current-page`. PHP renders `data-current-page="1"` so page 1
is visible immediately without JS (important for the Semplice admin
canvas where the wp_footer JS doesn't fire). JS swaps the attribute
on button click. */
.lf-events-list[data-per-page]:not([data-per-page="0"]) .lf-event-card { display: none; }
.lf-events-list[data-current-page="1"] .lf-event-card[data-page="1"],
.lf-events-list[data-current-page="2"] .lf-event-card[data-page="2"],
.lf-events-list[data-current-page="3"] .lf-event-card[data-page="3"],
.lf-events-list[data-current-page="4"] .lf-event-card[data-page="4"],
.lf-events-list[data-current-page="5"] .lf-event-card[data-page="5"],
.lf-events-list[data-current-page="6"] .lf-event-card[data-page="6"],
.lf-events-list[data-current-page="7"] .lf-event-card[data-page="7"],
.lf-events-list[data-current-page="8"] .lf-event-card[data-page="8"] { display: grid; }
/* Pagination — prev/next chevron buttons flanking a row of numbered
page buttons. Numbered buttons are flat with a circular active
state; nav buttons are subtle until hovered. */
.lf-events-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
flex-wrap: wrap;
padding-top: 24px;
}
.lf-events-pagination__pages {
display: flex;
align-items: center;
gap: 4px;
}
.lf-events-pagination__btn,
.lf-events-pagination__nav {
appearance: none;
background: transparent;
border: 0;
color: var(--text-primary);
font-family: var(--font-sans);
font-size: 14px;
line-height: 1;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
padding: 0;
margin: 0;
}
.lf-events-pagination__btn {
width: 36px;
height: 36px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.lf-events-pagination__btn:hover:not(.is-active) {
background: rgba(0, 0, 0, 0.04);
}
.lf-events-pagination__btn.is-active {
background: var(--text-primary);
color: var(--color-ecru);
font-weight: 500;
}
.lf-events-pagination__nav {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
}
.lf-events-pagination__nav:hover:not(:disabled) {
background: rgba(0, 0, 0, 0.04);
}
.lf-events-pagination__nav:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.lf-events-pagination__nav svg {
display: block;
}
/* ====== Event card responsive ======
Side-by-side at ≥ 1336px. Below that, the right half (ticket + image
— the visual hook) moves to the top via grid `order` and the meta
column drops below.
Why 1336? The Figma is designed for 1200px content (120px gutters on
a 1440 viewport). At viewports just below 1336 the ticket would have
< 240px width with the side-by-side layout — the title wraps to four
lines and the date stops reading naturally. Stacking is the right
call below that threshold.
Small mobile (< 480px): the right half's inner flex-row also stacks
so the ticket sits above a full-width 200px image.
Each @media rule is mirrored with [data-breakpoint] for the Semplice
editor canvas previews. */
/* ≥ 1024 viewport (covered by the base rules above): card grid 1fr 1fr,
right is a flex row with ticket and image both `flex: 1 1 0`. They
split the right-half evenly and the card spans the full section width
at every viewport, scaling proportionally instead of clamping. */
/* < 1024 viewport — stack vertically.
DOM order is meta → ticket → image. We want image → ticket → meta,
so:
- card grid collapses to single column
- right gets `order: -1` (above meta in the grid)
- right is flex-direction: column-reverse so image (DOM-second)
renders above ticket (DOM-first) inside the right
Image becomes a 240px hero band, ticket goes content-sized below it,
meta column natural width below that. */
@media (max-width: 1023px) {
.lf-event-card {
grid-template-columns: 1fr;
min-height: 0;
}
.lf-event-card__right {
order: -1;
flex-direction: column-reverse;
align-items: stretch;
}
.lf-event-card__ticket {
flex: 0 0 auto;
min-width: 0;
}
.lf-event-card__image {
flex: 0 0 240px;
height: 240px;
width: 100%;
min-height: 0;
}
.lf-event-card__left {
padding: 32px 16px;
}
/* Body content-sized so it doesn't collapse inside the stacked
ticket (no constrained ticket height in this mode). */
.lf-event-card__ticket-body { flex: 0 0 auto; }
}
/* < 480 viewport: reduce image height for short phones. */
@media (max-width: 480px) {
.lf-event-card__image {
flex: 0 0 200px;
height: 200px;
}
}
/* Editor preview mirrors — Semplice flips [data-breakpoint] without
resizing the iframe. md/sm/xs all stack (analogous to viewport < 1024
in the @media rules); xs shortens the image. */
[data-breakpoint="md"] .lf-event-card,
[data-breakpoint="sm"] .lf-event-card,
[data-breakpoint="xs"] .lf-event-card {
grid-template-columns: 1fr;
min-height: 0;
}
[data-breakpoint="md"] .lf-event-card__right,
[data-breakpoint="sm"] .lf-event-card__right,
[data-breakpoint="xs"] .lf-event-card__right {
order: -1;
flex-direction: column-reverse;
align-items: stretch;
}
[data-breakpoint="md"] .lf-event-card__ticket,
[data-breakpoint="sm"] .lf-event-card__ticket,
[data-breakpoint="xs"] .lf-event-card__ticket {
flex: 0 0 auto;
min-width: 0;
}
[data-breakpoint="md"] .lf-event-card__image,
[data-breakpoint="sm"] .lf-event-card__image,
[data-breakpoint="xs"] .lf-event-card__image {
flex: 0 0 240px;
height: 240px;
width: 100%;
min-height: 0;
}
[data-breakpoint="md"] .lf-event-card__left,
[data-breakpoint="sm"] .lf-event-card__left,
[data-breakpoint="xs"] .lf-event-card__left {
padding: 32px 16px;
}
[data-breakpoint="md"] .lf-event-card__ticket-body,
[data-breakpoint="sm"] .lf-event-card__ticket-body,
[data-breakpoint="xs"] .lf-event-card__ticket-body {
flex: 0 0 auto;
}
[data-breakpoint="xs"] .lf-event-card__image {
flex: 0 0 200px;
height: 200px;
}
/* =============================================================
Text + Image Split — atomic Saved Block (master_lftextimage01)
Mirrors the row layout of `lf-img-text-split` (6+5 columns with
8.333% flex gap = 1-col visual offset, shared row gap rule above).
Difference from `lf-img-text-split`:
- Text column uses Inter eyebrow + Inter body (vs serif h2-32)
- Image column has fixed aspect-ratio 588/441 (vs full-height fill)
- Image column can hold an optional caption module beneath
- Section supports `--flip` modifier for image-left/text-right
(default = text-left, image-right)
First used by the About page's lineage + beliefs composite
(`lf-about-story`). Reused anywhere a designed text/image split
with a captioned image is wanted.
============================================================= */
/* Default order: text col (DOM 1st, visually LEFT) + image col (DOM 2nd, RIGHT).
`--flip` reverses the visual order without reordering the DOM. */
.lf-text-image.lf-text-image--flip smp-row {
flex-direction: row-reverse;
}
/* Text column — eyebrow + body stack, vertically centered. */
.lf-text-image__text > smp-content-wrapper {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: flex-start !important;
gap: 16px;
width: 100%;
height: 100%;
}
/* Image column — image at fixed aspect with optional caption below. */
.lf-text-image__img > smp-content-wrapper {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 8px;
width: 100%;
}
.lf-text-image__img smp-content[data-module="image"] {
width: 100% !important;
aspect-ratio: 588 / 441;
flex: 0 0 auto;
}
.lf-text-image__img smp-content[data-module="image"] .smp-image,
.lf-text-image__img smp-content[data-module="image"] .smp-image .is-content {
width: 100% !important;
height: 100% !important;
margin: 0 !important;
}
.lf-text-image__img smp-content[data-module="image"] .smp-image .is-content img {
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover !important;
object-position: center;
display: block;
border-radius: 0 !important;
background-color: #ffffff;
}
/* Responsive: stack columns at narrow viewports. The max-width and
flex-basis overrides are needed to beat Semplice's
`[data-xl-width="N"]` per-instance CSS, which caps both. */
@media (max-width: 860px) {
.lf-text-image smp-row {
gap: 24px !important;
flex-direction: column !important;
}
.lf-text-image.lf-text-image--flip smp-row {
flex-direction: column !important;
}
.lf-text-image__text,
.lf-text-image__img {
width: 100% !important;
max-width: 100% !important;
flex-basis: 100% !important;
flex: 0 0 auto !important;
}
}
[data-breakpoint="sm"] .lf-text-image smp-row,
[data-breakpoint="xs"] .lf-text-image smp-row {
gap: 24px !important;
flex-direction: column !important;
}
[data-breakpoint="sm"] .lf-text-image.lf-text-image--flip smp-row,
[data-breakpoint="xs"] .lf-text-image.lf-text-image--flip smp-row {
flex-direction: column !important;
}
[data-breakpoint="sm"] .lf-text-image__text,
[data-breakpoint="sm"] .lf-text-image__img,
[data-breakpoint="xs"] .lf-text-image__text,
[data-breakpoint="xs"] .lf-text-image__img {
width: 100% !important;
max-width: 100% !important;
flex-basis: 100% !important;
flex: 0 0 auto !important;
}
/* =============================================================
About story — composite Saved Block (master_lfaboutstory01)
Two stacked `lf-text-image` rows in a single section with sky-blue bg.
Row 1: text-left + image-right (with caption)
Row 2: image-left + text-right (no caption) — flipped via
`flex-direction: row-reverse` on the 2nd row.
Section bg + vertical padding live in section ram (popup-editable).
Inter-row gap lives in CSS (smp-container flex-column with gap).
============================================================= */
.lf-about-story smp-container {
flex-direction: column !important;
gap: 120px; /* Figma gap-[120px] */
}
.lf-about-story smp-row:nth-of-type(2) {
flex-direction: row-reverse;
}
@media (max-width: 860px) {
.lf-about-story smp-container { gap: 72px; }
/* row 2 stacks vertically — the smp-row flex-direction is reset
above by the shared @media rule */
}
[data-breakpoint="sm"] .lf-about-story smp-container,
[data-breakpoint="xs"] .lf-about-story smp-container {
gap: 72px;
}
/* =============================================================
Partner Card — atomic Saved Block (master_lfpartnercard01)
Two-line card: uppercase Inter 14 label + Inter 14 muted description.
Atomic CSS uses light-bg defaults (text-primary / text-secondary).
When placed inside a dark section (e.g. lf-partners-section), the
parent section overrides the colors to the inverted tokens.
============================================================= */
.lf-partner-card {
display: flex;
flex-direction: column;
gap: 8px;
}
.lf-partner-card__label {
font-family: var(--font-sans) !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: var(--lh-body) !important;
text-transform: uppercase;
color: var(--text-primary) !important;
margin: 0 !important;
}
.lf-partner-card__desc {
font-family: var(--font-sans) !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: var(--lh-body) !important;
color: var(--text-secondary) !important;
margin: 0;
}
/* =============================================================
Part of something larger — composite Saved Block
(master_lfpartnerssection01)
Single section with one row:
- Text column (width 5): heading + body header + 2x2 partner cards grid
- Image column (width 6): single image (aspect 588/441)
Reuses lf-text-image's row layout (6+5 with 8.333% gap via the shared
rule above). Dark surface (#1a1a1a) with inverted text tokens.
Composite section carries `lf-text-image lf-partners-section` so it
picks up the row gap from the atomic + bg/cards layout from itself.
============================================================= */
/* Dark surface — invert text colors for all text inside the section. */
.lf-partners-section .lf-h2-40,
.lf-partners-section .lf-body-16,
.lf-partners-section .lf-body-16 p {
color: var(--text-primary-inv) !important;
}
.lf-partners-section .lf-partner-card__label {
color: var(--text-primary-inv) !important;
}
.lf-partners-section .lf-partner-card__desc {
color: var(--text-secondary-inv) !important;
}
/* Inline link in the partner card description — body small, slightly
brighter than surrounding desc text (0.8 vs 0.6 alpha) so the
underlined CTA reads as interactive on the dark surface. */
.lf-partners-section .lf-partner-card__desc a,
.lf-partners-section .lf-partner-card__desc a:link,
.lf-partners-section .lf-partner-card__desc a:visited {
font-family: var(--font-sans) !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: var(--lh-body) !important;
color: rgba(254, 253, 244, 0.8) !important;
text-decoration: underline solid;
text-decoration-skip-ink: auto;
text-underline-offset: auto;
text-underline-position: from-font;
}
.lf-partners-section .lf-partner-card__desc a:hover,
.lf-partners-section .lf-partner-card__desc a:focus-visible {
color: var(--text-primary-inv) !important;
}
/* Text column — header subrow stacked above the cards-grid subrow.
72px gap between header and cards (Figma gap-[72px]). */
.lf-partners-section__text > smp-content-wrapper {
display: flex !important;
flex-direction: column !important;
gap: 72px !important;
width: 100%;
}
/* Header subrow: heading + body with 16px gap. */
.lf-partners-section__text smp-subrow:nth-of-type(1) {
display: flex !important;
flex-direction: column !important;
gap: 16px;
width: 100%;
}
/* Cards-grid subrow: 2 columns × 2 rows, 24px gap both axes.
Each child content is a single text module containing the .lf-partner-card
HTML (label + description). 4 text modules = 4 cards in the grid.
`grid-auto-flow: row` overrides Semplice's default `grid-auto-flow: column`
which would otherwise spill the extra cards into implicit columns (giving
4 columns of 107px instead of 2x2). */
.lf-partners-section__text smp-subrow:nth-of-type(2) {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
grid-auto-flow: row !important;
column-gap: 24px !important;
row-gap: 24px !important;
width: 100%;
}
/* Responsive: cards collapse to single column at xs; whole row stacks
image-below at sm/xs (inherits from lf-text-image's stacking rules). */
@media (max-width: 640px) {
.lf-partners-section__text > smp-content-wrapper { gap: 48px !important; }
.lf-partners-section__text smp-subrow:nth-of-type(2) {
grid-template-columns: 1fr;
}
}
[data-breakpoint="xs"] .lf-partners-section__text > smp-content-wrapper {
gap: 48px !important;
}
[data-breakpoint="xs"] .lf-partners-section__text smp-subrow:nth-of-type(2) {
grid-template-columns: 1fr;
}
/* =============================================================
Logo Tile — atomic Saved Block (master_lflogotile01)
Single column carrying one image module. Renders as a 1:1 dark
square with the logo centered via object-fit: contain. Drag
from "Atomic Components" into any row to add a logo column;
the parent grid arranges them when used inside the Larger
Ecosystem section.
============================================================= */
.lf-logo-tile {
aspect-ratio: 1 / 1;
background-color: #292929;
box-sizing: border-box;
/* !important needed: Semplice's #content-holder [data-gutter] reset
sets padding: 0 on every smp-column at higher specificity. */
padding: 48px !important;
display: flex !important;
align-items: center;
justify-content: center;
height: auto !important;
min-height: 0 !important;
}
.lf-logo-tile > smp-content-wrapper,
.lf-logo-tile smp-content,
.lf-logo-tile .smp-image,
.lf-logo-tile .smp-image .is-content {
display: flex !important;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
margin: 0 !important;
}
.lf-logo-tile img {
max-width: 100% !important;
max-height: 100% !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
display: block;
}
/* Scale padding with tile width on larger 2-up/1-up viewports so the
logo keeps visual presence as the tile grows past desktop's 282px. */
@media (max-width: 1023px) {
.lf-logo-tile { padding: 14% !important; }
}
@media (max-width: 480px) {
.lf-logo-tile { padding: 18% !important; }
}
[data-breakpoint="md"] .lf-logo-tile,
[data-breakpoint="sm"] .lf-logo-tile { padding: 14% !important; }
[data-breakpoint="xs"] .lf-logo-tile { padding: 18% !important; }
/* =============================================================
The Larger Ecosystem — composite Saved Block
(master_lflargereco01)
Full-bleed dark section with a centered serif header above a
4-up grid of logo tiles. Reuses the lf-logo-tile shell for each
tile; the grid auto-flows when authors add or remove Logo Tile
atomics in the tiles row. Page-gutter (120/40/16) lives on the
shared rule above.
============================================================= */
/* Stack the two rows vertically with a 120px gap (collapses on smaller
viewports). smp-container is flex-row by default. */
.lf-larger-ecosystem smp-container {
flex-direction: column !important;
gap: 6.667rem;
}
@media (max-width: 1023px) {
.lf-larger-ecosystem smp-container { gap: 4rem; }
}
@media (max-width: 640px) {
.lf-larger-ecosystem smp-container { gap: 3rem; }
}
[data-breakpoint="md"] .lf-larger-ecosystem smp-container,
[data-breakpoint="sm"] .lf-larger-ecosystem smp-container { gap: 4rem; }
[data-breakpoint="xs"] .lf-larger-ecosystem smp-container { gap: 3rem; }
/* Header column — centered serif title + Inter body, max-width 588px
to match Figma (text-field width). */
.lf-larger-ecosystem__header > smp-content-wrapper {
display: flex !important;
flex-direction: column !important;
align-items: center;
width: 100%;
}
.lf-larger-ecosystem__header smp-subrow {
display: flex !important;
flex-direction: column !important;
gap: 16px;
width: 100%;
max-width: 588px;
margin: 0 auto;
text-align: center;
}
#content-holder .lf-larger-ecosystem__header .lf-h2-40 {
color: var(--text-primary-inv) !important;
text-align: center;
}
#content-holder .lf-larger-ecosystem__header .lf-body-16,
#content-holder .lf-larger-ecosystem__header .lf-body-16 p {
color: var(--text-secondary-inv) !important;
text-align: center;
}
/* Tiles row — CSS grid 4-up, regardless of how many lf-logo-tile
columns are inside. data-gutter:"no" on the section means the row
has no built-in negative margin, so the grid sizing is honest. */
.lf-larger-ecosystem smp-row:nth-of-type(2) {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 24px !important;
width: 100%;
margin: 0 !important;
}
/* Override Semplice's per-column inline width — let the grid drive
sizing instead of the column.width.xl ram value. NB: do NOT also
reset padding-left/right here — that would beat .lf-logo-tile's
`padding` shorthand by specificity and zero out the tile's
horizontal padding. data-gutter:"no" on the section already keeps
Semplice from adding column gutter padding. */
.lf-larger-ecosystem smp-row:nth-of-type(2) > smp-column {
width: auto !important;
max-width: 100% !important;
flex: initial !important;
}
/* Responsive: 4-up → 3-up at md → 2-up at sm → 1-up at xs.
Switching to 3-up at md keeps each tile in the ~220-300px sweet
spot (versus 2-up where tiles ballooned past 400px around 900w). */
@media (max-width: 1023px) {
.lf-larger-ecosystem smp-row:nth-of-type(2) {
grid-template-columns: repeat(3, 1fr) !important;
}
}
@media (max-width: 767px) {
.lf-larger-ecosystem smp-row:nth-of-type(2) {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 479px) {
.lf-larger-ecosystem smp-row:nth-of-type(2) {
grid-template-columns: 1fr !important;
max-width: 320px;
margin: 0 auto !important;
}
}
[data-breakpoint="md"] .lf-larger-ecosystem smp-row:nth-of-type(2) {
grid-template-columns: repeat(3, 1fr) !important;
}
[data-breakpoint="sm"] .lf-larger-ecosystem smp-row:nth-of-type(2) {
grid-template-columns: repeat(2, 1fr) !important;
}
[data-breakpoint="xs"] .lf-larger-ecosystem smp-row:nth-of-type(2) {
grid-template-columns: 1fr !important;
max-width: 320px;
margin: 0 auto !important;
}
/* =============================================================
Pull Quote — composite Saved Block (master_lfpullquote01)
Full-bleed dark section with one centered serif quote at
max-width 588px. Editable as a single Semplice text module —
author clicks the quote, native popup opens, type to change.
Page-gutter (120/40/16) lives on the shared rule above.
============================================================= */
/* Center the inner column's content within the row at 588px max-width
so a long quote wraps tightly instead of stretching the row. */
.lf-pullquote__inner > smp-content-wrapper {
display: flex !important;
justify-content: center;
width: 100%;
}
.lf-pullquote__inner smp-content {
max-width: 588px;
width: 100%;
}
/* Quote typography: Instrument Serif 48px, line-height 1.3, inverted
text. clamp() lets the size shrink gracefully on narrow viewports
without an explicit @media cascade. text-indent hangs the opening
quote outside the type block (optical alignment trick from Figma). */
#content-holder .lf-pullquote .lf-pullquote__text {
font-family: var(--font-serif) !important;
font-size: clamp(28px, 4.5vw, 48px) !important;
font-weight: 400 !important;
line-height: 1.3 !important;
color: var(--text-primary-inv) !important;
margin: 0;
text-indent: -0.45em;
}
/* Mobile + tablet: switch to centered text. At narrow viewports the
588px wrapper fills the row, so left-aligned text sits hard against
the gutter and looks "off". Centering reads as balanced regardless of
wrap point. Drop the hanging-quote indent here too — it only makes
sense as an optical correction for left-aligned type. */
@media (max-width: 1023px) {
#content-holder .lf-pullquote .lf-pullquote__text {
text-align: center !important;
text-indent: 0;
}
}
[data-breakpoint="md"] #content-holder .lf-pullquote .lf-pullquote__text,
[data-breakpoint="sm"] #content-holder .lf-pullquote .lf-pullquote__text,
[data-breakpoint="xs"] #content-holder .lf-pullquote .lf-pullquote__text {
text-align: center !important;
text-indent: 0;
}
/* =============================================================
Person Card — atomic Saved Block (master_lfpersoncard01)
Single column with: portrait image (4:5 aspect) + caption subrow
(Inter Medium 14 name + Inter Regular 14 secondary role).
Layout uses `gap` on each container; no margin between siblings.
Use inside the People Category section (4-up grid auto-arranges
them); also draggable into any other row as a standalone card.
============================================================= */
/* The actual sibling container is smp-content-wrapper inside the column.
Stack the image module and the caption subrow vertically with one
real gap value — no margin hacks. */
.lf-person-card > smp-content-wrapper {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
width: 100%;
}
/* Caption subrow (name + role): own gap value, separate container. */
.lf-person-card smp-subrow {
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
width: 100%;
}
/* Strip Semplice's framework margins/padding on the inner wrappers that
live inside every smp-content. Without this, .module-placeholder and
.is-content each contribute `margin: 30px 0; padding: 130px 0` —
arbitrary spacing that compounds with the container gap. Containers
own all spacing; these wrappers just hold content. */
.lf-person-card .module-placeholder,
.lf-person-card .is-content {
margin: 0 !important;
padding: 0 !important;
}
/* Image module — 4:5 portrait wrapper. Targets both the placeholder
(empty state) and .smp-image (actual upload). Centers content via
flex now that padding-based centering is gone. */
.lf-person-card .smp-image,
.lf-person-card .module-placeholder {
aspect-ratio: 4 / 5;
width: 100%;
background-color: #f0f0eb;
display: flex !important;
align-items: center;
justify-content: center;
overflow: hidden;
}
.lf-person-card .smp-image .is-content,
.lf-person-card .smp-image .is-content > * {
width: 100%;
height: 100%;
}
.lf-person-card img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block;
}
/* Reset Semplice's #content-holder p { margin-bottom: 1.5em } cascade
on the caption text so the subrow's `gap: 4px` is the only spacing
source. This is a defaults-clear, NOT a lazy-gap. */
#content-holder .lf-person-card .lf-person-card__name,
#content-holder .lf-person-card .lf-person-card__role {
margin: 0 !important;
}
#content-holder .lf-person-card .lf-person-card__name {
font-family: var(--font-sans) !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 1.3 !important;
color: var(--text-primary) !important;
}
#content-holder .lf-person-card .lf-person-card__role {
font-family: var(--font-sans) !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 1.3 !important;
color: var(--text-secondary) !important;
}
/* =============================================================
People Category — composite Saved Block (master_lfpeoplecategory01)
40px serif label + 16px body description (left-aligned 588 segment),
then a 4-up grid of person cards. Author drags Person Card atomics
into the cards row to add more people; CSS grid auto-flows new rows.
Page-gutter (120/40/16) lives on the shared rule above.
============================================================= */
/* Stack header above cards row, with a generous gap. */
.lf-people-category smp-container {
flex-direction: column !important;
gap: 4rem; /* 72px between header and cards */
}
@media (max-width: 640px) {
.lf-people-category smp-container { gap: 3rem; }
}
[data-breakpoint="sm"] .lf-people-category smp-container,
[data-breakpoint="xs"] .lf-people-category smp-container { gap: 3rem; }
/* Header column — left-aligned 588 segment matching Figma. */
.lf-people-category__header > smp-content-wrapper {
display: flex !important;
flex-direction: column !important;
width: 100%;
}
.lf-people-category__header smp-subrow {
display: flex !important;
flex-direction: column !important;
gap: 16px;
width: 100%;
max-width: 588px;
}
#content-holder .lf-people-category__header .lf-h2-40 {
color: var(--text-primary) !important;
margin: 0;
}
#content-holder .lf-people-category__header .lf-body-16,
#content-holder .lf-people-category__header .lf-body-16 p {
color: var(--text-secondary) !important;
margin: 0;
}
/* Cards row — same responsive grid pattern as Larger Ecosystem
(4-up → 3-up at md → 2-up at sm → 1-up at xs). Vertical row gap
is 40px per Figma; horizontal column gap is 24px. */
.lf-people-category smp-row:nth-of-type(2) {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
column-gap: 24px !important;
row-gap: 40px !important;
width: 100%;
margin: 0 !important;
}
.lf-people-category smp-row:nth-of-type(2) > smp-column {
width: auto !important;
max-width: 100% !important;
flex: initial !important;
}
@media (max-width: 1023px) {
.lf-people-category smp-row:nth-of-type(2) {
grid-template-columns: repeat(3, 1fr) !important;
}
}
@media (max-width: 767px) {
.lf-people-category smp-row:nth-of-type(2) {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 479px) {
.lf-people-category smp-row:nth-of-type(2) {
grid-template-columns: 1fr !important;
max-width: 320px;
margin: 0 auto !important;
}
}
[data-breakpoint="md"] .lf-people-category smp-row:nth-of-type(2) {
grid-template-columns: repeat(3, 1fr) !important;
}
[data-breakpoint="sm"] .lf-people-category smp-row:nth-of-type(2) {
grid-template-columns: repeat(2, 1fr) !important;
}
[data-breakpoint="xs"] .lf-people-category smp-row:nth-of-type(2) {
grid-template-columns: 1fr !important;
max-width: 320px;
margin: 0 auto !important;
}
/* =============================================================
lf-people-grid — data-driven render (custom Semplice module)
Renders the same People Category visual using plain <div>s
pulled from the lf_person CPT. Sits inside whatever section the
author drops it in, so no section bg/padding here.
============================================================= */
.lf-people-grid {
display: flex;
flex-direction: column;
gap: 4rem; /* 72px between header and cards */
width: 100%;
}
@media (max-width: 640px) {
.lf-people-grid { gap: 3rem; }
}
[data-breakpoint="sm"] .lf-people-grid,
[data-breakpoint="xs"] .lf-people-grid { gap: 3rem; }
/* Header — same shape as the People Category header. */
.lf-people-grid__header {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
max-width: 588px;
}
#content-holder .lf-people-grid__header .lf-h2-40 {
color: var(--text-primary) !important;
margin: 0;
}
#content-holder .lf-people-grid__header .lf-body-16 {
color: var(--text-secondary) !important;
margin: 0;
}
/* Cards grid — 4-up → 3-up → 2-up → 1-up cascade. */
.lf-people-grid__cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: 24px;
row-gap: 40px;
width: 100%;
}
@media (max-width: 1023px) {
.lf-people-grid__cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
.lf-people-grid__cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 479px) {
.lf-people-grid__cards {
grid-template-columns: 1fr;
max-width: 320px;
margin: 0 auto;
}
}
[data-breakpoint="md"] .lf-people-grid__cards {
grid-template-columns: repeat(3, 1fr);
}
[data-breakpoint="sm"] .lf-people-grid__cards {
grid-template-columns: repeat(2, 1fr);
}
[data-breakpoint="xs"] .lf-people-grid__cards {
grid-template-columns: 1fr;
max-width: 320px;
margin: 0 auto;
}
/* Person card (plain-div variant — used by lf-people-grid). The
smp-* selectors above only fire when the card is rendered as a
Semplice column; here the children are plain <div>s with
__image / __caption suffix classes. Layout values match the
Semplice variant exactly so a category looks identical whether
it's authored via the Saved Block or rendered from the CPT. */
.lf-person-card > .lf-person-card__image,
.lf-person-card > .lf-person-card__caption {
width: 100%;
}
.lf-person-card:not(:has(> smp-content-wrapper)) {
display: flex;
flex-direction: column;
gap: 16px;
}
.lf-person-card__image {
aspect-ratio: 4 / 5;
background-color: #f0f0eb;
overflow: hidden;
}
.lf-person-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.lf-person-card__caption {
display: flex;
flex-direction: column;
gap: 4px;
}
/* When a person has a LinkedIn URL, the photo is wrapped in an .
The link should fill the image area cleanly without underline or
default link colour bleed. */
.lf-person-card__link {
display: block;
text-decoration: none;
color: inherit;
width: 100%;
}
/* Empty-state notice (no people in category yet). */
.lf-people-grid__empty {
font-family: var(--font-sans) !important;
font-size: 14px !important;
color: var(--text-secondary) !important;
margin: 0;
}
.lf-people-grid__empty em {
font-style: italic;
}
/* Render-all stack — vertical list of category grids. Gap between
categories matches the section's standard inter-row spacing scale. */
.lf-people-stack {
display: flex;
flex-direction: column;
gap: 6rem; /* 108px between categories on desktop */
width: 100%;
}
@media (max-width: 1023px) {
.lf-people-stack { gap: 4.5rem; }
}
@media (max-width: 640px) {
.lf-people-stack { gap: 3.5rem; }
}
[data-breakpoint="md"] .lf-people-stack { gap: 4.5rem; }
[data-breakpoint="sm"] .lf-people-stack,
[data-breakpoint="xs"] .lf-people-stack { gap: 3.5rem; }
/* =============================================================
Day at Lakefront — composite Saved Block (master_lfdayatlf01)
Scrollytelling "day in the life" section. Three stacked atomics
on a burgundy section:
1. .lf-day-intro centered serif title + Inter subtitle
2. .lf-day-timeline timeline list + sticky image (custom module)
3. .lf-day-outro centered serif pull-quote + button
Section vertical padding, bg, and inter-row gap live in the
composite section's ram per-breakpoint (core principle 12).
Horizontal page-gutter handled by the shared --gutter-page rule
appended further down.
============================================================= */
/* Composite section — multi-row stack. smp-container becomes a flex column
with the inter-row gap; horizontal gutter on the same rule. Burgundy bg
lives in section ram, so this rule only handles layout. */
.lf-day-at-lakefront smp-container {
flex-direction: column !important;
gap: 6rem; /* 96px between atomics */
align-items: stretch;
}
/* Override default centered-row constraint — rows should fill the gutter-
constrained container. Same pattern as other multi-row composites. */
.lf-day-at-lakefront smp-row {
width: 100% !important;
max-width: none !important;
}
/* Composite text colour overrides — burgundy section needs cream text. The
section's `.text-inverted` utility handles the body fallback; per-class
overrides below ensure h-classes, body classes, and the timeline rows
pick up the cream variant without authors touching colour pickers. */
#content-holder .lf-day-at-lakefront .lf-h1-48,
#content-holder .lf-day-at-lakefront .lf-h2-32,
#content-holder .lf-day-at-lakefront .lf-body-16 {
color: var(--text-primary-inv) !important;
}
#content-holder .lf-day-at-lakefront .lf-body-16--muted,
#content-holder .lf-day-at-lakefront .lf-body-16--muted p {
color: var(--text-secondary-inv) !important;
}
/* -------------------------------------------------------------
1. Centered intro atomic — title + subtitle
Same shape as .lf-about-hero__header / .lf-events-hero__header
(centered, gap 16, 588px body max-width) but with 16px gap
between title and subtitle (Figma node 500:2900: gap-16).
------------------------------------------------------------- */
.lf-day-intro > smp-content-wrapper {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 16px;
width: 100%;
}
.lf-day-intro smp-content[data-module="text"] {
width: 100%;
max-width: 588px;
}
.lf-day-intro smp-content[data-module="text"] .lf-h1-48,
.lf-day-intro smp-content[data-module="text"] .lf-body-16,
.lf-day-intro smp-content[data-module="text"] .lf-body-16--muted,
.lf-day-intro smp-content[data-module="text"] .lf-body-16--muted p {
text-align: center;
}
/* -------------------------------------------------------------
2. Day timeline (custom module render)
Structure (from lf-day-timeline.php):
.lf-day-timeline relative parent
ol.lf-day-timeline__list vertical row stack, full row width
li.lf-day-timeline__row 78px time + 1fr text
.lf-day-timeline__floater absolute right column
.lf-day-timeline__image-frame position: sticky, viewport centred
img.lf-day-timeline__image
------------------------------------------------------------- */
/* Grid container — two columns at desktop / tablet, flex column at mobile.
`align-items: stretch` is the grid default; we keep it so the sticky-col
fills the row height (the column the absolutely-positioned image-frame
moves within). */
.lf-day-timeline {
display: grid;
grid-template-columns: minmax(0, 1fr) 591px;
gap: 80px;
width: 100%;
margin: 0;
padding: 0;
}
/* Row list — grid column 1. Rows stack vertically via gap on the list. */
.lf-day-timeline__list {
list-style: none;
margin: 0;
padding: 0;
min-width: 0; /* grid item floor — allow text col to shrink below content min */
}
/* Each row — opacity wrapper for the active state + separator line. Border
lives on the row (not on the inner button) so when the row goes grid at
the tablet breakpoint the separator spans both text and image columns. */
.lf-day-timeline__row {
opacity: 0.5;
transition: opacity 0.35s ease;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.lf-day-timeline__row[data-active="true"] {
opacity: 1;
}
/* Hover/focus reveal — bumps inactive rows toward full opacity so the user
gets a visual hint of "this is the row you're about to scroll to". Uses
:has() to lift the row opacity from inside the button focus state. */
.lf-day-timeline__row:has(.lf-day-timeline__row-btn:hover),
.lf-day-timeline__row:has(.lf-day-timeline__row-btn:focus-visible) {
opacity: 0.85;
}
.lf-day-timeline__row[data-active="true"]:has(.lf-day-timeline__row-btn:hover),
.lf-day-timeline__row[data-active="true"]:has(.lf-day-timeline__row-btn:focus-visible) {
opacity: 1; /* active row stays at 1 — no further bump */
}
/* The clickable button covers the whole row including padding + separator.
Button reset (border, bg, font, color) so it visually matches the prior
styling — only the cursor + focus ring betray it's interactive. */
.lf-day-timeline__row-btn {
display: grid;
grid-template-columns: 78px minmax(0, 1fr);
gap: 24px;
width: 100%;
padding: 32px 0;
margin: 0;
border: 0; /* separator lives on .lf-day-timeline__row */
background: transparent;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
align-items: start;
}
.lf-day-timeline__row-btn:focus-visible {
outline: 2px solid var(--text-primary-inv);
outline-offset: -2px; /* inset so it doesn't push the row down */
}
/* Time label — Inter 16, 70% opacity. The opacity multiplies with the row's
own opacity so the active state pops correctly. */
#content-holder .lf-day-timeline__time {
font-family: var(--font-sans) !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: var(--lh-body) !important;
color: var(--text-primary-inv) !important;
opacity: 0.7;
display: block;
}
/* Title + body stack inside the right column — gap-on-parent 8px. */
.lf-day-timeline__text {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
max-width: 384px; /* Figma w-[384px] keeps text clear of the sticky image */
}
/* Title — Instrument Serif 32. The general .lf-h2-32 typography class already
exists but doesn't constrain colour at burgundy. Specific selector here. */
#content-holder .lf-day-timeline__title {
font-family: var(--font-serif) !important;
font-size: 32px !important;
font-weight: 400 !important;
line-height: var(--lh-display) !important;
color: var(--text-primary-inv) !important;
margin: 0;
}
/* Body — Inter 16, secondary-on-dark. */
#content-holder .lf-day-timeline__body {
font-family: var(--font-sans) !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: var(--lh-body) !important;
color: var(--text-secondary-inv) !important;
opacity: 0.7; /* matches Figma per-row opacity-50 on body specifically */
margin: 0;
}
/* Empty-state notice when admin hasn't populated entries yet. */
.lf-day-timeline__empty {
font-family: var(--font-sans) !important;
font-size: 14px !important;
color: var(--text-secondary-inv) !important;
margin: 0;
padding: 32px 0;
}
.lf-day-timeline__empty a { color: var(--text-primary-inv) !important; text-decoration: underline; }
/* Sticky column — grid column 2. Stretched to row height by grid default.
Provides the positioning context for the image-frame, which JS moves
within these bounds. On mobile this column is itself transformed via JS
(transform: translateY) to act as the sticky-top strip. */
.lf-day-timeline__sticky-col {
position: relative;
width: 591px;
pointer-events: none;
will-change: transform; /* mobile transforms this element */
}
/* Image frame — absolute inside the sticky-col on desktop / tablet so JS
can move it within the column to track viewport centre. On mobile this
gets reset to a normal flow box that fills the sticky-col 1:1. JS sets
`transform: translate3d()` on this element each scroll frame; will-change
promotes it to a dedicated compositor layer so the transform applies
without layout reflow and the sticky tracking stays smooth at 60fps. */
.lf-day-timeline__image-frame {
position: absolute;
top: 0;
left: 0;
width: 591px;
height: 407px;
pointer-events: auto;
overflow: hidden;
will-change: transform;
}
/* Image slots — two stacked ![]()
elements occupy the same frame. The JS
handler preloads the next entry's image into the inactive slot, then
toggles `data-visible` so the opacity transition cross-fades between
them. Hard `img.src` swaps on a single element flash; this is the
standard scrollytelling cross-fade pattern.
`will-change: opacity` promotes each slot to its own compositor layer so
the fade runs on the GPU without repainting the burgundy section behind
them — without this the swap can visibly shake on lower-end devices. */
.lf-day-timeline__image,
.lf-day-timeline__image--placeholder {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
opacity: 0;
transition: opacity 0.5s ease;
will-change: opacity;
backface-visibility: hidden;
}
.lf-day-timeline__image[data-visible="true"],
.lf-day-timeline__image--placeholder[data-visible="true"] {
opacity: 1;
}
.lf-day-timeline__image--placeholder {
background: rgba(254, 253, 244, 0.08);
}
/* -------- Editor canvas adjustments --------
The frontend has ONE shared image that swaps based on scroll position.
That's useless for authoring — JS doesn't run in admin, so the canvas
would show one image at the top of the right column with a lot of empty
burgundy below, hiding the other entries' images from view.
In the editor we collapse the grid to a single column and render every
row's image inline below its text (same shape as the mobile pattern,
but with ALL rows expanded so the author sees every entry's content at
once). This works across every [data-breakpoint] preview too — we
override per-row image visibility unconditionally with !important. */
body.wp-admin #content-holder .lf-day-timeline {
display: block !important;
}
body.wp-admin #content-holder .lf-day-timeline__sticky-col {
display: none !important;
}
body.wp-admin #content-holder .lf-day-timeline__row {
opacity: 1 !important; /* readable for editing — no scroll-driven dim */
}
/* wp-admin's global `button { height: 36px }` rule clamps every button in the
admin chrome. Our row buttons are content (not chrome) and need to be tall
enough to hold the title + body text — restore auto height. */
body.wp-admin #content-holder .lf-day-timeline__row-btn {
height: auto !important;
min-height: 0 !important;
}
body.wp-admin #content-holder .lf-day-timeline__row-image-wrap {
display: block !important; /* every row's image rendered inline */
padding-left: 102px; /* align with title column (time 78 + gap 24) */
}
body.wp-admin #content-holder .lf-day-timeline__row-image {
width: 100%;
max-width: 420px; /* matches frontend cap so editor preview matches output */
aspect-ratio: 591 / 407;
object-fit: cover;
display: block;
margin-top: 16px;
}
/* -------- Responsive --------
md (768–1023): scaled side-by-side. Image ~340px wide, text column flexes.
sm (<768) + xs (<480): sticky-top strip pattern — image becomes a full-width
horizontal banner at the top of the viewport, list scrolls underneath. */
/* Grid responsive — image column shrinks at each breakpoint so the text
column keeps a readable floor. The 1fr text column flexes to fill the
remainder once the image col is set. */
@media (max-width: 1439px) {
.lf-day-timeline {
grid-template-columns: minmax(0, 1fr) 480px;
gap: 64px;
}
.lf-day-timeline__sticky-col { width: 480px; }
.lf-day-timeline__image-frame { width: 480px; height: 330px; }
}
/* Per-row image — hidden on desktop where the shared sticky image takes
over; shown inline below each row's text at narrower viewports. */
.lf-day-timeline__row-image-wrap { display: none; }
/* Tablet (768–1199) — keep the timeline-level grid but switch to 50/50
proportions so the sticky image column gets equal space to the list.
The shared sticky image (scrollytelling pattern) runs at tablet too;
it just lives in a smaller column. Per-row inline images stay hidden
here — they only kick in below 768 where the list goes single column. */
@media (max-width: 1199px) {
.lf-day-timeline {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 32px;
}
.lf-day-timeline__sticky-col {
width: 100%; /* fill column 2 */
}
.lf-day-timeline__image-frame {
width: 100%;
height: auto;
aspect-ratio: 591 / 407; /* preserve ratio at fluid width */
}
/* Row-btn collapses to a single column at tablet — time stacks above
the title/body instead of sitting beside them. The narrower text
column at 50/50 doesn't have room for a 78px time gutter without
cramping the title wrap. */
.lf-day-timeline__row-btn {
grid-template-columns: 1fr;
gap: 8px;
}
.lf-day-timeline__text {
max-width: none; /* let title use the full row-btn width */
}
}
/* Phone (<768) — drop the timeline grid entirely. Single column, each row
shows its own image inline below its text, no shared sticky-col. Time
stacks above the title (same 1fr row-btn shape as tablet). */
@media (max-width: 767px) {
.lf-day-timeline {
display: block;
}
.lf-day-timeline__sticky-col {
display: none; /* per-row inline images take over */
}
.lf-day-timeline__list {
display: flex;
flex-direction: column;
gap: 24px; /* breathing room between rows on mobile */
}
.lf-day-timeline__row {
opacity: 1; /* no scroll-driven dim */
}
.lf-day-timeline__row-image-wrap {
display: block;
padding-left: 0; /* no gutter — time stacks above */
}
.lf-day-timeline__row-image {
width: 100%;
max-width: 420px;
aspect-ratio: 591 / 407;
object-fit: cover;
display: block;
margin-top: 16px;
}
.lf-day-timeline__row-btn {
grid-template-columns: 1fr;
gap: 8px;
padding: 24px 0;
}
.lf-day-timeline__text { max-width: none; }
#content-holder .lf-day-timeline__title { font-size: 24px !important; }
}
@media (max-width: 480px) {
#content-holder .lf-day-timeline__time { font-size: 14px !important; }
#content-holder .lf-day-timeline__title { font-size: 22px !important; }
#content-holder .lf-day-timeline__body { font-size: 14px !important; }
}
/* Editor preview mirrors — @media doesn't fire in Semplice's editor iframe.
lg/md mirror the tablet 50/50 grid (shared sticky image in column 2);
sm/xs mirror the stacked phone pattern (per-row inline images).
The `body.wp-admin` prefix is required so these match the specificity of
the body.wp-admin #content-holder admin-canvas overrides above — without
it the admin overrides win and force the stacked pattern at every
breakpoint preview. */
/* lg + md — tablet 50/50: timeline grid 1fr | 1fr, sticky-col visible. */
body.wp-admin [data-breakpoint="lg"] #content-holder .lf-day-timeline,
body.wp-admin [data-breakpoint="md"] #content-holder .lf-day-timeline {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
gap: 32px !important;
}
body.wp-admin [data-breakpoint="lg"] #content-holder .lf-day-timeline__sticky-col,
body.wp-admin [data-breakpoint="md"] #content-holder .lf-day-timeline__sticky-col {
display: block !important;
width: 100% !important;
}
body.wp-admin [data-breakpoint="lg"] #content-holder .lf-day-timeline__image-frame,
body.wp-admin [data-breakpoint="md"] #content-holder .lf-day-timeline__image-frame {
position: relative !important;
top: auto !important;
left: auto !important;
width: 100% !important;
height: auto !important;
aspect-ratio: 591 / 407;
}
body.wp-admin [data-breakpoint="lg"] #content-holder .lf-day-timeline__row-image-wrap,
body.wp-admin [data-breakpoint="md"] #content-holder .lf-day-timeline__row-image-wrap {
display: none !important; /* per-row images stay hidden when sticky-col is visible */
}
body.wp-admin [data-breakpoint="lg"] #content-holder .lf-day-timeline__row-btn,
body.wp-admin [data-breakpoint="md"] #content-holder .lf-day-timeline__row-btn {
grid-template-columns: 1fr !important;
gap: 8px !important;
}
body.wp-admin [data-breakpoint="lg"] #content-holder .lf-day-timeline__text,
body.wp-admin [data-breakpoint="md"] #content-holder .lf-day-timeline__text {
max-width: none !important;
}
/* sm + xs — phone stacked: timeline block, per-row inline images. */
body.wp-admin [data-breakpoint="sm"] #content-holder .lf-day-timeline,
body.wp-admin [data-breakpoint="xs"] #content-holder .lf-day-timeline {
display: block !important;
}
body.wp-admin [data-breakpoint="sm"] #content-holder .lf-day-timeline__sticky-col,
body.wp-admin [data-breakpoint="xs"] #content-holder .lf-day-timeline__sticky-col {
display: none !important;
}
body.wp-admin [data-breakpoint="sm"] #content-holder .lf-day-timeline__list,
body.wp-admin [data-breakpoint="xs"] #content-holder .lf-day-timeline__list {
display: flex !important;
flex-direction: column !important;
gap: 24px !important;
}
body.wp-admin [data-breakpoint="sm"] #content-holder .lf-day-timeline__row,
body.wp-admin [data-breakpoint="xs"] #content-holder .lf-day-timeline__row {
opacity: 1 !important;
}
body.wp-admin [data-breakpoint="sm"] #content-holder .lf-day-timeline__row-image-wrap,
body.wp-admin [data-breakpoint="xs"] #content-holder .lf-day-timeline__row-image-wrap {
display: block !important;
padding-left: 0 !important; /* no gutter — time stacks above */
}
body.wp-admin [data-breakpoint="sm"] #content-holder .lf-day-timeline__row-image,
body.wp-admin [data-breakpoint="xs"] #content-holder .lf-day-timeline__row-image {
width: 100% !important;
max-width: 420px !important;
aspect-ratio: 591 / 407;
object-fit: cover;
display: block;
margin-top: 16px !important;
}
body.wp-admin [data-breakpoint="sm"] #content-holder .lf-day-timeline__row-btn,
body.wp-admin [data-breakpoint="xs"] #content-holder .lf-day-timeline__row-btn {
grid-template-columns: 1fr !important;
gap: 8px !important;
padding: 24px 0;
}
body.wp-admin [data-breakpoint="sm"] #content-holder .lf-day-timeline__text,
body.wp-admin [data-breakpoint="xs"] #content-holder .lf-day-timeline__text { max-width: none !important; }
/* -------------------------------------------------------------
3. Centered outro atomic — pull quote + button
The quote is one Semplice text module containing rich text where
the "That's the point." span uses inline `color: var(--color-pink)`
(set in the text editor). The button is a standard Semplice button.
------------------------------------------------------------- */
.lf-day-outro > smp-content-wrapper {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 40px; /* Figma 500:2912 gap-40 */
width: 100%;
}
.lf-day-outro smp-content[data-module="text"] {
width: 100%;
max-width: 588px;
}
#content-holder .lf-day-outro smp-content[data-module="text"] .lf-h2-32,
#content-holder .lf-day-outro smp-content[data-module="text"] p {
text-align: center;
color: var(--text-primary-inv);
}
/* The "That's the point." accent — authors apply `lf-day-outro__accent` to
a span in the text editor; the colour comes from --color-fuchsia. */
.lf-day-outro__accent { color: var(--color-fuchsia) !important; }
/* Button — auto width, centered. Semplice's column-default 100% width is the
wrong behaviour for a single CTA; force auto so the pill keeps its native
width and centres against the parent's align-items: center. */
.lf-day-outro smp-content[data-module="button"] {
width: auto !important;
flex: 0 0 auto !important;
}
/* On-dark button colour override — Semplice's global `.smp-button .is-content`
rule uses `!important` to set the project-wide dark-on-light primary pill.
On the burgundy section we need the inverse: cream bg, dark text. Match the
selector specificity (.smp-button .is-content + ID-scope via #content-holder
wrapper class) and re-!important the colours. The Figma reference (node
500:2915) uses --cta/primary/bg with the cream #fefdf4 fallback — that's
what authors see when the section is on a dark surface. */
#content-holder .lf-day-outro .smp-button .is-content {
background: var(--bg-primary) !important;
background-image: none !important;
}
#content-holder .lf-day-outro .smp-button .is-content a {
color: var(--text-primary) !important;
}
#content-holder#content-holder .lf-day-outro .smp-button .is-content:hover {
background-color: color-mix(in srgb, var(--bg-primary), black 6%) !important;
}
#content-holder#content-holder .lf-day-outro .smp-button .is-content:hover a {
color: var(--text-primary) !important;
}
/* -------------------------------------------------------------
Horizontal page-gutter — append .lf-day-at-lakefront to the
shared selector list (per MODULE-PATTERNS §3 "Horizontal page-
gutter — the Lakefront convention"). The composite section uses
the same 120 / 40 / 16 px gutter scale as the rest of the site.
------------------------------------------------------------- */
.lf-day-at-lakefront smp-container {
--gutter-page: var(--smp-grid-outer-desktop, 120px);
padding-left: var(--gutter-page) !important;
padding-right: var(--gutter-page) !important;
}
@media (max-width: 1023px) { .lf-day-at-lakefront smp-container { --gutter-page: 40px; } }
@media (max-width: 640px) { .lf-day-at-lakefront smp-container { --gutter-page: 16px; } }
[data-breakpoint="md"] .lf-day-at-lakefront smp-container,
[data-breakpoint="sm"] .lf-day-at-lakefront smp-container { --gutter-page: 40px; }
[data-breakpoint="xs"] .lf-day-at-lakefront smp-container { --gutter-page: 16px; }
/* =============================================================
Resident Card (atomic) + People who live here (composite)
-----------------------------------------------------------
Atomic: .lf-resident-card (type=column Saved Block)
A single video-thumbnail card — photo with a Play-video pill
centered + a duration tag in the top-left, name/role caption
below. Authors edit the photo via the image popup and the
caption via the text popup. Play pill + duration are CSS-baked
decorative overlays (no real video link; if needed later the
image module's link target field carries one).
Composite: .lf-people-here (type=section Saved Block)
Heading + 3-up grid of resident cards + CTA button. Authors
can drag more Resident Cards into the cards row from the
Atomic Components panel; the flex+wrap row auto-handles 4-up
or higher counts.
============================================================= */
/* -- Resident Card (atomic) --------------------------------- */
.lf-resident-card > smp-content-wrapper {
display: flex !important;
flex-direction: column !important;
gap: 16px;
}
.lf-resident-card .module-placeholder,
.lf-resident-card .is-content {
margin: 0 !important;
padding: 0 !important;
}
/* Video slot — sizes to the video's natural aspect ratio at full card
width. Each card in the row therefore takes on the shape of its own
source (portrait videos are tall, landscape are short, no cropping).
The row aligns cards to the top so caption rows sit just under each
video — the bottoms are intentionally ragged.
Empty / broken slots (no