every other page uses it as — .stack's `* + *` margin doesn't apply above the first child of a section, so each needed its own space-below. Scoped to h2 so it can't leak onto the page-intro usage. */ h2.eyebrow { margin-bottom: var(--s4); } .mono { font-family: var(--mono); font-size: 0.92em; } /* ── Layout primitives ─────────────────────────────────────────────── */ .wrap { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--s5); } .stack > * + * { margin-top: var(--s3); } .row { display: flex; align-items: center; gap: var(--s3); } .spacer { flex: 1; } .page { padding-block: var(--s6) var(--s8); } /* The bare, sidebar-free auth screens — signin.html (the landing page) and password.html: undo the sidebar's body inset (and the mobile top-bar's padding-top) and center the auth card in the full viewport instead of just the space the sidebar would have left. The attribute selector outranks both the plain `body { … }` rule above and the `@media` one below regardless of source order, so this one rule wins at every breakpoint without `!important`. */ body[data-page="signin"], body[data-page="password"] { padding-left: 0; padding-top: 0; } body[data-page="signin"] .page, body[data-page="password"] .page { min-height: 100vh; display: flex; align-items: center; padding-block: 0; } /* ── App sidebar ───────────────────────────────────────────────────── */ /* Persistent left nav, Duolingo-style: a fixed full-height rail rather than a top bar, so the main column gets the full viewport width to breathe. The body's padding-left keeps page content clear of it (see `body` above) — one inset, no page opts out. */ .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; width: var(--sidebar-w); display: flex; flex-direction: column; gap: var(--s5); padding: var(--s5) var(--s4); overflow-y: auto; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); /* The flask wall. Deliberately not --border like every other divider in the app: this one line is the vessel the liquid pool, the bubbles and the graduations below all sit inside, so it takes the brand purple and enough weight (3px) to read as glass rather than as a hairline rule. Inside the rail's box-sizing: border-box width, so --sidebar-w still measures true and the body padding downstream needs no adjusting. */ border-right: 3px solid var(--brand); /* The rail animates nothing. Its width is never toggled — `--sidebar-w` changes only at the 1024px and 640px breakpoints — so an animated width could fire in exactly one situation: dragging the window across a breakpoint. `body`'s `padding-left` reads the same variable and is not animated, so the rail would have glided while the content it clears jumped. */ } /* Graduations, the last piece that turns the rail into a flask: ticks marching up the inside of the wall like a measuring cylinder's scale. Two repeating gradients rather than N elements — a long major tick every 64px and a short minor one offset half a period into each gap, which is what stops an even single-length run from reading as hatching. Each layer is its own no-repeat box (background-size does the tick *length*, the gradient does the spacing), anchored right so both grow leftward off the wall. z-index: -1 puts them behind the nav the same way .sidebar-bubbles does; equal z-index plus ::after's later paint order means the graduations sit in front of the bubbles, so a bubble passes *behind* the scale as it would behind real glass. */ .sidebar::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 14px; z-index: -1; pointer-events: none; background-image: repeating-linear-gradient(180deg, var(--gauge-line) 0 2px, transparent 2px 112px), repeating-linear-gradient(180deg, transparent 0 56px, var(--gauge-line) 56px 58px, transparent 58px 112px); background-size: 20px 100%, 11px 100%; background-position: right top; background-repeat: no-repeat; } /* A pool of violet "liquid" filling the foot of the rail, with the sign-out button floating in it as its background. Deliberately *not* tied to `.sidebar-signout`'s own box: that button only exists when signed in (account.js appends it), and a decoration that vanishes for signed-out visitors would leave the rail bare on exactly the pages people see first. So the pool is always there, anchored to the sidebar's bottom edge, and the button sits in it when it exists. --LIQUID-TOP is hardcoded (#ded5fb, = --brand at 30% over --bg) rather than a color-mix(), so the wave SVG and the gradient it continues into can be guaranteed the same value — a CSS custom property doesn't resolve inside a separately-fetched data-URI SVG document, so the two would drift apart and show a seam. `overflow: hidden` is load-bearing: the ::before wave is 200% wide (see the sway below), and .sidebar computes `overflow-x: auto` from its own `overflow-y: auto`, so an unclipped wave would give the whole rail a horizontal scrollbar. */ .sidebar-liquid { position: absolute; left: 0; right: 0; bottom: 0; height: 116px; z-index: -2; overflow: hidden; pointer-events: none; background-image: linear-gradient(180deg, var(--liquid-top), var(--liquid-deep)); background-repeat: no-repeat; background-position: bottom left; /* 1px of overlap under the wave strip, so no hairline seam shows between the two layers. */ background-size: 100% calc(100% - 13px); } /* The surface. Two wave periods per tile, tiled twice across a 200%-wide strip, so translating it exactly -50% (one whole tile) loops seamlessly and reads as a slow swell rather than a slide. */ .sidebar-liquid::before { content: ""; position: absolute; top: 0; left: 0; width: 200%; height: 14px; background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20240%2016'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%208%20Q30%200%2060%208%20T120%208%20T180%208%20T240%208%20L240%2016%20L0%2016%20Z'%20fill='%23ded5fb'/%3E%3C/svg%3E") repeat-x left top / 50% 100%; animation: sidebar-liquid-sway 11s linear infinite; } @keyframes sidebar-liquid-sway { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Bubbles rising out of the pool: their own full-height layer rather than children of .sidebar-liquid, so they can climb past the nav items and the brand mark instead of being clipped to the pool's 116px box. Negative z-index keeps this inside .sidebar's own stacking context (already position:fixed with an explicit z-index) but behind every real child — one step above .sidebar-liquid's -2, so a bubble reads as sitting *in* the liquid at the moment it spawns. pointer-events is a second, redundant guard. Everything animated here is transform and opacity, never a layout property, and because these are real DOM elements with real CSS animations, the app-wide reduced-motion rule below already covers them with no extra override. */ .sidebar-bubbles { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .sidebar-bubbles .bubble { position: absolute; bottom: 96px; border-radius: 50%; background: color-mix(in srgb, var(--brand) 20%, transparent); border: 1.5px solid color-mix(in srgb, var(--brand) 42%, transparent); opacity: 0; /* linear is load-bearing, not laziness. A timing function applies to *every keyframe segment independently*, so the `ease-in` this used to carry made the bubble accelerate to full speed by each waypoint and then restart from a standstill at the next one — a visible stall in the middle of the climb. Speed is instead encoded in the keyframe spacing below, which lets it vary continuously across the whole path with no discontinuity at any waypoint. */ animation: sidebar-bubble-rise 17s linear infinite; } /* A specular glint, so a bubble reads as a hollow bubble rather than a flat violet disc. */ .sidebar-bubbles .bubble::after { content: ""; position: absolute; top: 16%; left: 18%; width: 26%; height: 26%; border-radius: 50%; background: rgba(255, 255, 255, 0.5); } /* Percentage lefts, not pixels, so the same five bubbles sit correctly in the 232px rail and the 72px icon rail with no per-breakpoint repositioning — paired with a half-width negative margin so the percentage places each bubble's *centre*, not its left edge. Without that the widest bubble at the far right hangs two-thirds outside the 72px rail and reads as a clipping bug rather than as a bubble brushing the wall. Delays are negative so every bubble is already somewhere on its climb at frame 0 — a positive delay would leave the rail empty for the first several seconds after every navigation. */ .sidebar-bubbles .bubble:nth-child(1) { left: 14%; width: 22px; height: 22px; margin-left: -11px; animation-duration: 16s; animation-delay: 0s; } .sidebar-bubbles .bubble:nth-child(2) { left: 32%; width: 13px; height: 13px; margin-left: -6.5px; animation-duration: 20s; animation-delay: -4s; } .sidebar-bubbles .bubble:nth-child(3) { left: 50%; width: 26px; height: 26px; margin-left: -13px; animation-duration: 17.5s; animation-delay: -8s; } .sidebar-bubbles .bubble:nth-child(4) { left: 68%; width: 16px; height: 16px; margin-left: -8px; animation-duration: 14.5s; animation-delay: -11s; } .sidebar-bubbles .bubble:nth-child(5) { left: 84%; width: 19px; height: 19px; margin-left: -9.5px; animation-duration: 18.5s; animation-delay: -14s; } /* Travel is expressed in vh so a bubble always clears the top of the rail whatever the viewport height, and the horizontal drift keeps them from reading as beads on a vertical wire. The vertical stops trace y ∝ t^1.3 rather than dividing the path evenly: with `linear` between keyframes, per-segment speed is the gap between stops, so this yields a steadily rising 8.8 → 12.9 → 15.1 → 16.7 → 18.0 → 19.2 vh-per-tick — a bubble that accelerates as it climbs, the way one actually does as it expands, with each step small enough that the change reads as continuous rather than as a gear shift. Deliberately many stops for that reason; a coarser set would make the speed changes visible as jolts. */ @keyframes sidebar-bubble-rise { 0% { transform: translate(0, 0) scale(0.78); opacity: 0; } 12% { opacity: 0.5; } 15% { transform: translate(3px, -8.8vh) scale(0.83); } 30% { transform: translate(5px, -21.7vh) scale(0.88); } 45% { transform: translate(3px, -36.8vh) scale(0.92); } 60% { transform: translate(-1px, -53.5vh) scale(0.96); } 75% { transform: translate(-4px, -71.5vh) scale(1); } 82% { opacity: 0.5; } 90% { transform: translate(-3px, -90.7vh) scale(1.03); } 100% { transform: translate(0, -104vh) scale(1.06); opacity: 0; } } .brand { display: inline-flex; align-items: center; justify-content: center; width: 100%; gap: var(--s2); font-weight: 700; letter-spacing: -0.02em; color: var(--brand-ridge); font-size: 30px; } .brand:hover { text-decoration: none; } .sidebar-nav { display: flex; flex-direction: column; gap: 4px; } /* The rail's links are split into two captioned groups — "You" and "Study" — so the account item leads the nav instead of trailing the destinations. Each group is its own `.sidebar-nav`, and `js/lib/account.js` resolves `.sidebar-nav` to the *first* one (You), appending its injected Profile/Sign in item after that group's caption; the Study group is static markup it never touches. Reordering the groups in the HTML therefore also moves where the injected item lands. */ .sidebar-groups { display: flex; flex-direction: column; gap: var(--s5); } .sidebar-group-label { padding: 0 12px 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); } .sidebar-item { display: flex; align-items: center; gap: var(--s3); padding: 10px 12px; border-radius: var(--radius); border: 2px solid transparent; color: var(--muted); font-size: 16px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; transition: color var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease); } .sidebar-item:hover { color: var(--brand-text); background: var(--brand-faint); text-decoration: none; } .sidebar-item[aria-current="page"] { color: var(--brand-text); background: var(--brand-faint); border-color: var(--brand-dim); } .sidebar-item-icon { flex: none; width: 22px; text-align: center; font-size: 16px; line-height: 1; } .sidebar-item-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* `.sidebar` is a fixed, full-height (`inset: 0 auto 0 0`) flex column, unlike `.sidebar-nav` which is sized to its content — so unlike the abandoned `.sidebar-spacer`, `margin-top: auto` here has free space to actually push into. Reset button-only defaults `.sidebar-item` (an elsewhere) never had to care about. */ .sidebar-signout { margin-top: auto; width: 100%; background: none; appearance: none; cursor: pointer; /* This button is the one nav item sitting on a brand-filled surface (the liquid pool), so the Ink-Not-White rule applies: --muted measures 3.95:1 against --liquid-deep and fails AA, while --brand-ink clears 10.4:1. The hover pair below is not redundant — `.sidebar-item:hover` is more specific than `.sidebar-signout`, so without it hover would drop the label back to --brand-text, which measures 3.28:1 on the pool. Feedback therefore comes from the liquid darkening under the pointer rather than from a colour change on the label. */ color: var(--brand-ink); } .sidebar-signout:hover { color: var(--brand-ink); background: color-mix(in srgb, var(--brand) 22%, transparent); } .sidebar-signout:disabled { opacity: 0.5; cursor: default; } /* ── Utility ───────────────────────────────────────────────────────── */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } [hidden] { display: none !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Icon-only rail: still a left sidebar, just narrow — labels hide, icons centre. */ @media (max-width: 900px) { :root { --sidebar-w: 72px; } .sidebar { align-items: center; padding-inline: 10px; } /* The pool and its bubbles survive here — they're anchored to the rail's bottom edge and positioned in percentages, so they reflow into 72px without any repositioning. */ .brand { font-size: 13px; } .sidebar-item { justify-content: center; padding-inline: 0; width: 100%; position: relative; } /* Clipped, not `display: none`. The icon beside it is decorative and `aria-hidden`, so hiding the label the layout way would leave every item in this rail with no accessible name at all — a screen reader reads five unlabelled links, and the icon-only rail is exactly the breakpoint where the text is the only name there is. Clipping keeps it in the accessibility tree while taking no space. (Pre-existing: the rail hid these labels this way when the icons were "⌂ ▤ ✦" characters, which were `aria-hidden` too.) */ .sidebar-item-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Captions go with the labels: "STUDY" at 0.14em tracking does not fit a 72px rail, and with the labels gone the group gap alone already separates You from Study. */ .sidebar-group-label { display: none; } } /* Collapse to a slim top bar: a left rail has no room to spare on a phone. --sidebar-w drops to 0 and --header-h takes over. Both are consumed in CSS alone, so field.html's route needs no extra handling here — it inherits the same body insets as every other page. */ @media (max-width: 640px) { :root { --sidebar-w: 0px; --header-h: 56px; } .wrap { padding-inline: var(--s4); } .sidebar { inset: 0 0 auto 0; width: auto; height: var(--header-h); flex-direction: row; align-items: center; gap: var(--s4); padding-inline: var(--s4); overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 3px solid var(--brand); } /* The pool is anchored to the rail's bottom edge and is taller than this 56px bar, so here it would simply flood the whole top bar in violet instead of reading as liquid with a surface. */ .sidebar-liquid, .sidebar-bubbles { display: none; } /* Graduations go with them: with no liquid to measure, ticks along a 56px bar read as hatching on a divider, not as a vessel. The wall itself stays, now as the bar's bottom edge. */ .sidebar::after { display: none; } /* The bar is 56px of a single row, so the two groups lie side by side rather than stacked, and their captions stay hidden (inherited from the 900px rule above). The gap between groups is wider than the gap inside one, which is the only thing still marking the You/Study split. */ .sidebar-groups { flex-direction: row; align-items: center; gap: var(--s4); } .sidebar-nav { flex-direction: row; gap: 4px; } .sidebar-item { padding: 8px 10px; } .sidebar-signout { margin-top: 0; margin-left: auto; width: auto; flex: none; /* No pool behind it at this breakpoint, so the label goes back to the nav's own colour. */ color: var(--muted); } .sidebar-signout:hover { color: var(--brand-text); background: var(--brand-faint); } body { padding-top: var(--header-h); } }