Loading Playlist Engine...

.announcement-text { color: #ffde00; font-size: 1.1em; font-weight: 600; margin-top: 30px; font-family: var(--font-body); text-shadow: 1px 1px 3px rgba(0,0,0,0.5); padding: 5px 0; } .announcement-text marquee { width: 100%; } .container { width: 92%; margin: 0 auto; max-width: 1280px; } main { padding: 25px 0; } .category { margin-bottom: 45px; } .category-title { color: var(--text-color-light); font-size: 1.9em; font-weight: 700; text-transform: uppercase; padding-bottom: 12px; margin-bottom: 28px; letter-spacing: 1px; font-family: var(--font-heading); display: flex; align-items: center; justify-content: flex-start; } .category-title .red-line { display: inline-block; width: 8px; height: 38px; background-color: var(--primary-red); margin-right: 12px; box-shadow: 0 0 12px rgba(229, 9, 20, 0.9); position: relative; overflow: hidden; border-radius: 2px; } .category-title .red-line::before { content: ''; position: absolute; top: -50%; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.4), transparent); animation: move-light 2s infinite linear; } @keyframes move-light { 0% { transform: translateY(-100%); } 100% { transform: translateY(150%); } } .category-title .category-icon { font-size: 1.1em; color: #fff; margin-right: 12px; text-shadow: 0 0 8px rgba(255, 255, 255, 0.5); } .category-title-text { font-size: 1em; display: inline-block; margin-right: 20px; } .category-title .horizontal-line { flex-grow: 1; height: 2px; background-color: var(--primary-red); -webkit-mask-image: linear-gradient(to right, black 20%, transparent 100%); mask-image: linear-gradient(to right, black 20%, transparent 100%); } .channel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 18px; margin-bottom: 20px; } .search-results-container { width: 92%; margin: 0 auto; max-width: 1280px; padding: 25px 0; } .search-results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 18px; justify-content: center; } .search-results-grid.single-column { display: flex; justify-content: center; } .channel-item { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; cursor: pointer; transition: transform 0.3s ease; background-color: transparent; border: none; padding: 0; } .channel-logo-container { position: relative; width: 90%; aspect-ratio: 1 / 1; } .channel-logo { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; border: 3px solid var(--border-color); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); background-color: var(--item-background); transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s ease, border-color 0.3s ease; } .channel-name { position: static; background: none; color: var(--text-color-light); font-size: 0.85em; font-family: var(--font-body); font-weight: 500; padding: 0; margin-top: 12px; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8); text-align: center; line-height: 1.3; width: 100%; white-space: normal; } .channel-item:hover { transform: translateY(-5px); z-index: 10; } .channel-item:hover .channel-logo { transform: scale(1.05); border-color: var(--primary-red); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 15px rgba(229, 9, 20, 0.4); } .channel-logo-container::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; background-color: var(--primary-red); border-radius: 50%; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; z-index: 3; pointer-events: none; box-shadow: 0 0 10px rgba(229, 9, 20, 0.5); } .channel-logo-container::after { content: '\f04b'; font-family: 'font awesome 6 free'; font-weight: 900; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8); font-size: 22px; color: #fff; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; z-index: 4; text-shadow: 0 0 10px rgba(0, 0, 0, 0.7); pointer-events: none; } .channel-item:hover .channel-logo-container::before, .channel-item:hover .channel-logo-container::after { opacity: 1; transform: translate(-50%, -50%) scale(1); } .channel-item.no-logo .channel-logo-container { justify-content: center; align-items: center; display: flex; background-color: #222; border-radius: 50%; border: 1px solid var(--border-color); } .channel-item.no-logo .channel-logo { display: none; } .channel-item.no-logo .channel-name { display: none; } .channel-item.no-logo .channel-logo-container::after { content: attr(data-channel-name); font-family: var(--font-body); font-weight: 500; font-size: 0.8em; color: var(--text-color-light); text-shadow: none; opacity: 1; transform: none; position: static; text-align: center; padding: 10px; white-space: normal; } .see-more-button { display: block; width: fit-content; margin: 30px auto 0 auto; background-color: var(--primary-red); color: #fff; border: none; padding: 10px 22px; border-radius: 50px; font-size: 0.9em; cursor: pointer; text-decoration: none; font-weight: bold; font-family: var(--font-heading); letter-spacing: 0.8px; box-shadow: 0 0 0 0 rgba(229, 9, 20, 1); transform: scale(1); animation: pulse-red 2.5s infinite; transition: transform 0.3s ease, background-color 0.3s ease; } .see-more-button:hover { animation: none; transform: translateY(-3px) scale(1.05); background-color: var(--hover-red); } .see-more-button:active { transform: translateY(1px) scale(1); } #pre-loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--dark-background); z-index: 10000; display: flex; justify-content: center; align-items: center; opacity: 1; transition: opacity 0.5s ease-in-out; } .loader { width: 48px; height: 48px; display: inline-block; position: relative; border: 3px solid; border-color: #de3500 #0000 #fff #0000; border-radius: 50%; box-sizing: border-box; animation: 1s rotate linear infinite; } .loader:before , .loader:after{ content: ''; top: 0; left: 0; position: absolute; border: 10px solid transparent; border-bottom-color: #fff; transform: translate(-10px, 19px) rotate(-35deg); } .loader:after { border-color: #de3500 #0000 #0000 #0000 ; transform: translate(32px, 3px) rotate(-35deg); } @keyframes rotate { 100%{ transform: rotate(360deg) } } #video-player-container { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90vw; max-width: 850px; height: auto; aspect-ratio: 16 / 9; background-color: #000; z-index: 9999; border-radius: 15px; overflow: hidden; box-shadow: 0 0 30px rgba(0, 0, 0, 0.8), 0 0 20px #000; border: 2px solid #000; } #video-player { width: 100%; height: 100%; background-color: black; } .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 9998; display: none; cursor: pointer; } .no-results-message { text-align: center; color: var(--text-color-medium); font-size: 1.2em; padding: 50px; } @media (max-width: 768px) { .channel-grid, .search-results-grid { grid-template-columns: repeat(auto-fill, minmax(75px, 1fr)); gap: 10px; } .see-more-button { padding: 9px 20px; font-size: 0.85em; } } @media (max-width: 480px) { .image-search-bar { padding: 8px 15px; } .image-search-bar input { font-size: 0.9em; } .announcement-text { font-size: 0.95em; } .category-title { font-size: 1.3em; padding-bottom: 8px; } .category-title .red-line { height: 24px; } .category-title .category-icon { font-size: 1em; } .channel-grid, .search-results-grid { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 8px; } .channel-name { font-size: 0.7em; margin-top: 6px; } .see-more-button { padding: 8px 18px; font-size: 0.8em; } }