/* ===================================================================== lumos-native.css - the no-JS, native-first interaction layer for the Lumos starter. Loaded AFTER lumos.css (canonical/verbatim), BEFORE the tenant styles.css. Brand-agnostic. It ONLY adds what the native mechanism needs on top of the faithful Lumos markup + classes (which lumos.css already styles): show/hide bound to the native
[open] state, the native shell reset, CSS scroll-snap for the slider, and CSS reveal/marquee. It must NOT re-style the Lumos components - lumos.css owns their look. scripts.js adds optional polish (dialog wiring, nav/dropdown close affordances, slider controls, ARIA tabs). Convention: html.js = JS present (inline flag, before first paint). All motion respects prefers-reduced-motion. ===================================================================== */ /* ---- Scroll reveal: CSS-only, self-completing on load (content ends visible) ---- */ @keyframes u-reveal-in { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: none; } } .u-reveal { animation: u-reveal-in 0.6s both; } .u-reveal-2 { animation-delay: 0.1s; } .u-reveal-3 { animation-delay: 0.2s; } .u-reveal-4 { animation-delay: 0.3s; } @media (prefers-reduced-motion: reduce) { .u-reveal, .u-reveal-2, .u-reveal-3, .u-reveal-4 { animation: none; } } /* ---- Marquee: CSS @keyframes, configurable via data-* on .u-marquee: - data-marquee-speed seconds for one full cycle (read by scripts.js wireMarquee into --marquee-duration; CSS can't read a numeric attr into a time). Default 30s. - data-marquee-loop "false" = static (no scroll); default loops forever. - data-marquee-pause-on-hover "false" = keep scrolling on hover; default pauses. Loop + pause-on-hover are pure-CSS attribute toggles, so they work with NO JS; only speed needs the JS hook. The track must hold TWO identical sets of items so the -50% shift lands exactly one set over (seamless). Respects reduced-motion. ---- */ .u-marquee { overflow: hidden; } .u-marquee_track { display: flex; width: max-content; gap: var(--_spacing---space--5, 2rem); animation: u-marquee-x var(--marquee-duration, 30s) linear infinite; } @keyframes u-marquee-x { from { transform: translateX(0); } to { transform: translateX(-50%); } } .u-marquee:not([data-marquee-pause-on-hover="false"]):hover .u-marquee_track { animation-play-state: paused; } .u-marquee[data-marquee-loop="false"] .u-marquee_track { animation: none; } @media (prefers-reduced-motion: reduce) { .u-marquee_track { animation: none; } } /* ---- marker removal for the Lumos toggles we turn into summaries ---- */ .accordion_toggle_button::-webkit-details-marker, .dropdown_toggle_wrap::-webkit-details-marker, .nav_menu_summary::-webkit-details-marker { display: none; } summary.accordion_toggle_button, summary.dropdown_toggle_wrap, summary.nav_menu_summary { list-style: none; cursor: pointer; } /* ---- Accordion: native
(single-open, no JS). The
is the .accordion_component (the element whose direct children are the summary + the content_wrap); its summary is the .accordion_toggle_button. lumos.css styles .accordion_toggle_button / _content_wrap (the latter display:none, was JS-driven); we only bind show + icon rotation to the native [open] state. ---- */ details[open].accordion_component .accordion_content_wrap { display: block; overflow: visible; } /* Icon state indicator: Lumos rotated the chevron via its [data-state] var (transform: rotate(-180deg * --_state---false)); that JS is stripped and the var is inert, so we rebind both rotations to the native [open] state, pinned deterministically (not relying on the dead var). Closed = the base downward chevron; open = 180deg (upward) - the conventional affordance, same swing magnitude Lumos used. */ .accordion_toggle_icon { transition: transform 0.3s ease; } .accordion_component:not([open]) .accordion_toggle_icon { transform: rotate(0deg); } details[open].accordion_component .accordion_toggle_icon { transform: rotate(180deg); } /* The

heading is kept INSIDE the (for screen-reader heading nav), but the flex layout (space-between: text | icon) lives on .accordion_toggle_button = the summary. Make the heading wrapper layout-transparent so the text + icon spans are the summary's flex items again, exactly as they were direct children of the original