/* Blog — article. The article column is a deliberately different surface from the rest of the site: gray ground, IBM Plex. Everything here is scoped to .blog-shell so it cannot reach the nav or the footer, which keep shared.css tokens, DM Sans and the #7374ff accent. Loaded after shared.css. */ /* Article column only. The chrome above and below keeps shared.css tokens, DM Sans and the #7374ff accent. Everything here is scoped to .blog-shell. */ .blog-shell { --bg: #1b1b20; --bg-2: #23232a; --bg-3: #2b2b33; --line: #33333d; --line-2: #414150; --ink: #ecedf2; --ink-2: #a8a8b4; --ink-3: #7c7c89; --accent: #8384ff; --accent-2: #a3a4ff; --accent-fill: #5758f0; --on-accent: #fff; --c1: #7c7dfa; --c2: #25a98d; --c3: #c8822e; --good: #4ade80; --warn: #e07a5f; --sans: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.75; position: relative; z-index: 1; } [data-theme="light"] .blog-shell { --bg: #f1f1f4; --bg-2: #ffffff; --bg-3: #e9e9ee; --line: #dedee4; --line-2: #c6c6d0; --ink: #1a1a20; --ink-2: #55555f; --ink-3: #80808d; --accent: #4a4cde; --accent-2: #3a3cc4; --accent-fill: #4547d6; --c1: #5a5ce0; --c2: #0f9e86; --c3: #c9751a; --good: #1d7a57; --warn: #b8462c; } .blog-shell a { color: inherit; text-decoration: none; } .blog-shell .wrap { width: 100%; max-width: 760px; margin: 0 auto; padding-inline: 24px; } .blog-shell .titleband { background: var(--bg-2); border-bottom: 1px solid var(--line); padding: 52px 0 44px; } .blog-shell .kicker { font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 16px; } .blog-shell h1 { font-size: clamp(2rem, 5vw, 2.6rem); font-weight: 600; line-height: 1.12; letter-spacing: -.025em; margin: 0 0 14px; color: var(--ink); text-wrap: balance; } .blog-shell .dek { font-size: 1.08rem; line-height: 1.6; color: var(--ink-2); margin: 0 0 24px; max-width: 42em; } .blog-shell .byline { font-family: var(--mono); font-size: .75rem; color: var(--ink-3); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .blog-shell .byline b { color: var(--ink-2); font-weight: 500; } /* Seam fix. .site-footer ships with no background of its own, so it shows the near-black body through and the gray article ends in a hard step. Carrying the same gray into the footer makes everything below the nav one surface; the divider drops to the gray build's own hairline. */ body[data-page="blog"] { background: #1b1b20; } body[data-page="blog"] .site-footer { background: #1b1b20; border-top-color: #33333d; } [data-theme="light"] body[data-page="blog"], [data-theme="light"] body[data-page="blog"] .site-footer { background: #f1f1f4; } [data-theme="light"] body[data-page="blog"] .site-footer { border-top-color: #dedee4; } /* Image lightbox. Lives here rather than in article.css because the overlay is appended to , outside .blog-shell, so a scoped rule would never match. */ .imglb { position: fixed; inset: 0; z-index: 200; background: rgba(8, 8, 11, 0.93); display: flex; align-items: center; justify-content: center; padding: 40px; cursor: zoom-out; opacity: 0; pointer-events: none; transition: opacity 0.22s ease; } .imglb.open { opacity: 1; pointer-events: auto; } .imglb img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 8px; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65); transform: scale(0.97); transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1); } .imglb.open img { transform: scale(1); } .imglb-close { position: absolute; top: 16px; right: 22px; width: 40px; height: 40px; line-height: 1; font-size: 1.7rem; color: #fff; opacity: 0.65; background: none; border: 0; cursor: pointer; transition: opacity 0.15s; } .imglb-close:hover { opacity: 1; } [data-theme="light"] .imglb { background: rgba(240, 240, 245, 0.95); } [data-theme="light"] .imglb-close { color: #1a1a20; } @media (prefers-reduced-motion: reduce) {.blog-shell * { transition: none !important; } } .blog-shell main { padding: 44px 0 72px; } .blog-shell article p { margin: 0 0 20px; max-width: 66ch; color: var(--ink); } .blog-shell article p.note { font-size: 0.92rem; color: var(--ink-2); } .blog-shell article a:not(.anchor) { color: var(--accent); border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); } .blog-shell article a:not(.anchor):hover { border-bottom-color: currentColor; } .blog-shell strong { font-weight: 600; } .blog-shell h2 { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; color: var(--ink); margin: 52px 0 18px; padding-top: 30px; border-top: 1px solid var(--line); scroll-margin-top: 76px; text-wrap: balance; } .blog-shell .anchor { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: 1px; font-family: var(--mono); font-size: 0.95rem; line-height: 1; color: var(--ink-3); text-decoration: none; vertical-align: middle; opacity: 0; transform: translateX(-6px); transition: opacity 0.26s cubic-bezier(0.4, 0, 0.2, 1), transform 0.26s cubic-bezier(0.4, 0, 0.2, 1), color 0.18s ease; } .blog-shell h2:hover .anchor, .blog-shell h2:focus-within .anchor { opacity: 0.4; transform: translateX(0); } .blog-shell .anchor:hover { opacity: 1; color: var(--accent); } .blog-shell .anchor:focus-visible { opacity: 1; transform: translateX(0); color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 5px; } .blog-shell article > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .blog-shell .anchor.copied { opacity: 1; transform: translateX(0); color: var(--good); width: auto; padding: 0 7px; font-size: 0.7rem; letter-spacing: 0.07em; } .blog-shell ol.reasons { list-style: none; counter-reset: r; margin: 0 0 24px; padding: 0; max-width: 66ch; } .blog-shell ol.reasons li { counter-increment: r; position: relative; padding-left: 42px; margin-bottom: 18px; } .blog-shell ol.reasons li::before { content: counter(r); position: absolute; left: 0; top: 1px; font-family: var(--mono); font-size: 0.82rem; font-weight: 500; color: var(--accent); width: 26px; height: 26px; border-radius: 6px; background: var(--bg-2); display: flex; align-items: center; justify-content: center; } .blog-shell blockquote { margin: 28px 0; padding: 0 0 0 20px; max-width: 56ch; border-left: 2px solid var(--line-2); font-size: 1.05rem; line-height: 1.65; color: var(--ink-2); } .blog-shell figure { margin: 32px 0; } .blog-shell figure img { display: block; width: 100%; max-width: 420px; height: auto; border-radius: 10px; border: 1px solid var(--line); } .blog-shell figure.shot img { max-width: 100%; cursor: zoom-in; transition: border-color 0.18s; } .blog-shell figure.shot img:hover { border-color: var(--line-2); } .blog-shell figure.panelshot { margin: 26px 0; } .blog-shell figure.panelshot img { max-width: 240px; border: 0; border-radius: 0; } .blog-shell .panel { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 20px 20px 14px; position: relative; } .blog-shell .panel-head { font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 16px; } .blog-shell .legend { display: flex; gap: 18px; flex-wrap: wrap; margin: 0 0 14px; } .blog-shell .legend span { display: flex; align-items: center; gap: 7px; font-size: 0.78rem; color: var(--ink-2); } .blog-shell .legend i { width: 9px; height: 9px; border-radius: 50%; display: block; } .blog-shell .scroller { overflow-x: auto; } .blog-shell .chart { display: block; width: 100%; min-width: 580px; height: auto; } .blog-shell .chart text { font-family: var(--mono); } .blog-shell .grid { stroke: var(--line); stroke-width: 1; } .blog-shell .axis { stroke: var(--line-2); stroke-width: 1; } .blog-shell .tick { fill: var(--ink-3); font-size: 11px; } .blog-shell .axis-label { fill: var(--ink-3); font-size: 11.5px; letter-spacing: 0.06em; } .blog-shell .dot { stroke: var(--bg-2); stroke-width: 2; cursor: pointer; } .blog-shell .dot:hover { stroke: var(--ink); } .blog-shell .ref-good { stroke: var(--good); stroke-width: 1.5; stroke-dasharray: 3 4; } .blog-shell .ref-warn { stroke: var(--warn); stroke-width: 1.5; stroke-dasharray: 3 4; } .blog-shell .ref-lab { font-size: 11.5px; font-weight: 600; } .blog-shell .ref-good-t { fill: var(--good); stroke: none; } .blog-shell .ref-warn-t { fill: var(--warn); stroke: none; } .blog-shell .ref-sub { fill: var(--ink-3); font-size: 9.5px; } .blog-shell .tip { position: absolute; pointer-events: none; opacity: 0; z-index: 5; background: var(--bg-3); border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 11px; font-size: 0.74rem; line-height: 1.5; color: var(--ink); white-space: nowrap; transform: translate(-50%, -120%); transition: opacity 0.1s; box-shadow: 0 10px 28px rgba(0,0,0,0.35); } .blog-shell .tip b { font-family: var(--mono); font-weight: 600; } .blog-shell .tip em { font-style: normal; color: var(--ink-3); } .blog-shell .panel-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; } .blog-shell .panel-row .panel-head { margin: 0; } .blog-shell article a.panel-link { font-family: var(--mono); font-size: 0.74rem; border-bottom: 0; } .blog-shell article a.panel-link:hover { text-decoration: underline; } .blog-shell .cmp-wrap { overflow-x: auto; } .blog-shell table.cmp { width: 100%; min-width: 460px; margin: 0; border-collapse: collapse; font-family: var(--sans); font-size: 0.86rem; } .blog-shell table.cmp th, .blog-shell table.cmp td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; } .blog-shell table.cmp thead th { font-family: var(--mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); } .blog-shell table.cmp thead th:first-child, .blog-shell table.cmp tbody th { text-align: left; } .blog-shell table.cmp tbody th { font-family: var(--sans); font-size: 0.86rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink); } .blog-shell table.cmp tbody tr:last-child th, .blog-shell table.cmp tbody tr:last-child td { border-bottom: 0; } .blog-shell table.cmp td svg { width: 16px; height: 16px; display: inline-block; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .blog-shell table.cmp td.yes { color: var(--good); } .blog-shell table.cmp td.no { color: var(--ink-3); } .blog-shell table.cmp td.txt { color: var(--ink-2); font-size: 0.8rem; } .blog-shell .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .blog-shell details.numbers { margin-top: 14px; } .blog-shell details.numbers summary { font-size: 0.78rem; color: var(--ink-3); cursor: pointer; } .blog-shell details.numbers summary:hover { color: var(--ink-2); } .blog-shell table { border-collapse: collapse; width: 100%; margin-top: 12px; font-size: 0.8rem; font-family: var(--mono); } .blog-shell th, .blog-shell td { text-align: right; padding: 7px 10px; border-bottom: 1px solid var(--line); } .blog-shell th:first-child, .blog-shell td:first-child { text-align: left; font-family: var(--sans); } .blog-shell th { color: var(--ink-3); font-weight: 500; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; } .blog-shell td { color: var(--ink-2); } .blog-shell td:first-child { color: var(--ink); font-weight: 500; } .blog-shell .endnote { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line); } .blog-shell .endnote p { font-size: 0.82rem; line-height: 1.65; color: var(--ink-3); margin: 0; max-width: 70ch; } @media (max-width: 680px) {.blog-shell body { font-size: 16px; } .blog-shell .topbar-in { gap: 12px; padding: 0 16px; } .blog-shell .navlinks a { padding: 6px 7px; font-size: 0.8rem; } .blog-shell .wrap { padding-inline: 16px; } .blog-shell .titleband { padding: 34px 0 30px; } .blog-shell h2 { margin-top: 40px; padding-top: 24px; } .blog-shell .panel { padding: 14px 12px 10px; } } .blog-shell .backlink { font-family: var(--mono); font-size: .76rem; color: var(--ink-3); display: inline-block; margin-bottom: 18px; } .blog-shell .backlink:hover { color: var(--ink-2); }