/* =================================================================== INCEPTION_V65B_CLEAN_DATA_STYLE Referensi visual: DATA PESERTA TIM Prinsip: - 1 white card utama - section internal - divider - sedikit nested card - padding konsisten - hierarchy jelas =================================================================== */ /* =================================================================== MAIN CARD GEOMETRY V65 sebelumnya: pseudo-card terlalu masuk 28px sehingga isi terlihat menempel ke sisi card. Sekarang: card melebar, sementara isi tetap punya padding. =================================================================== */ @media (min-width: 901px) { .participant-content:has(.participant-stats-v41):has(.participant-home-timeline)::before, .participant-content:has(.submission-initial-v61):has(.participant-selection-banner)::before { top: 22px !important; right: 0 !important; bottom: 22px !important; left: 0 !important; background: #ffffff !important; border: 1px solid #dfe5ef !important; border-radius: 22px !important; box-shadow: 0 10px 30px rgba( 32, 48, 80, .045 ) !important; } } /* =================================================================== 01. BERANDA =================================================================== */ /* * Tetap hapus teks buatan sistem. */ .participant-content:has(.participant-home-timeline) .participant-stats-v41-head > small { display: none !important; } /* ------------------------------------------------------------------- Statistik ------------------------------------------------------------------- */ @media (min-width: 901px) { .participant-content:has(.participant-home-timeline) .participant-stats-v41 { padding: 28px 30px 26px !important; border-bottom: 1px solid #e6eaf1 !important; } .participant-content:has(.participant-home-timeline) .participant-stats-v41-head { margin-bottom: 18px !important; } .participant-content:has(.participant-home-timeline) .participant-stats-v41-head strong { font-size: 18px !important; line-height: 1.25 !important; color: #1f2a44 !important; } .participant-content:has(.participant-home-timeline) .participant-stats-v41-grid { grid-template-columns: repeat( 3, minmax(0, 1fr) ) !important; gap: 16px !important; } .participant-content:has(.participant-home-timeline) .participant-stat-v41 { min-height: 104px !important; padding: 16px 18px !important; border: 1px solid #dfe5ef !important; border-radius: 14px !important; background: #fafbfe !important; box-shadow: none !important; } .participant-content:has(.participant-home-timeline) .participant-stat-v41 > strong { font-size: 32px !important; line-height: 1 !important; } .participant-content:has(.participant-home-timeline) .participant-stat-v41 > p { margin-top: 7px !important; color: #263249 !important; font-size: 13px !important; font-weight: 400 !important; } } /* ------------------------------------------------------------------- Perjalanan Kompetisi ------------------------------------------------------------------- */ @media (min-width: 901px) { .participant-content:has(.participant-stats-v41) .participant-home-timeline { padding: 62px 30px 30px !important; gap: 16px !important; } .participant-content:has(.participant-stats-v41) .participant-home-timeline::before { top: 27px !important; left: 30px !important; color: #536cc5 !important; font-size: 10px !important; font-weight: 750 !important; letter-spacing: .14em !important; } /* * Hilangkan kesan empat kartu raksasa. */ .participant-content:has(.participant-stats-v41) .participant-home-timeline .journey-stage { height: 330px !important; min-height: 330px !important; padding: 17px 18px 19px !important; border: 1px solid #e0e5ed !important; border-radius: 15px !important; box-shadow: none !important; } /* * Area visual lebih compact. */ .participant-content:has(.participant-stats-v41) .participant-home-timeline .journey-visual { width: 128px !important; height: 128px !important; margin: 13px auto 10px !important; } .participant-content:has(.participant-stats-v41) .participant-home-timeline .journey-symbol { width: 72px !important; height: 72px !important; } .participant-content:has(.participant-stats-v41) .participant-home-timeline .journey-stage-copy { margin-top: auto !important; } .participant-content:has(.participant-stats-v41) .participant-home-timeline .journey-stage-copy h3 { margin: 5px 0 6px !important; color: #28344c !important; font-size: 19px !important; font-weight: 700 !important; line-height: 1.18 !important; } .participant-content:has(.participant-stats-v41) .participant-home-timeline .journey-stage-copy p { color: #66738a !important; font-size: 11.5px !important; font-weight: 400 !important; line-height: 1.45 !important; } } /* =================================================================== 02. PENGUMPULAN PENYISIHAN =================================================================== */ /* * Header dibuat seperti Profil Tim. */ @media (min-width: 901px) { .participant-content:has(.submission-initial-v61) .submission-section-head { min-height: 135px !important; padding: 28px 30px 26px !important; border-bottom: 1px solid #e6eaf1 !important; background: transparent !important; } .participant-content:has(.submission-initial-v61) .submission-section-head h2 { margin: 5px 0 6px !important; color: #202c46 !important; font-size: 26px !important; line-height: 1.15 !important; } .participant-content:has(.submission-initial-v61) .submission-section-head p { margin: 0 !important; color: #111827 !important; font-size: 13px !important; line-height: 1.45 !important; } } /* =================================================================== FORM Proposal + GitHub bukan mini-card. Mereka menjadi dua SECTION dalam card besar. =================================================================== */ @media (min-width: 901px) { .participant-content:has(.submission-initial-v61) .submission-form-v61 { display: grid !important; grid-template-columns: repeat( 2, minmax(0, 1fr) ) !important; column-gap: 0 !important; row-gap: 0 !important; padding: 0 30px !important; } /* * RESET mini card lama. */ .participant-content:has(.submission-initial-v61) .submission-requirement { position: relative !important; display: grid !important; min-height: 190px !important; margin: 0 !important; padding: 26px 24px !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* * Jangan pakai gradient line mini-card lagi. */ .participant-content:has(.submission-initial-v61) .submission-requirement::before { display: none !important; } /* * Proposal = kiri. */ .participant-content:has(.submission-initial-v61) .submission-requirement:has(> .participant-upload-button) { grid-template-columns: minmax(0, 1fr) auto !important; grid-template-rows: auto auto !important; column-gap: 14px !important; row-gap: 20px !important; padding-left: 0 !important; padding-right: 28px !important; border-right: 1px solid #e6eaf1 !important; border-bottom: 1px solid #e6eaf1 !important; } /* * GitHub = kanan. */ .participant-content:has(.submission-initial-v61) .submission-requirement:has(> input[type="url"]) { grid-template-columns: 1fr !important; grid-template-rows: auto auto !important; row-gap: 20px !important; padding-left: 28px !important; padding-right: 0 !important; border-bottom: 1px solid #e6eaf1 !important; } } /* =================================================================== REQUIREMENT HEADERS =================================================================== */ @media (min-width: 901px) { .participant-content:has(.submission-initial-v61) .submission-requirement > div:first-child { grid-row: 1 !important; display: flex !important; align-items: flex-start !important; gap: 13px !important; } /* * Proposal title full row. */ .participant-content:has(.submission-initial-v61) .submission-requirement:has(> .participant-upload-button) > div:first-child { grid-column: 1 / -1 !important; } .participant-content:has(.submission-initial-v61) .submission-requirement > div:first-child > span { display: grid !important; flex: 0 0 40px !important; place-items: center !important; width: 40px !important; height: 40px !important; color: #ffffff !important; background: #5a72cb !important; border-radius: 10px !important; font-size: 11px !important; font-weight: 750 !important; box-shadow: 0 7px 16px rgba( 73, 96, 180, .13 ) !important; } .participant-content:has(.submission-initial-v61) .submission-requirement > div:first-child strong { display: block !important; color: #18233b !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.3 !important; } .participant-content:has(.submission-initial-v61) .submission-requirement > div:first-child p { margin: 5px 0 0 !important; color: #111827 !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.45 !important; } } /* =================================================================== PROPOSAL DOCUMENT ROW =================================================================== */ @media (min-width: 901px) { /* * File information. */ .participant-content:has(.submission-initial-v61) .submission-requirement:has(> .participant-upload-button) > :nth-child(2) { grid-column: 1 !important; grid-row: 2 !important; align-self: stretch !important; width: 100% !important; min-width: 0 !important; min-height: 50px !important; margin: 0 !important; } /* * Upload / replace. */ .participant-content:has(.submission-initial-v61) .submission-requirement > .participant-upload-button { grid-column: 2 !important; grid-row: 2 !important; align-self: stretch !important; min-width: 132px !important; min-height: 50px !important; margin: 0 !important; padding: 0 18px !important; border-radius: 11px !important; color: #ffffff !important; font-size: 12px !important; font-weight: 700 !important; } } /* =================================================================== GITHUB INPUT =================================================================== */ @media (min-width: 901px) { .participant-content:has(.submission-initial-v61) .submission-requirement > input[type="url"] { grid-column: 1 !important; grid-row: 2 !important; width: 100% !important; height: 50px !important; margin: 0 !important; padding: 0 15px !important; color: #111827 !important; background: #f9fbfe !important; border: 1px solid #dce3ee !important; border-radius: 10px !important; font-family: inherit !important; font-size: 13px !important; font-weight: 500 !important; box-shadow: none !important; } .participant-content:has(.submission-initial-v61) .submission-requirement > input[type="url"]:focus { background: #ffffff !important; border-color: #7188d4 !important; box-shadow: 0 0 0 3px rgba( 86, 111, 197, .09 ) !important; outline: none !important; } } /* =================================================================== SEBELUM MENGIRIM Dibuat seperti row Kartu Pelajar: label kiri, isi kanan. =================================================================== */ @media (min-width: 901px) { .participant-content:has(.submission-initial-v61) .submission-guide-note { grid-column: 1 / -1 !important; display: grid !important; grid-template-columns: 150px minmax(0, 1fr) !important; align-items: center !important; gap: 22px !important; min-height: 74px !important; margin: 0 !important; padding: 18px 0 !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid #e6eaf1 !important; border-radius: 0 !important; box-shadow: none !important; } .participant-content:has(.submission-initial-v61) .submission-guide-note > b { color: #536cc5 !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .04em !important; } .participant-content:has(.submission-initial-v61) .submission-guide-note > span { color: #111827 !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.5 !important; } } /* =================================================================== SUBMIT FOOTER =================================================================== */ @media (min-width: 901px) { .participant-content:has(.submission-initial-v61) .participant-save { grid-column: 1 / -1 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; min-height: 86px !important; margin: 0 !important; padding: 18px 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* * Judul duplicate tetap tidak ditampilkan. */ .participant-content:has(.submission-initial-v61) .participant-save > div > strong { display: none !important; } .participant-content:has(.submission-initial-v61) .participant-save > div > span { display: block !important; color: #111827 !important; font-size: 12px !important; font-weight: 400 !important; } .participant-content:has(.submission-initial-v61) .participant-save button { min-height: 46px !important; padding: 0 21px !important; border-radius: 11px !important; color: #ffffff !important; font-size: 12px !important; font-weight: 700 !important; } } /* =================================================================== HASIL SELEKSI Jangan terlihat seperti card ditempel di bawah. Dia adalah SECTION TERAKHIR dari card utama. =================================================================== */ @media (min-width: 901px) { .participant-content:has(.submission-initial-v61) .participant-selection-banner { margin: 0 30px 26px !important; min-height: 112px !important; padding: 21px 22px !important; background: #fffaf0 !important; border: 1px solid #eadcad !important; border-radius: 13px !important; box-shadow: none !important; } .participant-content:has(.submission-initial-v61) .participant-selection-banner h2, .participant-content:has(.submission-initial-v61) .participant-selection-banner h3 { color: #202c46 !important; } .participant-content:has(.submission-initial-v61) .participant-selection-banner p { color: #111827 !important; font-size: 12px !important; font-weight: 400 !important; } } /* =================================================================== MOBILE =================================================================== */ @media (max-width: 900px) { .participant-content:has(.participant-stats-v41):has(.participant-home-timeline)::before, .participant-content:has(.submission-initial-v61):has(.participant-selection-banner)::before { top: 14px !important; right: 0 !important; bottom: 14px !important; left: 0 !important; } .participant-content:has(.submission-initial-v61) .submission-form-v61 { display: block !important; padding: 0 20px !important; } .participant-content:has(.submission-initial-v61) .submission-requirement { display: grid !important; grid-template-columns: 1fr !important; min-height: 0 !important; padding: 20px 0 !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid #e6eaf1 !important; border-radius: 0 !important; box-shadow: none !important; } .participant-content:has(.submission-initial-v61) .submission-requirement > * { grid-column: 1 !important; grid-row: auto !important; } .participant-content:has(.submission-initial-v61) .submission-requirement > .participant-upload-button { width: 100% !important; min-height: 46px !important; } .participant-content:has(.submission-initial-v61) .submission-requirement > input[type="url"] { width: 100% !important; height: 46px !important; } .participant-content:has(.submission-initial-v61) .submission-guide-note { display: block !important; min-height: 0 !important; padding: 17px 0 !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid #e6eaf1 !important; border-radius: 0 !important; } .participant-content:has(.submission-initial-v61) .submission-guide-note > b { display: block !important; margin-bottom: 6px !important; } .participant-content:has(.submission-initial-v61) .participant-save { min-height: 0 !important; padding: 18px 0 !important; } .participant-content:has(.submission-initial-v61) .participant-save button { width: 100% !important; } .participant-content:has(.submission-initial-v61) .participant-selection-banner { margin: 0 20px 20px !important; } .participant-content:has(.participant-stats-v41) .participant-home-timeline .journey-stage { height: auto !important; min-height: 290px !important; } } /* =================================================================== END V65B =================================================================== */