@layer base, theme;
@layer base {
*, *::before, *::after {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
body {
line-height: 1.7;
margin: 0;
}
img {
max-width: 100%;
height: auto;
}
main {
display: block;
max-width: 1140px;
margin-left: auto;
margin-right: auto;
padding: 24px 16px 40px;
}
.site-header > .header-inner {
max-width: 1140px;
margin-left: auto;
margin-right: auto;
padding-left: 16px;
padding-right: 16px;
display: flex;
align-items: center;
gap: 16px;
min-height: 60px;
}
.brand {
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
margin-right: auto;
}
.brand img {
flex: none;
}
.nav {
display: flex;
align-items: center;
gap: 16px;
margin-left: auto;
}
.burger-check {
position: absolute;
opacity: 0;
pointer-events: none;
}
.burger {
display: none;
cursor: pointer;
padding: 8px;
width: 40px;
text-align: center;
}
.burger span {
display: block;
width: 22px;
height: 2px;
margin: 5px auto;
}
.hero-img {
display: block;
width: 100%;
}
.tile-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.cat-tile, .excerpt.tile {
display: flex;
flex-direction: column;
overflow: hidden;
}
.cat-tile .tile-img, .excerpt.tile .tile-img {
display: block;
width: 100%;
aspect-ratio: 1200 / 630;
object-fit: cover;
}
.excerpt.tile > p:first-child {
margin: 0;
}
.excerpt.tile .tile-kicker, .excerpt.tile .tile-title, .excerpt.tile .tile-desc {
margin: 0;
padding-left: 16px;
padding-right: 16px;
}
.excerpt.tile .tile-kicker {
padding-top: 12px;
}
.excerpt.tile .tile-desc {
padding-bottom: 16px;
}
.section {
padding-top: 16px;
padding-bottom: 16px;
}
.post-body {
margin-left: auto;
margin-right: auto;
max-width: 100%;
}
.post-body:not(:has(.tile-grid)) {
max-width: 720px;
}
.post-body > img.post-img, img.post-img, .post-img {
aspect-ratio: 1200 / 630;
object-fit: cover;
}
.post-body > img.post-img, img.post-img, .post-img {
display: block;
width: 100%;
border-radius: 16px;
}
.tile[hidden] {
display: none;
}
details.toc, .faq-item {
display: block;
}
details.toc summary, .faq-item summary {
display: list-item;
cursor: pointer;
}
h1 {
margin: 0 0 16px;
text-wrap: balance;
}
ol.crumbs {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 16px;
padding: 0;
}
ul.sitemap-list {
margin: 0;
padding-left: 20px;
}
.sitemap-list li {
margin-bottom: 6px;
}
details.toc {
margin: 16px 0 24px;
}
details.toc ul {
margin: 8px 0 0;
padding-left: 20px;
}
details.toc li {
margin-bottom: 4px;
}
.faq-item {
padding: 12px 0;
}
.faq-item p {
margin: 8px 0 16px;
}
.site-footer > .footer-inner {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
max-width: 1140px;
margin-left: auto;
margin-right: auto;
padding: 32px 16px;
}
.fcol {
min-width: 0;
}
.fcol ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.contact-card {
padding: 16px;
}
.cta-band > .cta-inner {
max-width: 720px;
margin-left: auto;
margin-right: auto;
padding: 32px 16px;
text-align: center;
}
.cta-btn {
display: inline-block;
text-decoration: none;
margin-top: 12px;
}
#moreBtn.more-btn {
display: inline-block;
margin-left: auto;
margin-right: auto;
}
input.burger-check + label.burger + .nav, input#navToggle.burger-check + label.burger + .nav {
order: 3;
}
@media (max-width: 768px) {
.site-header > .header-inner {
flex-wrap: wrap;
}
.burger {
display: block;
}
.nav {
display: none;
width: 100%;
flex-direction: column;
align-items: flex-start;
}
.burger-check:checked + .burger + .nav, input#navToggle.burger-check:checked + label.burger + .nav {
display: flex;
}
.tile-grid {
grid-template-columns: 1fr;
}
.site-footer > .footer-inner {
grid-template-columns: 1fr;
}
}
}