Something went wrong. Try again.
2025 refresh of the landing page in Astro
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261@import "tailwindcss";
/* Design tokens — Tailwind v4 picks these up as utility classes. --color-* → bg-*, text-*, border-* … / --font-* → font-* */@theme { --color-night: #0b0f0d; --color-night-2: #101614; --color-ink: #e8ebe7; --color-ink-soft: rgba(232, 235, 231, 0.72); --color-ink-dim: rgba(232, 235, 231, 0.45); --color-ink-faint: rgba(232, 235, 231, 0.22); --color-rule: rgba(232, 235, 231, 0.10); --color-rule-2: rgba(232, 235, 231, 0.18); --color-green: #2dcd70; --color-green-dim: rgba(45, 205, 112, 0.65); --color-red: #e0614b; --color-amber: #e0b84b;
--font-jb-mono: 'JetBrains Mono Variable', ui-monospace, SFMono-Regular, Menlo, monospace; --font-display: 'Instrument Serif', 'Newsreader', Georgia, serif; --font-body: 'Newsreader', 'Instrument Serif', Georgia, serif;}
/* Turn off ligatures everywhere the mono face is used. */@utility mono { font-family: var(--font-jb-mono); font-variant-ligatures: none; font-feature-settings: "liga" 0, "clig" 0, "calt" 0;}
/* PDS sub-site components (from the org-site-v2 design) */@layer components { /* Homepage grid tiles — clickable, outlined on hover */ .tile { outline: 1px solid transparent; outline-offset: -1px; transition: outline-color 180ms ease; } .tile:hover { outline-color: var(--color-ink-faint); }
/* Hero subtitle — 18px body, soft ink */ .hero-sub { font-family: var(--font-body); font-size: 18px; color: var(--color-ink-soft); line-height: 1.45; max-width: 46ch; }
/* Handle-domain chips */ .chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; } .chip { font-family: var(--font-jb-mono); font-variant-ligatures: none; font-feature-settings: "liga" 0, "clig" 0, "calt" 0; font-size: 12.5px; color: var(--color-ink-soft); border: 1px solid var(--color-rule-2); border-radius: 20px; padding: 6px 14px; } .chip--default { color: var(--color-green); border-color: var(--color-green-dim); } .chip .you { color: var(--color-ink-dim); } .chip--default .you { color: color-mix(in oklab, var(--color-green) 55%, var(--color-ink-dim)); }
/* Quick-link cards */ .link-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .link-card { border: 1px solid var(--color-rule); border-radius: 14px; background: var(--color-night-2); padding: 24px 24px 20px; display: flex; flex-direction: column; justify-content: space-between; min-height: 140px; transition: border-color 180ms ease; } .link-card:hover { border-color: var(--color-ink-faint); } .link-card-title { font-family: var(--font-display); font-size: 24px; letter-spacing: -0.01em; margin-bottom: 8px; } .link-card-desc { color: var(--color-ink-soft); font-size: 14px; line-height: 1.5; } .link-card-arrow { font-family: var(--font-jb-mono); font-variant-ligatures: none; font-feature-settings: "liga" 0, "clig" 0, "calt" 0; font-size: 11.5px; color: var(--color-ink-dim); margin-top: 16px; }
/* Numbered step list */ .step-list { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 20px; max-width: none; } .step { counter-increment: step; display: grid; grid-template-columns: 32px 1fr; gap: 16px; padding: 0; } .step::before { content: counter(step); font-family: var(--font-jb-mono); font-variant-ligatures: none; font-feature-settings: "liga" 0, "clig" 0, "calt" 0; font-size: 13px; color: var(--color-green); border: 1px solid var(--color-green-dim); border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; position: static; } .step-body { color: var(--color-ink-soft); } .step-body p { margin: 0; } .step-body p + p { margin-top: 8px; }
/* Markdown-style blockquote */ .bq { border-left: 3px solid var(--color-green-dim); padding: 12px 0 12px 18px; margin: 0 0 28px; background: rgba(45, 205, 112, 0.04); border-radius: 0 6px 6px 0; } .bq p { margin: 0; color: var(--color-ink-soft); font-size: 15px; line-height: 1.55; max-width: none; }
@media (max-width: 720px) { .link-cards { grid-template-columns: 1fr; } }}
@layer base { html, body { background: var(--color-night); color: var(--color-ink); font-family: var(--font-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
code, pre { font-family: var(--font-jb-mono); font-variant-ligatures: none; font-feature-settings: "liga" 0, "clig" 0, "calt" 0; }
/* Inline link behavior: thin underline, brightens on hover. */ a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--color-ink-faint); transition: border-color 140ms ease, color 140ms ease; } a:hover { border-bottom-color: var(--color-ink); }
::selection { background: var(--color-green); color: var(--color-night); }
/* Prose element defaults — content inside pages is plain HTML, so give h/p/ul/em sensible defaults once here. */ h1, h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.015em; margin: 0 0 20px; color: var(--color-ink); } h1 { font-size: 76px; line-height: 1.02; letter-spacing: -0.03em; } h2 { font-size: 46px; line-height: 1.08; } h3 { font-size: 22px; line-height: 1.2; font-family: var(--font-body); letter-spacing: -0.005em; }
p { margin: 0 0 18px; color: var(--color-ink-soft); text-wrap: pretty; max-width: 58ch; } p:last-child { margin-bottom: 0; }
em { font-style: italic; color: var(--color-ink); }
ul { margin: 0 0 18px; padding-left: 0; color: var(--color-ink-soft); list-style: none; max-width: 58ch; } ul li { padding: 4px 0 4px 18px; position: relative; } ul li::before { content: '—'; position: absolute; left: 0; color: var(--color-ink-dim); }
@media (max-width: 720px) { h1 { font-size: 52px; } h2 { font-size: 34px; } }}