/* ===== Header layout (desktop) ===== */ :root { --header-h: 72px; --logo-h: 56px; --height-logo: 10rem; --hieght-logo-shrinked: 6rem; /* logo height after scroll */ } html { scroll-padding-top: var(--hieght-logo-shrinked); /* keep the scrollbar gutter reserved so overlays that lock body scroll never shift the fixed header */ scrollbar-gutter: stable; /* No overflow-x here. The drawer's off-screen panning is blocked on below, and hiding overflow on makes it a scroll container -- which silently breaks `position: sticky` on every descendant, including the header. That is why the header scrolled away instead of staying: nothing about the header rule was wrong, its containing block had stopped being the viewport. */ } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Arial", sans-serif; line-height: 1.6; color: #333; min-height: 100vh; /* block horizontal panning / edge-swipe so the drawer opens only on click */ overflow-x: hidden; overscroll-behavior-x: none; } header { position: -webkit-sticky; position: sticky; top: 0; z-index: 1000; border-bottom: 1px solid #e2e8f0; /* No backdrop-filter on the header itself. The drawer and its backdrop are markup INSIDE

, and a filtered element becomes the containing block for its position:fixed descendants -- so the menu was anchored to the header instead of the viewport and travelled with it. The frosted bar is painted by ::before below, which keeps the look without the trap. */ } header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, 0.95); backdrop-filter: saturate(1.1) blur(8px); } header .container { display: flex; align-items: center; /* <-- vertical centering */ justify-content: space-between; padding: 0 2rem !important; /* override old nav padding */ transition: min-height 0.25s ease, padding 0.25s ease; } .brand-group { display: flex; align-items: center; gap: 2.5rem; } .logo { height: var(--height-logo); /* control size here */ width: auto; display: block; transition: height 0.25s ease, transform 0.25s ease; transform-origin: left center; } .certificate { height: var(--height-logo); width: auto; transition: height 0.25s ease; padding: 0.5rem 0; } header.shrinked .certificate { height: var(--hieght-logo-shrinked); } nav { display: flex; justify-content: space-between; align-items: center; font-size: 1rem; } /* When scrolled: smaller bar + logo */ header.shrinked img.logo { height: var(--hieght-logo-shrinked); } .nav-links { display: flex; align-items: center; gap: 2.5rem; list-style: none; margin: 0; padding: 0; white-space: nowrap; } .nav-links a { text-decoration: none; color: #333; font-size: 1.35rem; font-weight: 500; padding: 0.5rem 0; transition: all 0.3s ease; position: relative; } /* Hide icons on desktop, show only on mobile burger menu */ .nav-icon { display: none; margin-right: 0.5rem; } .nav-links a:hover { color: #1e40af; transform: translateY(-2px); } .nav-links a::after { content: ""; position: absolute; width: 0; height: 2px; bottom: -5px; left: 0; background: #1e40af; transition: width 0.3s ease; } .nav-links a:hover::after { width: 100%; } /* Burger button (hidden on desktop) */ .burger { display: none; border: 0; background: transparent; cursor: pointer; padding: 8px; } .burger i { font-size: 1.8rem; color: #1e293b; } .burger:focus, .burger:active { outline: none; } .burger:focus i, .burger:active i, .burger:hover i { color: #1e293b; } /* Hide certificate in nav-links on desktop */ .nav-certificate { display: none; } /* ===== Mobile: right drawer ===== */ @media (max-width: 768px) { .burger { display: block; position: relative; z-index: 1002; } /* show burger */ .nav-links { position: fixed; top: 0; right: 0; bottom: 0; width: 55%; /* 100vh on a phone excludes the browser's collapsing address bar, so the drawer runs taller than the screen and its footer -- the certificate -- sits below the fold, unreachable. dvh is the visible height and follows the bar; vh stays as the fallback. */ height: 100vh; height: 100dvh; background: #fff; border-left: 1px solid #e5e7eb; display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 120px 20px 20px; /* space for header + gap from burger icon */ overflow-y: auto; transform: translateX(100%); /* hidden offscreen */ /* not reachable while closed — no edge-swipe / drag can pull it in; only the burger button toggles .nav-open */ visibility: hidden; pointer-events: none; transition: transform 0.3s ease, visibility 0.3s ease; z-index: 1001; } .nav-links li { width: 100%; } .nav-links a { display: block; width: 100%; font-size: 1.05rem; padding: 10px 4px; } /* Show icons in mobile burger menu */ .nav-icon { display: inline; } /* Dim backdrop */ .nav-dim[hidden] { display: none; } .nav-dim { position: fixed; inset: 0; background: rgba(2, 6, 23, 0.45); backdrop-filter: blur(2px); z-index: 1000; /* no height here: inset:0 already pins it to all four viewport edges, whereas 100vh overrides that and runs past the bottom on a phone */ } /* When nav is open (body class set by JS) */ /* The page behind the drawer stays scrollable, as it is on bymico. The drawer and its backdrop are fixed to the viewport, so they hold still while the content moves under them -- no scroll lock needed. */ body.nav-open .nav-links { transform: translateX(0); visibility: visible; pointer-events: auto; } body.nav-open .nav-dim { display: block; } /* Keep logo and burger vertically centered */ header .container { align-items: center; } .nav-right { align-items: center; gap: 1rem; } /* Hide certificate next to logo on mobile */ .brand-group .certificate { display: none; } /* Add spacing to nav items */ .nav-links li:first-child { margin-top: 1rem; } .nav-links li:nth-child(4) { margin-bottom: 1rem; } /* Show certificate after Kontakt */ .nav-certificate { display: block; /* margin-top:auto pushes it to the foot of the drawer's flex column, so it sits at the bottom instead of trailing the last link */ margin-top: auto; width: 100%; text-align: center; padding-top: 2rem; } .nav-certificate img { height: 100px; width: auto; } } .hero { padding: 6rem 0; text-align: center; color: white; background: linear-gradient( 45deg, rgba(30, 58, 138, 0.95), rgba(15, 23, 42, 0.95) ); position: relative; overflow: hidden; } .hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,'); animation: float 20s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } } .hero-content { position: relative; z-index: 2; } .hero h1 { font-size: 3.5rem; margin-bottom: 1rem; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); animation: slideInDown 1s ease-out; } @keyframes slideInDown { from { opacity: 0; transform: translateY(-50px); } to { opacity: 1; transform: translateY(0); } } .hero p { font-size: 1.3rem; margin-bottom: 2rem; animation: slideInUp 1s ease-out 0.3s both; } @keyframes slideInUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } .cta-button { display: inline-block; padding: 1rem 2rem; background: #dc2626; color: white; text-decoration: none; border-radius: 8px; font-weight: bold; font-size: 1.1rem; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); animation: slideInUp 1s ease-out 0.6s both; border: none; cursor: pointer; } .cta-button:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); background: #b91c1c; } .section { padding: 5rem 0; background: white; } /* .container was used by four sections but never actually defined outside the header, so those sections ran edge to edge. It showed worst on the contact card, which pressed flat against the right of the blue panel with nothing but the scrollbar beside it. Scoped to .section so the header keeps its own full-width flex layout. 1400px matches the services grid already here. */ .section .container { max-width: 1400px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); } .section:nth-child(even) { background: #f8fafc; } .section h2 { text-align: center; font-size: 2.5rem; margin-bottom: 3rem; color: #1e40af; position: relative; } .section h2::after { content: ""; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 80px; height: 3px; background: linear-gradient(45deg, #1e40af, #dc2626); border-radius: 2px; } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 3rem; max-width: 1400px; margin-left: auto; margin-right: auto; padding: 0 2rem; } .service-card { background: white; padding: 2rem; border-radius: 15px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; border: 2px solid transparent; position: relative; overflow: hidden; } .service-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(45deg, #1e40af, #dc2626); transform: scaleX(0); transition: transform 0.3s ease; } .service-card:hover::before { transform: scaleX(1); } .service-card:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(30, 64, 175, 0.2); border-color: #1e40af; } .service-icon { font-size: 3rem; margin-bottom: 1rem; color: #1e40af; } .service-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; color: #1e293b; } .service-description { color: #64748b; line-height: 1.6; } .highlight-title { color: #1e40af; font-size: 1.5rem; font-weight: 600; margin-bottom: 0.5rem; } .highlight-description { color: #475569; line-height: 1.6; } .section.contact { background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%); color: white; padding-bottom: 2rem; } .contact-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: flex-start; } .contact-info { padding: 2rem; } .contact-item { display: flex; align-items: center; margin-bottom: 1.5rem; font-size: 1.1rem; } .contact-item i { font-size: 1.5rem; margin-right: 1rem; color: #60a5fa; } .contact-item > a { text-decoration: none; color: white; } .contact-form dardanialabs-mailform { --dardanialabs-accent: #1e40af; --dardanialabs-text: #1e293b; --dardanialabs-bg: #ffffff; --dardanialabs-input-bg: #f8fafc; --dardanialabs-border: #e2e8f0; --dardanialabs-radius: 8px; --dardanialabs-error: #dc2626; --dardanialabs-success: #059669; } footer { background: #0f172a; color: white; text-align: center; padding: 1.5rem 0; } @media (max-width: 768px) { header .container { grid-template-columns: 1fr; /* full width each */ height: auto; row-gap: 10px; padding: 12px 16px; } .hero h1 { font-size: 2.5rem; } .hero p { font-size: 1.1rem; } .services-grid { grid-template-columns: 1fr; } .contact-content { grid-template-columns: 1fr; gap: 2rem; } } .pulse { animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } /* BACKDROP */ .nav-dim[hidden] { display: none; } .nav-dim { position: fixed; inset: 0; background: rgba(2, 6, 23, 0.6); backdrop-filter: blur(4px); z-index: 1000; opacity: 0; transition: opacity 0.3s ease; } body.nav-open .nav-dim { opacity: 1; } /* ===== CERTIFICATE LIGHTBOX ===== */ .certificate, .nav-certificate img { cursor: pointer; transition: transform 0.2s ease, opacity 0.2s ease; } .certificate:hover, .nav-certificate img:hover { opacity: 0.9; transform: scale(1.02); } .lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(8px); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 2rem; animation: fadeIn 0.3s ease; } .lightbox[hidden] { display: none; } .lightbox img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); animation: zoomIn 0.3s ease; } .lightbox-close { position: absolute; top: 1.5rem; right: 1.5rem; background: rgba(255, 255, 255, 0.1); border: none; color: white; font-size: 2.5rem; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; line-height: 1; } .lightbox-close:hover { background: rgba(255, 255, 255, 0.2); transform: scale(1.1); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes zoomIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }