163 lines
3.0 KiB
CSS
163 lines
3.0 KiB
CSS
/* Import Google Fonts - if not already imported in ourworld.css */
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');
|
|
|
|
/* Container styling */
|
|
.faq-container {
|
|
display: flex;
|
|
gap: 2rem;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 2rem;
|
|
}
|
|
|
|
/* Markdown content styling */
|
|
.markdown-content {
|
|
flex: 1;
|
|
padding-right: 2rem;
|
|
border-right: 1px solid #a4b6ba;
|
|
}
|
|
|
|
/* Base styles for markdown content */
|
|
.markdown-content {
|
|
font-family: 'Poppins', sans-serif;
|
|
font-weight: 200;
|
|
}
|
|
|
|
/* Heading styles */
|
|
.markdown-content h2,
|
|
.markdown-content h3 {
|
|
font-family: 'Poppins', sans-serif;
|
|
}
|
|
|
|
/* Light theme colors */
|
|
.light-theme .markdown-content h2,
|
|
.light-theme .markdown-content h3,
|
|
.light-theme .markdown-content p,
|
|
.light-theme .markdown-content ul,
|
|
.light-theme .markdown-content li {
|
|
color: #444444 !important;
|
|
}
|
|
|
|
/* Dark theme colors */
|
|
.markdown-content h2,
|
|
.markdown-content h3,
|
|
.markdown-content p,
|
|
.markdown-content ul,
|
|
.markdown-content li {
|
|
color: #cccccc !important;
|
|
}
|
|
|
|
.markdown-content h2 {
|
|
font-size: 1.5rem;
|
|
font-weight: 200;
|
|
line-height: 1.2;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.markdown-content h3 {
|
|
font-size: 1.2rem;
|
|
font-weight: 200;
|
|
line-height: 1.3;
|
|
margin-bottom: 0.8rem;
|
|
}
|
|
|
|
/* Regular text styles */
|
|
.markdown-content p,
|
|
.markdown-content ul,
|
|
.markdown-content li {
|
|
font-family: 'Roboto', sans-serif;
|
|
font-weight: 200;
|
|
}
|
|
|
|
/* Make list items and paragraphs consistent size */
|
|
.markdown-content p,
|
|
.markdown-content li {
|
|
font-size: 1rem;
|
|
line-height: 1.3;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
/* List specific styling */
|
|
.markdown-content ul {
|
|
padding-left: 1.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.markdown-content li {
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
/* FAQ section styling */
|
|
.faq-section {
|
|
flex: 1;
|
|
}
|
|
|
|
details {
|
|
border-bottom: 1px solid #ddd;
|
|
padding: 1em 0;
|
|
margin: 0;
|
|
}
|
|
|
|
summary {
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
outline: none;
|
|
}
|
|
|
|
.faq-section details summary {
|
|
color: #96989ead; /* ThreeFold blue color */
|
|
}
|
|
|
|
.faq-section details summary:before {
|
|
color: #2a2a2c; /* Makes the arrow icon match */
|
|
}
|
|
|
|
summary::marker {
|
|
display: none;
|
|
}
|
|
|
|
details[open] summary {
|
|
color: #000;
|
|
}
|
|
|
|
details p {
|
|
font-family: 'Roboto', sans-serif;
|
|
margin: 0.5em 0 0 0;
|
|
color: #666;
|
|
font-size: 1rem;
|
|
line-height: 1.6;
|
|
font-weight: 200;
|
|
}
|
|
|
|
summary:before {
|
|
content: "▶";
|
|
display: inline-block;
|
|
transform: rotate(0deg);
|
|
transition: transform 0.3s ease;
|
|
margin-right: 0.5em;
|
|
color: #000;
|
|
}
|
|
|
|
details[open] summary:before {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
/* Responsive design */
|
|
@media (max-width: 768px) {
|
|
.faq-container {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.markdown-content {
|
|
border-right: none;
|
|
border-bottom: 1px solid #ddd;
|
|
padding-right: 0;
|
|
padding-bottom: 2rem;
|
|
}
|
|
}
|