/* ====== ZMIENNE KOLORÓW ====== */ :root { --color-white: #ffffff; --color-black: #000000; /* przyciski / akcenty */ --button-bg: #c0810b; /* miodowy bursztyn – kontrast ≥ 4.5:1 na białym */ --button-hover:#935f02; /* ciemniejszy na hover */ /* nagłówek (menu) w stanie początkowym – pół-transparentne tło na zdjęciu */ --header-bg: rgba(0,0,0,0.30); /* nagłówek po scrollu – jasne, z wyraźnym kontrastem tekstu */ --header-bg-scrolled: rgba(236,235,222,0.85); --menu-text-scrolled: #2b1c00; /* bardzo ciemny brąz */ --menu-hover-scrolled: #a16a00; /* bursztyn */ /* tekst & hover w stanie bez scrolla */ --menu-text: var(--color-white); --menu-hover: #ffd057; /* jasny bursztyn */ } /* po dodaniu klasy `.scrolled` na zmieniamy zmienne */ body.scrolled{ --header-bg: var(--header-bg-scrolled); --menu-text: var(--menu-text-scrolled); --menu-hover: var(--menu-hover-scrolled); } /* ====== NAGŁÓWEK (MENU) ====== */ header { position: sticky; top: 0; left: 0; height: 80px; width: 100%; padding: 0 2rem; box-sizing: border-box; min-width: 280px; display: flex; justify-content: space-between; align-items: center; background-color: var(--header-bg); backdrop-filter: blur(5px); z-index: 10; font-family: 'Montserrat', sans-serif; transition: background-color 0.3s ease; } body.scrolled { --header-bg: var(--header-bg-scrolled); --menu-text: var(--menu-text-scrolled); --menu-hover: var(--menu-hover-scrolled); } /* Logo */ .logo { font-size: 2rem; font-weight: 600; color: var(--menu-text); text-shadow: none; } h1{ font-size:2rem; } /* Menu główne */ .menu { list-style: none; display: flex; gap: 30px; margin: 0; padding: 0; box-sizing: border-box; } main{ margin-top:-80px; } /* Linki w menu */ .menu li a { color: var(--menu-text); text-decoration: none; font-weight: 500; font-size: 1.2rem; letter-spacing: 0.5px; transition: color 0.3s ease; } .menu li a:hover { color: var(--menu-hover); } .menu a.active { color: var(--menu-hover); } /* Przycisk hamburgera */ #hamburger { display: none; font-size: 2rem; background: none; border: none; color: var(--menu-text); cursor: pointer; } .logo img { max-width: 100%; height: 70px; display: block; } @media (max-width: 1110px) { .menu { gap: 20px; } .menu li a { font-size: 0.9rem; padding: 4px 6px; } .logo { font-size: 1rem; } .logo img { max-width: 100%; height: 65px; display: block; } } /* ====== MOBILNE MENU ====== */ @media (max-width: 768px) { .menu { flex-direction: column; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100vh; padding: 80px 20px; /* Dodany padding, aby odsunąć menu od góry np. od hamburgera */ background-color: #D0A25F; transform: translateY(-100%); opacity: 0; transition: transform 0.4s ease, opacity 0.4s ease; pointer-events: none; display: flex; overflow-y: auto; /* Dodano przewijanie w pionie, jeśli menu się nie mieści */ z-index: 1001; } .menu.show { transform: translateY(0); opacity: 1; pointer-events: auto; } .menu li { margin: 4px 0; } .menu li a { padding: 6px 10px; font-size: 1rem; margin-bottom: 10px; color: #2e1f03; } .menu a.active { color: #b06f00; } #hamburger { display: block; z-index: 1002; /* wyżej niż menu */ } }