/* ========================================================================= FreePlinko Blog — White-paper article style Activated by adding `paper-mode` class to in each blog post. Mirrors the homepage .content-paper look (Edit on index.css): - Soft neutral page wash + centered white card for the article body - Brand gradient kept on H1; H2/H3 use bold black editorial weight - Font sizes & spacing tuned for long-form reading (~17px body, lh 1.8) - Navbar / mobile menu / footer remain in original brand dark theme ========================================================================= */ /* Outer wash behind the article */ body.paper-mode { background: #EEF0F4 !important; color: #1F2937 !important; } /* Cancel global background-image overlays from the dark theme */ body.paper-mode::before { display: none !important; } /* Article container becomes the white "paper" */ body.paper-mode .article-container { background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 16px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 32px rgba(15, 23, 42, 0.06); padding: 3.25rem 3rem; margin: 1.5rem auto 4rem; max-width: 800px; } /* Breadcrumb on light background */ body.paper-mode .breadcrumb { color: #475569; margin-top: 100px; } body.paper-mode .breadcrumb a { color: #6366F1; } body.paper-mode .breadcrumb span { color: #64748B; } /* ---- Article header ---- */ body.paper-mode .article-meta-top { color: #B45309; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.8rem; } body.paper-mode .article-title { font-family: 'Orbitron', monospace; font-size: 2rem; font-weight: 800; line-height: 1.2; margin-bottom: 1.1rem; /* Keep brand gradient on H1 */ background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } body.paper-mode .article-subtitle { color: #475569; font-size: 1.1rem; line-height: 1.7; } body.paper-mode .article-header { margin-bottom: 2.25rem; padding-bottom: 1.5rem; border-bottom: 1px solid #E5E7EB; } /* ---- Article body ---- */ body.paper-mode .article-body h2 { font-family: 'Inter', sans-serif; font-weight: 800; color: #0F172A; font-size: 1.55rem; line-height: 1.3; margin: 2.75rem 0 1rem; padding-bottom: 0; border-bottom: none; letter-spacing: -0.005em; } body.paper-mode .article-body h3 { font-family: 'Inter', sans-serif; font-weight: 700; color: #1E293B; font-size: 1.2rem; line-height: 1.35; margin: 2rem 0 0.7rem; } body.paper-mode .article-body p { color: #1F2937; font-size: 1.0625rem; /* ~17px */ line-height: 1.8; margin-bottom: 1.25rem; letter-spacing: 0.005em; } body.paper-mode .article-body strong { color: #0F172A; font-weight: 700; } body.paper-mode .article-body em { color: #1F2937; font-style: italic; } body.paper-mode .article-body a { color: #6366F1; text-decoration: none; border-bottom: 1px solid rgba(99, 102, 241, 0.35); transition: color 0.2s ease, border-color 0.2s ease; } body.paper-mode .article-body a:hover { color: #4F46E5; border-bottom-color: #6366F1; } body.paper-mode .article-body ul, body.paper-mode .article-body ol { color: #1F2937; font-size: 1.0625rem; line-height: 1.8; margin: 0.75rem 0 1.5rem 1.5rem; padding-left: 0.5rem; } body.paper-mode .article-body li { margin-bottom: 0.5rem; } body.paper-mode .article-body li::marker { color: #6366F1; } body.paper-mode .article-body blockquote { background: #F8FAFC; border-left: 3px solid #6366F1; border-radius: 0 10px 10px 0; padding: 1rem 1.25rem; margin: 1.75rem 0; color: #334155; font-style: italic; line-height: 1.75; } /* ---- Highlight box ---- */ body.paper-mode .highlight-box { background: #F8FAFC; border: 1px solid #E5E7EB; border-radius: 12px; padding: 1.75rem 1.75rem; margin: 2rem 0; } body.paper-mode .highlight-box h3 { margin-top: 0; color: #0F172A; } body.paper-mode .highlight-box p, body.paper-mode .highlight-box li { color: #1F2937; } /* ---- CTA box ---- */ body.paper-mode .cta-box { background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%); border: 1px solid rgba(99, 102, 241, 0.25); border-radius: 14px; padding: 1.75rem 1.5rem; margin: 2.5rem 0; text-align: center; } body.paper-mode .cta-box p { color: #0F172A !important; font-size: 1.05rem; margin-bottom: 1.1rem; font-weight: 500; } body.paper-mode .cta-box .download-cta { /* Keep brand gradient button visible on light background */ background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%); color: #FFFFFF !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); border-radius: 10px; padding: 0.85rem 1.9rem; font-weight: 600; box-shadow: 0 4px 14px rgba(99, 102, 241, 0.25); } body.paper-mode .cta-box .download-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(99, 102, 241, 0.35); } /* ---- Article images ---- */ body.paper-mode .article-image img { border: 1px solid #E5E7EB; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08); } body.paper-mode .article-image figcaption { color: #64748B; } /* ---- FAQ section ---- */ body.paper-mode .article-body .faq-section, body.paper-mode .faq-section { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid #E5E7EB; } body.paper-mode .faq-section h2 { color: #0F172A; font-family: 'Inter', sans-serif; font-weight: 800; text-align: left; } body.paper-mode .faq-item { background: #F8FAFC; border: 1px solid #E5E7EB; border-radius: 12px; } body.paper-mode .faq-item:hover { border-color: rgba(99, 102, 241, 0.35); } body.paper-mode .faq-item.active { background: #FFFFFF; border-color: #6366F1; } body.paper-mode .faq-question { color: #0F172A; font-weight: 700; } body.paper-mode .faq-question:hover { color: #4F46E5; } body.paper-mode .faq-arrow { color: #6366F1; } body.paper-mode .faq-answer p { color: #334155; line-height: 1.75; font-size: 1rem; } /* ---- Back links ---- */ body.paper-mode .back-links { border-top: 1px solid #E5E7EB; } body.paper-mode .back-links a { color: #6366F1; font-weight: 600; } body.paper-mode .back-links a:hover { color: #4F46E5; } /* ---- Mobile tuning ---- */ @media (max-width: 768px) { body.paper-mode .article-container { padding: 2rem 1.4rem; border-radius: 14px; margin: 1rem auto 3rem; } body.paper-mode .breadcrumb { margin-top: 80px; } body.paper-mode .article-title { font-size: 1.55rem; } body.paper-mode .article-subtitle { font-size: 1rem; } body.paper-mode .article-body h2 { font-size: 1.25rem; margin-top: 2.25rem; } body.paper-mode .article-body h3 { font-size: 1.08rem; } body.paper-mode .article-body p, body.paper-mode .article-body ul, body.paper-mode .article-body ol { font-size: 1rem; line-height: 1.75; } body.paper-mode .faq-question { font-size: 1rem; } } /* ---------- Footer (paper-mode variant) ---------- */ /* Self-contained: layout + colors. Drop