:root{
--bg:#0b0f14;
--panel:#101826;
--panel2:#0f1623;
--text:#e8eef7;
--muted:#9fb0c7;
--line:rgba(255,255,255,.08);
--accent:#4aa3ff;
--accent2:#7bd389;
--shadow:0 10px 30px rgba(0,0,0,.35);
--radius:14px;
--max:1120px;
--glow:rgba(74,163,255,.18);
--glow2:rgba(123,211,137,.14);
--cardTop:rgba(255,255,255,.08);
--cardBot:rgba(255,255,255,.03);
--focus:rgba(74,163,255,.38);
--brandLogo:52px;
--brandLogoMaxWidth:220px;
} *{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
background:
radial-gradient(1200px 600px at 20% -10%, rgba(74,163,255,.18), transparent 60%),
radial-gradient(900px 500px at 90% 0%, rgba(123,211,137,.12), transparent 55%),
var(--bg);
color:var(--text);
font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,"Apple Color Emoji","Segoe UI Emoji";
line-height:1.55;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
::selection{background:rgba(74,163,255,.24)}
:focus-visible{
outline:2px solid var(--focus);
outline-offset:2px;
border-radius:10px;
}
a{color:var(--text);text-decoration:none}
a:hover{color:var(--accent)}
img{max-width:100%;height:auto;display:block}
.container{max-width:var(--max);margin:0 auto;padding:0 16px} .site-header{
position:sticky;
top:0;
z-index:20;
background:rgba(11,15,20,.88);
backdrop-filter:blur(10px);
border-bottom:1px solid var(--line);
overflow:visible;
}
.site-header .header-inner{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
grid-template-areas:
"brand actions"
"nav nav";
align-items:center;
gap:12px 14px;
padding:14px 0;
min-width:0;
} .site-header .brand{
grid-area:brand;
min-width:0;
max-width:100%;
overflow:hidden;
}
.site-header .brand-link,
.site-header .custom-logo-link{
display:flex;
align-items:center;
gap:12px;
min-width:0;
max-width:100%;
overflow:hidden;
}
.site-header .brand-home{
display:flex;
flex-direction:column;
justify-content:center;
line-height:1.05;
min-width:0;
max-width:100%;
filter:drop-shadow(0 0 10px rgba(74,163,255,.10));
}
.site-header .brand-badge{
width:var(--brandLogo);
height:var(--brandLogo);
min-width:var(--brandLogo);
flex:0 0 var(--brandLogo);
border-radius:14px;
background:linear-gradient(135deg, rgba(74,163,255,.9), rgba(123,211,137,.85));
box-shadow:var(--shadow);
overflow:hidden;
}
.site-header .brand img,
.site-header .brand img.custom-logo{
display:block;
width:auto !important;
height:var(--brandLogo) !important;
max-height:var(--brandLogo) !important;
max-width:var(--brandLogoMaxWidth) !important;
min-width:0 !important;
object-fit:contain;
border-radius:12px;
flex:0 0 auto;
filter:drop-shadow(0 10px 22px var(--glow));
}
.site-header .brand-title{
font-weight:900;
font-size:32px;
line-height:1.05;
margin:0;
padding:0;
display:block;
max-width:none;
white-space:nowrap;
overflow:visible;
text-overflow:clip;
background:linear-gradient(180deg, #ffffff 0%, #d7e8ff 30%, #6fb2ff 100%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
text-shadow:
0 1px 0 rgba(0,0,0,.70),
0 2px 0 rgba(0,0,0,.55),
0 8px 18px rgba(0,0,0,.70),
0 0 10px rgba(74,163,255,.22);
}
.site-header .brand-tagline{
font-weight:600;
color:var(--muted);
font-size:12px;
line-height:1.2;
margin-top:3px;
opacity:.9;
text-shadow:0 1px 0 rgba(0,0,0,.6);
max-width:none;
white-space:nowrap;
overflow:visible;
text-overflow:clip;
} .site-header nav.nav{
grid-area:nav;
min-width:0;
display:block;
width:100%;
overflow-x:auto;
overflow-y:visible;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
padding-top:4px;
}
.site-header nav.nav::-webkit-scrollbar{
display:none;
}
.site-header nav.nav > ul,
.site-header nav.nav > .menu{
list-style:none;
margin:0;
padding:0;
display:flex;
flex-direction:row;
flex-wrap:nowrap;
gap:10px;
align-items:center;
justify-content:flex-start;
width:max-content;
min-width:100%;
}
.site-header nav.nav > ul > li,
.site-header nav.nav > .menu > li{
margin:0;
padding:0;
display:inline-flex;
align-items:center;
position:relative;
flex:0 0 auto;
}
.site-header nav.nav > ul > li > a,
.site-header nav.nav > .menu > li > a{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 12px;
border-radius:999px;
line-height:1;
white-space:nowrap;
color:var(--text);
text-decoration:none;
border:1px solid rgba(255,255,255,.16);
background:linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.04));
box-shadow:
0 14px 26px rgba(0,0,0,.55),
0 3px 0 rgba(0,0,0,.55),
inset 0 1px 0 rgba(255,255,255,.22),
inset 0 -2px 0 rgba(0,0,0,.55);
transform:translateY(-0.5px);
transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, filter .12s ease;
}
.site-header nav.nav > ul > li > a::before,
.site-header nav.nav > .menu > li > a::before{
content:"";
position:absolute;
left:10px;
right:10px;
top:6px;
height:40%;
border-radius:999px;
background:linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0));
pointer-events:none;
opacity:.9;
}
.site-header nav.nav > ul > li > a::after,
.site-header nav.nav > .menu > li > a::after{
content:"";
position:absolute;
inset:0;
border-radius:999px;
background:radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,.10), rgba(0,0,0,0) 60%);
pointer-events:none;
opacity:.9;
}
.site-header nav.nav > ul > li > a:hover,
.site-header nav.nav > .menu > li > a:hover{
border-color:rgba(74,163,255,.55);
transform:translateY(-2px);
filter:brightness(1.05);
box-shadow:
0 18px 32px rgba(0,0,0,.60),
0 4px 0 rgba(0,0,0,.60),
0 0 0 4px rgba(74,163,255,.12),
0 0 24px rgba(74,163,255,.22),
inset 0 1px 0 rgba(255,255,255,.26),
inset 0 -2px 0 rgba(0,0,0,.60);
}
.site-header nav.nav > ul > li > a:active,
.site-header nav.nav > .menu > li > a:active{
transform:translateY(0);
filter:brightness(0.98);
box-shadow:
0 10px 18px rgba(0,0,0,.55),
0 1px 0 rgba(0,0,0,.55),
inset 0 3px 10px rgba(0,0,0,.60);
}
.site-header nav.nav .current-menu-item > a,
.site-header nav.nav .current_page_item > a{
border-color:rgba(123,211,137,.55);
box-shadow:
0 18px 32px rgba(0,0,0,.60),
0 4px 0 rgba(0,0,0,.60),
0 0 0 4px rgba(123,211,137,.12),
0 0 24px rgba(123,211,137,.18),
inset 0 1px 0 rgba(255,255,255,.26),
inset 0 -2px 0 rgba(0,0,0,.60);
} .site-header nav.nav .sub-menu{
list-style:none;
margin:10px 0 0;
padding:10px;
position:absolute;
top:100%;
left:0;
min-width:220px;
display:none;
flex-direction:column;
gap:8px;
background:rgba(11,15,20,.96);
border:1px solid rgba(255,255,255,.12);
border-radius:14px;
box-shadow:0 18px 55px rgba(0,0,0,.60);
z-index:50;
}
.site-header nav.nav li:hover > .sub-menu{
display:flex;
}
.site-header nav.nav .sub-menu li{
display:flex;
margin:0;
padding:0;
}
.site-header nav.nav .sub-menu a{
display:flex;
width:100%;
justify-content:flex-start;
white-space:nowrap;
padding:10px 12px;
border-radius:12px;
border:1px solid rgba(255,255,255,.10);
background:rgba(255,255,255,.04);
box-shadow:none;
transform:none;
}
.site-header nav.nav .sub-menu a:hover{
border-color:rgba(74,163,255,.45);
background:rgba(255,255,255,.07);
box-shadow:none;
} .site-header .header-actions{
grid-area:actions;
display:flex;
gap:10px;
align-items:center;
justify-content:flex-end;
min-width:0;
}
.searchform,
.search-form{
display:flex;
gap:8px;
align-items:center;
}
.searchform input,
.search-form input[type="search"]{
width:180px;
max-width:180px;
padding:10px 12px;
border-radius:12px;
background:rgba(255,255,255,.06);
border:1px solid var(--line);
color:var(--text);
outline:none;
}
.searchform input:focus,
.search-form input[type="search"]:focus{
border-color:rgba(74,163,255,.5);
}
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 12px;
border-radius:12px;
border:1px solid var(--line);
background:rgba(255,255,255,.06);
color:var(--text);
}
.btn:hover{border-color:rgba(74,163,255,.45)} .card{
position:relative;
background:linear-gradient(180deg, var(--cardTop), var(--cardBot));
border:1px solid rgba(255,255,255,.10);
border-radius:var(--radius);
box-shadow:
0 22px 55px rgba(0,0,0,.55),
0 6px 18px rgba(0,0,0,.35);
overflow:hidden;
transform:translateZ(0);
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card::before{
content:"";
position:absolute;
inset:-2px;
background:
radial-gradient(900px 220px at 20% 0%, var(--glow), transparent 60%),
radial-gradient(900px 220px at 80% 0%, var(--glow2), transparent 60%);
opacity:.85;
pointer-events:none;
filter:blur(10px);
}
.card::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg, rgba(255,255,255,.10), transparent 30%);
opacity:.55;
pointer-events:none;
}
.card:hover{
transform:translateY(-4px);
border-color:rgba(74,163,255,.25);
box-shadow:
0 28px 70px rgba(0,0,0,.62),
0 10px 22px rgba(0,0,0,.38);
}
.card > *{position:relative;z-index:1}
.card-pad{padding:16px} .kicker{color:var(--muted);font-size:13px}
.h1{font-size:34px;line-height:1.15;margin:8px 0 10px;font-weight:900}
.h2{font-size:22px;margin:0 0 10px;font-weight:850}
.meta{color:var(--muted);font-size:13px;display:flex;gap:10px;flex-wrap:wrap} .hero{padding:26px 0 10px}
.hero-grid{
display:grid;
grid-template-columns:1.25fr .75fr;
gap:16px;
}
.grid{
display:grid;
grid-template-columns:repeat(12,1fr);
gap:16px;
padding:10px 0 28px;
}
.col-8{grid-column:span 8}
.col-4{grid-column:span 4}
.section-title{
display:flex;
align-items:center;
justify-content:space-between;
margin:18px 0 10px;
}
.section-title h2{
margin:0;
font-size:18px;
color:var(--text);
}
.pill{
font-size:12px;
padding:6px 10px;
border-radius:999px;
border:1px solid var(--line);
color:var(--muted);
background:rgba(255,255,255,.04);
} .post-card{
display:flex;
gap:12px;
padding:14px;
border-top:1px solid var(--line);
transition:transform .18s ease, background .18s ease;
}
.post-card:first-child{border-top:none}
.post-card:hover{
transform:translateY(-2px);
background:rgba(255,255,255,.03);
}
.thumb{
width:120px;
min-width:120px;
height:78px;
border-radius:12px;
background:rgba(255,255,255,.06);
border:1px solid var(--line);
overflow:hidden;
box-shadow:0 14px 30px rgba(0,0,0,.45);
}
.post-card h3{
margin:0 0 6px;
font-size:16px;
line-height:1.25;
}
.post-card p{
margin:0;
color:var(--muted);
font-size:13px;
} .single-wrap{padding:18px 0 34px}
.single-hero{padding:18px}
.single-hero h1{
margin:0 0 10px;
font-size:34px;
line-height:1.15;
}
.content{padding:0 18px 18px}
.content p{margin:0 0 14px}
.content h2{margin:22px 0 10px}
.content h3{margin:18px 0 8px}
.content ul{margin:0 0 14px;padding-left:18px}
.content blockquote{
margin:16px 0;
padding:14px 14px 14px 16px;
border-left:3px solid rgba(74,163,255,.6);
background:rgba(255,255,255,.04);
border-radius:12px;
color:var(--muted);
} .content a{color:var(--accent)}
.content a:hover{color:var(--text)}
.content img{border-radius:12px}
.content pre{
margin:0 0 14px;
padding:14px;
border-radius:12px;
border:1px solid var(--line);
background:rgba(255,255,255,.04);
overflow:auto;
}
.content code{
padding:2px 6px;
border-radius:10px;
border:1px solid var(--line);
background:rgba(255,255,255,.04);
}
.content table{
width:100%;
border-collapse:collapse;
margin:0 0 14px;
overflow:hidden;
border-radius:12px;
}
.content th,.content td{
border:1px solid var(--line);
padding:10px;
text-align:left;
}
.content th{background:rgba(255,255,255,.04)} nav.pagination,
.pagination{
width:100%;
display:flex;
justify-content:center;
margin:18px 0 0;
}
nav.pagination .page-numbers,
.pagination .page-numbers{
list-style:none;
margin:0;
padding:0;
display:flex;
flex-direction:row;
flex-wrap:wrap;
gap:10px;
align-items:center;
justify-content:center;
}
nav.pagination .page-numbers li,
.pagination .page-numbers li{
margin:0;
padding:0;
display:inline-flex;
width:auto;
float:none;
}
nav.pagination .page-numbers a,
nav.pagination .page-numbers span,
.pagination .page-numbers a,
.pagination .page-numbers span{
display:inline-flex;
align-items:center;
justify-content:center;
height:40px;
min-width:40px;
padding:0 14px;
border-radius:999px;
text-decoration:none;
line-height:1;
white-space:nowrap;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.10);
color:var(--text);
}
nav.pagination .page-numbers a:hover,
.pagination .page-numbers a:hover{
background:rgba(255,255,255,.08);
border-color:rgba(255,255,255,.18);
}
nav.pagination .page-numbers .current,
.pagination .page-numbers .current{
background:rgba(255,255,255,.12);
border-color:rgba(255,255,255,.25);
font-weight:700;
}
nav.pagination .page-numbers .prev,
nav.pagination .page-numbers .next,
.pagination .page-numbers .prev,
.pagination .page-numbers .next{
padding:0 16px;
} .site-footer{
border-top:1px solid var(--line);
padding:18px 0;
color:var(--muted);
}
.footer-inner{
display:flex;
gap:12px;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
} html.is-auth-open,
html.is-auth-open body{overflow:hidden}
.auth-modal{
position:fixed;
inset:0;
z-index:9999;
display:none;
}
.auth-modal.is-open{display:block}
.auth-backdrop{
position:absolute;
inset:0;
background:rgba(0,0,0,.60);
backdrop-filter:blur(6px);
}
.auth-dialog{
position:relative;
width:min(520px, calc(100% - 28px));
margin:10vh auto 0;
background:linear-gradient(180deg, var(--cardTop), var(--cardBot));
border:1px solid rgba(255,255,255,.12);
border-radius:18px;
box-shadow:0 30px 90px rgba(0,0,0,.65);
overflow:hidden;
}
.auth-head{
display:flex;
align-items:center;
justify-content:space-between;
padding:14px 16px;
border-bottom:1px solid var(--line);
}
.auth-title{font-weight:900;letter-spacing:.2px}
.auth-x{
border:1px solid var(--line);
background:rgba(255,255,255,.06);
color:var(--text);
border-radius:12px;
padding:8px 10px;
cursor:pointer;
}
.auth-x:hover{border-color:rgba(74,163,255,.45)}
.auth-tabs{
display:flex;
gap:8px;
padding:12px 16px;
border-bottom:1px solid var(--line);
}
.auth-tab{
border:1px solid var(--line);
background:rgba(255,255,255,.05);
color:var(--muted);
border-radius:999px;
padding:8px 12px;
cursor:pointer;
}
.auth-tab.is-active{
color:var(--text);
border-color:rgba(74,163,255,.35);
background:rgba(74,163,255,.10);
}
.auth-pane{display:none;padding:14px 16px 16px}
.auth-pane.is-active{display:block}
.auth-form{display:flex;flex-direction:column;gap:10px}
.auth-label{
display:flex;
flex-direction:column;
gap:6px;
color:var(--muted);
font-size:13px;
}
.auth-input{
padding:10px 12px;
border-radius:12px;
background:rgba(255,255,255,.06);
border:1px solid var(--line);
color:var(--text);
outline:none;
}
.auth-input:focus{border-color:rgba(74,163,255,.5)}
.auth-check{
display:flex;
gap:10px;
align-items:center;
color:var(--muted);
font-size:13px;
margin-top:2px;
}
.auth-btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 12px;
border-radius:12px;
border:1px solid var(--line);
background:rgba(255,255,255,.06);
color:var(--text);
cursor:pointer;
}
.auth-btn:hover{border-color:rgba(74,163,255,.45)}
.auth-btn--primary{
border-color:rgba(74,163,255,.40);
background:rgba(74,163,255,.12);
}
.auth-btn--primary:hover{background:rgba(74,163,255,.16)}
.auth-btn--ghost{background:transparent}
.auth-actions{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top:6px;
}
.auth-note{
margin:0 0 10px;
padding:10px 12px;
border-radius:12px;
border:1px solid var(--line);
background:rgba(255,255,255,.04);
color:var(--muted);
font-size:13px;
}
.auth-note--bad{
border-color:rgba(255,92,92,.35);
background:rgba(255,92,92,.10);
color:rgba(255,255,255,.92);
}
.auth-note--ok{
border-color:rgba(123,211,137,.35);
background:rgba(123,211,137,.10);
color:rgba(255,255,255,.92);
} @media (max-width: 920px){
.hero-grid{grid-template-columns:1fr}
.col-8,.col-4{grid-column:span 12}
:root{
--brandLogo:46px;
--brandLogoMaxWidth:180px;
}
.site-header .header-inner{
grid-template-columns:1fr auto;
grid-template-areas:
"brand actions"
"nav nav";
row-gap:10px;
}
.site-header .brand{
max-width:none;
}
.site-header nav.nav{
overflow-x:visible;
}
.site-header .brand-title{
font-size:26px;
max-width:none;
white-space:normal;
overflow:visible;
text-overflow:clip;
}
.site-header .brand-tagline{
font-size:12px;
max-width:none;
white-space:normal;
overflow:visible;
text-overflow:clip;
}
.searchform input,
.search-form input[type="search"]{
width:160px;
max-width:160px;
}
.site-header nav.nav > ul,
.site-header nav.nav > .menu{
width:100%;
min-width:0;
flex-wrap:wrap;
}
}
@media (max-width: 520px){
:root{
--brandLogo:40px;
--brandLogoMaxWidth:140px;
}
.site-header .brand-title{
font-size:21px;
white-space:normal;
overflow:visible;
text-overflow:clip;
text-shadow:
0 1px 0 rgba(0,0,0,.70),
0 2px 0 rgba(0,0,0,.55),
0 6px 14px rgba(0,0,0,.65),
0 0 10px rgba(74,163,255,.28);
}
.site-header .brand-tagline{
display:none;
}
.searchform input,
.search-form input[type="search"]{
width:132px;
max-width:132px;
}
} .content .wp-block-image,
.content figure.wp-block-image{margin:14px 0}
.content .wp-block-image img,
.content figure.wp-block-image img,
.content p > img{
display:block;
width:100%;
max-width:100%;
height:auto;
border-radius:12px;
}
.content figcaption{
margin-top:8px;
font-size:12px;
color:var(--muted);
opacity:.9;
} .sb-top-podium{
display:flex;
flex-direction:row;
justify-content:center;
align-items:stretch;
gap:16px;
margin:24px 0 24px;
flex-wrap:wrap;
}
.sb-top-podium .sb-podium-item{
flex:1 1 180px;
min-width:180px;
max-width:240px;
background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
border:1px solid rgba(255,255,255,.10);
border-radius:14px;
padding:16px 14px;
text-align:center;
box-shadow:
0 18px 40px rgba(0,0,0,.55),
0 6px 18px rgba(0,0,0,.35);
}
.sb-top-podium .sb-podium-1,
.sb-top-podium .sb-podium-2,
.sb-top-podium .sb-podium-3{
transform:none;
margin-bottom:0;
background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
}
.sb-top-podium .sb-place{
font-size:28px;
line-height:1;
margin:0 0 8px;
}
.sb-top-podium .sb-name{
font-weight:800;
margin:0 0 6px;
}
.sb-top-podium .sb-score{
font-size:13px;
opacity:.85;
margin:0;
}
@media (max-width:700px){
.sb-top-podium{
flex-direction:column;
align-items:center;
}
.sb-top-podium .sb-podium-item{
width:100%;
max-width:320px;
min-width:0;
}
}