/* ========================================================= aTheme — Style Kafli (Cards) z Glassmorphism ========================================================= */ /* --------------------------------------------------------- 1. BAZOWE TŁO KAFELKÓW --------------------------------------------------------- */ /* Domyślne tło karty — zmienna z theme options */ .ath-obj-card-inner, .ath-card, .wp-block-post.ath-card, .ath-card-hover { background: var(--ath-card-bg, #ffffff); transition: background-color 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease; } /* --------------------------------------------------------- 2. EFEKT GLASSMORPHISM --------------------------------------------------------- */ /* Główna klasa glassmorphism — włączana dynamicznie przez JS lub ręcznie przez klasę .ath-card-glass na kontenerze */ .ath-card-glass, .ath-card-glass .ath-card, .ath-card-glass .wp-block-post.ath-card { background: var(--ath-card-bg, rgba(255, 255, 255, 0.65)) !important; backdrop-filter: blur(12px) saturate(180%) !important; -webkit-backdrop-filter: blur(12px) saturate(180%) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; box-shadow: var(--ath-shadow-card, 0 8px 32px 0 rgba(31, 38, 135, 0.15)) !important; } .ath-card-glass .ath-obj-card-inner, .ath-card-glass.ath-cpt-card .ath-obj-card-inner { background: var(--ath-card-bg, rgba(255, 255, 255, 0.65)) !important; backdrop-filter: blur(12px) saturate(180%) !important; -webkit-backdrop-filter: blur(12px) saturate(180%) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; box-shadow: var(--ath-grid-card-shadow, 0 8px 32px 0 rgba(31, 38, 135, 0.15)) !important; } /* Glassmorphism w ciemnych motywach — automatyczny fallback */ @media (prefers-color-scheme: dark) { .ath-card-glass, .ath-card-glass .ath-obj-card-inner, .ath-card-glass .ath-card { background: var(--ath-card-bg, rgba(30, 41, 59, 0.65)) !important; border-color: rgba(255, 255, 255, 0.08) !important; } } /* Glassmorphism — hover (wzmocnienie efektu) */ .ath-card-glass:hover, .ath-card-glass .ath-card:hover, .ath-card-glass .wp-block-post.ath-card:hover { backdrop-filter: blur(16px) saturate(200%) !important; -webkit-backdrop-filter: blur(16px) saturate(200%) !important; box-shadow: var(--ath-shadow-card-hover, var(--ath-shadow-card, 0 12px 40px 0 rgba(31, 38, 135, 0.2))) !important; } .ath-card-glass:hover .ath-obj-card-inner, .ath-card-glass.ath-cpt-card:hover .ath-obj-card-inner { backdrop-filter: blur(16px) saturate(200%) !important; -webkit-backdrop-filter: blur(16px) saturate(200%) !important; box-shadow: var(--ath-grid-card-shadow, 0 12px 40px 0 rgba(31, 38, 135, 0.2)) !important; } /* Zapewnienie, że treść wewnątrz karty glassmorphism jest przezroczysta (nie nakłada własnego tła) */ .ath-card-glass .ath-obj-card-content, .ath-card-glass .ath-card-content, .ath-card-glass .wp-block-post-content, .ath-card-glass .ath-card-body { background: transparent !important; } /* --------------------------------------------------------- 3. AKTYWACJA GLASSMORPHISM Z POZIOMU OPCJI MOTYWU (klasa .ath-glassmorphism-active dodawana do przez PHP) --------------------------------------------------------- */ .ath-glassmorphism-active .ath-card-hover, .ath-glassmorphism-active .ath-card, .ath-glassmorphism-active .wp-block-post.ath-card { background: var(--ath-card-bg, rgba(255, 255, 255, 0.65)) !important; backdrop-filter: blur(12px) saturate(180%) !important; -webkit-backdrop-filter: blur(12px) saturate(180%) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; box-shadow: var(--ath-shadow-card, 0 8px 32px 0 rgba(31, 38, 135, 0.15)) !important; } .ath-glassmorphism-active .ath-cpt-card .ath-obj-card-inner { background: var(--ath-card-bg, rgba(255, 255, 255, 0.65)) !important; backdrop-filter: blur(12px) saturate(180%) !important; -webkit-backdrop-filter: blur(12px) saturate(180%) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; box-shadow: var(--ath-grid-card-shadow, 0 8px 32px 0 rgba(31, 38, 135, 0.15)) !important; } /* Backdrop-filter musi zostać na .ath-cpt-card, nie działa poprawnie na .ath-obj-card-inner */ .ath-glassmorphism-active .ath-cpt-card { backdrop-filter: blur(12px) saturate(180%) !important; -webkit-backdrop-filter: blur(12px) saturate(180%) !important; } /* Hover dla globalnego glassmorphism */ .ath-glassmorphism-active .ath-card-hover:hover, .ath-glassmorphism-active .ath-card:hover, .ath-glassmorphism-active .wp-block-post.ath-card:hover { backdrop-filter: blur(16px) saturate(200%) !important; -webkit-backdrop-filter: blur(16px) saturate(200%) !important; box-shadow: var(--ath-shadow-card-hover, var(--ath-shadow-card, 0 12px 40px 0 rgba(31, 38, 135, 0.2))) !important; } .ath-glassmorphism-active .ath-cpt-card:hover, .ath-glassmorphism-active .ath-cpt-card:hover .ath-obj-card-inner { backdrop-filter: blur(16px) saturate(200%) !important; -webkit-backdrop-filter: blur(16px) saturate(200%) !important; box-shadow: var(--ath-grid-card-shadow, 0 12px 40px 0 rgba(31, 38, 135, 0.2)) !important; } /* --------------------------------------------------------- 4. KONTRAST TEKSTU DLA GLASSMORPHISM --------------------------------------------------------- */ /* Automatyczny kontrast tekstu w kartach glassmorphism */ .ath-card-glass .ath-obj-card-title-meta, .ath-card-glass .ath-card-title, .ath-card-glass .wp-block-post-title a, .ath-glassmorphism-active .ath-obj-card-title-meta, .ath-glassmorphism-active .ath-card-title, .ath-glassmorphism-active .wp-block-post-title a { color: var(--ath-text-color, #1e293b); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .ath-card-glass .ath-obj-card-desc, .ath-card-glass .ath-card-desc, .ath-card-glass .wp-block-post-excerpt, .ath-glassmorphism-active .ath-obj-card-desc, .ath-glassmorphism-active .ath-card-desc, .ath-glassmorphism-active .wp-block-post-excerpt { color: var(--ath-text-color, #475569); } /* --------------------------------------------------------- 5. WSPARCIE DLA CIEMNYCH MOTYWÓW --------------------------------------------------------- */ /* Gdy tło strony jest ciemne, glassmorphism używa ciemniejszego fallbacku */ .ath-dark-theme .ath-card-glass, .ath-dark-theme .ath-card-glass .ath-obj-card-inner, .ath-dark-theme .ath-card-glass .ath-card, .ath-dark-theme .ath-glassmorphism-active .ath-card { background: var(--ath-card-bg, rgba(30, 41, 59, 0.65)) !important; border-color: rgba(255, 255, 255, 0.08) !important; } .ath-dark-theme .ath-card-glass .ath-obj-card-title-meta, .ath-dark-theme .ath-card-glass .ath-card-title, .ath-dark-theme .ath-card-glass .wp-block-post-title a, .ath-dark-theme .ath-glassmorphism-active .ath-obj-card-title-meta, .ath-dark-theme .ath-glassmorphism-active .ath-card-title, .ath-dark-theme .ath-glassmorphism-active .wp-block-post-title a { color: var(--ath-text-light-color, #ffffff); } .ath-dark-theme .ath-card-glass .ath-obj-card-desc, .ath-dark-theme .ath-card-glass .ath-card-desc, .ath-dark-theme .ath-card-glass .wp-block-post-excerpt, .ath-dark-theme .ath-glassmorphism-active .ath-obj-card-desc, .ath-dark-theme .ath-glassmorphism-active .ath-card-desc, .ath-dark-theme .ath-glassmorphism-active .wp-block-post-excerpt { color: var(--ath-text-light-color, rgba(255, 255, 255, 0.8)); } /* --------------------------------------------------------- 6. RESPONSYWNOŚĆ --------------------------------------------------------- */ @media (max-width: 768px) { .ath-card-glass, .ath-card-glass .ath-obj-card-inner, .ath-card-glass .ath-card, .ath-glassmorphism-active .ath-cpt-card, .ath-glassmorphism-active .ath-card { backdrop-filter: blur(8px) saturate(160%) !important; -webkit-backdrop-filter: blur(8px) saturate(160%) !important; } }