:root { --clr-primary:      #2563eb; --clr-primary-dark: #1d4ed8;
--clr-primary-pale: #eff6ff;
--clr-accent:       #6366f1; --clr-dark:         #0f172a; --clr-heading:      #1e293b;
--clr-body:         #334155;
--clr-muted:        #64748b;
--clr-border:       #e2e8f0;
--clr-border-light: #f1f5f9;
--clr-bg:           #f8fafc;
--clr-surface:      #ffffff;
--clr-nav-bg:       #1e3a8a;
--clr-footer-bg:    #0f172a; --font-ui:      'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
--font-body:    'Source Serif 4', Georgia, serif; --max-width:   1240px;
--radius-sm:   6px;
--radius-md:   12px;
--radius-lg:   18px;
--shadow-card: 0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04);
--shadow-hover: 0 4px 20px rgba(0,0,0,.10);
--transition:  0.2s ease;
} *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-ui);
background: var(--clr-bg);
color: var(--clr-body);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
img {
max-width: 100%;
height: auto;
display: block; }
a {
color: var(--clr-primary);
text-decoration: none;
transition: color var(--transition);
}
a:hover { color: var(--clr-primary-dark); }
ul, ol { list-style: none; } .screen-reader-text {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
} .site-container {
max-width: var(--max-width);
margin: 0 auto;
padding: 24px 20px 40px;
width: 100%;
}
.content-sidebar-wrap {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 36px;
align-items: start;
margin-top: 36px;
} .site-header {
background: var(--clr-surface);
border-bottom: 1px solid var(--clr-border);
box-shadow: 0 1px 8px rgba(0,0,0,.05);
position: sticky;
top: 0;
z-index: 1000;
width: 100%;
}
.header-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 14px 20px;
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
} .site-logo { display: flex; align-items: center; flex-shrink: 0; }
.site-logo svg { display: block; }
.site-logo:hover { opacity: .85; transition: opacity var(--transition); } .header-search {
display: flex;
align-items: center;
background: var(--clr-border-light);
border: 1.5px solid var(--clr-border);
border-radius: 999px;
padding: 4px 6px 4px 16px;
flex: 1;
max-width: 380px;
transition: border-color var(--transition), box-shadow var(--transition);
margin-left: auto;
}
.header-search:focus-within {
border-color: var(--clr-primary);
box-shadow: 0 0 0 3px rgba(37,99,235,.12);
background: var(--clr-surface);
}
.search-input {
border: none;
background: transparent;
font-family: var(--font-ui);
font-size: 13.5px;
color: var(--clr-heading);
width: 100%;
outline: none;
padding: 4px 0;
}
.search-input::placeholder { color: var(--clr-muted); }
.search-btn {
background: var(--clr-primary);
border: none;
border-radius: 999px;
width: 34px; height: 34px;
display: flex; align-items: center; justify-content: center;
color: #fff;
cursor: pointer;
flex-shrink: 0;
transition: background var(--transition);
}
.search-btn:hover { background: var(--clr-primary-dark); }
.search-btn svg { flex-shrink: 0; } .nav-toggle {
display: none;
flex-direction: column;
gap: 5px;
background: transparent;
border: none;
cursor: pointer;
padding: 6px;
flex-shrink: 0;
}
.hamburger-bar {
display: block;
width: 24px; height: 2.5px;
background: var(--clr-nav-bg);
border-radius: 2px;
transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle.is-open .hamburger-bar:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle.is-open .hamburger-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.is-open .hamburger-bar:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } .nav-bar {
background: var(--clr-nav-bg);
width: 100%;
}
.nav-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 20px;
}
.nav-menu { display: flex; flex-wrap: wrap; }
.nav-menu li { position: relative; }
.nav-menu > li > a {
display: block;
padding: 13px 18px;
color: rgba(255,255,255,.85);
font-family: var(--font-ui);
font-size: 13px;
font-weight: 600;
letter-spacing: .4px;
text-transform: uppercase;
border-bottom: 3px solid transparent;
transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.nav-menu > li > a:hover,
.nav-menu > li.current-menu-item > a,
.nav-menu > li.current-menu-ancestor > a {
color: #fff;
border-bottom-color: #60a5fa;
background: rgba(255,255,255,.05);
} .featured-section { margin-bottom: 8px; }
.featured-grid {
display: grid;
grid-template-columns: 1fr 380px;
gap: 16px;
height: 480px;
} .featured-hero {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--clr-dark);
transform: translateZ(0);
will-change: transform;
}
.featured-img-link {
position: absolute;
inset: 0;
display: block;
}
.featured-img {
width: 100%; height: 100%;
object-fit: cover;
opacity: .65;
transition: transform .35s ease-out, opacity .25s ease-out;
will-change: transform, opacity;
}
.featured-hero:hover .featured-img { transform: scale(1.04); opacity: .75; }
.featured-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(10,20,50,.90) 0%,
rgba(10,20,50,.50) 50%,
transparent 100%
);
pointer-events: none;
}
.featured-body {
position: absolute;
bottom: 0; left: 0;
padding: 28px 28px 32px;
width: 100%;
z-index: 2;
}
.feat-cat-badge {
display: inline-block;
background: var(--clr-primary);
color: #fff;
font-family: var(--font-ui);
font-size: 10px;
font-weight: 700;
letter-spacing: .8px;
text-transform: uppercase;
padding: 4px 10px;
border-radius: var(--radius-sm);
margin-bottom: 10px;
transition: background var(--transition);
}
.feat-cat-badge:hover { background: #3b82f6; color: #fff; }
.feat-cat-sm { font-size: 9px; padding: 3px 8px; margin-bottom: 6px; }
.featured-title {
font-family: var(--font-heading);
font-size: 26px;
font-weight: 700;
line-height: 1.3;
color: #fff;
margin-bottom: 10px;
letter-spacing: -.3px;
}
.featured-title a { color: #fff; }
.featured-title a:hover { color: #bfdbfe; }
.featured-excerpt {
font-family: var(--font-ui);
font-size: 14px;
color: rgba(255,255,255,.80);
line-height: 1.6;
margin-bottom: 12px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.featured-date {
font-family: var(--font-ui);
font-size: 12px;
color: rgba(255,255,255,.60);
font-weight: 500;
} .featured-stack {
display: flex;
flex-direction: column;
gap: 12px;
}
.featured-mini {
position: relative;
border-radius: var(--radius-md);
overflow: hidden;
background: var(--clr-dark);
flex: 1;
min-height: 0;
transform: translateZ(0);
}
.mini-img-link { position: absolute; inset: 0; display: block; }
.mini-img {
width: 100%; height: 100%;
object-fit: cover;
opacity: .6;
transition: transform .3s ease-out, opacity .2s ease-out;
will-change: transform;
}
.featured-mini:hover .mini-img { transform: scale(1.04); opacity: .75; }
.mini-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(10,20,50,.88) 0%,
rgba(10,20,50,.4) 55%,
transparent 100%
);
pointer-events: none;
}
.mini-body {
position: absolute;
bottom: 0; left: 0;
padding: 14px 16px 16px;
width: 100%;
z-index: 2;
}
.mini-title {
font-family: var(--font-heading);
font-size: 14px;
font-weight: 600;
line-height: 1.35;
color: #fff;
margin-bottom: 4px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.mini-title a { color: #fff; }
.mini-title a:hover { color: #bfdbfe; }
.mini-date {
font-family: var(--font-ui);
font-size: 11px;
color: rgba(255,255,255,.55);
} .section-header {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 20px;
}
.section-title {
font-family: var(--font-ui);
font-size: 13px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--clr-primary);
white-space: nowrap;
}
.section-rule {
flex: 1;
height: 1.5px;
background: var(--clr-border);
display: block;
} .post-list { display: flex; flex-direction: column; gap: 1px; }
.post-card {
display: flex;
gap: 20px;
background: var(--clr-surface);
border-radius: var(--radius-md);
border: 1px solid var(--clr-border);
box-shadow: var(--shadow-card);
overflow: hidden;
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
margin-bottom: 14px;
}
.post-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-hover);
border-color: #bfdbfe;
}
.post-card-img-link { flex-shrink: 0; display: block; }
.post-card-img-wrap {
width: 200px; height: 140px;
overflow: hidden;
background: var(--clr-border-light);
}
.post-card-img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform .3s ease-out;
}
.post-card:hover .post-card-img { transform: scale(1.04); }
.post-card-body {
padding: 18px 20px 18px 0;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
flex: 1;
}
.post-card-cat {
display: inline-block;
font-family: var(--font-ui);
font-size: 10px;
font-weight: 700;
letter-spacing: .7px;
text-transform: uppercase;
color: var(--clr-primary);
background: var(--clr-primary-pale);
padding: 3px 8px;
border-radius: 4px;
margin-bottom: 8px;
width: fit-content;
}
.post-card-cat:hover { background: var(--clr-primary); color: #fff; }
.post-card-title {
font-family: var(--font-heading);
font-size: 19px;
font-weight: 700;
line-height: 1.35;
margin-bottom: 8px;
color: var(--clr-heading);
letter-spacing: -.2px;
}
.post-card-title a { color: var(--clr-heading); }
.post-card-title a:hover { color: var(--clr-primary); }
.post-card-excerpt {
font-family: var(--font-ui);
font-size: 14px;
color: var(--clr-muted);
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 12px;
}
.post-card-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.post-card-date {
display: flex;
align-items: center;
gap: 5px;
font-family: var(--font-ui);
font-size: 12px;
color: var(--clr-muted);
}
.post-card-read {
font-family: var(--font-ui);
font-size: 12px;
font-weight: 600;
color: var(--clr-primary);
}
.post-card-read:hover { color: var(--clr-primary-dark); }
.no-posts {
font-family: var(--font-ui);
font-size: 15px;
color: var(--clr-muted);
padding: 30px;
text-align: center;
} .pagination-wrap { margin-top: 24px; }
.pagination-wrap .page-numbers {
display: inline-flex;
flex-wrap: wrap;
gap: 6px;
list-style: none;
padding: 0;
}
.pagination-wrap .page-numbers li { display: inline; }
.pagination-wrap .page-numbers a,
.pagination-wrap .page-numbers span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px; height: 36px;
padding: 0 10px;
border-radius: var(--radius-sm);
font-family: var(--font-ui);
font-size: 13px;
font-weight: 600;
border: 1.5px solid var(--clr-border);
background: var(--clr-surface);
color: var(--clr-heading);
transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.pagination-wrap .page-numbers a:hover {
background: var(--clr-primary-pale);
border-color: var(--clr-primary);
color: var(--clr-primary);
}
.pagination-wrap .page-numbers .current {
background: var(--clr-primary);
border-color: var(--clr-primary);
color: #fff;
} .single-article {
background: var(--clr-surface);
border-radius: var(--radius-lg);
border: 1px solid var(--clr-border);
overflow: hidden;
box-shadow: var(--shadow-card);
}
.single-header {
padding: 36px 40px 0;
}
.single-cats {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 16px;
}
.single-cat-badge {
display: inline-block;
font-family: var(--font-ui);
font-size: 10px;
font-weight: 700;
letter-spacing: .8px;
text-transform: uppercase;
background: var(--clr-primary-pale);
color: var(--clr-primary);
padding: 4px 10px;
border-radius: 4px;
transition: background var(--transition), color var(--transition);
}
.single-cat-badge:hover { background: var(--clr-primary); color: #fff; }
.single-title {
font-family: var(--font-heading);
font-size: 32px;
font-weight: 800;
line-height: 1.25;
color: var(--clr-dark);
letter-spacing: -.5px;
margin-bottom: 18px;
}
.single-meta {
display: flex;
align-items: center;
gap: 20px;
padding-bottom: 24px;
border-bottom: 1px solid var(--clr-border-light);
}
.single-meta-item {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--font-ui);
font-size: 13px;
color: var(--clr-muted);
}
.single-meta-item time { font-weight: 500; } .single-cover-wrap {
width: 100%;
aspect-ratio: 16/7;
overflow: hidden;
background: var(--clr-border-light);
margin: 0;
}
.single-cover-img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
} .single-content {
padding: 36px 40px;
font-family: var(--font-body);
font-size: 18px;
color: var(--clr-heading);
line-height: 1.9;
font-weight: 400;
}
.single-content p { margin-bottom: 26px; }
.single-content h2 {
font-family: var(--font-heading);
font-size: 26px;
font-weight: 700;
color: var(--clr-dark);
margin: 44px 0 16px;
letter-spacing: -.3px;
line-height: 1.25;
}
.single-content h3 {
font-family: var(--font-heading);
font-size: 22px;
font-weight: 700;
color: var(--clr-dark);
margin: 36px 0 14px;
line-height: 1.3;
}
.single-content h4 {
font-family: var(--font-ui);
font-size: 16px;
font-weight: 700;
color: var(--clr-heading);
margin: 28px 0 10px;
}
.single-content a { color: var(--clr-primary); border-bottom: 1px solid transparent; }
.single-content a:hover { border-bottom-color: var(--clr-primary); }
.single-content img {
max-width: 100%;
height: auto;
border-radius: var(--radius-md);
margin: 28px auto;
display: block;
}
.single-content blockquote {
border-left: 4px solid var(--clr-primary);
background: var(--clr-primary-pale);
padding: 18px 24px;
margin: 28px 0;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
font-style: italic;
color: var(--clr-heading);
}
.single-content ul, .single-content ol {
padding-left: 24px;
margin-bottom: 24px;
}
.single-content ul { list-style: disc; }
.single-content ol { list-style: decimal; }
.single-content li { margin-bottom: 8px; }
.single-content strong { font-weight: 700; color: var(--clr-dark); }
.single-content code {
background: var(--clr-border-light);
padding: 2px 6px;
border-radius: 4px;
font-family: 'Fira Code', 'Courier New', monospace;
font-size: 15px;
}
.single-content pre {
background: var(--clr-dark);
color: #e2e8f0;
padding: 20px 24px;
border-radius: var(--radius-md);
overflow-x: auto;
margin: 28px 0;
font-size: 14px;
line-height: 1.7;
}
.single-content pre code { background: none; padding: 0; color: inherit; } .single-content iframe,
.single-content embed,
.single-content object {
max-width: 100%;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
border-radius: var(--radius-md);
display: block;
margin: 28px 0;
} .single-content .wp-block-embed,
.single-content figure.wp-block-embed {
max-width: 100%;
width: 100%;
margin: 28px 0;
border-radius: var(--radius-md);
overflow: hidden;
}
.single-content .wp-block-embed__wrapper {
max-width: 100%;
width: 100%;
} .single-content .wp-block-embed__wrapper iframe {
max-width: 100% !important;
border-radius: var(--radius-md);
margin: 0;
} .single-content .wp-video,
.single-content .wp-audio {
max-width: 100% !important;
width: 100% !important;
} .single-tags {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 20px 40px 24px;
border-top: 1px solid var(--clr-border-light);
font-family: var(--font-ui);
font-size: 13px;
}
.tags-label {
display: flex;
align-items: center;
gap: 5px;
color: var(--clr-muted);
font-weight: 600;
}
.single-tags a {
background: var(--clr-border-light);
color: var(--clr-body);
padding: 5px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 500;
border: 1px solid var(--clr-border);
transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.single-tags a:hover { background: var(--clr-primary); color: #fff; border-color: var(--clr-primary); } .single-post-nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border-top: 1px solid var(--clr-border-light);
margin: 0 0 0;
}
.nav-prev, .nav-next {
padding: 20px 30px;
display: flex;
flex-direction: column;
gap: 6px;
}
.nav-next {
text-align: right;
border-left: 1px solid var(--clr-border-light);
align-items: flex-end;
}
.nav-dir {
font-family: var(--font-ui);
font-size: 11px;
font-weight: 700;
letter-spacing: .8px;
text-transform: uppercase;
color: var(--clr-muted);
}
.nav-post-title {
font-family: var(--font-ui);
font-size: 14px;
font-weight: 600;
color: var(--clr-heading);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.nav-post-title:hover { color: var(--clr-primary); }
.nav-placeholder {
font-family: var(--font-ui);
font-size: 13px;
color: var(--clr-muted);
} .sidebar { display: flex; flex-direction: column; gap: 24px; }
.widget {
background: var(--clr-surface);
border-radius: var(--radius-md);
border: 1px solid var(--clr-border);
box-shadow: var(--shadow-card);
overflow: hidden;
}
.widget-head {
padding: 16px 20px 14px;
border-bottom: 1px solid var(--clr-border-light);
}
.widget-title {
font-family: var(--font-ui);
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--clr-heading);
display: flex;
align-items: center;
gap: 7px;
}
.widget-title svg { color: var(--clr-primary); flex-shrink: 0; }
.widget-empty {
padding: 16px 20px;
font-size: 13px;
color: var(--clr-muted);
} .popular-list { padding: 10px 0; }
.popular-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px;
border-bottom: 1px solid var(--clr-border-light);
transition: background var(--transition);
}
.popular-item:last-child { border-bottom: none; }
.popular-item:hover { background: var(--clr-border-light); }
.popular-rank {
font-family: var(--font-ui);
font-size: 18px;
font-weight: 800;
color: #c8d5e8;
min-width: 20px;
text-align: center;
line-height: 1;
flex-shrink: 0;
}
.popular-item:hover .popular-rank { color: var(--clr-primary); }
.popular-img-link { flex-shrink: 0; display: block; }
.popular-img {
width: 60px; height: 60px;
border-radius: var(--radius-sm);
object-fit: cover;
display: block;
}
.popular-info { min-width: 0; flex: 1; }
.popular-title {
display: block;
font-family: var(--font-ui);
font-size: 13px;
font-weight: 600;
color: var(--clr-heading);
line-height: 1.4;
margin-bottom: 4px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.popular-title:hover { color: var(--clr-primary); }
.popular-date {
font-family: var(--font-ui);
font-size: 11px;
color: var(--clr-muted);
} .cats-list {
padding: 10px 0;
}
.cats-list li {
border-bottom: 1px solid var(--clr-border-light);
}
.cats-list li:last-child { border-bottom: none; }
.cats-list li a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 18px;
font-family: var(--font-ui);
font-size: 13.5px;
font-weight: 500;
color: var(--clr-body);
transition: background var(--transition), color var(--transition);
}
.cats-list li a:hover {
background: var(--clr-primary-pale);
color: var(--clr-primary);
}
.cats-list li a .post-count {
font-size: 11px;
background: var(--clr-border-light);
color: var(--clr-muted);
padding: 2px 7px;
border-radius: 999px;
font-weight: 600;
} .site-footer {
background: var(--clr-footer-bg);
color: #94a3b8;
margin-top: 60px;
border-top: 3px solid var(--clr-nav-bg);
width: 100%;
}
.footer-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 48px 24px 36px;
display: grid;
grid-template-columns: 1fr auto;
gap: 40px;
align-items: start;
}
.footer-logo-link { display: block; margin-bottom: 10px; opacity: .9; }
.footer-logo-link:hover { opacity: 1; }
.footer-tagline {
font-family: var(--font-ui);
font-size: 13px;
color: #64748b;
line-height: 1.5;
max-width: 320px;
}
.footer-nav-list {
display: flex;
flex-direction: column;
gap: 4px;
list-style: none;
padding: 0;
}
.footer-nav-list li a {
font-family: var(--font-ui);
font-size: 13px;
font-weight: 500;
color: #64748b;
padding: 4px 0;
display: block;
transition: color var(--transition);
}
.footer-nav-list li a:hover { color: #e2e8f0; }
.footer-bottom {
max-width: var(--max-width);
margin: 0 auto;
padding: 16px 24px;
border-top: 1px solid rgba(255,255,255,.07);
font-family: var(--font-ui);
font-size: 12px;
color: #475569;
text-align: center;
}
.footer-bottom a { color: #64748b; }
.footer-bottom a:hover { color: #94a3b8; }  img[data-src],
img[data-lazy-src],
img.lazy {
min-height: 1px; background: var(--clr-border-light);
}  .comments-area {
padding: 32px 40px;
border-top: 1px solid var(--clr-border-light);
}
.comments-title, .comment-reply-title {
font-family: var(--font-ui);
font-size: 16px;
font-weight: 700;
color: var(--clr-heading);
margin-bottom: 20px;
}
.comment-list { list-style: none; padding: 0; }
.comment { padding: 16px 0; border-bottom: 1px solid var(--clr-border-light); }
.comment-author .fn {
font-family: var(--font-ui);
font-size: 14px;
font-weight: 700;
color: var(--clr-heading);
}
.comment-content p {
font-family: var(--font-ui);
font-size: 14px;
color: var(--clr-body);
margin-top: 6px;
line-height: 1.65;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
width: 100%;
border: 1.5px solid var(--clr-border);
border-radius: var(--radius-sm);
padding: 10px 14px;
font-family: var(--font-ui);
font-size: 14px;
color: var(--clr-heading);
background: var(--clr-bg);
transition: border-color var(--transition);
outline: none;
margin-bottom: 12px;
}
.comment-form input:focus,
.comment-form textarea:focus {
border-color: var(--clr-primary);
background: var(--clr-surface);
}
.comment-form textarea { min-height: 100px; resize: vertical; }
.comment-form .submit {
background: var(--clr-primary);
color: #fff;
border: none;
padding: 10px 24px;
border-radius: var(--radius-sm);
font-family: var(--font-ui);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background var(--transition);
}
.comment-form .submit:hover { background: var(--clr-primary-dark); } @media (max-width: 1024px) {
.featured-grid {
grid-template-columns: 1fr;
height: auto;
}
.featured-hero { height: 360px; }
.featured-stack {
flex-direction: row;
height: 200px;
}
.featured-mini { flex: 1; }
.content-sidebar-wrap {
grid-template-columns: minmax(0, 1fr) 280px;
gap: 24px;
}
} @media (max-width: 768px) { .header-inner {
padding: 12px 16px;
flex-wrap: nowrap;
gap: 10px;
}
.site-logo svg { width: 160px; height: 32px; }
.header-search {
display: none; }
.nav-toggle {
display: flex;
margin-left: auto;
} .nav-bar {
display: none;
position: absolute;
top: 100%;
left: 0; right: 0;
z-index: 999;
box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.nav-bar.is-open { display: block; }
.nav-menu { flex-direction: column; }
.nav-menu > li > a {
padding: 14px 20px;
border-bottom: 1px solid rgba(255,255,255,.08);
font-size: 14px;
} .site-container { padding: 16px 14px 32px; } .featured-hero { height: 260px; }
.featured-title { font-size: 20px; }
.featured-excerpt { display: none; }
.featured-stack {
flex-direction: column;
height: auto;
gap: 10px;
}
.featured-mini { height: 140px; }
.mini-title { font-size: 13px; } .content-sidebar-wrap {
grid-template-columns: 1fr;
gap: 28px;
margin-top: 24px;
} .post-card {
flex-direction: column;
}
.post-card-img-link { display: block; }
.post-card-img-wrap {
width: 100%;
height: 190px;
}
.post-card-body {
padding: 14px 16px 16px;
}
.post-card-title { font-size: 17px; } .single-header { padding: 22px 18px 0; }
.single-title { font-size: 24px; }
.single-cover-wrap { aspect-ratio: 16/9; }
.single-content {
padding: 22px 18px;
font-size: 17px;
}
.single-content h2 { font-size: 22px; }
.single-content h3 { font-size: 19px; }
.single-tags { padding: 16px 18px 20px; }
.single-post-nav { grid-template-columns: 1fr; }
.nav-next {
border-left: none;
border-top: 1px solid var(--clr-border-light);
text-align: left;
align-items: flex-start;
}
.comments-area { padding: 22px 18px; } .footer-inner {
grid-template-columns: 1fr;
gap: 24px;
padding: 36px 18px 28px;
}
.footer-nav-list { flex-direction: row; flex-wrap: wrap; gap: 8px 16px; }
.footer-bottom { padding: 14px 18px; }
} @media (max-width: 420px) {
.featured-hero { height: 220px; }
.featured-title { font-size: 17px; }
.featured-body { padding: 16px 16px 20px; }
.single-title { font-size: 22px; }
} @media print {
.site-header, .sidebar, .site-footer,
.single-post-nav, .pagination-wrap { display: none; }
.single-content { font-size: 12pt; line-height: 1.7; }
.site-container { max-width: 100%; padding: 0; }
.content-sidebar-wrap { grid-template-columns: 1fr; }
} .share-bar {
display: flex;
align-items: center;
gap: 14px;
padding: 20px 40px;
border-top: 1px solid var(--clr-border-light);
flex-wrap: wrap;
}
.share-label {
font-family: var(--font-ui);
font-size: 12px;
font-weight: 700;
letter-spacing: .8px;
text-transform: uppercase;
color: var(--clr-muted);
flex-shrink: 0;
}
.share-buttons {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.share-btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 14px;
border-radius: 8px;
font-family: var(--font-ui);
font-size: 13px;
font-weight: 600;
color: #fff;
line-height: 1;
transition: opacity var(--transition), transform var(--transition);
text-decoration: none;
}
.share-btn:hover {
opacity: .85;
transform: translateY(-1px);
color: #fff;
}
.share-btn span { white-space: nowrap; }
.share-facebook  { background: #1877f2; }
.share-x         { background: #000; }
.share-whatsapp  { background: #25d366; }
.share-telegram  { background: #229ed9; }
.share-mail      { background: #64748b; }
@media (max-width: 480px) {
.share-bar { padding: 16px 18px; gap: 10px; }
.share-btn span { display: none; }
.share-btn { padding: 9px 11px; border-radius: 8px; }
} .comments-outer {
background: var(--clr-surface);
border-radius: var(--radius-lg);
border: 1px solid var(--clr-border);
box-shadow: var(--shadow-card);
padding: 32px 40px 40px;
margin-top: 20px; }
.comments-outer .comments-area { padding: 0; border: none; }
.comments-outer #disqus_thread { margin-top: 0; } .comments-outer .comments-title,
.comments-outer .comment-reply-title {
font-family: var(--font-ui);
font-size: 16px;
font-weight: 700;
color: var(--clr-heading);
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 1px solid var(--clr-border-light);
}
@media (max-width: 768px) {
.comments-outer { padding: 20px 18px 28px; border-radius: var(--radius-md); }
}  .site-footer { margin-top: 60px; border-top: 3px solid #1e3a8a; }
.footer-top {
padding: 52px 0 44px;
}
.footer-top-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 24px;
display: grid;
grid-template-columns: 1.6fr 1fr 1fr;
gap: 48px;
align-items: start;
}
.footer-col {}
.footer-col-brand {}
.footer-logo-link { display: inline-block; margin-bottom: 14px; opacity: .92; }
.footer-logo-link:hover { opacity: 1; }
.footer-tagline {
font-family: var(--font-ui);
font-size: 13.5px;
color: #64748b;
line-height: 1.65;
margin-bottom: 18px;
max-width: 300px;
}
.footer-mail {
display: inline-flex;
align-items: center;
gap: 7px;
font-family: var(--font-ui);
font-size: 13px;
font-weight: 500;
color: #60a5fa;
border-bottom: 1px solid transparent;
transition: color var(--transition), border-color var(--transition);
}
.footer-mail:hover {
color: #93c5fd;
border-bottom-color: #60a5fa;
}
.footer-col-title {
font-family: var(--font-ui);
font-size: 11px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
color: #94a3b8;
margin-bottom: 16px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255,255,255,.07);
}
.footer-link-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.footer-link-list li a {
font-family: var(--font-ui);
font-size: 13.5px;
font-weight: 400;
color: #94a3b8;
padding: 5px 0;
display: block;
transition: color var(--transition), padding-left var(--transition);
}
.footer-link-list li a:hover {
color: #e2e8f0;
padding-left: 6px;
} .footer-bottom {
border-top: 1px solid rgba(255,255,255,.07);
padding: 16px 0;
}
.footer-bottom-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
}
.footer-bottom-inner p {
font-family: var(--font-ui);
font-size: 12px;
color: #475569;
}
.footer-bottom-inner a { color: #64748b; }
.footer-bottom-inner a:hover { color: #94a3b8; }
.footer-bottom-right { color: #334155 !important; } @media (max-width: 900px) {
.footer-top-inner {
grid-template-columns: 1fr 1fr;
gap: 32px;
}
.footer-col-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
.footer-top-inner {
grid-template-columns: 1fr;
gap: 28px;
padding: 0 18px;
}
.footer-top { padding: 36px 0 32px; }
.footer-bottom-inner { flex-direction: column; text-align: center; gap: 6px; }
}    .page .single-header {
padding-bottom: 24px;
border-bottom: 1px solid var(--clr-border-light);
margin-bottom: 0;
} .page-content {
font-size: 16px;
line-height: 1.85;
color: var(--clr-body);
}
.page-content h2 { font-size: 22px; margin-top: 36px; }
.page-content h3 { font-size: 18px; margin-top: 28px; } .page .content-sidebar-wrap {
grid-template-columns: minmax(0, 1fr) 300px;
} .footer-link-list--grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px 16px;
}
@media (max-width: 600px) {
.footer-link-list--grid { grid-template-columns: 1fr; }
}  html.dark,
html[data-theme="dark"] { --clr-bg:           #1a1f2e; --clr-surface:      #222736; --clr-nav-bg:       #161b27; --clr-footer-bg:    #0f1219;  --clr-dark:         #f1f5f9;
--clr-heading:      #e2e8f0;
--clr-body:         #b8c4d4; --clr-muted:        #7a8fa6; --clr-border:       #2e3650;
--clr-border-light: #252c3e; --clr-primary:      #4f8ef7;
--clr-primary-dark: #3b7de8;
--clr-primary-pale: #1e2d4a;
--clr-accent:       #818cf8; --shadow-card:  0 1px 4px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.2);
--shadow-hover: 0 4px 24px rgba(0,0,0,.4);
} @media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) {
--clr-bg:           #1a1f2e;
--clr-surface:      #222736;
--clr-nav-bg:       #161b27;
--clr-footer-bg:    #0f1219;
--clr-dark:         #f1f5f9;
--clr-heading:      #e2e8f0;
--clr-body:         #b8c4d4;
--clr-muted:        #7a8fa6;
--clr-border:       #2e3650;
--clr-border-light: #252c3e;
--clr-primary:      #4f8ef7;
--clr-primary-dark: #3b7de8;
--clr-primary-pale: #1e2d4a;
--clr-accent:       #818cf8;
--shadow-card:  0 1px 4px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.2);
--shadow-hover: 0 4px 24px rgba(0,0,0,.4);
}
}  html.dark .site-header,
html[data-theme="dark"] .site-header {
background: var(--clr-nav-bg);
border-bottom-color: var(--clr-border);
box-shadow: 0 1px 12px rgba(0,0,0,.3);
}
html.dark .site-logo text,
html[data-theme="dark"] .site-logo text {
fill: #93c5fd !important; } html.dark .hamburger-bar,
html[data-theme="dark"] .hamburger-bar {
background: #94a3b8;
} html.dark .header-search,
html[data-theme="dark"] .header-search {
background: #1e2540;
border-color: var(--clr-border);
}
html.dark .header-search:focus-within,
html[data-theme="dark"] .header-search:focus-within {
background: #252c3e;
border-color: var(--clr-primary);
box-shadow: 0 0 0 3px rgba(79,142,247,.15);
}
html.dark .search-input,
html[data-theme="dark"] .search-input {
color: var(--clr-heading);
} html.dark .featured-body,
html[data-theme="dark"] .featured-body {
background: linear-gradient(to top, rgba(15,18,25,.88) 0%, rgba(15,18,25,.25) 65%, transparent 100%);
} html.dark .post-card,
html[data-theme="dark"] .post-card {
background: var(--clr-surface);
border-color: var(--clr-border);
}
html.dark .post-card:hover,
html[data-theme="dark"] .post-card:hover {
box-shadow: var(--shadow-hover);
border-color: #3d4a66;
} html.dark .cat-badge,
html[data-theme="dark"] .cat-badge {
background: #1e2d4a;
color: #93c5fd;
} html.dark .section-heading,
html[data-theme="dark"] .section-heading {
color: var(--clr-heading);
border-bottom-color: var(--clr-primary);
} html.dark .widget,
html[data-theme="dark"] .widget {
background: var(--clr-surface);
border-color: var(--clr-border);
}
html.dark .widget-title,
html[data-theme="dark"] .widget-title {
color: var(--clr-heading);
border-bottom-color: var(--clr-border);
} html.dark .recent-item,
html[data-theme="dark"] .recent-item {
border-bottom-color: var(--clr-border-light);
}
html.dark .recent-item:hover,
html[data-theme="dark"] .recent-item:hover {
background: rgba(255,255,255,.03);
} html.dark .single-article,
html[data-theme="dark"] .single-article {
background: var(--clr-surface);
border-color: var(--clr-border);
}
html.dark .single-header,
html[data-theme="dark"] .single-header {
border-bottom-color: var(--clr-border-light);
}
html.dark .single-content,
html[data-theme="dark"] .single-content {
color: var(--clr-body);
}
html.dark .single-content h2,
html.dark .single-content h3,
html.dark .single-content h4,
html[data-theme="dark"] .single-content h2,
html[data-theme="dark"] .single-content h3,
html[data-theme="dark"] .single-content h4 {
color: var(--clr-heading);
}
html.dark .single-content blockquote,
html[data-theme="dark"] .single-content blockquote {
background: #1e2540;
border-left-color: var(--clr-primary);
color: #94a3b8;
}
html.dark .single-content code,
html[data-theme="dark"] .single-content code {
background: #1e2540;
color: #a5b4fc;
}
html.dark .single-content pre,
html[data-theme="dark"] .single-content pre {
background: #141824;
border-color: var(--clr-border);
}
html.dark .single-content a,
html[data-theme="dark"] .single-content a {
color: var(--clr-primary);
} html.dark .tag-link,
html[data-theme="dark"] .tag-link {
background: #1e2540;
color: #93c5fd;
border-color: #2e3a58;
}
html.dark .tag-link:hover,
html[data-theme="dark"] .tag-link:hover {
background: #253060;
color: #bfdbfe;
} html.dark .single-post-nav,
html[data-theme="dark"] .single-post-nav {
border-color: var(--clr-border-light);
background: var(--clr-surface);
}
html.dark .nav-prev,
html.dark .nav-next,
html[data-theme="dark"] .nav-prev,
html[data-theme="dark"] .nav-next {
border-color: var(--clr-border-light);
}
html.dark .nav-prev:hover,
html.dark .nav-next:hover,
html[data-theme="dark"] .nav-prev:hover,
html[data-theme="dark"] .nav-next:hover {
background: rgba(255,255,255,.03);
} html.dark .pagination-wrap .page-numbers,
html[data-theme="dark"] .pagination-wrap .page-numbers {
background: var(--clr-surface);
border-color: var(--clr-border);
color: var(--clr-body);
}
html.dark .pagination-wrap .page-numbers.current,
html[data-theme="dark"] .pagination-wrap .page-numbers.current {
background: var(--clr-primary);
border-color: var(--clr-primary);
color: #fff;
}
html.dark .pagination-wrap .page-numbers:hover:not(.current),
html[data-theme="dark"] .pagination-wrap .page-numbers:hover:not(.current) {
background: #252c3e;
border-color: #3d4a66;
color: var(--clr-heading);
} html.dark .comments-area,
html[data-theme="dark"] .comments-area {
border-top-color: var(--clr-border-light);
}
html.dark .comments-outer,
html[data-theme="dark"] .comments-outer {
background: var(--clr-surface);
border-color: var(--clr-border);
}
html.dark .comment-form input,
html.dark .comment-form textarea,
html[data-theme="dark"] .comment-form input,
html[data-theme="dark"] .comment-form textarea {
background: #1e2540;
border-color: var(--clr-border);
color: var(--clr-heading);
}
html.dark .comment-form input:focus,
html.dark .comment-form textarea:focus,
html[data-theme="dark"] .comment-form input:focus,
html[data-theme="dark"] .comment-form textarea:focus {
border-color: var(--clr-primary);
box-shadow: 0 0 0 3px rgba(79,142,247,.12);
} html.dark .site-footer,
html[data-theme="dark"] .site-footer {
border-top-color: #2e3a58;
}
html.dark .footer-tagline,
html[data-theme="dark"] .footer-tagline {
color: #5a6a7e;
} html.dark .share-bar,
html[data-theme="dark"] .share-bar {
border-top-color: var(--clr-border-light);
} html.dark .nav-placeholder,
html[data-theme="dark"] .nav-placeholder {
color: #5a6a82;
} html.dark .popular-rank,
html[data-theme="dark"] .popular-rank {
color: #3a4a62;
} html.dark ::-webkit-scrollbar,
html[data-theme="dark"] ::-webkit-scrollbar {
width: 8px;
background: #1a1f2e;
}
html.dark ::-webkit-scrollbar-thumb,
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
background: #2e3a58;
border-radius: 4px;
}
html.dark ::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
background: #3d4a66;
} html.dark ::selection,
html[data-theme="dark"] ::selection {
background: rgba(79,142,247,.25);
color: #e2e8f0;
} html.dark img:not(.featured-img):not(.mini-img):not(.post-card-img):not(.popular-img),
html[data-theme="dark"] img:not(.featured-img):not(.mini-img):not(.post-card-img):not(.popular-img) {
filter: brightness(.9) contrast(1.02);
} html.dark .featured-overlay,
html[data-theme="dark"] .featured-overlay {
background: linear-gradient(
to top,
rgba(10,20,50,.80) 0%,
rgba(10,20,50,.15) 60%,
transparent 100%
);
} html.dark .featured-img,
html[data-theme="dark"] .featured-img {
opacity: .92;
}
html.dark .featured-hero:hover .featured-img,
html[data-theme="dark"] .featured-hero:hover .featured-img {
opacity: 1;
} html.dark .mini-img,
html[data-theme="dark"] .mini-img {
opacity: .90;
}
html.dark .featured-mini:hover .mini-img,
html[data-theme="dark"] .featured-mini:hover .mini-img {
opacity: 1;
} .dark-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
background: transparent;
border: 1.5px solid var(--clr-border);
border-radius: 50%;
cursor: pointer;
flex-shrink: 0;
color: var(--clr-muted);
transition: background var(--transition), border-color var(--transition),
color var(--transition), transform var(--transition);
position: relative;
overflow: hidden;
}
.dark-toggle:hover {
background: var(--clr-border-light);
border-color: var(--clr-primary);
color: var(--clr-primary);
transform: rotate(15deg);
}
.dark-toggle svg {
width: 18px;
height: 18px;
position: absolute;
transition: opacity .2s ease, transform .3s ease;
} .dark-toggle .icon-sun {
opacity: 0;
transform: rotate(90deg) scale(.6);
} .dark-toggle .icon-moon {
opacity: 1;
transform: rotate(0deg) scale(1);
} html.dark .dark-toggle .icon-sun,
html[data-theme="dark"] .dark-toggle .icon-sun {
opacity: 1;
transform: rotate(0deg) scale(1);
}
html.dark .dark-toggle .icon-moon,
html[data-theme="dark"] .dark-toggle .icon-moon {
opacity: 0;
transform: rotate(-90deg) scale(.6);
} html.dark .dark-toggle,
html[data-theme="dark"] .dark-toggle {
border-color: #2e3650;
color: #94a3b8;
background: #1e2540;
}
html.dark .dark-toggle:hover,
html[data-theme="dark"] .dark-toggle:hover {
background: #252c3e;
border-color: var(--clr-primary);
color: var(--clr-primary);
} @media (max-width: 768px) {
.dark-toggle {
width: 34px;
height: 34px;
}
.dark-toggle svg {
width: 16px;
height: 16px;
}
} .search-results-header {
padding: 24px 0 20px;
border-bottom: 1px solid var(--clr-border-light);
margin-bottom: 28px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
}
.search-results-meta {
display: flex;
align-items: center;
gap: 10px;
color: var(--clr-muted);
}
.search-results-meta svg {
flex-shrink: 0;
color: var(--clr-primary);
}
.search-results-label {
font-family: var(--font-ui);
font-size: 13px;
font-weight: 500;
color: var(--clr-muted);
}
.search-results-term {
font-family: var(--font-ui);
font-size: 20px;
font-weight: 700;
color: var(--clr-dark);
letter-spacing: -.2px;
}
.search-results-count {
font-family: var(--font-ui);
font-size: 13px;
color: var(--clr-muted);
}
.search-results-count strong {
color: var(--clr-primary);
font-weight: 700;
} .search-no-results {
text-align: center;
padding: 60px 24px;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.search-no-results-icon {
color: var(--clr-border);
margin-bottom: 8px;
}
.search-no-results-title {
font-family: var(--font-heading);
font-size: 22px;
font-weight: 700;
color: var(--clr-dark);
line-height: 1.3;
}
.search-no-results-desc {
font-family: var(--font-ui);
font-size: 15px;
color: var(--clr-muted);
max-width: 420px;
}
.search-tips {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.search-tips li {
font-family: var(--font-ui);
font-size: 13px;
color: var(--clr-muted);
padding-left: 16px;
position: relative;
}
.search-tips li::before {
content: '→';
position: absolute;
left: 0;
color: var(--clr-primary);
}
.search-no-results-form {
display: flex;
gap: 0;
width: 100%;
max-width: 400px;
border: 1.5px solid var(--clr-border);
border-radius: var(--radius-sm);
overflow: hidden;
transition: border-color var(--transition);
}
.search-no-results-form:focus-within {
border-color: var(--clr-primary);
box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}
.search-no-results-input {
flex: 1;
padding: 12px 16px;
font-family: var(--font-ui);
font-size: 14px;
border: none;
outline: none;
background: transparent;
color: var(--clr-dark);
}
.search-no-results-btn {
padding: 0 18px;
background: var(--clr-primary);
border: none;
cursor: pointer;
color: #fff;
display: flex;
align-items: center;
transition: background var(--transition);
}
.search-no-results-btn:hover { background: var(--clr-primary-dark); } html.dark .search-results-term,
html[data-theme="dark"] .search-results-term { color: var(--clr-heading); }
html.dark .search-no-results-input,
html[data-theme="dark"] .search-no-results-input { color: var(--clr-heading); }
html.dark .search-no-results-form,
html[data-theme="dark"] .search-no-results-form { border-color: var(--clr-border); background: #1e2540; } .error-404-wrap {
width: 100%;
} .e404-hero {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 56px;
padding: 72px 0 64px;
border-bottom: 1px solid var(--clr-border-light);
max-width: 780px;
margin: 0 auto;
}
.e404-number {
font-family: var(--font-heading);
font-size: clamp(96px, 14vw, 160px);
font-weight: 800;
line-height: 1;
color: transparent;
-webkit-text-stroke: 3px #94a3b8;
flex-shrink: 0;
user-select: none;
letter-spacing: -4px;
}
.e404-content {
display: flex;
flex-direction: column;
gap: 16px;
flex: 1;
}
.e404-title {
font-family: var(--font-heading);
font-size: 36px;
font-weight: 800;
color: var(--clr-dark);
line-height: 1.2;
margin: 0;
}
.e404-desc {
font-family: var(--font-ui);
font-size: 15px;
color: var(--clr-muted);
line-height: 1.7;
max-width: 460px;
margin: 0;
} .e404-search {
display: flex;
max-width: 420px;
border: 1.5px solid var(--clr-border);
border-radius: var(--radius-sm);
overflow: hidden;
transition: border-color var(--transition);
}
.e404-search:focus-within {
border-color: var(--clr-primary);
box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}
.e404-search-input {
flex: 1;
padding: 12px 16px;
font-family: var(--font-ui);
font-size: 14px;
border: none;
outline: none;
background: transparent;
color: var(--clr-dark);
}
.e404-search-btn {
padding: 0 18px;
background: var(--clr-primary);
border: none;
cursor: pointer;
color: #fff;
display: flex;
align-items: center;
transition: background var(--transition);
}
.e404-search-btn:hover { background: var(--clr-primary-dark); } .e404-home-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 22px;
background: transparent;
border: 1.5px solid var(--clr-border);
border-radius: var(--radius-sm);
font-family: var(--font-ui);
font-size: 14px;
font-weight: 600;
color: var(--clr-heading);
text-decoration: none;
transition: border-color var(--transition), color var(--transition), background var(--transition);
align-self: flex-start;
}
.e404-home-btn:hover {
border-color: var(--clr-primary);
color: var(--clr-primary);
background: var(--clr-primary-pale);
} .e404-recent {
padding: 40px 0 60px;
max-width: 780px;
margin: 0 auto;
}
.e404-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 4px;
}
.e404-card {
background: var(--clr-surface);
border: 1px solid var(--clr-border);
border-radius: var(--radius-md);
overflow: hidden;
transition: box-shadow var(--transition), border-color var(--transition);
}
.e404-card:hover {
box-shadow: var(--shadow-hover);
border-color: #d0daea;
}
.e404-card-img-wrap {
width: 100%;
aspect-ratio: 16/9;
overflow: hidden;
}
.e404-card-img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform .35s ease-out;
display: block;
}
.e404-card:hover .e404-card-img { transform: scale(1.04); }
.e404-card-body {
padding: 14px 16px 16px;
display: flex;
flex-direction: column;
gap: 6px;
}
.e404-card-title {
font-family: var(--font-heading);
font-size: 15px;
font-weight: 700;
line-height: 1.35;
color: var(--clr-heading);
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.e404-card-title a { color: inherit; }
.e404-card-title a:hover { color: var(--clr-primary); } html.dark .e404-number,
html[data-theme="dark"] .e404-number {
-webkit-text-stroke-color: #4a6080;
}
html.dark .e404-title,
html[data-theme="dark"] .e404-title { color: var(--clr-heading); }
html.dark .e404-search,
html[data-theme="dark"] .e404-search { border-color: var(--clr-border); background: #1e2540; }
html.dark .e404-search-input,
html[data-theme="dark"] .e404-search-input { color: var(--clr-heading); }
html.dark .e404-card:hover,
html[data-theme="dark"] .e404-card:hover { border-color: #3d4a66; } @media (max-width: 900px) {
.e404-hero { grid-template-columns: 1fr; gap: 24px; padding: 40px 0 36px; text-align: center; max-width: 500px; }
.e404-number { font-size: clamp(72px, 20vw, 100px); }
.e404-desc { max-width: 100%; }
.e404-search { max-width: 100%; }
.e404-home-btn { align-self: center; }
.e404-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.e404-grid { grid-template-columns: 1fr; }
.search-results-header { flex-direction: column; align-items: flex-start; }
}