/* -------------------------------------------------- 1. Font Awesome (move this into your ideally) -------------------------------------------------- */ @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css'); /* -------------------------------------------------- 2. Global & Reset -------------------------------------------------- */ html { width: 100%; height: 100%; box-sizing: border-box; overflow-x: hidden; } body { background-color: beige !important; width: 100%; height: 100%; overflow-x: hidden; margin: 0; padding: 0; } *, *::before, *::after { box-sizing: inherit; } /* -------------------------------------------------- 3. Header Top (Call/WhatsApp & About Us + Icons) -------------------------------------------------- */ /* General Layout */ .header-top, .custom-header, .advert-container { width: 100%; max-width: 100%; overflow-x: hidden; padding: 0.5rem 10px; margin: 0 auto; } .header-top { margin-top: 40px; } .custom-header { margin-top: 5px; } .header-top .row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .header-link { border: 1px solid red; padding: 5px 10px; border-radius: 5px; display: inline-flex; white-space: nowrap; justify-content: center; align-items: center; text-align: center; } .header-link i { margin-right: 5px; /* for phone icon */ } .header-top .header-link:hover h4 { color: red; } .social-icons { display: flex; flex-wrap: wrap; } .social-icons a { font-size: 1.2rem; color: #007BFF; transition: color .3s ease; margin-left: .5rem; border: 1px solid red; display: inline-flex; align-items: center; justify-content: center; } .social-icons a:hover { color: red; } @media (max-width: 600px) { .header-top .row { display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; /* FORCE single line */ } /* Shrink CALL and ABOUT US buttons */ .header-link { padding: 3px 6px; font-size: 0.75rem; margin-right: 5px; } .header-link i { margin-right: 3px; font-size: 0.85rem; } /* Shrink ABOUT US link */ .about-social-group .header-link { padding: 3px 6px; font-size: 0.75rem; margin-right: 5px; } /* Shrink social icons and spacing */ .social-icons { display: flex; flex-wrap: nowrap; gap: 3px; } .social-icons a { font-size: 1rem; width: 25px; height: 25px; padding: 3px; margin-left: 0; /* remove left margin */ border-radius: 3px; } .social-icons a i { margin: auto; font-size: 0.9rem; } } /* ---------------------------------- */ /* HEADER TEXT SLIDE ANIMATION */ /* ---------------------------------- */ .header-animated-text { position: relative; max-width: 1100px; margin: 8px auto 0 auto; height: 40px; overflow: hidden; text-align: center; /* Vintage serif typography */ font-family: "Times New Roman", Georgia, "Libre Baskerville", serif; font-size: 1.05rem; /* increased size */ font-weight: 600; line-height: 1.5; } /* Animated paragraphs */ .header-animated-text p { position: absolute; left: 0; right: 0; margin: 0; opacity: 0; transform: translateY(100%); transition: transform 0.6s ease, opacity 0.6s ease; padding: 0 16px; /* 🎨 Vintage Gradient Text */ background: linear-gradient( 135deg, #F01B1B 0%, /* dominant red */ #F01B1B 45%, #b54545 60%, #3FA8DE 85%, #3FA8DE 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; /* Line clamp */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Visible paragraph */ .header-animated-text p.active { opacity: 1; transform: translateY(0); } /* Leaving paragraph */ .header-animated-text p.exit { opacity: 0; transform: translateY(-100%); } /* ---------------------------------- */ /* MOBILE (Phones) – FULL VISIBILITY */ /* ---------------------------------- */ @media (max-width: 576px) { .header-animated-text { height: 78px; /* enough for 3 lines */ font-size: 0.88rem; line-height: 1.6; } .header-animated-text p { padding: 0 12px; /* Allow more lines on mobile */ -webkit-line-clamp: 3; line-clamp: 3; /* Better wrapping */ word-break: break-word; white-space: normal; } } .comment-modal { background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 15px; margin-top: 10px; } /* -------------------------------------------------- 4. Advert Container -------------------------------------------------- */ .advert-container { display: flex; align-items: center; justify-content: center; height: 120px; overflow: hidden; } .gallery-item img { width: auto; max-width: 350px; height: 100px; object-fit: contain; } /* Date and time display */ #currentDate, #currentTime { background-color: #007BFF; color: #fff; display: inline-block; padding: .5rem 1rem; margin-bottom: .5rem; border: 1px solid red; } @media (max-width: 600px) { .advert-container { display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: nowrap; padding: 0.5rem; gap: 10px; overflow-x: auto; /* Allows side scrolling if very tight */ } .advert-container-left, .advert-container-right { flex: 0 0 auto; max-width: 35%; } .advert-container-middle { text-align: center; } .gallery-item img { width: 100%; max-height: 80px; object-fit: contain; } #currentDate, #currentTime { display: block; /* Block-like but background hugs text */ background-color: #007BFF; color: #FFF; padding: 2px 6px; margin: 2px 0; /* small vertical space between date & time */ font-size: 14px; white-space: nowrap; border-radius: 4px; } } /* -------------------------------------------------- 5. Navbar -------------------------------------------------- */ .navbar { margin-top: 0.5px; margin-bottom: 0; font-weight: bold; /* Gabanya padding hano ikaba 2px gusa hejuru na hasi */ padding: 2px 0 !important; /* Gabanya margin kuko 20px ituma Navbar itandukana n'ibindi cyane */ margin: 5px 0 !important; background-color: #007BFF; /* Force height niba ukishaka ko inanuka cyane */ min-height: auto !important; } .navbar-nav .nav-link { padding: 0px !important; font-size: 1rem; color: #fff !important; } .navbar-nav .nav-link:hover { color: red !important; } .navbar-toggler { display: none; /* Initially hidden */ border: 2px solid #FFF; /* White border for the toggler button */ background-color: black; /* Black background for the button */ color: #FFF; /* White text color */ } @media (max-width: 992px) { .navbar { background-color: #fff; } .navbar .nav-link { color: #000 !important; } .navbar-toggler { display: flex; justify-content: center; align-items: center; width: 70px; padding: 0px; position: fixed; top: 10px; right: 10px; z-index: 1000; } .navbar-toggler:hover { background-color: red; } } /* -------------------------------------------------- 6. Search Box -------------------------------------------------- */ .search-box { position: relative; z-index: 10; width: 100%; margin: 1rem 0; } /* -------------------------------------------------- 7. Back to Top -------------------------------------------------- */ .back-to-top-container { position: fixed; bottom: 20px; right: 20px; z-index: 999; } /* ===== Back-to-top button styling ===== */ .back-to-top-container { position: fixed; bottom: 30px; right: 30px; z-index: 9999; } .back-to-top { display: none; /* hidden by default */ width: 45px; height: 45px; background: #007bff; color: #fff; border-radius: 50%; text-align: center; line-height: 45px; font-size: 22px; transition: opacity 0.3s ease, transform 0.3s ease; } .back-to-top:hover { background: #0056b3; transform: translateY(-3px); } .card { border: none; border-radius: 6px; overflow: hidden; transition: all 0.3s ease-in-out; } .card:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); } .card-img-top { width: 100%; height: 180px; /* reduced height */ object-fit: cover; /* keeps neat crop */ border-bottom: 1px solid #eee; } .card-body { padding: 0.6rem 0.7rem; /* smaller padding */ } .card-body h5 { font-size: 0.95rem; line-height: 1.25rem; font-weight: 600; margin: 0.4rem 0; } .card-body p { margin: 0; font-size: 0.8rem; } .badge { font-size: 0.7rem; padding: 0.3em 0.5em; } .preview-text { max-height: 120px; overflow: hidden; } /* Reaction Bar - General Styling */ .reaction-bar { display: flex; flex-wrap: wrap; /* allow buttons to wrap nicely */ gap: 8px; /* consistent spacing between buttons */ align-items: center; margin-top: 10px; } /* Reaction Buttons */ .reaction-bar .btn { display: flex; align-items: center; justify-content: center; padding: 6px 12px; font-size: 1rem; border-radius: 6px; border: 1px solid #ccc; background-color: #f8f9fa; cursor: pointer; transition: all 0.3s ease; min-width: 60px; /* ensures touch-friendly size */ } .reaction-bar .btn span { margin-left: 4px; /* space between emoji and count */ } /* Hover / Active States */ .reaction-bar .btn:hover { background-color: #007BFF; color: #fff; border-color: #007BFF; } /* Specific Colors */ .reaction-bar .like-btn { color: #007BFF; border-color: #007BFF; } .reaction-bar .dislike-btn { color: #dc3545; border-color: #dc3545; } .reaction-bar .comment-btn { color: #28a745; border-color: #28a745; } .reaction-bar .share-btn { color: #6c757d; border-color: #6c757d; } /* Mobile Adjustments */ @media (max-width: 600px) { .reaction-bar { flex-wrap: wrap; /* allow wrapping if needed */ gap: 5px; /* slightly smaller gaps */ justify-content: flex-start; } .reaction-bar .btn { flex: 1 1 calc(50% - 5px); /* 2 buttons per row on very small screens */ font-size: 0.9rem; padding: 6px 8px; min-width: unset; /* allow flex sizing */ justify-content: center; } .reaction-bar .btn span { margin-left: 2px; /* smaller spacing for mobile */ } } /* -------------------------------------------------- 8. Cards & Galleries -------------------------------------------------- */ .card-img-top { width: 100%; height: 200px; object-fit: cover; } .breadcrumb { width: 100%; /* Full width of the container */ max-width: 500px; /* Maximum width */ height: auto; /* Adjust height based on content */ margin: 50px auto; /* Center align and spacing */ display: flex; align-items: center; justify-content: center; } .breadcrumb img { width: 100%; /* Make the image fit within the breadcrumb */ height: auto; /* Maintain aspect ratio */ } /* -------------------------------------------------- 9. Post Details (Single Post Page) -------------------------------------------------- */ .post-details { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: .9rem; } .post-details .author-info, .visit-count { white-space: nowrap; margin: 0; } .post-details .additional-info { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; } .share-links { display: flex; gap: .5rem; margin: 0; font-size: .9rem; } .share-links a { text-decoration: none; font-weight: bold; transition: opacity .2s ease; } .share-links a:hover { opacity: .7; } @media (max-width: 768px) { .post-details { flex-direction: column; align-items: flex-start; } } /* -------------------------------------------------- 10. Comments & Replies -------------------------------------------------- */ .reply-box { margin-top: .5rem; } textarea { width: 100%; min-height: 50px; max-height: 150px; resize: both; padding: .5rem; border-radius: 4px; border: 1px solid #ccc; } button, .reply-button { margin-top: .5rem; padding: .5rem 1rem; background-color: #007BFF; color: #fff; border: none; border-radius: 8px; cursor: pointer; transition: background-color .3s ease; } button:hover, .reply-button:hover { background-color: #0056b3; } .comment-reply-wrapper { margin-top: .5rem; } /* -------------------------------------------------- 12. Google Translate -------------------------------------------------- */ #google_translate_element { padding-top: 13px; position: absolute; margin-top: 20px; right: 10px; } /* -------------------------------------------------- 14. Responsive adjustments -------------------------------------------------- */ @media (max-width: 768px) { .advert-container { height: 80px; } .gallery-item img { height: 60px; max-width: 200px; } .custom-header, .header-top { flex-direction: column; align-items: flex-start; } } /* Small screen navbar styles */ @media screen and (max-width: 992px) { /* Style for the navbar-toggler button */ .navbar-toggler { border: 2px solid #FFF; /* White border */ border-radius: 5px; /* Rounded corners */ background-color: #2099de; /* Background color */ color: #FFF; /* Text color */ display: flex; /* Enable flexbox */ justify-content: center; /* Center contents horizontally */ align-items: center; /* Vertically center contents */ width: 70px; padding: 5px 10px; /* Adjust padding for smaller look */ position: fixed; /* Fixed position */ top: 40px; /* Space from the bottom */ right: 10px; /* Space from the left */ text-align: center; /* Ensure text is center-aligned */ z-index: 1000; /* Ensure it stays on top of other elements */ } .navbar-toggler:hover { background-color: red; /* Light background color on hover */ } .category-menu-container, .search-box { display: block; } .category-menu-container:hover { display: block; /* Keep the category menu container visible when hovered */ } } .sidebar-card { background: #fff; border: 1px solid #eee; border-radius: 6px; padding: 15px; margin-bottom: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); } .sidebar-card h5 { font-size: 16px; margin-bottom: 15px; font-weight: 600; border-bottom: 1px solid #f1f1f1; padding-bottom: 6px; } .sidebar-card ul { margin: 0; padding: 0; list-style: none; } .sidebar-card ul li img { border: 1px solid #ddd; border-radius: 4px; } .sidebar-card ul li span { font-size: 14px; line-height: 1.3; font-weight: 500; color: #333; } .sidebar-card ul li small { font-size: 12px; color: #888; } .sidebar-card ul li a:hover span { color: #007bff; } .bg-footer { background-color: #007BFF; /* semi-transparent */ color: white; font-size: 0.9rem; } .bg-footer p, .bg-footer ul, .bg-footer li { margin-bottom: 0; line-height: 1.4; } .bg-footer a { color: #ffffff; text-decoration: none; } .bg-footer a:hover { text-decoration: underline; } .text-white { color: white; } .text-white:hover { color: red; /* Or any highlight color on hover */ } .text-decoration-none { text-decoration: none; }