/* ============================================================ Havelglück Hochzeitsfotografie — Custom Styles Supplements Tailwind CDN with animations, transitions, and reusable utility classes. ============================================================ */ /* ---- GOOGLE FONTS are loaded in each HTML ---- */ /* ============================================================ SCROLL-TRIGGERED ANIMATIONS (Intersection Observer) Add .fade-in-up / .fade-in-left / .fade-in-right to any element — JS will toggle .is-visible when it enters view. Use data-delay="200" for staggered timing (ms). ============================================================ */ .fade-in-up { opacity: 0; transform: translateY(28px); transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1); } .fade-in-left { opacity: 0; transform: translateX(-28px); transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1); } .fade-in-right { opacity: 0; transform: translateX(28px); transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1); } .fade-in { opacity: 0; transition: opacity 0.75s ease; } /* Triggered state — JS adds this class */ .fade-in-up.is-visible, .fade-in-left.is-visible, .fade-in-right.is-visible, .fade-in.is-visible { opacity: 1; transform: translate(0, 0); } /* ============================================================ IMAGE HOVER ZOOM Wrap in a container with .img-zoom ============================================================ */ .img-zoom { overflow: hidden; } .img-zoom img { transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); display: block; width: 100%; height: 100%; object-fit: cover; } .img-zoom:hover img { transform: scale(1.06); } /* ============================================================ CARD HOVER — subtle lift + shadow ============================================================ */ .card-hover { transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; } .card-hover:hover { transform: translateY(-5px); box-shadow: 0 16px 48px rgba(63, 74, 60, 0.10); } /* ============================================================ BUTTON STYLES .btn-primary — eucalyptus filled .btn-outline — eucalyptus outlined .btn-white — white filled (for dark BG sections) ============================================================ */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; padding: 14px 36px; background-color: #6F7D6A; color: #ffffff; font-size: 0.8125rem; font-family: 'Inter', sans-serif; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; transition: background-color 0.25s ease; text-decoration: none; white-space: nowrap; } .btn-primary:hover { background-color: #3F4A3C; } .btn-outline { display: inline-flex; align-items: center; justify-content: center; padding: 13px 35px; border: 1px solid #6F7D6A; color: #6F7D6A; font-size: 0.8125rem; font-family: 'Inter', sans-serif; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; transition: background-color 0.25s ease, color 0.25s ease; text-decoration: none; white-space: nowrap; } .btn-outline:hover { background-color: #6F7D6A; color: #ffffff; } .btn-white { display: inline-flex; align-items: center; justify-content: center; padding: 14px 36px; background-color: #ffffff; color: #3F4A3C; font-size: 0.8125rem; font-family: 'Inter', sans-serif; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; transition: background-color 0.25s ease, color 0.25s ease; text-decoration: none; white-space: nowrap; } .btn-white:hover { background-color: #F7F7F5; } /* ============================================================ FORM ELEMENTS ============================================================ */ .form-label { display: block; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: #6F7D6A; margin-bottom: 8px; } .form-input, .form-textarea, .form-select { width: 100%; padding: 13px 16px; background-color: #ffffff; border: 1px solid #EAE6DF; color: #3F4A3C; font-size: 0.875rem; font-family: 'Inter', sans-serif; transition: border-color 0.2s ease; outline: none; appearance: none; -webkit-appearance: none; border-radius: 0; } .form-input:focus, .form-textarea:focus, .form-select:focus { border-color: #6F7D6A; } .form-input::placeholder, .form-textarea::placeholder { color: #B0B8A9; } .form-textarea { resize: vertical; min-height: 130px; } /* ============================================================ SECTION HELPERS ============================================================ */ /* Eyebrow label above headings */ .eyebrow { display: block; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase; color: #6F7D6A; margin-bottom: 16px; } /* Horizontal rule decorations */ .divider-leaf { width: 40px; height: 1px; background-color: #6F7D6A; margin: 0 auto 32px; } /* ============================================================ PHOTOGRAPHER CARD STYLE (About page) ============================================================ */ .photographer-card { position: relative; overflow: hidden; } .photographer-card .overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(63, 74, 60, 0.75) 0%, transparent 50%); opacity: 0; transition: opacity 0.4s ease; } .photographer-card:hover .overlay { opacity: 1; } /* ============================================================ PRICING CARD HIGHLIGHT ============================================================ */ .pricing-card-featured { position: relative; border: 2px solid #6F7D6A; } .pricing-card-featured::before { content: 'Beliebtestes Paket'; position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background-color: #6F7D6A; color: white; font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 16px; white-space: nowrap; } /* ============================================================ BLOG ARTICLE CARD ============================================================ */ .blog-card-category { font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: #6F7D6A; font-weight: 500; } /* ============================================================ PROCESS STEP CONNECTOR LINE (desktop) ============================================================ */ @media (min-width: 768px) { .process-step:not(:last-child)::after { content: ''; position: absolute; top: 22px; left: calc(50% + 28px); right: calc(-50% + 28px); height: 1px; background-color: #EAE6DF; } } .process-step { position: relative; } /* ============================================================ HERO SCROLL INDICATOR ============================================================ */ @keyframes scrollBounce { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(8px); opacity: 1; } } .scroll-indicator { animation: scrollBounce 2s ease-in-out infinite; } /* ============================================================ TESTIMONIAL QUOTE ============================================================ */ .testimonial-quote { position: relative; padding-top: 24px; } .testimonial-quote::before { content: '"'; font-family: 'Playfair Display', serif; font-size: 5rem; color: #EAE6DF; line-height: 0.6; position: absolute; top: 0; left: 0; } /* ============================================================ BROWSER SCROLLBAR (subtle) ============================================================ */ ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: #F7F7F5; } ::-webkit-scrollbar-thumb { background: #8A977B; border-radius: 3px; } /* ============================================================ TEXT SELECTION COLOR ============================================================ */ ::selection { background-color: #6F7D6A; color: #ffffff; } /* ============================================================ NAVBAR SHADOW ON SCROLL (JS adds .scrolled class) ============================================================ */ #navbar.scrolled { box-shadow: 0 2px 20px rgba(63, 74, 60, 0.08); } /* ============================================================ ACTIVE NAV LINK STATE ============================================================ */ nav a.nav-active { color: #6F7D6A !important; } /* ============================================================ PACKAGE CHECK LIST ITEM ============================================================ */ .check-item { display: flex; align-items: flex-start; gap: 10px; font-size: 0.875rem; color: rgba(63, 74, 60, 0.75); padding: 6px 0; } .check-item svg { flex-shrink: 0; margin-top: 2px; } /* ============================================================ RESPONSIVE GALLERY GRID ============================================================ */ .gallery-masonry { columns: 3; column-gap: 12px; } .gallery-masonry img { display: block; width: 100%; margin-bottom: 12px; break-inside: avoid; } @media (max-width: 768px) { .gallery-masonry { columns: 2; } } @media (max-width: 480px) { .gallery-masonry { columns: 1; } } /* ============================================================ REVIEWS — "Liebe Worte" Reveal is driven by the .is-visible class that main.js adds to .fade-in-* elements when they scroll into view. ============================================================ */ .review-mark { background-image: linear-gradient(transparent 60%, rgba(111, 125, 106, 0.2) 60%, rgba(111, 125, 106, 0.2) 90%, transparent 90%); background-repeat: no-repeat; background-size: 0% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 1.2s cubic-bezier(0.65, 0, 0.35, 1) 0.6s; } .is-visible .review-mark { background-size: 100% 100%; } .review-stars { display: inline-flex; gap: 3px; } .review-stars svg { width: 14px; height: 14px; color: #6F7D6A; opacity: 0; transform: scale(0.3) rotate(-30deg); transition: opacity 0.3s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); transition-delay: calc(var(--i) * 90ms + 150ms); } .is-visible .review-stars svg { opacity: 1; transform: none; } .review-rule { display: inline-block; height: 1px; width: 0; background: #6F7D6A; transition: width 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.4s; } .is-visible .review-rule { width: 36px; } .review-glyph { font-family: 'Playfair Display', Georgia, serif; line-height: 1; color: #6F7D6A; opacity: 0; transform: translateY(20px); transition: opacity 1.2s ease, transform 1.2s ease; } .is-visible .review-glyph { opacity: 0.12; transform: none; } @media (prefers-reduced-motion: reduce) { .review-mark, .review-stars svg, .review-rule, .review-glyph { transition: none; } } /* ============================================================ LEGAL PAGES (impressum.html, datenschutz.html) ============================================================ */ .legal h2 { font-family: 'Playfair Display', Georgia, serif; font-size: 1.35rem; color: #3F4A3C; margin: 2.5rem 0 0.9rem; line-height: 1.3; } .legal h2:first-child { margin-top: 0; } .legal p { margin-bottom: 1rem; } .legal ul { list-style: disc; padding-left: 1.25rem; margin-bottom: 1rem; } .legal li { margin-bottom: 0.35rem; } .legal a { color: #6F7D6A; text-decoration: underline; text-underline-offset: 3px; word-break: break-word; } .legal a:hover { color: #3F4A3C; } /* ============================================================ MONOGRAM — stands in for photographer portraits until real ones exist ============================================================ */ .monogram { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #EAE6DF 0%, #DCD6CB 100%); font-family: 'Playfair Display', Georgia, serif; font-style: italic; color: #6F7D6A; font-size: clamp(4rem, 12vw, 9rem); line-height: 1; user-select: none; } .monogram-sm { width: 40px; height: 40px; font-size: 1.1rem; display: inline-flex; }