DEEL 1 — Custom CSS
Ga in SeedProd naar: Page Settings → Advanced → Custom CSS
Selecteer alles wat er al staat, verwijder het, en plak dit erin.
============================================================
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--vb: #233841;
--pb: #65868D;
--beige: #F2E8C9;
--beige-light: #FAF7EF;
--white: #FFFFFF;
--text: #1C2E35;
--mid: #3E5C65;
--muted: #6B8890;
--border: rgba(35,56,65,0.12);
}
html { scroll-behavior: smooth; }
body {
font-family: 'Outfit', sans-serif;
font-weight: 300;
color: var(--text);
background: var(--white);
line-height: 1.7;
}
/* ── NAV ── */
nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
background: rgba(255,255,255,0.92);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border);
padding: 0 48px;
height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
}
.nav-logo {
display: flex;
align-items: center;
gap: 14px;
text-decoration: none;
}
.logo-mark {
width: 36px;
height: 36px;
}
.nav-brand {
font-family: 'Cormorant Garamond', serif;
font-size: 17px;
font-weight: 500;
color: var(--vb);
letter-spacing: 0.03em;
}
.nav-date {
font-size: 12px;
font-weight: 400;
color: var(--pb);
letter-spacing: 0.08em;
text-transform: uppercase;
border: 1px solid var(--border);
padding: 5px 14px;
border-radius: 20px;
}
/* ── HERO ── */
.hero {
padding: 160px 48px 100px;
background: var(--vb);
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: -120px; right: -80px;
width: 500px; height: 500px;
border-radius: 50%;
border: 1px solid rgba(242,232,201,0.12);
pointer-events: none;
}
.hero::after {
content: '';
position: absolute;
top: -40px; right: -160px;
width: 700px; height: 700px;
border-radius: 50%;
border: 1px solid rgba(242,232,201,0.07);
pointer-events: none;
}
.hero-inner {
max-width: 900px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.hero-label {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--beige);
opacity: 0.7;
margin-bottom: 28px;
}
.hero-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(44px, 6vw, 72px);
font-weight: 400;
line-height: 1.08;
color: var(--white);
margin-bottom: 12px;
}
.hero-title em {
font-style: italic;
color: var(--beige);
}
.hero-subtitle {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(20px, 2.8vw, 28px);
font-weight: 300;
color: var(--pb);
margin-bottom: 40px;
letter-spacing: 0.01em;
}
.hero-pills {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 52px;
}
.pill {
font-size: 12px;
font-weight: 400;
letter-spacing: 0.06em;
padding: 7px 18px;
border-radius: 20px;
border: 1px solid rgba(242,232,201,0.3);
color: var(--beige);
}
.pill.accent {
background: var(--beige);
color: var(--vb);
border-color: transparent;
font-weight: 500;
}
.hero-ctas {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
}
.btn-primary {
display: inline-block;
background: var(--beige);
color: var(--vb);
font-family: 'Outfit', sans-serif;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.04em;
padding: 14px 32px;
border-radius: 4px;
text-decoration: none;
transition: opacity 0.2s;
}
.btn-primary:hover { opacity: 0.88; }
.btn-secondary {
display: inline-block;
color: var(--beige);
font-family: 'Outfit', sans-serif;
font-size: 13px;
font-weight: 400;
letter-spacing: 0.04em;
padding: 13px 32px;
border-radius: 4px;
border: 1px solid rgba(242,232,201,0.35);
text-decoration: none;
transition: border-color 0.2s, background 0.2s;
}
.btn-secondary:hover {
border-color: rgba(242,232,201,0.7);
background: rgba(242,232,201,0.06);
}
.btn-text {
font-size: 12px;
color: var(--pb);
opacity: 0.8;
}
/* ── SECTIONS ── */
section { padding: 96px 48px; }
.container {
max-width: 900px;
margin: 0 auto;
}
.section-label {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--pb);
margin-bottom: 20px;
}
.section-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(30px, 4vw, 46px);
font-weight: 400;
line-height: 1.15;
color: var(--vb);
margin-bottom: 24px;
}
.section-title em { font-style: italic; }
.section-body {
font-size: 16px;
font-weight: 300;
color: var(--mid);
line-height: 1.8;
max-width: 680px;
}
/* ── WHAT IS VIEW ── */
.what-section { background: var(--beige-light); }
.view-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 2px;
margin-top: 52px;
border: 1px solid var(--border);
border-radius: 6px;
overflow: hidden;
}
.view-card {
background: var(--white);
padding: 36px 28px;
border-right: 1px solid var(--border);
}
.view-card:last-child { border-right: none; }
.view-card-icon {
width: 32px;
height: 2px;
background: var(--pb);
margin-bottom: 24px;
}
.view-card-title {
font-family: 'Cormorant Garamond', serif;
font-size: 20px;
font-weight: 500;
color: var(--vb);
margin-bottom: 10px;
}
.view-card-body {
font-size: 14px;
font-weight: 300;
color: var(--mid);
line-height: 1.7;
}
/* ── OUTCOMES ── */
.outcomes-list {
margin-top: 52px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px 48px;
}
.outcome-item {
display: flex;
gap: 18px;
align-items: flex-start;
}
.outcome-num {
font-family: 'Cormorant Garamond', serif;
font-size: 32px;
font-weight: 300;
color: var(--beige);
line-height: 1;
min-width: 32px;
padding-top: 2px;
}
.outcome-text {
font-size: 15px;
font-weight: 300;
color: var(--mid);
line-height: 1.65;
}
.outcome-text strong {
display: block;
font-weight: 500;
color: var(--vb);
font-size: 15px;
margin-bottom: 4px;
}
/* ── FOR WHO ── */
.forwho-section { background: var(--vb); }
.forwho-section .section-label { color: var(--pb); opacity: 0.7; }
.forwho-section .section-title { color: var(--white); }
.forwho-section .section-body { color: rgba(255,255,255,0.6); }
.audience-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-top: 52px;
}
.audience-card {
border: 1px solid rgba(242,232,201,0.15);
border-radius: 6px;
padding: 28px 22px;
}
.audience-icon {
width: 28px;
height: 28px;
margin-bottom: 18px;
opacity: 0.6;
}
.audience-title {
font-family: 'Cormorant Garamond', serif;
font-size: 18px;
font-weight: 500;
color: var(--beige);
margin-bottom: 8px;
}
.audience-desc {
font-size: 13px;
font-weight: 300;
color: rgba(255,255,255,0.5);
line-height: 1.6;
}
/* ── PROGRAMME ── */
.programme-section { background: var(--beige-light); }
.days-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-top: 52px;
}
.day-card {
background: var(--white);
border: 1px solid var(--border);
border-radius: 6px;
overflow: hidden;
}
.day-header {
background: var(--vb);
padding: 20px 28px;
display: flex;
align-items: baseline;
gap: 12px;
}
.day-num {
font-family: 'Cormorant Garamond', serif;
font-size: 13px;
font-weight: 400;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--pb);
}
.day-title {
font-family: 'Cormorant Garamond', serif;
font-size: 20px;
font-weight: 500;
color: var(--white);
}
.day-body {
padding: 28px;
}
.day-item {
display: flex;
gap: 14px;
margin-bottom: 18px;
align-items: flex-start;
}
.day-item:last-child { margin-bottom: 0; }
.day-dot {
width: 5px;
height: 5px;
min-width: 5px;
border-radius: 50%;
background: var(--pb);
margin-top: 9px;
}
.day-item-text {
font-size: 14px;
font-weight: 300;
color: var(--mid);
line-height: 1.6;
}
.day-item-text strong {
font-weight: 500;
color: var(--vb);
display: block;
}
/* ── SCARCITY ── */
.scarcity-section {
background: var(--beige);
text-align: center;
}
.scarcity-section .section-label { color: var(--mid); opacity: 0.7; }
.scarcity-section .section-title { color: var(--vb); }
.scarcity-number {
font-family: 'Cormorant Garamond', serif;
font-size: 120px;
font-weight: 300;
color: rgba(35,56,65,0.08);
line-height: 0.9;
letter-spacing: -4px;
margin-bottom: -20px;
display: block;
}
.scarcity-body {
font-size: 16px;
font-weight: 300;
color: var(--mid);
max-width: 540px;
margin: 0 auto 16px;
line-height: 1.8;
}
/* ── INVESTMENT ── */
.invest-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
margin-top: 52px;
align-items: start;
}
.price-block {
border-left: 2px solid var(--beige);
padding-left: 28px;
}
.price-figure {
font-family: 'Cormorant Garamond', serif;
font-size: 64px;
font-weight: 300;
color: var(--vb);
line-height: 1;
margin-bottom: 6px;
}
.price-label {
font-size: 13px;
font-weight: 400;
color: var(--pb);
letter-spacing: 0.04em;
}
.includes-list {
list-style: none;
margin-top: 8px;
}
.includes-list li {
font-size: 14px;
font-weight: 300;
color: var(--mid);
padding: 10px 0;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
gap: 10px;
}
.includes-list li::before {
content: '';
width: 14px;
height: 1px;
background: var(--pb);
flex-shrink: 0;
}
/* ── FINAL CTA ── */
.cta-section {
background: var(--vb);
text-align: center;
}
.cta-section .section-title { color: var(--white); }
.cta-body {
font-size: 16px;
font-weight: 300;
color: rgba(255,255,255,0.55);
max-width: 520px;
margin: 0 auto 44px;
line-height: 1.8;
}
.cta-buttons {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 28px;
}
.cta-note {
font-size: 12px;
color: var(--pb);
opacity: 0.6;
letter-spacing: 0.03em;
}
/* ── FOOTER ── */
footer {
background: #1A2B31;
padding: 36px 48px;
display: flex;
align-items: center;
justify-content: space-between;
}
.footer-brand {
font-family: 'Cormorant Garamond', serif;
font-size: 14px;
color: rgba(255,255,255,0.4);
letter-spacing: 0.04em;
}
.footer-tagline {
font-size: 11px;
color: rgba(255,255,255,0.2);
letter-spacing: 0.06em;
font-style: italic;
}
.footer-link {
font-size: 12px;
color: var(--pb);
text-decoration: none;
opacity: 0.7;
}
/* ── DIVIDER ── */
.section-divider {
width: 40px;
height: 1px;
background: var(--beige);
margin: 32px 0;
}
/* ── WAITLIST ── */
.waitlist-band {
background: var(--beige-light);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
padding: 52px 48px;
}
.waitlist-inner {
max-width: 900px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr auto;
gap: 48px;
align-items: center;
}
.waitlist-dates {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 14px;
}
.waitlist-badge {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
background: var(--vb);
color: var(--beige);
padding: 5px 14px;
border-radius: 20px;
}
.waitlist-date-text {
font-family: 'Cormorant Garamond', serif;
font-size: 22px;
font-weight: 400;
color: var(--vb);
}
.waitlist-title {
font-family: 'Cormorant Garamond', serif;
font-size: 32px;
font-weight: 400;
color: var(--vb);
line-height: 1.15;
margin-bottom: 10px;
}
.waitlist-title em { font-style: italic; }
.waitlist-body {
font-size: 14px;
font-weight: 300;
color: var(--mid);
line-height: 1.75;
max-width: 520px;
}
.btn-waitlist {
display: inline-block;
white-space: nowrap;
background: var(--vb);
color: var(--beige);
font-family: 'Outfit', sans-serif;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.04em;
padding: 14px 28px;
border-radius: 4px;
text-decoration: none;
transition: opacity 0.2s;
}
.btn-waitlist:hover { opacity: 0.85; }
.waitlist-sub {
font-size: 11px;
color: var(--pb);
text-align: center;
margin-top: 8px;
letter-spacing: 0.03em;
}
/* ── APPLICATIONS ── */
.applications-section { background: var(--white); }
.apps-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 52px;
}
.app-card {
border: 1px solid var(--border);
border-radius: 6px;
padding: 32px 26px;
position: relative;
overflow: hidden;
}
.app-card::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 3px;
background: var(--beige);
}
.app-tag {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--pb);
margin-bottom: 16px;
display: block;
}
.app-title {
font-family: 'Cormorant Garamond', serif;
font-size: 22px;
font-weight: 500;
color: var(--vb);
line-height: 1.2;
margin-bottom: 14px;
}
.app-body {
font-size: 14px;
font-weight: 300;
color: var(--mid);
line-height: 1.7;
}
.app-examples {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--border);
}
.app-example {
font-size: 12px;
font-weight: 300;
color: var(--muted);
padding: 5px 0;
display: flex;
align-items: baseline;
gap: 8px;
}
.app-example::before {
content: '';
width: 12px;
height: 1px;
background: var(--pb);
opacity: 0.5;
flex-shrink: 0;
position: relative;
top: -3px;
}
/* ── RESPONSIVE ── */
@media (max-width: 768px) {
nav { padding: 0 24px; }
section { padding: 72px 24px; }
.hero { padding: 120px 24px 80px; }
.view-grid, .audience-grid, .days-grid, .invest-grid, .apps-grid { grid-template-columns: 1fr; }
.waitlist-band { padding: 48px 24px; }
.waitlist-inner { grid-template-columns: 1fr; gap: 28px; }
.outcomes-list { grid-template-columns: 1fr; }
.view-card { border-right: none; border-bottom: 1px solid var(--border); }
.view-card:last-child { border-bottom: none; }
footer { flex-direction: column; gap: 12px; text-align: center; }
}