/* ========================================================= HOMEPAGE – PLAY ROOM CAROUSEL ========================================================= */ .df-home-playroom { position: relative; overflow: visible; } /* --------------------------------------------------------- HEADER --------------------------------------------------------- */ .df-home-playroom-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 24px; } /* --------------------------------------------------------- TAGY --------------------------------------------------------- */ .df-home-playroom-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; } .df-home-playroom-tags .df-tag { text-decoration: none; } /* --------------------------------------------------------- CAROUSEL --------------------------------------------------------- */ .df-home-carousel { position: relative; width: 100%; overflow: visible; } .df-home-carousel-viewport { width: 100%; overflow: hidden; } .df-home-carousel-track { display: flex; align-items: stretch; gap: 24px; width: 100%; transition: transform .55s cubic-bezier(.22,.61,.36,1); will-change: transform; } /* --------------------------------------------------------- SLIDE 4 položky současně --------------------------------------------------------- */ .df-home-carousel-slide { flex: 0 0 calc((100% - 72px) / 4); min-width: 0; } /* * Play Room karta musí vyplnit celý slide. */ .df-home-carousel-slide .playroom-card { width: 100%; height: 100%; margin: 0; } /* --------------------------------------------------------- MEDIA / VIDEO --------------------------------------------------------- */ .df-home-carousel-slide .playroom-media { position: relative; display: block; overflow: hidden; } .df-home-carousel-slide .playroom-media > img { display: block; width: 100%; height: auto; } /* * Bunny video preview musí být nad thumbnail obrázkem. */ .df-home-carousel-slide .df-bunny-preview { position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; pointer-events: none; } .df-home-carousel-slide .df-bunny-preview-video { display: block; width: 100%; height: 100%; object-fit: cover; } /* * JS může řešit přehrávání, * CSS pouze zobrazí video při hoveru. */ .df-home-carousel-slide .playroom-media:hover .df-bunny-preview, .df-home-carousel-slide .playroom-media:focus-within .df-bunny-preview { opacity: 1; visibility: visible; } /* Type badge musí zůstat nad videem */ .df-home-carousel-slide .playroom-type { position: absolute; z-index: 5; } /* ========================================================= CAROUSEL ARROWS !important záměrně – ochrana před globálními button styly ========================================================= */ .df-home-carousel .df-home-carousel-arrow { position: absolute !important; top: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 54px !important; height: 54px !important; min-width: 54px !important; min-height: 54px !important; max-width: 54px !important; max-height: 54px !important; padding: 0 !important; margin: 0 !important; border: 1px solid rgba(255,255,255,.35) !important; border-radius: 50% !important; background: rgba(12,8,16,.92) !important; color: #ffffff !important; font-family: Arial, sans-serif !important; font-size: 15px !important; font-weight: 300 !important; line-height: 1 !important; text-align: center !important; text-decoration: none !important; cursor: pointer !important; opacity: 1 !important; visibility: visible !important; z-index: 50 !important; box-shadow: 0 8px 30px rgba(0,0,0,.40) !important; transform: translateY(-50%) !important; transition: background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease !important; -webkit-appearance: none !important; appearance: none !important; } /* PREV */ .df-home-carousel .df-home-carousel-arrow.is-prev { left: -27px !important; } /* NEXT */ .df-home-carousel .df-home-carousel-arrow.is-next { right: -27px !important; } /* --------------------------------------------------------- HOVER --------------------------------------------------------- */ .df-home-carousel .df-home-carousel-arrow:hover:not(:disabled) { background: #d25096 !important; border-color: #d25096 !important; color: #ffffff !important; transform: translateY(-50%) scale(1.08) !important; box-shadow: 0 8px 30px rgba(0,0,0,.40), 0 0 25px rgba(210,80,150,.40) !important; } /* --------------------------------------------------------- FOCUS --------------------------------------------------------- */ .df-home-carousel .df-home-carousel-arrow:focus:not(:disabled), .df-home-carousel .df-home-carousel-arrow:focus-visible:not(:disabled) { /*background: #d25096 !important; border-color: #ffffff !important; color: #ffffff !important; outline: 2px solid #ffffff !important; outline-offset: 3px !important; transform: translateY(-50%) scale(1.08) !important; box-shadow: 0 8px 30px rgba(0,0,0,.40), 0 0 25px rgba(210,80,150,.40) !important; */ } /* --------------------------------------------------------- ACTIVE / CLICK --------------------------------------------------------- */ .df-home-carousel .df-home-carousel-arrow:active:not(:disabled) { /* background: #b83c7e !important; border-color: #b83c7e !important; color: #ffffff !important; transform: translateY(-50%) scale(.94) !important; box-shadow: 0 4px 15px rgba(0,0,0,.35) !important; */ } /* --------------------------------------------------------- DISABLED --------------------------------------------------------- */ .df-home-carousel .df-home-carousel-arrow:disabled { background: rgba(12,8,16,.65) !important; border-color: rgba(255,255,255,.15) !important; color: rgba(255,255,255,.55) !important; opacity: .35 !important; cursor: default !important; pointer-events: none !important; box-shadow: none !important; transform: translateY(-50%) !important; } /* ========================================================= RESPONSIVE ========================================================= */ /* 3 karty */ @media (max-width: 1200px) { .df-home-carousel-slide { flex-basis: calc((100% - 48px) / 3); } } /* 2 karty */ @media (max-width: 900px) { .df-home-carousel-slide { flex-basis: calc((100% - 24px) / 2); } .df-home-carousel .df-home-carousel-arrow { width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; max-width: 48px !important; max-height: 48px !important; font-size: 30px !important; } .df-home-carousel .df-home-carousel-arrow.is-prev { left: -15px !important; } .df-home-carousel .df-home-carousel-arrow.is-next { right: -15px !important; } } /* 1 karta */ @media (max-width: 600px) { .df-home-playroom-header { align-items: flex-start; flex-direction: column; } .df-home-carousel-slide { flex-basis: 100%; } .df-home-carousel-track { gap: 16px; } .df-home-carousel .df-home-carousel-arrow.is-prev { left: 8px !important; } .df-home-carousel .df-home-carousel-arrow.is-next { right: 8px !important; } }