/* ============================================ */ /* ULTRACOMP PAGINATION & BUTTONS — OPTIMIZED */ /* Loads on: CATEGORY / LISTING / CART PAGES */ /* Requires: ultracomp-core.css */ /* ============================================ */ /* REMOVED: @import for 3 font families */ /* REMOVED: backdrop-filter on all buttons */ /* REMOVED: infinite animation on hover */ /* MERGED: gaming-pulse + gaming-pulse-active */ /* NOTE: Fonts load via system fallback. Add */ /* in for Russo One if desired. */ /* --- Shared gaming button base --- */ .loadMore__button, .loadMore__button--products, .js-loadMore__button--products, .pagination__link, .pagination__link--first, .pagination__link--last, .pagination__link--prev, .pagination__link--next, .goToTop__button, .next-step .btn, .next-step-back, .next-step-forward, .next-step .btn-lg, .next-step-back.btn-lg, .next-step-forward.btn-lg, .next-step-forward.btn-conversion { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 1px solid #8B5CF6 !important; border-radius: 6px !important; background: linear-gradient(135deg, #0F0F23 0%, #1A1A3A 25%, #2D1B69 75%, #4C1D95 100%) !important; color: #FFFFFF !important; font-family: 'Russo One', 'Saira Condensed', 'Exo 2', sans-serif !important; font-weight: 700 !important; text-decoration: none !important; text-transform: uppercase !important; cursor: pointer !important; transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; overflow: hidden !important; box-sizing: border-box !important; gap: 8px !important; } /* Shared hover */ .loadMore__button:hover, .loadMore__button--products:hover, .js-loadMore__button--products:hover, .pagination__link:hover, .pagination__link--first:hover, .pagination__link--last:hover, .pagination__link--prev:hover, .pagination__link--next:hover, .goToTop__button:hover, .next-step .btn:hover, .next-step-back:hover, .next-step-forward:hover { border-color: #A855F7 !important; background: linear-gradient(135deg, #1A1A3A 0%, #2D1B69 50%, #4C1D95 100%) !important; box-shadow: 0 0 30px rgba(139, 92, 246, 0.6), 0 0 60px rgba(139, 92, 246, 0.3), 0 8px 25px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; transform: translateY(-2px) !important; color: #FFFFFF !important; text-decoration: none !important; } /* --- Load More --- */ .loadMore__button, .loadMore__button--products, .js-loadMore__button--products { padding: 14px 32px !important; border-width: 2px !important; border-radius: 8px !important; font-size: 15px !important; letter-spacing: 1px !important; min-width: 180px !important; white-space: nowrap !important; } .loadMore__button:active, .loadMore__button--products:active { transform: translateY(-1px) scale(1.02) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important; } /* --- Pagination links --- */ .pagination__link, .pagination__link--first, .pagination__link--last, .pagination__link--prev, .pagination__link--next { padding: 10px 16px !important; font-size: 14px !important; font-weight: 600 !important; min-width: 44px !important; min-height: 44px !important; } /* Current page */ .pagination__currentPage, strong.pagination__currentPage { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 10px 16px !important; border: 2px solid #A855F7 !important; border-radius: 6px !important; background: linear-gradient(135deg, #1A1A3A 0%, #2D1B69 50%, #4C1D95 100%) !important; color: #FFFFFF !important; font-family: 'Russo One', 'Saira Condensed', 'Exo 2', sans-serif !important; font-size: 14px !important; font-weight: 900 !important; cursor: default !important; box-shadow: 0 0 20px rgba(139, 92, 246, 0.6), 0 0 40px rgba(139, 92, 246, 0.3), 0 3px 10px rgba(0, 0, 0, 0.4) !important; box-sizing: border-box !important; min-width: 44px !important; min-height: 44px !important; } .pagination__link--prev::before { content: "←" !important; font-size: 18px !important; font-weight: bold !important; } .pagination__link--next::before { content: "→" !important; font-size: 18px !important; font-weight: bold !important; } .pagination__list { gap: 8px !important; } .pagination__list li { list-style: none !important; } /* Hide "Zkuste vyhledávání" */ .js-try-search-button, .col-md-6:has(.js-try-search-button) { display: none !important; } /* --- Go To Top --- */ .goToTop__button { padding: 12px 24px !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.5px !important; min-width: 100px !important; } .goToTop__button::before { content: "↑" !important; font-size: 16px !important; font-weight: bold !important; margin-right: 4px !important; } /* --- Items Total --- */ .itemsTotal { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 10px 20px !important; border: 1px solid rgba(139, 92, 246, 0.3) !important; border-radius: 6px !important; background: linear-gradient(135deg, rgba(15, 15, 35, 0.8) 0%, rgba(26, 26, 58, 0.8) 100%) !important; color: #D1D5DB !important; font-family: 'Saira Condensed', 'Exo 2', sans-serif !important; font-size: 13px !important; font-weight: 500 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; } .itemsTotal strong { color: #A855F7 !important; font-family: 'Russo One', sans-serif !important; font-size: 16px !important; font-weight: 900 !important; margin-right: 4px !important; } /* --- Next-step buttons (cart) --- */ .next-step, .next-step--cart { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 20px !important; flex-wrap: nowrap !important; width: 100% !important; } .next-step-back, a.next-step-back { margin-right: auto !important; margin-left: 0 !important; } .next-step-forward, a.next-step-forward { margin-left: auto !important; margin-right: 0 !important; } .next-step .btn, .next-step-back, .next-step-forward, .next-step .btn-lg, .next-step-back.btn-lg, .next-step-forward.btn-lg, .next-step-forward.btn-conversion { padding: 14px 32px !important; margin: 0 !important; border-width: 2px !important; border-radius: 8px !important; font-size: 15px !important; line-height: 1.2 !important; letter-spacing: 0.8px !important; min-width: 180px !important; min-height: 52px !important; white-space: nowrap !important; flex-shrink: 0 !important; } .next-step .btn span, .next-step-back span, .next-step-forward span, .continue-shopping, .order-button-text { color: #FFFFFF !important; font-family: 'Russo One', 'Saira Condensed', 'Exo 2', sans-serif !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: 0.8px !important; text-transform: uppercase !important; } /* --- Focus/Disabled --- */ .loadMore__button:focus, .pagination__link:focus, .goToTop__button:focus, .next-step-back:focus, .next-step-forward:focus { outline: none !important; border-color: #A855F7 !important; box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.3), 0 1px 3px rgba(0, 0, 0, 0.3) !important; } .loadMore__button:disabled, .pagination__link:disabled, .next-step-back:disabled, .next-step-forward:disabled { opacity: 0.5 !important; cursor: not-allowed !important; transform: none !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important; pointer-events: none !important; } /* --- Desktop: gaming pulse on current page only --- */ @media (min-width: 769px) { .pagination__currentPage, strong.pagination__currentPage { animation: gamingPulse 2s infinite !important; } } @keyframes gamingPulse { 0%, 100% { box-shadow: 0 0 20px rgba(139, 92, 246, 0.5), 0 0 40px rgba(139, 92, 246, 0.2), 0 3px 10px rgba(0, 0, 0, 0.4); } 50% { box-shadow: 0 0 35px rgba(139, 92, 246, 0.7), 0 0 70px rgba(139, 92, 246, 0.3), 0 3px 10px rgba(0, 0, 0, 0.4); } } /* --- Mobile --- */ @media (max-width: 768px) { .loadMore__button, .loadMore__button--products { padding: 12px 24px !important; font-size: 14px !important; min-width: 160px !important; } .pagination__link, .pagination__link--first, .pagination__link--last, .pagination__link--prev, .pagination__link--next, .pagination__currentPage { padding: 8px 12px !important; font-size: 13px !important; min-width: 40px !important; min-height: 40px !important; } .goToTop__button { padding: 10px 20px !important; font-size: 12px !important; min-width: 90px !important; } .itemsTotal { padding: 8px 16px !important; font-size: 12px !important; } .itemsTotal strong { font-size: 14px !important; } .next-step, .next-step--cart { gap: 12px !important; } .next-step .btn, .next-step-back, .next-step-forward { padding: 12px 24px !important; font-size: 14px !important; min-width: 140px !important; } } @media (max-width: 480px) { .pagination__list { gap: 6px !important; } .pagination__link, .pagination__link--first, .pagination__link--last { font-size: 12px !important; } .pagination__link--first, .pagination__link--last { padding: 8px !important; min-width: 36px !important; } .next-step, .next-step--cart { flex-direction: column !important; gap: 12px !important; } .next-step .btn, .next-step-back, .next-step-forward { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } }