/* * lab.css - shared shell for the /lab experiments. * * Palette is lifted from quartz-site/quartz.config.ts so lab pages read as * part of sean.horgan.net rather than as a bolted-on microsite. Quartz's own * colour names are inverted (`light` is the background, `dark` is the text); * they are remapped here to semantic tokens. * * Theme: honours the Quartz toggle. Quartz writes localStorage["theme"] and * sets `saved-theme` on ; lab.js replays that on load, and the media * query covers a first visit that has never touched the toggle. */ :root { --bg: #faf8f8; --bg-raised: #ffffff; --line: #e5e5e5; --line-strong: #d3d3d3; --muted: #6d6d6d; --faint: #b8b8b8; --text: #2b2b2b; --accent: #284b63; --accent-soft: rgba(40, 75, 99, 0.09); --green: #55735c; --highlight: rgba(143, 159, 169, 0.15); --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px -16px rgba(0, 0, 0, 0.2); --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --radius: 10px; --page: 1180px; } @media (prefers-color-scheme: dark) { :root:not([saved-theme="light"]) { --bg: #161618; --bg-raised: #1d1d20; --line: #2e2c2f; --line-strong: #3f3d40; --muted: #9a9a9a; --faint: #646464; --text: #ebebec; --accent: #7b97aa; --accent-soft: rgba(123, 151, 170, 0.14); --green: #84a98c; --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -16px rgba(0, 0, 0, 0.6); } } :root[saved-theme="dark"] { --bg: #161618; --bg-raised: #1d1d20; --line: #2e2c2f; --line-strong: #3f3d40; --muted: #9a9a9a; --faint: #646464; --text: #ebebec; --accent: #7b97aa; --accent-soft: rgba(123, 151, 170, 0.14); --green: #84a98c; --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -16px rgba(0, 0, 0, 0.6); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } /* ---------- Shell ---------- */ .wrap { max-width: var(--page); margin: 0 auto; /* Matches .sitenav-inner's padding so the bar lines up with the content. */ padding: 0 2rem 96px; } /* ---------- Shared top bar ---------- * The bar is styled by /lab/shared/nav.css, which is the exact same file the * Quartz pages use (quartz-site/sitenav.css, copied to both at build time). * It styles against --nav-* variables; this maps the lab palette onto them so * the bar is identical on both halves of the site. */ :root { --nav-height: 46px; /* Defaults to 0 so section pages have their correct top offset on the very first paint. Pages that actually render the second row set it in their own head at build time - see SUBNAV_STYLE in build-lab.mjs. Doing this in JS made every section page paint 38px too low and then jump. */ --nav-sub-height: 0px; /* Deliberately wider than --page: the bar must sit in the same place on a lab page as on a Quartz page, or the wordmark jumps sideways as you move between them. Matches the --nav-width set in custom.scss. */ --nav-width: 1500px; --nav-font: var(--font-sans); --nav-mono: var(--font-mono); --nav-bg: var(--bg); --nav-sub-bg: var(--bg-raised); --nav-text: var(--text); --nav-muted: var(--muted); --nav-faint: var(--faint); --nav-line: var(--line); --nav-hover: var(--highlight); --nav-accent: var(--accent); --nav-accent-soft: var(--accent-soft); } /* Both bars are fixed, so the page needs to start below them. */ body { padding-top: calc(var(--nav-height) + var(--nav-sub-height)); } .pagehead { padding: 44px 0 26px; border-bottom: 1px solid var(--line); margin-bottom: 26px; } .pagehead h1 { margin: 0 0 8px; font-size: clamp(28px, 4vw, 38px); letter-spacing: -0.025em; line-height: 1.15; } .pagehead p { margin: 0; max-width: 62ch; color: var(--muted); font-size: 15.5px; } .eyebrow { display: inline-block; margin-bottom: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); } /* ---------- Controls ---------- */ .controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; } input[type="search"], select { font: inherit; font-size: 14.5px; color: var(--text); background: var(--bg-raised); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 9px 12px; } input[type="search"] { flex: 1 1 260px; min-width: 200px; } input[type="search"]:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; } .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; } .chip { font: inherit; font-size: 13px; line-height: 1; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--muted); cursor: pointer; transition: all 0.14s; } .chip:hover { border-color: var(--accent); color: var(--text); } .chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 500; } .chip .n { opacity: 0.55; margin-left: 5px; font-variant-numeric: tabular-nums; } .resultline { font-size: 13.5px; color: var(--muted); margin-bottom: 14px; display: flex; gap: 12px; align-items: center; } .linkish { color: var(--accent); cursor: pointer; background: none; border: 0; font: inherit; font-size: 13.5px; padding: 0; } .linkish:hover { text-decoration: underline; } /* ---------- Cards ---------- */ .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; } .card { display: block; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 17px; transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; } .card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); } .card h3 { margin: 0 0 6px; font-size: 16px; line-height: 1.3; letter-spacing: -0.012em; } .card p { margin: 0 0 12px; font-size: 14px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-family: var(--font-mono); font-size: 11px; color: var(--faint); letter-spacing: 0.02em; } .meta .tag { color: var(--accent); } .dot::before { content: "\00b7"; margin-right: 8px; } /* Depth is length, not maturity - see the spec. */ .depth { display: inline-flex; gap: 2px; align-items: center; } .depth i { width: 5px; height: 5px; border-radius: 50%; background: var(--faint); display: block; } .depth i.on { background: var(--green); } /* ---------- Rows (list density) ---------- */ .rows { border-top: 1px solid var(--line); } .row { display: grid; grid-template-columns: 1fr auto; gap: 8px 18px; align-items: baseline; padding: 11px 4px; border-bottom: 1px solid var(--line); transition: background 0.12s; } .row:hover { background: var(--highlight); } .row .t { font-size: 15.5px; } .row .sub { grid-column: 1 / -1; font-size: 13px; color: var(--muted); margin-top: -2px; } /* ---------- Empty / loading ---------- */ .empty { padding: 56px 0; text-align: center; color: var(--muted); } .skeleton { border-radius: var(--radius); background: linear-gradient(90deg, var(--line) 25%, var(--bg-raised) 50%, var(--line) 75%); background-size: 400% 100%; animation: shimmer 1.4s ease-in-out infinite; height: 108px; } @keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } .card:hover { transform: none; } } /* ---------- Footer note ---------- */ .labnote { margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--faint); max-width: 68ch; } .labnote a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }