/* Theme Name: FMIPA Unpad Theme URI: https://fmipa.unpad.ac.id Author: Tim Pengembang FMIPA Unpad Description: Tema custom Fakultas MIPA Universitas Padjadjaran. Dibangun generik (nama fakultas & warna via opsi) supaya bisa dipakai ulang fakultas lain. Lihat docs/ARSITEKTUR.md dan docs/BRAND-GUIDELINE.md di repo untuk spesifikasi lengkap. Version: 0.3.0 Requires at least: 6.4 Requires PHP: 8.1 Text Domain: fmipa License: Proprietary — milik FMIPA Unpad, tanpa kunci vendor. */ /* ========================================================================== 1. Token warna & tipografi (turunan docs/BRAND-GUIDELINE.md §4-5) Nilai default di bawah adalah fallback FMIPA — bisa dioverride via opsi "Pengaturan Identitas" (lihat inc/class-fmipa-theme-options.php) supaya tema tetap generik untuk fakultas lain. ========================================================================== */ :root { --fmipa-green: #00B26B; --fmipa-green-dark: #008050; --fmipa-red: #ED1C24; --fmipa-red-dark: #D91820; --unpad-yellow: #FDB913; --fmipa-black: #111517; --fmipa-white: #FFFFFF; --fmipa-gray-50: #F7F8F8; --fmipa-gray-200: #E4E7E7; --fmipa-gray-500: #6B7280; /* "Ink" — hitam-kehijauan (bukan hitam netral) utk section gelap; turunan --fmipa-green-dark, bukan warna baru di luar sistem brand. */ --fmipa-ink: #071912; /* Merah tua — SHADE dari merah FMIPA, bukan warna baru. Hue-nya 357°, sama persis dengan --fmipa-red #ED1C24 (357,7°); yang diturunkan cuma lightness (52% -> 38%). Hubungannya ke --fmipa-red identik dengan hubungan --fmipa-ink ke --fmipa-green-dark. Alasannya kontras, bukan selera. Merah merek #ED1C24 tidak bisa jadi bidang besar bertulisan: 4,38:1 dengan putih dan 4,19:1 dengan hitam — gagal AA di KEDUA arah, jadi tidak ada teks yang bisa berdiri di atasnya. Digelapkan ke #B0121A, teks putih dapat 7,12:1 dan ruang sisanya cukup untuk teks redup (putih 80% = 4,95:1) yang di #D91820 (5,12:1) sudah tidak muat lagi. */ --fmipa-red-deep: #B0121A; /* Scrim hero — hijau merek yang digelapkan, BUKAN --fmipa-ink. Hue-nya sama persis dengan --fmipa-green (156°), jadi ini shade dari warna merek, bukan warna baru di luar sistem. Dipisah dari --fmipa-ink karena perannya beda: ink itu latar pita solid dengan teks putih, scrim ini lapisan semi-transparan di atas foto/video. Kegelapannya dipilih dari hitungan kontras, bukan selera. Pada alpha gabungan yang dipakai di area deskripsi hero (0,67), teks putih di atas piksel latar TERBURUK (putih penuh) mendapat: #003D28 -> 4,68:1 lolos AA teks normal #00553A -> 3,87:1 GAGAL #008050 -> 2,83:1 GAGAL telak Patokannya piksel terburuk, bukan rata-rata: latarnya video, jadi kecerahannya berubah tiap frame. Menaikkan alpha memang membuat hijau yang lebih terang ikut lolos, tapi itu menutupi videonya — justru hal yang mau ditampilkan. Format triplet (bukan hex) supaya bisa dipakai sebagai rgba(var(--fmipa-hero-scrim), alpha). */ --fmipa-hero-scrim: 0, 61, 40; --fmipa-ink-soft: #0F2A1F; --fmipa-ink-line: rgba(255,255,255,0.09); /* Latar utility bar (baris paling atas, di atas nav utama). Dulu --fmipa-black — netral, jadi identitas fakultas baru muncul di bawah garis header. Dipindah ke hijau merek supaya warna fakultas hadir di piksel pertama halaman, pola yang sama dipakai fakultas lain di Unpad. Nilainya hijau merek yang DIGELAPKAN — bukan --fmipa-green (#00B26B), bukan pula --fmipa-green-dark (#008050). Hue-nya sama persis (156°), jadi ini shade dari warna merek, bukan warna baru di luar sistem. Dua alasan memilih yang gelap: 1. Peran. Bar ini bukan pita konten, melainkan bingkai utilitas di atas header putih. Hijau terang di posisi itu bersaing dengan tombol CTA hijau di header dan hero tepat di bawahnya. 2. Kontras. Teks putih di atasnya terukur: #00B26B -> 2,30:1 gagal telak #008050 -> 4,99:1 lolos AA, tanpa ruang aman #003D28 -> 11,70:1 lolos AAA #003020 -> 14,50:1 lolos AAA dgn ruang lega <- dipakai Batas bawahnya --fmipa-ink (#071912): di situ hijaunya sudah tidak terbaca lagi sebagai warna, cuma hitam. #003020 masih satu langkah di atas batas itu — rasio G:B dijaga 1,5 (sama seperti #003D28) supaya yang berubah hanya kegelapannya, bukan hue-nya. Token tersendiri supaya fakultas lain yang memakai ulang tema ini bisa menukarnya ke satu warna saja — mis. #3D080C untuk identitas merah. */ --fmipa-utility-bar-bg: #003020; --fmipa-font: "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --fmipa-font-headline: "Unpad Sans", "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif; /* Angka data/statistik — kesan pembacaan instrumen presisi, bahasa visual sains/matematika. Tumpukan monospace sistem, tanpa unduhan font baru. */ --fmipa-font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, monospace; /* Skala tipografi — SATU deret, seluruhnya fluid. Sebelumnya h1/h2 fluid (clamp) tapi h3/h4 dipatok px. Akibatnya rasio antar-tingkat berubah-ubah per viewport, dan di desktop muncul jurang: terukur 48 -> 44 (1,09x) -> 20 (2,20x) -> 16 -> 16. Judul kartu, sub-judul, dan teks body praktis tak terbedakan, sementara antara judul section dan judul kartu ada lompatan lebih dari dua kali lipat. Sesudah, rasio menaik bertahap dan tetap wajar di kedua ujung (angka di bawah HASIL UKUR di browser, bukan pembacaan nilai clamp): desktop 1440 68 / 44 / 28 / 18 / 16 -> 1,55 1,57 1,56 1,13 tablet 768 42 / 28 / 22 / 18 / 16 -> 1,51 1,27 1,22 1,13 ponsel 390 40 / 28 / 22 / 18 / 16 -> 1,43 1,27 1,22 1,13 Catatan: suku vw pada --fmipa-fs-h4 baru mengambil alih di atas ~1636px, jadi di semua lebar layar yang realistis h4 duduk di nilai minimumnya (18px). Itu memang diinginkan — rasionya terhadap body tetap 1,13 di mana pun, dan tidak ada gunanya membuat label kecil ikut memuai. */ --fmipa-fs-h1: clamp(2.5rem, 5.5vw, 4.25rem); --fmipa-fs-h2: clamp(1.75rem, 3.5vw, 2.75rem); --fmipa-fs-h3: clamp(1.375rem, 2vw, 1.75rem); /* Judul KARTU sengaja punya token sendiri, lebih kecil dari h3 dokumen. h3 setingkat section ("Pakar Kami") berdiri di kolom selebar container dan boleh 28px; judul kartu berdiri di kolom ~260px, dan pada 28px ia membungkus jadi menara 4 baris — terlihat langsung di grid Program Studi. Ukurannya soal LEBAR KOLOM, bukan tingkat heading, jadi dipisah tokennya alih-alih menurunkan h3 global dan mengorbankan sub-judul section. */ --fmipa-fs-card-title: clamp(1.125rem, 1.3vw, 1.375rem); --fmipa-fw-bold: 700; --fmipa-fw-extrabold: 800; --fmipa-fw-medium: 500; --fmipa-fw-regular: 400; --fmipa-tracking-tight: -0.02em; --fmipa-container: 1200px; /* Rel kedua, khusus baris-baris DI DALAM header. Nav utama tidak muat di 1200px (alasan terukur di .fmipa-site-header__inner), dan utility bar di atasnya harus ikut rel yang sama: dua baris yang menempel vertikal dibaca mata sebagai satu blok, jadi tepi kiri/kanan yang meleset 60px per sisi terbaca sebagai bug, bukan keputusan desain. Yang tetap beda adalah header vs konten halaman (1200px) — itu memang disengaja. 1320px SEMPAT dipakai dan terbukti 15,2px terlalu sempit: dengan menu yang sekarang, nav utama butuh 841,6px (jumlah lebar 6 item 769,6px + 5 gap x 14,4px) sementara container 1320px cuma menyisakan 827px untuknya (1320 - 64 padding - 189 logo - 208 CTA - 32 gap). Karena kekurangannya ada pada NILAI MAKSIMUM container, memperlebar viewport tidak pernah menolong — item terakhir ("Mahasiswa") membungkus ke baris kedua di SEMUA lebar layar, termasuk 1920px, lalu terpotong tepi bawah header. 1360px menyisakan 867px, jadi ada 25px kelonggaran. KELONGGARANNYA CUMA 25px DAN ISINYA BISA DIUBAH ADMIN. Menambah satu item nav atau memperpanjang satu label akan mematahkannya lagi. Cara mengukur ulang, tempel di konsol pada lebar >=1360px: ul=document.querySelector('.fmipa-nav-primary > ul'); g=parseFloat(getComputedStyle(ul).columnGap); k=[...ul.children]; butuh=k.reduce((a,li)=>a+li.getBoundingClientRect().width,0)+g*(k.length-1); console.log(butuh, ul.getBoundingClientRect().width); Angka pertama harus lebih kecil dari angka kedua. Kalau tidak, naikkan nilai di bawah ini DAN ambang media query nav (dua-duanya, lihat blok "Ambang nav utama"). JANGAN pakai ul.scrollWidth untuk ini: nav memakai justify-content:flex-end sehingga luapannya jatuh ke sisi KIRI, dan luapan kiri tidak ikut terhitung di scrollWidth — ia melaporkan angka yang selalu terlihat pas. */ --fmipa-container-header: 1360px; --fmipa-radius: 0.5rem; --fmipa-radius-lg: 1rem; --fmipa-gap: clamp(3rem, 7vw, 6rem); --fmipa-shadow-sm: 0 1px 2px rgba(7,25,18,0.06), 0 1px 1px rgba(7,25,18,0.04); --fmipa-shadow-md: 0 8px 24px -8px rgba(7,25,18,0.16), 0 2px 6px -2px rgba(7,25,18,0.08); --fmipa-shadow-lg: 0 24px 48px -16px rgba(7,25,18,0.24); /* easeOutExpo — untuk umpan balik SENTUHAN (hover, fokus, tombol) yang berdurasi 0,2-0,3s. Di rentang sependek itu kurva yang berat di depan justru yang benar: responsnya terasa seketika. */ --fmipa-ease: cubic-bezier(0.16, 1, 0.3, 1); /* easeOutQuart — untuk animasi MASUK saat digulir (geser section, garis aksen judul, watermark). Dipisah dari --fmipa-ease karena masalahnya berlawanan: di sini durasinya 0,7-0,9s, dan easeOutExpo menghabiskan jaraknya jauh sebelum durasi itu selesai — terukur, geseran 24px/700ms sudah tersisa <1px pada 316ms, jadi dua pertiga durasinya bergerak di bawah ambang yang bisa dilihat mata. Dengan kurva ini jendela terlihat naik ke 448ms, sejajar dengan kaskade kartu di fmipa-anim.js (454ms). */ --fmipa-ease-masuk: cubic-bezier(0.25, 1, 0.5, 1); /* Abu-abu 600 — saudara langsung --fmipa-gray-500 yang sudah ada, bukan keluarga warna baru. Dibutuhkan karena #6B7280 gagal AA (4,46:1) di atas latar bertint terang yang dipakai sistem pita. */ --fmipa-gray-600: #4B5563; /* Hijau 8% di atas putih — pita tint. Turunan palet, bukan warna baru. */ --fmipa-green-tint: #EBF9F3; /* Token PITA (lihat §3a). Default di :root = tampilan terang biasa, jadi komponen di LUAR pita (arsip, halaman detail) tetap seperti semula. */ --fmipa-band-bg: var(--fmipa-white); --fmipa-band-fg: var(--fmipa-black); --fmipa-band-fg-muted: var(--fmipa-gray-600); --fmipa-band-accent: var(--fmipa-green-dark); --fmipa-band-link: var(--fmipa-green-dark); --fmipa-band-line: var(--fmipa-gray-200); --fmipa-band-focus: var(--fmipa-green-dark); --fmipa-band-btn-outline: var(--fmipa-green-dark); /* Skala spasi — sebelumnya cuma ada --fmipa-gap tunggal. Nilai fluid di bawah persis menyamai angka yang selama ini di-hardcode di file ini, jadi ini kodifikasi, bukan perubahan tampilan. */ --fmipa-space-3xs: 0.25rem; --fmipa-space-2xs: 0.5rem; --fmipa-space-xs: 0.75rem; --fmipa-space-sm: 1rem; --fmipa-space-md: 1.5rem; --fmipa-space-lg: 2rem; --fmipa-space-xl: 3rem; --fmipa-space-2xl: 4rem; --fmipa-space-section: clamp(3rem, 7vw, 6rem); --fmipa-space-band: clamp(4rem, 9vw, 7.5rem); --fmipa-space-header: clamp(2rem, 4vw, 3.5rem); --fmipa-space-grid: clamp(1rem, 3vw, 2rem); /* Skala tipografi di bawah h3 + ukuran angka statistik raksasa. */ --fmipa-fs-display: clamp(3.5rem, 9vw, 7.5rem); /* Ikut fluid supaya rasionya terhadap h3 dan body stabil lintas viewport (lihat catatan skala di blok --fmipa-fs-h1 di atas). */ --fmipa-fs-h4: clamp(1.125rem, 1.1vw, 1.25rem); --fmipa-fs-body: 1rem; --fmipa-fs-sm: 0.9375rem; --fmipa-fs-xs: 0.875rem; --fmipa-fs-2xs: 0.8125rem; --fmipa-fs-eyebrow: 0.75rem; --fmipa-lh-display: 0.95; --fmipa-tracking-display: -0.03em; --fmipa-tracking-caps: 0.06em; --fmipa-tracking-eyebrow: 0.14em; /* Token kartu — dikonsumsi .fmipa-card. Default di bawah = persis tampilan lama, sehingga arsip/detail tidak berubah sama sekali; section beranda bisa menugaskan ulang token ini (mis. kartu tanpa chrome di atas pita warna) tanpa menyentuh .fmipa-card itu sendiri. */ /* Kartu memisahkan diri dari latar lewat SATU alat: beda warna bidang. Sebelumnya dipakai tiga sekaligus — garis 1px, bayangan, DAN sudut membulat — untuk menyampaikan satu hal yang sama. Itu ciri kartu era 2018, dan REFERENSI-PSIKOLOGI.md §9a memang menulis "card putih tanpa border/shadow tebal — flat". Yang lebih parah: bidangnya putih di atas section putih, jadi terukur 13 dari 38 kartu beranda punya latar PERSIS SAMA dengan induknya — garis itu memisahkan kartu dari... tidak ada apa-apa. Karena itu latar bawaan kartu sekarang tint, bukan putih, dan pita yang sudah berwarna membalikkannya jadi putih (lihat aturan per-pita di bawah). */ --fmipa-card-bg: var(--fmipa-green-tint); --fmipa-card-fg: var(--fmipa-black); /* gray-600, bukan gray-500. Saat latar kartu masih putih, gray-500 lolos tipis di 4,83. Begitu latarnya jadi tint (#EBF9F3) rasionya turun ke 4,46 — di BAWAH ambang AA 4,5 untuk teks normal. Terjaring sapuan QA, dan memang regresi yang dibawa perubahan latar kartu itu sendiri. gray-600 aman di kedua latar: 7,56 di putih, 6,97 di tint. */ --fmipa-card-fg-muted: var(--fmipa-gray-600); --fmipa-card-link: var(--fmipa-green-dark); --fmipa-card-line: transparent; --fmipa-card-shadow: none; --fmipa-card-shadow-hover: none; --fmipa-card-radius: var(--fmipa-radius-lg); --fmipa-card-pad: 1.75rem; --fmipa-card-lift: -4px; } /* Tekstur "graph paper" tipis — bahasa visual presisi matematika. Murni CSS, nol request gambar tambahan. Garisnya membaca --fmipa-band-line, bukan --fmipa-ink-line: sejak warna pita dihitung dari posisi render, section bertekstur ini bisa mendarat di pita terang mana pun, dan garis versi ink (terang, untuk latar gelap) akan lenyap di sana. Lewat token, tiap pita menyuplai garisnya sendiri yang sudah serasi. Nilai untuk pita ink tetap --fmipa-ink-line, jadi tampilan section gelap yang sudah ada tidak berubah. */ .fmipa-grid-texture { background-image: linear-gradient(var(--fmipa-band-line) 1px, transparent 1px), linear-gradient(90deg, var(--fmipa-band-line) 1px, transparent 1px); background-size: 48px 48px; } /* SENGAJA tidak animasikan opacity (cuma transform) — teks section yang belum discroll ke viewport sempat OPACITY:0 cukup lama (nunggu observer atau jaring pengaman 2.5s di nav-toggle.js), dan alat yang mengambil snapshot DOM di jendela itu (Lighthouse a11y audit, screen reader cepat, dst.) membaca itu sbg teks kontras 0 vs latar — ketemu lewat audit Lighthouse (accessibility 100 -> 97 setelah fmipa-reveal dipasang luas). transform-only tetap dapat efek "geser masuk" tanpa risiko itu. */ @media (prefers-reduced-motion: no-preference) { .fmipa-reveal { transform: translateY(24px); transition: transform 0.8s var(--fmipa-ease-masuk); } .fmipa-reveal.is-visible { transform: translateY(0); } } /* ========================================================================== 1a. Unpad Sans — typeface utama resmi (docs/BRAND-GUIDELINE.md §5), dipakai untuk headline (H1/H2, hero) sejak file diterima dari Dit. Pemasaran. Noto Sans tetap dipakai untuk body text (OFL, tidak butuh self-host berlisensi terpisah). @font-face DIDEKLARASIKAN DI theme.json (fontFace), bukan di sini — WP otomatis meng-generate-nya (termasuk font-display:swap) dan menyediakannya juga ke pemilih font block editor. Jangan duplikasi @font-face manual di sini. ========================================================================== */ /* ========================================================================== 2. Reset ringkas ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } /* Elemen form dan tombol TIDAK mewarisi font dari induknya menurut spesifikasi — browser memberi mereka font default sendiri. Tanpa baris ini, setiap