/* Theme Name: AAGMAAL Theme URI: https://xxiu.com Author: xxiu.com Author URI: https://xxiu.com Description: The Ultimate WordPress Video Tube Theme you have been waiting for! AAGMAAL is a blazing-fast, SEO-optimised video gallery theme built for streaming & tube sites. Features include dark/light mode, real-time viewer counter, built-in ad manager, JSON-LD schema for VideoObject rich results, mobile-first responsive layout, lazy-load iframes, age verification gate, adblock detection, and a powerful admin dashboard — all without a single page-builder dependency. 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, entertainment, streaming, tube, dark-mode, full-width-template, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, rtl-language-support, blog, news, sticky-post, microformats, editor-style, wide-blocks, responsive-layout, one-column, two-columns, right-sidebar, accessibility-ready, seo-friendly, fast-loading, schema-markup, ad-ready */ /* -- DARK MODE INLINE SCRIPT (in ) prevents flash -- */ /* =========================================== CSS TOKENS =========================================== */ :root { /* Colors refined navy dark slightly lighter for better contrast/readability */ --bg: #0c1020; --surf: #111827; --s2: #192032; --s3: #1f2840; --bd: rgba(255,255,255,.11); --bdf: rgba(255,255,255,.06); /* Text */ --tx: #eef0ff; --tx2: #bcc0e0; --txm: #6b7099; /* Accent vivid orange-amber (Image 2) + violet highlight (Image 3) */ --a: #f97316; --a2: #fb923c; --b: #8b5cf6; /* 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 thicker depth with richer spread */ --sh0: 0 2px 8px rgba(0,0,0,.50), 0 0 0 1.5px rgba(255,255,255,.06); --sh1: 0 6px 24px rgba(0,0,0,.65), 0 0 0 1.5px rgba(255,255,255,.07); --sh2: 0 14px 48px rgba(0,0,0,.75), 0 0 0 1.5px rgba(255,255,255,.08); /* Font */ --fd: 'Google Sans', 'Google Sans Display', system-ui, sans-serif; --fb: 'Google Sans', system-ui, sans-serif; /* Transition */ --e: .2s ease; --es: .3s cubic-bezier(.34,1.56,.64,1); } /* Light mode overrides Google Chrome UI colors */ html[data-theme="light"] { --bg: #f1f3f4; --surf: #ffffff; --s2: #e8eaed; --s3: #dadce0; --bd: rgba(0,0,0,.14); --bdf: rgba(0,0,0,.08); --tx: #202124; --tx2: #5f6368; --txm: #80868b; --a: #1a73e8; --a2: #4285f4; --b: #1557b0; } /* =========================================== 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: .78rem; 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: 2px 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__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; /* Liquid Glass pill */ background: rgba(255,255,255,.10); backdrop-filter: blur(18px) saturate(1.8); -webkit-backdrop-filter: blur(18px) saturate(1.8); border: 1.5px solid rgba(255,255,255,.28); border-radius: 12px; padding: .28em .65em; box-shadow: inset 0 1.5px 0 rgba(255,255,255,.32), inset 0 -1px 0 rgba(0,0,0,.12), 0 6px 24px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.08); transition: transform .25s ease, box-shadow .25s ease; } /* One solid white color no animation */ .vp-logo__p1 { color: #ffffff; } .vp-logo__p2 { color: #ffffff; } .vp-logo:hover .vp-logo__text { transform: scale(1.02); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.40), inset 0 -1px 0 rgba(0,0,0,.15), 0 10px 36px rgba(0,0,0,.50), 0 1px 0 rgba(255,255,255,.12); } /* Logo bar always dark so logo is always visible */ .vp-logo-bar { background: #0d1122; border-bottom: 1px solid rgba(255,255,255,.07); } /* 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: 2px 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 redesigned =========================================== */ .vp-nav { background: linear-gradient(180deg, #e8e8e8 0%, #cccccc 100%); border-bottom: 2px solid #aaaaaa; border-top: 1px solid #dedede; position: sticky; top: 0; z-index: 500; box-shadow: 0 2px 4px rgba(0,0,0,.12); } .vp-nav::before { display: none; } .vp-nav__inner { display: flex; align-items: stretch; min-height: 40px; } .vp-nav__menu-wrap { flex: 1; overflow-x: auto; scrollbar-width: none; } .vp-nav__menu-wrap::-webkit-scrollbar { display: none; } .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; width: 100%; height: 100%; gap: 0 !important; } .vp-nav__menu-wrap li, #vp-primary-menu li, .vp-nav__menu li { display: flex !important; align-items: stretch !important; list-style: none !important; flex: 1 !important; border: none !important; border-right: 1px solid #b0b0b0 !important; min-width: 70px; } .vp-nav__menu-wrap li:first-child, #vp-primary-menu li:first-child { border-left: 1px solid #b0b0b0 !important; } .vp-nav__menu-wrap a, #vp-primary-menu a, .vp-nav__menu a { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; padding: 0 .5em !important; font-family: var(--fd) !important; font-size: .86rem !important; font-weight: 600 !important; color: #444 !important; text-decoration: none !important; white-space: nowrap !important; border-radius: 0 !important; border: none !important; letter-spacing: .01em; transition: background .15s ease, color .15s ease; background: linear-gradient(180deg, #f9f9f9 0%, #e2e2e2 100%) !important; box-shadow: none !important; } .vp-nav__menu-wrap a:hover, #vp-primary-menu a:hover, .vp-nav__menu a:hover { color: #111 !important; background: linear-gradient(180deg, #ffffff 0%, #eeeeee 100%) !important; box-shadow: none !important; transform: none !important; } .vp-nav__menu-wrap .current-menu-item > a, #vp-primary-menu .current-menu-item > a { color: #fff !important; background: linear-gradient(180deg, #5fb8ff 0%, #2a8bd6 100%) !important; box-shadow: none !important; border: none !important; } /* Dark mode toggle */ .vp-dark-btn { display: flex; align-items: center; gap: .4rem; padding: .38em 1rem; margin: auto .4rem; border: 2px solid var(--bd); border-radius: var(--rp); background: var(--s3); color: var(--txm); font-size: .78rem; font-family: var(--fd); font-weight: 700; white-space: nowrap; transition: all var(--e); min-height: unset; } .vp-dark-btn:hover { color: #fff; background: linear-gradient(135deg, var(--a), var(--b)); border-color: transparent; box-shadow: 0 3px 12px rgba(249,115,22,.35); } /* 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: 2px solid var(--bdf); border-top-color: rgba(255,255,255,.13); /* subtle top highlight line */ 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(249,115,22,.25); border-top-color: rgba(249,115,22,.5); } /* Thumbnail */ .vp-card__thumb { aspect-ratio: 16 / 9; position: relative; overflow: hidden; background: var(--s2); flex-shrink: 0; } .vp-card__thumb img { width: 100%; height: 100%; object-fit: cover; 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 shade removed */ .vp-card__overlay { position: absolute; inset: 0; background: none; 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(249,115,22,.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: .93rem; 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: .74rem; 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(249,115,22,.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 */ /* =========================================== 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); box-shadow: 0 1px 0 rgba(255,255,255,.04); } .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; } /* Live users badge */ /* Live users badge inline in meta row */ .vp-live-badge { display: inline-flex; align-items: center; gap: .32rem; margin-bottom: 0; padding: .18rem .6rem .18rem .42rem; border-radius: var(--rp); background: var(--s3); border: 1px solid rgba(0,0,0,.08); font-family: var(--fd); font-size: .7rem; font-weight: 600; color: var(--tx2); letter-spacing: .01em; user-select: none; line-height: 1; vertical-align: middle; } /* Blinking green dot */ .vp-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; flex-shrink: 0; animation: vp-blink 1.2s step-start infinite; box-shadow: 0 0 5px rgba(34,197,94,.7); } @keyframes vp-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } .vp-live-count { font-weight: 800; color: #f8fafc; } .vp-live-label { color: #94a3b8; font-weight: 500; } /* Loading state dots while fetching */ .vp-live-count[data-loading="1"]::after { content: '..'; animation: vp-ldots .8s steps(3, end) infinite; } @keyframes vp-ldots { 0% { content: '.'; } 33% { content: '..'; } 66% { content: '...'; } 100% { content: ''; } } /* Light mode overrides */ html[data-theme="light"] .vp-live-badge { background: #e8f5e9; border-color: rgba(22,163,74,.2); color: #1e293b; } html[data-theme="light"] .vp-live-dot { background: #16a34a; box-shadow: 0 0 5px rgba(22,163,74,.6); } html[data-theme="light"] .vp-live-count { color: #111827; } html[data-theme="light"] .vp-live-label { color: #374151; } html[data-theme="light"] .vp-single-header { box-shadow: none; } .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-top-color: var(--bd); 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(249,115,22,.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(249,115,22,.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(249,115,22,.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(249,115,22,.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(1, 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(1, 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: 2px 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(249,115,22,.2); border-color: rgba(249,115,22,.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(249,115,22,.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(249,115,22,.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(249,115,22,.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(249,115,22,.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(249,115,22,.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(249,115,22,.4); } /* =========================================== LIGHT MODE -- boxes stay visible =========================================== */ html[data-theme="light"] .vp-card { background:#fff; border-color:rgba(0,0,0,.09); border-top-color:rgba(0,0,0,.09); box-shadow:0 2px 12px rgba(0,0,0,.08); } html[data-theme="light"] .vp-card:hover { border-top-color:rgba(124,58,237,.4); } html[data-theme="light"] .vp-widget { background:#fff; border-color:rgba(0,0,0,.09); border-top-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:#1a73e8; border-top-color: var(--a); } html[data-theme="light"] .vp-util__links a { color:#a5b4fc; } /* logo-bar intentionally dark in both modes */ /* nav intentionally dark in both modes */ html[data-theme="light"] .vp-nav__menu-wrap a { color:#333 !important; } html[data-theme="light"] .vp-dark-btn { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2); color:#e2e8f0; } /* Light mode logo: black text, white glass pill */ html[data-theme="light"] .vp-logo__p1, html[data-theme="light"] .vp-logo__p2 { color: #202124; } html[data-theme="light"] .vp-logo__text { background: rgba(255,255,255,.70); border-color: rgba(0,0,0,.14); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.90), inset 0 -1px 0 rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.12), 0 1px 0 rgba(255,255,255,.60); } html[data-theme="light"] .vp-footer { background:#1a73e8; color:#e8f0fe; } 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: 48px; } .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(249,115,22,.1); border: 1px solid rgba(249,115,22,.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(249,115,22,.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(249,115,22,.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(1,minmax(0,1fr)); } } @media (max-width:420px) { .vp-gallery { grid-template-columns: repeat(1,minmax(0,1fr)); gap:6px; } } /* 5. SPEED - Critical CSS hints */ .vp-card__thumb img { content-visibility: auto; object-fit: cover; 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: .6rem; padding: .28rem .6rem; border-radius: 6px; background: rgba(239,68,68,.04); border: 1px solid rgba(239,68,68,.32); box-shadow: 0 0 10px rgba(239,68,68,.12), inset 0 1px 0 rgba(255,255,255,.04); position: relative; } /* Top highlight line */ .vp-single-meta-row::before { content: ''; position: absolute; inset: 0; border-radius: 6px; border-top: 1.5px solid rgba(239,68,68,.55); pointer-events: none; } /* Light mode */ html[data-theme="light"] .vp-single-meta-row { background: rgba(239,68,68,.03); border-color: rgba(220,38,38,.22); box-shadow: 0 0 8px rgba(220,38,38,.08), 0 1px 4px rgba(0,0,0,.04); } html[data-theme="light"] .vp-single-meta-row::before { border-top-color: rgba(220,38,38,.38); } .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(249,115,22,.1); border: 1px solid rgba(249,115,22,.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: 16/9; object-fit: cover; background: #0f1117; } .vp-sb-post__img img { aspect-ratio: 66/48; object-fit: cover; } /* Font display swap fallback */ @font-face { font-family: 'Google Sans', 'Google Sans Display'; font-display: swap; } /* Image fit fix - cover in 16:9 frame */ .vp-card__thumb { background: #0a0a10 !important; } .vp-card__thumb img { object-fit: cover !important; background: #0a0a10 !important; width: 100% !important; height: 100% !important; } /* Fix: Post content center alignment */ .vp-single-content, .vp-single-content.entry-content { text-align: left; } .vp-single-content img.aligncenter, .vp-single-content .wp-block-image.aligncenter, .vp-single-content .wp-block-image.aligncenter img, .vp-single-content figure.aligncenter { display: block !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; } .vp-single-content .wp-block-image.aligncenter { text-align: center; } .vp-single-content p, .vp-single-content div, .vp-single-content figure { text-align: inherit; } /* Gutenberg align center blocks */ .vp-single-content .has-text-align-center, .vp-single-content [style*="text-align: center"], .vp-single-content [style*="text-align:center"] { text-align: center !important; } .vp-single-content .wp-block-paragraph.has-text-align-center { text-align: center !important; } /* ============================================= POST TEXT LINK ADS BOX below post title Clean, bordered, animated, centered ============================================= */ /* ============================================= POST TEXT LINK ADS BOX - v2 ============================================= */ .vp-post-tl-box { position: relative; margin: .75rem 0 .25rem; border-radius: var(--rl); overflow: hidden; box-shadow: 0 0 0 1.5px rgba(14,165,233,.35), 0 4px 20px rgba(14,165,233,.18), inset 0 1px 0 rgba(255,255,255,.07); animation: ptlBoxIn .45s cubic-bezier(.34,1.56,.64,1) both; } @keyframes ptlBoxIn { from { opacity:0; transform:translateY(-8px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } } /* Top stripe decorative colored line */ .vp-post-tl-box::before { content:''; display:block; height:3px; background: linear-gradient(90deg, #0ea5e9 0%, #38bdf8 35%, #7dd3fc 60%, #0ea5e9 100%); background-size: 200% 100%; animation: ptlStripe 3s linear infinite; } @keyframes ptlStripe { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } /* Inner layout */ .vp-post-tl-inner { display: flex; align-items: center; gap: 0; background: linear-gradient(135deg, #071e2c 0%, #0c2d3f 50%, #071e2c 100%); min-height: 42px; } /* ADS label left side, separated by line */ .vp-post-tl-label { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; padding: .5rem .85rem; border-right: 1.5px solid rgba(255,255,255,.07); flex-shrink: 0; background: rgba(14,165,233,.12); border-right-color: rgba(14,165,233,.2); align-self: stretch; } .vp-post-tl-label-text { font-family: var(--fd); font-size: .6rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: #ff2222; animation: adsFlicker 2.5s ease-in-out infinite; } @keyframes adsFlicker { 0%,100% { opacity:1; text-shadow: 0 0 6px rgba(255,34,34,.6); } 45% { opacity:.7; text-shadow: 0 0 2px rgba(255,34,34,.3); } 50% { opacity:1; text-shadow: 0 0 12px rgba(255,34,34,.9); } 55% { opacity:.8; text-shadow: 0 0 4px rgba(255,34,34,.5); } } .vp-post-tl-dot { width:6px; height:6px; border-radius:50%; background:#ff2222; flex-shrink:0; animation: adsDot 1.4s ease-in-out infinite; } @keyframes adsDot { 0%,100% { opacity:1; transform:scale(1); box-shadow:0 0 4px #ff2222; } 50% { opacity:.4; transform:scale(.6); box-shadow:none; } } /* Links area */ .vp-post-tl-links { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; padding: .5rem .75rem; flex: 1; justify-content: center; } /* Separator dots between links */ .vp-post-tl-links::before { display: none; } /* Individual link */ .vp-post-tl-link { display: inline-flex; align-items: center; font-family: var(--fd); font-size: .74rem; font-weight: 700; color: #7dd3fc !important; text-decoration: none !important; padding: .3em .85em; border: 1.5px solid rgba(14,165,233,.25); border-radius: var(--rp); background: rgba(14,165,233,.08); white-space: nowrap; transition: all .22s cubic-bezier(.34,1.56,.64,1); /* Staggered entrance */ opacity: 0; transform: translateY(5px) scale(.93); animation: ptlLinkIn .3s ease forwards; box-shadow: 0 1px 4px rgba(0,0,0,.2); /* Divider line between links via box-shadow */ position: relative; } @keyframes ptlLinkIn { to { opacity:1; transform:translateY(0) scale(1); } } .vp-post-tl-link:hover { background: #0ea5e9 !important; border-color: #38bdf8 !important; color: #fff !important; transform: translateY(-2px) scale(1.06); box-shadow: 0 5px 14px rgba(14,165,233,.45); } .vp-post-tl-link:active { transform:scale(.96); } /* Bottom line mirror of top stripe */ .vp-post-tl-box::after { content:''; display:block; height:1px; background: linear-gradient(90deg, transparent 0%, rgba(14,165,233,.3) 30%, rgba(56,189,248,.3) 70%, transparent 100%); } /* Mobile */ @media (max-width: 600px) { .vp-post-tl-inner { flex-direction: column; align-items: stretch; } .vp-post-tl-label { border-right: none; border-bottom: 1.5px solid rgba(255,255,255,.07); padding: .4rem .75rem; justify-content: flex-start; align-self: auto; } .vp-post-tl-links { justify-content: flex-start; } } /* Light mode */ html[data-theme="light"] .vp-post-tl-inner { background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%); } html[data-theme="light"] .vp-post-tl-label { background: rgba(0,0,0,.05); } html[data-theme="light"] .vp-post-tl-link { background:#fff; border-color:rgba(14,165,233,.25); color:#0369a1 !important; } html[data-theme="light"] .vp-post-tl-box { box-shadow: 0 0 0 1.5px rgba(14,165,233,.3), 0 4px 16px rgba(14,165,233,.1); } /* ============================================= AGE VERIFICATION GATE ============================================= */ .vp-ag-overlay { display: none; position: fixed; inset: 0; background: #000; z-index: 999999; align-items: center; justify-content: center; padding: var(--md); } .vp-ag-overlay.vp-ag-show { display: flex; animation: agFadeIn .35s ease both; } .vp-ag-overlay.vp-ag-hide { animation: agFadeOut .4s ease forwards; } @keyframes agFadeIn { from { opacity:0; } to { opacity:1; } } @keyframes agFadeOut { from { opacity:1; } to { opacity:0; } } .vp-ag-box { max-width: 560px; width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; animation: agBoxIn .45s cubic-bezier(.34,1.56,.64,1) .1s both; } @keyframes agBoxIn { from { opacity:0; transform: translateY(24px) scale(.96); } to { opacity:1; transform: translateY(0) scale(1); } } /* Brand name */ .vp-ag-brand { font-family: var(--fd); font-size: clamp(1.4rem, 5vw, 2.2rem); font-weight: 900; letter-spacing: .04em; text-transform: uppercase; background: linear-gradient(90deg, #fff 0%, #e0e0e0 50%, #fff 100%); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: agBrandShimmer 3s linear infinite; } @keyframes agBrandShimmer { 0% { background-position: 200% center; } 100% { background-position: -200% center; } } /* Warning icon */ .vp-ag-icon { color: var(--a); opacity: .85; animation: agIconPulse 2.5s ease-in-out infinite; } @keyframes agIconPulse { 0%,100% { filter: drop-shadow(0 0 6px rgba(255,94,58,.4)); } 50% { filter: drop-shadow(0 0 16px rgba(255,94,58,.75)); } } /* Title */ .vp-ag-title { font-family: var(--fd); font-size: clamp(1.3rem, 4vw, 2rem); font-weight: 800; color: #fff; line-height: 1.2; margin: 0; } /* Message */ .vp-ag-message { font-size: clamp(.82rem, 2vw, .95rem); color: rgba(255,255,255,.65); line-height: 1.75; max-width: 480px; } .vp-ag-message a { color: var(--a); } /* Buttons */ .vp-ag-actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 480px; } .vp-ag-btn { flex: 1; min-width: 200px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--fd); font-size: .9rem; font-weight: 700; padding: .85em 1.5em; border-radius: 6px; cursor: pointer; text-decoration: none !important; border: 2px solid; transition: all .22s cubic-bezier(.34,1.56,.64,1); letter-spacing: .02em; } .vp-ag-btn--enter { background: transparent; border-color: var(--a); color: #fff !important; } .vp-ag-btn--enter:hover { background: var(--a); box-shadow: 0 6px 22px rgba(255,94,58,.45); transform: translateY(-2px); } .vp-ag-btn--exit { background: transparent; border-color: rgba(255,255,255,.25); color: rgba(255,255,255,.7) !important; } .vp-ag-btn--exit:hover { border-color: rgba(255,255,255,.6); color: #fff !important; transform: translateY(-2px); } /* Note */ .vp-ag-note { font-size: .72rem; color: rgba(255,255,255,.3); font-family: var(--fd); margin: 0; } /* Divider line between brand and rest */ .vp-ag-box::after { display: none; } @media (max-width: 480px) { .vp-ag-actions { flex-direction: column; } .vp-ag-btn { min-width: unset; width: 100%; } } /* ============================================= TEXT LINK ADS - no label, centered ============================================= */ .vp-post-tl-inner--no-label { justify-content: center; } .vp-post-tl-links--center { justify-content: center !important; padding: .6rem .75rem !important; } /* Remove left border line when no label */ .vp-post-tl-inner--no-label .vp-post-tl-links { border-left: none; } /* ============================================= HOME PAGE PRIMARY NAVIGATION (below gallery) Centered, responsive ============================================= */ .vp-home-nav { background: var(--surf); border-top: 2px solid var(--a); border-bottom: 1px solid var(--bdf); padding: .5rem 0; margin-top: var(--lg); } .vp-home-nav .vp-wrap { display: flex; justify-content: center; } /* Target all WordPress nav outputs */ .vp-home-nav__menu, #vp-home-nav-menu, .vp-home-nav ul { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; list-style: none !important; margin: 0 !important; padding: 0 !important; gap: .2rem !important; } .vp-home-nav__menu li, #vp-home-nav-menu li, .vp-home-nav ul li { list-style: none !important; display: block !important; } .vp-home-nav__menu a, #vp-home-nav-menu a, .vp-home-nav ul a { display: inline-block !important; padding: .35em .9em !important; font-family: var(--fd) !important; font-size: .78rem !important; font-weight: 700 !important; color: var(--tx2) !important; text-decoration: none !important; border-radius: var(--rp) !important; border: 1.5px solid transparent !important; transition: all .18s !important; white-space: nowrap; } .vp-home-nav__menu a:hover, #vp-home-nav-menu a:hover, .vp-home-nav ul a:hover { background: rgba(255,94,58,.1) !important; border-color: rgba(255,94,58,.3) !important; color: var(--a) !important; } .vp-home-nav__menu .current-menu-item > a, #vp-home-nav-menu .current-menu-item > a { background: var(--a) !important; border-color: var(--a) !important; color: #fff !important; } /* Mobile - wrap nicely */ @media (max-width: 768px) { .vp-home-nav { padding: .4rem 0; } .vp-home-nav__menu a, #vp-home-nav-menu a, .vp-home-nav ul a { font-size: .72rem !important; padding: .3em .7em !important; } } /* ============================================= V12 - SPACING CLEANUP Remove unnecessary padding/margins ============================================= */ /* Remove gaps between sidebar widgets */ .vp-sidebar { gap: var(--sm) !important; } .vp-sidebar > * { margin-bottom: 0 !important; } /* Reduce single post header excess padding */ .vp-single-header { padding: .75rem var(--md) .6rem !important; } /* Tighten meta row */ .vp-single-meta-row { margin-top: .3rem; } /* Remove double margin on ad slots */ .vp-ad { margin: var(--xs) 0 !important; } .vp-ad:empty { display:none !important; padding:0 !important; } /* Footer spacing */ .vp-footer-cols { padding: var(--md) 0; gap: var(--lg); } .vp-footer-bottom { padding: var(--sm) 0; } /* Gallery section header */ .vp-section-hd { margin-bottom: var(--sm); padding-bottom: var(--xs); } /* Home nav tighter */ .vp-home-nav { margin-top: var(--md); padding: .35rem 0; } /* Remove extra space around annotation bar */ .vp-ann-bar--glitch .vp-ann-glitch-wrap { min-height: 42px; padding: 4px 16px; } /* Related posts tighter */ .vp-related { margin-top: var(--lg); padding-top: var(--md); } /* Card body compact */ .vp-card__body { padding: .5rem .65rem .6rem; gap: .2rem; } /* Post nav compact */ .vp-post-nav { padding: var(--xs) var(--md); gap: var(--xs); } /* Tags compact */ .vp-tags { padding: var(--xs) var(--md); gap: .25rem; } /* Share compact */ .vp-share { padding: var(--xs) var(--md); gap: .4rem; } /* ============================================= PAGINATION BAR ============================================= */ .vp-pagi-wrap { width: 100%; display: flex; justify-content: center; align-items: center; padding: var(--md) 0 0; } .vp-pagi-bar { display: inline-flex; align-items: stretch; height: 54px; border: 2px solid var(--a); border-radius: 14px; overflow: hidden; background: var(--s2); box-shadow: 0 0 20px rgba(255,94,58,.15), 0 4px 20px rgba(0,0,0,.4); max-width: calc(100vw - 2rem); } .vp-pagi-item { display: flex; align-items: center; justify-content: center; height: 100%; flex-shrink: 0; } .vp-pagi-sep { width: 1px; background: rgba(255,255,255,.1); flex-shrink: 0; align-self: stretch; margin: 10px 0; } /* All links and spans */ .vp-pagi-item a, .vp-pagi-item span { display: flex; align-items: center; justify-content: center; height: 100%; min-width: 48px; padding: 0 .9rem; font-family: var(--fd); font-size: .84rem; font-weight: 700; color: var(--tx2); text-decoration: none; background: transparent; border: none; white-space: nowrap; transition: background .18s, color .18s; box-sizing: border-box; } /* Hover */ .vp-pagi-item a:hover { background: rgba(255,94,58,.1); color: var(--a); } /* Active/current page outlined */ .vp-pagi-item span.current { background: transparent; color: var(--a); border: 2px solid var(--a); min-width: 54px; font-size: .88rem; border-radius: 6px; margin: 6px 0; } /* Dots */ .vp-pagi-item span.dots { background: transparent; color: var(--txm); min-width: 38px; font-size: .9rem; letter-spacing: .05em; } /* Prev / Next solid orange */ .vp-pagi-item:first-child a, .vp-pagi-item:last-child a { padding: 0 1.3rem; background: var(--a); color: #fff; font-size: .82rem; font-weight: 800; } .vp-pagi-item:first-child a:hover, .vp-pagi-item:last-child a:hover { background: color-mix(in srgb, var(--a) 85%, #000); color: #fff; } /* Mobile */ @media (max-width: 640px) { .vp-pagi-bar { height: 46px; border-radius: 10px; } .vp-pagi-item a, .vp-pagi-item span { min-width: 38px; padding: 0 .65rem; font-size: .78rem; } .vp-pagi-item span.current { min-width: 44px; } .vp-pagi-item:first-child a, .vp-pagi-item:last-child a { padding: 0 .9rem; } } /* ============================================= FILTER BAR ============================================= */ .vp-filter-bar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: var(--md); } .vp-filter-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem 1rem; border-radius: 999px; background: var(--s2); border: 1.5px solid rgba(255,255,255,.08); color: var(--tx2); font-family: var(--fd); font-size: .8rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: background .18s, border-color .18s, color .18s; white-space: nowrap; } .vp-filter-btn:hover { background: rgba(255,255,255,.1); color: var(--tx); border-color: rgba(255,255,255,.2); } .vp-filter-btn.active { background: var(--s2); border-color: var(--a); color: var(--tx); } .vp-filter-icon-btn { padding: .45rem .75rem; flex-shrink: 0; } /* ============================================= LIKE / DISLIKE BAR ============================================= */ .vp-like-bar { display: inline-flex; align-items: stretch; height: 40px; border-radius: 8px; overflow: hidden; background: var(--s2); border: 1.5px solid rgba(255,255,255,.12); margin: var(--md) 0 var(--sm); } .vp-like-btn { display: flex; align-items: center; justify-content: center; gap: .35rem; padding: 0 1rem; background: transparent; border: none; color: var(--tx2); font-family: var(--fd); font-size: .85rem; font-weight: 600; cursor: pointer; transition: background .18s, color .18s; } .vp-like-btn:hover { background: rgba(255,255,255,.07); color: var(--tx); } .vp-like-btn.active.vp-like-btn--like { color: #4caf50; } .vp-like-btn.active.vp-like-btn--dislike { color: #f44336; } .vp-like-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .vp-like-btn.active svg { fill: currentColor; } .vp-like-sep { width: 1px; background: rgba(255,255,255,.12); align-self: stretch; } .vp-like-count-wrap { display: flex; align-items: center; padding: 0 .9rem; font-family: var(--fd); font-size: .88rem; font-weight: 700; color: var(--tx2); min-width: 52px; justify-content: center; border-left: 1px solid rgba(255,255,255,.12); border-right: 1px solid rgba(255,255,255,.12); } /* ============================================= LIQUID GLASS UI v14 All elements use frosted-glass aesthetic: backdrop-filter blur + rgba + specular highlight ============================================= */ /* Ambient background blobs */ body::before, body::after { content: ''; position: fixed; border-radius: 50%; pointer-events: none; z-index: 0; } body::before { width: 700px; height: 700px; top: -250px; left: -220px; background: radial-gradient(circle, rgba(249,115,22,.22) 0%, transparent 65%); filter: blur(50px); } body::after { width: 600px; height: 600px; bottom: -200px; right: -160px; background: radial-gradient(circle, rgba(139,92,246,.15) 0%, transparent 65%); filter: blur(50px); } .vp-site::before { content: ''; position: fixed; width: 450px; height: 450px; top: 35%; left: 38%; background: radial-gradient(circle, rgba(249,115,22,.07) 0%, transparent 70%); filter: blur(70px); pointer-events: none; z-index: 0; } /* Glass variables */ :root { --gl-bg: rgba(255,255,255,.055); --gl-bd: rgba(255,255,255,.18); --gl-hi: rgba(255,255,255,.22); --gl-sh: 0 12px 40px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.35); --gl-blur: blur(24px); --gl-blur2: blur(32px); } html[data-theme="light"] { --gl-bg: rgba(255,255,255,.65); --gl-bd: rgba(255,255,255,.85); --gl-hi: rgba(255,255,255,.98); --gl-sh: 0 10px 36px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.08); } html[data-theme="light"] body::before { background: radial-gradient(circle, rgba(26,115,232,.12) 0%, transparent 65%); } html[data-theme="light"] body::after { background: radial-gradient(circle, rgba(66,133,244,.08) 0%, transparent 65%); } /* Utility bar */ .vp-util { background: var(--gl-bg) !important; backdrop-filter: var(--gl-blur); -webkit-backdrop-filter: var(--gl-blur); border-bottom: 2px solid var(--gl-bd) !important; box-shadow: inset 0 2px 0 var(--gl-hi); } /* Logo bar */ .vp-logo-bar { background: var(--gl-bg) !important; backdrop-filter: var(--gl-blur); -webkit-backdrop-filter: var(--gl-blur); border-bottom: 2px solid var(--gl-bd) !important; box-shadow: inset 0 2px 0 var(--gl-hi), var(--gl-sh); } /* Sticky nav -- flat full-width segmented style */ .vp-nav { background: linear-gradient(180deg, #e8e8e8 0%, #cccccc 100%) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: 2px solid #aaaaaa !important; box-shadow: 0 2px 4px rgba(0,0,0,.12) !important; } html[data-theme="light"] .vp-nav { background: linear-gradient(180deg, #e8e8e8 0%, #cccccc 100%) !important; } html[data-theme="dark"] .vp-nav { background: linear-gradient(180deg, #333 0%, #222 100%) !important; border-bottom-color: #111 !important; } html[data-theme="dark"] .vp-nav__menu-wrap li, html[data-theme="dark"] #vp-primary-menu li { border-color: #444 !important; } html[data-theme="dark"] .vp-nav__menu-wrap a, html[data-theme="dark"] #vp-primary-menu a { color: #ccc !important; background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%) !important; } html[data-theme="dark"] .vp-nav__menu-wrap a:hover, html[data-theme="dark"] #vp-primary-menu a:hover { background: linear-gradient(180deg, #484848 0%, #383838 100%) !important; } .vp-nav__menu-wrap a:hover, #vp-primary-menu a:hover, .vp-nav__menu a:hover { background: linear-gradient(180deg, #ffffff 0%, #eeeeee 100%) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; } .vp-nav__menu-wrap .current-menu-item > a, #vp-primary-menu .current-menu-item > a { color: #fff !important; background: linear-gradient(180deg, #5fb8ff 0%, #2a8bd6 100%) !important; box-shadow: none !important; } /* Cards */ .vp-card { background: var(--gl-bg) !important; backdrop-filter: var(--gl-blur); -webkit-backdrop-filter: var(--gl-blur); border: 2px solid var(--gl-bd) !important; box-shadow: var(--gl-sh), inset 0 2px 0 var(--gl-hi) !important; } .vp-card:hover { border-color: rgba(249,115,22,.38) !important; box-shadow: 0 24px 72px rgba(0,0,0,.7), 0 0 0 2px rgba(249,115,22,.45), inset 0 2px 0 var(--gl-hi) !important; } .vp-card__body { background: rgba(255,255,255,.025); border-top: 1px solid var(--gl-bd); } html[data-theme="light"] .vp-card__body { background: rgba(255,255,255,.55); } /* Play button glass */ .vp-card__play { background: rgba(249,115,22,.75) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(249,115,22,.5) !important; box-shadow: 0 4px 20px rgba(249,115,22,.45) !important; } /* Filter bar */ .vp-filter-btn { background: var(--gl-bg) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 2px solid var(--gl-bd) !important; box-shadow: inset 0 2px 0 var(--gl-hi) !important; } .vp-filter-btn:hover { background: rgba(255,255,255,.1) !important; border-color: rgba(255,255,255,.22) !important; } .vp-filter-btn.active { background: rgba(249,115,22,.16) !important; border-color: rgba(249,115,22,.45) !important; box-shadow: 0 0 0 1px rgba(249,115,22,.18), inset 0 1px 0 rgba(249,115,22,.25) !important; } /* Pagination */ .vp-pagi-bar { background: var(--gl-bg) !important; backdrop-filter: blur(28px) !important; -webkit-backdrop-filter: blur(28px) !important; border: 2px solid var(--gl-bd) !important; box-shadow: var(--gl-sh), inset 0 2px 0 var(--gl-hi) !important; } .vp-pagi-item:first-child a, .vp-pagi-item:last-child a { background: linear-gradient(135deg, rgba(249,115,22,.88), rgba(251,146,60,.72)) !important; backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255,255,255,.22) !important; } .vp-pagi-item:first-child a:hover, .vp-pagi-item:last-child a:hover { background: linear-gradient(135deg, rgba(249,115,22,1), rgba(251,146,60,.95)) !important; } .vp-pagi-item span.current { background: rgba(249,115,22,.14) !important; backdrop-filter: blur(8px) !important; box-shadow: 0 0 0 1.5px rgba(249,115,22,.45) !important; } /* Like / Dislike bar */ .vp-like-bar { background: var(--gl-bg) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border: 2px solid var(--gl-bd) !important; box-shadow: var(--gl-sh), inset 0 2px 0 var(--gl-hi) !important; } /* Sidebar widgets */ .vp-sidebar .widget, .vp-sidebar .vp-widget { background: var(--gl-bg) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border: 2px solid var(--gl-bd) !important; border-radius: var(--rl) !important; box-shadow: var(--gl-sh), inset 0 2px 0 var(--gl-hi) !important; } .vp-sb-post { border-radius: var(--r); transition: background var(--e); } .vp-sb-post:hover { background: rgba(255,255,255,.04) !important; } /* Search box */ .vp-util__search { background: var(--gl-bg) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 2px solid var(--gl-bd) !important; box-shadow: inset 0 2px 0 var(--gl-hi) !important; } .vp-util__search:focus-within { border-color: rgba(249,115,22,.5) !important; box-shadow: 0 0 0 1px rgba(249,115,22,.2), inset 0 2px 0 var(--gl-hi) !important; } .vp-mob-search__form { background: var(--gl-bg) !important; backdrop-filter: var(--gl-blur) !important; -webkit-backdrop-filter: var(--gl-blur) !important; border: 2px solid var(--gl-bd) !important; box-shadow: inset 0 2px 0 var(--gl-hi) !important; } /* Share buttons */ .vp-share-btn { background: var(--gl-bg) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 2px solid var(--gl-bd) !important; box-shadow: inset 0 2px 0 var(--gl-hi) !important; } .vp-share-btn:hover { background: rgba(255,255,255,.1) !important; border-color: rgba(255,255,255,.22) !important; } /* Tags */ .vp-tag { background: var(--gl-bg) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; border: 2px solid var(--gl-bd) !important; } .vp-tag:hover { background: rgba(255,255,255,.1) !important; } /* Post prev/next nav */ .vp-pnav { background: var(--gl-bg) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 2px solid var(--gl-bd) !important; box-shadow: var(--gl-sh), inset 0 2px 0 var(--gl-hi) !important; } .vp-pnav:hover { background: rgba(255,255,255,.08) !important; border-color: rgba(249,115,22,.4) !important; } /* Single post header area */ .vp-single-header { background: var(--gl-bg); backdrop-filter: var(--gl-blur); -webkit-backdrop-filter: var(--gl-blur); border: 2px solid var(--gl-bd); border-radius: var(--rl); padding: var(--md) !important; margin-bottom: var(--md); box-shadow: inset 0 2px 0 var(--gl-hi); } /* Category badges */ .vp-single-cat-badge { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* Announcement bar */ .vp-ann-bar { background: var(--gl-bg) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; border-bottom: 2px solid var(--gl-bd) !important; box-shadow: inset 0 2px 0 var(--gl-hi) !important; } /* Mobile drawer */ .vp-drawer { background: rgba(8,11,20,.82) !important; backdrop-filter: blur(36px) !important; -webkit-backdrop-filter: blur(36px) !important; border-right: 1px solid var(--gl-bd) !important; } /* Footer */ .vp-footer { background: rgba(8,11,20,.50) !important; backdrop-filter: var(--gl-blur) !important; -webkit-backdrop-filter: var(--gl-blur) !important; border-top: 1px solid var(--gl-bd) !important; box-shadow: inset 0 2px 0 var(--gl-hi) !important; } /* Section header accent */ .vp-section-hd__title::before { box-shadow: 0 0 12px rgba(249,115,22,.5); } /* Related posts section */ .vp-related { background: var(--gl-bg); backdrop-filter: var(--gl-blur); -webkit-backdrop-filter: var(--gl-blur); border: 2px solid var(--gl-bd); border-radius: var(--rx); padding: var(--md); box-shadow: inset 0 2px 0 var(--gl-hi); } /* Popup glass */ .vp-popup { background: rgba(13,17,34,.85) !important; backdrop-filter: blur(40px) !important; -webkit-backdrop-filter: blur(40px) !important; border: 2px solid var(--gl-bd) !important; box-shadow: 0 24px 80px rgba(0,0,0,.7), inset 0 2px 0 var(--gl-hi) !important; } html[data-theme="light"] .vp-popup { background: rgba(255,255,255,.85) !important; } /* Age gate glass */ .vp-ag-box { background: rgba(13,17,34,.88) !important; backdrop-filter: blur(48px) !important; -webkit-backdrop-filter: blur(48px) !important; border: 2px solid var(--gl-bd) !important; box-shadow: 0 32px 100px rgba(0,0,0,.75), inset 0 2px 0 var(--gl-hi) !important; } /* Hamburger button */ .vp-hamburger { background: var(--gl-bg) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; border: 2px solid var(--gl-bd) !important; } /* Post link ads box */ .vp-post-tl-box { background: var(--gl-bg) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 2px solid var(--gl-bd) !important; box-shadow: inset 0 2px 0 var(--gl-hi) !important; } /* Go-to-top button */ #vpGototop { background: rgba(249,115,22,.8) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(249,115,22,.4) !important; box-shadow: 0 4px 20px rgba(249,115,22,.4) !important; } /* Like bar compact title variant */ .vp-meta-right { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .vp-like-bar--compact { display: inline-flex; align-items: stretch; height: 30px; border-radius: var(--rp); overflow: hidden; flex-shrink: 0; } .vp-like-bar--compact .vp-like-btn { display: flex; align-items: center; gap: .35rem; padding: 0 .75rem; font-size: .75rem; font-weight: 700; color: var(--tx2); background: none; border: none; cursor: pointer; transition: background .18s, color .18s; white-space: nowrap; } .vp-like-bar--compact .vp-like-btn svg { width: 13px; height: 13px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .vp-like-bar--compact .vp-like-btn--like:hover { background: rgba(74,222,128,.12); color: #4ade80; } .vp-like-bar--compact .vp-like-btn--dislike:hover { background: rgba(248,113,113,.1); color: #f87171; } .vp-like-bar--compact .vp-like-btn--like.active { color: #4ade80; background: rgba(74,222,128,.1); } .vp-like-bar--compact .vp-like-btn--like.active svg { fill: #4ade80; stroke: #4ade80; } .vp-like-bar--compact .vp-like-btn--dislike.active { color: #f87171; } .vp-like-bar--compact .vp-like-count { font-size: .75rem; font-weight: 700; color: var(--tx2); } .vp-like-bar--compact .vp-like-sep { width: 1px; background: rgba(255,255,255,.1); align-self: stretch; flex-shrink: 0; } .vp-like-label { font-family: var(--fd); } /* Compact single header override all stacked rules */ .vp-single-header { padding: .45rem .75rem .3rem !important; margin-bottom: .35rem !important; border-radius: var(--rl) !important; } .vp-breadcrumb { margin-bottom: .12rem !important; font-size: .68rem !important; } .vp-single-title { margin-bottom: .04rem !important; line-height: 1.25 !important; } .vp-single-meta-row { margin-top: .04rem !important; gap: .35rem !important; } .vp-single-meta { gap: .35rem !important; font-size: .7rem !important; } .vp-meta-right { gap: .4rem !important; } .vp-single-cats { gap: .25rem !important; } .vp-single-cat-badge { font-size: .6rem !important; padding: .18em .55em !important; } .vp-like-bar--compact { height: 26px !important; } .vp-like-bar--compact .vp-like-btn { padding: 0 .6rem !important; font-size: .7rem !important; gap: .28rem !important; } .vp-like-bar--compact .vp-like-btn svg { width: 11px !important; height: 11px !important; } .vp-like-bar--compact .vp-like-count { font-size: .7rem !important; } /* =========================================== LIGHT MODE TEXT VISIBILITY FIXES =========================================== */ /* Post timeline links was sky-blue (#7dd3fc) on light bg */ html[data-theme="light"] .vp-post-tl-link { color: #1a73e8 !important; border-color: rgba(26,115,232,.30) !important; background: rgba(26,115,232,.07) !important; } /* Age-gate buttons was white text on transparent bg */ html[data-theme="light"] .vp-ag-btn--enter { color: #1a73e8 !important; border-color: #1a73e8 !important; } html[data-theme="light"] .vp-ag-btn--enter:hover { color: #fff !important; background: #1a73e8 !important; } html[data-theme="light"] .vp-ag-btn--exit { color: #5f6368 !important; border-color: rgba(0,0,0,.25) !important; } html[data-theme="light"] .vp-ag-btn--exit:hover { color: #202124 !important; background: rgba(0,0,0,.06) !important; } /* Age-gate box was dark glass, open it up in light mode */ html[data-theme="light"] .vp-ag-box { background: rgba(255,255,255,.90) !important; border-color: rgba(0,0,0,.14) !important; box-shadow: 0 16px 60px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.95) !important; } /* Nav link hover on dark nav bg white is fine, keep it */ /* Sidebar category count badges use var-based colors */ html[data-theme="light"] .vp-sb-cat__count { background: rgba(26,115,232,.12); color: #1a73e8; } /* Section heading bar accent keeps accent color fine */ /* Card hover accent border update violet to chrome-blue */ html[data-theme="light"] .vp-card:hover { border-top-color: rgba(26,115,232,.45) !important; } html[data-theme="light"] .vp-card:hover .vp-card__title { color: #1a73e8; } /* Widget hover accent */ html[data-theme="light"] .vp-widget:hover { box-shadow: 0 4px 20px rgba(0,0,0,.12), 0 0 0 1px rgba(26,115,232,.18) !important; } /* Scrollbar thumb in light mode */ html[data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--s3); } html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #1a73e8; } /* Search focus ring in light mode */ html[data-theme="light"] .vp-sb-search:focus-within { border-color: #1a73e8 !important; box-shadow: 0 0 0 3px rgba(26,115,232,.18) !important; } /* Tag links in light mode */ html[data-theme="light"] .vp-tag { border-color: rgba(26,115,232,.30); color: #1a73e8; } html[data-theme="light"] .vp-tag:hover { border-color: #1a73e8; background: rgba(26,115,232,.08); } /* Filter buttons active state */ html[data-theme="light"] .vp-filter-btn.active { background: rgba(26,115,232,.12) !important; border-color: rgba(26,115,232,.45) !important; color: #1a73e8 !important; box-shadow: 0 0 0 1px rgba(26,115,232,.18), inset 0 1px 0 rgba(26,115,232,.15) !important; } /* Like/vote bar in light mode */ html[data-theme="light"] .vp-like-bar { background: var(--surf); border-color: var(--bd); } html[data-theme="light"] .vp-like-btn { color: var(--tx2); } html[data-theme="light"] .vp-like-btn:hover, html[data-theme="light"] .vp-like-btn.active { color: #1a73e8; } /* =========================================== LIGHT MODE POST CONTENT TEXT FIX Force dark text on all content elements =========================================== */ html[data-theme="light"] .vp-single-main, html[data-theme="light"] .vp-single-content { color: #202124; } html[data-theme="light"] .vp-single-content p, html[data-theme="light"] .vp-single-content li, html[data-theme="light"] .vp-single-content ul, html[data-theme="light"] .vp-single-content ol, html[data-theme="light"] .vp-single-content td, html[data-theme="light"] .vp-single-content th, html[data-theme="light"] .vp-single-content dt, html[data-theme="light"] .vp-single-content dd, html[data-theme="light"] .vp-single-content span:not(.vp-card__cat):not(.vp-live-badge), html[data-theme="light"] .vp-single-content strong, html[data-theme="light"] .vp-single-content em, html[data-theme="light"] .vp-single-content b, html[data-theme="light"] .vp-single-content i, html[data-theme="light"] .vp-single-content label, html[data-theme="light"] .vp-single-content figcaption, html[data-theme="light"] .vp-single-content cite { color: #202124 !important; } html[data-theme="light"] .vp-single-content h1, html[data-theme="light"] .vp-single-content h2, html[data-theme="light"] .vp-single-content h3, html[data-theme="light"] .vp-single-content h4, html[data-theme="light"] .vp-single-content h5, html[data-theme="light"] .vp-single-content h6 { color: #202124 !important; } html[data-theme="light"] .vp-single-content blockquote, html[data-theme="light"] .vp-single-content blockquote p { color: #5f6368 !important; } html[data-theme="light"] .vp-single-content a { color: #1a73e8 !important; } /* WordPress block editor text classes */ html[data-theme="light"] .vp-single-content .wp-block-paragraph, html[data-theme="light"] .vp-single-content .wp-block-list, html[data-theme="light"] .vp-single-content .wp-block-heading, html[data-theme="light"] .vp-single-content .wp-block-quote, html[data-theme="light"] .vp-single-content .wp-block-table td, html[data-theme="light"] .vp-single-content .wp-block-table th, html[data-theme="light"] .vp-single-content .wp-block-pullquote, html[data-theme="light"] .vp-single-content .wp-block-verse, html[data-theme="light"] .vp-single-content .wp-block-preformatted { color: #202124 !important; } /* Single post title and meta */ html[data-theme="light"] .vp-single-title { color: #202124 !important; } html[data-theme="light"] .vp-single-meta, html[data-theme="light"] .vp-single-meta span, html[data-theme="light"] .vp-breadcrumb { color: #5f6368 !important; } /* =========================================== VIDLINKS DOWNLOAD BOX — HIDDEN Hides VidLinks plugin download boxes =========================================== */ .vidlinks-box, .vidlinks-download, .vl-download-box, .vl-box, .vl-links, .download-links-box, .vp-download-box, [class*="vidlink"], [class*="vid-link"], [id*="vidlink"], [id*="vid-link"] { display: none !important; } /* =========================================== COLOR SCHEME OPTIONS Choose ONE. Uncomment that block. Current default: Dark Navy + Orange =========================================== */ /* -------------------------------------------------- OPTION A — DARK RED (Dramatic / Streaming) Uncomment to activate -------------------------------------------------- */ /* :root { --bg: #120808; --surf: #1c0e0e; --s2: #2a1212; --s3: #351616; --bd: rgba(255,80,80,.14); --bdf: rgba(255,80,80,.07); --tx: #fff0f0; --tx2: #e0b0b0; --txm: #8a5a5a; --a: #e53935; --a2: #ff5252; --b: #ff1744; } .vp-nav { background: linear-gradient(180deg, #c62828 0%, #8e0000 100%) !important; border-bottom: 3px solid #6a0000 !important; } .vp-nav__menu-wrap .current-menu-item > a, #vp-primary-menu .current-menu-item > a { background: linear-gradient(180deg, #ff5252 0%, #c62828 100%) !important; } */ /* -------------------------------------------------- OPTION B — DEEP OCEAN BLUE (Premium / Clean) Uncomment to activate -------------------------------------------------- */ /* :root { --bg: #060d1a; --surf: #0d1b2e; --s2: #122340; --s3: #162b4d; --bd: rgba(56,182,255,.13); --bdf: rgba(56,182,255,.07); --tx: #e8f4ff; --tx2: #90b8d8; --txm: #456480; --a: #0ea5e9; --a2: #38bdf8; --b: #6366f1; } .vp-nav { background: linear-gradient(180deg, #0369a1 0%, #01427a 100%) !important; border-bottom: 3px solid #013060 !important; } .vp-nav__menu-wrap a, #vp-primary-menu a, .vp-nav__menu a { color: #0a1a2a !important; } .vp-nav__menu-wrap .current-menu-item > a, #vp-primary-menu .current-menu-item > a { color: #fff !important; background: linear-gradient(180deg, #38bdf8 0%, #0369a1 100%) !important; box-shadow: 0 -3px 10px rgba(14,165,233,.4), inset 0 1px 0 rgba(180,230,255,.5) !important; } */ /* -------------------------------------------------- OPTION C — DARK PURPLE / GAMING (Vibrant) Uncomment to activate -------------------------------------------------- */ /* :root { --bg: #0d0814; --surf: #140d20; --s2: #1c1230; --s3: #231640; --bd: rgba(168,85,247,.15); --bdf: rgba(168,85,247,.08); --tx: #f5f0ff; --tx2: #c4a8f0; --txm: #7055a0; --a: #a855f7; --a2: #c084fc; --b: #ec4899; } .vp-nav { background: linear-gradient(180deg, #7e22ce 0%, #581c87 100%) !important; border-bottom: 3px solid #3b0764 !important; } .vp-nav__menu-wrap a, #vp-primary-menu a, .vp-nav__menu a { color: #0d0814 !important; } .vp-nav__menu-wrap .current-menu-item > a, #vp-primary-menu .current-menu-item > a { color: #fff !important; background: linear-gradient(180deg, #c084fc 0%, #7e22ce 100%) !important; box-shadow: 0 -3px 10px rgba(168,85,247,.4), inset 0 1px 0 rgba(230,180,255,.4) !important; } */