/* * print.css — Print-Friendly Styles for CurvedTrading * ==================================================== * * HOW TO USE: * Add this single line inside the of BaseLayout.astro: * * * * The "media=print" attribute means this CSS is IGNORED by screens. * It only activates when a user presses Ctrl+P (or Cmd+P on Mac). * * WHAT IT DOES: * - Hides the header, footer, nav, sidebar, social links, toggles * - Forces a white background with black text * - Sets body text to a comfortable 12pt serif font * - Adds the article URL to the bottom so the reader knows the source * - Prevents page breaks inside key takeaways boxes * - Converts the image placeholders into simple text descriptions * - Shows full URLs for all links (so printed links are useful) * * NOTE: Place this file at public/styles/print.css in your project. */ /* ═══════════════════════════════════════════════════════ 1. RESET — Force clean white background, black text ═══════════════════════════════════════════════════════ */ * { color: #000 !important; background: #fff !important; box-shadow: none !important; text-shadow: none !important; } html, body { font-family: "Georgia", "Times New Roman", serif !important; font-size: 12pt !important; line-height: 1.6 !important; margin: 0 !important; padding: 0 !important; } /* ═══════════════════════════════════════════════════════ 2. HIDE — Remove everything that doesn't belong on paper ═══════════════════════════════════════════════════════ */ header, footer, nav, .analogy-toggle, .author-box__socials, .article-meta__badge, #mobile-menu, #mobile-menu-btn, .ct-placeholder__grid, button, [role="complementary"] { display: none !important; } /* ═══════════════════════════════════════════════════════ 3. LAYOUT — Full width, no sticky/fixed positioning ═══════════════════════════════════════════════════════ */ main { max-width: 100% !important; padding: 0 !important; margin: 0 !important; } article, .prose { max-width: 100% !important; padding: 0 1cm !important; } /* ═══════════════════════════════════════════════════════ 4. TYPOGRAPHY — Optimized for paper readability ═══════════════════════════════════════════════════════ */ h1 { font-size: 20pt !important; margin-bottom: 0.25cm !important; border-bottom: 1pt solid #000; padding-bottom: 0.2cm !important; } h2 { font-size: 15pt !important; margin-top: 0.6cm !important; margin-bottom: 0.2cm !important; } h3 { font-size: 13pt !important; } p { orphans: 3; /* Minimum lines at bottom of page */ widows: 3; /* Minimum lines at top of page */ margin-bottom: 0.3cm !important; } blockquote { border-left: 2pt solid #333 !important; padding-left: 0.4cm !important; margin-left: 0 !important; font-style: italic !important; } code, pre { font-family: "Courier New", monospace !important; font-size: 10pt !important; border: 0.5pt solid #ccc !important; padding: 0.2cm !important; } /* ═══════════════════════════════════════════════════════ 5. LINKS — Show the URL in parentheses after each link ═══════════════════════════════════════════════════════ */ a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555 !important; word-break: break-all; } /* Don't show URLs for glossary auto-links (they're internal) */ a.glossary-link::after { content: none; } /* Don't show URLs for anchor links */ a[href^="#"]::after { content: none; } /* ═══════════════════════════════════════════════════════ 6. KEY TAKEAWAYS BOX — Keep together, print-friendly ═══════════════════════════════════════════════════════ */ .ct-takeaways { break-inside: avoid !important; page-break-inside: avoid !important; border: 1.5pt solid #333 !important; border-radius: 0 !important; margin: 0.5cm 0 !important; } .ct-takeaways__header { background: #eee !important; border-bottom: 0.5pt solid #333 !important; } .ct-takeaways__check { color: #333 !important; } /* ═══════════════════════════════════════════════════════ 7. AUTHOR BOX — Simplified for print ═══════════════════════════════════════════════════════ */ .author-box { break-inside: avoid !important; page-break-inside: avoid !important; border: 0.5pt solid #ccc !important; border-radius: 0 !important; } .author-box__avatar--initials { border: 1pt solid #333 !important; color: #333 !important; } .author-box__badge, .author-box__verified-text { display: none !important; } /* ═══════════════════════════════════════════════════════ 8. IMAGE PLACEHOLDERS — Convert to text for print ═══════════════════════════════════════════════════════ */ .ct-placeholder__box { border: 1pt dashed #999 !important; aspect-ratio: auto !important; min-height: 2cm !important; height: auto !important; } .ct-placeholder__icon { display: none !important; } .ct-placeholder__label { color: #666 !important; } .ct-placeholder__desc { color: #333 !important; font-style: italic !important; } /* ═══════════════════════════════════════════════════════ 9. DISCLAIMER — Compact for print ═══════════════════════════════════════════════════════ */ .disclaimer--compact { border: 0.5pt solid #ccc !important; border-radius: 0 !important; font-size: 9pt !important; break-inside: avoid !important; } .disclaimer--full { display: none !important; /* Full footer disclaimer hidden — compact is enough */ } /* ═══════════════════════════════════════════════════════ 10. PAGE BREAKS — Prevent awkward splits ═══════════════════════════════════════════════════════ */ h1, h2, h3 { break-after: avoid !important; page-break-after: avoid !important; } img, figure, svg { break-inside: avoid !important; page-break-inside: avoid !important; } [data-analogy] { border: none !important; padding: 0 !important; margin-left: 0 !important; opacity: 1 !important; } /* ═══════════════════════════════════════════════════════ 11. SOURCE ATTRIBUTION — Print the URL at the bottom ═══════════════════════════════════════════════════════ */ body::after { content: "Printed from CurvedTrading.com — For educational purposes only. Not financial advice."; display: block; margin-top: 1cm; padding-top: 0.3cm; border-top: 0.5pt solid #999; font-size: 9pt; color: #999 !important; text-align: center; } /* ═══════════════════════════════════════════════════════ 12. PAGE MARGINS ═══════════════════════════════════════════════════════ */ @page { margin: 2cm 1.5cm; size: A4; } @page :first { margin-top: 1.5cm; }