/* ======================================== CONGRES-TEMPLATE — Main Stylesheet Huisstijl per site: pas de tokens in :root hieronder aan (of overschrijf ze via Site → Huisstijl in het Panel). ======================================== */ /* --- CSS Variables --- */ :root { --primary: #2E7D32; --primary-dark: #0A3311; --primary-light: #4FA84F; --accent: #8CC63F; --accent-light: #B7E06A; --navy: #06240B; --black: #041A07; --charcoal: #14361A; --dark-gray: #2C5231; --medium-gray: #5F7A5E; --light-gray: #97AE93; --silver: #CBD9C6; --off-white: #F3F8F1; --white: #FFFFFF; --cream: #F7FBF5; --dark-text: #0A3311; --light-text: #B3C9AC; --body-text: #3D5A40; --overlay: rgba(10, 51, 17, 0.85); --overlay-rgb: 10, 51, 17; /* Brand accent set — vervang per site */ --brand-green: #2E7D32; --brand-teal: #12695A; --brand-blue: #2F7D8C; --brand-cyan: #8CC63F; --brand-pink: #D96BA0; --brand-orange: #E08A2E; --brand-gold: #D8C24A; --brand-coral: #D45B44; --font-display: 'Source Serif 4', Georgia, serif; --font-body: 'Inter', 'Helvetica Neue', sans-serif; --container: 1200px; --container-narrow: 800px; --radius: 16px; --radius-sm: 8px; --transition: 0.3s ease; } /* --- Reset --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; } body { font-family: var(--font-body); color: var(--dark-text); line-height: 1.6; overflow-x: hidden; background: var(--white); } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } /* --- Scrollbar --- */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--black); } ::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 4px; } /* --- Noise Overlay --- */ .noise-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 9999; opacity: 0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* --- Animations --- */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes heroGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Alleen verbergen als JavaScript draait (de .js-klasse wordt in de gezet). Zonder die voorwaarde blijft de hele pagina onzichtbaar als het script faalt. */ .js [data-animate] { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .js [data-animate].in-view { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .js [data-animate] { transition: none; } } /* Bij afdrukken alles tonen: anders print je de witte, nog niet onthulde delen. */ @media print { .js [data-animate] { opacity: 1 !important; transform: none !important; } } /* --- Layout --- */ .container { max-width: var(--container); margin: 0 auto; padding: 0 40px; } .container--narrow { max-width: var(--container-narrow); } /* --- Sections --- */ .section { padding: 88px 0; position: relative; } /* Op de naad tussen een vaste sectie en de eerste rij uit de paginabouwer telden beide hun eigen ruimte op. De sectie levert de ruimte al. */ section + .layout-section { margin-top: 0 !important; } .layout-section:last-of-type { margin-bottom: 0 !important; } .section--compact { padding: 60px 0; } /* De kaartsectie houdt haar ruimte bovenaan -- die scheidt de kaart van de venue-tekst erboven -- maar levert er onderaan niets bij: de sectie eronder brengt haar eigen ruimte al mee. */ .section--map { padding: 60px 0 0; } .section--light { background: var(--white); } .section--gray { background: var(--off-white); } .section--dark { background: var(--black); } .section-header { text-align: center; margin-bottom: 64px; } .section-label { font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: var(--primary); margin-bottom: 12px; } .welcome-heading { font-family: var(--font-display); font-size: clamp(28px, 3.5vw, 42px); font-weight: 800; line-height: 1.15; letter-spacing: normal; text-transform: none; color: var(--navy); margin-bottom: 20px; } .welcome-heading--light { color: var(--white); } /* Secondary line under a .welcome-heading (e.g. venue name, fees title) */ .section-subheading { font-family: var(--font-display); font-size: clamp(19px, 2vw, 24px); font-weight: 700; line-height: 1.25; color: var(--navy); margin: -8px 0 18px; } .section-title { font-family: var(--font-display); font-weight: 800; line-height: 1.15; } .section-title.dark { color: var(--black); font-size: clamp(32px, 4vw, 52px); margin-bottom: 24px; } .section-title.light { color: var(--white); font-size: clamp(32px, 4vw, 48px); } .section-cta { text-align: center; margin-top: 48px; } .gold { color: var(--primary); } .gold-shimmer { background: linear-gradient(90deg, var(--primary), var(--primary-light), var(--primary)); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shimmer 3s linear infinite; } /* --- Buttons --- */ .btn-gold { display: inline-block; background: var(--primary); color: var(--white); border: none; font-family: var(--font-body); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 2px; padding: 14px 40px; border-radius: 30px; cursor: pointer; transition: all var(--transition); position: relative; overflow: hidden; } .btn-gold:hover { transform: translateY(-2px); background: var(--primary-dark); box-shadow: 0 8px 30px rgba(26, 107, 138, 0.35); } .btn-gold.btn-large { padding: 16px 48px; font-size: 14px; } .btn-gold.btn-small { padding: 10px 28px; font-size: 12px; } .btn-outline { display: inline-block; background: transparent; color: var(--black); border: 2px solid var(--primary); font-family: var(--font-body); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 2px; padding: 14px 40px; border-radius: 30px; cursor: pointer; transition: all var(--transition); } .btn-outline:hover { background: var(--primary); color: var(--white); transform: translateY(-2px); } .btn-outline.btn-large { padding: 16px 48px; font-size: 14px; } /* Outline button on dark backgrounds */ .section--dark .btn-outline { color: var(--white); border-color: var(--primary); } .section--dark .btn-outline:hover { background: var(--primary); color: var(--white); } /* --- Navigation --- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 24px 40px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(0, 0, 0, 0.06); transition: all 0.4s ease; } .nav.scrolled { padding: 16px 40px; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04); } .nav__inner { max-width: var(--container); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; } .nav__brand { display: flex; align-items: center; gap: 10px; } .nav__logo { height: 70px; width: auto; } .nav.scrolled .nav__logo { height: 48px; } .nav__title { font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--black); letter-spacing: 1px; } .nav__links { display: flex; gap: 32px; align-items: center; } .nav-link { position: relative; color: var(--black); font-size: 14px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; transition: color var(--transition); } .nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--primary); transition: width var(--transition); } .nav-link:hover { color: var(--primary); } .nav-link:hover::after { width: 100%; } .nav-link--active { color: var(--primary); } .nav-link--active::after { width: 100%; } .nav__actions { display: flex; align-items: center; gap: 20px; } /* Skip-link: enkel zichtbaar zodra hij focus krijgt via het toetsenbord. */ .skip-link { position: absolute; left: 8px; top: -60px; z-index: 2000; background: var(--white); color: var(--primary-dark); padding: 10px 16px; border-radius: var(--radius-sm); box-shadow: 0 4px 16px rgba(0,0,0,.15); font-size: 14px; font-weight: 600; transition: top .2s ease; } .skip-link:focus { top: 8px; outline: 2px solid var(--primary); } /* Hamburger */ .nav__hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; } .nav__hamburger span { width: 24px; height: 2px; background: var(--black); transition: all var(--transition); } .nav__hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .nav__hamburger.active span:nth-child(2) { opacity: 0; } .nav__hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* Mobile extras - hidden on desktop */ .nav__mobile-extras { display: none; } /* ========== HERO ========== */ .hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; position: relative; overflow: hidden; padding: 120px 20px 80px; } .hero-bg { background: linear-gradient(135deg, var(--primary-dark) 0%, var(--charcoal) 30%, var(--primary) 60%, var(--primary-dark) 100%); background-size: 400% 400%; animation: heroGradient 12s ease infinite; } .hero-image { background-size: cover; background-position: center; background-repeat: no-repeat; } .hero-image::before { content: ''; position: absolute; inset: 0; /* --hero-overlay komt uit het Panel (Hero -> Overlay over de foto) */ background: rgba(var(--overlay-rgb), var(--hero-overlay, 0.62)); z-index: 1; } /* Foto + bewegend kleurverloop: hetzelfde verloop als .hero-bg, maar als laag over de foto met een instelbare alfawaarde (--hero-gradient-alpha uit het Panel). */ .hero-image-gradient::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--primary-dark) 0%, var(--charcoal) 30%, var(--primary) 60%, var(--primary-dark) 100%); background-size: 400% 400%; animation: heroGradient 12s ease infinite; opacity: var(--hero-gradient-alpha, 0.6); z-index: 1; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .hero-image-gradient::after { animation: none; } } .hero-image .hero__content { z-index: 2; } .hero-image .hero__title { color: var(--white); } .hero-image .hero__date { color: var(--primary-light); } .hero-image .hero__subtitle { color: rgba(255, 255, 255, 0.7); } .hero-image .countdown__label { color: rgba(255, 255, 255, 0.6); } .hero-image .countdown__number { color: var(--white); } .hero-image .btn-outline { color: var(--white); border-color: rgba(255, 255, 255, 0.4); } .hero-image .btn-outline:hover { background: rgba(255, 255, 255, 0.15); color: var(--white); border-color: rgba(255, 255, 255, 0.6); } /* Hero video background */ .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } /* Dark overlay on video for readability */ .hero-video::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.52); z-index: 1; } .hero-video .hero__content { z-index: 2; } .hero-video .hero__decorative { z-index: 0; } /* White text on video */ .hero-video .hero__date { color: var(--accent-light); } .hero-video .hero__title { color: var(--white); } .hero-video .hero__subtitle { color: rgba(255,255,255,0.75); } .hero-video .hero__event-date, .hero-video .hero__event-location { color: var(--white); } .hero-video .hero__event-divider { background: rgba(255,255,255,0.4); } /* Outline button on video: white text, white border */ .hero-video .btn-outline { color: var(--white); border-color: rgba(255,255,255,0.6); } .hero-video .btn-outline:hover { background: rgba(255,255,255,0.15); color: var(--white); border-color: rgba(255,255,255,0.9); } .hero__decorative { position: absolute; inset: 0; pointer-events: none; } .hero__orb { position: absolute; border-radius: 50%; animation: float 6s ease-in-out infinite; } .hero__orb--1 { top: 10%; left: 5%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(26,107,138,0.03) 0%, transparent 70%); } .hero__orb--2 { bottom: 15%; right: 8%; width: 200px; height: 200px; background: radial-gradient(circle, rgba(26,107,138,0.05) 0%, transparent 70%); animation-delay: 2s; } .hero__content { position: relative; z-index: 2; max-width: 900px; animation: fadeInUp 1s ease forwards; } .hero__date { font-size: 17px; font-weight: 600; letter-spacing: 1px; color: var(--accent-light); margin-bottom: 24px; } .hero__title { font-family: var(--font-display); /* --hero-title-scale komt uit het Panel (Hero -> Title size). De clamp blijft het responsieve werk doen; de factor schaalt het geheel mee. */ font-size: calc(clamp(48px, 8vw, 96px) * var(--hero-title-scale, 1)); font-weight: 900; color: var(--white); line-height: 1.05; margin-bottom: 24px; } .hero__subtitle { font-size: 21px; font-weight: 500; letter-spacing: 0.3px; color: rgba(255,255,255,0.75); margin-bottom: 48px; } /* Event Info (date + location) */ .hero__event-info { display: flex; justify-content: center; align-items: center; gap: 16px; margin-bottom: 56px; flex-wrap: wrap; } .hero__event-date, .hero__event-location { font-family: var(--font-display); font-size: clamp(17px, 2.8vw, 29px); font-weight: 700; color: var(--white); letter-spacing: 1px; } .hero__event-divider { width: 2px; height: 22px; background: var(--accent); opacity: 0.6; flex-shrink: 0; } @media (max-width: 600px) { .hero__event-info { flex-direction: column; gap: 4px; } .hero__event-divider { display: none; } } /* Light bg variant — event date/location dark on gradient */ .hero-bg .hero__event-date, .hero-bg .hero__event-location { color: var(--white); } /* Outline button on dark hero backgrounds */ .hero-bg .btn-outline, .hero-image .btn-outline { color: var(--white); border-color: rgba(255,255,255,0.6); } .hero-bg .btn-outline:hover, .hero-image .btn-outline:hover { background: rgba(255,255,255,0.15); color: var(--white); border-color: rgba(255,255,255,0.9); } .hero__ctas { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; } .hero__scroll { position: absolute; bottom: 40px; animation: float 2s ease-in-out infinite; opacity: 0.5; } /* ========== CONCEPT ========== */ .concept-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .concept-text { font-size: 17px; line-height: 1.8; color: var(--body-text); margin-bottom: 32px; } .concept-grid__image { border-radius: var(--radius); overflow: hidden; } .concept-grid__image img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; } .concept-grid--reverse { direction: rtl; } .concept-grid--reverse > * { direction: ltr; } /* Animated Image Gallery */ .image-gallery { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; } .image-gallery__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity 1s ease, transform 1.2s ease; } .image-gallery__slide.active { opacity: 1; transform: scale(1); } .image-gallery__slide:first-child { opacity: 1; transform: scale(1); } /* Video in concept grid */ .concept-grid__video { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); display: block; } /* ========== FEATURES ========== */ .features { overflow: hidden; } .features__bg-pattern { position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 50%, rgba(26,107,138,0.02) 0%, transparent 50%), radial-gradient(circle at 80% 50%, rgba(26,107,138,0.015) 0%, transparent 50%); } .features__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; position: relative; z-index: 1; } /* Tussen tablet en klein desktop paste de vierde kaart net niet meer naast de andere drie en bleef ze alleen op een tweede rij staan. Twee kolommen geeft daar een net 2x2-blok. */ @media (min-width: 769px) and (max-width: 1120px) { .features__grid { grid-template-columns: repeat(2, 1fr); } } .feature-card { background: var(--white); border: 1px solid rgba(0,0,0,0.06); border-radius: var(--radius); padding: 40px 28px; text-align: center; transition: all 0.4s ease; box-shadow: 0 2px 12px rgba(0,0,0,0.04); } .feature-card:hover { border-color: var(--primary); transform: translateY(-8px); box-shadow: 0 20px 60px rgba(0,0,0,0.08); } .feature-card__icon { margin-bottom: 20px; } .feature-card__icon svg { stroke: var(--primary); fill: none; } .feature-card__title { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--black); margin-bottom: 14px; } .feature-card__desc { font-size: 15px; line-height: 1.7; color: var(--body-text); } /* ========== MAIN PARTNER ========== */ .main-partner__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .main-partner__text { font-size: 16px; line-height: 1.8; color: var(--body-text); margin-bottom: 32px; } .main-partner__logo-box { background: var(--white); border: 1px solid rgba(0,0,0,0.08); border-radius: var(--radius); padding: 60px; display: flex; align-items: center; justify-content: center; min-height: 250px; box-shadow: 0 2px 12px rgba(0,0,0,0.04); } .main-partner__logo-box img { max-height: 180px; max-width: 90%; width: auto; } .partner-logo-placeholder { font-family: var(--font-display); font-size: 36px; font-weight: 800; color: var(--primary); opacity: 0.5; text-align: center; } /* ========== PARTNERS ========== */ .tier-tabs { display: flex; justify-content: center; gap: 12px; margin-bottom: 48px; flex-wrap: wrap; } .tier-btn { padding: 10px 24px; border: 1px solid rgba(255,255,255,0.1); border-radius: 30px; font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: all var(--transition); background: rgba(255,255,255,0.05); color: var(--light-text); } .tier-btn:hover { border-color: var(--primary); color: var(--primary); } .tier-btn.active { background: var(--primary); color: var(--white); border-color: var(--primary); } .partners__grid { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; } .partner-card { background: var(--white); border: 1px solid rgba(0,0,0,0.06); border-radius: 12px; padding: 24px; display: flex; align-items: center; justify-content: center; width: 260px; height: 160px; transition: all var(--transition); box-shadow: 0 2px 12px rgba(0,0,0,0.04); } .partner-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.1); transform: translateY(-4px); border-color: var(--primary); } .partner-card img { max-height: 110px; max-width: 210px; width: auto; object-fit: contain; } .partner-card__name { font-size: 14px; font-weight: 600; color: var(--white); opacity: 0.6; } /* Partner cards on light backgrounds */ .partners__grid--light { justify-content: center; } .partner-card--light { background: var(--white); border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 2px 12px rgba(0,0,0,0.04); } .partner-card--light:hover { background: var(--white); border-color: var(--primary); box-shadow: 0 8px 30px rgba(26,107,138,0.1); } .partner-card__name--dark { color: var(--black); opacity: 0.7; } /* ========== CHARITY ========== */ .charity__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .charity__text { font-size: 17px; line-height: 1.8; color: var(--body-text); margin-bottom: 24px; } .charity__hashtag { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--primary); font-style: italic; margin-bottom: 32px; } /* ========== GALLERY PREVIEW ========== */ .gallery-preview__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .gallery-item { border-radius: 12px; overflow: hidden; position: relative; cursor: pointer; transition: transform 0.4s ease; aspect-ratio: 4/3; } .gallery-item:hover { transform: scale(1.03); } .gallery-item img { width: 100%; height: 100%; object-fit: cover; } .gallery-item__overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; background: linear-gradient(transparent, rgba(0,0,0,0.85)); color: white; font-family: var(--font-display); font-size: 16px; font-weight: 600; } .gallery-item__overlay small { display: block; font-family: var(--font-body); font-size: 12px; opacity: 0.7; margin-top: 4px; } .gallery-item__placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--charcoal), var(--dark-gray)); } /* ========== DUAL CTA ========== */ .dual-cta { background: var(--white); padding: 100px 0; } .dual-cta__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } .dual-cta__card { background: var(--off-white); border: 1px solid rgba(0,0,0,0.06); border-radius: var(--radius); padding: 60px 48px; text-align: center; position: relative; overflow: hidden; } .dual-cta__card--alt { background: var(--off-white); } .dual-cta__title { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--black); margin-bottom: 32px; } /* ========== PAGE HERO (subpages) ========== */ .page-hero { background: linear-gradient(135deg, var(--primary-dark) 0%, var(--charcoal) 30%, var(--primary) 60%, var(--primary-dark) 100%); background-size: 400% 400%; animation: heroGradient 12s ease infinite; padding: 180px 40px 100px; text-align: center; position: relative; overflow: hidden; } .page-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.15; } .page-hero__content { position: relative; z-index: 2; } .page-hero__title { font-family: var(--font-display); font-size: clamp(36px, 5vw, 64px); font-weight: 900; color: var(--white); } .page-hero__subtitle { font-size: 18px; color: rgba(255,255,255,0.75); margin-top: 16px; } /* ========== PRICING ========== */ .pricing__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; max-width: 900px; margin: 0 auto; } .pricing-card { background: var(--white); border: 1px solid rgba(0,0,0,0.06); border-radius: var(--radius); padding: 48px 36px; text-align: center; transition: all 0.4s ease; box-shadow: 0 2px 12px rgba(0,0,0,0.04); } .pricing-card--highlighted { border-color: var(--primary); box-shadow: 0 8px 30px rgba(26,107,138,0.1); transform: scale(1.03); } .pricing-card__name { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--black); margin-bottom: 12px; } .pricing-card__subtitle { font-size: 14px; color: var(--body-text); letter-spacing: 1px; margin-bottom: 24px; padding-top: 12px; border-top: 1px solid rgba(0,0,0,0.08); display: inline-block; } .pricing-card__price { font-family: var(--font-display); font-size: 48px; font-weight: 800; color: var(--primary); margin-bottom: 8px; } .pricing-card__note { font-size: 14px; color: var(--body-text); margin-bottom: 32px; } .pricing-card__features { margin-bottom: 32px; } .pricing-card__feature { font-size: 15px; color: var(--body-text); padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,0.06); } /* ========== SCHEDULE ========== */ .schedule { margin-top: 32px; } .schedule__item { display: flex; gap: 24px; padding: 20px 0; border-bottom: 1px solid rgba(0,0,0,0.08); } .schedule__time { font-family: var(--font-display); font-weight: 700; color: var(--primary); min-width: 100px; } .schedule__activity { font-size: 16px; color: var(--body-text); } /* ========== TEAM ========== */ .team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; } .team-card { text-align: center; } .team-card__photo { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; margin: 0 auto 20px; border: 3px solid rgba(26,107,138,0.2); } .team-card__photo-placeholder { width: 160px; height: 160px; border-radius: 50%; background: rgba(26,107,138,0.08); margin: 0 auto 20px; } .team-card__name { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--white); margin-bottom: 4px; } .team-card__role { font-size: 14px; color: var(--light-text); margin-bottom: 8px; } .team-card__link { font-size: 13px; color: var(--primary); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; } /* ========== ALBUM ========== */ .back-link { display: inline-block; color: var(--primary); font-weight: 600; font-size: 14px; margin-bottom: 32px; transition: opacity var(--transition); } .back-link:hover { opacity: 0.7; } .album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .album-grid__item { border-radius: var(--radius-sm); overflow: hidden; } .album-grid__item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform 0.4s; } .album-grid__item:hover img { transform: scale(1.05); } .album-grid__caption { padding: 8px 0; font-size: 13px; color: var(--body-text); } /* ========== PROSE ========== */ .prose { font-size: 17px; line-height: 1.8; color: var(--body-text); } .prose h2, .prose h3 { font-family: var(--font-display); color: var(--black); margin: 40px 0 16px; } /* Een kop bovenaan een tekstblok heeft geen eigen ruimte erboven nodig: de sectie eromheen levert die al. Zonder deze regel telde de 40px marge van de kop op bij de sectieruimte, wat vooral onder de kaart opviel. */ .prose > :first-child { margin-top: 0; } .prose h2 { font-size: 32px; } .prose h3 { font-size: 24px; } .prose p { margin-bottom: 16px; } .prose ul, .prose ol { margin-bottom: 16px; padding-left: 24px; } .prose ul { list-style: disc; } .prose ol { list-style: decimal; } .prose li { margin-bottom: 4px; font-size: 17px; line-height: 1.6; color: var(--body-text); } .prose li p { margin: 0; } /* Links in lopende tekst zichtbaar maken. De globale reset zet a { color: inherit; text-decoration: none }, waardoor een link in een tekstblok niet van gewone tekst te onderscheiden was. */ .prose a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } .prose a:hover { color: var(--primary-dark); text-decoration-thickness: 2px; } .prose .text-center, .prose [style*="text-align: center"] { text-align: center; } .prose img { border-radius: var(--radius); margin: 32px 0; } .intro-text { font-size: 20px; line-height: 1.7; color: var(--body-text); margin-bottom: 40px; } /* ========== PLACEHOLDERS ========== */ .placeholder-image { aspect-ratio: 4/3; border-radius: var(--radius); background: linear-gradient(135deg, var(--charcoal), var(--dark-gray)); display: flex; align-items: center; justify-content: center; overflow: hidden; } .placeholder-image--green { background: linear-gradient(135deg, var(--dark-gray), var(--charcoal)); } .placeholder-image span { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--white); opacity: 0.7; } /* ========== FOOTER ========== */ .footer { background: var(--black); padding: 80px 0 40px; border-top: 1px solid rgba(26,107,138,0.15); } .footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 48px; margin-bottom: 60px; } .footer__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; } .footer__brand .nav__title { color: var(--white); } .footer__logo { height: 80px; width: auto; } /* Wit kader achter het footerlogo. Veel merklogo's hebben donkere onderdelen die op de donkere footer wegvallen; op wit blijven ze leesbaar. */ .footer__logo-frame { display: inline-block; background: var(--white); padding: 18px 22px; border-radius: var(--radius); line-height: 0; } .footer__tagline { font-size: 14px; line-height: 1.7; color: var(--light-text); } .footer__organised { font-size: 13px; color: var(--light-text); opacity: 0.6; margin-bottom: 14px; } .footer__organised p { display: inline; margin: 0; } .footer__social { display: flex; gap: 14px; margin-top: 18px; } .footer__social a { color: var(--light-text); display: inline-flex; transition: color var(--transition); } .footer__social a svg { width: 20px; height: 20px; display: block; } .footer__social a:hover { color: var(--accent); } .footer__heading { font-size: 12px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--primary); margin-bottom: 20px; } .footer__nav li { margin-bottom: 10px; } .footer__nav a { font-size: 14px; color: var(--light-text); transition: color var(--transition); } .footer__nav a:hover { color: var(--primary); } .footer__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; } .footer__bottom p { font-size: 13px; color: var(--light-text); opacity: 0.6; } .footer__legal { display: flex; gap: 24px; } .footer__legal a { font-size: 13px; color: var(--light-text); opacity: 0.6; transition: opacity var(--transition); } .footer__legal a:hover { opacity: 1; } /* ========== RESPONSIVE ========== */ @media (max-width: 1250px) { .concept-grid, .main-partner__grid, .charity__grid { grid-template-columns: 1fr; gap: 48px; } .footer__grid { grid-template-columns: 1fr 1fr; } .nav { padding: 14px 20px; } .nav.scrolled { padding: 10px 20px; } .nav__links { display: none; } /* .nav__actions moet zichtbaar blijven: de hamburger zit erin. Enkel de inschrijfknop erbinnen verbergen -- die staat al in .nav__mobile-extras onderaan het uitklapmenu. */ .nav__actions { display: flex; align-items: center; gap: 8px; } .nav__actions > .btn-gold { display: none; } .nav__hamburger { display: flex; z-index: 1001; } .nav__links.open { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; /* Volledig dekkend: met een doorschijnend menu schemert de hero erdoorheen en worden de items slecht leesbaar. */ background: var(--white); backdrop-filter: none; padding: 24px 24px 32px; gap: 4px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06); } .nav__links.open .nav-link { font-size: 15px; padding: 10px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.04); color: var(--black); } /* Show mobile extras (register) inside open menu */ .nav__links.open .nav__mobile-extras { display: flex; align-items: center; justify-content: flex-end; padding-top: 28px; margin-top: 20px; gap: 20px; border-top: 1px solid rgba(0, 0, 0, 0.08); } } @media (max-width: 768px) { .section { padding: 80px 0; } .container { padding: 0 24px; } .hero { padding: 120px 20px 60px; } .hero__title { font-size: calc(clamp(36px, 12vw, 64px) * var(--hero-title-scale, 1)); } .hero__event-info { gap: 10px; } .hero__ctas { flex-direction: column; align-items: center; } .dual-cta__grid { grid-template-columns: 1fr; } .gallery-preview__grid { grid-template-columns: repeat(2, 1fr); } .features__grid { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr; gap: 32px; } .footer__bottom { flex-direction: column; text-align: center; } .page-hero { padding: 140px 24px 80px; } } @media (max-width: 480px) { .gallery-preview__grid { grid-template-columns: 1fr; } } /* ========== PROGRAMME (multi-room grid) ========== */ .programme-day { margin-bottom: 64px; } .programme-day__header { background: var(--navy); color: var(--white); padding: 20px 32px; border-radius: var(--radius) var(--radius) 0 0; font-family: var(--font-display); font-size: 26px; font-weight: 700; } .programme-day__header span { color: var(--accent); } .programme-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid rgba(0,0,0,0.08); border-top: none; border-radius: 0 0 var(--radius) var(--radius); overflow: hidden; } .programme-grid--single { grid-template-columns: 1fr; } .programme-grid--two { grid-template-columns: 1fr 1fr; } .programme-grid--four { grid-template-columns: repeat(4, 1fr); } .programme-col__header { padding: 14px 20px; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px; border-bottom: 1px solid rgba(0,0,0,0.08); } .programme-col__header--plenary { background: #E8EEF2; color: var(--navy); } .programme-col__header--parallel1 { background: #FFE8F0; color: #7A1040; } .programme-col__header--parallel2 { background: #E0F5FF; color: #0A4F7A; } .programme-col__header--parallel3 { background: #F0FFEE; color: #1A5C1A; } .programme-fullrow { grid-column: 1 / -1; padding: 14px 20px; background: var(--cream); border-bottom: 1px solid rgba(0,0,0,0.06); font-size: 15px; color: var(--body-text); } /* Alleen het uur vooraan in de full row, niet elke vetgedrukte tekst erbinnen: anders overschrijft dit ook het vet in de titels en talks eronder, die hun kleur uit het Panel moeten kunnen erven. */ .programme-fullrow > strong { color: var(--navy); font-weight: 700; } /* Talks onder een full-row-blok. Iets meer ruimte erboven dan in een sessiecel; de lijn zelf staat op .programme-cell__talks hieronder. */ .programme-cell__talks.programme-fullrow__talks { margin: 12px 0 2px 4px; } .programme-fullrow__talks .programme-talk { padding: 7px 0; } .programme-cell { padding: 16px 20px; border-bottom: 1px solid rgba(0,0,0,0.05); border-right: 1px solid rgba(0,0,0,0.05); font-size: 14px; line-height: 1.55; color: var(--body-text); vertical-align: top; } .programme-cell:last-child { border-right: none; } .programme-cell__time { font-weight: 700; color: var(--primary); font-size: 13px; margin-bottom: 4px; } .programme-cell__session { font-weight: 700; color: var(--navy); margin-bottom: 2px; font-size: 14px; } .programme-cell__topic { font-style: italic; color: var(--body-text); margin-bottom: 4px; font-size: 13px; } .programme-cell__moderator { font-size: 12px; color: var(--light-gray); margin-bottom: 8px; } /* Elke talklijst krijgt dezelfde verticale lijn in de merkkleur, of ze nu onder een sessie of onder een full row hangt. Stond eerder alleen op de full-row-variant, waardoor de lijn er soms wel en soms niet was. */ .programme-cell__talks { list-style: none; margin: 8px 0 2px 2px; padding: 0 0 0 18px; border-left: 2px solid var(--primary); } .programme-cell__talks li { font-size: 13px; color: var(--body-text); padding: 3px 0; border-bottom: 1px solid rgba(0,0,0,0.04); display: flex; gap: 6px; } .programme-cell__talks li:last-child { border-bottom: none; } .programme-cell__talks .talk-time { color: var(--primary); font-weight: 600; flex-shrink: 0; } .programme-cell__talks .talk-speaker { color: var(--medium-gray); font-style: italic; } .programme-cell--plenary { background: #FAFCFD; } .programme-cell--parallel1 { background: #FFFAFC; } .programme-cell--parallel2 { background: #F9FDFF; } .programme-cell--parallel3 { background: #FAFFFA; } .programme-cell--empty { background: var(--cream); } /* Programme day tabs */ .programme-tabs { display: flex; gap: 8px; margin-bottom: 32px; flex-wrap: wrap; } .programme-tab-btn { padding: 10px 24px; border: 2px solid var(--silver); border-radius: 30px; background: var(--white); font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--medium-gray); cursor: pointer; transition: all var(--transition); } .programme-tab-btn:hover { border-color: var(--primary); color: var(--primary); } .programme-tab-btn.active { background: var(--navy); color: var(--white); border-color: var(--navy); } .programme-day-panel { display: none; } .programme-day-panel.active { display: block; } /* Download programme CTA */ .programme-download { background: var(--off-white); border: 1px solid rgba(26,107,138,0.15); border-radius: var(--radius); padding: 32px; text-align: center; margin-top: 48px; } .programme-download p { font-size: 16px; color: var(--body-text); margin-bottom: 20px; } /* ========== PARTNER TIERS (page) ========== */ .partner-tier { margin-bottom: 64px; } .partner-tier__title { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--navy); margin-bottom: 32px; padding-bottom: 16px; border-bottom: 2px solid var(--off-white); display: flex; align-items: center; gap: 12px; } .partner-tier__badge { display: inline-block; padding: 4px 14px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; } .partner-tier__badge--platinum { background: #E8EFF5; color: #2A4F6E; } .partner-tier__badge--gold { background: #FDF5E0; color: #7A5500; } .partner-tier__badge--silver { background: #F2F2F2; color: #555; } .partner-tier__badge--bronze { background: #FDF0E8; color: #7A3800; } /* Equal-size cards via CSS grid: 1fr columns = equal width, fixed height = equal height. Major tier gets one column less (3 vs 4) and larger cards. */ .partner-tier__grid--major { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .partner-tier__grid--normal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .partner-tier__grid--major .partner-card--white { height: 190px; } .partner-tier__grid--normal .partner-card--white { height: 150px; } .partner-tier__grid--major .partner-card--white img { max-height: 110px; } .partner-card--white { background: var(--white); border: 1px solid rgba(0,0,0,0.08); border-radius: 12px; padding: 20px; display: flex; align-items: center; justify-content: center; transition: all var(--transition); box-shadow: 0 2px 8px rgba(0,0,0,0.04); } .partner-card--white:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(26,107,138,0.12); border-color: var(--primary-light); } .partner-card--white img { max-height: 80px; max-width: 90%; object-fit: contain; } /* ========== PREVIOUS EDITIONS ========== */ .editions-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 28px; } .edition-card { background: var(--white); border: 1px solid rgba(0,0,0,0.07); border-radius: var(--radius); overflow: hidden; transition: all 0.4s ease; box-shadow: 0 2px 12px rgba(0,0,0,0.04); } .edition-card:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(26,107,138,0.12); border-color: var(--primary-light); } .edition-card__image { aspect-ratio: 16/9; overflow: hidden; background: linear-gradient(135deg, var(--navy), var(--primary)); display: flex; align-items: center; justify-content: center; } .edition-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .edition-card:hover .edition-card__image img { transform: scale(1.06); } .edition-card__year { font-family: var(--font-display); font-size: 48px; font-weight: 900; color: rgba(255,255,255,0.35); } .edition-card__body { padding: 24px 28px; } .edition-card__title { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--navy); margin-bottom: 8px; } .edition-card__meta { font-size: 13px; color: var(--light-gray); margin-bottom: 16px; display: flex; gap: 16px; flex-wrap: wrap; } .edition-card__meta span { display: flex; align-items: center; gap: 4px; } .edition-card__desc { font-size: 14px; color: var(--body-text); line-height: 1.6; margin-bottom: 20px; } .edition-card__link { font-size: 13px; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: 1px; transition: color var(--transition); } .edition-card__link:hover { color: var(--primary-dark); } /* Responsive programme */ @media (max-width: 900px) { .programme-grid { grid-template-columns: 1fr; } .programme-grid--two { grid-template-columns: 1fr; } .programme-col__header--parallel1, .programme-col__header--parallel2, .programme-col__header--parallel3 { margin-top: 8px; } .programme-fullrow { grid-column: 1; } } @media (max-width: 992px) { .partner-tier__grid--major { grid-template-columns: repeat(2, 1fr); } .partner-tier__grid--normal { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .partner-tier__grid--major, .partner-tier__grid--normal { grid-template-columns: repeat(2, 1fr); } .partner-tier__grid--major .partner-card--white, .partner-tier__grid--normal .partner-card--white { height: 120px; } .partner-tier__grid--major .partner-card--white img { max-height: 70px; } .editions-grid { grid-template-columns: 1fr; } } /* Optional dark title override (Panel toggle: heroTitleColor = dark) */ .hero__content--dark .hero__date { color: var(--primary); } .hero__content--dark .hero__title { color: var(--black); } .hero__content--dark .hero__subtitle { color: var(--medium-gray); } .hero__content--dark .hero__event-date, .hero__content--dark .hero__content--dark .hero__event-location { color: var(--black); } .hero__content--dark .btn-outline { color: var(--black); border-color: var(--primary); } .hero__content--dark .btn-outline:hover { background: var(--primary); color: var(--white); } /* Feature card as nav link */ a.feature-card--link { display: block; text-decoration: none; color: inherit; cursor: pointer; } a.feature-card--link .feature-card__title { color: var(--navy); transition: color var(--transition); } a.feature-card--link:hover .feature-card__title { color: var(--primary); } /* ========== WELCOME GRID ========== */ .welcome-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .welcome-grid__text { /* text column: normal flow */ } .welcome-grid__ctas { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-top: 40px; } /* Desktop: sticky media column */ .welcome-grid__media { position: sticky; top: 100px; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; background: linear-gradient(135deg, var(--navy), var(--primary)); } /* Hide if no images */ .welcome-grid__media:not(:has(img)) { display: none; } /* Single column when no image */ .welcome-grid:not(:has(.welcome-grid__media img)) { grid-template-columns: 1fr; max-width: var(--container-narrow); margin: 0 auto; } /* Desktop: slides fill the sticky container absolutely */ .welcome-grid__media img, .welcome-grid__media .image-gallery__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .welcome-grid__media .image-gallery__slide { opacity: 0; transform: scale(1.05); transition: opacity 1s ease, transform 1.2s ease; } .welcome-grid__media .image-gallery__slide.active, .welcome-grid__media .image-gallery__slide:first-child { opacity: 1; transform: scale(1); } /* Welcome section: needs overflow visible for sticky to work */ .section--welcome { overflow: visible; } /* Mobile: stack layout, image below text, full natural height */ @media (max-width: 1250px) { .welcome-grid { display: flex; flex-direction: column; gap: 40px; } .welcome-grid__text { order: 1; } .welcome-grid__media { order: 2; position: relative !important; aspect-ratio: unset !important; height: auto !important; overflow: hidden !important; border-radius: var(--radius) !important; width: 100%; } /* On mobile slides are relative so they push the container height */ .welcome-grid__media img, .welcome-grid__media .image-gallery__slide { position: relative !important; inset: unset !important; width: 100% !important; height: auto !important; aspect-ratio: unset !important; display: none; opacity: 1 !important; transform: none !important; } .welcome-grid__media .image-gallery__slide:first-child, .welcome-grid__media .image-gallery__slide.active { display: block !important; } } /* Prevent buttons breaking layout on mobile */ @media (max-width: 768px) { .programme-download { padding: 24px 20px; } .programme-download a.btn-gold, .programme-download a.btn-outline { display: block; width: 100%; box-sizing: border-box; text-align: center; text-transform: none; letter-spacing: 0.5px; font-size: 13px; word-break: break-all; white-space: normal; padding: 14px 20px; } } /* Programme day content */ .programme-day__content { padding: 24px 32px; border: 1px solid rgba(0,0,0,0.08); border-top: none; border-radius: 0 0 var(--radius) var(--radius); } .programme-day__content table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 16px 0; } .programme-day__content table td, .programme-day__content table th { padding: 10px 14px; border: 1px solid rgba(0,0,0,0.08); vertical-align: top; line-height: 1.5; } .programme-day__content table th { background: var(--off-white); font-weight: 700; color: var(--navy); } .programme-day__content table tr:hover td { background: var(--cream); } /* === samengevoegd uit layout-styles.css === */ /* Kirby layout grid — responsive */ @media (max-width: 768px) { .kirby-layout { grid-template-columns: 1fr !important; gap: 24px !important; } } /* Layout elements */ .layout-heading { font-family: var(--font-display); font-weight: 700; color: var(--navy); margin-bottom: 16px; line-height: 1.2; } h2.layout-heading { font-size: clamp(24px, 3vw, 36px); } h3.layout-heading { font-size: clamp(20px, 2.5vw, 28px); } h4.layout-heading { font-size: 20px; } .layout-quote { border-left: 4px solid var(--accent); padding: 16px 24px; margin: 0; background: var(--off-white); border-radius: 0 var(--radius) var(--radius) 0; } .layout-quote p { font-family: var(--font-display); font-size: 18px; font-style: italic; color: var(--navy); margin: 0 0 8px; } .layout-quote cite { font-size: 13px; color: var(--light-gray); } .layout-video iframe { width: 100%; height: 100%; border: none; } /* === samengevoegd uit layout-extra.css === */ /* Layout section text color modes */ .layout-section--light-text { color: var(--body-text); } .layout-section--light-text .layout-heading { color: var(--navy); } .layout-section--dark-text { color: rgba(255,255,255,0.85); } .layout-section--dark-text .layout-heading { color: var(--white); } .layout-section--dark-text .prose a { color: var(--accent-light); } .layout-section--dark-text .btn-outline { color: var(--white); border-color: rgba(255,255,255,0.6); } .layout-section--dark-text .btn-outline:hover { background: rgba(255,255,255,0.15); } /* Responsive kirby layout */ @media (max-width: 768px) { .kirby-layout { grid-template-columns: 1fr !important; gap: 24px !important; } } /* Layout elements */ .layout-heading { font-family: var(--font-display); font-weight: 700; margin-bottom: 16px; line-height: 1.2; } h2.layout-heading { font-size: clamp(24px, 3vw, 36px); } h3.layout-heading { font-size: clamp(20px, 2.5vw, 28px); } h4.layout-heading { font-size: 20px; } .layout-quote { border-left: 4px solid var(--accent); padding: 16px 24px; margin: 0; background: rgba(0,0,0,0.04); border-radius: 0 var(--radius) var(--radius) 0; } .layout-quote p { font-family: var(--font-display); font-size: 18px; font-style: italic; margin: 0 0 8px; } .layout-quote cite { font-size: 13px; opacity: 0.6; }