Merge branch 'productdetails'
This commit is contained in:
anielsen99
commit
3628d7b31f
@ -12,15 +12,17 @@
|
||||
|
||||
.detail-page {
|
||||
min-height: 100vh;
|
||||
background: #efefef;
|
||||
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 {
|
||||
background: #f7f7f7;
|
||||
border: 1px solid #d6d6d6;
|
||||
padding: 22px;
|
||||
border-radius: 18px;
|
||||
padding: 38px;
|
||||
}
|
||||
|
||||
/* --- Product Detail Page Wrapper End --- */
|
||||
@ -61,6 +63,7 @@
|
||||
background: #ddd;
|
||||
aspect-ratio: 1 / 1;
|
||||
overflow: hidden;
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.detail-main-image img {
|
||||
@ -79,14 +82,20 @@
|
||||
.thumb-btn {
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
border: 1px solid #cfcfcf;
|
||||
border: none;
|
||||
border-radius: 18px;
|
||||
background: #fff;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.thumb-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.thumb-btn.active {
|
||||
outline: 2px solid #4da3ff;
|
||||
outline: 1px solid #ff6a00;
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
@ -129,6 +138,7 @@
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
/* -> habe ich durch Material Tags ersetzt, siehe weiter unten
|
||||
.structure-tags span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@ -138,11 +148,13 @@
|
||||
background: #ebebeb;
|
||||
font-size: 12px;
|
||||
}
|
||||
*/
|
||||
|
||||
.mood-box {
|
||||
margin-top: 18px;
|
||||
background: #dfdfdf;
|
||||
padding: 16px;
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.mood-label {
|
||||
@ -238,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 --- */
|
||||
@ -254,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 {
|
||||
@ -287,27 +302,55 @@
|
||||
/* --- Discovery Hinweis + Kaufen Button Start --- */
|
||||
|
||||
.discovery-note {
|
||||
background: #050505;
|
||||
background-color: #1f1f1f;
|
||||
color: #fff;
|
||||
padding: 14px 16px;
|
||||
border-radius: 18px;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.discovery-note strong {
|
||||
.discovery-note-text strong {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.discovery-note p {
|
||||
.discovery-note-text p {
|
||||
font-size: 11px;
|
||||
color: rgba(255, 255, 255, 0.78);
|
||||
color: #d0d0d0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.discovery-note-btn {
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
background-color: #ff6a00;
|
||||
color: #fff;
|
||||
padding: 12px 18px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
margin-left: auto;
|
||||
flex-shrink: 0;
|
||||
transition: transform 0.2s ease, opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.discovery-note-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.discovery-note-btn:active {
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
|
||||
background: rgba(255, 106, 0, 0.8);
|
||||
}
|
||||
|
||||
.buy-button {
|
||||
width: 100%;
|
||||
border: none;
|
||||
background: #050505;
|
||||
border-radius: 999px;
|
||||
background: #ff6a00;
|
||||
color: #fff;
|
||||
padding: 18px;
|
||||
font-size: 16px;
|
||||
@ -315,6 +358,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 --- */
|
||||
@ -334,67 +387,57 @@
|
||||
|
||||
/* --- Description Columns End --- */
|
||||
|
||||
/* --- Bottom Upsell Bar Start --- */
|
||||
|
||||
.detail-upsell-bar {
|
||||
margin-top: auto;
|
||||
background: #060606;
|
||||
color: #fff;
|
||||
padding: 12px 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.detail-upsell-bar strong {
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.detail-upsell-bar p {
|
||||
font-size: 11px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* --- Bottom Upsell Bar End --- */
|
||||
|
||||
/* --- Bottom CTA Start --- */
|
||||
|
||||
.detail-bottom-cta {
|
||||
margin-top: 42px;
|
||||
padding: 42px 20px 16px;
|
||||
border-top: 1px solid #d4d4d4;
|
||||
text-align: center;
|
||||
margin-top: 40px;
|
||||
padding: 40px 38px;
|
||||
background-color: #ff6a00;
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
.detail-bottom-cta h2 {
|
||||
margin: 0 0 14px;
|
||||
font-size: 34px;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
font-size: 42px;
|
||||
line-height: 0.95;
|
||||
font-weight: 300;
|
||||
letter-spacing: -0.04em;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.detail-bottom-cta p {
|
||||
max-width: 880px;
|
||||
margin: 0 auto;
|
||||
color: #333;
|
||||
line-height: 1.7;
|
||||
margin-top: 18px;
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
color: #fff;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.detail-bottom-actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
margin-top: 26px;
|
||||
}
|
||||
|
||||
.detail-bottom-actions button {
|
||||
border: 1px solid #101010;
|
||||
background: transparent;
|
||||
padding: 16px 24px;
|
||||
min-width: 250px;
|
||||
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;
|
||||
color: #ff6a00;
|
||||
}
|
||||
|
||||
.detail-bottom-actions button:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.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 --- */
|
||||
|
||||
@ -83,7 +83,7 @@ function ProductDetailPage({ perfumeSlug = "kalter-beton" }) {
|
||||
|
||||
<div className="structure-block">
|
||||
<span className="structure-phase">PHASE 1: TOP NOTES (0–1 H)</span>
|
||||
<div className="structure-tags">
|
||||
<div className="material-tags">
|
||||
{perfume.phases.top.map((note) => (
|
||||
<span key={note}>{note}</span>
|
||||
))}
|
||||
@ -92,7 +92,7 @@ function ProductDetailPage({ perfumeSlug = "kalter-beton" }) {
|
||||
|
||||
<div className="structure-block">
|
||||
<span className="structure-phase">PHASE 2: HEART NOTES (1–4 H)</span>
|
||||
<div className="structure-tags">
|
||||
<div className="material-tags">
|
||||
{perfume.phases.heart.map((note) => (
|
||||
<span key={note}>{note}</span>
|
||||
))}
|
||||
@ -101,7 +101,7 @@ function ProductDetailPage({ perfumeSlug = "kalter-beton" }) {
|
||||
|
||||
<div className="structure-block">
|
||||
<span className="structure-phase">PHASE 3: BASE NOTES (4 H+)</span>
|
||||
<div className="structure-tags">
|
||||
<div className="material-tags">
|
||||
{perfume.phases.base.map((note) => (
|
||||
<span key={note}>{note}</span>
|
||||
))}
|
||||
@ -167,11 +167,17 @@ function ProductDetailPage({ perfumeSlug = "kalter-beton" }) {
|
||||
</div>
|
||||
|
||||
<div className="discovery-note">
|
||||
<strong>Discovery Set wird angerechnet</strong>
|
||||
<p>
|
||||
Hast du das Discovery Set gekauft, wird der volle Preis beim Kauf
|
||||
automatisch abgezogen.
|
||||
</p>
|
||||
<div className="discovery-note-text">
|
||||
<strong>Discovery Set wird angerechnet</strong>
|
||||
<p>
|
||||
Hast du das Discovery Set gekauft, wird der volle Preis beim Kauf
|
||||
automatisch abgezogen.
|
||||
</p>
|
||||
</div>
|
||||
<button className="discovery-note-btn" type="button">
|
||||
Zum Set
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
<button className="buy-button" type="button">
|
||||
@ -199,14 +205,6 @@ function ProductDetailPage({ perfumeSlug = "kalter-beton" }) {
|
||||
<p>{perfume.edition}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="detail-upsell-bar">
|
||||
<div>
|
||||
<strong>Noch unsicher?</strong>
|
||||
<p>Discovery Set bestellen und Düfte testen</p>
|
||||
</div>
|
||||
<span>—</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user