/* 2muchcoffee blog, on the 2MC Redesign 2026 design system (light half). Token values are the Figma export in 2muchcoffee_site/design-system/tokens.md. Plain CSS on purpose: Ghost serves this file directly, so there is no build step, no node_modules and no committed artifact that can drift from source. */ :root{ --bg-base:#FFFFFF; --bg-subtle:#FAFAFA; --bg-elevated:#FFFFFF; --bg-inverse:#0E0E11; --text-primary:#17171B; --text-secondary:#55555E; --text-muted:#6F6F79; --text-inverse:#FFFFFF; --border-subtle:#E4E4E8; --border-strong:#C9C9D0; --border-interactive:#74747F; --accent:#6B35E0; --accent-hover:#5A28C4; --accent-subtle:#F4F0FE; --on-accent:#FFFFFF; --danger:#C5221F; /* the redesign's inverted pill: dark on the light ground, the mirror of the white pill it uses on the dark ground */ --invert-bg:#17171B; --invert-ink:#FFFFFF; --glow:#6B35E0; --sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --measure:640px; --pad:20px; --rail:220px; } /* The redesign insets from the viewport edge and never caps a container, so the chrome is full-bleed and only the article keeps a measure. Scale copied from --pad-x in redesign-shared/_rd-shared.scss. */ @media (min-width:768px){ :root{ --pad:40px } } /* ---------- dark theme ---------- Light is the default and dark is strictly opt-in, because the marketing site is white: an OS-dark reader following prefers-color-scheme would get a dark blog hanging off a light site. So there is deliberately NO prefers-color-scheme block here. Dark applies only when the reader has chosen it and the choice is stamped on . Values are Andrii's dark column, verbatim. */ :root[data-theme="dark"]{ --bg-base:#0E0E11; --bg-subtle:#17171B; --bg-elevated:#1E1E23; --bg-inverse:#FFFFFF; --text-primary:#FFFFFF; --text-secondary:#9E9EA8; --text-muted:#8A8A94; --text-inverse:#0E0E11; --border-subtle:#26262C; --border-strong:#3C3C44; --border-interactive:#74747F; --accent:#7C4DEE; --accent-hover:#6B35E0; --accent-subtle:#250F4F; --on-accent:#FFFFFF; --danger:#FF6B6B; --invert-bg:#FFFFFF; --invert-ink:#17171B; --glow:#9979EE; } :root{color-scheme:light} :root[data-theme="dark"]{color-scheme:dark} /* the toggle itself */ .thm{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none; padding:0;border:1px solid var(--border-subtle);border-radius:999px;background:transparent; color:var(--text-primary);cursor:pointer;transition:border-color .15s ease} .thm:hover{border-color:var(--border-strong)} .thm svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round} .thm .thm__moon{display:none} :root[data-theme="dark"] .thm .thm__sun{display:none} :root[data-theme="dark"] .thm .thm__moon{display:block} @media (min-width:1024px){ :root{ --pad:60px } } @media (min-width:1440px){ :root{ --pad:80px } } *,*::before,*::after{box-sizing:border-box} html{scroll-padding-top:88px} body{margin:0;background:var(--bg-base);color:var(--text-primary); font:400 17px/25.5px var(--sans);-webkit-font-smoothing:antialiased} img{max-width:100%;height:auto} a{color:inherit;text-decoration-color:var(--border-strong);text-underline-offset:3px} a:hover{text-decoration-color:var(--accent)} :focus-visible{outline:2px solid var(--accent);outline-offset:3px} .skip-link{position:absolute;left:-9999px} .skip-link:focus{left:16px;top:16px;z-index:100;background:var(--bg-inverse);color:var(--text-inverse); padding:12px 18px;border-radius:8px;text-decoration:none} .eyebrow{font:500 12px/14.6px var(--sans);letter-spacing:.72px;text-transform:uppercase;color:var(--text-muted)} /* Button, mapped to the system's Primary / Accent / Secondary variants */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px; border:1px solid transparent;border-radius:8px;font:500 16px/24px var(--sans);text-decoration:none; white-space:nowrap;cursor:pointer;transition:background .15s ease,border-color .15s ease} .btn--primary{background:var(--invert-bg);color:var(--invert-ink)} .btn--primary:hover{opacity:.88} .btn--accent{background:var(--accent);color:var(--on-accent)} .btn--accent:hover{background:var(--accent-hover)} .btn--secondary{color:var(--text-primary);border-color:var(--border-interactive)} .btn--s{font:600 14px/19.6px var(--sans);padding:8px 14px} /* ---------- announce bar + header, ported from the redesign ---------- */ .an{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap; padding:16px var(--pad);font-size:14px} @media (min-width:450px){.an{font-size:16px}} .an__dot{color:var(--text-muted)} .an__link{color:var(--text-secondary)} .an__arrow{display:none;align-items:center;justify-content:center;width:67px;height:44px; border-radius:999px;background:var(--invert-bg);flex:none} @media (min-width:450px){.an__arrow{display:inline-flex}} .an__arrow svg{width:17px;height:17px;fill:none;stroke:var(--invert-ink);stroke-width:2; stroke-linecap:round;stroke-linejoin:round} .an__arrow:hover{opacity:.88} .an__glow{height:7px;margin:0 auto;max-width:826px;filter:blur(2px); background:linear-gradient(90deg,transparent,var(--glow),transparent)} .hdr{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:22px var(--pad)} .hdr__brand{display:inline-flex;align-items:center;gap:9px;min-height:51px;padding:11px 16px; border:1px solid var(--border-subtle);border-radius:999px;text-decoration:none; color:var(--text-primary);transition:border-color .18s ease;flex:none} .hdr__brand:hover{border-color:var(--border-strong)} .hdr__mark{width:27px;height:20px;flex:none;color:var(--text-primary)} .hdr__name{font-size:13px;letter-spacing:.02em} .hdr__name b{font-weight:700} .hdr__nav{display:none;align-items:center;gap:6px;min-height:51px;padding:5px 10px; border:1px solid var(--border-subtle);border-radius:999px} @media (min-width:1280px){.hdr__nav{display:flex}} .hdr__link{padding:7px 17px;border-radius:999px;font-size:16px;color:var(--text-secondary);text-decoration:none} .hdr__link:hover{color:var(--text-primary);background:var(--bg-subtle)} .hdr__link.is-current{color:var(--text-primary)} .hdr__burger{display:inline-flex;align-items:center;justify-content:center;margin-left:auto; width:51px;height:51px;flex:none;padding:0;border:1px solid var(--border-subtle); border-radius:999px;background:transparent;color:var(--text-primary);cursor:pointer} .hdr__burger:hover{border-color:var(--border-strong)} @media (min-width:1280px){.hdr__burger{display:none}} /* three bars from one element: the middle is the box, the outer two are pseudo-elements, so the X is a transform rather than a second icon */ .hdr__bars{position:relative;display:block;width:18px;height:1.5px;background:currentColor; transition:background-color .18s ease} .hdr__bars::before,.hdr__bars::after{content:'';position:absolute;left:0;width:100%;height:1.5px; background:currentColor;transition:transform .22s cubic-bezier(.33,1,.68,1)} .hdr__bars::before{top:-6px} .hdr__bars::after{top:6px} .hdr__bars.is-x{background:transparent} .hdr__bars.is-x::before{transform:translateY(6px) rotate(45deg)} .hdr__bars.is-x::after{transform:translateY(-6px) rotate(-45deg)} .hdr__cta{display:none;min-height:44px} @media (min-width:450px){.hdr__cta{display:inline-flex}} @media (min-width:1280px){.hdr__cta{margin-left:auto}} .hdr__menu{display:none;flex-basis:100%;flex-direction:column;margin-top:14px;padding:8px; border:1px solid var(--border-subtle);border-radius:20px;background:var(--bg-subtle)} .hdr__menu.is-open{display:flex} @media (min-width:1280px){.hdr__menu{display:none !important}} .hdr__menu-link{padding:13px 16px;border-radius:12px;font-size:17px; color:var(--text-secondary);text-decoration:none} .hdr__menu-link:hover{color:var(--text-primary);background:var(--bg-elevated)} @media (min-width:450px){.hdr__menu-link--contact{display:none}} @media (prefers-reduced-motion:reduce){.hdr__bars,.hdr__bars::before,.hdr__bars::after{transition:none}} /* ---------- article ---------- */ .post{max-width:calc(var(--measure) + var(--pad) * 2);margin:0 auto; padding:48px var(--pad) 96px;position:relative} .post__kicker{display:inline-block;text-decoration:none;margin-bottom:12px} .post__title{margin:0 0 16px;font:400 40px/44px var(--sans);letter-spacing:-.01em;text-wrap:balance} @media (min-width:768px){.post__title{font-size:48px;line-height:57.6px}} .post__dek{margin:0 0 28px;font:400 20px/30px var(--sans);color:var(--text-secondary);max-width:34em} .post__byline{display:flex;align-items:center;gap:14px;flex-wrap:wrap; padding:16px 0;border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)} .post__avatar{width:44px;height:44px;border-radius:50%;flex:none;object-fit:cover} .post__avatar--initials{display:grid;place-items:center;background:var(--accent-subtle); color:var(--accent);font:600 14px var(--sans);text-transform:uppercase} .post__who{display:grid;line-height:1.35} .post__author{font:500 16px/24px var(--sans)} .post__role{font:400 14px/21px var(--sans);color:var(--text-secondary)} .post__dates{margin-left:auto;font:400 14px/21px var(--sans);color:var(--text-muted);display:grid;text-align:right} .post__updated{color:var(--text-secondary)} .post__hero{margin:28px 0 8px} .post__hero img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;background:var(--bg-subtle)} .post__hero figcaption{margin-top:10px;font:400 14px/21px var(--sans);color:var(--text-muted)} /* ---------- post body: the .post-full-content contract ---------- */ .post-full-content{padding-top:20px} .post-full-content > *{max-width:100%} .post-full-content p{margin:0 0 18px;max-width:600px} .post-full-content h2{margin:52px 0 14px;font:500 28px/36.4px var(--sans);text-wrap:balance;scroll-margin-top:88px} .post-full-content h3{margin:36px 0 12px;font:500 22px/28.6px var(--sans)} .post-full-content ul,.post-full-content ol{margin:0 0 18px;padding-left:22px;max-width:600px} .post-full-content li{margin-bottom:8px} .post-full-content a{color:var(--accent);text-decoration-color:var(--accent)} .post-full-content strong{font-weight:500} .post-full-content img{border-radius:12px} .post-full-content figcaption{margin-top:10px;font:400 14px/21px var(--sans);color:var(--text-muted);text-align:center} .post-full-content blockquote{margin:30px 0;padding:20px 24px;background:var(--accent-subtle); border-radius:12px;font:500 20px/30px var(--sans)} .post-full-content blockquote p{margin:0;max-width:none} .post-full-content hr{border:0;border-top:1px solid var(--border-subtle);margin:40px 0} .post-full-content mark{background:var(--accent-subtle);color:var(--accent)} .post-full-content code{font:14px/1.5 var(--mono);background:var(--bg-subtle); border:1px solid var(--border-subtle);border-radius:5px;padding:2px 6px} .post-full-content pre{background:var(--bg-inverse);color:var(--text-inverse);padding:18px 20px; border-radius:12px;overflow-x:auto;font:13px/1.7 var(--mono)} .post-full-content pre code{background:none;border:0;padding:0;color:inherit} /* Archive embeds. 21 posts carry iframes. On prod today their stored HTML puts bare iframes as direct children of .post-full-content, so `> *{max-width:100%}` catches them; the moment anyone re-saves such a post Ghost re-renders it inside a .kg-embed-card figure and the cap stops applying. This is the latent-overflow guard. The 16/9 ratio is scoped to video/gif hosts on purpose: applying it to every .kg-embed-card iframe crushes the three SlideShare decks from 485px tall to 152px. */ .post-full-content iframe{max-width:100%} .post-full-content .kg-embed-card iframe[src*="youtube.com"], .post-full-content .kg-embed-card iframe[src*="youtube-nocookie.com"], .post-full-content .kg-embed-card iframe[src*="giphy.com"]{width:100%;height:auto;aspect-ratio:16/9} /* 60 pull-quotes across 42 posts (the whole 2026 cohort) carry an inline color:#1f2937, which lands on --accent-subtle #250F4F in dark at 1.14:1. Only the colour is forced: 543 of the archive's 603 blockquotes carry no inline style and already read 16.67:1, so stripping the background would flatten 141 posts to rescue 42. */ :root[data-theme="dark"] .post-full-content blockquote{color:var(--text-primary)!important} /* Tables: solved HERE so post-level cards stop paying 32 !important each to escape a theme rule. The wrapper scrolls, so the page body never does. */ .post-full-content table{width:100%;border-collapse:collapse;font-size:16px;display:block;overflow-x:auto} .post-full-content table th,.post-full-content table td{ padding:12px 14px;text-align:left;vertical-align:top;white-space:normal; border-bottom:1px solid var(--border-subtle)} .post-full-content table th{font-weight:500;background:var(--bg-subtle)} /* FAQ: ships open so the answer is in the rendered text, not behind a toggle */ /* ---------- neutralising the site-wide code injection ---------- Production's Ghost code injection carries casper-era CSS, and default.hbs puts {{ghost_head}} (line 23) AFTER this stylesheet (line 19) by Ghost's own convention, so on equal specificity the injection wins. Casper set html{font-size:62.5%}, making 1rem = 10px; this theme does not, so those rem values inflate by 1.6x the moment the theme is activated. Measured on a local copy of the live injection: h2 renders 49.6px inside a 36.4px line box, which overlaps glyphs on every two-line heading in all 283 archive posts. Each selector below is the injection's own selector plus a `body` prefix, which raises it by one element and wins without !important. Nothing here changes what the theme looks like on its own; remove the injection and every one of these is a no-op restating the rule directly above it. DELIBERATELY NOT NEUTRALISED, do not "finish" this list: h3 u, h3 u:hover, .post-full-content li u, .post-full-content li a:hover 78% of sampled posts use inside headings and list items and rely on these to suppress the underline. Overriding them restores browser-default underlines across most of the archive. .post-header .post-title, .post-content p, .post-full-content .nft img dead casper selectors that match nothing this theme renders. Rejected alternative 1: html{font-size:62.5%}. The theme uses zero rem (checked: 0 occurrences), so it would be side-effect free and would restore 3.1rem to 31px. It also hands the archive's whole type scale back to the injection, which is the casper scale, not this one. Rejected alternative 2: moving the stylesheet below {{ghost_head}}. That wins by source order with no specificity games, but it silently disables ALL future code injection CSS site-wide, not just these eight stale declarations. */ body .post-full-content h2{font-size:28px;line-height:36.4px;padding-bottom:0} body .post-full-content h3{font-size:22px;line-height:28.6px;font-weight:500;padding-top:0} body .post-full-content blockquote{font-size:20px;line-height:30px} body .post-full-content{padding-bottom:0} body .post-full-content ul{padding-left:22px} body .post-full-content a:hover{color:var(--accent)} .post-full-content details{border-bottom:1px solid var(--border-subtle)} .post-full-content summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between; align-items:center;gap:16px;padding:16px 0;font:500 20px/30px var(--sans)} .post-full-content summary::-webkit-details-marker{display:none} .post-full-content summary::after{content:"+";flex:none;width:28px;height:28px;border-radius:50%; border:1px solid var(--border-interactive);display:grid;place-items:center;font:400 18px/1 var(--sans);color:var(--text-muted)} .post-full-content details[open] summary::after{content:"\2212";background:var(--accent-subtle); color:var(--accent);border-color:transparent} /* ---------- sticky scroll-spy rail ---------- */ .post__rail{display:none} @media (min-width:1320px){ /* Raised from 1180: .post is now 640 + 2*--pad wide, so below 1320 the rail's -260px offset ran off the left edge. The rail is an inert duplicate of the in-body list, so hiding it early costs nothing. top:48px matched .post's padding-top, but height:100% then measured the FULL container from that offset, so the rail overhung its own article by 48px and the sticky child rode down over the footer. Anchoring top AND bottom lets the height compute, so the rail can never outlast the article it belongs to. */ .post__rail{display:block;position:absolute;top:48px;bottom:96px; left:calc(var(--rail) * -1 - 40px);width:var(--rail)} .post__rail-in{position:sticky;top:88px} .post .toc{display:grid;gap:2px;margin-top:12px;border-left:2px solid var(--border-subtle)} .post .toc a{display:block;padding:5px 0 5px 12px;margin-left:-2px;border-left:2px solid transparent; font:400 14px/19.6px var(--sans);color:var(--text-secondary);text-decoration:none} .post .toc a:hover{color:var(--text-primary)} .post .toc a.is-current{color:var(--accent);font-weight:500;border-left-color:var(--accent)} } /* ---------- author card ---------- */ .au{display:grid;grid-template-columns:56px 1fr;gap:16px;align-items:start;margin-top:48px; padding:22px;background:var(--bg-subtle);border:1px solid var(--border-subtle);border-radius:12px} .au__avatar{width:56px;height:56px;border-radius:50%;object-fit:cover} .au__avatar--initials{display:grid;place-items:center;background:var(--accent-subtle); color:var(--accent);font:600 16px var(--sans);text-transform:uppercase} .au__name{font:500 20px/30px var(--sans)} .au__role{margin:2px 0 8px} .au__link{font-size:14px;color:var(--accent)} /* 38 of 282 published posts close with their own inline person card (.tmc-au, authored into the body). On those the theme's card is a duplicate; on the other 244 it is the only author attribution there is. :has() suppresses the theme card only where the body already provides one, and degrades to showing both, which is untidy rather than broken. */ .post-full-content:has(.tmc-au) + .au{display:none} /* ---------- reveal on scroll ---------- Guard 1: nothing hides until the script confirms it runs, so a stripped or failed script leaves a plain readable article. Guard 2: reduced motion wins. Guard 3: opacity and transform only, so nothing reflows. */ html.js-ready .rv{opacity:0;transform:translateY(18px); /* was .5s ease, which decelerates too late and reads as a pop. This curve is nearly all deceleration, so the block arrives rather than snaps. The script adds a small per-item delay so a batch crossing together does not flash. */ transition:opacity .62s cubic-bezier(.22,1,.36,1),transform .62s cubic-bezier(.22,1,.36,1)} html.js-ready .rv.in{opacity:1;transform:none} /* cards carry a touch more travel, since they are larger objects */ html.js-ready .card.rv{transform:translateY(24px) scale(.995)} html.js-ready .card.rv.in{transform:none} @media (prefers-reduced-motion:reduce){ .rv{opacity:1 !important;transform:none !important;transition:none !important} } /* ---------- index ---------- */ .feed{padding:48px var(--pad) 80px; display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))} .card{display:grid;gap:10px;text-decoration:none;padding:20px;border:1px solid var(--border-subtle); border-radius:12px;background:var(--bg-elevated);transition:border-color .15s ease} .card:hover{border-color:var(--border-interactive)} .card__img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;background:var(--bg-subtle)} .card__title{font:500 20px/30px var(--sans);text-wrap:balance} .card__excerpt{font:400 16px/24px var(--sans);color:var(--text-secondary)} .card__meta{font:500 12px/14.6px var(--sans);letter-spacing:.72px;text-transform:uppercase;color:var(--text-muted)} /* ---------- contact form, matched to the redesign's .rd__form-embed ---------- Same shape as the Angular one: a 40px-radius bordered card sitting on the subtle band, the form on the left and "What's next" on the right behind a hairline divider, 12px fields on --bg-subtle, and the inverted pill submit. One deliberate divergence. The redesign keeps a floating faux-placeholder label because the Angular component is shared and JS-driven, so they could only restyle it. Nothing constrains us here, and a placeholder standing in for a label disappears the moment someone types, so these are real