/* ============================================================ WATCHLANE — kids-theme.css Override tema untuk halaman Kids Hub (Light Mode) Aktif ketika ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800&display=swap'); /* ── Override CSS Variables ──────────────────────────────── */ body.theme-kids { --bg: #FFF8F0; --surface-1: #FFFFFF; --surface-2: #FFF0E8; --surface-3: #FFE8DC; --border: rgba(0, 0, 0, 0.06); --border-hi: rgba(0, 0, 0, 0.10); --text-1: #1A1A2E; --text-2: #4A4A6A; --text-3: #8A8AA0; --red: #FF6B6B; --red-glow: rgba(255, 107, 107, 0.12); --red-dim: rgba(255, 107, 107, 0.10); --red-border: rgba(255, 107, 107, 0.30); --red-shadow: 0 0 12px rgba(255, 107, 107, 0.30); --red-shadow-lg: 0 0 28px rgba(255, 107, 107, 0.22); --r-md: 20px; --r-lg: 28px; --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.08); --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.12); } /* ── Base: Background & Teks ─────────────────────────────── */ body.theme-kids { background: var(--bg); color: var(--text-1); } /* ── Font Override ───────────────────────────────────────── */ body.theme-kids { font-family: 'Nunito', 'Inter', sans-serif; } body.theme-kids h1, body.theme-kids h2, body.theme-kids h3, body.theme-kids .kids-title, body.theme-kids .row-header h2, body.theme-kids .kids-hero__title { font-family: 'Nunito', sans-serif; font-weight: 800; } /* ── Navbar (Terang) ─────────────────────────────────────── */ body.theme-kids .navbar { background: #FFFFFF; border-bottom: 2px solid rgba(255, 107, 107, 0.15); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); } body.theme-kids .navbar .logo-dot { color: #FF6B6B; } body.theme-kids .navbar__logo { color: #1A1A2E; font-weight: 800; } body.theme-kids .nav-link { color: var(--text-2); } body.theme-kids .nav-link:hover, body.theme-kids .nav-link.active { color: #FF6B6B; } body.theme-kids .navbar__right .btn-icon { color: var(--text-2); } body.theme-kids .navbar__right .btn-icon:hover { color: #FF6B6B; background: rgba(255, 107, 107, 0.08); } body.theme-kids .navbar__burger span { background: var(--text-1); } body.theme-kids .navbar__search-input { background: #FFF0E8; border: 1px solid rgba(255, 107, 107, 0.20); color: var(--text-1); } body.theme-kids .navbar__mobile-menu { background: #FFFFFF; border-top: 1px solid rgba(255, 107, 107, 0.12); } body.theme-kids .mobile-nav-link { color: var(--text-1); border-bottom-color: rgba(0, 0, 0, 0.05); } /* ── Button Overrides ────────────────────────────────────── */ body.theme-kids .btn-primary { background: #FF6B6B; color: #fff; border-radius: 24px; font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 14px; box-shadow: 0 4px 12px rgba(255, 107, 107, 0.30); } body.theme-kids .btn-primary:hover { background: #FF5252; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(255, 107, 107, 0.40); } body.theme-kids .btn-ghost { border-color: rgba(255, 107, 107, 0.25); color: #FF6B6B; border-radius: 24px; font-family: 'Nunito', sans-serif; font-weight: 700; } body.theme-kids .btn-ghost:hover { background: rgba(255, 107, 107, 0.08); } /* ── Scrollbar ───────────────────────────────────────────── */ body.theme-kids ::-webkit-scrollbar-track { background: #FFF0E8; } body.theme-kids ::-webkit-scrollbar-thumb { background: rgba(255, 107, 107, 0.25); } body.theme-kids ::-webkit-scrollbar-thumb:hover { background: #FF6B6B; } /* ── Kids Hero Section ───────────────────────────────────── */ .kids-hero { background: linear-gradient(135deg, #FFF8F0 0%, #FFE0CC 60%, #FFD5B8 100%); padding: calc(var(--nav-h) + 40px) 40px 48px; text-align: center; position: relative; overflow: hidden; } /* Pola dekoratif latar */ .kids-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 10% 20%, rgba(255,215,0,0.12) 0%, transparent 40%), radial-gradient(circle at 90% 80%, rgba(107,203,119,0.12) 0%, transparent 40%), radial-gradient(circle at 50% 50%, rgba(255,107,107,0.06) 0%, transparent 60%); pointer-events: none; } .kids-hero__emoji { font-size: 56px; display: block; margin-bottom: 16px; position: relative; animation: kidsBounce 2s ease-in-out infinite; } @keyframes kidsBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .kids-hero__title { font-size: clamp(28px, 5vw, 52px); font-weight: 800; color: #1A1A2E; line-height: 1.2; margin-bottom: 12px; position: relative; } .kids-hero__title .highlight { color: #FF6B6B; } .kids-hero__sub { font-size: 16px; color: #4A4A6A; max-width: 480px; margin: 0 auto 28px; position: relative; } /* ── Age Group Cards ─────────────────────────────────────── */ .kids-age-group { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; position: relative; margin-top: 8px; } .age-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 200px; height: 160px; border-radius: var(--r-lg); cursor: pointer; text-decoration: none; transition: transform 0.25s ease, box-shadow 0.25s ease; padding: 16px; text-align: center; position: relative; overflow: hidden; border: none; } .age-card::before { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,0.15); opacity: 0; transition: opacity 0.2s; } .age-card:hover { transform: scale(1.05) translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.15); } .age-card:hover::before { opacity: 1; } .age-card:active { transform: scale(0.97); } .age-card--toddler { background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%); color: #fff; } .age-card--kids { background: linear-gradient(135deg, #FFD93D 0%, #FF9500 100%); color: #1A1A2E; } .age-card--preteen { background: linear-gradient(135deg, #6BCB77 0%, #00A878 100%); color: #fff; } .age-card__emoji { font-size: 44px; line-height: 1; } .age-card__label { font-family: 'Nunito', sans-serif; font-size: 16px; font-weight: 800; line-height: 1.3; } .age-card__sub { font-size: 12px; font-weight: 600; opacity: 0.85; } /* ── Kids Filter Pills ───────────────────────────────────── */ .kids-filter-pills { display: flex; gap: 10px; flex-wrap: wrap; padding: 24px 40px; background: var(--surface-1); border-bottom: 2px solid rgba(255, 107, 107, 0.08); justify-content: center; } .kids-pill { display: flex; align-items: center; gap: 6px; padding: 8px 20px; border-radius: 24px; background: #FFF0E8; border: 2px solid rgba(255, 107, 107, 0.15); color: #4A4A6A; font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; } .kids-pill:hover { background: rgba(255, 107, 107, 0.10); border-color: rgba(255, 107, 107, 0.35); color: #FF6B6B; transform: translateY(-1px); } .kids-pill.active { background: #FF6B6B; border-color: #FF6B6B; color: #fff; box-shadow: 0 4px 12px rgba(255, 107, 107, 0.30); } /* ── Kids Label "✓ Ramah Anak" ───────────────────────────── */ .badge-family-safe { display: inline-flex; align-items: center; gap: 3px; background: rgba(107, 203, 119, 0.15); color: #16A34A; border: 1px solid rgba(107, 203, 119, 0.30); border-radius: 4px; font-family: 'Nunito', sans-serif; font-size: 9px; font-weight: 700; padding: 2px 6px; text-transform: uppercase; letter-spacing: 0.3px; } /* ── Row Header (Kids) ───────────────────────────────────── */ body.theme-kids .row-header h2 { font-size: 20px; font-weight: 800; color: var(--text-1); } body.theme-kids .view-all { color: #FF6B6B; font-weight: 700; font-size: 13px; border: 1px solid rgba(255, 107, 107, 0.25); border-radius: 24px; padding: 4px 14px; } body.theme-kids .view-all:hover { background: rgba(255, 107, 107, 0.08); } /* ── Kids Section ────────────────────────────────────────── */ .kids-section { padding: 28px 40px; border-bottom: 2px solid rgba(255, 107, 107, 0.06); } .kids-section:last-child { border-bottom: none; } /* ── Card Override (Kids) ────────────────────────────────── */ body.theme-kids .card-poster__img-wrap { border-radius: var(--r-md); border: 2px solid transparent; } body.theme-kids .card-poster:hover .card-poster__img-wrap { border-color: rgba(255, 107, 107, 0.35); box-shadow: 0 8px 24px rgba(255, 107, 107, 0.20); } body.theme-kids .card-poster__play { background: #FF6B6B; } body.theme-kids .card-poster__title { color: var(--text-1); font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 13px; } body.theme-kids .card-poster__meta { color: var(--text-3); } body.theme-kids .skeleton-card { background: linear-gradient(90deg, #FFE8DC 25%, #FFF0E8 50%, #FFE8DC 75%); background-size: 200% 100%; } /* ── Carousel Controls (Kids) ────────────────────────────── */ body.theme-kids .row-prev, body.theme-kids .row-next { background: #fff; border: 2px solid rgba(255, 107, 107, 0.20); color: #FF6B6B; box-shadow: 0 2px 8px rgba(0,0,0,0.08); } body.theme-kids .row-prev:hover, body.theme-kids .row-next:hover { background: #FF6B6B; border-color: #FF6B6B; color: #fff; } /* ── Footer (Kids) ───────────────────────────────────────── */ body.theme-kids .site-footer { background: #FFF0E8; border-top: 2px solid rgba(255, 107, 107, 0.10); color: var(--text-1); } body.theme-kids .footer-logo { color: var(--text-1); } body.theme-kids .footer-logo .logo-dot { color: #FF6B6B; } body.theme-kids .footer-tagline { color: var(--text-2); } body.theme-kids .footer-col h4 { color: var(--text-1); } body.theme-kids .footer-col a { color: var(--text-2); } body.theme-kids .footer-col a:hover { color: #FF6B6B; } body.theme-kids .footer-bottom { border-top: 1px solid rgba(255, 107, 107, 0.12); color: var(--text-3); } /* Note Parental Advisory */ .footer-parental-note { text-align: center; padding: 16px 20px; background: rgba(107, 203, 119, 0.08); border: 1px solid rgba(107, 203, 119, 0.18); border-radius: var(--r-md); color: #16A34A; font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 700; margin: 20px 0 0; } /* ── Responsive ──────────────────────────────────────────── */ @media (max-width: 768px) { .kids-hero { padding: calc(var(--nav-h) + 24px) 20px 32px; } .kids-hero__title { font-size: 26px; } .kids-age-group { gap: 12px; } .age-card { width: 150px; height: 130px; } .age-card__emoji { font-size: 36px; } .age-card__label { font-size: 14px; } .kids-filter-pills { padding: 16px; gap: 8px; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; -ms-overflow-style: none; scrollbar-width: none; } .kids-filter-pills::-webkit-scrollbar { display: none; } .kids-pill { flex-shrink: 0; font-size: 13px; padding: 7px 16px; } .kids-section { padding: 20px 16px; } } @media (max-width: 480px) { .age-card { width: calc(50% - 8px); min-width: 130px; height: 120px; } }