/* ============================================================ KinoProfi — Redesign overlay (kp-redesign.css) Pure CSS restyle. NO markup/PHP changes. Loaded LAST in of main.tpl / main2.tpl (?v=N). ROLLBACK: remove the line (templates restored from *.pre-redesign-* backups), or empty this file. Goal: unify accent (indigo, matches glass sidebar), fix broken mobile tab-bar, add vertical rhythm, polish cards & slider. ============================================================ */ :root{ --kp:#6366F1; /* accent (owner pick, matches glass sidebar) */ --kp2:#818CF8; --kp3:#4F46E5; --kp-glow:rgba(99,102,241,.45); --kp-line:rgba(255,255,255,.08); } /* ---------- Sticky header polish ---------- */ .header-fixed{ background:rgba(11,11,20,.82) !important; -webkit-backdrop-filter:saturate(160%) blur(14px); backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid var(--kp-line) !important; box-shadow:0 6px 24px rgba(0,0,0,.35) !important; } .searchbar input[type=text]{ background:rgba(255,255,255,.06) !important; border:1px solid var(--kp-line) !important; color:#F2F3F7 !important; border-radius:10px !important; transition:border-color .2s ease, box-shadow .2s ease; } .searchbar input[type=text]:focus{ border-color:var(--kp) !important; box-shadow:0 0 0 3px rgba(99,102,241,.25) !important; outline:none !important; } .btn-dark{ background:var(--kp) !important; border:0 !important; color:#fff !important; border-radius:10px !important; transition:background .2s ease; } .btn-dark:hover{background:var(--kp3) !important;} /* ---------- Hero scrim (atmospheric backdrop, not loud photo) ---------- */ .header-absolute-box::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background:linear-gradient(180deg,rgba(7,7,14,.25) 0%,rgba(7,7,14,.78) 100%); } .over-slider-menu, .slider-main-box{position:relative; z-index:1;} /* ---------- Tab bar (over-slider-menu) → unified indigo pills ---------- */ .over-slider-menu li a, .over-slider-menu li.bestmovies a, .over-slider-menu li.collect a, .over-slider-menu li.green a{ background-image:none !important; background-color:rgba(255,255,255,.06) !important; border:1px solid var(--kp-line) !important; border-radius:10px !important; text-shadow:none !important; transition:background-color .2s ease, border-color .2s ease, transform .15s ease; } .over-slider-menu li a:hover{ background-color:rgba(99,102,241,.18) !important; border-color:var(--kp) !important; } /* active page tab */ .over-slider-menu li.bestmovies a{ background-color:var(--kp) !important; border-color:var(--kp) !important; box-shadow:0 6px 18px var(--kp-glow) !important; } .over-slider-menu li.bestmovies a:hover{background-color:var(--kp3) !important;} .over-slider-menu li.bestmovies a .name, .over-slider-menu li.bestmovies a i{color:#fff !important;} /* keep chat tab visually distinct (live) but cleaner */ .over-slider-menu li.green a{ background-color:rgba(16,185,129,.16) !important; border-color:rgba(16,185,129,.55) !important; } .over-slider-menu li.green a:hover{background-color:rgba(16,185,129,.30) !important;} /* ---------- Movie cards: frame the POSTER ONLY ---------- */ /* The accent frame lives on the poster image, NOT the whole card, so the title and likes sit OUTSIDE the poster outline. */ .sh-block{ border:0 !important; background:none !important; box-shadow:none !important; border-radius:0 !important; overflow:visible !important; } .poster-box{ border:1px solid var(--kp-line) !important; border-radius:14px !important; overflow:hidden !important; box-shadow:0 6px 18px rgba(0,0,0,.40) !important; transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease !important; } .sh-block:hover .poster-box,.poster:hover .poster-box{ border-color:var(--kp) !important; box-shadow:0 16px 40px rgba(0,0,0,.55), 0 0 0 1px var(--kp) !important; transform:translateY(-5px); } .poster-box img{transition:transform .45s cubic-bezier(.2,.7,.2,1);} .sh-block:hover .poster-box img{transform:scale(1.06);} .title-main a{transition:color .2s ease;} .sh-block:hover .title-main a{color:var(--kp2) !important;} .btn-tosee{ background:var(--kp) !important; border-radius:50% !important; box-shadow:0 8px 24px var(--kp-glow); transition:transform .2s ease, background .2s ease; } .btn-tosee:hover{background:var(--kp3) !important; transform:scale(1.08);} .tosee-poster{ background:rgba(99,102,241,.92) !important; color:#fff !important; border-radius:10px !important; transition:background .2s ease, transform .2s ease; } .tosee-poster:hover{background:var(--kp3) !important; transform:scale(1.06);} /* ---------- GRID cards: title + likes BELOW the framed poster ---------- */ .grid .sh-block{ display:inline-flex !important; flex-direction:column !important; vertical-align:top !important; position:relative !important; height:auto !important; min-height:0 !important; text-align:center; } .grid .sh-block .sh-content{order:0 !important; margin:0 !important;} /* poster narrower than card → real gap between adjacent posters */ .grid .sh-block .poster{ float:none !important; margin:0 !important; width:100% !important; padding:0 11px !important; box-sizing:border-box !important; } .grid .sh-block .poster-box{ width:100% !important; height:auto !important; display:block !important; margin:0 auto !important; } .grid .sh-block .poster-box > img{width:100% !important; height:auto !important; display:block !important;} /* IMDB badge overhangs the top (top:-16) → clipped by the rounded frame's overflow:hidden. Push IMDB + Kinopoisk fully INSIDE the poster top-left. */ .grid .sh-block .imdb{top:8px !important;} .grid .sh-block .kinopoisk{top:33px !important;} /* keep list-only bits hidden so auto-height can't reveal them */ .grid .sh-block .hide-block, .grid .sh-block .sh-description, .grid .sh-block .grid-hide, .grid .sh-block .data-block, .grid .sh-block img.po, .grid .sh-block .fader{display:none !important;} /* title + likes: stacked, centered, OUTSIDE the poster frame */ .grid .sh-block .sh-title-block{ order:1 !important; position:static !important; display:flex !important; flex-direction:column !important; align-items:center !important; gap:8px !important; padding:12px 11px 0 !important; margin:0 !important; } .grid .sh-block .sh-title-block .title-main{ order:0 !important; width:100% !important; margin:0 !important; font-size:14px !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* likes: spaced thumbs, centered, not glued */ .grid .sh-block .rating-block{ order:1 !important; position:static !important; right:auto !important; top:auto !important; left:auto !important; width:auto !important; margin:0 !important; } /* reset the DLE rate widget to clean flex so any digit-count fits (original: a span has fixed width:20px + absolute svg → 2-digit overflows) */ .grid .sh-block .rating-block .main-sliders-rate{ display:inline-flex !important; justify-content:center !important; align-items:center !important; gap:22px !important; height:auto !important; float:none !important; } .grid .sh-block .rating-block .main-sliders-rate a{ display:inline-flex !important; align-items:center !important; gap:6px !important; width:auto !important; height:auto !important; float:none !important; line-height:1 !important; padding:0 !important; position:relative !important; } .grid .sh-block .rating-block .main-sliders-rate a span{ position:static !important; display:inline-flex !important; align-items:center !important; width:auto !important; min-width:0 !important; margin:0 !important; padding:0 !important; gap:5px !important; } .grid .sh-block .rating-block .main-sliders-rate a svg{ position:static !important; flex:0 0 auto !important; width:17px !important; height:17px !important; top:auto !important; left:auto !important; } /* favorite button → poster top-right corner (IMDB/KP badges are top-left) */ .grid .sh-block .favorite-block{ position:absolute !important; top:10px !important; right:20px !important; left:auto !important; z-index:6 !important; margin:0 !important; width:auto !important; } /* ---------- Slider caption legibility ---------- */ .slide .over-black{ background:linear-gradient(180deg,rgba(10,10,20,0) 45%,rgba(10,10,20,.8) 100%) !important; transition:opacity .25s ease; } .slide .quality{ -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border-radius:8px !important; font-weight:600 !important; } /* ---------- Section rhythm + cleaner titles ---------- */ .block_line{height:1px !important; background:var(--kp-line) !important; margin:22px 0 !important; border:0 !important;} .title-column{ background-image:none !important; background:linear-gradient(90deg,rgba(99,102,241,.18),rgba(99,102,241,.04)) !important; border-left:3px solid var(--kp) !important; border-radius:10px !important; color:#F2F3F7 !important; font-weight:700 !important; letter-spacing:.2px; margin-bottom:12px !important; } .title-column a{color:#F2F3F7 !important;} .title-column a:hover{color:var(--kp2) !important;} /* accent on generic links hover across content */ .content a:hover{color:var(--kp2) !important;} /* ---------- Ad safety-net (keep ads gone) ---------- */ .adsv{display:none !important;} a[href*="1win"],a[href*="1wlims"],a[href*="1wnyza"], img[src*="1win"],img[src*="reklama11"],img[src*="onlinetv"], img[src*="roulette.png"],img[src*="/kon.png"]{display:none !important;} /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce){ .sh-block,.poster-box img,.sh-block img,.btn-tosee,.tosee-poster,.over-slider-menu li a{transition:none !important;} .sh-block:hover{transform:none !important;} .sh-block:hover .poster-box img,.sh-block:hover img{transform:none !important;} } /* ============================================================ MOBILE (≤ 948px) — fix broken tab-bar + tame hero ============================================================ */ @media only screen and (max-width:948px){ /* hero photo → dimmed atmospheric backdrop */ body{ background:linear-gradient(rgba(7,7,14,.55),rgba(7,7,14,.93)), url(../images/bg-16.jpg) center -80px no-repeat #000 !important; } /* tab-bar: one clean swipeable row instead of 3 broken rows */ .over-slider-menu{ display:flex !important; flex-wrap:nowrap !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch; gap:8px !important; padding:8px 10px !important; margin:0 !important; scrollbar-width:none; } .over-slider-menu::-webkit-scrollbar{display:none;} .over-slider-menu li{flex:0 0 auto !important; float:none !important; margin:0 !important;} .over-slider-menu li a{ white-space:nowrap; padding:9px 14px !important; display:flex !important; align-items:center; gap:6px; } .over-slider-menu li a .name{font-size:13px !important;} .block_line{margin:16px 0 !important;} }