/* ========================================================================== vtq-components.css — Van Thats Quick shared component layer -------------------------------------------------------------------------- Owner: rebuild Agent 1 (design system). Consumed by the injection scripts the other agents own. Link it as: ...after /css/output.css so these rules win over Tailwind utilities of the same specificity, and alongside /css/lead-form.css (they do not collide: this file never touches a .vtq-lf-* selector). WHY PLAIN CSS, NOT TAILWIND `npm run build:css` purges against ./**\/*.html. Components injected by a JS script are invisible to that purge until the script has run, so a Tailwind-only component silently loses its classes on the next rebuild. The same reasoning is written at the top of lead-form.css. Follow it. TOKENS The --vtq-* layer below takes its STRUCTURE from lead-form.css (Soft Product 8/16/pill radii, named motion curves, the same lime) but its INK AND SURFACE VALUES from the Tailwind grey ladder the 253 live pages actually render: gray-900 headings, gray-500 body, gray-400 faint, gray-200 borders, gray-800 dark surfaces. lead-form.css uses a warmer neutral ramp (#292929/#5d5d5d) scoped to .vtq-lf. Matching Tailwind rather than the form is deliberate: every component in this file gets injected INTO a Tailwind page and sits inches from that page's own headings. A band with its own grey is exactly the bolt-on look this rebuild exists to remove. The remaining delta between .vtq-lf and this file is logged as a follow-up in docs/rebuild/DESIGN-LANGUAGE.md — it is not something to fix mid-rebuild. Do not invent new raw hex in a component — add a token here. DARK MODE Class-based (.dark on ), per tailwind.config.js darkMode:"class". As shipped, 253 of 259 pages have no element that applies it — see docs/rebuild/DESIGN-LANGUAGE.md. Every component here is authored light-first and carries a .dark override so it stays correct if and when a real toggle lands. RESPONSIVE Verified at 390 / 834 / 1024 / 1440. Components size off their CONTAINER (container queries) not the viewport, because the same component renders full-bleed in a band and ~380px inside a hero column. No component uses a flex-basis for column sizing: `flex: 1 1 380px` turns that basis into a minimum HEIGHT the moment a media query flips the container to `column`. Grid + minmax() has no such failure mode, so everything here uses grid. ========================================================================== */ :root { /* --- ink ladder: Tailwind gray-900 / 500 / 400, as the live pages use --- RULE: --vtq-ink-faint is #9ca3af, which measures 2.54:1 on white and so FAILS WCAG AA (4.5:1) for body text. It is therefore reserved for non-informational pixels only — icons, inactive step dots, placeholders, decorative rules. Any text a customer needs to READ uses --vtq-ink-muted (#6b7280, 4.83:1 on white). The live pages use text-gray-400 for real fine print; this file deliberately does not. */ --vtq-ink: #111827; --vtq-ink-muted: #6b7280; --vtq-ink-faint: #9ca3af; /* --- surfaces: white card on gray-50 tint, gray-200/300 rules --- */ --vtq-surface: #ffffff; --vtq-surface-subtle: #f9fafb; --vtq-surface-hover: #f3f4f6; --vtq-border: #e5e7eb; --vtq-border-strong: #d1d5db; /* --- VTQ lime --- */ --vtq-accent: #a3e635; --vtq-accent-strong: #84cc16; --vtq-accent-deep: #4d7c0f; --vtq-accent-ink: #1a2e05; --vtq-accent-soft: #f2fbe3; --vtq-accent-ring: rgba(163, 230, 53, 0.45); --vtq-success: #22c55e; --vtq-danger: #dc2626; --vtq-star: #fbbc04; /* --- radii: 8 control / 16 card / 24 shell / pill --- */ --vtq-r-ctl: 8px; --vtq-r-card: 16px; --vtq-r-shell: 24px; --vtq-r-pill: 9999px; /* --- elevation --- card / card-hover are copied EXACTLY from tailwind.config.js so a component sits at the same height as the Tailwind `shadow-card` cards it is placed beside. float/lift are for objects that are meant to sit above the page (the quote widget), not among it. */ --vtq-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06); --vtq-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.08), 0 12px 40px rgba(0, 0, 0, 0.12); --vtq-shadow-soft: 0 20px 40px -10px rgba(0, 0, 0, 0.08); --vtq-shadow-float: 0 30px 60px -15px rgba(0, 0, 0, 0.12); --vtq-shadow-glow: 0 0 30px rgba(163, 230, 53, 0.4); /* --- motion: named curves only, never invented per component --- */ --vtq-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --vtq-ease-in: cubic-bezier(0.4, 0, 1, 1); --vtq-dur-instant: 150ms; --vtq-dur-quick: 200ms; --vtq-dur-enter: 340ms; --vtq-stagger: 26ms; /* --- the one hard accessibility number in this file --- */ --vtq-tap: 44px; } /* Dark surfaces are gray-800/gray-700, NOT the surface-dark #171717 token. #171717 is used on exactly one element sitewide (the
shell); every dark CARD on every page is dark:bg-gray-800. Matching the cards is what makes these components disappear into the page. */ .dark { --vtq-ink: #ffffff; --vtq-ink-muted: #9ca3af; --vtq-ink-faint: #6b7280; --vtq-surface: #1f2937; --vtq-surface-subtle: #111827; --vtq-surface-hover: #374151; --vtq-border: #374151; --vtq-border-strong: #4b5563; --vtq-accent-deep: #bef264; --vtq-accent-soft: rgba(163, 230, 53, 0.10); --vtq-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.4); --vtq-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.4), 0 12px 40px rgba(0, 0, 0, 0.5); --vtq-shadow-soft: 0 20px 40px -10px rgba(0, 0, 0, 0.5); --vtq-shadow-float: 0 30px 60px -15px rgba(0, 0, 0, 0.6); } /* -------------------------------------------------------------------------- Shared primitives -------------------------------------------------------------------------- */ /* Every component root opts into border-box for its subtree so a Tailwind page and an injected component agree on what `padding` means. */ .vtq-ladder *, .vtq-trustbar *, .vtq-rating *, .vtq-q *, .vtq-process * { box-sizing: border-box; } .vtq-ladder, .vtq-trustbar, .vtq-rating, .vtq-q, .vtq-process { font-family: Inter, "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: -0.15px; color: var(--vtq-ink); -webkit-font-smoothing: antialiased; } /* Section eyebrow + heading, so every band this file introduces shares one rhythm rather than each agent picking their own Tailwind heading string. */ .vtq-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vtq-accent-deep); margin: 0 0 10px; } .vtq-band-title { font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--vtq-ink); margin: 0 0 8px; } .vtq-band-sub { font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem); line-height: 1.55; color: var(--vtq-ink-muted); margin: 0 0 24px; max-width: 62ch; } /* -------------------------------------------------------------------------- Band wrappers — the canonical section rhythm, so five agents do not each pick their own Tailwind padding string. These are exact equivalents of the dominant live pattern:
->
->
Either spelling is fine; do not mix them within one band. -------------------------------------------------------------------------- */ .vtq-band { padding: 3rem 1.5rem; } @media (min-width: 768px) { .vtq-band { padding-left: 3rem; padding-right: 3rem; } } /* The alternating tint, == bg-gray-50 dark:bg-gray-900/50 */ .vtq-band--tint { background: var(--vtq-surface-subtle); } .vtq-band__inner { max-width: 72rem; /* == max-w-6xl */ margin-inline: auto; min-width: 0; } .vtq-band__inner--prose { max-width: 48rem; /* == max-w-3xl */ } /* -------------------------------------------------------------------------- .fade-up SAFETY — do not remove. Every page ships `.fade-up { opacity: 0; transform: translateY(12px) }` in an inline