/* 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.7.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; } /* infinite scroll */ .infinite-scroll-status{ display:flex; justify-content:center; margin:36px 0 8px; min-height:24px; } .infinite-scroll-loader{ display:none; align-items:center; gap:10px; color:var(--text-dim); font-size:14px; font-weight:600; } .infinite-scroll-loader.is-active{ display:flex; } .infinite-scroll-loader .spinner{ width:18px; height:18px; border-radius:50%; border:2.5px solid var(--border); border-top-color:var(--accent); animation:iqone-spin .7s linear infinite; } @keyframes iqone-spin{ to{ transform:rotate(360deg); } } .infinite-scroll-end{ display:none; margin:0; color:var(--text-dim); font-size:13.5px; } .infinite-scroll-end.is-visible{ display:block; } @media (prefers-reduced-motion: reduce){ .infinite-scroll-loader .spinner{ animation-duration:1.4s; } } /* ----------------------------------------------------------- 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 16px 0; width:auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; clip-path:inset(0 round var(--radius)); -webkit-clip-path:inset(0 round var(--radius)); transform:translateZ(0); -webkit-transform:translateZ(0); } .trailer-hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; } /* Blurred backdrop layer for whatever thin bars the medium-crop zoom below still leaves — a second, muted, looping