@charset "utf-8"; /* ============================================================================= Wanakomodo Voyages, desain contoh (perusahaan fiktif) Sumber desain: stitch/11-travel-event/ (DESIGN.md + PROMPTS-WEB/STATE) Disalin dari situs 06 lalu ditambal lewat skrip yang gagal keras; tiap tempat aksen dipakai DITINJAU ULANG, bukan diikutkan begitu saja. 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: ISIAN SAJA, DIHITUNG SENDIRI, TIDAK DIWARISI DARI PAKET MANA PUN. Karang #F2705B cuma 2,78:1 di atas latar #FFF9F5. Itu di BAWAH lantai 3:1 untuk garis kendali, ikon fungsional, dan cincin fokus, dan jauh di bawah 4,5:1 untuk teks. Teks DI ATAS aksen wajib TINTA #231A2E (5,76:1); putih di atasnya cuma 2,90:1 dan GAGAL AA. DESIGN.md paket ini menulis 5,76 dan 2,90, keduanya COCOK sampai dua desimal. Yang TIDAK ditulis DESIGN.md justru pasangan penentunya: aksen di atas latar. Angka itu (2,78:1) yang memutuskan aksen ISIAN saja, dan ia harus dihitung. Untuk tugas yang butuh warna karang tapi juga butuh kontras, cincin fokus, angka besar 404/500, ikon fungsional, tautan beraksen, ada saudara gelapnya --aksen-pekat #BF4127 (5,03:1 di atas latar). Aksen terang tidak pernah dipakai untuk itu. ⛔ RAMBU ISI (DESIGN.md + ATURAN-KONTEN.md): TIDAK ADA nomor izin biro perjalanan, nomor sertifikat kepelautan, nomor polis, maupun nomor registrasi di mana pun, cukup jenis, penerbit, dan status. Daftar "yang belum termasuk harga" wajib sama panjang dan sama besar hurufnya dengan yang sudah termasuk. DUA KELUARGA HURUF: Outfit untuk judul dan angka, Inter untuk isi. ========================================================================== */ @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: #FFF9F5; /* alas halaman */ --kertas: #FFFFFF; /* alas kartu di atas --latar; tinta 16,68:1 */ --sentuh: #F7E9E2; /* hover/tekan; tinta di atasnya 14,07:1 */ /* Teks */ --tinta: #231A2E; /* 15,99:1 di atas --latar, teks utama, ukuran apa pun */ --redup: #5F5468; /* 6,81:1 di atas --latar, teks sekunder, LULUS AA */ /* Aksen, ISIAN SAJA. Angka ini yang memutuskannya, bukan kebiasaan paket lain. */ --aksen: #F2705B; /* 2,78:1 di atas latar → ISIAN saja: tombol utama, cip harga, pita statistik, lingkaran nomor hari, cip "Tersedia", tab aktif, penanda. DILARANG jadi warna teks, garis kendali, cincin fokus, atau ikon fungsional, semuanya butuh minimal 3:1 dan karang ini tidak sampai. Teks DI ATAS aksen wajib --tinta (5,76:1); putih di atasnya 2,90:1 dan GAGAL AA. */ --aksen-tekan: #E56048; /* keadaan ditekan; tinta di atasnya 4,85:1, LULUS. Dipilih justru karena dua kandidat yang lebih gelap jatuh ke 4,28:1 dan 4,20:1 saat dihitung. */ --aksen-alas: #FCE3DC; /* alas lembut; tinta di atasnya 13,63:1 */ --aksen-pekat: #BF4127; /* 5,03:1 di atas latar → SATU-SATUNYA warna karang yang boleh jadi TEKS, GARIS, IKON FUNGSIONAL, dan CINCIN FOKUS. Putih di atasnya 5,25:1, jadi ia juga sah sebagai isian bila teksnya putih. Di atas pita tinta ia cuma 3,18:1 → di sana pakai --aksen. */ --nonaktif: #EFE5DF; /* alas kendali mati; redup di atasnya 5,73:1 */ /* Garis */ --garis: #EFE1D9; /* 1,22:1, DEKORATIF saja (pemisah, border kartu; DESIGN.md menyebut warna ini eksplisit). DILARANG untuk border kendali interaktif. */ --garis-kendali:#8C7A70; /* 3,92:1 di atas latar, border input, checkbox, tombol outline, gagang sheet. Lolos lantai 3:1. */ /* Semantik, dihitung terhadap --latar */ --sukses: #1E6B3A; /* 6,25:1 */ --galat: #B3261E; /* 6,26:1 */ --peringatan: #7A4E00; /* 6,90:1 */ --sukses-alas: #E6F1E9; /* tinta di atasnya 14,40:1 · --sukses 5,63:1 */ --galat-alas: #FBE8E4; /* tinta di atasnya 14,11:1 · --galat 5,53:1 */ --peringatan-alas:#F8EFDD; /* tinta di atasnya 14,60:1 · --peringatan 6,30:1 */ /* Pita terbalik jalur korporat, DESIGN.md: alas tinta, teks latar. */ --terbalik-teks: #FFF9F5; /* 15,99:1 di atas --tinta */ --terbalik-redup: #C9BCC6; /* 9,13:1 di atas --tinta. --redup TIDAK BOLEH ke sana: di atas tinta ia cuma 2,35:1 dan GAGAL. */ /* Status kursi, tiap cip SELALU membawa KATA, bukan warna saja. */ --cip-hampir: #F6D68A; /* tinta di atasnya 11,84:1 */ --cip-penuh: #E5DED9; /* tinta di atasnya 12,54:1 */ /* Huruf. DUA keluarga: Outfit (judul, angka) dan Inter (isi). Keduanya huruf VARIABEL, jadi outfit-600.woff2 dan outfit-700.woff2 memang BERKAS YANG SAMA PERSIS, begitu juga keempat berkas Inter. Itu benar, bukan salah salin; yang membuktikan bobotnya jalan adalah lebar render, bukan ukuran berkas. ⚠️ DIPERIKSA fontTools, bukan ditebak dari rentang: U+2192 (→) TIDAK ADA di subset latin Outfit MAUPUN Inter, padahal rentang U+2000-206F yang tertulis di _font-face.css menyebutnya. Ini kejadian KEEMPAT untuk aksara yang sama. Karena itu halaman ini tidak pernah memakai → sebagai aksara teks: panah digambar SVG sebaris (#i-panah). Yang ADA dan dipakai: · U+00B7, – U+2013,, U+2014, ’ U+2019, × U+00D7, © U+00A9, … U+2026. Rantai cadangan tetap diisi huruf sistem yang pasti punya glif itu. */ --f-judul: "Outfit", ui-sans-serif, "Segoe UI", system-ui, sans-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: 12px; /* DESIGN.md: radius 12px, tepi lembut */ --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; } /* Harga per orang dan jumlah kursi: Outfit 700 dengan angka TABULAR. DESIGN.md menyebutnya eksplisit, kolom "Sisa kursi" dan enam cip harga hanya sejajar kalau angkanya tabular. */ .angka { font-family: var(--f-judul); font-weight: 700; font-variant-numeric: tabular-nums; } /* CINCIN FOKUS, 2px --aksen-pekat dengan offset 2px. Brief S1/S2/S8 meminta cincin fokus beraksen; aksen #F2705B cuma 2,78:1 dan cincin fokus yang tidak terlihat sama saja dengan tidak ada. --aksen-pekat #BF4127 (5,03:1) memberi warna karang yang diminta DAN lolos lantai 3:1. Di dalam pita terbalik dan footer ia ditimpa jadi --terbalik-teks, karena di atas tinta ia cuma 3,18:1. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--aksen-pekat); 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: 600; 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: var(--terbalik-teks); /* 15,99: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: 600; 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: 600; box-shadow: inset 0 -3px 0 0 var(--aksen); } @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: 600; 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: var(--tinta); } /* 5,76:1 */ .tombol-utama:hover { background: var(--aksen-tekan); } /* 4,85:1 */ .tombol-utama:active { background: var(--aksen-tekan); } .tombol-kedua { border-color: var(--garis-kendali); color: var(--tinta); } /* garis 3,92: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 ADA di paket ini, tapi warnanya --aksen-pekat (5,03:1), BUKAN --aksen (2,78:1). Ikon fungsional berkarang terang berada di bawah lantai 3:1. Inilah tempat menyalin paling berbahaya: di situs 06 kelas ini dicabut habis, di sini ia hidup dengan warna yang berbeda. Ikon netral tetap memakai --tinta (15,99:1) atau --redup (6,81:1). */ .ikon-aksen { color: var(--aksen-pekat); } /* ----------------------------------------------------------------------------- 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: var(--tinta); /* 5,76:1 */ font-size: var(--t-label); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 2px var(--r2); border-radius: 4px; } .cip-netral { background: var(--nonaktif); color: var(--tinta); } /* DESIGN.md paket ini: cip status SELALU membawa KATA, tidak pernah warna saja, karena status yang hanya diberi warna tidak terlihat oleh pengguna buta warna. Bordernya TINTA, bukan aksen, karang 2,78:1 tidak sampai ke lantai 3:1. */ .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(--tinta); border: 1px solid var(--tinta); 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: 600; text-decoration: none; color: var(--aksen-pekat); text-underline-offset: 3px; /* 5,03:1; --aksen GAGAL sebagai teks: 2,78:1 */ } .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: 600; 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 TINTA. Terhitung: tinta di atas karang #F2705B 5,76:1 LULUS, putih di atasnya 2,90:1 GAGAL. W3 menulis aturan ini apa adanya, dan hitungan sendiri membenarkannya. -------------------------------------------------------------------------- */ .pita-statistik { background: var(--aksen); color: var(--tinta); padding-block: var(--r6); } .pita-statistik .kisi { gap: var(--r5); grid-template-columns: repeat(2, minmax(0,1fr)); } @media (min-width: 900px) { .pita-statistik .kisi { grid-template-columns: repeat(5, minmax(0,1fr)); } } .pita-statistik .angka { font-size: clamp(1.5rem, 3vw, 2rem); display: block; } .pita-statistik span:last-child { font-size: var(--t-kecil); } /* Pita karang ini TERANG. --aksen-pekat di atasnya cuma 1,81:1, jadi di dalam pita statistik cincin fokus ditimpa jadi TINTA (5,76:1). Diukur, bukan dipilih. */ .pita-statistik :focus-visible { outline-color: var(--tinta); } /* Pita kalimat beraksen, sama aturannya, teks tinta. */ .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: 600; font-size: var(--t-kecil); } /* overflow-wrap:anywhere WAJIB DI SINI, dan alasannya terukur: alamat surel "penawaran@wanakomodovoyages.example" adalah satu kata sepanjang 35 aksara yang tidak bisa dipenggal, dan di 320px ia menarik lebar dokumen 36px melewati layar. Yang dilaporkan meluber justru
, bukan barisnya, mustahil ditebak dari kode. Dipasang di .baris-nilai SAJA, bukan di .baris-isi. Sempat dipasang di .baris-isi dan akibatnya baru terlihat SESUDAH DIRENDER di 390px: `anywhere` ikut menurunkan lebar min-content jadi satu aksara, jadi kolom LABEL kartu armada ("Ruang bersama", "Peralatan", "Listrik") menyusut menjadi satu huruf per baris, menurun tegak. Ketiga audit lolos hijau dengan cacat itu terpasang. */ .baris-nilai { display: block; font-size: var(--t-kecil); color: var(--redup); overflow-wrap: anywhere; } /* 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: 600; font-size: var(--t-kecil); text-align: right; min-width: 0; overflow-wrap: anywhere; } .baris-kanan.angka { font-weight: 600; } 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: 600; background: var(--sentuh); white-space: nowrap; } /* 14,07: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 jadwal: kolom "Sisa kursi" ditebalkan supaya angka yang dicari calon tamu menonjol tanpa harus diwarnai. Baris subjudul kelompok memakai th yang membentang penuh, jadi kelompoknya terbaca pembaca layar juga. */ .tabel-jadwal td:nth-child(4) { font-weight: 600; } .tabel-jadwal 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 alur penawaran, jadi kolomnya EMPAT, bukan lima. Jumlah kolom timeline selalu ikut diperiksa saat menyalin: paket berbeda punya jumlah langkah berbeda, dan kolom kelima yang kosong terlihat seperti langkah yang hilang. -------------------------------------------------------------------------- */ .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: var(--tinta); /* 5,76: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) { .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: 600; 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 (3,92:1), bukan --garis (1,22:1) -------------------------------------------------------------------------- */ .bidang { display: block; margin-bottom: var(--r4); } .bidang > label, .label { display: block; font-size: var(--t-kecil); font-weight: 600; 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: #6E6276; } /* 5,72:1 di atas --kertas */ 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: 600; } /* 6,26:1 */ .bantuan-sukses { color: var(--sukses); font-weight: 600; } /* 6,25: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 karang cuma 2,90:1, jadi kendalinya bertinta (putih di atas tinta 16,68:1). */ .pilihan input { width: 20px; height: 20px; accent-color: var(--tinta); flex: none; } .pilihan label:has(input:checked) { border-color: var(--tinta); 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: 600; 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,76: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-bar a[aria-current="page"] { color: var(--tinta); font-weight: 600; box-shadow: inset 0 3px 0 0 var(--aksen); } /* Warna tab aktif tidak pernah sendirian: ada tebal DAN garis atas juga. */ .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(35,26,46,.72); 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 lagi-lagi karena dihitung. Di sini angka 404/500 memang BERWARNA KARANG, tapi karangnya --aksen-pekat #BF4127 (5,03:1), bukan --aksen #F2705B (2,78:1) yang dipakai situs 06 sebagai blok isian. Bentuk blok isian ditinggalkan karena angka setinggi 6rem yang dibungkus blok oranye di halaman galat terbaca seperti tombol raksasa yang bisa ditekan. -------------------------------------------------------------------------- */ .galat-kode { font-family: var(--f-judul); font-weight: 700; font-size: clamp(3rem, 12vw, 6rem); line-height: 1.1; display: inline-block; color: var(--aksen-pekat); } /* 5,03:1 */ /* :not(.galat-kode) WAJIB, dan ini tambalan cacat WARISAN dari situs 01. Tanpa itu aturan ini (spesifisitas 0,1,1) menang atas .galat-kode (0,1,0) karena ditulis belakangan, dan angka besar 404/500 diam-diam mewarisi --redup alih-alih warna yang ditulis untuknya. Terukur di kelima situs: 02 seharusnya 11,38 jadi 3,87 - 03 seharusnya 4,76 jadi 6,15 - 04 seharusnya 6,67 jadi 2,60 - 05 seharusnya 4,71 jadi 5,51 - 06 seharusnya 7,20 jadi 2,56. Angka galat ini teks BESAR, jadi ambang AA-nya 3:1; yang benar-benar gagal karena itu situs 04 dan 06. Cacat ini lolos dari KETIGA audit karena ketiganya membaca teks dan kotak, bukan warna terhitung. Yang menemukannya cuma melihat halamannya sendiri. */ .galat-halaman p:not(.galat-kode) { color: var(--redup); } .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: var(--terbalik-teks); padding-block: var(--r7); margin-top: var(--r7); } .footer a { color: var(--terbalik-redup); text-decoration: none; font-size: var(--t-kecil); } /* 9,13:1 */ .footer a:hover { color: var(--terbalik-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(--terbalik-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 #3B2F48; display: flex; flex-wrap: wrap; gap: var(--r3); justify-content: space-between; font-size: var(--t-kecil); color: var(--terbalik-redup); } .footer :focus-visible { outline-color: var(--terbalik-teks); } /* --aksen-pekat cuma 3,18:1 di atas tinta */ /* ----------------------------------------------------------------------------- 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 Delapan belas foto run ini DILIHAT satu per satu, bukan dinilai dari namanya. Empat memuat merek atau nama usaha yang nyata, dan tiap kasus diselesaikan dengan langkah termurah yang cukup: · potret pemandu senior berpolo bordir "TROPIC VENTURES · TOUR OPERATOR", operator tur LAIN. BINGKAI DIPOTONG di atas dada sampai wordmark keluar. · foto Pink Beach dengan perahu jukung bernama di lambungnya, ada pengganti setara di bingkai yang sama, jadi BINGKAI DIPOTONG, bukan ditambal. · dua lambung phinisi bertulisan nama kapal yang bukan milik kita, DITAMBAL BERTEPI LEMBUT memakai kain lambung tepat di bawahnya. · lencana kulit merek pakaian luar ruang di jaket pemandu, yang di paha hilang ikut potongan bingkai, yang di dada ditambal. Yang sengaja DIBIARKAN: lambung bertuliskan "Sanggar Laut · LABUAN BAJO", itu nama kapal kita sendiri (W8); papan informasi kampung Wae Rebo dan lencana seragam yang tidak terbaca sama sekali bahkan pada perbesaran delapan kali; dan merek pakaian tamu yang mendaki, karena tamu memang memakai pakaian sendiri. Ujinya satu: apakah perusahaan ini masuk akal MEMILIKI benda itu. Sidik jari perseptual keempat potret diukur: jarak Hamming terkecil 74, jauh di atas ambang 30, jadi keempatnya benar-benar empat orang berbeda. Dua ubin galeri (Loh Liang dan Manta Point) TIDAK punya foto sama sekali di run ini, dan memakai .galeri-absen yang mengaku apa adanya, bukan foto lain yang captionnya dipaksakan. -------------------------------------------------------------------------- */ .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); /* 4,93: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: 600; 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 { display: grid; place-items: center; background: var(--aksen-alas); color: var(--tinta); font-family: var(--f-judul); font-weight: 600; font-size: 1.75rem; letter-spacing: .04em; } /* 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 penjejak. */ .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; } /* Kontak: pengganti peta di kiri, alamat dan jam di kanan. */ .kontak-tata { grid-template-columns: 1fr 1.1fr; gap: var(--r6) !important; align-items: start; } /* Minta penawaran: formulir di kiri, kartu ringkasan waktu balasan di kanan. align-items:start WAJIB, tanpa itu kartu ringkasan yang isinya empat baris ikut melar setinggi formulir tiga belas kolom, dan yang terlihat pengunjung adalah kartu setengah kosong sepanjang layar. */ .rfq-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. */ /* TERUKUR di 390px, bukan ditaksir: label tombol paket ini empat kata ("Minta Penawaran Rombongan") dan dengan white-space:nowrap ia meluber 3px melewati layar di SELURUH tujuh halaman. Yang dicabut nowrap-nya, bukan labelnya, label itu didiktekan brief dan diuji verbatim. */ .navbar .tombol { padding-inline: var(--r3); white-space: normal; text-align: center; line-height: 1.2; 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 dua kata panjang, jadi ia 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. Wordmark paket ini "WANAKOMODO VOYAGES" dua kata panjang dan tombolnya berlabel "Minta Penawaran Rombongan", empat kata; ini kombinasi paling sempit dari sebelas situs. */ .navbar .tombol { 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 PENGEMBALIAN, kolom "Yang dikembalikan" rata KANAN dan tabular -------------------------------------------------------------------------- */ .tabel-harga td:last-child, .tabel-harga th:last-child { text-align: right; } .tabel-harga td:last-child { font-weight: 600; font-variant-numeric: tabular-nums; } /* ----------------------------------------------------------------------------- 30. KOTAK IKON, bingkai lembut untuk ikon penyortir niat dan kartu layanan. Alasnya --aksen-alas dan ikonnya --aksen-pekat (4,74:1 di atas alas itu). --aksen di atas --aksen-alas cuma 1,29:1 dan tidak pernah boleh dipakai. -------------------------------------------------------------------------- */ .ikon-kotak { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: var(--radius); background: var(--aksen-alas); color: var(--aksen-pekat); margin-bottom: var(--r3); } /* ----------------------------------------------------------------------------- 31. BARIS INFO BERIKON, dipakai untuk rambu cuaca, catatan harga musim, dan syarat kesehatan. Ikonnya --redup (6,81: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 "cuaca dan izin berlayar bisa mengubah ini", muncul di beberapa tempat dan sengaja seragam. Garis kirinya PERINGATAN (6,90:1), bukan aksen: ia bukan promosi, ia batas. */ .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 status di hero, cip "hampir penuh"). 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)); } } /* ----------------------------------------------------------------------------- 34. KISI LIMA, dipakai pita statistik (lima angka) dan lima butir pembeda jalur korporat. 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); } /* ----------------------------------------------------------------------------- 38. PENANDA PETA BERNOMOR, isian aksen dengan angka BERTINTA di atasnya -------------------------------------------------------------------------- */ /* Kolom bersatuan (kg, m³). DESIGN.md meminta 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: 600; 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); font-family: var(--f-judul); font-weight: 600; 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: 600; 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. KARTU PAKET, foto di atas, cip harga beraksen, tiga baris spesifikasi Cip harganya isian --aksen dengan teks --tinta (5,76:1). DESIGN.md menyebutnya dua kali: "price chip on package cards: accent fill, ink text, never white text". -------------------------------------------------------------------------- */ .kartu-paket { display: flex; flex-direction: column; padding: 0; overflow: hidden; /* WAJIB bersama overflow:hidden, keturunan berposisi absolut mengambil blok penampung dari leluhur BERPOSISI terdekat, jadi tanpa ini ia lolos dari pemangkasan dan menarik lebar dokumen. */ position: relative; } .kartu-paket > img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; } .kartu-paket-isi { padding: var(--r4); display: flex; flex-direction: column; gap: var(--r3); flex: 1; min-width: 0; } .kartu-paket h3 { font-size: 1.0625rem; margin: 0; } .kartu-paket .cip { align-self: flex-start; } .spek { display: grid; gap: var(--r2); margin: 0; } .spek div { display: flex; gap: var(--r2); align-items: flex-start; font-size: var(--t-kecil); color: var(--redup); min-width: 0; } .spek .ikon { margin-top: 2px; } .kartu-paket .tautan-panah { margin-top: auto; } /* ----------------------------------------------------------------------------- 41. DUA DAFTAR SEIMBANG, "sudah termasuk" dan "yang belum termasuk" Aturan kejujuran DESIGN.md: kedua daftar SAMA LEBAR dan SAMA BESAR HURUFNYA. Karena itu tidak ada .kecil di kolom kanan dan tidak ada 1fr .8fr di kisinya, daftar "belum termasuk" yang dikecilkan adalah cara paling halus membohongi pembaca, dan justru itu yang dilarang brief. -------------------------------------------------------------------------- */ .seimbang { display: grid; gap: var(--r5); } @media (min-width: 900px) { .seimbang { grid-template-columns: 1fr 1fr; gap: var(--r6); } } .seimbang > * { min-width: 0; } .seimbang h3 { font-size: 1.0625rem; margin-bottom: var(--r3); } .daftar-cek { display: grid; gap: var(--r3); } .daftar-cek li { display: flex; gap: var(--r3); align-items: flex-start; font-size: var(--t-isi); line-height: 1.5; min-width: 0; } .daftar-cek .ikon { margin-top: 3px; } /* ----------------------------------------------------------------------------- 42. AKORDEON ITINERARY,
asli, lingkaran nomor hari beraksen Lingkarannya isian --aksen dengan angka --tinta (5,76:1), sama seperti .langkah-nomor. Ia tetap terbaca tanpa warna karena angkanya sendiri yang membawa maknanya. -------------------------------------------------------------------------- */ .itin { border: 1px solid var(--garis); border-radius: var(--radius); background: var(--kertas); } .itin details { border-bottom: 1px solid var(--garis); } .itin details:last-child { border-bottom: 0; } .itin summary { display: flex; align-items: center; gap: var(--r3); cursor: pointer; min-height: 64px; padding: var(--r3) var(--r4); list-style: none; } .itin summary::-webkit-details-marker { display: none; } .itin summary .ikon:last-child { margin-left: auto; transition: transform .2s ease; } .itin details[open] summary .ikon:last-child { transform: rotate(180deg); } .itin-judul { display: block; font-weight: 600; font-size: var(--t-kecil); } .itin-rute { display: block; font-size: var(--t-kecil); color: var(--redup); } .itin .jawab { padding: 0 var(--r4) var(--r4) calc(var(--r4) + 28px + var(--r3)); color: var(--redup); font-size: var(--t-kecil); } .itin-makan { display: block; margin-top: var(--r3); color: var(--tinta); font-weight: 600; } @media (max-width: 560px) { .itin .jawab { padding-left: var(--r4); } } /* ----------------------------------------------------------------------------- 43. GALERI PER DESTINASI Tiap keterangan foto duduk di atas alas PEKAT #231A2E, bukan langsung di atas fotonya: sebuah foto tidak punya luminans tetap, jadi tidak ada warna teks yang bisa DIJAMIN mencapai 4,5:1 di atasnya. Dengan alas pekat, putih di atasnya 16,68:1 dan jaminannya kembali. -------------------------------------------------------------------------- */ .galeri { display: grid; gap: var(--r4); grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 700px) { .galeri { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1000px) { .galeri { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .galeri > * { min-width: 0; } .galeri figure { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--garis); background: var(--kertas); display: flex; flex-direction: column; position: relative; } /* lihat catatan overflow di bagian 40 */ .galeri img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .galeri figcaption { background: var(--tinta); color: var(--terbalik-teks); /* 15,99:1 */ font-size: var(--t-label); line-height: 1.4; padding: var(--r2) var(--r3); flex: 1; } /* Ubin tanpa foto, dua destinasi tidak punya foto sama sekali di run ini, dan memakai foto lain dengan keterangan yang dipaksakan berarti berbohong pada halaman yang justru menjual kejujuran. Ubin ini mengaku apa adanya. */ .galeri-absen { display: grid; place-content: center; justify-items: center; gap: var(--r2); aspect-ratio: 4 / 3; padding: var(--r4); text-align: center; color: var(--redup); 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; } .galeri-absen span { font-size: var(--t-label); max-width: 22ch; } /* Cip saringan destinasi: yang terpilih isian --aksen + teks --tinta (5,76:1), sisanya bergaris. Yang terpilih juga membawa aria-pressed, bukan warna saja. */ .saring { display: flex; flex-wrap: wrap; gap: var(--r2); margin-bottom: var(--r4); } .saring button { min-height: 44px; padding: var(--r2) var(--r4); cursor: pointer; border: 1px solid var(--garis-kendali); border-radius: 999px; background: var(--kertas); color: var(--tinta); font-family: var(--f-isi); font-size: var(--t-kecil); font-weight: 600; } .saring button[aria-pressed="true"] { background: var(--aksen); color: var(--tinta); border-color: var(--aksen); } .hitung-foto { display: flex; flex-wrap: wrap; gap: var(--r1) var(--r4); color: var(--redup); font-size: var(--t-kecil); margin-top: var(--r2); } /* ----------------------------------------------------------------------------- 44. PITA TERBALIK, jalur korporat, dan HANYA jalur korporat DESIGN.md: dua jalur pembeli yang tidak pernah dicampur. Pita ini alasnya --tinta dengan teks --terbalik-teks (15,99:1). Di dalamnya --redup DILARANG (2,35:1 di atas tinta), penggantinya --terbalik-redup (9,13:1). Aksen tetap boleh jadi ISIAN cip dan tombol di sini, karena tinta di atas aksen tetap 5,76:1 berapa pun alas di belakangnya. -------------------------------------------------------------------------- */ .terbalik { background: var(--tinta); color: var(--terbalik-teks); padding-block: var(--r8); } .terbalik .kepala-bagian p, .terbalik .redup, .terbalik .baris-nilai { color: var(--terbalik-redup); } /* 9,13:1 */ .terbalik .kartu { background: #2E2439; border-color: #45384F; color: var(--terbalik-teks); } .terbalik .kartu p { color: var(--terbalik-redup); } .terbalik .hero-mata { color: var(--terbalik-redup); } .terbalik .tombol-kedua { border-color: var(--terbalik-redup); color: var(--terbalik-teks); } .terbalik :focus-visible { outline-color: var(--terbalik-teks); } .terbalik .ikon-kotak { background: #3A2C46; color: var(--aksen); } /* 4,45:1 */ .terbalik .daftar-cek li { color: var(--terbalik-teks); } .terbalik .daftar-cek .ikon { color: var(--aksen); } /* 5,76:1 di atas tinta */ /* ----------------------------------------------------------------------------- 45. KARTU ORANG, potret persegi, nama, peran, dua baris lingkup kerja TANPA nomor sertifikat di mana pun (DESIGN.md + ATURAN-KONTEN.md §2b). -------------------------------------------------------------------------- */ .kartu-orang h3 { font-size: 1.0625rem; margin-bottom: 2px; } .kartu-orang .peran { display: block; font-size: var(--t-kecil); color: var(--aksen-pekat); font-weight: 600; margin-bottom: var(--r3); } /* 5,25:1 di atas kertas */ .kartu-orang p + p { margin-top: var(--r2); } /* ----------------------------------------------------------------------------- 46. KARTU KREDENSIAL, jenis · penerbit · status, TANPA nomor apa pun -------------------------------------------------------------------------- */ .kredensial h3 { font-size: var(--t-isi); } .kredensial .status { display: inline-flex; align-items: center; gap: var(--r2); margin-top: var(--r3); font-size: var(--t-kecil); font-weight: 600; } /* ----------------------------------------------------------------------------- 47. SNACKBAR MOBILE, melayang tepat di atas bar tab bawah -------------------------------------------------------------------------- */ .snackbar { display: flex; align-items: center; gap: var(--r4); background: var(--tinta); color: var(--terbalik-teks); /* 15,99:1 */ border-radius: var(--radius); padding: var(--r3) var(--r4); font-size: var(--t-kecil); max-width: 358px; } .snackbar button { margin-left: auto; background: none; border: 0; cursor: pointer; color: var(--aksen); font-weight: 600; font-family: var(--f-isi); font-size: var(--t-kecil); min-height: 44px; padding-inline: var(--r2); } /* ----------------------------------------------------------------------------- 48. CIP STATUS KURSI, warna TIDAK PERNAH sendirian, selalu ada katanya -------------------------------------------------------------------------- */ .cip-tersedia { background: var(--aksen); color: var(--tinta); } /* 5,76:1 */ .cip-hampir { background: var(--cip-hampir); color: var(--tinta); } /* 11,84:1 */ .cip-penuh { background: var(--cip-penuh); color: var(--tinta); } /* 12,54:1 */ .cip-status { display: inline-block; text-transform: none; letter-spacing: 0; font-size: var(--t-kecil); padding: var(--r1) var(--r3); white-space: nowrap; } /* Kolom aksi tabel jadwal: tombolnya kecil tapi tetap 44px tingginya. */ .tabel-jadwal .tombol { min-height: 44px; padding-inline: var(--r3); white-space: nowrap; } /* ----------------------------------------------------------------------------- 49. KARTU RINGKASAN BALASAN, empat baris waktu balasan di sebelah formulir -------------------------------------------------------------------------- */ .ringkas-kepala { display: flex; align-items: center; gap: var(--r3); margin-bottom: var(--r3); } .ringkas-kepala h3 { font-size: 1.0625rem; } /* ----------------------------------------------------------------------------- 50. HERO BERFOTO, teks TIDAK PERNAH duduk langsung di atas foto DESIGN.md: sebuah foto tidak punya luminans tetap, jadi tidak ada warna teks yang bisa dijamin 4,5:1 di atasnya. Di halaman ini teks hero duduk di KOLOM SENDIRI di sebelah fotonya, bukan di atasnya, cara paling murah untuk menutup seluruh kelas masalah ini tanpa satu pun scrim. -------------------------------------------------------------------------- */ .hero-foto img { aspect-ratio: 3 / 2; } .foto-keterangan { font-size: var(--t-label); color: var(--redup); margin-top: var(--r2); } /* Baris pembeda jalur korporat: lima butir pendek, ikon centang beraksen. */ .beda-jalur { display: grid; gap: var(--r3); } @media (min-width: 700px) { .beda-jalur { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (min-width: 1100px) { .beda-jalur { grid-template-columns: repeat(5, minmax(0,1fr)); } } .beda-jalur > * { min-width: 0; } /* Blok kebijakan bertumpuk */ .blok-kebijakan + .blok-kebijakan { margin-top: var(--r6); } .blok-kebijakan h3 { margin-bottom: var(--r3); } /* Halaman komponen: label keadaan huruf kecil-besar di kolom kiri */ .spek-baris { display: grid; gap: var(--r3); align-items: start; padding-block: var(--r4); border-bottom: 1px solid var(--garis); } @media (min-width: 760px) { .spek-baris { grid-template-columns: 12rem 1fr; gap: var(--r5); } } .spek-baris:last-child { border-bottom: 0; } .spek-baris > * { min-width: 0; } .spek-nama { font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--redup); } /* ----------------------------------------------------------------------------- 51. SEGMENTED CONTROL BERBASIS RADIO Brief W15 meminta "segmented control", dan yang paling mudah dibuat adalah dua