/* ==========================================================================
trust-layer.css — Van Thats Quick trust & proof layer
--------------------------------------------------------------------------
Owner: rebuild Agent 3 (trust / proof). Injected by add-trust-layer.js.
Link it as:
...after /css/vtq-components.css, whose --vtq-* tokens this file consumes
and whose .vtq-trustbar / .vtq-rating / .vtq-process components it reuses
rather than re-implements. This file never defines a .vtq-trustbar,
.vtq-rating, .vtq-process, .vtq-ladder, .vtq-q or .vtq-lf selector, so it
cannot collide with Agent 1's layer or with lead-form.css.
WHY A SEPARATE FILE AND NOT TAILWIND UTILITIES
Verbatim from vtq-components.css, and it applies identically here:
`npm run build:css` purges against ./**\/*.html, so a component that only
exists inside an injection script is invisible to the purge until the
script has run — a Tailwind-only band silently loses its classes on the
next rebuild. Everything structural is therefore real CSS.
⛔ COPY CONSTRAINT that produced this component set: VTQ holds NO
Environment Agency waste-carrier registration. Nothing styled here may say
or imply "licensed waste carrier", "registered waste carrier" or "EA
registered". The bands exist to make the TRUE things land harder than a
licence number does — fixed price, no deposit, real job photos, and an
honest account of where the waste actually goes.
RESPONSIVE
Verified at 390 / 834 / 1024 / 1440. Every multi-column block is
grid + minmax() sized off its CONTAINER, never a flex-basis: a
`flex: 1 1 380px` becomes a 380px minimum HEIGHT the moment the container
flips to `column`, which is the documented trap in the brief.
DARK MODE
Class-based (.dark on ), light-first with a .dark override on every
surface, matching vtq-components.css.
========================================================================== */
/* --------------------------------------------------------------------------
Band shell
-------------------------------------------------------------------------- */
.vtq-tl,
.vtq-tl * {
box-sizing: border-box;
}
.vtq-tl {
container-type: inline-size;
container-name: vtqtl;
width: 100%;
min-width: 0;
padding: 40px 16px;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
color: var(--vtq-ink-muted);
}
.vtq-tl--tint {
background: var(--vtq-surface-subtle);
}
.vtq-tl__inner {
max-width: 1120px;
margin: 0 auto;
min-width: 0;
}
/* The trust bar band is a strip, not a section — it gets far less air. */
.vtq-tl--strip {
padding: 20px 16px 4px;
}
.vtq-tl__head {
max-width: 60ch;
margin: 0 0 24px;
}
.vtq-tl__head--center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.vtq-tl__eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0 0 10px;
padding: 5px 12px;
border-radius: var(--vtq-r-pill);
background: var(--vtq-accent-soft);
color: var(--vtq-accent-deep);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1;
}
.vtq-tl__title {
margin: 0 0 10px;
font-size: 24px;
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--vtq-ink);
}
.vtq-tl__intro {
margin: 0;
font-size: 15px;
line-height: 1.6;
color: var(--vtq-ink-muted);
}
.vtq-tl__intro + .vtq-tl__intro {
margin-top: 10px;
}
@container vtqtl (min-width: 700px) {
.vtq-tl {
padding: 56px 24px;
}
.vtq-tl--strip {
padding: 24px 24px 4px;
}
.vtq-tl__title {
font-size: 30px;
}
.vtq-tl__intro {
font-size: 16px;
}
}
@container vtqtl (min-width: 1100px) {
.vtq-tl {
padding: 68px 24px;
}
.vtq-tl--strip {
padding: 28px 24px 4px;
}
}
/* --------------------------------------------------------------------------
Linked trust-bar row.
Agent 1's contract defines both `.vtq-trustbar__item` and the interactive
`a.vtq-trustbar__item`, but .vtq-trustbar is a grid whose children are the
s — so a linked proof point needs the
reduced to a bare cell and
the anchor promoted to the item. This adds no rule to any .vtq-trustbar__*
selector; it only neutralises the list item wrapping one.
SEAM: worth folding into vtq-components.css as a first-class
`.vtq-trustbar__item--link` if Agent 1 wants it. Noted in the report.
-------------------------------------------------------------------------- */
.vtq-tl-bar-link {
display: grid;
margin: 0;
min-width: 0;
}
/* --------------------------------------------------------------------------
Honesty note — the callout that carries an admission rather than a claim.
Deliberately quiet: it earns trust by being unshowy.
-------------------------------------------------------------------------- */
.vtq-tl-note {
display: grid;
grid-template-columns: 22px minmax(0, 1fr);
gap: 12px;
align-items: start;
margin: 24px 0 0;
padding: 16px 18px;
border: 1px solid var(--vtq-border);
border-left: 3px solid var(--vtq-accent-strong);
border-radius: var(--vtq-r-card);
background: var(--vtq-surface);
}
.vtq-tl-note__icon {
color: var(--vtq-accent-deep);
font-size: 20px !important;
line-height: 1.4;
}
.vtq-tl-note__body {
margin: 0;
font-size: 14px;
line-height: 1.65;
color: var(--vtq-ink-muted);
min-width: 0;
}
.vtq-tl-note__body strong {
color: var(--vtq-ink);
font-weight: 700;
}
/* --------------------------------------------------------------------------
Included / not included — the surprise-bill killer
-------------------------------------------------------------------------- */
.vtq-tl-split {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
gap: 16px;
align-items: start;
}
.vtq-tl-col {
min-width: 0;
padding: 22px 20px;
border: 1px solid var(--vtq-border);
border-radius: var(--vtq-r-card);
background: var(--vtq-surface);
box-shadow: var(--vtq-shadow-card);
}
.vtq-tl-col__title {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 4px;
font-size: 16px;
font-weight: 700;
line-height: 1.3;
color: var(--vtq-ink);
}
.vtq-tl-col__sub {
margin: 0 0 16px;
font-size: 13px;
line-height: 1.5;
color: var(--vtq-ink-faint);
}
.vtq-tl-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 10px;
}
.vtq-tl-list__item {
display: grid;
grid-template-columns: 20px minmax(0, 1fr);
gap: 10px;
align-items: start;
margin: 0;
font-size: 14px;
line-height: 1.55;
color: var(--vtq-ink-muted);
}
.vtq-tl-list__item strong {
color: var(--vtq-ink);
font-weight: 600;
}
.vtq-tl-list__icon {
font-size: 18px !important;
line-height: 1.35;
}
.vtq-tl-col--yes .vtq-tl-list__icon {
color: var(--vtq-success);
}
.vtq-tl-col--no .vtq-tl-list__icon {
color: var(--vtq-ink-faint);
}
/* --------------------------------------------------------------------------
Waste journey — reuses .vtq-process for the steps, adds the material
streams strip underneath.
-------------------------------------------------------------------------- */
.vtq-tl-streams {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 24px 0 0;
padding: 0;
list-style: none;
}
.vtq-tl-streams__item {
display: inline-flex;
align-items: center;
gap: 7px;
margin: 0;
padding: 8px 14px;
border: 1px solid var(--vtq-border);
border-radius: var(--vtq-r-pill);
background: var(--vtq-surface);
font-size: 13px;
font-weight: 600;
color: var(--vtq-ink);
line-height: 1.2;
}
.vtq-tl-streams__icon {
font-size: 16px !important;
color: var(--vtq-accent-deep);
line-height: 1;
}
/* --------------------------------------------------------------------------
⚠️ SEAM — scoped workaround for .vtq-process at >=1024px.
Agent 1's .vtq-process__step is `padding-left: 46px` with the number
absolutely positioned at top:0, so the title sits on the SAME line as the
number. At >=1024px the --4 modifier then draws its horizontal connector at
`top: 15px` spanning the full track — which is the vertical centre of that
same line, so the rule renders as a strike-through across every step title.
Confirmed visually at 1024px and 1440px.
Fix here is scoped to `.vtq-tl` so it changes nothing anywhere else: drop
the left inset and move the title BELOW the number, which is the horizontal
stepper the connector was clearly designed for. The connector geometry is
left exactly as Agent 1 authored it.
This belongs upstream in vtq-components.css — it is reported to the
orchestrator for Agent 1 rather than edited into their file directly.
-------------------------------------------------------------------------- */
@media (min-width: 1024px) {
.vtq-tl .vtq-process--4 .vtq-process__step {
padding-left: 0;
padding-top: 46px;
}
}
/* --------------------------------------------------------------------------
Proof band — real job photos and real ratings
-------------------------------------------------------------------------- */
.vtq-tl-ratings {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 28px;
margin: 0 0 24px;
}
.vtq-tl__head--center .vtq-tl-ratings {
justify-content: center;
}
.vtq-tl-cases {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
gap: 16px;
}
.vtq-tl-case {
display: grid;
grid-template-rows: auto minmax(0, 1fr);
min-width: 0;
overflow: hidden;
border: 1px solid var(--vtq-border);
border-radius: var(--vtq-r-card);
background: var(--vtq-surface);
box-shadow: var(--vtq-shadow-card);
text-decoration: none;
color: inherit;
transition: box-shadow var(--vtq-dur-quick) var(--vtq-ease-out),
transform var(--vtq-dur-quick) var(--vtq-ease-out);
}
.vtq-tl-case:hover {
box-shadow: var(--vtq-shadow-card-hover);
transform: translateY(-2px);
}
.vtq-tl-case:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--vtq-accent-ring), var(--vtq-shadow-card-hover);
}
.vtq-tl-case__media {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--vtq-surface-hover);
}
.vtq-tl-case__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.vtq-tl-case__tag {
position: absolute;
left: 10px;
top: 10px;
padding: 4px 10px;
border-radius: var(--vtq-r-pill);
background: rgba(17, 24, 39, 0.78);
color: #ffffff;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
line-height: 1.4;
backdrop-filter: blur(4px);
}
.vtq-tl-case__body {
display: flex;
flex-direction: column;
gap: 6px;
padding: 16px 18px 18px;
min-width: 0;
}
.vtq-tl-case__title {
margin: 0;
font-size: 15px;
font-weight: 700;
line-height: 1.35;
color: var(--vtq-ink);
}
.vtq-tl-case__desc {
margin: 0;
font-size: 13px;
line-height: 1.55;
color: var(--vtq-ink-muted);
}
.vtq-tl-case__more {
margin: 4px 0 0;
/* the card is the tap target; this is the affordance, so it carries the
floor itself only when it is the interactive element. */
min-height: 20px;
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 13px;
font-weight: 700;
color: var(--vtq-accent-deep);
}
/* --------------------------------------------------------------------------
Motion — matches the page's existing .fade-up rhythm without depending on
whether that page's observer script ran.
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.vtq-tl-case,
.vtq-tl-case:hover {
transition: none;
transform: none;
}
}
/* --------------------------------------------------------------------------
Dark overrides. Tokens already flip; only the hard-coded photo tag and the
tinted band need their own rule.
-------------------------------------------------------------------------- */
.dark .vtq-tl-case__tag {
background: rgba(0, 0, 0, 0.72);
}