══════════════════════════════════════════════════════════════ */
/* Component tokens — light defaults */
.trust-strip {
--ts-bg: var(--c-white);
--ts-line: var(--c-border);
--ts-text: var(--c-text);
--ts-muted: var(--c-muted);
--ts-icon: var(--c-primary);
--ts-chip-bg: var(--c-bg);
--ts-hv: var(--c-mint);
--ts-pipe: var(--c-border);
width: 100%;
padding: 2.25rem 1.5rem;
background: var(--ts-bg);
border-top: 1px solid var(--ts-line);
border-bottom: 1px solid var(--ts-line);
}
/* Component tokens — dark overrides */
.trust-strip.dark {
--ts-bg: var(--c-dark);
--ts-line: rgba(82,183,136,.13);
--ts-text: rgba(255,255,255,.85);
--ts-muted: rgba(255,255,255,.42);
--ts-icon: var(--c-accent);
--ts-chip-bg: rgba(255,255,255,.04);
--ts-hv: rgba(82,183,136,.08);
--ts-pipe: rgba(255,255,255,.15);
}
.ts-inner {
max-width: 1040px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1.625rem;
}
/* ── Row 1: speed badge + reviews ── */
.ts-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: wrap;
}
.ts-speed {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.3rem 0.875rem 0.3rem 0.5rem;
background: var(--c-mint);
border: 1.5px solid var(--c-accent);
border-radius: 999px;
font-size: 12px;
font-weight: 600;
color: var(--c-primary);
letter-spacing: 0.01em;
white-space: nowrap;
}
.trust-strip.dark .ts-speed {
background: rgba(82,183,136,.1);
border-color: rgba(82,183,136,.35);
color: var(--c-accent);
}
.ts-speed svg { width: 13px; height: 13px; flex-shrink: 0; }
.ts-reviews {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 12.5px;
}
.ts-stars { color: #F5A623; font-size: 12px; letter-spacing: .5px; }
.ts-score { font-weight: 700; font-size: 13.5px; color: var(--ts-text); }
.ts-pipe { color: var(--ts-pipe); }
.ts-rcount { color: var(--ts-muted); }
/* ── Row 2: trust badges ── */
.ts-badges {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: nowrap;
}
.ts-badge {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.5rem 1.125rem;
font-size: 12.5px;
font-weight: 500;
color: var(--ts-text);
white-space: nowrap;
border-right: 1px solid var(--ts-line);
transition: background .15s;
cursor: default;
user-select: none;
}
.ts-badge:first-child { border-left: 1px solid var(--ts-line); }
.ts-badge:hover { background: var(--ts-hv); }
.ts-badge svg {
width: 15px; height: 15px;
flex-shrink: 0;
color: var(--ts-icon);
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.ts-badge svg.is-gold { color: var(--c-gold); }
/* ── Row 3: testimonial carousel (CSS-grid stack) ── */
.ts-carousel { display: grid; }
.ts-chip {
grid-area: 1 / 1;
display: flex;
align-items: flex-start;
gap: 0.5rem;
padding: 0.625rem 0.875rem;
background: var(--ts-chip-bg);
border: 1px solid var(--ts-line);
border-radius: 10px;
opacity: 0;
transition: opacity .65s ease;
pointer-events: none;
}
.ts-chip.active { opacity: 1; pointer-events: auto; }
.ts-chip-q {
font-size: 20px;
line-height: 1;
color: var(--c-accent);
flex-shrink: 0;
margin-top: 2px;
}
.ts-chip-body {
flex: 1;
font-size: 13px;
line-height: 1.55;
color: var(--ts-text);
}
.ts-chip-stars {
color: #F5A623;
font-size: 11px;
display: block;
margin-bottom: 2px;
}
.ts-chip-author {
display: block;
margin-top: 4px;
font-size: 11.5px;
font-weight: 600;
color: var(--ts-muted);
letter-spacing: .02em;
}
/* ── Responsive ── */
@media (max-width: 800px) {
.ts-badges { flex-wrap: wrap; justify-content: flex-start; }
.ts-badge { padding: .45rem .75rem; font-size: 12px; }
}
@media (max-width: 540px) {
.ts-top { flex-direction: column; align-items: flex-start; gap: .5rem; }
.ts-badges {
display: grid;
grid-template-columns: 1fr 1fr;
width: 100%;
border: 1px solid var(--ts-line);
border-radius: 8px;
overflow: hidden;
}
.ts-badge {
border: none;
border-bottom: 1px solid var(--ts-line);
border-right: none;
padding: .5rem .625rem;
}
.ts-badge:first-child { border-left: none; }
.ts-badge:nth-child(odd) { border-right: 1px solid var(--ts-line); }
.ts-badge:last-child { border-bottom: none; }
/* if 5 badges: 5th is odd, in its own row — remove its border-bottom */
.ts-badge:nth-last-child(1):nth-child(odd) { border-bottom: none; }
/* and the 4th (even, second-to-last row) also loses its border-bottom */
.ts-badge:nth-last-child(2):nth-child(even) { border-bottom: none; }
}
@media (max-width: 360px) {
.ts-badges { grid-template-columns: 1fr; }
.ts-badge:nth-child(odd) { border-right: none; }
}
Light variant — white / off-white landing page
Get a quote in 60 seconds
★★★★★
4.9
·
127 Google reviews
"
★★★★★
Quoted my gutter job in under a minute. Team showed up on time, work was clean. Boston crew, no games.
— Maria L., Somerville MA
"
★★★★★
Spoke with someone in Spanish — huge relief. Pricing was clear and fair. Will use again this spring.
— Carlos R., East Boston MA
"
★★★★★
Fully licensed, showed proof on request. The quote matched the invoice exactly. That's rare these days.
— Janet K., Newton MA
Dark variant — #0F1A0F CTA band
Get a quote in 60 seconds
★★★★★
4.9
·
127 Google reviews
"
★★★★★
Quoted my gutter job in under a minute. Team showed up on time, work was clean. Boston crew, no games.
— Maria L., Somerville MA
"
★★★★★
Spoke with someone in Spanish — huge relief. Pricing was clear and fair. Will use again this spring.
— Carlos R., East Boston MA
"
★★★★★
Fully licensed, showed proof on request. The quote matched the invoice exactly. That's rare these days.
— Janet K., Newton MA