/*
* "Stitch Electric" post pattern — implements the Stitch design export
* (/Downloads/stitch_ridwell_promo_code_portal (1)/DESIGN.md) as a scoped,
* conditionally-enqueued stylesheet. Loads when post_content contains the
* `cs-stitch` marker (the full custom layout, e.g. 17434) OR the modular
* offer hero is about to render (see cs_enqueue_stitch_assets /
* cs_offer_hero_should_render in inc/performance.php).
*
* Tokens straight from DESIGN.md: primary #0058be / container #2170e4,
* surfaces #f7f9fb/#f2f4f6/#fff, outline-variant #c2c6d6, 8px rhythm,
* radii 8/16/24, ambient shadows. Plus Jakarta Sans is approximated by the
* theme's self-hosted Manrope (same geometric class, zero added weight).
*
* ACCENT COLOR — one-line switchable: the electric-blue accent everywhere
* in this file (full layout, modular hero, and the `.cs-electric` restyle
* of ordinary post content below) is driven entirely by the `--st-primary`
* / `--st-primary-hi` custom properties. They're declared in exactly two
* places — the `.cs-stitch` rule right below, and the `body.cs-electric`
* rule near the bottom of this file — change both to re-skin every page
* this touches.
*/
.cs-stitch {
--st-primary: #0058be;
--st-primary-hi: #2170e4;
--st-ink: #191c1e;
--st-muted: #424754;
--st-surface: #f7f9fb;
--st-surface-low: #f2f4f6;
--st-card: #ffffff;
--st-line: #c2c6d6;
--st-r-sm: 8px;
--st-r-md: 16px;
--st-r-lg: 24px;
--st-shadow: 0 10px 30px -10px rgba(0, 88, 190, .1);
color: var(--st-ink);
font-family: Manrope, -apple-system, sans-serif;
/* breakout from the ~720px entry column (same proven technique + guards as showcase.css) */
width: min(1120px, calc(100vw - 32px));
margin: 0 50% 4rem;
transform: translateX(-50%);
box-sizing: border-box;
}
.cs-stitch *, .cs-stitch *::before, .cs-stitch *::after { box-sizing: border-box; min-width: 0; }
.cs-stitch img { max-width: 100%; height: auto; display: block; }
.cs-stitch section { margin: 0 0 24px; }
.cs-stitch p { margin: 0 0 1em; }
.cs-stitch p:last-child { margin-bottom: 0; }
/* ---- micro components ---- */
.cs-stitch .st-chip {
display: inline-flex; align-items: center; gap: 6px;
background: #d8e2ff; color: var(--st-primary);
font: 700 12px/1.2 Manrope, sans-serif; letter-spacing: .08em; text-transform: uppercase;
padding: 6px 12px; border-radius: 999px;
}
.cs-stitch .st-chip--ghost { background: var(--st-surface-low); color: var(--st-muted); }
.cs-stitch .st-kicker {
font: 700 12px/1.2 Manrope, sans-serif; letter-spacing: .14em; text-transform: uppercase;
color: var(--st-muted);
}
.cs-stitch .st-btn {
display: inline-block; width: 100%; text-align: center;
background: var(--st-primary); color: #fff !important;
font: 700 14px/1 Manrope, sans-serif; letter-spacing: .06em; text-transform: uppercase;
padding: 15px 22px; border-radius: var(--st-r-sm); text-decoration: none;
transition: transform .12s ease, box-shadow .12s ease;
}
.cs-stitch .st-btn:hover { box-shadow: 0 8px 20px rgba(59, 130, 246, .25); transform: translateY(-1px); }
.cs-stitch .st-btn:active { transform: scale(.98); }
/* ---- hero ---- */
.cs-stitch .st-hero {
display: grid; grid-template-columns: 1fr; gap: 32px;
padding: 24px 0 8px; align-items: start;
}
.cs-stitch .st-hero__title {
font-size: clamp(30px, 4.6vw, 52px); font-weight: 800; line-height: 1.12;
letter-spacing: -0.02em; margin: 14px 0 10px;
}
.cs-stitch .st-hero__title em { font-style: italic; color: var(--st-primary-hi); }
.cs-stitch .st-hero__meta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; }
.cs-stitch .st-hero__meta span {
font: 600 12px/1.4 Manrope, sans-serif; letter-spacing: .06em; text-transform: uppercase;
color: var(--st-muted); display: inline-flex; align-items: center; gap: 6px;
}
.cs-stitch .st-hero__intro { color: var(--st-muted); font-size: 17px; line-height: 1.6; max-width: 46ch; }
/* offer card */
.cs-stitch .st-offer {
background: var(--st-card); border: 1px solid var(--st-line);
border-radius: var(--st-r-lg); box-shadow: var(--st-shadow);
padding: 24px; position: relative;
}
.cs-stitch .st-offer__badge {
position: absolute; top: 16px; right: 16px;
background: var(--st-primary); color: #fff;
font: 700 10px/1 Manrope, sans-serif; letter-spacing: .1em;
padding: 6px 10px; border-radius: 999px;
}
.cs-stitch .st-offer__icon {
width: 44px; height: 44px; border-radius: 12px;
background: var(--st-primary); color: #fff;
display: flex; align-items: center; justify-content: center; font-size: 22px;
margin-bottom: 14px;
}
.cs-stitch .st-offer__icon--image { overflow: hidden; background: var(--st-surface-low); }
.cs-stitch .st-offer__icon--image img { width: 100%; height: 100%; object-fit: cover; }
.cs-stitch .st-offer h2 { font-size: 22px; font-weight: 800; margin: 0 0 4px; letter-spacing: -0.01em; }
.cs-stitch .st-offer__sub { color: var(--st-muted); font-size: 14px; margin: 0 0 16px; }
.cs-stitch .st-code {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
background: var(--st-surface-low); border: 1px dashed var(--st-line);
border-radius: var(--st-r-sm); padding: 14px 16px; margin: 0 0 14px;
}
.cs-stitch .st-code mark {
background: none !important; color: var(--st-ink) !important; padding: 0 !important;
font: 800 22px/1 ui-monospace, Menlo, monospace; letter-spacing: .28em;
}
.cs-stitch .st-code button {
background: none; border: 1px solid var(--st-line); border-radius: 6px;
color: var(--st-primary); font: 700 11px/1 Manrope, sans-serif;
padding: 8px 10px; cursor: pointer; letter-spacing: .04em; flex-shrink: 0;
}
.cs-stitch .st-code button:hover { border-color: var(--st-primary); }
.cs-stitch .st-offer__fine {
text-align: center; color: var(--st-muted);
font: 600 10px/1.4 Manrope, sans-serif; letter-spacing: .1em; text-transform: uppercase;
margin-top: 12px;
}
/* ---- info split + sidebar ---- */
.cs-stitch .st-split { display: grid; grid-template-columns: 1fr; gap: 24px; }
.cs-stitch .st-split--single { grid-template-columns: 1fr; }
.cs-stitch .st-panel {
background: var(--st-card); border-radius: var(--st-r-md); padding: 32px;
position: relative; overflow: hidden;
}
.cs-stitch .st-panel--tint { background: var(--st-surface-low); }
.cs-stitch .st-panel h2, .cs-stitch .st-panel h3 {
font-weight: 800; letter-spacing: -0.01em; margin: 0 0 12px; font-size: 24px; line-height: 1.25;
}
.cs-stitch .st-panel h2 .st-blue, .cs-stitch .st-blue { color: var(--st-primary-hi); }
.cs-stitch .st-panel p { color: var(--st-muted); font-size: 15px; line-height: 1.6; }
.cs-stitch .st-panel p strong { color: var(--st-ink); }
.cs-stitch .st-watermark {
position: absolute; right: -10px; top: -10px; font-size: 130px; line-height: 1;
opacity: .05; pointer-events: none; user-select: none;
}
.cs-stitch .st-side h3 { font-size: 17px; margin-bottom: 14px; }
.cs-stitch .st-side a {
display: flex; align-items: center; gap: 12px;
background: var(--st-card); border-radius: 12px; padding: 12px 14px;
text-decoration: none; margin-bottom: 10px;
transition: transform .12s ease, box-shadow .12s ease;
}
.cs-stitch .st-side a:hover { transform: translateY(-1px); box-shadow: var(--st-shadow); }
.cs-stitch .st-side .st-side__icon {
width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
background: #d8e2ff; color: var(--st-primary);
display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.cs-stitch .st-side b { display: block; color: var(--st-ink); font-size: 13px; font-weight: 700; }
.cs-stitch .st-side small { color: var(--st-primary); font: 700 11px/1.3 Manrope, sans-serif; letter-spacing: .04em; text-transform: uppercase; }
/* ---- steps ---- */
.cs-stitch .st-steps { display: grid; grid-template-columns: 1fr; gap: 20px; }
.cs-stitch .st-step {
background: var(--st-surface-low); border-radius: var(--st-r-md); padding: 26px;
}
.cs-stitch .st-step__num {
font-size: 34px; font-weight: 800; color: var(--st-line); letter-spacing: -0.02em;
display: block; margin-bottom: 22px;
}
.cs-stitch .st-step b { display: block; font-size: 16px; font-weight: 800; margin-bottom: 8px; }
.cs-stitch .st-step p { color: var(--st-muted); font-size: 13px; line-height: 1.55; margin: 0; }
.cs-stitch .st-step--hi { background: var(--st-primary); color: #fff; }
.cs-stitch .st-step--hi .st-step__num { color: rgba(255,255,255,.45); }
.cs-stitch .st-step--hi p { color: rgba(255,255,255,.9); }
.cs-stitch .st-impact-card {
background: var(--st-primary-hi); color: #fff; border-radius: var(--st-r-md);
padding: 26px; position: relative; overflow: hidden;
}
.cs-stitch .st-impact-card .st-kicker { color: rgba(255,255,255,.8); }
.cs-stitch .st-impact-card .st-big {
font-size: 44px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; margin: 10px 0 8px;
}
.cs-stitch .st-impact-card .st-big small { font-size: 16px; font-weight: 700; opacity: .8; }
.cs-stitch .st-impact-card p { font: 700 13px/1.45 Manrope, sans-serif; margin: 0; }
.cs-stitch .st-disclosure {
color: #727785; font: 500 10px/1.55 Manrope, sans-serif;
letter-spacing: .01em; text-transform: none; padding: 2px 4px;
}
/* ---- impact photo split ---- */
.cs-stitch .st-photo-split {
background: var(--st-card); border-radius: var(--st-r-md); padding: 32px;
display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center;
}
.cs-stitch .st-photo-split img { border-radius: var(--st-r-md); width: 100%; object-fit: cover; }
.cs-stitch .st-check { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; }
.cs-stitch .st-check .st-side__icon { border-radius: 999px; width: 28px; height: 28px; font-size: 13px; }
.cs-stitch .st-check b { display: block; font-size: 13px; }
.cs-stitch .st-check span { color: var(--st-muted); font-size: 12px; }
/* ---- FAQ (styles the existing blockquote pattern inside the wrapper) ---- */
.cs-stitch .st-faq h2 { text-align: center; font-size: 26px; font-weight: 800; letter-spacing: -0.01em; margin: 30px 0 22px; }
.cs-stitch .st-faq blockquote {
background: var(--st-surface-low); border: none; border-radius: 12px;
margin: 0 0 12px; padding: 18px 22px; font-style: normal;
}
.cs-stitch .st-faq blockquote p { margin: 0; font-size: 14px; color: var(--st-muted); line-height: 1.6; }
.cs-stitch .st-faq blockquote p:first-child { margin-bottom: 6px; }
.cs-stitch .st-faq blockquote strong { color: var(--st-ink); font-size: 15px; }
/* ---- blue CTA band ---- */
.cs-stitch .st-band {
background: var(--st-primary); color: #fff; border-radius: var(--st-r-lg);
text-align: center; padding: 56px 24px;
}
.cs-stitch .st-band .st-offer__icon { margin: 0 auto 20px; background: rgba(255,255,255,.15); }
.cs-stitch .st-band h2 {
font-size: clamp(28px, 4vw, 44px); font-weight: 800; letter-spacing: -0.02em;
line-height: 1.1; margin: 0 0 12px; text-transform: uppercase;
}
.cs-stitch .st-band p { font-weight: 600; font-size: 15px; margin: 0 0 24px; opacity: .95; }
.cs-stitch .st-band .st-btn { width: auto; background: #fff; color: var(--st-primary) !important; }
/* ---- ≥768px ---- */
@media (min-width: 768px) {
.cs-stitch .st-hero { grid-template-columns: 1.15fr .85fr; gap: 48px; padding-top: 40px; }
.cs-stitch .st-split { grid-template-columns: 1.6fr 1fr; }
.cs-stitch .st-split--single { grid-template-columns: 1fr; }
.cs-stitch .st-steps { grid-template-columns: 1fr 1fr 1fr; }
.cs-stitch .st-steps .st-impact-card { grid-row: span 2; }
.cs-stitch .st-photo-split { grid-template-columns: 1.1fr .9fr; padding: 48px; }
.cs-stitch section { margin-bottom: 32px; }
}
/* polish pass: keep the page single-accent (blue) — neutralize theme pink inside the wrapper */
.cs-stitch mark { background: #d8e2ff !important; color: var(--st-primary) !important; border-radius: 6px; padding: .05em .4em; font-weight: 800; }
.cs-stitch .st-code mark { background: none !important; color: var(--st-ink) !important; padding: 0 !important; }
.cs-stitch .st-disclosure {
background: transparent !important; border: 0 !important;
border-radius: 0; box-shadow: none;
color: var(--st-muted) !important;
}
.cs-stitch .st-photo-split img { aspect-ratio: auto; height: auto; object-fit: contain; }
/* Full-page composition from the Stitch reference. */
body {
background: var(--st-surface-low);
font-family: Manrope, -apple-system, sans-serif;
}
body .cs-header {
position: sticky; top: 0; height: 80px; background: rgba(247,249,251,.94);
backdrop-filter: blur(18px); border-color: rgba(194,198,214,.3);
}
body .cs-header__inner { min-height: 80px; padding-block: 0; }
body .cs-logo { font-size: 21px; text-transform: none; }
body .cs-logo::before { content: none !important; display: none !important; }
body .cs-nav__list > li > a {
font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--st-muted);
}
body .cs-search-form__input { background: #eceef0; border-radius: 999px; }
body .cs-single__inner { max-width: none; padding: 0; }
body .cs-entry-content { max-width: none; margin: 0; font-size: inherit; line-height: inherit; }
body .cs-entry-content > div:first-child > p:first-of-type { background: initial; border: 0; border-radius: 0; padding: 0; }
body .cs-footer {
margin-top: 0; background: #e6e8ea; color: var(--st-muted); padding: 72px 0 32px;
}
body .cs-footer a { color: var(--st-muted); }
body .cs-footer__logo { color: var(--st-ink); }
body .cs-footer__logo::before { content: none; display: none; }
body .cs-footer__logo .cs-logo__accent { color: inherit; }
body .cs-footer__heading,
body .cs-footer__bottom { color: #727785; }
body .cs-footer__bottom { border-color: rgba(114,119,133,.25); }
.cs-single--stitch .cs-stitch {
width: 100%; margin: 0 auto; transform: none; display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px;
max-width: 1280px; padding: 0 32px 104px;
}
.cs-single--stitch .cs-stitch > * { grid-column: 1 / -1; }
.cs-single--stitch .st-hero {
position: relative; grid-template-columns: 1fr 460px; gap: 64px; align-items: center;
padding: 80px 0 160px; margin-bottom: -80px; min-height: 520px;
}
.cs-single--stitch .st-hero::before {
content: ""; position: absolute; z-index: -1; top: 0; bottom: 0;
left: calc(50% - 50vw); right: calc(50% - 50vw); background: #fff;
border-bottom: 1px solid rgba(194,198,214,.2);
}
.cs-single--stitch .st-hero__title { font-size: clamp(48px, 5.4vw, 72px); line-height: 1.05; margin: 24px 0; }
.cs-single--stitch .st-hero__title em { display: block; }
/* In-layout links read blue like the reference, never base-theme pink.
Buttons/chips keep their own colors. */
.cs-single--stitch .cs-stitch a:not(.st-btn):not(.st-chip) { color: var(--st-primary); }
.cs-single--stitch .st-hero__intro { font-size: 16px; max-width: 62ch; }
.cs-single--stitch .st-offer { padding: 40px; border-radius: 40px; box-shadow: 0 16px 32px -12px rgba(25,28,30,.2); }
.cs-single--stitch .st-offer__icon { width: 64px; height: 64px; border-radius: 16px; font-size: 32px; margin-bottom: 24px; }
.cs-single--stitch .st-offer h2 { font-size: 30px; }
.cs-single--stitch .st-offer__sub { font-size: 17px; margin-bottom: 28px; }
.cs-single--stitch .st-code { padding: 20px 24px; border-radius: 16px; margin-bottom: 20px; }
.cs-single--stitch .st-code mark { font-size: 30px; }
.cs-single--stitch .st-btn { padding: 20px 24px; border-radius: 14px; }
.cs-single--stitch .st-split,
.cs-single--stitch .st-steps { display: contents; }
.cs-single--stitch .st-split > :first-child { grid-column: 1 / span 8; }
.cs-single--stitch .st-split > :last-child { grid-column: 9 / -1; }
.cs-single--stitch .st-split--single > :only-child { grid-column: 1 / -1; }
.cs-single--stitch .st-steps > .st-step { grid-column: span 4; }
.cs-single--stitch .st-steps > .st-impact-card { grid-column: 9 / -1; grid-row: span 2; }
.cs-single--stitch .st-panel,
.cs-single--stitch .st-step,
.cs-single--stitch .st-impact-card { border: 1px solid rgba(194,198,214,.3); border-radius: 32px; padding: 32px; }
.cs-single--stitch .st-panel { min-height: 260px; }
.cs-single--stitch .st-panel h2 { font-size: 36px; }
.cs-single--stitch .st-step { min-height: 210px; }
.cs-single--stitch .st-impact-card { min-height: 210px; }
.cs-single--stitch .st-disclosure { grid-column: 9 / -1; }
.cs-single--stitch .st-extras { grid-column: 1 / -1; }
.cs-single--stitch .st-extras > .st-panel:has(.st-status-card) { padding: 0; background: transparent; }
.cs-single--stitch .st-status-card {
display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
gap: 48px; align-items: center; padding: 42px;
background: #fff; border: 1px solid rgba(194,198,214,.35); border-radius: 32px;
box-shadow: 0 16px 40px -32px rgba(25,28,30,.35);
}
.cs-single--stitch .st-status-card h2 { margin: 16px 0 14px; font-size: 34px; line-height: 1.12; }
.cs-single--stitch .st-status-card p { color: var(--st-muted); font-size: 14px; line-height: 1.65; }
.cs-single--stitch .st-status-card .st-status-card__verdict {
margin-bottom: 12px; color: var(--st-ink); font-size: 17px; line-height: 1.45;
}
.cs-single--stitch .st-status-card__signals { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.cs-single--stitch .st-status-card__signals span {
display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px;
background: var(--st-surface-low); border-radius: 999px;
color: var(--st-muted); font: 700 10px/1.2 Manrope, sans-serif;
}
.cs-single--stitch .st-status-card__signals b { color: var(--st-primary); }
.cs-single--stitch .st-status-card__media { position: relative; display: block; color: #fff; text-decoration: none; }
.cs-single--stitch .st-status-card__media img {
width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px;
}
.cs-single--stitch .st-status-card__media span {
position: absolute; left: 14px; right: 14px; bottom: 14px;
display: flex; justify-content: space-between; align-items: center;
padding: 11px 13px; background: rgba(25,28,30,.84); border-radius: 12px;
font: 700 11px/1.2 Manrope, sans-serif; backdrop-filter: blur(8px);
}
.cs-single--stitch .st-photo-split { margin-top: 56px; padding: 0; gap: 72px; border-radius: 0; }
.cs-single--stitch .st-photo-split h3 { font-size: 46px; }
.cs-single--stitch .st-faq { max-width: 920px; width: 100%; margin: 48px auto 72px; }
.cs-single--stitch .st-faq h2 { font-size: 32px; margin-bottom: 40px; }
.cs-single--stitch .st-faq blockquote { border: 1px solid rgba(194,198,214,.4); padding: 24px 30px; }
.cs-single--stitch .st-faq blockquote > p:first-child::after { border-color: var(--st-primary); }
.cs-single--stitch .st-band {
position: relative; left: calc(50% - 50vw); width: 100vw; border-radius: 0;
margin-bottom: -104px; padding: 88px 24px;
}
.cs-single--stitch .st-band h2 { font-size: clamp(44px, 5vw, 68px); }
.cs-single--stitch .st-band h2 { color: #fff; }
@media (max-width: 767px) {
.cs-single--stitch .cs-stitch { display: block; padding: 0 16px 16px; }
.cs-single--stitch .cs-stitch section { margin-bottom: 0; }
.cs-single--stitch .st-hero { grid-template-columns: 1fr; gap: 40px; padding: 48px 0 0; margin-bottom: -64px; min-height: 0; }
.cs-single--stitch .st-hero__title { font-size: 44px; }
.cs-single--stitch .st-offer { padding: 16px; border-radius: 28px; }
.cs-single--stitch .st-split,
.cs-single--stitch .st-steps { display: grid; grid-template-columns: 1fr; }
.cs-single--stitch .st-split > *,
.cs-single--stitch .st-steps > * { grid-column: auto !important; }
.cs-single--stitch .st-panel,
.cs-single--stitch .st-step,
.cs-single--stitch .st-impact-card { padding: 16px; border-radius: 24px; }
.cs-single--stitch .st-photo-split { margin-top: 40px; padding: 16px; gap: 32px; }
.cs-single--stitch .st-status-card { grid-template-columns: 1fr; gap: 28px; padding: 16px; border-radius: 24px; }
.cs-single--stitch .st-status-card h2 { font-size: 28px; }
.cs-single--stitch .st-photo-split h3 { font-size: 34px; }
.cs-single--stitch .st-faq { margin: 48px auto; }
.cs-single--stitch .st-band { margin-bottom: -64px; }
}
/* ---- .cs-stitch--hero — the modular offer hero (template-parts/
offer-hero.php). Meta-driven, inserted after the entry header on
ordinary single posts — the post's real H1 stays put, so this reuses the
plain (non `.cs-single--stitch`) .st-hero/.st-offer/.st-chip/.st-code/
.st-btn rules above as a standalone card grid; only a couple of tweaks
are needed so it reads right sitting directly under a normal page header
instead of at the full-bleed page top. ---- */
/* Universal-layout H1: the entry-header block is suppressed on every
cs-electric post (single.php), and electric posts carry the full
.cs-single--stitch composition — the hero title inherits the same
72px reference scale as the Ridwell page. No downsizing here. */
.cs-stitch--hero .st-hero__intro { margin: 0 0 10px; }
/* Headline mode (cs_hero_headline meta set, inc/stitch-content.php): the
hand-written display line takes the H1's visual slot but is a ; the
real H1 moves to a compact subheader directly beneath it. */
.cs-stitch--hero .st-hero__display {
font-weight: 800; letter-spacing: -0.02em; color: var(--st-ink);
}
.cs-single--stitch .st-hero__display { font-size: clamp(48px, 5.4vw, 72px); line-height: 1.05; margin: 24px 0 8px; }
.cs-stitch--hero .st-hero__display em { font-style: italic; font-weight: 800; color: var(--st-primary-hi); }
.cs-stitch--hero .st-hero__seo {
font-size: 18px; font-weight: 700; letter-spacing: normal; line-height: 1.3;
color: var(--st-muted); margin: 0 0 10px;
}
.cs-stitch--hero .st-hero__headline {
font-size: clamp(17px, 2.2vw, 21px); font-weight: 700; line-height: 1.4;
margin: 14px 0 4px; color: var(--st-ink);
}
/* ---- universal-layout additions: leftover panels + a bare steps-intro
heading + a single-column boxes fallback when there's no related-posts
sidebar to pair with the info panel (inc/stitch-content.php). Reuses
every existing .st-panel/.st-step/.st-side rule as-is. ---- */
.cs-stitch .st-split--single { grid-template-columns: 1fr; }
.cs-stitch .st-extras { display: flex; flex-direction: column; gap: 24px; }
.cs-stitch .st-section-heading {
font-size: 20px; font-weight: 800; letter-spacing: -0.01em;
margin: 0 0 16px; color: var(--st-ink);
}
/* ---- body.cs-electric — added to body_class() whenever the hero above
renders (inc/performance.php); restyles the FAQ blockquotes + numbered
steps ALREADY in ordinary post content (main.css "== SINGLE POST ==")
to pick up the Stitch look, no content edits required. Accent: see the
file-header note above. ---- */
body.cs-electric {
--st-primary: #0058be;
--st-primary-hi: #2170e4;
}
body.cs-electric .cs-entry-content blockquote {
background: #f2f4f6; border: none; border-radius: 12px;
padding: 18px 22px; margin: 0 0 12px;
}
body.cs-electric .cs-entry-content blockquote:last-of-type { border-bottom: 0; }
body.cs-electric .cs-entry-content blockquote > p:first-child { color: #191c1e; }
body.cs-electric .cs-entry-content blockquote > p:first-child::after {
border-right-color: var(--st-primary); border-bottom-color: var(--st-primary);
}
body.cs-electric .cs-entry-content blockquote > p:not(:first-child) { color: #424754; }
body.cs-electric .cs-entry-content ol > li::before { background: var(--st-primary); }
/* brand logo slot in the offer card (replaces the generic icon tile) */
.cs-stitch .st-offer__logo { margin-bottom: 14px; }
.cs-stitch .st-offer__logo img { max-height: 34px; width: auto; }
/* disclosure lives inside the Related sidebar, under the link cards */
.cs-stitch .st-side .st-disclosure {
background: none !important; padding: 14px 4px 0 !important;
margin-top: 14px; border-top: 1px solid var(--st-line);
border-radius: 0; font-size: 10px; line-height: 1.6;
}
/* Slim variant for rescued stray-note paragraphs (stitch-content.php) —
a one-line CTA shouldn't render as a full-height card. */
.cs-stitch .st-panel--note { padding: 20px 28px; }
.cs-single--stitch .st-extras > .st-panel--note { min-height: 0; }
.cs-stitch .st-panel--media { display: flex; justify-content: center; padding: 20px; }
.cs-stitch .st-panel--media img { max-height: 380px; width: auto; border-radius: 14px; }
/* Long fallback titles (45+ chars after display trims) scale down so they
never wrap into a five-line 72px wall (Chalkboard case). */
.cs-single--stitch .st-hero__title--long { font-size: clamp(34px, 3.6vw, 50px); line-height: 1.12; }
.cs-single--stitch .st-hero__title--xlong { font-size: clamp(28px, 3vw, 42px); line-height: 1.15; }
/* Mobile offer dock, created from the page's canonical hero offer by main.js. */
.cs-mobile-offer { display: none; }
@media (max-width: 767px) {
body .cs-header {
position: relative; top: auto; width: calc(100% - 32px); height: auto;
margin: 12px 16px 0; background: rgba(255,255,255,.96);
border: 1px solid rgba(194,198,214,.5); border-radius: 20px;
box-shadow: 0 12px 32px -26px rgba(25,28,30,.5);
}
body .cs-header__inner { min-height: 68px; padding-block: 8px; }
body .cs-nav-toggle__btn { top: 12px; right: 12px; min-height: 44px; background: #f2f4f6; }
body .cs-nav-toggle__icon { top: 0; }
body .cs-nav-toggle__panel {
top: calc(100% + 8px); border: 1px solid rgba(194,198,214,.5);
border-radius: 18px; box-shadow: 0 18px 40px -24px rgba(25,28,30,.55);
background: linear-gradient(145deg, #232a3d, #0c111f);
}
body .cs-nav-toggle__panel .cs-nav__list > li > a { color: #fff; }
body .cs-nav-toggle__panel .cs-nav__list > li > a:hover,
body .cs-nav-toggle__panel .cs-nav__list > li > a:focus-visible {
color: #fff; background: rgba(255,255,255,.1);
}
body .cs-nav-toggle__panel .sub-menu a { color: rgba(255,255,255,.72); }
body .cs-nav-toggle__panel .sub-menu a:hover,
body .cs-nav-toggle__panel .sub-menu a:focus-visible { color: #fff; background: rgba(255,255,255,.08); }
body .cs-nav-toggle__search { border-top-color: rgba(255,255,255,.14); }
body .cs-nav-toggle__search .cs-search-form {
background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.16);
}
body .cs-nav-toggle__search .cs-search-form__input { color: #fff; }
body .cs-nav-toggle__search .cs-search-form__input::placeholder { color: rgba(255,255,255,.58); }
body .cs-nav-toggle__search .cs-search-form__submit { background: #e70aa8; }
html, body { overflow-x: clip; }
body.has-mobile-offer { padding-bottom: calc(182px + env(safe-area-inset-bottom)); }
.cs-single--stitch .cs-stitch { max-width: 100%; }
.cs-single--stitch .st-hero {
padding: 16px; margin: 16px 0 0;
background: #fff; border: 1px solid rgba(194,198,214,.35);
border-radius: 24px; box-shadow: 0 14px 36px -30px rgba(25,28,30,.45);
}
.cs-single--stitch .st-hero::before { display: none; }
.cs-single--stitch .st-hero > .st-offer { display: none; }
.cs-single--stitch .st-faq blockquote { padding: 16px; }
.cs-single--stitch .st-hero__title,
.cs-single--stitch .st-hero__display { font-size: 36px; line-height: 1.08; }
.cs-single--stitch .st-hero__title--long,
.cs-single--stitch .st-hero__title--xlong { font-size: 32px; line-height: 1.1; }
.cs-mobile-offer {
display: block; position: fixed; z-index: 500;
left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
width: auto; max-width: calc(100vw - 20px); padding: 0; background: transparent;
}
.cs-mobile-offer__inner {
display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 8px;
width: 100%; max-width: 560px; margin: 0 auto; padding: 10px; box-sizing: border-box;
background: linear-gradient(145deg, rgba(35,42,61,.98), rgba(12,17,31,.98));
border: 1px solid rgba(255,255,255,.13);
border-radius: 18px; box-shadow: 0 18px 48px -10px rgba(8,12,24,.68);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.cs-mobile-offer__code {
display: flex; align-items: center; justify-content: space-between; gap: 6px;
min-width: 0; width: auto; min-height: 50px; margin: 0; padding: 11px 10px 11px 14px;
background: rgba(255,255,255,.08); border: 1px dashed rgba(173,198,255,.55); border-radius: 12px;
}
.cs-mobile-offer__code mark {
overflow: hidden; color: #fff !important; background: transparent !important;
font: 800 19px/1 ui-monospace, Menlo, monospace; letter-spacing: .1em;
text-overflow: ellipsis; white-space: nowrap;
}
.cs-mobile-offer__code button {
flex: none; padding: 7px 8px; color: #ffd8f1; background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.2); border-radius: 8px;
font: 800 12px/1 Manrope, sans-serif; letter-spacing: .06em;
}
.cs-mobile-offer__label {
display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 42px;
padding: 6px 10px; color: #fff; text-align: center; font: 800 22px/1.2 Manrope, sans-serif;
}
.cs-mobile-offer__label--with-code {
min-height: 0; padding: 3px 8px 1px;
color: rgba(255,255,255,.78); font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
}
.cs-mobile-offer__action {
display: flex; align-items: center; justify-content: center;
min-width: 0; width: 100%; min-height: 52px; margin: 0; padding: 14px 16px;
background: linear-gradient(135deg, #f014b5, #c9078f); color: #fff !important; border-radius: 12px;
box-shadow: 0 10px 22px -10px rgba(201,7,143,.72);
text-align: center; text-decoration: none;
overflow: hidden; white-space: nowrap;
font: 800 17px/1.15 Manrope, sans-serif; letter-spacing: .04em; text-transform: uppercase;
}
.cs-mobile-offer__action:active { transform: scale(.98); }
}