/* ============================================================================ aj-templates.css — etalase "Template layanan" di beranda (#service_templates). Dibingkai seperti toko aplikasi menampung banyak aplikasi: kapsul profesi jadi indeks kategori, tiap profesi satu kolom berisi template-templatenya, dan tiap baris satu "aplikasi" — ikon, nama, keterangan, tombol "Pakai". Kolomnya berjajar mendatar (scroll-snap) supaya seluruh template muat dalam satu panel setinggi layar, bukan daftar yang memanjang ke bawah. Markup kapsul & kolomnya dibangun scripts/generate_landing_templates.py; kapsul aktif, panah, dan scrim di assets/js/aj-templates.js. Kelasnya berawalan `ajt-`, bukan `aj-`: beberapa skrip landing bertindak pada kelas aj-* generik (lihat catatan di aj-hero-device.css). ========================================================================== */ .service-templates { /* Token aplikasi, disalin dari :root di src/assets/main.css. Penanda seksi, kapsul, dan kartunya meniru halaman Template layanan di aplikasi (ServiceTemplateIndex.vue + ServiceCardShell.vue), jadi memakai palet aplikasi, bukan palet halaman pemasaran di sekitarnya. */ --ajt-canvas: 245 246 250; --ajt-surface: 255 255 255; --ajt-tint: 234 234 250; --ajt-line: 207 214 224; --ajt-ink: 39 53 74; --ajt-ink-soft: 90 104 128; --ajt-brand: 1 97 233; --ajt-on-accent: 255 255 255; --ajt-icon-edge: rgba(12, 32, 74, 0.08); /* Figtree = huruf aplikasi; sudah dimuat halaman ini untuk bingkai ponsel di hero. */ --ajt-font: 'Figtree', var(--body-font-typeface), sans-serif; } /* Gelap mengikuti .uc-dark di . Nilainya dari .dark di src/assets/main.css, sama dengan bingkai ponsel di hero. */ .uc-dark .service-templates { --ajt-canvas: 15 19 26; --ajt-surface: 26 32 42; --ajt-tint: 38 42 69; --ajt-line: 48 58 74; --ajt-ink: 231 235 241; --ajt-ink-soft: 159 170 184; --ajt-brand: 76 147 255; --ajt-on-accent: 15 19 26; --ajt-icon-edge: rgba(255, 255, 255, 0.08); } /* --------------------------------------------------------------------------- Penanda seksi — kepala halaman Template layanan di aplikasi, apa adanya: ikon ri-apps-2-line text-brand 20px (24px di lg) + judul text-[18px] font-[700] text-ink (24px di lg), berjarak gap-2. Menggantikan kapsul eyebrow yang dipakai seksi lain. ------------------------------------------------------------------------- */ .ajt-mark { display: inline-flex; align-items: center; gap: 8px; color: rgb(var(--ajt-ink)); font-family: var(--ajt-font); font-size: 18px; font-weight: 700; line-height: 1.3; } /* Warnanya lewat `color`, bukan `fill`: tema vendor memaksa isi setiap SVG ke currentColor (`svg :not([fill="none"])` di main.min.css). */ .ajt-mark-ico { flex-shrink: 0; width: 20px; height: 20px; color: rgb(var(--ajt-brand)); fill: currentColor; } @media (min-width: 992px) { .ajt-mark { font-size: 24px; } .ajt-mark-ico { width: 24px; height: 24px; } } /* --------------------------------------------------------------------------- Panel etalase ------------------------------------------------------------------------- */ .ajt { /* Jarak isi panel ke tepinya dan jarak antar-kolom. */ --ajt-pad: 16px; --ajt-gap: 12px; /* Lebar kolom = pas `--ajt-n` kolom utuh + intipan kolom berikutnya, berapa pun lebar panelnya — kolom tidak pernah terpotong di tengah isinya, dan intipannya yang memberi tahu barisnya masih berlanjut. Persennya dihitung dari lebar isi baris gulir (panel dikurangi padding kiri & kanan), jadi padding kanannya ditambahkan lagi. */ --ajt-n: 1; --ajt-peek: 32px; --ajt-col: calc( (100% + var(--ajt-pad) - var(--ajt-n) * var(--ajt-gap) - var(--ajt-peek)) / var(--ajt-n) ); position: relative; /* Ponsel: panel menembus gutter kontainer (16px) sampai tepi layar, jadi kolom yang digeser hilang di tepi layar, bukan terpotong di dalam bingkai yang sempit. */ margin-inline: -16px; padding-block: 20px; background: rgb(var(--ajt-canvas)); border-block: 1px solid var(--aj-line); color: rgb(var(--ajt-ink)); font-family: var(--ajt-font); } @media (min-width: 576px) { .ajt { --ajt-pad: 24px; --ajt-gap: 16px; --ajt-peek: 40px; margin-inline: 0; padding-block: 24px; border: 1px solid var(--aj-line); border-radius: 28px; } } @media (min-width: 768px) { .ajt { --ajt-n: 2; } } @media (min-width: 1200px) { .ajt { --ajt-n: 3; border-radius: 32px; } } /* --------------------------------------------------------------------------- Kapsul profesi — bentuknya disalin dari kapsul filter profesi di ServiceTemplateIndex.vue (rounded-full border px-3 py-1.5 text-[14px] font-[600], aktif: border-brand bg-brand text-on-accent). Di sini ia jadi indeks: menekan kapsul menggeser baris ke kolom profesinya. ------------------------------------------------------------------------- */ .ajt-chips-wrap { position: relative; } .ajt-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px var(--ajt-pad) 4px; scrollbar-width: none; } .ajt-chips::-webkit-scrollbar { display: none; } .ajt .ajt-chip { display: inline-flex; flex-shrink: 0; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid rgb(var(--ajt-line)); border-radius: 999px; background: rgb(var(--ajt-surface)); color: rgb(var(--ajt-ink)); font-size: 14px; font-weight: 600; line-height: 20px; white-space: nowrap; text-decoration: none; transition: background-color 0.15s var(--aj-ease), border-color 0.15s var(--aj-ease), color 0.15s var(--aj-ease); } .ajt .ajt-chip.is-on { border-color: rgb(var(--ajt-brand)); background: rgb(var(--ajt-brand)); color: rgb(var(--ajt-on-accent)); } @media (hover: hover) and (pointer: fine) { .ajt .ajt-chip:hover { border-color: rgb(var(--ajt-brand)); color: rgb(var(--ajt-ink)); } .ajt .ajt-chip.is-on:hover { color: rgb(var(--ajt-on-accent)); } } .ajt .ajt-chip:focus-visible { outline: 2px solid rgb(var(--ajt-brand)); outline-offset: 2px; } /* Scrim di tepi baris kapsul yang masih menyimpan kapsul di luar layar — pola ScrimmedRow.vue: gradien dari warna latar ke alfa nol (bukan `transparent`, yang memunculkan pita keabuan di tengah gradien). */ .ajt-chips-wrap::before, .ajt-chips-wrap::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40px; pointer-events: none; opacity: 0; transition: opacity 0.2s ease-out; } .ajt-chips-wrap::before { left: 0; background: linear-gradient(to right, rgb(var(--ajt-canvas)), rgb(var(--ajt-canvas) / 0.8) 50%, rgb(var(--ajt-canvas) / 0)); } .ajt-chips-wrap::after { right: 0; background: linear-gradient(to left, rgb(var(--ajt-canvas)), rgb(var(--ajt-canvas) / 0.8) 50%, rgb(var(--ajt-canvas) / 0)); } .ajt-chips-wrap.can-left::before, .ajt-chips-wrap.can-right::after { opacity: 1; } /* Layar lebar: semua profesi terlihat sekaligus — deretan kategori lengkap itu sendiri yang bercerita "ada banyak", jadi kapsulnya dibungkus ke baris berikutnya alih-alih digeser. Di bawah 1200px bungkusannya jadi tiga baris atau lebih, jadi di sana tetap satu baris yang digeser. */ @media (min-width: 1200px) { .ajt-chips { flex-wrap: wrap; overflow: visible; } } /* --------------------------------------------------------------------------- Baris kolom profesi ------------------------------------------------------------------------- */ .ajt-track-wrap { margin-top: 16px; } .ajt-track { position: relative; /* patokan offsetLeft kolom di aj-templates.js */ display: flex; align-items: stretch; gap: var(--ajt-gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--ajt-pad); padding: 2px var(--ajt-pad) 6px; /* Batang gulirnya disembunyikan: intipan kolom berikutnya + panah yang menggantikannya, seperti rak di toko aplikasi. */ scrollbar-width: none; } .ajt-track::-webkit-scrollbar { display: none; } .ajt-track:focus-visible { outline: 2px solid rgb(var(--ajt-brand)); outline-offset: -2px; border-radius: 12px; } /* Satu kolom = satu profesi. Kartu + garis tepi seperti panel teks ServiceCardShell (rounded-2xl border border-line bg-surface). */ .ajt-col { flex: 0 0 var(--ajt-col); min-width: 0; scroll-snap-align: start; padding: 16px 0 4px; border: 1px solid rgb(var(--ajt-line)); border-radius: 20px; background: rgb(var(--ajt-surface)); } .ajt-col-head { display: flex; align-items: center; gap: 12px; padding: 0 16px 8px; } .ajt-col-ico { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: rgb(var(--ajt-tint)); font-size: 20px; line-height: 1; } .ajt-col-text { display: flex; min-width: 0; flex-direction: column; } /* Tema vendor memaksa ukuran & huruf semua

lewat `var(...) !important` (theme-eleven.min.css), jadi yang ditimpa variabelnya, bukan propertinya. */ .ajt .ajt-col-title { --sizes-heading-h3-size: 16px; --sizes-heading-h3-lh: 20px; --sizes-heading-h3-lp: -0.01em; --heading-font-typeface: var(--ajt-font); margin: 0; overflow: hidden; color: rgb(var(--ajt-ink)); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } .ajt-col-sub { color: rgb(var(--ajt-ink-soft)); font-size: 14px; line-height: 20px; } .ajt-list { margin: 0; padding: 0; list-style: none; } /* Satu template = satu baris "aplikasi". Garis pemisahnya mulai dari teks, bukan dari tepi kartu, seperti daftar di toko aplikasi — ikonnya sendiri sudah jadi pemisah visual di kiri. */ .ajt .ajt-app { display: flex; align-items: center; gap: 12px; padding: 0 16px; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; } .ajt-app-ico { flex-shrink: 0; width: 52px; height: 52px; object-fit: cover; border-radius: 12px; background: rgb(var(--ajt-tint)); /* garis rambut di tepi ikon, seperti ikon aplikasi di toko aplikasi — menjaga foto terang tidak luruh ke latar kartu */ outline: 1px solid var(--ajt-icon-edge); outline-offset: -1px; transition: transform 0.25s var(--aj-ease); } .ajt-app-body { display: flex; flex: 1; min-width: 0; align-items: center; gap: 12px; padding-block: 10px; } .ajt-list > li + li .ajt-app-body { border-top: 1px solid rgb(var(--ajt-line) / 0.6); } /* Tinggi teksnya dikunci dua baris nama + satu baris keterangan, supaya semua baris sama tinggi dan kolom-kolomnya rata walau panjang namanya berbeda-beda. */ .ajt-app-text { display: flex; flex: 1; min-width: 0; min-height: 56px; flex-direction: column; justify-content: center; gap: 2px; } .ajt-app-name { display: -webkit-box; overflow: hidden; color: rgb(var(--ajt-ink)); font-size: 14px; font-weight: 600; line-height: 18px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; } .ajt-app-meta { overflow: hidden; color: rgb(var(--ajt-ink-soft)); font-size: 12px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; } /* Tombol "Pakai" — padanan tombol "Dapatkan" di toko aplikasi. Warnanya pola kapsul "Bisa DP" di ServiceCardShell (bg-tint text-brand). */ .ajt-get { display: inline-flex; flex-shrink: 0; align-items: center; height: 30px; padding: 0 14px; border-radius: 999px; background: rgb(var(--ajt-tint)); color: rgb(var(--ajt-brand)); font-size: 14px; font-weight: 600; line-height: 1; transition: background-color 0.15s var(--aj-ease), color 0.15s var(--aj-ease), transform 0.15s var(--aj-ease); } @media (hover: hover) and (pointer: fine) { .ajt .ajt-app:hover .ajt-get { background: rgb(var(--ajt-brand)); color: rgb(var(--ajt-on-accent)); } .ajt .ajt-app:hover .ajt-app-ico { transform: translateY(-2px); } } .ajt .ajt-app:active .ajt-get { transform: scale(0.94); } .ajt .ajt-app:focus-visible { outline: 2px solid rgb(var(--ajt-brand)); outline-offset: -2px; border-radius: 12px; } /* --------------------------------------------------------------------------- Kaki panel — catatan bahwa isinya cuma contoh + panah geser (desktop) ------------------------------------------------------------------------- */ .ajt-foot { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 12px var(--ajt-pad) 0; } .ajt .ajt-note { margin: 0; color: rgb(var(--ajt-ink-soft)); font-size: 14px; line-height: 20px; text-align: center; } .ajt-nav { display: none; flex-shrink: 0; gap: 8px; } /* Panah untuk tetikus; layar sentuh cukup menggeser. */ @media (min-width: 768px) and (hover: hover) and (pointer: fine) { .ajt-foot { justify-content: space-between; } .ajt .ajt-note { text-align: start; } .ajt-nav { display: flex; } } .ajt-nav .btn { transition: transform 0.25s var(--aj-ease), box-shadow 0.25s var(--aj-ease), opacity 0.2s var(--aj-ease); } .ajt-nav .btn:not(:disabled):hover { transform: translateY(-2px); box-shadow: var(--aj-shadow-sm); } .ajt-nav .btn:disabled { opacity: 0.4; pointer-events: none; } /* Tombol vendor .btn-alt-primary tetap putih di tema gelap; di atas panel gelap itu jadi bulatan putih menyala. Samakan dengan kartu kolomnya. */ .uc-dark .ajt-nav .btn { border-color: rgb(var(--ajt-line)) !important; background-color: rgb(var(--ajt-surface)) !important; color: rgb(var(--ajt-brand)) !important; } @media (prefers-reduced-motion: reduce) { .ajt .ajt-chip, .ajt-app-ico, .ajt-get, .ajt-nav .btn { transition: none; } .ajt .ajt-app:hover .ajt-app-ico, .ajt .ajt-app:active .ajt-get, .ajt-nav .btn:not(:disabled):hover { transform: none; } }