/* Theme Name: Movie Hub Theme URI: https://example.com/movies-hub Author: Heisenberg Description: Premium light and dark content portal WordPress theme Version: 1.16 License: GPL v2 or later Text Domain: movieshub */ /*-------------------------------------------------------------- >>> MoviesHub Theme — Production Style Index ---------------------------------------------------------------- 01. Reset & Normalization 02. CSS Variables & Color System 03. Base Elements (Body, Links, Media) 04. Global Layout & Grid System 05. Header (Desktop) 06. Header — Search 07. Navigation (Desktop) 08. Dark / Light Theme Toggle 09. Mobile Navigation System 09.1 Mobile Overlay 09.2 Mobile Drawer 09.3 Mobile Menu Links & Icons 09.4 Mobile Search 09.5 Mobile Widgets 09.6 Hamburger Button 09.7 Mobile Accessibility & Scroll Lock 10. Archive & Category Layout 10.1 Home Category Sections 10.2 Archive Header & Sorting 10.3 Pagination (Archive / Search) 11. Movie Grid System 11.1 Grid Layout 11.2 Movie Cards 11.3 Animations & Hover Effects 12. Single Post Layout 12.1 Post Header & Meta 12.2 Featured Media 12.3 Post Content (Typography) 12.4 Content Blocks (Lists, Tables, Quotes) 12.5 Post Footer (Categories, Tags, Views) 13. Page Templates 13.1 Page Wrapper 13.2 Page Content & Typography 13.3 Embeds (Iframe / Video) 13.4 Gutenberg Blocks (Embeds & Media) 14. Sidebar (Fully Isolated Widgets) 14.1 Sidebar Layout 14.2 Widget Cards (Classic + Block) 14.3 Search Widget 14.4 Pages & Categories Widgets 14.5 Recent Posts Widget 14.6 Social Icons (Jetpack) 15. Comments System 15.1 Comment List 15.2 Individual Comment 15.3 Comment Form 15.4 Nested Replies 16. Author Box 16.1 Author Avatar 16.2 Author Meta & Links 17. Search Results & No Content States 17.1 Search Results Layout 17.2 No Results / Empty States 18. Error Pages 18.1 404 Page Layout 18.2 Error Search & CTA 19. Footer 19.1 Footer Layout 19.2 Footer Navigation 19.3 Footer Widgets 19.4 Footer Social Icons 19.5 Footer Bottom Bar 20. UI Components 20.1 Load More Button 20.2 Skeleton / Loading States 21. Animations & Performance 21.1 Keyframes 21.2 Content Visibility & Optimizations 22. Accessibility 22.1 Focus Styles 22.2 Screen Reader Utilities 23. Responsive Breakpoints 23.1 Tablet Adjustments 23.2 Mobile Layout Fixes 24. Production Overrides (Do Not Edit) ---------------------------------------------------------------- */ /* NOTE: - Sidebar styles are fully isolated - Widget styles must be scoped to #secondary.sidebar - Do NOT add global .widget rules */ /* ================================================== 01. RESET & NORMALIZATION ================================================== */ /* ---------- Box Model ---------- */ *, *::before, *::after { box-sizing: border-box; } /* ---------- HTML & Body ---------- */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; padding: 0; min-height: 100vh; /* Prevent horizontal overflow (safe) */ overflow-x: clip; font-family: var(--font-family-base); font-size: var(--font-size-base); line-height: 1.7; background: var(--bg-body); color: var(--text-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ---------- Headings & Text ---------- */ h1, h2, h3, h4, h5, h6, p, blockquote, figure, pre { margin: 0; } /* ---------- Lists ---------- */ ul, ol { margin: 0; padding: 0; } /* Prevent iframe overflow (do NOT force aspect ratio here) */ iframe { max-width: 100%; border: 0; } /* ---------- Tables ---------- */ table { width: 100%; border-collapse: collapse; border-spacing: 0; } /* ---------- Forms ---------- */ input, textarea, select, button { margin: 0; font: inherit; color: inherit; } /* Remove iOS inner shadow / rounding issues */ input[type="search"] { -webkit-appearance: none; appearance: none; } /* ---------- Buttons ---------- */ button { background: none; border: none; padding: 0; cursor: pointer; } /* ---------- Fieldsets ---------- */ fieldset { margin: 0; padding: 0; border: 0; } /* ---------- Hidden ---------- */ [hidden] { display: none !important; } /* ================================================== 02. CSS VARIABLES & COLOR SYSTEM ================================================== */ :root { /* ------------------------------------------------- BRAND COLORS -------------------------------------------------- */ --color-accent: #ff3b3b; --color-accent-soft: #ff5a5a; --color-accent-dark: #ff2d2d; /* ------------------------------------------------- SEMANTIC ALIASES (SAFE) -------------------------------------------------- */ --accent: var(--color-accent); --accent-light: var(--color-accent-soft); --accent-dark: var(--color-accent-dark); --accent-gradient: linear-gradient( 135deg, var(--accent-dark), var(--accent-light) ); /* ------------------------------------------------- BACKGROUNDS (DARK THEME BASE) -------------------------------------------------- */ --bg-body: #0e1218; --bg-surface: #0f141c; --bg-surface-alt: #121826; --bg-card: linear-gradient( 180deg, #1a212b, #141a22 ); --bg-card-alt: linear-gradient( 180deg, #1b2330, #141a23 ); --bg-input: var(--bg-surface); --bg-chip: rgba(255, 255, 255, 0.06); /* ------------------------------------------------- TEXT COLORS -------------------------------------------------- */ --text-primary: #e5e7eb; --text-secondary: rgba(255, 255, 255, 0.82); --text-muted: rgba(255, 255, 255, 0.60); --text-soft: rgba(255, 255, 255, 0.55); --text-inverse: #ffffff; /* ------------------------------------------------- BORDERS -------------------------------------------------- */ --border-subtle: rgba(255, 255, 255, 0.06); --border-soft: rgba(255, 255, 255, 0.08); --border-medium: rgba(255, 255, 255, 0.12); --border-strong: rgba(255, 255, 255, 0.15); /* ------------------------------------------------- SHADOWS -------------------------------------------------- */ --shadow-sm: 0 8px 22px rgba(0, 0, 0, 0.35); --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45); --shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.55); --shadow-xl: 0 18px 42px rgba(0, 0, 0, 0.80); --shadow-accent: 0 10px 30px rgba(255, 45, 45, 0.35); --shadow-accent-hover: 0 15px 40px rgba(255, 45, 45, 0.45); /* ------------------------------------------------- RADIUS SCALE -------------------------------------------------- */ --radius-xs: 8px; --radius-sm: 10px; --radius-md: 12px; --radius-lg: 14px; --radius-xl: 18px; --radius-pill: 999px; /* ------------------------------------------------- SPACING SCALE -------------------------------------------------- */ --space-xxs: 4px; --space-xs: 6px; --space-sm: 10px; --space-md: 14px; --space-lg: 18px; --space-xl: 22px; --space-2xl: 30px; --space-3xl: 40px; --space-4xl: 48px; --space-5xl: 64px; /* ------------------------------------------------- TYPOGRAPHY -------------------------------------------------- */ --font-family-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-size-xs: 0.75rem; --font-size-sm: 0.85rem; --font-size-base: 0.95rem; --font-size-md: 1rem; --font-size-lg: 1.3rem; --font-size-xl: 1.6rem; --font-size-2xl: 2rem; --font-weight-medium: 400; --font-weight-regular: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900; /* ------------------------------------------------- TRANSITIONS -------------------------------------------------- */ --transition-fast: 0.2s ease; --transition-base: 0.25s ease; --transition-slow: 0.3s ease; } body.light-mode { /* ------------------------------------------------- BACKGROUNDS -------------------------------------------------- */ --bg-body: #f4f6f9; /* NOT pure white */ --bg-surface: #ffffff; --bg-surface-alt: #f1f3f6; --bg-card: #ffffff; --bg-card-alt: #f8fafc; --bg-input: #ffffff; --bg-chip: rgba(0, 0, 0, 0.04); /* ------------------------------------------------- TEXT -------------------------------------------------- */ --text-primary: #111827; --text-secondary: #374151; --text-muted: #6b7280; --text-soft: #9ca3af; --text-inverse: #ffffff; /* ------------------------------------------------- BORDERS -------------------------------------------------- */ --border-subtle: rgba(0, 0, 0, 0.08); --border-soft: rgba(0, 0, 0, 0.12); --border-medium: rgba(0, 0, 0, 0.18); --border-strong: rgba(0, 0, 0, 0.28); /* ------------------------------------------------- SHADOWS (CRITICAL) -------------------------------------------------- */ --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.12); --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.16); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.18); --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.22); --shadow-accent: 0 10px 30px rgba(255, 59, 59, 0.35); --shadow-accent-hover: 0 16px 40px rgba(255, 59, 59, 0.45); } body.light-mode .movie-card, body.light-mode .popular-post-card, body.light-mode .sidebar .widget { box-shadow: 0 6px 16px rgba(0,0,0,0.12), 0 0 0 1px var(--border-subtle); } body.light-mode .site-header { background: var(--bg-card); box-shadow: 0 4px 12px rgba(0,0,0,0.08); } body.light-mode .site-header { background: var(--bg-card); box-shadow: 0 4px 12px rgba(0,0,0,0.08); } body.light-mode .widget_categories li { border-bottom: 1px solid var(--border-subtle); } body.light-mode .widget_categories li:last-child { border-bottom: none; } body.light-mode .widget_categories li { border-bottom: 1px solid var(--border-subtle); } body.light-mode .widget_categories li:last-child { border-bottom: none; } body.light-mode .movie-card { background: var(--bg-card); } body.light-mode .movie-card img { background: var(--bg-surface-alt); } body.light-mode .menu-toggle { background: #ffffff; border-color: var(--border-soft); color: var(--text-primary); box-shadow: var(--shadow-sm); } body.light-mode .mobile-navigation a { background: #f8fafc; border-color: var(--border-soft); color: var(--text-primary); } body.light-mode .mobile-navigation a:hover { background: #eef2f7; } body.light-mode .mobile-navigation a { background: #f8fafc; border-color: var(--border-soft); color: var(--text-primary); } body.light-mode .mobile-navigation a:hover { background: #eef2f7; } body.light-mode .site-footer { background: linear-gradient(180deg, #f3f4f6, #e5e7eb); border-top: 1px solid var(--border-soft); } body.light-mode .footer-bottom { color: var(--text-muted); } body.light-mode .header-search .search-form { background: #ffffff; border-color: var(--border-soft); } /* ================================================== 03. BASE ELEMENTS ================================================== */ /* ------------------------------------------------- LINKS -------------------------------------------------- */ a { color: inherit; text-decoration: none; } a:hover { color: var(--accent); } a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ------------------------------------------------- TEXT ELEMENTS -------------------------------------------------- */ p { margin: 0 0 var(--space-lg); font-size: var(--font-size-base); color: var(--text-secondary); } strong, b { font-weight: var(--font-weight-bold); } em, i { font-style: italic; } /* ------------------------------------------------- HEADINGS -------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--space-md); font-weight: var(--font-weight-extrabold); line-height: 1.3; color: var(--text-primary); } h1 { font-size: var(--font-size-2xl); } h2 { font-size: var(--font-size-xl); } h3 { font-size: var(--font-size-lg); } h4 { font-size: var(--font-size-md); } h5 { font-size: var(--font-size-base); } h6 { font-size: var(--font-size-sm); } /* ------------------------------------------------- MEDIA (IMAGES, VIDEO, SVG) -------------------------------------------------- */ img, picture, video, canvas, svg { display: block; } img, picture { max-width: 100%; height: auto; } /* Do NOT force iframe styles here (handled later safely) */ iframe { display: block; max-width: 100%; border: 0; } /* ------------------------------------------------- LISTS -------------------------------------------------- */ ul, ol { margin: 0 0 var(--space-lg) var(--space-xl); padding: 0; } li { margin-bottom: var(--space-xs); color: var(--text-secondary); } /* ------------------------------------------------- HORIZONTAL RULE -------------------------------------------------- */ hr { height: 1px; border: none; background: var(--border-subtle); margin: var(--space-2xl) 0; } /* ------------------------------------------------- FORMS — BASE -------------------------------------------------- */ input, textarea, select, button { font-family: inherit; font-size: var(--font-size-base); color: var(--text-primary); } input, textarea, select { background: var(--bg-input); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); outline: none; } input::placeholder, textarea::placeholder { color: var(--text-soft); } input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(255, 59, 59, 0.35); } /* ------------------------------------------------- BUTTONS — BASE -------------------------------------------------- */ button { background: none; border: none; padding: 0; cursor: pointer; } button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ------------------------------------------------- TABLES -------------------------------------------------- */ table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-xl); } th, td { padding: var(--space-sm) var(--space-md); border: 1px solid var(--border-subtle); text-align: left; } th { background: rgba(255, 255, 255, 0.08); font-weight: var(--font-weight-bold); } /* ------------------------------------------------- TEXT SELECTION -------------------------------------------------- */ ::selection { background: var(--accent); color: var(--text-inverse); } /* ================================================== 04. GLOBAL LAYOUT & GRID SYSTEM ================================================== */ /* ------------------------------------------------- GLOBAL CONTAINER -------------------------------------------------- */ .container { width: 100%; max-width: 1250px; margin-left: auto; margin-right: auto; padding-left: var(--space-lg); padding-right: var(--space-lg); } /* ------------------------------------------------- SITE WRAPPER -------------------------------------------------- */ .site { display: block; min-height: 100vh; } .site-content { display: block; width: 100%; } /* ------------------------------------------------- SPACING AFTER HEADER (HOME / ARCHIVE) -------------------------------------------------- */ .home .site-main, .archive .site-main { margin-top: var(--space-sm); } /* ------------------------------------------------- MAIN GRID (CONTENT + SIDEBAR) -------------------------------------------------- */ .main-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: start; } /* Primary content safety */ .site-main { min-width: 0; } /* Sidebar wrapper safety */ .sidebar { min-width: 0; } /* ------------------------------------------------- SECTION & ARTICLE SPACING -------------------------------------------------- */ section { margin-bottom: var(--space-3xl); } article { margin-bottom: var(--space-3xl); } /* ------------------------------------------------- OVERFLOW & WORD WRAP SAFETY -------------------------------------------------- */ .site-content, .site-main, section, article, main { max-width: 100%; overflow-wrap: break-word; word-break: normal; } /* ------------------------------------------------- MEDIA SAFETY (GLOBAL) -------------------------------------------------- */ .site-content img, .site-content video, .site-content iframe { max-width: 100%; } /* ------------------------------------------------- RESPONSIVE GRID FALLBACK -------------------------------------------------- */ @media (max-width: 1024px) { .main-grid { grid-template-columns: 1fr; gap: var(--space-xl); } .sidebar { margin-top: var(--space-3xl); } } /* ------------------------------------------------- MOBILE CONTAINER ADJUSTMENT -------------------------------------------------- */ @media (max-width: 768px) { .container { padding-left: var(--space-md); padding-right: var(--space-md); } section, article { margin-bottom: var(--space-2xl); } } /* ================================================== 05. HEADER (DESKTOP) ================================================== */ /* ------------------------------------------------- SITE HEADER -------------------------------------------------- */ .site-header { position: relative; z-index: 1000; background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); min-height: 72px; } /* ------------------------------------------------- HEADER INNER WRAPPER -------------------------------------------------- */ .header-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: var(--space-lg); } /* ------------------------------------------------- BRAND / LOGO AREA -------------------------------------------------- */ .site-branding { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; } .brand-wrap { display: flex; align-items: center; gap: var(--space-sm); } .brand-text { display: flex; flex-direction: column; line-height: 1.1; } .site-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-black); color: var(--text-primary); } .site-tagline { font-size: var(--font-size-xs); color: var(--text-muted); } /* ------------------------------------------------- HEADER ACTIONS (RIGHT SIDE) -------------------------------------------------- */ .header-actions { display: flex; align-items: center; gap: var(--space-sm); flex-shrink: 0; } /* ------------------------------------------------- DESKTOP VISIBILITY SAFETY -------------------------------------------------- */ @media (min-width: 901px) { .site-header, .header-inner { content-visibility: visible; contain: none; } } /* ================================================== 06. HEADER — SEARCH ================================================== */ /* ------------------------------------------------- HEADER SEARCH WRAPPER -------------------------------------------------- */ .header-search { display: flex; align-items: center; flex-shrink: 0; } /* ------------------------------------------------- SEARCH FORM -------------------------------------------------- */ .header-search .search-form { display: flex; align-items: center; height: 34px; padding: 0 var(--space-sm); background: var(--bg-surface-alt); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); } /* ------------------------------------------------- SEARCH INPUT -------------------------------------------------- */ .header-search .search-field { width: 110px; background: transparent; border: none; outline: none; font-size: var(--font-size-sm); color: var(--text-primary); } /* placeholder */ .header-search .search-field::placeholder { color: var(--text-soft); } /* ------------------------------------------------- SEARCH SUBMIT (HIDDEN IN HEADER) -------------------------------------------------- */ .header-search .search-submit { display: none; } /* ------------------------------------------------- FOCUS STATE -------------------------------------------------- */ .header-search .search-field:focus { box-shadow: none; } /* ================================================== 07. NAVIGATION (DESKTOP) ================================================== */ /* ------------------------------------------------- NAV WRAPPER -------------------------------------------------- */ .desktop-nav { display: flex; align-items: center; justify-content: center; } /* ------------------------------------------------- MENU LIST -------------------------------------------------- */ .main-navigation ul { display: flex; align-items: center; gap: var(--space-xl); list-style: none; margin: 0; padding: 0; } /* ------------------------------------------------- MENU ITEMS -------------------------------------------------- */ .main-navigation li { position: relative; } /* ------------------------------------------------- MENU LINKS -------------------------------------------------- */ .main-navigation a { display: inline-block; padding: var(--space-xs) 0; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--text-primary); text-decoration: none; position: relative; } /* ------------------------------------------------- UNDERLINE HOVER / ACTIVE INDICATOR -------------------------------------------------- */ .main-navigation a::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; background: var(--accent); border-radius: 2px; transition: width var(--transition-base); } /* hover + active */ .main-navigation a:hover::after, .main-navigation .current-menu-item > a::after, .main-navigation .current_page_item > a::after { width: 100%; } /* hover color */ .main-navigation a:hover { color: var(--accent); } /* ------------------------------------------------- SUBMENU (DESKTOP DROPDOWN) -------------------------------------------------- */ .main-navigation .sub-menu { position: absolute; top: 100%; left: 0; min-width: 180px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-sm) 0; margin-top: var(--space-sm); box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast); z-index: 1000; } /* show dropdown */ .main-navigation li:hover > .sub-menu, .main-navigation li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } /* ------------------------------------------------- SUBMENU ITEMS -------------------------------------------------- */ .main-navigation .sub-menu li { width: 100%; } /* ------------------------------------------------- SUBMENU LINKS -------------------------------------------------- */ .main-navigation .sub-menu a { display: block; padding: var(--space-xs) var(--space-lg); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--text-secondary); } .main-navigation .sub-menu a:hover { background: rgba(255, 255, 255, 0.06); color: var(--text-primary); } /* ------------------------------------------------- ACCESSIBILITY -------------------------------------------------- */ .main-navigation a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ------------------------------------------------- DESKTOP-ONLY VISIBILITY -------------------------------------------------- */ @media (max-width: 900px) { .main-navigation { display: none; } } /* ================================================== 08. DARK / LIGHT THEME TOGGLE ================================================== */ /* ------------------------------------------------- TOGGLE WRAPPER -------------------------------------------------- */ .theme-toggle { position: relative; width: 44px; height: 22px; background: var(--bg-surface-alt); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); cursor: pointer; transition: background var(--transition-base), border-color var(--transition-base); } /* ------------------------------------------------- TOGGLE SLIDER (CIRCLE) -------------------------------------------------- */ .theme-toggle .toggle-circle { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: var(--accent); border-radius: 50%; transition: transform var(--transition-base); } /* ------------------------------------------------- ICON CONTAINERS (SUN / MOON) -------------------------------------------------- */ .theme-toggle .icon-sun, .theme-toggle .icon-moon { position: absolute; top: 50%; transform: translateY(-50%); font-size: 11px; line-height: 1; pointer-events: none; user-select: none; color: var(--text-inverse); opacity: 0.6; } /* Sun icon (left) */ .theme-toggle .icon-sun { left: 6px; } /* Moon icon (right) */ .theme-toggle .icon-moon { right: 6px; } /* ------------------------------------------------- DARK MODE STATE (DEFAULT) -------------------------------------------------- */ body.dark-mode .theme-toggle { background: var(--accent); border-color: var(--accent); } body.dark-mode .theme-toggle .toggle-circle { transform: translateX(20px); } body.dark-mode .icon-sun { opacity: 0.3; } body.dark-mode .icon-moon { opacity: 1; } /* ------------------------------------------------- LIGHT MODE STATE -------------------------------------------------- */ body.light-mode .theme-toggle { background: var(--bg-surface-alt); border-color: var(--border-subtle); } body.light-mode .theme-toggle .toggle-circle { transform: translateX(0); } body.light-mode .icon-sun { opacity: 1; } body.light-mode .icon-moon { opacity: 0.3; } /* ------------------------------------------------- FOCUS / ACCESSIBILITY -------------------------------------------------- */ .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ================================================== 09. MOBILE NAVIGATION SYSTEM ================================================== */ /* ================================================== 09.1 MOBILE OVERLAY ================================================== */ .mobile-menu-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--transition-slow), visibility var(--transition-slow); z-index: 9998; } body.menu-open .mobile-menu-overlay { opacity: 1; visibility: visible; pointer-events: auto; } /* ================================================== 09.2 MOBILE DRAWER ================================================== */ .mobile-navigation { position: fixed; top: 0; right: -340px; width: 320px; max-width: 92%; height: 100vh; display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-lg); background: rgba(20, 22, 30, 0.96); border-left: 1px solid var(--border-subtle); border-radius: var(--radius-lg) 0 0 var(--radius-lg); box-shadow: -14px 0 45px rgba(0, 0, 0, 0.55); overflow-y: auto; overscroll-behavior: contain; transform: translateX(6px); opacity: 0.96; transition: right var(--transition-slow), transform var(--transition-base), opacity var(--transition-fast); z-index: 9999; } body.menu-open .mobile-navigation { right: 0; transform: translateX(0); opacity: 1; } /* ================================================== 09.3 MOBILE MENU LIST RESET ================================================== */ .mobile-navigation ul { list-style: none; margin: 0; padding: 0; } .mobile-navigation li { margin-bottom: var(--space-sm); } .mobile-navigation li:last-child { margin-bottom: 0; } /* ================================================== 09.4 MOBILE CLOSE BUTTON ================================================== */ .mobile-close { position: sticky; top: var(--space-sm); align-self: flex-end; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--border-soft); border-radius: var(--radius-md); cursor: pointer; box-shadow: var(--shadow-md); z-index: 20; transition: background var(--transition-fast), transform var(--transition-fast); } .mobile-close:hover { background: rgba(255, 255, 255, 0.14); transform: scale(1.05); } .mobile-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ================================================== 09.5 MOBILE MENU LINKS ================================================== */ .mobile-navigation a { display: block; position: relative; padding: var(--space-sm) var(--space-md) var(--space-sm) 42px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-soft); border-radius: var(--radius-md); color: var(--text-primary); font-weight: var(--font-weight-semibold); text-decoration: none; transition: background var(--transition-fast), transform var(--transition-fast); } .mobile-navigation a:hover { background: rgba(255, 255, 255, 0.12); transform: translateX(4px); } /* Active item */ .mobile-navigation .current-menu-item > a { background: rgba(255, 59, 59, 0.15); border-color: rgba(255, 59, 59, 0.35); } /* ========================= 09.6 MOBILE SEARCH — GRID FIX (FINAL) ========================= */ .mobile-search { width: 100%; } /* GRID instead of flex — fixes overflow permanently */ .mobile-search form { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: var(--space-sm); width: 100%; padding: var(--space-sm); background: rgba(255,255,255,0.07); border: 1px solid var(--border-medium); border-radius: var(--radius-lg); box-sizing: border-box; } /* Search input */ .mobile-search .search-field { width: 100%; min-width: 0; height: 36px; background: transparent; border: none; font-size: var(--font-size-sm); color: var(--text-primary); } /* Search button — HARD BOUND */ .mobile-search .search-submit { height: 36px; padding: 0 14px; max-width: 96px; background: var(--accent); border-radius: var(--radius-md); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--text-inverse); white-space: nowrap; } /* ================================================== 09.7 HAMBURGER BUTTON (CRITICAL) ================================================== */ .menu-toggle { width: 34px; height: 34px; min-width: 34px; min-height: 34px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-soft); border-radius: var(--radius-md); cursor: pointer; flex-shrink: 0; position: relative; z-index: 1001; color: var(--text-primary); } /* Hamburger icon */ .menu-toggle .hamburger-icon { position: relative; width: 16px; height: 12px; } /* Lines */ .menu-toggle .hamburger-icon span { position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; border-radius: 2px; display: block; transition: transform var(--transition-fast), opacity var(--transition-fast); } .menu-toggle .hamburger-icon span:nth-child(1) { top: 0; } .menu-toggle .hamburger-icon span:nth-child(2) { top: 5px; } .menu-toggle .hamburger-icon span:nth-child(3) { top: 10px; } /* Open (X) state */ body.menu-open .menu-toggle .hamburger-icon span:nth-child(1) { transform: translateY(5px) rotate(45deg); } body.menu-open .menu-toggle .hamburger-icon span:nth-child(2) { opacity: 0; } body.menu-open .menu-toggle .hamburger-icon span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); } /* ================================================== 09.8 MOBILE ACCESSIBILITY & SCROLL LOCK ================================================== */ body.menu-open { overflow: hidden; } /* Keyboard focus */ .menu-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ================================================== VISIBILITY RULES (DEVICE SAFE) ================================================== */ /* Desktop: hide hamburger */ @media (min-width: 901px) { .menu-toggle { display: none; } } /* Mobile & tablet: show hamburger */ @media (max-width: 900px) { .menu-toggle { display: inline-flex; visibility: visible; opacity: 1; } .mobile-navigation *, .mobile-search * { box-sizing: border-box; } } /* ================================================== 10. ARCHIVE & CATEGORY LAYOUT ================================================== */ /* ================================================== 10.1 HOME CATEGORY SECTIONS ================================================== */ .home-category-section { position: relative; background: var(--bg-card-alt); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-xl); margin-bottom: var(--space-3xl); box-shadow: var(--shadow-lg); } /* Accent glow line */ .home-category-section::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient( 90deg, transparent, var(--accent), transparent ); } /* ================================================== ARCHIVE HEADER (TITLE + ACTION) ================================================== */ .archive-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: nowrap; padding-bottom: var(--space-md); margin-bottom: var(--space-lg); border-bottom: 1px solid var(--border-subtle); } /* Title safety */ .archive-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-extrabold); color: var(--text-primary); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ================================================== SHOW MORE BUTTON (INLINE FIX) ================================================== */ .show-more-btn { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; padding: var(--space-xs) var(--space-lg); border-radius: var(--radius-pill); background: linear-gradient( 135deg, var(--accent-dark), var(--accent-light) ); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: var(--text-inverse); text-decoration: none; white-space: nowrap; box-shadow: var(--shadow-accent); transition: transform var(--transition-fast), box-shadow var(--transition-fast); } .show-more-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-accent-hover); } /* ================================================== 10.2 CATEGORY HEADER (ARCHIVE PAGE) ================================================== */ .category-header { position: relative; background: var(--bg-card-alt); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-lg); margin-bottom: var(--space-xl); box-shadow: var(--shadow-lg); } /* Accent glow */ .category-header::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient( 90deg, transparent, var(--accent), transparent ); } .category-header .archive-header { padding-bottom: 0; margin-bottom: 0; border-bottom: none; } .category-title { margin: 0; font-size: var(--font-size-xl); font-weight: var(--font-weight-black); letter-spacing: 0.4px; color: var(--text-primary); } /* ================================================== 10.3 ARCHIVE SORT DROPDOWN ================================================== */ .archive-sort { position: relative; flex-shrink: 0; } .archive-sort select { appearance: none; padding: var(--space-xs) 36px var(--space-xs) var(--space-md); border-radius: var(--radius-pill); background: linear-gradient( 135deg, var(--accent-dark), var(--accent-light) ); color: var(--text-inverse); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); border: none; cursor: pointer; box-shadow: var(--shadow-accent); } /* Arrow */ .archive-sort::after { content: ""; position: absolute; top: 50%; right: 14px; width: 10px; height: 10px; transform: translateY(-50%); pointer-events: none; background-color: var(--text-inverse); mask: url("data:image/svg+xml;utf8,\ \ \ ") no-repeat center / contain; } /* ================================================== 10.4 PAGINATION (ARCHIVE / SEARCH) ================================================== */ .archive-pagination { display: flex; justify-content: center; margin: var(--space-4xl) 0; } /* Nav wrapper */ .archive-pagination .nav-links { display: flex; align-items: center; gap: 8px; max-width: 100%; overflow-x: auto; padding: 4px; scrollbar-width: none; } .archive-pagination .nav-links::-webkit-scrollbar { display: none; } /* Page items */ .archive-pagination a, .archive-pagination span { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.9rem; font-weight: 700; color: var(--text-primary); text-decoration: none; flex-shrink: 0; transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); } /* Hover */ .archive-pagination a:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-2px); box-shadow: var(--shadow-sm); } /* Current */ .archive-pagination .current { background: linear-gradient( 135deg, var(--accent-dark), var(--accent-light) ); color: var(--text-inverse); border: none; box-shadow: var(--shadow-accent); } /* Dots */ .archive-pagination .dots { background: transparent; border: none; cursor: default; } /* ================================================== PAGINATION ARROWS (LIVE SAFE) ================================================== */ .archive-pagination .prev, .archive-pagination .next { position: relative; color: transparent; } .archive-pagination .prev::before, .archive-pagination .next::before { content: ""; width: 14px; height: 14px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-repeat: no-repeat; background-position: center; background-size: contain; } .archive-pagination .prev::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e5e7eb' d='M14 6l-6 6 6 6'/%3E%3C/svg%3E"); } .archive-pagination .next::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e5e7eb' d='M10 6l6 6-6 6'/%3E%3C/svg%3E"); } /* ================================================== MOBILE FIXES ================================================== */ @media (max-width: 768px) { /* Keep header inline */ .archive-header { gap: var(--space-sm); } /* Pagination tap targets */ .archive-pagination a, .archive-pagination span { min-width: 44px; height: 44px; } } /* ================================================== 11. MOVIE GRID SYSTEM ================================================== */ /* ================================================== 11.1 GRID LAYOUT ================================================== */ .movie-grid { display: grid; /* Desktop default */ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-md); width: 100%; max-width: 100%; /* Performance safe */ contain: layout paint; } /* Fallback for older browsers */ @supports not (content-visibility: auto) { .movie-grid { contain: none; } } /* ================================================== 11.2 MOVIE CARD ================================================== */ .movie-card { position: relative; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); transition: transform var(--transition-base), box-shadow var(--transition-base); } .movie-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } /* ================================================== POSTER IMAGE ================================================== */ .movie-card img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; } /* ================================================== MOVIE TITLE ================================================== */ .movie-title { padding: var(--space-sm); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); line-height: 1.35; text-align: center; color: var(--text-primary); } /* ================================================== 11.3 HOVER OVERLAY (OPTIONAL) ================================================== */ .movie-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0) ); opacity: 0; pointer-events: none; transition: opacity var(--transition-fast); } .movie-card:hover::after { opacity: 1; } /* ================================================== MOBILE & TABLET FIXES ================================================== */ /* Tablet */ @media (max-width: 1024px) { .movie-grid { grid-template-columns: repeat(3, 1fr); } } /* Mobile — FORCE 2 COLUMNS (CRITICAL FIX) */ @media (max-width: 768px) { .movie-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); } .movie-card { border-radius: var(--radius-md); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); } .movie-title { padding: 6px 8px; font-size: 0.72rem; line-height: 1.25; } } /* Very small devices */ @media (max-width: 360px) { .movie-grid { gap: 6px; } } /* ================================================== 12. SINGLE POST LAYOUT ================================================== */ /* ================================================== 12.1 POST WRAPPER ================================================== */ .single-post { background: var(--bg-card-alt); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-2xl); box-shadow: var(--shadow-lg); width: 100%; max-width: 100%; } /* ================================================== 12.2 POST HEADER ================================================== */ .single-header { margin-bottom: var(--space-xl); } .single-title { margin: 0 0 var(--space-sm); font-size: var(--font-size-2xl); font-weight: var(--font-weight-black); line-height: 1.3; color: var(--text-primary); } /* ================================================== 12.3 POST META ================================================== */ .single-meta { font-size: var(--font-size-xs); color: var(--text-muted); } .single-meta a { color: var(--accent); font-weight: var(--font-weight-bold); text-decoration: none; } .single-meta a:hover { text-decoration: underline; } .meta-sep { margin: 0 var(--space-xs); } /* ========================= 12.4 POST VIEWS ========================= */ .single-views { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); line-height: 1; color: var(--text-muted); white-space: nowrap; } /* Eye icon */ .single-views .views-icon { width: 15px; height: 15px; display: inline-block; flex-shrink: 0; fill: currentColor; opacity: 0.85; } /* ================================================== 12.5 FEATURED MEDIA ================================================== */ .single-thumbnail { margin: var(--space-xl) 0; } .single-thumbnail img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); } /* ================================================== 12.6 POST CONTENT (TYPOGRAPHY) ================================================== */ .single-entry-content { font-size: var(--font-size-base); line-height: 1.75; color: var(--text-secondary); width: 100%; max-width: 100%; } /* Paragraphs */ .single-entry-content p { margin-bottom: var(--space-lg); } /* Headings */ .single-entry-content h2, .single-entry-content h3, .single-entry-content h4 { margin: var(--space-3xl) 0 var(--space-md); font-weight: var(--font-weight-extrabold); color: var(--text-primary); } /* Links */ .single-entry-content a { color: var(--accent); font-weight: var(--font-weight-bold); text-decoration: none; } .single-entry-content a:hover { text-decoration: underline; } /* ================================================== 12.7 IFRAME & VIDEO — FINAL RESPONSIVE FIX ================================================== */ .single-entry-content iframe, .single-entry-content video { display: block; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 400px; aspect-ratio: 16 / 9; margin: var(--space-xl) auto; border: 0; } /* Kill hardcoded inline dimensions */ .single-entry-content iframe[width], .single-entry-content iframe[height], .single-entry-content iframe[style*="width"], .single-entry-content iframe[style*="height"] { width: 100% !important; height: auto !important; } /* Prevent absolute positioning break */ .single-entry-content iframe[style*="position:absolute"], .single-entry-content iframe[style*="position: absolute"] { position: relative !important; inset: auto !important; } /* ========================= 12.8 POPULAR POSTS — SINGLE PAGE ========================= */ .single-popular-posts { margin-top: var(--space-4xl); padding-top: var(--space-xl); border-top: 1px solid var(--border-subtle); } .popular-title { margin-bottom: var(--space-lg); font-size: var(--font-size-lg); font-weight: var(--font-weight-extrabold); color: var(--text-primary); } .popular-posts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); } .popular-post-card { background: var(--bg-card-alt); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); transition: transform var(--transition-fast), box-shadow var(--transition-fast); } .popular-post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); } .popular-thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; } .popular-content { padding: var(--space-md); } .popular-post-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); margin-bottom: var(--space-xs); } .popular-post-title a { color: var(--text-primary); text-decoration: none; } .popular-post-title a:hover { color: var(--accent); } .popular-views { font-size: var(--font-size-xs); color: var(--text-muted); } /* ========================= 12.8.1 POPULAR POSTS — RESPONSIVE ========================= */ /* Tablets */ @media (max-width: 1024px) { .popular-posts-grid { grid-template-columns: repeat(2, 1fr); } } /* Mobile */ @media (max-width: 600px) { .single-popular-posts { margin-top: var(--space-3xl); padding-top: var(--space-lg); } .popular-posts-grid { grid-template-columns: 1fr; gap: var(--space-md); } .popular-content { padding: var(--space-sm); } .popular-post-title { font-size: var(--font-size-base); line-height: 1.4; } .popular-views { font-size: var(--font-size-2xs); } } @media (max-width: 480px) { .popular-posts-grid { grid-template-columns: repeat(2, 1fr); } } /* ================================================== 12.9 CONTENT BLOCKS ================================================== */ /* Blockquote */ .single-entry-content blockquote { margin: var(--space-3xl) 0; padding: var(--space-lg) var(--space-xl); background: rgba(255, 255, 255, 0.05); border-left: 4px solid var(--accent); color: var(--text-secondary); } /* Lists */ .single-entry-content ul, .single-entry-content ol { margin: 0 0 var(--space-lg) var(--space-xl); } .single-entry-content li { margin-bottom: var(--space-xs); } /* Tables */ .single-entry-content table { width: 100%; border-collapse: collapse; margin: var(--space-xl) 0; } .single-entry-content th, .single-entry-content td { padding: var(--space-md); border: 1px solid var(--border-subtle); } .single-entry-content th { background: rgba(255, 255, 255, 0.08); } /* ================================================== 12.10 POST FOOTER ================================================== */ .single-footer { margin-top: var(--space-3xl); padding-top: var(--space-lg); border-top: 1px solid var(--border-subtle); } /* Categories & tags */ .single-categories a, .single-tags a { display: inline-block; margin: var(--space-xs) var(--space-sm) 0 0; padding: var(--space-xs) var(--space-md); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border-soft); border-radius: var(--radius-pill); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: var(--text-primary); text-decoration: none; transition: background var(--transition-fast), color var(--transition-fast); } .single-categories a:hover, .single-tags a:hover { background: var(--accent); color: var(--text-inverse); } /* ================================================== 12.11 MOBILE ADJUSTMENTS ================================================== */ @media (max-width: 768px) { .single-post { padding: var(--space-lg); } .single-title { font-size: var(--font-size-xl); } .single-entry-content { font-size: var(--font-size-sm); } } /* ================================================== 13. PAGES ================================================== */ /* ========================= PAGE WRAPPER ========================= */ .page-content { background: var(--bg-card-alt); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-3xl); box-shadow: var(--shadow-lg); } /* ========================= PAGE TITLE ========================= */ .page-title { margin: 0 0 var(--space-xl); font-size: var(--font-size-2xl); font-weight: var(--font-weight-black); color: var(--text-primary); } /* ========================= PAGE CONTENT ========================= */ .page-entry-content { font-size: var(--font-size-base); line-height: 1.75; color: var(--text-secondary); } /* paragraphs */ .page-entry-content p { margin-bottom: var(--space-lg); } /* headings */ .page-entry-content h2, .page-entry-content h3, .page-entry-content h4 { margin: var(--space-3xl) 0 var(--space-md); font-weight: var(--font-weight-extrabold); color: var(--text-primary); } /* ========================= CONTENT LINKS ========================= */ .page-entry-content a { color: var(--accent); font-weight: var(--font-weight-bold); text-decoration: none; } .page-entry-content a:hover { text-decoration: underline; } /* ========================= BLOCKQUOTE ========================= */ .page-entry-content blockquote { margin: var(--space-3xl) 0; padding: var(--space-lg) var(--space-xl); background: rgba(255,255,255,0.05); border-left: 4px solid var(--accent); color: var(--text-secondary); } /* ========================= LISTS ========================= */ .page-entry-content ul, .page-entry-content ol { margin: 0 0 var(--space-lg) var(--space-xl); } .page-entry-content li { margin-bottom: var(--space-xs); } /* ========================= IMAGES ========================= */ .page-entry-content img { max-width: 100%; height: auto; display: block; margin: var(--space-xl) 0; border-radius: var(--radius-md); } /* ========================= TABLES ========================= */ .page-entry-content table { width: 100%; border-collapse: collapse; margin: var(--space-xl) 0; } .page-entry-content th, .page-entry-content td { padding: var(--space-md); border: 1px solid var(--border-subtle); } .page-entry-content th { background: rgba(255,255,255,0.08); } /* ========================= VIDEO / IFRAME FINAL FIX ========================= */ .page-entry-content iframe, .page-entry-content video { width: 100%; height: auto; aspect-ratio: 16 / 9; min-height: unset; display: block; margin: var(--space-xl) auto; } /* ========================= PAGE PAGINATION ========================= */ .page-links { margin-top: var(--space-3xl); text-align: center; } .page-links a, .page-links span { display: inline-block; margin: 0 var(--space-xs); padding: var(--space-xs) var(--space-md); background: rgba(255,255,255,0.06); border: 1px solid var(--border-soft); border-radius: var(--radius-pill); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: var(--text-primary); } .page-links .current { background: linear-gradient( 135deg, var(--accent-dark), var(--accent-light) ); color: var(--text-inverse); border: none; } /* ================================================== 14. SIDEBAR — CLASSIC + BLOCK (LIVE SAFE) ================================================== */ /* ========================= SIDEBAR LAYOUT ========================= */ #secondary.sidebar { display: flex; flex-direction: column; padding-top: var(--space-md); } #secondary.sidebar .sidebar-inner { display: flex; flex-direction: column; gap: var(--space-lg); } /* hard safety */ #secondary.sidebar, #secondary.sidebar * { box-sizing: border-box; } /* ========================= BASE WIDGET CARD (ALL TYPES) ========================= */ #secondary.sidebar .widget, #secondary.sidebar .sidebar-widget, #secondary.sidebar .widget_search, #secondary.sidebar .wp-block-search, #secondary.sidebar .wp-block-group, #secondary.sidebar .wp-block { background: var(--bg-card-alt); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow-lg); } /* ========================= WIDGET TITLES ========================= */ #secondary.sidebar .widget-title, #secondary.sidebar .wp-block-heading { margin-bottom: var(--space-md); font-size: var(--font-size-xs); font-weight: var(--font-weight-extrabold); text-transform: uppercase; letter-spacing: 0.8px; color: var(--accent-light); } /* ========================= TEXT ========================= */ #secondary.sidebar p { margin: 0; font-size: var(--font-size-sm); line-height: 1.5; color: var(--text-secondary); } /* ========================= LIST RESET ========================= */ #secondary.sidebar ul { list-style: none; margin: 0; padding: 0; } #secondary.sidebar li { margin: 0; } /* ================================================== SEARCH — CLASSIC + BLOCK ================================================== */ #secondary.sidebar .search-form, #secondary.sidebar .wp-block-search__inside-wrapper { display: flex; align-items: center; gap: var(--space-sm); } #secondary.sidebar .search-form label { flex: 1; margin: 0; } #secondary.sidebar .search-field, #secondary.sidebar .wp-block-search__input { width: 100%; height: 40px; padding: 0 var(--space-md); background: var(--bg-surface); border: 1px solid var(--border-medium); border-radius: var(--radius-pill); color: var(--text-primary); font-size: var(--font-size-sm); outline: none; } #secondary.sidebar .search-field:focus, #secondary.sidebar .wp-block-search__input:focus { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(255,59,59,0.35); } #secondary.sidebar .search-submit, #secondary.sidebar .wp-block-search__button { height: 40px; padding: 0 var(--space-lg); background: linear-gradient( 135deg, var(--accent-dark), var(--accent-light) ); color: var(--text-inverse); font-weight: var(--font-weight-bold); border: none; border-radius: var(--radius-pill); cursor: pointer; box-shadow: var(--shadow-accent); transition: transform var(--transition-fast), box-shadow var(--transition-fast); } #secondary.sidebar .search-submit:hover, #secondary.sidebar .wp-block-search__button:hover { transform: translateY(-1px); box-shadow: var(--shadow-accent-hover); } /* ================================================== PAGES & CATEGORIES ================================================== */ #secondary.sidebar .widget_pages li, #secondary.sidebar .widget_categories li { display: flex; align-items: center; justify-content: space-between; padding: var(--space-xs) var(--space-sm); margin-bottom: var(--space-xs); border-radius: var(--radius-md); transition: background var(--transition-fast), transform var(--transition-fast); } #secondary.sidebar .widget_pages li:last-child, #secondary.sidebar .widget_categories li:last-child { margin-bottom: 0; } #secondary.sidebar .widget_pages li:hover, #secondary.sidebar .widget_categories li:hover { background: rgba(255,255,255,0.06); transform: translateX(3px); } #secondary.sidebar .widget_pages a, #secondary.sidebar .widget_categories a { color: var(--text-primary); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); text-decoration: none; } #secondary.sidebar .widget_pages a:hover, #secondary.sidebar .widget_categories a:hover { color: var(--accent); } /* category count (LIVE SAFE) */ #secondary.sidebar .widget_categories li span, #secondary.sidebar .widget_categories .count { margin-left: auto; font-size: 0.75rem; font-weight: var(--font-weight-bold); padding: 2px 8px; border-radius: var(--radius-pill); background: rgba(255,255,255,0.08); color: var(--text-muted); } #secondary.sidebar .widget_categories li:hover span, #secondary.sidebar .widget_categories li:hover .count { background: var(--accent); color: var(--text-inverse); } /* current */ #secondary.sidebar .current_page_item > a, #secondary.sidebar .current-cat > a { color: var(--accent); font-weight: var(--font-weight-extrabold); } /* ================================================== RECENT POSTS ================================================== */ #secondary.sidebar .widget_recent_entries li { padding: var(--space-xs) 0; border-bottom: 1px solid var(--border-subtle); } #secondary.sidebar .widget_recent_entries li:last-child { border-bottom: none; } #secondary.sidebar .widget_recent_entries a { display: block; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); line-height: 1.4; color: var(--text-primary); text-decoration: none; transition: color var(--transition-fast), transform var(--transition-fast); } #secondary.sidebar .widget_recent_entries a:hover { color: var(--text-inverse); transform: translateX(3px); } /* ================================================== JETPACK SOCIAL ICONS ================================================== */ #secondary.sidebar .jetpack_widget_social_icons ul { display: flex; gap: var(--space-sm); } #secondary.sidebar .jetpack_widget_social_icons a { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.06); border: 1px solid var(--border-soft); border-radius: 50%; color: var(--text-primary); transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); } #secondary.sidebar .jetpack_widget_social_icons a:hover { background: var(--accent); color: var(--text-inverse); transform: translateY(-2px); box-shadow: var(--shadow-accent-hover); } /* ========================= ACCESSIBILITY ========================= */ #secondary.sidebar a:focus-visible, #secondary.sidebar button:focus-visible, #secondary.sidebar input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ================================================== SIDEBAR ADS — FINAL NON-COMPRESS FIX ================================================== */ /* 1. Sidebar widget containing ads */ #secondary.sidebar .widget_block, #secondary.sidebar .widget { overflow: hidden; } /* 2. Remove padding ONLY when iframe exists */ #secondary.sidebar .widget_block iframe { display: block; } /* padding neutralizer (safe, no :has) */ #secondary.sidebar .widget_block { padding: var(--space-lg); } /* 3. iframe reset — NO compression */ #secondary.sidebar iframe { display: block; width: 100%; max-width: 100%; height: auto; border: 0; margin: 0 auto; } /* 4. Kill inline hard dimensions */ #secondary.sidebar iframe[width], #secondary.sidebar iframe[height] { width: 100% !important; height: auto !important; } /* 5. Prevent absolute-position clipping */ #secondary.sidebar iframe[style*="position:absolute"], #secondary.sidebar iframe[style*="position: absolute"] { position: relative !important; inset: auto !important; } /* ========================= MEDIA IMAGE WIDGET ========================= */ #secondary.sidebar .widget_media_image { padding: 18px; background: linear-gradient(180deg, #1a212b, #141a22); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); } /* ================================================== 15. COMMENTS ================================================== */ /* ========================= COMMENTS AREA ========================= */ .comments-area { margin-top: var(--space-3xl); } /* ========================= TITLES ========================= */ .comments-title, .comment-reply-title { margin-bottom: var(--space-lg); font-size: var(--font-size-lg); font-weight: var(--font-weight-extrabold); color: var(--text-primary); } /* ========================= COMMENT LIST ========================= */ .comment-list { list-style: none; margin: 0 0 var(--space-3xl); padding: 0; } .comment-list li { margin-bottom: var(--space-lg); } /* ========================= INDIVIDUAL COMMENT ========================= */ .comment-body { display: flex; gap: var(--space-md); padding: var(--space-lg); background: var(--bg-card-alt); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } /* ========================= AVATAR ========================= */ .comment-author img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; } /* ========================= COMMENT CONTENT ========================= */ .comment-content { flex: 1; } /* author name */ .comment-author .fn { font-weight: var(--font-weight-extrabold); color: var(--text-primary); } /* meta */ .comment-metadata { margin-bottom: var(--space-xs); font-size: var(--font-size-xs); color: var(--text-muted); } .comment-metadata a { color: inherit; text-decoration: none; } /* text */ .comment-content p { margin: var(--space-xs) 0 0; font-size: var(--font-size-sm); color: var(--text-secondary); } /* ========================= REPLY LINK ========================= */ .reply a { display: inline-block; margin-top: var(--space-sm); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: var(--accent); text-decoration: none; } .reply a:hover { text-decoration: underline; } /* ========================= CHILD COMMENTS ========================= */ .comment-list .children { list-style: none; margin: var(--space-lg) 0 0 var(--space-3xl); padding: 0; } /* ========================= COMMENT FORM ========================= */ .comment-form { background: var(--bg-card-alt); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-xl); box-shadow: var(--shadow-lg); } /* fields */ .comment-form p { margin-bottom: var(--space-md); } .comment-form label { display: block; margin-bottom: var(--space-xs); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: var(--text-muted); } .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 100%; padding: var(--space-sm) var(--space-md); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--text-primary); font-size: var(--font-size-sm); } .comment-form textarea { min-height: 120px; resize: vertical; } /* submit */ .comment-form .submit { margin-top: var(--space-sm); padding: var(--space-sm) var(--space-xl); border-radius: var(--radius-pill); background: linear-gradient( 135deg, var(--accent-dark), var(--accent-light) ); color: var(--text-inverse); font-weight: var(--font-weight-bold); border: none; cursor: pointer; box-shadow: var(--shadow-accent); transition: transform var(--transition-fast), box-shadow var(--transition-fast); } .comment-form .submit:hover { transform: translateY(-2px); box-shadow: var(--shadow-accent-hover); } /* ========================= NO COMMENTS ========================= */ .no-comments { font-size: var(--font-size-sm); color: var(--text-muted); } /* ================================================== 16. AUTHOR BIO ================================================== */ /* ========================= AUTHOR BOX ========================= */ .author-box { display: flex; gap: var(--space-lg); margin-top: var(--space-3xl); padding: var(--space-xl); background: var(--bg-card-alt); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } /* ========================= AUTHOR AVATAR ========================= */ .author-avatar img { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border-strong); } /* ========================= AUTHOR DETAILS ========================= */ .author-details { flex: 1; } /* name */ .author-name { margin-bottom: var(--space-xs); font-size: var(--font-size-md); font-weight: var(--font-weight-extrabold); color: var(--text-primary); } /* description */ .author-description { margin-bottom: var(--space-sm); font-size: var(--font-size-sm); line-height: 1.6; color: var(--text-secondary); } /* ========================= AUTHOR META ========================= */ .author-meta { display: flex; align-items: center; gap: var(--space-md); font-size: var(--font-size-xs); } /* post count */ .author-post-count { color: var(--text-muted); } /* archive link */ .author-archive-link { color: var(--accent); font-weight: var(--font-weight-bold); text-decoration: none; } .author-archive-link:hover { text-decoration: underline; } /* ================================================== 17. SEARCH / NO CONTENT ================================================== */ /* ========================= NO RESULTS WRAPPER ========================= */ .no-results, .no-content { text-align: center; padding: var(--space-4xl) var(--space-lg); background: var(--bg-card-alt); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } /* ========================= ICON / SYMBOL ========================= */ .no-content-icon { display: block; margin-bottom: var(--space-sm); font-size: 2.5rem; line-height: 1; } /* ========================= TITLE ========================= */ .no-content-title { margin-bottom: var(--space-sm); font-size: var(--font-size-lg); font-weight: var(--font-weight-extrabold); color: var(--text-primary); } /* ========================= DESCRIPTION TEXT ========================= */ .no-content-text { max-width: 520px; margin: 0 auto var(--space-lg); font-size: var(--font-size-sm); line-height: 1.6; color: var(--text-secondary); } /* ========================= SEARCH FORM (INLINE) ========================= */ .no-content .search-form { display: flex; gap: var(--space-sm); max-width: 420px; margin: 0 auto; } /* input */ .no-content .search-field { flex: 1; height: 40px; padding: 0 var(--space-md); background: var(--bg-input); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--text-primary); font-size: var(--font-size-sm); } .no-content .search-field::placeholder { color: var(--text-muted); } /* button */ .no-content .search-submit { height: 40px; padding: 0 var(--space-lg); background: var(--accent-gradient); color: #ffffff; border: none; border-radius: var(--radius-md); font-weight: var(--font-weight-bold); cursor: pointer; box-shadow: var(--shadow-accent); } /* ========================= BACK HOME BUTTON ========================= */ .no-content-home { display: inline-block; margin-top: var(--space-lg); padding: 12px 28px; border-radius: 999px; background: var(--accent-gradient); color: #ffffff; font-weight: var(--font-weight-bold); text-decoration: none; box-shadow: var(--shadow-accent); } .no-content-home:hover { transform: translateY(-2px); } /* ================================================== 18. 404 PAGE ================================================== */ /* ========================= 404 WRAPPER ========================= */ .error-404 { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: var(--space-5xl) var(--space-lg); } /* ========================= ERROR CODE ========================= */ .error-404 .error-code { margin-bottom: var(--space-xs); font-size: 4.5rem; font-weight: var(--font-weight-black); line-height: 1; color: var(--accent); } /* ========================= TITLE ========================= */ .error-404 .page-title { margin-bottom: var(--space-sm); font-size: var(--font-size-xl); font-weight: var(--font-weight-extrabold); color: var(--text-primary); } /* ========================= DESCRIPTION ========================= */ .error-404 .page-description { max-width: 480px; margin: 0 auto var(--space-xl); font-size: var(--font-size-sm); line-height: 1.6; color: var(--text-secondary); } /* ========================= SEARCH FORM ========================= */ .error-404 .search-form { display: flex; gap: var(--space-sm); max-width: 420px; margin: 0 auto var(--space-xl); } /* input */ .error-404 .search-field { flex: 1; height: 40px; padding: 0 var(--space-md); background: var(--bg-input); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--text-primary); font-size: var(--font-size-sm); } .error-404 .search-field::placeholder { color: var(--text-muted); } /* submit */ .error-404 .search-submit { height: 40px; padding: 0 var(--space-lg); background: var(--accent-gradient); color: #ffffff; border: none; border-radius: var(--radius-md); font-weight: var(--font-weight-bold); cursor: pointer; box-shadow: var(--shadow-accent); } /* ========================= BACK HOME BUTTON ========================= */ .error-404 .error-home-btn { display: inline-block; padding: 12px 28px; border-radius: 999px; background: var(--accent-gradient); color: #ffffff; font-weight: var(--font-weight-bold); text-decoration: none; box-shadow: var(--shadow-accent); } .error-404 .error-home-btn:hover { transform: translateY(-2px); } /* ================================================== 19. FOOTER ================================================== */ /* ========================= FOOTER WRAPPER ========================= */ .site-footer { margin-top: var(--space-5xl); background: linear-gradient(180deg, #0e1219, #0a0d12); border-top: 1px solid var(--border-subtle); } /* ========================= FOOTER INNER LAYOUT ========================= */ .footer-inner { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--space-xl); padding: var(--space-3xl) 0; } /* ========================= FOOTER BRAND ========================= */ .footer-logo { margin-bottom: var(--space-xs); font-size: var(--font-size-lg); font-weight: var(--font-weight-black); color: var(--text-primary); } .footer-description { max-width: 420px; margin-bottom: var(--space-sm); font-size: var(--font-size-sm); line-height: 1.6; color: var(--text-secondary); } /* ========================= FOOTER NAVIGATION ========================= */ .footer-menu { list-style: none; margin: 0; padding: 0; } .footer-menu li { margin-bottom: var(--space-xs); } .footer-menu a { color: var(--text-secondary); font-weight: var(--font-weight-semibold); text-decoration: none; } .footer-menu a:hover { color: var(--accent); } /* ========================= FOOTER WIDGETS ========================= */ .footer-widgets .widget { background: none; border: none; padding: 0; box-shadow: none; } .footer-widgets .widget-title { margin-bottom: var(--space-sm); font-size: var(--font-size-xs); font-weight: var(--font-weight-extrabold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-light); } /* ========================= FOOTER SOCIAL ICONS ========================= */ .footer-social { display: flex; gap: var(--space-md); margin-top: var(--space-sm); } .footer-social a { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bg-chip); border: 1px solid var(--border-subtle); color: var(--text-primary); text-decoration: none; transition: background .2s ease, transform .2s ease, box-shadow .2s ease; } .footer-social a svg { width: 18px; height: 18px; fill: currentColor; } .footer-social a:hover { background: var(--accent); color: #ffffff; transform: translateY(-2px); box-shadow: var(--shadow-accent); } /* ========================= FOOTER BOTTOM BAR ========================= */ .footer-bottom { padding: var(--space-md) var(--space-lg); text-align: center; font-size: var(--font-size-xs); color: var(--text-muted); border-top: 1px solid var(--border-subtle); } /* ================================================== 20. LOAD MORE + SKELETON ================================================== */ /* ========================= LOAD MORE WRAPPER ========================= */ .load-more { display: flex; justify-content: center; margin: var(--space-4xl) 0; } /* ========================= LOAD MORE BUTTON ========================= */ #load-more-btn { padding: 12px 28px; font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); border-radius: 999px; border: none; background: linear-gradient(135deg, var(--accent), var(--accent-light)); color: #ffffff; cursor: pointer; box-shadow: var(--shadow-accent); transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease; } #load-more-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(255,45,45,.55); } #load-more-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; } /* ========================= ACCESSIBILITY ========================= */ #load-more-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ================================================== 20.1 UI COMPONENTS — BUTTON SYSTEM (GLOBAL) ================================================== */ /* Base Button — ONLY explicit classes */ .pushbutton-wide, .wp-block-button__link, .btn { --btn-bg: linear-gradient( 135deg, var(--accent-dark), var(--accent) ); display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 28px; min-height: 44px; font-size: var(--font-size-sm); font-weight: var(--font-weight-extrabold); letter-spacing: 0.4px; color: var(--text-inverse); background: var(--btn-bg); border: none; border-radius: var(--radius-pill); cursor: pointer; user-select: none; white-space: nowrap; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06) inset; transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast); text-decoration: none; /* for wp-block-button__link */ } /* Hover */ .pushbutton-wide:hover, .wp-block-button__link:hover, .btn:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08) inset; } /* Active */ .pushbutton-wide:active, .wp-block-button__link:active, .btn:active { transform: translateY(0); filter: brightness(0.95); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04) inset; } /* Focus (Accessibility) */ .pushbutton-wide:focus-visible, .wp-block-button__link:focus-visible, .btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg-body), 0 0 0 4px var(--accent); } /* Disabled */ .pushbutton-wide:disabled, .wp-block-button__link.is-disabled, .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; filter: none; box-shadow: none; } /* Small Button */ .btn-sm { padding: 8px 18px; font-size: var(--font-size-xs); } /* Ghost Button */ .btn-ghost { background: transparent; color: var(--text-primary); box-shadow: 0 0 0 1px var(--border-subtle), 0 6px 18px rgba(0, 0, 0, 0.4); } .btn-ghost:hover { background: var(--bg-card-alt); } /* ================================================== 21. PERFORMANCE ================================================== */ /* ========================= FADE-IN / SCROLL ANIMATION ========================= */ @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* optional utility */ .fade-in { animation: fadeUp .45s ease forwards; } /* ========================= RENDERING OPTIMIZATIONS ========================= */ .skeleton-grid { content-visibility: auto; contain-intrinsic-size: 1px 800px; } /* ========================= WILL-CHANGE HINTS (SAFE) ========================= */ .movie-card:hover, #load-more-btn:hover { will-change: transform; } /* ========================= REDUCED MOTION SUPPORT ========================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ================================================== 22. ACCESSIBILITY ================================================== */ /* ========================= 22.1 FOCUS STYLES ========================= */ /* global focus visibility (keyboard users) */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* prevent double focus ring on mouse click */ a:focus:not(:focus-visible), button:focus:not(:focus-visible), input:focus:not(:focus-visible), select:focus:not(:focus-visible), textarea:focus:not(:focus-visible) { outline: none; } /* ========================= 22.2 SCREEN READER UTILITIES ========================= */ /* standard WordPress screen reader class */ .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* make screen reader text visible on focus */ .screen-reader-text:focus { position: static; width: auto; height: auto; margin: 0; padding: 8px 12px; background: var(--bg-card); color: var(--text-primary); border-radius: 8px; box-shadow: var(--shadow-lg); clip: auto; clip-path: none; white-space: normal; z-index: 100000; } /* ================================================== 23. RESPONSIVE BREAKPOINTS — FINAL POLISH ================================================== */ /* ================================================== 23.1 LARGE TABLET & BELOW (≤1024px) ================================================== */ @media (max-width: 1024px) { /* Main layout stacks */ .main-grid { grid-template-columns: 1fr; gap: var(--space-xl); } /* Sidebar spacing */ #secondary.sidebar { margin-top: var(--space-3xl); } /* Popular posts */ .popular-posts-grid { grid-template-columns: repeat(2, 1fr); } /* Footer */ .footer-inner { grid-template-columns: 1fr 1fr; } } /* ================================================== 23.2 TABLET & SMALL LAPTOP (≤900px) ================================================== */ @media (max-width: 900px) { /* Header height */ .site-header { min-height: 64px; } .header-inner { height: 64px; padding-inline: var(--space-md); gap: var(--space-sm); } /* Hide desktop navigation */ .main-navigation { display: none; } /* Show hamburger */ .menu-toggle { display: inline-flex !important; visibility: visible; opacity: 1; } } /* ================================================== 23.3 TABLET PORTRAIT (≤820px) ================================================== */ @media (max-width: 820px) { /* Header actions spacing */ .header-actions { min-width: 44px; } /* Archive header inline safety */ .archive-header { gap: var(--space-sm); } } /* ================================================== 23.4 MOBILE CORE (≤768px) ================================================== */ @media (max-width: 768px) { /* Global container */ .container { padding-inline: var(--space-md); } /* Width safety */ main, section, article, .site-content, .site-main { max-width: 100%; width: 100%; min-width: 0; } /* Movie grid — FORCE 2 COLUMNS */ .movie-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); } /* Sidebar search */ #secondary.sidebar .search-form, #secondary.sidebar .wp-block-search__inside-wrapper { flex-direction: row; align-items: center; } #secondary.sidebar .search-submit, #secondary.sidebar .wp-block-search__button { width: auto; flex-shrink: 0; } /* Popular posts */ .popular-posts-grid { grid-template-columns: repeat(2, 1fr); } /* Single post */ .single-post { padding: var(--space-lg); } .single-title { font-size: var(--font-size-xl); } .single-entry-content iframe, .single-entry-content video { min-height: 220px; } /* Page content */ .page-content { padding: var(--space-lg); } /* Footer — single column */ .footer-inner { grid-template-columns: 1fr; text-align: center; } .footer-social { justify-content: center; } } /* ================================================== 23.5 SMALL MOBILE (≤640px) ================================================== */ @media (max-width: 640px) { /* Comments stack */ .comment-body { flex-direction: column; align-items: flex-start; } /* Author box stack */ .author-box { flex-direction: column; align-items: center; text-align: center; } .author-meta { justify-content: center; flex-wrap: wrap; } } /* ================================================== 23.6 VERY SMALL DEVICES (≤480px) ================================================== */ @media (max-width: 480px) { /* Pagination tap targets */ .archive-pagination a, .archive-pagination span { min-width: 44px; height: 44px; } /* Tighten grids */ .movie-grid { gap: 6px; } .popular-posts-grid { gap: var(--space-sm); } } /* ================================================== 23.7 DESKTOP SAFETY (≥901px) ================================================== */ @media (min-width: 901px) { /* Ensure mobile UI never leaks */ .mobile-navigation, .mobile-menu-overlay { display: none; } /* Hide hamburger */ .menu-toggle { display: none; } } /* ================================================== MOVIE HUB — DOWNLOAD BOX (FREE + PREMIUM) ================================================== */ .download-box { margin-top: 30px; padding: 22px 24px; border-radius: 14px; position: relative; overflow: hidden; background: linear-gradient( 145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02) ); border: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(6px); } /* subtle top glow */ .download-box::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient( 90deg, transparent, rgba(255,255,255,0.25), transparent ); } /* ================================================== DOWNLOAD BUTTON ================================================== */ .download-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 16px 18px; font-size: 16px; font-weight: 600; border-radius: 12px; text-decoration: none; letter-spacing: 0.3px; transition: all 0.25s ease; position: relative; } /* hover lift */ .download-btn:hover { transform: translateY(-2px); } /* ================================================== FREE DOWNLOAD STYLE ================================================== */ .download-box.free { background: linear-gradient( 145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015) ); } .download-btn.free { background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; box-shadow: 0 8px 24px rgba(37, 99, 235, 0.35); } .download-btn.free:hover { box-shadow: 0 12px 32px rgba(37, 99, 235, 0.5); } /* ================================================== PREMIUM DOWNLOAD STYLE ================================================== */ .download-box.premium { border-color: rgba(255, 193, 7, 0.35); background: linear-gradient( 145deg, rgba(255,193,7,0.12), rgba(255,193,7,0.03) ); } .download-btn.premium { background: linear-gradient(135deg, #facc15, #f59e0b); color: #111; box-shadow: 0 10px 28px rgba(250, 204, 21, 0.45); } .download-btn.premium:hover { box-shadow: 0 14px 36px rgba(250, 204, 21, 0.65); } /* ================================================== PREMIUM BADGE (AUTO) ================================================== */ .download-box.premium::after { content: "PREMIUM"; position: absolute; top: 14px; right: -38px; transform: rotate(45deg); background: linear-gradient(135deg, #facc15, #f59e0b); color: #111; font-size: 11px; font-weight: 700; padding: 4px 42px; letter-spacing: 1px; } /* ================================================== MOBILE OPTIMIZATION ================================================== */ @media (max-width: 768px) { .download-box { padding: 18px; border-radius: 12px; } .download-btn { font-size: 15px; padding: 14px; } } /* ================================ PREMIUM AUTH UI – MOVIE HUB ================================ */ .auth-box { max-width: 420px; margin: 100px auto; padding: 34px 32px; border-radius: 18px; background: linear-gradient( 180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02) ); border: 1px solid rgba(255,255,255,0.12); backdrop-filter: blur(10px); box-shadow: 0 20px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06); animation: authFadeIn 0.5s ease; } /* subtle entrance */ @keyframes authFadeIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* ================================ TITLE ================================ */ .auth-box h2 { text-align: center; margin-bottom: 26px; font-size: 22px; font-weight: 700; letter-spacing: 0.4px; color: #fff; } /* ================================ INPUT FIELDS ================================ */ .auth-box input { width: 100%; padding: 15px 16px; margin-bottom: 16px; border-radius: 12px; background: rgba(0,0,0,0.45); color: #fff; border: 1px solid rgba(255,255,255,0.14); outline: none; transition: all 0.25s ease; } .auth-box input::placeholder { color: rgba(255,255,255,0.5); } /* focus = premium glow */ .auth-box input:focus { border-color: rgba(250, 204, 21, 0.8); box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.18), inset 0 1px 2px rgba(0,0,0,0.6); } /* ================================ PREMIUM BUTTON ================================ */ .auth-box button { width: 100%; padding: 15px; border-radius: 14px; background: linear-gradient(135deg, #facc15, #f59e0b); color: #111; border: none; font-size: 15px; font-weight: 700; letter-spacing: 0.4px; cursor: pointer; transition: all 0.25s ease; box-shadow: 0 10px 30px rgba(250, 204, 21, 0.45), inset 0 1px 0 rgba(255,255,255,0.4); } /* hover = lift */ .auth-box button:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(250, 204, 21, 0.6), inset 0 1px 0 rgba(255,255,255,0.45); } /* ================================ ERROR MESSAGE ================================ */ .auth-box .error { color: #ff6b6b; text-align: center; font-size: 14px; margin-bottom: 14px; } /* ================================ MOBILE ================================ */ @media (max-width: 480px) { .auth-box { margin: 70px 16px; padding: 28px 22px; } } .auth-note { margin-top: 14px; text-align: center; font-size: 13px; color: rgba(255,255,255,0.6); } .auth-forgot { margin-top: 12px; text-align: center; } .auth-forgot a { font-size: 13px; color: rgba(255,255,255,0.6); text-decoration: none; } .auth-forgot a:hover { color: #facc15; } /* ================================ USER DASHBOARD ================================ */ .dashboard-box { text-align: center; } .dashboard-info { margin: 20px 0; font-size: 15px; color: rgba(255,255,255,0.85); } .dashboard-info p { margin-bottom: 8px; } .dashboard-actions { margin-top: 25px; } .dashboard-logout { display: inline-block; padding: 12px 26px; border-radius: 12px; background: rgba(255,255,255,0.08); color: #fff; text-decoration: none; font-weight: 600; transition: all 0.25s ease; } .dashboard-logout:hover { background: #ef4444; color: #fff; } /* ================================ HEADER USER MENU ================================ */ .header-login-btn { padding: 8px 16px; border-radius: 10px; background: linear-gradient(135deg,#facc15,#f59e0b); color: #111; font-weight: 600; text-decoration: none; margin-right: 10px; } .header-login-btn:hover { opacity: 0.9; } .user-menu { position: relative; margin-right: 10px; } .user-avatar { font-size: 20px; cursor: pointer; } .user-dropdown { position: absolute; top: 36px; right: 0; min-width: 180px; background: rgba(15,15,15,0.95); border-radius: 12px; padding: 8px 0; box-shadow: 0 12px 30px rgba(0,0,0,0.6); display: none; z-index: 999; } .user-dropdown a { display: block; padding: 10px 18px; color: #fff; text-decoration: none; font-size: 14px; } .user-dropdown a:hover { background: rgba(255,255,255,0.08); } .user-menu:hover .user-dropdown { display: block; } .dashboard-box label { display: block; margin: 14px 0 6px; font-size: 13px; opacity: 0.7; } .dashboard-box input { width: 100%; } .dashboard-box hr { margin: 30px 0; border: none; height: 1px; background: rgba(255,255,255,0.1); } .premium-active { color: #22c55e; font-weight: 600; } .premium-expired { color: #f97316; font-weight: 600; } .premium-inactive { color: #ef4444; font-weight: 600; } .upgrade-btn { display: inline-block; margin-top: 12px; padding: 10px 18px; background: linear-gradient(135deg,#facc15,#f59e0b); color: #111; border-radius: 10px; text-decoration: none; font-weight: 600; } .dashboard-logout { display: inline-block; margin-top: 25px; padding: 12px 26px; border-radius: 12px; background: rgba(255,255,255,0.08); color: #fff; text-decoration: none; } .dashboard-logout:hover { background: #ef4444; } /* ================================ DASHBOARD RESPONSIVE WIDTH FIX ================================ */ /* Default (mobile-first) */ .dashboard-box { max-width: 420px; } /* Tablet */ @media (min-width: 768px) { .dashboard-box { max-width: 600px; } } /* Desktop */ @media (min-width: 1024px) { .dashboard-box { max-width: 720px; } } /* Large Desktop */ @media (min-width: 1400px) { .dashboard-box { max-width: 860px; } } @media (min-width: 1024px) { .dashboard-box { padding: 40px 44px; } .dashboard-box h2 { font-size: 24px; } } /* ================================ PREMIUM BADGE (DASHBOARD) ================================ */ .username-row { position: relative; } .username-row input { padding-right: 120px; /* space for badge */ } .premium-badge { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 700; letter-spacing: 0.6px; padding: 6px 10px; border-radius: 999px; pointer-events: none; } /* Active Premium */ .premium-badge.active { background: linear-gradient(135deg, #facc15, #f59e0b); color: #111; box-shadow: 0 4px 14px rgba(250, 204, 21, 0.45); } /* Expired */ .premium-badge.expired { background: rgba(239, 68, 68, 0.15); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.4); } /* ================================ PREMIUM PAGE ================================ */ .premium-desc { text-align: center; opacity: 0.7; margin-bottom: 24px; } .premium-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; } .plan-card { background: rgba(255,255,255,0.05); border-radius: 16px; padding: 24px; text-align: center; } .plan-card.featured { border: 2px solid #facc15; } .plan-card h3 { margin-bottom: 10px; } .price { font-size: 28px; font-weight: 700; margin-bottom: 16px; } .buy-premium { padding: 12px 22px; border-radius: 12px; border: none; background: linear-gradient(135deg,#facc15,#f59e0b); font-weight: 700; cursor: pointer; } /* ========================= DOWNLOAD BOX — MOVIESHUB ========================= */ .download-section { margin-top: 32px; padding: 20px; border-radius: 14px; background: linear-gradient(180deg, #0f172a, #020617); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05); } .download-buttons { display: flex; gap: 16px; flex-wrap: wrap; } .download-btn { flex: 1; min-width: 180px; padding: 14px 18px; border-radius: 12px; font-weight: 600; text-align: center; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.25s ease; } /* Normal Download */ .download-btn.normal { background: #1e293b; color: #e5e7eb; border: 1px solid rgba(255,255,255,0.08); } .download-btn.normal:hover { background: #334155; } /* Premium Download */ .download-btn.premium { background: linear-gradient(135deg, #facc15, #f59e0b); color: #020617; box-shadow: 0 0 0 2px rgba(250,204,21,0.25); } .download-btn.premium:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(250,204,21,0.35); } /* Premium lock */ .download-btn.locked { background: #020617; color: #94a3b8; border: 1px dashed rgba(255,255,255,0.15); } .premium-badge { background: linear-gradient(135deg, #facc15, #f59e0b); color: #020617; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; margin-left: 8px; } .download-section { margin-top: 30px; padding: 20px; border-radius: 14px; background: linear-gradient(180deg,#121821,#0b0f15); box-shadow: 0 0 30px rgba(0,0,0,.4); } .download-heading { margin-bottom: 15px; font-size: 18px; } .download-buttons { display: flex; gap: 15px; flex-wrap: wrap; } .download-btn { padding: 14px 22px; border-radius: 12px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: all .25s ease; } .download-btn.normal { background: #2b2f36; color: #fff; } .download-btn.premium { background: linear-gradient(135deg,#ffcc00,#ff9900); color: #000; box-shadow: 0 0 18px rgba(255,170,0,.45); } .download-btn.locked { background: #1e1e1e; color: #999; cursor: pointer; } .download-btn:hover { transform: translateY(-2px); } .premium-note { margin-top: 12px; font-size: 13px; color: #ffcc00; } /* RESPONSIVE TABLE FIX */ .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .dashboard-table { width: 100%; min-width: 600px; /* allows scroll instead of breaking layout */ border-collapse: collapse; } /* RESPONSIVE TABLE FIX */ .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .dashboard-table { width: 100%; min-width: 600px; /* allows scroll instead of breaking layout */ border-collapse: collapse; } /* ========================================== MOBILE: TABLE → STACKED CARDS ========================================== */ @media (max-width: 768px) { .dashboard-table thead { display: none; } .dashboard-table, .dashboard-table tbody, .dashboard-table tr, .dashboard-table td { display: block; width: 100%; } .dashboard-table tr { background: #0f0f0f; border: 1px solid #2a2a2a; border-radius: 14px; margin-bottom: 16px; padding: 14px; box-shadow: 0 10px 24px rgba(0,0,0,.35); } .dashboard-table td { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border: none; font-size: 14px; color: #fff; } .dashboard-table td::before { content: attr(data-label); font-weight: 600; color: #9aa0a6; flex: 0 0 40%; padding-right: 12px; } } /* ============================== MOBILE STACKED TABLE CARDS ============================== */ @media (max-width: 768px) { .dashboard-table { display: block; width: 100%; } .dashboard-table thead { display: none; } .dashboard-table tr { display: block; background: #111; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 12px; margin-bottom: 12px; } .dashboard-table td { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; border: none; } .dashboard-table td::before { content: attr(data-label); font-weight: 600; color: #9aa0a6; } /* Fix date input overflow */ input[type="date"] { width: 100%; max-width: 100%; box-sizing: border-box; } } /* ================================================== 25. REFERRAL PAGE ================================================== */ /* ========================= REFERRAL PAGE WRAPPER ========================= */ .referral-page { display: flex; flex-direction: column; gap: var(--space-2xl); margin: var(--space-2xl) 0; } /* ========================= REFERRAL CARDS ========================= */ .referral-card, .referral-table-wrap { position: relative; background: var(--bg-card-alt); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-xl); box-shadow: var(--shadow-lg); } /* top accent glow */ .referral-card::before, .referral-table-wrap::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient( 90deg, transparent, var(--accent), transparent ); } /* ========================= HEADINGS ========================= */ .referral-card h1, .referral-table-wrap h2 { margin-bottom: var(--space-sm); color: var(--text-primary); } .referral-card > p { margin-bottom: var(--space-lg); color: var(--text-secondary); } /* ========================= REFERRAL INPUT BOXES ========================= */ .referral-box { margin-bottom: var(--space-lg); } .referral-box label, .referral-share > label { display: block; margin-bottom: var(--space-xs); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); letter-spacing: 0.4px; color: var(--text-muted); } .referral-box input { width: 100%; height: 46px; padding: 0 var(--space-md); background: var(--bg-input); border: 1px solid var(--border-soft); border-radius: var(--radius-md); color: var(--text-primary); font-size: var(--font-size-sm); } .referral-box input:focus { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(255,59,59,0.35); } /* ========================= COPY BUTTON ========================= */ .copy-referral-btn { margin-top: var(--space-sm); min-height: 42px; padding: 0 var(--space-lg); display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-pill); background: var(--accent-gradient); color: var(--text-inverse); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); box-shadow: var(--shadow-accent); transition: transform var(--transition-fast), box-shadow var(--transition-fast); } .copy-referral-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-accent-hover); } .copy-referral-btn.copied { background: linear-gradient(135deg, #16a34a, #22c55e); box-shadow: 0 10px 28px rgba(34,197,94,0.35); } /* ========================= SHARE BUTTONS ========================= */ .referral-share { margin-bottom: var(--space-xl); } .referral-share-buttons { display: flex; flex-wrap: wrap; gap: var(--space-sm); } .share-btn { min-height: 42px; padding: 0 var(--space-lg); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: #fff; transition: transform var(--transition-fast), opacity var(--transition-fast); } .share-btn:hover { transform: translateY(-2px); opacity: 0.92; } .share-whatsapp { background: #25d366; } .share-telegram { background: #229ed9; } .share-facebook { background: #1877f2; } .share-twitter { background: #111111; border: 1px solid rgba(255,255,255,0.08); } /* ========================= PROGRESS ========================= */ .referral-progress { margin: var(--space-xl) 0; } .progress-meta { display: flex; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-sm); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: var(--text-muted); } .progress-bar { width: 100%; height: 12px; background: rgba(255,255,255,0.06); border-radius: var(--radius-pill); overflow: hidden; } .progress-bar span { display: block; height: 100%; border-radius: var(--radius-pill); background: linear-gradient( 90deg, var(--accent-dark), var(--accent-light) ); transition: width var(--transition-slow); } /* ========================= RULES ========================= */ .referral-rules h3 { margin-bottom: var(--space-md); color: var(--text-primary); } .referral-rules ul { margin: 0 0 0 var(--space-xl); } .referral-rules li { margin-bottom: var(--space-sm); color: var(--text-secondary); } /* ========================= REFERRAL TABLE ========================= */ .referral-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .referral-table { width: 100%; min-width: 900px; border-collapse: collapse; } .referral-table th, .referral-table td { padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--border-subtle); text-align: left; white-space: nowrap; } .referral-table th { font-size: var(--font-size-xs); font-weight: var(--font-weight-extrabold); text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-primary); background: rgba(255,255,255,0.04); } .referral-table td { font-size: var(--font-size-sm); color: var(--text-secondary); } .referral-table tr:hover td { background: rgba(255,255,255,0.03); } /* ========================= STATUS BADGES ========================= */ .ref-status { display: inline-flex; align-items: center; justify-content: center; min-width: 88px; padding: 6px 12px; border-radius: var(--radius-pill); font-size: 11px; font-weight: var(--font-weight-bold); letter-spacing: 0.4px; text-transform: capitalize; } .ref-status-pending { background: rgba(245, 158, 11, 0.14); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.22); } .ref-status-qualified { background: rgba(34, 197, 94, 0.14); color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.22); } .ref-status-rewarded { background: rgba(59, 130, 246, 0.14); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.22); } .ref-status-rejected { background: rgba(239, 68, 68, 0.14); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.22); } /* ========================= MOBILE ========================= */ @media (max-width: 768px) { .referral-card, .referral-table-wrap { padding: var(--space-lg); } .copy-referral-btn, .share-btn { width: 100%; } .referral-share-buttons { flex-direction: column; } .progress-meta { font-size: 11px; } .referral-table { min-width: 760px; } } /* ================================================== TRENDING POSTS WIDGET ================================================== */ .mh-trending-widget { display: flex; flex-direction: column; gap: 14px; } .mh-trending-item { display: flex; gap: 12px; align-items: center; text-decoration: none; } .mh-trending-item img { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; flex-shrink: 0; } .mh-trending-content { display: flex; flex-direction: column; gap: 4px; } .mh-trending-title { font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--text-primary); } .mh-trending-item:hover .mh-trending-title { color: var(--accent); } .mh-trending-views { font-size: 11px; color: var(--text-muted); } /* ================================================== MOVIE HUB — DOWNLOAD BOX (FREE + PREMIUM) ================================================== */ .download-box { margin-top: 30px; padding: 22px 24px; border-radius: 14px; position: relative; overflow: hidden; background: linear-gradient( 145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02) ); border: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(6px); } /* subtle top glow */ .download-box::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient( 90deg, transparent, rgba(255,255,255,0.25), transparent ); } /* ================================================== DOWNLOAD BUTTON ================================================== */ .download-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 16px 18px; font-size: 16px; font-weight: 600; border-radius: 12px; text-decoration: none; letter-spacing: 0.3px; transition: all 0.25s ease; position: relative; } /* hover lift */ .download-btn:hover { transform: translateY(-2px); } /* ================================================== FREE DOWNLOAD STYLE ================================================== */ .download-box.free { background: linear-gradient( 145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015) ); } .download-btn.free { background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; box-shadow: 0 8px 24px rgba(37, 99, 235, 0.35); } .download-btn.free:hover { box-shadow: 0 12px 32px rgba(37, 99, 235, 0.5); } /* ================================================== PREMIUM DOWNLOAD STYLE ================================================== */ .download-box.premium { border-color: rgba(255, 193, 7, 0.35); background: linear-gradient( 145deg, rgba(255,193,7,0.12), rgba(255,193,7,0.03) ); } .download-btn.premium { background: linear-gradient(135deg, #facc15, #f59e0b); color: #111; box-shadow: 0 10px 28px rgba(250, 204, 21, 0.45); } .download-btn.premium:hover { box-shadow: 0 14px 36px rgba(250, 204, 21, 0.65); } /* ================================================== PREMIUM BADGE (AUTO) ================================================== */ .download-box.premium::after { content: "PREMIUM"; position: absolute; top: 14px; right: -38px; transform: rotate(45deg); background: linear-gradient(135deg, #facc15, #f59e0b); color: #111; font-size: 11px; font-weight: 700; padding: 4px 42px; letter-spacing: 1px; } /* ================================================== MOBILE OPTIMIZATION ================================================== */ @media (max-width: 768px) { .download-box { padding: 18px; border-radius: 12px; } .download-btn { font-size: 15px; padding: 14px; } } /* ================================ PREMIUM AUTH UI – MOVIE HUB ================================ */ .auth-box { max-width: 420px; margin: 100px auto; padding: 34px 32px; border-radius: 18px; background: linear-gradient( 180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02) ); border: 1px solid rgba(255,255,255,0.12); backdrop-filter: blur(10px); box-shadow: 0 20px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06); animation: authFadeIn 0.5s ease; } /* subtle entrance */ @keyframes authFadeIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* ================================ TITLE ================================ */ .auth-box h2 { text-align: center; margin-bottom: 26px; font-size: 22px; font-weight: 700; letter-spacing: 0.4px; color: #fff; } /* ================================ INPUT FIELDS ================================ */ .auth-box input { width: 100%; padding: 15px 16px; margin-bottom: 16px; border-radius: 12px; background: rgba(0,0,0,0.45); color: #fff; border: 1px solid rgba(255,255,255,0.14); outline: none; transition: all 0.25s ease; } .auth-box input::placeholder { color: rgba(255,255,255,0.5); } /* focus = premium glow */ .auth-box input:focus { border-color: rgba(250, 204, 21, 0.8); box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.18), inset 0 1px 2px rgba(0,0,0,0.6); } /* ================================ PREMIUM BUTTON ================================ */ .auth-box button { width: 100%; padding: 15px; border-radius: 14px; background: linear-gradient(135deg, #facc15, #f59e0b); color: #111; border: none; font-size: 15px; font-weight: 700; letter-spacing: 0.4px; cursor: pointer; transition: all 0.25s ease; box-shadow: 0 10px 30px rgba(250, 204, 21, 0.45), inset 0 1px 0 rgba(255,255,255,0.4); } /* hover = lift */ .auth-box button:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(250, 204, 21, 0.6), inset 0 1px 0 rgba(255,255,255,0.45); } /* ================================ ERROR MESSAGE ================================ */ .auth-box .error { color: #ff6b6b; text-align: center; font-size: 14px; margin-bottom: 14px; } /* ================================ MOBILE ================================ */ @media (max-width: 480px) { .auth-box { margin: 70px 16px; padding: 28px 22px; } } .auth-note { margin-top: 14px; text-align: center; font-size: 13px; color: rgba(255,255,255,0.6); } .auth-forgot { margin-top: 12px; text-align: center; } .auth-forgot a { font-size: 13px; color: rgba(255,255,255,0.6); text-decoration: none; } .auth-forgot a:hover { color: #facc15; } /* ================================ USER DASHBOARD ================================ */ .dashboard-box { text-align: center; } .dashboard-info { margin: 20px 0; font-size: 15px; color: rgba(255,255,255,0.85); } .dashboard-info p { margin-bottom: 8px; } .dashboard-actions { margin-top: 25px; } .dashboard-logout { display: inline-block; padding: 12px 26px; border-radius: 12px; background: rgba(255,255,255,0.08); color: #fff; text-decoration: none; font-weight: 600; transition: all 0.25s ease; } .dashboard-logout:hover { background: #ef4444; color: #fff; } /* ================================ HEADER USER MENU ================================ */ .header-login-btn { padding: 8px 16px; border-radius: 10px; background: linear-gradient(135deg,#facc15,#f59e0b); color: #111; font-weight: 600; text-decoration: none; margin-right: 10px; } .header-login-btn:hover { opacity: 0.9; } .user-menu { position: relative; margin-right: 10px; } .user-avatar { font-size: 20px; cursor: pointer; } .user-dropdown { position: absolute; top: 36px; right: 0; min-width: 180px; background: rgba(15,15,15,0.95); border-radius: 12px; padding: 8px 0; box-shadow: 0 12px 30px rgba(0,0,0,0.6); display: none; z-index: 999; } .user-dropdown a { display: block; padding: 10px 18px; color: #fff; text-decoration: none; font-size: 14px; } .user-dropdown a:hover { background: rgba(255,255,255,0.08); } .user-menu:hover .user-dropdown { display: block; } .dashboard-box label { display: block; margin: 14px 0 6px; font-size: 13px; opacity: 0.7; } .dashboard-box input { width: 100%; } .dashboard-box hr { margin: 30px 0; border: none; height: 1px; background: rgba(255,255,255,0.1); } .premium-active { color: #22c55e; font-weight: 600; } .premium-expired { color: #f97316; font-weight: 600; } .premium-inactive { color: #ef4444; font-weight: 600; } .upgrade-btn { display: inline-block; margin-top: 12px; padding: 10px 18px; background: linear-gradient(135deg,#facc15,#f59e0b); color: #111; border-radius: 10px; text-decoration: none; font-weight: 600; } .dashboard-logout { display: inline-block; margin-top: 25px; padding: 12px 26px; border-radius: 12px; background: rgba(255,255,255,0.08); color: #fff; text-decoration: none; } .dashboard-logout:hover { background: #ef4444; } /* ================================ DASHBOARD RESPONSIVE WIDTH FIX ================================ */ /* Default (mobile-first) */ .dashboard-box { max-width: 420px; } /* Tablet */ @media (min-width: 768px) { .dashboard-box { max-width: 600px; } } /* Desktop */ @media (min-width: 1024px) { .dashboard-box { max-width: 720px; } } /* Large Desktop */ @media (min-width: 1400px) { .dashboard-box { max-width: 860px; } } @media (min-width: 1024px) { .dashboard-box { padding: 40px 44px; } .dashboard-box h2 { font-size: 24px; } } /* ================================ PREMIUM BADGE (DASHBOARD) ================================ */ .username-row { position: relative; } .username-row input { padding-right: 120px; /* space for badge */ } .premium-badge { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 700; letter-spacing: 0.6px; padding: 6px 10px; border-radius: 999px; pointer-events: none; } /* Active Premium */ .premium-badge.active { background: linear-gradient(135deg, #facc15, #f59e0b); color: #111; box-shadow: 0 4px 14px rgba(250, 204, 21, 0.45); } /* Expired */ .premium-badge.expired { background: rgba(239, 68, 68, 0.15); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.4); } /* ================================ PREMIUM PAGE ================================ */ .premium-desc { text-align: center; opacity: 0.7; margin-bottom: 24px; } .premium-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; } .plan-card { background: rgba(255,255,255,0.05); border-radius: 16px; padding: 24px; text-align: center; } .plan-card.featured { border: 2px solid #facc15; } .plan-card h3 { margin-bottom: 10px; } .price { font-size: 28px; font-weight: 700; margin-bottom: 16px; } .buy-premium { padding: 12px 22px; border-radius: 12px; border: none; background: linear-gradient(135deg,#facc15,#f59e0b); font-weight: 700; cursor: pointer; } /* ========================= DOWNLOAD BOX — MOVIESHUB ========================= */ .download-section { margin-top: 32px; padding: 20px; border-radius: 14px; background: linear-gradient(180deg, #0f172a, #020617); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05); } .download-buttons { display: flex; gap: 16px; flex-wrap: wrap; } .download-btn { flex: 1; min-width: 180px; padding: 14px 18px; border-radius: 12px; font-weight: 600; text-align: center; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.25s ease; } /* Normal Download */ .download-btn.normal { background: #1e293b; color: #e5e7eb; border: 1px solid rgba(255,255,255,0.08); } .download-btn.normal:hover { background: #334155; } /* Premium Download */ .download-btn.premium { background: linear-gradient(135deg, #facc15, #f59e0b); color: #020617; box-shadow: 0 0 0 2px rgba(250,204,21,0.25); } .download-btn.premium:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(250,204,21,0.35); } /* Premium lock */ .download-btn.locked { background: #020617; color: #94a3b8; border: 1px dashed rgba(255,255,255,0.15); } .premium-badge { background: linear-gradient(135deg, #facc15, #f59e0b); color: #020617; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; margin-left: 8px; } .download-section { margin-top: 30px; padding: 20px; border-radius: 14px; background: linear-gradient(180deg,#121821,#0b0f15); box-shadow: 0 0 30px rgba(0,0,0,.4); } .download-heading { margin-bottom: 15px; font-size: 18px; } .download-buttons { display: flex; gap: 15px; flex-wrap: wrap; } .download-btn { padding: 14px 22px; border-radius: 12px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: all .25s ease; } .download-btn.normal { background: #2b2f36; color: #fff; } .download-btn.premium { background: linear-gradient(135deg,#ffcc00,#ff9900); color: #000; box-shadow: 0 0 18px rgba(255,170,0,.45); } .download-btn.locked { background: #1e1e1e; color: #999; cursor: pointer; } .download-btn:hover { transform: translateY(-2px); } .premium-note { margin-top: 12px; font-size: 13px; color: #ffcc00; } /* RESPONSIVE TABLE FIX */ .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .dashboard-table { width: 100%; min-width: 600px; /* allows scroll instead of breaking layout */ border-collapse: collapse; } /* RESPONSIVE TABLE FIX */ .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .dashboard-table { width: 100%; min-width: 600px; /* allows scroll instead of breaking layout */ border-collapse: collapse; } /* ========================================== MOBILE: TABLE → STACKED CARDS ========================================== */ @media (max-width: 768px) { .dashboard-table thead { display: none; } .dashboard-table, .dashboard-table tbody, .dashboard-table tr, .dashboard-table td { display: block; width: 100%; } .dashboard-table tr { background: #0f0f0f; border: 1px solid #2a2a2a; border-radius: 14px; margin-bottom: 16px; padding: 14px; box-shadow: 0 10px 24px rgba(0,0,0,.35); } .dashboard-table td { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border: none; font-size: 14px; color: #fff; } .dashboard-table td::before { content: attr(data-label); font-weight: 600; color: #9aa0a6; flex: 0 0 40%; padding-right: 12px; } } /* ============================== MOBILE STACKED TABLE CARDS ============================== */ @media (max-width: 768px) { .dashboard-table { display: block; width: 100%; } .dashboard-table thead { display: none; } .dashboard-table tr { display: block; background: #111; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 12px; margin-bottom: 12px; } .dashboard-table td { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; border: none; } .dashboard-table td::before { content: attr(data-label); font-weight: 600; color: #9aa0a6; } /* Fix date input overflow */ input[type="date"] { width: 100%; max-width: 100%; box-sizing: border-box; } } /* ========================================= OPTIONAL MANUAL RELATED LINKS ========================================= */ .manual-related-links { margin: 2rem 0; padding: 1.25rem; background: linear-gradient(180deg, rgba(18,24,38,0.96), rgba(10,14,24,0.98)); border: 1px solid rgba(255,255,255,0.06); border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,0.22); } .manual-related-links .section-title { margin: 0 0 1rem; font-size: 1.15rem; font-weight: 800; color: #fff; letter-spacing: -0.02em; } .manual-links-list { margin: 0; padding: 0; list-style: none; } .manual-links-list li { margin: 0 0 0.85rem; padding-left: 1rem; position: relative; } .manual-links-list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #e50914; position: absolute; left: 0; top: 0.7rem; } .manual-links-list li:last-child { margin-bottom: 0; } .manual-links-list a { color: #e7ecf7; font-weight: 600; text-decoration: none; line-height: 1.5; transition: color 0.25s ease; } .manual-links-list a:hover { color: #e50914; } /* ========================================= RELATED POSTS (PREMIUM PORTRAIT GRID) ========================================= */ .related-posts { margin: 2.5rem 0; } .related-posts .section-title { margin: 0 0 1.15rem; font-size: 1.45rem; font-weight: 800; color: #fff; letter-spacing: -0.02em; } .related-posts-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } .related-post-card { position: relative; overflow: hidden; border-radius: 18px; background: #0d111b; border: 1px solid rgba(255,255,255,0.06); box-shadow: 0 14px 35px rgba(0,0,0,0.28); transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .related-post-card:hover { transform: translateY(-6px); border-color: rgba(229,9,20,0.38); box-shadow: 0 20px 40px rgba(0,0,0,0.35); } .related-post-card a { display: block; color: inherit; text-decoration: none; } .related-post-thumb { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #090d16; } .related-post-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.35) 38%, rgba(0,0,0,0.05) 65%, rgba(0,0,0,0) 100% ); pointer-events: none; } .related-post-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 0.45s ease; } .related-post-card:hover .related-post-thumb img { transform: scale(1.06); } .related-post-title { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 0.9rem 0.85rem 0.95rem; font-size: 0.92rem; line-height: 1.35; font-weight: 700; color: #fff; z-index: 2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ========================================= PREV / NEXT NAVIGATION (PREMIUM) ========================================= */ .single-post-navigation { margin: 2.5rem 0; } .single-post-navigation .nav-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .single-post-navigation .nav-previous, .single-post-navigation .nav-next { min-width: 0; } .single-post-navigation .nav-previous a, .single-post-navigation .nav-next a { display: flex; flex-direction: column; gap: 0.45rem; min-height: 100%; padding: 1rem 1.1rem; border-radius: 18px; background: linear-gradient(180deg, rgba(16,20,30,0.96), rgba(8,11,18,0.98)); border: 1px solid rgba(255,255,255,0.06); box-shadow: 0 12px 30px rgba(0,0,0,0.22); text-decoration: none; transition: transform 0.25s ease, border-color 0.25s ease; } .single-post-navigation .nav-previous a:hover, .single-post-navigation .nav-next a:hover { transform: translateY(-4px); border-color: rgba(229,9,20,0.35); } .single-post-navigation .nav-subtitle { font-size: 0.78rem; font-weight: 700; color: #e50914; letter-spacing: 0.02em; } .single-post-navigation .nav-title { font-size: 0.96rem; line-height: 1.45; font-weight: 700; color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ========================================= TABLET ========================================= */ @media (max-width: 991px) { .related-posts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { .related-posts .section-title, .manual-related-links .section-title { font-size: 1.2rem; } .related-posts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; } .related-post-thumb { aspect-ratio: 3 / 4; } .related-post-title { font-size: 0.84rem; padding: 0.7rem 0.7rem 0.8rem; } .single-post-navigation .nav-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; } .single-post-navigation .nav-previous a, .single-post-navigation .nav-next a { padding: 0.85rem 0.85rem; border-radius: 16px; } .single-post-navigation .nav-title { font-size: 0.86rem; } .single-post-navigation .nav-subtitle { font-size: 0.72rem; } } /* ========================================= PREMIUM SIDEBAR SOCIAL WIDGET (FINAL FIX) ========================================= */ .sidebar-social { margin: 0 0 1.5rem; padding: 1rem; border-radius: 18px; background: linear-gradient(180deg, rgba(14,20,34,0.98), rgba(7,11,20,0.98)); border: 1px solid rgba(255,255,255,0.06); box-shadow: 0 14px 34px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.03); overflow: hidden; } .sidebar-social .widget-title { margin: 0 0 0.9rem; font-size: 0.95rem; font-weight: 800; color: #ff3b3b; letter-spacing: 0.06em; text-transform: uppercase; } .sidebar-social-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; width: 100%; } .social-card { display: flex; align-items: center; justify-content: flex-start; gap: 0.55rem; width: 100%; min-width: 0; max-width: 100%; min-height: 52px; padding: 0.6rem 0.7rem; border-radius: 14px; text-decoration: none; color: #fff; background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015)); border: 1px solid rgba(255,255,255,0.06); box-shadow: inset 0 1px 0 rgba(255,255,255,0.02), 0 8px 18px rgba(0,0,0,0.16); transition: transform 0.25s ease, border-color 0.25s ease; box-sizing: border-box; overflow: hidden; } .social-card:hover { transform: translateY(-2px); } .social-card.facebook:hover { border-color: rgba(24,119,242,0.35); } .social-card.instagram:hover { border-color: rgba(225,48,108,0.35); } .social-card.telegram:hover { border-color: rgba(34,158,217,0.35); } .social-card.twitter:hover { border-color: rgba(255,255,255,0.18); } .social-icon { width: 32px; height: 32px; min-width: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); border: 1px solid rgba(255,255,255,0.05); color: #fff; font-size: 14px; } .social-name { flex: 1; min-width: 0; max-width: 100%; font-size: 0.8rem; font-weight: 700; color: #fff; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ========================================= SMALL SIDEBAR FIX ========================================= */ @media (max-width: 480px) { .sidebar-social { padding: 0.85rem; } .sidebar-social-grid { gap: 0.6rem; } .social-card { min-height: 48px; padding: 0.5rem 0.6rem; gap: 0.45rem; } .social-icon { width: 28px; height: 28px; min-width: 28px; font-size: 13px; } .social-name { font-size: 0.74rem; } }