/* ========================================================================== itschadrubin.com — design system Modeled on the editorial system of mattrothenberg.com (analyzed 2026-08-25): warm stone neutrals, one serif display voice, mono accents, hairline rules, numbered small-caps sections, glow-pill company badges, full dark mode. ========================================================================== */ /* ---- Fonts ----------------------------------------------------------------- The reference site uses licensed faces: OT Jubilee (Overlap Type) for all display/body serif work, PP Fraktion Mono + PP Supply Mono (Pangram Pangram) for technical accents, PP Mori for sans moments. Stacks below list those real names FIRST — buy the licenses, drop the woff2 files in /fonts, uncomment fonts/fonts.css in the , and the site upgrades itself. Until then, free stand-ins load from Google Fonts: Fraunces (serif), Space Mono (mono), Instrument Sans (sans). */ :root { --font-serif: "OT Jubilee Golden", "OT Jubilee Silver", "Fraunces", Georgia, serif; --font-serif-ui: "OT Jubilee Silver", "Fraunces", Georgia, serif; --font-mono: "PP Fraktion Mono", "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --font-sans: "PP Mori", "Instrument Sans", system-ui, -apple-system, sans-serif; /* Warm stone neutrals (Tailwind stone scale) */ --stone-50: #fafaf9; --stone-100: #f5f5f4; --stone-200: #e7e5e4; --stone-300: #d6d3d1; --stone-400: #a8a29e; --stone-500: #78716c; --stone-600: #57534e; --stone-700: #44403c; --stone-800: #292524; --stone-900: #1c1917; --stone-950: #0c0a09; --bg: #ffffff; --ink: #2c2c2c; --ink-strong: var(--stone-900); --hairline: rgba(12, 10, 9, 0.10); --wash: rgba(245, 245, 244, 0.5); /* row hover wash */ --muted: var(--stone-500); /* AA on white: 4.80:1 */ --date-ink: var(--stone-600); /* small 12px dates need more */ --ring: var(--stone-500); /* ≥3:1 non-text on white */ --selection: rgba(0, 0, 0, 0.10); --badge-bg: #ffffff; --badge-active-bg: var(--stone-950); --badge-active-ink: #ffffff; --badge-border: var(--stone-200); --logo-badge-ink: #ffffff; --logo-badge-grad-a: #000000; --logo-badge-grad-b: #3a3a3a; --accent-hover: #0d9488; /* teal-600, list-title hover */ --space: 0.25rem; --radius-sm: 0.25rem; --measure: 48rem; /* max-w-3xl content column */ } @media (prefers-color-scheme: dark) { :root { --bg: var(--stone-900); --ink: var(--stone-100); --ink-strong: #ffffff; --hairline: rgba(255, 255, 255, 0.10); --wash: rgba(41, 37, 36, 0.2); --muted: var(--stone-400); /* AA on #1c1917: 6.93:1 */ --date-ink: var(--stone-300); --ring: var(--stone-400); --selection: rgba(255, 255, 255, 0.20); --badge-bg: var(--stone-900); --badge-active-bg: #ffffff; --badge-active-ink: var(--stone-950); --badge-border: var(--stone-700); --logo-badge-ink: #000000; --logo-badge-grad-a: #ffffff; --logo-badge-grad-b: #d8d8d8; --accent-hover: #2dd4bf; /* teal-400 */ } } /* ---- Reset + base -------------------------------------------------------- */ *, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; } html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; overflow-y: auto; } body { background-color: var(--bg); color: var(--ink); font-family: var(--font-serif-ui); font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: opacity 0.3s ease-out; } /* Fade-in only when JS is present (the html.js class), so no-JS visitors never get a blank page. */ html.js body:not(.is-ready) { opacity: 0; } @media (prefers-reduced-motion: reduce) { html.js body:not(.is-ready) { opacity: 1; } body { transition: none; } } ::selection { background-color: var(--selection); } /* Thin editorial scrollbar */ html::-webkit-scrollbar { width: var(--space); } html::-webkit-scrollbar-thumb { background-color: var(--ink-strong); } html::-webkit-scrollbar-track { background-color: var(--bg); } a { color: inherit; text-decoration: inherit; } b, strong { font-weight: 700; } ol, ul { list-style: none; } img, svg { vertical-align: middle; display: block; } img { max-width: 100%; height: auto; } button { font: inherit; letter-spacing: inherit; color: inherit; background: transparent; cursor: pointer; } sup { color: var(--muted); margin-left: 2px; font-family: var(--font-mono); font-size: 75%; line-height: 0; position: relative; top: -0.35em; } /* ---- Layout --------------------------------------------------------------- */ .page { padding-top: 2rem; } .content { max-width: var(--measure); margin-inline: auto; width: 100%; padding-inline: 1.5rem; } /* Only .stack spaces siblings. .content holds [header, main], and the header carries its own 2.5rem bottom margin — spacing it here double-counted. */ .stack > * + * { margin-top: 3rem; } @media (min-width: 768px) { .page { padding-top: 4rem; } .stack > * + * { margin-top: 4rem; } } .section > * + * { margin-top: 1.5rem; } /* ---- Header / nav ---------------------------------------------------------- */ .site-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 2.5rem; } .logo-badge { position: relative; width: 1.75rem; height: 1.75rem; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; line-height: 0; font-family: var(--font-sans); font-weight: 800; font-size: 1.05rem; color: var(--logo-badge-ink); background: linear-gradient(var(--logo-badge-grad-a), var(--logo-badge-grad-b)); border-radius: 28%; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); outline: none; } /* Invisible 44x44 hit area for touch */ .logo-badge::after { content: ""; position: absolute; inset: -8px; } .logo-badge:focus-visible { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 0 0 2px var(--ring); } .site-nav { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-sans); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; } .site-nav a { padding: 0.625rem 0.5rem; margin-block: -0.625rem; /* grow the hit area, keep the visual rhythm */ border-radius: var(--radius-sm); color: var(--muted); transition: color 0.15s; outline: none; } .site-nav a:hover { color: var(--ink-strong); } .site-nav a:focus-visible { box-shadow: 0 0 0 2px var(--ring); } .site-nav a[aria-current="page"] { color: var(--ink-strong); font-weight: 600; } .site-nav .sep { opacity: 0.2; font-size: 0.875rem; } /* ---- Editorial voice ------------------------------------------------------- */ .lede { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 400; /* .lede also styles an

; don't inherit UA bold */ line-height: 1.375; text-wrap: pretty; } @media (min-width: 768px) { .lede { font-size: 2.25rem; } } .lede em { font-style: normal; font-weight: 700; } .section-label { font-family: var(--font-sans); font-weight: 600; text-transform: uppercase; font-size: 0.875rem; /* measured on the reference: 14px / 20px / 0.1em */ line-height: 1.25rem; letter-spacing: 0.1em; color: var(--ink-strong); } /* Inline links inside big editorial text */ .editorial-link { border-radius: var(--radius-sm); text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: 0.15em; text-decoration-color: color-mix(in oklab, currentcolor 60%, transparent); outline: none; } .editorial-link:hover { text-decoration-color: currentColor; } .editorial-link:focus-visible { box-shadow: 0 0 0 2px var(--ring); } /* ---- Company badge (glow pill) --------------------------------------------- */ @property --glow-angle { syntax: ""; inherits: false; initial-value: 0deg; } .company-badge { display: inline-flex; align-items: baseline; vertical-align: baseline; gap: 0.25em; margin-inline: 0.05em; padding: 0.05em 0.35em; /* matches the reference badge exactly */ border: 1px solid transparent; border-radius: 999px; isolation: isolate; position: relative; outline: none; --glow-color: currentColor; background: linear-gradient(var(--badge-bg), var(--badge-bg)) padding-box, linear-gradient(var(--badge-border), var(--badge-border)) border-box; transition: box-shadow 0.3s ease-out, background 0.2s ease-out; } .company-badge::before { content: ""; position: absolute; inset: -1px; z-index: 0; pointer-events: none; border: 2px solid transparent; border-radius: inherit; opacity: 0; background: conic-gradient( from var(--glow-angle), transparent 0%, var(--glow-color) 7%, var(--glow-color) 21%, transparent 32% ) border-box; mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000); mask-clip: padding-box, border-box; mask-composite: exclude; -webkit-mask-composite: xor; animation: glow-rotate 4s linear infinite; transition: opacity 0.3s ease-out; } @keyframes glow-rotate { to { --glow-angle: 360deg; } } .company-badge:hover, .company-badge:focus-visible { background: linear-gradient(var(--badge-active-bg), var(--badge-active-bg)) padding-box, linear-gradient(transparent, transparent) border-box; color: var(--badge-active-ink); box-shadow: 0 0 8px color-mix(in srgb, var(--glow-color) 18%, transparent); } .company-badge:hover::before, .company-badge:focus-visible::before { opacity: 1; } /* A badge is an atomic inline box, so a line can break between it and the comma that follows. Glue them together. */ .nobr { white-space: nowrap; } /* Square logo box: constrain by height so portrait marks never inflate the pill. */ .company-badge .logo { align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 0.85em; height: 0.85em; position: relative; z-index: 1; } .company-badge .logo svg, .company-badge .logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; } .company-badge .company { font-family: var(--font-sans); font-weight: 600; font-size: 0.78em; /* Explicit line box: Instrument Sans is optically larger than the reference's face at the same em, so the size is trimmed and the box restored here — this is what sets the pill's height against the 24px/33px lede line. */ line-height: 1.585; position: relative; z-index: 1; } @media (prefers-reduced-motion: reduce) { .company-badge::before { animation: none; } } /* ---- Index lists (ventures / writing) -------------------------------------- */ .index-list { margin-inline: -1rem; } .index-list > li + li { border-top: 1px solid var(--hairline); } .index-list a { display: flex; gap: 1rem; padding: 0.5rem 1rem; outline: none; } .index-list a:hover, .index-list a:focus-visible { background-color: var(--wash); } .index-list a:focus-visible { box-shadow: inset 0 0 0 2px var(--ring); } /* mono flavor rows (the "repo list" pattern) */ .index-list .mono-row { align-items: flex-start; } .mono-name { font-family: var(--font-mono); text-transform: uppercase; margin-bottom: 0.25rem; flex: 1; min-width: 0; } .mono-name .org { color: var(--muted); } .mono-name .sep { margin-inline: 0.25rem; color: var(--muted); } .mono-name .name { font-weight: 700; } .mono-stat { flex-shrink: 0; display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); } .mono-stat svg { width: 1rem; height: 1rem; } /* serif flavor rows (the "writing list" pattern) */ .index-list .serif-row { justify-content: space-between; align-items: baseline; padding-block: 0.75rem; } .serif-row .title { font-family: var(--font-serif-ui); font-size: 1.125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .serif-row .year { font-family: var(--font-sans); font-size: 0.875rem; color: var(--muted); flex-shrink: 0; } @media (min-width: 768px) { .serif-row .title { font-size: 1.25rem; } } /* ---- Credo ------------------------------------------------------------------ */ .credo-list { margin-inline: -1rem; } .credo-list > li + li { border-top: 1px solid var(--hairline); } .credo-list li { padding: 0.875rem 1rem; font-family: var(--font-serif); font-size: 1.25rem; line-height: 1.4; text-wrap: pretty; outline: none; } .credo-list .rest { color: var(--muted); } @media (min-width: 768px) { .credo-list li { font-size: 1.5rem; } } /* Hover reveal, as on the Profasee original: the line rests dimmed so there is a visible cue that something is hidden, then brightens as the rest fades in. Gated on a real pointer, so touch devices get the whole line outright. The text stays in the DOM at opacity 0, so screen readers always read it in full. */ @media (hover: hover) and (pointer: fine) and (min-width: 768px) { .credo-list li { color: var(--muted); transition: color 200ms ease, background-color 200ms ease; } .credo-list .rest { opacity: 0; transition: opacity 200ms ease; } .credo-list li:hover, .credo-list li:focus-visible { color: var(--ink); background-color: var(--wash); } .credo-list li:focus-visible { box-shadow: inset 0 0 0 2px var(--ring); } .credo-list li:hover .rest, .credo-list li:focus-visible .rest { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .credo-list li, .credo-list .rest { transition: none; } } .credo-note { font-family: var(--font-sans); font-size: 0.875rem; color: var(--muted); margin-top: 1.5rem; } /* ---- Scroll reveal ----------------------------------------------------------- */ /* Both classes are only ever added from JS, which bails under reduced motion, so no-JS readers and reduced-motion readers always get a fully painted page. */ .will-reveal { opacity: 0; transform: translateY(16px); } .will-reveal.is-revealed { opacity: 1; transform: none; transition: opacity 650ms ease, transform 650ms ease; } /* ---- Logo wall -------------------------------------------------------------- */ .logo-wall-bleed { margin-inline: -1rem; margin-top: 2rem; } .logo-wall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .logo-wall a { position: relative; z-index: 0; display: flex; align-items: center; justify-content: center; padding-inline: 1.5rem; height: 6rem; padding-block: var(--cell-pad, 1.5rem); background: var(--bg); border-bottom: 1px solid var(--hairline); border-right: 1px solid var(--hairline); outline: none; } .logo-wall a:nth-child(2n) { border-right: 0; } .logo-wall a:nth-last-child(-n + 2) { border-bottom: 0; } @media (min-width: 768px) { .logo-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } .logo-wall a { height: 8rem; padding-block: var(--cell-pad-md, 2.25rem); } .logo-wall a:nth-child(2n) { border-right: 1px solid var(--hairline); } .logo-wall a:nth-child(4n) { border-right: 0; } .logo-wall a:nth-last-child(-n + 2) { border-bottom: 1px solid var(--hairline); } .logo-wall a:nth-last-child(-n + 4) { border-bottom: 0; } } .logo-wall a::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--wash); opacity: 0; } .logo-wall a:hover::after, .logo-wall a:focus-visible::after { opacity: 1; } .logo-wall a:focus-visible { box-shadow: inset 0 0 0 2px var(--ring); } .logo-wall .mark { position: relative; z-index: 1; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; color: var(--ink); } .logo-wall .mark svg { height: 100%; width: 100%; } /* Real brand marks render monochrome ink, like the reference wall */ .logo-wall .mark img { max-height: 62%; max-width: 76%; width: auto; height: auto; filter: brightness(0) opacity(0.82); } @media (prefers-color-scheme: dark) { .logo-wall .mark img { filter: brightness(0) invert(1) opacity(0.88); } } .logo-wall .mark .wordmark { font-family: var(--font-sans); font-weight: 700; font-size: 1.2rem; letter-spacing: 0.01em; white-space: nowrap; text-align: center; } /* ---- CTA row ---------------------------------------------------------------- */ .cta-row { display: block; position: relative; z-index: 0; border-top: 1px solid var(--hairline); padding: 2rem 1rem; outline: none; } .cta-row::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--wash); opacity: 0; } .cta-row:hover::after, .cta-row:focus-visible::after { opacity: 1; } .cta-row:focus-visible { box-shadow: inset 0 0 0 2px var(--ring); } /* ---- Social row ------------------------------------------------------------- */ .social-links { display: flex; flex-wrap: wrap; column-gap: 1.5rem; row-gap: 0.75rem; font-family: var(--font-serif); } .social-links .editorial-link { font-size: 1.5rem; } @media (min-width: 768px) { .social-links .editorial-link { font-size: 2.25rem; } } /* ---- Footer wordmark -------------------------------------------------------- */ .footer-mark { width: 100%; display: flex; align-items: center; justify-content: flex-start; /* signs off against the text column, like a letter */ padding-bottom: 3rem; color: var(--ink); } @media (min-width: 768px) { .footer-mark { padding: 5rem 0 6rem; } } .footer-mark svg { width: min(520px, 80vw); height: auto; } .footer-mark .signature { width: min(300px, 62vw); height: auto; } @media (prefers-color-scheme: dark) { .footer-mark .signature { filter: invert(1); } } /* ---- Fixed scroll fade ------------------------------------------------------- */ .scroll-fade { position: fixed; left: 0; right: 0; bottom: 0; height: 72px; z-index: 30; pointer-events: none; background: linear-gradient(transparent, var(--bg)); } /* ---- Notes / Experiments pages ---------------------------------------------- */ .post-list > li + li { margin-top: 3rem; } .post-list a { display: block; outline: none; } .post-list a:focus-visible { box-shadow: inset 0 0 0 2px var(--ring); } .post-date { font-family: var(--font-sans); font-weight: 500; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.15em; color: var(--date-ink); display: block; margin-bottom: 0.75rem; } .post-title { font-family: var(--font-serif); font-weight: 500; font-size: 1.875rem; line-height: 1.25; text-wrap: pretty; } @media (min-width: 768px) { .post-title { font-size: 2.25rem; } } .post-list a:hover .post-title { color: var(--accent-hover); } .post-summary { font-family: var(--font-sans); font-size: 1.125rem; opacity: 0.7; margin-top: 0.75rem; } @media (min-width: 768px) { .post-summary { font-size: 1.25rem; } } .feed-item { padding-block: 1.5rem; } .feed-item + .feed-item { border-top: 1px solid var(--hairline); } .feed-date { display: block; margin-top: 0.5rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.025em; color: var(--muted); font-size: 0.875rem; } /* ---- Pull quote (third-party proof) ---------------------------------------- */ .pull-quote { border-left: 2px solid var(--hairline); padding-left: 1.25rem; margin-top: 2rem; } .pull-quote blockquote { font-family: var(--font-serif); font-size: 1.125rem; line-height: 1.45; text-wrap: pretty; } @media (min-width: 768px) { .pull-quote blockquote { font-size: 1.375rem; } } .pull-quote blockquote::before { content: "\201C"; } .pull-quote blockquote::after { content: "\201D"; } .pull-quote figcaption { font-family: var(--font-sans); font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-top: 0.75rem; } /* ---- Six-cell wall variant (2 cols mobile, 3 desktop) ----------------------- */ @media (min-width: 768px) { .logo-wall.logo-wall--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .logo-wall.logo-wall--3 a { border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); } .logo-wall.logo-wall--3 a:nth-child(3n) { border-right: 0; } .logo-wall.logo-wall--3 a:nth-last-child(-n + 3) { border-bottom: 0; } } /* Fraunces sets a decorative swash ampersand that reads as (R) at body size. Borrow the sans ampersand, a standard fix for mixed-case abbreviations. */ .amp { font-family: var(--font-sans); font-weight: 500; font-size: 0.92em; } /* ---- Long-form note ---------------------------------------------------------- */ .prose { max-width: 34rem; } .prose > * + * { margin-top: 1.5rem; } .prose p { font-family: var(--font-serif); font-size: 1.1875rem; line-height: 1.65; text-wrap: pretty; } @media (min-width: 768px) { .prose p { font-size: 1.3125rem; } } .prose h2 { font-family: var(--font-sans); font-weight: 600; font-size: 0.875rem; line-height: 1.25rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-strong); margin-top: 3rem; } .prose strong { font-weight: 700; } .prose .standfirst { font-family: var(--font-serif); font-size: 1.375rem; line-height: 1.4; } @media (min-width: 768px) { .prose .standfirst { font-size: 1.75rem; } } .note-head { border-bottom: 1px solid var(--hairline); padding-bottom: 2rem; } .note-foot { border-top: 1px solid var(--hairline); margin-top: 3rem; padding-top: 1.5rem; font-family: var(--font-sans); font-size: 0.9375rem; color: var(--muted); } .note-foot a { color: var(--ink); } /* Reach line under a linked post */ .post-stat { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--muted); margin-top: 0.5rem; display: block; } .post-list a .post-title { display: inline; } .post-list a[href^="http"] .post-title::after { content: " ↗"; font-family: var(--font-sans); font-size: 0.6em; vertical-align: super; opacity: 0.45; } /* Content-type marker on a writing row */ .serif-row .kind { font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-right: 0.75rem; vertical-align: 0.08em; } /* One screen of the page start, repeated at the bottom, so the scroll appears to wrap back to the beginning. Desktop only, decorative. */ .loop-back { display: block; height: 100vh; overflow: hidden; padding-top: 2rem; margin-top: 3rem; pointer-events: none; user-select: none; } @media (min-width: 768px) { .loop-back { padding-top: 4rem; margin-top: 4rem; } } /* The header mark can carry a face instead of a monogram */ .logo-badge img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } /* Human close: a real portrait beside a real sentence */ .human { display: flex; align-items: flex-start; gap: 1.25rem; margin-bottom: 2rem; } .human .portrait { width: 5rem; height: 5rem; flex-shrink: 0; border-radius: 50%; object-fit: cover; margin-top: 0.35rem; } .human p { margin: 0; } @media (max-width: 767px) { .human { gap: 1rem; } .human .portrait { width: 3.75rem; height: 3.75rem; } } /* A face used as a badge mark reads better round */ .company-badge .logo img[src*="chad"] { border-radius: 50%; }