/* still yes — header + mobile drawer Layered on top of the default .topnav rules in base.css. Universal look (all pages): - Brand "still yes." in serif, dot in accent - Nav: Inter 12, uppercase, wide tracking - CTA "ANFRAGEN" button: transparent, ink outline, accent fill on hover Startseite variant (overlay over hero): - Activates via - Position: fixed (sits over hero image) Mobile (<820px): - Inline nav links hidden - Hamburger button shown - Tapping hamburger opens full-screen drawer (.nav-drawer.is-open) */ /* === Universal topnav layout (every page) ====================== */ .topnav .inner{ justify-content:flex-start; gap:0; } .topnav-links{ display:flex; gap:32px; margin-left:auto; } .topnav-links a{ text-transform:uppercase; letter-spacing:.18em; font-size:12px; font-weight:500; text-decoration:none; color:var(--ink-soft); padding:14px 4px; /* hit-area boost — visual stays slim */ transition:color .2s; } .topnav-links a:hover, .topnav-links a.is-active{ color:var(--ink); } .topnav .btn{ margin-left:32px; padding:14px 22px; /* 44px tall hit area */ font-size:12px; letter-spacing:.18em; text-transform:uppercase; background:transparent; border-color:var(--ink); color:var(--ink); min-height:44px; display:inline-flex; align-items:center; } .topnav .btn:hover{ background:var(--accent); border-color:var(--accent); color:#FDF9F4; transform:none; } /* === Hamburger button (mobile only) ============================ */ .topnav-burger{ display:none; width:44px; height:44px; margin-left:8px; border:0; background:transparent; cursor:pointer; padding:11px 10px; flex-direction:column; justify-content:space-between; align-items:stretch; } .topnav-burger span{ display:block; height:1.5px; background:var(--ink); transition:transform .25s cubic-bezier(.2,.8,.2,1), opacity .15s ease; transform-origin:center; } /* === Mobile drawer (off-canvas, slides from top) =============== */ .nav-drawer{ position:fixed; inset:0; z-index:100; background:var(--bg); opacity:0; pointer-events:none; transform:translateY(-12px); transition:opacity .25s ease, transform .3s cubic-bezier(.2,.8,.2,1); overflow-y:auto; } .nav-drawer.is-open{ opacity:1; pointer-events:auto; transform:translateY(0); } .nav-drawer-close{ position:absolute; top:16px; right:16px; width:44px; height:44px; border:1px solid var(--ink); background:transparent; border-radius:999px; font-size:22px; line-height:1; color:var(--ink); cursor:pointer; display:grid; place-items:center; padding:0; } .nav-drawer-inner{ padding:96px 32px 64px; max-width:540px; margin:0 auto; display:flex; flex-direction:column; gap:28px; } .nav-drawer-links{ display:flex; flex-direction:column; gap:0; border-top:1px solid var(--rule); } .nav-drawer-links a{ font-family:var(--serif); font-weight:400; font-size:32px; line-height:1; color:var(--ink); text-decoration:none; padding:22px 0; border-bottom:1px solid var(--rule); letter-spacing:-.005em; } .nav-drawer-links a.is-active{ color:var(--accent); } .nav-drawer-cta{ align-self:flex-start; display:inline-flex; align-items:center; gap:10px; background:var(--ink); color:#FDF9F4; padding:18px 24px; border-radius:999px; text-decoration:none; font-family:var(--sans); font-size:13px; letter-spacing:.18em; text-transform:uppercase; font-weight:500; min-height:44px; margin-top:8px; } .nav-drawer-contact{ display:flex; flex-direction:column; gap:0; border-top:1px solid var(--rule); padding-top:8px; } .nav-drawer-contact a{ font-family:var(--sans); font-size:15px; color:var(--ink-soft); text-decoration:none; padding:14px 0; border-bottom:1px solid var(--hair); min-height:44px; display:flex; align-items:center; } .nav-drawer-contact a:last-child{ border-bottom:0; } /* Lock body scroll when drawer is open. */ body.drawer-open{ overflow:hidden; } /* Burger → X transition when drawer is open. */ body.drawer-open .topnav-burger span:nth-child(1){ transform:translateY(8px) rotate(45deg); } body.drawer-open .topnav-burger span:nth-child(2){ opacity:0; } body.drawer-open .topnav-burger span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); } /* === Mobile breakpoint ========================================= */ @media (max-width:820px){ .topnav-links{ display:none; } .topnav .btn.topnav-cta{ display:none; } .topnav-burger{ display:flex; margin-left:auto; } } /* === Startseite (home) variant: nav fixed over hero ============ */ body[data-screen-label="Startseite"] .topnav{ position:fixed; top:0; left:0; right:0; z-index:50; background:rgba(253,249,244,.94); backdrop-filter:blur(14px); border-bottom:1px solid var(--rule); }