/* * blog.css - shared stylesheet for the static MulePrep blog. * * SOURCE OF TRUTH: the brand tokens below mirror DESIGN.md (the documented * brand-constant "tooling mirror"). The blog pages are static HTML served from * /public and are NOT processed by the app's Tailwind/runtime-theme pipeline, * so the values are restated here as plain CSS. If the brand palette changes, * update DESIGN.md / ui/src/lib/theme/presets/muleprep.ts AND this file. * * LIGHT-ONLY BY DESIGN: the app themes its color tokens at runtime (a .dark * cascade + ThemePicker stored in localStorage). A static page can't read that * choice, and a prefers-color-scheme page would desync from the user's in-app * theme. So the blog is intentionally a single, calm, light reading surface. * * Separator style: " - " (hyphen), never an em dash (repo house style). * * The Plus Jakarta Sans webfont is loaded via a in each * page (NOT an @import here) so the font CSS fetches in parallel with * this file instead of being discovered only after it parses. */ :root { /* Brand palette (light) - mirrors DESIGN.md */ --bg: #faf9f5; /* cream paper */ --ink: #45413b; /* warm ink (body) */ --muted: #6b655d; /* muted ink (captions) */ --primary: #e16540; /* highlighter orange */ --primary-ink: #ffffff; --panel: #ffffff; /* raised panel (cards) */ --panel-soft: #f3efe7; /* soft panel (hover, code) */ --border: #e8e3da; /* hairline */ --ok: #2e9e6a; /* status green (callouts) */ --radius-sm: 7px; --radius-md: 10px; --radius-lg: 14px; --shadow-sm: 0 1px 3px hsl(20 30% 15% / 0.08), 0 1px 2px -1px hsl(20 30% 15% / 0.06); --shadow-md: 0 4px 8px -1px hsl(20 30% 15% / 0.1), 0 2px 4px -2px hsl(20 30% 15% / 0.06); --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; --measure: 42rem; /* ~68ch reading measure */ --shell: 64rem; /* header/footer inner width */ } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background-color: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 1.125rem; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } a:hover { text-decoration-thickness: 2px; } :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-sm); } img { max-width: 100%; height: auto; } /* ── Site header ───────────────────────────────────────────────── */ .site-header { border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 85%, transparent); position: sticky; top: 0; z-index: 10; backdrop-filter: saturate(1.1) blur(8px); } .site-header__inner { max-width: var(--shell); margin: 0 auto; padding: 0.85rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .brand { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 700; font-size: 1.1rem; color: var(--ink); text-decoration: none; } .brand img { width: 1.6rem; height: 1.6rem; } .site-header__nav { display: flex; align-items: center; gap: 1.25rem; } .site-header__nav a { color: var(--muted); text-decoration: none; font-size: 0.95rem; font-weight: 500; } .site-header__nav a:hover { color: var(--ink); } /* ── Buttons / CTAs ────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: 0.95rem; border-radius: var(--radius-md); padding: 0.55rem 1.05rem; text-decoration: none; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease; } .btn--primary { background: var(--primary); color: var(--primary-ink); border: 1px solid color-mix(in srgb, var(--primary) 70%, #000 10%); box-shadow: var(--shadow-sm); } .btn--primary:hover { background: color-mix(in srgb, var(--primary) 94%, #000); } .btn--primary:active { transform: translateY(1px); } .btn--ghost { color: var(--ink); border: 1px solid var(--border); background: var(--panel); } .btn--ghost:hover { background: var(--panel-soft); } /* ── Article ───────────────────────────────────────────────────── */ .article { max-width: var(--measure); margin: 0 auto; padding: 2.5rem 1.5rem 4rem; } .breadcrumb { font-size: 0.85rem; color: var(--muted); margin-bottom: 1.25rem; } .breadcrumb a { color: var(--muted); } .breadcrumb a:hover { color: var(--ink); } .eyebrow { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.75rem; } .article h1 { font-size: clamp(2rem, 5vw, 2.85rem); line-height: 1.12; letter-spacing: -0.02em; font-weight: 800; margin: 0 0 0.75rem; text-wrap: balance; } .byline { color: var(--muted); font-size: 0.95rem; margin: 0 0 1.75rem; } .article h2 { font-size: clamp(1.45rem, 3vw, 1.8rem); line-height: 1.2; letter-spacing: -0.015em; font-weight: 700; margin: 2.75rem 0 1rem; scroll-margin-top: 5rem; } .article h3 { font-size: 1.2rem; line-height: 1.3; font-weight: 700; margin: 1.85rem 0 0.6rem; } .article p { margin: 0 0 1.15rem; } .lede { font-size: 1.2rem; color: var(--ink); margin-bottom: 1.75rem; } .article ul, .article ol { margin: 0 0 1.25rem; padding-left: 1.4rem; } .article li { margin: 0.4rem 0; } .article strong { font-weight: 700; } .article figure { margin: 2rem 0; } .article figure img { width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-sm); } .article figure.hero img { aspect-ratio: 16 / 9; object-fit: cover; } .article figcaption { font-size: 0.85rem; color: var(--muted); margin-top: 0.55rem; text-align: center; } /* Inline code + blocks */ .article code { font-family: var(--font-mono); font-size: 0.9em; background: var(--panel-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.1em 0.35em; } .article pre { background: var(--panel-soft); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1rem 1.1rem; overflow-x: auto; font-size: 0.92rem; line-height: 1.55; margin: 0 0 1.5rem; } .article pre code { background: none; border: none; padding: 0; } /* Table of contents */ .toc { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.1rem 1.35rem; margin: 0 0 2rem; } .toc p { margin: 0 0 0.6rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .toc ol { margin: 0; padding-left: 1.2rem; } .toc li { margin: 0.35rem 0; } .toc a { color: var(--ink); text-decoration: none; } .toc a:hover { color: var(--primary); text-decoration: underline; } /* Callout */ .callout { background: var(--panel-soft); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.1rem 1.35rem; margin: 1.75rem 0; } .callout p:last-child { margin-bottom: 0; } .callout strong { color: var(--ink); } /* Comparison table */ .article table { width: 100%; border-collapse: collapse; margin: 0 0 1.75rem; font-size: 0.98rem; } .article th, .article td { border: 1px solid var(--border); padding: 0.6rem 0.8rem; text-align: left; vertical-align: top; } .article th { background: var(--panel-soft); font-weight: 600; } /* Inline CTA inside the article flow */ .cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.1rem 1.35rem; margin: 2rem 0; box-shadow: var(--shadow-sm); } .cta p { margin: 0; flex: 1 1 16rem; color: var(--ink); font-weight: 500; } /* FAQ */ .faq h2 { margin-bottom: 1.25rem; } .faq__item { border-top: 1px solid var(--border); padding: 1.1rem 0; } .faq__item:last-child { border-bottom: 1px solid var(--border); } .faq__item h3 { margin: 0 0 0.4rem; font-size: 1.08rem; } .faq__item p { margin: 0; color: var(--ink); } /* Final CTA */ .cta-final { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.85rem 1.6rem; margin: 3rem 0 1rem; text-align: center; box-shadow: var(--shadow-md); } .cta-final h2 { margin: 0 0 0.5rem; font-size: 1.5rem; } .cta-final p { margin: 0 0 1.25rem; color: var(--muted); } /* Related */ .related { margin-top: 3rem; border-top: 1px solid var(--border); padding-top: 1.5rem; } .related p { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.75rem; } .related ul { list-style: none; margin: 0; padding: 0; } .related li { margin: 0.5rem 0; } /* ── Blog index ────────────────────────────────────────────────── */ .index-hero { max-width: var(--shell); margin: 0 auto; padding: 3rem 1.5rem 1rem; } .index-hero h1 { font-size: clamp(2rem, 5vw, 2.85rem); line-height: 1.12; letter-spacing: -0.02em; font-weight: 800; margin: 0 0 0.75rem; text-wrap: balance; } .index-hero p { color: var(--muted); font-size: 1.15rem; max-width: 46rem; margin: 0; } .post-grid { max-width: var(--shell); margin: 0 auto; padding: 2rem 1.5rem 4rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 1.25rem; } .post-card { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.4rem; text-decoration: none; color: var(--ink); transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease; } .post-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--ink) 20%, var(--border)); box-shadow: var(--shadow-md); } .post-card .tag { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.6rem; } .post-card h2 { font-size: 1.2rem; line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 0.55rem; font-weight: 700; } .post-card p { margin: 0 0 1rem; color: var(--muted); font-size: 0.98rem; } .post-card .meta { margin-top: auto; font-size: 0.85rem; color: var(--primary); font-weight: 600; } /* ── Footer ────────────────────────────────────────────────────── */ .site-footer { border-top: 1px solid var(--border); background: var(--panel-soft); } .site-footer__inner { max-width: var(--shell); margin: 0 auto; padding: 2.5rem 1.5rem; } .site-footer__links { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-bottom: 1.25rem; } .site-footer__links a { color: var(--muted); text-decoration: none; font-size: 0.92rem; } .site-footer__links a:hover { color: var(--ink); } .site-footer__disclaimer { color: var(--muted); font-size: 0.82rem; max-width: 48rem; margin: 0; } @media (max-width: 640px) { body { font-size: 1.05rem; } .site-header__nav { gap: 0.85rem; } .site-header__nav .hide-sm { display: none; } }