diff --git a/parfum-shop/src/components/ProductDetailPage.css b/parfum-shop/src/components/ProductDetailPage.css index 9586aa3..807f301 100644 --- a/parfum-shop/src/components/ProductDetailPage.css +++ b/parfum-shop/src/components/ProductDetailPage.css @@ -138,6 +138,7 @@ gap: 6px; } +/* -> habe ich durch Material Tags ersetzt, siehe weiter unten .structure-tags span { display: inline-flex; align-items: center; @@ -147,11 +148,13 @@ background: #ebebeb; font-size: 12px; } +*/ .mood-box { margin-top: 18px; background: #dfdfdf; padding: 16px; + border-radius: 18px; } .mood-label { @@ -247,8 +250,10 @@ min-height: 34px; padding: 8px 14px; border: 1px solid #d2d2d2; - background: #ebebeb; + border-radius: 999px; + background: transparent; font-size: 12px; + user-select: none; } /* --- Material Tags End --- */ @@ -263,14 +268,15 @@ .size-card { border: 1px solid #d0d0d0; - background: #fefefe; + border-radius: 18px; + background: #fff; padding: 18px; text-align: center; cursor: pointer; } .size-card.active { - border-color: #111; + border-color: #ff6a00; } .size-title { @@ -296,9 +302,10 @@ /* --- Discovery Hinweis + Kaufen Button Start --- */ .discovery-note { - background: #050505; + background-color: #1f1f1f; color: #fff; padding: 14px 16px; + border-radius: 18px; } .discovery-note strong { @@ -309,14 +316,15 @@ .discovery-note p { font-size: 11px; - color: rgba(255, 255, 255, 0.78); + color: #d0d0d0; margin: 0; } .buy-button { width: 100%; border: none; - background: #050505; + border-radius: 999px; + background: #ff6a00; color: #fff; padding: 18px; font-size: 16px; @@ -324,6 +332,16 @@ cursor: pointer; } +.buy-button:hover { + transform: translateY(-1px); + box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); +} + +.buy-button:active { + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); + background: rgba(255, 106, 0, 0.8); +} + /* --- Discovery Hinweis + Kaufen Button End --- */ /* --- Description Columns Start --- */ @@ -347,12 +365,13 @@ .detail-upsell-bar { margin-top: auto; - background: #060606; + background-color: #1f1f1f; color: #fff; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; + border-radius: 999px; } .detail-upsell-bar strong { @@ -372,7 +391,7 @@ /* --- Bottom CTA Start --- */ .detail-bottom-cta { - margin: 20px; + margin-top: 40px; padding: 40px 38px; background-color: #ff6a00; border-radius: 24px; diff --git a/parfum-shop/src/components/ProductDetailPage.jsx b/parfum-shop/src/components/ProductDetailPage.jsx index 6a3e418..040b91a 100644 --- a/parfum-shop/src/components/ProductDetailPage.jsx +++ b/parfum-shop/src/components/ProductDetailPage.jsx @@ -83,7 +83,7 @@ function ProductDetailPage({ perfumeSlug = "kalter-beton" }) {