/* Author: Sebastian Busch License: Free to reuse, modify, and redistribute without restrictions. */ :root{ --accent:#1f5f73; --dark:#111; --light:#ffffff; } *{margin:0;padding:0;box-sizing:border-box;} html{ -webkit-text-size-adjust:100%; } body{ font-family:'Manrope',sans-serif; color:#111; overflow-x:hidden; } /* NAVIGATION */ /* Fixed top navigation with subtle glass effect for readability over hero image. */ nav{ position:fixed; top:0; width:100%; padding:20px 8%; display:flex; justify-content:space-between; align-items:center; z-index:1000; background:rgba(255,255,255,0.94); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:1px solid rgba(16,42,51,0.12); box-shadow:0 8px 20px rgba(0,0,0,0.08); transition:background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; } nav.scrolled{ background:rgba(255,255,255,0.98); box-shadow:0 10px 24px rgba(0,0,0,0.1); } nav .logo{ display:flex; align-items:center; gap:10px; font-weight:600; letter-spacing:1px; transition:transform 0.22s ease; } nav .logo img{ width:28px; height:28px; object-fit:contain; display:block; transition:transform 0.22s ease; } nav .menu{ display:flex; gap:16px; } nav a{ text-decoration:none; color:#111; font-size:0.85rem; font-weight:500; display:inline-block; transition:color 0.2s ease, transform 0.2s ease; } /* Membership CTA in top navigation (desktop + mobile). Fallback switch: add `no-member-cta` to to hide it immediately. */ nav a.menu-membership-cta{ font-weight:700; } nav a.menu-membership-cta:hover{ color:var(--accent); transform:translateY(-1px) scale(1.03); } body.no-member-cta .menu-membership-cta{ display:none !important; } nav a:hover{ color:var(--accent); transform:translateY(-1px) scale(1.03); } nav .logo:hover{ transform:translateY(-1px); } nav .logo:hover img{ transform:scale(1.06); } .easteregg-trigger{ appearance:none; border:none; background:transparent; padding:0; margin:0; font:inherit; font-weight:700; line-height:1; color:inherit; cursor:pointer; } .easteregg-trigger:hover{ color:var(--accent); } .easteregg-trigger:focus-visible{ outline:2px solid rgba(31,95,115,0.52); outline-offset:2px; border-radius:3px; } /* BURGER */ .burger{ display:none; flex-direction:column; gap:5px; cursor:pointer; } .burger div{ width:25px; height:2px; background:#111; } /* MOBILE MENU */ /* Off-canvas mobile menu; body scroll is locked while menu is open. */ .mobile-menu{ position:fixed; top:0; right:-100%; width:70%; height:100vh; background:#ffffff; display:flex; flex-direction:column; padding:100px 40px; gap:30px; overflow-y:auto; -webkit-overflow-scrolling:touch; transition:0.4s; z-index:1200; } body.menu-open{ overflow:hidden; touch-action:none; } .mobile-menu-close{ align-self:flex-end; border:none; background:#edf4f7; color:#0f2430; font-weight:700; font-size:0.9rem; line-height:1; padding:8px 10px; border-radius:999px; cursor:pointer; } .mobile-menu.active{ right:0; } .mobile-menu a.menu-membership-cta{ font-weight:700; } /* HERO SECTION */ /* Hero stack combines gradient overlay, Ken Burns backgrounds and foreground logo parallax. */ #hero{ position:relative; height:100vh; display:flex; align-items:center; padding:0 10%; color:#fff; overflow:hidden; background:#08151b; } #hero::before{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.8)); z-index:1; } .hero-kenburns-stack{ position:absolute; inset:0; z-index:0; } .hero-kenburns-layer{ position:absolute; inset:-4%; background-position:center center; background-size:cover; background-repeat:no-repeat; z-index:0; opacity:0; transform:scale(1.02) translate3d(0,0,0); will-change:transform; transition:opacity 1.2s ease; } .hero-kenburns-layer.is-visible{ opacity:1; } .hero-kenburns-layer.is-animating{ animation:heroKenBurnsOneWay 5s linear forwards; } .hero-inner{ position:relative; z-index:3; max-width:900px; } .split-headline{ font-family:'Manrope',sans-serif; font-size:5rem; line-height:0.95; letter-spacing:-2px; font-weight:800; } .split-headline span{ display:block; opacity:1; transform:none; } .hero-sub{ margin-top:40px; font-size:1.2rem; opacity:1; } .hero-sub a, .hero-sub a:visited{ color:#ffffff; font-weight:700; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; } .hero-sub a:hover{ color:#dff4ff; } .hero-logo{ position:absolute; right:8%; top:calc(50% + var(--logo-parallax, 0px)); transform:translateY(-50%) scale(var(--logo-scale, 1)); width:336px; opacity:0.85; z-index:4; pointer-events:none; will-change:top,transform; } @keyframes heroKenBurnsOneWay{ 0%{ transform:scale(1.02) translate3d(-1.2%, -0.8%, 0); } 100%{ transform:scale(1.12) translate3d(1.2%, 0.8%, 0); } } /* SECTIONS */ /* Shared section rhythm and centered content container. */ section:not(#hero){ max-width:1160px; margin:0 auto; padding:24px 24px; scroll-margin-top:120px; } h2{ font-family:'Manrope',sans-serif; font-size:3rem; margin:0 auto 22px; max-width:980px; font-weight:700; position:relative; padding-bottom:12px; line-height:1.12; letter-spacing:-0.02em; } section:not(#hero) h2::after{ content:""; position:absolute; left:0; bottom:0; width:72px; height:3px; border-radius:999px; background:linear-gradient(90deg,#1f5f73,#2a7a92); opacity:0.85; } /* Fallback switch: add `no-heading-accent` to to disable accent line quickly. */ body.no-heading-accent section:not(#hero) h2::after{ display:none; } p{ max-width:980px; line-height:1.82; margin:0 auto 14px; font-size:1.05rem; } section:not(#hero) h3{ max-width:980px; margin:20px auto 8px; line-height:1.3; } .photo-credits{ max-width:980px; margin:10px auto 0; font-size:0.76rem; line-height:1.45; color:#667782; } .photo-credits a{ color:#4b6b79; text-decoration:none; } .photo-credits a:hover{ text-decoration:underline; } .fish-card-grid{ max-width:980px; margin:0 auto 24px; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; } .fish-card{ background:#fff; border:1px solid #d8e3e8; border-radius:14px; overflow:hidden; box-shadow:0 6px 16px rgba(0,0,0,0.06); transition:transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease; position:relative; cursor:default; } .fish-card::after{ content:""; position:absolute; inset:0; border-radius:14px; box-shadow:inset 0 0 0 0 rgba(31,95,115,0.55); opacity:0; pointer-events:none; transition:opacity 0.22s ease, box-shadow 0.22s ease; } .fish-thumb{ height:92px; display:flex; align-items:center; justify-content:center; background:linear-gradient(145deg,#215b6e,#123542); } .fish-thumb img{ width:100%; height:100%; object-fit:contain; padding:10px; filter:drop-shadow(0 1px 1px rgba(0,0,0,0.2)); transition:transform 0.28s ease, filter 0.28s ease; } .fish-name{ padding:10px 12px; font-weight:600; font-size:0.95rem; text-align:center; transition:color 0.24s ease, transform 0.24s ease; } @media (hover:hover){ .fish-card:hover{ transform:translateY(-4px); box-shadow:0 12px 26px rgba(0,0,0,0.14); border-color:#b9cfd8; } .fish-card:hover::after{ opacity:1; box-shadow:inset 0 0 0 2px rgba(31,95,115,0.42); } .fish-card:hover .fish-thumb img{ transform:scale(1.08); filter:drop-shadow(0 5px 10px rgba(0,0,0,0.28)); } .fish-card:hover .fish-name{ color:#17485a; transform:translateY(-1px); } } .fish-card:focus-within{ outline:2px solid rgba(31,95,115,0.45); outline-offset:2px; } .fish-card:focus-within::after{ opacity:1; box-shadow:inset 0 0 0 2px rgba(31,95,115,0.5); } @media (hover:none){ .fish-card:active{ transform:translateY(-2px) scale(0.995); box-shadow:0 10px 20px rgba(0,0,0,0.14); border-color:#abc4cf; } .fish-card:active::after{ opacity:1; box-shadow:inset 0 0 0 2px rgba(31,95,115,0.5); } .fish-card:active .fish-thumb img{ transform:scale(1.05); filter:drop-shadow(0 4px 8px rgba(0,0,0,0.25)); } } /* IMAGE GRID */ .image-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:30px; margin-top:50px; max-width:980px; margin-left:auto; margin-right:auto; } .image-grid img{ width:100%; height:400px; object-fit:cover; } /* GALLERY CAROUSEL */ /* 3-slide look: active image centered, previous/next partially visible with fades. */ .gallery-carousel{ position:relative; max-width:980px; margin:24px auto 0; } .carousel-track{ position:relative; height:560px; border-radius:18px; overflow:hidden; box-shadow:0 16px 40px rgba(0,0,0,0.18); background:#0f2730; display:flex; align-items:center; justify-content:center; } .carousel-track::before, .carousel-track::after{ content:""; position:absolute; top:0; bottom:0; width:14%; z-index:4; pointer-events:none; } .carousel-track::before{ left:0; background:linear-gradient(to right, rgba(15,39,48,0.78), rgba(15,39,48,0)); } .carousel-track::after{ right:0; background:linear-gradient(to left, rgba(15,39,48,0.78), rgba(15,39,48,0)); } .carousel-slide{ position:absolute; top:16px; bottom:22px; left:50%; width:76%; opacity:0; pointer-events:none; cursor:zoom-in; transform:translate(-50%,0) scale(0.9); filter:brightness(0.75); transition:transform 0.8s ease, opacity 0.8s ease, filter 0.8s ease; } .carousel-slide.active{ opacity:1; transform:translate(-50%,0) scale(1); filter:brightness(1); z-index:3; } .carousel-slide.prev{ opacity:0.45; transform:translate(-96%,0) scale(0.88); z-index:2; } .carousel-slide.next{ opacity:0.45; transform:translate(-4%,0) scale(0.88); z-index:2; } .carousel-slide.active, .carousel-slide.prev, .carousel-slide.next{ pointer-events:auto; } .carousel-slide img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:16px; } .carousel-slide figcaption{ position:absolute; left:0; right:0; bottom:0; padding:16px 18px; color:#fff; font-size:0.95rem; letter-spacing:0.2px; opacity:0; transform:translateY(16px); transition:opacity 0.45s ease, transform 0.45s ease; z-index:3; text-shadow:0 2px 10px rgba(0,0,0,0.85); } .carousel-slide.active figcaption{ opacity:1; transform:translateY(0); } .carousel-nav{ position:absolute; top:50%; transform:translateY(-50%); border:none; width:48px; height:48px; border-radius:999px; background:rgba(255,255,255,0.85); color:#0b1c22; font-size:1.5rem; font-weight:600; cursor:pointer; z-index:6; transition:all 0.25s ease; touch-action:manipulation; } .carousel-nav:hover{ background:#fff; transform:translateY(-50%) scale(1.05); } .carousel-nav.prev{left:14px;} .carousel-nav.next{right:14px;} .carousel-dots{ display:flex; justify-content:center; gap:12px; margin-top:18px; } .carousel-dot{ width:14px; height:14px; border-radius:999px; border:none; background:#87949d; cursor:pointer; transition:all 0.25s ease; touch-action:manipulation; box-shadow:0 0 0 3px rgba(255,255,255,0.16); } .carousel-dot.active{ background:#ffffff; transform:scale(1.16); box-shadow:0 0 0 3px rgba(31,95,115,0.95),0 2px 8px rgba(0,0,0,0.32); } /* Fallback switch: add `no-strong-gallery-controls` to to revert stronger controls. */ body.no-strong-gallery-controls .carousel-dot{ width:10px; height:10px; background:#b8c2c7; box-shadow:none; } body.no-strong-gallery-controls .carousel-dot.active{ background:var(--accent); transform:scale(1.25); box-shadow:none; } body.no-strong-gallery-controls .carousel-nav{ width:44px; height:44px; font-size:1.4rem; } .lightbox{ position:fixed; inset:0; background:rgba(7,16,20,0.92); z-index:3000; display:flex; align-items:center; justify-content:center; padding:12px; opacity:0; visibility:hidden; pointer-events:none; transition:opacity 0.35s ease, visibility 0s linear 0.35s; } /* Fullscreen gallery overlay independent from section transforms (mobile-safe). */ .lightbox.open{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity 0.35s ease; } .lightbox-figure{ position:relative; width:min(92vw,1200px); height:min(84vh,760px); border-radius:16px; overflow:hidden; box-shadow:0 18px 44px rgba(0,0,0,0.35); display:flex; align-items:center; justify-content:center; background:#0b1a20; } .lightbox-track{ position:relative; width:100%; height:100%; } .lightbox-slide{ position:absolute; top:0; bottom:0; left:50%; width:78%; opacity:0; pointer-events:none; transform:translate(-50%,0) scale(0.9); filter:brightness(0.68); transition:transform 0.75s ease, opacity 0.75s ease, filter 0.75s ease; } .lightbox-slide.active{ opacity:1; transform:translate(-50%,0) scale(1); filter:brightness(1); z-index:3; } .lightbox-slide.prev{ opacity:0.42; transform:translate(-98%,0) scale(0.88); z-index:2; } .lightbox-slide.next{ opacity:0.42; transform:translate(-2%,0) scale(0.88); z-index:2; } .lightbox-slide.active, .lightbox-slide.prev, .lightbox-slide.next{ pointer-events:auto; } .lightbox-slide img{ width:100%; height:100%; object-fit:cover; display:block; } .lightbox-slide figcaption{ position:absolute; left:0; right:0; bottom:0; padding:16px 18px; color:#fff; background:linear-gradient(to top, rgba(0,0,0,0.76), rgba(0,0,0,0)); font-size:0.95rem; opacity:0; transform:translateY(14px); transition:opacity 0.45s ease, transform 0.45s ease; } .lightbox-slide.active figcaption{ opacity:1; transform:translateY(0); } .lightbox-close, .lightbox-nav{ position:absolute; border:none; width:52px; height:52px; border-radius:999px; background:rgba(0,0,0,0.58); color:#fff; border:1px solid rgba(255,255,255,0.72); font-size:1.35rem; font-weight:700; cursor:pointer; z-index:2; transition:transform 0.2s ease, background 0.2s ease; display:flex; align-items:center; justify-content:center; line-height:1; touch-action:manipulation; } .lightbox-close:hover, .lightbox-nav:hover{ transform:scale(1.05); background:rgba(0,0,0,0.78); } .lightbox-close{ position:fixed; top:max(12px, env(safe-area-inset-top)); right:max(12px, env(safe-area-inset-right)); z-index:8; } .lightbox-nav.prev{left:26px; top:50%; transform:translateY(-50%);} .lightbox-nav.next{right:26px; top:50%; transform:translateY(-50%);} .lightbox-nav.prev:hover, .lightbox-nav.next:hover{transform:translateY(-50%) scale(1.05);} .lightbox-figure::before, .lightbox-figure::after{ content:""; position:absolute; top:0; bottom:0; width:13%; z-index:5; pointer-events:none; } .lightbox-figure::before{ left:0; background:linear-gradient(to right, rgba(11,26,32,0.85), rgba(11,26,32,0)); } .lightbox-figure::after{ right:0; background:linear-gradient(to left, rgba(11,26,32,0.85), rgba(11,26,32,0)); } body.lightbox-open{ overflow:hidden; } /* JOIN SECTION */ /* Target cards: image + bottom text overlay; tuned for readability on bright images. */ .join-intro{ max-width:980px; margin-bottom:22px; font-size:1.1rem; } .membership-facts{ max-width:980px; margin:16px auto 18px; padding:16px 18px; border-radius:16px; border:1px solid #d2e0e7; background:linear-gradient(180deg,#f9fdff,#eff7fb); box-shadow:0 10px 22px rgba(0,0,0,0.08); } .membership-facts h3{ margin:0 0 10px; font-size:1rem; color:#173744; } .membership-facts-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .membership-fact{ background:#fff; border:1px solid #d8e5ec; border-radius:12px; padding:10px 12px; display:flex; flex-direction:column; gap:2px; } .membership-fact-value{ font-size:1.15rem; font-weight:800; color:#1f5f73; line-height:1.1; } .membership-fact-label{ font-size:0.82rem; font-weight:600; color:#2d4b58; line-height:1.35; } .membership-fairness{ margin-top:10px; font-size:0.86rem; line-height:1.45; color:#294552; } .join-contact-cta{ max-width:980px; margin:10px auto 0; } .join-contact-cta a, .contact-form button, .cookie-btn{ display:inline-block; padding:9px 14px; border-radius:999px; border:1px solid #b8d2de; background:#eef7fb; color:#18485b; font-weight:700; font-size:0.82rem; text-decoration:none; cursor:pointer; transition:background .2s ease, transform .2s ease, border-color .2s ease, color .2s ease; } .join-contact-cta a:hover, .contact-form button:hover, .cookie-btn:hover{ background:#e3f0f7; border-color:#9fc2d1; transform:translateY(-1px); } /* Fallback switch: add `no-membership-facts` to to hide the compact info box. */ body.no-membership-facts .membership-facts{ display:none; } /* Fallback switch for join CTA styling */ body.no-join-cta-style .join-contact-cta a{ padding:0; border:none; background:transparent; border-radius:0; color:#1f5f73; font-weight:600; text-decoration:underline; transform:none; } .target-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:20px; max-width:980px; margin-left:auto; margin-right:auto; } .target-card{ position:relative; min-height:520px; border-radius:18px; overflow:hidden; box-shadow:0 12px 28px rgba(0,0,0,0.2); } #mitglied .target-card{ min-height:430px; } .target-card img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1); transition:transform 0.7s ease; } #mitglied .target-card img.target-youth-image{ object-position:50% 8%; transform:translateY(-22%) scale(1.18); transform-origin:center top; } .target-mid-image{ object-position:50% 24%; } .target-bestager-image{ object-position:52% 20%; } #mitglied .target-card img.target-mid-image{ transform:translateY(-14%) scale(1.14); transform-origin:center top; } #mitglied .target-card img.target-bestager-image{ transform:translateY(-28%) scale(1.18); transform-origin:center top; } .target-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,0.86) 28%, rgba(0,0,0,0.3) 72%); } #vereinsheim .target-card::after{ background:linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.46) 34%, rgba(0,0,0,0) 68%); } .target-overlay{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:18px 16px; color:#fff; text-align:left; } .target-overlay h3{ font-size:1.2rem; margin-bottom:10px; font-family:'Manrope',sans-serif; font-weight:700; } .target-overlay p{ max-width:none; margin:0 0 7px; line-height:1.45; font-size:0.94rem; } .target-cta{ font-weight:700; margin-top:10px; } .target-card:hover img{ transform:scale(1.07); } #mitglied .target-card:hover img.target-youth-image{ transform:translateY(-22%) scale(1.24); } #mitglied .target-card:hover img.target-mid-image{ transform:translateY(-14%) scale(1.2); } #mitglied .target-card:hover img.target-bestager-image{ transform:translateY(-28%) scale(1.24); } .clubhouse-card{ min-height:360px; cursor:zoom-in; } .clubhouse-card .target-overlay{ width:84%; max-width:none; } .clubhouse-card .target-overlay p{ font-size:0.84rem; margin-bottom:0; } .image-overlay{ position:fixed; inset:0; background:rgba(8,14,18,0.94); z-index:3200; display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; visibility:hidden; pointer-events:none; transition:opacity 0.25s ease, visibility 0s linear 0.25s; } /* Reusable fullscreen image modal for clubhouse cards. */ .image-overlay.open{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity 0.25s ease; } .image-overlay img{ max-width:min(94vw,1280px); max-height:82vh; width:auto; height:auto; display:block; border-radius:14px; box-shadow:0 16px 36px rgba(0,0,0,0.38); } .image-overlay-caption{ position:absolute; left:50%; bottom:16px; transform:translateX(-50%); color:#fff; font-size:0.9rem; background:rgba(0,0,0,0.52); padding:8px 12px; border-radius:999px; } .image-overlay-close{ position:absolute; right:16px; top:16px; width:46px; height:46px; border:none; border-radius:999px; background:rgba(0,0,0,0.55); color:#fff; font-size:1.1rem; font-weight:700; cursor:pointer; border:1px solid rgba(255,255,255,0.62); touch-action:manipulation; } body.image-overlay-open{ overflow:hidden; } .easteregg-modal{ position:fixed; inset:0; z-index:3400; display:flex; align-items:center; justify-content:center; background:rgba(7,16,20,0.66); padding:20px; opacity:0; visibility:hidden; pointer-events:none; transition:opacity 0.28s ease, visibility 0s linear 0.28s; } /* Easteregg stage: cinematic overlay with particle layer + animated sticker reveal. */ .easteregg-modal.open{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity 0.28s ease; } .easteregg-spark-stage{ position:absolute; inset:0; pointer-events:none; opacity:0.95; } .easteregg-dialog{ position:relative; width:min(95vw,620px); padding:0; background:transparent; border:none; box-shadow:none; text-align:center; z-index:1; } .easteregg-close{ position:fixed; right:max(14px, env(safe-area-inset-right)); top:max(14px, env(safe-area-inset-top)); width:42px; height:42px; border-radius:999px; border:1px solid rgba(170,182,191,0.9); background:rgba(15,39,48,0.5); color:#fff; font-weight:700; cursor:pointer; z-index:2; } .busch-sticker-wrap{ display:flex; align-items:center; justify-content:center; padding:10px 0; } .busch-sticker{ position:relative; width:min(68vw,275px); line-height:0; filter:drop-shadow(0 14px 26px rgba(0,0,0,0.34)) drop-shadow(0 4px 10px rgba(0,0,0,0.2)); animation:stickerGlow 2.8s ease-in-out infinite; } .busch-sticker::before{ content:""; position:absolute; inset:-12% -14%; background: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.55) 0 4px, transparent 8px), radial-gradient(circle at 82% 22%, rgba(201,231,255,0.45) 0 3px, transparent 7px), radial-gradient(circle at 70% 78%, rgba(255,255,255,0.4) 0 3px, transparent 8px); filter:blur(0.2px); mix-blend-mode:screen; opacity:0.42; animation:stickerTwinkleA 2.4s ease-in-out infinite alternate; pointer-events:none; z-index:2; } .busch-sticker::after{ content:""; position:absolute; inset:-10% -10%; background: radial-gradient(circle at 35% 74%, rgba(255,255,255,0.45) 0 3px, transparent 8px), radial-gradient(circle at 62% 40%, rgba(206,236,255,0.38) 0 2px, transparent 7px), radial-gradient(circle at 90% 62%, rgba(255,255,255,0.35) 0 2px, transparent 7px); mix-blend-mode:screen; opacity:0.28; animation:stickerTwinkleB 3.1s ease-in-out infinite; pointer-events:none; z-index:2; } .busch-sticker img{ display:block; width:100%; height:auto; object-fit:contain; filter:contrast(1.04) saturate(1.06); } .easteregg-credit{ margin:16px 0 0; color:#d8e2e7; font-size:0.98rem; letter-spacing:0.5px; text-shadow:0 2px 10px rgba(0,0,0,0.55); } .easteregg-signature{ margin:8px 0 0; color:#b8cbd5; font-size:0.92rem; letter-spacing:0.2px; text-shadow:0 2px 10px rgba(0,0,0,0.42); } body.easteregg-open{ overflow:hidden; touch-action:none; } @keyframes stickerGlow{ 0%,100%{filter:drop-shadow(0 14px 26px rgba(0,0,0,0.34)) drop-shadow(0 4px 10px rgba(0,0,0,0.2));} 50%{filter:drop-shadow(0 18px 32px rgba(0,0,0,0.4)) drop-shadow(0 6px 14px rgba(132,189,222,0.28));} } @keyframes stickerTwinkleA{ 0%{opacity:0.22; transform:translateY(1px) scale(0.98);} 50%{opacity:0.58; transform:translateY(-1px) scale(1.01);} 100%{opacity:0.34; transform:translateY(0) scale(1);} } @keyframes stickerTwinkleB{ 0%{opacity:0.18; transform:translateX(0) scale(0.98);} 45%{opacity:0.42; transform:translateX(1px) scale(1.02);} 100%{opacity:0.2; transform:translateX(0) scale(1);} } /* MAPS */ .map-stack{ max-width:860px; margin:18px auto 0; display:grid; gap:14px; } .map-card{ margin:0; } .map-heading{ max-width:860px; margin:0 auto 8px; font-size:1.05rem; font-weight:700; } .map-context{ max-width:860px; margin:0 auto 10px; font-size:0.86rem; line-height:1.45; color:#32515f; } .map-frame{ position:relative; height:240px; border-radius:14px; overflow:hidden; box-shadow:0 8px 20px rgba(0,0,0,0.16); } /* Fallback switch: add `no-map-context` to to hide map helper texts. */ body.no-map-context .map-context{ display:none; } .map-frame iframe{ width:100%; height:100%; border:none; display:block; } .external-placeholder{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:20px; background:linear-gradient(145deg,rgba(12,24,31,0.88),rgba(18,40,49,0.82)); color:#f1f7fb; font-size:0.9rem; font-weight:600; line-height:1.45; pointer-events:none; transition:opacity .25s ease, visibility .25s ease; } .map-frame.is-enabled .external-placeholder{ opacity:0; visibility:hidden; } .map-open{ position:absolute; right:10px; bottom:10px; background:rgba(17,17,17,0.72); color:#fff; text-decoration:none; padding:6px 10px; border-radius:999px; font-size:0.8rem; font-weight:600; } .map-open:hover{ background:rgba(17,17,17,0.86); } .contact-direct-card{ max-width:980px; margin:16px auto 0; padding:14px 16px; border:1px solid #d6e1e6; border-radius:14px; background:linear-gradient(180deg,#ffffff,#f6fbfd); box-shadow:0 8px 20px rgba(0,0,0,0.06); } .contact-direct-card h3{ font-size:0.95rem; margin:0 0 6px; color:#173744; } .contact-direct-card p{ margin:2px 0; font-size:0.9rem; color:#203640; } .contact-form-head{ max-width:980px; margin:12px auto 0; } .contact-form-wrap{ max-width:980px; margin:12px auto 0; padding:18px; border:1px solid #d6e1e6; border-radius:14px; background:linear-gradient(180deg,#ffffff,#f6fbfd); box-shadow:0 8px 20px rgba(0,0,0,0.06); } .contact-form{ display:grid; gap:12px; } .contact-form label{ font-size:0.88rem; font-weight:600; color:#203640; } .contact-form input, .contact-form textarea{ width:100%; padding:10px 12px; border:1px solid #c6d5dd; border-radius:10px; font:inherit; background:#ffffff; transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease; } .contact-form input::placeholder, .contact-form textarea::placeholder{ color:#7a8f9a; } .contact-form input:focus, .contact-form textarea:focus{ outline:none; border-color:#2a7a92; box-shadow:0 0 0 3px rgba(42,122,146,0.18); background:#fbfeff; } .contact-form textarea{ min-height:150px; resize:vertical; } .source-group{ margin:2px 0 4px; padding:10px 12px; border:1px solid #c6d5dd; border-radius:10px; background:#fff; transition:border-color .2s ease, box-shadow .2s ease; } .source-group:focus-within{ border-color:#2a7a92; box-shadow:0 0 0 3px rgba(42,122,146,0.14); } /* Fallback switch: add `no-form-polish` to to disable enhanced form focus styles. */ body.no-form-polish .contact-form input:focus, body.no-form-polish .contact-form textarea:focus{ border-color:#c6d5dd; box-shadow:none; background:#fff; } body.no-form-polish .source-group:focus-within{ border-color:#c6d5dd; box-shadow:none; } .source-group-label{ margin:0 0 6px; font-size:0.88rem; font-weight:600; color:#203640; } .source-option{ display:flex; align-items:center; gap:8px; font-size:0.86rem; font-weight:500; color:#203640; margin:6px 0; } .source-option input[type="checkbox"]{ width:16px; height:16px; padding:0; margin:0; accent-color:#1f5f73; border:none; } .contact-form button{ justify-self:start; } .contact-form button:disabled{ background:#8fa5b1; cursor:not-allowed; opacity:0.9; } .form-note{ max-width:980px; margin:10px auto 0; font-size:0.78rem; color:#5b6f7a; line-height:1.4; } /* Fallback switch for previous contact layout */ body.no-contact-split .contact-direct-card{ display:none; } body.no-contact-split .contact-form-head{ margin-top:6px; } /* Fallback switch: add `no-rhythm-tune` to to revert spacing fine-tuning quickly. */ body.no-rhythm-tune section:not(#hero){ padding:26px 24px; } body.no-rhythm-tune h2{ margin-bottom:26px; } body.no-rhythm-tune p{ line-height:1.9; margin-bottom:16px; } body.no-rhythm-tune .membership-facts{ margin:14px auto 20px; } body.no-rhythm-tune .map-stack{ margin:22px auto 0; gap:16px; } body.no-rhythm-tune .contact-direct-card{ margin:14px auto 0; } body.no-rhythm-tune .contact-form-head{ margin:14px auto 0; } body.no-rhythm-tune .contact-form-wrap{ margin:18px auto 0; } .cookie-consent{ position:fixed; left:0; right:0; bottom:0; z-index:1200; padding:14px; display:none; } .cookie-consent.show{ display:block; } .cookie-consent-inner{ max-width:980px; margin:0 auto; background:rgba(10,20,27,0.95); border:1px solid rgba(255,255,255,0.2); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border-radius:16px; box-shadow:0 12px 36px rgba(0,0,0,0.35); padding:12px 14px; display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; } .cookie-consent-icon{ width:106px; height:106px; object-fit:contain; border-radius:0; border:none; background:transparent; padding:0; box-shadow:none; } .cookie-consent-text h3{ margin:0; font-size:0.95rem; font-weight:800; color:#f3f7fb; } .cookie-consent-text p{ margin:4px 0 0; font-size:0.83rem; line-height:1.45; color:#d8e5ee; } .cookie-consent-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; } /* ACCORDION */ .accordion-btn{ width:100%; padding:20px; text-align:left; background:#f5f5f5; border:none; font-weight:600; cursor:pointer; margin-top:10px; } .accordion-content{ max-height:0; overflow:hidden; transition:0.4s ease; padding:0 10px; } footer{ background:#111; color:white; padding:60px 8%; text-align:center; font-size:0.88rem; } .footer-sep{ display:inline-block; margin:0 8px; opacity:0.55; } .footer-cookie-link{ color:#d9eff9; text-decoration:underline; text-underline-offset:2px; } .footer-cookie-link:hover{ color:#ffffff; } /* RESPONSIVE */ @media(max-width:900px){ nav{ background:rgba(255,255,255,0.99); backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:0 8px 20px rgba(0,0,0,0.12); } nav .logo{ font-size:0.8rem; letter-spacing:0.5px; } nav .menu{display:none;} .burger{display:flex;} .burger div{background:#0f2430;} .mobile-menu{ width:62%; max-width:290px; background:#ffffff; box-shadow:-12px 0 28px rgba(0,0,0,0.22); padding:84px 22px 22px; gap:16px; } .mobile-menu a{ color:#0f2430; font-weight:600; font-size:0.84rem; line-height:1.25; padding:8px 0; display:block; } .easteregg-trigger{ font-size:0.95em; } .split-headline{font-size:1.78rem;letter-spacing:-0.5px;} .hero-sub{font-size:0.88rem;} h2{font-size:1.82rem;} p{font-size:0.86rem;line-height:1.56;} .hero-logo{ width:136px; right:2%; opacity:0.28; top:28%; } .hero-inner{ max-width:92%; } section:not(#hero){padding:20px 20px;} .carousel-track{height:360px;} .gallery-carousel{max-width:100%;} .carousel-slide{width:88%;} .carousel-slide.prev{transform:translate(-95%,0) scale(0.88);} .carousel-slide.next{transform:translate(-5%,0) scale(0.88);} .lightbox-figure{width:94vw;height:min(74vh,560px);} .lightbox-slide{width:88%;} .lightbox-slide.prev{transform:translate(-95%,0) scale(0.88);} .lightbox-slide.next{transform:translate(-5%,0) scale(0.88);} .lightbox-nav.prev{left:14px;} .lightbox-nav.next{right:14px;} .lightbox-close{top:12px;right:12px;} .lightbox-close{ position:fixed; top:max(12px, env(safe-area-inset-top)); right:max(12px, env(safe-area-inset-right)); } .target-grid{grid-template-columns:1fr;} .clubhouse-card{min-height:280px;} .target-overlay{ padding:16px 14px; } .target-overlay h3{ font-size:0.86rem; } .target-overlay p{ font-size:0.77rem; line-height:1.35; } .join-intro{font-size:0.88rem;} .membership-facts{ padding:12px 12px; margin:10px auto 14px; } .membership-facts-grid{ grid-template-columns:1fr; } .membership-facts h3{ font-size:0.92rem; } .membership-fact-value{ font-size:1.04rem; } .membership-fact-label{ font-size:0.78rem; } .membership-fairness{ font-size:0.78rem; } .fish-name{font-size:0.78rem;} .carousel-slide figcaption{font-size:0.76rem;} .lightbox-slide figcaption{font-size:0.76rem;} .carousel-nav{ width:40px; height:40px; font-size:1.15rem; background:rgba(15,39,48,0.44); border:1px solid rgba(170,182,191,0.9); color:#fff; z-index:9; } .carousel-nav.prev{left:8px;} .carousel-nav.next{right:8px;} .lightbox-nav{ width:42px; height:42px; font-size:1.18rem; background:rgba(15,39,48,0.44); border:1px solid rgba(170,182,191,0.9); z-index:9; } .lightbox-nav.prev{left:10px;} .lightbox-nav.next{right:10px;} .carousel-dot{ width:12px; height:12px; } .map-stack{gap:14px;} .map-frame{height:210px;} .easteregg-dialog{ width:min(96vw,420px); } .easteregg-close{ width:38px; height:38px; } .busch-sticker{ width:min(68vw,238px); } .easteregg-credit{ font-size:0.86rem; } .easteregg-signature{ font-size:0.8rem; } .cookie-consent{ padding:10px; } .cookie-consent-inner{ grid-template-columns:1fr; text-align:left; } .cookie-consent-icon{ width:86px; height:86px; } .cookie-consent-actions{ justify-content:flex-start; } } @media(max-width:600px){ nav{ padding:14px 5%; } nav .logo img{ width:24px; height:24px; } .mobile-menu{ width:72%; max-width:270px; padding:76px 16px 18px; gap:12px; } section:not(#hero){ padding:16px 16px; } .split-headline{ font-size:1.58rem; } h2{ font-size:1.62rem; margin-bottom:18px; } p{ font-size:0.82rem; } .carousel-track{ height:330px; } } @media(hover:none){ .target-card:hover img{ transform:scale(1); } } @media (prefers-reduced-motion: reduce){ .hero-kenburns-layer{ animation:none; transform:scale(1.04) translate3d(0,0,0); transition:none; } } /* THANK YOU PAGE */ body.thanks-page{ background:linear-gradient(180deg, #edf4f7 0%, #dce8ed 100%); overflow-x:hidden; } .thanks-wrap{ min-height:100vh; padding:132px 24px 48px; display:flex; align-items:flex-start; justify-content:center; } .thanks-card{ max-width:760px; width:100%; background:#fff; border:1px solid #d3e1e8; border-radius:20px; box-shadow:0 14px 34px rgba(0,0,0,0.12); padding:34px 28px; text-align:center; } .thanks-logo{ width:96px; height:auto; display:block; margin:0 auto 16px; } .thanks-card h1{ margin:0 0 14px; font-size:2rem; line-height:1.2; } .thanks-card p{ max-width:100%; margin:0 0 14px; line-height:1.65; } .thanks-card a{ color:var(--accent); font-weight:600; text-decoration:none; } .thanks-card a:hover{ text-decoration:underline; } @media (max-width:900px){ .thanks-wrap{ padding-top:112px; } .thanks-card{ padding:26px 20px; border-radius:16px; } .thanks-card h1{ font-size:1.65rem; } }