/* Lacunari — lacunari.com * * Dark, high-contrast, and built around data rather than decoration. The * product finds what is missing, so the visual system has exactly one job: * make "present" and "absent" instantly legible. Teal is held, amber is * missing, and those two colours mean the same thing on every chart, every * diagram and every terminal block on the site. * * No webfonts — they cost a render-blocking round trip and every platform * ships a good serif and a good mono. */ :root { /* Light, because the product is sold on rigour and a dark marketing page reads as a hobby project. Contrast comes from vivid accents and from the dark terminal blocks, not from inverting the whole page. */ --bg: #ffffff; --bg-2: #f6f8fb; --panel: #ffffff; --panel-2: #f2f5f9; --rule: #e3e8ef; --rule-hi: #c7d0dd; --shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06); --fg: #0d1524; --fg-soft: #475467; --dim: #667085; --held: #0d9488; /* present, found, corroborated */ --gap: #ea580c; /* missing — the whole point */ --gap-soft: #fff2e8; --blue: #2563eb; --violet: #7c3aed; --red: #dc2626; --ink: #0d1524; /* inverted bands */ --serif: ui-serif, Charter, "Iowan Old Style", Georgia, serif; --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --measure: 40rem; --wide: 76rem; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; } .wrap { max-width: var(--wide); margin: 0 auto; padding: 0 32px; } /* Long-form pages centre their reading column. A 42rem measure inside a 76rem container leaves half the screen empty and reads as a broken layout rather than as typography — which is exactly how it looked. Chrome (header, footer) keeps the wide wrap; only the prose narrows. */ .wrap.narrow { max-width: 48rem; } .wrap.narrow p, .wrap.narrow ul, .wrap.narrow ol, .wrap.narrow .lede, .wrap.narrow h1, .wrap.narrow h2 { max-width: none; } .wrap.narrow .term, .wrap.narrow .callout, .wrap.narrow figure { max-width: none; } .skip { position: absolute; left: -9999px; } .skip:focus { left: 12px; top: 12px; background: var(--fg); color: #fff; padding: 8px 14px; border-radius: 4px; z-index: 100; } /* ── chrome ─────────────────────────────────────────────────────────────── */ header.site { border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.86); backdrop-filter: saturate(180%) blur(12px); } .bar { display: flex; align-items: center; gap: 32px; height: 76px; } /* The wordmark is the brand — it should read as a company, not a footnote. */ .wordmark { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 25px; letter-spacing: -.032em; color: var(--fg); text-decoration: none; flex: 0 0 auto; } .wordmark img { display: block; width: 32px; height: 32px; } header nav { margin-left: auto; display: flex; gap: 8px; align-items: center; } header nav a { font-size: 14.5px; color: var(--fg-soft); text-decoration: none; padding: 7px 12px; border-radius: 7px; white-space: nowrap; } header nav a:hover { color: var(--fg); background: var(--panel); } header nav a[aria-current] { color: var(--fg); background: var(--panel); } header nav a.gh { border: 1px solid var(--rule-hi); color: var(--fg); } header nav a.gh:hover { border-color: var(--held); color: var(--held); } footer.site { border-top: 1px solid var(--rule); margin-top: 0; padding: 56px 0 32px; background: var(--bg-2); } footer .cols { display: grid; gap: 36px; grid-template-columns: 2fr repeat(3, 1fr); } footer h4 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); margin: 0 0 12px; font-weight: 650; } footer a { display: block; font-size: 14.5px; color: var(--fg-soft); text-decoration: none; margin-bottom: 8px; } footer a:hover { color: var(--held); } .foot-mark { font-weight: 700; margin: 0 0 6px; font-size: 22px; letter-spacing: -.03em; } .legal { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--rule); } .legal p { font-size: 13px; color: var(--dim); margin: 0; max-width: none; } /* ── type ───────────────────────────────────────────────────────────────── */ h1, h2, h3 { line-height: 1.15; letter-spacing: -.028em; font-weight: 680; } h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); margin: 0 0 22px; } h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); margin: 0 0 18px; } h3 { font-size: 1.18rem; margin: 0 0 8px; letter-spacing: -.015em; } p { max-width: var(--measure); } a { color: var(--blue); text-underline-offset: 3px; } .lede { font-size: clamp(1.08rem, 1.7vw, 1.32rem); color: var(--fg-soft); max-width: 46rem; line-height: 1.6; } .dim { color: var(--dim); } .mono { font-family: var(--mono); font-size: .88em; } .held { color: var(--held); } .gap { color: var(--gap); } .eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gap); margin: 0 0 16px; } section.band { padding: 90px 0; border-bottom: 1px solid var(--rule); } section.band.tint { background: var(--bg-2); } .page-head { padding: 60px 0 0; } .page-head h1 { max-width: 20ch; margin-bottom: 20px; } .page-head .lede { margin-bottom: 0; } /* The first band after a page head supplied its own 90px on top of the head's own padding, leaving ~100px of dead space between a lede and its first paragraph on every article. */ .page-head + section.band { padding-top: 44px; border-top: 0; } /* ── hero ───────────────────────────────────────────────────────────────── */ .hero { padding: 34px 0 72px; position: relative; overflow: hidden; border-bottom: 1px solid var(--rule); } .hero::before { content: ""; position: absolute; inset: -40% 40% 40% -10%; background: radial-gradient(60% 60% at 30% 40%, rgba(37,99,235,.10), transparent 70%); pointer-events: none; } .hero::after { content: ""; position: absolute; inset: 20% -20% -40% 45%; background: radial-gradient(50% 50% at 60% 40%, rgba(234,88,12,.09), transparent 70%); pointer-events: none; } .hero .wrap { position: relative; z-index: 1; } .hero h1 { max-width: 15ch; line-height: 1.02; } .hero h1 .hit { background: linear-gradient(96deg, var(--gap), #ffd479); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-cta { display: flex; gap: 14px; align-items: center; margin-top: 36px; flex-wrap: wrap; } .btn { font-size: 15px; font-weight: 600; text-decoration: none; padding: 12px 24px; border-radius: 9px; display: inline-block; transition: transform .12s ease; } .btn:hover { transform: translateY(-1px); } .btn.primary { background: var(--ink); color: #fff; box-shadow: var(--shadow); } .btn.ghost { border: 1px solid var(--rule-hi); color: var(--fg); background: #fff; } .btn.ghost:hover { border-color: var(--held); color: var(--held); } /* ── statement band ─────────────────────────────────────────────────────── */ .statement { padding: 100px 0; background: var(--ink); color: #fff; border-bottom: 1px solid var(--rule); } .statement .pull, .statement h2 { color: #fff; } .statement .stat b { color: #fff; } .statement .stat span { color: #98a5b8; } .statement .stat { border-top-color: var(--held); } .statement .btn.ghost { border-color: rgba(255,255,255,.32); color: #fff; background: none; } .statement .btn.primary { background: var(--held); color: #04231b; } .pull { font-size: clamp(1.6rem, 3.6vw, 2.5rem); line-height: 1.3; letter-spacing: -.026em; max-width: 24ch; margin: 0; font-weight: 650; font-family: var(--serif); } .pull .hit { color: #fdba74; } /* ── terminal ───────────────────────────────────────────────────────────── */ .term { background: #060910; color: #d7e0ec; border-radius: 12px; padding: 22px 24px; font-family: var(--mono); font-size: 13.5px; line-height: 1.8; overflow-x: auto; margin: 30px 0; border: 1px solid var(--rule); white-space: normal; } .term .c { color: #61708a; } .term .p { color: var(--blue); } .term .g { color: var(--held); } .term .a { color: var(--gap); } /* ── steps: TWO grid children only ──────────────────────────────────────── * * The counter is column one and a single wrapper is column two. An earlier * version put the heading and the paragraph in as separate children, so the * paragraph wrapped onto row two inside the 58px counter column and rendered * one word per line. */ .steps { counter-reset: s; margin-top: 44px; } .step { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 24px; padding: 28px 0; border-top: 1px solid var(--rule); align-items: start; } .step::before { counter-increment: s; content: counter(s, decimal-leading-zero); font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--gap); padding-top: 2px; } .step-body { min-width: 0; } .step-body p { margin: 0; color: var(--fg-soft); max-width: 52rem; } /* ── figures & charts ───────────────────────────────────────────────────── */ figure { margin: 44px 0; max-width: 100%; } figure svg { max-width: 100%; height: auto; display: block; } figcaption { font-size: 13.5px; color: var(--dim); margin-top: 14px; max-width: 46rem; line-height: 1.55; } figcaption b { color: var(--fg-soft); font-weight: 650; } .scroll-x { overflow-x: auto; } /* CSS bar chart — coverage with a hole in it */ .chart { margin: 36px 0; max-width: 46rem; } .chart-row { display: grid; grid-template-columns: 62px minmax(0,1fr) 54px; align-items: center; gap: 14px; padding: 7px 0; } .chart-row .yr { font-family: var(--mono); font-size: 13px; color: var(--fg-soft); } .chart-row .track { background: var(--panel-2); border-radius: 5px; height: 26px; position: relative; overflow: hidden; } .chart-row .fill { height: 100%; background: linear-gradient(90deg, var(--held), #34d3bd); border-radius: 5px; } .chart-row.miss .track { border: 1px dashed var(--gap); background: var(--gap-soft); } .chart-row .n { font-family: var(--mono); font-size: 13px; color: var(--dim); text-align: right; } .chart-row.miss .n, .chart-row.miss .yr { color: var(--gap); font-weight: 600; } /* ── fleet grid ─────────────────────────────────────────────────────────── */ .fleet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px,1fr)); gap: 11px; margin: 38px 0 10px; } .wkr { border: 1px solid var(--rule); border-radius: 9px; padding: 12px 13px; font-family: var(--mono); font-size: 11.5px; background: var(--panel); box-shadow: var(--shadow); animation: breathe 3.6s ease-in-out infinite; } .wkr b { display: block; color: var(--fg); font-weight: 650; margin-bottom: 4px; } .wkr span { color: var(--dim); } .wkr.hold { border-color: var(--gap); background: var(--gap-soft); } .wkr.hold span { color: var(--gap); } .wkr.dead { opacity: .45; border-style: dashed; animation: none; } .wkr.dead span { color: var(--red); } .wkr:nth-child(2n){animation-delay:.4s} .wkr:nth-child(3n){animation-delay:.9s} .wkr:nth-child(5n){animation-delay:1.5s} .wkr:nth-child(7n){animation-delay:2.2s} @keyframes breathe { 0%,100%{border-color:var(--rule)} 50%{border-color:#5eead4} } @media (prefers-reduced-motion: reduce) { .wkr { animation: none; } } /* ── grids, cards, stats ────────────────────────────────────────────────── */ .grid-3 { display: grid; gap: 22px; grid-template-columns: repeat(3,1fr); margin-top: 42px; } .grid-2 { display: grid; gap: 22px; grid-template-columns: repeat(2,1fr); margin-top: 42px; } .grid-3 p, .grid-2 p, .cards p, .feature p { max-width: none; } .feature { background: var(--panel); border: 1px solid var(--rule); border-radius: 14px; padding: 26px; box-shadow: var(--shadow); } .feature:hover { border-color: var(--rule-hi); } .feature .ico { width: 34px; height: 34px; margin-bottom: 16px; display: block; } .feature h3 { color: var(--fg); } .feature p { color: var(--fg-soft); font-size: 15px; margin: 0; } .feature a { display: inline-block; margin-top: 14px; font-size: 14.5px; text-decoration: none; font-weight: 600; } .cards { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill,minmax(310px,1fr)); } .card { display: flex; flex-direction: column; border: 1px solid var(--rule); border-radius: 14px; padding: 26px; text-decoration: none; color: inherit; background: var(--panel); box-shadow: var(--shadow); transition: border-color .12s; } .card p { flex: 1 1 auto; } .card .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; } .card:hover { border-color: var(--held); } .card time { font-size: 11.5px; color: var(--gap); letter-spacing: .07em; text-transform: uppercase; font-weight: 650; } .card h3 { margin: 10px 0 8px; font-size: 1.14rem; } .card p { font-size: .95rem; color: var(--fg-soft); margin: 0 0 16px; } .tag { display: inline-block; font-size: 11px; color: var(--dim); background: var(--bg-2); border: 1px solid var(--rule); border-radius: 6px; padding: 3px 9px; margin: 0; white-space: nowrap; } .stat { border-top: 2px solid var(--held); padding-top: 14px; } .stat b { display: block; font-size: 2.2rem; font-weight: 700; letter-spacing: -.035em; line-height: 1.1; color: var(--fg); } .stat span { font-size: 13.5px; color: var(--dim); } /* ── comparison table ───────────────────────────────────────────────────── */ table.cmp { width: 100%; border-collapse: collapse; margin: 38px 0; font-size: 15px; } table.cmp th, table.cmp td { text-align: left; padding: 15px 18px 15px 0; border-bottom: 1px solid var(--rule); vertical-align: top; } table.cmp thead th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); font-weight: 650; } table.cmp td:first-child { font-weight: 650; width: 24%; color: var(--fg); } table.cmp .no { color: var(--dim); } table.cmp .no::before { content: "✕ "; color: var(--red); } table.cmp .yes { color: var(--fg-soft); } table.cmp .yes::before { content: "✓ "; color: var(--held); } /* ── etymology ──────────────────────────────────────────────────────────── */ .etym { border-left: 2px solid var(--gap); padding: 6px 0 6px 26px; margin: 36px 0; max-width: 46rem; } .etym dt { font-family: var(--serif); font-style: italic; font-size: 1.24rem; color: var(--fg); } .etym dt small { font-family: var(--sans); font-style: normal; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gap); margin-left: 12px; font-weight: 650; } .etym dd { margin: 4px 0 18px; color: var(--fg-soft); max-width: 44rem; } .etym dd:last-child { margin-bottom: 0; } /* ── callout, faq, misc ─────────────────────────────────────────────────── */ .callout { background: var(--bg-2); border: 1px solid var(--rule); border-left: 3px solid var(--held); border-radius: 10px; padding: 22px 26px; margin: 36px 0; max-width: 50rem; } .callout p { margin: 0; max-width: none; color: var(--fg-soft); } .faq { margin-top: 38px; max-width: 50rem; } .faq details { border-bottom: 1px solid var(--rule); padding: 20px 0; } .faq summary { cursor: pointer; font-weight: 650; font-size: 1.06rem; list-style: none; display: flex; justify-content: space-between; gap: 20px; align-items: baseline; color: var(--fg); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; color: var(--gap); font-size: 1.3rem; line-height: 1; } .faq details[open] summary::after { content: "–"; } .faq details p { margin: 14px 0 0; color: var(--fg-soft); max-width: none; } hr { border: 0; border-top: 1px solid var(--rule); margin: 56px 0; } article p, article ul, article ol { color: var(--fg-soft); max-width: none; margin: 0 0 18px; } article h2 { margin-top: 44px; margin-bottom: 14px; color: var(--fg); } article h3 { margin-top: 30px; margin-bottom: 8px; color: var(--fg); } article li { margin-bottom: 8px; } article b, article strong { color: var(--fg); } @media (max-width: 900px) { body { font-size: 16px; } .grid-3, .grid-2, footer .cols { grid-template-columns: 1fr; } .wrap { padding: 0 20px; } header nav { gap: 2px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } header nav::-webkit-scrollbar { display: none; } header nav a { padding: 6px 9px; font-size: 13.5px; } .bar { gap: 14px; height: 66px; } .wordmark { font-size: 21px; } .wordmark img { width: 27px; height: 27px; } .step { grid-template-columns: 40px minmax(0,1fr); gap: 14px; } } /* ══ wide-screen layout ═════════════════════════════════════════════════════ * At 1440px the first draft left the entire right half of every section empty, * because the copy is capped at a readable measure and nothing balanced it. * The fix is not wider paragraphs — 40rem is already the limit of comfortable * reading — it is putting something on the right. */ @media (min-width: 1080px) { .split { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: 52px; align-items: start; } .split .term { margin: 0; } .hero { padding: 36px 0 80px; } .hero h1 { font-size: clamp(3.2rem, 5.2vw, 5rem); letter-spacing: -.04em; } .hero .lede { max-width: 33rem; font-size: 1.16rem; } /* Section intros sit beside their eyebrow rather than stacking under it. */ .lead-split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; } .lead-split .lede { max-width: 40rem; margin: 0; } .lead-split h2 { margin-bottom: 0; } .statement .pull { max-width: 30ch; font-size: clamp(2rem, 3.2vw, 2.9rem); } .statement .split-stat { display: grid; grid-template-columns: 1.15fr .85fr; gap: 64px; align-items: center; } } /* A compact live-board panel used to fill the hero's right column. */ .board-card { background: var(--panel); border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow); padding: 20px 22px; font-family: var(--mono); font-size: 12.5px; } .board-card .hd { display: flex; justify-content: space-between; color: var(--dim); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; } .board-card .hd b { color: var(--held); font-weight: 650; } .brow { display: grid; grid-template-columns: 26px minmax(0,1fr) auto; gap: 10px; padding: 9px 0; border-top: 1px solid var(--rule); align-items: center; } .brow .id { color: var(--dim); } .brow .ti { color: var(--fg-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .brow .st { font-size: 10.5px; padding: 2px 8px; border-radius: 20px; border: 1px solid currentColor; } .st.open { color: var(--blue); } .st.claimed { color: var(--gap); } .st.done { color: var(--held); } .st.block { color: var(--red); } @media (max-width: 1079px) { .split, .lead-split { display: block; } .board-card { margin-top: 30px; } } /* ══ figures inside a narrow reading column ═════════════════════════════════ * A diagram usually wants more width than a comfortable line of text. These * break out of the 48rem measure while staying inside the page gutters. */ .wrap.narrow .fig-wide { width: min(64rem, calc(100vw - 64px)); margin-left: calc(50% - min(32rem, calc(50vw - 32px))); margin-right: 0; } figure.panel { background: var(--bg-2); border: 1px solid var(--rule); border-radius: 14px; padding: 26px 28px 20px; } figure.panel svg { margin: 0 auto; } figure.panel figcaption { max-width: none; margin-top: 16px; border-top: 1px solid var(--rule); padding-top: 14px; } /* Inline key so a diagram's colours are never ambiguous. */ .key { display: flex; gap: 20px; flex-wrap: wrap; margin: 0 0 18px; font-size: 12.5px; color: var(--dim); } .key i { font-style: normal; display: inline-flex; align-items: center; gap: 7px; } .key b { width: 11px; height: 11px; border-radius: 3px; display: inline-block; } .key .k-held b { background: var(--held); } .key .k-gap b { background: none; border: 1.6px dashed var(--gap); } /* Small stat strip for article pages. */ .figrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 14px; margin: 26px 0; } .figrow div { background: var(--bg-2); border: 1px solid var(--rule); border-radius: 10px; padding: 16px 18px; } .figrow b { display: block; font-size: 1.7rem; font-weight: 700; letter-spacing: -.03em; color: var(--fg); line-height: 1.15; } .figrow b.gap { color: var(--gap); } .figrow span { font-size: 12.5px; color: var(--dim); } /* ══ animated terminals ═════════════════════════════════════════════════════ * Lines reveal in sequence with a cursor, so the hero shows a session running * rather than a screenshot of one. * * Only opacity animates. The lines stay in flow at full height from the first * paint, so nothing reflows and the block never changes size — a terminal that * grows line by line would shove the rest of the page down while it plays. * * Screen readers get the whole transcript immediately either way; this is * decoration over text that is already present in the DOM. */ .term .ln { display: block; white-space: pre; } .js .term.anim .ln { opacity: 0; } .js .term .cursor { display: inline-block; } .js .term.anim.play .ln { animation: lineIn .34s cubic-bezier(.2,.7,.3,1) forwards; animation-delay: calc(var(--i, 0) * 105ms); } @keyframes lineIn { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } } .term .cursor { display: none; width: 8px; height: 1em; background: var(--held); vertical-align: -2px; margin-left: 3px; opacity: 0; } .term.anim.play .cursor { animation: curIn 0s forwards, blink 1.05s steps(2) infinite; animation-delay: calc(var(--i, 0) * 105ms), calc(var(--i, 0) * 105ms); } @keyframes curIn { to { opacity: 1; } } @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } } /* A worker bar that fills as the queue drains. */ .term .prog { display: inline-block; width: 168px; height: 8px; border-radius: 4px; background: #1b2532; vertical-align: middle; overflow: hidden; } .term .prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--held), #5eead4); } .term.anim.play .prog i { animation: fill 2.4s cubic-bezier(.3,.8,.4,1) forwards; animation-delay: calc(var(--i, 0) * 105ms); } @keyframes fill { to { width: 100%; } } /* The board's live dot, and a row that lands while you watch. */ .board-card .hd b::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--held); margin-right: 7px; animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } } .brow.lands .st { animation: swap 6s ease-in-out infinite; } @keyframes swap { 0%, 45% { color: var(--blue); } 55%, 100%{ color: var(--gap); } } @media (prefers-reduced-motion: reduce) { .term.anim .ln { opacity: 1; animation: none; } .term.anim.play .cursor { animation: none; opacity: 1; } .term.anim.play .prog i { animation: none; width: 100%; } .board-card .hd b::before, .brow.lands .st { animation: none; } } /* ══ scroll reveal ══════════════════════════════════════════════════════════ * Content lifts in as it enters the viewport. Gated behind .js for the same * reason the terminals are: without a script to reveal them, these must never * start hidden. Staggered children make a grid land as a sequence rather than * a slab. */ .js .rv { opacity: 0; transform: translateY(30px); } .js .rv.seen { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1); } .js .rv-kids > * { opacity: 0; transform: translateY(28px); } .js .rv-kids.seen > * { opacity: 1; transform: none; transition: opacity .62s cubic-bezier(.16,.8,.3,1), transform .62s cubic-bezier(.16,.8,.3,1); } .js .rv-kids.seen > *:nth-child(1){transition-delay:.00s} .js .rv-kids.seen > *:nth-child(2){transition-delay:.09s} .js .rv-kids.seen > *:nth-child(3){transition-delay:.18s} .js .rv-kids.seen > *:nth-child(4){transition-delay:.27s} .js .rv-kids.seen > *:nth-child(5){transition-delay:.36s} .js .rv-kids.seen > *:nth-child(6){transition-delay:.45s} .js .rv-kids.seen > *:nth-child(7){transition-delay:.54s} .js .rv-kids.seen > *:nth-child(8){transition-delay:.63s} .js .rv-kids.seen > *:nth-child(n+9){transition-delay:.72s} /* Chart bars grow from zero as the chart arrives. */ /* Grow the bars with a transform, not width. The first version forced width:0 !important and the .seen rule only added a transition — it never put the width back, so every bar stayed empty forever. Scaling also avoids fighting the inline width each bar carries. */ .js .chart.rv .fill { transform: scaleX(0); transform-origin: left center; } .js .chart.rv.seen .fill { transform: scaleX(1); transition: transform .85s cubic-bezier(.2,.8,.3,1) .12s; } @media (prefers-reduced-motion: reduce) { .js .rv, .js .rv.seen, .js .rv-kids > *, .js .rv-kids.seen > * { opacity: 1 !important; transform: none !important; transition: none !important; } .js .chart.rv .fill { transform: none !important; } } /* ══ the live board ═════════════════════════════════════════════════════════ * The hero claims work is being claimed, finished and escalated continuously. * A frozen list argues the opposite, so the board runs on a 12s loop: a task * lands at the top, states advance, and a finished row retires. * * Pure CSS keyframes — no timers to leak and nothing to schedule. Everything * is decoration over rows that are fully present and readable without it. */ .board-card .brow { transition: background .4s ease; } .js .board-card .brow { animation: rowCycle 12s ease-in-out infinite; } .js .board-card .brow:nth-child(2) { animation-delay: 0s; } .js .board-card .brow:nth-child(3) { animation-delay: -2.4s; } .js .board-card .brow:nth-child(4) { animation-delay: -4.8s; } .js .board-card .brow:nth-child(5) { animation-delay: -7.2s; } .js .board-card .brow:nth-child(6) { animation-delay: -9.6s; } @keyframes rowCycle { 0%, 88% { background: transparent; } 92% { background: var(--gap-soft); } 100% { background: transparent; } } /* The status pill advances open → claimed → done on its own cadence. */ .js .board-card .st.cyc { position: relative; } .js .board-card .st.cyc::after { content: "claimed"; position: absolute; inset: -1px -9px; border-radius: 20px; border: 1px solid var(--gap); color: var(--gap); background: var(--panel); display: grid; place-items: center; opacity: 0; animation: pill 12s ease-in-out infinite; } .js .board-card .brow:nth-child(3) .st.cyc::after { animation-delay: -3s; content: "done"; border-color: var(--held); color: var(--held); } .js .board-card .brow:nth-child(4) .st.cyc::after { animation-delay: -6s; } @keyframes pill { 0%, 40% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } } /* A new task sliding in at the top of the queue. */ .js .board-card .brow.arrives { animation: arrive 12s ease-in-out infinite; } @keyframes arrive { 0%, 4% { opacity: 0; transform: translateY(-10px); } 10%,100%{ opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .js .board-card .brow, .js .board-card .brow.arrives { animation: none; } .js .board-card .st.cyc::after { display: none; } } /* ══ navigation ═════════════════════════════════════════════════════════════ * A row of plain links reads like a placeholder. The active item gets a rule * beneath it, hover gets a tinted pill, and the source button is the one * emphatic element — it is the action most first-time visitors want. */ header nav a { position: relative; font-weight: 520; transition: color .15s, background .15s; } header nav a:not(.gh)::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--gap); transform: scaleX(0); transform-origin: left; transition: transform .22s cubic-bezier(.2,.8,.3,1); } header nav a:not(.gh):hover::after { transform: scaleX(1); } header nav a[aria-current] { background: none; font-weight: 650; } header nav a[aria-current]::after { transform: scaleX(1); } header nav a.gh { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 600; display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; } header nav a.gh::before { content: ""; width: 15px; height: 15px; flex: 0 0 auto; background: #fff; -webkit-mask: var(--gh) center/contain no-repeat; mask: var(--gh) center/contain no-repeat; } header nav a.gh:hover { background: #000; border-color: #000; color: #fff; } :root { --gh: url('data:image/svg+xml;utf8,'); }