/* The library's own precondition. Every atom that sizes itself (.input, .textarea, .select, .btn--block, .card) sets a width AND a padding, which only composes under border-box. rivet happened to supply this in render.py, so the dependency was invisible until galvan-admin-template consumed library.css directly and its sign-in panel rendered 448px wide against a 384px max-width, with the inputs overflowing the card. Only box-sizing. Zeroing margin and padding globally is a page-level opinion, not something a component library gets to decide for its host. */ *, *::before, *::after { box-sizing: border-box; } /* atoms.css — canonical ATOM layer for SiteForge (the web implementation of the * Galvan design-system spec). Implements the atoms in * ~/projects/design-system/catalog.json using SiteForge's existing CSS-variable * contract (so rebrand-over-wire keeps working) plus phone-baseline fallbacks * (--tap-min etc.) so every atom is touch-correct even where the harness doesn't * inject them. * * RULE: sections compose THESE classes. A section must never re-declare an atom's * colour/radius/typography — only layout. See ATOMIZATION.md. * * Var contract: --color-primary/accent/surface/text/text-muted, --primary-*, * --neutral-*, --font-display/body, --text-*, --space-*, --radius-*. * Baseline fallbacks: --tap-min(44px) --dur-fast(150ms) --ease-out. */ /* ==================== Muted text floor ==================== * Muted text is derived from the palette's own ink and ground rather than shipped as a * fixed grey, so it follows a bound site palette, follows the light/dark ground, and * still clears WCAG AA on the tinted panels sections actually put it on. * * Measured (WCAG 2.x, sRGB). The greys this replaces, against the worst light ground * in the library, --neutral-200 (#e5e7eb): * #64748b, the value the preview :root ships 3.84:1 FAIL * #6b7280 (--neutral-500) 3.90:1 FAIL * On --neutral-100 (#f3f4f6) those are 4.32 and 4.39, also under the 4.5:1 bar. That * one grey is the whole of the low-contrast worklist on nine sections. * * 70% ink over ground resolves to #575d6a on a white page and #b2b6bd on a #0f172a * page. Worst case each way: * #575d6a on #e5e7eb 5.34:1 #b2b6bd on #374151 5.06:1 * #575d6a on #f3f4f6 6.00:1 #b2b6bd on #1e293b 7.19:1 * A flat --neutral-600 also clears the light side (6.10:1 on #e5e7eb) but it is a * light-ground value: on a dark page it lands at 1.9:1 inside a --color-surface card. * Deriving it is what keeps both grounds correct from one declaration. * Dark SECTIONS on a light page are handled by .on-dark just below. */ :root { --color-text-muted: color-mix(in srgb, var(--color-text, #0f172a) 70%, var(--color-background, #ffffff)); } /* ==================== Tinted chip ground ==================== * SHARED CAUSE, fixed here rather than in the 24 sections that tripped over it. * A badge, chip, tag, avatar, kbd, menu hover row or table head is a small tinted * patch of the PAGE, and every one of them printed --color-text (ground-relative) on * --neutral-100 / --neutral-200 (absolute, always near-white). On a light page that * reads; on a dark page it is #f8fafc on #e5e7eb, measured at 1.2:1. --neutral-* never * flips, so the ink and its ground were resolving against different theories of where * the component sits. * * Derived the same way --color-text-muted above is: a percentage of the page's own ink * over the ground the chip actually sits on, so the tint follows whichever ground it * lands on and the ink stays correct by construction. * * Mixed over --color-SURFACE, not --color-background, and that distinction was found by * looking at the rendered dark preview rather than at the numbers. Mixing over the page * ground passes the contrast gate, because the ink is still correct, but a chip inside a * card then resolves to almost exactly the card's own colour: the price pills in * app-store-grid, the role badge in card-user and the key caps in search-command all * lost their pill and read as bare text on dark. --color-surface is the raised ground a * chip is normally on, and it is one step off the page either way, so the chip stays * visible whether it sits on a card or directly on the page. * light 7% #0f172a over #f8fafc -> #e7eaed 10% -> #e0e3e7 (was #f3f4f6 / #e5e7eb) * dark 7% #f8fafc over #1e293b -> #2d3748 10% -> #343e4e * Contrast on the dark step: ink #f8fafc 12.2:1, muted #b2b6bd 6.0:1. * 7 and not 5, because two separate reads of the dark previews said the same thing: at * 5% the price pills and the role badge were legible but their pill had almost no fill * against the card. The same delta reads weaker light-on-dark than dark-on-light, so * the number that looked right on the light ground was not enough on the dark one. * .on-dark needs no special case: it sets --color-surface itself, so the same * declaration resolves against --neutral-800 there. */ :root { --color-chip: color-mix(in srgb, var(--color-text, #0f172a) 7%, var(--color-surface, var(--color-background, #ffffff))); --color-chip-strong: color-mix(in srgb, var(--color-text, #0f172a) 10%, var(--color-surface, var(--color-background, #ffffff))); } /* ==================== Brand-tinted patch ==================== * --color-chip one step further in: the patch a section tints with the BRAND rather * than with its own ink. A promo band, an unread row, a featured plan, a quote block. * Every one of them painted --primary-50, which is the brand mixed into WHITE and so * is absolute in exactly the way --neutral-100 was, while the ink on it stayed * ground-relative. Measured on the dark preview: #f8fafc on #eef3fd is 1.1:1 and * #b2b6bd on #eef3fd is 1.8:1. * * Deriving the tint over --color-surface fixes the ink. It also introduces a second * failure, which is why this is a token and not a per-section edit: on the dark ground * --color-surface is already a slate (#1e293b, chroma 29) and 10% of the brand lifts it * to chroma 46, past the detector's 40 threshold, so the patch counts as a COLOURED * background and the page's grey muted step (#b2b6bd, chroma 11) fires gray-on-color. * That was a REGRESSION introduced with the ground-relative tint, not an old bug: * dropdown-notification and modal-pricing measured clean while the tint was absolute. * * So the patch carries its own muted step instead of borrowing the page's. Mixing ink * with the BRAND rather than with the ground keeps the patch's hue in the text, which * is what the rule actually asks for ("use a darker shade of the background colour"), * and it still clears contrast comfortably because it is 70% ink either way: * blue light #162e64 on #e3ebfa 11.1:1 dark #b9cdf7 on #1f2f4d 8.5:1 * lime light #445c1d on #f3fae3 7.0:1 dark #e8fbb0 on #2e3e35 10.2:1 * The muted step measures chroma 62 to 78, so it is never read as grey. Full * --color-text needs no swap: gray-on-color only looks at text between 0.05 and 0.85 * relative luminance, and ink sits outside that on both grounds (0.009 and 0.954). * * --color-tint is exposed separately so a section that already publishes its own * background hook can keep it and still opt into the text context via the class. */ :root { --color-tint: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface, var(--color-background, #ffffff))); } /* .on-tint is that text context WITHOUT the background, for the sections that mix their * own brand tint at their own strength (8%, 9%, 12%, 6%) instead of taking --color-tint. * Six of them kept the PAGE's grey muted on it and fired gray-on-color: #b2b6bd on * #1f2e49, on #111d39, on #1e2c46, on #122041, on #293654, on #111e3b. Same defect as * the paragraph above, one level in, and the same answer, so it is the same declaration * rather than six copies of it. Splitting the class in two is what lets a section that * already publishes its own background hook opt into the ink without fighting over the * fill: the section's own `background` would win anyway, and a class whose declared * background is always overridden reads as a mistake. */ .on-tint, .surface-tint { --color-text-muted: color-mix(in srgb, var(--color-text, #0f172a) 70%, var(--color-primary)); } .surface-tint { background: var(--color-tint); } /* ==================== Surface context (local token swap) ==================== * Put on any dark section so every atom inside inverts automatically — no * per-section text-colour overrides. This is theme-swap applied locally. */ .on-dark, .surface-dark { --color-text: #fff; --color-text-muted: rgba(255,255,255,.72); --color-surface: var(--neutral-800, #1f2937); color: var(--color-text); /* The derived tints have to be RE-declared here, not just inherited. A custom property containing var() is substituted on the element that declares it, so the --color-chip on :root resolves against the PAGE's ink and surface and descendants inherit that finished colour. Overriding --color-text and --color-surface below it does nothing to a token already resolved above it. The previous pass assumed the opposite ("`.on-dark` needs no special case: it sets --color-surface itself"), and the gate found it the moment a plain .badge landed inside a dark player: chip #e8eaed under #ffffff text, 1.2:1, which is the same absolute-patch-under-relative-ink defect one level further in. Re-declaring makes the tints resolve against this element's swapped values instead. */ --color-chip: color-mix(in srgb, var(--color-text, #0f172a) 7%, var(--color-surface, var(--color-background, #ffffff))); --color-chip-strong: color-mix(in srgb, var(--color-text, #0f172a) 10%, var(--color-surface, var(--color-background, #ffffff))); --color-tint: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface, var(--color-background, #ffffff))); /* Status colours are absolute patches, so they flip with the ground for the same reason the tints do. The standard ships a light-ground value and an on-dark twin; this is where the twin is chosen, once, instead of in each of the six components that reference them. Receipt: the moment --color-danger existed at all, labs.galvangroup.co (a dark site) picked up the LIGHT value and four elements went from a hardcoded #f87171 that happened to work to a real token that did not. */ --color-danger: var(--color-danger-on-dark, #f2837a); --color-success: var(--color-success-on-dark, #5fca94); --color-warning: var(--color-warning-on-dark, #e0a94a); } /* Brand colour used as TEXT steps to --primary-400 on a dark ground, which is what the library's own dark/light usage table already specifies for tags and labels. A mid brand colour on near-black does not clear body contrast: the default #2563eb measures 3.43:1 on --neutral-900 (#111827), its --primary-400 step (#6b95f1) measures 6.08:1. Fills and buttons keep the base primary. Carried on a token rather than a `.on-dark .text--accent` descendant selector, so the atoms keep their single-class weight and a section's own overrides still win. */ .on-dark, .surface-dark { --color-accent-text: var(--primary-400, var(--color-primary)); } /* The fallback when NOTHING resolves the token is INK, not the raw brand. A section that paints no ground of its own carries neither .on-dark nor a dark surface, so --color-accent-text is unset on BOTH grounds and the old `var(--color-primary)` fallback wrote the raw brand as text. Measured: #2563eb on #0f172a is 3.5:1 and #c1fe00 on #ffffff is 1.2:1, against a 4.5:1 bar. --color-text follows the ground (#0f172a light, #f8fafc dark), so ink clears it either way: 16.9:1 and 16.4:1. The fallback has to be a LITERAL colour. Every derived CSS colour (color-mix, oklch, rgb(from ...)) serialises in the detector's Chrome 151 as `color(srgb ...)` or `oklch(...)`, and detect-antipatterns-browser.js parseRgb matches `rgb()` only. So --primary-900 here would clear the gate by making the text UNMEASURABLE rather than by making it readable, which is a false pass. Ink is the fallback, not the answer. The answer is a resolved --color-accent-text: rivet-server injects design.accent_text_on (the brand darkened by the least amount that clears 4.5:1) and this declaration then never applies. See EDITORIAL-STANDARD rule 22. SiteForge's own preview :root does not emit the token yet, which is why the standalone preview renders accent text as ink. */ /* ==================== Accent step for a brand-TINTED PATCH ==================== * SHARED CAUSE, third level of the same shape. --color-accent-text is computed for the * PAGE's ground. A brand-tinted patch (.badge--primary at 15%, .icon-tile at 12%) is a * LIGHTER ground than the dark page it sits on, so the page's step lands on it short: * * #6b95f1 (--primary-400) on the 15% badge over --neutral-800 4.37:1 FAIL * #6b95f1 on the same badge over --neutral-900 5.31:1 * #6b95f1 on the 12% icon-tile over --color-surface 4.51:1 on the line * * That 4.37 is 14 of the library's remaining contrast findings on its own, across six * sections, and none of them writes a colour: they all just use .badge--primary inside * .on-dark. So it is fixed once, here. * * The patch takes the step one lighter, --primary-300, which is the same relationship * --primary-400 has to the page. Measured on the same grounds: * * #96b4f5 (--primary-300) on the 15% badge over --neutral-800 6.16:1 * #96b4f5 on the 15% badge over --neutral-900 7.49:1 * #96b4f5 on the 12% icon-tile over --color-surface 6.35:1 * * A margin rather than a rounding win, which matters because the badge tint composites * over whatever card it lands on and that ground is not fixed. * * A SECOND TOKEN rather than `.on-dark .badge--primary`, for the reason given above the * .on-dark accent declaration: a descendant selector would outweigh a section's own * single-class override. On :root it resolves to the page's own accent step, so a light * ground is untouched (the light badge is #dbe3f9 and takes the page's #1554e0). */ :root { --color-accent-text-tint: var(--color-accent-text, var(--color-text, #0f172a)); } .on-dark, .surface-dark { --color-accent-text-tint: var(--primary-300, var(--primary-400, var(--color-primary))); } /* ==================== Brand FILL context (local token swap) ==================== * The .on-dark of a brand-filled band: a promo bar, a gradient hero, a filled step * marker. Everything inside is on the BRAND, not on the page, so every ground-relative * token has to be re-pointed at --color-primary-text, the palette's own ink-or-white * pick for that brand. * * Accent text is the one that kept being missed, and it is the loudest failure of the * three: .link and .btn--secondary both read --color-accent-text, which on a filled * band resolves to the step computed for the PAGE and lands brand-on-brand. * #6b95f1 on #2563eb 1.77:1 #1554e0 on #2563eb 1.24:1 * --color-primary-text on #2563eb 5.17:1, and on Galvan lime 16.35:1. * * Muted deliberately equals full ink here rather than a mix toward the fill: 80% white * over #2563eb is #d3e0fb, which measures 3.89:1 against the fill and fails. On a brand * fill the secondary rank is carried by size and weight, not by tint. */ .on-primary, .surface-primary { --color-text: var(--color-primary-text, #fff); --color-text-muted: var(--color-primary-text, #fff); --color-accent-text: var(--color-primary-text, #fff); --color-accent-text-tint: var(--color-primary-text, #fff); color: var(--color-text); } /* ==================== Motion vocabulary ==================== * Measured off linear.app (LINEAR-DECONSTRUCTION.md, "Motion vocabulary"). The * headline finding is what is ABSENT: across 180 downloaded JS chunks, framer-motion * 0, gsap 0, three 0, WebGL 0, `.animate(` 0 (no WAAPI), getAnimations 0, * startViewTransition 0, useInView 0; and in 351KB of CSS, animation-timeline 0, * view-timeline 0, scroll-timeline 0. The whole motion system is CSS transitions on * state plus CSS keyframe loops, which means almost all of it is reproducible in a * static section with scoped CSS and no JS. * * The 18 curves are a complete Penner set, copied verbatim. Counted in their CSS, * --ease-out-quad dominates by an order of magnitude; in-out-quint, in-out-expo, * in-out-circ, in-circ and in-expo are declared and never used on those pages. The * house style is EASE-OUT, ALWAYS, and --ease-out-quad is the house curve. The set * ships whole anyway because it is 18 inert declarations and it stops the next * author inventing a nineteenth cubic-bezier by hand. * * NOT a second vocabulary: ~/projects/design-system/tokens/tokens-motion.css already * defines --ease-standard / --ease-in / --ease-out / --ease-emphasized / * --ease-linear, --dur-instant/fast/normal/slow/signal and --press-scale. Those names * are left alone and are still what the atoms below consume; these are 18 NEW names * that do not exist upstream. */ :root { --ease-in-quad: cubic-bezier(.55,.085,.68,.53); --ease-out-quad: cubic-bezier(.25,.46,.45,.94); --ease-in-cubic: cubic-bezier(.55,.055,.675,.19); --ease-out-cubic: cubic-bezier(.215,.61,.355,1); --ease-in-quart: cubic-bezier(.895,.03,.685,.22); --ease-out-quart: cubic-bezier(.165,.84,.44,1); --ease-in-quint: cubic-bezier(.755,.05,.855,.06); --ease-out-quint: cubic-bezier(.23,1,.32,1); --ease-in-expo: cubic-bezier(.95,.05,.795,.035); --ease-out-expo: cubic-bezier(.19,1,.22,1); --ease-in-circ: cubic-bezier(.6,.04,.98,.335); --ease-out-circ: cubic-bezier(.075,.82,.165,1); --ease-in-out-quad: cubic-bezier(.455,.03,.515,.955); --ease-in-out-cubic: cubic-bezier(.645,.045,.355,1); --ease-in-out-quart: cubic-bezier(.77,0,.175,1); --ease-in-out-quint: cubic-bezier(.86,0,.07,1); --ease-in-out-expo: cubic-bezier(1,0,0,1); --ease-in-out-circ: cubic-bezier(.785,.135,.15,.86); } /* ==================== The house hover ==================== * 0.16s with --ease-out-quad is their default interaction transition: of 79 * transition declarations, 26 are 0.16s, more than twice the next duration. The * canonical pattern, repeated verbatim across their components: * * transition: filter .16s var(--ease-out-quad), transform .16s var(--ease-out-quad); * :hover { filter: brightness(1.4); } * :active { transform: scale(.97); } * * They change BRIGHTNESS, not colour. There is no hover colour swap anywhere in the * sampled CSS, which means one declaration replaces a per-variant hover colour for * every brand and both grounds. * * Applied here to the FILLED atoms only, and that is a deliberate deviation with a * reason. Brightening a fill lifts it on any ground. Brightening dark ink on paper * does not: it washes the text toward the page and REMOVES the affordance instead of * adding one. linear.app is an all-dark site, so the question never came up there. * The transparent variants (.btn--secondary, .btn--ghost) therefore keep their * background tint on hover, which is the same "no hover colour on the ink" idea * expressed the way a light ground needs. * * The :active scale sits inside prefers-reduced-motion: no-preference, per the * inversion below. * * KNOWN, and verified by hovering the real button rather than reasoning about it: * brightness multiplies and then CLAMPS per channel, so a brand that already sits at * a channel ceiling shifts hue instead of just lifting. Galvan's lime #c1fe00 has * green at 254, so x1.4 lands on (255,255,0), pure yellow. It reads unmistakably as * "lit" and the dark button text stays at 18.9:1, but it is a hue shift, not a * brightening. linear.app's indigo #5e6ad2 has no channel near the ceiling and never * shows this. If the yellow is unwanted, the document also measures 1.3 and 110% in * their CSS; at 110% the lime lifts to (212,255,0) and stays lime. 1.4 is the * canonical value of the 26 uses, so it is what ships until someone decides * otherwise. */ .hover-bright { transition: filter .16s var(--ease-out-quad), transform .16s var(--ease-out-quad); } .hover-bright:hover { filter: brightness(1.12); } /* A generic utility cannot know which property carries the brand, so it keeps a filter; 1.12 is chosen to stay near the brand rather than to match linear.app. */ @media (prefers-reduced-motion: no-preference) { .hover-bright:active { transform: scale(var(--press-scale, .97)); } } /* ============================ Button ============================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm, .5rem); min-height: var(--tap-min, 44px); padding: var(--space-sm, .5rem) calc(var(--space-lg, 1.5rem) + .25rem); font-family: var(--font-body); font-size: var(--text-base, 1rem); font-weight: 600; line-height: 1.2; border: 1px solid transparent; border-radius: var(--radius-md, 12px); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--dur-fast, 150ms) var(--ease-out, ease), border-color var(--dur-fast, 150ms) var(--ease-out, ease), transform var(--dur-instant, 100ms) var(--ease-out, ease); } .btn:active { transform: scale(var(--press-scale, .97)); } .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 40%, transparent); } /* The house hover: brightness, not a colour swap. --primary-700 was a second brand step maintained purely so a filled button had somewhere to go on hover. */ .btn--primary { background: var(--color-primary); color: var(--color-primary-text, #fff); box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.05)); transition: filter .16s var(--ease-out-quad), transform var(--dur-instant, 100ms) var(--ease-out, ease); } /* HOVER LIFT. Not `filter: brightness()`, which multiplies each channel and CLAMPS. * Measured on Galvan lime #c1fe00, whose green is already 254, so there is no headroom: * * brightness(1.0) hue 74 the brand * brightness(1.1) hue 70 already shifted * brightness(1.4) hue 60 pure yellow #ffff00 * * linear.app can use 1.4 because its indigo has headroom in every channel (234 -> 232). * The technique does not transfer to a brand with a maxed channel AT ANY VALUE above 1.0, * so the canonical number was the wrong thing to copy. Mixing toward white does not fix * it either: +12% white takes lime from hue 74 to 80, because raising a zero blue channel * moves the hue. * * Relative colour syntax lifts LIGHTNESS while holding hue and chroma literally constant. * Verified in the gate's own Chrome: oklch(from #c1fe00 calc(l + 0.06) c h) computes * oklch(0.981 0.232 125.302), the same 125.302 hue as the source. It is also measurable: * parseRgb reads oklch(). The brightness fallback stays for anything older. */ .btn--primary:hover { filter: brightness(1.12); } @supports (color: oklch(from red l c h)) { .btn--primary:hover { filter: none; background: oklch(from var(--color-primary) calc(l + 0.06) c h); } } /* The RING takes the resolved accent too. A saturated 1px brand outline on paper is the neon look: lime at 1.15:1 against the ground is not a visible edge, it is a glow. The fill keeps the true brand; an outline is closer to text than to a fill. */ .btn--secondary { background: transparent; color: var(--color-accent-text, var(--color-primary)); border-color: var(--color-accent-text, var(--color-primary)); } .btn--secondary:hover { background: color-mix(in srgb, var(--color-primary) 8%, transparent); } .btn--ghost { background: transparent; color: var(--color-text); } .btn--ghost:hover { background: var(--neutral-100, rgba(0,0,0,.05)); } .btn--destructive { background: #dc2626; color: #fff; } .btn--destructive:hover { background: #b91c1c; } .btn--icon { padding: var(--space-sm, .5rem); min-width: var(--tap-min, 44px); border-radius: var(--radius-full, 9999px); } .btn--sm { min-height: 36px; padding: var(--space-xs, .25rem) var(--space-md, 1rem); font-size: var(--text-sm, .875rem); } .btn--lg { min-height: var(--tap-primary, 56px); padding: var(--space-md, 1rem) var(--space-xl, 2rem); font-size: var(--text-lg, 1.125rem); } .btn--block { display: flex; width: 100%; } /* ======================== Icon button ========================= */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--tap-min, 44px); height: var(--tap-min, 44px); border: none; background: transparent; color: var(--color-text); border-radius: var(--radius-full, 9999px); cursor: pointer; transition: background var(--dur-fast, 150ms) var(--ease-out, ease); } .icon-btn:hover { background: var(--neutral-100, rgba(0,0,0,.05)); } .icon-btn--danger { color: #dc2626; } /* ========================== Inputs =========================== */ .input, .textarea, .select { width: 100%; min-height: var(--tap-min, 44px); padding: var(--space-sm, .5rem) var(--space-md, 1rem); font-family: var(--font-body); font-size: var(--text-base, 1rem); color: var(--color-text); background: var(--color-surface, #fff); border: 1px solid var(--neutral-200, #e5e7eb); border-radius: var(--radius-md, 8px); transition: border-color var(--dur-fast, 150ms) var(--ease-out, ease); } .input::placeholder, .textarea::placeholder { color: var(--color-text-muted); } .input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent); } .textarea { min-height: calc(var(--tap-min, 44px) * 2); resize: vertical; line-height: 1.5; } .select { appearance: none; padding-right: var(--space-xl, 2rem); background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 1rem center, right .75rem center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: #dc2626; } /* ⚠ THE FIELD ATOM PAIRED A THEME-AWARE SURFACE WITH A THEME-FIXED BORDER. `background: var(--color-surface)` follows the theme, so on a dark page the field fills correctly; `border: 1px solid var(--neutral-200)` does not, because `.on-dark` never redeclares --neutral-200. Measured on /foundations: eleven fields outlined in #E0DDDC, a near-white hairline, on a #0b1120 ground. That is the whole of why the forms on that site "look ugly" and it is one missing rule, not eleven styling decisions. (0,2,0) so it beats the base rule; light pages are untouched. */ .on-dark .input, .on-dark .textarea, .on-dark .select { /* --neutral-700, NOT --neutral-800. The first attempt used 800 because that is what every hairline in the house sections uses, and it produced a field with no edge at all: on a site that sets `bg`, rivet derives BOTH --color-surface and --neutral-800 from the ground and they landed on the same color-mix(#0b1120, #ffffff 11%), so border and fill measured a 1.00 contrast ratio. Measured, not eyeballed. 700 is #374151, is not derived from the ground, and is what form-wish already uses -- which is why that form looked right while the intake form did not. */ border-color: var(--neutral-700, #374151); } /* ==================== Checkbox / radio / switch ==================== */ .checkbox, .radio { width: 20px; height: 20px; min-width: 20px; accent-color: var(--color-primary); cursor: pointer; } .switch { position: relative; display: inline-flex; align-items: center; width: 44px; height: 26px; cursor: pointer; } .switch input { position: absolute; opacity: 0; } .switch .switch__track { width: 44px; height: 26px; background: var(--neutral-200, #e5e7eb); border-radius: var(--radius-full, 9999px); transition: background var(--dur-fast, 150ms) var(--ease-out, ease); } .switch .switch__thumb { position: absolute; left: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform var(--dur-fast, 150ms) var(--ease-out, ease); } .switch input:checked + .switch__track { background: var(--color-primary); } .switch input:checked ~ .switch__thumb { transform: translateX(18px); } /* ========================== Badge / chip / tag ========================== */ .badge { display: inline-flex; align-items: center; gap: var(--space-xs, .25rem); padding: 2px var(--space-sm, .5rem); font-size: var(--text-xs, .75rem); font-weight: 600; line-height: 1.4; border-radius: var(--radius-full, 9999px); background: var(--color-chip, var(--neutral-100, #f3f4f6)); color: var(--color-text); } .badge--primary { background: color-mix(in srgb, var(--color-primary) 15%, transparent); color: var(--color-accent-text-tint, var(--color-accent-text, var(--color-text, #0f172a))); } .badge--success { background: #dcfce7; color: #166534; } .badge--warning { background: #fef3c7; color: #92400e; } .badge--danger { background: #fee2e2; color: #991b1b; } .chip { display: inline-flex; align-items: center; gap: var(--space-xs, .25rem); min-height: 32px; padding: var(--space-xs, .25rem) var(--space-md, 1rem); font-size: var(--text-sm, .875rem); border-radius: var(--radius-full, 9999px); background: var(--color-chip, var(--neutral-100, #f3f4f6)); color: var(--color-text); cursor: pointer; border: 1px solid transparent; transition: all var(--dur-fast, 150ms) var(--ease-out, ease); } /* The other brand FILL in the atom layer, so it takes the same house hover. */ .chip--selected { background: var(--color-primary); color: var(--color-primary-text, #0b0b0b); transition: filter .16s var(--ease-out-quad); } .chip--selected:hover { filter: brightness(1.12); } @supports (color: oklch(from red l c h)) { .chip--selected:hover { filter: none; background: oklch(from var(--color-primary) calc(l + 0.06) c h); } } .chip__remove { display: inline-flex; cursor: pointer; opacity: .7; } .tag { display: inline-block; padding: 1px var(--space-sm, .5rem); font-size: var(--text-xs, .75rem); border-radius: var(--radius-sm, 4px); background: var(--color-chip, var(--neutral-100, #f3f4f6)); color: var(--color-text-muted); } /* ========================== Avatar ========================== */ .avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-full, 9999px); overflow: hidden; background: var(--color-chip-strong, var(--neutral-200, #e5e7eb)); color: var(--color-text); font-size: var(--text-sm, .875rem); font-weight: 600; flex-shrink: 0; } .avatar img { width: 100%; height: 100%; object-fit: cover; } .avatar--sm { width: 28px; height: 28px; font-size: var(--text-xs, .75rem); } .avatar--lg { width: 56px; height: 56px; font-size: var(--text-lg, 1.125rem); } /* ==================== Tracking as a function of SIZE ==================== * Letter-spacing is a computed function of font size, not a per-element guess. * Measured off linear.app and verified against RENDERED values, not read off their * token list (see LINEAR-DECONSTRUCTION.md, "Type scale"): * 72px renders -1.584px (72 x -0.022) 48px -1.056px 32px -0.704px * 24px renders -0.288px (24 x -0.012) * 15px renders -0.165px (-0.011) 14px -0.182px (-0.013) 13px -0.13px (-0.010) * Shape of the rule: * >= 32px -0.022em * 20px to 24px -0.012em * 13px to 15px -0.010em to -0.013em * 12px and 17px 0 * So tracking tightens as size climbs and relaxes back to zero at the smallest UI * sizes. The old declaration ran a flat -0.02em on .heading with -0.03em on h1 and * -0.025em on h2, so a 20px .heading--h4 (1058 uses, the most-used heading in the * library) inherited DISPLAY tracking: -0.4px per gap on a size Linear sets at * -0.24px, and nothing anywhere on their site is tighter than -0.022em. -0.03em is * off the top of the measured range entirely. * Exposed as tokens so a section that sizes its own heading can pick the band that * matches the size it actually rendered, instead of guessing a new number. */ :root { --track-display: -0.022em; /* >= 32px */ --track-title: -0.012em; /* 20px to 24px */ --track-body: -0.011em; /* 13px to 16px; measured at 15px */ } /* ========================== Typography atoms ========================== */ .text { font-family: var(--font-body); font-size: var(--text-base, 1rem); color: var(--color-text); line-height: 1.6; } .text--muted { color: var(--color-text-muted); } .text--lead { font-size: var(--text-lg, 1.125rem); line-height: 1.6; } .text--caption { font-size: var(--text-sm, .875rem); color: var(--color-text-muted); } /* Premium type: tight, confident headings (negative tracking + tight leading). The BASE carries the body band, not the display band, because a bare `.heading` with no size modifier is whatever size the section gave it and in this library that is 18px. Every size modifier below restates its own band at equal specificity and later in the file, so the modifier always wins. */ .heading { font-family: var(--font-display); color: var(--color-text); line-height: 1.1; letter-spacing: var(--track-body); font-weight: 700; } /* Leading tightens as size grows: the measured reference build runs 0.94 on its 150px hero, Klim runs 1.0 on 218px. At 1.05 a large heading reads loose and timid. */ .heading--h1 { font-size: var(--text-display, 3rem); line-height: 0.95; letter-spacing: var(--track-display); font-weight: 800; } .heading--h2 { font-size: var(--text-3xl, 2rem); line-height: 1.02; letter-spacing: var(--track-display); } .heading--h3 { font-size: var(--text-2xl, 1.5rem); font-weight: 700; letter-spacing: var(--track-title); } .heading--h4 { font-size: var(--text-xl, 1.25rem); font-weight: 700; letter-spacing: var(--track-title); } .link { color: var(--color-accent-text, var(--color-primary)); text-decoration: none; } .link:hover { text-decoration: underline; } .link--muted { color: var(--color-text-muted); } /* ========================== Divider ========================== */ .divider { border: none; border-top: 1px solid var(--neutral-200, #e5e7eb); margin: var(--space-lg, 1.5rem) 0; } .divider--vertical { border-top: none; border-left: 1px solid var(--neutral-200, #e5e7eb); margin: 0 var(--space-lg, 1.5rem); align-self: stretch; } /* ==================== Spinner / progress / skeleton ==================== */ .spinner { display: inline-block; width: 24px; height: 24px; border: 2px solid var(--neutral-200, #e5e7eb); border-top-color: var(--color-primary); border-radius: 50%; } @keyframes sf-spin { to { transform: rotate(360deg); } } /* Reduced motion by INVERSION. Every keyframe on linear.app sits inside prefers-reduced-motion: no-preference rather than being switched off inside `reduce`, so the DEFAULT is the end state and reduced motion needs no override at all. That is the whole trick: a rule that has to be remembered somewhere else is a rule that gets forgotten, and the failure is silent. The ring keeps its brand- coloured top border either way, so it still reads as "working" when it is still. */ @media (prefers-reduced-motion: no-preference) { .spinner { animation: sf-spin .8s linear infinite; } } .progress { width: 100%; height: 8px; background: var(--neutral-200, #e5e7eb); border-radius: var(--radius-full, 9999px); overflow: hidden; } /* No transition on width: the library ships no JS and fills are server-rendered, so it never animated anything, while animating width causes layout thrash (the impeccable layout-transition rule flagged it on 100% of the library). A consumer that does animate a fill should do it with transform: scaleX() instead. */ .progress__fill { height: 100%; background: var(--color-primary); border-radius: inherit; } .skeleton { position: relative; overflow: hidden; background: var(--neutral-100, #f3f4f6); border-radius: var(--radius-md, 8px); } .skeleton--text { height: 1em; border-radius: var(--radius-sm, 4px); } .skeleton--circle { border-radius: 50%; } /* ========================== Tooltip ========================== */ .tooltip { position: relative; display: inline-flex; } .tooltip__bubble { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); padding: var(--space-xs, .25rem) var(--space-sm, .5rem); font-size: var(--text-xs, .75rem); color: #fff; background: var(--neutral-900, #111827); border-radius: var(--radius-sm, 4px); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--dur-fast, 150ms) var(--ease-out, ease); } .tooltip:hover .tooltip__bubble, .tooltip:focus-within .tooltip__bubble { opacity: 1; } /* ========================== Overline / eyebrow ========================== */ /* Uppercase letter-spaced label above titles. Add .text--accent for brand colour. */ .text--overline { font-size: var(--text-xs, .75rem); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); } .text--accent { color: var(--color-accent-text, var(--color-text, #0f172a)); } .text--unit { font-size: .7em; font-weight: 500; color: var(--color-text-muted); } /* ========================== Blockquote (large light quote) ========================== */ /* --font-accent, not --font-display: a pull-quote IS the "rare editorial statement" the accent face exists for. --font-accent falls back to --font-display, so a site that sets no accent face is unchanged. */ .blockquote { font-family: var(--font-accent, var(--font-display)); font-size: var(--text-2xl, 1.5rem); font-weight: 400; font-style: italic; line-height: 1.4; color: var(--color-text); } /* ========================== Extra atom variants ========================== */ .chip--outline { background: transparent; border-color: var(--color-chip-strong, var(--neutral-200, #e5e7eb)); } .chip--outline.chip--selected { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-text, #0b0b0b); } .avatar--square { border-radius: var(--radius-md, 8px); } /* ========================== More atoms (backlog consolidation) ========================== */ .text--strong { font-weight: 600; } .heading--h5 { font-size: var(--text-base, 1rem); font-weight: 700; line-height: 1.3; letter-spacing: var(--track-body); } .text--overline-lg { font-size: var(--text-sm, .875rem); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); } .kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6em; padding: 1px var(--space-xs, .25rem); font-family: var(--font-mono, monospace); font-size: var(--text-xs, .75rem); color: var(--color-text); background: var(--color-chip, var(--neutral-100, #f3f4f6)); border: 1px solid var(--color-chip-strong, var(--neutral-200, #e5e7eb)); border-bottom-width: 2px; border-radius: var(--radius-sm, 4px); } /* Range / slider */ .range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: var(--radius-full, 9999px); background: var(--neutral-200, #e5e7eb); outline: none; } .range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border: none; border-radius: 50%; background: var(--color-primary); cursor: pointer; } .range::-moz-range-thumb { width: 18px; height: 18px; border: none; border-radius: 50%; background: var(--color-primary); cursor: pointer; } /* Status glyph (check/cross in a tinted round holder) */ .status-dot { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; } .status-dot > svg { width: 60%; height: 60%; } .status-dot--success { background: #dcfce7; color: #166534; } .status-dot--danger { background: #fee2e2; color: #991b1b; } .status-dot--muted { background: var(--color-chip, var(--neutral-100, #f3f4f6)); color: var(--color-text-muted); } /* Circular / radial progress (drive with --value: 0..100) */ .progress-ring { --value: 0; display: inline-grid; place-items: center; width: 64px; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--color-primary) calc(var(--value) * 1%), var(--neutral-200, #e5e7eb) 0); } .progress-ring::before { content: ""; grid-area: 1 / 1; width: 76%; aspect-ratio: 1; border-radius: 50%; background: var(--color-surface, #fff); } .progress-ring__label { grid-area: 1 / 1; font-weight: 700; font-size: var(--text-sm, .875rem); } /* ========================== More variants (admin gaps) ========================== */ .badge--info { background: #dbeafe; color: #1e40af; } .link--danger { color: #ef4444; } .link--danger:hover { color: #dc2626; } .text--warning { color: #f59e0b; } .text--danger { color: #ef4444; } /* * SiteForge Layout Foundation * Shared utilities injected into every generated page. * Components can use these classes alongside their own scoped styles. */ /* Gradient animations — only background-position and background-size to avoid affecting children */ @keyframes sf-gradient-shift { 0% { background-position: 0% 50%; } 25% { background-position: 100% 0%; } 50% { background-position: 100% 100%; } 75% { background-position: 0% 100%; } 100% { background-position: 0% 50%; } } @keyframes sf-gradient-rotate { 0% { background-position: 0% 0%; } 25% { background-position: 100% 0%; } 50% { background-position: 100% 100%; } 75% { background-position: 0% 100%; } 100% { background-position: 0% 0%; } } @keyframes sf-gradient-pulse { 0%, 100% { background-size: 200% 200%; background-position: 0% 50%; } 50% { background-size: 350% 350%; background-position: 100% 50%; } } @keyframes sf-gradient-diagonal { 0% { background-position: 0% 0%; } 25% { background-position: 100% 0%; } 50% { background-position: 100% 100%; } 75% { background-position: 0% 100%; } 100% { background-position: 0% 0%; } } @keyframes sf-gradient-zoom { 0%, 100% { background-size: 200% 200%; background-position: 0% 50%; } 33% { background-size: 400% 400%; background-position: 100% 0%; } 66% { background-size: 250% 250%; background-position: 50% 100%; } } /* Box Shadow utility classes — apply directly to elements that need them */ .sf-shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important; } .sf-shadow-md { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05) !important; } .sf-shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04) !important; } .sf-shadow-xl { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.04) !important; } .sf-shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.2) !important; } .sf-shadow-soft { box-shadow: 0 2px 15px rgba(0,0,0,0.04), 0 0 1px rgba(0,0,0,0.06) !important; } .sf-shadow-glow { box-shadow: 0 0 25px rgba(37,99,235,0.2), 0 0 10px rgba(37,99,235,0.1) !important; } .sf-shadow-inner { box-shadow: inset 0 2px 4px rgba(0,0,0,0.06) !important; } .sf-shadow-border { box-shadow: 0 0 0 1px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.06) !important; } .sf-shadow-float { box-shadow: 0 30px 60px -15px rgba(0,0,0,0.15) !important; } .sf-shadow-sharp { box-shadow: 4px 4px 0 var(--neutral-900, #0f172a) !important; } /* Container */ .sf-container { max-width: var(--site-max-width, 1400px); margin: 0 auto; padding: 0 var(--space-md); } .sf-container--wide { max-width: 1600px; } .sf-container--full { max-width: 100%; } /* Section padding */ .sf-section { padding: var(--space-3xl) 0; } .sf-section--compact { padding: var(--space-xl) 0; } .sf-section--spacious { padding: calc(var(--space-3xl) * 1.5) 0; } /* Grid system (mobile-first) */ .sf-grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); } .sf-grid-3 { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); } .sf-grid-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); } @media (min-width: 768px) { .sf-grid-2 { grid-template-columns: repeat(2, 1fr); } .sf-grid-3 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .sf-grid-4 { grid-template-columns: repeat(4, 1fr); } } /* Split layouts (asymmetric) */ .sf-split { display: grid; grid-template-columns: 1fr; gap: var(--space-2xl); align-items: center; } @media (min-width: 768px) { .sf-split { grid-template-columns: 1fr 1fr; } .sf-split--left-heavy { grid-template-columns: 3fr 2fr; } .sf-split--right-heavy { grid-template-columns: 2fr 3fr; } } /* Centered header */ .sf-header-center { text-align: center; max-width: 700px; margin: 0 auto var(--space-2xl); } /* Card base */ .sf-card { background: var(--surface-100, var(--color-surface)); border: 1px solid var(--neutral-200, #e5e7eb); border-radius: var(--radius-lg); padding: var(--space-xl); transition: border-color 0.2s, box-shadow 0.2s; } .sf-card:hover { border-color: var(--neutral-300, #d1d5db); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); } /* Dark card variant */ .sf-card--dark { background: var(--neutral-800, #1e293b); border-color: var(--neutral-700, #334155); } .sf-card--dark:hover { border-color: var(--neutral-600, #475569); } /* Button base */ .sf-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-md); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; text-decoration: none; border: none; cursor: pointer; transition: background-color 0.2s, transform 0.1s; } .sf-btn:active { transform: scale(0.98); } .sf-btn--primary { background: var(--primary-600); color: var(--neutral-100); } .sf-btn--primary:hover { background: var(--primary-700); } .sf-btn--secondary { background: var(--secondary-600); color: var(--neutral-100); } .sf-btn--secondary:hover { background: var(--secondary-700); } .sf-btn--outline { background: transparent; border: 2px solid var(--primary-600); color: var(--primary-600); } .sf-btn--outline:hover { background: var(--primary-50); } .sf-btn--ghost { background: transparent; color: var(--primary-600); } .sf-btn--ghost:hover { background: var(--primary-50); } /* Form inputs */ .sf-input { width: 100%; padding: var(--space-sm) var(--space-md); border: 1px solid var(--neutral-200, #e5e7eb); border-radius: var(--radius-md); font-family: var(--font-body); font-size: var(--text-sm); background: var(--neutral-50, #fff); color: var(--neutral-900); transition: border-color 0.2s; } .sf-input:focus { outline: none; border-color: var(--primary-600); } .sf-input::placeholder { color: var(--neutral-400); } /* Tags */ .sf-tag { display: inline-block; padding: 2px 10px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600; background: var(--primary-100); color: var(--primary-700); } /* Image cover */ .sf-img-cover { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md); } /* ====================== Marquee / Infinite Scroll ====================== */ .sf-marquee { overflow: hidden; white-space: nowrap; } .sf-marquee__track { display: flex; gap: var(--space-lg, 2rem); width: max-content; animation: sf-marquee-scroll var(--marquee-duration, 20s) linear infinite; } .sf-marquee--reverse .sf-marquee__track { animation-direction: reverse; } @keyframes sf-marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ====================== Horizontal Scroll Container ====================== */ .sf-horizontal-track { display: flex; gap: var(--space-lg, 2rem); width: max-content; } @media (max-width: 767px) { .sf-horizontal-track { flex-direction: column; width: 100%; } } /* molecules.css — canonical MOLECULE layer. Composes atoms; adds layout + minimal glue * only, never restyles the atoms inside it. Implements the molecules in * ~/projects/design-system/catalog.json. Load after atoms.css. See ATOMIZATION.md. */ /* ========================== Field ========================== */ .field { display: flex; flex-direction: column; gap: var(--space-xs, .25rem); } .field__label { font-size: var(--text-sm, .875rem); font-weight: 600; color: var(--color-text); } .field__label .req { color: #dc2626; } .field__help { font-size: var(--text-xs, .75rem); color: var(--color-text-muted); } /* 6.25:1 on a light surface. #dc2626 measured 4.59 at 12px, which passes and looks faint, and an error people do not read is not an error. */ .field__error { font-size: var(--text-xs, .75rem); color: #b42318; } /* ========================== Card ========================== */ .card { display: flex; flex-direction: column; background: var(--color-surface, #fff); border: 1px solid var(--color-chip-strong, var(--neutral-200, #e5e7eb)); border-radius: var(--radius-lg, 18px); box-shadow: var(--shadow-md, 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -6px rgba(0,0,0,.10)); overflow: hidden; } .card__media { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .card__body { display: flex; flex-direction: column; gap: var(--space-sm, .5rem); padding: var(--space-lg, 1.5rem); } .card__actions { display: flex; gap: var(--space-sm, .5rem); padding: 0 var(--space-lg, 1.5rem) var(--space-lg, 1.5rem); margin-top: auto; } .card--feature { text-align: center; align-items: center; } .card--horizontal { flex-direction: row; } .card--horizontal .card__media { width: 40%; aspect-ratio: auto; } .card--overlay { position: relative; color: #fff; } .card--overlay .card__body { position: absolute; inset: auto 0 0 0; background: linear-gradient(transparent, rgba(0,0,0,.75)); } /* Clickable card: whole card is an affordance (pair with an wrap or onclick) */ .card--link { cursor: pointer; text-decoration: none; color: inherit; transition: border-color var(--dur-fast, 150ms) var(--ease-out, ease), transform var(--dur-fast, 150ms) var(--ease-out, ease); } .card--link:hover { border-color: var(--color-primary); } .card--link:active { transform: scale(.995); } /* ========================== List item ========================== */ .list-item { display: flex; align-items: center; gap: var(--space-md, 1rem); min-height: var(--tap-min, 44px); padding: var(--space-sm, .5rem) var(--space-md, 1rem); } .list-item__leading { flex-shrink: 0; } .list-item__content { display: flex; flex-direction: column; min-width: 0; flex: 1; } .list-item__title { font-weight: 600; color: var(--color-text); } .list-item__subtitle { font-size: var(--text-sm, .875rem); color: var(--color-text-muted); } .list-item__trailing { flex-shrink: 0; margin-left: auto; color: var(--color-text-muted); } /* ========================== Menu item ========================== */ /* Atoms and molecules that are legitimately applied to a