@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300 900;
font-display: swap;
src: url(//ethereum.com.ua/wp-content/themes/flavor-flavor/assets/fonts/inter/Inter-VariableFont_opsz,wght.woff2) format('woff2');
}
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url(//ethereum.com.ua/wp-content/themes/flavor-flavor/assets/fonts/space-grotesk/SpaceGrotesk-VariableFont_wght.woff2) format('woff2');
} :root {
--color-base: #0A0A0A;
--color-contrast: #F0F0F0;
--color-accent-1: #627EEA;
--color-accent-2: #8C8DFC;
--color-green: #2ECC71;
--color-red: #E74C3C;
--color-card: #1A1A2E;
--color-border: #2D2D44;
--color-muted: #8A8A9A;
--font-body: 'Inter', sans-serif;
--font-heading: 'Space Grotesk', sans-serif;
--font-mono: 'Fira Code', monospace;
--width-content: 720px;
--width-wide: 1200px;
--radius: 12px;
--radius-lg: 16px;
} .screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
word-wrap: normal !important;
} *, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
}
body {
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.7;
color: var(--color-contrast);
background: var(--color-base);
}
a {
color: var(--color-accent-1);
text-decoration: none;
transition: color 0.2s;
}
a:hover {
color: var(--color-accent-2);
}
img {
max-width: 100%;
height: auto;
display: block;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: 600;
line-height: 1.2;
color: #fff;
}
h1 { font-size: clamp(2rem, 4vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.375rem; }
h4 { font-size: 1.125rem; }
::selection {
background: rgba(98, 126, 234, 0.3);
color: #fff;
} ::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--color-base); }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-accent-1); } .container {
max-width: var(--width-wide);
margin: 0 auto;
padding: 0 1.5rem;
}
.layout-with-sidebar {
display: grid;
grid-template-columns: 1fr 320px;
gap: 2.5rem;
padding-top: 2rem;
padding-bottom: 3rem;
}
.main-content {
min-width: 0;
} .site-header {
background: var(--color-base);
border-bottom: 1px solid var(--color-border);
position: sticky;
top: 0;
z-index: 100;
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
gap: 1.5rem;
}
.site-branding a {
display: flex;
align-items: center;
gap: 0.6rem;
text-decoration: none;
}
.site-logo-img {
width: 32px;
height: 32px;
}
.site-title {
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.25rem;
color: #fff;
}
.site-branding a:hover .site-title {
color: var(--color-accent-1);
} .main-navigation ul {
display: flex;
gap: 0.25rem;
list-style: none;
}
.main-navigation a {
display: block;
padding: 0.5rem 0.85rem;
color: var(--color-contrast);
font-size: 0.9rem;
font-weight: 500;
border-radius: 8px;
transition: all 0.2s;
}
.main-navigation a:hover,
.main-navigation .current-menu-item > a {
color: var(--color-accent-1);
background: rgba(98, 126, 234, 0.08);
} .main-navigation li {
position: relative;
}
.main-navigation .sub-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 0.5rem 0;
min-width: 200px;
z-index: 200;
flex-direction: column;
}
.main-navigation li:hover > .sub-menu {
display: flex;
}
.main-navigation .sub-menu a {
padding: 0.5rem 1rem;
border-radius: 0;
} .header-right {
display: flex;
align-items: center;
gap: 1rem;
}
.header-right ul {
list-style: none;
} .search-toggle {
display: none;
background: none;
border: 1px solid var(--color-border);
border-radius: 8px;
cursor: pointer;
padding: 0.45rem;
color: var(--color-muted);
transition: all 0.2s;
line-height: 0;
}
.search-toggle:hover {
color: var(--color-accent-1);
border-color: var(--color-accent-1);
background: rgba(98, 126, 234, 0.08);
}
.search-toggle--desktop {
display: inline-flex;
} .search-overlay {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 20vh;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
}
.search-overlay.is-active {
opacity: 1;
visibility: visible;
}
.search-overlay__backdrop {
position: absolute;
inset: 0;
background: rgba(5, 5, 10, 0.85);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.search-overlay__content {
position: relative;
width: 100%;
max-width: 640px;
padding: 0 1.5rem;
transform: translateY(-20px) scale(0.97);
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.search-overlay.is-active .search-overlay__content {
transform: translateY(0) scale(1);
}
.search-overlay__form {
width: 100%;
}
.search-overlay__field {
position: relative;
display: flex;
align-items: center;
}
.search-overlay__icon {
position: absolute;
left: 1.25rem;
color: var(--color-accent-1);
pointer-events: none;
filter: drop-shadow(0 0 6px rgba(98, 126, 234, 0.4));
}
.search-overlay__input {
width: 100%;
padding: 1.1rem 1.25rem 1.1rem 3.5rem;
background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
color: #fff;
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: 400;
outline: none;
transition: border-color 0.25s, box-shadow 0.25s;
-webkit-appearance: none;
}
.search-overlay__input::placeholder {
color: var(--color-muted);
}
.search-overlay__input:focus {
border-color: var(--color-accent-1);
box-shadow: 0 0 0 3px rgba(98, 126, 234, 0.15), 0 8px 32px rgba(0, 0, 0, 0.3);
}
.search-overlay__input::-webkit-search-cancel-button {
-webkit-appearance: none;
}
.search-overlay__hint {
display: block;
text-align: center;
margin-top: 0.75rem;
font-size: 0.8rem;
color: var(--color-muted);
opacity: 0.6;
}
.search-overlay__close {
position: absolute;
top: -3.5rem;
right: 1.5rem;
background: none;
border: 1px solid var(--color-border);
border-radius: 8px;
padding: 0.4rem;
color: var(--color-muted);
cursor: pointer;
transition: all 0.2s;
line-height: 0;
}
.search-overlay__close:hover {
color: #fff;
border-color: var(--color-accent-1);
background: rgba(98, 126, 234, 0.1);
} .menu-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 0.5rem;
}
.hamburger,
.hamburger::before,
.hamburger::after {
display: block;
width: 24px;
height: 2px;
background: var(--color-contrast);
transition: all 0.3s;
}
.hamburger {
position: relative;
}
.hamburger::before,
.hamburger::after {
content: '';
position: absolute;
left: 0;
}
.hamburger::before { top: -7px; }
.hamburger::after { top: 7px; } .hero-section {
position: relative;
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 4rem 2rem 3rem;
text-align: center;
margin-bottom: 2.5rem;
background: var(--color-card);
isolation: isolate;
}
.hero-bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
} .hero-grid-lines {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(98, 126, 234, 0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(98, 126, 234, 0.06) 1px, transparent 1px);
background-size: 40px 40px;
mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
-webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
} .hero-glow {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.5;
animation: hero-drift 8s ease-in-out infinite alternate;
}
.hero-glow--blue {
width: 300px;
height: 300px;
background: radial-gradient(circle, #627EEA 0%, transparent 70%);
top: -80px;
left: 10%;
animation-duration: 8s;
}
.hero-glow--purple {
width: 250px;
height: 250px;
background: radial-gradient(circle, #8C8DFC 0%, transparent 70%);
bottom: -60px;
right: 10%;
animation-duration: 10s;
animation-delay: -3s;
}
@keyframes hero-drift {
0%   { transform: translate(0, 0) scale(1); }
100% { transform: translate(30px, -20px) scale(1.15); }
} .hero-particles {
position: absolute;
inset: 0;
}
.hero-particle {
position: absolute;
left: var(--x);
top: var(--y);
width: 4px;
height: 4px;
background: #627EEA;
border-radius: 50%;
opacity: var(--s);
box-shadow: 0 0 8px 2px rgba(98, 126, 234, 0.4);
animation: hero-float var(--d) ease-in-out infinite alternate;
}
@keyframes hero-float {
0%   { transform: translateY(0) scale(1); opacity: var(--s); }
100% { transform: translateY(-15px) scale(1.3); opacity: calc(var(--s) * 0.5); }
} .hero-inner {
position: relative;
z-index: 1;
} .hero-diamond {
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 1.25rem;
animation: hero-logo-enter 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero-eth-logo {
width: 56px;
height: auto;
filter: drop-shadow(0 0 20px rgba(98, 126, 234, 0.6))
drop-shadow(0 0 60px rgba(140, 141, 252, 0.25));
animation: hero-logo-pulse 4s ease-in-out infinite;
}
@keyframes hero-logo-enter {
0%   { transform: translateY(20px) scale(0.8); opacity: 0; }
100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes hero-logo-pulse {
0%, 100% { filter: drop-shadow(0 0 20px rgba(98,126,234,0.6)) drop-shadow(0 0 60px rgba(140,141,252,0.25)); }
50%      { filter: drop-shadow(0 0 30px rgba(98,126,234,0.8)) drop-shadow(0 0 80px rgba(140,141,252,0.4)); }
}
.hero-title {
margin-bottom: 0.5rem;
font-size: 2.5rem;
font-weight: 700;
letter-spacing: -0.02em;
background: linear-gradient(135deg, #fff 30%, #627EEA 70%, #8C8DFC 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: hero-text-enter 1s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}
.hero-tagline {
color: var(--color-muted);
font-size: 1.1rem;
margin: 0 auto 2rem;
max-width: 500px;
animation: hero-text-enter 1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}
@keyframes hero-text-enter {
0%   { transform: translateY(15px); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
} .hero-stats {
display: inline-flex;
align-items: center;
gap: 1.25rem;
background: rgba(10, 10, 10, 0.5);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid var(--color-border);
border-radius: 100px;
padding: 0.65rem 1.75rem;
animation: hero-text-enter 1s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
flex-wrap: wrap;
justify-content: center;
}
.hero-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.1rem;
}
.hero-stat-value {
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: 700;
color: #627EEA;
}
.hero-stat-label {
font-size: 0.7rem;
color: var(--color-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.hero-stat-divider {
width: 1px;
height: 28px;
background: var(--color-border);
} .post-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem;
} .post-card {
background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
transition: transform 0.3s, box-shadow 0.3s;
}
.post-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 32px rgba(98, 126, 234, 0.12);
}
.card-image img {
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
}
.card-body {
padding: 1.25rem;
}
.card-category a {
display: inline-block;
padding: 0.15em 0.5em;
background: rgba(98, 126, 234, 0.15);
color: #93A8F4;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.card-title {
font-size: 1.1rem;
margin: 0.6rem 0 0.5rem;
line-height: 1.35;
}
.card-title a {
color: #fff;
}
.card-title a:hover {
color: var(--color-accent-1);
}
.card-excerpt {
color: var(--color-muted);
font-size: 0.875rem;
line-height: 1.5;
margin-bottom: 0.75rem;
}
.card-meta {
font-size: 0.8rem;
color: var(--color-accent-2);
} .single-article {
max-width: var(--width-content);
}
.article-meta-top a {
display: inline-block;
padding: 0.2em 0.6em;
background: rgba(98, 126, 234, 0.15);
color: #93A8F4;
border-radius: 4px;
font-size: 0.8rem;
margin-bottom: 0.75rem;
}
.article-title {
margin-bottom: 0.75rem;
}
.article-meta {
color: var(--color-muted);
font-size: 0.9rem;
margin-bottom: 1.5rem;
}
.article-meta .meta-sep {
margin: 0 0.5rem;
}
.article-featured-image {
margin-bottom: 2rem;
}
.article-featured-image img {
border-radius: var(--radius-lg);
width: 100%;
aspect-ratio: 21 / 9;
object-fit: cover;
}
.article-content {
font-size: 1.05rem;
line-height: 1.8;
}
.article-content h2::before {
content: "\25C6";
color: var(--color-accent-1);
margin-right: 0.5em;
font-size: 0.7em;
}
.article-content p {
margin-bottom: 1.25rem;
}
.article-content img {
border-radius: var(--radius);
margin: 1.5rem 0;
}
.article-content blockquote {
border-left: 3px solid var(--color-accent-1);
padding-left: 1.5rem;
margin: 1.5rem 0;
color: var(--color-contrast);
font-style: italic;
}
.article-content pre,
.article-content code {
font-family: var(--font-mono);
}
.article-content pre {
background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: 8px;
padding: 1.25rem;
overflow-x: auto;
color: var(--color-accent-2);
margin: 1.5rem 0;
}
.article-content table {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
}
.article-content th,
.article-content td {
border: 1px solid var(--color-border);
padding: 0.75rem 1rem;
text-align: left;
}
.article-content thead {
background: var(--color-card);
}
.article-content tbody tr:nth-child(even) {
background: rgba(26, 26, 46, 0.5);
}
.article-tags a {
display: inline-block;
padding: 0.25em 0.65em;
background: rgba(140, 141, 252, 0.1);
color: var(--color-accent-2);
border-radius: 4px;
font-size: 0.8rem;
margin: 0.25rem 0.25rem 0.25rem 0;
} .post-navigation {
display: flex;
justify-content: space-between;
gap: 1rem;
margin-top: 2.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--color-border);
}
.post-navigation a {
color: var(--color-muted);
font-size: 0.9rem;
}
.post-navigation a:hover {
color: var(--color-accent-1);
} .sidebar {
position: sticky;
top: 5rem;
align-self: start;
}
.sidebar .widget {
background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 1.25rem;
margin-bottom: 1.5rem;
}
.sidebar .widget-title {
font-size: 0.95rem;
font-weight: 600;
color: var(--color-contrast);
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--color-accent-1);
display: inline-block;
}
.sidebar .widget ul {
list-style: none;
}
.sidebar .widget li {
padding: 0.35rem 0;
border-bottom: 1px solid rgba(45, 45, 68, 0.5);
}
.sidebar .widget li:last-child {
border-bottom: none;
}
.sidebar .widget a {
color: var(--color-contrast);
font-size: 0.9rem;
}
.sidebar .widget a:hover {
color: var(--color-accent-1);
} .eth-price-widget {
background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: 12px;
padding: 1rem 1.25rem;
}
.eth-price-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.35rem;
}
.eth-label {
color: var(--color-muted);
font-size: 0.85rem;
}
.eth-change {
font-size: 0.85rem;
font-weight: 600;
}
.eth-change.price-up {
color: #4FDE8B;
}
.eth-change.price-down {
color: #F07B6E;
}
.eth-price-row {
display: flex;
align-items: baseline;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.eth-price-value {
font-family: var(--font-heading);
font-size: 1.75rem;
font-weight: 700;
color: #4FDE8B;
}
.eth-price-label {
font-size: 0.9rem;
color: var(--color-muted);
}
.eth-sparkline {
display: block;
width: 100%;
height: 80px;
margin-bottom: 0.5rem;
}
.eth-price-footer {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.8rem;
}
.eth-price-low,
.eth-price-high {
font-weight: 600;
}
.eth-price-date {
color: var(--color-muted);
} .popular-posts-list {
list-style: none;
padding: 0;
margin: 0;
}
.popular-post-item {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.6rem 0;
border-bottom: 1px solid var(--color-border);
}
.popular-post-item:last-child {
border-bottom: none;
}
.popular-post-number {
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: 700;
color: #93A8F4;
min-width: 1.5rem;
line-height: 1.2;
}
.popular-post-content {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.popular-post-title {
font-size: 0.9rem;
line-height: 1.35;
color: var(--color-contrast);
text-decoration: none;
}
.popular-post-title:hover {
color: var(--color-accent-1);
}
.popular-post-date {
font-size: 0.75rem;
color: var(--color-muted);
} .lang-switcher {
display: flex;
gap: 0.4rem;
list-style: none;
align-items: center;
}
.lang-switcher li {
list-style: none;
}
.lang-switcher a {
display: flex;
align-items: center;
gap: 0.3rem;
padding: 0.2rem 0.5rem;
border-radius: 6px;
font-size: 0.8rem;
font-weight: 500;
color: var(--color-muted);
border: 1px solid transparent;
transition: all 0.2s;
}
.lang-switcher a:hover {
color: #fff;
border-color: var(--color-border);
background: rgba(98, 126, 234, 0.08);
}
.lang-switcher .current-lang a {
color: var(--color-accent-1);
border-color: var(--color-accent-1);
background: rgba(98, 126, 234, 0.08);
}
.lang-switcher img {
width: 18px;
height: auto;
border-radius: 2px;
} .site-footer {
background: var(--color-base);
margin-top: 3rem;
padding: 0 0 1.5rem;
position: relative;
}
.footer-glow-line {
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
var(--color-border) 15%,
var(--color-accent-1) 40%,
var(--color-accent-2) 60%,
var(--color-border) 85%,
transparent 100%
);
margin-bottom: 2.5rem;
position: relative;
}
.footer-glow-line::after {
content: '';
position: absolute;
top: -6px;
left: 20%;
right: 20%;
height: 13px;
background: linear-gradient(
90deg,
transparent,
rgba(98, 126, 234, 0.25) 30%,
rgba(140, 141, 252, 0.2) 70%,
transparent
);
filter: blur(6px);
pointer-events: none;
}
.footer-main {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 2rem;
padding-bottom: 2rem;
} .footer-brand {
flex-shrink: 0;
}
.footer-logo-link {
display: inline-flex;
align-items: center;
gap: 0.65rem;
text-decoration: none;
transition: opacity 0.25s;
}
.footer-logo-link:hover {
opacity: 0.8;
}
.footer-eth-icon {
width: 24px;
height: auto;
filter: drop-shadow(0 0 8px rgba(98, 126, 234, 0.4));
transition: filter 0.3s;
}
.footer-logo-link:hover .footer-eth-icon {
filter: drop-shadow(0 0 14px rgba(98, 126, 234, 0.7));
}
.footer-site-name {
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.1rem;
color: #fff;
letter-spacing: -0.01em;
} .footer-nav {
display: flex;
align-items: center;
gap: 1.5rem;
flex-wrap: wrap;
}
.footer-nav-title {
font-family: var(--font-heading);
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--color-accent-1);
position: relative;
padding-right: 1.5rem;
white-space: nowrap;
}
.footer-nav-title::after {
content: '';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 16px;
background: var(--color-border);
}
.footer-nav-list {
display: flex;
gap: 0.25rem;
list-style: none;
flex-wrap: wrap;
}
.footer-nav-list a {
display: block;
padding: 0.3rem 0.7rem;
color: var(--color-muted);
font-size: 0.85rem;
font-weight: 450;
border-radius: 6px;
transition: color 0.2s, background 0.2s;
}
.footer-nav-list a:hover {
color: #fff;
background: rgba(98, 126, 234, 0.1);
}
.footer-nav-list .current-menu-item > a {
color: var(--color-accent-1);
} .footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid var(--color-border);
padding-top: 1.25rem;
gap: 1rem;
}
.footer-copy {
color: var(--color-muted);
font-size: 0.75rem;
}
.footer-powered {
font-size: 0.7rem;
color: var(--color-muted);
letter-spacing: 0.05em;
font-weight: 500;
} .pagination {
margin-top: 2rem;
text-align: center;
}
.pagination .nav-links {
display: flex;
justify-content: center;
align-items: center;
gap: 0.35rem;
list-style: none;
padding: 0;
margin: 0;
}
.pagination li {
display: contents;
}
.pagination a,
.pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.25rem;
padding: 0.5rem 0.75rem;
border-radius: 8px;
font-size: 0.9rem;
color: var(--color-contrast);
background: var(--color-card);
border: 1px solid var(--color-border);
transition: all 0.2s;
line-height: 1;
}
.pagination a:hover {
background: #4A5FB8;
border-color: #4A5FB8;
color: #fff;
}
.pagination .current {
background: #4A5FB8;
border-color: #4A5FB8;
color: #fff;
} .archive-header {
margin-bottom: 2rem;
}
.archive-title {
margin-bottom: 0.5rem;
}
.archive-description {
color: var(--color-muted);
} .search-form {
display: flex;
gap: 0.5rem;
}
.search-form .search-field {
flex: 1;
padding: 0.6rem 1rem;
background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: 8px;
color: var(--color-contrast);
font-family: var(--font-body);
font-size: 0.9rem;
}
.search-form .search-field:focus {
outline: none;
border-color: var(--color-accent-1);
}
.search-form .search-submit {
padding: 0.6rem 1.25rem;
background: var(--color-accent-1);
color: #fff;
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
}
.search-form .search-submit:hover {
background: var(--color-accent-2);
} .btn {
display: inline-block;
padding: 0.65rem 1.5rem;
border-radius: 8px;
font-weight: 600;
font-size: 0.95rem;
transition: all 0.2s;
text-decoration: none;
}
.btn-primary {
background: var(--color-accent-1);
color: #fff;
}
.btn-primary:hover {
background: var(--color-accent-2);
color: #fff;
} .wp-block-image img {
border-radius: var(--radius);
}
.wp-block-quote {
border-left: 3px solid var(--color-accent-1);
padding-left: 1.5rem;
}
.wp-block-code {
background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: 8px;
color: var(--color-accent-2);
}
.wp-block-table td,
.wp-block-table th {
border-color: var(--color-border);
}
.wp-block-table thead {
background: var(--color-card);
} .admin-bar .site-header {
top: 32px;
} @media (max-width: 900px) {
.layout-with-sidebar {
grid-template-columns: 1fr;
}
.sidebar {
position: static;
}
.footer-main {
flex-direction: column;
align-items: flex-start;
gap: 1.25rem;
}
.footer-bottom {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.search-toggle {
display: inline-flex;
}
.search-toggle--desktop {
display: none;
}
.menu-toggle {
display: block;
}
.main-navigation,
.header-right {
display: none;
}
.main-navigation.toggled {
display: flex;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--color-base);
border-bottom: 1px solid var(--color-border);
padding: 1rem 1.5rem;
z-index: 200;
}
.main-navigation.toggled ul {
flex-direction: column;
width: 100%;
}
.main-navigation.toggled .sub-menu {
position: static;
border: none;
padding-left: 1rem;
}
.header-right.toggled {
display: flex;
position: absolute;
top: 100%;
right: 0;
background: var(--color-base);
border-bottom: 1px solid var(--color-border);
padding: 0.75rem 1.5rem;
}
}
@media (max-width: 600px) {
.search-overlay {
padding-top: 12vh;
}
.search-overlay__input {
font-size: 1rem;
padding: 0.9rem 1rem 0.9rem 3rem;
}
.search-overlay__icon {
left: 0.9rem;
width: 20px;
height: 20px;
}
.search-overlay__close {
top: -3rem;
right: 1.5rem;
}
.post-grid {
grid-template-columns: 1fr;
}
.hero-section {
padding: 2.5rem 1rem 2rem;
}
.hero-title {
font-size: 1.75rem;
}
.hero-stats {
gap: 1rem;
padding: 0.6rem 1.25rem;
}
.hero-stat-value {
font-size: 1rem;
}
.hero-glow {
filter: blur(60px);
opacity: 0.35;
}
.admin-bar .site-header {
top: 46px;
}
}