:root{ --primary-color:#319795; --secondary-color:#ed8936; --dark-color:#1a202c; --light-color:#f7fafc; --white-color:#ffffff; --text-color:#4a5568; --border-color:#e2e8f0; --gradient-1: linear-gradient(135deg,#667eea 0%,#764ba2 100%); --gradient-2: linear-gradient(135deg,#f093fb 0%,#f5576c 100%); --gradient-3: linear-gradient(135deg,#4facfe 0%,#00f2fe 100%); --gradient-4: linear-gradient(135deg,#43e97b 0%,#38f9d7 100%); --gradient-5: linear-gradient(135deg,#fa709a 0%,#fee140 100%); --gradient-6: linear-gradient(135deg,#a8edea 0%,#fed6e3 100%); --gradient-hero: linear-gradient(135deg,#1a365d 0%,#319795 50%,#ed8936 100%); --shadow: 0 10px 30px rgba(0,0,0,0.1); --shadow-hover: 0 20px 40px rgba(0,0,0,0.15); --transition: all 0.36s cubic-bezier(.175,.885,.32,1.275); } /* Container */ .apf-portfolio-section .container { max-width:1200px; margin:0 auto; padding:0 20px; } /* Filters */ /* Filters container */ .apf-filters { text-align: center; margin-bottom: 32px; } .apf-filter-buttons { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; border-radius: 999px; } /* Base button style */ .apf-filter-btn { padding: 10px 24px; /* wider horizontal padding for pill shape */ border-radius: 999px; /* full pill */ background: #f1f5f9; border: 1px solid var(--border-color); font-weight: 700; cursor: pointer; transition: all 0.3s ease, /* smooth background, color, transform */ border-radius 0.3s ease, /* optional for subtle rounding animation */ box-shadow 0.3s ease; color: #333; white-space: nowrap; /* prevent wrapping */ } /* Hover & active state */ .apf-filter-btn.apf-active, .apf-filter-btn:hover { background: var(--gradient-hero); color: #fff; transform: translateY(-4px); box-shadow: 0 12px 30px rgba(49, 151, 149, 0.18); border-radius:999px; /* reinforce pill shape */ } /* Grid */ .apf-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap:28px; } /* Card */ .project-card { background:var(--white-color); border-radius:20px; overflow:hidden; box-shadow:var(--shadow); transition:var(--transition); position:relative; cursor:pointer; will-change: transform; transform-style:preserve-3d; } .project-card:hover { box-shadow:var(--shadow-hover); } /* image */ .project-image { position:relative; height:280px; overflow:hidden; background:#eee; } .project-image img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--transition); display:block; } .project-card:hover .project-image img { transform:scale(1.05) rotate(1deg); } /* overlay */ .project-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; transition:var(--transition); background:linear-gradient(135deg, rgba(49,151,149,0.88), rgba(237,137,54,0.88)); } .project-card:hover .project-overlay { opacity:1; } .view-project-btn { background:#fff; color:var(--primary-color); padding:12px 30px; border-radius:30px; text-decoration:none; font-weight:600; transform:translateY(12px); opacity:0; transition:var(--transition); } .project-card:hover .view-project-btn { transform:translateY(0); opacity:1; } /* content */ .project-content { padding:26px; position:relative; } .project-service { display:inline-block; padding:6px 16px; border-radius:30px; font-size:0.9rem; font-weight:700; color:#fff; margin-bottom:14px; position:relative; background: linear-gradient(135deg,#667eea 0%,#764ba2 100%); background-size:200% 200%; box-shadow:0 6px 18px rgba(0,0,0,0.12); transition: all .45s ease; } .project-service:hover { transform:translateY(-3px); box-shadow:0 12px 30px rgba(0,0,0,0.18); } /* per-card gradients (optional) */ .project-card:nth-child(1) .project-service { background: var(--gradient-1); } .project-card:nth-child(2) .project-service { background: var(--gradient-2); } .project-card:nth-child(3) .project-service { background: var(--gradient-3); } .project-card:nth-child(4) .project-service { background: var(--gradient-4); } .project-card:nth-child(5) .project-service { background: var(--gradient-5); } .project-card:nth-child(6) .project-service { background: var(--gradient-6); } .project-title { font-family: 'Montserrat', sans-serif; font-size:1.25rem; font-weight:700; margin-bottom:10px; color:var(--dark-color); transition:var(--transition); } .project-card:hover .project-title { color:var(--primary-color); } .project-meta { font-size:0.9rem; color:#718096; margin-bottom:12px; } .project-description { color:var(--text-color); line-height:1.6; opacity:0.9; margin-bottom:12px; } /* tech tags */ .project-tech { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; } .tech-tag { display:inline-block; background:rgba(49,151,149,0.06); border-radius:999px; padding:6px 10px; font-weight:700; color:var(--primary-color); transition: all .28s ease; } .tech-tag:hover { transform:scale(1.06); background:var(--primary-color); color:#fff; box-shadow:0 8px 18px rgba(0,0,0,0.12); cursor:pointer; } /* stats */ .project-stats { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:12px; color:#4a5568; font-weight:600; } .project-time, .project-team { font-size:0.95rem; } /* reveal */ .reveal { opacity:0; transform: translateY(12px) scale(0.98); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.9,.2,1); } .reveal.active { opacity:1; transform: translateY(0) scale(1); } /* tilt fallback for touch */ @media (hover: none) { .project-card { transform:none !important; } } /* responsive */ @media (max-width:1024px) { .project-image { height:220px; } } @media (max-width:768px) { .apf-grid { grid-template-columns:1fr; } .project-image { height:200px; } } /* helpers */ .apf-loading, .apf-no-posts { text-align:center; padding:28px; color:#666; }