:root { --bg-primary: hsl(222, 47%, 7%);
--bg-secondary: hsl(222, 40%, 12%);
--bg-tertiary: hsl(222, 35%, 18%);
--text-primary: hsl(210, 40%, 98%);
--text-secondary: hsl(215, 20%, 75%);
--text-muted: hsl(215, 16%, 55%); --accent-primary: hsl(263, 90%, 52%); --accent-secondary: hsl(180, 100%, 45%); --accent-glow: hsla(263, 90%, 52%, 0.15);
--border-color: hsl(222, 30%, 20%);
--border-focus: hsl(180, 100%, 45%); --glass-bg: hsla(222, 47%, 7%, 0.75);
--glass-border: hsla(210, 40%, 98%, 0.08);
--glass-shadow: rgba(0, 0, 0, 0.3);
--glass-blur: 16px; --font-sans: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-headings: 'Outfit', var(--font-sans);
--fs-xs: clamp(0.75rem, 0.12vw + 0.72rem, 0.81rem);
--fs-sm: clamp(0.88rem, 0.18vw + 0.83rem, 0.97rem);
--fs-base: clamp(1rem, 0.24vw + 0.94rem, 1.13rem);
--fs-md: clamp(1.13rem, 0.38vw + 1.03rem, 1.31rem);
--fs-lg: clamp(1.35rem, 0.61vw + 1.20rem, 1.69rem);
--fs-xl: clamp(1.62rem, 0.94vw + 1.38rem, 2.14rem);
--fs-h2: clamp(1.94rem, 1.4vw + 1.59rem, 2.72rem);
--fs-h1: clamp(2.33rem, 2.03vw + 1.82rem, 3.45rem);
--lh-body: 1.65;
--lh-headings: 1.25; --space-xs: 0.5rem;
--space-sm: 1rem;
--space-md: 1.5rem;
--space-lg: 2.5rem;
--space-xl: 4rem;
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 24px;
--radius-full: 9999px; --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-spring: 450ms cubic-bezier(0.34, 1.56, 0.64, 1);
} [data-theme="light"] {
--bg-primary: hsl(0, 0%, 98%);
--bg-secondary: hsl(210, 20%, 96%);
--bg-tertiary: hsl(210, 16%, 90%);
--text-primary: hsl(222, 47%, 12%);
--text-secondary: hsl(222, 20%, 30%);
--text-muted: hsl(222, 12%, 48%);
--accent-primary: hsl(263, 85%, 48%);
--accent-secondary: hsl(188, 95%, 38%);
--accent-glow: hsla(263, 85%, 48%, 0.08);
--border-color: hsl(210, 15%, 85%);
--border-focus: hsl(263, 85%, 48%);
--glass-bg: hsla(0, 0%, 98%, 0.8);
--glass-border: hsla(222, 47%, 12%, 0.08);
--glass-shadow: rgba(0, 0, 0, 0.05);
} *, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
background-color: var(--bg-primary);
color: var(--text-primary);
font-family: var(--font-sans);
font-size: var(--fs-base);
line-height: var(--lh-body);
transition: background-color var(--transition-smooth), color var(--transition-smooth);
overflow-x: hidden;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-headings);
line-height: var(--lh-headings);
font-weight: 700;
color: var(--text-primary);
margin-top: 0;
margin-bottom: var(--space-sm);
letter-spacing: -0.02em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
p {
margin-top: 0;
margin-bottom: var(--space-md);
}
a {
color: var(--accent-secondary);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover {
color: var(--accent-primary);
}
img {
max-width: 100%;
height: auto;
border-radius: var(--radius-md);
display: block;
} :focus-visible {
outline: 2px solid var(--border-focus);
outline-offset: 4px;
}
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
.skip-link {
position: absolute;
top: -100px;
left: var(--space-md);
background: var(--accent-primary);
color: #fff;
padding: var(--space-sm) var(--space-md);
border-radius: 0 0 var(--radius-md) var(--radius-md);
z-index: 99999;
transition: top var(--transition-fast);
}
.skip-link:focus {
top: 0;
} .site {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.site-content {
flex-grow: 1;
padding: var(--space-xl) 0;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--space-md);
} .elementor-template-full-width .site-content {
padding: 0;
}
.elementor-template-full-width .container {
max-width: none;
padding: 0;
} .site-header {
position: sticky;
top: 0;
z-index: 1000;
background-color: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border-bottom: 1px solid var(--glass-border);
box-shadow: 0 4px 30px var(--glass-shadow);
transition: background-color var(--transition-smooth), border-color var(--transition-smooth);
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
height: 80px;
}
.site-branding .site-title {
font-size: var(--fs-lg);
font-weight: 800;
margin: 0;
letter-spacing: -0.03em;
background: linear-gradient(135deg, var(--accent-secondary), var(--accent-primary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.site-branding .site-title a {
color: inherit;
background: inherit;
-webkit-background-clip: inherit;
-webkit-text-fill-color: inherit;
}
.nav-and-controls {
display: flex;
align-items: center;
gap: var(--space-md);
}
.main-navigation ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: var(--space-md);
}
.main-navigation a {
font-family: var(--font-headings);
font-size: var(--fs-sm);
font-weight: 600;
color: var(--text-primary);
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-sm);
transition: color var(--transition-fast), background-color var(--transition-fast);
}
.main-navigation a:hover,
.main-navigation .current-menu-item > a {
color: var(--accent-secondary);
background-color: var(--accent-glow);
} .theme-toggle-btn {
background: none;
border: 1px solid var(--glass-border);
color: var(--text-primary);
width: 40px;
height: 40px;
border-radius: var(--radius-md);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.theme-toggle-btn:hover {
background-color: var(--bg-tertiary);
transform: scale(1.05);
}
.theme-toggle-btn svg {
width: 20px;
height: 20px;
fill: currentColor;
} .menu-toggle {
display: none;
background: none;
border: none;
color: var(--text-primary);
cursor: pointer;
padding: var(--space-xs);
z-index: 1001;
}
.menu-toggle svg {
width: 28px;
height: 28px;
} .hero-block {
text-align: center;
padding: var(--space-xl) 0;
position: relative;
}
.hero-block::before {
content: '';
position: absolute;
top: -10%;
left: 50%;
transform: translate(-50%, 0);
width: 80%;
height: 300px;
background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
z-index: -1;
pointer-events: none;
}
.hero-tagline {
font-family: var(--font-headings);
font-size: var(--fs-md);
font-weight: 700;
color: var(--accent-secondary);
text-transform: uppercase;
letter-spacing: 0.15em;
margin-bottom: var(--space-sm);
display: block;
}
.hero-title {
font-size: clamp(2.5rem, 5vw + 1rem, 4.5rem);
font-weight: 900;
line-height: 1.1;
letter-spacing: -0.04em;
margin-bottom: var(--space-md);
background: linear-gradient(180deg, var(--text-primary) 30%, var(--text-secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-description {
max-width: 680px;
margin: 0 auto var(--space-lg);
font-size: var(--fs-md);
color: var(--text-secondary);
} .post-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: var(--space-md);
margin-top: var(--space-lg);
}
.post-card {
background-color: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform var(--transition-spring), box-shadow var(--transition-spring), border-color var(--transition-smooth);
}
.post-card:hover {
transform: translateY(-6px);
border-color: var(--accent-primary);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25), 0 0 1px var(--accent-primary);
}
.post-card-image {
aspect-ratio: 16 / 10;
overflow: hidden;
background-color: var(--bg-tertiary);
position: relative;
}
.post-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0;
transition: transform var(--transition-smooth);
}
.post-card:hover .post-card-image img {
transform: scale(1.04);
}
.post-card-content {
padding: var(--space-md);
display: flex;
flex-direction: column;
flex-grow: 1;
}
.post-card-meta {
font-size: var(--fs-xs);
color: var(--text-muted);
display: flex;
gap: var(--space-sm);
margin-bottom: var(--space-xs);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.post-card-title {
font-size: var(--fs-md);
margin-bottom: var(--space-xs);
}
.post-card-title a {
color: var(--text-primary);
transition: color var(--transition-fast);
}
.post-card-title a:hover {
color: var(--accent-secondary);
}
.post-card-excerpt {
color: var(--text-secondary);
font-size: var(--fs-sm);
margin-bottom: var(--space-md);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.post-card-footer {
margin-top: auto;
border-top: 1px solid var(--border-color);
padding-top: var(--space-sm);
}
.read-more-link {
font-family: var(--font-headings);
font-weight: 700;
font-size: var(--fs-sm);
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--accent-secondary);
}
.read-more-link svg {
width: 16px;
height: 16px;
transition: transform var(--transition-fast);
}
.post-card:hover .read-more-link svg {
transform: translateX(4px);
} .article-header {
text-align: center;
max-width: 800px;
margin: 0 auto var(--space-lg);
}
.article-title {
font-size: var(--fs-h1);
margin-bottom: var(--space-sm);
letter-spacing: -0.03em;
}
.article-meta {
display: flex;
justify-content: center;
gap: var(--space-md);
color: var(--text-muted);
font-size: var(--fs-sm);
}
.article-content {
max-width: 740px;
margin: 0 auto;
font-size: var(--fs-md);
line-height: var(--lh-body);
}
.article-content p {
margin-bottom: var(--space-md);
}
.article-content blockquote {
border-left: 4px solid var(--accent-primary);
margin: var(--space-md) 0;
padding-left: var(--space-md);
font-style: italic;
color: var(--text-secondary);
background-color: var(--bg-secondary);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
padding: var(--space-sm) var(--space-md);
} .site-footer {
background-color: var(--bg-secondary);
border-top: 1px solid var(--border-color);
padding: var(--space-xl) 0 var(--space-md);
font-size: var(--fs-sm);
color: var(--text-secondary);
}
.footer-widgets {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--space-lg);
margin-bottom: var(--space-xl);
}
.footer-widget h4 {
font-size: var(--fs-md);
margin-bottom: var(--space-sm);
border-bottom: 2px solid var(--accent-primary);
padding-bottom: 8px;
display: inline-block;
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid var(--border-color);
padding-top: var(--space-md);
flex-wrap: wrap;
gap: var(--space-md);
}
.footer-bottom p {
margin: 0;
}
.footer-nav ul {
display: flex;
gap: var(--space-md);
list-style: none;
padding: 0;
margin: 0;
}
.footer-nav a {
color: var(--text-muted);
transition: color var(--transition-fast);
}
.footer-nav a:hover {
color: var(--accent-secondary);
} @media (max-width: 991px) {
.menu-toggle {
display: block;
}
.main-navigation {
position: fixed;
top: 80px;
left: 0;
right: 0;
bottom: 0;
background-color: var(--bg-primary);
padding: var(--space-lg);
display: none;
z-index: 999;
}
.main-navigation.is-open {
display: block;
}
.main-navigation ul {
flex-direction: column;
align-items: center;
gap: var(--space-md);
}
.main-navigation a {
font-size: var(--fs-md);
width: 100%;
text-align: center;
display: block;
padding: var(--space-sm);
}
}
@media (max-width: 576px) {
.footer-bottom {
flex-direction: column;
text-align: center;
}
.footer-nav ul {
justify-content: center;
}
}