/* ============================================================
Career Pakistan — premium-upgrades.css
Drop this file AFTER all other CSS files in every HTML page.
Adds: premium animations, imgbb CDN proxy fix, skeleton
improvements, page transitions, micro-interactions, and
a refined professional colour boost.
============================================================ */
/* ── 1. COLOUR REFINEMENTS ──────────────────────────────────
Deepens the existing teal palette into a richer, more
premium navy-teal combination */
/* ── 2. IMGBB / EXTERNAL IMAGE SPEED FIX ───────────────────
ImgBB images load slow because the browser opens a cold
connection on each request. These declarations warm up
the DNS + TCP ahead of time so images start loading the
moment they enter the viewport.
Add these tags in the of every page, OR
the CSS below injects equivalent resource hints via the
Paint Timing API workaround.
ACTION REQUIRED: Also paste these two lines inside your
on every page (index.html, jobs.html, etc.):
The CSS below handles the visual shimmer & reveal. */
/* Progressive image reveal — smoother than blur-up alone */
.card-img img {
opacity: 0;
transform: scale(1.04);
transition:
opacity var(--transition-mid),
transform var(--transition-mid),
filter 0.28s ease;
will-change: opacity, transform;
background: var(--bg-alt);
}
.card-img img.img-loaded {
opacity: 1;
transform: scale(1);
filter: none;
}
.card-img img.img-loading {
filter: blur(6px);
opacity: 0.6;
}
/* Improved shimmer — matches card height */
@keyframes shimmer-premium {
0% { background-position: -700px 0; }
100% { background-position: 700px 0; }
}
.card-img.shimmer,
.skeleton-card,
.shimmer {
background: linear-gradient(
100deg,
var(--bg-alt) 30%,
color-mix(in srgb, var(--bg-alt) 50%, var(--primary-bg) 50%) 50%,
var(--bg-alt) 70%
);
background-size: 700px 100%;
animation: shimmer-premium 1.2s infinite linear;
}
/* ── 3. PAGE LOAD ANIMATION ──────────────────────────────── */
@keyframes fadeSlideUp {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes scaleIn {
from { opacity: 0; transform: scale(0.97); }
to { opacity: 1; transform: scale(1); }
}
/* Hero content staggered entrance */
.home-hero-content .trending-label {
animation: fadeSlideUp var(--transition-slow) both;
animation-delay: 0.05s;
}
.home-hero-title {
animation: fadeSlideUp var(--transition-slow) both;
animation-delay: 0.15s;
}
.home-hero-subtitle {
animation: fadeSlideUp var(--transition-slow) both;
animation-delay: 0.25s;
}
.hero-search-box {
animation: fadeSlideUp var(--transition-slow) both;
animation-delay: 0.32s;
}
.home-hero-actions {
animation: fadeSlideUp var(--transition-slow) both;
animation-delay: 0.40s;
}
/* Quick-nav cards — override inline animation-delay to use our keyframe */
.quick-nav-card {
animation: fadeSlideUp var(--transition-slow) both;
}
/* Stats ribbon fade-in */
.stats-ribbon {
animation: fadeIn 0.7s 0.5s both;
}
/* Sections reveal as they scroll into view via JS class */
.section.in-view .card {
animation: fadeSlideUp var(--transition-slow) both;
}
.section.in-view .card:nth-child(2) { animation-delay: 0.07s; }
.section.in-view .card:nth-child(3) { animation-delay: 0.14s; }
.section.in-view .card:nth-child(4) { animation-delay: 0.21s; }
.section.in-view .card:nth-child(5) { animation-delay: 0.28s; }
.section.in-view .card:nth-child(6) { animation-delay: 0.35s; }
/* ── 4. PREMIUM CARD UPGRADES ───────────────────────────── */
.card {
border-radius: 14px;
border: 1px solid var(--border);
background: var(--bg-card);
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
transition:
box-shadow var(--transition-mid),
border-color var(--transition-mid),
transform var(--transition-mid);
overflow: hidden;
}
.card:hover {
box-shadow: var(--premium-shadow);
border-color: var(--primary);
transform: translateY(-4px);
}
/* Card image — consistent 200px height */
.card-img {
height: 200px;
overflow: hidden;
background: var(--bg-alt);
position: relative;
}
.card-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.card:hover .card-img img {
transform: scale(1.06);
transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
/* ── 5. NAVBAR UPGRADE ─────────────────────────────────── */
.navbar {
position: sticky;
top: 0;
z-index: 1000;
background: color-mix(in srgb, var(--bg-card) 90%, transparent 10%);
backdrop-filter: blur(18px) saturate(180%);
-webkit-backdrop-filter: blur(18px) saturate(180%);
border-bottom: 1px solid var(--border);
box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 4px 24px rgba(0,0,0,0.04);
transition: box-shadow var(--transition-fast);
}
.navbar.scrolled {
box-shadow: 0 2px 20px rgba(0,0,0,0.10);
}
.nav-links a {
position: relative;
transition: color var(--transition-fast);
}
.nav-links a::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg, var(--primary), var(--accent));
border-radius: 2px;
transition: width var(--transition-mid);
}
.nav-links a:hover::after,
.nav-links a.active::after {
width: 100%;
}
/* ── 6. HERO SECTION PREMIUM TREATMENT ────────────────── */
.page-header.home-hero {
position: relative;
overflow: hidden;
background: linear-gradient(135deg,
color-mix(in srgb, var(--primary-bg) 95%, transparent 5%) 0%,
var(--bg-alt) 60%,
color-mix(in srgb, var(--primary-bg) 80%, transparent 20%) 100%
);
}
/* Animated gradient orbs */
.page-header.home-hero::before,
.page-header.home-hero::after {
content: '';
position: absolute;
border-radius: 50%;
pointer-events: none;
z-index: 0;
}
.page-header.home-hero::before {
width: 500px;
height: 500px;
top: -200px;
right: -100px;
background: radial-gradient(circle, rgba(14,165,233,0.12) 0%, transparent 70%);
animation: orbFloat 8s ease-in-out infinite;
}
.page-header.home-hero::after {
width: 400px;
height: 400px;
bottom: -150px;
left: -100px;
background: radial-gradient(circle, rgba(6,182,212,0.10) 0%, transparent 70%);
animation: orbFloat 10s ease-in-out infinite reverse;
}
@keyframes orbFloat {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-20px) scale(1.04); }
}
.page-header.home-hero .container {
position: relative;
z-index: 1;
}
/* ── 7. SEARCH BOX PREMIUM ─────────────────────────────── */
.hero-search-box {
position: relative;
}
.hero-search-input:focus {
box-shadow: 0 0 0 3px rgba(14,165,233,0.25), 0 4px 16px rgba(14,165,233,0.15);
border-color: var(--primary) !important;
transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.hero-search-btn {
transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.hero-search-btn:hover {
transform: translateX(2px);
box-shadow: 0 4px 12px rgba(14,165,233,0.30);
}
/* ── 8. STATS RIBBON PREMIUM ────────────────────────────── */
.stats-ribbon {
background: linear-gradient(90deg, var(--primary-dark), var(--primary), var(--accent), var(--primary));
background-size: 300% 100%;
animation: gradientShift 8s ease infinite;
position: relative;
overflow: hidden;
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.stat-num {
font-size: clamp(1.6rem, 3vw, 2.4rem);
font-weight: 800;
letter-spacing: -0.03em;
text-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
/* ── 9. SECTION TITLE UPGRADE ───────────────────────────── */
.section-title {
position: relative;
display: inline-block;
font-size: clamp(1.15rem, 2vw, 1.45rem);
font-weight: 700;
letter-spacing: -0.02em;
}
.section-title::before {
content: '';
position: absolute;
left: -14px;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 70%;
background: linear-gradient(180deg, var(--primary), var(--accent));
border-radius: 2px;
}
/* ── 10. BUTTON UPGRADES ───────────────────────────────── */
.btn-primary {
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
border: none;
box-shadow: 0 2px 8px rgba(2,132,199,0.25);
transition: box-shadow var(--transition-fast), transform var(--transition-fast);
position: relative;
overflow: hidden;
}
.btn-primary::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.12), transparent);
opacity: 0;
transition: opacity var(--transition-fast);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(2,132,199,0.38);
}
.btn-primary:hover::after {
opacity: 1;
}
.btn-primary:active {
transform: translateY(0);
}
/* ── 11. CATEGORY PILLS UPGRADE ────────────────────────── */
.cat-pill {
border-radius: 999px;
transition: all var(--transition-fast);
font-size: 0.82rem;
font-weight: 600;
}
.cat-pill.active,
.cat-pill:hover {
background: var(--primary);
color: #fff;
border-color: var(--primary);
box-shadow: 0 3px 10px rgba(2,132,199,0.28);
}
/* ── 12. QUICK-NAV CARDS PREMIUM ───────────────────────── */
.quick-nav-card {
border-radius: 14px;
border: 1.5px solid var(--border);
background: var(--bg-card);
transition: all var(--transition-mid);
position: relative;
overflow: hidden;
}
.quick-nav-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, var(--primary-bg), transparent);
opacity: 0;
transition: opacity var(--transition-mid);
}
.quick-nav-card:hover {
border-color: var(--primary);
transform: translateY(-3px);
box-shadow: var(--premium-shadow);
}
.quick-nav-card:hover::before {
opacity: 1;
}
/* ── 13. TRENDING LABEL BADGE ──────────────────────────── */
.trending-label {
display: inline-flex;
align-items: center;
gap: 6px;
background: linear-gradient(90deg, rgba(2,132,199,0.1), rgba(6,182,212,0.1));
border: 1px solid rgba(2,132,199,0.2);
color: var(--primary-dark);
border-radius: 999px;
padding: 5px 14px;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 12px;
}
body.dark-mode .trending-label {
color: var(--primary-light);
background: rgba(56,189,248,0.1);
border-color: rgba(56,189,248,0.2);
}
/* ── 14. NOTIFICATION BAR UPGRADE ─────────────────────── */
.notif-bar {
background: linear-gradient(90deg, var(--primary-dark), var(--primary));
color: #fff;
box-shadow: 0 2px 8px rgba(2,132,199,0.3);
}
/* ── 15. CARD TAG / BADGE UPGRADES ─────────────────────── */
.tag, .badge, .deadline-badge {
border-radius: 6px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
padding: 3px 8px;
transition: box-shadow var(--transition-fast);
}
/* ── 16. FOOTER UPGRADE ────────────────────────────────── */
.footer {
background: linear-gradient(180deg, var(--bg-alt) 0%, var(--bg-main) 100%);
border-top: 1px solid var(--border);
position: relative;
overflow: hidden;
}
.footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--primary), var(--accent), var(--primary));
background-size: 200% 100%;
animation: gradientShift 6s ease infinite;
}
/* ── 17. SCROLL PROGRESS BAR ───────────────────────────── */
#scroll-progress {
position: fixed;
top: 0;
left: 0;
height: 3px;
width: 0%;
background: linear-gradient(90deg, var(--primary), var(--accent));
z-index: 9999;
transition: width 0.1s linear;
border-radius: 0 2px 2px 0;
box-shadow: 0 0 8px rgba(6,182,212,0.5);
}
/* ── 18. VIEW-ALL BUTTON UPGRADE ────────────────────────── */
.view-all {
border-radius: 999px;
font-size: 0.82rem;
font-weight: 600;
padding: 5px 16px;
color: var(--primary);
border: 1.5px solid var(--primary);
transition: all var(--transition-fast);
}
.view-all:hover {
background: var(--primary);
color: #fff !important;
box-shadow: 0 4px 12px rgba(2,132,199,0.28);
}
/* ── 19. DARK MODE REFINEMENTS ──────────────────────────── */
body.dark-mode .card {
background: var(--bg-card);
border-color: rgba(255,255,255,0.07);
}
body.dark-mode .card:hover {
border-color: var(--primary);
box-shadow: 0 8px 32px rgba(56,189,248,0.15);
}
body.dark-mode .hero-search-input:focus {
box-shadow: 0 0 0 3px rgba(56,189,248,0.25);
}
/* ── 20. BLOG CARD UPGRADE ──────────────────────────────── */
.blog-card {
border-radius: 14px;
overflow: hidden;
transition: all var(--transition-mid);
}
.blog-card:hover {
transform: translateY(-4px);
box-shadow: var(--premium-shadow);
}
/* ── 21. MOBILE BOTTOM NAV UPGRADE ─────────────────────── */
.mobile-bottom-nav {
border-top: 1px solid var(--border);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
background: color-mix(in srgb, var(--bg-card) 92%, transparent 8%);
}
.mobile-bottom-nav a.active {
color: var(--primary);
position: relative;
}
.mobile-bottom-nav a.active::before {
content: '';
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
width: 28px;
height: 3px;
background: var(--primary);
border-radius: 0 0 3px 3px;
}
/* ── 22. REDUCED MOTION SAFETY NET ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}