— an admin who moves it down the page must not get a section hanging over its neighbour. */ main > .ll-hero:first-child { margin-top: calc(-1 * var(--ll-header-h)); padding-top: calc(var(--ll-header-h) + clamp(16px, 3vw, 48px)); } /* The hero stage is wider than the standard 1200px column: in the design the two headline words sit near the edges of the viewport, not of the text column. Scoped to this section only. */ .ll-hero__inner { max-width: 1340px; min-height: clamp(340px, 38.5vw, 556px); /* Figma: dome bottoms at ~775px of 1440 */ display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: auto auto 1fr; grid-template-areas: "word-l media word-r" ". media pill" ". media cta"; column-gap: clamp(8px, 1.5vw, 24px); align-items: start; } /* h1 disappears as a box; its spans become grid items. */ .ll-hero__title { display: contents; } /* Figma paints the two headline words WHITE over the confetti wall. A soft dark shadow lifts them off the light cream band so they stay legible. */ .ll-hero__word { display: block; position: relative; z-index: 4; color: var(--ll-white); text-shadow: 0 2px 14px rgba(47, 38, 26, .30), 0 1px 2px rgba(47, 38, 26, .28); font-size: clamp(34px, 4.6vw, 64px); line-height: 1.05; text-wrap: balance; /* Figma: the headline sits at ~45% of the band, level with the boy's face. */ margin-top: clamp(40px, 9.5vw, 140px); } .ll-hero__word--l { grid-area: word-l; text-align: left; } .ll-hero__word--r { grid-area: word-r; text-align: right; } .ll-hero__pill { grid-area: pill; justify-self: end; position: relative; z-index: 4; margin-top: clamp(10px, 1.6vw, 22px); font-size: clamp(30px, 4.2vw, 60px); } .ll-hero__cta { grid-area: cta; justify-self: end; align-self: start; position: relative; z-index: 4; margin-top: clamp(20px, 3vw, 44px); } /* The confetti band itself ends in scallops (Union.png). The domes inherit the band's own confetti wash and get their shape from a mask, so the edge reads against the plain cream section below — a flat-cream dome would be invisible there. Children (photo, headline) stay unmasked. */ .ll-hero.ll-confetti.ll-scallop-bottom::after { background: inherit; -webkit-mask-image: radial-gradient(ellipse calc(var(--ll-scallop-w) / 2) var(--ll-scallop-h) at 50% 0%, #000 0 99.5%, transparent 100%); mask-image: radial-gradient(ellipse calc(var(--ll-scallop-w) / 2) var(--ll-scallop-h) at 50% 0%, #000 0 99.5%, transparent 100%); -webkit-mask-size: var(--ll-scallop-w) var(--ll-scallop-h); mask-size: var(--ll-scallop-w) var(--ll-scallop-h); -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; } /* The photo overhangs into the scallop row so the cake sits inside the domes. This strip paints the NEXT band's colour into the gaps between the domes, on top of the photo, so the scalloped edge runs unbroken across the cake instead of the photo's flat bottom covering three domes. It tiles from the section's own left edge, exactly like ::after, so the two always line up. */ .ll-hero.ll-scallop-bottom::before { content: ''; position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--ll-scallop-h)); height: var(--ll-scallop-h); z-index: 4; pointer-events: none; background-image: radial-gradient(ellipse calc(var(--ll-scallop-w) / 2) var(--ll-scallop-h) at 50% 0%, transparent 0 99.5%, var(--ll-hero-next-bg, var(--ll-cream)) 100%); background-size: var(--ll-scallop-w) var(--ll-scallop-h); background-repeat: repeat-x; background-position: 0 0; } /* The photo/video column: bottom-aligned so it stands ON the scalloped edge. */ .ll-hero__media { grid-area: media; align-self: end; position: relative; /* Above the scalloped edge (z-index 2) so the cake sits ON the bunting, as in the Figma hero; the headline (4) still wins where the word overlaps it. */ z-index: 3; width: min(var(--ll-hero-media-w), 36vw); aspect-ratio: 2 / 3; /* Pulled up under the header island (the crown tucks behind it in Figma) and down into the scallop row (the cake bottom sits on the dome bottoms). */ margin-top: clamp(-110px, -7vw, -60px); margin-bottom: calc(-1 * var(--ll-scallop-h)); overflow: hidden; /* Feathered edges so the cut-out photo melts into the confetti band the way the full-bleed photo does in the Figma hero. */ -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 11%, #000 89%, transparent 100%), linear-gradient(180deg, transparent 0, #000 12%, #000 100%); mask-image: linear-gradient(90deg, transparent 0, #000 11%, #000 89%, transparent 100%), linear-gradient(180deg, transparent 0, #000 12%, #000 100%); -webkit-mask-composite: source-in; mask-composite: intersect; } .ll-hero__media img, .ll-hero__media video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; /* Static, nothing moves on scroll. It only holds the desktop framing the old parallax pre-scale used to set, so the crown still tucks under the header island the way Figma draws it. */ transform: scale(1.05); } /* ── ≤1024: ONE STAGE — the headline and the CTA sit on the confetti wall, the photo bleeds edge to edge and rises to meet the button with its top dissolved into that same wall. Stacking the copy over a separate framed photo read as two blocks; this reads as one picture, the way the three-column desktop stage does. ── */ @media (max-width: 1024px) { .ll-hero { --ll-header-h: 116px; } .ll-hero__inner { max-width: var(--container); min-height: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; grid-template-areas: "title" "cta" "media"; justify-items: center; text-align: center; } /* Back to a normal heading: "Unforgettable Celebrations in Seattle". */ .ll-hero__title { display: block; grid-area: title; max-width: 20ch; } .ll-hero__word { display: inline; font-size: clamp(36px, 7.4vw, 64px); margin-top: 0; } .ll-hero__word--l::after { content: ' '; } .ll-hero__pill { margin-top: 0; font-size: clamp(34px, 7vw, 60px); } .ll-hero__cta { justify-self: center; margin-top: clamp(18px, 3.2vw, 30px); } .ll-hero__media { /* Full-bleed: stretch to the track, then step out over the container gutter. Deliberately not 100vw — that counts a desktop scrollbar and would give the page a horizontal scroll at tablet widths. */ justify-self: stretch; width: auto; margin-inline: calc(-1 * var(--gutter)); /* The crown tucks under the button here, the way it tucks under the header island on the desktop stage. Fixed, not fluid: a vw-scaled overlap grows faster than the photo and starts eating the face on tablets. */ margin-top: -44px; /* The photo's own ratio, so phones show it whole and only the sides ever get trimmed; the cap keeps a 1024px tablet from a 576px-tall picture. Checked at 360-1024: the button always clears the boy's eyes by 37px+. */ aspect-ratio: 16 / 9; max-height: clamp(300px, 46vw, 520px); /* Only the top feathers now: the sides reach the screen edge, so the photo's own confetti wall continues the band's instead of ending in a visible frame. */ -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 100%); mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 100%); } /* The full-bleed framing is measured at scale 1 - the desktop pre-scale would push the boy out of the crop the button was tuned against. */ .ll-hero__media img, .ll-hero__media video { transform: none; } } @media (max-width: 768px) { .ll-hero { --ll-header-h: 100px; } } @media (max-width: 480px) { .ll-hero { --ll-header-h: 94px; } .ll-hero__word { font-size: clamp(32px, 9.4vw, 44px); } .ll-hero__pill { font-size: clamp(30px, 8.6vw, 42px); } .ll-hero__cta .ll-btn { padding-inline: 26px; } } /* ===== ll-location.css ===== */ /* ── ll-location ────────────────────────────────────────────────────────── Slice-07/08: a wave divider opens the band, then a rounded map on the left and heading / address / body / two-column check list on the right. Breakpoints: <=1024 map above the text · <=768 features collapse to one column. */ /* Figma: one band with Decorations, whose bottom padding is the 80px above the dashed rule; another 80px separates the rule from the map. The rule is white. */ .ll-location { padding-top: 0; } .ll-location__rule { margin-bottom: clamp(40px, 5.5vw, 80px); opacity: .9; } .ll-location__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; } /* Map — rounded card with the same radius and shadow as .ll-card--lg. */ .ll-location__map { position: relative; border-radius: var(--r-card-lg); overflow: hidden; background: var(--ll-sky-soft); box-shadow: var(--ll-shadow-soft); /* The design's map card is taller than it is wide (~490x590 at 1440). */ aspect-ratio: 5 / 6; } /* Sits BEHIND the iframe. Google's embed is blocked or slow often enough (ad-blockers, proxies, some regions) that an empty box is a real outcome; the address and a link stay useful in that case. The loaded iframe is opaque and covers this completely. */ .ll-location__mapfallback { position: absolute; inset: 0; z-index: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 28px; text-align: center; color: var(--ll-blue); font-family: var(--font-ui); font-size: var(--fs-ui); line-height: 1.5; background: var(--ll-sky-soft); } .ll-location__mapfallback [aria-hidden] { pointer-events: none; } /* Transparent on purpose: an opaque iframe would hide the fallback beneath it even while the map has not painted. Google's own page covers it once loaded. */ .ll-location__frame { position: relative; z-index: 1; background: transparent; } .ll-location__frame, .ll-location__maplink, .ll-location__mapimg { display: block; width: 100%; height: 100%; border: 0; } .ll-location__mapimg { object-fit: cover; } .ll-location__maplink { transition: transform var(--tx-base); } .ll-location__maplink:hover { transform: scale(1.02); } /* Body column */ .ll-location__heading { margin: 0; } .ll-location__address { display: inline-block; margin-top: 18px; font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-ui); line-height: 1.5; color: var(--ll-blue); text-decoration: none; } a.ll-location__address:hover { color: var(--ll-orange); text-decoration: underline; } .ll-location__text { margin-top: 18px; } .ll-location__features { margin-top: clamp(24px, 3vw, 36px); } /* The shared .ll-check-list only goes two-column at 768; the location list is two-column from 620 because it lives in a narrower column of short labels. */ @media (min-width: 620px) { .ll-location__features { grid-template-columns: 1fr 1fr; } } @media (max-width: 1024px) { /* Map above the text, and give it back some height now that it is full width. */ .ll-location__grid { grid-template-columns: 1fr; gap: 32px; } .ll-location__map { aspect-ratio: 16 / 11; max-height: 460px; } } @media (max-width: 768px) { .ll-location__rule { margin-bottom: 36px; } .ll-location__features { grid-template-columns: 1fr; } .ll-location__map { aspect-ratio: 4 / 3; } } @media (max-width: 480px) { .ll-location__map { border-radius: var(--r-card); aspect-ratio: 1 / 1; } .ll-location__text { margin-top: 14px; } } /* ===== ll-morefun.css ===== */ /* ═══ ll-morefun — "More Fun" (slices 05/06) ══════════════════════════════ Light-blue band, heading over an orange eyebrow, then three sky photo cards with a blue check list and a round arrow in the bottom-right corner. */ /* Slices 05→06 wash the band into the cream page behind the cards; the fade is tied to the default band so a different admin choice stays a flat colour. */ .ll-morefun.ll-band--sky-soft { background-image: linear-gradient(180deg, rgba(249, 239, 228, 0) 26%, var(--ll-cream) 88%); } .ll-morefun__eyebrow { margin: 26px 0 0; } .ll-morefun__lead { max-width: 74ch; margin-top: 22px; } .ll-morefun__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: clamp(34px, 4.2vw, 56px); } .ll-morefun__grid > li { display: flex; } .ll-morefun__grid > li > * { width: 100%; } /* lulu.css re-applies a padding on .ll-card inside its 768/480 media queries, which outranks the earlier "padding:0" on .ll-card--media — keep photo cards flush at every width. */ .ll-morefun__grid .ll-card--media { padding: 0; } .ll-morefun__card .ll-card__media { height: 300px; flex-basis: 300px; } .ll-morefun__card .ll-card__body { display: flex; flex-direction: column; align-items: stretch; gap: 22px; padding: 28px 28px 26px; } .ll-morefun__card .ll-card__title { margin: 0; } /* One column even above 768px — the shared list splits into two by default. */ .ll-morefun__list { grid-template-columns: minmax(0, 1fr); gap: 14px; } /* White disc with an orange arrow, bottom-right (slice 06). */ .ll-morefun__go { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%; background: var(--ll-white); display: inline-grid; place-items: center; align-self: flex-end; margin-top: auto; transition: transform var(--tx-base), box-shadow var(--tx-base); } .ll-morefun__go::after { content: ''; width: 22px; height: 22px; background: var(--ll-orange); -webkit-mask: var(--ll-icon-arrow) center / 22px 22px no-repeat; mask: var(--ll-icon-arrow) center / 22px 22px no-repeat; } .ll-morefun__card:hover .ll-morefun__go { transform: translateX(3px); box-shadow: var(--ll-shadow-soft); } /* ── Responsive ───────────────────────────────────────────────────────── */ @media (max-width: 1024px) { /* two cards, then the third full width underneath */ .ll-morefun__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ll-morefun__grid > li:last-child:nth-child(odd) { grid-column: 1 / -1; } .ll-morefun__card .ll-card__media { height: 260px; flex-basis: 260px; } } @media (max-width: 768px) { .ll-morefun__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; } .ll-morefun__eyebrow { margin-top: 18px; } .ll-morefun__lead { margin-top: 16px; } .ll-morefun__card .ll-card__media { height: 240px; flex-basis: 240px; } .ll-morefun__card .ll-card__body { padding: 24px 22px 22px; gap: 18px; } } @media (max-width: 480px) { .ll-morefun__card .ll-card__media { height: 210px; flex-basis: 210px; } .ll-morefun__go { flex-basis: 48px; width: 48px; height: 48px; } .ll-morefun__go::after { width: 20px; height: 20px; -webkit-mask-size: 20px 20px; mask-size: 20px 20px; } } /* ===== ll-newsletter.css ===== */ /* ── ll-newsletter ──────────────────────────────────────────────────────── A white island on the band (same shape language as the founder card in slice-08): the pitch on the left, the sign-up row on the right. Breakpoints: <=900 stacked · <=768 field + button stack · <=480 tighter pad. */ .ll-newsletter__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; background: var(--ll-white); border-radius: var(--r-card-lg); padding: clamp(28px, 4vw, 48px); box-shadow: var(--ll-shadow-soft); } .ll-newsletter__text { margin-top: 14px; } .ll-newsletter__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; } /* With a name field the row becomes name / e-mail on the first line and the button underneath, so nothing is squeezed below its 56px minimum. */ .ll-newsletter__row--named { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ll-newsletter__row--named .ll-newsletter__submit { grid-column: 1 / -1; } .ll-newsletter__submit { white-space: nowrap; } .ll-newsletter__msg { margin: 0; } @media (max-width: 900px) { .ll-newsletter__panel { grid-template-columns: 1fr; } } @media (max-width: 768px) { /* Stack the field and the button — a 40%-wide e-mail box is unusable. */ .ll-newsletter__row, .ll-newsletter__row--named { grid-template-columns: 1fr; } .ll-newsletter__submit { width: 100%; } } @media (max-width: 480px) { .ll-newsletter__panel { border-radius: var(--r-card); padding: 22px; } .ll-newsletter__text { margin-top: 10px; } } /* ===== ll-offering.css ===== */ /* =========================================================================== ll-offering — "What we are offering" (Figma slice-00 / slice-01) A 12-column grid whose named areas scatter seven photo links around the centred heading block: three across the top, the heading in the middle flanked by two, and two more underneath. Each slot has its own silhouette from the Figma frame — pills, rounded squares and a circle, some rotated — plus a vertical nudge so the ring reads hand-placed rather than tabular. =========================================================================== */ /* Rotated silhouettes may poke a few pixels past the viewport on narrow desktops; clip that overflow horizontally so the page never gains a sideways scroll. */ .ll-offering { overflow-x: clip; } .ll-offering__ring { display: grid; grid-template-columns: repeat(12, 1fr); gap: 28px 24px; align-items: start; grid-template-areas: "s1 s1 s1 s1 s2 s2 s2 s2 s3 s3 s3 s3" "s4 s4 s4 hd hd hd hd hd hd s7 s7 s7" "s4 s4 s4 s5 s5 s5 s6 s6 s6 s7 s7 s7"; } /* Heading block — Figma frame 588px wide: Inter 700 18/32 eyebrow, Lora 48/1.25 title, Inter 500 18/32 lead, 8px and 16px apart. */ .ll-offering__head { grid-area: hd; align-self: center; width: 100%; max-width: 588px; margin-inline: auto; padding-inline: 8px; } .ll-offering__head .ll-eyebrow { font-weight: 700; line-height: 32px; margin-bottom: 8px; } .ll-offering__head h2 { line-height: 1.25; margin-bottom: 16px; } .ll-offering__sub { margin-inline: auto; max-width: 100%; font-weight: 500; line-height: 32px; } /* The scatter uses margins, not transforms: `.reveal` owns `transform` on the card and would wipe the offsets out the moment a card is revealed. For the same reason the silhouettes are rotated on the MEDIA box, not on the card, and the caption pill (a sibling of the media) stays level. Offsets are the Figma positions at 1440 relative to the ring's top-left. */ .ll-offering__slot { position: relative; margin-inline: 0; } .ll-offering__slot--1 { grid-area: s1; --ll-circle-size: 320px; justify-self: start; margin: 62px 0 0 -18px; } .ll-offering__slot--2 { grid-area: s2; --ll-circle-size: 380px; justify-self: center; } .ll-offering__slot--3 { grid-area: s3; --ll-circle-size: 320px; justify-self: center; margin-top: 98px; } /* The three-column side areas (270px at 1440) are narrower than these silhouettes, so they take their design width outright and overhang the area. */ .ll-offering__slot--4, .ll-offering__slot--5, .ll-offering__slot--6, .ll-offering__slot--7 { width: var(--ll-circle-size); max-width: none; } .ll-offering__slot--4 { grid-area: s4; --ll-circle-size: 280px; align-self: start; justify-self: start; margin: 44px 0 0 -31px; } .ll-offering__slot--5 { grid-area: s5; --ll-circle-size: 280px; justify-self: start; margin-left: -40px; } .ll-offering__slot--6 { grid-area: s6; --ll-circle-size: 280px; justify-self: start; margin-top: 26px; } .ll-offering__slot--7 { grid-area: s7; --ll-circle-size: 320px; align-self: start; justify-self: start; margin: -16px 0 0 -35px; } /* Silhouettes (Figma Rectangles 28–34). Radius 999 on a non-square box is a pill. */ .ll-offering__slot--1 .ll-circle-card__media { aspect-ratio: 320 / 368; border-radius: 999px; transform: rotate(-12deg); } .ll-offering__slot--2 .ll-circle-card__media { aspect-ratio: 380 / 320; border-radius: 999px; transform: rotate(8deg); } .ll-offering__slot--3 .ll-circle-card__media { border-radius: 39%; } /* 125 / 320 */ .ll-offering__slot--4 .ll-circle-card__media { border-radius: 34%; } /* 96 / 280 */ .ll-offering__slot--5 .ll-circle-card__media { aspect-ratio: 280 / 312; border-radius: 999px; transform: rotate(-12deg); } .ll-offering__slot--7 .ll-circle-card__media { aspect-ratio: 320 / 368; border-radius: 999px; transform: rotate(12deg); } /* Captions sit centred on the bottom edge of each silhouette. */ .ll-offering .ll-circle-card .ll-pill-label { left: 50%; right: auto; bottom: -30px; width: max-content; /* `left: 50%` alone would shrink it into the right half */ max-width: 100%; transform: translateX(-50%); } .ll-offering .ll-circle-card:hover .ll-pill-label { transform: translate(-50%, -2px); } /* A rotated pill's visible bottom is higher than its box, so the caption rides up. */ .ll-offering__slot--1 .ll-pill-label, .ll-offering__slot--2 .ll-pill-label, .ll-offering__slot--5 .ll-pill-label, .ll-offering__slot--7 .ll-pill-label { bottom: -12px; } /* Circles past the seventh: a plain, readable row rather than a broken ring. */ .ll-offering__more { --ll-grid-min: 260px; margin-top: 64px; } /* ── 1025–1250: the container is narrower than the Figma canvas, so the side silhouettes fit their grid areas instead of overhanging them. */ @media (max-width: 1250px) { .ll-offering__slot--4, .ll-offering__slot--5, .ll-offering__slot--6, .ll-offering__slot--7 { width: auto; max-width: var(--ll-circle-size); } .ll-offering__slot--1 { margin-left: 0; } .ll-offering__slot--4 { margin-left: 0; } .ll-offering__slot--5 { margin-left: -12px; } .ll-offering__slot--7 { margin-left: 0; } } /* ── ≤1024: heading first, then a tidy 3-column grid of plain circles ─────── */ @media (max-width: 1024px) { .ll-offering__ring { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: none; gap: 56px 20px; } .ll-offering__ring > * { grid-area: auto; margin: 0; align-self: auto; justify-self: auto; width: auto; max-width: 100%; } .ll-offering .ll-circle-card { --ll-circle-size: 100%; margin-inline: auto; } .ll-offering .ll-circle-card__media { aspect-ratio: 1; border-radius: 50%; transform: none; } .ll-offering .ll-circle-card .ll-pill-label { bottom: -24px; } .ll-offering__head { grid-column: 1 / -1; margin-bottom: 8px; } } @media (max-width: 768px) { .ll-offering__ring { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 16px; } } /* ── ≤480: two small circles per row, the pill tucked inside the circle ──── */ @media (max-width: 480px) { .ll-offering__ring { gap: 34px 12px; } .ll-offering .ll-circle-card { max-width: 46vw; } /* The pill tucks into the bottom of the circle and may straddle its edge, so a long label ("Soft play area for toddlers") still has room to wrap. */ .ll-offering .ll-circle-card .ll-pill-label { left: 50%; bottom: -6px; transform: translateX(-50%); width: max-content; max-width: 104%; gap: 6px; padding: 6px 6px 6px 13px; font-size: 13px; line-height: 1.25; text-wrap: balance; } .ll-offering .ll-circle-card:hover .ll-pill-label { transform: translateX(-50%) translateY(-2px); } .ll-offering .ll-circle-card .ll-pill-label__arrow { flex: 0 0 30px; width: 30px; height: 30px; } .ll-offering .ll-circle-card .ll-pill-label__arrow::after { width: 14px; height: 14px; -webkit-mask-size: 14px 14px; mask-size: 14px 14px; } } /* ===== ll-packages.css ===== */ /* ============================================================================ ll-packages — "Your Private Party" card + booking widget (Figma slice-05) Layout only. Every colour, radius and type size is a token from lulu.css, and every component (.ll-card, .ll-calendar, .ll-form, .ll-select, .ll-btn, .ll-check-list, .ll-steps, .ll-stripes) comes from the design system — this file just places them and adds the pieces the design system does not own: the full-bleed banner, the two-column card split, the price block, the summary chips and the success panel. ========================================================================= */ /* The section's own padding is replaced by the banner + the overlapping card. */ .ll-packages { padding-top: 0; padding-bottom: var(--section-y); } /* ── Banner: full-bleed party photo on the striped wallpaper ─────────────── */ .ll-packages__banner { position: relative; /* Figma: 720px tall at 1440, the card overlapping its lower 230px. */ height: clamp(320px, 50vw, 720px); overflow: hidden; } .ll-packages__banner-img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; } /* ── The white card, lifted up over the banner ──────────────────────────── */ .ll-packages__card { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; margin-top: clamp(-230px, -16vw, -96px); position: relative; z-index: 1; } /* The hairline between features and calendar (slice-05). */ .ll-packages__widget { border-left: 1px solid var(--ll-line); padding-left: 48px; } /* ── Left column: host, title, price, features ──────────────────────────── */ .ll-packages__host { display: block; width: 120px; height: 120px; border-radius: 50%; overflow: hidden; margin-bottom: 24px; box-shadow: 0 0 0 1px var(--ll-line); } .ll-packages__host img { width: 100%; height: 100%; object-fit: cover; display: block; } .ll-packages__title { margin-bottom: 20px; } .ll-packages__price { margin-bottom: 32px; } .ll-packages__price-pre { font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-ui); color: var(--ll-orange); margin-bottom: 4px; } .ll-packages__price-value { font-family: var(--font-display); font-weight: 700; font-size: clamp(36px, 3.6vw, 48px); line-height: 1.05; color: var(--ll-orange); } .ll-packages__price-note { font-family: var(--font-ui); font-size: 15px; color: var(--ll-ink-soft); margin-top: 6px; } /* .ll-check-list already goes two-up from 768px; minmax(0,…) is the only addition — it stops a long item from widening the column past the card. */ @media (min-width: 768px) { .ll-packages__features { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ── Right column: the booking widget ───────────────────────────────────── */ .ll-packages__note { font-family: var(--font-ui); font-size: 14px; color: var(--ll-ink-soft); margin-top: 12px; } .ll-packages__time { margin-top: 20px; } .ll-packages__continue { margin-top: 24px; } .ll-packages__submit { margin-top: 8px; } .ll-packages__error:not([hidden]) { display: block; } /* Native date picker — the no-JS path. ll-booking.js hides it outright. */ .ll-packages__nojs { margin-top: 20px; } .ll-packages__step-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); color: var(--ll-blue); line-height: 1.15; } .ll-packages__step-intro { font-family: var(--font-ui); font-size: var(--fs-ui); line-height: 1.6; color: var(--ll-ink-soft); margin-top: -4px; } /* Date/time summary above the contact fields. */ .ll-packages__summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .ll-packages__summary[hidden] { display: none; } .ll-packages__chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--r-pill); background: var(--ll-card); font-family: var(--font-ui); font-size: 15px; color: var(--ll-ink); } .ll-packages__chip b { font-weight: 600; color: var(--ll-ink-soft); } .ll-packages__back { font-family: var(--font-ui); font-weight: 600; font-size: 15px; color: var(--ll-orange); text-decoration: underline; text-underline-offset: 3px; } .ll-packages__back:hover { color: var(--ll-orange-2); } /* The contact rows stack with room above each one: the notched caption sits on the field's top border, so it needs clear air between it and the row above. */ .ll-booking__step .ll-form__row { margin-top: 24px; } .ll-packages__gdpr { font-family: var(--font-ui); font-size: 13px; line-height: 1.5; color: var(--ll-ink-soft); margin-top: 16px; } /* ── Step 3 · thank you ─────────────────────────────────────────────────── */ .ll-packages__done { text-align: center; padding: 24px 0; } .ll-packages__done-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); color: var(--ll-blue); margin-bottom: 10px; } .ll-packages__done-msg { font-family: var(--font-ui); font-size: var(--fs-ui); line-height: 1.6; color: var(--ll-ink); } /* ── Responsive ─────────────────────────────────────────────────────────── */ @media (max-width: 1024px) { .ll-packages__card { gap: 32px; } .ll-packages__widget { padding-left: 32px; } .ll-packages__host { width: 96px; height: 96px; } } @media (max-width: 768px) { /* One column, features first (they are already first in the DOM). */ .ll-packages__card { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: clamp(-72px, -9vw, -32px); } .ll-packages__widget { border-left: 0; border-top: 1px solid var(--ll-line); padding-left: 0; padding-top: 32px; } .ll-packages__banner { height: clamp(200px, 48vw, 300px); } /* The ten features become a tile grid — icon disc + a two-line caption — so the phone reads a row of glyphs, not a ten-line list, before the calendar. The full text stays in the DOM for screen readers and search engines. */ .ll-packages__features { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 0; margin-inline: -6px; } .ll-packages__features li { flex: 0 0 20%; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 4px; text-align: center; font-size: 12px; line-height: 1.25; text-wrap: balance; } .ll-packages__features li::before { display: none; } .ll-packages__features .ll-check-list__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ll-card); color: var(--ll-orange); } .ll-packages__features .ll-check-list__icon svg { width: 22px; height: 22px; } } @media (max-width: 480px) { .ll-packages__host { width: 84px; height: 84px; margin-bottom: 16px; } .ll-packages__price { margin-bottom: 24px; } .ll-packages__banner { height: 200px; } .ll-packages__card { margin-top: -48px; } .ll-packages__features li { flex-basis: 25%; } .ll-packages__summary { gap: 8px; } .ll-packages__chip { padding: 7px 13px; font-size: 14px; } /* 7 × 36px cells + 6 × 4px gaps = 276px, inside 375 − 32 (gutter) − 48 (card padding) = 295px, so the grid never forces a horizontal scroll. The 36px cell itself comes from lulu.css's own ≤480 rule. */ } /* ===== ll-page-hero.css ===== */ /* ── ll-page-hero ───────────────────────────────────────────────────────── The opening band of an inner page: h1 + intro on a confetti band with a scalloped bottom edge, and an optional photo on the right. Also used (class-only, no section row) by templates/pages/default.php and templates/pages/404.php so every inner page opens the same way. Breakpoints: <=900 photo below the text · <=768 tighter block · <=480 smaller. */ .ll-page-hero { /* Room under the copy for the scallop that hangs below the band. */ padding-bottom: calc(var(--section-y) + var(--ll-scallop-h)); } .ll-page-hero__grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; } .ll-page-hero--media .ll-page-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); } .ll-page-hero__body { max-width: 760px; } .ll-page-hero__title { margin: 0; } .ll-page-hero__intro { margin-top: 18px; } /* A small "Last updated: …" line, used by templates/pages/default.php. */ .ll-page-hero__meta { margin-top: 14px; font-family: var(--font-ui); font-size: 14px; color: var(--ll-ink-soft); } .ll-page-hero__media { border-radius: var(--r-card-lg); overflow: hidden; box-shadow: var(--ll-shadow-soft); background: var(--ll-sky-soft); } .ll-page-hero__media img { display: block; width: 100%; height: 100%; max-height: 420px; object-fit: cover; } /* The 404 code: oversized Lora numeral above the heading. */ .ll-page-hero__code { font-family: var(--font-display); font-weight: 700; font-size: clamp(72px, 12vw, 148px); line-height: .95; color: var(--ll-orange); margin: 0 0 8px; letter-spacing: .02em; } .ll-page-hero__actions { margin-top: clamp(24px, 3vw, 36px); } /* The CMS body under the header on templates/pages/default.php — the same comfortable measure the legacy .ll-page__inner card used. */ .ll-page__body { max-width: 820px; margin-inline: auto; } /* Centred variant — the 404 page and any hero without a photo that wants it. */ .ll-page-hero--center .ll-page-hero__body { margin-inline: auto; text-align: center; } .ll-page-hero--center .ll-lead { margin-inline: auto; } /* An intro that carries CMS HTML (the 404 body) rather than one plain string. */ .ll-page-hero__rich > * + * { margin-top: .8em; } .ll-page-hero__rich :is(p, ul, ol) { font-size: inherit; line-height: inherit; } .ll-page-hero__rich a { color: var(--ll-orange); text-decoration: underline; } @media (max-width: 900px) { .ll-page-hero--media .ll-page-hero__grid { grid-template-columns: 1fr; } .ll-page-hero__media img { max-height: 340px; } } @media (max-width: 768px) { .ll-page-hero__intro { margin-top: 14px; } .ll-page-hero__media { border-radius: var(--r-card); } } @media (max-width: 480px) { .ll-page-hero__media img { max-height: 260px; } .ll-page-hero__actions .ll-btn { width: 100%; } } /* ===== ll-reviews.css ===== */ /* =========================================================================== ll-reviews — "Our reviews" + the Google badge (Figma slice-01) =========================================================================== */ .ll-reviews { /* Local, section-scoped only. The star glyph is a mask so it takes the brand orange from the palette; the six letter colours are Google's own brand colours and therefore cannot come from the Lulu tokens. */ --ll-reviews-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2l2.9 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77 5.82 21l1.18-6.88-5-4.87 7.1-1.01z'/%3E%3C/svg%3E"); --ll-g-blue: #4285F4; --ll-g-red: #EA4335; --ll-g-yellow: #FBBC05; --ll-g-green: #34A853; } /* Figma: the review rail sits 115px above the venue band's scallops (which overhang up by --ll-scallop-h), so the sand band is deeper than the default. */ .ll-reviews { padding-bottom: clamp(96px, 13.3vw, 192px); } /* Figma: the review rail sits 115px above the venue band's scallops (which overhang up by --ll-scallop-h), so the sand band is deeper than the default. */ .ll-reviews { padding-bottom: clamp(96px, 13.3vw, 192px); } /* ── Header row: copy on the left, rating badge + mascot on the right ─────── */ .ll-reviews__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px; margin-bottom: clamp(36px, 5vw, 64px); } .ll-reviews__intro h2 { margin-bottom: 16px; } .ll-reviews__intro .ll-lead { max-width: 46ch; } .ll-reviews__badge-wrap { position: relative; justify-self: end; } .ll-reviews__badge { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "rating meta" "google meta"; align-items: start; column-gap: 18px; row-gap: 6px; /* Right padding leaves the mascot a clear lane over the card. */ padding: 22px 104px 20px 28px; min-width: 330px; box-shadow: var(--ll-shadow-soft); } a.ll-reviews__badge { transition: transform var(--tx-base), box-shadow var(--tx-base); } a.ll-reviews__badge:hover { transform: translateY(-3px); box-shadow: var(--ll-shadow-pop); } .ll-reviews__rating { grid-area: rating; font-family: var(--font-display); font-weight: 700; font-size: 44px; line-height: 1; color: var(--ll-blue); } .ll-reviews__badge-meta { grid-area: meta; display: block; padding-top: 4px; } .ll-reviews__count { display: block; margin-top: 6px; font-family: var(--font-ui); font-size: var(--fs-ui); color: var(--ll-ink); } .ll-reviews__badge .ll-reviews__google { grid-area: google; align-self: end; } .ll-reviews__mascot { position: absolute; right: -44px; bottom: -6px; width: 200px; pointer-events: none; z-index: 2; } .ll-reviews__mascot img { width: 100%; height: auto; } /* ── Stars ───────────────────────────────────────────────────────────────── */ .ll-reviews__stars { display: inline-flex; gap: 5px; } .ll-reviews__star { width: 20px; height: 20px; background: var(--ll-orange); -webkit-mask: var(--ll-reviews-star) center / 20px 20px no-repeat; mask: var(--ll-reviews-star) center / 20px 20px no-repeat; } .ll-reviews__star--off { background: rgba(47, 38, 26, .18); } /* ── The Google wordmark (six letters, Google's brand colours) ────────────── */ .ll-reviews__google { display: inline-flex; font-family: var(--font-ui); font-weight: 500; font-size: 22px; line-height: 1; letter-spacing: -.02em; } .ll-reviews__google--lg { font-size: 26px; } .ll-reviews__google span:nth-child(1) { color: var(--ll-g-blue); } .ll-reviews__google span:nth-child(2) { color: var(--ll-g-red); } .ll-reviews__google span:nth-child(3) { color: var(--ll-g-yellow); } .ll-reviews__google span:nth-child(4) { color: var(--ll-g-blue); } .ll-reviews__google span:nth-child(5) { color: var(--ll-g-green); } .ll-reviews__google span:nth-child(6) { color: var(--ll-g-red); } /* ── The rail of review cards ────────────────────────────────────────────── */ .ll-reviews__rail .ll-slider { --ll-slide-w: 480px; align-items: stretch; } .ll-reviews__card { display: flex; flex-direction: column; gap: 16px; padding: 28px 30px 32px; } .ll-reviews__card-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; } .ll-reviews__avatar { display: block; width: 56px; height: 56px; flex: 0 0 56px; border-radius: 50%; overflow: hidden; background: var(--ll-sky-soft); } .ll-reviews__avatar img { width: 100%; height: 100%; object-fit: cover; } .ll-reviews__avatar--initials { display: grid; place-items: center; background: var(--ll-sky); color: var(--ll-blue); font-family: var(--font-display); font-weight: 700; font-size: 22px; } .ll-reviews__who { display: block; min-width: 0; } .ll-reviews__name { display: block; font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-ui); color: var(--ll-ink); } .ll-reviews__role { display: block; margin-top: 2px; font-family: var(--font-ui); font-size: 15px; color: var(--ll-ink-soft); } .ll-reviews__source, .ll-reviews__google--corner { align-self: start; } .ll-reviews__text { margin: 0; } /* ── Breakpoints ─────────────────────────────────────────────────────────── */ @media (max-width: 1100px) { /* The mascot's overhang must stay inside the 24px gutter, or the page gets a horizontal scrollbar around 1024px. */ .ll-reviews__mascot { right: -20px; } } @media (max-width: 1024px) { .ll-reviews__head { gap: 28px; } .ll-reviews__rail .ll-slider { --ll-slide-w: 420px; } } @media (max-width: 900px) { .ll-reviews__head { grid-template-columns: minmax(0, 1fr); justify-items: start; } .ll-reviews__badge-wrap { justify-self: start; } } @media (max-width: 768px) { .ll-reviews { padding-bottom: calc(var(--section-y) + 24px); } .ll-reviews__rail .ll-slider { --ll-slide-w: min(80vw, 360px); } .ll-reviews__badge { min-width: 0; padding: 18px 88px 18px 22px; } .ll-reviews__rating { font-size: 38px; } .ll-reviews__mascot { width: 150px; right: -30px; } .ll-reviews__star { width: 18px; height: 18px; -webkit-mask-size: 18px 18px; mask-size: 18px 18px; } } @media (max-width: 480px) { .ll-reviews__rail .ll-slider { --ll-slide-w: 84vw; } .ll-reviews__card { padding: 22px 22px 26px; } .ll-reviews__mascot { width: 100px; right: -12px; } .ll-reviews__badge { padding-right: 96px; } .ll-reviews__google--lg { font-size: 22px; } .ll-reviews__avatar { width: 48px; height: 48px; flex-basis: 48px; } } /* ===== ll-softplay.css ===== */ /* =========================================================================== ll-softplay — "Soft Play Area" (Figma slice-02) =========================================================================== */ .ll-softplay__intro { max-width: 62ch; } .ll-softplay__intro h2 { margin-bottom: 14px; } .ll-softplay__eyebrow { margin-bottom: 14px; } .ll-softplay__body { margin: 0; max-width: 72ch; } .ll-softplay__rail { margin-top: clamp(32px, 4.5vw, 56px); } .ll-softplay__rail .ll-slider { --ll-slide-w: min(600px, 47vw); align-items: stretch; } /* Figma 790x450 -> 600x375 */ .ll-softplay__shot { display: block; aspect-ratio: 16 / 10; border-radius: var(--r-card); border: 5px solid var(--ll-white); background: var(--ll-white); overflow: hidden; transition: transform var(--tx-base), box-shadow var(--tx-base); } .ll-softplay__shot img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--r-card) - 5px); transition: transform .5s var(--tx-base); } .ll-softplay__shot:hover { box-shadow: var(--ll-shadow-pop); } .ll-softplay__shot:hover img { transform: scale(1.04); } /* ── Breakpoints ─────────────────────────────────────────────────────────── */ @media (max-width: 1024px) { .ll-softplay__rail .ll-slider { --ll-slide-w: 56vw; } } @media (max-width: 768px) { /* Arrows are hidden below 768 by the design system — the rail is swiped. */ .ll-softplay__rail .ll-slider { --ll-slide-w: 74vw; } .ll-softplay__shot { border-width: 4px; } } @media (max-width: 480px) { .ll-softplay__rail .ll-slider { --ll-slide-w: 80vw; } } /* ===== ll-text.css ===== */ /* ── ll-text ────────────────────────────────────────────────────────────── A `.ll-prose` column inside the container. "Narrow" is the comfortable reading measure of the design system (760px, centred); "wide" fills the container for tables and image-heavy copy. Breakpoints: nothing to change below 1024 — the column is already fluid — so only the small-screen rhythm is tuned. */ .ll-text__inner--narrow { max-width: 760px; margin-inline: auto; } .ll-text__inner--wide { max-width: none; } /* The section's own top margin already spaces the heading. */ .ll-text__inner > h2:first-child { margin-top: 0; } @media (max-width: 768px) { .ll-text__inner { font-size: 17px; } .ll-text__inner h2 { font-size: 28px; } .ll-text__inner h3 { font-size: 22px; } } @media (max-width: 480px) { .ll-text__inner { font-size: 16px; } .ll-text__inner h2 { font-size: 25px; } /* Wide tables must scroll inside the column, never widen the page. */ .ll-text__inner table { display: block; overflow-x: auto; } } /* ===== ll-venue.css ===== */ /* =========================================================================== ll-venue — "Comfortable cozy venue" (Figma slice-01 / slice-02) =========================================================================== */ /* The heading and its tilted pill are one display size in the design, so the h2 is lifted to the tilt scale for this section only. */ /* Figma: the heading starts right under the scalloped edge and the tilted pill even laps onto the domes — so the band keeps almost no top padding and the title is lifted above the ::before scallop strip (z-index 2). */ .ll-venue { padding-top: clamp(16px, 1.8vw, 26px); } .ll-venue__title { position: relative; z-index: 3; font-size: var(--fs-tilt); line-height: 1.06; margin-bottom: clamp(24px, 3.4vw, 44px); } .ll-venue__title .ll-tilt-pill { margin-left: .18em; vertical-align: baseline; } .ll-venue__rule { margin-bottom: clamp(28px, 4vw, 52px); } /* ── The five checked features ───────────────────────────────────────────── */ .ll-venue__features { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px 24px; margin-bottom: clamp(40px, 6vw, 80px); } /* ── Mosaic photo grid ───────────────────────────────────────────────────── */ .ll-venue__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-areas: "a b b" "c c d"; grid-auto-rows: clamp(190px, 27vw, 370px); gap: 24px; scroll-margin-top: 120px; /* the "Gallery" menu anchor */ } .ll-venue__cell { display: block; position: relative; overflow: hidden; border-radius: var(--r-card); border: 5px solid var(--ll-white); background: var(--ll-white); transition: transform var(--tx-base), box-shadow var(--tx-base); } .ll-venue__cell--a { grid-area: a; } .ll-venue__cell--b { grid-area: b; } .ll-venue__cell--c { grid-area: c; } .ll-venue__cell--d { grid-area: d; } .ll-venue__cell img { width: 100%; height: 100%; object-fit: cover; /* Interior photography: the room is in the lower half of the frame, so bias the crop downwards instead of cutting the ceiling in on tall shots. */ object-position: 50% 62%; border-radius: calc(var(--r-card) - 5px); transition: transform .5s var(--tx-base); } .ll-venue__cell:hover { box-shadow: var(--ll-shadow-pop); } .ll-venue__cell:hover img { transform: scale(1.04); } /* Overlays the bottom-right cell — a sibling of the cells, not a nested link. */ .ll-venue__more { position: absolute; right: 22px; bottom: 22px; z-index: 2; box-shadow: var(--ll-shadow-soft); } /* ── Breakpoints ─────────────────────────────────────────────────────────── */ @media (max-width: 1024px) { /* 3 + 2 — the fifth feature drops onto its own row and stays centred. */ .ll-venue__features { grid-template-columns: repeat(6, minmax(0, 1fr)); } .ll-venue__features > .ll-feature { grid-column: span 2; } .ll-venue__features > .ll-feature:nth-child(4) { grid-column: 2 / span 2; } .ll-venue__features > .ll-feature:nth-child(5) { grid-column: 4 / span 2; } } @media (max-width: 768px) { .ll-venue { padding-top: 20px; } .ll-venue__features { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ll-venue__features > .ll-feature, .ll-venue__features > .ll-feature:nth-child(4), .ll-venue__features > .ll-feature:nth-child(5) { grid-column: auto; } .ll-venue__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "a b" "c d"; grid-auto-rows: 42vw; gap: 14px; } .ll-venue__cell { border-width: 4px; } .ll-venue__more { right: 12px; bottom: 12px; } } @media (max-width: 480px) { /* Two up, not one: five stacked cards ran 616px down the phone. The type steps down one notch so the long labels ("Easy to decorate") still break over two lines at most, and the odd fifth item takes the full width instead of leaving a hole beside it. */ .ll-venue__features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 16px; } .ll-venue__features > .ll-feature:nth-child(5) { grid-column: 1 / -1; } .ll-venue__features > .ll-feature::before { width: 24px; height: 24px; background-size: 13px 13px, auto; margin-bottom: 10px; } .ll-venue__features .ll-feature__title { font-size: 20px; } .ll-venue__features .ll-feature__sub { font-size: 16px; } .ll-venue__grid { grid-auto-rows: 40vw; gap: 10px; } .ll-venue__more { padding: 12px 20px; min-height: 44px; font-size: 14px; right: 10px; bottom: 10px; } } /* ===== ll-workshops.css ===== */ /* ═══ ll-workshops — "Workshops" (slice 04) ═══════════════════════════════ Orange band, white copy, a four-column grid of cream photo cards and a final sky-blue mascot card whose lemur pokes above the card's top edge. */ .ll-workshops__lead { max-width: 58ch; margin-top: 16px; } .ll-workshops__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: clamp(34px, 4.2vw, 56px); } .ll-workshops__grid > li { display: flex; } .ll-workshops__grid > li > * { width: 100%; } /* lulu.css re-applies a padding on .ll-card inside its 768/480 media queries, which outranks the earlier "padding:0" on .ll-card--media — keep photo cards flush at every width. */ .ll-workshops__grid .ll-card--media { padding: 0; } .ll-workshops__card .ll-card__text { line-height: 1.55; } /* ── The "…and many other options" card ───────────────────────────────── */ .ll-workshops__more { overflow: visible; /* let the mascot break the top edge */ background: var(--ll-sky); } .ll-workshops__more .ll-card__media { background: none; /* the mascot art is transparent */ height: auto; flex: 0 0 auto; margin-top: clamp(-42px, -3vw, -18px); overflow: visible; } .ll-workshops__more .ll-card__media img { width: 100%; height: clamp(210px, 20vw, 290px); object-fit: contain; object-position: 50% 100%; } .ll-workshops__more .ll-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 4px 28px 28px; } .ll-workshops__more-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(23px, 2.1vw, 30px); line-height: 1.15; color: var(--ll-blue); } /* White disc with an ink arrow, bottom-right (slice 04). */ .ll-workshops__go { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; background: var(--ll-white); display: inline-grid; place-items: center; align-self: flex-end; margin-top: auto; transition: transform var(--tx-base), box-shadow var(--tx-base); } .ll-workshops__go::after { content: ''; width: 20px; height: 20px; background: var(--ll-ink); -webkit-mask: var(--ll-icon-arrow) center / 20px 20px no-repeat; mask: var(--ll-icon-arrow) center / 20px 20px no-repeat; } .ll-workshops__more:hover .ll-workshops__go { transform: translateX(3px); box-shadow: var(--ll-shadow-soft); } /* ── Responsive ───────────────────────────────────────────────────────── */ @media (max-width: 1024px) { .ll-workshops__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 768px) { .ll-workshops__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .ll-workshops__more .ll-card__body { padding: 4px 22px 24px; } .ll-workshops__more .ll-card__media img { height: clamp(170px, 32vw, 230px); } } @media (max-width: 480px) { .ll-workshops__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; } .ll-workshops__more .ll-card__media { margin-top: -22px; } .ll-workshops__more .ll-card__media img { height: 200px; } .ll-workshops__more .ll-card__body { padding: 4px 20px 20px; } }

is `display:contents` so its three spans are grid items of the same grid as the media — the heading still reads as one sentence in the DOM. Below 1024px the