/* ============================================================================ ZeroThought — zerothought.css The brand as one stylesheet. Drop this in and you get the system: design tokens (CSS custom properties), a light reset, a utility layer, and the full component layer (buttons, inputs, cards, nav, badges, editorial + data primitives). Single source of truth: tokens.js. These custom properties mirror it 1:1. Load order: 1. Manrope + Space Mono from Google Fonts (see in your ) 2. this file ========================================================================== */ /* ---------------------------------------------------------------------------- 1 · TOKENS · :root custom properties -------------------------------------------------------------------------- */ :root { /* — Color · monochrome foundation — */ --zt-ink: #0A0A0A; /* primary text, marks */ --zt-paper: #FAFAF7; /* primary background */ --zt-graphite: #1F1F1F; /* near-black surfaces */ --zt-slate: #4A4A48; /* secondary text */ --zt-stone: #9A9A95; /* tertiary text, captions */ --zt-bone: #C9C9C2; /* dividers, borders */ --zt-chalk: #EDEDE7; /* subtle backgrounds, hover */ /* — Color · Lacquer accent — */ --zt-lacquer: #C8281F; /* primary accent */ --zt-lacquer-dark: #92140C; /* hover / pressed */ --zt-lacquer-tint: #F7DBD8; /* subtle red wash */ /* — Type families — */ --zt-font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif; --zt-font-body: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif; --zt-font-mono: "Space Mono", ui-monospace, "Courier New", monospace; /* — Type scale (px) — */ --zt-size-display: 96px; --zt-size-h1: 56px; --zt-size-h2: 36px; --zt-size-h3: 24px; --zt-size-body-lg: 19px; --zt-size-body: 15px; --zt-size-caption: 11px; /* — Weights — */ --zt-weight-black: 900; --zt-weight-bold: 700; --zt-weight-semibold: 600; --zt-weight-medium: 500; --zt-weight-regular: 400; --zt-weight-light: 300; /* — Spacing scale (4px base) — */ --zt-space-1: 4px; --zt-space-2: 8px; --zt-space-3: 12px; --zt-space-4: 16px; --zt-space-5: 24px; --zt-space-6: 32px; --zt-space-7: 48px; --zt-space-8: 64px; --zt-space-9: 96px; /* — Motion — */ --zt-ease: cubic-bezier(0.16, 1, 0.3, 1); --zt-dur-micro: 180ms; /* hover, focus, button state */ --zt-dur-entrance: 700ms; /* page transitions, hero reveals */ --zt-dur-heartbeat: 1800ms;/* the red dot at idle */ /* — Borders & elevation — */ --zt-border: 1px solid var(--zt-bone); --zt-border-ink: 1px solid var(--zt-ink); --zt-shadow-card: 0 18px 40px -22px rgba(10,10,10,0.35), 0 4px 12px -8px rgba(10,10,10,0.15); /* — Letterspacing presets — */ --zt-track-tight: -0.045em; --zt-track-snug: -0.02em; --zt-track-mono: 0.18em; } /* ---------------------------------------------------------------------------- 2 · RESET · small, opinionated, brand-aware -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--zt-paper); color: var(--zt-ink); font-family: var(--zt-font-sans); font-size: var(--zt-size-body); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; } img, svg, video { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--zt-lacquer); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* ---------------------------------------------------------------------------- 3 · UTILITY LAYER -------------------------------------------------------------------------- */ /* — type families — */ .zt-sans { font-family: var(--zt-font-sans); } .zt-body { font-family: var(--zt-font-body); } .zt-mono { font-family: var(--zt-font-mono); } /* — display + heading helpers — */ .zt-display { font-family: var(--zt-font-sans); font-weight: 900; font-size: var(--zt-size-display); line-height: 0.85; letter-spacing: var(--zt-track-tight); } .zt-h1 { font-family: var(--zt-font-sans); font-weight: 900; font-size: var(--zt-size-h1); line-height: 0.92; letter-spacing: -0.04em; } .zt-h2 { font-family: var(--zt-font-sans); font-weight: 800; font-size: var(--zt-size-h2); line-height: 1; letter-spacing: -0.03em; } .zt-h3 { font-family: var(--zt-font-sans); font-weight: 700; font-size: var(--zt-size-h3); line-height: 1.15; letter-spacing: -0.015em; } .zt-prose { font-family: var(--zt-font-body); font-size: var(--zt-size-body-lg); line-height: 1.55; color: var(--zt-ink); } /* — the mono metadata label, used everywhere — */ .zt-label { font-family: var(--zt-font-mono); font-size: 10px; font-weight: 400; letter-spacing: var(--zt-track-mono); text-transform: uppercase; color: var(--zt-stone); } /* — text colors — */ .zt-text-ink { color: var(--zt-ink); } .zt-text-slate { color: var(--zt-slate); } .zt-text-stone { color: var(--zt-stone); } .zt-text-paper { color: var(--zt-paper); } .zt-text-lacquer { color: var(--zt-lacquer); } /* — surfaces — */ .zt-bg-paper { background: var(--zt-paper); color: var(--zt-ink); } .zt-bg-ink { background: var(--zt-ink); color: var(--zt-paper); } .zt-bg-chalk { background: var(--zt-chalk); color: var(--zt-ink); } /* — rules — */ .zt-rule { height: 1px; background: var(--zt-ink); border: 0; } .zt-rule-bone { height: 1px; background: var(--zt-bone); border: 0; } /* — layout container — */ .zt-container { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 72px); } /* ---------------------------------------------------------------------------- 4 · COMPONENT LAYER -------------------------------------------------------------------------- */ /* — 4.1 Buttons · five tiers ------------------------------------------------ */ .zt-btn { font-family: var(--zt-font-sans); font-weight: 700; font-size: 14px; letter-spacing: 0.01em; padding: 13px 22px; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; background: var(--zt-ink); color: var(--zt-paper); transition: background var(--zt-dur-micro) var(--zt-ease), color var(--zt-dur-micro) var(--zt-ease), border-color var(--zt-dur-micro) var(--zt-ease), transform var(--zt-dur-micro) var(--zt-ease); } .zt-btn:active { transform: translateY(1px); } .zt-btn:disabled, .zt-btn[aria-disabled="true"] { opacity: 0.38; cursor: not-allowed; pointer-events: none; } .zt-btn-primary { background: var(--zt-ink); color: var(--zt-paper); } .zt-btn-primary:hover { background: var(--zt-lacquer); } .zt-btn-accent { background: var(--zt-lacquer); color: var(--zt-paper); } .zt-btn-accent:hover { background: var(--zt-lacquer-dark); } .zt-btn-ghost { background: var(--zt-chalk); color: var(--zt-ink); } .zt-btn-ghost:hover { background: var(--zt-ink); color: var(--zt-paper); } .zt-btn-quiet { background: transparent; color: var(--zt-slate); padding: 13px 14px; } .zt-btn-quiet:hover { color: var(--zt-ink); background: var(--zt-chalk); } .zt-btn-link { background: transparent; color: var(--zt-ink); padding: 4px 0; border-bottom: 1.5px solid var(--zt-ink); gap: 6px; } .zt-btn-link:hover { color: var(--zt-lacquer); border-bottom-color: var(--zt-lacquer); } /* — 4.2 Inputs · underline-only --------------------------------------------- */ .zt-field { display: flex; flex-direction: column; gap: 6px; } .zt-field > label { /* pair with .zt-label for the mono caption look */ } .zt-input, .zt-textarea { font-family: var(--zt-font-body); font-size: 15px; color: var(--zt-ink); background: transparent; border: 0; border-bottom: 1.5px solid var(--zt-bone); padding: 10px 0; outline: none; width: 100%; caret-color: var(--zt-lacquer); transition: border-color var(--zt-dur-micro) var(--zt-ease); } .zt-textarea { resize: vertical; min-height: 88px; line-height: 1.5; } .zt-input::placeholder, .zt-textarea::placeholder { color: var(--zt-stone); } .zt-input:hover, .zt-textarea:hover { border-bottom-color: var(--zt-slate); } .zt-input:focus, .zt-textarea:focus { border-bottom-color: var(--zt-ink); outline: none; } .zt-input:disabled, .zt-textarea:disabled { opacity: 0.45; cursor: not-allowed; border-bottom-style: dashed; } .zt-input[aria-invalid="true"], .zt-textarea[aria-invalid="true"] { border-bottom-color: var(--zt-lacquer); } /* — 4.3 Card · research card with four-part hover --------------------------- */ .zt-card { background: var(--zt-paper); border: var(--zt-border); padding: 22px; position: relative; overflow: hidden; cursor: pointer; transition: border-color .25s var(--zt-ease), transform .25s var(--zt-ease), box-shadow .25s var(--zt-ease); } .zt-card--accent { border-left: 3px solid var(--zt-lacquer); } .zt-card::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--zt-lacquer); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--zt-ease); } .zt-card:hover { transform: translateY(-3px); border-color: var(--zt-ink); box-shadow: var(--zt-shadow-card); } .zt-card:hover::after { transform: scaleX(1); } .zt-card-title { font-weight: 700; font-size: 19px; line-height: 1.2; letter-spacing: -0.015em; transition: color .25s var(--zt-ease); } .zt-card:hover .zt-card-title { color: var(--zt-lacquer); } /* — 4.4 Nav link · underline draw ------------------------------------------- */ .zt-nav-link { font-family: var(--zt-font-sans); font-weight: 500; font-size: 14px; color: var(--zt-ink); padding: 8px 0; position: relative; cursor: pointer; transition: color .15s var(--zt-ease); } .zt-nav-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1.5px; background: var(--zt-lacquer); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--zt-ease); } .zt-nav-link:hover { color: var(--zt-ink); } .zt-nav-link:hover::after, .zt-nav-link.active::after { transform: scaleX(1); } /* — 4.5 Badge / tag --------------------------------------------------------- */ .zt-badge { display: inline-block; font-family: var(--zt-font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--zt-slate); border: var(--zt-border); padding: 3px 8px; } .zt-badge--accent { color: var(--zt-lacquer); border-color: var(--zt-lacquer); } .zt-badge--solid { background: var(--zt-ink); color: var(--zt-paper); border-color: var(--zt-ink); } /* — 4.6 Editorial · pull-quotes --------------------------------------------- */ .zt-quote-display { font-weight: 900; font-size: 28px; line-height: 1.0; letter-spacing: -0.025em; } .zt-quote-bracket { border-top: 2px solid var(--zt-ink); border-bottom: 2px solid var(--zt-ink); padding: 16px 0; font-family: var(--zt-font-body); font-size: 17px; line-height: 1.45; font-weight: 600; letter-spacing: -0.01em; } .zt-quote-lacquer { display: flex; gap: 16px; } .zt-quote-lacquer::before { content: ''; width: 4px; background: var(--zt-lacquer); align-self: stretch; flex: none; } /* — 4.7 Data · bar row + big figure ----------------------------------------- */ .zt-bar-row { display: grid; grid-template-columns: 180px 1fr 50px; gap: 14px; align-items: center; } .zt-bar-track { height: 14px; background: var(--zt-chalk); } .zt-bar-fill { height: 100%; background: var(--zt-ink); transition: width .6s var(--zt-ease); } .zt-bar-fill--accent { background: var(--zt-lacquer); } .zt-figure { border-top: 2px solid var(--zt-ink); padding-top: 16px; } .zt-figure--accent { border-top-color: var(--zt-lacquer); } .zt-figure-num { font-weight: 900; font-size: 84px; line-height: 0.85; letter-spacing: -0.05em; color: var(--zt-ink); } .zt-figure--accent .zt-figure-num { color: var(--zt-lacquer); } .zt-figure-sub { font-family: var(--zt-font-body); font-size: 14px; color: var(--zt-slate); } /* — 4.8 The wordmark dot heartbeat (used by inline lockup) ------------------- */ @keyframes zt-heartbeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } } .zt-dot { display: inline-block; width: 0.62em; height: 0.62em; border-radius: 50%; background: var(--zt-lacquer); vertical-align: baseline; } .zt-dot--pulse { animation: zt-heartbeat var(--zt-dur-heartbeat) cubic-bezier(0.4,0,0.2,1) infinite; } /* — 4.9 Pagination ----------------------------------------------------------- */ .zt-page { font-family: var(--zt-font-mono); font-size: 12px; letter-spacing: 0.06em; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; color: var(--zt-slate); cursor: pointer; transition: background var(--zt-dur-micro) var(--zt-ease), color var(--zt-dur-micro) var(--zt-ease), border-color var(--zt-dur-micro) var(--zt-ease); } .zt-page:hover { background: var(--zt-chalk); color: var(--zt-ink); } .zt-page.active { background: var(--zt-ink); color: var(--zt-paper); } .zt-page-arrow { width: auto; padding: 0 12px; border: var(--zt-border); color: var(--zt-ink); } .zt-page-arrow:hover { background: var(--zt-ink); border-color: var(--zt-ink); color: var(--zt-paper); } .zt-page-arrow:disabled { opacity: 0.38; cursor: not-allowed; pointer-events: none; } .zt-pager-ed { font-family: var(--zt-font-sans); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; background: transparent; border: 0; color: var(--zt-ink); cursor: pointer; padding: 18px 0; display: inline-flex; align-items: baseline; gap: 10px; transition: color var(--zt-dur-micro) var(--zt-ease); } .zt-pager-ed:hover { color: var(--zt-lacquer); } .zt-pager-ed .arr { transition: transform .25s var(--zt-ease); display: inline-block; } .zt-pager-ed:hover .arr--l { transform: translateX(-4px); } .zt-pager-ed:hover .arr--r { transform: translateX(4px); } .zt-progress { height: 2px; background: var(--zt-chalk); position: relative; } .zt-progress > span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--zt-lacquer); } /* — 4.10 Tabs ------------------------------------------------------------------ */ .zt-tabs { display: flex; gap: 26px; border-bottom: var(--zt-border); } .zt-tab { font-family: var(--zt-font-sans); font-weight: 600; font-size: 14px; color: var(--zt-slate); background: transparent; border: 0; padding: 12px 2px; cursor: pointer; position: relative; transition: color var(--zt-dur-micro) var(--zt-ease); } .zt-tab::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--zt-lacquer); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--zt-ease); } .zt-tab:hover, .zt-tab.active { color: var(--zt-ink); } .zt-tab.active::after { transform: scaleX(1); } /* — 4.11 Accordion --------------------------------------------------------------- */ .zt-acc { border-top: 1px solid var(--zt-ink); } .zt-acc-item { border-bottom: var(--zt-border); } .zt-acc-head { font-family: var(--zt-font-sans); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; color: var(--zt-ink); background: transparent; border: 0; padding: 18px 0; width: 100%; text-align: left; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; transition: color var(--zt-dur-micro) var(--zt-ease); } .zt-acc-head:hover { color: var(--zt-lacquer); } .zt-acc-mark { font-family: var(--zt-font-mono); font-size: 16px; font-weight: 400; color: var(--zt-stone); transition: transform .3s var(--zt-ease), color var(--zt-dur-micro) var(--zt-ease); display: inline-block; } .zt-acc-head:hover .zt-acc-mark { color: var(--zt-lacquer); } .zt-acc-body { overflow: hidden; max-height: 0; opacity: 0; transition: max-height .4s var(--zt-ease), opacity .3s var(--zt-ease); } .zt-acc-body > * { font-family: var(--zt-font-body); font-size: 14px; color: var(--zt-slate); line-height: 1.6; padding-bottom: 18px; margin: 0; } .zt-acc-item.open .zt-acc-body { max-height: 200px; opacity: 1; } .zt-acc-item.open .zt-acc-mark { transform: rotate(45deg); } /* — 4.12 Switch / checkbox / radio ---------------------------------------------- */ .zt-switch { width: 40px; height: 22px; border: 1.5px solid var(--zt-bone); background: var(--zt-chalk); cursor: pointer; position: relative; padding: 0; transition: background .2s var(--zt-ease), border-color .2s var(--zt-ease); } .zt-switch .knob { position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; background: var(--zt-stone); transition: transform .25s var(--zt-ease), background .2s var(--zt-ease); } .zt-switch.on { background: var(--zt-ink); border-color: var(--zt-ink); } .zt-switch.on .knob { transform: translateX(18px); background: var(--zt-paper); } .zt-check { width: 18px; height: 18px; border: 1.5px solid var(--zt-bone); background: var(--zt-paper); cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-family: var(--zt-font-mono); font-size: 12px; color: var(--zt-paper); transition: background var(--zt-dur-micro) var(--zt-ease), border-color var(--zt-dur-micro) var(--zt-ease); } .zt-check:hover { border-color: var(--zt-ink); } .zt-check.on { background: var(--zt-ink); border-color: var(--zt-ink); } .zt-check.on::after { content: '✓'; } .zt-radio { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--zt-bone); background: var(--zt-paper); cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; transition: border-color var(--zt-dur-micro) var(--zt-ease); } .zt-radio:hover { border-color: var(--zt-ink); } .zt-radio .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--zt-lacquer); transform: scale(0); transition: transform .2s var(--zt-ease); } .zt-radio.on { border-color: var(--zt-ink); } .zt-radio.on .dot { transform: scale(1); } /* — 4.13 Tooltip ----------------------------------------------------------------- */ .zt-tip-anchor { position: relative; display: inline-flex; } .zt-tip { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(4px); opacity: 0; pointer-events: none; background: var(--zt-ink); color: var(--zt-paper); font-family: var(--zt-font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding: 7px 11px; white-space: nowrap; transition: opacity .2s var(--zt-ease), transform .25s var(--zt-ease); } .zt-tip::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -4px; border: 4px solid transparent; border-top-color: var(--zt-ink); } .zt-tip-anchor:hover .zt-tip { opacity: 1; transform: translateX(-50%) translateY(0); } /* — 4.14 Toast ------------------------------------------------------------------- */ .zt-toast { background: var(--zt-ink); color: var(--zt-paper); padding: 14px 18px; display: flex; align-items: baseline; gap: 14px; border-left: 3px solid var(--zt-paper); box-shadow: 0 18px 40px -22px rgba(10,10,10,0.5); } .zt-toast--accent { border-left-color: var(--zt-lacquer); } .zt-toast .zt-toast-label { font-family: var(--zt-font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(250,250,247,0.6); flex: none; } .zt-toast--accent .zt-toast-label { color: #E88A83; } .zt-toast .zt-toast-text { font-family: var(--zt-font-body); font-size: 14px; } /* — 4.15 Loading · skeleton + heartbeat loader ----------------------------------- */ @keyframes zt-skel { 0% { opacity: 1; } 50% { opacity: 0.45; } 100% { opacity: 1; } } .zt-skel { background: var(--zt-chalk); animation: zt-skel 1.6s var(--zt-ease) infinite; } .zt-loader { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--zt-lacquer); animation: zt-heartbeat var(--zt-dur-heartbeat) cubic-bezier(0.4,0,0.2,1) infinite; } /* — 4.16 Icons · glyph set (LOCKED: Space Mono IS the icon set) ------------------- */ .zt-glyph { font-family: var(--zt-font-mono); font-weight: 400; line-height: 1; display: inline-block; font-style: normal; } /* — 4.17 Imagery · Lacquer duotone (LOCKED: treatment B, one per page) ------------ */ .zt-duotone { position: relative; overflow: hidden; } .zt-duotone img { display: block; width: 100%; filter: grayscale(1) contrast(1.05); } .zt-duotone::after { content: ''; position: absolute; inset: 0; background: var(--zt-lacquer); mix-blend-mode: multiply; opacity: 0.85; pointer-events: none; }