/* Mobile Development course, design round 2 (prototype; candidate replacement for courses/mobile/mobile.css). Identity: paper for reading, night for the machine. Everything you read sits on paper (or on the night-blue page in dark mode); everything that depicts the machine (the hero art, the figures of layers and phones, code, prompts, the real captures) sits on night glass, like the TMIMI Explains films. One colour, one meaning, everywhere, as in the course's films: the system (the OS) sky, a browser engine violet, a framework (React Native, Flutter) rose, your code amber, the layer that draws mint. Motion: transform and opacity only, slow, and none at all under prefers-reduced-motion. */ /* ---------- Fallback faces sized like the web fonts (measured 2026-10-14 on the course's titles), so the swap to Playfair Display, Inter and JetBrains Mono (display=swap) does not reflow the hero (the mono eyebrow wrapped to a second line on phones). Ascent and descent are the web fonts' own (Playfair 1.082 / 0.251, Inter 0.969 / 0.242, JetBrains Mono 1.02 / 0.3), divided by size-adjust. Courier New has JetBrains Mono's advance, 0.6 em. ---------- */ @font-face { font-family: "Playfair Fallback"; font-style: normal; font-weight: 500 700; src: local("Georgia Bold"), local("Georgia-Bold"); size-adjust: 88.4%; ascent-override: 122.4%; descent-override: 28.4%; line-gap-override: 0%; } @font-face { font-family: "Playfair Fallback"; font-style: italic; font-weight: 500 700; src: local("Georgia Italic"), local("Georgia-Italic"); size-adjust: 96.6%; ascent-override: 112%; descent-override: 26%; line-gap-override: 0%; } @font-face { font-family: "Inter Fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 106.3%; ascent-override: 91.2%; descent-override: 22.8%; line-gap-override: 0%; } @font-face { font-family: "Mono Fallback"; src: local("Courier New"), local("CourierNewPSMT"); size-adjust: 100%; ascent-override: 102%; descent-override: 30%; line-gap-override: 0%; } /* ---------- Tokens ---------- */ :root { color-scheme: light; --bg: #fbfaf7; --bg-glass: rgba(251, 250, 247, .8); --surface: #ffffff; --surface-2: #f4f2ed; --surface-glass: rgba(255, 255, 255, .7); --ink: #16161f; --ink-2: #474756; --ink-3: #5c5c6a; --rule: #e4e1d9; --rule-strong: #cfcbc1; --control: #8f8a7f; /* a border that identifies a control: 3:1 on the page */ --accent: #4f46e5; --accent-hover: #3730a3; --accent-soft: rgba(79, 70, 229, .08); --on-accent: #fff; --ok: #17784f; --no: #b3261e; --wire: linear-gradient(90deg, #ff3d8b 0%, #7a5cff 55%, #2f7dff 100%); --wire-v: linear-gradient(180deg, #ff3d8b 0%, #7a5cff 55%, #2f7dff 100%); --wire-deep: linear-gradient(135deg, #d6246e 0%, #6a4cf0 55%, #1f66e0 100%); /* white text on it: 4.6:1 at worst */ --text-grad: linear-gradient(95deg, #d6246e 0%, #6a4cf0 52%, #1f66e0 100%); /* text: every stop 4.5:1 on paper */ --mark: linear-gradient(90deg, rgba(255, 61, 139, .22), rgba(122, 92, 255, .22) 55%, rgba(47, 125, 255, .22)); --glow-1: rgba(255, 61, 139, .13); --glow-2: rgba(122, 92, 255, .12); --glow-3: rgba(47, 125, 255, .11); --dot: rgba(22, 22, 31, .075); --shadow-sm: 0 1px 2px rgba(22, 22, 31, .04), 0 6px 18px -12px rgba(22, 22, 31, .14); --shadow: 0 1px 2px rgba(22, 22, 31, .05), 0 18px 40px -24px rgba(22, 22, 31, .28); --shadow-lift: 0 2px 6px rgba(22, 22, 31, .05), 0 28px 56px -28px rgba(74, 52, 190, .4); /* One colour, one meaning, the films' (paper values: each 4.5:1 or better on paper and on its soft tint). The OS sky, a browser engine purple, a framework rose, your code amber, the layer that draws mint. --web is NOT the interactive indigo (--accent): links, focus and kickers never read as "browser engine". */ --os: #0369a1; --web: #7e22ce; --you: #9a5b00; --fw: #be185d; --screen: #17784f; --you-soft: color-mix(in srgb, var(--you) 9%, var(--surface)); --fw-soft: color-mix(in srgb, var(--fw) 9%, var(--surface)); --os-soft: color-mix(in srgb, var(--os) 9%, var(--surface)); --web-soft: color-mix(in srgb, var(--web) 9%, var(--surface)); --screen-soft: color-mix(in srgb, var(--screen) 9%, var(--surface)); /* Night: the machine's world, identical in both themes. */ --night: #0c0f1a; --night-2: #131727; --night-ink: #ecebf3; --night-ink-2: #c3c3d1; --night-ink-3: #a3a4b8; --night-rule: rgba(255, 255, 255, .09); --code-bg: #0e111b; --code-rule: #262b3d; --code-ink: #e6e8f0; --code-dim: #8d93a8; --code-focus: #a8a3ff; --font-body: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-display: 'Playfair Display', 'Playfair Fallback', Georgia, 'Times New Roman', serif; --font-mono: 'JetBrains Mono', 'Mono Fallback', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --fs-body: 1.02rem; --r-sm: 10px; --r: 16px; --r-lg: 22px; --r-xl: 28px; --gutter: 20px; --head-h: 62px; --ease-out: cubic-bezier(.2, .7, .2, 1); } :root[data-theme="dark"] { color-scheme: dark; --bg: #0c0e17; --bg-glass: rgba(12, 14, 23, .76); --surface: #131623; --surface-2: #1a1e2e; --surface-glass: rgba(26, 30, 46, .55); --ink: #ecebf3; --ink-2: #b9bacb; --ink-3: #a0a2b6; --rule: #232738; --rule-strong: #343a50; --control: #6b6f86; --accent: #a8a3ff; --accent-hover: #c9c6ff; --accent-soft: rgba(168, 163, 255, .12); --on-accent: #12131a; --ok: #5fd3a0; --no: #ff8a80; --text-grad: linear-gradient(95deg, #ff6aa9 0%, #a08bff 52%, #6ea8ff 100%); --mark: linear-gradient(90deg, rgba(255, 106, 169, .3), rgba(160, 139, 255, .3) 55%, rgba(110, 168, 255, .3)); --glow-1: rgba(255, 61, 139, .15); --glow-2: rgba(122, 92, 255, .2); --glow-3: rgba(47, 125, 255, .2); --dot: rgba(255, 255, 255, .05); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 22px -14px rgba(0, 0, 0, .6); --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 22px 44px -24px rgba(0, 0, 0, .75); --shadow-lift: 0 2px 6px rgba(0, 0, 0, .35), 0 30px 64px -28px rgba(122, 92, 255, .42); --os: #7dd3fc; --web: #c084fc; --you: #fbbf24; --fw: #ff6aa9; --screen: #5fd3a0; --code-bg: #0a0c14; --code-rule: #262a3a; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --bg: #0c0e17; --bg-glass: rgba(12, 14, 23, .76); --surface: #131623; --surface-2: #1a1e2e; --surface-glass: rgba(26, 30, 46, .55); --ink: #ecebf3; --ink-2: #b9bacb; --ink-3: #a0a2b6; --rule: #232738; --rule-strong: #343a50; --control: #6b6f86; --accent: #a8a3ff; --accent-hover: #c9c6ff; --accent-soft: rgba(168, 163, 255, .12); --on-accent: #12131a; --ok: #5fd3a0; --no: #ff8a80; --text-grad: linear-gradient(95deg, #ff6aa9 0%, #a08bff 52%, #6ea8ff 100%); --mark: linear-gradient(90deg, rgba(255, 106, 169, .3), rgba(160, 139, 255, .3) 55%, rgba(110, 168, 255, .3)); --glow-1: rgba(255, 61, 139, .15); --glow-2: rgba(122, 92, 255, .2); --glow-3: rgba(47, 125, 255, .2); --dot: rgba(255, 255, 255, .05); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 22px -14px rgba(0, 0, 0, .6); --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 22px 44px -24px rgba(0, 0, 0, .75); --shadow-lift: 0 2px 6px rgba(0, 0, 0, .35), 0 30px 64px -28px rgba(122, 92, 255, .42); --os: #7dd3fc; --web: #c084fc; --you: #fbbf24; --fw: #ff6aa9; --screen: #5fd3a0; --code-bg: #0a0c14; --code-rule: #262a3a; } } /* A night island: re-declares the tokens, so any component inside renders in the night palette in both themes. */ .night { color-scheme: dark; --bg: var(--night); --surface: #151a2b; --surface-2: #1b2034; --ink: var(--night-ink); --ink-2: var(--night-ink-2); --ink-3: var(--night-ink-3); --rule: rgba(255, 255, 255, .09); --rule-strong: rgba(255, 255, 255, .16); --accent: #a8a3ff; --accent-soft: rgba(168, 163, 255, .14); --os: #7dd3fc; --web: #c084fc; --you: #fbbf24; --fw: #ff6aa9; --screen: #5fd3a0; --os-soft: color-mix(in srgb, #7dd3fc 12%, #141828); --web-soft: color-mix(in srgb, #c084fc 14%, #141828); --you-soft: color-mix(in srgb, #fbbf24 11%, #141828); --fw-soft: color-mix(in srgb, #ff6aa9 12%, #141828); --screen-soft: color-mix(in srgb, #5fd3a0 12%, #141828); color: var(--ink); } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + 20px); background: var(--bg); } body { margin: 0; background: var(--bg); color: var(--ink); overflow-x: clip; font: 400 1rem/1.7 var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-wrap: break-word; font-variant-numeric: lining-nums; } img, svg { max-width: 100%; height: auto; display: block; } a { color: var(--accent); text-underline-offset: .2em; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 50%, transparent); } a:hover { color: var(--accent-hover); text-decoration-color: currentColor; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; } .night :focus-visible { outline-color: var(--code-focus); } ::selection { background: color-mix(in srgb, #7a5cff 28%, transparent); } code, kbd, pre { font-family: var(--font-mono); font-variant-ligatures: none; } :not(pre) > code { font-size: .86em; padding: .12em .4em; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--rule); white-space: nowrap; } @media (max-width: 480px) { :not(pre) > code { white-space: normal; overflow-wrap: anywhere; -webkit-box-decoration-break: clone; box-decoration-break: clone; } } kbd { font-size: .82em; padding: .1em .42em; border-radius: 6px; background: var(--surface); border: 1px solid var(--rule-strong); border-bottom-width: 2px; white-space: nowrap; } .skip-link { position: absolute; left: -9999px; top: 0; } .skip-link:focus { left: 12px; top: 12px; z-index: 100; background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: 10px; font-weight: 600; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); } .prose { max-width: 680px; margin-inline: auto; } .wide { max-width: 1040px; margin-inline: auto; } /* ---------- Header: glass, the brand wire fills as you read ---------- */ .site-head { position: sticky; top: 0; z-index: 20; background: var(--bg-glass); -webkit-backdrop-filter: saturate(1.5) blur(16px); backdrop-filter: saturate(1.5) blur(16px); border-bottom: 1px solid color-mix(in srgb, var(--rule) 80%, transparent); } .site-head__bar { display: flex; align-items: center; gap: 10px; min-height: var(--head-h); } .brand { display: inline-flex; align-items: center; gap: 11px; min-width: 0; color: var(--ink); text-decoration: none; margin-right: auto; } .brand:hover { color: var(--ink); } .brand img { width: 32px; height: 32px; flex: none; } .brand__text { display: grid; min-width: 0; line-height: 1.05; } .brand__by { font: 500 .62rem/1.2 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; } .brand__name { font-family: var(--font-display); font-weight: 600; font-size: 1.24rem; letter-spacing: -.01em; white-space: nowrap; } .site-nav { display: flex; align-items: center; gap: 2px; flex: none; } .site-nav a { color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: .92rem; padding: 8px 12px; border-radius: 999px; white-space: nowrap; transition: background-color .2s ease, color .2s ease; } .site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); } .head-btn { display: inline-grid; place-items: center; height: 38px; min-width: 38px; flex: none; padding: 0 11px; border-radius: 999px; border: 1px solid var(--control); background: var(--surface-glass); color: var(--ink); font: 600 .78rem/1 var(--font-mono); letter-spacing: .06em; cursor: pointer; transition: border-color .2s ease, background-color .2s ease; } .head-btn:hover { border-color: var(--ink-3); background: var(--surface); } .head-btn svg { width: 17px; height: 17px; } .head-btn--present { gap: 7px; grid-auto-flow: column; font-family: var(--font-body); font-size: .82rem; letter-spacing: .01em; padding: 0 14px; } /* Pause animations: the home page's switch, same key (localStorage 'motion' = 'on' | 'off'); the pause icon while the page moves, the play icon once paused (aria-pressed = paused). Under reduced motion nothing moves: no switch. */ .motion-toggle svg { width: 15px; height: 15px; } .motion-toggle .motion-toggle__play { display: none; } .motion-toggle[aria-pressed="true"] .motion-toggle__pause { display: none; } .motion-toggle[aria-pressed="true"] .motion-toggle__play { display: block; } @media (prefers-reduced-motion: reduce) { .motion-toggle { display: none; } } /* French first paint (the head guard sets html.i18n-wait before paint when the page will be French): the reading area stays hidden until mobile.js has put the French in (1.5 s at most), so a French visitor never sees the English page, nor the layout shift of the swap. Without JS the class is never set. */ .i18n-wait :is(.module-main, .site-nav, .site-foot, #presentBtn, #langToggle) { visibility: hidden; } .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .theme-toggle .icon-sun { display: block; } :root:not([data-theme]) .theme-toggle .icon-moon { display: none; } } .site-head__progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--wire); transform-origin: 0 50%; transform: scaleX(0); opacity: .9; pointer-events: none; } @supports (animation-timeline: scroll()) { .site-head__progress { animation: read-progress linear both; animation-timeline: scroll(root block); } @keyframes read-progress { to { transform: scaleX(1); } } } @media (max-width: 700px) { .site-nav a.hide-sm, .head-btn--present { display: none; } } @media (max-width: 480px) { .site-nav { flex: 0 999 auto; } .site-nav a { white-space: normal; text-align: center; line-height: 1.15; font-size: .88rem; padding: 6px 10px; } } @media (max-width: 400px) { .site-head__bar { gap: 6px; } .site-nav a { padding-inline: 8px; } .brand img { display: none; } } /* ---------- Hero ---------- */ /* The page opens in light: three soft glows and the site's dot grain, fading out before the reading starts. */ .module-main { position: relative; isolation: isolate; } .module-main::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: calc(-1 * var(--head-h)); height: min(1100px, 130vh); pointer-events: none; background: radial-gradient(40% 50% at 8% 8%, var(--glow-1), transparent 70%), radial-gradient(42% 55% at 92% 18%, var(--glow-3), transparent 70%), radial-gradient(50% 45% at 55% 62%, var(--glow-2), transparent 72%); } .module-main::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: calc(-1 * var(--head-h)); height: 760px; pointer-events: none; background-image: radial-gradient(var(--dot) 1px, transparent 1.4px); background-size: 28px 28px; -webkit-mask-image: linear-gradient(180deg, #000 10%, transparent 100%); mask-image: linear-gradient(180deg, #000 10%, transparent 100%); } .hero { padding: clamp(40px, 5vw, 76px) 0 clamp(28px, 3vw, 44px); } /* Text beside the stage. A hero without a stage (a capsule whose art is not drawn yet) stays one column. */ .hero:has(> .stage) { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); align-items: center; gap: clamp(28px, 4.5vw, 72px); } .hero__text { min-width: 0; } .eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 22px; font: 500 .74rem/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); } .eyebrow::before { content: ""; width: 34px; height: 2px; border-radius: 2px; background: var(--wire); flex: none; } .eyebrow a { color: var(--ink); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; } .eyebrow a:hover { color: var(--accent); } .eyebrow .sep { color: var(--rule-strong); } .hero h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.2rem, 1.2rem + 3.3vw, 3.7rem); line-height: 1.06; letter-spacing: -.018em; margin: 0 0 22px; max-width: 16ch; text-wrap: balance; } .hub-hero h1 { font-size: clamp(2.4rem, 1.25rem + 3.9vw, 4.25rem); max-width: 13ch; line-height: 1.02; } .hero h1 em { font-style: italic; font-weight: 500; padding-right: .06em; background: var(--text-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .lede { font-size: clamp(1.08rem, 1rem + .4vw, 1.27rem); line-height: 1.6; color: var(--ink-2); margin: 0 0 24px; max-width: 54ch; text-wrap: pretty; } /* The separators sit in the gap; at the start of a wrapped line they fall outside the box and are clipped. */ .byline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin: 0; font-size: .88rem; color: var(--ink-3); overflow: hidden; } .byline > span + span::before { content: "·"; display: inline-block; width: 22px; margin-left: -22px; text-align: center; color: var(--rule-strong); font-weight: 700; } .byline kbd { font-size: .78em; } @media (max-width: 700px) { .byline__key { display: none; } } /* The stage: a night panel where the hero art lives, lit like the films. */ .stage { --sa: 255 61 139; --sb: 47 125 255; --sc: 122 92 255; position: relative; isolation: isolate; overflow: hidden; margin: 0; min-width: 0; border-radius: var(--r-xl); color: var(--night-ink); background: radial-gradient(60% 55% at 6% 0%, rgb(var(--sa) / .26), transparent 70%), radial-gradient(65% 60% at 100% 100%, rgb(var(--sb) / .26), transparent 70%), radial-gradient(45% 45% at 62% 38%, rgb(var(--sc) / .16), transparent 70%), linear-gradient(180deg, #121527, #0a0c15); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .1), 0 44px 80px -44px rgba(14, 16, 40, .8), 0 22px 44px -30px rgba(79, 70, 229, .45); } .stage::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .085) 1px, transparent 1.3px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(70% 70% at 50% 45%, #000 30%, transparent 100%); mask-image: radial-gradient(70% 70% at 50% 45%, #000 30%, transparent 100%); } /* Grain: one small noise tile, static. */ .stage::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .07; border-radius: inherit; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } :root[data-theme="dark"] .stage { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1px 0 rgba(255, 255, 255, .1), 0 40px 90px -40px rgba(122, 92, 255, .4); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .stage { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1px 0 rgba(255, 255, 255, .1), 0 40px 90px -40px rgba(122, 92, 255, .4); } } .stage--hero { aspect-ratio: var(--ar, 640 / 470); } .stage--hero .art { position: absolute; inset: 4% 3%; width: 94%; height: 92%; } .stage--layers { --ar: 584 / 600; --sa: 255 61 139; --sb: 47 125 255; --sc: 95 211 160; } .stage--bounds { --sa: 95 211 160; --sb: 122 92 255; --sc: 255 61 139; } .stage--sandbox { --sa: 125 211 252; --sb: 95 211 160; --sc: 251 191 36; } /* the OS's boundary sky, your app amber */ .stage--door { --sa: 251 191 36; --sb: 95 211 160; --sc: 125 211 252; } /* your bundle amber, the system's door sky */ /* Art: text and strokes (the shapes are inline SVG, generated by tools/gen-art.js). Floor for every label (they are the art's claims): 11 px rendered at 1440, 10 px at 390. The sizes below are in the art's own units (a 640-wide viewBox drawn about 500 px wide on a desktop, 350 px on a phone). A chip or pill around a label is as wide as its text at the PHONE size + 24 (gen-art.js), so it never spills. */ .art { overflow: visible; } .art :is(rect, path, line, circle) { vector-effect: non-scaling-stroke; } .art-mono { font: 500 15px/1 var(--font-mono); letter-spacing: .02em; } .art-mono--sm { font-size: 14.5px; } .art-pill { font: 700 13.5px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; } .art-tag { font-family: var(--font-mono); font-weight: 600; } @media (max-width: 600px) { .art-mono, .art-mono--sm { font-size: 21px; } .art-pill { font-size: 20px; } } /* Index art: the sheet between your code and the OS changes; the thread rises from whichever layer draws. Static frame (reduced motion): the framework draws. */ .art--layers .ix-v { opacity: 0; } .art--layers .ix-v--fw { opacity: 1; } /* Capsule 01 art: the bounds are on in the static frame. */ .c1-switch__track { fill: #5fd3a0; } .c1-switch__knob { transform: translateX(14px); } .c1-side { opacity: .82; } .c1-label { fill: #c3c3d1; } @media (prefers-reduced-motion: no-preference) { .ix-lyr { animation: art-settle 1.1s var(--ease-out) both; animation-delay: calc(var(--i) * 110ms); } .ix-thread line, .ix-thread > g { animation: art-in .8s ease 1s both; } .art--layers .ix-v { animation: ix-cycle 13.5s linear infinite; } .art--layers .ix-v--fw { animation-delay: -.5s; } .art--layers .ix-v--web { animation-delay: -9.5s; } .art--layers .ix-v--none { animation-delay: -5s; } .c1-bounds { animation: c1-bounds 9s linear -3s infinite; } .c1-switch__knob { animation: c1-knob 9s var(--ease-out) -3s infinite; } .c1-switch__track { animation: c1-track 9s linear -3s infinite; } .art-flow { stroke-dasharray: 9 91; animation: art-flow 3.2s linear infinite; } .c2-killed { animation: c2-kill 10s ease-in-out infinite; } .c2-tag { animation: c2-tag 10s ease-in-out infinite; } .art-beat { animation: art-beat 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } } /* One ambient loop per art (design rule 5): the index cycles its sheets (ix-cycle), 01 its switch (c1-*), 02 the kill (c2-*, plus one art-flow: the fork to your app), 03 the flow through the door (art-flow). The pulses, the sheen, the seal's spin and the new icon's beat are stills. */ @keyframes art-settle { from { opacity: 0; transform: translateY(-22px); } } @keyframes art-in { from { opacity: 0; } } @keyframes ix-cycle { 0% { opacity: 0; } 3% { opacity: 1; } 31% { opacity: 1; } 34.5% { opacity: 0; } 100% { opacity: 0; } } @keyframes c1-bounds { 0%, 35% { opacity: 0; } 36.5% { opacity: 1; } 37.5% { opacity: .25; } 39%, 88% { opacity: 1; } 91%, 100% { opacity: 0; } } @keyframes c1-knob { 0%, 33% { transform: translateX(0); } 36%, 88% { transform: translateX(14px); } 91%, 100% { transform: translateX(0); } } @keyframes c1-track { 0%, 33% { fill: #2f3448; } 36%, 88% { fill: #5fd3a0; } 91%, 100% { fill: #2f3448; } } @keyframes art-flow { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } } @keyframes c2-kill { 0%, 40% { opacity: 1; } 46%, 78% { opacity: .2; } 86%, 100% { opacity: 1; } } @keyframes c2-tag { 0%, 36% { opacity: 0; } 42%, 74% { opacity: 1; } 80%, 100% { opacity: 0; } } @keyframes art-beat { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.12); opacity: .75; } } /* ---------- The wire: something goes in, something comes back (the series' mark) ---------- */ .wire { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 34px; margin: 6px 0 clamp(36px, 4vw, 60px); padding-inline: clamp(4%, (100% - 300px) / 2, 10%); overflow: hidden; } .wire::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--wire); border-radius: 2px; opacity: .85; } .wire::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 2px; margin-top: -1px; pointer-events: none; background: linear-gradient(90deg, transparent 44%, rgba(255, 255, 255, .95) 50%, transparent 56%); transform: translateX(-60%); opacity: 0; } .wire__pkt { position: relative; z-index: 1; font: 600 .72rem/1 var(--font-mono); letter-spacing: .02em; padding: 7px 10px; border-radius: 8px; background: var(--code-bg); color: var(--code-ink); border: 1px solid var(--code-rule); white-space: nowrap; box-shadow: 0 8px 20px -12px rgba(12, 14, 30, .6); } .wire__pkt::after { content: " →"; color: var(--code-dim); } .wire__pkt--back { margin-left: auto; } /* A packet's colour is a meaning, set per page (night values: a packet is a night chip in both themes). */ .wire__pkt--you { color: #fbbf24; } .wire__pkt--os { color: #7dd3fc; } .wire__pkt--screen { color: #5fd3a0; } .wire__pkt--fw { color: #ff6aa9; } .wire__pkt--web { color: #c084fc; } .wire__pkt--plain { color: var(--code-ink); } .wire__pkt--back::after { content: ""; } .wire__pkt--back::before { content: "← "; color: var(--code-dim); } @media (max-width: 480px) { .wire { padding-inline: 0; gap: 8px; } .wire__pkt { font-size: .64rem; padding: 6px 8px; } } @media (prefers-reduced-motion: no-preference) { .wire::after { animation: wire-run 7s cubic-bezier(.5, 0, .5, 1) 1.5s 3; } } @keyframes wire-run { 0% { transform: translateX(-60%); opacity: 0; } 8% { opacity: 1; } 60% { transform: translateX(60%); opacity: 1; } 66%, 100% { transform: translateX(60%); opacity: 0; } } /* ---------- Article, slides, section openers ---------- */ .article { padding: 0 0 24px; } .article :where(p) { margin: 0 0 1.05em; } :where(.article > .prose > p, .article li, .slide > p, .slide li) { font-size: var(--fs-body); } :where(.slide, .article) :where(ul, ol) { padding-left: 1.25em; margin: 0 0 1.1em; } :where(.slide, .article) :where(li) { margin: .4em 0; } .slide li::marker, .article li::marker { color: var(--ink-3); font-weight: 600; } :where(.slide > p) { text-wrap: pretty; } .slide { scroll-margin-top: calc(var(--head-h) + 16px); } .prose > .slide + .slide, .prose > .slide + .next-grid, .wide > .slide + .slide { margin-top: clamp(64px, 7vw, 104px); } .prose > #answer + .slide { margin-top: clamp(56px, 6vw, 88px); } .slide h2, .article h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.75rem, 1.25rem + 1.7vw, 2.45rem); line-height: 1.12; letter-spacing: -.012em; margin: 0 0 .6em; text-wrap: balance; } .slide h3, .article h3 { font-size: 1.1rem; line-height: 1.35; margin: 1.6em 0 .5em; } .slide h2 code, .hero h1 code { display: inline; line-height: inherit; font-size: .9em; background: none; border: 0; padding: 0; white-space: normal; } /* A numbered opener above every plain section title: 01, 02… and a short wire. No markup needed. */ .prose, .article > .wide { counter-reset: sec; } .prose > .slide:not(.card):not(.checkpoint):not(#answer):not(#recap) > h2, .article > .wide > .slide > h2, .course-group__head > h2 { counter-increment: sec; } .prose > .slide:not(.card):not(.checkpoint):not(#answer):not(#recap) > h2::before, .article > .wide > .slide > h2::before, .course-group__head > h2::before { content: counter(sec, decimal-leading-zero); display: block; margin: 0 0 16px; font: 500 .74rem/1 var(--font-mono); letter-spacing: .16em; color: var(--ink-3); padding-left: 0; background: var(--wire) no-repeat 3.2em 50% / 40px 2px; height: 1em; } .kw { font-weight: 600; color: var(--ink); } .c-you { color: var(--you); font-weight: 600; } .c-fw { color: var(--fw); font-weight: 600; } .c-os { color: var(--os); font-weight: 600; } .c-web { color: var(--web); font-weight: 600; } .c-screen { color: var(--screen); font-weight: 600; } /* Ordered lists in the reading column: mono numbers in the margin. */ .prose > .slide > ol:not([class]) { list-style: none; padding-left: 0; counter-reset: li; } .prose > .slide > ol:not([class]) > li { counter-increment: li; position: relative; padding-left: 2.6em; } .prose > .slide > ol:not([class]) > li::before { content: counter(li, decimal-leading-zero); position: absolute; left: 0; top: .2em; font: 600 .78rem/1.6 var(--font-mono); color: var(--accent); } /* ---------- The short answer ---------- */ #answer { margin-top: 4px; } .answer { position: relative; margin: 0 !important; padding: clamp(22px, 3vw, 30px) clamp(20px, 3vw, 32px); font-size: clamp(1.1rem, 1.02rem + .4vw, 1.26rem) !important; line-height: 1.62; color: var(--ink); text-wrap: pretty; border: 1px solid transparent; border-radius: var(--r-lg); background: radial-gradient(90% 120% at 0% 0%, var(--glow-2), transparent 60%) padding-box, linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(125deg, rgba(255, 61, 139, .6), rgba(122, 92, 255, .5) 50%, rgba(47, 125, 255, .6)) border-box; box-shadow: var(--shadow); } .answer strong { color: var(--ink); background: var(--mark) 0 88% / 100% .34em no-repeat; } .answer__kicker { display: flex; align-items: center; gap: 10px; font: 500 .72rem/1.3 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px; } .answer__kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--wire-deep); box-shadow: 0 0 0 4px var(--accent-soft); flex: none; } /* ---------- Notes ---------- */ .note { margin: 22px 0 24px; padding: 16px 18px 6px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--rule); } .note > :where(p, ul, ol) { font-size: 1rem; } .note__title { font-weight: 700; margin: 0 0 6px !important; font-size: 1rem; } .note--dashed { border-style: dashed; border-color: var(--rule-strong); background: transparent; } /* ---------- Figures ---------- */ .breakout { --bw: min(1040px, 100vw - 2 * var(--gutter)); width: var(--bw); margin-left: calc(50% - var(--bw) / 2); } @media (max-width: 760px) { .breakout { --bw: calc(100vw - 2 * var(--gutter)); } } /* Two widths outside the 680 reading column, no more: 1040 (.breakout: figures, tables) and 900 (.breakout--mid: a figure or a table that reads better narrower; the cards above). */ .breakout.breakout--mid { --bw: min(900px, 100vw - 2 * var(--gutter)); } @media (max-width: 760px) { .breakout.breakout--mid { --bw: calc(100vw - 2 * var(--gutter)); } } .fig { position: relative; margin-block: 28px 22px; } /* A night figure: the machine's world, a frame like the stage. */ .fig--night { padding: clamp(14px, 2vw, 22px); border-radius: var(--r-xl); isolation: isolate; overflow: hidden; background: radial-gradient(50% 40% at 0% 0%, rgba(122, 92, 255, .2), transparent 70%), radial-gradient(50% 50% at 100% 100%, rgba(95, 211, 160, .12), transparent 70%), linear-gradient(180deg, #11142a, #0b0d17); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 80px -46px rgba(14, 16, 40, .8); } .fig--night::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.3px); background-size: 22px 22px; } .fig__caption { font-size: .9rem !important; color: var(--ink-3); line-height: 1.5; margin: -4px 0 18px !important; } /* Stacks: who draws the pixels (capsule 01). One glass column per family, one glass plate per layer, a thread through the plates, the plate that draws lit in mint. */ .stacks { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; } .stack { display: flex; flex-direction: column; min-width: 0; border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .085), inset 0 1px 0 rgba(255, 255, 255, .08); } @supports (grid-template-rows: subgrid) { .stacks { grid-template-rows: auto auto auto; } .stack { display: grid; grid-template-rows: subgrid; grid-row: span 3; } .stacks .stack__foot { margin: 0; } /* (0,2,0): beats the flex fallback's margin-top: auto, so the feet's rules align */ } .stack__head { padding: 16px 16px 12px; } .stack__kicker { display: block; font: 500 .66rem/1.2 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; } .stack__name { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.32rem; line-height: 1.15; color: #fff; } .stack__ex { font-size: .8rem !important; color: var(--ink-3); margin: 6px 0 0 !important; line-height: 1.4; } .stack__layers { position: relative; list-style: none; margin: 0 !important; padding: 6px 12px 14px !important; display: grid; gap: 14px; align-content: start; } .stack__layers::before { content: ""; position: absolute; left: 50%; top: 10px; bottom: 18px; width: 1px; background: linear-gradient(180deg, var(--you), var(--fw) 50%, var(--os)); opacity: .55; } .layer { --c: var(--ink-3); position: relative; z-index: 1; margin: 0 !important; padding: 10px 12px 11px; border-radius: 12px; font-size: .86rem !important; line-height: 1.42; color: var(--ink-2); background: color-mix(in srgb, var(--c) 12%, #121628); border: 1px solid color-mix(in srgb, var(--c) 36%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 3px 0 -1px color-mix(in srgb, var(--c) 28%, #0a0c14), 0 12px 20px -14px rgba(0, 0, 0, .8); } .layer b { display: block; font: 600 .66rem/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--c); margin-bottom: 4px; } .layer--you { --c: var(--you); } .layer--fw { --c: var(--fw); } .layer--os { --c: var(--os); } .layer--web { --c: var(--web); } .layer--draws { background: radial-gradient(color-mix(in srgb, var(--screen) 30%, transparent) .9px, transparent 1.2px) 0 0 / 7px 7px, color-mix(in srgb, var(--c) 12%, #121628); border-color: var(--screen); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 3px 0 -1px color-mix(in srgb, var(--screen) 40%, #0a0c14), 0 0 26px -6px color-mix(in srgb, var(--screen) 60%, transparent); } .layer--draws::after { content: attr(data-draws); position: absolute; right: 8px; top: -10px; font: 700 .62rem/1.3 var(--font-body); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: #0b1a14; background: var(--screen); padding: 3px 8px; border-radius: 999px; box-shadow: 0 0 14px -2px color-mix(in srgb, var(--screen) 70%, transparent); } .stack__foot { margin: auto 0 0; padding: 12px 16px 16px; border-top: 1px dashed rgba(255, 255, 255, .12); font-size: .84rem !important; color: var(--ink-2); line-height: 1.45; } .stack__foot b { color: #fff; } .legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 16px 4px 2px !important; font-size: .8rem !important; color: var(--ink-3); } .legend span { display: inline-flex; align-items: center; gap: 7px; } .legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; } .legend .l-you { background: var(--you); } .legend .l-fw { background: var(--fw); } .legend .l-os { background: var(--os); } .legend .l-web { background: var(--web); } .legend .l-screen { background: var(--screen); box-shadow: 0 0 8px var(--screen); } @media (max-width: 1000px) and (min-width: 701px) { .stacks { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* On a phone, the four families are four phones you swipe through. */ @media (max-width: 700px) { .fig--night { padding: 14px 0 12px; } .stacks { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 14px; padding: 4px 14px 6px; scrollbar-width: none; } .stacks::-webkit-scrollbar { display: none; } .stack { scroll-snap-align: start; } .legend { margin-inline: 16px !important; } } /* Lifecycle chain (capsules 02 and 03): six glass plates, the active one lit. */ .lifecycle { list-style: none; margin: 18px 0 20px; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; } .lifecycle li { position: relative; margin: 0; padding: 12px 10px 12px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow-sm); font-size: .86rem; line-height: 1.35; } .lifecycle li b { display: block; font: 600 .84rem/1.3 var(--font-mono); color: var(--os); margin-bottom: 4px; overflow-wrap: anywhere; } .lifecycle li span { color: var(--ink-2); display: block; } .lifecycle li::after { content: "→"; position: absolute; right: -15px; top: 50%; width: 14px; margin-top: -.6em; text-align: center; font-size: .9rem; line-height: 1.2; color: var(--ink-3); } .lifecycle li:last-child::after { content: none; } .lifecycle li.is-front { border-color: var(--screen); box-shadow: 0 0 0 1px var(--screen), 0 0 24px -8px var(--screen); } .lifecycle li.is-front b { color: var(--screen); } .lifecycle li.is-dead { border-style: dashed; background: transparent; box-shadow: none; } .night .lifecycle { margin: 0; } .night .lifecycle li { background: linear-gradient(180deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .02)); border-color: rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 12px 20px -14px rgba(0, 0, 0, .8); } .night .lifecycle li.is-front { border-color: var(--screen); box-shadow: 0 0 0 1px var(--screen), 0 0 26px -6px color-mix(in srgb, var(--screen) 60%, transparent); } .night .lifecycle li.is-dead { background: transparent; border-style: dashed; border-color: rgba(255, 255, 255, .2); box-shadow: none; } @media (max-width: 860px) { .lifecycle { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lifecycle li:nth-child(3)::after { content: none; } } @media (max-width: 480px) { .lifecycle { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lifecycle li:nth-child(3)::after { content: "→"; } .lifecycle li:nth-child(even)::after { content: none; } } /* Real phone captures: each in a device bezel (the border is the bezel; the image's own corners follow it). */ .shots3 { display: grid; gap: clamp(12px, 2vw, 22px); grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 22px 0 8px; } .shots3 figure { margin: 0; } .shots3 img { width: 100%; height: auto; border-radius: 22px; border: 5px solid #0b0d15; background: #0b0d15; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 0 0 1.5px rgba(22, 22, 31, .18), var(--shadow-lift); } .shots3 figcaption { font-size: .84rem; color: var(--ink-3); margin-top: 12px; line-height: 1.45; } .shots3 figcaption b { color: var(--ink); font-weight: 600; } @media (max-width: 480px) { .shots3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .shots3 img { border-width: 4px; border-radius: 18px; } } /* ---------- Comparison table ---------- */ .table-wrap { overflow-x: auto; margin-top: 22px; margin-bottom: 24px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow-sm); -webkit-overflow-scrolling: touch; } .table-wrap .data-table { min-width: 640px; } .data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .92rem; line-height: 1.45; } .data-table th, .data-table td { padding: 13px 14px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; } .data-table td { color: var(--ink-2); } .data-table thead th { font: 600 1.02rem/1.2 var(--font-display); color: var(--ink); background: var(--surface-2); padding-block: 14px; border-bottom-color: var(--rule-strong); } .data-table tbody th { font-weight: 600; width: 11em; color: var(--ink); } .data-table tbody tr:last-child > * { border-bottom: 0; } .data-table tbody tr:hover > * { background: color-mix(in srgb, var(--accent) 3.5%, var(--surface)); } .data-table .muted { color: var(--ink-3); } @media (max-width: 760px) { .table-wrap { background: linear-gradient(90deg, var(--surface) 40%, transparent) 0 0 / 48px 100% no-repeat local, linear-gradient(270deg, var(--surface) 40%, transparent) 100% 0 / 48px 100% no-repeat local, linear-gradient(90deg, color-mix(in srgb, var(--ink) 16%, transparent), transparent) 0 0 / 16px 100% no-repeat scroll, linear-gradient(270deg, color-mix(in srgb, var(--ink) 16%, transparent), transparent) 100% 0 / 16px 100% no-repeat scroll, var(--surface); } .data-table tbody th, .data-table thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--rule); } .data-table thead th:first-child { background: var(--surface-2); } .data-table tbody th { width: 8.5em; min-width: 8.5em; } } /* ---------- Cards: with knowledge, check it yourself, quick check ---------- */ .card { position: relative; isolation: isolate; overflow: hidden; margin: 0; padding: clamp(22px, 3.4vw, 36px); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow); } .card__kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 10px !important; font: 600 .72rem/1.3 var(--font-mono) !important; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); } .card__kicker::before { content: ""; width: 26px; height: 26px; flex: none; border-radius: 8px; background: var(--accent-soft) var(--icon, none) center / 15px no-repeat; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent); } .card h2 { margin-top: 0 !important; font-size: clamp(1.45rem, 1.15rem + 1.1vw, 1.9rem) !important; } .card h3 { margin: 1.5em 0 .5em !important; font-size: 1.04rem !important; } .card > p:last-child, .card > ul:last-child, .card > ol:last-child { margin-bottom: 0; } .small-note { font-size: .88rem !important; color: var(--ink-3); margin-top: 12px !important; } .small-note code { white-space: normal; } /* With knowledge: the course's signature card. The wire on its top edge, a violet glow, two inset columns. */ .knowledge { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237a5cff'%3E%3Cpath d='M12 2l1.9 5.6L19.5 9.5l-5.6 1.9L12 17l-1.9-5.6L4.5 9.5l5.6-1.9z'/%3E%3Cpath d='M19 14l.9 2.6 2.6.9-2.6.9L19 21l-.9-2.6-2.6-.9 2.6-.9z' opacity='.7'/%3E%3C/svg%3E"); } .knowledge::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--wire); } .knowledge::after { content: ""; position: absolute; z-index: -1; right: -10%; top: -30%; width: 60%; height: 80%; background: radial-gradient(closest-side, var(--glow-2), transparent); pointer-events: none; } /* The second width (900): With knowledge, Try it (#check) and any .card--wide (03's Mac card). */ @media (min-width: 960px) { .prose > :is(.knowledge, #check, .card--wide) { --kw: min(900px, 100vw - 2 * var(--gutter)); width: var(--kw); margin-left: calc(50% - var(--kw) / 2); } } .knowledge h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.75rem) !important; } .kn-grid { display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 18px; } @media (min-width: 680px) { .kn-grid { grid-template-columns: 1fr 1fr; } } .kn-col { padding: 18px 18px 14px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--rule); } .kn-col h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px !important; font: 600 .7rem/1.3 var(--font-mono) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); } .kn-col ul, .kn-col ol { margin: 0; padding-left: 1.1em; } .kn-col ol { list-style: none; padding-left: 0; counter-reset: kn; } .kn-col ol > li { counter-increment: kn; position: relative; padding-left: 2.1em; } .kn-col ol > li::before { content: counter(kn); position: absolute; left: 0; top: .1em; width: 1.5em; height: 1.5em; border-radius: 50%; display: grid; place-items: center; font: 600 .72rem/1 var(--font-mono); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); } .kn-col li { margin: .55em 0; font-size: .96rem !important; } .kn-col li b { color: var(--ink); } .prompt { display: block; margin: .5em 0 .2em; padding: 10px 12px 11px 34px; position: relative; border-radius: 10px; background: var(--code-bg); color: var(--code-ink); border: 1px solid var(--code-rule); font: 500 .84rem/1.5 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); } .prompt::before { content: "❯"; content: "❯" / ""; position: absolute; left: 13px; top: 10px; color: #a8a3ff; font-weight: 700; } .small-note .prompt { margin-top: .6em; } /* Check it yourself: a lab card. Numbered steps on a thread; commands as night chips. */ #check { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a5cff' stroke-width='2' stroke-linecap='round'%3E%3Crect x='6' y='2.5' width='12' height='19' rx='3'/%3E%3Cpath d='M10.5 18.5h3'/%3E%3C/svg%3E"); } .steps { list-style: none; padding-left: 0 !important; counter-reset: st; margin: 18px 0 8px !important; } .steps > li { counter-increment: st; position: relative; padding-left: 46px; margin: 0 0 18px !important; } .steps > li::before { content: counter(st); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 600 .8rem/1 var(--font-mono); color: var(--accent); background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: 0 0 0 4px var(--surface); } .steps > li:not(:last-child)::after { content: ""; position: absolute; z-index: -1; left: 15px; top: 30px; bottom: -20px; width: 1px; background: linear-gradient(var(--rule-strong), color-mix(in srgb, var(--rule-strong) 30%, transparent)); } @media (max-width: 480px) { .steps > li { padding-left: 34px; } .steps > li::before { width: 26px; height: 26px; } .steps > li:not(:last-child)::after { left: 13px; top: 26px; } } code.cmd { display: block; width: fit-content; max-width: 100%; margin: .5em 0 .55em; padding: 9px 14px; border-radius: 10px; font: 600 .84rem/1.5 var(--font-mono); color: var(--code-ink); background: var(--code-bg); border: 1px solid var(--code-rule); white-space: pre-wrap; overflow-wrap: break-word; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 24px -16px rgba(12, 14, 30, .7); } code.cmd::before { content: "$ "; content: "$ " / ""; color: #5fd3a0; } /* Quick check: options are large keys, A, B, C; the answer lights green, a wrong choice red. */ #quiz { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a5cff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M9 9a3 3 0 1 1 4 2.8c-.7.3-1 .9-1 1.6V14'/%3E%3Ccircle cx='12' cy='18' r='.6' fill='%237a5cff'/%3E%3C/svg%3E"); } .quiz + .quiz { margin-top: 26px; padding-top: 24px; border-top: 1px dashed var(--rule-strong); } .quiz__q { font-weight: 600; font-size: 1.04rem !important; margin-bottom: 14px !important; } .quiz__opts { display: grid; gap: 9px; margin: 0 0 12px; counter-reset: opt; } .quiz__opt { counter-increment: opt; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 12px; text-align: left; font: 500 .96rem/1.42 var(--font-body); color: var(--ink); padding: 10px 14px 10px 10px; border-radius: 14px; cursor: pointer; background: var(--surface); border: 1.5px solid var(--control); box-shadow: var(--shadow-sm); transition: border-color .2s ease, transform .2s var(--ease-out), box-shadow .2s ease; } .quiz__opt::before { content: counter(opt, upper-alpha); width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font: 600 .78rem/1 var(--font-mono); color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--rule); } .quiz__opt:hover:not([disabled]) { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow); } .quiz__opt[disabled] { cursor: default; } .quiz__opt[data-result="right"] { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, var(--surface)); } .quiz__opt[data-result="right"]::before { background: var(--ok); color: var(--surface); border-color: transparent; } .quiz__opt[data-result="wrong"] { border-color: var(--no); background: color-mix(in srgb, var(--no) 8%, var(--surface)); } .quiz__opt[data-result="wrong"]::before { background: var(--no); color: var(--surface); border-color: transparent; } .quiz__opt[data-result]::after { font-weight: 700; font-size: 1.05rem; } .quiz__opt[data-result="right"]::after { content: "✓"; color: var(--ok); } .quiz__opt[data-result="wrong"]::after { content: "✗"; color: var(--no); } .quiz details summary { cursor: pointer; font-weight: 600; color: var(--accent); } .quiz details[open] summary { margin-bottom: 8px; } .quiz.js-ready details summary { display: none; } .quiz__why { font-size: .98rem !important; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border-left: 3px solid var(--accent); } /* Recap: a board of glass tiles, numbered in the brand gradient (white on its deep stops: 4.6:1 at worst). */ .recap { list-style: none; padding: 0 !important; margin: 18px 0 0 !important; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); counter-reset: r; } .recap li { position: relative; margin: 0 !important; padding: 16px 16px 16px 54px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow-sm); font-size: .96rem !important; line-height: 1.5; color: var(--ink-2); } .recap li::before { counter-increment: r; content: counter(r, decimal-leading-zero); position: absolute; left: 14px; top: 15px; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font: 600 .74rem/1 var(--font-mono); color: #fff; background: var(--wire-deep); } .recap li b { color: var(--ink); } .recap li:last-child:nth-child(odd) { grid-column: 1 / -1; } #recap h2 { display: flex; align-items: center; gap: 14px; } #recap h2::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--rule-strong), transparent); } /* ---------- Next, sources, footer ---------- */ .next-grid { display: grid; gap: 14px; grid-template-columns: 1fr; margin: 0 0 8px; } @media (min-width: 640px) { .next-grid { grid-template-columns: 1fr 1fr; } } .next-grid > div { position: relative; padding: 18px 20px; border-radius: var(--r-lg); border: 1px solid var(--rule); background: var(--surface); box-shadow: var(--shadow-sm); transition: box-shadow .3s ease, transform .3s var(--ease-out); } .next-grid > div:first-child { background: radial-gradient(80% 120% at 100% 0%, var(--glow-2), transparent 60%), var(--surface); } .next-grid > div:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); } .next-grid .label { display: block; font: 500 .68rem/1.3 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; } .next-grid p { margin: 0 !important; font-size: 1rem !important; } .next-grid > div:first-child a { font-family: var(--font-display); font-weight: 600; font-size: 1.22rem; line-height: 1.25; text-decoration: none; color: var(--ink); } .next-grid > div:first-child a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .next-grid > div:first-child a:hover { color: var(--accent); } .next-grid > div:first-child a { text-wrap: balance; } .next-grid > div:first-child:has(a:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; } .next-grid > div:first-child a:focus-visible { outline: none; } .sources { margin-top: clamp(56px, 6vw, 80px); padding-top: 26px; border-top: 1px solid var(--rule); font-size: .92rem; color: var(--ink-2); } .sources h2 { font: 500 .74rem/1.3 var(--font-mono) !important; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px !important; } .sources ul { list-style: none; padding: 0 !important; counter-reset: src; } .sources li { counter-increment: src; position: relative; padding-left: 2.4em; font-size: .9rem !important; margin: .7em 0 !important; line-height: 1.55; } .sources li::before { content: "[" counter(src) "]"; position: absolute; left: 0; font: 500 .78rem/1.9 var(--font-mono); color: var(--ink-3); } .back-link { display: inline-flex; align-items: center; gap: 8px; margin: 22px 0 8px; font-weight: 600; text-decoration: none; } .site-foot { position: relative; margin-top: clamp(56px, 6vw, 96px); padding: 30px 0 44px; font-size: .86rem; color: var(--ink-3); } .site-foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 61, 139, .55) 20%, rgba(122, 92, 255, .55) 50%, rgba(47, 125, 255, .55) 80%, transparent); } .site-foot__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; } .site-foot__brand { display: inline-flex; align-items: center; gap: 10px; } .site-foot__brand img { width: 24px; height: 24px; } .site-foot a { color: var(--ink-2); text-decoration: none; } .site-foot a:hover { color: var(--accent); text-decoration: underline; } /* ---------- Course index ---------- */ .hub-hero .lede { max-width: 50ch; } .facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; } .facts li { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: .84rem; font-weight: 500; color: var(--ink-2); padding: 7px 12px 7px 10px; border-radius: 999px; background: var(--surface-glass); border: 1px solid var(--rule-strong); } .facts li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--wire-deep); flex: none; } :where(.wide .slide > p) { max-width: 68ch; } /* The rule of this course: a manifesto, not a box. */ .rule-card { position: relative; isolation: isolate; overflow: hidden; margin: 0; padding: clamp(28px, 4.5vw, 56px) clamp(22px, 5vw, 64px); border-radius: var(--r-xl); background: radial-gradient(70% 120% at 0% 0%, var(--glow-2), transparent 60%), radial-gradient(50% 80% at 100% 100%, var(--glow-1), transparent 70%), var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow); } .rule-card::before { content: "“"; position: absolute; z-index: -1; right: clamp(14px, 3vw, 44px); top: .02em; font: italic 600 clamp(9rem, 16vw, 15rem)/1 var(--font-display); background: var(--text-grad); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .18; pointer-events: none; } .rule-card .answer__kicker { margin-bottom: 18px; font-size: .72rem; max-width: none; color: var(--ink-3); } .rule-card :where(p) { margin: 0 0 .8em; font-size: 1.06rem; max-width: 64ch; color: var(--ink-2); } .rule-card :where(p:first-of-type + p) { font-size: clamp(1.14rem, 1.04rem + .45vw, 1.34rem); line-height: 1.55; color: var(--ink); max-width: 48ch; } .rule-card :where(p:last-child) { margin-bottom: 0; } .rule-card b { color: var(--ink); background: var(--mark) 0 88% / 100% .34em no-repeat; } /* The capsule map: a journey. One line, lit as far as the capsules are written, dotted where the road goes on; the stations (groups) on the left; the available capsules as glass cards, the rest as quiet stops. */ .course-group__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin: 0 0 10px; } .course-group__head h2 { margin: 0; } .course-group__head a { font-weight: 600; font-size: .94rem; } .course-group__lede { margin: 0 0 8px; color: var(--ink-2); font-size: 1.04rem; max-width: 62ch; } .capsules { /* One geometry for every width: the line's column (--c2), the gap (--g), what sits before the line (--lead). */ --c2: 28px; --g: 18px; --lead: 0px; --to-rail: calc(-1 * (var(--g) + var(--c2) / 2)); position: relative; list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: var(--c2) minmax(0, 1fr); column-gap: var(--g); } .capsules::before { content: ""; position: absolute; left: calc(var(--lead) + var(--c2) / 2 - 1px); top: 12px; bottom: 40px; width: 2px; border-radius: 2px; background: var(--wire-v); } .capsules > li { position: relative; margin: 0; grid-column: 2; min-width: 0; } /* The node on the line, one per capsule: hollow for a capsule to come, lit for a written one. */ .capsules > li:not(.capsules__group)::before { content: ""; position: absolute; z-index: 1; left: calc(var(--to-rail) - 7px); top: 18px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 2px solid var(--rule-strong); } .capsules > li:has(.capsule-card:not(.capsule-card--soon))::before { left: calc(var(--to-rail) - 8px); top: 40px; width: 16px; height: 16px; border: 0; background: var(--wire-deep); box-shadow: 0 0 0 5px var(--bg), 0 0 0 6px color-mix(in srgb, #7a5cff 35%, transparent), 0 0 22px 2px rgba(122, 92, 255, .45); } /* The unwritten road: a capsule to come paints its own stretch of the line dotted. */ .capsules > li:has(.capsule-card--soon)::after, .capsules > .capsules__group:has(+ li .capsule-card--soon)::after { content: ""; position: absolute; left: calc(var(--to-rail) - 3px); top: -1px; bottom: -1px; width: 6px; background: linear-gradient(var(--rule-strong) 50%, transparent 0) 2px 0 / 2px 8px repeat-y, var(--bg); } /* The stations (groups of capsules). */ .capsules > .capsules__group { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; padding: 38px 0 6px; font: italic 500 clamp(1.25rem, 1.1rem + .6vw, 1.5rem)/1.2 var(--font-display); color: var(--ink); } .capsules > .capsules__group:first-child { padding-top: 0; } .capsules > .capsules__group::before { content: ""; position: absolute; z-index: 1; left: calc(var(--to-rail) - 6px); top: calc(38px + .32em); width: 12px; height: 12px; border-radius: 3px; transform: rotate(45deg); background: var(--bg); border: 2px solid var(--ink-2); } .capsules > .capsules__group:first-child::before { top: .32em; } .capsules > .capsules__group:first-child:has(+ li .capsule-card--soon)::after { top: 12px; } .capsules__range { font: 500 .72rem/1 var(--font-mono); font-style: normal; letter-spacing: .1em; color: var(--ink-3); } /* Stops */ .capsule-card { position: relative; display: block; padding: 12px 0 18px; } .capsule-card__eyebrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 6px 12px; margin: 0 0 6px !important; font: 500 .7rem/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .capsule-card__eyebrow .n { color: var(--ink); font-weight: 600; } .capsule-card h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.12rem, 1.02rem + .4vw, 1.28rem); line-height: 1.24; margin: 0 0 6px; text-wrap: balance; color: var(--ink-2); } .capsule-card p { margin: 0; color: var(--ink-3); font-size: .95rem; line-height: 1.55; max-width: 62ch; } .capsule-card .meta { margin-top: 10px; font: 500 .74rem/1.3 var(--font-mono); letter-spacing: .04em; color: var(--ink-3); } /* A written capsule: a glass card with its own small piece of the hero art. */ .capsule-card:not(.capsule-card--soon) { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 22px; align-items: start; margin: 12px 0 16px; padding: 18px 22px 20px 18px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow); transition: transform .35s var(--ease-out), box-shadow .35s ease, border-color .35s ease; } .capsule-card:not(.capsule-card--soon) > :not(.capsule-card__art) { grid-column: 2; } .capsule-card:not(.capsule-card--soon) h3 { color: var(--ink); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.55rem); } .capsule-card:not(.capsule-card--soon) p { color: var(--ink-2); } .capsule-card:not(.capsule-card--soon) h3 a { color: inherit; text-decoration: none; } .capsule-card:not(.capsule-card--soon) h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .capsule-card:not(.capsule-card--soon):hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, #7a5cff 30%, var(--rule)); } .capsule-card:not(.capsule-card--soon):has(a:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; } .capsule-card:not(.capsule-card--soon) h3 a:focus-visible { outline: none; } .capsule-card__art { grid-column: 1; grid-row: 1 / span 4; align-self: stretch; min-height: 96px; border-radius: 18px; overflow: hidden; background: radial-gradient(80% 70% at 20% 0%, rgba(122, 92, 255, .4), transparent 70%), radial-gradient(70% 70% at 100% 100%, rgba(95, 211, 160, .25), transparent 70%), #0c0f1a; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); } .capsule-card__art svg { width: 100%; height: 100%; } .tag { display: inline-flex; align-items: center; gap: 6px; font: 600 .62rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--rule-strong); color: var(--ink-3); } .tag--on { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: color-mix(in srgb, var(--ok) 9%, var(--surface)); } .tag--on::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent); } @media (min-width: 900px) { /* Wide: the stations take their own column, on the left of the line. */ .capsules { --c1: 220px; --lead: calc(var(--c1) + var(--g)); grid-template-columns: var(--c1) var(--c2) minmax(0, 1fr); } .capsules > li { grid-column: 3; } .capsules > .capsules__group { grid-column: 1; display: block; padding: 26px 0 0; text-align: right; } .capsules > .capsules__group:first-child { padding-top: 34px; } /* A short tick ties the station's name to the line. */ .capsules > .capsules__group::before { left: auto; right: calc(var(--to-rail) + 4px); top: calc(26px + .62em); width: calc(var(--g) - 2px); height: 1px; border: 0; border-radius: 0; transform: none; background: var(--ink-3); } .capsules > .capsules__group:first-child::before { top: calc(34px + .62em); } .capsules > .capsules__group:has(+ li .capsule-card--soon)::after { display: none; } .capsules__range { display: block; margin-top: 8px; } .capsules > .capsules__group + li:has(.capsule-card--soon) .capsule-card { padding-top: 22px; } .capsules > .capsules__group + li:has(.capsule-card--soon)::before { top: 28px; } } @media (max-width: 520px) { /* Narrow: the art becomes a small tile beside the eyebrow; the text takes the card's full width. */ .capsule-card:not(.capsule-card--soon) { grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; row-gap: 10px; padding: 16px 16px 18px; border-radius: var(--r-lg); } .capsule-card:not(.capsule-card--soon) > :not(.capsule-card__art) { grid-column: 1 / -1; } .capsule-card:not(.capsule-card--soon) > .capsule-card__eyebrow { grid-column: 2; grid-row: 1; align-self: center; margin: 0 !important; } .capsule-card__art { grid-row: 1; min-height: 0; height: 52px; border-radius: 13px; } .capsule-card:not(.capsule-card--soon) h3 { margin-top: 2px; } .capsule-card__eyebrow { letter-spacing: .06em; } } #links .next-grid > div:first-child a { font-family: inherit; font-size: inherit; font-weight: inherit; color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 50%, transparent); } #links .next-grid > div:first-child a::after { content: none; } /* ---------- Shared components (round 2): one markup each, for every capsule and the index ---------- Go deeper (details.deeper), You should see (pre.expect), Checkpoint (.checkpoint), Family tabs (.family-tabs), The test sheet (.test-sheet), How a capsule works (.how-capsule), the film slot (.figure-film), and since the round-2 review (docs/mobile/council/r2-shared-canon.md): the beat's conclusion (.beat-end), a check the student ticks (label.check, ul.check-list), the steps of Try it (ol.steps.try, .try__do, .try__see, .try__proof, .try__k, .try__more). Every visible word is in the HTML with data-i18n (no CSS content, no