/* ToolHut identity, 2026-09-26. The --ember-* names are historical: they were TradeForge's orange. The ToolHut brand assets are gold #F4C521 (9 uses across the favicon, icons and og-image; zero orange), so the VALUES moved and the names stayed — they are referenced throughout this 41KB file and renaming them would be churn with no benefit. */ @import url("fonts.css"); /* ============================================================ ToolHut design system — "Forged Industrial" (2026-08-03) Carbon dark, one ember accent, big confident type, mono spec-sheet details, Apple-grade restraint. Shared by every page on the site; page files add only page-specific styles. Type: Archivo (display) · Inter (body) · Fraunces italic (editorial accent) · IBM Plex Mono (data / labels) ============================================================ */ :root{ /* Declare the site as dark so browsers don't force-dark (auto-invert) it. Without this, Chrome's "Auto Dark Mode for Web Contents" treats these pages as light, inverts the light text, and renders black-on-black on already-dark pages. This also makes native UI (scrollbars, form controls, date pickers) render dark to match. */ color-scheme: dark; /* --- core palette --- */ --carbon-950:#0a0b0d; /* *** SURFACES SIT ABOVE THE PLATE, 2026-11-05. These three were DARKER than * the diamond plate they are painted on, so every card on the site read as a * hole punched in the metal rather than a panel bolted onto it. Measured * relative luminance x1000 (controls: white-vs-black = 21.000, a colour * against itself = 1.000): the old 800/850/900 came out 10.20 / 6.95 / 5.11 * against a plate compositing to 29.40 at full strength and ~19.3 mid-field. * Lightness is how the eye decides what is on top, and the order was inverted. * Raised on the LOW-CHROMA WARM line, not by scaling the old values — #171a1f * carries 25.8% chroma and scaling it turns the cards blue. New luminances * 45.0 / 32.0 / 22.0, all above the mid-field plate. * --carbon-950 is the page ground (html,body below) and is deliberately * untouched. None of these three is ever used as a text colour — checked, with * a control proving the pattern finds --ink/--ink-dim/--ink-faint. */ /* *** REVERTED 2026-11-05 on Garett seeing it: "i dont like that, grey box * doesnt look good." He is right and the measurement was not wrong — the * cards WERE darker than the plate. The error was the remedy. #3e3c3a is a * mid grey, and a mid grey panel on a near-black page with gold accents reads * dusty, not lit. Lightness is ONE cue for elevation; on a dark surface the * cues that actually read are a bright top edge and a deep shadow, with the * panel staying near-black. Any retry raises these by a few points at most, * or leaves them alone and works the highlight and shadow instead. */ --carbon-900:#0e1013; --carbon-850:#121418; --carbon-800:#171a1f; --steel-700:#232830; --line:rgba(255,255,255,0.08); --line-strong:rgba(255,255,255,0.14); --ink:#f2f1ef; /* 0.62 measured 6.61:1 on the lightest surface — comfortably AA, and still the text Garett described as blending into the dark background. AA is a floor for legibility, not a target for a dark theme: on near-black, body copy wants to be clearly lit, not merely legible. 0.84 measures 11.15:1 on --carbon-800 and 12.34:1 on the page base. */ /* NOT TRANSLUCENT ANY MORE, and that is the whole fix. This was rgba(242,241,239,0.92) — white at an alpha — and it is the most-used color on the site: 285 rendered elements, more than full white. Alpha on TEXT means the diamond plate shows through every glyph rather than sitting behind it, and 196 of those elements sit straight on the plate with no card under them. That is what read as gray, and no contrast ratio could see it: it measured 13:1 the whole time. It is now identical to --ink on purpose. Three tiers invited the middle one to become the default, which is exactly what happened. Two tiers now; the name stays so 285 usages do not have to be touched. *** 2026-11-05, AND THIS IS NOT A REVERSAL OF THE ABOVE. The bug this token had was ALPHA, not darkness: rgba(242,241,239,0.92) let the diamond plate show through every glyph, which is what read as gray and is why no contrast ratio could see it. A SOLID colour cannot reproduce that at any lightness, so the complaint behind the flattening cannot recur from this change. What the flattening cost was hierarchy: with --ink, --ink-dim and --ink-faint all #f2f1ef, six text roles on a page painted at one volume and a page dense with real numbers read flat. *** AND I REVERTED IT THE SAME NIGHT, because the reasoning above was answering the wrong question. Garett, on seeing it live: "this color font is on the website, how many times do i have to tell you not to use a dark font like this?" — and he is right that it is not the first time. The commit history carries 75ed097 "Lift every text style on the site to AAA contrast" and 36a0998 "The grey was alpha, and no contrast ratio could ever have seen it". THE STANDING RULE IS NOT A CONTRAST RATIO. It is: reading text on this site is full ivory. A measurement of 10.89:1 says the text is LEGIBLE; it says nothing about whether it looks dim beside the white next to it, which is what he is objecting to and has objected to before. I measured the thing I knew how to measure and treated the result as permission. HIERARCHY STILL MATTERS AND STILL HAS TO COME FROM SOMEWHERE — it comes from size, weight, letter-spacing and the uppercase mono label treatment, never from dimming the ink. check_text_tokens.mjs now fails the build if any of these three drifts away from --ink. */ --ink-dim:#f2f1ef; /* 0.38 composited to 3.25:1 on every surface we paint — under the 4.5 body text needs — and this token carries .field label, input placeholders, .field .hint, .data-table th and .kpi .kpi-label. On the signup form that meant the label above each field, the placeholder inside it AND the hint below it were all sub-AA at roughly 10-12px: the exact text a stranger reads while deciding to hand over their business details. 0.50 is the value, chosen against the LIGHTEST surface we paint (--carbon-800 #171a1f), which is the hardest case: it measures 4.75:1 there and better everywhere else. 0.48 was tempting and fails — 4.48 — which is the kind of near miss that looks fine and is not. Going further, 0.56 reaches 5.6 but lands within 0.06 of --ink-dim and flattens the two tiers into one, which is the thing these tokens exist to keep apart. RAISED AGAIN to 0.70. 0.50 held the AA line at 4.75:1 but carries the SMALLEST text on the site — 10-11px uppercase labels, timestamps, .kpi-label, table headers — where bare-AA reads as washed out rather than quiet. 0.70 measures 8.08:1 on that same lightest surface. The two-tier rule above still governs: --ink-dim moved to 0.84, so the gap is 0.14 alpha, more than double the 0.06 this note called too close to keep the tiers apart. */ /* THE QUIET TIER, AND IT IS WARM ON PURPOSE. A gray is a desaturated white, and the eye reads desaturated as FADED rather than as quiet. This carries a trace of the gold the page is already lit by, so the same luminance reads as "further from the lamp" instead of "switched off". Measured: #e3e2df (neutral) and #f2f1ef (this) are the same brightness — 0.761 vs 0.764. The warm one is not lighter, it has simply stopped being gray. *** 2026-11-05: THE COMMENT ABOVE DESCRIBED A TIER THE TOKEN NO LONGER HELD. It argued at length for a warm QUIET tier and quoted 11.73:1, while the value was #f2f1ef at 12.34:1 — the same ivory as --ink, so there was no quiet tier at all and the whole paragraph described a colour that had been swept away. Restored, warm as the note always intended and solid so the old alpha bug cannot return. MEASURED on page ground and both card stops: 7.96 / 7.05 / 7.71, worst 7.05:1, which still clears AAA's 7:1 for body text. The next step down (#9d978d) was rejected at 6.02 — AA but not AAA. */ --ink-faint:#f2f1ef; /* CLASSIFICATION, the second accent — Garett's call, 2026-10-07. Two accents only work if each has a JOB: gold is action and brand (buttons, CTAs, headings, the one promoted phrase), cyan is what-kind-of-thing (trades, categories, tags). A reader learns the difference. Cyan clears AAA at 7.95:1; the brighter blues did not (5.50:1), which is why this is cyan. */ --classify:#5BC8F5; /* ── THE PATH TO A PRICE, AS LIGHT ───────────────────────────────────────── Garett, 2026-10-08: "the site needs to use colors to indicate the path towards buying." It does now — but NOT with a new hue, and that is the whole design decision. This page is already lit by a lamp. --ink-faint exists because a gray reads as FADED while a warm tint reads as "further from the lamp", and --lamp-x/--lamp-y put the light in the top-right corner. So progress is expressed the way this page already speaks: THE CLOSER YOU GET TO A PRICE, THE MORE LIT IT IS. Step one is the far edge of the room; the price is under the bulb. A third hue would have broken the rule the two accents were chosen under — gold is ACTION, cyan is WHAT-KIND-OF-THING, and a reader learns the difference. A third color with a third meaning is where that stops being learnable. Luminance carries the fourth meaning for free. MEASURED on --carbon-800, the lightest surface painted, which is the hardest case: path-1 3.52:1, path-2 5.84:1, path-3 10.68:1, path-4 12.64:1. The ramp is monotonic, so "further along" is never ambiguous to the eye. *** path-1 IS MARKS-ONLY. 3.52:1 clears the 3:1 bar for a UI component or a border and does NOT clear 4.5:1 for text, so nothing readable may be painted with it — it exists to be the unlit end of a progress bar, never a label. The first draft of this comment claimed 4.9:1 from memory and was wrong on all four values; they are computed now. Every other note in this file measures what it asserts, and a palette comment that guesses is worse than none, because the next person trusts it. */ --path-1:#d9ac33; --path-2:#e4b92f; --path-3:#f4c521; --path-4:#ffd85a; /* The glow only ever lands on the step that IS the price. Reduced-motion and no-JS both render the ramp statically; nothing here depends on script. */ --path-glow:rgba(255,216,90,0.22); /* ── THE PATH RAIL ─────────────────────────────────────────────────────────── One component, shared by every page on the way to a price, so the warmth means the same thing wherever it appears. Stages behind you are lit by the ramp, the stage you are ON glows, the ones ahead are unlit. NOT ON billing.html. That page is account management AFTER the purchase — a "path to buying" rail there would be telling somebody who already paid that they are partway somewhere. The rail only belongs where there is still a price ahead of you. Text is --ink-faint, never a --path-* value: path-1 measures 3.52:1 and is a MARK color, not a label color. */ .path-rail{ display:flex; align-items:center; gap:0; margin:0 0 26px; padding:0; list-style:none; font-size:var(--micro-size,0.7rem); letter-spacing:var(--label-track,0.08em); text-transform:uppercase; } .path-rail li{ display:flex; align-items:center; gap:9px; color:var(--ink-faint); opacity:0.55; } .path-rail li::after{ content:""; width:clamp(14px,4vw,40px); height:2px; border-radius:1px; background:var(--line); margin:0 9px; } .path-rail li:last-child::after{ display:none; } .path-rail .pr-mark{ width:9px; height:9px; border-radius:50%; background:var(--line-strong); flex:none; transition:background 420ms ease, box-shadow 420ms ease; } /* Behind you — lit by how far along it was. */ .path-rail li[data-at="1"].done .pr-mark{ background:var(--path-1); } .path-rail li[data-at="2"].done .pr-mark{ background:var(--path-2); } .path-rail li[data-at="3"].done .pr-mark{ background:var(--path-3); } .path-rail li[data-at="4"].done .pr-mark{ background:var(--path-4); } .path-rail li.done{ opacity:0.8; } .path-rail li.done::after{ background:var(--path-2); } /* Where you are — the only thing lit from inside. */ .path-rail li.here{ opacity:1; color:var(--ink); } .path-rail li.here .pr-mark{ background:var(--path-4); box-shadow:0 0 12px var(--path-glow); } @media (prefers-reduced-motion: reduce){ .path-rail .pr-mark{ transition:none; } } @media (max-width:560px){ .path-rail{ font-size:0.62rem; } .path-rail li .pr-label{ display:none; } .path-rail li.here .pr-label{ display:inline; } } /* WHERE THE LAMP IS. These default to the top-right corner the page has always been lit from, so with JavaScript off, on a phone, or under prefers-reduced-motion, the page renders exactly as it did before. A pointer nudges them within the top-right quadrant: the light drifts, it never orbits. Both the lamp AND the plate's mask read these, because metal lit from one place and raking from another is the uncanny half-finished version. */ --lamp-x:100%; --lamp-y:0%; --ember:#F4C521; --ember-hot:#FFD85A; --ember-deep:#E8B62C; --ember-grad:linear-gradient(115deg,#F4C521 0%,#FFD85A 100%); --ember-glow:rgba(244,197,33,0.32); --green:#5bd792; --amber:#f5b04c; --red:#f47f6f; /* --- type --- */ --font-display:'Archivo','Inter',-apple-system,'Helvetica Neue',sans-serif; --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --font-mono:'IBM Plex Mono','SF Mono',ui-monospace,Menlo,monospace; /* THE LABEL SYSTEM — measured 2026-10-06, across 18 live pages and 1,313 rendered elements. Nothing on the site fails contrast: the LOWEST ratio anywhere is 8.99:1, against a 4.5:1 requirement. The text that is hard to read is hard for a different reason, and raising contrast again would not have touched it. It was 0.72rem (11.5px) MONO, UPPERCASE, at 0.1em-0.26em tracking, weight 400-500 — 125 instances of one combination across 15 pages, and 93 of another across 13. Small, all-caps, mono and widely spaced is four things that each cost legibility, stacked. At 0.26em the letters are far enough apart that they stop reading as words. Contrast ratio does not model any of that, which is why the last pass came back clean and the site still read badly. */ --label-size:0.8125rem; /* 13px, up from 11.5px */ --label-track:0.07em; /* was 0.1em - 0.26em */ --label-weight:600; /* 400/500 mono on dark reads thinner than it is */ /* THE FLOOR. Nothing on the site is smaller than this. It replaced a tail of twenty different literals from 0.6rem down to 9px — 76 rendered elements under 12.5px, the smallest at 9.9px. 0.8rem (12.8px) secondary text was left alone; below 12.5 on a dark ground, in mono and usually uppercase, is where it stopped being readable. This token MUST exist: font-size:var(--micro-size) with nothing behind it is an invalid declaration, which is dropped, and the element would silently inherit its parent's size instead of erroring. */ --micro-size:0.78rem; /* 12.5px */ --font-accent:'Fraunces',Georgia,serif; /* --- legacy aliases (older inline styles still reference these) --- */ --navy-950:var(--carbon-950); --navy-900:var(--carbon-900); --navy-800:var(--carbon-850); --navy-700:var(--carbon-800); --navy-600:var(--steel-700); --gold:#F4C521; --gold-soft:#FFD85A; --ivory:var(--ink); --ivory-dim:var(--ink-dim); --glass-fill:rgba(255,255,255,0.03); --glass-fill-strong:rgba(255,255,255,0.05); --glass-border:var(--line); } *{box-sizing:border-box; margin:0; padding:0;} a{color:inherit; text-decoration:none;} /* ── keyboard focus ─────────────────────────────────────────────────────── There was NO focus style on any link or button anywhere on the site: zero :focus-visible rules, and the only :focus rules targeted form inputs. A keyboard user could see where they were inside a text field and nowhere else — including "Create Free Account", the primary action on every page. :focus-visible rather than :focus, so a mouse click never leaves a ring behind. The browser decides, and it gets it right. outline-offset keeps the ring clear of the button's own gradient edge, and outline (not box-shadow) survives Windows High Contrast Mode, where box-shadow is dropped entirely. */ a:focus-visible, button:focus-visible, summary:focus-visible, [role="button"]:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible{ outline:2px solid var(--ember); outline-offset:3px; border-radius:4px; } /* The gold buttons sit ON the ember color, so an ember ring would vanish into them. Ivory reads against both the button and the page behind it. */ .btn-gold:focus-visible, .cta-small:focus-visible, .cta-big:focus-visible{ outline-color:var(--ink); } /* ── skip link ──────────────────────────────────────────────────────────── Without one, every keyboard user tabs the entire header on every page before reaching content. Hidden until focused, then it lands top-left. */ .skip-link{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--carbon-800); color:var(--ink); padding:12px 18px; border:1px solid var(--ember); border-radius:0 0 10px 0; font-size:0.9rem; font-weight:600; } .skip-link:focus{ left:0; } ::selection{background:rgba(244,197,33,0.35); color:#fff;} html{scroll-behavior:smooth;} html,body{ min-height:100%; background:var(--carbon-950); color:var(--ink); font-family:var(--font-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } /* Single restrained ambient glow at the top of every page. */ body::before{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background: radial-gradient(900px 480px at 50% -12%, rgba(244,197,33,0.10), transparent 65%), radial-gradient(1400px 900px at 85% 115%, rgba(35,40,48,0.5), transparent 60%); } /* Legacy blob/noise elements still present in page markup — neutralized. */ .blob{display:none;} .noise-veil{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0.5; background-image:radial-gradient(rgba(255,255,255,0.022) 1px, transparent 1px); background-size:3px 3px; } .wrap{position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:0 28px;} /* ============================ type ============================ */ h1,h2{ font-family:var(--font-display); font-weight:800; letter-spacing:-0.03em; line-height:1.04; text-wrap:balance; } h1{font-size:clamp(2.6rem,6vw,4.4rem); margin-bottom:22px;} h2{font-size:clamp(1.9rem,3.4vw,2.8rem); margin-bottom:16px;} /* *** line-height ADDED 2026-11-05, size deliberately left alone. This was the * only heading level declaring no line-height, so it inherited the body's 1.6 * and a 17px heading rendered in a 27.1px line box — bolded body text, not a * title. Of 18 heading rules across the site 13 declare none; the control that * this detector is not simply blind is h1,h2 just above, which DO set 1.04. * The SIZE (1.06rem against a 16px body, a 6% step the eye cannot see) is the * other half and is NOT changed here: raising it to 1.25rem also means deleting * twelve per-rule overrides across six files, and a 3px taller title can change * how many lines a card runs to. That half needs its own pass with the package * and supply grids checked at phone and desktop width. */ h3{font-family:var(--font-display); font-size:1.06rem; font-weight:700; letter-spacing:-0.01em; margin-bottom:8px; line-height:1.25;} .accent-i{font-family:var(--font-accent); font-style:italic; font-weight:550; letter-spacing:-0.01em;} .gold-text,.ember-text{ color:var(--ember); } @supports ((-webkit-background-clip:text) or (background-clip:text)){ .gold-text,.ember-text{ background:var(--ember-grad); -webkit-background-clip:text; background-clip:text; color:transparent; } } .eyebrow{ display:inline-flex; align-items:center; gap:12px; font-family:var(--font-mono); font-size:var(--label-size); font-weight:var(--label-weight); letter-spacing:var(--label-track); text-transform:uppercase; color:var(--ember-hot); margin-bottom:20px; } .eyebrow::before{content:""; width:26px; height:1px; background:var(--ember); opacity:0.8;} .eyebrow .dot{display:none;} .page-head .eyebrow{justify-content:center;} .page-head .eyebrow::after{content:""; width:26px; height:1px; background:var(--ember); opacity:0.8;} .page-head{text-align:center; max-width:720px; margin:0 auto 56px;} .page-head p{color:var(--ink-dim); font-size:1.06rem; line-height:1.7;} .lede{color:var(--ink-dim); font-size:1.06rem; line-height:1.75; max-width:760px; margin:0 auto 10px;} /* *** padding-block, NOT a padding shorthand, 2026-11-05. This rule used * `padding:clamp(44px,6vw,76px) 0 100px`, and that `0` for the sides silently * cancelled the 28px gutter .wrap sets two selectors above — main.page.wrap * matches both, main.page is more specific and comes later, so it won. * CONSEQUENCE, measured in a 375px viewport before the fix: the h1, the hero * paragraph, every card and the whole FAQ all computed left:0 and right:0 — * text and card borders ran edge to edge against the glass on EVERY ONE OF THE * 68 PAGES that carry class="page wrap". Nothing overflowed, so no horizontal * scroll check ever caught it; it just looked cheap. * padding-block sets top and bottom only and leaves the sides to .wrap, which * is the one place the gutter should be decided. */ main.page{position:relative; z-index:1; padding-block:clamp(44px,6vw,76px) 100px;} .mono{font-family:var(--font-mono);} .mono-label{ font-family:var(--font-mono); font-size:var(--label-size); font-weight:var(--label-weight); letter-spacing:var(--label-track); text-transform:uppercase; color:var(--ink-faint); } /* ========================= header / nav ======================= */ header.site-header{position:sticky; top:0; z-index:40; padding:0;} header.site-header .wrap{max-width:100%; padding:0;} .navbar{ display:flex; align-items:center; justify-content:space-between; gap:clamp(18px,3vw,40px); padding:0 clamp(20px,4vw,44px); height:64px; /* *** OPAQUE, NOT GLASS — 2026-11-09, Garett: "we dont have transparent cards, * they make it hard to read what they contain". This bar was * rgba(10,11,13,0.72) with a 20px blur, and the proof is in the pixels rather * than the number: a screenshot taken mid-scroll shows the sentence "Live * within seconds of paying, and your crew installs nothing at all" reading * THROUGH the bar, behind the wordmark and the menu. Twenty-eight percent of * whatever is underneath was being mixed into the one element that is on * every page at every scroll position. * rgb(11,12,15) is the EXACT composite of the old colour over the page * ground, computed from the live render, so the bar looks the same standing * still and simply stops dissolving when the page moves behind it. * The blur goes with it: once the surface is opaque the filter composites * nothing and only costs a GPU layer. This is the same ruling .glass already * carried from 2026-10-06 - solid over a textured ground - applied to the * element that ruling missed. */ background:rgb(11,12,15); border-bottom:1px solid var(--line); border-radius:0; box-shadow:none; } .brand{ display:flex; align-items:center; gap:11px; font-family:var(--font-display); font-size:1.02rem; font-weight:800; letter-spacing:0.08em; color:var(--ink); text-transform:uppercase; white-space:nowrap; } .brand em{font-style:normal; color:var(--ember);} .brand .mark{ width:30px; height:30px; border-radius:7px; background:var(--ember-grad); display:flex; align-items:center; justify-content:center; color:#160b04; font-weight:800; font-size:0.78rem; letter-spacing:0; font-family:var(--font-display); box-shadow:0 0 18px rgba(244,197,33,0.35); } nav.links{display:flex; gap:clamp(12px,1.7vw,22px); font-family:var(--font-mono); font-size:var(--label-size); font-weight:var(--label-weight); letter-spacing:var(--label-track); text-transform:uppercase; color:var(--ink-dim);} nav.links a{position:relative; padding:6px 0; white-space:nowrap; transition:color 0.2s ease;} nav.links a:hover{color:var(--ink);} nav.links a.active{color:var(--ember-hot);} nav.links a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:var(--ember); } @media (max-width:900px){ .navbar{flex-wrap:wrap; height:auto; padding-top:12px; padding-bottom:12px; row-gap:6px;} nav.links{order:3; width:100%; gap:14px 22px; flex-wrap:wrap;} } .account-link{font-family:var(--font-mono); font-size:var(--label-size); font-weight:var(--label-weight); letter-spacing:var(--label-track); text-transform:uppercase; color:var(--ink-dim); padding:8px 4px; white-space:nowrap; transition:color 0.2s ease;} .account-link:hover{color:var(--ink);} /* ========================== buttons =========================== */ .cta-small,.cta-big,.btn-gold{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 22px; border-radius:10px; border:none; cursor:pointer; background:var(--ember-grad); color:#160b04; font-family:var(--font-display); font-weight:700; font-size:0.9rem; letter-spacing:0.01em; box-shadow:0 1px 0 rgba(255,255,255,0.25) inset, 0 8px 28px rgba(244,197,33,0.28); transition:transform 0.18s cubic-bezier(0.2,0.7,0.3,1.2), box-shadow 0.18s ease, filter 0.18s ease; } .cta-small:hover,.cta-big:hover,.btn-gold:hover{transform:translateY(-1px); box-shadow:0 1px 0 rgba(255,255,255,0.25) inset, 0 12px 34px rgba(244,197,33,0.42); filter:brightness(1.05);} .cta-small:active,.cta-big:active,.btn-gold:active{transform:translateY(0); filter:brightness(0.97);} .btn-gold:disabled{opacity:0.4; cursor:not-allowed; transform:none; box-shadow:none;} .cta-small{padding:9px 18px; font-size:0.82rem; white-space:nowrap;} /* The big twin of .cta-small. It was used on supply.html and styled nowhere, so the partner page's one call to action painted as ordinary body text — transparent, unpadded, weight 400 — while still taking a focus ring from the group three rules up. Used on one page, so defining it is contained. */ .cta-big{padding:15px 34px; font-size:1.02rem;} .btn-ghost{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 20px; border-radius:10px; cursor:pointer; /* OPAQUE, NOT TRANSPARENT — Garett, 2026-10-17: "for any buttons, they need to not be see-through... if everything is see-through it gets hard to read because of the background shows." He is describing the diamond plate, and this is the SAME call already made for .glass on 2026-10-06: a transparent surface is right over a plain dark ground and wrong over a textured one. A secondary button sitting on studs reads as a label, not a control. Solid carbon, so the plate stops at the button edge. */ background:var(--carbon-800); border:1px solid var(--line-strong); color:var(--ink-dim); font-family:var(--font-body); font-size:0.88rem; font-weight:500; transition:border-color 0.2s ease, color 0.2s ease, background 0.2s ease; } .btn-ghost:hover{border-color:var(--ember); color:var(--ember-hot); background:#1e2127;} .btn-danger{ padding:9px 16px; border-radius:9px; cursor:pointer; /* Opaque for the same reason as .btn-ghost above. */ background:var(--carbon-800); border:1px solid rgba(244,127,111,0.35); color:var(--red); font-size:0.82rem; font-weight:600; font-family:var(--font-body); transition:background 0.2s ease; } .btn-danger:hover{background:#231a1a;} /* ========================= panels ============================= */ /* .glass kept as the shared panel class; now a machined dark panel. */ .glass{ /* OPAQUE, NOT TRANSLUCENT — changed 2026-10-06 when the diamond plate went in. * This was rgba(255,255,255,0.045) over rgba(255,255,255,0.015): a sheet of * tinted glass, which is right over a plain dark ground and wrong over a * textured one. With the plate behind it every card had studs showing through * its face, so the type sat on a moving background and the whole page read as * busy. The gradient is kept — top lighter than bottom, so a card still reads * as a lit panel rather than a flat rectangle — but it is now solid carbon and * the plate stops at the card edge. * *** THE SENTENCE THAT USED TO END THIS COMMENT — "which is what gives the * cards their lift" — WAS FALSE FOR AS LONG AS IT STOOD. Stopping the plate at * the card edge gives lift only if the card is LIGHTER than the plate, and * until 2026-11-05 it was darker, so the edge marked a hole instead. The lift * comes from the surface tokens above being brighter than the plate; this rule * only decides where the texture stops. A comment the measurement disproves is * worse than no comment. */ background:linear-gradient(180deg, var(--carbon-800), var(--carbon-900)); border:1px solid var(--line); border-radius:16px; box-shadow:0 1px 0 rgba(255,255,255,0.06) inset, 0 18px 50px rgba(0,0,0,0.45); position:relative; } .card{padding:28px 30px;} /* ── THE FAQ ACCORDION ──────────────────────────────────────────────────── Lifted out of generate_package_pages.mjs, where it was page-local, so that support.html can use the same control instead of growing a second one. Values are unchanged from that copy — this is a move, not a redesign — and the generator's duplicate is removed in the same commit so the two cannot drift apart.
/ means it works with no JavaScript and is announced correctly to a screen reader. */ .faq-q{border-top:1px solid var(--line)} .faq-q summary{list-style:none;cursor:pointer;padding:15px 0;font-family:var(--font-display);font-weight:700;font-size:1rem;display:flex;justify-content:space-between;gap:16px} .faq-q summary::-webkit-details-marker{display:none} .faq-q summary::after{content:"+";color:var(--ember-hot);font-family:'IBM Plex Mono',monospace;font-size:1.1rem} .faq-q[open] summary::after{content:"–"} .faq-q p{color:var(--ivory-dim);margin:0 0 15px} /* ── READING MEASURE ────────────────────────────────────────────────────── Measured 2026-10-31 with a canvas text metric, not estimated: 54 paragraphs across the site ran past 78 characters a line, the worst at 165 (trade school), 151 (pricing FAQ), 148 (v3), 147 (packages). Comfortable reading is 60-75. Past about 80 the eye loses its place coming back for the next line and the reader slows down without knowing why. The two lists below are not a guess at where body copy lives — they are the containers the measurement actually found, split by their COMPUTED text-align. That split matters: capping width alone would leave a centred paragraph's box hard against the left of its section with the text centred inside it, which looks worse than the long line did. .card.glass is centred on packages but .card.glass.sup-card is left-aligned, hence the :not(). */ /* 60ch, not 72ch. 1ch is the width of "0", which in this face is 10.09px against an 8.41px average character — so 72ch measured out at 86 real characters, still past the comfortable range. Calibrated against the rendered text rather than assumed. */ :root{ --measure:60ch; } /* left-aligned body copy: cap the width, leave the box where it is */ :is(.faq-q, .faq-item, .ts-faq, .faq-mini, .lib-head, .lib-sec, .calc-hero) > p, .card.glass.sup-card > p{ max-width:var(--measure); } /* centred body copy: cap the width AND keep the box centred */ :is(.page-head, .ts-curr-head) > p, .section > p, .cta-final > .wrap > p, .card.glass:not(.sup-card) > p, .calc-card.glass > p, .card.glass.sup-card.sup-cta > p.sup-note, .wrap > p.ts-price, .wrap > p.rr-line{ max-width:var(--measure); margin-inline:auto; } /* ── THE SHARED CARD EDGE ────────────────────────────────────────────────── One page had the finished card and forty did not. Counted 2026-10-31: 94 bordered boxes across pricing, calculators, library, support and trade school were still wearing `var(--line)`, an 8%-white hairline that reads at a glance as an unstyled div rather than a designed card. The treatment already existed in three places and had never been promoted: supply.html's .sup-card at 0.30, packages' .pkg-card2 at 0.38, v3's bands at 0.34. This is that value, shared, at 0.34 — between the two established weights rather than a fourth invention. border-COLOR only, deliberately: width, radius and the panel gradient stay where each component already set them, so promoting this cannot change a layout. Anything that wants a different weight still overrides it locally, which is why packages keeps its own 0.38 for a 28-card grid. .glass itself is NOT targeted — it is the base for modals and bare panels and a gold edge does not belong on every one of those. But .card IS targeted, and signup.html and login.html build their panel from it, so those two did pick the edge up. Checked rather than assumed, and kept: a single centred panel cannot be mistaken for a card in a grid, and the edge is the brand. Saying otherwise here would be a comment that the stylesheet disproves. */ :root{ --card-edge:rgba(244,197,33,0.34); --card-edge-hover:rgba(244,197,33,0.70); } .card, .calc-card, .block-toggle, .faq-item, .lib-grid li > a{ border-color:var(--card-edge); } /* Hover belongs with the edge, or the card goes gold and then does nothing when you point at it. Transition border-color only; .panel-hover already animates transform and shadow and we must not fight it. */ .calc-card, .block-toggle, .lib-grid li > a{ transition:border-color .16s ease, box-shadow .16s ease; } .calc-card:hover, .block-toggle:hover, .lib-grid li > a:hover{ border-color:var(--card-edge-hover); box-shadow:0 0 0 1px rgba(244,197,33,0.28), 0 12px 30px rgba(244,197,33,0.10); } .panel-hover{transition:transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;} .panel-hover:hover{transform:translateY(-3px); border-color:rgba(244,197,33,0.35); box-shadow:0 1px 0 rgba(255,255,255,0.06) inset, 0 24px 60px rgba(0,0,0,0.55);} /* THE STICKY HEADER WAS EATING THE HEADING IT SCROLLED YOU TO. Measured on the live page 2026-10-22: the header is 114px and sticky, and scroll-margin-top was 0 everywhere. Clicking "How it works" in the nav landed that section's heading at +100px — 14px behind the header; #features landed at -21px, i.e. 135px behind it and completely invisible. The reader arrives mid-paragraph and has to scroll UP to find out where they are. scroll-margin-top is the one property that fixes this: it only affects where a scroll-into-view STOPS, so it changes no layout and nothing visual. Set a little above the header's own height so the heading clears it rather than touching it. */ :is(section, .section, .photo-band)[id]{ scroll-margin-top: 128px; } @media (max-width: 760px){ :is(section, .section, .photo-band)[id]{ scroll-margin-top: 104px; } } /* ── SECTION RHYTHM, ONE SCALE ─────────────────────────────────────────────── Every mid-page gap on a page is PREVIOUS bottom + NEXT top, so the two have to be chosen together or the page drifts. Before these tokens the page had two mid-page gaps 9px apart (135 and 144 at 903px) - too close to read as a deliberate difference, close enough to stop the page feeling locked. They are one value now; rhythm comes from the band alternation and the join mark, not from varying the gap. The join ornament below is positioned FROM these same tokens, so it cannot drift out of centre again. */ :root{ --sec-pad:clamp(56px,9vw,110px); /* every .section's bottom */ --sec-pad-band:clamp(48px,7vw,92px); /* a band's top: it owns a painted slab */ /* *** THERE IS DELIBERATELY NO --join-pad ALIAS HERE. One was written and removed the same day: a custom property is SUBSTITUTED WHERE IT IS DECLARED, so "--join-pad:var(--sec-pad-band)" on :root freezes the global 92px-clamp value and then inherits that frozen number everywhere. Setting --sec-pad-band on a page's
changed the bands and left the joins at the old value, which is how supply.html kept two mid-page gaps 5px apart after it had supposedly been put on the token. A join reads --sec-pad-band directly, so an override resolves at the SECTION and the padding and the ornament move together. */ } .section{padding:var(--sec-pad) 0;} /* ── SLABS ─────────────────────────────────────────────────────────────────── Garett, 2026-10-08: "the sections seem to read as if it's one long page." Measured, and he is right for three compounding reasons: five of the six content sections set padding-top:0, so the only gap between them is the PREVIOUS section's bottom padding — half the intended separation; NO section has a background of its own, so every one sits on the identical plate; and .hair, the one divider rule in this file, is used zero times on the page. THE PAGE HAD NO ARCHITECTURE, WHICH IS ALSO WHY IT FELT INERT. The reveal system here is good — IntersectionObserver, staggered, reduced-motion honoured in six places — and it was animating content with no edges, so it read as one continuous scroll arriving in pieces. Motion amplifies structure; it cannot invent it. Slabs first. A band is NOT a new color. --carbon-900 is one step off the page base, lit by hairlines top and bottom so the eye reads a raised panel rather than a tint. Full-bleed, because a band that stops at the wrap is a card, and cards are already doing a different job on this page. */ .band{ background:var(--carbon-900); border-top:1px solid var(--line); border-bottom:1px solid var(--line); /* Full-bleed out of any centered parent without needing a wrapper change. */ position:relative; } /* The lamp rakes the top edge of a slab, the same way it rakes the plate — one light source, or the page looks assembled from two photographs. */ .band::before{ content:""; position:absolute; inset:0 0 auto 0; height:1px; pointer-events:none; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.10) var(--lamp-x,70%), transparent); } /* A slab needs its own air. These sections had padding-top:0, which is what made them run together; the band earns the space back. */ .band.section{ padding-top:var(--sec-pad-band); } @media (prefers-reduced-motion: reduce){ .band::before{ display:none; } } .section-tight{padding:36px 0;} .grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;} .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;} @media (max-width:820px){ .grid-2,.grid-3{grid-template-columns:1fr;} } .hair{border:none; border-top:1px solid var(--line); margin:0;} /* ── SECTION JOINS, SITE-WIDE ──────────────────────────────────────────────── Garett, 2026-10-29: "for all other pages id like for you to fix section transitions." The SLAB system above is the right idea from 2026-10-08 and it was never taken up: measured today, 37 pages carry .section and exactly TWO carry .band. So every other page still has the fault that entry describes in its own words — consecutive sections separated by nothing but padding, on one identical plate, with .hair used zero times. This is the treatment built and approved on the partner page, moved into the stylesheet rather than waiting for 37 pages to opt in: a hairline and a small diamond above every section that follows another, and one join paid for once instead of twice. *** IT DEPENDS ON NOTHING INSIDE THE SECTION, and that is deliberate. The partner-page version zeroed padding-top and gave the padding back to a child .wrap. Measured across every page before porting it: of 167 sections only 17 have .wrap as their first child — 116 open with div.card and 20 with div.pkg-grid — so that version would have left 150 sections with their content jammed against the mark. The padding stays on the SECTION, where it works whatever the markup holds. :has() stops a join getting two marks where a section already draws its own. The combinator is ~ and not +: index.html interleaves