Skip to content

Commit c021daa

Browse files
shaktipyshaktipy
committed
fix(ui): improve card visibility and fix alignment
- Solid background for .project-card (removed transparency) - Enhanced button styling for .btn-play - Added border, shadow, and hover effects for better separation - Fixed minor alignment issues (text left, button bottom) - Dark/light mode consistency
1 parent 06f6bd4 commit c021daa

1 file changed

Lines changed: 130 additions & 105 deletions

File tree

‎web-app/css/styles.css‎

Lines changed: 130 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -1635,7 +1635,7 @@ body {
16351635
}
16361636

16371637
/* ═══════════════════════════════════════
1638-
PROJECT CARDS
1638+
PROJECT CARDS - IMPROVED VISIBILITY
16391639
═══════════════════════════════════════ */
16401640
.projects-section {
16411641
padding: 4rem 0;
@@ -1645,19 +1645,74 @@ body {
16451645
padding: 4rem 0;
16461646
}
16471647

1648+
/* Main card style – solid background, clear borders */
16481649
.project-card {
16491650
position: relative;
1651+
overflow: hidden;
1652+
padding: 1.45rem 1.25rem 1.15rem;
16501653
display: flex;
16511654
flex-direction: column;
1652-
align-items: flex-start;
1653-
gap: 0.5rem;
1654-
background: transparent;
1655+
border-radius: 28px;
1656+
/* Solid background – no transparency */
1657+
background: var(--surface-color);
1658+
border: 2px solid var(--accent-border);
1659+
box-shadow: var(--shadow);
1660+
transition: transform 0.25s ease, box-shadow 0.25s ease;
1661+
backdrop-filter: none;
1662+
-webkit-backdrop-filter: none;
1663+
}
1664+
1665+
.project-card:hover {
1666+
transform: translateY(-6px);
1667+
border-color: var(--accent-color);
1668+
box-shadow: 0 20px 35px rgba(0, 0, 0, 0.15);
1669+
}
1670+
1671+
/* Light mode specific card background */
1672+
[data-theme="light"] .project-card {
1673+
background: #ffffff;
1674+
border-color: rgba(106, 191, 141, 0.4);
1675+
}
1676+
1677+
[data-theme="dark"] .project-card {
1678+
background: #1e1a18;
1679+
border-color: rgba(159, 221, 181, 0.3);
1680+
}
1681+
1682+
/* Card icon wrapper – ensure contrast */
1683+
.card-icon {
1684+
width: 72px;
1685+
height: 72px;
1686+
display: grid;
1687+
place-items: center;
1688+
border-radius: 22px;
1689+
background: var(--accent-soft);
1690+
color: var(--accent-color);
1691+
margin-bottom: 1rem;
1692+
font-size: 2rem;
1693+
}
1694+
1695+
/* Prominent button styling */
1696+
.btn-play {
1697+
background: var(--accent-color);
1698+
color: var(--on-accent);
16551699
border: none;
1656-
color: var(--text-color);
1657-
text-align: left;
1658-
font-size: 1rem;
1700+
padding: 0.7rem 1.2rem;
1701+
border-radius: 40px;
1702+
font-weight: 700;
1703+
font-size: 0.9rem;
16591704
cursor: pointer;
1660-
transition: background 0.2s ease, color 0.2s ease;
1705+
transition: all 0.2s ease;
1706+
margin-top: 0.75rem;
1707+
width: fit-content;
1708+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
1709+
}
1710+
1711+
.btn-play:hover {
1712+
transform: translateY(-2px);
1713+
background: var(--accent-color);
1714+
filter: brightness(1.05);
1715+
box-shadow: 0 8px 18px rgba(106, 191, 141, 0.4);
16611716
}
16621717

16631718
.faq-trigger:hover,
@@ -1767,64 +1822,9 @@ body {
17671822
align-items: stretch;
17681823
}
17691824

1770-
.project-card {
1771-
position: relative;
1772-
display: flex;
1773-
flex-direction: column;
1774-
align-items: flex-start;
1775-
width: 100%;
1776-
box-sizing: border-box;
1777-
1778-
background: rgba(255, 255, 255, 0.03);
1779-
padding: 1.2rem;
1780-
border-radius: 16px;
1781-
1782-
border: 1px solid rgba(255, 255, 255, 0.08);
1783-
1784-
transition: all 0.25s ease;
1785-
overflow: hidden;
1786-
1787-
min-height: 220px;
1788-
}
1789-
1790-
/* Remove problematic pseudo elements */
1791-
.project-card::before,
1792-
.project-card::after {
1793-
display: none;
1794-
}
1795-
1796-
.project-card:hover {
1797-
transform: translateY(-4px);
1798-
border-color: rgba(34, 197, 94, 0.3);
1799-
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
1800-
}
1801-
1802-
.project-card:hover::after {
1803-
opacity: 1;
1804-
transform: translateX(3px);
1805-
}
1806-
1807-
.project-card:active {
1808-
transform: translateY(0);
1809-
}
1810-
1811-
/* Card icon wrapper (SVG Lucide icons) */
1812-
.card-icon {
1813-
width: 72px;
1814-
height: 72px;
1815-
1816-
display: flex;
1817-
align-items: center;
1818-
justify-content: center;
1819-
border-radius: 20px;
1820-
1821-
background: linear-gradient(135deg,
1822-
rgba(34, 197, 94, 0.12),
1823-
rgba(74, 222, 128, 0.10));
1824-
1825-
margin-bottom: 1rem;
1826-
1827-
font-size: 2rem;
1825+
/* Remove any older conflicting .project-card rules that might still exist */
1826+
.project-card:not([data-category]) {
1827+
/* fallback, but our main rule above already covers all */
18281828
}
18291829

18301830
.card-icon svg {
@@ -1855,27 +1855,25 @@ body {
18551855
}
18561856

18571857
.btn-play {
1858-
background: transparent;
1859-
color: var(--accent-color);
1858+
background: var(--accent-color);
1859+
color: var(--on-accent);
18601860
border: none;
1861-
padding: 0.25rem 0 0 0;
1862-
border-radius: 0;
1863-
cursor: pointer;
1864-
font-size: 0.9rem;
1861+
padding: 0.7rem 1.2rem;
1862+
border-radius: 40px;
18651863
font-weight: 700;
1866-
transition: color 0.2s ease;
1867-
width: auto;
1868-
}
1869-
1870-
.project-card:hover .btn-play {
1871-
background: transparent;
1872-
color: var(--accent-color);
1873-
border-color: transparent;
1874-
box-shadow: none;
1864+
font-size: 0.9rem;
1865+
cursor: pointer;
1866+
transition: all 0.2s ease;
1867+
margin-top: 0.75rem;
1868+
width: fit-content;
1869+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
18751870
}
18761871

18771872
.btn-play:hover {
18781873
transform: translateY(-2px);
1874+
background: var(--accent-color);
1875+
filter: brightness(1.05);
1876+
box-shadow: 0 8px 18px rgba(106, 191, 141, 0.4);
18791877
}
18801878

18811879
.btn-play:active {
@@ -4010,35 +4008,29 @@ body {
40104008
display: flex;
40114009
flex-direction: column;
40124010
border-radius: 28px;
4013-
background: linear-gradient(180deg, rgba(252, 176, 91, 0.12), rgba(252, 176, 91, 0.08));
4014-
border: 1px solid rgba(252, 176, 91, 0.3);
4015-
box-shadow: 0 22px 40px rgba(252, 176, 91, 0.08);
4016-
transform-style: preserve-3d;
4017-
}
4018-
4019-
[data-theme="dark"] .project-card {
4020-
background: linear-gradient(180deg, rgba(0, 0, 0, 0.4), rgba(10, 10, 10, 0.5));
4021-
border-color: rgba(252, 176, 91, 0.08);
4022-
box-shadow: 0 22px 40px rgba(0, 0, 0, 0.3);
4011+
/* Solid background – no transparency */
4012+
background: var(--surface-color);
4013+
border: 2px solid var(--accent-border);
4014+
box-shadow: var(--shadow);
4015+
transition: transform 0.25s ease, box-shadow 0.25s ease;
4016+
backdrop-filter: none;
4017+
-webkit-backdrop-filter: none;
40234018
}
40244019

4025-
.project-card::before {
4026-
content: '';
4027-
position: absolute;
4028-
inset: 0;
4029-
background: linear-gradient(135deg, rgba(252, 176, 91, 0.12), transparent 38%, rgba(252, 176, 91, 0.08));
4030-
opacity: 0;
4031-
transition: opacity 0.22s ease;
4020+
.project-card:hover {
4021+
transform: translateY(-6px);
4022+
border-color: var(--accent-color);
4023+
box-shadow: 0 20px 35px rgba(0, 0, 0, 0.15);
40324024
}
40334025

4034-
.project-card:hover::before {
4035-
opacity: 1;
4026+
[data-theme="light"] .project-card {
4027+
background: #ffffff;
4028+
border-color: rgba(106, 191, 141, 0.4);
40364029
}
40374030

4038-
.project-card:hover {
4039-
transform: translateY(-8px);
4040-
border-color: var(--footer-card-color);
4041-
box-shadow: 0 30px 48px rgba(252, 176, 91, 0.15);
4031+
[data-theme="dark"] .project-card {
4032+
background: #1e1a18;
4033+
border-color: rgba(159, 221, 181, 0.3);
40424034
}
40434035

40444036
.card-icon {
@@ -4059,7 +4051,6 @@ body {
40594051
box-shadow: inset 0 1px 0 rgba(252, 176, 91, 0.08);
40604052
border-color: rgba(252, 176, 91, 0.1);
40614053
}
4062-
}
40634054

40644055
.project-card h3 {
40654056
font-family: 'Fredoka', sans-serif;
@@ -4203,4 +4194,38 @@ body {
42034194
.btn-play {
42044195
transform: none !important;
42054196
}
4197+
/* Fix card content alignment */
4198+
.project-card {
4199+
text-align: left;
4200+
align-items: flex-start;
4201+
}
4202+
4203+
.project-card h3,
4204+
.project-card p {
4205+
width: 100%;
4206+
text-align: left;
4207+
}
4208+
4209+
/* Ensure button is aligned to bottom of card */
4210+
.project-card .btn-play {
4211+
margin-top: auto;
4212+
align-self: flex-start;
4213+
}
4214+
4215+
/* Fix card icon alignment */
4216+
.card-icon {
4217+
display: flex;
4218+
align-items: center;
4219+
justify-content: center;
4220+
}
4221+
4222+
/* Fix grid gaps on small screens */
4223+
@media (max-width: 480px) {
4224+
.projects-grid {
4225+
gap: 1rem;
4226+
}
4227+
.project-card {
4228+
padding: 1rem;
4229+
}
42064230
}
4231+
}

0 commit comments

Comments
 (0)