/* ========================================================================== Blog Reading Page Redesign · Rudra Yoga Ashram Loaded AFTER main.min.css to enhance the single-post reading experience. Uses existing design tokens (sage/gold palette, Lora + Raleway). Scope: applied only when has class "blog-read". ========================================================================== */ /* ---- Reading progress bar (top of viewport) ---- */ .blog-read .reading-progress { position: fixed; top: 0; left: 0; height: 4px; width: 0; background: linear-gradient(90deg, var(--primary) 0%, var(--gold) 60%, var(--accent) 100%); z-index: 2000; transition: width .12s ease-out; will-change: width; } /* ---- Hero ---- */ .blog-read .blog-post-hero { padding: 118px 0 92px; position: relative; background-position: center; background-size: cover; } .blog-read .blog-post-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(42,60,38,.55) 0%, rgba(42,60,38,.78) 100%); } .blog-read .blog-post-hero .container { position: relative; z-index: 1; } .blog-read .blog-post-hero .blog-category-tag { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); color: #fff; padding: 7px 18px; border-radius: 999px; font-size: 12.5px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; backdrop-filter: blur(4px); margin-bottom: 22px; } .blog-read .blog-post-hero .blog-category-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); } .blog-read .blog-post-hero h1 { font-size: clamp(28px, 5vw, 46px); line-height: 1.2; letter-spacing: -.5px; max-width: 880px; margin: 0 auto 22px; text-shadow: 0 2px 20px rgba(0,0,0,.25); } .blog-read .blog-post-meta-hero { gap: 10px 22px; font-size: 14.5px; } .blog-read .blog-post-meta-hero span { display: inline-flex; align-items: center; } .blog-read .blog-post-meta-hero i { color: var(--gold); } /* ---- Content card & reading measure ---- */ .blog-read .blog-content-wrap { max-width: 780px; margin: -56px auto 0; padding: 56px clamp(22px, 5vw, 64px) 48px; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--border-light); } /* Lead paragraph */ .blog-read .blog-content-wrap > p:first-of-type { font-size: 20px; line-height: 1.7; color: var(--text); font-weight: 400; } .blog-read .blog-content-wrap > p:first-of-type strong { color: var(--primary-dark); } /* Body text — comfortable, high-contrast, ~68ch measure */ .blog-read .blog-content-wrap p, .blog-read .blog-content-wrap li { font-size: 17px; line-height: 1.85; color: var(--text-secondary); } .blog-read .blog-content-wrap ul, .blog-read .blog-content-wrap ol { padding-left: 22px; margin: 0 0 22px; } .blog-read .blog-content-wrap li { margin-bottom: 10px; padding-left: 4px; } .blog-read .blog-content-wrap li::marker { color: var(--accent); } .blog-read .blog-content-wrap strong { color: var(--text); font-weight: 700; } /* In-content links — clearly a link (colour + underline), NO background highlight. The theme forces `a { text-decoration: none !important }`, so we underline with border-bottom. */ .blog-read .blog-content-wrap p a, .blog-read .blog-content-wrap li a { color: var(--accent-dark); font-weight: 600; background: none; border-bottom: 2px solid var(--accent-light); transition: color var(--transition), border-color var(--transition); } .blog-read .blog-content-wrap p a:hover, .blog-read .blog-content-wrap li a:hover, .blog-read .blog-content-wrap p a:focus-visible, .blog-read .blog-content-wrap li a:focus-visible { color: var(--primary-dark); border-bottom-color: var(--primary-dark); } /* Keep the Table of Contents links out of the in-content link style */ .blog-read .blog-content-wrap .blog-toc a { color: var(--text-secondary); font-weight: 500; background: none; border-bottom: none; } .blog-read .blog-content-wrap .blog-toc a:hover, .blog-read .blog-content-wrap .blog-toc a.toc-active { color: var(--primary-dark); border-bottom: none; } /* Table header text stays white on the coloured header */ .blog-read .blog-table th { color: #fff; } /* Headings with accent tick + safe scroll anchor offset */ .blog-read .blog-content-wrap h2 { font-size: clamp(23px, 3.4vw, 30px); line-height: 1.3; letter-spacing: -.3px; margin: 52px 0 18px; padding: 0 0 0 18px; border-bottom: 0; position: relative; scroll-margin-top: 90px; } .blog-read .blog-content-wrap h2::before { content: ""; position: absolute; left: 0; top: .16em; bottom: .16em; width: 5px; border-radius: 3px; background: linear-gradient(var(--primary), var(--accent)); } .blog-read .blog-content-wrap h3 { font-size: clamp(19px, 2.6vw, 22px); color: var(--primary-dark); margin: 34px 0 12px; scroll-margin-top: 90px; } .blog-read .blog-content-wrap img { border-radius: var(--radius); margin: 28px 0; box-shadow: var(--shadow-sm); } /* ---- Table of Contents ---- */ .blog-read .blog-toc { background: var(--bg-sage); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 30px; margin: 0 0 40px; position: relative; overflow: hidden; } .blog-read .blog-toc::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); } .blog-read .blog-toc h4 { font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--primary-dark); margin: 0 0 16px; } .blog-read .blog-toc ol { list-style: none; counter-reset: toc; padding: 0; margin: 0; } .blog-read .blog-toc li { counter-increment: toc; margin: 0; padding: 0; } .blog-read .blog-toc a { display: flex; align-items: flex-start; gap: 12px; padding: 9px 10px; border-radius: 8px; font-size: 15.5px; color: var(--text-secondary); font-weight: 500; text-decoration: none; transition: background var(--transition), color var(--transition); } .blog-read .blog-toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--font-heading); font-size: 13px; font-weight: 600; color: var(--accent); min-width: 22px; padding-top: 1px; } .blog-read .blog-toc a:hover, .blog-read .blog-toc a.toc-active { background: var(--surface); color: var(--primary-dark); text-decoration: none; box-shadow: var(--shadow-sm); } /* ---- Info / callout boxes ---- */ .blog-read .blog-info-box { background: linear-gradient(135deg, var(--bg-sage) 0%, var(--primary-lightest) 100%); border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: var(--radius); padding: 24px 26px 24px 56px; margin: 30px 0; position: relative; } .blog-read .blog-info-box::before { content: "\f0eb"; /* lightbulb */ font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 20px; top: 24px; color: var(--primary); font-size: 18px; } .blog-read .blog-info-box h4 { font-size: 17px; color: var(--primary-dark); margin-bottom: 8px; } .blog-read .blog-info-box p, .blog-read .blog-info-box li { font-size: 15.5px; margin-bottom: 0; } /* ---- FAQ (info boxes that follow the #faq heading) ---- */ .blog-read #faq { margin-top: 56px; } .blog-read #faq ~ .blog-info-box { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); padding: 22px 26px 22px 58px; } .blog-read #faq ~ .blog-info-box::before { content: "Q"; font-family: var(--font-heading); font-weight: 700; font-size: 17px; color: #fff; background: var(--accent); width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; left: 18px; top: 22px; } .blog-read #faq ~ .blog-info-box h4 { color: var(--text); } /* ---- Tables ---- */ .blog-read .blog-table-wrap { border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); margin: 28px 0; -webkit-overflow-scrolling: touch; } .blog-read .blog-table { font-size: 15.5px; } .blog-read .blog-table thead { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); } .blog-read .blog-table th { padding: 15px 20px; letter-spacing: .3px; white-space: nowrap; } .blog-read .blog-table td { padding: 14px 20px; border-bottom: 1px solid var(--border-light); color: var(--text-secondary); } .blog-read .blog-table tbody tr:nth-child(even) { background: var(--bg); } .blog-read .blog-table tbody tr:hover { background: var(--bg-sage); } .blog-read .blog-table a { color: var(--primary-dark); font-weight: 600; } /* ---- Share row ---- */ .blog-read .blog-share { gap: 10px; padding: 22px 0; margin: 44px 0 8px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); flex-wrap: wrap; } .blog-read .blog-share-label { color: var(--text); font-size: 14px; letter-spacing: .2px; } .blog-read .blog-share a { width: 44px; height: 44px; box-shadow: var(--shadow-sm); } .blog-read .blog-share a:hover { transform: translateY(-3px); box-shadow: var(--shadow); } /* ---- Author box ---- */ .blog-read .blog-author-box { background: var(--bg-cream); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px; gap: 22px; margin: 32px 0; } .blog-read .blog-author-info h4 { font-size: 19px; } .blog-read .blog-author-info .author-role { color: var(--accent); } .blog-read .blog-author-info p { color: var(--text-secondary); font-size: 14.5px; line-height: 1.7; } /* ---- Bottom CTA ---- */ .blog-read .blog-cta-box { background: radial-gradient(circle at 85% 15%, rgba(212,168,83,.25), transparent 45%), linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); border-radius: var(--radius-lg); padding: 46px clamp(24px, 5vw, 48px); box-shadow: var(--shadow-lg); position: relative; overflow: hidden; } .blog-read .blog-cta-box h3 { font-size: clamp(22px, 3.4vw, 28px); margin-bottom: 12px; } .blog-read .blog-cta-box .theme-button { background: var(--gold); color: var(--primary-dark); font-weight: 700; padding: 15px 38px; border-radius: 999px; box-shadow: var(--shadow); transition: transform var(--transition), background var(--transition); } .blog-read .blog-cta-box .theme-button:hover { background: var(--accent-light); transform: translateY(-2px); color: var(--primary-dark); } /* ---- Related posts ---- */ .blog-read .blog-related { background: var(--bg-sage); padding: 60px 0; } .blog-read .blog-related h3 { text-align: center; font-size: clamp(22px, 3.4vw, 28px); color: var(--text); margin-bottom: 34px; } .blog-read .blog-related .blog-card { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); } .blog-read .blog-related .blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } /* ---- Floating back-to-top ---- */ .blog-read .back-to-top { position: fixed; right: 22px; bottom: 24px; width: 48px; height: 48px; border-radius: 50%; background: var(--primary-dark); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 17px; box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity var(--transition), transform var(--transition), background var(--transition); z-index: 1500; } .blog-read .back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); } .blog-read .back-to-top:hover { background: var(--accent); } /* ---- Accessibility: focus + smooth scroll ---- */ .blog-read { scroll-behavior: smooth; } .blog-read .blog-toc a:focus-visible, .blog-read .blog-content-wrap a:focus-visible, .blog-read .blog-share a:focus-visible, .blog-read .back-to-top:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; } /* ---- Responsive ---- */ @media (max-width: 991px) { .blog-read .blog-content-wrap { max-width: 720px; } } @media (max-width: 767px) { .blog-read .blog-post-hero { padding: 92px 0 64px; } .blog-read .blog-content-wrap { margin-top: -40px; padding: 34px 20px 36px; border-radius: var(--radius); } .blog-read .blog-content-wrap > p:first-of-type { font-size: 18px; } .blog-read .blog-content-wrap p, .blog-read .blog-content-wrap li { font-size: 16.5px; line-height: 1.8; } .blog-read .blog-content-wrap h2 { margin-top: 40px; } .blog-read .blog-toc { padding: 22px 20px; } .blog-read .blog-info-box { padding: 20px 20px 20px 52px; } .blog-read .blog-author-box { flex-direction: column; text-align: center; align-items: center; padding: 26px 20px; } .blog-read .back-to-top { right: 16px; bottom: 16px; } } @media (max-width: 400px) { .blog-read .blog-share a { width: 42px; height: 42px; } } /* ---- Respect reduced motion ---- */ @media (prefers-reduced-motion: reduce) { .blog-read, .blog-read * { scroll-behavior: auto !important; } .blog-read .reading-progress, .blog-read .blog-related .blog-card, .blog-read .back-to-top, .blog-read .blog-share a, .blog-read .blog-cta-box .theme-button { transition: none !important; } } /* ========================================================================== 8 / 4 Two-Column Layout · article (col-lg-8) + sticky course sidebar (col-lg-4) ========================================================================== */ .blog-read .blog-layout { margin-top: -56px; position: relative; z-index: 2; } .blog-read .blog-layout .blog-content-wrap { max-width: none; margin: 0; } /* Body sets overflow:hidden site-wide, which breaks position:sticky — re-enable on reading pages */ .final-changes.blog-read { overflow: visible; } .blog-read .blog-sidebar { position: sticky; top: 24px; align-self: start; display: flex; flex-direction: column; gap: 22px; } .blog-read .sidebar-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); } .blog-read .sidebar-title { font-family: var(--font-heading); font-size: 17px; font-weight: 700; color: var(--text); margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border-light); } /* Promo card */ .blog-read .sidebar-promo { background: radial-gradient(circle at 85% 12%, rgba(212,168,83,.28), transparent 46%), linear-gradient(150deg, var(--primary) 0%, var(--primary-dark) 100%); border: none; color: #fff; } .blog-read .sidebar-badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3); color: #fff; padding: 5px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; margin-bottom: 14px; } .blog-read .sidebar-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); } .blog-read .sidebar-promo h4 { font-family: var(--font-heading); color: #fff; font-size: 20px; line-height: 1.3; margin: 0 0 10px; } .blog-read .sidebar-promo p { color: rgba(255,255,255,.88); font-size: 14px; line-height: 1.6; margin: 0 0 18px; } .blog-read .sidebar-btn { display: flex; align-items: center; justify-content: center; gap: 9px; background: var(--gold); color: var(--primary-dark); font-weight: 700; font-size: 15px; padding: 13px 18px; border-radius: 10px; text-decoration: none; margin-bottom: 10px; transition: background var(--transition), transform var(--transition); } .blog-read .sidebar-btn:hover { background: var(--accent-light); color: var(--primary-dark); transform: translateY(-2px); text-decoration: none; } .blog-read .sidebar-btn-outline { display: flex; align-items: center; justify-content: center; border: 1.5px solid rgba(255,255,255,.6); color: #fff; font-weight: 600; font-size: 14.5px; padding: 11px 18px; border-radius: 10px; text-decoration: none; transition: background var(--transition); } .blog-read .sidebar-btn-outline:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; } /* Course list */ .blog-read .sidebar-courses { list-style: none; padding: 0; margin: 0; } .blog-read .sidebar-courses li { margin: 0; } .blog-read .sidebar-courses li + li { border-top: 1px solid var(--border-light); } .blog-read .sidebar-courses a { display: flex; align-items: center; gap: 8px; padding: 13px 6px; font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--text-secondary); text-decoration: none; transition: color var(--transition), padding var(--transition); } .blog-read .sidebar-courses a span { flex: 1; } .blog-read .sidebar-courses a em { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #fff; background: var(--accent); padding: 3px 8px; border-radius: 999px; } .blog-read .sidebar-courses a i { color: var(--primary-light); font-size: 12px; transition: transform var(--transition), color var(--transition); } .blog-read .sidebar-courses a:hover { color: var(--primary-dark); padding-left: 12px; } .blog-read .sidebar-courses a:hover i { color: var(--accent); transform: translateX(3px); } /* USP list */ .blog-read .sidebar-usp ul { list-style: none; padding: 0; margin: 0; } .blog-read .sidebar-usp li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; font-size: 14px; line-height: 1.5; color: var(--text-secondary); } .blog-read .sidebar-usp li i { color: var(--primary); margin-top: 2px; flex-shrink: 0; } /* Layout responsive: stack sidebar under the article below 992px */ @media (max-width: 991px) { .blog-read .blog-layout { margin-top: -40px; } .blog-read .blog-sidebar { position: static; margin-top: 24px; } } /* ========================================================================== Sidebar polish v2 + fixed left social share bar ========================================================================== */ .blog-read .sidebar-title { display: flex; align-items: center; gap: 9px; } .blog-read .sidebar-title i { color: var(--accent); font-size: 15px; } .blog-read .sidebar-promo .sidebar-btn, .blog-read .sidebar-promo .sidebar-btn-outline { width: 100%; } .blog-read .sidebar-btn-outline i { margin-right: 7px; } /* Course rows: clean list inside the card */ .blog-read .sidebar-courses a { gap: 10px; padding: 13px 8px; } .blog-read .sidebar-courses .sc-name { flex: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; line-height: 1.35; } .blog-read .sidebar-courses .sc-meta { font-size: 11px; font-weight: 700; color: var(--text-muted); background: var(--bg-sage); border-radius: 999px; padding: 3px 9px; white-space: nowrap; transition: background var(--transition), color var(--transition); } .blog-read .sidebar-courses a i.fa-chevron-right { color: var(--primary-light); font-size: 11px; } .blog-read .sidebar-courses a:hover .sc-meta { background: var(--primary-lightest); color: var(--primary-dark); } /* ---- Fixed left social share bar (wide screens only) ---- */ .blog-share-fixed { position: fixed; left: 16px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 1400; } .blog-share-fixed .sf-label { writing-mode: vertical-rl; text-align: center; font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; } .blog-share-fixed a { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 17px; text-decoration: none; box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; } .blog-share-fixed a:hover { transform: translateY(-2px) scale(1.06); box-shadow: var(--shadow); color: #fff; filter: brightness(1.05); } .blog-share-fixed a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .blog-share-fixed .sf-fb { background: #1877F2; } .blog-share-fixed .sf-tw { background: #111; } .blog-share-fixed .sf-wa { background: #25D366; } .blog-share-fixed .sf-li { background: #0077B5; } .blog-share-fixed .sf-pin { background: #E60023; } .blog-share-fixed .sf-copy { background: var(--primary-dark); } /* Hide the fixed bar when the viewport is too narrow to fit it beside the content */ @media (max-width: 1299px) { .blog-share-fixed { display: none; } } /* Keep back-to-top clear of the WhatsApp float button (bottom:90 right:20) */ .blog-read .back-to-top { bottom: 24px; right: 24px; }