@charset "utf-8"; /* ============================================================================= Ranah Rempah Nusantara — desain contoh (perusahaan fiktif) Sumber desain: stitch/03-agribisnis-eksportir/ (DESIGN.md + PROMPTS-WEB/MOBILE/STATE) MODE WARNA DIKUNCI TERANG. Seluruh rasio di bawah dihitung untuk latar terang saja. Mencabut kuncian di berarti menghitung ulang SETIAP pasangan warna lebih dulu, bukan sekadar menghapus atributnya. AKSEN PAKET INI KEBALIKAN DARI PAKET 02. Di situs 02 aksennya kuning hi-vis 1,47:1 — hanya boleh jadi ISIAN, dan teks di atasnya wajib tinta. Di sini aksennya hijau tua 4,76:1 di atas latar: ia BOLEH jadi warna teks dan garis, dan teks DI ATASNYA wajib PUTIH. Tiap tempat aksen dipakai karena itu ditinjau ulang satu per satu, bukan disalin. ========================================================================== */ @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: #FBF9F4; /* alas halaman, seperti kertas */ --kertas: #FFFFFF; /* alas kartu di atas --latar */ --sentuh: #F1EDE3; /* keadaan hover/tekan; tinta di atasnya 13,93:1 */ /* Teks */ --tinta: #10241A; /* 15,48:1 di atas --latar — teks utama, ukuran apa pun */ --redup: #4E6357; /* 6,15:1 di atas --latar — teks sekunder, LULUS AA */ /* Aksen — PERANNYA LUAS di paket ini, dan itu memang sah */ --aksen: #1B7F4F; /* 4,76:1 di atas --latar → boleh jadi warna TEKS (>=4,5), garis, cincin fokus, dan ikon fungsional. Teks DI ATAS aksen wajib PUTIH (5,01:1); tinta di atas aksen cuma 3,25:1 dan GAGAL AA. */ --aksen-tekan: #14633D; /* keadaan ditekan; putih di atasnya 7,29:1 */ --aksen-alas: #E7F0EA; /* alas lembut beraksen; aksen di atasnya 4,30:1 → DILARANG jadi alas teks beraksen berukuran isi. */ /* Garis */ --garis: #E6E1D6; /* 1,24:1 — DEKORATIF saja (pemisah, border kartu). DILARANG untuk border kendali interaktif. */ --garis-kendali:#4E6357; /* 6,15:1 — border input, checkbox, tombol outline. Kendali interaktif wajib mencapai 3:1. */ /* Semantik — dihitung terhadap --latar */ --sukses: #14633D; /* 6,93:1 */ --galat: #A8261C; /* 6,75:1 */ --peringatan: #7A4B00; /* 7,04:1 */ --sukses-alas: #E7F0EA; --galat-alas: #F7EAE8; --peringatan-alas:#F6EFE0; /* Huruf. Judul SERIF (Source Serif 4 600) — DESIGN.md paket ini. Angka statistik, hasil lab, dan tabel harga memakai INTER 700 tabular, bukan huruf judul: kolom angka dibandingkan lajur lawan lajur, jadi digitnya wajib sejajar. */ --f-judul: "Source Serif 4", ui-serif, Georgia, serif; --f-isi: "Inter", ui-sans-serif, 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: 6px; /* DESIGN.md: radius maksimal 6px */ --lebar-isi: 1240px; --tepi: 1.25rem; /* gutter, dipakai SEMUA section supaya sejajar */ --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: 600; line-height: 1.2; margin: 0; } h1 { font-size: clamp(2.125rem, 5vw, 3.375rem); letter-spacing: -0.01em; } h2 { font-size: clamp(1.5rem, 3.2vw, 2.25rem); letter-spacing: -0.01em; } h3 { font-size: clamp(1.125rem, 1.9vw, 1.375rem); } p { margin: 0; } img { max-width: 100%; height: auto; display: block; } ul, ol { margin: 0; padding: 0; list-style: none; } a { color: inherit; } /* Angka statistik, hasil lab, dan harga wajib rata kolom — dan wajib INTER, bukan huruf judul serif: DESIGN.md menyebutnya eksplisit dan alasannya nyata, angka serif proporsional tidak pernah sejajar antar-baris tabel. */ .angka { font-family: var(--f-isi); font-weight: 700; font-variant-numeric: tabular-nums; } /* Nama botani ditulis miring di teks sekunder — konvensi penulisan ilmiah, dan pembeli rempah membacanya sebagai penanda pemasok yang tahu barangnya. */ .botani { font-style: italic; color: var(--redup); font-size: var(--t-kecil); } /* CINCIN FOKUS — tinta, BUKAN aksen. Aksen di sini sebenarnya SAH untuk cincin fokus (4,76:1 > 3:1), tapi tinta 15,48:1 tetap lebih terlihat di atas kartu putih maupun di atas pita beraksen, dan satu warna fokus untuk seluruh situs lebih mudah dipertahankan daripada dua. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; border-radius: 4px; } /* Lewati ke konten — wajib ada, dan wajib terlihat saat difokus. */ .lewati { position: absolute; left: var(--tepi); top: -100px; z-index: 100; background: var(--tinta); color: #fff; padding: var(--r3) var(--r4); border-radius: var(--radius); font-weight: 700; text-decoration: none; } .lewati:focus-visible { top: var(--r3); } /* ----------------------------------------------------------------------------- 3. TATA LETAK -------------------------------------------------------------------------- */ .bungkus { width: 100%; max-width: var(--lebar-isi); margin-inline: auto; padding-inline: var(--tepi); } .bagian { padding-block: var(--r7); } .bagian + .bagian { border-top: 1px solid var(--garis); } @media (min-width: 768px) { .bagian { padding-block: var(--r8); } } .kepala-bagian { margin-bottom: var(--r5); max-width: 62ch; } .kepala-bagian p { color: var(--redup); margin-top: var(--r2); } .kisi { display: grid; gap: var(--r4); } @media (min-width: 640px) { .kisi-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 900px) { .kisi-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kisi-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 640px) and (max-width: 899px) { .kisi-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Tiap anak kisi WAJIB boleh menyusut, kalau tidak isi yang lebar mendorong lebar halaman dan yang dilaporkan meluber justru elemen lain. */ .kisi > * { min-width: 0; } /* ----------------------------------------------------------------------------- 4. PITA "DESAIN CONTOH" — tidak bisa ditutup, wajib di tiap halaman -------------------------------------------------------------------------- */ .pita { background: var(--tinta); color: #fff; /* 16,29: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: 700; 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: 700; border-radius: var(--radius); border: 1px solid transparent; text-decoration: none; cursor: pointer; background: none; color: var(--tinta); transition: background-color .15s ease, border-color .15s ease; } .tombol-utama { background: var(--aksen); color: #fff; } /* 5,01:1 */ .tombol-utama:hover { background: var(--aksen-tekan); } /* 7,29:1 */ .tombol-utama:active { background: var(--aksen-tekan); } .tombol-kedua { border-color: var(--garis-kendali); color: var(--tinta); } /* 6,15:1 */ .tombol-kedua:hover { background: var(--sentuh); } .tombol-blok { width: 100%; } .tombol[disabled], .tombol[aria-disabled="true"] { background: #EDE8DC; 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); } /* 6,15:1 — ikon fungsional lulus 3:1 */ .ikon-aksen { color: var(--aksen); } /* 4,76:1 — sah untuk ikon fungsional */ /* ----------------------------------------------------------------------------- 8. KARTU — border 1px, TANPA bayangan (DESIGN.md) -------------------------------------------------------------------------- */ .kartu { background: var(--kertas); border: 1px solid var(--garis); border-radius: var(--radius); padding: var(--r4); } .kartu h3 { margin-bottom: var(--r2); } .kartu p { color: var(--redup); font-size: var(--t-kecil); } .cip { display: inline-block; background: var(--aksen); color: #fff; /* 5,01:1 */ font-size: var(--t-label); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px var(--r2); border-radius: 4px; } .cip-netral { background: #EDE8DC; color: var(--tinta); } .tautan-panah { display: inline-flex; align-items: center; gap: var(--r1); font-size: var(--t-kecil); font-weight: 700; text-decoration: none; color: var(--aksen); text-underline-offset: 3px; /* 4,76:1 — sah sebagai teks */ } .tautan-panah:hover { text-decoration: underline; } /* ----------------------------------------------------------------------------- 9. HERO -------------------------------------------------------------------------- */ .hero { display: grid; gap: var(--r5); align-items: center; } @media (min-width: 900px) { .hero { grid-template-columns: 1.05fr .95fr; gap: var(--r7); } } .hero-mata { font-size: var(--t-kecil); font-weight: 700; color: var(--redup); letter-spacing: .06em; text-transform: uppercase; } .hero h1 { margin-block: var(--r3); } .hero-sub { color: var(--redup); font-size: 1.0625rem; max-width: 56ch; } .hero-aksi { display: flex; flex-wrap: wrap; gap: var(--r3); margin-top: var(--r5); } .hero-aksi .tombol { min-height: 52px; } /* aksi utama di mobile 52px */ .hero-statistik { display: flex; flex-wrap: wrap; gap: var(--r5); margin-top: var(--r5); padding-top: var(--r4); border-top: 1px solid var(--garis); } .hero-statistik div { min-width: 0; } .hero-statistik .angka { font-size: 1.25rem; display: block; } .hero-statistik span:last-child { font-size: var(--t-kecil); color: var(--redup); } .hero-foto { border-radius: var(--radius); border: 1px solid var(--garis); overflow: hidden; } .hero-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } /* ----------------------------------------------------------------------------- 10. PITA STATISTIK BERAKSEN — SELURUH teks di atasnya wajib PUTIH. Ini kebalikan persis dari paket 02, dan alasannya terhitung: putih di atas #1B7F4F 5,01:1 LULUS, tinta di atasnya 3,25:1 GAGAL. -------------------------------------------------------------------------- */ .pita-statistik { background: var(--aksen); color: #fff; padding-block: var(--r6); } .pita-statistik .kisi { gap: var(--r5); grid-template-columns: repeat(2, minmax(0,1fr)); } @media (min-width: 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); } /* Fokus keyboard di atas pita gelap: cincin tinta hilang di sana, jadi diputihkan. */ .pita-statistik :focus-visible, .pita-aksen :focus-visible { outline-color: #fff; } /* Pita kalimat beraksen (premium Fairtrade) — sama aturannya, teks putih. */ .pita-aksen { background: var(--aksen); color: #fff; border-radius: var(--radius); padding: var(--r5); font-size: 1.0625rem; } /* ----------------------------------------------------------------------------- 11. BARIS DAFTAR NATIVE — padanan mobile untuk tabel dan dropdown. Tinggi minimal 56px. Dipakai juga di desktop karena polanya memang terbaca. -------------------------------------------------------------------------- */ .daftar { border: 1px solid var(--garis); border-radius: var(--radius); background: var(--kertas); } .baris { display: flex; align-items: center; gap: var(--r3); min-height: 56px; padding: var(--r3) var(--r4); border-bottom: 1px solid var(--garis); } .baris:last-child { border-bottom: 0; } .baris-isi { min-width: 0; flex: 1; } /* Keduanya WAJIB blok. Sebagai span inline, judul dan keterangannya menyambung jadi satu paragraf dan barisnya berhenti terbaca sebagai baris daftar native — terlihat jelas di 390px, tidak terlihat sama sekali dari kode. */ .baris-label { display: block; font-weight: 700; font-size: var(--t-kecil); } .baris-nilai { display: block; font-size: var(--t-kecil); color: var(--redup); } /* Baris dua kolom (label kiri, nilai kanan) tetap sebaris: di situ keterangannya pendek dan memang berpasangan, bukan judul-dan-penjelasan. */ .baris > .baris-nilai:first-child { display: inline; } /* TANPA nowrap. Nilai panjang seperti "Monday to Friday 08.00 to 17.00, Saturday 08.00 to 13.00, GMT+7" tidak bisa membungkus dan mendorong lebar halaman: terukur meluber 54px di 320px pada situs 02, dan yang dilaporkan meluber justru
, bukan span penyebabnya. */ .baris-kanan { margin-left: auto; font-weight: 700; font-size: var(--t-kecil); text-align: right; min-width: 0; overflow-wrap: anywhere; } .baris-kanan.angka { font-weight: 700; } a.baris { text-decoration: none; } a.baris:hover { background: var(--sentuh); } /* ----------------------------------------------------------------------------- 12. TABEL — GARIS MENDATAR SAJA, tinggi baris 48px (DESIGN.md). Di bawah 768px tabel lebar tetap bisa digulir mendatar di dalam kotaknya sendiri; halamannya TIDAK ikut bergeser. -------------------------------------------------------------------------- */ .tabel-bungkus { overflow-x: auto; border: 1px solid var(--garis); border-radius: var(--radius); background: var(--kertas); } 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; } /* 13,93: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 lab: kolom hasil ditebalkan supaya angka yang dicari pembeli menonjol. */ .tabel-lab td:nth-child(2) { font-weight: 700; } 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. ⚠️ JUMLAH KOLOM WAJIB DITINJAU TIAP PAKET. Situs 01 lima langkah, situs 02 enam, paket ini DELAPAN dan brief-nya minta "two rows of four". Timeline yang garis penghubungnya satu batang lurus (pola situs 01/02) TIDAK bisa dipakai untuk dua baris: batangnya akan menyeberangi celah antar-baris. Jadi di ≥900px polanya ditukar — garis penghubung dipasang sebagai border-atas PADA TIAP LANGKAH, sehingga tiap baris otomatis punya garisnya sendiri, berapa pun jumlah barisnya. -------------------------------------------------------------------------- */ .timeline { position: relative; padding-left: 44px; } .timeline::before { content: ""; position: absolute; left: 15px; top: 12px; bottom: 12px; width: 2px; background: var(--garis); } .langkah { position: relative; padding-bottom: var(--r5); } .langkah:last-child { padding-bottom: 0; } .langkah-nomor { position: absolute; left: -44px; top: 0; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--aksen); color: #fff; /* 5,01:1 */ font-family: var(--f-isi); 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: 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 (6,15:1), bukan --garis (1,24:1) -------------------------------------------------------------------------- */ .bidang { display: block; margin-bottom: var(--r4); } .bidang > label, .label { display: block; font-size: var(--t-kecil); font-weight: 700; margin-bottom: var(--r2); } .kolom { width: 100%; min-height: 48px; padding: var(--r3); /* 16px WAJIB: di bawah itu Safari iOS ikut memperbesar layar saat kolom difokus. */ font-size: var(--t-isi); font-family: var(--f-isi); color: var(--tinta); background: var(--kertas); border: 1px solid var(--garis-kendali); border-radius: var(--radius); } .kolom::placeholder { color: #6B7280; } textarea.kolom { min-height: 120px; resize: vertical; } .bantuan { font-size: var(--t-kecil); color: var(--redup); margin-top: var(--r2); } .bantuan-galat { color: var(--galat); font-weight: 700; } /* 6,75:1 */ .bantuan-sukses { color: var(--sukses); font-weight: 700; } /* 6,93:1 */ .kolom[aria-invalid="true"] { border-color: var(--galat); border-width: 2px; } .kolom[disabled] { background: #EDE8DC; color: var(--redup); cursor: not-allowed; } .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); } /* 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; } .pilihan input { width: 20px; height: 20px; accent-color: var(--aksen); flex: none; } .pilihan label:has(input:checked) { border-color: var(--aksen); border-width: 2px; background: var(--aksen-alas); } /* Segmented control — padanan mobile untuk radio 2 sampai 3 opsi */ .segmen { display: flex; border: 1px solid var(--garis-kendali); border-radius: var(--radius); overflow: hidden; } .segmen button { flex: 1; min-height: 48px; border: 0; background: var(--kertas); cursor: pointer; font-family: var(--f-isi); font-size: var(--t-kecil); font-weight: 700; color: var(--tinta); } .segmen button + button { border-left: 1px solid var(--garis-kendali); } .segmen button[aria-pressed="true"] { background: var(--aksen); color: #fff; } /* ----------------------------------------------------------------------------- 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: 700; box-shadow: inset 0 3px 0 0 var(--aksen); } .tab-bar .ikon { width: 22px; height: 22px; } @media (min-width: 900px) { .tab-bar { display: none; } body { padding-bottom: 0; } } /* ----------------------------------------------------------------------------- 19. BOTTOM SHEET — padanan mobile untuk dropdown -------------------------------------------------------------------------- */ .lapis { position: fixed; inset: 0; z-index: 50; background: rgba(16,36,26,.55); 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: #EDE8DC; 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 BALIK dari situs 02. Di sana angkanya dibuat BLOK beraksen karena aksennya kuning 1,47:1 dan mustahil jadi teks. Aksen paket ini 4,76:1 — lulus AA bahkan untuk teks ukuran isi — jadi polanya boleh kembali ke bentuk situs 01: angka besar berwarna aksen, tanpa blok. Ini keputusan yang DIHITUNG, bukan disalin dari situs mana pun. -------------------------------------------------------------------------- */ .galat-kode { font-family: var(--f-judul); font-weight: 600; font-size: clamp(3rem, 12vw, 6rem); line-height: 1.1; color: var(--aksen); display: block; } .galat-halaman p { 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: #fff; padding-block: var(--r7); margin-top: var(--r7); } .footer a { color: #BFCCC3; text-decoration: none; font-size: var(--t-kecil); } /* 9,80:1 */ .footer a:hover { color: #fff; text-decoration: underline; } .footer h4 { font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--r3); } .footer li { margin-bottom: var(--r2); } .footer-atas { display: grid; gap: var(--r5); } @media (min-width: 768px) { .footer-atas { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--r6); } } .footer-tentang { color: #BFCCC3; 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 #2A3D31; display: flex; flex-wrap: wrap; gap: var(--r3); justify-content: space-between; font-size: var(--t-kecil); color: #BFCCC3; } .footer :focus-visible { outline-color: #fff; } /* ----------------------------------------------------------------------------- 23. UTILITAS -------------------------------------------------------------------------- */ .hanya-layar-baca { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .tumpuk-2 { display: grid; gap: var(--r2); } .tumpuk-3 { display: grid; gap: var(--r3); } .tumpuk-4 { display: grid; gap: var(--r4); } .redup { color: var(--redup); } .kecil { font-size: var(--t-kecil); } @media (min-width: 900px) { .hanya-mobile { display: none !important; } } @media (max-width: 899px) { .hanya-desktop { display: none !important; } } /* ----------------------------------------------------------------------------- 24. GERAK DIKURANGI — hormati preferensi sistem -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .tulang::after { animation: none; } } /* ----------------------------------------------------------------------------- 25. FOTO PRODUK, POTRET, DAN PENGGANTI FOTO Run Stitch paket ini menghasilkan 14 foto dan SATU DIBUANG seluruhnya: foto gula semut siap ritel yang kemasannya bermerek "COCOVITA" di delapan tempat sekaligus (pouch, kardus, sisi kardus). Mengaburkan delapan titik akan jadi persis jebakan paket 02 — kotak buram lebih mencolok daripada yang disembunyikannya — sementara penggantinya sudah ada: foto studio gula semut yang bersih tanpa kemasan. Yang tidak punya foto TIDAK diberi kotak abu kosong dan TIDAK diberi foto stok yang mengaku milik kami: ia diberi pengganti yang tampak disengaja. -------------------------------------------------------------------------- */ .produk-foto, .foto-kosong { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--garis); background: #EDE8DC; } .foto-kosong { display: grid; place-content: center; justify-items: center; gap: var(--r2); color: var(--redup); /* 6,15:1 */ background-color: #EDE8DC; 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 { display: grid; place-items: center; background: #EDE8DC; color: var(--redup); 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 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: #EDE8DC; 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; } .spek-tata { grid-template-columns: 2fr 1fr; gap: var(--r6) !important; } /* Ketertelusuran: paspor lot di kiri, tabel lab yang lebih lebar di kanan. */ .lot-tata { grid-template-columns: 1fr 1.35fr; gap: var(--r6) !important; } } /* ----------------------------------------------------------------------------- 26. PENCARI PRODUK — tiga dropdown plus tombol -------------------------------------------------------------------------- */ .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 Lima tab berlabel panjang tidak muat di kolom 64px pada 12px, dan bar tab memaksa lebar halaman melar. Label tab turun ke 11px dan padding dirapatkan. -------------------------------------------------------------------------- */ @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 tiga kata ini yang paling panjang di seluruh set situs. */ .wordmark { font-size: 0.6875rem; } /* TERUKUR, bukan ditaksir: di 320px "RANAH REMPAH NUSANTARA" plus tombol "Request a Quotation" yang TIDAK boleh membungkus mendorong halaman 28px. Label tombolnya tidak bisa dipendekkan — kalimat itu didiktekan brief dan diuji verbatim — jadi yang dicabut nowrap-nya: tombolnya membungkus jadi dua baris dan berhenti mendorong lebar halaman. Situs 02 tidak pernah kena ini karena labelnya cuma dua kata. */ .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. WIZARD PERMINTAAN — satu langkah satu layar (halaman /request). Formulir tiga belas kolom tidak pernah enak di 390px; polanya ditukar jadi wizard, bilah kemajuan menempel di atas, tombol lanjut menempel di bawah. -------------------------------------------------------------------------- */ .wizard-kepala { position: sticky; top: 0; z-index: 30; background: var(--latar); /* TINGGI DIKUNCI. Kalau tingginya lahir dari padding plus tinggi baris, angkanya berubah mengikuti huruf yang termuat dan pengganjal jangkar tidak akan pernah tepat. 44px baris + 4px bilah + 1px garis = 49px, dan itu yang dipakai. */ height: 49px; box-sizing: border-box; border-bottom: 1px solid var(--garis); margin-bottom: var(--r5); } .wizard-maju { height: 44px; display: flex; align-items: center; gap: var(--r3); font-size: var(--t-kecil); font-weight: 700; } .wizard-maju .redup { font-weight: 400; margin-left: auto; } .wizard-bar { height: 4px; background: var(--garis); } .wizard-bar span { display: block; height: 100%; background: var(--aksen); transition: width .25s ease; } @media (prefers-reduced-motion: reduce) { .wizard-bar span { transition: none; } } .wizard-langkah { border: 0; padding: 0; margin: 0; } .wizard-aksi { position: sticky; bottom: var(--bar-bawah); z-index: 25; display: flex; gap: var(--r3); padding-block: var(--r4); background: linear-gradient(to bottom, transparent, var(--latar) 40%); } .wizard-aksi .tombol { flex: 1; min-height: 52px; } @media (min-width: 900px) { .wizard-aksi { bottom: 0; } .wizard-aksi .tombol { flex: 0 1 auto; min-width: 180px; } }