/* 50 Shades of AI: site styles Tokens follow agents/ux-designer/SKILL.md. Light is always the default; dark (the "night edition") applies only when the reader turns it on, which sets data-theme="dark" on . */ :root { /* brand pops (same in both themes) */ --ink: #0A0A0A; --paper: #FFF8E7; --pop-yellow: #FFE14D; --pop-pink: #FF4FA3; --pop-cyan: #2EE6D6; --pop-purple: #8B5CF6; --pop-lime: #B6FF3B; --danger-red: #FF3B3B; /* theme roles */ --bg: #FFF8E7; --bg-alt: #FFEFC7; --surface: #FFFFFF; --text: #0A0A0A; --muted: #4B4557; --line: #0A0A0A; --shadow: #0A0A0A; --dot: rgba(10, 10, 10, .08); --accent-text: #6D3FE0; --focus: #FF4FA3; /* type */ --f-display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif; --f-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif; --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --f-comic: "Bangers", Impact, "Arial Black", sans-serif; /* shape */ --bw: 3px; --r: 8px; --sh-sm: 3px 3px 0 var(--shadow); --sh: 6px 6px 0 var(--shadow); --sh-lg: 10px 10px 0 var(--shadow); --ease-pop: cubic-bezier(.34, 1.56, .64, 1); } :root[data-theme="dark"] { --bg: #120E17; --bg-alt: #1A1422; --surface: #1F1929; --text: #FFF8E7; --muted: #C3B9D2; --line: #F2EAD8; --shadow: #8B5CF6; --dot: rgba(255, 248, 231, .07); --accent-text: #B79CFF; --focus: #2EE6D6; color-scheme: dark; } /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font: 18px/1.65 var(--f-body); -webkit-font-smoothing: antialiased; } img, svg { max-width: 100%; } a { color: inherit; } h1, h2, h3 { font-family: var(--f-display); font-weight: 800; line-height: 1.05; margin: 0; text-wrap: balance; letter-spacing: -.02em; } p { margin: 0; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; } .wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 16px; } @media (min-width: 720px) { .wrap { padding-inline: 32px; } } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip { position: absolute; left: 16px; top: -60px; z-index: 50; background: var(--pop-yellow); color: var(--ink); padding: 8px 14px; border: var(--bw) solid var(--ink); font-weight: 700; } .skip:focus { top: 12px; } .halftone { background-image: radial-gradient(var(--dot) 1.3px, transparent 1.5px); background-size: 12px 12px; } /* logo swaps with the theme */ .logo-d { display: none; } :root[data-theme="dark"] .logo-l { display: none; } :root[data-theme="dark"] .logo-d { display: block; } /* ---------- buttons & chips ---------- */ .btn { --btn-bg: var(--surface); display: inline-flex; align-items: center; gap: .5em; font: 800 16px/1 var(--f-display); letter-spacing: -.01em; text-decoration: none; color: var(--ink); background: var(--btn-bg); border: var(--bw) solid var(--ink); border-radius: var(--r); padding: 13px 20px; box-shadow: 4px 4px 0 var(--ink); cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; } .btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); } .btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); } .btn-lg { font-size: 18px; padding: 16px 24px; } .btn-sm { font-size: 14px; padding: 9px 14px; box-shadow: 3px 3px 0 var(--ink); } .btn-yellow { --btn-bg: var(--pop-yellow); } .btn-pink { --btn-bg: var(--pop-pink); } .btn-ghost { --btn-bg: transparent; color: var(--text); border-color: var(--line); box-shadow: 4px 4px 0 var(--shadow); } .btn-ghost:hover { background: var(--surface); box-shadow: 6px 6px 0 var(--shadow); } .btn-ghost:active { box-shadow: 0 0 0 var(--shadow); } .chip { font: 800 13px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .05em; text-decoration: none; color: var(--text); background: var(--surface); border: 2px solid var(--line); border-radius: 999px; padding: 9px 14px; cursor: pointer; transition: transform .12s ease, background .12s ease; } .chip:hover { transform: translateY(-2px); background: var(--bg-alt); } .chip[aria-pressed="true"] { background: var(--ink); color: var(--pop-yellow); border-color: var(--ink); } :root[data-theme="dark"] .chip[aria-pressed="true"] { background: var(--pop-yellow); color: var(--ink); border-color: var(--pop-yellow); } .badge { display: inline-block; font: 400 17px/1 var(--f-comic); letter-spacing: .06em; color: var(--ink); border: 2px solid var(--ink); padding: 5px 9px 3px; border-radius: 4px; transform: rotate(-3deg); } .lvl-rookie { background: var(--pop-lime); } .lvl-hero { background: var(--pop-yellow); } .lvl-legend { background: var(--pop-pink); } .meta-chip { font: 500 13px/1 var(--f-mono); color: var(--ink); background: rgba(255, 255, 255, .55); border: 2px solid var(--ink); border-radius: 999px; padding: 6px 10px; } /* ---------- header ---------- */ .site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--bg); border-bottom: var(--bw) solid var(--line); } .header-inner { display: flex; align-items: center; gap: 24px; min-height: 72px; } .brand { display: block; flex-shrink: 0; } .brand img { width: 200px; height: auto; } .main-nav { display: flex; gap: 6px; margin-inline-start: auto; } .main-nav a { font: 800 16px/1 var(--f-display); text-decoration: none; padding: 10px 14px; border: 2px solid transparent; border-radius: var(--r); transition: transform .12s ease, box-shadow .12s ease, background .12s ease; } .main-nav a:hover { border-color: var(--line); background: var(--surface); box-shadow: var(--sh-sm); transform: translate(-1px, -1px) rotate(-1deg); } .main-nav a[aria-current="page"] { background: var(--pop-yellow); color: var(--ink); border-color: var(--ink); box-shadow: inset 2px 2px 0 rgba(0,0,0,.25); } .header-actions { display: flex; align-items: center; gap: 10px; } .icon-btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; min-width: 42px; padding: 0 10px; justify-content: center; color: var(--text); background: var(--surface); border: 2px solid var(--line); border-radius: var(--r); cursor: pointer; font: 500 14px/1 var(--f-body); transition: transform .12s ease, box-shadow .12s ease; } .icon-btn:hover { transform: translate(-1px, -1px); box-shadow: var(--sh-sm); } .icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .icon-btn kbd { font: 800 11px/1 var(--f-mono); border: 1.5px solid var(--line); border-radius: 4px; padding: 3px 5px; color: var(--muted); } .search-btn { padding: 0 8px 0 12px; min-width: 150px; justify-content: flex-start; color: var(--muted); } .search-btn kbd { margin-inline-start: auto; } .i-sun { display: none; } :root[data-theme="dark"] .i-sun { display: block; } :root[data-theme="dark"] .i-moon { display: none; } .menu-btn, .nav-sub { display: none; } @media (max-width: 960px) { .site-header { position: sticky; } .main-nav { display: none; } .main-nav.is-open { display: flex; flex-direction: column; gap: 4px; position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); border-bottom: var(--bw) solid var(--line); padding: 12px 16px 20px; box-shadow: 0 10px 0 rgba(10, 10, 10, .12); } .main-nav.is-open a { font-size: 22px; padding: 14px 12px; } .main-nav.is-open .nav-sub { display: block; } .header-actions { margin-inline-start: auto; } .menu-btn { display: inline-flex; } } @media (max-width: 560px) { .brand img { width: 150px; } .search-btn { min-width: 42px; padding: 0 10px; } .search-label, .search-btn kbd, .header-actions .btn-sm { display: none; } } /* ---------- hero ---------- */ .hero { border-bottom: var(--bw) solid var(--line); padding-block: clamp(40px, 7vw, 88px); overflow: hidden; } .hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .prompt-line { font: 500 15px/1 var(--f-mono); color: var(--muted); display: flex; align-items: center; gap: 8px; } .prompt-line b { color: var(--text); font-weight: 800; } .p-caret { color: var(--pop-pink); font-weight: 800; } .p-cursor { width: 10px; height: 18px; background: var(--pop-pink); animation: blink 1.1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } .hero h1 { font-size: clamp(46px, 7.4vw, 92px); margin-top: 20px; line-height: .98; } .hl { position: relative; white-space: nowrap; z-index: 0; } .hl::before { content: ""; position: absolute; z-index: -1; left: -.08em; right: -.1em; bottom: .02em; height: .5em; background: var(--pop-yellow); border-radius: 4px; transform: rotate(-1.5deg); } :root[data-theme="dark"] .hl::before { background: var(--pop-purple); } .lede { font-size: clamp(18px, 1.6vw, 21px); color: var(--muted); max-width: 34em; margin-top: 22px; } .cta-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; } .hero-facts { list-style: none; padding: 0; margin: 36px 0 0; display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 15px; color: var(--muted); } .hero-facts li { display: flex; align-items: center; gap: 8px; } .hero-facts li::before { content: ""; width: 10px; height: 10px; background: var(--pop-pink); border: 2px solid var(--line); transform: rotate(45deg); flex-shrink: 0; } .hero-facts b { color: var(--text); } /* featured cover */ .cover { position: relative; background: var(--pop-cyan); color: var(--ink); border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--sh-lg); transform: rotate(1.2deg); transition: transform .3s var(--ease-pop); } .cover:hover { transform: rotate(0deg) translateY(-4px); } .cover-band { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; background: var(--ink); color: var(--paper); padding: 10px 18px; font: 800 12px/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; } .cover-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 16px; background-image: radial-gradient(rgba(10,10,10,.12) 1.3px, transparent 1.5px); background-size: 10px 10px; } .cover-title { font-size: clamp(30px, 3.4vw, 42px); line-height: 1; padding-right: 64px; } .cover-title a { text-decoration: none; } .cover-title a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; } .cover-hook { font-size: 17px; line-height: 1.5; max-width: 30em; } .attn { margin: 0; background: var(--paper); border: var(--bw) solid var(--ink); border-radius: 6px; padding: 12px 12px 8px; } .attn-grid { display: grid; grid-template-columns: auto repeat(6, 1fr); gap: 3px; font: 500 11px/1 var(--f-mono); } .attn-grid .lbl { display: flex; align-items: center; justify-content: flex-end; padding-right: 6px; color: #4B4557; } .attn-grid .col { justify-content: center; padding: 0 0 4px; } .attn-grid .cell { aspect-ratio: 1; border-radius: 3px; background: var(--pop-purple); } .attn figcaption { font: 500 11px/1 var(--f-mono); color: #4B4557; text-align: right; margin-top: 8px; } .cover-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .burst { position: absolute; top: -34px; right: -26px; width: 118px; height: 118px; transform: rotate(10deg); overflow: visible; } .burst polygon { fill: var(--pop-yellow); stroke: var(--ink); stroke-width: 3.5; stroke-linejoin: round; } .burst text { font: 400 30px var(--f-comic); fill: var(--ink); letter-spacing: 1px; } @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } .cover { max-width: 560px; transform: rotate(.6deg); margin-inline: 4px 10px; } .burst { right: -8px; width: 96px; height: 96px; } } /* ---------- ticker ---------- */ .ticker { background: var(--ink); color: var(--paper); overflow: hidden; border-bottom: var(--bw) solid var(--line); } .ticker-track { display: flex; width: max-content; animation: ticker 40s linear infinite; } .ticker:hover .ticker-track { animation-play-state: paused; } .ticker ul { display: flex; list-style: none; margin: 0; padding: 14px 0; } .ticker li { font: 800 15px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; padding-inline: 20px; } .ticker li::after { content: "/"; color: var(--pop-pink); margin-inline-start: 40px; } @keyframes ticker { to { transform: translateX(-50%); } } /* ---------- sections ---------- */ .section { padding-block: clamp(56px, 8vw, 104px); } .section-alt { background: var(--bg-alt); border-block: var(--bw) solid var(--line); } .sec-head { margin-bottom: 40px; max-width: 44em; } .sec-head-row { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; } .sec-cmd { font: 800 14px/1 var(--f-mono); color: var(--accent-text); margin-bottom: 12px; } .sec-head h2 { font-size: clamp(36px, 5vw, 60px); } .sec-sub { color: var(--muted); margin-top: 14px; font-size: 18px; } .sec-more { margin-top: 40px; display: flex; justify-content: center; } /* levels */ .levels { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; counter-reset: none; } .level { position: relative; color: var(--ink); border: var(--bw) solid var(--ink); border-radius: var(--r); padding: 26px 24px 24px; box-shadow: var(--sh); display: flex; flex-direction: column; gap: 12px; transition: transform .2s var(--ease-pop); } .level:hover { transform: translateY(-4px) rotate(-.6deg); } .level:not(:last-child)::after { content: "→"; position: absolute; right: -34px; top: 50%; transform: translateY(-50%); font: 800 28px/1 var(--f-display); color: var(--text); } .lvl-rookie-bg { background: var(--pop-lime); } .lvl-hero-bg { background: var(--pop-yellow); } .lvl-legend-bg { background: var(--pop-pink); } .level-name { font: 400 48px/1 var(--f-comic); letter-spacing: .04em; } .level p { font-size: 17px; line-height: 1.5; } .level-link { margin-top: auto; font: 800 15px/1 var(--f-display); text-decoration: none; align-self: flex-start; border-bottom: 3px solid var(--ink); padding-bottom: 3px; } .level-link:hover { border-bottom-style: dashed; } @media (max-width: 820px) { .levels { grid-template-columns: 1fr; gap: 36px; } .level:not(:last-child)::after { content: "↓"; right: auto; left: 50%; top: auto; bottom: -34px; transform: translateX(-50%); } } /* posts */ .filters { display: flex; flex-wrap: wrap; gap: 8px; } .posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } .post { background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r); box-shadow: var(--sh); padding: 22px; display: flex; flex-direction: column; gap: 12px; position: relative; transition: transform .2s var(--ease-pop), box-shadow .2s ease; } .post:hover { transform: translate(-3px, -3px) rotate(-.4deg); box-shadow: var(--sh-lg); } .post:focus-within { box-shadow: var(--sh-lg); } .post-top { display: flex; justify-content: space-between; align-items: center; } .issue { font: 800 14px/1 var(--f-mono); color: var(--muted); } .post h3 { font-size: 24px; line-height: 1.12; } .post h3 a { text-decoration: none; } .post h3 a::after { content: ""; position: absolute; inset: 0; } /* whole card is clickable */ .post:hover h3 a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } .tldr { font-size: 16px; line-height: 1.55; color: var(--muted); } .tldr b { font: 800 12px/1 var(--f-mono); color: var(--text); background: var(--bg-alt); border: 1.5px solid var(--line); padding: 2px 5px; margin-right: 4px; vertical-align: 2px; } .post-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 8px; border-top: 2px dashed var(--line); } .tags { display: flex; gap: 6px; flex-wrap: wrap; } .tags span, .time { font: 500 13px/1 var(--f-mono); color: var(--muted); } .tags span::before { content: "#"; color: var(--pop-pink); } .post-big { grid-column: span 2; background: var(--pop-yellow); color: var(--ink); border-color: var(--ink); } .post-big h3 { font-size: clamp(28px, 3.2vw, 40px); max-width: 16em; } .post-big .issue, .post-big .tldr, .post-big .tags span, .post-big .time { color: #3A3445; } .post-big .tldr { font-size: 18px; max-width: 34em; } .post-big .tldr b { background: var(--paper); color: var(--ink); border-color: var(--ink); } .post-big .post-foot { border-color: var(--ink); } .empty { grid-column: 1 / -1; font: 800 16px/1.4 var(--f-mono); color: var(--muted); padding: 40px; text-align: center; border: var(--bw) dashed var(--line); border-radius: var(--r); } @media (max-width: 960px) { .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .posts { grid-template-columns: 1fr; } .post-big { grid-column: auto; } } /* projects */ .projects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } .pcard { background: var(--surface); border: var(--bw) solid var(--line); border-radius: 12px; box-shadow: var(--sh); display: flex; flex-direction: column; overflow: hidden; transition: transform .2s var(--ease-pop), box-shadow .2s ease; } .pcard:hover { transform: translateY(-4px) rotate(.5deg); box-shadow: var(--sh-lg); } .pcard-screen { background: var(--ink); color: var(--paper); padding: 18px; min-height: 118px; border-bottom: var(--bw) solid var(--line); display: flex; align-items: center; } .pcard-screen code { font: 500 13px/1.7 var(--f-mono); overflow-wrap: anywhere; } .c-pink { color: var(--pop-pink); font-weight: 800; } .c-yel { color: var(--pop-yellow); } .c-dim { color: #A69DB5; } .pcard-body { padding: 20px 20px 8px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .pcard-body h3 { font-size: 26px; } .pcard-body h3 a { text-decoration: none; } .pcard-body h3 a:hover { text-decoration: underline; } .pcard-body p { font-size: 16px; line-height: 1.5; color: var(--muted); } .status { align-self: flex-start; font: 400 16px/1 var(--f-comic); letter-spacing: .06em; color: var(--ink); border: 2px solid var(--ink); padding: 5px 9px 3px; border-radius: 4px; transform: rotate(-2deg); } .s-shipped { background: var(--pop-lime); } .s-cooking { background: var(--pop-yellow); } .s-exp { background: var(--pop-cyan); } .stack { list-style: none; padding: 0; margin: auto 0 0; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 6px; } .stack li { font: 500 12px/1 var(--f-mono); border: 1.5px solid var(--line); border-radius: 999px; padding: 5px 9px; } .pcard-links { display: flex; border-top: 2px dashed var(--line); margin-top: 14px; } .pcard-links a { flex: 1; text-align: center; padding: 13px; font: 800 15px/1 var(--f-display); text-decoration: none; } .pcard-links a + a { border-left: 2px dashed var(--line); } .pcard-links a:hover { background: var(--bg-alt); } @media (max-width: 960px) { .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .projects { grid-template-columns: 1fr; } } /* resources */ .packs { isolation: isolate; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } .pack { position: relative; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--ink); background: var(--pop-purple); border: var(--bw) solid var(--ink); border-radius: var(--r); padding: 26px 22px 22px; box-shadow: var(--sh); min-height: 190px; transition: transform .2s var(--ease-pop), box-shadow .2s ease; } /* stacked-cards look: a second card peeking out behind */ .pack::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r); transform: rotate(-3deg) translate(-4px, 4px); transition: transform .2s var(--ease-pop); } .pack:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); } .pack:hover::before { transform: rotate(-6deg) translate(-8px, 6px); } .pack-2 { background: var(--pop-pink); } .pack-3 { background: var(--pop-lime); } .pack-kicker { font: 800 12px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; } .pack-title { font: 800 34px/1 var(--f-display); letter-spacing: -.02em; } .pack-count { margin-top: auto; font: 500 13px/1.4 var(--f-mono); } .types { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 40px; } .types-label { font: 800 14px/1 var(--f-mono); color: var(--muted); margin-right: 6px; } @media (max-width: 900px) { .packs { grid-template-columns: 1fr; max-width: 520px; } } /* newsletter */ .nl { background: var(--pop-pink); color: var(--ink); border: var(--bw) solid var(--ink); border-radius: 14px; box-shadow: var(--sh-lg); padding: clamp(24px, 5vw, 56px); display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; } .halftone-dark { background-image: radial-gradient(rgba(10,10,10,.14) 1.3px, transparent 1.5px); background-size: 10px 10px; } .nl-bubble { position: relative; background: var(--paper); border: var(--bw) solid var(--ink); border-radius: 22px; padding: 26px 28px; } .nl-bubble::after { content: ""; position: absolute; left: 44px; bottom: -24px; width: 30px; height: 26px; background: var(--paper); border-right: var(--bw) solid var(--ink); border-bottom: var(--bw) solid var(--ink); transform: skewX(35deg); border-bottom-right-radius: 4px; } .nl-bubble h2 { font-size: clamp(28px, 3.4vw, 40px); } .nl-bubble p { margin-top: 12px; font-size: 17px; line-height: 1.5; color: #3A3445; } .nl-form label { display: block; font: 800 13px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; } .nl-row { display: flex; gap: 12px; flex-wrap: wrap; } .nl-row input { flex: 1 1 220px; min-width: 0; font: 400 17px/1 var(--f-body); color: var(--ink); background: var(--paper); border: var(--bw) solid var(--ink); border-radius: var(--r); padding: 14px 16px; } .nl-row input::placeholder { color: #6B6478; } .nl-row input[aria-invalid="true"] { border-color: #B00020; background: #FFF0F0; } .nl-msg { min-height: 1.5em; margin-top: 12px; font-weight: 700; } @media (max-width: 820px) { .nl { grid-template-columns: 1fr; } } /* footer */ .site-footer { background: var(--ink); color: var(--paper); border-top: var(--bw) solid var(--line); padding-block: 56px 28px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; } .the-end { font: 400 clamp(56px, 8vw, 96px)/.9 var(--f-comic); letter-spacing: .03em; color: var(--pop-yellow); margin-bottom: 22px; } .the-end span { display: block; font: 800 16px/1.4 var(--f-mono); letter-spacing: 0; color: #C3B9D2; margin-top: 6px; } .footer-brand img { width: 220px; height: auto; display: block; } .site-footer nav { display: flex; flex-direction: column; gap: 10px; } .site-footer nav h2 { font: 800 13px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--pop-pink); margin-bottom: 6px; } .site-footer nav a { text-decoration: none; font-size: 17px; } .site-footer nav a:hover { color: var(--pop-yellow); text-decoration: underline; } .footer-small { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 48px; padding-top: 20px; border-top: 2px dashed #3A3445; font: 500 13px/1.4 var(--f-mono); color: #A69DB5; } @media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } } /* search dialog */ .search { width: min(640px, calc(100% - 32px)); max-height: 70vh; padding: 0; margin: 12vh auto auto; background: var(--surface); color: var(--text); border: var(--bw) solid var(--line); border-radius: 12px; box-shadow: var(--sh-lg); } .search::backdrop { background: rgba(10, 10, 10, .55); } .search-field { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: var(--bw) solid var(--line); font: 800 20px/1 var(--f-mono); } .search-field > span { color: var(--pop-pink); } .search-field input { flex: 1; min-width: 0; font: 500 18px/1.2 var(--f-mono); color: var(--text); background: transparent; border: 0; outline: 0; } .esc { font: 800 11px/1 var(--f-mono); color: var(--muted); background: none; border: 1.5px solid var(--line); border-radius: 4px; padding: 5px 7px; cursor: pointer; } .search-results { list-style: none; margin: 0; padding: 8px; overflow-y: auto; max-height: calc(70vh - 64px); } .search-results a { display: flex; justify-content: space-between; gap: 12px; padding: 12px; border-radius: 8px; text-decoration: none; } .search-results a:hover, .search-results a:focus-visible { background: var(--bg-alt); outline-offset: -3px; } .search-results .kind { font: 500 12px/1.6 var(--f-mono); color: var(--muted); flex-shrink: 0; } .search-results .none { padding: 18px 12px; color: var(--muted); font-family: var(--f-mono); font-size: 15px; } /* motion preferences */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } .ticker-track { width: auto; flex-wrap: wrap; } .ticker ul[aria-hidden="true"] { display: none; } .ticker ul { flex-wrap: wrap; } } /* ===================================================================== Inner pages ===================================================================== */ .narrow { max-width: 880px; } .section-tight { padding-block: clamp(36px, 5vw, 64px); } .posts.is-filtered .post-big { grid-column: auto; } .block-title { font-size: clamp(26px, 3vw, 34px); margin: 8px 0 22px; } * + .block-title { margin-top: 56px; } code { font-family: var(--f-mono); font-size: .88em; background: var(--bg-alt); border: 1.5px solid var(--line); border-radius: 4px; padding: .05em .35em; } /* page header */ .page-head { border-bottom: var(--bw) solid var(--line); padding-block: clamp(40px, 6vw, 80px); } .page-head h1 { font-size: clamp(42px, 6.4vw, 80px); line-height: 1; max-width: 16em; } .page-lede { font-size: clamp(18px, 1.6vw, 21px); color: var(--muted); max-width: 38em; margin-top: 18px; } /* breadcrumbs */ .crumbs ol { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font: 500 13px/1.4 var(--f-mono); color: var(--muted); } .crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--pop-pink); font-weight: 800; } .crumbs a { text-decoration: none; } .crumbs a:hover { text-decoration: underline; color: var(--text); } /* filter bar */ .filter-bar { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r); box-shadow: var(--sh); padding: 14px; margin-bottom: 14px; } .filter-bar-simple { justify-content: space-between; } .filter-bar-simple .count { margin: 0; } .fb-search { position: relative; flex: 1 1 240px; } .fb-search svg { position: absolute; left: 12px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: var(--muted); stroke-width: 2.4; stroke-linecap: round; } .fb-search input, .field select { width: 100%; font: 500 16px/1.2 var(--f-body); color: var(--text); background: var(--bg); border: 2px solid var(--line); border-radius: var(--r); padding: 10px 12px; } .fb-search input { padding-left: 38px; } .fb-selects { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .field { display: flex; align-items: center; gap: 8px; } .field > span, .check span { font: 800 12px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .field select { width: auto; padding-right: 28px; cursor: pointer; } .check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; } .check input, .step-check { width: 22px; height: 22px; accent-color: var(--pop-pink); cursor: pointer; } .count { font: 500 13px/1.4 var(--f-mono); color: var(--muted); margin: 0 0 22px; } .end-note { text-align: center; margin-top: 44px; font: 500 15px/1.6 var(--f-mono); color: var(--muted); } .end-note a { color: var(--text); font-weight: 800; } /* series */ .series { display: grid; grid-template-columns: 1fr 1.3fr; gap: 28px; align-items: start; background: var(--ink); color: var(--paper); border: var(--bw) solid var(--line); border-radius: var(--r); box-shadow: var(--sh); padding: clamp(20px, 3vw, 32px); margin-bottom: 44px; } .series-kicker { font: 400 20px/1 var(--f-comic); letter-spacing: .06em; color: var(--ink); background: var(--pop-cyan); border: 2px solid var(--paper); padding: 5px 9px 3px; display: inline-block; transform: rotate(-2deg); } .series h2 { font-size: clamp(26px, 3vw, 34px); margin-top: 14px; } .series-head p { color: #C3B9D2; margin-top: 10px; font-size: 16px; } .series-parts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; counter-reset: part; } .series-parts li { counter-increment: part; display: flex; align-items: baseline; gap: 12px; border: 2px solid #3A3445; border-radius: 6px; padding: 10px 14px; } .series-parts li::before { content: "Part " counter(part); font: 800 11px/1 var(--f-mono); text-transform: uppercase; color: var(--pop-pink); flex-shrink: 0; width: 4.2em; } .series-parts a { text-decoration: none; font-weight: 700; } .series-parts a:hover { color: var(--pop-yellow); text-decoration: underline; } .series-parts .issue { color: #A69DB5; margin-right: 6px; } .series-parts .soon { color: #8E859C; border-style: dashed; } .series-parts em { font: 500 11px/1 var(--f-mono); font-style: normal; text-transform: uppercase; margin-left: 6px; color: var(--pop-yellow); } @media (max-width: 820px) { .series { grid-template-columns: 1fr; } } /* CTA panel */ .cta-panel { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; background: var(--pop-yellow); color: var(--ink); border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--sh); padding: clamp(20px, 3vw, 32px); margin-top: 56px; } .cta-panel h2 { font-size: clamp(24px, 3vw, 32px); } .cta-panel p { margin-top: 6px; max-width: 36em; } .cta-panel .btn-yellow { --btn-bg: var(--paper); } .cta-panel .btn-ghost { color: var(--ink); border-color: var(--ink); box-shadow: 4px 4px 0 var(--ink); } .cta-row-tight { margin-top: 0; } /* ---------- article ---------- */ .progress { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; height: 6px; z-index: 30; background: transparent; } .progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--pop-yellow), var(--pop-pink), var(--pop-purple)); transform: scaleX(0); transform-origin: 0 50%; border-right: 2px solid var(--ink); } .article-hero { border-bottom: var(--bw) solid var(--line); padding-block: clamp(32px, 5vw, 64px); } .issue-band { display: inline-flex; flex-wrap: wrap; gap: 6px 18px; background: var(--ink); color: var(--paper); padding: 8px 14px; font: 800 12px/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; border: 2px solid var(--line); } .issue-band span + span::before { content: "·"; margin-right: 18px; color: var(--pop-pink); } .article-hero h1 { font-size: clamp(40px, 6.2vw, 78px); margin-top: 22px; max-width: 14em; line-height: 1; } .article-hook { font-size: clamp(18px, 1.7vw, 22px); color: var(--muted); max-width: 36em; margin-top: 18px; } .article-meta { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; margin-top: 26px; font: 500 14px/1.4 var(--f-mono); color: var(--muted); } .article-meta b { color: var(--text); } .meta-tags a { color: var(--accent-text); text-decoration: none; font-weight: 800; } .meta-tags a:hover { text-decoration: underline; } .article-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; } .btn.is-done, .copy.is-done { background: var(--pop-lime); color: var(--ink); } .article-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; padding-block: 48px 80px; } .toc-wrap { position: relative; } .toc { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 96px); border: var(--bw) solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--sh-sm); } .toc summary { font: 800 13px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; padding: 14px 16px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; } .toc summary::-webkit-details-marker { display: none; } .toc summary::after { content: "+"; color: var(--pop-pink); } .toc[open] summary::after { content: "−"; } .toc ol { list-style: none; counter-reset: toc; margin: 0; padding: 0 8px 10px; } .toc li { counter-increment: toc; } .toc a { display: flex; gap: 10px; padding: 8px; border-radius: 6px; text-decoration: none; font-size: 15px; line-height: 1.35; color: var(--muted); } .toc a::before { content: counter(toc, decimal-leading-zero); font: 800 11px/1.9 var(--f-mono); color: var(--pop-pink); } .toc a:hover { background: var(--bg-alt); color: var(--text); } .toc a[aria-current="true"] { background: var(--pop-yellow); color: var(--ink); font-weight: 700; } @media (min-width: 1080px) { .toc summary { cursor: default; pointer-events: none; } .toc summary::after { content: none; } } @media (max-width: 1079px) { .article-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 24px; } .toc-wrap { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 78px); z-index: 10; } .toc { position: static; } .toc ol { max-height: 50vh; overflow-y: auto; } } /* prose: the calm zone */ .prose { max-width: 70ch; font-size: 19px; line-height: 1.75; } .prose > * + * { margin-top: 1.1em; } .prose h2 { font-size: clamp(28px, 3vw, 36px); margin-top: 2.2em; scroll-margin-top: 150px; line-height: 1.1; } .prose h2 + * { margin-top: .7em; } .prose ul, .prose ol { padding-left: 1.3em; } .prose li + li { margin-top: .4em; } .prose li::marker { color: var(--pop-pink); font-weight: 800; } .prose a { color: var(--accent-text); text-decoration-thickness: 2px; text-underline-offset: 3px; } .prose q { font-style: italic; } .prose var { font-family: "Times New Roman", Georgia, serif; font-size: 1.08em; } .prose strong { font-weight: 700; background: linear-gradient(transparent 62%, rgba(255, 225, 77, .55) 62%); } .tldr-panel { position: relative; background: var(--pop-yellow); color: var(--ink); border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--sh); padding: 30px 24px 20px; margin-top: 0; } .tldr-panel ul { margin: 0; font-size: 17px; line-height: 1.55; } .tldr-panel li::marker { color: var(--ink); } .panel-tag, .callout-tag { position: absolute; top: -15px; left: 16px; font: 400 18px/1 var(--f-comic); letter-spacing: .06em; background: var(--ink); color: var(--pop-yellow); padding: 6px 10px 4px; border: 2px solid var(--ink); transform: rotate(-2deg); } .callout { position: relative; border: var(--bw) solid var(--line); border-radius: 14px; padding: 26px 22px 18px; background: var(--surface); font-size: 17px; line-height: 1.6; margin-top: 2em !important; } .callout p { margin: 0; } .callout-tip { border-color: var(--line); box-shadow: 5px 5px 0 var(--pop-lime); } .callout-tip .callout-tag { background: var(--pop-lime); color: var(--ink); } .callout-gotcha { box-shadow: 5px 5px 0 var(--danger-red); } .callout-gotcha .callout-tag { background: var(--danger-red); color: var(--ink); } .callout-deep { box-shadow: 5px 5px 0 var(--pop-purple); } .callout-deep .callout-tag { background: var(--pop-purple); color: var(--ink); } .math-block { overflow-x: auto; padding: 22px 16px; background: var(--surface); border: 2px dashed var(--line); border-radius: var(--r); text-align: center; font-size: 1.3em; } .math-block math { font-family: "Latin Modern Math", "STIX Two Math", "Cambria Math", serif; } /* code blocks */ .code { margin: 1.4em 0 0; border: var(--bw) solid var(--ink); border-radius: var(--r); overflow: hidden; background: #15111B; box-shadow: var(--sh); } .code figcaption { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 14px; background: var(--ink); border-bottom: 2px solid #2E2838; font: 800 12px/1 var(--f-mono); color: #C3B9D2; } .code .file { color: var(--paper); } .code .lang { margin-left: auto; text-transform: uppercase; letter-spacing: .08em; color: #8E859C; } .code .copy { font: 800 12px/1 var(--f-mono); color: var(--ink); background: var(--pop-yellow); border: 2px solid var(--pop-yellow); border-radius: 5px; padding: 6px 10px; cursor: pointer; } .code .copy:hover { background: var(--paper); border-color: var(--paper); } .code pre { margin: 0; padding: 18px 20px; overflow-x: auto; } .code code { font: 500 14px/1.7 var(--f-mono); color: #EDE6F5; background: none; border: 0; padding: 0; white-space: pre; } .tk { color: #FF79B8; } .tf { color: #2EE6D6; } .tn { color: #FFE14D; } .ts { color: #B6FF3B; } .tc { color: #8E859C; font-style: italic; } /* figures, tables */ .figure { margin: 1.6em 0 0; } .figure figcaption { font-size: 15px; line-height: 1.5; color: var(--muted); margin-top: 12px; } .attn-lg { max-width: 460px; } .attn-lg .attn-grid { font-size: 13px; gap: 4px; } .attn-cap { font: 500 11px/1 var(--f-mono); color: #4B4557; text-align: right; margin-top: 8px !important; } .table-wrap { overflow-x: auto; border: var(--bw) solid var(--line); border-radius: var(--r); box-shadow: var(--sh-sm); background: var(--surface); } table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; font-variant-numeric: tabular-nums; } caption { caption-side: top; text-align: left; font: 800 12px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 12px 14px 0; } th { text-align: left; font: 800 13px/1.3 var(--f-mono); padding: 12px 14px; border-bottom: var(--bw) solid var(--line); position: sticky; top: 0; background: var(--surface); } td { padding: 11px 14px; border-top: 1.5px dashed var(--line); } tbody tr:first-child td { border-top: 0; } tbody tr:nth-child(even) td { background: var(--bg-alt); } /* end of issue */ .end-panel { position: relative; background: var(--ink); color: var(--paper); border: var(--bw) solid var(--line); border-radius: var(--r); box-shadow: var(--sh); padding: 28px 26px 22px; margin-top: 3em !important; scroll-margin-top: 150px; } .end-panel h2 { margin: 0 0 12px; font-size: 30px; color: var(--pop-yellow); } .end-panel ol { font-size: 17px; line-height: 1.6; } .end-panel li::marker { color: var(--pop-pink); } .author { display: flex; gap: 16px; align-items: center; border-top: 2px dashed var(--line); border-bottom: 2px dashed var(--line); padding-block: 22px; margin-top: 2.4em !important; } .author-mark { flex-shrink: 0; width: 60px; height: 60px; border-radius: 14px; background: var(--ink); color: var(--pop-yellow); display: grid; place-items: center; font: 800 18px/1 var(--f-mono); border: 2px solid var(--line); } .author-name { font: 800 18px/1.3 var(--f-display); } .author-bio { font-size: 15px; line-height: 1.5; color: var(--muted); margin-top: 4px !important; } .issue-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 2em !important; } .issue-link { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border: var(--bw) solid var(--line); border-radius: var(--r); background: var(--surface); text-decoration: none !important; color: var(--text) !important; transition: transform .15s ease, box-shadow .15s ease; } .issue-link:hover { transform: translate(-2px, -2px); box-shadow: var(--sh); } .issue-link.next { text-align: right; } .il-dir { font: 800 12px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--pop-pink); } .il-title { font: 800 18px/1.25 var(--f-display); } @media (max-width: 620px) { .issue-nav { grid-template-columns: 1fr; } .issue-link.next { text-align: left; } } /* ---------- project page ---------- */ .project-hero { border-bottom: var(--bw) solid var(--line); padding-block: clamp(32px, 5vw, 72px); } .project-hero-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(28px, 4vw, 56px); align-items: center; } .project-hero h1 { font-size: clamp(48px, 7vw, 88px); margin-top: 16px; } .status-lg { font-size: 22px; } .facts { display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 28px 0 0; } .facts dt { font: 800 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .facts dd { margin: 6px 0 0; font-size: 15px; } .demo { background: #15111B; border: var(--bw) solid var(--ink); border-radius: 12px; box-shadow: var(--sh-lg); overflow: hidden; transform: rotate(-.8deg); } .demo-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: var(--ink); border-bottom: 2px solid #2E2838; } .demo-bar span { width: 12px; height: 12px; border-radius: 50%; background: var(--pop-pink); } .demo-bar span:nth-child(2) { background: var(--pop-yellow); } .demo-bar span:nth-child(3) { background: var(--pop-lime); } .demo-bar b { margin-left: auto; font: 800 12px/1 var(--f-mono); color: #8E859C; } .demo-body { margin: 0; padding: 18px 20px 22px; font: 500 14px/1.65 var(--f-mono); color: #EDE6F5; overflow-x: auto; } .cite { color: var(--ink); background: var(--pop-yellow); padding: 0 4px; border-radius: 3px; font-weight: 800; } .demo-cursor { display: inline-block; width: 9px; height: 17px; background: var(--pop-pink); vertical-align: -3px; animation: blink 1.1s steps(1) infinite; } @media (max-width: 900px) { .project-hero-grid { grid-template-columns: minmax(0, 1fr); } .demo { transform: none; } } .story { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: var(--bw) solid var(--line); border-radius: var(--r); box-shadow: var(--sh); overflow: hidden; background: var(--surface); } .story-panel { padding: 30px 24px 26px; position: relative; } .story-panel + .story-panel { border-left: var(--bw) solid var(--line); } .story-panel:nth-child(1) { background: var(--bg-alt); } .story-panel:nth-child(3) { background: var(--pop-lime); color: var(--ink); } .story-cap { display: inline-block; font: 400 22px/1 var(--f-comic); letter-spacing: .06em; background: var(--pop-yellow); color: var(--ink); border: 2px solid var(--ink); padding: 6px 10px 4px; transform: rotate(-2deg); margin-bottom: 16px; } .story-panel p { font-size: 17px; line-height: 1.6; } @media (max-width: 820px) { .story { grid-template-columns: 1fr; } .story-panel + .story-panel { border-left: 0; border-top: var(--bw) solid var(--line); } } .diagram { margin: 0; } .diagram-scroll { overflow-x: auto; background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r); box-shadow: var(--sh); padding: 20px; } .diagram svg { display: block; width: 100%; min-width: 720px; height: auto; } .diagram figcaption { font-size: 15px; color: var(--muted); margin-top: 14px; } .d-box { stroke: var(--ink); stroke-width: 3; } .d-paper { fill: var(--paper); } .d-cyan { fill: var(--pop-cyan); } .d-yellow { fill: var(--pop-yellow); } .d-pink { fill: var(--pop-pink); } .d-purple { fill: var(--pop-purple); } .d-lime { fill: var(--pop-lime); } .d-node text { font: 800 16px var(--f-display); fill: var(--ink); text-anchor: middle; } .d-node .d-sub { font: 500 11.5px var(--f-mono); fill: #3A3445; } .d-label { font: 800 12px var(--f-mono); fill: var(--muted); letter-spacing: .08em; } .d-line { fill: none; stroke: var(--text); stroke-width: 3; } .d-dash { stroke-dasharray: 7 6; } .d-ink-fill { fill: var(--text); } .lessons-head { margin-top: 64px; margin-bottom: 10px; } .lessons { display: flex; flex-direction: column; gap: 8px; } /* ---------- resources ---------- */ .packs-row { margin-bottom: 8px; } .library { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .res { background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r); box-shadow: var(--sh-sm); padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 8px; position: relative; transition: transform .2s var(--ease-pop), box-shadow .2s ease; } .res:hover { transform: translate(-2px, -2px); box-shadow: var(--sh); } .res-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .res-src { font: 500 12px/1.3 var(--f-mono); color: var(--muted); text-align: right; } .res h3 { font-size: 20px; line-height: 1.2; } .res h3 a { text-decoration: none; } .res h3 a::after { content: ""; position: absolute; inset: 0; } .res:hover h3 a { text-decoration: underline; } .res-by { font-size: 14px; color: var(--muted); } .res-why { font-size: 15px; line-height: 1.5; } .res-why b { display: block; font: 800 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--pop-pink); margin-bottom: 4px; } .res-foot { margin-top: auto; padding-top: 10px; border-top: 2px dashed var(--line); display: flex; justify-content: space-between; align-items: center; } .rtype { display: inline-block; font: 800 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink); border: 2px solid var(--ink); border-radius: 4px; padding: 5px 7px; } .t-paper { background: var(--pop-cyan); } .t-course { background: var(--pop-yellow); } .t-book { background: var(--pop-lime); } .t-tool { background: var(--pop-pink); } .t-dataset { background: var(--pop-purple); } .t-model { background: #FF9F43; } .t-issue { background: var(--paper); } .lvl-dot { display: inline-flex; align-items: center; gap: 6px; font: 800 12px/1 var(--f-mono); background: none !important; color: var(--muted); } .lvl-dot::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--line); } .lvl-dot.lvl-rookie::before { background: var(--pop-lime); } .lvl-dot.lvl-hero::before { background: var(--pop-yellow); } .lvl-dot.lvl-legend::before { background: var(--pop-pink); } .free, .paid { font: 800 12px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; } .free { color: var(--text); } .paid { color: var(--muted); } @media (max-width: 960px) { .library { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .library { grid-template-columns: 1fr; } } @media (min-width: 901px) { .packs-row { max-width: none; } } /* starter pack page */ .pack-hero { background: var(--pop-purple); color: var(--ink); border-bottom: var(--bw) solid var(--ink); padding-block: clamp(32px, 5vw, 72px); background-image: radial-gradient(rgba(10,10,10,.14) 1.3px, transparent 1.5px); background-size: 12px 12px; } .pack-hero .crumbs ol { color: #2A2433; } .pack-hero .crumbs li + li::before { color: var(--ink); } .pack-hero h1 { font-size: clamp(48px, 7vw, 88px); margin-top: 12px; } .pack-hero .page-lede { color: #1E1A26; } .pack-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } .pack-stats span { font: 500 14px/1 var(--f-mono); background: var(--paper); border: 2px solid var(--ink); border-radius: 999px; padding: 8px 12px; } .pack-progress { display: flex; align-items: center; gap: 14px; margin-top: 26px; max-width: 520px; } .pack-progress p { font: 800 14px/1 var(--f-mono); white-space: nowrap; } .meter { flex: 1; height: 18px; background: var(--paper); border: var(--bw) solid var(--ink); border-radius: 999px; overflow: hidden; } .meter span { display: block; height: 100%; background: var(--pop-lime); border-right: 2px solid var(--ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s var(--ease-pop); } .pack-note { font: 500 14px/1.5 var(--f-mono); color: var(--muted); margin-bottom: 24px; } .steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: flex; flex-direction: column; gap: 16px; } .step { counter-increment: step; display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r); box-shadow: var(--sh-sm); padding: 18px; position: relative; transition: opacity .2s ease; } .step::before { content: counter(step); position: absolute; left: -14px; top: -14px; width: 36px; height: 36px; display: grid; place-items: center; background: var(--pop-yellow); color: var(--ink); border: 2px solid var(--ink); border-radius: 50%; font: 800 15px/1 var(--f-mono); } .step .step-check { margin: 4px auto 0; width: 28px; height: 28px; } .step-meta { display: flex; gap: 12px; align-items: center; font: 500 13px/1 var(--f-mono); color: var(--muted); } .step h3 { font-size: 21px; margin-top: 10px; line-height: 1.2; } .step h3 a { text-decoration: none; } .step h3 a:hover { text-decoration: underline; } .step p { font-size: 16px; line-height: 1.55; color: var(--muted); margin-top: 6px; } .step.is-done { opacity: .6; } .step.is-done::before { content: "✓"; background: var(--pop-lime); } .step.is-done h3 a { text-decoration: line-through; text-decoration-thickness: 2px; } /* ---------- about ---------- */ .about-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } .about-panel { color: var(--ink); text-decoration: none; border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--sh); padding: 26px 24px; display: flex; flex-direction: column; gap: 12px; transition: transform .2s var(--ease-pop); } .about-panel:hover { transform: translateY(-4px) rotate(-.6deg); } .ap-yellow { background: var(--pop-yellow); } .ap-cyan { background: var(--pop-cyan); } .ap-pink { background: var(--pop-pink); } .ap-word { font: 400 40px/1 var(--f-comic); letter-spacing: .04em; } .about-panel p { font-size: 17px; line-height: 1.55; } .process { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .process li { background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r); box-shadow: var(--sh-sm); padding: 22px 20px; } .process-n { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--pop-yellow); font: 800 18px/1 var(--f-mono); border: 2px solid var(--line); } .process h3 { font-size: 24px; margin-top: 14px; } .process p { font-size: 16px; line-height: 1.55; color: var(--muted); margin-top: 8px; } .rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .rules li { font-size: 18px; line-height: 1.55; padding: 14px 18px; border-left: 6px solid var(--pop-pink); background: var(--surface); border-radius: 0 var(--r) var(--r) 0; } .rules b { font-family: var(--f-display); font-weight: 800; } @media (max-width: 960px) { .process { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 820px) { .about-panels { grid-template-columns: 1fr; } } @media (max-width: 560px) { .process { grid-template-columns: 1fr; } } /* ---------- 404 ---------- */ .lost { border-bottom: var(--bw) solid var(--line); padding-block: clamp(48px, 8vw, 110px); } .lost-inner { display: flex; flex-direction: column; align-items: flex-start; } .lost-code { font: 400 clamp(120px, 22vw, 240px)/.85 var(--f-comic); color: var(--pop-yellow); -webkit-text-stroke: 4px var(--ink); text-shadow: 8px 8px 0 var(--ink), -6px -2px 0 var(--pop-cyan), 6px 2px 0 var(--pop-pink); transform: rotate(-4deg); margin-bottom: 20px; } .lost h1 { font-size: clamp(34px, 5vw, 60px); max-width: 14em; } .lost-links { margin-top: 48px; } .lost-links ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .lost-links a { font-weight: 700; } /* ---------- style guide ---------- */ .swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; } .swatch { display: flex; flex-direction: column; gap: 4px; font-size: 14px; } .swatch span { height: 76px; border: var(--bw) solid var(--line); border-radius: var(--r); box-shadow: var(--sh-sm); margin-bottom: 8px; } .swatch code { font-size: 12px; align-self: flex-start; } .sg-note { font-size: 15px; color: var(--muted); margin-top: 16px; } .sg-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .type-specimen { display: flex; flex-direction: column; border: var(--bw) solid var(--line); border-radius: var(--r); background: var(--surface); } .ts-row { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: baseline; padding: 18px 20px; } .ts-row + .ts-row { border-top: 2px dashed var(--line); } .ts-label { font: 500 12px/1.4 var(--f-mono); color: var(--muted); } .ts-display { font: 800 44px/1 var(--f-display); letter-spacing: -.02em; } .ts-comic { font: 400 40px/1 var(--f-comic); letter-spacing: .04em; } .ts-mono { font: 800 20px/1.2 var(--f-mono); } .sg-callouts { max-width: 70ch; } .sg .code { max-width: 70ch; } @media (max-width: 720px) { .ts-row { grid-template-columns: 1fr; gap: 8px; } } /* motion, again: keep last so it wins */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } .sg .posts { isolation: isolate; } /* ===================================================================== Dynamic site additions ===================================================================== */ .hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .nl-fine { font-size: 13px; margin-top: 10px; color: inherit; opacity: .8; } .cta-panel .nl-form { flex: 1 1 340px; max-width: 460px; } .cta-panel .nl-form label:not(.hp label) { display: block; font: 800 12px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; } .cta-panel .nl-row input { flex: 1 1 200px; min-width: 0; font: 400 16px/1 var(--f-body); color: var(--ink); background: var(--paper); border: var(--bw) solid var(--ink); border-radius: var(--r); padding: 12px 14px; } .preview-bar { background: var(--pop-cyan); color: var(--ink); border-bottom: var(--bw) solid var(--ink); padding-block: 10px; font-size: 15px; } .preview-bar a { font-weight: 700; } .article-layout.no-toc { grid-template-columns: minmax(0, 1fr); } .article-layout.no-toc .prose { margin-inline: auto; } .article-meta a { color: inherit; } .author .author-mark { object-fit: cover; } .author-name a { color: inherit; } .post-subscribe { position: relative; background: var(--pop-pink); color: var(--ink); border: var(--bw) solid var(--ink); border-radius: 14px; box-shadow: var(--sh); padding: 24px; margin-top: 2.4em !important; } .post-subscribe h2 { margin: 0; font-size: 28px; } .post-subscribe p { font-size: 17px; line-height: 1.55; margin-top: 8px; } .post-subscribe .nl-form label:not(.hp label) { display: block; font: 800 12px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; margin: 16px 0 8px; } .post-subscribe .nl-row input { flex: 1 1 200px; min-width: 0; font: 400 16px/1 var(--f-body); color: var(--ink); background: var(--paper); border: var(--bw) solid var(--ink); border-radius: var(--r); padding: 12px 14px; } .prose .post-subscribe a { color: var(--ink); } .author-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; } .author-card { display: flex; gap: 14px; align-items: center; background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r); box-shadow: var(--sh-sm); padding: 16px; text-decoration: none; transition: transform .15s ease; } a.author-card:hover { transform: translate(-2px, -2px); box-shadow: var(--sh); } .author-card img, .author-card .author-mark { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; flex-shrink: 0; border: 2px solid var(--line); } .author-card > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .author-card b { font: 800 18px/1.2 var(--f-display); } .author-card small { font-size: 14px; line-height: 1.45; color: var(--muted); } .author-head { display: flex; gap: clamp(20px, 4vw, 40px); align-items: center; flex-wrap: wrap; } .author-photo { width: 140px; height: 140px; border-radius: 24px; object-fit: cover; border: var(--bw) solid var(--ink); box-shadow: var(--sh); flex-shrink: 0; transform: rotate(-2deg); } .author-photo-mono { display: grid; place-items: center; background: var(--ink); color: var(--pop-yellow); font: 800 48px/1 var(--f-mono); } .author-head h1 { font-size: clamp(40px, 6vw, 72px); } .author-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .manage-title { font-size: clamp(36px, 5vw, 56px); margin: 10px 0 8px; } .manage-form { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; } .pref { display: flex; gap: 14px; align-items: flex-start; background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r); padding: 16px 18px; cursor: pointer; } .pref input { width: 24px; height: 24px; margin-top: 2px; accent-color: var(--pop-pink); flex-shrink: 0; } .pref span { display: flex; flex-direction: column; gap: 2px; } .pref b { font: 800 18px/1.2 var(--f-display); } .pref small { color: var(--muted); font-size: 15px; } .flash { border: var(--bw) solid var(--ink); border-radius: var(--r); padding: 12px 16px; color: var(--ink); } .flash-ok { background: var(--pop-lime); } .lost-code-sm { font-size: clamp(90px, 14vw, 150px); } .err-detail { max-width: 100%; overflow-x: auto; background: var(--surface); border: 2px dashed var(--line); padding: 14px; font: 12px/1.5 var(--f-mono); margin-top: 20px; } /* callout: note */ .callout-note { box-shadow: 5px 5px 0 var(--pop-cyan); } .callout-note .callout-tag { background: var(--pop-cyan); color: var(--ink); } .prose .figure img, .prose > p > img { max-width: 100%; height: auto; border: var(--bw) solid var(--line); border-radius: var(--r); box-shadow: var(--sh-sm); } .math-block .katex { font-size: 1em; } /* highlight.js tokens, matching the hand-tagged palette */ .hljs-keyword, .hljs-built_in, .hljs-literal, .hljs-selector-tag, .hljs-meta .hljs-keyword { color: #FF79B8; } .hljs-title, .hljs-title.function_, .hljs-title.class_, .hljs-section { color: #2EE6D6; } .hljs-number, .hljs-symbol, .hljs-variable.constant_ { color: #FFE14D; } .hljs-string, .hljs-regexp, .hljs-attr, .hljs-template-string { color: #B6FF3B; } .hljs-comment, .hljs-quote { color: #8E859C; font-style: italic; } .hljs-params { color: #EDE6F5; } .hljs-type, .hljs-attribute, .hljs-property { color: #C4B5FD; } .cover-band { padding-right: 96px; }