/* ============================================================ StillRidge Labs, theme tokens (Topo direction) Default palette: Slate. Alpine and Granite are alternates. Light is the default. Dark engages either: - via [data-theme="dark"] on , OR - automatically via @media (prefers-color-scheme: dark) when [data-theme] is not set. USAGE html.no-theme -> ignore prefers-color-scheme html[data-theme="light"] -> force light html[data-theme="dark"] -> force dark html[data-palette="alpine"] -> alpine palette (teal + copper) html[data-palette="granite"] -> granite palette (warm grey + tan) ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Newsreader:ital,opsz,wght@0,6..72,300..700;1,6..72,300..700&family=Geist:wght@300..700&family=Geist+Mono:wght@300..600&display=swap'); :root { /* ---------- type ---------- */ --font-display: "Instrument Serif", "Newsreader", "Iowan Old Style", Georgia, serif; --font-ui: "Geist", system-ui, -apple-system, Helvetica Neue, sans-serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; /* ---------- spacing ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* ---------- radii (kept small on purpose) ---------- */ --radius-1: 0; --radius-2: 2px; --radius-3: 4px; --radius-4: 8px; /* ---------- transitions ---------- */ --t-fast: 120ms ease-out; --t-base: 220ms ease-out; /* ============================================================ SLATE palette · default · stone + copper ============================================================ */ --paper: #f3f1ec; /* warm off-white */ --paper-raised: #fbf9f4; --ink: #1c1f24; --ink-mute: #5d6470; --ink-soft: #9aa0aa; --line: rgba(28, 31, 36, 0.10); --line-strong: rgba(28, 31, 36, 0.22); --primary: #2d3540; /* slate stone, primary surface in dark mode, primary text accents in light */ --primary-deep: #1a2028; --accent: #a86d3a; /* warm copper, for links, highlights, the peak dot */ --accent-soft: rgba(168, 109, 58, 0.10); /* status (kept restrained, this is a studio, not a dashboard) */ --ok: #4a6b46; --warn: #a07020; --danger: #a8442a; color-scheme: light; } /* ---------- Alpine: deep teal + copper ---------- */ :root[data-palette="alpine"] { --paper: #eef1ee; --paper-raised: #f6f8f5; --ink: #15201e; --ink-mute: #56635f; --ink-soft: #94a09c; --line: rgba(21, 32, 30, 0.10); --line-strong: rgba(21, 32, 30, 0.22); --primary: #1f4748; --primary-deep: #0f2c2e; --accent: #c08552; --accent-soft: rgba(192, 133, 82, 0.10); } /* ---------- Granite: warm grey + tan ---------- */ :root[data-palette="granite"] { --paper: #f0eeea; --paper-raised: #f8f6f1; --ink: #1a1a1a; --ink-mute: #5a5a5a; --ink-soft: #969696; --line: rgba(0, 0, 0, 0.10); --line-strong: rgba(0, 0, 0, 0.22); --primary: #3a3a3a; --primary-deep: #1d1d1d; --accent: #7d5a3c; --accent-soft: rgba(125, 90, 60, 0.10); } /* ============================================================ Dark mode, only swap surface + ink. Accent stays warm. ============================================================ */ :root[data-theme="dark"] { --paper: #14181f; --paper-raised: #1a2028; --ink: #e9e6e0; --ink-mute: #9ba2ad; --ink-soft: #5c6371; --line: rgba(233, 230, 224, 0.10); --line-strong: rgba(233, 230, 224, 0.22); --primary: #e9e6e0; /* primary becomes paper-tone, sits ON dark surface */ --primary-deep: #ffffff; --accent: #c08552; /* copper warms up slightly */ --accent-soft: rgba(192, 133, 82, 0.16); color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not(.no-theme) { --paper: #14181f; --paper-raised: #1a2028; --ink: #e9e6e0; --ink-mute: #9ba2ad; --ink-soft: #5c6371; --line: rgba(233, 230, 224, 0.10); --line-strong: rgba(233, 230, 224, 0.22); --primary: #e9e6e0; --primary-deep: #ffffff; --accent: #c08552; --accent-soft: rgba(192, 133, 82, 0.16); color-scheme: dark; } } /* ============================================================ Base ============================================================ */ html, body { background: var(--paper); color: var(--ink); font-family: var(--font-ui); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-wrap: pretty; } ::selection { background: var(--accent); color: var(--paper); } a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-strong); transition: color var(--t-fast), border-color var(--t-fast); } a:hover { color: var(--accent); border-bottom-color: var(--accent); } hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-6) 0; } /* All numerics tabular by default, feels lab-like. */ .num, code, kbd, samp, pre, table, td, th, time { font-variant-numeric: tabular-nums; } /* ============================================================ Type scale ============================================================ */ .h1 { font-family: var(--font-display); font-size: clamp(40px, 6vw, 84px); font-weight: 400; line-height: 1.02; letter-spacing: -0.02em; margin: 0; } .h2 { font-family: var(--font-display); font-size: clamp(28px, 4vw, 48px); font-weight: 400; line-height: 1.1; letter-spacing: -0.015em; margin: 0; } .h3 { font-family: var(--font-ui); font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: -0.005em; margin: 0; } .lede { font-family: var(--font-display); font-style: italic; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.35; color: var(--ink-mute); letter-spacing: -0.005em; } .eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute); } .body { font-size: 16px; line-height: 1.65; } .small { font-size: 13px; line-height: 1.5; color: var(--ink-mute); } .mono { font-family: var(--font-mono); } .serif { font-family: var(--font-display); } /* Italic span, used liberally in headlines (e.g. "a quiet *studio*") */ em { font-style: italic; } /* ============================================================ Wordmark lockup ============================================================ */ .lockup { display: inline-flex; align-items: center; gap: 14px; color: var(--ink); } .lockup__icon { width: 36px; height: 36px; color: var(--ink); flex: none; } .lockup__icon .peak { fill: var(--accent); } /* override the peak dot to copper */ .lockup__name { font-family: var(--font-ui); font-weight: 500; font-size: 26px; letter-spacing: -0.035em; line-height: 1; } .lockup__suffix { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute); align-self: center; border-left: 1px solid var(--line); padding-left: 12px; margin-left: 2px; } /* ============================================================ Buttons ============================================================ */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); height: 44px; padding: 0 var(--space-5); font-family: var(--font-ui); font-size: 14px; font-weight: 500; letter-spacing: -0.005em; border: 1px solid var(--ink); background: transparent; color: var(--ink); border-radius: var(--radius-3); cursor: pointer; transition: background var(--t-fast), color var(--t-fast); } .btn:hover { background: var(--ink); color: var(--paper); } .btn--primary { background: var(--ink); color: var(--paper); } .btn--primary:hover { background: var(--primary-deep); } .btn--ghost { border-color: transparent; color: var(--ink-mute); } .btn--ghost:hover { background: transparent; color: var(--ink); } /* ============================================================ Surfaces ============================================================ */ .card { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-3); padding: var(--space-5) var(--space-6); } .hairline-top { border-top: 1px solid var(--line); } .hairline-bottom { border-bottom: 1px solid var(--line); } /* Section container, generous, editorial */ .section { padding: var(--space-9) 0; border-top: 1px solid var(--line); } .container { width: min(1200px, calc(100% - 64px)); margin-inline: auto; } /* ============================================================ Decorative, contour line accent ============================================================ */ .contours { position: relative; } .contours::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient( to bottom, transparent 0, transparent 38px, var(--line) 38px, var(--line) 39px ); opacity: 0.5; pointer-events: none; } /* "topo" curve underline, for headlines */ .underline-topo { background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 8px; padding-bottom: 8px; } /* ============================================================ Forms (minimal) ============================================================ */ .input { height: 44px; padding: 0 var(--space-4); font-family: var(--font-ui); font-size: 15px; background: var(--paper); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-3); } .input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; } /* ============================================================ Footer mark ============================================================ */ .colophon { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); } .colophon__icon { width: 18px; height: 18px; color: var(--ink-mute); }