/* ===================================================================== ŻŁOBEK DZWONECZEK – WSPÓLNY MOTYW (jeden plik dla całej strony) --------------------------------------------------------------------- Ten plik jest ładowany jako OSTATNI w każdej podstrony, więc stanowi pojedyncze źródło prawdy dla kolorystyki (niebieski + złoto). Dzięki temu paleta jest spójna na wszystkich stronach — kolor zmieniasz tylko tutaj, w jednym miejscu. ===================================================================== */ :root { /* Paleta: chłodny niebieski + ciepłe złoto */ --green: #0D6DBA; /* główny niebieski */ --green-dark: #0A4A7A; /* granat */ --green-light: #B8D7F4; /* jasny błękit */ --green-pale: #EAF4FF; /* bardzo jasny błękit */ --green-cta: #094B81; /* niebieski CTA */ --gold: #F5C842; --gold-dark: #C9970A; --gold-light: #FDF3C0; --gold-pale: #FFFBEA; --purple: #C084FC; --pink: #F9A8D4; --blue: #7DD3FC; --bg: #FFFCF8; --bg-alt: #FFF5EE; --text: #1E1714; --text-mid: #4D3527; --text-soft: #8A6858; --white: #FFFFFF; } /* --- Akcenty / etykiety --- */ .section-label { background: rgba(255,244,211,0.45); border-color: rgba(255,225,140,0.45); color: var(--green-dark); } .liq::after { background: linear-gradient(135deg, rgba(13,109,186,0.38), rgba(245,200,66,0.28), rgba(192,132,252,0.22), rgba(125,211,252,0.2)); } /* --- Przyciski (niebieskie) --- */ .btn-primary, .nav-cta, .mob-drawer .mob-cta, .c-icon-green, .gallery-cta-band, .gf-btn.active { background: linear-gradient(135deg, rgba(13,109,186,0.95) 0%, rgba(10,74,122,0.9) 100%) !important; color: #fff !important; border-color: rgba(255,225,140,0.55) !important; box-shadow: 0 8px 28px rgba(13,109,186,0.42), inset 0 1px 0 rgba(255,255,255,0.38), inset 0 -1px 0 rgba(0,0,0,0.14) !important; } .btn-primary:hover, .nav-cta:hover, .mob-drawer .mob-cta:hover, .gf-btn.active:hover { box-shadow: 0 18px 48px rgba(13,109,186,0.55), inset 0 1px 0 rgba(255,255,255,0.45) !important; } .btn-secondary { border-color: rgba(13,109,186,0.42); box-shadow: 0 4px 22px rgba(13,109,186,0.16), inset 0 1px 0 rgba(255,255,255,0.98), inset 0 -1px 0 rgba(0,0,0,0.04); } .btn-secondary:hover { box-shadow: 0 10px 34px rgba(13,109,186,0.28), inset 0 1px 0 rgba(255,255,255,0.98); } /* --- Nawigacja (header) --- */ .nav-links a:hover { color: #0D6DBA; } .nav-links a.nav-active { color: var(--green-dark) !important; border-bottom: 2px solid #0D6DBA !important; padding-bottom: 2px; } .nav-cta.nav-active { border-bottom: 1px solid rgba(255,225,140,0.55) !important; padding-bottom: 10px; } /* --- Menu mobilne --- */ .mob-overlay { background: rgba(15,32,56,0.45); } .mob-drawer a:hover { background: rgba(255,244,211,0.2); color: var(--green-dark); } .mob-drawer a.mob-active { color: var(--green-dark) !important; background: rgba(255,244,211,0.18); } .mob-close { background: rgba(255,244,211,0.3); border-color: rgba(13,109,186,0.4); } .mob-close:hover { background: rgba(255,244,211,0.55); } /* --- Galeria: filtry --- */ .gf-btn { border-color: rgba(13,109,186,0.2); } .gf-btn:hover { border-color: rgba(13,109,186,0.55); color: var(--green-dark); background: rgba(255,244,211,0.85); } /* --- Stopka --- */ .footer-social a:hover { background: rgba(13,109,186,0.25); border-color: rgba(13,109,186,0.5); } .footer-col ul li a:hover { color: var(--green-light); } .footer-contact-item svg { stroke: var(--green-light); } /* --- Muzyka w tle (przycisk) --- */ .audio-mute-btn:hover { background: linear-gradient(135deg, rgba(13,109,186,0.9), rgba(10,74,122,0.88)); } .audio-mute-btn.muted { background: linear-gradient(135deg, rgba(16,58,101,0.85), rgba(20,74,122,0.82)); } /* --- Tła kafelków zdjęć --- */ .gallery-item, .gi-bg { background: var(--gold-pale); } /* --- Galeria + certyfikaty: bez podpisów na zdjęciach, tylko ikona lupy (jak w podziękowaniach) --- */ .gi-overlay, .cg-item-overlay, .lb-caption { display: none !important; } .gallery-item, .cg-item { position: relative; } .gallery-item::after, .cg-item::after { content: "🔍"; position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; background: rgba(13,109,186,0.85); color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.2); opacity: 0; transform: scale(0.6); transition: opacity 0.28s ease, transform 0.28s ease; pointer-events: none; z-index: 4; } .gallery-item:hover::after, .cg-item:hover::after { opacity: 1; transform: scale(1); } /* ===================================================================== BANER COOKIES (wspólny dla wszystkich podstron) ===================================================================== */ .cookie-banner { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 2000; width: min(800px, calc(100vw - 48px)); background: rgba(24,16,12,0.92); backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); border: 1px solid rgba(255,255,255,0.12); border-radius: 20px; padding: 18px 24px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; box-shadow: 0 8px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08); transition: opacity 0.35s ease, transform 0.35s ease; } .cookie-banner.dismissed { opacity: 0; transform: translateX(-50%) translateY(14px); pointer-events: none; } .cookie-icon { font-size: 1.5rem; flex-shrink: 0; } .cookie-text { font-size: 0.88rem; color: rgba(255,255,255,0.78); line-height: 1.55; flex: 1; min-width: 200px; } .cookie-text a { color: var(--green-light); text-decoration: underline; transition: color 0.2s; } .cookie-text a:hover { color: white; } .cookie-btns { display: flex; gap: 10px; flex-shrink: 0; } .cookie-btn-more { padding: 9px 20px; border-radius: 50px; cursor: pointer; font-family: 'Nunito', sans-serif; font-size: 0.86rem; font-weight: 700; background: transparent; color: rgba(255,255,255,0.72); border: 1.5px solid rgba(255,255,255,0.22); transition: background 0.2s, border-color 0.2s, color 0.2s; } .cookie-btn-more:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.45); color: white; } .cookie-btn-accept { padding: 9px 22px; border-radius: 50px; cursor: pointer; font-family: 'Nunito', sans-serif; font-size: 0.86rem; font-weight: 700; background: linear-gradient(135deg, rgba(13,109,186,0.95) 0%, rgba(10,74,122,0.9) 100%); color: white; border: 1px solid rgba(255,225,140,0.5); box-shadow: 0 4px 16px rgba(13,109,186,0.4); transition: transform 0.2s, box-shadow 0.2s; } .cookie-btn-accept:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(13,109,186,0.55); } @media (max-width: 600px) { .cookie-banner { bottom: 0; left: 0; right: 0; transform: none; width: 100%; border-radius: 18px 18px 0 0; padding: 16px 18px; gap: 12px; } .cookie-banner.dismissed { transform: translateY(14px); } .cookie-btns { width: 100%; justify-content: flex-end; } }