/* ---------------------------------------------------------------- Design notes: the principles this stylesheet is built on. Ported from the PORTFOLIO site, adapted for an online textbook. ---------------------------------------------------------------- Rhythm comes from a small spacing scale, not arbitrary values. OKLCH tokens drive every color so light and dark stay in tune. Source order follows visual order for accessible reading. Accent color appears sparingly, reserved for genuine emphasis. Reduced-motion preferences are honored for every transition. Container width is capped to keep a calm reading measure. All interactive targets keep a comfortable hit area. Lining, tabular figures are used wherever numbers form a column. Subtle focus rings remain visible for keyboard navigation. Section labels stay deliberately quiet, lowercase, and small. ---------------------------------------------------------------- */ /* ---------------------------------------------------------------- Tokens ---------------------------------------------------------------- */ :root { --measure: 78ch; /* a calm reading measure for prose */ --pad-x: clamp(1.25rem, 4vw, 2rem); --pad-y: clamp(2.5rem, 7vw, 4.5rem); /* Paper-warm light surface; never pure white */ --bg: oklch(0.975 0.012 80); --fg: oklch(0.225 0.008 80); --fg-muted: oklch(0.500 0.012 80); --fg-faint: oklch(0.685 0.010 80); --rule: oklch(0.860 0.012 80); --surface: oklch(0.945 0.014 80); /* faint raised panel (callouts, cards) */ --accent: oklch(0.420 0.130 250); --accent-strong: oklch(0.320 0.150 250); color-scheme: light; --leading: 1.7; --leading-tight: 1.25; /* System serif stack: faithful to classic faculty pages. Iowan on macOS/iOS, Palatino on Windows, Georgia as floor. */ --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Hoefler Text", "Sitka Text", Cambria, ui-serif, Georgia, serif; /* Monospace for code samples and inline literals. */ --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", "Fira Code", Menlo, Consolas, monospace; } /* Dark theme is opt-in via the toggle (sets data-theme="dark" on ). Light is the default; we deliberately do NOT follow prefers-color-scheme. */ :root[data-theme="dark"] { --bg: oklch(0.180 0.008 80); --fg: oklch(0.920 0.006 80); --fg-muted: oklch(0.640 0.012 80); --fg-faint: oklch(0.475 0.010 80); --rule: oklch(0.310 0.012 80); --surface: oklch(0.225 0.010 80); --accent: oklch(0.780 0.120 250); --accent-strong: oklch(0.880 0.120 250); color-scheme: dark; --leading: 1.75; } /* ---------------------------------------------------------------- Base ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { font-family: var(--serif); font-size: 17px; line-height: var(--leading); font-feature-settings: "kern", "liga", "onum"; -webkit-text-size-adjust: 100%; } @media (max-width: 480px) { html { font-size: 16px; } } body { margin: 0; background: var(--bg); color: var(--fg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } main { max-width: var(--measure); margin: 0 auto; padding: var(--pad-y) var(--pad-x); position: relative; } /* ---------------------------------------------------------------- Masthead: course/book title + theme toggle ---------------------------------------------------------------- */ .masthead { margin-bottom: 2.5rem; } .eyebrow { margin: 0 0 0.35rem; font-size: 0.8rem; font-style: italic; text-transform: lowercase; letter-spacing: 0.01em; color: var(--fg-muted); } .identity-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .masthead h1 { margin: 0 0 0.2rem; font-size: clamp(1.8rem, 5vw, 2.4rem); font-weight: 700; letter-spacing: -0.014em; line-height: var(--leading-tight); } .name-link { color: inherit; text-decoration: none; } .name-link:hover { color: var(--accent); } .tagline { margin: 0.25rem 0 0; font-size: 1rem; color: var(--fg-muted); } /* ---------------------------------------------------------------- Theme toggle: subtle sun/moon morph in the masthead corner. ---------------------------------------------------------------- */ .head-tool { flex-shrink: 0; appearance: none; -webkit-appearance: none; background: none; border: 0; margin: 0; padding: 0.3rem; cursor: pointer; color: var(--fg-muted); text-decoration: none; border-radius: 50%; display: grid; place-items: center; width: 2rem; height: 2rem; transition: color 160ms ease; } .head-tool:hover { color: var(--fg); } .head-tool:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .theme-toggle svg { grid-area: 1 / 1; transition: opacity 350ms ease, transform 500ms cubic-bezier(0.22, 1, 0.36, 1); } .theme-toggle .icon-sun { opacity: 0; transform: rotate(-90deg) scale(0.5); } .theme-toggle .icon-moon { opacity: 1; transform: rotate(0) scale(1); } :root[data-theme="dark"] .theme-toggle .icon-sun { opacity: 1; transform: rotate(0) scale(1); } :root[data-theme="dark"] .theme-toggle .icon-moon { opacity: 0; transform: rotate(90deg) scale(0.5); } /* ---------------------------------------------------------------- Links ---------------------------------------------------------------- */ a { color: var(--accent); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: color 120ms ease, text-decoration-thickness 120ms ease; } a:hover { color: var(--accent-strong); text-decoration-thickness: 2px; } a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } ::selection { background: var(--accent); color: var(--bg); } /* ---------------------------------------------------------------- Section labels (quiet, lowercase, italic) + back link ---------------------------------------------------------------- */ section { margin-top: 0.5rem; } section > h2 { margin: 2.5rem 0 1.1rem; padding-top: 0.85rem; border-top: 1px solid var(--rule); font-size: 0.875rem; font-weight: 700; font-style: italic; text-transform: lowercase; letter-spacing: 0; color: var(--fg-muted); } /* Floated into the top padding so the back link never adds height above the masthead: the masthead stays put when navigating between pages. */ .backlink { position: absolute; top: calc(var(--pad-y) - 1.8rem); left: var(--pad-x); margin: 0; font-size: 0.9rem; line-height: 1.2; } /* ---------------------------------------------------------------- Reading progress bar (thin accent line pinned to the top edge) ---------------------------------------------------------------- */ .progress-track { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 10; background: transparent; pointer-events: none; } .progress-bar { height: 100%; width: 0; background: var(--accent); transform-origin: left center; transition: width 80ms linear; } /* ---------------------------------------------------------------- Table of contents (home page chapter list) ---------------------------------------------------------------- */ .toc { margin: 0; padding: 0; list-style: none; } .toc-part { margin: 2rem 0 0.75rem; font-size: 0.8rem; font-style: italic; text-transform: lowercase; letter-spacing: 0.02em; color: var(--fg-faint); } .toc-item { display: grid; grid-template-columns: 2.5rem 1fr; column-gap: 1rem; align-items: baseline; padding: 0.6rem 0; border-bottom: 1px solid var(--rule); } .toc-num { color: var(--fg-faint); font-size: 0.95rem; font-variant-numeric: lining-nums tabular-nums; } .toc-link { color: var(--fg); text-decoration: none; font-size: 1.1rem; } .toc-link:hover { color: var(--accent); text-decoration: underline; } .toc-summary { margin: 0.15rem 0 0; font-size: 0.92rem; color: var(--fg-muted); } /* ---------------------------------------------------------------- Prose: chapter body rendered from Markdown ---------------------------------------------------------------- */ .page-content { font-size: 1.0625rem; } .page-content > :first-child { margin-top: 0; } .page-content p { margin: 0 0 1rem; } .page-content h1, .page-content h2, .page-content h3 { margin: 1.9rem 0 0.6rem; font-weight: 700; font-style: normal; text-transform: none; letter-spacing: -0.01em; line-height: var(--leading-tight); color: var(--fg); } .page-content h1 { font-size: 1.5rem; } .page-content h2 { font-size: 1.25rem; } .page-content h3 { font-size: 1.08rem; } .page-content ul, .page-content ol { margin: 0 0 1rem; padding-left: 1.5rem; } .page-content li { margin-bottom: 0.35rem; } .page-content blockquote { margin: 0 0 1rem; padding-left: 1rem; border-left: 2px solid var(--rule); color: var(--fg-muted); } .page-content hr { border: 0; border-top: 1px solid var(--rule); margin: 2rem 0; } .page-content img { max-width: 100%; height: auto; border-radius: 3px; } /* Code */ .page-content code { font-family: var(--mono); font-size: 0.9em; background: var(--surface); padding: 0.12em 0.36em; border-radius: 4px; } .page-content pre { font-family: var(--mono); font-size: 0.88rem; line-height: 1.55; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 1rem 1.1rem; overflow-x: auto; margin: 0 0 1.25rem; } .page-content pre code { background: none; padding: 0; font-size: 1em; } /* Tables */ .page-content table { width: 100%; border-collapse: collapse; margin: 0 0 1.25rem; font-size: 0.98rem; font-variant-numeric: lining-nums tabular-nums; } .page-content th, .page-content td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--rule); } .page-content th { font-size: 0.82rem; font-weight: 700; color: var(--fg-muted); } /* ---------------------------------------------------------------- Callout / aside: a quiet panel for notes, tips, and "try this" ---------------------------------------------------------------- Usage in Markdown (raw HTML is allowed): Kinds: note (default), tip, try, warning. ---------------------------------------------------------------- */ .callout { margin: 1.25rem 0; padding: 0.9rem 1.1rem; background: var(--surface); border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: 8px; font-size: 0.98rem; } .callout > :first-child { margin-top: 0; } .callout > :last-child { margin-bottom: 0; } .callout-label { display: block; margin-bottom: 0.35rem; font-size: 0.72rem; font-style: italic; text-transform: lowercase; letter-spacing: 0.04em; color: var(--fg-muted); } .callout[data-kind="try"] { border-left-color: oklch(0.55 0.13 150); } .callout[data-kind="warning"] { border-left-color: oklch(0.62 0.16 40); } .callout[data-kind="tip"] { border-left-color: oklch(0.62 0.13 90); } /* ---------------------------------------------------------------- Chapter navigation (prev / next) at the foot of a page ---------------------------------------------------------------- */ .chapter-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); } .chapter-nav a { flex: 1 1 0; text-decoration: none; color: var(--fg); padding: 0.6rem 0.8rem; border: 1px solid var(--rule); border-radius: 8px; transition: border-color 160ms ease, color 160ms ease; } .chapter-nav a:hover { border-color: var(--accent); color: var(--accent); } .chapter-nav .nav-next { text-align: right; } .chapter-nav .nav-dir { display: block; font-size: 0.72rem; font-style: italic; text-transform: lowercase; color: var(--fg-faint); } .chapter-nav .nav-title { font-size: 1rem; } /* ---------------------------------------------------------------- Footer ---------------------------------------------------------------- */ .site-footer { margin-top: 2.75rem; text-align: right; font-size: 0.85rem; color: var(--fg-muted); } .site-footer a { color: var(--fg-muted); text-decoration: none; } .site-footer a:hover { color: var(--accent); text-decoration: underline; } /* ---------------------------------------------------------------- Reduced motion ---------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ---------------------------------------------------------------- Demo controls (sliders/toggles/buttons inside interactive demos) ---------------------------------------------------------------- */ .demo-controls { display: grid; gap: 0.5rem; margin: 0.75rem 0; } .demo-control { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; } .demo-control .ctl-label { color: var(--fg-muted); min-width: 7rem; } .demo-control input[type="range"] { flex: 1; accent-color: var(--accent); } .demo-control .ctl-out { font-variant-numeric: tabular-nums; min-width: 4.5rem; } .ctl-btn { font: inherit; cursor: pointer; color: var(--fg); background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; padding: 0.3rem 0.7rem; } .ctl-btn:hover { border-color: var(--accent); color: var(--accent); } /* Interactive SVG diagrams */ .demo-diagram { position: relative; } .demo-diagram .diagram-tip { position: absolute; transform: translate(-50%, calc(-100% - 6px)); background: var(--fg); color: var(--bg); font-size: 0.78rem; padding: 0.2rem 0.45rem; border-radius: 5px; pointer-events: none; white-space: nowrap; z-index: 5; } .demo-diagram [data-reveal-trigger].is-on { color: var(--accent); border-color: var(--accent); } /* ---------------------------------------------------------------- Robot-learning map (static/demos/robot-learning-map.js) A figure that wants more room than the reading measure, so it bleeds outward on wide screens and collapses back inside it on narrow ones. ---------------------------------------------------------------- */ .rlmap-host { --bleed: clamp(0rem, calc((100vw - 2 * var(--pad-x) - 100%) / 2), 7rem); margin: 1.75rem calc(-1 * var(--bleed)); } .rlmap { border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); padding: 0.85rem 0.95rem 0.7rem; } .rlmap-bar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 0.35rem; } .rlmap-hint { margin: 0; font-size: 0.84rem; color: var(--fg-muted); } .rlmap-tools { display: flex; flex-wrap: wrap; gap: 0.4rem; } .rlmap-tools .ctl-btn { font-size: 0.8rem; padding: 0.22rem 0.55rem; } .ctl-btn.is-on { border-color: var(--accent); color: var(--accent); } .rlmap-frame { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; align-items: stretch; } .rlmap-stage { position: relative; height: clamp(360px, 58vh, 520px); grid-column: 2; grid-row: 1; } .rlmap-stage canvas { display: block; width: 100%; height: 100%; touch-action: none; } .rlmap-axisbtn { font: inherit; background: none; border: 0; cursor: pointer; color: var(--fg); padding: 0.35rem 0.4rem; text-align: center; display: flex; align-items: baseline; justify-content: center; gap: 0.35rem; border-radius: 6px; } .rlmap-axisbtn:hover, .rlmap-axisbtn:focus-visible { color: var(--accent); } .rlmap-axisbtn-x { grid-column: 2; grid-row: 2; } .rlmap-axisbtn-y { grid-column: 1; grid-row: 1; writing-mode: vertical-rl; transform: rotate(180deg); } .rlmap-axisname { font-size: 0.95rem; } .rlmap-trail { font-size: 0.78rem; color: var(--fg-faint); } .rlmap-caret { font-size: 0.7rem; color: var(--fg-faint); } .rlmap-axisbtn:hover .rlmap-caret { color: var(--accent); } .rlmap-panel { border-top: 1px solid var(--rule); margin-top: 0.5rem; padding-top: 0.6rem; } .rlmap-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.45rem; } .rlmap-eyebrow { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: lowercase; color: var(--fg-faint); } .rlmap-panel-head strong { font-size: 0.98rem; } .rlmap-blurb { font-size: 0.82rem; color: var(--fg-muted); flex: 1 1 14rem; } .rlmap-close { font: inherit; background: none; border: 0; cursor: pointer; color: var(--fg-faint); line-height: 1; padding: 0 0.2rem; } .rlmap-close:hover { color: var(--accent); } .rlmap-split { display: grid; grid-template-columns: auto minmax(6rem, 1fr) auto; align-items: center; gap: 0.6rem; margin: 0.55rem 0 0.35rem; } .rlmap-split input[type="range"] { width: 100%; accent-color: var(--accent); } .rlmap-child { font: inherit; font-size: 0.85rem; background: none; cursor: pointer; color: var(--fg); border: 1px solid transparent; border-radius: 6px; padding: 0.15rem 0.4rem; } .rlmap-child:hover, .rlmap-child:focus-visible { color: var(--accent); border-color: var(--rule); } .rlmap-readout { margin: 0; font-size: 0.82rem; color: var(--fg-muted); font-variant-numeric: tabular-nums lining-nums; } .rlmap-note { margin: 0.35rem 0 0; font-size: 0.82rem; color: var(--fg-muted); } .rlmap-link { font: inherit; font-size: inherit; background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .rlmap-export-slot:not(:empty) { margin-top: 0.6rem; } .rlmap-export { width: 100%; min-height: 9rem; font: 0.78rem/1.5 var(--mono); color: var(--fg); background: var(--bg); border: 1px solid var(--rule); border-radius: 6px; padding: 0.5rem; } .rlmap-tip { position: absolute; z-index: 6; pointer-events: none; min-width: 12rem; max-width: 17rem; background: var(--bg); border: 1px solid var(--rule); border-radius: 8px; padding: 0.45rem 0.55rem; font-size: 0.78rem; line-height: 1.35; box-shadow: 0 6px 18px oklch(0 0 0 / 0.12); } .rlmap-tip strong { display: block; font-size: 0.84rem; } .rlmap-tip em { display: block; color: var(--fg-muted); margin-bottom: 0.3rem; } .rlmap-tiprow { display: grid; grid-template-columns: 6.6rem 1fr 2.1rem; align-items: center; gap: 0.35rem; color: var(--fg-muted); } .rlmap-bar-track { height: 4px; background: var(--rule); border-radius: 2px; } .rlmap-bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 2px; } .rlmap-tipnum { text-align: right; font-variant-numeric: tabular-nums lining-nums; } .rlmap-legend { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; } .rlmap-legend-btn { font: inherit; font-size: 0.8rem; background: none; border: 0; padding: 0.15rem 0; cursor: pointer; color: var(--fg-muted); display: inline-flex; align-items: center; gap: 0.35rem; } .rlmap-legend-btn:hover, .rlmap-legend-btn.is-on { color: var(--accent); } .rlmap-swatch { width: 18px; height: 18px; } .rlmap-status { margin: 0.4rem 0 0; min-height: 1.2em; font-size: 0.8rem; color: var(--fg-muted); } @media (max-width: 40rem) { .rlmap-stage { height: clamp(260px, 46vh, 360px); } .rlmap-tiprow { grid-template-columns: 5.4rem 1fr 2rem; } }