element gains a .lms-faq-item__body wrapper (added in
* Faq.tsx) that acts as the grid cell. Its min-height is 0 so the grid
* can collapse it to zero. The inside receives overflow:hidden so
* content is clipped during the transition.
*
* Native toggles display (not visibility/height), so we cannot
* transition on [open] directly — instead we use the grid approach which
* works during both the open AND close phases because the DOM node stays
* present; only the attribute changes.
*
* This is a pure-CSS solution: no JS, no runtime serialisation needed.
* It works identically in editor (React), preview, and static export.
*/
.lms-faq-item__body {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.lms-faq-item[open] .lms-faq-item__body {
grid-template-rows: 1fr;
}
/*
* is-closing: JS sets this while [open] is still present so we can animate
* grid-template-rows back to 0fr. JS removes [open] after transitionend.
*/
.lms-faq-item.is-closing[open] .lms-faq-item__body {
grid-template-rows: 0fr;
/* Wait for answer text to fade before collapsing height */
transition-delay: 180ms;
transition-duration: 320ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
/*
* The inside the wrapper must have overflow:hidden so it is clipped
* when grid-template-rows is 0fr. We also fade it in/out for a polished feel.
*/
.lms-faq-item__body > p {
overflow: hidden;
margin: 0;
padding: 0 1.25rem 1.25rem;
color: var(--lms-text-muted);
font-size: clamp(0.9rem, 1.1vw, 1.05rem);
line-height: 1.7;
overflow-wrap: anywhere;
white-space: pre-line;
opacity: 0;
transform: translateY(-4px);
transition:
opacity 260ms cubic-bezier(0.4, 0, 0.2, 1) 60ms,
transform 260ms cubic-bezier(0.4, 0, 0.2, 1) 60ms;
}
.lms-faq-item[open] .lms-faq-item__body > p {
opacity: 1;
transform: translateY(0);
}
/* [open] stays until JS finalises — must beat the open-state opacity rule. */
.lms-faq-item.is-closing[open] .lms-faq-item__body > p {
opacity: 0;
transform: translateY(-4px);
transition:
opacity 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
/*
* Chevron rotation is already handled in atoms-responsive.css
* (.lms-faq-item[open] summary svg → rotate(180deg)).
* We only need to ensure the transition duration is consistent.
*/
.lms-faq-item summary svg {
transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* ─── prefers-reduced-motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.lms-faq-item__body {
transition: none;
}
.lms-faq-item__body > p {
transition: none;
opacity: 1;
transform: none;
}
.lms-faq-item summary svg {
transition: none;
}
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* 2. Smooth scroll + sticky-header offset for in-page anchor links */
/* ═══════════════════════════════════════════════════════════════════════════ */
/*
* Problem: scroll-behavior:smooth on .lms-page is ineffective because
* overflow-x:clip does NOT make .lms-page a scroll container — the actual
* scroll happens on the viewport (html/body). We add it to html here.
*
* The existing page-layout.css already declares:
* .lms-page [id] { scroll-margin-top: 84px; }
* That value (84px) covers the 4rem (64px) min-height nav + 20px breathing
* room, which is correct. We keep it and add a CSS custom property for
* maintainability (other lanes can override --lms-nav-h if nav height changes).
*
* The initLmsHeaderScroll runtime sets the glass look but does NOT change
* element height, so the static 84px offset remains accurate at all scroll
* positions.
*/
/* scroll-behavior is AUTO on purpose: the initLmsSmoothScroll runtime drives a
* custom rAF animation whose duration scales with distance (consistent feel on
* short AND long pages). CSS `smooth` here would fight the per-frame scrollTo and
* make it laggy. scroll-margin-top below still positions anchors under the nav for
* any non-JS fallback jump. */
html {
scroll-behavior: auto;
}
/*
* Export: the exported site wraps content in .lms-page directly inside
.
* The html rule above covers it. No JS assist is needed because:
* - All section ids are on the section elements themselves
* - scroll-margin-top on .lms-page [id] ensures target isn't hidden under nav
* - The sticky nav min-height is 64px + we give 84px margin (enough for all
* design languages including light theme which may render nav slightly taller)
*/
/*
* Reinforce scroll-margin-top with a variable so it's easy to adjust.
* We intentionally do NOT import this override into sections.css to avoid
* touching page-layout.css. The higher specificity wins over the existing rule.
*/
:root {
--lms-nav-h: 84px;
}
.lms-page [id] {
scroll-margin-top: var(--lms-nav-h);
}
/* ─── prefers-reduced-motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* 3. Legal popup — Privacy policy / Terms of service modal overlay */
/* ═══════════════════════════════════════════════════════════════════════════ */
/*
* Triggered by [data-lms-legal="privacy"] / [data-lms-legal="terms"] links in
* the footer. initLmsLegalPopup (runtime/legalPopup.ts) wires the JS; this CSS
* owns all visual styles.
*
* Theming: all colours, radius, and fonts come from --lms-* tokens set by
* applyRootVars() + the active design language — so the popup matches every
* theme automatically with zero overrides.
*
* Transitions respect prefers-reduced-motion.
*/
/* ── backdrop + full-screen overlay ─────────────────────────────────────── */
.lms-legal-popup {
/* hidden by default; JS adds .lms-legal-popup--open */
display: none;
position: fixed;
inset: 0;
z-index: 9000;
}
.lms-legal-popup--open {
display: block;
}
.lms-legal-popup__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
animation: lms-legal-fade-in 200ms ease both;
}
/* ── panel ───────────────────────────────────────────────────────────────── */
.lms-legal-popup__panel {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(680px, calc(100vw - 2rem));
max-height: min(80vh, 720px);
display: flex;
flex-direction: column;
background: var(--lms-surface, #1a1a2e);
color: var(--lms-text, #e2e8f0);
border: 1px solid var(--lms-border, rgba(255, 255, 255, 0.1));
border-radius: var(--lms-radius);
box-shadow:
0 8px 40px rgba(0, 0, 0, 0.4),
0 2px 8px rgba(0, 0, 0, 0.2);
animation: lms-legal-slide-up 250ms cubic-bezier(0.34, 1.1, 0.64, 1) both;
}
/* ── header row ─────────────────────────────────────────────────────────── */
.lms-legal-popup__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--lms-border, rgba(255, 255, 255, 0.1));
flex-shrink: 0;
}
.lms-legal-popup__title {
font-family: var(--lms-heading-font, inherit);
font-size: 1.125rem;
font-weight: 700;
line-height: 1.3;
margin: 0;
color: var(--lms-text, #e2e8f0);
}
.lms-legal-popup__close {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 2rem;
height: 2rem;
padding: 0;
border: 1px solid var(--lms-border, rgba(255, 255, 255, 0.12));
border-radius: var(--lms-radius);
background: transparent;
color: var(--lms-text-muted, rgba(255, 255, 255, 0.5));
cursor: pointer;
transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.lms-legal-popup__close:hover,
.lms-legal-popup__close:focus-visible {
background: var(--lms-primary-alpha, rgba(255, 255, 255, 0.08));
color: var(--lms-text, #e2e8f0);
border-color: var(--lms-primary, #6366f1);
outline: none;
}
/* ── scrollable body ────────────────────────────────────────────────────── */
.lms-legal-popup__body {
flex: 1 1 auto;
overflow-y: auto;
padding: 1.5rem;
overscroll-behavior: contain;
/* Custom scrollbar — subtle, inherits theme */
scrollbar-width: thin;
scrollbar-color: var(--lms-border, rgba(255,255,255,0.15)) transparent;
}
.lms-legal-popup__body::-webkit-scrollbar {
width: 6px;
}
.lms-legal-popup__body::-webkit-scrollbar-track {
background: transparent;
}
.lms-legal-popup__body::-webkit-scrollbar-thumb {
background: var(--lms-border, rgba(255, 255, 255, 0.15));
border-radius: var(--lms-radius);
}
.lms-legal-popup__text {
font-family: var(--lms-font-body, inherit);
font-size: 0.9375rem;
line-height: 1.75;
color: var(--lms-text-muted, rgba(255, 255, 255, 0.7));
white-space: pre-wrap;
margin: 0;
}
/* ── animations ─────────────────────────────────────────────────────────── */
@keyframes lms-legal-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes lms-legal-slide-up {
from {
opacity: 0;
transform: translate(-50%, calc(-50% + 20px));
}
to {
opacity: 1;
transform: translate(-50%, -50%);
}
}
/* ─── prefers-reduced-motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.lms-legal-popup__backdrop {
animation: none;
}
.lms-legal-popup__panel {
animation: none;
transform: translate(-50%, -50%);
}
.lms-legal-popup__close {
transition: none;
}
}
/* page layout overrides */
#lms-page[data-skin-heading-align="left"] .header-block,
#lms-page[data-skin-heading-align="left"] .lms-section-header {
text-align: left;
}
#lms-page[data-skin-heading-align="center"] .header-block,
#lms-page[data-skin-heading-align="center"] .lms-section-header {
text-align: center;
}
#lms-page[data-skin-width="custom"] .container,
#lms-page[data-skin-width="custom"] .lms-container {
max-width: var(--lms-container, var(--lms-content-max-width, 1180px));
}