/* =========================================================================
FreePlinko Blog — Editorial Light Theme (v2)
Activated by `paper-mode` class on .
This stylesheet is self-contained — it overrides the dark navbar / mobile
menu / footer inlined in each blog file, hides them, and renders a clean
long-form editorial layout matching /plinko-app/.
A small JS at the bottom auto-injects: progress bar, TOC, share buttons,
back-to-top — so the 16 existing blog HTMLs need NO markup changes.
========================================================================= */
/* ---------- Reset & root ---------- */
body.paper-mode, body.paper-mode * { box-sizing: border-box; }
body.paper-mode {
--bg: #ffffff;
--bg-soft: #f7f8fa;
--bg-tint: #fafbfd;
--ink: #111111;
--ink-2: #252525;
--ink-3: #404040;
--ink-4: #6b7280;
/* OVERRIDE per-page :root vars used by inline article CSS.
Every blog page sets --text-primary: #FFFFFF (white) and
--text-secondary: #94A3B8 (light blue-gray) for its dark theme. In
paper-mode we remap them to black/dark-gray so inline rules like
`color: var(--text-primary)` render correctly on white background. */
--text-primary: #111111;
--text-secondary: #252525;
--text-muted: #404040;
--border-subtle: #e5e7eb;
--line: #e5e7eb;
--line-2: #eef0f3;
--brand: #3B82F6;
--brand-dark: #1d4ed8;
--accent: #8B5CF6;
--link: #2563eb;
--link-2: #1d4ed8;
--green: #16a34a;
--shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
--shadow-md: 0 4px 12px rgba(15,23,42,.06), 0 2px 4px rgba(15,23,42,.04);
--serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
background: var(--bg) !important;
color: var(--ink-2) !important;
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
font-size: 16px !important;
line-height: 1.7 !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0 !important;
padding: 0 !important;
}
body.paper-mode::before { display: none !important; }
/* ---------- Hide legacy dark navbar / mobile-menu / hamburger ---------- */
body.paper-mode .navbar,
body.paper-mode .mobile-menu,
body.paper-mode .menu-overlay,
body.paper-mode .menu-btn { display: none !important; }
/* ---------- Reading progress bar (auto-injected) ---------- */
body.paper-mode #bp-progress {
position: fixed; top: 0; left: 0;
height: 3px; width: 0%;
background: linear-gradient(90deg, #3B82F6, #8B5CF6);
z-index: 1000;
transition: width .1s linear;
}
/* ---------- Site header (auto-injected) ---------- */
body.paper-mode #bp-header {
background: linear-gradient(180deg, #12122e 0%, #0a0a1e 100%);
border-bottom: 1px solid rgba(59,130,246,.18);
padding: 12px 24px;
display: flex; align-items: center; gap: 16px;
position: sticky; top: 0; z-index: 100;
}
body.paper-mode #bp-header .bp-site-name {
font-family: 'Orbitron', monospace;
font-size: 1.6rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: none;
background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
text-decoration: none; white-space: nowrap;
}
body.paper-mode #bp-header .bp-site-name:hover { opacity: .9; }
body.paper-mode #bp-header .bp-nav { margin-left: auto; display: flex; align-items: center; gap: 20px; }
body.paper-mode #bp-header .bp-nav a {
color: rgba(255,255,255,.78);
font-size: 13px; font-weight: 600; letter-spacing: .5px;
text-transform: uppercase; text-decoration: none;
transition: color .2s;
}
body.paper-mode #bp-header .bp-nav a:hover { color: #8B5CF6; }
body.paper-mode #bp-header .bp-nav .bp-get-app {
color: #8B5CF6; border: 1.5px solid rgba(139,92,246,.45);
border-radius: 6px; padding: 6px 16px; font-size: 12px; letter-spacing: 1px;
transition: all .2s;
}
body.paper-mode #bp-header .bp-nav .bp-get-app:hover {
background: rgba(139,92,246,.12); border-color: rgba(139,92,246,.8);
}
@media (max-width: 664px) {
body.paper-mode #bp-header { flex-direction: column; gap: 10px; padding: 14px 20px; }
body.paper-mode #bp-header .bp-site-name { text-align: center; font-size: 20px; white-space: normal; }
body.paper-mode #bp-header .bp-nav { margin-left: 0; flex-wrap: wrap; justify-content: center; gap: 16px; }
}
/* Promo ticker spacing on paper-mode pages — gap between banner and first
content block (breadcrumb / page header / article header). */
body.paper-mode .ptk-banner { margin-bottom: 8px !important; }
@media (max-width: 600px) {
body.paper-mode .ptk-banner { margin-bottom: 6px !important; }
}
/* ---------- Article shell ---------- */
body.paper-mode .article-container {
max-width: 1180px;
margin: 0 auto !important;
padding: 8px 24px 64px !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}
@media (max-width: 600px) {
body.paper-mode .article-container { padding: 4px 16px 48px !important; }
}
/* ---------- Breadcrumb (supports .breadcrumb / .breadcrumbs / .crumbs) ---------- */
body.paper-mode .breadcrumb,
body.paper-mode .breadcrumbs,
body.paper-mode .crumbs {
font-size: 13px !important;
color: var(--ink-4) !important;
margin: 16px auto 12px !important;
max-width: 620px !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
font-family: 'Inter', sans-serif !important;
text-transform: none !important;
letter-spacing: 0 !important;
font-weight: 400 !important;
}
body.paper-mode .breadcrumb a,
body.paper-mode .breadcrumbs a,
body.paper-mode .crumbs a {
color: var(--ink-4) !important;
text-decoration: none !important;
border-bottom: none !important;
font-weight: 400 !important;
}
body.paper-mode .breadcrumb a:hover,
body.paper-mode .breadcrumbs a:hover,
body.paper-mode .crumbs a:hover { color: var(--ink-2) !important; }
body.paper-mode .breadcrumb .sep,
body.paper-mode .breadcrumbs .sep,
body.paper-mode .crumbs .sep { margin: 0 8px !important; color: #c4cad4 !important; }
body.paper-mode .breadcrumb span,
body.paper-mode .breadcrumbs span,
body.paper-mode .crumbs span { color: var(--ink-4) !important; }
/* ---------- Article header (h1, subtitle, optional meta) ---------- */
body.paper-mode .article-header {
max-width: 620px;
margin: 0 auto 28px !important;
padding: 0 0 0 0 !important;
border-bottom: none !important;
}
/* Force every article H1 to be solid black Inter, kill brand-gradient/Orbitron
left over from per-page inline styles (e.g. .article-header h1) */
body.paper-mode .article-title,
body.paper-mode .article-header h1,
body.paper-mode h1.article-title,
body.paper-mode article > header h1,
body.paper-mode .article-container > .article-header h1 {
font-family: 'Inter', sans-serif !important;
font-size: clamp(26px, 4vw, 38px) !important;
font-weight: 800 !important;
color: var(--ink) !important;
line-height: 1.18 !important;
letter-spacing: -0.02em !important;
margin: 0 0 16px !important;
background: none !important;
background-image: none !important;
-webkit-background-clip: border-box !important;
background-clip: border-box !important;
-webkit-text-fill-color: var(--ink) !important;
text-shadow: none !important;
}
/* Force every article H2 & H3 to be solid black Inter — kill any inline Orbitron/
gradient/uppercase variants. Selectors use `html body.paper-mode` to bump
specificity past per-page inline rules (which often spell out long ancestor
chains like `.article-container .article-body h2`). */
html body.paper-mode .article-body h2,
html body.paper-mode .article-body h3,
html body.paper-mode .article-container h2,
html body.paper-mode .article-container h3,
html body.paper-mode .section h2,
html body.paper-mode .section h3,
html body.paper-mode .content-section h2,
html body.paper-mode .content-section h3,
html body.paper-mode .article-container .article-body h2,
html body.paper-mode .article-container .article-body h3 {
font-family: 'Inter', sans-serif !important;
color: #111111 !important;
background: none !important;
background-image: none !important;
-webkit-background-clip: border-box !important;
background-clip: border-box !important;
-webkit-text-fill-color: #111111 !important;
text-shadow: none !important;
text-transform: none !important;
letter-spacing: -0.005em !important;
border: 0 !important;
border-bottom: 0 !important;
}
html body.paper-mode .article-body h2,
html body.paper-mode .article-container h2,
html body.paper-mode .section h2,
html body.paper-mode .content-section h2,
html body.paper-mode .article-container .article-body h2 {
font-size: clamp(22px, 2.6vw, 28px) !important;
font-weight: 800 !important;
line-height: 1.28 !important;
margin: 48px 0 16px !important;
padding: 4px 0 0 !important;
}
html body.paper-mode .article-body h3,
html body.paper-mode .article-container h3,
html body.paper-mode .section h3,
html body.paper-mode .content-section h3,
html body.paper-mode .article-container .article-body h3 {
font-size: 19px !important;
font-weight: 700 !important;
line-height: 1.4 !important;
margin: 28px 0 10px !important;
}
/* Force article body text dark too (paragraph + list) */
html body.paper-mode .article-body p,
html body.paper-mode .article-container p,
html body.paper-mode .article-body li,
html body.paper-mode .article-container li,
html body.paper-mode .article-body ul,
html body.paper-mode .article-body ol,
html body.paper-mode .article-container ul,
html body.paper-mode .article-container ol {
color: #252525 !important;
}
html body.paper-mode .article-body strong,
html body.paper-mode .article-container strong { color: #111111 !important; }
html body.paper-mode .article-title,
html body.paper-mode .article-header h1 {
color: #111111 !important;
-webkit-text-fill-color: #111111 !important;
background: none !important;
background-image: none !important;
}
/* ---------- "More Plinko Insights" block on /blog/ listing ---------- */
/* Kill the wrapping card border + remap insight titles from gradient text
to plain black, and convert insight-body content to dark editorial. */
html body.paper-mode .insights-container {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
box-shadow: none !important;
}
html body.paper-mode .insight-item {
border-bottom: 1px solid var(--line) !important;
padding-bottom: 28px !important;
margin-bottom: 28px !important;
}
html body.paper-mode .insight-item:last-child {
border-bottom: 0 !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
html body.paper-mode .insight-item .insight-title {
font-family: 'Inter', sans-serif !important;
font-size: 19px !important;
font-weight: 700 !important;
color: #111111 !important;
background: none !important;
background-image: none !important;
-webkit-background-clip: border-box !important;
background-clip: border-box !important;
-webkit-text-fill-color: #111111 !important;
text-shadow: none !important;
text-transform: none !important;
letter-spacing: -0.005em !important;
text-align: center !important;
line-height: 1.35 !important;
margin: 0 0 10px !important;
}
html body.paper-mode .insight-item .insight-preview {
font-family: 'Inter', sans-serif !important;
font-size: 16px !important;
line-height: 1.65 !important;
color: #252525 !important;
margin: 0 0 8px !important;
}
html body.paper-mode .insight-item .insight-body {
font-family: 'Inter', sans-serif !important;
font-size: 16px !important;
line-height: 1.7 !important;
color: #252525 !important;
margin-top: 12px !important;
}
html body.paper-mode .insight-item .insight-body h3 {
font-family: 'Inter', sans-serif !important;
font-size: 17px !important;
font-weight: 700 !important;
color: #111111 !important;
text-transform: none !important;
letter-spacing: -0.005em !important;
margin: 20px 0 8px !important;
background: none !important;
-webkit-text-fill-color: #111111 !important;
}
html body.paper-mode .insight-item .insight-body p {
color: #252525 !important;
margin: 0 0 10px !important;
}
html body.paper-mode .insight-item .insight-body strong {
color: #111111 !important;
}
html body.paper-mode .insight-item .insight-body .download-cta {
background: linear-gradient(135deg, #3B82F6, #1d4ed8) !important;
color: #fff !important;
padding: 10px 22px !important;
border-radius: 8px !important;
font-weight: 700 !important;
text-decoration: none !important;
display: inline-block !important;
margin-top: 12px !important;
}
html body.paper-mode .insights-toggle-btn {
background: transparent !important;
border: 1px solid var(--line) !important;
color: var(--ink-2) !important;
border-radius: 999px !important;
padding: 8px 18px !important;
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
cursor: pointer;
}
html body.paper-mode .insights-toggle-btn:hover {
background: var(--bg-soft) !important;
border-color: #d8dde4 !important;
}
html body.paper-mode .insights-fade {
background: linear-gradient(180deg, rgba(255,255,255,0), #ffffff) !important;
}
body.paper-mode .article-meta-top {
display: inline-flex; align-items: center; gap: 6px;
background: #eff6ff !important;
color: #1d4ed8 !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: .8px !important;
text-transform: uppercase !important;
padding: 5px 12px !important;
border-radius: 999px !important;
margin-bottom: 18px !important;
border: 1px solid #bfdbfe !important;
}
body.paper-mode .article-meta-top::before { content: '★'; }
body.paper-mode .article-title {
font-family: 'Inter', sans-serif !important;
font-size: clamp(26px, 4vw, 38px) !important;
font-weight: 800 !important;
color: var(--ink) !important;
line-height: 1.18 !important;
letter-spacing: -0.02em !important;
margin: 0 0 16px !important;
background: none !important;
-webkit-text-fill-color: var(--ink) !important;
}
body.paper-mode .article-subtitle {
font-size: 19px !important;
line-height: 1.55 !important;
color: var(--ink-2) !important;
margin: 0 0 24px !important;
font-family: 'Inter', sans-serif !important;
font-weight: 400 !important;
padding: 0 !important;
border: 0 !important;
}
/* ---------- Article meta row (auto-injected: author + share) ---------- */
body.paper-mode #bp-meta-row {
max-width: 620px;
margin: 0 auto 28px;
display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
padding: 16px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
font-size: 13.5px; color: var(--ink-4);
}
body.paper-mode #bp-meta-row .bp-author { display: flex; align-items: center; gap: 10px; }
body.paper-mode #bp-meta-row .bp-avatar {
width: 36px; height: 36px; border-radius: 50%;
background: linear-gradient(135deg, #3B82F6, #8B5CF6);
color: #fff; font-weight: 800; font-size: 14px;
display: flex; align-items: center; justify-content: center;
letter-spacing: .5px;
}
body.paper-mode #bp-meta-row .bp-author-name { color: var(--ink-2); font-weight: 600; font-size: 14px; }
body.paper-mode #bp-meta-row .bp-author-sub { font-size: 12px; color: var(--ink-4); }
body.paper-mode #bp-meta-row .bp-share { margin-left: auto; display: flex; align-items: center; gap: 6px; }
body.paper-mode #bp-meta-row .bp-share-btn {
width: 34px; height: 34px; border-radius: 8px;
border: 1px solid var(--line); background: #fff; color: var(--ink-3);
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
transition: background .15s, color .15s, border-color .15s;
}
body.paper-mode #bp-meta-row .bp-share-btn:hover {
background: var(--bg-soft); color: var(--ink); border-color: #d8dde4;
}
body.paper-mode #bp-meta-row .bp-share-btn svg { width: 16px; height: 16px; }
@media (max-width: 600px) {
body.paper-mode #bp-meta-row .bp-share { margin-left: 0; width: 100%; padding-top: 8px; border-top: 1px dashed var(--line-2); justify-content: flex-start; }
}
/* ---------- TOC (auto-injected) ---------- */
body.paper-mode .bp-article-grid { position: relative; max-width: 620px; margin: 0 auto; }
body.paper-mode #bp-toc {
position: fixed;
top: 220px;
left: max(20px, calc(50% - 360px - 240px));
width: 200px;
padding: 18px 0;
max-height: calc(100vh - 260px);
overflow-y: auto;
border-left: 1px solid var(--line);
}
body.paper-mode #bp-toc .bp-toc-toggle { display: none; }
body.paper-mode #bp-toc .bp-toc-title {
font-size: 11px; color: var(--ink-4);
text-transform: uppercase; letter-spacing: 1px; font-weight: 700;
padding: 0 16px 10px;
}
body.paper-mode #bp-toc ul { list-style: none; padding: 0; margin: 0; }
body.paper-mode #bp-toc li { margin: 0; }
body.paper-mode #bp-toc a {
display: block;
color: var(--ink-4) !important;
font-size: 13.5px;
line-height: 1.4;
padding: 7px 16px !important;
text-decoration: none !important;
border-left: 2px solid transparent !important;
margin-left: -1px;
background: none !important;
transition: color .15s, border-color .15s;
}
body.paper-mode #bp-toc a:hover { color: var(--ink) !important; }
body.paper-mode #bp-toc a.active { color: var(--ink) !important; border-left-color: var(--ink) !important; font-weight: 600; }
@media (max-width: 1099px) {
body.paper-mode #bp-toc {
position: static; width: auto; max-width: 620px;
margin: 0 auto 24px; padding: 0;
max-height: none; overflow: visible;
border: 1px solid var(--line); border-left: 1px solid var(--line);
border-radius: 12px; background: var(--bg-soft);
}
body.paper-mode #bp-toc .bp-toc-title { display: none; }
body.paper-mode #bp-toc .bp-toc-toggle {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
width: 100%; background: transparent; border: 0;
padding: 14px 16px; font: inherit; font-size: 14px; font-weight: 600;
color: var(--ink); cursor: pointer; text-align: left;
}
body.paper-mode #bp-toc .bp-toc-toggle .bp-chev {
width: 16px; height: 16px; color: var(--ink-4);
transition: transform .2s ease;
}
body.paper-mode #bp-toc[data-open="true"] .bp-toc-toggle .bp-chev { transform: rotate(180deg); }
body.paper-mode #bp-toc ul { display: none; padding: 4px 8px 12px; border-top: 1px solid var(--line-2); }
body.paper-mode #bp-toc[data-open="true"] ul { display: block; }
body.paper-mode #bp-toc a { padding: 8px 12px !important; border-radius: 6px; border-left: 0 !important; margin-left: 0; font-size: 14px; }
}
/* ---------- Article body (long-form prose) ---------- */
body.paper-mode .article-body { max-width: 620px; margin: 0 auto; }
body.paper-mode .article-body h2 {
font-family: 'Inter', sans-serif !important;
font-size: clamp(20px, 2.4vw, 25px) !important;
font-weight: 800 !important;
color: var(--ink) !important;
line-height: 1.28 !important;
letter-spacing: -0.01em !important;
margin: 48px 0 16px !important;
padding: 4px 0 0 !important;
border: 0 !important;
scroll-margin-top: 80px;
background: none !important;
-webkit-text-fill-color: var(--ink) !important;
}
body.paper-mode .article-body h2:first-child { margin-top: 0 !important; }
body.paper-mode .article-body h3 {
font-family: 'Inter', sans-serif !important;
font-size: 17.5px !important;
font-weight: 700 !important;
color: var(--ink) !important;
margin: 28px 0 10px !important;
line-height: 1.4 !important;
background: none !important;
-webkit-text-fill-color: var(--ink) !important;
}
body.paper-mode .article-body p,
body.paper-mode .article-container p,
body.paper-mode .article-body .article-intro,
body.paper-mode .article-body .lead {
margin: 0 0 14px !important;
color: var(--ink-2) !important;
font-family: 'Inter', sans-serif !important;
font-size: 14px !important;
line-height: 1.55 !important;
letter-spacing: 0 !important;
font-weight: 400 !important;
}
body.paper-mode .article-body ul,
body.paper-mode .article-body ol,
body.paper-mode .article-container ul,
body.paper-mode .article-container ol {
padding-left: 26px !important;
margin: 0 0 20px !important;
color: var(--ink-2) !important;
font-family: 'Inter', sans-serif !important;
font-size: 17px !important;
line-height: 1.7 !important;
}
body.paper-mode .article-body li,
body.paper-mode .article-container li {
margin-bottom: 8px !important;
color: var(--ink-2) !important;
font-family: 'Inter', sans-serif !important;
font-size: 17px !important;
line-height: 1.7 !important;
}
body.paper-mode .article-body li::marker,
body.paper-mode .article-container li::marker { color: var(--ink-3); }
body.paper-mode .article-body strong,
body.paper-mode .article-container strong { color: var(--ink) !important; font-weight: 700 !important; }
body.paper-mode .article-body em { color: var(--ink-2); font-style: italic; }
body.paper-mode .article-body a {
color: var(--link) !important;
text-decoration: underline !important;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
border-bottom: 0 !important;
transition: color .15s;
}
body.paper-mode .article-body a:hover {
color: var(--link-2) !important;
text-decoration-thickness: 2px;
}
body.paper-mode .article-body img {
border-radius: 12px;
margin: 24px auto !important;
height: auto;
max-width: 100%;
box-shadow: var(--shadow-md);
}
body.paper-mode .article-body blockquote {
background: var(--bg-soft) !important;
border-left: 4px solid var(--brand) !important;
border-radius: 0 10px 10px 0 !important;
padding: 1rem 1.25rem !important;
margin: 1.75rem 0 !important;
color: var(--ink-3) !important;
font-style: italic;
line-height: 1.75;
}
/* ---------- Highlight box ---------- */
body.paper-mode .article-body .highlight-box,
body.paper-mode .highlight-box {
background: var(--bg-soft) !important;
border: 1px solid var(--line) !important;
border-left: 4px solid var(--brand) !important;
border-radius: 8px !important;
padding: 18px 22px !important;
margin: 24px 0 !important;
color: var(--ink-2) !important;
}
body.paper-mode .highlight-box h3 {
color: var(--ink) !important;
margin-top: 0 !important;
margin-bottom: 8px !important;
font-size: 16px !important;
}
body.paper-mode .highlight-box p,
body.paper-mode .highlight-box li { color: var(--ink-2) !important; }
/* ---------- Tables ---------- */
body.paper-mode .article-body table {
width: 100%;
border-collapse: collapse;
font-size: 14.5px;
margin: 24px 0;
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
}
body.paper-mode .article-body table th {
background: var(--bg-soft);
color: var(--ink);
padding: 14px 16px;
text-align: left;
font-weight: 700;
font-size: 13px;
text-transform: uppercase;
letter-spacing: .5px;
border-bottom: 1px solid var(--line);
}
body.paper-mode .article-body table td {
padding: 12px 16px;
border-bottom: 1px solid var(--line-2);
color: var(--ink-2);
vertical-align: top;
}
body.paper-mode .article-body table tr:last-child td { border-bottom: none; }
body.paper-mode .article-body table tr:hover td { background: var(--bg-tint); }
/* ---------- CTA box ---------- */
body.paper-mode .cta-box {
background: linear-gradient(135deg, #eff6ff, #ede9fe) !important;
border: 1px solid #bfdbfe !important;
border-radius: 16px !important;
padding: 32px 28px !important;
text-align: center;
margin: 44px 0 !important;
}
body.paper-mode .cta-box p {
color: #1d4ed8 !important;
font-size: 17px !important;
margin-bottom: 20px !important;
font-weight: 500 !important;
}
body.paper-mode .cta-box .download-cta,
body.paper-mode .cta-box a {
display: inline-block !important;
background: linear-gradient(135deg, #3B82F6, #1d4ed8) !important;
color: #fff !important;
font-size: 15px !important;
font-weight: 700 !important;
padding: 13px 28px !important;
border-radius: 10px !important;
text-decoration: none !important;
border: 0 !important;
box-shadow: 0 4px 14px rgba(59,130,246,.28) !important;
margin: 6px 6px !important;
white-space: nowrap;
transition: filter .15s, transform .1s, box-shadow .15s;
}
body.paper-mode .cta-box .download-cta:hover,
body.paper-mode .cta-box a:hover {
filter: brightness(1.08);
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(59,130,246,.4) !important;
}
/* ---------- FAQ section ---------- */
body.paper-mode .faq-section {
margin: 48px 0 0 !important;
padding-top: 40px !important;
border-top: 1px solid var(--line) !important;
max-width: 620px;
margin-left: auto !important;
margin-right: auto !important;
}
body.paper-mode .faq-section h2 {
font-family: 'Inter', sans-serif !important;
color: var(--ink) !important;
font-weight: 800 !important;
text-align: left !important;
margin-bottom: 16px !important;
}
body.paper-mode .faq-item {
background: #fff !important;
border: 1px solid var(--line) !important;
border-radius: 10px !important;
margin-bottom: 10px !important;
padding: 0 !important;
}
body.paper-mode .faq-item.active,
body.paper-mode .faq-item:hover {
border-color: var(--brand) !important;
box-shadow: var(--shadow-sm) !important;
}
body.paper-mode .faq-question {
color: var(--ink) !important;
font-weight: 700 !important;
font-size: 15px !important;
padding: 14px 18px !important;
cursor: pointer;
}
body.paper-mode .faq-question:hover { color: var(--link) !important; }
body.paper-mode .faq-arrow { color: var(--ink-4) !important; }
/* Padding only when the FAQ item is open. Forcing it on the
collapsed state would defeat the inline max-height:0/padding:0
accordion animation and the answer would leak below the question. */
body.paper-mode .faq-item.active .faq-answer { padding: 0 18px 14px !important; }
body.paper-mode .faq-item:not(.active) .faq-answer { padding: 0 !important; }
body.paper-mode .faq-answer p {
color: var(--ink-2) !important;
line-height: 1.7 !important;
font-size: 14.5px !important;
margin: 0 !important;
}
/* ---------- Back links / related ---------- */
body.paper-mode .back-links {
max-width: 620px;
margin: 64px auto 0 !important;
padding-top: 40px !important;
border-top: 1px solid var(--line) !important;
}
body.paper-mode .back-links a {
color: var(--link) !important;
font-weight: 600 !important;
text-decoration: none !important;
border-bottom: 0 !important;
}
body.paper-mode .back-links a:hover { text-decoration: underline !important; }
/* ---------- Article image figure ---------- */
body.paper-mode .article-image { max-width: 620px; margin: 24px auto; text-align: center; }
body.paper-mode .article-image img {
/* The HTML ![]()
attribute is ignored once the global
.article-body img rule applies max-width:100%, so we explicitly
cap phone-screenshot images at their natural display size (390px).
Wider images (e.g. full-width hero shots) should use a separate
class — this rule targets the .article-image phone-screenshot
figures only. */
max-width: 390px !important;
width: 100%;
height: auto;
border: 1px solid var(--line) !important;
border-radius: 12px;
box-shadow: var(--shadow-md) !important;
}
body.paper-mode .article-image figcaption {
color: var(--ink-4) !important;
text-align: center;
font-size: 14px;
margin-top: 10px;
font-style: italic;
}
/* ---------- Back-to-top (auto-injected) ---------- */
body.paper-mode #bp-back-to-top {
position: fixed; bottom: 24px; right: 24px;
width: 44px; height: 44px; border-radius: 50%;
background: var(--ink); color: #fff; border: none;
display: flex; align-items: center; justify-content: center;
box-shadow: var(--shadow-md); cursor: pointer;
opacity: 0; pointer-events: none;
transition: opacity .2s, transform .15s;
z-index: 50;
}
body.paper-mode #bp-back-to-top.visible { opacity: 1; pointer-events: auto; }
body.paper-mode #bp-back-to-top:hover { transform: translateY(-2px); }
body.paper-mode #bp-back-to-top svg { width: 18px; height: 18px; }
/* ---------- Footer (dark editorial) ---------- */
body.paper-mode .footer {
background: #0a0a1e !important;
border-top: none !important;
color: rgba(255,255,255,.7) !important;
padding: 28px 24px !important;
margin-top: 80px !important;
text-align: center !important;
}
body.paper-mode .footer .footer-content {
max-width: 1180px;
margin: 0 auto;
display: block !important;
text-align: center !important;
}
body.paper-mode .footer .copyright-info p {
color: rgba(255,255,255,.4) !important;
font-size: 12px !important;
line-height: 1.5 !important;
margin: 0 0 6px !important;
}
body.paper-mode .footer .copyright-info p:first-child {
color: rgba(255,255,255,.7) !important;
font-family: 'Orbitron', sans-serif !important;
font-weight: 600 !important;
font-size: 14px !important;
letter-spacing: .5px;
}
body.paper-mode .footer .footer-links {
margin: 18px 0 0 !important;
display: flex !important;
flex-wrap: wrap;
justify-content: center !important;
align-items: center;
gap: 6px 8px !important;
}
body.paper-mode .footer .footer-links a {
font-size: 12px !important;
color: #8AAEDB !important;
text-decoration: none !important;
}
body.paper-mode .footer .footer-links a:hover { text-decoration: underline !important; }
body.paper-mode .footer .footer-links span {
width: 1px !important; height: 14px !important;
background: rgba(255,255,255,.24) !important;
display: inline-block !important;
vertical-align: middle;
margin: 0 10px !important;
color: transparent !important;
}
/* ---------- Mobile tuning ---------- */
@media (max-width: 600px) {
body.paper-mode .article-title { font-size: clamp(24px, 7vw, 30px) !important; }
body.paper-mode .article-subtitle { font-size: 17px !important; }
body.paper-mode .article-body h2,
body.paper-mode .article-container h2,
body.paper-mode .section > h2 { font-size: 22px !important; margin-top: 36px !important; }
body.paper-mode .article-body h3,
body.paper-mode .article-container h3,
body.paper-mode .section > h3 { font-size: 18px !important; }
body.paper-mode .article-body p,
body.paper-mode .article-container p,
body.paper-mode .article-body ul,
body.paper-mode .article-body ol,
body.paper-mode .article-container ul,
body.paper-mode .article-container ol,
body.paper-mode .article-body li,
body.paper-mode .article-container li { font-size: 16px !important; }
}
/* ---------- Listing page (/blog/) — page header + card grids ---------- */
body.paper-mode .main-content {
max-width: 1180px;
margin: 0 auto;
padding: 24px 24px 64px;
}
body.paper-mode .page-header {
max-width: 880px;
margin: 0 auto 36px !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
text-align: center;
}
body.paper-mode .page-title {
font-family: 'Inter', sans-serif !important;
font-size: clamp(28px, 4vw, 38px) !important;
font-weight: 800 !important;
color: var(--ink) !important;
line-height: 1.18 !important;
letter-spacing: -0.02em !important;
margin: 0 0 16px !important;
background: none !important;
-webkit-text-fill-color: var(--ink) !important;
}
body.paper-mode .page-subtitle {
font-family: 'Inter', sans-serif !important;
font-size: 17.5px !important;
line-height: 1.55 !important;
color: var(--ink-2) !important;
margin: 0 auto 24px !important;
max-width: 620px;
text-align: center !important;
}
body.paper-mode .section-header {
font-family: 'Inter', sans-serif !important;
font-size: 24px !important;
font-weight: 800 !important;
color: var(--ink) !important;
line-height: 1.25 !important;
letter-spacing: -0.01em !important;
margin: 48px 0 22px !important;
background: none !important;
-webkit-text-fill-color: var(--ink) !important;
}
body.paper-mode .featured-section,
body.paper-mode .articles-section {
max-width: 1180px;
margin: 0 auto;
}
body.paper-mode .featured-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
margin-bottom: 32px;
}
body.paper-mode .articles-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
@media (max-width: 900px) {
body.paper-mode .articles-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
body.paper-mode .featured-grid,
body.paper-mode .articles-grid { grid-template-columns: 1fr; }
}
body.paper-mode .featured-card,
body.paper-mode .article-card {
background: #fff !important;
border: 1px solid var(--line) !important;
border-radius: 12px !important;
padding: 0 !important;
box-shadow: none !important;
transition: border-color .15s, box-shadow .15s, transform .15s;
}
body.paper-mode .featured-card:hover,
body.paper-mode .article-card:hover {
border-color: #d8dde4 !important;
box-shadow: var(--shadow-md) !important;
transform: translateY(-2px);
}
body.paper-mode .featured-card a,
body.paper-mode .article-card a {
display: block;
padding: 22px 22px;
color: inherit !important;
text-decoration: none !important;
border: 0 !important;
}
body.paper-mode .featured-card .card-icon {
font-size: 28px;
display: block;
margin-bottom: 10px;
}
body.paper-mode .card-tag {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: .8px !important;
text-transform: uppercase !important;
padding: 4px 10px !important;
border-radius: 999px !important;
margin-bottom: 10px !important;
}
body.paper-mode .card-tag.tag-game { background: #eff6ff !important; color: #1d4ed8 !important; border: 1px solid #bfdbfe !important; }
body.paper-mode .card-tag.tag-guide { background: #f0fdf4 !important; color: #15803d !important; border: 1px solid #bbf7d0 !important; }
body.paper-mode .card-tag.tag-strategy { background: #fef3c7 !important; color: #92400e !important; border: 1px solid #fde68a !important; }
body.paper-mode .card-tag.tag-review { background: #ede9fe !important; color: #6d28d9 !important; border: 1px solid #ddd6fe !important; }
body.paper-mode .card-tag.tag-news,
body.paper-mode .card-tag.tag-info { background: var(--bg-soft) !important; color: var(--ink-3) !important; border: 1px solid var(--line) !important; }
body.paper-mode .featured-card .card-title,
body.paper-mode .article-card .card-title {
font-family: 'Inter', sans-serif !important;
font-size: 16px !important;
font-weight: 700 !important;
color: var(--ink) !important;
line-height: 1.4 !important;
letter-spacing: -0.005em !important;
margin: 0 0 8px !important;
background: none !important;
-webkit-text-fill-color: var(--ink) !important;
}
body.paper-mode .featured-card .card-desc,
body.paper-mode .article-card .card-excerpt {
font-size: 14px !important;
line-height: 1.6 !important;
color: var(--ink-3) !important;
margin: 0 0 14px !important;
}
body.paper-mode .card-meta {
margin-top: 14px;
}
body.paper-mode .card-action,
body.paper-mode .read-more {
color: var(--link) !important;
font-size: 13px !important;
font-weight: 600 !important;
text-decoration: none !important;
border: 0 !important;
}
body.paper-mode .card-action .arrow,
body.paper-mode .read-more .arrow { margin-left: 4px; }
/* =========================================================================
Landing-page support (replaces /css/landing-paper.css)
Targets: /crash-or-cash/ /blackjack/ /video-poker/ /blog/solitaire/
========================================================================= */
body.paper-mode .hero-badges {
display: flex !important;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
margin: 16px 0 0 !important;
}
body.paper-mode .hero-badges .badge,
body.paper-mode .badge {
display: inline-flex; align-items: center;
background: #eff6ff !important;
color: #1d4ed8 !important;
border: 1px solid #bfdbfe !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: .5px !important;
text-transform: uppercase !important;
padding: 4px 10px !important;
border-radius: 999px !important;
}
body.paper-mode main {
max-width: 1180px;
margin: 0 auto !important;
padding: 24px 24px 64px !important;
background: transparent !important;
}
@media (max-width: 600px) {
body.paper-mode main { padding: 16px 16px 48px !important; }
}
body.paper-mode .section {
max-width: 880px;
margin: 0 auto 36px !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
}
body.paper-mode .section h2 {
font-family: 'Inter', sans-serif !important;
font-size: clamp(20px, 2.4vw, 25px) !important;
font-weight: 800 !important;
color: var(--ink) !important;
line-height: 1.28 !important;
letter-spacing: -0.01em !important;
margin: 0 0 16px !important;
background: none !important;
-webkit-text-fill-color: var(--ink) !important;
border: 0 !important;
text-align: left !important;
}
body.paper-mode .section h3,
body.paper-mode .section .category-title {
font-family: 'Inter', sans-serif !important;
font-size: 17.5px !important;
font-weight: 700 !important;
color: var(--ink) !important;
margin: 24px 0 10px !important;
line-height: 1.4 !important;
background: none !important;
-webkit-text-fill-color: var(--ink) !important;
border: 0 !important;
}
body.paper-mode .section p {
color: var(--ink-2) !important;
font-size: 15.5px !important;
line-height: 1.75 !important;
margin: 0 0 14px !important;
}
body.paper-mode .section ul,
body.paper-mode .section ol {
color: var(--ink-2) !important;
font-size: 15.5px !important;
line-height: 1.7 !important;
}
body.paper-mode .section a:not(.play-now-btn):not(.pill-link):not(.game-card):not(.category-card) {
color: var(--link) !important;
text-decoration: underline !important;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
border-bottom: 0 !important;
}
body.paper-mode .section a:not(.play-now-btn):not(.pill-link):not(.game-card):not(.category-card):hover {
color: var(--link-2) !important;
text-decoration-thickness: 2px;
}
body.paper-mode .games-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 14px !important;
margin: 16px 0 28px !important;
}
@media (max-width: 900px) { body.paper-mode .games-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 600px) { body.paper-mode .games-grid { grid-template-columns: 1fr !important; } }
body.paper-mode .game-card {
background: #fff !important;
border: 1px solid var(--line) !important;
border-radius: 12px !important;
padding: 18px !important;
color: inherit !important;
text-decoration: none !important;
display: flex !important;
flex-direction: column !important;
transition: border-color .15s, box-shadow .15s, transform .15s;
box-shadow: none !important;
}
body.paper-mode .game-card:hover {
border-color: #d8dde4 !important;
box-shadow: var(--shadow-md) !important;
transform: translateY(-2px);
text-decoration: none !important;
}
body.paper-mode .game-card-emoji {
font-size: 28px !important;
line-height: 1 !important;
margin: 0 0 8px !important;
color: var(--brand) !important;
background: none !important;
}
body.paper-mode .game-card-title {
font-family: 'Inter', sans-serif !important;
font-size: 15px !important;
font-weight: 700 !important;
color: var(--ink) !important;
margin: 0 0 6px !important;
background: none !important;
-webkit-text-fill-color: var(--ink) !important;
}
body.paper-mode .game-card-desc {
font-size: 13.5px !important;
color: var(--ink-3) !important;
line-height: 1.55 !important;
margin: 0 0 10px !important;
}
body.paper-mode .game-card-tag {
align-self: flex-start;
margin-top: auto;
background: var(--bg-soft) !important;
color: var(--ink-3) !important;
border: 1px solid var(--line) !important;
font-size: 10.5px !important;
font-weight: 700 !important;
letter-spacing: .5px !important;
text-transform: uppercase !important;
padding: 3px 9px !important;
border-radius: 6px !important;
}
body.paper-mode .game-card-tag.tag-crash,
body.paper-mode .game-card-tag.tag-payout { background: #fee2e2 !important; color: #b91c1c !important; border-color: #fecaca !important; }
body.paper-mode .game-card-tag.tag-strategy,
body.paper-mode .game-card-tag.tag-challenge { background: #fef3c7 !important; color: #92400e !important; border-color: #fde68a !important; }
body.paper-mode .game-card-tag.tag-slot { background: #ede9fe !important; color: #6d28d9 !important; border-color: #ddd6fe !important; }
body.paper-mode .game-card-tag.tag-table,
body.paper-mode .game-card-tag.tag-card,
body.paper-mode .game-card-tag.tag-number { background: #eff6ff !important; color: #1d4ed8 !important; border-color: #bfdbfe !important; }
body.paper-mode .game-card-tag.tag-classic,
body.paper-mode .game-card-tag.tag-variant,
body.paper-mode .game-card-tag.tag-pairing,
body.paper-mode .game-card-tag.tag-special { background: #f0fdf4 !important; color: #15803d !important; border-color: #bbf7d0 !important; }
body.paper-mode .category-grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 16px !important;
margin: 16px 0 28px !important;
}
@media (max-width: 600px) { body.paper-mode .category-grid { grid-template-columns: 1fr !important; } }
body.paper-mode .category-card {
background: #fff !important;
border: 1px solid var(--line) !important;
border-radius: 12px !important;
padding: 20px 22px !important;
color: inherit !important;
text-decoration: none !important;
display: block !important;
transition: border-color .15s, box-shadow .15s, transform .15s;
box-shadow: none !important;
}
body.paper-mode .category-card:hover {
border-color: #d8dde4 !important;
box-shadow: var(--shadow-md) !important;
transform: translateY(-2px);
text-decoration: none !important;
}
body.paper-mode .category-card-icon {
font-size: 28px !important;
margin-bottom: 10px !important;
display: block !important;
}
body.paper-mode .category-card-title {
font-family: 'Inter', sans-serif !important;
font-size: 16px !important;
font-weight: 700 !important;
color: var(--ink) !important;
margin: 0 0 6px !important;
background: none !important;
-webkit-text-fill-color: var(--ink) !important;
}
body.paper-mode .category-card-desc {
font-size: 14px !important;
color: var(--ink-3) !important;
line-height: 1.6 !important;
margin: 0 0 10px !important;
}
body.paper-mode .category-card-count,
body.paper-mode .category-card-games {
font-size: 12.5px !important;
color: var(--ink-4) !important;
font-weight: 600 !important;
}
body.paper-mode .features-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 14px !important;
margin: 16px 0 28px !important;
}
@media (max-width: 900px) { body.paper-mode .features-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 600px) { body.paper-mode .features-grid { grid-template-columns: 1fr !important; } }
body.paper-mode .feature-card {
background: #fff !important;
border: 1px solid var(--line) !important;
border-radius: 12px !important;
padding: 18px !important;
box-shadow: none !important;
}
body.paper-mode .feature-card h3 {
font-family: 'Inter', sans-serif !important;
font-size: 15px !important;
font-weight: 700 !important;
color: var(--ink) !important;
margin: 0 0 6px !important;
background: none !important;
-webkit-text-fill-color: var(--ink) !important;
}
body.paper-mode .feature-card p {
font-size: 13.5px !important;
color: var(--ink-3) !important;
line-height: 1.55 !important;
margin: 0 !important;
}
body.paper-mode .feature-card-icon {
font-size: 24px !important;
margin-bottom: 8px !important;
display: block;
}
body.paper-mode .cta-box {
max-width: 880px;
margin: 36px auto !important;
background: linear-gradient(135deg, #eff6ff, #ede9fe) !important;
border: 1px solid #bfdbfe !important;
border-radius: 16px !important;
padding: 32px 28px !important;
text-align: center !important;
}
body.paper-mode .cta-box h2 {
color: var(--ink) !important;
margin: 0 0 8px !important;
background: none !important;
-webkit-text-fill-color: var(--ink) !important;
text-align: center !important;
}
body.paper-mode .cta-box p {
color: #1d4ed8 !important;
font-size: 16px !important;
margin: 0 0 18px !important;
}
body.paper-mode .play-now-btn,
body.paper-mode .cta-back,
body.paper-mode .hero-cta {
display: inline-block !important;
background: linear-gradient(135deg, #3B82F6, #1d4ed8) !important;
color: #fff !important;
font-size: 15px !important;
font-weight: 700 !important;
padding: 13px 28px !important;
border-radius: 10px !important;
text-decoration: none !important;
border: 0 !important;
box-shadow: 0 4px 14px rgba(59,130,246,.28) !important;
margin: 6px 6px !important;
white-space: nowrap;
transition: filter .15s, transform .1s, box-shadow .15s;
}
body.paper-mode .play-now-btn:hover,
body.paper-mode .cta-back:hover,
body.paper-mode .hero-cta:hover {
filter: brightness(1.08);
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(59,130,246,.4) !important;
}
body.paper-mode .internal-links {
display: flex !important;
flex-wrap: wrap;
gap: 8px !important;
margin: 16px 0 !important;
}
body.paper-mode .pill-link {
display: inline-flex !important;
background: var(--bg-soft) !important;
color: var(--ink-2) !important;
border: 1px solid var(--line) !important;
border-radius: 999px !important;
padding: 6px 14px !important;
font-size: 13px !important;
font-weight: 500 !important;
text-decoration: none !important;
}
body.paper-mode .pill-link:hover {
background: #eff6ff !important;
border-color: #bfdbfe !important;
color: #1d4ed8 !important;
text-decoration: none !important;
}
body.paper-mode .last-updated {
color: var(--ink-4) !important;
font-size: 13px !important;
text-align: center !important;
font-style: italic !important;
margin: 32px 0 !important;
}
body.paper-mode .inline-link {
color: var(--link) !important;
text-decoration: underline !important;
border: 0 !important;
}
body.paper-mode .faq-q {
color: var(--ink) !important;
font-weight: 700 !important;
font-size: 15px !important;
margin: 0 0 8px !important;
padding: 0 !important;
}
body.paper-mode .faq-a {
color: var(--ink-2) !important;
font-size: 14.5px !important;
line-height: 1.7 !important;
}
/* Landing-page .faq-item (non-collapsible variant) */
body.paper-mode .section .faq-item {
background: #fff !important;
border: 1px solid var(--line) !important;
border-radius: 10px !important;
padding: 14px 18px !important;
margin: 0 0 10px !important;
}
body.paper-mode .section .faq-item p {
margin: 0 !important;
font-size: 14.5px !important;
color: var(--ink-2) !important;
line-height: 1.7 !important;
}
/* ---------- Auto-inject runtime helper ---------- */
/* The JS that powers progress-bar / TOC / share / back-to-top lives in
/blog/blog-paper.js (auto-loaded via