/* =========================================================
Javlonbek Yokubov — Blog
Magazine layout (Fyrre-inspired) rendered in the site's
dark AI-tech language. Loads AFTER styles.css, so all
tokens, header, footer, buttons and reveal motion are reused.
========================================================= */
/* =========================================================
i18n — pure-CSS language block switching.
Every translatable chunk exists three times as siblings:
…
…
…
Only the block matching is shown. `revert`
restores the element's natural display (div→block, span→inline),
so the mechanism works for both inline labels and prose blocks.
========================================================= */
[data-lang-block] { display: none; }
html[data-lang="en"] [data-lang-block="en"],
html[data-lang="ru"] [data-lang-block="ru"],
html[data-lang="uz"] [data-lang-block="uz"] { display: revert; }
/* =========================================================
Language toggle (segmented pill in the header)
========================================================= */
.lang-toggle {
display: inline-flex; align-items: center; gap: 2px;
padding: 3px; border: 1px solid var(--line-strong);
border-radius: var(--r-pill); background: rgba(255,255,255,.02);
}
.lang-btn {
font-family: var(--mono); font-size: .72rem; letter-spacing: .06em;
text-transform: uppercase; color: var(--text-mute);
padding: .3rem .62rem; border: 0; border-radius: var(--r-pill);
background: transparent; cursor: pointer;
transition: color .3s var(--ease), background .3s var(--ease);
}
.lang-btn:hover { color: var(--text); }
.lang-btn[aria-pressed="true"] {
color: #06070a; font-weight: 600;
background: var(--grad);
box-shadow: 0 6px 20px -10px var(--accent-glow);
}
/* header layout tweak: brand | nav | lang | cv */
.site-header .lang-toggle { flex: none; }
/* =========================================================
Blog page top spacing (fixed header offset) + intro
========================================================= */
.blog-main { padding-top: 72px; }
.blog-intro {
padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(2.5rem, 5vw, 4rem);
position: relative; overflow: hidden;
}
.blog-intro::before {
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
background:
radial-gradient(60% 60% at 82% 0%, rgba(124,140,255,.08), transparent 64%),
radial-gradient(55% 55% at 6% 100%, rgba(34,211,238,.05), transparent 62%);
}
.blog-intro > .wrap { position: relative; z-index: 1; }
.blog-intro-title {
font-family: var(--display); font-weight: 600;
font-size: clamp(3rem, 8vw, 6rem);
line-height: .96; letter-spacing: -0.04em; color: var(--text);
margin: .5rem 0 1.6rem;
}
.blog-intro-title .acc {
color: transparent; background: var(--grad);
-webkit-background-clip: text; background-clip: text;
}
.blog-intro-lead {
max-width: 58ch; color: var(--text-mute);
font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.62;
}
/* =========================================================
Cover art — no external images. Each cover is a tech-styled
tile: dot-grid + gradient wash + a big mono index glyph.
========================================================= */
.cover {
position: relative; overflow: hidden;
border-radius: var(--r-lg);
background: var(--surface);
border: 1px solid var(--line);
aspect-ratio: 16 / 10;
display: grid; place-items: center;
isolation: isolate;
}
.cover::before { /* dot-grid texture */
content: ""; position: absolute; inset: 0; z-index: 0; opacity: .34;
background-image: radial-gradient(circle at center, rgba(255,255,255,.05) 1px, transparent 1px);
background-size: 22px 22px;
}
.cover::after { /* gradient wash (quiet) */
content: ""; position: absolute; inset: 0; z-index: 0;
background: radial-gradient(80% 90% at 78% 12%, rgba(124,140,255,.15), transparent 62%),
radial-gradient(70% 80% at 10% 96%, rgba(34,211,238,.09), transparent 62%);
}
.cover-glyph {
position: relative; z-index: 1;
font-family: var(--mono); font-weight: 500;
font-size: clamp(2rem, 6vw, 3.4rem); letter-spacing: .04em;
color: var(--text-soft); opacity: .78;
text-shadow: 0 0 22px rgba(124,140,255,.22);
}
.cover.cyan::after {
background: radial-gradient(80% 90% at 20% 10%, rgba(34,211,238,.15), transparent 62%),
radial-gradient(70% 80% at 92% 96%, rgba(124,140,255,.08), transparent 62%);
}
.cover.mono::after {
background: radial-gradient(90% 100% at 50% 0%, rgba(124,140,255,.08), transparent 64%);
}
/* =========================================================
Featured article (the magazine lead)
========================================================= */
.featured { padding-block: clamp(1rem, 3vw, 2rem) var(--section-y); }
.featured-card {
display: grid; grid-template-columns: 1.05fr 1fr;
gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
}
.featured-card .cover { aspect-ratio: 4 / 3; }
.featured-card .cover-glyph { font-size: clamp(2.6rem, 7vw, 4.6rem); }
.featured-body { min-width: 0; }
.post-cat {
display: inline-flex; align-items: center; gap: .5rem;
font-family: var(--mono); font-size: .7rem; font-weight: 500;
letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
margin-bottom: 1rem;
}
.post-cat::before {
content: ""; width: 5px; height: 5px; border-radius: 50%; flex: none;
background: var(--accent);
}
.featured-title {
font-family: var(--display); font-weight: 600;
font-size: clamp(2.2rem, 4.8vw, 3.4rem); line-height: 1.04;
letter-spacing: -0.025em; color: var(--text); margin-bottom: 1.15rem;
}
.featured-title a { transition: color .35s var(--ease); }
.featured-card:hover .featured-title a { color: var(--accent-bright); }
.featured-excerpt { color: var(--text-mute); max-width: 54ch; margin-bottom: 1.7rem; font-size: 1.08rem; }
/* meta byline (author · date · read time) */
.post-meta {
display: flex; flex-wrap: wrap; align-items: center; gap: .55rem;
font-family: var(--mono); font-size: .74rem; letter-spacing: .04em;
color: var(--text-mute); margin-bottom: 1.6rem;
}
.post-meta .sep { color: var(--text-faint); }
.post-meta .author { color: var(--text-soft); }
.read-link {
display: inline-flex; align-items: center; gap: .5rem;
font-family: var(--sans); font-weight: 500; font-size: .95rem; color: var(--text);
padding: .62rem 1.25rem; border: 1px solid var(--line-strong); border-radius: var(--r-pill);
transition: border-color .3s var(--ease), color .3s var(--ease),
transform .3s var(--ease), box-shadow .3s var(--ease);
}
.read-link:hover { border-color: var(--accent); color: var(--accent-bright); transform: translateY(-2px); box-shadow: var(--glow-accent); }
.read-link svg { transition: transform .35s var(--ease); }
.read-link:hover svg { transform: translateX(3px); }
/* =========================================================
Article grid ("More writing")
========================================================= */
.grid-section { padding-block: var(--section-y); }
.post-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem;
margin-top: clamp(2.5rem, 4.5vw, 3.5rem);
}
.post-card {
display: flex; flex-direction: column;
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--r-lg); padding: 1rem 1rem 1.5rem;
transition: transform .4s var(--ease), border-color .4s var(--ease),
box-shadow .4s var(--ease), background .4s var(--ease);
}
.post-card:hover:not(.is-draft) {
transform: translateY(-4px); border-color: var(--line-strong);
box-shadow: 0 22px 46px -28px rgba(0,0,0,.8); background: var(--surface-2);
}
.post-card .cover { aspect-ratio: 16 / 10; margin-bottom: 1.3rem; }
.post-card .cover-glyph { font-size: clamp(1.6rem, 4vw, 2.4rem); }
.post-card-body { padding-inline: .4rem; display: flex; flex-direction: column; flex: 1; }
.post-card .post-cat { margin-bottom: .75rem; }
.post-card-title {
font-family: var(--display); font-weight: 600; font-size: 1.42rem;
line-height: 1.16; letter-spacing: -0.015em; color: var(--text);
margin-bottom: .75rem;
}
.post-card:hover:not(.is-draft) .post-card-title { color: var(--accent-bright); }
.post-card-excerpt { color: var(--text-mute); font-size: .95rem; margin-bottom: 1.1rem; flex: 1; }
.post-card .post-meta { margin-bottom: 0; font-size: .7rem; }
.post-card a.stretch::after { /* whole card clickable */
content: ""; position: absolute; inset: 0;
}
.post-card { position: relative; }
/* draft / coming-soon slot */
.post-card.is-draft { opacity: .72; }
.post-card.is-draft .cover { background: var(--bg-2); }
.post-card.is-draft .cover::after { opacity: .5; }
.draft-tag {
display: inline-flex; align-items: center; gap: .5rem;
font-family: var(--mono); font-size: .68rem; letter-spacing: .12em;
text-transform: uppercase; color: var(--text-mute);
padding: .34rem .7rem; border: 1px dashed var(--line-strong); border-radius: var(--r-pill);
align-self: flex-start; margin-top: auto;
}
.draft-tag::before {
content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--text-faint);
}
/* =========================================================
Subscribe / contact strip
========================================================= */
.blog-cta { padding-block: var(--section-y); }
.blog-cta-inner {
text-align: center; max-width: 640px; margin-inline: auto;
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--r-lg); padding: clamp(2rem, 5vw, 3.2rem);
box-shadow: var(--shadow-card);
}
.blog-cta-title {
font-family: var(--display); font-weight: 600;
font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.12;
letter-spacing: -0.02em; color: var(--text); margin-bottom: .9rem;
}
.blog-cta-note { color: var(--text-mute); margin-bottom: 1.7rem; }
/* =========================================================
ARTICLE PAGE
========================================================= */
.article { padding-top: 72px; }
.back-link {
display: inline-flex; align-items: center; gap: .5rem;
font-family: var(--mono); font-size: .78rem; letter-spacing: .04em;
color: var(--text-mute); margin-bottom: 2rem;
transition: color .3s var(--ease);
}
.back-link:hover { color: var(--accent-bright); }
.back-link svg { transition: transform .3s var(--ease); }
.back-link:hover svg { transform: translateX(-3px); }
.article-header {
padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem);
max-width: 820px; margin-inline: auto;
}
.article-title {
font-family: var(--display); font-weight: 600;
font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.02;
letter-spacing: -0.03em; color: var(--text);
margin: 1.1rem 0 1.4rem;
}
.article-deck {
font-family: var(--display); font-weight: 500;
font-size: clamp(1.3rem, 2.5vw, 1.7rem); line-height: 1.42;
color: var(--text-soft); max-width: 62ch;
}
.article-byline {
display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
font-family: var(--mono); font-size: .78rem; letter-spacing: .03em; color: var(--text-mute);
}
.article-byline .author { color: var(--text); font-weight: 500; }
.article-byline .sep { color: var(--text-faint); }
.article-cover {
max-width: 980px; margin: clamp(1.5rem, 4vw, 3rem) auto;
}
.article-cover .cover { aspect-ratio: 21 / 9; }
.article-cover .cover-glyph { font-size: clamp(2.4rem, 7vw, 4.6rem); }
/* prose column */
.prose {
max-width: 748px; margin-inline: auto;
padding-bottom: clamp(3rem, 6vw, 5rem);
color: var(--text-soft); font-size: 1.2rem; line-height: 1.85;
}
.prose > * { margin-bottom: 1.75rem; }
.prose h2 {
font-family: var(--display); font-weight: 600;
font-size: clamp(1.7rem, 3.4vw, 2.3rem); line-height: 1.14;
letter-spacing: -0.02em; color: var(--text);
margin-top: 3.4rem; margin-bottom: 1.2rem;
scroll-margin-top: 90px;
}
.prose h3 {
font-family: var(--display); font-weight: 600; font-size: 1.3rem;
color: var(--text); margin-top: 2rem; margin-bottom: .8rem; letter-spacing: -0.01em;
}
.prose p { color: var(--text-soft); }
.prose a:not(.cite) {
color: var(--accent-bright); text-decoration: underline;
text-underline-offset: 3px; text-decoration-color: var(--line-accent);
transition: text-decoration-color .3s var(--ease);
}
.prose a:not(.cite):hover { text-decoration-color: var(--accent); }
.prose strong { color: var(--text); font-weight: 600; }
.prose em { color: var(--accent-bright); font-style: italic; }
.prose ul, .prose ol { padding-left: 1.4rem; display: grid; gap: .6rem; }
.prose ul li { list-style: none; position: relative; padding-left: 1.2rem; }
.prose ul li::before {
content: ""; position: absolute; left: 0; top: .72em;
width: 6px; height: 6px; transform: rotate(45deg); border: 1px solid var(--accent);
}
.prose ol { list-style: decimal; color: var(--text-soft); }
.prose ol li::marker { color: var(--accent); font-family: var(--mono); font-size: .9em; }
.prose blockquote {
margin: 2.5rem 0; padding: 1.4rem 1.8rem;
border-left: 2px solid var(--accent);
background: rgba(124,140,255,.04);
border-radius: 0 var(--r-md) var(--r-md) 0;
font-family: var(--display); font-weight: 500;
font-size: clamp(1.35rem, 2.6vw, 1.7rem); line-height: 1.4; color: var(--text);
}
.prose figure.pull { margin: 0; }
.prose code {
font-family: var(--mono); font-size: .88em;
background: var(--surface-3); color: var(--accent-bright);
padding: .14em .45em; border-radius: var(--r-sm); border: 1px solid var(--line);
}
/* inline citation superscript link -> jumps to Sources */
.cite {
font-family: var(--mono); font-size: .62em; font-weight: 600;
vertical-align: super; line-height: 0;
color: var(--accent); padding: 0 .12em;
text-decoration: none;
transition: color .25s var(--ease);
}
.cite::before { content: "["; }
.cite::after { content: "]"; }
.cite:hover { color: var(--cyan); }
/* Sources / references */
.sources {
max-width: 748px; margin: 0 auto; padding-block: clamp(2.5rem, 5vw, 4rem);
border-top: 1px solid var(--line);
}
.sources-title {
font-family: var(--mono); font-size: .74rem; letter-spacing: .2em;
text-transform: uppercase; color: var(--accent); margin-bottom: 1.6rem;
display: flex; align-items: center; gap: .8rem;
}
.sources-title::before { content: ""; height: 1px; width: 2rem; background: linear-gradient(90deg, var(--accent), transparent); }
.sources-list { counter-reset: src; display: grid; gap: 1rem; }
.sources-list li {
display: grid; grid-template-columns: 2rem 1fr; gap: .6rem;
padding-bottom: 1rem; border-bottom: 1px solid var(--line);
scroll-margin-top: 90px;
}
.sources-list li::before {
counter-increment: src; content: counter(src);
font-family: var(--mono); font-size: .82rem; color: var(--accent);
padding-top: .1rem;
}
.sources-list li:target { background: rgba(124,140,255,.06); border-radius: var(--r-sm); }
.src-title { color: var(--text); font-weight: 500; }
.src-detail { color: var(--text-mute); font-size: .9rem; }
.src-detail a {
color: var(--accent-bright); text-decoration: underline; text-underline-offset: 2px;
word-break: break-word;
}
.src-detail a:hover { color: var(--cyan); }
/* article footer nav */
.article-foot {
max-width: 748px; margin: 0 auto; padding-block: clamp(2rem, 4vw, 3rem);
display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
}
/* =========================================================
Responsive
========================================================= */
@media (max-width: 960px) {
.featured-card { grid-template-columns: 1fr; }
.featured-card .cover { aspect-ratio: 16 / 9; }
.post-grid { grid-template-columns: repeat(2, 1fr); }
/* keep the lang toggle visible on mobile even though nav collapses */
.site-header .lang-toggle { display: inline-flex; }
}
@media (max-width: 620px) {
.post-grid { grid-template-columns: 1fr; }
.lang-btn { padding: .3rem .5rem; }
}