/* ========================================================= Javlonbek Yokubov — Blog Fyrre-style editorial magazine: stark white, near-black ink, huge bold grotesque display, uppercase labels, thin rules, pill tags, solid-black buttons, generous whitespace. Loads AFTER styles.css. The whole light theme is scoped to body.blog-page, which overrides the site's dark tokens so the shared header / footer / buttons re-theme automatically. ========================================================= */ /* ========================================================= i18n — pure-CSS language block switching (unchanged). Every translatable chunk exists three times as siblings ; only the one matching shows. `revert` restores natural display. ========================================================= */ [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; } /* ========================================================= LIGHT THEME — override the dark tokens for the blog only. Everything inheriting these vars (header, footer, buttons, eyebrows, section titles) flips to monochrome editorial. ========================================================= */ body.blog-page { --paper: #ffffff; --panel: #ecebe8; /* image-placeholder grey (covers) */ --panel-2: #f5f4f2; /* alt light section wash */ /* remap the shared dark tokens → light monochrome */ --bg: #ffffff; --bg-2: #f5f4f2; --surface: #f2f1ee; --surface-2: #ecebe8; --surface-3: #e6e5e1; --line: rgba(0,0,0,.12); --line-strong: rgba(0,0,0,.85); --line-accent: rgba(0,0,0,.28); --text: #0d0d0d; --text-soft: #262626; --text-mute: #6a6a6a; --text-faint: #9a9a9a; --accent: #0d0d0d; --accent-bright: #000000; --cyan: #0d0d0d; --accent-glow: rgba(0,0,0,.14); --grad: #0d0d0d; /* flatten gradient → solid ink */ background: var(--paper); color: var(--text-soft); background-image: none; /* drop the dark dot-grid texture */ } body.blog-page ::selection { background: #0d0d0d; color: #fff; } body.blog-page :focus-visible { outline-color: #0d0d0d; } /* ---- Shared components: patch the hard-coded dark values ---- */ .blog-page .site-header { border-bottom: 1px solid transparent; } .blog-page .site-header.scrolled { background: rgba(255,255,255,.82); border-bottom-color: var(--line-strong); } .blog-page .brand-mark { color: #fff; background: #0d0d0d; border-color: #0d0d0d; } .blog-page .brand-name, .blog-page .nav a:hover, .blog-page .nav a.active { color: #0d0d0d; } .blog-page .nav a { color: #6a6a6a; } .blog-page .nav a::after { background: #0d0d0d; } .blog-page .nav-toggle span { background: #0d0d0d; } .blog-page .mobile-nav { background: rgba(255,255,255,.98); border-bottom-color: var(--line-strong); } .blog-page .mobile-nav a { color: #0d0d0d; border-bottom-color: var(--line); } /* buttons → Fyrre solid-black */ .blog-page .btn-gold { background: #0d0d0d; color: #fff; box-shadow: none; border-radius: 4px; text-transform: uppercase; letter-spacing: .08em; font-size: .82rem; font-weight: 600; } .blog-page .btn-gold:hover { background: #000; filter: none; transform: translateY(-2px); } .blog-page .btn-outline { color: #0d0d0d; border-color: var(--line-strong); border-radius: 4px; } .blog-page .btn-outline:hover { background: #0d0d0d; color: #fff; box-shadow: none; } /* footer → light */ .blog-page .site-footer { background: #fff; border-top: 1px solid var(--line-strong); color: #262626; } .blog-page .footer-name { color: #0d0d0d; } .blog-page .footer-tag { color: #0d0d0d; } .blog-page .footer-legal { color: #6a6a6a; } /* eyebrow labels: keep mono uppercase, ink-colored, no gradient tail */ .blog-page .eyebrow { color: #0d0d0d; font-weight: 600; } .blog-page .eyebrow-rule { background: #0d0d0d; } .blog-page .eyebrow-center .eyebrow-rule:last-child { background: #0d0d0d; } /* ========================================================= Language toggle (monochrome segmented control) ========================================================= */ .lang-toggle { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--line-strong); border-radius: 4px; overflow: hidden; } .lang-btn { font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: #6a6a6a; padding: .34rem .6rem; border: 0; background: transparent; cursor: pointer; transition: color .2s var(--ease), background .2s var(--ease); } .lang-btn + .lang-btn { border-left: 1px solid var(--line); } .lang-btn:hover { color: #0d0d0d; } .lang-btn[aria-pressed="true"] { color: #fff; background: #0d0d0d; font-weight: 600; } .blog-page .site-header .lang-toggle { flex: none; } /* ========================================================= Page spacing + big editorial masthead ========================================================= */ .blog-main { padding-top: 72px; } .blog-intro { padding-block: clamp(3rem, 7vw, 6rem) clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--line-strong); } .blog-intro-title { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(3rem, 11vw, 9rem); line-height: .9; letter-spacing: -0.03em; color: #0d0d0d; margin: 1rem 0 0; } .blog-intro-title .acc { color: #0d0d0d; -webkit-text-fill-color: currentColor; } .blog-intro-lead { max-width: 46ch; color: #0d0d0d; font-family: var(--display); font-weight: 500; font-size: clamp(1.2rem, 2.3vw, 1.7rem); line-height: 1.28; margin-top: clamp(1.5rem, 3vw, 2.5rem); } .blog-intro-sub { max-width: 60ch; color: var(--text-mute); font-size: 1.02rem; line-height: 1.6; margin-top: 1rem; } /* ========================================================= Cover art — Fyrre-style image placeholders (flat grey) ========================================================= */ .cover { position: relative; overflow: hidden; background: var(--panel); aspect-ratio: 16 / 10; display: grid; place-items: center; border-radius: 0; } .cover-glyph { font-family: var(--mono); font-weight: 500; font-size: clamp(2rem, 6vw, 3.4rem); letter-spacing: .04em; color: #0d0d0d; opacity: .55; } .cover.cyan { background: #e6e5e1; } .cover.mono { background: #f0efec; } /* real artwork fills the cover; grey panel is the fallback */ .cover-img { width: 100%; height: 100%; object-fit: cover; display: block; } /* small art credit under an article's hero cover */ .cover-credit { margin-top: .7rem; font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute); text-align: right; } /* ========================================================= Featured article (magazine lead) ========================================================= */ .featured { padding-block: clamp(2rem, 4vw, 3.5rem) clamp(3rem, 6vw, 5rem); border-bottom: 1px solid var(--line-strong); } .featured .eyebrow { margin-bottom: 1.6rem; } .featured-card { display: grid; grid-template-columns: 1.1fr 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: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #0d0d0d; margin-bottom: 1.1rem; border: 1px solid var(--line-strong); border-radius: 999px; padding: .32rem .8rem; } .post-cat::before { content: none; } .featured-title { font-family: var(--display); font-weight: 700; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.02; letter-spacing: -0.025em; color: #0d0d0d; margin-bottom: 1.1rem; } .featured-title a { transition: opacity .25s var(--ease); } .featured-card:hover .featured-title a { opacity: .55; } .featured-excerpt { color: var(--text-mute); max-width: 52ch; margin-bottom: 1.6rem; font-size: 1.1rem; line-height: 1.6; } /* byline (BY AUTHOR · date · read) */ .post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 1.7rem; } .post-meta .sep { color: var(--text-faint); } .post-meta .author { color: #0d0d0d; } .read-link { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--mono); font-weight: 600; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: #0d0d0d; padding: .8rem 1.4rem; border: 1px solid #0d0d0d; border-radius: 4px; transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); } .read-link:hover { background: #0d0d0d; color: #fff; transform: translateY(-2px); } .read-link svg { transition: transform .3s var(--ease); } .read-link:hover svg { transform: translateX(3px); } /* ========================================================= Article grid ("More writing") ========================================================= */ .grid-section { padding-block: clamp(3rem, 6vw, 5rem); background: #fff; } .grid-section.section-ink { background: #fff; } .grid-section.section-ink::after { display: none; } .grid-section .section-title { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -0.02em; color: #0d0d0d; } .post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.6rem); margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line-strong); padding-top: clamp(2rem, 4vw, 3rem); } .post-card { position: relative; display: flex; flex-direction: column; background: transparent; border: 0; border-radius: 0; padding: 0; } .post-card .cover { aspect-ratio: 16 / 10; margin-bottom: 1.2rem; } .post-card .cover-glyph { font-size: clamp(1.6rem, 4vw, 2.4rem); } .post-card-body { display: flex; flex-direction: column; flex: 1; } .post-card .post-cat { margin-bottom: .85rem; padding: .28rem .7rem; font-size: .68rem; } .post-card-title { font-family: var(--display); font-weight: 700; font-size: 1.5rem; line-height: 1.1; letter-spacing: -0.015em; color: #0d0d0d; margin-bottom: .7rem; } .post-card:hover:not(.is-draft) .post-card-title { opacity: .55; transition: opacity .25s var(--ease); } .post-card-excerpt { color: var(--text-mute); font-size: 1rem; line-height: 1.55; margin-bottom: 1.1rem; flex: 1; } .post-card .post-meta { margin-bottom: 0; font-size: .68rem; } .post-card a.stretch::after { content: ""; position: absolute; inset: 0; } /* draft / coming-soon slot */ .post-card.is-draft { opacity: 1; } .post-card.is-draft .cover { background: #f0efec; } .post-card.is-draft .cover-glyph { opacity: .3; } .draft-tag { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute); padding: .3rem .7rem; border: 1px dashed var(--line-strong); border-radius: 999px; align-self: flex-start; margin-top: auto; } .draft-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; background: #b0b0b0; } /* ========================================================= Subscribe / contact strip ========================================================= */ .blog-cta { padding-block: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--line-strong); } .blog-cta-inner { text-align: center; max-width: 720px; margin-inline: auto; background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; } .blog-cta-title { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.8rem, 4.5vw, 3rem); line-height: 1.02; letter-spacing: -0.02em; color: #0d0d0d; margin-bottom: 1rem; } .blog-cta-note { color: var(--text-mute); margin-bottom: 1.8rem; font-size: 1.05rem; } /* ========================================================= ARTICLE PAGE ========================================================= */ .article { padding-top: 72px; } /* reading-progress bar — thin ink line pinned to the very top, fills left→right as you scroll the article. JS sets --read-p (0–1); scaleX keeps it cheap. Sits above the sticky header. */ .read-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200; background: #0d0d0d; pointer-events: none; transform-origin: 0 50%; transform: scaleX(var(--read-p, 0)); will-change: transform; } @media (prefers-reduced-motion: no-preference) { .read-progress { transition: transform .08s linear; } } .back-link { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--mono); font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #0d0d0d; margin-bottom: 1.5rem; transition: opacity .25s var(--ease); } .back-link:hover { opacity: .55; } .back-link svg { transition: transform .25s var(--ease); } .back-link:hover svg { transform: translateX(-3px); } .article-header { padding-block: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem); max-width: 860px; margin-inline: auto; } .article-title { font-family: var(--display); font-weight: 700; font-size: clamp(2.4rem, 6.5vw, 4.6rem); line-height: .98; letter-spacing: -0.03em; color: #0d0d0d; margin: 1.1rem 0 1.4rem; } .article-deck { font-family: var(--display); font-weight: 500; font-size: clamp(1.25rem, 2.5vw, 1.7rem); line-height: 1.34; color: var(--text-mute); max-width: 60ch; } .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-strong); font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); } .article-byline .author { color: #0d0d0d; font-weight: 600; } .article-byline .sep { color: var(--text-faint); } .article-cover { max-width: 1080px; margin: clamp(1.5rem, 3vw, 2.5rem) 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: 680px; margin-inline: auto; padding-bottom: clamp(3rem, 6vw, 5rem); color: #1a1a1a; font-size: 1.18rem; line-height: 1.75; } .prose > * { margin-bottom: 1.6rem; } .prose h2 { font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 3.4vw, 2.2rem); line-height: 1.12; letter-spacing: -0.02em; color: #0d0d0d; margin-top: 3.2rem; margin-bottom: 1.1rem; scroll-margin-top: 90px; } .prose h3 { font-family: var(--display); font-weight: 700; font-size: 1.3rem; color: #0d0d0d; margin-top: 2rem; margin-bottom: .7rem; } .prose p { color: #1a1a1a; } .prose a:not(.cite) { color: #0d0d0d; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .prose a:not(.cite):hover { opacity: .6; } .prose strong { color: #0d0d0d; font-weight: 700; } .prose em { color: #0d0d0d; font-style: italic; } .prose ul, .prose ol { padding-left: 1.4rem; display: grid; gap: .55rem; } .prose ul li { list-style: none; position: relative; padding-left: 1.3rem; } .prose ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 1.5px; background: #0d0d0d; } .prose ol { list-style: decimal; } .prose ol li::marker { color: #0d0d0d; font-family: var(--mono); font-weight: 500; } .prose blockquote { margin: 2.6rem 0; padding: 0 0 0 1.6rem; border-left: 3px solid #0d0d0d; background: transparent; border-radius: 0; font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.05rem); line-height: 1.24; color: #0d0d0d; } .prose code { font-family: var(--mono); font-size: .86em; background: var(--panel); color: #0d0d0d; padding: .12em .4em; border-radius: 3px; border: 1px solid var(--line); } /* inline citation superscript */ .cite { font-family: var(--mono); font-size: .62em; font-weight: 700; vertical-align: super; line-height: 0; color: #0d0d0d; padding: 0 .1em; text-decoration: none; } .cite::before { content: "["; } .cite::after { content: "]"; } .cite:hover { opacity: .55; } /* Sources / references */ .sources { max-width: 680px; margin: 0 auto; padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--line-strong); } .sources-title { font-family: var(--mono); font-size: .76rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #0d0d0d; margin-bottom: 1.6rem; display: flex; align-items: center; gap: .8rem; } .sources-title::before { content: ""; height: 1px; width: 2rem; background: #0d0d0d; } .sources-list { counter-reset: src; display: grid; gap: 0; } .sources-list li { display: grid; grid-template-columns: 2rem 1fr; gap: .7rem; padding: 1rem 0; border-bottom: 1px solid var(--line); scroll-margin-top: 90px; } .sources-list li:first-child { border-top: 1px solid var(--line); } .sources-list li::before { counter-increment: src; content: counter(src); font-family: var(--mono); font-size: .82rem; color: #0d0d0d; padding-top: .1rem; } .sources-list li:target { background: var(--panel-2); } .src-title { color: #0d0d0d; font-weight: 600; } .src-detail { color: var(--text-mute); font-size: .92rem; } .src-detail a { color: #0d0d0d; text-decoration: underline; text-underline-offset: 2px; word-break: break-word; } .src-detail a:hover { opacity: .6; } /* article footer nav */ .article-foot { max-width: 680px; 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); } .blog-page .site-header .lang-toggle { display: inline-flex; } } @media (max-width: 620px) { .post-grid { grid-template-columns: 1fr; gap: 2.5rem; } .lang-btn { padding: .32rem .5rem; } }