/* public/css/blog.css */ /* Apply a base background for blog pages */ body.blog-page { /* Add class 'blog-page' to tag in blog HTML */ background-color: #f0f2f5; } /* Wrapper for the main blog content area */ .blog-content-wrapper { max-width: 800px; /* Adjust max-width as needed */ margin: 0 auto; padding: 30px 35px; /* Inner padding */ background-color: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); border-radius: 8px; line-height: 1.7; /* Improve readability */ font-family: var(--font-family, 'Nunito', sans-serif); /* Ensure consistent font */ color: #444; /* Default text color */ } /* Main Blog Post Title */ .blog-content-wrapper h1 { font-size: 2.1rem; /* Slightly larger title */ color: var(--primary-color, #007bff); margin-top: 0; /* Remove default top margin */ margin-bottom: 20px; border-bottom: 2px solid var(--border-color, #eee); padding-bottom: 15px; line-height: 1.3; } /* Section Headings */ .blog-content-wrapper h2 { font-size: 1.6rem; /* Clear heading size */ color: var(--text-color, #333); margin-top: 35px; /* More space above H2 */ margin-bottom: 15px; border-bottom: 1px solid #f0f0f0; /* Subtle separator */ padding-bottom: 8px; } /* Paragraph Styling */ .blog-content-wrapper p { margin-bottom: 18px; /* Consistent paragraph spacing */ } /* List Styling (Ordered and Unordered) */ .blog-content-wrapper ol, .blog-content-wrapper ul { padding-left: 25px; /* Indentation for lists */ margin-bottom: 18px; } .blog-content-wrapper li { margin-bottom: 12px; /* Space between list items */ } /* Strong/Bold text */ .blog-content-wrapper strong { font-weight: 600; color: #111; /* Slightly darker for emphasis */ } /* Specific styling for Tip Titles */ .blog-content-wrapper .tip-title { color: var(--primary-color-hover, #0056b3); /* Make tip titles stand out */ display: block; /* Put title on its own line */ margin-bottom: 5px; } /* Call-to-Action Link Styling */ .blog-content-wrapper .cta-link { display: block; margin-top: 25px; /* More space above CTA */ margin-bottom: 10px; /* Space below CTA */ padding: 12px 20px; /* Comfortable padding */ background-color: var(--primary-color, #007bff); color: #fff !important; /* Ensure white text */ text-decoration: none; border-radius: 5px; font-weight: 600; font-size: 22px; text-align: center; transition: background-color 0.2s ease, transform 0.1s ease; } .blog-content-wrapper .cta-link:hover { background-color: var(--primary-color-hover, #0056b3); color: #fff; transform: translateY(-1px); /* Subtle lift effect */ } /* Styling for inline language terms */ .malayalam-term, .tamil-term, .hindi-term, .marathi-term, .odia-term, .gujarati-term, .kannada-term, .telugu-term, .bengali-term, .nepali-term, .urdu-term { font-weight: bold; /* color: #0056b3; */ /* Optional distinct color - uncomment if desired */ padding: 0 2px; /* Tiny bit of padding */ /* background-color: #f0f8ff; */ /* Optional subtle background */ /* border-radius: 3px; */ } /* Apply specific Noto Sans fonts */ .malayalam-term { font-family: 'Noto Sans Malayalam', sans-serif; } .tamil-term { font-family: 'Noto Sans Tamil', sans-serif; } .hindi-term { font-family: 'Noto Sans Devanagari', sans-serif; } .marathi-term { font-family: 'Noto Sans Devanagari', sans-serif; } /* Shares Devanagari */ .odia-term { font-family: 'Noto Sans Oriya', sans-serif; } .gujarati-term { font-family: 'Noto Sans Gujarati', sans-serif; } .kannada-term { font-family: 'Noto Sans Kannada', sans-serif; } .telugu-term { font-family: 'Noto Sans Telugu', sans-serif; } .bengali-term { font-family: 'Noto Sans Bengali', sans-serif; } .nepali-term { font-family: 'Noto Sans Devanagari', sans-serif; } /* Shares Devanagari */ .urdu-term { font-family: 'Noto Nastaliq Urdu', serif; /* Specific font for Urdu */ /* Urdu might need specific directionality if not handled by browser */ /* direction: rtl; */ /* unicode-bidi: embed; */ } /* --- Header Base Styles --- */ #main-header { background-color: #ffffff; /* Default background */ padding: 12px 0; box-shadow: 0 2px 5px var(--shadow-color, rgba(0, 0, 0, 0.1)); border-bottom: 1px solid var(--border-color, #dee2e6); top: 0; flex-shrink: 0; /* If used within a flex container */ z-index: 1050; /* Ensure header stays on top */ position: relative; /* Or sticky if needed */ } #main-header .container { max-width: 1200px; margin: 0 auto; padding: 0 15px; display: flex; justify-content: space-between; align-items: center; height: 100%; /* Needed for vertical alignment on mobile */ } /* --- Logo Styles --- */ #main-header .logo { font-size: 1.6rem; font-weight: 700; color: var(--text-color, #212529); /* Default text color */ text-decoration: none; flex-shrink: 0; /* Prevent shrinking */ } #main-header .logo:hover { text-decoration: none; } /* --- Desktop Navigation Styles --- */ #main-header .desktop-nav ul { list-style: none; display: flex; align-items: center; margin: 0; padding: 0; } #main-header .desktop-nav ul li { margin-left: 25px; } #main-header .desktop-nav ul li a { color: var(--text-color-muted, #6c757d); font-weight: 600; font-size: 0.95rem; text-decoration: none; transition: color 0.2s ease; } #main-header .desktop-nav ul li a:hover { color: var(--primary-color, #007bff); } /* --- Mobile Icons & Placeholder (Base State - Hidden) --- */ #main-header .mobile-header-icons, #main-header .mobile-header-placeholder { display: none; /* Hidden on desktop by default */ gap: 15px; } /* Footer Styling - Adjusted for Existing HTML */ .landing-footer-minimal { background-color: #343a40; /* Dark background */ color: #adb5bd; /* Muted text color */ padding: 20px 15px; /* Adjusted vertical padding */ margin-top: auto; /* Pushes footer down in flex layouts */ font-size: 0.9rem; flex-shrink: 0; /* Prevent shrinking if parent is flex */ text-align: center; /* Center all content */ border-top: 3px solid var(--primary-color, #007bff); /* Optional accent border */ line-height: 1.6; /* Improve spacing if items wrap */ } /* Style the links directly */ .landing-footer-minimal a { color: #adb5bd; text-decoration: none; margin: 0 5px; /* Add small horizontal space around links */ transition: color 0.2s ease; white-space: nowrap; /* Try to prevent links wrapping */ } .landing-footer-minimal a:hover { color: #ffffff; /* Brighter color on hover */ text-decoration: underline; /* Add underline on hover */ } /* Style the separators and copyright text */ .landing-footer-minimal { /* The text nodes containing '|' and '©' inherit color from the footer */ font-size: 0.9rem; /* Ensure consistent size */ } /* Target the copyright year span specifically if needed */ /* FAQ Section Styles */ .faq-section { margin: 2rem 0; padding: 1rem; border-top: 2px solid #ccc; font-family: 'Nunito', sans-serif; } .faq-section h2 { font-size: 1.8rem; margin-bottom: 1rem; color: #333; } details { border: 1px solid #ddd; border-radius: 6px; padding: 1rem; margin-bottom: 1rem; background-color: #f9f9f9; transition: all 0.3s ease; } details[open] { background-color: #fff; border-color: #aaa; } summary { font-weight: 600; cursor: pointer; font-size: 1.1rem; outline: none; color: #2c3e50; } summary::-webkit-details-marker { display: none; } summary::before { content: "➤"; display: inline-block; margin-right: 0.5rem; transform: rotate(0deg); transition: transform 0.3s ease; color: #3498db; } details[open] summary::before { transform: rotate(90deg); } details p { margin: 0.5rem 0 0; line-height: 1.5; color: #555; } /* Responsive adjustments for smaller screens */ @media (max-width: 768px) { .blog-content-wrapper { margin: 10px; padding: 20px 20px; } .blog-content-wrapper h1 { font-size: 1.8rem; } .blog-content-wrapper h2 { font-size: 1.4rem; } /* Ensure images don't overflow */ .blog-content-wrapper img { max-width: 100%; height: auto; } /* Table Responsiveness */ .table-wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 20px; border: 1px solid #eee; border-radius: 8px; } .blog-content-wrapper table { min-width: 600px; /* Force scroll on mobile */ margin-bottom: 0; } } @media (max-width: 768px) { .blog-content-wrapper { padding: 15px 15px; margin: 5px; border-radius: 4px; /* Slight radius instead of full full-width */ } .blog-content-wrapper h1 { font-size: 1.6rem; } .blog-content-wrapper h2 { font-size: 1.3rem; } #main-header { position: sticky; top: 0; padding: 10px 0; } #main-header .container { padding: 0 15px; flex-direction: column; gap: 10px; text-align: center; } /* --- Mobile Logo --- */ #main-header .logo { font-size: 1.5rem; margin: 0 auto; } /* --- Mobile Nav --- */ #main-header .desktop-nav ul { flex-wrap: wrap; justify-content: center; gap: 8px 12px; } #main-header .desktop-nav ul li { margin-left: 0; } #main-header .desktop-nav ul li a { font-size: 0.9rem; } .landing-footer-minimal { font-size: 0.85rem; padding: 20px 10px; } } /* Ad Container Styling */ .blog-ad-container { margin: 30px 0; text-align: center; clear: both; min-height: 100px; background: #fafafa; border-radius: 8px; padding: 10px; }