/* Theme Name: Vidmoki Velvet Theme URI: https://vidmoki.com/ Author: Vidmoki Description: Premium dark "velvet" video theme for suggestive / tease-style creator platforms. Portrait cover cards with hover previews, ranked trending rail, working category chips, 18+ age gate, clean ad slots and a full Creator Studio. Requires the Vidmoki Video Platform plugin. Version: 3.0.17 Requires at least: 6.0 Requires PHP: 7.4 Text Domain: vidmoki-modern */ /* ============ TOKENS — "Midnight Velvet": plum-black, rose, champagne gold ============ */ :root{ --vm-bg:#0c0710; --vm-bg-soft:#120b18; --vm-surface:#171020; --vm-surface2:#1f1629; --vm-surface3:#2a1d36; --vm-border:rgba(255,226,240,.09); --vm-border-hi:rgba(255,226,240,.18); --vm-text:#f7eef3; --vm-muted:#b3a4bb; --vm-muted2:#7d6e87; --vm-accent:#FF3D81; /* rose */ --vm-accent2:#E11D74; /* deep rose */ --vm-accent3:#FF7AAE; /* blush */ --vm-orchid:#B5179E; --vm-gold:#E8C58A; /* champagne */ --vm-gold2:#C99A52; --vm-good:#34d399;--vm-warn:#fbbf24;--vm-bad:#fb7185; --vm-grad:linear-gradient(135deg,#FF3D81 0%,#D81B8C 55%,#A21CAF 100%); --vm-grad-gold:linear-gradient(90deg,#FF7AAE 0%,#E8C58A 100%); --vm-grad-soft:rgba(255,61,129,.12); --vm-max:1400px;--vm-radius:18px;--vm-radius-sm:12px;--vm-radius-lg:26px; --vm-shadow:0 10px 34px -14px rgba(0,0,0,.75); --vm-shadow-lg:0 24px 70px -24px rgba(0,0,0,.85); --vm-font:Manrope,Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; --vm-display:"Cormorant Garamond",Georgia,"Times New Roman",serif; --vm-feed-cols:4; --vm-card-ratio:4 / 5; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;color:var(--vm-text);font-family:var(--vm-font);line-height:1.55;-webkit-font-smoothing:antialiased; background: radial-gradient(900px 520px at 8% -8%,rgba(255,61,129,.13),transparent 60%), radial-gradient(800px 480px at 100% 0%,rgba(162,28,175,.16),transparent 60%), var(--vm-bg); background-attachment:fixed} a{color:inherit;text-decoration:none} img,video{max-width:100%} button,input,textarea,select{font:inherit} ::selection{background:var(--vm-accent);color:#fff} .vm-site{min-height:100vh} :focus-visible{outline:2px solid var(--vm-gold);outline-offset:2px} /* ============ HEADER ============ */ .vm-header{position:sticky;top:0;z-index:100;background:rgba(12,7,16,.8);backdrop-filter:saturate(1.5) blur(18px);-webkit-backdrop-filter:saturate(1.5) blur(18px);border-bottom:1px solid var(--vm-border)} .vm-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,61,129,.6),rgba(232,197,138,.6),transparent);pointer-events:none} .vm-nav{max-width:var(--vm-max);margin:auto;padding:14px 22px;display:flex;align-items:center;gap:22px} .vm-logo{font-family:var(--vm-display);font-style:italic;font-weight:700;font-size:32px;line-height:1;letter-spacing:-.01em} .vm-logo span{background:var(--vm-grad-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-right:.08em} .vm-search{flex:1;max-width:520px;margin:auto} .vm-search form{display:flex;background:rgba(255,255,255,.04);border:1px solid var(--vm-border);border-radius:999px;overflow:hidden;transition:border-color .2s,box-shadow .2s} .vm-search form:focus-within{border-color:rgba(232,197,138,.55);box-shadow:0 0 0 4px rgba(232,197,138,.08)} .vm-search input{width:100%;background:transparent;border:0;outline:0;color:var(--vm-text);padding:11px 18px} .vm-search input::placeholder,.vm-hero-search input::placeholder{color:var(--vm-muted2)} .vm-search button{background:transparent;color:var(--vm-muted);border:0;padding:0 18px;cursor:pointer} .vm-nav-actions{display:flex;gap:10px;align-items:center} .vm-age-pill{display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;letter-spacing:.04em;color:var(--vm-gold);border:1px solid rgba(232,197,138,.5);border-radius:999px;padding:3px 9px;line-height:1.2;white-space:nowrap} .vm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--vm-border-hi);background:rgba(255,255,255,.04);color:var(--vm-text);border-radius:999px;padding:10px 18px;font-weight:700;cursor:pointer;transition:.2s;font-size:14.5px} .vm-btn:hover{transform:translateY(-1px);border-color:rgba(232,197,138,.55);background:rgba(255,255,255,.07)} .vm-btn-primary{background:var(--vm-grad);border:0;color:#fff;box-shadow:0 10px 28px -10px rgba(255,61,129,.7)} .vm-btn-primary:hover{filter:brightness(1.1);background:var(--vm-grad)} .vm-btn-block{width:100%} .vm-btn-ghost{background:transparent} .vm-mobile-menu{display:none;background:rgba(255,255,255,.05);border:1px solid var(--vm-border);color:var(--vm-text);border-radius:50%;width:42px;height:42px;align-items:center;justify-content:center;cursor:pointer} .vm-mobile-search-btn{display:none;align-items:center;justify-content:center;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--vm-text);cursor:pointer;flex:none;padding:0} .vm-mobile-search-btn:hover{background:rgba(255,255,255,.06)} .vm-mobile-search-bar{display:none;padding:0 15px 12px} .vm-mobile-search-bar form{display:flex;align-items:center;background:rgba(255,255,255,.05);border:1px solid var(--vm-border);border-radius:999px;overflow:hidden} .vm-mobile-search-bar input{flex:1;border:0;outline:0;background:transparent;padding:12px 16px;font-size:15px;color:var(--vm-text)} .vm-mobile-search-bar button{border:0;background:transparent;color:var(--vm-muted);padding:0 16px;cursor:pointer;display:flex;align-items:center} /* Mobile slide-over nav (lives outside
on purpose — see header.php) */ .vm-mobile-scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:990} .vm-mobile-panel{position:fixed;top:0;right:0;bottom:0;width:300px;max-width:86vw;height:100vh;background:linear-gradient(180deg,var(--vm-surface),var(--vm-bg));border-left:1px solid var(--vm-border);z-index:991;transform:translateX(105%);transition:transform .25s ease;padding:18px;display:flex;flex-direction:column;gap:16px;overflow-y:auto} .vm-mobile-panel-head{display:flex;align-items:center;justify-content:space-between} .vm-mobile-close{background:var(--vm-surface2);border:1px solid var(--vm-border);color:var(--vm-text);border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer} .vm-mobile-search{display:flex;background:var(--vm-surface2);border:1px solid var(--vm-border);border-radius:999px;overflow:hidden} .vm-mobile-search input{flex:1;background:transparent;border:0;outline:0;color:var(--vm-text);padding:11px 16px} .vm-mobile-search button{background:transparent;color:var(--vm-muted);border:0;padding:0 14px;cursor:pointer} .vm-mobile-links{display:flex;flex-direction:column;gap:4px} .vm-mobile-links a{padding:12px 10px;border-radius:12px;font-weight:700;display:flex;align-items:center;gap:10px;color:var(--vm-text)} .vm-mobile-links a:hover{background:var(--vm-surface2)} .vm-mobile-user{display:flex;align-items:center;gap:11px;padding:12px;background:var(--vm-surface2);border:1px solid var(--vm-border);border-radius:var(--vm-radius-sm);margin-bottom:4px} body.vm-mnav-open{overflow:hidden} body.vm-mnav-open .vm-mobile-scrim{display:block} body.vm-mnav-open .vm-mobile-panel{transform:translateX(0)} /* ============ LAYOUT ============ */ .vm-main{max-width:var(--vm-max);margin:auto;padding:26px 22px 80px} .vm-eyebrow{text-transform:uppercase;letter-spacing:.22em;font-size:11.5px;color:var(--vm-gold);font-weight:800} .vm-muted{color:var(--vm-muted)} .vm-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:15px;margin:44px 0 20px} .vm-section-head h2{margin:0;font-family:var(--vm-display);font-size:clamp(28px,3.4vw,38px);font-weight:700;line-height:1;letter-spacing:-.01em} .vm-section-head h2 em,.vm-hero-velvet h1 em{font-style:italic;background:var(--vm-grad-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-right:.06em} .vm-section-head .vm-muted{font-size:13px;letter-spacing:.04em} /* ============ HOME HERO ============ */ .vm-hero-velvet{position:relative;text-align:center;padding:60px 22px 50px;margin:0 0 20px;border-radius:var(--vm-radius-lg);overflow:hidden;border:1px solid var(--vm-border); background:radial-gradient(70% 130% at 12% 0%,rgba(255,61,129,.30),transparent 62%),radial-gradient(60% 130% at 95% 10%,rgba(162,28,175,.34),transparent 62%),linear-gradient(180deg,#1b1024,#120b18)} .vm-hero-velvet::before{content:"";position:absolute;inset:10px;border:1px solid rgba(232,197,138,.2);border-radius:calc(var(--vm-radius-lg) - 8px);pointer-events:none} .vm-hero-velvet h1{position:relative;font-family:var(--vm-display);font-weight:700;font-size:clamp(42px,7.4vw,84px);line-height:.98;letter-spacing:-.02em;margin:14px auto 16px;max-width:880px} .vm-hero-velvet p{position:relative;color:var(--vm-muted);max-width:600px;margin:0 auto 26px;font-size:17px} .vm-hero-search{position:relative;display:flex;max-width:540px;margin:0 auto;background:rgba(12,7,16,.6);border:1px solid var(--vm-border-hi);border-radius:999px;padding:5px;backdrop-filter:blur(10px);transition:border-color .2s,box-shadow .2s} .vm-hero-search:focus-within{border-color:rgba(232,197,138,.6);box-shadow:0 0 0 5px rgba(232,197,138,.09)} .vm-hero-search input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--vm-text);padding:0 18px;font-size:15.5px} /* ============ CATEGORY CHIPS ============ */ .vm-cats{display:flex;gap:10px;overflow-x:auto;padding:6px 2px 12px;margin:0 -2px;scrollbar-width:none} .vm-cats::-webkit-scrollbar{display:none} .vm-cat{flex:none;padding:9px 19px;border-radius:999px;border:1px solid var(--vm-border-hi);background:rgba(255,255,255,.03);color:var(--vm-muted);font-weight:700;font-size:13.5px;white-space:nowrap;cursor:pointer;transition:.2s} .vm-cat:hover{color:var(--vm-text);border-color:rgba(232,197,138,.6);background:rgba(232,197,138,.07)} .vm-cat.is-active{background:var(--vm-grad);border-color:transparent;color:#fff;box-shadow:0 8px 22px -10px rgba(255,61,129,.8)} /* ============ CREATOR CTA ============ */ .vm-creator-cta{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin:40px 0 0!important;padding:22px 26px!important; background:linear-gradient(120deg,rgba(255,61,129,.16),rgba(162,28,175,.12) 60%,rgba(232,197,138,.08))!important;border:1px solid rgba(232,197,138,.28)!important} .vm-creator-cta p{margin:2px 0 0;font-size:13.5px} /* ===== STRUCTURE: forms, Creator Studio, auth, prose, comments (recoloured) ===== */ /* ============ PLUGIN FORMS / CARDS / TABLES (shared style hooks) ============ */ .vmp-card{background:linear-gradient(180deg,var(--vm-surface),var(--vm-surface) 40%,var(--vm-surface2))!important;border:1px solid var(--vm-border)!important;border-radius:var(--vm-radius)!important;box-shadow:var(--vm-shadow)!important;padding:22px!important;position:relative} .vmp-card+.vmp-card{margin-top:16px} .vmp-card h2,.vmp-card h3{letter-spacing:-.02em} .vmp-stat{background:var(--vm-surface2);border:1px solid var(--vm-border)!important;border-radius:var(--vm-radius-sm)!important;padding:18px!important;position:relative;overflow:hidden;transition:transform .2s,border-color .2s} .vmp-stat:hover{transform:translateY(-2px);border-color:var(--vm-border-hi)!important} .vmp-stat::before{content:"";position:absolute;inset:0 auto auto 0;width:100%;height:3px;background:var(--vm-grad);opacity:.9} .vmp-stat strong,.vmp-stat b{font-size:28px;font-weight:900;letter-spacing:-.02em;background:var(--vm-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;display:inline-block} .vmp-btn{background:var(--vm-surface)!important;border:1px solid var(--vm-border)!important;color:var(--vm-text)!important;border-radius:11px!important;padding:10px 16px!important;font-weight:700!important;transition:.2s!important} .vmp-btn:hover{border-color:var(--vm-border-hi)!important;transform:translateY(-1px)} .vmp-form label{display:block;font-size:13px;font-weight:700;color:var(--vm-muted);text-transform:uppercase;letter-spacing:.06em;margin:16px 0 7px} .vmp-form label:first-child{margin-top:0} .vmp-form input,.vmp-form textarea,.vmp-form select{background:var(--vm-surface2)!important;color:var(--vm-text)!important;border:1px solid var(--vm-border)!important;border-radius:11px!important;padding:12px 14px!important;width:100%;transition:border-color .2s,box-shadow .2s!important} .vmp-form input:focus,.vmp-form textarea:focus,.vmp-form select:focus{outline:0;border-color:var(--vm-accent2)!important;box-shadow:0 0 0 3px rgba(255,61,129,.18)!important} .vmp-form textarea{min-height:110px;resize:vertical} .vmp-form input[type="file"]{padding:22px 14px!important;border:1.5px dashed var(--vm-border-hi)!important;background:var(--vm-surface2)!important;text-align:center;cursor:pointer} .vmp-form input[type="file"]::file-selector-button{background:var(--vm-grad);color:#fff;border:0;border-radius:9px;padding:8px 14px;font-weight:700;margin-right:12px;cursor:pointer} .vmp-form input[type="submit"],.vmp-form button[type="submit"]{background:var(--vm-grad)!important;border:0!important;color:#fff!important;font-weight:800!important;padding:13px 22px!important;border-radius:12px!important;margin-top:20px;box-shadow:0 8px 26px rgba(255,61,129,.3)} .vmp-form input[type="submit"]:hover,.vmp-form button[type="submit"]:hover{filter:brightness(1.08)} .vmp-table{color:var(--vm-text);width:100%;border-collapse:separate;border-spacing:0} .vmp-table th{text-transform:uppercase;font-size:12px;letter-spacing:.06em;color:var(--vm-muted);text-align:left;padding:12px!important;border-bottom:1px solid var(--vm-border)!important} .vmp-table td{padding:14px 12px!important;border-color:var(--vm-border)!important} .vmp-table tbody tr{transition:background .15s} .vmp-table tbody tr:hover{background:rgba(255,255,255,.03)} .vmp-success{background:rgba(16,185,129,.1)!important;color:#6ee7b7;border-radius:var(--vm-radius-sm)!important;padding:14px 16px!important;border:1px solid rgba(16,185,129,.25)!important} .vmp-error{background:rgba(244,63,94,.1)!important;color:#fda4af;border-radius:var(--vm-radius-sm)!important;padding:14px 16px!important;border:1px solid rgba(244,63,94,.25)!important} .vmp-video-page{max-width:var(--vm-max)!important;margin:0 auto!important;padding:32px 22px 70px!important} .vmp-video-player{width:100%!important;max-height:78vh!important;border-radius:20px!important;background:#000;box-shadow:0 14px 44px rgba(15,23,42,.12)} .vmp-video-page h1{font-size:clamp(25px,4vw,42px);line-height:1.08;letter-spacing:-.035em;margin:0 0 14px} .vmp-creator{color:var(--vm-text)!important} .vmp-socials{display:flex;gap:9px;flex-wrap:wrap} .vmp-socials a{display:inline-flex!important;padding:9px 13px;border:1px solid var(--vm-border);border-radius:999px;background:var(--vm-surface2);margin:0!important;transition:.2s} .vmp-socials a:hover{border-color:var(--vm-border-hi);transform:translateY(-1px)} .vm-video-meta{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 0;border-bottom:1px solid var(--vm-border);margin-bottom:20px} /* ============ CREATOR STUDIO DASHBOARD SHELL ============ */ .vm-dash{max-width:1400px;margin:0 auto;padding:22px;display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:start;min-height:calc(100vh - 70px)} .vm-dash-side{position:sticky;top:88px;display:flex;flex-direction:column;gap:18px;background:linear-gradient(180deg,var(--vm-surface),var(--vm-bg-soft));border:1px solid var(--vm-border);border-radius:var(--vm-radius-lg);padding:20px;box-shadow:var(--vm-shadow)} .vm-dash-brand{font-size:20px;font-weight:900;letter-spacing:-.03em;padding:2px 4px} .vm-dash-brand span{color:var(--vm-accent)} .vm-dash-user{display:flex;align-items:center;gap:11px;padding:12px;background:var(--vm-surface2);border:1px solid var(--vm-border);border-radius:var(--vm-radius-sm)} .vm-dash-avatar{width:38px;height:38px;border-radius:50%;background:var(--vm-grad);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:15px;flex:none} .vm-dash-user-name{font-weight:800;font-size:14px;line-height:1.25} .vm-dash-user-role{font-size:12px;color:var(--vm-muted)} .vm-dash-nav{display:flex;flex-direction:column;gap:4px} .vm-dash-link{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:11px;color:var(--vm-muted);font-weight:700;font-size:14.5px;transition:.15s} .vm-dash-link svg{flex:none;opacity:.85} .vm-dash-link:hover{background:var(--vm-surface2);color:var(--vm-text)} .vm-dash-link.is-active{background:var(--vm-grad-soft);color:var(--vm-accent2);box-shadow:inset 0 0 0 1px rgba(255,61,129,.35)} .vm-dash-link.is-active svg{opacity:1} .vm-dash-divider{height:1px;background:var(--vm-border);margin:2px 0} .vm-dash-payout{background:var(--vm-grad-soft);border:1px solid rgba(255,61,129,.3);border-radius:var(--vm-radius-sm);padding:15px} .vm-dash-payout-top{display:flex;align-items:center;gap:9px;margin-bottom:6px} .vm-dash-payout-title{font-weight:800;font-size:13.5px} .vm-dash-payout p{margin:0;font-size:12.5px;color:var(--vm-muted);line-height:1.5} .vm-dash-payout strong{color:var(--vm-text)} .vm-dash-side-foot{display:flex;flex-direction:column;gap:2px;margin-top:4px} .vm-dash-side-foot a{font-size:13px;color:var(--vm-muted);padding:9px 12px;border-radius:9px} .vm-dash-side-foot a:hover{background:var(--vm-surface2);color:var(--vm-text)} .vm-dash-main{min-width:0} .vm-dash-topbar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px} .vm-dash-eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:11.5px;color:var(--vm-accent);font-weight:800;margin-bottom:6px} .vm-dash-topbar h1{margin:0;font-size:clamp(24px,3vw,34px);letter-spacing:-.03em} .vm-dash-topbar-sub{color:var(--vm-muted);font-size:14.5px;margin-top:5px} .vm-dash-topbar-actions{display:flex;gap:10px} .vm-dash-content .vmp-wrap{display:block} .vm-dash-content>.vmp-card:first-child{margin-top:0} .vm-dash-mobile-bar{display:none} .vm-dash-scrim{display:none} .vm-dash-toggle-close{display:none} @media(max-width:980px){ .vm-dash{grid-template-columns:1fr;padding:14px} .vm-dash-mobile-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--vm-surface);border:1px solid var(--vm-border);border-radius:var(--vm-radius-sm);padding:12px 14px;margin-bottom:14px} .vm-dash-mobile-bar button{background:var(--vm-surface2);border:1px solid var(--vm-border);color:var(--vm-text);border-radius:9px;padding:8px 11px;display:flex;align-items:center;gap:7px;font-weight:700} .vm-dash-side{position:fixed;top:0;left:0;bottom:0;width:280px;z-index:200;transform:translateX(-105%);transition:transform .25s ease;border-radius:0;top:0;height:100vh;overflow-y:auto} body.vm-dash-open .vm-dash-side{transform:translateX(0)} .vm-dash-scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:190} body.vm-dash-open .vm-dash-scrim{display:block} .vm-dash-toggle-close{display:inline-flex} } /* ============ AUTH (login / register) ============ */ .vm-auth{max-width:1080px;margin:26px auto 60px;padding:0 22px;display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:stretch} .vm-auth-card{background:linear-gradient(180deg,var(--vm-surface),var(--vm-surface2));border:1px solid var(--vm-border);border-radius:var(--vm-radius-lg);padding:36px;box-shadow:var(--vm-shadow-lg)} .vm-auth-brand{font-weight:900;font-size:22px;letter-spacing:-.03em;margin-bottom:22px} .vm-auth-brand span{color:var(--vm-accent)} .vm-auth-card h1{margin:0 0 8px;font-size:clamp(26px,3.4vw,34px);letter-spacing:-.03em} .vm-auth-card>p{color:var(--vm-muted);margin:0 0 22px} .vm-auth-side{border-radius:var(--vm-radius-lg);padding:36px;background:radial-gradient(120% 120% at 0% 0%,rgba(255,61,129,.22),rgba(162,28,175,.18) 55%,transparent 90%),var(--vm-surface);border:1px solid var(--vm-border);display:flex;flex-direction:column;justify-content:center;gap:16px} .vm-auth-side h2{margin:0;font-size:24px;letter-spacing:-.02em;max-width:320px} .vm-auth-side ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px} .vm-auth-side li{display:flex;gap:10px;align-items:flex-start;color:var(--vm-muted);font-size:14.5px} .vm-auth-side li svg{flex:none;margin-top:2px;color:var(--vm-accent3)} @media(max-width:820px){.vm-auth{grid-template-columns:1fr}.vm-auth-side{order:-1}} /* ============ PROSE (generic pages/posts) ============ */ .vm-prose-card{max-width:820px;margin:0 auto;background:linear-gradient(180deg,var(--vm-surface),var(--vm-surface2));border:1px solid var(--vm-border);border-radius:var(--vm-radius-lg);padding:38px;box-shadow:var(--vm-shadow)} .vm-prose-card h1{font-size:clamp(28px,4vw,40px);letter-spacing:-.03em;margin:0 0 22px} .vm-prose-card h2{font-size:22px;letter-spacing:-.02em;margin:28px 0 12px} .vm-prose-card h3{font-size:18px;margin:22px 0 10px} .vm-prose-card p{color:var(--vm-muted);line-height:1.75;margin:0 0 16px} .vm-prose-card a{color:var(--vm-accent3);text-decoration:underline} .vm-prose-card ul,.vm-prose-card ol{color:var(--vm-muted);line-height:1.75;padding-left:22px} .vm-prose-card img{border-radius:var(--vm-radius-sm)} .vm-prose-meta{color:var(--vm-muted);font-size:13px;margin-bottom:6px} /* ============ POST / ARCHIVE CARDS (index.php) ============ */ .vm-post-card{background:linear-gradient(180deg,var(--vm-surface),var(--vm-surface2));border:1px solid var(--vm-border);border-radius:var(--vm-radius);padding:22px;margin-bottom:16px;box-shadow:var(--vm-shadow);transition:.2s} .vm-post-card:hover{border-color:var(--vm-border-hi);transform:translateY(-2px)} .vm-post-card h2{margin:0 0 6px;font-size:20px;letter-spacing:-.02em} .vm-post-card h2 a:hover{color:var(--vm-accent)} .vm-empty-state{text-align:center;padding:60px 20px;color:var(--vm-muted)} /* ============ 404 ============ */ .vm-404{text-align:center;padding:60px 0} .vm-404-code{font-size:clamp(70px,12vw,140px);font-weight:900;letter-spacing:-.05em;line-height:.9;background:var(--vm-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:6px} .vm-404 h1{margin:0 0 10px} .vm-404 p{color:var(--vm-muted);max-width:420px;margin:0 auto 26px} /* ============ SEARCH RESULTS ============ */ .vm-search-summary{color:var(--vm-muted);margin-bottom:6px} .vm-creator-row{display:flex;gap:14px;flex-wrap:wrap;margin:14px 0 8px} .vm-creator-chip{display:flex;align-items:center;gap:10px;background:var(--vm-surface2);border:1px solid var(--vm-border);border-radius:999px;padding:8px 16px 8px 8px;transition:.2s} .vm-creator-chip:hover{border-color:var(--vm-border-hi);transform:translateY(-1px)} .vm-creator-chip .vm-dash-avatar{width:30px;height:30px;font-size:13px} .vm-creator-chip strong{font-size:14px} /* ========== Like / Dislike / Comments on video page ========== */ .vm-engage{ margin:20px 0 24px; padding:0; } .vm-engage-bar{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; } .vm-vote, .vm-comments-toggle{ display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:999px; border:1px solid var(--vm-border-hi); background:var(--vm-surface2); color:var(--vm-text); font-size:13.5px; font-weight:600; cursor:pointer; font-family:inherit; transition:background .15s,border-color .15s,color .15s,box-shadow .15s; box-shadow:0 1px 2px rgba(0,0,0,.04); } .vm-vote:hover, .vm-comments-toggle:hover{ background:var(--vm-surface2); border-color:var(--vm-border-hi); } .vm-vote:disabled{opacity:.55;cursor:wait} .vm-ico{ display:block; flex-shrink:0; opacity:.85; } .vm-vote.is-active .vm-ico{opacity:1} .vm-vote-like.is-active{ border-color:rgba(255,61,129,.45); background:rgba(255,61,129,.08); color:#E11D74; } .vm-vote-dislike.is-active{ border-color:#d0d0d0; background:var(--vm-surface2); color:var(--vm-muted); } .vm-comments-toggle.is-open{ border-color:rgba(255,61,129,.4); background:rgba(255,61,129,.07); color:#E11D74; } .vm-vote-count, .vm-c-count{ font-variant-numeric:tabular-nums; font-weight:700; min-width:1ch; } .vm-c-label{font-weight:600} /* Comments panel */ .vm-comments-panel{ margin-top:16px; padding:0; border:1px solid var(--vm-border-hi); border-radius:16px; background:var(--vm-surface2); overflow:hidden; box-shadow:0 4px 24px rgba(0,0,0,.04); } .vm-comments-head{ padding:16px 18px 12px; border-bottom:1px solid var(--vm-border-hi); display:flex; flex-direction:column; gap:2px; } .vm-comments-title{ margin:0; font-size:16px; font-weight:700; letter-spacing:-.02em; color:var(--vm-text); } .vm-comments-sub{ font-size:12.5px; color:var(--vm-muted); } /* Top-level compose form */ .vm-comment-form{ padding:14px 18px 16px; border-bottom:1px solid var(--vm-border-hi); background:var(--vm-surface); } .vm-reply-form{ padding:12px 0 4px; border-bottom:0; background:transparent; } .vm-cf-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:10px; } .vm-cf-name{ flex:1; min-width:140px; padding:10px 12px; border:1px solid var(--vm-border-hi); border-radius:10px; font-size:13.5px; background:var(--vm-surface2); transition:border-color .15s,box-shadow .15s; } .vm-cf-name:focus, .vm-cf-body:focus{ outline:none; border-color:#FF3D81; box-shadow:0 0 0 3px rgba(255,61,129,.15); } .vm-cf-name:disabled{opacity:.5;background:var(--vm-surface2)} .vm-cf-anon{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--vm-muted); cursor:pointer; user-select:none; white-space:nowrap; } .vm-cf-body{ width:100%; padding:12px 14px; border:1px solid var(--vm-border-hi); border-radius:12px; font-size:14px; font-family:inherit; resize:vertical; min-height:64px; background:var(--vm-surface2); box-sizing:border-box; line-height:1.45; transition:border-color .15s,box-shadow .15s; } .vm-cf-actions{ display:flex; align-items:center; gap:12px; margin-top:10px; } .vm-cf-submit{ border-radius:999px!important; padding:9px 18px!important; font-size:13px!important; font-weight:600!important; } .vm-cf-msg{font-size:12.5px;color:var(--vm-muted)} /* Comment list */ .vm-comments-list{ display:flex; flex-direction:column; padding:4px 0 8px; } .vm-comments-empty{ margin:0; padding:36px 20px; text-align:center; color:var(--vm-muted); } .vm-comments-empty-ico{ display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; background:var(--vm-surface2); color:var(--vm-muted2); margin-bottom:12px; } .vm-comments-empty p{ margin:0 0 4px; font-size:15px; font-weight:600; color:var(--vm-muted); } .vm-comments-empty span{ font-size:13px; color:var(--vm-muted); } .vm-comment{ display:flex; gap:12px; padding:14px 18px; border-bottom:1px solid var(--vm-border-hi); transition:background .12s; } .vm-comment:last-child{border-bottom:0} .vm-comment:hover{background:var(--vm-surface2)} .vm-comment--reply{ padding:10px 0 10px 0; border-bottom:0; background:transparent; } .vm-comment--reply:hover{background:transparent} .vm-comment-avatar{ flex-shrink:0; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px; font-weight:700; letter-spacing:-.02em; box-shadow:0 1px 3px rgba(0,0,0,.12); } .vm-comment--reply .vm-comment-avatar{ width:28px; height:28px; font-size:12px; } .vm-comment-main{flex:1;min-width:0} .vm-comment-head{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:4px; font-size:13px; color:var(--vm-text); } .vm-comment-author{font-weight:700;letter-spacing:-.01em} .vm-comment-time{ font-size:12px; color:var(--vm-muted); font-weight:500; } .vm-anon-tag{ font-size:10px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:var(--vm-muted); background:var(--vm-surface2); padding:2px 7px; border-radius:999px; } .vm-comment-body{ margin:0 0 6px; font-size:14px; line-height:1.5; color:var(--vm-text); white-space:pre-wrap; word-break:break-word; } .vm-comment-actions{ display:flex; align-items:center; gap:8px; } .vm-reply-btn{ display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border:0; border-radius:999px; background:transparent; color:var(--vm-muted); font-size:12.5px; font-weight:600; font-family:inherit; cursor:pointer; transition:background .12s,color .12s; } .vm-reply-btn:hover{ background:var(--vm-surface2); color:var(--vm-text); } .vm-ico-sm{opacity:.7} .vm-reply-slot{ margin-top:8px; padding:10px 12px; border-radius:12px; background:var(--vm-surface2); border:1px solid var(--vm-border-hi); } .vm-reply-hint{ font-size:12.5px; color:var(--vm-muted); margin-bottom:8px; } .vm-reply-hint strong{color:var(--vm-text)} .vm-reply-cancel{ border:0; background:none; color:#FF3D81; font-size:12.5px; font-weight:600; cursor:pointer; font-family:inherit; padding:0 0 0 6px; } .vm-reply-cancel:hover{text-decoration:underline} .vm-comment-replies{ margin-top:6px; padding-left:8px; border-left:2px solid var(--vm-border-hi); display:flex; flex-direction:column; gap:0; } @media (max-width:560px){ .vm-vote,.vm-comments-toggle{padding:8px 12px;font-size:13px} .vm-comment{padding:12px 14px;gap:10px} .vm-comment-form{padding:12px 14px} .vm-comments-head{padding:14px 14px 10px} .vm-comment-replies{padding-left:6px} } /* Follow box on video page — compact */ .vmp-video-page > .vmp-card{ padding:12px 14px!important; margin-top:8px!important; border-radius:12px!important; max-width:420px!important; box-shadow:none!important; } .vmp-video-page > .vmp-card h3{ font-size:14px!important; font-weight:600!important; margin:0 0 8px!important; line-height:1.3!important; } .vmp-video-page > .vmp-card .vmp-socials{ display:flex!important; flex-wrap:wrap!important; gap:8px!important; } .vmp-video-page > .vmp-card .vmp-socials a{ display:inline-flex!important; align-items:center!important; padding:6px 12px!important; font-size:13px!important; font-weight:600!important; border-radius:999px!important; border:1px solid var(--vm-border-hi)!important; background:var(--vm-surface2)!important; color:var(--vm-text)!important; margin:0!important; text-decoration:none!important; } .vmp-video-page > .vmp-card .vmp-socials a:hover{ border-color:#ccc!important; background:var(--vm-surface2)!important; } /* ============================================================ CREATOR STUDIO — dark modern theme (login / register / dash) ============================================================ */ body.vm-studio{ --vm-bg:#0b0d12; --vm-bg-soft:#11141b; --vm-surface:#151922; --vm-surface2:#1c212c; --vm-surface3:#242a36; --vm-border:rgba(255,255,255,.08); --vm-border-hi:rgba(255,255,255,.14); --vm-text:#f2f4f8; --vm-muted:#9aa3b2; --vm-muted2:#6b7380; --vm-accent:#FF3D81; --vm-accent2:#FF7AAE; --vm-accent3:#0090c7; --vm-grad:linear-gradient(135deg,#FF3D81 0%,#0077b6 100%); --vm-grad-soft:rgba(255,61,129,.12); --vm-shadow:0 8px 32px rgba(0,0,0,.35); --vm-shadow-lg:0 16px 48px rgba(0,0,0,.45); --vm-good:#34d399; --vm-warn:#fbbf24; --vm-bad:#f87171; background:var(--vm-bg)!important; color:var(--vm-text)!important; background-image: radial-gradient(ellipse 80% 50% at 20% -10%,rgba(255,61,129,.12),transparent 55%), radial-gradient(ellipse 60% 40% at 90% 0%,rgba(99,102,241,.08),transparent 50%)!important; } /* Public chrome on studio pages */ body.vm-studio .vm-header{ background:rgba(11,13,18,.85)!important; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--vm-border)!important; box-shadow:none!important; } body.vm-studio .vm-logo span{color:var(--vm-accent)!important} body.vm-studio .vm-search form{ background:var(--vm-surface2)!important; border-color:var(--vm-border)!important; } body.vm-studio .vm-search input{color:var(--vm-text)!important} body.vm-studio .vm-btn{ background:var(--vm-surface2)!important; border-color:var(--vm-border)!important; color:var(--vm-text)!important; box-shadow:none!important; } body.vm-studio .vm-btn:hover{background:var(--vm-surface3)!important} body.vm-studio .vm-btn-primary{ background:var(--vm-grad)!important; border:0!important; color:#fff!important; } body.vm-studio .vm-footer{ background:var(--vm-bg-soft)!important; border-top:1px solid var(--vm-border)!important; color:var(--vm-muted)!important; } body.vm-studio .vm-footer a{color:var(--vm-muted)!important} body.vm-studio .vm-footer a:hover{color:var(--vm-text)!important} body.vm-studio .vm-mobile-panel{ background:var(--vm-surface)!important; border-left-color:var(--vm-border)!important; } body.vm-studio .vm-mobile-scrim{background:rgba(0,0,0,.7)} /* Plugin base cards / forms on studio */ body.vm-studio .vmp-card{ background:var(--vm-surface)!important; border:1px solid var(--vm-border)!important; box-shadow:var(--vm-shadow)!important; color:var(--vm-text)!important; } body.vm-studio .vmp-card h2, body.vm-studio .vmp-card h3{color:var(--vm-text)!important} body.vm-studio .vmp-stat{ background:var(--vm-surface2)!important; border-color:var(--vm-border)!important; } body.vm-studio .vmp-stat strong, body.vm-studio .vmp-stat b{ background:none!important; -webkit-text-fill-color:var(--vm-text)!important; color:var(--vm-text)!important; } body.vm-studio .vmp-stat::before{background:var(--vm-accent)!important} body.vm-studio .vmp-btn{ background:var(--vm-surface2)!important; border:1px solid var(--vm-border)!important; color:var(--vm-text)!important; } body.vm-studio .vmp-btn:hover{border-color:var(--vm-border-hi)!important;background:var(--vm-surface3)!important} body.vm-studio .vmp-form label{color:var(--vm-muted)!important} body.vm-studio .vmp-form input, body.vm-studio .vmp-form textarea, body.vm-studio .vmp-form select{ background:var(--vm-bg-soft)!important; color:var(--vm-text)!important; border-color:var(--vm-border)!important; } body.vm-studio .vmp-form input:focus, body.vm-studio .vmp-form textarea:focus, body.vm-studio .vmp-form select:focus{ border-color:var(--vm-accent)!important; box-shadow:0 0 0 3px rgba(255,61,129,.2)!important; } body.vm-studio .vmp-form input[type="file"]{ background:var(--vm-surface2)!important; border-color:var(--vm-border-hi)!important; color:var(--vm-muted)!important; } body.vm-studio .vmp-form input[type="submit"], body.vm-studio .vmp-form button[type="submit"]{ background:var(--vm-grad)!important; color:#fff!important; box-shadow:0 8px 28px rgba(255,61,129,.25)!important; } body.vm-studio .vmp-table th{color:var(--vm-muted)!important;border-color:var(--vm-border)!important} body.vm-studio .vmp-table td{border-color:var(--vm-border)!important;color:var(--vm-text)!important} body.vm-studio .vmp-table tbody tr:hover{background:rgba(255,255,255,.03)!important} body.vm-studio .vmp-success{ background:rgba(52,211,153,.1)!important; color:#6ee7b7!important; border-color:rgba(52,211,153,.25)!important; } body.vm-studio .vmp-error{ background:rgba(248,113,113,.1)!important; color:#fca5a5!important; border-color:rgba(248,113,113,.25)!important; } body.vm-studio .vmp-muted{color:var(--vm-muted)!important} /* ---- Dashboard shell ---- */ body.vm-studio .vm-dash{ max-width:1280px; padding:20px 22px 40px; gap:20px; grid-template-columns:240px 1fr; } body.vm-studio .vm-dash-side{ background:var(--vm-surface)!important; border:1px solid var(--vm-border)!important; border-radius:16px; padding:18px; box-shadow:none; gap:14px; } body.vm-studio .vm-dash-brand{color:var(--vm-text)} body.vm-studio .vm-dash-brand span{color:var(--vm-accent)!important} body.vm-studio .vm-dash-user{ background:var(--vm-surface2)!important; border-color:var(--vm-border)!important; border-radius:12px; padding:11px; } body.vm-studio .vm-dash-avatar{ background:var(--vm-grad)!important; color:#fff!important; -webkit-text-fill-color:#fff; } body.vm-studio .vm-dash-user-name{color:var(--vm-text)} body.vm-studio .vm-dash-user-role{color:var(--vm-muted)} body.vm-studio .vm-dash-link{ color:var(--vm-muted)!important; border-radius:10px; padding:10px 12px; font-weight:600; } body.vm-studio .vm-dash-link:hover{ background:var(--vm-surface2)!important; color:var(--vm-text)!important; } body.vm-studio .vm-dash-link.is-active{ background:rgba(255,61,129,.12)!important; color:var(--vm-accent2)!important; box-shadow:inset 0 0 0 1px rgba(255,61,129,.3)!important; } body.vm-studio .vm-dash-divider{background:var(--vm-border)!important} body.vm-studio .vm-dash-payout{ background:rgba(255,61,129,.08)!important; border:1px solid rgba(255,61,129,.22)!important; border-radius:12px; } body.vm-studio .vm-dash-payout-title{color:var(--vm-text)} body.vm-studio .vm-dash-payout p{color:var(--vm-muted)!important} body.vm-studio .vm-dash-payout strong{color:var(--vm-text)!important} body.vm-studio .vm-dash-side-foot a{color:var(--vm-muted)!important} body.vm-studio .vm-dash-side-foot a:hover{ background:var(--vm-surface2)!important; color:var(--vm-text)!important; } body.vm-studio .vm-dash-eyebrow{ color:var(--vm-accent)!important; letter-spacing:.12em; } body.vm-studio .vm-dash-topbar h1{color:var(--vm-text)!important} body.vm-studio .vm-dash-topbar-sub{color:var(--vm-muted)!important} body.vm-studio .vm-dash-mobile-bar{ background:var(--vm-surface)!important; border-color:var(--vm-border)!important; } body.vm-studio .vm-dash-mobile-bar button{ background:var(--vm-surface2)!important; border-color:var(--vm-border)!important; color:var(--vm-text)!important; } /* ---- Auth login / register ---- */ body.vm-studio .vm-auth{ max-width:960px; margin:40px auto 70px; gap:24px; } body.vm-studio .vm-auth-card{ background:var(--vm-surface)!important; border:1px solid var(--vm-border)!important; border-radius:18px; padding:32px 28px; box-shadow:var(--vm-shadow-lg); } body.vm-studio .vm-auth-brand{color:var(--vm-text)} body.vm-studio .vm-auth-brand span{color:var(--vm-accent)!important} body.vm-studio .vm-auth-card h1{color:var(--vm-text)!important} body.vm-studio .vm-auth-card>p{color:var(--vm-muted)!important} body.vm-studio .vm-auth-side{ background: radial-gradient(120% 100% at 0% 0%,rgba(255,61,129,.22),transparent 60%), var(--vm-surface2)!important; border:1px solid var(--vm-border)!important; border-radius:18px; color:var(--vm-text); } body.vm-studio .vm-auth-side h2{color:var(--vm-text)!important} body.vm-studio .vm-auth-side ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px} body.vm-studio .vm-auth-side li{ display:flex;align-items:flex-start;gap:10px; color:var(--vm-muted); font-size:14.5px; line-height:1.4; } body.vm-studio .vm-auth-side li svg{color:var(--vm-accent);flex-shrink:0;margin-top:2px} body.vm-studio .vm-eyebrow{color:var(--vm-accent)!important} /* WP login form inside auth card */ body.vm-studio .vmp-form, body.vm-studio .vm-auth-card form{ max-width:100%; } body.vm-studio .vm-auth-card input[type="text"], body.vm-studio .vm-auth-card input[type="password"], body.vm-studio .vm-auth-card input[type="email"], body.vm-studio .login form input{ background:var(--vm-bg-soft)!important; color:var(--vm-text)!important; border:1px solid var(--vm-border)!important; border-radius:10px!important; padding:11px 13px!important; width:100%; box-sizing:border-box; } body.vm-studio .login form label, body.vm-studio .vm-auth-card label{color:var(--vm-muted)!important} body.vm-studio .login form .button, body.vm-studio .login form input[type="submit"], body.vm-studio .vm-auth-card input[type="submit"]{ background:var(--vm-grad)!important; border:0!important; color:#fff!important; border-radius:10px!important; padding:12px 18px!important; font-weight:700!important; width:100%; margin-top:8px; cursor:pointer; } body.vm-studio .vm-auth-card a{color:var(--vm-accent)!important} /* ---- Plugin dashboard layout ---- */ body.vm-studio .vmp-dashboard-wrap{ max-width:none!important; margin:0!important; padding:0!important; display:flex; flex-direction:column; gap:20px; } body.vm-studio .vmp-dashboard-hero{ display:grid; grid-template-columns:1.4fr .9fr; gap:18px; align-items:stretch; } body.vm-studio .vmp-hero-copy{ background:var(--vm-surface); border:1px solid var(--vm-border); border-radius:16px; padding:24px 26px; position:relative; overflow:hidden; } body.vm-studio .vmp-hero-copy::before{ content:""; position:absolute; inset:0 auto auto 0; width:100%; height:2px; background:var(--vm-grad); opacity:.9; } body.vm-studio .vmp-kicker{ font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--vm-accent); margin-bottom:10px; } body.vm-studio .vmp-hero-copy h1{ margin:0 0 10px; font-size:clamp(22px,2.8vw,30px); line-height:1.15; letter-spacing:-.03em; font-weight:800; color:var(--vm-text); } body.vm-studio .vmp-hero-copy h1 span{ background:var(--vm-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } body.vm-studio .vmp-hero-copy p{ margin:0 0 18px; color:var(--vm-muted); font-size:14.5px; max-width:42ch; } body.vm-studio .vmp-hero-actions{ display:flex; flex-wrap:wrap; gap:10px; } body.vm-studio .vmp-btn-hot{ background:var(--vm-grad)!important; border:0!important; color:#fff!important; font-weight:700!important; border-radius:10px!important; padding:11px 18px!important; box-shadow:0 8px 24px rgba(255,61,129,.28)!important; } body.vm-studio .vmp-btn-hot:hover{filter:brightness(1.08);transform:translateY(-1px)} body.vm-studio .vmp-btn-ghost{ background:transparent!important; border:1px solid var(--vm-border)!important; color:var(--vm-text)!important; border-radius:10px!important; padding:11px 16px!important; } body.vm-studio .vmp-btn-ghost:hover{background:var(--vm-surface2)!important;border-color:var(--vm-border-hi)!important} body.vm-studio .vmp-hero-earnings{ background: radial-gradient(120% 100% at 100% 0%,rgba(255,61,129,.18),transparent 55%), var(--vm-surface2); border:1px solid var(--vm-border); border-radius:16px; padding:24px 22px; display:flex; flex-direction:column; justify-content:center; gap:4px; } body.vm-studio .vmp-hero-earnings span{ font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--vm-muted); } body.vm-studio .vmp-hero-earnings strong{ font-size:clamp(32px,4vw,42px); font-weight:900; letter-spacing:-.04em; color:var(--vm-text); line-height:1.1; } body.vm-studio .vmp-hero-earnings small{ color:var(--vm-muted); font-size:13px; } body.vm-studio .vmp-hero-spark{ display:flex; align-items:flex-end; gap:5px; height:36px; margin-top:14px; } body.vm-studio .vmp-hero-spark i{ display:block; flex:1; border-radius:4px 4px 0 0; background:rgba(255,61,129,.35); min-height:8px; } body.vm-studio .vmp-hero-spark i:nth-child(1){height:35%} body.vm-studio .vmp-hero-spark i:nth-child(2){height:55%} body.vm-studio .vmp-hero-spark i:nth-child(3){height:40%} body.vm-studio .vmp-hero-spark i:nth-child(4){height:75%} body.vm-studio .vmp-hero-spark i:nth-child(5){height:60%} body.vm-studio .vmp-hero-spark i:nth-child(6){height:90%;background:rgba(255,61,129,.7)} body.vm-studio .vmp-hero-spark i:nth-child(7){height:70%} /* Metric cards */ body.vm-studio .vmp-metric-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; } body.vm-studio .vmp-metric{ background:var(--vm-surface); border:1px solid var(--vm-border); border-radius:14px; padding:16px 18px; display:flex; flex-direction:column; gap:4px; transition:border-color .15s,transform .15s; } body.vm-studio .vmp-metric:hover{ border-color:var(--vm-border-hi); transform:translateY(-1px); } body.vm-studio .vmp-metric span{ font-size:12px; font-weight:600; color:var(--vm-muted); text-transform:uppercase; letter-spacing:.04em; } body.vm-studio .vmp-metric strong{ font-size:26px; font-weight:800; letter-spacing:-.03em; color:var(--vm-text); line-height:1.15; } body.vm-studio .vmp-metric small{ font-size:12px; color:var(--vm-muted2); } body.vm-studio .vmp-metric-primary{ background:linear-gradient(160deg,rgba(255,61,129,.14),var(--vm-surface) 60%); border-color:rgba(255,61,129,.28); } body.vm-studio .vmp-metric-primary strong{color:var(--vm-accent2)} /* Dashboard content grid */ body.vm-studio .vmp-dashboard-grid{ display:grid; grid-template-columns:1.35fr .9fr; gap:16px; align-items:start; } body.vm-studio .vmp-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:16px; } body.vm-studio .vmp-overline{ display:block; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--vm-accent); margin-bottom:4px; } body.vm-studio .vmp-card-head h2{ margin:0; font-size:18px; font-weight:800; letter-spacing:-.02em; color:var(--vm-text); } body.vm-studio .vmp-trend{ font-size:13px; font-weight:700; padding:5px 10px; border-radius:999px; white-space:nowrap; } body.vm-studio .vmp-trend.up{ background:rgba(52,211,153,.12); color:var(--vm-good); } body.vm-studio .vmp-trend.down{ background:rgba(248,113,113,.12); color:var(--vm-bad); } /* Chart bars */ body.vm-studio .vmp-chart{ display:flex; align-items:flex-end; gap:8px; height:140px; padding:8px 4px 0; } body.vm-studio .vmp-chart > div, body.vm-studio .vmp-chart .vmp-bar{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end; } body.vm-studio .vmp-chart .bar, body.vm-studio .vmp-chart i{ width:100%; max-width:36px; border-radius:6px 6px 2px 2px; background:linear-gradient(180deg,rgba(255,61,129,.85),rgba(255,61,129,.25)); min-height:8px; } body.vm-studio .vmp-chart .label, body.vm-studio .vmp-chart span{ font-size:10px; color:var(--vm-muted2); font-weight:600; } /* Lists / top videos */ body.vm-studio .vmp-list, body.vm-studio .vmp-top-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; } body.vm-studio .vmp-list-item, body.vm-studio .vmp-top-list li{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px; background:var(--vm-surface2); border:1px solid var(--vm-border); transition:border-color .15s; } body.vm-studio .vmp-list-item:hover, body.vm-studio .vmp-top-list li:hover{border-color:var(--vm-border-hi)} body.vm-studio .vmp-list-item img, body.vm-studio .vmp-top-list img{ width:56px; height:36px; object-fit:cover; border-radius:6px; background:#000; flex-shrink:0; } body.vm-studio .vmp-list-item a, body.vm-studio .vmp-top-list a{color:var(--vm-text);font-weight:600;font-size:13.5px} body.vm-studio .vmp-list-meta{font-size:12px;color:var(--vm-muted)} /* Progress / goals */ body.vm-studio .vmp-progress{ height:8px; background:var(--vm-surface3); border-radius:999px; overflow:hidden; margin:10px 0; } body.vm-studio .vmp-progress > i, body.vm-studio .vmp-progress > span{ display:block; height:100%; border-radius:999px; background:var(--vm-grad); } /* Share / action strips */ body.vm-studio .vmp-share-row, body.vm-studio .vmp-action-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; } body.vm-studio .vmp-share-row input{ flex:1; min-width:180px; background:var(--vm-bg-soft)!important; border:1px solid var(--vm-border)!important; color:var(--vm-text)!important; border-radius:10px!important; padding:10px 12px!important; } /* Videos table page polish */ body.vm-studio .vm-dash-content .vmp-wrap{ display:flex; flex-direction:column; gap:16px; } body.vm-studio .vmp-actions .vmp-btn{ font-size:13px!important; padding:8px 12px!important; } /* Responsive */ @media (max-width:980px){ body.vm-studio .vmp-dashboard-hero{grid-template-columns:1fr} body.vm-studio .vmp-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))} body.vm-studio .vmp-dashboard-grid{grid-template-columns:1fr} body.vm-studio .vm-auth{grid-template-columns:1fr;max-width:480px} body.vm-studio .vm-auth-side{order:-1;padding:24px} } @media (max-width:560px){ body.vm-studio .vmp-metric-grid{grid-template-columns:1fr 1fr;gap:10px} body.vm-studio .vmp-metric strong{font-size:22px} body.vm-studio .vmp-hero-copy{padding:18px} } /* Dashboard chart bars (plugin markup) */ body.vm-studio .vmp-chart{ display:flex; align-items:flex-end; gap:10px; height:150px; padding:4px 2px 0; } body.vm-studio .vmp-bar-wrap{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:8px; height:100%; } body.vm-studio .vmp-bar{ width:100%; max-width:40px; border-radius:7px 7px 3px 3px; background:linear-gradient(180deg,#FF7AAE 0%,rgba(255,61,129,.25) 100%); min-height:8px; transition:filter .15s; } body.vm-studio .vmp-bar:hover{filter:brightness(1.15)} body.vm-studio .vmp-bar-wrap small{ font-size:10px; font-weight:600; color:var(--vm-muted2); text-transform:uppercase; } body.vm-studio .vmp-chart-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:14px; padding-top:12px; border-top:1px solid var(--vm-border); font-size:13px; color:var(--vm-muted); } body.vm-studio .vmp-chart-foot strong{color:var(--vm-text);font-weight:700} body.vm-studio .vmp-projection-number{ font-size:clamp(28px,3.5vw,36px); font-weight:900; letter-spacing:-.04em; color:var(--vm-accent2); margin:8px 0 6px; } body.vm-studio .vmp-growth-card p{color:var(--vm-muted);font-size:14px;margin:0 0 12px} body.vm-studio .vmp-progress-meta{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--vm-muted); margin-bottom:10px; } body.vm-studio .vmp-progress-meta strong{color:var(--vm-text)} body.vm-studio .vmp-text-link{ color:var(--vm-accent)!important; font-weight:700; font-size:13.5px; } body.vm-studio .vmp-text-link:hover{text-decoration:underline} /* Top videos rows */ body.vm-studio .vmp-video-row{ display:flex; align-items:center; gap:12px; padding:10px 12px; margin:0 0 8px; border-radius:12px; background:var(--vm-surface2); border:1px solid var(--vm-border); transition:border-color .15s,background .15s; color:inherit; } body.vm-studio .vmp-video-row:last-child{margin-bottom:0} body.vm-studio .vmp-video-row:hover{ border-color:var(--vm-border-hi); background:var(--vm-surface3); } body.vm-studio .vmp-video-thumb{ width:64px; height:40px; border-radius:8px; overflow:hidden; background:#000; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:var(--vm-muted); font-size:12px; } body.vm-studio .vmp-video-thumb img{ width:100%; height:100%; object-fit:cover; display:block; } body.vm-studio .vmp-video-name{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; } body.vm-studio .vmp-video-name b{ font-size:13.5px; font-weight:700; color:var(--vm-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } body.vm-studio .vmp-video-name small{ font-size:12px; color:var(--vm-muted); } body.vm-studio .vmp-row-arrow{ color:var(--vm-muted2); font-size:14px; flex-shrink:0; } body.vm-studio .vmp-empty-state{ text-align:center; padding:28px 16px; display:flex; flex-direction:column; align-items:center; gap:8px; } body.vm-studio .vmp-empty-state strong{color:var(--vm-text);font-size:15px} body.vm-studio .vmp-empty-state span{color:var(--vm-muted);font-size:13.5px;max-width:28ch} /* Share card */ body.vm-studio .vmp-share-card p{color:var(--vm-muted);font-size:14px;margin:0 0 14px} body.vm-studio .vmp-share-box{ display:flex; gap:8px; margin-bottom:12px; } body.vm-studio .vmp-share-box input{ flex:1; background:var(--vm-bg-soft)!important; border:1px solid var(--vm-border)!important; color:var(--vm-text)!important; border-radius:10px!important; padding:10px 12px!important; font-size:13px!important; } body.vm-studio .vmp-copy-btn{ background:var(--vm-surface3)!important; border:1px solid var(--vm-border)!important; color:var(--vm-text)!important; border-radius:10px!important; padding:10px 14px!important; font-weight:700!important; cursor:pointer; white-space:nowrap; } body.vm-studio .vmp-copy-btn:hover{border-color:var(--vm-accent)!important;color:var(--vm-accent)!important} body.vm-studio .vmp-share-hints{ display:flex; flex-wrap:wrap; gap:8px; } body.vm-studio .vmp-share-hints span{ font-size:12px; color:var(--vm-muted); background:var(--vm-surface2); border:1px solid var(--vm-border); border-radius:999px; padding:5px 10px; } /* Profile / payout forms inside dash */ body.vm-studio .vmp-dashboard-wrap .vmp-card h3{ font-size:16px; margin:0 0 8px; } body.vm-studio .vmp-lower-grid{margin-top:0} /* Soften plugin inline white overrides */ body.vm-studio .vmp-wrap{ color:var(--vm-text); } /* ---- Related videos section (video pages) ---- */ .vm-related-wrap{ max-width:var(--vm-max); margin:0 auto; padding:8px 22px 48px; } .vm-related-videos .vm-section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:18px; flex-wrap:wrap; } .vm-related-videos .vm-section-head h2{ margin:0; font-size:clamp(18px,2.5vw,22px); letter-spacing:-.02em; } .vm-related-more-wrap{ display:flex; justify-content:center; margin-top:28px; } .vm-related-more{ min-width:160px; padding:12px 28px!important; border-radius:999px!important; font-weight:700!important; } .vm-related-more:disabled{opacity:.6;cursor:wait} /* ---- Creator Studio mobile: full-width, no thin columns ---- */ @media (max-width:980px){ body.vm-studio .vm-dash{ padding:12px 12px 36px!important; gap:12px!important; grid-template-columns:1fr!important; } body.vm-studio .vm-dash-main{ width:100%!important; max-width:100%!important; min-width:0!important; } body.vm-studio .vmp-dashboard-wrap{ gap:12px!important; width:100%!important; } body.vm-studio .vmp-dashboard-hero{ grid-template-columns:1fr!important; gap:12px!important; } body.vm-studio .vmp-hero-copy, body.vm-studio .vmp-hero-earnings{ padding:18px 16px!important; border-radius:14px!important; width:100%!important; box-sizing:border-box; } body.vm-studio .vmp-hero-copy h1{ font-size:22px!important; line-height:1.25!important; margin-bottom:8px!important; } /* Stop forced mid-sentence line breaks on small screens */ body.vm-studio .vmp-hero-copy h1 br{display:none!important} body.vm-studio .vmp-hero-copy h1 span{ display:inline!important; -webkit-text-fill-color:unset; background:none!important; color:var(--vm-accent2)!important; } body.vm-studio .vmp-hero-copy p{ font-size:14px!important; line-height:1.45!important; margin-bottom:14px!important; max-width:none!important; } body.vm-studio .vmp-hero-actions{ display:flex!important; flex-direction:column!important; gap:8px!important; } body.vm-studio .vmp-hero-actions .vmp-btn{ width:100%!important; justify-content:center!important; text-align:center!important; } body.vm-studio .vmp-hero-earnings strong{ font-size:32px!important; } body.vm-studio .vmp-hero-spark{height:28px!important;margin-top:10px!important} /* Metrics: solid 2×2 grid, full width — not skinny swipe cards */ body.vm-studio .vmp-metric-grid{ display:grid!important; grid-template-columns:1fr 1fr!important; gap:10px!important; overflow:visible!important; margin:0!important; padding:0!important; width:100%!important; } body.vm-studio .vmp-metric{ flex:none!important; min-width:0!important; max-width:none!important; width:auto!important; padding:14px 12px!important; box-sizing:border-box; } body.vm-studio .vmp-metric span{ font-size:11px!important; line-height:1.3!important; white-space:normal!important; } body.vm-studio .vmp-metric strong{ font-size:22px!important; line-height:1.15!important; word-break:normal!important; } body.vm-studio .vmp-metric small{ font-size:11px!important; line-height:1.35!important; white-space:normal!important; } body.vm-studio .vmp-dashboard-grid, body.vm-studio .vmp-lower-grid{ grid-template-columns:1fr!important; gap:12px!important; width:100%!important; } body.vm-studio .vmp-card{ padding:16px!important; width:100%!important; box-sizing:border-box; } body.vm-studio .vmp-card-head{ flex-wrap:wrap!important; } body.vm-studio .vmp-card-head h2{ font-size:16px!important; line-height:1.3!important; } body.vm-studio .vmp-chart{height:120px!important} body.vm-studio .vmp-projection-number{font-size:28px!important} body.vm-studio .vmp-share-box{ flex-direction:column!important; } body.vm-studio .vmp-share-box input, body.vm-studio .vmp-copy-btn{ width:100%!important; } body.vm-studio .vm-auth{ margin:16px auto 40px!important; padding:0 12px!important; grid-template-columns:1fr!important; } body.vm-studio .vm-auth-card{padding:22px 16px!important} /* Top bar actions full width */ body.vm-studio .vm-dash-topbar{ flex-direction:column!important; align-items:stretch!important; } body.vm-studio .vm-dash-topbar-actions .vm-btn{ width:100%; justify-content:center; } } @media (max-width:560px){ body.vm-studio .vm-dash{padding:10px 10px 28px!important} body.vm-studio .vmp-metric-grid{ grid-template-columns:1fr 1fr!important; gap:8px!important; } body.vm-studio .vmp-metric{padding:12px 10px!important} body.vm-studio .vmp-metric strong{font-size:20px!important} body.vm-studio .vmp-hero-copy h1{font-size:20px!important} body.vm-studio .vmp-video-row{padding:8px 10px!important} body.vm-studio .vmp-video-thumb{width:52px!important;height:34px!important} .vm-related-wrap{padding:8px 12px 40px} .vmp-feed{gap:14px 10px!important} } /* Prevent studio cards overflowing */ body.vm-studio .vm-dash-main, body.vm-studio .vmp-dashboard-wrap, body.vm-studio .vmp-card, body.vm-studio .vmp-hero-copy, body.vm-studio .vmp-hero-earnings{ min-width:0; max-width:100%; } body.vm-studio .vmp-table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; } /* ---- Creator public profile /{username}/ ---- */ .vmp-creator-profile{ max-width:var(--vm-max,1120px); margin:0 auto; padding:28px 22px 48px; } .vmp-profile-head{ display:flex; gap:20px; align-items:center; margin-bottom:28px; padding:22px; border:1px solid var(--vm-border,rgba(0,0,0,.08)); border-radius:16px; background:var(--vm-surface); } .vmp-profile-avatar{ width:72px; height:72px; border-radius:50%; background:var(--vm-grad); color:#fff; display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:700; flex-shrink:0; } .vmp-profile-meta h1{ margin:0 0 4px; font-size:clamp(22px,3vw,28px); letter-spacing:-.02em; } .vmp-profile-name{ margin:0 0 10px; color:var(--vm-muted,#606060); font-size:15px; } .vmp-profile-stats{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:10px; font-size:14px; color:var(--vm-muted,#606060); } .vmp-profile-stats strong{ color:var(--vm-text,#0f0f0f); font-weight:700; } .vmp-creator-profile .vmp-socials{ display:flex; gap:10px; flex-wrap:wrap; } .vmp-creator-profile .vmp-socials a{ font-size:13px; font-weight:600; color:var(--vm-accent,#FF3D81); text-decoration:none; } .vmp-creator a{ color:inherit; text-decoration:none; } .vmp-creator a:hover{ color:var(--vm-accent,#FF3D81); } @media(max-width:560px){ .vmp-creator-profile{padding:16px 14px 36px} .vmp-profile-head{flex-direction:column;align-items:flex-start;padding:16px;gap:14px} .vmp-profile-avatar{width:56px;height:56px;font-size:22px} } /* ====================================================================== VELVET LAYER — video listing, rail, ads, footer, age gate, responsive (loaded last so it wins over the structural rules above) ====================================================================== */ /* ---- Video grid ---- */ .vmp-wrap{max-width:none!important;margin:0!important;padding:0!important} .vmp-feed{display:grid!important;grid-template-columns:repeat(var(--vm-feed-cols,4),minmax(0,1fr))!important;gap:20px 16px!important} /* ---- Cover-style video card: image fills the card, title floats on a velvet veil ---- */ .vmp-feed-card{position:relative;isolation:isolate;aspect-ratio:var(--vm-card-ratio,4 / 5);border-radius:var(--vm-radius)!important;overflow:hidden;background:var(--vm-surface2)!important;border:1px solid var(--vm-border)!important;box-shadow:var(--vm-shadow)!important;transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s,border-color .4s} .vmp-feed-card:hover{transform:translateY(-4px);border-color:rgba(232,197,138,.55)!important;box-shadow:0 0 0 1px rgba(232,197,138,.35),0 26px 60px -22px rgba(255,61,129,.55)!important} .vmp-feed-card>a:first-child{position:absolute;inset:0;display:block;overflow:hidden} .vmp-feed-card>a:first-child img,.vmp-feed-card>a:first-child>div{display:block;width:100%;height:100%!important;aspect-ratio:auto!important;object-fit:cover;object-position:center;background:linear-gradient(135deg,#2a1d36,#150d1c)!important;filter:saturate(.92) brightness(.93);transition:transform .9s cubic-bezier(.2,.8,.2,1),filter .5s,opacity .25s} .vmp-feed-card:hover>a:first-child img{transform:scale(1.06);filter:saturate(1.12) brightness(1.04)} /* the veil that lifts on hover = the "tease" */ .vmp-feed-card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(12,7,16,.25) 0%,rgba(12,7,16,0) 22%,rgba(12,7,16,.5) 60%,rgba(12,7,16,.95) 100%);transition:opacity .4s} .vmp-feed-card:hover::after{opacity:.82} .vmp-feed-card .body{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:16px 14px 13px!important;pointer-events:none;background:none!important} .vmp-feed-card .body a{pointer-events:auto} .vmp-feed-card h3{margin:0 0 8px!important;font-family:var(--vm-font);font-size:15px!important;font-weight:700;line-height:1.28;color:#fff!important;text-shadow:0 1px 10px rgba(0,0,0,.6);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .vmp-feed-card h3 a{color:#fff!important} .vmp-feed-card h3 a:hover{color:var(--vm-gold)!important} .vmp-feed-card .vmp-muted{font-size:12px;color:rgba(255,255,255,.75)!important} .vm-cc-meta{display:flex;align-items:center;gap:8px;min-width:0} .vm-cc-av{flex:none;width:22px;height:22px;border-radius:50%;background:var(--vm-grad);box-shadow:0 0 0 1.5px var(--vm-gold);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff} .vm-cc-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600} .vm-cc-views{margin-left:auto;flex:none;color:var(--vm-gold);font-weight:700;font-size:11.5px} .vm-play{position:absolute;top:12px;right:12px;z-index:2;width:36px;height:36px;border-radius:50%;background:rgba(12,7,16,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.28);opacity:0;transform:scale(.85);transition:.3s;pointer-events:none} .vm-play::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-35%,-50%);border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent #fff} .vmp-feed-card:hover .vm-play{opacity:1;transform:none} .vmp-feed-card.vm-preview-active .vm-play{opacity:0} @media(hover:none){.vm-play{opacity:.9;transform:none}} /* Hover / scroll preview (theme.js injects