# Style-Guide Conformance Review
**Prototype v3 "Meridian" — body-home.html**
**Tanggal:** 2026-06-11

Meninjau kesesuaian implementasi Services V2, Prefooter, dan VIH Journal terhadap `style-guide.css`.

---

## ✅ Yang sudah benar

| Elemen | Detail |
|--------|--------|
| **Space tokens** | `--space-xs`, `--space-sm`, `--space-2xl` dipakai konsisten |
| **Border tokens** | `--rule-on-dark` (card normal), `--rule-gold` (card hover) — persis yang didefinisikan untuk dark surface |
| **Text tokens** | `--on-dark` (h3 card), `--on-dark-soft` (p card), `--gold-bright` (h3 hover) — semua benar |
| **Icon hover** | `color: var(--gold)` saat hover, `color: #fff` di kondisi normal — selaras |
| **Scrim pattern** | `.scrim` + `.scrim__bg` dipakai sesuai definisi style-guide section 8 |
| **Prefooter** | Struktur `.prefooter__inner`, `.prefooter__actions`, `.trust-bar`, `.trust` persis sesuai style-guide section 15 |
| **Button** | `.btn`, `.btn--md` — benar |
| **Eyebrow** | `.eyebrow`, `::before` hairline — class benar |
| **Section/container** | `.section`, `.section--sm`, `.container` — benar |
| **Motion system** | `.u-reveal` untuk global reveal, `[data-v2-reveal]` dipisah untuk V2 (bidirectional stagger) — scoping tepat |

---

## ⚠️ Penyimpangan kecil (tidak ada yang kritis)

### 1. `color: #fff` di beberapa tempat
Style-guide mendefinisikan `--on-dark: #E9E7E1` (warm white) untuk teks di atas dark surface. Beberapa elemen pakai inline `style="color:#fff;"` — misalnya h2 di Services V2, eyebrow, dan lead di prefooter.

**Catatan:** style-guide sendiri juga pakai `#fff` untuk `.prefooter h2` dan `.mega__feature .name`, jadi bukan pelanggaran besar. Acceptable untuk tahap mockup.

---

### 2. Eyebrow di dark surface → putih, bukan `--gold-bright`
Style-guide mendefinisikan `[class*="surface-navy"] .eyebrow { color: var(--gold-bright); }`. Karena Services V2 tidak pakai `.surface-*` (pakai `.scrim`), auto-inversion tidak berlaku. Warna eyebrow di-override manual ke `#fff` atas permintaan eksplisit.

Konsisten secara visual, hanya berbeda dari konvensi style-guide untuk eyebrow on dark.

---

### 3. `filter:brightness(1.8)` pada BG div Services V2
Workaround prototype — tidak ada token/pattern untuk ini di style-guide.

**Catatan untuk build:** saat implementasi ke Kadence, ganti dengan pendekatan Kadence-compatible (misal: layer overlay semi-transparan putih via `::before`, atau edit brightness langsung di image editor sebelum di-upload).

---

### 4. Section index "04" muncul dua kali
Services V1 dan V2 sama-sama memakai `04`. Bukan pelanggaran style-guide, tapi bisa membingungkan saat review mockup dengan klien. Perlu disesuaikan jika V2 masuk ke mockup final.

---

### 5. Card background `rgba(6,11,20,0.40)` — nilai hardcoded
`6,11,20` adalah nilai hex dari `--ink`. CSS tidak bisa langsung interpolasi variable hex ke rgba, sehingga hardcode adalah satu-satunya cara saat ini.

**Catatan untuk build:** definisikan token alpha terpisah, misalnya `--ink-surface: rgba(6,11,20,0.40)`.

---

## Kesimpulan

Tidak ada yang perlu diperbaiki untuk tahap prototype saat ini. Semua penyimpangan disengaja atau sudah disetujui secara eksplisit. 

**Satu item yang perlu ditangani saat masuk ke tahap build:**
- `filter:brightness(1.8)` di BG div Services V2 harus diganti solusi Kadence-compatible.