/* ===========================================================================
Gerak
---------------------------------------------------------------------------
Berkas TERSENDIRI, dimuat kerangka pada setiap halaman.
Semula blok ini berada di opd.css, dan itu cacat dengan dua lapis: opd.css
tidak dimuat halaman berita, DAN hover kartunya masih dibatasi ".o-badan"
sehingga bahkan bila berkasnya dimuat, kartu berita di luar halaman depan
satuan kerja tetap diam. Keduanya gagal tanpa galat — hover yang tidak terjadi
tidak melaporkan apa pun.
Menaruh seluruh gerak di satu berkas juga membuat janji reduced-motion dapat
diperiksa: satu berkas untuk dibaca, bukan tersebar di tiga.
Yang dihindari sepanjang berkas ini: gerak yang MEMINDAHKAN isi setelah
halaman terbaca. Kartu yang masuk perlahan saat digulir terlihat modern pada
tangkapan layar, tetapi memindahkan sasaran yang sedang hendak ditekan orang.
Karena itu gerak di sini hampir seluruhnya menanggapi tetikus, dan yang
berjalan sendiri hanya kilau — yang tidak menggeser apa pun.
Seluruhnya tunduk pada prefers-reduced-motion lewat aturan menyeluruh di
portal.css. Aturan itu memakai pemilih * berikut !important, sehingga ia
menang tanpa bergantung urutan pemuatan — dan itulah sebabnya berkas ini aman
dimuat setelahnya.
=========================================================================== */
/* Kilau pelan menyapu kepala berfoto. Diberi warna putih tipis dan bergerak
sangat lambat: kepala satuan kerja adalah bidang besar, dan gerak cepat di
bidang sebesar itu mengganggu alih-alih menghidupkan.
Rasio kontrasnya sudah ikut dihitung — lihat TemaOpd. */
.o-kepala::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(105deg,
transparent 30%, rgb(255 255 255 / 8%) 45%,
rgb(255 255 255 / 14%) 50%, rgb(255 255 255 / 8%) 55%, transparent 70%);
background-size: 260% 100%;
background-repeat: no-repeat;
animation: o-kilau 14s ease-in-out infinite;
}
@keyframes o-kilau {
0%, 12% { background-position: 150% 0; }
55%, 100% { background-position: -80% 0; }
}
/* --- Kartu: satu tanggapan untuk seluruh portal --------------------------- */
/* Kartu berita, berita utama, dan kartu galeri satuan kerja menanggapi sama
persis dengan kartu beranda: naik 3px dan bayangannya menebal — selama
--gerak-kartu dengan lengkung --lentur.
Sebelumnya ketiganya berbeda-beda tanpa alasan yang bertahan: kartu beranda
naik 3px dalam 200ms berlengkung --lentur, kartu berita naik 2px dalam 180ms
berlengkung `ease`, berita utama naik 1px dalam 200ms. Bedanya kecil satu per
satu, tetapi pengunjung yang berpindah dari beranda ke halaman berita
merasakannya sebagai halaman yang "beratnya" berbeda — tanpa pernah bisa
menunjuk apa yang berbeda.
Tepinya TIDAK ikut berubah. Dulu ia menguat ke --utama saat disentuh, dan
itu dua hal sekaligus yang saling mengganggu: garis berwarna yang muncul di
sekeliling kartu menarik mata ke TEPINYA, padahal yang sedang ditawarkan
kartu itu adalah isinya. Naik dan berbayang sudah cukup mengatakan "ini
dapat ditekan", dan keduanya tidak menggambar apa pun yang baru.
Karena itu border-color juga dilepas dari daftar peralihan di bawah:
mencantumkan sifat yang tidak pernah berubah hanya menyisakan petunjuk palsu
bagi yang membacanya nanti.
Yang sengaja ditinggalkan: pengecualian 1px untuk berita utama, yang dulu
beralasan "makin besar bidangnya, makin besar perpindahan yang sama terasa".
Alasan itu benar untuk bidang yang naik SENDIRI, tetapi kartu utama berdiri
satu barisan dengan kartu biasa di halaman yang sama — dan dua kartu yang
naik dengan tinggi berbeda saat disentuh berurutan lebih mengganggu daripada
satu kartu besar yang naik 3px.
3px tetap aman meski kini seluruh permukaan kartu dapat ditekan: naiknya
MENDEKATI kursor, dan sasarannya seluas kartu — jadi tidak ada keadaan di
mana sasarannya tergeser keluar dari bawah kursor. */
.b-kartu,
.b-utama,
.o-galeri-butir {
transition: transform var(--gerak-kartu) var(--lentur),
box-shadow var(--gerak-kartu) ease;
}
.b-kartu:hover,
.b-utama:hover,
.o-galeri-butir:hover,
.b-kartu:has(h3 a:focus-visible),
.b-utama:has(h2 a:focus-visible) {
transform: translateY(-3px);
box-shadow: var(--bayang-2);
}
/* Ditekan, kartunya turun sebagian — tanggapan yang sama dengan .kartu di
beranda, dan satu-satunya tanda bahwa tekanannya sudah diterima pada jeda
sebelum halaman berikutnya tampil. */
.b-kartu:active,
.b-utama:active,
.o-galeri-butir:active { transform: translateY(-1px); }
/* Gambarnya membesar sedikit di dalam bingkainya. Bingkainya tidak berubah
ukuran, jadi tata letak di sekitarnya tidak ikut bergeser.
Lengkungnya --lentur, sama dengan ikon kartu beranda yang membesar 1.07 —
satu-satunya gerak "membesar" lain di portal ini. */
.b-kartu .b-gambar img,
.b-utama .b-gambar img,
.o-galeri-butir img {
transition: transform var(--gerak-lambat) var(--lentur);
}
.b-kartu:hover .b-gambar img,
.b-utama:hover .b-gambar img,
.o-galeri-butir:hover img { transform: scale(1.035); }
/* --- Huruf membesar, bukan tergaris -------------------------------------- */
/* Judul kartu dan butir daftar membesar sedikit saat disentuh, menggantikan
garis bawah yang dulu muncul di sana.
Garis bawah yang muncul-hilang terbaca sebagai "ada sesuatu yang DITAMBAHKAN
pada tulisannya"; pembesaran terbaca sebagai "tulisannya sendiri
menanggapi" — dan yang kedua itulah yang sedang terjadi.
transform, BUKAN font-size. font-size mengubah tata letak: judul dua baris
bisa menjadi tiga saat disentuh, dan karena kartu sebaris disamakan tingginya
oleh grid, SELURUH kartu di barisnya ikut memanjang. transform hanya
melukis ulang, tidak mengukur ulang apa pun.
transform-origin kiri-atas, bukan tengah: dari tengah, tepi kiri tulisannya
bergeser keluar dan tidak lagi sebaris dengan tanggal di bawahnya — dan
pergeseran sekecil itu justru terlihat sebagai salah pasang.
1.02, dan tidak lebih. Kartu memakai overflow: hidden dan bantalan kanannya
14px; pada judul selebar 250px, 1.02 menambah 5px — masih di dalam bantalan
itu. 1.05 akan menambah 12px dan memotong huruf terakhir.
Garis bawah pada tulisan MENGALIR di dalam artikel tidak disentuh sama
sekali: di sana garis bawah bukan tanggapan sentuhan, melainkan satu-satunya
penanda bahwa sepotong kalimat adalah tautan. Begitu pula mode "Garis bawah
tautan" di panel aksesibilitas, yang memang ada untuk memaksanya muncul. */
.b-kartu h3 a,
.b-utama-isi h2 a {
display: block;
transform-origin: left top;
}
.b-kartu h3 a,
.b-utama-isi h2 a,
.b-daftar a,
.b-batang-nama,
.a-sisi-opd-teks > span,
.a-jejak a,
.a-lain-semua {
transform-origin: left top;
transition: transform var(--gerak-kartu) var(--lentur),
color var(--gerak-kartu) ease,
background var(--gerak-kartu) ease,
border-color var(--gerak-kartu) ease;
}
/* Judulnya menanggapi sentuhan pada KARTUNYA, bukan hanya pada hurufnya:
seluruh kartu kini satu sasaran tekan, jadi tanggapannya pun harus mengikuti
seluruh kartu. Judul yang diam saat kartunya disentuh membuat kartunya
terasa hanya "terangkat" tanpa memberi tahu ke mana ia menuju.
:focus-visible disertakan setara :hover, mengikuti kebiasaan kartu beranda
yang sudah lebih dulu begitu. Sejak seluruh permukaan kartu dapat ditekan,
yang datang lewat papan tuntun harus melihat kartu yang sama menyala —
bukan hanya cincin fokus di sekeliling barisan hurufnya. */
.b-kartu:hover h3 a,
.b-kartu h3 a:focus-visible,
.b-utama:hover .b-utama-isi h2 a,
.b-utama-isi h2 a:focus-visible,
.b-daftar a:hover,
.b-batang a:hover .b-batang-nama,
.a-sisi-opd:hover .a-sisi-opd-teks > span,
.a-jejak a:hover,
.a-lain-semua:hover { transform: scale(1.02); }
/* Tombol dan pil menanggapi dengan naik 1px. */
.o-tombol, .o-nav-butir, .o-semua { transition: transform var(--gerak-cepat) var(--lentur), background var(--gerak-cepat) ease, color var(--gerak-cepat) ease; }
.o-tombol:hover { transform: translateY(-1px); }
/* Garis bawah tumbuh dari kiri pada butir navigasi, alih-alih muncul sekaligus.
Dipakai lebar, bukan opasitas: garis yang memudar masuk mudah tertukar dengan
butir yang sedang aktif. */
.o-nav-butir { position: relative; }
.o-nav-butir::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -3px;
height: 3px;
background: var(--utama-kuat);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--gerak-kartu) var(--lentur);
}
.o-nav-butir:hover::after { transform: scaleX(1); }
.o-nav-butir[aria-current="page"]::after { transform: scaleX(1); }
/* Kartu profil muncul sekali saat halaman dibuka. Hanya SATU unsur yang
dianimasikan, dan hanya di puncak halaman: pengunjung belum menggulir, jadi
tidak ada sasaran tekan yang bergeser. */
.o-profil-kartu { animation: o-muncul 420ms ease-out both; }
@keyframes o-muncul {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
/* --- Halaman berita -------------------------------------------------------
Unsur di bawah ini hanya ada di halaman berita, dan sebelumnya tidak punya
gerak sama sekali: seluruh blok gerak dahulu memakai awalan .o- milik halaman
satuan kerja. Akibatnya daftar berita terasa mati dibandingkan halaman
berandanya, padahal keduanya bersebelahan dalam satu satuan kerja.
=========================================================================== */
/* Kilau yang sama pada kepala biru halaman berita. Bidangnya lebih pendek
daripada kepala satuan kerja, jadi kilaunya ikut lebih cepat — sapuan 14 detik
pada bidang setinggi ini terasa nyaris tak bergerak. */
.b-judul { position: relative; overflow: hidden; }
.b-judul > * { position: relative; }
.b-judul::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(105deg,
transparent 32%, rgb(255 255 255 / 7%) 46%,
rgb(255 255 255 / 12%) 50%, rgb(255 255 255 / 7%) 54%, transparent 68%);
background-size: 250% 100%;
background-repeat: no-repeat;
animation: o-kilau 11s ease-in-out infinite;
}
/* --- Foto utama membuka --------------------------------------------------- */
/* Tinggi foto sampul berpindah halus antara keadaan terbatas dan seukuran
aslinya. Keadaannya diatur berkas berita.css; di sini hanya perpindahannya.
Ini SATU-SATUNYA gerak di berkas ini yang memindahkan isi di bawahnya, dan
itu melanggar janji di kepala berkas. Disengaja, dengan batas yang jelas:
- Pemicunya tetikus atau sakelar, bukan gulungan dan bukan pewaktu. Tidak
ada yang berpindah tanpa pengunjung memintanya.
- Yang berpindah ada di BAWAH kursor-nya, bukan di bawahnya. Kekhawatiran
di kepala berkas adalah sasaran tekan yang bergeser dari bawah kursor;
di sini kursor berada di atas fotonya, dan yang bergeser adalah tulisan
di bawah foto — yang tidak sedang hendak ditekan siapa pun.
- Fotonya paling atas di halaman, jadi tidak ada tautan di ATASNYA yang
ikut bergeser.
Kalau kelak diputuskan bahwa perpindahan ini tetap terlalu jauh, yang
dilepas cukup satu baris di sini: keadaan tertutup dan terbukanya tetap
bekerja, hanya melompat alih-alih meluncur.
prefers-reduced-motion memaksa durasinya 0,01ms lewat aturan menyeluruh di
portal.css, jadi yang tidak menghendaki gerak mendapat pergantian seketika —
bukan gerak yang lebih pelan. */
.a-hero-bingkai { transition: height var(--gerak-lambat) var(--lentur); }
.a-hero-bingkai img { transition: transform var(--gerak-lambat) var(--lentur); }
/* Dipasang portal.js hanya selama satu bingkai, saat ia mengganti nilai
darurat tinggi foto dengan hasil pengukuran sebenarnya. Tanpa ini,
penggantian itu ikut berperalihan dan fotonya terlihat bergeser sendiri satu
kali setiap halaman dibuka — gerak yang berjalan sendiri dan memindahkan
isi, tepat yang dihindari sepanjang berkas ini. */
.a-hero-diam .a-hero-bingkai,
.a-hero-diam .a-hero-bingkai img { transition: none; }
/* Kepingnya menegas saat fotonya disentuh, supaya jelas bahwa fotonya sendiri
dapat ditekan — tanpa itu, kepingnya terbaca sebagai hiasan sudut. */
.a-hero-keping { transition: background var(--gerak-cepat) ease, border-color var(--gerak-cepat) ease; }
.a-hero-alih:hover .a-hero-keping { background: rgb(6 12 18 / 78%); border-color: rgb(255 255 255 / 55%); }
/* --- Kilau muat pada penampung gambar ------------------------------------- */
/* Kilau yang menyapu penampung gambar SELAMA gambarnya belum tampil.
Inilah satu-satunya bentuk "kerangka memuat" yang jujur di halaman yang
dirakit di server: tulisannya sudah tiba lengkap bersama HTML-nya, jadi
menyelubunginya dengan kerangka berarti menyembunyikan isi yang sudah ada —
halaman jadi terasa lebih lambat, bukan lebih cepat. Yang benar-benar masih
dalam perjalanan hanyalah gambarnya, dan di situlah kilau ini dipasang.
Sesuai janji berkas ini, ia tidak MEMINDAHKAN apa pun: hanya satu lapis
gradasi yang menggeser dirinya sendiri di atas bidang yang sudah punya
ukuran tetap. Tidak ada sasaran tekan yang bergerak.
Berhentinya dua lapis:
1. portal.js melepas kelas .b-memuat begitu gambarnya selesai — itu jalan
yang biasa, dan kilaunya berhenti tepat saat gambarnya tampil.
2. Tanpa JavaScript, sapuannya dijatah lima kali (~8 detik) lalu memarkir
dirinya di luar bidang. Ini penting justru pada .a-sampul yang memakai
object-fit: contain — sampul tegak menyisakan bidang kosong di kiri dan
kanan gambar, dan kilau tak berbatas akan menyapu di sana selamanya,
menjanjikan sesuatu yang tidak akan pernah datang.
prefers-reduced-motion memaksa iteration-count menjadi 1 dan durasi 0,01ms
lewat aturan menyeluruh di portal.css. Karena bingkai terakhirnya sudah di
luar bidang, hasilnya lapisan ini langsung tak terlihat — bukan kedipan
cepat, yang justru lebih buruk daripada tidak ada gerak sama sekali. */
.b-memuat { position: relative; }
.b-memuat::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
/* Di bawah ![]()
pada urutan lukis: begitu gambarnya tampil, ia menutupi
kerangka ini tanpa menunggu satu pun kelas dilepas. */
z-index: 0;
/* Alasnya --garis, bukan --latar-lembut. Diukur langsung: kilau putih di
atas alas seterang --latar-lembut (#e9eff7) hampir tidak terlihat sama
sekali — sapuannya ada, tetapi tidak ada yang bisa melihatnya. Kerangka
memuat perlu alas yang jelas abu supaya sapuannya punya sesuatu untuk
dibandingkan. */
background-color: var(--garis);
background-image: linear-gradient(100deg,
transparent 25%, rgb(255 255 255 / 55%) 45%,
rgb(255 255 255 / 78%) 50%, rgb(255 255 255 / 55%) 55%, transparent 75%);
background-size: 220% 100%;
background-repeat: no-repeat;
/* Yang digeser POSISI GRADASINYA, bukan elemennya — sama seperti kilau
.o-kepala di atas. Kalau elemennya yang ditranslasi, alas abunya ikut
bergeser keluar bidang dan meninggalkan separuh penampung tanpa alas. */
animation:
b-kilau-muat 1.5s ease-in-out 5,
b-kilau-habis 7.5s linear 1 forwards;
}
.b-memuat img { position: relative; z-index: 1; }
@keyframes b-kilau-muat {
from { background-position: 160% 0; }
to { background-position: -60% 0; }
}
/* Pemadam. Lamanya tepat 5 x 1,5s, jadi kerangkanya pudar persis ketika
sapuan terakhir habis — bukan menghilang mendadak di tengah sapuan.
Inilah jalan berhenti tanpa JavaScript, dan ia penting justru pada .a-sampul
yang memakai object-fit: contain: sampul tegak menyisakan bidang kosong di
kiri dan kanan gambar, dan kerangka tak berbatas akan tinggal di sana
selamanya, menjanjikan sesuatu yang tidak akan pernah datang. */
@keyframes b-kilau-habis {
0%, 92% { opacity: 1; }
100% { opacity: 0; visibility: hidden; }
}
/* Bilah cari dan penyaring instansi. Warna, tepi, dan cincin fokusnya
berpindah halus; kendalinya TIDAK bergeser, sebab ketiganya berdempetan —
satu tombol yang naik akan menggeser tetangganya di bawah kursor.
Cincin fokus ikut beranimasi lewat box-shadow, bukan outline: outline tidak
dapat dianimasikan, dan pemakai papan tuntun yang menelusuri bilah ini
melihat perpindahannya sebagai kedipan tanpa transisi. */
/* Kotak cari memanjang saat disentuh atau difokus. Lebarnya --gerak-lambat,
sama dengan gerak "membesar" lain di portal — lebih panjang daripada
tanggapan tekan biasa, sebab yang berpindah di sini jarak yang jauh lebih
besar daripada 3px, dan gerak sejauh itu dalam 150ms terbaca sebagai
sentakan alih-alih peralihan.
Tepi dan cincin fokusnya tetap --gerak-cepat: keduanya tanggapan seketika,
dan menyamakannya dengan lebar justru membuat cincin fokus terasa
terlambat menyusul kotaknya. */
.b-cari { transition: width var(--gerak-lambat) var(--lentur), border-color var(--gerak-cepat) ease, box-shadow var(--gerak-cepat) ease; }
.b-cocok-keping,
.b-saring-lepas { transition: background var(--gerak-cepat) ease, border-color var(--gerak-cepat) ease; }
/* Petunjuk Enter muncul bersama pemanjangan kotaknya, jadi lamanya disamakan
dengan lebar kotak itu — bukan dengan tanggapan cepat. Yang lebih cepat
selesai lebih dulu daripada kotak yang menampungnya, dan kepingnya terlihat
menunggu di ruang yang belum ada. */
/* Petunjuk "Tekan Enter" meluncur masuk dari kanan sambil memudar, bukan
sekadar berganti tampak. Geserannya 10px — cukup untuk terbaca sebagai
sesuatu yang DATANG, terlalu kecil untuk menarik mata dari huruf yang sedang
diketik tepat di sebelahnya.
Lamanya --gerak-lambat, sama dengan pemanjangan kotak yang menampungnya;
yang lebih cepat selesai lebih dulu daripada kotaknya dan terlihat menunggu
di ruang yang belum ada. */
.b-cari-enter { transition: max-width var(--gerak-lambat) var(--lentur), margin var(--gerak-lambat) var(--lentur), opacity var(--gerak-lambat) ease, transform var(--gerak-lambat) var(--lentur); }
/* Keterangan pencarian nihil memudar saat pewaktunya habis, bukan lenyap
seketika. Yang kebetulan sedang melihat ke arah lain tetap menangkap bahwa
ada sesuatu yang baru saja pergi dari sana; hilang mendadak hanya
meninggalkan kebingungan tentang apa yang tadi ada di situ.
prefers-reduced-motion memendekkannya menjadi seketika, dan itu memang benar
di sini: yang menolak gerak mendapat penghilangan tanpa gerak, bukan
penghilangan yang lebih lambat. Lima detik membacanya tidak ikut berubah,
sebab pewaktunya di portal.js dan bukan animation-delay. */
.b-nihil { transition: opacity var(--gerak-lambat) ease, visibility var(--gerak-lambat) ease; }
.b-saring-tombol { transition: background var(--gerak-cepat) ease, border-color var(--gerak-cepat) ease, color var(--gerak-cepat) ease; }
/* Berita utama TIDAK punya aturan sendiri lagi. Ia ikut daftar kartu di atas.
Aturan yang dulu ada di sini menaikkannya 1px dalam 200ms, dan karena
letaknya SETELAH daftar itu, ia menang tanpa suara — kartu utama tetap naik
1px meski daftar di atas sudah menyebutnya. Itulah bentuk kegagalan yang
paling mahal di berkas gaya: aturan yang ditulis, terbaca benar, dan tidak
pernah berlaku.
Arsip tahun juga tidak punya aturan di sini lagi. Ia dulu berupa keping
bertepi di bilah sisi yang perlu peralihan warnanya sendiri; sejak pindah ke
dasbor ia menjadi batang mendatar, dan .b-batang-nama sudah ikut daftar
"huruf membesar" di atas. */
/* Batang "paling aktif" tumbuh dari kiri saat halaman dibuka. Ia hanya
memanjang di dalam alurnya sendiri dan tidak mengubah tinggi apa pun, jadi
tak ada sasaran tekan yang bergeser karenanya. */
.b-batang-alur > span {
transform-origin: left;
animation: b-batang-tumbuh 720ms cubic-bezier(.22, .8, .3, 1) both;
/* Tundanya datang dari markah lewat --tunda, sehingga batangnya tumbuh
berurutan dari atas ke bawah alih-alih serentak. Nilainya berasal dari
kedudukan barisnya — data, bukan rancangan — jadi tidak ada kelas CSS
yang dapat mewakilinya.
animation-delay, dan itu justru yang membuatnya aman: aturan
prefers-reduced-motion di portal.css memaksa SELURUH animation-delay
menjadi 0ms, sehingga urutannya runtuh menjadi serentak dan animasinya
sendiri sudah dimatikan di sana. Tidak ada satu baris syarat pun yang
perlu ditulis di sini. */
animation-delay: var(--tunda, 0ms);
}
@keyframes b-batang-tumbuh {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
/* Strip terbit-per-bulan tumbuh dari DASAR, bukan dari kiri: batangnya menegak,
dan arah tumbuh yang tidak sejalan dengan arah batangnya terbaca sebagai
gerak yang salah pasang. Sedikit lebih cepat daripada batang mendatar sebab
ada dua belas batang berurutan, bukan lima — pada 720ms per batang, gelombang
terakhirnya baru selesai jauh setelah halamannya terbaca. */
.b-tren-alur > span {
transform-origin: bottom;
animation: b-tren-tumbuh 560ms cubic-bezier(.22, .8, .3, 1) both;
animation-delay: var(--tunda, 0ms);
}
@keyframes b-tren-tumbuh {
from { transform: scaleY(0); }
to { transform: scaleY(1); }
}
/* Nomor halaman. */
.b-nomor a { transition: background var(--gerak-cepat) ease, color var(--gerak-cepat) ease, border-color var(--gerak-cepat) ease; }
/* --- Foto di dalam tulisan ------------------------------------------------ */
/* Foto membesar sedikit saat disentuh, TANPA naik dan tanpa bayangan tebal.
Bedanya dengan kartu disengaja dan bukan penghematan. Di berkas ini "naik 3px
berikut bayangan menebal" punya satu arti tetap: ini dapat ditekan. Foto di
dalam tulisan tidak menuju ke mana-mana — memberinya tanggapan yang sama
berarti menjanjikan halaman berikutnya yang tidak pernah datang, dan yang
menekannya akan mengira tekanannya tidak terbaca.
Yang tersisa, pembesaran 1.02, mengatakan hal lain: yang di bawah kursor ini
sebuah gambar, silakan diperhatikan. Sama dengan yang dipakai judul kartu di
atas, dan sengaja lebih kecil daripada 1.035 milik gambar di dalam bingkai
kartu — gambar di sana dipotong bingkainya, sedangkan foto ini membesar ke
ruang di sekelilingnya sendiri.
1.02 pada foto 485px berarti tumbuh 4,85px ke tiap sisi, sementara celah
antarfoto 14px. Dua foto bersebelahan yang sama-sama disentuh — mustahil,
tetapi tetap dihitung — masih menyisakan 4,3px di antaranya. Karena itu
foto tidak pernah saling menimpa, dan tidak ada satu pun yang perlu
dipotong overflow.
Ketiga bentuk foto disebut, sama dengan aturan lebar di berita.css: yang
tertinggal dari daftar akan diam sendirian di antara foto yang menanggapi.
Halaman statis satuan kerja ikut, dan itu memang benar: fotonya jenis yang
sama, hanya wadahnya yang bukan kartu berita. Yang TIDAK ikut adalah gambar
sebaris di tengah kalimat — ia bukan anak langsung yang berdiri sendiri,
melainkan satu di antara sekian isi paragraf. */
.a-teks figure img,
.a-teks p > img:only-child,
.a-badan .a-teks > img {
transition: transform var(--gerak-lambat) var(--lentur);
}
.a-teks figure img:hover,
.a-teks p > img:only-child:hover,
.a-badan .a-teks > img:hover { transform: scale(1.02); }
/* --- Lambang penerbit ------------------------------------------------------ */
/* Kartu "Penerbit" di bilah sisi artikel: seluruhnya satu tautan, dan sejauh
ini hanya barisan "Berita lainnya" di dalamnya yang menanggapi. Lambangnya
ikut membesar supaya yang disentuh terbaca sebagai SATU tautan, bukan satu
tautan di sebelah satu gambar yang kebetulan diam.
1.05, lebih besar daripada 1.02 milik hurufnya: lambangnya 42px, dan
pembesaran yang sama pada bidang sekecil itu tidak terlihat sama sekali. */
.a-sisi-lambang { transition: transform var(--gerak-kartu) var(--lentur); }
.a-sisi-opd:hover .a-sisi-lambang { transform: scale(1.05); }
/* --- Kendali di kepala portal ---------------------------------------------- */
/* Tombol tema, tombol masuk, dan pintasan alat sudah berganti latar dan tepi
saat disentuh — hanya saja pergantiannya SEKETIKA. Tiga kendali yang
berdampingan di bilah yang sama, dua di antaranya berperalihan dan satu
tidak, terbaca sebagai yang satu itu rusak.
Naik 1px, sama dengan .o-tombol di atas. Ketiganya kendali kecil, jadi
lamanya --gerak-cepat, bukan --gerak-kartu.
transform disebut lebih dulu dalam daftar peralihan supaya urutannya sama
dengan .o-tombol; urutan tidak mengubah apa pun bagi peramban, tetapi dua
daftar yang berbeda urutan untuk gerak yang sama menyulitkan perbandingan
ketika salah satunya kelak diubah. */
.tombol-tema,
.tombol-masuk,
.tombol-alat {
transition: transform var(--gerak-cepat) var(--lentur),
background var(--gerak-cepat) ease,
border-color var(--gerak-cepat) ease,
color var(--gerak-cepat) ease;
}
.tombol-tema:hover,
.tombol-masuk:hover,
.tombol-alat:hover { transform: translateY(-1px); }
/* Lambang kabupaten di kiri bilah kepala. Merek yang menanggapi menegaskan
bahwa ia tautan — ke portal induk, bukan ke beranda subdomain yang sedang
dibuka — dan itu satu-satunya tempat di halaman satuan kerja yang membawa
pengunjung keluar dari satuan kerjanya.
Hanya lambangnya yang membesar, bukan seluruh mereknya berikut tulisan dua
baris di sebelahnya: tulisan yang ikut membesar mendorong lebar mereknya, dan
di layar sempit merek yang melebar menggeser tombol-tombol di ujung kanan. */
.merek img { transition: transform var(--gerak-cepat) var(--lentur); }
.merek:hover img { transform: scale(1.05); }
/* --- Bilah suka dan bagikan ------------------------------------------------ */
/* Kepingnya kendali kecil, jadi tanggapannya sama dengan tombol kepala portal
dan .o-tombol: naik 1px, selama --gerak-cepat. Di sini kedua-duanya memang
dapat ditekan, jadi naik adalah tanggapan yang jujur. */
.a-aksi-keping,
.a-aksi-ikon {
transition: transform var(--gerak-cepat) var(--lentur),
background var(--gerak-cepat) ease,
border-color var(--gerak-cepat) ease,
color var(--gerak-cepat) ease;
}
.a-aksi-keping:hover,
.a-aksi-ikon:hover { transform: translateY(-1px); }
/* Ditekan, kepingnya kembali turun — satu-satunya tanda bahwa tekanannya sudah
diterima pada jeda sebelum angkanya berubah. Sama dengan kartu berita, yang
turun ke -1px saat ditekan. */
.a-aksi-keping:active,
.a-aksi-ikon:active { transform: translateY(0); }
/* Jempol berdenyut sekali ketika berita disukai.
Dipasang portal.js sebagai kelas, bukan dijalankan dari :hover atau dari
[aria-pressed="true"]: yang kedua akan ikut berdenyut pada SETIAP pemuatan
halaman berita yang sudah pernah disukai — gerak yang berjalan sendiri tanpa
ada yang menyentuhnya, tepat yang dihindari sepanjang berkas ini.
Sekali, bukan berulang: denyut yang mengulang menarik mata terus-menerus ke
tombol yang tugasnya sudah selesai.
prefers-reduced-motion memaksa durasinya 0,01ms lewat aturan menyeluruh di
portal.css, dan hasilnya benar — jempolnya langsung menyala tanpa denyut, bukan
berdenyut lebih lambat. */
.a-suka-denyut svg { animation: a-denyut 420ms var(--lentur); }
@keyframes a-denyut {
0% { transform: scale(1); }
35% { transform: scale(1.28); }
70% { transform: scale(0.94); }
100% { transform: scale(1); }
}