/* ========================================================================== Lentern design system for the block explorer. Loaded AFTER pico.min.css, so it (a) re-skins Pico's CSS custom properties to the Lentern palette and (b) adds a small set of Lentern components (top bar / brand, eyebrow labels, leaderboard bars). Theme-aware, mirroring the main Lentern marketing site so navigating between them never flips light<->dark: :root = LIGHT tokens (default) @media (prefers-color-scheme:dark) :root:not([data-theme]) = DARK when the OS prefers dark and no toggle is set :root[data-theme="dark"|"light"] = explicit toggle wins either direction The #themeBtn toggle (in the header component) stamps data-theme on . ========================================================================== */ :root { /* -- fonts (shared by both themes) -- */ --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, ui-serif, serif; --sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace; /* content column, matching the main site's --maxw */ --maxw: 1080px; /* -- LIGHT palette (default) -- */ color-scheme: light; --paper: #EDF2F2; --surface: #FBFCFC; --surface-2: #E7EEEE; --deep: #0A1B21; --deep-ink: #DCE9EA; --ink: #0E2A33; --ink-soft: #4C6169; --ink-faint: #56686E; --tide: #0C8F8F; --tide-deep: #0A6E70; --truth: #A9640F; --truth-bg: #FBF0DE; --keep: #1F7A64; --hair: rgba(14, 42, 51, .13); --hair-strong: rgba(14, 42, 51, .24); --l-shadow: 0 1px 2px rgba(14, 42, 51, .05), 0 8px 26px -12px rgba(14, 42, 51, .16); } /* DARK when the visitor's OS prefers dark and no explicit toggle is set. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --paper: #08161B; --surface: #0E2027; --surface-2: #122932; --deep: #050F13; --deep-ink: #CFE1E2; --ink: #E7F0F1; --ink-soft: #A6BABF; --ink-faint: #7E9AA0; --tide: #37B7B0; --tide-deep: #2AA09A; --truth: #E6A950; --truth-bg: #2A2011; --keep: #4CC0A2; --hair: rgba(255, 255, 255, .11); --hair-strong: rgba(255, 255, 255, .2); --l-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -12px rgba(0, 0, 0, .6); } } /* Explicit toggle overrides — these win over the media query in both directions, so the ◐ button flips the theme regardless of OS preference. */ :root[data-theme="dark"] { color-scheme: dark; --paper: #08161B; --surface: #0E2027; --surface-2: #122932; --deep: #050F13; --deep-ink: #CFE1E2; --ink: #E7F0F1; --ink-soft: #A6BABF; --ink-faint: #7E9AA0; --tide: #37B7B0; --tide-deep: #2AA09A; --truth: #E6A950; --truth-bg: #2A2011; --keep: #4CC0A2; --hair: rgba(255, 255, 255, .11); --hair-strong: rgba(255, 255, 255, .2); --l-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -12px rgba(0, 0, 0, .6); } :root[data-theme="light"] { color-scheme: light; --paper: #EDF2F2; --surface: #FBFCFC; --surface-2: #E7EEEE; --deep: #0A1B21; --deep-ink: #DCE9EA; --ink: #0E2A33; --ink-soft: #4C6169; --ink-faint: #56686E; --tide: #0C8F8F; --tide-deep: #0A6E70; --truth: #A9640F; --truth-bg: #FBF0DE; --keep: #1F7A64; --hair: rgba(14, 42, 51, .13); --hair-strong: rgba(14, 42, 51, .24); --l-shadow: 0 1px 2px rgba(14, 42, 51, .05), 0 8px 26px -12px rgba(14, 42, 51, .16); } /* Re-skin Pico from the Lentern tokens. Because every value below is a var(--token), Pico automatically follows whichever theme is active — no per-theme duplication needed here. Loaded after pico.min.css so it wins the cascade. */ :root { --pico-background-color: var(--paper); --pico-color: var(--ink); --pico-muted-color: var(--ink-soft); --pico-muted-border-color: var(--hair); --pico-border-color: var(--hair); --pico-h1-color: var(--ink); --pico-h2-color: var(--ink); --pico-h3-color: var(--ink); --pico-h4-color: var(--ink); --pico-h5-color: var(--ink); --pico-h6-color: var(--ink-soft); --pico-font-family: var(--sans); --pico-font-family-sans-serif: var(--sans); --pico-font-family-monospace: var(--mono); /* accent / links */ --pico-primary: var(--tide); --pico-primary-background: var(--tide); --pico-primary-border: var(--tide); --pico-primary-hover: var(--tide-deep); --pico-primary-hover-background: var(--tide-deep); --pico-primary-hover-border: var(--tide-deep); --pico-primary-focus: rgba(55, 183, 176, .35); --pico-primary-inverse: #04120f; --pico-primary-underline: rgba(55, 183, 176, .5); --pico-primary-hover-underline: var(--tide); --pico-secondary: var(--ink-soft); --pico-secondary-hover: var(--ink); --pico-secondary-background: var(--surface-2); /* cards / articles */ --pico-card-background-color: var(--surface); --pico-card-sectioning-background-color: var(--surface-2); --pico-card-border-color: var(--hair); --pico-card-box-shadow: var(--l-shadow); /* tables */ --pico-table-border-color: var(--hair); --pico-table-row-stripped-background-color: rgba(255, 255, 255, .028); /* code / kbd */ --pico-code-background-color: var(--deep); --pico-code-color: var(--tide); --pico-code-kbd-background-color: var(--deep); --pico-code-kbd-color: var(--ink); /* forms — use --surface (not --deep) so inputs read as light fields in light mode and slightly-raised fields in dark mode */ --pico-form-element-background-color: var(--surface); --pico-form-element-border-color: var(--hair-strong); --pico-form-element-color: var(--ink); --pico-form-element-placeholder-color: var(--ink-faint); --pico-form-element-active-background-color: var(--surface); --pico-form-element-active-border-color: var(--tide); --pico-form-element-focus-color: var(--tide); /* accordions (details/summary) */ --pico-accordion-border-color: var(--hair); --pico-accordion-close-summary-color: var(--ink); --pico-accordion-open-summary-color: var(--tide-deep); --pico-accordion-active-summary-color: var(--tide); /* misc */ --pico-blockquote-border-color: var(--hair-strong); --pico-mark-background-color: var(--truth); --pico-mark-color: #1a1206; --pico-text-selection-color: rgba(55, 183, 176, .28); --pico-contrast: var(--ink); --pico-contrast-background: var(--ink); --pico-contrast-inverse: var(--paper); } :root { /* Pico scales the root font-size up to 118.75–125% on wide screens, so every rem on the explorer was ~20% larger than the main site (fixed 16px) — THAT is the uniform "everything a touch lower and to the right" drift. Pin it to 16px so both pages render at the exact same scale. */ font-size: 16px !important; } html { /* Always reserve the scrollbar gutter so the centered column sits in the same place whether or not the page scrolls — matches the main site, which is long and always has a scrollbar. Kills the ~8px right drift. */ scrollbar-gutter: stable; overflow-y: scroll; } body { margin: 0; background: var(--paper); -webkit-font-smoothing: antialiased; } /* Page headings in the Lentern serif; data stays mono. All six levels are covered so section headings (h4 "Examples", etc.) don't fall back to Pico's sans default and clash with the serif headings above them. */ h1, h2, h3, h4, h5, h6 { font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; line-height: 1.14; text-wrap: balance; } .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; } .center-text { text-align: center; } div.indent { position: relative; left: 20px; } /* ---- signature eyebrow label ---- */ .eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--tide-deep); font-weight: 600; margin: 0 0 10px; } /* ========================================================================== Shared content width — line the explorer's
/footer up to the same 1080px column the main site uses, so cards align across the two sites. The generic .wrap (used by the header bar) mirrors the main site's wrapper. ========================================================================== */ .ribbon { background: transparent; } .ribbon .wrap { display: flex; gap: 8px; align-items: center; padding: 10px 24px; font-size: 13.5px; color: var(--ink-soft); font-family: var(--sans); } .ribbon b { font-weight: 700; color: var(--ink); } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } /* Override Pico's responsive .container breakpoints to the fixed 1080 column. */ main.container { max-width: var(--maxw) !important; margin-inline: auto !important; padding-inline: 24px !important; } /* Tight, consistent gap under the sticky bar — matches the main site so navigating site<->explorer only swaps content, the bar doesn't shift. */ main.container { padding-block: 14px 56px !important; } /* The intro block (eyebrow + headline + summary + stat row) is NOT a card — it sits flush to the column's left edge, exactly like a section heading on the main site. Pico styles every
as a card; strip that from the first one so the top-left content lines up with the marketing page. */ main.container > article:first-child { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 0 28px !important; } /* ========================================================================== Top bar / brand (shared header component) — matches the main site's .bar ========================================================================== */ .bar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hair); /* Pico gives body>header block padding — kill it so the bar is exactly 60px and flush to the top, identical to the main site. */ padding: 0 !important; margin: 0 !important; } .bar .wrap { display: flex; align-items: center; gap: 20px; height: 60px; } .brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); font-weight: 600; font-size: 18px; /* Match the main site's brand box exactly: it inherits body line-height 1.6, the explorer inherits Pico's 1.5 — a ~1.8px taller/shorter box that shifts the vertically-centered wordmark by ~1px (the 16 vs 17 you measured). */ line-height: 1.6; letter-spacing: -.01em; color: var(--ink); text-decoration: none; } .brand:hover { color: var(--ink); } .brand .flame { width: 22px; height: 22px; flex: none; } nav.top { display: flex; gap: 22px; margin-left: 6px; } nav.top a { font-family: var(--sans); font-size: 14px; color: var(--ink-soft); text-decoration: none; padding: 4px 0; border-bottom: 1.5px solid transparent; white-space: nowrap; } nav.top a:hover { color: var(--ink); border-color: var(--tide); } .spacer { margin-left: auto; } .toggle { background: none !important; border: 1px solid var(--hair-strong); color: var(--ink-soft); border-radius: 8px; width: 34px; height: 34px; padding: 0 !important; margin: 0 !important; cursor: pointer; font-size: 15px; display: grid !important; place-items: center; box-shadow: none !important; } .toggle:hover { color: var(--ink); border-color: var(--tide); } .btn { font-family: var(--sans); font-size: 14px; font-weight: 600; border-radius: 9px; padding: 9px 16px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; border: 1px solid transparent; white-space: nowrap; flex: none; } .btn.ghost { background: transparent; border-color: var(--hair-strong); color: var(--ink); } .btn.ghost:hover { border-color: var(--tide); color: var(--tide-deep); } /* ========================================================================== Site footer (shared Lentern footer — mirrors the main site) ========================================================================== */ footer{border-top:1px solid var(--hair);padding:44px 0 56px;margin-top:40px} .foot-grid{display:flex;justify-content:space-between;gap:40px 90px;flex-wrap:wrap;align-items:flex-start;padding-bottom:30px;border-bottom:1px solid var(--hair)} footer .brand{margin-bottom:14px} footer p{max-width:44ch;color:var(--ink-soft);font-size:14px;margin:0;line-height:1.6} .foot-legal{margin-top:26px} footer .disc{font-family:var(--sans);font-size:12.5px;color:var(--ink-faint);max-width:92ch;margin:0 auto 10px;line-height:1.7;text-align:center;text-wrap:balance} footer .disc b{font-weight:600;color:var(--ink-soft)} .foot-copy{font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--ink-faint);text-align:center;margin-top:22px} footer nav{display:flex;flex-direction:column;gap:10px;font-size:14px} footer nav a{color:var(--ink-soft);text-decoration:none} footer nav a:hover{color:var(--tide-deep)} footer nav a.mail{display:inline-flex;align-items:center;color:var(--ink-soft)} footer nav a.mail:hover{color:var(--tide-deep)} .foot-col .fh{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 16px;font-weight:600} /* ========================================================================== Leaderboard (winners page) ========================================================================== */ .stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 26px 0 8px; } .stat-card { background: var(--surface-2); border: 1px solid var(--hair); border-radius: 12px; padding: 18px 20px; } .stat-card .k { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; } .stat-card .v { font-family: var(--serif); font-size: 30px; font-weight: 600; color: var(--ink); line-height: 1; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .stat-card .v .u { font-size: 18px; color: var(--ink-soft); margin-left: -4px; } .stat-card .n { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); line-height: 1.55; margin-top: 10px; } .stat-card .v small { font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--ink-soft); } .stat-card.accent .v { color: var(--tide-deep); } .lead-headline { font-size: clamp(24px, 3.2vw, 34px); margin: 8px 0 4px; max-width: 40ch; text-wrap: balance; line-height: 1.2; } .lead-intro { color: var(--ink-soft); max-width: none; margin: 10px 0 0; } .lead-headline .range { white-space: nowrap; font-variant-numeric: tabular-nums; } .lead-headline .num { font-family: var(--mono); color: var(--tide-deep); font-variant-numeric: tabular-nums; } /* horizontal bar leaderboard */ .board { background: var(--surface); border: 1px solid var(--hair); border-radius: 14px; box-shadow: var(--l-shadow); overflow: hidden; margin: 22px 0; } .board .brow { display: flex; align-items: center; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--hair); } .board .brow:last-child { border-bottom: 0; } .board .rank { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--ink-faint); width: 34px; flex: none; text-align: right; } .board .who { width: 170px; flex: none; font-family: var(--mono); font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .board .who a { color: var(--ink); text-decoration: none; } .board .who a:hover { color: var(--tide); } .board .track { flex: 1; min-width: 60px; height: 20px; /* --surface-2 (not --deep) so the track is a light rail in light mode and a subtle dark rail in dark mode; the tide fill stays visible on both. */ background: var(--surface-2); border: 1px solid var(--hair); border-radius: 6px; overflow: hidden; } .board .fill { display: block; height: 100%; background: linear-gradient(90deg, var(--tide-deep), var(--tide)); border-radius: 6px 0 0 6px; min-width: 2px; } .board .brow.lead .fill { background: linear-gradient(90deg, var(--truth), #f0c079); } .board .cnt { width: 66px; flex: none; text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--ink-soft); } .board .pct { width: 58px; flex: none; text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 600; color: var(--tide); } .board .brow.lead .pct { color: var(--truth); } /* every-block verification list */ .allblocks { columns: 240px; column-gap: 20px; margin: 12px 0; } .allblocks .ab { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-family: var(--mono); font-size: 12.5px; break-inside: avoid; border-bottom: 1px solid var(--hair); } .allblocks .ab a { color: var(--ink-soft); text-decoration: none; } .allblocks .ab a:hover { color: var(--tide); } .allblocks .ab .h { color: var(--tide-deep); } @media (max-width: 760px) { nav.top { display: none; } } @media (max-width: 720px) { .stat-grid { grid-template-columns: 1fr; } .board .who { width: 110px; } .board .cnt { display: none; } } /* ========================================================================== Tooltip (dark restyle of the existing component) ========================================================================== */ .tooltip { position: relative; display: inline-block; bottom: 0.1em; transition: 0s; font-weight: bold; color: var(--tide); } .tooltip .tooltiptext { transition-delay: 0.5s; top: -5px; left: 115%; visibility: hidden; width: 300px; background-color: var(--deep); color: var(--ink-soft); text-align: center; padding: 8px 10px; border-radius: 8px; border: solid 1px var(--hair-strong); font-weight: normal; box-shadow: var(--l-shadow); position: absolute; z-index: 1; } .tooltip .tooltiptext::after { content: " "; position: absolute; top: 20px; right: 100%; margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent var(--hair-strong) transparent transparent; } .tooltip:hover .tooltiptext { visibility: visible; } .tooltip:hover { cursor: help; }