Proyek ini kini berfungsi penuh, tetapi tipografinya masih datar: semua judul memakai huruf sans-serif bawaan dan tidak ada penanda seksi yang khas. Bagian 6 memperbaikinya dengan dua langkah khas sistem desain. Pertama, menambah token tipografi baru ke :root — keluarga huruf judul dan dua ukuran skala — lalu mengarahkan judul-judul ke token tersebut, sehingga mengubah skala seluruh halaman cukup dengan menyunting tiga baris. Kedua, menambah detail kecil yang sangat membedakan: garis aksen pendek di bawah setiap judul seksi, ditulis dengan ::after. Ini juga latihan menimpa gaya lama dengan aturan baru, bukan menghapusnya.

Token Tipografi dan Judul Serif #

Tiga token baru masuk ke :root:

css 
--font-judul: Georgia, "Times New Roman", serif;
--ukuran-display: clamp(2.2rem, 5vw, 3.2rem);
--ukuran-seksi: clamp(1.45rem, 3vw, 1.85rem);

Georgia dipilih karena tersedia di hampir semua sistem tanpa unduhan, dan bentuk serifnya memberi kesan editorial yang cocok untuk portofolio desainer. Dua ukuran memakai clamp(): nilai tengah 5vw atau 3vw mengikuti lebar layar, sedangkan batas bawah dan atas menjaga judul tetap terbaca di ponsel dan tidak berlebihan di monitor besar.

Dua aturan lama lalu diarahkan ke token baru. .judul-halaman di seksi hero kini memakai font-family: var(--font-judul) dan font-size: var(--ukuran-display), menggantikan nilai clamp(2rem, 5vw, 3rem) dari Bagian 2 — sekarang besar judul bisa dinaikkan sekali di token dan seluruh halaman mengikuti. Untuk .section-judul, kita tidak menyunting aturan lamanya, melainkan menimpa dengan aturan baru di seksi tipografi:

css 
.section-judul {
  font-family: var(--font-judul);
  font-size: var(--ukuran-seksi); line-height: 1.25;
}

Selector dan specificity kedua aturan sama, sehingga keputusan akhir diserahkan pada urutan sumber — aturan yang lebih bawah menang. Pola “tulis ulang di seksi terpisah” ini membuat riwayat perubahan terbaca pada snapshot setiap bagian.

Garis Aksen dan Penyelarasan Warna #

Garis aksen lahir dari pseudo-element berukuran tetap:

css 
.section-judul::after {
  content: ""; display: block; width: 56px; height: 3px;
  margin-top: var(--jarak-2); border-radius: var(--radius-penuh);
  background-color: var(--warna-utama);
}

content: "" wajib agar pseudo-element tampil; display: block membuat garis turun ke baris sendiri; border-radius: var(--radius-penuh) memberi ujung membulat. Karena .panel-kontak berlatar rose, garis rose di atasnya tidak terlihat — maka satu override .panel-kontak .section-judul::after menukar warnanya menjadi putih.

Demo berikut menampilkan judul yang sama di atas latar terang dan di atas panel rose:

Sisi warna juga diselaraskan: .kartu-peran pada kartu proyek dari Bagian 3 yang semula rose diganti menjadi color: var(--warna-aksen). Peran sebagai informasi dan tombol sebagai ajakan kini terpisah warna, dan mata pengunjung belajar membaca perbedaan itu tanpa disuruh.

Snapshot Berkas Tahap Ini #

Berkas berikut adalah kondisi styles.css selelah Bagian 6; HTML tidak berubah pada bagian ini sehingga tidak disertakan:

css 
/* ============================================================
   Portofolio Desainer — stylesheet utama
   Kondisi: selelah Bagian 6
   Urutan seksi: token, base, kerangka, tombol, hero,
   galeri proyek, tentang, kontak, footer, navigasi responsif,
   responsif, tipografi seksi, keadaan interaksi, aksesibilitas
   ============================================================ */

/* ---------- 1. Design token ---------- */
:root {
  /* Warna semantik, tema terang */
  --warna-latar: #faf7f2;         --warna-permukaan: #ffffff;
  --warna-teks: #1c1917;          --warna-teks-lembut: #78716c;
  --warna-garis: #e7e5e4;         --warna-utama: #be123c;
  --warna-utama-pekat: #9f1239;   --warna-utama-kontras: #ffffff;
  --warna-utama-lembut: #ffe4e6;  --warna-utama-tinta: #881337;
  --warna-aksen: #0f766e;         --warna-aksen-lembut: #ccfbf1;

  /* Skala spasi, basis empat dan delapan piksel */
  --jarak-1: 4px;  --jarak-2: 8px;
  --jarak-3: 12px; --jarak-4: 16px;
  --jarak-5: 24px; --jarak-6: 32px;
  --jarak-7: 48px; --jarak-8: 64px;

  /* Radius sudut */
  --radius-kecil: 8px; --radius: 14px;
  --radius-penuh: 999px;

  /* Elevasi bayangan */
  --bayangan-1: 0 1px 2px rgba(28, 25, 23, 0.06);
  --bayangan-2: 0 8px 20px rgba(28, 25, 23, 0.10);
  --bayangan-3: 0 16px 32px rgba(190, 18, 60, 0.16);

  /* Tipografi dan gerak */
  --font-dasar: system-ui, "Segoe UI", sans-serif;
  --tinggi-baris: 1.65;
  --font-judul: Georgia, "Times New Roman", serif;
  --ukuran-display: clamp(2.2rem, 5vw, 3.2rem);
  --ukuran-seksi: clamp(1.45rem, 3vw, 1.85rem);

  --durasi: 200ms; --pelunakan: ease-out;

  /* Kerangka halaman */
  --lebar-isi: 1020px;
}

/* ---------- 2. Base dan reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0; font-family: var(--font-dasar); line-height: var(--tinggi-baris);
  background-color: var(--warna-latar); color: var(--warna-teks);
}

h1, h2, h3, p, ul { margin: 0; }
img { display: block; max-width: 100%; }

/* ---------- 3. Kerangka halaman ---------- */
.pembungkus {
  max-width: var(--lebar-isi);
  margin-inline: auto; padding-inline: var(--jarak-4);
}

.laman-kepala {
  position: sticky; top: 0; z-index: 20;
  padding-block: var(--jarak-3);
  background-color: var(--warna-permukaan);
  border-bottom: 1px solid var(--warna-garis);
}

.kepala-baris {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: var(--jarak-3); flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: var(--jarak-2); }
.brand img { width: 34px; height: 34px; }
.brand-nama { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }

.nav-utama { display: flex; gap: var(--jarak-4); }
.nav-utama a { color: var(--warna-teks-lembut); font-size: 15px; font-weight: 600; text-decoration: none; }
.nav-utama a:hover { color: var(--warna-utama); }

/* ---------- 4. Tombol ---------- */
.tombol {
  display: inline-block;
  padding: 10px 20px; border: none;
  border-radius: var(--radius-kecil);
  background-color: var(--warna-utama); color: var(--warna-utama-kontras);
  font: inherit; font-size: 15px; font-weight: 600;
  text-decoration: none; cursor: pointer;
}

.tombol--garis {
  border: 1px solid var(--warna-utama);
  background-color: transparent; color: var(--warna-utama);
}

/* ---------- 5. Hero dan perkenalan ---------- */
.hero { padding-block: var(--jarak-8) var(--jarak-7); max-width: 680px; }

.hero-pembuka {
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--warna-utama);
}

.judul-halaman {
  margin-top: var(--jarak-3);
  font-family: var(--font-judul);
  font-size: var(--ukuran-display);
  line-height: 1.15; letter-spacing: -0.02em;
}

.pengantar { margin-top: var(--jarak-4); max-width: 52ch; font-size: 17px; color: var(--warna-teks-lembut); }

.hero-aksi { display: flex; flex-wrap: wrap; gap: var(--jarak-3); margin-top: var(--jarak-5); }

.section-judul { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; }

.perkenalan {
  max-width: 62ch; padding-block: var(--jarak-6);
  border-top: 1px solid var(--warna-garis);
}

.perkenalan p + p { margin-top: var(--jarak-3); }

/* ---------- 6. Galeri proyek ---------- */
.seksi-karya { margin-top: var(--jarak-7); }

.galeri-proyek {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--jarak-5); margin-top: var(--jarak-5);
}

.kartu-proyek {
  overflow: hidden;
  background-color: var(--warna-permukaan); border: 1px solid var(--warna-garis);
  border-radius: var(--radius); box-shadow: var(--bayangan-1);
}

.sampul { display: grid; place-items: center; aspect-ratio: 16 / 10; }

.sampul--kopi { background: linear-gradient(135deg, #7c2d12, #ea580c); }
.sampul--setor { background: linear-gradient(135deg, #1e3a8a, #3b82f6); }
.sampul--katalog { background: linear-gradient(135deg, #831843, #ec4899); }
.sampul--lumbung { background: linear-gradient(135deg, #134e4a, #14b8a6); }
.sampul--senja { background: linear-gradient(135deg, #312e81, #6366f1); }
.sampul--rupa { background: linear-gradient(135deg, #18181b, #71717a); }

.sampul-huruf { font-size: 64px; font-weight: 800; color: rgba(255, 255, 255, 0.92); }

.kartu-isi { padding: var(--jarak-4) var(--jarak-4) var(--jarak-5); }
.kartu-nama { font-size: 18px; font-weight: 800; }
.kartu-peran { margin-top: 2px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--warna-aksen); }
.kartu-catatan { margin-top: var(--jarak-2); font-size: 14.5px; color: var(--warna-teks-lembut); }

/* ---------- 7. Tentang dan keahlian ---------- */
.seksi-tentang { margin-top: var(--jarak-7); }

.tentang-grid {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: var(--jarak-6); margin-top: var(--jarak-4);
}

.tentang-bio p + p { margin-top: var(--jarak-3); }
.tentang-bio p { color: var(--warna-teks-lembut); }

.tentang-label {
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--warna-aksen);
}

.daftar-chip {
  display: flex; flex-wrap: wrap;
  gap: var(--jarak-2); margin-top: var(--jarak-3);
  padding: 0; list-style: none;
}

.chip {
  padding: 6px 14px;
  border: 1px solid var(--warna-garis);
  border-radius: var(--radius-penuh);
  background-color: var(--warna-permukaan);
  font-size: 14px; font-weight: 600;
  color: var(--warna-teks-lembut);
}

/* ---------- 8. Kontak ---------- */
.seksi-kontak { margin-top: var(--jarak-7); }

.panel-kontak {
  display: grid; justify-items: start;
  gap: var(--jarak-3); padding: var(--jarak-7) var(--jarak-6);
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--warna-utama-tinta), var(--warna-utama));
  color: var(--warna-utama-kontras);
}

.panel-kontak p { max-width: 46ch; color: #ffe4e6; }

.panel-kontak .tombol { background-color: var(--warna-permukaan); color: var(--warna-utama-tinta); }

/* ---------- 9. Footer ---------- */
.laman-kaki {
  margin-top: var(--jarak-8); padding-block: var(--jarak-6);
  background-color: var(--warna-permukaan);
  border-top: 1px solid var(--warna-garis);
}

.kaki-baris {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: var(--jarak-3); flex-wrap: wrap;
  font-size: 14px; color: var(--warna-teks-lembut);
}

/* ---------- 10. Navigasi responsif ---------- */
.tombol-nav {
  display: none; flex-direction: column;
  align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--warna-garis);
  border-radius: var(--radius-kecil);
  background-color: var(--warna-permukaan); cursor: pointer;
}

.tombol-nav-garis { position: relative; display: block; width: 20px; height: 2px; background-color: var(--warna-teks); }

.tombol-nav-garis::before, .tombol-nav-garis::after {
  content: ""; position: absolute; left: 0;
  width: 20px; height: 2px; background-color: var(--warna-teks);
}

.tombol-nav-garis::before { top: -6px; }
.tombol-nav-garis::after { top: 6px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- 11. Responsif ---------- */
@media (max-width: 720px) {
  .tombol-nav { display: flex; }

  .nav-utama {
    display: none;
    flex-direction: column;
    gap: var(--jarak-2);
    width: 100%;
    padding-block: var(--jarak-3);
  }

  .nav-utama.terbuka { display: flex; }
}

/* ---------- 12. Tipografi seksi ---------- */
.section-judul {
  font-family: var(--font-judul);
  font-size: var(--ukuran-seksi); line-height: 1.25;
}

.section-judul::after {
  content: ""; display: block; width: 56px; height: 3px;
  margin-top: var(--jarak-2); border-radius: var(--radius-penuh);
  background-color: var(--warna-utama);
}

.panel-kontak .section-judul::after { background-color: var(--warna-utama-kontras); }

Ringkasan #

Tipografi halaman kini punya karakter: judul serif berskala token dan garis aksen di bawah setiap judul seksi, sementara warna label dan aksi terpisah rapi. Bagian 7 memberi gerak: transisi pada komponen dan animasi masuk yang bertingkat.