:where(html.js) .bp-cover.reveal{
animation: sp-reveal 0.95s var(--ease-out) both;
animation-delay: var(--d, 0ms);
}
.lg-title-row{
display: flex;
align-items: center;
gap: 1rem;
margin-top: 1.4rem;
}
.lg-title-row h1{ margin: 0; }
.lg-contact{
margin-top: 2.5rem;
padding: 1.4rem 1.5rem;
border: 1px solid var(--mint-line);
border-radius: 1.2rem;
background: var(--mint-soft);
}
.lg-contact p{ margin: 0; color: var(--muted); }
@media (max-width: 600px){
.lg-title-row{ flex-direction: column; align-items: flex-start; gap: 0.9rem; }
}
.sv-back{
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
color: var(--muted);
transition: color 0.4s var(--ease-out);
}
.sv-back svg{ width: 0.95rem; height: 0.95rem; transition: transform 0.4s var(--ease-out); }
@media (hover: hover) and (pointer: fine){
.sv-back:hover{ color: var(--text); }
.sv-back:hover svg{ transform: translateX(-3px); }
}
.bl-layout{
display: grid;
grid-template-columns: 1fr 20rem;
gap: clamp(1.5rem, 3vw, 2.75rem);
align-items: start;
}
.bl-main{ min-width: 0; }
.bl-side{ align-self: stretch; }
.bl-side::-webkit-scrollbar{ width: 6px; }
.bl-side::-webkit-scrollbar-thumb{ background: var(--line-strong); border-radius: 999px; }
.bl-widget{
border: 1px solid var(--line);
border-radius: 1.2rem;
background: linear-gradient(170deg, rgba(var(--wash-rgb), 0.045), rgba(var(--wash-rgb), 0.01));
padding: 1.15rem 1.2rem;
}
.bl-widget :is(h2, h4){
font-family: var(--font-mono);
font-weight: 500;
font-size: 0.6rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--faint);
margin-bottom: 0.95rem;
}
.bl-widget--search{ padding: 0.75rem; }
.bl-search{
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.6rem 0.75rem;
border: 1px solid var(--line);
border-radius: 0.85rem;
background: rgba(var(--shadow-rgb), 0.3);
transition: border-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.bl-search:focus-within{
border-color: var(--mint-line);
box-shadow: 0 0 0 3px rgba(var(--mint-rgb), 0.12);
}
.bl-search .ico{ width: 1.1rem; height: 1.1rem; flex: none; color: var(--mint); }
.bl-search input{
flex: 1;
min-width: 0;
border: 0;
background: none;
outline: none;
color: var(--text);
font-family: var(--font-body);
font-size: 0.92rem;
}
.bl-search input::placeholder{ color: var(--faint); }
.bl-search input::-webkit-search-cancel-button{ display: none; }
.bl-clear{
display: inline-flex;
border: 0;
background: none;
padding: 0.15rem;
color: var(--faint);
cursor: pointer;
transition: color 0.3s var(--ease-out);
}
.bl-clear svg{ width: 0.9rem; height: 0.9rem; }
@media (hover: hover) and (pointer: fine){
.bl-clear:hover{ color: var(--mint); }
}
.bl-hits{
margin-top: 0.6rem;
padding-left: 0.25rem;
font-family: var(--font-mono);
font-size: 0.62rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mint);
}
.bl-cats{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.bl-cat-btn{
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
width: 100%;
padding: 0.55rem 0.7rem;
border: 1px solid transparent;
border-radius: 0.7rem;
background: none;
color: var(--muted);
font-family: var(--font-body);
font-size: 0.92rem;
text-align: left;
cursor: pointer;
transition:
color 0.35s var(--ease-out),
border-color 0.35s var(--ease-out),
background-color 0.35s var(--ease-out);
}
.bl-cat-btn span{
font-family: var(--font-mono);
font-size: 0.66rem;
color: var(--faint);
transition: color 0.35s var(--ease-out);
}
.bl-cat-btn.active{
color: var(--mint);
border-color: var(--mint-line);
background: var(--mint-soft);
}
.bl-cat-btn.active span{ color: var(--mint); }
@media (hover: hover) and (pointer: fine){
.bl-cat-btn:not(.active):hover{ color: var(--text); background: var(--panel-2); }
}
.bl-recent{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.8rem; }
.bl-recent a{
display: flex;
gap: 0.75rem;
align-items: center;
}
.bl-recent img{
width: 3.4rem;
height: 2.6rem;
flex: none;
object-fit: cover;
border-radius: 0.55rem;
border: 1px solid var(--line);
filter: saturate(0.85) brightness(0.9);
transition: filter 0.4s var(--ease-out);
}
.bl-recent span{ display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.bl-recent strong{
font-family: var(--font-display);
font-weight: 600;
font-size: 0.85rem;
line-height: 1.3;
color: var(--text);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color 0.35s var(--ease-out);
}
.bl-recent em{
font-style: normal;
font-size: 0.7rem;
color: var(--faint);
}
@media (hover: hover) and (pointer: fine){
.bl-recent a:hover strong{ color: var(--mint); }
.bl-recent a:hover img{ filter: saturate(1.05) brightness(1); }
}
.bl-active{
display: flex;
align-items: center;
gap: 0.6rem;
margin-bottom: 1.2rem;
font-size: 0.85rem;
}
.bl-active-label{ color: var(--faint); }
.bl-active-chip{
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.35rem 0.75rem;
border: 1px solid var(--mint-line);
border-radius: 999px;
background: var(--mint-soft);
color: var(--mint);
font-family: var(--font-body);
font-size: 0.82rem;
cursor: pointer;
transition: background-color 0.35s var(--ease-out);
}
.bl-active-chip svg{ width: 0.8rem; height: 0.8rem; }
@media (hover: hover) and (pointer: fine){
.bl-active-chip:hover{ background: rgba(var(--mint-rgb), 0.2); }
}
.bl-list{
display: flex;
flex-direction: column;
gap: 1rem;
}
.bl-date{ color: var(--faint); }
.bl-dot{ color: var(--faint); opacity: 0.6; }
.bl-empty{
text-align: center;
color: var(--faint);
padding: 3rem 0;
}
.bp-wrap{ padding-bottom: clamp(4rem, 8vw, 6rem); }
.bp-title{
margin-top: 1rem;
font-size: clamp(1.9rem, 4vw, 2.9rem);
line-height: 1.14;
}
.bp-meta{
display: flex;
align-items: center;
gap: 0.7rem;
flex-wrap: wrap;
margin-top: 1.5rem;
font-size: 0.86rem;
color: var(--muted);
}
.bp-meta strong{ font-family: var(--font-display); font-weight: 600; color: var(--text); }
.bp-meta-sep{
width: 1px;
height: 1.6rem;
background: var(--line-strong);
margin-inline: 0.3rem;
}
.bp-cover{
margin: 2rem 0 0;
border-radius: 1.4rem;
overflow: hidden;
border: 1px solid var(--line);
aspect-ratio: 16 / 9;
background: var(--panel);
}
.bp-cover img{ width: 100%; height: 100%; object-fit: cover; }
.bp-content{
margin-top: 2.5rem;
display: flex;
flex-direction: column;
gap: 1.15rem;
}
.bp-content p{
color: var(--muted);
font-size: 1.06rem;
line-height: 1.75;
}
.bp-content .bp-lead{
color: var(--text);
font-size: 1.2rem;
line-height: 1.65;
font-weight: 500;
}
.bp-content h2{
margin-top: 1.4rem;
font-size: clamp(1.4rem, 2.4vw, 1.8rem);
}
.bp-content h3{ margin-top: 1rem; font-size: 1.2rem; }
.bp-content h4{ margin-top: 0.8rem; font-size: 1.05rem; color: var(--text); }
.bp-content a{
color: var(--mint);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: var(--mint-line);
transition: text-decoration-color 0.35s var(--ease-out);
}
@media (hover: hover) and (pointer: fine){
.bp-content a:hover{ text-decoration-color: var(--mint); }
}
.bp-list{
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.bp-list li{
position: relative;
padding-left: 1.6rem;
color: var(--muted);
font-size: 1.02rem;
line-height: 1.7;
}
.bp-list li::before{
content: "";
position: absolute;
left: 0.15rem;
top: 0.72em;
width: 0.45rem;
height: 0.45rem;
border-radius: 50%;
background-image: var(--grad);
}
.bp-quote{
margin: 0.6rem 0;
padding: 1.2rem 1.4rem;
border-left: 2px solid var(--mint);
border-radius: 0 1rem 1rem 0;
background: var(--mint-soft);
}
.bp-quote p{ color: var(--text); font-size: 1.08rem; font-style: italic; }
.bp-quote cite{
display: block;
margin-top: 0.6rem;
font-style: normal;
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--faint);
}
.bp-callout{
display: flex;
gap: 0.9rem;
align-items: flex-start;
padding: 1.2rem 1.35rem;
border: 1px solid var(--mint-line);
border-radius: 1.1rem;
background: var(--mint-soft);
}
.bp-callout svg{
width: 1.3rem;
height: 1.3rem;
flex: none;
margin-top: 0.2rem;
color: var(--mint);
}
.bp-callout svg .s{
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.bp-callout p{ color: var(--text); font-size: 0.98rem; }
.bp-fig{ margin: 0.8rem 0; }
.bp-fig img{
width: 100%;
border-radius: 1.1rem;
border: 1px solid var(--line);
}
.bp-fig figcaption{
margin-top: 0.6rem;
font-size: 0.82rem;
color: var(--faint);
text-align: center;
}
.bp-tags{
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 2.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--line);
}
.tag--link{ transition: color 0.35s var(--ease-out), background-color 0.35s var(--ease-out); }
@media (hover: hover) and (pointer: fine){
.tag--link:hover{ color: var(--mint); background: var(--mint-soft); }
}
.bp-comments{ max-width: 46rem; margin-top: 3rem; }
.bp-comments h2{ font-size: 1.4rem; margin-bottom: 1.2rem; }
.bp-comments h2 span{
font-family: var(--font-mono);
font-size: 0.8rem;
color: var(--mint);
vertical-align: middle;
}
.bp-comment{
padding: 1.1rem 1.3rem;
border: 1px solid var(--line);
border-radius: 1.1rem;
background: var(--shell);
margin-bottom: 0.8rem;
}
.bp-comment.reply{ margin-left: clamp(1rem, 4vw, 2.5rem); border-color: var(--mint-line); background: var(--mint-soft); }
.bp-c-head{
display: flex;
align-items: center;
gap: 0.6rem;
margin-bottom: 0.6rem;
font-size: 0.85rem;
}
.bp-c-head strong{ font-family: var(--font-display); color: var(--text); }
.bp-comment p{ color: var(--muted); font-size: 0.95rem; line-height: 1.65; }
.bp-usluga{
margin-top: 2.5rem;
padding: 1.1rem 1.25rem;
border: 1px solid var(--line);
border-radius: 1rem;
background: var(--shell);
}
.bp-usluga-cap{
display: block;
margin-bottom: 0.45rem;
font-family: var(--font-mono);
font-size: 0.62rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
}
.bp-usluga a{
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 0.4rem 1rem;
color: var(--text);
}
.bp-usluga strong{ font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; }
.bp-usluga em{ font-style: normal; font-weight: 600; color: var(--mint); }
.bp-usluga a:hover em{ text-decoration: underline; text-underline-offset: 0.2em; }
.bp-toc-m{ display: none; }
@media (max-width: 1100px){
.bp-toc-m{
display: block;
margin: 0 0 2rem;
border: 1px solid var(--line);
border-radius: 1rem;
background: var(--shell);
}
.bp-toc-m summary{
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.95rem 1.15rem;
list-style: none;
cursor: pointer;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
}
.bp-toc-m summary::-webkit-details-marker{ display: none; }
.bp-toc-m summary::after{ content: "+"; font-size: 1.15rem; color: var(--mint); }
.bp-toc-m[open] summary::after{ content: "−"; }
.bp-toc-m ul{ list-style: none; margin: 0; padding: 0 1.15rem 1.1rem; display: grid; gap: 0.55rem; }
.bp-toc-m li.h3{ padding-left: 1rem; }
.bp-toc-m a{ color: var(--text); font-size: 0.98rem; line-height: 1.45; }
}
@media (max-width: 1020px){
.bl-layout{ grid-template-columns: 1fr; }
.bl-side{ order: -1; }
}
@media (max-width: 768px){
.bp-meta-sep{ display: none; }
}
.bp-progress{
position: fixed;
top: 0;
left: 0;
right: 0;
height: 3px;
z-index: 45;
background: rgba(var(--wash-rgb), 0.06);
pointer-events: none;
}
.bp-progress span{
display: block;
height: 100%;
width: 100%;
transform: scaleX(0);
transform-origin: 0 50%;
background-image: var(--grad);
box-shadow: 0 0 12px rgba(var(--mint-rgb), 0.6);
}
.bp-head{ max-width: 46rem; }
.bp-excerpt{
margin-top: 1.1rem;
color: var(--muted);
font-size: 1.12rem;
line-height: 1.6;
}
.bp-author-inline{ display: flex; flex-direction: column; line-height: 1.35; }
.bp-cover{ max-width: 58rem; }
.bp-cols{
display: grid;
grid-template-columns: minmax(0, 1fr) 14rem;
gap: clamp(2rem, 4vw, 3.5rem);
align-items: start;
margin-top: 2.5rem;
}
.bp{ max-width: 46rem; min-width: 0; }
.bp-content{ margin-top: 0; }
.bp-content .bp-lead::first-letter{
float: left;
font-family: var(--font-display);
font-size: 3.2rem;
line-height: 0.86;
font-weight: 600;
padding: 0.1em 0.14em 0 0;
background-image: var(--grad-ink);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
.bp-content h2{ scroll-margin-top: 7rem; }
.bp-content h3{ scroll-margin-top: 7rem; }
.bp-toc-wrap{ position: relative; }
.bp-toc{
position: sticky;
top: 6.5rem;
max-height: calc(100vh - 9rem);
overflow-y: auto;
padding: 1.15rem 1.2rem;
border: 1px solid var(--line);
border-radius: 1.2rem;
background: linear-gradient(170deg, rgba(var(--wash-rgb), 0.045), rgba(var(--wash-rgb), 0.01));
scrollbar-width: thin;
scrollbar-color: var(--line-strong) transparent;
}
.bp-toc :is(h2, h4){
font-family: var(--font-mono);
font-weight: 500;
font-size: 0.6rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--faint);
margin-bottom: 0.9rem;
}
.bp-toc ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.bp-toc a{
display: block;
padding: 0.4rem 0.6rem 0.4rem 0.75rem;
border-left: 2px solid var(--line);
font-size: 0.84rem;
line-height: 1.4;
color: var(--muted);
transition: color 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
.bp-toc li.h3 a{ padding-left: 1.4rem; font-size: 0.8rem; }
.bp-toc a.active{
color: var(--mint);
border-left-color: var(--mint);
}
@media (hover: hover) and (pointer: fine){
.bp-toc a:hover{ color: var(--text); border-left-color: var(--mint-line); }
}
.bp-share{
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
margin-top: 2rem;
padding: 1.1rem 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.bp-share-label{
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--faint);
}
.bp-share-btns{ display: flex; gap: 0.5rem; }
.bp-sh{
position: relative;
width: 2.5rem;
height: 2.5rem;
border-radius: 0.8rem;
border: 1px solid var(--line);
background: var(--shell);
color: var(--muted);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition:
color 0.35s var(--ease-out),
border-color 0.35s var(--ease-out),
transform 0.35s var(--ease-out);
}
.bp-sh svg{ width: 1.05rem; height: 1.05rem; }
.bp-sh svg .d{ fill: currentColor; }
.bp-sh svg .s{ fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine){
.bp-sh:hover{ color: var(--mint); border-color: var(--mint-line); transform: translateY(-2px); }
}
.bp-copied{
position: absolute;
bottom: calc(100% + 0.4rem);
left: 50%;
transform: translateX(-50%) translateY(4px);
padding: 0.25rem 0.55rem;
border-radius: 0.45rem;
background: var(--mint-fill);
color: var(--mint-ink);
font-family: var(--font-mono);
font-size: 0.58rem;
letter-spacing: 0.1em;
text-transform: uppercase;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.bp-copy.done .bp-copied{ opacity: 1; transform: translateX(-50%) translateY(0); }
.bp-author{
display: flex;
gap: 1.1rem;
align-items: flex-start;
margin-top: 2rem;
padding: 1.4rem 1.5rem;
border: 1px solid var(--line);
border-radius: 1.3rem;
background: linear-gradient(170deg, rgba(var(--wash-rgb), 0.05), rgba(var(--wash-rgb), 0.012));
}
.bp-author-cap{
display: block;
font-family: var(--font-mono);
font-size: 0.58rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--faint);
}
.bp-author strong{
display: block;
margin-top: 0.25rem;
font-family: var(--font-display);
font-size: 1.05rem;
color: var(--text);
}
.bp-author p{ margin-top: 0.4rem; color: var(--muted); font-size: 0.92rem; line-height: 1.6; }
@media (max-width: 1100px){
.bp-cols{ grid-template-columns: minmax(0, 1fr); }
.bp-toc-wrap{ display: none; }
}
@media (max-width: 768px){
.bp-content .bp-lead::first-letter{ font-size: 2.6rem; }
}
.bp-toc-wrap{ align-self: stretch; }
@media (prefers-color-scheme: light){
html:not(.theme-dark) .bl-recent img{ filter: none; }
}
html.theme-light .bl-recent img{ filter: none; }
.nav-lang-btn{ -webkit-appearance: none; appearance: none; }
@media (max-width: 768px){
.bl-widget :is(h2, h4),.bl-hits,.bl-cat-btn span,.bl-recent em,.bp-quote cite,.bp-usluga-cap,.bp-toc-m summary,.bp-toc :is(h2, h4),.bp-share-label,.bp-copied,.bp-author-cap{
font-size: 0.75rem;
}
}
@media (max-width: 768px){
.bp-share-label,.bl-date,.bp-toc h4{
font-size: 0.75rem;
letter-spacing: 0.16em;
}
.tag--link{
font-size: 0.75rem;
padding: 0.5rem 0.85rem;
}
.bl-hits{
font-size: 0.85rem;
}
.bp-content p{
font-size: 1rem;
line-height: 1.65;
}
.bp-title{ line-height: 1.12; letter-spacing: -0.025em; }
.bl-cat-btn{
min-height: 44px;
}
.sv-back,.bl-clear,.bp-share .bp-sh{
position: relative;
}
.sv-back::after,.bl-clear::after{
content: "";
position: absolute;
inset: 50% 0 auto 50%;
width: max(100%, 44px);
height: max(100%, 44px);
transform: translate(-50%, -50%);
}
.bp-sh{
min-width: 44px;
min-height: 44px;
}
.bl-recent a,.bp-toc a{
min-height: 44px;
display: flex;
align-items: center;
gap: 0.6rem;
}
.bp-tags .tag{
min-height: 44px;
display: inline-flex;
align-items: center;
}
.bl-side,.bl-widget,.bl-search{
min-width: 0;
max-width: 100%;
}
.bl-cat-btn:active{
transform: scale(0.978);
transition: transform 90ms ease-out;
}
.bp-toc a:active{
opacity: 0.6;
transition: opacity 90ms ease-out;
}
.bl-layout > *,.bp-cols > *,.bl-list > *{
min-width: 0;
}
.bl-cats{ display: flex; flex-direction: column; gap: 0.35rem; }
.bl-cats > li{ width: 100%; }
.bl-cat-btn{ width: 100%; justify-content: flex-start; }
.bl-cat-btn{
flex: 0 0 auto;
scroll-snap-align: start;
}
}
@media (max-width: 380px){
.bl-list > *{
min-width: 0;
}
.bp-content,.bp-content p{ overflow-wrap: anywhere; }
}
@media (prefers-contrast: more){
.bl-cat-btn{ border-color: var(--line-strong); }
}
@media (max-width: 640px){
.bl-cats{
flex-direction: row;
flex-wrap: nowrap;
overflow-x: auto;
gap: 0.5rem;
scroll-snap-type: x proximity;
padding-bottom: 0.3rem;
}
.bl-cats > li{ width: auto; flex: none; scroll-snap-align: start; }
.bl-cat-btn{ width: auto; white-space: nowrap; border-color: var(--line); border-radius: 999px; }
.bl-widget:has(.bl-recent){ display: none; }
}
@media (max-width: 640px){
.bl-cats{ scrollbar-width: none; }
.bl-cats::-webkit-scrollbar{ display: none; }
}
@media (prefers-reduced-motion: reduce){
html:not(.motion-on) .bp-cover.reveal{
animation-name: sp-reveal-fade;
animation-duration: 0.3s;
}
html:not(.motion-on) .bl-cats{
scroll-behavior: auto;
}
html:not(.motion-on) .bl-cat-btn:active{
transform: scale(0.985);
transition: transform 80ms ease-out;
}
}
html.motion-off .bp-cover.reveal{
animation-name: sp-reveal-fade;
animation-duration: 0.3s;
}
html.motion-off .bl-cats{
scroll-behavior: auto;
}
html.motion-off .bl-cat-btn:active{
transform: scale(0.985);
transition: transform 80ms ease-out;
}