/* * The landing page's whole stylesheet. * * Hand-written because the page has no build step: one document, one sheet, one * script. The editorial layout, the hairline rules and the mono figure tables * come from omp.sh; the palette, the type pairing and the type scale are * mechabedo's own. Four themes, both dark and light plus two warm * Claude-inspired variants, all driven from the tokens in :root, so the * toggle is one attribute on . */ :root { --ink-0: oklch(14% 0.012 250); --ink-1: oklch(18% 0.015 250); --ink-5: oklch(52% 0.018 250); --ink-7: oklch(83% 0.012 250); --ink-9: oklch(97% 0.006 80); --ember: oklch(74% 0.17 52); --steel: oklch(80% 0.11 205); --font-sans: 'Geist', ui-sans-serif, system-ui, sans-serif; --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; color-scheme: dark; --bg: var(--ink-0); --bg-elev: var(--ink-1); --fg: var(--ink-9); --fg-dim: var(--ink-7); --fg-faint: var(--ink-5); --rule: oklch(100% 0 0 / 0.08); --rule-strong: oklch(100% 0 0 / 0.16); --grid: oklch(100% 0 0 / 0.026); --accent: var(--ember); --accent-2: var(--steel); --selection: oklch(74% 0.17 52 / 0.3); --glow-a: oklch(74% 0.17 52 / 0.13); --glow-b: oklch(80% 0.11 205 / 0.09); } :root[data-theme='light'] { color-scheme: light; --bg: oklch(95% 0.005 85); --bg-elev: oklch(98% 0.004 85); --fg: oklch(21% 0.02 250); --fg-dim: oklch(41% 0.018 250); --fg-faint: oklch(57% 0.016 250); --rule: oklch(21% 0.02 250 / 0.11); --rule-strong: oklch(21% 0.02 250 / 0.2); --grid: oklch(21% 0.02 250 / 0.05); --accent: oklch(48% 0.15 46); --accent-2: oklch(45% 0.1 218); --selection: oklch(48% 0.15 46 / 0.18); --glow-a: oklch(48% 0.15 46 / 0.05); --glow-b: oklch(45% 0.1 218 / 0.04); } :root[data-theme='warm-light'] { color-scheme: light; --bg: #ffffff; --bg-elev: #f5f0e8; --fg: #141413; --fg-dim: #3d3d3a; --fg-faint: #6c6a64; --rule: rgba(20, 20, 19, 0.11); --rule-strong: rgba(20, 20, 19, 0.2); --grid: rgba(20, 20, 19, 0.05); --accent: #cc785c; --accent-2: #5db8a6; --selection: rgba(204, 120, 92, 0.2); --glow-a: rgba(204, 120, 92, 0.09); --glow-b: rgba(93, 184, 166, 0.06); } :root[data-theme='warm-dark'] { color-scheme: dark; --bg: #151515; --bg-elev: #1f1e1b; --fg: #faf9f5; --fg-dim: #a09d96; --fg-faint: #8e8b82; --rule: rgba(250, 249, 245, 0.11); --rule-strong: rgba(250, 249, 245, 0.2); --grid: rgba(250, 249, 245, 0.026); --accent: #cc785c; --accent-2: #5db8a6; --selection: rgba(204, 120, 92, 0.32); --glow-a: rgba(204, 120, 92, 0.14); --glow-b: rgba(93, 184, 166, 0.09); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { background: var(--bg); color: var(--fg); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; } body { overflow-x: clip; background: radial-gradient(ellipse 80vw 60vh at 16% -12%, var(--glow-a), transparent 62%), radial-gradient(ellipse 70vw 70vh at 108% 26%, var(--glow-b), transparent 60%), var(--bg); } ::selection { background: var(--selection); color: var(--fg); } :focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 2px; } a { color: inherit; text-decoration: none; } code, pre { font-family: var(--font-mono); font-size: 0.92em; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip-link { position: absolute; top: 1rem; left: -9999px; padding: 0.5rem 1rem; border-radius: 999px; background: var(--accent); color: var(--bg); font-weight: 600; } .skip-link:focus-visible { left: 1rem; z-index: 999; } .shell { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); } /* Navigation */ .nav { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid transparent; transition: border-color 0.2s, background 0.2s; } .nav.is-stuck { border-bottom-color: var(--rule); background: color-mix(in oklch, var(--bg) 74%, transparent); backdrop-filter: blur(12px); } .nav-inner { display: flex; align-items: center; gap: 1.5rem; height: 3.5rem; } .brand { display: inline-flex; align-items: center; gap: 0.6rem; flex-shrink: 0; } .brand-mark { width: 10px; height: 10px; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 22%, transparent); } .brand-word { font-family: var(--font-mono); font-weight: 600; letter-spacing: -0.02em; } .nav-links { display: none; gap: 1.4rem; margin-left: auto; font-size: 0.9rem; color: var(--fg-faint); } .nav-links a:hover { color: var(--fg); } .nav-actions { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; font-size: 0.9rem; } .nav-links ~ .nav-actions { margin-left: 0; } .nav-repo { color: var(--fg-dim); } .nav-repo:hover { color: var(--fg); } .theme-toggle { border: 1px solid var(--rule); background: transparent; color: var(--fg-faint); font: inherit; font-size: 0.78rem; font-family: var(--font-mono); padding: 0.25rem 1.35rem 0.25rem 0.6rem; cursor: pointer; } .theme-toggle:hover { color: var(--fg); border-color: var(--rule-strong); } /* Hero */ .grid-bg { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to bottom, black, transparent 78%); } .hero { position: relative; padding-block: clamp(4rem, 11vw, 9rem) clamp(3rem, 7vw, 6rem); overflow: clip; } .eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-mono); font-size: 0.8rem; color: var(--fg-faint); } .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); animation: pulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes pulse { 50% { opacity: 0.35; } } .display { margin-top: 1.4rem; max-width: 26ch; font-family: var(--font-display); font-weight: 400; font-size: clamp(2.5rem, 6.2vw, 4.6rem); line-height: 1.04; letter-spacing: -0.03em; font-variation-settings: 'SOFT' 20, 'WONK' 1; } .display em { font-style: italic; color: var(--accent); } .lede { margin-top: 1.6rem; max-width: 62ch; font-size: clamp(1.02rem, 1.3vw, 1.16rem); line-height: 1.62; color: var(--fg-dim); } .install { margin-top: 2.4rem; max-width: 640px; } .install-tabs { display: flex; gap: 0.25rem; font-family: var(--font-mono); font-size: 0.78rem; } .install-tabs button { border: 1px solid var(--rule); border-bottom: 0; background: transparent; color: var(--fg-faint); font: inherit; padding: 0.35rem 0.75rem; cursor: pointer; } .install-tabs button[aria-selected='true'] { color: var(--fg); background: var(--bg-elev); border-color: var(--rule-strong); } .install-body { position: relative; border: 1px solid var(--rule-strong); background: color-mix(in oklch, var(--bg-elev) 70%, transparent); backdrop-filter: blur(8px); } .install-body pre { display: none; padding: 1rem 4.5rem 1rem 1.1rem; overflow-x: auto; line-height: 1.75; color: var(--fg); } .install-body pre.is-active { display: block; } .install-body pre code::selection, .install-body pre::selection { background: var(--selection); } .copy { position: absolute; top: 0.6rem; right: 0.6rem; border: 1px solid var(--rule); background: var(--bg); color: var(--fg-faint); font-family: var(--font-mono); font-size: 0.72rem; padding: 0.2rem 0.5rem; cursor: pointer; } .copy:hover { color: var(--fg); } .stats { display: flex; flex-wrap: wrap; gap: 1.25rem 2.75rem; margin-top: 3rem; list-style: none; } .stats li { display: flex; align-items: baseline; gap: 0.55rem; } .stats b { font-family: var(--font-mono); font-size: 1.45rem; font-weight: 500; color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; } .stats span { font-size: 0.86rem; color: var(--fg-faint); max-width: 16ch; line-height: 1.35; } /* Bands */ .band { position: relative; padding-block: clamp(3.5rem, 8vw, 7rem); border-top: 1px solid var(--rule); scroll-margin-top: 4rem; } .band.alt { background: color-mix(in oklch, var(--bg-elev) 42%, transparent); } .head { display: grid; gap: 1rem 3.5rem; align-items: start; } @media (min-width: 900px) { .head { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } } .head h2 { max-width: 22ch; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.12; letter-spacing: -0.025em; } .head p { max-width: 56ch; color: var(--fg-dim); line-height: 1.65; } .head a { color: var(--accent-2); border-bottom: 1px solid color-mix(in oklch, var(--accent-2) 35%, transparent); } /* Figure table */ .figures { width: 100%; margin-top: 2.75rem; border-collapse: collapse; font-size: 0.92rem; text-align: left; } .figures thead th { padding: 0.65rem 0.75rem 0.65rem 0; border-bottom: 1px solid var(--rule-strong); font-family: var(--font-mono); font-size: 0.74rem; font-weight: 500; text-transform: lowercase; letter-spacing: 0.06em; color: var(--fg-faint); } .figures td { padding: 0.8rem 0.75rem 0.8rem 0; border-bottom: 1px solid var(--rule); color: var(--fg-dim); vertical-align: top; } .figures td:first-child { color: var(--fg); font-weight: 500; white-space: nowrap; } .figures .right { text-align: right; padding-right: 0; font-family: var(--font-mono); font-size: 0.84rem; color: var(--fg-faint); } /* Pairs, cards, lists */ .pair { display: grid; gap: 2rem 3.5rem; margin-top: 3rem; } .pair.tight { margin-top: 2.5rem; } @media (min-width: 820px) { .pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .pair h3, .cards h3 { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em; } .pair p, .cards p { margin-top: 0.6rem; color: var(--fg-dim); font-size: 0.94rem; line-height: 1.62; max-width: 52ch; } .cards { display: grid; gap: 1px; margin-top: 2.75rem; background: var(--rule); border: 1px solid var(--rule); } @media (min-width: 720px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .cards article { padding: 1.6rem; background: var(--bg); } .list { margin-top: 2.5rem; border-top: 1px solid var(--rule); } .list > div { display: grid; gap: 0.35rem 2.5rem; padding-block: 1.4rem; border-bottom: 1px solid var(--rule); } @media (min-width: 820px) { .list > div { grid-template-columns: 12rem minmax(0, 1fr); } } .list dt { font-family: var(--font-mono); font-size: 0.86rem; color: var(--accent); } .list dd { color: var(--fg-dim); font-size: 0.94rem; line-height: 1.62; max-width: 66ch; } /* Runtime modes */ .modes { display: grid; gap: 1px; margin-top: 2.75rem; background: var(--rule); border: 1px solid var(--rule); } @media (min-width: 680px) { .modes { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .modes article { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.4rem; background: var(--bg); } .modes b { font-family: var(--font-mono); font-weight: 500; color: var(--accent); } .modes span { font-size: 0.88rem; line-height: 1.55; color: var(--fg-dim); } /* Call to action, footer */ .cta { display: grid; gap: 1.75rem 3rem; align-items: end; margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--rule); } @media (min-width: 900px) { .cta { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } } .cta h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; line-height: 1.25; letter-spacing: -0.02em; max-width: 34ch; } .cta p { margin-top: 0.75rem; max-width: 58ch; color: var(--fg-dim); font-size: 0.94rem; line-height: 1.62; } .cta-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; } .btn { border: 1px solid var(--rule-strong); padding: 0.55rem 1.1rem; font-size: 0.9rem; color: var(--fg-dim); } .btn:hover { color: var(--fg); border-color: var(--fg-faint); } .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 600; } .btn.primary:hover { color: var(--bg); filter: brightness(1.08); } .fineprint { margin-top: 2.5rem; max-width: 74ch; font-size: 0.82rem; line-height: 1.6; color: var(--fg-faint); } .foot { border-top: 1px solid var(--rule); padding-block: 2rem; } .foot-inner { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: baseline; justify-content: space-between; font-size: 0.86rem; } .foot-inner > div { display: flex; align-items: baseline; gap: 0.75rem; } .foot .muted { color: var(--fg-faint); } .foot nav { display: flex; flex-wrap: wrap; gap: 1.25rem; color: var(--fg-faint); } .foot nav a:hover { color: var(--fg); } /* Entrance */ .reveal { opacity: 0; transform: translateY(10px); animation: rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .reveal:nth-of-type(2) { animation-delay: 0.06s; } .reveal:nth-of-type(3) { animation-delay: 0.12s; } .reveal:nth-of-type(4) { animation-delay: 0.18s; } @keyframes rise { to { opacity: 1; transform: none; } } @media (min-width: 900px) { .nav-links { display: flex; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; animation: none; } .dot { animation: none; } }