@layer base, theme;
@layer theme {
::selection {
background: #E30613;
color: #FFFFFF;
}
:root {
--paper: #FFFFFF;
--ink: #111111;
--muted: #616161;
--line: #E5E5E5;
--accent: #E30613;
--accent-ink: #FFFFFF;
--card: #FFFFFF;
--link: #B5000F;
--footer-bg: #111111;
--footer-ink: #F5F5F5;
--footer-muted: #B3B3B3;
--font-body: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
--font-heading: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
--radius: 6px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 32px;
--maxw-text: 720px;
--maxw-grid: 1140px;
}
[data-theme="dark"] {
--paper: #101010;
--ink: #F5F5F5;
--muted: #B3B3B3;
--line: #2B2B2B;
--accent: #E30613;
--accent-ink: #FFFFFF;
--card: #171717;
--link: #FF6B6B;
--footer-bg: #111111;
--footer-ink: #F5F5F5;
--footer-muted: #B3B3B3;
--font-body: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
--font-heading: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
--radius: 6px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 32px;
--maxw-text: 720px;
--maxw-grid: 1140px;
}
html {
background: var(--paper);
color: var(--ink);
font-family: var(--font-body);
}
body {
background: var(--paper);
color: var(--ink);
font-family: var(--font-body);
line-height: 1.7;
font-size: 16px;
}
a {
color: var(--link);
text-underline-offset: 2px;
}
a:hover {
color: var(--link);
text-decoration: underline;
}
.kicker {
color: var(--accent);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
margin: 0 0 8px;
}
h1, h2, h3 {
font-family: var(--font-heading);
color: var(--ink);
line-height: 1.2;
font-weight: 800;
}
.site-header {
background: var(--accent);
color: var(--accent-ink);
border-bottom: 1px solid var(--line);
}
.site-header>.header-inner {
background: transparent;
color: var(--accent-ink);
}
.site-header > .header-inner {
background: transparent;
color: var(--accent-ink);
}
.header-inner {
background: transparent;
color: var(--accent-ink);
}
.header-inner .brand {
color: var(--accent-ink);
font-family: var(--font-heading);
font-weight: 800;
font-size: 22px;
text-decoration: none;
}
.header-inner .brand .wordmark {
color: var(--accent-ink);
letter-spacing: 0.01em;
}
.header-inner .brand img {
border-radius: 6px;
}
.header-inner .brand .tagline {
color: var(--accent-ink);
opacity: 0.6;
font-size: 13px;
font-weight: 400;
}
.nav {
background: transparent;
color: var(--accent-ink);
font-size: 15px;
}
.nav a {
color: var(--accent-ink);
font-size: 15px;
}
#themeBtn.theme-btn {
background: transparent;
color: var(--accent-ink);
border: 1px solid var(--accent-ink);
border-radius: var(--radius);
padding: 4px 10px;
font-size: 14px;
cursor: pointer;
}
input#navToggle.burger-check+label.burger {
background: transparent;
color: var(--accent-ink);
border-top: 2px solid var(--accent-ink);
border-bottom: 2px solid var(--accent-ink);
}
input#navToggle.burger-check + label.burger {
background: transparent;
color: var(--accent-ink);
border-top: 2px solid var(--accent-ink);
border-bottom: 2px solid var(--accent-ink);
}
.burger-check {
accent-color: var(--accent);
}
.burger {
background: transparent;
color: var(--accent-ink);
border-top: 2px solid var(--accent-ink);
border-bottom: 2px solid var(--accent-ink);
}
.burger span {
background: var(--accent-ink);
}
.burger::before {
content: "";
display: block;
width: 22px;
height: 2px;
margin: 0 auto;
background: var(--accent-ink);
}
.hero {
background: var(--paper);
color: var(--ink);
padding-top: var(--space-lg);
padding-bottom: var(--space-lg);
}
.hero h1 {
font-size: 30px;
font-weight: 800;
line-height: 1.2;
color: var(--ink);
}
.hero p {
color: var(--muted);
}
.hero-img {
background: var(--card);
color: var(--ink);
border: 1px solid var(--line);
border-radius: 16px;
}
.section {
background: var(--paper);
color: var(--ink);
padding-top: var(--space-md);
padding-bottom: var(--space-md);
}
.section h2 {
border-left: 4px solid var(--accent);
padding-left: var(--space-sm);
font-weight: 800;
color: var(--ink);
}
.tile-grid {
background: transparent;
color: var(--ink);
}
.cat-tile {
background: var(--card);
color: var(--ink);
border: 1px solid var(--line);
border-radius: var(--radius);
}
.excerpt.tile {
background: var(--card);
color: var(--ink);
border: 1px solid var(--line);
border-radius: var(--radius);
}
.excerpt.tile[hidden] {
background: var(--card);
color: var(--ink);
border: 1px solid var(--line);
border-radius: var(--radius);
}
.excerpt.tile[hidden]>.tile-img+.tile-kicker+.tile-title+.tile-desc {
color: var(--ink);
}
.excerpt.tile>.tile-img {
background: var(--card);
}
.excerpt.tile>.tile-kicker {
color: var(--accent);
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
}
.excerpt.tile>.tile-title {
color: var(--ink);
font-size: 17px;
font-weight: 800;
line-height: 1.2;
}
.excerpt.tile>.tile-desc {
color: var(--muted);
font-size: 16px;
}
.tile-img {
background: var(--card);
border-radius: var(--radius);
}
.tile-kicker {
color: var(--accent);
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
}
.tile-kicker--plain {
color: var(--muted);
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
}
.tile-title {
color: var(--ink);
font-size: 17px;
font-weight: 800;
line-height: 1.2;
}
.tile-title a {
color: var(--ink);
text-decoration: none;
}
.tile-title a:hover {
text-decoration: underline;
}
.excerpt.tile .tile-img, .cat-tile .tile-img {
border-bottom: 1px solid var(--line);
}
.tile-desc {
color: var(--muted);
font-size: 16px;
}
.cat-tile>.tile-img {
background: var(--card);
}
.cat-tile>.tile-kicker {
color: var(--accent);
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
}
.cat-tile>.tile-title {
color: var(--ink);
font-size: 17px;
font-weight: 800;
}
.cat-tile>.tile-desc {
color: var(--muted);
}
#moreBtn.more-btn {
background: var(--card);
color: var(--link);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 10px 18px;
font-size: 15px;
cursor: pointer;
}
.cta-band {
background: var(--accent);
color: var(--accent-ink);
}
.cta-band>.cta-inner {
background: transparent;
color: var(--accent-ink);
}
.cta-band>.cta-inner+.cta-btn {
background: transparent;
color: var(--accent-ink);
}
.cta-inner {
background: transparent;
color: var(--accent-ink);
}
.cta-inner h2 {
color: var(--accent-ink);
font-weight: 800;
}
.cta-inner p {
color: var(--accent-ink);
}
.cta-btn {
background: var(--accent-ink);
color: var(--accent);
border: 1px solid var(--accent-ink);
border-radius: var(--radius);
padding: 10px 18px;
font-weight: 800;
text-decoration: none;
}
.cta-btn:hover {
text-decoration: underline;
}
.cta-band .cta-btn {
background: var(--accent-ink);
color: var(--accent);
}
details.toc {
background: var(--card);
color: var(--ink);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: var(--space-md);
}
details.toc summary {
color: var(--ink);
font-weight: 800;
cursor: pointer;
}
.faq-item {
background: transparent;
color: var(--ink);
border-bottom: 1px solid var(--line);
}
.faq-item summary {
color: var(--ink);
font-weight: 800;
cursor: pointer;
}
ol.crumbs {
background: transparent;
color: var(--muted);
font-size: 13px;
}
ol.crumbs a {
color: var(--muted);
}
ol.crumbs [aria-current="page"] {
color: var(--muted);
}
ul.sitemap-list {
background: transparent;
color: var(--ink);
}
ul.sitemap-list a {
color: var(--link);
}
.post-body {
background: var(--paper);
color: var(--ink);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.7;
}
.post-body h1 {
font-size: 30px;
font-weight: 800;
line-height: 1.2;
color: var(--ink);
}
.post-body h2 {
color: var(--ink);
font-weight: 800;
}
.post-body a {
color: var(--link);
}
.post-body>img.post-img {
border-radius: 16px;
border: 1px solid var(--line);
}
img.post-img {
border-radius: 16px;
border: 1px solid var(--line);
}
.post-img {
border-radius: 16px;
border: 1px solid var(--line);
}
.contact-card {
background: var(--card);
color: var(--ink);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: var(--space-md);
}
.contact-card a {
color: var(--link);
}
.contact-card .cta-btn {
background: var(--accent-ink);
color: var(--accent);
}
.site-footer {
background: var(--footer-bg);
color: var(--footer-ink);
border-top: 4px solid var(--accent);
}
.site-footer>.footer-inner>.fcol {
background: transparent;
color: var(--footer-ink);
}
.site-footer > .footer-inner > .fcol {
background: transparent;
color: var(--footer-ink);
}
.footer-inner {
background: transparent;
color: var(--footer-ink);
}
.fcol {
background: transparent;
color: var(--footer-ink);
}
.fcol h3 {
color: var(--footer-ink);
font-weight: 800;
}
.fcol a {
color: var(--footer-muted);
}
.fcol p {
color: var(--footer-muted);
}
.blog-order {
counter-reset: guide;
}
.blog-order .excerpt.tile .tile-title::before {
counter-increment: guide;
content: counter(guide);
color: var(--muted);
font-weight: 800;
}
@media (max-width: 767px) {
.hero h1 {
font-size: 24px;
}
.post-body h1 {
font-size: 24px;
}
}
}