/* ============================================================================= FIELD STATION — BUILD STYLESHEET v0.2 · plain CSS, framework-agnostic Type: IBM Plex Mono + IBM Plex Sans (OFL) · Colour: Nord ----------------------------------------------------------------------------- FONT LOADING — Bunny Fonts CDN is active below (Google-free). Alternatives: A. Fontsource (for npm/Vite builds). Replace section 1 with: npm i @fontsource/ibm-plex-mono @fontsource/ibm-plex-sans import "@fontsource/ibm-plex-mono/400.css"; // + 500, 600 import "@fontsource/ibm-plex-sans/400.css"; // + 500, 600, 700 B. Manual self-host. Replace section 1 with @font-face rules pointing at woff2 files in /fonts/ (source from the IBM Plex repo or google-webfonts-helper). C. Bunny Fonts CDN — ACTIVE. A preconnect in the page speeds it up: DARK MODE: set . Toggle in JS, or mirror the OS with the prefers-color-scheme block noted in section 2. CLASS INVENTORY: layout .fs-container .fs-prose .fs-rule utility .fs-mono .fs-label parts .fs-masthead .fs-wordmark .fs-nav .fs-search .fs-theme-toggle .fs-type .fs-tag .fs-meta .fs-card .fs-secheader .fs-list .fs-row .fs-pager .fs-marquee .fs-btn .fs-fig .fs-foot ============================================================================= */ /* 1 ── FONTS (Bunny Fonts CDN — Google-free; see header for self-host route) ─ */ @import url("https://fonts.bunny.net/css?family=ibm-plex-mono:400,500,600|ibm-plex-sans:400,500,600,700"); /* 2 ── TOKENS ─────────────────────────────────────────────────────────────── */ :root{ /* type */ --fs-font-mono:"IBM Plex Mono", ui-monospace, Menlo, monospace; --fs-font-sans:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --fs-font-serif:"IBM Plex Serif", Georgia, serif; --fs-text-xs:.75rem; --fs-text-sm:.8125rem; --fs-text-base:1rem; --fs-text-md:1.125rem; --fs-text-lg:1.5rem; --fs-text-xl:2rem; --fs-text-2xl:2.75rem; --fs-text-3xl:4rem; --fs-text-4xl:6rem; --fs-leading-tight:1.05; --fs-leading-snug:1.25; --fs-leading-body:1.6; --fs-tracking-display:-0.02em; --fs-tracking-label:0.08em; /* monochrome */ --fs-ink:#2E3440; --fs-ink-soft:#3B4252; --fs-muted:#4C566A; --fs-line:#D8DEE9; --fs-paper-shade:#ECEFF4; --fs-paper:#FCFCFD; /* accent — Nord Frost */ --fs-accent:#5E81AC; --fs-accent-bright:#81A1C1; --fs-accent-pale:#88C0D0; /* signal — Nord Aurora (sparing) */ --fs-signal-red:#BF616A; --fs-signal-orange:#D08770; --fs-signal-yellow:#EBCB8B; --fs-signal-green:#A3BE8C; --fs-signal-violet:#B48EAD; /* topics — Work · Sovereignty · Society */ --fs-topic-work:var(--fs-accent); --fs-topic-sovereignty:var(--fs-signal-violet); --fs-topic-society:var(--fs-signal-green); /* space (4px base) */ --fs-space-1:.25rem; --fs-space-2:.5rem; --fs-space-3:.75rem; --fs-space-4:1rem; --fs-space-6:1.5rem; --fs-space-8:2rem; --fs-space-12:3rem; --fs-space-16:4rem; --fs-space-24:6rem; --fs-space-32:8rem; /* layout + form */ --fs-measure:70ch; --fs-page-max:1320px; --fs-gutter:var(--fs-space-6); --fs-radius:0; --fs-radius-input:2px; --fs-rule:1px; --fs-border:1px solid var(--fs-line); --fs-border-ink:1px solid var(--fs-ink); color-scheme:light; } [data-theme="dark"]{ --fs-ink:#ECEFF4; --fs-ink-soft:#D8DEE9; --fs-muted:#9AA5B8; --fs-line:#3B4252; --fs-paper-shade:#3B4252; --fs-paper:#2E3440; --fs-accent:#88C0D0; --fs-accent-bright:#8FBCBB; --fs-accent-pale:#81A1C1; --fs-topic-work:var(--fs-accent); color-scheme:dark; } /* Optional: mirror the OS instead of (or before) a manual toggle. [data-theme="auto"]{ } @media (prefers-color-scheme:dark){ [data-theme="auto"]{ --fs-ink:#ECEFF4; --fs-ink-soft:#D8DEE9; --fs-muted:#9AA5B8; --fs-line:#3B4252; --fs-paper-shade:#3B4252; --fs-paper:#2E3440; --fs-accent:#88C0D0; --fs-accent-bright:#8FBCBB; --fs-accent-pale:#81A1C1; color-scheme:dark; }} */ /* 3 ── RESET + BASE ───────────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box} *{margin:0} html{-webkit-text-size-adjust:100%} body{ background:var(--fs-paper); color:var(--fs-ink); font-family:var(--fs-font-sans); font-size:var(--fs-text-base); line-height:var(--fs-leading-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; transition:background .3s ease, color .3s ease; } img,svg,video{display:block; max-width:100%; height:auto} a{color:var(--fs-accent); text-decoration:underline; text-underline-offset:.15em; text-decoration-thickness:1px} a:hover{color:var(--fs-accent-bright)} button,input,select,textarea{font:inherit; color:inherit} :focus-visible{outline:2px solid var(--fs-accent); outline-offset:2px} ::selection{background:var(--fs-accent-pale); color:var(--fs-ink)} strong,b{font-weight:600} /* 4 ── LAYOUT HELPERS ─────────────────────────────────────────────────────── */ .fs-container{max-width:var(--fs-page-max); margin-inline:auto; padding-inline:var(--fs-space-8)} .fs-rule{border:none; border-top:var(--fs-border)} .fs-rule--ink{border-top:var(--fs-border-ink)} /* 5 ── UTILITIES ──────────────────────────────────────────────────────────── */ .fs-mono{font-family:var(--fs-font-mono)} .fs-label{ font:500 var(--fs-text-xs)/1 var(--fs-font-mono); letter-spacing:var(--fs-tracking-label); text-transform:uppercase; color:var(--fs-muted); } /* 6 ── PROSE (article body) ───────────────────────────────────────────────── */ .fs-prose{max-width:var(--fs-measure)} .fs-prose > * + *{margin-top:var(--fs-space-6)} .fs-prose h2{font:600 var(--fs-text-xl)/var(--fs-leading-snug) var(--fs-font-mono); letter-spacing:var(--fs-tracking-display); margin-top:var(--fs-space-16)} .fs-prose h3{font:600 var(--fs-text-lg)/var(--fs-leading-snug) var(--fs-font-sans); margin-top:var(--fs-space-12)} .fs-prose h4{font:500 var(--fs-text-md)/var(--fs-leading-snug) var(--fs-font-sans)} .fs-prose p,.fs-prose li{font-size:var(--fs-text-base); line-height:var(--fs-leading-body)} .fs-prose ul,.fs-prose ol{padding-left:1.4em} .fs-prose li + li{margin-top:var(--fs-space-2)} .fs-prose a{font-weight:500} .fs-prose a[target="_blank"]::after,.fs-prose a.fs-ext::after{content:" \2197"; color:var(--fs-accent)} .fs-prose blockquote{ border-left:2px solid var(--fs-accent); padding-left:var(--fs-space-6); color:var(--fs-ink-soft); font-size:var(--fs-text-md); } .fs-prose hr{border:none; border-top:var(--fs-border); margin-block:var(--fs-space-12)} .fs-prose code{font-family:var(--fs-font-mono); font-size:.9em; background:var(--fs-paper-shade); padding:.1em .35em; border-radius:var(--fs-radius-input)} .fs-prose pre{font-family:var(--fs-font-mono); font-size:var(--fs-text-sm); background:var(--fs-paper-shade); border:var(--fs-border); padding:var(--fs-space-6); overflow:auto} .fs-prose pre code{background:none; padding:0} .fs-prose figure figcaption{font:400 var(--fs-text-sm)/1.5 var(--fs-font-mono); color:var(--fs-muted); margin-top:var(--fs-space-3)} /* 7 ── COMPONENTS ─────────────────────────────────────────────────────────── */ /* 7.2 Masthead */ .fs-masthead{ position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:var(--fs-space-6); padding:var(--fs-space-4) var(--fs-space-8); background:var(--fs-paper); border-bottom:var(--fs-border); } .fs-wordmark{ display:inline-flex; align-items:center; gap:.75em; font:500 var(--fs-text-sm)/1 var(--fs-font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--fs-ink); text-decoration:none; } .fs-wordmark .fs-mark{color:var(--fs-accent); letter-spacing:var(--fs-tracking-label)} .fs-nav{display:flex; align-items:center; gap:var(--fs-space-6)} .fs-nav a{ font:400 var(--fs-text-sm)/1 var(--fs-font-mono); letter-spacing:var(--fs-tracking-label); text-transform:uppercase; color:var(--fs-muted); text-decoration:none; } .fs-nav a:hover,.fs-nav a[aria-current]{ color:var(--fs-ink); text-decoration:underline; text-underline-offset:.4em; text-decoration-color:var(--fs-accent); text-decoration-thickness:2px; } .fs-search{ font-family:var(--fs-font-mono); font-size:var(--fs-text-sm); background:transparent; color:var(--fs-ink); border:var(--fs-border); border-radius:var(--fs-radius-input); padding:var(--fs-space-2) var(--fs-space-3); min-width:0; } .fs-search::placeholder{color:var(--fs-muted)} .fs-search:focus-visible{border-color:var(--fs-accent); outline:none} .fs-theme-toggle{ font:500 var(--fs-text-xs)/1 var(--fs-font-mono); letter-spacing:var(--fs-tracking-label); text-transform:uppercase; color:var(--fs-ink); background:transparent; border:var(--fs-border-ink); border-radius:var(--fs-radius); padding:.5em .8em; cursor:pointer; transition:border-color .15s ease, color .15s ease; } .fs-theme-toggle:hover{border-color:var(--fs-accent); color:var(--fs-accent)} /* 7.3 Content-type label */ .fs-type{ font:500 var(--fs-text-xs)/1 var(--fs-font-mono); letter-spacing:var(--fs-tracking-label); text-transform:uppercase; color:var(--fs-muted); } /* 7.4 Topic tag */ .fs-tag{ display:inline-flex; align-items:center; font:400 var(--fs-text-xs)/1 var(--fs-font-mono); letter-spacing:var(--fs-tracking-label); color:var(--fs-ink-soft); border:var(--fs-border); padding:var(--fs-space-2) var(--fs-space-3); text-decoration:none; } .fs-tag::before{content:""; width:.6em; height:.6em; margin-right:.6em; background:var(--fs-muted)} .fs-tag[data-topic="work"]::before{background:var(--fs-topic-work)} .fs-tag[data-topic="sovereignty"]::before{background:var(--fs-topic-sovereignty)} .fs-tag[data-topic="society"]::before{background:var(--fs-topic-society)} .fs-tag:hover{border-color:var(--fs-ink); color:var(--fs-ink)} /* 7.5 Metadata line */ .fs-meta{font:400 var(--fs-text-sm)/1.6 var(--fs-font-mono); color:var(--fs-muted)} .fs-meta .fs-sep{margin:0 .6em; color:var(--fs-line)} .fs-meta .fs-topic{color:var(--fs-ink-soft)} /* 7.6 Featured research card */ .fs-card{border-top:var(--fs-border-ink); padding-top:var(--fs-space-4); max-width:var(--fs-measure)} .fs-card__head{display:flex; gap:var(--fs-space-4); align-items:center; margin-bottom:var(--fs-space-4)} .fs-card__idx{font:500 var(--fs-text-xs)/1 var(--fs-font-mono); color:var(--fs-accent); letter-spacing:var(--fs-tracking-label)} .fs-card__title{font:600 var(--fs-text-2xl)/1.05 var(--fs-font-mono); letter-spacing:var(--fs-tracking-display); color:var(--fs-ink); margin-bottom:var(--fs-space-4)} .fs-card__title .fs-lo{color:var(--fs-muted); font-weight:400} .fs-card__stand{font-size:var(--fs-text-md); color:var(--fs-muted); margin-bottom:var(--fs-space-6)} /* 7.8 Section header */ .fs-secheader{display:flex; align-items:baseline; justify-content:space-between; padding-bottom:var(--fs-space-3); border-bottom:var(--fs-border)} .fs-secheader h2,.fs-secheader h3{font:500 var(--fs-text-lg)/1 var(--fs-font-mono); color:var(--fs-ink); letter-spacing:var(--fs-tracking-display)} .fs-secheader a{font:400 var(--fs-text-sm)/1 var(--fs-font-mono); letter-spacing:var(--fs-tracking-label); text-transform:uppercase; text-decoration:none} /* 7.7 Archive list + rows */ .fs-list{border-top:var(--fs-border)} .fs-row{ display:grid; grid-template-columns:3.5rem 7rem 1fr auto auto 1.5rem; gap:var(--fs-space-4); align-items:baseline; padding:var(--fs-space-4); border-bottom:var(--fs-border); text-decoration:none; color:inherit; transition:background .12s ease; } .fs-row:hover{background:var(--fs-paper-shade)} .fs-row__idx{font:400 var(--fs-text-sm)/1 var(--fs-font-mono); color:var(--fs-accent)} .fs-row__type{font:500 var(--fs-text-xs)/1.4 var(--fs-font-mono); letter-spacing:var(--fs-tracking-label); text-transform:uppercase; color:var(--fs-muted)} .fs-row__title{font-family:var(--fs-font-sans); font-weight:500; color:var(--fs-ink)} .fs-row__auth,.fs-row__date{font:400 var(--fs-text-sm)/1.4 var(--fs-font-mono); color:var(--fs-muted); white-space:nowrap} .fs-row__arrow{font-family:var(--fs-font-mono); color:var(--fs-accent); opacity:0; justify-self:end; transition:opacity .12s ease} .fs-row:hover .fs-row__arrow{opacity:1} @media(max-width:720px){ .fs-row{grid-template-columns:2.5rem 1fr auto; row-gap:var(--fs-space-1)} .fs-row__type{grid-column:2; order:3} .fs-row__auth,.fs-row__arrow{display:none} } /* 7.9 Pager */ .fs-pager{display:flex; align-items:center; justify-content:space-between; gap:var(--fs-space-4); font:400 var(--fs-text-sm)/1 var(--fs-font-mono); letter-spacing:var(--fs-tracking-label); text-transform:uppercase} .fs-pager a{text-decoration:none; color:var(--fs-ink)} .fs-pager a:hover{color:var(--fs-accent)} .fs-pager__count{color:var(--fs-muted)} .fs-pager__count b{color:var(--fs-ink); font-weight:500} /* 7.10 Marquee */ .fs-marquee{border-top:var(--fs-border-ink); border-bottom:var(--fs-border-ink); overflow:hidden; white-space:nowrap} .fs-marquee__track{ display:inline-block; padding:var(--fs-space-4) 0; font:500 var(--fs-text-3xl)/1 var(--fs-font-mono); letter-spacing:var(--fs-tracking-display); text-transform:uppercase; color:var(--fs-ink); animation:fs-marquee 32s linear infinite; } .fs-marquee__track > *{margin-right:1.5em} .fs-marquee__dot{color:var(--fs-accent)} @keyframes fs-marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){ .fs-marquee__track{animation:none} } /* 7.12 Buttons */ .fs-btn{ display:inline-block; font:500 var(--fs-text-sm)/1 var(--fs-font-mono); letter-spacing:var(--fs-tracking-label); text-transform:uppercase; text-decoration:none; padding:var(--fs-space-3) var(--fs-space-6); border:var(--fs-border-ink); border-radius:var(--fs-radius); background:transparent; color:var(--fs-ink); cursor:pointer; transition:background .15s ease, border-color .15s ease, color .15s ease; } .fs-btn--primary{background:var(--fs-ink); color:var(--fs-paper)} .fs-btn:hover{border-color:var(--fs-accent); color:var(--fs-accent)} .fs-btn--primary:hover{background:var(--fs-accent); color:var(--fs-paper); border-color:var(--fs-accent)} /* 7.13 Figure + caption */ .fs-fig{max-width:var(--fs-measure)} .fs-fig img,.fs-fig svg{width:100%; border:var(--fs-border); background:var(--fs-paper-shade)} .fs-fig figcaption{font:400 var(--fs-text-sm)/1.5 var(--fs-font-mono); color:var(--fs-muted); margin-top:var(--fs-space-3)} .fs-fig figcaption .fs-plate{color:var(--fs-accent); margin-right:.6em} /* 7.14 Footer */ .fs-foot{border-top:var(--fs-border-ink); padding:var(--fs-space-12) var(--fs-space-8)} .fs-foot__grid{display:grid; gap:var(--fs-space-8); grid-template-columns:1fr; max-width:var(--fs-page-max); margin-inline:auto} @media(min-width:760px){ .fs-foot__grid{grid-template-columns:2fr 1fr 1fr} } .fs-foot__wm{font:500 var(--fs-text-lg)/1 var(--fs-font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--fs-ink); margin-bottom:var(--fs-space-3)} .fs-foot__collab{font-size:var(--fs-text-sm); color:var(--fs-muted); max-width:42ch} .fs-foot__col h2{font:500 var(--fs-text-xs)/1 var(--fs-font-mono); letter-spacing:var(--fs-tracking-label); text-transform:uppercase; color:var(--fs-muted); margin-bottom:var(--fs-space-4)} .fs-foot__col a{display:block; font-family:var(--fs-font-mono); font-size:var(--fs-text-sm); color:var(--fs-ink-soft); text-decoration:none; margin-bottom:var(--fs-space-2)} .fs-foot__col a:hover{color:var(--fs-accent)} .fs-foot__credit{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--fs-space-4); max-width:var(--fs-page-max); margin:var(--fs-space-12) auto 0; padding-top:var(--fs-space-6); border-top:var(--fs-border); font:400 var(--fs-text-xs)/1.4 var(--fs-font-mono); color:var(--fs-muted); }