/* Bingkai ponsel di hero beranda. * * Semua kelasnya berawalan `ajd-` (device), bukan `aj-`: landing page sudah * punya widget kalender sendiri dengan kelas .aj-cal/.aj-cal-day/… (aj-polish.css * + aj-cal.js, yang menjalankan setup() ke setiap .aj-cal di halaman). Dengan * awalan `aj-` kisi kalender di dalam bingkai ikut ditimpa gayanya dan dibangun * ulang oleh skrip itu. * * Dulu enam PNG bergantian (assets/images/aj/hero/0,2,5,7,8,9.png). Tangkapan * layar tidak pernah ikut berubah saat aplikasinya berubah, jadi isinya pelan- * pelan meleset: nama tab lama, label lama, nama hari yang tidak cocok dengan * tanggalnya, dan bulan yang sudah lewat. Sekarang layarnya dibangun dari HTML * memakai token warna yang sama dengan aplikasi (src/assets/main.css), jadi * salah ketik dan tanggal basi tidak bisa bersembunyi di dalam gambar lagi. * * Semua ukuran di dalam bingkai ditulis pada lebar layar 390px — angka yang * sama dengan yang dipakai di src/ — sebagai kelipatan satuan --u yang ikut * lebar ruangnya. Jadi angka dari komponen Vue bisa disalin apa adanya, dan * setiap blok di bawah menyebut komponen asalnya supaya bisa dicocokkan lagi * kalau komponennya berubah. */ .ajd-device { /* Lebar seluruh bingkai dalam px tanpa satuan, dipasang per pemakaian di HTML. Ia jadi batas atas saja: kalau ruangnya lebih sempit, bingkainya ikut menciut. */ --ajd-w: 400; /* Token warna aplikasi. Nilainya disalin dari :root di src/assets/main.css — bingkai ini meniru aplikasi, jadi ia tidak boleh ikut palet halaman pemasaran di sekelilingnya. */ --ajc-canvas: 245 246 250; --ajc-surface: 255 255 255; --ajc-surface-muted: 234 236 239; --ajc-tint: 234 234 250; --ajc-line: 207 214 224; --ajc-ink: 39 53 74; --ajc-ink-soft: 90 104 128; --ajc-ink-faint: 99 112 134; --ajc-brand: 1 97 233; --ajc-success: 15 122 85; --ajc-on-accent: 255 255 255; /* Badan ponselnya: rim titanium (gradien) dan bezel hitam. Bukan token aplikasi — ini bagian dari ilustrasi, dan bezelnya hitam di kedua tema seperti iPhone sungguhan. */ --ajd-rim-a: #c9c9ce; --ajd-rim-b: #8f8f95; --ajd-rim-edge: #6b6b71; --ajd-bezel: #0a0a0c; display: block; /* Lebarnya tetap dan max-width yang menciutkannya, bukan `min(…, 100%)`: kolom hero adalah flex item shrink-to-fit, dan di dalamnya lebar persen tidak punya patokan — `min()` di sana jatuh ke nol dan bingkainya hilang sama sekali. */ width: calc(var(--ajd-w) * 1px); max-width: 100%; container-type: inline-size; } /* Gelap mengikuti .uc-dark di , penanda yang sama yang dipakai seluruh halaman statis ini (lihat aj-early-theme di ). Nilainya dari .dark di src/assets/main.css. Rim-nya ikut lebih gelap (black titanium). */ .uc-dark .ajd-device { --ajc-canvas: 15 19 26; --ajc-surface: 26 32 42; --ajc-surface-muted: 35 43 56; --ajc-tint: 38 42 69; --ajc-line: 48 58 74; --ajc-ink: 231 235 241; --ajc-ink-soft: 159 170 184; --ajc-ink-faint: 130 142 158; --ajc-brand: 76 147 255; --ajc-success: 61 214 155; --ajc-on-accent: 15 19 26; --ajd-rim-a: #6f7076; --ajd-rim-b: #3a3b40; --ajd-rim-edge: #232428; } /* ── Teleport ───────────────────────────────────────────────────────────── Bingkai hero desktop dipindah ke ujung oleh teleport() di aj-hero-device.js, yang juga menulis left/top-nya. z-index 1000 menaruhnya di atas semua seksi halaman dan di atas navbar (.uc-header, z-999): di layar lebar puncak ponselnya memang sengaja menimpa navbar (lihat .is-hero-desk di aj-polish.css). Navbar sticky baru muncul setelah gulir 100vh, saat ponselnya sudah lewat dari layar, jadi keduanya tidak pernah bertabrakan. */ .ajd-teleport { position: absolute; top: 0; left: 0; z-index: 1000; /* Murni ilustrasi, dan sekarang melayang di atas seksi lain: klik harus tembus ke bawahnya. Kemiringannya membaca pointermove di document, jadi tidak butuh event di sini. */ pointer-events: none; } .ajd-teleport > [data-ajd-teleport] { position: absolute; width: max-content; } /* Pengganti `.aj-hero-visual .panel` di aj-polish.css, yang tidak menjangkau bingkainya lagi setelah dipindah: panel pembungkusnya membawa .overflow-hidden dari tema. */ .ajd-teleport .panel { overflow: visible !important; } /* Satu "satuan rancangan" = 1px pada layar 440px, persis angka yang dipakai di src/. Semua ukuran di bawah ditulis sebagai kelipatannya, jadi angka yang disalin dari komponen Vue bisa dipakai apa adanya dan seluruh bingkai tetap mengikuti lebar ruangnya — tanpa transform, jadi hurufnya dirender pada ukuran sebenarnya, bukan hasil perbesaran. Geometrinya iPhone Pro Max: layar 440 x 956 (titik logis), bezel hitam 10 dan rim 3 di tiap sisi -> 466 x 982 untuk seluruh badan. Dipilih yang Pro Max, bukan Pro 402pt: di 402 baris harga kartu layanan (Rp + kapsul DP, 186pt) tidak muat di panel teksnya (177pt) dan turun dua baris — di aplikasi sungguhan juga begitu; tangkapan layar pembanding dari pemilik diambil di Pro Max, tempat barisnya muat. Nilai px di baris pertama adalah cadangan untuk peramban tanpa container query; yang kedua menimpanya begitu cqw dikenali. */ /* ── Panggung 3D ────────────────────────────────────────────────────────── Tiga lapis pembungkus, masing-masing satu tugas supaya transform-nya tidak saling timpa: .ajd-3d perspektif + satuan --u .ajd-3d-float melayang pelan (animasi CSS tak berujung) .ajd-device-frame intro (animasi CSS sekali) lalu miring mengikuti kursor lewat --rx/--ry yang ditulis aj-hero-device.js. Semuanya transform/opacity saja: dikerjakan compositor, tanpa canvas. Tidak memakai WebGL/three.js karena layar di dalamnya DOM hidup (crossfade, tanggal, huruf tajam) — di WebGL ia harus jadi tekstur. */ .ajd-3d { --u: 0.86px; --u: calc(100cqw / 466); perspective: calc(1100 * var(--u)); perspective-origin: 50% 40%; } .ajd-3d-float { transform-style: preserve-3d; animation: ajd-float 7s ease-in-out 2.4s infinite; } /* Tebal badan ponsel: delapan lapis rim ditumpuk ke belakang sumbu Z, tiap lapis 5 satuan. Saat frame miring, lapisan di sisi yang menghadap kita menyembul dari balik muka depan dan terbaca sebagai sisi logam ponsel. Makin ke belakang makin gelap supaya ada kesan pencahayaan. Tanpa bayangan jatuh, alasannya sama dengan di blok frame. */ .ajd-device-edge { position: absolute; inset: 0; border-radius: inherit; background: var(--ajd-rim-b); transform: translateZ(calc(var(--i) * -5 * var(--u))); filter: brightness(calc(1 - var(--i) * 0.055)); pointer-events: none; } /* Muka depan di depan lapisan sisi; tombol sedikit di belakang muka. */ .ajd-device-bezel { position: relative; transform: translateZ(0.5px); } .ajd-device-btn { transform: translateZ(calc(-2 * var(--u))); } /* Intro: naik dari bawah sambil berputar, mendarat dengan pegas. Bagian yang masih di bawah dasar #hero_header saat mulai memang terpotong seksi — ponselnya terbaca muncul dari lantai hero. */ @keyframes ajd-intro { 0% { opacity: 0; transform: translate3d(0, calc(90 * var(--u)), calc(-160 * var(--u))) rotateX(16deg) rotateY(-34deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: translate3d(0, 0, 0) rotateX(var(--rx)) rotateY(var(--ry)); } } /* Melayang: hanya ke atas dari posisi diam, supaya dasar bingkai tidak pernah turun melewati dasar seksi. */ @keyframes ajd-float { 0%, 100% { transform: translate3d(0, 0, 0) rotateZ(0deg); } 50% { transform: translate3d(0, calc(-7 * var(--u)), 0) rotateZ(0.4deg); } } /* Layar "bangun" dari hitam begitu badannya mendarat. */ .ajd-device-screen::after { content: ''; position: absolute; inset: 0; z-index: 4; background: #000; pointer-events: none; animation: ajd-wake 0.7s ease-out 1.2s both; } @keyframes ajd-wake { from { opacity: 1; } to { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .ajd-3d-float { animation: none; } .ajd-device-frame { animation: ajd-intro-still 0.6s ease-out both; } .ajd-device-screen::after { animation-delay: 0.3s; } } @keyframes ajd-intro-still { from { opacity: 0; } to { opacity: 1; } } .ajd-device-frame { --rx: 0deg; --ry: 0deg; position: relative; width: 100%; height: calc(982 * var(--u)); padding: calc(3 * var(--u)); border-radius: calc(74 * var(--u)); background: linear-gradient(180deg, var(--ajd-rim-a) 0%, var(--ajd-rim-b) 55%, var(--ajd-rim-edge) 100%); /* Tidak ada bayangan jatuh di sini. Dasar bingkai rata dengan dasar #hero_header, dan seksi itu overflow:hidden — bayangan apa pun yang menjorok ke samping bingkai ikut terpotong lurus di baris terakhir seksi dan meninggalkan pita abu yang kelihatan jelas begitu bertemu putih seksi profesi di bawahnya. Kedalamannya dipikul gradien rim + garis gelap di tepi dalam, keduanya di dalam kotak bingkai jadi tidak ada yang bisa terpotong. */ box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35); transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); will-change: transform; /* backwards: begitu intro selesai, transform kembali ke nilai --rx/--ry di atas, jadi kemiringan kursor bisa langsung mengambil alih tanpa lompatan. */ /* Sedikit overshoot (y2 > 1): ponselnya lewat sedikit dari posisi diam lalu mengayun balik, seperti benda yang benar-benar mendarat. */ animation: ajd-intro 1.7s cubic-bezier(0.34, 1.28, 0.64, 1) 0.35s backwards; } /* Tombol fisik: tombol aksi + dua volume di kiri, daya di kanan. Menonjol 3 satuan keluar dari rim, tinggi dan letaknya mengikuti proporsi iPhone. */ .ajd-device-btn { position: absolute; width: calc(3 * var(--u)); background: linear-gradient(90deg, var(--ajd-rim-b), var(--ajd-rim-a)); } .ajd-device-btn.is-action, .ajd-device-btn.is-vol-up, .ajd-device-btn.is-vol-down { left: calc(-3 * var(--u)); border-radius: calc(2 * var(--u)) 0 0 calc(2 * var(--u)); background: linear-gradient(270deg, var(--ajd-rim-b), var(--ajd-rim-a)); } .ajd-device-btn.is-action { top: calc(186 * var(--u)); height: calc(28 * var(--u)); } .ajd-device-btn.is-vol-up { top: calc(244 * var(--u)); height: calc(66 * var(--u)); } .ajd-device-btn.is-vol-down { top: calc(324 * var(--u)); height: calc(66 * var(--u)); } .ajd-device-btn.is-power { right: calc(-3 * var(--u)); top: calc(276 * var(--u)); height: calc(106 * var(--u)); border-radius: 0 calc(2 * var(--u)) calc(2 * var(--u)) 0; } .ajd-device-bezel { width: 100%; height: 100%; padding: calc(10 * var(--u)); border-radius: calc(71 * var(--u)); background: var(--ajd-bezel); } .ajd-device-screen { position: relative; isolation: isolate; overflow: hidden; width: 100%; height: 100%; border-radius: calc(62 * var(--u)); background: rgb(var(--ajc-canvas)); /* Tepi kaca: garis cahaya tipis di dalam, supaya layarnya tidak "ditempel" rata di atas bezel. */ box-shadow: inset 0 0 0 calc(1 * var(--u)) rgba(255, 255, 255, 0.06); } .ajd-device-stage { width: 100%; height: 100%; display: flex; flex-direction: column; font-family: 'Figtree', 'Graphik', system-ui, -apple-system, sans-serif; font-weight: 400; color: rgb(var(--ajc-ink)); letter-spacing: normal; text-align: left; -webkit-font-smoothing: antialiased; } /* Lapisan di atas semua layar: Dynamic Island, home indicator, dan kilau kaca. Ketiganya milik ponselnya, jadi diam saat layarnya berganti. */ .ajd-island { position: absolute; top: calc(11 * var(--u)); left: 50%; z-index: 3; width: calc(126 * var(--u)); height: calc(37 * var(--u)); transform: translateX(-50%); border-radius: calc(999 * var(--u)); background: #000; box-shadow: inset 0 0 0 calc(1 * var(--u)) rgba(255, 255, 255, 0.04); } /* Lensa kamera depan di ujung kanan pulau. */ .ajd-island::after { content: ''; position: absolute; top: 50%; right: calc(12 * var(--u)); width: calc(11 * var(--u)); height: calc(11 * var(--u)); transform: translateY(-50%); border-radius: 999px; background: radial-gradient(circle at 35% 35%, #2a2f3a 0%, #0c0e13 55%, #000 100%); box-shadow: inset 0 0 0 calc(1 * var(--u)) rgba(255, 255, 255, 0.06); } .ajd-home { position: absolute; bottom: calc(8 * var(--u)); left: 50%; z-index: 3; width: calc(154 * var(--u)); height: calc(5 * var(--u)); transform: translateX(-50%); border-radius: calc(999 * var(--u)); background: rgb(var(--ajc-ink) / 0.9); } .ajd-glare { --gx: 0%; --gy: 0%; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient( 118deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.04) 28%, rgba(255, 255, 255, 0) 52% ); background-size: 160% 160%; background-position: var(--gx) var(--gy); } /* Halaman pemasaran di sekitarnya memberi

margin dan ukuran hurufnya sendiri. Di dalam bingkai semuanya dikembalikan ke nol supaya yang berlaku hanya angka yang ditulis di bawah. Bobotnya persis satu kelas (0,1,0): cukup untuk mengalahkan `p { margin }` dan kawan-kawannya dari tema landing (0,0,1) — yang sempat bocor dan melebarkan jarak judul kartu — tapi kalah dari kelas komponen di bawah, yang bobotnya sama dan ditulis belakangan. Selektor elemennya dibungkus :where() supaya tidak menambah bobot. */ .ajd-device-stage *, .ajd-device-stage *::before, .ajd-device-stage *::after { box-sizing: border-box; } .ajd-device-stage :where(p, h1, h2, b, span, div, section) { margin: 0; font: inherit; color: inherit; letter-spacing: inherit; } .ajd-i { display: inline-block; flex: none; width: 1em; height: 1em; fill: currentColor; vertical-align: -0.14em; } /* ── Bilah status iOS ───────────────────────────────────────────────────── Bagian ponselnya, bukan aplikasinya: ia tetap diam saat layarnya berganti. Tinggi 54 titik (ponsel ber-Dynamic Island); jam di "telinga" kiri, sinyal/ wifi/baterai di telinga kanan, pulaunya di tengah. Latarnya surface supaya menyatu dengan bilah alamat peramban di bawahnya. */ .ajd-statusbar { position: relative; z-index: 1; flex: none; display: flex; align-items: center; justify-content: space-between; height: calc(54 * var(--u)); padding: calc(6 * var(--u)) calc(30 * var(--u)) 0 calc(42 * var(--u)); background: rgb(var(--ajc-surface)); font-size: calc(17 * var(--u)); font-weight: 600; letter-spacing: -0.01em; color: rgb(var(--ajc-ink)); } .ajd-sb-icons { display: flex; align-items: center; gap: calc(7 * var(--u)); } .ajd-sb-icons .ajd-i.is-signal { width: calc(19 * var(--u)); height: calc(12 * var(--u)); } .ajd-sb-icons .ajd-i.is-wifi { width: calc(17 * var(--u)); height: calc(12 * var(--u)); } .ajd-sb-icons .ajd-i.is-battery { width: calc(28 * var(--u)); height: calc(13 * var(--u)); } /* ── Tumpukan layar ──────────────────────────────────────────────────────── Keenam layar bertumpuk di tempat yang sama dan bergantian dengan opacity. Tinggi kontainernya tetap karena semuanya absolut, jadi pergantiannya tidak pernah menggeser apa pun. */ .ajd-screens { position: relative; flex: 1; min-height: 0; } .ajd-scr { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; background: rgb(var(--ajc-canvas)); opacity: 0; visibility: hidden; transition: opacity 700ms ease-in-out, visibility 0s linear 700ms; } .ajd-scr.is-on { opacity: 1; visibility: visible; transition: opacity 700ms ease-in-out, visibility 0s; } @media (prefers-reduced-motion: reduce) { .ajd-scr { transition: none; } } /* Isi layar yang lebih panjang dari bingkainya sengaja terpotong di bawah, persis seperti layar ponsel sungguhan sebelum digulir. */ .ajd-scr-body { flex: 1; min-height: 0; overflow: hidden; } /* ── Bilah alamat peramban (layar publik) ──────────────────────────────── Bagian ponselnya juga: halaman booking dibuka lewat peramban, jadi bilah ini milik peramban, bukan milik aplikasi. */ .ajd-chrome { flex: none; display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(4 * var(--u)) calc(12 * var(--u)) calc(8 * var(--u)) calc(14 * var(--u)); border-bottom: calc(1 * var(--u)) solid rgb(var(--ajc-line) / 0.6); background: rgb(var(--ajc-surface)); } .ajd-chrome-url { display: flex; flex: 1; min-width: 0; align-items: center; gap: calc(7 * var(--u)); height: calc(38 * var(--u)); padding: 0 calc(14 * var(--u)); border-radius: calc(999 * var(--u)); background: rgb(var(--ajc-surface-muted)); font-size: calc(15 * var(--u)); color: rgb(var(--ajc-ink)); } .ajd-chrome-url .ajd-i { font-size: calc(13 * var(--u)); color: rgb(var(--ajc-ink-soft)); } .ajd-chrome-dots { flex: none; font-size: calc(20 * var(--u)); color: rgb(var(--ajc-ink-soft)); } /* ── Bilah aplikasi (layar dasbor) ───────────────────────────────────────── HeaderBar.vue: CopyLinkButton (compact) lalu ProfileButton. */ .ajd-appbar { flex: none; display: flex; align-items: center; gap: calc(12 * var(--u)); min-height: calc(64 * var(--u)); padding: 0 calc(16 * var(--u)); background: rgb(var(--ajc-surface)); } .ajd-link-pill { display: flex; flex: 1; min-width: 0; align-items: center; gap: calc(8 * var(--u)); height: calc(40 * var(--u)); padding: 0 calc(12 * var(--u)); border: calc(1 * var(--u)) solid rgb(var(--ajc-line)); border-radius: calc(8 * var(--u)); background: rgb(var(--ajc-canvas)); font-size: calc(14 * var(--u)); color: rgb(var(--ajc-brand)); } .ajd-link-pill .ajd-link-text { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .ajd-link-path { font-weight: 600; } .ajd-link-pill .ajd-i { font-size: calc(18 * var(--u)); } .ajd-appbar-avatar { flex: none; width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: calc(999 * var(--u)); object-fit: cover; } /* ── Layar 1 · halaman publik, daftar layanan ──────────────────────────── ChooseServiceHeader.vue + SocialLinks.vue + ServiceFilterBar.vue + ServiceCardShell.vue. */ /* Tombol tampilan (ThemeToggleButton subtle) di pojok kanan atas halaman publik: `absolute right-3 top-3`, size-10, tanpa lingkaran, ikon ri-lg. isolation: banner di bawah ini ber-z-index negatif, dan harus tetap di atas latar kanvas .ajd-scr, bukan tenggelam di belakangnya. */ .ajd-scr-body.is-pub { position: relative; isolation: isolate; } /* Banner halaman booking — ChooseServiceIndex.vue: `absolute inset-x-0 top-0 -z-10 h-72 bg-cover bg-center` di belakang kepala halaman, selebar layar setinggi 288. Di atas gambarnya dua lapis, urutannya sama dengan di aplikasi: scrim `bg-black/45` yang hanya ada di tema gelap, lalu gradien `from-black/10 via-canvas via-60% to-canvas` yang meleburkannya ke kanvas — jadi yang benar-benar kelihatan kira-kira sepertiga atasnya saja. Gambarnya sudah dipotong ke rasio kotak ini oleh scripts/generate_landing_showcase.py (tengah potongan 3:1, persis bagian yang tampil di ponsel), jadi object-fit di sini tidak memotong apa-apa lagi. */ .ajd-pub-banner { position: absolute; top: 0; right: 0; left: 0; z-index: -1; height: calc(288 * var(--u)); pointer-events: none; } .ajd-pub-banner img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .ajd-pub-banner::before, .ajd-pub-banner::after { content: ''; position: absolute; inset: 0; } .ajd-pub-banner::before { z-index: 1; } /* Gradiennya dijulurkan 2px melewati dasar gambar. Tinggi kotak ini pecahan piksel (satuan --u), dan kalau gambar dan penutupnya berhenti di tepi yang sama, baris tepi itu sama-sama ter-antialias: seperempat warna gambarnya bocor jadi garis tipis di atas kolom cari. Di aplikasi tidak terjadi karena h-72 pas 288px. Julurannya jatuh di atas kanvas berwarna sama, jadi tidak terlihat. */ .ajd-pub-banner::after { bottom: -2px; z-index: 2; background: linear-gradient( to bottom, rgb(0 0 0 / 0.1) 0%, rgb(var(--ajc-canvas)) 60%, rgb(var(--ajc-canvas)) 100% ); } .uc-dark .ajd-pub-banner::before { background: rgb(0 0 0 / 0.45); } /* Banner bertone DARK (banner_tone) memaksa ikon tombol tampilan putih/85 di kedua tema: ThemeToggleButton `:on-dark="isDarkBanner"`. */ .ajd-pub-toggle.is-on-dark { color: rgb(255 255 255 / 0.85); } .ajd-pub-toggle { position: absolute; top: calc(12 * var(--u)); right: calc(12 * var(--u)); display: flex; align-items: center; justify-content: center; width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: calc(999 * var(--u)); font-size: calc(21 * var(--u)); color: rgb(var(--ajc-ink-soft)); } .ajd-pub-head { display: flex; flex-direction: column; align-items: center; padding: calc(24 * var(--u)) calc(16 * var(--u)) calc(8 * var(--u)); text-align: center; } .ajd-pub-avatar { width: calc(80 * var(--u)); height: calc(80 * var(--u)); border-radius: calc(999 * var(--u)); object-fit: cover; box-shadow: 0 calc(6 * var(--u)) calc(20 * var(--u)) rgba(20, 30, 60, 0.22); /* Cincinnya selalu putih di kedua tema, sama seperti di aplikasi. */ outline: calc(4 * var(--u)) solid #fff; outline-offset: calc(-1 * var(--u)); } /* ChooseServiceHeader.vue: di tema terang nama & bio tetap token ink dengan pendar putih supaya terbaca di atas banner apa pun; di tema gelap keduanya putih dengan bayangan gelap (`isDarkCover` = tema gelap, bukan tone banner). Berlaku dengan atau tanpa banner, sama seperti di aplikasi. */ .ajd-pub-name { margin-top: calc(16 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; text-shadow: 0 calc(1 * var(--u)) calc(12 * var(--u)) rgba(255, 255, 255, 0.8); } /* Lebih sempit dari aplikasinya (max-w-2xl, di ponsel tidak membatasi) — permintaan pemilik: bio di tiruan dibaca sebagai blok pendek di tengah. */ .ajd-pub-bio { max-width: calc(300 * var(--u)); margin-top: calc(8 * var(--u)); font-size: calc(14 * var(--u)); line-height: calc(24 * var(--u)); color: rgb(var(--ajc-ink-soft)); text-shadow: 0 calc(1 * var(--u)) calc(10 * var(--u)) rgba(255, 255, 255, 0.8); } .uc-dark .ajd-pub-name { color: #fff; text-shadow: 0 calc(1 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.55); } .uc-dark .ajd-pub-bio { color: #fff; text-shadow: 0 calc(1 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, 0.55); } .ajd-socials { display: flex; justify-content: center; gap: calc(8 * var(--u)); padding: calc(16 * var(--u)); } .ajd-social { display: flex; align-items: center; justify-content: center; width: calc(40 * var(--u)); height: calc(40 * var(--u)); border: calc(1 * var(--u)) solid rgb(var(--ajc-line)); border-radius: calc(999 * var(--u)); background: rgb(var(--ajc-surface)); font-size: calc(20 * var(--u)); color: rgb(var(--ajc-ink)); } /* SocialLinks.vue: sampai dua tautan, kapsulnya memuat nama jaringannya (`gap-2 px-4`, label 14/600); lebih dari itu menciut jadi ikon saja. */ .ajd-social.is-label { width: auto; gap: calc(8 * var(--u)); padding: 0 calc(16 * var(--u)); } .ajd-social-label { font-size: calc(14 * var(--u)); font-weight: 600; line-height: calc(20 * var(--u)); } /* Di ponsel bilah saringan bertumpuk dua baris dan kotak carinya selalu terbuka penuh — tombol ikon yang menciut itu khusus desktop. */ .ajd-filter { display: flex; flex-direction: column; gap: calc(12 * var(--u)); padding: calc(20 * var(--u)) calc(16 * var(--u)) 0; } .ajd-search { display: flex; align-items: center; height: calc(40 * var(--u)); border: calc(1 * var(--u)) solid rgb(var(--ajc-line)); border-radius: calc(999 * var(--u)); background: rgb(var(--ajc-surface)); } .ajd-search-btn { display: flex; flex: none; align-items: center; justify-content: center; width: calc(40 * var(--u)); height: calc(40 * var(--u)); font-size: calc(18 * var(--u)); color: rgb(var(--ajc-ink-faint)); } .ajd-search-ph { font-size: calc(14 * var(--u)); color: rgb(var(--ajc-ink-faint)); } .ajd-chips { display: flex; gap: calc(8 * var(--u)); min-width: 0; overflow: hidden; } /* CategoryChip.vue */ .ajd-chip { display: inline-flex; flex: none; align-items: center; gap: calc(6 * var(--u)); height: calc(36 * var(--u)); padding: 0 calc(12 * var(--u)); border: calc(1 * var(--u)) solid rgb(var(--ajc-line)); border-radius: calc(999 * var(--u)); background: rgb(var(--ajc-surface)); font-size: calc(14 * var(--u)); font-weight: 600; color: rgb(var(--ajc-ink)); } .ajd-chip.is-on { border-color: rgb(var(--ajc-brand)); background: rgb(var(--ajc-brand)); color: rgb(var(--ajc-on-accent)); box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) calc(-10 * var(--u)) rgb(var(--ajc-brand) / 0.9); } /* CategoryIcon size sm */ .ajd-chip-ico { display: inline-flex; align-items: center; justify-content: center; width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-radius: calc(6 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', sans-serif; } .ajd-cards { display: flex; flex-direction: column; gap: calc(12 * var(--u)); padding: calc(16 * var(--u)); } /* Foto dan teks berdiri sebagai dua panel terpisah dengan tinggi terkunci — bentuk ServiceCardShell.vue. */ .ajd-card { display: flex; gap: calc(6 * var(--u)); height: calc(124 * var(--u)); } .ajd-card-thumb { flex: none; width: 42%; max-width: calc(190 * var(--u)); border: calc(1 * var(--u)) solid rgb(var(--ajc-line)); border-radius: calc(16 * var(--u)); background: rgb(var(--ajc-surface-muted)); overflow: hidden; } .ajd-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Pemilik mematikan foto layanan (is_thumbnail): ServiceCardShell tinggal panel teksnya, `mt-2 min-h-[104px]`, tidak lagi dikunci setinggi 124. */ .ajd-card.is-plain { height: auto; min-height: calc(104 * var(--u)); margin-top: calc(8 * var(--u)); } .ajd-card-body { display: flex; flex: 1; min-width: 0; flex-direction: column; justify-content: space-between; gap: calc(8 * var(--u)); padding: calc(12 * var(--u)) calc(16 * var(--u)); border: calc(1 * var(--u)) solid rgb(var(--ajc-line)); border-radius: calc(16 * var(--u)); background: rgb(var(--ajc-surface)); } .ajd-card-info { display: flex; min-width: 0; flex-direction: column; gap: calc(2 * var(--u)); } .ajd-card-title { font-size: calc(16 * var(--u)); font-weight: 600; line-height: calc(20 * var(--u)); letter-spacing: -0.01em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .ajd-card-meta { display: flex; align-items: center; gap: calc(6 * var(--u)); min-width: 0; font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); color: rgb(var(--ajc-ink-soft)); } .ajd-card-meta > span { display: flex; align-items: center; gap: calc(4 * var(--u)); min-width: 0; } .ajd-card-meta .ajd-i { font-size: calc(16 * var(--u)); } .ajd-dot { color: rgb(var(--ajc-ink-faint)); } .ajd-card-price { display: flex; flex-wrap: wrap; align-items: center; gap: calc(4 * var(--u)) calc(8 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 600; line-height: calc(20 * var(--u)); } .ajd-dp { padding: calc(2 * var(--u)) calc(8 * var(--u)); border-radius: calc(999 * var(--u)); background: rgb(var(--ajc-tint)); font-size: calc(12 * var(--u)); font-weight: 600; line-height: calc(16 * var(--u)); color: rgb(var(--ajc-brand)); } /* ── Layar 2 · halaman publik, rincian layanan ─────────────────────────── Seluruh halaman booking di ponsel berlatar surface (BookScheduleMobile.vue: `flex h-dvh w-full flex-col bg-surface`), bukan canvas — kalau tidak, kepala dan kalendernya terbaca sebagai dua warna yang terbelah. Isinya: ServiceInfoContent.vue (kepala lengket dengan sampul jadi latar), ServiceInfoHeader.vue (keterangan), lalu DatePicker v-calendar di #body_form_date. */ .ajd-scr.is-surface { background: rgb(var(--ajc-surface)); } .ajd-bk-head { position: relative; isolation: isolate; flex: none; border-bottom: calc(1 * var(--u)) solid rgb(var(--ajc-line)); background: rgb(var(--ajc-surface)); } /* Sampul layanan jadi latar blok ini apa adanya — bukan pembungkus baru — lalu dilebur ke warna permukaan oleh scrim berbasis surface, jadi teks di atasnya cukup memakai token ink biasa di kedua tema. */ .ajd-bk-cover { position: absolute; inset: 0 0 auto 0; z-index: -1; max-height: 100%; overflow: hidden; } .ajd-bk-cover img { display: block; width: 100%; height: auto; opacity: 0.6; } .ajd-bk-scrim { position: absolute; inset: 0; background: linear-gradient( to bottom, rgb(var(--ajc-surface) / 0.7) 0%, rgb(var(--ajc-surface) / 0.7) 55%, rgb(var(--ajc-surface)) 80% ); } .ajd-bk-owner { display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(16 * var(--u)) calc(16 * var(--u)); } .ajd-bk-back { display: flex; flex: none; align-items: center; justify-content: center; width: calc(40 * var(--u)); height: calc(40 * var(--u)); border: calc(1 * var(--u)) solid rgb(var(--ajc-line)); border-radius: calc(999 * var(--u)); background: rgb(var(--ajc-surface)); font-size: calc(20 * var(--u)); color: rgb(var(--ajc-ink)); } /* Cincin putih + bayangan karena avatarnya berdiri di atas sampul. */ .ajd-bk-ava { flex: none; width: calc(32 * var(--u)); height: calc(32 * var(--u)); border-radius: calc(999 * var(--u)); object-fit: cover; box-shadow: 0 calc(6 * var(--u)) calc(20 * var(--u)) rgba(20, 30, 60, 0.22); outline: calc(2 * var(--u)) solid #fff; outline-offset: calc(-1 * var(--u)); } .ajd-bk-ownername { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: calc(14 * var(--u)); font-weight: 600; line-height: calc(20 * var(--u)); } .ajd-bk-meta { display: flex; flex-direction: column; gap: calc(2 * var(--u)); padding: 0 calc(16 * var(--u)) calc(16 * var(--u)); } .ajd-bk-title { font-size: calc(18 * var(--u)); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; } .ajd-bk-price { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8 * var(--u)); margin-top: calc(4 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 600; } .ajd-bk-dp { display: flex; align-items: center; gap: calc(4 * var(--u)); padding: calc(4 * var(--u)) calc(8 * var(--u)); border-radius: calc(999 * var(--u)); background: rgb(var(--ajc-tint)); font-size: calc(12 * var(--u)); font-weight: 600; color: rgb(var(--ajc-brand)); } .ajd-bk-dp .ajd-i { font-size: calc(14 * var(--u)); } /* Baris durasi, lokasi, dan zona waktu: satu irama, ikon ink-faint di kiri. */ .ajd-bk-row { display: flex; align-items: center; gap: calc(8 * var(--u)); margin-top: calc(8 * var(--u)); font-size: calc(14 * var(--u)); color: rgb(var(--ajc-ink-soft)); } .ajd-bk-row.is-first { margin-top: calc(12 * var(--u)); } .ajd-bk-row .ajd-i { font-size: calc(16 * var(--u)); color: rgb(var(--ajc-ink-faint)); } .ajd-desc { padding: calc(16 * var(--u)); border-bottom: calc(1 * var(--u)) solid rgb(var(--ajc-line)); font-size: calc(14 * var(--u)); line-height: calc(24 * var(--u)); color: rgb(var(--ajc-ink-soft)); } .ajd-desc p { margin: 0; } /* line-clamp-5, sama seperti blok keterangan di ServiceInfoHeader.vue: sisanya disembunyikan di balik "Selengkapnya". */ .ajd-desc-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; } .ajd-more { margin-top: calc(6 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 600; color: rgb(var(--ajc-brand)); } /* Kalender = DatePicker v-calendar di #body_form_date (px-2), dengan override .my-datepicker di src/assets/main.css:1073-1161 dan .vc-weeks/.vc-week di main.css:701-708. Semua angka di bawah dari sana + v-calendar/dist/style.css: - header: margin-top 10, tinggi 30, padding 0 10; panah 28x30 gray-500 (gelap: gray-300), prev nonaktif opacity .25; judul 700, warna ink - .vc-weeks: margin 12px 0 14px, padding 6px 0 (px-0 dari app) - .vc-weekday: 14/700 ink-soft, padding 4px 0 8px, line-height 14 - .vc-week: py-2 (8px atas-bawah) -> pitch baris 56px - .vc-day-content: 40x40 radius 10, 14/600 ink; nonaktif gray-400 / gray-600 - tersedia (highlight outline): latar tint, garis 1px brand/45. Teksnya tetap INK 600, bukan brand: aturan `.my-datepicker .vc-day-content` (baris 1108) ditulis setelah `.vc-highlight-content-outline` (1078) dengan bobot sama, jadi ia yang menang - itu sebabnya angkanya putih di tema gelap. - terpilih (solid): latar brand, teks surface 700, halo 3px brand/.28 - hari ini: titik 5px brand di bawah angka (.vc-dots translateY(-6px)) */ .ajd-cal { padding: 0 calc(8 * var(--u)); } .ajd-cal-head { display: grid; grid-template-columns: calc(28 * var(--u)) 1fr calc(28 * var(--u)); gap: calc(4 * var(--u)); align-items: center; height: calc(30 * var(--u)); margin-top: calc(10 * var(--u)); padding: 0 calc(10 * var(--u)); } .ajd-cal-month { padding: 0 calc(8 * var(--u)); text-align: center; font-size: calc(18 * var(--u)); font-weight: 700; line-height: calc(30 * var(--u)); white-space: nowrap; color: rgb(var(--ajc-ink)); } .ajd-cal-arrow { display: flex; align-items: center; justify-content: center; width: calc(28 * var(--u)); height: calc(30 * var(--u)); font-size: calc(20 * var(--u)); color: #64748b; } .uc-dark .ajd-cal-arrow { color: #cbd5e1; } .ajd-cal-arrow.is-off { opacity: 0.25; } .ajd-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); justify-items: center; align-items: center; margin: calc(12 * var(--u)) 0 calc(14 * var(--u)); padding: calc(6 * var(--u)) 0; } .ajd-cal-dow { align-self: stretch; padding: calc(4 * var(--u)) 0 calc(8 * var(--u)); text-align: center; font-size: calc(14 * var(--u)); font-weight: 700; line-height: calc(14 * var(--u)); color: rgb(var(--ajc-ink-soft)); } /* Tiap sel membawa py-2 milik .vc-week-nya sendiri: 40 + 8 + 8 = pitch 56. */ .ajd-cal-day { position: relative; display: flex; align-items: center; justify-content: center; width: calc(40 * var(--u)); height: calc(40 * var(--u)); margin: calc(8 * var(--u)) 0; border: calc(1 * var(--u)) solid transparent; border-radius: calc(10 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 600; line-height: 1; color: rgb(var(--ajc-ink)); } /* Tanggal tanpa slot: .vc-disabled, warnanya turun ke abu v-calendar. */ .ajd-cal-day.is-off { color: #94a3b8; font-weight: 500; } .uc-dark .ajd-cal-day.is-off { color: #475569; } /* Tanggal yang punya slot (highlight fillMode outline). */ .ajd-cal-day.is-open { background: rgb(var(--ajc-tint)); border-color: rgb(var(--ajc-brand) / 0.45); } /* Tanggal terpilih (highlight solid). */ .ajd-cal-day.is-pick { background: rgb(var(--ajc-brand)); border-color: rgb(var(--ajc-brand)); color: rgb(var(--ajc-surface)); font-weight: 700; box-shadow: 0 0 0 calc(3 * var(--u)) rgb(var(--ajc-brand) / 0.28); } /* Hari ini: satu titik biru di bawah angkanya, tanpa bentuk lain. */ .ajd-cal-day.is-today::after { content: ''; position: absolute; bottom: calc(1 * var(--u)); width: calc(5 * var(--u)); height: calc(5 * var(--u)); border-radius: calc(999 * var(--u)); background: rgb(var(--ajc-brand)); } /* ── Layar 3 · halaman publik, pilih jam ───────────────────────────────── BookScheduleMobile.vue, blok #body_upper_slots dan #body_form_slots. */ .ajd-slot-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: calc(12 * var(--u)); padding: calc(12 * var(--u)) calc(16 * var(--u)); border-bottom: calc(1 * var(--u)) solid rgb(var(--ajc-line)); background: rgb(var(--ajc-surface)); } .ajd-slot-left { display: flex; align-items: center; gap: calc(12 * var(--u)); min-width: 0; } .ajd-slot-back { display: flex; flex: none; align-items: center; justify-content: center; width: calc(40 * var(--u)); height: calc(40 * var(--u)); border: calc(1 * var(--u)) solid rgb(var(--ajc-line)); border-radius: calc(999 * var(--u)); background: rgb(var(--ajc-surface)); font-size: calc(20 * var(--u)); } .ajd-slot-label { display: block; font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); color: rgb(var(--ajc-ink-soft)); } .ajd-slot-date { display: block; margin-top: calc(2 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 600; line-height: calc(20 * var(--u)); } .ajd-slot-change { display: flex; flex: none; align-items: center; gap: calc(6 * var(--u)); padding: calc(6 * var(--u)) calc(12 * var(--u)); border: calc(1 * var(--u)) solid rgb(var(--ajc-line)); border-radius: calc(999 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 600; color: rgb(var(--ajc-brand)); } .ajd-slot-change .ajd-i { font-size: calc(16 * var(--u)); } .ajd-slots { display: flex; flex-direction: column; gap: calc(8 * var(--u)); padding: calc(16 * var(--u)); } .ajd-slot { padding: calc(14 * var(--u)) 0; border: calc(1 * var(--u)) solid rgb(var(--ajc-line)); border-radius: calc(12 * var(--u)); background: rgb(var(--ajc-canvas)); font-size: calc(14 * var(--u)); font-weight: 600; text-align: center; } .ajd-slot.is-on { border-color: rgb(var(--ajc-brand)); background: rgb(var(--ajc-brand)); font-weight: 700; color: rgb(var(--ajc-on-accent)); box-shadow: 0 calc(4 * var(--u)) calc(6 * var(--u)) calc(-1 * var(--u)) rgb(var(--ajc-brand) / 0.25), 0 0 0 calc(2 * var(--u)) rgb(var(--ajc-brand) / 0.25); } /* ── Layar 4 · dasbor, kalender ────────────────────────────────────────── FullCalendar view listMonth dengan gaya dari src/assets/custom.calendar.css dan kartu yang dibangun handleEventRendering() di CalendarIndex.vue. */ .ajd-cal-toolbar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: calc(12 * var(--u)); margin: calc(20 * var(--u)) 0; padding: 0 calc(16 * var(--u)); } .ajd-cal-navbtns { display: flex; gap: calc(2 * var(--u)); } .ajd-cal-navbtn { display: inline-flex; align-items: center; justify-content: center; width: calc(40 * var(--u)); height: calc(40 * var(--u)); border: calc(1 * var(--u)) solid rgb(var(--ajc-line)); border-radius: calc(10 * var(--u)); background: rgb(var(--ajc-surface)); font-size: calc(20 * var(--u)); color: rgb(var(--ajc-ink)); } .ajd-cal-title { font-size: calc(18 * var(--u)); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; } .ajd-ev-list { display: flex; flex-direction: column; padding-right: calc(8 * var(--u)); } .ajd-ev-row { display: flex; align-items: flex-start; } /* Kolom tanggal 20% dan kartu 80% — pembagian yang sama dengan .fc-list-day / .fc-list-event di lebar ponsel. */ .ajd-ev-day { flex: 0 0 20%; max-width: 20%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(1 * var(--u)); min-width: calc(46 * var(--u)); margin-top: calc(22 * var(--u)); padding: calc(7 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u)); border-radius: calc(12 * var(--u)); color: rgb(var(--ajc-ink)); text-align: center; } .ajd-ev-row:first-child .ajd-ev-day, .ajd-ev-row:first-child .ajd-ev-card { margin-top: 0; } .ajd-ev-dow { font-size: calc(12 * var(--u)); font-weight: 600; line-height: 1.4; color: rgb(var(--ajc-ink-soft)); } .ajd-ev-num { font-size: calc(20 * var(--u)); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; } .ajd-ev-card { position: relative; flex: 0 0 calc(80% - calc(5 * var(--u))); max-width: calc(80% - calc(5 * var(--u))); display: flex; flex-direction: column; gap: calc(5 * var(--u)); margin-top: calc(12 * var(--u)); padding: calc(13 * var(--u)) calc(16 * var(--u)) calc(13 * var(--u)) calc(22 * var(--u)); border: calc(1 * var(--u)) solid rgb(var(--ajc-line)); border-radius: calc(12 * var(--u)); background: rgb(var(--ajc-surface)); overflow: hidden; } .ajd-ev-bar { position: absolute; left: 0; top: 0; bottom: 0; width: calc(5 * var(--u)); } .ajd-ev-title { font-size: calc(16 * var(--u)); font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .ajd-ev-line { display: flex; align-items: center; gap: calc(7 * var(--u)); min-width: 0; font-size: calc(12 * var(--u)); line-height: 1.45; color: rgb(var(--ajc-ink-soft)); } .ajd-ev-line span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .ajd-ev-line .ajd-i { font-size: calc(16 * var(--u)); color: rgb(var(--ajc-ink-soft)); } /* ── Layar 5 · dasbor, Arsip › Klien ───────────────────────────────────── CustomerIndex.vue + CustomerCard.vue. */ .ajd-page-head { flex: none; padding: calc(16 * var(--u)) calc(28 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)); border-bottom: calc(1 * var(--u)) solid transparent; background: rgb(var(--ajc-canvas)); } .ajd-page-top { display: flex; align-items: center; } /* Kapsul Jadwal ↔ Klien, bentuk yang sama dengan pasangan Etalase ↔ Add-on. */ .ajd-seg { display: flex; flex: none; align-items: center; gap: calc(4 * var(--u)); margin-right: calc(12 * var(--u)); padding: calc(3 * var(--u)); border: calc(1 * var(--u)) solid rgb(var(--ajc-line)); border-radius: calc(999 * var(--u)); background: rgb(var(--ajc-surface-muted)); } .ajd-seg-btn { display: flex; align-items: center; justify-content: center; width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: calc(999 * var(--u)); font-size: calc(16 * var(--u)); color: rgb(var(--ajc-ink-soft)); } .ajd-seg-btn.is-on { background: rgb(var(--ajc-surface)); color: rgb(var(--ajc-brand)); box-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(12, 20, 40, 0.1); } .ajd-page-title { display: flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(18 * var(--u)); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; } .ajd-page-title .ajd-info { display: flex; align-items: center; justify-content: center; width: calc(24 * var(--u)); height: calc(24 * var(--u)); border-radius: calc(999 * var(--u)); font-size: calc(16 * var(--u)); color: rgb(var(--ajc-ink-soft)); } .ajd-field { display: flex; align-items: center; gap: calc(10 * var(--u)); margin-top: calc(16 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)); border: calc(1 * var(--u)) solid rgb(var(--ajc-line)); border-radius: calc(12 * var(--u)); background: rgb(var(--ajc-surface)); font-size: calc(14 * var(--u)); color: rgb(var(--ajc-ink-soft)); } .ajd-field .ajd-i { font-size: calc(18 * var(--u)); } .ajd-cli-list { padding: calc(16 * var(--u)) calc(16 * var(--u)) 0; } .ajd-cli-card { display: flex; flex-direction: column; gap: calc(12 * var(--u)); margin-bottom: calc(12 * var(--u)); padding: calc(16 * var(--u)); border: calc(1 * var(--u)) solid rgb(var(--ajc-line)); border-radius: calc(16 * var(--u)); background: rgb(var(--ajc-surface)); } .ajd-cli-top { display: flex; align-items: center; gap: calc(12 * var(--u)); } .ajd-cli-ava { display: flex; flex: none; align-items: center; justify-content: center; width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: calc(999 * var(--u)); background: rgb(var(--ajc-tint)); font-size: calc(14 * var(--u)); font-weight: 600; color: rgb(var(--ajc-brand)); } .ajd-cli-id { flex: 1; min-width: 0; } .ajd-cli-name { display: block; font-size: calc(16 * var(--u)); font-weight: 600; line-height: calc(20 * var(--u)); letter-spacing: -0.01em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .ajd-cli-mail { display: block; margin-top: calc(4 * var(--u)); font-size: calc(14 * var(--u)); line-height: calc(16 * var(--u)); color: rgb(var(--ajc-ink-soft)); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .ajd-cli-more { display: flex; flex: none; align-items: center; justify-content: center; width: calc(32 * var(--u)); height: calc(32 * var(--u)); border-radius: calc(999 * var(--u)); font-size: calc(18 * var(--u)); color: rgb(var(--ajc-ink-soft)); } .ajd-cli-foot { display: flex; align-items: center; gap: calc(8 * var(--u)); padding-top: calc(12 * var(--u)); border-top: calc(1 * var(--u)) solid rgb(var(--ajc-line)); font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); } .ajd-cli-foot .ajd-i { font-size: calc(16 * var(--u)); color: rgb(var(--ajc-ink-soft)); } .ajd-cli-num { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .ajd-cli-wa { display: flex; flex: none; align-items: center; justify-content: center; width: calc(32 * var(--u)); height: calc(32 * var(--u)); border-radius: calc(999 * var(--u)); font-size: calc(18 * var(--u)); color: rgb(var(--ajc-ink-soft)); } /* ── Layar 6 · dasbor, Ketersediaan ────────────────────────────────────── AvailabilityForm.vue: nama template, baris "Aktif di", tombol libur, lalu satu kartu per hari. */ .ajd-av-head { flex: none; padding: calc(24 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)); background: rgb(var(--ajc-canvas)); } .ajd-av-name { display: flex; align-items: center; gap: calc(4 * var(--u)); font-size: calc(18 * var(--u)); font-weight: 600; line-height: calc(19 * var(--u)); letter-spacing: -0.01em; } .ajd-av-name .ajd-star { width: calc(16 * var(--u)); height: calc(12 * var(--u)); font-size: calc(12 * var(--u)); color: rgb(var(--ajc-ink-soft)); } .ajd-caret { font-size: calc(20 * var(--u)); } /* Garis putus-putus di bawah teks menandai "ini bisa diganti" — dipakai di nama template dan di daftar layanan aktifnya. */ .ajd-dashed { border-bottom: calc(3 * var(--u)) dashed rgb(var(--ajc-line)); } .ajd-av-active { display: flex; align-items: center; gap: calc(8 * var(--u)); margin-top: calc(8 * var(--u)); min-width: 0; font-size: calc(14 * var(--u)); color: rgb(var(--ajc-ink-soft)); } .ajd-av-active b { display: flex; align-items: center; gap: calc(4 * var(--u)); font-weight: 600; line-height: calc(20 * var(--u)); color: rgb(var(--ajc-ink)); } .ajd-av-active .ajd-dashed { border-bottom-width: calc(2 * var(--u)); } /* Tombol libur selebar kolom, bukan kapsul kecil: selama belum ada libur sama sekali ia berdiri sendiri di bawah baris "Aktif di". */ .ajd-libur { display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--u)); margin-top: calc(24 * var(--u)); padding: calc(12 * var(--u)); border-radius: calc(12 * var(--u)); background: rgb(var(--ajc-tint)); font-size: calc(14 * var(--u)); font-weight: 600; color: rgb(var(--ajc-brand)); } .ajd-libur .ajd-i { font-size: calc(16 * var(--u)); } .ajd-days { display: flex; flex-direction: column; gap: calc(12 * var(--u)); padding: 0 calc(16 * var(--u)); } /* Hari nonaktif "turun" ke warna canvas supaya statusnya kebaca sekilas. */ .ajd-day { display: flex; flex-direction: column; gap: calc(12 * var(--u)); padding: calc(12 * var(--u)); border: calc(1 * var(--u)) solid rgb(var(--ajc-line)); border-radius: calc(16 * var(--u)); background: rgb(var(--ajc-surface)); } .ajd-day.is-off { border-color: rgb(var(--ajc-line) / 0.6); background: rgb(var(--ajc-canvas)); } .ajd-day-top { display: flex; width: 100%; align-items: center; } .ajd-toggle { position: relative; flex: none; width: calc(32 * var(--u)); height: calc(20 * var(--u)); border: calc(1 * var(--u)) solid rgb(var(--ajc-line)); border-radius: calc(999 * var(--u)); background: rgb(var(--ajc-canvas)); } .ajd-toggle::after { content: ''; position: absolute; top: calc(3 * var(--u)); left: calc(3 * var(--u)); width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: calc(999 * var(--u)); background: rgb(var(--ajc-ink-soft)); } .ajd-toggle.is-on { background: rgb(var(--ajc-success)); } .ajd-toggle.is-on::after { left: calc(15 * var(--u)); background: rgb(var(--ajc-surface)); } .ajd-day-name { margin: 0 calc(12 * var(--u)) 0 calc(10 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 600; letter-spacing: -0.01em; } .ajd-day.is-off .ajd-day-name { color: rgb(var(--ajc-ink-faint)); } .ajd-day-copy { display: flex; flex: none; align-items: center; justify-content: center; width: calc(28 * var(--u)); height: calc(28 * var(--u)); border-radius: calc(999 * var(--u)); font-size: calc(15 * var(--u)); color: rgb(var(--ajc-ink-soft)); } .ajd-day.is-off .ajd-day-copy { opacity: 0.25; } .ajd-day-more { display: flex; flex: none; align-items: center; justify-content: center; width: calc(32 * var(--u)); height: calc(32 * var(--u)); margin-left: auto; border-radius: calc(999 * var(--u)); font-size: calc(20 * var(--u)); color: rgb(var(--ajc-ink-soft)); } .ajd-time-row { display: flex; width: 100%; align-items: center; gap: calc(8 * var(--u)); } .ajd-time-chip { flex: 1; min-width: 0; padding: calc(10 * var(--u)) calc(12 * var(--u)); border: calc(1 * var(--u)) solid rgb(var(--ajc-line)); border-radius: calc(12 * var(--u)); background: rgb(var(--ajc-surface)); font-size: calc(14 * var(--u)); font-weight: 600; text-align: center; } .ajd-time-sep { flex: none; font-size: calc(14 * var(--u)); color: rgb(var(--ajc-ink-soft)); } .ajd-time-btn { display: flex; flex: none; align-items: center; justify-content: center; width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: calc(999 * var(--u)); color: rgb(var(--ajc-ink-soft)); } .ajd-time-btn.is-del { font-size: calc(16 * var(--u)); } .ajd-time-btn.is-add { font-size: calc(18 * var(--u)); } .ajd-allday { display: flex; width: 100%; align-items: center; justify-content: center; gap: calc(8 * var(--u)); padding: calc(14 * var(--u)) 0; border: calc(1 * var(--u)) solid rgb(var(--ajc-line)); border-radius: calc(12 * var(--u)); background: rgb(var(--ajc-canvas)); font-size: calc(14 * var(--u)); font-weight: 600; color: rgb(var(--ajc-ink)); } .ajd-check { display: flex; flex: none; align-items: center; justify-content: center; width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: calc(4 * var(--u)); background: rgb(var(--ajc-brand)); font-size: calc(12 * var(--u)); color: #fff; } /* ── Bilah tab bawah ─────────────────────────────────────────────────────── BottomNavbar.vue — lima tab, termasuk Etalase yang dulu bernama Layanan. */ .ajd-nav { flex: none; display: flex; align-items: stretch; justify-content: space-around; padding: calc(8 * var(--u)) calc(8 * var(--u)) calc(42 * var(--u)); border-top: calc(1 * var(--u)) solid rgb(var(--ajc-line)); background: rgb(var(--ajc-surface)); } .ajd-nav-item { position: relative; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: calc(4 * var(--u)); padding: calc(8 * var(--u)) 0; border-radius: calc(12 * var(--u)); font-size: calc(12 * var(--u)); color: rgb(var(--ajc-ink-soft)); } .ajd-nav-item.is-on { color: rgb(var(--ajc-brand)); } .ajd-nav-item.is-on .ajd-nav-label { font-weight: 600; } .ajd-nav-pill { position: absolute; top: calc(4 * var(--u)); left: 50%; width: calc(48 * var(--u)); height: calc(32 * var(--u)); transform: translateX(-50%); border-radius: calc(999 * var(--u)); background: rgb(var(--ajc-brand) / 0.1); } .ajd-nav-ico { position: relative; font-size: calc(24 * var(--u)); } .ajd-nav-item.is-on .ajd-nav-ico { transform: translateY(calc(-2 * var(--u))); } .ajd-nav-label { position: relative; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; }