/* ═══════════════════════════════════════════════════════════════════════════
FIELD NOTES — Lucian Labs look D
A reading lamp over a dark desk. Serif prose, amber headings, lavender
care. Shipped in the Lucian Labs blog, curated by Ana Iliovic.
Spec: https://lucianlabs.ca/branding/field-notes.md
Rules: https://lucianlabs.ca/branding/AGENT.md
Fonts (add to ):
═══════════════════════════════════════════════════════════════════════════ */
:root {
/* surfaces — plum-tinted near-black, warmer than Console's */
--bg: #171519;
--panel: #13111a;
--panel-2: #1c1820;
--chip: #221e2a;
/* ink — body text is never pure white; headings are */
--ink: #d0ccd4;
--bright: #ffffff;
--strong: #e0dce4;
--soft: #b8b0c0;
--muted: #9990a0;
--faint: #776e80;
--dim: #554e5c;
--ghost: #3a3440;
/* boundaries — every edge is this, at 1px */
--line: #2a2630;
/* accents — amber is the voice, lavender is the care */
--accent: #e8a020;
--accent-2: #c4a0d0;
--glow: rgba(232, 160, 32, 0.3);
--glow-2: rgba(196, 160, 208, 0.12);
/* form */
--radius: 6px;
--radius-sm: 3px;
/* type — three faces: display, serif body, mono marginalia */
--font-display: 'Exo 2', 'Helvetica Neue', sans-serif;
--font-body: 'Source Serif 4', Georgia, serif;
--font-mono: 'Fira Code', 'IBM Plex Mono', monospace;
color-scheme: dark;
}
/* ── base ──────────────────────────────────────────────────────────────────
18px root and 1.8 leading are load-bearing: this look is set for reading,
not scanning. Do not tighten either to fit more on screen. */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 18px;
}
body {
background: var(--bg);
color: var(--ink);
font-family: var(--font-body);
line-height: 1.8;
letter-spacing: 0.01em;
}
/* ── header ────────────────────────────────────────────────────────────────
One hairline under a quiet room: wordmark left, a few serif links after.
No search, no buttons, no calls to action. */
header {
border-bottom: 1px solid var(--line);
padding: 1.2rem 2rem;
display: flex;
align-items: center;
gap: 1.5rem;
}
header a.brand {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.1rem;
color: var(--bright);
text-decoration: none;
text-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}
header nav {
display: flex;
gap: 1rem;
}
header nav a {
font-family: var(--font-body);
color: #888;
text-decoration: none;
font-size: 0.85rem;
border-bottom: 1px solid transparent;
padding-bottom: 2px;
transition:
color 0.3s,
border-color 0.3s;
}
header nav a:hover {
color: var(--ink);
border-bottom-color: rgba(196, 160, 208, 0.3);
}
/* ── page column ───────────────────────────────────────────────────────────
One column, 740px, generous top. Long-form has no sidebar. */
main,
article {
max-width: 740px;
margin: 0 auto;
padding: 3rem 1.5rem 5rem;
}
/* ── type ──────────────────────────────────────────────────────────────── */
h1 {
font-family: var(--font-display);
font-weight: 700;
font-size: 2.2rem;
line-height: 1.2;
color: var(--bright);
margin-bottom: 0.5rem;
text-shadow: 0 0 20px var(--glow-2);
}
h2 {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.4rem;
color: var(--accent);
margin: 2.8rem 0 0.8rem;
}
h3 {
font-family: var(--font-display);
font-weight: 400;
font-size: 1.15rem;
color: #c4bcc8;
margin: 2rem 0 0.6rem;
}
p {
margin-bottom: 1.1rem;
}
strong {
color: var(--strong);
}
em {
color: var(--soft);
}
ul,
ol {
margin: 0.5rem 0 1rem 1.5rem;
}
li {
margin-bottom: 0.3rem;
}
.subtitle {
font-size: 1.05rem;
color: var(--muted);
margin-bottom: 2.5rem;
font-style: italic;
}
.tagline {
font-style: italic;
color: var(--faint);
font-size: 0.9rem;
margin-bottom: 2.5rem;
letter-spacing: 0.02em;
}
.meta {
font-size: 0.78rem;
color: var(--dim);
margin-bottom: 2rem;
border-bottom: 1px solid var(--line);
padding-bottom: 1rem;
font-family: var(--font-display);
letter-spacing: 0.03em;
}
/* ── links ─────────────────────────────────────────────────────────────────
Amber, dotted until touched. The glow on hover is the look's one flourish. */
a {
color: var(--accent);
text-decoration: none;
border-bottom: 1px dotted rgba(232, 160, 32, 0.3);
transition: border-color 0.3s, text-shadow 0.3s;
}
a:hover {
border-bottom-style: solid;
border-bottom-color: rgba(232, 160, 32, 0.6);
}
a.quiet {
color: var(--faint);
border-bottom: none;
}
a.quiet:hover {
color: var(--accent-2);
}
/* ── post list ─────────────────────────────────────────────────────────────
The index entry: title, italic description, date. Hover reveals a lavender
spine and the row leans in. */
.post {
border-bottom: 1px solid var(--line);
padding: 1.8rem 0;
padding-left: 0.8rem;
border-left: 2px solid transparent;
transition:
border-left-color 0.3s,
padding-left 0.3s;
}
.post:hover {
border-left-color: rgba(196, 160, 208, 0.35);
padding-left: 1.2rem;
}
.post:last-child {
border-bottom: none;
}
.post a,
.post-title {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.15rem;
color: var(--accent);
text-decoration: none;
border-bottom: none;
display: block;
margin-bottom: 0.4rem;
transition: text-shadow 0.3s;
}
.post a:hover {
text-shadow: 0 0 16px var(--glow);
}
.post .desc {
color: var(--muted);
font-size: 0.92rem;
font-style: italic;
line-height: 1.6;
}
.post .meta {
color: var(--dim);
font-size: 0.78rem;
margin-top: 0.4rem;
margin-bottom: 0;
border-bottom: none;
padding-bottom: 0;
font-family: var(--font-display);
letter-spacing: 0.03em;
}
/* ── code ────────────────────────────────────────────────────────────────── */
pre {
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1rem 1.2rem;
overflow-x: auto;
margin: 1rem 0 1.5rem;
font-size: 0.78rem;
line-height: 1.6;
}
pre code {
font-family: var(--font-mono);
color: #c8c8c8;
background: none;
padding: 0;
}
code {
font-family: var(--font-mono);
font-size: 0.85em;
background: var(--chip);
padding: 0.15em 0.4em;
border-radius: var(--radius-sm);
color: var(--accent);
}
/* ── blockquote ────────────────────────────────────────────────────────────
Words that arrived from outside the prose — chat messages, signals. The
footer carries a session-relative timestamp and a name, in mono. */
blockquote {
background: var(--panel);
border-left: 3px solid var(--accent);
padding: 1rem 1.2rem;
margin: 1.2rem 0 1.6rem;
color: var(--soft);
font-size: 0.95rem;
}
blockquote footer {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-top: 0.4rem;
padding: 0;
border: none;
font-family: var(--font-mono);
letter-spacing: 0.04em;
}
blockquote footer .ts {
font-size: 0.6rem;
color: var(--ghost);
}
blockquote footer .who {
font-size: 0.78rem;
color: var(--accent);
opacity: 0.6;
}
/* ── cards ─────────────────────────────────────────────────────────────────
For the rare boxed aside. The filed variant carries the lavender spine on
the right — a card pulled from a card catalogue. */
.card {
background: var(--panel-2);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1rem 1.2rem;
margin: 1.2rem 0 1.6rem;
}
.card--filed {
border-right: 2px solid rgba(196, 160, 208, 0.3);
}
/* ── stats table ─────────────────────────────────────────────────────────── */
.stats,
table {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
font-size: 0.85rem;
}
.stats th,
.stats td,
th,
td {
text-align: left;
padding: 0.5rem 0.8rem;
border-bottom: 1px solid var(--line);
}
.stats th,
th {
font-family: var(--font-display);
font-weight: 400;
color: var(--faint);
font-size: 0.75rem;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.stats td:last-child {
font-family: var(--font-mono);
color: var(--accent);
font-size: 0.8rem;
}
/* ── figures ─────────────────────────────────────────────────────────────── */
figure {
margin: 2rem -1.5rem;
text-align: center;
}
figure img {
width: 100%;
max-width: 740px;
border-radius: 4px;
display: block;
margin: 0 auto;
}
figure figcaption {
font-size: 0.72rem;
color: var(--dim);
margin-top: 0.5rem;
font-style: italic;
}
/* ── sign-off ──────────────────────────────────────────────────────────────
Attribution lives at the end, not the top. Italic serif, the name set in
lavender display face. */
.signoff {
margin-top: 2.5rem;
font-style: italic;
color: var(--faint);
font-size: 0.95rem;
}
.signoff .name {
color: var(--accent-2);
font-style: normal;
font-family: var(--font-display);
font-weight: 700;
}
/* ── dividers & footer ───────────────────────────────────────────────────── */
hr {
border: none;
border-top: 1px solid var(--line);
margin: 2rem 0;
}
body > footer {
text-align: center;
padding: 2.5rem 2rem;
color: var(--dim);
font-size: 0.78rem;
border-top: 1px solid var(--line);
}
body > footer a {
color: var(--faint);
text-decoration: none;
border-bottom: none;
transition: color 0.3s;
}
body > footer a:hover {
color: var(--accent-2);
}
.curator {
display: block;
margin-top: 0.4rem;
font-style: italic;
color: #443e4a;
font-size: 0.72rem;
letter-spacing: 0.04em;
}
/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
html {
font-size: 16px;
}
main,
article {
padding: 2rem 1rem 3rem;
}
h1 {
font-size: 1.7rem;
}
pre {
font-size: 0.72rem;
padding: 0.8rem;
}
figure {
margin: 2rem -1rem;
}
}
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; }
}