/* Echte Momenten - Styling Systeem */ /* 1. Variabelen Bestand -------------------------------------------------- */ :root { /* Kleurenpalet */ --color-primary: #8D7B68; /* Warm, rich main tone (e.g., a desaturated brown/taupe) */ --color-secondary: #A4907C; /* Slightly lighter, complementary warm tone */ --color-accent: #C8B6A6; /* Subtle accent, perhaps for highlights or borders */ --color-background-light: #FDFDFD; /* Slightly warmer light background */ --color-background-medium: #EAEAEA; /* Slightly darker neutral for depth */ --color-text-dark: #3A3A3A; /* Dark, readable text */ --color-text-light: #FFFFFF; /* Light text for dark backgrounds */ --color-white: #FFFFFF; --color-black: #000000; /* Typografie */ --font-display: 'Playfair Display', serif; /* Elegant display font (needs Google Font import) */ --font-body: 'Lato', sans-serif; /* Clean, readable body font (needs Google Font import) */ --font-weight-light: 300; --font-weight-regular: 400; --font-weight-bold: 700; --font-weight-black: 900; /* For impactful headlines */ /* Spacing Systeem (voorbeeld, kan uitgebreid worden) */ --space-xs: 0.5rem; /* 8px */ --space-s: 1rem; /* 16px */ --space-m: 1.5rem; /* 24px */ --space-l: 2rem; /* 32px */ --space-xl: 3rem; /* 48px */ --space-xxl: 4rem; /* 64px */ /* Breakpoints (mobile-first) */ --bp-small: 600px; /* Tablets */ --bp-medium: 900px; /* Small laptops / Large tablets */ --bp-large: 1200px; /* Desktops */ --bp-xlarge: 1800px; /* Large Desktops */ /* Transities */ --transition-fast: all 0.2s ease-in-out; --transition-medium: all 0.4s ease-in-out; --transition-slow: all 0.6s ease-in-out; /* Borders */ --border-radius-small: 3px; --border-radius-medium: 6px; } /* Import Google Fonts (Plaats dit bovenaan of in de van HTML) */ /* @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Playfair+Display:wght@400;700&display=swap'); */ /* Verwijderd, nu in HTML */ /* 2. Reset/Normalize Styles -------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; /* Basis lettergrootte */ scroll-behavior: smooth; } body { font-family: var(--font-body); line-height: 1.6; background-color: var(--color-background-light); color: var(--color-text-dark); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; } a { color: var(--color-primary); text-decoration: none; transition: var(--transition-fast); } a:hover { color: var(--color-secondary); text-decoration: underline; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--font-weight-bold); line-height: 1.2; margin-bottom: var(--space-m); color: var(--color-primary); } h1 { font-size: 2.8rem; } h2 { font-size: 2.2rem; } h3 { font-size: 1.8rem; } /* ...en zo verder voor h4, h5, h6 */ p { margin-bottom: var(--space-s); } ul, ol { list-style-position: inside; margin-bottom: var(--space-s); padding-left: var(--space-s); /* Voor standaard list-style bullets */ } /* 3. Utility Classes (voorbeeld) -------------------------------------------------- */ .container { width: 90%; max-width: var(--bp-large); margin-left: auto; margin-right: auto; padding-left: var(--space-s); padding-right: var(--space-s); } .text-center { text-align: center; } .text-primary { color: var(--color-primary); } .bg-primary { background-color: var(--color-primary); color: var(--color-text-light); } .mb-s { margin-bottom: var(--space-s); } .mb-m { margin-bottom: var(--space-m); } .mt-s { margin-top: var(--space-s); } .mt-m { margin-top: var(--space-m); } /* Responsive Text (voorbeeld, kan verfijnd worden) */ .responsive-text-large { font-size: 2rem; } @media (min-width: --bp-medium) { .responsive-text-large { font-size: 3rem; } } /* Flexbox Utilities */ .d-flex { display: flex; } .flex-column { flex-direction: column; } .justify-content-center { justify-content: center; } .align-items-center { align-items: center; } /* ...meer flex utilities indien nodig */ /* Grid Utilities (als je een simpele grid wilt zonder CSS Grid framework) */ .row { display: flex; flex-wrap: wrap; margin-left: calc(var(--space-s) / -2); margin-right: calc(var(--space-s) / -2); } .col { flex-basis: 0; flex-grow: 1; max-width: 100%; padding-left: calc(var(--space-s) / 2); padding-right: calc(var(--space-s) / 2); } /* Algemene Stijlen */ body { font-family: var(--font-body); /* Gebruik de nieuwe variabele */ line-height: 1.6; margin: 0; padding: 0; background-color: var(--color-background-light); /* Gebruik de nieuwe variabele */ color: var(--color-text-dark); /* Gebruik de nieuwe variabele */ } header { background-color: var(--color-background-light); padding: var(--space-s) 0; border-bottom: 1px solid var(--color-background-medium); display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 5px rgba(0,0,0,0.05); } .logo-container { padding-left: var(--space-l); /* Add padding to the left of the logo */ } .logo { height: 50px; /* Adjust as needed */ width: auto; } header nav { padding-right: var(--space-l); /* Add padding to the right of the nav */ } header nav ul { padding: 0; list-style: none; } header nav ul li { display: inline-block; /* Beter voor spacing en alignment */ margin: 0 var(--space-s); /* Horizontale spacing */ } header nav a { color: var(--color-text-dark); /* Changed from --color-text-light */ text-decoration: none; font-size: 1.1rem; /* Kan ook een variabele worden */ font-weight: var(--font-weight-light); padding: var(--space-xs) var(--space-s); border-radius: var(--border-radius-small); transition: var(--transition-fast); } header nav a:hover, header nav a.active { /* Voor actieve pagina link */ background-color: var(--color-accent); /* Changed for better visibility */ color: var(--color-text-light); /* Ensure text is light on darker accent bg */ text-decoration: none; } main { padding-top: 120px; /* Voeg padding toe gelijk aan of groter dan header hoogte */ } /* Hero Section Styling -------------------------------------------------- */ .hero { min-height: 100vh; /* Fullscreen height */ display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: var(--space-xl) var(--space-s); /* background-image property is now inline in index.php for picsum */ background-size: cover; background-position: center center; background-attachment: fixed; /* Voor parallax effect */ color: var(--color-text-light); /* Tekstkleur aangepast voor donkere achtergrond */ position: relative; /* Voor scroll indicator positioning */ } .hero-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.4); z-index: 1; } .hero-content { max-width: 800px; /* Beperk breedte van content */ margin-bottom: var(--space-xl); /* Ruimte voor scroll indicator */ position: relative; /* Ensure content is above overlay */ z-index: 2; } .hero .fade-in { opacity: 0; /* Start onzichtbaar voor fade-in animatie */ animation: fadeInHero 1s ease-out forwards; } .hero h1.fade-in { animation-delay: 0.2s; } .hero p.fade-in { animation-delay: 0.5s; } .hero a.fade-in { animation-delay: 1s; } .hero .scroll-indicator.fade-in { animation-delay: 1.5s; } @keyframes fadeInHero { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .cta-button { font-family: var(--font-body); font-size: 1.1rem; font-weight: var(--font-weight-bold); color: var(--color-text-light); background-color: var(--color-primary); padding: var(--space-s) var(--space-l); border-radius: var(--border-radius-medium); text-decoration: none; text-transform: uppercase; letter-spacing: 1px; transition: var(--transition-medium), transform 0.2s ease-out; display: inline-block; box-shadow: 0 4px 15px rgba(0,0,0,0.2); } .cta-button:hover, .cta-button:focus { background-color: var(--color-secondary); color: var(--color-text-light); text-decoration: none; transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.25); } .cta-button.secondary { background-color: transparent; color: var(--color-primary); border: 2px solid var(--color-primary); } .cta-button.secondary:hover, .cta-button.secondary:focus { background-color: var(--color-primary); color: var(--color-text-light); border-color: var(--color-primary); } /* Scroll Indicator */ .scroll-indicator { position: absolute; bottom: var(--space-l); left: 50%; transform: translateX(-50%); z-index: 10; } .scroll-indicator a { display: inline-block; padding: var(--space-xs); } .scroll-indicator span { display: block; width: 2px; /* Dikte van de lijn */ height: 40px; /* Lengte van de lijn */ background-color: var(--color-white); /* Aangepast voor betere zichtbaarheid op foto */ position: relative; animation: scrollIndicatorAnimation 2s infinite ease-out; } @keyframes scrollIndicatorAnimation { 0% { opacity: 0; transform: translateY(-10px); } 50% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(10px); } } /* Fotoshoot Categorieën Sectie Styling -------------------------------------------------- */ .fotoshoot-categories-section { padding: var(--space-xxl) 0; background-color: var(--color-background-light); text-align: center; } .section-title { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 2.8rem); color: var(--color-primary); margin-bottom: var(--space-s); font-weight: var(--font-weight-bold); } .section-intro { font-family: var(--font-body); font-size: clamp(1rem, 2.5vw, 1.1rem); color: var(--color-text-dark); max-width: 700px; margin: 0 auto var(--space-xl) auto; line-height: 1.7; } .category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 50px; } .category-card { background-color: var(--color-white); border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); overflow: hidden; text-align: left; transition: transform 0.3s ease, box-shadow 0.3s ease; opacity: 0; /* For JS animation */ transform: translateY(20px); /* For JS animation */ } .category-card.is-visible { opacity: 1; transform: translateY(0); } .category-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12); } .category-image { width: 100%; height: 220px; object-fit: cover; transition: transform 0.4s ease; } .category-card:hover .category-image { transform: scale(1.05); } .category-content { padding: var(--space-m); } .category-title { font-family: var(--font-display); font-size: clamp(1.4rem, 4vw, 1.6rem); color: var(--color-primary); margin-bottom: var(--space-xs); } .category-description { font-family: var(--font-body); font-size: clamp(0.9rem, 2vw, 0.95rem); color: var(--color-text-dark); line-height: 1.6; margin-bottom: var(--space-m); min-height: 60px; /* Adjust as needed */ } .cta-link { font-family: var(--font-body); font-weight: bold; color: var(--color-accent); text-decoration: none; position: relative; padding-bottom: 3px; } .cta-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: var(--color-accent); transition: width 0.3s ease; } .cta-link:hover::after, .cta-link:focus::after { width: 100%; } @media (max-width: var(--bp-small)) { .fotoshoot-categories-section { padding: var(--space-xl) 0; } .category-grid { grid-template-columns: 1fr; /* Stack on mobile */ } .section-title { font-size: 2rem; } .section-intro { font-size: 1rem; } .category-description { min-height: auto; /* Adjust for stacked layout */ } } /* Testimonial Section Styling -------------------------------------------------- */ .testimonial-section { padding: var(--space-xxl) 0; background-color: var(--color-background-medium); /* Subtle contrast */ text-align: center; } .testimonial-carousel-wrapper { position: relative; max-width: 800px; margin: 0 auto; overflow: hidden; /* Hide non-active items if using a sliding mechanism */ } .testimonial-item { display: none; /* Hidden by default, JS will show active */ padding: var(--space-m); } .testimonial-item.active { display: block; animation: fadeInTestimonial 0.8s ease-in-out; } @keyframes fadeInTestimonial { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } .testimonial-quote { font-family: var(--font-body); font-size: clamp(1.1rem, 2.8vw, 1.3rem); font-style: italic; color: var(--color-text-dark); line-height: 1.8; margin-bottom: var(--space-m); position: relative; padding: 0 var(--space-l); } .testimonial-quote::before, .testimonial-quote::after { content: '\201C'; /* Left double quote */ font-family: var(--font-display); font-size: 4rem; color: var(--color-accent); position: absolute; opacity: 0.6; line-height: 1; } .testimonial-quote::before { top: -var(--space-s); left: 0; } .testimonial-quote::after { content: '\201D'; /* Right double quote */ bottom: -var(--space-m); right: 0; } .testimonial-cite { font-family: var(--font-display); font-size: 1.1rem; font-weight: var(--font-weight-bold); color: var(--color-primary); display: block; margin-top: var(--space-s); } .carousel-control { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0,0,0,0.1); color: var(--color-primary); border: none; padding: var(--space-s) var(--space-m); font-size: 1.5rem; cursor: pointer; border-radius: 50%; transition: var(--transition-fast); z-index: 10; } .carousel-control:hover { background-color: var(--color-primary); color: var(--color-white); } .carousel-control.prev { left: -var(--space-s); /* Adjust positioning */ } .carousel-control.next { right: -var(--space-s); /* Adjust positioning */ } /* Recent Work Section Styling -------------------------------------------------- */ .recent-work-section { padding: var(--space-xxl) 0; background-color: var(--color-background-light); } .recent-work-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-m); margin-top: var(--space-l); } .recent-work-item { position: relative; overflow: hidden; border-radius: var(--border-radius-medium); box-shadow: 0 5px 15px rgba(0,0,0,0.07); transition: var(--transition-medium); } .recent-work-item:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); } .recent-work-item img { width: 100%; height: auto; display: block; transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .recent-work-item:hover img { transform: scale(1.1); } .recent-work-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%); color: var(--color-white); padding: var(--space-l) var(--space-m) var(--space-m); transform: translateY(100%); transition: transform 0.4s ease-in-out; text-align: left; } .recent-work-item:hover .recent-work-overlay { transform: translateY(0); } .recent-work-overlay h3 { font-family: var(--font-display); font-size: 1.5rem; color: var(--color-white); margin: 0 0 var(--space-xs) 0; } .recent-work-overlay p { font-family: var(--font-body); font-size: 0.9rem; margin: 0; opacity: 0.8; } /* About Preview Section Styling -------------------------------------------------- */ .about-preview-section { padding: var(--space-xxl) 0; background-color: var(--color-background-medium); } .about-preview-flex { display: flex; align-items: center; gap: var(--space-xl); } .about-preview-image { flex: 1 1 40%; /* Adjust flex properties as needed */ max-width: 400px; } .about-preview-image img { width: 100%; height: auto; border-radius: var(--border-radius-medium); box-shadow: 0 10px 30px rgba(0,0,0,0.1); } .about-preview-content { flex: 1 1 60%; text-align: left; } .about-preview-content .section-title { text-align: left; margin-bottom: var(--space-m); } .about-preview-content .section-intro { text-align: left; margin-left: 0; margin-right: 0; max-width: none; } .about-preview-content p { margin-bottom: var(--space-m); } .about-preview-content .cta-button { margin-top: var(--space-s); } @media (max-width: var(--bp-medium)) { .about-preview-flex { flex-direction: column; text-align: center; } .about-preview-image { margin-bottom: var(--space-l); max-width: 350px; } .about-preview-content .section-title, .about-preview-content .section-intro { text-align: center; } } footer { text-align: center; padding: var(--space-l) var(--space-s); /* Gebruik de nieuwe variabelen */ background: var(--color-text-dark); /* Donkerdere footer */ color: var(--color-background-light); /* Lichte tekst op donkere footer */ margin-top: var(--space-xxl); /* Meer ruimte boven de footer */ } footer p { margin: 0; font-size: 0.9rem; } /* Fotoshoot Detail Pagina */ .page-content { padding-top: 80px; /* Adjust if header height changes */ } .fotoshoot-detail-hero { position: relative; height: 60vh; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--color-white); } .fotoshoot-detail-hero .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1; } .fotoshoot-detail-hero .container { position: relative; z-index: 2; } .fotoshoot-detail-title { font-family: var(--font-display); font-size: 3rem; margin-bottom: 10px; animation: fadeInDown 1s ease-out; } .fotoshoot-detail-tagline { font-family: var(--font-body); font-size: 1.3rem; font-weight: 300; animation: fadeInUp 1s ease-out 0.3s; animation-fill-mode: backwards; /* Start animation state before it begins */ } .fotoshoot-detail-content { padding: 60px 0; background-color: var(--color-background-light); } .detail-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; } .detail-text-content h3 { font-family: var(--font-display); font-size: 1.8rem; color: var(--color-primary); margin-top: 30px; margin-bottom: 15px; } .detail-text-content p, .detail-text-content ul { font-family: var(--font-body); font-size: 1rem; line-height: 1.7; color: var(--color-text-dark); margin-bottom: 20px; } .detail-text-content ul { list-style: disc; padding-left: 20px; } .detail-text-content .cta-button { margin-top: 20px; } .detail-gallery h3 { font-family: var(--font-display); font-size: 1.8rem; color: var(--color-primary); margin-bottom: 20px; } .mini-gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; } .mini-gallery-grid img { width: 100%; height: auto; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; } .mini-gallery-grid img:hover { transform: scale(1.05); box-shadow: 0 4px 15px rgba(0,0,0,0.15); } /* Responsive voor Detail Pagina */ @media (max-width: var(--bp-medium)) { .detail-layout { grid-template-columns: 1fr; /* Stack op tablet */ } .fotoshoot-detail-title { font-size: 2.5rem; } .fotoshoot-detail-tagline { font-size: 1.1rem; } } @media (max-width: var(--bp-small)) { .fotoshoot-detail-hero { height: 50vh; } .fotoshoot-detail-title { font-size: 2rem; } .fotoshoot-detail-tagline { font-size: 1rem; } .fotoshoot-detail-content { padding: 40px 0; } .mini-gallery-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; } } /* Basis mappen structuur - maak de mappen aan indien nodig */ /* /images/ */ /* /assets/ */ /* /includes/ */ /* /pages/ */ /* /admin/ */ /* /admin/css/ */ /* /admin/js/ */ /* /admin/includes/ */ /* /booking/ */ /* /booking/css/ */ /* /booking/js/ */ /* /booking/includes/ */ /* /portal/ */ /* /portal/css/ */ /* /portal/js/ */ /* /portal/includes/ */