/* cooperlabs.dev — Workbench. Dark-first. Mono for structure, sans for body. */ @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/IBMPlexMono-Regular-Latin1.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/IBMPlexMono-Medium-Latin1.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/IBMPlexMono-SemiBold-Latin1.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/IBMPlexSans-Regular-Latin1.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/IBMPlexSans-Medium-Latin1.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/IBMPlexSans-SemiBold-Latin1.woff2") format("woff2"); } /* Theme. `auto` follows the OS; a visitor's choice lands as data-theme on (set by site.js). */ :root { color-scheme: light dark; } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } :root { --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; /* light-dark(light, dark). Dark side = Workbench canvas. Light side = derived. */ --bg: light-dark(oklch(0.97 0.006 255), oklch(0.19 0.012 255)); --bg-grid: light-dark(oklch(0.93 0.008 255), oklch(0.24 0.014 255)); --bg-panel: light-dark(oklch(0.99 0.003 255), oklch(0.22 0.013 255)); --bg-footer: light-dark(oklch(0.95 0.006 255), oklch(0.175 0.012 255)); --rule: light-dark(oklch(0.85 0.010 255), oklch(0.32 0.015 255)); --rule-strong: light-dark(oklch(0.78 0.012 255), oklch(0.36 0.016 255)); --text: light-dark(oklch(0.22 0.012 255), oklch(0.93 0.006 255)); --text-muted: light-dark(oklch(0.45 0.012 255), oklch(0.68 0.012 255)); --text-faint: light-dark(oklch(0.55 0.012 255), oklch(0.56 0.012 255)); --accent: light-dark(oklch(0.62 0.15 80), oklch(0.80 0.15 80)); --accent-hover: light-dark(oklch(0.55 0.15 80), oklch(0.88 0.13 80)); --accent-border: light-dark(oklch(0.70 0.10 80), oklch(0.52 0.10 80)); --gutter: 20px; --grid: 64px; } @media (min-width: 720px) { :root { --gutter: 40px; } } @media (min-width: 1080px) { :root { --gutter: 64px; } } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background-color: var(--bg); background-image: linear-gradient(var(--bg-grid) 1px, transparent 1px), linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px); background-size: var(--grid) var(--grid); color: var(--text); font-family: var(--font-sans); font-size: 16px; line-height: 1.6; } a { color: var(--accent); text-decoration: none; } a:hover, a:focus-visible { color: var(--accent-hover); } a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---- header ---- */ .site-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px var(--gutter); border-bottom: 1px solid var(--rule); background: var(--bg); } .brand { display: inline-flex; align-items: center; gap: 12px; color: var(--text); font-family: var(--font-mono); font-size: 15px; font-weight: 600; letter-spacing: 0.02em; } .brand:hover, .brand:focus-visible { color: var(--text); } .brand svg { width: 22px; height: 22px; stroke: var(--accent); } .brand-accent { color: var(--accent); } .site-nav { display: flex; gap: 20px; font-family: var(--font-mono); font-size: 13px; } .site-nav a { color: var(--text-muted); } .site-nav a:hover, .site-nav a:focus-visible { color: var(--text); } .site-nav a.is-active { color: var(--text); } .site-header-right { display: flex; align-items: center; gap: 20px; } /* Theme toggle: the design's chip style. Hidden until site.js has run, since it cannot work without it; the site then follows the OS. */ .theme-toggle { display: none; } html[data-js] .theme-toggle { display: inline-flex; border: 1px solid var(--rule-strong); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; } .theme-toggle button { appearance: none; margin: 0; padding: 5px 9px; border: 0; background: none; color: var(--text-faint); font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; } .theme-toggle button + button { border-left: 1px solid var(--rule); } .theme-toggle button:hover { color: var(--text); } .theme-toggle button[aria-pressed="true"] { color: var(--accent); background: var(--bg-panel); box-shadow: inset 0 0 0 1px var(--accent-border); } .theme-toggle button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } @media (min-width: 720px) { .site-header { padding-block: 28px; } .site-nav { gap: 28px; } .site-header-right { gap: 28px; } } /* ---- main ---- */ .site-main { flex: 1 0 auto; } .hero { display: flex; flex-direction: column; gap: 24px; padding: 56px var(--gutter) 48px; border-bottom: 1px solid var(--rule); } @media (min-width: 720px) { .hero { padding: 88px var(--gutter) 72px; gap: 28px; } } .eyebrow { display: flex; align-items: center; gap: 12px; margin: 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } .eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .hero-statement { margin: 0; max-width: 860px; font-size: clamp(28px, 4.5vw, 46px); font-weight: 500; line-height: 1.22; letter-spacing: -0.02em; text-wrap: pretty; } .hero-sub { margin: 0; max-width: 660px; font-size: 17px; color: var(--text-muted); text-wrap: pretty; } .prose { max-width: 720px; padding: 48px var(--gutter) 64px; } .prose h1 { margin: 0 0 24px; font-size: clamp(26px, 3.5vw, 36px); font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; } .prose p { margin: 0 0 18px; text-wrap: pretty; } /* ---- prose: rendered Markdown ---- */ .prose h2, .prose h3 { margin: 40px 0 12px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; } .prose h2 { font-size: 22px; } .prose h3 { font-size: 18px; } .prose a { text-decoration: underline; text-underline-offset: 3px; } .prose ul, .prose ol { margin: 0 0 18px; padding-left: 24px; } .prose li { margin-bottom: 6px; } .prose li p { margin: 0 0 8px; } .prose blockquote { margin: 0 0 18px; padding: 4px 0 4px 18px; border-left: 2px solid var(--accent-border); color: var(--text-muted); } .prose code { padding: 1px 5px; border: 1px solid var(--rule); border-radius: 3px; background: var(--bg-panel); font-family: var(--font-mono); font-size: 0.9em; } .prose pre { margin: 0 0 20px; padding: 14px 16px; overflow-x: auto; border: 1px solid var(--rule); background: var(--bg-panel); font-size: 14px; line-height: 1.5; } .prose pre code { padding: 0; border: 0; background: none; font-size: inherit; } .prose hr { margin: 32px 0; border: 0; border-top: 1px solid var(--rule); } .prose img { max-width: 100%; height: auto; } .prose table { margin: 0 0 20px; border-collapse: collapse; font-size: 15px; } .prose th, .prose td { padding: 6px 12px; border: 1px solid var(--rule); text-align: left; } .prose th { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); } /* ---- entry ---- */ .entry-header { margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--rule); } .entry-header .eyebrow { margin-bottom: 16px; } .eyebrow-sep { color: var(--text-faint); } .entry-title { margin: 0 0 12px; font-size: clamp(28px, 4vw, 40px); font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; text-wrap: pretty; } .entry-summary { margin: 0; font-size: 18px; color: var(--text-muted); text-wrap: pretty; } .entry-footer { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--rule); } /* ---- indexes and log rows ---- */ .index { padding: 48px var(--gutter) 64px; } .index-header { margin-bottom: 28px; } .index-header h1 { margin: 0 0 10px; font-size: clamp(26px, 3.5vw, 36px); font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; } .index-header .eyebrow { margin-bottom: 14px; } .index-sub { margin: 0; max-width: 620px; color: var(--text-muted); text-wrap: pretty; } .index-links { display: flex; flex-wrap: wrap; gap: 18px; margin: 14px 0 0; font-family: var(--font-mono); font-size: 13px; } .recent { padding: 40px var(--gutter) 64px; } .section-header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .section-title { margin: 0; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); } .section-link { font-family: var(--font-mono); font-size: 13px; } .log { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); } .log-row { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; padding: 16px 0; border-bottom: 1px solid var(--rule); } .log-row[hidden] { display: none; } .log-date { padding-top: 3px; font-family: var(--font-mono); font-size: 13px; color: var(--text-faint); } .log-main { min-width: 0; } .log-title { display: block; color: var(--text); font-size: 17px; font-weight: 500; text-wrap: pretty; } .log-title:hover, .log-title:focus-visible { color: var(--accent); } .log-summary { margin: 4px 0 0; font-size: 15px; color: var(--text-muted); text-wrap: pretty; } .log-row .chip { grid-column: 2; justify-self: start; } @media (min-width: 720px) { .log-row { grid-template-columns: 110px 1fr auto; align-items: start; } .log-row .chip { grid-column: 3; } } .log-empty { margin: 0; padding: 32px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-family: var(--font-mono); font-size: 13px; color: var(--text-faint); } /* ---- work: project rows and project page ---- */ .log-status { padding-top: 5px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); } .log-status[data-status="shipping"] { color: var(--accent); } .log-status[data-status="building"] { color: var(--text-muted); } .project-description { padding: 0 0 8px; } .index .section-header { margin-top: 32px; } /* ---- chips and filter bar ---- */ .chip { display: inline-flex; align-items: center; padding: 3px 9px; border: 1px solid var(--rule-strong); background: none; color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; } a.chip:hover, a.chip:focus-visible { color: var(--text); border-color: var(--text-faint); } .chip[aria-pressed="true"] { color: var(--accent); background: var(--bg-panel); border-color: var(--accent-border); } .filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; } .error-page { display: flex; flex-direction: column; gap: 20px; padding: 88px var(--gutter); } .error-page a { font-family: var(--font-mono); font-size: 14px; } /* ---- footer ---- */ .site-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: 24px var(--gutter); border-top: 1px solid var(--rule); background: var(--bg-footer); font-family: var(--font-mono); font-size: 13px; color: var(--text-faint); } .site-footer a { color: var(--text-faint); } .site-footer a:hover, .site-footer a:focus-visible { color: var(--text); } .footer-links { display: flex; gap: 22px; }