@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Instrument+Serif&family=JetBrains+Mono&display=swap'); /* Design tokens — mirror the main app (frontend/styles.css) so the blog looks like part of the site and follows the SAME light/dark theme. /theme.js sets from the shared localStorage key, flipping these. */ :root { --bg:#f7f4ed; --bg-tint:#efeadd; --card:#ffffff; --card-2:#fbf8f1; --ink:#161210; --ink-2:#33302c; --ink-3:#7a6f64; --ink-4:#a89c8b; --line:#e6dfcf; --line-2:#ede6d4; --accent:#a8472b; --code-bg:#161210; --code-ink:#f2ede3; --shadow-pop:0 8px 28px -8px rgba(22,18,16,.18); /* aliases kept so existing selectors below need no renaming */ --muted:var(--ink-3); --paper:var(--bg); color-scheme:light; } [data-theme="dark"] { --bg:#100d0b; --bg-tint:#181412; --card:#1a1614; --card-2:#221d1a; --ink:#f5efe3; --ink-2:#d6cec0; --ink-3:#8a7f72; --ink-4:#5c5249; --line:#2a2420; --line-2:#1f1a17; --accent:#e6815f; --code-bg:#0a0807; --code-ink:#f2ede3; --shadow-pop:0 12px 32px -8px rgba(0,0,0,.6); color-scheme:dark; } * { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--ink); font-family:"DM Sans",ui-sans-serif,system-ui,sans-serif; -webkit-font-smoothing:antialiased; } /* ---- top bar (mirrors the main site's sticky header) ---- */ .topbar { display:flex; align-items:center; gap:18px; padding:14px 28px; border-bottom:1px solid var(--line); background:var(--bg); position:sticky; top:0; z-index:20; } .topbar .brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-family:"Instrument Serif",serif; font-size:22px; font-weight:400; letter-spacing:-0.22px; } .topbar .brand .pearl-orb { width:26px; height:26px; border-radius:999px; display:block; flex:none; background:radial-gradient(circle at 32% 28%, #ffffff 0%, #ffeef3 18%, #ffd9e6 32%, #d4e2ff 55%, #c9f0d8 78%, #ffe1a8 100%); box-shadow: inset -2px -3px 6px rgba(120,80,100,0.22), inset 2px 2px 4px rgba(255,255,255,0.9), 0 1px 2px rgba(0,0,0,0.08); } .topbar .brand .word { line-height:1; } .topbar .brand .sub { font-family:"JetBrains Mono",monospace; font-size:10px; font-weight:400; letter-spacing:0.8px; text-transform:uppercase; padding:3px 6px; border:1px solid var(--line); border-radius:4px; color:var(--ink-3); } .topbar .nav { display:flex; gap:2px; margin-left:6px; padding:4px; background:var(--bg-tint); border:1px solid var(--line); border-radius:999px; } .topbar .nav a { padding:7px 16px; border-radius:999px; font-size:13px; font-weight:500; color:var(--ink-3); text-decoration:none; transition:all .15s; } .topbar .nav a:hover { color:var(--ink); } .topbar .nav a.active { background:var(--ink); color:var(--bg); } .topbar .spacer { flex:1; } .topbar .theme-toggle { width:36px; height:36px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--ink-2); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0; } .topbar .theme-toggle:hover { color:var(--ink); } .topbar .theme-toggle svg { width:16px; height:16px; } .topbar .theme-toggle .ic-sun { display:none; } [data-theme="dark"] .topbar .theme-toggle .ic-sun { display:inline; } [data-theme="dark"] .topbar .theme-toggle .ic-moon { display:none; } .topbar .lang-switch { display:inline-flex; align-items:center; gap:2px; font-family:"JetBrains Mono",monospace; font-size:11px; border:1px solid var(--line); border-radius:8px; overflow:hidden; } .topbar .lang-switch a { padding:6px 10px; text-decoration:none; color:var(--ink-3); letter-spacing:0.04em; } .topbar .lang-switch a:hover { color:var(--ink); } .topbar .lang-switch a.active { background:var(--ink); color:var(--bg); } .site-foot { max-width:1080px; margin:60px auto 0; padding:28px 24px 48px; border-top:1px solid var(--line); color:var(--ink-3); font-size:13px; } /* ---- blog list ---- */ #blog-list { max-width:1080px; margin:0 auto; padding:8px 24px 24px; } #blog-list .bm-head { padding:14px 0 22px; border-bottom:1px solid var(--line); margin-bottom:28px; } #blog-list h1 { font-size:34px; font-weight:600; margin:0 0 8px; letter-spacing:-0.5px; } #blog-list .bm-sub { color:var(--ink-3); font-size:15px; margin:0; max-width:560px; line-height:1.5; } #blog-list .bm-tag { display:inline-block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:10px; } #blog-list .bm-meta { font-size:12.5px; color:var(--ink-4); } #blog-list .bm-feature { display:grid; grid-template-columns:1.1fr 1fr; border:1px solid var(--line); border-radius:18px; overflow:hidden; margin-bottom:32px; background:var(--card); text-decoration:none; color:inherit; transition:.15s; } #blog-list .bm-feature:hover { box-shadow:var(--shadow-pop); transform:translateY(-2px); } #blog-list .bm-feature .bm-img { background:linear-gradient(135deg,#f6d9c9,#cfe3df 60%,#e9e1f2); min-height:240px; display:flex; align-items:center; justify-content:center; font-size:54px; overflow:hidden; } #blog-list .bm-feature .bm-img img { width:100%; height:100%; object-fit:cover; display:block; } #blog-list .bm-feature .bm-body { padding:30px; display:flex; flex-direction:column; justify-content:center; } #blog-list .bm-feature h2 { font-size:24px; font-weight:600; margin:0 0 10px; letter-spacing:-0.3px; line-height:1.25; } #blog-list .bm-feature p { color:var(--ink-3); font-size:14.5px; line-height:1.55; margin:0 0 16px; } #blog-list .bm-empty { text-align:center; padding:70px 20px 90px; } #blog-list .bm-empty-ico { font-size:46px; margin-bottom:14px; } #blog-list .bm-empty h2 { font-size:22px; font-weight:600; margin:0 0 8px; letter-spacing:-0.3px; } #blog-list .bm-empty p { color:var(--ink-3); font-size:14.5px; line-height:1.55; margin:0 auto; max-width:420px; } #blog-list .bm-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } #blog-list .bm-card { border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--card); text-decoration:none; color:inherit; transition:.15s; display:flex; flex-direction:column; } #blog-list .bm-card:hover { box-shadow:var(--shadow-pop); transform:translateY(-2px); } #blog-list .bm-card .bm-thumb { height:130px; display:flex; align-items:center; justify-content:center; font-size:34px; overflow:hidden; } #blog-list .bm-card .bm-thumb img { width:100%; height:100%; object-fit:cover; display:block; } #blog-list .bm-card .bm-cbody { padding:18px 18px 20px; display:flex; flex-direction:column; flex:1; } #blog-list .bm-card h3 { font-size:16.5px; font-weight:600; margin:8px 0 8px; line-height:1.3; letter-spacing:-0.2px; } #blog-list .bm-card p { font-size:13px; color:var(--ink-3); line-height:1.5; margin:0 0 14px; flex:1; } /* ---- article ---- */ #bm-article { max-width:720px; margin:0 auto; padding:8px 24px 40px; } #bm-article .ba-back { display:inline-block; font-size:13.5px; color:var(--ink-3); text-decoration:none; padding:6px 0 0; } #bm-article .ba-back:hover { color:var(--ink); } #bm-article .ba-tag { display:inline-block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); font-weight:600; margin:26px 0 14px; } #bm-article h1 { font-size:38px; font-weight:600; letter-spacing:-0.8px; line-height:1.15; margin:0 0 18px; } #bm-article .ba-byline { display:flex; align-items:center; gap:12px; padding-bottom:26px; border-bottom:1px solid var(--line); } #bm-article .ba-av { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,#f6d9c9,#cfe3df); } #bm-article .ba-byline .n { font-size:14px; font-weight:600; } #bm-article .ba-byline .m { font-size:12.5px; color:var(--ink-4); } #bm-article .ba-hero { aspect-ratio:1200/630; border-radius:16px; margin:28px 0 36px; overflow:hidden; background:linear-gradient(135deg,#f6d9c9,#cfe3df 55%,#e9e1f2); display:flex; align-items:center; justify-content:center; font-size:64px; } #bm-article .ba-hero img { width:100%; height:100%; object-fit:cover; display:block; } #bm-article .ba-body { font-size:17px; line-height:1.72; } #bm-article .ba-body > p:first-of-type { font-size:19px; color:var(--ink-2); line-height:1.6; } #bm-article .ba-body p { margin:0 0 22px; color:var(--ink-2); } #bm-article .ba-body h2 { font-size:23px; font-weight:600; letter-spacing:-0.3px; margin:38px 0 14px; } #bm-article .ba-body ol, #bm-article .ba-body ul { margin:0 0 22px; padding-left:22px; } #bm-article .ba-body li { margin:0 0 12px; line-height:1.6; color:var(--ink-2); } #bm-article .ba-body strong { color:var(--ink); } #bm-article .ba-body blockquote { background:var(--card-2); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:10px; padding:18px 20px; margin:8px 0 28px; font-size:15px; color:var(--ink-2); line-height:1.6; } #bm-article .ba-body blockquote p { margin:0; color:var(--ink-2); font-size:15px; } #bm-article .ba-body table { width:100%; border-collapse:collapse; margin:0 0 24px; font-size:14.5px; } #bm-article .ba-body thead th { text-align:left; font-weight:600; color:var(--ink); border-bottom:2px solid var(--line); padding:10px 12px; font-size:12.5px; text-transform:uppercase; letter-spacing:.03em; } #bm-article .ba-body tbody td { padding:10px 12px; border-bottom:1px solid var(--line); color:var(--ink-2); vertical-align:top; } #bm-article .ba-body tbody tr:hover { background:var(--card-2); } #bm-article .ba-body table code { background:var(--bg-tint); padding:1px 5px; border-radius:4px; font-size:13px; } #bm-article .ba-body pre { background:var(--code-bg); color:var(--code-ink); border-radius:10px; padding:16px 18px; overflow-x:auto; font-size:13.5px; line-height:1.5; margin:0 0 24px; } #bm-article .ba-body pre code { background:none; color:inherit; padding:0; font-size:13.5px; } #bm-article .ba-body :not(pre) > code { background:var(--bg-tint); padding:1px 6px; border-radius:5px; font-size:14px; } #bm-article .ba-tldr { background:var(--card-2); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:12px; padding:20px 24px; margin:0 0 4px; } #bm-article .ba-tldr-label { display:inline-block; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:8px; } #bm-article .ba-tldr p { margin:0; font-size:17px; line-height:1.6; color:var(--ink-2); white-space:pre-line; } #bm-article .ba-faq { margin-top:48px; } #bm-article .ba-faq h2 { font-size:23px; font-weight:600; letter-spacing:-0.3px; margin:0 0 8px; } #bm-article .ba-faq details { border-top:1px solid var(--line); padding:16px 0; } #bm-article .ba-faq details:last-of-type { border-bottom:1px solid var(--line); } #bm-article .ba-faq summary { font-size:16.5px; font-weight:600; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; color:var(--ink); } #bm-article .ba-faq summary::-webkit-details-marker { display:none; } #bm-article .ba-faq summary::after { content:'+'; font-size:24px; line-height:1; color:var(--ink-3); font-weight:400; } #bm-article .ba-faq details[open] summary::after { content:'\2013'; } #bm-article .ba-faq details p { margin:12px 0 0; color:var(--ink-2); line-height:1.6; font-size:15px; } #bm-article .ba-share { display:flex; gap:10px; align-items:center; margin:40px 0 0; padding-top:26px; border-top:1px solid var(--line); font-size:13.5px; color:var(--ink-3); } #bm-article .ba-share .sbtn { font-size:13px; padding:8px 16px; border-radius:999px; border:1px solid var(--line); background:var(--card); text-decoration:none; color:var(--ink); } #bm-article .ba-related { margin-top:44px; } #bm-article .ba-related h3 { font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-4); margin:0 0 16px; font-weight:600; } #bm-article .ba-rgrid { display:grid; grid-template-columns:1fr 1fr; gap:16px; } #bm-article .ba-rcard { border:1px solid var(--line); border-radius:12px; padding:16px 18px; text-decoration:none; color:inherit; transition:.15s; background:var(--card); } #bm-article .ba-rcard:hover { box-shadow:var(--shadow-pop); transform:translateY(-2px); } #bm-article .ba-rcard .t { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--accent); font-weight:600; } #bm-article .ba-rcard h4 { font-size:15.5px; font-weight:600; margin:8px 0 4px; line-height:1.3; } #bm-article .ba-rcard .m { font-size:12px; color:var(--ink-4); } @media (max-width:760px) { #blog-list .bm-feature, #bm-article .ba-rgrid { grid-template-columns:1fr; } #blog-list .bm-grid { grid-template-columns:1fr; } .topbar { gap:12px; padding:12px 16px; } .topbar .nav a { padding:7px 12px; } }