/* =====================================================================
redfish-style.css · v0.2.0 · 2026-07-21
The Redfish house style. Pantone 180 on paper, Swiss/GSD restraint.
Import and then write ordinary HTML. The point of this file is that a
plain
already looks right, so authors are not tempted
into the decorated-card habits this style exists to avoid.
Doctrine, including the anti-AI-tell rules this file encodes:
https://redfish.acequia.io/skills/redfish-style/SKILL.md
===================================================================== */
:root {
/* --- ink and ground: NEUTRAL near-white and near-black (v0.3.0, 2026-07-28) ---
De-warmed on Stephen's directive: "i hate brown ... black, shades of gray and
pantone red." The prior warm cast (#faf9f7 / #14130f warm-dark) read as BROWN and
was never instructed — his init said pantone-180 + GSD minimalism + conservative
colour, which is NEUTRAL. Grays are now equal-RGB; the ONLY hue is Pantone 180. */
--rf-ground: #fafafa; /* neutral near-white; not #fff, not warm, not slate */
--rf-ground-sunk: #f1f1f1; /* recessed areas (a figure well, a code block) */
--rf-ink: #141414; /* neutral near-black; pure #000 is harsh on white */
--rf-ink-quiet: #5a5a5a; /* secondary text, captions, metadata */
--rf-ink-faint: #8a8a8a; /* tertiary: axis labels, timestamps */
--rf-rule: #dcdcdc; /* hairline. The house divider. Use instead of boxes */
--rf-rule-strong: #b4b4b4;
/* --- the one accent: PANTONE 180 --- */
/* Conversions in circulation differ slightly (#BE3A34 and #B93530 are both
published for 180 C). We standardise on #BE3A34. Confirm against a physical
chip before anything goes to print. */
--rf-accent: #be3a34;
--rf-accent-deep: #962b26; /* hover/active/pressed */
--rf-accent-wash: #f7e9e8; /* the ONLY tinted fill permitted, used rarely */
/* Data colours. For charts only, never for chrome. Ordered by use. Chosen to
hold up against the paper ground and to stay distinguishable in greyscale
and for the common colour-vision deficiencies. */
--rf-data-1: #be3a34; /* accent, the series under discussion */
--rf-data-2: #2f4b5c; /* slate blue */
--rf-data-3: #7a8b3f; /* olive */
--rf-data-4: #c47a25; /* ochre */
--rf-data-5: #5d4a6b; /* muted plum */
--rf-data-6: #3f7a70; /* teal */
/* --- type: neutral grotesque. NOT Inter, NOT Geist. --- */
--rf-sans: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
--rf-mono: "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
/* Floor is 15px body / 14px controls: Stephen uses readers, and the floor is
a hard accessibility rule in this house, not a preference. */
--rf-size-body: 17px;
--rf-size-small: 15px;
--rf-size-control: 15px;
--rf-lead: 1.6;
/* --- space: a 4px rhythm, generous margins --- */
--rf-s1: 4px; --rf-s2: 8px; --rf-s3: 12px; --rf-s4: 16px;
--rf-s5: 24px; --rf-s6: 32px; --rf-s7: 48px; --rf-s8: 72px;
--rf-measure: 68ch; /* text column: readable line length */
--rf-page: 1080px;
/* --- motion: transitions are designed, so they get named durations --- */
--rf-t-quick: 120ms;
--rf-t-base: 200ms;
--rf-t-slow: 340ms;
--rf-ease: cubic-bezier(.2, .6, .2, 1);
/* Corners are square. A 2px softening is the maximum this house allows;
12-16px pill-everything is the single loudest AI-UI tell. */
--rf-radius: 2px;
}
@media (prefers-color-scheme: dark) {
:root {
/* NEUTRAL dark (v0.3.0, 2026-07-28): true near-black, no brown. The old warm
#14130f dark ground was the "brown background" Stephen rejected. */
--rf-ground: #121212;
--rf-ground-sunk: #1c1c1c;
--rf-ink: #eaeaea;
--rf-ink-quiet: #a6a6a6;
--rf-ink-faint: #7c7c7c;
--rf-rule: #303030;
--rf-rule-strong: #4a4a4a;
--rf-accent: #de4b44; /* Pantone 180, lifted for contrast on dark ground */
--rf-accent-deep: #ea6e67;
--rf-accent-wash: #241a1a;
}
}
/* --------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
background: var(--rf-ground);
color: var(--rf-ink);
font: var(--rf-size-body)/var(--rf-lead) var(--rf-sans);
-webkit-font-smoothing: antialiased;
}
.rf-page { max-width: var(--rf-page); margin: 0 auto; padding: var(--rf-s7) var(--rf-s5) var(--rf-s8); }
.rf-measure { max-width: var(--rf-measure); }
/* ---------------------------------------------------------------- type */
/* Hierarchy carried by size and weight, never by colour or gradient. */
h1, h2, h3, h4 { font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 var(--rf-s3); }
h1 { font-size: clamp(30px, 4.4vw, 46px); letter-spacing: -0.025em; }
h2 { font-size: clamp(21px, 2.4vw, 27px); margin-top: var(--rf-s7); }
h3 { font-size: 19px; margin-top: var(--rf-s5); }
p { margin: 0 0 var(--rf-s4); max-width: var(--rf-measure); }
/* The house label: small, uppercase, tracked, quiet. Used for eyebrows and
figure numbers. This replaces the badge/pill habit. */
.rf-label {
font-size: 12px; text-transform: uppercase; letter-spacing: 0.11em;
color: var(--rf-ink-faint); font-weight: 600;
}
.rf-lede { font-size: 20px; line-height: 1.45; color: var(--rf-ink-quiet); max-width: var(--rf-measure); }
.rf-caption, figcaption { font-size: var(--rf-size-small); color: var(--rf-ink-quiet); max-width: var(--rf-measure); }
small, .rf-small { font-size: var(--rf-size-small); color: var(--rf-ink-quiet); }
/* Links: underlined, ink-coloured, accent on hover. Never a coloured button
pretending to be a link. */
a { color: inherit; text-decoration: underline; text-underline-offset: 3px;
text-decoration-thickness: 1px; text-decoration-color: var(--rf-rule-strong);
transition: color var(--rf-t-quick) var(--rf-ease), text-decoration-color var(--rf-t-quick) var(--rf-ease); }
a:hover { color: var(--rf-accent); text-decoration-color: var(--rf-accent); }
/* ------------------------------------------------------- rules, not boxes */
hr, .rf-rule { border: 0; border-top: 1px solid var(--rf-rule); margin: var(--rf-s6) 0; }
/* A "panel" is defined by a rule and space, not a border-radius drop-shadow card. */
.rf-panel { border-top: 1px solid var(--rf-rule); padding-top: var(--rf-s4); margin: var(--rf-s6) 0; }
.rf-panel--accent { border-top-color: var(--rf-accent); }
/* A figure well: recessed ground, square, hairline. Where canvases live. */
.rf-figure { background: var(--rf-ground-sunk); border: 1px solid var(--rf-rule);
border-radius: var(--rf-radius); padding: var(--rf-s3); margin: var(--rf-s5) 0; }
.rf-figure canvas, .rf-figure video, .rf-figure img { display: block; width: 100%; border-radius: 0; }
/* ------------------------------------------------------------- controls */
/* Controls are quiet until relevant. See the Gibson section of the SKILL:
surface what THIS user can act on now, and let the rest recede. */
button, .rf-btn {
font: 600 var(--rf-size-control)/1 var(--rf-sans);
color: var(--rf-ink); background: transparent;
border: 1px solid var(--rf-rule-strong); border-radius: var(--rf-radius);
padding: 9px 15px; cursor: pointer;
transition: border-color var(--rf-t-quick) var(--rf-ease),
color var(--rf-t-quick) var(--rf-ease),
background var(--rf-t-quick) var(--rf-ease);
}
button:hover, .rf-btn:hover { border-color: var(--rf-accent); color: var(--rf-accent); }
button:active, .rf-btn:active { background: var(--rf-accent-wash); }
button[aria-pressed="true"], .rf-btn--on {
border-color: var(--rf-accent); background: var(--rf-accent); color: #fff;
}
button:disabled { opacity: .38; cursor: not-allowed; border-color: var(--rf-rule); }
/* Focus is always visible. Non-negotiable. */
:focus-visible { outline: 2px solid var(--rf-accent); outline-offset: 2px; }
label { font-size: var(--rf-size-control); color: var(--rf-ink-quiet); }
input[type="range"] { accent-color: var(--rf-accent); vertical-align: middle; }
input[type="text"], input[type="search"], select, textarea {
font: var(--rf-size-control)/1.4 var(--rf-sans);
color: var(--rf-ink); background: var(--rf-ground);
border: 1px solid var(--rf-rule-strong); border-radius: var(--rf-radius); padding: 8px 10px;
}
/* The readout: monospace, quiet, for live numbers coming off a simulation.
Numbers that are CHANGING take the accent; static ones stay ink. */
.rf-readout { font: var(--rf-size-small)/1.5 var(--rf-mono); color: var(--rf-ink-quiet); }
.rf-readout b { font-weight: 400; color: var(--rf-accent); font-variant-numeric: tabular-nums; }
/* --------------------------------------------------------------- tables */
table { border-collapse: collapse; width: 100%; font-size: var(--rf-size-small); margin: var(--rf-s4) 0; }
th, td { text-align: left; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--rf-rule); vertical-align: top; }
th { font-weight: 600; color: var(--rf-ink-quiet); text-transform: uppercase; font-size: 12px; letter-spacing: .08em; }
/* ---------------------------------------------------------------- misc */
code, pre { font-family: var(--rf-mono); font-size: 14px; }
pre { background: var(--rf-ground-sunk); border: 1px solid var(--rf-rule); padding: var(--rf-s3);
border-radius: var(--rf-radius); overflow-x: auto; }
/* Footer: the provenance edge. Every deployed page carries one. */
.rf-footer { border-top: 1px solid var(--rf-rule); margin-top: var(--rf-s8); padding-top: var(--rf-s4);
font-size: var(--rf-size-small); color: var(--rf-ink-faint);
display: flex; gap: var(--rf-s4); flex-wrap: wrap; align-items: baseline; }
/* Honour the user's motion preference. A paused frame must still be legible. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
/* ------------------------------------------------- map-site chrome (v0.2.0)
Stephen's directive, 2026-07-21 (venice-traffic feedback): map sites are
FULL-VIEWPORT by default; UI rides as overlays that open and close; headers
are minimal; every map site carries a fullscreen toggle and a hide-UI
affordance. This block is the shared chrome those rules ride on.
THE SKIN IS LINKED, NOT VENDORED: behavior components are vendored and
conformance-checked, but this stylesheet is referenced at its canonical URL
so one change here reskins every Redfish site. */
.rf-map-page { position: fixed; inset: 0; overflow: hidden; background: var(--rf-ground); }
.rf-map-page .rf-map { position: absolute; inset: 0; }
.rf-overlay { position: absolute; z-index: 1000; background: var(--rf-ground);
border: 1px solid var(--rf-rule); border-radius: var(--rf-radius); }
/* the minimal header: a logo chip + a short title, nothing else by default */
.rf-logo-chip { display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; background: #141414; border-radius: var(--rf-radius);
flex: none; }
.rf-logo-chip img { width: 22px; height: 22px; display: block; }
/* square quiet buttons for map chrome (fullscreen, hide-UI, panel toggle) */
.rf-fab { width: 32px; height: 32px; display: grid; place-items: center; font-size: 15px;
background: var(--rf-ground); border: 1px solid var(--rf-rule);
border-radius: var(--rf-radius); cursor: pointer; color: var(--rf-ink); padding: 0; }
.rf-fab:hover { border-color: var(--rf-ink); }
.rf-fab.on { background: var(--rf-ink); color: var(--rf-ground); }
/* hide-UI state: everything tagged .rf-ui withdraws; the restore control stays
perceivable (Gibson: the affordance back must remain real) */
body.rf-ui-hidden .rf-ui { display: none !important; }
.rf-ui-restore { opacity: 0.35; }
.rf-ui-restore:hover, body:not(.rf-ui-hidden) .rf-ui-restore { opacity: 1; }
/* minimize-tabs (v0.2.4, 2026-07-24, Stephen's incident-viewer house-style ask):
every overlay panel carries a persistent slim edge tab that collapses the
panel to the tab and restores it from there; timelines dock collapsed by
default and expansion state belongs to the user. The tab stays perceivable
while minimized (Gibson: the way back is always visible). 14px is the
control-text floor; the tab never goes below it. */
.rf-min-tab { display: inline-flex; align-items: center; gap: var(--rf-s2);
font: 600 14px/1 var(--rf-sans); letter-spacing: .04em;
color: var(--rf-ink-quiet); background: var(--rf-ground);
border: 1px solid var(--rf-rule); border-radius: var(--rf-radius);
padding: 6px 10px; cursor: pointer;
transition: color var(--rf-t-quick) var(--rf-ease),
border-color var(--rf-t-quick) var(--rf-ease); }
.rf-min-tab:hover { color: var(--rf-ink); border-color: var(--rf-rule-strong); }
/* collapsed state helper: the panel body withdraws, the tab remains */
.rf-collapsed > :not(.rf-min-tab) { display: none; }