/* Primitif section homepage dan halaman dalam. * * Berkas ini sengaja terpisah dari base.css: base.css memuat baseline * aksesibilitas dan chrome yang berlaku di setiap halaman, sedangkan * berkas ini memuat bahasa visual section yang hanya relevan pada halaman * berkonten pattern. * * Literal px yang disengaja di berkas ini, dan alasannya. Cakupan daftar * ini hanya literal px di dalam deklarasi properti (konstanta visual atau * geometri) — lebar breakpoint di dalam media query bukan bagian dari * daftar ini dan tidak perlu ditambahkan ke sini; titik potong layout * adalah keputusan struktural, bukan konstanta bahasa visual komponen * seperti tiga nilai di bawah: * 1px — lebar border hairline, tidak menskala dengan ukuran font * 2px — border di atas step item .pintarin-steps__item * -4px — jarak angkat .pintarin-card saat hover, jarak tetap yang * sengaja tidak menskala dengan ukuran font * 3px — lebar penanda vertikal .pintarin-section__head--lead::before, * konstanta grafis yang sengaja tidak menskala dengan ukuran font */ .pintarin-section { padding-block: clamp(4rem, 8vw, 8rem); } /* Section berselang-seling. Isian sendirian tidak cukup: di ujung terang * ramp, surface-base putih melawan surface-subtle neutral-100 hanya 1,10:1, * dan tidak ada nilai neutral yang bisa dipilih tanpa membuat halaman kelabu * — menggelapkan isian sampai terbaca akan menabrak nada tenang yang * ditetapkan spec 3.7. Karena itu pemisahannya datang dari tiga hal * sekaligus, sesuai spec 3.7 aturan 3: isian berbeda, garis batas hairline * yang digambar, dan tekstur radial yang sangat samar sehingga permukaannya * punya arah, bukan bidang rata. * * Tekstur dipasang sebagai background-image di atas background-color, bukan * sebagai pseudo-element: ia murni dekoratif, tidak pernah menerima * interaksi, dan pseudo-element akan menuntut stacking context sendiri di * setiap section tanpa imbalan apa pun. * * Garis batas hanya digambar dengan border-block-start, sesuai huruf spec * 3.7 aturan 3 — bukan border-block-end sekaligus. Border tidak collapse * seperti margin: dua section --subtle yang bertetangga akan membuat tepi * yang bersentuhan tergambar dua kali (2px, dua kali lebih tebal dari * hairline yang dipakai di tempat lain) kalau start dan end sama-sama * digambar. Sebagai gantinya, setiap batas digambar tepat sekali: batas * MASUK ke section subtle digambar oleh border-start section subtle itu * sendiri; batas KELUAR dari section subtle digambar oleh border-start * section polos yang mengikutinya (aturan sibling di bawah). Tidak ada * elemen yang pernah menerima dua border-top, jadi penggandaan bukan cuma * dihindari — ia mustahil terjadi. */ .pintarin-section--subtle { background-color: var(--pintarin-surface-subtle); background-image: var(--pintarin-surface-texture); border-block-start: 1px solid var(--pintarin-border-subtle); } .pintarin-section--subtle + .pintarin-section:not(.pintarin-section--subtle) { border-block-start: 1px solid var(--pintarin-border-subtle); } /* Blok pengantar section. * * Selektor sengaja 0-2-0 (.pintarin-section .pintarin-section__head), bukan * 0-1-0, sebagai pertahanan terhadap adu spesifisitas dengan gaya layout * WordPress yang dicetak inline di — lihat rincian di bawah. * * Yang diperbaiki: elemen ini adalah anak langsung layout constrained * (.pintarin-section), dan diberi max-width lebih sempit (68ch, * --pintarin-measure) daripada kolom konten (1200px). WordPress memberi * SETIAP anak langsung seperti ini `margin-left/right: auto !important` * lewat selektor `.is-layout-constrained > :where(:not(.alignleft)...)`, dan * !important selalu menang atas deklarasi non-important berapa pun * spesifisitasnya. Kombinasi max-width sempit + margin-auto paksa itu * memusatkan kotak head SENDIRIAN, bukan meratakannya ke kiri. Terukur * sebelum perbaikan: head duduk di x=316,8 sementara konten section (mis. * .pintarin-diagram-scroll) mulai di x=115 — meleset 201,8px. * * Percobaan pertama menimpa dengan `margin-inline: 0` GAGAL, dan bukan * karena spesifisitas: elemen konten di bawah head adalah anak langsung * constrained yang SAMA, dan pada viewport lebar (diverifikasi 1440px, * content-size 1200px, lebar section tersedia 1382px) ia SENDIRI juga * menerima margin-auto paksa 91px dari aturan yang identik. Menimpa margin * head jadi 0 hanya memindah cacatnya ke -91px, bukan menghapusnya — head * dan konten butuh mekanisme yang sama persis, bukan margin head yang * dipaksa ke nilai tetap. * * Solusinya: jangan bersaing pada property yang dikuasai WordPress sama * sekali. `max-width` dan `margin-inline` DIHAPUS dari elemen ini, sehingga * max-width 1200px dan margin-auto paksa milik WordPress berlaku apa * adanya — kotak LUAR head jadi identik dengan kotak konten di bawahnya * pada breakpoint manapun, termasuk saat konten sendiri tidak mendapat * margin tambahan (mobile, lihat spacingStyles). Lebar baca yang sempit * dipindah ke `grid-template-columns: minmax(0, var(--pintarin-measure))` — * property yang tidak pernah disentuh WordPress, jadi tidak ada lagi * pertarungan cascade — dengan `justify-content: start` merapatkan track * itu ke tepi kiri kotak luar yang sudah benar posisinya. Selektor 0-2-0 * tetap dipertahankan sebagai jaring pengaman, tapi cakupannya terbatas: * ia hanya melindungi jika task mendatang menambah kembali max-width di * elemen ini — aturan WordPress untuk max-width (layout.php baris 137) * TIDAK !important, jadi 0-2-0 sungguh menang di sana. Ia TIDAK melindungi * dari margin: aturan margin WordPress (layout.php baris 138-139) memang * !important, dan spesifisitas berapa pun tidak pernah mengalahkan * !important. Itu sebabnya solusi di atas menghapus margin-inline sama * sekali, bukan mencoba menimpanya. * * Diverifikasi di 390/768/1440: selisih head-vs-konten = 0 di ketiganya, * tanpa overflow horizontal. Pada varian --center headingLeft tetap 316,8 * (identik posisi lama) karena yang berubah hanya track measure-nya, bukan * kotak luarnya — pemusatan itu tetap disengaja, bukan residu bug. Spec 3.7 * aturan 1 melarang cacat 201,8px ini. */ .pintarin-section .pintarin-section__head { display: grid; grid-template-columns: minmax(0, var(--pintarin-measure)); justify-content: start; gap: var(--wp--preset--spacing--20); } .pintarin-section .pintarin-section__head--center { justify-content: center; text-align: center; } /* Varian rata kiri dengan penanda vertikal. Dipakai untuk membongkar * monotoni delapan section rata-tengah berturut-turut (spec 3.7 aturan 2, * kuota maksimal tiga dari sepuluh). Penandanya gradient brand, bukan warna * datar, supaya ia membawa motif yang sama dengan wadah ikon kartu tanpa * menambah elemen berwarna baru ke halaman. */ .pintarin-section__head--lead { position: relative; padding-inline-start: var(--wp--preset--spacing--40); } .pintarin-section__head--lead::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.18em; inline-size: 3px; block-size: 2.1em; border-radius: var(--pintarin-radius-pill); background-image: linear-gradient(180deg, var(--pintarin-brand-primary), var(--pintarin-brand-accent)); } /* Komposisi dua bagian asimetris. Rasio 5fr:6fr, bukan 1fr:1fr — dua kolom * yang persis sama lebar membaca sebagai tabel, bukan sebagai komposisi, dan * asimetri ringan inilah yang membedakan halaman yang disusun dari halaman * yang dibagi dua. Titik potong 900px dipilih sama dengan .pintarin-feature * yang sudah ada, supaya situs ini tidak punya dua ambang split berbeda. */ .pintarin-split { display: grid; gap: var(--wp--preset--spacing--60); grid-template-columns: 1fr; align-items: center; } @media (min-width: 900px) { .pintarin-split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } /* Membalik urutan visual tanpa membalik urutan DOM: urutan baca dan * urutan fokus keyboard tetap teks lebih dulu, visual sesudahnya, di * kedua arah. Membalik di markup akan membuat pembaca layar menerima * ilustrasi dekoratif sebelum teks yang menjelaskannya. */ .pintarin-split--reverse > :first-child { order: 2; } } /* Hero. * * Section ini memakai layout default (alir), bukan constrained, karena ia * tempat yang spec 3.7 aturan 5 izinkan menembus kolom konten 1200px BILA * ilustrasinya sendiri dirancang untuk diteruskan melewati tepi. Layout * constrained akan menahan setiap anaknya di 1200px dan membuat bleed * semacam itu mustahil tanpa alignfull yang merepotkan di dalam pattern. * Konsekuensinya lebar kedua anaknya diatur eksplisit di sini, bukan * diwarisi dari layout. * * Ilustrasi yang terpasang saat ini — tumpukan lima pelat isometrik — adalah * objek utuh dalam bingkainya sendiri, bukan susunan yang sengaja meneruskan * diri melewati tepi seperti ilustrasi sebelumnya. Objek utuh yang di-bleed * bukan diperpanjang, melainkan DIPOTONG (persis keluhan berulang klien atas * ilustrasi lama), jadi rule 5 mengharuskan objek semacam ini tidak bleed. * Karena itu .pintarin-hero__inner di bawah diberi padding-inline-end yang * meniru padding-inline-start persis, bukan nol seperti sebelumnya: tepi * kanan grid sekarang mendarat di tepi kanan kolom konten, sama seperti * tepi kiri, alih-alih menembus ke tepi viewport. * * padding-inline dilepas pada 1024px ke atas supaya perhitungan perataan * bekerja terhadap lebar penuh section — kalau padding section masih ada, * .pintarin-hero__inner akan terinset dua kali (padding section ditambah * padding-nya sendiri). Melepasnya lalu menghitung ulang dari lebar penuh * memberi tepi kiri DAN kanan yang persis sama dengan kolom konten 1200px * section mana pun: (100% - 1200px) / 2. * * Selektor padding-inline sengaja 0-2-0 (.pintarin-section.pintarin-hero), * bukan 0-1-0 (.pintarin-hero). WordPress menandai anak langsung layout * constrained sebagai .has-global-padding dan aturan kelas itu * (class-wp-theme-json.php:3270) TIDAK !important — beda dari margin-auto * constrained yang memang !important. Karena kontesnya murni spesifisitas, * 0-2-0 menang tanpa bergantung pada urutan muat antara style inline * WordPress di dan stylesheet ter-enqueue ini. */ .pintarin-section.pintarin-hero { padding-inline: var(--wp--preset--spacing--40); background-image: var(--pintarin-hero-wash); } .pintarin-hero__inner, .pintarin-hero__baseline { max-width: var(--pintarin-content-max); margin-inline: auto; } .pintarin-hero__baseline { margin-block-start: var(--wp--preset--spacing--70); } .pintarin-hero__visual { margin-block-start: var(--wp--preset--spacing--60); } .pintarin-hero__visual img { display: block; width: 100%; height: auto; } @media (min-width: 1024px) { .pintarin-section.pintarin-hero { padding-inline: 0; } .pintarin-hero__inner { display: grid; grid-template-columns: minmax(0, 32rem) minmax(0, 1fr); align-items: center; column-gap: var(--wp--preset--spacing--60); max-width: none; margin-inline: 0; padding-inline-start: max(var(--wp--preset--spacing--40), (100% - var(--pintarin-content-max)) / 2); padding-inline-end: max(var(--wp--preset--spacing--40), (100% - var(--pintarin-content-max)) / 2); } /* max-width + margin-inline: auto (base rule above) centers a box by * splitting leftover space evenly, with NO floor: once the section is * narrower than 1200px the margins collapse to 0 and the box's left edge * lands at 0, not at the 24px inset every other element on this hero * keeps. That formula only agrees with .pintarin-hero__inner's * padding-inline-start above once the section is wider than 1248px * (1200px + two 24px floors) — measured at exactly 1024px viewport width * the baseline sat at x=0 while the h1 sat at x=24, a real 24px * mismatch, not a rounding artifact. Below 1024px this never surfaces * because the section still carries its own padding-inline, so the * mismatch is unique to this breakpoint. * * padding-inline-start on .pintarin-hero__inner works because that * element's OWN box already spans the full section width (grid track), * so padding shifts where its children start. .pintarin-hero__baseline * has no children that need shifting relative to itself — it IS the * box being measured against the h1 — so the fix has to move the box's * own edges, which only margin can do; padding here would leave the * box's rect.left pinned at 0 while merely indenting its content, * verified and rejected before landing on this version. margin-inline * with the same floored formula mirrors max-width + margin-inline: auto * exactly once the section is wide enough to center at all, but adds * the 24px floor that auto-centering lacks, and keeps both edges * symmetric so the baseline stays boxed to the 1200px content column. * * Catatan (Indonesia) untuk histori spec 3.7 aturan 5: baseline TIDAK * PERNAH diizinkan bleed, bahkan sewaktu .pintarin-hero__visual masih * boleh menembus tepi kanan untuk ilustrasi lama. Kalimat versi * sebelumnya di sini membandingkan baseline dengan visual yang "boleh * bleed" — perbandingan itu kini basi karena ilustrasi berganti ke * objek utuh dan .pintarin-hero__inner (lihat komentar besar di atas * .pintarin-section.pintarin-hero) juga berhenti bleed. Baseline sendiri * tidak berubah di sini; yang berubah adalah visual kini mengikuti * batas kolom konten yang sama, bukan lagi mengecualikan diri darinya. */ .pintarin-hero__baseline { max-width: none; margin-inline: max(var(--wp--preset--spacing--40), (100% - var(--pintarin-content-max)) / 2); } .pintarin-hero__visual { margin-block-start: 0; } } .pintarin-section__eyebrow { color: var(--pintarin-brand-primary); } .pintarin-card { position: relative; isolation: isolate; display: grid; gap: var(--wp--preset--spacing--20); align-content: start; padding: var(--wp--preset--spacing--40); background-color: var(--pintarin-surface-raised); border: 1px solid var(--pintarin-border-subtle); border-radius: var(--pintarin-radius-lg); box-shadow: var(--pintarin-shadow-e2); transition: transform var(--pintarin-duration-base) var(--pintarin-ease-out); } /* Elevasi hover dianimasikan lewat opacity, bukan box-shadow, supaya hanya * transform dan opacity yang dianimasikan (spec §3.5) — mengubah box-shadow * memicu repaint setiap frame, sementara opacity dan transform digarap * compositor. Bayangan e2 tetap statis di .pintarin-card sendiri; bayangan * e3 yang lebih dalam hidup di pseudo-element terpisah yang memudar masuk * saat hover, sehingga transisinya tetap mulus tanpa pernah menganimasikan * box-shadow itu sendiri. isolation: isolate menjamin z-index negatif * pseudo-element ini hanya berlaku di dalam stacking context kartu sendiri, * bukan bocor ke elemen tetangga. Kartu memakai e2 saat diam, bukan e1, * mengikuti tabel elevasi spec 3.7 aturan 4: e1 adalah satu sampai tiga * piksel pada alfa 4-6 persen, di bawah ambang yang bisa dilihat pada kartu * putih di atas permukaan nyaris putih. */ .pintarin-card::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; box-shadow: var(--pintarin-shadow-e3); opacity: 0; transition: opacity var(--pintarin-duration-base) var(--pintarin-ease-out); } .pintarin-card:hover { transform: translateY(-4px); } .pintarin-card:hover::after { opacity: 1; } .pintarin-card__icon { display: inline-flex; align-items: center; justify-content: center; inline-size: 3rem; block-size: 3rem; color: var(--pintarin-text-on-brand); /* Ujung gradient memakai token khusus --pintarin-gradient-icon-end, * bukan --pintarin-brand-accent langsung: di mode terang teal-400 * (brand-accent) hanya mencapai ~2:1 melawan glyph putih di atasnya, * di bawah batas 3:1 untuk elemen non-teks (spec §3.3 melarang * teal-400 di mana pun teal-400 menjadi latar bagi foreground yang * wajib tetap terbaca). Token ini dipetakan ke teal-700 di mode * terang dan tetap teal-400 di mode gelap (lihat theme.json dan * dark.css). brand-accent sendiri tidak disentuh karena masih benar * dipakai sebagai grafis murni di tempat lain, misalnya penanda * bullet .pintarin-symptom-list. */ background-image: linear-gradient(135deg, var(--pintarin-brand-primary), var(--pintarin-gradient-icon-end)); border-radius: var(--pintarin-radius-md); rotate: 4deg; } .pintarin-card__icon svg { rotate: -4deg; } /* Strip bergulir pembungkus diagram. * * Dua peran sekaligus, keduanya perlu. * * Pertama, ia memulihkan perataan. Diagram adalah anak langsung layout * constrained, dan layout itu meratakan anaknya lewat `margin-inline: auto`. * Sebuah tanpa `display` tetap inline, dan margin auto tidak * berpengaruh pada elemen inline — sehingga diagram menempel ke tepi kiri * viewport sementara kolom teks di atasnya sudah di tengah, meleset 331px * pada lebar 1920. Wadah
ini block secara alami, jadi dialah yang * sekarang menerima max-width dan margin auto dari layout constrained, * sementara `display: block` di bawah menghapus pula celah baseline inline * di bawah SVG. * * Kedua, ia menjaga keterbacaan di mobile. Pada viewport 390px diagram * terpaksa menyusut ke skala 0.33 terhadap viewBox 1000x200, membuat label * tahapnya terender 8.63px — praktis hilang, dan label diagram hero * (Business, Data, AI, Decision, Result) tidak diulang di teks halaman mana * pun sehingga isinya benar-benar lenyap bagi pengguna awas. min-inline-size * 35rem menahan SVG pada lebar yang membuat label kembali sekitar 14px, dan * kelebihannya digulir mendatar di dalam wadah ini alih-alih menyembunyikan * konten atau mendorong halaman ikut menggulir. * * Wadahnya diberi tabindex dan role="region" di inc/diagrams.php: area * bergulir yang hanya bisa disentuh atau di-drag menutup aksesnya bagi * pengguna keyboard. overscroll-behavior-x: contain mencegah gulir yang * mentok di ujung strip merambat menjadi gestur navigasi halaman. */ .pintarin-diagram-scroll { overflow-x: auto; overscroll-behavior-x: contain; } .pintarin-diagram { display: block; inline-size: 100%; min-inline-size: 35rem; block-size: auto; color: var(--pintarin-text-secondary); } /* max-width dan margin-inline TIDAK dipakai di sini, dengan alasan yang * persis sama dengan .pintarin-section__head di atas (lihat komentar * panjangnya): elemen ini anak langsung layout constrained, dan WordPress * memaksa margin-left/right: auto !important pada anak langsung seperti itu. * max-width sempit + margin-auto paksa akan memusatkan daftar ini sendirian, * meleset dari section head --lead di sampingnya yang rata kiri. Lebar baca * dipindah ke grid-template-columns, properti yang tidak pernah disentuh * WordPress, sehingga kotak luar elemen ini tetap identik dengan kotak head * di atasnya. */ .pintarin-symptom-list { list-style: none; padding-left: 0; display: grid; grid-template-columns: minmax(0, var(--pintarin-measure)); gap: var(--wp--preset--spacing--20); } .pintarin-symptom-list li { position: relative; padding-left: var(--wp--preset--spacing--40); color: var(--pintarin-text-secondary); } .pintarin-symptom-list li::before { content: ""; position: absolute; left: 0; top: 0.6em; inline-size: 0.5rem; block-size: 0.5rem; border-radius: var(--pintarin-radius-pill); background-color: var(--pintarin-brand-accent); } .pintarin-card-grid { display: grid; gap: var(--wp--preset--spacing--40); grid-template-columns: 1fr; } @media (min-width: 640px) { .pintarin-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .pintarin-card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pintarin-card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Kartu yang isinya jauh lebih banyak daripada saudaranya di grid yang sama. * Menyamakan tinggi seluruh kartu ke kartu terpanjang akan menghasilkan lima * kartu berdasar kosong; membentangkan yang panjang ke dua lajur memberi * isinya ruang yang memang dibutuhkan dan mengurangi ruang kosong di * saudaranya sekaligus. Hanya berlaku pada lebar tiga lajur — di bawah itu * seluruh kartu satu lajur penuh dan span kehilangan artinya. */ @media (min-width: 1024px) { .pintarin-card-grid--3 > .pintarin-card--wide { grid-column: span 2; } } /* Grid yang isinya sedikit tidak boleh menyisakan lajur kosong di kanan. * Arsip case study saat ini berisi satu post; tanpa aturan ini kartunya duduk * di sepertiga kiri sementara dua pertiga sisanya kosong, dan ruang kosong * berbentuk lajur terbaca sebagai konten yang gagal dimuat. * * :has() memilih berdasarkan JUMLAH anak: `> :last-child:nth-child(1)` hanya * cocok bila anak terakhir sekaligus anak pertama, yakni saat anaknya tepat * satu. Wadahnya yang dipersempit, bukan kartunya yang dilebarkan — kartu * selebar 1200px akan terbaca sebagai panel, bukan sebagai satu entri dari * daftar yang akan bertambah. * * `grid-template-columns` wajib ditimpa di sini juga, bukan cuma * `max-width`. Diukur di browser pada 1440px sebelum baris ini ditambahkan: * wadah sudah menyempit ke 416px seperti yang diharapkan, tetapi * `.pintarin-card-grid--3` tetap memaksa tiga lajur lewat media query * `min-width: 1024px` di atas, sehingga satu kartu itu hanya mengisi lajur * pertama selebar ~123px — dua lajur sempit tersisa kosong DI DALAM wadah * yang sudah menyempit, gejala yang sama persis yang aturan ini dibuat untuk * dihilangkan. Selektor `:has()` di sini punya spesifisitas dua kelas * (0-2-0), lebih tinggi dari satu kelas `.pintarin-card-grid--3` (0-1-0), * sehingga menang di lebar berapa pun tanpa perlu duplikasi ke dalam media * query itu sendiri. */ .pintarin-card-grid:has(> :last-child:nth-child(1)) { max-width: 26rem; grid-template-columns: 1fr; } .pintarin-card-grid:has(> :last-child:nth-child(2)) { max-width: 54rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } .pintarin-card__title { margin: 0; } .pintarin-card__title a:hover { text-decoration: underline; } /* Target sentuh judul kartu. Mengikuti pola .pintarin-card__link: kotak * sentuh ditumbuhkan lewat min-block-size, bukan padding-block, supaya * baseline teksnya tidak bergeser di dalam kartu. Batasan proyek 44x44 * dipakai, bukan ambang 24px WCAG 2.2 SC 2.5.8 — setiap kontrol interaktif * lain di situs ini sudah 44px, dan satu kontrol yang lebih kecil adalah * ketidakkonsistenan yang terasa, bukan sekadar angka yang lolos. * * inline-flex plus align-items:center, BUKAN display:block: judul kartu bisa * membungkus ke dua baris, dan min-block-size pada elemen block akan * menambah ruang kosong di bawah judul satu baris tanpa memusatkannya. */ .pintarin-card__title a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-block-size: 2.75rem; } .pintarin-card__body { margin: 0; color: var(--pintarin-text-secondary); } .pintarin-feature { display: grid; gap: var(--wp--preset--spacing--40); grid-template-columns: 1fr; align-items: start; } @media (min-width: 900px) { .pintarin-feature { grid-template-columns: 3fr 2fr; } } .pintarin-feature__panel { display: grid; gap: var(--wp--preset--spacing--20); align-content: start; padding: var(--wp--preset--spacing--50); background-color: var(--pintarin-surface-raised); border: 1px solid var(--pintarin-border-subtle); border-radius: var(--pintarin-radius-xl); box-shadow: var(--pintarin-shadow-e2); } .pintarin-feature__panel h3, .pintarin-feature__panel p { margin: 0; } .pintarin-feature__cta { margin-top: var(--wp--preset--spacing--20); } .pintarin-capability-list { list-style: none; padding-left: 0; display: grid; gap: var(--wp--preset--spacing--20); margin: 0; } .pintarin-capability-list li { position: relative; padding-left: var(--wp--preset--spacing--40); color: var(--pintarin-text-secondary); } .pintarin-capability-list li::before { content: ""; position: absolute; left: 0; top: 0.45em; inline-size: 0.75rem; block-size: 0.75rem; border-radius: var(--pintarin-radius-sm); background-image: linear-gradient(135deg, var(--pintarin-brand-primary), var(--pintarin-brand-accent)); } .pintarin-steps { list-style: none; padding-left: 0; margin: 0; display: grid; gap: var(--wp--preset--spacing--40); counter-reset: pintarin-step; grid-template-columns: 1fr; } @media (min-width: 768px) { .pintarin-steps { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); } } .pintarin-steps__item { display: grid; gap: var(--wp--preset--spacing--10); align-content: start; counter-increment: pintarin-step; padding-top: var(--wp--preset--spacing--30); border-top: 2px solid var(--pintarin-border-subtle); } .pintarin-steps__item h3, .pintarin-steps__item p { margin: 0; } .pintarin-steps__item p { color: var(--pintarin-text-secondary); } .pintarin-steps__item::before { content: counter(pintarin-step); font-weight: 700; color: var(--pintarin-brand-primary); } .pintarin-usecase-list { list-style: none; padding-left: 0; margin: 0; display: grid; gap: var(--wp--preset--spacing--10); color: var(--pintarin-text-secondary); } .pintarin-usecase-list li { position: relative; padding-left: var(--wp--preset--spacing--30); } .pintarin-usecase-list li::before { content: ""; position: absolute; left: 0; top: 0.65em; inline-size: 0.375rem; block-size: 0.375rem; border-radius: var(--pintarin-radius-pill); background-color: var(--pintarin-brand-accent); } .pintarin-section__note { margin-top: var(--wp--preset--spacing--40); max-width: var(--pintarin-measure); margin-inline: auto; text-align: center; color: var(--pintarin-text-muted); } .pintarin-casestudy { display: grid; gap: var(--wp--preset--spacing--20); justify-items: start; padding: var(--wp--preset--spacing--50); background-color: var(--pintarin-surface-raised); border: 1px solid var(--pintarin-border-subtle); border-radius: var(--pintarin-radius-xl); box-shadow: var(--pintarin-shadow-e2); } .pintarin-casestudy h3, .pintarin-casestudy p { margin: 0; } .pintarin-casestudy__impact { max-width: var(--pintarin-measure); color: var(--pintarin-text-secondary); } .pintarin-cta .wp-block-pintarin-lead-form { max-width: 44rem; margin-inline: auto; } .pintarin-entry > * + * { margin-block-start: var(--wp--preset--spacing--40); } .pintarin-entry h2 { margin-block-start: var(--wp--preset--spacing--60); } .pintarin-entry ul { display: grid; gap: var(--wp--preset--spacing--20); padding-left: 0; list-style: none; max-width: var(--pintarin-measure); } .pintarin-entry ul li { position: relative; padding-left: var(--wp--preset--spacing--30); color: var(--pintarin-text-secondary); } .pintarin-entry ul li::before { content: ""; position: absolute; left: 0; top: 0.65em; inline-size: 0.375rem; block-size: 0.375rem; border-radius: var(--pintarin-radius-pill); background-color: var(--pintarin-brand-accent); } /* Tautan "Baca selengkapnya" pada kartu indeks halaman Services * (patterns/page-services.php). Mengikuti pola .pintarin-card__title a: * tanpa garis bawah dalam keadaan diam, garis bawah muncul saat hover, * supaya empat tautan berulang tidak terasa lebih berat secara visual * daripada judul kartu di atasnya. Warnanya sengaja tidak disetel di sini * — elemen sudah mewarisi warna brand-primary dari styles.elements.link * di theme.json, token yang sama dipakai tautan lain di seluruh situs. * * inline-flex plus min-block-size 2.75rem (44px pada root 16px) ada untuk * target sentuh, bukan untuk tipografi. Tanpa keduanya tautan ini terukur * 282 x 27 px di 390px — lolos ambang 24px WCAG 2.2 SC 2.5.8 tetapi di bawah * batasan proyek 44x44 yang dipatuhi setiap kontrol interaktif lain di situs * ini (tombol CTA body Service dan CTA overlay mobile sama-sama 44px). * min-block-size dipilih alih-alih padding-block supaya kotak sentuh tumbuh * tanpa menggeser baseline teksnya di dalam kartu, dan align-items: center * menjaga labelnya tetap di tengah kotak yang membesar itu. * * justify-self: start ADA KARENA BLOCKIFICATION, bukan sebagai hiasan. * .pintarin-card adalah grid container, dan CSS Display 3 memblokifikasi * setiap anak langsung grid: `inline-flex` di sini KOMPUTASINYA menjadi * `flex` (dikonfirmasi lewat getComputedStyle di browser, bukan diasumsikan * dari nilai yang ditulis), sehingga tautan melar mengisi seluruh lebar * kolom kartu — terukur 282px di viewport 390px, padahal labelnya sendiri * hanya 149.86px. Akibatnya bukan sekadar kosmetik: 132.14px kanvas kosong * di kanan label menjadi area tap yang menavigasi tanpa ada apa pun yang * menandainya, dan garis bawah hover muncul saat kursor berada jauh dari * teksnya. justify-self: start mengembalikan kotaknya ke lebar isi, sehingga * target 44px tingginya berimpit dengan label yang benar-benar terlihat. */ .pintarin-card__link { display: inline-flex; align-items: center; justify-self: start; min-block-size: 2.75rem; font-weight: 600; text-decoration: none; } .pintarin-card__link:hover, .pintarin-card__link:focus-visible { text-decoration: underline; } /* Daftar business benefit pada section Value Proposition halaman AI * Recruitment (patterns/page-ai-recruitment.php). Bentuknya identik dengan * .pintarin-symptom-list (list-style none, lebar dibatasi * --pintarin-measure, bullet dot warna brand-accent sebagai grafis murni, * bukan foreground yang wajib tetap terbaca) tetapi diberi nama terpisah * karena isinya bukan gejala masalah melainkan manfaat bisnis positif — * memakai ulang class bernama "symptom" di sini akan menyesatkan siapa pun * yang membaca markup halaman ini. */ /* Sama seperti .pintarin-symptom-list: max-width dan margin-inline TIDAK * dipakai, supaya elemen ini tidak bersaing dengan margin-auto paksa * WordPress pada anak langsung layout constrained. Lebar baca dipindah ke * grid-template-columns. */ .pintarin-benefit-list { list-style: none; padding-left: 0; display: grid; grid-template-columns: minmax(0, var(--pintarin-measure)); gap: var(--wp--preset--spacing--20); } .pintarin-benefit-list li { position: relative; padding-left: var(--wp--preset--spacing--40); color: var(--pintarin-text-secondary); } .pintarin-benefit-list li::before { content: ""; position: absolute; left: 0; top: 0.6em; inline-size: 0.5rem; block-size: 0.5rem; border-radius: var(--pintarin-radius-pill); background-color: var(--pintarin-brand-accent); } /* Wadah ilustrasi atmosfer Gemini — aksen halaman AI Recruitment, About, dan * section case study beranda. Spec bagian 8.2 membedakan tegas diagram * (bermakna, SVG tulisan tangan lewat pintarin_diagram()) dari ilustrasi * atmosfer (Gemini) — gambar yang memakai kelas ini murni dekoratif, sehingga * alt="" dipakai di pemanggilan pintarin_picture() masing-masing, bukan di * sini. * * KOREKSI: versi sebelumnya berkomentar bahwa width:100% plus height:auto * "menjaga CLS tetap nol". Klaim itu salah dan terukur salah — kotak ini * memesan tinggi 0 sebelum gambar muat lalu melompat ke 471,6px sesudahnya, * pada setiap halaman yang membawa ilustrasi. Penyebabnya bukan aspect-ratio * (yang memang sudah diturunkan browser dari atribut width/height ) * melainkan justify-items: center: ia membuat item grid berukuran fit-content * pada sumbu inline, dan fit-content sebuah yang belum punya piksel * adalah nol — sehingga width:100% menghitung 100% dari nol. * * justify-items dihapus, bukan diganti nilai lain. Pemusatan yang dulu * dimaksudkannya tidak pernah punya efek visual sejak img-nya width:100% dan * sudah mengisi seluruh trek. Diverifikasi: dengan aturan ini tinggi 471,6px * sudah terpesan sebelum gambar muat, persis sama dengan tinggi akhirnya. * * KOREKSI KEDUA: margin-inline: auto dibiarkan tetap ada saat perbaikan di * atas dibuat, karena saat itu elemen ini adalah anak block-level dari layout * yang sudah terbatas lebarnya — auto margin tidak bergerak, jadi tidak * kelihatan salah. Task 8 dan 9 lalu memindahkan ketiga pemakaian kelas ini * ke dalam .pintarin-split, sebuah grid. Auto margin pada sumbu inline milik * item grid mematikan stretch fit item itu, sehingga item kembali berukuran * fit-content — persis kegagalan nol-piksel yang sudah "diperbaiki" di atas, * muncul lagi lewat properti berbeda. max-width: 44rem juga dihapus: ketiga * pemakaian sekarang berada di kolom .pintarin-split yang sudah membatasi * lebarnya, jadi nilai itu cuma beban mati yang mengundang orang menalar * dari batasan yang sudah tidak berfungsi. * * PELAJARAN: kebenaran aturan ini bergantung pada tipe display induknya * (block vs grid vs flex). Siapa pun yang memindahkan .pintarin-illustration * ke konteks induk baru wajib menjalankan ulang uji pemesanan tinggi * (reservation check) pada DOM saat ini, bukan mempercayai verifikasi lama. */ .pintarin-illustration { display: grid; } .pintarin-illustration img { display: block; width: 100%; height: auto; border-radius: var(--pintarin-radius-xl); box-shadow: var(--pintarin-shadow-e2); } /* Varian tanpa bingkai, untuk ilustrasi yang tepinya sudah memudar ke * transparan. Menggambar radius dan bayangan mengelilingi gambar semacam itu * memunculkan tepi persegi di sekeliling bentuk yang justru dirancang tidak * punya tepi — bingkai menggantung di ruang kosong (carry-forward item 31). * Ketiga aset Gemini situs ini berkanal alfa dengan tepi memudar, jadi varian * inilah yang dipakai ketiganya; varian berbingkai di atas tetap ada untuk * gambar berbidang penuh yang mungkin datang dari Pintarin nanti, misalnya * screenshot produk sungguhan. */ .pintarin-illustration--bare img { border-radius: 0; box-shadow: none; } @media (prefers-reduced-motion: reduce) { .pintarin-card, .pintarin-card::after { transition: none; } .pintarin-card:hover { transform: none; } }