/* Bestand: style.css */
/* ================================================================== */
/* 1. HET CENTRALE CONTROLEPANEEL: CSS VARIABELEN & SEIZOENEN */
/* ================================================================== */
:root {
/* Lettertypes */
--font-heading: 'Inter', sans-serif;
--font-subheading: 'Bitter', serif;
--font-body: 'Bitter', serif;
/* Standaard Kleuren (Wordt gebruikt als fallback en voor de Herfst) */
--color-primary: #1A241D; /* Komt overeen met 'mana-brown' */
--color-accent: #9A3412; /* Standaard accent, varieert per seizoen */
--color-text: #44403C;
--color-background: #F8F6F2;
--color-paper: #F9F8F6; /* Toegevoegd uit financiele-kennis.html */
}
/* --- SEIZOENS OVERRIDES --- */
/* Pas de class op de aan om het hele thema te wijzigen */
/* WINTER (Dec, Jan, Feb) - Koud, stil, goud/brons */
body.season-winter {
--color-primary: #1C232B;
--color-accent: #C28E5B;
}
/* LENTE (Mrt, Apr, Mei) - Fris, groei, helder oranje/geel */
body.season-spring {
--color-primary: #1A261A;
--color-accent: #D97706;
}
/* ZOMER (Jun, Jul, Aug) - Kracht, hitte, fel oranje */
body.season-summer {
--color-primary: #292524;
--color-accent: #EA580C;
}
/* HERFST (Sep, Okt, Nov) - Loslaten, aarde, roest */
body.season-autumn {
--color-primary: #1A241D;
--color-accent: #C66800;
}
/* ================================================================== */
/* 2. BASIS STIJLEN & UTILITIES */
/* ================================================================== */
body {
font-family: var(--font-body);
background-color: var(--color-background);
color: var(--color-text);
scroll-behavior: smooth;
transition: background-color 0.5s ease, color 0.5s ease;
}
/* AANGEPAST: Strakkere waarden zodat de tekst direct onder de balk begint */
html {
scroll-padding-top: 0px; /* Mobiel */
}
@media (min-width: 768px) {
html {
scroll-padding-top: 0px; /* Desktop */
}
}
/* Typografie Helpers */
.font-heading { font-family: var(--font-heading); }
.font-subheading { font-family: var(--font-subheading); font-style: italic; }
.font-sans { font-family: var(--font-heading); } /* Correctie: consistentie met heading font */
/* Kleur Utilities - Vervangt de Tailwind script config in HTML */
/* Deze klassen zorgen dat je Tailwind-achtige namen kunt gebruiken die reageren op seizoenen */
.text-mana-brown { color: var(--color-primary); }
.bg-mana-brown { background-color: var(--color-primary); }
.text-accent-orange { color: var(--color-accent); }
.bg-accent-orange { background-color: var(--color-accent); }
.border-accent-orange { border-color: var(--color-accent); }
.bg-paper { background-color: var(--color-paper); }
/* Verberg scrollbar (voor horizontale scrollgebieden in inspiratie/blog) */
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
/* Navigatie Link Animatie */
.nav-link { position: relative; padding-bottom: 4px; transition: color 0.3s; }
.nav-link::after { content: ''; position: absolute; width: 0; height: 2px; bottom: 0; left: 50%; background-color: var(--color-primary); transition: width 0.3s ease-in-out, left 0.3s ease-in-out; }
.nav-link:hover::after { width: 100%; left: 0; }
/* ================================================================== */
/* 3. KNOP STIJLEN */
/* ================================================================== */
.btn-primary {
display: inline-block;
padding: 0.75rem 2rem;
border-radius: 9999px;
background-color: var(--color-primary);
color: white;
font-family: var(--font-body);
font-weight: 700;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}
.btn-primary:hover {
background-color: var(--color-accent);
}
/* ================================================================== */
/* 4. HERO ACHTERGRONDEN */
/* ================================================================== */
/* Alle hero images nu gecentraliseerd */
.hero-bg { background-image: url('images/fotothomas.jpg'); background-size: cover; background-position: center 35%; }
.hero-bg-return { background-image: url('images/eenopeen-2.png'); background-size: cover; background-position: center; }
.hero-bg-brotherhood { background-image: url('images/brotherhood.png'); background-size: 105%; background-position: center 70%; }
.hero-bg-community { background-image: url('images/transformers.png'); background-size: cover; background-position: center 62%; }
.hero-bg-weekend { background-image: url('images/manaweekenden.png'); background-size: 105%; background-position: center 80%; }
.hero-bg-cacao { background-image: url('images/cacao-ceremonie-1.jpg'); background-size: cover; background-position: center; }
.hero-bg-ochtendrituelen { background-image: url('images/ochtend-yoga-1.jpg'); background-size: cover; background-position: center; }
.hero-bg-ademhaling { background-image: url('images/ademhaling-1.jpg'); background-size: cover; background-position: center; }
.hero-bg-wandeling { background-image: url('images/boswandeling-1.jpg'); background-size: cover; background-position: center; }
.hero-bg-survival { background-image: url('images/survival-1.jpg'); background-size: cover; background-position: center; }
.hero-bg-vuur { background-image: url('images/kampvuurverhalen-5.jpg'); background-size: cover; background-position: center; }
.hero-bg-family { background-image: url('images/familie-opstellingen.png'); background-size: 120%; background-position: center; }
.hero-bg-filosofie { background-image: url('images/sequoia-sunrise.jpg'); background-size: cover; background-position: center; }
.hero-bg-vaderschap { background-image: url('https://images.pexels.com/photos/899321/pexels-photo-899321.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'); background-size: cover; background-position: center; }
.hero-bg-phone { background-image: url('images/phone-challenge.png'); background-size: cover; background-position: center 67%; }
/* Nieuw toegevoegd uit HTML bestanden: */
.hero-bg-over {
background-image: url('images/fotothomas-2.jpg');
background-size: cover;
background-position: center 30%;
}
.hero-bg-joy {
background-image: url('images/brotherhood.png');
background-size: cover;
background-position: center;
}
/* Nieuwe Hero Backgrounds voor Challenges */
.hero-bg-gratitude { background-image: url('https://images.pexels.com/photos/1051838/pexels-photo-1051838.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'); background-size: cover; background-position: center; }
.hero-bg-fitness { background-image: url('https://images.pexels.com/photos/3775603/pexels-photo-3775603.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'); background-size: cover; background-position: center; }
.hero-bg-alcohol { background-image: url('https://images.unsplash.com/photo-1441974231531-c6227db76b6e?q=80&w=1920&auto=format&fit=crop'); background-size: cover; background-position: center; }
.hero-bg-phone { background-image: url('images/phone-challenge.png'); background-size: cover; background-position: center 67%; }
/* Standaard kaart animatie (stond inline) */
.card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
/* ================================================================== */
/* 5. COMPONENTEN & ANIMATIES */
/* ================================================================== */
/* Testimonial Carrousel */
#ervaringen { background-color: var(--color-primary); }
#ervaringen .font-subheading { color: #F9FAFB; }
#ervaringen .font-heading { color: #E5E7EB; }
#ervaringen .text-sm { color: #9CA3AF; }
.quote-icon {
display: inline-block;
width: 40px;
height: 40px;
background-color: var(--color-accent);
mask: url('data:image/svg+xml;utf8,') no-repeat center;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center;
mask-size: contain;
-webkit-mask-size: contain;
}
.dot-container { display: flex; justify-content: center; margin-top: 3rem; }
.dot { height: 10px; width: 10px; margin: 0 5px; background-color: rgba(255, 255, 255, 0.4); border-radius: 50%; display: inline-block; transition: all 0.6s ease; cursor: pointer; }
.dot.active { background-color: var(--color-accent); transform: scale(1.2); }
.testimonial-item { display: none; transition: opacity 0.5s ease-in-out; }
.testimonial-item.active { display: block; }
/* Agenda Animaties (uit thomaskerstens.html) */
.agenda-item {
opacity: 0;
transform: translateY(20px);
transition: all 0.8s ease-out;
max-height: 0;
margin-bottom: 0;
overflow: hidden;
}
.agenda-item.visible {
opacity: 1;
transform: translateY(0);
max-height: 100px;
margin-bottom: 1rem;
}
.agenda-item.fading-out {
opacity: 0;
transform: translateY(-20px);
max-height: 0;
margin-bottom: 0;
transition: all 0.8s ease-in;
}
@keyframes bounce-slow {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-10px);}
60% {transform: translateY(-5px);}
}
.animate-bounce-slow {
animation: bounce-slow 2s infinite;
}
/* Parallax */
.parallax-container {
top: -80px;
width: 80%;
height: 450px;
overflow: hidden;
position: relative;
}
.parallax-image {
position: absolute;
left: 0;
width: 100%;
height: 140%;
object-fit: cover;
object-position: center 75%;
}
/* Custom Button met Icoon */
.custom-button {
display: inline-flex;
align-items: center;
position: relative;
overflow: hidden;
font-family: var(--font-heading);
font-weight: 700;
color: var(--color-primary);
background-color: var(--color-background);
border: 1px solid var(--color-primary);
border-radius: 9999px;
padding: 0.25rem;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.custom-button:hover {
background-color: var(--color-accent);
border-color: var(--color-accent);
color: white;
}
.custom-button .button-icon-wrapper {
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background-color: var(--color-accent);
color: white;
}
.custom-button .button-text { padding-left: 1.25rem; padding-right: 1.25rem; }
.custom-button svg { width: 1.25rem; height: 1.25rem; }
.custom-button .icon-hover { display: none; }
.custom-button .icon-default { display: block; }
.custom-button:hover .icon-hover { display: block; }
.custom-button:hover .icon-default { display: none; }
/* ================================================================== */
/* 6. HERSTEL TAILWIND HOVER STATEN */
/* ================================================================== */
/* Omdat we het script hebben verwijderd, moeten we deze klassen */
/* handmatig definiëren zodat de hover-effecten weer werken. */
/* Tekst kleuren bij hover */
.hover\:text-mana-brown:hover {
color: var(--color-primary) !important;
}
.hover\:text-accent-orange:hover {
color: var(--color-accent) !important;
}
/* Achtergrond kleuren bij hover */
.hover\:bg-mana-brown:hover {
background-color: var(--color-primary) !important;
}
.hover\:bg-accent-orange:hover {
background-color: var(--color-accent) !important;
}
/* Rand kleuren bij hover */
.hover\:border-accent-orange:hover {
border-color: var(--color-accent) !important;
}
/* Specifiek voor de navigatie links die groen moeten worden */
a.nav-link:hover {
color: var(--color-primary);
}
/* ================================================================== */
/* 7. SPECIFIEKE PAGINA STYLES */
/* ================================================================== */
/* Bruce Lipton Grafiek */
.wave-path {
stroke-width: 3;
fill: none;
stroke-linecap: round;
}
/* Success Pagina Lijstjes */
.list-item-thomas {
display: flex;
align-items: flex-start;
margin-bottom: 0.75rem;
}
.list-item-thomas::before {
content: '🌿';
margin-right: 0.75rem;
font-size: 1.1rem;
line-height: 1.5;
color: var(--color-primary);
}
/* Vaderschap Quote */
blockquote {
border-left: 4px solid var(--color-accent);
padding-left: 1rem;
margin-left: 1rem;
font-style: italic;
}
/* ================================================================== */
/* 8. ADEMHALINGSTOOL STYLES (voor 4-kalmerende-ademtechnieken.html) */
/* ================================================================== */
.tab-active {
background-color: var(--color-primary);
color: #ffffff;
}
.tab-inactive {
background-color: var(--color-background);
color: var(--color-text);
}
.tab-inactive:hover {
background-color: #e5e7eb; /* lichte hover */
}
.dot {
transition: transform 3.9s linear;
}
/* 4-7-8 Breathing (19s cyclus) */
@keyframes breathe-478 {
0%, 100% { transform: scale(0.6); }
21.05% { transform: scale(1); } /* 4s in */
57.89% { transform: scale(1); } /* 7s vast */
}
.animate-478 {
animation: breathe-478 19s infinite ease-in-out;
}
/* Hartcoherentie (10s cyclus) */
@keyframes breathe-coherence {
0%, 100% { transform: scale(0.8); }
50% { transform: scale(1); }
}
.animate-coherence {
animation: breathe-coherence 10s infinite ease-in-out;
}
/* Fysiologische Zucht (4s cyclus) */
@keyframes breathe-sigh {
0% { transform: scale(0.6); }
25% { transform: scale(0.84); }
50% { transform: scale(1.0); }
100% { transform: scale(0.6); }
}
.animate-sigh {
animation: breathe-sigh 4s infinite ease-in-out;
}