/* ============================================================
THE CLINICAL COLLECTIVE
Visual system v2 — rebuilt 2026-08-27.
Selectors are unchanged from v1 on purpose: every existing page
restyles without a single markup edit, so no copy can break.
Display face is Switzer (Fontshare, ITF Free Font Licence:
free for commercial use, self-hosting permitted, no page-view
metering, no attribution). Body stays Lato per the brand guide.
Buenos Aires was removed. Its Luzi Type licence sells desktop,
web and app tiers separately and the desktop tier explicitly
prohibits website use. v1 declared @font-face for it anyway,
pointing at a file that was never committed, so every headline
silently rendered the Archivo fallback.
============================================================ */
@font-face{font-family:'Switzer';src:url('/assets/fonts/Switzer-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('/assets/fonts/Switzer-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('/assets/fonts/Switzer-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('/assets/fonts/Switzer-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('/assets/fonts/Switzer-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('/assets/fonts/Switzer-900.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
:root {
--navy: #1D252D;
--red: #F9423A;
--paper: #FFFFFF;
--white: #FFFFFF;
--wash: #F5F6F7; /* cool tint, only where a surface must lift off the page */
--green: #1E7A46;
--grey: #9AA3AB;
--line: #E4E7E9;
--ink-2: #5C666E;
--line-dark: #333F4A;
--rad: 4px; /* Upstate sits at 5px — near-square, quietly softened */
--rad-btn: 999px; /* full pills, like both reference sites */
--rad-sm: 999px; /* chips and tiers become pills too */
--panel: #1D252D; /* the brand navy — panels and footer */
--surface-dark: #242E37;
--head: 'Switzer', 'Archivo', system-ui, sans-serif;
--body: 'Lato', -apple-system, 'Segoe UI', sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { overflow-x: clip; }
.film-block, .strip, .img-band, .gallery { padding-left: 26px; padding-right: 26px; }
body {
font-family: var(--body);
color: var(--navy);
background: var(--paper);
line-height: 1.62;
font-size: 17px;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 26px; }
.narrow { max-width: 760px; }
/* ---------- type ----------
Bigger, tighter, left-anchored. v1 capped h1 at 3.5rem, so the
display face never actually got to behave like a display face. */
h1, h2, h3 { font-family: var(--head); text-wrap: balance; }
h1 { font-weight: 900; font-size: clamp(2.5rem, 6.6vw, 5.2rem); line-height: .97; letter-spacing: -.033em; }
h2 { font-weight: 900; font-size: clamp(1.85rem, 4.4vw, 3.1rem); line-height: 1.04; letter-spacing: -.028em; }
h3 { font-weight: 700; font-size: 1.18rem; line-height: 1.26; letter-spacing: -.012em; }
.lead { font-size: clamp(1.06rem, 1.7vw, 1.26rem); line-height: 1.55; margin-top: 24px; color: var(--ink-2); max-width: 60ch; }
.dark .lead { color: #C3CAD0; }
/* Section label: a red rule earns the accent, the words stay quiet.
v1 spent red on the text of all 55 of these. */
.eyebrow {
display: block; font-family: var(--head); font-weight: 600;
text-transform: uppercase; letter-spacing: .17em;
font-size: .72rem; color: var(--ink-2); margin-bottom: 20px;
}
.eyebrow::before {
content: ""; display: block; width: 26px; height: 2px;
background: var(--red); margin-bottom: 12px;
}
.dark .eyebrow { color: var(--grey); }
.r { color: var(--red); font-style: normal; }
.u { background: linear-gradient(transparent 84%, rgba(249,66,58,.28) 84%); }
.smallcaps { font-variant: all-small-caps; letter-spacing: .06em; color: var(--ink-2); font-size: 1.02rem; }
.dark .smallcaps { color: #AEB6BC; }
/* ---------- sections ----------
Rhythm now varies. v1 used 72px for every section on every page,
which is why the whole site scrolled at one flat speed. */
.section { padding: 104px 0; }
.section.tight { padding: 64px 0; }
.dark { background: var(--panel); color: var(--paper); }
/* The single highest-impact change: stop centring everything.
.center and .section-head stay as selectors so no markup changes,
but they now anchor left like real editorial layout. */
.center { text-align: left; }
.section-head { max-width: 780px; margin: 0 0 52px; text-align: left; }
.section-head .lead { margin-top: 16px; }
/* ---------- buttons: square and weighted, not pills ---------- */
.btn {
display: inline-block; font-family: var(--head); font-weight: 700;
font-size: .95rem; letter-spacing: .02em; text-decoration: none; text-align: center;
padding: 17px 30px; border: 1px solid transparent; border-radius: var(--rad-btn); cursor: pointer;
transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--navy); }
.btn-navy { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-navy:hover { background: var(--navy); color: #fff; }
.dark .btn-navy { background: transparent; color: var(--paper); border-color: #4A5763; }
.dark .btn-navy:hover { background: var(--paper); color: var(--navy); border-color: var(--paper); }
.micro { display: block; margin-top: 14px; font-size: .84rem; color: var(--ink-2); }
.dark .micro { color: var(--grey); }
.cta-block { margin-top: 34px; }
@media (max-width: 560px) { .btn { display: block; width: 100%; } }
.arrow-link {
display: inline-block; padding: 10px 0; font-family: var(--head); font-weight: 700;
font-size: .95rem; color: var(--red); text-decoration: none;
border-bottom: 1px solid rgba(249,66,58,.32); transition: border-color .15s;
}
.arrow-link:hover { border-bottom-color: var(--red); }
.dark .arrow-link { color: var(--red); }
.announce .arrow-link { color: #fff; padding: 6px 0; border-bottom-color: rgba(255,255,255,.5); }
/* ---------- header ---------- */
.topbar { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--line); }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 20px; }
.logo {
font-family: var(--head); font-weight: 900; font-size: 1.02rem;
letter-spacing: -.025em; text-decoration: none; display: inline-block; padding: 10px 0; white-space: nowrap;
}
.logo em { font-style: normal; color: var(--red); }
.nav-toggle-box { display: none; }
.nav-toggle { display: flex; flex-direction: column; gap: 5px; padding: 10px; cursor: pointer; }
.nav-toggle span { width: 23px; height: 2px; background: var(--navy); transition: .2s; }
nav.menu {
display: none; position: absolute; top: 66px; left: 0; right: 0;
background: var(--paper); border-bottom: 1px solid var(--line);
padding: 8px 26px 22px;
}
nav.menu a { display: block; padding: 13px 2px; text-decoration: none; font-family: var(--head); font-weight: 600; border-bottom: 1px solid var(--line); }
nav.menu a:last-child { border-bottom: 0; }
nav.menu a.nav-cta { color: var(--red); }
.nav-toggle-box:checked ~ nav.menu { display: block; }
@media (min-width: 980px) {
.nav-toggle { display: none; }
nav.menu { display: flex; position: static; padding: 0; border: 0; background: transparent; gap: 24px; align-items: center; }
nav.menu a {
border: 0; padding: 4px 0; font-size: .78rem; font-weight: 600;
text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2);
border-bottom: 1px solid transparent;
}
nav.menu a:hover { color: var(--navy); border-bottom-color: var(--navy); }
nav.menu a.nav-cta { background: var(--navy); color: #fff; padding: 11px 18px; letter-spacing: .08em; border: 0; }
nav.menu a.nav-cta:hover { background: var(--red); color: #fff; }
}
/* ---------- announcement bar ---------- */
.announce {
background: var(--navy); color: #fff; text-align: center;
font-family: var(--head); font-size: .8rem; font-weight: 600;
padding: 11px 16px; letter-spacing: .05em; text-transform: uppercase;
}
/* ---------- hero ---------- */
.hero { padding: 92px 0 76px; text-align: left; border-bottom: 1px solid var(--line); }
.hero h1 { max-width: 17ch; }
.hero .lead { max-width: 54ch; margin-left: 0; margin-right: 0; }
.hero .smallcaps { margin-top: 32px; max-width: 640px; margin-left: 0; display: block; }
/* ---------- video ---------- */
.video-wrap {
border-radius: var(--rad); aspect-ratio: 16 / 9; margin: 44px 0 0; max-width: 1440px; margin-left: auto; margin-right: auto;
overflow: hidden; background: var(--navy);
}
.video-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }
/* ---------- cards: hairlines, not floating rounded boxes ---------- */
.cards { display: grid; gap: 16px; margin-top: 8px; }
.card {
background: var(--wash); border: 0; border-radius: var(--rad);
padding: 28px 26px; display: flex; flex-direction: column; gap: 12px;
}
.dark .card { background: var(--surface-dark); }
.card .label {
align-self: flex-start; font-family: var(--head); font-size: .66rem; font-weight: 600;
text-transform: uppercase; letter-spacing: .16em; color: var(--ink-2);
background: transparent; padding: 0; border-radius: 0;
}
.dark .card .label { color: var(--grey); }
.card h3 { margin-top: 2px; }
.card p { font-size: .98rem; color: var(--ink-2); }
.dark .card p { color: #C3CAD0; }
.card .cardlink { margin-top: auto; padding-top: 10px; font-family: var(--head); font-weight: 700; color: var(--red); text-decoration: none; }
a.card { text-decoration: none; color: inherit; transition: background .16s ease; }
a.card:hover { transform: none; box-shadow: none; background: rgba(29,37,45,.03); }
.dark a.card:hover { background: rgba(255,255,255,.04); }
.card .btn { margin-top: auto; align-self: flex-start; font-size: .92rem; padding: 13px 22px; }
.card .num { font-family: var(--head); font-weight: 900; color: var(--red); font-size: .95rem; }
@media (min-width: 760px) {
.cards.three { grid-template-columns: repeat(3, 1fr); }
.cards.two { grid-template-columns: repeat(2, 1fr); }
}
/* ---------- comparison ---------- */
.compare { display: grid; gap: 16px; margin-top: 8px; }
@media (min-width: 820px) { .compare { grid-template-columns: 1fr 1fr; } }
.compare-col { background: var(--wash); border: 0; border-radius: var(--rad); padding: 30px 28px; border-top: 4px solid var(--line); }
.compare-col.win { border-top-color: var(--green); }
.compare-col.lose { border-top-color: var(--grey); }
.compare-col h3 { margin-bottom: 18px; }
.compare-col ul { list-style: none; }
.compare-col li { padding: 12px 0 12px 30px; position: relative; border-bottom: 1px solid var(--line); font-size: 1rem; }
.compare-col li:last-child { border-bottom: 0; }
.compare-col li::before { position: absolute; left: 0; top: 12px; font-weight: 700; font-family: var(--head); }
.compare-col.win { background: rgba(30,122,70,.055); }
.win li::before { content: "✓"; color: var(--green); }
.lose li::before { content: "✕"; color: var(--grey); }
.lose { color: var(--ink-2); }
.compare-col strong { font-family: var(--head); font-weight: 700; }
/* ---------- story / prose panels ---------- */
.prose { max-width: 64ch; margin: 0; }
.prose p { margin-top: 20px; font-size: clamp(1rem, 2.4vw, 1.1rem); }
.prose p:first-of-type { margin-top: 24px; }
.prose strong { font-family: var(--head); font-weight: 700; }
.pullquote {
margin: 32px 0 0; max-width: 24ch; font-family: var(--head); font-weight: 900;
font-size: clamp(1.3rem, 3.2vw, 1.9rem); line-height: 1.16; letter-spacing: -.022em;
}
.attrib { margin-top: 14px; font-family: var(--head); font-weight: 700; color: var(--red); font-size: .92rem; }
/* ---------- curriculum ---------- */
.weeks { max-width: 860px; margin: 0; display: grid; gap: 12px; }
.dark .weeks { border-top-color: rgba(255,255,255,.28); }
.week {
background: var(--wash); border: 0; border-radius: var(--rad);
padding: 24px 26px; display: grid; grid-template-columns: 92px 1fr; gap: 22px; align-items: start;
}
.dark .week { background: var(--surface-dark); }
.week .wk {
font-family: var(--head); font-weight: 700; color: var(--ink-2); font-size: .72rem;
text-transform: uppercase; letter-spacing: .14em; padding-top: 5px;
}
.dark .week .wk { color: var(--grey); }
.week p { font-size: .98rem; margin-top: 5px; color: var(--ink-2); }
.dark .week p { color: #C3CAD0; }
@media (max-width: 520px) { .week { grid-template-columns: 1fr; gap: 6px; } }
/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin: 0; }
.dark .faq { border-top-color: rgba(255,255,255,.28); }
.faq details { background: var(--wash); border: 0; border-radius: var(--rad); margin-bottom: 12px; }
.dark .faq details { background: var(--surface-dark); }
.faq summary {
cursor: pointer; list-style: none; font-family: var(--head); font-weight: 700;
padding: 22px 52px 22px 24px; position: relative; font-size: 1.06rem; letter-spacing: -.012em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 22px; top: 18px; color: var(--red); font-size: 1.5rem; font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 52px 24px 24px; font-size: .99rem; color: var(--ink-2); }
.dark .faq details p { color: #C3CAD0; }
/* ---------- media / portrait ---------- */
.media { border-radius: var(--rad); overflow: hidden; background: #2A333D; min-height: 280px; position: relative; }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media.img-missing::after {
content: attr(data-placeholder);
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
color: #8B959E; font-weight: 700; font-size: .9rem; letter-spacing: .05em; text-align: center; padding: 20px;
}
.media.img-missing img { display: none; }
.split { display: grid; gap: 36px; align-items: center; }
@media (min-width: 860px) {
.split { grid-template-columns: 5fr 6fr; gap: 64px; }
}
.img-band { max-width: 1440px; margin-left: auto; margin-right: auto; overflow: hidden; aspect-ratio: 4 / 3; background: #2A333D; border-radius: var(--rad); }
.img-band img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 760px) { .img-band { aspect-ratio: 21 / 9; } }
.img-caption {
text-align: left; margin-top: 14px; padding: 0 26px; max-width: 1180px; margin-left: auto; margin-right: auto; font-size: .84rem; color: var(--ink-2);
display: flex; gap: 10px; align-items: baseline;
}
.img-caption::before { content: ""; flex: 0 0 22px; height: 1px; background: var(--grey); transform: translateY(-4px); }
.dark .img-caption { color: var(--grey); }
/* ---------- blog article ---------- */
.post-head { max-width: 780px; margin: 0 0 10px; text-align: left; }
.post-meta { font-size: .84rem; color: var(--ink-2); margin-top: 18px; font-family: var(--head); letter-spacing: .04em; }
.post-meta .cat { color: var(--red); font-weight: 700; }
.article { max-width: 68ch; margin: 0; }
.article > * { margin-top: 22px; }
.article p { font-size: clamp(1.02rem, 2.4vw, 1.12rem); }
.article h2 { font-size: clamp(1.4rem, 4vw, 1.95rem); margin-top: 48px; }
.article h3 { font-size: 1.2rem; margin-top: 34px; }
.article ul, .article ol { padding-left: 22px; }
.article li { margin-top: 8px; font-size: 1.02rem; }
.article blockquote {
border-left: 3px solid var(--red); padding: 4px 0 4px 22px; margin-left: 0;
font-family: var(--head); font-weight: 700; font-size: 1.18rem; line-height: 1.34; letter-spacing: -.015em;
}
.article img { border-radius: var(--rad); margin-top: 32px; }
.article a { color: var(--red); font-weight: 700; }
.back-link {
display: inline-block; margin-bottom: 28px; text-decoration: none; font-family: var(--head);
font-weight: 700; font-size: .88rem; color: var(--ink-2); text-transform: uppercase; letter-spacing: .1em;
}
.back-link:hover { color: var(--navy); }
.post-card-img { aspect-ratio: 16/9; border-radius: var(--rad); overflow: hidden; margin: 0 0 14px; background: #DFE3E6; }
.post-card-img img { width: 100%; height: 100%; object-fit: cover; }
/* ---------- newsletter ---------- */
.news-form { display: flex; flex-direction: column; gap: 12px; max-width: 520px; margin: 26px 0 0; }
.news-form input[type=email] {
padding: 16px 18px; border-radius: var(--rad-btn); border: 1px solid var(--line);
font-family: var(--body); font-size: 1rem; width: 100%; background: var(--wash); color: var(--navy);
}
.dark .news-form input[type=email] { background: var(--surface-dark); border-color: var(--line-dark); color: var(--paper); }
.news-form input[type=email]:focus { outline: 2px solid var(--red); border-color: var(--red); }
@media (min-width: 560px) {
.news-form { flex-direction: row; }
.news-form input[type=email] { flex: 1; }
.news-form .btn { display: inline-block; width: auto; white-space: nowrap; }
}
.news-steps { max-width: 620px; margin: 26px 0 0; text-align: left; }
.news-steps p { padding: 12px 0; border-bottom: 1px solid var(--line); }
.dark .news-steps p { border-color: var(--line-dark); }
.news-steps strong { font-family: var(--head); font-weight: 700; color: var(--red); }
/* ---------- thank you ---------- */
.tick-circle {
width: 74px; height: 74px; border-radius: var(--rad); background: var(--red);
display: flex; align-items: center; justify-content: center; margin: 0 0 30px;
}
.tick-circle svg { width: 36px; height: 36px; }
.steps { max-width: 620px; margin: 34px 0 0; text-align: left; counter-reset: step; border-top: 2px solid var(--navy); }
.dark .steps { border-top-color: rgba(255,255,255,.28); }
.steps > div { display: grid; grid-template-columns: 48px 1fr; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.dark .steps > div { border-bottom-color: var(--line-dark); }
.steps > div:last-child { border-bottom: 0; }
.steps .n {
counter-increment: step; width: auto; height: auto; border-radius: 0;
background: transparent; color: var(--red); font-family: var(--head); font-weight: 900;
display: block; font-size: 1.1rem; letter-spacing: -.02em;
}
.steps .n::before { content: counter(step, decimal-leading-zero); }
.steps p { font-size: .98rem; color: var(--ink-2); }
.dark .steps p { color: #C3CAD0; }
.steps strong { font-family: var(--head); font-weight: 700; color: var(--navy); }
.dark .steps strong { color: var(--white); }
/* ---------- guarantee ---------- */
.guarantee-box {
max-width: 820px; margin: 0; background: var(--wash); border: 0;
border-top: 4px solid var(--green); border-radius: var(--rad); padding: 32px 30px; text-align: left;
}
/* ---------- photo gallery ---------- */
.gallery { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); max-width: 1440px; margin-left: auto; margin-right: auto; }
.gallery figure { margin: 0; border-radius: var(--rad); overflow: hidden; aspect-ratio: 1/1; background: #DFE3E6; }
.gallery img { width: 100%; height: 100%; object-fit: cover; }
.gallery .wide { grid-column: span 2; aspect-ratio: 16/9; }
@media (min-width: 760px) {
.gallery { grid-template-columns: repeat(4, 1fr); }
.gallery .wide { grid-column: span 2; aspect-ratio: 1/1; }
}
/* ---------- pricing: hairline columns, feature inverts ---------- */
.price-grid { display: grid; gap: 16px; }
@media (min-width: 860px) { .price-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .price-grid.four { grid-template-columns: repeat(4, 1fr); } }
.price-card {
background: var(--wash); border: 0; border-radius: var(--rad);
padding: 30px 26px 32px; display: flex; flex-direction: column; gap: 14px; position: relative;
}
.dark .price-card { background: var(--surface-dark); }
.price-card.feature { border: 0; background: var(--panel); color: var(--paper); box-shadow: none; padding-left: 26px; border-radius: var(--rad); }
@media (min-width: 1100px) { .price-card.feature { margin-top: -30px; padding-top: 30px; } }
.price-card .tier { font-family: var(--head); font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; color: var(--ink-2); }
.price-card.feature .tier { color: var(--red); }
.price-card .amount {
font-family: var(--head); font-weight: 900; font-size: 2.35rem; line-height: 1;
letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.price-card .amount small { font-size: .78rem; font-weight: 600; color: var(--ink-2); display: block; margin-top: 9px; letter-spacing: 0; line-height: 1.5; }
.price-card.feature .amount small { color: var(--grey); }
.price-card .was { text-decoration: line-through; color: var(--grey); font-size: 1rem; font-weight: 700; }
.price-card ul { list-style: none; margin-top: 4px; flex: 1; }
.price-card li { padding: 8px 0 8px 20px; position: relative; font-size: .94rem; line-height: 1.45; color: var(--ink-2); }
.price-card.feature li { color: #C3CAD0; }
.price-card li::before { content: ""; position: absolute; left: 0; top: 15px; width: 7px; height: 1px; background: var(--red); }
.price-card .btn { margin-top: 18px; }
.ribbon {
position: static; transform: none; align-self: flex-start;
background: var(--red); color: #fff; font-family: var(--head); font-weight: 700;
font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
padding: 5px 11px; border-radius: var(--rad-sm); white-space: nowrap;
}
/* ---------- the trade (give / get) ---------- */
.trade { display: grid; gap: 16px; }
@media (min-width: 820px) { .trade { grid-template-columns: 1fr 1fr; } }
.trade-col { border-radius: var(--rad); padding: 28px 26px; background: rgba(255,255,255,.05); }
@media (min-width: 820px) {
.trade-col.give { padding-right: 44px; border-right: 1px solid var(--line-dark); }
.trade-col.get { padding-left: 44px; }
}
.trade-col h3 { margin-bottom: 16px; }
.trade-col ul { list-style: none; }
.trade-col li { padding: 11px 0 11px 28px; position: relative; font-size: .98rem; border-bottom: 1px solid var(--line-dark); }
.trade-col li:last-child { border-bottom: 0; }
.trade-col li::before { position: absolute; left: 0; font-weight: 700; font-family: var(--head); }
.give { background: transparent; border: 0; }
.give li::before { content: "→"; color: var(--grey); }
.get { background: transparent; color: inherit; }
.get li::before { content: "★"; color: var(--red); }
/* ---------- credentials ---------- */
.creds { list-style: none; max-width: 680px; margin: 26px 0 0; text-align: left; border-top: 1px solid var(--line); }
.creds li { padding: 16px 0 16px 30px; position: relative; border-bottom: 1px solid var(--line); font-size: 1rem; }
.creds li:last-child { border-bottom: 0; }
.creds li::before { content: ""; position: absolute; left: 0; top: 24px; width: 12px; height: 1px; background: var(--red); }
.creds strong { font-family: var(--head); font-weight: 700; display: block; }
.creds span { color: var(--ink-2); font-size: .92rem; }
.dark .creds { border-top-color: var(--line-dark); }
.dark .creds li { border-color: var(--line-dark); }
.dark .creds span { color: var(--grey); }
/* ---------- policy pages ---------- */
.policy { max-width: 68ch; margin: 0; }
.policy h2 { font-size: 1.45rem; margin-top: 46px; }
.policy h3 { font-size: 1.08rem; margin-top: 28px; }
.policy p, .policy li { margin-top: 12px; font-size: 1rem; }
.policy ul { padding-left: 22px; }
.policy .updated { color: var(--ink-2); font-size: .88rem; font-family: var(--head); letter-spacing: .04em; }
.callout { background: var(--wash); border: 0; border-left: 3px solid var(--red); border-radius: var(--rad); padding: 4px 0 4px 22px; margin-top: 28px; }
.callout p:first-child { margin-top: 0; }
/* ---------- footer ---------- */
footer { background: var(--panel); color: var(--grey); padding: 76px 0 34px; font-size: .92rem; }
footer .foot-grid { display: grid; gap: 34px; }
@media (min-width: 760px) { footer .foot-grid { grid-template-columns: 2fr 1fr 1fr; } }
footer .logo { color: #fff; }
footer h4 {
color: #fff; font-family: var(--head); font-size: .7rem; font-weight: 600;
text-transform: uppercase; letter-spacing: .16em; margin-bottom: 14px;
}
footer a { color: var(--grey); text-decoration: none; display: block; padding: 5px 0; transition: color .15s; }
footer a:hover { color: #fff; }
footer .tagline { margin-top: 14px; max-width: 34ch; color: #8A939B; }
footer .fineprint { margin-top: 52px; padding-top: 22px; border-top: 1px solid var(--line-dark); font-size: .8rem; color: #7C858D; }
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
html { scroll-behavior: auto; }
}
/* ---------- the rail ----------
Section label sits in the left margin, content anchored beside it.
Pages that don't use .rail are unaffected — .eyebrow still works
standalone exactly as before. */
.rail { display: grid; gap: 16px; }
@media (min-width: 980px) {
.rail { grid-template-columns: 200px minmax(0, 1fr); gap: 60px; align-items: start; }
}
.rail > .eyebrow { margin-bottom: 0; padding-top: .5em; line-height: 1.45; }
.rail.section-head { max-width: none; }
.rail.section-head > div > .lead { margin-top: 16px; }
/* ---------- film block ----------
The video sits directly under the hero, full width, with the photo
strip beneath it so the top of the page is one photographic unit. */
.film-block { padding-top: 0; }
.film-block .video-wrap { margin-top: 0; }
.strip {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px;
max-width: 1440px; margin-left: auto; margin-right: auto;
}
.strip figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: #2A333D; border-radius: var(--rad); }
.strip img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 620px) { .strip { grid-template-columns: 1fr; } }
.film-block .img-caption { margin-top: 16px; }
/* ---------- click-to-play film cell ----------
Sits as the middle cell of the photo strip. The poster is a local
image, so nothing is requested from YouTube until the click. */
.film-cell { position: relative; }
.video-wrap .play { aspect-ratio: 16 / 9; }
.video-wrap .play, .film-cell .play {
display: block; width: 100%; height: 100%; padding: 0; border: 0;
background: var(--panel); cursor: pointer; position: relative; overflow: hidden;
border-radius: var(--rad);
}
.video-wrap .play img, .film-cell .play img {
width: 100%; height: 100%; object-fit: cover; opacity: .78;
transition: opacity .2s ease, transform .35s ease;
}
.video-wrap .play:hover img, .film-cell .play:hover img,
.video-wrap .play:focus-visible img, .film-cell .play:focus-visible img { opacity: .62; transform: scale(1.03); }
.play-mark {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
.play-mark svg {
width: 62px; height: 62px; fill: #fff; padding: 18px 16px 18px 21px;
background: rgba(29,37,45,.55); border-radius: 50%;
border: 2px solid rgba(255,255,255,.9);
transition: background .2s ease, transform .2s ease;
}
.video-wrap .play:hover .play-mark svg, .film-cell .play:hover .play-mark svg,
.video-wrap .play:focus-visible .play-mark svg, .film-cell .play:focus-visible .play-mark svg {
background: var(--red); border-color: var(--red); transform: scale(1.07);
}
/* the injected player takes the cell's shape */
.video-wrap iframe, .film-cell iframe {
width: 100%; height: 100%; border: 0; display: block; border-radius: var(--rad);
}
@media (max-width: 620px) { .play-mark svg { width: 54px; height: 54px; } }
/* ---------- waves ----------
Every dark panel gets a curved edge top and bottom, so sections flow
into one another instead of butting up in hard bands. Pure CSS, so it
applies to all 16 pages with no markup changes.
The wave colour is baked into the data URI — if --paper ever changes
from white, these three fills need changing with it. */
.dark { position: relative; isolation: isolate; }
.section.dark { padding-top: 140px; padding-bottom: 140px; }
.dark::before, .dark::after {
content: ""; position: absolute; left: 0; right: 0;
height: clamp(32px, 4vw, 62px); pointer-events: none; z-index: 1;
background-repeat: no-repeat; background-size: 100% 100%;
}
.dark::before {
top: -1px;
background-image: url("data:image/svg+xml;utf8,");
}
.dark::after {
bottom: -1px;
background-image: url("data:image/svg+xml;utf8,");
}
/* the footer is navy too, so it needs the same curved entry */
footer { position: relative; padding-top: 132px; }
footer::before {
content: ""; position: absolute; top: -1px; left: 0; right: 0;
height: clamp(32px, 4vw, 62px); pointer-events: none;
background-repeat: no-repeat; background-size: 100% 100%;
background-image: url("data:image/svg+xml;utf8,");
}
/* a dark panel sitting directly above the footer needs no closing wave */
.dark:has(+ footer)::after { display: none; }
.dark + footer::before { display: none; }
/* keep content clear of the curves */
.dark > .container { position: relative; z-index: 2; }
footer > .container { position: relative; z-index: 2; }
/* ============================================================
RESTRAINT PASS
Upstate and calebralston.com are quiet: near-square surfaces,
generous space, one accent, almost no motion. The layout does
the work. Everything below removes ornament rather than adding it.
============================================================ */
/* The section label goes back to a quiet uppercase line under a short
red rule. No coloured chip — the rail placement is the device. */
.eyebrow {
display: block; background: none; padding: 0; border-radius: 0;
color: var(--ink-2); letter-spacing: .17em;
}
.eyebrow::before {
content: ""; display: block; width: 26px; height: 2px;
background: var(--red); margin-bottom: 12px;
}
.dark .eyebrow { background: none; color: var(--grey); }
.rail > .eyebrow { padding-top: .5em; }
/* Hover is a lift, not a performance. No tilts, no rocking. */
a.card { transition: transform .18s ease, background .18s ease; }
a.card:hover { transform: translateY(-3px); background: var(--wash); }
.dark a.card:hover { background: rgba(255,255,255,.05); }
.strip figure { transition: transform .25s ease; }
.strip figure:hover { transform: translateY(-4px); }
.play-mark svg { width: 66px; height: 66px; transition: background .18s ease, transform .18s ease; }
.video-wrap .play:hover .play-mark svg, .film-cell .play:hover .play-mark svg,
.video-wrap .play:focus-visible .play-mark svg, .film-cell .play:focus-visible .play-mark svg {
background: var(--red); border-color: var(--red); transform: scale(1.06);
}
/* Surfaces sit on a hairline rather than a tint, so the page stays white. */
.price-card, .card, .compare-col, .faq details, .week, .guarantee-box {
background: transparent; box-shadow: inset 0 0 0 1px var(--line);
}
.dark .price-card, .dark .card, .dark .week, .dark .faq details {
background: transparent; box-shadow: inset 0 0 0 1px var(--line-dark);
}
.price-card.feature { background: var(--panel); box-shadow: none; }
.compare-col.win { background: transparent; border-top-color: var(--green); }
.compare-col.lose { border-top-color: var(--grey); }
/* Buttons keep their pill, and that is the only round thing on the page. */
.btn { letter-spacing: .02em; }
/* ---------- the rail, applied site-wide ----------
Any .section-head becomes a rail: the eyebrow drops into the left
margin and spans the full height, everything else stacks in the
right column. No markup changes needed on the other 15 pages. */
@media (min-width: 980px) {
.section-head {
display: grid; grid-template-columns: 200px minmax(0, 1fr);
column-gap: 60px; align-items: start; max-width: none;
}
.section-head > .eyebrow { grid-column: 1; grid-row: 1 / -1; margin-bottom: 0; }
.section-head > :not(.eyebrow) { grid-column: 2; }
.section-head > h2 { grid-row: 1; }
/* .rail.section-head is already a grid from the homepage markup —
don't double up on it */
.rail.section-head { grid-template-columns: 200px minmax(0, 1fr); }
.rail.section-head > .eyebrow { grid-row: 1; }
.rail.section-head > div { grid-column: 2; grid-row: 1; }
}