@charset "utf-8"; /* ============================================================================= Wirasena & Rekan, desain contoh (firma hukum fiktif) Sumber desain: stitch/07-law-firm/ (DESIGN.md + PROMPTS-WEB/STATE) MODE WARNA DIKUNCI TERANG. Seluruh rasio di bawah dihitung untuk latar terang saja. Mencabut kuncian di berarti menghitung ulang SETIAP pasangan warna lebih dulu, bukan sekadar menghapus atributnya. AKSEN GELAP PERTAMA DI SELURUH SET, DAN ARAH LARANGANNYA TERBALIK DARI 06. Maroon #7B2D3B 8,53:1 di atas latar, jauh di atas lantai 3:1 dan bahkan di atas 4,5:1. Ia BOLEH jadi warna teks, garis kendali, ikon fungsional, DAN cincin fokus. Yang dilarang justru kebalikannya: membawa TEKS GELAP di atasnya. Tinta #14161A di atas maroon cuma 1,97:1 dan gagal total; putih 9,21:1 dan itu satu-satunya yang dipakai di atas aksen. Karena itu tiap tempat aksen dipakai di situs 06 ditinjau ULANG satu per satu, bukan diikutkan: di situs 06 cyan 2,26:1 hanya boleh jadi ISIAN dan teks di atasnya wajib tinta; di sini persis sebaliknya. Rantainya sekarang 02 isian · 03 teks · 04 isian · 05 teks · 06 isian · 07 aksen gelap. ⛔ RAMBU ISI (DESIGN.md): TIDAK ADA nomor izin advokat, nomor keanggotaan PERADI, nomor sertifikat, atau nomor registrasi apa pun di mana pun. Keanggotaan disebut tanpa nomor. TIDAK ADA superlatif, dan TIDAK PERNAH ada kalimat yang menjanjikan hasil perkara, pengalaman diuraikan sebagai pekerjaan yang dilakukan, bukan hasil yang diperoleh. DUA KELUARGA HURUF: Libre Baskerville 700 untuk judul dan angka, Inter 400/700 untuk isi. Libre Baskerville BUKAN huruf variabel dan hanya punya bobot 700, karena itu tidak ada satu pun 600 di berkas ini. ========================================================================== */ @import url("aset/huruf/_font-face.css"); /* ----------------------------------------------------------------------------- 1. TOKEN, tiap warna punya PERAN dan RASIO TERHITUNG di sebelahnya. Angka di bawah DIHITUNG SENDIRI dengan rumus WCAG, bukan disalin dari brief. Catatan: berbeda dengan paket 02, angka di DESIGN.md paket ini TERBUKTI BENAR, 4,76 · 5,01 · 3,25 · 15,48 · 6,15 semuanya cocok sampai dua desimal. -------------------------------------------------------------------------- */ :root { /* Permukaan */ --latar: #F7F6F4; /* alas halaman, kertas hangat */ --kertas: #FFFFFF; /* alas kartu di atas --latar */ --sentuh: #EFEDE9; /* hover/tekan; tinta 15,49:1 · aksen 7,87:1 · redup 5,47:1 */ /* Teks */ --tinta: #14161A; /* 16,77:1 di atas --latar, teks utama, ukuran apa pun */ --redup: #5D5F63; /* 5,92:1 di atas --latar, teks sekunder, LULUS AA */ /* Aksen, GELAP, dan itu membalik seluruh larangan paket 02–06 */ --aksen: #7B2D3B; /* 8,53:1 di atas latar, 9,21:1 di atas kertas → BOLEH jadi teks, garis, ikon fungsional, dan cincin fokus, selain jadi isian. Teks DI ATAS aksen wajib PUTIH (9,21:1); tinta di atasnya 1,97:1 dan GAGAL TOTAL. Tidak pernah ada teks gelap di atas maroon ini. */ --aksen-tekan: #5E2230; /* keadaan ditekan; putih di atasnya 12,02:1 */ --aksen-alas: #F3E9EB; /* alas lembut; tinta 15,24:1 · aksen 7,75:1 */ --nonaktif: #E7E4DF; /* alas kendali mati; redup di atasnya 5,05:1 */ /* Garis */ --garis: #E4E1DC; /* 1,21:1, DEKORATIF saja (garis rambut pemisah, border kartu). DILARANG untuk border kendali. */ --garis-kendali:#5D5F63; /* 5,92:1, border input, checkbox, tombol outline. */ /* Semantik, dihitung terhadap --latar */ --sukses: #0F6B45; /* 6,06:1 */ --galat: #B3261E; /* 6,05:1, sengaja lebih terang dan lebih jingga daripada maroon aksen, tapi maknanya TIDAK PERNAH bersandar pada warna: tiap pesan galat membawa ikon dan kata "galat" atau kalimat perbaikannya. */ --peringatan: #7A4B00; /* 6,86:1 */ --sukses-alas: #E6F0EA; /* tinta di atasnya 15,54:1 */ --galat-alas: #F7E7E5; /* tinta di atasnya 15,11:1 */ --peringatan-alas:#F6EEDD; /* tinta di atasnya 15,69:1 */ /* Huruf. DUA keluarga (DESIGN.md): Libre Baskerville 700 untuk judul dan angka statistik, Inter 400/700 untuk isi. ⚠️ Libre Baskerville BUKAN huruf variabel, tidak ada tabel fvar, berbeda dengan Inter dan IBM Plex Sans di situs 01–06. Jadi 700 memang berkas tersendiri, dan bobot 600 TIDAK ADA: menulis 600 berarti huruf tebal palsu yang digambar peramban. Seluruh berkas ini karena itu memakai 700. ⚠️ U+2192 (→) TIDAK ADA di subset latin Libre Baskerville, padahal rentangnya menyebutnya. Kejadian KETIGA setelah U+2075 di situs 03 dan U+2192 di Plex situs 06. Panah dipakai di tautan "Lihat rincian praktik" dan kawan-kawannya, jadi belasan aksara dirender huruf cadangan. Dibiarkan dengan sengaja: menggantinya dengan ikon membuat teks layar berhenti sama dengan kalimat brief, dan uji verbatim membandingkan TEKS, bukan rupa. Rantai cadangan --f-isi karena itu diisi huruf sistem yang pasti punya glif panah. */ --f-judul: "Libre Baskerville", Georgia, "Times New Roman", serif; --f-isi: "Inter", ui-sans-serif, "Segoe UI", system-ui, sans-serif; /* LANTAI UKURAN TEKS, jangan turun di bawah ini di mana pun. */ --t-isi: 1rem; /* 16px, teks isi */ --t-kecil: 0.875rem; /* 14px, sekunder */ --t-label: 0.75rem; /* 12px, label huruf besar, BATAS BAWAH */ /* Ritme */ --r1: .25rem; --r2: .5rem; --r3: .75rem; --r4: 1rem; --r5: 1.5rem; --r6: 2rem; --r7: 3rem; --r8: 4rem; --r9: 6rem; --radius: 2px; /* DESIGN.md: sudut nyaris siku, radius 2px */ --lebar-isi: 1240px; --tepi: 1.25rem; --bar-atas: 0px; --bar-bawah: calc(56px + env(safe-area-inset-bottom, 0px)); } /* ----------------------------------------------------------------------------- 2. DASAR -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* Atribut `hidden` KALAH oleh `display` mana pun yang ditulis di CSS. Gejalanya mahal dan hanya terlihat setelah dirender: pesan galat formulir tampil sejak halaman dibuka karena .pesan menyetel display:flex. Satu aturan ini menutup seluruh kelasnya. */ [hidden] { display: none !important; } html { /* Jangkar berhenti tepat di bawah bar, dan ini juga menyelamatkan elemen yang menerima fokus keyboard (teknik W3C C43 untuk WCAG 2.2 SC 2.4.11). */ scroll-padding-top: calc(var(--bar-atas) + var(--r4)); scroll-padding-bottom: calc(var(--bar-bawah) + var(--r4)); -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--latar); color: var(--tinta); font-family: var(--f-isi); font-size: var(--t-isi); line-height: 1.6; /* Ruang untuk bar tab bawah di mobile supaya isi terakhir tidak tertutup. */ padding-bottom: var(--bar-bawah); } h1, h2, h3, h4 { font-family: var(--f-judul); font-weight: 700; line-height: 1.2; margin: 0; } h1 { font-size: clamp(2.125rem, 5vw, 3.375rem); letter-spacing: -0.01em; } h2 { font-size: clamp(1.5rem, 3.2vw, 2.25rem); letter-spacing: -0.01em; } h3 { font-size: clamp(1.125rem, 1.9vw, 1.375rem); } p { margin: 0; } img { max-width: 100%; height: auto; display: block; } ul, ol { margin: 0; padding: 0; list-style: none; } a { color: inherit; } /* Angka statistik dan tarif: Libre Baskerville 700 dengan angka TABULAR. DESIGN.md menyebutnya eksplisit ("Numbers in statistics: Libre Baskerville, 700, tabular figures"), pita enam angka dan tabel tarif per jam hanya sejajar kalau angkanya tabular. */ .angka { font-family: var(--f-judul); font-weight: 700; font-variant-numeric: tabular-nums; } /* CINCIN FOKUS, 2px AKSEN dengan offset 2px, dan di paket ini itu SAH. Maroon 8,53:1 di atas latar, jauh di atas lantai 3:1 untuk kendali, jadi cincinnya benar-benar terlihat. Ini kebalikan situs 06, yang terpaksa memakai tinta karena cyan 2,26:1 tidak sampai. PROMPTS-STATE S1 dan S8 menyebut cincin 2px beraksen dengan offset 2px secara eksplisit. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--aksen); outline-offset: 2px; border-radius: 4px; } /* Lewati ke konten, wajib ada, dan wajib terlihat saat difokus. */ .lewati { position: absolute; left: var(--tepi); top: -100px; z-index: 100; background: var(--tinta); color: #fff; padding: var(--r3) var(--r4); border-radius: var(--radius); font-weight: 700; text-decoration: none; } .lewati:focus-visible { top: var(--r3); } /* ----------------------------------------------------------------------------- 3. TATA LETAK -------------------------------------------------------------------------- */ .bungkus { width: 100%; max-width: var(--lebar-isi); margin-inline: auto; padding-inline: var(--tepi); } .bagian { padding-block: var(--r7); } .bagian + .bagian { border-top: 1px solid var(--garis); } @media (min-width: 768px) { .bagian { padding-block: var(--r8); } } .kepala-bagian { margin-bottom: var(--r5); max-width: 62ch; } .kepala-bagian p { color: var(--redup); margin-top: var(--r2); } .kisi { display: grid; gap: var(--r4); } @media (min-width: 640px) { .kisi-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 900px) { .kisi-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kisi-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 640px) and (max-width: 899px) { .kisi-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Tiap anak kisi WAJIB boleh menyusut, kalau tidak isi yang lebar mendorong lebar halaman dan yang dilaporkan meluber justru elemen lain. */ .kisi > * { min-width: 0; } /* ----------------------------------------------------------------------------- 4. PITA "DESAIN CONTOH", tidak bisa ditutup, wajib di tiap halaman -------------------------------------------------------------------------- */ .pita { background: var(--tinta); color: #fff; /* 18,11:1 */ font-size: 0.8125rem; text-align: center; padding: var(--r2) var(--tepi); } /* ----------------------------------------------------------------------------- 5. NAVBAR (desktop), di mobile digantikan bar tab bawah -------------------------------------------------------------------------- */ .navbar { border-bottom: 1px solid var(--garis); background: var(--latar); } .navbar-isi { display: flex; align-items: center; gap: var(--r4); min-height: 64px; } .wordmark { font-family: var(--f-judul); font-weight: 700; letter-spacing: .06em; font-size: 0.9375rem; text-decoration: none; white-space: nowrap; } .nav-tautan { display: none; gap: var(--r5); margin-inline: auto; } .nav-tautan a { text-decoration: none; color: var(--redup); font-size: var(--t-kecil); } .nav-tautan a:hover { color: var(--tinta); } /* Item aktif TIDAK dibedakan warna saja, ada garis bawah tebal juga. */ .nav-tautan a[aria-current="page"] { color: var(--tinta); font-weight: 700; box-shadow: inset 0 -2px 0 0 var(--aksen); /* 8,53:1, aksen boleh jadi garis di sini */ } @media (min-width: 900px) { .nav-tautan { display: flex; } } .navbar .tombol { margin-left: auto; } @media (min-width: 900px) { .navbar .tombol { margin-left: 0; } } /* ----------------------------------------------------------------------------- 6. TOMBOL, target sentuh minimal 48px, tombol utama 52px di mobile -------------------------------------------------------------------------- */ .tombol { display: inline-flex; align-items: center; justify-content: center; gap: var(--r2); min-height: 48px; padding: var(--r3) var(--r5); font-family: var(--f-isi); font-size: var(--t-kecil); font-weight: 700; border-radius: var(--radius); border: 1px solid transparent; text-decoration: none; cursor: pointer; background: none; color: var(--tinta); transition: background-color .15s ease, border-color .15s ease; } .tombol-utama { background: var(--aksen); color: #fff; } /* 9,21:1, tinta di atas maroon 1,97:1, haram */ .tombol-utama:hover { background: var(--aksen-tekan); } /* putih 12,02:1 */ .tombol-utama:active { background: var(--aksen-tekan); } .tombol-kedua { border-color: var(--garis-kendali); color: var(--tinta); } /* 5,78:1 */ .tombol-kedua:hover { background: var(--sentuh); } .tombol-blok { width: 100%; } .tombol[disabled], .tombol[aria-disabled="true"] { background: var(--nonaktif); color: var(--redup); border-color: transparent; cursor: not-allowed; } .tombol-alasan { font-size: var(--t-kecil); color: var(--redup); margin-top: var(--r2); } /* Keadaan memuat: tombol punya LABELNYA SENDIRI, bukan cuma spinner. */ .tombol[data-memuat="ya"] { pointer-events: none; } .pemintal { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: putar .7s linear infinite; flex: none; } @keyframes putar { to { transform: rotate(360deg); } } /* ----------------------------------------------------------------------------- 7. IKON, SVG sebaris, BUKAN emoji dan bukan font ikon. Brief menyebut Material Symbols; yang dipakai di sini SVG sebaris dengan bentuk yang sama maknanya. Alasannya bukan selera: font ikon berbasis ligatur menampilkan nama glyph sebagai teks mentah sebelum fontnya termuat, dan itu berarti kata "request_quote" sempat terbaca di layar pembeli. -------------------------------------------------------------------------- */ .ikon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .ikon-besar { width: 28px; height: 28px; } .ikon-redup { color: var(--redup); } /* .ikon-aksen DIHIDUPKAN LAGI di paket ini, dan justru inilah tempat menyalin paling berbahaya: di situs 06 kelas ini sengaja DICABUT karena cyan 2,26:1 ada di bawah lantai 3:1 untuk ikon fungsional. Maroon 8,53:1 di atas latar dan 7,75:1 di atas --aksen-alas, jadi di sini ikon beraksen sah, dan DESIGN.md memang memintanya (kartu bidang praktik dan kartu kerahasiaan). */ .ikon-aksen { color: var(--aksen); } /* ----------------------------------------------------------------------------- 8. KARTU, border 1px, TANPA bayangan (DESIGN.md) -------------------------------------------------------------------------- */ .kartu { background: var(--kertas); border: 1px solid var(--garis); border-radius: var(--radius); padding: var(--r4); } .kartu h3 { margin-bottom: var(--r2); } .kartu p { color: var(--redup); font-size: var(--t-kecil); } .cip { display: inline-block; background: var(--aksen); color: #fff; /* 9,21:1 */ font-size: var(--t-label); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px var(--r2); border-radius: 4px; } .cip-netral { background: var(--nonaktif); color: var(--tinta); } /* Cip bergaris = cip penyaring yang TIDAK terpilih (W6) dan cip kategori. Border dan teksnya AKSEN (9,21:1 di atas kertas), dan itu sah di sini, kebalikan situs 06 yang harus memakai tinta karena cyan tidak sampai ke lantai 3:1. Yang terpilih memakai .cip biasa: isian maroon dengan teks putih. */ .cip-garis { /* inline-flex, BUKAN inline-block warisan .cip: cip bergaris hampir selalu membawa ikon, dan sebagai inline-block ikonnya duduk di garis dasar teks lalu terlihat seperti glyph yang rusak. Terlihat jelas di kisi cip layanan. */ display: inline-flex; align-items: center; gap: var(--r2); background: var(--kertas); color: var(--aksen); /* 9,21:1 */ border: 1px solid var(--aksen); text-transform: none; letter-spacing: 0; font-size: var(--t-kecil); padding: var(--r1) var(--r3); } .tautan-panah { display: inline-flex; align-items: center; gap: var(--r1); font-size: var(--t-kecil); font-weight: 700; text-decoration: none; color: var(--aksen); text-underline-offset: 3px; /* 8,53:1, aksen SAH sebagai teks di paket ini, dan tautan editorial memang memakainya */ } .tautan-panah:hover { text-decoration: underline; } /* ----------------------------------------------------------------------------- 9. HERO -------------------------------------------------------------------------- */ .hero { display: grid; gap: var(--r5); align-items: center; } @media (min-width: 900px) { .hero { grid-template-columns: 1.05fr .95fr; gap: var(--r7); } } .hero-mata { font-size: var(--t-kecil); font-weight: 700; color: var(--redup); letter-spacing: .06em; text-transform: uppercase; } .hero h1 { margin-block: var(--r3); } .hero-sub { color: var(--redup); font-size: 1.0625rem; max-width: 56ch; } .hero-aksi { display: flex; flex-wrap: wrap; gap: var(--r3); margin-top: var(--r5); } .hero-aksi .tombol { min-height: 52px; } /* aksi utama di mobile 52px */ .hero-statistik { display: flex; flex-wrap: wrap; gap: var(--r5); margin-top: var(--r5); padding-top: var(--r4); border-top: 1px solid var(--garis); } .hero-statistik div { min-width: 0; } .hero-statistik .angka { font-size: 1.25rem; display: block; } .hero-statistik span:last-child { font-size: var(--t-kecil); color: var(--redup); } .hero-foto { border-radius: var(--radius); border: 1px solid var(--garis); overflow: hidden; } .hero-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } /* ----------------------------------------------------------------------------- 10. PITA STATISTIK BERAKSEN, SELURUH teks di atasnya wajib PUTIH. Terhitung: putih di atas maroon #7B2D3B 9,21:1 LULUS, tinta di atasnya 1,97:1 GAGAL TOTAL. Persis KEBALIKAN situs 06, yang persis kebalikan situs 05. Berayun, bukan berkembang, itu sebabnya blok ini tidak pernah boleh disalin tanpa dihitung ulang. ENAM kolom, bukan lima: W3 mendiktekan enam angka, dan jumlah kolom pita ikut diperiksa tiap paket (lihat RESEP §5.4). Di bawah 1100px ia turun ke tiga lalu dua, bukan enam kolom sempit yang labelnya patah tiap kata. -------------------------------------------------------------------------- */ .pita-statistik { background: var(--aksen); color: #fff; padding-block: var(--r6); } .pita-statistik .kisi { gap: var(--r5); grid-template-columns: repeat(2, minmax(0,1fr)); } @media (min-width: 700px) { .pita-statistik .kisi { grid-template-columns: repeat(3, minmax(0,1fr)); } } @media (min-width: 1100px) { .pita-statistik .kisi { grid-template-columns: repeat(6, minmax(0,1fr)); } } .pita-statistik .angka { font-size: clamp(1.5rem, 3vw, 2rem); display: block; } /* Label 90% opasitas (W3). Putih 90% di atas maroon tetap 8,29:1, dihitung, bukan ditaksir, karena "sedikit lebih redup" adalah cara paling sering sebuah pita beraksen jatuh di bawah 4,5:1 tanpa ada yang menyadarinya. */ .pita-statistik span:last-child { font-size: var(--t-kecil); opacity: .9; } /* Pita ini GELAP, jadi cincin fokus beraksen tidak akan terlihat di atasnya. Di dalam pita, dan hanya di dalamnya, cincin fokus jadi putih. */ .pita-statistik :focus-visible { outline-color: #fff; } /* Pita kalimat beraksen, sama aturannya, teks putih. */ .pita-aksen { background: var(--aksen); color: #fff; border-radius: var(--radius); padding: var(--r5); font-size: 1.0625rem; } /* ----------------------------------------------------------------------------- 11. BARIS DAFTAR NATIVE, padanan mobile untuk tabel dan dropdown. Tinggi minimal 56px. Dipakai juga di desktop karena polanya memang terbaca. -------------------------------------------------------------------------- */ .daftar { border: 1px solid var(--garis); border-radius: var(--radius); background: var(--kertas); } .baris { display: flex; align-items: center; gap: var(--r3); min-height: 56px; padding: var(--r3) var(--r4); border-bottom: 1px solid var(--garis); } .baris:last-child { border-bottom: 0; } .baris-isi { min-width: 0; flex: 1; } /* Keduanya WAJIB blok. Sebagai span inline, judul dan keterangannya menyambung jadi satu paragraf dan barisnya berhenti terbaca sebagai baris daftar native, terlihat jelas di 390px, tidak terlihat sama sekali dari kode. */ .baris-label { display: block; font-weight: 700; font-size: var(--t-kecil); } .baris-nilai { display: block; font-size: var(--t-kecil); color: var(--redup); } /* Baris dua kolom (label kiri, nilai kanan) tetap sebaris: di situ keterangannya pendek dan memang berpasangan, bukan judul-dan-penjelasan. */ .baris > .baris-nilai:first-child { display: inline; } /* TANPA nowrap. Nilai panjang seperti "Monday to Friday 08.00 to 17.00, Saturday 08.00 to 13.00, GMT+7" tidak bisa membungkus dan mendorong lebar halaman: terukur meluber 54px di 320px pada situs 02, dan yang dilaporkan meluber justru
, bukan span penyebabnya. */ .baris-kanan { margin-left: auto; font-weight: 700; font-size: var(--t-kecil); text-align: right; min-width: 0; overflow-wrap: anywhere; } .baris-kanan.angka { font-weight: 700; } a.baris { text-decoration: none; } a.baris:hover { background: var(--sentuh); } /* ----------------------------------------------------------------------------- 12. TABEL, GARIS MENDATAR SAJA, tinggi baris 48px (DESIGN.md). Di bawah 768px tabel lebar tetap bisa digulir mendatar di dalam kotaknya sendiri; halamannya TIDAK ikut bergeser. -------------------------------------------------------------------------- */ .tabel-bungkus { overflow-x: auto; border: 1px solid var(--garis); border-radius: var(--radius); background: var(--kertas); /* WAJIB. Lihat komentar panjang di atas: tanpa ini .hanya-layar-baca di dalam tabel lolos dari pangkasan overflow dan menarik lebar dokumen sampai 263px melewati layar 390px. */ position: relative; } table { border-collapse: collapse; width: 100%; font-size: var(--t-kecil); } th, td { text-align: left; padding: var(--r3) var(--r4); border-bottom: 1px solid var(--garis); height: 48px; } th { font-weight: 700; background: var(--sentuh); white-space: nowrap; } /* 15,49:1 */ /* Angka lajur dua dan seterusnya dibandingkan lawan lajur → tabular. */ td:not(:first-child) { font-variant-numeric: tabular-nums; } tr:last-child td { border-bottom: 0; } /* Tabel tarif per jam: kolom angka rupiah ditebalkan supaya yang dicari kepala bagian hukum menonjol tanpa harus diwarnai. Baris subjudul kelompok memakai th yang membentang penuh, jadi kelompoknya terbaca pembaca layar juga. */ .tabel-tarif td:nth-child(2) { font-weight: 700; } .tabel-tarif th[colspan] { background: var(--sentuh); text-transform: uppercase; letter-spacing: .06em; font-size: var(--t-label); } caption { caption-side: top; text-align: left; padding: var(--r3) var(--r4); font-size: var(--t-kecil); color: var(--redup); } /* ----------------------------------------------------------------------------- 13. CAROUSEL GESER, kartu berikutnya mengintip, ada titik indikator -------------------------------------------------------------------------- */ .carousel { display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 320px); gap: var(--r4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--r3); scrollbar-width: thin; /* Geser mendatar ditangkap carousel, gulir tegak halaman tetap jalan. */ touch-action: pan-y; } .carousel > * { scroll-snap-align: start; } @media (min-width: 900px) { .carousel { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0,1fr)); overflow: visible; scroll-snap-type: none; } } .titik { display: flex; gap: var(--r2); justify-content: center; margin-top: var(--r3); } .titik span { width: 6px; height: 6px; border-radius: 50%; background: var(--garis-kendali); opacity: .35; } .titik span[data-aktif="ya"] { opacity: 1; width: 18px; border-radius: 3px; } @media (min-width: 900px) { .titik { display: none; } } /* ----------------------------------------------------------------------------- 14. TIMELINE, tegak di mobile, mendatar di layar lebar. Paket ini memakainya untuk EMPAT langkah "Dari telepon pertama sampai pekerjaan dimulai" (W11). Tegak di mobile, mendatar di layar lebar. -------------------------------------------------------------------------- */ .timeline { position: relative; padding-left: 44px; } .timeline::before { content: ""; position: absolute; left: 15px; top: 12px; bottom: 12px; width: 2px; background: var(--garis); } .langkah { position: relative; padding-bottom: var(--r5); } .langkah:last-child { padding-bottom: 0; } .langkah-nomor { position: absolute; left: -44px; top: 0; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--aksen); color: #fff; /* 9,21:1 */ font-family: var(--f-judul); font-weight: 700; font-size: var(--t-kecil); } .langkah h3 { font-size: 1.0625rem; } .langkah p { color: var(--redup); font-size: var(--t-kecil); margin-top: var(--r1); } @media (min-width: 900px) { /* EMPAT kolom: W11 punya empat langkah, dari telepon pertama sampai pekerjaan dimulai. Jumlah kolom timeline ikut diperiksa tiap paket. */ .timeline { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--r5) var(--r4); padding-left: 0; } .timeline::before { display: none; } /* diganti border per langkah */ .langkah { padding: calc(var(--r5) + 16px) 0 0; border-top: 2px solid var(--garis); } .langkah-nomor { left: 0; top: -16px; } } /* ----------------------------------------------------------------------------- 15. AKORDEON FAQ,
asli, jadi tetap bisa dibuka tanpa JavaScript -------------------------------------------------------------------------- */ .faq { border: 1px solid var(--garis); border-radius: var(--radius); background: var(--kertas); } .faq details { border-bottom: 1px solid var(--garis); } .faq details:last-child { border-bottom: 0; } .faq summary { display: flex; align-items: center; gap: var(--r3); cursor: pointer; min-height: 56px; padding: var(--r3) var(--r4); font-weight: 700; font-size: var(--t-kecil); list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary .ikon { margin-left: auto; transition: transform .2s ease; } .faq details[open] summary .ikon { transform: rotate(180deg); } .faq .jawab { padding: 0 var(--r4) var(--r4); color: var(--redup); font-size: var(--t-kecil); } /* ----------------------------------------------------------------------------- 16. FORMULIR, border kendali WAJIB --garis-kendali (5,92:1), bukan --garis (1,21:1) -------------------------------------------------------------------------- */ .bidang { display: block; margin-bottom: var(--r4); } .bidang > label, .label { display: block; font-size: var(--t-kecil); font-weight: 700; margin-bottom: var(--r2); } .kolom { width: 100%; min-height: 48px; padding: var(--r3); /* 16px WAJIB: di bawah itu Safari iOS ikut memperbesar layar saat kolom difokus. */ font-size: var(--t-isi); font-family: var(--f-isi); color: var(--tinta); background: var(--kertas); border: 1px solid var(--garis-kendali); border-radius: var(--radius); } .kolom::placeholder { color: #6B7280; } textarea.kolom { min-height: 120px; resize: vertical; } .bantuan { font-size: var(--t-kecil); color: var(--redup); margin-top: var(--r2); } .bantuan-galat { color: var(--galat); font-weight: 700; } /* 6,05:1 */ .bantuan-sukses { color: var(--sukses); font-weight: 700; } /* 6,06:1 */ .kolom[aria-invalid="true"] { border-color: var(--galat); border-width: 2px; } .kolom[disabled] { background: var(--nonaktif); color: var(--redup); cursor: not-allowed; } /* Radio sebaris (W14: tiga pilihan dalam satu baris), target sentuh 48px penuh, dan yang terpilih ditandai border DAN alas, bukan warna titik saja. */ .pilihan { display: grid; gap: var(--r2); } @media (min-width: 640px) { .pilihan { grid-auto-flow: column; grid-auto-columns: 1fr; } } .pilihan label { display: flex; align-items: center; gap: var(--r2); min-height: 48px; padding: var(--r2) var(--r3); border: 1px solid var(--garis-kendali); border-radius: var(--radius); background: var(--kertas); font-size: var(--t-kecil); cursor: pointer; } /* accent-color menggambar isian kendali DAN centangnya PUTIH. Putih di atas maroon 9,21:1, jadi kendalinya beraksen, kebalikan situs 06, yang terpaksa bertinta karena putih di atas cyan cuma 2,43:1. */ .pilihan input { width: 20px; height: 20px; accent-color: var(--aksen); flex: none; } .pilihan label:has(input:checked) { border-color: var(--aksen); border-width: 2px; background: var(--aksen-alas); } /* Segmented control, padanan mobile untuk radio 2 sampai 3 opsi */ .segmen { display: flex; border: 1px solid var(--garis-kendali); border-radius: var(--radius); overflow: hidden; } .segmen button { flex: 1; min-height: 48px; border: 0; background: var(--kertas); cursor: pointer; font-family: var(--f-isi); font-size: var(--t-kecil); font-weight: 700; color: var(--tinta); } .segmen button + button { border-left: 1px solid var(--garis-kendali); } .segmen button[aria-pressed="true"] { background: var(--aksen); color: #fff; } /* 9,21:1 */ /* ----------------------------------------------------------------------------- 17. PESAN DALAM HALAMAN, supaya implementasi tidak jatuh ke alert() peramban. Tidak pernah membawa makna lewat warna saja: selalu ada ikon dan kata. -------------------------------------------------------------------------- */ .pesan { display: flex; gap: var(--r3); align-items: flex-start; padding: var(--r3) var(--r4); border-radius: var(--radius); border-left: 4px solid; font-size: var(--t-kecil); } .pesan-galat { background: var(--galat-alas); border-color: var(--galat); color: var(--tinta); } .pesan-peringatan { background: var(--peringatan-alas); border-color: var(--peringatan); color: var(--tinta); } .pesan-sukses { background: var(--sukses-alas); border-color: var(--sukses); color: var(--tinta); } .pesan b { display: block; } /* ----------------------------------------------------------------------------- 18. BAR TAB BAWAH (mobile), navigasi UTAMA di mobile, bukan hamburger -------------------------------------------------------------------------- */ .tab-bar { position: fixed; inset-inline: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--kertas); border-top: 1px solid var(--garis); padding-bottom: env(safe-area-inset-bottom, 0px); } .tab-bar a { display: grid; place-items: center; gap: 2px; min-height: 56px; padding: var(--r2) var(--r1); text-decoration: none; color: var(--redup); font-size: var(--t-label); } /* Tab aktif dibedakan warna DAN tebal DAN garis atas, bukan warna saja. */ /* Tab aktif dibedakan warna DAN tebal DAN garis atas beraksen (8,53:1). */ .tab-bar a[aria-current="page"] { color: var(--aksen); font-weight: 700; box-shadow: inset 0 3px 0 0 var(--aksen); } .tab-bar .ikon { width: 22px; height: 22px; } @media (min-width: 900px) { .tab-bar { display: none; } body { padding-bottom: 0; } } /* ----------------------------------------------------------------------------- 19. BOTTOM SHEET, padanan mobile untuk dropdown -------------------------------------------------------------------------- */ .lapis { position: fixed; inset: 0; z-index: 50; background: rgba(20,22,26,.6); display: grid; align-items: end; } .lapis[hidden] { display: none; } .sheet { background: var(--kertas); border-radius: 12px 12px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); max-height: 80vh; overflow-y: auto; } .sheet-pegangan { width: 36px; height: 4px; background: var(--garis-kendali); opacity: .5; border-radius: 2px; margin: var(--r3) auto; } .sheet-kepala { display: flex; align-items: center; gap: var(--r3); padding: 0 var(--r4) var(--r3); border-bottom: 1px solid var(--garis); } .sheet-kepala h3 { font-size: 1rem; } .sheet-tutup { margin-left: auto; min-width: 48px; min-height: 48px; display: grid; place-items: center; background: none; border: 0; cursor: pointer; color: var(--tinta); } @media (min-width: 900px) { .lapis { align-items: center; justify-items: center; } .sheet { border-radius: var(--radius); max-width: 480px; width: 100%; } } /* Lightbox foto */ .lightbox img { width: 100%; max-height: 80vh; object-fit: contain; background: #000; } /* ----------------------------------------------------------------------------- 20. SKELETON MEMUAT, bukan spinner, supaya bentuk halaman sudah terbaca -------------------------------------------------------------------------- */ .tulang { background: var(--nonaktif); border-radius: var(--radius); position: relative; overflow: hidden; } .tulang::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); animation: kilau 1.4s ease-in-out infinite; } @keyframes kilau { from { transform: translateX(-100%); } to { transform: translateX(100%); } } .tulang-baris { height: 14px; margin-bottom: var(--r2); } .tulang-judul { height: 28px; width: 60%; margin-bottom: var(--r3); } .tulang-foto { aspect-ratio: 4 / 3; } /* ----------------------------------------------------------------------------- 21. HALAMAN GALAT DITUKAR LAGI, KEENAM KALINYA, dan peringatan situs 06 memang perlu ditulis: bentuknya tetap BLOK beraksen seperti situs 02, 04, dan 06, tetapi angkanya sekarang PUTIH. Tinta di atas maroon cuma 1,97:1; angka setinggi 6rem pun tidak menolongnya, karena 1,97:1 bahkan di bawah ambang teks besar 3:1. -------------------------------------------------------------------------- */ .galat-kode { font-family: var(--f-judul); font-weight: 700; font-size: clamp(3rem, 12vw, 6rem); line-height: 1.1; display: inline-block; padding-inline: var(--r4); background: var(--aksen); color: #fff; } /* 9,21:1 */ .galat-halaman p:not(.galat-kode) { color: var(--redup); } /* :not() WAJIB: tanpa itu angka galat jadi 1,44:1 */ .galat-aksi { display: flex; flex-wrap: wrap; gap: var(--r3); justify-content: center; } /* Anak yang dipusatkan lewat place-items:center TIDAK melar: lebarnya lahir dari isinya sendiri, jadi satu paragraf panjang bisa melewati viewport, terukur 10px di 320px pada situs 02, dan yang dilaporkan meluber cuma "p" tanpa kelas, mustahil ditebak dari kode. max-width:100% saja TIDAK menutupnya; grid-nya yang dicabut. Halaman galat di sini karena itu blok sejak awal, bukan grid. */ .galat-halaman { display: block; text-align: center; padding-block: var(--r9); max-width: 56ch; margin-inline: auto; } .galat-halaman > * + * { margin-top: var(--r4); } .galat-halaman > * { max-width: 100%; } /* ----------------------------------------------------------------------------- 22. FOOTER -------------------------------------------------------------------------- */ .footer { background: var(--tinta); color: #fff; padding-block: var(--r7); margin-top: var(--r7); } .footer a { color: #D6D0CB; text-decoration: none; font-size: var(--t-kecil); } /* 11,85:1 di atas --tinta */ .footer a:hover { color: #fff; text-decoration: underline; } .footer h4 { font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--r3); } .footer li { margin-bottom: var(--r2); } .footer-atas { display: grid; gap: var(--r5); } @media (min-width: 768px) { .footer-atas { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--r6); } } .footer-tentang { color: #D6D0CB; font-size: var(--t-kecil); margin-top: var(--r3); max-width: 40ch; } .footer-bawah { margin-top: var(--r6); padding-top: var(--r4); border-top: 1px solid #2C2F35; display: flex; flex-wrap: wrap; gap: var(--r3); justify-content: space-between; font-size: var(--t-kecil); color: #D6D0CB; } .footer :focus-visible { outline-color: #fff; } /* ----------------------------------------------------------------------------- 23. UTILITAS -------------------------------------------------------------------------- */ .hanya-layar-baca { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .tumpuk-2 { display: grid; gap: var(--r2); } .tumpuk-3 { display: grid; gap: var(--r3); } .tumpuk-4 { display: grid; gap: var(--r4); } .redup { color: var(--redup); } .kecil { font-size: var(--t-kecil); } @media (min-width: 900px) { .hanya-mobile { display: none !important; } } @media (max-width: 899px) { .hanya-desktop { display: none !important; } } /* ----------------------------------------------------------------------------- 24. GERAK DIKURANGI, hormati preferensi sistem -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .tulang::after { animation: none; } } /* ----------------------------------------------------------------------------- 25. FOTO, POTRET, DAN PENGGANTI FOTO Run paket ini menghasilkan 11 foto dan NOL di antaranya memuat merek, papan nama, atau teks apa pun, run paling bersih di seluruh set. Masalahnya jenis lain, dan tidak terlihat di contact sheet: sepuluh berkas potret itu ternyata cuma EMPAT orang. Diukur dengan sidik jari perseptual 16×16 bit atas area wajah, potret 1/3/4/5 berjarak Hamming 1–4 satu sama lain, dan 7/8/9 juga. Yang dipakai hanya empat potret yang jarak antar-mereka semuanya ≥ 61: potret-a s.d. potret-d, untuk EMPAT partner. Keenam associate memakai .potret-inisial. Halaman firma hukum yang memajang beberapa "orang berbeda" berwajah sama persis merusak justru hal yang dijual paket ini: bahwa buktinya ada pada ORANG. -------------------------------------------------------------------------- */ .gambar-lebar, .foto-kosong { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--garis); background: var(--nonaktif); } .foto-kosong { display: grid; place-content: center; justify-items: center; gap: var(--r2); color: var(--redup); /* 5,05:1 di atas --nonaktif */ background-color: var(--nonaktif); background-image: linear-gradient(var(--garis) 1px, transparent 1px), linear-gradient(90deg, var(--garis) 1px, transparent 1px); background-size: 16px 16px; } .foto-kosong span { font-family: var(--f-isi); font-weight: 700; font-size: var(--t-label); letter-spacing: .08em; background: var(--kertas); padding: 2px var(--r2); border-radius: 4px; border: 1px solid var(--garis); text-align: center; } .potret { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--garis); margin-bottom: var(--r3); } .potret-inisial { /* Inisial bertinta di atas alas maroon lembut: 15,24:1. Alasnya --aksen-alas, BUKAN --aksen, inisial di atas maroon penuh harus putih, dan potret inisial yang gelap penuh terbaca seperti kotak kosong di kisi kartu orang. */ display: grid; place-items: center; background: var(--aksen-alas); color: var(--tinta); font-family: var(--f-judul); font-weight: 700; font-size: 1.75rem; letter-spacing: .04em; aspect-ratio: 1 / 1; border: 1px solid var(--garis); border-radius: var(--radius); margin-bottom: var(--r3); } /* Tombol pembungkus foto yang bisa diperbesar, tetap terlihat sebagai gambar */ .foto-tombol { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; } .foto-tombol img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--garis); } /* Pengganti peta, tidak memuat peta pihak ketiga, jadi tidak ada pelacak. */ .peta { display: grid; place-content: center; justify-items: center; gap: var(--r3); aspect-ratio: 4 / 3; border-radius: var(--radius); border: 1px solid var(--garis); color: var(--redup); text-align: center; padding: var(--r4); background-color: var(--nonaktif); background-image: linear-gradient(var(--garis) 1px, transparent 1px), linear-gradient(90deg, var(--garis) 1px, transparent 1px); background-size: 24px 24px; } .peta span { font-size: var(--t-kecil); max-width: 28ch; } /* Dua kolom di layar lebar, satu kolom di mobile. */ @media (min-width: 900px) { [data-dua-kolom] { grid-template-columns: 1fr 1fr; align-items: start; } /* Rincian bidang praktik: lima baris pekerjaan dua-pertiga di kiri, kartu partner penanggung jawab sepertiga di kanan (W5). */ .praktik-tata { grid-template-columns: 2fr 1fr; gap: var(--r6) !important; align-items: start; } /* Legal update: daftar artikel di kiri, kartu langganan di kanan (W6). */ .legal-tata { grid-template-columns: 1.6fr 1fr; gap: var(--r6) !important; align-items: start; } /* Bio partner: kolom kiri lengket berisi potret dan kontak, tab di kanan (W10). */ .bio-tata { grid-template-columns: 1fr 1.9fr; gap: var(--r6) !important; align-items: start; } /* Konsultasi: formulir di kiri, kartu pernyataan advokat-klien di kanan (W14). align-items:start WAJIB, tanpa itu kartu pernyataan yang isinya satu paragraf ikut melar setinggi formulir sepuluh kolom, dan yang terlihat pengunjung adalah kartu setengah kosong sepanjang layar. */ .konsultasi-tata { grid-template-columns: 1.5fr 1fr; gap: var(--r6) !important; align-items: start; } } /* ----------------------------------------------------------------------------- 26. PENCARI, dipakai di halaman rute sebagai penyaring asal dan tujuan -------------------------------------------------------------------------- */ .pencari { display: grid; gap: var(--r3); align-items: end; margin-bottom: var(--r6); } @media (min-width: 900px) { .pencari { grid-template-columns: repeat(3, minmax(0,1fr)) auto; } } .pencari .bidang { margin: 0; } .pencari .tombol { min-height: 48px; } /* ----------------------------------------------------------------------------- 27. RAPI-RAPI DI BAWAH 900px, semuanya hanya terlihat setelah dirender -------------------------------------------------------------------------- */ @media (max-width: 899px) { /* Tombol navbar membungkus jadi dua baris dan mendesak wordmark sampai nyaris tak terbaca. Di mobile aksi ini juga sudah ada di bar tab bawah, jadi di sini ia cukup ringkas: tanpa ikon, tanpa membungkus, padding lebih rapat. */ .navbar .tombol { padding-inline: var(--r3); white-space: nowrap; font-size: var(--t-label); } .navbar .tombol .ikon { display: none; } .wordmark { font-size: 0.75rem; letter-spacing: .04em; } /* Aksi utama melebar penuh supaya lebarnya seragam dan mudah dijangkau jempol. */ .hero-aksi { flex-direction: column; align-items: stretch; } .hero-aksi .tombol { width: 100%; } } /* ----------------------------------------------------------------------------- 28. PONSEL SEMPIT (≤ 380px), iPhone SE dan Android kecil Label tab turun ke 11px dan padding dirapatkan. Wordmark paket ini panjang dan tombol navbarnya berlabel "Jadwalkan Konsultasi", jadi keduanya ikut mengecil. -------------------------------------------------------------------------- */ @media (max-width: 380px) { :root { --tepi: 1rem; } .tab-bar a { font-size: 0.6875rem; padding-inline: 2px; min-width: 0; } .tab-bar a > :last-child { max-width: 100%; overflow-wrap: anywhere; text-align: center; line-height: 1.15; } .tab-bar .ikon { width: 20px; height: 20px; } .wordmark { font-size: 0.625rem; } /* TERUKUR, bukan ditaksir: di 320px wordmark panjang plus tombol berlabel panjang yang TIDAK boleh membungkus mendorong lebar halaman. Label tombol didiktekan brief dan diuji verbatim, jadi yang dicabut nowrap-nya. Diwarisi dari situs 03, 04, dan 06; wordmark paket ini "WIRASENA & REKAN" dan tombolnya berlabel "Jadwalkan Konsultasi", dua-duanya panjang. */ .navbar .tombol { white-space: normal; text-align: center; line-height: 1.2; padding-inline: var(--r2); } } /* Tombol sunting di baris ringkasan wizard */ .sunting { margin-left: auto; min-width: 44px; min-height: 44px; display: grid; place-items: center; background: none; border: 1px solid var(--garis); border-radius: var(--radius); cursor: pointer; } .sunting:hover { background: var(--sentuh); } /* ----------------------------------------------------------------------------- 29. TABEL BIAYA, kolom rupiah rata KANAN dan tabular -------------------------------------------------------------------------- */ .tabel-biaya td:last-child, .tabel-biaya th:last-child { text-align: right; } .tabel-biaya td:last-child { font-weight: 700; font-variant-numeric: tabular-nums; } /* ----------------------------------------------------------------------------- 30. KOTAK IKON, bingkai lembut untuk ikon kartu bidang praktik dan kerahasiaan. Alasnya --aksen-alas dan ikonnya AKSEN: 7,75:1, jauh di atas lantai 3:1 untuk ikon fungsional. Di situs 06 ikon di kotak ini terpaksa bertinta karena cyan di atas alas lembut jatuh di bawah 3:1; di sini justru sebaliknya, dan DESIGN.md memintanya beraksen. -------------------------------------------------------------------------- */ .ikon-kotak { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: var(--radius); background: var(--aksen-alas); color: var(--aksen); margin-bottom: var(--r3); } /* ----------------------------------------------------------------------------- 31. BARIS INFO BERIKON, dipakai untuk rambu, catatan tarif, dan syarat dokumen. Ikonnya --redup (5,92:1): barisnya sering panjang dan ikon di sini berfungsi sebagai penanda jenis, bukan sebagai aksi. -------------------------------------------------------------------------- */ .info-baris { display: flex; gap: var(--r3); align-items: flex-start; font-size: var(--t-kecil); color: var(--redup); } .info-baris .ikon { margin-top: 2px; } .info-baris b { color: var(--tinta); } /* Rambu "ini bukan janji hasil" dan "ini bukan nasihat hukum", muncul di beberapa tempat dan sengaja seragam. Garis kirinya PERINGATAN (6,86:1), bukan aksen: ia bukan promosi, ia batas. Di vertikal ini batas itu wajib kelihatan, karena satu-satunya hal yang tidak boleh dijanjikan adalah hasil perkara. */ .rambu { display: flex; gap: var(--r3); align-items: flex-start; background: var(--peringatan-alas); border-left: 4px solid var(--peringatan); border-radius: var(--radius); padding: var(--r3) var(--r4); font-size: var(--t-kecil); color: var(--tinta); } /* Cip berbentuk KALIMAT (pil di hero, cip kategori artikel). Cip biasa memakai huruf besar semua dan itu benar untuk satu-dua kata; untuk satu kalimat penuh ia berhenti terbaca. Bentuknya sama, hurufnya tidak dipaksa. */ .cip-kalimat { display: inline-flex; align-items: center; gap: var(--r2); text-transform: none; letter-spacing: 0; font-size: var(--t-kecil); padding: var(--r2) var(--r4); } /* Lima kolom hanya di layar yang benar-benar cukup lebar. Di bawah itu ia turun ke tiga lalu dua, bukan memaksa lima kartu sempit yang judulnya patah tiap kata. */ /* Pil status hero berdiri sendiri di atas eyebrow. p{margin:0} membuat keduanya berdempetan sampai terbaca seperti satu blok, terlihat di 390px maupun 1440px, dan tidak terlihat sama sekali dari kode. */ .hero .cip { margin-bottom: var(--r3); } /* Pesan "ini desain contoh" yang muncul sesudah tombol yang memang tidak punya tujuan nyata. Tersembunyi sampai ditekan, dan isinya ditulis JS. */ .pesan-contoh { margin-top: var(--r3); } @media (min-width: 1100px) { .kisi-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (min-width: 900px) and (max-width: 1099px) { .kisi-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 640px) and (max-width: 899px) { .kisi-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ----------------------------------------------------------------------------- 33. KARTU BERKOLOM, satu kolom isian dengan tombol di sebelahnya (langganan legal update, pencarian edisi di halaman 404) -------------------------------------------------------------------------- */ .lacak-kartu { background: var(--kertas); border: 1px solid var(--garis); border-radius: var(--radius); padding: var(--r4); margin-top: var(--r5); } .lacak-baris { display: grid; gap: var(--r3); } @media (min-width: 560px) { .lacak-baris { grid-template-columns: 1fr auto; align-items: end; } } .lacak-baris .bidang { margin: 0; } .lacak-baris .tombol { min-height: 48px; } /* ----------------------------------------------------------------------------- 34. UBIN AKSI, tiga kartu penyortir niat (W2) dan kisi lima kartu kerahasiaan (W12). Lima kolom hanya di layar yang cukup lebar; di bawah itu turun ke tiga lalu dua, bukan lima ubin sempit yang labelnya patah tiap kata. -------------------------------------------------------------------------- */ @media (min-width: 1100px) { .kisi-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (min-width: 900px) and (max-width: 1099px) { .kisi-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 560px) and (max-width: 899px) { .kisi-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } a.kartu { text-decoration: none; display: block; } a.kartu:hover { background: var(--sentuh); } /* ----------------------------------------------------------------------------- 35. BATANG, dipakai di komponen.html sebagai contoh perbandingan berangka. Batangnya isian aksen; nilainya tetap dieja di sebelahnya, jadi maknanya tidak pernah hanya di warna. Alurnya diberi border supaya tepinya terlihat. -------------------------------------------------------------------------- */ .batang { display: grid; gap: var(--r4); } /* EMPAT kolom, bukan tiga: barisnya memang punya empat anak (label, persen, alur, jumlah sampel). Dengan tiga kolom anak keempat jatuh ke baris berikutnya dan jumlah sampel tampil di bawah labelnya, terlihat jelas sesudah dirender, dan tidak terlihat sama sekali dari kode. */ .batang-baris { display: grid; grid-template-columns: 12rem 5rem 1fr 11rem; gap: var(--r3); align-items: center; font-size: var(--t-kecil); } .batang-nilai { font-family: var(--f-judul); font-weight: 700; font-size: 1.25rem; font-variant-numeric: tabular-nums; } .batang-alur { height: 12px; background: var(--garis); border: 1px solid var(--garis-kendali); border-radius: 999px; overflow: hidden; } .batang-isi { display: block; height: 100%; background: var(--aksen); } .batang-sampel { color: var(--redup); } .batang-total { border-top: 2px solid var(--tinta); padding-top: var(--r4); } @media (max-width: 700px) { .batang-baris { grid-template-columns: 1fr auto; } .batang-alur, .batang-sampel { grid-column: 1 / -1; } } /* ----------------------------------------------------------------------------- 36. RIWAYAT, timeline yang SELALU tegak, tidak pernah mendatar. Dipakai untuk riwayat perkara dan tahapan pekerjaan. Langkah berjalan ditandai isian aksen DAN katanya; langkah mendatang bertinta redup DAN berlabel perkiraan. Tidak ada keadaan yang maknanya hanya di warna. Ikon di dalam tanda berjalan wajib PUTIH, di situs 06 ia bertinta, dan di atas maroon itu 1,97:1. -------------------------------------------------------------------------- */ .riwayat { position: relative; padding-left: 44px; } .riwayat::before { content: ""; position: absolute; left: 15px; top: 12px; bottom: 12px; width: 2px; background: var(--garis-kendali); } .riwayat li { position: relative; padding-bottom: var(--r6); } .riwayat li:last-child { padding-bottom: 0; } .riwayat-tanda { position: absolute; left: -44px; top: 0; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--kertas); border: 2px solid var(--tinta); color: var(--tinta); } .riwayat-tanda[data-keadaan="kini"] { background: var(--aksen); border-color: var(--aksen); color: #fff; } .riwayat-tanda[data-keadaan="nanti"] { border-color: var(--redup); color: var(--redup); } .riwayat-waktu { display: block; font-size: var(--t-kecil); color: var(--redup); font-variant-numeric: tabular-nums; } .riwayat h3 { font-size: 1.0625rem; margin-top: var(--r1); } .riwayat p { color: var(--redup); font-size: var(--t-kecil); margin-top: var(--r1); } .riwayat li[data-keadaan="nanti"] h3 { color: var(--redup); } /* ----------------------------------------------------------------------------- 37. UNGGAH BERKAS, dipakai di komponen.html sebagai contoh kendali unggah. Bordernya --garis-kendali (5,78:1), bukan --garis: ia area yang bisa diklik. -------------------------------------------------------------------------- */ .unggah { display: grid; place-items: center; gap: var(--r2); text-align: center; padding: var(--r6) var(--r4); border: 2px dashed var(--garis-kendali); border-radius: var(--radius); background: var(--kertas); cursor: pointer; font-size: var(--t-kecil); color: var(--redup); } .unggah:hover { background: var(--sentuh); } /* ----------------------------------------------------------------------------- 38. PENANDA BERNOMOR, isian aksen dengan angka PUTIH di atasnya (9,21:1) -------------------------------------------------------------------------- */ /* Kolom bersatuan (jam, hari). Satuannya menempel di kolomnya, bukan jadi baris bantuan terpisah di bawah, di baris bantuan ia terbaca sebagai keterangan, bukan sebagai bagian dari angka yang sedang diketik. */ .kolom-satuan { display: flex; align-items: center; gap: var(--r2); } .kolom-satuan .kolom { flex: 1; min-width: 0; } .kolom-satuan span { font-weight: 700; white-space: nowrap; } .pin { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--aksen); color: #fff; font-family: var(--f-judul); font-weight: 700; font-size: var(--t-kecil); } /* ----------------------------------------------------------------------------- 39. BARIS RINCIAN BIAYA, label kiri, angka kanan tabular -------------------------------------------------------------------------- */ .rincian { display: grid; gap: var(--r3); } .rincian > div { display: flex; gap: var(--r3); align-items: baseline; font-size: var(--t-kecil); } .rincian dt, .rincian .rincian-label { flex: 1; min-width: 0; } .rincian dd, .rincian .rincian-nilai { margin: 0; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; } .rincian-total { border-top: 2px solid var(--tinta); padding-top: var(--r3); font-size: var(--t-isi) !important; } .rincian-total .rincian-nilai { font-size: 1.25rem; font-family: var(--f-judul); } /* ----------------------------------------------------------------------------- 40. BARIS EDITORIAL LEGAL UPDATE (W6), tanggal, cip kategori, judul, penulis. Bukan kartu: indeks publikasi memang daftar, dan daftar berbaris membaca jauh lebih cepat daripada enam kotak. Pemisahnya garis rambut, bukan kotak. -------------------------------------------------------------------------- */ .artikel { display: grid; gap: var(--r2); padding-block: var(--r4); border-bottom: 1px solid var(--garis); } .artikel:last-child { border-bottom: 0; } @media (min-width: 760px) { .artikel { grid-template-columns: 11rem 1fr; column-gap: var(--r5); align-items: start; } .artikel-meta { grid-row: span 2; } } .artikel-tanggal { display: block; font-size: var(--t-kecil); color: var(--redup); font-variant-numeric: tabular-nums; margin-bottom: var(--r2); } .artikel h3 { font-size: 1.125rem; } .artikel h3 a { text-decoration: none; } .artikel h3 a:hover { text-decoration: underline; text-underline-offset: 3px; } .artikel-kaki { font-size: var(--t-kecil); color: var(--redup); } /* Penyaring kategori. Radio SUNGGUHAN yang dibungkus label bercip, jadi ia bisa dipilih dengan keyboard dan tetap terbaca pembaca layar. Penyaringannya CSS murni lewat :has(), tanpa JavaScript pun daftarnya benar-benar tersaring, bukan cuma berganti warna cip. */ .saring { display: flex; flex-wrap: wrap; gap: var(--r2); margin-bottom: var(--r5); } .saring input { position: absolute; width: 1px; height: 1px; opacity: 0; } .saring label { cursor: pointer; } .saring input:focus-visible + span { outline: 2px solid var(--aksen); outline-offset: 2px; } .saring input:checked + span { background: var(--aksen); color: #fff; border-color: var(--aksen); } /* :has() DI PEMBUNGKUS, bukan kombinator saudara. Radionya duduk DI DALAM