diff --git a/assets/site.css b/assets/site.css index 76ee547..e487306 100644 --- a/assets/site.css +++ b/assets/site.css @@ -33,36 +33,49 @@ h1, h2, h3 { font-weight: 400; line-height: 1.05; letter-spacing: -.025em; margi p { margin: 0; } svg { flex: none; } -/* ===== Header ===== */ +/* ===== Header: Logo und Menü als zwei schwebende Elemente ===== */ .site-header { position: sticky; top: 0; z-index: 50; - background: color-mix(in srgb, var(--bg) 90%, transparent); - backdrop-filter: blur(14px); - -webkit-backdrop-filter: blur(14px); + pointer-events: none; /* Fläche zwischen Logo und Menü bleibt klickbar */ } .header-inner { display: flex; align-items: center; gap: 24px; height: 88px; padding: 0 var(--pad); } -.brand { display: inline-flex; align-items: center; } -.brand img { width: 84px; height: 84px; transition: transform .5s var(--ease); } +.brand, .nav, .burger { + pointer-events: auto; + background: color-mix(in srgb, var(--bg) 90%, transparent); + backdrop-filter: blur(14px); + -webkit-backdrop-filter: blur(14px); + box-shadow: 0 10px 30px rgba(25, 66, 66, .12); +} +.brand { + width: 72px; height: 72px; + border-radius: 50%; + display: grid; place-items: center; +} +.brand img { width: 68px; height: 68px; transition: transform .5s var(--ease); } .brand:hover img { transform: rotate(-6deg); } -.nav { display: flex; gap: 4px; margin-left: auto; } +.nav { + display: flex; gap: 4px; + margin-left: auto; + padding: 8px; + border-radius: var(--radius); +} .nav a { - padding: 10px 16px; - border-radius: 999px; + padding: 12px 20px; + border-radius: 14px; font-size: 1.05rem; transition: background .25s var(--ease); } .nav a:hover, .nav a[aria-current="page"] { background: var(--sage-soft); } .burger { display: none; - width: 52px; height: 52px; + width: 60px; height: 60px; margin-left: auto; - border: 1px solid var(--line); + border: 0; border-radius: 50%; - background: transparent; color: var(--ink); cursor: pointer; place-items: center; @@ -72,7 +85,7 @@ svg { flex: none; } /* Startseite: Header erst nach dem Hero einblenden */ .is-home .site-header { position: fixed; left: 0; right: 0; - transform: translateY(-100%); + transform: translateY(-120%); transition: transform .45s var(--ease); } .is-home.scrolled .site-header, .is-home.menu-open .site-header { transform: none; } @@ -454,10 +467,9 @@ a.panel:hover .panel-arrow svg { transform: rotate(-45deg); } .burger { display: grid; } .menu-open .nav { display: flex; flex-direction: column; gap: 4px; - position: fixed; top: 88px; left: 0; right: 0; - padding: 16px var(--pad) 28px; + position: fixed; top: 88px; left: var(--pad); right: var(--pad); + padding: 10px; background: var(--bg); - box-shadow: 0 24px 40px rgba(25, 66, 66, .12); } .menu-open .nav a { padding: 16px 18px; font-size: 1.35rem; } .row, .row--3, .row--wide, .row--wide-r { grid-template-columns: 1fr; } @@ -470,7 +482,9 @@ a.panel:hover .panel-arrow svg { transform: rotate(-45deg); } @media (max-width: 767px) { body { font-size: 18px; } .header-inner { height: 76px; } - .brand img { width: 70px; height: 70px; } + .brand { width: 62px; height: 62px; } + .brand img { width: 58px; height: 58px; } + .burger { width: 54px; height: 54px; } .menu-open .nav { top: 76px; } .hero { height: auto; min-height: 0; display: block; padding: 0 16px 16px; } .tiles { grid-template-columns: 1fr; grid-template-rows: none; gap: 12px; }