457 lines
7.2 KiB
CSS
457 lines
7.2 KiB
CSS
/*
|
|
Hallo im CSS,
|
|
ich versuche auch hier die Struktur sauber zu kommentieren, damit ihr nicht
|
|
im Styling-Dschungel verloren geht und schneller versteht, was wohin gehört.
|
|
|
|
Bei Bugs, kleinen Krisen oder emotionalem Kontrollverlust bitte
|
|
https://stackoverflow.com/questions konsultieren
|
|
oder fragt Salih oder eine KI eures Vertrauens.
|
|
*/
|
|
|
|
/* --- Product Detail Page Wrapper Start --- */
|
|
|
|
.detail-page {
|
|
min-height: 100vh;
|
|
color: #191919;
|
|
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-radius: 18px;
|
|
padding: 38px;
|
|
}
|
|
|
|
/* --- Product Detail Page Wrapper End --- */
|
|
|
|
/* --- Back Link Start --- */
|
|
|
|
.back-link {
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
margin-bottom: 18px;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
color: #222;
|
|
}
|
|
|
|
/* --- Back Link End --- */
|
|
|
|
/* --- Main Detail Layout Start --- */
|
|
|
|
.detail-layout {
|
|
display: grid;
|
|
grid-template-columns: 1.02fr 1fr;
|
|
gap: 28px;
|
|
align-items: start;
|
|
}
|
|
|
|
/* --- Main Detail Layout End --- */
|
|
|
|
/* --- Left Column / Gallery Start --- */
|
|
|
|
.detail-gallery {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.detail-main-image {
|
|
background: #ddd;
|
|
aspect-ratio: 1 / 1;
|
|
overflow: hidden;
|
|
border-radius: 18px;
|
|
}
|
|
|
|
.detail-main-image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
.detail-thumbs {
|
|
display: flex;
|
|
gap: 14px;
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.thumb-btn {
|
|
width: 88px;
|
|
height: 88px;
|
|
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: 1px solid #ff6a00;
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
.thumb-btn img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
/* --- Left Column / Gallery End --- */
|
|
|
|
/* --- Duftstruktur Start --- */
|
|
|
|
.detail-structure {
|
|
margin-top: 28px;
|
|
}
|
|
|
|
.detail-structure h3 {
|
|
font-size: 12px;
|
|
letter-spacing: 0.24em;
|
|
font-weight: 500;
|
|
margin: 0 0 14px;
|
|
}
|
|
|
|
.structure-block {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.structure-phase {
|
|
display: block;
|
|
margin-bottom: 6px;
|
|
font-size: 10px;
|
|
letter-spacing: 0.18em;
|
|
color: #555;
|
|
}
|
|
|
|
.structure-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
.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;
|
|
padding: 16px;
|
|
}
|
|
|
|
.mood-label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
font-size: 10px;
|
|
letter-spacing: 0.2em;
|
|
color: #555;
|
|
}
|
|
|
|
.mood-box p {
|
|
font-size: 15px;
|
|
line-height: 1.5;
|
|
margin: 0;
|
|
}
|
|
|
|
/* --- Duftstruktur End --- */
|
|
|
|
/* --- Meta Infos unter Duftstruktur Start --- */
|
|
|
|
.detail-meta-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1.5fr;
|
|
gap: 20px;
|
|
margin-top: 24px;
|
|
}
|
|
|
|
.detail-meta-grid span {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
font-size: 10px;
|
|
letter-spacing: 0.2em;
|
|
color: #666;
|
|
}
|
|
|
|
.detail-meta-grid p {
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
margin: 0;
|
|
}
|
|
|
|
/* --- Meta Infos unter Duftstruktur End --- */
|
|
|
|
/* --- Right Column Start --- */
|
|
|
|
.detail-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 22px;
|
|
}
|
|
|
|
.detail-heading h1 {
|
|
margin: 0 0 6px;
|
|
font-size: 52px;
|
|
line-height: 0.95;
|
|
font-weight: 400;
|
|
letter-spacing: -0.04em;
|
|
color: #131313;
|
|
}
|
|
|
|
.detail-heading p {
|
|
font-size: 22px;
|
|
color: #3f3f3f;
|
|
margin: 0;
|
|
}
|
|
|
|
.detail-section-block {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.label-title {
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
font-size: 11px;
|
|
letter-spacing: 0.24em;
|
|
color: #666;
|
|
}
|
|
|
|
/* --- Right Column End --- */
|
|
|
|
/* --- Material Tags Start --- */
|
|
|
|
.material-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.material-tags span {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: 34px;
|
|
padding: 8px 14px;
|
|
border: 1px solid #d2d2d2;
|
|
background: #ebebeb;
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* --- Material Tags End --- */
|
|
|
|
/* --- Size Selection Start --- */
|
|
|
|
.size-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 12px;
|
|
}
|
|
|
|
.size-card {
|
|
border: 1px solid #d0d0d0;
|
|
background: #fefefe;
|
|
padding: 18px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.size-card.active {
|
|
border-color: #111;
|
|
}
|
|
|
|
.size-title {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.size-card strong {
|
|
display: block;
|
|
font-size: 28px;
|
|
font-weight: 400;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.size-card small {
|
|
font-size: 11px;
|
|
color: #666;
|
|
}
|
|
|
|
/* --- Size Selection End --- */
|
|
|
|
/* --- Discovery Hinweis + Kaufen Button Start --- */
|
|
|
|
.discovery-note {
|
|
background: #050505;
|
|
color: #fff;
|
|
padding: 14px 16px;
|
|
}
|
|
|
|
.discovery-note strong {
|
|
display: block;
|
|
margin-bottom: 6px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.discovery-note p {
|
|
font-size: 11px;
|
|
color: rgba(255, 255, 255, 0.78);
|
|
margin: 0;
|
|
}
|
|
|
|
.buy-button {
|
|
width: 100%;
|
|
border: none;
|
|
background: #050505;
|
|
color: #fff;
|
|
padding: 18px;
|
|
font-size: 16px;
|
|
letter-spacing: 0.08em;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* --- 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;
|
|
color: #2b2b2b;
|
|
line-height: 1.55;
|
|
margin: 0;
|
|
}
|
|
|
|
/* --- 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: 20px;
|
|
padding: 40px 38px;
|
|
background-color: #ff6a00;
|
|
border-radius: 24px;
|
|
}
|
|
|
|
.detail-bottom-cta h2 {
|
|
margin: 0;
|
|
font-size: 42px;
|
|
line-height: 0.95;
|
|
font-weight: 300;
|
|
letter-spacing: -0.04em;
|
|
color: #fff;
|
|
}
|
|
|
|
.detail-bottom-cta p {
|
|
margin-top: 18px;
|
|
font-size: 15px;
|
|
line-height: 1.5;
|
|
color: #fff;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.detail-bottom-actions {
|
|
display: flex;
|
|
gap: 16px;
|
|
margin-top: 26px;
|
|
}
|
|
|
|
.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;
|
|
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 --- */
|
|
|
|
/* --- Responsive Start --- */
|
|
|
|
@media (max-width: 1100px) {
|
|
.detail-layout {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.detail-heading h1 {
|
|
font-size: 40px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.detail-columns,
|
|
.detail-meta-grid,
|
|
.size-grid,
|
|
.detail-bottom-actions {
|
|
grid-template-columns: 1fr;
|
|
display: grid;
|
|
}
|
|
|
|
.detail-bottom-actions button {
|
|
min-width: 100%;
|
|
}
|
|
|
|
.detail-thumbs {
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
|
|
/* --- Responsive End --- */ |