/* Center the Reset button on larger screens (>=768px) without HTML changes */ @media (min-width: 768px) { /* Flex-center the Reset button column on Discover page */ #discover-page .search-container .col-12.col-md-2 { /* Make this column take a full row so the button can be centered on screen */ flex: 0 0 100% !important; max-width: 100% !important; display: flex !important; justify-content: center !important; align-items: center !important; text-align: center; } /* Make the button content-sized so it can be centered */ #discover-page #reset-filters { display: block !important; /* ensure margin auto can center */ width: max-content !important; /* content-sized, overrides w-100 */ min-width: 140px; margin-left: auto !important; margin-right: auto !important; margin-top: 10px; } } /* --- Root Variables --- Defines global CSS variables for colors and other properties. This makes it easy to maintain a consistent theme and allows for dynamic theme switching (dark/light mode). */ :root { --primary-color: #007bff; --secondary-color: #6c757d; --success-color: #28a745; --danger-color: #dc3545; --warning-color: #ffc107; --info-color: #17a2b8; --gradient-primary: linear-gradient(45deg, #007bff, #17a2b8); --font-family-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --border-radius: 8px; --shadow: 0 4px 6px rgba(0,0,0,0.1); --shadow-hover: 0 8px 12px rgba(0,0,0,0.15); --transition: all 0.3s ease; } /* --- Dark Theme Overrides --- These variables override the default light theme colors when the `data-theme` attribute on the `` tag is set to 'dark'. */ [data-theme='dark'] { --background-color: #0d1117; --background-color-offset: #161b22; --text-color: #c9d1d9; --text-color-muted: #8b949e; --border-color: #30363d; --card-bg: #161b22; } [data-theme='dark'] .lead.text-muted { color: #8b949e !important; /* Lighter than default muted for visibility */ } /* Ensure release date text shows as white in dark theme (Upcoming page) */ [data-theme='dark'] #upcoming-page .movie-card small.text-muted { color: #ffffff !important; } /* Page subtitles: make muted text white in dark theme for visibility */ [data-theme='dark'] #discover-page .text-muted, [data-theme='dark'] #upcoming-page .text-muted, [data-theme='dark'] #now-playing-page .text-muted, [data-theme='dark'] #trending-page .text-muted, [data-theme='dark'] #greatest-page .text-muted { color: #ffffff !important; } [data-theme='dark'] .form-control::placeholder { color: #8b949e; opacity: 0.7; } [data-theme='light'] { --background-color: #c7dae8; --background-color-offset: #73a6ca; --text-color: #24292f; --text-color-muted: #2c3e50; --border-color: #d0d7de; --card-bg: #ffffff; } [data-theme='light'] .btn-close-white { filter: invert(1); } [data-theme='light'] #theme-toggle.btn-outline-light { border-color: var(--border-color); color: var(--text-color-muted); } [data-theme='light'] #theme-toggle.btn-outline-light:hover { background-color: var(--border-color); color: var(--text-color); } [data-theme='light'] .btn-close-white { filter: none; } [data-theme='light'] #theme-toggle.btn-outline-light { border-color: var(--border-color); color: var(--text-color-muted); } [data-theme='light'] #theme-toggle.btn-outline-light:hover { background-color: var(--border-color); color: var(--text-color); } /* --- General Body Styles --- Sets the base font, background color, and text color for the entire application. The `transition` property ensures smooth color changes when switching themes. */ body { font-family: var(--font-family-sans-serif); background-color: var(--background-color); color: var(--text-color); transition: background-color 0.3s, color 0.3s; overflow-x: hidden; /* Prevent horizontal scroll */ width: 100%; max-width: 100%; } /* --- Hidden Utility Class --- A simple utility class to hide elements from view. */ .hidden { display: none !important; } .container-fluid { max-width: 1400px; padding: 0 15px; /* Add padding to prevent content from touching screen edges */ } /* --- Navigation Bar --- Styles the main navigation bar at the top of the page. */ .navbar { background-color: var(--background-color-offset); border-bottom: 1px solid var(--border-color); padding: 1rem 2rem; position: sticky; top: 0; z-index: 1030; } /* --- Navbar Brand (Logo/Title) --- Styles the 'CineVault' title in the navigation bar. */ .navbar-brand { font-weight: 800; font-size: 1.5rem; color: var(--text-color) !important; } .navbar-brand i { color: var(--primary-color); } /* --- Navigation Links --- Styles the links within the navigation bar (e.g., Discover, Watchlist). */ .nav-link { color: var(--text-color-muted); font-weight: 500; transition: var(--transition); } .nav-link:hover, .nav-link.active { color: var(--text-color); } /* --- Active/Hovered Navigation Links --- Highlights the currently active navigation link or a link being hovered over. */ .nav-link.active, .nav-link:hover { color: var(--text-color); } .badge { font-size: 0.7rem; padding: 0.3em 0.5em; } /* --- Theme Toggle Button --- Styles the button used to switch between dark and light themes. */ #theme-toggle { cursor: pointer; font-size: 1.2rem; color: var(--text-color-muted); } .main-content { padding: 2rem; } .display-4 { font-size: 2.5rem; font-weight: 700; background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* --- Gradient Text Utility --- A utility class to create a gradient effect for text, used for main headings. */ .text-gradient { background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .filter-controls { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; justify-content: center; } /* --- Search and Filter Container --- Styles the container that holds the search bar and filter dropdowns. */ .search-container { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; justify-content: center; } /* --- Form Controls (Inputs/Selects) --- General styles for all input fields and select dropdowns. */ .form-control, .form-select { background-color: var(--background-color-offset); color: var(--text-color); border: 1px solid var(--border-color); border-radius: var(--border-radius); transition: var(--transition); } .form-control:focus, .form-select:focus { background-color: var(--background-color-offset); color: var(--text-color); border-color: var(--primary-color); box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25); } /* --- Movie Grid --- The main container for the movie cards, using a responsive CSS Grid layout. */ .movie-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; padding: 0 1rem; } /* Pagination Container */ #pagination-container { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 1.5rem 0; margin: 1rem 0; -ms-overflow-style: none; scrollbar-width: none; } #pagination-container::-webkit-scrollbar { display: none; } /* Pagination Styles */ .pagination { display: flex; justify-content: center; flex-wrap: nowrap; padding: 0 20px; margin: 0 auto; list-style: none; min-width: min-content; width: max-content; max-width: 100%; gap: 8px; } .pagination .page-item { margin: 0; flex-shrink: 0; } .pagination .page-link { display: flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; border: 2px solid var(--border-color); background-color: var(--background-color-offset); color: var(--text-color); border-radius: 6px; text-decoration: none; transition: all 0.2s ease; font-size: 1.1rem; font-weight: 500; cursor: pointer; } .pagination .page-link:hover { background-color: var(--primary-color); color: white; border-color: var(--primary-color); } .pagination .page-item.active .page-link { background-color: var(--primary-color); border-color: var(--primary-color); color: white; } .pagination .page-item.disabled .page-link { opacity: 0.5; pointer-events: none; } /* Mobile styles */ @media (max-width: 480px) { .pagination { padding: 0 4px; gap: 2px; justify-content: center; min-width: 100%; width: max-content; } .pagination .page-link { min-width: 28px; height: 28px; font-size: 0.8rem; padding: 0 4px; } /* Ensure all buttons are visible */ .pagination .page-item { display: inline-block; margin: 0 1px; } } /* --- Movie Card --- Styles for the individual movie card, including its layout, background, and shadow. */ .movie-card { background-color: var(--card-bg); border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--shadow); transition: var(--transition); display: flex; flex-direction: column; position: relative; transition: opacity 0.2s ease-out; } .movie-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); } /* --- Movie Poster Container --- Container for the movie poster image, ensuring it maintains its aspect ratio. */ .movie-poster-container { position: relative; padding-top: 150%; /* 2:3 aspect ratio */ } /* --- Movie Poster Image --- Styles the movie poster image itself, ensuring it fits the container. */ .movie-poster { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } /* --- Movie Info Section --- The section of the movie card containing the title, rating, overview, and actions. */ .movie-info { padding: 1.5rem; display: flex; flex-direction: column; flex-grow: 1; min-height: 250px; } /* --- Movie Title --- Styles the title of the movie within the card. */ .movie-title { font-size: 1.2rem; font-weight: 600; margin-bottom: 0.5rem; flex-grow: 1; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } /* --- Movie Meta Info (Rating/Year) --- Container for the movie's rating and release year. */ .movie-meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; color: var(--text-color-muted); margin-bottom: 1rem; } .rating { display: flex; align-items: center; gap: 0.25rem; } .rating .fa-star { color: var(--warning-color); } /* --- Movie Overview --- Styles the movie description/overview text, truncating it to a few lines. */ .movie-overview { font-size: 0.9rem; line-height: 1.6; color: var(--text-color-muted); margin-bottom: 1.5rem; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } /* --- Movie Action Buttons --- Container for the action buttons (Details, Watchlist, etc.) on the movie card. */ .movie-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: auto; } .action-btn { background: none; border: 1px solid var(--border-color); color: var(--text-color-muted); border-radius: var(--border-radius); padding: 0.75rem; cursor: pointer; transition: var(--transition); font-size: 0.8rem; font-weight: 500; text-align: center; } /* --- Action Button Hover State --- Provides visual feedback when a user hovers over an action button. */ .action-btn:hover { background-color: var(--border-color); color: var(--text-color); } .action-btn.details { grid-column: 1 / -1; background-color: var(--primary-color); color: white; border-color: var(--primary-color); } .action-btn.details:hover { opacity: 0.9; } .action-btn i { margin-right: 0.5rem; } /* --- Loading Spinner --- Styles the loading indicator that is shown during API requests. */ #loading { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1050; background-color: rgba(0,0,0,0.5); padding: 2rem; border-radius: var(--border-radius); } .spinner-border { width: 3rem; height: 3rem; } /* Modal Styles */ .modal-dialog { max-width: 700px; } .modal-content { background-color: var(--background-color-offset); border: 1px solid var(--border-color); border-radius: 12px; padding: 1.5rem; } /* --- Modal Header --- The top section of the modal, containing the poster and title area. */ .modal-header-grid { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; margin-bottom: 1.5rem; } .modal-poster { width: 200px; border-radius: 8px; object-fit: cover; box-shadow: 0 4px 15px rgba(0,0,0,0.2); } .modal-title { font-size: 2.25rem; font-weight: 700; line-height: 1.2; } .modal-tagline { font-style: italic; color: var(--text-color-muted); margin-bottom: 1rem; font-size: 1.1rem; } .modal-meta { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; color: var(--text-color-muted); } .modal-body-section h4 { font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.75rem; border-bottom: 1px solid var(--border-color); padding-bottom: 0.75rem; } .modal-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 2rem; } .modal-overview { line-height: 1.7; color: var(--text-color-muted); margin-bottom: 2rem; } /* Responsive Adjustments */ /* --- Responsive Media Queries --- These styles apply only on smaller screens (like mobile phones) to ensure the layout adapts and remains user-friendly. */ @media (max-width: 767.98px) { .main-content { padding: 1rem; } .filter-controls select, .filter-controls input { flex-basis: 45%; min-width: 150px; } .modal-dialog { max-width: 95vw; } .modal-content { padding: 1rem; } .modal-title { font-size: 1.75rem; } .modal-poster { width: 150px; } .modal-actions .action-btn { font-size: 0.8rem; padding: 0.6rem 0.8rem; } } @media (max-width: 575.98px) { .display-4 { font-size: 2rem; margin-bottom: 0.5rem !important; } .mb-4 { margin-bottom: 1.5rem !important; } } /* Watch Providers Section */ .watch-providers-section { margin: 20px 0; padding: 15px; background: rgba(255, 255, 255, 0.05); border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); } .watch-providers-section h4 { font-weight: 600; margin-bottom: 1rem; color: var(--text-color); } .providers-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; } .provider-item { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: rgba(255, 255, 255, 0.1); border-radius: 20px; font-size: 14px; color: #fff; transition: all 0.3s ease; border: 1px solid rgba(255, 255, 255, 0.2); } .provider-item:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.3); } .provider-item i { color: #007bff; font-size: 12px; } .provider-item span { font-weight: 500; } /* Responsive adjustments for providers section */ @media (max-width: 768px) { .provider-item { padding: 6px 12px; font-size: 12px; gap: 6px; } .provider-item i { font-size: 10px; } .watch-providers-section { padding: 12px; margin: 15px 0; } } @media (max-width: 480px) { .providers-grid { gap: 8px; } .provider-item { padding: 5px 10px; font-size: 11px; gap: 5px; } .provider-item i { font-size: 9px; } } /* Ultra-small devices (<=380px): tighten layout to avoid overflow */ @media (max-width: 380px) { /* Reduce navbar horizontal padding */ .navbar { padding: 0.5rem 1rem; } /* Container breathing room without causing overflow */ .container-fluid { padding: 0 10px; } /* Movie grid: ensure cards fit narrow screens */ .movie-grid { grid-template-columns: 1fr; /* single column on very small screens */ gap: 1rem; padding: 0 0.5rem; } /* Card inner spacing/typography tweaks */ .movie-info { padding: 1rem; } .movie-title { font-size: 1.05rem; } .movie-meta { font-size: 0.85rem; gap: 0.5rem; } .movie-overview { font-size: 0.85rem; } .movie-actions { gap: 0.4rem; } .action-btn { padding: 0.6rem; font-size: 0.78rem; } /* Filters and controls should wrap comfortably */ .filter-controls select, .filter-controls input, .search-container .form-control, .search-container .form-select { min-width: 120px; } /* Modal scales to tiny screens */ .modal-dialog { max-width: 96vw; margin: 0.75rem auto; } .modal-content { padding: 0.875rem; } .modal-title { font-size: 1.5rem; } .modal-poster { width: 120px; } /* Large headings */ .display-4 { font-size: 1.75rem; } /* Pagination: keep compact */ #pagination-container { padding: 0.5rem 0; } .pagination .page-link { min-width: 30px; height: 30px; font-size: 0.78rem; padding: 0 4px; } }