Galeria – Dworek Fantazja
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: ‘Georgia’, serif;
background-color: #f5f2f0;
color: #2d1b14;
line-height: 1.6;
}
/* WHITE NAVBAR WITH LOGO IMAGE */
.navbar {
background-color: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(10px);
padding: 15px 0;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
box-shadow: 0 2px 20px rgba(0,0,0,0.1);
border-bottom: 1px solid rgba(45, 27, 20, 0.1);
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}
.logo-container {
display: flex;
align-items: center;
text-decoration: none;
height: 60px;
}
.logo-img {
height: 70px;
width: auto;
max-width: 180px;
object-fit: contain;
}
.logo-text {
font-size: 24px;
font-weight: bold;
color: #2d1b14;
display: none;
}
.nav-links {
display: flex;
list-style: none;
gap: 30px;
align-items: center;
}
.nav-links a {
text-decoration: none;
color: #2d1b14;
font-weight: 500;
transition: all 0.3s ease;
padding: 8px 15px;
border-radius: 4px;
font-size: 16px;
}
.nav-links a:hover {
color: #d4a574;
background-color: rgba(212, 165, 116, 0.1);
}
/* MAIN BANNER – FULL WIDTH */
.main-banner {
position: relative;
height: 500px;
width: 100%;
margin-top: 80px; /* Space for fixed navbar */
overflow: hidden;
}
.banner-image {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.8);
}
.banner-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0.2));
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 20px;
}
.banner-content {
max-width: 800px;
color: white;
z-index: 2;
}
.banner-content h1 {
font-size: 56px;
margin-bottom: 20px;
text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
font-weight: bold;
}
.banner-content p {
font-size: 22px;
font-style: italic;
text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
margin-bottom: 30px;
line-height: 1.5;
}
.banner-button {
display: inline-block;
background-color: #d4a574;
color: white;
padding: 15px 40px;
border-radius: 30px;
text-decoration: none;
font-weight: 500;
font-size: 18px;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1px;
}
.banner-button:hover {
background-color: #e6b98c;
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
/* WORDPRESS FIX – Hide default WordPress title if it exists */
.wordpress-title-fix {
display: none !important;
}
/* MAIN CONTENT AREA */
.main-content {
padding: 0 20px;
}
/* ALL IMAGES IN ONE SECTION */
.gallery-container {
max-width: 1400px;
margin: 0 auto;
padding: 80px 0 60px;
}
.gallery-intro {
text-align: center;
margin-bottom: 60px;
}
.gallery-intro h2 {
color: #d4a574;
font-size: 36px;
margin-bottom: 20px;
position: relative;
display: inline-block;
}
.gallery-intro h2::after {
content: ”;
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 3px;
background-color: #d4a574;
}
.gallery-intro p {
font-size: 18px;
color: #666;
max-width: 600px;
margin: 0 auto 30px;
}
/* ALL IMAGES IN ONE GRID – NO CATEGORIES */
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 30px;
margin-bottom: 80px;
}
.gallery-item {
position: relative;
overflow: hidden;
border-radius: 15px;
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
transition: all 0.3s ease;
cursor: pointer;
background: white;
}
.gallery-item:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}
.gallery-item img {
width: 100%;
height: 280px;
object-fit: cover;
transition: transform 0.3s ease;
}
.gallery-item:hover img {
transform: scale(1.1);
}
.gallery-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0,0,0,0.8));
color: white;
padding: 25px 20px 20px;
transform: translateY(100%);
transition: transform 0.3s ease;
}
.gallery-item:hover .gallery-overlay {
transform: translateY(0);
}
.gallery-overlay h3 {
font-size: 20px;
margin-bottom: 10px;
}
.gallery-overlay p {
font-size: 14px;
opacity: 0.9;
}
/* LIGHTBOX */
.lightbox {
display: none;
position: fixed;
z-index: 2000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.9);
}
.lightbox-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 90%;
max-height: 90%;
}
.lightbox img {
width: 100%;
height: auto;
border-radius: 10px;
}
.close {
position: absolute;
top: 20px;
right: 35px;
color: white;
font-size: 40px;
font-weight: bold;
cursor: pointer;
}
.close:hover {
color: #8b6f47;
}
/* FOOTER */
.footer {
background-color: #2d1b14;
color: #f5f2f0;
text-align: center;
padding: 60px 20px;
margin-top: 60px;
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
}
.footer-logo {
font-size: 28px;
color: #d4a574;
margin-bottom: 20px;
font-weight: bold;
}
.footer p {
font-size: 16px;
opacity: 0.8;
max-width: 600px;
margin: 0 auto;
}
/* BUTTON STYLES */
.nav-button {
background-color: #d4a574;
color: white !important;
padding: 10px 25px !important;
border-radius: 30px;
transition: all 0.3s ease !important;
}
.nav-button:hover {
background-color: #b38b5e;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(212, 165, 116, 0.3);
}
/* RESPONSIVE */
@media (max-width: 1024px) {
.gallery-grid {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.banner-content h1 {
font-size: 48px;
}
}
@media (max-width: 768px) {
.navbar {
padding: 10px 0;
}
.logo-img {
height: 50px;
max-width: 150px;
}
.nav-links {
gap: 15px;
}
.nav-links a {
font-size: 14px;
padding: 6px 10px;
}
.main-banner {
height: 400px;
margin-top: 70px;
}
.banner-content h1 {
font-size: 36px;
}
.banner-content p {
font-size: 18px;
}
.banner-button {
padding: 12px 30px;
font-size: 16px;
}
.gallery-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.gallery-intro h2 {
font-size: 28px;
}
.nav-button {
padding: 8px 20px !important;
font-size: 14px;
}
}
@media (max-width: 480px) {
.logo-img {
height: 40px;
max-width: 120px;
}
.nav-links {
gap: 10px;
}
.nav-links a {
font-size: 13px;
padding: 5px 8px;
}
.main-banner {
height: 350px;
}
.banner-content h1 {
font-size: 32px;
}
.banner-content p {
font-size: 16px;
}
.gallery-item img {
height: 220px;
}
.footer {
padding: 40px 20px;
}
}
Galeria Dworku Fantazja
Odkryj magiczne wnętrza i malowniczy ogród, które tworzą niepowtarzalną atmosferę
Twojego wymarzonego wydarzenia
Zobacz Galerię
Nasze Przestrzenie
Każde zdjęcie opowiada historię niezapomnianych chwil spędzonych w Dworku Fantazja.
Przestronna Sala
Klimatyzowana sala mieszcząca do 130 gości
Luksusowy Wnętrze
Nowoczesny design w biało-czekoladowej kolorystyce
Stylowe Dekoracje
Elegancko nakryte stoły dla gości
Malowniczy Ogród
4000 m² pięknej przestrzeni ze stawem
Ceremonia Plenerowa
Idealne miejsce na ślub w plenerze
Romantyczna Sceneria
Perfect location for wedding photography
Eleganckie Stoły
Dbałość o każdy detal
Stylowe Dekoracje
Biało-nieieska kolorystyka
Romantyczne Detale
Kwiaty i dekoracje weselne
Widok na salę
Przestronne wnętrze z dużymi oknami
Oświetlony Ogród
Magiczna atmosfera po zmroku
// Lightbox functionality
function openLightbox(element) {
const img = element.querySelector(‘img’);
const lightbox = document.getElementById(‘lightbox’);
const lightboxImg = document.getElementById(‘lightbox-img’);
lightboxImg.src = img.src;
lightbox.style.display = ‘block’;
document.body.style.overflow = ‘hidden’;
}
function closeLightbox() {
const lightbox = document.getElementById(‘lightbox’);
lightbox.style.display = ‘none’;
document.body.style.overflow = ‘auto’;
}
// Close lightbox with Escape key
document.addEventListener(‘keydown’, function(event) {
if (event.key === ‘Escape’) {
closeLightbox();
}
});
// Gallery animation on scroll
const galleryItems = document.querySelectorAll(‘.gallery-item’);
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = ‘1’;
entry.target.style.transform = ‘translateY(0)’;
}
});
}, { threshold: 0.1 });
galleryItems.forEach((item, index) => {
item.style.opacity = ‘0’;
item.style.transform = ‘translateY(30px)’;
item.style.transition = `opacity 0.6s ease ${index * 0.1}s, transform 0.6s ease ${index * 0.1}s`;
observer.observe(item);
});
// Navbar scroll effect
window.addEventListener(‘scroll’, function() {
const navbar = document.querySelector(‘.navbar’);
if (window.scrollY > 50) {
navbar.style.boxShadow = ‘0 4px 20px rgba(0,0,0,0.1)’;
navbar.style.backdropFilter = ‘blur(15px)’;
} else {
navbar.style.boxShadow = ‘0 2px 20px rgba(0,0,0,0.1)’;
navbar.style.backdropFilter = ‘blur(10px)’;
}
});
// Smooth scroll for banner button
document.querySelector(‘.banner-button’).addEventListener(‘click’, function(e) {
e.preventDefault();
const gallerySection = document.getElementById(‘gallery’);
gallerySection.scrollIntoView({ behavior: ‘smooth’ });
});
// WORDPRESS FIX – Hide default WordPress title if it exists
document.addEventListener(‘DOMContentLoaded’, function() {
// Look for common WordPress title classes and hide them
const wordpressTitles = [
‘.entry-title’,
‘.page-title’,
‘.post-title’,
‘.wp-block-post-title’,
‘h1.entry-title’
];
wordpressTitles.forEach(selector => {
const elements = document.querySelectorAll(selector);
elements.forEach(el => {
// Check if it’s not our custom banner title
if (!el.closest(‘.main-banner’)) {
el.style.display = ‘none’;
}
});
});
// Also check for any duplicate h1 that’s not in our banner
const allH1s = document.querySelectorAll(‘h1’);
allH1s.forEach((h1, index) => {
if (index > 0 && !h1.closest(‘.main-banner’)) {
h1.style.display = ‘none’;
}
});
});
// Banner image lazy loading and error handling
const bannerImage = document.querySelector(‘.banner-image’);
if (bannerImage) {
bannerImage.addEventListener(‘load’, function() {
this.style.opacity = ‘1’;
});
bannerImage.addEventListener(‘error’, function() {
// Fallback image if main image fails to load
this.src = ‘
https://kimi-web-img.moonshot.cn/img/vogueballroom.com.au/ed7683ed3a231f1d7b69a9c48d2b199021fe9664.jpg’;
});
// Initial opacity
bannerImage.style.opacity = ‘0’;
bannerImage.style.transition = ‘opacity 0.5s ease’;
}
