/* ============================================ MOBILE SERIES & FRANCHISE SECTION Optimized horizontal scroll for mobile devices ============================================ INTEGRATION INSTRUCTIONS: Add this line to anime.html in the section after anime.css: DESIGN OVERVIEW: - Cards are 75px wide (70px on small screens, 80px on larger mobile) - 2:3 aspect ratio images (standard anime poster format) - Horizontal scroll with momentum and snap - Right-edge fade gradient to indicate scrollability - Shows 4-5 cards on ~375px screen width - Text overlay with relation type, title, format, and status - "Show all X entries" button below the scroll area - Uses !important to override desktop styles BREAKPOINTS: - <= 400px: Extra small (70px cards, tighter spacing) - 401-600px: Standard mobile (75px cards) - 601-768px: Large mobile/small tablet (80px cards) VISUAL LAYOUT (375px screen width example): ┌───────────────────────────────────────────┐ │ Series & Franchise │ ├───────────────────────────────────────────┤ │ [Card] [Card] [Card] [Card] [Card]... → │ │ 75px 75px 75px 75px 75px │ │ fade │ ├───────────────────────────────────────────┤ │ [Show all X entries] │ └───────────────────────────────────────────┘ Each card shows: - Top: Relation type (SEQUEL, PREQUEL, etc.) - Middle: Cover image - Bottom: Title, Format + Year, Status ============================================ */ @media (max-width: 768px) { /* Ensure parent section allows overflow */ #seriesSection { overflow: visible !important; position: relative !important; } .content-section#seriesSection { overflow: visible !important; } /* Timeline container - extends to screen edges for proper half-card cutoff */ .series-timeline { position: relative !important; overflow: visible !important; margin: 0 -12px !important; /* Extend to edges (matches body-container padding) */ padding: 0 0 0 12px !important; /* Left padding matches page margin */ } /* No fade - let the half-card cutoff indicate more content */ .series-timeline::after { display: none !important; } /* Hide the Show All button - scroll replaces it */ .series-show-more { display: none !important; } /* Series grid - horizontal scroll container */ .series-grid { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: visible !important; gap: 12px !important; padding: 4px 0 16px 4px !important; margin: 0 !important; /* Smooth scrolling with mandatory snap */ scroll-behavior: smooth !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; /* Hide scrollbar */ scrollbar-width: none !important; -ms-overflow-style: none !important; } .series-grid::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } /* End spacer so last card can be fully scrolled into view */ .series-grid::after { content: '' !important; flex: 0 0 12px !important; width: 12px !important; } /* Individual series cards - slightly larger for visibility */ .series-grid .series-card { flex: 0 0 90px !important; width: 90px !important; min-width: 90px !important; max-width: 90px !important; height: auto !important; scroll-snap-align: start !important; position: relative !important; } /* Card image container - 2:3 aspect ratio */ .series-grid .series-card-image { width: 90px !important; height: 135px !important; /* 90px * 1.5 for 2:3 ratio */ aspect-ratio: 2/3 !important; border-radius: 8px !important; overflow: hidden !important; position: relative !important; } .series-grid .series-card-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } /* Overlay gradient - optimized for small cards */ .series-grid .series-card-overlay { position: absolute !important; inset: 0 !important; background: linear-gradient( to bottom, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.3) 25%, transparent 40%, transparent 50%, rgba(0, 0, 0, 0.6) 75%, rgba(0, 0, 0, 0.9) 100% ) !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; padding: 4px !important; } /* Relation type badge at top */ .series-grid .series-relation { font-size: 0.5rem !important; /* 8px */ font-weight: 700 !important; color: rgba(255, 255, 255, 0.95) !important; text-transform: uppercase !important; letter-spacing: 0.3px !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important; line-height: 1.2 !important; padding: 2px 0 !important; } .series-grid .series-card.current .series-relation { color: var(--primary) !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 8px rgba(var(--primary-rgb), 0.6) !important; } /* Info section at bottom */ .series-grid .series-card-info { display: flex !important; flex-direction: column !important; gap: 2px !important; } /* Title - compact with line clamping */ .series-grid .series-card-title { font-size: 0.6rem !important; /* 9.6px */ font-weight: 600 !important; color: #fff !important; line-height: 1.2 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important; /* Clamp to 2 lines */ display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; max-height: 2.4em !important; /* 2 lines at line-height 1.2 */ } /* Meta info (format + year) */ .series-grid .series-card-meta { font-size: 0.5rem !important; /* 8px */ color: rgba(255, 255, 255, 0.75) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important; line-height: 1.2 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* Status text */ .series-grid .series-card-status { font-size: 0.45rem !important; /* 7.2px */ color: rgba(255, 255, 255, 0.6) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important; line-height: 1.2 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* Current card highlight */ .series-grid .series-card.current .series-card-image { box-shadow: 0 0 0 2px var(--primary) !important; } /* Hover effects - subtle on mobile */ .series-grid .series-card:active { transform: scale(0.97) !important; transition: transform 0.1s ease !important; } /* Show more/less button */ .series-show-more { width: 100% !important; margin-top: 12px !important; padding: 10px 16px !important; font-size: 0.85rem !important; position: relative !important; z-index: 3 !important; background: rgba(var(--primary-rgb), 0.1) !important; border: 1px solid rgba(var(--primary-rgb), 0.3) !important; color: var(--primary) !important; border-radius: 8px !important; cursor: pointer !important; transition: all 0.2s ease !important; } .series-show-more:hover, .series-show-more:active { background: rgba(var(--primary-rgb), 0.2) !important; border-color: rgba(var(--primary-rgb), 0.5) !important; } } /* Extra small screens (iPhone SE, older phones) */ @media (max-width: 480px) { /* Match body-container 10px padding */ .series-timeline { margin: 0 -10px !important; padding: 0 0 0 10px !important; } .series-grid::after { flex: 0 0 10px !important; width: 10px !important; } } @media (max-width: 400px) { /* Slightly smaller cards for very small screens */ .series-grid .series-card { flex: 0 0 80px !important; width: 80px !important; min-width: 80px !important; max-width: 80px !important; } .series-grid .series-card-image { width: 80px !important; height: 120px !important; /* 80px * 1.5 */ } /* Adjust font sizes slightly */ .series-grid .series-relation { font-size: 0.5rem !important; } .series-grid .series-card-title { font-size: 0.6rem !important; } .series-grid .series-card-meta { font-size: 0.5rem !important; } .series-grid .series-card-status { font-size: 0.45rem !important; } /* Tighter gap */ .series-grid { gap: 10px !important; } } /* Landscape phones and small tablets */ @media (max-width: 768px) and (min-width: 601px) { /* Larger cards for wider mobile screens */ .series-grid .series-card { flex: 0 0 95px !important; width: 95px !important; min-width: 95px !important; max-width: 95px !important; } .series-grid .series-card-image { width: 95px !important; height: 142.5px !important; /* 95px * 1.5 */ } .series-grid .series-relation { font-size: 0.55rem !important; } .series-grid .series-card-title { font-size: 0.65rem !important; } .series-grid .series-card-meta { font-size: 0.53rem !important; } .series-grid .series-card-status { font-size: 0.48rem !important; } } /* Tablet portrait mode */ @media (max-width: 768px) and (min-width: 481px) { .series-grid { gap: 12px !important; } }