/* ============================================================
SAWYER HOUSE TOOLS — shared.css
============================================================
One stylesheet for every standalone tool. Link it once:
Keep each tool's own Google Fonts tags in .
Add this to :
THEME: set on . Default (no attribute) is paper.
data-theme="noir" is dark. Pair with theme-toggle.js for a
persisted switcher, or just hardcode one per tool.
STRUCTURE: Paper is the default — high-contrast, ruled,
architectural. Noir inverts to dark surfaces with the same
ruled, zero-radius geometry. Both share identical structure.
============================================================ */
/* ---------- Design tokens: shared across themes ---------- */
:root {
--font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
--font-body: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
--font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--transition: 0.12s ease;
/* Structure */
--radius: 0px;
--radius-sm: 0px;
--shadow: none;
--shadow-lg: none;
--border-w: 1px;
--rule-w: 2px; /* structural rule weight — chapter headers, etc. */
--panel-border-style: solid;
}
/* ---------- Paper theme (light, default) ---------- */
:root,
html[data-theme="paper"] {
--bg: #F0EDE6;
--panel: #F7F5F1;
--panel-2: #EAE6DE;
--panel-3: #E2DDD4;
--ink: #1A1917;
--muted: #9A9590;
--line: #D5D0C8;
/* Accent = ink itself — no color chrome, just weight */
--accent: #1A1917;
--accent-dim: rgba(26, 25, 23, 0.08);
--accent-glow: rgba(26, 25, 23, 0.20);
--accent-ink: #F7F5F1;
--sage: #4A6B52;
--sage-dim: rgba(74, 107, 82, 0.12);
--danger: #8B2E2E;
--danger-dim: rgba(139, 46, 46, 0.10);
}
/* ---------- Noir theme (dark) ---------- */
html[data-theme="noir"] {
--bg: #111110;
--panel: #1A1917;
--panel-2: #222120;
--panel-3: #2A2927;
--ink: #EDE8DF;
--muted: #7A7670;
--line: #333230;
--accent: #EDE8DF;
--accent-dim: rgba(237, 232, 223, 0.10);
--accent-glow: rgba(237, 232, 223, 0.20);
--accent-ink: #1A1917;
--sage: #6A9472;
--sage-dim: rgba(106, 148, 114, 0.14);
--danger: #C05050;
--danger-dim: rgba(192, 80, 80, 0.14);
}
/* ============================================================
Base reset
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--font-body);
-webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent-dim); color: var(--ink); }
a { color: var(--accent); }
hr {
border: none;
border-top: var(--border-w) solid var(--line);
margin: var(--space-5) 0;
}
/* ============================================================
Typography
============================================================ */
h1, h2, h3, .display {
font-family: var(--font-display);
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.15;
margin: 0;
color: var(--ink);
}
h1, .display-lg { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
h2, .display-md { font-size: 1.5rem; }
h3, .display-sm { font-size: 1.1rem; font-weight: 500; }
h1 em, h2 em, .display em {
font-style: italic;
color: var(--accent);
}
.eyebrow {
font-family: var(--font-mono);
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
}
.eyebrow.accent { color: var(--accent); }
p { line-height: 1.6; color: var(--ink); }
.muted { color: var(--muted); }
.mono {
font-family: var(--font-mono);
font-size: 0.82rem;
}
/* ============================================================
Layout shells
============================================================ */
.page {
max-width: 960px;
margin: 0 auto;
padding: var(--space-7) var(--space-5) var(--space-8);
}
/* ============================================================
Tool header — ruled, typographic, no surface
============================================================ */
.tool-header {
display: flex;
align-items: center;
gap: var(--space-4);
padding: 0 var(--space-5);
height: 52px;
border-bottom: var(--border-w) solid var(--line);
border-top: var(--rule-w) solid var(--ink);
background: var(--bg);
flex-wrap: nowrap;
flex-shrink: 0;
}
.tool-header h1 {
font-family: var(--font-mono);
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
margin: 0;
color: var(--ink);
display: flex;
align-items: center;
gap: var(--space-3);
white-space: nowrap;
}
/* Remove dot — replaced by the thick top rule as accent */
.tool-header .dot { display: none; }
/* Image brand mark */
.tool-header .brand-mark {
width: 18px;
height: 18px;
border-radius: 0; /* no softness */
object-fit: cover;
flex-shrink: 0;
opacity: 0.7;
}
/* Expanding breadcrumb — same structure, quieter motion */
.brand-crumb {
display: inline-flex;
align-items: center;
text-decoration: none;
color: inherit;
line-height: 0;
}
.brand-crumb-expand {
display: inline-flex;
align-items: center;
gap: 6px;
max-width: 0;
opacity: 0;
overflow: hidden;
white-space: nowrap;
line-height: normal;
transition: max-width var(--transition), opacity var(--transition), margin var(--transition);
}
.brand-crumb:hover .brand-crumb-expand,
.brand-crumb:focus-visible .brand-crumb-expand {
max-width: 260px;
opacity: 1;
margin-left: 10px;
}
.brand-crumb-expand em {
font-family: var(--font-mono);
font-style: normal;
font-weight: 400;
font-size: 0.68rem;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--muted);
}
.brand-crumb-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--muted);
flex-shrink: 0;
}
.tool-header .spacer { flex: 1; }
.tool-header .home-link {
font-family: var(--font-mono);
font-size: 0.72rem;
color: var(--muted);
text-decoration: none;
letter-spacing: 0.06em;
}
.tool-header .home-link:hover { color: var(--ink); }
/* Vertical divider between tool name and controls */
.tool-header .header-divider {
width: 1px;
height: 24px;
background: var(--line);
flex-shrink: 0;
}
/* ============================================================
Panels / cards — no radius, ruled edges only
============================================================ */
.panel, .card {
background: var(--panel);
border: var(--border-w) solid var(--line);
border-radius: 0;
box-shadow: none;
padding: var(--space-5);
}
.card {
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
gap: var(--space-2);
transition: border-color var(--transition), background var(--transition);
}
/* Hover: one edge thickens instead of glowing */
.card:hover {
border-left-width: 2px;
border-left-color: var(--ink);
background: var(--panel-2);
}
.card-title {
font-family: var(--font-display);
font-size: 1.0rem;
font-weight: 600;
}
.card-desc {
font-size: 0.84rem;
color: var(--muted);
line-height: 1.5;
}
.card-link {
margin-top: var(--space-2);
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.08em;
color: var(--muted);
text-transform: uppercase;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: var(--space-3);
}
/* ============================================================
Buttons — mono face, hairline border, no radius
============================================================ */
button, .btn {
font-family: var(--font-mono);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
background: transparent;
border: var(--border-w) solid var(--line);
color: var(--muted);
padding: 0.55rem 1.0rem;
border-radius: 0;
cursor: pointer;
transition: border-color var(--transition), color var(--transition), background var(--transition);
}
button:hover:not(:disabled), .btn:hover:not(:disabled) {
border-color: var(--ink);
color: var(--ink);
}
button:focus-visible, .btn:focus-visible {
outline: 2px solid var(--ink);
outline-offset: 2px;
}
button:disabled, .btn:disabled { opacity: 0.35; cursor: default; }
/* Primary: solid ink fill */
button.primary, .btn.primary {
background: var(--ink);
border-color: var(--ink);
color: var(--accent-ink);
}
button.primary:hover:not(:disabled), .btn.primary:hover:not(:disabled) {
opacity: 0.88;
color: var(--accent-ink);
}
button.danger, .btn.danger { border-color: var(--danger); color: var(--danger); }
button.danger:hover:not(:disabled), .btn.danger:hover:not(:disabled) { background: var(--danger-dim); }
/* ============================================================
Forms
============================================================ */
input, select, textarea {
font-family: var(--font-mono);
font-size: 0.82rem;
background: var(--panel);
border: var(--border-w) solid var(--line);
color: var(--ink);
border-radius: 0;
padding: 0.5rem 0.65rem;
appearance: none;
-webkit-appearance: none;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
outline: 2px solid var(--ink);
outline-offset: 1px;
border-color: var(--ink);
}
label {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
/* Drop-zone */
.dropzone {
border: 1px dashed var(--line);
border-radius: 0;
padding: var(--space-6);
text-align: center;
color: var(--muted);
font-family: var(--font-mono);
font-size: 0.82rem;
transition: border-color var(--transition), color var(--transition);
}
.dropzone.active, .dropzone:hover {
border-color: var(--ink);
color: var(--ink);
}
/* ============================================================
Status / pills / badges
============================================================ */
.status {
font-family: var(--font-mono);
font-size: 0.72rem;
color: var(--muted);
letter-spacing: 0.04em;
}
.status.err { color: var(--danger); }
.status.ok { color: var(--sage); }
.pill {
display: inline-flex;
align-items: center;
gap: 0.35em;
font-family: var(--font-mono);
font-size: 0.66rem;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.22em 0.55em;
border-radius: 0;
border: var(--border-w) solid var(--line);
color: var(--muted);
}
.pill.accent { border-color: var(--ink); color: var(--ink); background: var(--accent-dim); }
.pill.ok { border-color: var(--sage); color: var(--sage); background: var(--sage-dim); }
.pill.err { border-color: var(--danger); color: var(--danger); background: var(--danger-dim); }
/* ============================================================
Rows / tables
============================================================ */
.row-list {
border: var(--border-w) solid var(--line);
border-radius: 0;
overflow: hidden;
}
.row {
display: flex;
gap: var(--space-3);
padding: var(--space-2) var(--space-3);
border-bottom: var(--border-w) solid var(--line);
font-family: var(--font-mono);
font-size: 0.82rem;
}
.row:last-child { border-bottom: none; }
.row:hover { background: var(--panel-2); }
.row .type { width: 110px; flex-shrink: 0; color: var(--muted); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; }
.row .text { color: var(--ink); white-space: pre-wrap; font-family: var(--font-body); }
/* ============================================================
Tab navigation — ruled baseline, chapter-marker style
============================================================ */
nav.tabs {
display: flex;
align-items: stretch;
gap: 0;
padding: 0 var(--space-5);
background: var(--bg);
border-bottom: var(--border-w) solid var(--line);
flex-shrink: 0;
}
nav.tabs button {
background: transparent;
border: none;
border-top: 2px solid transparent;
border-radius: 0;
padding: 14px 20px 12px;
color: var(--muted);
font-family: var(--font-mono);
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
cursor: pointer;
transition: color var(--transition), border-color var(--transition);
white-space: nowrap;
}
nav.tabs button:hover:not(.active) { color: var(--ink); }
nav.tabs button.active {
color: var(--ink);
border-top-color: var(--ink);
}
.tabs-spacer { flex: 1; }
/* ============================================================
Theme toggle
============================================================ */
.theme-toggle {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-mono);
font-size: 0.68rem;
color: var(--muted);
}
.theme-toggle button.theme-swatch {
display: flex;
align-items: center;
gap: 0.4em;
padding: 0.3rem 0.55rem;
border-radius: 0;
}
.theme-toggle button.theme-swatch.active {
border-color: var(--ink);
color: var(--ink);
}
.swatch-dot {
width: 8px;
height: 8px;
border-radius: 0;
flex-shrink: 0;
}
/* ============================================================
Section titles — ruled, label-weight
============================================================ */
.section-title {
font-family: var(--font-mono);
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
padding-bottom: var(--space-2);
border-bottom: var(--border-w) solid var(--line);
margin-bottom: var(--space-4);
display: flex;
align-items: center;
gap: var(--space-3);
}
.section-title::after { display: none; } /* remove old flex-line trick */
/* ============================================================
Motion & accessibility
============================================================ */
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }