/* ========================================================================== RAININGMONEY — "THE MONEY PRINT" design system Tailwind CDN handles utility classes (config lives inline in each page's since Tailwind's JIT engine requires it at runtime). This file holds everything Tailwind's utilities don't cover: base typography, custom animations, and hand-built component classes. ========================================================================== */ body { font-family: 'Space Grotesk', sans-serif; background-color: #F4F1EA; color: #111111; } .font-serif-title { font-family: 'Playfair Display', serif; } .font-mono-data { font-family: 'Space Mono', monospace; } .border-ink-thick { border-color: #111111; border-width: 3px; } .border-ink-thin { border-color: #111111; border-width: 1px; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #F4F1EA; } ::-webkit-scrollbar-thumb { background: #111111; } @keyframes marquee { 0% { transform: translateX(0%); } 100% { transform: translateX(-50%); } } .animate-marquee { display: flex; width: 200%; animation: marquee 25s linear infinite; } .animate-marquee:hover { animation-play-state: paused; } /* Nav Dropdown Styling */ .nav-dropdown-wrapper:hover .nav-dropdown-menu { display: block; } /* $100 MILLION QUESTION WIDGET */ .challenge-card { transition: transform 0.25s ease, box-shadow 0.25s ease; } .challenge-card:hover { transform: translateY(-3px); box-shadow: 6px 6px 0px 0px #D92323; } .challenge-card:hover .challenge-cta-arrow { transform: translateX(3px); } @keyframes challengePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.65; } } .challenge-card:hover .challenge-pulse { animation: challengePulse 1.2s ease-in-out infinite; } /* Cookie consent banner — shared across every page site-wide */ .cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 500; background: #111111; color: #F4F1EA; padding: 1.1rem 1.5rem; display: none; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; border-top: 3px solid #B8860B; font-family: 'Space Grotesk', sans-serif; } .cookie-banner.visible { display: flex; } .cookie-banner-text { font-size: 0.85rem; line-height: 1.5; max-width: 640px; color: #d1d5db; } .cookie-banner-text a { color: #B8860B; text-decoration: underline; } .cookie-banner-actions { display: flex; gap: 0.6rem; flex-shrink: 0; } .cookie-btn { font-family: 'Space Mono', monospace; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.6rem 1.1rem; cursor: pointer; border: 1px solid transparent; } .cookie-btn-accept { background: #B8860B; color: #111111; } .cookie-btn-decline { background: transparent; color: #d1d5db; border-color: #444; } .cookie-btn:hover { opacity: 0.85; } @media (max-width: 600px) { .cookie-banner { flex-direction: column; align-items: flex-start; padding: 1rem; } .cookie-banner-actions { width: 100%; } .cookie-btn { flex: 1; } } /* ========================================================================== AD SLOTS — reserved layout space, invisible until real ad code fills it. Space is RESERVED (not collapsed) so inserting AdSense/Ezoic later causes zero Cumulative Layout Shift. Deliberately no border, background, or "advertisement" placeholder graphic while empty. Policy note: never place these inside the Challenge widget or the Money / Follow-the-Money overlays — accidental-click risk. ========================================================================== */ .ad-slot { display: flex; align-items: center; justify-content: center; margin: 1.75rem auto; overflow: hidden; } .ad-slot > div { width: 100%; height: 100%; } /* Leaderboard: 728x90 desktop, 320x50 mobile */ .ad-slot--leaderboard { min-height: 50px; max-width: 320px; } @media (min-width: 768px) { .ad-slot--leaderboard { min-height: 90px; max-width: 728px; } } /* In-content / in-feed rectangle: 300x250 */ .ad-slot--rectangle { min-height: 250px; max-width: 300px; } @media (min-width: 768px) { .ad-slot--rectangle { min-height: 280px; max-width: 336px; } } /* Sidebar skyscraper: desktop only — hidden on mobile so it never forces a 300x600 unit into a single-column layout. */ .ad-slot--sidebar { display: none; } @media (min-width: 1024px) { .ad-slot--sidebar { display: flex; min-height: 600px; max-width: 300px; } } /* In-feed unit sits inside the article grid and spans one cell */ .ad-slot--infeed { min-height: 250px; width: 100%; } @media print { .ad-slot { display: none !important; } } /* ========================================================================== LIGHT / DARK MODE Tailwind utilities in the markup reference the palette via CSS variables, so flipping data-theme re-themes every card, border and section at once — rather than only recolouring , which left everything else unchanged. ========================================================================== */ :root { --c-ink: #111111; --c-paper: #F4F1EA; --c-paper-card: #FFFFFF; --c-crimson: #D92323; --c-gold: #B8860B; --c-rule: rgba(17, 17, 17, 0.2); --c-muted: rgba(17, 17, 17, 0.65); } [data-theme="dark"] { --c-ink: #ECEAE3; /* text/borders invert to light */ --c-paper: #101113; /* page background */ --c-paper-card: #191B1E; /* raised surfaces */ --c-crimson: #FF4A42; /* lifted for contrast on dark */ --c-gold: #D9A93C; --c-rule: rgba(236, 234, 227, 0.22); --c-muted: rgba(236, 234, 227, 0.68); } /* Map the Tailwind colour utilities used throughout the markup onto the variables above, so no HTML has to change to support theming. */ .bg-paper { background-color: var(--c-paper) !important; } .bg-paperCard { background-color: var(--c-paper-card) !important; } .bg-ink { background-color: var(--c-ink) !important; } .text-ink { color: var(--c-ink) !important; } .text-paper { color: var(--c-paper) !important; } .border-ink { border-color: var(--c-ink) !important; } .text-crimson { color: var(--c-crimson) !important; } .bg-crimson { background-color: var(--c-crimson) !important; } .text-goldAccent{ color: var(--c-gold) !important; } .bg-goldAccent { background-color: var(--c-gold) !important; } body { background-color: var(--c-paper); color: var(--c-ink); transition: background-color .18s ease, color .18s ease; } /* Text on a dark ink block must stay legible in BOTH modes: in dark mode the ink block becomes light, so its text has to flip to the page colour. */ [data-theme="dark"] .bg-ink { color: var(--c-paper) !important; } [data-theme="dark"] .bg-ink .text-white { color: var(--c-paper) !important; } /* The hard offset shadows are pure black by default — too heavy on a dark background, so soften them. */ [data-theme="dark"] [class*="shadow-[4px_4px_0px_0px_#111111]"], [data-theme="dark"] [class*="shadow-[6px_6px_0px_0px_#111111]"], [data-theme="dark"] [class*="shadow-[3px_3px_0px_0px_#111111]"], [data-theme="dark"] [class*="shadow-[10px_10px_0px_0px_#111111]"] { box-shadow: 4px 4px 0 0 rgba(236, 234, 227, 0.18) !important; } [data-theme="dark"] img { filter: brightness(0.92) contrast(1.02); } .theme-toggle-btn { display: inline-flex; align-items: center; gap: 6px; } .theme-toggle-btn .icon-dark { display: none; } [data-theme="dark"] .theme-toggle-btn .icon-light { display: none; } [data-theme="dark"] .theme-toggle-btn .icon-dark { display: inline-flex; } /* Article body colours follow the theme too */ [data-theme="dark"] #reader-content, [data-theme="dark"] .reader-content-page { color: var(--c-ink); } [data-theme="dark"] #reader-content p::first-letter, [data-theme="dark"] .reader-content-page p:first-of-type::first-letter { color: var(--c-crimson); } [data-theme="dark"] .reader-content-page blockquote { color: var(--c-muted); } /* Utilities that are literal colours in the markup and would otherwise stay light in dark mode. Scoped to [data-theme="dark"] so light mode is untouched. */ [data-theme="dark"] .bg-white { background-color: var(--c-paper-card) !important; } [data-theme="dark"] .text-white { color: var(--c-paper) !important; } [data-theme="dark"] .bg-crimson .text-white, [data-theme="dark"] .bg-crimson { color: #fff !important; } [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background-color: var(--c-paper-card); color: var(--c-ink); border-color: var(--c-rule); } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--c-muted); } /* Borders written as opacity variants of ink */ [data-theme="dark"] [class*="border-ink/"] { border-color: var(--c-rule) !important; } [data-theme="dark"] [class*="text-ink/"] { color: var(--c-muted) !important; } /* -------------------------------------------------------------------------- DARK MODE CONTRAST FIXES In dark mode the ink surfaces become LIGHT, so any text written as an opacity variant of the paper colour (text-paper/65 etc.) ends up light-on-light and disappears. The rules below re-anchor text sitting on ink surfaces to the page colour, preserving the intended hierarchy by mapping each opacity step to an equivalent alpha of --c-paper. -------------------------------------------------------------------------- */ [data-theme="dark"] .bg-ink .text-paper, [data-theme="dark"] footer .text-paper, [data-theme="dark"] .bg-ink .text-white, [data-theme="dark"] footer .text-white { color: var(--c-paper) !important; } [data-theme="dark"] .bg-ink [class*="text-paper/"], [data-theme="dark"] footer [class*="text-paper/"] { color: var(--c-paper) !important; } [data-theme="dark"] .bg-ink .text-paper\/95, [data-theme="dark"] footer .text-paper\/95 { color: rgba(16, 17, 19, 0.95) !important; } [data-theme="dark"] .bg-ink .text-paper\/85, [data-theme="dark"] footer .text-paper\/85 { color: rgba(16, 17, 19, 0.85) !important; } [data-theme="dark"] .bg-ink .text-paper\/70, [data-theme="dark"] footer .text-paper\/70 { color: rgba(16, 17, 19, 0.72) !important; } [data-theme="dark"] .bg-ink .text-paper\/65, [data-theme="dark"] footer .text-paper\/65 { color: rgba(16, 17, 19, 0.70) !important; } [data-theme="dark"] .bg-ink .text-paper\/60, [data-theme="dark"] footer .text-paper\/60 { color: rgba(16, 17, 19, 0.68) !important; } /* Borders drawn as paper opacity need the same treatment */ [data-theme="dark"] .bg-ink [class*="border-paper/"], [data-theme="dark"] footer [class*="border-paper/"] { border-color: rgba(16, 17, 19, 0.25) !important; } /* Translucent panels inside ink blocks (bg-paper/10 chips) */ [data-theme="dark"] .bg-ink [class*="bg-paper/"] { background-color: rgba(16, 17, 19, 0.08) !important; } /* Crimson and gold badges keep white/dark text respectively — they are solid colours in both modes, so they must not inherit the flips above. */ [data-theme="dark"] .bg-crimson, [data-theme="dark"] .bg-crimson * { color: #ffffff !important; } [data-theme="dark"] .bg-goldAccent, [data-theme="dark"] .bg-goldAccent * { color: #111111 !important; } /* The gold accent text on ink surfaces stays gold but needs a darker tone to read against the light surface. */ [data-theme="dark"] .bg-ink .text-goldAccent, [data-theme="dark"] footer .text-goldAccent { color: #8a6508 !important; } /* The teletype LIVE WIRE bar and dark modules keep white text on crimson */ [data-theme="dark"] .animate-marquee { color: var(--c-paper) !important; } [data-theme="dark"] .animate-marquee a { color: var(--c-paper) !important; } [data-theme="dark"] .animate-marquee a:hover { color: #8a6508 !important; } /* Decorative grid overlays are drawn with a hardcoded light colour, which turns into bright lines on a dark surface. Dim them instead. */ [data-theme="dark"] [style*="linear-gradient(#F4F1EA"] { opacity: 0.15; } /* SSR pages (blog, category, money, follow-the-money) share these classes, so the ink-surface fixes above apply there too. These cover the couple of inline styles those templates use. */ [data-theme="dark"] [style*="box-shadow:6px 6px 0 0 #111"], [data-theme="dark"] [style*="box-shadow:4px 4px 0 0 #111"] { box-shadow: 4px 4px 0 0 rgba(236, 234, 227, 0.18) !important; }