* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: Arial, sans-serif;
background: #050505;
color: #f5f5f5;
}
/* =========================
AGE VERIFICATION
========================= */
.age-page {
min-height: 100vh;
background:
radial-gradient(circle at 50% 0%, #252525 0%, #0a0a0a 42%, #000 100%);
}
.age-overlay {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.age-box {
width: min(460px, 100%);
background: rgba(17,17,17,.96);
border: 1px solid #303030;
border-radius: 28px;
padding: 36px 25px;
text-align: center;
box-shadow: 0 25px 90px rgba(0,0,0,.75);
}
.age-logo {
font-size: 64px;
margin-bottom: 10px;
}
.age-badge,
.vip-badge {
display: inline-block;
padding: 6px 12px;
border-radius: 999px;
background: #1d1d1d;
border: 1px solid #383838;
color: #ff5964;
font-size: 11px;
font-weight: 900;
letter-spacing: 1px;
}
.age-box h1 {
margin: 13px 0 20px;
font-size: 28px;
}
.age-box h2 {
margin: 0 0 10px;
}
.age-box p {
color: #aaa;
line-height: 1.7;
}
.age-box small {
display: block;
margin-top: 20px;
color: #666;
line-height: 1.5;
}
.age-buttons {
display: flex;
gap: 12px;
margin-top: 28px;
}
.age-buttons button {
flex: 1;
}
/* =========================
HEADER
========================= */
.site-header {
background: #080808;
border-bottom: 1px solid #242424;
position: sticky;
top: 0;
z-index: 1000;
}
.header-inner {
width: min(1100px, calc(100% - 30px));
margin: auto;
min-height: 75px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
}
.site-header h1 {
margin: 0;
font-size: 22px;
}
.site-header p {
margin: 5px 0 0;
color: #999;
}
.menu-btn {
width: 48px;
height: 44px;
border: 1px solid #333;
border-radius: 12px;
background: #171717;
color: white;
font-size: 23px;
cursor: pointer;
}
.menu-btn:active {
transform: scale(.96);
}
.main-menu {
display: none;
width: min(1100px, calc(100% - 30px));
margin: auto;
padding: 10px 0 15px;
gap: 8px;
}
.main-menu.show {
display: flex;
flex-direction: column;
}
.main-menu a {
text-decoration: none;
color: white;
background: #151515;
border: 1px solid #292929;
border-radius: 12px;
padding: 14px;
transition: .2s;
}
.main-menu a:hover {
background: #202020;
}
/* =========================
CONTAINER
========================= */
.page-container {
width: min(1100px, calc(100% - 30px));
margin: auto;
padding: 30px 0 55px;
}
.page-heading {
text-align: center;
margin-bottom: 28px;
}
.page-heading h2 {
margin: 10px 0;
font-size: 29px;
}
.page-heading p {
color: #999;
margin: 0;
}
.section-icon,
.vip-symbol {
font-size: 48px;
}
.page-label {
display: inline-block;
margin-top: 15px;
padding: 7px 14px;
border-radius: 999px;
background: #151515;
border: 1px solid #303030;
color: #aaa;
font-size: 13px;
font-weight: 700;
}
/* =========================
BUTTONS
========================= */
.main-btn {
display: inline-block;
border: 0;
border-radius: 13px;
padding: 14px 18px;
background: #e63946;
color: white;
font-weight: 800;
text-decoration: none;
cursor: pointer;
transition: .2s;
}
.main-btn:hover {
background: #c92f3b;
transform: translateY(-1px);
}
.secondary-btn {
border: 1px solid #444;
border-radius: 13px;
padding: 14px 18px;
background: #191919;
color: white;
font-weight: 800;
cursor: pointer;
}
.secondary-btn:hover {
background: #242424;
}
.full-btn {
width: 100%;
text-align: center;
}
/* =========================
VIDEO GRID
========================= */
.video-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.video-card {
background: #101010;
border: 1px solid #272727;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 10px 35px rgba(0,0,0,.25);
}
.video-wrapper {
background: #000;
aspect-ratio: 16 / 9;
}
.video-wrapper video {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
background: #000;
}
.video-info {
padding: 14px;
}
.video-info h3 {
margin: 0 0 7px;
font-size: 17px;
}
.video-info p {
margin: 0;
color: #999;
font-size: 13px;
}
/* =========================
MODERN PLAY BUTTON
========================= */
.video-wrapper {
position: relative;
}
.modern-play {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 58px;
height: 58px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,.35);
background: rgba(255,255,255,.94);
color: #111;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
padding-left: 4px;
box-shadow: 0 8px 35px rgba(0,0,0,.6);
pointer-events: none;
}
/* =========================
LOCKED VIDEOS
========================= */
.locked-preview {
position: relative;
aspect-ratio: 16 / 9;
background:
linear-gradient(135deg, #181818, #050505);
overflow: hidden;
}
.locked-preview::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at center, rgba(255,255,255,.07), transparent 55%);
}
.lock-overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,.48);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
text-align: center;
padding: 18px;
}
.lock-icon {
font-size: 29px;
}
.lock-overlay h3 {
margin: 5px 0;
}
.lock-overlay p {
margin: 4px 0 12px;
color: #ccc;
}
.unlock-btn {
border: 0;
border-radius: 12px;
padding: 12px 18px;
background: #e63946;
color: white;
font-weight: 800;
cursor: pointer;
}
.unlock-btn:hover {
background: #c92f3b;
}
.locked-card .modern-play {
z-index: 2;
}
/* =========================
PLAYED FREE VIDEO
========================= */
.played-video-area {
display: none;
margin-bottom: 30px;
}
.played-video-area.show {
display: block;
}
.played-video-box {
background: #101010;
border: 1px solid #292929;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 45px rgba(0,0,0,.4);
}
.played-video-box video {
width: 100%;
display: block;
background: #000;
}
.played-video-title {
padding: 15px;
}
.played-video-title h3 {
margin: 0 0 5px;
}
.played-video-title p {
margin: 0;
color: #999;
}
/* =========================
PAGINATION
========================= */
.pagination {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
margin-top: 30px;
}
.pagination button {
min-width: 43px;
padding: 10px 13px;
border: 1px solid #333;
border-radius: 10px;
background: #151515;
color: white;
cursor: pointer;
font-weight: 700;
transition: .2s;
}
.pagination button:hover {
background: #252525;
}
.pagination .page-active {
background: #e63946;
border-color: #e63946;
}
/* =========================
VIP PLANS
========================= */
.vip-page {
padding-bottom: 70px;
}
.vip-heading {
margin-bottom: 35px;
}
.vip-heading h2 {
font-size: 32px;
}
.plans-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
align-items: stretch;
}
.plan-card {
position: relative;
background:
linear-gradient(180deg, #151515, #0d0d0d);
border: 1px solid #2c2c2c;
border-radius: 24px;
padding: 27px 22px;
text-align: center;
box-shadow: 0 15px 45px rgba(0,0,0,.3);
}
.popular-plan {
border: 2px solid #e63946;
transform: translateY(-7px);
}
.popular-label {
position: absolute;
top: 14px;
right: 14px;
background: #e63946;
padding: 6px 10px;
border-radius: 999px;
font-size: 10px;
font-weight: 900;
}
.plan-icon {
font-size: 45px;
margin-bottom: 7px;
}
.plan-small {
color: #888;
font-size: 10px;
font-weight: 900;
letter-spacing: 1.5px;
}
.plan-card h3 {
margin: 9px 0;
font-size: 24px;
}
.plan-price {
font-size: 29px;
font-weight: 900;
margin-top: 13px;
}
.plan-price span {
font-size: 14px;
color: #999;
}
.plan-duration {
color: #999;
margin-top: 5px;
}
.plan-card ul {
text-align: left;
list-style: none;
padding: 0;
margin: 23px 0;
line-height: 2;
color: #ddd;
}
/* =========================
PAYMENT
========================= */
.payment-page {
max-width: 540px;
}
.payment-box {
background: #101010;
border: 1px solid #292929;
border-radius: 24px;
padding: 22px;
box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.selected-plan {
color: #ff5964;
font-weight: 900;
}
.payment-method {
background: #f7f7f7;
color: #111;
border-radius: 18px;
padding: 20px;
margin: 16px 0;
text-align: center;
border: 1px solid #ddd;
}
.telebirr-card {
border-top: 4px solid #e63946;
}
.mpesa-method {
border: 3px solid #39b54a;
}
.brand-logo {
display: inline-flex;
min-width: 120px;
min-height: 48px;
align-items: center;
justify-content: center;
border-radius: 12px;
margin-bottom: 9px;
font-size: 23px;
font-weight: 900;
}
.telebirr-logo {
color: #e63946;
background: #fff;
}
.mpesa-logo {
color: #fff;
background: #39b54a;
}
.method-name {
display: block;
font-size: 18px;
margin-bottom: 12px;
}
.payment-number {
background: #111;
color: white;
border-radius: 11px;
padding: 13px;
font-size: 21px;
font-weight: 900;
letter-spacing: 1px;
}
.payment-name {
margin-top: 9px;
font-weight: 700;
}
.payment-instruction {
display: flex;
align-items: center;
gap: 12px;
margin: 11px 0;
padding: 12px;
background: #171717;
border: 1px solid #292929;
border-radius: 13px;
}
.payment-instruction > div {
width: 30px;
height: 30px;
flex-shrink: 0;
border-radius: 50%;
background: #e63946;
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
}
.payment-instruction p {
margin: 0;
color: #ccc;
font-size: 13px;
line-height: 1.4;
}
.telegram-payment-btn {
margin-top: 14px;
}
/* =========================
MOBILE
========================= */
@media (max-width: 700px) {
.video-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.video-info {
padding: 10px;
}
.video-info h3 {
font-size: 15px;
}
.video-info p {
font-size: 12px;
}
.plans-grid {
grid-template-columns: 1fr;
}
.popular-plan {
transform: none;
}
.age-buttons {
flex-direction: column;
}
.site-header h1 {
font-size: 19px;
}
.page-heading h2 {
font-size: 25px;
}
.plan-price {
font-size: 27px;
}
}
@media (max-width: 400px) {
.video-grid {
gap: 8px;
}
.modern-play {
width: 46px;
height: 46px;
font-size: 18px;
}
.page-container {
width: calc(100% - 20px);
}
}