Posts tagged with: web performance optimization

3 posts
Core Web Vitals SEO
August 17, 2025 SEO & Visibility

Core Web Vitals SEO: Best Must-Have Site Speed Boosts

Ready to turn seconds into rankings? This guide to core web vitals SEO reveals the site speed upgrades that measurably improve LCP, CLS, and INP—and…
image compression
March 8, 2025 Performance & Speed

Image Compression: Must-Have for Effortless Website Speed

Want a faster site without a full redesign? Smart image compression is the quickest win to boost website speed, with simple formats, workflows, and tools…
web design trends 2025

Web Design Trends 2025: Must-Have Best Website Design

From speed-as-a-feature to AI-driven personalization, web design trends 2025 reveal how to ship modern web design that’s fast, accessible, and conversion-ready. Explore the must-have best…
/* Tag Hero Section */ .tag-hero { background: linear-gradient(135deg, #273039 0%, #1a2328 100%); color: #fff; padding: 80px 0; position: relative; overflow: hidden; } .tag-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,'); opacity: 0.3; } .tag-hero-content { position: relative; z-index: 2; } .tag-hero-title { color: #fff; font-size: 3rem; margin-bottom: 20px; font-weight: 700; line-height: 1.2; } .tag-hero-title .tag-name { color: #bdd653; } .tag-hero-description { color: #ccc; font-size: 1.2rem; line-height: 1.6; margin-bottom: 25px; max-width: 600px; margin-left: auto; margin-right: auto; } .tag-hero-meta { display: flex; justify-content: center; align-items: center; gap: 20px; } .post-count { background: #bdd653; color: #273039; padding: 12px 24px; border-radius: 25px; font-weight: 600; font-size: 1rem; box-shadow: 0 4px 15px rgba(189, 214, 83, 0.3); } /* Tag Archive Content */ .tag-archive-content { padding: 40px 0; } /* Blog Grid Styles (reusing existing blog styles) */ .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 40px; } .blog-grid-item { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; } .blog-grid-item:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); } .blog-grid-card { display: flex; flex-direction: column; height: 100%; } .blog-grid-image { position: relative; overflow: hidden; height: 200px; } .blog-grid-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .blog-grid-item:hover .blog-grid-image img { transform: scale(1.05); } .blog-grid-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #f8f9fa; color: #bdd653; font-size: 2rem; } .blog-grid-content { padding: 25px; flex-grow: 1; display: flex; flex-direction: column; } .blog-meta { display: flex; gap: 15px; margin-bottom: 15px; font-size: 0.85rem; color: #273039; } .blog-date { color: #273039; } .blog-category a { color: #bdd653; text-decoration: none; transition: color 0.3s ease; } .blog-category a:hover { color: #a8c442; } .blog-grid-title { font-size: 1.3rem; margin-bottom: 15px; line-height: 1.4; color: #273039; } .blog-grid-excerpt { color: #273039; line-height: 1.6; margin-bottom: 20px; flex-grow: 1; } .blog-grid-cta { margin-top: auto; } .blog-grid-link { display: inline-flex; align-items: center; gap: 8px; color: #bdd653; text-decoration: none; font-weight: 600; transition: all 0.3s ease; } .blog-grid-link:hover { color: #a8c442; text-decoration: none; transform: translateX(5px); } /* Pagination */ .tag-pagination { display: flex; justify-content: center; gap: 10px; margin-top: 40px; } .tag-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: #fff; color: #273039; text-decoration: none; border-radius: 5px; border: 2px solid #e9ecef; transition: all 0.3s ease; font-weight: 600; } .tag-pagination .page-numbers:hover, .tag-pagination .page-numbers.current { background: #bdd653; color: #273039; border-color: #bdd653; } .tag-pagination .prev, .tag-pagination .next { width: auto; padding: 0 15px; gap: 5px; } /* No Posts Found */ .no-posts-found { text-align: center; padding: 60px 20px; } .no-posts-content i { font-size: 4rem; color: #bdd653; margin-bottom: 20px; } .no-posts-content h2 { color: #273039; margin-bottom: 15px; } .no-posts-content p { color: #273039; margin-bottom: 30px; font-size: 1.1rem; } /* Related Tags Section (Bottom of Page) */ .related-tags-section { background: #f8f9fa; padding: 60px 0; margin-top: 60px; border-top: 1px solid #e9ecef; } .related-tags-title { color: #273039; font-size: 1.8rem; margin-bottom: 30px; text-align: center; font-weight: 600; } .related-tags-list { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 800px; margin: 0 auto; } .tag-link { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #273039; padding: 10px 16px; border-radius: 25px; text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: all 0.3s ease; border: 2px solid #e9ecef; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .tag-link:hover { background: #bdd653; color: #273039; text-decoration: none; border-color: #bdd653; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(189, 214, 83, 0.3); } .tag-count { color: #273039; font-size: 0.8rem; font-weight: 400; } .tag-link:hover .tag-count { color: #273039; } .no-tags-message { text-align: center; color: #273039; font-style: italic; margin: 0; } /* Responsive Design */ @media (max-width: 992px) { .tag-hero { padding: 60px 0; } .tag-hero-title { font-size: 2.5rem; } .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } .blog-grid-content { padding: 20px; } } @media (max-width: 768px) { .tag-hero { padding: 40px 0; } .tag-hero-title { font-size: 2rem; } .tag-hero-description { font-size: 1.1rem; } .tag-archive-content { padding: 20px 0; } .tag-hero-meta { flex-direction: column; gap: 10px; } .blog-grid { grid-template-columns: 1fr; gap: 20px; } .blog-grid-image { height: 180px; } .related-tags-section { padding: 40px 0; margin-top: 40px; } .related-tags-title { font-size: 1.5rem; margin-bottom: 20px; } .related-tags-list { gap: 8px; } .tag-link { padding: 8px 12px; font-size: 0.85rem; } }