/* ============================================================================
agentweek.aireport.nl - zelfstandige stylesheet.
AI Report-ontwerptaal (kleuren, fonts). Opbouw vanuit de partner-funnel:
hero -> sociale proof -> doelgroep -> kanalen (podcast/nieuwsbrief) -> contact.
Uitlijning bewust gemengd: secties + contact gecentreerd, leestekst links.
Fonts via in de .
============================================================================ */
:root {
--air-wine: #590032;
--air-wine-dark: #3c0024;
--air-wine-soft: #7b164e;
--air-ink: #2c1122;
--air-muted: #59434d;
--air-muted-2: #7c6670;
--air-surface: #fff2f2;
--air-surface-soft: #ffdbdb;
--air-surface-peach: #feece8;
--air-surface-light: #fffafa;
--air-card: #ffffff;
--air-line: rgba(89, 0, 50, 0.14);
--air-line-strong: rgba(89, 0, 50, 0.24);
--air-gradient: linear-gradient(135deg, #2a1d6e 0%, #7c5cd6 34%, #e98aa0 64%, #f0856f 100%);
--air-shadow: 0 24px 70px rgba(89, 0, 50, 0.12);
--air-shadow-sm: 0 8px 24px rgba(89, 0, 50, 0.1);
--font-display: "Newsreader", Georgia, "Times New Roman", serif;
--font-body: "Public Sans", system-ui, -apple-system, Arial, sans-serif;
--radius: 8px;
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
background:
linear-gradient(180deg, rgba(255, 219, 219, 0.45), transparent 520px),
var(--air-surface);
color: var(--air-ink);
font-family: var(--font-body);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
button,
a {
font: inherit;
}
a {
color: inherit;
}
.shell {
width: min(1120px, calc(100% - 44px));
margin: 0 auto;
}
h1,
h2,
h3,
p {
margin-top: 0;
}
h1,
h2,
h3 {
font-family: var(--font-display);
letter-spacing: 0;
}
.eyebrow {
color: var(--air-wine);
font-family: var(--font-body);
font-size: 0.68rem;
font-weight: 900;
letter-spacing: 0.18em;
text-transform: uppercase;
margin: 0 0 16px;
}
.title-mark {
display: inline-block;
padding: 0 0.12em 0.04em;
background: var(--air-wine);
color: #fff;
}
/* ---- Navigatie ---- */
.nav-shell {
position: sticky;
top: 18px;
z-index: 10;
}
.nav {
min-height: 66px;
padding: 10px 12px;
border: 1px solid var(--air-line);
border-radius: var(--radius);
background: rgba(255, 242, 242, 0.9);
box-shadow: var(--air-shadow-sm);
display: grid;
grid-template-columns: auto 1fr auto;
gap: 18px;
align-items: center;
backdrop-filter: blur(18px);
}
.brand {
display: flex;
align-items: center;
min-width: 150px;
}
.brand img {
display: block;
width: 150px;
height: auto;
}
.nav-menu {
display: grid;
grid-template-columns: 1fr auto;
gap: 18px;
align-items: center;
}
.mobile-menu-toggle {
display: none;
}
.nav-links,
.nav-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.nav-actions {
justify-content: flex-end;
}
.nav-link,
.pill,
.button-primary {
min-height: 42px;
border-radius: 0;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
white-space: nowrap;
font-family: var(--font-body);
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.nav-link {
border: 0;
background: transparent;
color: var(--air-wine);
cursor: pointer;
padding: 0 11px;
}
.nav-link:hover {
background: var(--air-surface-soft);
}
.pill {
padding: 0 16px;
}
.pill-primary,
.button-primary {
color: #fff;
background: var(--air-wine);
box-shadow: 0 12px 28px rgba(89, 0, 50, 0.18);
}
.mobile-sticky-cta {
display: none;
}
/* ---- Hero (tekst links + vierkante podcast-artwork) ---- */
.hero {
padding: 46px 0 8px;
}
.hero-inner {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: clamp(28px, 5vw, 64px);
align-items: center;
}
.hero-copy {
min-width: 0;
}
.hero-art {
min-width: 0;
}
.hero-art img {
display: block;
width: 100%;
height: auto;
border-radius: var(--radius);
box-shadow: var(--air-shadow);
}
.hero h1 {
margin: 0 0 22px;
color: var(--air-ink);
font-size: clamp(2.6rem, 5vw, 4.4rem);
line-height: 1.08;
font-weight: 800;
}
.hero-subtitle {
margin: 0 0 30px;
color: var(--air-muted);
font-size: clamp(1.15rem, 1.7vw, 1.42rem);
line-height: 1.5;
font-weight: 400;
}
.hero-actions {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
}
.button-primary {
border: 0;
padding: 0 26px;
min-height: 54px;
}
.text-cta {
color: var(--air-wine);
font-weight: 700;
text-decoration: none;
border-bottom: 1px solid var(--air-line-strong);
padding-bottom: 2px;
}
.text-cta:hover {
border-bottom-color: var(--air-wine);
}
.hero-note {
margin: 18px 0 0;
color: var(--air-muted-2);
font-family: var(--font-display);
font-style: italic;
font-size: 1.05rem;
}
/* ---- Sociale proof: volle-breedte donkere band, prominent ---- */
.trust {
margin-top: 40px;
padding: 40px 0 44px;
background: var(--air-wine-dark);
color: #fff;
text-align: center;
}
.trust-label {
margin: 0 0 22px;
color: var(--air-surface-soft);
font-size: 0.7rem;
font-weight: 900;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.trust-list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 14px 44px;
}
.trust-list li {
font-family: var(--font-display);
font-size: clamp(1.5rem, 3vw, 2.3rem);
font-weight: 800;
line-height: 1.1;
color: #fff;
}
/* ---- Secties: gecentreerde kop, leestekst links ---- */
.section {
padding: 84px 0 0;
}
.section-heading {
max-width: 740px;
margin: 0 auto 40px;
text-align: center;
}
.section-heading h2 {
margin: 0 0 16px;
color: var(--air-ink);
font-size: clamp(2.2rem, 4.6vw, 3.8rem);
line-height: 1.02;
font-weight: 800;
}
.section-heading p:not(.eyebrow) {
margin: 0;
color: var(--air-muted);
font-size: 1.14rem;
line-height: 1.58;
}
/* ---- Lopende tekst (doelgroep) ---- */
.prose {
max-width: 720px;
margin: 0 auto;
}
.prose-lead {
color: var(--air-ink);
font-family: var(--font-display);
font-size: clamp(1.4rem, 2.4vw, 1.9rem);
line-height: 1.34;
font-weight: 700;
margin: 0 0 20px;
}
.prose p:not(.prose-lead) {
color: var(--air-muted);
font-size: 1.12rem;
line-height: 1.62;
margin: 0 0 16px;
}
.prose p:last-child {
margin-bottom: 0;
}
/* ---- Podcast-opties (tekst + audiovoorbeeld, geen screenshot) ---- */
.option-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
max-width: 980px;
margin: 0 auto;
}
.option-card {
display: flex;
flex-direction: column;
border: 1px solid var(--air-line);
border-radius: var(--radius);
background: var(--air-surface-light);
box-shadow: var(--air-shadow-sm);
padding: 30px;
}
.option-name {
margin: 0 0 10px;
color: var(--air-wine);
font-size: 0.68rem;
font-weight: 900;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.option-card h3 {
margin: 0 0 12px;
color: var(--air-ink);
font-size: clamp(1.55rem, 2.6vw, 2.05rem);
line-height: 1.06;
font-weight: 800;
}
.option-card > p {
margin: 0 0 20px;
color: var(--air-muted);
font-size: 1.08rem;
line-height: 1.56;
}
/* Audio-slot (Sam vult 'm met een echte