🎨 Global Style
body {
background:#f9f9f9;
font:1rem/1.6 sans-serif
}
Background abu-abu terang
Font default ukuran 1rem dengan line-height 1.6
Menggunakan font sans-serif (bersih & modern)
🔗 Link
a {
color:#05B;
text-decoration:none
}
Warna link biru (#05B)
Tanpa garis bawah
📦 Flex Layout
.fl {
display:flex;
align-items:center
}
Mengaktifkan Flexbox
Konten di tengah secara vertikal
📌 Sticky Bottom Bar
.sti {
position:fixed;
inset:auto 0 0;
z-index:1
}
Posisi fixed di bagian bawah layar
Selalu terlihat (sticky)
inset:auto 0 0 = bottom 0, kiri & kanan 0
📄 Container / Layout Utility
.p0 {
width:100%;
overflow-wrap:break-word
}
Lebar penuh
Text panjang akan otomatis wrap
.pc {
margin:1.25rem 0;
padding:.8rem
}
Spacing luar (margin atas bawah)
Padding dalam
🎨 Background & Color Helpers
.p2 {
background:#fff
}
Background putih (card style)
.bg {
background:#05b
}
Background biru
.p1 {
color:#fff
}
Text warna putih
📝 Typography
.jd {
font-size:.95rem;
color:#333
}
Text kecil, abu gelap (cocok untuk deskripsi)
.hd {
font-size:1.2rem
}
Judul sedikit lebih besar
.tg {
font-size:.65rem
}
Text sangat kecil (tag/label)
➖ Separator
.separator {
text-align:center
}
Konten di tengah (biasanya untuk garis pemisah atau teks “---”)
💡 Kesimpulan
CSS ini terlihat seperti:
Utility-based styling (mirip Tailwind tapi custom)
Dipakai untuk layout sederhana + card UI + sticky footer
Fokus ke clean & minimal design