/* ========================================================================== FindMeMovie - overrides -------------------------------------------------------------------------- Loaded last, after the theme stylesheets, so nothing here needs !important except where the theme uses a more specific selector. Keep site-specific tweaks in THIS file. Editing streamit.min974e.css or custom.min974e.css directly makes the theme impossible to update later. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Search bar - completely square, input and button as one component -------------------------------------------------------------------------- */ .fmv-search-group { border-radius: 0; overflow: hidden; } .fmv-search-group .form-control, .fmv-search-group .form-control:focus, .fmv-search-group input#site-search-input { border-radius: 0 !important; border: 0; box-shadow: none; outline: none; } .fmv-search-group .btn, .fmv-search-group .btn:focus, .fmv-search-group .btn:active { border-radius: 0 !important; box-shadow: none; /* sit flush against the input with no seam */ margin-left: 0; padding-left: 1.25rem; padding-right: 1.25rem; display: flex; align-items: center; justify-content: center; } /* The theme rounds .input-group children on some breakpoints. Override both ends so the component stays square on desktop and mobile alike. */ .fmv-search-group > :first-child, .fmv-search-group > :last-child, .fmv-search-group > .form-control:not(:last-child), .fmv-search-group > .btn:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } /* Search results and suggestion pills also stay square, so the whole search surface reads as one consistent component. */ .fmv-search-pill { border-radius: 0 !important; padding: .35rem .75rem; display: inline-block; text-decoration: none; } .fmv-search-result-row { border-radius: 0 !important; } /* -------------------------------------------------------------------------- 2. Header - a little more vertical breathing room The navbar carries Bootstrap's `py-xl-0` utility, which is `padding-top:0 !important; padding-bottom:0 !important` from streamit.min974e.css. A normal rule here is simply ignored on screens 1200px and up, so !important is required to override it. That is the only reason it appears in this file. Padding only. No layout, sizing or positioning is changed. -------------------------------------------------------------------------- */ .header-default .navbar, header.header-default .navbar, .iq-navbar.navbar { padding-top: 1.15rem !important; padding-bottom: 1.15rem !important; } @media (max-width: 991.98px) { .header-default .navbar, header.header-default .navbar, .iq-navbar.navbar { padding-top: .85rem !important; padding-bottom: .85rem !important; } } /* -------------------------------------------------------------------------- 2b. Header search trigger The icon keeps its circular button; the word "Search" sits beside it from lg upwards and is hidden below that, where header space is tight. -------------------------------------------------------------------------- */ .fmv-search-trigger { text-decoration: none; } .fmv-search-trigger .fmv-search-label { font-size: .95rem; line-height: 1; white-space: nowrap; color: inherit; } .fmv-search-trigger:hover .fmv-search-label { color: var(--bs-primary, #e50914); } /* -------------------------------------------------------------------------- 2c. Content pages with no hero behind the header person-detail.php and profile.php shipped with `custom-header-relative` on , which makes the header `position: absolute`. That is meant for pages with a full-bleed hero behind the header (movie-detail.php has one). Neither of these pages has a hero, so the absolute header floated over the top of plain content and its icons sat tight against the screen edge, unlike every other content page. The class is now removed from both, so the header sits in normal flow exactly as it does on view-more, blog, tags, cast and watchlist. These two rules just guarantee no stray padding is inherited either way. -------------------------------------------------------------------------- */ .fmv-person-detail .main-content, .fmv-profile .main-content { padding-top: 0; } /* -------------------------------------------------------------------------- 3. Index hero - pushed down slightly, closer to the original spacing -------------------------------------------------------------------------- */ .fmv-home .iq-banner-thumb-slider, .fmv-home .iq-main-slider, .fmv-home .banner-container { margin-top: 2.5rem; } @media (max-width: 767.98px) { .fmv-home .iq-banner-thumb-slider, .fmv-home .iq-main-slider, .fmv-home .banner-container { margin-top: 1.25rem; } } /* -------------------------------------------------------------------------- 4. Movie details hero - pushed down on large screens ONLY. Mobile is already correct, so it is deliberately left alone. -------------------------------------------------------------------------- */ @media (min-width: 992px) { .fmv-movie-detail .iq-main-slider.site-video, .fmv-movie-detail .iq-main-slider, .fmv-movie-detail .movie-detail-banner { margin-top: 3rem; } } /* -------------------------------------------------------------------------- 4b. Movie details hero banner (shown when a title has no trailer) .site-video is a zero-height box that creates its aspect ratio with padding-bottom, so the banner must fill it absolutely. Doing it this way means the hero is exactly the same height whether a trailer plays or the banner shows, and nothing below it shifts. -------------------------------------------------------------------------- */ .site-video .fmv-hero-banner-empty { background: linear-gradient(135deg, #14141a 0%, #23232e 60%, #14141a 100%); } .site-video .fmv-hero-banner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; } /* -------------------------------------------------------------------------- 5. Article body - blog posts and the static content pages -------------------------------------------------------------------------- */ .fmv-article-body h2, .fmv-article-body h3 { color: #fff; margin-top: 1.75rem; margin-bottom: .75rem; } .fmv-article-body p, .fmv-article-body li { line-height: 1.8; margin-bottom: 1rem; } .fmv-article-body ul, .fmv-article-body ol { padding-left: 1.25rem; margin-bottom: 1.25rem; } .fmv-article-body img { max-width: 100%; height: auto; border-radius: .5rem; margin: 1.25rem 0; } .fmv-article-body a { color: var(--bs-primary, #e50914); } /* -------------------------------------------------------------------------- 6. Card sliders - deliberately NOT styled here There was a "safety net" in this file that forced flex + overflow-x on .swiper-wrapper whenever a slider had not initialised. It was guarded on `.swiper-wrapper:not(.swiper-wrapper-initialized)`, but Swiper 7.4.1 adds `swiper-initialized` to the CONTAINER, not that class to the wrapper. The guard therefore never matched, the fallback stayed on permanently, and it fought Swiper's own transform-based positioning. Cards rendered, then slid out of view as soon as Swiper applied a transform or the page scrolled. The hero was unaffected because it uses the slider-*-ott instances, not .swiper-card, which is exactly why the hero kept working. Even correctly guarded, a fallback like that races Swiper's slide measurement during init, so it is not worth the risk. Swiper now owns card slider layout completely, which is how the original theme worked. If sliders ever break again, the cause is JavaScript, not CSS. Check the browser console first: swiper.js needs lodash loaded before it. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 7. Where-to-watch provider tiles -------------------------------------------------------------------------- */ .fmv-provider { transition: transform .15s ease, background-color .15s ease; border: 1px solid transparent; } .fmv-provider:hover { transform: translateY(-2px); border-color: var(--bs-primary, #e50914); } .fmv-provider img { object-fit: cover; flex-shrink: 0; }