/* ===================================================================== OSE · Chapter nav · styles/components/chapter-nav.css --------------------------------------------------------------------- The home page's chapter index: numbered links (01 Lộ trình · 02 Lớp học · 03 Khai giảng), each over a hairline track, so a parent always knows where they are on the page and how much is left. A plain list on phones; from 64em a glass bar, sticky under the site nav. Component tokens only: --chapter-nav-*. Markup The numbers are a real sequence (an ordered list); a link reads as "01 Lộ trình". role="list" keeps the list semantics in Safari. Surface any (tokens re-map). The home page uses data-surface="night": the bar continues the night chapter that follows the hero, so the hero's fade into night runs straight into chapter 01. Layout < 48em a vertical list, one row per chapter. >= 48em one row of equal columns (any number of chapters). >= 64em the row becomes a glass bar --chapter-nav-height tall, sticky at --chapter-nav-offset (the site nav's height). A sticky box travels inside its parent: wrap the bar and its chapters, so it lets go after the last chapter. Progress each link draws a hairline track along its bottom edge (::after); from 48em the tracks read as one segmented rule, one segment per chapter. .chapter-nav__progress lies on that track at full width. Without JS (and on the reduced-motion path) it IS the track: same colour, same width, so nothing reads as "done". From 64em, while the chapter-nav scene runs (motion.js marks the root data-scene-state="running"), it becomes the ink bar, thicker, scaled from the inline start: the scene scrubs scaleX 0 → 1 through its chapter. Below 64em the bar is not sticky, the scene leaves the progress alone and it stays the track. Transform and opacity belong to the scene. States hover (hover-capable pointers): the track turns strong · focus-visible: ring · active: muted text · aria-current="true" | "location" (set by the scene on the chapter in view): the number turns full ink. No JS of its own. ===================================================================== */ @layer components { .chapter-nav { background-color: var(--chapter-nav-bg); color: var(--chapter-nav-text); } .chapter-nav__list { display: grid; inline-size: min(var(--chapter-nav-max-width), 100% - var(--chapter-nav-padding-inline) - var(--chapter-nav-padding-inline)); margin-inline: auto; padding-block: var(--chapter-nav-padding-block); padding-inline: 0; list-style: none; } .chapter-nav__item { display: grid; min-inline-size: 0; } .chapter-nav__link { --_track: var(--chapter-nav-track); position: relative; display: flex; align-items: center; gap: var(--chapter-nav-link-gap); min-block-size: var(--chapter-nav-link-min-height); min-inline-size: 0; border-radius: var(--chapter-nav-link-radius); color: var(--chapter-nav-link-text); font-family: var(--chapter-nav-link-font-family); font-size: var(--chapter-nav-link-font-size); font-weight: var(--chapter-nav-link-font-weight); line-height: var(--chapter-nav-link-leading); text-decoration: none; -webkit-tap-highlight-color: transparent; transition: color var(--chapter-nav-duration) var(--chapter-nav-ease); } /* The track: a hairline along the link's bottom edge. */ .chapter-nav__link::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; border-block-end: var(--chapter-nav-track-width) solid var(--_track); transition: border-color var(--chapter-nav-duration) var(--chapter-nav-ease); } @media (hover: hover) { .chapter-nav__link:hover { --_track: var(--chapter-nav-track-hover); } } .chapter-nav__link:focus-visible { box-shadow: var(--chapter-nav-focus-ring); } .chapter-nav__link:active { color: var(--chapter-nav-link-text-active); } .chapter-nav__number { flex: none; font: var(--chapter-nav-number-font); letter-spacing: var(--chapter-nav-number-tracking); font-variant-numeric: tabular-nums; color: var(--chapter-nav-number-color); transition: color var(--chapter-nav-duration) var(--chapter-nav-ease); } .chapter-nav__link[aria-current="true"] .chapter-nav__number, .chapter-nav__link[aria-current="location"] .chapter-nav__number { color: var(--chapter-nav-number-color-current); } .chapter-nav__label { min-inline-size: 0; overflow-wrap: break-word; } /* Progress: lies on the track. Static = the track itself. */ .chapter-nav__progress { position: absolute; inset-inline: 0; inset-block-end: 0; block-size: var(--chapter-nav-track-width); background-color: var(--chapter-nav-track); transform-origin: left center; pointer-events: none; forced-color-adjust: none; } /* ---- One row from 48em ------------------------------------------- */ @media (min-width: 48em) { .chapter-nav__list { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: var(--chapter-nav-column-gap); } } /* ---- Sticky glass bar from 64em ---------------------------------- */ @media (min-width: 64em) { .chapter-nav { position: sticky; inset-block-start: var(--chapter-nav-offset); z-index: var(--chapter-nav-z); background-color: var(--chapter-nav-bg-sticky); -webkit-backdrop-filter: blur(var(--chapter-nav-blur)); backdrop-filter: blur(var(--chapter-nav-blur)); } .chapter-nav__list { block-size: var(--chapter-nav-height); padding-block: 0; } /* Only where the bar is sticky does the scene scrub the progress, so only here does it become the ink bar (below 64em it stays the track). */ .chapter-nav[data-scene-state="running"] .chapter-nav__progress { block-size: var(--chapter-nav-progress-width); background-color: var(--chapter-nav-progress); } } }