match colors

This commit is contained in:
anielsen99 2026-03-27 22:49:07 +01:00
parent 3628d7b31f
commit a524a5d36a
3 changed files with 19 additions and 19 deletions

View File

@ -92,12 +92,12 @@
.btn-primary { .btn-primary {
background: #ff6a00; background: #ff6a00;
color: white; color: #fff;
} }
.btn-secondary { .btn-secondary {
background: rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.15);
color: white; color: #fff;
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
} }
@ -119,7 +119,7 @@
line-height: 0.95; line-height: 0.95;
font-weight: 300; font-weight: 300;
letter-spacing: -0.04em; letter-spacing: -0.04em;
color: #1d1d1d; color: #1f1f1f;
} }
/* --------------------------------------------------- */ /* --------------------------------------------------- */
@ -258,7 +258,7 @@
max-width: 170px; max-width: 170px;
font-size: 15px; font-size: 15px;
line-height: 1.35; line-height: 1.35;
color: #444; color: #5f5f5f;
} }
.arrow { .arrow {
@ -302,7 +302,7 @@
grid-template-columns: 600px 1fr; grid-template-columns: 600px 1fr;
gap: 28px; gap: 28px;
align-items: center; align-items: center;
background-color: #ff6a00; background: #ff6a00;
margin: 20px; margin: 20px;
border-radius: 24px; border-radius: 24px;
padding: 40px 38px; padding: 40px 38px;
@ -331,7 +331,7 @@
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
transition: transform 0.2s ease, opacity 0.2s ease; transition: transform 0.2s ease, opacity 0.2s ease;
background-color: #fff; background: #fff;
color: #ff6a00; color: #ff6a00;
} }

View File

@ -2,7 +2,7 @@ import LandingPage from "./pages/LandingPage";
import ProductDetailPage from "./components/ProductDetailPage"; import ProductDetailPage from "./components/ProductDetailPage";
function App() { function App() {
const showDetailPage = false; const showDetailPage = true;
if (showDetailPage) { if (showDetailPage) {
return <ProductDetailPage perfumeSlug="kalter-beton" />; return <ProductDetailPage perfumeSlug="kalter-beton" />;

View File

@ -12,7 +12,7 @@
.detail-page { .detail-page {
min-height: 100vh; min-height: 100vh;
color: #191919; color: #1f1f1f;
padding: 38px; padding: 38px;
background: background:
linear-gradient(to right, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.1)), linear-gradient(to right, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.1)),
@ -20,7 +20,8 @@
} }
.detail-shell { .detail-shell {
background: #f7f7f7; background: #f5f5f5;
border: 1px solid #d9d9d9;
border-radius: 18px; border-radius: 18px;
padding: 38px; padding: 38px;
} }
@ -36,7 +37,7 @@
margin-bottom: 18px; margin-bottom: 18px;
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
color: #222; color: #1f1f1f;
} }
/* --- Back Link End --- */ /* --- Back Link End --- */
@ -60,7 +61,7 @@
} }
.detail-main-image { .detail-main-image {
background: #ddd; background: #d9d9d9;
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
overflow: hidden; overflow: hidden;
border-radius: 18px; border-radius: 18px;
@ -217,7 +218,7 @@
.detail-heading p { .detail-heading p {
font-size: 22px; font-size: 22px;
color: #3f3f3f; color: #5f5f5f;
margin: 0; margin: 0;
} }
@ -231,7 +232,7 @@
margin-bottom: 10px; margin-bottom: 10px;
font-size: 11px; font-size: 11px;
letter-spacing: 0.24em; letter-spacing: 0.24em;
color: #666; color: #5f5f5f;
} }
/* --- Right Column End --- */ /* --- Right Column End --- */
@ -294,7 +295,7 @@
.size-card small { .size-card small {
font-size: 11px; font-size: 11px;
color: #666; color: #5f5f5f;
} }
/* --- Size Selection End --- */ /* --- Size Selection End --- */
@ -302,7 +303,7 @@
/* --- Discovery Hinweis + Kaufen Button Start --- */ /* --- Discovery Hinweis + Kaufen Button Start --- */
.discovery-note { .discovery-note {
background-color: #1f1f1f; background: #1f1f1f;
color: #fff; color: #fff;
padding: 14px 16px; padding: 14px 16px;
border-radius: 18px; border-radius: 18px;
@ -326,7 +327,7 @@
.discovery-note-btn { .discovery-note-btn {
border: none; border: none;
border-radius: 999px; border-radius: 999px;
background-color: #ff6a00; background: #ff6a00;
color: #fff; color: #fff;
padding: 12px 18px; padding: 12px 18px;
font-size: 14px; font-size: 14px;
@ -380,7 +381,6 @@
.detail-copy-block p { .detail-copy-block p {
white-space: pre-line; white-space: pre-line;
color: #2b2b2b;
line-height: 1.55; line-height: 1.55;
margin: 0; margin: 0;
} }
@ -392,7 +392,7 @@
.detail-bottom-cta { .detail-bottom-cta {
margin-top: 40px; margin-top: 40px;
padding: 40px 38px; padding: 40px 38px;
background-color: #ff6a00; background: #ff6a00;
border-radius: 24px; border-radius: 24px;
} }
@ -426,7 +426,7 @@
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
transition: transform 0.2s ease, opacity 0.2s ease; transition: transform 0.2s ease, opacity 0.2s ease;
background-color: #fff; background: #fff;
color: #ff6a00; color: #ff6a00;
} }