/* ================================================================
MARKETING MIKULÁS — Design System
style.css — v1.0
Font loading (add to every HTML before this stylesheet):
Table of Contents:
01 · Tokens: Colours
02 · Tokens: Typography
03 · Tokens: Spacing
04 · Tokens: Borders, Shadows, Transitions
05 · Reset & Normalise
06 · Base
07 · Typography Components
08 · Layout & Grid
09 · Navigation
10 · Hero
11 · Section Patterns
12 · Founding Moment (Inverted Section)
13 · Routing Cards
14 · Transparency Grid
15 · Newsletter Strip
16 · Buttons
17 · Forms
18 · Content Cards
19 · Story Cards
20 · Stat Blocks
21 · Accordion (FAQ)
22 · Timeline
23 · Supporter Grid
24 · Page Header (Interior Pages)
25 · Footer
26 · Utility Classes
27 · Animations & Transitions
28 · Accessibility
29 · Responsive — Tablet ≤1024px
30 · Responsive — Mobile ≤768px
31 · Responsive — Small ≤480px
================================================================ */
/* ================================================================
01 · TOKENS: COLOURS
================================================================ */
:root {
/* Brand — Primary */
--c-red: #BE3A2E; /* Meleg Vörös — primary brand colour */
--c-red-text: #A52922; /* darker red — WCAG AA on cream (~6.5:1)*/
--c-red-dark: #8B2218; /* hover / pressed state */
--c-red-light: #D9544A; /* lighter tint for decorative uses */
/* Brand — Backgrounds */
--c-cream: #FAF5EE; /* Meleg Krém — primary background */
--c-cream-mid: #F2EBE0; /* secondary section backgrounds */
--c-cream-border: #E2D5C5; /* warm border on cream */
/* Brand — Text */
--c-black: #1C1208; /* Meleg Fekete — primary text */
--c-black-mid: #3A2E24; /* secondary / subdued text */
--c-black-light: #5E5046; /* caption / muted text */
/* Brand — Accent */
--c-terra: #C87D4A; /* Terrakotta — supporting warm accent */
--c-terra-light: #E8C4A0; /* pale Terrakotta — soft highlights */
/* Brand — Trust Anchor */
--c-forest: #253B2E; /* Mélyzöld — deep forest green */
--c-forest-light: #3D5A47; /* lighter forest for hover */
/* Brand — Neutrals */
--c-grey: #C4B5A0; /* Meleg Szürke */
--c-grey-light: #DDD4C6; /* lighter grey — subtle borders */
--c-grey-dark: #8A7D6E; /* darker grey — secondary text */
/* Utilities */
--c-white: #FFFFFF;
--c-overlay: rgba(28, 18, 8, 0.48);
}
/* ================================================================
02 · TOKENS: TYPOGRAPHY
================================================================ */
:root {
--font-serif: 'Lora', Georgia, 'Times New Roman', serif;
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
Helvetica, Arial, sans-serif;
/* Font size scale (px → rem at 16px root) */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.8125rem; /* 13px */
--text-base: 0.9375rem; /* 15px */
--text-md: 1.0625rem; /* 17px */
--text-lg: 1.1875rem; /* 19px */
--text-xl: 1.375rem; /* 22px */
--text-2xl: 1.75rem; /* 28px */
--text-3xl: 2rem; /* 32px */
--text-4xl: 2.5rem; /* 40px */
--text-5xl: 3rem; /* 48px */
--text-6xl: 3.375rem; /* 54px */
/* Line heights */
--lh-tight: 1.2;
--lh-snug: 1.35;
--lh-base: 1.55;
--lh-relaxed: 1.7;
--lh-loose: 1.85;
/* Font weights */
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
/* Letter spacing */
--ls-tight: -0.02em;
--ls-normal: 0;
--ls-wide: 0.04em;
--ls-wider: 0.08em;
--ls-widest: 0.12em;
}
/* ================================================================
03 · TOKENS: SPACING
================================================================ */
:root {
--sp-1: 0.25rem; /* 4px */
--sp-2: 0.5rem; /* 8px */
--sp-3: 0.75rem; /* 12px */
--sp-4: 1rem; /* 16px */
--sp-5: 1.25rem; /* 20px */
--sp-6: 1.5rem; /* 24px */
--sp-7: 1.75rem; /* 28px */
--sp-8: 2rem; /* 32px */
--sp-10: 2.5rem; /* 40px */
--sp-12: 3rem; /* 48px */
--sp-16: 4rem; /* 64px */
--sp-20: 5rem; /* 80px */
--sp-24: 6rem; /* 96px */
--sp-32: 8rem; /* 128px */
}
/* ================================================================
04 · TOKENS: BORDERS, SHADOWS, TRANSITIONS
================================================================ */
:root {
/* Border radius */
--radius-sm: 0.25rem; /* 4px */
--radius-md: 0.5rem; /* 8px */
--radius-lg: 0.75rem; /* 12px */
--radius-xl: 1.25rem; /* 20px */
--radius-full: 9999px;
/* Shadows — warm-toned (using Meleg Fekete base) */
--shadow-xs: 0 1px 2px rgba(28,18,8,.06);
--shadow-sm: 0 1px 4px rgba(28,18,8,.08), 0 1px 2px rgba(28,18,8,.04);
--shadow-md: 0 4px 16px rgba(28,18,8,.09), 0 2px 6px rgba(28,18,8,.05);
--shadow-lg: 0 8px 32px rgba(28,18,8,.11), 0 4px 12px rgba(28,18,8,.06);
--shadow-xl: 0 20px 48px rgba(28,18,8,.14), 0 8px 20px rgba(28,18,8,.07);
/* Transitions */
--ease: 180ms ease;
--ease-mid: 280ms ease;
--ease-slow: 420ms ease;
--ease-out: 240ms cubic-bezier(0.0, 0.0, 0.2, 1);
--ease-in: 200ms cubic-bezier(0.4, 0.0, 1, 1);
/* Z-index scale */
--z-below: -1;
--z-base: 0;
--z-raised: 5;
--z-dropdown: 10;
--z-sticky: 20;
--z-overlay: 30;
--z-modal: 40;
--z-toast: 50;
/* Layout */
--container-max: 1200px;
--container-narrow: 720px;
--container-wide: 1400px;
--container-pad: var(--sp-6);
/* Navigation height */
--nav-height: 72px;
--nav-height-sm: 60px;
}
/* ================================================================
05 · RESET & NORMALISE
================================================================ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
tab-size: 4;
}
body {
font-family: var(--font-sans);
font-size: var(--text-md);
font-weight: var(--fw-regular);
line-height: var(--lh-relaxed);
color: var(--c-black);
background-color: var(--c-cream);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-serif);
font-weight: var(--fw-bold);
line-height: var(--lh-tight);
color: var(--c-black);
text-wrap: balance;
}
p { max-width: 68ch; }
a {
color: var(--c-red-text);
text-decoration: underline;
text-decoration-color: transparent;
text-underline-offset: 3px;
transition: color var(--ease), text-decoration-color var(--ease);
}
a:hover {
text-decoration-color: currentColor;
}
img, svg, video {
display: block;
max-width: 100%;
}
button, input, select, textarea {
font: inherit;
}
button { cursor: pointer; }
ul, ol { list-style: none; }
table { border-collapse: collapse; }
::selection {
background-color: var(--c-terra-light);
color: var(--c-black);
}
/* ================================================================
06 · BASE
================================================================ */
/* Skip link — visually hidden until focused */
.skip-link {
position: absolute;
top: var(--sp-3);
left: var(--sp-3);
z-index: var(--z-toast);
padding: var(--sp-3) var(--sp-6);
background: var(--c-red);
color: var(--c-cream);
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: var(--fw-semibold);
border-radius: var(--radius-sm);
text-decoration: none;
transform: translateY(-200%);
transition: transform var(--ease);
}
.skip-link:focus {
transform: translateY(0);
}
/* Screen reader only */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* ================================================================
07 · TYPOGRAPHY COMPONENTS
================================================================ */
/* Eyebrow — small label above section headlines */
.eyebrow {
display: block;
font-family: var(--font-sans);
font-size: var(--text-xs);
font-weight: var(--fw-semibold);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--c-red-text);
margin-bottom: var(--sp-4);
}
.eyebrow--inverted {
color: var(--c-cream);
}
.eyebrow--terra {
color: var(--c-terra);
}
/* Headline utilities */
.headline-display {
font-family: var(--font-serif);
font-size: var(--text-6xl);
font-weight: var(--fw-bold);
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
}
.headline-xl {
font-family: var(--font-serif);
font-size: var(--text-5xl);
font-weight: var(--fw-bold);
line-height: var(--lh-tight);
}
.headline-lg {
font-family: var(--font-serif);
font-size: var(--text-4xl);
font-weight: var(--fw-semibold);
line-height: var(--lh-snug);
}
.headline-md {
font-family: var(--font-serif);
font-size: var(--text-3xl);
font-weight: var(--fw-semibold);
line-height: var(--lh-snug);
}
.headline-sm {
font-family: var(--font-serif);
font-size: var(--text-2xl);
font-weight: var(--fw-semibold);
line-height: var(--lh-snug);
}
/* Body text utilities */
.body-large {
font-family: var(--font-serif);
font-size: var(--text-lg);
line-height: var(--lh-loose);
}
.body-base {
font-size: var(--text-md);
line-height: var(--lh-relaxed);
}
.body-small {
font-size: var(--text-base);
line-height: var(--lh-relaxed);
}
.caption {
font-size: var(--text-sm);
color: var(--c-black-light);
line-height: var(--lh-base);
}
/* Pull quote */
.pull-quote {
font-family: var(--font-serif);
font-size: var(--text-xl);
font-style: italic;
line-height: var(--lh-relaxed);
color: var(--c-red-text);
border-left: 3px solid var(--c-terra);
padding-left: var(--sp-6);
margin: var(--sp-8) 0;
}
/* Founding benefit note (sponsor motivation) */
.founding__benefit {
font-size: var(--text-sm);
color: var(--c-cream);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--radius-md);
padding: var(--sp-4) var(--sp-6);
margin-bottom: var(--sp-8);
max-width: 520px;
margin-inline: auto;
line-height: var(--lh-relaxed);
}
/* Founder attribution */
.founding__attribution {
font-size: var(--text-sm);
color: var(--c-cream);
font-style: italic;
margin-top: var(--sp-8);
padding-top: var(--sp-6);
border-top: 1px solid rgba(255, 255, 255, 0.15);
max-width: 480px;
margin-inline: auto;
line-height: var(--lh-relaxed);
}
.founding__attribution strong {
font-style: normal;
font-weight: var(--fw-semibold);
}
/* Text link variant */
.text-link {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
font-size: var(--text-base);
font-weight: var(--fw-medium);
color: var(--c-red-text);
text-decoration: none;
transition: gap var(--ease), color var(--ease);
}
.text-link::after {
content: '→';
transition: transform var(--ease);
}
.text-link:hover {
color: var(--c-red-dark);
}
.text-link:hover::after {
transform: translateX(3px);
}
.text-link--inverted {
color: var(--c-cream);
}
.text-link--inverted:hover {
color: var(--c-cream);
}
/* ================================================================
08 · LAYOUT & GRID
================================================================ */
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-pad);
}
.container--narrow {
max-width: var(--container-narrow);
}
.container--wide {
max-width: var(--container-wide);
}
/* Section wrapper — applies consistent vertical rhythm */
.section {
padding-block: var(--sp-20);
}
.section--sm {
padding-block: var(--sp-12);
}
.section--lg {
padding-block: var(--sp-32);
}
.section--cream-mid {
background-color: var(--c-cream-mid);
}
/* Generic grid utilities */
.grid {
display: grid;
gap: var(--sp-6);
}
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--auto-fill-sm {
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.grid--auto-fill-md {
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
/* Flex row utility */
.flex-row {
display: flex;
align-items: center;
gap: var(--sp-4);
}
.flex-row--between {
justify-content: space-between;
}
.flex-row--center {
justify-content: center;
}
/* Section intro block (eyebrow + headline + body + CTA) */
.section-intro {
max-width: 640px;
margin-bottom: var(--sp-12);
}
.section-intro--centered {
margin-inline: auto;
text-align: center;
}
.section-intro--centered p {
margin-inline: auto;
}
.section-intro .eyebrow { margin-bottom: var(--sp-3); }
.section-intro h2 { margin-bottom: var(--sp-5); }
.section-intro p { margin-bottom: var(--sp-6); color: var(--c-black-mid); }
/* ================================================================
09 · NAVIGATION
================================================================ */
.site-header {
position: sticky;
top: 0;
z-index: var(--z-sticky);
height: var(--nav-height);
background-color: var(--c-cream);
border-bottom: 1px solid transparent;
transition: border-color var(--ease-mid), box-shadow var(--ease-mid),
background-color var(--ease-mid);
}
.site-header.nav--scrolled {
background-color: rgba(250, 245, 238, 0.96);
border-bottom-color: var(--c-cream-border);
box-shadow: var(--shadow-sm);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-pad);
}
/* Logo */
.site-logo {
display: flex;
align-items: center;
text-decoration: none;
flex-shrink: 0;
}
.site-logo__wordmark {
font-family: var(--font-serif);
font-weight: var(--fw-bold);
font-size: var(--text-xl);
color: var(--c-red);
line-height: 1;
letter-spacing: var(--ls-tight);
transition: color var(--ease);
}
.site-logo:hover .site-logo__wordmark {
color: var(--c-red-dark);
}
.site-logo__img {
height: 40px;
width: auto;
display: block;
transition: opacity var(--ease);
}
.site-logo:hover .site-logo__img {
opacity: 0.85;
}
/* Desktop nav links */
.nav-links {
display: flex;
align-items: center;
gap: var(--sp-2);
list-style: none;
}
.nav-link {
display: inline-block;
padding: var(--sp-2) var(--sp-3);
font-family: var(--font-sans);
font-size: var(--text-base);
font-weight: var(--fw-medium);
color: var(--c-black-mid);
text-decoration: none;
border-radius: var(--radius-sm);
transition: color var(--ease), background-color var(--ease);
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: var(--sp-3);
right: var(--sp-3);
height: 2px;
background-color: var(--c-red);
transform: scaleX(0);
transition: transform var(--ease);
}
.nav-link:hover {
color: var(--c-black);
background-color: var(--c-cream-mid);
}
.nav-link:hover::after,
.nav-link[aria-current="page"]::after {
transform: scaleX(1);
}
.nav-link[aria-current="page"] {
color: var(--c-red-text);
}
/* Nav CTA button */
.nav-cta {
margin-left: var(--sp-4);
display: inline-flex;
align-items: center;
padding: var(--sp-2) var(--sp-5);
background-color: var(--c-red);
color: var(--c-cream);
font-family: var(--font-sans);
font-size: var(--text-base);
font-weight: var(--fw-semibold);
border-radius: var(--radius-full);
text-decoration: none;
transition: background-color var(--ease), transform var(--ease),
box-shadow var(--ease);
white-space: nowrap;
}
.nav-cta:hover {
background-color: var(--c-red-dark);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
color: var(--c-cream);
text-decoration: none;
}
.nav-cta:active {
transform: translateY(0);
box-shadow: var(--shadow-xs);
}
/* Hamburger (mobile) */
.hamburger {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 40px;
height: 40px;
background: none;
border: none;
border-radius: var(--radius-sm);
cursor: pointer;
padding: var(--sp-2);
transition: background-color var(--ease);
}
.hamburger:hover {
background-color: var(--c-cream-mid);
}
.hamburger__bar {
display: block;
width: 22px;
height: 2px;
background-color: var(--c-black);
border-radius: 2px;
transition: transform var(--ease-mid), opacity var(--ease);
}
.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* Mobile navigation overlay */
.mobile-nav {
display: none;
position: fixed;
inset: var(--nav-height) 0 0 0;
z-index: var(--z-overlay);
background-color: var(--c-cream);
overflow-y: auto;
padding: var(--sp-8) var(--container-pad) var(--sp-12);
transform: translateX(100%);
transition: transform var(--ease-mid);
}
.mobile-nav.is-open {
transform: translateX(0);
}
.mobile-nav__links {
display: flex;
flex-direction: column;
gap: var(--sp-2);
margin-bottom: var(--sp-8);
list-style: none;
}
.mobile-nav__link {
display: block;
padding: var(--sp-4) var(--sp-2);
font-family: var(--font-serif);
font-size: var(--text-2xl);
font-weight: var(--fw-semibold);
color: var(--c-black);
text-decoration: none;
border-bottom: 1px solid var(--c-cream-border);
transition: color var(--ease), padding-left var(--ease);
}
.mobile-nav__link:hover {
color: var(--c-red-text);
padding-left: var(--sp-3);
}
.mobile-nav__cta {
display: block;
text-align: center;
padding: var(--sp-4) var(--sp-8);
background-color: var(--c-red);
color: var(--c-cream);
font-family: var(--font-sans);
font-size: var(--text-md);
font-weight: var(--fw-semibold);
border-radius: var(--radius-full);
text-decoration: none;
transition: background-color var(--ease);
}
.mobile-nav__cta:hover {
background-color: var(--c-red-dark);
color: var(--c-cream);
}
/* ================================================================
10 · HERO
================================================================ */
.hero {
display: flex;
align-items: center;
padding-block: var(--sp-20);
overflow: hidden;
}
.hero__inner {
display: grid;
grid-template-columns: 55fr 45fr;
align-items: center;
gap: var(--sp-16);
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-pad);
width: 100%;
}
.hero__content {
max-width: 560px;
}
.hero__eyebrow {
margin-bottom: var(--sp-5);
}
.hero__headline {
font-size: var(--text-6xl);
font-weight: var(--fw-bold);
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
color: var(--c-black);
margin-bottom: var(--sp-5);
}
.hero__subline {
font-family: var(--font-serif);
font-size: var(--text-xl);
font-weight: var(--fw-regular);
line-height: var(--lh-snug);
color: var(--c-black-mid);
margin-bottom: var(--sp-6);
}
.hero__body {
font-size: var(--text-md);
line-height: var(--lh-relaxed);
color: var(--c-black-mid);
max-width: 520px;
margin-bottom: var(--sp-8);
}
.hero__actions {
display: flex;
flex-direction: column;
gap: var(--sp-4);
align-items: flex-start;
}
.hero__visual {
display: flex;
align-items: center;
justify-content: center;
}
.hero__illustration {
width: 100%;
max-width: 440px;
height: auto;
border-radius: var(--radius-lg);
object-fit: cover;
}
/* ================================================================
11 · SECTION PATTERNS
================================================================ */
/* Generic section header (eyebrow + headline + optional body) */
.section-header {
margin-bottom: var(--sp-12);
}
.section-header--centered {
text-align: center;
max-width: 640px;
margin-inline: auto;
margin-bottom: var(--sp-12);
}
.section-header--centered p {
margin-inline: auto;
color: var(--c-black-mid);
}
.section-header h2 {
font-size: var(--text-4xl);
margin-top: var(--sp-3);
margin-bottom: var(--sp-5);
}
.section-header--centered h2 {
font-size: var(--text-4xl);
margin-top: var(--sp-3);
margin-bottom: var(--sp-5);
}
.section-header p {
color: var(--c-black-mid);
max-width: 56ch;
}
/* Divider */
.divider {
border: none;
border-top: 1px solid var(--c-cream-border);
margin-block: var(--sp-12);
}
.divider--terra {
border-top-color: var(--c-terra-light);
}
/* ================================================================
12 · FOUNDING MOMENT (INVERTED SECTION)
================================================================ */
.section--founding {
background-color: var(--c-red);
padding-block: var(--sp-24);
text-align: center;
overflow: hidden;
position: relative;
}
/* Subtle texture overlay (decorative) */
.section--founding::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(
ellipse at 70% 30%,
rgba(255,255,255,0.04) 0%,
transparent 60%
);
pointer-events: none;
}
.founding__inner {
position: relative;
z-index: 1;
max-width: 760px;
margin-inline: auto;
padding-inline: var(--container-pad);
}
.founding__headline {
font-size: var(--text-5xl);
font-weight: var(--fw-bold);
color: var(--c-cream);
line-height: var(--lh-tight);
margin-bottom: var(--sp-6);
margin-top: var(--sp-3);
}
.founding__body {
font-family: var(--font-serif);
font-size: var(--text-lg);
line-height: var(--lh-loose);
color: var(--c-cream);
max-width: 640px;
margin-inline: auto;
margin-bottom: var(--sp-8);
}
.founding__body p + p {
margin-top: var(--sp-5);
}
.founding__actions {
display: flex;
flex-wrap: wrap;
gap: var(--sp-4);
justify-content: center;
margin-bottom: var(--sp-12);
}
/* Founding cohort area */
.founding-cohort {
margin-top: var(--sp-10);
padding-top: var(--sp-8);
border-top: 1px solid rgba(250, 245, 238, 0.2);
}
.founding-cohort__label {
display: block;
font-family: var(--font-sans);
font-size: var(--text-xs);
font-weight: var(--fw-semibold);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--c-cream);
margin-bottom: var(--sp-6);
}
/* Pre-launch state — promise text */
.founding-cohort__pre-launch {
font-family: var(--font-serif);
font-style: italic;
font-size: var(--text-md);
color: var(--c-cream);
max-width: 520px;
margin-inline: auto;
line-height: var(--lh-relaxed);
}
/* Live state — supporter names */
.founding-cohort__list {
display: flex;
flex-wrap: wrap;
gap: var(--sp-3);
justify-content: center;
list-style: none;
}
.founding-cohort__item {
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: var(--fw-medium);
color: var(--c-cream);
background-color: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: var(--radius-full);
padding: var(--sp-2) var(--sp-5);
transition: background-color var(--ease);
}
.founding-cohort__item:hover {
background-color: rgba(255, 255, 255, 0.16);
}
/* ================================================================
13 · ROUTING CARDS
================================================================ */
.routing-section {
background-color: var(--c-cream);
padding-block: var(--sp-20);
}
.routing-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-5);
margin-top: var(--sp-10);
}
.routing-card {
position: relative;
background-color: var(--c-cream);
border: 1px solid var(--c-cream-border);
border-radius: var(--radius-lg);
padding: var(--sp-8) var(--sp-6);
overflow: hidden;
transition: box-shadow var(--ease-mid), transform var(--ease-mid),
border-color var(--ease);
}
/* Left accent bar */
.routing-card::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background-color: var(--c-grey-light);
border-radius: 3px 0 0 3px;
transition: background-color var(--ease);
}
.routing-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-3px);
border-color: var(--c-terra-light);
}
.routing-card:hover::before {
background-color: var(--c-terra);
}
.routing-card__label {
display: block;
font-family: var(--font-sans);
font-size: var(--text-xs);
font-weight: var(--fw-semibold);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--c-black-mid);
margin-bottom: var(--sp-4);
}
.routing-card__headline {
font-family: var(--font-serif);
font-size: var(--text-lg);
font-weight: var(--fw-semibold);
color: var(--c-black);
line-height: var(--lh-snug);
margin-bottom: var(--sp-4);
}
.routing-card__body {
font-size: var(--text-base);
color: var(--c-black-mid);
line-height: var(--lh-relaxed);
margin-bottom: var(--sp-6);
}
.routing-card__privacy {
font-size: var(--text-sm);
color: var(--c-grey-dark);
font-style: italic;
line-height: var(--lh-base);
margin-top: var(--sp-3);
padding-top: var(--sp-3);
border-top: 1px solid var(--c-cream-border);
}
.routing-card__cta {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
font-size: var(--text-base);
font-weight: var(--fw-medium);
color: var(--c-red-text);
text-decoration: none;
transition: gap var(--ease), color var(--ease);
}
.routing-card__cta::after {
content: '→';
font-size: 0.9em;
transition: transform var(--ease);
}
.routing-card__cta:hover {
color: var(--c-red-dark);
gap: var(--sp-3);
}
.routing-card__cta:hover::after {
transform: translateX(3px);
}
/* ================================================================
14 · TRANSPARENCY GRID
================================================================ */
.transparency-section {
background-color: var(--c-cream-mid);
padding-block: var(--sp-20);
}
.transparency-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-10);
margin-top: var(--sp-10);
}
.transparency-item__icon {
width: 32px;
height: 32px;
color: var(--c-terra);
margin-bottom: var(--sp-5);
flex-shrink: 0;
}
.transparency-item__headline {
font-family: var(--font-serif);
font-size: var(--text-lg);
font-weight: var(--fw-semibold);
color: var(--c-black);
margin-bottom: var(--sp-3);
line-height: var(--lh-snug);
}
.transparency-item__body {
font-size: var(--text-base);
color: var(--c-black-mid);
line-height: var(--lh-relaxed);
}
/* Transparency CTA row */
.transparency-cta-row {
margin-top: var(--sp-10);
padding-top: var(--sp-8);
border-top: 1px solid var(--c-cream-border);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--sp-6);
}
/* ================================================================
15 · NEWSLETTER STRIP
================================================================ */
.newsletter-strip {
padding-top: var(--sp-8);
border-top: 1px solid var(--c-cream-border);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--sp-5);
}
.newsletter-strip__text {
font-size: var(--text-base);
color: var(--c-black-mid);
}
.newsletter-form {
display: flex;
align-items: center;
gap: var(--sp-3);
flex-wrap: wrap;
}
.newsletter-form__input {
padding: var(--sp-3) var(--sp-5);
font-size: var(--text-base);
color: var(--c-black);
background-color: var(--c-cream);
border: 1px solid var(--c-cream-border);
border-radius: var(--radius-full);
outline: none;
transition: border-color var(--ease), box-shadow var(--ease);
min-width: 240px;
}
.newsletter-form__input::placeholder {
color: var(--c-grey);
}
.newsletter-form__input:focus {
border-color: var(--c-red);
box-shadow: 0 0 0 3px rgba(190, 58, 46, 0.12);
}
.newsletter-form__note {
flex: 0 0 100%;
min-width: 100%;
font-size: var(--text-sm);
color: var(--c-grey-dark);
margin-top: var(--sp-3);
width: 100%;
}
/* ================================================================
16 · BUTTONS
================================================================ */
/* Base */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
padding: calc(var(--sp-3) + 1px) var(--sp-7);
font-family: var(--font-sans);
font-size: var(--text-base);
font-weight: var(--fw-semibold);
line-height: 1.2;
border-radius: var(--radius-full);
border: 2px solid transparent;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: background-color var(--ease), color var(--ease),
border-color var(--ease), transform var(--ease),
box-shadow var(--ease);
-webkit-user-select: none;
user-select: none;
}
.btn:hover {
transform: translateY(-1px);
text-decoration: none;
}
.btn:active {
transform: translateY(0);
}
/* Primary — filled red */
.btn--primary {
background-color: var(--c-red);
color: var(--c-cream);
border-color: var(--c-red);
}
.btn--primary:hover {
background-color: var(--c-red-dark);
border-color: var(--c-red-dark);
box-shadow: var(--shadow-md);
color: var(--c-cream);
}
.btn--primary:active {
background-color: var(--c-red-dark);
box-shadow: var(--shadow-xs);
}
/* Secondary — outlined red */
.btn--secondary {
background-color: transparent;
color: var(--c-red-text);
border-color: var(--c-red);
}
.btn--secondary:hover {
background-color: var(--c-red);
color: var(--c-cream);
box-shadow: var(--shadow-sm);
}
/* Ghost — for use on inverted (red) sections */
.btn--ghost {
background-color: rgba(250, 245, 238, 0.12);
color: var(--c-cream);
border-color: rgba(250, 245, 238, 0.4);
}
.btn--ghost:hover {
background-color: rgba(250, 245, 238, 0.22);
border-color: rgba(250, 245, 238, 0.7);
color: var(--c-cream);
box-shadow: none;
}
/* Ghost filled — prominent CTA on inverted sections */
.btn--ghost-filled {
background-color: var(--c-cream);
color: var(--c-red-text);
border-color: var(--c-cream);
}
.btn--ghost-filled:hover {
background-color: var(--c-cream);
color: var(--c-red-dark);
box-shadow: var(--shadow-md);
}
/* Forest — trust-anchor variant */
.btn--forest {
background-color: var(--c-forest);
color: var(--c-cream);
border-color: var(--c-forest);
}
.btn--forest:hover {
background-color: var(--c-forest-light);
border-color: var(--c-forest-light);
color: var(--c-cream);
box-shadow: var(--shadow-md);
}
/* Button sizes */
.btn--sm {
padding: var(--sp-2) var(--sp-5);
font-size: var(--text-sm);
}
.btn--lg {
padding: var(--sp-4) var(--sp-10);
font-size: var(--text-md);
}
/* Disabled state */
.btn:disabled,
.btn[aria-disabled="true"] {
opacity: 0.45;
cursor: not-allowed;
transform: none;
pointer-events: none;
}
/* ================================================================
17 · FORMS
================================================================ */
.form-group {
display: flex;
flex-direction: column;
gap: var(--sp-2);
margin-bottom: var(--sp-5);
}
.form-group:last-child {
margin-bottom: 0;
}
.form-label {
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: var(--fw-semibold);
color: var(--c-black);
display: block;
}
.form-label--required::after {
content: ' *';
color: var(--c-red-text);
}
.form-input,
.form-textarea,
.form-select {
width: 100%;
padding: var(--sp-3) var(--sp-4);
font-family: var(--font-sans);
font-size: var(--text-base);
color: var(--c-black);
background-color: var(--c-cream);
border: 1.5px solid var(--c-grey-light);
border-radius: var(--radius-md);
outline: none;
transition: border-color var(--ease), box-shadow var(--ease);
-webkit-appearance: none;
appearance: none;
}
.form-input::placeholder,
.form-textarea::placeholder {
color: var(--c-grey);
}
.form-input:hover,
.form-textarea:hover,
.form-select:hover {
border-color: var(--c-grey);
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
border-color: var(--c-red);
box-shadow: 0 0 0 3px rgba(190, 58, 46, 0.12);
}
.form-textarea {
min-height: 140px;
resize: vertical;
line-height: var(--lh-relaxed);
}
.form-select {
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%235E5046' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--sp-4) center;
padding-right: var(--sp-10);
cursor: pointer;
}
.form-hint {
font-size: var(--text-sm);
color: var(--c-grey-dark);
line-height: var(--lh-base);
}
.form-error {
font-size: var(--text-sm);
color: var(--c-red-text);
font-weight: var(--fw-medium);
}
/* Error state on input */
.form-input--error,
.form-textarea--error {
border-color: var(--c-red);
}
.form-input--error:focus,
.form-textarea--error:focus {
box-shadow: 0 0 0 3px rgba(190, 58, 46, 0.14);
}
/* Checkbox & radio */
.form-checkbox-group,
.form-radio-group {
display: flex;
flex-direction: column;
gap: var(--sp-3);
}
.form-check {
display: flex;
align-items: flex-start;
gap: var(--sp-3);
cursor: pointer;
}
.form-check__input {
width: 18px;
height: 18px;
flex-shrink: 0;
margin-top: 2px;
accent-color: var(--c-red);
cursor: pointer;
}
.form-check__label {
font-size: var(--text-base);
color: var(--c-black-mid);
line-height: var(--lh-base);
}
/* Form success message */
.form-success {
display: flex;
align-items: flex-start;
gap: var(--sp-3);
padding: var(--sp-5) var(--sp-6);
background-color: rgba(37, 59, 46, 0.08);
border: 1px solid var(--c-forest);
border-radius: var(--radius-md);
color: var(--c-forest);
font-size: var(--text-base);
}
/* ================================================================
18 · CONTENT CARDS
================================================================ */
/* Generic card */
.card {
background-color: var(--c-cream);
border: 1px solid var(--c-cream-border);
border-radius: var(--radius-lg);
padding: var(--sp-8) var(--sp-7);
transition: box-shadow var(--ease-mid), transform var(--ease-mid);
}
.card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.card__tag {
display: inline-block;
font-size: var(--text-sm);
font-weight: var(--fw-semibold);
color: var(--c-terra);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
margin-bottom: var(--sp-3);
}
.card__headline {
font-family: var(--font-serif);
font-size: var(--text-xl);
font-weight: var(--fw-semibold);
color: var(--c-black);
margin-bottom: var(--sp-4);
line-height: var(--lh-snug);
}
.card__body {
font-size: var(--text-base);
color: var(--c-black-mid);
line-height: var(--lh-relaxed);
margin-bottom: var(--sp-6);
}
/* Profile / Ambassador card */
.profile-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: var(--sp-8) var(--sp-6);
background-color: var(--c-cream);
border: 1px solid var(--c-cream-border);
border-radius: var(--radius-lg);
}
.profile-card__avatar {
width: 72px;
height: 72px;
border-radius: 50%;
background-color: var(--c-cream-mid);
margin-bottom: var(--sp-5);
overflow: hidden;
flex-shrink: 0;
}
.profile-card__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.profile-card__name {
font-family: var(--font-serif);
font-size: var(--text-lg);
font-weight: var(--fw-semibold);
color: var(--c-black);
margin-bottom: var(--sp-1);
}
.profile-card__role {
font-size: var(--text-sm);
color: var(--c-grey-dark);
margin-bottom: var(--sp-4);
}
.profile-card__bio {
font-size: var(--text-base);
color: var(--c-black-mid);
line-height: var(--lh-relaxed);
}
/* ================================================================
19 · STORY CARDS
================================================================ */
.story-card {
display: grid;
grid-template-rows: auto 1fr auto;
background-color: var(--c-cream);
border: 1px solid var(--c-cream-border);
border-radius: var(--radius-lg);
overflow: hidden;
transition: box-shadow var(--ease-mid), transform var(--ease-mid);
}
.story-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-3px);
}
.story-card__image {
aspect-ratio: 16 / 9;
background-color: var(--c-cream-mid);
overflow: hidden;
}
.story-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 600ms ease;
}
.story-card:hover .story-card__image img {
transform: scale(1.03);
}
.story-card__body {
padding: var(--sp-6) var(--sp-7);
}
.story-card__meta {
font-size: var(--text-sm);
color: var(--c-grey-dark);
margin-bottom: var(--sp-3);
}
.story-card__headline {
font-family: var(--font-serif);
font-size: var(--text-xl);
font-weight: var(--fw-semibold);
color: var(--c-black);
line-height: var(--lh-snug);
margin-bottom: var(--sp-4);
}
.story-card__excerpt {
font-size: var(--text-base);
color: var(--c-black-mid);
line-height: var(--lh-relaxed);
}
.story-card__footer {
padding: var(--sp-5) var(--sp-7);
border-top: 1px solid var(--c-cream-border);
}
/* ================================================================
20 · STAT BLOCKS (for Transparency page)
================================================================ */
.stat-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-5);
}
.stat-block {
padding: var(--sp-7) var(--sp-6);
background-color: var(--c-cream);
border: 1px solid var(--c-cream-border);
border-radius: var(--radius-lg);
text-align: center;
}
.stat-block__number {
font-family: var(--font-serif);
font-size: var(--text-5xl);
font-weight: var(--fw-bold);
color: var(--c-red);
line-height: 1;
margin-bottom: var(--sp-3);
}
.stat-block__label {
font-size: var(--text-sm);
font-weight: var(--fw-medium);
color: var(--c-black-mid);
text-transform: uppercase;
letter-spacing: var(--ls-wide);
}
.stat-block__note {
font-size: var(--text-xs);
color: var(--c-grey-dark);
margin-top: var(--sp-2);
}
/* ================================================================
21 · ACCORDION (FAQ)
================================================================ */
.accordion {
border-top: 1px solid var(--c-cream-border);
}
.accordion__item {
border-bottom: 1px solid var(--c-cream-border);
}
.accordion__trigger {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: var(--sp-6) 0;
background: none;
border: none;
text-align: left;
cursor: pointer;
gap: var(--sp-4);
}
.accordion__question {
font-family: var(--font-serif);
font-size: var(--text-lg);
font-weight: var(--fw-semibold);
color: var(--c-black);
line-height: var(--lh-snug);
transition: color var(--ease);
}
.accordion__trigger:hover .accordion__question {
color: var(--c-red-text);
}
.accordion__icon {
flex-shrink: 0;
width: 20px;
height: 20px;
color: var(--c-grey-dark);
transition: transform var(--ease-mid), color var(--ease);
}
.accordion__trigger[aria-expanded="true"] .accordion__icon {
transform: rotate(45deg);
color: var(--c-red-text);
}
.accordion__panel {
display: none;
padding-bottom: var(--sp-7);
}
.accordion__panel.is-open {
display: block;
}
.accordion__answer {
font-size: var(--text-md);
color: var(--c-black-mid);
line-height: var(--lh-loose);
max-width: 64ch;
}
/* ================================================================
22 · TIMELINE (Process steps)
================================================================ */
.timeline {
position: relative;
display: flex;
flex-direction: column;
gap: 0;
}
.timeline::before {
content: '';
position: absolute;
left: 23px;
top: 0;
bottom: 0;
width: 2px;
background-color: var(--c-cream-border);
}
.timeline__step {
display: grid;
grid-template-columns: 48px 1fr;
gap: var(--sp-6);
padding-bottom: var(--sp-10);
position: relative;
}
.timeline__step:last-child {
padding-bottom: 0;
}
.timeline__marker {
width: 48px;
height: 48px;
border-radius: 50%;
background-color: var(--c-cream-mid);
border: 2px solid var(--c-cream-border);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-family: var(--font-serif);
font-size: var(--text-md);
font-weight: var(--fw-semibold);
color: var(--c-black-mid);
position: relative;
z-index: 1;
transition: background-color var(--ease), border-color var(--ease);
}
.timeline__step--active .timeline__marker {
background-color: var(--c-red);
border-color: var(--c-red);
color: var(--c-cream);
}
.timeline__content {
padding-top: var(--sp-3);
}
.timeline__headline {
font-family: var(--font-serif);
font-size: var(--text-lg);
font-weight: var(--fw-semibold);
color: var(--c-black);
margin-bottom: var(--sp-3);
}
.timeline__body {
font-size: var(--text-base);
color: var(--c-black-mid);
line-height: var(--lh-relaxed);
}
/* ================================================================
23 · SUPPORTER GRID
================================================================ */
.supporter-grid {
display: flex;
flex-wrap: wrap;
gap: var(--sp-3);
margin-top: var(--sp-8);
}
.supporter-chip {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-2) var(--sp-5);
background-color: var(--c-cream-mid);
border: 1px solid var(--c-cream-border);
border-radius: var(--radius-full);
font-size: var(--text-sm);
font-weight: var(--fw-medium);
color: var(--c-black-mid);
transition: background-color var(--ease), border-color var(--ease);
}
.supporter-chip--founding {
border-color: var(--c-terra-light);
background-color: rgba(200, 125, 74, 0.06);
}
.supporter-chip:hover {
background-color: var(--c-cream-border);
border-color: var(--c-grey);
}
/* ================================================================
24 · PAGE HEADER (Interior pages)
================================================================ */
.page-header {
padding-block: var(--sp-16);
border-bottom: 1px solid var(--c-cream-border);
background-color: var(--c-cream);
}
.page-header--flush {
padding-bottom: 0;
}
.page-header__eyebrow {
margin-bottom: var(--sp-4);
}
.page-header__headline {
font-size: var(--text-5xl);
font-weight: var(--fw-bold);
margin-bottom: var(--sp-5);
max-width: 16ch;
}
.page-header__body {
font-size: var(--text-lg);
color: var(--c-black-mid);
line-height: var(--lh-relaxed);
max-width: 52ch;
margin-bottom: var(--sp-8);
}
/* Breadcrumb */
.breadcrumb {
display: flex;
align-items: center;
gap: var(--sp-2);
list-style: none;
font-size: var(--text-sm);
color: var(--c-grey-dark);
margin-bottom: var(--sp-6);
}
.breadcrumb__item + .breadcrumb__item::before {
content: '/';
color: var(--c-grey);
margin-right: var(--sp-2);
}
.breadcrumb__link {
color: var(--c-grey-dark);
text-decoration: none;
transition: color var(--ease);
}
.breadcrumb__link:hover {
color: var(--c-red-text);
}
.breadcrumb__current {
color: var(--c-black-mid);
font-weight: var(--fw-medium);
}
/* Badge / Tag */
.badge {
display: inline-block;
padding: var(--sp-1) var(--sp-3);
font-size: var(--text-xs);
font-weight: var(--fw-semibold);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
border-radius: var(--radius-full);
}
.badge--founding {
background-color: rgba(200, 125, 74, 0.12);
color: var(--c-terra);
border: 1px solid var(--c-terra-light);
}
.badge--forest {
background-color: rgba(37, 59, 46, 0.08);
color: var(--c-forest);
}
/* ================================================================
25 · CLOSING SECTION
================================================================ */
.section--close {
background-color: var(--c-forest);
padding-block: var(--sp-24);
text-align: center;
}
.section--close .eyebrow {
color: var(--c-terra-light);
}
.section--close h2 {
font-size: var(--text-5xl);
color: var(--c-cream);
margin-top: var(--sp-3);
margin-bottom: var(--sp-5);
max-width: 14ch;
margin-inline: auto;
}
.section--close p {
color: rgba(250, 245, 238, 0.80);
font-size: var(--text-lg);
max-width: 48ch;
margin-inline: auto;
margin-bottom: var(--sp-10);
line-height: var(--lh-relaxed);
}
/* Ghost-cream button for forest background */
.btn--cream {
background-color: var(--c-cream);
color: var(--c-forest);
border-color: var(--c-cream);
}
.btn--cream:hover {
background-color: var(--c-white);
border-color: var(--c-white);
color: var(--c-forest);
box-shadow: var(--shadow-lg);
}
/* Trust note */
.footer-trust {
font-size: var(--text-xs);
color: rgba(250, 245, 238, 0.55);
letter-spacing: var(--ls-wide);
margin-top: var(--sp-5);
}
/* ================================================================
26 · FOOTER
================================================================ */
.site-footer {
background-color: var(--c-black);
color: var(--c-cream);
padding-top: var(--sp-20);
}
.footer-inner {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: var(--sp-12);
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-pad);
padding-bottom: var(--sp-16);
}
.footer-brand {}
.footer-logo {
display: inline-block;
font-family: var(--font-serif);
font-weight: var(--fw-bold);
font-size: var(--text-xl);
color: var(--c-cream);
text-decoration: none;
margin-bottom: var(--sp-4);
transition: color var(--ease), opacity var(--ease);
}
.footer-logo:hover {
color: var(--c-terra-light);
opacity: 0.85;
}
.footer-logo__img {
height: 48px;
width: auto;
display: block;
filter: brightness(0) invert(1);
opacity: 0.9;
}
.footer-brand__descriptor {
font-size: var(--text-base);
color: rgba(250, 245, 238, 0.55);
line-height: var(--lh-base);
margin-bottom: var(--sp-6);
max-width: 28ch;
}
.footer-social {
display: flex;
gap: var(--sp-3);
list-style: none;
}
.footer-social__link {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background-color: rgba(250, 245, 238, 0.08);
color: rgba(250, 245, 238, 0.55);
text-decoration: none;
transition: background-color var(--ease), color var(--ease);
}
.footer-social__link:hover {
background-color: rgba(250, 245, 238, 0.16);
color: var(--c-cream);
}
.footer-social__link svg {
width: 18px;
height: 18px;
}
/* Footer navigation columns */
.footer-col__title {
font-family: var(--font-sans);
font-size: var(--text-xs);
font-weight: var(--fw-semibold);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: rgba(250, 245, 238, 0.45);
margin-bottom: var(--sp-5);
}
.footer-nav {
display: flex;
flex-direction: column;
gap: var(--sp-3);
list-style: none;
}
.footer-nav__link {
font-size: var(--text-base);
color: rgba(250, 245, 238, 0.7);
text-decoration: none;
transition: color var(--ease);
line-height: var(--lh-base);
}
.footer-nav__link:hover {
color: var(--c-cream);
}
/* Footer bottom bar */
.footer-bottom {
border-top: 1px solid rgba(250, 245, 238, 0.1);
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-pad);
padding-block: var(--sp-6);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--sp-4);
}
.footer-bottom__copy {
font-size: var(--text-sm);
color: rgba(250, 245, 238, 0.55);
}
.footer-bottom__note {
font-size: var(--text-sm);
color: rgba(250, 245, 238, 0.55);
font-style: italic;
}
/* ================================================================
26 · UTILITY CLASSES
================================================================ */
/* Text alignment */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
/* Text colour utilities */
.text-red { color: var(--c-red-text); }
.text-terra { color: var(--c-terra); }
.text-muted { color: var(--c-black-mid); }
.text-caption { color: var(--c-black-light); }
.text-cream { color: var(--c-cream); }
.text-white { color: var(--c-white); }
/* Font family */
.font-serif { font-family: var(--font-serif); }
.font-sans { font-family: var(--font-sans); }
/* Display */
.hidden { display: none !important; }
.block { display: block; }
.flex { display: flex; }
/* Margin utilities */
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mt-10 { margin-top: var(--sp-10); }
.mt-12 { margin-top: var(--sp-12); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }
.mb-8 { margin-bottom: var(--sp-8); }
.mb-10 { margin-bottom: var(--sp-10); }
.mb-12 { margin-bottom: var(--sp-12); }
/* Max width utilities */
.max-w-prose { max-width: 68ch; }
.max-w-sm { max-width: 480px; }
.max-w-md { max-width: 640px; }
.max-w-lg { max-width: 800px; }
/* Padding utilities */
.p-0 { padding: 0; }
/* Separator line */
.separator {
display: block;
width: 48px;
height: 3px;
background-color: var(--c-terra);
border-radius: 3px;
margin-top: var(--sp-5);
}
.separator--center {
margin-inline: auto;
}
/* ================================================================
27 · ANIMATIONS & TRANSITIONS
================================================================ */
/* Fade up (for scroll reveal) */
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(24px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Fade in */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Subtle scale in */
@keyframes scaleIn {
from {
opacity: 0;
transform: scale(0.97);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* Scroll reveal: only hide elements when JS has confirmed it loaded.
Without the js-loaded class (JS missing/blocked), elements stay visible. */
.js-loaded .animate-on-scroll {
opacity: 0;
transform: translateY(20px);
transition: opacity var(--ease-slow), transform var(--ease-slow);
}
.js-loaded .animate-on-scroll.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Stagger delays for grid children */
.js-loaded .animate-on-scroll:nth-child(1) { transition-delay: 0ms; }
.js-loaded .animate-on-scroll:nth-child(2) { transition-delay: 80ms; }
.js-loaded .animate-on-scroll:nth-child(3) { transition-delay: 160ms; }
.js-loaded .animate-on-scroll:nth-child(4) { transition-delay: 240ms; }
/* ================================================================
28 · ACCESSIBILITY
================================================================ */
/* Focus-visible ring — visible only on keyboard navigation */
:focus-visible {
outline: 3px solid var(--c-red);
outline-offset: 3px;
border-radius: var(--radius-sm);
}
/* Remove default focus for mouse users */
:focus:not(:focus-visible) {
outline: none;
}
/* High contrast focus for interactive elements on dark backgrounds */
.section--founding :focus-visible,
.site-footer :focus-visible {
outline-color: var(--c-cream);
}
/* Ensure interactive element min touch target */
button, a, input, select, textarea, [role="button"] {
min-height: 44px;
}
/* Exception: inline links in body text */
p a, li a {
min-height: auto;
}
/* Prevent horizontal scroll */
body { overflow-x: hidden; }
/* Accessible hiding (but not visually hidden for animations) */
[hidden] { display: none !important; }
/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.js-loaded .animate-on-scroll {
opacity: 1;
transform: none;
transition: none;
}
}
/* Prefers colour scheme (optional dark mode stub) */
@media (prefers-color-scheme: dark) {
/* Marketing Mikulás does not ship a dark mode in v1.
This placeholder prevents accidental system overrides. */
}
/* ================================================================
29 · RESPONSIVE — TABLET ≤1024px
================================================================ */
@media (max-width: 1024px) {
:root {
--container-pad: var(--sp-8);
}
/* Hero: reduce heading size */
.hero__headline {
font-size: var(--text-5xl);
}
.founding__headline {
font-size: var(--text-4xl);
}
/* Routing grid: 2×2 */
.routing-grid {
grid-template-columns: repeat(2, 1fr);
}
/* Stat grid: 2×2 */
.stat-grid {
grid-template-columns: repeat(2, 1fr);
}
/* Footer: 2-column */
.footer-inner {
grid-template-columns: 1fr 1fr;
gap: var(--sp-10);
}
.footer-brand {
grid-column: 1 / -1;
}
}
/* ================================================================
30 · RESPONSIVE — MOBILE ≤768px
================================================================ */
@media (max-width: 768px) {
:root {
--container-pad: var(--sp-5);
--nav-height: var(--nav-height-sm);
}
/* Show hamburger, hide desktop nav */
.hamburger {
display: flex;
}
.nav-links,
.nav-cta {
display: none;
}
/* Show mobile nav */
.mobile-nav {
display: block;
}
/* Hero: single column, smaller type */
.hero {
min-height: auto;
padding-block: var(--sp-12) var(--sp-16);
}
.hero__inner {
grid-template-columns: 1fr;
gap: var(--sp-10);
}
.hero__visual {
order: -1;
}
.hero__illustration {
max-width: 280px;
margin-inline: auto;
}
.hero__headline {
font-size: var(--text-4xl);
}
.hero__subline {
font-size: var(--text-lg);
}
/* Founding section */
.founding__headline {
font-size: var(--text-3xl);
}
.founding__body {
font-size: var(--text-md);
}
.founding__actions {
flex-direction: column;
align-items: center;
}
/* Routing grid: 1 column */
.routing-grid {
grid-template-columns: 1fr;
gap: var(--sp-4);
}
/* Transparency grid: 1 column */
.transparency-grid {
grid-template-columns: 1fr;
gap: var(--sp-8);
}
/* Newsletter strip: stack */
.newsletter-strip {
flex-direction: column;
align-items: flex-start;
}
.newsletter-form {
width: 100%;
}
.newsletter-form__input {
min-width: 0;
width: 100%;
}
/* Transparency CTA row: stack */
.transparency-cta-row {
flex-direction: column;
align-items: flex-start;
}
/* Section spacing */
.section { padding-block: var(--sp-12); }
.section--lg { padding-block: var(--sp-16); }
/* Stat grid */
.stat-grid {
grid-template-columns: 1fr 1fr;
}
/* Page header */
.page-header__headline {
font-size: var(--text-4xl);
}
/* Headlines */
.headline-display { font-size: var(--text-4xl); }
.headline-xl { font-size: var(--text-4xl); }
.headline-lg { font-size: var(--text-3xl); }
/* Footer */
.footer-inner {
grid-template-columns: 1fr 1fr;
gap: var(--sp-8);
}
.footer-brand {
grid-column: 1 / -1;
}
.footer-bottom {
flex-direction: column;
align-items: flex-start;
gap: var(--sp-2);
}
/* Pull quote */
.pull-quote {
font-size: var(--text-lg);
}
}
/* ================================================================
31 · RESPONSIVE — SMALL ≤480px
================================================================ */
@media (max-width: 480px) {
:root {
--container-pad: var(--sp-4);
}
.hero__headline {
font-size: var(--text-3xl);
}
.founding__headline {
font-size: var(--text-2xl);
}
/* Stat grid: 1 column on very small screens */
.stat-grid {
grid-template-columns: 1fr;
}
/* Footer: 1 column */
.footer-inner {
grid-template-columns: 1fr;
gap: var(--sp-8);
}
/* Buttons stack on small screens */
.hero__actions {
width: 100%;
}
.btn--lg,
.btn--primary,
.btn--secondary {
width: 100%;
justify-content: center;
}
/* Nav logo smaller */
.site-logo__wordmark {
font-size: var(--text-lg);
}
/* Page header */
.page-header {
padding-block: var(--sp-10);
}
.page-header__headline {
font-size: var(--text-3xl);
}
}
/* ================================================================
32 · PROCESS STEPS
================================================================ */
.process-steps {
display: flex;
flex-direction: column;
gap: 0;
}
.process-step {
display: grid;
grid-template-columns: 3rem 1fr;
gap: var(--sp-6);
padding-block: var(--sp-8);
border-bottom: 1px solid var(--c-cream-border);
}
.process-step:last-child {
border-bottom: none;
}
.process-step__number {
font-family: var(--font-serif);
font-size: var(--text-3xl);
font-weight: var(--fw-bold);
color: var(--c-cream-border);
line-height: 1;
padding-top: var(--sp-1);
flex-shrink: 0;
}
.process-step__when {
font-size: var(--text-xs);
font-weight: var(--fw-semibold);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--c-terra);
margin-bottom: var(--sp-2);
display: block;
}
.process-step__title {
font-family: var(--font-serif);
font-size: var(--text-xl);
font-weight: var(--fw-bold);
color: var(--c-black);
margin-bottom: var(--sp-3);
}
.process-step__body {
font-size: var(--text-base);
color: var(--c-black-mid);
line-height: var(--lh-relaxed);
}
/* ================================================================
33 · TIMELINE (10-year arc)
================================================================ */
.timeline {
display: flex;
flex-direction: column;
padding-left: var(--sp-10);
position: relative;
}
.timeline::before {
content: '';
position: absolute;
left: calc(var(--sp-4));
top: var(--sp-2);
bottom: var(--sp-2);
width: 2px;
background: var(--c-cream-border);
}
.timeline-item {
padding-bottom: var(--sp-8);
position: relative;
}
.timeline-item:last-child {
padding-bottom: 0;
}
.timeline-item::before {
content: '';
position: absolute;
left: calc(-1 * var(--sp-10) + var(--sp-4) - 5px);
top: 5px;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--c-cream-border);
border: 2px solid var(--c-cream);
z-index: 1;
}
.timeline-item--active::before {
background: var(--c-red);
border-color: var(--c-cream);
}
.timeline-item__year {
font-size: var(--text-sm);
font-weight: var(--fw-semibold);
color: var(--c-grey-dark);
display: block;
margin-bottom: var(--sp-1);
}
.timeline-item--active .timeline-item__year {
color: var(--c-red-text);
}
.timeline-item__label {
font-family: var(--font-serif);
font-size: var(--text-base);
font-weight: var(--fw-bold);
color: var(--c-black);
margin-bottom: var(--sp-1);
}
.timeline-item__body {
font-size: var(--text-sm);
color: var(--c-black-mid);
line-height: var(--lh-relaxed);
}
/* ================================================================
34 · BENEFIT LIST (checkmark items)
================================================================ */
.benefit-list {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--sp-4);
}
.benefit-item {
display: flex;
align-items: flex-start;
gap: var(--sp-3);
font-size: var(--text-base);
color: var(--c-black-mid);
line-height: var(--lh-relaxed);
}
.benefit-item::before {
content: '';
display: block;
width: 20px;
min-width: 20px;
height: 20px;
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%23253B2E' stroke-width='1.5'/%3E%3Cpath d='M6 10.5l2.5 2.5 5-5' stroke='%23253B2E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
margin-top: 2px;
flex-shrink: 0;
}
/* ================================================================
35 · VALUES GRID
================================================================ */
.values-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-5);
}
.value-card {
background-color: var(--c-cream-mid);
border: 1px solid var(--c-cream-border);
border-radius: var(--radius-lg);
padding: var(--sp-8);
}
.value-card__title {
font-family: var(--font-serif);
font-size: var(--text-lg);
font-weight: var(--fw-bold);
color: var(--c-black);
margin-bottom: var(--sp-3);
}
.value-card__body {
font-size: var(--text-sm);
color: var(--c-black-mid);
line-height: var(--lh-relaxed);
}
/* ================================================================
36 · EMPTY STATE
================================================================ */
.empty-state {
text-align: center;
padding-block: var(--sp-24);
}
.empty-state__headline {
font-family: var(--font-serif);
font-size: var(--text-4xl);
font-weight: var(--fw-bold);
color: var(--c-black);
margin-bottom: var(--sp-5);
max-width: 22ch;
margin-inline: auto;
line-height: var(--lh-tight);
}
.empty-state__body {
font-size: var(--text-lg);
color: var(--c-black-mid);
max-width: 46ch;
margin-inline: auto;
line-height: var(--lh-relaxed);
margin-bottom: var(--sp-10);
}
/* ================================================================
37 · ROLE CARDS (Volunteer)
================================================================ */
.role-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-5);
}
.role-card {
background-color: var(--c-cream-mid);
border: 1px solid var(--c-cream-border);
border-radius: var(--radius-lg);
padding: var(--sp-7);
}
.role-card__title {
font-family: var(--font-serif);
font-size: var(--text-base);
font-weight: var(--fw-bold);
color: var(--c-black);
margin-bottom: var(--sp-2);
}
.role-card__body {
font-size: var(--text-sm);
color: var(--c-black-mid);
line-height: var(--lh-relaxed);
}
/* ================================================================
38 · KEY FACTS (Press kit)
================================================================ */
.facts-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-4);
}
.fact-item {
padding: var(--sp-6);
background-color: var(--c-cream-mid);
border: 1px solid var(--c-cream-border);
border-radius: var(--radius-lg);
}
.fact-item__label {
font-size: var(--text-xs);
font-weight: var(--fw-semibold);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--c-grey-dark);
margin-bottom: var(--sp-2);
display: block;
}
.fact-item__value {
font-family: var(--font-serif);
font-size: var(--text-lg);
font-weight: var(--fw-bold);
color: var(--c-black);
line-height: var(--lh-tight);
}
/* ================================================================
39 · FORM PAGE WRAPPER
================================================================ */
.form-page {
background-color: var(--c-cream);
padding-block: var(--sp-16) var(--sp-24);
}
.form-page .section-header {
margin-bottom: var(--sp-10);
}
.form-page__inner {
max-width: 580px;
margin-inline: auto;
}
/* Privacy box — used in jeloles */
.privacy-note {
background-color: rgba(37, 59, 46, 0.06);
border: 1px solid rgba(37, 59, 46, 0.15);
border-radius: var(--radius-lg);
padding: var(--sp-6);
margin-bottom: var(--sp-8);
}
.privacy-note__title {
font-size: var(--text-sm);
font-weight: var(--fw-semibold);
color: var(--c-forest);
margin-bottom: var(--sp-2);
}
.privacy-note__body {
font-size: var(--text-sm);
color: var(--c-black-mid);
line-height: var(--lh-relaxed);
}
/* Step process — 3-step joining flow */
.join-steps {
display: flex;
flex-direction: column;
gap: var(--sp-6);
counter-reset: join-step;
}
.join-step {
display: flex;
gap: var(--sp-5);
align-items: flex-start;
counter-increment: join-step;
}
.join-step__num {
width: 2rem;
height: 2rem;
min-width: 2rem;
border-radius: 50%;
background: var(--c-red);
color: var(--c-cream);
font-size: var(--text-sm);
font-weight: var(--fw-semibold);
display: flex;
align-items: center;
justify-content: center;
margin-top: 2px;
}
.join-step__title {
font-family: var(--font-serif);
font-size: var(--text-base);
font-weight: var(--fw-bold);
color: var(--c-black);
margin-bottom: var(--sp-1);
}
.join-step__body {
font-size: var(--text-sm);
color: var(--c-black-mid);
line-height: var(--lh-relaxed);
}
/* Commitment block — used in nagykovetek */
.commitment-block {
background-color: var(--c-forest);
border-radius: var(--radius-lg);
padding: var(--sp-10);
color: var(--c-cream);
text-align: center;
margin-block: var(--sp-10);
}
.commitment-block__quote {
font-family: var(--font-serif);
font-size: var(--text-2xl);
font-weight: var(--fw-bold);
line-height: var(--lh-tight);
margin-bottom: var(--sp-4);
}
.commitment-block__sub {
font-size: var(--text-sm);
color: rgba(250, 245, 238, 0.75);
line-height: var(--lh-relaxed);
}
/* ================================================================
40 · RESPONSIVE — inner page components
================================================================ */
@media (max-width: 1024px) {
.facts-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.process-step {
grid-template-columns: 2.5rem 1fr;
gap: var(--sp-4);
}
.process-step__number {
font-size: var(--text-2xl);
}
.values-grid,
.role-grid {
grid-template-columns: 1fr;
}
.empty-state__headline {
font-size: var(--text-3xl);
}
.commitment-block__quote {
font-size: var(--text-xl);
}
}
@media (max-width: 480px) {
.facts-grid {
grid-template-columns: 1fr;
}
.empty-state__headline {
font-size: var(--text-2xl);
}
}
/* ================================================================
34 · MOBIL FINOMÍTÁS — ≤768px kiegészítések
================================================================ */
@media (max-width: 768px) {
/* Section címek skálázása (text-4xl → text-3xl) */
.section-header h2,
.section-header--centered h2 {
font-size: var(--text-3xl);
}
/* Hero szövegtörzs kicsit kisebb */
.hero__body {
font-size: var(--text-base);
margin-bottom: var(--sp-6);
}
/* Hero fotó: kicsit nagyobb, mint az SVG volt */
.hero__illustration {
max-width: 320px;
}
/* Founding section: kevesebb térköz mobilon */
.section--founding {
padding-block: var(--sp-16);
}
/* Érintési célterület: form inputok min. 44px */
.form-input,
.form-select {
min-height: 44px;
}
/* Page header szövegtörzs */
.page-header__body {
font-size: var(--text-base);
}
}
/* ================================================================
35 · MOBIL FINOMÍTÁS — ≤480px kiegészítések
================================================================ */
@media (max-width: 480px) {
/* Section címek tovább csökkentve */
.section-header h2,
.section-header--centered h2 {
font-size: var(--text-2xl);
}
/* Section header alján szorosabb */
.section-header,
.section-header--centered {
margin-bottom: var(--sp-8);
}
/* Founding section: kompakt */
.section--founding {
padding-block: var(--sp-12);
}
/* Newsletter form: teljesen egymás alá */
.newsletter-form {
flex-direction: column;
align-items: stretch;
}
}
/* ================================================================
36 · MOBIL FINOMÍTÁS — ≤375px (iPhone SE, kis Androidok)
================================================================ */
@media (max-width: 375px) {
:root {
--container-pad: var(--sp-3);
}
.hero__headline {
font-size: var(--text-2xl);
}
.hero__subline {
font-size: var(--text-base);
}
.page-header__headline {
font-size: var(--text-2xl);
}
}
/* ================================================================
37 · HOZZÁJÁRULÁSI BEÁLLÍTÁSOK
================================================================ */
.consent-panel {
position: fixed;
z-index: 1000;
right: var(--sp-4);
bottom: var(--sp-4);
left: var(--sp-4);
padding: var(--sp-5);
color: var(--c-cream);
background: var(--c-forest);
border: 1px solid var(--c-cream);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}
.consent-panel[hidden],
.consent-details[hidden] {
display: none;
}
.consent-panel__content {
max-width: 72rem;
margin: 0 auto;
}
.consent-panel h2 {
margin: 0 0 var(--sp-2);
color: inherit;
font-size: var(--text-lg);
}
.consent-panel p {
margin: 0 0 var(--sp-4);
}
.consent-actions,
.consent-details {
display: flex;
flex-wrap: wrap;
gap: var(--sp-3);
align-items: center;
}
.consent-details {
margin-top: var(--sp-4);
}
.consent-option {
display: inline-flex;
gap: var(--sp-2);
align-items: center;
}
.consent-button,
.consent-settings-button {
min-height: 44px;
padding: 0.6rem 1rem;
color: inherit;
font: inherit;
background: transparent;
border: 1px solid currentColor;
cursor: pointer;
}
.consent-button--primary {
color: var(--c-forest);
background: var(--c-cream);
}
.consent-button--quiet,
.consent-settings-button {
border-color: transparent;
text-decoration: underline;
}
.consent-settings-button {
display: block;
margin: var(--sp-5) auto;
color: var(--c-forest);
}
.site-footer .consent-settings-button {
color: var(--c-cream);
}
.site-footer .consent-settings-button:focus-visible {
outline-color: var(--c-cream);
}
.consent-button:focus-visible,
.consent-settings-button:focus-visible,
.consent-option input:focus-visible {
outline: 3px solid var(--c-terra-light);
outline-offset: 3px;
}
@media (max-width: 600px) {
.consent-actions,
.consent-details {
flex-direction: column;
align-items: stretch;
}
}
@media (prefers-reduced-motion: reduce) {
.consent-panel,
.consent-button,
.consent-settings-button {
transition: none;
}
}