/* ========================================================================== 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-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%; --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-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%; --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-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%; --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; } /* ---------- 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; white-space: nowrap; } @media (min-width: 640px) { .wordmark { font-size: 1.25rem; letter-spacing: .025em; } } .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: 999px; 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); } /* ---------- pills ---------- */ .pill { display: inline-flex; align-items: center; gap: .375rem; font-size: .75rem; font-weight: 650; letter-spacing: .01em; padding: .25rem .625rem; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; } .pill-hold { background: hsl(var(--accent-amber)); color: hsl(var(--accent-amber-fg)); border-color: hsl(var(--accent-amber-fg) / .22); } .pill-ready { background: hsl(var(--accent-emerald)); color: hsl(var(--accent-emerald-fg)); border-color: hsl(var(--accent-emerald-fg) / .22); } /* ---------- 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. */ .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%; } }