/* ========================================================================== articles.css — Shared styles for all article/guide pages on Pool Checker ========================================================================== Each page sets its accent via CSS custom properties on :root or : --accent: Primary accent color (e.g. #3b82f6 blue, #06b6d4 cyan) --accent-dark: Darker variant for TOC active state (e.g. #2563eb) --accent-tint: Light background tint, rgba (e.g. rgba(239, 246, 255, 0.7)) --accent-bg: Blockquote/callout background (e.g. #f0f9ff) Defaults to blue if not overridden. ========================================================================== */ :root { --accent: #3b82f6; --accent-dark: #2563eb; --accent-tint: rgba(239, 246, 255, 0.7); --accent-bg: #f0f9ff; } /* Hero background for article pages */ .page-hero-bg { background-color: #0f172a; background-image: linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.95)), url('/assets/images/pool-water-background-1.webp'); background-size: cover; background-position: center; background-attachment: fixed; } /* Base overrides (supplement Tailwind, don't replace it) */ body { font-family: 'Inter', sans-serif; background-color: #f8fafc; overflow-x: hidden; } html { scroll-behavior: smooth; scroll-padding-top: 100px; } /* Floating background blobs */ @keyframes blob { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(40px, -60px) scale(1.1); } 66% { transform: translate(-30px, 30px) scale(0.9); } } .animate-blob { animation: blob 20s infinite alternate; } /* Glassmorphism article card */ .glass-article { background: #ffffff; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(226, 232, 240, 0.8); } /* ---- Prose Typography ---- */ .prose h2 { font-weight: 900; color: #0f172a; margin-top: 3rem; margin-bottom: 1.25rem; letter-spacing: -0.02em; border-bottom: 2px solid #e2e8f0; padding-bottom: 0.5rem; font-size: 1.75rem; line-height: 1.2; } .prose h3 { font-weight: 800; color: #1e293b; margin-top: 2.25rem; margin-bottom: 1rem; font-size: 1.35rem; line-height: 1.3; } .prose h4 { font-weight: 700; color: #334155; margin-top: 1.5rem; margin-bottom: 0.75rem; font-size: 1.15rem; } .prose p { font-size: 1.05rem; line-height: 1.7; color: #475569; margin-bottom: 1.25rem; } .prose ul { list-style-type: none; padding: 0; margin-bottom: 1.5rem; } .prose ul li { position: relative; padding-left: 1.75rem; margin-bottom: 0.75rem; font-size: 1.05rem; color: #475569; line-height: 1.6; } .prose ul li::before { content: "\f058"; font-family: "Font Awesome 7 Free"; font-weight: 900; position: absolute; left: 0; top: 0.15rem; color: var(--accent); font-size: 1rem; } .prose ol { list-style-type: decimal; padding-left: 1.5rem; margin-bottom: 1.5rem; } .prose ol li { margin-bottom: 0.75rem; font-size: 1.05rem; color: #475569; line-height: 1.6; } .prose strong { color: #0f172a; font-weight: 700; } .prose blockquote { border-left: 5px solid var(--accent); font-style: italic; color: #475569; background: var(--accent-bg); padding: 1.5rem; border-radius: 0 0.5rem 0.5rem 0; margin: 1.5rem 0; font-size: 1.05rem; font-weight: 500; } /* Responsive prose */ @media (min-width: 768px) { .prose h2 { font-size: 2.5rem; margin-top: 4rem; margin-bottom: 1.5rem; } .prose h3 { font-size: 1.75rem; margin-top: 3rem; margin-bottom: 1.25rem; } .prose h4 { font-size: 1.35rem; margin-top: 2rem; margin-bottom: 1rem; } .prose p { font-size: 1.15rem; line-height: 1.8; margin-bottom: 1.5rem; } .prose ul li { font-size: 1.15rem; line-height: 1.7; margin-bottom: 1rem; padding-left: 2rem; } .prose ul li::before { top: 0.25rem; font-size: 1.1rem; } .prose blockquote { font-size: 1.2rem; margin: 2.5rem 0; padding: 2rem; } } /* ---- TOC Active States ---- */ .toc-link.active { color: var(--accent-dark); font-weight: 800; border-left-color: var(--accent-dark); background-color: var(--accent-tint); } .mobile-toc-link.active { color: var(--accent-dark); font-weight: 800; background-color: var(--accent-tint); border-radius: 0.5rem; } /* ---- Dark CTA Section ---- */ .dark-cta h3, .dark-cta h4, .dark-cta p, .dark-cta span, .dark-cta strong { color: white !important; } .dark-cta p.sub-text { color: #cbd5e1 !important; } .dark-cta p.blue-sub-text { color: #dbeafe !important; } /* ---- YouTube 16:9 Embed ---- */ .video-container { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden; } .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } /* ---- YouTube Short Embed ---- */ .short-video-container { position: relative; max-width: 320px; margin: 2rem auto; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; box-shadow: 0 15px 30px rgba(0,0,0,0.15); background: #000; } .short-video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }