/* 1. PALETTE & GRID SYSTEM */
:root {
–bg-foundation: #F1E9DB; /* Soft Linen (60%) */
–struct-azure: #054A91; /* Steel Azure (30%) */
–text-coffee: #432D26; /* Dark Coffee (30%) */
–accent-sky: #5DB7DE; /* Sky Surge (10%) */
–border-khaki: #A39B8B; /* Khaki Beige */
–white: #FFFFFF;
}
.innovation-section {
background-color: var(–bg-foundation);
padding: 60px 20px;
font-family: ‘Inter’, -apple-system, sans-serif;
}
.innovation-grid {
display: grid;
grid-template-columns: 1fr 1fr; /* 2×2 Grid */
gap: 30px;
max-width: 1200px;
margin: 0 auto;
}
/* 2. PROJECT CARD DESIGN (30/70 Split) */
.project-card {
background-color: var(–white);
border: 1px solid var(–border-khaki);
border-radius: 20px; /* Squircle-inspired rounding */
display: grid;
grid-template-columns: 0.35fr 0.65fr; /* 35% Content | 65% Image */
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
height: 320px;
text-decoration: none;
color: inherit;
}
.project-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(67, 45, 38, 0.1);
}
/* 3. CONTENT SIDE (30%) */
.card-content {
padding: 30px 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
border-right: 1px solid var(–bg-foundation);
}
.card-content h3 {
color: var(–struct-azure);
font-size: 24px;
margin: 0 0 5px 0;
font-family: ‘Outfit’, sans-serif;
}
.project-name {
color: var(–accent-sky);
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 20px;
}
.resume-meta {
font-size: 14px;
color: var(–text-coffee);
line-height: 1.6;
}
.meta-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.meta-row i {
color: var(–accent-sky);
width: 16px;
text-align: center;
font-size: 14px;
}
/* 4. IMAGE SIDE (70%) */
.card-image {
background-color: #F8F9FA;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.project-card:hover .card-image img {
transform: scale(1.05);
}
/* Responsive for Tablet/Mobile */
@media (max-width: 900px) {
.innovation-grid { grid-template-columns: 1fr; }
.project-card { height: auto; grid-template-columns: 1fr; }
.card-content { border-right: none; border-bottom: 1px solid var(–bg-foundation); }
.card-image { height: 250px; }
}
rohitsatish 