/* base.css — shared design "bones" every site gets (structure + primitives). * * Tokens come from the site's Theme settings, emitted as CSS variables in * by render_head(): --container, --space, --radius, --shadow, --font-size, * --font-scale, plus the brand vars --color-* and --font-*. The :root block below * repeats them as fallbacks so this works even if the inline tokens are missing. * * Because everything READS the tokens, two sites with different Theme settings * (or different starter "looks") render the same structure with a genuinely * different feel. Put SITE/LOOK-specific flavor in style.css — it loads after * this and overrides. Don't rewrite base.css. */ /* ═══════════════════════════════════════════════════════════════════════════ * EDITING THIS FILE (to change ALL FUTURE generations) * * ── VERIFY EVERY EDIT ──────────────────────────────────────────────────── * After ANY change here, screenshot the regression harness and eyeball it. * Run this in the TERMINAL (copy/paste the whole line) — it's a shell script, * NOT something you open in a browser. It opens the resulting PNGs when done: * * cd "/Users/tylerwillis/Documents/Digital/Website-Development/SFTP/clayjar-websites/site/platform/patterns" && ./shoot-base-regression.sh --open * * (If you get "permission denied", use: bash shoot-base-regression.sh --open) * * It links THIS file directly and screenshots every primitive + the ⚑ REGRESSION * GUARDS (the bugs that came back before) at desktop + mobile widths. Scan the * guards first. Fixing a NEW class of bug? Add a fixture for it to * patterns/base-regression.html BEFORE you finish, so it can't regress — if the * bug only shows under a per-site skin (e.g. a skin flips a grid to auto-fit and * orphans a row), have the fixture emulate that skin inline so the guard proves * base.css neutralises it. (The shoot script caps the capture at 4000px tall — * raise --window-size if a new fixture sits below that.) * * Faster loop for ONE component — open the live page in a browser instead: * open "/Users/tylerwillis/Documents/Digital/Website-Development/SFTP/clayjar-websites/site/platform/patterns/base-regression.html" * ───────────────────────────────────────────────────────────────────────── * * PROPAGATION — this file is a per-site SNAPSHOT, copied into each site at * provision time (sites.php → recurse_copy), so: * • NEW sites pick up your edit automatically (copied before the AI runs; * the AI's style.css only layers flavor ON TOP of this). Nothing else to do. * • EXISTING sites keep the base.css they were born with — they do NOT * auto-update. To backfill, copy ONLY this file (and includes/media.php if * touched) into each site/s//…. Do NOT use push_template for this: it * also overwrites the site's generated style.css + pages with blank starters. * * This file is the SOURCE copied into every generated site, so a fix here lands * on every future build. (The copies under site/s//… are per-site — editing * those only touches one site.) Decide where a fix belongs: * • It LOOKS wrong — spacing, centering, color, a component's look, contrast * on a colored band ........................ HERE (base.css). * • A behavior is broken — slider, reveal, scroll effect, tabs, carousel * ....................................... assets/js/main.js * • The AI keeps CHOOSING wrong — thin copy, bad section order/mix, wrong * component, mixed alignment .............. includes/generate.php (prompt text) * • A rendered component's HTML is off — blog card, testimonial, contact panel, * collections ............................ template/includes/content.php * * MAP — search (⌘F) the quoted headers below to jump to a region: * :root ......................... design TOKENS: --space, --radius, --shadow, * --surface/-2, --border, colors, type scale. * "Site chrome" ................. header, nav + dropdown caret, mobile hamburger, footer * "Layout primitives" ........... .container, section vertical rhythm, .grid * "Components" .................. buttons, cards, card-as-link, .scrim (text on photo) * "SECTION PRIMITIVES" .......... .display/.lede, .hero, section width/rhythm modifiers * "COMPOSITION ARCHETYPES" ...... .split, .feature-rows (zig-zag), .offset, editorial grid * feature cards · stats · steps · pricing · testimonials · logos · CTA · FAQ * "MOTION & POLISH LAYER" ....... scroll-progress bar, custom scrollbar, reveal-on-scroll, parallax * "2026 reference components" ... .chip-kicker, .aura glow, .device, .media-stat, .hl two-tone * "Business components" ......... .team, .checklist, .contact-panel, .embed, .announcement * "RICH SECTION BLOCKS" ......... .carousel--slides + dots, .accolades, .metric-split, * .spotlight, .resource-list, .listing, .callout-band, * .logo-grid, .comparison matrix cells, .price-toggle, * .compare-cols (two-panel), .signup-form, .price-solo, * .testimonial-wall (masonry), .meters (progress bars) * "HARDENING LAYER" ............. dark-surface / overflow / mobile safety nets * "OPTIONS SYSTEM" + "AXIS A".."AXIS H" — the data-options="…" modifier vocabulary: * A Surface(background-*) · B Alignment(text-center) · C Density(tight/roomy/flush) * D Width(narrow/wide/measure) · E Motifs · F Shape · G Type · H Media grade * * QUICK HITS: * • Centering / alignment issues → "AXIS B — ALIGNMENT" and ".section-head". * • A pill/label/button is invisible on a colored band → the on-band rules in * "Components" and near ".cta"/".chip-kicker" (search "on ANY colored"). * • TEST without a full generation: put the markup in a static .html that * s this file and open it in a browser — iterate in seconds. * ═══════════════════════════════════════════════════════════════════════════ */ :root { --container: 1080px; --space: 1rem; --radius: 8px; --shadow: 0 1px 3px rgba(0, 0, 0, .12); --font-size: 17px; --font-scale: 1.25; /* Depth vocabulary — derived from the brand tokens so it re-skins with them and needs NO extra injection (var() resolves lazily at use-time). This is what separates a "flat framework default" from a designed surface: elevated surfaces, a real hairline border, and LAYERED shadows (a tight contact shadow + a soft ambient one) instead of a single flat drop. A site's style.css can override any of these; the section primitives below read them so depth is consistent everywhere. --surface / --surface-2 slightly raised panels on the page background --border hairline that tracks the text color, not black --shadow-sm/-lg smaller / larger companions to --shadow --radius-lg a larger corner (scales with --radius, so a radius:0 brand stays sharp everywhere) */ --surface: color-mix(in srgb, var(--color-text, #111) 3%, var(--color-background, #fff)); --surface-2: color-mix(in srgb, var(--color-text, #111) 6%, var(--color-background, #fff)); --border: color-mix(in srgb, var(--color-text, #111) 12%, transparent); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06); --shadow-lg: 0 18px 48px -20px rgba(0, 0, 0, .28), 0 4px 12px -6px rgba(0, 0, 0, .10); --radius-lg: calc(var(--radius, 8px) * 2); /* Vertical rhythm between flowing text (headings/paragraphs). Deliberately generous — tight stacking is what reads as "elementary". A site's style.css can retune it. */ --flow: calc(var(--space, 1rem) * 1.2); } /* --- Reset -------------------------------------------------------------- * * A modern, minimal normalize so browser defaults don't bleed into a site's * look. This is the shared baseline every site inherits — style.css should add * flavor on top, never restate a reset. Keep it token-aware where it matters * (headings/type live below); everything here is layout-neutral. */ *, *::before, *::after { box-sizing: border-box; } /* Strip default margins — spacing is composed with tokens (--space), not inherited from the UA stylesheet. */ * { margin: 0; } html { font-size: var(--font-size); -webkit-text-size-adjust: 100%; /* stop iOS bumping type on rotate */ text-size-adjust: 100%; scroll-behavior: smooth; tab-size: 4; } body { min-height: 100vh; font-family: var(--font-body, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif); color: var(--color-text, #1a1a1a); background: var(--color-background, #fff); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Media: block-level and never overflow their container. */ img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } /* Form controls inherit typography instead of the UA's tiny system font. */ input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; } /* Long words / URLs shouldn't force horizontal scroll. */ p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } /* Lists lose their bullets/padding by default; add them back per component (e.g. inside .prose long-form content) rather than fighting the UA. */ ul, ol { list-style: none; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } hr { border: none; border-top: 1px solid rgba(0, 0, 0, .12); } /* Honor users who ask for less motion (see the smooth scroll above + JS). */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Modular type scale: each heading steps up by --font-scale from body text. 1rem == the base size (set on ), so these track the Theme type tokens. */ h1, h2, h3, h4 { font-family: var(--font-heading, inherit); line-height: 1.2; } h1 { font-size: calc(1rem * var(--font-scale) * var(--font-scale) * var(--font-scale)); line-height: 1.1; } h2 { font-size: calc(1rem * var(--font-scale) * var(--font-scale)); } h3 { font-size: calc(1rem * var(--font-scale)); } a { color: var(--color-primary, #0066cc); } code { background: #f4f4f5; padding: 0.1em 0.35em; border-radius: 4px; } /* --- Site chrome (header / footer) -------------------------------------- */ .site-header { /* Sticky + a solid background + a stacking context ABOVE page sections so a hero photo / colored band can never paint over the nav (the .is-scrolled shadow below finally has something to stick to). z-index sits under modals (1000) and the mobile nav sheet. A site's style.css can make it transparent over the hero or drop the stickiness — this is the safe default. */ position: sticky; top: 0; z-index: 90; display: flex; align-items: center; justify-content: space-between; gap: var(--space); padding: var(--space) calc(var(--space) * 1.5); background: var(--color-background, #fff); border-bottom: 1px solid var(--border, rgba(0, 0, 0, .08)); } .brand { font-weight: 700; text-decoration: none; color: var(--color-text, inherit); flex-shrink: 0; } .brand-logo { display: block; height: 50px; width: 200px; object-fit: contain; object-position: left; border-radius: 0; } /* Primary nav. Desktop: a horizontal row with hover/focus dropdowns. The hamburger (.nav-toggle) is hidden until the mobile breakpoint below. */ .nav-menu { display: flex; align-items: center; gap: calc(var(--space) * 1.25); margin: 0; padding: 0; list-style: none; } .nav-item { position: relative; } .nav-link { display: inline-block; text-decoration: none; color: var(--color-text, inherit); padding: 0.35em 0; } .nav-item:hover > .nav-link, .nav-link:focus { color: var(--color-primary, #0066cc); } /* Current-page state. The header adds .is-active to the link for the page being viewed (and .has-current to a dropdown parent whose child is current). Color is the universal indicator; if a site draws its own hover underline (a scaled ::after in style.css), the active link keeps that underline shown. Ignores #anchor and external links — see nav_is_current(). */ .nav-link.is-active, .nav-item.has-current > .nav-link { color: var(--color-primary, #0066cc); } .nav-menu > .nav-item > .nav-link.is-active::after { transform: scaleX(1) !important; } /* A dropdown parent shows a caret; the submenu opens on hover/focus (desktop). Defensive: a per-site style.css occasionally re-implements the nav and hides this button (deleting the caret). Force it visible so a dropdown always shows its caret. */ .nav-item.has-dropdown > .nav-sub-toggle { display: inline-flex !important; } .nav-sub-toggle { display: inline-flex; align-items: center; justify-content: center; width: 1.4em; height: 1.4em; margin-left: 0.15em; margin-bottom: 4px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; vertical-align: middle; } .nav-sub-toggle::before { content: ""; width: 0.45em; height: 0.45em; /* Nudge up: a chevron drawn from two borders is bottom-heavy, so its optical center sits below the geometric one — this re-centers it against the label. */ margin-top: -0.12em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; } /* Desktop: flip the caret up while its dropdown is open (hover/focus) — the animation that was previously only wired for the mobile aria-expanded toggle. */ .nav-item.has-dropdown:hover > .nav-sub-toggle::before, .nav-item.has-dropdown:focus-within > .nav-sub-toggle::before { margin-top: 0.12em; transform: rotate(-135deg); } .nav-dropdown { position: absolute; left: 0; top: 100%; min-width: 12rem; margin: 0; padding: calc(var(--space) * 0.5); list-style: none; background: var(--color-background, #fff); border: 1px solid rgba(0, 0, 0, .1); border-radius: var(--radius, 8px); box-shadow: var(--shadow, 0 8px 24px rgba(0, 0, 0, .12)); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease, visibility .15s; z-index: 50; } .nav-dropdown .nav-link { display: block; padding: 0.4em 0.5em; border-radius: calc(var(--radius, 8px) * 0.6); } .nav-item.has-dropdown:hover > .nav-dropdown, .nav-item.has-dropdown:focus-within > .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } /* Hamburger — hidden on desktop, shown at the mobile breakpoint. */ .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: none; cursor: pointer; } .nav-toggle-bar { display: block; width: 1.4rem; height: 2px; margin-inline: auto; background: var(--color-text, currentColor); transition: transform .2s ease, opacity .2s ease; } @media (max-width: 768px) { .nav-toggle { display: flex; } .site-nav { position: absolute; left: 0; right: 0; top: 100%; display: none; padding: var(--space) calc(var(--space) * 1.5); background: var(--color-background, #fff); border-bottom: 1px solid rgba(0, 0, 0, .08); box-shadow: var(--shadow, 0 8px 24px rgba(0, 0, 0, .12)); z-index: 40; } .site-header { position: relative; flex-wrap: wrap; } .site-nav.is-open { display: block; } .nav-menu { flex-direction: column; align-items: stretch; gap: 0; } .nav-item { border-bottom: 1px solid rgba(0, 0, 0, .06); } .nav-item .nav-link { padding: 0.75em 0; } /* On mobile the dropdown is an inline accordion toggled by aria-expanded. */ .has-dropdown { display: grid; grid-template-columns: 1fr auto; align-items: center; } .has-dropdown > .nav-dropdown { grid-column: 1 / -1; } .nav-dropdown { position: static; display: none; min-width: 0; padding: 0 0 0 var(--space); border: 0; border-radius: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; } .nav-sub-toggle[aria-expanded="true"] + .nav-dropdown { display: block; } .nav-sub-toggle[aria-expanded="true"]::before { transform: rotate(-135deg); } .nav-sub-toggle { width: 2.5rem; height: 2.5rem; } } /* The same sheet whenever the hamburger is visible, at ANY width. base.js sets data-nav-collapsed while the toggle is displayed, so a site whose style.css shows the hamburger above 768px still gets a menu that opens. :where() keeps these at the media-query rules' specificity, so a site's own sheet styling (loaded after base.css) still wins. */ :where(.site-header[data-nav-collapsed]) .site-nav { position: absolute; left: 0; right: 0; top: 100%; display: none; padding: var(--space) calc(var(--space) * 1.5); background: var(--color-background, #fff); border-bottom: 1px solid rgba(0, 0, 0, .08); box-shadow: var(--shadow, 0 8px 24px rgba(0, 0, 0, .12)); z-index: 40; } :where(.site-header[data-nav-collapsed]) .site-nav.is-open { display: block; } :where(.site-header[data-nav-collapsed]) .nav-menu { flex-direction: column; align-items: stretch; gap: 0; } :where(.site-header[data-nav-collapsed]) .nav-item { border-bottom: 1px solid rgba(0, 0, 0, .06); } :where(.site-header[data-nav-collapsed]) .nav-item .nav-link { padding: 0.75em 0; } :where(.site-header[data-nav-collapsed]) .has-dropdown { display: grid; grid-template-columns: 1fr auto; align-items: center; } :where(.site-header[data-nav-collapsed]) .has-dropdown > .nav-dropdown { grid-column: 1 / -1; } :where(.site-header[data-nav-collapsed]) .nav-dropdown { position: static; display: none; min-width: 0; padding: 0 0 0 var(--space); border: 0; border-radius: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; } :where(.site-header[data-nav-collapsed]) .nav-sub-toggle[aria-expanded="true"] + .nav-dropdown { display: block; } :where(.site-header[data-nav-collapsed]) .nav-sub-toggle[aria-expanded="true"]::before { transform: rotate(-135deg); } :where(.site-header[data-nav-collapsed]) .nav-sub-toggle { width: 2.5rem; height: 2.5rem; } /* HEADER LAYOUTS — config 'header_layout' puts data-layout on .site-header (see components/header.php). Every rule is scoped to [data-layout], so a header without it (the standard row, and every site built before this) renders exactly as before. action/status: brand · nav · primary action button · search. centered: brand over a centered nav. minimal: no search icon (markup omits it). */ .site-header[data-layout] .site-nav { margin-left: auto; } .header-action { display: inline-flex; align-items: center; gap: .45em; flex: none; white-space: nowrap; } .header-action svg { width: 1.05em; height: 1.05em; flex: none; } .site-header[data-layout="centered"] { flex-wrap: wrap; justify-content: center; row-gap: calc(var(--space) * .5); } .site-header[data-layout="centered"] .brand { flex-basis: 100%; display: flex; justify-content: center; } .site-header[data-layout="centered"] .brand-logo { object-position: center; } .site-header[data-layout="centered"] .site-nav { margin-left: 0; } .site-header[data-layout="centered"] .nav-search { position: absolute; right: calc(var(--space) * 1.5); top: var(--space); } @media (max-width: 768px) { /* brand · action · hamburger on ONE row (the menu sheet is absolutely positioned below, so nothing needs to wrap); a long name shrinks instead of pushing the hamburger onto a second line. */ .site-header[data-layout] { flex-wrap: nowrap; gap: .6rem; padding-inline: var(--space); } .site-header[data-layout] .brand { margin-right: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .site-header[data-layout] .brand-logo { max-width: 100%; } .site-header[data-layout] .header-action { order: 2; padding: .5em .85em; font-size: .9rem; } .site-header[data-layout] .nav-search { order: 3; } .site-header[data-layout] .nav-toggle { order: 4; } .site-header[data-layout] .site-nav { order: 5; margin-left: 0; } .site-header[data-layout="centered"] { justify-content: space-between; } .site-header[data-layout="centered"] .brand { flex-basis: auto; justify-content: flex-start; } .site-header[data-layout="centered"] .brand-logo { object-position: left; } .site-header[data-layout="centered"] .nav-search { position: static; } } @media (max-width: 420px) { /* A long action label won't fit beside the brand on a small phone — the page carries the same action. A phone number (status) is short and stays. */ .site-header[data-layout="action"] .header-action { display: none; } .site-header[data-layout="status"] .nav-search { display: none; } } /* FOOTER LAYOUTS — config 'footer_layout' puts data-layout on .site-footer. minimal: one compact tier. statement: the business name set huge across the bottom (.footer-wordmark), sized to fit its own length on any width. */ .site-footer[data-layout="minimal"] { padding-block: calc(var(--space) * 1.5); } .site-footer[data-layout="minimal"] .site-footer-inner { align-items: center; gap: var(--space) calc(var(--space) * 2); } .site-footer[data-layout="minimal"] .footer-bottom { margin-top: var(--space); padding-top: var(--space); } .footer-wordmark { max-width: var(--container); margin: calc(var(--space) * 1.5) auto 0; padding-inline: calc(var(--space) * 1.5); font-family: var(--font-heading, inherit); font-weight: 700; line-height: .82; letter-spacing: -.035em; white-space: nowrap; overflow: hidden; color: var(--color-text, inherit); /* fit the name's own length: ~.58em per character across the content width */ font-size: clamp(2.25rem, calc((min(100vw, var(--container, 1200px)) - 3rem) / (var(--wm-len, 12) * .58)), 12rem); } /* base.js measures this span and shrinks the wordmark until it fits. */ .footer-wordmark-text { display: inline-block; } /* The footer ELEMENT spans the full viewport width so a background color/border set on it (by a site's style.css) bleeds edge to edge — the content inside is held to the container width by .site-footer-inner and stays aligned with the page's main column. (Older sites put content directly in .site-footer; the flex fallback below keeps them laid out even without the inner wrapper.) */ .site-footer { padding-block: calc(var(--space) * 2.5); color: var(--color-muted, #888); border-top: 1px solid var(--border, rgba(0, 0, 0, .08)); } /* Top tier: the brand/logo block + a nav sitemap (rendered from the Header nav). Back-compat: an old footer that put copyright + legal STRAIGHT into .site-footer-inner still lays out as a sensible row. */ .site-footer-inner, .site-footer:not(:has(.site-footer-inner)) { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: calc(var(--space) * 2); max-width: var(--container); margin-inline: auto; padding-inline: calc(var(--space) * 1.5); } .footer-brand { display: grid; gap: .7rem; max-width: 24rem; } .footer-brand .brand-logo { height: 50px; width: 200px; object-fit: contain; object-position: left; } .footer-tagline { color: var(--color-muted, #888); font-size: .95rem; line-height: 1.55; } .footer-contact { display: grid; gap: .3rem; font-size: .92rem; } .footer-contact a { color: var(--color-muted, #888); text-decoration: none; } .footer-contact a:hover { color: var(--color-primary, #0066cc); } .footer-contact span { color: var(--color-muted, #888); } .footer-social { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .3rem; } .footer-social a { color: var(--color-muted, #888); text-decoration: none; font-size: .9rem; font-weight: 600; } .footer-social a:hover { color: var(--color-primary, #0066cc); } .footer-nav { display: flex; flex-wrap: wrap; gap: calc(var(--space) * 2.5); } .footer-col { display: grid; gap: .55rem; align-content: start; } /* Optional persistent newsletter signup (config 'footer_newsletter'). A footer column: heading + blurb + the inline .signup-form primitive. */ .footer-signup { display: grid; gap: .5rem; align-content: start; max-width: 22rem; } /* When a footer HAS a newsletter, pair it with the brand on the top row (brand left, signup right via the inner's space-between) and drop the sitemap to a full-width row below — so the signup fills the empty top-right instead of wrapping to the far left. Only applies when .footer-signup exists; footers without one are untouched. */ .site-footer-inner:has(.footer-signup) .footer-brand { order: 1; } .site-footer-inner:has(.footer-signup) .footer-signup { order: 2; } .site-footer-inner:has(.footer-signup) .footer-nav { order: 3; flex-basis: 100%; } .footer-signup .footer-col-title { margin: 0; } .footer-signup-blurb { color: var(--color-muted, #888); font-size: .9rem; line-height: 1.5; margin: 0; } /* Input + a compact ICON submit sitting inline to its right — not a full-width bar. The field grows to fill; the button is a fixed square. nowrap keeps them on one row (the field can shrink because min-width:0), so on any footer width they read as one control pair. A .footer-signup-btn with no icon still shows its text label. */ /* display:flex is explicit (not inherited from .signup-form) so a per-site skin that sets `.signup-form { display: grid }` can't stack the field + button — this higher-specificity rule keeps the footer signup a single inline row regardless. */ .footer-signup .signup-form { display: flex; margin-top: .35rem; gap: .5rem; flex-wrap: nowrap; align-items: end; } .footer-signup .signup-form .field { flex: 1 1 auto; min-width: 0; } .footer-signup .signup-form .footer-signup-btn { flex: 0 0 auto; width: 2.6rem; padding: 0; justify-content: center; } .footer-signup .signup-form .footer-signup-btn .icon { width: 1.2rem; height: 1.2rem; } /* The input and the button must read as ONE control pair: same compact height, same footprint. And a white field on a dark footer looks pasted-on — derive the field from the footer's OWN foreground (currentColor) so it adapts to a light OR dark footer automatically instead of punching a bright white box into the band. */ .footer-signup .signup-form :is(input, .btn, button) { height: 2.6rem; padding: 0 .8rem; font-size: .9rem; line-height: 1; } .footer-signup .signup-form input { width: 100%; /* !important to beat the high-specificity global `input:not(…)…` baseline (six attribute :not()s) — without it a solid white field punches through a dark footer. currentColor = the footer's own text, so this adapts to any footer. */ background: color-mix(in srgb, currentColor 8%, transparent) !important; border: 1px solid color-mix(in srgb, currentColor 28%, transparent) !important; color: inherit !important; } .footer-signup .signup-form input::placeholder { color: color-mix(in srgb, currentColor 55%, transparent); } .footer-signup .signup-form .btn { flex: 0 0 auto; display: inline-flex; align-items: center; } .footer-col-title { font-family: var(--font-heading, inherit); font-weight: 700; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text, #1a1a1a); text-decoration: none; } .footer-col a { color: var(--color-muted, #888); text-decoration: none; font-size: .95rem; } .footer-col a:hover, .footer-col-title:hover { color: var(--color-primary, #0066cc); } /* A footer column with sub-links reads as a titled column (the header treatment above is right). But when a column is JUST its own link — no children — the bold uppercase title looks like a header for nothing. Detect the no-children case (only one anchor in the column) and render that title as a plain inline link. */ .footer-col:not(:has(> a + a)) .footer-col-title { font-family: inherit; font-weight: 500; font-size: .95rem; letter-spacing: 0; text-transform: none; color: var(--color-muted, #888); } /* When the WHOLE menu is a flat list (no column has sub-links), it's a link row, not a set of columns — tighten the big inter-column gap so it reads as inline links. */ .footer-nav:not(:has(.footer-col > a + a)) { gap: .5rem 1.6rem; } /* Bottom tier: copyright + legal links, divided from the sitemap above. */ .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space); max-width: var(--container); margin: calc(var(--space) * 2) auto 0; padding-top: calc(var(--space) * 1.5); padding-inline: calc(var(--space) * 1.5); border-top: 1px solid var(--border, rgba(0, 0, 0, .08)); font-size: .9rem; } .footer-legal { display: flex; flex-wrap: wrap; gap: var(--space); } .footer-legal a { color: var(--color-muted, #888); text-decoration: none; } .footer-legal a:hover { color: var(--color-primary, #0066cc); text-decoration: underline; } /* --- Layout primitives -------------------------------------------------- */ /* main is a FULL-WIDTH flow of sections. Width is capped by the .container INSIDE each section — so a section's background color or hero PHOTO bleeds edge to edge while its text stays aligned to the page column. (Previously main itself capped the width, which boxed every hero photo into a centered 1080px band and forced the tone bands to fake full-bleed with a width:100vw hack.) */ main { width: 100%; } /* Safety net: bare content dropped STRAIGHT into
(a simple legal/prose page with no wrapping .container or .section) still reads as a centered, capped, padded column. Zero specificity via :where(), so a real .container / .prose / style.css rule inside always wins; full-bleed sections opt out by class. */ main > :where(:not(.section):not([class*="section-"]):not(.hero):not(.bleed):not(.cta)) { max-width: var(--container); margin-inline: auto; padding-inline: var(--space); } .container { width: 100%; max-width: var(--container); margin-inline: auto; /* A little more gutter on wide viewports than the base unit. */ padding-inline: clamp(var(--space), 3vw, calc(var(--space) * 1.75)); } /* Vertical section rhythm — fluid, so sections feel generous on desktop and tighten on phones instead of one flat value at every width. */ .section { padding-block: clamp(calc(var(--space) * 2.25), 5.5vw, calc(var(--space) * 4.5)); } /* Even vertical spacing between stacked children (no margins to hand-tune). */ .stack > * + * { margin-top: var(--space); } /* Responsive auto-fit grid — wraps columns without media queries. */ .grid { display: grid; gap: var(--space); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); } /* Full-bleed band: breaks out of the centered column to span the viewport. */ .bleed { width: 100vw; margin-inline: calc(50% - 50vw); padding-inline: var(--space); } /* --- Components ---------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: .5em; padding: 0.7em 1.35em; border: 0; border-radius: var(--radius); background: var(--color-primary, #0066cc); /* Readable on the brand color whether it's dark or light (derived in ). */ color: var(--color-on-primary, #fff); /* A little presence: a contact shadow so a primary CTA sits ABOVE the page instead of reading as a flat rectangle. Grows on hover, presses on click. */ box-shadow: var(--shadow-sm); font: inherit; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; } .btn:hover { filter: brightness(0.96); box-shadow: var(--shadow); transform: translateY(-1px); } .btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); filter: brightness(0.92); } /* A larger, more prominent CTA for the hero's primary action. */ .btn-lg { padding: 0.9em 1.75em; font-size: 1.05rem; } /* A normal button label + its trailing icon shouldn't break across lines, but an over-long label (a whole sentence dropped into a CTA, a modal-open shortcode) must NOT run off the page edge and force horizontal scroll. Cap the width to the available space and let a genuinely long label wrap inside it — flex items are content-sized, so ordinary short buttons still sit on one line. */ .btn, .btn-outline { max-width: 100%; overflow-wrap: break-word; } /* .btn-outline is a COMPLETE button on its own (it carries the same box as .btn — display/padding/radius/line-height — so `class="btn-outline"` used ALONE is not a squished run of text with a tight outline). It only swaps the fill for a 2px inset outline. A site's style.css restyles the look; the box stays. */ .btn-outline { display: inline-flex; align-items: center; gap: .5em; padding: 0.7em 1.35em; border: 1px solid currentColor; border-radius: var(--radius); background: transparent; color: var(--color-primary, #0066cc); font: inherit; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; } .btn-outline:hover { transform: translateY(-1px); } .card { padding: calc(var(--space) * 1.4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--color-background, #fff); box-shadow: var(--shadow); } /* Card-as-link: a common pattern is to make a whole card a single so the entire tile is clickable. Left alone, the anchor turns every line inside it (heading, excerpt, meta) into underlined link-colored text — the "everything is a link" look. Neutralize that: the card reads as normal content, lifts on hover to signal it's clickable, and its heading takes the brand color on hover. Any real .link-underline / .btn inside keeps its own affordance. */ a.card { text-decoration: none; color: var(--color-text, inherit); display: block; } a.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg, 0 12px 30px rgba(0, 0, 0, .12)); } a.card :is(h1, h2, h3, h4) { color: var(--color-text, inherit); transition: color .15s ease; } a.card:hover :is(h1, h2, h3, h4) { color: var(--color-primary, #0066cc); } a.card :is(p, li, .post-meta, time, small) { color: var(--color-muted, #555); text-decoration: none; } a.card .link-underline { color: var(--color-primary, #0066cc); } a.card:hover .link-underline { background-size: 100% 2px; } /* Text over a photo — the sanctioned way to keep hero/banner copy readable. Put .scrim on the element whose background-image is the photo; it lays a dark gradient between the image and the text and forces white text + a soft shadow. Don't hand-roll text-on-image without this — that's where contrast breaks. */ .scrim { position: relative; color: #fff; background-size: cover; background-position: center; } .scrim::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .6)); z-index: 0; } .scrim > * { position: relative; z-index: 1; } .scrim :is(h1, h2, h3, h4, p) { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); } /* Text-on-photo owns its OWN foreground contract: EVERY foreground element on a scrim (or a background-photo band) reads white — not just headings/paragraphs. Without this, a per-site skin that hand-colors a .btn-outline / .eyebrow / link (e.g. to the brand blue) leaves it low-contrast on the dark photo — the "invisible hero button" bug. The surface owns their color here, so the skin never has to (and shouldn't). Higher specificity than a bare `.btn-outline{}` skin rule, so it wins by construction. Primary `.btn` is left alone — a solid fill is contrast-safe on any background via --color-on-primary. */ :is(.scrim, [data-options~="background-photo"]) { --border: color-mix(in srgb, #fff 30%, transparent); } :is(.scrim, [data-options~="background-photo"]) :is(.lede, .stat-label, li) { color: color-mix(in srgb, #fff 88%, transparent); } :is(.scrim, [data-options~="background-photo"]) .eyebrow { color: #fff; } :is(.scrim, [data-options~="background-photo"]) :is(a:not(.btn):not(.btn-outline), .link-underline) { color: #fff; } /* A plain text link (e.g. a phone number) on a colored/dark band must inherit the band's readable foreground, not stay its brand link-color — otherwise it's a faint blue-on-blue link. Buttons keep their own on-band treatment. */ :is(.cta, .section-invert, [data-options~="background-primary"], [data-options~="background-accent"], [data-options~="background-contrast"], [data-options~="background-gradient"]) :is(a:not(.btn):not(.btn-outline), .link-underline) { color: inherit; } :is(.scrim, [data-options~="background-photo"]) .btn-outline { color: #fff; border-color: #fff; background: transparent; } /* ====================================================================== SECTION PRIMITIVES — a vocabulary of full, production-ready sections. Compose pages from these instead of hand-rolling section layout; they read the same Theme tokens, so they look intentional under ANY palette/ token set and hold up on mobile with no extra CSS. A site's style.css adds brand flavor ON TOP; these guarantee a high floor (no flat columns, no broken grids). Class reference lives in GUIDE.md. ====================================================================== */ /* --- Typographic helpers ------------------------------------------------ */ /* Small uppercase kicker above a heading. */ .eyebrow { display: inline-block; margin: 0 0 .5em; font-family: var(--font-body, inherit); font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; /* Accent as small text → the WCAG-nudged accent token (falls back to raw accent on older templates that don't emit it). */ color: var(--color-accent-text, var(--color-accent, var(--color-primary, #0066cc))); } /* Oversized hero headline — fluid, tight leading, slight negative tracking. */ .display { font-size: clamp(2.2rem, 1.4rem + 3.6vw, calc(1rem * var(--font-scale) * var(--font-scale) * var(--font-scale) * 1.15)); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 .3em; } /* Intro paragraph — larger, calmer, capped measure. */ .lede { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); line-height: 1.5; color: var(--color-muted, #555); max-width: 60ch; } /* Long-form rich text: comfortable measure + vertical rhythm for CMS/markdown. */ .prose { max-width: 68ch; } .prose > * + * { margin-top: 1em; } .prose :is(h2, h3) { margin-top: 1.6em; } .prose img { max-width: 100%; height: auto; border-radius: var(--radius); } /* Restore native list affordances the global reset strips — long-form content needs bullets/numbers and indent back. */ .prose :is(ul, ol) { list-style: revert; padding-left: 1.5em; } .prose li + li { margin-top: .35em; } /* Blog post: center the reading column with a gutter; any full-width band the post adds below (e.g. the "Related posts" section) still spans the post's
. */ .blog-post > .prose { margin-inline: auto; padding-inline: 1.5rem; } /* Share row (cms_share_html) — a line of icon pills under the article + a copy button with a "Copied" tooltip that main.js toggles. */ .share { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin-top: calc(var(--space) * 2); padding-top: calc(var(--space) * 1.25); border-top: 1px solid var(--border); } .share-label { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--color-muted, #667); margin-right: .2rem; } /* Works for both the network links and the copy