/* ========================================================================== Dated change feeds — aligned to the ustechautomations.com design system. Tokens, type scale, radius and accent are lifted from the live main site. Take them from assets/WebsiteStyleProvider-*.css, NOT assets/root-*.css: the root sheet is the app's palette and the website overrides it. Reading the wrong one is how these pages ended up with a near-black button where the marketing site has a blue one. Look only. Prices, sample rows, event ids and honesty lines live in the HTML and are frozen: never restyle a fact out of existence. Each family page sets data-family on . Nothing in this file reads it: there is one accent and every family shares it. The attribute is kept for the page's own scripts and for anyone grepping the built site by family. ========================================================================== */ @font-face { font-family: "Satoshi"; src: url("https://ustechautomations.com/fonts/Satoshi-Variable.woff2") format("woff2-variations"), url("https://ustechautomations.com/fonts/Satoshi-Variable.woff2") format("woff2"); font-weight: 300 900; font-display: swap; font-style: normal; } :root { /* type — same stack the main site resolves --font-sans to */ --sans: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; --serif: "PT Serif", ui-serif, Georgia, "Times New Roman", serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* main-site tokens, light */ --background: 220 10% 99%; --foreground: 220 20% 10%; --card: 0 0% 100%; --card-foreground: 220 20% 10%; --secondary: 220 12% 97%; --muted: 220 12% 97%; --muted-foreground: 220 10% 42%; --border: 220 13% 94%; --primary: 207 100% 50%; --primary-foreground: 0 0% 100%; --primary-surface: 207 100% 42%; --primary-surface-hover: 207 100% 36%; --primary-hover: 207 100% 44%; --accent-blue: 207 100% 50%; --accent-emerald: 149 80% 90%; --accent-emerald-fg: 161 94% 30%; --accent-amber: 48 96% 89%; --accent-amber-fg: 26 90% 37%; /* The estate's one "this is wrong / do not do this" colour, added 2026-09-08. Four in-page tools were each carrying their own red -- #b42318, #c0392b and two more -- because there was no token to reach for. One red, defined here in both themes, is the whole reason this token exists: see BRAND.md §1. */ --accent-rose: 0 86% 94%; --accent-rose-fg: 0 72% 41%; --radius: .5rem; --shadow-color: 220 15% 60%; /* resolved */ --bg: hsl(var(--background)); --surface: hsl(var(--card)); --surface-2: hsl(var(--secondary)); --fg: hsl(var(--foreground)); --muted-fg: hsl(var(--muted-foreground)); --faint: hsl(var(--muted-foreground) / .78); --line: hsl(var(--border)); --line-strong: hsl(var(--border) / 1.6); --accent: hsl(var(--accent-blue)); --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / .08); --shadow-md: 0 4px 16px -4px hsl(var(--shadow-color) / .16); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --background: 220 15% 8%; --foreground: 220 15% 96%; --card: 220 12% 10%; --card-foreground: 220 15% 96%; --secondary: 220 10% 16%; --muted: 220 10% 16%; --muted-foreground: 220 8% 62%; --border: 220 10% 18%; --primary: 207 100% 50%; --primary-foreground: 0 0% 100%; --primary-surface: 207 100% 42%; --primary-surface-hover: 207 100% 36%; --primary-hover: 207 100% 44%; --accent-blue: 207 100% 60%; --accent-emerald: 164 86% 16%; --accent-emerald-fg: 158 64% 52%; --accent-amber: 22 78% 26%; --accent-amber-fg: 45.9 96.7% 64.5%; --accent-rose: 0 63% 18%; --accent-rose-fg: 0 91% 71%; --shadow-color: 220 20% 4%; } } :root[data-theme="dark"] { --background: 220 15% 8%; --foreground: 220 15% 96%; --card: 220 12% 10%; --card-foreground: 220 15% 96%; --secondary: 220 10% 16%; --muted: 220 10% 16%; --muted-foreground: 220 8% 62%; --border: 220 10% 18%; --primary: 207 100% 50%; --primary-foreground: 0 0% 100%; --primary-surface: 207 100% 42%; --primary-surface-hover: 207 100% 36%; --primary-hover: 207 100% 44%; --accent-blue: 207 100% 60%; --accent-emerald: 164 86% 16%; --accent-emerald-fg: 158 64% 52%; --accent-amber: 22 78% 26%; --accent-amber-fg: 45.9 96.7% 64.5%; --accent-rose: 0 63% 18%; --accent-rose-fg: 0 91% 71%; --shadow-color: 220 20% 4%; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; background: hsl(var(--background)); } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 16px; font-weight: 500; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; } @media (min-width: 768px) { .wrap { padding: 0 2rem; } } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } .skip { position: absolute; left: -9999px; top: 0; background: var(--surface); color: var(--fg); padding: .75rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); z-index: 100; } .skip:focus { left: 1rem; top: 1rem; } /* One visible focus ring for everything keyboard-reachable. BRAND.md §5 and §9 ask for visible focus and never removing an outline; until now the estate relied on whatever ring the browser drew, which on the filled blue buttons and the dark surfaces was close to invisible. Nothing here removes an outline. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; border-radius: var(--radius); } /* ---------- text inputs in the in-page tools ---------- */ /* The pre-check, the diagram tool, the hazmat search and the label forge each drew their own box: four borders, four greys, four corner radii, and one of them was written into a style="" attribute. This is that box, once. */ .field { width: 100%; max-width: 32rem; font: inherit; padding: .5rem .6rem; color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); } .field::placeholder { color: var(--muted-fg); opacity: 1; } /* ---------- masthead: mirrors the main-site sticky header ---------- */ .masthead { position: sticky; top: 0; z-index: 40; width: 100%; border-bottom: 1px solid var(--line); background: hsl(var(--background) / .8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .masthead .wrap { display: flex; align-items: center; gap: 1.25rem; min-height: 64px; flex-wrap: wrap; } @media (min-width: 1024px) { .masthead .wrap { flex-wrap: nowrap; } } .wordmark { display: inline-flex; align-items: center; gap: .5rem; font-weight: 900; font-size: 1rem; letter-spacing: normal; text-transform: uppercase; color: var(--fg); text-decoration: none; /* On a phone the family name and the "/ US Tech Automations" part may sit on two lines; from 640px up they stay on one. Found on a 375px screenshot. */ flex-wrap: wrap; white-space: normal; row-gap: 0; } @media (min-width: 640px) { .wordmark { font-size: 1.25rem; letter-spacing: .025em; white-space: nowrap; } } .usta-logo { width: 24px; height: 24px; display: block; flex: none; } .wordmark:hover { text-decoration: none; opacity: .8; } .wordmark span { font-weight: 500; color: var(--muted-fg); } .mast-nav { display: none; gap: 2rem; margin-left: 2rem; align-items: center; flex: 1; } /* main site keeps the links beside the wordmark and the CTA hard right */ .mast-cta { margin-left: auto; } @media (min-width: 1024px) { .mast-nav { display: flex; } } .mast-nav a { font-size: .875rem; font-weight: 500; color: var(--fg); text-decoration: none; } .mast-nav a:hover { color: hsl(var(--primary)); text-decoration: none; } .mast-cta { display: inline-flex; align-items: center; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-size: .875rem; font-weight: 600; padding: .5rem 1rem; border-radius: var(--radius); text-decoration: none; white-space: nowrap; } .mast-cta:hover { background: hsl(var(--primary-hover)); text-decoration: none; } .crumbs { width: 100%; margin: 0 0 .75rem; font-size: .8125rem; color: var(--muted-fg); } .crumbbar { border-bottom: 1px solid var(--line); background: hsl(var(--background)); } .crumbbar .crumbs { width: auto; margin: 0; padding: .625rem 0; white-space: nowrap; overflow-x: auto; } .crumbs a { color: var(--muted-fg); } .crumbs .sep { padding: 0 .5rem; opacity: .5; } /* ---------- hero ---------- */ .hero { padding: 3.5rem 0 2rem; } .hero h1 { font-size: 3rem; line-height: 1.15; letter-spacing: -.025em; font-weight: 500; margin: 0 0 1rem; max-width: 20ch; } @media (min-width: 768px) { .hero h1 { font-size: 3.75rem; } } @media (min-width: 1024px) { .hero h1 { font-size: 4.5rem; letter-spacing: -.03em; } } .eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-fg); } .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .55; display: inline-block; } .lede { font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.6; color: var(--muted-fg); max-width: 68ch; margin: 0 0 2rem; } .lede strong { color: var(--fg); font-weight: 600; } /* ---------- fact rail ---------- */ .rail { display: grid; gap: 1px; margin: 0; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .rail > div { background: var(--surface); padding: 1rem 1.25rem; } .rail dt { font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-fg); margin: 0 0 .375rem; } .rail dd { margin: 0; font-size: .9375rem; font-weight: 500; } .rail dd.price, .amount { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } /* ---------- main ---------- */ main { padding: 1rem 0 4rem; } main section { margin: 0 0 2.75rem; max-width: 76ch; } /* Evidence tables use the full 1280px container the main site's sections use, while the prose around them keeps its reading measure. */ main section:has(.evidence) { max-width: none; } main section:has(.evidence) > p, main section:has(.evidence) > h2, main section:has(.evidence) > h3 { max-width: 76ch; } /* Main-site heading character (weight/tracking/leading are its h1-h6 rule). Sizes step one rung down its ladder: a feed page's h2 is a subsection of a record, not a marketing section header, so it takes the site's h3 numbers. */ h2 { font-size: 1.875rem; font-weight: 500; letter-spacing: -.025em; line-height: 1.15; margin: 0 0 .875rem; } h3 { font-size: 1.5rem; font-weight: 500; letter-spacing: -.025em; line-height: 1.15; margin: 0 0 .5rem; } @media (min-width: 768px) { h2 { font-size: 2.25rem; } h3 { font-size: 1.875rem; } } p { margin: 0 0 1rem; line-height: 1.625; } main p { color: hsl(var(--foreground) / .86); } strong { font-weight: 650; color: var(--fg); } /* ---------- state line ---------- */ /* What replaced the status pills on 2026-09-08 (BRAND.md §7). The old .pill/.pill-ready/.pill-hold trio was a filled, 999px-radius badge in amber or emerald: a second radius, a second border weight and two accent colours that existed nowhere else on the page, carrying a fact that the words beside it already carried. It is now muted text with a muted icon and no container. The two states are told apart by the SHAPE of the icon and by the words, never by colour -- both draw in currentColor, which is --muted-fg here. A reader who cannot see the difference between amber and emerald loses nothing, because there is no longer any difference to see. align-items: baseline, not center, so a long label that wraps onto a second line keeps its icon on the first line next to the words rather than floating in the middle of the block. The nudge puts the icon's optical centre on the x-height. */ .state { display: inline-flex; align-items: baseline; gap: .375rem; color: var(--muted-fg); font-weight: 500; } .state > svg { width: .8125rem; height: .8125rem; flex: none; transform: translateY(.09em); } /* ---------- honesty panel ---------- */ .honest { border: 1px solid hsl(var(--accent-amber-fg) / .3); background: hsl(var(--accent-amber) / .5); border-radius: var(--radius); padding: 1.125rem 1.25rem; } .honest p:last-child { margin-bottom: 0; } .honest strong { color: hsl(var(--accent-amber-fg)); } /* The same disclosure, sitting in a hero rather than in the body. Five family pages used this class with nothing defined for it, so their "not for sale yet" line rendered as ordinary body text while the identical sentence on dc-buildout got a panel. One shop, one look. */ .hero-note { border: 1px solid hsl(var(--accent-amber-fg) / .3); background: hsl(var(--accent-amber) / .5); border-radius: var(--radius); padding: 1rem 1.125rem; margin: 0 0 1.25rem; max-width: 62ch; } .hero-note strong { color: hsl(var(--accent-amber-fg)); } /* ---------- spec list ---------- */ .spec { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .75rem; } .spec li { display: grid; gap: .125rem; border-left: 2px solid var(--line-strong); padding: .125rem 0 .125rem 1rem; } .spec li strong { font-weight: 650; } .sub { color: var(--muted-fg); font-size: .9375rem; } /* ---------- cards (hub) ---------- */ .cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .hub-groups { display: grid; gap: 2.5rem; } .group { max-width: none; } /* The list of a feed's own pages, printed on the feed's page. Columns, not one long line: twenty-seven states stacked vertically is a wall, and a reader scanning for one name reads across a column far faster than down a list. break-inside keeps a name from being split over a column boundary. */ .slice-index { margin-top: 2.75rem; border-top: 1px solid var(--line); padding-top: 1.75rem; } .slice-index h2 { margin-bottom: .9rem; } .slice-list { columns: 3 190px; column-gap: 1.75rem; list-style: none; padding: 0; margin: 0 0 .9rem; } .slice-list li { break-inside: avoid; margin: 0 0 .5rem; } .slice-list a { text-decoration: none; } .slice-list a:hover { text-decoration: underline; } .card { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; color: inherit; text-decoration: none; box-shadow: var(--shadow-sm); transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease; } a.card:hover { text-decoration: none; border-color: hsl(var(--accent-blue) / .5); box-shadow: var(--shadow-md); transform: translateY(-1px); } .card h3 { margin: 0 0 .375rem; } .card .who { color: var(--muted-fg); font-size: .875rem; margin: 0 0 .875rem; } .card .meta { display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; font-size: .8125rem; color: var(--muted-fg); } /* ---------- evidence / sample panels ---------- */ .evidence { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); } .evidence-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .75rem 1.125rem; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: .8125rem; font-weight: 600; color: var(--muted-fg); } .evidence-body { padding: 1.125rem; } .blank { color: var(--muted-fg); font-style: italic; } .scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } table { width: 100%; border-collapse: collapse; font-size: .875rem; } th, td { text-align: left; padding: .625rem .75rem; border-bottom: 1px solid var(--line); } th { font-size: .6875rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-fg); } td.num, .num { font-variant-numeric: tabular-nums; } tbody tr:last-child td { border-bottom: 0; } .stamp, .seal, .fact, .change, .moved { font-family: var(--mono); font-size: .8125rem; } h1 > .seal, h1 > .stamp, h2 > .seal, h2 > .stamp, h3 > .seal, h3 > .stamp { display: block; margin-top: .375rem; font-weight: 400; letter-spacing: 0; color: var(--muted-fg); font-size: .8125rem; line-height: 1.5; } .seal { color: var(--muted-fg); word-break: break-all; } .stamp { color: var(--muted-fg); } .note { font-size: .875rem; color: var(--muted-fg); } .steps { display: grid; gap: 1rem; padding: 0; margin: 0 0 1rem; list-style: none; counter-reset: step; } .steps li { display: grid; grid-template-columns: auto 1fr; gap: .875rem; align-items: start; } /* ---------- contact ---------- */ .contact { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 1.75rem; box-shadow: var(--shadow-sm); max-width: none; } .contact h2 { margin-top: 0; } .mail { display: inline-flex; align-items: center; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-weight: 600; font-size: .9375rem; padding: .625rem 1.25rem; border-radius: var(--radius); text-decoration: none; } .mail:hover { background: hsl(var(--primary-hover)); text-decoration: none; } .mail-note { margin: .875rem 0 0; font-size: .8125rem; color: var(--muted-fg); } /* ---------- footer: mirrors the main-site footer ---------- */ footer.site { border-top: 1px solid var(--line); background: var(--bg); padding: 4rem 0 2rem; font-size: .875rem; } @media (min-width: 768px) { footer.site { padding: 5rem 0 2rem; } } .foot-grid { display: grid; gap: 3rem; margin-bottom: 3rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .foot-brand { grid-column: 1 / -1; } @media (min-width: 1024px) { .foot-brand { grid-column: span 2; max-width: 320px; } } .foot-brand .wordmark { font-size: 1.125rem; font-weight: 600; letter-spacing: -.025em; text-transform: none; } .foot-brand p { color: var(--muted-fg); margin: .75rem 0 1rem; } .foot-col h4 { font-size: 1.875rem; font-weight: 500; letter-spacing: -.025em; line-height: 1.15; color: var(--fg); margin: 0 0 1rem; } @media (min-width: 768px) { .foot-col h4 { font-size: 2.25rem; } } .foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; } .foot-col a { color: var(--muted-fg); } .foot-col a:hover { color: hsl(var(--primary)); } .foot-bottom { border-top: 1px solid var(--line); padding-top: 1.5rem; display: grid; gap: .75rem; color: var(--muted-fg); } footer.site p { color: var(--muted-fg); } footer.site .addr { font-size: .8125rem; } .foot-honest { max-width: 76ch; } /* ---------- offer: the pay path ---------- A page shows btn-buy only when catalog.json carries a checkout that was fetched and found working. btn-ghost is the email fallback. Both are the same shape so a page does not look broken when the pay link is missing. */ /* The browser's own "hidden means display:none" is an author-weight rule of the same specificity as a class, so any class that sets display -- .btn does, and .state does -- silently beats it and shows the element. schemahand's paid download button carries hidden until the key is entered, so that would have put a paid file on screen for everyone. Say it once, loudly, for the sheet. */ [hidden] { display: none !important; } .hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .875rem; margin: 1.5rem 0 0; } .btn { display: inline-flex; align-items: center; justify-content: center; font-weight: 650; font-size: .9375rem; line-height: 1; padding: .75rem 1.375rem; border-radius: var(--radius); text-decoration: none; border: 1px solid transparent; transition: background .15s ease, border-color .15s ease; } .btn:hover { text-decoration: none; } .btn-buy { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); box-shadow: 0 1px 2px hsl(var(--foreground) / .08); } .btn-buy:hover { background: hsl(var(--primary-hover)); } .btn-ghost { background: transparent; color: hsl(var(--primary)); border-color: hsl(var(--primary) / .35); } .btn-ghost:hover { background: hsl(var(--primary) / .06); border-color: hsl(var(--primary) / .55); } .btn-lg { padding: .9375rem 1.75rem; font-size: 1rem; } .btn-note { font-size: .8125rem; color: var(--muted-fg); } .contact.buy .buy-price { margin: 0 0 1.125rem; font-size: 1.125rem; color: var(--fg); } .contact.buy .buy-price strong { font-size: 1.5rem; letter-spacing: -.01em; } .contact.buy .btn-lg { margin-bottom: .25rem; } @media (max-width: 34rem) { .hero-cta { flex-direction: column; align-items: flex-start; } .btn { width: 100%; } }