/* Theme Name: VidPulse Theme URI: https://example.com Author: VidPulse Description: Fast, SEO-friendly video gallery WordPress theme. Dark mode, ad-first layout, mobile responsive. Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.7 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: vidpulse Tags: video, gallery, dark, seo, fast, ads, responsive */ /* -- DARK MODE INLINE SCRIPT (in ) prevents flash -- */ /* =========================================== CSS TOKENS =========================================== */ :root { /* Colors */ --bg: #0f1117; --surf: #161b27; --s2: #1e2436; --s3: #252d42; --bd: rgba(255,255,255,.1); --bdf: rgba(255,255,255,.06); /* Text */ --tx: #f0f2ff; --tx2: #c8cadf; --txm: #7a7d99; /* Accent */ --a: #ff5e3a; --a2: #ff3a7a; --b: #7c5cfc; /* Layout */ --w: 1320px; --r: 8px; --rl: 10px; --rx: 14px; --rp: 999px; /* Spacing */ --xs: .35rem; --sm: .65rem; --md: 1rem; --lg: 1.5rem; --xl: 2.5rem; /* Shadow */ --sh0: 0 1px 3px rgba(0,0,0,.3); --sh1: 0 4px 16px rgba(0,0,0,.45); --sh2: 0 8px 32px rgba(0,0,0,.55); /* Font */ --fd: 'Quicksand', system-ui, sans-serif; --fb: system-ui, sans-serif; /* Transition */ --e: .2s ease; --es: .3s cubic-bezier(.34,1.56,.64,1); } /* Light mode overrides */ html[data-theme="light"] { --bg: #f2f4f8; --surf: #ffffff; --s2: #f5f7fb; --s3: #ebeef5; --bd: rgba(0,0,0,.1); --bdf: rgba(0,0,0,.06); --tx: #111827; --tx2: #374151; --txm: #6b7280; } /* =========================================== RESET & BASE =========================================== */ *,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--fb); background: var(--bg); color: var(--tx); line-height: 1.6; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul,ol { list-style: none; } button { cursor: pointer; font-family: inherit; } :focus-visible { outline: 2px solid var(--a); outline-offset: 3px; } /* =========================================== SCROLLBAR =========================================== */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--s3); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--a); } /* =========================================== LAYOUT =========================================== */ .vp-wrap { max-width: var(--w); margin: 0 auto; padding: 0 var(--md); } .vp-site { min-height: 100vh; background: var(--bg); } /* -- Reading progress bar -- */ .vp-progress { position: fixed; top: 0; left: 0; width: 0; height: 3px; background: linear-gradient(90deg, var(--a), var(--b)); z-index: 9999; transition: width .1s linear; } /* -- Skip link -- */ .skip-link { position: absolute; left: -999px; top: auto; z-index: 99999; font-size: .8rem; padding: .4em .8em; background: var(--a); color: #fff; border-radius: var(--r); } .skip-link:focus { left: var(--md); top: var(--md); } /* =========================================== AD SLOTS =========================================== */ .vp-ad { display: block; width: 100%; overflow: hidden; padding: 0; margin: 0; line-height: 0; font-size: 0; text-align: center; } .vp-ad iframe, .vp-ad ins, .vp-ad img, .vp-ad > * { max-width: 100% !important; width: 100% !important; height: auto !important; display: block !important; } .vp-ad--has-iframe iframe { height: 100% !important; } .vp-ad-wrap { background: var(--s2); border-bottom: 1px solid var(--bdf); padding: var(--sm) 0; text-align: center; } .vp-ad--top { min-height: 90px; } .vp-ad--side { min-height: 250px; } .vp-ad--mid { min-height: 90px; } /* =========================================== UTILITY BAR =========================================== */ .vp-util { background: var(--surf); border-bottom: 1px solid var(--bdf); font-size: .72rem; font-family: var(--fd); } .vp-util__inner { display: flex; align-items: center; justify-content: space-between; min-height: 34px; gap: var(--md); } .vp-util__links { display: flex; align-items: center; gap: 0; } .vp-util__links li { border-right: 1px solid var(--bdf); } .vp-util__links a { display: block; padding: .3em .75em; color: var(--txm); font-weight: 600; transition: color var(--e); } .vp-util__links a:hover { color: var(--a); } /* Announcement */ .vp-ann { display: flex; align-items: center; gap: .4rem; font-size: .7rem; font-weight: 700; color: var(--tx2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 400px; } .vp-ann__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--a); flex-shrink: 0; animation: dotPulse 1.6s ease-in-out infinite; } @keyframes dotPulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.4; transform:scale(.7); } } .vp-ann a { color: var(--a); } /* -- Util search -- */ .vp-util__search { display: flex; align-items: center; background: var(--s2); border: 1px solid var(--bd); border-radius: var(--rp); overflow: hidden; transition: border-color var(--e); } .vp-util__search:focus-within { border-color: var(--a); } .vp-util__search input { background: none; border: none; outline: none; padding: .3em .7em; font-size: .76rem; color: var(--tx); width: 160px; font-family: var(--fd); transition: width var(--e); } .vp-util__search input:focus { width: 220px; } .vp-util__search input::placeholder { color: var(--txm); } .vp-util__search button { background: none; border: none; padding: 0 .6em; color: var(--txm); height: 28px; display: flex; align-items: center; transition: color var(--e); } .vp-util__search button:hover { color: var(--a); } /* =========================================== LOGO BAR =========================================== */ .vp-logo-bar { background: var(--surf); border-bottom: 1px solid var(--bdf); } .vp-logo-bar__inner { display: flex; align-items: center; gap: var(--md); padding: var(--sm) 0; min-height: 72px; } .vp-logo { flex-shrink: 0; display: flex; align-items: center; text-decoration: none; } .vp-logo__text { font-family: var(--fd); font-weight: 900; font-size: 1.8rem; letter-spacing: .04em; text-transform: uppercase; line-height: 1; } .vp-logo__p1 { background: linear-gradient(90deg, #fff 0%, #e0e2ff 30%, #fff 60%, #d0d3ff 100%); background-size: 250% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: logoSweep 4s linear infinite; } .vp-logo__p2 { background: linear-gradient(90deg, var(--a) 0%, var(--a2) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 0 8px rgba(255,94,58,.4)); animation: logoPulse 3s ease-in-out infinite; } @keyframes logoSweep { 0% { background-position: 250% 50%; } 100%{ background-position: -250% 50%; } } @keyframes logoPulse { 0%,100% { filter: drop-shadow(0 0 6px rgba(255,94,58,.35)); } 50% { filter: drop-shadow(0 0 14px rgba(255,58,122,.6)); } } .vp-logo:hover .vp-logo__text { transform: scale(1.02); } .vp-logo__text { transition: transform .25s ease; } /* Ad space in logo bar */ .vp-logo-bar__ad { flex: 1; display: flex; align-items: center; justify-content: flex-end; min-width: 0; overflow: hidden; } .vp-logo-bar__ad-empty { border: 1.5px dashed var(--bdf); border-radius: var(--r); padding: .5rem 1rem; color: var(--txm); font-size: .65rem; font-family: var(--fd); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; min-width: 200px; text-align: center; } /* Hamburger */ .vp-logo-bar__actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; } .vp-hamburger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 38px; height: 38px; background: var(--s2); border: 1px solid var(--bd); border-radius: var(--r); padding: 8px; transition: background var(--e); } .vp-hamburger span { display: block; width: 100%; height: 2px; background: var(--tx2); border-radius: 2px; transition: all var(--e); } .vp-hamburger:hover { background: var(--s3); } .vp-hamburger:hover span { background: var(--a); } /* =========================================== PRIMARY NAV =========================================== */ .vp-nav { background: var(--s2); border-bottom: 2px solid var(--a); position: sticky; top: 0; z-index: 500; box-shadow: 0 2px 12px rgba(0,0,0,.4); } .vp-nav__inner { display: flex; align-items: stretch; min-height: 46px; overflow: hidden; } .vp-nav__menu-wrap { flex: 1; overflow-x: auto; scrollbar-width: none; } .vp-nav__menu-wrap::-webkit-scrollbar { display: none; } /* Target all WordPress menu outputs */ .vp-nav__menu-wrap ul, #vp-primary-menu, .vp-nav__menu { display: flex !important; align-items: stretch !important; list-style: none !important; margin: 0 !important; padding: 0 !important; min-width: max-content; height: 100%; } .vp-nav__menu-wrap li, #vp-primary-menu li, .vp-nav__menu li { display: flex !important; align-items: stretch !important; list-style: none !important; border-right: 1px solid var(--bdf) !important; flex-shrink: 0; } .vp-nav__menu-wrap a, #vp-primary-menu a, .vp-nav__menu a { display: flex !important; align-items: center !important; padding: 0 1em !important; font-family: var(--fd) !important; font-size: .78rem !important; font-weight: 700 !important; color: var(--tx2) !important; text-decoration: none !important; white-space: nowrap !important; border-bottom: 3px solid transparent; transition: all var(--e); background: transparent; } .vp-nav__menu-wrap a:hover, #vp-primary-menu a:hover, .vp-nav__menu a:hover { color: var(--a) !important; border-bottom-color: var(--a); background: rgba(255,94,58,.07); } .vp-nav__menu-wrap .current-menu-item > a, #vp-primary-menu .current-menu-item > a { color: var(--a) !important; border-bottom-color: var(--a); } /* Dark mode indicator */ .vp-dark-btn { display: flex; align-items: center; gap: .4rem; padding: 0 .9rem; border: none; border-left: 1px solid var(--bdf); background: none; color: var(--txm); font-size: .7rem; font-family: var(--fd); font-weight: 700; white-space: nowrap; transition: all var(--e); min-height: 46px; } .vp-dark-btn:hover { color: var(--a); background: rgba(255,94,58,.06); } /* Mobile drawer */ .vp-drawer { display: none; background: var(--s2); border-top: 1px solid var(--bdf); padding: var(--md); } .vp-drawer.open { display: block; } .vp-drawer ul { display: flex; flex-direction: column; gap: 2px; } .vp-drawer a { display: block; padding: .55em .8em; border-radius: var(--r); font-family: var(--fd); font-size: .85rem; font-weight: 600; color: var(--tx2); transition: all var(--e); } .vp-drawer a:hover { background: var(--s3); color: var(--a); } .vp-drawer-label { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--txm); padding: .4em .8em .2em; margin-top: var(--sm); } /* =========================================== VIDEO CARD =========================================== */ .vp-card { background: var(--surf); border-radius: var(--rl); overflow: hidden; border: 1px solid var(--bdf); box-shadow: var(--sh0); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; display: flex; flex-direction: column; } .vp-card:hover { transform: translateY(-4px); box-shadow: var(--sh2); border-color: rgba(255,94,58,.3); } /* Thumbnail */ .vp-card__thumb { aspect-ratio: 620 / 349; position: relative; overflow: hidden; background: var(--s2); flex-shrink: 0; } .vp-card__thumb img { width: 100%; height: 100%; object-fit: contain; background: #0f1117; display: block; transition: transform .4s ease; } .vp-card:hover .vp-card__thumb img { transform: scale(1.07); } /* No image placeholder */ .vp-card__no-img { width: 100%; height: 100%; background: linear-gradient(135deg, #1a1535, #2a1a55, #1a2060); display: flex; align-items: center; justify-content: center; } .vp-card__no-img::after { content: ''; font-size: 2.5rem; color: rgba(255,255,255,.15); } /* Overlay */ .vp-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 55%); pointer-events: none; } /* Play button */ .vp-card__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(.8); opacity: 0; width: 52px; height: 52px; background: rgba(255,94,58,.85); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all .25s var(--es); pointer-events: none; } .vp-card__play svg { margin-left: 3px; } .vp-card:hover .vp-card__play { transform: translate(-50%,-50%) scale(1); opacity: 1; } /* Category badge */ .vp-card__cat { position: absolute; bottom: .5rem; left: .5rem; font-family: var(--fd); font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; background: var(--a); color: #fff; padding: .2em .6em; border-radius: var(--rp); } /* NEW badge */ .vp-card__new { position: absolute; top: .5rem; right: .5rem; font-family: var(--fd); font-size: .55rem; font-weight: 800; text-transform: uppercase; background: #ff3a3a; color: #fff; padding: .2em .55em; border-radius: var(--rp); animation: newBlink 1.4s ease-in-out infinite; } @keyframes newBlink { 0%,100% { opacity:1; } 50% { opacity:.5; } } /* Card body */ .vp-card__body { padding: .65rem .75rem .75rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; } .vp-card__title { font-family: var(--fd); font-size: .82rem; font-weight: 700; color: var(--tx); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color var(--e); } .vp-card:hover .vp-card__title { color: var(--a); } .vp-card__meta { font-size: .66rem; color: var(--txm); font-family: var(--fd); display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; } .vp-card__meta-sep { color: var(--bdf); } /* =========================================== GALLERY GRID =========================================== */ .vp-gallery { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; } .vp-gallery-ad { background: var(--s2); border: 1.5px dashed rgba(255,94,58,.2); border-radius: var(--rl); display: flex; align-items: center; justify-content: center; min-height: 200px; overflow: hidden; } /* Section header */ .vp-section-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--md); padding-bottom: var(--sm); border-bottom: 2px solid var(--bdf); } .vp-section-hd__title { font-family: var(--fd); font-size: .9rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; display: flex; align-items: center; gap: .5rem; } .vp-section-hd__title::before { content: ''; display: block; width: 4px; height: 18px; background: linear-gradient(180deg, var(--a), var(--b)); border-radius: 4px; } .vp-section-hd__link { font-family: var(--fd); font-size: .74rem; font-weight: 700; color: var(--a); border: 1.5px solid var(--a); border-radius: var(--rp); padding: .25em .9em; transition: all var(--es); } .vp-section-hd__link:hover { background: var(--a); color: #fff; } /* Pagination */ .vp-pagination { display: flex; align-items: center; justify-content: center; gap: .35rem; padding: var(--lg) 0; flex-wrap: wrap; } .vp-pagination a, .vp-pagination span { display: flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; border-radius: var(--r); font-family: var(--fd); font-size: .78rem; font-weight: 700; border: 1.5px solid var(--bd); background: var(--surf); color: var(--tx2); transition: all var(--es); padding: 0 .6em; } .vp-pagination a:hover { background: var(--a); border-color: var(--a); color: #fff; } .vp-pagination .current { background: var(--a); border-color: var(--a); color: #fff; } /* =========================================== SINGLE POST =========================================== */ .vp-single-layout { display: grid; grid-template-columns: 1fr 300px; gap: var(--lg); align-items: start; } .vp-single-main { background: var(--surf); border: 1.5px solid var(--bdf); border-radius: var(--rx); overflow: hidden; box-shadow: var(--sh1); } .vp-single-header { padding: var(--md); border-bottom: 1px solid var(--bdf); } .vp-breadcrumb { font-size: .7rem; color: var(--txm); font-family: var(--fd); margin-bottom: var(--sm); } .vp-breadcrumb a { color: var(--a); } .vp-breadcrumb a:hover { text-decoration: underline; } .vp-single-title { font-family: var(--fd); font-size: clamp(1.1rem, 2.5vw, 1.5rem); font-weight: 800; line-height: 1.3; margin-bottom: var(--sm); word-break: break-word; } .vp-single-meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .72rem; color: var(--txm); font-family: var(--fd); } .vp-single-meta a { color: var(--a); } .vp-single-content { padding: var(--md); } .vp-single-content p { margin-bottom: var(--md); line-height: 1.8; } .vp-single-content h2 { font-size: 1.2rem; margin: var(--lg) 0 var(--sm); font-family: var(--fd); } .vp-single-content h3 { font-size: 1rem; margin: var(--md) 0 var(--xs); font-family: var(--fd); } .vp-single-content a { color: var(--a); text-decoration: underline; } .vp-single-content img { border-radius: var(--r); margin-block: var(--md); } .vp-single-content iframe { width: 100%; border-radius: var(--r); } .vp-single-content blockquote { border-left: 4px solid var(--a); padding: var(--sm) var(--md); background: var(--s2); border-radius: 0 var(--r) var(--r) 0; margin-block: var(--md); font-style: italic; color: var(--tx2); } /* Divider */ .vp-divider { height: 2px; background: linear-gradient(90deg, var(--a) 0%, var(--b) 40%, var(--bdf) 100%); opacity: .4; margin: 0; } /* Share section */ .vp-share { padding: var(--sm) var(--md); border-top: 1px solid var(--bdf); display: flex; align-items: center; gap: var(--sm); flex-wrap: wrap; } .vp-share__label { font-family: var(--fd); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--txm); flex-shrink: 0; } .vp-share-btn { display: inline-flex; align-items: center; gap: .35em; font-family: var(--fd); font-size: .72rem; font-weight: 700; padding: .35em .85em; border-radius: var(--rp); border: 1.5px solid var(--bd); color: var(--tx2); background: var(--s2); transition: all var(--es); text-decoration: none; } .vp-share-btn:hover { background: var(--clr, var(--a)); border-color: var(--clr, var(--a)); color: #fff; } /* Tags */ .vp-tags { padding: var(--sm) var(--md); border-top: 1px solid var(--bdf); display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; } .vp-tag { font-family: var(--fd); font-size: .66rem; font-weight: 700; padding: .25em .7em; border: 1.5px solid var(--bd); border-radius: var(--rp); color: var(--txm); transition: all var(--e); } .vp-tag:hover { border-color: var(--a); color: var(--a); } /* Post nav */ .vp-post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sm); padding: var(--sm) var(--md); border-top: 1px solid var(--bdf); } .vp-pnav { background: var(--s2); border-radius: var(--r); padding: .6rem .8rem; text-decoration: none; transition: background var(--e); } .vp-pnav:hover { background: var(--s3); } .vp-pnav__lbl { font-size: .6rem; font-weight: 800; text-transform: uppercase; color: var(--txm); font-family: var(--fd); margin-bottom: .2rem; } .vp-pnav__t { font-size: .78rem; font-weight: 700; color: var(--tx2); font-family: var(--fd); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .vp-pnav--next { text-align: right; } /* =========================================== SIDEBAR =========================================== */ .vp-sidebar { display: flex; flex-direction: column; gap: var(--md); position: sticky; top: calc(46px + var(--sm)); } /* Sidebar widget */ .vp-widget { background: var(--surf); border: 1.5px solid var(--bdf); border-radius: var(--rl); overflow: hidden; box-shadow: var(--sh0); } .vp-widget__head { display: flex; align-items: center; gap: .4rem; padding: .55rem var(--md); background: var(--s2); border-bottom: 1.5px solid var(--bdf); font-family: var(--fd); font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--tx2); } .vp-widget__head::before { content: ''; width: 3px; height: 14px; background: linear-gradient(180deg, var(--a), var(--b)); border-radius: 3px; flex-shrink: 0; } .vp-widget__head svg { color: var(--a); } /* Sidebar search */ .vp-widget--search { border-top: 2px solid var(--a); } .vp-sb-search { padding: var(--sm) var(--md); display: flex; background: var(--s2); border: 1.5px solid var(--bdf); border-radius: var(--rp); margin: var(--sm); overflow: hidden; transition: border-color var(--e), box-shadow var(--e); } .vp-sb-search:focus-within { border-color: var(--a); box-shadow: 0 0 0 3px rgba(255,94,58,.12); } .vp-sb-search input { flex: 1; background: none; border: none; outline: none; font-size: .85rem; font-family: var(--fd); color: var(--tx); padding: .5em .7em; min-width: 0; } .vp-sb-search input::placeholder { color: var(--txm); } .vp-sb-search button { background: var(--a); border: none; padding: 0 .9em; color: #fff; display: flex; align-items: center; transition: background var(--e); } .vp-sb-search button:hover { background: var(--a2); } /* Sidebar post rows */ .vp-sb-post { display: flex; gap: .6rem; padding: .55rem var(--md); border-bottom: 1px solid var(--bdf); text-decoration: none; transition: background var(--e), padding-left var(--e); } .vp-sb-post:last-child { border-bottom: none; } .vp-sb-post:hover { background: var(--s2); padding-left: calc(var(--md) + 4px); } .vp-sb-post__img { width: 66px; height: 48px; border-radius: var(--r); overflow: hidden; flex-shrink: 0; background: var(--s2); } .vp-sb-post__img img { width: 100%; height: 100%; object-fit: cover; } .vp-sb-post__img-ph { width: 100%; height: 100%; background: linear-gradient(135deg, var(--a), var(--b)); } .vp-sb-post__title { font-family: var(--fd); font-size: .76rem; font-weight: 700; color: var(--tx); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; transition: color var(--e); } .vp-sb-post:hover .vp-sb-post__title { color: var(--a); } .vp-sb-post__date { font-size: .62rem; color: var(--txm); font-family: var(--fd); margin-top: .2em; } /* Sidebar categories */ .vp-sb-cat { display: flex; align-items: center; justify-content: space-between; padding: .5rem var(--md); border-bottom: 1px solid var(--bdf); text-decoration: none; transition: background var(--e), padding-left var(--e); } .vp-sb-cat:last-child { border-bottom: none; } .vp-sb-cat:hover { background: var(--s2); padding-left: calc(var(--md) + 4px); } .vp-sb-cat__name { font-family: var(--fd); font-size: .8rem; font-weight: 600; color: var(--tx2); transition: color var(--e); } .vp-sb-cat:hover .vp-sb-cat__name { color: var(--a); } .vp-sb-cat__cnt { font-family: var(--fd); font-size: .62rem; font-weight: 700; background: var(--s2); border: 1.5px solid var(--bdf); border-radius: var(--rp); padding: .1em .5em; color: var(--txm); transition: all var(--e); } .vp-sb-cat:hover .vp-sb-cat__cnt { background: var(--a); border-color: var(--a); color: #fff; } /* Sidebar tab widget */ .vp-widget--tabs { overflow: hidden; } .vp-tab-bar { display: flex; background: var(--s2); border-bottom: 1.5px solid var(--bdf); } .vp-tab-btn { flex: 1; padding: .5em .4em; background: none; border: none; border-bottom: 2.5px solid transparent; font-family: var(--fd); font-size: .72rem; font-weight: 700; color: var(--txm); transition: all var(--e); } .vp-tab-btn.on, .vp-tab-btn:hover { color: var(--a); border-bottom-color: var(--a); } .vp-tab-panel { display: none; } .vp-tab-panel.on { display: block; } /* =========================================== FOOTER =========================================== */ .vp-footer { background: var(--surf); border-top: 1px solid var(--bdf); margin-top: var(--xl); } .vp-footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--lg); padding: var(--lg) 0; } .vp-footer-col__title { font-family: var(--fd); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--tx2); padding-bottom: var(--sm); border-bottom: 1.5px solid var(--bdf); margin-bottom: var(--sm); display: flex; align-items: center; gap: .4rem; } .vp-footer-col__title::before { content: ''; width: 3px; height: 12px; background: linear-gradient(180deg, var(--a), var(--b)); border-radius: 3px; } .vp-footer-links a { display: block; padding: .3rem 0; font-family: var(--fd); font-size: .78rem; font-weight: 500; color: var(--txm); border-bottom: 1px solid var(--bdf); transition: all var(--e); } .vp-footer-links a:hover { color: var(--a); padding-left: 4px; } .vp-footer-links li:last-child a { border-bottom: none; } .vp-footer-bottom { border-top: 1px solid var(--bdf); padding: var(--md) 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sm); font-family: var(--fd); font-size: .72rem; color: var(--txm); } .vp-footer-bottom a { color: var(--txm); } .vp-footer-bottom a:hover { color: var(--a); } /* Dark mode toggle in footer */ .vp-footer-toggle { display: inline-flex; align-items: center; gap: .6rem; background: var(--s2); border: 1.5px solid var(--bdf); border-radius: var(--rp); padding: .4em 1.1em; font-family: var(--fd); font-size: .72rem; font-weight: 700; color: var(--txm); transition: all var(--es); } .vp-footer-toggle:hover { border-color: var(--a); color: var(--tx); } /* Go to top */ .vp-gototop { position: fixed; bottom: 1.5rem; right: 1.5rem; width: 42px; height: 42px; background: var(--a); color: #fff; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(255,94,58,.4); opacity: 0; transform: translateY(12px); transition: all var(--es); pointer-events: none; z-index: 999; } .vp-gototop.show { opacity: 1; transform: translateY(0); pointer-events: auto; } .vp-gototop:hover { background: var(--a2); transform: scale(1.08) translateY(-2px); } /* =========================================== SEARCH RESULTS PAGE =========================================== */ .vp-search-hd { padding-bottom: var(--md); border-bottom: 2px solid var(--bdf); margin-bottom: var(--lg); } .vp-search-title { font-family: var(--fd); font-size: clamp(1.1rem,2.8vw,1.6rem); font-weight: 800; display: flex; align-items: center; gap: .35em; flex-wrap: wrap; } .vp-search-q { color: var(--a); font-style: italic; } .vp-search-site { color: var(--b); } /* =========================================== 404 PAGE =========================================== */ .vp-404 { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--xl) 0 calc(var(--xl)*2); gap: var(--lg); } .vp-404__num { font-family: var(--fd); font-size: clamp(6rem,20vw,10rem); font-weight: 900; line-height: 1; background: linear-gradient(135deg, var(--a), var(--b)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .vp-404__card { background: var(--surf); border: 1.5px solid var(--bdf); border-radius: var(--rx); padding: var(--xl) var(--lg); max-width: 460px; width: 100%; box-shadow: var(--sh2); } /* =========================================== ANNOUNCEMENT OVERLAY =========================================== */ .vp-ann-bar { background: rgba(0,0,0,.6); border-bottom: 1px solid rgba(255,94,58,.2); } .vp-ann-bar__inner { display: flex; align-items: center; min-height: 32px; padding: .22rem 0; } /* =========================================== POPUP =========================================== */ .vp-popup-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.8); backdrop-filter: blur(6px); z-index: 99999; align-items: center; justify-content: center; padding: var(--md); } .vp-popup-overlay.on { display: flex; } .vp-popup { background: var(--surf); border: 2px solid var(--a); border-radius: var(--rx); padding: var(--lg); max-width: 480px; width: 100%; position: relative; box-shadow: var(--sh2); animation: popIn .3s cubic-bezier(.34,1.56,.64,1); } @keyframes popIn { from { transform: scale(.85) translateY(20px); opacity:0; } to { transform: scale(1) translateY(0); opacity:1; } } .vp-popup-close { position: absolute; top: var(--sm); right: var(--sm); width: 32px; height: 32px; background: var(--s2); border: 1.5px solid var(--bdf); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--txm); transition: all var(--e); } .vp-popup-close:hover { background: var(--a); color:#fff; transform: rotate(90deg); } .vp-popup__title { font-family: var(--fd); font-size: 1.1rem; font-weight: 800; margin-bottom: var(--sm); padding-right: 2rem; } .vp-popup__body { font-size: .9rem; color: var(--tx2); line-height: 1.7; margin-bottom: var(--lg); } .vp-popup__btn { display: inline-flex; align-items: center; gap: .4em; font-family: var(--fd); font-size: .85rem; font-weight: 700; padding: .6em 1.5em; border-radius: var(--rp); border: none; background: linear-gradient(135deg, var(--a), var(--a2)); color: #fff; box-shadow: 0 4px 14px rgba(255,94,58,.3); transition: all .2s var(--es); text-decoration: none; } .vp-popup__btn:hover { transform: scale(1.04); color:#fff; } /* =========================================== RESPONSIVE =========================================== */ @media (max-width: 1100px) { .vp-gallery { grid-template-columns: repeat(3, minmax(0,1fr)); } .vp-single-layout { grid-template-columns: 1fr 260px; } .vp-footer-cols { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { :root { --md: .85rem; --lg: 1.2rem; } .vp-gallery { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; } .vp-single-layout { grid-template-columns: 1fr; } .vp-sidebar { position: static; } .vp-footer-cols { grid-template-columns: 1fr; gap: var(--md); } .vp-util__links { display: none; } .vp-nav { display: none; } .vp-logo-bar__ad { display: none; } .vp-post-nav { grid-template-columns: 1fr; } .vp-footer-bottom { justify-content: center; text-align: center; } .vp-footer-toggle { margin: auto; } } @media (max-width: 480px) { .vp-gallery { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; } } /* Mobile top search bar */ .vp-mob-search { display: none; } @media (max-width: 768px) { .vp-mob-search { display: block; background: var(--s2); border-bottom: 1.5px solid var(--bdf); padding: .45rem var(--md); } .vp-mob-search__form { display: flex; background: var(--s3); border: 1.5px solid var(--bdf); border-radius: var(--rp); overflow: hidden; transition: border-color var(--e); } .vp-mob-search__form:focus-within { border-color: var(--a); } .vp-mob-search__form input { flex:1; background:none; border:none; outline:none; padding:.55em .9em; font-size:.9rem; font-family:var(--fd); color:var(--tx); } .vp-mob-search__form input::placeholder { color: var(--txm); } .vp-mob-search__form button { background: var(--a); border:none; padding:0 1em; color:#fff; display:flex; align-items:center; } } /* =========================================== PRINT =========================================== */ @media print { .vp-nav, .vp-sidebar, .vp-footer, .vp-gototop, .vp-share, .vp-popup-overlay { display:none!important; } .vp-single-layout { grid-template-columns:1fr; } .vp-single-main { box-shadow:none; border:none; } } /* =========================================== SITE-WIDE BOX SHAPE + SHADOWS Every major element gets border + shadow =========================================== */ /* Main content area */ .vp-main { padding: var(--md) 0; } /* Site wrapper shadow */ .vp-site { max-width: var(--w); margin: 0 auto; box-shadow: 0 0 60px rgba(0,0,0,.6); border: 1px solid var(--bd); border-top: none; } /* Util bar, logo bar, nav -- top border accent */ .vp-util { border-top: 3px solid var(--a); } .vp-logo-bar{ border-left:1px solid var(--bdf); border-right:1px solid var(--bdf); } .vp-nav { border-left:1px solid rgba(255,255,255,.06); border-right:1px solid rgba(255,255,255,.06); } /* -- CARDS -- box + shadow -- */ .vp-card { border: 1.5px solid var(--bdf); border-radius: var(--rl); box-shadow: var(--sh0); overflow: hidden; background: var(--surf); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .vp-card:hover { transform: translateY(-5px) scale(1.01); box-shadow: 0 12px 36px rgba(0,0,0,.5), 0 0 0 1px rgba(255,94,58,.2); border-color: rgba(255,94,58,.35); } /* -- SIDEBAR WIDGETS -- box + shadow -- */ .vp-widget { border: 1.5px solid var(--bdf); border-radius: var(--rl); box-shadow: 0 2px 14px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.04); overflow: hidden; background: var(--surf); transition: box-shadow .2s; } .vp-widget:hover { box-shadow: 0 4px 20px rgba(0,0,0,.4), 0 0 0 1px rgba(255,94,58,.12); } .vp-widget__head { background: linear-gradient(135deg, var(--s2) 0%, var(--s3) 100%); border-bottom: 2px solid var(--a); font-size: .73rem; } /* -- SINGLE POST MAIN -- box + shadow -- */ .vp-single-main { border: 1.5px solid var(--bdf); border-radius: var(--rx); box-shadow: 0 4px 24px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.04); overflow: hidden; background: var(--surf); } .vp-single-header { border-bottom: 1.5px solid var(--bdf); background: linear-gradient(180deg, var(--s2) 0%, var(--surf) 100%); } /* -- AD SLOTS -- box style -- */ .vp-ad { border-radius: var(--r); overflow: hidden; margin: var(--sm) 0; } .vp-ad-wrap { background: var(--s2); border-top: 1px solid var(--bdf); border-bottom: 1px solid var(--bdf); padding: var(--sm) 0; } .vp-ad-wrap--top { border-top: 3px solid var(--a); } .vp-gallery-ad { border: 1.5px dashed rgba(255,94,58,.25); border-radius: var(--rl); background: var(--s2); box-shadow: inset 0 0 20px rgba(0,0,0,.2); overflow: hidden; min-height: 200px; } /* -- TOP BANNER 468x60 -- */ .vp-ad--vp_ad_top_banner { min-height: 60px; display: flex; align-items: center; justify-content: center; } .vp-ad--vp_ad_top_banner iframe { height: 60px !important; } /* -- RELATED POSTS -- */ .vp-related { margin-top: var(--xl); padding-top: var(--lg); border-top: 2px solid var(--bdf); } .vp-related__grid { grid-template-columns: repeat(4,minmax(0,1fr)) !important; } @media(max-width:768px){ .vp-related__grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } } /* =========================================== COLOURFUL SHARE BUTTONS =========================================== */ .vp-share { padding: var(--md); } .vp-share-btn { display: inline-flex; align-items: center; gap: .4em; font-family: var(--fd); font-size: .75rem; font-weight: 700; padding: .45em 1em; border-radius: var(--rp); border: none; color: #fff !important; text-decoration: none !important; background: var(--clr, var(--a)); box-shadow: 0 3px 10px rgba(0,0,0,.25); transition: all .2s cubic-bezier(.34,1.56,.64,1); letter-spacing: .02em; } .vp-share-btn:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 6px 18px rgba(0,0,0,.35); filter: brightness(1.1); } .vp-share-btn:active { transform: scale(.96); } /* Specific colors per network */ .vp-share-btn:nth-child(2) { background: #1877f2; box-shadow: 0 3px 10px rgba(24,119,242,.35); } .vp-share-btn:nth-child(3) { background: #111; box-shadow: 0 3px 10px rgba(0,0,0,.4); } .vp-share-btn:nth-child(4) { background: #25d366; box-shadow: 0 3px 10px rgba(37,211,102,.35); } .vp-share-btn:nth-child(5) { background: #0088cc; box-shadow: 0 3px 10px rgba(0,136,204,.35); } .vp-share-btn:nth-child(6) { background: #ff4500; box-shadow: 0 3px 10px rgba(255,69,0,.35); } /* =========================================== COMMENTS -- box + border + shadow =========================================== */ .vp-comments-wrap { padding: var(--md); border-top: 2px solid var(--bdf); } .vp-comments-wrap .comment-list, #comments .comment-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sm); } .vp-comments-wrap .comment, #comments .comment { background: var(--s2); border: 1.5px solid var(--bdf); border-radius: var(--rl); padding: var(--md); box-shadow: 0 2px 10px rgba(0,0,0,.2); transition: border-color .2s, box-shadow .2s; list-style: none; } .vp-comments-wrap .comment:hover, #comments .comment:hover { border-color: rgba(255,94,58,.2); box-shadow: 0 4px 16px rgba(0,0,0,.3); } .vp-comments-wrap .comment-author, #comments .comment-author { display: flex; align-items: center; gap: .6rem; margin-bottom: var(--sm); } .vp-comments-wrap .comment-author img, #comments .comment-author img { border-radius: 50%; border: 2px solid var(--a); box-shadow: 0 2px 8px rgba(0,0,0,.3); } .vp-comments-wrap .comment-meta, #comments .comment-meta { font-size: .7rem; color: var(--txm); font-family: var(--fd); } .vp-comments-wrap .comment-body p, #comments .comment-body p { font-size: .88rem; line-height: 1.7; color: var(--tx2); margin-bottom: var(--xs); } .vp-comments-wrap .reply a, #comments .reply a { font-size: .68rem; font-weight: 700; color: var(--a); font-family: var(--fd); text-decoration: none; } .vp-comments-wrap .reply a:hover { text-decoration: underline; } /* Comment Form */ .vp-comments-wrap #respond, #comments #respond { background: var(--surf); border: 1.5px solid var(--bd); border-radius: var(--rl); padding: var(--md); margin-top: var(--md); box-shadow: 0 4px 20px rgba(0,0,0,.25); } .vp-comments-wrap #reply-title, #comments #reply-title { font-family: var(--fd); font-size: .95rem; font-weight: 800; margin-bottom: var(--md); padding-bottom: var(--sm); border-bottom: 2px solid var(--a); display: flex; align-items: center; gap: .4rem; } .vp-comments-wrap .comment-form input[type="text"], .vp-comments-wrap .comment-form input[type="email"], .vp-comments-wrap .comment-form input[type="url"], .vp-comments-wrap .comment-form textarea, #comments .comment-form input[type="text"], #comments .comment-form input[type="email"], #comments .comment-form textarea { width: 100%; background: var(--s2); border: 1.5px solid var(--bd); border-radius: var(--r); padding: .65em .9em; color: var(--tx); font-family: var(--fb); font-size: .88rem; outline: none; box-sizing: border-box; transition: border-color .2s, box-shadow .2s; box-shadow: 0 1px 4px rgba(0,0,0,.15); } .vp-comments-wrap .comment-form input:focus, .vp-comments-wrap .comment-form textarea:focus, #comments .comment-form input:focus, #comments .comment-form textarea:focus { border-color: var(--a); box-shadow: 0 0 0 3px rgba(255,94,58,.12), 0 2px 8px rgba(0,0,0,.2); } .vp-comments-wrap .comment-form textarea, #comments .comment-form textarea { min-height: 120px; resize: vertical; } .vp-comments-wrap .form-submit .submit, #comments .form-submit .submit { background: linear-gradient(135deg, var(--a), var(--a2)); color: #fff; border: none; border-radius: var(--rp); padding: .65em 1.8em; font-family: var(--fd); font-size: .85rem; font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(255,94,58,.3); transition: all .2s cubic-bezier(.34,1.56,.64,1); } .vp-comments-wrap .form-submit .submit:hover, #comments .form-submit .submit:hover { transform: scale(1.04); box-shadow: 0 6px 20px rgba(255,94,58,.4); } /* =========================================== LIGHT MODE -- boxes stay visible =========================================== */ html[data-theme="light"] .vp-card { background:#fff; border-color:rgba(0,0,0,.09); box-shadow:0 2px 12px rgba(0,0,0,.08); } html[data-theme="light"] .vp-widget { background:#fff; border-color:rgba(0,0,0,.09); box-shadow:0 2px 10px rgba(0,0,0,.07); } html[data-theme="light"] .vp-single-main { background:#fff; border-color:rgba(0,0,0,.1); box-shadow:0 4px 24px rgba(0,0,0,.1); } html[data-theme="light"] .vp-site { box-shadow:0 0 40px rgba(0,0,0,.12); } html[data-theme="light"] .vp-util { background:#111827; border-top-color: var(--a); } html[data-theme="light"] .vp-util__links a { color:#9ca3af; } html[data-theme="light"] .vp-logo-bar { background:#1a1d2e; } html[data-theme="light"] .vp-nav { background:#252840; border-bottom-color: var(--a); } html[data-theme="light"] .vp-nav__menu-wrap a { color:#c9cde8 !important; } html[data-theme="light"] .vp-dark-btn { color:#9ca3af; } html[data-theme="light"] .vp-footer { background:#1a1d2e; color:#c9cde8; } html[data-theme="light"] .vp-footer-bottom { border-top-color:rgba(255,255,255,.08); } html[data-theme="light"] .vp-footer-col__title { color:#e0e2f0; } html[data-theme="light"] .vp-footer-links a { color:#9ca3af; border-bottom-color:rgba(255,255,255,.08); } html[data-theme="light"] .vp-comments-wrap .comment, html[data-theme="light"] #comments .comment { background:#f8f9fc; border-color:rgba(0,0,0,.09); } html[data-theme="light"] .vp-comments-wrap #respond, html[data-theme="light"] #comments #respond { background:#fff; border-color:rgba(0,0,0,.1); } html[data-theme="light"] .vp-comments-wrap .comment-form input, html[data-theme="light"] .vp-comments-wrap .comment-form textarea, html[data-theme="light"] #comments .comment-form input, html[data-theme="light"] #comments .comment-form textarea { background:#f5f7fa; border-color:rgba(0,0,0,.12); color:#111; } /* === BURGER MENU REMOVED === */ .vp-hamburger { display: none !important; } .vp-drawer { display: none !important; } .vp-logo-bar__actions { display: none; } /* Nav always visible - no mobile collapse */ .vp-nav { display: block !important; } @media (max-width: 768px) { .vp-nav { display: block !important; overflow-x: auto; -webkit-overflow-scrolling: touch; } .vp-nav__inner { min-height: 40px; } .vp-nav__menu-wrap { overflow-x: auto; scrollbar-width: none; } .vp-nav__menu-wrap::-webkit-scrollbar { display: none; } } /* Admin-only view counter in post meta */ .vp-view-count { display: inline-flex; align-items: center; gap: .3rem; color: var(--a); font-weight: 700; font-family: var(--fd); font-size: .68rem; background: rgba(255,94,58,.1); border: 1px solid rgba(255,94,58,.2); border-radius: var(--rp); padding: .15em .55em; } /* ============================================= MOBILE BIG SEARCH ============================================= */ .vp-mob-search { display: none; } @media (max-width: 768px) { /* Hide small util search on mobile */ .vp-util__search { display: none !important; } /* Big search bar */ .vp-mob-search { display: block; background: var(--s2); border-bottom: 2px solid var(--a); padding: .65rem var(--md); } .vp-mob-search__form { display: flex; align-items: center; background: var(--surf); border: 2px solid var(--bd); border-radius: var(--rp); overflow: hidden; transition: border-color .2s, box-shadow .2s; box-shadow: 0 2px 10px rgba(0,0,0,.25); } .vp-mob-search__form:focus-within { border-color: var(--a); box-shadow: 0 0 0 3px rgba(255,94,58,.15), 0 4px 16px rgba(0,0,0,.3); } .vp-mob-search__icon { flex-shrink: 0; margin-left: 1rem; color: var(--txm); pointer-events: none; } .vp-mob-search__form input { flex: 1; background: transparent; border: none; outline: none; padding: .85em 1em; font-size: 1rem; font-family: var(--fd); font-weight: 600; color: var(--tx); min-width: 0; } .vp-mob-search__form input::placeholder { color: var(--txm); font-weight: 500; } .vp-mob-search__btn { background: var(--a); border: none; padding: 0 1.2rem; min-height: 48px; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .18s; } .vp-mob-search__btn:hover { background: var(--a2); } } /* ============================================= VP RECENT POSTS WIDGET - sidebar style ============================================= */ .vp-sb-post__info { flex: 1; min-width: 0; } .vp-sb-post__meta { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: .2rem; } .vp-sb-post__cat { font-family: var(--fd); font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--a); background: rgba(255,94,58,.1); padding: .1em .45em; border-radius: var(--rp); flex-shrink: 0; } /* ============================================= UPDATE BADGE WIDGET ============================================= */ .vp-widget--update-badge { border-color: rgba(255,34,34,.3) !important; box-shadow: 0 0 16px rgba(255,34,34,.15), 0 2px 14px rgba(0,0,0,.3) !important; transition: opacity .28s ease, transform .28s ease; } .vp-sb-post--update { border-left: 3px solid var(--ub-clr, #ff2222); background: rgba(255,0,0,.03); } .vp-sb-post--update:hover { background: rgba(255,0,0,.06); } .vp-update-badge { display: inline-flex; align-items: center; font-family: var(--fd); font-size: .58rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; background: var(--ub-clr, #ff2222); color: #fff; padding: .15em .55em; border-radius: var(--rp); box-shadow: 0 0 6px rgba(255,34,34,.5); animation: ubPulse 1.2s ease-in-out infinite; flex-shrink: 0; } @keyframes ubPulse { 0%,100% { box-shadow: 0 0 4px rgba(255,34,34,.45); } 50% { box-shadow: 0 0 12px rgba(255,34,34,.8), 0 0 20px rgba(255,34,34,.3); } } /* ============================================= VIDEO IFRAME FIX Post content iframes (YouTube, Vimeo, etc) ============================================= */ /* Never clip post content */ .vp-single-content { overflow: visible !important; } /* Responsive iframe wrapper - WordPress wraps embeds in .wp-block-embed */ .vp-single-content iframe, .vp-single-content .wp-block-embed__wrapper iframe, .vp-single-content .fluid-width-video-wrapper iframe, .vp-single-content embed, .vp-single-content object { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 280px; border: none !important; border-radius: var(--r); margin: var(--md) 0; } /* 16:9 ratio wrapper for iframes */ .vp-single-content .wp-block-embed, .vp-single-content .video-wrap { position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 */ height: 0; overflow: hidden; border-radius: var(--r); margin: var(--md) 0; background: #000; } .vp-single-content .wp-block-embed iframe, .vp-single-content .video-wrap iframe { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; min-height: unset !important; border-radius: var(--r); margin: 0 !important; } /* Plain iframe in content (not in wrapper) - responsive */ .vp-single-content > iframe { aspect-ratio: 16 / 9; min-height: unset !important; height: auto !important; } /* Allow clicks through on iframes - fix pointer-events */ .vp-single-content iframe { pointer-events: auto !important; z-index: 1; position: relative; } /* Fix any overlay elements blocking clicks on video */ .vp-card__overlay, .vp-card__play { pointer-events: none !important; } /* ============================================= ALL FIXES v5 → v6 ============================================= */ /* 1. TRENDING NOW badge */ .vp-card__trending { position: absolute; top: .5rem; left: .5rem; font-family: var(--fd); font-size: .58rem; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; background: linear-gradient(135deg, #ff6a00, #ee0979); color: #fff; padding: .22em .6em; border-radius: var(--rp); display: flex; align-items: center; gap: .25em; box-shadow: 0 2px 10px rgba(238,9,121,.5); animation: trendPulse 2s ease-in-out infinite; z-index: 3; } @keyframes trendPulse { 0%,100% { box-shadow: 0 2px 8px rgba(238,9,121,.45); transform: scale(1); } 50% { box-shadow: 0 4px 18px rgba(238,9,121,.75); transform: scale(1.05); } } /* When both NEW and Trending → offset */ .vp-card__new + .vp-card__trending, .vp-card__trending { top: .5rem; left: .5rem; } .vp-card__new { top: .5rem; right: .5rem; left: auto; } /* 2. POPUP - single close button fix */ .vp-popup__close-btn { display: inline-flex; align-items: center; gap: .35em; background: var(--s2); border: 1.5px solid var(--bd); border-radius: var(--rp); padding: .5em 1em; font-family: var(--fd); font-size: .8rem; font-weight: 600; color: var(--txm); cursor: pointer; transition: all .18s; } .vp-popup__close-btn:hover { background: var(--s3); color: var(--tx); } /* 3. MOBILE - hide primary nav on mobile */ @media (max-width: 768px) { .vp-nav { display: none !important; } /* Keep logo bar visible */ .vp-logo-bar { display: flex !important; } } /* 4. GALLERY BALANCE - even grid with 2 extra posts */ /* 26 posts = 6 rows × 4 cols + 2 remaining → keeps balance */ .vp-gallery { grid-template-columns: repeat(4, minmax(0,1fr)); } @media (max-width:1100px) { .vp-gallery { grid-template-columns: repeat(3,minmax(0,1fr)); } } @media (max-width:768px) { .vp-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media (max-width:420px) { .vp-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); gap:6px; } } /* 5. SPEED - Critical CSS hints */ .vp-card__thumb img { content-visibility: auto; object-fit: contain; background: #0f1117; } .vp-widget { contain: layout style; } .vp-gallery { contain: layout; } /* 6. IMAGE META BOX - better UI in Gutenberg */ #vp_ext_img input[type=url] { border: 1.5px solid #2271b1; border-radius: 4px; padding: 6px 8px; width: 100%; box-sizing: border-box; } #vp_ext_img input[type=url]:focus { box-shadow: 0 0 0 2px #2271b1; outline: none; } /* 7. UPDATE BADGE - configurable count visible */ .vp-widget--update-badge .vp-sb-post { transition: opacity .28s; } /* ============================================= FIX v6.1 — NEW badge + trending z-index ============================================= */ /* NEW badge — must be above overlay */ .vp-card__new { position: absolute !important; top: .5rem !important; right: .5rem !important; left: auto !important; z-index: 5 !important; font-size: .6rem !important; font-weight: 900 !important; background: #ff3a3a !important; color: #fff !important; padding: .25em .65em !important; border-radius: var(--rp) !important; box-shadow: 0 2px 8px rgba(255,58,58,.5) !important; animation: newBlink 1.4s ease-in-out infinite !important; display: inline-block !important; text-transform: uppercase !important; letter-spacing: .04em !important; } /* Trending badge — also above overlay */ .vp-card__trending { z-index: 5 !important; top: .5rem !important; left: .5rem !important; right: auto !important; } /* Category badge — above overlay */ .vp-card__cat { z-index: 5 !important; } /* Overlay — below badges */ .vp-card__overlay { z-index: 1 !important; } .vp-card__play { z-index: 2 !important; } /* ============================================= v7.1 FIXES ============================================= */ /* Single post meta row — date LEFT, categories RIGHT */ .vp-single-meta-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; } .vp-single-cats { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; } .vp-single-cat-badge { font-family: var(--fd); font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; background: var(--a); color: #fff !important; padding: .25em .7em; border-radius: var(--rp); text-decoration: none !important; transition: background .18s, transform .18s; } .vp-single-cat-badge:hover { background: var(--a2); transform: scale(1.04); } .vp-view-count { display: inline-flex; align-items: center; gap: .25rem; color: var(--a); font-weight: 700; font-family: var(--fd); font-size: .68rem; background: rgba(255,94,58,.1); border: 1px solid rgba(255,94,58,.2); border-radius: var(--rp); padding: .12em .5em; } /* Video iframe height 480px */ .vp-single-content iframe, .vp-single-content .wp-block-embed__wrapper iframe, .vp-single-content embed, .vp-single-content object { min-height: 480px !important; } .vp-single-content .wp-block-embed, .vp-single-content .video-wrap { padding-bottom: 56.25%; } .vp-single-content .wp-block-embed iframe, .vp-single-content .video-wrap iframe { min-height: unset !important; height: 100% !important; } @media (max-width: 768px) { .vp-single-content iframe { min-height: 240px !important; } } /* NEW badge — 48h, hide-on-view via JS */ .vp-card__new { z-index: 5 !important; position: absolute !important; top: .45rem !important; right: .45rem !important; left: auto !important; font-family: var(--fd) !important; font-size: .58rem !important; font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: .05em !important; background: #ff3a3a !important; color: #fff !important; padding: .22em .6em !important; border-radius: var(--rp) !important; box-shadow: 0 2px 8px rgba(255,58,58,.5) !important; animation: newBlink 1.4s ease-in-out infinite !important; display: inline-block !important; pointer-events: none !important; } /* Related Posts: 4 on PC, 2 on mobile */ @media (max-width: 768px) { .vp-related__grid .vp-card:nth-child(n+3) { display: none !important; } } /* ============================================= SPEED: CSS contain hints ============================================= */ .vp-card { contain: layout style; } .vp-widget { contain: layout style; } .vp-single-main { contain: layout; } .vp-gallery { contain: layout; } .vp-footer { contain: layout; } /* Prevent layout shift on images */ .vp-card__thumb img { aspect-ratio: 620/349; object-fit: contain; background: #0f1117; } .vp-sb-post__img img { aspect-ratio: 66/48; object-fit: cover; } /* Font display swap fallback */ @font-face { font-family: 'Quicksand'; font-display: swap; } /* Image fit fix - contain inside frame, no crop */ .vp-card__thumb { background: #0a0a10 !important; } .vp-card__thumb img { object-fit: contain !important; background: #0a0a10 !important; width: 100% !important; height: 100% !important; }