@import '_content/AMS_RentGuard.Shared/AMS_RentGuard.Shared.lzidwblqss.bundle.scp.css'; /* _content/AMS_RentGuard.Web/Components/Account/Login.razor.rz.scp.css */ /* Satu baris tambahan di bawah formulir masuk: jalan keluar bagi yang salah memilih rental di alamat bersama. Gayanya sengaja sederhana dan tidak menonjol. Ia bukan ajakan - yang membuka halaman ini hampir selalu memang sudah di rental yang benar, dan tautan yang menarik perhatian di bawah kolom kata sandi justru mengundang orang keluar dari halaman yang sedang dituju. */ .lg-ganti[b-zm7o21lsq4] { margin: 1rem auto 0; max-width: 26rem; text-align: center; font-size: .82rem; color: #64748b; } .lg-ganti a[b-zm7o21lsq4] { color: #1f52a8; font-weight: 600; text-decoration: none; } .lg-ganti a:hover[b-zm7o21lsq4] { text-decoration: underline; } .lg-ganti a:focus-visible[b-zm7o21lsq4] { outline: 2px solid #1f52a8; outline-offset: 2px; border-radius: .25rem; } /* _content/AMS_RentGuard.Web/Components/Account/SaasAuthLayout.razor.rz.scp.css */ /* Halaman masuk layanan - panggung gelap keemasan. ================= URUTAN ATURANNYA ================= Berkas ini ditulis PONSEL DAHULU: seluruh aturan di luar blok @media adalah tampilan ponsel, dan susunan panggung lebarnya baru dinyalakan pada layar 64rem ke atas. Urutan itu bukan selera. Sebelumnya berkas ini ditulis terbalik - panggung lebarnya jadi aturan dasar, lalu ditimpa satu per satu untuk layar sempit - dan satu sifat luput ditimpa: lebar panggungnya. Akibatnya di ponsel panggung tetap 1500 piksel di dalam layar 390 piksel, judulnya terlempar ke kiri layar, dan formulirnya menggantung setengah keluar. Yang ditimpa satu per satu selalu menyisakan yang terlupa; yang dinyalakan sekaligus di dalam @media tidak bisa menyisakan apa pun. ================= ANGKANYA DARI MANA ================= Seluruh letak pada layar lebar adalah HASIL PENGUKURAN pada gambar rancangannya, bukan taksiran. Rancangannya dibuat dalam dua versi berukuran sama - satu lengkap dengan tulisan, satu tanpa tulisan - lalu keduanya dibandingkan piksel demi piksel untuk menemukan baris tulisannya: merek y 165..179 judul baris 1 y 229..263 judul baris 2 y 280..309 paragraf y 338..412 kartu armada y 453..669 dua lencana y 700..733 layar telepon x 792..1255 lajur isi x 824..1223 tombol toska y 476..528 takik x 962..1088, y 84..122 Gambarnya 1365 x 768. Karena itu 16/1365*100 = 1.1722, dan satu em di sini sama dengan 16 piksel pada ukuran rancangan aslinya - dipatok ke LEBAR panggung lewat cqw, sehingga tulisan dan kolomnya mengecil dan membesar bersama gambarnya alih-alih meleset darinya. */ /* ============================================================ PONSEL - aturan dasar ============================================================ */ .sa[b-d3tdlynqr4] { /* Warna halaman ini disebut SEKALI di sini, lalu dipakai ulang - termasuk oleh formulir, yang berkas gayanya terpisah. Ditaruh pada .sa, bukan pada :root. CSS bercakupan Blazor menambahkan penanda lingkup ke setiap pemilih, sehingga :root berubah menjadi :root[b-xxxxx] - dan elemen tidak pernah punya penanda itu. Aturannya tidak cocok dengan apa pun, tanpa galat maupun peringatan build. Peubah yang ditaruh pada .sa tetap menurun ke seluruh isinya, termasuk ke komponen anak yang lingkupnya berbeda. */ --sa-emas: #e2be6e; --sa-emas-tua: #c79b3f; --sa-redup: #b9c8d4; --sa-layar: #0b1520; min-height: 100vh; min-height: 100dvh; /* Gambarnya mundur menjadi suasana. Di layar selebar telapak tangan ia tidak bisa dibaca sebagai susunan - yang tersisa cuma warnanya, dan warna itu memang yang dibutuhkan di belakang formulir. */ background: linear-gradient(to bottom, rgba(6, 16, 26, .62) 0%, rgba(6, 16, 26, .93) 55%, #060f18 100%), url('/images/saas-panggung.jpg') center center / cover no-repeat; color: #eef3f8; font-family: 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", sans-serif; } .sa__stage[b-d3tdlynqr4] { display: flex; flex-direction: column; justify-content: center; /* Lebarnya DIBATASI layar, bukan diminta seluas gambar. Inilah sifat yang dulu terlupa ditimpa. */ width: 100%; max-width: 30rem; min-height: 100vh; min-height: 100dvh; margin: 0 auto; padding: 1.75rem 1.15rem 2.25rem; box-sizing: border-box; } /* ---------- Sisi kiri, di ponsel jadi kepala halaman ---------- */ /* ---------- Urutan di ponsel ---------- Di layar sempit formulirnya naik ke atas kartu armada dan dua lencana. Orang yang membuka halaman masuk dari ponsel datang untuk MASUK; kartu armada dan lencana itu untuk yang belum kenal aplikasinya, dan keduanya tetap terbaca sesudah menggulir. Sewaktu urutannya menuruti urutan tulisan di berkas, tombol "Lanjutkan" jatuh tepat di garis lipatan layar 390x844 - terlihat separuh, dan yang terlihat separuh tidak ditekan siapa pun. Diatur lewat order, bukan dengan memindahkan tulisannya di berkas .razor: di layar lebar keempatnya berdiri dengan letak mutlak, sehingga urutan tulisannya tidak menentukan apa pun di sana - tapi ia menentukan urutan yang dibacakan pembaca layar, dan urutan itu sebaiknya tetap urutan cerita. */ .sa__left[b-d3tdlynqr4] { order: 1; margin-bottom: 1.25rem; font-size: 1rem; } .sa__brand[b-d3tdlynqr4] { display: flex; align-items: center; gap: .55em; margin-bottom: 1rem; } .sa__brand-mark[b-d3tdlynqr4] { display: inline-flex; align-items: center; justify-content: center; width: 1.9em; height: 1.9em; /* Perisai emas sudah tergambar besar di tengah panggung; yang di sini cukup kelabu perak, seperti pada rancangan. */ color: #ccd6de; font-size: 1.3em; filter: drop-shadow(0 .1em .2em rgba(0, 0, 0, .5)); } .sa__brand-name[b-d3tdlynqr4] { font-size: 1.18em; font-weight: 400; letter-spacing: -.01em; color: #b6c4ce; } .sa__brand-name strong[b-d3tdlynqr4] { font-weight: 700; color: #ffffff; } .sa__headline[b-d3tdlynqr4] { /* Warnanya DISEBUT, tidak diwarisi - app.css menyetel warna seluruh h1. */ color: #ffffff; margin: 0 0 .5rem; font-size: 1.9rem; font-weight: 600; line-height: 1.16; letter-spacing: -.02em; } /* Baris kedua lebih pucat dan tidak setebal baris pertama: kalimat yang melanjutkan, bukan kalimat kedua yang ikut berteriak. Titiknya emas - satu noktah kecil yang menutup kalimatnya. */ .sa__headline span[b-d3tdlynqr4] { color: #a7b6c2; font-weight: 400; } .sa__headline em[b-d3tdlynqr4] { font-style: normal; color: var(--sa-emas); } .sa__lead[b-d3tdlynqr4] { margin: 0; font-size: .92rem; line-height: 1.65; color: var(--sa-redup); } /* Tiga kata yang menyebut isi aplikasinya diberi warna emas - sama seperti pada rancangan. Emas dipakai hanya untuk itu di sisi ini. */ .sa__lead em[b-d3tdlynqr4] { font-style: normal; color: var(--sa-emas); } /* ---------- Kartu armada ---------- Judul dan kakinya diukur terhadap KARTUNYA, bukan terhadap panggung, dan ukuran hurufnya pun ikut lebar kartu lewat cqw. Satu susunan angka untuk kedua ukuran layar: di layar lebar kartunya tergambar pada latar dan potongannya disembunyikan; di ponsel yang tampil potongannya. Kotaknya sama, jadi persennya sama. */ .sa__peek[b-d3tdlynqr4] { order: 3; position: relative; container-type: inline-size; width: 100%; margin: 1.35rem 0 1rem; border-radius: .7rem; overflow: hidden; } .sa__peek-img[b-d3tdlynqr4] { display: block; width: 100%; height: auto; } .sa__peek-title[b-d3tdlynqr4] { position: absolute; left: 3.97%; top: 9.26%; font-size: 3.55cqw; font-weight: 700; color: #ffffff; } .sa__peek-note[b-d3tdlynqr4] { position: absolute; left: 3.55%; top: 84.7%; /* Bidang gelap tipis di belakangnya. Pada kartu itu ada tiga lambang kecil tergambar tepat di baris ini; tanpa bidang ini, huruf dan lambang itu saling menembus dan keduanya jadi tidak terbaca. */ padding: .35em .6em; border-radius: .4em; background: linear-gradient(90deg, rgba(9, 20, 30, .92) 0%, rgba(9, 20, 30, .82) 70%, transparent 100%); font-size: 2.3cqw; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: #9fb0bd; } /* ---------- Dua lencana ---------- */ .sa__points[b-d3tdlynqr4] { order: 4; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; font-size: 1rem; } .sa__points li[b-d3tdlynqr4] { display: inline-flex; align-items: center; gap: .4em; padding: .4em .85em; border-radius: 999px; background: rgba(12, 26, 38, .72); border: 1px solid rgba(226, 190, 110, .22); font-size: .78em; font-weight: 500; color: #d3dde6; white-space: nowrap; } .sa__points i[b-d3tdlynqr4] { color: var(--sa-emas); font-size: .95em; } /* ---------- Kartu formulir ---------- */ .sa__screen[b-d3tdlynqr4] { order: 2; position: relative; display: flex; align-items: flex-start; border-radius: 1.25rem; border: 1px solid rgba(226, 190, 110, .18); background: linear-gradient(170deg, rgba(11, 24, 36, .96) 0%, rgba(6, 15, 24, .98) 100%); box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .5); overflow: hidden; } /* Takiknya milik telepon yang tergambar; di ponsel tidak ada teleponnya. */ .sa__notch[b-d3tdlynqr4] { display: none; } .sa__screen-inner[b-d3tdlynqr4] { width: 100%; padding: 1.4rem 1.25rem 1.5rem; box-sizing: border-box; font-size: 1rem; } .sa__card-brand[b-d3tdlynqr4] { /* Nama aplikasinya sudah berdiri di kepala halaman; mengulanginya di dalam kartu hanya memakan ruang layar yang justru paling sempit. */ display: none; } /* ---------- Kaki halaman ---------- */ .sa__foot[b-d3tdlynqr4] { display: flex; align-items: center; gap: .5em; margin-top: 1.4em; font-size: .72em; color: #7d8f9d; } .sa__foot a[b-d3tdlynqr4] { color: #9db0be; text-decoration: none; } .sa__foot a:hover[b-d3tdlynqr4] { color: #ffffff; } .sa__foot-dot[b-d3tdlynqr4] { width: .25em; height: .25em; border-radius: 50%; background: #3d5464; } /* ============================================================ LAYAR LEBAR - susunan panggung Mulai 64rem gambarnya tampil utuh sebagai susunan, dan seluruh isinya ditaruh pada tempatnya masing-masing di atas gambar itu. ============================================================ */ @media (min-width: 64rem) { .sa[b-d3tdlynqr4] { height: 100vh; display: flex; align-items: center; justify-content: center; /* Gambarnya MEMENUHI layar. Pita gelap di kiri dan kanan terlihat sebagai gambar yang kurang lebar, bukan sebagai pilihan. */ overflow: hidden; background: #060f18; } /* Panggung berukuran PERSIS sekotak gambar yang tergambar penuh layar. max(100vw, 177.734vh) adalah rumus "cover": ambil yang lebih besar antara lebar layar dan lebar yang dibutuhkan agar tingginya menutupi layar. Dengan perbandingan sisi yang dikunci, kotak ini selalu sama persis dengan kotak gambarnya - jadi tulisan yang ditaruh pada 60% lebar benar-benar mendarat di 60% lebar gambar, bukan 60% lebar layar. */ .sa__stage[b-d3tdlynqr4] { position: relative; display: block; flex: 0 0 auto; width: max(100vw, 177.734vh); max-width: none; min-height: 0; margin: 0; padding: 0; aspect-ratio: 1365 / 768; background-image: url('/images/saas-panggung.jpg'); background-size: 100% 100%; background-position: center; container-type: inline-size; } .sa__left[b-d3tdlynqr4] { position: absolute; left: 8.06%; top: 19.5%; width: 34%; margin: 0; font-size: 1.1722cqw; } .sa__brand[b-d3tdlynqr4] { margin-bottom: 1.5em; } .sa__headline[b-d3tdlynqr4] { margin: 0 0 .62em; font-size: 2.75em; line-height: 1.16; } .sa__lead[b-d3tdlynqr4] { font-size: 1.06em; line-height: 1.76; } /* Kartunya sudah tergambar pada latar; potongannya cuma untuk ponsel. */ .sa__peek[b-d3tdlynqr4] { position: absolute; left: 8.13%; top: 58.98%; width: 35.09%; aspect-ratio: 479 / 216; margin: 0; border-radius: 0; overflow: visible; } .sa__peek-img[b-d3tdlynqr4] { display: none; } .sa__points[b-d3tdlynqr4] { position: absolute; left: 8.13%; top: 91.15%; margin: 0; gap: .55em; flex-wrap: nowrap; font-size: 1.1722cqw; } .sa__points li[b-d3tdlynqr4] { font-size: .87em; } /* Bidang gelap yang menutup layar telepon pada gambar, dan formulirnya mengalir di dalamnya. Bawahnya dibiarkan menyatu dengan tepi gambar: teleponnya memang terpotong di situ, dan sudut membulat di tempat yang tidak ada sudutnya justru memperlihatkan bahwa bidang ini ditempelkan. */ .sa__screen[b-d3tdlynqr4] { position: absolute; /* Kotaknya PERSIS layar teleponnya, diukur dari gambarnya: tepi kiri layar x=791, tepi kanan x=1255, tepi atas y=61 - bukan tepi emasnya, melainkan kaca di dalamnya. Sudutnya 5.4cqw, dan angka itu pun hasil ukur: tepi kiri layar bergeser dari x=826 pada baris y=70 ke x=791 pada baris y=120, lengkung yang jari-jarinya sekitar 69 piksel. Sebelumnya dipakai 40 piksel - sudut yang terlalu tajam, sehingga siku bidang ini menyembul MENUTUPI tepi emas telepon di kedua sudut atasnya. Kalau meleset, lebih baik meleset ke arah lebih bulat: sudut yang terlalu bulat cuma menyisakan sesisir kaca gelap yang tidak kelihatan, sedangkan sudut yang terlalu tajam memakan emasnya. */ left: 57.95%; top: 7.94%; width: 34%; bottom: 0; display: block; border: 0; border-radius: 5.4cqw 5.4cqw 0 0; /* Pantulan kaca di sudut kanan atas ikut digambar ulang. Pada gambarnya layar telepon itu bukan bidang rata: tepi kanan atasnya memantulkan cahaya (#7D969D di y=75, #35515C di y=200) dan meredup ke kiri bawah. Bidang gelap yang rata menutup pantulan itu, dan teleponnya berubah dari kaca menjadi kertas hitam. */ background: radial-gradient(120% 62% at 100% 0%, rgba(140, 172, 184, .34) 0%, rgba(58, 88, 102, .13) 32%, transparent 62%), linear-gradient(175deg, #0d1b28 0%, var(--sa-layar) 55%, #060f18 100%); box-shadow: none; } /* Takik telepon, digambar ulang dengan CSS. Ia ikut tertutup bidang gelap di atas, dan telepon tanpa takik terbaca sebagai telepon yang salah gambar. */ .sa__notch[b-d3tdlynqr4] { display: block; position: absolute; left: 10.69em; top: 1.44em; width: 7.875em; height: 2.375em; border-radius: 999px; background: #05090d; font-size: 1.1722cqw; } /* Lensa kameranya: satu noktah yang menangkap cahaya. */ .sa__notch[b-d3tdlynqr4]::after { content: ""; position: absolute; right: .55em; top: 50%; width: .7em; height: .7em; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #24506b 0%, #0a1622 70%); } /* Isinya mengalir dari ATAS layar telepon, tidak diregangkan setinggi bidangnya. Bidang ini berujung di luar pandangan, jadi apa pun yang diratakan ke dasarnya justru terdorong keluar layar. Jarak atasnya 5.69em - itu jarak dari tepi atas layar telepon (y=61) ke baris merek pada rancangannya (y=152), dan yang mengisi ruang itu takiknya. Bilah gulungnya ditipiskan dan diwarnai emas pudar: pada keadaan kedua - masuk dengan pengguna dan kata sandi - isinya lebih panjang, dan bilah gulung bawaan peramban yang kelabu lebar terbaca sebagai kesalahan gambar, bukan sebagai bagian dari teleponnya. */ .sa__screen-inner[b-d3tdlynqr4] { height: 100%; padding: 5.69em 2em 1.6em; overflow-y: auto; box-sizing: border-box; scrollbar-width: thin; scrollbar-color: rgba(226, 190, 110, .3) transparent; font-size: 1.1722cqw; } .sa__screen-inner[b-d3tdlynqr4]::-webkit-scrollbar { width: .3em; } .sa__screen-inner[b-d3tdlynqr4]::-webkit-scrollbar-track { background: transparent; } .sa__screen-inner[b-d3tdlynqr4]::-webkit-scrollbar-thumb { border-radius: .3em; background: rgba(226, 190, 110, .3); } .sa__card-brand[b-d3tdlynqr4] { display: flex; align-items: center; gap: .5em; margin-bottom: 1.5em; } .sa__card-brand .sa__brand-name[b-d3tdlynqr4] { font-size: 1.06em; } .sa__card-brand .sa__brand-mark[b-d3tdlynqr4] { font-size: 1.15em; } } /* Layar yang jauh lebih lebar daripada tinggi. Gambarnya dipotong atas-bawah supaya penuh, dan pada perbandingan yang lebih lebar dari 2:1 potongan itu memakan baris paling bawah - dua lencana itu tampil terpotong separuh. Lebih baik tidak tampil daripada tampil terpotong. */ @media (min-width: 64rem) and (min-aspect-ratio: 2 / 1) { .sa__points[b-d3tdlynqr4] { display: none; } } /* _content/AMS_RentGuard.Web/Components/Account/SaasLogin.razor.rz.scp.css */ /* Formulir masuk. ================= UKURAN ================= Seluruh ukuran dinyatakan dalam em, mengikuti panggung - lihat keterangan di SaasAuthLayout.razor.css. Di ponsel satu em sama dengan 16 piksel; di layar lebar satu em ikut mengecil dan membesar bersama gambar latarnya, sehingga formulirnya tetap duduk di dalam layar telepon yang tergambar. ================= KOLOM ISIAN ================= Garis tepi, latar, dan sudut membulat kolom isian melekat pada PEMBUNGKUSnya (.lg__input-wrap), bukan pada elemen di dalamnya - dan -nya dibuat bening tanpa garis tepi. Itu bukan selera. Kolom pengguna dan kata sandi dirender komponen InputText, sehingga elemen miliknya tidak mendapat penanda lingkup dan hanya bisa dijangkau lewat ::deep. Setiap gaya yang bergantung pada ::deep adalah gaya yang hilang tanpa suara begitu Blazor mengubah cara merender - dan pernah benar-benar terjadi: kolomnya tampil sebagai kotak putih bawaan peramban di tengah layar gelap. Dengan cara ini yang tersisa di ::deep cuma warna huruf dan ukuran, sedangkan seluruh bentuk kolomnya ditentukan oleh elemen yang lingkupnya pasti. Keadaan fokusnya pun ikut pindah ke pembungkus lewat :focus-within, jadi seluruh kolom menyala saat diketik - bukan cuma kotak dalamnya. */ .lg[b-czf6arze2w] { display: flex; flex-direction: column; width: 100%; } .lg__card[b-czf6arze2w] { padding: 0; } /* ---------- Kepala ---------- */ .lg__head[b-czf6arze2w] { margin-bottom: 1.15em; } /* Judulnya EMAS. Ia satu-satunya tulisan emas di dalam kartu, dan itu yang membuatnya terbaca sebagai judul tanpa perlu dibesarkan lagi. */ .lg__head h2[b-czf6arze2w] { margin: 0 0 .35em; font-size: 1.5em; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; color: var(--sa-emas, #e2be6e); } .lg__head p[b-czf6arze2w] { margin: 0; font-size: .93em; line-height: 1.62; color: var(--sa-redup, #b9c8d4); } /* ---------- Kabar galat ---------- */ .lg__error[b-czf6arze2w] { display: flex; align-items: flex-start; gap: .5em; margin-bottom: .9em; padding: .65em .8em; border-radius: .6em; background: rgba(244, 63, 94, .12); border: 1px solid rgba(244, 63, 94, .32); color: #fecdd3; font-size: .84em; line-height: 1.5; } .lg__error i[b-czf6arze2w] { flex: 0 0 auto; color: #fb7185; font-size: .95em; line-height: 1.4; } /* ---------- Kolom isian ---------- */ .lg__field[b-czf6arze2w] { display: block; margin-bottom: .9em; } .lg__field > span:first-child[b-czf6arze2w] { display: block; margin-bottom: .45em; font-size: .87em; font-weight: 500; color: #dbe5ec; } .lg__input-wrap[b-czf6arze2w] { position: relative; display: flex; align-items: center; /* 3em = 48 piksel. Diketik dari ponsel, sering sambil berdiri. */ min-height: 3em; border-radius: .65em; border: 1px solid rgba(226, 190, 110, .28); background: rgba(10, 21, 32, .82); transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; } .lg__input-wrap:hover[b-czf6arze2w] { border-color: rgba(226, 190, 110, .45); } /* Seluruh kolom menyala saat diketik, bukan cuma kotak dalamnya. */ .lg__input-wrap:focus-within[b-czf6arze2w] { border-color: var(--sa-emas, #e2be6e); background: rgba(13, 35, 55, .95); box-shadow: 0 0 0 .2em rgba(226, 190, 110, .18); } .lg__input-wrap > i:first-child[b-czf6arze2w] { position: absolute; left: .9em; color: #7c93a3; font-size: 1em; pointer-events: none; transition: color .15s ease; } .lg__input-wrap:focus-within > i:first-child[b-czf6arze2w] { color: var(--sa-emas, #e2be6e); } /* Elemen -nya sendiri BENING: bentuk kolomnya milik pembungkus. */ .lg__input-wrap[b-czf6arze2w] input, .lg__input[b-czf6arze2w] { flex: 1 1 auto; width: 100%; min-width: 0; height: 3em; padding: 0 .9em 0 2.5em; border: 0; background: transparent; color: #eaf2f8; font-family: inherit; font-size: .95em; font-weight: 400; } .lg__input-wrap[b-czf6arze2w] input:focus, .lg__input:focus[b-czf6arze2w] { outline: none; } .lg__input-wrap[b-czf6arze2w] input::placeholder, .lg__input[b-czf6arze2w]::placeholder { color: #8299a8; } /* Lambang di ujung kolom, mengikuti rancangan. Ia SPAN, bukan tombol, dan tidak berubah saat disentuh: tidak ada yang bisa disalin dari kolom yang masih kosong, dan menyalin isi kolom menuntut JavaScript yang tidak dipakai aplikasi ini. Penunjuk tangan pada sesuatu yang tidak bisa diklik adalah janji yang tidak ditepati. */ .lg__tail[b-czf6arze2w] { position: absolute; right: .9em; color: #8299a8; font-size: 1em; pointer-events: none; } .lg__input-wrap--tail[b-czf6arze2w] input, .lg__input-wrap--tail .lg__input[b-czf6arze2w] { padding-right: 2.6em; } .lg__hint[b-czf6arze2w] { display: block; margin-top: .5em; /* font-weight DISEBUT, tidak dibiarkan diwarisi. app.css menebalkan SELURUH pada layar di bawah 992 piksel - aturan yang masuk akal di tempat asalnya, yaitu tulisan kecil di atas gambar - tapi di sini akibatnya terbalik: keterangan yang paling tidak penting menjadi tulisan paling tebal di layar, tepat di ponsel, tempat ruangnya paling sempit. */ font-size: .8em; font-weight: 400; line-height: 1.55; color: #93a7b5; } .lg[b-czf6arze2w] .lg__msg, .lg__msg[b-czf6arze2w] { display: block; margin-top: .35em; font-size: .78em; font-weight: 500; color: #fda4af; } /* ---------- Sakelar "ingat saya" ---------- */ .lg__check[b-czf6arze2w] { display: flex; align-items: center; gap: .6em; /* 2.75em = 44 piksel. Sasaran sentuhnya seluruh baris, bukan kotak centangnya - kotak 20 piksel yang meleset berarti orang masuk tanpa diingat, lalu mengetik kata sandinya lagi besok pagi. */ min-height: 2.75em; margin: 0 0 1em; font-size: .87em; color: var(--sa-redup, #c2cfd9); cursor: pointer; user-select: none; } /* InputCheckbox tidak berpenanda lingkup - ::deep di sini tidak terhindarkan. */ .lg__check[b-czf6arze2w] input, .lg__check input[b-czf6arze2w] { appearance: none; -webkit-appearance: none; position: relative; flex: 0 0 auto; width: 2.2em; height: 1.25em; margin: 0; border-radius: 999px; border: 1px solid rgba(226, 190, 110, .28); background: rgba(10, 21, 32, .82); cursor: pointer; transition: background-color .18s ease, border-color .18s ease; } .lg__check[b-czf6arze2w] input::after, .lg__check input[b-czf6arze2w]::after { content: ""; position: absolute; top: 50%; left: .15em; width: .9em; height: .9em; transform: translateY(-50%); border-radius: 50%; background: #8299a8; transition: transform .18s ease, background-color .18s ease; } .lg__check[b-czf6arze2w] input:checked, .lg__check input:checked[b-czf6arze2w] { background: rgba(43, 188, 188, .3); border-color: #2bbcbc; } .lg__check[b-czf6arze2w] input:checked::after, .lg__check input:checked[b-czf6arze2w]::after { transform: translateY(-50%) translateX(.92em); background: #38d6d6; } .lg__check[b-czf6arze2w] input:focus-visible, .lg__check input:focus-visible[b-czf6arze2w] { outline: none; box-shadow: 0 0 0 .2em rgba(43, 188, 188, .35); } /* ---------- Tombol ---------- */ .lg__btn[b-czf6arze2w] { display: inline-flex; align-items: center; justify-content: center; gap: .5em; width: 100%; min-height: 3.25em; padding: 0 1.2em; border: 1px solid rgba(120, 220, 220, .35); border-radius: .65em; /* Toska yang menua ke arah kiri, persis seperti pada rancangan: gelap di tepi kiri, terang di tepi kanan. */ background: linear-gradient(90deg, #0b5b66 0%, #109a9a 55%, #17bcbc 100%); color: #f2fbfb; font-family: inherit; font-size: .95em; font-weight: 600; letter-spacing: -.01em; text-decoration: none; cursor: pointer; box-shadow: 0 .4em 1em rgba(11, 91, 102, .45); transition: filter .15s ease, transform .1s ease, box-shadow .15s ease; } .lg__btn:hover[b-czf6arze2w] { filter: brightness(1.1); box-shadow: 0 .5em 1.2em rgba(23, 188, 188, .45); } .lg__btn:active[b-czf6arze2w] { transform: translateY(1px); } /* Tanda fokusnya EMAS dan berjarak, bukan bayangan pudar bawaan peramban: yang berpindah kolom lewat papan ketik harus tahu ia sedang di mana tanpa menyipitkan mata. */ .lg__btn:focus-visible[b-czf6arze2w] { outline: 2px solid var(--sa-emas, #e2be6e); outline-offset: 2px; } /* Tombol pendaftaran: bidang gelap bergaris tepi dengan tulisan emas - beda jauh dari tombol utama, sebab keputusannya juga beda jauh. */ .lg__btn--ghost[b-czf6arze2w] { width: 100%; min-height: 3.1em; background: transparent; border: 1px solid rgba(226, 190, 110, .3); color: var(--sa-emas, #e2be6e); box-shadow: none; font-size: .92em; font-weight: 500; } .lg__btn--ghost:hover[b-czf6arze2w] { filter: none; background: rgba(226, 190, 110, .08); border-color: var(--sa-emas, #e2be6e); color: #ffffff; box-shadow: none; } /* ---------- Ajakan mendaftar ---------- Panel tersendiri, BUKAN tab di dalam kartu yang sama. Yang mendaftar dan yang masuk adalah dua orang dengan keperluan berbeda, dan tab memaksa keduanya membaca dua-duanya sebelum tahu mana miliknya. Ia menempel di bawah tombol masuk, TIDAK didorong ke dasar kartu. Di layar lebar dasar kartunya ada di luar layar - teleponnya memang tergambar terpotong di tepi bawah gambar - sehingga yang didorong ke dasar berarti didorong keluar pandangan. */ .lg__join[b-czf6arze2w] { display: block; margin-top: 1.15em; padding-top: 1em; border-top: 1px solid rgba(190, 210, 225, .16); } .lg__join strong[b-czf6arze2w] { display: block; font-size: .92em; font-weight: 600; color: #ffffff; } .lg__join span[b-czf6arze2w] { display: block; margin: .25em 0 .9em; font-size: .82em; line-height: 1.6; color: var(--sa-redup, #c2cfd9); } /* ---------- Jalan mengganti rental ---------- Muncul hanya pada langkah kedua, saat rentalnya sudah dipilih. Sengaja tidak menonjol: yang sampai di langkah ini hampir selalu sudah di rental yang benar, dan tautan yang menarik perhatian tepat di bawah kolom kata sandi justru mengajak orang keluar dari pekerjaan yang tinggal satu ketukan. */ .lg__ganti[b-czf6arze2w] { margin: .9em 0 0; text-align: center; font-size: .82em; color: #93a7b5; } .lg__ganti a[b-czf6arze2w] { color: var(--sa-emas, #e2be6e); font-weight: 600; text-decoration: none; } .lg__ganti a:hover[b-czf6arze2w] { text-decoration: underline; } .lg__ganti a:focus-visible[b-czf6arze2w] { outline: 2px solid var(--sa-emas, #e2be6e); outline-offset: 2px; border-radius: .25em; } /* _content/AMS_RentGuard.Web/Components/Platform/PlatformApplications.razor.rz.scp.css */ /* Pendaftaran rental yang menunggu keputusan. Sengaja memakai bahasa rupa yang sama dengan halaman daftar rental: ini alat operator yang sama, dibuka orang yang sama, dan dua tampilan berbeda untuk satu pekerjaan hanya menambah yang harus dihafal. Nilainya ditulis ulang di sini, tidak diwarisi. CSS bercakupan hanya berlaku bagi komponennya sendiri - berbagi berkas antar komponen berarti salah satu dari keduanya terkirim tanpa satu pun gaya, tanpa galat maupun peringatan build. */ .pf[b-tt39a0ehqa] { max-width: 68rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #16233c; } .pf__head[b-tt39a0ehqa] { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .pf__head h1[b-tt39a0ehqa] { margin: 0; font-size: 1.4rem; font-weight: 700; } .pf__head p[b-tt39a0ehqa] { margin: .2rem 0 1.2rem; color: #5b6478; font-size: .88rem; } .pf__note[b-tt39a0ehqa] { margin: 0 0 1rem; padding: .7rem .9rem; border-radius: .6rem; font-size: .9rem; border: 1px solid; } .pf__note--ok[b-tt39a0ehqa] { background: #eef6f1; border-color: #cfe6d9; color: #14532d; } .pf__note--warn[b-tt39a0ehqa] { background: #fdf2dc; border-color: #f0d79a; color: #6b3703; } .pf__note--info[b-tt39a0ehqa] { background: #eef3fd; border-color: #cbdaf6; color: #16336b; } .pf__plans[b-tt39a0ehqa] { display: grid; gap: 1rem; grid-template-columns: 1fr; } .pf__plan[b-tt39a0ehqa] { background: #fff; border: 1px solid #cdd5e2; border-left-width: 4px; border-left-color: #0f7a4a; border-radius: .8rem; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .7rem; } /* Paket yang tidak ditawarkan dibedakan lewat warna garis DAN lewat kata pada tombolnya. Warna saja tidak cukup untuk keadaan yang menentukan apakah pendaftar baru bisa memilihnya. */ .pf__plan--off[b-tt39a0ehqa] { border-left-color: #b45309; background: #fffdf7; } .pf__plan-top[b-tt39a0ehqa] { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; flex-wrap: wrap; } .pf__code[b-tt39a0ehqa] { /* Blok, bukan inline: di halaman ini ia berdiri tepat sesudah nama usaha, dan dua tulisan inline yang bersebelahan menempel jadi satu kata. */ display: block; margin-top: .15rem; font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace; font-size: .76rem; color: #5b6478; } .pf__pill[b-tt39a0ehqa] { font-size: .74rem; font-weight: 700; padding: .15rem .55rem; border-radius: 1rem; white-space: nowrap; } .pf__pill--on[b-tt39a0ehqa] { background: #ccf0dd; color: #0b4b2e; } .pf__pill--off[b-tt39a0ehqa] { background: #e8ecf3; color: #3b4661; } .pf__form[b-tt39a0ehqa] { display: flex; flex-direction: column; gap: .5rem; } .pf__form--danger[b-tt39a0ehqa] { border-top: 1px dashed #e2e8f0; padding-top: .6rem; } .pf__form small[b-tt39a0ehqa] { font-size: .76rem; color: #6b7280; } /* Empat kolom angka berdampingan selama muat, lalu melipat sendiri. Batas unit dan batas pengguna paling sering diubah bersamaan, jadi keduanya harus terlihat dalam satu pandangan. */ .pf__fields[b-tt39a0ehqa] { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); } .pf__fields label[b-tt39a0ehqa], .pf__wide[b-tt39a0ehqa] { display: flex; flex-direction: column; gap: .2rem; font-size: .78rem; font-weight: 600; color: #3b4661; } .pf__input[b-tt39a0ehqa] { min-height: 2.4rem; padding: .35rem .6rem; border: 1px solid #cdd5e2; border-radius: .5rem; font-size: .9rem; font-family: inherit; color: #16233c; background: #fff; width: 100%; } .pf__input--name[b-tt39a0ehqa] { font-size: 1.02rem; font-weight: 700; max-width: 18rem; } .pf__hint[b-tt39a0ehqa] { margin: 0; font-size: .78rem; color: #5b6478; line-height: 1.5; } .pf__modules[b-tt39a0ehqa] { border: 1px solid #e2e8f0; border-radius: .6rem; padding: .6rem .8rem .8rem; margin: 0; display: grid; gap: .3rem .9rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } .pf__modules legend[b-tt39a0ehqa] { font-size: .78rem; font-weight: 700; color: #3b4661; padding: 0 .3rem; } .pf__check[b-tt39a0ehqa] { display: flex; align-items: center; gap: .4rem; font-size: .84rem; font-weight: 500; color: #16233c; /* Sasaran sentuh, bukan hanya kotak centangnya. Daftar module ini dicentang satu per satu belasan kali; kotak 13px yang meleset berarti paket yang tersimpan berbeda dari yang dimaksud. */ min-height: 1.9rem; cursor: pointer; } .pf__check input[b-tt39a0ehqa] { width: 1.05rem; height: 1.05rem; } .pf__row[b-tt39a0ehqa] { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; } .pf__btn[b-tt39a0ehqa] { min-height: 2.4rem; padding: 0 1rem; border: 1px solid #2f66c4; border-radius: .5rem; background: #1f52a8; color: #dce9ff; font-size: .86rem; font-weight: 600; cursor: pointer; align-self: flex-start; text-decoration: none; display: inline-flex; align-items: center; } .pf__btn:hover[b-tt39a0ehqa] { background: #2a62c0; } .pf__btn--warn[b-tt39a0ehqa] { background: #fff7ed; border-color: #e8bf74; color: #6b3703; } .pf__btn--link[b-tt39a0ehqa] { background: #eef3fd; border-color: #cbdaf6; color: #16336b; } .pf__new[b-tt39a0ehqa] { margin-top: 1.5rem; padding: 1rem 1.1rem; background: #f7f9fd; border: 1px dashed #cdd5e2; border-radius: .8rem; } .pf__new h2[b-tt39a0ehqa] { margin: 0 0 .6rem; font-size: 1rem; font-weight: 700; } .pf__new .pf__input[b-tt39a0ehqa] { flex: 1 1 10rem; width: auto; } .pf__check--wide[b-tt39a0ehqa] { border-top: 1px dashed #e2e8f0; padding-top: .5rem; } .pf__check--wide em[b-tt39a0ehqa] { color: #5b6478; font-size: .78rem; font-style: normal; } /* ---- Khusus halaman pendaftaran ---- */ .pf__name[b-tt39a0ehqa] { font-size: 1.05rem; font-weight: 700; } .pf__facts[b-tt39a0ehqa] { display: grid; gap: .25rem .9rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: 0; font-size: .84rem; } .pf__facts div[b-tt39a0ehqa] { display: flex; gap: .6rem; } .pf__facts dt[b-tt39a0ehqa] { flex: 0 0 6.5rem; color: #5b6478; font-weight: 600; } .pf__facts dd[b-tt39a0ehqa] { margin: 0; color: #16233c; word-break: break-word; } .pf__empty[b-tt39a0ehqa] { padding: 2rem 1rem; text-align: center; font-size: .86rem; color: #5b6478; background: #f7f9fd; border: 1px dashed #cdd5e2; border-radius: .8rem; margin-bottom: 1rem; } /* ---------- Foto usaha pada layar persetujuan ---------- */ .pf__foto[b-tt39a0ehqa] { display: block; margin-bottom: .9rem; border-radius: .6rem; border: 1px solid #dde3ee; background: #f6f8fc; overflow: hidden; text-decoration: none; } .pf__foto img[b-tt39a0ehqa] { display: block; width: 100%; /* Dipotong pada tinggi tetap, bukan dibiarkan setinggi aslinya: foto plang dari telepon berdiri hampir selalu tegak memanjang, dan satu foto setinggi layar mendorong tombol setuju jauh ke bawah. Aslinya tetap bisa dibuka. */ max-height: 9rem; object-fit: cover; object-position: center; } .pf__foto span[b-tt39a0ehqa] { display: block; padding: .4rem .6rem; font-size: .76rem; color: #46536e; } .pf__foto:hover[b-tt39a0ehqa] { border-color: #7fa3e8; } .pf__foto-kosong[b-tt39a0ehqa] { display: flex; align-items: center; gap: .45rem; margin: 0 0 .9rem; padding: .55rem .7rem; border-radius: .6rem; border: 1px dashed #d7ddea; background: #f9fafd; font-size: .8rem; color: #6b7280; } .pf__foto-kosong i[b-tt39a0ehqa] { font-size: 1rem; } /* _content/AMS_RentGuard.Web/Components/Platform/PlatformInvoices.razor.rz.scp.css */ /* Tagihan langganan. Sengaja memakai bahasa rupa yang sama dengan halaman daftar rental: ini alat operator yang sama, dibuka orang yang sama, dan dua tampilan berbeda untuk satu pekerjaan hanya menambah yang harus dihafal. Nilainya ditulis ulang di sini, tidak diwarisi. CSS bercakupan hanya berlaku bagi komponennya sendiri - berbagi berkas antar komponen berarti salah satu dari keduanya terkirim tanpa satu pun gaya, tanpa galat maupun peringatan build. */ .pf[b-ibynq21grt] { max-width: 68rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #16233c; } .pf__head[b-ibynq21grt] { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .pf__head h1[b-ibynq21grt] { margin: 0; font-size: 1.4rem; font-weight: 700; } .pf__head p[b-ibynq21grt] { margin: .2rem 0 1.2rem; color: #5b6478; font-size: .88rem; } .pf__note[b-ibynq21grt] { margin: 0 0 1rem; padding: .7rem .9rem; border-radius: .6rem; font-size: .9rem; border: 1px solid; } .pf__note--ok[b-ibynq21grt] { background: #eef6f1; border-color: #cfe6d9; color: #14532d; } .pf__note--warn[b-ibynq21grt] { background: #fdf2dc; border-color: #f0d79a; color: #6b3703; } .pf__note--info[b-ibynq21grt] { background: #eef3fd; border-color: #cbdaf6; color: #16336b; } .pf__plans[b-ibynq21grt] { display: grid; gap: 1rem; grid-template-columns: 1fr; } .pf__plan[b-ibynq21grt] { background: #fff; border: 1px solid #cdd5e2; border-left-width: 4px; border-left-color: #0f7a4a; border-radius: .8rem; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .7rem; } /* Paket yang tidak ditawarkan dibedakan lewat warna garis DAN lewat kata pada tombolnya. Warna saja tidak cukup untuk keadaan yang menentukan apakah pendaftar baru bisa memilihnya. */ .pf__plan--off[b-ibynq21grt] { border-left-color: #b45309; background: #fffdf7; } .pf__plan-top[b-ibynq21grt] { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; flex-wrap: wrap; } .pf__code[b-ibynq21grt] { /* Blok, bukan inline: di halaman ini ia berdiri tepat sesudah nama usaha, dan dua tulisan inline yang bersebelahan menempel jadi satu kata. */ display: block; margin-top: .15rem; font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace; font-size: .76rem; color: #5b6478; } .pf__pill[b-ibynq21grt] { font-size: .74rem; font-weight: 700; padding: .15rem .55rem; border-radius: 1rem; white-space: nowrap; } .pf__pill--on[b-ibynq21grt] { background: #ccf0dd; color: #0b4b2e; } .pf__pill--off[b-ibynq21grt] { background: #e8ecf3; color: #3b4661; } .pf__form[b-ibynq21grt] { display: flex; flex-direction: column; gap: .5rem; } .pf__form--danger[b-ibynq21grt] { border-top: 1px dashed #e2e8f0; padding-top: .6rem; } .pf__form small[b-ibynq21grt] { font-size: .76rem; color: #6b7280; } /* Empat kolom angka berdampingan selama muat, lalu melipat sendiri. Batas unit dan batas pengguna paling sering diubah bersamaan, jadi keduanya harus terlihat dalam satu pandangan. */ .pf__fields[b-ibynq21grt] { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); } .pf__fields label[b-ibynq21grt], .pf__wide[b-ibynq21grt] { display: flex; flex-direction: column; gap: .2rem; font-size: .78rem; font-weight: 600; color: #3b4661; } .pf__input[b-ibynq21grt] { min-height: 2.4rem; padding: .35rem .6rem; border: 1px solid #cdd5e2; border-radius: .5rem; font-size: .9rem; font-family: inherit; color: #16233c; background: #fff; width: 100%; } .pf__input--name[b-ibynq21grt] { font-size: 1.02rem; font-weight: 700; max-width: 18rem; } .pf__hint[b-ibynq21grt] { margin: 0; font-size: .78rem; color: #5b6478; line-height: 1.5; } .pf__modules[b-ibynq21grt] { border: 1px solid #e2e8f0; border-radius: .6rem; padding: .6rem .8rem .8rem; margin: 0; display: grid; gap: .3rem .9rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } .pf__modules legend[b-ibynq21grt] { font-size: .78rem; font-weight: 700; color: #3b4661; padding: 0 .3rem; } .pf__check[b-ibynq21grt] { display: flex; align-items: center; gap: .4rem; font-size: .84rem; font-weight: 500; color: #16233c; /* Sasaran sentuh, bukan hanya kotak centangnya. Daftar module ini dicentang satu per satu belasan kali; kotak 13px yang meleset berarti paket yang tersimpan berbeda dari yang dimaksud. */ min-height: 1.9rem; cursor: pointer; } .pf__check input[b-ibynq21grt] { width: 1.05rem; height: 1.05rem; } .pf__row[b-ibynq21grt] { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; } .pf__btn[b-ibynq21grt] { min-height: 2.4rem; padding: 0 1rem; border: 1px solid #2f66c4; border-radius: .5rem; background: #1f52a8; color: #dce9ff; font-size: .86rem; font-weight: 600; cursor: pointer; align-self: flex-start; text-decoration: none; display: inline-flex; align-items: center; } .pf__btn:hover[b-ibynq21grt] { background: #2a62c0; } .pf__btn--warn[b-ibynq21grt] { background: #fff7ed; border-color: #e8bf74; color: #6b3703; } .pf__btn--link[b-ibynq21grt] { background: #eef3fd; border-color: #cbdaf6; color: #16336b; } .pf__new[b-ibynq21grt] { margin-top: 1.5rem; padding: 1rem 1.1rem; background: #f7f9fd; border: 1px dashed #cdd5e2; border-radius: .8rem; } .pf__new h2[b-ibynq21grt] { margin: 0 0 .6rem; font-size: 1rem; font-weight: 700; } .pf__new .pf__input[b-ibynq21grt] { flex: 1 1 10rem; width: auto; } .pf__check--wide[b-ibynq21grt] { border-top: 1px dashed #e2e8f0; padding-top: .5rem; } .pf__check--wide em[b-ibynq21grt] { color: #5b6478; font-size: .78rem; font-style: normal; } /* ---- Khusus halaman pendaftaran ---- */ .pf__name[b-ibynq21grt] { font-size: 1.05rem; font-weight: 700; } .pf__facts[b-ibynq21grt] { display: grid; gap: .25rem .9rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: 0; font-size: .84rem; } .pf__facts div[b-ibynq21grt] { display: flex; gap: .6rem; } .pf__facts dt[b-ibynq21grt] { flex: 0 0 6.5rem; color: #5b6478; font-weight: 600; } .pf__facts dd[b-ibynq21grt] { margin: 0; color: #16233c; word-break: break-word; } .pf__empty[b-ibynq21grt] { padding: 2rem 1rem; text-align: center; font-size: .86rem; color: #5b6478; background: #f7f9fd; border: 1px dashed #cdd5e2; border-radius: .8rem; margin-bottom: 1rem; } /* Kotak keterangan cara bayar: beberapa baris, dan memang ditulis panjang. */ .pf__area[b-ibynq21grt] { min-height: 6rem; font-family: inherit; line-height: 1.5; resize: vertical; } /* _content/AMS_RentGuard.Web/Components/Platform/PlatformLayout.razor.rz.scp.css */ /* Bilah menu halaman pengelola layanan. Sengaja TIDAK bergaya sama dengan halaman masuk maupun halaman pendaftaran. Keduanya dilihat calon pelanggan dan memang harus meyakinkan; yang ini dilihat satu orang, berkali-kali sehari, untuk bekerja. Yang dibutuhkannya kejelasan dan kepadatan - bukan panggung. Ponsel dahulu: menunya bergulir mendatar di layar sempit, dan baru berjajar penuh mulai 48rem. Pengelola sesekali menyetujui pendaftaran dari telepon, dan menu yang melipat jadi dua baris mendorong isi halamannya turun setiap kali. */ .pl[b-aqw1ifh5hj] { --pl-tinta: #16233c; --pl-redup: #5b6478; --pl-tepi: #dde3ee; --pl-biru: #1f52a8; --pl-latar: #f4f6fb; min-height: 100vh; min-height: 100dvh; background: var(--pl-latar); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--pl-tinta); } /* ---------- Bilah atas ---------- */ .pl__bar[b-aqw1ifh5hj] { display: flex; flex-direction: column; gap: .75rem; padding: .85rem 1rem 0; box-sizing: border-box; background: #ffffff; border-bottom: 1px solid var(--pl-tepi); } .pl__brand[b-aqw1ifh5hj] { display: inline-flex; align-items: center; gap: .55rem; color: var(--pl-tinta); text-decoration: none; font-size: 1rem; } .pl__brand i[b-aqw1ifh5hj] { font-size: 1.35rem; color: #8a93a8; } .pl__brand strong[b-aqw1ifh5hj] { font-weight: 700; } .pl__brand small[b-aqw1ifh5hj] { display: block; font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--pl-redup); } /* ---------- Menu ---------- */ .pl__nav[b-aqw1ifh5hj] { display: flex; gap: .15rem; /* Bergulir mendatar di layar sempit, bukan melipat jadi dua baris: menu yang tingginya berubah-ubah mendorong isi halaman turun-naik setiap kali berpindah. */ overflow-x: auto; scrollbar-width: none; } .pl__nav[b-aqw1ifh5hj]::-webkit-scrollbar { display: none; } .pl__tab[b-aqw1ifh5hj] { display: inline-flex; align-items: center; gap: .4rem; /* Sasaran sentuh 44 piksel; ini juga dibuka dari telepon. */ min-height: 2.75rem; padding: 0 .8rem; box-sizing: border-box; border-bottom: 2px solid transparent; color: var(--pl-redup); text-decoration: none; white-space: nowrap; font-size: .88rem; font-weight: 600; transition: color .15s ease, border-color .15s ease, background-color .15s ease; } .pl__tab i[b-aqw1ifh5hj] { font-size: 1rem; } .pl__tab:hover[b-aqw1ifh5hj] { color: var(--pl-tinta); background: #f6f8fc; } /* Menu yang sedang dibuka ditandai GARIS DI BAWAH, bukan hanya warna huruf. Warna saja hilang bagi yang tidak membedakan warna, dan pada bilah berisi empat menu yang serupa itu berarti kehilangan satu-satunya petunjuk "saya sedang di mana". */ .pl__tab.is-on[b-aqw1ifh5hj] { color: var(--pl-biru); border-bottom-color: var(--pl-biru); } .pl__badge[b-aqw1ifh5hj] { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .35rem; box-sizing: border-box; border-radius: 999px; background: #b42318; color: #ffffff; font-size: .7rem; font-weight: 700; line-height: 1; } /* ---------- Baris tugas ---------- */ .pl__tugas[b-aqw1ifh5hj] { display: flex; flex-wrap: wrap; gap: .4rem 1rem; padding: .6rem 1rem; box-sizing: border-box; background: #fdf2dc; border-bottom: 1px solid #f0d79a; font-size: .84rem; color: #6b3703; } /* Tidak ada yang menunggu: warnanya berubah, bukan barisnya yang hilang. Baris yang kadang ada kadang tidak membuat isi halaman melompat setiap kali pekerjaannya habis, dan pengelola kehilangan satu tempat tetap untuk melihat "sudah beres atau belum". */ .pl__tugas--sepi[b-aqw1ifh5hj] { background: #eef6f1; border-bottom-color: #cfe6d9; color: #14532d; } .pl__tugas-item[b-aqw1ifh5hj] { display: inline-flex; align-items: center; gap: .4rem; color: inherit; text-decoration: none; } a.pl__tugas-item:hover[b-aqw1ifh5hj] { text-decoration: underline; } .pl__tugas-item i[b-aqw1ifh5hj] { font-size: 1rem; } .pl__tugas-item b[b-aqw1ifh5hj] { font-weight: 700; } /* ---------- Isi ---------- */ .pl__isi[b-aqw1ifh5hj] { display: block; } /* ============================================================ 48rem - menu berjajar di samping merek ============================================================ */ @media (min-width: 48rem) { .pl__bar[b-aqw1ifh5hj] { flex-direction: row; align-items: center; justify-content: space-between; gap: 2rem; padding: 0 1.5rem; } .pl__brand[b-aqw1ifh5hj] { padding: .75rem 0; } .pl__tab[b-aqw1ifh5hj] { min-height: 3.5rem; padding: 0 1rem; } .pl__tugas[b-aqw1ifh5hj] { padding: .65rem 1.5rem; } } /* _content/AMS_RentGuard.Web/Components/Platform/PlatformPlans.razor.rz.scp.css */ /* Susunan paket langganan. Sengaja memakai bahasa rupa yang sama dengan halaman daftar rental: ini alat operator yang sama, dibuka orang yang sama, dan dua tampilan berbeda untuk satu pekerjaan hanya menambah yang harus dihafal. Nilainya ditulis ulang di sini, tidak diwarisi. CSS bercakupan hanya berlaku bagi komponennya sendiri - berbagi berkas antar komponen berarti salah satu dari keduanya terkirim tanpa satu pun gaya, tanpa galat maupun peringatan build. */ .pf[b-eaq5d8tblw] { max-width: 68rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #16233c; } .pf__head[b-eaq5d8tblw] { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .pf__head h1[b-eaq5d8tblw] { margin: 0; font-size: 1.4rem; font-weight: 700; } .pf__head p[b-eaq5d8tblw] { margin: .2rem 0 1.2rem; color: #5b6478; font-size: .88rem; } .pf__note[b-eaq5d8tblw] { margin: 0 0 1rem; padding: .7rem .9rem; border-radius: .6rem; font-size: .9rem; border: 1px solid; } .pf__note--ok[b-eaq5d8tblw] { background: #eef6f1; border-color: #cfe6d9; color: #14532d; } .pf__note--warn[b-eaq5d8tblw] { background: #fdf2dc; border-color: #f0d79a; color: #6b3703; } .pf__note--info[b-eaq5d8tblw] { background: #eef3fd; border-color: #cbdaf6; color: #16336b; } .pf__plans[b-eaq5d8tblw] { display: grid; gap: 1rem; grid-template-columns: 1fr; } .pf__plan[b-eaq5d8tblw] { background: #fff; border: 1px solid #cdd5e2; border-left-width: 4px; border-left-color: #0f7a4a; border-radius: .8rem; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .7rem; } /* Paket yang tidak ditawarkan dibedakan lewat warna garis DAN lewat kata pada tombolnya. Warna saja tidak cukup untuk keadaan yang menentukan apakah pendaftar baru bisa memilihnya. */ .pf__plan--off[b-eaq5d8tblw] { border-left-color: #b45309; background: #fffdf7; } .pf__plan-top[b-eaq5d8tblw] { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; flex-wrap: wrap; } .pf__code[b-eaq5d8tblw] { display: inline-block; margin-top: .25rem; font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace; font-size: .76rem; color: #5b6478; } .pf__pill[b-eaq5d8tblw] { font-size: .74rem; font-weight: 700; padding: .15rem .55rem; border-radius: 1rem; white-space: nowrap; } .pf__pill--on[b-eaq5d8tblw] { background: #ccf0dd; color: #0b4b2e; } .pf__pill--off[b-eaq5d8tblw] { background: #e8ecf3; color: #3b4661; } .pf__form[b-eaq5d8tblw] { display: flex; flex-direction: column; gap: .5rem; } .pf__form--danger[b-eaq5d8tblw] { border-top: 1px dashed #e2e8f0; padding-top: .6rem; } .pf__form small[b-eaq5d8tblw] { font-size: .76rem; color: #6b7280; } /* Empat kolom angka berdampingan selama muat, lalu melipat sendiri. Batas unit dan batas pengguna paling sering diubah bersamaan, jadi keduanya harus terlihat dalam satu pandangan. */ .pf__fields[b-eaq5d8tblw] { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); } .pf__fields label[b-eaq5d8tblw], .pf__wide[b-eaq5d8tblw] { display: flex; flex-direction: column; gap: .2rem; font-size: .78rem; font-weight: 600; color: #3b4661; } .pf__input[b-eaq5d8tblw] { min-height: 2.4rem; padding: .35rem .6rem; border: 1px solid #cdd5e2; border-radius: .5rem; font-size: .9rem; font-family: inherit; color: #16233c; background: #fff; width: 100%; } .pf__input--name[b-eaq5d8tblw] { font-size: 1.02rem; font-weight: 700; max-width: 18rem; } .pf__hint[b-eaq5d8tblw] { margin: 0; font-size: .78rem; color: #5b6478; line-height: 1.5; } .pf__modules[b-eaq5d8tblw] { border: 1px solid #e2e8f0; border-radius: .6rem; padding: .6rem .8rem .8rem; margin: 0; display: grid; gap: .3rem .9rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } .pf__modules legend[b-eaq5d8tblw] { font-size: .78rem; font-weight: 700; color: #3b4661; padding: 0 .3rem; } .pf__check[b-eaq5d8tblw] { display: flex; align-items: center; gap: .4rem; font-size: .84rem; font-weight: 500; color: #16233c; /* Sasaran sentuh, bukan hanya kotak centangnya. Daftar module ini dicentang satu per satu belasan kali; kotak 13px yang meleset berarti paket yang tersimpan berbeda dari yang dimaksud. */ min-height: 1.9rem; cursor: pointer; } .pf__check input[b-eaq5d8tblw] { width: 1.05rem; height: 1.05rem; } .pf__row[b-eaq5d8tblw] { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; } .pf__btn[b-eaq5d8tblw] { min-height: 2.4rem; padding: 0 1rem; border: 1px solid #2f66c4; border-radius: .5rem; background: #1f52a8; color: #dce9ff; font-size: .86rem; font-weight: 600; cursor: pointer; align-self: flex-start; text-decoration: none; display: inline-flex; align-items: center; } .pf__btn:hover[b-eaq5d8tblw] { background: #2a62c0; } .pf__btn--warn[b-eaq5d8tblw] { background: #fff7ed; border-color: #e8bf74; color: #6b3703; } .pf__btn--link[b-eaq5d8tblw] { background: #eef3fd; border-color: #cbdaf6; color: #16336b; } .pf__new[b-eaq5d8tblw] { margin-top: 1.5rem; padding: 1rem 1.1rem; background: #f7f9fd; border: 1px dashed #cdd5e2; border-radius: .8rem; } .pf__new h2[b-eaq5d8tblw] { margin: 0 0 .6rem; font-size: 1rem; font-weight: 700; } .pf__new .pf__input[b-eaq5d8tblw] { flex: 1 1 10rem; width: auto; } .pf__check--wide[b-eaq5d8tblw] { border-top: 1px dashed #e2e8f0; padding-top: .5rem; } .pf__check--wide em[b-eaq5d8tblw] { color: #5b6478; font-size: .78rem; font-style: normal; } /* _content/AMS_RentGuard.Web/Components/Platform/PlatformTenants.razor.rz.scp.css */ /* Halaman pengelola layanan. Sengaja polos dan tanpa tata letak aplikasi: ini alat operator, bukan produk yang dilihat pelanggan. Yang dibutuhkan hanya keterbacaan dan tombol yang tidak mudah tertekan tanpa sengaja. */ .pf[b-zj91ziv5a2] { max-width: 68rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #16233c; } .pf__head h1[b-zj91ziv5a2] { margin: 0; font-size: 1.4rem; font-weight: 700; } .pf__head p[b-zj91ziv5a2] { margin: .2rem 0 1.2rem; color: #5b6478; font-size: .88rem; } .pf__note[b-zj91ziv5a2] { margin: 0 0 1rem; padding: .7rem .9rem; border-radius: .6rem; font-size: .9rem; border: 1px solid; } .pf__note--ok[b-zj91ziv5a2] { background: #eef6f1; border-color: #cfe6d9; color: #14532d; } .pf__note--warn[b-zj91ziv5a2] { background: #fdf2dc; border-color: #f0d79a; color: #6b3703; } .pf__note--info[b-zj91ziv5a2] { background: #eef3fd; border-color: #cbdaf6; color: #16336b; } .pf__grid[b-zj91ziv5a2] { display: grid; gap: 1rem; grid-template-columns: 1fr; } .pf__card[b-zj91ziv5a2] { background: #fff; border: 1px solid #cdd5e2; border-left-width: 4px; border-left-color: #0f7a4a; border-radius: .8rem; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .7rem; } /* Rental yang tidak dilayani dibedakan lewat warna garis DAN lewat kata pada lencananya. Warna saja tidak cukup untuk keadaan yang menentukan apakah pelanggan bisa bekerja hari ini. */ .pf__card--off[b-zj91ziv5a2] { border-left-color: #b45309; background: #fffdf8; } .pf__card-top[b-zj91ziv5a2] { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; } .pf__name[b-zj91ziv5a2] { font-size: 1.05rem; } .pf__code[b-zj91ziv5a2] { margin-left: .5rem; font-family: ui-monospace, monospace; font-size: .78rem; color: #5b6478; background: #eef2f8; padding: .1rem .4rem; border-radius: .3rem; } .pf__pill[b-zj91ziv5a2] { padding: .15rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 700; } .pf__pill--on[b-zj91ziv5a2] { background: #ccf0dd; color: #0b4b2e; } .pf__pill--off[b-zj91ziv5a2] { background: #fbe6bd; color: #6b3703; } .pf__facts[b-zj91ziv5a2] { margin: 0; display: grid; gap: .25rem; font-size: .86rem; } .pf__facts div[b-zj91ziv5a2] { display: flex; gap: .6rem; } .pf__facts dt[b-zj91ziv5a2] { flex: none; width: 6.5rem; color: #6b7280; } .pf__facts dd[b-zj91ziv5a2] { margin: 0; color: #2b3648; font-family: ui-monospace, monospace; font-size: .82rem; word-break: break-all; } .pf__trial[b-zj91ziv5a2] { margin-left: .4rem; font-family: system-ui, sans-serif; font-size: .74rem; background: #fbe6bd; color: #6b3703; padding: .05rem .35rem; border-radius: .3rem; } .pf__form[b-zj91ziv5a2] { border-top: 1px dashed #e2e8f0; padding-top: .6rem; display: flex; flex-direction: column; gap: .35rem; } .pf__form label[b-zj91ziv5a2] { font-size: .78rem; font-weight: 600; color: #3b4661; } .pf__form small[b-zj91ziv5a2] { font-size: .76rem; color: #6b7280; } .pf__row[b-zj91ziv5a2] { display: flex; gap: .5rem; flex-wrap: wrap; } .pf__input[b-zj91ziv5a2] { flex: 1 1 10rem; min-height: 2.4rem; padding: .35rem .6rem; border: 1px solid #cdd5e2; border-radius: .5rem; font-size: .9rem; } .pf__btn[b-zj91ziv5a2] { min-height: 2.4rem; padding: 0 1rem; border: 1px solid #2f66c4; border-radius: .5rem; background: #1f52a8; color: #dce9ff; font-size: .86rem; font-weight: 600; cursor: pointer; align-self: flex-start; } .pf__btn:hover[b-zj91ziv5a2] { background: #2a62c0; } .pf__btn--warn[b-zj91ziv5a2] { background: #fff7ed; border-color: #e8bf74; color: #6b3703; } .pf__head[b-zj91ziv5a2] { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .pf__btn--link[b-zj91ziv5a2] { background: #eef3fd; border-color: #cbdaf6; color: #16336b; text-decoration: none; display: inline-flex; align-items: center; } .pf__btn--ok[b-zj91ziv5a2] { background: #eef6f1; border-color: #86d6b0; color: #0b4b2e; } .pf__empty[b-zj91ziv5a2], .pf__foot[b-zj91ziv5a2] { font-size: .86rem; color: #5b6478; line-height: 1.55; } .pf__empty[b-zj91ziv5a2] { padding: 2rem 1rem; text-align: center; background: #fff; border: 1px dashed #cdd5e2; border-radius: .8rem; } .pf__foot[b-zj91ziv5a2] { margin-top: 1.5rem; } .pf__foot code[b-zj91ziv5a2], .pf__empty code[b-zj91ziv5a2] { font-family: ui-monospace, monospace; background: #eef2f8; padding: .05rem .3rem; border-radius: .25rem; } @media (min-width: 52rem) { .pf__grid[b-zj91ziv5a2] { grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)); } } /* _content/AMS_RentGuard.Web/Components/Platform/TenantRegister.razor.rz.scp.css */ /* Formulir pendaftaran rental - tema terang. Berbeda dari halaman pengelola: yang ini dilihat CALON PELANGGAN, sering dari layar ponsel, dan seringkali sebagai halaman pertama yang mereka lihat dari aplikasi ini. ================= TERANG, SEDANG HALAMAN MASUK GELAP ================= Halaman masuk gelap keemasan; halaman ini terang kebiruan. Keduanya berurutan dalam satu perjalanan - yang menekan "Create an Account" di sana mendarat di sini - jadi peralihannya harus terbaca sebagai disengaja, bukan sebagai tersasar ke aplikasi lain. Yang menjembataninya empat hal, dan hanya empat: lambang perisai, sudut membulat yang sama, tinggi kolom yang sama (48 piksel), dan satu warna aksen yang bertahan - toska. Di halaman masuk toska itu tombolnya; di sini ia tombol, legenda, dan lambangnya. ================= KETERBACAAN ================= Latarnya nyaris putih dan makin ramai ke arah bawah - jalur papan sirkuit - sedangkan formulir tujuh kolom ini justru memanjang ke bawah. Karena itu: - Latarnya position:fixed, bukan background-attachment:fixed. Yang kedua patah di peramban iOS dan berubah menjadi gambar yang melompat-lompat saat digulir. - Di atas gambarnya ada selubung putih yang menebal ke bawah, tepat di bagian yang paling ramai. - Kartunya bukan kaca bening melainkan putih .97, dan yang memisahkannya dari latar putih adalah garis tepi #CBD5E1 DITAMBAH bayangan berlapis. Salah satu saja tidak cukup: di layar yang kecerahannya diturunkan, bayangan tanpa garis tepi lenyap sama sekali. Warna hurufnya diambil dari deret Slate, dan semuanya diperiksa: judul #0F172A di atas putih 18.7:1, label #334155 di atas #F8FAFC 10.1:1, keterangan kecil #475569 7.0:1, tulisan tombol putih di atas #0F766E 6.5:1. Kelabu muda di atas putih tidak dipakai sama sekali - formulir ini diisi di luar ruangan, pada layar yang kecerahannya diturunkan supaya baterainya cukup sampai sore. Peubah warnanya ditaruh pada .reg-page, bukan pada :root: CSS bercakupan Blazor menambahkan penanda lingkup ke setiap pemilih, sehingga :root berubah menjadi :root[b-xxxxx] - dan elemen tidak pernah punya penanda itu. */ .reg-page[b-35u5vw0524] { --reg-kartu: rgba(255, 255, 255, .97); --reg-tepi: #cbd5e1; --reg-tepi-halus: #e2e8f0; --reg-bidang: #f8fafc; --reg-huruf: #0f172a; --reg-label: #334155; --reg-redup: #475569; --reg-toska: #0f766e; --reg-toska-tua: #115e59; --reg-wajib: #dc2626; position: relative; min-height: 100vh; min-height: 100dvh; display: flex; justify-content: center; align-items: flex-start; padding: 1rem; box-sizing: border-box; background-color: #eef2f7; color: var(--reg-huruf); font-family: 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", sans-serif; } .reg-page__bg[b-35u5vw0524] { position: fixed; inset: 0; z-index: 0; background-image: linear-gradient(to bottom, rgba(248, 250, 252, .12) 0%, rgba(238, 242, 247, .62) 62%, rgba(238, 242, 247, .82) 100%), url('/images/saas-daftar.jpg'); background-size: auto, cover; background-position: center, center top; background-repeat: no-repeat; } /* ---------- Kartu ---------- */ .reg[b-35u5vw0524] { position: relative; z-index: 1; width: 100%; max-width: 30rem; margin: auto; padding: 1.5rem 1.25rem 1.6rem; box-sizing: border-box; border-radius: 1.25rem; border: 1px solid var(--reg-tepi); background: var(--reg-kartu); box-shadow: 0 1.25rem 1.55rem -.3rem rgba(15, 23, 42, .1), 0 .5rem .6rem -.35rem rgba(15, 23, 42, .05); } /* ---------- Kepala ---------- */ .reg__head[b-35u5vw0524] { margin-bottom: 1.4rem; } .reg__brand[b-35u5vw0524] { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .75rem; font-size: 1rem; color: var(--reg-huruf); } .reg__brand-mark[b-35u5vw0524] { font-size: 1.25rem; color: var(--reg-toska); } .reg__brand-name strong[b-35u5vw0524] { font-weight: 700; } .reg__title[b-35u5vw0524] { /* Warnanya DISEBUT, tidak diwarisi - app.css menyetel warna seluruh h1. */ color: var(--reg-huruf); margin: 0 0 .45rem; font-size: 1.5rem; font-weight: 800; line-height: 1.24; letter-spacing: -.02em; } .reg__subtitle[b-35u5vw0524] { margin: 0; font-size: .875rem; line-height: 1.55; color: var(--reg-redup); } /* ---------- Kabar ---------- */ .reg__note[b-35u5vw0524] { display: flex; align-items: flex-start; gap: .65rem; margin-bottom: 1.25rem; padding: .75rem 1rem; border-radius: .65rem; border: 1px solid transparent; font-size: .845rem; line-height: 1.45; } .reg__note i[b-35u5vw0524] { flex: 0 0 auto; margin-top: .1em; font-size: 1rem; } .reg__note--warn[b-35u5vw0524] { background: #fef2f2; border-color: #fecaca; color: #991b1b; } .reg__note--info[b-35u5vw0524] { background: #f0fdf4; border-color: #bbf7d0; color: #166534; } .reg__note--ok[b-35u5vw0524] { background: #f0fdf4; border-color: #bbf7d0; color: #166534; } /* ---------- Formulir ---------- */ .reg__form[b-35u5vw0524] { display: flex; flex-direction: column; gap: 1.25rem; } /* Kelompoknya TANPA panel: tanpa bingkai, tanpa latar sendiri. Sebelumnya ada tiga lapis kotak bertumpuk - kartu putih, panel kelabu berbingkai, lalu kolom putih berbingkai lagi - dan tumpukan itulah yang membuat formulirnya terlihat gemuk, bukan tinggi kolomnya. Sekarang logikanya dibalik: kartunya putih polos, dan yang diberi warna justru kolom-kolomnya. Garis yang tersisa hanya satu per kelompok. */ .reg__group[b-35u5vw0524] { margin: 0; padding: 0; border: 0; box-sizing: border-box; display: flex; flex-direction: column; gap: .85rem; } .reg__legend[b-35u5vw0524] { display: flex; align-items: center; gap: .4rem; width: 100%; padding: 0 0 .55rem; margin-bottom: .15rem; box-sizing: border-box; border-bottom: 1px solid var(--reg-tepi-halus); font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--reg-toska); } .reg__row[b-35u5vw0524] { display: flex; flex-direction: column; gap: 1rem; } .reg__field[b-35u5vw0524] { display: flex; flex-direction: column; gap: .3rem; width: 100%; min-width: 0; } .reg__label[b-35u5vw0524] { font-size: .8125rem; font-weight: 500; color: var(--reg-label); } /* Bintang merah pada kolom wajib. Ditulis sebagai supaya pembaca layar menyebutnya, bukan sebagai warna saja. */ .reg__label b[b-35u5vw0524] { margin-left: .1em; color: var(--reg-wajib); font-weight: 700; } /* Kolomnya berlatar lembut TANPA garis tepi, dan garis tepinya baru muncul saat diketik. Satu bidang berwarna sudah cukup memberi tahu "di sini tempat mengetik"; menambahkan bingkai di sekelilingnya cuma menggandakan tepi yang sama. 2.75rem = 44 piksel, dan tidak lebih rendah dari itu. Ia diketik dari ponsel sambil berdiri, dan 44 piksel adalah batas bawah sasaran sentuh yang masih bisa dikenai jempol dengan yakin - "minimalis" tidak pernah berarti sulit ditekan. */ .reg__input[b-35u5vw0524] { width: 100%; min-height: 2.75rem; padding: 0 .8rem; box-sizing: border-box; border: 1px solid transparent; border-radius: .45rem; background: #f1f5f9; color: var(--reg-huruf); font-family: inherit; font-size: .9rem; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; } /* Contoh isian ikut dibaca orang, bukan sekadar hiasan kelabu - jadi kontrasnya dijaga tetap terbaca di atas bidang yang sudah berwarna. */ .reg__input[b-35u5vw0524]::placeholder { color: #6b7c91; } .reg__input:hover[b-35u5vw0524] { background: #e8eef5; } .reg__input:focus[b-35u5vw0524] { outline: none; background: #ffffff; border-color: var(--reg-toska); box-shadow: 0 0 0 .1875rem rgba(15, 118, 110, .16); } /* Merah hanya sesudah pendaftarnya benar-benar mengisi lalu meninggalkan kolomnya - itulah yang dijamin :user-invalid. Kalau dipakai :invalid saja, seluruh kolom wajib menyala merah sejak halaman dimuat: formulir yang menyambut orangnya dengan tujuh garis merah terbaca sebagai formulir yang sudah gagal sebelum disentuh. */ .reg__input:user-invalid[b-35u5vw0524] { border-color: var(--reg-wajib); background: #fff5f5; } .reg__input:user-invalid:focus[b-35u5vw0524] { box-shadow: 0 0 0 .1875rem rgba(220, 38, 38, .2); } /* Kolom berkas bawaan peramban, cuma diwarnai. Kotak seret-dan-lepas yang cantik menuntut JavaScript - dan yang lebih menentukan: kolom bawaan itulah yang menampilkan NAMA BERKAS terpilih. Tanpa JavaScript, kotak buatan sendiri tidak bisa memberi tahu pendaftarnya foto mana yang jadi ia pilih, dan yang tidak yakin fotonya masuk akan menekan kirim dua kali. Garis tepinya putus-putus: itu yang memberi tahu "boleh dikosongkan" tanpa satu kata tambahan pun. */ .reg__file[b-35u5vw0524] { width: 100%; min-height: 2.75rem; padding: .5rem .6rem; box-sizing: border-box; border: 1px dashed #c3cedb; border-radius: .45rem; background: #f1f5f9; color: var(--reg-label); font-family: inherit; font-size: .78rem; cursor: pointer; } .reg__file:hover[b-35u5vw0524] { background: #e8eef5; border-color: var(--reg-toska); } .reg__file:focus-visible[b-35u5vw0524] { outline: none; border-color: var(--reg-toska); border-style: solid; box-shadow: 0 0 0 .1875rem rgba(15, 118, 110, .2); } .reg__file[b-35u5vw0524]::file-selector-button { margin-right: .6rem; padding: .35rem .75rem; border: 1px solid #c3cedb; border-radius: .3rem; background: #ffffff; color: var(--reg-toska); font-family: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .reg__file:hover[b-35u5vw0524]::file-selector-button { background: var(--reg-toska); color: #ffffff; } .reg__hint[b-35u5vw0524] { /* font-weight DISEBUT, tidak dibiarkan diwarisi. app.css menebalkan SELURUH pada layar di bawah 992 piksel - aturan yang masuk akal di tempat asalnya, yaitu tulisan kecil di atas gambar - tapi di sini akibatnya terbalik: keterangan yang paling tidak penting menjadi tulisan paling tebal di layar, tepat di ponsel, tempat ruangnya paling sempit. */ font-size: .75rem; font-weight: 400; line-height: 1.45; color: var(--reg-redup); } /* ---------- Kotak jaminan ---------- */ .reg__guarantee[b-35u5vw0524] { display: flex; gap: .65rem; padding: .75rem .85rem; box-sizing: border-box; border: 0; border-left: 2px solid var(--reg-toska); border-radius: 0 .45rem .45rem 0; background: #f1f5f9; } .reg__guarantee-mark[b-35u5vw0524] { flex: 0 0 auto; margin-top: .1rem; font-size: 1.25rem; color: var(--reg-toska); } .reg__guarantee-text[b-35u5vw0524] { margin: 0; font-size: .8125rem; line-height: 1.5; color: var(--reg-label); } /* ---------- Tombol ---------- */ .reg__btn[b-35u5vw0524] { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; min-height: 2.875rem; padding: 0 1.25rem; box-sizing: border-box; border: 0; border-radius: .625rem; background: var(--reg-toska); color: #ffffff; font-family: inherit; font-size: .9375rem; font-weight: 700; cursor: pointer; box-shadow: 0 .125rem .25rem rgba(15, 118, 110, .2); transition: background-color .15s ease, transform .05s ease; } .reg__btn:hover[b-35u5vw0524] { background: var(--reg-toska-tua); } .reg__btn:active[b-35u5vw0524] { transform: translateY(1px); } .reg__btn:focus-visible[b-35u5vw0524] { outline: 3px solid #0d9488; outline-offset: 2px; } /* ---------- Kaki ---------- */ .reg__foot[b-35u5vw0524] { margin: 1.4rem 0 0; text-align: center; font-size: .875rem; color: var(--reg-redup); } .reg__link[b-35u5vw0524] { color: var(--reg-toska); font-weight: 700; text-decoration: none; } .reg__link:hover[b-35u5vw0524] { text-decoration: underline; } .reg__link:focus-visible[b-35u5vw0524] { outline: 2px solid var(--reg-toska); outline-offset: 2px; border-radius: .25rem; } /* ============================================================ 640 PIKSEL - dua kolom berdampingan ============================================================ */ @media (min-width: 640px) { .reg-page[b-35u5vw0524] { padding: 2.5rem 1.25rem; } .reg[b-35u5vw0524] { padding: 2.25rem 2rem; } .reg__title[b-35u5vw0524] { font-size: 1.75rem; } /* Kota dan jumlah unit diisi bersamaan, begitu pula WhatsApp dan email. Yang diisi bersamaan sebaiknya terlihat bersamaan. */ .reg__row--split[b-35u5vw0524] { flex-direction: row; } .reg__row--split .reg__field[b-35u5vw0524] { flex: 1 1 0; } } @media (min-width: 52rem) { .reg[b-35u5vw0524] { max-width: 32.5rem; } } /* ============================================================ 64rem - MENYAMPING Dua kelompok pertanyaannya berdiri berdampingan, bukan bertumpuk. Di layar selebar laptop, satu lajur sempit berarti formulir tujuh kolom memanjang jauh melewati tepi bawah layar: pendaftarnya menggulir tanpa pernah melihat tombol kirimnya, dan ruang kosong selebar dua telapak tangan menganggur di kiri dan kanannya. Dua lajur DIPILIH menurut isinya, bukan supaya rata: yang di kiri tentang usahanya - termasuk fotonya - dan yang di kanan tentang orangnya. Membelah satu kelompok pertanyaan menjadi dua lajur justru memaksa mata berpindah bolak-balik di tengah satu pokok yang sama. Jaminan dan tombolnya melintang penuh: keduanya menutup KEDUA kelompok itu, bukan salah satunya. ============================================================ */ @media (min-width: 64rem) { .reg-page[b-35u5vw0524] { /* Formulirnya berdiri di tengah bidang, bukan menempel ke tepi atas: gambar latarnya justru paling lapang di situ. */ align-items: center; } .reg[b-35u5vw0524] { max-width: 58rem; padding: 1.9rem 2rem 1.75rem; } .reg__head[b-35u5vw0524] { max-width: 40rem; margin-bottom: 1.1rem; } .reg__form[b-35u5vw0524] { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.25rem; align-items: start; } /* Jaminan di kiri, tombol di kanan - SEBARIS, bukan bertumpuk. Baris tombol tersendiri menambah tinggi kartunya sekitar tujuh puluh piksel, dan pada laptop 1366x768 justru tujuh puluh piksel itulah yang mendorong tombol kirimnya ke bawah lipatan layar. Formulir yang tombol kirimnya tidak terlihat adalah formulir yang tampak belum selesai. Susunannya pun jadi lebih masuk akal: yang menenangkan berdiri tepat di samping yang harus diputuskan. */ .reg__guarantee[b-35u5vw0524] { grid-column: 1; } .reg__btn[b-35u5vw0524] { grid-column: 2; justify-self: end; align-self: center; width: auto; min-width: 15rem; } .reg__foot[b-35u5vw0524] { margin-top: 1rem; } } /* _content/AMS_RentGuard.Web/Components/Platform/TenantRegisterDone.razor.rz.scp.css */ /* Halaman sesudah pendaftaran terkirim - tema terang. Sekeluarga dengan formulir pendaftarannya: latar, kartu putih, aksen toska, dan deret warna Slate yang sama. Orang yang baru menekan "Kirim pendaftaran" mendarat di sini seketika, dan halaman bergaya lain akan terbaca sebagai "ada yang tidak beres". Nilainya DITULIS ULANG di sini, tidak diwarisi dari TenantRegister.razor.css. CSS bercakupan hanya berlaku bagi komponennya sendiri - berbagi satu berkas antar dua komponen berarti salah satu dari keduanya terkirim tanpa satu pun gaya, tanpa galat maupun peringatan build. */ .reg-page[b-uww0lx8j8y] { --reg-kartu: rgba(255, 255, 255, .97); --reg-tepi: #cbd5e1; --reg-tepi-halus: #e2e8f0; --reg-bidang: #f8fafc; --reg-huruf: #0f172a; --reg-label: #334155; --reg-redup: #475569; --reg-toska: #0f766e; position: relative; min-height: 100vh; min-height: 100dvh; display: flex; justify-content: center; align-items: flex-start; padding: 1rem; box-sizing: border-box; background-color: #eef2f7; color: var(--reg-huruf); font-family: 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", sans-serif; } .reg-page__bg[b-uww0lx8j8y] { position: fixed; inset: 0; z-index: 0; background-image: linear-gradient(to bottom, rgba(248, 250, 252, .12) 0%, rgba(238, 242, 247, .62) 62%, rgba(238, 242, 247, .82) 100%), url('/images/saas-daftar.jpg'); background-size: auto, cover; background-position: center, center top; background-repeat: no-repeat; } .reg[b-uww0lx8j8y] { position: relative; z-index: 1; width: 100%; max-width: 30rem; margin: auto; padding: 1.75rem 1.25rem 1.6rem; box-sizing: border-box; border-radius: 1.25rem; border: 1px solid var(--reg-tepi); background: var(--reg-kartu); box-shadow: 0 1.25rem 1.55rem -.3rem rgba(15, 23, 42, .1), 0 .5rem .6rem -.35rem rgba(15, 23, 42, .05); } /* ---------- Kepala ---------- */ .reg__head[b-uww0lx8j8y] { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin-bottom: 1.4rem; text-align: center; } /* Lingkaran centang. Ia satu-satunya bidang hijau di halaman ini, dan itu yang menyampaikan "terkirim" sebelum satu kata pun dibaca. */ .reg__badge[b-uww0lx8j8y] { display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; margin-bottom: .35rem; border-radius: 50%; background: #dcfce7; color: #15803d; font-size: 1.75rem; } .reg__title[b-uww0lx8j8y] { /* Warnanya DISEBUT, tidak diwarisi - app.css menyetel warna seluruh h1. */ color: var(--reg-huruf); margin: 0; font-size: 1.4rem; font-weight: 800; line-height: 1.25; letter-spacing: -.02em; } .reg__subtitle[b-uww0lx8j8y] { margin: 0; font-size: .875rem; line-height: 1.55; color: var(--reg-redup); } /* ---------- Kartu langkah ---------- */ .reg__card[b-uww0lx8j8y] { padding: 1rem; margin-bottom: 1.25rem; box-sizing: border-box; border: 1px solid var(--reg-tepi-halus); border-radius: .75rem; background: var(--reg-bidang); } .reg__card-title[b-uww0lx8j8y] { margin: 0 0 .9rem; font-size: .875rem; font-weight: 700; color: var(--reg-huruf); } .reg__steps[b-uww0lx8j8y] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; } .reg__steps li[b-uww0lx8j8y] { display: flex; align-items: flex-start; gap: .75rem; } /* Nomornya bulatan toska, bukan angka daftar bawaan: pada tiga langkah yang panjangnya berbeda-beda, angka bawaan tenggelam di antara tulisannya. */ .reg__step-no[b-uww0lx8j8y] { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; margin-top: .1rem; border-radius: 50%; background: var(--reg-toska); color: #ffffff; font-size: .75rem; font-weight: 700; } .reg__steps strong[b-uww0lx8j8y] { display: block; margin-bottom: .15rem; font-size: .875rem; font-weight: 700; color: var(--reg-huruf); } .reg__steps p[b-uww0lx8j8y] { margin: 0; font-size: .8125rem; line-height: 1.5; color: var(--reg-redup); } /* ---------- Kabar ---------- */ .reg__note[b-uww0lx8j8y] { display: flex; align-items: flex-start; gap: .65rem; padding: .75rem 1rem; border-radius: .65rem; border: 1px solid transparent; font-size: .845rem; line-height: 1.45; } .reg__note i[b-uww0lx8j8y] { flex: 0 0 auto; margin-top: .1em; font-size: 1rem; } .reg__note--ok[b-uww0lx8j8y] { background: #f0fdf4; border-color: #bbf7d0; color: #166534; } /* ---------- Kaki ---------- */ .reg__foot[b-uww0lx8j8y] { margin: 1.4rem 0 0; text-align: center; font-size: .875rem; color: var(--reg-redup); } .reg__link[b-uww0lx8j8y] { color: var(--reg-toska); font-weight: 700; text-decoration: none; } .reg__link:hover[b-uww0lx8j8y] { text-decoration: underline; } .reg__link:focus-visible[b-uww0lx8j8y] { outline: 2px solid var(--reg-toska); outline-offset: 2px; border-radius: .25rem; } /* ============================================================ LAYAR LEBAR ============================================================ */ @media (min-width: 640px) { .reg-page[b-uww0lx8j8y] { padding: 2.5rem 1.25rem; } .reg[b-uww0lx8j8y] { padding: 2.25rem 2rem; } .reg__title[b-uww0lx8j8y] { font-size: 1.6rem; } } @media (min-width: 64rem) { .reg-page[b-uww0lx8j8y] { align-items: center; } } /* _content/AMS_RentGuard.Web/Components/Public/CompanyProfile.razor.rz.scp.css */ /* Company profile. Terang, lapang, navy dan emas mengikuti gambar hero dan warna merek. Pindah dari gelap ke terang menuntut satu hal diubah cara berpikirnya: pada latar gelap, benda dibuat terlihat lewat garis terang di tepi atas. Pada latar terang, yang bekerja adalah BAYANGAN — kartu putih di atas putih hanya terbaca kalau ia menjatuhkan bayangan. Yang membuatnya tidak membosankan bukan warnanya sendiri, melainkan iramanya: putih -> bertint -> putih -> bertint, lalu satu pita navy di bagian ajakan menghubungi. Halaman terang yang seluruhnya seragam justru lebih cepat membosankan daripada halaman gelap. Seluruh gaya halaman ini berdiri sendiri dan TIDAK memakai Bootstrap selain ikonnya. Alasannya sederhana: halaman ini punya bahasa visual yang berbeda dari bagian dalam aplikasi, dan menimpanya satu per satu justru menghasilkan lebih banyak aturan daripada menulisnya dari awal. */ .cp[b-kh96hzjm86] { --ink: #131a28; --ink-soft: #4a5568; --ink-dim: #7a8697; /* Tiga permukaan terang: dasar halaman, kartu, dan bagian bertint. Permukaan keempat — pita gelap di bagian kontak — memakai --brand-deep, karena warnanya memang warna merek, bukan sekadar "latar gelap". */ --bg: #f6f8fb; --bg-card: #ffffff; --bg-tint: #eef2f8; --brand: #12305e; --brand-deep: #0b1f3f; --brand-darkest: #071630; /* Dua nada emas, dan pemisahan ini penting. Emas cerah di atas putih punya kontras terlalu rendah untuk dibaca — dipakai hanya sebagai garis dan bidang. Untuk tulisan dipakai nada tua yang tetap terbaca. */ --gold: #c9a227; --gold-ink: #8a6d12; --line: #e3e8f0; --line-strong: #cdd6e4; --shadow-sm: 0 1px 2px rgba(11, 31, 63, .04), 0 2px 8px rgba(11, 31, 63, .05); --shadow-lg: 0 1rem 2.25rem rgba(11, 31, 63, .10); background: var(--bg); color: var(--ink); font-size: 1rem; line-height: 1.65; min-height: 100vh; overflow-x: hidden; } .cp p[b-kh96hzjm86] { color: var(--ink-soft); } .cp-wrap[b-kh96hzjm86] { width: 100%; max-width: 72rem; margin: 0 auto; padding-inline: 1.25rem; } /* ---------- Bagian ---------- */ .cp-section[b-kh96hzjm86] { position: relative; padding: 6rem 0; background: var(--bg-card); } /* Bagian selang-seling diberi tint kebiruan tipis. Inilah yang membentuk irama; tanpanya halaman terang yang panjang terasa satu lembar tanpa ujung. */ .cp-section--alt[b-kh96hzjm86] { background: radial-gradient(46rem 26rem at 84% 6%, rgba(18, 48, 94, .05), transparent 62%), var(--bg-tint); } /* Pemisah antarbagian: garis emas yang memudar di kedua ujung, bukan garis penuh yang membelah halaman menjadi tumpukan kotak. */ .cp-section[b-kh96hzjm86]::before { content: ""; position: absolute; top: 0; inset-inline: 0; height: 1px; background: linear-gradient( 90deg, transparent, rgba(201, 162, 39, .5) 22%, rgba(201, 162, 39, .5) 78%, transparent); } .cp-kicker[b-kh96hzjm86] { display: inline-flex; align-items: center; gap: .625rem; margin: 0 0 .875rem; font-size: .6875rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--brand); } /* Garis pendek emas sebelum teks. Penanda kecil yang membuat tiap bagian punya pembuka yang sama, dan keseragaman itulah yang terbaca sebagai tertata. */ .cp-kicker[b-kh96hzjm86]::before { content: ""; width: 1.75rem; height: 2px; background: linear-gradient(90deg, transparent, var(--gold)); } .cp-h2[b-kh96hzjm86] { margin: 0 0 1.125rem; font-size: clamp(1.75rem, 3.4vw, 2.75rem); font-weight: 700; line-height: 1.14; letter-spacing: -.025em; color: var(--ink); } .cp-h3[b-kh96hzjm86] { margin: 3rem 0 1.25rem; font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink); } .cp-lead[b-kh96hzjm86] { max-width: 46rem; font-size: 1.0625rem; } /* ---------- Hero ---------- Latar berupa foto armada: navy pekat di kiri, menerang ke arah kanan tempat mobil dan siluet kota berada. Susunan itu yang menentukan tata letak di sini: tulisan ditaruh di KIRI, di atas bidang navy yang memang kosong, sehingga tidak ada satu pun huruf yang jatuh di atas mobil. Foto dipasang lewat custom property yang diisi komponen, bukan url() di sini. Lihat catatan pada HeroStyle di CompanyProfile.razor. */ .cp-hero[b-kh96hzjm86] { position: relative; overflow: hidden; /* Warna dasar tetap ada di bawah foto. Bila fotonya gagal dimuat — jaringan putus, berkas terhapus — hero tetap berupa bidang navy dengan tulisan terang yang terbaca, bukan tulisan putih di atas putih. */ background-color: var(--brand-deep); background-image: var(--cp-hero-image, none); background-size: cover; /* Titik jangkar di kanan: bagian kanan foto yang berisi mobil harus tetap terlihat saat layar menyempit, dan bidang navy di kiri boleh terpotong karena isinya memang kosong. */ background-position: right center; background-repeat: no-repeat; } /* Lapisan gelap dari kiri. Ini yang menjamin tulisan tetap terbaca berapa pun terangnya foto: navy pekat di kiri tempat tulisan berada, memudar menjadi bening di kanan agar mobil dan kota tidak ikut tertutup. */ .cp-hero[b-kh96hzjm86]::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 100deg, rgba(7, 22, 48, .93) 0%, rgba(7, 22, 48, .82) 32%, rgba(11, 31, 63, .45) 58%, rgba(11, 31, 63, .10) 78%, transparent 100%); pointer-events: none; } /* Peralihan ke bagian putih di bawahnya. Tanpa ini, foto bertemu bidang putih sebagai garis potong yang tajam. */ .cp-hero[b-kh96hzjm86]::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 6rem; background: linear-gradient(180deg, transparent, var(--bg-card)); pointer-events: none; z-index: 1; } /* Cahaya emas samar di kiri bawah, mengikuti garis emas pada foto. */ .cp-hero__glow[b-kh96hzjm86] { position: absolute; inset-inline-start: -12%; bottom: -18%; width: 40rem; height: 40rem; background: radial-gradient(circle, rgba(201, 162, 39, .16), transparent 62%); pointer-events: none; } /* Navigasi berada DI ATAS foto navy, jadi seluruh tulisannya terang — kebalikan dari bagian halaman lain yang berlatar putih. */ .cp-nav[b-kh96hzjm86] { position: relative; z-index: 3; display: flex; align-items: center; gap: 1.5rem; width: 100%; max-width: 95%; margin: 0 auto; padding: 1.375rem 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, .12); } /* ---------- Lockup nama perusahaan ---------- */ .cp-nav__brand[b-kh96hzjm86] { display: inline-flex; align-items: center; gap: .875rem; text-decoration: none; /* flex-shrink dimatikan supaya lockup tidak ikut mengecil saat menu tengah memakan ruang; yang boleh menyempit adalah menunya, bukan identitasnya. */ flex: 0 0 auto; } /* Wadah logo. Bulat, berlatar navy pekat, dengan cincin emas tipis. Logo perusahaan berupa emas di atas gelap, jadi ia butuh alas gelap sendiri — tanpa itu ia lenyap begitu berada di atas bagian foto yang terang. Cincin emasnya sekaligus mengikat logo dengan tulisan di sebelahnya menjadi satu kesatuan, bukan dua benda yang kebetulan bersebelahan. */ .cp-nav__brand-mark[b-kh96hzjm86] { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 3.5rem; height: 3.5rem; padding: .4375rem; background: radial-gradient(circle at 30% 25%, rgba(18, 48, 94, .95), rgba(7, 22, 48, .98)); border: 1px solid rgba(201, 162, 39, .55); border-radius: 50%; box-shadow: 0 0 0 .25rem rgba(201, 162, 39, .08), 0 .5rem 1.25rem rgba(7, 22, 48, .5); transition: border-color .2s ease, box-shadow .2s ease; } .cp-nav__brand:hover .cp-nav__brand-mark[b-kh96hzjm86] { border-color: rgba(201, 162, 39, .9); box-shadow: 0 0 0 .3125rem rgba(201, 162, 39, .16), 0 .5rem 1.5rem rgba(7, 22, 48, .6); } .cp-nav__brand-mark img[b-kh96hzjm86] { width: 100%; height: 100%; object-fit: contain; } .cp-nav__brand-text[b-kh96hzjm86] { display: flex; flex-direction: column; /* Rapat, supaya dua baris terbaca sebagai satu blok — bukan dua kalimat. */ line-height: 1.15; } /* Nama memakai gradasi emas, bukan warna rata. Emas rata pada tulisan sekecil ini terbaca kuning kusam; gradasi tipis dari terang ke tua yang membuatnya terbaca sebagai logam. Aman memakai background-clip di sini karena elemen ini TIDAK dianimasikan transform — berbeda dengan pita berjalan di tepi kanan, yang justru gagal tergambar karena kombinasi itu. */ .cp-nav__brand-name[b-kh96hzjm86] { font-size: 1.375rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; background: linear-gradient(100deg, #fff6d8 0%, var(--gold) 45%, #a8842a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .cp-nav__brand-tag[b-kh96hzjm86] { margin-top: .1875rem; font-size: .6875rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .62); transition: color .2s ease; } .cp-nav__brand:hover .cp-nav__brand-tag[b-kh96hzjm86] { color: rgba(255, 255, 255, .85); } .cp-nav__links[b-kh96hzjm86] { display: flex; gap: 2rem; margin: 0 auto; padding: 0; list-style: none; } .cp-nav__links a[b-kh96hzjm86] { position: relative; font-size: .875rem; color: rgba(255, 255, 255, .75); text-decoration: none; transition: color .18s ease; } /* Garis bawah yang tumbuh dari kiri saat disentuh. */ .cp-nav__links a[b-kh96hzjm86]::after { content: ""; position: absolute; inset-inline-start: 0; bottom: -.375rem; width: 0; height: 2px; background: var(--gold); transition: width .22s ease; } .cp-nav__links a:hover[b-kh96hzjm86] { color: #fff; } .cp-nav__links a:hover[b-kh96hzjm86]::after { width: 100%; } .cp-nav__cta[b-kh96hzjm86] { padding: .5625rem 1.125rem; font-size: .8125rem; font-weight: 600; color: #fff; text-decoration: none; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; background: rgba(255, 255, 255, .08); transition: border-color .18s ease, color .18s ease, background-color .18s ease; } .cp-nav__cta:hover[b-kh96hzjm86] { color: var(--gold); border-color: rgba(201, 162, 39, .7); background: rgba(201, 162, 39, .12); } /* Isi hero rata kiri, dibatasi 40rem, dan menempel pada lebar isi halaman yang sama dengan bagian lain. Rata tengah akan menaruh tulisan tepat di atas mobil pada foto. */ .cp-hero__body[b-kh96hzjm86] { position: relative; z-index: 2; width: 100%; max-width: 95%; margin: 0 auto; padding: 2rem 1.25rem 8rem; text-align: start; } .cp-hero__body > *[b-kh96hzjm86] { max-width: 40rem; } /* ---------- Masuknya isi hero ---------- Judul saja yang bergerak akan terlihat seperti satu elemen yang dianimasikan, bukan halaman yang tersusun. Label di atas dan kalimat di bawahnya ikut masuk dengan jeda yang menyambung urutan judul, sehingga seluruh hero terbaca sebagai satu gerakan yang direncanakan. Geraknya lebih kecil daripada judul — 12px, bukan setinggi baris. Bagian pendukung tidak boleh menarik perhatian sebesar judulnya. */ @keyframes cp-fade-up-b-kh96hzjm86 { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .cp-hero__eyebrow[b-kh96hzjm86], .cp-hero__lead[b-kh96hzjm86], .cp-hero__actions[b-kh96hzjm86], .cp-hero__note[b-kh96hzjm86] { animation: cp-fade-up-b-kh96hzjm86 .8s ease-out both; } .cp-hero__eyebrow[b-kh96hzjm86] { animation-delay: 0s; } .cp-hero__lead[b-kh96hzjm86] { animation-delay: .55s; } .cp-hero__actions[b-kh96hzjm86] { animation-delay: .68s; } .cp-hero__note[b-kh96hzjm86] { animation-delay: .82s; } .cp-hero__eyebrow[b-kh96hzjm86] { display: inline-block; margin: 0 0 1.5rem; padding: .375rem 1rem; font-size: .6875rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--gold) !important; border: 1px solid rgba(201, 162, 39, .45); border-radius: 999px; background: rgba(201, 162, 39, .10); } /* Putih di atas foto navy. Bayangan tipis menjaga huruf tetap terbaca andai bagian foto di baliknya kebetulan lebih terang dari perkiraan. */ .cp-hero__title[b-kh96hzjm86] { margin: 0 0 1.75rem; font-size: clamp(2.25rem, 6.2vw, 4.5rem); font-weight: 700; line-height: 1.02; letter-spacing: -.035em; color: #fff; text-shadow: 0 .125rem 1.5rem rgba(7, 22, 48, .45); } /* ---------- Tersingkapnya judul ---------- Tiap baris punya topeng sendiri. Yang bergerak adalah lapis di dalamnya, naik dari bawah garis potong topeng — sehingga hurufnya terlihat tersingkap dari balik tepi, bukan melayang masuk dari luar layar. padding-bottom pada topeng WAJIB ada. Tanpa itu, overflow:hidden memotong ekor huruf turun seperti "g" dan "y"; kebetulan tidak ada di tiga baris ini, tetapi naskahnya bisa diganti kapan saja. margin-bottom negatif senilai sama mengembalikan jarak antarbaris seperti semula. */ .cp-hero__line[b-kh96hzjm86] { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; } .cp-hero__line > span[b-kh96hzjm86] { display: block; /* both: keadaan awal berlaku sebelum jeda mulai, keadaan akhir dipertahankan sesudahnya. Tanpa itu tulisan berkedip muncul lebih dulu, lalu melompat ke bawah saat animasinya benar-benar dimulai. */ animation: cp-rise-b-kh96hzjm86 .95s cubic-bezier(.22, .68, .24, 1) both; } /* Jeda bertingkat. Selisih 0,13 detik cukup untuk terbaca sebagai urutan, dan masih terlalu cepat untuk terasa lambat. */ .cp-hero__line:nth-child(1) > span[b-kh96hzjm86] { animation-delay: .10s; } .cp-hero__line:nth-child(2) > span[b-kh96hzjm86] { animation-delay: .23s; } .cp-hero__line:nth-child(3) > span[b-kh96hzjm86] { animation-delay: .36s; } @keyframes cp-rise-b-kh96hzjm86 { from { transform: translateY(105%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Baris ketiga memakai gradasi hijau ke emas tua. Di atas latar terang, emas cerah pada huruf sebesar ini kehilangan kontras dan terbaca pudar — karena itu gradasinya berakhir pada nada emas yang jauh lebih tua. Gradasinya dibuat 2,6 kali lebih lebar dari tulisannya, dengan pita emas terang di tengah. Menggeser posisinya membuat pita itu menyapu huruf seperti pantulan cahaya pada logam. */ .cp-hero__title-accent[b-kh96hzjm86] { /* Di atas foto navy, nada diamnya emas — bukan warna merek seperti pada versi berlatar putih. Pita terang di tengah yang menyapu. */ background: linear-gradient( 100deg, var(--gold) 0%, var(--gold) 34%, #f0d98a 46%, #fff6d8 52%, #f0d98a 58%, var(--gold) 70%, var(--gold) 100%); background-size: 260% 100%; background-position: 128% 0; -webkit-background-clip: text; background-clip: text; color: transparent; /* Jeda 1,4 detik: menunggu sampai ketiga baris selesai tersingkap dulu. Dua gerakan yang berjalan bersamaan saling menutupi. */ animation: cp-sheen-b-kh96hzjm86 7s ease-in-out 1.4s infinite; } /* Sapuan berlangsung sekitar dua detik, lalu diam lima detik. Perbandingan inilah yang menentukan kesannya: sapuan yang terus-menerus terbaca sebagai hiasan murahan, sedangkan yang sesekali terbaca sebagai kilau bahan. */ @keyframes cp-sheen-b-kh96hzjm86 { 0%, 62% { background-position: 128% 0; } 92%, 100% { background-position: -34% 0; } } .cp-hero__lead[b-kh96hzjm86] { margin: 0 0 2.5rem; max-width: 34rem !important; font-size: 1.0625rem; color: rgba(255, 255, 255, .82) !important; } .cp-hero__actions[b-kh96hzjm86] { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .75rem; } .cp-hero__note[b-kh96hzjm86] { position: relative; margin: 3.5rem 0 0; max-width: 30rem !important; padding-top: 2rem; font-size: .9375rem; color: rgba(255, 255, 255, .72) !important; } /* Garis penanda di kiri, bukan di tengah — mengikuti tata letak rata kiri. */ .cp-hero__note[b-kh96hzjm86]::before { content: ""; position: absolute; top: 0; inset-inline-start: 0; width: 3rem; height: 2px; background: linear-gradient(90deg, var(--gold), transparent); } .cp-hero__note strong[b-kh96hzjm86] { display: block; margin-top: .375rem; font-size: 1.0625rem; color: #fff; } /* ---------- Pita nama berjalan ---------- PENTING, dan ini penyebab tulisan raksasa sebelumnya menabrak judul: Pada elemen ber-position absolute, inset-inline-start/end dipetakan ke sisi fisik menurut writing-mode ELEMEN ITU SENDIRI, bukan menurut induknya. Elemen ini memakai writing-mode: vertical-rl, sehingga sumbu inline-nya TEGAK — inset-inline-end berarti "bawah", bukan "kanan". Akibatnya sisi kanan tidak pernah diatur, elemennya jatuh ke posisi statis di kiri, dan menimpa judul hero. Karena itu di sini dipakai properti fisik "right". Untuk elemen yang writing-mode-nya diputar, properti logis justru menyesatkan. */ .cp-hero__rail[b-kh96hzjm86] { position: absolute; right: 0; top: 0; bottom: 0; z-index: 1; width: 6.5rem; overflow: hidden; /* Alas navy yang memekat ke arah tepi kanan. Ini bukan hiasan, melainkan syarat agar pitanya terbaca. Pita berada di sisi kanan foto — tempat gedung dan langit justru paling TERANG. Emas di atas bidang seterang itu akan tenggelam berapa pun pekat warnanya. Alas ini yang memastikan hurufnya selalu berdiri di atas bidang gelap, apa pun foto yang dipasang kemudian. */ background: linear-gradient( 90deg, rgba(7, 22, 48, 0) 0%, rgba(7, 22, 48, .55) 30%, rgba(7, 22, 48, .78) 100%); /* Memudar di kedua ujung, sehingga tulisannya seolah muncul dari balik tepi layar dan lenyap kembali — bukan terpotong mendadak. */ mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); pointer-events: none; user-select: none; } /* Garis emas di sisi dalam pita, menegaskan bahwa ini satu jalur tersendiri. */ .cp-hero__rail[b-kh96hzjm86]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient( 180deg, transparent, rgba(201, 162, 39, .85) 28%, rgba(255, 246, 216, .95) 50%, rgba(201, 162, 39, .85) 72%, transparent); } /* Jalur teks. Tugasnya HANYA bergerak — warnanya rata, tanpa kliping gradasi ke bentuk huruf. Lihat catatan pada berkas cahaya di markup untuk alasannya. */ .cp-hero__rail-track[b-kh96hzjm86] { position: absolute; top: 0; left: 0; right: 0; display: flex; /* vertical-rl membuat sumbu inline menjadi tegak, sehingga anak-anak flex tersusun dari atas ke bawah dan hurufnya ikut berdiri. */ writing-mode: vertical-rl; justify-content: flex-start; align-items: center; gap: 2.25rem; font-size: 1.5rem; font-weight: 800; letter-spacing: .45em; text-transform: uppercase; white-space: nowrap; /* Emas pekat, bukan putih samar. Ini nama perusahaan — memang pantas terlihat, bukan sekadar tekstur latar. */ color: var(--gold); /* Pendar tipis di sekeliling huruf. Bukan untuk gaya: ia yang menjaga tepi huruf tetap tegas ketika bagian foto di baliknya kebetulan terang. */ text-shadow: 0 0 1.5rem rgba(201, 162, 39, .55), 0 .0625rem .125rem rgba(7, 22, 48, .9); animation: cp-rail-scroll-b-kh96hzjm86 30s linear infinite; } .cp-hero__rail-dot[b-kh96hzjm86] { font-size: .875rem; letter-spacing: 0; color: #fff6d8; text-shadow: 0 0 1rem rgba(255, 246, 216, .8); } /* Berkas cahaya yang turun menyusuri pita, dengan irama berbeda dari jalur teksnya. Dua gerak berperiode berbeda — 30 detik dan 7 detik — tidak pernah berulang pada pola yang sama, dan itulah yang membuatnya tidak terbaca sebagai animasi berputar. */ .cp-hero__rail-beam[b-kh96hzjm86] { position: absolute; left: 0; right: 0; top: 0; height: 12rem; background: linear-gradient( 180deg, transparent 0%, rgba(201, 162, 39, .32) 32%, rgba(255, 246, 216, .82) 50%, rgba(201, 162, 39, .32) 68%, transparent 100%); animation: cp-rail-beam-b-kh96hzjm86 7s ease-in-out infinite; } /* Jalur digeser tepat separuh panjangnya. Isinya ditulis dua rangkap di markup, jadi pada titik itu tampilannya identik dengan keadaan awal. */ @keyframes cp-rail-scroll-b-kh96hzjm86 { from { transform: translateY(0); } to { transform: translateY(-50%); } } /* Berkas cahaya dimulai dan berakhir di luar pita, sehingga tidak pernah terlihat "muncul" atau "hilang" di tengah jalan. */ @keyframes cp-rail-beam-b-kh96hzjm86 { 0% { transform: translateY(-14rem); opacity: 0; } 18% { opacity: 1; } 82% { opacity: 1; } 100% { transform: translateY(100vh); opacity: 0; } } /* ---------- Tombol di dalam hero ---------- Hero kini berlatar gelap, sedangkan seluruh halaman lainnya terang. Tombol memakai kelas yang sama, jadi versi terangnya ditimpa khusus di sini — bukan dengan membuat kelas tombol kedua yang harus diingat. */ .cp-hero .cp-btn--primary[b-kh96hzjm86] { color: #14100a; background: linear-gradient(140deg, #e0c069, var(--gold)); box-shadow: 0 .75rem 1.75rem rgba(7, 22, 48, .45); } .cp-hero .cp-btn--ghost[b-kh96hzjm86] { color: #fff; background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .38); } .cp-hero .cp-btn--ghost:hover[b-kh96hzjm86] { color: #fff; background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .65); box-shadow: none; } /* ---------- Tombol ---------- */ .cp-btn[b-kh96hzjm86] { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3.125rem; padding: .8125rem 1.875rem; font-size: .9375rem; font-weight: 600; letter-spacing: .01em; text-decoration: none; border-radius: 999px; border: 1px solid transparent; transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease; } .cp-btn:active[b-kh96hzjm86] { transform: translateY(1px); } .cp-btn--primary[b-kh96hzjm86] { color: #fff; background: linear-gradient(140deg, var(--brand) 0%, var(--brand-deep) 100%); box-shadow: 0 .75rem 1.75rem rgba(11, 31, 63, .24); } .cp-btn--primary:hover[b-kh96hzjm86] { box-shadow: 0 1rem 2.25rem rgba(11, 31, 63, .32); } .cp-btn--ghost[b-kh96hzjm86] { color: var(--ink); border-color: var(--line-strong); background: #fff; } .cp-btn--ghost:hover[b-kh96hzjm86] { border-color: var(--brand); color: var(--brand); box-shadow: var(--shadow-sm); } /* ---------- Permukaan bersama ---------- Pada latar terang, yang membuat kartu terbaca sebagai benda adalah bayangan lembut, bukan garis tepi tebal. Garis tepi tetap dipakai tipis agar kartu punya batas walaupun bayangannya tidak tampak — misalnya di layar dengan kecerahan rendah atau saat dicetak. */ .cp-reason[b-kh96hzjm86], .cp-service[b-kh96hzjm86], .cp-fleet-group[b-kh96hzjm86], .cp-card[b-kh96hzjm86], .cp-tile[b-kh96hzjm86], .cp-commit[b-kh96hzjm86] { position: relative; background: var(--bg-card); border: 1px solid var(--line); border-radius: 1rem; box-shadow: var(--shadow-sm); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } /* Di bagian bertint, kartu putih sudah menonjol dengan sendirinya. */ .cp-section--alt .cp-reason[b-kh96hzjm86], .cp-section--alt .cp-service[b-kh96hzjm86], .cp-section--alt .cp-fleet-group[b-kh96hzjm86], .cp-section--alt .cp-card[b-kh96hzjm86], .cp-section--alt .cp-tile[b-kh96hzjm86] { box-shadow: none; } .cp-reason:hover[b-kh96hzjm86], .cp-service:hover[b-kh96hzjm86], .cp-card:hover[b-kh96hzjm86], .cp-tile:hover[b-kh96hzjm86] { transform: translateY(-3px); border-color: rgba(18, 48, 94, .28); box-shadow: var(--shadow-lg); } /* ---------- Tentang ---------- */ .cp-about[b-kh96hzjm86] { display: grid; grid-template-columns: 1.15fr .85fr; gap: 4rem; align-items: start; } .cp-commit[b-kh96hzjm86] { margin-top: 2.25rem; padding: 1.5rem; /* Satu-satunya kartu yang diberi warna: ini pernyataan komitmen, dan pantas menonjol dari kartu keterangan biasa. */ background: linear-gradient(150deg, rgba(18, 48, 94, .06), rgba(201, 162, 39, .05)); border-color: rgba(18, 48, 94, .16); } .cp-commit strong[b-kh96hzjm86] { display: block; margin-top: .25rem; font-size: 1.0625rem; letter-spacing: -.01em; color: var(--brand-deep); } .cp-perspective[b-kh96hzjm86] { margin: 0; padding: 0; list-style: none; } .cp-perspective li[b-kh96hzjm86] { position: relative; padding: 1.375rem 0 1.375rem 1.25rem; border-top: 1px solid var(--line); } .cp-perspective li:first-child[b-kh96hzjm86] { border-top: 0; } .cp-perspective li[b-kh96hzjm86]::before { content: ""; position: absolute; inset-inline-start: 0; top: 1.85rem; width: .375rem; height: .375rem; background: var(--gold); border-radius: 50%; } .cp-perspective span[b-kh96hzjm86] { display: block; margin-bottom: .25rem; font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); } .cp-perspective strong[b-kh96hzjm86] { font-size: 1rem; font-weight: 500; color: var(--ink); } /* ---------- Alasan ---------- */ .cp-reasons[b-kh96hzjm86] { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin-top: 3rem; } .cp-reason[b-kh96hzjm86] { padding: 1.75rem 1.5rem; overflow: hidden; } /* Angka besar di belakang judul. Pada latar terang ia harus gelap beralpha rendah dan memudar ke bawah, supaya tidak bersaing dengan tulisannya. */ .cp-reason__no[b-kh96hzjm86] { position: absolute; top: -.5rem; inset-inline-end: .75rem; font-size: 4.75rem; font-weight: 800; line-height: 1; letter-spacing: -.04em; background: linear-gradient(180deg, rgba(18, 48, 94, .14), transparent 78%); -webkit-background-clip: text; background-clip: text; color: transparent; } .cp-reason h3[b-kh96hzjm86] { position: relative; margin: 0 0 .625rem; font-size: .9375rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-deep); } .cp-reason p[b-kh96hzjm86] { position: relative; margin: 0; font-size: .875rem; } /* ---------- Layanan ---------- */ .cp-services[b-kh96hzjm86] { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin-top: 3rem; } .cp-service[b-kh96hzjm86] { padding: 1.875rem 1.5rem; } .cp-service__icon[b-kh96hzjm86] { display: inline-flex; align-items: center; justify-content: center; width: 3.125rem; height: 3.125rem; margin-bottom: 1.125rem; font-size: 1.3125rem; color: #fff; background: linear-gradient(150deg, var(--brand), var(--brand-deep)); border-radius: .9375rem; box-shadow: 0 .375rem .875rem rgba(11, 31, 63, .22); } .cp-service h3[b-kh96hzjm86] { margin: 0 0 .5rem; font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink); } .cp-service p[b-kh96hzjm86] { margin: 0; font-size: .875rem; } .cp-service ul[b-kh96hzjm86] { margin: 1rem 0 0; padding: 0; list-style: none; font-size: .8125rem; } .cp-service ul li[b-kh96hzjm86] { position: relative; padding: .1875rem 0 .1875rem 1rem; color: var(--ink-dim); } .cp-service ul li[b-kh96hzjm86]::before { content: ""; position: absolute; inset-inline-start: 0; top: .875rem; width: .375rem; height: 2px; background: var(--gold); } /* ---------- Armada ---------- */ .cp-fleet[b-kh96hzjm86] { margin-top: 3.5rem; } .cp-fleet__head[b-kh96hzjm86] { display: flex; flex-direction: column; gap: .25rem; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line-strong); } .cp-fleet__head h3[b-kh96hzjm86] { margin: 0; font-size: 1.1875rem; font-weight: 700; letter-spacing: -.01em; color: var(--brand-deep); } .cp-fleet__head p[b-kh96hzjm86] { margin: 0; font-size: .875rem; } .cp-fleet-groups[b-kh96hzjm86] { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin-top: 3rem; } .cp-fleet-group[b-kh96hzjm86] { padding: 1.625rem 1.5rem; } .cp-fleet-group h3[b-kh96hzjm86] { margin: 0 0 .5rem; font-size: 1rem; font-weight: 700; color: var(--ink); } .cp-fleet-group p[b-kh96hzjm86] { margin: 0; font-size: .875rem; } .cp-empty[b-kh96hzjm86] { margin-top: 1.75rem; font-size: .9375rem; } .cp-empty a[b-kh96hzjm86] { color: var(--brand); font-weight: 600; } .cp-cards[b-kh96hzjm86] { display: grid; grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); gap: 1.25rem; } .cp-card[b-kh96hzjm86] { display: flex; flex-direction: column; overflow: hidden; } .cp-card__photo[b-kh96hzjm86] { position: relative; /* Rasio dikunci supaya kartu tetap sejajar walaupun foto yang diunggah admin berbeda-beda ukurannya. */ aspect-ratio: 16 / 10; background: linear-gradient(160deg, #eef2f8, #dde5f1); overflow: hidden; } .cp-card__photo img[b-kh96hzjm86] { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; } .cp-card:hover .cp-card__photo img[b-kh96hzjm86] { transform: scale(1.04); } .cp-card__placeholder[b-kh96hzjm86] { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 2.75rem; color: rgba(18, 48, 94, .16); } .cp-card__body[b-kh96hzjm86] { display: flex; flex-direction: column; flex: 1; padding: 1.25rem; } .cp-card__body h4[b-kh96hzjm86] { margin: 0; font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink); } .cp-card__tagline[b-kh96hzjm86] { margin: .3125rem 0 0; font-size: .8125rem; line-height: 1.5; } .cp-card__specs[b-kh96hzjm86] { display: flex; flex-wrap: wrap; gap: .375rem; margin: 1rem 0 0; padding: 0; list-style: none; } .cp-card__specs li[b-kh96hzjm86] { display: inline-flex; align-items: center; gap: .375rem; padding: .3125rem .5625rem; font-size: .75rem; color: var(--ink-soft); background: var(--bg-tint); border: 1px solid var(--line); border-radius: .4375rem; } .cp-card__specs i[b-kh96hzjm86] { font-size: .8125rem; color: var(--brand); } .cp-card__foot[b-kh96hzjm86] { display: flex; align-items: flex-end; justify-content: space-between; gap: .75rem; margin-top: auto; padding-top: 1.25rem; } .cp-card__price[b-kh96hzjm86] { display: flex; flex-direction: column; line-height: 1.35; } .cp-card__price small[b-kh96hzjm86] { font-size: .6875rem; color: var(--ink-dim); } .cp-card__price strong[b-kh96hzjm86] { font-size: 1.0625rem; letter-spacing: -.01em; color: var(--brand-deep); } .cp-card__ask[b-kh96hzjm86] { flex: 0 0 auto; padding: .5rem 1rem; font-size: .8125rem; font-weight: 600; color: var(--brand); text-decoration: none; border: 1px solid var(--line-strong); border-radius: 999px; transition: color .18s ease, border-color .18s ease, background-color .18s ease; } .cp-card__ask:hover[b-kh96hzjm86] { color: #fff; border-color: var(--brand); background: var(--brand); } /* ---------- Korporat ---------- */ .cp-grid4[b-kh96hzjm86] { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; margin-top: 2.25rem; } .cp-tile[b-kh96hzjm86] { padding: 1.5rem 1.375rem; } .cp-tile h3[b-kh96hzjm86] { margin: 0 0 .4375rem; font-size: 1rem; font-weight: 700; color: var(--brand-deep); } .cp-tile p[b-kh96hzjm86] { margin: 0; font-size: .8125rem; } .cp-custom[b-kh96hzjm86] { margin-top: 1.5rem; } .cp-axis[b-kh96hzjm86] { padding: 1.25rem 0 0; border-top: 2px solid var(--line-strong); } .cp-axis p[b-kh96hzjm86] { margin: 0; font-size: .875rem; color: var(--ink); } .cp-fineprint[b-kh96hzjm86] { margin-top: 1.75rem; font-size: .8125rem; font-style: italic; color: var(--ink-dim); } /* ---------- Langkah ---------- */ .cp-steps[b-kh96hzjm86] { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.5rem 1.25rem; margin: 3rem 0 0; padding: 0; list-style: none; } .cp-steps li[b-kh96hzjm86] { display: flex; gap: 1rem; padding-top: 1.375rem; /* Garis hijau yang memudar ke kanan: memberi arah baca tanpa panah. */ border-top: 2px solid transparent; border-image: linear-gradient(90deg, var(--brand), rgba(18, 48, 94, .08)) 1; } .cp-steps__no[b-kh96hzjm86] { font-size: 1.375rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: rgba(18, 48, 94, .32); } .cp-steps h3[b-kh96hzjm86] { margin: 0 0 .25rem; font-size: .9375rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); } .cp-steps p[b-kh96hzjm86] { margin: 0; font-size: .875rem; } /* ---------- Dua kolom ---------- */ .cp-two[b-kh96hzjm86] { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 4rem; align-items: start; } .cp-check[b-kh96hzjm86] { margin: 1.5rem 0 0; padding: 0; list-style: none; } .cp-check li[b-kh96hzjm86] { position: relative; padding: .4375rem 0 .4375rem 1.875rem; font-size: .9375rem; color: var(--ink-soft); } .cp-check li[b-kh96hzjm86]::before { content: "\2713"; position: absolute; inset-inline-start: 0; top: .4375rem; display: flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; font-size: .6875rem; font-weight: 700; color: #fff; background: var(--brand); border-radius: 50%; } .cp-quote[b-kh96hzjm86] { margin-top: 1.75rem; padding: .375rem 0 .375rem 1.125rem; border-inline-start: 3px solid var(--gold); font-size: 1rem; font-style: italic; color: var(--ink) !important; } .cp-values[b-kh96hzjm86] { margin-top: 2rem; } .cp-values div[b-kh96hzjm86] { padding: .875rem 0; border-top: 1px solid var(--line); } .cp-values strong[b-kh96hzjm86] { display: block; margin-bottom: .125rem; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); } .cp-values span[b-kh96hzjm86] { font-size: .875rem; color: var(--ink-soft); } /* ---------- Visi & misi ---------- */ .cp-vision[b-kh96hzjm86] { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 4rem; align-items: start; } .cp-mission[b-kh96hzjm86] { margin: 0; padding: 0; list-style: none; counter-reset: misi; } .cp-mission li[b-kh96hzjm86] { position: relative; padding: .875rem 0 .875rem 2.75rem; font-size: .9375rem; color: var(--ink-soft); border-top: 1px solid var(--line); counter-increment: misi; } .cp-mission li:first-child[b-kh96hzjm86] { border-top: 0; } /* Nomor ditulis sendiri sebagai counter dua digit, supaya sejajar dan sepadan dengan penomoran 01..05 di bagian lain halaman. */ .cp-mission li[b-kh96hzjm86]::before { content: "0" counter(misi); position: absolute; inset-inline-start: 0; top: .9375rem; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; color: var(--gold-ink); } /* ---------- Kontak: satu-satunya pita gelap ---------- Setelah sembilan bagian terang, pita hijau tua di sini bekerja sebagai penutup. Ia menandai bahwa halaman sudah sampai pada ajakan bertindak, dan perubahan mendadak itulah yang menahan mata sebelum pengunjung pergi. */ .cp-cta[b-kh96hzjm86] { text-align: center; color: #fff; background: radial-gradient(42rem 24rem at 50% 0%, rgba(201, 162, 39, .18), transparent 62%), linear-gradient(160deg, var(--brand) 0%, var(--brand-deep) 62%, var(--brand-darkest) 100%); } .cp-cta[b-kh96hzjm86]::before { background: linear-gradient(90deg, transparent, var(--gold), transparent); } .cp-cta .cp-kicker[b-kh96hzjm86] { justify-content: center; color: var(--gold); } .cp-cta .cp-h2[b-kh96hzjm86] { color: #fff; } .cp-cta p[b-kh96hzjm86] { color: rgba(255, 255, 255, .78); } .cp-cta .cp-lead[b-kh96hzjm86] { margin-inline: auto; } /* Di atas latar hijau, tombol utama dibalik menjadi emas agar tetap menonjol. */ .cp-cta .cp-btn--primary[b-kh96hzjm86] { color: #14100a; background: linear-gradient(140deg, #e0c069, var(--gold)); box-shadow: 0 .75rem 1.75rem rgba(0, 0, 0, .28); } .cp-cta .cp-btn--ghost[b-kh96hzjm86] { color: #fff; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .35); } .cp-cta .cp-btn--ghost:hover[b-kh96hzjm86] { color: #fff; background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .6); } .cp-contact[b-kh96hzjm86] { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.25rem; margin: 3.5rem 0 0; text-align: start; } .cp-contact > div[b-kh96hzjm86] { padding: 1.25rem; border: 1px solid rgba(255, 255, 255, .16); border-radius: .875rem; background: rgba(255, 255, 255, .06); } .cp-contact dt[b-kh96hzjm86] { display: flex; align-items: center; gap: .5rem; margin-bottom: .375rem; font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); } .cp-contact dd[b-kh96hzjm86] { margin: 0; font-size: .9375rem; color: #fff; word-break: break-word; } /* ---------- Footer ---------- */ .cp-footer[b-kh96hzjm86] { padding: 3.5rem 0; text-align: center; background: var(--brand-darkest); } .cp-footer__name[b-kh96hzjm86] { margin: 0; font-size: 1.1875rem; font-weight: 700; letter-spacing: .02em; color: #fff !important; } .cp-footer__tag[b-kh96hzjm86] { margin: .5rem 0 1.75rem; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold) !important; } .cp-footer__links[b-kh96hzjm86] { margin: 0 0 1.5rem; } /* Bergaris bawah, bukan berbentuk tombol. Ini pintu bagi karyawan, dan tidak pantas bersaing perhatian dengan ajakan menghubungi di atasnya. */ .cp-footer__login[b-kh96hzjm86] { font-size: .875rem; font-weight: 600; color: #fff; text-decoration: underline; text-underline-offset: .25rem; text-decoration-thickness: 1px; transition: color .18s ease; } .cp-footer__login:hover[b-kh96hzjm86] { color: var(--gold); text-decoration-color: var(--gold); } .cp-footer__copy[b-kh96hzjm86] { margin: 0; font-size: .75rem; color: rgba(255, 255, 255, .5) !important; } /* ---------- Layar sempit ---------- */ @media (max-width: 991.98px) { .cp-section[b-kh96hzjm86] { padding: 4rem 0; } .cp-about[b-kh96hzjm86] { grid-template-columns: 1fr; gap: 2.5rem; } /* Menu tautan disembunyikan, bukan dijadikan drawer. Halaman ini hanya satu halaman: menggulir sudah melewati seluruh isinya, dan menu yang perlu dibuka justru menambah satu ketukan tanpa menghemat apa pun. */ .cp-nav__links[b-kh96hzjm86] { display: none; } .cp-nav[b-kh96hzjm86] { justify-content: space-between; } /* Lockup dikecilkan di layar sempit, tetapi tetap dua baris — yang dikurangi ukurannya, bukan susunannya. */ .cp-nav__brand-mark[b-kh96hzjm86] { width: 2.875rem; height: 2.875rem; padding: .3125rem; } .cp-nav__brand-name[b-kh96hzjm86] { font-size: 1.0625rem; letter-spacing: .05em; } .cp-nav__brand-tag[b-kh96hzjm86] { font-size: .625rem; letter-spacing: .14em; } /* Pita nama disembunyikan di layar sempit. Di sana lebarnya berebut dengan tulisan hero, dan hiasan tidak boleh mengalahkan isi. */ .cp-hero__rail[b-kh96hzjm86] { display: none; } .cp-hero__body[b-kh96hzjm86] { padding: 3rem 1.25rem 5rem; } .cp-two[b-kh96hzjm86], .cp-vision[b-kh96hzjm86] { gap: 2.5rem; } } /* Di layar sangat sempit, keterangan bidang usaha dilepas. Pada lebar 360px, mempertahankannya memaksa nama perusahaan sendiri membungkus ke dua baris — dan nama yang patah lebih buruk daripada keterangan yang hilang. */ @media (max-width: 420px) { .cp-nav__brand-tag[b-kh96hzjm86] { display: none; } .cp-nav__brand-mark[b-kh96hzjm86] { width: 2.5rem; height: 2.5rem; } .cp-nav__brand-name[b-kh96hzjm86] { font-size: .9375rem; } } /* ---------- Menghormati permintaan tanpa gerak ---------- Sebagian orang mengalami pusing atau mual karena gerakan di layar, dan menyatakannya lewat pengaturan sistem. Efek di halaman ini tidak membawa informasi apa pun, jadi tidak ada yang hilang bila dihentikan. animation: none WAJIB disertai penegasan opacity dan transform. Animasi masuk memakai fill-mode both, artinya keadaan awalnya — tak terlihat dan tergeser ke bawah — melekat pada elemen. Mematikan animasinya saja tanpa mengembalikan keduanya akan membuat judul hero tidak pernah muncul. */ @media (prefers-reduced-motion: reduce) { .cp-hero__line > span[b-kh96hzjm86], .cp-hero__eyebrow[b-kh96hzjm86], .cp-hero__lead[b-kh96hzjm86], .cp-hero__actions[b-kh96hzjm86], .cp-hero__note[b-kh96hzjm86], .cp-hero__title-accent[b-kh96hzjm86], .cp-hero__rail-track[b-kh96hzjm86], .cp-hero__rail-beam[b-kh96hzjm86] { animation: none; opacity: 1; transform: none; } /* Pita nama berjalan tanpa henti — justru jenis gerak yang paling mengganggu bagi yang peka. Dihentikan sepenuhnya, dan karena isinya ditulis dua rangkap untuk keperluan animasi, sisanya disembunyikan supaya tidak tampak sebagai pengulangan yang janggal. */ .cp-hero__rail[b-kh96hzjm86] { display: none; } /* Tanpa sapuan, gradasinya dikunci pada posisi diam supaya tulisannya terbaca sebagai emas rata, bukan terpotong di tengah pita terang. */ .cp-hero__title-accent[b-kh96hzjm86] { background-position: 128% 0; } .cp-reason[b-kh96hzjm86], .cp-service[b-kh96hzjm86], .cp-card[b-kh96hzjm86], .cp-tile[b-kh96hzjm86], .cp-card__photo img[b-kh96hzjm86], .cp-nav__links a[b-kh96hzjm86]::after, .cp-btn[b-kh96hzjm86] { transition: none; } .cp-reason:hover[b-kh96hzjm86], .cp-service:hover[b-kh96hzjm86], .cp-card:hover[b-kh96hzjm86], .cp-tile:hover[b-kh96hzjm86], .cp-card:hover .cp-card__photo img[b-kh96hzjm86] { transform: none; } } /* _content/AMS_RentGuard.Web/Components/Public/PrivacyPolicy.razor.rz.scp.css */ /* Kebijakan privasi. Satu kolom sempit, huruf besar, jarak baris lega. Dokumen ini memang untuk DIBACA - berbeda dari halaman lain di aplikasi yang untuk dikerjakan - dan baris yang terlalu panjang membuat mata kehilangan barisnya sendiri saat berpindah ke kiri. */ .pp[b-ots7j7a707] { min-height: 100vh; padding: 2rem 1rem 4rem; background: #f4f6fa; } .pp__paper[b-ots7j7a707] { max-width: 44rem; margin: 0 auto; padding: 2rem 1.5rem 2.5rem; border-radius: 1rem; background: #fff; box-shadow: 0 .5rem 1.5rem rgba(16, 26, 51, .08); color: #33405e; font-size: .95rem; line-height: 1.7; } @media (min-width: 48rem) { .pp__paper[b-ots7j7a707] { padding: 3rem 3.5rem 3.5rem; } } .pp__head[b-ots7j7a707] { margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid #e4e9f2; } .pp__head h1[b-ots7j7a707] { margin: 0; font-size: 1.6rem; font-weight: 700; color: #101a33; } .pp__who[b-ots7j7a707] { margin: .35rem 0 0; font-weight: 600; color: #1c3d78; } .pp__when[b-ots7j7a707] { margin: .15rem 0 0; font-size: .82rem; color: #6b7280; } .pp__paper section[b-ots7j7a707] { margin-top: 1.75rem; } .pp__paper h2[b-ots7j7a707] { margin: 0 0 .5rem; font-size: 1.1rem; font-weight: 700; color: #101a33; } .pp__paper h3[b-ots7j7a707] { margin: 1rem 0 .35rem; font-size: .95rem; font-weight: 700; color: #1c3d78; } .pp__paper p[b-ots7j7a707] { margin: 0 0 .75rem; } .pp__paper ul[b-ots7j7a707] { margin: 0 0 .75rem; padding-left: 1.2rem; } .pp__paper li[b-ots7j7a707] { margin-bottom: .35rem; } .pp__paper a[b-ots7j7a707] { color: #1c3d78; } /* _content/AMS_RentGuard.Web/Components/Tenant/SubscriptionPage.razor.rz.scp.css */ /* Halaman langganan milik rental. Dilihat pemilik rental, bukan operator: bahasanya bahasa pelanggan, dan yang paling menonjol adalah keadaan langganannya - bukan daftar tagihan. */ .sub[b-fb8sj62rqj] { max-width: 46rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #16233c; } .sub__head h1[b-fb8sj62rqj] { margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; } .sub__head p[b-fb8sj62rqj] { margin: .2rem 0 1.2rem; color: #5b6478; font-size: .9rem; } .sub__h2[b-fb8sj62rqj] { margin: 1.6rem 0 .7rem; font-size: 1.05rem; font-weight: 700; } .sub__note[b-fb8sj62rqj] { margin: 0 0 1rem; padding: .75rem .9rem; border-radius: .7rem; border: 1px solid; font-size: .88rem; line-height: 1.55; } .sub__note--ok[b-fb8sj62rqj] { background: #eef6f1; border-color: #cfe6d9; color: #14532d; } .sub__note--warn[b-fb8sj62rqj] { background: #fdf2dc; border-color: #f0d79a; color: #6b3703; } .sub__note--info[b-fb8sj62rqj] { background: #eef3fd; border-color: #cbdaf6; color: #16336b; } .sub__card[b-fb8sj62rqj] { background: #fff; border: 1px solid #dde3ee; border-radius: .9rem; padding: 1rem 1.1rem; margin-bottom: 1rem; } .sub__card h2[b-fb8sj62rqj] { margin: 0 0 .6rem; font-size: .95rem; font-weight: 700; } .sub__row[b-fb8sj62rqj] { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); } .sub__label[b-fb8sj62rqj] { display: block; font-size: .76rem; color: #5b6478; font-weight: 600; } .sub__value[b-fb8sj62rqj] { font-size: 1.05rem; font-weight: 700; } .sub__state[b-fb8sj62rqj] { margin: .9rem 0 0; padding: .7rem .85rem; border-radius: .6rem; font-size: .86rem; line-height: 1.6; border: 1px solid; } .sub__state--warn[b-fb8sj62rqj] { background: #fdf2dc; border-color: #f0d79a; color: #6b3703; } .sub__state--info[b-fb8sj62rqj] { background: #eef3fd; border-color: #cbdaf6; color: #16336b; } /* Keterangan cara bayar ditulis penyedia dengan baris-barisnya sendiri: nomor rekening, nama pemilik, catatan. 
 menjaga barisnya apa adanya
   supaya nomor rekening tidak menyambung dengan namanya. */
.sub__pay[b-fb8sj62rqj] {
    margin: 0;
    padding: .8rem .9rem;
    background: #f7f9fd;
    border: 1px dashed #cdd5e2;
    border-radius: .6rem;
    font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
    font-size: .84rem;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
}

.sub__empty[b-fb8sj62rqj] {
    padding: 1.5rem 1rem;
    text-align: center;
    font-size: .86rem;
    color: #5b6478;
    background: #f7f9fd;
    border: 1px dashed #cdd5e2;
    border-radius: .8rem;
}

.sub__inv[b-fb8sj62rqj] {
    background: #fff;
    border: 1px solid #dde3ee;
    border-left-width: 4px;
    border-left-color: #b45309;
    border-radius: .8rem;
    padding: .9rem 1rem;
    margin-bottom: .8rem;
}

.sub__inv--paid[b-fb8sj62rqj] { border-left-color: #0f7a4a; }

.sub__inv-top[b-fb8sj62rqj] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

.sub__inv-top strong[b-fb8sj62rqj] { font-size: 1.1rem; }

.sub__code[b-fb8sj62rqj] {
    display: block;
    font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
    font-size: .76rem;
    color: #5b6478;
}

.sub__pill[b-fb8sj62rqj] {
    font-size: .74rem;
    font-weight: 700;
    padding: .15rem .55rem;
    border-radius: 1rem;
    white-space: nowrap;
}

.sub__pill--ok[b-fb8sj62rqj] { background: #ccf0dd; color: #0b4b2e; }
.sub__pill--info[b-fb8sj62rqj] { background: #dbe7fb; color: #16336b; }
.sub__pill--warn[b-fb8sj62rqj] { background: #fbe6bd; color: #6b3703; }

.sub__inv-facts[b-fb8sj62rqj] {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem .9rem;
    margin-top: .35rem;
    font-size: .82rem;
    color: #5b6478;
}

.sub__form[b-fb8sj62rqj] {
    margin-top: .8rem;
    padding-top: .7rem;
    border-top: 1px dashed #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.sub__field[b-fb8sj62rqj] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    font-size: .8rem;
    font-weight: 600;
    color: #33405e;
}

.sub__input[b-fb8sj62rqj] {
    min-height: 2.7rem;
    padding: .4rem .7rem;
    border: 1px solid #cdd5e2;
    border-radius: .6rem;
    font-size: .9rem;
    font-family: inherit;
    background: #fff;
}

.sub__form small[b-fb8sj62rqj] {
    font-size: .78rem;
    font-weight: 400;
    color: #6b7280;
    line-height: 1.55;
}

.sub__btn[b-fb8sj62rqj] {
    min-height: 2.8rem;
    padding: 0 1.3rem;
    border: 1px solid #2f66c4;
    border-radius: 999px;
    background: #1f52a8;
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    align-self: flex-start;
}

.sub__btn:hover[b-fb8sj62rqj] { background: #2a62c0; }

.sub__done[b-fb8sj62rqj] {
    margin: .7rem 0 0;
    font-size: .84rem;
    color: #0b4b2e;
}