/* ============================================================ tema-halloween.css — tema musiman layar HOME saja. Butuh: tokens.css (palet --hw-*), home.css, museum.css. Dimuat PALING AKHIR supaya menimpa tanpa !important. CARA KERJA: setiap aturan di sini diawali [data-fh-tema="halloween"], atribut yang dipasang saklar TEMA di kepala index.html. Saklar mati = atribut tidak ada = berkas ini tidak berbuat apa-apa sama sekali. Tidak ada HTML maupun JS yang diubah demi tema: seluruh hiasan adalah pseudo-element, jadi mencabutnya tidak meninggalkan satu node pun. KENAPA HANYA HOME. Layarnya dikunci lewat .fh-screen[data-fh-screen="home"], bukan di :root. Header dan nav bawah tetap warna laut biasa karena keduanya juga berdiri di layar Tas/Market/dst., dan sheet/overlay yang dibuka dari Home tinggal di luar layar ini sehingga ikut tidak tersentuh. WARNA TIER TIDAK DISENTUH. Bingkai panel karakter, pendar panggung, dan badge tier tetap membaca --tier/--t-*: itu informasi (kelas karakter, langkanya ikan), bukan dekorasi. Tema berikutnya (Natal, Imlek, ...) = salin berkas ini jadi tema-.css, ganti awalan atributnya, tambah palet di tokens.css, pasang -nya, lalu ubah satu baris saklar. ============================================================ */ /* ---------- 1. Token: ditimpa HANYA di dalam layar Home ---------- Semua komponen Home sudah membaca token, jadi menukar token di pembungkus layarnya cukup untuk mewarnai panel, chip, slot, rail, dan CTA sekaligus. */ [data-fh-tema="halloween"] .fh-screen[data-fh-screen="home"]{ --pixel-surface:var(--hw-surface); --pixel-raised:var(--hw-raised); --pixel-border:var(--hw-border); --pixel-sunken:var(--hw-sunken); --pixel-muted:var(--hw-muted); --pixel-primary:var(--hw-labu); --pixel-primary-dim:var(--hw-labu-dim); --primary-rgb:var(--hw-labu-rgb); --ink-on-primary:var(--hw-ink-labu); --bg-rgb:var(--hw-malam-rgb); /* Ujung atas dan bawah tembus pandang: latar laut di belakangnya yang terlihat, jadi pertemuan dengan header dan nav jadi gradasi, bukan garis potong dua warna. */ background:linear-gradient(180deg, transparent 0,var(--hw-malam) 110px, var(--hw-malam) calc(100% - 60px),transparent 100%); } /* ---------- 2. Panggung karakter: langit malam + bulan ---------- Bulan dan bintang lapisan gradient, bukan gambar: nol unduhan. Bulannya di kanan atas, di luar badan sprite yang berdiri di tengah, dan pendar tier (.fh-stage__bg) tetap di atasnya. */ [data-fh-tema="halloween"] .fh-screen[data-fh-screen="home"] .fh-stage{ background: radial-gradient(circle at 86% 15%, var(--hw-bulan) 0 16px,var(--hw-bulan-pendar) 17px 30px,transparent 54px), radial-gradient(circle 1.5px at 12% 14%,var(--hw-bintang) 98%,transparent), radial-gradient(circle 1px at 30% 7%, var(--hw-bintang) 98%,transparent), radial-gradient(circle 1.5px at 62% 10%,var(--hw-bintang) 98%,transparent), radial-gradient(circle 1px at 70% 30%,var(--hw-bintang) 98%,transparent), radial-gradient(circle 1px at 8% 40%, var(--hw-bintang) 98%,transparent), radial-gradient(circle 1.5px at 93% 44%,var(--hw-bintang) 98%,transparent), linear-gradient(180deg,var(--hw-langit-atas),var(--hw-langit-bawah)); } /* Aturan :active di home.css mengganti seluruh latar dengan bidang rata; di sini latarnya dipertahankan dan cukup diredupkan. */ [data-fh-tema="halloween"] .fh-screen[data-fh-screen="home"] .fh-stage:active{ filter:brightness(.85); } /* CTA berpendar labu. :active ditulis ulang karena aturan di atasnya lebih berat dari .fh-btn:active dan akan menahan bayangannya. */ [data-fh-tema="halloween"] .fh-screen[data-fh-screen="home"] .fh-cta{ box-shadow:0 3px 0 var(--pixel-primary-dim), 0 0 18px rgba(var(--hw-labu-rgb),.35); } [data-fh-tema="halloween"] .fh-screen[data-fh-screen="home"] .fh-cta:active{ box-shadow:0 0 10px rgba(var(--hw-labu-rgb),.25); } /* ---------- 3. Hiasan bergambar: kelelawar, sarang, labu ---------- Gambarnya SVG piksel sebagai MASK, warnanya dari token lewat background. Mask, bukan background-image, supaya hex tetap cuma ada di tokens.css (isi SVG hitam murni, cuma bentuknya yang dipakai). Dibungkus @supports: browser tanpa mask akan menggambar pseudo-element ini sebagai kotak warna rata yang menutupi panggung. Lebih baik tanpa hiasan daripada panggung tertutup. */ @supports (mask-size:1px) or (-webkit-mask-size:1px){ /* KELELAWAR — menggantikan garis pindai di ::before panggung. Ukurannya kelipatan bulat 13x6 (viewBox aslinya) supaya pikselnya tetap tajam. */ [data-fh-tema="halloween"] .fh-screen[data-fh-screen="home"] .fh-stage::before{ background:var(--hw-kelelawar); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 6' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1H0zM12 0h1v1h-1zM0 1h2v1H0zM5 1h1v1H5zM7 1h1v1H7zM11 1h2v1h-2zM0 2h3v1H0zM4 2h5v1H4zM10 2h3v1h-3zM0 3h13v1H0zM1 4h3v1H1zM5 4h3v1H5zM9 4h3v1H9zM2 5h1v1H2zM6 5h1v1H6zM10 5h1v1h-1z'/%3E%3C/svg%3E") 14% 9%/39px 18px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 6' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1H0zM12 0h1v1h-1zM0 1h2v1H0zM5 1h1v1H5zM7 1h1v1H7zM11 1h2v1h-2zM0 2h3v1H0zM4 2h5v1H4zM10 2h3v1h-3zM0 3h13v1H0zM1 4h3v1H1zM5 4h3v1H5zM9 4h3v1H9zM2 5h1v1H2zM6 5h1v1H6zM10 5h1v1h-1z'/%3E%3C/svg%3E") 87% 15%/26px 12px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 6' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1H0zM12 0h1v1h-1zM0 1h2v1H0zM5 1h1v1H5zM7 1h1v1H7zM11 1h2v1h-2zM0 2h3v1H0zM4 2h5v1H4zM10 2h3v1h-3zM0 3h13v1H0zM1 4h3v1H1zM5 4h3v1H5zM9 4h3v1H9zM2 5h1v1H2zM6 5h1v1H6zM10 5h1v1h-1z'/%3E%3C/svg%3E") 27% 27%/13px 6px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 6' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1H0zM12 0h1v1h-1zM0 1h2v1H0zM5 1h1v1H5zM7 1h1v1H7zM11 1h2v1h-2zM0 2h3v1H0zM4 2h5v1H4zM10 2h3v1h-3zM0 3h13v1H0zM1 4h3v1H1zM5 4h3v1H5zM9 4h3v1H9zM2 5h1v1H2zM6 5h1v1H6zM10 5h1v1h-1z'/%3E%3C/svg%3E") 14% 9%/39px 18px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 6' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1H0zM12 0h1v1h-1zM0 1h2v1H0zM5 1h1v1H5zM7 1h1v1H7zM11 1h2v1h-2zM0 2h3v1H0zM4 2h5v1H4zM10 2h3v1h-3zM0 3h13v1H0zM1 4h3v1H1zM5 4h3v1H5zM9 4h3v1H9zM2 5h1v1H2zM6 5h1v1H6zM10 5h1v1h-1z'/%3E%3C/svg%3E") 87% 15%/26px 12px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 6' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1H0zM12 0h1v1h-1zM0 1h2v1H0zM5 1h1v1H5zM7 1h1v1H7zM11 1h2v1h-2zM0 2h3v1H0zM4 2h5v1H4zM10 2h3v1h-3zM0 3h13v1H0zM1 4h3v1H1zM5 4h3v1H5zM9 4h3v1H9zM2 5h1v1H2zM6 5h1v1H6zM10 5h1v1h-1z'/%3E%3C/svg%3E") 27% 27%/13px 6px no-repeat; animation:fh-hw-melayang 3.6s ease-in-out infinite alternate; } /* SARANG LABA-LABA di dua sudut atas halaman karakter. Ditaruh di halaman dek, bukan di .fh-chr: kedua pseudo .fh-chr sudah dipakai bingkai dan siku tier. z-index di atas bingkai (3) supaya benangnya melintasi siku, seperti sarang sungguhan. */ [data-fh-tema="halloween"] #fh-deck-page-char{position:relative} [data-fh-tema="halloween"] #fh-deck-page-char::before{ content:'';position:absolute;inset:1px;z-index:4; pointer-events:none; border-radius:var(--r-lg); background:var(--hw-sarang); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M0 0L40 0M0 0L0 40M0 0L34 34M0 0L36 16.8M0 0L16.8 36M10 0L9.1 4.2L7.1 7.1L4.2 9.1L0 10M20 0L18.1 8.5L14.1 14.1L8.5 18.1L0 20M30 0L27.2 12.7L21.2 21.2L12.7 27.2L0 30' fill='none' stroke='%23000' stroke-width='.9'/%3E%3C/svg%3E") left top/48px 48px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M0 0L40 0M0 0L0 40M0 0L34 34M0 0L36 16.8M0 0L16.8 36M10 0L9.1 4.2L7.1 7.1L4.2 9.1L0 10M20 0L18.1 8.5L14.1 14.1L8.5 18.1L0 20M30 0L27.2 12.7L21.2 21.2L12.7 27.2L0 30' transform='matrix(-1 0 0 1 40 0)' fill='none' stroke='%23000' stroke-width='.9'/%3E%3C/svg%3E") right top/36px 36px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M0 0L40 0M0 0L0 40M0 0L34 34M0 0L36 16.8M0 0L16.8 36M10 0L9.1 4.2L7.1 7.1L4.2 9.1L0 10M20 0L18.1 8.5L14.1 14.1L8.5 18.1L0 20M30 0L27.2 12.7L21.2 21.2L12.7 27.2L0 30' fill='none' stroke='%23000' stroke-width='.9'/%3E%3C/svg%3E") left top/48px 48px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M0 0L40 0M0 0L0 40M0 0L34 34M0 0L36 16.8M0 0L16.8 36M10 0L9.1 4.2L7.1 7.1L4.2 9.1L0 10M20 0L18.1 8.5L14.1 14.1L8.5 18.1L0 20M30 0L27.2 12.7L21.2 21.2L12.7 27.2L0 30' transform='matrix(-1 0 0 1 40 0)' fill='none' stroke='%23000' stroke-width='.9'/%3E%3C/svg%3E") right top/36px 36px no-repeat; } /* LABU di kedua sisi nama karakter. Menempel ke .fh-chr__name karena blok itulah yang sudah berdiri di dasar panggung, di atas kabut ::after. z-index:-1 di dalam konteks tumpukan nama (z-index:2) = di belakang teks nama, di depan kabut. Lubang wajahnya memang transparan: yang tampak di baliknya langit gelap, dan itu yang membuatnya terbaca sebagai jack-o'-lantern. Ukuran kelipatan bulat 11x9. */ [data-fh-tema="halloween"] .fh-screen[data-fh-screen="home"] .fh-chr__name::before{ content:'';position:absolute;left:10px;right:10px;bottom:-4px;height:27px; z-index:-1;pointer-events:none; background:linear-gradient(180deg,var(--hw-labu),var(--hw-labu-gelap)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 9' shape-rendering='crispEdges'%3E%3Cpath d='M5 0h1v1H5zM2 1h7v1H2zM1 2h9v1H1zM0 3h3v1H0zM4 3h3v1H4zM8 3h3v1H8zM0 4h2v1H0zM5 4h1v1H5zM9 4h2v1H9zM0 5h11v1H0zM0 6h2v1H0zM3 6h1v1H3zM5 6h1v1H5zM7 6h1v1H7zM9 6h2v1H9zM1 7h9v1H1zM3 8h5v1H3z'/%3E%3C/svg%3E") left bottom/33px 27px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 9' shape-rendering='crispEdges'%3E%3Cpath d='M5 0h1v1H5zM2 1h7v1H2zM1 2h9v1H1zM0 3h3v1H0zM4 3h3v1H4zM8 3h3v1H8zM0 4h2v1H0zM5 4h1v1H5zM9 4h2v1H9zM0 5h11v1H0zM0 6h2v1H0zM3 6h1v1H3zM5 6h1v1H5zM7 6h1v1H7zM9 6h2v1H9zM1 7h9v1H1zM3 8h5v1H3z'/%3E%3C/svg%3E") 38px bottom/22px 18px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 9' shape-rendering='crispEdges'%3E%3Cpath d='M5 0h1v1H5zM2 1h7v1H2zM1 2h9v1H1zM0 3h3v1H0zM4 3h3v1H4zM8 3h3v1H8zM0 4h2v1H0zM5 4h1v1H5zM9 4h2v1H9zM0 5h11v1H0zM0 6h2v1H0zM3 6h1v1H3zM5 6h1v1H5zM7 6h1v1H7zM9 6h2v1H9zM1 7h9v1H1zM3 8h5v1H3z'/%3E%3C/svg%3E") right bottom/22px 18px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 9' shape-rendering='crispEdges'%3E%3Cpath d='M5 0h1v1H5zM2 1h7v1H2zM1 2h9v1H1zM0 3h3v1H0zM4 3h3v1H4zM8 3h3v1H8zM0 4h2v1H0zM5 4h1v1H5zM9 4h2v1H9zM0 5h11v1H0zM0 6h2v1H0zM3 6h1v1H3zM5 6h1v1H5zM7 6h1v1H7zM9 6h2v1H9zM1 7h9v1H1zM3 8h5v1H3z'/%3E%3C/svg%3E") left bottom/33px 27px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 9' shape-rendering='crispEdges'%3E%3Cpath d='M5 0h1v1H5zM2 1h7v1H2zM1 2h9v1H1zM0 3h3v1H0zM4 3h3v1H4zM8 3h3v1H8zM0 4h2v1H0zM5 4h1v1H5zM9 4h2v1H9zM0 5h11v1H0zM0 6h2v1H0zM3 6h1v1H3zM5 6h1v1H5zM7 6h1v1H7zM9 6h2v1H9zM1 7h9v1H1zM3 8h5v1H3z'/%3E%3C/svg%3E") 38px bottom/22px 18px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 9' shape-rendering='crispEdges'%3E%3Cpath d='M5 0h1v1H5zM2 1h7v1H2zM1 2h9v1H1zM0 3h3v1H0zM4 3h3v1H4zM8 3h3v1H8zM0 4h2v1H0zM5 4h1v1H5zM9 4h2v1H9zM0 5h11v1H0zM0 6h2v1H0zM3 6h1v1H3zM5 6h1v1H5zM7 6h1v1H7zM9 6h2v1H9zM1 7h9v1H1zM3 8h5v1H3z'/%3E%3C/svg%3E") right bottom/22px 18px no-repeat; } } @keyframes fh-hw-melayang{ from{transform:translateY(0)} to{transform:translateY(-6px)} } @media (prefers-reduced-motion:reduce){ [data-fh-tema="halloween"] .fh-screen[data-fh-screen="home"] .fh-stage::before{animation:none} }