/* ============================================================================ blog-skin.css — TgFather "obsidian & gold" skin for the standalone blog-go blog (the /blog module). Loaded via BLOG_EXTRA_CSS *after* blog-go's built-in blog.css, so every rule here overrides the white-label default. Goal: /blog reads as the exact same site as tgfather.com — same obsidian ground, molten-gold accent, Roboto type, glass sticky nav and a compact brand footer — so a visitor crossing from the shop into the blog never feels the chrome change. Scope: this file is served from tgfather.com and referenced ONLY by the tgfather-blog-go container's env. It never touches blog-go's shared blog.css or any other site (e.g. tgsoft's blog is a separate container with its own env), so the white-label default is preserved everywhere else. ========================================================================== */ /* === 1. Self-host the site's typefaces ===================================== The blog page does not load tgfather's theme.css, so re-declare the two brand faces here. They point at the SAME woff2 files tgfather-api serves under /fonts (same origin), so no Google Fonts CDN and no extra request weight. */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/roboto.latin.woff2') format('woff2'); } @font-face { font-family: 'Sometype Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/sometype-mono.latin.woff2') format('woff2'); } /* Metrics-matched fallback (local Arial reshaped to Roboto's box) so pre-swap text occupies the same space — near-zero layout shift, same trick as the main site. */ @font-face { font-family: 'Roboto Fallback'; src: local('Arial'); ascent-override: 92.77%; descent-override: 24.41%; line-gap-override: 0.00%; size-adjust: 100.06%; } /* === 2. Re-map blog-go's theme tokens to the storefront palette ============ blog-go styles its whole page through these CSS variables. The blog shares tgfather.com's origin, so it also shares the shop's saved theme choice (localStorage 'theme'); blog-nav.js stamps to match. We make the skin fully theme-aware so a reader who chose light on the shop sees a light blog, and vice-versa — the header never falls out of sync. DARK is the default paint: the shop is dark-first, and the blog has no hook to pre-set data-theme before first paint, so defaulting to dark means zero flash for the common case (only a saved 'light' repaints once). Values mirror style.css :root (light) and html[data-theme="dark"] (dark). */ :root { --bl-sans: 'Roboto', 'Roboto Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --bl-serif: var(--bl-sans); /* the site retired serif → Roboto for headings too */ --bl-measure: 760px; /* theme-invariant chrome tokens */ --tf-bolt: linear-gradient(120deg, #ffd071 0%, #ffb020 52%, #f7941d 100%); --tf-bolt-glow: 0 8px 30px -8px rgba(255, 176, 32, 0.55); --tf-on-gold: #241a06; /* ink that sits on a gold pill */ --tf-mono: 'Sometype Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* --- DARK (default) --- */ --bg: #0a0908; /* obsidian canvas */ --fg: #f7f2e8; /* marble ink */ --text-muted: #cbc3b2; --border: #322c22; --border-2: #4a4235; --surface-2: #151310; --accent: #ffb020; /* molten gold */ --accent-soft: rgba(255, 176, 32, 0.13); --tf-surface: #1c1915; --tf-surface-hover: #26221b; --tf-text-tertiary: #948b79; --tf-bar-bg: rgba(11, 10, 8, 0.82); --tf-bar-border: rgba(255, 176, 32, 0.10); --tf-success: #3ad08a; } /* --- LIGHT — when the shop's saved theme is light (blog-nav.js sets it) --- */ html[data-theme="light"] { --bg: #faf8f4; --fg: #1b1408; --text-muted: #5f584c; --border: #ebe6db; --border-2: #dcd5c6; --surface-2: #f4f1ea; --accent: #e07000; --accent-soft: rgba(247, 148, 29, 0.12); --tf-surface: #ffffff; --tf-surface-hover: #f7f4ee; --tf-text-tertiary: #97907f; --tf-bar-bg: rgba(250, 248, 244, 0.82); --tf-bar-border: rgba(27, 20, 8, 0.07); --tf-success: #1fa06a; } /* Give the canvas colour so no default white can peek below the body or footer (same fix shipped to the main site). */ html { background: var(--bg); } body.public { background: var(--bg); color: var(--fg); font-family: var(--bl-sans); } ::selection { background: var(--accent-soft); color: var(--fg); } /* === 3. Header — clone the main site's glass nav bar (.sf-nav) ============= blog-go's header markup is → + ( + CTA ). We can't change the markup (shared template), so we restyle the classes to match .sf-nav: obsidian glass bar, gold seal logo, uppercase wordmark, pill nav links, and a gold CTA pushed to the far right. */ .p-topbar { height: 66px; gap: 28px; padding: 0 clamp(20px, 4vw, 84px); background: var(--tf-bar-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--tf-bar-border); } /* Brand lockup: the gold seal (from BLOG_LOGO_URL) + the TGFATHER wordmark. */ .p-topbar .brand { gap: 10px; color: var(--fg); } .p-topbar .brand img { width: 30px; height: 30px; border-radius: 10px; box-shadow: var(--tf-bolt-glow), inset 0 1px 0 rgba(255, 255, 255, 0.45); } .p-topbar .brand span { font-weight: 800; font-size: 19px; letter-spacing: 0.01em; text-transform: uppercase; line-height: 1; } /* Two-tone wordmark: TG (ink) + FATHER (gold), identical to the shop's .sf-logo-txt. blog-nav.js wraps FATHER in .tf-gold. */ .p-topbar .brand .tf-gold { background: var(--tf-bolt); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Re-flow the right cluster into the main-site order: nav links sit on the LEFT after the logo; the language pill, theme toggle and CTA sit on the far right (nav's margin-right:auto absorbs the gap; flex-end catches the mobile case once the nav is hidden). */ .p-cta { margin-left: 0; flex: 1 1 auto; gap: 10px; justify-content: flex-end; } .p-nav { margin-left: 4px; margin-right: auto; gap: 4px; } .p-nav a { font-size: 15px; font-weight: 550; color: var(--text-muted); white-space: nowrap; padding: 8px 14px; border-radius: 999px; transition: color .15s, background .15s; } .p-nav a:hover { color: var(--fg); background: var(--tf-surface-hover); } .p-nav a.tf-active { color: var(--accent); background: var(--accent-soft); font-weight: 650; } /* Round icon buttons (language globe fallback + theme toggle) = .sf-icon-btn. */ .tf-iconbtn { width: 40px; height: 40px; border-radius: 50%; padding: 0; border: 1px solid var(--border); background: var(--tf-surface); color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background .15s, color .15s; } .tf-iconbtn:hover { background: var(--tf-surface-hover); color: var(--fg); } .tf-iconbtn svg { width: 18px; height: 18px; } /* Theme toggle: sun in dark (→ go light), moon in light (→ go dark), same as the shop. */ .tf-theme .tf-moon { display: none; } .tf-theme .tf-sun { display: block; } html[data-theme="light"] .tf-theme .tf-sun { display: none; } html[data-theme="light"] .tf-theme .tf-moon { display: block; } /* Language pill: globe + current locale code, a native
dropdown. */ .tf-lang { position: relative; flex-shrink: 0; } .tf-lang > summary { list-style: none; cursor: pointer; height: 40px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--border); background: var(--tf-surface); color: var(--text-muted); display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; } .tf-lang > summary::-webkit-details-marker { display: none; } .tf-lang > summary svg { width: 16px; height: 16px; } .tf-lang[open] > summary { color: var(--fg); border-color: var(--border-2); } .tf-lang-menu { position: absolute; top: 48px; right: 0; min-width: 190px; max-height: 60vh; overflow: auto; background: var(--tf-surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg, 0 20px 48px rgba(0,0,0,.4)); padding: 6px; display: grid; gap: 2px; z-index: 60; } .tf-lang-menu a { padding: 8px 12px; border-radius: 9px; color: var(--text-muted); font-size: 14px; text-decoration: none; white-space: nowrap; } .tf-lang-menu a:hover { color: var(--fg); background: var(--tf-surface-hover); } .tf-lang-menu a.cur { color: var(--accent); background: var(--accent-soft); } [dir="rtl"] .tf-lang-menu { right: auto; left: 0; } /* CTA = the brand's molten-gold pill (.btn-brand), like the shop's "Sign in". */ .p-topbar .btn { background: var(--tf-bolt); color: var(--tf-on-gold); border: 0; padding: 9px 18px; border-radius: 999px; font-weight: 650; letter-spacing: -0.01em; box-shadow: 0 8px 20px -10px rgba(242, 122, 15, 0.55); transition: filter .18s ease, box-shadow .18s ease, transform .08s ease; } .p-topbar .btn:hover { opacity: 1; filter: brightness(1.05); box-shadow: 0 10px 24px -10px rgba(242, 122, 15, 0.65); } .p-topbar .btn:active { transform: translateY(0.5px) scale(0.99); } /* Match the shop: hide the nav row at 760px (blog-go has no drawer, so the logo + language + theme + CTA stay — a clean mobile header). */ @media (max-width: 760px) { .p-nav { display: none; } } /* === 4. Content — key the article surfaces to the obsidian palette ========= Most content already reads the re-mapped tokens above; these rules cover the pieces that need the brand's type treatment or gold accent explicitly. */ a { color: var(--accent); } .bl-kicker, .bl-cat, a.bl-cat { color: var(--accent); } /* Headings track tighter, exactly like the main site's h1/h2/h3. */ .bl-mast-title, .bl-item-title, .bl-title, .bl-empty-title, .bl-prose h2, .bl-prose h3, .bl-related a { font-family: var(--bl-sans); letter-spacing: -0.022em; } .bl-mast-sub, .bl-item-dek, .bl-item-meta, .bl-art-meta, .bl-updated, .bl-crumbs { color: var(--text-muted); } /* Long-form body: Roboto, gold links (matches the shop's guide prose). */ .bl-prose { font-family: var(--bl-sans); font-size: 18px; line-height: 1.75; color: var(--fg); } .bl-prose a { color: var(--accent); text-decoration-color: rgba(255, 176, 32, 0.42); } .bl-prose a:hover { text-decoration-color: currentColor; } .bl-prose blockquote { border-inline-start-color: var(--border-2); color: var(--text-muted); } .bl-prose code, .bl-prose pre { font-family: var(--tf-mono); background: var(--surface-2); border-color: var(--border); color: var(--fg); } .bl-prose th { background: var(--surface-2); } .bl-prose th, .bl-prose td, .bl-prose hr, .bl-prose details { border-color: var(--border); } /* Cards / media edges + dividers → warm obsidian borders. */ .bl-item, .bl-pager, .bl-reactions, .bl-share, .bl-related-wrap { border-color: var(--border); } .bl-item-thumb, .bl-hero { border-color: var(--border); background: var(--surface-2); } /* Buttons + links: solid neutral CTA → the gold brand pill; text link → gold. */ .bl-btn { background: var(--tf-bolt); color: var(--tf-on-gold); border: 0; border-radius: 999px; font-weight: 650; box-shadow: 0 8px 20px -10px rgba(242, 122, 15, 0.55); } .bl-btn:hover { opacity: 1; filter: brightness(1.05); } .bl-textlink { color: var(--fg); border-color: var(--border-2); } .bl-textlink:hover { color: var(--accent); border-color: var(--accent); } .bl-pager a { color: var(--fg); } .bl-pager a:hover { color: var(--accent); } /* Reactions: neutral pills, gold on active. */ .bl-react { color: var(--fg); border-color: var(--border); } .bl-react:hover { border-color: var(--text-muted); } .bl-react.reacted { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } /* === 5. Footer — compact, mirrors the main site's surface footer === blog-go ships a tall near-black SMM slab. Re-skin it to the storefront footer: 3 tight link columns with mono-uppercase headings (like .sf-footer h4) and a slim bottom bar. Every gap is pulled in so it reads short. The green-dot "status" column is dropped entirely by unsetting BLOG_FOOTER_STATUS in env, so this matches the main site (Products / Platform / Legal — no status widget). */ .bl-footer { background: var(--tf-surface); color: var(--text-muted); border-top: 1px solid var(--border); } .bl-footer-inner { max-width: 1180px; padding: 30px 22px 16px; } /* was clamp(38,5vw,56) 22 20 */ .bl-footer-top { grid-template-columns: minmax(220px, 2fr) 3fr; gap: clamp(24px, 3vw, 48px); } /* brand:cols ≈ main site's 2fr:3×1fr */ .bl-footer-logo { color: var(--fg); } .bl-footer-logo span { text-transform: uppercase; font-weight: 800; letter-spacing: 0.01em; } .bl-footer-logo img { width: 26px; height: 26px; border-radius: 8px; } .bl-footer-tag { color: var(--tf-text-tertiary); margin-top: 9px; max-width: 34ch; font-size: 12.5px; line-height: 1.5; } .bl-footer-social { margin-top: 12px; } .bl-footer-social .bl-soc { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); } .bl-footer-social .bl-soc:hover { background: var(--accent); color: var(--tf-on-gold); border-color: var(--accent); } .bl-footer-cols { gap: 10px 24px; } /* Drop the "Status · All systems operational" column entirely. blog-go always injects it — its BLOG_FOOTER_STATUS env default ("All systems operational") can't be blanked (getenv falls back on empty), and the Go default is shared with tgsoft's blog, so we hide it here (tgfather-only skin) instead. The main site has no status widget, so this makes the footer match it. */ .bl-footer-col:has(.bl-footer-status) { display: none; } /* Mono uppercase headings — identical treatment to the main site's .sf-footer h4. */ .bl-footer-col h4 { color: var(--tf-text-tertiary); font-family: var(--tf-mono); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.07em; margin: 0 0 7px; } .bl-footer-col a { color: var(--text-muted); padding: 3px 0; } .bl-footer-col a:hover { color: var(--accent); } /* Languages — the blog's only locale switcher. Promote the loose chip-row into a titled card grid, like smm.plus's "LANGUAGES" footer block: a mono-uppercase heading (::before) then one bordered card per locale, each with a code badge (attr(lang)) + its native name. It reads as the footer's own labelled section ("column 5") rather than a stray strip. The badges are pure pseudo-elements, so blog-nav.js (which reads a.lang / a.textContent to build the header globe) is untouched. */ .bl-footer-langs { border-top: 1px solid var(--border); margin-top: 24px; padding-top: 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; } .bl-footer-langs::before { content: "Languages"; grid-column: 1 / -1; margin-bottom: 4px; font-family: var(--tf-mono); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.07em; color: var(--tf-text-tertiary); } .bl-footer-langs a { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--text-muted); font-size: 13px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bl-footer-langs a::before { /* the EN / РУ / 中文-style code badge */ content: attr(lang); flex: none; min-width: 30px; padding: 3px 5px; border: 1px solid var(--border); border-radius: 6px; background: var(--tf-surface); font-family: var(--tf-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.03em; text-align: center; text-transform: uppercase; color: var(--tf-text-tertiary); } .bl-footer-langs a:hover { border-color: var(--accent); color: var(--fg); background: var(--tf-surface-hover); } .bl-footer-langs a.cur { border-color: var(--accent); color: var(--accent); } .bl-footer-langs a.cur::before, .bl-footer-langs a:hover::before { border-color: var(--accent); color: var(--accent); } .bl-footer-bottom { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 13px; color: var(--tf-text-tertiary); font-size: 12px; } .bl-footer-bottom a { color: var(--text-muted); } .bl-footer-bottom a:hover { color: var(--accent); } /* === 6. Index / category listing → a 2-up card grid ======================== blog-go's white-label default is a single-column magazine list: each post is a divider-separated row with a small 184px side thumbnail. The storefront wants the posts as TWO bordered cards per row — cover image on top, text below — like the shop's product tiles. Only the LISTING wraps widen (the index feed + the category masthead/feed); the article page keeps its 760px reading measure because it lives under `.bl-article .bl-wrap`, which we never touch here. */ .bl-feed .bl-wrap, .bl-masthead .bl-wrap { max-width: 1180px; } /* Two equal columns with a comfortable gutter. minmax(0,1fr) lets long titles ellipsize instead of blowing the track width out. */ .bl-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: stretch; } /* Each post becomes a self-contained card (surface + border + radius) rather than a hairline-divided row. Also neutralise the two default treatments that assume a list: the per-item top border and the index's first-item border reset. */ .bl-feed .bl-item, .bl-feed--top .bl-item:first-child { border: 1px solid var(--border); border-radius: 16px; background: var(--tf-surface); overflow: hidden; transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; } .bl-feed .bl-item:hover { border-color: var(--border-2); transform: translateY(-2px); box-shadow: 0 16px 40px -24px rgba(0, 0, 0, .7); } /* Card body = a vertical flex column (image, then padded text). The selector is doubled with `.has-thumb` so it beats blog.css's `.bl-item.has-thumb .bl-item-link` 2-column grid at equal specificity. */ .bl-item .bl-item-link, .bl-item.has-thumb .bl-item-link { display: flex; flex-direction: column; gap: 0; padding: 0; grid-template-columns: none; height: 100%; } /* Cover leads the card: full-bleed, native OG ratio (1200×630), no rounding of its own (the card clips it). order:-1 lifts it above the text, which sits first in the DOM. */ .bl-item .bl-item-thumb { order: -1; width: 100%; aspect-ratio: 1200 / 630; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; } /* Text block: padded, and a flex column so the meta line can pin to the card bottom — keeps the meta baselines aligned across an uneven row. */ .bl-item-text { display: flex; flex-direction: column; padding: 20px 22px 22px; } .bl-item-title { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.24; margin: 0 0 8px; } .bl-item-dek { font-size: 14.5px; line-height: 1.55; margin: 0 0 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .bl-item-meta { margin-top: auto; } /* A card with no cover keeps a tidy text-only top instead of a bald edge. */ .bl-item:not(.has-thumb) .bl-item-text { padding-top: 26px; } /* Narrow screens: collapse to one column and keep the cover visible (the card needs it — blog.css hides the side-thumb <600px, which we undo here). */ @media (max-width: 760px) { .bl-list { grid-template-columns: 1fr; } } @media (max-width: 600px) { .bl-item.has-thumb .bl-item-link { grid-template-columns: none; } .bl-item .bl-item-thumb { display: block; } }