/* ============================================================ ponsel.css · HANYA UNTUK PONSEL. ------------------------------------------------------------ Semua isi berkas ini dikunci dibawah html.hp , jadi tampilan meja dan tablet gak kesenggol sama sekali. Penanda .hp dipasang sama skrip/ponsel.js, yang dimuat paling awal di . Isinya, urut: 01 matiin gerak dan efek berat 02 jarak baca: tulisan dikasih napas 03 bilah menu atas 04 halaman dalam (profil, kontak, 404) 05 borang kontak 06 galeri ponsel 07 beranda ponsel 08 efek gulir pengganti (batang kemajuan, munculan) Yang SENGAJA dibiarkan hidup di ponsel: serat kertas (.kertas), bintik film (#bintik), sama hujan di galeri. Sisanya mati. Muat berkas ini PALING AKHIR diantara berkas gaya. ============================================================ */ /* ============================================================ 01 · GERAK DAN EFEK BERAT DIMATIIN Ini bagian yang bikin Safari ponsel nyerah: tapis blur gede, backdrop-filter, mix-blend-mode selayar penuh, sama animasi yang jalan terus terusan. ============================================================ */ html.hp .jalan span, html.hp .kilau, html.hp .karya .hujan, html.hp .tetes, html.hp .tetes .kilau, html.hp .bp-masuk, html.hp #bp-petunjuk .bp-garis, html.hp .gh-huruf, html.hp .gh-blok, html.hp .gh-gambar { animation: none !important; } /* kilau gradien tetep kelihatan, cuma gak jalan */ html.hp .kilau { background-position: 0 0 !important; } /* kursor buatan, gelembung lensa, lampu sorot, tirai pindah halaman, bola musik: semua gak ada gunanya di layar sentuh */ html.hp #kursor, html.hp #kursorCincin, html.hp .lens, html.hp #sorot, html.hp #jejak, html.hp #tirai, html.hp #nadi, html.hp #nadi-kotak, html.hp .cahaya-kursor, html.hp .percik { display: none !important; } /* tapis dan campuran warna selayar penuh: paling mahal, dibuang */ html.hp .karya .aura, html.hp .karya .halo, html.hp .karya .pantul, html.hp .karya .tirai-warna, html.hp #tetesPanggung, html.hp body.putih::before, html.hp body.putih::after { display: none !important; } html.hp .kabut { display: none !important; } /* serat sama bintik TETEP hidup, cuma dilembutin dikit */ html.hp .kertas { opacity: .28; } html.hp #bintik { opacity: .18; } html.hp body.putih .kertas { opacity: .3; } html.hp body.putih #bintik { opacity: .12; } /* mix-blend-mode di elemen tetap bikin Safari ngegambar ulang selayar tiap gulir. Diganti warna biasa. */ html.hp #atas, html.hp #rel, html.hp #hitung, html.hp .menu-pojok, html.hp .tanda-nama { mix-blend-mode: normal !important; } /* ============================================================ 02 · JARAK BACA Di layar sempit tulisan yang rapat kelihatan sesak. Semua jarak antar tulisan dilebarin, tinggi barisnya dinaikin. ============================================================ */ html.hp body { font-size: 16px; line-height: 1.75; -webkit-text-size-adjust: 100%; } html.hp p { line-height: 1.78; } html.hp .isi p + p { margin-top: 20px; } html.hp .mini { letter-spacing: .22em; font-size: 10px; } html.hp h1, html.hp h2, html.hp h3 { line-height: .96; } /* ============================================================ 03 · BILAH MENU ATAS ============================================================ */ html.hp #atas { padding: 12px 16px calc(12px + 2px); gap: 10px; background: linear-gradient(180deg, rgba(10,12,11,.92) 0%, rgba(10,12,11,.72) 62%, rgba(10,12,11,0) 100%); padding-top: calc(12px + env(safe-area-inset-top, 0px)); transition: transform .28s cubic-bezier(.2,.9,.15,1); will-change: transform; } html.hp body.putih #atas { background: linear-gradient(180deg, rgba(220,226,221,.94) 0%, rgba(220,226,221,.75) 62%, rgba(220,226,221,0) 100%); } html.hp #atas.hp-sembunyi { transform: translateY(-104%); } html.hp #atas .cap img { height: 26px; } html.hp #atas .cap .nama { display: none; } html.hp #atas nav { gap: 16px; } html.hp #atas nav a { font-size: 10px; letter-spacing: .14em; padding: 8px 0; } /* ============================================================ 04 · HALAMAN DALAM · profil, kontak, 404 ============================================================ */ html.hp body.dalam .isi, html.hp .isi { padding: 104px 20px calc(80px + env(safe-area-inset-bottom, 0px)); max-width: none; } html.hp .judul-besar { font-size: clamp(44px, 15vw, 74px); letter-spacing: -.04em; } html.hp .garis-tebal { margin: 26px 0 34px; } html.hp .dua-kolom { grid-template-columns: 1fr; gap: 44px; } html.hp body.dalam .dua-kolom { gap: 44px; } html.hp body.dalam .blok, html.hp .blok { margin-bottom: 54px; } html.hp body.dalam .blok h2, html.hp .blok h2 { font-size: 24px; margin-bottom: 20px; } html.hp .blok p { margin-bottom: 0; } html.hp .blok p + p { margin-top: 20px; } /* cuma paragraf pembuka yang ukurannya diatur inline pakai clamp() */ html.hp .blok p[style*="clamp"] { font-size: 19px !important; line-height: 1.62 !important; } html.hp .jalan { margin: 10px 0 20px; padding: 11px 0; letter-spacing: .2em; } html.hp .jalan span:nth-child(2) { display: none; } html.hp body.dalam .riwayat li, html.hp .riwayat li { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; } html.hp .riwayat li:hover { padding-left: 0; background: none; } html.hp .riwayat .kapan { padding-top: 0; } html.hp .riwayat .apa strong { font-size: 18px; margin-bottom: 10px; } html.hp .riwayat .apa span { line-height: 1.7; } html.hp .tempel-daftar { gap: 10px; margin-top: 20px; } html.hp .tempel-daftar span, html.hp .tempel-daftar.pilih button { padding: 11px 14px; font-size: 10px; } html.hp body.dalam .baris-tautan a, html.hp body.dalam .baris-tautan .salin, html.hp .baris-tautan a, html.hp .baris-tautan .salin { padding: 22px 0; font-size: 22px; gap: 6px; flex-direction: column; align-items: flex-start; } html.hp .baris-tautan a span, html.hp .baris-tautan .salin span { margin-left: 0; font-size: 13px; } html.hp .baris-tautan a:hover { padding-left: 0; } html.hp .potret { border-width: 2px; } html.hp .potret figcaption { font-size: 9px; padding: 7px 10px; } html.hp .tombol { padding: 16px 22px; font-size: 12px; width: 100%; justify-content: center; } html.hp .kaki { margin-top: 54px; padding-top: 26px; gap: 12px 22px; } /* ============================================================ 05 · BORANG KONTAK Dipakai di ponsel dan meja. Bagian meja ada di rancang.css, yang disini cuma ukuran sentuhnya. ============================================================ */ .borang { display: block; margin-top: 26px; } .baris-borang { margin-bottom: 22px; } .baris-borang label { display: block; margin-bottom: 10px; } .borang input, .borang textarea { width: 100%; background: transparent; color: var(--kapur); border: var(--garis) solid rgba(220,226,221,.5); padding: 14px; font-family: var(--cerita); font-size: 16px; transition: border-color var(--cepat); } .borang textarea { resize: vertical; min-height: 130px; } .borang input:focus, .borang textarea:focus { outline: none; border-color: var(--api); } body.putih .borang input, body.putih .borang textarea { border-color: rgba(10,12,11,.4); color: var(--tinta); } .tombol-baris { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } /* dua tombol sebaris kalau kolomnya lebar, numpuk sendiri kalau sempit. nowrap biar tulisan tombol gak kepotong jadi dua baris. */ .tombol-baris .tombol { flex: 1 1 260px; justify-content: center; white-space: nowrap; } .pesan-kirim { margin-top: 16px; min-height: 1.4em; color: var(--kapur-redup); } .pesan-kirim.ada { color: var(--api); } body.putih .pesan-kirim { color: #5B6560; } html.hp .baris-borang { margin-bottom: 26px; } html.hp .borang input, html.hp .borang textarea { padding: 15px; font-size: 16px; } html.hp .borang textarea { min-height: 150px; } html.hp .tombol-baris { flex-direction: column; gap: 14px; } /* arahnya kolom, jadi flex-basis bakal ngatur TINGGI. Dinolin. */ html.hp .tombol-baris .tombol { flex: 0 0 auto; width: 100%; } /* ============================================================ 06 · GALERI PONSEL Satu karya satu layar. Gak ada tetes, gak ada pantulan, gak ada lapisan numpuk. Gambar dipasang UTUH sesuai perbandingan aslinya, gak dipotong jadi kotak. ============================================================ */ html.hp body.galeri { background: var(--dasar); transition: background-color .5s ease; } html.hp #gulung { height: 100vh; height: 100svh; overflow-y: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: y mandatory; scroll-behavior: auto; } html.hp .karya { position: relative; display: block; height: 100vh; height: 100svh; scroll-snap-align: start; scroll-snap-stop: normal; padding: 0; overflow: hidden; } /* hujan: satu lapisan, ngisi seluruh layar, dibelakang karya */ .hp-hujan { position: fixed; left: 0; right: 0; top: -50%; height: 200%; z-index: 0; pointer-events: none; opacity: .11; background-image: repeating-linear-gradient(101deg, transparent 0 40px, rgba(var(--hujan, 220,226,221), .55) 40px 41px, transparent 41px 84px); background-size: auto 200px; animation: hp-turun 1.4s linear infinite; will-change: transform; } @keyframes hp-turun { to { transform: translate3d(0, 200px, 0); } } html.hp .hp-kartu { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 16px; height: 100%; padding: calc(74px + env(safe-area-inset-top, 0px)) 20px calc(26px + env(safe-area-inset-bottom, 0px)); } html.hp .hp-kepala { display: flex; align-items: baseline; gap: 8px; font-family: var(--papan); font-weight: 800; color: var(--aksen); letter-spacing: .18em; font-size: 11px; } html.hp .hp-kepala b { font-size: 22px; letter-spacing: -.02em; font-weight: 800; } html.hp .hp-kepala span { color: var(--kapur-redup); } html.hp .hp-gambar { flex: 0 1 auto; min-height: 0; display: flex; align-items: center; justify-content: flex-start; } /* gambar UTUH: tinggi dan lebar dibatasi kotaknya, perbandingan asli dijaga */ html.hp .hp-gambar img { max-width: 100%; max-height: 100%; min-height: 0; width: auto; height: auto; object-fit: contain; border: 2px solid rgba(220,226,221,.16); opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.9,.15,1); } html.hp .karya.aktif .hp-gambar img { opacity: 1; transform: none; } html.hp .hp-teks { flex: 0 0 auto; } html.hp .hp-teks h2 { font-size: 22px; letter-spacing: -.02em; overflow-wrap: anywhere; opacity: 0; transform: translateY(12px); transition: opacity .45s ease .06s, transform .45s cubic-bezier(.2,.9,.15,1) .06s; } html.hp .hp-media { margin-top: 10px; color: var(--kapur-redup); opacity: 0; transform: translateY(12px); transition: opacity .45s ease .12s, transform .45s cubic-bezier(.2,.9,.15,1) .12s; } html.hp .hp-cerita { margin-top: 14px; font-size: 14px; line-height: 1.7; color: var(--kapur); opacity: 0; transform: translateY(12px); transition: opacity .45s ease .18s, transform .45s cubic-bezier(.2,.9,.15,1) .18s; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } html.hp .karya.aktif .hp-teks h2, html.hp .karya.aktif .hp-media, html.hp .karya.aktif .hp-cerita { opacity: 1; transform: none; } html.hp .karya.aktif .hp-media { opacity: .85; } html.hp .hp-lagi { margin-top: 16px; display: inline-block; border: var(--garis) solid var(--aksen); color: var(--aksen); padding: 10px 14px; font-family: var(--papan); font-weight: 700; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; } /* dibuka: ceritanya utuh. Kartunya sendiri yang digulir, bukan gambarnya yang dipencetin, jadi karya tinggi tetep kebaca. */ html.hp .karya.buka .hp-kartu { justify-content: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; } html.hp .karya.buka .hp-gambar { flex: 0 0 auto; max-height: 38vh; max-height: 38svh; } html.hp .karya.buka .hp-cerita { -webkit-line-clamp: unset; display: block; overflow: visible; max-height: none; } html.hp .karya.buka .hp-lagi { background: var(--aksen); color: var(--tinta); } /* rel angka kanan sama penghitung diganti batang kemajuan */ html.hp #rel, html.hp #hitung { display: none !important; } html.hp .hp-nomor-layar { display: none; } /* ---------- ponsel ditidurin ---------- Tinggi layar tinggal separuh, jadi karyanya pindah ke kiri dan tulisannya duduk disebelahnya. Kalau tetep ditumpuk, gambarnya nyusut jadi seuprit. */ @media (orientation: landscape) and (max-height: 560px) { html.hp .hp-kartu { display: grid; align-content: center; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); column-gap: 24px; row-gap: 8px; padding: calc(58px + env(safe-area-inset-top, 0px)) 20px 18px; } html.hp .hp-kepala { grid-column: 1 / -1; } html.hp .hp-gambar { grid-row: 2; grid-column: 1; min-height: 0; align-items: flex-start; } html.hp .hp-teks { grid-row: 2; grid-column: 2; align-self: center; } html.hp .hp-teks h2 { font-size: 20px; } html.hp .hp-cerita { -webkit-line-clamp: 3; margin-top: 10px; } html.hp .hp-lagi { margin-top: 12px; } html.hp .karya.buka .hp-gambar { max-height: none; } html.hp .karya.buka .hp-kartu { align-content: start; } } /* ============================================================ 07 · BERANDA PONSEL Lukisannya dipasang utuh sebagai satu gambar, gak dipecah jadi lapisan yang terbang. Dibawahnya menu teks besar. ============================================================ */ html.hp #bp-pentas, html.hp .bp-ruang, html.hp #bp-petunjuk, html.hp #bp-daftar, html.hp .kerudung { display: none !important; } html.hp body.beranda { background: var(--tinta); } html.hp .hp-beranda { position: relative; z-index: 10; padding: calc(70px + env(safe-area-inset-top, 0px)) 20px calc(40px + env(safe-area-inset-bottom, 0px)); } html.hp .hp-hero { position: relative; } html.hp .hp-hero img { width: 100%; height: auto; display: block; } html.hp .hp-hero-teks { margin-top: 26px; } html.hp .hp-hero-teks .mini { color: var(--kapur-redup); } html.hp .hp-hero-teks h1 { margin-top: 16px; font-family: var(--papan); font-weight: 800; font-size: clamp(30px, 9vw, 44px); line-height: .96; letter-spacing: -.03em; text-transform: uppercase; } html.hp .hp-hero-teks h1 em { font-family: var(--ukir); font-style: normal; font-weight: 700; -webkit-text-stroke: 1.4px var(--api); color: transparent; display: inline-block; } html.hp .hp-lead { margin-top: 20px; color: var(--kapur-redup); font-size: 16px; } html.hp .hp-pintu { display: block; margin-top: 46px; } html.hp .hp-pintu a { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: baseline; padding: 22px 0; border-top: var(--garis) solid rgba(220,226,221,.28); } html.hp .hp-pintu a:last-child { border-bottom: var(--garis) solid rgba(220,226,221,.28); } html.hp .hp-pintu .no { font-family: var(--papan); font-weight: 700; font-size: 10px; letter-spacing: .22em; color: var(--api); } html.hp .hp-pintu .nama { font-family: var(--papan); font-weight: 800; font-size: 28px; text-transform: uppercase; letter-spacing: -.02em; line-height: 1; } html.hp .hp-pintu .ket { grid-column: 2; margin-top: 8px; font-size: 13px; color: var(--kapur-redup); } html.hp .hp-kaki { margin-top: 48px; padding-top: 24px; border-top: var(--garis) solid rgba(220,226,221,.28); display: flex; flex-wrap: wrap; gap: 10px 20px; font-family: var(--papan); font-weight: 700; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--kapur-redup); } /* ============================================================ 08 · EFEK GULIR PENGGANTI Karena gerak yang lain dimatiin, gulir yang jadi geraknya: batang kemajuan tipis diatas, sama blok yang muncul satu satu. Cuma transform sama opacity, jadi enteng. ============================================================ */ .hp-maju { position: fixed; left: 0; top: 0; height: 2px; width: 100%; z-index: 1000; background: var(--aksen, #FF3B1F); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; } html.hp .hp-naik { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.9,.15,1); } html.hp .hp-naik.nampak { opacity: 1; transform: none; } /* ============================================================ 09 · PENJAGA Kalau pengunjung minta gerak seminimal mungkin, sisa gerak yang tinggal sedikit itu ikut dimatiin juga. ============================================================ */ @media (prefers-reduced-motion: reduce) { html.hp .hp-hujan { animation: none; } html.hp .hp-naik { opacity: 1; transform: none; transition: none; } html.hp .hp-gambar img, html.hp .hp-teks h2, html.hp .hp-media, html.hp .hp-cerita { opacity: 1 !important; transform: none !important; transition: none; } }