@charset "utf-8"; /* ============================================================================= Institut Teknologi Cendana — desain contoh (institusi fiktif) Sumber desain: stitch/04-perguruan-tinggi/ (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 BERKELAKUAN SEPERTI PAKET 02, BUKAN PAKET 03. Emas #C9A227 hanya 2,30:1 di atas latar: ia ISIAN saja. Teks DI ATASNYA wajib TINTA (6,67:1); putih di atasnya cuma 2,42:1 dan gagal AA. Ia tidak pernah boleh jadi warna teks, border kendali, cincin fokus, atau ikon fungsional — semuanya butuh 3:1, dan emas ini tidak sampai. Tiap tempat aksen dipakai ditinjau ulang, 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: #FAF9F6; /* alas halaman */ --kertas: #FFFFFF; /* alas kartu di atas --latar */ --sentuh: #EFEBE0; /* keadaan hover/tekan; tinta di atasnya 13,56:1 */ /* Teks */ --tinta: #0E1F45; /* 15,34:1 di atas --latar — teks utama, ukuran apa pun */ --redup: #55607A; /* 5,97:1 di atas --latar — teks sekunder, LULUS AA */ /* Aksen — PERANNYA LUAS di paket ini, dan itu memang sah */ --aksen: #C9A227; /* 2,30:1 di atas --latar → ISIAN saja: tombol, cip, pita, nomor langkah, batang diagram. DILARANG jadi warna teks, border kendali, cincin fokus, atau ikon fungsional — semuanya butuh minimal 3:1. Teks DI ATAS aksen wajib --tinta (6,67:1); putih di atasnya 2,42:1 dan GAGAL AA. */ --aksen-tekan: #B08E1E; /* keadaan ditekan; tinta di atasnya 5,18:1 */ --aksen-alas: #F6EFD9; /* alas lembut; yang di atasnya wajib tinta, bukan emas */ /* Garis */ --garis: #E3DFD4; /* 1,26:1 — DEKORATIF saja (pemisah, border kartu). DILARANG untuk border kendali interaktif. */ --garis-kendali:#55607A; /* 5,97:1 — border input, checkbox, tombol outline. Kendali interaktif wajib mencapai 3:1. */ /* Semantik — dihitung terhadap --latar */ --sukses: #12633F; /* 6,92:1 */ --galat: #B3261E; /* 6,21:1 */ --peringatan: #7A4B00; /* 7,04:1 */ --sukses-alas: #E6F1EA; --galat-alas: #FAEAE8; --peringatan-alas:#F7EFDE; /* Huruf. Judul SERIF (Lora 600) — DESIGN.md paket ini. Berbeda dengan paket 03, angka statistik dan tabel biaya di sini memakai HURUF JUDUL (Lora 600) dengan angka tabular, bukan Inter: itu yang diminta brief, dan yang wajib dipastikan adalah tabularnya, bukan keluarganya. */ --f-judul: "Lora", 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: 8px; /* DESIGN.md: radius 8px */ --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 dan tabel biaya: Lora 600 dengan angka TABULAR. Lora punya angka proporsional secara bawaan — tanpa font-variant-numeric, kolom rupiah tidak akan pernah sejajar, dan itu justru yang paling terlihat di tabel biaya. */ .angka { font-family: var(--f-judul); font-weight: 600; font-variant-numeric: tabular-nums; } /* CINCIN FOKUS — SELALU 2px tinta dengan offset 2px, di setiap keadaan dan setiap platform. Bukan selera: emas paket ini 2,30:1 di atas latar dan tidak sampai ke lantai 3:1 untuk komponen, jadi cincin fokus beremas adalah cincin fokus yang tidak terlihat. DESIGN.md menyebut aturan ini eksplisit. */ :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: var(--tinta); } /* 6,67:1 */ .tombol-utama:hover { background: var(--aksen-tekan); } /* 5,18: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 */ /* TIDAK ADA .ikon-aksen di paket ini: ikon fungsional beremas cuma 2,30:1. Ikon memakai --tinta (15,34:1) atau --redup (5,97:1). */ /* ----------------------------------------------------------------------------- 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); /* 6,67: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(--tinta); text-underline-offset: 3px; /* emas GAGAL 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 TINTA. Terhitung: tinta di atas emas #C9A227 6,67:1 LULUS, putih di atasnya 2,42:1 GAGAL. -------------------------------------------------------------------------- */ .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 emas ini TERANG, jadi cincin fokus tinta justru paling terlihat di sana — tidak ada pengecualian warna fokus di paket ini, dan itu memang yang diminta. */ /* 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: 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, 02 enam, 03 delapan, paket ini TIGA gelombang pendaftaran. Pola border-atas per langkah dari situs 03 dipertahankan karena ia bekerja untuk berapa pun jumlah kolom — yang diubah hanya angka kolomnya. -------------------------------------------------------------------------- */ .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); /* 6,67:1 */ font-family: var(--f-judul); font-weight: 600; 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(3, 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; } /* accent-color menggambar isian kendali DAN centangnya putih. Putih di atas emas 2,42:1, jadi kendalinya bertinta, bukan beremas. */ .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: 700; color: var(--tinta); } .segmen button + button { border-left: 1px solid var(--garis-kendali); } .segmen button[aria-pressed="true"] { background: var(--aksen); color: var(--tinta); } /* ----------------------------------------------------------------------------- 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(14,31,69,.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 LAGI. Situs 03 boleh memakai angka berwarna aksen karena aksennya 4,76:1. Emas paket ini 2,30:1 — angka beremas di atas latar nyaris tak terbaca — jadi polanya kembali ke bentuk situs 02: emas jadi BLOK, angkanya bertinta di atasnya (6,67:1). Ini keputusan yang DIHITUNG ulang, 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; display: inline-block; padding-inline: var(--r4); background: var(--aksen); color: var(--tinta); } .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: #C3C9D6; text-decoration: none; font-size: var(--t-kecil); } /* 9,72: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: #C3C9D6; 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 #26355C; display: flex; flex-wrap: wrap; gap: var(--r3); justify-content: space-between; font-size: var(--t-kecil); color: #C3C9D6; } .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 6 foto. Foto laboratoriumnya memuat NAMA INSTITUSI NYATA yang dicat di dinding; putaran tambal pertama meninggalkan bayangan ganda dan tulisannya tetap terbaca, jadi bingkainya DIPOTONG sampai tulisan itu keluar frame. Satu dosen (Dr. Retno Wulandari) tidak punya potret sama sekali dan memakai .potret-inisial, bukan foto orang lain yang mirip. 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 Label tab turun ke 11px dan padding dirapatkan. Wordmark paket ini tiga kata dan yang terpanjang di set ini, 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 "RANAH REMPAH NUSANTARA" plus tombol tombol berlabel panjang yang TIDAK boleh membungkus mendorong lebar halaman. Label tombol didiktekan brief dan diuji verbatim, jadi yang dicabut nowrap-nya. Diwarisi dari situs 03, dan tetap dipakai di sini karena wordmark paket ini bahkan lebih panjang. */ .navbar .tombol { white-space: normal; text-align: center; line-height: 1.2; padding-inline: var(--r2); } } /* Tombol sunting di baris ringkasan wizard */ .sunting { margin-left: auto; min-width: 44px; min-height: 44px; display: grid; place-items: center; background: none; border: 1px solid var(--garis); border-radius: var(--radius); cursor: pointer; } .sunting:hover { background: var(--sentuh); } /* ----------------------------------------------------------------------------- 29. 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; } } /* ----------------------------------------------------------------------------- 30. BATANG DISTRIBUSI (prospek kerja lulusan) Emas cuma 2,30:1 di atas latar, jadi batangnya TIDAK PERNAH sendirian membawa makna: tiap batang membawa labelnya sendiri di kiri dan angkanya bertinta di kanan. Alur batang juga diberi border supaya tepinya terlihat oleh mata yang tidak membedakan warna. -------------------------------------------------------------------------- */ .batang { display: grid; gap: var(--r3); } .batang-baris { display: grid; grid-template-columns: 9rem 1fr auto; gap: var(--r3); align-items: center; font-size: var(--t-kecil); } .batang-alur { height: 14px; background: var(--kertas); border: 1px solid var(--garis-kendali); border-radius: 999px; overflow: hidden; } .batang-isi { display: block; height: 100%; background: var(--aksen); } .batang-nilai { font-family: var(--f-judul); font-weight: 600; font-variant-numeric: tabular-nums; } @media (max-width: 480px) { .batang-baris { grid-template-columns: 1fr auto; } .batang-alur { grid-column: 1 / -1; } } /* ----------------------------------------------------------------------------- 31. KARTU KUTIPAN PERATURAN — garis kiri 4px emas, isinya bertinta -------------------------------------------------------------------------- */ .kutipan { background: var(--kertas); border: 1px solid var(--garis); border-left: 4px solid var(--aksen); border-radius: var(--radius); padding: var(--r5); display: flex; gap: var(--r4); align-items: flex-start; } .kutipan p { font-size: 1.0625rem; } /* ----------------------------------------------------------------------------- 32. TABEL BIAYA — kolom rupiah rata KANAN dan tabular, kolom total bertinta tebal -------------------------------------------------------------------------- */ .tabel-biaya td:not(:first-child), .tabel-biaya th:not(:first-child) { text-align: right; } .tabel-biaya td:not(:first-child) { font-family: var(--f-judul); font-weight: 600; font-variant-numeric: tabular-nums; } .tabel-biaya td:last-child { font-weight: 600; color: var(--tinta); } .tabel-biaya th:last-child, .tabel-biaya td:last-child { border-left: 1px solid var(--garis); } /* ----------------------------------------------------------------------------- 33. BARIS TANGGAL KALENDER — tanggal kiri tabular, kegiatan kanan -------------------------------------------------------------------------- */ .tanggal { display: grid; grid-template-columns: 13rem 1fr; gap: var(--r3); padding: var(--r3) 0; border-bottom: 1px solid var(--garis); font-size: var(--t-kecil); } .tanggal:last-child { border-bottom: 0; } .tanggal dt { font-family: var(--f-judul); font-weight: 600; font-variant-numeric: tabular-nums; } .tanggal dd { margin: 0; color: var(--redup); } @media (max-width: 640px) { .tanggal { grid-template-columns: 1fr; gap: var(--r1); } } /* ----------------------------------------------------------------------------- 34. WORDMARK MITRA — huruf saja, TIDAK PERNAH logo perusahaan sungguhan -------------------------------------------------------------------------- */ .mitra-nama { font-family: var(--f-judul); font-weight: 600; font-size: 1.125rem; letter-spacing: .01em; }