/* Ledger finish -- the marketing pages, moved a step toward the workbench. * * theme.finish in /content.json picks one of two: * * "soft" the design the markup is authored in -- 12px and 24px corners, * and depth carried by a wide, soft blur. Nothing in this file * applies; the Tailwind utilities are the whole design. * "ledger" corners pulled in to 2px and every blur shadow traded for a * 1px hairline, which is how the logged-in Command Deck has * always drawn depth. Pairs with theme.buttons "ledger". * * /theme.js reads the value in and puts it on as data-finish * before the first paint, exactly as it does for data-buttons and data-guides. * "soft" sets no attribute, so the original design costs nothing. * * ---- why this is a stylesheet and not an edit to the markup --------------- * There are 120 `rounded-[12px]`, 85 `rounded-lg` and 81 `rounded-[24px]` on * the homepage alone, and the shadows are arbitrary Tailwind values rather * than tokens. Editing them in place would be a thousand-line diff that could * not be reverted with one word, and it would have to be redone in every new * block anyone writes. Overriding by attribute selector is one file, reads as * a design decision rather than a find-and-replace, and switches off cleanly. * * Rules here are deliberately unlayered, for the same reason buttons.css is: * Tailwind's output lives in @layer utilities, and an unlayered declaration * outranks every layered one whatever its specificity -- which is what lets * these override rounded-[24px] and shadow-[...] without a single !important. * * ---- what is deliberately left alone ------------------------------------- * `[data-stage]` is the product screenshot: a 724x322 drawing of the app * scaled into its frame. Its corners and shadows are picture, not chrome, and * flattening them would be redrawing someone's screenshot. Every rule below * is therefore paired with a `[data-stage]` rule that puts the Tailwind value * back with `revert-layer` -- which rolls an unlayered declaration back to the * layer underneath it, i.e. to exactly what the utility said. The frame the * screenshot sits in IS chrome, and is ledgerised along with everything else. * * `rounded-full` is left alone as well. Avatars, the chip pills and the logo * marks are round because they are round, not because the design is soft, and * squaring them reads as a bug rather than a decision. * * Focus rings and the brand halo are spelled `shadow-[0_0_0_...]` -- a spread * with no blur. They are feedback rather than depth and are skipped, or a * keyboard ring would vanish the moment this file loaded. */ /* ------------------------------------------------------------- corners --- */ :root[data-finish="ledger"] :is([class*="rounded-"], [class~="rounded"]):not([class*="rounded-full"]) { border-radius: 2px; } /* The screenshot's own corners, put back. */ :root[data-finish="ledger"] [data-stage] :is([class*="rounded-"], [class~="rounded"]) { border-radius: revert-layer; } /* -------------------------------------------------------------- depth ---- */ /* The blur goes. Anything that already carries a border keeps that border as its edge and simply stops floating. */ :root[data-finish="ledger"] [class*="shadow-"]:not([class*="shadow-[0_0_0_"], [class*="drop-shadow"]) { box-shadow: none; } /* Anything that had no border was relying on the shadow to have an edge at all, so it gets the hairline instead. A ring rather than a border: it sits outside the box and moves nothing. */ :root[data-finish="ledger"] [class*="shadow-"]:not([class*="shadow-[0_0_0_"], [class*="drop-shadow"], [class*="border"]) { box-shadow: 0 0 0 1px #e1e1e1; } /* The screenshot's own depth, put back. */ :root[data-finish="ledger"] [data-stage] [class*="shadow-"] { box-shadow: revert-layer; } /* ----------------------------------------------------------- captions ---- */ /* The small uppercase label is the one device both surfaces already share, so it is worth making them agree on it. The deck sets it at 10px with +0.4px of tracking; the site sets it at 12px with MINUS 0.18px, which is the site's body tracking left on by accident -- caps need letters pushed apart, not pulled together, or the label sets tighter than the prose around it. All 28 of them are chrome; the screenshots spell their labels in literal capitals rather than with this class and are not touched either way. `.uppercase` is the whole selector on purpose. Every one of these is the same device doing the same job -- a column heading over a list -- and the point of the exercise is that they stop being 28 independent decisions. */ :root[data-finish="ledger"] .uppercase { font-size: 10px; letter-spacing: 0.4px; } :root[data-finish="ledger"] [data-stage] .uppercase { font-size: revert-layer; letter-spacing: revert-layer; } /* The hero stat's eyebrow is the same device again, at a third size. Its two metrics were inline in the markup, which no stylesheet can outrank without !important; they were moved here instead, so both finishes still describe themselves in one place and ?finish=soft still restores the original. */ [data-hero-stat-eyebrow] { font-size: 11px; letter-spacing: 0.18em; } :root[data-finish="ledger"] [data-hero-stat-eyebrow] { font-size: 10px; letter-spacing: 0.4px; } /* ------------------------------------------------------------- chrome ---- */ /* The header is the last soft thing on the page: 85% white with a 6px blur behind it, so the hero illustration shows through as you scroll. A workbench chrome bar is opaque -- it is the frame, not part of the picture -- so the translucency and the blur go and the hairline underneath does the work. */ :root[data-finish="ledger"] [class*="bg-[rgba(255,255,255,0.85)]"] { background-color: #ffffff; } :root[data-finish="ledger"] [class*="backdrop-blur-"] { backdrop-filter: none; } /* ---- not done here ------------------------------------------------------ * Figures are already where Ledger wants them: the hero stat and the * supporting values app.js builds beside it are the site's only real number * displays and both already carry tabular-nums. `font-mono` is NOT a figure * marker on this site -- it is on 54 elements, most of them headings and body * copy, and --font-mono resolves to Helvetica anyway -- so putting tabular * figures on it would style prose and change no glyph that matters. */