/* Theme Name: iQONE WP Theme URI: https://example.com/iqone-wp Author: Converted for movie/video listing sites Description: A dark, green-accent movie & video listing WordPress theme, converted from the "iQONE" Blogger template. Includes a Movie custom post type, Genre/Quality taxonomies, a hero slider, download-link cards, and a mobile-first responsive layout. Version: 1.1.0 Requires at least: 6.0 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: iqone-wp */ /* ----------------------------------------------------------- Tokens ----------------------------------------------------------- */ :root{ --bg: #090b10; --bg-elevated: #12151d; --card: #161a24; --border: rgba(255,255,255,0.09); --text: #f3f5f9; --text-dim: #99a3b5; --accent: #22e08a; --accent-2: #17b673; --accent-gradient: linear-gradient(135deg, #2af0a0 0%, #1cc98a 55%, #14a870 100%); --accent-dim: rgba(34,224,138,0.14); --badge-red: #ef3b52; --header-bg: rgba(9,11,16,0.98); --header-border: var(--border); --nav-bg: rgba(9,11,16,0.98); --font-display: 'Poppins', sans-serif; --font-body: 'Manrope', sans-serif; --radius: 14px; --container: 1240px; --shadow-soft: 0 10px 30px rgba(0,0,0,0.35); --shadow-glow: 0 0 0 1px rgba(34,224,138,0.15), 0 12px 32px rgba(34,224,138,0.12); } /* ----------------------------------------------------------- Light mode — toggled via [data-theme="light"] on ----------------------------------------------------------- */ :root[data-theme="light"]{ --bg: #f4f6f8; --bg-elevated: #ffffff; --card: #ffffff; --border: rgba(15,23,32,0.1); --text: #10141b; --text-dim: #5b6472; --accent: #17a862; --accent-dim: rgba(23,168,98,0.12); --badge-red: #e33341; --header-bg: rgba(255,255,255,0.98); --header-border: var(--border); --nav-bg: rgba(255,255,255,0.98); } :root[data-theme="light"] .card-thumb, :root[data-theme="light"] .hero-slide, :root[data-theme="light"] .trailer-hero{ background:#e4e8ec; } /* Light mode needs a bit of shadow depth since borders alone read as flat on white */ :root[data-theme="light"] .card-thumb{ box-shadow:0 4px 14px rgba(15,23,32,0.1); } :root[data-theme="light"] .hero-slide{ box-shadow:0 8px 24px rgba(15,23,32,0.12); } :root[data-theme="light"] .search-form{ box-shadow:0 2px 8px rgba(15,23,32,0.06); } :root[data-theme="light"] .mobile-menu{ box-shadow:10px 0 30px rgba(15,23,32,0.14); } :root[data-theme="light"] .site-footer{ box-shadow:0 -2px 10px rgba(15,23,32,0.04); } :root[data-theme="light"] .btn-action, :root[data-theme="light"] .page-numbers a, :root[data-theme="light"] .tag-pill, :root[data-theme="light"] .badge-muted, :root[data-theme="light"] .comment-body, :root[data-theme="light"] .comment-respond, :root[data-theme="light"] .ad-slot-widget{ box-shadow:0 1px 4px rgba(15,23,32,0.05); } :root[data-theme="light"] .btn-comment-submit{ box-shadow:0 4px 14px rgba(23,168,98,0.25); } :root[data-theme="light"] .btn-download{ box-shadow:0 4px 14px rgba(23,168,98,0.25); } :root[data-theme="light"] .back-to-top{ box-shadow:0 4px 14px rgba(23,168,98,0.3); } /* Theme toggle button */ .theme-toggle .icon-moon{ display:block; } .theme-toggle .icon-sun{ display:none; } :root[data-theme="light"] .theme-toggle .icon-moon{ display:none; } :root[data-theme="light"] .theme-toggle .icon-sun{ display:block; } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; background: radial-gradient(1100px 520px at 12% -8%, rgba(34,224,138,0.10), transparent 60%), radial-gradient(900px 480px at 100% 0%, rgba(34,224,138,0.06), transparent 55%), var(--bg); background-attachment:fixed; color:var(--text); font-family:var(--font-body); line-height:1.65; letter-spacing:.1px; color-scheme: dark; transition:background-color .2s ease, color .2s ease; -webkit-font-smoothing:antialiased; } :root[data-theme="light"] body{ color-scheme: light; background:var(--bg); } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } h1,h2,h3,h4{ font-family:var(--font-display); margin:0 0 .5em; line-height:1.2; letter-spacing:-.01em; } ul{ list-style:none; margin:0; padding:0; } .btn-download, button{ font-family:var(--font-body); cursor:pointer; } /* ----------------------------------------------------------- Header ----------------------------------------------------------- */ .site-header{ position:sticky; top:0; z-index:100; background:var(--header-bg); border-bottom:1px solid var(--header-border); box-shadow:0 8px 24px rgba(0,0,0,0.28); transition:background-color .2s ease, border-color .2s ease; } .site-subheader{ max-width:var(--container); margin:0 auto; max-height:0; overflow:hidden; padding:0 16px; transition:max-height .25s ease, padding .25s ease; } .site-subheader.open{ max-height:90px; padding:14px 16px 18px; } .header-top{ max-width:var(--container); margin:0 auto; display:flex; align-items:center; gap:14px; padding:12px 16px; } .site-logo{ display:flex; align-items:center; gap:10px; flex-shrink:0; } .logo-icon{ display:flex; align-items:center; justify-content:center; flex-shrink:0; width:30px; height:30px; border-radius:50%; background:var(--accent-gradient); box-shadow:0 3px 10px rgba(34,224,138,0.4); } .logo-icon svg{ margin-left:1px; } .logo-text{ font-family:var(--font-display); font-weight:800; font-size:20px; background:var(--accent-gradient); -webkit-background-clip:text; background-clip:text; color:transparent; letter-spacing:.5px; } .primary-nav{ flex-shrink:0; } .primary-menu{ display:flex; gap:26px; } .primary-menu a{ font-weight:600; font-size:14.5px; color:var(--text-dim); transition:color .2s; } .primary-menu a:hover{ color:var(--accent); } .header-icon-group{ display:flex; align-items:center; gap:14px; } .icon-btn{ background:transparent; border:none; color:var(--text); width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background-color .15s ease, color .15s ease; } .icon-btn:hover{ background:var(--accent-dim); color:var(--accent); } .icon-btn.active, .icon-btn[aria-expanded="true"]{ background:var(--accent-dim); color:var(--accent); } .menu-toggle{ flex-direction:column; gap:4px; justify-content:center; } .menu-toggle span{ width:18px; height:2px; background:var(--text); } .search-toggle{ margin-left:auto; } .search-toggle .icon-close{ display:none; } .search-toggle.active .icon-search{ display:none; } .search-toggle.active .icon-close{ display:block; color:var(--accent); } .favorite-count{ position:absolute; top:-2px; right:-2px; background:var(--accent); color:#04170a; font-size:10px; font-weight:800; min-width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; padding:0 3px; } .search-form{ flex:1; min-width:0; display:flex; align-items:center; gap:6px; background:var(--bg-elevated); border:1px solid var(--border); border-radius:20px; padding:2px 3px 2px 14px; transition:border-color .2s ease, box-shadow .2s ease; } .search-form:focus-within{ border-color:rgba(34,224,138,0.5); box-shadow:0 0 0 3px rgba(34,224,138,0.1); } .search-form input{ flex:1; min-width:0; background:transparent; border:none; color:var(--text); padding:7px 0; font-size:13.5px; outline:none; } .search-form input::placeholder{ color:var(--text-dim); } .search-form button{ background:var(--bg-elevated); color:var(--text-dim); border:none; border-left:1px solid var(--border); width:34px; height:30px; padding-left:6px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .genre-tabs{ display:flex; gap:30px; overflow-x:auto; scrollbar-width:none; padding:14px 0 16px; margin-top:2px; } .genre-tabs::-webkit-scrollbar{ display:none; } .genre-tab{ flex-shrink:0; font-weight:700; font-size:17px; color:var(--text-dim); padding-bottom:8px; border-bottom:3px solid transparent; white-space:nowrap; } .genre-tab.active, .genre-tab:hover{ color:var(--accent); border-color:var(--accent); } .mobile-menu-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.55); opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease; z-index:199; } .mobile-menu-overlay.open{ opacity:1; visibility:visible; } .mobile-menu{ position:fixed; inset:0 auto 0 0; width:72%; max-width:300px; background:var(--bg-elevated); border-right:1px solid var(--border); box-shadow:10px 0 30px rgba(0,0,0,0.35); transform:translateX(-100%); transition:transform .25s ease; z-index:200; padding:0 20px 24px; overflow-y:auto; } .mobile-menu.open{ transform:translateX(0); } .mobile-menu-head{ position:sticky; top:0; background:var(--bg-elevated); display:flex; align-items:center; justify-content:space-between; gap:10px; padding:18px 0 14px; margin-bottom:4px; border-bottom:1px solid var(--border); } .mobile-menu-head .site-logo{ min-width:0; } .mobile-menu-close{ background:var(--card); flex-shrink:0; } .mobile-menu-list li{ border-bottom:1px solid var(--border); } .mobile-menu-list a{ display:block; padding:14px 4px; font-weight:600; } body.mobile-menu-active{ overflow:hidden; } /* ----------------------------------------------------------- Hero slider — single full-bleed banner with arrows/dots ----------------------------------------------------------- */ .hero-slider{ position:relative; max-width:var(--container); margin:24px auto; padding:0 20px; } .hero-viewport{ position:relative; width:100%; overflow:hidden; border-radius:14px; height:clamp(190px, 52vw, 230px); background:#1a1f28; border:1px solid var(--border); box-shadow:var(--shadow-soft); } .hero-slide{ position:absolute; inset:0; display:block; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .6s ease; } .hero-slide.active{ opacity:1; visibility:visible; pointer-events:auto; } .hero-slide-image{ position:absolute; inset:0; overflow:hidden; } .hero-slide-img{ width:100%; height:100%; object-fit:cover; } .hero-slide-overlay{ position:absolute; inset:0; pointer-events:none; background: linear-gradient(90deg, rgba(6,8,11,0.92) 0%, rgba(6,8,11,0.72) 34%, rgba(6,8,11,0.25) 62%, rgba(6,8,11,0.05) 85%), linear-gradient(0deg, rgba(6,8,11,0.55) 0%, rgba(6,8,11,0) 45%); } .hero-slide-content{ position:absolute; left:0; bottom:0; top:0; display:flex; flex-direction:column; justify-content:center; padding:14px 16px; max-width:92%; min-width:0; z-index:2; } .hero-tag{ display:inline-flex; align-items:center; gap:6px; align-self:flex-start; background:var(--accent-dim); color:var(--accent); border:1px solid rgba(34,224,138,0.35); font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; padding:4px 8px; border-radius:6px; margin-bottom:7px; } .hero-title{ font-size:clamp(16px,4.2vw,22px); margin:0 0 5px; font-weight:800; line-height:1.15; color:#f5f7fa; text-shadow:0 2px 14px rgba(0,0,0,0.6); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .hero-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:rgba(245,247,250,0.75); font-size:11px; font-weight:600; margin-bottom:7px; text-shadow:0 1px 8px rgba(0,0,0,0.5); } .hero-meta .dot{ opacity:.5; } .hero-desc{ color:rgba(245,247,250,0.72); font-size:12px; line-height:1.5; margin:0 0 10px; max-width:480px; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; text-shadow:0 1px 8px rgba(0,0,0,0.4); } .hero-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .btn-hero-play, .btn-hero-list{ display:inline-flex; align-items:center; gap:6px; border-radius:8px; font-weight:700; font-size:12.5px; padding:8px 14px; border:1px solid transparent; transition:transform .15s ease, filter .15s ease; } .btn-hero-play{ background:var(--accent-gradient); color:#04170a; box-shadow:0 4px 14px rgba(34,224,138,0.3); } .btn-hero-play:hover{ filter:brightness(1.08); transform:translateY(-1px); } .btn-hero-list{ background:rgba(20,23,30,0.55); color:#f5f7fa; border-color:rgba(255,255,255,0.25); backdrop-filter:blur(6px); } .btn-hero-list:hover{ border-color:var(--accent); color:var(--accent); } .btn-hero-list.active{ background:var(--accent-gradient); color:#04170a; border-color:transparent; } .hero-rating-badge{ position:absolute; right:10px; bottom:10px; z-index:3; display:flex; align-items:center; gap:5px; background:rgba(9,11,16,0.72); border:1px solid rgba(255,255,255,0.14); backdrop-filter:blur(8px); color:#f5f7fa; font-weight:800; font-size:11px; padding:5px 9px; border-radius:7px; } @media (min-width:768px){ .hero-rating-badge{ right:16px; bottom:16px; gap:6px; font-size:13px; padding:6px 12px; border-radius:8px; } } .hero-rating-badge svg{ flex-shrink:0; } .hero-rating-badge .imdb-label{ font-size:10px; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:.03em; } .hero-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:4; width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,0.16); background:rgba(9,11,16,0.55); color:#f5f7fa; backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; opacity:0; transition:opacity .2s ease, background-color .2s ease; } .hero-viewport:hover .hero-arrow{ opacity:1; } .hero-arrow:hover{ background:rgba(9,11,16,0.85); color:var(--accent); } .hero-arrow-prev{ left:16px; } .hero-arrow-next{ right:16px; } .hero-dots{ display:flex; justify-content:center; gap:6px; margin-top:14px; } .hero-dots button{ width:6px; height:6px; padding:0; border:none; border-radius:50%; background:var(--border); cursor:pointer; transition:width .25s ease, background-color .25s ease; } .hero-dots button:hover{ background:var(--text-dim); } .hero-dots button.active{ width:20px; border-radius:4px; background:var(--accent); } @media (min-width:768px){ .hero-viewport{ height:clamp(300px, 46vw, 340px); border-radius:18px; } .hero-arrow{ display:flex; } .hero-slide-content{ max-width:56%; padding:32px 40px; } .hero-tag{ font-size:10.5px; padding:5px 10px; margin-bottom:10px; } .hero-title{ font-size:clamp(19px,3.6vw,30px); margin-bottom:8px; } .hero-meta{ font-size:12px; margin-bottom:10px; } .hero-desc{ font-size:13px; line-height:1.6; margin-bottom:16px; -webkit-line-clamp:3; } .hero-actions{ gap:10px; } .btn-hero-play, .btn-hero-list{ font-size:13.5px; padding:10px 18px; gap:7px; } } /* ----------------------------------------------------------- Movie grid & cards ----------------------------------------------------------- */ .movie-grid-section{ max-width:var(--container); margin:40px auto; padding:0 20px; } .section-heading{ margin-bottom:20px; display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px; } .view-all-link{ display:inline-flex; align-items:center; gap:4px; color:var(--accent); font-weight:700; font-size:13px; flex-shrink:0; } .view-all-link:hover{ text-decoration:underline; } .view-all-link svg{ flex-shrink:0; } .section-heading h2{ font-size:22px; font-weight:800; position:relative; padding-left:14px; } .section-heading h2::before{ content:''; position:absolute; left:0; top:3px; bottom:3px; width:4px; border-radius:3px; background:var(--accent-gradient); box-shadow:0 0 10px rgba(34,224,138,0.5); } .archive-desc{ color:var(--text-dim); font-size:14px; } .movie-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:18px; } .movie-card{ position:relative; transition:transform .25s cubic-bezier(.2,.8,.2,1); } .movie-card:hover{ transform:translateY(-6px); } .card-thumb{ position:relative; display:block; aspect-ratio:2/3; background:#1a1f28; overflow:hidden; border-radius:10px; border:1px solid var(--border); box-shadow:0 8px 20px rgba(0,0,0,0.4); transition:border-color .25s ease, box-shadow .25s ease; } .movie-card:hover .card-thumb{ border-color:rgba(34,224,138,0.55); box-shadow:0 16px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(34,224,138,0.2), 0 0 24px rgba(34,224,138,0.18); } .card-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; } .movie-card:hover .card-thumb img{ transform:scale(1.06); } .card-thumb-fallback{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:12px; text-align:center; color:var(--text-dim); font-size:13px; } .card-badge{ position:absolute; top:0; right:0; z-index:2; background:var(--accent-gradient); color:#04170a; font-size:11.5px; font-weight:800; padding:4px 7px; line-height:14px; border-radius:0 10px 0 8px; text-align:center; letter-spacing:.02em; box-shadow:0 2px 8px rgba(34,224,138,0.35); } .card-badge-quality{ background:linear-gradient(135deg,#ff5468,var(--badge-red)); color:#fff; box-shadow:0 2px 8px rgba(239,59,82,0.35); } .card-badge-top{ background:var(--accent-gradient); color:#04170a; } .card-play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(0deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.1) 60%); opacity:0; transition:opacity .25s; color:#fff; } .movie-card:hover .card-play{ opacity:1; } .favorite-toggle{ position:absolute; top:8px; left:8px; z-index:2; background:rgba(8,10,14,0.65); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,0.15); color:#fff; width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; transition:background-color .2s ease, transform .2s ease; } .favorite-toggle:hover{ transform:scale(1.08); } .favorite-toggle.active{ background:var(--accent-gradient); color:#04170a; border-color:transparent; } .favorite-toggle.active svg{ fill:currentColor; } [data-favorite-toggle].fav-bounce{ animation:fav-bounce .45s cubic-bezier(.34,1.56,.64,1); } [data-favorite-toggle].fav-bounce svg{ animation:fav-bounce-icon .45s cubic-bezier(.34,1.56,.64,1); } @keyframes fav-bounce{ 0%{ transform:scale(1); } 30%{ transform:scale(1.32); } 55%{ transform:scale(0.92); } 100%{ transform:scale(1); } } @keyframes fav-bounce-icon{ 0%{ transform:scale(1) rotate(0); } 40%{ transform:scale(1.25) rotate(-8deg); } 70%{ transform:scale(0.95) rotate(4deg); } 100%{ transform:scale(1) rotate(0); } } @media (prefers-reduced-motion: reduce){ [data-favorite-toggle].fav-bounce, [data-favorite-toggle].fav-bounce svg{ animation:none; } } .card-body{ padding:11px 0 0; position:relative; } .card-title{ font-size:14px; font-weight:700; margin:0; color:var(--text); letter-spacing:-.01em; } .card-title a{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; white-space:normal; text-overflow:ellipsis; transition:color .15s ease; } .card-title a:hover{ color:var(--accent); } .card-meta{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-dim); margin-top:5px; } .card-year{ color:var(--text-dim); } .card-rating{ display:flex; align-items:center; gap:3px; color:#ffb800; font-weight:700; } .card-rating svg{ width:11px; height:11px; flex-shrink:0; } .no-results{ color:var(--text-dim); padding:20px 0; } /* pagination */ .pagination-wrap, nav.navigation.pagination .nav-links{ display:flex; justify-content:center; margin:36px 0 8px; } ul.page-numbers{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px; margin:0; padding:0; list-style:none; } .page-numbers li{ display:inline-flex; margin:0; } a.page-numbers, span.page-numbers{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:44px; height:44px; padding:0 16px; background:var(--bg-elevated); border:1px solid var(--border); border-radius:12px; color:var(--text-dim); font-size:14px; font-weight:700; text-decoration:none; transition:transform .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease; } a.page-numbers:hover{ color:var(--text); border-color:var(--accent); background:var(--accent-dim); transform:translateY(-1px); } span.page-numbers.current{ background:var(--accent-gradient); color:#04170a; border-color:transparent; box-shadow:0 6px 18px rgba(28,199,73,0.4); } span.page-numbers.dots{ background:transparent; border-color:transparent; color:var(--text-dim); min-width:24px; padding:0; } .page-numbers.next, .page-numbers.prev{ font-weight:700; } /* ----------------------------------------------------------- Single movie page ----------------------------------------------------------- */ .movie-single{ max-width:var(--container); margin:0 auto; } .trailer-hero{ position:relative; aspect-ratio:16/9; max-height:420px; overflow:hidden; background:#12161d; border-radius:var(--radius); margin:12px 12px 0; width:auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; } .trailer-hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; } .trailer-hero::before{ content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(10,12,16,0.05),rgba(10,12,16,0.55) 75%,rgba(10,12,16,0.75)); } .trailer-hero.playing::before{ display:none; } .trailer-hero iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:inherit; } .trailer-play-btn{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2; width:64px; height:64px; border-radius:50%; background:transparent; color:var(--accent); border:2px solid var(--accent); box-shadow:0 0 0 4px rgba(34,224,138,0.12), 0 0 18px rgba(34,224,138,0.35); display:flex; align-items:center; justify-content:center; transition:transform .2s ease, background .2s ease, color .2s ease; } .trailer-play-btn svg{ margin-left:2px; } .trailer-play-btn:hover{ transform:translate(-50%,-50%) scale(1.06); background:var(--accent-gradient); color:#04170a; } /* Custom fullscreen toggle — the embedded player's own native fullscreen button is disabled (no allowfullscreen on the iframe), so this is the only way to go fullscreen. Uses the real Fullscreen API on trailerHero itself (a same-origin element), so the browser hides its own chrome and landscape auto-rotate works properly. */ .trailer-fs-btn{ position:absolute; bottom:12px; right:12px; z-index:3; width:36px; height:36px; border-radius:8px; background:rgba(10,12,16,0.65); color:#fff; border:1px solid rgba(255,255,255,0.25); align-items:center; justify-content:center; cursor:pointer; } .trailer-fs-btn:hover{ background:rgba(10,12,16,0.85); } .trailer-hero:fullscreen, .trailer-hero:-webkit-full-screen{ width:100vw !important; height:100vh !important; max-height:none !important; aspect-ratio:auto !important; margin:0 !important; border-radius:0 !important; background:#000; } .trailer-hero:fullscreen .trailer-fs-btn, .trailer-hero:-webkit-full-screen .trailer-fs-btn{ bottom:20px; right:20px; } .movie-single-body{ padding:18px 16px 0; } .movie-single-title{ font-size:clamp(17px,3.2vw,21px); font-weight:700; margin-bottom:10px; line-height:1.35; max-height:calc(1.35em * 2); overflow:hidden; } .movie-info-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:var(--text-dim); font-size:13px; margin-bottom:12px; } .info-rating{ display:flex; align-items:center; gap:5px; color:var(--accent); font-weight:700; } .info-sep{ opacity:.4; } .movie-badges{ display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; } .badge{ font-size:11px; font-weight:700; padding:5px 12px; border-radius:6px; letter-spacing:.3px; } .badge-accent{ background:var(--accent-gradient); color:#04170a; } .badge-muted{ background:var(--bg-elevated); color:var(--text-dim); border:1px solid var(--border); } .badge-outline{ background:transparent; color:var(--accent); border:1px solid rgba(34,224,138,0.5); } .movie-meta-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; color:var(--text-dim); font-size:12px; margin-bottom:16px; } .meta-updated, .meta-comments{ display:flex; align-items:center; gap:6px; color:var(--text-dim); } .meta-comments:hover{ color:var(--accent); } .tag-pills{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; } .tag-pill{ background:var(--bg-elevated); border:1px solid var(--border); border-radius:6px; padding:4px 10px; font-size:11px; color:var(--text-dim); } .tag-pill:hover{ border-color:var(--accent); color:var(--accent); } .ad-slot{ margin-bottom:20px; } .ad-slot-label{ display:block; color:var(--text-dim); font-size:12px; margin-bottom:8px; } .ad-slot-widget{ background:var(--bg-elevated); border:1px dashed var(--border); border-radius:10px; min-height:60px; display:flex; align-items:center; justify-content:center; color:var(--text-dim); font-size:13px; text-align:center; padding:10px; } .movie-description{ position:relative; color:var(--text-dim); font-size:12.5px; line-height:1.6; margin-bottom:16px; } .movie-description strong{ color:var(--text); font-size:12.5px; } .description-text{ display:block; max-height:4.8em; overflow:hidden; transition:max-height .25s ease; } .description-text img, .description-text figure, .description-text picture{ display:none !important; } .movie-description.expanded .description-text{ max-height:1000px; } .description-toggle{ display:inline-flex; align-items:center; gap:4px; background:none; border:none; color:var(--accent); font-weight:700; font-size:11.5px; padding:4px 0 0; } .description-toggle svg{ transition:transform .2s ease; } .description-toggle.expanded svg{ transform:rotate(180deg); } .action-buttons{ display:flex; flex-wrap:nowrap; gap:5px; margin-bottom:24px; } .btn-action{ display:inline-flex; align-items:center; justify-content:center; gap:4px; font-weight:700; font-size:11px; background:var(--bg-elevated); color:var(--text); border:1px solid var(--border); padding:11px 4px; border-radius:10px; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:transform .15s ease, border-color .15s ease; } .btn-action:hover{ border-color:rgba(34,224,138,0.4); transform:translateY(-1px); } .btn-action svg{ flex-shrink:0; width:14px; height:14px; } .btn-action-label{ overflow:hidden; text-overflow:ellipsis; } .btn-action-primary{ flex:1.25; background:var(--accent-gradient); color:#04170a; border-color:transparent; box-shadow:0 4px 14px rgba(34,224,138,0.3); } .btn-action-download, .btn-action-share, .btn-action-favorite{ color:var(--accent); border-color:rgba(34,224,138,0.4); background:var(--accent-dim); } .btn-action-download:hover, .btn-action-share:hover, .btn-action-favorite:hover{ border-color:var(--accent); } @media (max-width:340px){ .btn-action{ font-size:9.5px; padding:10px 2px; gap:3px; } .btn-action svg{ width:13px; height:13px; } } @media (min-width:480px){ .btn-action{ font-size:13px; padding:13px 10px; gap:7px; } .btn-action svg{ width:16px; height:16px; } } @media (min-width:560px){ .btn-action-primary{ flex:1.7; } } .btn-action[data-favorite-toggle].active{ background:var(--accent-gradient); color:#04170a; border-color:transparent; } .download-section{ margin-bottom:32px; scroll-margin-top:80px; } .download-section h2{ font-size:17px; margin-bottom:14px; } .download-links{ display:flex; flex-wrap:wrap; gap:10px; } .btn-download{ display:inline-flex; align-items:center; gap:8px; background:var(--accent-gradient); color:#04170a; font-weight:700; font-size:14px; padding:11px 18px; border-radius:10px; box-shadow:0 6px 18px rgba(34,224,138,0.3); transition:filter .2s, transform .2s; } .btn-download:hover{ filter:brightness(1.08); transform:translateY(-2px); } .recommendation-section{ max-width:var(--container); margin:0 auto; padding:12px 20px 40px; } .recommendation-tabs{ display:flex; gap:24px; border-bottom:1px solid var(--border); margin-bottom:18px; position:sticky; top:var(--header-h, 64px); z-index:90; background:var(--bg-elevated); padding:0 20px; margin-left:-20px; margin-right:-20px; box-shadow:0 8px 18px rgba(0,0,0,0); transition:box-shadow .25s ease; } .recommendation-tabs.is-stuck{ box-shadow:0 8px 18px rgba(0,0,0,0.22); } .recommendation-tab{ background:none; border:none; cursor:pointer; font-family:var(--font-body); color:var(--text-dim); font-weight:700; font-size:15px; padding:14px 0 10px; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .15s ease, border-color .15s ease; } .recommendation-tab.active{ color:var(--text); border-bottom-color:var(--accent); } .recommendation-tab:hover{ color:var(--text); } #comments{ scroll-margin-top:calc(var(--header-h, 64px) + var(--tabs-h, 52px)); } .tab-panel{ display:none; } .tab-panel.active{ display:block; } .tab-panel .movie-comments{ max-width:none; margin:0; padding:0; } .movie-comments{ max-width:var(--container); margin:0 auto 40px; padding:0 20px; } /* ----------------------------------------------------------- Desktop premium layout — single movie page ONLY (≥900px) Mobile/tablet styles above are completely untouched. ----------------------------------------------------------- */ @media (min-width:900px){ /* Fluid scale from 900px up: sizing grows smoothly with viewport width instead of jumping between fixed "compact" and "premium" designs, so a 980px window (e.g. Chrome's desktop-site mode) and a 1280px+ desktop window look like the same design at different sizes, not two different layouts. */ .movie-single{ display:grid; grid-template-columns:clamp(220px,30vw,380px) 1fr; grid-template-rows:auto auto; column-gap:clamp(20px,3vw,36px); row-gap:0; padding-top:clamp(18px,2.2vw,28px); align-items:stretch; } /* Poster / trailer panel — card-style (not sticky), stretched to match the info card's height so the two columns are always the same size. */ .trailer-hero{ grid-column:1; grid-row:1; margin:0; width:100%; height:100%; aspect-ratio:auto; max-height:none; min-height:clamp(320px,36vw,460px); position:relative; border-radius:18px; border:1px solid var(--border); box-shadow:var(--shadow-glow); } .trailer-hero-img{ object-position:center; } .trailer-play-btn{ width:76px; height:76px; } .trailer-play-btn svg{ width:32px; height:32px; } /* Info panel — elevated card */ .movie-single-body{ grid-column:2; grid-row:1; min-width:0; padding:clamp(16px,2.2vw,24px) clamp(18px,2.6vw,28px) clamp(16px,2.2vw,22px); background:var(--bg-elevated); border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow-soft); } .movie-single-title{ font-size:clamp(17px,2vw,26px); line-height:1.25; max-height:none; margin-bottom:clamp(8px,1.1vw,12px); } .movie-info-row{ font-size:clamp(12.5px,1.4vw,14px); margin-bottom:clamp(8px,1.1vw,12px); } .movie-badges{ margin-bottom:clamp(10px,1.3vw,14px); } .movie-meta-row{ font-size:clamp(11.5px,1.2vw,12.5px); margin-bottom:clamp(10px,1.5vw,16px); } .ad-slot{ margin-bottom:clamp(12px,1.8vw,18px); } .movie-description{ font-size:clamp(12.5px,1.3vw,13.5px); line-height:1.55; max-width:680px; margin-bottom:clamp(10px,1.6vw,16px); } .movie-description strong{ font-size:clamp(12.5px,1.3vw,13.5px); } .description-text{ max-height:6em; } /* Buttons: a real 2-column grid guarantees exactly two per row at every width in this range (no flex-basis rounding that can push them to stack one-per-row), which keeps the info panel's height close to the poster's instead of ballooning taller. */ .action-buttons{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(8px,1vw,10px); margin-bottom:0; } .btn-action{ flex:none; width:100%; padding:clamp(9px,1.1vw,11px) clamp(10px,1.5vw,20px); font-size:clamp(12px,1.3vw,13px); border-radius:12px; } .btn-action svg{ width:16px; height:16px; } .btn-action:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,0.28); } .btn-action-primary{ flex:none; width:100%; } .btn-action-download{ flex:none; width:100%; } /* Related + comments strip — full width below the two columns */ .recommendation-section{ grid-column:1/-1; grid-row:2; margin-top:20px; padding:clamp(24px,3.4vw,32px) 0 40px; border-top:1px solid var(--border); } .recommendation-tabs{ gap:clamp(24px,3vw,32px); margin-bottom:22px; } .recommendation-tab{ font-size:clamp(15px,1.6vw,16px); } .movie-grid{ gap:clamp(16px,2vw,20px); } } /* ----------------------------------------------------------- Comments area — list + reply form ----------------------------------------------------------- */ .comments-title{ font-size:17px; font-weight:700; margin:0 0 18px; } .no-comments{ color:var(--text-dim); font-size:13px; margin-bottom:18px; } .comment-list{ list-style:none; margin:0 0 24px; padding:0; } .comment-list .children{ list-style:none; margin:0; padding:0 0 0 20px; border-left:1px solid var(--border); } .comment-list > li + li, .comment-list .children > li{ margin-top:16px; } .comment-body{ background:var(--bg-elevated); border:1px solid var(--border); border-radius:12px; padding:14px 16px; } .comment-meta{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:8px; } .comment-author.vcard{ display:flex; align-items:center; gap:10px; } .comment-author .avatar{ width:36px; height:36px; border-radius:50%; flex-shrink:0; } .comment-author .fn{ font-style:normal; font-weight:700; font-size:13.5px; color:var(--text); } .comment-author .says{ display:none; } .comment-metadata{ font-size:11.5px; color:var(--text-dim); white-space:nowrap; } .comment-metadata a{ color:var(--text-dim); } .comment-metadata a:hover{ color:var(--accent); } .comment-metadata .edit-link a{ color:var(--accent); margin-left:6px; } .comment-content{ color:var(--text-dim); font-size:13px; line-height:1.65; } .comment-content p{ margin:0 0 8px; } .comment-content p:last-child{ margin-bottom:0; } .comment-awaiting-moderation{ display:block; color:var(--accent); font-size:11.5px; font-style:italic; margin-top:8px; } .reply{ margin-top:10px; } .reply a{ display:inline-block; font-size:11.5px; font-weight:700; color:var(--accent); border:1px solid rgba(34,224,138,0.35); border-radius:6px; padding:4px 10px; } .reply a:hover{ background:var(--accent-dim); } .comments-pagination, .comment-navigation{ display:flex; gap:8px; justify-content:center; margin:8px 0 24px; } .comments-pagination .page-numbers, .comment-navigation a{ display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px; border:1px solid var(--border); border-radius:8px; color:var(--text-dim); font-size:12.5px; padding:0 8px; } .comments-pagination .page-numbers.current, .comments-pagination .page-numbers:hover{ border-color:var(--accent); color:var(--accent); } /* Reply / comment form */ .comment-respond{ background:var(--bg-elevated); border:1px solid var(--border); border-radius:14px; padding:20px 18px; scroll-margin-top:80px; } .comment-reply-title{ font-size:16px; font-weight:700; margin:0 0 6px; color:var(--text); } .comment-reply-title small{ font-weight:500; font-size:12px; margin-left:8px; } .comment-reply-title small a{ color:var(--accent); } .logged-in-as{ color:var(--text-dim); font-size:12.5px; margin:0 0 4px; } .logged-in-as a{ color:var(--accent); } .comment-notes{ color:var(--text-dim); font-size:12px; margin:0 0 16px; } .comment-notes .required, .required{ color:var(--badge-red); } .comment-form{ display:flex; flex-wrap:wrap; gap:14px; } .comment-field{ width:100%; margin:0; } .comment-form-author, .comment-form-email, .comment-form-url{ width:100%; } @media (min-width:640px){ .comment-form-author, .comment-form-email{ width:calc(50% - 7px); } .comment-form-url{ width:100%; } } .comment-field label{ display:block; font-size:12.5px; font-weight:700; color:var(--text); margin-bottom:6px; } .comment-field input[type="text"], .comment-field input[type="email"], .comment-field input[type="url"], .comment-field textarea{ width:100%; background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:10px; padding:11px 13px; font-family:var(--font-body); font-size:13px; transition:border-color .15s ease, box-shadow .15s ease; } .comment-field textarea{ resize:vertical; min-height:120px; line-height:1.6; } .comment-field input:focus, .comment-field textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); } .comment-form-cookies-consent{ width:100%; display:flex; align-items:center; gap:8px; margin:0; } .comment-form-cookies-consent input[type="checkbox"]{ accent-color:var(--accent); width:15px; height:15px; } .comment-form-cookies-consent label{ color:var(--text-dim); font-size:12px; margin:0; } .comment-subscription-form{ width:100%; } .comment-subscription-form label{ color:var(--text-dim); font-size:12px; display:flex; align-items:center; gap:8px; } .form-submit{ width:100%; margin:4px 0 0; } .btn-comment-submit{ background:var(--accent-gradient); color:#04170a; font-weight:700; font-size:13.5px; border:none; border-radius:10px; padding:12px 24px; cursor:pointer; box-shadow:0 4px 14px rgba(34,224,138,0.3); transition:filter .2s ease, transform .2s ease; } .btn-comment-submit:hover{ filter:brightness(1.08); transform:translateY(-1px); } /* ----------------------------------------------------------- Static page / 404 ----------------------------------------------------------- */ .static-page-wrap{ max-width:800px; margin:50px auto; padding:0 20px; } .page-title{ font-size:28px; } .error-404-section{ text-align:center; padding:100px 20px; } .error-404-section h1{ font-size:80px; color:var(--accent); } .error-search{ max-width:420px; margin:24px auto 0; } /* ----------------------------------------------------------- Footer ----------------------------------------------------------- */ .site-footer{ background:var(--bg-elevated); border-top:1px solid var(--border); margin-top:60px; box-shadow:0 -10px 30px rgba(0,0,0,0.15); } .footer-top{ max-width:var(--container); margin:0 auto; padding:48px 20px 36px; display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:32px 24px; } .footer-logo{ display:flex; align-items:center; gap:10px; } .footer-brand p{ color:var(--text-dim); font-size:14px; margin:12px 0 18px; max-width:320px; line-height:1.65; } .footer-social{ display:flex; gap:10px; } .footer-social a{ width:38px; height:38px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--text); transition:border-color .2s ease, color .2s ease, transform .2s ease, background-color .2s ease; } .footer-social a:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-dim); transform:translateY(-2px); } .footer-trust{ display:flex; align-items:center; gap:6px; margin-top:16px; color:var(--text-dim); font-size:11.5px; } .footer-trust svg{ flex-shrink:0; color:var(--accent); } .footer-widgets{ grid-column:2 / -1; display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:28px 20px; } .footer-widget-title{ font-size:14.5px; font-weight:800; margin-bottom:14px; letter-spacing:.01em; } .footer-menu-list li, .footer-widget ul li{ margin-bottom:10px; } .footer-menu-list a, .footer-widget a{ color:var(--text-dim); font-size:13.5px; transition:color .15s ease; } .footer-menu-list a:hover, .footer-widget a:hover{ color:var(--accent); } /* Footer accordion sections (Support / Information / Genres) — always expanded on desktop where there's room, collapsible on mobile to keep the footer short and legible instead of squeezing everything into tiny 3-column text. */ .footer-accordion summary{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:14.5px; font-weight:800; letter-spacing:.01em; margin-bottom:14px; list-style:none; cursor:pointer; } .footer-accordion summary::-webkit-details-marker{ display:none; } .footer-accordion-icon{ width:8px; height:8px; flex-shrink:0; margin-top:-2px; border-right:2px solid var(--text-dim); border-bottom:2px solid var(--text-dim); transform:rotate(45deg); transition:transform .2s ease; } .footer-accordion[open] .footer-accordion-icon{ transform:rotate(-135deg); margin-top:2px; } /* Force any default WordPress block-widget (Archives, Categories, Recent Posts, etc.) dropped into a footer column to match the custom columns' premium look — these ship with their own block styles (wp-block-heading, wp-block-archives__list…) that otherwise ignore the theme's title/link styling entirely. */ .footer-widget h1, .footer-widget h2, .footer-widget h3, .footer-widget h4, .footer-widget h5, .footer-widget h6{ font-size:14.5px !important; font-weight:800 !important; margin:0 0 14px !important; letter-spacing:.01em; color:var(--text); font-family:var(--font-display); } .footer-widget ul{ list-style:none; margin:0; padding:0; } .footer-widget li{ margin-bottom:10px; font-size:13.5px; } .footer-widget li a{ color:var(--text-dim) !important; font-size:13.5px !important; font-weight:400 !important; } .footer-widget li a:hover{ color:var(--accent) !important; } .footer-widget select{ background:var(--card); border:1px solid var(--border); color:var(--text); border-radius:6px; padding:6px 8px; font-size:13px; } .app-badges{ display:flex; flex-direction:column; gap:10px; } .app-badge{ display:flex; align-items:center; gap:9px; border:1px solid var(--border); border-radius:8px; padding:8px 14px; color:var(--text); transition:border-color .2s ease, background-color .2s ease; } .app-badge:hover{ border-color:var(--accent); background:var(--accent-dim); } .app-badge span{ display:flex; flex-direction:column; font-size:13.5px; font-weight:700; line-height:1.25; } .app-badge small{ font-size:9.5px; font-weight:500; color:var(--text-dim); text-transform:uppercase; letter-spacing:.03em; } .footer-bottom{ border-top:1px solid var(--border); text-align:center; padding:20px 20px; color:var(--text-dim); font-size:13px; } .footer-bottom p{ margin:4px 0; } .footer-disclaimer{ max-width:560px; margin-left:auto; margin-right:auto; font-size:11.5px; line-height:1.5; opacity:.75; } .footer-made-with{ display:flex; align-items:center; justify-content:center; gap:5px; } .footer-heart{ color:var(--badge-red); } .back-to-top{ position:fixed; right:16px; bottom:76px; width:44px; height:44px; border-radius:50%; background:var(--accent-gradient); color:#04170a; border:none; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 20px rgba(34,224,138,0.4); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:150; } .back-to-top:hover{ transform:translateY(-2px); } .back-to-top.show{ opacity:1; pointer-events:auto; } /* Bottom mobile nav bar (like the reference app layout) */ :root{ --bottom-nav-height:64px; } .bottom-nav{ position:fixed; left:0; right:0; bottom:0; width:100%; z-index:150; display:flex; justify-content:space-around; background:var(--nav-bg); border-top:1px solid var(--border); box-shadow:0 -8px 24px rgba(0,0,0,0.3); padding:9px 4px calc(9px + env(safe-area-inset-bottom)); } .bottom-nav a{ display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--text-dim); font-size:12.5px; font-weight:700; flex:1; padding:2px 0; transition:color .15s ease; } .bottom-nav svg{ width:22px; height:22px; } .bottom-nav a.active{ color:var(--accent); text-shadow:0 0 14px rgba(34,224,138,0.4); } @media (max-width:767px){ /* Just reserve real space for the fixed bar with padding — this is exactly what themoviebox.xyz itself does, nothing fancier needed. */ body{ padding-bottom:calc(var(--bottom-nav-height) + env(safe-area-inset-bottom)); } } @media (min-width:768px){ .bottom-nav{ display:none; } body{ padding-bottom:0; } } /* Footer accordion becomes a plain non-collapsible heading at desktop widths — keyed on viewport width so Chrome's "Desktop site" mode gets the real desktop footer too, since that's the whole point of requesting the desktop version. */ @media (min-width:768px){ .footer-accordion summary{ pointer-events:none; } .footer-accordion-icon{ display:none; } } /* True desktop footer: one deliberate row — brand column plus the 4 widget columns laid out explicitly, instead of letting an auto-fit grid decide how many columns fit and wrap an odd one onto a second row. */ @media (min-width:900px){ .footer-top{ grid-template-columns:1.3fr .85fr 1fr .85fr 1.05fr; } .footer-widgets{ display:contents; } } /* ----------------------------------------------------------- Responsive ----------------------------------------------------------- */ @media (max-width:900px){ .movie-hero-inner{ grid-template-columns:1fr; } .movie-poster{ width:160px; } .movie-content-wrap{ grid-template-columns:1fr; } .footer-top{ grid-template-columns:1fr; } .footer-widgets{ grid-column:1; } } @media (max-width:767px){ .primary-nav{ display:none; } .menu-toggle{ display:flex; } .movie-grid{ grid-template-columns:repeat(3, 1fr); gap:10px; } .movie-grid-popular > *:nth-child(n+7){ display:none; } /* Header: logo bar stays a single row now that search moved to the subheader */ .search-form{ padding:2px 3px 2px 16px; } .search-form input{ padding:9px 0; font-size:14.5px; } .search-form button{ width:38px; height:34px; } } /* Footer: bottom-nav already covers Home/Hot/Favorite/Genres/Profile on mobile, so Quick Links would just repeat it — drop that column and let Support, Information and Genres become full-width tap-to-expand accordions instead of squeezing everything into unreadable 3-column text. Keyed on width alone — Chrome's "Desktop site" mode should get the real desktop footer, not this. */ @media (max-width:767px){ .footer-top{ display:block; } .footer-brand{ text-align:center; margin-bottom:8px; } .footer-logo{ justify-content:center; } .footer-brand p{ font-size:12.5px; margin:10px auto 14px; line-height:1.55; } .footer-social{ justify-content:center; gap:10px; } .footer-social a{ width:32px; height:32px; } .footer-social a svg{ width:14px; height:14px; } .footer-trust{ justify-content:center; margin-top:14px; } .footer-widgets{ display:block; margin-top:6px; } .footer-widget{ border-bottom:1px solid var(--border); padding:14px 0; } .footer-widget-title{ font-size:13.5px !important; font-weight:800 !important; margin-bottom:0 !important; } .footer-accordion summary{ font-size:13.5px !important; font-weight:800 !important; margin-bottom:0; padding:2px 0; } .footer-accordion:not([open]) summary{ margin-bottom:0; } .footer-accordion ul{ margin-top:14px; } .footer-widget li{ font-size:13px !important; margin-bottom:11px !important; } .footer-widget li a{ font-size:13px !important; font-weight:400 !important; } .footer-widget-app{ border-bottom:none; } .footer-widget-app .footer-widget-title{ text-align:center; margin-bottom:12px !important; } .app-badges{ flex-direction:row; gap:10px; } .app-badge{ flex:1; justify-content:center; padding:9px 8px; } .app-badge span{ font-size:11.5px; } .app-badge small{ font-size:8px; white-space:nowrap; } } /* ----------------------------------------------------------- Desktop sidebar layout (MovieBox-style left rail) ----------------------------------------------------------- */ .site-sidebar{ display:none; } @media (min-width:900px){ .site-layout{ display:flex; align-items:flex-start; } .site-content{ flex:1; min-width:0; } .movie-grid{ grid-template-columns:repeat(5, 1fr); gap:16px; } .site-sidebar{ display:flex; flex-direction:column; width:250px; flex-shrink:0; position:sticky; top:0; height:100vh; background:var(--bg-elevated); border-right:1px solid var(--border); padding:20px 14px 24px; overflow-y:auto; scrollbar-width:thin; } .sidebar-logo{ display:flex; align-items:center; gap:10px; padding:2px 8px 22px; flex-shrink:0; } .sidebar-logo .logo-text{ font-family:var(--font-display); font-weight:800; font-size:19px; color:var(--accent); letter-spacing:.5px; } .sidebar-nav{ display:flex; flex-direction:column; gap:2px; } .sidebar-link{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:8px; color:var(--text-dim); font-weight:600; font-size:14px; transition:background-color .15s ease, color .15s ease; } .sidebar-link svg{ flex-shrink:0; } .sidebar-link:hover{ background:var(--accent-dim); color:var(--text); } .sidebar-link.active{ background:var(--accent-dim); color:var(--accent); box-shadow:inset 2px 0 0 var(--accent); } .sidebar-section-title{ margin:18px 0 4px; padding:0 12px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim); opacity:.65; } .sidebar-genre-list{ display:flex; flex-direction:column; gap:1px; } .sidebar-genre-link{ padding:8px 12px 8px 22px; font-size:13.5px; font-weight:500; } .sidebar-menu-list li{ list-style:none; } .sidebar-menu-list a{ display:block; padding:9px 12px 9px 22px; border-radius:8px; color:var(--text-dim); font-weight:500; font-size:13.5px; transition:background-color .15s ease, color .15s ease; } .sidebar-menu-list a:hover{ background:var(--accent-dim); color:var(--text); } /* Sidebar replaces the hamburger drawer + inline primary nav at this width */ .menu-toggle, .mobile-menu, .header-top .primary-nav{ display:none; } /* Topbar: logo already lives in the sidebar, so give the row over to a centered search bar + notifications + account, like the reference design. */ .header-top{ gap:18px; } .header-top .site-logo{ display:none; } .search-toggle{ display:none; } .header-search-desktop{ display:flex; flex:1; max-width:460px; margin:0 auto 0 0; } .header-notify{ position:relative; flex-shrink:0; } .header-notify-dot{ position:absolute; top:6px; right:6px; width:7px; height:7px; border-radius:50%; background:var(--badge-red); border:2px solid var(--header-bg); } .header-user{ flex-shrink:0; } .header-user-link{ display:flex; align-items:center; gap:9px; padding:4px 6px 4px 4px; border-radius:24px; transition:background-color .15s ease; } .header-user-link:hover{ background:var(--accent-dim); } .header-user-avatar{ width:32px; height:32px; border-radius:50%; object-fit:cover; flex-shrink:0; } .header-user-avatar-guest{ display:flex; align-items:center; justify-content:center; background:var(--bg-elevated); border:1px solid var(--border); color:var(--text-dim); } .header-user-name{ font-weight:700; font-size:13.5px; white-space:nowrap; } .header-user-link svg{ color:var(--text-dim); flex-shrink:0; } } .header-login-mobile{ display:none; } .header-login-mobile-avatar{ width:24px; height:24px; border-radius:50%; object-fit:cover; } @media (max-width:899px){ .header-search-desktop, .header-notify, .header-user{ display:none; } .header-login-mobile{ display:flex; } .header-icon-group{ display:flex; align-items:center; gap:2px; margin-left:auto; } .header-icon-group .search-toggle{ margin-left:0; } } /* ----------------------------------------------------------- Hot / Trending page ----------------------------------------------------------- */ .hot-card-wrap{ position:relative; } .hot-rank{ position:absolute; top:8px; left:8px; z-index:2; background:var(--accent-gradient); color:#04170a; font-family:var(--font-display); font-weight:800; font-size:12.5px; padding:3px 9px; border-radius:20px; box-shadow:0 2px 8px rgba(0,0,0,0.3); } /* ----------------------------------------------------------- Genre index (/genre/ base) ----------------------------------------------------------- */ .genre-index-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:14px; } .genre-index-card{ display:flex; flex-direction:column; gap:4px; padding:18px 16px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); transition:border-color .15s ease, transform .15s ease; } .genre-index-card:hover{ border-color:var(--accent); transform:translateY(-2px); } .genre-index-name{ font-family:var(--font-display); font-weight:700; font-size:15.5px; color:var(--text); } .genre-index-count{ font-size:12.5px; color:var(--text-dim); } /* ----------------------------------------------------------- Profile page ----------------------------------------------------------- */ .profile-hero{ display:flex; align-items:center; gap:16px; padding:22px 18px; margin-bottom:20px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); } .profile-hero-avatar{ width:72px; height:72px; border-radius:50%; object-fit:cover; flex-shrink:0; } .profile-hero-avatar-guest{ display:flex; align-items:center; justify-content:center; background:var(--bg-elevated); border:1px solid var(--border); color:var(--text-dim); } .profile-hero-info h1{ font-family:var(--font-display); font-size:19px; font-weight:700; margin:0 0 4px; } .profile-hero-info p{ font-size:13px; color:var(--text-dim); margin:0; } .profile-menu{ display:flex; flex-direction:column; gap:18px; } .profile-menu-group{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; } .profile-menu-label{ display:block; padding:12px 16px 4px; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-dim); } .profile-menu-item{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--border); font-weight:600; font-size:14.5px; color:var(--text); } .profile-menu-item:last-child{ border-bottom:none; } .profile-menu-item svg{ flex-shrink:0; color:var(--accent); } .profile-menu-item span:not(.profile-menu-hint){ flex:1; } .profile-menu-arrow{ color:var(--text-dim) !important; flex:0 0 auto !important; } .profile-menu-item:hover{ background:var(--accent-dim); } .profile-menu-item-static{ cursor:default; } .profile-menu-item-static:hover{ background:transparent; } .profile-menu-hint{ font-size:12px; color:var(--text-dim); font-weight:500; flex:0 0 auto; } .profile-menu-item-danger svg{ color:var(--badge-red); } .profile-menu-item-accent{ color:var(--accent); }