/* blog.css — shared stylesheet for every page under the homepage: * the blog listing and articles (blog.php) and the legal pages * (privacy.html, terms.html). The homepage carries its own inline copy of * these tokens; keep the two in step when the identity changes. * * Identity: steel and forge. Cold steel carries structure (ground, rules, * grid, data); gold → ember is spent on the wordmark, the eyebrow rule and * the one control that matters. Type: Chakra Petch (display), IBM Plex Sans * (body), IBM Plex Mono (labels, dates, code) — loaded by each page's . */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { --ink: #060b18; --ink-2: #0a1122; --steel-9: #0f1a30; --steel-8: #142140; --steel-7: #1e2f50; --steel-5: #34507a; --steel-3: #8ea3c6; --text: #edf1f8; --muted: #a3b2cc; --dim: #6f819f; --gold: #e2b444; --gold-2: #f5da82; --gold-deep: #a2700f; --ember: #ff7a1a; --signal: #4a8eff; --line: rgba(142, 163, 198, 0.16); --line-gold: rgba(226, 180, 68, 0.35); --font-display: 'Chakra Petch', 'Segoe UI', system-ui, sans-serif; --font-body: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', 'Cascadia Mono', Consolas, monospace; --max: 1180px; --measure: 68ch; --ease: cubic-bezier(.2,.7,.2,1); /* Legacy names still referenced by mobile-nav.css and older markup. */ --text-primary: var(--text); --text-secondary: var(--muted); --text-muted: var(--dim); --border: var(--line); --accent: var(--gold); --accent-bright: var(--gold-2); } html { scroll-behavior: smooth; scroll-padding-top: 90px; } body { font-family: var(--font-body); background: var(--ink); color: var(--text); line-height: 1.65; min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; } a { color: inherit; } img { max-width: 100%; display: block; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .wrap { max-width: var(--max); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); } .bg-grid { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(142,163,198,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(142,163,198,.045) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.35) 60%, rgba(0,0,0,.6)); -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.35) 60%, rgba(0,0,0,.6)); } /* ─── Type ─── */ .eyebrow { display: inline-block; font-family: var(--font-mono); font-size: .74rem; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); } .eyebrow::before { content: ''; display: inline-block; width: 22px; height: 1px; background: var(--gold); vertical-align: middle; margin-right: .7rem; } h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.1; text-wrap: balance; letter-spacing: -.005em; } /* ─── Nav (sticky here; the homepage's is fixed over its hero) ─── */ nav { position: sticky; top: 0; z-index: 100; background: rgba(6, 11, 24, .88); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); border-bottom: 1px solid var(--line); } .nav-inner { max-width: var(--max); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; position: relative; } .brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: var(--text); } .brand svg { width: 30px; height: 26px; flex-shrink: 0; } .brand .word { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: .14em; line-height: 1; } .brand .by { display: block; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-top: .3rem; } .nav-links { display: flex; gap: 2rem; list-style: none; align-items: center; } .nav-links a { text-decoration: none; font-size: .84rem; font-weight: 500; letter-spacing: .04em; color: var(--muted); transition: color .2s; padding: .3rem 0; border-bottom: 1px solid transparent; } .nav-links a:hover { color: var(--text); border-bottom-color: var(--gold); } .nav-links a.active { color: var(--text); border-bottom-color: var(--gold); } .nav-links a.nav-cta { color: var(--ink); background: var(--gold); padding: .55rem 1rem; border-radius: 4px; font-weight: 600; border: 0; } .nav-links a.nav-cta:hover { background: var(--gold-2); } /* ─── Page header (blog listing, article, legal) ─── */ .blog-header, .page-header { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; padding: clamp(3.5rem, 7vw, 5.5rem) clamp(1.25rem, 4vw, 2.5rem) 2.5rem; } .blog-header h1, .page-header h1 { font-size: clamp(2.1rem, 4.2vw, 3.3rem); font-weight: 600; margin: .9rem 0 1rem; max-width: 20ch; } .blog-header p, .page-header p { color: var(--muted); font-size: 1.08rem; max-width: var(--measure); } .accent-bar { width: 48px; height: 2px; margin: 1.6rem 0 0; background: linear-gradient(90deg, var(--gold), var(--ember)); } .page-header p.updated, .updated { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-top: .2rem; } /* Article title sits on the reading column, not the wide grid. */ .blog-header.article-head { max-width: calc(var(--measure) + 2 * clamp(1.25rem, 4vw, 2.5rem)); } .blog-header.article-head h1 { max-width: none; font-size: clamp(1.9rem, 3.6vw, 2.8rem); } main { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; padding: 1rem clamp(1.25rem, 4vw, 2.5rem) 6rem; } /* ─── Post listing ─── */ .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; } .post-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(15,26,48,.7), rgba(10,17,34,.5)); border-radius: 6px; overflow: hidden; text-decoration: none; color: inherit; transition: border-color .3s, transform .3s var(--ease); } .post-card:hover { border-color: var(--line-gold); transform: translateY(-3px); } .post-card-img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--steel-9); border-bottom: 1px solid var(--line); } .post-card-body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .6rem; } .post-card h2 { font-size: 1.15rem; font-weight: 600; line-height: 1.3; color: var(--text); } .post-card:hover h2 { color: var(--gold-2); } .post-meta { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); } .post-excerpt { font-size: .92rem; color: var(--muted); line-height: 1.6; } /* Newest post leads the page. */ @media (min-width: 900px) { .post-card:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; } .post-card:first-child .post-card-img { border-bottom: 0; border-right: 1px solid var(--line); height: 100%; } .post-card:first-child .post-card-body { padding: 2.2rem 2.4rem; } .post-card:first-child h2 { font-size: 1.7rem; } .post-card:first-child .post-excerpt { font-size: 1rem; } } /* ─── Single article ─── */ .article { max-width: var(--measure); margin: 0 auto 3rem; } .article-hero { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); margin-bottom: 2.5rem; } .back-link { display: inline-block; margin: 0 0 2rem; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); text-decoration: none; } .back-link:hover { color: var(--gold-2); } .article-body, .policy, .terms { font-size: 1.05rem; line-height: 1.8; color: var(--text); } .article-body p, .policy p, .terms p { margin-bottom: 1.4rem; color: var(--muted); } .article-body h2, .policy h2, .terms h2 { font-size: 1.55rem; font-weight: 600; margin: 2.8rem 0 1rem; color: var(--text); padding-top: 1.2rem; border-top: 1px solid var(--line); } .article-body h3, .policy h3, .terms h3 { font-size: 1.12rem; font-weight: 600; margin: 1.8rem 0 .7rem; color: var(--gold-2); } .article-body ul, .article-body ol, .policy ul, .policy ol, .terms ul, .terms ol { margin: 0 0 1.4rem 1.3rem; color: var(--muted); } .article-body li, .policy li, .terms li { margin-bottom: .55rem; padding-left: .2rem; } .article-body li::marker, .policy li::marker, .terms li::marker { color: var(--gold); } .article-body strong, .policy strong, .terms strong { color: var(--text); font-weight: 600; } .article-body a, .policy a, .terms a { color: var(--gold-2); text-decoration: underline; text-decoration-color: rgba(245,218,130,.35); text-underline-offset: 3px; } .article-body a:hover, .policy a:hover, .terms a:hover { text-decoration-color: var(--gold-2); } .article-body blockquote { margin: 1.8rem 0; padding: .6rem 0 .6rem 1.4rem; border-left: 2px solid var(--gold); color: var(--text); font-family: var(--font-display); font-size: 1.15rem; line-height: 1.5; } .article-body img { border-radius: 6px; border: 1px solid var(--line); margin: 1.6rem 0; } .article-body code { font-family: var(--font-mono); font-size: .88em; background: rgba(142,163,198,.12); color: var(--gold-2); padding: .1em .4em; border-radius: 3px; } .article-body pre { font-family: var(--font-mono); font-size: .86rem; line-height: 1.6; background: rgba(6,11,24,.7); border: 1px solid var(--line); border-radius: 6px; padding: 1rem 1.2rem; margin: 0 0 1.6rem; overflow-x: auto; } .article-body pre code { background: none; color: var(--muted); padding: 0; } .article-body table, .policy table, .terms table { width: 100%; border-collapse: collapse; margin-bottom: 1.6rem; font-size: .95rem; display: block; overflow-x: auto; } .article-body th, .article-body td, .policy th, .policy td, .terms th, .terms td { border: 1px solid var(--line); padding: .6rem .8rem; text-align: left; vertical-align: top; } .article-body th, .policy th, .terms th { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); background: rgba(15,26,48,.6); } .article-body td:first-child, .policy td:first-child, .terms td:first-child { font-variant-numeric: tabular-nums; } /* ─── Legal pages: section index beside a reading column ─── */ main.legal { display: grid; grid-template-columns: 240px minmax(0, var(--measure)); gap: 4rem; align-items: start; } .policy .lede, .terms .lede { font-size: 1.12rem; color: var(--text); margin-bottom: 2rem; } .caps { font-variant: small-caps; letter-spacing: .02em; } .toc { position: sticky; top: 90px; font-size: .84rem; } .toc-label { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-bottom: .8rem; } .toc ol { list-style: none; border-left: 1px solid var(--line); } .toc li a { display: flex; gap: .7rem; padding: .35rem 0 .35rem 1rem; color: var(--muted); text-decoration: none; border-left: 1px solid transparent; margin-left: -1px; transition: color .2s, border-color .2s; } .toc li a:hover { color: var(--text); border-left-color: var(--gold); } .toc li a .n { font-family: var(--font-mono); font-size: .7rem; color: var(--dim); min-width: 1.4rem; padding-top: .15rem; font-variant-numeric: tabular-nums; } .legal-meta { margin-top: 1.6rem; font-family: var(--font-mono); font-size: .68rem; color: var(--dim); line-height: 1.7; } .legal-meta a { color: var(--muted); text-decoration: none; } .legal-meta a:hover { color: var(--gold-2); } /* ─── Footer ─── */ footer { position: relative; z-index: 1; border-top: 1px solid var(--line); padding: 2.2rem 0; background: var(--ink); } .footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .footer-links { display: flex; gap: 1.4rem; list-style: none; flex-wrap: wrap; } .footer-links a { color: var(--muted); text-decoration: none; font-size: .84rem; } .footer-links a:hover { color: var(--gold-2); } .footer-copy { color: var(--dim); font-size: .78rem; font-family: var(--font-mono); } /* ─── Responsive ─── */ @media (max-width: 960px) { main.legal { grid-template-columns: 1fr; gap: 2rem; } .toc { position: static; } .toc ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); border-left: 0; gap: 0 1rem; } .toc li a { border-left: 0; padding-left: 0; } } @media (max-width: 720px) { .nav-links { display: none; } .brand .by { display: none; } main { padding-bottom: 4rem; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } html { scroll-behavior: auto; } }