.section-title{ position:relative; display:flex; align-items:center; gap:12px; margin:35px 0 25px; padding:18px 24px; background:#0a0c0e; border-radius:18px; font-size:22px; font-weight:700; color:#fff; } /* Светящаяся полоска */ .section-title::before{ content:""; width:5px; height:28px; border-radius:20px; background:linear-gradient(180deg,#ffcc00,#ff7b00); box-shadow:0 0 15px rgba(255,170,0,.5); } /* Лёгкое свечение */ .section-title::after{ content:""; position:absolute; inset:0; border-radius:18px; background:linear-gradient( 90deg, rgba(255,255,255,.03), transparent ); pointer-events:none; } /* Комментарии */ .reviews{ display:flex; flex-direction:column; gap:20px; margin-top:20px; } /* Один комментарий */ .review{ width:100%; background:#0a0c0e; border-radius:14px; padding:20px; box-sizing:border-box; } /* Имя */ .review h3{ margin:0 0 8px; font-size:18px; } /* Дата */ .review .date{ font-size:13px; opacity:.6; margin-bottom:8px; } /* Звёзды */ .review .stars{ margin-bottom:12px; color:#ffd54a; } /* Текст */ .review p{ margin:0; line-height:1.6; } body{ background:#030507; font-family:Inter,sans-serif; color:#d9d9d9; background-image:radial-gradient(circle at top,rgba(0,255,68,.03),transparent 35%); margin:0 } .container{ width:1500px; margin:auto; padding:25px 0 40px } .logo{ color:#39ff46; font-size:29px; font-weight:800; margin-bottom:18px } .top-card{ background:#090b0d; padding:22px; border-radius:4px; display:flex; gap:30px } .poster{ width:370px; height:545px; flex-shrink:0; border-radius:4px; overflow:hidden } .poster img{ width:100%; height:100%; object-fit:cover } .content{ flex:1 } .title{ font-size:52px; font-weight:700; color:#fff; margin-bottom:18px } .description{ font-size:17px; line-height:1.9; color:#bdbdbd; margin-bottom:24px; max-width:950px } .info-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px 70px; margin-bottom:28px } .info{ font-size:17px; line-height:1.9 } .info span{ color:#37ff4d; font-weight:700 } .rating-row{ display:flex; gap:18px; margin-top:8px } .rating{ width:150px; height:62px; border:1px solid #37ff4d; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:29px; font-weight:700; background:#0d1113; color:#fff } .meta-bar{ margin-top:14px; background:linear-gradient(180deg,#0b0e10,#07090b); border-radius:8px; padding:26px 30px; display:flex; align-items:center; gap:32px; border:1px solid #161a1d; box-shadow:0 0 35px rgba(0,0,0,.35); flex-wrap:wrap } .circle{ width:clamp(68px,8vw,92px); height:clamp(68px,8vw,92px); min-width:68px; border-radius:50%; border:4px solid #39ff46; display:flex; align-items:center; justify-content:center; font-size:clamp(26px,3vw,38px); font-weight:800; color:#fff; background:radial-gradient(circle at top,#16231a,#0a0c0e); box-shadow:0 0 35px rgba(57,255,70,.22); flex-shrink:0 } .vote-icons{ display:flex; gap:16px; font-size:18px; color:#fff } .vote-btn{ height:54px; min-width:92px; padding:0 20px; border-radius:6px; background:#111519; border:1px solid #1d2327; display:flex; align-items:center; justify-content:center; gap:10px; cursor:pointer; transition:.22s; font-weight:700 } .vote-btn:hover{ border-color:#39ff46; color:#39ff46; transform:translateY(-2px); box-shadow:0 0 24px rgba(57,255,70,.18) } .cast{ font-size:17px; line-height:1.9 } .cast span{ color:#37ff4d; font-weight:700 } .player{ margin-top:14px; background:#080808; border-radius:4px; overflow:hidden; position:relative } .fake-player{ position:absolute; inset:0; z-index:5; background:#111; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.3s } .fake-player.hide{ opacity:0; visibility:hidden } .fake-player:hover .fake-play-btn{ transform:scale(1.08); box-shadow:0 0 70px rgba(57,255,70,.6) } .fake-play-btn{ width:120px; height:120px; border-radius:50%; border:4px solid #39ff46; background:rgba(0,0,0,.55); position:relative; box-shadow:0 0 45px rgba(57,255,70,.25); transition:.25s } .fake-play-btn:before{ content:''; position:absolute; left:48px; top:35px; border-top:24px solid transparent; border-bottom:24px solid transparent; border-left:38px solid #fff } .fake-player-text{ position:absolute; left:30px; bottom:24px; color:#fff } .fake-player-text h3{ font-size:34px; margin-bottom:8px } .fake-player-text p{ font-size:16px; color:#d4d4d4 } iframe{ display:block; border:none } .section-title{ font-size:28px; font-weight:700; margin:28px 0 18px; color:#fff } .shots{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px } .shot{ height:160px; border-radius:7px; overflow:hidden; background:#111 } .shot img{ width:100%; height:100%; object-fit:cover; filter:brightness(.8) } .review h3{ font-size:19px; margin-bottom:4px; color:#fff } .date{ font-size:13px; color:#888; margin-bottom:12px } .stars{ color:#39ff46; margin-bottom:14px; font-size:17px } .review p{ font-size:15px; line-height:1.7; color:#c6c6c6 } footer{ text-align:center; margin-top:35px; font-size:14px; color:#6f6f6f; line-height:1.8 } .modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.75); display:none; align-items:center; justify-content:center; z-index:9999; padding:20px } .modal-box{ background:#0a0c0e; border:1px solid #1c1f22; border-radius:6px; padding:34px; max-width:460px; width:100%; text-align:center; box-shadow:0 0 40px rgba(0,0,0,.6) } .modal-title{ font-size:28px; font-weight:700; color:#39ff46; margin-bottom:16px } .modal-text{ font-size:16px; line-height:1.8; color:#bdbdbd; margin-bottom:24px } .modal-btn{ height:48px; padding:0 26px; background:#39ff46; color:#000; border:none; border-radius:4px; font-size:15px; font-weight:700; cursor:pointer } a:hover{ border-color:#39ff46; color:#39ff46; box-shadow:0 0 20px rgba(57,255,70,.18) } @media(max-width:1550px){ .container{ width:95% } } @media(max-width:1200px){ .top-card{ flex-direction:column } .shots, .reviews{ grid-template-columns:repeat(2,1fr) } } @media(max-width:700px){ .title{ font-size:36px } .info-grid{ grid-template-columns:1fr } .shots, .reviews{ grid-template-columns:1fr } .poster{ width:100%; height:auto } .fake-player-text h3{ font-size:24px } .fake-play-btn{ width:90px; height:90px } .fake-play-btn:before{ left:36px; top:24px; border-top:18px solid transparent; border-bottom:18px solid transparent; border-left:28px solid #fff } .meta-bar{ padding:20px; gap:18px; align-items:flex-start } .vote-icons{ width:100%; flex-wrap:wrap } .vote-btn{ flex:1; min-width:120px } .cast{ width:100% } } .trailer-box{ margin-top:18px; background:#0a0c0e; padding:24px; border-radius:6px } .trailer-video-player{ width:100%; border-radius:6px; background:#000; display:block; outline:none } .trailer-video-player::-webkit-media-controls-panel{ background:#0b0e10 } .trailer-video-player::-webkit-media-controls-play-button, .trailer-video-player::-webkit-media-controls-volume-slider, .trailer-video-player::-webkit-media-controls-timeline{ filter:hue-rotate(70deg) saturate(3) } /* REVIEW FORM */ .review-form-box{ background:#0d1013; border:1px solid rgba(255,255,255,.05); border-radius:12px; padding:24px; margin-bottom:28px; box-sizing:border-box; width:100%; overflow:hidden; } .review-form-title{ font-size:24px; font-weight:800; color:#fff; margin-bottom:20px; } .review-form{ width:100%; } .review-top{ display:flex; gap:14px; margin-bottom:16px; width:100%; } .review-input, .review-select, .review-textarea{ background:#080909; border:1px solid rgba(255,255,255,.06); border-radius:10px; color:#fff; font-family:'Inter',sans-serif; font-size:15px; outline:none; transition:.2s; box-sizing:border-box; } .review-input{ flex:1; height:54px; padding:0 18px; min-width:0; } .review-select{ width:180px; height:54px; padding:0 16px; cursor:pointer; flex-shrink:0; } .review-textarea{ width:100%; height:150px; padding:16px 18px; resize:vertical; margin-bottom:18px; } .review-input:focus, .review-select:focus, .review-textarea:focus{ border-color:#39ff46; box-shadow:0 0 0 3px rgba(57,255,70,.08); } .review-submit{ height:52px; padding:0 32px; border:none; border-radius:10px; background:#39ff46; color:#000; font-size:15px; font-weight:800; cursor:pointer; transition:.2s; } .review-submit:hover{ transform:translateY(-1px); filter:brightness(1.05); } /* MOBILE */ @media (max-width:768px){ .review-form-box{ padding:18px; border-radius:10px; } .review-top{ flex-direction:column; } .review-select{ width:100%; } .review-submit{ width:100%; } .review-form-title{ font-size:21px; } .review-textarea{ height:130px; } } /* SIMILAR MOVIES */ .similar-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; margin-top:18px; } .similar-card{ display:block; background:#0a0c0e; border:1px solid #15191c; border-radius:8px; overflow:hidden; text-decoration:none; transition:.25s; position:relative; } .similar-card:hover{ transform:translateY(-4px); border-color:#39ff46; box-shadow:0 0 30px rgba(57,255,70,.16); } .similar-poster{ height:320px; overflow:hidden; background:#111; } .similar-poster img{ width:100%; height:100%; object-fit:cover; transition:.3s; } .similar-card:hover img{ transform:scale(1.04); opacity:.92; } .similar-content{ padding:16px; } .similar-name{ font-size:18px; font-weight:700; color:#fff; margin-bottom:10px; line-height:1.4; } .similar-meta{ font-size:14px; color:#9a9a9a; margin-bottom:14px; } .similar-rating{ display:inline-flex; align-items:center; justify-content:center; height:34px; padding:0 14px; border-radius:5px; background:#111519; border:1px solid #39ff46; font-size:14px; font-weight:700; color:#39ff46; } @media(max-width:1200px){ .similar-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:700px){ .similar-grid{ grid-template-columns:1fr; } .similar-poster{ height:260px; } } @media(max-width:520px){ .similar-card{ flex-direction:column; } .similar-poster{ width:100%; min-width:100%; height:260px; aspect-ratio:auto; } .similar-poster img{ width:100%; height:100%; object-fit:cover; display:block; } } /* FAQ */ .faq-box{ display:flex; flex-direction:column; gap:14px; margin-top:18px; } .faq-item{ background:#0a0c0e; border:1px solid #161b1f; border-radius:8px; overflow:hidden; transition:.25s; } .faq-item:hover{ border-color:#39ff46; box-shadow:0 0 24px rgba(57,255,70,.08); } .faq-question{ height:72px; padding:0 24px; display:flex; align-items:center; justify-content:space-between; font-size:18px; font-weight:700; color:#fff; cursor:pointer; user-select:none; } .faq-question span{ font-size:28px; color:#39ff46; transition:.25s; } .faq-answer{ display:none; padding:0 24px 24px; font-size:16px; line-height:1.8; color:#bdbdbd; } .faq-item.active .faq-answer{ display:block; } .faq-item.active .faq-question span{ transform:rotate(45deg); } /* RANDOM MOVIE */ .random-movie-box{ margin-top:30px; background: linear-gradient(180deg,#0c1013,#090b0d); border:1px solid #161b1f; border-radius:10px; padding:34px; display:flex; justify-content:space-between; align-items:center; gap:30px; overflow:hidden; position:relative; } .random-movie-box:before{ content:''; position:absolute; right:-120px; top:-120px; width:320px; height:320px; background:radial-gradient(circle,#39ff4622,transparent 70%); pointer-events:none; } .random-subtitle{ font-size:14px; letter-spacing:.12em; text-transform:uppercase; color:#39ff46; margin-bottom:10px; font-weight:700; } .random-title{ font-size:38px; font-weight:800; color:#fff; margin-bottom:14px; } .random-text{ max-width:720px; font-size:16px; line-height:1.9; color:#bdbdbd; } .random-btn{ display:flex; align-items:center; justify-content:center; gap:10px; height:62px; padding:0 34px; border-radius:8px; background:#39ff46; color:#000; font-weight:800; text-decoration:none; transition:.25s; position:relative; overflow:hidden; } .random-btn:hover{ transform:translateY(-2px); box-shadow:0 0 40px rgba(57,255,70,.35); color:#000; } .random-btn *{ color:#000; } @media(max-width:900px){ .random-movie-box{ flex-direction:column; align-items:flex-start; padding:26px; } .random-title{ font-size:30px; } .random-btn{ width:100%; } } @media(max-width:700px){ .faq-question{ height:auto; padding:22px; font-size:16px; line-height:1.6; align-items:flex-start; gap:14px; } .faq-answer{ padding:0 22px 22px; font-size:15px; } .random-title{ font-size:26px; } .random-text{ font-size:15px; } }