/* Learn Claude — shared styles. Tokens mirror index.html; brand.md (v2 "Clear Water") is the tiebreaker. Day/night themes switch on html[data-theme]; display font A/B on html[data-type]. */ :root { --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --radius: 14px; } /* Serif is the shipped default, so :not([data-type]) belongs on this rule, not on sans. It only fires with JS off; theme.js sets data-type in otherwise. */ html[data-type="serif"], html:not([data-type]) { --font-display: "Fraunces", Georgia, serif; --font-body: "Instrument Sans", -apple-system, sans-serif; --h-track: -0.02em; } html[data-type="sans"] { --font-display: "Space Grotesk", -apple-system, sans-serif; --font-body: "Inter", -apple-system, sans-serif; --h-track: -0.03em; } html[data-theme="day"], html:not([data-theme]) { --paper: #F9F6EE; --paper-raised: #FFFDF8; --ink: #16283A; --ink-soft: #48586A; --navy: #14395C; /* strong text + emphasis */ --navy-deep: #0E2A46; --blue: #2E75B6; /* links, labels, accents */ --powder: #C4E2F6; /* big soft accents only, never text on day paper */ --blue-tint: #E9F3FB; --sun: #2E75B6; /* focus rings + accent borders (name kept from v1) */ --sun-text: #2A6BA8; /* label color (name kept from v1). Darker than --blue on purpose: #2E75B6 measures 4.48:1 on day paper, under the 4.5:1 small-text bar; this measures 5.16:1. */ --line: rgba(20, 45, 70, 0.13); --shadow: 0 1px 2px rgba(20, 57, 92, 0.05), 0 10px 32px rgba(20, 57, 92, 0.09); --btn-bg: #14395C; --btn-text: #FFFDF8; --btn-hover: #0E2A46; --fill: #14395C; /* progress fills, done markers */ --try-bg: rgba(46, 117, 182, 0.07); } html[data-theme="night"] { --paper: #0A1626; --paper-raised: #13253C; --ink: #E9F0F8; --ink-soft: #A8BDD2; --navy: #C4E2F6; --navy-deep: #E9F0F8; --blue: #8FC1EC; --powder: #2C4A6E; --blue-tint: #101F33; --sun: #8FC1EC; --sun-text: #8FC1EC; --line: rgba(196, 226, 246, 0.16); --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 36px rgba(0, 0, 0, 0.4); --btn-bg: #F6EFDF; --btn-text: #14395C; --btn-hover: #FFFDF8; --fill: #2E75B6; --try-bg: rgba(143, 193, 236, 0.08); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background: var(--paper); color: var(--ink); line-height: 1.7; font-size: 17px; -webkit-font-smoothing: antialiased; transition: background 0.5s ease, color 0.5s ease; } ::selection { background: var(--blue); color: var(--paper); } .wrap { max-width: 1060px; margin: 0 auto; padding: 0 24px; } /* ---------- header (same as homepage, plus Learn link) ---------- */ header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); transition: background 0.5s ease; } .nav { display: flex; align-items: center; justify-content: space-between; padding-block: 16px; } .brand { font-family: var(--font-display); font-weight: 600; font-size: 1.18rem; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; } .brand span { color: var(--blue); } .nav .links { display: flex; align-items: center; gap: 22px; } .nav a.navlink { font-weight: 600; font-size: 0.95rem; color: var(--blue); text-decoration: none; border-bottom: 2px solid transparent; transition: border-color 0.18s ease; } .nav a.navlink:hover { border-color: var(--blue); } .nav a.navlink:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; } .nav a.cta { font-weight: 600; font-size: 0.92rem; color: var(--btn-text); background: var(--btn-bg); padding: 9px 20px; border-radius: 10px; text-decoration: none; transition: transform 0.18s cubic-bezier(.34,1.56,.64,1), background 0.18s ease; } .nav a.cta:hover { background: var(--btn-hover); transform: translateY(-1px); } .nav a.cta:active { transform: translateY(0); } .nav a.cta:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; } /* theme toggle (injected by /theme.js) */ #theme-toggle { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-raised); cursor: pointer; display: grid; place-items: center; transition: transform 0.18s ease; } #theme-toggle:hover { transform: translateY(-1px); } #theme-toggle:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; } #theme-toggle svg { display: block; grid-area: 1 / 1; } html[data-theme="day"] #theme-toggle .ico-moon { display: none; } html[data-theme="night"] #theme-toggle .ico-sun { display: none; } /* ---------- shared type ---------- */ /* .lesson .crumb repeats the class so the crumb's color and margin beat .lesson p (0,1,1), which otherwise wins on file order. */ .sec-label, .crumb, .lesson .crumb { font-family: var(--font-body); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sun-text); margin-bottom: 14px; } .crumb a { color: var(--sun-text); text-decoration: none; } .crumb a:hover { text-decoration: underline; } h1 { font-family: var(--font-display); font-size: clamp(2.1rem, 5vw, 3.1rem); font-weight: 500; line-height: 1.1; letter-spacing: var(--h-track); } html[data-type="serif"] h1 em, html:not([data-type]) h1 em { font-style: italic; color: var(--blue); } html[data-type="sans"] h1 em { font-style: normal; color: var(--blue); } p.lede { margin-top: 18px; max-width: 58ch; font-size: 1.12rem; color: var(--ink-soft); } /* .btn-primary was here and is deleted (2026-07-26). It had zero call sites in any of the 23 learn pages -- it was a copy of an older homepage pill (14x30 padding, 12px radius, springy hover) that the homepage itself has since replaced with the unified 44px/18px/10px .btn. Leaving a second, divergent definition of a shipped class name lying around is how the two stylesheets drift. .btn-ghost below is the one button style /learn actually uses, and here it is a text link with an underline, NOT a pill. That is now the only meaning of the class anywhere on the site: the homepage's ghost pill is gone. */ .btn-ghost { display: inline-block; font-weight: 600; font-size: 1.02rem; color: var(--blue); text-decoration: none; padding: 12px 8px; border-bottom: 2px solid transparent; transition: border-color 0.18s ease; } .btn-ghost:hover { border-color: var(--blue); } .btn-ghost:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; } /* ---------- hub ---------- */ .hub-hero { padding: 72px 0 20px; } .hub-hero h1 { max-width: 20ch; } .modules { padding: 36px 0 88px; display: grid; gap: 24px; } .module-card { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 32px; box-shadow: var(--shadow); } .module-card .mod-label { font-family: var(--font-body); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sun-text); } .module-card h2 { font-family: var(--font-display); font-size: 1.55rem; font-weight: 600; letter-spacing: -0.01em; margin-top: 8px; } .module-card .mod-desc { margin-top: 8px; color: var(--ink-soft); font-size: 1rem; max-width: 60ch; } .lesson-list { list-style: none; margin-top: 22px; display: grid; gap: 4px; } .lesson-list li a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; margin: 0 -12px; border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 500; font-size: 1rem; transition: background 0.15s ease; } .lesson-list li a:hover { background: var(--blue-tint); } .lesson-list li a:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; } .lesson-list .n { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); } .lesson-list li a.is-done .n { background: var(--fill); border-color: var(--fill); color: #FFFDF8; } .lesson-list .mins { margin-left: auto; font-size: 0.85rem; color: var(--ink-soft); } .mod-progress { margin-top: 20px; display: none; align-items: center; gap: 14px; } .mod-progress.show { display: flex; } .mod-progress .track { flex: 1; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; } .mod-progress .fill { height: 100%; border-radius: 999px; background: var(--fill); width: 0; transition: width 0.4s ease; } .mod-progress .count { font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; } /* ---------- lesson pages ---------- */ .lesson { max-width: 720px; margin: 0 auto; padding: 64px 0 88px; } .lesson > h2 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; margin: 48px 0 14px; } .lesson p { margin-bottom: 16px; } .lesson p, .lesson li { color: var(--ink); } .lesson .soft { color: var(--ink-soft); } .lesson ul, .lesson ol { padding-left: 24px; margin-bottom: 16px; } .lesson li { margin-bottom: 8px; } .lesson strong { font-weight: 600; } /* prompt block */ .prompt { margin: 28px 0; background: var(--blue-tint); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .prompt figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); font-family: var(--font-body); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sun-text); } .prompt pre { padding: 18px 20px; font-family: var(--font-mono); font-size: 0.92rem; line-height: 1.65; color: var(--ink); white-space: pre-wrap; overflow-wrap: break-word; } .copy { font-family: var(--font-body); font-weight: 600; font-size: 0.82rem; letter-spacing: 0; color: var(--btn-text); background: var(--btn-bg); border: none; border-radius: 10px; padding: 7px 18px; cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; } .copy:hover { background: var(--btn-hover); transform: translateY(-1px); } .copy:active { transform: translateY(0); } .copy:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; } /* callouts */ .callout { margin: 28px 0; padding: 22px 24px; border-radius: 0 var(--radius) var(--radius) 0; border-left: 3px solid var(--line); background: var(--paper-raised); } .callout h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; letter-spacing: -0.01em; margin-bottom: 10px; } .callout p, .callout li { font-size: 0.99rem; } .callout p:last-child, .callout ul:last-child, .callout ol:last-child { margin-bottom: 0; } .callout.example { border-left-color: var(--powder); background: var(--paper); } .callout.example h3 { color: var(--blue); } .callout.try { border-left-color: var(--sun); background: var(--try-bg); } .callout.try h3 { color: var(--sun-text); } .callout.mistakes { border-left-color: var(--navy); background: var(--paper); } .callout.mistakes h3 { color: var(--navy); } .callout.tip { border-left-color: var(--blue); background: var(--blue-tint); } .callout.tip h3 { color: var(--navy); } /* done checkbox */ .done { display: flex; align-items: center; gap: 12px; margin: 44px 0 0; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius); font-weight: 600; font-size: 1rem; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .done:hover { border-color: var(--blue); } .done input { width: 22px; height: 22px; accent-color: var(--fill); cursor: pointer; } .done.is-done { background: var(--blue-tint); border-color: var(--blue); } /* soft CTA */ .cta-soft { margin: 44px 0 0; padding: 28px 30px; background: var(--blue-tint); border-radius: var(--radius); } .cta-soft h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.01em; margin-bottom: 8px; } .cta-soft p { color: var(--ink-soft); font-size: 0.99rem; margin-bottom: 4px; } /* pager */ .pager { margin-top: 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .pager a { display: block; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; min-height: 48px; transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .pager a:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: var(--shadow); } .pager a:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; } /* 0.52rem stays: same small-meta override the homepage uses for .chap .meta .pixel-label */ .pager .dir { display: block; font-family: var(--font-body); font-size: 0.52rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px; } .pager .t { font-weight: 600; color: var(--blue); font-size: 0.98rem; } .pager .next-card { text-align: right; } .pager .spacer { border: none; pointer-events: none; } /* module list details */ .module-list { margin-top: 28px; border-top: 1px solid var(--line); padding-top: 18px; } .module-list summary { cursor: pointer; font-weight: 600; font-size: 0.95rem; color: var(--blue); list-style-position: inside; } .module-list summary:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; } .module-list ol { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px; } .module-list ol a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; margin: 0 -10px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 0.95rem; } .module-list ol a:hover { background: var(--blue-tint); } .module-list ol a[aria-current="page"] { font-weight: 600; color: var(--navy); } .module-list .check { flex: none; width: 18px; color: var(--blue); font-weight: 700; font-size: 0.85rem; } footer { border-top: 1px solid var(--line); padding: 34px 0; } footer .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; } footer p { font-size: 0.88rem; color: var(--ink-soft); } footer a { color: var(--ink-soft); text-decoration: none; } footer .top-link { color: var(--blue); font-weight: 600; } /* localhost-only preview panel (injected by /theme.js, never in production) */ .proto-panel { position: fixed; bottom: 16px; left: 16px; z-index: 99; background: rgba(12, 24, 40, 0.92); color: #E9F0F8; border: 1px solid rgba(196,226,246,0.3); border-radius: 12px; padding: 12px 14px; font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.08em; display: grid; gap: 8px; } .proto-panel .row { display: flex; gap: 6px; align-items: center; } .proto-panel button { font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.08em; background: #1D3550; color: #C4E2F6; border: 1px solid rgba(196,226,246,0.3); padding: 5px 9px; border-radius: 7px; cursor: pointer; } .proto-panel button.on { background: #C4E2F6; color: #0E2A46; } @media (max-width: 640px) { .hub-hero { padding: 52px 0 8px; } .lesson { padding: 48px 0 72px; } .module-card { padding: 26px 22px; } .pager { grid-template-columns: 1fr; } .pager .next-card { text-align: left; } .lesson-list .mins { display: none; } } /* Narrow phones: the nav row cannot shrink enough and shoves the wordmark into the screen edge. Tighten the row instead of letting it clip. */ @media (max-width: 430px) { .nav { padding-block: 12px; } .nav .links { gap: 12px; } .nav a.cta { padding: 8px 14px; font-size: 0.86rem; } .nav a.navlink { font-size: 0.88rem; } #theme-toggle { width: 34px; height: 34px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .mod-progress .fill { transition: none; } body, header { transition: none; } }