/* ===================================================================== Marvel Mirror AI — colors_and_type.css The foundational tokens for the "Editorial Research Notebook" system. Imported by every preview card, UI kit screen and slide template. ===================================================================== */ /* ---------- Webfonts --------------------------------------------------- Source Serif 4 (Adobe, SIL OFL) is the book serif; JetBrains Mono (SIL OFL) carries the uppercase metadata. Both are SELF-HOSTED from /fonts — the same latin woff2 subsets the app bundles via @fontsource, so the site and the product render identically. They used to come from Google Fonts via an @import here, which was wrong twice over. It contradicted the pitch: every page of a site whose whole argument is "no cloud, no account, no telemetry" called a Google server on load. And an @import inside a stylesheet is the slowest way to load a font — the browser must fetch tokens.css before it can even discover the font request, serialising two extra round trips ahead of first paint, on connections where round-trip time is the thing that hurts. Self-hosting also removes one of the two blockers on adding a Content-Security-Policy (see _headers); the other is Cloudflare's email obfuscation. Only the weights the site actually uses are here: 400/500/600/700 roman and 400/500/600 italic for the serif, 400/500/600 for the mono. woff2 only — every browser that can run this site supports it, and a .woff fallback would be bytes nothing ever fetches. ---------------------------------------------------------------------- */ @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/source-serif-4-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/source-serif-4-latin-500-normal.woff2") format("woff2"); } @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/source-serif-4-latin-600-normal.woff2") format("woff2"); } @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/source-serif-4-latin-700-normal.woff2") format("woff2"); } @font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/source-serif-4-latin-400-italic.woff2") format("woff2"); } @font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 500; font-display: swap; src: url("/fonts/source-serif-4-latin-500-italic.woff2") format("woff2"); } @font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 600; font-display: swap; src: url("/fonts/source-serif-4-latin-600-italic.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/jetbrains-mono-latin-600-normal.woff2") format("woff2"); } :root { /* ========================================================= COLOR — Paper & Ink The substrate of the whole product. Off-white "paper", near-black "ink", warm neutral mid-tones. ========================================================= */ --paper: #F6F2EA; /* primary background, warm off-white */ --paper-raised: #FBF8F2; /* cards lifted off paper */ --paper-sunken: #EDE7DB; /* wells, search fields, code blocks */ --paper-edge: #E3DBC9; /* hairline borders on warm surfaces */ --ink: #1C1A16; /* primary text — near-black with a touch of warmth */ --ink-2: #3A362E; /* secondary text */ --ink-3: #6B6558; /* tertiary text, metadata */ --ink-4: #9B9485; /* faint text, placeholder */ --ink-5: #C6BEAD; /* dim gray — queued, disabled, inactive */ /* ========================================================= COLOR — Brand & Feature Accents Each accent has tint (~10–12%) and hairline border variants for the tinted-card pattern. ========================================================= */ /* Champagne — primary accent: buttons, selection, citations */ --champagne: #D3C5AC; --champagne-hover: #C8B89A; --champagne-press: #B9A684; --champagne-tint: rgba(211, 197, 172, 0.16); --champagne-rail: #C8B89A; --champagne-edge: rgba(185, 166, 132, 0.45); /* Slate Indigo — Knowledge Graph feature */ --indigo: #61759E; --indigo-hover: #54688F; --indigo-tint: rgba(97, 117, 158, 0.12); --indigo-edge: rgba(97, 117, 158, 0.32); /* Umber — warm secondary accent (citations, source documents) */ --umber: #946B3D; --umber-hover: #815C32; --umber-tint: rgba(148, 107, 61, 0.12); --umber-edge: rgba(148, 107, 61, 0.32); /* Reasoning — "model thinking" purple at ~85% */ --reasoning: rgba(112, 90, 156, 0.85); --reasoning-solid: #705A9C; --reasoning-tint: rgba(112, 90, 156, 0.10); --reasoning-edge: rgba(112, 90, 156, 0.30); /* Sage — success / completed */ --sage: #80B385; --sage-hover: #6FA174; --sage-tint: rgba(128, 179, 133, 0.12); --sage-edge: rgba(128, 179, 133, 0.32); /* Terra-cotta — failure / alert (muted) */ --terracotta: #B07A6B; --terracotta-hover: #9C6857; --terracotta-tint: rgba(176, 122, 107, 0.12); --terracotta-edge: rgba(176, 122, 107, 0.32); /* Queued / inactive (dim gray) */ --queued: #ADA694; --queued-tint: rgba(173, 166, 148, 0.14); --queued-edge: rgba(173, 166, 148, 0.34); /* ========================================================= COLOR — Semantic Reference the palette above through semantic names so components stay readable. ========================================================= */ --bg: var(--paper); --bg-raised: var(--paper-raised); --bg-sunken: var(--paper-sunken); --hairline: var(--paper-edge); --hairline-strong: #D3C9B4; --fg: var(--ink); --fg-2: var(--ink-2); --fg-muted: var(--ink-3); --fg-faint: var(--ink-4); --fg-disabled: var(--ink-5); --accent: var(--champagne); --selection-bg: var(--champagne-tint); --selection-edge: var(--champagne-edge); --state-processing: var(--champagne-rail); --state-reasoning: var(--reasoning-solid); --state-complete: var(--sage); --state-failed: var(--terracotta); --state-queued: var(--queued); /* --------------------------------------------------------- TEXT-SAFE ACCENTS (sextonapp.com addition) The accent hues above are display colors, chosen against the app's chrome. On this site's lighter paper several of them do not clear WCAG AA as WORDS, so each one that carries text has a darkened sibling here. The display hues are untouched — rails, fills, tints and borders still use them. Measured with the WCAG 2 formula against the surface each one actually sits on: --fg-ok #456F4A 5.46:1 on --paper-raised (the sage money hex #4F7F55 is 4.40:1 there — it fails) --fg-alert #8B5749 5.57:1 on --paper-raised (the owed money hex; it already passes, named here so the two message colors stay a pair) --link #7C5930 5.65:1 on --paper, 5.95:1 on --paper-raised (--umber #946B3D is 4.25:1 on paper — it fails) --link-hover #6F4E29 6.72:1 on --paper --focus-ring #756040 5.37:1 on --paper, 3.53:1 on a --champagne button fill. A focus indicator needs 3:1 against every surface it can land on; the specified champagne at 60% opacity is 1.28:1 on paper. --------------------------------------------------------- */ --fg-ok: #456F4A; --fg-alert: #8B5749; --link: #7C5930; --link-hover: #6F4E29; --focus-ring: #756040; /* ========================================================= TYPE — Families ========================================================= */ --font-serif: "Source Serif 4", "Source Serif Pro", "New York", "Iowan Old Style", "Charter", "Georgia", serif; --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", "SF Mono", "Berkeley Mono", "Menlo", "Consolas", monospace; /* ========================================================= TYPE — Scale Body 15/22 anchors the system. Serifs handle display sizes. ========================================================= */ --fs-display: 44px; /* hero document titles */ --fs-h1: 30px; --fs-h2: 22px; --fs-h3: 18px; --fs-body: 15px; --fs-small: 13px; --fs-meta: 11px; /* monospaced UPPERCASE labels */ --fs-pill: 10px; /* tiny chip labels */ --lh-display: 1.10; --lh-heading: 1.20; --lh-body: 1.55; --lh-tight: 1.30; --tracking-display: -0.014em; /* tight tracking for serif display */ --tracking-heading: -0.008em; --tracking-body: 0em; --tracking-meta: 0.14em; /* wide on monospaced UPPERCASE */ --tracking-pill: 0.10em; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ========================================================= SPACING & RADII 4pt grid. Cards 8pt, chips/pills 4pt. ========================================================= */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 56px; --space-10: 72px; --radius-pill: 4px; --radius-card: 8px; --radius-window: 12px; --radius-sheet: 14px; --rail-width: 3px; /* state-colored left rail */ --hairline-w: 0.5px; /* ========================================================= ELEVATION & SHADOWS Quiet, paper-on-paper shadows — never glowy. ========================================================= */ --shadow-0: none; --shadow-1: 0 1px 0 rgba(28, 26, 22, 0.04), 0 1px 2px rgba(28, 26, 22, 0.05); --shadow-2: 0 1px 0 rgba(28, 26, 22, 0.04), 0 4px 14px -4px rgba(28, 26, 22, 0.10); --shadow-3: 0 2px 0 rgba(28, 26, 22, 0.04), 0 14px 40px -8px rgba(28, 26, 22, 0.16); --shadow-inset: inset 0 0 0 0.5px var(--hairline-strong); /* ========================================================= MOTION Slow, calm, library-quiet. No bounces. ========================================================= */ --ease-paper: cubic-bezier(0.20, 0.00, 0.20, 1.00); --ease-out: cubic-bezier(0.16, 1.00, 0.30, 1.00); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; /* ========================================================= GRADIENTS — dividers fade to transparent, never hard ========================================================= */ --divider-h: linear-gradient( to right, transparent 0%, var(--hairline-strong) 16%, var(--hairline-strong) 84%, transparent 100% ); --divider-v: linear-gradient( to bottom, transparent 0%, var(--hairline-strong) 16%, var(--hairline-strong) 84%, transparent 100% ); } /* ===================================================================== Element defaults ===================================================================== */ /* The `hidden` attribute must win. Any component that sets an explicit `display` (.btn and .pill both use inline-flex) would otherwise override the browser's own [hidden] rule and stay on screen — which on the download page would show the installer links before a key has been checked. */ [hidden] { display: none !important; } html, body { background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, .display, .serif { font-family: var(--font-serif); font-weight: var(--weight-semibold); color: var(--fg); } h1 { font-size: var(--fs-h1); line-height: var(--lh-heading); letter-spacing: var(--tracking-heading); } h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--tracking-heading); } h3 { font-size: var(--fs-h3); line-height: var(--lh-tight); letter-spacing: var(--tracking-heading); } .display { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tracking-display); } p { margin: 0 0 var(--space-4); } /* Monospaced UPPERCASE metadata labels — the system's signature voice */ .meta, .label-meta { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: var(--tracking-meta); text-transform: uppercase; font-weight: var(--weight-medium); color: var(--fg-muted); } /* Pill chips (CITED, KG) */ .pill { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: var(--fs-pill); letter-spacing: var(--tracking-pill); text-transform: uppercase; font-weight: var(--weight-medium); background: var(--champagne-tint); color: var(--ink-2); border: var(--hairline-w) solid var(--champagne-edge); } .pill--kg { background: var(--indigo-tint); border-color: var(--indigo-edge); color: var(--indigo); } .pill--reasoning { background: var(--reasoning-tint); border-color: var(--reasoning-edge); color: var(--reasoning-solid); } .pill--sage { background: var(--sage-tint); border-color: var(--sage-edge); color: #4F7F55; } .pill--terra { background: var(--terracotta-tint); border-color: var(--terracotta-edge); color: #8B5749; } /* Gradient divider rule */ .rule { height: 1px; border: 0; background: var(--divider-h); } /* Selection — champagne tint, not the OS blue */ ::selection { background: var(--champagne-tint); color: var(--fg); }