/* ══════════════════════════════════════════════════════════════════════ madd-nav.css — pasek nawigacji przeniesiony 1:1 z domaai.pl. Ładowany JAKO OSTATNI arkusz na każdej stronie, więc nadpisuje reguły paska z obu systemów wizualnych serwisu (madd-x + madd-nav-legacy na stronie głównej, madd-min + madd-refresh na podstronach). Nic poza paskiem, menu mobilnym i offsetem treści pod paskiem nie dotyka. Co przyjeżdża z domaai.pl: • pasek FIXED i przezroczysty u góry — hero przewija się POD nim, tło + rozmycie + kreska pojawiają się dopiero po `scrollY > 8`, • odnośniki bez „pigułek" (sam tekst, hover rozjaśnia do --nav-fg), • przyciski 38 px: obrysowy (ghost) + pełny (primary), bez gradientów, • kwadratowy przełącznik motywu W PASKU (nie pływający w rogu), • menu mobilne bez fade/staggerów: display none → flex, blokada tła klasą `html.nav-open` (na iOS `body{overflow:hidden}` nie wystarcza). Stare zmienne madd są ZAMKNIĘTE w obrębie paska (ta sama zasada co w madd-nav-legacy.css) — inaczej `--bg` przemalowałoby całą stronę. ══════════════════════════════════════════════════════════════════════ */ :root{ --nav-h:64px } /* Pasek nie zajmuje już miejsca w układzie (fixed), więc wysokość oddajemy treści. Sekcje hero, które mają wchodzić POD pasek, odbierają ją z powrotem ujemnym marginesem (blok „hero pod paskiem" niżej). */ html{ scroll-padding-top:calc(var(--nav-h) + 8px) } body{ padding-top:var(--nav-h) } /* Blokada tła pod otwartym menu. Na iOS sam `overflow:hidden` na nie zatrzymuje przewijania — musi być na . */ html.nav-open, html.nav-open body{ overflow:hidden } /* ── tokeny paska ──────────────────────────────────────────────────── */ .nav, .nav *, .nav-mobile, .nav-mobile *{ --nav-h:64px; --nav-bg:#faf9f5; --nav-fg:#141413; --nav-fg-hover:#35383d; --nav-fg-2:#4a4a46; --nav-fg-3:#73726c; --nav-line:#e0ddd2; --nav-line-soft:#eceadf; --nav-soft:#f0eee6; --nav-accent:#9838c0; --nav-accent-wash:#f5edf9; --nav-r:8px; --nav-ease:cubic-bezier(.22,.61,.36,1); } html[data-wh-theme="dark"] .nav, html[data-wh-theme="dark"] .nav *, html[data-wh-theme="dark"] .nav-mobile, html[data-wh-theme="dark"] .nav-mobile *{ --nav-bg:#0b0a0e; --nav-fg:#f2f3f5; --nav-fg-hover:#dcdee3; --nav-fg-2:#c3c6cc; --nav-fg-3:#9aa0a8; --nav-line:#26252f; --nav-line-soft:#1e1d26; --nav-soft:#191822; --nav-accent:#c07ae0; --nav-accent-wash:#1c1424; } /* ── pasek ─────────────────────────────────────────────────────────── */ /* fixed, NIE sticky: tło hero (mesh) ma wchodzić pod pasek, a przezroczysty pasek u góry ma pokazywać hero, nie białe tło strony. Przy okazji znika hack `.nav-fixed` — sticky łamało się pod `body{overflow:hidden}`. */ .nav{ position:fixed; top:0; left:0; right:0; z-index:60; height:var(--nav-h); background:transparent; border-bottom:1px solid transparent; box-shadow:none; transform:none; transition:background-color .28s ease, border-color .28s ease, -webkit-backdrop-filter .28s ease, backdrop-filter .28s ease; } .nav.is-scrolled, html.nav-open .nav{ background:color-mix(in srgb, var(--nav-bg) 88%, transparent); /* Prefiks jest OBOWIĄZKOWY dla Safari (iOS) — bez niego rozmycie nie działa, a tło jest w 88% przezroczyste, więc treść przebija przez pasek. */ -webkit-backdrop-filter:saturate(180%) blur(12px); backdrop-filter:saturate(180%) blur(12px); border-bottom-color:var(--nav-line); box-shadow:none; } @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .nav.is-scrolled, html.nav-open .nav{ background:var(--nav-bg) } } .nav .nav-inner{ height:var(--nav-h); display:flex; align-items:center; gap:28px; min-width:0 } .nav .nav-brand{ display:flex; align-items:center; gap:9px; font-weight:600; font-size:1rem; letter-spacing:-.02em; color:var(--nav-fg); } .nav .nav-brand img{ width:24px; height:24px; object-fit:contain; transition:none } .nav .nav-brand span{ white-space:nowrap } .nav .nav-links{ display:flex; align-items:center; gap:24px; margin-left:6px; margin-right:0 } .nav .nav-link{ padding:0; border-radius:0; background:none; font-size:.875rem; font-weight:400; white-space:nowrap; color:var(--nav-fg-2); transition:color .15s; } .nav .nav-link:hover{ color:var(--nav-fg); background:none } .nav .nav-link[aria-current="page"]{ color:var(--nav-fg) } .nav .nav-cta{ margin-left:auto; display:flex; align-items:center; gap:10px } /* Kwadratowe ikony (motyw, język) idą przed przyciskami — jak na domaai.pl, gdzie przełącznik motywu otwiera prawą grupę. Kolejność robi `order`, żeby nie ruszać znaczników w 46 szablonach. */ .nav .nav-cta .theme-btn{ order:-2 } .nav .nav-cta .lang-pill{ order:-1 } /* ── przyciski w pasku ─────────────────────────────────────────────── */ .nav .nav-cta .btn{ height:38px; padding:0 15px; display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid transparent; border-radius:var(--nav-r); font-size:.875rem; font-weight:500; line-height:1; white-space:nowrap; /* Napisy są rozbite na + goły tekst („Otwórz " + „DomaAI Web"). Flex robi z nich osobne elementy i UCINA spację na końcu spana, więc odstęp musi dać `gap` — ale wielkości spacji, nie 8 px. */ gap:.25em; box-shadow:none; transition:background .18s var(--nav-ease), border-color .18s var(--nav-ease), color .18s var(--nav-ease), transform .18s var(--nav-ease); } .nav .nav-cta .btn:active{ transform:translateY(1px) } .nav .nav-cta .btn:focus-visible{ outline:2px solid var(--nav-accent); outline-offset:2px } /* „Otwórz DomaAI Web" = przycisk obrysowy (odpowiednik .btn-ghost z domaai.pl). Kasuje gradient, shimmer i cień z madd-nav-legacy.css. */ .nav .nav-cta .btn-web{ background:transparent; background-image:none; animation:none; color:var(--nav-fg); border-color:var(--nav-line); box-shadow:none; font-weight:500; } .nav .nav-cta .btn-web:hover{ background:var(--nav-soft); background-image:none; color:var(--nav-fg); border-color:var(--nav-fg); box-shadow:none; transform:none; } .nav .nav-cta .btn-web::after{ display:none } /* „Wycena projektu" = przycisk pełny (odpowiednik .btn-primary z domaai.pl). */ .nav .nav-cta .btn-grad{ background:var(--nav-fg); background-image:none; color:var(--nav-bg); border-color:var(--nav-fg); box-shadow:none; } .nav .nav-cta .btn-grad:hover{ background:var(--nav-fg-hover); background-image:none; color:var(--nav-bg); border-color:var(--nav-fg-hover); box-shadow:none; transform:none; } /* ── przełącznik motywu i pigułka języka ───────────────────────────── */ /* Oba są kwadratami 38×38 z obrysem, jak przycisk motywu na domaai.pl. */ .nav .theme-btn, .nav .lang-pill-btn{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; padding:0; background:transparent; border:1px solid var(--nav-line); border-radius:var(--nav-r); color:var(--nav-fg); cursor:pointer; transition:border-color .18s var(--nav-ease), background .18s var(--nav-ease); } .nav .theme-btn:hover, .nav .lang-pill-btn:hover{ border-color:var(--nav-fg); background:transparent } .nav .theme-btn svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round } .nav .theme-btn .i-sun{ display:none } html[data-wh-theme="dark"] .nav .theme-btn .i-sun{ display:block } html[data-wh-theme="dark"] .nav .theme-btn .i-moon{ display:none } .nav .lang-pill-btn{ font-size:1rem; line-height:1 } .nav .lang-pill-opts{ background:var(--nav-bg); border:1px solid var(--nav-line); border-radius:var(--nav-r); box-shadow:0 8px 24px rgba(20,20,19,.10); } html[data-wh-theme="dark"] .nav .lang-pill-opts{ box-shadow:0 10px 30px rgba(0,0,0,.6) } .nav .lang-pill-opts .lang-opt{ border-radius:6px } .nav .lang-pill-opts .lang-opt:hover{ background:var(--nav-soft) } .nav .lang-pill-opts .lang-opt.active{ background:var(--nav-accent-wash) } /* ── burger ────────────────────────────────────────────────────────── */ .nav .nav-burger{ display:none; width:38px; height:38px; padding:0; align-items:center; justify-content:center; background:transparent; border:1px solid var(--nav-line); border-radius:var(--nav-r); color:var(--nav-fg); cursor:pointer; transition:border-color .18s var(--nav-ease); } .nav .nav-burger:hover{ background:transparent; border-color:var(--nav-fg) } .nav .nav-burger svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; display:block } .nav .nav-burger .icon-x{ display:none } .nav .nav-burger[aria-expanded="true"] .icon-menu{ display:none } .nav .nav-burger[aria-expanded="true"] .icon-x{ display:block } /* Punkt łamania jak na domaai.pl: 980 px. Poniżej linki idą do menu, w pasku zostaje przycisk główny („Wycena projektu"), a obrysowy („Otwórz DomaAI Web") czeka w menu — inaczej `white-space:nowrap` rozpycha pasek i burger ucieka poza ekran. */ @media (max-width:980px){ .nav .nav-links{ display:none } .nav .nav-burger{ display:flex } .nav .nav-inner{ gap:12px } .nav .nav-cta{ gap:8px } .nav .nav-cta .btn-web{ display:none !important } /* Selektor 1:1 jak w madd-nav-legacy.css (`header.nav .nav-cta > .btn-grad`), bo tamten ma `!important` — przy równej wadze wygrywa późniejszy arkusz. */ header.nav .nav-cta > .btn-grad{ display:inline-flex !important; padding:0 13px } .nav .nav-cta .nav-btn-suffix{ display:none } } /* Najwęższe telefony (320–400 px): nie mieści się już nawet przycisk główny. */ @media (max-width:400px){ .nav .nav-cta .btn{ display:none !important } } /* ── menu mobilne ──────────────────────────────────────────────────── */ .nav-mobile{ position:fixed; inset:var(--nav-h) 0 auto 0; z-index:55; display:none; flex-direction:column; padding:16px 24px 26px; padding-bottom:calc(26px + env(safe-area-inset-bottom)); background:var(--nav-bg); border-bottom:1px solid var(--nav-line); box-shadow:none; /* dvh, nie vh — na iOS `100vh` liczy się bez paska adresu, więc dół menu chował się pod interfejsem przeglądarki. Fallback dla starszych silników. */ max-height:calc(100vh - var(--nav-h)); max-height:calc(100dvh - var(--nav-h)); overflow:auto; overscroll-behavior:contain; opacity:1; visibility:visible; pointer-events:auto; transition:none; will-change:auto; } .nav-mobile.open{ display:flex; opacity:1; visibility:visible; pointer-events:auto } /* Kasuje fade + stagger pozycji z poprzedniej wersji — na domaai.pl menu po prostu jest albo go nie ma. */ .nav-mobile > *{ opacity:1; transform:none; transition:none } .nav-mobile > a:not(.btn){ display:block; padding:12px 0; font-size:1rem; font-weight:400; color:var(--nav-fg); background:none; border:0; border-bottom:1px solid var(--nav-line-soft); } .nav-mobile > a:not(.btn):hover{ background:none; color:var(--nav-fg) } .nav-mobile > a:not(.btn):first-child{ border-top:0 } .nav-mobile .nav-mobile-cta{ display:flex; flex-direction:column; gap:10px; margin:20px 0 0; padding:0; } .nav-mobile .nav-mobile-cta .btn{ width:100%; flex:none; height:46px; padding:0 22px; display:inline-flex; align-items:center; justify-content:center; border:1px solid transparent; border-radius:var(--nav-r); font-size:.9375rem; font-weight:500; line-height:1; box-shadow:none; } .nav-mobile .nav-mobile-cta .btn-web{ background:transparent; background-image:none; animation:none; color:var(--nav-fg); border-color:var(--nav-line); box-shadow:none; } .nav-mobile .nav-mobile-cta .btn-web::after{ display:none } .nav-mobile .nav-mobile-cta .btn-web:hover{ background:var(--nav-soft); color:var(--nav-fg); border-color:var(--nav-fg); box-shadow:none; } .nav-mobile .nav-mobile-cta .btn-grad{ background:var(--nav-fg); background-image:none; color:var(--nav-bg); border-color:var(--nav-fg); box-shadow:none; } .nav-mobile .nav-mobile-cta .btn-grad:hover{ background:var(--nav-fg-hover); color:var(--nav-bg); border-color:var(--nav-fg-hover); box-shadow:none; } /* Sekcja języka w menu (madd.im nie ma jej na domaai.pl — zostaje, tylko dostraja się kolorami do reszty menu). */ .nav-mobile .nav-mobile-lang-section{ padding:18px 0 0 } .nav-mobile .nml-lang-toggle{ background:transparent; border:1px solid var(--nav-line); border-radius:var(--nav-r); color:var(--nav-fg); font-weight:500; } .nav-mobile .nml-lang-toggle:hover{ border-color:var(--nav-fg) } .nav-mobile .nav-mobile-langs .lang-opt{ background:transparent; border:1px solid var(--nav-line); border-radius:var(--nav-r); color:var(--nav-fg-2); } .nav-mobile .nav-mobile-langs .lang-opt:hover{ background:var(--nav-soft); color:var(--nav-fg) } .nav-mobile .nav-mobile-langs .lang-opt.active{ background:var(--nav-accent-wash); border-color:var(--nav-accent); color:var(--nav-accent); } /* Przyciemnienie tła pod menu znika — domaai.pl go nie ma, a menu i tak blokuje przewijanie. */ .nav-overlay{ display:none !important } /* Pływający przełącznik motywu w rogu też znika: jego miejsce jest w pasku. */ .wh-theme{ display:none !important } /* ── hero pod paskiem ──────────────────────────────────────────────── */ /* Pasek jest fixed, a `body` dostał padding-top. Sekcje hero z własnym tłem (mesh, zdjęcie, poświata) odbierają tę wysokość ujemnym marginesem i oddają ją w padding-top, więc TREŚĆ hero nie drga ani o piksel, a tło przewija się pod przezroczystym paskiem — dokładnie jak na domaai.pl. */ main > .hero, main > .wh-hero, main > [data-hero].mesh-host{ margin-top:calc(-1 * var(--nav-h)) } /* Wartości bazowe = te same, co w arkuszach stron; dokładamy tylko --nav-h. */ main > .hero{ padding-top:calc(var(--nav-h) + clamp(84px,10vw,120px)) } main > .hero.mesh-host{ padding-top:calc(var(--nav-h) + clamp(88px,13vh,150px)) } main > .hero.hero-plain.mesh-host{ padding-top:calc(var(--nav-h) + clamp(84px,10vw,120px)) } main > .page-hero.mesh-host, main > .df-hero.mesh-host{ padding-top:calc(var(--nav-h) + 88px) } @media (max-width:820px){ main > .page-hero.mesh-host, main > .df-hero.mesh-host{ padding-top:calc(var(--nav-h) + 56px) } main > .hero{ padding-top:calc(var(--nav-h) + 56px) } main > .hero.mesh-host{ padding-top:calc(var(--nav-h) + 64px) } main > .hero.hero-plain.mesh-host{ padding-top:calc(var(--nav-h) + 56px) } } /* Podnawigacja podstron wisi pod paskiem — zostaje na swoim miejscu, tylko przestaje zależeć od `.nav-fixed`, którego już nie ma. */ .nav.is-scrolled + .subnav{ /* reguły tła zostają w madd-refresh.css */ } /* ── zwijanie wordmarku przy przewijaniu ───────────────────────────── */ /* Skrypt (nav-brand.js / madd-nav.js) rozbija napis na z własną szerokością w --w i przy przewijaniu w dół dokłada .brand-min. Litery znikają PO KOLEI od lewej (opóźnienia rosną), a wracają od prawej (opóźnienia malejąco) — dzięki temu ruch czyta się jak zwijanie, a nie jak zniknięcie całego słowa. */ .nav .nav-brand{ transition:gap .3s ease } /* Litery to inline-block, więc bez tego span rósł do wysokości wiersza (line-height 1,65) i napis jechał ~3 px NAD środkiem znaku. */ .nav .nav-brand span{ display:inline-flex; align-items:center; line-height:1; white-space:nowrap } .nav .nav-brand span i{ display:inline-block; font-style:normal; line-height:1; max-width:var(--w, 2ch); opacity:1; overflow:hidden; transition:max-width .2s ease, opacity .16s ease, transform .2s ease; } .nav .nav-brand span i:nth-child(1){ transition-delay:0s } .nav .nav-brand span i:nth-child(2){ transition-delay:.04s } .nav .nav-brand span i:nth-child(3){ transition-delay:.08s } .nav .nav-brand span i:nth-child(4){ transition-delay:.12s } .nav .nav-brand span i:nth-child(5){ transition-delay:.16s } .nav .nav-brand span i:nth-child(6){ transition-delay:.2s } .nav .nav-brand span i:nth-child(7){ transition-delay:.24s } .nav .nav-brand span i:nth-child(8){ transition-delay:.28s } .nav.brand-min .nav-brand{ gap:0; transition-delay:.14s } .nav.brand-min .nav-brand span i{ max-width:0; opacity:0; transform:translateX(3px) } .nav.brand-min .nav-brand span i:nth-child(1){ transition-delay:.28s } .nav.brand-min .nav-brand span i:nth-child(2){ transition-delay:.24s } .nav.brand-min .nav-brand span i:nth-child(3){ transition-delay:.2s } .nav.brand-min .nav-brand span i:nth-child(4){ transition-delay:.16s } .nav.brand-min .nav-brand span i:nth-child(5){ transition-delay:.12s } .nav.brand-min .nav-brand span i:nth-child(6){ transition-delay:.08s } .nav.brand-min .nav-brand span i:nth-child(7){ transition-delay:.04s } .nav.brand-min .nav-brand span i:nth-child(8){ transition-delay:0s } @media (prefers-reduced-motion: reduce){ .nav .nav-brand, .nav .nav-brand span i{ transition:none } .nav.brand-min .nav-brand span i{ max-width:var(--w, 2ch); opacity:1; transform:none } }