/* ========================================================================= WIDGET KALENDARZA – WARSTWA WIZUALNA Spójny z systemem zmiennych CSS strony (--bg-primary, --bg-alt, --text-primary, --text-alt, --bg-dark, --font-primary) oraz z klasami trybów dostępności ustawianymi na /: .dark, .grayscale, .high-contrast (+ html.high-contrast, html.negative), .light-bg, .underline-links, .no-background ========================================================================= */ :root { --cal-accent: #0161FD; /* akcent z przycisków/ikon serwisu */ --cal-accent-dark: #0B0B30; /* granat bazowy */ --cal-radius: 20px; --cal-radius-sm: 12px; --cal-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.25); --cal-shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.15); --cal-transition: all 0.3s ease; --cal-fab-size: 64px; --cal-gap: 6px; } /* ------------------------------------------------------------------------- 1. FAB (Floating Action Button) – widget w prawym dolnym rogu ------------------------------------------------------------------------- */ #booking-widget { position: fixed; right: clamp(16px, 3vw, 32px); bottom: clamp(16px, 3vw, 32px); z-index: 1050; font-family: var(--font-primary); } .booking-fab { width: var(--cal-fab-size); height: var(--cal-fab-size); border-radius: 50%; background: var(--cal-accent); color: #ffffff; border: none; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(1, 97, 253, 0.45); cursor: pointer; transition: var(--cal-transition); position: relative; } .booking-fab:hover, .booking-fab:focus-visible { transform: translateY(-4px) scale(1.05); box-shadow: 0 10px 24px rgba(1, 97, 253, 0.55); outline: none; } .booking-fab:focus-visible { outline: 3px solid var(--cal-accent-dark); outline-offset: 3px; } .booking-fab svg { width: 28px; height: 28px; stroke: #ffffff; fill: none; stroke-width: 2; transition: transform 0.3s ease; } .booking-fab.is-open svg { transform: rotate(90deg) scale(0.9); } /* Znaczek/badge z liczbą nadchodzących wydarzeń (opcjonalny wizualnie) */ .booking-fab-badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #ff4d4f; color: #fff; font-size: 0.7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg-primary, #fff); } .booking-fab-label { position: absolute; right: calc(var(--cal-fab-size) + 12px); bottom: 50%; transform: translateY(50%); background: var(--cal-accent-dark); color: #fff; padding: 8px 14px; border-radius: 8px; font-size: 0.85rem; font-weight: 500; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; pointer-events: none; } .booking-fab:hover .booking-fab-label { opacity: 1; visibility: visible; } @media (max-width: 480px) { .booking-fab-label { display: none; } #booking-widget { right: 12px; bottom: 12px; } .booking-fab { width: 56px; height: 56px; } } /* ------------------------------------------------------------------------- 2. PANEL KALENDARZA – rozwijany po kliknięciu FAB ------------------------------------------------------------------------- */ .booking-panel { position: absolute; right: 0; bottom: calc(var(--cal-fab-size) + 16px); width: min(380px, 92vw); max-height: min(600px, 80vh); background: var(--bg-primary); color: var(--text-primary); border-radius: var(--cal-radius); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); overflow: hidden; display: flex; flex-direction: column; transform: translateY(20px) scale(0.96); opacity: 0; visibility: hidden; transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s ease; border: 1px solid rgba(0, 0, 0, 0.06); } .booking-panel.show { transform: translateY(0) scale(1); opacity: 1; visibility: visible; } @media (max-width: 480px) { .booking-panel { width: 94vw; right: -6px; max-height: 75vh; } } /* Nagłówek panelu */ .booking-panel__header { background: var(--cal-accent-dark); color: #ffffff; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .booking-panel__title { font-size: 1.05rem; font-weight: 600; margin: 0; } .booking-panel__close { background: none; border: none; color: #fff; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s; } .booking-panel__close:hover, .booking-panel__close:focus-visible { background: rgba(255, 255, 255, 0.15); outline: none; } /* Zakładki: Konsultacje / Nasze wydarzenia */ .booking-tabs { display: flex; gap: 4px; padding: 10px 12px 0; background: var(--bg-primary); flex-shrink: 0; } .booking-tab { flex: 1; text-align: center; padding: 10px 8px; font-size: 0.85rem; font-weight: 600; color: var(--text-primary); background: transparent; border: none; border-bottom: 3px solid transparent; cursor: pointer; border-radius: 8px 8px 0 0; opacity: 0.6; transition: var(--cal-transition); } .booking-tab.active { opacity: 1; color: var(--cal-accent); border-bottom-color: var(--cal-accent); background: rgba(1, 97, 253, 0.06); } .booking-tab:hover:not(.active) { opacity: 0.85; } /* ------------------------------------------------------------------------- 3. NAWIGACJA MIESIĄCA + SIATKA DNI ------------------------------------------------------------------------- */ .booking-cal { padding: 14px 16px 8px; overflow-y: auto; flex: 1; } .booking-cal__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .booking-cal__month { font-weight: 600; font-size: 0.95rem; text-transform: capitalize; } .booking-cal__nav-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.1); background: var(--bg-primary); color: var(--text-primary); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--cal-transition); } .booking-cal__nav-btn:hover, .booking-cal__nav-btn:focus-visible { background: var(--cal-accent); border-color: var(--cal-accent); color: #fff; outline: none; } .booking-cal__weekdays, .booking-cal__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--cal-gap); } .booking-cal__weekdays { margin-bottom: 6px; } .booking-cal__weekday { text-align: center; font-size: 0.7rem; font-weight: 600; opacity: 0.55; text-transform: uppercase; padding: 4px 0; } .booking-day { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 0.85rem; font-weight: 500; cursor: pointer; background: transparent; border: 1px solid transparent; color: var(--text-primary); position: relative; transition: var(--cal-transition); user-select: none; } .booking-day.is-outside { opacity: 0.25; cursor: default; pointer-events: none; } .booking-day.is-past { opacity: 0.3; cursor: not-allowed; pointer-events: none; } .booking-day:hover:not(.is-outside):not(.is-past) { background: rgba(1, 97, 253, 0.1); border-color: var(--cal-accent); } .booking-day.is-today { border: 1px solid var(--cal-accent-dark); font-weight: 700; } /* Dzień z dostępnymi terminami konsultacji */ .booking-day.has-slots::after { content: ''; position: absolute; bottom: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--cal-accent); } /* Dzień z organizowanym wydarzeniem */ .booking-day.has-event::after { content: ''; position: absolute; bottom: 5px; width: 5px; height: 5px; border-radius: 50%; background: #ff9f1c; } .booking-day.has-slots.has-event::after { box-shadow: -6px 0 0 #ff9f1c; background: var(--cal-accent); } .booking-day.is-selected { background: var(--cal-accent); border-color: var(--cal-accent); color: #fff; font-weight: 700; } .booking-day.is-selected::after { background: #fff; } /* Legenda pod siatką */ .booking-cal__legend { display: flex; gap: 16px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(0, 0, 0, 0.08); font-size: 0.72rem; opacity: 0.8; flex-wrap: wrap; } .booking-cal__legend-item { display: flex; align-items: center; gap: 6px; } .booking-cal__legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .booking-cal__legend-dot.dot-slots { background: var(--cal-accent); } .booking-cal__legend-dot.dot-event { background: #ff9f1c; } /* ------------------------------------------------------------------------- 4. LISTA GODZIN / WYDARZEŃ DLA WYBRANEGO DNIA ------------------------------------------------------------------------- */ .booking-day-detail { padding: 14px 16px 18px; border-top: 1px solid rgba(0, 0, 0, 0.08); flex-shrink: 0; max-height: 220px; overflow-y: auto; } .booking-day-detail__title { font-size: 0.85rem; font-weight: 600; margin: 0 0 10px; display: flex; align-items: center; justify-content: space-between; } .booking-day-detail__title span.date-label { color: var(--cal-accent); } .booking-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; } .booking-slot { padding: 8px 6px; border: 1.5px solid var(--cal-accent); border-radius: var(--cal-radius-sm); background: transparent; color: var(--cal-accent); font-size: 0.8rem; font-weight: 600; text-align: center; cursor: pointer; transition: var(--cal-transition); } .booking-slot:hover, .booking-slot:focus-visible { background: var(--cal-accent); color: #fff; outline: none; } .booking-slot.is-selected { background: var(--cal-accent); color: #fff; } .booking-slot.is-full { border-color: rgba(0, 0, 0, 0.15); color: rgba(0, 0, 0, 0.3); cursor: not-allowed; text-decoration: line-through; } .booking-slot.is-full:hover { background: transparent; color: rgba(0, 0, 0, 0.3); } /* Karta wydarzenia (widok "Nasze wydarzenia") */ .booking-event-card { display: flex; gap: 12px; padding: 10px; border-radius: var(--cal-radius-sm); background: var(--bg-alt); color: var(--text-alt); margin-bottom: 10px; box-shadow: var(--cal-shadow); transition: var(--cal-transition); } .booking-event-card:hover { transform: translateY(-2px); box-shadow: var(--cal-shadow-hover); } .booking-event-card__date { flex-shrink: 0; width: 46px; height: 46px; border-radius: 10px; background: var(--cal-accent); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; } .booking-event-card__date .day-num { font-size: 1rem; font-weight: 700; } .booking-event-card__date .day-month { font-size: 0.6rem; text-transform: uppercase; } .booking-event-card__body h4 { font-size: 0.85rem; font-weight: 600; margin: 0 0 2px; } .booking-event-card__body p { font-size: 0.75rem; margin: 0; opacity: 0.85; } .booking-empty-state { text-align: center; padding: 20px 10px; font-size: 0.8rem; opacity: 0.6; } /* ------------------------------------------------------------------------- 5. CTA "Zapisz się" / "Zarejestruj" – przejście na podstronę rezerwacji ------------------------------------------------------------------------- */ .booking-panel__footer { padding: 14px 16px; border-top: 1px solid rgba(0, 0, 0, 0.08); flex-shrink: 0; } .booking-cta { width: 100%; padding: 12px; border: none; border-radius: var(--cal-radius-sm); background: var(--cal-accent-dark); color: #fff; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: var(--cal-transition); display: flex; align-items: center; justify-content: center; gap: 8px; } .booking-cta:hover, .booking-cta:focus-visible { background: var(--cal-accent); outline: none; transform: translateY(-1px); } .booking-cta:disabled { opacity: 0.4; cursor: not-allowed; transform: none; } .booking-cta svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; } /* ========================================================================= 6. INTEGRACJA Z TRYBAMI DOSTĘPNOŚCI (klasy z menu dostępności strony) ========================================================================= */ /* --- Tryb ciemny (body.dark) — dziedziczy zmienne, tylko doprecyzowanie --- */ body.dark .booking-panel { border-color: rgba(255, 255, 255, 0.08); } body.dark .booking-cal__nav-btn { border-color: rgba(255, 255, 255, 0.15); } body.dark .booking-tabs, body.dark .booking-day-detail, body.dark .booking-panel__footer, body.dark .booking-cal__legend { border-color: rgba(255, 255, 255, 0.1); } body.dark .booking-slot.is-full { border-color: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.3); } body.dark .booking-fab-badge { border-color: var(--bg-primary); } /* --- Skala szarości --- */ body.grayscale #booking-widget, body.grayscale #booking-widget * { filter: grayscale(100%) !important; -webkit-filter: grayscale(100%) !important; } /* --- Wysoki kontrast --- */ body.high-contrast .booking-fab { background: #000 !important; border: 3px solid #ffff00 !important; box-shadow: none !important; } body.high-contrast .booking-fab svg { stroke: #ffff00 !important; } body.high-contrast .booking-panel { background: #000 !important; color: #fff !important; border: 3px solid #ffff00 !important; box-shadow: none !important; } body.high-contrast .booking-panel__header { background: #000 !important; border-bottom: 2px solid #ffff00 !important; } body.high-contrast .booking-tab.active { color: #ffff00 !important; border-bottom-color: #ffff00 !important; background: rgba(255, 255, 0, 0.08) !important; } body.high-contrast .booking-day { color: #fff !important; border: 1px solid rgba(255, 255, 0, 0.25) !important; } body.high-contrast .booking-day.is-selected, body.high-contrast .booking-day:hover:not(.is-outside):not(.is-past) { background: #ffff00 !important; color: #000 !important; border-color: #ffff00 !important; } body.high-contrast .booking-day.has-slots::after, body.high-contrast .booking-day.has-event::after { background: #ffff00 !important; } body.high-contrast .booking-slot { border-color: #ffff00 !important; color: #ffff00 !important; } body.high-contrast .booking-slot:hover, body.high-contrast .booking-slot.is-selected { background: #ffff00 !important; color: #000 !important; } body.high-contrast .booking-cta { background: #ffff00 !important; color: #000 !important; } body.high-contrast .booking-event-card { background: #000 !important; border: 2px solid #ffff00 !important; box-shadow: none !important; } /* --- Negatyw (filtr na html.negative obejmuje cały widget automatycznie, brak dodatkowych reguł – filtr działa globalnie) --- */ /* --- Jasne tło (body.light-bg) — panel korzysta z --bg-primary, dziedziczy --- */ /* --- Podkreślone odnośniki --- */ body.underline-links .booking-panel a, body.underline-links #show-all-news-booking { text-decoration: underline; } /* ========================================================================= 7. ANIMACJA WEJŚCIA / OVERLAY MOBILNY (opcjonalny scrim pod panelem) ========================================================================= */ .booking-scrim { position: fixed; inset: 0; background: rgba(11, 11, 48, 0.35); backdrop-filter: blur(2px); z-index: 1049; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; } .booking-scrim.show { opacity: 1; visibility: visible; } @media (min-width: 769px) { .booking-scrim { display: none; } } /* Scrollbar w panelu – subtelny, spójny z akcentem */ .booking-cal::-webkit-scrollbar, .booking-day-detail::-webkit-scrollbar { width: 6px; } .booking-cal::-webkit-scrollbar-thumb, .booking-day-detail::-webkit-scrollbar-thumb { background: rgba(1, 97, 253, 0.3); border-radius: 10px; } /* Podtytuł sekcji w obrębie panelu dnia ("Wydarzenia tego dnia", "Dostępne godziny konsultacji") */ .booking-day-detail__subtitle { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; opacity: 0.55; margin: 0 0 8px; } /* Kontener wydarzeń dnia – odstęp od sekcji slotów, które mogą być pod nim */ .booking-day-events { margin-bottom: 14px; } .booking-day-events .booking-event-card { margin-bottom: 8px; } .booking-day-events .booking-event-card:last-child { margin-bottom: 0; } /* Sekcja slotów - kontener nadrzędny wobec .booking-slots */ .booking-day-slots { margin-bottom: 4px; } /* Rozdzielenie wizualne dwóch sekcji, gdy obie są widoczne jednocześnie */ .booking-day-events:not([style*="display: none"]) + .booking-day-slots { border-top: 1px solid rgba(0, 0, 0, 0.08); padding-top: 12px; } body.dark .booking-day-events:not([style*="display: none"]) + .booking-day-slots { border-top-color: rgba(255, 255, 255, 0.1); } body.high-contrast .booking-day-events:not([style*="display: none"]) + .booking-day-slots { border-top-color: #ffff00 !important; } .booking-fab { width: auto; height: var(--cal-fab-size); min-width: var(--cal-fab-size); border-radius: calc(var(--cal-fab-size) / 2); padding: 0 22px 0 20px; gap: 10px; transition: var(--cal-transition), padding 0.25s ease, width 0.25s ease; } .booking-fab.is-open { width: var(--cal-fab-size); padding: 0; gap: 0; } .booking-fab-label-text { font-size: 0.9rem; font-weight: 600; color: #ffffff; white-space: nowrap; overflow: hidden; max-width: 260px; opacity: 1; transition: opacity 0.2s ease, max-width 0.25s ease; } .booking-fab.is-open .booking-fab-label-text { opacity: 0; max-width: 0; } .booking-fab svg { flex-shrink: 0; } @media (max-width: 480px) { .booking-fab-label-text { max-width: 180px; font-size: 0.85rem; } }