-nya, jadi teksnya ikut jadi #D9CBBA di atas isian aksen #C8842B: 1,74:1. Kelas cacat yang persis sama dengan `.galat-halaman p` menang atas `.galat-kode`, dan ketiga audit sama-sama buta terhadapnya. */ .pita-statistik .kisi span:last-child { font-size: var(--t-kecil); color: var(--band-redup); } .pita-statistik p { color: var(--band-teks); } .pita-statistik .redup { color: var(--band-redup); } /* Pita ini GELAP, jadi cincin fokus #A66A1E tidak cukup terlihat di atasnya (#A66A1E di atas tinta cuma 3,72:1). Di dalam pita, dan hanya di dalamnya, cincin fokus jadi #FBF6EF, 15,47:1. */ .pita-statistik :focus-visible { outline-color: var(--band-teks); } /* Tombol outline DI ATAS pita gelap: border #D9CBBA (10,46:1) dan teks #FBF6EF. Tombol isian aksen di atas pita ini TETAP membawa teks tinta (5,38:1). */ .pita-statistik .tombol-kedua { border-color: var(--band-redup); color: var(--band-teks); } .pita-statistik .tombol-kedua:hover { background: #3B2717; } /* Pita kalimat beraksen, isian aksen, teks TINTA (5,38:1). */ .pita-aksen { background: var(--aksen); color: var(--tinta); 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; } /* tinta 13,97: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 jam buka tujuh hari (W3): kolom jam ditebalkan dan TABULAR supaya "07.00" di tujuh baris benar-benar sejajar. Baris HARI INI diberi alas lembut DAN cip berlabel "Hari ini", alasnya saja tidak cukup, karena keadaan tidak boleh disampaikan lewat warna saja. */ .tabel-jam td:nth-child(2) { font-weight: 700; font-variant-numeric: tabular-nums; } .tabel-jam tr[data-hari-ini] { background: var(--aksen-alas); } /* tinta 13,88:1 */ .tabel-jam tr[data-hari-ini] td:first-child { font-weight: 700; } .tabel-jam .cip { margin-left: var(--r2); vertical-align: middle; } 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; } } /* ----------------------------------------------------------------------------- 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); } /* Placeholder #7A6555: 5,50:1 di atas kertas putih. Placeholder tetap teks. */ .kolom::placeholder { color: #7A6555; } 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, dan itu justru alasan kendalinya TIDAK boleh beraksen di sini: putih di atas #C8842B cuma 3,09:1, jadi centangnya nyaris hilang di dalam isiannya sendiri. Dipakai --garis-kendali #A66A1E, tempat putih mencapai 4,47:1. */ .pilihan input { width: 20px; height: 20px; accent-color: var(--garis-kendali); flex: none; } /* Yang terpilih ditandai border tebal DAN alas lembut, bukan warna titik saja. */ .pilihan label:has(input:checked) { border-color: var(--garis-kendali); 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: var(--tinta); } /* 5,38: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. Warnanya #A66A1E (4,15:1), bukan --aksen (2,88:1), PROMPTS-STATE S8 menuliskannya sebagai "tinted in #A66A1E" untuk tiga keadaan tab, dan alasannya kontras. */ .tab-bar a[aria-current="page"] { color: var(--garis-kendali); font-weight: 700; box-shadow: inset 0 3px 0 0 var(--garis-kendali); } .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(42,27,16,.66); 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, KETUJUH KALINYA. Bentuknya tetap BLOK beraksen, tetapi angkanya kembali TINTA: tinta di atas #C8842B 5,38:1, sementara putih di atasnya cuma 3,09:1 dan gagal AA. Persis kebalikan situs 07. :not(.galat-kode) WAJIB, dan angkanya DIHITUNG bukan dibaca. Di situs 02–06 aturan `.galat-halaman p { color: var(--redup); }` ditulis SESUDAH .galat-kode dan spesifisitasnya lebih tinggi (0,1,1 lawan 0,1,0), jadi angka 404/500 diam-diam mewarisi --redup. Untuk paket ini angkanya: --redup #6B5747 di atas isian aksen #C8842B = 2,21:1, di bawah bahkan ambang teks besar 3:1, pada elemen setinggi 6rem yang justru paling dilihat orang. Ketiga audit buta terhadapnya. -------------------------------------------------------------------------- */ .galat-kode { font-family: var(--f-judul); font-weight: 400; font-size: clamp(3rem, 12vw, 6rem); line-height: 1.1; display: inline-block; padding-inline: var(--r4); border-radius: var(--radius); background: var(--aksen); color: var(--tinta); } /* 5,38:1 */ .galat-halaman p:not(.galat-kode) { color: var(--redup); } /* :not() WAJIB: tanpa itu angka galat jadi 2,21: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(--band); color: var(--band-teks); padding-block: var(--r7); margin-top: var(--r7); } .footer a { color: var(--band-redup); text-decoration: none; font-size: var(--t-kecil); } /* 10,46:1 di atas --band */ .footer a:hover { color: var(--band-teks); 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: var(--band-redup); 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 #4A3626; display: flex; flex-wrap: wrap; gap: var(--r3); justify-content: space-between; font-size: var(--t-kecil); color: var(--band-redup); } /* #A66A1E di atas tinta cuma 3,72:1, di footer gelap cincin fokusnya jadi #FBF6EF (15,47:1), seperti di pita katering. */ .footer :focus-visible { outline-color: var(--band-teks); } /* ----------------------------------------------------------------------------- 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 DAN PENGGANTI FOTO Run paket ini menghasilkan 14 foto, dan TIGA di antaranya memuat nama usaha LAIN yang benar-benar ada, tidak satu pun terbaca dari nama berkasnya: - interior kafe: papan "KEDAI KOPI DJOGJA" dua kali → dipotong 150px dari atas - antrean pintu masuk: papan gantung dan papan tulis "KOPI LOKAL" → dipotong - prasmanan kantor: serbet bertulisan "brand" dan seragam berlogo katering lain → dipotong sampai keduanya keluar bingkai Yang DIBIARKAN dengan sengaja: merek mesin espreso di meja barista, karena kafe memang membeli mesin bermerek, ujinya "apakah usaha kita masuk akal MEMILIKI benda itu", dan papan nama kafe lain jelas tidak lolos uji itu. Wordmark "KOPI TEPI ALUN" pada kemasan katering justru wordmark fiktif milik situs ini sendiri, jadi ia memang boleh tampil. Run ini TIDAK menghasilkan satu pun potret kepala-dan-bahu, jadi tidak ada satu pun wajah yang dipajang sebagai "orang kami"; sidik jari perseptual atas ke-14 foto tidak menemukan satu pasang pun berjarak Hamming di bawah 30, jadi tidak ada foto kembar yang dipakai dua kali dengan keterangan berbeda. -------------------------------------------------------------------------- */ .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 cokelat lembut: 13,88:1. Alasnya --aksen-alas, BUKAN --aksen, di atas aksen penuh inisialnya masih terbaca (5,38:1) tapi kotak oranye penuh mendominasi kisi kartu dan berhenti terbaca sebagai pengganti foto. */ display: grid; place-items: center; background: var(--aksen-alas); color: var(--tinta); font-family: var(--f-judul); font-weight: 400; 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; } /* Menu: kolom kiri daftar harga, kolom kanan catatan dan kartu ajakan (W4). align-items:start WAJIB, tanpa itu kartu catatan yang isinya satu paragraf ikut melar setinggi daftar 22 baris harga. */ .menu-tata { grid-template-columns: 1.6fr 1fr; gap: var(--r6) !important; align-items: start; } /* Reservasi: formulir di kiri, kartu keterangan di kanan (W9). */ .reservasi-tata { grid-template-columns: 1.5fr 1fr; gap: var(--r6) !important; align-items: start; } /* Jam buka: tabel tujuh hari di kiri, empat kartu kapasitas di kanan (W3). */ .jam-tata { grid-template-columns: 1.15fr 1fr; gap: var(--r6) !important; align-items: start; } } /* ----------------------------------------------------------------------------- 26. PENCARI, dipakai di halaman menu sebagai penyaring kelompok menu -------------------------------------------------------------------------- */ .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 ("KOPI TEPI ALUN") dan navbarnya membawa DUA tombol karena situs ini melayani dua audiens, jadi ketiganya 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, 06, dan 07; wordmark paket ini "KOPI TEPI ALUN" dan navbarnya membawa DUA tombol sekaligus, "Reservasi Meja" dan "Pesan Katering". */ .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 BERKOLOM RUPIAH, 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 penyortir dan kartu paket. Alasnya --aksen-alas dan ikonnya --garis-kendali #A66A1E: 3,73:1, di atas lantai 3:1 untuk ikon fungsional. Kalau ikonnya diberi --aksen #C8842B ia jatuh ke 1,49:1 di atas alas lembut itu, nyaris tak terlihat, dan tidak ada audit yang berbunyi. -------------------------------------------------------------------------- */ .ikon-kotak { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: var(--radius); background: var(--aksen-alas); color: var(--garis-kendali); 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 alergen dan rambu tenggat, muncul di beberapa tempat dan sengaja seragam. Garis kirinya PERINGATAN (6,89:1), bukan aksen: ia bukan promosi, ia batas. Di vertikal makanan batas itu wajib kelihatan, karena yang disebutkan apa adanya adalah wajan yang dipakai bergantian untuk beberapa menu. */ .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 (pencarian menu 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, dua kartu penyortir audiens (W2) dan kisi cip area antar (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); } /* ----------------------------------------------------------------------------- 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: var(--tinta); /* 5,38:1 */ font-family: var(--f-isi); 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; } /* Angka total memakai DM Sans 700 tabular, BUKAN --f-judul: total dibandingkan lawan baris di atasnya, dan DM Serif Display tidak punya angka tabular. */ .rincian-total .rincian-nilai { font-size: 1.25rem; font-family: var(--f-isi); } /* ----------------------------------------------------------------------------- 42. KOLOM LENGKET, kartu ringkasan di sebelah formulir katering (W13). Hanya lengket di layar yang tingginya memang cukup; di mobile ia baris biasa. -------------------------------------------------------------------------- */ @media (min-width: 900px) { .lengket { position: sticky; top: var(--r4); } } /* Remah jejak, "Katering / Paket per porsi" */ .jejak { font-size: var(--t-kecil); color: var(--redup); margin-bottom: var(--r2); } .jejak a { color: var(--redup); } /* Baris keterangan yang isinya dua tingkat (label + kalimat penuh): minimal 72px. */ .baris-tinggi { min-height: 72px; align-items: flex-start; } .baris-tinggi .ikon { margin-top: 2px; } /* ----------------------------------------------------------------------------- 44. KISI ENAM, pita statistik memakai aturannya sendiri; kelas ini untuk kisi kartu biasa yang berjumlah enam. -------------------------------------------------------------------------- */ @media (min-width: 640px) { .kisi-6 { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (min-width: 1100px) { .kisi-6 { grid-template-columns: repeat(3, minmax(0,1fr)); } } /* ----------------------------------------------------------------------------- 45. TOMBOL YANG TAMPIL SEBAGAI TAUTAN Aksi yang memang tidak punya tujuan di desain contoh (unduh menu PDF, buka peta) ditulis sebagai