/* ===================================================================== MODUL e-CERTIFICATE — KOLEJ KETENGAH ===================================================================== Modul ini tidak menggunakan Bootstrap; ia mempunyai set kelasnya sendiri. Sebelum ini setiap fail membawa ~200-500 baris CSS inline dengan palet biru berasingan, jadi admin nampak dua sistem berbeza apabila berpindah dari Dashboard ke modul Sijil. Semua gaya itu kini dikumpulkan di sini dan menggunakan token jenama yang sama seperti theme.css. ===================================================================== */ /* Token jenama datang dari theme.css, yang mesti dipautkan SEBELUM fail ini dalam . Ia sengaja bukan @import: @import mensiri permintaan rangkaian — theme.css hanya mula dimuat turun selepas fail ini dihurai. */ /* ===================================================================== RANGKA ===================================================================== */ body { font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; background-color: var(--kk-paper); color: var(--kk-text); font-size: .95rem; line-height: 1.6; margin: 0; -webkit-font-smoothing: antialiased; background-image: radial-gradient(circle at 12% 0%, rgba(200, 16, 46, .045), transparent 42%), radial-gradient(circle at 92% 8%, rgba(20, 33, 61, .04), transparent 38%); background-attachment: fixed; min-height: 100vh; } .container { max-width: 1180px; margin: 0 auto; padding: 2rem 1.25rem 3rem; } /* Jalur tajuk lebar penuh. Modul ecert tiada navbar, jadi jalur ini berperanan sebagai chrome halaman — ia sepadan dengan navbar aplikasi utama supaya admin tidak rasa berpindah ke aplikasi berbeza. Anaknya dihadkan kepada lebar kandungan kerana markup asal tiada pembungkus dalaman. */ .header { background-color: var(--kk-ink); background-image: linear-gradient(180deg, #1B2C4F 0%, #14213D 100%); padding: 1.9rem 1.25rem 1.7rem; position: relative; box-shadow: 0 6px 24px rgba(20, 33, 61, .18); } .header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--kk-crimson) 0%, var(--kk-crimson) 18%, rgba(200, 16, 46, .25) 18%, rgba(200, 16, 46, 0) 55%); } .header > * { max-width: 1180px; margin-left: auto; margin-right: auto; } .header h1, .header h2 { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: clamp(1.6rem, 4.5vw, 2.25rem); line-height: 1.15; color: #fff; margin: 0; } .header p { margin: .25rem auto 0; color: rgba(255, 255, 255, .6); font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; } .top-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; } /* ===================================================================== KAD ===================================================================== */ .card, .form-box, .table-box { background: var(--kk-surface); border: 1px solid var(--kk-border); border-radius: var(--kk-r); box-shadow: var(--kk-shadow-sm); padding: 1.35rem; margin-bottom: 1.25rem; } .card h3, .form-title, .table-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: .95rem; font-weight: 700; color: var(--kk-ink); margin: 0 0 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--kk-border); letter-spacing: -.01em; } .card-title { font-family: 'Instrument Serif', Georgia, serif; font-size: 1.5rem; color: var(--kk-ink); margin: 0 0 .25rem; } .card-subtitle { font-size: .82rem; color: var(--kk-text-muted); margin: 0 0 1rem; } /* ===================================================================== DASHBOARD ecert — statistik dan menu ===================================================================== */ .stats, .menu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1.75rem; } .stats .card { margin-bottom: 0; } .card-icon { width: 44px; height: 44px; border-radius: var(--kk-r-sm); display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; background: var(--kk-crimson-soft); color: var(--kk-crimson); margin-bottom: .75rem; } .card-number { font-family: 'Instrument Serif', Georgia, serif; font-size: 2.5rem; line-height: 1; color: var(--kk-ink); } .stats .card-title, .menu-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--kk-crimson); margin: 0 0 .4rem; border: none; padding: 0; } /* Kotak menu — meniru .kk-action-card pada halaman Bootstrap */ .menu-box { display: block; position: relative; overflow: hidden; background: var(--kk-surface); border: 1px solid var(--kk-border); border-radius: var(--kk-r); box-shadow: var(--kk-shadow-sm); padding: 1.35rem; text-decoration: none; color: inherit; transition: box-shadow .22s var(--kk-ease), transform .22s var(--kk-ease), border-color .22s var(--kk-ease); } .menu-box::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--kk-crimson); transform: scaleY(0); transform-origin: top; transition: transform .3s var(--kk-ease); } .menu-box:hover { box-shadow: var(--kk-shadow); transform: translateY(-3px); border-color: var(--kk-border-strong); } .menu-box:hover::before { transform: scaleY(1); } .menu-icon { font-size: 1.7rem; margin-bottom: .6rem; } .menu-box h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: .95rem; font-weight: 700; color: var(--kk-ink); margin: 0 0 .3rem; border: none; padding: 0; } .menu-box p { margin: 0; font-size: .82rem; color: var(--kk-text-muted); } /* ===================================================================== BORANG ===================================================================== */ .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; } .form-group.full, .form-group .full, .full { grid-column: 1 / -1; } .form-group label, label { display: block; font-size: .8rem; font-weight: 600; color: var(--kk-ink); margin-bottom: .35rem; } input[type="text"], input[type="date"], input[type="email"], input[type="number"], input[type="search"], select, textarea, .input { width: 100%; box-sizing: border-box; border: 1px solid var(--kk-border-strong); border-radius: var(--kk-r-sm); padding: .6rem .8rem; font-family: 'Plus Jakarta Sans', sans-serif; font-size: .9rem; color: var(--kk-text); background: var(--kk-surface); transition: border-color .18s var(--kk-ease), box-shadow .18s var(--kk-ease); } input:focus, select:focus, textarea:focus, .input:focus { outline: none; border-color: var(--kk-crimson); box-shadow: 0 0 0 3px rgba(200, 16, 46, .13); } .helper { font-size: .78rem; color: var(--kk-text-muted); margin-top: .3rem; } /* ===================================================================== BUTANG ===================================================================== */ .btn, button, .btn-primary, .btn-secondary, .btn-danger, .btn-back, .back-btn, .btn-generate, .btn-view, .btn-sijil { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border: 1px solid transparent; border-radius: var(--kk-r-sm); padding: .55rem 1.1rem; font-family: 'Plus Jakarta Sans', sans-serif; font-size: .875rem; font-weight: 600; line-height: 1.4; text-decoration: none; cursor: pointer; transition: transform .14s var(--kk-ease), box-shadow .18s var(--kk-ease), background-color .18s var(--kk-ease); } .btn:active, button:active { transform: translateY(1px); } .btn, .btn-primary, .btn-generate, button[type="submit"] { background: var(--kk-crimson); border-color: var(--kk-crimson); color: #fff; box-shadow: 0 1px 2px rgba(200, 16, 46, .25); } .btn:hover, .btn-primary:hover, .btn-generate:hover, button[type="submit"]:hover { background: var(--kk-crimson-deep); border-color: var(--kk-crimson-deep); color: #fff; box-shadow: 0 4px 14px rgba(200, 16, 46, .3); } .btn-secondary, .btn-back, .back-btn { background: transparent; border-color: var(--kk-border-strong); color: var(--kk-text); box-shadow: none; } .btn-secondary:hover, .btn-back:hover, .back-btn:hover { background: var(--kk-surface-alt); border-color: var(--kk-text-muted); color: var(--kk-ink); } .btn-danger { background: var(--kk-rejected); border-color: var(--kk-rejected); color: #fff; } .btn-danger:hover { background: #85102F; border-color: #85102F; color: #fff; } /* Lihat sijil — tindakan sekunder pada baris jadual */ .btn-view, .btn-sijil { background: var(--kk-ink); border-color: var(--kk-ink); color: #fff; padding: .35rem .7rem; font-size: .78rem; } .btn-view:hover, .btn-sijil:hover { background: var(--kk-ink-soft); border-color: var(--kk-ink-soft); color: #fff; } /* ===================================================================== JADUAL ===================================================================== */ .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--kk-border); border-radius: var(--kk-r-sm); } table { width: 100%; border-collapse: collapse; font-size: .875rem; } thead th, th { background: var(--kk-ink); color: var(--kk-text-invert); font-weight: 600; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; text-align: left; padding: .8rem .9rem; white-space: nowrap; } td { padding: .8rem .9rem; border-bottom: 1px solid var(--kk-border); vertical-align: middle; } tbody tr:nth-child(odd) td { background: var(--kk-surface-alt); } tbody tr:hover td { background: var(--kk-crimson-soft); } tbody tr:last-child td { border-bottom: none; } /* ===================================================================== LENCANA ===================================================================== */ .badge, .status, .hadir, .tidak-hadir, .tidak-layak, .badge-hadir, .badge-tidak, .badge-generated { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .35em .75em; border-radius: var(--kk-r-pill); border: 1px solid transparent; white-space: nowrap; background: var(--kk-neutral-bg); color: var(--kk-neutral); border-color: rgba(87, 83, 78, .18); } .hadir, .badge-hadir, .badge-generated { background: var(--kk-approved-bg); color: var(--kk-approved); border-color: rgba(4, 120, 87, .2); } .tidak-hadir, .badge-tidak { background: var(--kk-rejected-bg); color: var(--kk-rejected); border-color: rgba(159, 18, 57, .2); } .tidak-layak { background: var(--kk-pending-bg); color: var(--kk-pending); border-color: rgba(180, 83, 9, .2); } /* ===================================================================== MESEJ ===================================================================== */ .alert, .message, .success, .error { border-radius: var(--kk-r-sm); border: 1px solid transparent; border-left-width: 3px; font-size: .875rem; padding: .85rem 1rem; margin-bottom: 1.1rem; } .success, .message.success, .alert.success { background: var(--kk-approved-bg); border-color: rgba(4, 120, 87, .2); border-left-color: var(--kk-approved); color: #04543C; } .error, .message.error, .alert.error { background: var(--kk-rejected-bg); border-color: rgba(159, 18, 57, .2); border-left-color: var(--kk-rejected); color: #7A0E2C; } .empty { text-align: center; padding: 2.5rem 1rem; color: var(--kk-text-muted); font-size: .9rem; } /* ===================================================================== SEMAKAN — paparan butiran sijil ===================================================================== */ .result-title { font-family: 'Instrument Serif', Georgia, serif; font-size: 1.6rem; color: var(--kk-ink); margin: 0 0 1rem; } .detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; background: var(--kk-border); border: 1px solid var(--kk-border); border-radius: var(--kk-r-sm); overflow: hidden; margin-bottom: 1.25rem; } .detail > div, .detail-row { background: var(--kk-surface); padding: .9rem 1rem; } .detail-label { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--kk-text-muted); margin-bottom: .2rem; } .detail-value { font-weight: 600; color: var(--kk-ink); font-size: .92rem; word-break: break-word; } /* ===================================================================== CARIAN PELAJAR (peserta.php — maklum balas AJAX) ===================================================================== */ .student-status { font-size: .8rem; margin-top: .35rem; font-weight: 600; } .status-loading { color: var(--kk-text-muted); } .status-success { color: var(--kk-approved); } .status-error { color: var(--kk-rejected); } /* ===================================================================== FOOTER ===================================================================== */ .footer { text-align: center; font-size: .78rem; color: var(--kk-text-muted); padding: 1.5rem 0 0; margin-top: 1.5rem; border-top: 1px solid var(--kk-border); } /* ===================================================================== RESPONSIF ===================================================================== */ @media (max-width: 640px) { .container { padding: 1.25rem 1rem 2.5rem; } .form-grid, .stats, .menu-grid { grid-template-columns: 1fr; } .top-bar { flex-direction: column; align-items: stretch; } .top-bar .btn, .top-bar button { width: 100%; } }