/* ================================================== HALAMAN PROGRAM STUDI STAI MUTIARA BANGSA Satu stylesheet untuk seluruh program studi. Warna utama diatur melalui class tema pada . ================================================== */ .program-page { --program-color: #245a9c; --program-color-dark: #173f78; --program-color-rgb: 36, 90, 156; --program-soft: #f0f6ff; --program-soft-strong: #dfecfb; --program-accent: #e5252a; --program-accent-rgb: 229, 37, 42; --program-navy: #163c75; --program-navy-dark: #102b53; --program-blue: #168fc4; --program-yellow: #f2d400; --program-ink: #112744; --program-muted: #627187; --program-border: #dce4ee; --program-surface: #ffffff; --program-background: #f6f8fb; --program-shadow: 0 24px 60px rgba(17, 39, 68, 0.11); --program-shadow-soft: 0 12px 32px rgba(17, 39, 68, 0.08); color: var(--program-ink); background: var(--program-background); } .theme-pai { --program-color: #245a9c; --program-color-dark: #173f78; --program-color-rgb: 36, 90, 156; --program-soft: #f0f6ff; --program-soft-strong: #dfecfb; --program-accent: #e5252a; --program-accent-rgb: 229, 37, 42; } .theme-es { --program-color: #168fc4; --program-color-dark: #096a98; --program-color-rgb: 22, 143, 196; --program-soft: #edf9fe; --program-soft-strong: #d9f1fb; } .theme-hki { --program-color: #245a9c; --program-color-dark: #173f78; --program-color-rgb: 36, 90, 156; --program-soft: #f0f6ff; --program-soft-strong: #dfecfb; --program-hki-gold: #f2d400; --program-hki-gold-dark: #8a7300; } .program-page-main { overflow: clip; } .program-page-main *, .program-page-main *::before, .program-page-main *::after { box-sizing: border-box; } /* ================================================== HERO ================================================== */ .program-hero { position: relative; isolation: isolate; min-height: 590px; display: flex; align-items: center; padding: clamp(96px, 10vw, 148px) 0 clamp(76px, 8vw, 116px); overflow: hidden; background: radial-gradient( circle at 83% 25%, rgba(var(--program-color-rgb), 0.20), transparent 28% ), radial-gradient( circle at 73% 82%, rgba(22, 143, 196, 0.13), transparent 30% ), linear-gradient(120deg, #ffffff 0%, #fffafa 52%, var(--program-soft) 100%); border-bottom: 1px solid rgba(var(--program-color-rgb), 0.14); } .program-hero::before { content: ""; position: absolute; z-index: -1; width: 520px; aspect-ratio: 1; inset-inline-end: -190px; top: -230px; border: 74px solid rgba(var(--program-color-rgb), 0.07); border-radius: 50%; } .program-hero::after { content: ""; position: absolute; z-index: -1; width: 330px; height: 330px; inset-inline-start: -230px; bottom: -220px; border-radius: 50%; background: rgba(22, 143, 196, 0.09); } .program-hero-decoration { position: absolute; z-index: -1; inset: 0; pointer-events: none; } .program-hero-decoration span { position: absolute; display: block; border-radius: 999px; } .program-hero-decoration span:nth-child(1) { width: 110px; height: 8px; inset-inline-start: 7%; top: 19%; background: var(--program-color); } .program-hero-decoration span:nth-child(2) { width: 52px; height: 8px; inset-inline-start: calc(7% + 118px); top: 19%; background: var(--program-yellow); } .program-hero-decoration span:nth-child(3) { width: 128px; height: 128px; inset-inline-end: 7%; bottom: 7%; opacity: 0.25; background-image: radial-gradient( circle, var(--program-color) 1.7px, transparent 1.9px ); background-size: 13px 13px; } .program-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(330px, 0.65fr); gap: clamp(48px, 7vw, 100px); align-items: center; } .program-hero-content { max-width: 790px; } .program-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; color: var(--program-muted); font-size: 0.88rem; font-weight: 650; } .program-breadcrumb a { color: var(--program-navy); text-decoration: none; transition: color 180ms ease; } .program-breadcrumb a:hover { color: var(--program-color); } .program-breadcrumb span[aria-hidden="true"] { color: rgba(var(--program-color-rgb), 0.6); } .program-hero-kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; color: var(--program-color-dark); font-size: 0.79rem; font-weight: 850; letter-spacing: 0.15em; text-transform: uppercase; } .program-hero-kicker::before { content: ""; width: 30px; height: 3px; border-radius: 99px; background: var(--program-color); } .program-hero h1 { max-width: 790px; margin: 0; color: var(--program-navy-dark); font-size: clamp(2.7rem, 5.3vw, 5.65rem); line-height: 0.98; letter-spacing: -0.052em; text-wrap: balance; } .program-hero h1 span { display: inline-block; color: var(--program-color); white-space: nowrap; } .program-hero-tagline { max-width: 720px; margin: 28px 0 0; color: var(--program-navy); font-size: clamp(1.12rem, 1.7vw, 1.48rem); font-weight: 800; line-height: 1.35; } .program-hero-description { max-width: 720px; margin: 16px 0 0; color: var(--program-muted); font-size: clamp(1rem, 1.3vw, 1.1rem); line-height: 1.8; } .program-admission-button { display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-height: 54px; margin-top: 32px; padding: 0 25px; border: 1px solid var(--program-color); border-radius: 12px; color: #ffffff; background: var(--program-color); box-shadow: 0 14px 28px rgba(var(--program-color-rgb), 0.22); font-weight: 850; text-decoration: none; transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease; } .program-admission-button span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--program-color-dark); background: #ffffff; font-size: 0.66rem; font-weight: 900; } .program-admission-button:hover { color: #ffffff; background: var(--program-color-dark); box-shadow: 0 18px 34px rgba(var(--program-color-rgb), 0.28); transform: translateY(-2px); } .program-hero-panel { position: relative; min-height: 420px; padding: 34px; overflow: hidden; border: 1px solid rgba(var(--program-color-rgb), 0.16); border-radius: 28px; background: linear-gradient( 145deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.76) ); box-shadow: var(--program-shadow); backdrop-filter: blur(16px); } .program-hero-panel::before { content: ""; position: absolute; width: 220px; aspect-ratio: 1; inset-inline-end: -94px; top: -90px; border: 42px solid rgba(var(--program-color-rgb), 0.11); border-radius: 50%; } .program-hero-panel::after { content: ""; position: absolute; inset: auto 0 0; height: 7px; background: linear-gradient( 90deg, var(--program-color) 0 56%, var(--program-blue) 56% 80%, var(--program-yellow) 80% 100% ); } .program-monogram { position: relative; z-index: 1; display: grid; place-items: center; width: 106px; height: 106px; border-radius: 28px 28px 28px 6px; color: #ffffff; background: linear-gradient(145deg, var(--program-color), var(--program-color-dark)); box-shadow: 0 18px 34px rgba(var(--program-color-rgb), 0.24); font-size: 1.65rem; font-weight: 900; letter-spacing: 0.08em; } .program-quick-facts { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; margin-top: 42px; } .program-quick-facts div { padding-top: 16px; border-top: 1px solid var(--program-border); } .program-quick-facts span, .program-quick-facts strong { display: block; } .program-quick-facts span { margin-bottom: 6px; color: var(--program-muted); font-size: 0.78rem; font-weight: 750; letter-spacing: 0.07em; text-transform: uppercase; } .program-quick-facts strong { color: var(--program-navy-dark); font-size: 1rem; line-height: 1.4; } /* ================================================== LAYOUT KONTEN DAN DAFTAR ISI STICKY ================================================== */ .program-content-shell { position: relative; padding: clamp(68px, 8vw, 112px) 0 clamp(84px, 9vw, 128px); background: linear-gradient(180deg, #f8fafc 0, var(--program-background) 100%); } .program-content-grid { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: clamp(42px, 6vw, 88px); align-items: start; } .program-toc-column { position: relative; align-self: stretch; } .program-toc { position: sticky; top: 112px; overflow: hidden; border: 1px solid var(--program-border); border-radius: 18px; background: rgba(255, 255, 255, 0.96); box-shadow: var(--program-shadow-soft); } .program-toc-heading { padding: 23px 22px 20px; border-bottom: 1px solid var(--program-border); background: linear-gradient(135deg, var(--program-soft), #ffffff); } .program-toc-heading span, .program-toc-heading strong { display: block; } .program-toc-heading span { margin-bottom: 7px; color: var(--program-color-dark); font-size: 0.7rem; font-weight: 850; letter-spacing: 0.13em; text-transform: uppercase; } .program-toc-heading strong { color: var(--program-navy-dark); font-size: 1.03rem; line-height: 1.45; } .program-toc-links { padding: 10px 0; } .program-toc-links a { position: relative; display: block; padding: 11px 22px; color: var(--program-muted); font-size: 0.91rem; font-weight: 650; line-height: 1.35; text-decoration: none; transition: color 180ms ease, background 180ms ease, padding 180ms ease; } .program-toc-links a::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; opacity: 0; background: var(--program-color); transform: scaleY(0.35); transition: opacity 180ms ease, transform 180ms ease; } .program-toc-links a:hover { color: var(--program-navy); background: var(--program-soft); } .program-toc-links a.active { padding-inline-start: 28px; color: var(--program-navy-dark); background: linear-gradient(90deg, var(--program-soft-strong), transparent); font-weight: 850; } .program-toc-links a.active::before { opacity: 1; transform: scaleY(1); } .program-toc-progress { height: 4px; background: #eef1f5; } .program-toc-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--program-color), var(--program-yellow)); transition: width 100ms linear; } .program-main-content { min-width: 0; } .program-section-block { scroll-margin-top: 128px; padding: 0 0 clamp(80px, 9vw, 118px); } .program-section-heading { max-width: 840px; margin-bottom: 34px; } .program-section-heading > span { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 12px; color: var(--program-color-dark); font-size: 0.73rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; } .program-section-heading > span::before { content: ""; width: 25px; height: 3px; border-radius: 99px; background: var(--program-color); } .program-section-heading h2 { max-width: 900px; margin: 0; color: var(--program-navy-dark); font-size: clamp(2rem, 3.4vw, 3.35rem); line-height: 1.08; letter-spacing: -0.04em; text-wrap: balance; } .program-section-heading > p { max-width: 760px; margin: 17px 0 0; color: var(--program-muted); font-size: 1rem; line-height: 1.75; } /* ================================================== OVERVIEW ================================================== */ .program-lead-quote { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 17px; align-items: start; margin-bottom: 30px; padding: 26px 30px; overflow: hidden; border: 1px solid rgba(var(--program-color-rgb), 0.2); border-radius: 18px; background: linear-gradient(135deg, var(--program-soft), #ffffff); } .program-lead-quote::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 5px; background: var(--program-color); } .program-lead-quote > span { color: var(--program-color); font-family: Georgia, serif; font-size: 3.4rem; line-height: 0.85; } .program-lead-quote p { margin: 0; color: var(--program-navy-dark); font-size: clamp(1.22rem, 2vw, 1.66rem); font-weight: 850; line-height: 1.35; } .program-rich-text { max-width: 900px; } .program-rich-text p { margin: 0 0 19px; color: #46566d; font-size: 1.02rem; line-height: 1.86; } .program-rich-text strong { color: var(--program-navy-dark); } .program-value-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 38px; overflow: hidden; border: 1px solid var(--program-border); border-radius: 18px; background: var(--program-border); box-shadow: var(--program-shadow-soft); } .program-value-strip div { min-height: 150px; padding: 26px; background: #ffffff; } .program-value-strip div:nth-child(2) { background: var(--program-soft); } .program-value-strip strong, .program-value-strip span { display: block; } .program-value-strip strong { margin-bottom: 10px; color: var(--program-color-dark); font-size: 1.08rem; } .program-value-strip span { color: var(--program-muted); font-size: 0.9rem; line-height: 1.65; } /* ================================================== ALASAN MEMILIH ================================================== */ .reason-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .reason-card { position: relative; min-height: 255px; padding: 28px; overflow: hidden; border: 1px solid var(--program-border); border-radius: 18px; background: #ffffff; box-shadow: 0 10px 28px rgba(17, 39, 68, 0.05); transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease; } .reason-card::after { content: ""; position: absolute; width: 100px; height: 100px; inset-inline-end: -58px; bottom: -58px; border: 18px solid rgba(var(--program-color-rgb), 0.07); border-radius: 50%; } .reason-card:hover { border-color: rgba(var(--program-color-rgb), 0.3); box-shadow: 0 18px 38px rgba(17, 39, 68, 0.09); transform: translateY(-4px); } .reason-number { display: inline-grid; place-items: center; width: 42px; height: 42px; margin-bottom: 30px; border-radius: 12px; color: var(--program-color-dark); background: var(--program-soft); font-size: 0.78rem; font-weight: 900; } .reason-card h3 { margin: 0 0 12px; color: var(--program-navy-dark); font-size: 1.16rem; line-height: 1.4; } .reason-card p { margin: 0; color: var(--program-muted); font-size: 0.92rem; line-height: 1.72; } .reason-card-wide { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start; min-height: auto; background: linear-gradient(130deg, var(--program-navy-dark), var(--program-navy)); border-color: transparent; } .reason-card-wide .reason-number { margin: 0; color: #ffffff; background: var(--program-color); } .reason-card-wide h3, .reason-card-wide p { color: #ffffff; } .reason-card-wide p { max-width: 800px; opacity: 0.8; } /* ================================================== ACCORDION KURIKULUM DAN FAQ ================================================== */ .program-accordion { overflow: hidden; border: 1px solid var(--program-border); border-radius: 20px; background: #ffffff; box-shadow: var(--program-shadow-soft); } .accordion-item { border-bottom: 1px solid var(--program-border); background: #ffffff; } .accordion-item:last-child { border-bottom: 0; } .accordion-item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 86px; padding: 19px 24px; color: var(--program-navy-dark); background: linear-gradient(90deg, var(--program-soft), #ffffff 70%); cursor: pointer; font-size: 1.03rem; font-weight: 850; list-style: none; transition: color 180ms ease, background 180ms ease; } .accordion-item summary::-webkit-details-marker { display: none; } .accordion-item summary:hover { color: var(--program-color-dark); background: var(--program-soft-strong); } .accordion-item summary > span:first-child { display: flex; flex-direction: column; gap: 5px; } .accordion-item summary small { color: var(--program-color-dark); font-size: 0.66rem; font-weight: 850; letter-spacing: 0.11em; text-transform: uppercase; } .accordion-icon { position: relative; flex: 0 0 auto; width: 38px; height: 38px; border: 1px solid rgba(var(--program-color-rgb), 0.22); border-radius: 50%; background: #ffffff; } .accordion-icon::before, .accordion-icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; border-radius: 99px; background: var(--program-color-dark); transform: translate(-50%, -50%); transition: transform 180ms ease; } .accordion-icon::after { transform: translate(-50%, -50%) rotate(90deg); } .accordion-item[open] summary { color: var(--program-navy-dark); background: var(--program-soft-strong); } .accordion-item[open] .accordion-icon::after { transform: translate(-50%, -50%) rotate(0deg); } .accordion-content { padding: 26px; animation: programAccordionIn 220ms ease both; } @keyframes programAccordionIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } } .course-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 26px; margin: 0; padding: 0; list-style: none; } .course-grid li { position: relative; min-height: 46px; display: flex; align-items: center; padding: 10px 12px 10px 37px; border: 1px solid #e8edf3; border-radius: 11px; color: #435269; background: #fbfcfe; font-size: 0.88rem; line-height: 1.45; } .course-grid li::before { content: ""; position: absolute; left: 15px; width: 9px; height: 9px; border: 2px solid var(--program-color); border-radius: 3px; } .course-grid-single { grid-template-columns: 1fr; } .elective-item summary { background: linear-gradient(90deg, #fff8d0, #ffffff 75%); } .faq-accordion .accordion-item summary { min-height: 78px; background: #ffffff; font-size: 1rem; line-height: 1.5; } .faq-accordion .accordion-item[open] summary { background: var(--program-soft); } .faq-accordion .accordion-content { padding: 0 76px 25px 24px; background: var(--program-soft); } .faq-accordion .accordion-content p { max-width: 780px; margin: 0; color: var(--program-muted); font-size: 0.94rem; line-height: 1.75; } /* ================================================== PROFIL LULUSAN ================================================== */ .graduate-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .graduate-card { position: relative; min-height: 280px; padding: 30px; overflow: hidden; border-radius: 19px; color: #ffffff; background: radial-gradient( circle at 100% 0, rgba(255, 255, 255, 0.13), transparent 32% ), linear-gradient(135deg, var(--program-navy-dark), var(--program-navy)); box-shadow: var(--program-shadow-soft); } .graduate-card:nth-child(2), .graduate-card:nth-child(4) { background: radial-gradient( circle at 100% 0, rgba(255, 255, 255, 0.17), transparent 32% ), linear-gradient(135deg, var(--program-color-dark), var(--program-color)); } .graduate-card::after { content: ""; position: absolute; width: 116px; height: 116px; inset-inline-end: -40px; bottom: -54px; border: 22px solid rgba(255, 255, 255, 0.08); border-radius: 50%; } .graduate-code { display: inline-grid; place-items: center; width: 42px; height: 42px; margin-bottom: 34px; border: 1px solid rgba(255, 255, 255, 0.32); border-radius: 50%; color: #ffffff; font-size: 0.72rem; font-weight: 900; } .graduate-card h3 { margin: 0 0 7px; color: #ffffff; font-size: 1.3rem; line-height: 1.3; } .graduate-card strong { display: block; margin-bottom: 15px; color: var(--program-yellow); font-size: 0.78rem; letter-spacing: 0.09em; text-transform: uppercase; } .graduate-card p { max-width: 430px; margin: 0; color: rgba(255, 255, 255, 0.79); font-size: 0.9rem; line-height: 1.7; } /* ================================================== SKILL ================================================== */ .skill-list { display: grid; gap: 14px; } .skill-card { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 22px; align-items: start; padding: 25px; border: 1px solid var(--program-border); border-radius: 17px; background: #ffffff; transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; } .skill-card:hover { border-color: rgba(var(--program-color-rgb), 0.3); box-shadow: var(--program-shadow-soft); transform: translateX(4px); } .skill-card > span { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; color: #ffffff; background: var(--program-color); font-size: 0.76rem; font-weight: 900; } .skill-card h3 { margin: 0 0 6px; color: var(--program-navy-dark); font-size: 1.05rem; line-height: 1.42; } .skill-card strong { display: block; margin-bottom: 10px; color: var(--program-color-dark); font-size: 0.84rem; line-height: 1.45; } .skill-card p { margin: 0; color: var(--program-muted); font-size: 0.9rem; line-height: 1.7; } /* ================================================== PENUTUP ================================================== */ .program-closing { position: relative; padding: clamp(36px, 6vw, 62px); overflow: hidden; border-radius: 24px; color: #ffffff; background: radial-gradient( circle at 92% 20%, rgba(var(--program-color-rgb), 0.55), transparent 28% ), linear-gradient(130deg, var(--program-navy-dark), var(--program-navy)); box-shadow: var(--program-shadow); } .program-closing::before, .program-closing::after { content: ""; position: absolute; border-radius: 50%; border: 30px solid rgba(255, 255, 255, 0.07); } .program-closing::before { width: 180px; height: 180px; inset-inline-end: -55px; top: -80px; } .program-closing::after { width: 120px; height: 120px; inset-inline-end: 92px; bottom: -90px; } .program-closing > * { position: relative; z-index: 1; } .program-closing > span { display: block; margin-bottom: 14px; color: var(--program-yellow); font-size: 0.74rem; font-weight: 900; letter-spacing: 0.13em; text-transform: uppercase; } .program-closing h2 { max-width: 700px; margin: 0; color: #ffffff; font-size: clamp(1.8rem, 3vw, 3rem); line-height: 1.15; letter-spacing: -0.035em; } .program-closing p { max-width: 670px; margin: 17px 0 0; color: rgba(255, 255, 255, 0.76); line-height: 1.75; } /* ================================================== FOCUS DAN AKSESIBILITAS ================================================== */ .program-page-main a:focus-visible, .program-page-main summary:focus-visible { outline: 3px solid rgba(var(--program-color-rgb), 0.35); outline-offset: 4px; } /* ================================================== RESPONSIVE ================================================== */ @media (max-width: 1100px) { .program-hero-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 45px; } .program-content-grid { grid-template-columns: 235px minmax(0, 1fr); gap: 40px; } .program-toc-links a { padding-inline: 18px; } .program-toc-links a.active { padding-inline-start: 24px; } } @media (max-width: 900px) { .program-hero { min-height: auto; } .program-hero-grid { grid-template-columns: 1fr; } .program-hero-panel { min-height: auto; display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: center; } .program-quick-facts { margin-top: 0; } .program-content-grid { grid-template-columns: 1fr; gap: 48px; } .program-toc-column { height: auto; } .program-toc { top: 78px; z-index: 20; border-radius: 14px; } .program-toc-heading { display: none; } .program-toc-links { display: flex; overflow-x: auto; padding: 7px; scrollbar-width: thin; overscroll-behavior-inline: contain; } .program-toc-links a { flex: 0 0 auto; padding: 10px 15px; border-radius: 9px; white-space: nowrap; } .program-toc-links a::before { display: none; } .program-toc-links a.active { padding: 10px 15px; color: #ffffff; background: var(--program-color); } .program-toc-progress { height: 3px; } .program-section-block { scroll-margin-top: 150px; } } @media (max-width: 680px) { .program-hero { padding-top: 86px; padding-bottom: 70px; } .program-hero-decoration span:nth-child(1), .program-hero-decoration span:nth-child(2) { top: 12%; } .program-breadcrumb { margin-bottom: 28px; font-size: 0.8rem; } .program-hero h1 { font-size: clamp(2.55rem, 13vw, 4rem); } .program-hero h1 span { display: block; margin-top: 8px; } .program-admission-button { width: 100%; } .program-hero-panel { grid-template-columns: 1fr; padding: 25px; border-radius: 20px; } .program-monogram { width: 82px; height: 82px; border-radius: 22px 22px 22px 5px; font-size: 1.25rem; } .program-quick-facts { gap: 17px 14px; } .program-content-shell { padding-top: 48px; } .program-content-grid { gap: 40px; } .program-toc { top: 70px; } .program-section-block { scroll-margin-top: 142px; padding-bottom: 76px; } .program-section-heading { margin-bottom: 27px; } .program-lead-quote { grid-template-columns: 1fr; padding: 24px; } .program-lead-quote > span { font-size: 2.8rem; } .program-value-strip, .reason-grid, .graduate-grid { grid-template-columns: 1fr; } .reason-card { min-height: auto; } .reason-card-wide { grid-column: auto; grid-template-columns: 1fr; } .course-grid { grid-template-columns: 1fr; } .accordion-item summary { min-height: 76px; padding: 17px; font-size: 0.94rem; } .accordion-content { padding: 17px; } .faq-accordion .accordion-content { padding: 0 18px 22px; } .skill-card { grid-template-columns: 1fr; gap: 15px; } .skill-card:hover { transform: translateY(-3px); } .program-closing { border-radius: 20px; } } @media (max-width: 420px) { .program-quick-facts { grid-template-columns: 1fr; } .program-quick-facts div { padding-top: 12px; } .program-value-strip div, .reason-card, .graduate-card, .skill-card { padding: 22px; } } @media (prefers-reduced-motion: reduce) { .program-page-main *, .program-page-main *::before, .program-page-main *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ================================================== PENYEDERHANAAN VISUAL PAI Biru menjadi warna utama; merah hanya aksen prodi. ================================================== */ .theme-pai .program-hero { min-height: 430px; padding: 0; align-items: stretch; border-bottom: 0; background: var(--program-navy-dark); } .theme-pai .program-hero::before, .theme-pai .program-hero::after { display: none; } .theme-pai .program-hero-grid { min-height: 430px; grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr); gap: 0; align-items: stretch; } .theme-pai .program-hero-content { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; max-width: none; padding: 58px clamp(42px, 5vw, 78px) 58px 0; } .theme-pai .program-hero-content::after { content: ""; position: absolute; z-index: -1; inset: 0 -84px 0 auto; width: 170px; background: linear-gradient( 90deg, var(--program-navy-dark), transparent ); pointer-events: none; } .theme-pai .program-breadcrumb { margin-bottom: 27px; color: rgba(255, 255, 255, 0.58); } .theme-pai .program-breadcrumb a { color: rgba(255, 255, 255, 0.82); } .theme-pai .program-breadcrumb a:hover { color: var(--program-yellow); } .theme-pai .program-breadcrumb span[aria-hidden="true"] { color: rgba(255, 255, 255, 0.35); } .theme-pai .program-hero-kicker { margin-bottom: 15px; color: rgba(255, 255, 255, 0.78); } .theme-pai .program-hero-kicker::before { background: var(--program-accent); } .theme-pai .program-hero h1 { max-width: 720px; color: #ffffff; font-size: clamp(2.5rem, 4.4vw, 4.6rem); line-height: 1.03; letter-spacing: -0.045em; } .theme-pai .program-hero-description { max-width: 680px; margin-top: 18px; color: rgba(255, 255, 255, 0.76); font-size: clamp(0.98rem, 1.25vw, 1.08rem); line-height: 1.72; } .theme-pai .program-admission-button { align-self: flex-start; min-height: 50px; margin-top: 27px; border-color: var(--program-yellow); color: var(--program-navy-dark); background: var(--program-yellow); box-shadow: 0 13px 27px rgba(0, 0, 0, 0.16); } .theme-pai .program-admission-button span { color: #ffffff; background: var(--program-navy); } .theme-pai .program-admission-button:hover { border-color: #ffdf20; color: var(--program-navy-dark); background: #ffdf20; box-shadow: 0 17px 31px rgba(0, 0, 0, 0.2); } .program-hero-image { position: relative; min-width: 0; min-height: 430px; margin: 0; overflow: hidden; background: #173f78; } .program-hero-image::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient( 90deg, rgba(16, 43, 83, 0.86) 0%, rgba(16, 43, 83, 0.25) 24%, transparent 53% ), linear-gradient( 0deg, rgba(10, 29, 54, 0.18), transparent 45% ); pointer-events: none; } .program-hero-image img { display: block; width: 100%; height: 100%; min-height: 430px; object-fit: cover; object-position: 50% 42%; } .program-hero-image figcaption { position: absolute; z-index: 2; inset-inline-end: 14px; bottom: 11px; padding: 5px 8px; border-radius: 6px; color: rgba(255, 255, 255, 0.7); background: rgba(11, 29, 52, 0.62); font-size: 0.66rem; backdrop-filter: blur(6px); } .program-hero-image figcaption a { color: #ffffff; text-decoration: none; } .theme-pai .program-section-heading > span { color: var(--program-navy); } .theme-pai .program-section-heading > span::before, .theme-pai .program-toc-links a.active::before { background: var(--program-accent); } .theme-pai .program-toc-heading span { color: var(--program-accent); } .theme-pai .program-toc-links a.active { color: var(--program-navy-dark); background: linear-gradient(90deg, #eaf2fc, transparent); } .theme-pai .program-toc-progress span { background: linear-gradient( 90deg, var(--program-navy), var(--program-blue), var(--program-yellow) ); } @media (max-width: 900px) { .theme-pai .program-hero-grid { grid-template-columns: 1fr; } .theme-pai .program-hero-content { padding: 58px 0 48px; } .theme-pai .program-hero-content::after { display: none; } .program-hero-image, .program-hero-image img { min-height: 310px; max-height: 360px; } .program-hero-image::before { background: linear-gradient( 180deg, rgba(16, 43, 83, 0.78), transparent 40% ); } .theme-pai .program-toc-links a.active { color: #ffffff; background: var(--program-navy); } } @media (max-width: 680px) { .theme-pai .program-hero { padding: 0; } .theme-pai .program-hero-content { padding: 48px 0 40px; } .theme-pai .program-hero h1 { font-size: clamp(2.35rem, 11vw, 3.4rem); } .theme-pai .program-admission-button { align-self: stretch; } .program-hero-image, .program-hero-image img { min-height: 250px; max-height: 290px; } } /* ================================================== PENYEMPURNAAN PAI: HERO, KARTU, DAN SLIDER ================================================== */ .theme-pai .program-hero { min-height: 380px; } .theme-pai .program-hero-grid { width: 100%; min-height: 380px; grid-template-columns: minmax(0, 0.9fr) minmax(430px, 1.1fr); } .theme-pai .program-hero-content { padding: 38px clamp(34px, 4vw, 66px) 38px max(24px, calc((100vw - 1280px) / 2)); } .theme-pai .program-breadcrumb { margin-bottom: 18px; } .theme-pai .program-hero-kicker { margin-bottom: 11px; } .theme-pai .program-hero h1 { max-width: 660px; font-size: clamp(2.3rem, 3.8vw, 4rem); } .theme-pai .program-hero-description { max-width: 640px; margin-top: 13px; line-height: 1.62; } .theme-pai .program-admission-button { margin-top: 20px; } .theme-pai .program-admission-button img { display: block; width: 22px; height: 22px; object-fit: contain; } .program-hero-image, .program-hero-image img { min-height: 380px; max-height: 380px; } .program-hero-image figcaption { inset-inline-end: 16px; bottom: 12px; padding: 0; border-radius: 0; background: transparent; text-shadow: 0 1px 5px rgba(8, 23, 43, 0.95); backdrop-filter: none; } .reason-card { min-height: 250px; } .reason-icon { position: relative; z-index: 1; display: inline-grid; place-items: center; width: 46px; height: 46px; margin-bottom: 28px; border: 1px solid rgba(var(--program-color-rgb), 0.11); border-radius: 14px; color: var(--program-navy); background: var(--program-soft); font-size: 1.3rem; font-weight: 900; line-height: 1; } .reason-icon svg { width: 23px; height: 23px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* Slider bersama untuk Prospek Kerja dan Skill. */ .content-slider { min-width: 0; } .slider-viewport { width: 100%; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-inline: contain; } .slider-viewport::-webkit-scrollbar { display: none; } .slider-track { display: flex; width: max-content; max-width: none; gap: 16px; padding: 2px 2px 10px; } .career-card { position: relative; flex: 0 0 clamp(310px, 47vw, 515px); min-height: 335px; display: flex; flex-direction: column; padding: clamp(25px, 3vw, 34px); overflow: hidden; scroll-snap-align: start; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; color: #ffffff; background: radial-gradient( circle at 100% 0, rgba(255, 255, 255, 0.12), transparent 31% ), linear-gradient(135deg, #225b78 0%, #154a68 52%, #103b5d 100%); box-shadow: 0 17px 36px rgba(17, 39, 68, 0.14); } .career-card::after { content: ""; position: absolute; width: 190px; height: 190px; inset-inline-end: -105px; bottom: -105px; border: 33px solid rgba(255, 255, 255, 0.05); border-radius: 50%; pointer-events: none; } .career-label { align-self: flex-start; margin-bottom: 15px; padding: 7px 11px; border-radius: 999px; color: var(--program-navy-dark); background: var(--program-yellow); font-size: 0.7rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; } .career-card h3 { position: relative; z-index: 1; margin: 0 0 13px; color: #ffffff; font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.3; } .career-card > p { position: relative; z-index: 1; margin: 0 0 24px; color: rgba(255, 255, 255, 0.8); font-size: 0.92rem; line-height: 1.7; } .career-salary { position: relative; z-index: 1; margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.17); } .career-salary small, .career-salary strong { display: block; } .career-salary small { margin-bottom: 5px; color: rgba(255, 255, 255, 0.65); font-size: 0.73rem; } .career-salary strong { color: #ffffff; font-size: 1.05rem; } .career-card > a, .career-source-note { position: relative; z-index: 1; align-self: flex-start; margin-top: 13px; color: #cbeeff; font-size: 0.76rem; font-weight: 800; } .career-card > a:hover { color: var(--program-yellow); } .career-source-note { color: rgba(255, 255, 255, 0.62); } .salary-disclaimer { margin: 14px 0 0; color: var(--program-muted); font-size: 0.78rem; line-height: 1.6; } .skill-list.slider-track { display: flex; gap: 15px; } .skill-list.slider-track .skill-card { flex: 0 0 clamp(270px, 31vw, 320px); min-height: 300px; display: block; padding: 23px; scroll-snap-align: start; } .skill-list.slider-track .skill-card:hover { transform: translateY(-4px); } .skill-list.slider-track .skill-card > span { width: 43px; height: 43px; margin-bottom: 20px; border-radius: 13px; } .skill-list.slider-track .skill-card h3 { min-height: 3em; font-size: 0.98rem; } .skill-list.slider-track .skill-card strong { min-height: 2.8em; font-size: 0.79rem; } .skill-list.slider-track .skill-card p { font-size: 0.84rem; line-height: 1.62; } .slider-controls { display: grid; grid-template-columns: auto minmax(100px, 1fr) auto; gap: 16px; align-items: center; margin-top: 14px; } .slider-button { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid rgba(var(--program-color-rgb), 0.32); border-radius: 50%; color: var(--program-navy); background: #f6fbff; font-size: 1.35rem; cursor: pointer; transition: color 180ms ease, background 180ms ease, transform 180ms ease, opacity 180ms ease; } .slider-button:hover:not(:disabled) { color: #ffffff; background: var(--program-navy); transform: translateY(-2px); } .slider-button:disabled { cursor: default; opacity: 0.34; } .slider-progress { height: 7px; overflow: hidden; border-radius: 999px; background: #e5ebf2; } .slider-progress span { display: block; width: 18%; height: 100%; border-radius: inherit; background: linear-gradient( 90deg, var(--program-blue), var(--program-navy), var(--program-yellow) ); transition: width 120ms linear; } .program-toc { top: var(--program-sticky-top, 112px); } @media (max-width: 900px) { .theme-pai .program-hero, .theme-pai .program-hero-grid { min-height: auto; } .theme-pai .program-hero-content { padding: 42px max(24px, calc((100vw - 720px) / 2)); } .program-hero-image, .program-hero-image img { min-height: 275px; max-height: 315px; } .career-card { flex-basis: min(82vw, 480px); } .skill-list.slider-track .skill-card { flex-basis: min(70vw, 310px); } } @media (max-width: 680px) { .theme-pai .program-hero-content { padding: 35px 20px 37px; } .theme-pai .program-breadcrumb { margin-bottom: 16px; } .theme-pai .program-hero h1 { font-size: clamp(2.15rem, 10.5vw, 3.15rem); } .program-hero-image, .program-hero-image img { min-height: 225px; max-height: 255px; } .reason-card { min-height: 230px; } .career-card { flex-basis: calc(100vw - 54px); min-height: 350px; padding: 23px; } .skill-list.slider-track .skill-card { flex-basis: calc(100vw - 70px); min-height: 285px; } .slider-controls { gap: 11px; } .slider-button { width: 42px; height: 42px; } } /* ================================================== INTERAKSI SLIDER DAN RESPONSIVE FINAL ================================================== */ /* Foto selalu mengisi tinggi hero, termasuk ketika teks kiri lebih tinggi. */ .theme-pai .program-hero-grid { align-items: stretch; } .program-hero-image { position: relative; align-self: stretch; min-height: 100%; max-height: none; } .program-hero-image img { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 100%; max-height: none; object-fit: cover; } .slider-viewport { cursor: grab; direction: ltr; user-select: none; touch-action: pan-x pan-y; } .slider-viewport.is-dragging { cursor: grabbing; scroll-snap-type: none; } .slider-viewport.is-dragging * { pointer-events: none; } .slider-button { font-family: Arial, sans-serif; font-size: 1.35rem; font-weight: 700; line-height: 1; } /* Indikator berupa penanda pendek yang bergerak, bukan isian panjang. */ .slider-progress { --slider-position: 0; position: relative; height: 8px; overflow: visible; background: transparent; } .slider-progress::before { content: ""; position: absolute; inset: 2px 0 auto; height: 4px; border-radius: 999px; background: #e6ebf1; } .slider-progress span { position: absolute; z-index: 1; top: 0; left: calc((100% - 74px) * var(--slider-position)); width: 74px; height: 8px; border-radius: 999px; transition: left 180ms ease; } .career-slider .slider-progress span { background: linear-gradient(90deg, #2e7592, #154a68); } .skill-slider .slider-progress span { background: linear-gradient(90deg, var(--program-blue), var(--program-navy)); } .skill-list.slider-track .skill-card > .skill-icon { color: var(--program-navy); background: var(--program-soft); } .skill-icon svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } html[dir="rtl"] .program-hero-content, html[dir="rtl"] .program-section-heading, html[dir="rtl"] .program-main-content, html[dir="rtl"] .program-toc { text-align: right; } html[dir="rtl"] .career-card, html[dir="rtl"] .skill-card { direction: rtl; text-align: right; } html[dir="rtl"] .program-hero-content::after { inset: 0 auto 0 -84px; background: linear-gradient(270deg, var(--program-navy-dark), transparent); } @media (max-width: 900px) { .program-page-main { overflow-x: clip; } .theme-pai .program-hero-grid { display: grid; grid-template-columns: 1fr; } .theme-pai .program-hero-content { min-width: 0; } .program-hero-image { min-height: clamp(230px, 56vw, 330px); } .program-hero-image img { min-height: 0; } .program-content-shell { padding-right: 20px; padding-left: 20px; } .program-content-grid, .program-main-content { min-width: 0; } .program-toc { max-width: calc(100vw - 40px); } .program-toc-links { scroll-snap-type: x proximity; scrollbar-width: none; } .program-toc-links::-webkit-scrollbar { display: none; } .program-toc-links a { scroll-snap-align: start; } .program-section-heading h2 { overflow-wrap: anywhere; font-size: clamp(1.65rem, 6vw, 2.25rem); } .reason-grid, .graduate-grid { gap: 14px; } .slider-track { gap: 14px; } .career-card { flex-basis: min(82vw, 450px); } .skill-list.slider-track .skill-card { flex-basis: min(72vw, 310px); } } @media (max-width: 680px) { .theme-pai .program-hero-content { padding: 30px 18px 34px; } .theme-pai .program-hero h1 { max-width: 100%; font-size: clamp(2rem, 11vw, 2.85rem); line-height: 1.04; overflow-wrap: normal; } .theme-pai .program-hero-description { font-size: 0.94rem; line-height: 1.65; } .theme-pai .program-admission-button { width: auto; align-self: flex-start; padding-right: 20px; padding-left: 20px; } .program-hero-image { min-height: 235px; } .program-content-shell { padding-top: 35px; padding-right: 15px; padding-left: 15px; } .program-content-grid { gap: 30px; } .program-toc { max-width: calc(100vw - 30px); border-radius: 12px; } .program-section-block { padding-bottom: 62px; } .program-value-strip, .reason-grid, .graduate-grid, .course-grid { grid-template-columns: minmax(0, 1fr); } .reason-card, .graduate-card { min-width: 0; padding: 22px; } .accordion-item summary, .accordion-content, .faq-accordion .accordion-content { min-width: 0; } .career-card { flex-basis: calc(100vw - 46px); min-height: 345px; border-radius: 17px; } .skill-list.slider-track .skill-card { flex-basis: calc(100vw - 62px); min-height: 290px; } .slider-controls { grid-template-columns: 42px minmax(60px, 1fr) 42px; gap: 10px; } .slider-progress span { left: calc((100% - 52px) * var(--slider-position)); width: 52px; } .program-closing { padding: 28px 22px; } } @media (max-width: 390px) { .program-breadcrumb { gap: 7px; font-size: 0.72rem; } .theme-pai .program-hero h1 { font-size: clamp(1.9rem, 10.5vw, 2.45rem); } .career-card { flex-basis: calc(100vw - 38px); padding: 20px; } .skill-list.slider-track .skill-card { flex-basis: calc(100vw - 52px); padding: 20px; } } /* ================================================== TEMA EKONOMI SYARIAH Biru logo menjadi identitas utama prodi. ================================================== */ .theme-es .program-hero { min-height: 380px; padding: 0; align-items: stretch; border-bottom: 0; background: var(--program-navy-dark); } .theme-es .program-hero::before, .theme-es .program-hero::after { display: none; } .theme-es .program-hero-grid { width: 100%; min-height: 380px; grid-template-columns: minmax(0, 0.9fr) minmax(430px, 1.1fr); gap: 0; align-items: stretch; } .theme-es .program-hero-content { position: relative; z-index: 2; display: flex; min-width: 0; max-width: none; flex-direction: column; justify-content: center; padding: 38px clamp(34px, 4vw, 66px) 38px max(24px, calc((100vw - 1280px) / 2)); } .theme-es .program-hero-content::after { content: ""; position: absolute; z-index: -1; inset: 0 -84px 0 auto; width: 170px; background: linear-gradient( 90deg, var(--program-navy-dark), transparent ); pointer-events: none; } .theme-es .program-breadcrumb { margin-bottom: 18px; color: rgba(255, 255, 255, 0.58); } .theme-es .program-breadcrumb a { color: rgba(255, 255, 255, 0.82); } .theme-es .program-breadcrumb a:hover { color: var(--program-yellow); } .theme-es .program-breadcrumb span[aria-hidden="true"] { color: rgba(255, 255, 255, 0.35); } .theme-es .program-hero-kicker { margin-bottom: 11px; color: rgba(255, 255, 255, 0.8); } .theme-es .program-hero-kicker::before { background: var(--program-blue); } .theme-es .program-hero h1 { max-width: 690px; color: #ffffff; font-size: clamp(2.3rem, 3.8vw, 4rem); line-height: 1.03; letter-spacing: -0.045em; } .theme-es .program-hero-description { max-width: 650px; margin-top: 13px; color: rgba(255, 255, 255, 0.78); font-size: clamp(0.98rem, 1.25vw, 1.08rem); line-height: 1.62; } .theme-es .program-admission-button { align-self: flex-start; min-height: 50px; margin-top: 20px; border-color: var(--program-yellow); color: var(--program-navy-dark); background: var(--program-yellow); box-shadow: 0 13px 27px rgba(0, 0, 0, 0.16); } .theme-es .program-admission-button img { display: block; width: 22px; height: 22px; object-fit: contain; } .theme-es .program-admission-button:hover { border-color: #ffdf20; color: var(--program-navy-dark); background: #ffdf20; box-shadow: 0 17px 31px rgba(0, 0, 0, 0.2); } .theme-es .program-hero-image img { object-position: 50% 52%; } .theme-es .program-hero-image::before { background: linear-gradient( 90deg, rgba(16, 43, 83, 0.9) 0%, rgba(16, 43, 83, 0.28) 27%, transparent 58% ), linear-gradient( 0deg, rgba(10, 29, 54, 0.15), transparent 45% ); } .theme-es .program-section-heading > span, .theme-es .program-toc-heading span { color: var(--program-blue); } .theme-es .program-section-heading > span::before, .theme-es .program-toc-links a.active::before { background: var(--program-blue); } .theme-es .program-toc-links a.active { color: var(--program-color-dark); background: linear-gradient(90deg, var(--program-soft), transparent); } .theme-es .program-toc-progress span { background: linear-gradient( 90deg, var(--program-blue), var(--program-navy), var(--program-yellow) ); } .theme-es .career-card { background: radial-gradient( circle at 100% 0, rgba(255, 255, 255, 0.14), transparent 31% ), linear-gradient(135deg, #287a9c 0%, #14658d 52%, #0d4f78 100%); } .theme-es .career-slider .slider-progress span { background: linear-gradient(90deg, #2b8fb8, #12628d); } @media (max-width: 900px) { .theme-es .program-hero, .theme-es .program-hero-grid { min-height: auto; } .theme-es .program-hero-grid { grid-template-columns: 1fr; } .theme-es .program-hero-content { padding: 42px max(24px, calc((100vw - 720px) / 2)); } .theme-es .program-hero-content::after { display: none; } .theme-es .program-hero-image::before { background: linear-gradient( 180deg, rgba(16, 43, 83, 0.58), transparent 46% ); } .theme-es .program-toc-links a.active { color: #ffffff; background: var(--program-color-dark); } } @media (max-width: 680px) { .theme-es .program-hero-content { padding: 30px 18px 34px; } .theme-es .program-hero h1 { max-width: 100%; font-size: clamp(2rem, 11vw, 2.85rem); line-height: 1.04; } .theme-es .program-hero-description { font-size: 0.94rem; line-height: 1.65; } .theme-es .program-admission-button { width: auto; align-self: flex-start; padding-right: 20px; padding-left: 20px; } } /* ================================================== TEMA HUKUM KELUARGA ISLAM Layout mengikuti Ekonomi Syariah dengan aksen emas khas logo sebagai identitas prodi HKI. ================================================== */ .theme-hki .program-breadcrumb a:hover { color: var(--program-yellow); } .theme-hki .program-hero-kicker::before { background: var(--program-yellow); } .theme-hki .program-hero-image img { object-position: 48% 50%; } .theme-hki .program-hero-image::before { background: linear-gradient( 90deg, rgba(16, 43, 83, 0.92) 0%, rgba(16, 43, 83, 0.3) 27%, transparent 58% ), linear-gradient( 0deg, rgba(121, 93, 0, 0.12), transparent 46% ); } .theme-hki .program-section-heading > span { color: var(--program-navy); } .theme-hki .program-toc-heading span { color: var(--program-hki-gold-dark); } .theme-hki .program-section-heading > span::before, .theme-hki .program-toc-links a.active::before { background: var(--program-hki-gold); } .theme-hki .program-toc-links a.active { color: var(--program-navy-dark); background: linear-gradient(90deg, var(--program-soft-strong), transparent); } .theme-hki .program-toc-progress span { background: linear-gradient( 90deg, var(--program-blue), var(--program-navy), var(--program-yellow) ); } .theme-hki .graduate-card:nth-child(2), .theme-hki .graduate-card:nth-child(4) { background: radial-gradient( circle at 100% 0, rgba(255, 255, 255, 0.13), transparent 32% ), linear-gradient(135deg, var(--program-navy-dark), var(--program-navy)); } .theme-hki .curriculum-accordion .accordion-item summary, .theme-hki .curriculum-accordion .elective-item summary { background: linear-gradient(90deg, var(--program-soft), #ffffff 70%); } .theme-hki .curriculum-accordion .accordion-item summary:hover, .theme-hki .curriculum-accordion .accordion-item[open] summary { color: var(--program-navy-dark); background: var(--program-soft-strong); } .theme-hki .career-card { background: radial-gradient( circle at 100% 0, rgba(242, 212, 0, 0.22), transparent 34% ), linear-gradient(135deg, #244f80 0%, #173f70 54%, #102b53 100%); } .theme-hki .career-label { color: var(--program-navy-dark); background: var(--program-yellow); } .theme-hki .career-slider .slider-progress span, .theme-hki .skill-slider .slider-progress span { background: linear-gradient(90deg, var(--program-blue), var(--program-navy)); } .theme-hki .slider-button:hover, .theme-hki .slider-button:focus-visible { border-color: var(--program-color-dark); color: #ffffff; background: var(--program-color-dark); } @media (max-width: 900px) { .theme-hki .program-hero-image::before { background: linear-gradient( 180deg, rgba(16, 43, 83, 0.56), transparent 48% ); } .theme-hki .program-toc-links a.active { color: #ffffff; background: var(--program-color-dark); } }