/* ========================================================================= SprawdźSłuch — system projektowy (jedno źródło prawdy) Paleta: medyczny turkus + zdrowotna zieleń (WCAG-first) Typografia: Figtree (nagłówki) + Noto Sans (treść) — ładowane raz tutaj, dzięki czemu wszystkie strony są spójne (brak duplikatów w ). ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&family=Noto+Sans:wght@400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/icon?family=Material+Icons'); :root { /* --- Skala turkusu (marka / akcja) --- */ --teal-50: #ECFEFF; --teal-100: #CFFAFE; --teal-200: #A5F0FB; --teal-600: #0891B2; --teal-700: #0E7490; --teal-800: #155E75; --teal-900: #134E4A; /* --- Skala zieleni (akcent / sukces) --- */ --green-50: #F0FDF4; --green-100: #DCFCE7; --green-500: #22C55E; --green-600: #16A34A; --green-700: #15803D; --green-800: #166534; /* --- Tokeny semantyczne --- */ /* teal-700 jako kolor podstawowy: tekst/linki na bieli mają ≥4.5:1 (WCAG AA) */ --color-primary: var(--teal-700); /* logo, ikony, linki, akcenty */ --color-primary-btn: var(--teal-700); /* tło przycisków — biały tekst ≥4.5:1 */ --color-primary-hover: var(--teal-800); --color-accent: var(--green-600); /* sukces / cena / „darmowe” */ --color-accent-strong: var(--green-700); /* glify ✓, tekst na jasnym tle */ --color-bg: #F5FBFB; --color-surface: #FFFFFF; --color-surface-alt: #F1F8F8; /* delikatne tło sekcji/komórek */ --color-text: #134E4A; --color-text-muted: #475A6B; /* ≥6:1 na białym i na tle */ --color-border: #D6E3E3; --color-border-strong: #B9CFCF; --color-error: #DC2626; --color-success: #15803D; --color-info: var(--teal-700); /* --- Typografia --- */ --font-heading: 'Figtree', system-ui, sans-serif; --font-body: 'Noto Sans', system-ui, sans-serif; /* --- Promienie --- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 9999px; /* --- Cienie (lekko turkusowy odcień) --- */ --shadow-sm: 0 1px 2px rgba(15, 60, 70, 0.06), 0 1px 3px rgba(15, 60, 70, 0.05); --shadow-md: 0 6px 16px rgba(15, 60, 70, 0.08); --shadow-lg: 0 16px 40px rgba(15, 60, 70, 0.12); /* --- Inne --- */ --maxw: 1280px; --transition: 200ms ease; /* --- Aliasy zgodności (stare nazwy tokenów używane w inline-style) --- */ --primary-blue: var(--color-primary); --secondary-blue: var(--color-primary-hover); --light-blue: var(--teal-100); --accent-green: var(--color-accent); --text-dark: var(--color-text); --text-light: var(--color-text-muted); --text-secondary: var(--color-text-muted); --bg-light: var(--color-bg); --gray-500: var(--color-text-muted); --gray-600: var(--color-text-muted); --gray-700: var(--color-text); } /* Reset i konfiguracja bazowa */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: clip; /* zapobiega poziomemu paskowi przy nagłówku/stopce o szer. 100vw (clip nie psuje sticky) */ } body { font-family: var(--font-body); background-color: var(--color-bg); background-image: linear-gradient(180deg, var(--teal-50) 0%, rgba(236, 254, 255, 0) 420px); background-repeat: no-repeat; color: var(--color-text); line-height: 1.6; font-size: 1rem; /* 16px — nigdy nie zmniejszamy poniżej na mobile */ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--color-text); line-height: 1.2; letter-spacing: -0.01em; } img { max-width: 100%; display: block; } a { color: var(--color-primary); } /* Kontener główny */ .container { max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; } /* ========================================================================= Dostępność — fokus, skip-link, redukcja ruchu ========================================================================= */ /* Treść tylko dla czytników ekranu (komunikaty aria-live) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -48px; left: 0; background: var(--color-primary-btn); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--radius-sm) 0; z-index: 2000; transition: top var(--transition); } .skip-link:focus { top: 0; } :focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* ========================================================================= Przyciski ========================================================================= */ .btn-primary, .btn-submit { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background-color: var(--color-primary-btn); color: #fff; padding: 0.875rem 2.25rem; border-radius: var(--radius-pill); font-family: var(--font-heading); font-weight: 600; font-size: 1.0625rem; line-height: 1.2; min-height: 48px; /* cel dotykowy ≥44px */ border: none; cursor: pointer; text-decoration: none; transition: background-color var(--transition), transform var(--transition), box-shadow var(--transition); box-shadow: var(--shadow-sm); } .btn-primary:hover, .btn-submit:hover:not(:disabled) { background-color: var(--color-primary-hover); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-primary:disabled, .btn-submit:disabled { background-color: #B6C6C6; cursor: not-allowed; transform: none; box-shadow: none; } .btn-secondary { display: inline-flex; align-items: center; justify-content: center; background-color: transparent; color: var(--color-primary-btn); border: 2px solid var(--color-primary-btn); padding: 0.75rem 2rem; border-radius: var(--radius-pill); font-family: var(--font-heading); font-weight: 600; min-height: 48px; cursor: pointer; transition: background-color var(--transition), color var(--transition); } .btn-secondary:hover { background-color: var(--color-primary-btn); color: #fff; } /* Przyciski w oknie potwierdzenia wyjścia */ .btn-confirm, .btn-cancel { flex: 1; border-radius: var(--radius-pill); padding: 0.75rem 1rem; font-family: var(--font-heading); font-size: 0.9375rem; font-weight: 600; min-height: 44px; cursor: pointer; transition: background-color var(--transition), color var(--transition); border: 2px solid var(--color-primary-btn); } .btn-confirm { background-color: transparent; color: var(--color-primary-btn); } .btn-confirm:hover { background-color: var(--color-primary-hover); border-color: var(--color-primary-hover); color: #fff; } .btn-cancel { background-color: var(--color-primary-btn); color: #fff; } .btn-cancel:hover { background-color: var(--color-primary-hover); border-color: var(--color-primary-hover); } /* ========================================================================= Nagłówek + nawigacja ========================================================================= */ header { position: sticky; top: 0; z-index: 1000; /* Pełna szerokość okna — wybicie z wąskiego .container, inaczej tło prześwituje po bokach */ width: 100vw; margin-left: calc(50% - 50vw); background-color: rgba(255, 255, 255, 0.9); backdrop-filter: saturate(160%) blur(8px); border-bottom: 1px solid var(--color-border); } .header-inner { max-width: var(--maxw); margin: 0 auto; padding: 0.85rem 1.5rem; display: flex; justify-content: space-between; align-items: center; position: relative; /* punkt zaczepienia dla menu mobilnego */ } .logo { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; color: var(--color-primary); text-decoration: none; } .accent { color: var(--color-accent); } .main-nav { display: none; } .main-nav a { color: var(--color-text-muted); font-weight: 600; text-decoration: none; transition: color var(--transition); } .main-nav a:hover { color: var(--color-primary); } .header-buttons { display: none; } .mobile-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: none; border: none; color: var(--color-text); cursor: pointer; z-index: 1001; } .mobile-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background-color: var(--color-surface); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-lg); padding: 1rem 1.5rem 2rem; z-index: 1000; flex-direction: column; gap: 1.25rem; } .mobile-menu.is-open { display: flex; } .mobile-menu a { color: var(--color-text); font-weight: 600; font-size: 1.1rem; text-decoration: none; text-align: center; padding: 0.5rem; } .mobile-menu .btn-primary { width: 100%; } /* ========================================================================= Pasek promocyjny (announcement bar) — wstrzykiwany przez main.js zaraz pod #main-header. Treść/konfiguracja: PROMO_BANNER_CONFIG w main.js. ========================================================================= */ .promo-banner { width: 100vw; margin-left: calc(50% - 50vw); background: linear-gradient(100deg, var(--teal-800) 0%, var(--teal-700) 55%, var(--green-700) 100%); color: #fff; } .promo-banner__inner { max-width: var(--maxw); margin: 0 auto; padding: 0.7rem 1.5rem; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.5rem 1.5rem; } .promo-banner__message { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.9375rem; line-height: 1.4; } .promo-banner__icon { font-size: 1.15rem; flex-shrink: 0; } .promo-banner__text strong { font-weight: 700; } .promo-banner__deadline { color: rgba(255, 255, 255, 0.85); } .promo-banner__actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } /* CTA banera to