/* 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; } .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); }