/* ========================================================================= nd-tokens.css — SATU-SATUNYA tempat nilai warna/ukuran/durasi hidup. ATURAN KERAS: - Nilai token WAJIB hex / rgba literal. oklch() & color-mix() hanya dipakai sebagai matematika PEMBUAT di luar runtime (invalid-at-computed-value-time = token unset = UI rusak di WebView wrapper v42/v43). - Tidak ada file nd-* lain yang boleh menulis angka warna. - Tidak ada file nd-* lain yang boleh menulis literal durasi/easing. ========================================================================= */ :root{ color-scheme: dark; /* ---------- SURFACE (6 + sunken) ---------- */ --nd-s-sunken:#050607; /* well, track slider, inset */ --nd-s0:#090A0D; /* page background */ --nd-s1:#141518; /* card, rail, panel, footer col */ --nd-s2:#1E1F23; /* row, card hover, input bg */ --nd-s3:#282A2F; /* input focus, chip, row hover */ --nd-s4:#34353B; /* dropdown, menu panel, sheet */ --nd-s5:#42434A; /* popover DI ATAS sheet (provider list item) */ /* ---------- BORDER ---------- */ --nd-line-subtle:#24252A; --nd-line:#34353B; --nd-line-strong:#4D4F57; /* ---------- TEXT ---------- */ --nd-t1:#F6F7F9; --nd-t2:#BBBDC6; --nd-t3:#8F929B; --nd-t4:#666871; /* disabled only — NEVER meaningful text */ --nd-t-on-accent:#FFFFFF; /* ---------- ACCENT (hue 20.9) ---------- */ --nd-accent-100:#FFEBEA; --nd-accent-200:#FFD1CF; --nd-accent-300:#FF9F9E; /* aksen SEBAGAI TEKS di atas s4/s5 */ --nd-accent-400:#FF6D71; /* aksen SEBAGAI TEKS di atas s0..s3 */ --nd-accent-500:#F6364C; /* hover fill / glow */ --nd-accent:#E10037; /* FILL utama */ --nd-accent-700:#BB002B; /* pressed */ --nd-accent-800:#920722; --nd-accent-900:#650D18; --nd-accent-tint:#4D1B1D; /* chip/badge background */ --nd-accent-ink:#FF6D71; /* AKSEN SEBAGAI TEKS, sadar-tema: dipakai link/ label/ikon beraksen. = accent-400 di gelap (6.0-7.2 di s0..s2, 5.2 di s3, 5.15 di accent-tint). JANGAN pakai accent-400 polos sebagai teks: di tema TERANG nilainya #F6364C (3.1-3.8 = GAGAL AA). */ --nd-red-cinema:#E50914; /* BRAND ONLY: wordmark, scrim gradient */ /* ---------- EDITORIAL SECOND ACCENT ---------- */ --nd-gold:#EDC56E; /* eyebrow, rank number, "Pilihan" — MAX 1/viewport */ --nd-gold-tint:#352B12; /* ---------- SEMANTIC ---------- */ --nd-success:#5BCC80; --nd-success-tint:#0E2E1A; --nd-success-solid:#0B7F4C; /* white ink = 5.05 (NOT #0E8F56 = 4.13) */ --nd-warning:#EDB417; --nd-warning-tint:#33280A; --nd-warning-solid:#7A5600; /* white ink = 7.12 */ --nd-danger:#FF645F; --nd-danger-tint:#3A1C1C; --nd-danger-solid:#C21B1B; /* white ink = 5.69 */ --nd-info:#59B6FF; --nd-info-tint:#0F2A3D; --nd-info-solid:#0B63AE; /* white ink = 5.46 */ /* ---------- SCRIM / OVERLAY / GLASS ---------- */ --nd-scrim-weak:rgba(5,6,8,.55); --nd-scrim:rgba(5,6,8,.78); --nd-scrim-strong:rgba(5,6,8,.92); /* Lantai alpha teks-di-atas-poster = .68 → 7.36:1 pada poster PUTIH penuh (kasus terburuk nyata, bukan poster rata-rata). JANGAN taruh teks di zona dengan alpha < .68. */ --nd-poster-scrim:linear-gradient(to top, rgba(5,6,8,.94) 0%, rgba(5,6,8,.80) 26%, rgba(5,6,8,.68) 42%, rgba(5,6,8,0) 76%); --nd-glass:rgba(14,15,18,.86); --nd-glass-blur:saturate(1.25) blur(12px); --nd-hairline-top:inset 0 1px 0 rgba(255,255,255,.055); /* ---------- FOCUS (dual-ring) ---------- */ --nd-focus:#F6F7F9; --nd-focus-halo:#090A0D; /* ---------- SKELETON ---------- */ --nd-skel-base:#191A1E; --nd-skel-sheen:rgba(255,255,255,.055); /* ---------- MONOGRAM PLACEHOLDER (poster gagal/belum muat) ---------- */ --nd-ph-bg:#15161A; --nd-ph-ink:rgba(246,247,249,.14); } :root[data-theme="light"]{ color-scheme: light; --nd-s-sunken:#ECEDF0; --nd-s0:#F9F9FA; /* bukan putih murni → poster tidak "melayang" */ --nd-s1:#FFFFFF; --nd-s2:#F1F2F5; --nd-s3:#E6E8EC; --nd-s4:#DBDCE2; --nd-s5:#CFD1D8; --nd-line-subtle:#DEDFE5; --nd-line:#CDCFD6; --nd-line-strong:#AFB1B9; --nd-t1:#15161B; --nd-t2:#4A4D56; /* satu-satunya muted yang lolos AA di s4/s5 */ --nd-t3:#60636E; --nd-t4:#8C8F99; --nd-t-on-accent:#FFFFFF; --nd-accent-100:#FFF4F3; --nd-accent-200:#FFEBEA; --nd-accent-300:#FFD1CF; --nd-accent-400:#F6364C; /* ikon/garis besar saja — BUKAN teks normal */ --nd-accent-500:#E10037; --nd-accent:#D1002F; /* FILL utama (white ink 5.60) */ --nd-accent-700:#BB002B; /* aksen SEBAGAI TEKS di atas s0..s3 */ --nd-accent-800:#A80027; /* aksen SEBAGAI TEKS di atas s4/s5 (5.11) */ --nd-accent-900:#650D18; --nd-accent-tint:#FFEBEA; --nd-accent-ink:#BB002B; /* = accent-700: 6.67/s1 6.34/s0 5.82/accent-tint 4.88/s4 — lolos AA di semua surface terang */ --nd-red-cinema:#C00711; --nd-gold:#856300; --nd-gold-tint:#FBF0D8; --nd-gold-ink:#7A5A00; /* 5.64 di atas gold-tint */ --nd-success:#00873C; --nd-success-tint:#E1F9E3; --nd-success-ink:#006B30; /* 6.00 di atas success-tint */ --nd-success-solid:#0B7F4C; --nd-warning:#A96400; --nd-warning-tint:#FDF0D5; --nd-warning-ink:#875000; /* 5.85 */ --nd-warning-solid:#7A5600; --nd-danger:#DE2F32; --nd-danger-tint:#FFECEC; --nd-danger-ink:#B01E21; /* 6.05 */ --nd-danger-solid:#C21B1B; --nd-info:#0077CE; --nd-info-tint:#E5F2FF; --nd-info-ink:#005FA6; /* 5.80 */ --nd-info-solid:#0B63AE; --nd-scrim-weak:rgba(21,22,27,.35); --nd-scrim:rgba(21,22,27,.55); --nd-scrim-strong:rgba(21,22,27,.72); /* Scrim poster TETAP GELAP di light mode — teks di atas artwork tidak boleh pernah bergantung tema. Satu keputusan, satu kelas bug hilang. */ --nd-poster-scrim:linear-gradient(to top, rgba(5,6,8,.94) 0%, rgba(5,6,8,.80) 26%, rgba(5,6,8,.68) 42%, rgba(5,6,8,0) 76%); --nd-glass:rgba(255,255,255,.88); --nd-hairline-top:inset 0 1px 0 rgba(255,255,255,.9); --nd-focus:#15161B; --nd-focus-halo:#FFFFFF; --nd-skel-base:#EDEEF1; --nd-skel-sheen:rgba(21,22,27,.05); --nd-ph-bg:#EDEEF1; --nd-ph-ink:rgba(21,22,27,.13); } /* nd-tokens.css (lanjutan) */ :root{ /* ---------- SPACING (basis 4px, dalam rem agar ikut scaling TV) ---------- */ --nd-sp-0:0; --nd-sp-1:0.25rem; --nd-sp-2:0.5rem; --nd-sp-3:0.75rem; --nd-sp-4:1rem; --nd-sp-5:1.25rem; --nd-sp-6:1.5rem; --nd-sp-8:2rem; --nd-sp-10:2.5rem; --nd-sp-12:3rem; --nd-sp-16:4rem; --nd-sp-20:5rem; --nd-gutter:1rem; /* padding-inline halaman; 16px mobile WAJIB */ --nd-grid-gap:0.75rem; --nd-section-gap:var(--nd-sp-10); /* ---------- RADIUS ---------- */ --nd-r-1:4px; /* chip mikro, badge */ --nd-r-2:8px; /* tombol, input, focus-ring default */ --nd-r-3:12px; /* kartu, panel kecil */ --nd-r-4:16px; /* sheet, dropdown, modal */ --nd-r-5:22px; /* pill (tombol provider, tag) */ --nd-r-full:999px; /* ---------- ELEVASI: dark = rim-light + glow, light = shadow nyata ------- */ --nd-e1:0 1px 0 rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.5); --nd-e2:0 1px 0 rgba(255,255,255,.055), 0 6px 16px -6px rgba(0,0,0,.72); --nd-e3:0 1px 0 rgba(255,255,255,.07), 0 14px 32px -12px rgba(0,0,0,.8); --nd-e4:0 1px 0 rgba(255,255,255,.08), 0 28px 64px -20px rgba(0,0,0,.86); /* ---------- MOTION: HANYA DI SINI ADA ANGKA WAKTU ---------- */ --nd-dur-1:110ms; /* micro: hover warna, ikon */ --nd-dur-2:180ms; /* standar: transform kartu, chip */ --nd-dur-3:260ms; /* panel/sheet/indikator */ --nd-dur-4:380ms; /* collapse menu search (nilai PEMILIK) */ --nd-dur-loop-shimmer:1400ms; --nd-dur-loop-marquee:4200ms; --nd-ease-out:cubic-bezier(.22,.61,.36,1); /* nilai PEMILIK, dipertahankan */ --nd-ease-in:cubic-bezier(.55,.06,.68,.19); --nd-ease-spring:cubic-bezier(.34,1.26,.64,1); } :root[data-theme="light"]{ --nd-e1:0 1px 2px rgba(21,22,27,.06); --nd-e2:0 2px 4px rgba(21,22,27,.07), 0 8px 20px -8px rgba(21,22,27,.14); --nd-e3:0 4px 8px rgba(21,22,27,.08), 0 18px 40px -14px rgba(21,22,27,.18); --nd-e4:0 8px 16px rgba(21,22,27,.10), 0 32px 72px -22px rgba(21,22,27,.22); } /* nd-tokens.css, paling bawah */ @media (prefers-reduced-motion: reduce){ :root{ --nd-dur-1:1ms; --nd-dur-2:1ms; --nd-dur-3:1ms; --nd-dur-4:1ms; --nd-dur-loop-shimmer:1ms; --nd-dur-loop-marquee:1ms; --nd-ease-out:linear; --nd-ease-in:linear; --nd-ease-spring:linear; } /* hentikan loop yang tak boleh berulang; daftar TERTUTUP, hanya class milik kita */ .nd-skel::after, .nd-marquee-track, .nd-pv-btn[aria-expanded="true"]{ animation-iteration-count:1; animation-play-state:paused; } html{ scroll-behavior:auto; } .nd-reveal{ opacity:1; transform:none; } } /* --- skala tipografi, container, tinggi bottom-nav --- */ /* nd-tokens.css — fluid via clamp, basis rem supaya ikut scaling TV */ :root{ --nd-fs-3xs:0.6875rem; /* 11px — label bottom-nav, badge mikro */ --nd-fs-2xs:0.75rem; /* 12px — meta, caption */ --nd-fs-xs: 0.8125rem; /* 13px — chip, pager, footer link */ --nd-fs-sm: 0.875rem; /* 14px — judul kartu, body kecil */ --nd-fs-md: 1rem; /* 16px — body */ --nd-fs-lg: clamp(1.0625rem, 0.98rem + 0.35vw, 1.1875rem); /* 17→19 */ --nd-fs-xl: clamp(1.1875rem, 1.06rem + 0.6vw, 1.4375rem); /* 19→23 */ --nd-fs-2xl:clamp(1.375rem, 1.15rem + 1.0vw, 1.875rem); /* 22→30 */ --nd-fs-3xl:clamp(1.625rem, 1.20rem + 1.9vw, 2.625rem); /* 26→42 */ --nd-fs-4xl:clamp(1.875rem, 1.25rem + 2.8vw, 3.5rem); /* 30→56 */ } :root{ --nd-container: 1280px; --nd-container-wide: 1360px; } @media (min-width:1440px){ :root{ --nd-container:1600px; --nd-container-wide:1680px; } } @media (min-width:1920px){ :root{ --nd-container:1840px; --nd-container-wide:1880px; } } @media (min-width:2560px){ :root{ --nd-container:2440px; --nd-container-wide:2480px; } } @media (min-width:3360px){ :root{ --nd-container:3040px; --nd-container-wide:3080px; } } .nd-shell{ max-width:var(--nd-container); margin-inline:auto; padding-inline:var(--nd-gutter); } :root{ --nd-bottomnav-h:62px; --nd-safe-bottom:calc(var(--nd-bottomnav-h) + env(safe-area-inset-bottom,0px) + 10px); } body.nd-ui{ padding-block-end:var(--nd-safe-bottom); } @media (min-width:1024px){ :root{ --nd-safe-bottom:var(--nd-sp-4); } body.nd-ui{ padding-block-end:0; } } /* ⬇ Halaman player: pengecualian WAJIB menang TANPA bergantung urutan berkas. Versi lama ditulis `body.player-page-body .nd-bottomnav` = (0,2,1) — KEMBAR dengan `body.nd-ui .nd-bottomnav{display:grid}` di nd-nav.css, dan nd-nav.css dimuat SESUDAH berkas ini, jadi yang menang justru display:grid: bottom nav tetap nongol di halaman player (terukur display:grid, tinggi 62px, di 390px; elementFromPoint di tengah baris kontrol pemutaran mengembalikan .nd-bn-item, jadi bar itu bukan cuma menutupi — ia MENCURI klik kontrol player). Menambahkan `.nd-ui` ke selektor menaikkannya ke (0,3,1) — satu kelas lebih banyak di — jadi ia mengalahkan SETIAP aturan `body.nd-ui ...` (0,2,1) di berkas mana pun, dimuat lebih awal maupun lebih akhir, tanpa !important. Bar-nya hanya disembunyikan dari layar; markup