/* ========================================================== INCEPTION V44 TYPOGRAPHY + STEP 3 SPACING + CHECKBOX ========================================================== */ /* ========================================================== 1. TYPOGRAPHY UMUM FORM KANAN STEP 1 / STEP 2 / STEP 3 ========================================================== */ /* Judul utama tetap proporsional */ #inception-register-v50-host .v50-card h2 { font-size: 42px !important; line-height: 1.08 !important; } /* Judul section / proof */ #inception-register-v50-host .v50-card h3 { font-size: 18px !important; line-height: 1.3 !important; } /* Label semua field */ #inception-register-v50-host .v50-card label { font-size: 13.5px !important; line-height: 1.4 !important; } /* Isi input */ #inception-register-v50-host .v50-card input:not([type="file"]):not([type="checkbox"]), #inception-register-v50-host .v50-card select, #inception-register-v50-host .v50-card textarea { font-size: 15px !important; line-height: 1.4 !important; } /* Paragraph / deskripsi */ #inception-register-v50-host .v50-card p { font-size: 13px !important; line-height: 1.55 !important; } /* Helper */ #inception-register-v50-host .v50-card small { font-size: 12px !important; line-height: 1.45 !important; } /* Tombol */ #inception-register-v50-host .v50-card button { font-size: 13.5px !important; line-height: 1.25 !important; } /* Text bold di upload */ #inception-register-v50-host .v50-card .v50-upload strong, #inception-register-v50-host .v50-proof-grid label:has(input[type="file"][accept*="pdf"]) strong { font-size: 14px !important; line-height: 1.35 !important; } /* Angka / heading proof */ #inception-register-v50-host .v50-proof > b { font-size: 12.5px !important; } /* ========================================================== 2. TAB STEP 01 / 02 / 03 ========================================================== */ /* Button/tab yang ada di card ikut skala button di atas. Selector berikut menjaga tulisan step tidak terlalu kecil. */ #inception-register-v50-host .v50-card :is( [class*="step"] button, [class*="step"] a, [class*="step"] span, [class*="step"] strong ) { font-size: 13px !important; } /* ========================================================== 3. STEP 3 - AREA UPLOAD ========================================================== */ #inception-register-v50-host .v50-card:has(.v50-proof-grid) .v50-upload strong, #inception-register-v50-host .v50-card:has(.v50-proof-grid) label:has(input[type="file"][accept*="pdf"]) strong { font-size: 14px !important; } #inception-register-v50-host .v50-card:has(.v50-proof-grid) .v50-upload small, #inception-register-v50-host .v50-card:has(.v50-proof-grid) label:has(input[type="file"][accept*="pdf"]) small { font-size: 12px !important; } /* ========================================================== 4. JARAK TEKS DI BAWAH KARTU PELAJAR ========================================================== */ /* Target elemen yang langsung muncul setelah label upload PDF. Ini membuat teks: "Satu file berisi kartu pelajar seluruh 3 peserta." tidak menempel ke kotak. */ #inception-register-v50-host .v50-proof-grid label:has(input[type="file"][accept*="pdf"]) + p, #inception-register-v50-host .v50-proof-grid label:has(input[type="file"][accept*="pdf"]) + small, #inception-register-v50-host .v50-proof-grid label:has(input[type="file"][accept*="pdf"]) + div { margin-top: 10px !important; } /* Bila helper dibungkus container lain */ #inception-register-v50-host .v50-card:has(.v50-proof-grid) .v50-proof-grid > * > p:last-child { margin-top: 10px !important; } /* ========================================================== 5. CONFIRMATION BOX ========================================================== */ #inception-register-v50-host .v50-card:has(.v50-proof-grid) .v50-confirm, #inception-register-v50-host .v50-card:has(.v50-proof-grid) .v15-confirm, #inception-register-v50-host .v50-card:has(.v50-proof-grid) label:has(input[type="checkbox"]) { display: flex !important; align-items: flex-start !important; gap: 12px !important; min-height: 58px !important; padding: 13px 14px !important; box-sizing: border-box !important; font-size: 13px !important; line-height: 1.5 !important; cursor: pointer !important; } /* ========================================================== 6. CHECKBOX - FORCE VISIBLE ========================================================== */ #inception-register-v50-host .v50-card:has(.v50-proof-grid) input[type="checkbox"] { -webkit-appearance: none !important; appearance: none !important; display: inline-grid !important; place-content: center !important; position: static !important; clip: auto !important; clip-path: none !important; overflow: visible !important; width: 22px !important; height: 22px !important; min-width: 22px !important; min-height: 22px !important; max-width: 22px !important; max-height: 22px !important; flex: 0 0 22px !important; margin: 0 !important; padding: 0 !important; border: 2px solid #637be0 !important; border-radius: 6px !important; background: #ffffff !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; cursor: pointer !important; box-shadow: none !important; } /* Checked */ #inception-register-v50-host .v50-card:has(.v50-proof-grid) input[type="checkbox"]:checked { background: #5871d8 !important; border-color: #5871d8 !important; } /* Centang putih */ #inception-register-v50-host .v50-card:has(.v50-proof-grid) input[type="checkbox"]::before { content: "" !important; display: block !important; width: 10px !important; height: 6px !important; border-left: 2.5px solid #ffffff !important; border-bottom: 2.5px solid #ffffff !important; transform: translateY(-1px) rotate(-45deg) scale(0) !important; transform-origin: center !important; } #inception-register-v50-host .v50-card:has(.v50-proof-grid) input[type="checkbox"]:checked::before { transform: translateY(-1px) rotate(-45deg) scale(1) !important; } /* Hilangkan pseudo lain */ #inception-register-v50-host .v50-card:has(.v50-proof-grid) input[type="checkbox"]::after { content: none !important; display: none !important; } /* Focus keyboard */ #inception-register-v50-host .v50-card:has(.v50-proof-grid) input[type="checkbox"]:focus-visible { outline: none !important; box-shadow: 0 0 0 4px rgba(88, 113, 216, .16) !important; } /* ========================================================== 7. MOBILE ========================================================== */ @media (max-width: 760px) { #inception-register-v50-host .v50-card h2 { font-size: 34px !important; } #inception-register-v50-host .v50-card label { font-size: 13px !important; } #inception-register-v50-host .v50-card input:not([type="file"]):not([type="checkbox"]), #inception-register-v50-host .v50-card select, #inception-register-v50-host .v50-card textarea { font-size: 15px !important; } #inception-register-v50-host .v50-card p { font-size: 12.5px !important; } #inception-register-v50-host .v50-card button { font-size: 13px !important; } } /* ========================================================== END V44 ========================================================== */