/* Blog / article styles. Loaded AFTER /styles.css, which supplies the shared * tokens (--fg / --mute / --accent / --line), the body reset, .topbar, * .open-app-link and footer look. Everything here is scoped to body.blog or to * blog-only classes, so the landing page is untouched. * * Mobile-first: base rules target phones, the single @media(min-width:720px) * block scales type up for desktop. * * styles.css keeps `body { opacity: 0 }` until script.js adds `.ready`. Blog * pages deliberately ship no script.js (it would rewrite from * localStorage and fight the per-article lang), so the fade-in is replaced by * this always-visible rule. Class selector beats the bare element selector, so * load order does not matter. */ body.blog{opacity:1;max-width:820px;padding-bottom:40px} .blog-topbar{border-bottom:1px solid var(--line);margin-bottom:8px} .site-logo{color:var(--fg);font-weight:700;font-size:1.05rem;letter-spacing:-0.01em;text-decoration:none} .site-logo:hover{color:var(--accent)} /* --- Article shell --------------------------------------------------- */ .article{padding:20px 0 8px} .article-head{margin-bottom:26px} .article-kicker{font-size:.85rem;margin-bottom:14px} .article-kicker a{color:var(--mute);text-decoration:none;border-bottom:1px solid var(--line)} .article-kicker a:hover{color:var(--accent);border-bottom-color:var(--accent)} .article-head h1{font-size:1.85rem;line-height:1.18;letter-spacing:-0.015em;margin-bottom:12px} .article-meta{color:var(--mute);font-size:.9rem} /* ~68ch keeps a line at 9-12 words, the range that reads fastest. */ .article-body{max-width:68ch;font-size:1.06rem;line-height:1.65} .article-body>*+*{margin-top:18px} .article-body h2{font-size:1.35rem;line-height:1.25;letter-spacing:-0.01em;margin:36px 0 0} .article-body h3{font-size:1.08rem;margin:28px 0 0} .article-body h2+p,.article-body h3+p,.article-body h2+ul,.article-body h3+ul{margin-top:12px} .article-body a{color:var(--accent)} .article-body strong{font-weight:650} .article-body code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;background:#f4f4f5;border-radius:4px;padding:1px 5px} .article-body ul,.article-body ol{padding-left:22px} .article-body li+li{margin-top:8px} /* Blockquotes carry example sentences, not asides, so they stay full-contrast * and get the accent rule rather than the muted grey one. */ .article-body blockquote{border-left:3px solid var(--accent);padding:2px 0 2px 16px;font-size:1.05em} .article-body blockquote+p{margin-top:10px;color:var(--mute)} .article-body blockquote+p strong{color:var(--fg)} .article-body hr{border:0;border-top:1px solid var(--line);margin:32px 0} /* Tables scroll inside their own box so a wide form table never makes the * whole page scroll sideways on a phone. */ .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} .article-body table{border-collapse:collapse;width:100%;min-width:340px;font-size:.98rem} .article-body th,.article-body td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line)} .article-body th{font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;color:var(--mute);font-weight:600} .article-body tbody tr:last-child td{border-bottom:0} /* --- Practice CTA ----------------------------------------------------- */ /* Visually distinct from the prose: dark card, same slate as the landing's * demo cards, so an article feels like part of the same product. */ /* `.article-body>*+*` (0,1,1) outranks a bare `.cta-practice` (0,1,0), so the * direct-child form is needed for the wider gap above the card to stick. */ .article-body>.cta-practice{margin-top:40px} .cta-practice{margin:40px 0 8px;background:#0f172a;border-radius:14px;padding:26px 22px;color:#e2e8f0} .cta-practice h2{color:#fff;font-size:1.25rem;margin:0 0 10px} .cta-practice p{color:#cbd5e1;font-size:1rem;margin:0 0 18px} .cta-practice-button{display:inline-block;background:#3b82f6;color:#fff;text-decoration:none;font-weight:600;font-size:1.02rem;padding:14px 24px;border-radius:10px;transition:background .15s} .cta-practice-button:hover{background:#60a5fa} .cta-practice-note{color:#94a3b8;font-size:.85rem;margin:14px 0 0} /* --- Index ------------------------------------------------------------ */ .blog-index .article-meta{max-width:60ch;line-height:1.55} .post-list{list-style:none;padding:0;margin-top:8px} .post-item{padding:22px 0;border-bottom:1px solid var(--line)} .post-item:last-child{border-bottom:0} .post-date{color:var(--mute);font-size:.85rem;margin-bottom:6px} .post-item h2{font-size:1.25rem;line-height:1.3;margin-bottom:6px} .post-item h2 a{color:var(--fg);text-decoration:none} .post-item h2 a:hover{color:var(--accent)} .post-desc{color:var(--mute);font-size:.98rem;max-width:62ch} body.blog footer{margin-top:36px;border-top:1px solid var(--line)} @media(min-width:720px){ .article-head h1{font-size:2.3rem} .article-body{font-size:1.12rem} .article-body h2{font-size:1.5rem} .cta-practice{padding:32px 30px} }