/* ============================================================ Audio, from zero — the Learn hub stylesheet Boring Labs skin (light mode), self-hosted on the Solutions site. Generated source of truth: course/template/learn.css → assets/learn.css Do not hand-edit assets/learn.css; edit here and re-run build.mjs. ============================================================ */ /* ---------- FONTS (self-hosted Söhne stack — Option B "quiet technical") ---------- The whole system is Söhne. Each cut is registered as its own @font-face under one "Söhne" family with an explicit declared weight, so a given font-weight always resolves to a real cut — never a browser-synthesized faux-bold. Ramp: Buch 400 · Kräftig 500 · Halbfett 600 · Dreiviertelfett 700. */ @font-face { font-family: "Söhne"; src: url("fonts/soehne-buch.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Söhne"; src: url("fonts/soehne-kraeftig.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Söhne"; src: url("fonts/soehne-halbfett.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Söhne"; src: url("fonts/soehne-dreiviertelfett.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* ---------- TOKENS ---------- */ :root { --ink: #0c0b11; --paper: #f0efeb; --surface: #ffffff; --muted: #6b6a6e; --line: rgba(12, 11, 17, .16); --line-soft:rgba(12, 11, 17, .08); --signal: #ff5949; /* the coral constant */ --accent: #ff5949; /* per-level, overridden inline on */ /* derived tints — see the body/.level-row rule below. They must be (re)declared on every element where --accent is overridden, otherwise they inherit an already-resolved value computed against :root's --accent. */ --accent-wash: color-mix(in oklch, var(--accent) 8%, var(--surface)); --accent-line: color-mix(in oklch, var(--accent) 38%, transparent); --accent-ink: color-mix(in oklch, var(--accent) 72%, var(--ink)); --font-display: "Söhne", "Helvetica Neue", Arial, sans-serif; --font-roc: "Söhne", "Helvetica Neue", Arial, sans-serif; --font-ui: "Söhne", "Helvetica Neue", Arial, sans-serif; --font-eyebrow: "Söhne", "Helvetica Neue", system-ui, sans-serif; --font-prose: "Söhne", "Helvetica Neue", Arial, sans-serif; --measure: 66ch; --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --pad-x: clamp(20px, 5vw, 64px); --soft-shadow: 0 1px 1px color-mix(in oklch, var(--ink) 4%, transparent), 0 18px 40px -28px color-mix(in oklch, var(--ink) 30%, transparent); --ease: cubic-bezier(0.32, 0.72, 0, 1); --ease-soft: cubic-bezier(0.22, 1, 0.36, 1); } /* sRGB fallback for engines without color-mix/oklch (pre-2023) */ @supports not (color: color-mix(in oklch, red, blue)) { :root { --accent-wash: #f6f5f2; --accent-line: rgba(12, 11, 17, .22); --accent-ink: var(--accent); } } /* Recompute the accent-derived tints wherever --accent is overridden, so the per-level accent (set inline on , or via --row-accent on a level row) actually flows into every tinted surface, not just direct var(--accent) uses. CSS resolves these against the element's own --accent. */ body, .level-row { --accent-wash: color-mix(in oklch, var(--accent) 8%, var(--surface)); --accent-line: color-mix(in oklch, var(--accent) 38%, transparent); --accent-ink: color-mix(in oklch, var(--accent) 72%, var(--ink)); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-prose); font-size: 18px; line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "kern" 1, "liga" 1; } img, svg, video, iframe { max-width: 100%; } h1, h2, h3, h4 { margin: 0; text-wrap: balance; } p { text-wrap: pretty; } a { color: inherit; text-decoration: none; } ::selection { background: var(--accent); color: var(--surface); } :focus { outline: none; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; } .skip-link { position: absolute; top: -48px; left: 16px; z-index: 100; background: var(--ink); color: var(--paper); font-family: var(--font-eyebrow); font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: 0.14em; padding: 12px 18px; border-radius: var(--r-sm); transition: top .2s var(--ease); } .skip-link:focus { top: 16px; } /* ---------- SHARED LABEL TYPE ---------- */ .eyebrow { font-family: var(--font-eyebrow); font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: 0.2em; color: var(--muted); } .eyebrow .accent { color: var(--accent-ink); } /* ---------- READING PROGRESS ---------- */ .read-progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: var(--accent); z-index: 60; will-change: transform; } /* ---------- HEADER ---------- */ .site-head { position: sticky; top: 0; z-index: 50; background: color-mix(in oklch, var(--paper) 86%, transparent); -webkit-backdrop-filter: saturate(130%) blur(14px); backdrop-filter: saturate(130%) blur(14px); border-bottom: 1px solid var(--line-soft); } .site-head .head-inner { max-width: 1180px; margin: 0 auto; padding: 16px var(--pad-x); display: flex; align-items: center; justify-content: space-between; gap: 24px; } .head-brand { display: inline-flex; align-items: baseline; gap: 11px; font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -0.005em; color: var(--ink); line-height: 1; } .head-brand .mark { width: 9px; height: 9px; background: var(--accent); border-radius: 2px; align-self: center; } .head-brand .sub { font-family: var(--font-eyebrow); font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .head-nav { display: flex; align-items: center; gap: 28px; } .head-nav a { font-family: var(--font-eyebrow); font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: 0.16em; color: var(--muted); transition: color .25s var(--ease); } .head-nav a:hover { color: var(--ink); } .head-nav a.ext::after { content: " ↗"; color: var(--accent-ink); } @media (max-width: 680px) { .head-nav .nav-hide { display: none; } .head-brand .sub { display: none; } } /* ---------- PAGE SHELL ---------- */ .page { max-width: 1180px; margin: 0 auto; padding: 0 var(--pad-x); } /* ---------- LESSON HERO ---------- */ .lesson-hero { padding: clamp(48px, 8vw, 104px) 0 clamp(28px, 4vw, 44px); border-bottom: 1px solid var(--line); } .lesson-hero .crumb { display: inline-flex; align-items: center; gap: 12px; margin-bottom: clamp(22px, 4vw, 34px); } .lesson-hero .crumb .rule { width: 34px; height: 1px; background: var(--accent-line); } .lesson-hero h1 { font-family: var(--font-roc); font-weight: 600; letter-spacing: -0.005em; line-height: 1.05; font-size: clamp(34px, 5.2vw, 58px); max-width: 18ch; color: var(--ink); } .lesson-hero .objective { margin: clamp(20px, 3vw, 28px) 0 0; max-width: 52ch; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.5; color: color-mix(in oklch, var(--ink) 78%, var(--paper)); } .lesson-hero .meta-row { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; margin-top: clamp(22px, 3vw, 30px); } .lesson-hero .pill { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-eyebrow); font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: 0.16em; color: var(--muted); } .lesson-hero .pill .tick { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } /* ---------- LESSON BODY GRID ---------- */ .lesson-body { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 8vw, 96px); align-items: start; } /* you-are-here rail */ .rail { position: sticky; top: 92px; } .rail .rail-head { font-family: var(--font-eyebrow); font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: 0.18em; color: var(--muted); margin-bottom: 18px; } .rail .rail-head .lv { color: var(--accent-ink); } .rail ol { list-style: none; margin: 0; padding: 0; position: relative; } .rail ol::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--line); } .rail li { position: relative; } .rail a { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; padding: 9px 0; font-family: var(--font-prose); font-size: 14px; line-height: 1.35; color: var(--muted); transition: color .2s var(--ease); } .rail a:hover { color: var(--ink); } .rail a .node { width: 11px; height: 11px; margin-top: 4px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--paper); z-index: 1; transition: all .2s var(--ease); } .rail a .node.done { background: var(--accent); border-color: var(--accent); } .rail a .node.draft { border-color: var(--accent); } .rail li.is-current a { color: var(--ink); } .rail li.is-current a .node { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-wash); } .rail .rail-foot { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 10px; } .rail .rail-foot a { grid-template-columns: none; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-eyebrow); font-weight: 700; text-transform: uppercase; font-size: 10px; letter-spacing: 0.14em; color: var(--muted); padding: 0; } .rail .rail-foot a:hover { color: var(--accent-ink); } /* ---------- ARTICLE / PROSE ---------- */ .prose { max-width: var(--measure); } .prose > * + * { margin-top: 1.15em; } .prose p { font-size: 18px; line-height: 1.72; color: color-mix(in oklch, var(--ink) 92%, var(--paper)); } .prose h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.006em; line-height: 1.1; font-size: clamp(24px, 3vw, 32px); color: var(--ink); margin-top: 2.4em; padding-top: 0.2em; } .prose h2:first-child { margin-top: 0; } .prose h2 .hsh { font-family: var(--font-eyebrow); font-weight: 500; color: var(--accent-ink); font-size: 0.6em; letter-spacing: 0; margin-right: 0.3em; vertical-align: 0.12em; } .prose h3 { font-family: var(--font-eyebrow); font-weight: 500; font-size: 19px; letter-spacing: -0.005em; color: var(--ink); margin-top: 1.8em; } .prose strong { font-weight: 600; color: var(--ink); } .prose em { font-style: italic; } .prose a.link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent-line); text-decoration-thickness: 1.5px; text-underline-offset: 0.22em; transition: text-decoration-color .2s var(--ease); } .prose a.link:hover { text-decoration-color: var(--accent); } .prose code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.86em; background: color-mix(in oklch, var(--ink) 6%, var(--surface)); border: 1px solid var(--line-soft); padding: 0.1em 0.4em; border-radius: 6px; } .prose ul, .prose ol { margin-left: 0; padding-left: 1.3em; } .prose li { margin-top: 0.5em; line-height: 1.6; } .prose li::marker { color: var(--accent-ink); } .prose blockquote { margin: 0; padding-left: 20px; border-left: 2px solid var(--accent-line); color: var(--muted); font-style: italic; } /* checkbox lists (Your turn) */ .prose ul.task-list { list-style: none; padding-left: 0; } .prose ul.task-list li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; } .prose ul.task-list li::marker { content: none; } .prose ul.task-list .box { width: 18px; height: 18px; margin-top: 4px; border: 1.5px solid var(--line); border-radius: 5px; background: var(--surface); } .prose ul.task-list li.checked .box { background: var(--accent); border-color: var(--accent); position: relative; } .prose ul.task-list li.checked .box::after { content: ""; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px; border: solid var(--surface); border-width: 0 2px 2px 0; transform: rotate(42deg); } /* ---------- CALLOUTS ---------- */ .callout { margin: 1.8em 0; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-md); box-shadow: var(--soft-shadow); overflow: hidden; } .callout .co-head { display: flex; align-items: center; gap: 10px; padding: 15px 20px 0; } .callout .co-ico { width: 18px; height: 18px; flex: 0 0 auto; color: var(--accent-ink); } .callout .co-ico svg { display: block; width: 100%; height: 100%; } .callout .co-label { font-family: var(--font-eyebrow); font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: 0.16em; color: var(--accent-ink); } .callout .co-body { padding: 10px 20px 18px; } .callout .co-body > *:first-child { margin-top: 0; } .callout .co-body p { font-size: 16px; line-height: 1.6; } /* try — uses per-level accent */ .callout.is-try { border-color: var(--accent-line); background: var(--accent-wash); } /* mistake — always the coral signal (warning), independent of level accent */ .callout.is-mistake { border-color: color-mix(in oklch, var(--signal) 36%, transparent); background: color-mix(in oklch, var(--signal) 6%, var(--surface)); } .callout.is-mistake .co-ico, .callout.is-mistake .co-label { color: var(--signal); } /* define — Plain English card */ .callout.is-define { border-left: 3px solid var(--accent); } .callout.is-define .co-term { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -0.006em; color: var(--ink); margin: 2px 20px 0; } /* hear it */ .callout.is-hear .co-ico, .callout.is-hear .co-label { color: var(--accent-ink); } .callout .hear-player { margin: 12px 20px 4px; } .callout .hear-player audio { width: 100%; } .media-placeholder { margin: 4px 20px 0; border: 1px dashed var(--accent-line); border-radius: var(--r-sm); background: var(--accent-wash); padding: 16px 18px; display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; } .media-placeholder .ph-tag { font-family: var(--font-eyebrow); font-weight: 700; text-transform: uppercase; font-size: 10px; letter-spacing: 0.14em; color: var(--accent-ink); white-space: nowrap; } /* video slot */ .video-slot { margin: 1.8em 0; } .video-slot .frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; background: var(--ink); border: 1px solid var(--line); } .video-slot .frame iframe, .video-slot .frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .video-slot .frame.is-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: repeating-linear-gradient(45deg, color-mix(in oklch, var(--ink) 94%, transparent) 0 10px, color-mix(in oklch, var(--ink) 88%, transparent) 10px 20px); color: color-mix(in oklch, var(--paper) 70%, transparent); } .video-slot .frame.is-empty .play { width: 54px; height: 54px; border-radius: 50%; border: 1.5px solid color-mix(in oklch, var(--paper) 50%, transparent); display: grid; place-items: center; } .video-slot .frame.is-empty .play::after { content: ""; width: 0; height: 0; border-left: 13px solid color-mix(in oklch, var(--paper) 70%, transparent); border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 3px; } .video-slot .frame.is-empty .lbl { font-family: var(--font-eyebrow); font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: 0.16em; } .video-slot .cap { margin-top: 10px; font-size: 14px; color: var(--muted); } /* go deeper — collapsible */ details.deeper { margin: 2em 0; border: 1px solid var(--accent-line); border-radius: var(--r-md); background: var(--accent-wash); overflow: hidden; } details.deeper > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 18px 22px; font-family: var(--font-eyebrow); font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: 0.16em; color: var(--accent-ink); user-select: none; } details.deeper > summary::-webkit-details-marker { display: none; } details.deeper > summary .chev { width: 16px; height: 16px; margin-left: auto; transition: transform .35s var(--ease); } details.deeper[open] > summary .chev { transform: rotate(180deg); } details.deeper > summary .tag { font-family: var(--font-eyebrow); font-weight: 500; font-size: 10px; letter-spacing: 0.14em; color: var(--muted); border: 1px solid var(--accent-line); border-radius: 999px; padding: 3px 9px; } details.deeper .deeper-body { padding: 4px 22px 24px; border-top: 1px solid var(--accent-line); } details.deeper .deeper-body > *:first-child { margin-top: 1em; } details.deeper .deeper-body p { font-size: 16.5px; } /* diagram placeholder */ .diagram { margin: 1.8em 0; border: 1px dashed var(--accent-line); border-radius: var(--r-md); background: linear-gradient(0deg, var(--accent-wash), var(--accent-wash)); padding: 26px 24px; display: flex; gap: 16px; align-items: flex-start; } .diagram .dg-ico { width: 22px; height: 22px; flex: 0 0 auto; color: var(--accent-ink); } .diagram .dg-tag { font-family: var(--font-eyebrow); font-weight: 700; text-transform: uppercase; font-size: 10px; letter-spacing: 0.16em; color: var(--accent-ink); display: block; margin-bottom: 5px; } .diagram .dg-desc { font-size: 15px; line-height: 1.5; color: var(--muted); } /* ---------- PREV / NEXT ---------- */ .prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: clamp(40px, 6vw, 64px); padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--line); } .prevnext a { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); } .prevnext a:hover { border-color: var(--accent-line); transform: translateY(-2px); box-shadow: var(--soft-shadow); } .prevnext a.next { text-align: right; align-items: flex-end; } .prevnext .dir { font-family: var(--font-eyebrow); font-weight: 700; text-transform: uppercase; font-size: 10px; letter-spacing: 0.16em; color: var(--accent-ink); } .prevnext .ttl { font-family: var(--font-eyebrow); font-weight: 500; font-size: 17px; line-height: 1.25; color: var(--ink); } .prevnext .spacer { border: 1px dashed var(--line-soft); background: transparent; } .prevnext .spacer:hover { transform: none; box-shadow: none; border-color: var(--line-soft); } /* ============================================================ COURSE INDEX + LEVEL HUB ============================================================ */ .hub-hero { padding: clamp(56px, 9vw, 128px) 0 clamp(36px, 5vw, 56px); } .hub-hero .eyebrow { display: block; margin-bottom: 22px; } .hub-hero h1 { font-family: var(--font-roc); font-weight: 600; letter-spacing: -0.002em; word-spacing: 0.012em; line-height: 1.0; font-size: clamp(44px, 8.4vw, 104px); max-width: 14ch; color: var(--ink); } .hub-hero .lede { margin-top: clamp(24px, 3.5vw, 34px); max-width: 56ch; font-size: clamp(18px, 1.9vw, 23px); line-height: 1.5; color: color-mix(in oklch, var(--ink) 80%, var(--paper)); } /* the layered-depth explainer */ .depth { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(40px, 6vw, 72px) 0; } .depth .depth-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); } .depth .depth-grid > .eyebrow { padding-top: 6px; } .depth-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .depth-card { border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--surface); padding: 24px 22px; box-shadow: var(--soft-shadow); } .depth-card .n { font-family: var(--font-display); font-weight: 600; font-size: 30px; color: var(--accent-ink); line-height: 1; } .depth-card h2 { font-family: var(--font-eyebrow); font-weight: 500; font-size: 18px; margin: 14px 0 8px; color: var(--ink); } .depth-card p { font-size: 15px; line-height: 1.55; color: var(--muted); margin: 0; } /* curriculum list */ .curric { padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 8vw, 104px); } .curric .sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 44px); } .curric .sec-head h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.005em; font-size: clamp(26px, 3.4vw, 40px); color: var(--ink); } .curric .sec-head .count { font-family: var(--font-eyebrow); font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: 0.16em; color: var(--muted); } .levels { display: flex; flex-direction: column; gap: 14px; } .level-row { --accent: var(--row-accent, var(--signal)); display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: clamp(18px, 3vw, 36px); align-items: center; padding: clamp(22px, 3vw, 30px) clamp(22px, 3vw, 32px); border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--soft-shadow); transition: border-color .3s var(--ease), transform .3s var(--ease); } .level-row:hover { border-color: var(--accent-line); transform: translateY(-2px); } .level-row .lv-num { font-family: var(--font-display); font-weight: 600; font-size: clamp(40px, 6vw, 64px); line-height: 0.9; letter-spacing: -0.005em; color: var(--accent-ink); } .level-row .lv-main { min-width: 0; } .level-row .lv-title { font-family: var(--font-eyebrow); font-weight: 500; font-size: clamp(19px, 2.4vw, 26px); letter-spacing: -0.01em; color: var(--ink); line-height: 1.15; } .level-row .lv-sub { margin-top: 6px; font-size: 15.5px; color: var(--muted); line-height: 1.45; } .level-row .lv-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; white-space: nowrap; } .level-row .lv-count { font-family: var(--font-eyebrow); font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: 0.14em; color: var(--muted); } .level-row .lv-go { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--accent-line); display: grid; place-items: center; color: var(--accent-ink); transition: background-color .25s var(--ease), color .25s var(--ease), transform .35s var(--ease-soft); } .level-row:hover .lv-go { background: var(--accent); color: var(--surface); transform: translate(2px, -2px); } .level-row .lv-go svg { width: 15px; height: 15px; } /* level hub lesson list */ .lesson-list { display: flex; flex-direction: column; } .lesson-list a { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: clamp(14px, 2vw, 26px); align-items: center; padding: clamp(18px, 2.4vw, 24px) 8px; border-bottom: 1px solid var(--line-soft); transition: padding-left .3s var(--ease), color .2s var(--ease); } .lesson-list a:first-child { border-top: 1px solid var(--line-soft); } .lesson-list a:hover { padding-left: 18px; } .lesson-list .ll-num { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--accent-ink); font-variant-numeric: tabular-nums; } .lesson-list .ll-title { font-family: var(--font-eyebrow); font-weight: 500; font-size: clamp(17px, 2vw, 21px); letter-spacing: -0.005em; color: var(--ink); line-height: 1.2; } .lesson-list .ll-status { font-family: var(--font-eyebrow); font-weight: 700; text-transform: uppercase; font-size: 10px; letter-spacing: 0.14em; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; } .lesson-list .ll-status.done { color: var(--accent-ink); border-color: var(--accent-line); background: var(--accent-wash); } .lesson-list .ll-status.draft { color: var(--ink); border-color: var(--line); } .back-link { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 26px; font-family: var(--font-eyebrow); font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: 0.14em; color: var(--muted); transition: color .2s var(--ease); } .back-link:hover { color: var(--accent-ink); } /* ---------- FOOTER ---------- */ .site-foot { border-top: 1px solid var(--line); background: var(--surface); } .site-foot .foot-inner { max-width: 1180px; margin: 0 auto; padding: clamp(36px, 5vw, 56px) var(--pad-x); display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: flex-start; } .site-foot .foot-brand { font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--ink); } .site-foot .foot-note { margin-top: 8px; font-size: 14px; color: var(--muted); max-width: 40ch; line-height: 1.5; } .site-foot .foot-fam { display: flex; gap: 22px; flex-wrap: wrap; } .site-foot .foot-fam a { font-family: var(--font-eyebrow); font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: 0.14em; color: var(--muted); transition: color .2s var(--ease); } .site-foot .foot-fam a:hover { color: var(--accent-ink); } .site-foot .mono { width: 100%; padding-top: 22px; margin-top: 8px; border-top: 1px solid var(--line-soft); font-size: 12px; color: var(--muted); letter-spacing: 0.01em; } /* ---------- REVEAL (gated by reduced-motion) ---------- */ .reveal { opacity: 0; transform: translateY(18px); } .reveal.in { opacity: 1; transform: none; transition: opacity .8s var(--ease-soft), transform .8s var(--ease-soft); } /* ---------- RESPONSIVE ---------- */ @media (max-width: 880px) { .lesson-body { grid-template-columns: 1fr; gap: 0; } .rail { position: static; margin-bottom: 36px; padding: 20px 18px; border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--surface); } .depth .depth-grid { grid-template-columns: 1fr; gap: 22px; } .depth-cards { grid-template-columns: 1fr; } } @media (max-width: 620px) { body { font-size: 17px; } .prevnext { grid-template-columns: 1fr; } .prevnext a.next { text-align: left; align-items: flex-start; } .level-row { grid-template-columns: 64px minmax(0,1fr); } .level-row .lv-meta { display: none; } .lesson-list a { grid-template-columns: 40px 1fr; } .lesson-list .ll-status { display: none; } .callout .co-body, .callout .co-head { padding-left: 16px; padding-right: 16px; } } @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .read-progress { display: none; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }