diff --git a/parfum-shop/server/dev.js b/parfum-shop/server/dev.js index 7abf711..7466e59 100644 --- a/parfum-shop/server/dev.js +++ b/parfum-shop/server/dev.js @@ -1,4 +1,11 @@ import { spawn } from "node:child_process"; +import path from "node:path"; + +const viteBin = path.join( + "node_modules", + ".bin", + process.platform === "win32" ? "vite.cmd" : "vite" +); const run = (name, command, args, env = {}) => { const child = spawn(command, args, { @@ -22,7 +29,7 @@ const run = (name, command, args, env = {}) => { }; const api = run("api", "node", ["server/index.js"], { API_PORT: "4174" }); -const vite = run("vite", "node_modules/.bin/vite", []); +const vite = run("vite", viteBin, []); const stop = () => { api.kill("SIGTERM"); diff --git a/parfum-shop/src/App.css b/parfum-shop/src/App.css index fd25b17..d540006 100644 --- a/parfum-shop/src/App.css +++ b/parfum-shop/src/App.css @@ -13,12 +13,26 @@ body, #root { background: var(--theme-bg); color: var(--theme-text); + min-width: 0; } body { background: var(--theme-bg); } +main { + min-width: 0; +} + +.page, +.detail-page, +.discovery-page, +.about-page, +.support-page, +.small-page { + isolation: isolate; +} + .navbar--light .nav-pill, .navbar--light .nav-link, [class*="-page"], @@ -29,7 +43,11 @@ body { button, input, textarea { - transition: background-color 0.24s ease, border-color 0.24s ease, color 0.24s ease; + transition: + background-color var(--duration-med) var(--ease-out), + border-color var(--duration-med) var(--ease-out), + color var(--duration-med) var(--ease-out), + box-shadow var(--duration-med) var(--ease-out); } body.theme-dark .navbar--light .nav-pill { diff --git a/parfum-shop/src/App.jsx b/parfum-shop/src/App.jsx index e9d27f7..ac50d50 100644 --- a/parfum-shop/src/App.jsx +++ b/parfum-shop/src/App.jsx @@ -30,7 +30,7 @@ function App() { const shouldFlushFooter = location.pathname === "/" || location.pathname.startsWith("/duft/"); - useScrollTextReveal(routeContentRef, [location.pathname]); + useScrollTextReveal(routeContentRef, location.pathname); useEffect(() => { if (typeof document === "undefined") return; diff --git a/parfum-shop/src/components/Footer.css b/parfum-shop/src/components/Footer.css index 9d68c69..ed62013 100644 --- a/parfum-shop/src/components/Footer.css +++ b/parfum-shop/src/components/Footer.css @@ -1,6 +1,10 @@ .site-footer { - margin-top: 40px; - background: #1f1f1f; + position: relative; + margin-top: 0; + overflow: hidden; + background: + radial-gradient(circle at 82% 10%, rgba(var(--theme-accent-rgb) / 0.15), transparent 22rem), + #171717; color: #f5f5f5; border-top: 1px solid rgba(255, 255, 255, 0.08); } @@ -9,76 +13,102 @@ margin-top: 0; } +.site-footer::before { + content: "ATMOS"; + position: absolute; + right: var(--page-x); + bottom: -0.16em; + color: rgba(255, 255, 255, 0.035); + font-size: clamp(5.5rem, 18vw, 20rem); + line-height: 0.8; + letter-spacing: 0; + pointer-events: none; +} + .site-footer__inner { - max-width: 1600px; + position: relative; + z-index: 1; + width: var(--container-wide); margin: 0 auto; - padding: 28px 20px 32px; + padding: clamp(2.4rem, 7vw, 6.5rem) 0 clamp(2.2rem, 5vw, 4.8rem); display: grid; - grid-template-columns: 1.4fr 1fr 1fr; - gap: 28px; + grid-template-columns: minmax(0, 1.4fr) minmax(12rem, 0.65fr) minmax(12rem, 0.75fr); + gap: var(--gap-lg); + align-items: start; } .site-footer__brand { display: flex; flex-direction: column; - gap: 12px; + gap: var(--gap-sm); } .site-footer__logo { - text-decoration: none; + width: fit-content; color: #fff; - font-size: 14px; + font-size: clamp(1rem, 1.5vw, 1.2rem); letter-spacing: 0.22em; + text-decoration: none; } .site-footer__text { + max-width: 32rem; margin: 0; - max-width: 320px; - font-size: 14px; - line-height: 1.6; - color: rgba(255, 255, 255, 0.72); + color: rgba(255, 255, 255, 0.7); + font-size: var(--text-base); + line-height: 1.65; } .site-footer__nav-group { display: flex; flex-direction: column; - gap: 12px; + gap: var(--gap-sm); + padding-top: 0.2rem; } .site-footer__heading { - font-size: 10px; + color: rgba(255, 255, 255, 0.52); + font-size: var(--text-xs); letter-spacing: 0.22em; text-transform: uppercase; - color: rgba(255, 255, 255, 0.5); } .site-footer__nav { display: flex; flex-direction: column; - gap: 10px; + gap: 0.72rem; } .site-footer__nav a { - text-decoration: none; + width: fit-content; color: #f5f5f5; - font-size: 14px; - transition: opacity 0.2s ease, transform 0.2s ease; + font-size: var(--text-sm); + line-height: 1.2; + text-decoration: none; + transition: + color var(--duration-med) var(--ease-out), + opacity var(--duration-med) var(--ease-out), + transform var(--duration-med) var(--ease-out); } -.site-footer__nav a:hover { - opacity: 0.7; - transform: translateX(2px); +.site-footer__nav a:hover, +.site-footer__nav a:focus-visible { + color: var(--theme-accent); + transform: translateX(0.25rem); } @media (max-width: 900px) { .site-footer__inner { grid-template-columns: 1fr 1fr; } + + .site-footer__brand { + grid-column: 1 / -1; + } } @media (max-width: 640px) { .site-footer__inner { grid-template-columns: 1fr; - padding: 24px 16px 28px; } } diff --git a/parfum-shop/src/components/ProductDetailPage.css b/parfum-shop/src/components/ProductDetailPage.css index 36cfbb8..66c542f 100644 --- a/parfum-shop/src/components/ProductDetailPage.css +++ b/parfum-shop/src/components/ProductDetailPage.css @@ -509,7 +509,7 @@ font-size: 56px; line-height: 0.92; font-weight: 300; - letter-spacing: -0.045em; + letter-spacing: 0; color: var(--theme-text); } @@ -751,7 +751,7 @@ font-size: 34px; line-height: 1; font-weight: 300; - letter-spacing: -0.04em; + letter-spacing: 0; color: var(--theme-text); } @@ -963,7 +963,7 @@ font-size: 26px; font-weight: 400; margin-bottom: 8px; - letter-spacing: -0.03em; + letter-spacing: 0; } .size-card small { @@ -1089,7 +1089,7 @@ font-size: 42px; line-height: 0.95; font-weight: 300; - letter-spacing: -0.04em; + letter-spacing: 0; color: #fff; } @@ -1302,3 +1302,375 @@ /* --- Responsive End --- */ +/* --- Design System Refinement Start --- */ + +.detail-page { + padding: clamp(1rem, 3vw, 2.4rem) var(--page-x) 0; + background: + radial-gradient(circle at 12% 8%, rgba(var(--theme-accent-rgb) / 0.13), transparent 28rem), + linear-gradient(135deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.08)), + var(--theme-bg); +} + +.detail-shell { + width: var(--container-wide); + max-width: none; + padding: 0 clamp(1rem, 3vw, 2.4rem) clamp(2rem, 5vw, 4rem); + border-radius: var(--radius-lg); + box-shadow: var(--theme-shadow); +} + +.detail-topbar { + min-height: clamp(4rem, 7vw, 5rem); + gap: var(--gap-sm); + margin-bottom: clamp(1.4rem, 3vw, 2.4rem); + padding-block: clamp(1rem, 2vw, 1.35rem); +} + +.back-link, +.discovery-note-btn, +.buy-button, +.restock-button, +.review-toggle, +.review-write-button, +.detail-bottom-actions button, +.accordion-toggle, +.thumb-btn, +.size-card, +.comment-dot { + min-height: 44px; +} + +.back-link { + padding: 0.35rem 0; +} + +.detail-layout { + grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); + gap: var(--gap-lg); +} + +.detail-gallery { + position: sticky; + top: clamp(1rem, 3vw, 2rem); + max-width: none; +} + +.detail-main-image, +.thumb-btn, +.detail-structure, +.structure-block, +.structure-info-box, +.accordion-item, +.delivery-box, +.comment-card, +.review-toggle, +.review-details, +.material-tags span, +.size-card, +.discovery-note, +.detail-bottom-cta { + border-radius: var(--radius-lg); +} + +.detail-main-image { + background: + radial-gradient(circle at 50% 54%, rgba(var(--theme-accent-rgb) / 0.08), transparent 54%), + var(--theme-paper); + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04); +} + +.detail-main-image img, +.thumb-btn img { + height: 100%; +} + +.detail-thumbs { + gap: var(--gap-xs); + margin-top: var(--gap-xs); +} + +.thumb-btn { + width: clamp(4.8rem, 7vw, 6.25rem); + height: clamp(4.8rem, 7vw, 6.25rem); + border: 1px solid var(--theme-border); + overflow: hidden; +} + +.thumb-btn.active { + outline: 2px solid var(--theme-accent); + outline-offset: 3px; +} + +.detail-meta-grid { + gap: var(--gap-sm); +} + +.detail-meta-grid--top, +.accordion-group { + margin-top: var(--gap-md); +} + +.detail-info { + gap: clamp(1.4rem, 2.5vw, 2rem); +} + +.detail-heading { + padding-bottom: var(--gap-sm); +} + +.detail-heading h1 { + font-size: clamp(2.8rem, 6.5vw, 7.2rem); + line-height: 0.9; + letter-spacing: 0; + text-wrap: balance; +} + +.detail-heading p { + max-width: var(--text-measure); + font-size: var(--text-lg); + line-height: 1.5; +} + +.label-title, +.detail-kicker, +.detail-topbar-label, +.detail-copy-label, +.detail-meta-grid span, +.structure-phase, +.structure-info-label, +.delivery-item-label, +.comment-card-title, +.review-detail-label { + font-size: var(--text-xs); +} + +.material-tags { + gap: var(--gap-xs); +} + +.material-tags span { + min-height: 40px; + background: color-mix(in srgb, var(--theme-surface-soft) 76%, transparent); +} + +.size-grid { + gap: var(--gap-sm); +} + +.size-card { + padding: clamp(1rem, 2vw, 1.35rem); + text-align: left; +} + +.size-card:hover, +.size-card:focus-visible, +.thumb-btn:hover, +.thumb-btn:focus-visible { + border-color: rgba(var(--theme-accent-rgb) / 0.56); + box-shadow: var(--theme-shadow-soft); +} + +.size-card strong { + font-size: var(--text-xl); + letter-spacing: 0; +} + +.accordion-group { + gap: var(--gap-xs); +} + +.accordion-item { + border-left-width: 1px; +} + +.accordion-item.is-open { + background: color-mix(in srgb, var(--theme-surface-soft) 78%, transparent); +} + +.accordion-toggle { + padding: clamp(1rem, 2vw, 1.25rem); +} + +.accordion-content { + padding: 0 clamp(1rem, 2vw, 1.25rem) clamp(1rem, 2vw, 1.35rem); +} + +.detail-structure-layout { + gap: var(--gap-sm); +} + +.structure-tags-grid { + grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); +} + +.structure-tag { + min-height: 44px; +} + +.structure-info-box, +.structure-block, +.delivery-box, +.comment-card, +.review-details, +.review-toggle { + background: var(--theme-surface-soft); +} + +.structure-block:nth-of-type(1) .structure-tag, +.structure-block:nth-of-type(2) .structure-tag, +.structure-block:nth-of-type(3) .structure-tag { + background: var(--theme-paper); + color: var(--theme-text); +} + +.discovery-note { + padding: clamp(1rem, 2vw, 1.25rem); + background: + linear-gradient(135deg, rgba(var(--theme-accent-rgb) / 0.2), rgba(255, 255, 255, 0.02)), + #1f1f1f; +} + +.discovery-note-btn, +.buy-button, +.detail-bottom-actions button { + min-height: 48px; + transition: + transform var(--duration-med) var(--ease-out), + box-shadow var(--duration-med) var(--ease-out), + background-color var(--duration-med) var(--ease-out); +} + +.buy-button { + border-radius: var(--radius-lg); +} + +.restock-button { + border-radius: var(--radius-lg); + transition: + border-color var(--duration-med) var(--ease-out), + background-color var(--duration-med) var(--ease-out), + transform var(--duration-med) var(--ease-out); +} + +.restock-button:hover { + outline: 0; + border-color: rgba(var(--theme-accent-rgb) / 0.7); + transform: translateY(-1px); +} + +.detail-columns, +.delivery-grid, +.comment-spotlight-grid { + gap: var(--gap-sm); +} + +.comment-dot { + width: 16px; + min-height: 16px; + border-radius: 999px; +} + +.review-section-header { + gap: var(--gap-md); +} + +.review-score { + font-size: clamp(2.4rem, 4.5vw, 4.5rem); + letter-spacing: 0; +} + +.review-popover { + top: calc(100% + var(--gap-xs)); +} + +.detail-bottom-cta { + margin-top: var(--gap-lg); + padding: clamp(1.5rem, 4vw, 3.5rem); + background: + radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.22), transparent 18rem), + var(--theme-accent); +} + +.detail-bottom-cta h2 { + font-size: clamp(2.2rem, 5vw, 5.4rem); + letter-spacing: 0; +} + +.detail-bottom-cta p { + max-width: var(--text-measure); + font-size: var(--text-base); +} + +@media (max-width: 1100px) { + .detail-layout { + grid-template-columns: 1fr; + } + + .detail-gallery { + position: static; + width: min(100%, 760px); + } +} + +@media (max-width: 700px) { + .detail-page { + padding: clamp(0.75rem, 4vw, 1rem) var(--page-x) 0; + } + + .detail-shell { + width: var(--container-wide); + padding-inline: clamp(0.85rem, 4vw, 1rem); + } + + .detail-topbar { + align-items: stretch; + } + + .detail-topbar-meta { + justify-content: space-between; + } + + .detail-heading h1 { + font-size: clamp(2.35rem, 14vw, 4.4rem); + } + + .detail-main-image { + aspect-ratio: 4 / 5; + } + + .detail-columns, + .detail-meta-grid, + .size-grid, + .detail-bottom-actions, + .delivery-grid, + .comment-spotlight-grid { + grid-template-columns: 1fr; + } + + .discovery-note { + align-items: stretch; + } + + .discovery-note-btn { + width: 100%; + } + + .detail-bottom-actions { + display: grid; + } +} + +@media (max-width: 420px) { + .review-detail-row { + grid-template-columns: 1fr; + align-items: start; + } + + .review-detail-value { + text-align: left; + } +} + +/* --- Design System Refinement End --- */ + diff --git a/parfum-shop/src/components/ProductDetailPage.jsx b/parfum-shop/src/components/ProductDetailPage.jsx index dd50a6d..b29c45a 100644 --- a/parfum-shop/src/components/ProductDetailPage.jsx +++ b/parfum-shop/src/components/ProductDetailPage.jsx @@ -113,7 +113,7 @@ function ProductDetailContent({ perfumeSlug }) {
- {perfume.name} + {perfume.name}
@@ -126,7 +126,12 @@ function ProductDetailContent({ perfumeSlug }) { className={`thumb-btn ${selectedImage === img ? "active" : ""}`} onClick={() => setSelectedImage(img)} > - {`${perfume.name} + {`${perfume.name} ))}
diff --git a/parfum-shop/src/components/SharedNavbar.jsx b/parfum-shop/src/components/SharedNavbar.jsx index afb490e..718242d 100644 --- a/parfum-shop/src/components/SharedNavbar.jsx +++ b/parfum-shop/src/components/SharedNavbar.jsx @@ -1,6 +1,6 @@ import { Link } from "react-router"; import { useShop } from "../shop/useShop"; -import { useTheme } from "../theme/ThemeContext"; +import { useTheme } from "../theme/useTheme"; import "../style/navbar.css"; function SharedNavbar({ variant = "light", active = "" }) { diff --git a/parfum-shop/src/components/ShopDrawer.css b/parfum-shop/src/components/ShopDrawer.css index 18fe75f..f3ec423 100644 --- a/parfum-shop/src/components/ShopDrawer.css +++ b/parfum-shop/src/components/ShopDrawer.css @@ -495,3 +495,89 @@ } +/* --- Design System Refinement Start --- */ + +.shop-drawer { + width: min(560px, 100%); + min-width: 0; + padding: clamp(1rem, 3vw, 1.4rem); + box-shadow: var(--theme-shadow); +} + +.drawer-top button, +.cart-toast-close, +.cart-controls button, +.subscription-row button { + min-width: 44px; + min-height: 44px; +} + +.drawer-section, +.cart-item, +.order-card, +.read-block, +.status-box, +.requirement-row, +.drawer-error, +.payment-card, +.pref-toggle, +.subscription-row, +.totals-box .discount-explainer, +.cart-toast, +.shop-field input { + border-radius: var(--radius-lg); +} + +.drawer-primary, +.drawer-secondary, +.cart-remove, +.cart-controls, +.cart-controls button, +.cart-toast button, +.subscription-row button { + border-radius: 999px; +} + +.drawer-primary, +.cart-toast > button:last-child { + min-height: 48px; +} + +.drawer-primary, +.drawer-secondary, +.cart-remove, +.payment-card, +.pref-toggle, +.subscription-row button { + transition: + transform var(--duration-med) var(--ease-out), + border-color var(--duration-med) var(--ease-out), + background-color var(--duration-med) var(--ease-out), + box-shadow var(--duration-med) var(--ease-out); +} + +.drawer-primary:hover:not(:disabled), +.drawer-secondary:hover, +.cart-remove:hover, +.payment-card:hover, +.pref-toggle:hover, +.subscription-row button:hover { + transform: translateY(-1px); + border-color: rgba(var(--theme-accent-rgb) / 0.55); +} + +@media (max-width: 640px) { + .shop-drawer { + width: 100%; + } + + .cart-toast { + right: var(--page-x); + bottom: var(--page-x); + width: calc(100vw - (var(--page-x) * 2)); + } +} + +/* --- Design System Refinement End --- */ + + diff --git a/parfum-shop/src/components/SupportChatbot.css b/parfum-shop/src/components/SupportChatbot.css index 4503e6c..7ac6df4 100644 --- a/parfum-shop/src/components/SupportChatbot.css +++ b/parfum-shop/src/components/SupportChatbot.css @@ -274,3 +274,82 @@ } } + +/* --- Design System Refinement Start --- */ + +.chatbot-trigger { + min-height: 48px; + right: var(--page-x); + bottom: var(--page-x); + box-shadow: var(--theme-shadow-soft); +} + +.chatbot-trigger:hover, +.chatbot-trigger:focus-visible { + transform: translateY(-2px); + box-shadow: var(--theme-shadow); +} + +.chatbot-window { + right: var(--page-x); + bottom: calc(var(--page-x) + 4rem); + border-radius: var(--radius-lg); + box-shadow: var(--theme-shadow); +} + +.chatbot-close, +.chatbot-send, +.chatbot-chip, +.chatbot-feedback-btn { + min-height: 44px; +} + +.chatbot-close { + min-width: 44px; +} + +.chatbot-message, +.chatbot-chip, +.chatbot-feedback-btn, +.chatbot-input, +.chatbot-send { + border-radius: var(--radius-lg); +} + +.chatbot-send { + border-radius: 999px; +} + +.chatbot-chip, +.chatbot-feedback-btn, +.chatbot-send { + transition: + transform var(--duration-med) var(--ease-out), + border-color var(--duration-med) var(--ease-out), + background-color var(--duration-med) var(--ease-out); +} + +.chatbot-chip:hover, +.chatbot-feedback-btn:hover, +.chatbot-send:hover { + transform: translateY(-1px); + border-color: rgba(var(--theme-accent-rgb) / 0.55); +} + +@media (max-width: 700px) { + .chatbot-trigger { + right: var(--page-x); + bottom: var(--page-x); + } + + .chatbot-window { + right: var(--page-x); + bottom: calc(var(--page-x) + 4.1rem); + width: calc(100vw - (var(--page-x) * 2)); + height: min(72svh, 620px); + max-height: calc(100svh - 6rem); + } +} + +/* --- Design System Refinement End --- */ + diff --git a/parfum-shop/src/components/landing/HeroSection.jsx b/parfum-shop/src/components/landing/HeroSection.jsx index 7eea8f1..a555bc0 100644 --- a/parfum-shop/src/components/landing/HeroSection.jsx +++ b/parfum-shop/src/components/landing/HeroSection.jsx @@ -1,6 +1,5 @@ import { Link } from "react-router"; import IntroOverlay from "./IntroOverlay"; -import SharedNavbar from "../SharedNavbar"; function HeroSection({ heroImageWrapRef, @@ -17,16 +16,15 @@ function HeroSection({
Atmos Hero
- -

diff --git a/parfum-shop/src/hooks/useScrollTextReveal.js b/parfum-shop/src/hooks/useScrollTextReveal.js index 3f6c9a8..9095d11 100644 --- a/parfum-shop/src/hooks/useScrollTextReveal.js +++ b/parfum-shop/src/hooks/useScrollTextReveal.js @@ -57,7 +57,7 @@ const restoreRevealLines = (element) => { delete element.dataset.revealOriginalHtml; }; -function useScrollTextReveal(scopeRef, deps = []) { +function useScrollTextReveal(scopeRef, dependencyKey = "") { useLayoutEffect(() => { const scope = scopeRef.current; @@ -162,7 +162,7 @@ function useScrollTextReveal(scopeRef, deps = []) { ctx.revert(); preparedElements.forEach((element) => restoreRevealLines(element)); }; - }, [scopeRef, ...deps]); + }, [scopeRef, dependencyKey]); } export default useScrollTextReveal; diff --git a/parfum-shop/src/index.css b/parfum-shop/src/index.css index 6fc1cc5..7c767b4 100644 --- a/parfum-shop/src/index.css +++ b/parfum-shop/src/index.css @@ -3,6 +3,7 @@ --theme-black: #262626; --theme-white: #eaeaea; --theme-accent: #ff6a00; + --theme-accent-rgb: 255 106 0; --theme-bg: #262626; --theme-surface: #2f2f2f; --theme-surface-soft: #363636; @@ -10,6 +11,47 @@ --theme-text: #eaeaea; --theme-text-muted: #c8c8c8; --theme-border: #4a4a4a; + --theme-border-strong: rgba(234, 234, 234, 0.26); + --theme-shadow: 0 24px 70px rgba(0, 0, 0, 0.28); + --theme-shadow-soft: 0 16px 42px rgba(0, 0, 0, 0.18); + + --page-x: clamp(1rem, 4vw, 5rem); + --section-y-xs: clamp(2rem, 5vw, 4.5rem); + --section-y-sm: clamp(3rem, 7vw, 7rem); + --section-y: clamp(4rem, 10vw, 10rem); + --section-y-lg: clamp(5rem, 14vw, 14rem); + + --container: min(calc(100% - (var(--page-x) * 2)), 1440px); + --container-narrow: min(calc(100% - (var(--page-x) * 2)), 920px); + --container-wide: min(calc(100% - (var(--page-x) * 2)), 1680px); + --text-measure: 68ch; + + --gap-2xs: clamp(0.35rem, 0.7vw, 0.65rem); + --gap-xs: clamp(0.5rem, 1vw, 0.875rem); + --gap-sm: clamp(0.75rem, 1.5vw, 1.25rem); + --gap-md: clamp(1rem, 2vw, 2rem); + --gap-lg: clamp(1.5rem, 4vw, 4rem); + --gap-xl: clamp(2rem, 6vw, 6rem); + + --radius-xs: 0; + --radius-sm: 0; + --radius-md: 0; + --radius-lg: 0; + --radius-xl: 0; + + --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.875rem); + --text-sm: clamp(0.875rem, 0.83rem + 0.2vw, 1rem); + --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); + --text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem); + --text-xl: clamp(1.35rem, 1.15rem + 0.9vw, 2rem); + --text-2xl: clamp(1.75rem, 1.25rem + 2vw, 3.5rem); + --text-display: clamp(3.05rem, 10.5vw, 10.8rem); + + --ease-out: cubic-bezier(0.22, 1, 0.36, 1); + --ease-snap: cubic-bezier(0.16, 1, 0.3, 1); + --duration-fast: 160ms; + --duration-med: 260ms; + --duration-slow: 720ms; color: var(--theme-text); background: var(--theme-bg); @@ -46,6 +88,9 @@ body.theme-light { --theme-text: #262626; --theme-text-muted: #5f5f5f; --theme-border: #d6d6d6; + --theme-border-strong: rgba(38, 38, 38, 0.22); + --theme-shadow: 0 24px 70px rgba(38, 38, 38, 0.13); + --theme-shadow-soft: 0 16px 42px rgba(38, 38, 38, 0.1); } a { @@ -56,3 +101,65 @@ button { font: inherit; } +html { + overflow-x: hidden; + overflow-x: clip; +} + +body { + overflow-x: hidden; + overflow-x: clip; +} + +img, +picture, +video, +canvas, +svg { + max-width: 100%; +} + +img, +video { + height: auto; +} + +button, +a, +input, +textarea, +select { + -webkit-tap-highlight-color: transparent; +} + +button, +[role="button"], +a { + touch-action: manipulation; +} + +:focus-visible { + outline: 2px solid var(--theme-accent); + outline-offset: 4px; +} + +::selection { + background: rgba(var(--theme-accent-rgb) / 0.35); + color: var(--theme-white); +} + +@media (prefers-reduced-motion: reduce) { + html { + scroll-behavior: auto; + } + + *, + *::before, + *::after { + animation-duration: 0.01ms; + animation-iteration-count: 1; + scroll-behavior: auto; + transition-duration: 0.01ms; + } +} + diff --git a/parfum-shop/src/pages/AboutPage.css b/parfum-shop/src/pages/AboutPage.css index 273ec18..80a385a 100644 --- a/parfum-shop/src/pages/AboutPage.css +++ b/parfum-shop/src/pages/AboutPage.css @@ -38,7 +38,7 @@ font-size: 68px; line-height: 0.92; font-weight: 300; - letter-spacing: -0.05em; + letter-spacing: 0; color: var(--theme-text); } @@ -102,7 +102,7 @@ font-size: 42px; line-height: 0.98; font-weight: 300; - letter-spacing: -0.04em; + letter-spacing: 0; color: var(--theme-text); } @@ -133,7 +133,7 @@ font-size: 28px; line-height: 1.3; font-weight: 300; - letter-spacing: -0.03em; + letter-spacing: 0; color: #fff; max-width: 900px; } @@ -326,7 +326,7 @@ font-size: 40px; line-height: 0.98; font-weight: 300; - letter-spacing: -0.04em; + letter-spacing: 0; color: var(--theme-text); } @@ -454,3 +454,215 @@ } } + +/* --- Design System Refinement Start --- */ + +.about-page { + padding: clamp(1rem, 3vw, 2.4rem) var(--page-x) clamp(2rem, 5vw, 4rem); + background: + radial-gradient(circle at 88% 9%, rgba(var(--theme-accent-rgb) / 0.12), transparent 28rem), + linear-gradient(135deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.08)), + var(--theme-bg); +} + +.about-shell { + width: var(--container-wide); + margin: 0 auto; + padding: clamp(1.25rem, 3vw, 2.8rem); + border-radius: var(--radius-lg); + box-shadow: var(--theme-shadow); +} + +.about-kicker, +.about-label, +.about-panel-label, +.about-origin-box span, +.about-panel-meta span { + font-size: var(--text-xs); +} + +.about-hero { + grid-template-columns: minmax(0, 1.45fr) minmax(18rem, 0.72fr); + gap: var(--gap-lg); + padding-bottom: var(--section-y-xs); +} + +.about-hero-copy h1 { + margin: clamp(0.85rem, 2vw, 1.2rem) 0 clamp(1rem, 2vw, 1.35rem); + font-size: clamp(3rem, 7.4vw, 8.8rem); + line-height: 0.9; + letter-spacing: 0; + text-wrap: balance; +} + +.about-intro { + max-width: var(--text-measure); + font-size: var(--text-lg); +} + +.about-hero-panel, +.about-card, +.about-origin-box, +.about-bottom-cta, +.about-proof-item, +.about-credential-card, +.about-method-section, +.about-trust-note, +.about-quote-block { + border-radius: var(--radius-lg); +} + +.about-hero-panel { + padding: clamp(1.25rem, 3vw, 2rem); +} + +.about-section { + padding-top: var(--section-y-xs); +} + +.about-section--split, +.about-origin-section, +.about-method-section { + gap: var(--gap-lg); +} + +.about-section-heading h2, +.about-origin-copy h2, +.about-bottom-copy h2, +.about-method-copy h2 { + font-size: clamp(2.15rem, 5.2vw, 6rem); + line-height: 0.94; + letter-spacing: 0; + text-wrap: balance; +} + +.about-section-copy, +.about-method-points { + gap: var(--gap-sm); +} + +.about-section-copy p, +.about-origin-copy p, +.about-bottom-copy p, +.about-method-copy p, +.about-credential-card p, +.about-card p, +.about-proof-item p, +.about-trust-note p { + font-size: var(--text-base); +} + +.about-proof-strip, +.about-grid-section, +.about-credentials-grid { + gap: var(--gap-sm); + margin-top: var(--section-y-xs); +} + +.about-proof-strip { + grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); +} + +.about-grid-section { + grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); +} + +.about-credentials-grid { + grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); +} + +.about-card, +.about-proof-item, +.about-credential-card { + transition: + transform var(--duration-med) var(--ease-out), + border-color var(--duration-med) var(--ease-out), + box-shadow var(--duration-med) var(--ease-out); +} + +.about-card:hover, +.about-proof-item:hover, +.about-credential-card:hover { + transform: translateY(-4px); + border-color: rgba(var(--theme-accent-rgb) / 0.42); + box-shadow: var(--theme-shadow-soft); +} + +.about-card h3, +.about-credential-card h3 { + font-size: var(--text-xl); +} + +.about-quote-block { + margin-top: var(--section-y-xs); + padding: clamp(1.4rem, 4vw, 3rem); + background: + radial-gradient(circle at 100% 0%, rgba(var(--theme-accent-rgb) / 0.18), transparent 18rem), + #171717; +} + +.about-quote-block p { + font-size: clamp(1.7rem, 4vw, 4.2rem); + line-height: 1.08; + letter-spacing: 0; +} + +.about-origin-section, +.about-process-section, +.about-faq-section { + margin-top: var(--section-y-xs); + padding-top: var(--section-y-xs); +} + +.about-bottom-cta { + margin-top: var(--section-y-xs); + padding: clamp(1.5rem, 4vw, 3.5rem); + background: + radial-gradient(circle at 92% 0%, rgba(255, 255, 255, 0.22), transparent 20rem), + var(--theme-accent); +} + +.about-btn { + min-height: 48px; +} + +.about-btn:hover, +.about-btn:focus-visible { + box-shadow: var(--theme-shadow-soft); +} + +@media (max-width: 1100px) { + .about-hero, + .about-section--split, + .about-origin-section, + .about-bottom-cta, + .about-method-section { + grid-template-columns: 1fr; + } +} + +@media (max-width: 700px) { + .about-page { + padding-inline: var(--page-x); + } + + .about-shell { + width: var(--container-wide); + padding-inline: clamp(0.9rem, 4vw, 1.1rem); + } + + .about-hero-copy h1 { + font-size: clamp(2.55rem, 13vw, 4.4rem); + } + + .about-bottom-actions { + display: grid; + } + + .about-btn { + width: 100%; + } +} + +/* --- Design System Refinement End --- */ + diff --git a/parfum-shop/src/pages/DatenschutzPage.css b/parfum-shop/src/pages/DatenschutzPage.css index 6efe9e0..c39dcb2 100644 --- a/parfum-shop/src/pages/DatenschutzPage.css +++ b/parfum-shop/src/pages/DatenschutzPage.css @@ -31,7 +31,7 @@ font-size: 64px; line-height: 0.92; font-weight: 300; - letter-spacing: -0.05em; + letter-spacing: 0; color: var(--theme-text); } @@ -58,7 +58,7 @@ font-size: 38px; line-height: 0.98; font-weight: 300; - letter-spacing: -0.04em; + letter-spacing: 0; color: var(--theme-text); } @@ -133,3 +133,78 @@ } } + +/* --- Design System Refinement Start --- */ + +.datenschutz-page { + padding: clamp(1rem, 3vw, 2.4rem) var(--page-x) clamp(2rem, 5vw, 4rem); + background: + radial-gradient(circle at 88% 9%, rgba(var(--theme-accent-rgb) / 0.12), transparent 28rem), + linear-gradient(135deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.08)), + var(--theme-bg); +} + +.datenschutz-shell { + width: var(--container-narrow); + margin: 0 auto; + padding: clamp(1.25rem, 3vw, 2.8rem); + border-radius: var(--radius-lg); + box-shadow: var(--theme-shadow); +} + +.datenschutz-kicker, +.datenschutz-label { + font-size: var(--text-xs); +} + +.datenschutz-hero { + padding-bottom: var(--section-y-xs); +} + +.datenschutz-hero h1 { + font-size: clamp(3rem, 8vw, 7.2rem); + line-height: 0.9; + letter-spacing: 0; +} + +.datenschutz-intro { + max-width: var(--text-measure); + font-size: var(--text-lg); +} + +.datenschutz-section { + gap: var(--gap-lg); + margin-top: var(--section-y-xs); + padding-top: var(--section-y-xs); +} + +.datenschutz-section-heading h2 { + font-size: clamp(2rem, 4.2vw, 4.5rem); + line-height: 0.96; + letter-spacing: 0; + text-wrap: balance; +} + +.datenschutz-section-copy p, +.datenschutz-list li, +.datenschutz-note-box p { + font-size: var(--text-base); +} + +.datenschutz-note-box { + border-radius: var(--radius-lg); +} + +@media (max-width: 700px) { + .datenschutz-page { + padding-inline: var(--page-x); + } + + .datenschutz-shell { + width: var(--container-wide); + padding-inline: clamp(0.9rem, 4vw, 1.1rem); + } +} + +/* --- Design System Refinement End --- */ + diff --git a/parfum-shop/src/pages/DiscoverySetPage.css b/parfum-shop/src/pages/DiscoverySetPage.css index 93655db..078ee0a 100644 --- a/parfum-shop/src/pages/DiscoverySetPage.css +++ b/parfum-shop/src/pages/DiscoverySetPage.css @@ -63,7 +63,7 @@ font-size: 62px; line-height: 0.94; font-weight: 300; - letter-spacing: -0.05em; + letter-spacing: 0; color: var(--theme-text); } @@ -174,7 +174,7 @@ font-size: 42px; line-height: 0.98; font-weight: 300; - letter-spacing: -0.04em; + letter-spacing: 0; color: var(--theme-text); } @@ -268,7 +268,7 @@ font-size: 48px; line-height: 0.98; font-weight: 300; - letter-spacing: -0.04em; + letter-spacing: 0; color: #fff; } @@ -448,3 +448,335 @@ } } + +/* --- Design System Refinement Start --- */ + +.discovery-page { + padding: clamp(1rem, 3vw, 2.4rem) var(--page-x) clamp(2rem, 5vw, 4rem); + background: + radial-gradient(circle at 85% 6%, rgba(var(--theme-accent-rgb) / 0.12), transparent 28rem), + linear-gradient(135deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.08)), + var(--theme-bg); +} + +.discovery-shell { + width: var(--container-wide); + margin: 0 auto; + padding: 0 clamp(1rem, 3vw, 2.6rem) clamp(2rem, 5vw, 4.4rem); + border: 1px solid var(--theme-border); + border-radius: var(--radius-lg); + background: var(--theme-surface); + box-shadow: var(--theme-shadow); +} + +.discovery-topbar { + padding: clamp(1rem, 2.2vw, 1.5rem) 0 clamp(0.8rem, 1.6vw, 1.1rem); +} + +.discovery-back-link, +.discovery-primary-btn { + min-height: 44px; +} + +.discovery-hero { + grid-template-columns: repeat(12, minmax(0, 1fr)); + gap: var(--gap-lg); + padding: clamp(1rem, 3vw, 2rem) 0 var(--section-y-xs); +} + +.discovery-hero-copy { + grid-column: 1 / span 7; +} + +.discovery-mood-grid { + grid-column: 8 / -1; + align-self: stretch; + grid-template-columns: repeat(6, minmax(0, 1fr)); + grid-auto-rows: minmax(7rem, 1fr); + gap: var(--gap-xs); +} + +.discovery-mood-tile { + grid-column: span 3; + border-radius: var(--radius-lg); + border: 1px solid var(--theme-border); + box-shadow: var(--theme-shadow-soft); +} + +.discovery-mood-tile:nth-child(1) { + grid-column: span 6; + aspect-ratio: 16 / 10; +} + +.discovery-mood-tile:nth-child(4), +.discovery-mood-tile:nth-child(5) { + grid-column: span 2; +} + +.discovery-mood-tile:nth-child(6) { + grid-column: span 2; +} + +.discovery-mood-tile img { + height: 100%; + transition: transform var(--duration-slow) var(--ease-out); +} + +.discovery-mood-tile:hover img { + transform: scale(1.035); +} + +.discovery-kicker, +.discovery-label { + font-size: var(--text-xs); +} + +.discovery-hero-copy h1 { + margin: clamp(0.85rem, 1.8vw, 1.2rem) 0 clamp(1.2rem, 2.5vw, 1.8rem); + font-size: clamp(3rem, 7vw, 8.6rem); + line-height: 0.9; + letter-spacing: 0; + text-wrap: balance; +} + +.discovery-intro { + max-width: var(--text-measure); + font-size: var(--text-lg); +} + +.discovery-benefits { + gap: var(--gap-sm); + margin-top: clamp(2rem, 4vw, 3.4rem); +} + +.discovery-benefit { + grid-template-columns: 2.2rem 1fr; + gap: var(--gap-sm); + padding-top: var(--gap-sm); + border-top: 1px solid var(--theme-border); +} + +.discovery-benefit-icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + border: 1px solid rgba(var(--theme-accent-rgb) / 0.45); + border-radius: 999px; + color: var(--theme-accent); + font-size: 1rem; +} + +.discovery-benefit strong { + font-size: var(--text-base); +} + +.discovery-benefit p, +.discovery-product-copy p, +.discovery-step-card p, +.discovery-comparison-card p { + font-size: var(--text-sm); +} + +.discovery-hero-actions { + max-width: 36rem; + margin-top: clamp(1.8rem, 3.8vw, 3rem); +} + +.discovery-primary-btn { + border-radius: 999px; + background: #111; + letter-spacing: 0.1em; +} + +.discovery-primary-btn:hover, +.discovery-primary-btn:focus-visible { + box-shadow: var(--theme-shadow-soft); +} + +.discovery-included, +.discovery-comparison-section, +.discovery-steps-section { + padding-top: var(--section-y-sm); +} + +.discovery-section-heading { + display: grid; + grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); + gap: var(--gap-lg); + align-items: end; + margin-bottom: clamp(1.8rem, 4vw, 3.8rem); +} + +.discovery-section-heading h2 { + margin: 0; + font-size: clamp(2.2rem, 5.5vw, 6.2rem); + line-height: 0.94; + letter-spacing: 0; + text-wrap: balance; +} + +.discovery-section-heading p { + max-width: var(--text-measure); + margin-top: var(--gap-sm); + font-size: var(--text-base); +} + +.discovery-section-heading--center { + display: block; +} + +.discovery-products-grid { + grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); + gap: var(--gap-md); +} + +.discovery-product-card { + gap: var(--gap-sm); + padding: clamp(0.8rem, 1.4vw, 1rem); + border: 1px solid var(--theme-border); + border-radius: var(--radius-lg); + background: var(--theme-bg); + transition: + transform var(--duration-med) var(--ease-out), + border-color var(--duration-med) var(--ease-out), + box-shadow var(--duration-med) var(--ease-out); +} + +.discovery-product-card:hover { + transform: translateY(-4px); + border-color: rgba(var(--theme-accent-rgb) / 0.45); + box-shadow: var(--theme-shadow-soft); +} + +.discovery-product-image { + border-radius: var(--radius-md); +} + +.discovery-product-image img { + height: 100%; +} + +.discovery-product-copy h3 { + font-size: var(--text-lg); +} + +.discovery-product-tags span { + min-height: 34px; + border-radius: 999px; + background: var(--theme-surface-soft); +} + +.discovery-steps-shell { + padding: clamp(1.5rem, 5vw, 4rem); + border-radius: var(--radius-lg); + background: + radial-gradient(circle at 20% 0%, rgba(var(--theme-accent-rgb) / 0.2), transparent 24rem), + #111; +} + +.discovery-steps-shell h2 { + font-size: clamp(2.35rem, 5.5vw, 6rem); + letter-spacing: 0; +} + +.discovery-steps-grid { + gap: var(--gap-md); +} + +.discovery-step-card { + padding: clamp(1rem, 2vw, 1.4rem); + border: 1px solid rgba(255, 255, 255, 0.14); + border-radius: var(--radius-lg); + background: rgba(255, 255, 255, 0.045); +} + +.discovery-step-number { + border-radius: 999px; + background: var(--theme-accent); + color: #fff; +} + +.discovery-comparison-grid { + gap: var(--gap-md); +} + +.discovery-comparison-card { + padding: clamp(1.25rem, 3vw, 2.2rem); + border-radius: var(--radius-lg); +} + +.discovery-comparison-head h3 { + font-size: var(--text-xl); +} + +.discovery-bottom-cta { + max-width: 48rem; + margin-top: var(--gap-lg); +} + +@media (max-width: 1200px) { + .discovery-hero { + grid-template-columns: 1fr; + } + + .discovery-hero-copy, + .discovery-mood-grid { + grid-column: 1; + } + + .discovery-mood-grid { + max-width: none; + } +} + +@media (max-width: 820px) { + .discovery-page { + padding-inline: var(--page-x); + } + + .discovery-shell { + width: var(--container-wide); + padding-inline: clamp(0.9rem, 4vw, 1.1rem); + } + + .discovery-section-heading { + grid-template-columns: 1fr; + gap: var(--gap-sm); + } + + .discovery-mood-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + grid-auto-rows: auto; + } + + .discovery-mood-tile, + .discovery-mood-tile:nth-child(1), + .discovery-mood-tile:nth-child(4), + .discovery-mood-tile:nth-child(5), + .discovery-mood-tile:nth-child(6) { + grid-column: auto; + aspect-ratio: 1 / 1; + } + + .discovery-products-grid, + .discovery-steps-grid, + .discovery-comparison-grid { + grid-template-columns: 1fr; + } +} + +@media (max-width: 430px) { + .discovery-mood-grid { + gap: 0.6rem; + } + + .discovery-primary-btn { + padding-inline: 1rem; + font-size: 0.78rem; + } +} + +/* --- Design System Refinement End --- */ + diff --git a/parfum-shop/src/pages/DiscoverySetPage.jsx b/parfum-shop/src/pages/DiscoverySetPage.jsx index b9c372b..c901fac 100644 --- a/parfum-shop/src/pages/DiscoverySetPage.jsx +++ b/parfum-shop/src/pages/DiscoverySetPage.jsx @@ -106,7 +106,12 @@ function DiscoverySetPage() {
{moodImages.map((image, index) => (
- {`Discovery + {`Discovery
))}
@@ -124,7 +129,12 @@ function DiscoverySetPage() { {perfumes.map((perfume) => (
- {perfume.name} + {perfume.name}
diff --git a/parfum-shop/src/pages/ImpressumPage.css b/parfum-shop/src/pages/ImpressumPage.css index 6ea1a00..949dc19 100644 --- a/parfum-shop/src/pages/ImpressumPage.css +++ b/parfum-shop/src/pages/ImpressumPage.css @@ -31,7 +31,7 @@ font-size: 64px; line-height: 0.92; font-weight: 300; - letter-spacing: -0.05em; + letter-spacing: 0; color: var(--theme-text); } @@ -87,7 +87,7 @@ font-size: 38px; line-height: 0.98; font-weight: 300; - letter-spacing: -0.04em; + letter-spacing: 0; color: var(--theme-text); } @@ -150,3 +150,105 @@ } } + +/* --- Design System Refinement Start --- */ + +.impressum-page { + padding: clamp(1rem, 3vw, 2.4rem) var(--page-x) clamp(2rem, 5vw, 4rem); + background: + radial-gradient(circle at 88% 9%, rgba(var(--theme-accent-rgb) / 0.12), transparent 28rem), + linear-gradient(135deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.08)), + var(--theme-bg); +} + +.impressum-shell { + width: var(--container-narrow); + margin: 0 auto; + padding: clamp(1.25rem, 3vw, 2.8rem); + border-radius: var(--radius-lg); + box-shadow: var(--theme-shadow); +} + +.impressum-kicker, +.impressum-label { + font-size: var(--text-xs); +} + +.impressum-hero { + padding-bottom: var(--section-y-xs); +} + +.impressum-hero h1 { + font-size: clamp(3rem, 8vw, 7.2rem); + line-height: 0.9; + letter-spacing: 0; +} + +.impressum-intro { + max-width: var(--text-measure); + font-size: var(--text-lg); +} + +.impressum-grid { + grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); + gap: var(--gap-sm); + margin-top: var(--section-y-xs); +} + +.impressum-card, +.impressum-note-box { + border-radius: var(--radius-lg); +} + +.impressum-card { + transition: + transform var(--duration-med) var(--ease-out), + border-color var(--duration-med) var(--ease-out), + box-shadow var(--duration-med) var(--ease-out); +} + +.impressum-card:hover { + transform: translateY(-4px); + border-color: rgba(var(--theme-accent-rgb) / 0.42); + box-shadow: var(--theme-shadow-soft); +} + +.impressum-card h2, +.impressum-section-heading h2 { + letter-spacing: 0; +} + +.impressum-card h2 { + font-size: var(--text-xl); +} + +.impressum-section { + gap: var(--gap-lg); + margin-top: var(--section-y-xs); + padding-top: var(--section-y-xs); +} + +.impressum-section-heading h2 { + font-size: clamp(2rem, 4.2vw, 4.5rem); + line-height: 0.96; +} + +.impressum-card p, +.impressum-section-copy p, +.impressum-note-box p { + font-size: var(--text-base); +} + +@media (max-width: 700px) { + .impressum-page { + padding-inline: var(--page-x); + } + + .impressum-shell { + width: var(--container-wide); + padding-inline: clamp(0.9rem, 4vw, 1.1rem); + } +} + +/* --- Design System Refinement End --- */ + diff --git a/parfum-shop/src/pages/LandingPage.css b/parfum-shop/src/pages/LandingPage.css index 5b7dfa2..e5ee078 100644 --- a/parfum-shop/src/pages/LandingPage.css +++ b/parfum-shop/src/pages/LandingPage.css @@ -1,6 +1,9 @@ .page { + position: relative; min-height: 100vh; - background: var(--theme-bg); + background: + radial-gradient(circle at 82% 12%, rgba(var(--theme-accent-rgb) / 0.13), transparent 28rem), + linear-gradient(180deg, var(--theme-bg), color-mix(in srgb, var(--theme-bg) 88%, #000 12%)); color: var(--theme-text); } @@ -16,20 +19,37 @@ border: 0; } +.page main { + padding-bottom: var(--section-y-sm); +} + /* HERO */ .hero { position: relative; width: 100%; - min-height: 100vh; - min-height: 100svh; - min-height: 100dvh; + min-height: clamp(680px, 100svh, 980px); overflow: hidden; - display: flex; + display: grid; align-items: center; isolation: isolate; background: #111; } +.hero::before { + content: ""; + position: absolute; + inset: 0; + z-index: 2; + pointer-events: none; +} + +.hero::before { + background: + radial-gradient(circle at 72% 42%, rgba(255, 255, 255, 0.1), transparent 24rem), + linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.42) 44%, rgba(0, 0, 0, 0.08) 100%), + linear-gradient(0deg, rgba(0, 0, 0, 0.44), transparent 46%); +} + .hero-media { position: absolute; inset: 0; @@ -42,44 +62,50 @@ height: 100%; display: block; object-fit: cover; - object-position: center; + object-position: 60% center; will-change: transform; } .hero .navbar--hero { - position: absolute; - top: 22px; - left: 0; + position: fixed; + top: clamp(0.75rem, 2.1vw, 1.4rem); right: 0; - z-index: 12; + left: 0; + z-index: 998; padding-top: 0; } .hero-content { position: relative; z-index: 6; - width: min(760px, 100%); - padding: clamp(6rem, 11vh, 9rem) clamp(1.2rem, 3.4vw, 3rem) - clamp(2.6rem, 7vh, 4rem); - display: flex; - flex-direction: column; - justify-content: center; + width: var(--container-wide); + margin: 0 auto; + padding: clamp(7rem, 14vh, 11rem) 0 clamp(3rem, 8vh, 6rem); + display: grid; + grid-template-columns: repeat(12, minmax(0, 1fr)); + gap: var(--gap-md); + align-items: center; } .hero-title { + grid-column: 1 / span 7; + max-width: 10.8ch; margin: 0; - font-size: clamp(2.8rem, 8.5vw, 6.4rem); - line-height: 0.88; + font-size: clamp(3.2rem, 8.4vw, 8.8rem); + line-height: 0.9; font-weight: 300; - letter-spacing: -0.045em; + letter-spacing: 0; text-transform: uppercase; color: #fff; + text-wrap: balance; } .hero-title-line { display: block; overflow: hidden; + padding-right: 0.12em; padding-bottom: 0.08em; + margin-right: -0.12em; margin-bottom: -0.08em; } @@ -88,63 +114,75 @@ } .hero-title-line + .hero-title-line { - margin-top: 0.1em; + margin-top: 0.02em; } .hero-text { - margin-top: 1.25rem; - max-width: 29rem; - font-size: 0.99rem; - line-height: 1.58; - color: rgba(255, 255, 255, 0.86); + grid-column: 1 / span 5; + max-width: 31rem; + margin: 0; + font-size: var(--text-base); + line-height: 1.62; + color: rgba(255, 255, 255, 0.84); will-change: transform, opacity; } .hero-actions { + grid-column: 1 / span 5; display: flex; flex-wrap: wrap; - gap: 12px; - margin-top: 1.9rem; + gap: var(--gap-xs); + margin-top: clamp(0.2rem, 1vw, 0.7rem); will-change: transform, opacity; } -.btn { +.btn, +.discovery-btn { + min-height: 48px; border: none; border-radius: 999px; - padding: 12px 20px; - font-size: 0.9rem; + padding: 0 clamp(1rem, 2vw, 1.35rem); + font-size: var(--text-sm); cursor: pointer; - transition: transform 0.24s ease, opacity 0.24s ease; + transition: + transform var(--duration-med) var(--ease-out), + opacity var(--duration-med) var(--ease-out), + box-shadow var(--duration-med) var(--ease-out), + background-color var(--duration-med) var(--ease-out), + border-color var(--duration-med) var(--ease-out); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; } -.hero .btn { - border-radius: 999px; +.btn:hover, +.discovery-btn:hover { + transform: translateY(-2px); } -.btn:hover { - transform: translateY(-1px); +.btn:active, +.discovery-btn:active { + transform: translateY(0) scale(0.98); } .btn-primary { - background: #ff6a00; + background: var(--theme-accent); color: #fff; + box-shadow: 0 18px 42px rgba(var(--theme-accent-rgb) / 0.26); } .btn-secondary { - background: rgba(255, 255, 255, 0.16); + background: rgba(255, 255, 255, 0.13); color: #fff; - border: 1px solid rgba(255, 255, 255, 0.22); - backdrop-filter: blur(8px); + border: 1px solid rgba(255, 255, 255, 0.24); + backdrop-filter: blur(12px); } .intro-overlay { position: absolute; inset: 0; - z-index: 26; + z-index: 999; background: var(--theme-paper); display: grid; place-items: center; @@ -156,7 +194,7 @@ height: 100%; display: grid; place-items: center; - padding: clamp(1rem, 4vw, 2.2rem); + padding: var(--page-x); } .intro-overlay__text-mask { @@ -179,51 +217,107 @@ /* SECTIONS */ .section { - padding: 42px 20px 10px; + width: var(--container-wide); + margin: 0 auto; + padding: var(--section-y-sm) 0 var(--section-y-xs); } .section-heading { - margin-bottom: 28px; + display: grid; + grid-template-columns: repeat(12, minmax(0, 1fr)); + gap: var(--gap-md); + align-items: end; + margin-bottom: clamp(1.6rem, 4vw, 4.8rem); +} + +.section-heading::after { + content: "01 / Kollektion"; + grid-column: 9 / span 3; + align-self: start; + padding-top: 0.3rem; + border-top: 1px solid var(--theme-border); + color: var(--theme-text-muted); + font-size: var(--text-xs); + line-height: 1.4; + letter-spacing: 0.16em; + text-transform: uppercase; } .section-heading h2, .discovery-copy h2 { margin: 0; - font-size: 52px; - line-height: 0.95; + font-size: clamp(2.6rem, 7vw, 7.4rem); + line-height: 0.92; font-weight: 300; - letter-spacing: -0.04em; + letter-spacing: 0; color: var(--theme-text); + text-wrap: balance; +} + +.section-heading h2 { + grid-column: 1 / span 8; } /* GRID */ .product-grid { + container-type: inline-size; display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 18px; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: var(--gap-sm); } .product-card { position: relative; + container-type: inline-size; isolation: isolate; overflow: hidden; - background: var(--theme-surface); - border: 1px solid var(--theme-border); - border-radius: 0; - padding: 18px; - min-height: 360px; - display: flex; - flex-direction: column; - justify-content: space-between; - cursor: pointer; - transition: transform 0.15s ease, border-color 0.15s ease; - text-decoration: none; + min-height: clamp(360px, 36vw, 560px); + display: grid; + grid-template-rows: auto minmax(14rem, 1fr) auto; + padding: clamp(1rem, 2vw, 1.55rem); color: inherit; + text-decoration: none; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)), + var(--theme-surface); + border: 1px solid var(--theme-border); + border-radius: var(--radius-lg); + cursor: pointer; + transition: + transform var(--duration-med) var(--ease-out), + border-color var(--duration-med) var(--ease-out), + background-color var(--duration-med) var(--ease-out), + box-shadow var(--duration-med) var(--ease-out); +} + +.product-card::before { + content: ""; + position: absolute; + inset: 0; + z-index: 3; + pointer-events: none; + background: + linear-gradient(180deg, rgba(0, 0, 0, 0.18), transparent 28%), + linear-gradient(0deg, rgba(0, 0, 0, 0.22), transparent 42%); + opacity: 0; + transition: opacity var(--duration-med) var(--ease-out); +} + +.product-card:hover, +.product-card:focus-visible { + transform: translateY(-4px); + border-color: rgba(var(--theme-accent-rgb) / 0.48); + box-shadow: var(--theme-shadow-soft); +} + +.product-card:hover::before, +.product-card:focus-visible::before { + opacity: 1; } .product-card:focus-visible { - outline: 2px solid #ff6a00; - outline-offset: 3px; + outline: 2px solid var(--theme-accent); + outline-offset: 4px; } .product-hover-fill { @@ -259,14 +353,14 @@ z-index: 1; background: linear-gradient( to bottom, - rgba(255, 255, 255, 0.08), - rgba(0, 0, 0, 0.18) + rgba(255, 255, 255, 0.06), + rgba(0, 0, 0, 0.34) ); } .product-card:active { - transform: scale(0.97); - border-color: #ff6a00; + transform: translateY(-1px) scale(0.985); + border-color: var(--theme-accent); } .product-top { @@ -275,20 +369,23 @@ display: flex; justify-content: space-between; align-items: flex-start; - gap: 12px; + gap: var(--gap-sm); } .product-id { - font-size: 18px; + font-size: var(--text-sm); color: var(--theme-text-muted); } .product-top h3 { + max-width: 12ch; margin: 0; - font-size: 18px; + font-size: var(--text-sm); + line-height: 1.15; font-weight: 400; text-align: right; letter-spacing: 0.02em; + text-transform: uppercase; } .product-image-wrap { @@ -297,25 +394,35 @@ display: flex; justify-content: center; align-items: center; - min-height: 180px; - padding: 20px 0; width: 100%; + min-height: 0; + padding: clamp(1.2rem, 5vw, 4.8rem) 0; overflow: hidden; } +.product-image-wrap::before { + content: ""; + position: absolute; + width: min(76%, 26rem); + aspect-ratio: 1; + border-radius: 50%; + background: rgba(var(--theme-accent-rgb) / 0.08); + filter: blur(28px); + transform: translateY(10%); +} + .product-image { position: relative; z-index: 1; - width: 100%; - max-width: 600px; + width: min(92%, 520px); height: auto; object-fit: contain; border-radius: 0; - transition: transform 0.4s ease; + transition: transform var(--duration-slow) var(--ease-out); } .product-card:hover .product-image { - transform: scale(1.05); + transform: scale(1.045) rotate(-0.6deg); } .product-bottom { @@ -324,20 +431,24 @@ display: flex; justify-content: space-between; align-items: flex-end; - gap: 12px; + gap: var(--gap-sm); } .product-bottom p { + max-width: 18rem; margin: 0; - max-width: 170px; - font-size: 15px; - line-height: 1.35; color: var(--theme-text-muted); + font-size: var(--text-sm); + line-height: 1.45; } .arrow { - font-size: 26px; - color: #ff6a00; + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 2rem; + color: var(--theme-accent); + font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1; } @@ -345,7 +456,9 @@ .product-top h3, .product-bottom p, .arrow { - transition: color 0.25s ease; + transition: + color var(--duration-med) var(--ease-out), + transform var(--duration-med) var(--ease-out); } .product-card:hover .product-id, @@ -357,156 +470,232 @@ .product-card:focus-within .product-bottom p, .product-card:focus-within .arrow { color: #fff; - mix-blend-mode: difference; } -.product-card:active .product-id, -.product-card:active .product-top h3, -.product-card:active .product-bottom p, -.product-card:active .arrow { - color: #ff6a00; - mix-blend-mode: normal; - transform: scale(1.02); - transition: all 0.1s ease; +.product-card:hover .arrow, +.product-card:focus-within .arrow { + transform: translateX(0.35rem); } /* DISCOVERY */ .discovery-section { + position: relative; + width: var(--container-wide); + min-height: clamp(520px, 62vw, 780px); + margin: var(--section-y-sm) auto 0; + padding: clamp(1.25rem, 4vw, 4rem); display: grid; - grid-template-columns: 600px 1fr; - gap: 28px; + grid-template-columns: minmax(17rem, 0.85fr) minmax(0, 1.35fr); + gap: var(--gap-lg); align-items: center; - background: #ff6a00; - margin: 5vw 0px 0; - border-radius: 0; - padding: 00px 0px 0px 40px; + overflow: hidden; + background: + radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.22), transparent 16rem), + linear-gradient(135deg, #ff6a00, #d84f00); + border-radius: var(--radius-lg); +} + +.discovery-section::after { + content: ""; + position: absolute; + inset: 1px; + border: 1px solid rgba(255, 255, 255, 0.26); + border-radius: inherit; + pointer-events: none; +} + +.discovery-copy { + position: relative; + z-index: 2; + max-width: 36rem; } .discovery-copy h2 { - margin: 0; - font-size: 42px; - line-height: 0.95; - font-weight: 300; - letter-spacing: -0.04em; color: #fff; + font-size: clamp(2.2rem, 5.8vw, 6rem); } .discovery-copy p { - margin-top: 18px; - font-size: 15px; - line-height: 1.5; - color: #fff; + max-width: 29rem; + margin: clamp(1rem, 2vw, 1.4rem) 0 0; + color: rgba(255, 255, 255, 0.86); + font-size: var(--text-base); + line-height: 1.62; } .discovery-btn { - border: none; - border-radius: 999px; - padding: 12px 18px; - font-size: 14px; - cursor: pointer; - transition: transform 0.2s ease, opacity 0.2s ease; - background: var(--theme-paper); - color: #ff6a00; - text-decoration: none; - display: inline-flex; - align-items: center; - justify-content: center; -} - -.discovery-btn:hover { - transform: translateY(-1px); - box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); -} - -.discovery-btn:active { - box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); - background: rgba(255, 255, 255, 0.8); + margin-top: clamp(1.3rem, 3vw, 2.1rem); + background: #fff; + color: #d64f00; + box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18); } .discovery-banner { position: relative; - width: 100%; - max-width: 1300px; - height: 50vh; - border-radius: 0; - overflow: hidden; + z-index: 1; + width: min(100%, 1080px); + aspect-ratio: 16 / 10; + min-height: 320px; justify-self: end; + overflow: hidden; + border-radius: var(--radius-lg); + box-shadow: 0 28px 80px rgba(0, 0, 0, 0.24); +} + +.discovery-banner::before { + content: ""; + position: absolute; + inset: 0; + z-index: 1; + border: 1px solid rgba(255, 255, 255, 0.24); + border-radius: inherit; + pointer-events: none; } .discovery-banner img { width: 100%; height: 100%; object-fit: cover; + object-position: center; display: block; will-change: transform; } /* RESPONSIVE */ -@media (max-width: 900px) { +@media (max-width: 1180px) { .hero-content { - width: min(640px, 100%); - padding-top: 7rem; + grid-template-columns: repeat(8, minmax(0, 1fr)); + } + + .hero-title { + grid-column: 1 / span 6; + } + + .hero-text, + .hero-actions { + grid-column: 1 / span 4; + } + + .section-heading { + grid-template-columns: 1fr; } - .hero-title, .section-heading h2, - .discovery-copy h2 { - font-size: clamp(2.45rem, 9vw, 3.2rem); + .section-heading::after { + grid-column: 1; } - .hero-text { - font-size: 0.94rem; + .section-heading::after { + max-width: 18rem; } .product-grid { - grid-template-columns: repeat(2, 1fr); + grid-template-columns: repeat(2, minmax(0, 1fr)); } .discovery-section { grid-template-columns: 1fr; } + + .discovery-banner { + justify-self: stretch; + } } -@media (max-width: 640px) { - .hero .navbar--hero { - top: 14px; +@media (max-width: 760px) { + .hero { + min-height: clamp(620px, 91svh, 760px); + } + + .hero::before { + background: + linear-gradient(90deg, rgba(0, 0, 0, 0.74), rgba(0, 0, 0, 0.28)), + linear-gradient(0deg, rgba(0, 0, 0, 0.62), transparent 48%); + } + + .hero-media__image { + object-position: 64% center; } .hero-content { - padding: 6.2rem 1rem 2.3rem; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-end; + gap: var(--gap-sm); + padding-top: clamp(6.5rem, 18svh, 8.5rem); + padding-bottom: clamp(2.4rem, 8svh, 4rem); } - .hero-title, - .section-heading h2, - .discovery-copy h2 { - font-size: clamp(2.05rem, 13vw, 2.7rem); + .hero-title { + max-width: 9.6ch; + font-size: clamp(3rem, 17.5vw, 5.1rem); + } + + .hero-text { + max-width: 25rem; + font-size: var(--text-sm); } .hero-actions { - flex-direction: column; - align-items: flex-start; - width: min(300px, 100%); + width: min(100%, 22rem); } .hero-actions .btn { width: 100%; } - .section { - padding: 34px 12px 10px; - } - .product-grid { grid-template-columns: 1fr; } .product-card { - min-height: 320px; + min-height: clamp(340px, 118vw, 520px); + } + + .product-top h3 { + max-width: 11ch; } .discovery-section { - margin: 12px 12px 0; - padding: 28px 20px; + width: calc(100% - (var(--page-x) * 2)); + min-height: 0; + padding: clamp(1rem, 5vw, 1.5rem); + } + + .discovery-banner { + min-height: 0; + aspect-ratio: 1 / 1; + } +} + +@media (max-width: 430px) { + .hero-title { + max-width: 9.2ch; + } + + .section-heading h2, + .discovery-copy h2 { + font-size: clamp(2.25rem, 13vw, 3.45rem); + } + + .product-card { + padding: 1rem; + } + + .product-bottom { + align-items: flex-start; + } +} + +@container (max-width: 360px) { + .product-bottom { + flex-direction: column; + align-items: flex-start; + } + + .arrow { + align-self: flex-end; } } @@ -516,9 +705,12 @@ .hero-text, .hero-actions, .hero-brand, - .intro-overlay { - transition: none !important; - animation: none !important; + .intro-overlay, + .product-card, + .product-image, + .discovery-banner img { + transition: none; + animation: none; + will-change: auto; } } - diff --git a/parfum-shop/src/pages/LandingPage.jsx b/parfum-shop/src/pages/LandingPage.jsx index 9e47436..cf17e6c 100644 --- a/parfum-shop/src/pages/LandingPage.jsx +++ b/parfum-shop/src/pages/LandingPage.jsx @@ -9,6 +9,7 @@ import { Link } from "react-router"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import HeroSection from "../components/landing/HeroSection"; +import SharedNavbar from "../components/SharedNavbar"; import perfumes from "../data/perfumes"; import "../pages/LandingPage.css"; import "../style/navbar.css"; @@ -375,6 +376,8 @@ function LandingPage() { return (
+ +
- {item.name} + {item.name}
@@ -473,6 +482,7 @@ function LandingPage() { src="/atmos-discovery-set-thumbnail.png" alt="Discovery Set" loading="lazy" + decoding="async" ref={discoveryImageRef} />
diff --git a/parfum-shop/src/pages/SmallBatchPage.css b/parfum-shop/src/pages/SmallBatchPage.css index bfa7ef9..71249c8 100644 --- a/parfum-shop/src/pages/SmallBatchPage.css +++ b/parfum-shop/src/pages/SmallBatchPage.css @@ -125,3 +125,128 @@ } +/* --- Design System Refinement Start --- */ + +.small-page { + padding: clamp(1rem, 3vw, 2.4rem) var(--page-x) clamp(2rem, 5vw, 4rem); + background: + radial-gradient(circle at 84% 7%, rgba(var(--theme-accent-rgb) / 0.12), transparent 28rem), + var(--theme-bg); +} + +.small-shell { + width: var(--container-wide); + margin: 0 auto; + padding: clamp(1.25rem, 3vw, 2.8rem); + border-radius: var(--radius-lg); + box-shadow: var(--theme-shadow); +} + +.small-hero { + max-width: min(100%, 58rem); + padding-bottom: var(--section-y-xs); + margin-bottom: var(--gap-lg); +} + +.small-kicker, +.small-requirement span, +.release-card span { + font-size: var(--text-xs); +} + +.small-hero h1, +.small-panel h2 { + letter-spacing: 0; +} + +.small-hero h1 { + font-size: clamp(3rem, 9vw, 9rem); + line-height: 0.88; + text-wrap: balance; +} + +.small-hero p, +.small-panel p, +.release-card p { + max-width: var(--text-measure); + font-size: var(--text-base); +} + +.small-panel, +.release-card, +.small-error, +.small-requirement { + border-radius: var(--radius-lg); +} + +.small-panel, +.release-card { + padding: clamp(1.2rem, 3vw, 2rem); +} + +.small-panel button, +.release-card button { + min-height: 48px; + border-radius: 999px; + transition: + transform var(--duration-med) var(--ease-out), + box-shadow var(--duration-med) var(--ease-out), + background-color var(--duration-med) var(--ease-out); +} + +.small-panel button:hover, +.release-card button:hover, +.small-panel button:focus-visible, +.release-card button:focus-visible { + transform: translateY(-2px); + box-shadow: var(--theme-shadow-soft); +} + +.small-requirements { + grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); + gap: var(--gap-sm); +} + +.small-requirement { + min-height: 4.5rem; +} + +.release-grid { + grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); + gap: var(--gap-sm); + margin-top: var(--gap-lg); +} + +.release-card { + transition: + transform var(--duration-med) var(--ease-out), + border-color var(--duration-med) var(--ease-out), + box-shadow var(--duration-med) var(--ease-out); +} + +.release-card:hover { + transform: translateY(-4px); + border-color: rgba(var(--theme-accent-rgb) / 0.42); + box-shadow: var(--theme-shadow-soft); +} + +.release-card h3 { + font-size: var(--text-xl); + line-height: 1.08; + letter-spacing: 0; +} + +@media (max-width: 760px) { + .small-page { + padding-inline: var(--page-x); + } + + .small-shell { + width: var(--container-wide); + padding-inline: clamp(0.9rem, 4vw, 1.1rem); + } +} + +/* --- Design System Refinement End --- */ + + diff --git a/parfum-shop/src/pages/SupportPage.css b/parfum-shop/src/pages/SupportPage.css index ba6c359..070eaf3 100644 --- a/parfum-shop/src/pages/SupportPage.css +++ b/parfum-shop/src/pages/SupportPage.css @@ -37,7 +37,7 @@ font-size: 68px; line-height: 0.92; font-weight: 300; - letter-spacing: -0.05em; + letter-spacing: 0; color: var(--theme-text); } @@ -128,7 +128,7 @@ font-size: 42px; line-height: 0.98; font-weight: 300; - letter-spacing: -0.04em; + letter-spacing: 0; color: var(--theme-text); } @@ -356,3 +356,195 @@ } } + +/* --- Design System Refinement Start --- */ + +.support-page { + padding: clamp(1rem, 3vw, 2.4rem) var(--page-x) clamp(2rem, 5vw, 4rem); + background: + radial-gradient(circle at 88% 9%, rgba(var(--theme-accent-rgb) / 0.12), transparent 28rem), + linear-gradient(135deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.08)), + var(--theme-bg); +} + +.support-shell { + width: var(--container-wide); + margin: 0 auto; + padding: clamp(1.25rem, 3vw, 2.8rem); + border-radius: var(--radius-lg); + box-shadow: var(--theme-shadow); +} + +.support-kicker, +.support-label, +.support-panel-label, +.support-panel-meta span { + font-size: var(--text-xs); +} + +.support-hero { + grid-template-columns: minmax(0, 1.45fr) minmax(18rem, 0.72fr); + gap: var(--gap-lg); + padding-bottom: var(--section-y-xs); +} + +.support-hero-copy h1 { + margin: clamp(0.85rem, 2vw, 1.2rem) 0 clamp(1rem, 2vw, 1.35rem); + font-size: clamp(3rem, 7.4vw, 8.8rem); + line-height: 0.9; + letter-spacing: 0; + text-wrap: balance; +} + +.support-intro { + max-width: var(--text-measure); + font-size: var(--text-lg); +} + +.support-hero-panel, +.support-quick-card, +.support-info-box, +.support-faq-card, +.support-bottom-cta { + border-radius: var(--radius-lg); +} + +.support-hero-panel { + padding: clamp(1.25rem, 3vw, 2rem); +} + +.support-quick-grid, +.support-info-grid, +.support-faq-grid { + gap: var(--gap-sm); + margin-top: var(--section-y-xs); +} + +.support-quick-grid { + grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); +} + +.support-faq-grid { + grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); +} + +.support-section { + padding-top: var(--section-y-xs); +} + +.support-section--split, +.support-info-grid, +.support-bottom-cta { + gap: var(--gap-lg); +} + +.support-section-heading h2, +.support-bottom-copy h2 { + font-size: clamp(2.15rem, 5.2vw, 6rem); + line-height: 0.94; + letter-spacing: 0; + text-wrap: balance; +} + +.support-section-copy { + gap: var(--gap-sm); +} + +.support-section-copy p, +.support-bottom-copy p, +.support-quick-card p, +.support-faq-card p, +.support-info-box p, +.support-list li { + font-size: var(--text-base); +} + +.support-quick-card, +.support-faq-card, +.support-info-box { + transition: + transform var(--duration-med) var(--ease-out), + border-color var(--duration-med) var(--ease-out), + box-shadow var(--duration-med) var(--ease-out); +} + +.support-quick-card:hover, +.support-faq-card:hover, +.support-info-box:hover { + transform: translateY(-4px); + border-color: rgba(var(--theme-accent-rgb) / 0.42); + box-shadow: var(--theme-shadow-soft); +} + +.support-quick-card h3, +.support-faq-card h3, +.support-info-box h3 { + font-size: var(--text-xl); + letter-spacing: 0; +} + +.support-info-box--dark { + background: + radial-gradient(circle at 100% 0%, rgba(var(--theme-accent-rgb) / 0.18), transparent 18rem), + #171717; +} + +.support-faq-section { + margin-top: var(--section-y-xs); + padding-top: var(--section-y-xs); +} + +.support-bottom-cta { + margin-top: var(--section-y-xs); + padding: clamp(1.5rem, 4vw, 3.5rem); + background: + radial-gradient(circle at 92% 0%, rgba(255, 255, 255, 0.22), transparent 20rem), + var(--theme-accent); +} + +.support-btn, +.support-mail-btn { + min-height: 48px; +} + +.support-btn:hover, +.support-btn:focus-visible, +.support-mail-btn:hover, +.support-mail-btn:focus-visible { + box-shadow: var(--theme-shadow-soft); +} + +@media (max-width: 1100px) { + .support-hero, + .support-section--split, + .support-info-grid, + .support-bottom-cta { + grid-template-columns: 1fr; + } +} + +@media (max-width: 700px) { + .support-page { + padding-inline: var(--page-x); + } + + .support-shell { + width: var(--container-wide); + padding-inline: clamp(0.9rem, 4vw, 1.1rem); + } + + .support-hero-copy h1 { + font-size: clamp(2.55rem, 13vw, 4.4rem); + } + + .support-bottom-actions { + display: grid; + } + + .support-btn { + width: 100%; + } +} + +/* --- Design System Refinement End --- */ + diff --git a/parfum-shop/src/style/navbar.css b/parfum-shop/src/style/navbar.css index e6c36f6..6438e8c 100644 --- a/parfum-shop/src/style/navbar.css +++ b/parfum-shop/src/style/navbar.css @@ -1,39 +1,86 @@ /* --- Shared Navbar Start --- */ .navbar { - position: relative; - z-index: 20; + position: sticky; + top: clamp(0.75rem, 2vw, 1.25rem); + z-index: 998; display: flex; justify-content: center; + width: 100%; + padding-inline: var(--page-x); } .nav-pill { display: flex; - gap: 10px; - padding: 8px 10px; + align-items: center; + justify-content: center; + gap: clamp(0.25rem, 0.8vw, 0.65rem); + width: fit-content; + max-width: 100%; + min-height: clamp(3rem, 5.4vw, 3.5rem); + padding: clamp(0.32rem, 0.8vw, 0.55rem); + border: 1px solid transparent; border-radius: 999px; - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); + backdrop-filter: blur(18px) saturate(1.2); + -webkit-backdrop-filter: blur(18px) saturate(1.2); + box-shadow: 0 16px 50px rgba(0, 0, 0, 0.16); } .nav-link { + position: relative; display: inline-flex; align-items: center; justify-content: center; - text-decoration: none; - font-size: 13px; - padding: 8px 14px; + min-height: 42px; + min-width: 42px; + padding: 0 clamp(0.72rem, 1.5vw, 1rem); border-radius: 999px; - transition: 0.2s ease; + color: inherit; + font-size: var(--text-xs); + line-height: 1; + text-decoration: none; + white-space: nowrap; + transition: + background-color var(--duration-med) var(--ease-out), + color var(--duration-med) var(--ease-out), + opacity var(--duration-med) var(--ease-out), + transform var(--duration-med) var(--ease-out); +} + +.nav-link::after { + content: ""; + position: absolute; + right: 0.8rem; + bottom: 0.45rem; + left: 0.8rem; + height: 1px; + background: currentColor; + opacity: 0; + transform: scaleX(0.35); + transform-origin: center; + transition: + opacity var(--duration-med) var(--ease-out), + transform var(--duration-med) var(--ease-out); +} + +.nav-link:hover::after, +.nav-link.active::after { + opacity: 0.5; + transform: scaleX(1); } .nav-link--brand { - padding: 8px 12px; + padding-inline: clamp(0.75rem, 1.4vw, 1rem); +} + +.nav-link--brand::after, +.nav-theme-switch::after { + display: none; } .nav-brand-logo { display: block; - width: clamp(56px, 5.4vw, 78px); + width: clamp(58px, 5.2vw, 82px); height: auto; } @@ -44,28 +91,32 @@ } .nav-theme-switch { - min-width: auto; - padding: 8px; + min-width: 46px; + padding-inline: 0.55rem; } .nav-theme-switch__track { position: relative; - width: 38px; - height: 20px; - border-radius: 999px; - border: 1px solid; + width: 40px; + height: 22px; display: inline-flex; align-items: center; padding: 2px; - transition: background-color 0.2s ease, border-color 0.2s ease; + border: 1px solid; + border-radius: 999px; + transition: + background-color var(--duration-med) var(--ease-out), + border-color var(--duration-med) var(--ease-out); } .nav-theme-switch__thumb { - width: 14px; - height: 14px; + width: 16px; + height: 16px; border-radius: 50%; transform: translateX(0); - transition: transform 0.2s ease, background-color 0.2s ease; + transition: + transform var(--duration-med) var(--ease-snap), + background-color var(--duration-med) var(--ease-out); } .nav-theme-switch.is-light .nav-theme-switch__thumb { @@ -74,15 +125,21 @@ /* Hero variant */ .navbar--hero { - padding-top: 22px; + position: fixed; + top: clamp(0.75rem, 2.1vw, 1.4rem); + left: 0; + right: 0; + z-index: 998; + padding-top: 0; } .navbar--hero .nav-pill { - background: rgba(255, 255, 255, 0.15); + background: rgba(15, 15, 15, 0.58); + border-color: rgba(255, 255, 255, 0.22); } .navbar--hero .nav-link { - color: rgba(255, 255, 255, 0.88); + color: rgba(255, 255, 255, 0.9); } .navbar--hero .nav-button { @@ -100,17 +157,18 @@ .navbar--hero .nav-link:hover, .navbar--hero .nav-link.active { - background: rgba(255, 255, 255, 0.22); + background: rgba(255, 255, 255, 0.16); } /* Detail page variant */ .navbar--light { - margin-bottom: 18px; + margin-bottom: clamp(1rem, 2.5vw, 1.8rem); + padding-top: clamp(0.35rem, 1vw, 0.7rem); } .navbar--light .nav-pill { - background: rgba(255, 255, 255, 0.88); - border: 1px solid var(--theme-border); + background: color-mix(in srgb, var(--theme-paper) 86%, transparent); + border-color: var(--theme-border); } .navbar--light .nav-link { @@ -122,7 +180,7 @@ } .navbar--light .nav-theme-switch__track { - border-color: rgba(38, 38, 38, 0.24); + border-color: var(--theme-border-strong); background: rgba(38, 38, 38, 0.08); } @@ -137,19 +195,31 @@ /* --- Shared Navbar End --- */ -@media (max-width: 640px) { +@media (max-width: 700px) { + .navbar { + padding-inline: clamp(0.75rem, 4vw, 1rem); + } + .nav-pill { - gap: 4px; - padding: 6px; + justify-content: space-between; + width: 100%; + overflow-x: auto; + scrollbar-width: none; + } + + .nav-pill::-webkit-scrollbar { + display: none; } .nav-link { - padding: 8px 10px; - font-size: 12px; + min-height: 40px; + min-width: 40px; + padding-inline: 0.68rem; + font-size: 0.75rem; } .nav-link--brand { - padding: 8px 10px; + padding-inline: 0.72rem; } .nav-brand-logo { @@ -157,8 +227,16 @@ } .nav-theme-switch { - min-width: auto; - padding: 8px; + padding-inline: 0.45rem; } } +@media (max-width: 390px) { + .nav-link { + padding-inline: 0.58rem; + } + + .nav-link--brand { + padding-inline: 0.62rem; + } +} diff --git a/parfum-shop/src/theme/ThemeContext.jsx b/parfum-shop/src/theme/ThemeContext.jsx index 2b341d6..4a960e4 100644 --- a/parfum-shop/src/theme/ThemeContext.jsx +++ b/parfum-shop/src/theme/ThemeContext.jsx @@ -1,17 +1,7 @@ -import { createContext, useContext } from "react"; - -const ThemeContext = createContext(null); +import { ThemeContext } from "./ThemeContextBase"; function ThemeProvider({ value, children }) { return {children}; } -function useTheme() { - const context = useContext(ThemeContext); - if (!context) { - throw new Error("useTheme must be used within ThemeProvider."); - } - return context; -} - -export { ThemeProvider, useTheme }; +export { ThemeProvider }; diff --git a/parfum-shop/src/theme/ThemeContextBase.js b/parfum-shop/src/theme/ThemeContextBase.js new file mode 100644 index 0000000..6e3da30 --- /dev/null +++ b/parfum-shop/src/theme/ThemeContextBase.js @@ -0,0 +1,5 @@ +import { createContext } from "react"; + +const ThemeContext = createContext(null); + +export { ThemeContext }; diff --git a/parfum-shop/src/theme/useTheme.js b/parfum-shop/src/theme/useTheme.js new file mode 100644 index 0000000..93e1b5f --- /dev/null +++ b/parfum-shop/src/theme/useTheme.js @@ -0,0 +1,12 @@ +import { useContext } from "react"; +import { ThemeContext } from "./ThemeContextBase"; + +function useTheme() { + const context = useContext(ThemeContext); + if (!context) { + throw new Error("useTheme must be used within ThemeProvider."); + } + return context; +} + +export { useTheme };