diff --git a/parfum-shop/src/App.css b/parfum-shop/src/App.css index 9366ba2..44dfbd6 100644 --- a/parfum-shop/src/App.css +++ b/parfum-shop/src/App.css @@ -1,13 +1,7 @@ -* { - box-sizing: border-box; -} - html, body, #root { - margin: 0; min-height: 100%; - font-family: "Questrial", Arial, Helvetica, sans-serif; } #root { @@ -55,7 +49,7 @@ main { top: clamp(0.75rem, 2.1vw, 1.4rem); right: 0; left: 0; - z-index: 998; + z-index: var(--z-nav); margin-bottom: 0; padding-top: 0; pointer-events: none; @@ -74,11 +68,14 @@ main { .navbar--light .nav-pill, .navbar--light .nav-link, .shell, -[class*="-page"], -[class*="-shell"], -[class*="-card"], -[class*="-panel"], -[class*="-box"], +.page, +.detail-page, +.discovery-page, +.about-page, +.support-page, +.small-page, +.impressum-page, +.datenschutz-page, button, input, textarea, diff --git a/parfum-shop/src/components/Footer.css b/parfum-shop/src/components/Footer.css index 47f7d48..d74bf15 100644 --- a/parfum-shop/src/components/Footer.css +++ b/parfum-shop/src/components/Footer.css @@ -45,7 +45,7 @@ .site-footer__logo { width: fit-content; - color: #fff; + color: var(--theme-accent-contrast); font-size: clamp(1rem, 1.5vw, 1.2rem); letter-spacing: 0.22em; text-decoration: none; @@ -104,7 +104,7 @@ transform: translateX(0.25rem); } -@media (max-width: 900px) { +@media (max-width: 1023px) { .site-footer__inner { grid-template-columns: 1fr 1fr; } @@ -114,7 +114,7 @@ } } -@media (max-width: 640px) { +@media (max-width: 767px) { .site-footer__inner { grid-template-columns: 1fr; } diff --git a/parfum-shop/src/components/ProductDetailPage.css b/parfum-shop/src/components/ProductDetailPage.css index 2946939..3f8b3f3 100644 --- a/parfum-shop/src/components/ProductDetailPage.css +++ b/parfum-shop/src/components/ProductDetailPage.css @@ -926,26 +926,36 @@ grid-template-columns: 1fr; } + .structure-timeline, + .recommendation-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media (max-width: 1023px) { .product-hero { - grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.72fr); - align-items: center; - min-height: 100svh; - padding-top: clamp(5.6rem, 9vw, 7.4rem); - padding-bottom: clamp(1rem, 2vw, 1.6rem); + grid-template-columns: 1fr; + align-content: start; + align-items: start; + gap: clamp(1rem, 2.5vw, 1.5rem); + min-height: auto; + padding-top: clamp(6rem, 10vw, 7.5rem); + padding-bottom: clamp(2.5rem, 5vw, 4rem); } - .product-media-column { + .product-media-column, + .product-purchase-panel { grid-column: 1; - grid-row: 1; + grid-row: auto; } .product-media-column { min-height: 0; display: grid; grid-template-columns: 1fr; - grid-template-rows: auto minmax(0, 1fr) auto auto; - gap: clamp(0.65rem, 1.4vw, 1rem); - align-self: stretch; + grid-template-rows: auto auto auto auto; + gap: clamp(0.8rem, 2vw, 1.25rem); + align-self: auto; place-items: stretch; } @@ -955,15 +965,20 @@ margin-bottom: 0; } + .product-hero-copy h1 { + max-width: 12ch; + font-size: clamp(2.4rem, 6.8vw, 4.8rem); + } + .product-hero-visual { grid-column: auto; grid-row: auto; min-height: 0; - height: min(42svh, 420px); + height: clamp(18rem, 48svh, 32rem); } .product-hero-image { - width: min(74%, 430px); + width: min(74%, 460px); max-height: 100%; } @@ -971,7 +986,7 @@ .hero-fact-grid { position: static; width: auto; - margin-top: var(--gap-sm); + margin-top: 0; transform: none; } @@ -980,8 +995,8 @@ } .thumb-btn { - width: clamp(3.6rem, 6vw, 4.8rem); - height: clamp(3.6rem, 6vw, 4.8rem); + width: clamp(3.6rem, 8vw, 4.8rem); + height: clamp(3.6rem, 8vw, 4.8rem); } .hero-fact-grid { @@ -1002,28 +1017,18 @@ .hero-fact-grid p { font-size: var(--text-sm); line-height: 1.38; + overflow-wrap: anywhere; } .product-purchase-panel { - grid-column: 2; - grid-row: 1; - position: relative; justify-self: stretch; - align-self: center; - width: 100%; + align-self: auto; + width: min(100%, 46rem); + max-width: 46rem; max-height: none; + margin-inline: auto; overflow: visible; - gap: var(--gap-xs); - } - - .product-hero-copy h1 { - max-width: 12ch; - font-size: clamp(2.4rem, 5.5vw, 4.6rem); - } - - .structure-timeline, - .recommendation-grid { - grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: var(--gap-sm); } } @@ -1035,10 +1040,10 @@ .product-hero { grid-template-columns: 1fr; align-content: start; - gap: clamp(0.5rem, 1.8vw, 0.8rem); - min-height: 100svh; - padding-top: clamp(6.7rem, 20vw, 7.25rem); - padding-bottom: clamp(0.75rem, 2.4vw, 1rem); + gap: clamp(0.65rem, 2vw, 1rem); + min-height: auto; + padding-top: clamp(6.4rem, 18vw, 7.25rem); + padding-bottom: clamp(1.5rem, 5vw, 2.5rem); } .product-media-column, @@ -1048,12 +1053,12 @@ } .product-hero-visual { - height: min(29svh, 250px); - min-height: 198px; + height: clamp(13rem, 32svh, 18rem); + min-height: 0; } .product-hero-image { - width: min(74%, 292px); + width: min(68%, 280px); } .character-facts, @@ -1091,10 +1096,11 @@ .thumb-btn { width: clamp(2.8rem, 11vw, 3.25rem); height: clamp(2.8rem, 11vw, 3.25rem); + min-width: var(--touch-target-min); } .product-thumbs { - margin-top: -0.6rem; + margin-top: 0.2rem; } .hero-fact-grid { @@ -1108,12 +1114,12 @@ .hero-fact-grid span { margin-bottom: 0.25rem; - font-size: 0.58rem; + font-size: clamp(0.65rem, 2vw, var(--text-xs)); letter-spacing: 0.09em; } .hero-fact-grid p { - font-size: 0.72rem; + font-size: clamp(0.78rem, 2.5vw, var(--text-sm)); line-height: 1.22; overflow-wrap: anywhere; } @@ -1133,6 +1139,7 @@ } .size-card { + min-width: 0; min-height: 70px; gap: 0.2rem; padding: 0.6rem 0.7rem; @@ -1145,6 +1152,8 @@ .size-card strong { font-size: 0.98rem; + white-space: normal; + overflow-wrap: anywhere; } .size-card small, @@ -1154,7 +1163,7 @@ .purchase-actions .atmos-btn, .restock-button { - min-height: 38px; + min-height: var(--touch-target-min); font-size: 0.72rem; } @@ -1188,6 +1197,12 @@ } } +@media (max-width: 640px) { + .product-thumbs { + display: none; + } +} + @media (max-width: 480px) { .product-hero-copy h1 { font-size: clamp(1.95rem, 10.2vw, 2.85rem); diff --git a/parfum-shop/src/components/SharedNavbar.jsx b/parfum-shop/src/components/SharedNavbar.jsx index 9c56ec1..10061a1 100644 --- a/parfum-shop/src/components/SharedNavbar.jsx +++ b/parfum-shop/src/components/SharedNavbar.jsx @@ -4,10 +4,11 @@ import { useTheme } from "../theme/useTheme"; import "../style/navbar.css"; function SharedNavbar({ variant = "hero", active = "", brandMode = "logo" }) { - const { cart, openCart, openProfile, user } = useShop(); + const { cart, openCart, openProfile, panelOpen, panelType, user } = useShop(); const { isLight, toggleTheme } = useTheme(); const cartCount = cart.total_quantity || 0; const cartLabel = cartCount > 0 ? `Warenkorb ${cartCount}` : "Warenkorb"; + const cartCompactLabel = cartCount > 0 ? `Korb ${cartCount}` : "Korb"; const cartAriaLabel = cartCount > 0 ? `Warenkorb mit ${cartCount} ${cartCount === 1 ? "Artikel" : "Artikeln"} öffnen` @@ -44,18 +45,25 @@ function SharedNavbar({ variant = "hero", active = "", brandMode = "logo" }) { - {item.quantity} - - + return ( +
+
+

{productName}

+

+ {item.product.size_label} · {formatChf(item.product.price_cents)} +

+
- -
- ))} +
+ + {item.quantity} + +
+ + + + ); + })} )} @@ -240,21 +291,29 @@ function CartPanel() { updateAddress("street_name", value)} /> updateAddress("house_number", value)} /> updateAddress("zip_code", value)} /> updateAddress("city", value)} /> @@ -262,24 +321,37 @@ function CartPanel() {
Zahlung -
- {paymentMethods.map((method) => { - const active = paymentMethod === method.key; - return ( - - ); - })} -
+
+ Zahlungsmethode +
+ {paymentMethods.map((method) => { + const active = paymentMethod === method.key; + return ( + + ); + })} +
+
@@ -311,7 +383,7 @@ function CartPanel() {
- {error &&

{error}

} + {error}