hasicicsalih/parfum_agsd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add rounded edges to shell and images

Browse Source
This commit is contained in:
anielsen99 2026-03-27 17:52:18 +01:00
parent 367ae871a0
commit 955b982a5a
1 changed files with 32 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
parfum-shop/src/components/ProductDetailPage.css
View File

@ -12,15 +12,17 @@
.detail-page { .detail-page {
min-height: 100vh; min-height: 100vh;
background: #efefef;
color: #191919; color: #191919;
padding: 20px; padding: 38px;
background:
linear-gradient(to right, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.1)),
linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.45));
} }
.detail-shell { .detail-shell {
background: #f7f7f7; background: #f7f7f7;
border: 1px solid #d6d6d6; border-radius: 18px;
padding: 22px; padding: 38px;
} }
/* --- Product Detail Page Wrapper End --- */ /* --- Product Detail Page Wrapper End --- */
@ -61,6 +63,7 @@
background: #ddd; background: #ddd;
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
overflow: hidden; overflow: hidden;
border-radius: 18px;
} }
.detail-main-image img { .detail-main-image img {
@ -79,14 +82,20 @@
.thumb-btn { .thumb-btn {
width: 88px; width: 88px;
height: 88px; height: 88px;
border: 1px solid #cfcfcf; border: none;
border-radius: 18px;
background: #fff; background: #fff;
padding: 0; padding: 0;
cursor: pointer; cursor: pointer;
} }
.thumb-btn:hover {
transform: translateY(-1px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}
.thumb-btn.active { .thumb-btn.active {
outline: 2px solid #4da3ff; outline: 1px solid #ff6a00;
outline-offset: 1px; outline-offset: 1px;
} }
@ -364,15 +373,14 @@
.detail-bottom-cta { .detail-bottom-cta {
margin: 20px; margin: 20px;
margin-top: 42px;
padding: 40px 38px; padding: 40px 38px;
background-color: #ff6a00; background-color: #ff6a00;
border-radius: 24px; border-radius: 24px;
} }
.detail-bottom-cta h2 { .detail-bottom-cta h2 {
margin: 0 0 14px; margin: 0;
font-size: 52px; font-size: 42px;
line-height: 0.95; line-height: 0.95;
font-weight: 300; font-weight: 300;
letter-spacing: -0.04em; letter-spacing: -0.04em;
@ -380,8 +388,8 @@
} }
.detail-bottom-cta p { .detail-bottom-cta p {
margin: 0 auto; margin-top: 18px;
font-size: 18px; font-size: 15px;
line-height: 1.5; line-height: 1.5;
color: #fff; color: #fff;
line-height: 1.5; line-height: 1.5;
@ -394,19 +402,24 @@
} }
.detail-bottom-actions button { .detail-bottom-actions button {
border: none;
border-radius: 999px;
padding: 12px 18px;
font-size: 14px;
cursor: pointer;
transition: transform 0.2s ease, opacity 0.2s ease;
background-color: #fff; background-color: #fff;
color: #ff6a00; color: #ff6a00;
border-radius: 999px;
border: none;
padding: 16px 28px;
cursor: pointer;
transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
} }
.detail-bottom-actions button:hover { .detail-bottom-actions button:hover {
background: rgba(255, 255, 255, 0.4); transform: translateY(-1px);
transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); }
.detail-bottom-actions button:active {
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
background: rgba(255, 255, 255, 0.8);
} }
/* --- Bottom CTA End --- */ /* --- Bottom CTA End --- */