/* Color Palette */:root { --champagne: #F7E7CE; --gold: #C9A24D; --blush: #E8B4BC; --text-dark: #3A3A3A; --white: #FFFFFF; } /* Global fixes */ * { box-sizing: border-box; } html, body { width: 100%; height: 100%; margin: 0; } /* Base body */ body { min-height: 100vh; font-family: Georgia, serif; background-color: var(--champagne); color: var(--text-dark); display: flex; flex-direction: column; /* Space for fixed navbar and footer */ padding-top: 70px; padding-bottom: 120px; } /* Success message */ .success-message { color: var(--gold); font-weight: bold; margin-bottom: 15px; } /* Navigation bar */ .navbar { position: fixed; top: 0; left: 0; width: 100%; background-color: var(--white); border-bottom: 1px solid var(--gold); z-index: 10000; } .navbar ul { display: flex; justify-content: center; list-style: none; padding: 15px; margin: 0; } .navbar li { margin: 0 15px; } .navbar a { text-decoration: none; color: var(--text-dark); font-weight: bold; padding-bottom: 6px; transition: border-bottom 0.2s ease, color 0.2s ease; } .navbar a.active { border-bottom: 3px solid var(--gold); } .navbar a:hover { color: var(--blush); } /* Hero section */ .hero { width: 100%; } .hero video { width: 100%; height: 70vh; object-fit: cover; border-bottom: 6px solid var(--gold); } /* Home image row */ .image-row { display: flex; width: 100%; border-top: 4px solid var(--blush); } .image-row img { width: 33.333%; height: auto; object-fit: cover; } /* Main content */ .content { flex: 1; max-width: 900px; margin: 40px auto; padding: 0 20px; text-align: center; } .content h1 { color: var(--gold); } .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; padding: 10px; } .gallery img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; border-radius: 4px; border: 4px solid var(--white); } .gallery img:hover { transform: scale(1.02); border-color: var(--blush); } /* Lightbox overlay */ .lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); display: none; align-items: center; justify-content: center; z-index: 20000; } /* Show lightbox */ .lightbox.active { display: flex; } /* Lightbox image */ .lightbox-image { max-width: 90%; max-height: 90%; object-fit: contain; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6); } /* Controls */ .lightbox-close, .lightbox-prev, .lightbox-next { position: absolute; background: none; border: none; color: #fff; font-size: 32px; cursor: pointer; padding: 10px; } /* Close button */ .lightbox-close { top: 20px; right: 30px; } /* Navigation buttons */ .lightbox-prev { left: 20px; } .lightbox-next { right: 20px; } /* Donation links */ .donation-links { list-style: none; padding: 0; margin: 0; } /* Fixed footer */ .gift-footer { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #f8f8f8; color: #333; font-size: 12px; line-height: 1.4; padding: 10px 15px; border-top: 1px solid #ccc; text-align: center; z-index: 9999; } .privacy-footer { position: fixed; bottom: 0; left: 0; width: 100%; padding: 8px 12px; text-align: center; font-size: 0.7rem; /* SMALL TEXT */ line-height: 1.3; /* Tight but readable */ background: rgba(255, 255, 255, 0.95); color: #444; border-top: 1px solid #ddd; transition: opacity 0.3s ease, background 0.3s ease; z-index: 1000; } /* See-through when not at bottom */ .privacy-footer.transparent { opacity: 0.35; background: rgba(255, 255, 255, 0.6); } /* Fully visible at bottom */ .privacy-footer.solid { opacity: 1; background: rgba(255, 255, 255, 0.95); } /* See-through when not at bottom */ .privacy-footer.transparent { opacity: 0.35; background: rgba(255, 255, 255, 0.6); } /* Fully visible at bottom */ .privacy-footer.solid { opacity: 1; background: rgba(255, 255, 255, 0.95); } /* Reset default body spacing */ html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow-x: hidden; /* prevents horizontal scrollbar */ } /* Full-screen hero image container */ .image-container { position: relative; width: 100%; /* use 100% instead of 100vw to avoid scrollbar issues */ height: 100%; /* fills viewport height */ min-height: 100vh; /* ensures full screen */ overflow: hidden; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; background: none; /* ensure no background color adds a box */ } /* Image fills container completely */ .image-container img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; padding: 0; } /* Countdown stays on top, centered */ .countdown { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.55); color: #fff; padding: 12px 18px; border-radius: 8px; font-size: 1.3rem; font-family: Georgia, serif; text-align: center; z-index: 10; } .countdown-note { background-color: #fff5e6; /* soft warm color */ border: 2px solid #c9a24d; /* matches your gold theme */ border-radius: 12px; padding: 20px; max-width: 600px; margin: 20px auto; font-family: Georgia, serif; font-size: 18px; color: #3a3a3a; text-align: center; box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .countdown-note strong { color: #c9a24d; font-weight: bold; } /* Simple modal styling */ .modal { display: none; /* hidden by default */ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); justify-content: center; align-items: center; z-index: 1000; } .modal-content { background: #fff; padding: 20px 30px; border-radius: 10px; text-align: center; max-width: 300px; } .modal-content ul { list-style: none; padding: 0; } .modal-content li { margin: 10px 0; } .modal-content a { text-decoration: none; color: #007bff; font-weight: bold; } .modal-content button { margin-top: 15px; padding: 8px 12px; border: none; background: #ccc; border-radius: 6px; cursor: pointer; } /* Full viewport header image */ .header-image3 { position: relative; width: 100%; height: 100vh; /* full viewport height */ display: flex; align-items: center; /* vertically center the image */ justify-content: center; /* horizontally center the image */ overflow: hidden; background-color: #f7e7ce; /* fallback in case image ratio leaves space */ } .header-image3 img { width: 100%; height: 100%; object-fit: contain; /* shows the full image without cropping */ display: block; }