Page MenuHomeSealhub

faq-component.css
No OneTemporary

faq-component.css

.faq-component {
display: flex;
justify-content: center;
.container {
max-width: 1224px;
display: grid;
gap: 16px;
}
.title-container {
text-align: center;
display: grid;
gap: 16px;
}
.title {
font-size: 32px;
color: #0d4d69;
line-height: 38.3px;
}
.title-container .content p {
display: inline;
font-size: 16px;
color: #0d4d69;
line-height: 24px;
}
.title-container strong {
white-space: nowrap;
color: #0d4d69;
font-weight: bold;
}
.faq-container {
display: grid;
gap: 8px;
}
.question-container {
display: grid;
background-color: #cadae4;
border-radius: 10px;
padding: 0 16px;
/* padding: 16px; */
gap: 16px;
}
.question {
display: flex;
justify-content: space-between;
width: 100%;
font-size: 16px;
font-weight: bold;
cursor: pointer;
color: #0d4d69;
align-items: center;
padding: 16px 0;
line-height: 24px;
}
.question::after {
content: "\276C";
display: inline-block;
margin-left: 5px;
transform: rotate(-90deg);
transition: transform 0.3s ease;
}
.question-container[open] > .question::after {
transform: rotate(90deg);
}
.answer {
font-size: 16px;
color: #0d4d69;
line-height: 24px;
}
.answer p {
margin-top: 0;
white-space: pre-line;
}
.button-container {
display: flex;
justify-content: center;
}
.button {
text-align: center;
background-color: #0d4d69;
color: #ffffff;
font-size: 16px;
text-decoration: none;
padding: 8px 24px 8px 24px;
border-radius: 25px;
line-height: 24px;
}
}
@container (width < 500px) {
.faq-component {
.title {
font-size: 28px;
line-height: 33.52px;
}
.question {
font-size: 14px;
line-height: 21px;
padding: 10px 0;
}
.answer p {
font-size: 14px;
line-height: 21px;
}
.container {
gap: 24px;
}
.question-container {
gap: 8px;
}
}
}

File Metadata

Mime Type
text/plain
Expires
Sun, Nov 24, 02:18 (22 h, 34 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
548088
Default Alt Text
faq-component.css (1 KB)

Event Timeline