/* smokingmirror.ai — shared site style. Dual theme: obsidian (default) / cream (light). Borrows the legible editorial skin from swarmalignment.com — EB Garamond · Cinzel · JetBrains Mono, a tight reading measure, mono labels — but keeps smokingmirror's own obsidian-mirror soul and ember accent. One stylesheet skins every SSR page. Theme: default is dark. A no-flash inline script adds `.light` to from localStorage('sm-theme') or the OS preference; the moon/sun button in the head toggles it and persists. CSS drives everything off the custom properties below, so light/dark is a single class flip with no per-page work. The flat /v2/ heatmap pages carry their own inline palette and don't load this. */ :root { --bg: #0f0e0c; /* obsidian, faintly warm */ --bg-soft: #16140f; /* raised card */ --bg-hover: #1c1913; --ink: #e6ded0; /* parchment body text */ --ink-bright:#f4efe3; /* headings / strong */ --ink-dim: #918977; /* labels, meta */ --ink-faint: #8f8674; /* footer text/links — AA ≥4.5:1 on --bg */ --rule: rgba(178,170,150,.15); --rule-soft: rgba(178,170,150,.09); --hue: #d0623a; /* ember — the "smoking" accent, dark */ --hue-quiet: #b8552e; --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --serif:'EB Garamond', Georgia, 'Liberation Serif', serif; --display:'Cinzel', var(--serif); --measure: 40rem; } :root.light { --bg: #f4efe3; /* cream / paper */ --bg-soft: #ece4d3; --bg-hover: #e5dcc8; --ink: #2c2718; /* dark grey-brown */ --ink-bright:#0c0a05; --ink-dim: #6b5f47; --ink-faint: #6f6449; /* footer text/links — AA ≥4.5:1 on cream --bg */ --rule: rgba(58,50,36,.20); --rule-soft: rgba(58,50,36,.11); --hue: #a8401f; /* deeper ember for contrast on cream */ --hue-quiet: #8f3618; } * { margin:0; padding:0; box-sizing:border-box; } html { -webkit-text-size-adjust:100%; } body { background:var(--bg); color:var(--ink); font-family:var(--serif); font-size:clamp(1.05rem, 1rem + .35vw, 1.2rem); line-height:1.62; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; transition:background-color .35s ease, color .35s ease; min-height:100vh; } .wrap { max-width:var(--measure); margin:0 auto; padding:0 1.6rem; } .wrap.wide { max-width:52rem; } /* ── labels: mono, faint, letterspaced ─────────────────────────────────── */ .eyebrow, .byline, .breadcrumb, .site-foot, .site-title, .meta, .toggle { font-family:var(--mono); } /* ── site head ─────────────────────────────────────────────────────────── */ .site-head { border-bottom:1px solid var(--rule); } .site-head .wrap { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding:1.1rem 1.6rem; } .site-title { font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); text-decoration:none; white-space:nowrap; border:0; } .site-title b { font-weight:400; color:var(--hue); } .head-right { display:flex; align-items:baseline; gap:1.1rem; } .breadcrumb { font-size:.72rem; letter-spacing:.04em; color:var(--ink-dim); } .breadcrumb .sep { opacity:.5; margin:0 .35em; } .breadcrumb a { color:var(--ink-dim); text-decoration:none; border:0; } .breadcrumb a:hover { color:var(--ink); } /* theme toggle — a quiet mono glyph button */ .toggle { appearance:none; background:none; border:1px solid var(--rule); color:var(--ink-dim); font-size:.72rem; letter-spacing:.06em; padding:.28em .6em; border-radius:4px; cursor:pointer; line-height:1; transition:border-color .2s ease, color .2s ease; } .toggle:hover { color:var(--ink-bright); border-color:var(--ink-dim); } .toggle .sun { display:none; } .toggle .moon { display:inline; } :root.light .toggle .sun { display:inline; } :root.light .toggle .moon { display:none; } /* ── main / lobby ──────────────────────────────────────────────────────── */ main { padding-top:3.2rem; padding-bottom:1rem; } .lobby { padding-top:3.4rem; } /* home banner line */ .tagline { font-family:var(--mono); font-size:1.02rem; letter-spacing:.02em; color:var(--hue); margin:0 0 1.8rem; } /* ── headings ──────────────────────────────────────────────────────────── */ h1 { font-family:var(--display); font-weight:500; text-transform:uppercase; letter-spacing:.1em; font-size:clamp(1.5rem, 1.2rem + 1.6vw, 2.25rem); line-height:1.2; color:var(--ink-bright); margin:0 0 1.4rem; } h2, h3 { color:var(--ink-bright); line-height:1.25; } h2 { font-size:1.5rem; font-weight:500; font-style:italic; margin:2.8rem 0 1rem; } h3 { font-size:1.16rem; font-weight:600; margin:2rem 0 .7rem; } /* ── prose ─────────────────────────────────────────────────────────────── */ p { margin:0 0 1.2rem; } a { color:var(--ink-bright); text-decoration:none; border-bottom:1px solid var(--rule); transition:border-color .2s ease; } a:hover { border-color:var(--hue); } strong { font-weight:600; color:var(--ink-bright); } em { font-style:italic; } hr { border:0; border-top:1px solid var(--rule); margin:2.6rem 0; } code, pre { font-family:var(--mono); font-size:.86em; background:color-mix(in srgb, var(--ink) 8%, transparent); padding:.12em .38em; border-radius:3px; } pre { padding:1rem 1.2rem; overflow-x:auto; line-height:1.5; } pre code { background:none; padding:0; } blockquote { margin:1.6rem 0; padding-left:1.2rem; border-left:2px solid var(--rule); color:var(--ink); font-style:italic; } ul, ol { margin:0 0 1.2rem 1.3rem; } li { margin:.3rem 0; } /* intro paragraph (methodology/index etc.) */ .intro { font-size:1.14rem; color:var(--ink); font-style:italic; border-bottom:1px solid var(--rule); padding-bottom:1.4rem; margin-bottom:2.2rem; } /* closing coda line (philosophy) — mono, accent, centred */ .coda { font-family:var(--mono); color:var(--hue); font-size:1.05rem; letter-spacing:.03em; text-align:center; margin:2.6rem 0 0; padding-top:1.6rem; border-top:1px solid var(--rule); } /* ── experiment / link cards ───────────────────────────────────────────── */ .exp { display:block; text-decoration:none; border:0; border-left:2px solid var(--rule); padding:.3rem 0 1.3rem 1.15rem; margin:0 0 1.8rem; transition:border-color .25s ease; } .exp:hover { border-left-color:var(--hue); } .exp .title { font-family:var(--serif); font-size:1.24rem; font-weight:600; color:var(--ink-bright); line-height:1.25; margin-bottom:.3rem; } .exp .meta { font-size:.72rem; letter-spacing:.03em; text-transform:none; color:var(--ink-dim); margin-bottom:.6rem; } .exp .head { color:var(--ink); font-size:1rem; margin:0; } .exp .head a { color:var(--ink-bright); border-bottom-color:var(--rule); } /* findings index — list of written-up conclusions */ .finding-list { margin:1.5rem 0; } .finding { border-left:2px solid var(--rule); padding:.2rem 0 1.1rem 1.15rem; margin:0 0 1.7rem; transition:border-color .25s ease; } .finding:hover { border-left-color:var(--hue); } .finding > a { color:var(--ink-bright); border-bottom:0; font-size:1.16rem; font-weight:600; } .finding > a:hover { border-bottom:1px solid var(--rule); } .finding p { margin:.5rem 0 0; } .byline { font-family:var(--mono); font-size:.7rem; letter-spacing:.03em; color:var(--ink-dim); margin-top:.7rem; } /* an "in render / upcoming" note — set apart, not a link */ .upcoming { border-left:2px dashed var(--rule); padding:.2rem 0 .3rem 1.15rem; margin:0 0 1.8rem; color:var(--ink-dim); font-size:.95rem; } /* the styled "how the instrument is built" aside */ .aside-note { border:1px solid var(--rule); border-radius:6px; padding:1.1rem 1.4rem; margin:2.4rem 0; background:var(--bg-soft); } .aside-note .lbl { font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim); display:block; margin-bottom:.7rem; } .aside-note p { margin:0; color:var(--ink); } /* about-page link list */ .links { margin-top:2rem; font-family:var(--mono); font-size:.82rem; } .links > div { margin:.5rem 0; color:var(--ink-dim); } .links .lbl { color:var(--ink-faint); letter-spacing:.08em; margin-right:.7em; } .links a { color:var(--ink); border-bottom-color:transparent; } .links a:hover { border-bottom-color:var(--rule); } /* ── site foot ─────────────────────────────────────────────────────────── */ .site-foot { border-top:1px solid var(--rule); margin-top:5rem; } .site-foot .wrap { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem 1rem; padding:1.4rem 1.6rem 4rem; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); } .site-foot a { color:var(--ink-faint); text-decoration:none; border:0; } .site-foot a:hover { color:var(--ink-dim); } /* shadow banner (local-only drafts) */ .shadow-banner { font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; background:var(--bg-soft); color:var(--hue); border:1px solid var(--rule); border-radius:4px; padding:.5rem .8rem; margin-bottom:1.6rem; } @media (max-width:34rem) { .site-head .wrap { flex-direction:column; gap:.5rem; align-items:flex-start; } .head-right { width:100%; justify-content:space-between; } }