Visi Misi & Tujuan – BAKK UPN Veteran Jakarta
:root {
--green-dark: #1a5c3a;
--green-mid: #236b45;
--green-light: #2e8b57;
--gold: #c8a84b;
--gold-light: #e8c96e;
--cream: #f9f6f0;
--white: #ffffff;
--text-dark: #1a1a1a;
--text-body: #3a3a3a;
--border: #d4d0c8;
--shadow: 0 4px 24px rgba(26,92,58,.12);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Plus Jakarta Sans', sans-serif;
background: var(--cream);
color: var(--text-body);
}
/* ── Page wrapper ── */
.bakk-page {
max-width: 1100px;
margin: 48px auto;
padding: 0 24px 64px;
}
/* ── Profile card ── */
.bakk-profile {
display: flex;
align-items: center;
gap: 32px;
background: var(--white);
border-radius: 16px;
padding: 32px 36px;
box-shadow: var(--shadow);
margin-bottom: 40px;
border-left: 6px solid var(--green-dark);
}
.bakk-profile img {
width: 140px;
height: 180px;
object-fit: cover;
border-radius: 10px;
border: 3px solid var(--gold);
}
.bakk-profile-placeholder {
width: 140px;
height: 180px;
border-radius: 10px;
border: 3px solid var(--gold);
background: linear-gradient(135deg, #e8e0d0, #d4c9b0);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.bakk-profile-placeholder svg {
opacity: .4;
}
.bakk-profile-info h2 {
font-family: 'Playfair Display', serif;
font-size: 1.6rem;
color: var(--green-dark);
margin-bottom: 6px;
}
.bakk-profile-info p {
font-size: .82rem;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--gold);
line-height: 1.5;
}
/* ── Section block ── */
.bakk-section {
background: var(--white);
border-radius: 14px;
overflow: hidden;
box-shadow: var(--shadow);
margin-bottom: 28px;
border: 1px solid var(--border);
}
/* Section header (collapsible) */
.bakk-section-header {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 28px;
background: linear-gradient(90deg, var(--green-dark) 0%, var(--green-mid) 100%);
cursor: pointer;
user-select: none;
transition: background .25s;
}
.bakk-section-header:hover {
background: linear-gradient(90deg, var(--green-mid) 0%, var(--green-light) 100%);
}
.bakk-section-header h3 {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: .85rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--white);
flex: 1;
}
.bakk-chevron {
width: 18px;
height: 18px;
fill: none;
stroke: var(--gold-light);
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform .3s ease;
flex-shrink: 0;
}
.bakk-section.open .bakk-chevron {
transform: rotate(180deg);
}
/* Section body */
.bakk-section-body {
max-height: 0;
overflow: hidden;
transition: max-height .45s cubic-bezier(.4,0,.2,1);
}
.bakk-section.open .bakk-section-body {
max-height: 2000px;
}
.bakk-section-inner {
padding: 36px 40px;
}
/* ── Visi ── */
.bakk-visi {
text-align: center;
margin-bottom: 36px;
}
.bakk-label {
display: inline-block;
font-family: 'Playfair Display', serif;
font-size: 1.15rem;
color: var(--green-dark);
letter-spacing: .06em;
margin-bottom: 14px;
position: relative;
}
.bakk-label::after {
content: '';
display: block;
width: 48px;
height: 3px;
background: var(--gold);
border-radius: 2px;
margin: 8px auto 0;
}
.bakk-visi p {
font-size: 1rem;
line-height: 1.8;
color: var(--text-body);
max-width: 720px;
margin: 0 auto;
}
/* Divider */
.bakk-divider {
border: none;
border-top: 1px solid var(--border);
margin: 28px 0;
}
/* ── Misi / Tujuan list ── */
.bakk-misi {
text-align: center;
margin-bottom: 24px;
}
.bakk-list {
list-style: none;
counter-reset: bakk-counter;
}
.bakk-list li {
counter-increment: bakk-counter;
display: flex;
align-items: flex-start;
gap: 18px;
padding: 18px 0;
border-bottom: 1px solid var(--border);
animation: fadeUp .4s ease both;
}
.bakk-list li:last-child {
border-bottom: none;
padding-bottom: 0;
}
.bakk-list li::before {
content: counter(bakk-counter);
flex-shrink: 0;
width: 36px;
height: 36px;
background: linear-gradient(135deg, var(--green-dark), var(--green-light));
color: var(--white);
font-weight: 700;
font-size: .85rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-top: 2px;
}
.bakk-list li p {
font-size: .97rem;
line-height: 1.75;
color: var(--text-body);
}
/* ── Animation ── */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.bakk-list li:nth-child(1) { animation-delay: .05s; }
.bakk-list li:nth-child(2) { animation-delay: .12s; }
.bakk-list li:nth-child(3) { animation-delay: .19s; }
/* ── Responsive ── */
@media (max-width: 640px) {
.bakk-profile { flex-direction: column; text-align: center; gap: 20px; }
.bakk-section-inner { padding: 24px 20px; }
}
Dr. Asropi, S.I.P., M.Si.
Kepala Biro Akademik,
Kemahasiswaan dan Kerja Sama
Visi
Menjadi Biro Akademik, Kemahasiswaan dan Kerja sama yang profesional untuk mendukung
universitas unggul berkualitas internasional yang inovatif, berdaya saing dan beridentitas
bela negara untuk pembangunan masyarakat Indonesia.
Misi
-
Memberikan layanan prima dalam administrasi akademik, kemahasiswaan dan kerja sama penelitian dan pengabdaian kepada masyarakat dengan memanfaatkan teknologi informasi yang terintegrasi.
-
Menyelenggarakan layanan akademik, kemahasiswaan dan kerja sama yang berorientasi pada pengembangan bakat, minat dan penalaran, prestasi dan kesejahteraan mahasiswa.
-
Mengembangkan kapabilitas dan kompetensi Sumber Daya Manusia (SDM) untuk mendukung profesionalisme di bidang akademik, kemahasiswaan dan kerja sama.
-
Terselenggaranya administrasi akademik, kemahasiswaan dan kerja sama penelitian dan pengabdian kepada masyarakat secara cepat, tepat, akurat yang transparan dan akuntabel.
-
Terselenggaranya kegiatan akademik, kemahasiswaan dan kerja sama yang mendukung reputasi UPN Veteran Jakarta secara nasional/internasional.
-
Tersedianya Sumber Daya Manusia (SDM) yang profesional dalam layanan administrasi akademik, kemahasiswaan dan kerja sama.
function toggleSection(id) {
const sec = document.getElementById(id);
const expanded = sec.classList.toggle('open');
sec.querySelector('.bakk-section-header')
.setAttribute('aria-expanded', expanded);
}
