/* =============================================================
Spire Print Connect x Klaviyo — brochure web page
spire-klaviyo-brochure.css
Pairs with the HTML build whose ![]()
tags carry the brochure's
actual artwork as base64 data URLs. The sizing classes below use
each image's real aspect ratio, so nothing is letterboxed and
nothing shifts while the page loads. The same classes work if you
switch to file-based 
.
Scoped under .skb-root so nothing leaks into the surrounding
Orchard Core theme, and theme resets are less likely to fight it.
FONT STACKS — the print piece is set in Gotham (licensed, not on
Google Fonts). Montserrat stands in for headings, Inter for body.
With an Adobe Fonts kit for Gotham loaded in the page ,
change the two variables below to: "gotham",
The SVG artwork inherits these, so type inside the illustrations
changes with them.
============================================================= */
.skb-root {
/* ---- Type ---- */
--skb-font-head: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
--skb-font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
/* ---- Brand palette, sampled from the printed brochure ---- */
--skb-navy: #0b2436;
--skb-navy-2: #12374f;
--skb-teal: #2f9187;
--skb-teal-dark: #21665f;
--skb-teal-light: #7fd9cb;
--skb-cream: #f4efe4;
--skb-white: #ffffff;
--skb-ink: #17222c;
--skb-muted: #59646d;
--skb-border: #e3dcca;
--skb-print: #fdece1;
--skb-print-border: #f0c4a2;
/* ---- Layout ---- */
--skb-maxw: 1120px;
--skb-radius: 14px;
--skb-nav-h: 66px;
font-family: var(--skb-font-body);
font-size: 16px;
line-height: 1.55;
color: var(--skb-ink);
background: var(--skb-white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Scoped reset */
.skb-root *,
.skb-root *::before,
.skb-root *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Element resets wrapped in :where() so they carry ZERO specificity.
Without it, `.skb-root a { color: inherit }` (0,1,1) would outrank
component classes like `.skb-cta` (0,1,0) and silently strip their
colors, borders and list markers. */
.skb-root :where(ul, ol, dl) { list-style: none; }
.skb-root :where(a) { color: inherit; text-decoration: none; }
.skb-root :where(img, svg) { display: block; max-width: 100%; }
.skb-root :where(button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.skb-root :where(figure, figcaption) { margin: 0; }
.skb-root h1, .skb-root h2, .skb-root h3 {
font-family: var(--skb-font-head);
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.01em;
}
.skb-container {
width: 100%;
max-width: var(--skb-maxw);
margin-inline: auto;
padding-inline: 24px;
}
.skb-visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
.skb-root :focus-visible {
outline: 3px solid var(--skb-teal);
outline-offset: 2px;
border-radius: 4px;
}
/* =============================================================
ARTWORK SIZING — ratios are the images' own native ratios
============================================================= */
.skb-art { display: block; width: 100%; height: auto; }
/* hero: 1827x1898 native (the brochure places it essentially uncropped) */
.skb-art-hero {
aspect-ratio: 1827 / 1898;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 42%;
}
/* trigger photographs: 324x375 native, same crop the brochure uses */
.skb-art-trigger { aspect-ratio: 324 / 375; object-fit: cover; }
/* the remaining placements keep their natural proportions */
.skb-art-brochure { aspect-ratio: 560 / 809; max-width: 420px; margin-inline: auto; }
.skb-art-tablet { aspect-ratio: 820 / 772; }
.skb-art-mailbox { aspect-ratio: 780 / 356; border-radius: 8px; }
.skb-art-flow { aspect-ratio: 800 / 2546; width: 100%; border-radius: 6px; }
/* Icons and marks: PNGs with alpha, rendered from the brochure's
vector art. Sized in CSS; width/height in the HTML only reserve
space and set the intrinsic ratio. */
.skb-index-logo { width: 62px; height: auto; }
.skb-cover-logo { width: 84px; height: auto; }
.skb-footer-logo { width: 84px; height: auto; }
.skb-footer-mark { width: 54px; height: 54px; }
/* regenerated with transparent padding, so nothing clips */
.skb-trigger-icon { width: auto; height: 40px; }
.skb-loop-icon { width: 50px; height: 50px; }
.skb-timeline-dot { width: 42px; height: 42px; }
.skb-triptych-icon { width: auto; height: 40px; }
.skb-figure figcaption {
margin-top: 12px;
font-size: 12.5px;
color: var(--skb-muted);
text-align: center;
}
.skb-accordion--navy .skb-figure figcaption { color: rgba(255, 255, 255, 0.62); }
/* =============================================================
SECTION INDEX (the URLs at the top of the page)
============================================================= */
.skb-index {
position: sticky;
top: 0;
z-index: 40;
background: var(--skb-navy);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.skb-index-inner {
max-width: var(--skb-maxw);
margin-inline: auto;
padding: 10px 24px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px 18px;
}
.skb-index-brand { flex: 0 0 auto; color: #fff; }
.skb-index-logo { width: 74px; height: auto; }
.skb-index-list {
display: flex;
flex-wrap: wrap;
gap: 4px;
flex: 1 1 auto;
min-width: 0;
}
.skb-index-list a {
display: block;
padding: 7px 13px;
border-radius: 10px;
white-space: nowrap;
transition: background 0.15s ease;
}
.skb-index-list a:hover { background: rgba(255, 255, 255, 0.1); }
.skb-index-label {
display: block;
font-size: 13.5px;
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
line-height: 1.35;
}
.skb-index-list a[aria-current="true"] {
background: rgba(127, 217, 203, 0.16);
box-shadow: inset 0 0 0 1px rgba(127, 217, 203, 0.45);
}
.skb-index-actions { display: flex; gap: 8px; flex: 0 0 auto; margin-left: auto; }
/* Prefixed with .skb-root so they outrank the button reset */
.skb-root .skb-ghost-btn {
font-size: 12.5px;
font-weight: 600;
color: rgba(255, 255, 255, 0.82);
border: 1px solid rgba(255, 255, 255, 0.32);
border-radius: 999px;
padding: 7px 14px;
white-space: nowrap;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.skb-root .skb-ghost-btn:hover {
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.55);
color: #fff;
}
@media (max-width: 760px) {
.skb-index-inner { gap: 8px 12px; }
.skb-index-list {
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: thin;
order: 3;
flex-basis: 100%;
padding-bottom: 2px;
}
.skb-index-actions { margin-left: auto; }
}
/* =============================================================
COVER — brochure panel 1: dark copy column + full-bleed art
============================================================= */
.skb-cover {
scroll-margin-top: var(--skb-nav-h);
display: grid;
grid-template-columns: minmax(320px, 0.82fr) 1.18fr;
background: var(--skb-navy);
color: #fff;
}
.skb-cover-copy {
padding: 54px clamp(24px, 4vw, 54px) 58px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.skb-cover-logo { width: 84px; height: auto; color: #fff; margin-bottom: 40px; }
.skb-cover h1 {
font-size: clamp(28px, 3.4vw, 42px);
font-weight: 800;
margin-bottom: 26px;
}
.skb-cover h1 em { font-style: normal; color: var(--skb-teal-light); }
.skb-cover-rule {
display: block;
width: 54px;
height: 3px;
background: var(--skb-teal);
margin-bottom: 26px;
}
.skb-cover-lede { font-size: 17px; font-weight: 600; max-width: 34ch; }
.skb-cover-lede em { font-style: italic; color: var(--skb-teal-light); font-weight: 600; }
.skb-cover-note {
font-size: 15px;
color: rgba(255, 255, 255, 0.66);
max-width: 34ch;
margin-top: 16px;
}
.skb-cover-art { position: relative; min-height: 340px; }
.skb-cover-art .skb-art-hero { position: absolute; inset: 0; width: 100%; height: 100%; }
.skb-cta {
display: inline-block;
margin-top: 30px;
background: var(--skb-teal);
color: var(--skb-navy);
font-weight: 700;
font-size: 15px;
padding: 14px 28px;
border-radius: 999px;
transition: background 0.15s ease, transform 0.15s ease;
}
.skb-cta:hover { background: #43ad9f; transform: translateY(-1px); }
@media (max-width: 900px) {
.skb-cover { grid-template-columns: 1fr; }
.skb-cover-art { min-height: 260px; order: -1; }
.skb-cover-copy { padding: 40px 24px 46px; }
.skb-cover-logo { margin-bottom: 26px; }
}
/* =============================================================
ACCORDIONS
============================================================= */
.skb-accordion {
scroll-margin-top: var(--skb-nav-h);
border-bottom: 1px solid var(--skb-border);
background: var(--skb-white);
}
.skb-accordion--cream { background: var(--skb-cream); }
.skb-accordion--navy {
background: var(--skb-navy);
color: rgba(255, 255, 255, 0.92);
border-bottom-color: rgba(255, 255, 255, 0.12);
}
.skb-accordion-heading { margin: 0; }
.skb-accordion-trigger {
display: flex;
align-items: center;
gap: 18px;
width: 100%;
max-width: var(--skb-maxw);
margin-inline: auto;
padding: 26px 24px;
text-align: left;
}
.skb-accordion-title {
flex: 1 1 auto;
min-width: 0;
display: block;
font-family: var(--skb-font-head);
font-size: clamp(19px, 2.3vw, 26px);
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.01em;
}
.skb-accordion-icon {
position: relative;
flex: 0 0 auto;
width: 34px;
height: 34px;
border-radius: 50%;
border: 1.5px solid currentColor;
color: var(--skb-teal-dark);
opacity: 0.8;
transition: background 0.15s ease, opacity 0.15s ease;
}
.skb-accordion--navy .skb-accordion-icon { color: var(--skb-teal-light); }
.skb-accordion-icon::before,
.skb-accordion-icon::after {
content: "";
position: absolute;
top: 50%; left: 50%;
width: 13px; height: 2px;
background: currentColor;
transform: translate(-50%, -50%);
transition: transform 0.25s ease, opacity 0.25s ease;
}
.skb-accordion-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.skb-accordion-trigger:hover .skb-accordion-icon { opacity: 1; background: rgba(47, 145, 135, 0.12); }
.skb-accordion-trigger[aria-expanded="true"] .skb-accordion-icon::after {
transform: translate(-50%, -50%) rotate(0deg);
opacity: 0;
}
/* Height is animated by the JS (max-height in px + hidden attribute) */
.skb-accordion-panel { overflow: hidden; transition: max-height 0.32s ease; }
.skb-accordion-panel[hidden] { display: none; }
.skb-panel-inner { padding-bottom: 58px; }
.skb-lede {
font-size: 17px;
color: var(--skb-muted);
max-width: 60ch;
margin-bottom: 32px;
}
.skb-accordion--navy .skb-lede { color: rgba(255, 255, 255, 0.78); }
.skb-lede strong, .skb-accordion--navy .skb-lede strong { color: inherit; font-weight: 700; }
.skb-lede em { font-style: italic; color: var(--skb-teal); font-weight: 600; }
.skb-accordion--navy .skb-lede em { color: var(--skb-teal-light); }
.skb-note {
font-size: 14px;
color: var(--skb-muted);
max-width: 46ch;
margin-top: 24px;
}
.skb-sub-h { font-size: 20px; margin-bottom: 20px; }
.skb-section-foot { margin-top: 36px; }
.skb-root .skb-copy-btn {
font-size: 12.5px;
font-weight: 600;
color: var(--skb-teal-dark);
border: 1px dashed currentColor;
border-radius: 999px;
padding: 8px 16px;
max-width: 100%;
overflow-wrap: anywhere;
transition: background 0.15s ease;
}
.skb-root .skb-copy-btn:hover { background: rgba(47, 145, 135, 0.1); }
.skb-root .skb-accordion--navy .skb-copy-btn { color: var(--skb-teal-light); }
.skb-root .skb-accordion--navy .skb-copy-btn:hover { background: rgba(255, 255, 255, 0.1); }
/* Two-column split used by sections 02, 03 and 05 */
.skb-split {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 46px;
align-items: start;
}
.skb-split--flow { grid-template-columns: 1.35fr 0.65fr; }
@media (max-width: 900px) {
.skb-split, .skb-split--flow { grid-template-columns: 1fr; gap: 34px; }
}
/* =============================================================
01 — BEHAVIOR TRIGGER CARDS (icon + label + image + caption,
matching the printed icon row above the photo row)
============================================================= */
.skb-trigger-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
@media (max-width: 900px) { .skb-trigger-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .skb-trigger-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
.skb-trigger-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
background: var(--skb-white);
border: 1px solid var(--skb-border);
border-radius: var(--skb-radius);
padding: 18px 14px;
text-align: center;
overflow: hidden;
}
.skb-trigger-icon {
flex: 0 0 auto;
margin-bottom: 2px;
object-fit: contain;
}
.skb-trigger-label {
font-size: 13px;
font-weight: 700;
line-height: 1.3;
flex: 1 0 auto;
}
/* Image with the mail-piece copy overlaid, as printed */
.skb-trigger-figure {
position: relative;
display: block;
width: 100%;
border-radius: 10px;
overflow: hidden;
}
.skb-trigger-caption {
position: absolute;
inset-inline: 0;
bottom: 0;
padding: 22px 10px 10px;
font-size: 12px;
font-weight: 700;
line-height: 1.25;
color: #fff;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
background: linear-gradient(to top, rgba(6, 22, 32, 0.78), rgba(6, 22, 32, 0));
}
/* =============================================================
02 — CLOSED-LOOP STEPS
============================================================= */
/* Four steps in a 2x2 grid: this section sits in a half-width column,
so a single row of four would crush the copy. The connector arrows
are decorative s — hidden here, with numbered badges carrying
the sequence instead. */
.skb-loop {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
align-items: start;
counter-reset: skb-step;
}
.skb-loop-arrow { display: none; }
.skb-loop-step {
position: relative;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: var(--skb-radius);
padding: 22px 16px;
text-align: center;
counter-increment: skb-step;
}
.skb-loop-step::before {
content: counter(skb-step);
position: absolute;
top: 10px;
left: 12px;
font-family: var(--skb-font-head);
font-size: 11px;
font-weight: 800;
color: var(--skb-teal-light);
opacity: 0.75;
}
.skb-loop-step h3 { font-size: 14.5px; margin-bottom: 6px; color: #fff; }
.skb-loop-step p { font-size: 12.5px; color: rgba(255, 255, 255, 0.7); }
.skb-loop-icon { margin: 0 auto 14px; }
.skb-loop-arrow { align-self: center; color: var(--skb-teal-light); font-size: 20px; line-height: 1; }
@media (max-width: 480px) {
.skb-loop { grid-template-columns: 1fr; }
}
/* =============================================================
03 — LIFECYCLE TIMELINE
============================================================= */
.skb-timeline { display: flex; flex-direction: column; }
.skb-timeline-item {
display: grid;
grid-template-columns: 42px 1fr;
gap: 16px;
position: relative;
padding-bottom: 24px;
}
.skb-timeline-item:not(:last-child)::before {
content: "";
position: absolute;
left: 20px; top: 46px; bottom: 4px;
width: 2px;
background: var(--skb-border);
}
.skb-timeline-item:last-child { padding-bottom: 0; }
.skb-timeline-dot { position: relative; z-index: 1; justify-self: center; }
.skb-timeline-body { padding-top: 3px; }
.skb-timeline-tag {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--skb-teal-dark);
}
.skb-timeline-quote {
font-family: var(--skb-font-head);
font-size: 17px;
font-weight: 700;
}
/* =============================================================
04 — WHY DIRECT MAIL: three printed columns
============================================================= */
.skb-triptych {
display: grid;
grid-template-columns: 0.68fr 1.1fr 1.22fr;
gap: 30px;
align-items: start;
}
@media (max-width: 1000px) { .skb-triptych { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .skb-triptych { grid-template-columns: 1fr; gap: 28px; } }
.skb-triptych-copy {
background: rgba(255, 255, 255, 0.6);
border: 1px solid var(--skb-border);
border-radius: var(--skb-radius);
padding: 26px 22px;
text-align: center;
}
.skb-triptych-copy .skb-lede {
font-family: var(--skb-font-head);
font-size: 15px;
color: var(--skb-ink);
margin-bottom: 22px;
max-width: none;
}
.skb-triptych-icon { margin: 0 auto 20px; }
.skb-triptych-kicker {
font-family: var(--skb-font-head);
font-size: 16px;
font-weight: 800;
line-height: 1.3;
color: var(--skb-teal-dark);
}
.skb-triptych-art { align-self: center; }
@media (max-width: 1000px) { .skb-triptych-art { grid-column: 1 / -1; } }
.skb-stat-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
@media (max-width: 460px) { .skb-stat-grid { grid-template-columns: 1fr; } }
.skb-stat-card {
background: var(--skb-white);
border: 1px solid var(--skb-border);
border-radius: var(--skb-radius);
padding: 22px 20px;
}
.skb-stat-num {
font-family: var(--skb-font-head);
font-size: clamp(34px, 4vw, 44px);
font-weight: 900;
line-height: 1;
color: var(--skb-teal-dark);
margin-bottom: 10px;
}
.skb-stat-desc { font-size: 13.5px; font-weight: 600; color: var(--skb-ink); }
/* =============================================================
05 — FORMATS + FLOW CANVAS
============================================================= */
.skb-formats-h {
font-family: var(--skb-font-head);
font-size: 17px;
font-weight: 800;
margin-bottom: 10px;
color: #fff;
}
.skb-pill-wrap { display: flex; flex-wrap: wrap; gap: 10px; }
.skb-pill {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #fff;
font-size: 13.5px;
font-weight: 600;
padding: 9px 16px;
border-radius: 999px;
}
/* The flow diagram is the brochure's own screenshot: 800x2546, far
taller than any viewport. On desktop it lives in a capped, scrollable
frame so this section does not become 1,300px tall; on small screens
the cap is removed and the page scroll does the work. */
.skb-flow-figure { align-self: start; }
.skb-flow-scroll {
max-height: 620px;
overflow-y: auto;
overscroll-behavior: contain;
border-radius: 8px;
background: #f7f5f0;
box-shadow: inset 0 -18px 22px -18px rgba(11, 36, 54, 0.55);
}
.skb-flow-scroll::-webkit-scrollbar { width: 10px; }
.skb-flow-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,0.08); }
.skb-flow-scroll::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.32);
border-radius: 6px;
}
.skb-flow-hint {
margin-top: 8px;
font-size: 11.5px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
text-align: center;
}
@media (max-width: 900px) {
.skb-flow-scroll { max-height: none; overflow: visible; box-shadow: none; }
.skb-flow-hint { display: none; }
}
@media print {
.skb-flow-scroll { max-height: none !important; overflow: visible !important; }
.skb-flow-hint { display: none !important; }
}
/* =============================================================
CLOSING BAND
============================================================= */
.skb-footer {
scroll-margin-top: var(--skb-nav-h);
background: var(--skb-navy);
color: #fff;
padding: 52px 0;
}
.skb-footer-inner {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 30px;
align-items: center;
}
@media (max-width: 860px) {
.skb-footer-inner { grid-template-columns: 1fr; text-align: left; }
}
.skb-footer-mark { align-self: center; }
.skb-footer-h { font-size: clamp(20px, 2.4vw, 26px); margin-bottom: 10px; }
.skb-footer-h em { font-style: normal; color: var(--skb-teal-light); }
.skb-footer-copy p { font-size: 14.5px; color: rgba(255, 255, 255, 0.8); }
.skb-footer-copy em { font-style: italic; }
.skb-footer-teal { color: var(--skb-teal-light) !important; }
.skb-footer-brand {
display: flex;
align-items: center;
justify-content: flex-end;
}
.skb-footer-logo { width: 96px; height: auto; color: #fff; flex: 0 0 auto; }
/* =============================================================
RESPONSIVE / MOTION / PRINT
============================================================= */
@media (max-width: 640px) {
.skb-root { --skb-nav-h: 60px; }
.skb-accordion-trigger { padding: 22px 20px; gap: 12px; }
.skb-panel-inner { padding-bottom: 44px; }
.skb-container { padding-inline: 20px; }
.skb-footer-brand { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
.skb-root *, .skb-root *::before, .skb-root *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
@media print {
.skb-index, .skb-index-actions, .skb-copy-btn, .skb-section-foot { display: none !important; }
.skb-accordion-panel {
display: block !important;
max-height: none !important;
overflow: visible !important;
}
.skb-accordion-icon { display: none !important; }
.skb-root { font-size: 11pt; }
.skb-accordion, .skb-cover, .skb-trigger-card, .skb-figure { break-inside: avoid; }
.skb-art { max-width: 100% !important; }
.skb-accordion--navy, .skb-footer, .skb-cover {
background: #fff !important;
color: #000 !important;
}
.skb-accordion--navy .skb-loop-step { border-color: #bbb !important; }
.skb-accordion--navy .skb-loop-step h3,
.skb-accordion--navy .skb-loop-step p,
.skb-accordion--navy .skb-lede,
.skb-cover-lede, .skb-cover-note, .skb-footer-copy p { color: #222 !important; }
.skb-cover h1 em, .skb-footer-h em { color: #21665f !important; }
.skb-pill, .skb-formats-h { color: #000 !important; }
.skb-pill { border-color: #999 !important; }
}