/* Over-ons pages: Comprehensive styling for desktop & mobile Scope: only pages with Updated: January 2026 */ /* =========================================== DESKTOP BASE STYLES =========================================== */ /* Page Header */ body.about-page .page-header { padding: calc(var(--header-height) + var(--space-2xl)) 0 var(--space-2xl); background: linear-gradient(180deg, var(--soft) 0%, var(--bg) 100%); text-align: center; } body.about-page .page-header__breadcrumb { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--space-md); } body.about-page .page-header__breadcrumb a { color: var(--text-secondary); text-decoration: none; transition: color var(--t-fast); } body.about-page .page-header__breadcrumb a:hover { color: var(--accent); } body.about-page .page-header__breadcrumb svg { width: 16px; height: 16px; opacity: 0.5; } body.about-page .page-header h1 { font-size: clamp(var(--text-2xl), 5vw, 3rem); font-weight: 800; line-height: var(--lh-tight); margin-bottom: var(--space-md); color: var(--heading); } body.about-page .page-header .lead { font-size: var(--text-lg); color: var(--text-secondary); max-width: 600px; margin: 0 auto; line-height: var(--lh-relaxed); } /* Section styling */ body.about-page .section { padding: var(--space-2xl) 0; } body.about-page .section--soft { background: var(--soft); } body.about-page .section__title { font-size: clamp(var(--text-xl), 4vw, var(--text-2xl)); font-weight: 700; margin-bottom: var(--space-sm); color: var(--heading); } body.about-page .section__subtitle { font-size: var(--text-base); color: var(--text-secondary); margin-bottom: var(--space-xl); } /* Grid layouts */ body.about-page .grid { display: grid; gap: var(--space-xl); } body.about-page .grid-2 { grid-template-columns: repeat(2, 1fr); } body.about-page .grid-3 { grid-template-columns: repeat(3, 1fr); } body.about-page .grid-4 { grid-template-columns: repeat(4, 1fr); } /* About Link Cards (index page) */ body.about-page .about-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-lg); } body.about-page .about-link { display: flex; align-items: flex-start; gap: var(--space-lg); padding: var(--space-xl); background: var(--card); border: 1px solid var(--stroke); border-radius: var(--radius-lg); transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out), background-color var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out); text-decoration: none; color: inherit; position: relative; overflow: hidden; } body.about-page .about-link::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--t-med) var(--ease-out); } body.about-page .about-link:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: var(--accent); } body.about-page .about-link:hover::before { transform: scaleX(1); } body.about-page .about-link__icon { flex-shrink: 0; width: 56px; height: 56px; background: var(--soft); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; transition: opacity var(--t-med), transform var(--t-med), color var(--t-med), background-color var(--t-med), border-color var(--t-med), box-shadow var(--t-med); } body.about-page .about-link:hover .about-link__icon { background: var(--accent); transform: scale(1.05); } body.about-page .about-link:hover .about-link__icon svg { fill: #fff; } body.about-page .about-link__content { flex: 1; min-width: 0; } body.about-page .about-link__content h3 { font-size: var(--text-lg); font-weight: 600; margin-bottom: var(--space-xs); color: var(--heading); } body.about-page .about-link__content p { color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--lh-relaxed); margin: 0; } body.about-page .about-link__arrow { margin-left: auto; opacity: 0; transform: translateX(-8px); transition: opacity var(--t-fast), transform var(--t-fast), color var(--t-fast), background-color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast); flex-shrink: 0; } body.about-page .about-link:hover .about-link__arrow { opacity: 1; transform: translateX(0); } /* Stats Grid */ body.about-page .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-xl); text-align: center; padding: var(--space-xl) 0; } body.about-page .stats-grid > div { padding: var(--space-lg); background: var(--card); border-radius: var(--radius-lg); border: 1px solid var(--stroke); transition: transform var(--t-med), box-shadow var(--t-med); } body.about-page .stats-grid > div:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); } body.about-page .stat-value { font-size: clamp(var(--text-2xl), 4vw, 2.5rem); font-weight: 800; color: var(--accent); line-height: 1; } body.about-page .stat-label { color: var(--text-secondary); margin-top: var(--space-xs); font-size: var(--text-sm); } /* USP Cards */ body.about-page .usp-card { background: var(--card); border: 1px solid var(--stroke); border-radius: var(--radius-lg); padding: var(--space-xl); text-align: center; transition: opacity var(--t-med), transform var(--t-med), color var(--t-med), background-color var(--t-med), border-color var(--t-med), box-shadow var(--t-med); } body.about-page .usp-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); } body.about-page .usp-card__icon { width: 64px; height: 64px; background: var(--soft); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-lg); } body.about-page .usp-card__icon svg { width: 28px; height: 28px; fill: var(--accent); } body.about-page .usp-card__title { font-size: var(--text-lg); font-weight: 600; margin-bottom: var(--space-sm); color: var(--heading); } body.about-page .usp-card__text { color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--lh-relaxed); } /* CTA Section */ body.about-page .cta-section { background: linear-gradient(135deg, var(--cta) 0%, var(--cta-hover) 100%); border-radius: var(--radius-xl); padding: var(--space-2xl); text-align: center; color: #fff; } body.about-page .cta-section h2 { font-size: var(--text-2xl); font-weight: 700; margin-bottom: var(--space-sm); color: #fff; } body.about-page .cta-section p { font-size: var(--text-lg); opacity: 0.9; margin-bottom: var(--space-lg); max-width: 500px; margin-left: auto; margin-right: auto; } /* Only style btn--primary inside dark cta-sections, not all btn--lg */ body.about-page .cta-section:not(.cta-section--light) .btn--primary.btn--lg { background: #fff; color: var(--cta); border: none; padding: var(--space-md) var(--space-xl); font-weight: 600; border-radius: var(--radius); transition: transform var(--t-fast), box-shadow var(--t-fast); } body.about-page .cta-section:not(.cta-section--light) .btn--primary.btn--lg:hover { transform: scale(1.05); box-shadow: 0 8px 24px rgba(0,0,0,0.2); } /* Process Timeline (werkwijze.html) */ body.about-page .process-timeline { position: relative; max-width: 900px; margin: 0 auto; padding: var(--space-2xl) 0; } body.about-page .process-timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--accent) 0%, var(--stroke) 100%); transform: translateX(-50%); border-radius: 2px; } body.about-page .process-step { display: flex; align-items: flex-start; gap: var(--space-xl); margin-bottom: var(--space-2xl); position: relative; } body.about-page .process-step:last-child { margin-bottom: 0; } body.about-page .process-step:nth-child(even) { flex-direction: row-reverse; } body.about-page .process-step__number { position: absolute; left: 50%; transform: translateX(-50%); width: 56px; height: 56px; background: var(--accent); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--text-xl); font-weight: 700; z-index: var(--z-base); box-shadow: 0 4px 12px rgba(0,0,0,0.15); } body.about-page .process-step__content { width: calc(50% - var(--space-xl)); background: var(--card); border: 1px solid var(--stroke); border-radius: var(--radius-lg); padding: var(--space-xl); transition: opacity var(--t-med), transform var(--t-med), color var(--t-med), background-color var(--t-med), border-color var(--t-med), box-shadow var(--t-med); } body.about-page .process-step__content:hover { box-shadow: var(--shadow-card); border-color: var(--accent); } body.about-page .process-step__title { font-size: var(--text-xl); font-weight: 600; margin-bottom: var(--space-sm); display: flex; align-items: center; gap: var(--space-sm); color: var(--heading); } body.about-page .process-step__title svg { color: var(--accent); flex-shrink: 0; } body.about-page .process-step__text { color: var(--text-secondary); line-height: var(--lh-relaxed); font-size: var(--text-base); } body.about-page .process-step__duration { display: inline-flex; align-items: center; gap: var(--space-xs); margin-top: var(--space-md); padding: var(--space-xs) var(--space-sm); background: var(--soft); border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--text-secondary); } /* Certification Grid (kwaliteit.html) */ body.about-page .cert-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-xl); } body.about-page .cert-card { background: var(--card); border: 1px solid var(--stroke); border-radius: var(--radius-lg); padding: var(--space-xl); text-align: center; transition: opacity var(--t-med), transform var(--t-med), color var(--t-med), background-color var(--t-med), border-color var(--t-med), box-shadow var(--t-med); } body.about-page .cert-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); } body.about-page .cert-card__logo { width: 80px; height: 80px; margin: 0 auto var(--space-lg); display: flex; align-items: center; justify-content: center; background: var(--soft); border-radius: 50%; transition: background var(--t-med); } body.about-page .cert-card:hover .cert-card__logo { background: rgba(var(--accent), 0.1); } body.about-page .cert-card__title { font-size: var(--text-lg); font-weight: 600; margin-bottom: var(--space-sm); color: var(--heading); } body.about-page .cert-card__text { color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--lh-relaxed); } /* Quality Section (kwaliteit.html) */ body.about-page .quality-section { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: center; } body.about-page .quality-section--reverse { direction: rtl; } body.about-page .quality-section--reverse > * { direction: ltr; } body.about-page .quality-image { background: var(--soft); border-radius: var(--radius-lg); aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; overflow: hidden; } body.about-page .quality-image img { width: 100%; height: 100%; object-fit: cover; display: block; } body.about-page .quality-content h3 { font-size: var(--text-2xl); font-weight: 700; margin-bottom: var(--space-md); color: var(--heading); } body.about-page .quality-content p { color: var(--text-secondary); line-height: var(--lh-prose); margin-bottom: var(--space-md); } body.about-page .quality-list { list-style: none; padding: 0; margin: 0; } body.about-page .quality-list li { display: flex; align-items: flex-start; gap: var(--space-sm); padding: var(--space-sm) 0; color: var(--text-secondary); } body.about-page .quality-list svg { flex-shrink: 0; margin-top: 2px; color: var(--success); } /* Eco Stats (duurzaamheid.html) */ body.about-page .eco-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-xl); } body.about-page .eco-stat { text-align: center; padding: var(--space-xl); background: var(--card); border: 1px solid var(--stroke); border-radius: var(--radius-lg); transition: opacity var(--t-med), transform var(--t-med), color var(--t-med), background-color var(--t-med), border-color var(--t-med), box-shadow var(--t-med); } body.about-page .eco-stat:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); } body.about-page .eco-stat__value { font-size: var(--text-2xl); font-weight: 800; color: var(--success); line-height: 1; } body.about-page .eco-stat__label { color: var(--text-secondary); margin-top: var(--space-xs); font-size: var(--text-sm); } /* Sustainability Pillars (duurzaamheid.html) */ body.about-page .sustainability-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); } body.about-page .pillar { background: var(--card); border: 1px solid var(--stroke); border-radius: var(--radius-lg); padding: var(--space-xl); position: relative; overflow: hidden; transition: opacity var(--t-med), transform var(--t-med), color var(--t-med), background-color var(--t-med), border-color var(--t-med), box-shadow var(--t-med); } body.about-page .pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); } body.about-page .pillar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--success); } body.about-page .pillar__icon { width: 56px; height: 56px; background: rgba(34, 197, 94, 0.1); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-lg); } body.about-page .pillar__icon svg { width: 28px; height: 28px; color: var(--success); } body.about-page .pillar__title { font-size: var(--text-xl); font-weight: 600; margin-bottom: var(--space-sm); color: var(--heading); } body.about-page .pillar__text { color: var(--text-secondary); line-height: var(--lh-relaxed); font-size: var(--text-base); } /* Text utilities */ body.about-page .mobile-text-center { text-align: left; } body.about-page .text-center { text-align: center; } body.about-page .lead { font-size: var(--text-lg); color: var(--text-secondary); line-height: var(--lh-relaxed); } /* Image styling (avoid touching the header logo) */ body.about-page img:not(.header__logo-img) { max-width: 100%; height: auto; } /* =========================================== TABLET STYLES (max-width: 1024px) =========================================== */ @media (max-width: 1024px) { body.about-page .grid-2, body.about-page .grid-3 { grid-template-columns: 1fr; gap: var(--space-lg); } body.about-page .quality-section { grid-template-columns: 1fr; } body.about-page .quality-section--reverse { direction: ltr; } body.about-page .sustainability-pillars { grid-template-columns: 1fr; } body.about-page .stats-grid { grid-template-columns: repeat(2, 1fr); } } /* =========================================== MOBILE STYLES (max-width: 768px) =========================================== */ @media (max-width: 768px) { /* Container padding */ body.about-page .container { padding-left: var(--space-md); padding-right: var(--space-md); } /* Page header */ body.about-page .page-header { padding: calc(var(--header-height) + var(--space-lg)) 0 var(--space-lg); } body.about-page .page-header__breadcrumb { font-size: var(--text-xs); margin-bottom: var(--space-sm); gap: 6px; flex-wrap: wrap; justify-content: center; } body.about-page .page-header h1 { font-size: var(--text-2xl); margin-bottom: var(--space-sm); } body.about-page .page-header .lead { font-size: var(--text-base); line-height: var(--lh-relaxed); } /* Sections */ body.about-page .section { padding: var(--space-xl) 0; } body.about-page .section--sm { padding: var(--space-lg) 0; } body.about-page .section__title { font-size: var(--text-xl); } body.about-page .section__subtitle { font-size: var(--text-sm); margin-bottom: var(--space-lg); } /* Typography */ body.about-page h1 { font-size: var(--text-2xl); } body.about-page h2 { font-size: var(--text-xl); } body.about-page h3 { font-size: var(--text-lg); } body.about-page .lead { font-size: var(--text-base); line-height: var(--lh-relaxed); } body.about-page p { font-size: var(--text-sm); line-height: var(--lh-body); } /* Grid adjustments */ body.about-page .grid { gap: var(--space-md); } body.about-page .grid-2, body.about-page .grid-3, body.about-page .grid-4 { grid-template-columns: 1fr; } body.about-page .flex { gap: var(--space-sm); } /* Mobile text center */ body.about-page .mobile-text-center { text-align: center; } /* About link cards */ body.about-page .about-links { grid-template-columns: 1fr; gap: var(--space-md); } body.about-page .about-link { padding: var(--space-md); gap: var(--space-md); } body.about-page .about-link__icon { width: 44px; height: 44px; } body.about-page .about-link__content h3 { font-size: var(--text-base); } body.about-page .about-link__content p { font-size: var(--text-sm); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } body.about-page .about-link__arrow { display: none; } /* Stats grid */ body.about-page .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); padding: var(--space-md) 0; } body.about-page .stats-grid > div { padding: var(--space-md); } body.about-page .stat-value { font-size: var(--text-xl); } body.about-page .stat-label { font-size: var(--text-xs); } /* USP cards */ body.about-page .usp-card { padding: var(--space-lg); } body.about-page .usp-card__icon { width: 48px; height: 48px; margin-bottom: var(--space-md); } body.about-page .usp-card__icon svg { width: 24px; height: 24px; } body.about-page .usp-card__title { font-size: var(--text-base); } body.about-page .usp-card__text { font-size: var(--text-sm); } /* CTA blocks */ body.about-page .cta-section { padding: var(--space-xl) var(--space-md); border-radius: var(--radius-lg); } body.about-page .cta-section h2 { font-size: var(--text-xl); } body.about-page .cta-section p { font-size: var(--text-base); margin-bottom: var(--space-lg); } body.about-page .btn.btn--lg { font-size: var(--text-sm); padding: 12px 20px; min-height: 48px; width: 100%; } /* Override inline styles for large gaps */ body.about-page [style*="gap: var(--space-2xl)"] { gap: var(--space-lg) !important; } body.about-page [style*="padding: var(--space-2xl)"] { padding: var(--space-lg) !important; } /* Process Timeline (werkwijze) */ body.about-page .process-timeline { padding: var(--space-lg) 0; } body.about-page .process-timeline::before { left: 24px; } body.about-page .process-step, body.about-page .process-step:nth-child(even) { flex-direction: row; padding-left: 60px; gap: 0; } body.about-page .process-step__number { left: 24px; width: 44px; height: 44px; font-size: var(--text-base); } body.about-page .process-step__content { width: 100%; padding: var(--space-md); } body.about-page .process-step__title { font-size: var(--text-lg); } body.about-page .process-step__text { font-size: var(--text-sm); line-height: var(--lh-body); } /* Certification cards */ body.about-page .cert-grid { gap: var(--space-md); } body.about-page .cert-card { padding: var(--space-lg); } body.about-page .cert-card__logo { width: 64px; height: 64px; margin-bottom: var(--space-md); } body.about-page .cert-card__title { font-size: var(--text-base); } /* Quality section */ body.about-page .quality-section { gap: var(--space-lg); } body.about-page .quality-content h3 { font-size: var(--text-xl); margin-bottom: var(--space-sm); } body.about-page .quality-list li { padding: 8px 0; font-size: var(--text-sm); } /* Eco stats (duurzaamheid) */ body.about-page .eco-stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } body.about-page .eco-stat { padding: var(--space-lg); } body.about-page .eco-stat__value { font-size: var(--text-xl); } /* Sustainability pillars */ body.about-page .sustainability-pillars { gap: var(--space-md); } body.about-page .pillar { padding: var(--space-lg); } body.about-page .pillar__icon { width: 44px; height: 44px; margin-bottom: var(--space-md); } body.about-page .pillar__icon svg { width: 24px; height: 24px; } body.about-page .pillar__title { font-size: var(--text-lg); } body.about-page .pillar__text { font-size: var(--text-sm); } /* Button groups */ body.about-page [style*="display: flex"][style*="gap"] { flex-direction: column; gap: var(--space-sm) !important; } body.about-page .btn { width: 100%; justify-content: center; } /* Ensure proper spacing for mobile bottom nav */ body.about-page main { padding-bottom: calc(var(--mobile-bottom-nav-height, 70px) + var(--space-lg)); } } /* =========================================== SMALL MOBILE STYLES (max-width: 480px) =========================================== */ @media (max-width: 480px) { body.about-page .container { padding-left: var(--space-sm); padding-right: var(--space-sm); } body.about-page .page-header { padding: calc(var(--header-height) + var(--space-md)) 0 var(--space-md); } body.about-page .page-header h1 { font-size: var(--text-xl); } body.about-page .section { padding: var(--space-lg) 0; } /* Stats grid - single column for very small screens */ body.about-page .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: var(--space-sm) !important; } body.about-page .stats-grid > div { padding: var(--space-sm); } body.about-page .stat-value { font-size: var(--text-lg); } /* Eco stats */ body.about-page .eco-stats { grid-template-columns: 1fr; } /* About links full touch-friendly */ body.about-page .about-link { padding: var(--space-sm); gap: var(--space-sm); } body.about-page .about-link__icon { width: 40px; height: 40px; } /* Process steps */ body.about-page .process-step, body.about-page .process-step:nth-child(even) { padding-left: 50px; } body.about-page .process-step__number { left: 16px; width: 36px; height: 36px; font-size: var(--text-sm); } body.about-page .process-timeline::before { left: 16px; } body.about-page .process-step__content { padding: var(--space-sm); } body.about-page .process-step__title { font-size: var(--text-base); } /* Cards */ body.about-page .usp-card, body.about-page .cert-card, body.about-page .pillar { padding: var(--space-md); } /* CTA */ body.about-page .cta-section { padding: var(--space-lg) var(--space-sm); } } /* =========================================== DARK MODE SUPPORT =========================================== */ @media (prefers-color-scheme: dark) { body.about-page .about-link:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.3); } body.about-page .process-step__content:hover, body.about-page .cert-card:hover, body.about-page .usp-card:hover, body.about-page .pillar:hover, body.about-page .eco-stat:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.3); } } /* =========================================== PRINT STYLES =========================================== */ @media print { body.about-page .page-header { padding-top: var(--space-lg); background: none; } body.about-page .process-timeline::before { display: none; } body.about-page .process-step__number { position: static; transform: none; margin-right: var(--space-md); } body.about-page .about-link, body.about-page .usp-card, body.about-page .cert-card, body.about-page .pillar, body.about-page .eco-stat { break-inside: avoid; page-break-inside: avoid; } } /* =========================================== ACCESSIBILITY - REDUCED MOTION =========================================== */ @media (prefers-reduced-motion: reduce) { body.about-page .about-link, body.about-page .about-link::before, body.about-page .about-link__icon, body.about-page .about-link__arrow, body.about-page .usp-card, body.about-page .cert-card, body.about-page .pillar, body.about-page .eco-stat, body.about-page .process-step__content, body.about-page .stats-grid > div, body.about-page .cta-section .btn--primary.btn--lg { transition: none; transform: none !important; } } /* =========================================== FOCUS STATES FOR ACCESSIBILITY =========================================== */ body.about-page .about-link:focus-visible, body.about-page .btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }