/* * Pickle component system. * * The .ex-* vocabulary is the stable API every site and every render string in * app.js consumes. This file dresses the six app UIs: the faucet, the explorer, * the bridge, the toolkit, .pkl names and mini-blocks. The marketing page in * web/ shares the tokens and the faces but not this rhythm, because it is a * document you read once and these are tools you use weekly. * * - Flat surfaces on the #0A0A0B stage, 2px radius, one hairline. * - Every rule paints through the register properties (--pickle-text, * --pickle-line, --pickle-surface-1, --pickle-muted, --pickle-subtle, * --pickle-accent-text, --pickle-ground) rather than through literals, so a * section can redefine its own ground without duplicating a rule. * - Mono uppercase micro-labels in IBM Plex Mono against Inter Tight display * type. There is no second text family. * - The signature layout patterns: numbered eyebrow headers, 1px-gap cell * grids, hairline stat strips, waterfall bars. * - Structure only. Everything with a duration lives in shared-ui/motion.css, * which loads after this file: entrances, the scroll cascade, hover and * press. The one exception is the cadence lanes and the pulse dot, whose * motion IS the information they carry. * * Explorer-only pieces stay in explorer-ui/css/explorer.css. */ /* ============================================================ shell: nav bar */ /* * The shell host. shared-ui/shell.js replaces the contents of * `

` with the bar below, and that host needs two things * this rule gives it. * * First, it has to be the sticky box. `.ex-nav` declares `position: sticky` and * on the two apps that write their bar straight into (explorer-ui and * pns-ui) it pins correctly. In the four that mount it through shell.js it did * not, and measuring showed why: the host's height is exactly the bar's 72px, and * a sticky element cannot move within a containing block its own size. So the bar * scrolled away on the faucet, the bridge, mini-blocks and all seven toolkit * pages - where the six-section subnav is the only navigation between the tools. * Nothing about the CSS looked wrong; only scrolling the page showed it. * * Second, min-height reserves the bar's space before the script runs. An empty * header is 0px tall, so the page painted 72px too high and then dropped. * * The z-index has to live HERE, on the host, and not be left to the .ex-nav * inside it. `position: sticky` establishes a stacking context unconditionally - * unlike relative or absolute, which need a non-auto z-index first - so the * moment this host became sticky it began trapping the bar's own * --pickle-z-nav inside itself. The host then competed with page content at * z-index 0, lost on document order because

comes after

, and the * toolkit's cells painted straight over the bar at 375px. Naming the level on the * box that actually stacks is what fixes it. */ [data-pickle-shell] { display: block; position: sticky; top: 0; z-index: var(--pickle-z-nav); min-height: var(--pickle-nav-h); } .ex-nav { position: sticky; top: 0; z-index: var(--pickle-z-nav); display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--pickle-space-5); height: var(--pickle-nav-h); padding-inline: max(var(--pickle-gutter), calc((100vw - var(--pickle-content)) / 2)); /* The bar keeps its own ink register on both grounds, and that is a choice * rather than a failure to invert. Making a sticky bar track the register * underneath it needs either mix-blend-mode: difference, which distorts the * accent's hue into something that is no longer the brand colour, or a * timeline-scope naming every paper act by hand. A persistent ink running * head over paper is a legitimate editorial form and removes both. * * Redeclaring the register properties here is what makes that work: without * them the bar would inherit a paper act's #121212 text and paint near-black * on near-black. */ --pickle-text: #ffffff; --pickle-line: rgb(255 255 255 / 14%); --pickle-muted: #9aa3a0; --pickle-subtle: #6b7370; --pickle-accent-text: var(--pickle-mint); color: var(--pickle-text); /* Keyed to --pickle-bg (#0A0A0B), not to the #121212 the page used to be: at 82% * opacity a lighter ground reads as a grey band floating over black rather * than as the page's own surface. */ background: rgb(10 10 11 / 78%); backdrop-filter: blur(20px) saturate(150%); border-bottom: 1px solid var(--pickle-line); } .ex-nav > * { display: flex; align-items: center; height: var(--pickle-nav-h); } /* The running head's act readout. Mono, small, and the only thing in the bar * that changes as the reader scrolls - the section eyebrow pattern reduced to * bar height. * * `display: none` by default and shown only where there is room: the bar already * carries a brand, six links, two buttons and a burger, and the readout is the * one element that is orientation rather than navigation, so it is the one that * should go first when space runs out. */ .ex-act { display: none; gap: .5rem; margin: 0; padding-left: var(--pickle-space-5); color: var(--pickle-subtle); font-family: var(--pickle-font-mono); font-size: var(--pickle-text-2xs); letter-spacing: var(--pickle-tracking-caps); text-transform: uppercase; white-space: nowrap; border-left: 1px solid var(--pickle-line); } /* Through the register, not the raw accent. The bar pins its own ink values so * this resolves to the same green either way - but routing it through * --pickle-accent-text means there is no exception to remember, and no exception * for tests/design-language.test.mjs to have to allow. */ .ex-act .n { color: var(--pickle-accent-text); } /* Shown exactly where the link rail is hidden, and the thresholds are measured * rather than chosen. * * The bar's content column is capped at --pickle-content whatever the viewport, so * it is 1240px wide at 1440px and at 1920px alike. Brand, six links and two * buttons already fill it: measured, adding the readout pushed the action group * onto a second row at every width from 1360px up, including 1920px. Making room * would mean dropping a nav item or letting the bar span wider than the text * column it sits above - a misalignment that reads as a bug. * * So the readout appears below 1220px, where the rail is hidden and there is * real room. That is also where it earns the most: with no links on screen, * nothing else says which chapter you are in. Below 560px even the burger and * the testnet button leave no space, so it goes again. */ @media (min-width: 560px) and (max-width: 1219px) { .ex-act { display: flex; } } /* A single row, always: brand, links and actions share one 72px bar. The * subnav used to be forced onto a second row with `flex: 1 0 100%`, which put * the logo above the buttons. It now sits inline and scrolls sideways when it * runs out of width. */ /* One row where the contents fit, two where they wrap, and the background * follows either way. This was pinned at a flat 72px while `.ex-nav > *` gave * each row that same 72px, so on a phone the subnav row painted 72px BELOW the * bar's box - outside its background and its border, over the scrolling page, * on transparent ground. `overflow: visible` meant nothing clipped and nothing * looked wrong in the stylesheet. */ .ex-nav.stack { height: auto; min-height: var(--pickle-nav-h); } .ex-brand { gap: 10px; flex: 0 1 auto; min-width: 0; overflow: hidden; color: var(--pickle-text); font-family: var(--pickle-font-display); font-size: 1.16rem; font-weight: 600; letter-spacing: var(--pickle-tracking-tight); white-space: nowrap; } .ex-brand:hover { color: var(--pickle-text); } .ex-brand img { width: 30px; height: 36px; object-fit: contain; flex: 0 0 auto; } .ex-brand span { min-width: 0; overflow: hidden; color: var(--pickle-subtle); font-family: var(--pickle-font-mono); font-size: var(--pickle-text-2xs); font-weight: 400; letter-spacing: .13em; text-transform: uppercase; text-overflow: ellipsis; } /* Link rails scroll sideways rather than wrapping, so the bar keeps its * declared height on every viewport. */ .ex-links, .ex-subnav { display: flex; align-items: center; gap: var(--pickle-space-2); min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; } .ex-links::-webkit-scrollbar, .ex-subnav::-webkit-scrollbar { height: 0; } .ex-links { flex: 1 1 auto; } .ex-subnav { flex: 1 1 auto; height: var(--pickle-nav-h); } /* A stacked bar is brand, subnav, sign-in, in that order, so the sign-in ends * the row on the right as it does in every other app. Where the three stop * fitting, the subnav takes a full row of its own under the other two rather * than letting the sign-in drop to a third row after it; 900px is where the * toolkit's six links already wrapped. */ @media (max-width: 899px) { .ex-nav.stack .ex-subnav { order: 1; flex-basis: 100%; } } /* Every interactive target in a bar stays 44px in both directions. */ .ex-nav a, .ex-nav button, .ex-tabs button { display: inline-flex; align-items: center; justify-content: center; min-width: var(--pickle-tap); min-height: var(--pickle-tap); } .ex-links a, .ex-subnav a { flex: 0 0 auto; padding-inline: var(--pickle-space-4); border: 1px solid transparent; border-radius: var(--pickle-radius); color: var(--pickle-muted); font-size: var(--pickle-text-base); font-weight: 500; white-space: nowrap; transition: color var(--pickle-fast) var(--pickle-ease), background var(--pickle-fast) var(--pickle-ease); } /* No filled plate on hover. With the underline mark below doing the work, a * background as well is two signals for one state, and it is the one that made * the bar look like a row of buttons. */ .ex-links a:hover, .ex-subnav a:hover { color: var(--pickle-text); } /* The active link is marked UNDER the word rather than boxed around it. * * The hairline chip this replaced put a rounded border around one item in a row * of plain words, which read as a button among links and made the bar look like * a toolbar. A 2px rule under the label is the same information with none of * that: it belongs to the word, it lines up across the whole rail, and it is the * mark the section eyebrows already use elsewhere on the page. * * The rule is a pseudo-element rather than a border-bottom so it can be inset * from the link's padding and sit under the text instead of under the hit area, * which at 44px tall is a long way below the word. */ .ex-links a.on, .ex-subnav a.on { color: var(--pickle-text); border-color: transparent; background: transparent; } .ex-links a, .ex-subnav a { position: relative; } .ex-links a.on::after, .ex-subnav a.on::after { content: ""; position: absolute; left: var(--pickle-space-4); right: var(--pickle-space-4); bottom: calc(50% - .95em); height: 2px; background: var(--pickle-mint); } /* Hover gets the same mark, faint, so the rail tells you where a click lands * before you make it. */ .ex-links a:not(.on)::after, .ex-subnav a:not(.on)::after { content: ""; position: absolute; left: var(--pickle-space-4); right: var(--pickle-space-4); bottom: calc(50% - .95em); height: 2px; background: var(--pickle-line); transform: scaleX(0); transform-origin: center; transition: transform var(--pickle-base) var(--pickle-ease); } .ex-links a:not(.on):hover::after, .ex-subnav a:not(.on):hover::after { transform: scaleX(1); } .ex-net { gap: 8px; flex: 0 0 auto; padding-inline: var(--pickle-space-3); color: var(--pickle-muted); font-family: var(--pickle-font-mono); font-size: var(--pickle-text-2xs); letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; } .ex-net b { color: var(--pickle-accent-text); font-weight: 500; } .ex-net::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pickle-mint); animation: pickle-pulse 2.2s infinite; } .ex-wallet { position: relative; gap: var(--pickle-space-3); flex: 0 0 auto; margin-left: auto; } /* Ghost nav action (Docs). */ .ex-navghost { height: 42px; padding-inline: 20px; color: var(--pickle-accent-text); font-size: var(--pickle-text-base); font-weight: 500; border: 1px solid var(--pickle-mint-line); border-radius: var(--pickle-radius); } .ex-navghost:hover { color: var(--pickle-mint-hi); border-color: var(--pickle-mint); background: var(--pickle-mint-soft); } /* A promise the product cannot keep yet, shipped as a disabled span rather * than a dead : it is not a link, so it must not look or behave like one. */ .ex-soon { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding-inline: 22px; color: var(--pickle-subtle); font-size: var(--pickle-text-base); font-weight: 600; white-space: nowrap; cursor: not-allowed; background: rgb(255 255 255 / 4%); border: 1px solid rgb(255 255 255 / 12%); border-radius: var(--pickle-radius); } .ex-soon b { padding: 2px 7px; color: var(--pickle-faint); font-family: var(--pickle-font-mono); font-size: .58rem; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; border: 1px solid rgb(255 255 255 / 12%); border-radius: var(--pickle-radius); } /* Burger + full-screen menu, shown only where the link rail does not fit. * * `.ex-nav .ex-burger`, not `.ex-burger`: the `.ex-nav button` tap-target rule * above says `display: inline-flex` at 0,1,1, which quietly beat this rule's * 0,1,0 - so the burger showed on desktop next to the full link rail, on all * seven UIs, at every width. The extra ancestor takes both of this pair to * 0,2,0 and the breakpoint decides again. */ .ex-nav .ex-burger { display: none; width: 42px; height: 42px; place-items: center; color: var(--pickle-text); cursor: pointer; background: none; border: 1px solid rgb(255 255 255 / 16%); border-radius: var(--pickle-radius); } .ex-mobmenu { position: fixed; inset: var(--pickle-nav-h) 0 0; z-index: var(--pickle-z-menu); display: flex; flex-direction: column; gap: 6px; padding: 28px var(--pickle-gutter); overflow-y: auto; background: rgb(20 22 21 / 97%); backdrop-filter: blur(18px); } .ex-mobmenu[hidden] { display: none; } .ex-mobmenu a { padding: 15px 0; color: var(--pickle-text); font-family: var(--pickle-font-display); font-size: 1.5rem; font-weight: 600; border-bottom: 1px solid var(--pickle-line); } .ex-mobmenu a.accent { color: var(--pickle-accent-text); border-bottom: 0; } /* Scroll progress: a 2px brand line driven purely by CSS scroll timelines. * scaleX(0) is the base state, so browsers without animation-timeline simply * never show it. Injected by shell.js - decoration, not content. */ .ex-progress { position: fixed; top: 0; left: 0; right: 0; z-index: var(--pickle-z-progress); height: 2px; background: var(--pickle-mint); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; animation: pickle-progress linear; animation-timeline: scroll(root block); } @keyframes pickle-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* ================================================================ shell: page */ /* App pages: the same editorial rhythm as the marketing page, one step down. * They were opening 56px below the bar, which read as cramped next to the * 132px hero on the home page. */ .ex-wrap { width: min(100%, var(--pickle-content)); margin-inline: auto; padding: var(--pickle-section-sm) var(--pickle-gutter) var(--pickle-section); } .ex-wrap.app { width: min(100%, var(--pickle-content-app)); } /* ============================================================== page headings * The numbered eyebrow is the signature section header: a 26px dash, a dim * index, and a green mono label. Sites write: *

01Faucet

markup. * * .ex-dl is `

` and puts the hairline on the

. * A