.sna-academy,
.sna-academy * {
box-sizing: border-box;
}
.sna-academy {
font-family: "Sen", sans-serif;
background: #FFF;
color: #1e2a1c;
line-height: normal;
}
.sna-academy .swiper-wrapper { height: auto; }
.sna-academy .modal-body a { color: #20662c; }
.sna-academy .main-container { max-width: 1300px; margin: 0 auto; padding: 2.5rem 2rem; } .sna-academy .academy-header { text-align: center;padding-bottom: 1rem; }
.sna-academy .academy-header h1 {
font-family: "Tangerine", cursive;
font-size: 3rem;
font-weight: 800;
background: linear-gradient(135deg, #1c6e2f, #4f964b);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
letter-spacing: -0.3px;
margin: 0 0 12px;
}
.sna-academy .academy-header p {
color: #4f7350;
margin-top: 0.5rem;
border-bottom: 2px solid #cfebc2;
display: inline-block;
padding-bottom: 0.3rem;
margin-bottom: 0;
font-family: "Sen", sans-serif;
}
.sna-academy .academy-header p + p { display:block; width:max-content; max-width:100%; margin-left:auto; margin-right:auto; }
.sna-academy .academy-header .sub { border-bottom: 2px solid #cfebc2; display: inline-block; padding-bottom: 0.3rem; font-weight: 500; } .sna-academy .sna-filters input,
.sna-academy .sna-filters select { min-height:40px; border:1px solid #bcddae; background:#fff; color:#2b5e2e; padding:0 14px; font:inherit; border-radius: 6px;}
.sna-academy .sna-filter-search { min-width:230px; }
.sna-academy .timeline.sna-no-results::before { content:'No matching Academy items.'; display:block; text-align:center; color:#6a8e5e; padding:30px 0; }
.sna-academy .timeline.sna-no-results::after { display:none; }
.sna-academy .timeline-item[hidden] { display:none !important; } .sna-academy .timeline { position: relative; margin: 2rem auto; }
.sna-academy .timeline::after {
content: '';
position: absolute;
width: 3px;
background: linear-gradient(to bottom, #bdd8ae, #6f9e64);
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
border-radius: 3px;
z-index:0;
}
.sna-academy .timeline-item { position: relative; width: 50%; z-index:1; }
.sna-academy .timeline-item.left { left: 0; padding-right: 2rem; }
.sna-academy .timeline-item.right { left: 50%; padding-left: 2rem; }
.sna-academy .timeline-marker {
position: absolute;
width: 20px;
height: 20px;
background: #ffffff;
border: 3px solid #388e3c;
border-radius: 50%;
top: 32px;
z-index: 2;
box-shadow: 0 0 0 4px #e9f3e3;
}
.sna-academy .left .timeline-marker { right: -10px; }
.sna-academy .right .timeline-marker { left: -10px; }
.sna-academy .timeline-card {
background: white;
border-radius: 1.25rem;
overflow: hidden;
box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.1);
transition: transform 0.2s ease;
border: 1px solid #e2efda;
}
.sna-academy .timeline-card:hover { transform: translateY(-4px); }
.sna-academy .card-image,
.sna-academy .summary-banner { width: 100%; height: 350px; object-fit: cover; display: block; }
.sna-academy .card-inner { padding: 1.5rem; }
.sna-academy .sna-card-top { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; margin-bottom:10px; gap:8px; }
.sna-academy .generation-badge {
display: inline-flex;
align-items:center;
gap:6px;
background: #eef5e9;
color: #2e7d32;
text-transform: uppercase;
font-weight: 500;
font-size: 14px;
padding: 0.5rem 1rem;
border-radius: 40px;
border:0;
cursor:pointer;
font-family:inherit;
}
.sna-academy .card-title { font-size: 1.4rem; font-weight: 700; color: #1b4d23; margin-bottom: 0.6rem; }
.sna-academy .card-description { color: #3a5436; line-height: 1.5; font-size: 0.9rem; margin-bottom: 1.2rem; }
.sna-academy .card-description p { margin:0; }
.sna-academy .readmore-btn {
font-family: inherit;
line-height: 1.4;
background: none;
border: 1px solid #bcddae;
padding: 0.5rem 1rem;
border-radius: 40px;
font-weight: 600;
font-size: 0.8rem;
color: #2a7334;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
transition: 0.2s;
}
.sna-academy .sna-filter-reset{
border-radius: 6px;
line-height: 1.7;
}
.sna-academy .readmore-btn:hover { background: #eaf5e4; gap: 12px; }
.sna-academy .timeline-year-large {
font-size: 2rem;
font-weight: 800;
background: linear-gradient(135deg, #2a6e2f, #559c4a);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
.sna-academy .fulldetail { margin: auto; text-align: justify; }
.sna-academy .fulldetail p { margin:0 0 1em; }
.sna-academy .fulldetail ul, .sna-academy .fulldetail ol { padding-left:30px; margin:0 0 1em; }
.sna-academy .fulldetail img { max-width:100%; height:auto; }
.sna-academy .fa-quote-left { position: absolute; top: 0; } .sna-academy .modal-overlay {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
background: rgba(20, 30, 10, 0.9);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
z-index: 100000;
display: flex;
align-items: center;
justify-content: center;
visibility: hidden;
opacity: 0;
transition: 0.2s;
pointer-events:none;
}
.sna-academy .modal-overlay.active { visibility: visible; opacity: 1; pointer-events:auto; }
.sna-academy .modal-container {
background: #ffffff;
width: 100%;
max-height: 100vh;
overflow-y: auto;
box-shadow: 0 40px 50px rgba(0, 0, 0, 0.3);
animation: snaFadeUp 0.25s ease;
}
@keyframes snaFadeUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.sna-academy .modal-header {
position: sticky;
top: 0;
background: white;
padding: 1rem 2rem;
border-bottom: 2px solid #e2f0da;
display: flex;
justify-content: space-between;
align-items: center;
gap:20px;
z-index: 10;
}
.sna-academy .modal-header h2 { font-size: 1.5rem; font-weight: 700; color: #20662c; margin:0; }
.sna-academy .close-modal { padding:0 ;background: none; border: none; font-size: 1.8rem; cursor: pointer; color: #7e9a72; transition: 0.2s; flex:0 0 auto; }
.sna-academy .close-modal:hover { color: #c73e3e; }
.sna-academy .modal-body { padding: 1rem; overflow-x: hidden; }
.sna-academy .detail-banner { width: 100%; max-height: 512px; object-fit: cover; border-radius: 1rem; margin-bottom: 1.5rem; display:block; }
.sna-academy .detail-full-text {
position: relative;
font-size: 1rem;
line-height: 1.6;
color: #2b4228;
margin-bottom: 2rem;
padding: 1rem 1.2rem;
border-radius: 1rem;
border-left: 5px solid #8bc47a;
}
.sna-academy .detail-full-text > .fa-quote-left { color:#7bbd63; margin-right:8px; }
.sna-academy .carousel-section { margin: 2rem 0; border-top: 1px solid #e1e1e1; padding-top: 20px; }
.sna-academy .carousel-section h3 {
font-size: 1.4rem;
font-weight: 700;
color: #2a6b35;
margin:0 0 1rem;
border-left: 5px solid #7bb461;
padding-left: 0.8rem;
display: flex;
align-items: center;
gap: 8px;
}
.sna-academy .swiper { padding: 0.5rem 0 2rem; overflow: visible; }
.sna-academy .modal-body > .swiper,
.sna-academy .carousel-section { overflow:hidden; }
.sna-academy .swiper-slide {
height: auto;
display: flex;
flex-direction: column;
background: #ffffff;
border-radius: 1rem;
overflow: hidden;
border: 1px solid #e3f0db;
transition: 0.2s;
}
.sna-academy .position-card-swiper { text-align: center; cursor: pointer; width:100%; }
.sna-academy .position-photo-swiper { width: 100%; height: 200px; object-fit: cover; background: #ddefcf; transition: 0.2s; display:block; }
.sna-academy .position-photo-swiper:hover { opacity: 0.9; transform: scale(1.01); }
.sna-academy .sna-position-meta { display:flex; justify-content:space-between; align-items:center; padding:10px; gap:8px; }
.sna-academy .position-title-swiper { font-weight: 700; font-size: 0.9rem; color: #2b5e2e; text-align:left; }
.sna-academy .position-title-swiper .fa-images { margin-left:6px; font-size:12px; }
.sna-academy .gallery-swiper-slide { cursor: pointer; border-radius: 1rem; overflow: hidden; }
.sna-academy .gallery-swiper-slide img { width: 100%; height: 250px; object-fit: cover; display: block; transition: 0.2s; }
.sna-academy .gallery-swiper-slide img:hover { transform: scale(1.02); }
.sna-academy .swiper-button-next,
.sna-academy .swiper-button-prev {
top: 40%;
color: #4f964b;
background: rgba(255, 255, 255, 0.8);
width: 34px;
height: 34px;
border-radius: 50%;
--swiper-navigation-size: 18px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.sna-academy .swiper-pagination-bullet-active { background: #4f964b; }
.sna-academy .footnote { font-size: 0.7rem; text-align: center; margin-top: 0.5rem; color: #7d9b70; }
.sna-academy hr { margin: 1rem 0; border:0; border-top:1px solid #dcf0d2; }
.sna-academy .role-badge { display: inline-flex; align-items:center; gap:4px; background: #eef1e6; font-size: 0.7rem; padding: 0.2rem 0.6rem; border-radius: 30px; white-space:nowrap; }
.sna-academy .image-caption { font-size: 0.75rem; text-align: center; padding: 0.4rem; color: #4a6741; background: #f9fdf6; border-top: 1px solid #e3f0db; font-weight: 500; }
.sna-academy .sna-photo-credit { font-size:0.75rem; color:#6a8e5e; text-align:center; margin-bottom:15px; }
.sna-academy .academy_item .swiper-slide { padding:8px; align-items:center; justify-content:center; border:0; }
.sna-academy .academy_item .readmore-btn { width:100%; }
.sna-academy .img-wrapper img { opacity:1; transition:opacity .25s ease; }
html.sna-modal-open, body.sna-modal-open { overflow:hidden !important; }
.fancybox__container { z-index: 200000 !important; }
@media (max-width: 768px) {
.sna-academy .detail-full-text { padding: 0 0 0 .5rem !important; }
.sna-academy .card-inner { padding: 1rem; }
.sna-academy .main-container { padding: 1.2rem; }
.sna-academy .timeline::after { left: 0; }
.sna-academy .timeline-item { width: 100%; padding-left: 18px; left: 0 !important; }
.sna-academy .timeline-item.right { padding-left: 1rem; }
.sna-academy .left .timeline-marker,
.sna-academy .right .timeline-marker { left: -10px; right: auto; }
.sna-academy .timeline-year-large { font-size: 1.6rem; }
.sna-academy .timeline-item.left { padding-right: 0; }
.sna-academy .timeline-card { margin-bottom: 1rem; }
.sna-academy .card-image,
.sna-academy .summary-banner { height: 200px; }
.sna-academy .fulldetail { max-width: 100%; margin: auto; text-align: justify; }
.sna-academy .fa-quote-left { position: absolute; top: 0; }
.sna-academy .academy-header { margin-bottom: 0; }
.sna-academy .gallery-swiper-slide img { height: 200px; }
.sna-academy .swiper-button-next,
.sna-academy .swiper-button-prev { display: none; }
.sna-academy .modal-header { padding:1rem; }
}
@media (max-width: 550px) {
.sna-academy .modal-body { padding: 1rem; }
.sna-academy .modal-header h2 { font-size: 1.2rem; }
.sna-academy .sna-card-top { align-items:flex-start; }
.sna-academy .sna-filters { align-items:stretch; }
.sna-academy .sna-filters input,
.sna-academy .sna-filters select,
.sna-academy .sna-filters .readmore-btn { width:100%; }
}
.sna-filters {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
padding: 1.5rem;
background: #f8f9fa;
border-radius: 8px;
align-items: center;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
} .sna-filter-search {
grid-column: span 2;
} .sna-filter-search,
.sna-filter-year,
.sna-filter-category {
padding: 0.75rem 1rem;
border: 2px solid #e0e0e0;
border-radius: 6px;
font-size: 1rem;
background: white;
transition: border-color 0.3s ease;
width: 100%;
min-width: 0;
}
.sna-filter-search:focus,
.sna-filter-year:focus,
.sna-filter-category:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
}
.sna-filter-reset {
padding: 0.75rem 1.5rem;
background: #007bff;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
transition: background 0.3s ease;
white-space: nowrap;
}
.sna-filter-reset:hover {
background: #0056b3;
} @media (max-width: 1024px) {
.sna-filter-search {
grid-column: span 1;
}
} @media (max-width: 768px) {
.sna-filters {
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
padding: 1rem;
}
.sna-filter-search {
grid-column: 1 / -1;
}
.sna-filter-reset {
grid-column: 1 / -1;
width: 100%;
text-align: center;
}
} @media (max-width: 480px) {
.sna-filters {
grid-template-columns: 1fr;
gap: 0.5rem;
padding: 0.75rem;
}
} .sna-academy .sna-cv-download { display:flex; justify-content:center; margin:0 0 2rem; }
.sna-academy .sna-download-cv { text-decoration:none; }
.sna-academy .sna-download-cv .sna-cv-file-label { font-size:.72rem; font-weight:500; opacity:.72; margin-left:4px; max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width: 550px) {
.sna-academy .sna-download-cv { width:100%; justify-content:center; }
.sna-academy .sna-download-cv .sna-cv-file-label { max-width:150px; }
}