/* ========================================================= Dhali Pattern Library — Scroll Timeline Native Gutenberg version of the Meatlers scroll-timeline interaction. Ownership model (per the locked architecture): GUTENBERG / Ollie tokens -> section padding, item padding, column gap, typography, content colors. Anything an editor should see reflected in the block sidebar lives in block attributes, not here. THIS FILE -> component geometry Gutenberg has no control for: rail, progress fill, marker dot, alternation, active-state color swap, mobile teardown. JS (timeline.js) -> runtime state only: a unitless 0-1 progress value and the .is-active class. Nothing else. .dhali-timeline is applied to the INNER constrained Group (per Ollie's section -> constrained group -> content structure), not the outer full-width section, so the rail spans the content area rather than the section's own vertical padding. ========================================================= */ .dhali-timeline { /* ---- Design tokens (site-agnostic) ---- All three colors derive from ONE editor-facing control: this Group block's native Text Color setting (the same "Text" color swatch every Group/Columns block already has in the block sidebar — no custom block, no extra markup, no PHP changes needed to add a color control). WordPress writes an editor-picked text color as an inline `style="color:...""` directly on this element, which wins the cascade over the plain-selector default below. CSS's `currentColor` keyword always resolves to whichever color actually won — inline override or this fallback — so every pseudo-element that references currentColor (directly or via color-mix()) updates automatically. To recolor the whole timeline: select the "Scroll Timeline" group in List View and set its Text color. If an editor never sets one, this default keeps the original Ollie-token pairing: primary for the active state, and two automatically-muted tints of it for the resting track/marker — nothing to configure out of the box. color-mix() has broad support in current browsers; the plain declarations immediately before each color-mix() line are the fallback for anything that doesn't understand it (a browser skips a declaration it can't parse and keeps the previous one, so order matters — do not remove them). */ color: var(--wp--preset--color--primary); --dhali-timeline-color: currentColor; --dhali-timeline-track-color: var(--wp--preset--color--border-light); --dhali-timeline-track-color: color-mix(in srgb, currentColor 18%, transparent); --dhali-timeline-marker-color: var(--wp--preset--color--border-dark); --dhali-timeline-marker-color: color-mix(in srgb, currentColor 35%, transparent); /* ---- Component geometry ---- Implementation mechanics, not editor design decisions, so these stay as plain values rather than tokens. */ --dhali-timeline-width: 2px; --dhali-timeline-dot-size: 20px; /* Row gutter. This was originally authored as a Gutenberg blockGap block attribute on each .dhali-timeline__item Columns block instead of here, per the general preference for editor-visible spacing tokens. That broke in production: core Columns' blockGap serialization didn't match what this site's Gutenberg version expected, the block was flagged invalid, and "Attempt recovery" silently deleted the gap declaration rather than fixing it (confirmed by diffing the before/after saved markup — padding survived intact, gap did not). Moved back to a static CSS value instead of re-guessing at another serialization to hand-author. */ --dhali-timeline-gutter: var(--wp--preset--spacing--xx-large, 4rem); position: relative; width: 100%; /* Keeps the rail/progress/marker z-index stack local to this component so it can't unexpectedly interact with positioned content elsewhere on a client site. */ isolation: isolate; } /* Gray track. top/bottom (absolute offsets, not a percentage height) reliably spans the container's real content height even though .dhali-timeline itself has no explicit height. */ .dhali-timeline::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: var(--dhali-timeline-width); background: var(--dhali-timeline-track-color); transform: translateX(-50%); z-index: 0; pointer-events: none; } /* Progress rail. Same top:0/bottom:0 full-height trick as the track above, then scaleY() reveals the completed fraction. JS writes a bare number (0-1) to --dhali-timeline-progress — no px, no %, so it never goes stale when content height changes (image loads, editor adds an item, font swap, etc). */ .dhali-timeline::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: var(--dhali-timeline-width); background: var(--dhali-timeline-color); transform: translateX(-50%) scaleY(var(--dhali-timeline-progress, 0)); transform-origin: top; z-index: 1; pointer-events: none; /* NOTE: transform is not additive across rules. If another rule ever needs to move this element, fold it into this same transform declaration rather than overriding it. */ } /* ---- Timeline items (each is a core/columns block) ---- No padding or column-gap here — those are authored as Ollie spacing-token block attributes on the pattern's Columns blocks so editors see real values in the sidebar instead of invisible component CSS. This file only adds what Gutenberg can't: position context, z-index stacking, and the alternating layout. */ .dhali-timeline__item { position: relative; z-index: 2; column-gap: var(--dhali-timeline-gutter); } /* Alternate every second item, desktop only. Editors always author Image | Content in the same order; this is the only thing that produces the visual left/right swap. */ .dhali-timeline__item:nth-child(2n) { flex-direction: row-reverse; } /* Vertical spacing between the date/heading/paragraph stack. Originally authored as a blockGap block attribute on the Group instead of here — that also broke in production for the same reason the row gutter did (see the note on --dhali-timeline-gutter above): blockGap on a group without an explicit flex layout type serializes via a dynamically generated per-instance class and stylesheet rule, not a predictable inline property, so a static pattern file can't hand-author it correctly. Plain child-margin spacing avoids depending on that mechanism entirely. */ .dhali-timeline__content > * + * { margin-top: var(--wp--preset--spacing--small, 1rem); } /* Marker dot, centered on the rail. */ .dhali-timeline__item::before { content: ""; position: absolute; top: 50%; left: 50%; width: var(--dhali-timeline-dot-size); height: var(--dhali-timeline-dot-size); background: var(--dhali-timeline-marker-color); border-radius: 50%; transform: translate(-50%, -50%); z-index: 3; transition: background-color 0.2s ease; } .dhali-timeline__item.is-active::before { background: var(--dhali-timeline-color); } /* ---- Mobile: strip the timeline chrome, keep content stacked ---- The underlying core blocks remain fully valid, editable Gutenberg content with the enhancement removed — nothing here touches block markup, only presentation. 781px matches core Gutenberg's own Columns stacking point (`@media (max-width:781px) .wp-block-columns:not(.is-not- stacked-on-mobile) > .wp-block-column { flex-basis:100% }`), confirmed against the current core/columns stylesheet. This MUST stay in sync with BREAKPOINT in timeline.js, and both should be re-verified against the target Ollie/WP version's actual shipped breakpoint before production use — WordPress does not treat this value as stable across versions and it has changed before. */ @media (max-width: 781px) { .dhali-timeline::before, .dhali-timeline::after, .dhali-timeline__item::before { display: none; } .dhali-timeline__item, .dhali-timeline__item:nth-child(2n) { flex-direction: column; } }