/* Proxy HTML Report Style — reusable tokens + base + component kit.
Import this, add the Google Fonts , and you have the whole system.
Reference build: Bon Appetit/pitch-site/index.html
Google Fonts for :
*/
/* CA Spotnik — bundled display face */
@font-face {
font-family: 'CA Spotnik';
src: url('assets/fonts/CASpotnik-Light.otf') format('opentype');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'CA Spotnik';
src: url('assets/fonts/CASpotnik-Regular.otf') format('opentype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'CA Spotnik';
src: url('assets/fonts/CASpotnik-Medium.otf') format('opentype');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'CA Spotnik';
src: url('assets/fonts/CASpotnik-Bold.otf') format('opentype');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'CA Spotnik';
src: url('assets/fonts/CASpotnik-Italic.otf') format('opentype');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'CA Spotnik';
src: url('assets/fonts/CASpotnik-MediumItalic.otf') format('opentype');
font-weight: 500;
font-style: italic;
}
:root {
--bg: #0e0e0e;
--bg-2: #161616;
--bg-3: #1c1c1c;
--text: #f0ede8;
--text-mid: #c8c3bc;
--text-muted: #9c9790;
--accent: #3fe7e0;
--accent-dim: #2abdb7;
--accent-glow: rgba(63, 231, 224, 0.12);
--warn: #f0a04b;
--bad: #e5565f;
--good: #5ed39a;
--border: #2a2a2a;
--border-light: #333;
--display: 'CA Spotnik', 'Fraunces', Georgia, serif;
--serif: 'Fraunces', Georgia, serif;
--mono: 'DM Mono', ui-monospace, monospace;
--sans: 'Inter', system-ui, sans-serif;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: var(--bg);
color: var(--text);
font-family: var(--sans);
line-height: 1.62;
-webkit-font-smoothing: antialiased;
}
img {
max-width: 100%;
display: block;
}
a {
color: inherit;
}
/* ── layout ── */
.wrap {
max-width: 1080px;
margin: 0 auto;
padding: 0 26px;
}
section {
padding: 92px 0;
border-bottom: 1px solid var(--border);
}
.two {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 26px;
margin-top: 44px;
}
.three {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 44px;
}
@media (max-width: 900px) {
.two,
.three {
grid-template-columns: 1fr;
}
section {
padding: 66px 0;
}
}
/* ── typography ──
text-wrap: balance on headings / pretty on body = no orphaned last-line words */
h1 {
font-family: var(--display);
font-size: clamp(38px, 5.4vw, 68px);
line-height: 1.14;
letter-spacing: -0.02em;
font-weight: 500;
text-wrap: balance;
}
h2 {
font-family: var(--display);
font-size: clamp(28px, 3.6vw, 44px);
line-height: 1.12;
letter-spacing: -0.018em;
font-weight: 500;
text-wrap: balance;
}
h3 {
font-family: var(--display);
font-size: 21px;
line-height: 1.1;
letter-spacing: -0.01em;
font-weight: 500;
text-wrap: balance;
}
/* HERO EMPHASIS: ONLY the main hero carries one italic-teal . Section
headlines stay plain white (no cyan). */
.hero h1 em {
font-style: italic;
color: var(--accent);
}
p {
color: var(--text-mid);
text-wrap: pretty;
}
p.lede {
font-size: 18.5px;
color: var(--text-mid);
max-width: 60ch;
margin-top: 20px;
}
.serif {
font-family: var(--serif);
font-style: italic;
color: var(--text);
}
/* eyebrow: mono, uppercase, teal, with a short teal dash before it */
.eyebrow {
font-family: var(--mono);
font-size: 11.5px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 12px;
}
.eyebrow::before {
content: '';
width: 26px;
height: 1px;
background: var(--accent);
}
/* ── nav: sticky bar + right slide-out menu (ALL-CAPS mono) ── */
.topbar {
position: sticky;
top: 0;
z-index: 70;
background: rgba(14, 14, 14, 0.9);
backdrop-filter: blur(14px);
border-bottom: 1px solid var(--border);
}
.topbar .wrap {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 14px 26px;
}
.brand img {
height: 20px;
width: auto;
}
.topnav {
display: flex;
gap: 22px;
font-family: var(--mono);
font-size: 12px;
color: var(--text-muted);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.topnav a {
text-decoration: none;
transition: 0.16s;
}
.topnav a:hover {
color: var(--accent);
}
.burger {
display: none;
flex-direction: column;
align-items: flex-end;
gap: 5px;
width: 42px;
height: 42px;
padding: 9px;
margin-right: -9px;
background: transparent;
border: 0;
cursor: pointer;
}
.burger span {
display: block;
height: 2px;
width: 22px;
background: var(--text);
border-radius: 2px;
transition: background 0.2s;
}
.burger span:nth-child(2) {
width: 15px;
}
.burger:hover span {
background: var(--accent);
}
.menu-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(2px);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
z-index: 90;
}
.menu-overlay.open {
opacity: 1;
pointer-events: auto;
}
.menu {
position: fixed;
top: 0;
right: 0;
height: 100%;
width: min(320px, 86vw);
background: var(--bg-2);
border-left: 1px solid var(--border);
box-shadow: -24px 0 60px rgba(0, 0, 0, 0.5);
z-index: 100;
transform: translateX(100%);
transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
padding: 82px 34px 34px;
overflow-y: auto;
}
.menu.open {
transform: translateX(0);
}
.menu a {
font-family: var(--mono);
font-size: 14px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-mid);
text-decoration: none;
padding: 14px 0;
border-bottom: 1px solid var(--border);
transition:
color 0.16s,
padding-left 0.16s;
}
.menu a:hover {
color: var(--accent);
padding-left: 7px;
}
.menu-close {
position: absolute;
top: 22px;
right: 24px;
width: 38px;
height: 38px;
background: transparent;
border: 0;
color: var(--text-muted);
font-size: 30px;
line-height: 1;
cursor: pointer;
}
.menu-close:hover {
color: var(--accent);
}
body.menu-open {
overflow: hidden;
}
@media (max-width: 900px) {
.topnav {
display: none;
}
.burger {
display: flex;
}
}
/* ── hero (teal glow gradient) ── */
.hero {
padding: 104px 0 92px;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(
760px 420px at 76% 22%,
var(--accent-glow),
transparent 70%
);
pointer-events: none;
}
.hero .wrap {
position: relative;
}
.hero-meta {
display: flex;
gap: 32px;
margin-top: 46px;
padding-top: 26px;
border-top: 1px solid var(--border);
flex-wrap: wrap;
font-family: var(--mono);
font-size: 12.5px;
color: var(--text-muted);
}
.hero-meta b {
display: block;
color: var(--text);
font-size: 14px;
letter-spacing: 0.02em;
margin-bottom: 3px;
}
/* ── primitives ── */
.pill {
font-family: var(--mono);
font-size: 11.5px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--accent);
border: 1px solid var(--border-light);
border-radius: 999px;
padding: 5px 12px;
display: inline-flex;
align-items: center;
gap: 7px;
}
.box {
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: 14px;
padding: 26px;
}
.callout {
background: var(--accent-glow);
border: 1px solid var(--accent-dim);
border-radius: 14px;
padding: 22px 24px;
color: var(--text);
}
.stat {
font-family: var(--display);
font-size: clamp(34px, 5vw, 56px);
font-weight: 500;
color: var(--accent);
line-height: 1;
}
/* NUMERAL RULE: always 10px between a big numeral and its descriptor line */
.num-sub {
margin-top: 10px;
font-family: var(--mono);
font-size: 11.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
text-wrap: balance;
}
/* status pills (tinted) */
.p-good {
background: rgba(94, 211, 154, 0.1);
color: var(--good);
border: 1px solid rgba(94, 211, 154, 0.28);
}
.p-warn {
background: rgba(240, 160, 75, 0.1);
color: var(--warn);
border: 1px solid rgba(240, 160, 75, 0.28);
}
.p-bad {
background: rgba(229, 86, 95, 0.1);
color: var(--bad);
border: 1px solid rgba(229, 86, 95, 0.28);
}
.p-good,
.p-warn,
.p-bad {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
border-radius: 999px;
padding: 5px 12px;
display: inline-flex;
}
/* ── buttons / CTA ── */
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--accent);
color: #08201f;
font-family: var(--mono);
font-weight: 500;
font-size: 13px;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 15px 30px;
border-radius: 0;
text-decoration: none;
transition: 0.18s;
}
.btn:hover {
background: #6df3ee;
transform: translateY(-2px);
}
.btn-2 {
background: transparent;
color: var(--text);
border: 1px solid var(--border-light);
}
.btn-2:hover {
background: var(--bg-2);
border-color: var(--accent);
}
.cta {
text-align: center;
padding: 104px 0;
border: 0;
}
.cta h2 {
max-width: 20ch;
margin: 0 auto;
}
.cta p {
max-width: 52ch;
margin: 20px auto 34px;
font-size: 17px;
}
/* ── lists ── */
ul.ticks {
list-style: none;
display: grid;
gap: 9px;
margin-top: 16px;
}
ul.ticks li {
position: relative;
padding-left: 22px;
color: var(--text-mid);
font-size: 14.5px;
}
ul.ticks li::before {
content: '→';
position: absolute;
left: 0;
color: var(--accent);
}
/* pro / con check + cross lists */
.checklist {
list-style: none;
}
.checklist li {
font-size: 14px;
color: var(--text-mid);
padding-left: 24px;
position: relative;
margin-bottom: 11px;
line-height: 1.5;
}
.checklist li b {
color: var(--text);
font-weight: 600;
}
.pro li::before {
content: '✓';
position: absolute;
left: 0;
top: 0;
color: var(--good);
font-size: 13px;
font-weight: 700;
}
.con li::before {
content: '✕';
position: absolute;
left: 1px;
top: 1px;
color: var(--bad);
font-size: 11px;
font-weight: 700;
}
/* ── option / comparison cards ── */
.opts {
display: grid;
gap: 18px;
margin-top: 44px;
}
.opt {
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: 16px;
padding: 30px;
position: relative;
}
.opt.is-rec {
border-color: var(--accent);
box-shadow:
0 0 0 1px var(--accent-glow),
0 24px 50px rgba(0, 0, 0, 0.4);
}
.rec-badge {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
background: #0e0e0e;
border: 1px solid rgba(63, 231, 224, 0.4);
padding: 5px 12px;
border-radius: 999px;
position: absolute;
top: -12px;
left: 28px;
}
.opt-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 24px;
}
.opt-tag {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 8px;
}
.opt-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-top: 22px;
}
.col-k {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 13px;
color: var(--text-muted);
}
.col-k.good {
color: var(--good);
}
.col-k.bad {
color: var(--bad);
}
.opt-foot {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid var(--border);
font-size: 13.5px;
color: var(--text-mid);
}
.opt-foot b {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-muted);
display: block;
margin-bottom: 5px;
}
/* ── comparison matrix (scrolls on mobile) ── */
.tscroll {
overflow-x: auto;
margin-top: 20px;
-webkit-overflow-scrolling: touch;
}
.matrix {
width: 100%;
border-collapse: collapse;
font-size: 14px;
min-width: 520px;
}
.matrix th,
.matrix td {
text-align: left;
padding: 13px 16px;
border-bottom: 1px solid var(--border);
}
.matrix thead th {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
}
.matrix td:first-child {
color: var(--text);
}
footer {
padding: 34px 0;
font-family: var(--mono);
font-size: 11.5px;
color: var(--text-muted);
display: flex;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
letter-spacing: 0.06em;
}
/* ── HOUSE RULE: DM Mono buttons + square corners (no radius) on all
containers and buttons. Buttons are mono/uppercase (see .btn above). ── */
.btn,
.btn-2,
.box,
.callout,
.opt,
.pill,
.rec-badge,
.p-good,
.p-warn,
.p-bad {
border-radius: 0 !important;
}