from services.html) */ /* ===== BLOG PAGE STYLES ===== */ .blog-hero { padding: 160px 0 90px; text-align: center; position: relative; } .blog-hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); opacity: 0.3; } .blog-hero h1 { font-size: clamp(2.4rem, 6vw, 4rem); margin-bottom: 18px; letter-spacing: -1px; } .blog-hero h1 .highlight { color: var(--cyan); text-shadow: 0 0 30px var(--cyan-glow); } .blog-hero p { color: var(--text-secondary); font-size: 1.05rem; max-width: 600px; margin: 0 auto 32px; line-height: 1.7; } .blog-hero-badges { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; } .topic-badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-muted); border: 1px solid var(--border-subtle); padding: 7px 14px; border-radius: 20px; cursor: pointer; transition: all 0.25s; } .topic-badge:hover, .topic-badge.active { border-color: var(--cyan); color: var(--cyan); background: rgba(56,182,255,0.07); } .topic-badge i { font-size: 0.75rem; } .blog-section { padding: 80px 0 120px; } .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-bottom: 60px; } /* POST CARD */ .post-card { background: var(--bg-card); border: 1px solid var(--border-subtle); display: flex; flex-direction: column; transition: border-color 0.3s, transform 0.3s; cursor: pointer; text-decoration: none; } .post-card:hover { border-color: var(--border-glow); transform: translateY(-4px); } .post-card-thumb { height: 160px; display: flex; align-items: center; justify-content: center; font-size: 3.5rem; background: var(--bg-elevated); border-bottom: 1px solid var(--border-subtle); position: relative; overflow: hidden; } .post-card-thumb::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(56,182,255,0.08) 0%, transparent 70%); } .post-card-body { padding: 24px 26px 28px; flex: 1; display: flex; flex-direction: column; } .post-topic-tag { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--cyan); margin-bottom: 14px; } .post-card h3 { font-size: 1.08rem; line-height: 1.45; margin-bottom: 12px; color: var(--text-primary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .post-card p { font-size: 0.86rem; color: var(--text-secondary); line-height: 1.65; flex: 1; margin-bottom: 20px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .post-card-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 16px; border-top: 1px solid var(--border-subtle); } .post-date { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); } .post-read-more { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1px; color: var(--cyan); display: flex; align-items: center; gap: 6px; transition: gap 0.2s; } .post-card:hover .post-read-more { gap: 10px; } /* FEATURED (first post) */ .post-card.featured { grid-column: 1 / -1; flex-direction: row; border-color: var(--border-glow); } .post-card.featured .post-card-thumb { width: 320px; height: auto; min-height: 220px; flex-shrink: 0; border-bottom: none; border-right: 1px solid var(--border-subtle); font-size: 5rem; } .post-card.featured h3 { font-size: 1.4rem; -webkit-line-clamp: 3; } .post-card.featured p { -webkit-line-clamp: 4; } /* LOADING / EMPTY */ .blog-status { grid-column: 1 / -1; text-align: center; padding: 80px 20px; color: var(--text-secondary); } .blog-status i { font-size: 2rem; margin-bottom: 16px; display: block; color: var(--text-muted); } .blog-status.loading i { color: var(--cyan); animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* PAGINATION */ .blog-pagination { display: flex; justify-content: center; gap: 10px; } .page-btn { font-family: var(--font-mono); font-size: 0.78rem; background: var(--bg-card); border: 1px solid var(--border-subtle); color: var(--text-secondary); padding: 10px 18px; cursor: pointer; transition: all 0.25s; } .page-btn:hover, .page-btn.active { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 15px rgba(56,182,255,0.1); } .page-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; box-shadow: none; } @media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } .post-card.featured { flex-direction: column; } .post-card.featured .post-card-thumb { width: 100%; border-right: none; border-bottom: 1px solid var(--border-subtle); } } @media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } .blog-hero { padding: 130px 0 70px; } }

Zion Netcom Blog

Tech Insights

Expert perspectives on ICT in Nigeria, web development, IoT, and what's shaping the future of tech across Africa.

Loading latest posts…