148 lines
2.3 KiB
CSS
148 lines
2.3 KiB
CSS
body {
|
||
background-color: #f9f9f9;
|
||
}
|
||
|
||
.faq-section {
|
||
padding: 50px 0;
|
||
}
|
||
|
||
.faq-badge {
|
||
border: 1px solid #003588;
|
||
color: #003588;
|
||
padding: 6px 20px;
|
||
border-radius: 50px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.faq-title {
|
||
color: #121B2B;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.faq-wrapper {
|
||
max-width: 900px;
|
||
}
|
||
|
||
.faq-item {
|
||
background: #fff;
|
||
border-radius: 20px;
|
||
padding: 20px 25px;
|
||
margin-bottom: 20px;
|
||
text-align: left;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.faq-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.faq-header h5 {
|
||
margin: 0;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.faq-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
border: 1px solid #ccc;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 22px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.faq-body {
|
||
max-height: 0;
|
||
overflow: hidden;
|
||
transition: all 0.4s ease;
|
||
opacity: 0;
|
||
}
|
||
|
||
.faq-body p {
|
||
margin-top: 15px;
|
||
color: #555;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.faq-item.active .faq-body {
|
||
max-height: 500px;
|
||
opacity: 1;
|
||
}
|
||
|
||
.faq-item.active .faq-icon {
|
||
content: '−';
|
||
}
|
||
|
||
.list {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.faq-button {
|
||
border: 1px solid #fff;
|
||
color: #fff;
|
||
padding: 10px 25px;
|
||
border-radius: 50px;
|
||
text-decoration: none;
|
||
transition: 0.3s;
|
||
}
|
||
|
||
.faq-button:hover {
|
||
background: #fff;
|
||
color: #0b2a45;
|
||
}
|
||
|
||
.faq-btn-selengkapnya {
|
||
border: 1px solid white;
|
||
border-radius: 50px;
|
||
padding: 12px 30px;
|
||
color: white;
|
||
font-weight: 600;
|
||
transition: all 0.3s ease;
|
||
text-decoration: none;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.faq-btn-selengkapnya:hover {
|
||
background-color: #1a202c;
|
||
color: white;
|
||
}
|
||
|
||
|
||
.faq-tab {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 10px;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.tab {
|
||
padding: 6px 16px;
|
||
border-radius: 20px;
|
||
border: 1px solid #e5e7eb;
|
||
background: #f3f4f6;
|
||
cursor: pointer;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.tab.active {
|
||
background: #ffffff;
|
||
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
|
||
}
|
||
|
||
/* PANE */
|
||
.faq-pane {
|
||
display: none;
|
||
}
|
||
|
||
.faq-pane.active {
|
||
display: block;
|
||
}
|