/* * Design Tokens — Indlu Yethemba Ministries * ---------------------------------------- * Waarden komen 1-op-1 uit het ontwerp (_ontwerp/*.html). * Refereer in componenten altijd naar var(--...), nooit hardcoded. */ :root { /* ============================================ * MERKKLEUREN — de vijf kleuren uit het ontwerp * ============================================ */ --color-sun: #F4B324; /* Geel: accenten, cijfers, hamburger */ --color-clay: #E4552B; /* Oranjerood: donatieknoppen */ --color-clay-deep: #C6431E; /* Hover op donatieknoppen */ --color-leaf: #0E5138; /* Groen: menu-overlay, groen scherm */ --color-ink: #0B0D08; /* Bijna zwart: achtergrond hele site */ --color-cream: #FBF3E2; /* Crème: alle tekst op donker */ --color-paper: #F7F1E4; /* Papier: lichte secties */ --color-ink-soft: #3F3A2E; /* Bodytekst op papier */ --color-ink-15: rgba(11, 13, 8, 0.15); /* Scheidingslijn op papier */ --color-ink-16: rgba(11, 13, 8, 0.16); /* Rand om een invoerveld */ --color-ink-14: rgba(11, 13, 8, 0.14); /* Rand om een betaalmethode */ --color-ink-12: rgba(11, 13, 8, 0.12); /* Regel in een tabel */ --color-ink-10: rgba(11, 13, 8, 0.10); /* Regel in een lichte kaart */ --color-ink-07: rgba(11, 13, 8, 0.07); /* Achtergrond keuzeschakelaar */ --color-ink-28: rgba(11, 13, 8, 0.28); /* Tijdelijke tekst in een veld */ --color-ink-035: rgba(11, 13, 8, 0.035); /* Hover op papier */ /* Crème met transparantie — voor secundaire tekst en randen */ --color-cream-muted: rgba(251, 243, 226, 0.62); --color-cream-95: rgba(251, 243, 226, 0.95); --color-cream-90: rgba(251, 243, 226, 0.90); --color-cream-88: rgba(251, 243, 226, 0.88); --color-cream-92: rgba(251, 243, 226, 0.92); --color-cream-60: rgba(251, 243, 226, 0.60); --color-cream-50: rgba(251, 243, 226, 0.50); --color-cream-85: rgba(251, 243, 226, 0.85); --color-cream-75: rgba(251, 243, 226, 0.75); --color-cream-72: rgba(251, 243, 226, 0.72); --color-cream-16: rgba(251, 243, 226, 0.16); --color-cream-55: rgba(251, 243, 226, 0.55); --color-cream-40: rgba(251, 243, 226, 0.40); --color-cream-28: rgba(251, 243, 226, 0.28); --color-cream-22: rgba(251, 243, 226, 0.22); --color-cream-20: rgba(251, 243, 226, 0.20); --color-cream-12: rgba(251, 243, 226, 0.12); --color-cream-06: rgba(255, 255, 255, 0.06); /* --- Semantische aliassen (namen uit de Junto-starter) --- */ --color-primary: var(--color-leaf); --color-primary-dark: #0A3A28; --color-accent: var(--color-clay); --color-bg-dark: var(--color-ink); --color-bg-light: var(--color-cream); --color-text-body: var(--color-cream); --color-text-heading: var(--color-cream); --color-text-light: var(--color-cream); --color-text-muted: var(--color-cream-muted); --color-border: var(--color-cream-22); --color-border-light: var(--color-cream-12); /* ============================================ * TYPOGRAFIE * ============================================ */ --font-display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif; --font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; --font-serif: 'Instrument Serif', Georgia, serif; /* Alias voor starter-componenten die --font-heading verwachten */ --font-heading: var(--font-display); /* Weights */ --font-regular: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; /* Vaste groottes */ --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; --text-3xl: 36px; --text-4xl: 48px; --text-5xl: 64px; /* Meeschalende groottes uit het ontwerp */ --text-hero: clamp(2.4rem, 6.4vw, 5.4rem); /* h1 openingsscherm */ --text-lead: clamp(1.7rem, 4vw, 3rem); /* cursieve lead */ --text-chapter: clamp(2rem, 5vw, 3.6rem); /* projecttitel */ --text-heading-s: clamp(1.6rem, 3vw, 2.4rem); /* hoofdstuktitel */ --text-amount: clamp(2rem, 4.4vw, 3.2rem); /* bedragen */ --text-count: clamp(1.5rem, 2.4vw, 2rem); /* 01 / 06 teller */ --text-quote: clamp(1.3rem, 2.5vw, 1.9rem); /* afsluitende zin */ --text-menu: clamp(1.9rem, 6vw, 3.8rem); /* overlay-menu */ --text-flow: clamp(1.02rem, 1.45vw, 1.15rem);/* bodytekst */ --text-intro: clamp(1.02rem, 1.5vw, 1.18rem); /* intro/sub */ /* Meeschalende groottes van de binnenpagina's */ --text-page-title: clamp(3.2rem, 11vw, 9rem); /* paginakop */ --text-page-intro: clamp(1.08rem, 1.7vw, 1.3rem); --text-feature: clamp(2.6rem, 7vw, 5.4rem); /* hoofdstuktitel volvlak */ --text-feature-large: clamp(2.6rem, 7.5vw, 6rem); /* de droom */ --text-showcase: clamp(2.2rem, 5vw, 4.2rem); /* hoofdstuktitel ingekaderd */ --text-cost: clamp(1.25rem, 2.2vw, 1.8rem); /* kostenregel, cursief */ --text-dream-quote: clamp(1.45rem, 2.9vw, 2.2rem); --text-ask: clamp(1.5rem, 3vw, 2.2rem); --text-team-title: clamp(3rem, 8.5vw, 6.4rem); /* paginakop met gezichten */ --text-team-intro: clamp(1.05rem, 1.6vw, 1.24rem); --text-person: clamp(2rem, 4vw, 3.2rem); /* naam van een teamlid */ --text-pull: clamp(1.3rem, 2.3vw, 1.75rem); /* uitgelichte zin */ --text-green-title: clamp(2rem, 4.4vw, 3.2rem); --text-close-title: clamp(1.8rem, 4.2vw, 3.2rem); --text-person-flow: 1.04rem; --text-green-flow: 1.1rem; --text-close-flow: 1.08rem; --text-hero-compact: clamp(2.8rem, 8vw, 6.4rem); /* paginakop Steun ons */ --text-module: clamp(1.7rem, 3.2vw, 2.5rem); /* titel donatiemodule */ --text-impact: clamp(2.2rem, 5vw, 3.8rem); --text-impact-amount: clamp(2.4rem, 5.4vw, 4rem); --text-verhaal: clamp(1.5rem, 3.4vw, 2.6rem); --text-leaf-title: clamp(2rem, 4.4vw, 3.4rem); --text-duo-title: clamp(1.7rem, 3.4vw, 2.5rem); --text-doc-title: clamp(2.2rem, 5.5vw, 4rem); /* kop van een documentpagina */ --text-doc-h2: clamp(1.4rem, 2.6vw, 1.9rem); --leading-person: 1.76; --leading-green: 1.75; --text-feature-flow: clamp(1.05rem, 1.5vw, 1.18rem); /* alinea in een volvlak-hoofdstuk */ --text-showcase-flow: 1.06rem; /* alinea naast een ingekaderd beeld */ --leading-feature: 1.7; --leading-showcase: 1.72; /* Line heights */ --leading-display: 0.98; --leading-none: 1; --leading-tight: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.6; /* homepage */ --leading-page: 1.65; /* binnenpagina's, iets ruimer */ --leading-loose: 1.9; /* Letter spacing */ --tracking-display: -0.025em; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-eyebrow: 0.2em; --tracking-cue: 0.24em; /* ============================================ * SPACING — 4px schaal * ============================================ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* ============================================ * LAYOUT * ============================================ */ --gutter: 8vw; /* zijmarge van de scroll-hoofdstukken */ --gutter-mobile: 7vw; --measure-wide: 880px; /* gecentreerde tekstkolom */ --measure: 740px; /* linkslijnende tekstkolom */ --measure-slide: 720px; /* projecttekst */ --measure-text: 58ch; /* leesbreedte bodytekst */ --measure-intro: 56ch; --measure-hero: 50ch; /* intro onder een paginakop */ --measure-feature: 52ch; /* tekst in een volvlak-hoofdstuk */ --measure-column: 48ch; /* tekst naast een ingekaderd beeld */ --page-inner: 1240px; /* binnenmaat binnenpagina's */ --page-inner-narrow: 1180px; /* binnenmaat ingekaderde hoofdstukken */ --page-gutter: 6vw; --container-wide: 1180px; /* teampaginas */ --container-wide-pad: 36px; --container-narrow: 1080px; /* paginas met een paneel over de kop */ --container-narrow-pad: 32px; --container-pad-mobiel: 22px; --container-max: 1280px; --section-padding-y: 80px; --section-padding-x: 24px; /* ============================================ * EFFECTEN * ============================================ */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); --shadow-logo: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45)); --shadow-round: 0 8px 26px rgba(0, 0, 0, 0.35); --shadow-donate: 0 10px 30px rgba(228, 85, 43, 0.4); /* Knop-padding: de homepage is iets ruimer dan de binnenpaginas */ --btn-pad-y: 16px; --btn-pad-x: 30px; --radius-none: 0; --radius-sm: 4px; --radius-md: 8px; --radius-pill: 100px; --radius-full: 9999px; --transition-fast: 0.16s ease-in-out; --transition-base: 0.3s ease-in-out; --ease-pop: cubic-bezier(0.5, 1.6, 0.4, 1); /* veerkrachtig, hamburger */ --ease-curtain: cubic-bezier(0.7, 0, 0.2, 1); /* menu-overlay */ /* Beeldbehandeling uit het ontwerp */ --tint-media: linear-gradient(160deg, rgba(14, 81, 56, 0.5), rgba(228, 85, 43, 0.32) 60%, rgba(11, 13, 8, 0.66)); --scrim-center: radial-gradient(130% 100% at 50% 50%, rgba(11, 13, 8, 0.22), rgba(11, 13, 8, 0.8)); --scrim-left: linear-gradient(90deg, rgba(11, 13, 8, 0.92), rgba(11, 13, 8, 0.55) 58%, rgba(11, 13, 8, 0.15)); --green-screen: linear-gradient(180deg, #0E3F2C, #0B1F16); /* Beeldbehandeling van de binnenpagina's (iets steviger dan op de homepage) */ --tint-page: linear-gradient(160deg, rgba(14, 81, 56, 0.55), rgba(228, 85, 43, 0.3) 60%, rgba(11, 13, 8, 0.7)); --tint-feature: linear-gradient(150deg, rgba(14, 81, 56, 0.5), rgba(228, 85, 43, 0.25) 60%, rgba(11, 13, 8, 0.7)); --tint-figure: linear-gradient(160deg, rgba(14, 81, 56, 0.3), rgba(228, 85, 43, 0.12) 60%, rgba(11, 13, 8, 0.25)); --scrim-page-hero: linear-gradient(180deg, rgba(11, 13, 8, 0.5), rgba(11, 13, 8, 0.25) 40%, rgba(11, 13, 8, 0.95)); --scrim-feature-left: linear-gradient(90deg, rgba(11, 13, 8, 0.92), rgba(11, 13, 8, 0.6) 55%, rgba(11, 13, 8, 0.2)); --scrim-feature-right: linear-gradient(270deg, rgba(11, 13, 8, 0.92), rgba(11, 13, 8, 0.6) 55%, rgba(11, 13, 8, 0.2)); --wash-showcase: radial-gradient(120% 90% at 50% 40%, rgba(11, 13, 8, 0.72), rgba(11, 13, 8, 0.94)); --scrim-team-hero: linear-gradient(180deg, rgba(11, 13, 8, 0.6) 0%, rgba(11, 13, 8, 0.45) 45%, rgba(11, 13, 8, 0.7) 100%); --scrim-closing: radial-gradient(120% 90% at 50% 50%, rgba(11, 13, 8, 0.35), rgba(11, 13, 8, 0.92)); --scrim-verhaal: radial-gradient(120% 90% at 50% 50%, rgba(11, 13, 8, 0.4), rgba(11, 13, 8, 0.9)); --scrim-hero-diep: linear-gradient(180deg, rgba(11, 13, 8, 0.5), rgba(11, 13, 8, 0.3) 40%, rgba(11, 13, 8, 0.96)); --scrim-document: linear-gradient(180deg, rgba(11, 13, 8, 0.62), rgba(11, 13, 8, 0.5)); --tint-document: linear-gradient(160deg, rgba(14, 81, 56, 0.55), rgba(228, 85, 43, 0.28) 60%, rgba(11, 13, 8, 0.7)); --scrim-fade-hero: linear-gradient(180deg, rgba(11, 13, 8, 0.62) 0%, rgba(11, 13, 8, 0.42) 35%, rgba(11, 13, 8, 0.28) 60%, rgba(11, 13, 8, 0.14) 100%); --fade-to-paper: linear-gradient(180deg, rgba(247, 241, 228, 0) 0%, rgba(247, 241, 228, 0.06) 18%, rgba(247, 241, 228, 0.16) 32%, rgba(247, 241, 228, 0.32) 46%, rgba(247, 241, 228, 0.54) 60%, rgba(247, 241, 228, 0.76) 74%, rgba(247, 241, 228, 0.92) 86%, rgba(247, 241, 228, 1) 100%); --veil-face: linear-gradient(180deg, rgba(11, 13, 8, 0.05), rgba(11, 13, 8, 0.78)); --tint-portret-donker: linear-gradient(160deg, rgba(14, 81, 56, 0.26), rgba(228, 85, 43, 0.1) 60%, rgba(11, 13, 8, 0.2)); --tint-portret-licht: linear-gradient(160deg, rgba(14, 81, 56, 0.12), rgba(228, 85, 43, 0.04) 60%, rgba(11, 13, 8, 0.08)); --shadow-figure: 0 30px 70px rgba(0, 0, 0, 0.5); --ease-drift: cubic-bezier(0.2, 0.6, 0.2, 1); }