Refine product detail layout and add delivery information section
This commit is contained in:
parent
feeebf6f2d
commit
012505e7bb
@ -3,7 +3,7 @@
|
||||
.detail-page {
|
||||
min-height: 100vh;
|
||||
color: #1f1f1f;
|
||||
padding: 38px;
|
||||
padding: 26px 38px 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));
|
||||
@ -13,21 +13,71 @@
|
||||
background: #f5f5f5;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 0px;
|
||||
padding: 38px;
|
||||
padding: 0 38px 38px;
|
||||
}
|
||||
|
||||
/* --- Product Detail Page Wrapper End --- */
|
||||
|
||||
/* --- Topbar Start --- */
|
||||
|
||||
.detail-topbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
min-height: 72px;
|
||||
padding: 18px 0;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.detail-topbar-meta {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.detail-topbar-label {
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.22em;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.detail-topbar-name {
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.16em;
|
||||
color: #1f1f1f;
|
||||
}
|
||||
|
||||
/* --- Topbar End --- */
|
||||
|
||||
/* --- Back Link Start --- */
|
||||
|
||||
.back-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin-bottom: 18px;
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
color: #1f1f1f;
|
||||
letter-spacing: 0.01em;
|
||||
transition: opacity 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
opacity: 0.65;
|
||||
transform: translateX(-2px);
|
||||
}
|
||||
|
||||
.back-link-arrow {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* --- Back Link End --- */
|
||||
@ -129,18 +179,6 @@
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
/* -> habe ich durch Material Tags ersetzt, siehe weiter unten
|
||||
.structure-tags span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 34px;
|
||||
padding: 8px 14px;
|
||||
border: 1px solid #d2d2d2;
|
||||
background: #ebebeb;
|
||||
font-size: 12px;
|
||||
}
|
||||
*/
|
||||
|
||||
.mood-box {
|
||||
margin-top: 18px;
|
||||
background: #dfdfdf;
|
||||
@ -194,20 +232,38 @@
|
||||
.detail-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 22px;
|
||||
gap: 28px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.detail-heading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding-bottom: 6px;
|
||||
border-bottom: 1px solid #e2e2e2;
|
||||
}
|
||||
|
||||
.detail-kicker {
|
||||
display: inline-block;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.24em;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.detail-heading h1 {
|
||||
margin: 0 0 6px;
|
||||
font-size: 52px;
|
||||
line-height: 0.95;
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.04em;
|
||||
margin: 0;
|
||||
font-size: 56px;
|
||||
line-height: 0.92;
|
||||
font-weight: 300;
|
||||
letter-spacing: -0.045em;
|
||||
color: #131313;
|
||||
}
|
||||
|
||||
.detail-heading p {
|
||||
font-size: 22px;
|
||||
max-width: 520px;
|
||||
font-size: 18px;
|
||||
line-height: 1.45;
|
||||
color: #5f5f5f;
|
||||
margin: 0;
|
||||
}
|
||||
@ -215,20 +271,60 @@
|
||||
.detail-section-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.label-title {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
font-size: 11px;
|
||||
margin-bottom: 0;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.24em;
|
||||
color: #5f5f5f;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* --- Description Section Start --- */
|
||||
|
||||
.detail-description-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.detail-columns {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 22px 30px;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.detail-copy-block {
|
||||
padding-top: 14px;
|
||||
border-top: 1px solid #dfdfdf;
|
||||
}
|
||||
|
||||
.detail-copy-label {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.24em;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.detail-copy-block p {
|
||||
white-space: pre-line;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
color: #1f1f1f;
|
||||
}
|
||||
|
||||
/* --- Description Section End --- */
|
||||
|
||||
/* --- Delivery Box Start --- */
|
||||
|
||||
.delivery-box {
|
||||
margin-top: 8px;
|
||||
margin-top: 4px;
|
||||
padding: 20px;
|
||||
border: 1px solid #d9d9d9;
|
||||
background: #efefef;
|
||||
@ -326,9 +422,15 @@
|
||||
border: 1px solid #d0d0d0;
|
||||
border-radius: 0px;
|
||||
background: #fff;
|
||||
padding: 18px;
|
||||
padding: 20px 18px 18px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
|
||||
}
|
||||
|
||||
.size-card:hover {
|
||||
transform: translateY(-1px);
|
||||
border-color: #bdbdbd;
|
||||
}
|
||||
|
||||
.size-card.active {
|
||||
@ -337,20 +439,23 @@
|
||||
|
||||
.size-title {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-size: 13px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.02em;
|
||||
color: #1f1f1f;
|
||||
}
|
||||
|
||||
.size-card strong {
|
||||
display: block;
|
||||
font-size: 28px;
|
||||
font-size: 26px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 6px;
|
||||
margin-bottom: 8px;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
|
||||
.size-card small {
|
||||
font-size: 11px;
|
||||
color: #5f5f5f;
|
||||
color: #6a6a6a;
|
||||
}
|
||||
|
||||
/* --- Size Selection End --- */
|
||||
@ -360,34 +465,38 @@
|
||||
.discovery-note {
|
||||
background: #1f1f1f;
|
||||
color: #fff;
|
||||
padding: 14px 16px;
|
||||
padding: 16px 16px;
|
||||
border-radius: 0px;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.discovery-note-text strong {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.discovery-note-text p {
|
||||
font-size: 11px;
|
||||
line-height: 1.45;
|
||||
color: #d0d0d0;
|
||||
margin: 0;
|
||||
max-width: 420px;
|
||||
}
|
||||
|
||||
.discovery-note-btn {
|
||||
border: none;
|
||||
border-radius: 18px;
|
||||
border-radius: 999px;
|
||||
background: #ff6a00;
|
||||
color: #fff;
|
||||
padding: 12px 18px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
margin-left: auto;
|
||||
margin-left: auto;
|
||||
flex-shrink: 0;
|
||||
transition: transform 0.2s ease, opacity 0.2s ease;
|
||||
}
|
||||
@ -409,9 +518,10 @@
|
||||
background: #ff6a00;
|
||||
color: #fff;
|
||||
padding: 18px;
|
||||
font-size: 16px;
|
||||
letter-spacing: 0.08em;
|
||||
font-size: 15px;
|
||||
letter-spacing: 0.12em;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
|
||||
}
|
||||
|
||||
.buy-button:hover {
|
||||
@ -426,22 +536,6 @@
|
||||
|
||||
/* --- Discovery Hinweis + Kaufen Button End --- */
|
||||
|
||||
/* --- Description Columns Start --- */
|
||||
|
||||
.detail-columns {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 22px 30px;
|
||||
}
|
||||
|
||||
.detail-copy-block p {
|
||||
white-space: pre-line;
|
||||
line-height: 1.55;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* --- Description Columns End --- */
|
||||
|
||||
/* --- Bottom CTA Start --- */
|
||||
|
||||
.detail-bottom-cta {
|
||||
@ -465,7 +559,6 @@
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
color: #fff;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.detail-bottom-actions {
|
||||
@ -504,8 +597,16 @@
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.detail-info {
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.detail-heading h1 {
|
||||
font-size: 40px;
|
||||
font-size: 42px;
|
||||
}
|
||||
|
||||
.detail-heading p {
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -526,6 +627,35 @@
|
||||
.detail-thumbs {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.detail-topbar {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
min-height: auto;
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.detail-topbar-meta {
|
||||
text-align: left;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.detail-heading h1 {
|
||||
font-size: 34px;
|
||||
}
|
||||
|
||||
.detail-heading p {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.discovery-note {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.discovery-note-btn {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Responsive End --- */
|
||||
@ -52,9 +52,17 @@ function ProductDetailContent({ perfumeSlug }) {
|
||||
</nav>
|
||||
|
||||
<main className="detail-shell">
|
||||
<button className="back-link" type="button" onClick={() => navigate("/")}>
|
||||
← Zurück zur Startseite
|
||||
</button>
|
||||
<div className="detail-topbar">
|
||||
<button className="back-link" type="button" onClick={() => navigate("/")}>
|
||||
<span className="back-link-arrow">←</span>
|
||||
<span>Zurück zur Startseite</span>
|
||||
</button>
|
||||
|
||||
<div className="detail-topbar-meta">
|
||||
<span className="detail-topbar-label">DUFTDETAIL</span>
|
||||
<span className="detail-topbar-name">{perfume.name}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section className="detail-layout">
|
||||
<div className="detail-gallery">
|
||||
@ -133,6 +141,7 @@ function ProductDetailContent({ perfumeSlug }) {
|
||||
|
||||
<div className="detail-info">
|
||||
<div className="detail-heading">
|
||||
<span className="detail-kicker">Edition 04</span>
|
||||
<h1>{perfume.name}</h1>
|
||||
<p>{perfume.shortText}</p>
|
||||
</div>
|
||||
@ -182,25 +191,29 @@ function ProductDetailContent({ perfumeSlug }) {
|
||||
KAUFEN
|
||||
</button>
|
||||
|
||||
<div className="detail-columns">
|
||||
<div className="detail-copy-block">
|
||||
<span className="label-title">BESCHREIBUNG</span>
|
||||
<p>{perfume.description}</p>
|
||||
</div>
|
||||
<div className="detail-description-section">
|
||||
<span className="label-title">BESCHREIBUNG</span>
|
||||
|
||||
<div className="detail-copy-block">
|
||||
<span className="label-title">HERKUNFT</span>
|
||||
<p>{perfume.origin}</p>
|
||||
</div>
|
||||
<div className="detail-columns">
|
||||
<div className="detail-copy-block">
|
||||
<span className="detail-copy-label">PARFÜMERIE / STUDIO</span>
|
||||
<p>{perfume.description}</p>
|
||||
</div>
|
||||
|
||||
<div className="detail-copy-block">
|
||||
<span className="label-title">KONZENTRATION</span>
|
||||
<p>{perfume.concentration}</p>
|
||||
</div>
|
||||
<div className="detail-copy-block">
|
||||
<span className="detail-copy-label">HERKUNFT</span>
|
||||
<p>{perfume.origin}</p>
|
||||
</div>
|
||||
|
||||
<div className="detail-copy-block">
|
||||
<span className="label-title">EDITION</span>
|
||||
<p>{perfume.edition}</p>
|
||||
<div className="detail-copy-block">
|
||||
<span className="detail-copy-label">KONZENTRATION</span>
|
||||
<p>{perfume.concentration}</p>
|
||||
</div>
|
||||
|
||||
<div className="detail-copy-block">
|
||||
<span className="detail-copy-label">EDITION</span>
|
||||
<p>{perfume.edition}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -227,7 +240,6 @@ function ProductDetailContent({ perfumeSlug }) {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user