/* Leology theme · design system 1.1.0 · the community surface (inc/ds.php: leology_ds_surface()). Drawn after Arena-x-B-01-r1. Class selectors only, in layer `ds` (wins over style.css, which is in `legacy`). The Community page (template-parts/community.php) and the event pages (single-leo_event.php), after COMPONENT_LIBRARY.md 7.1 hero, 7.2 ticket, 7.4 event row, 7.5 1:1 band, 7.6 photo stream, 7.7 event page, 3.1 eyebrow (--plain), 3.5 stamp, 3.7 column rules; MOTION_SYSTEM.md §5a (the stream). Page logic: the page opens on the Sun field, reads on white and closes on the deep field before the footer. One stamp per screen. Motion: none on scroll or on entrance; the photo stream is the only continuous motion and reduced motion holds it still. Hover, focus and press feedback stay. */ @layer ds { /* ---- Shared on this surface ------------------------------------------------------------------ */ /* Buttons keep their labels on one line (2.1). The light variant (white on a field) is this surface's. */ .leo-ds--community .leo-btn { white-space: nowrap; } .leo-ds--community .leo-btn--light { background: #fff; color: var(--b-field); border-color: #fff; } .leo-ds--community .leo-btn--light:hover, .leo-ds--community .leo-btn--light:focus-visible { background: var(--b-sun); color: var(--b-ink); border-color: var(--b-sun); } .leo-ds--community .leo-dsicon { width: 20px; height: 20px; flex: none; transition: transform 220ms var(--mo-ease); } @media (hover: hover) { .leo-ds--community .leo-btn:hover .leo-dsicon { transform: translate3d(2px, -2px, 0); } } /* Column rules (3.7): a 1 px rule at the container's left edge and every quarter, behind the content, on fields only. */ .leo-ds--community .leo-rules { --leo-rule: var(--ds-color-rule-on-sun); position: absolute; z-index: -1; top: 0; bottom: 0; left: max(20px, 5%); right: max(20px, 5%); pointer-events: none; border-left: 1px solid var(--leo-rule); background-image: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), var(--leo-rule) calc(25% - 1px) 25%); } @media (min-width: 768px) { .leo-ds--community .leo-rules { left: max(5%, (100% - var(--ds-size-container)) / 2); right: max(5%, (100% - var(--ds-size-container)) / 2); } } .leo-ds--community .leo-rules--deep { --leo-rule: var(--ds-color-rule-on-deep); } .leo-ds--community .leo-rules--art { --leo-rule: var(--ds-color-rule-on-ultramarine); left: 24px; right: 24px; } /* Text link (2.3): Bricolage caps with a 2 px underline of its own colour. */ .leo-ds--community .leo-textlink { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 6px; border-bottom: 2px solid currentColor; font-family: var(--ax-display); font-stretch: 75%; font-weight: 700; font-size: 18px; line-height: 1.6; letter-spacing: .03em; text-transform: uppercase; color: var(--b-field); text-decoration: none; transition: color 160ms var(--mo-ease-fade); } .leo-ds--community .leo-textlink:hover { color: var(--b-ink); } .leo-ds--community .leo-textlink .leo-dsicon { width: 16px; height: 16px; } @media (hover: hover) { .leo-ds--community .leo-textlink:hover .leo-dsicon { transform: translate3d(0, 2px, 0); } } /* Section heads are the shell's (3.3); here the label is the section's

. / .leo-ds--community .leo-secheadlabel { margin: 0; } / ==== Community: hero (7.1) ======================================================================= / .leo-ds--community .leo-comhero { padding: 0; } .leo-ds--community .leo-comherocard { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 56px; align-items: center; padding: 64px 20px 72px; background: var(--b-sun); color: var(--b-ink); } @media (min-width: 900px) { / From 900 px: 96 × 5vw × 104 (on screens wider than the container, the copy keeps to the container's edge). / .leo-ds--community .leo-comherocard { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); min-height: 560px; padding: 96px max(24px, 5vw, (100% - var(--ds-size-container)) / 2) 104px; } .leo-ds--community .leo-comherocard--solo { grid-template-columns: minmax(0, 1fr); } } / The copy column is a size container: the promise's size follows it. The heading opens it: the eyebrow that stood above it ("Cộng đồng Leology") is gone (owner, 21/10/2026), and so is the 16 px that spaced them. / .leo-ds--community .leo-comherocopy { position: relative; min-width: 0; container-type: inline-size; } .leo-ds--community .leo-comherotitle { margin: 0; font-family: var(--ax-display); font-stretch: 75%; font-weight: 800; font-size: var(--ds-type-display-community-size); line-height: .84; letter-spacing: -.005em; text-transform: uppercase; color: var(--b-field); } / The promise: italic, no closing full stop, on one line from a 480 px column up (min(29px, 3.95cqi): about 29 px at 768, 20 px at 1024, 28 px at 1440); below a 480 px column it wraps, balanced, at 20 px. A promise too long for one line (Settings may hold any sentence) wraps, balanced, at the tagline size. / .leo-ds--community .leo-comherolede { max-width: 32em; margin: 20px 0 0; font-family: var(--ax-text); font-style: italic; font-weight: 600; font-size: 20px; line-height: 1.3; color: var(--b-ink); text-wrap: balance; } @container (min-width: 480px) { .leo-ds--community .leo-comherolede { font-size: clamp(20px, 2vw, 29px); } .leo-ds--community .leo-comherolede--line { max-width: none; white-space: nowrap; text-wrap: nowrap; font-size: var(--ds-type-text-tagline-size); } } .leo-ds--community .leo-comheroactions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; margin-top: 34px; } @media (max-width: 599.98px) { .leo-ds--community .leo-comheroactions { flex-direction: column; align-items: flex-start; } } .leo-ds--community .leo-comjoin { margin: 0; } .leo-ds--community .leo-comhero .leo-textlink, .leo-ds--community .leo-comhero .leo-textlink:hover { color: var(--b-ink); } / The art column; below 900 px it keeps 104 px of top room for the stamp, so the stamp never meets the actions. / .leo-ds--community .leo-comheroart { position: relative; display: grid; justify-items: center; min-width: 0; padding-top: 104px; } @media (min-width: 900px) { .leo-ds--community .leo-comheroart { padding-top: 0; } } / ---- Ticket (7.2): white, an ink frame, rotated −3°; a dashed divider; the Ultramarine stub ------ / .leo-ds--community .leo-ticket { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; max-width: 470px; justify-self: center; background: #fff; border: 2px solid var(--b-ink); color: var(--b-ink); text-decoration: none; transform: rotate(var(--ds-rotate-ticket)); transition: transform 220ms var(--mo-ease); } @media (hover: hover) { .leo-ds--community .leo-ticket:hover { transform: rotate(var(--ds-rotate-ticket-hover)) translate3d(0, -2px, 0); } .leo-ds--community .leo-ticket:hover .leo-dsicon { transform: translate3d(2px, -2px, 0); } } .leo-ds--community .leo-ticketmain { display: grid; align-content: center; gap: 6px; min-width: 0; padding: 24px 26px; border-right: 2px dashed var(--b-ink); } .leo-ds--community .leo-ticket--hero .leo-ticketmain { padding-top: 34px; } .leo-ds--community .leo-ticketstatus { width: fit-content; padding: 2px 8px; background: var(--b-ink); color: var(--b-sun); font-family: var(--ax-display); font-stretch: 75%; font-weight: 700; font-size: 15px; line-height: 1.6; letter-spacing: .04em; text-transform: uppercase; } .leo-ds--community .leo-tickettitle { font-family: var(--ax-display); font-stretch: 75%; font-weight: 700; font-size: 30px; line-height: 1.02; color: var(--b-field); } .leo-ds--community .leo-ticketwhen { font-family: var(--ax-text); font-weight: 700; font-size: 16px; line-height: 1.3; } .leo-ds--community .leo-ticketplace { font-family: var(--ax-text); font-size: 14px; line-height: 1.6; color: var(--b-ink-2); } .leo-ds--community .leo-ticketstub { display: grid; place-items: center; align-content: center; gap: 10px; width: 92px; padding: 16px 10px; text-align: center; background: var(--b-field); color: #fff; font-family: var(--ax-display); font-stretch: 75%; font-weight: 700; font-size: 15px; line-height: 1.6; letter-spacing: .04em; text-transform: uppercase; } / ---- Stamp (3.5) on Sun: the round disc, −9°; its place and colours are set per use below. / .leo-ds--community .leo-sticker { position: absolute; z-index: 3; display: grid; place-items: center; box-sizing: border-box; width: var(--ds-size-sticker); height: var(--ds-size-sticker); padding: 14px; border-radius: var(--ds-radius-round); text-align: center; pointer-events: none; font-family: var(--ax-display); font-stretch: 75%; font-weight: 800; font-size: 20px; line-height: 1; letter-spacing: .04em; text-transform: uppercase; } .leo-ds--community:lang(en) .leo-sticker { font-size: 15px; letter-spacing: .02em; } / The hero ticket's stamp (stakeholder feedback, 19/10/2026): centred on the dashed divider between the white panel and the Ultramarine stub (the stub is 92 px; the divider is the panel's 2 px right border, so its centre is 93 px from the ticket's inner right edge), its disc dipping 30 % over the ticket's top edge so it belongs to the ticket; the panel's 34 px top room keeps the title clear. Ink with a Sun ring and Sun capitals: the ticket's own status colours, never the Ultramarine/white pair of the stub and the title it rests on. / .leo-ds--community .leo-comherosticker { top: calc(var(--ds-size-sticker) -.7); left: auto; right: calc(93px - var(--ds-size-sticker) / 2); background: var(--b-ink); color: var(--b-sun); box-shadow: inset 0 0 0 4px var(--b-ink), inset 0 0 0 6px var(--b-sun); transform: rotate(var(--ds-rotate-sticker-on-sun)); } /* ==== Community: the photo stream (7.6, MOTION_SYSTEM.md §5a; design system 1.2.0) ================ / / Three horizontal rows, edge to edge: row 1 runs left, row 2 right, row 3 left (half a frame behind row 1). Each row starts a third further along the photographs (the template). Each track holds its frames in two identical halves and moves by exactly one half (translateX 0 → −50 %), so the loop never jumps; the gap is each frame's own right padding, so the half is exact. Its own clock (CSS keyframes, transform only), never scroll; no controls at rest, no hover pause; a click or tap, or the focus-revealed button, pauses (WCAG 2.2.2, 1.2.1). The template sets --leo-stream-n (frames per half); the duration is n × the seconds per frame of each screen size, so every size runs at about 45 px/s: desktop ≥1024 photo 216 px tall (384 × 216), gap 18, pitch 406 px, 9 s a frame (45.1 px/s) tablet 600–1023 photo 180 px tall (320 × 180), gap 18, pitch 342 px, 7.6 s a frame (45.0 px/s) phone <600 photo 144 px tall (256 × 144), gap 12, pitch 272 px, 6 s a frame (45.3 px/s) A row is capped at 3840 px (the width a half is filled for), centred beyond it. Reduced motion: every row stands still on one set of the photographs (the copies are dropped) and scrolls sideways by touch, trackpad or its scrollbar. / .leo-ds--community .leo-stream { --leo-stream-h: var(--ds-size-stream-photo); --leo-stream-gap: var(--ds-size-stream-gap); --leo-stream-step: var(--ds-motion-duration-stream-frame); display: grid; gap: var(--leo-stream-gap); padding-top: var(--ds-section-first); } @media (max-width: 1023.98px) { .leo-ds--community .leo-stream { --leo-stream-h: var(--ds-size-stream-photo-tablet); --leo-stream-step: var(--ds-motion-duration-stream-frame-tablet); } } @media (max-width: 599.98px) { .leo-ds--community .leo-stream { --leo-stream-h: var(--ds-size-stream-photo-phone); --leo-stream-gap: var(--ds-size-stream-gap-phone); --leo-stream-step: var(--ds-motion-duration-stream-frame-phone); } } .leo-ds--community .leo-streamrow { width: 100%; max-width: 3840px; margin-inline: auto; overflow: hidden; contain: paint; } .leo-ds--community .leo-streamtrack { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; animation: leo-ds-stream-x calc(var(--leo-stream-n, 10) var(--leo-stream-step)) linear infinite; will-change: transform; } .leo-ds--community .leo-streamrow--right .leo-streamtrack { animation-direction: reverse; } /* Row 3 runs half a frame behind row 1, so the two left-running rows never line up into a grid. / .leo-ds--community .leo-streamrow:nth-of-type(3) .leo-streamtrack { animation-delay: calc(var(--leo-stream-step) -.5); } .leo-ds--community .leo-streamitem { flex: none; margin: 0; padding: 0 var(--leo-stream-gap) 0 0; list-style: none; } .leo-ds--community .leo-streamshot { position: relative; width: calc(var(--leo-stream-h) * 16 / 9 + 4px); margin: 0; border: 2px solid var(--b-ink); background: var(--b-ink); } .leo-ds--community .leo-streamimg { display: block; width: 100%; height: var(--leo-stream-h); max-width: none; aspect-ratio: 16 / 9; object-fit: cover; } .leo-ds--community .leo-streamtag { position: absolute; left: 10px; top: 10px; padding: 2px 8px; background: var(--b-sun); color: var(--b-ink); font-family: var(--ax-display); font-stretch: 75%; font-weight: 700; font-size: 14px; line-height: 1.3; letter-spacing: .04em; text-transform: uppercase; } /* Pause (WCAG 2.2.2, 1.2.1): out of sight until keyboard focus or while paused; a click on the photos toggles. / .leo-ds--community .leo-stream { position: relative; } .leo-ds--community .leo-stream.is-js { cursor: pointer; } .leo-ds--community .leo-stream.is-paused .leo-streamtrack { animation-play-state: paused; } / Out of sight (still focusable) until keyboard focus or while paused, like the skip link. / .leo-ds--community .leo-streamtoggle { position: absolute; z-index: 2; top: calc(var(--ds-section-first) + 12px); right: 12px; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .leo-ds--community .leo-streamtoggle:focus-visible, .leo-ds--community .leo-stream.is-paused .leo-streamtoggle { width: auto; height: auto; min-height: 40px; padding: 8px 14px; overflow: visible; clip-path: none; border: 2px solid var(--b-ink); border-radius: 0; background: var(--b-sun); color: var(--b-ink); cursor: pointer; font-family: var(--ax-display); font-stretch: 75%; font-size: 15px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; } .leo-ds--community .leo-streamtoggle:focus-visible { outline: 3px solid var(--b-ink); outline-offset: 3px; } .leo-ds--community .leo-stream.is-paused .leo-streamtoggle:hover { background: var(--b-ink); color: var(--b-sun); } @keyframes leo-ds-stream-x { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @media (max-width: 599.98px) { .leo-ds--community .leo-streamtag { left: 6px; top: 6px; padding: 1px 6px; font-size: 12px; } } @media (prefers-reduced-motion: reduce) { .leo-ds--community .leo-streamtrack { animation: none; transform: none; will-change: auto; } .leo-ds--community .leo-streamitem--copy { display: none; } .leo-ds--community .leo-streamtoggle { display: none; } .leo-ds--community .leo-stream.is-js { cursor: auto; } .leo-ds--community .leo-streamrow { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--b-line-2) transparent; } } / No photographs yet: the live empty state, in B (5.6). / .leo-ds--community .leo-commoments-empty { padding-top: var(--ds-section-first); } .leo-ds--community .leo-empty { display: grid; justify-items: center; gap: 12px; padding: 48px 24px; border: 2px dashed var(--b-line-2); background: #fff; text-align: center; } .leo-ds--community .leo-emptyicon { width: 56px; height: 56px; margin: 0; border: 0; border-radius: 0; background: var(--b-sun); color: var(--b-ink); } .leo-ds--community .leo-emptytitle { margin: 0; font-family: var(--ax-display); font-stretch: 75%; font-weight: 700; font-size: 28px; line-height: 1.05; text-transform: uppercase; color: var(--b-field); } .leo-ds--community .leo-emptybody { max-width: 30rem; margin: 0; font-size: 16px; line-height: 1.6; color: var(--b-ink-2); } / ==== Community: Talks & Events ===================================================================== / .leo-ds--community .leo-comevents { padding: var(--ds-section-block) 0; scroll-margin-top: var(--ds-size-scroll-offset); } .leo-ds--community .leo-comempty { margin: 0; font-size: 17px; line-height: 1.6; color: var(--b-ink-2); white-space: pre-line; } .leo-ds--community .leo-evlist { display: grid; gap: 28px; } / ---- Event row (7.4): a white panel in a 2 px Ultramarine frame; media left, body right from 900 px ---- / .leo-ds--community .leo-ev { display: grid; overflow: hidden; background: #fff; border: 2px solid var(--b-field); border-radius: 0; box-shadow: none; } @media (min-width: 900px) { .leo-ds--community .leo-ev { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .leo-ds--community .leo-evmedia { position: relative; isolation: isolate; display: block; overflow: hidden; aspect-ratio: 16 / 9; background: #fff; border-bottom: 2px solid var(--b-field); } @media (min-width: 900px) { .leo-ds--community .leo-evmedia { aspect-ratio: auto; min-height: 340px; border-bottom: 0; border-right: 2px solid var(--b-field); } } .leo-ds--community .leo-evimg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; } .leo-ds--community .leo-evmedia--art { background: var(--b-field); color: #fff; } / The number panel (7.4, 7.7): the event's number large, its day in Sun. / .leo-ds--community .leo-evart { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 28px 28px 64px; } .leo-ds--community .leo-evart-n { display: block; font-family: var(--ax-display); font-stretch: 75%; font-weight: 800; font-size: var(--ds-type-numeral-event-size); line-height: .8; color: #fff; } .leo-ds--community .leo-evart-n--date { font-size: clamp(72px, 9vw, 150px); } .leo-ds--community .leo-evart-d { display: block; margin-top: 10px; font-family: var(--ax-display); font-stretch: 75%; font-weight: 800; font-size: clamp(32px, 3vw, 46px); line-height: 1; color: var(--b-sun); } / The status label sits at the media's bottom-left (3.4). / .leo-ds--community .leo-evstatus { position: absolute; left: 14px; bottom: 14px; z-index: 2; padding: 3px 9px; border-radius: 0; font-family: var(--ax-display); font-stretch: 75%; font-weight: 700; font-size: 15px; line-height: 1.6; letter-spacing: .04em; text-transform: uppercase; } .leo-ds--community .leo-evstatus--upcoming { background: var(--b-sun); color: var(--b-ink); } .leo-ds--community .leo-evstatus--completed { background: var(--b-ink); color: #fff; } .leo-ds--community .leo-evbody { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; min-width: 0; padding: 26px 22px 28px; } @media (min-width: 900px) { .leo-ds--community .leo-evbody { padding: 32px 36px; } } .leo-ds--community .leo-evmeta { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; font-family: var(--ax-text); font-weight: 600; font-size: 14px; line-height: 1.4; color: var(--b-ink-2); } .leo-ds--community .leo-evdot { margin: 0; } .leo-ds--community .leo-evtitle { margin: 0; font-family: var(--ax-display); font-stretch: 75%; font-weight: 700; font-size: var(--ds-type-title-event-size); line-height: 1; color: var(--b-field); } .leo-ds--community:lang(vi) .leo-evtitle { line-height: 1.08; } .leo-ds--community .leo-evtitle a { color: inherit; text-decoration: none; } .leo-ds--community .leo-evtitle a:hover { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; } .leo-ds--community .leo-evsub { margin: 0; font-family: var(--ax-text); font-size: 16px; line-height: 1.6; color: var(--b-ink-2); } .leo-ds--community .leo-evspeaker { display: flex; flex-wrap: wrap; gap: 0 18px; margin: 0; font-family: var(--ax-text); font-size: 15px; line-height: 1.6; color: var(--b-ink-2); } .leo-ds--community .leo-evspeaker strong { font-weight: 700; color: var(--b-ink); } .leo-ds--community .leo-evactions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; padding-top: 0; } / The event page's "more" list: a narrower media column. / @media (min-width: 900px) { .leo-ds--community .leo-ev--compact { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } .leo-ds--community .leo-ev--compact .leo-evmedia { min-height: 260px; } } / ==== Community: the 1:1 band (7.5) ================================================================ / .leo-ds--community .leo-book { padding: 0; scroll-margin-top: var(--ds-size-scroll-offset); } .leo-ds--community .leo-bookcard { position: relative; isolation: isolate; overflow: hidden; background: var(--b-deep); color: #fff; } .leo-ds--community .leo-bookinner { position: relative; display: grid; justify-items: center; text-align: center; padding: 96px 0 104px; } .leo-ds--community .leo-book :focus-visible { outline-color: var(--b-sun); } / The face: 136 px in a 3 px Sun frame; the theme's own photograph is cropped to the face (50% 12%, × 3.2). / .leo-ds--community .leo-bookface { display: block; width: 136px; height: 136px; overflow: hidden; border: 3px solid var(--b-sun); background: var(--b-field); } .leo-ds--community .leo-bookimg { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; } .leo-ds--community .leo-bookface--theme .leo-bookimg { object-position: 50% 12%; transform: scale(3.2); } .leo-ds--community .leo-bookmonogram { display: grid; place-items: center; width: 100%; height: 100%; font-family: var(--ax-display); font-stretch: 75%; font-weight: 800; font-size: 48px; color: #fff; } .leo-ds--community .leo-booktitle { margin: 22px 0 0; font-family: var(--ax-display); font-stretch: 75%; font-weight: 800; font-size: var(--ds-type-display-band-size); line-height: .92; text-transform: uppercase; color: #fff; } .leo-ds--community:lang(vi) .leo-booktitle { line-height: 1.02; } / The sentence keeps to one line from 768 px (no measure, no wrap); on phones it wraps, balanced, never cut. / .leo-ds--community .leo-booksub { max-width: 520px; margin: 12px 0 0; font-family: var(--ax-text); font-size: 18px; line-height: 1.55; color: var(--b-on); text-wrap: balance; } @media (min-width: 768px) { .leo-ds--community .leo-booksub--line { max-width: none; white-space: nowrap; } } .leo-ds--community .leo-bookactions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; } / ==== Event page (7.7) ================================================================================ / / Breadcrumbs (6.2): Community / Talks & Events / Talk #n on a Press Grey strip. / .leo-ds--community .leo-evcrumbs { padding: 16px 0; background: var(--b-grey); border-bottom: 1.5px solid var(--b-line-2); } .leo-ds--community .leo-evcrumbslist { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; padding: 0; list-style: none; font-family: var(--ax-display); font-stretch: 75%; font-weight: 700; font-size: 15px; line-height: 1.6; letter-spacing: .05em; text-transform: uppercase; color: var(--b-ink-3); } .leo-ds--community .leo-evcrumbsitem { margin: 0; list-style: none; } .leo-ds--community .leo-evcrumbsitem + .leo-evcrumbsitem::before { content: "/"; margin: 0 10px; opacity: .5; } .leo-ds--community .leo-evcrumbslink { color: var(--b-ink-2); text-decoration: none; transition: color 160ms var(--mo-ease-fade); } .leo-ds--community .leo-evcrumbslink:hover { color: var(--b-field); } .leo-ds--community .leo-evcrumbshere { color: var(--b-field); } / The head: the Sun field with ink rules; copy left, the cover (or the number panel) right from 900 px. / .leo-ds--community .leo-evheadcard { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 40px; align-items: center; padding: 56px 20px 64px; background: var(--b-sun); color: var(--b-ink); } @media (min-width: 900px) { .leo-ds--community .leo-evheadcard { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; padding: 80px max(24px, 5vw, (100% - var(--ds-size-container)) / 2) 88px; } } .leo-ds--community .leo-evheadcopy { position: relative; display: grid; gap: 16px; justify-items: start; min-width: 0; } .leo-ds--community .leo-evheadback { display: inline-flex; gap: 8px; font-family: var(--ax-display); font-stretch: 75%; font-weight: 700; font-size: 16px; line-height: 1.6; letter-spacing: .05em; text-transform: uppercase; color: var(--b-ink); text-decoration: none; } .leo-ds--community .leo-evheadback:hover { color: var(--b-ink); text-decoration: underline; text-underline-offset: 4px; } .leo-ds--community .leo-evheadstatus { margin: 0; padding: 3px 9px; font-family: var(--ax-display); font-stretch: 75%; font-weight: 700; font-size: 15px; line-height: 1.6; letter-spacing: .04em; text-transform: uppercase; } .leo-ds--community .leo-evheadstatus--upcoming { background: var(--b-field); color: #fff; } .leo-ds--community .leo-evheadstatus--completed { background: var(--b-ink); color: #fff; } .leo-ds--community .leo-evheadtitle { margin: 0; font-family: var(--ax-display); font-stretch: 75%; font-weight: 700; font-size: clamp(40px, 4.6vw, 74px); line-height: .98; color: var(--b-field); text-wrap: balance; overflow-wrap: break-word; } .leo-ds--community:lang(vi) .leo-evheadtitle { line-height: 1.06; } .leo-ds--community .leo-evheadlede { max-width: 640px; margin: 0; font-family: var(--ax-text); font-weight: 500; font-size: 18px; line-height: 1.55; color: var(--b-ink); } .leo-ds--community .leo-evheadmedia { position: relative; isolation: isolate; overflow: hidden; min-width: 0; aspect-ratio: 16 / 9; border: 2px solid var(--b-ink); background: var(--b-field); color: #fff; } .leo-ds--community .leo-evheadimg { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; } .leo-ds--community .leo-evheadmedia .leo-rules--art { --leo-rule: rgba(255, 255, 255, .12); } / The body and the facts box: side by side from 1024 px. / .leo-ds--community .leo-evbody { display: grid; gap: 40px; padding: var(--ds-section-first) 0 var(--ds-section-block); } @media (min-width: 1024px) { .leo-ds--community .leo-evbody { grid-template-columns: minmax(0, 700px) 340px; justify-content: space-between; align-items: start; } } .leo-ds--community .leo-evbodytext { min-width: 0; } .leo-ds--community .leo-evbodyh { margin: 0 0 18px; font-family: var(--ax-display); font-stretch: 75%; font-weight: 700; font-size: clamp(30px, 3vw, 44px); line-height: 1; text-transform: uppercase; color: var(--b-field); } / The write-up in B's prose (6.5): Hanken 18/1.75 in a 700 px column, condensed headings under a Sun bar, Sun-square bullets. It is WordPress-authored, so it is styled by element inside its own class. / .leo-ds--community .leo-evbodyprose { max-width: var(--ds-size-measure); overflow-wrap: break-word; font-family: var(--ax-text); font-weight: 400; font-size: 18px; line-height: 1.75; color: var(--b-ink); } .leo-ds--community .leo-evbodyprose > { margin: 0; } .leo-ds--community .leo-evbodyprose > * + * { margin-top: 1.15em; } .leo-ds--community .leo-evbodyprose h2 { margin-top: 2.1em; font-family: var(--ax-display); font-stretch: 75%; font-weight: 700; font-size: var(--ds-type-heading-prose-size); line-height: 1.02; color: var(--b-field); scroll-margin-top: 96px; } .leo-ds--community:lang(vi) .leo-evbodyprose h2 { line-height: 1.1; } .leo-ds--community .leo-evbodyprose h2::before { content: ""; display: block; width: 44px; height: 6px; margin-bottom: 16px; background: var(--b-sun); } .leo-ds--community .leo-evbodyprose h3 { margin-top: 1.6em; font-family: var(--ax-text); font-weight: 700; font-size: 21px; line-height: 1.35; color: var(--b-ink); scroll-margin-top: 96px; } .leo-ds--community .leo-evbodyprose > :first-child { margin-top: 0; } .leo-ds--community .leo-evbodyprose p { margin-bottom: 0; } .leo-ds--community .leo-evbodyprose strong { font-weight: 700; color: inherit; } .leo-ds--community .leo-evbodyprose a { color: var(--b-field); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } .leo-ds--community .leo-evbodyprose ul, .leo-ds--community .leo-evbodyprose ol { display: grid; gap: .65em; padding: 0; list-style: none; } .leo-ds--community .leo-evbodyprose li { position: relative; margin: 0; padding-left: 1.75em; list-style: none; line-height: inherit; } .leo-ds--community .leo-evbodyprose li > ul, .leo-ds--community .leo-evbodyprose li > ol { margin-top: .65em; } .leo-ds--community .leo-evbodyprose ul > li::before { content: ""; position: absolute; left: .25em; top: .66em; width: 9px; height: 9px; background: var(--b-sun); box-shadow: 0 0 0 1.5px var(--b-ink); } .leo-ds--community .leo-evbodyprose ol { counter-reset: leo-ds-ol; } .leo-ds--community .leo-evbodyprose ol > li { counter-increment: leo-ds-ol; } .leo-ds--community .leo-evbodyprose ol > li::before { content: counter(leo-ds-ol); position: absolute; left: 0; top: 0; font-family: var(--ax-display); font-stretch: 75%; font-weight: 800; font-size: 22px; line-height: 1.3; color: var(--b-field); } .leo-ds--community .leo-evbodyprose blockquote { margin: 1.7em 0 0; padding: 22px 24px 22px 30px; border: 0; border-radius: 0; background: var(--b-sand); box-shadow: inset 6px 0 0 var(--b-field); font-style: normal; color: var(--b-ink); } .leo-ds--community .leo-evbodyprose blockquote > * + * { margin-top: .8em; } .leo-ds--community .leo-evbodyprose hr { width: 64px; height: 0; margin: 2.6em 0; border: 0; border-top: 3px solid var(--b-field); } .leo-ds--community .leo-evbodyprose figure img, .leo-ds--community .leo-evbodyprose > img { width: 100%; height: auto; border: 2px solid var(--b-field); border-radius: 0; } /* The photographs of a past event: 16:9 frames in ink. / .leo-ds--community .leo-evgallery { margin-top: 56px; } .leo-ds--community .leo-evgallery--first { margin-top: 0; } .leo-ds--community .leo-evgallerylist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; } .leo-ds--community .leo-evgalleryitem { margin: 0; list-style: none; border: 2px solid var(--b-ink); background: var(--b-ink); } .leo-ds--community .leo-evgalleryimg { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; } / The facts box: a 2 px Ultramarine frame, 340 px, sticky from 1024 px. / .leo-ds--community .leo-evfacts { display: grid; gap: 18px; padding: 22px 24px 24px; border: 2px solid var(--b-field); background: #fff; } @media (min-width: 1024px) { .leo-ds--community .leo-evfacts { position: sticky; top: var(--ds-size-sticky-top); } } .leo-ds--community .leo-evfactslist { display: grid; gap: 12px; margin: 0; } .leo-ds--community .leo-evfactsrow { display: grid; gap: 2px; padding-bottom: 12px; border-bottom: 1.5px solid var(--b-line); } .leo-ds--community .leo-evfactsterm { margin: 0; font-family: var(--ax-display); font-stretch: 75%; font-weight: 700; font-size: 15px; line-height: 1.6; letter-spacing: .05em; text-transform: uppercase; color: var(--b-field); } .leo-ds--community .leo-evfactsvalue { margin: 0; font-family: var(--ax-text); font-weight: 600; font-size: 17px; line-height: 1.4; color: var(--b-ink); } .leo-ds--community .leo-evfactsactions { display: grid; gap: 10px; } .leo-ds--community .leo-evfactsactions .leo-btn { justify-content: center; } / Registration closed before the event (live state, not in the mockup): a grey line, not a button. / .leo-ds--community .leo-evfacts__note { margin: 0; padding: 10px 12px; background: var(--b-grey); text-align: center; font-family: var(--ax-display); font-stretch: 75%; font-weight: 700; font-size: 15px; line-height: 1.3; letter-spacing: .04em; text-transform: uppercase; color: var(--b-ink-3); } / The other events. */ .leo-ds--community .leo-evmore { padding: 0 0 var(--ds-section-block); } }