/* ============================================================ VG Blog Reader v2 — Modern, focused reading experience Author: 2026-05-30 Approach: layered overlay — no removal of existing styles. ============================================================ */ :root { --vgr-ink: #0f172a; --vgr-ink-soft: #334155; --vgr-mute: #64748b; --vgr-muted: #94a3b8; --vgr-line: #e8e2d2; --vgr-line-soft: #f1eadd; --vgr-bg: #fdfbf6; --vgr-card: #ffffff; --vgr-accent: #dc6b2e; --vgr-accent-2: #b8511f; --vgr-gold: #c08329; --vgr-cream: #fff8ee; --vgr-cream-2: #fffefb; --vgr-ok: #10b981; --vgr-shadow-sm: 0 2px 10px rgba(15, 23, 42, 0.04); --vgr-shadow-md: 0 6px 22px rgba(15, 23, 42, 0.07); --vgr-shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.10); --vgr-radius: 14px; --vgr-radius-lg: 18px; --vgr-font-serif: "Lora", "Charter", Georgia, "Noto Serif", "Noto Sans Devanagari", serif; --vgr-font-sans: "Inter", -apple-system, "Segoe UI", Roboto, "Noto Sans Devanagari", sans-serif; } /* Reading mode variants via [data-reading-mode] on */ body[data-reading-mode="sepia"] { --vgr-bg: #f7efe1; --vgr-card: #fdf6e8; --vgr-ink: #3a2a1c; --vgr-ink-soft: #5c4434; --vgr-mute: #7a604c; --vgr-line: #ddd0b8; --vgr-line-soft: #e8dec8; } body[data-reading-mode="dark"] { --vgr-bg: #0e1218; --vgr-card: #161c25; --vgr-ink: #e7eaef; --vgr-ink-soft: #c3c9d3; --vgr-mute: #8a93a3; --vgr-muted: #6a7383; --vgr-line: #2a313d; --vgr-line-soft: #1f2530; --vgr-cream: #1f1810; --vgr-cream-2: #221a11; --vgr-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.45); --vgr-shadow-md: 0 6px 22px rgba(0, 0, 0, 0.55); } /* ============================ Page chrome ============================ */ body.post-view { background: var(--vgr-bg) !important; color: var(--vgr-ink); transition: background-color 0.25s ease, color 0.25s ease; } body.post-view .wrap { max-width: 1180px; } /* ============================ Reading progress bar — polish ============================ */ body.post-view .read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent 0%, rgba(15, 23, 42, 0.04) 100%); z-index: 1000; } body.post-view .read-progress > * { background: linear-gradient(90deg, #dc6b2e 0%, #f59e0b 50%, #dc6b2e 100%) !important; background-size: 200% 100% !important; animation: vgrSheen 6s linear infinite; box-shadow: 0 1px 8px rgba(220, 107, 46, 0.4); } @keyframes vgrSheen { 0% { background-position: 0% 0%; } 100% { background-position: 200% 0%; } } /* ============================ Hero block — magazine-style ============================ */ body.post-view .post-hero { text-align: left !important; padding: 28px 0 22px !important; border-bottom: 1px solid var(--vgr-line) !important; margin-bottom: 28px !important; background: transparent !important; } body.post-view .post-hero__kicker { display: inline-flex !important; align-items: center; gap: 6px; background: rgba(220, 107, 46, 0.10) !important; color: var(--vgr-accent) !important; font-family: var(--vgr-font-sans); font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.10em !important; text-transform: uppercase; padding: 6px 12px !important; border-radius: 999px !important; margin-bottom: 14px !important; border: 0 !important; } body.post-view .post-hero__title, body.post-view .post-hero__titleRow h1 { font-family: var(--vgr-font-serif) !important; font-size: clamp(28px, 5vw, 44px) !important; line-height: 1.18 !important; font-weight: 700 !important; letter-spacing: -0.4px !important; color: var(--vgr-ink) !important; margin: 4px 0 14px !important; text-align: left !important; word-wrap: break-word; overflow-wrap: break-word; } body.post-view .post-hero__meta { display: flex !important; flex-wrap: wrap; gap: 12px !important; align-items: center; font-family: var(--vgr-font-sans); font-size: 13px; color: var(--vgr-mute); } body.post-view .post-hero__author, body.post-view .post-hero__readBadge { color: var(--vgr-mute) !important; } body.post-view .post-hero__dot { color: var(--vgr-muted) !important; } /* ============================ Main content typography ============================ */ body.post-view .post-main, body.post-view .article-content, body.post-view .post-content { font-family: var(--vgr-font-serif); font-size: 18px; line-height: 1.8; color: var(--vgr-ink-soft); max-width: none; } @media (min-width: 768px) { body.post-view .post-main { font-size: 19px; line-height: 1.85; } } @media (max-width: 480px) { body.post-view .post-main { font-size: 16.5px; line-height: 1.75; } } body.post-view .post-main p { margin: 0 0 1.2em; } body.post-view .post-main p.lead { font-size: 1.15em !important; line-height: 1.65 !important; color: var(--vgr-ink) !important; font-weight: 500; padding: 18px 22px; background: linear-gradient(135deg, var(--vgr-cream), var(--vgr-cream-2)); border-left: 4px solid var(--vgr-accent); border-radius: 0 12px 12px 0; margin: 0 0 1.6em !important; } /* Drop cap on first paragraph after lead */ body.post-view .post-main p.lead + p::first-letter { font-family: var(--vgr-font-serif); font-size: 3.4em; font-weight: 700; color: var(--vgr-accent); float: left; line-height: 0.85; padding: 6px 10px 0 0; margin-top: 4px; } @media (max-width: 480px) { body.post-view .post-main p.lead + p::first-letter { font-size: 2.8em; } } body.post-view .post-main h2 { font-family: var(--vgr-font-serif); font-size: clamp(22px, 3.4vw, 28px); font-weight: 700; letter-spacing: -0.2px; color: var(--vgr-ink); margin: 2.2em 0 0.6em; padding-top: 0.4em; line-height: 1.3; scroll-margin-top: 110px; /* offset for fixed navbar + trust strip */ position: relative; } body.post-view .post-main h2::before { content: ""; display: block; width: 38px; height: 3px; background: linear-gradient(90deg, var(--vgr-accent), var(--vgr-gold)); border-radius: 2px; margin-bottom: 14px; } body.post-view .post-main h3 { font-family: var(--vgr-font-serif); font-size: clamp(18px, 2.6vw, 21px); font-weight: 700; color: var(--vgr-ink); margin: 1.6em 0 0.5em; letter-spacing: -0.1px; line-height: 1.4; scroll-margin-top: 110px; } body.post-view .post-main a { color: var(--vgr-accent-2); text-decoration: underline; text-decoration-color: rgba(220, 107, 46, 0.35); text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: color 0.15s, text-decoration-color 0.15s; } body.post-view .post-main a:hover { color: var(--vgr-accent); text-decoration-color: var(--vgr-accent); } body.post-view .post-main strong, body.post-view .post-main b { color: var(--vgr-ink); font-weight: 700; } body.post-view .post-main em { color: var(--vgr-ink-soft); } body.post-view .post-main ul, body.post-view .post-main ol { margin: 0 0 1.4em; padding-left: 1.4em; } body.post-view .post-main li { margin-bottom: 0.55em; line-height: 1.7; } body.post-view .post-main ul > li::marker { color: var(--vgr-accent); } body.post-view .post-main blockquote { margin: 1.8em 0; padding: 22px 28px; background: linear-gradient(135deg, var(--vgr-cream), var(--vgr-cream-2)); border-left: 4px solid var(--vgr-accent); border-radius: 0 14px 14px 0; font-style: italic; font-size: 1.05em; color: var(--vgr-ink); position: relative; } body.post-view .post-main blockquote::before { content: "“"; position: absolute; top: -8px; left: 12px; font-size: 60px; color: var(--vgr-accent); opacity: 0.3; font-family: Georgia, serif; line-height: 1; } /* Tables */ body.post-view .post-main table { border-collapse: separate !important; border-spacing: 0 !important; width: 100%; margin: 1.5em 0; font-size: 0.95em; background: var(--vgr-card); border-radius: 12px; overflow: hidden; box-shadow: var(--vgr-shadow-sm); border: 1px solid var(--vgr-line-soft); } body.post-view .post-main thead th, body.post-view .post-main table tr:first-child td { background: var(--vgr-cream) !important; font-weight: 700; color: var(--vgr-ink); border-bottom: 1px solid var(--vgr-line) !important; padding: 12px 14px !important; text-align: left; } body.post-view .post-main td { padding: 10px 14px !important; border-bottom: 1px solid var(--vgr-line-soft) !important; border-left: 0 !important; border-right: 0 !important; border-top: 0 !important; color: var(--vgr-ink-soft); vertical-align: top; } body.post-view .post-main tbody tr:last-child td { border-bottom: 0 !important; } body.post-view .post-main tbody tr:hover td { background: rgba(220, 107, 46, 0.04); } @media (max-width: 600px) { body.post-view .post-main table { display: block; overflow-x: auto; white-space: nowrap; } } /* Figures + images */ body.post-view .post-main figure, body.post-view .post-main .image-block { margin: 1.8em 0 !important; text-align: center; } body.post-view .post-main figure img, body.post-view .post-main .image-block img, body.post-view .post-main p > img { max-width: 100% !important; height: auto !important; border-radius: var(--vgr-radius) !important; box-shadow: var(--vgr-shadow-md) !important; display: block; margin: 0 auto; } body.post-view .post-main figcaption { font-family: var(--vgr-font-sans); font-size: 13px !important; color: var(--vgr-mute) !important; margin-top: 10px !important; font-style: italic; line-height: 1.5; max-width: 540px; margin-left: auto !important; margin-right: auto !important; } /* Lite-YT video block */ body.post-view .post-main .lite-yt { margin: 24px auto !important; border-radius: var(--vgr-radius-lg) !important; box-shadow: var(--vgr-shadow-lg) !important; } /* Highlighted callout boxes (the user's inline-style "background:#fff8ee" boxes) */ body.post-view .post-main div[style*="background:#fff8ee"], body.post-view .post-main div[style*="background:linear-gradient(135deg,#fff8ee"] { background: linear-gradient(135deg, var(--vgr-cream), var(--vgr-cream-2)) !important; border: 1px solid var(--vgr-line) !important; border-radius: var(--vgr-radius-lg) !important; padding: 22px 24px !important; margin: 1.8em 0 !important; box-shadow: var(--vgr-shadow-sm); } body.post-view .post-main div[style*="background:#fff8ee"] h3, body.post-view .post-main div[style*="background:linear-gradient(135deg,#fff8ee"] h3 { margin-top: 0 !important; color: var(--vgr-accent) !important; } /* Dark callout (the gradient-dark CTA boxes) */ body.post-view .post-main div[style*="background:linear-gradient(135deg,#0b1220"] { background: linear-gradient(135deg, #0b1220, #1e293b) !important; border-radius: var(--vgr-radius-lg) !important; padding: 32px 28px !important; margin: 2em 0 !important; box-shadow: var(--vgr-shadow-lg); } /* ============================ TOC sidebar (desktop) + drawer (mobile) ============================ */ body.post-view .post-toc { background: var(--vgr-card) !important; border: 1px solid var(--vgr-line-soft) !important; border-radius: var(--vgr-radius) !important; box-shadow: var(--vgr-shadow-sm); padding: 14px 16px !important; } body.post-view .post-toc__title, body.post-view .post-toc .post-toc__heading { font-family: var(--vgr-font-sans); font-size: 11px !important; font-weight: 800 !important; letter-spacing: 0.10em !important; text-transform: uppercase; color: var(--vgr-muted) !important; margin-bottom: 10px !important; } body.post-view .post-toc a, body.post-view .post-toc__nav a { font-family: var(--vgr-font-sans); font-size: 13.5px !important; color: var(--vgr-ink-soft) !important; padding: 7px 10px !important; border-radius: 8px !important; text-decoration: none !important; display: block; transition: background 0.12s, color 0.12s; border-left: 2px solid transparent; line-height: 1.4; } body.post-view .post-toc a:hover, body.post-view .post-toc__nav a:hover { background: var(--vgr-cream); color: var(--vgr-accent) !important; } body.post-view .post-toc a.is-active, body.post-view .post-toc__nav a.is-active { background: rgba(220, 107, 46, 0.08); color: var(--vgr-accent) !important; font-weight: 600; border-left-color: var(--vgr-accent); } body.post-view .post-toc a[data-level="3"], body.post-view .post-toc__nav a[data-level="3"] { padding-left: 22px !important; font-size: 12.5px !important; color: var(--vgr-mute) !important; } /* ============================ FAQ block — modern accordion ============================ */ body.post-view .faq, body.post-view .faq-item { background: var(--vgr-card) !important; border: 1px solid var(--vgr-line-soft) !important; border-radius: 12px !important; margin-bottom: 10px !important; overflow: hidden; transition: box-shadow 0.15s; } body.post-view .faq:hover, body.post-view .faq-item:hover { box-shadow: var(--vgr-shadow-sm); } body.post-view .faq__question, body.post-view .faq summary, body.post-view .faq-item__q { font-family: var(--vgr-font-serif); font-size: 16px !important; font-weight: 600 !important; color: var(--vgr-ink) !important; padding: 16px 22px !important; cursor: pointer; list-style: none; } body.post-view .faq__question::after, body.post-view .faq summary::after { content: "+"; float: right; color: var(--vgr-accent); font-size: 22px; font-weight: 300; margin-left: 14px; transition: transform 0.2s; } body.post-view .faq[open] .faq__question::after, body.post-view .faq[open] summary::after { content: "−"; } body.post-view .faq__answer { padding: 0 22px 18px !important; font-size: 15px !important; line-height: 1.7 !important; color: var(--vgr-ink-soft) !important; } /* ============================ Share buttons ============================ */ body.post-view .share-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 18px; padding: 16px 18px; background: var(--vgr-card); border: 1px solid var(--vgr-line-soft); border-radius: var(--vgr-radius); } body.post-view .share-actions::before { content: "Share this insight"; width: 100%; font-family: var(--vgr-font-sans); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; color: var(--vgr-muted); text-transform: uppercase; margin-bottom: 6px; } body.post-view .share-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; padding: 9px 14px !important; border-radius: 10px !important; font-family: var(--vgr-font-sans); font-size: 13px !important; font-weight: 600 !important; text-decoration: none !important; transition: transform 0.12s, box-shadow 0.15s; border: 1px solid var(--vgr-line-soft); } body.post-view .share-btn:hover { transform: translateY(-1px); box-shadow: var(--vgr-shadow-sm); } /* ============================ Related cards ============================ */ body.post-view .related-grid__cards { gap: 18px !important; } body.post-view .related-card { background: var(--vgr-card) !important; border: 1px solid var(--vgr-line-soft) !important; border-radius: var(--vgr-radius) !important; transition: transform 0.15s, box-shadow 0.18s, border-color 0.15s; overflow: hidden; } body.post-view .related-card:hover { transform: translateY(-3px); box-shadow: var(--vgr-shadow-md); border-color: var(--vgr-accent); } body.post-view .related-card__title { font-family: var(--vgr-font-serif) !important; font-size: 15px !important; font-weight: 600 !important; color: var(--vgr-ink) !important; line-height: 1.4 !important; } /* ============================ Floating action stack (right side, desktop) / bottom bar (mobile) ============================ */ .vgr-fab { position: fixed; bottom: 22px; right: 22px; z-index: 90; display: flex; flex-direction: column; gap: 10px; } .vgr-fab-btn { width: 48px; height: 48px; border-radius: 50%; background: var(--vgr-card); color: var(--vgr-ink); border: 1px solid var(--vgr-line); cursor: pointer; display: grid; place-items: center; font-size: 18px; box-shadow: var(--vgr-shadow-md); transition: transform 0.15s, background 0.15s; font-family: var(--vgr-font-sans); text-decoration: none; } .vgr-fab-btn:hover { transform: translateY(-2px); background: var(--vgr-cream); color: var(--vgr-accent); } .vgr-fab-btn.is-active { background: var(--vgr-accent); color: #fff; border-color: var(--vgr-accent); } .vgr-fab-toc { display: none; } @media (max-width: 980px) { .vgr-fab-toc { display: grid; } } /* Reading mode panel */ .vgr-mode-panel { position: absolute; right: 58px; bottom: 0; background: var(--vgr-card); border: 1px solid var(--vgr-line); border-radius: 14px; padding: 10px; box-shadow: var(--vgr-shadow-md); display: none; gap: 6px; flex-direction: column; min-width: 150px; } .vgr-fab:has(.vgr-fab-btn[data-mode-open="1"]) .vgr-mode-panel, .vgr-mode-panel.is-open { display: flex; } .vgr-mode-panel button { background: transparent; border: 1px solid transparent; padding: 8px 12px; text-align: left; font-family: var(--vgr-font-sans); font-size: 13px; color: var(--vgr-ink-soft); cursor: pointer; border-radius: 8px; display: flex; align-items: center; gap: 8px; } .vgr-mode-panel button:hover { background: var(--vgr-cream); color: var(--vgr-accent); } .vgr-mode-panel button.is-active { background: rgba(220, 107, 46, 0.10); color: var(--vgr-accent); font-weight: 600; } /* Mobile TOC drawer */ .vgr-toc-drawer { position: fixed; bottom: 0; left: 0; right: 0; background: var(--vgr-card); border-top-left-radius: 22px; border-top-right-radius: 22px; box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.25); z-index: 95; max-height: 70vh; overflow-y: auto; transform: translateY(100%); transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.3, 1.0); padding: 18px 20px 30px; } .vgr-toc-drawer.is-open { transform: translateY(0); } .vgr-toc-drawer-overlay { position: fixed; inset: 0; background: rgba(11, 18, 32, 0.4); z-index: 94; opacity: 0; pointer-events: none; transition: opacity 0.2s; } .vgr-toc-drawer-overlay.is-open { opacity: 1; pointer-events: auto; } .vgr-toc-drawer__handle { width: 44px; height: 5px; background: var(--vgr-line); border-radius: 999px; margin: 0 auto 14px; } .vgr-toc-drawer__title { font-family: var(--vgr-font-sans); font-size: 11px; font-weight: 800; letter-spacing: 0.10em; text-transform: uppercase; color: var(--vgr-muted); margin-bottom: 12px; } .vgr-toc-drawer ol, .vgr-toc-drawer ul { list-style: none; margin: 0; padding: 0; } .vgr-toc-drawer a { display: block; font-family: var(--vgr-font-sans); font-size: 14px; color: var(--vgr-ink-soft); padding: 10px 12px; border-radius: 8px; text-decoration: none; line-height: 1.4; } .vgr-toc-drawer a[data-level="3"] { padding-left: 26px; font-size: 13px; color: var(--vgr-mute); } .vgr-toc-drawer a:hover { background: var(--vgr-cream); color: var(--vgr-accent); } .vgr-toc-drawer a.is-active { background: rgba(220, 107, 46, 0.10); color: var(--vgr-accent); font-weight: 600; } /* ============================ Sticky bottom mobile CTA — Book consult ============================ */ .vgr-mobile-cta { display: none; position: fixed; left: 12px; right: 12px; bottom: 14px; z-index: 80; background: linear-gradient(135deg, #dc6b2e, #b8511f); color: #fff; text-decoration: none; font-family: var(--vgr-font-sans); font-weight: 700; font-size: 14px; padding: 13px 18px; border-radius: 14px; align-items: center; justify-content: space-between; box-shadow: 0 12px 30px rgba(220, 107, 46, 0.35); } .vgr-mobile-cta.is-visible { display: flex; } .vgr-mobile-cta::after { content: "→"; font-weight: 600; } /* On mobile, give content extra bottom padding for the floating CTA */ @media (max-width: 768px) { body.post-view { padding-bottom: 90px; } } /* ============================ Hide overlapping native-theme components that we've replaced ============================ */ @media (max-width: 980px) { body.post-view .post-toc.js-post-toc:not(.devta-sidebar-card--toc) { /* Mobile TOC moves to the drawer; original block hidden */ display: none; } } /* Subtle paragraph rhythm fix — reduce wordy density */ body.post-view .post-main p + p { margin-top: 0.4em; } /* Anchor-link style on h2/h3 hover */ body.post-view .post-main h2 .vgr-anchor, body.post-view .post-main h3 .vgr-anchor { opacity: 0; margin-left: 8px; color: var(--vgr-mute); font-weight: 400; text-decoration: none; font-size: 0.7em; transition: opacity 0.15s, color 0.15s; } body.post-view .post-main h2:hover .vgr-anchor, body.post-view .post-main h3:hover .vgr-anchor { opacity: 1; } body.post-view .post-main .vgr-anchor:hover { color: var(--vgr-accent); } /* Reduce inline-style font-size noise from author content */ body.post-view .post-main *[style*="font-size:13px"][style*="color:#64748b"] { font-size: 13px !important; color: var(--vgr-mute) !important; font-style: italic; } /* Final small polish — selection color */ body.post-view ::selection { background: rgba(220, 107, 46, 0.20); color: var(--vgr-ink); }