addd code review changes
This commit is contained in:
parent
5bf3f8694c
commit
0a075632c3
@ -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,
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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" }) {
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
className="nav-link nav-button"
|
||||
className="nav-link nav-button nav-link--cart"
|
||||
onClick={openCart}
|
||||
aria-haspopup="dialog"
|
||||
aria-controls="shop-drawer"
|
||||
aria-expanded={panelOpen && panelType === "cart"}
|
||||
aria-label={cartAriaLabel}
|
||||
>
|
||||
{cartLabel}
|
||||
<span className="nav-label nav-label--full">{cartLabel}</span>
|
||||
<span className="nav-label nav-label--compact">
|
||||
{cartCompactLabel}
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="nav-link nav-button"
|
||||
onClick={openProfile}
|
||||
aria-haspopup="dialog"
|
||||
aria-controls="shop-drawer"
|
||||
aria-expanded={panelOpen && panelType === "profile"}
|
||||
aria-label={user ? "Profil öffnen" : "Anmelden oder Profil öffnen"}
|
||||
>
|
||||
Profil
|
||||
@ -64,7 +72,7 @@ function SharedNavbar({ variant = "hero", active = "", brandMode = "logo" }) {
|
||||
type="button"
|
||||
className={`nav-link nav-button nav-theme-switch ${isLight ? "is-light" : ""}`}
|
||||
onClick={toggleTheme}
|
||||
aria-label={isLight ? "Zum Dark Mode wechseln" : "Zum Light Mode wechseln"}
|
||||
aria-label="Light Mode"
|
||||
aria-pressed={isLight}
|
||||
>
|
||||
<span className="nav-theme-switch__track" aria-hidden="true">
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
.drawer-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 80;
|
||||
z-index: var(--z-drawer-backdrop);
|
||||
background: rgba(0, 0, 0, 0.58);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
@ -27,7 +27,7 @@
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 90;
|
||||
z-index: var(--z-drawer);
|
||||
width: min(560px, 100%);
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
@ -238,6 +238,13 @@
|
||||
|
||||
/* ----- Payment ----------------------------------------------------------- */
|
||||
|
||||
.payment-fieldset {
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.payment-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
@ -262,6 +269,18 @@
|
||||
background-color var(--duration-med) var(--ease-out);
|
||||
}
|
||||
|
||||
.payment-card__input {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.payment-card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@ -279,6 +298,12 @@
|
||||
border-color: rgba(var(--theme-accent-rgb) / 0.55);
|
||||
}
|
||||
|
||||
.payment-card:focus-within {
|
||||
border-color: var(--theme-control-border-focus);
|
||||
outline: 2px solid var(--theme-focus-ring);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.payment-card.is-active {
|
||||
border-color: var(--theme-accent);
|
||||
background: rgba(var(--theme-accent-rgb) / 0.08);
|
||||
@ -658,7 +683,7 @@
|
||||
position: fixed;
|
||||
right: var(--page-x);
|
||||
bottom: var(--page-x);
|
||||
z-index: 100;
|
||||
z-index: var(--z-toast);
|
||||
width: min(360px, calc(100vw - (var(--page-x) * 2)));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { useId, useState } from "react";
|
||||
import { useEffect, useId, useRef, useState } from "react";
|
||||
import { Link } from "react-router";
|
||||
import { formatChf } from "../shop/money";
|
||||
import { useShop } from "../shop/useShop";
|
||||
@ -32,6 +32,24 @@ const creditStatusLabels = {
|
||||
const formatDiscoveryStatus = (status) => discoveryStatusLabels[status] || status;
|
||||
const formatCreditStatus = (status) => creditStatusLabels[status] || status;
|
||||
|
||||
const focusableSelector = [
|
||||
"a[href]",
|
||||
"button:not([disabled])",
|
||||
"input:not([disabled]):not([type='hidden'])",
|
||||
"select:not([disabled])",
|
||||
"textarea:not([disabled])",
|
||||
"[tabindex]:not([tabindex='-1'])",
|
||||
].join(",");
|
||||
|
||||
const getFocusableElements = (container) =>
|
||||
Array.from(container.querySelectorAll(focusableSelector)).filter(
|
||||
(element) =>
|
||||
element instanceof HTMLElement &&
|
||||
element.tabIndex >= 0 &&
|
||||
!element.closest("[inert]") &&
|
||||
element.getClientRects().length > 0
|
||||
);
|
||||
|
||||
function Field({
|
||||
label,
|
||||
value,
|
||||
@ -42,6 +60,8 @@ function Field({
|
||||
name,
|
||||
autoComplete,
|
||||
inputMode,
|
||||
describedBy,
|
||||
invalid = false,
|
||||
}) {
|
||||
const generatedId = useId();
|
||||
const fallbackName = label
|
||||
@ -62,15 +82,28 @@ function Field({
|
||||
readOnly={readOnly}
|
||||
autoComplete={autoComplete}
|
||||
inputMode={inputMode}
|
||||
aria-describedby={describedBy}
|
||||
aria-invalid={invalid || undefined}
|
||||
onChange={(event) => onChange?.(event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
||||
function DrawerError({ id, children }) {
|
||||
if (!children) return null;
|
||||
|
||||
return (
|
||||
<p className="drawer-error" id={id} role="alert">
|
||||
{children}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
function AuthPanel() {
|
||||
const { busy, error, login, register } = useShop();
|
||||
const [mode, setMode] = useState("login");
|
||||
const errorId = "auth-error";
|
||||
const [form, setForm] = useState({
|
||||
first_name: "",
|
||||
surname: "",
|
||||
@ -105,6 +138,8 @@ function AuthPanel() {
|
||||
name="first_name"
|
||||
value={form.first_name}
|
||||
autoComplete="given-name"
|
||||
describedBy={error ? errorId : undefined}
|
||||
invalid={!!error}
|
||||
onChange={(value) => update("first_name", value)}
|
||||
/>
|
||||
<Field
|
||||
@ -112,6 +147,8 @@ function AuthPanel() {
|
||||
name="surname"
|
||||
value={form.surname}
|
||||
autoComplete="family-name"
|
||||
describedBy={error ? errorId : undefined}
|
||||
invalid={!!error}
|
||||
onChange={(value) => update("surname", value)}
|
||||
/>
|
||||
</div>
|
||||
@ -125,6 +162,8 @@ function AuthPanel() {
|
||||
value={form.email}
|
||||
autoComplete="email"
|
||||
inputMode="email"
|
||||
describedBy={error ? errorId : undefined}
|
||||
invalid={!!error}
|
||||
onChange={(value) => update("email", value)}
|
||||
/>
|
||||
<Field
|
||||
@ -134,10 +173,12 @@ function AuthPanel() {
|
||||
type="password"
|
||||
value={form.password}
|
||||
autoComplete={mode === "login" ? "current-password" : "new-password"}
|
||||
describedBy={error ? errorId : undefined}
|
||||
invalid={!!error}
|
||||
onChange={(value) => update("password", value)}
|
||||
/>
|
||||
|
||||
{error && <p className="drawer-error">{error}</p>}
|
||||
<DrawerError id={errorId}>{error}</DrawerError>
|
||||
|
||||
<button
|
||||
className="atmos-btn atmos-btn--primary atmos-btn--block"
|
||||
@ -177,6 +218,7 @@ function CartPanel() {
|
||||
city: user?.city || "",
|
||||
}));
|
||||
const [paymentMethod, setPaymentMethod] = useState("Bill");
|
||||
const errorId = "cart-error";
|
||||
|
||||
const updateAddress = (key, value) =>
|
||||
setAddress((current) => ({ ...current, [key]: value }));
|
||||
@ -194,42 +236,51 @@ function CartPanel() {
|
||||
<p className="drawer-muted">Dein Warenkorb ist leer.</p>
|
||||
) : (
|
||||
<div className="cart-items">
|
||||
{cart.items.map((item) => (
|
||||
<article className="cart-item" key={item.product_id}>
|
||||
<div className="cart-item-info">
|
||||
<h3>{item.product.name}</h3>
|
||||
<p>
|
||||
{item.product.size_label} · {formatChf(item.product.price_cents)}
|
||||
</p>
|
||||
</div>
|
||||
{cart.items.map((item) => {
|
||||
const productName = item.product.name;
|
||||
|
||||
<div className="cart-controls" role="group" aria-label="Menge anpassen">
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Menge verringern"
|
||||
onClick={() => updateCartQuantity(item.product_id, item.quantity - 1)}
|
||||
>
|
||||
−
|
||||
</button>
|
||||
<span>{item.quantity}</span>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Menge erhöhen"
|
||||
onClick={() => updateCartQuantity(item.product_id, item.quantity + 1)}
|
||||
>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
return (
|
||||
<article className="cart-item" key={item.product_id}>
|
||||
<div className="cart-item-info">
|
||||
<h3>{productName}</h3>
|
||||
<p>
|
||||
{item.product.size_label} · {formatChf(item.product.price_cents)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="atmos-btn atmos-btn--ghost atmos-btn--sm"
|
||||
type="button"
|
||||
onClick={() => removeCartItem(item.product_id)}
|
||||
>
|
||||
Entfernen
|
||||
</button>
|
||||
</article>
|
||||
))}
|
||||
<div
|
||||
className="cart-controls"
|
||||
role="group"
|
||||
aria-label={`${productName} Menge: ${item.quantity}`}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
aria-label={`${productName} Menge verringern`}
|
||||
onClick={() => updateCartQuantity(item.product_id, item.quantity - 1)}
|
||||
>
|
||||
−
|
||||
</button>
|
||||
<span aria-live="polite">{item.quantity}</span>
|
||||
<button
|
||||
type="button"
|
||||
aria-label={`${productName} Menge erhoehen`}
|
||||
onClick={() => updateCartQuantity(item.product_id, item.quantity + 1)}
|
||||
>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="atmos-btn atmos-btn--ghost atmos-btn--sm"
|
||||
type="button"
|
||||
aria-label={`${productName} aus dem Warenkorb entfernen`}
|
||||
onClick={() => removeCartItem(item.product_id)}
|
||||
>
|
||||
Entfernen
|
||||
</button>
|
||||
</article>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
@ -240,21 +291,29 @@ function CartPanel() {
|
||||
<Field
|
||||
label="Strasse"
|
||||
value={address.street_name}
|
||||
describedBy={error ? errorId : undefined}
|
||||
invalid={!!error}
|
||||
onChange={(value) => updateAddress("street_name", value)}
|
||||
/>
|
||||
<Field
|
||||
label="Nr."
|
||||
value={address.house_number}
|
||||
describedBy={error ? errorId : undefined}
|
||||
invalid={!!error}
|
||||
onChange={(value) => updateAddress("house_number", value)}
|
||||
/>
|
||||
<Field
|
||||
label="PLZ"
|
||||
value={address.zip_code}
|
||||
describedBy={error ? errorId : undefined}
|
||||
invalid={!!error}
|
||||
onChange={(value) => updateAddress("zip_code", value)}
|
||||
/>
|
||||
<Field
|
||||
label="Ort"
|
||||
value={address.city}
|
||||
describedBy={error ? errorId : undefined}
|
||||
invalid={!!error}
|
||||
onChange={(value) => updateAddress("city", value)}
|
||||
/>
|
||||
</div>
|
||||
@ -262,24 +321,37 @@ function CartPanel() {
|
||||
|
||||
<section className="drawer-section">
|
||||
<span className="drawer-eyebrow">Zahlung</span>
|
||||
<div className="payment-grid" role="radiogroup" aria-label="Zahlungsmethode">
|
||||
{paymentMethods.map((method) => {
|
||||
const active = paymentMethod === method.key;
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
role="radio"
|
||||
aria-checked={active}
|
||||
className={`payment-card ${active ? "is-active" : ""}`}
|
||||
key={method.key}
|
||||
onClick={() => setPaymentMethod(method.key)}
|
||||
>
|
||||
<span className="payment-card__badge">{method.badge}</span>
|
||||
<strong>{method.label}</strong>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<fieldset
|
||||
className="payment-fieldset"
|
||||
aria-describedby={error ? errorId : undefined}
|
||||
>
|
||||
<legend className="visually-hidden">Zahlungsmethode</legend>
|
||||
<div className="payment-grid">
|
||||
{paymentMethods.map((method) => {
|
||||
const active = paymentMethod === method.key;
|
||||
return (
|
||||
<label
|
||||
className={`payment-card ${active ? "is-active" : ""}`}
|
||||
key={method.key}
|
||||
>
|
||||
<input
|
||||
className="payment-card__input"
|
||||
type="radio"
|
||||
name="payment_method"
|
||||
value={method.key}
|
||||
checked={active}
|
||||
aria-invalid={!!error || undefined}
|
||||
onChange={() => setPaymentMethod(method.key)}
|
||||
/>
|
||||
<span className="payment-card__badge" aria-hidden="true">
|
||||
{method.badge}
|
||||
</span>
|
||||
<strong>{method.label}</strong>
|
||||
</label>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</fieldset>
|
||||
</section>
|
||||
|
||||
<section className="drawer-section drawer-totals">
|
||||
@ -311,7 +383,7 @@ function CartPanel() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{error && <p className="drawer-error">{error}</p>}
|
||||
<DrawerError id={errorId}>{error}</DrawerError>
|
||||
|
||||
<button
|
||||
className="atmos-btn atmos-btn--primary atmos-btn--block atmos-btn--lg"
|
||||
@ -347,6 +419,7 @@ function ProfilePanel() {
|
||||
} = useShop();
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [form, setForm] = useState(user || {});
|
||||
const errorId = "profile-error";
|
||||
|
||||
const update = (key, value) => setForm((current) => ({ ...current, [key]: value }));
|
||||
const notifications = user?.notifications || {};
|
||||
@ -412,13 +485,56 @@ function ProfilePanel() {
|
||||
{editing ? (
|
||||
<>
|
||||
<div className="drawer-grid drawer-grid--two">
|
||||
<Field label="Name" value={form.first_name || ""} onChange={(value) => update("first_name", value)} />
|
||||
<Field label="Nachname" value={form.surname || ""} onChange={(value) => update("surname", value)} />
|
||||
<Field label="Strasse" value={form.street_name || ""} onChange={(value) => update("street_name", value)} />
|
||||
<Field label="Nr." value={form.house_number || ""} onChange={(value) => update("house_number", value)} />
|
||||
<Field label="PLZ" value={form.zip_code || ""} onChange={(value) => update("zip_code", value)} />
|
||||
<Field label="Ort" value={form.city || ""} onChange={(value) => update("city", value)} />
|
||||
<Field label="Geburtsdatum" type="date" value={form.birthdate || ""} onChange={(value) => update("birthdate", value)} />
|
||||
<Field
|
||||
label="Name"
|
||||
value={form.first_name || ""}
|
||||
describedBy={error ? errorId : undefined}
|
||||
invalid={!!error}
|
||||
onChange={(value) => update("first_name", value)}
|
||||
/>
|
||||
<Field
|
||||
label="Nachname"
|
||||
value={form.surname || ""}
|
||||
describedBy={error ? errorId : undefined}
|
||||
invalid={!!error}
|
||||
onChange={(value) => update("surname", value)}
|
||||
/>
|
||||
<Field
|
||||
label="Strasse"
|
||||
value={form.street_name || ""}
|
||||
describedBy={error ? errorId : undefined}
|
||||
invalid={!!error}
|
||||
onChange={(value) => update("street_name", value)}
|
||||
/>
|
||||
<Field
|
||||
label="Nr."
|
||||
value={form.house_number || ""}
|
||||
describedBy={error ? errorId : undefined}
|
||||
invalid={!!error}
|
||||
onChange={(value) => update("house_number", value)}
|
||||
/>
|
||||
<Field
|
||||
label="PLZ"
|
||||
value={form.zip_code || ""}
|
||||
describedBy={error ? errorId : undefined}
|
||||
invalid={!!error}
|
||||
onChange={(value) => update("zip_code", value)}
|
||||
/>
|
||||
<Field
|
||||
label="Ort"
|
||||
value={form.city || ""}
|
||||
describedBy={error ? errorId : undefined}
|
||||
invalid={!!error}
|
||||
onChange={(value) => update("city", value)}
|
||||
/>
|
||||
<Field
|
||||
label="Geburtsdatum"
|
||||
type="date"
|
||||
value={form.birthdate || ""}
|
||||
describedBy={error ? errorId : undefined}
|
||||
invalid={!!error}
|
||||
onChange={(value) => update("birthdate", value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="atmos-btn-row">
|
||||
<button
|
||||
@ -556,7 +672,7 @@ function ProfilePanel() {
|
||||
)}
|
||||
</section>
|
||||
|
||||
{error && <p className="drawer-error">{error}</p>}
|
||||
<DrawerError id={errorId}>{error}</DrawerError>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -572,22 +688,124 @@ function ReadBlock({ label, value }) {
|
||||
|
||||
function ShopDrawer() {
|
||||
const { closePanel, panelOpen, panelType, user } = useShop();
|
||||
const drawerRef = useRef(null);
|
||||
const restoreFocusRef = useRef(null);
|
||||
const wasOpenRef = useRef(false);
|
||||
const drawerTitleId = useId();
|
||||
|
||||
const drawerLabel = !user ? "Konto" : panelType === "cart" ? "Warenkorb" : "Profil";
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof document === "undefined") return undefined;
|
||||
|
||||
if (!panelOpen) {
|
||||
if (wasOpenRef.current) {
|
||||
const restoreTarget = restoreFocusRef.current;
|
||||
if (restoreTarget && document.contains(restoreTarget)) {
|
||||
window.requestAnimationFrame(() => {
|
||||
restoreTarget.focus({ preventScroll: true });
|
||||
});
|
||||
}
|
||||
}
|
||||
wasOpenRef.current = false;
|
||||
return undefined;
|
||||
}
|
||||
|
||||
wasOpenRef.current = true;
|
||||
const activeElement = document.activeElement;
|
||||
if (
|
||||
activeElement instanceof HTMLElement &&
|
||||
!drawerRef.current?.contains(activeElement)
|
||||
) {
|
||||
restoreFocusRef.current = activeElement;
|
||||
}
|
||||
|
||||
const previousOverflow = document.body.style.overflow;
|
||||
document.body.style.overflow = "hidden";
|
||||
|
||||
const frameId = window.requestAnimationFrame(() => {
|
||||
const drawer = drawerRef.current;
|
||||
if (!drawer) return;
|
||||
const [firstFocusable] = getFocusableElements(drawer);
|
||||
(firstFocusable || drawer).focus({ preventScroll: true });
|
||||
});
|
||||
|
||||
return () => {
|
||||
window.cancelAnimationFrame(frameId);
|
||||
document.body.style.overflow = previousOverflow;
|
||||
};
|
||||
}, [panelOpen]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!panelOpen || typeof document === "undefined") return undefined;
|
||||
|
||||
const drawer = drawerRef.current;
|
||||
if (!drawer) return undefined;
|
||||
|
||||
const handleKeyDown = (event) => {
|
||||
if (event.key === "Escape") {
|
||||
event.preventDefault();
|
||||
closePanel();
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.key !== "Tab") return;
|
||||
|
||||
const focusableElements = getFocusableElements(drawer);
|
||||
if (focusableElements.length === 0) {
|
||||
event.preventDefault();
|
||||
drawer.focus({ preventScroll: true });
|
||||
return;
|
||||
}
|
||||
|
||||
const firstFocusable = focusableElements[0];
|
||||
const lastFocusable = focusableElements[focusableElements.length - 1];
|
||||
|
||||
if (!drawer.contains(document.activeElement)) {
|
||||
event.preventDefault();
|
||||
firstFocusable.focus({ preventScroll: true });
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.shiftKey && document.activeElement === firstFocusable) {
|
||||
event.preventDefault();
|
||||
lastFocusable.focus({ preventScroll: true });
|
||||
return;
|
||||
}
|
||||
|
||||
if (!event.shiftKey && document.activeElement === lastFocusable) {
|
||||
event.preventDefault();
|
||||
firstFocusable.focus({ preventScroll: true });
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("keydown", handleKeyDown);
|
||||
return () => document.removeEventListener("keydown", handleKeyDown);
|
||||
}, [closePanel, panelOpen]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={`drawer-backdrop ${panelOpen ? "is-open" : ""}`}
|
||||
aria-hidden="true"
|
||||
onClick={closePanel}
|
||||
/>
|
||||
<aside
|
||||
id="shop-drawer"
|
||||
ref={drawerRef}
|
||||
role="dialog"
|
||||
className={`shop-drawer ${panelOpen ? "is-open" : ""}`}
|
||||
aria-labelledby={drawerTitleId}
|
||||
aria-modal="true"
|
||||
aria-hidden={!panelOpen}
|
||||
inert={!panelOpen ? "" : undefined}
|
||||
tabIndex={-1}
|
||||
data-lenis-prevent
|
||||
>
|
||||
<header className="drawer-top">
|
||||
<span className="drawer-eyebrow">{drawerLabel}</span>
|
||||
<span className="drawer-eyebrow" id={drawerTitleId}>
|
||||
{drawerLabel}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
className="atmos-btn atmos-btn--outline atmos-btn--icon atmos-btn--sm"
|
||||
|
||||
@ -65,8 +65,6 @@
|
||||
|
||||
html {
|
||||
scroll-behavior: auto;
|
||||
overflow-x: hidden;
|
||||
overflow-x: clip;
|
||||
}
|
||||
|
||||
body {
|
||||
@ -74,8 +72,6 @@ body {
|
||||
background: var(--theme-bg);
|
||||
color: var(--theme-text);
|
||||
font-family: inherit;
|
||||
overflow-x: hidden;
|
||||
overflow-x: clip;
|
||||
transition:
|
||||
background-color 0.25s ease,
|
||||
color 0.25s ease;
|
||||
|
||||
@ -534,23 +534,37 @@
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.discovery-benefit-panel {
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
/* products & steps grids: handled by Grid12 md:6 col-spans */
|
||||
}
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
.discovery-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);
|
||||
}
|
||||
|
||||
.discovery-hero-stage,
|
||||
.discovery-order-panel {
|
||||
grid-column: 1;
|
||||
grid-row: auto;
|
||||
}
|
||||
|
||||
.discovery-hero-stage {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto minmax(0, 1fr) auto;
|
||||
gap: clamp(0.65rem, 1.4vw, 1rem);
|
||||
align-self: stretch;
|
||||
grid-template-rows: auto auto;
|
||||
gap: clamp(0.9rem, 2vw, 1.35rem);
|
||||
align-self: auto;
|
||||
place-items: stretch;
|
||||
}
|
||||
|
||||
@ -561,7 +575,12 @@
|
||||
|
||||
.discovery-hero-copy h1 {
|
||||
max-width: 12ch;
|
||||
font-size: clamp(2.4rem, 5.5vw, 4.6rem);
|
||||
font-size: clamp(2.4rem, 6.8vw, 4.8rem);
|
||||
}
|
||||
|
||||
.discovery-intro {
|
||||
width: min(100%, 44ch);
|
||||
max-width: 44ch;
|
||||
}
|
||||
|
||||
.discovery-hero-visual {
|
||||
@ -569,29 +588,23 @@
|
||||
grid-row: auto;
|
||||
justify-items: center;
|
||||
min-height: 0;
|
||||
height: min(42svh, 420px);
|
||||
height: clamp(18rem, 48svh, 32rem);
|
||||
}
|
||||
|
||||
.discovery-hero-visual img {
|
||||
width: min(74%, 430px);
|
||||
width: min(78%, 500px);
|
||||
height: auto;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.discovery-order-panel {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
justify-self: stretch;
|
||||
align-self: center;
|
||||
width: 100%;
|
||||
gap: var(--gap-xs);
|
||||
align-self: auto;
|
||||
width: min(100%, 46rem);
|
||||
max-width: 46rem;
|
||||
margin-inline: auto;
|
||||
gap: var(--gap-sm);
|
||||
}
|
||||
|
||||
.discovery-benefit-panel {
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
/* products & steps grids: handled by Grid12 md:6 col-spans */
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
@ -630,12 +643,12 @@
|
||||
}
|
||||
|
||||
.discovery-hero-visual {
|
||||
height: min(30svh, 260px);
|
||||
min-height: 190px;
|
||||
height: clamp(15rem, 36svh, 24rem);
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.discovery-hero-visual img {
|
||||
width: min(82%, 320px);
|
||||
width: min(82%, 420px);
|
||||
}
|
||||
|
||||
.discovery-panel-facts,
|
||||
|
||||
@ -24,9 +24,9 @@
|
||||
.hero {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 720px;
|
||||
min-height: max(720px, 100vh);
|
||||
min-height: max(720px, 100dvh);
|
||||
min-height: 680px;
|
||||
min-height: max(680px, 100vh);
|
||||
min-height: max(680px, 100dvh);
|
||||
overflow: hidden;
|
||||
isolation: isolate;
|
||||
background: var(--theme-bg);
|
||||
@ -48,7 +48,6 @@
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
background: var(--theme-bg);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.hero-material__texture {
|
||||
@ -56,7 +55,6 @@
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
background: var(--theme-bg);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.hero-wordmark {
|
||||
@ -79,7 +77,6 @@
|
||||
width: 100%;
|
||||
height: auto;
|
||||
opacity: 0.96;
|
||||
will-change: transform, opacity, filter;
|
||||
}
|
||||
|
||||
body.theme-light .hero-wordmark__image {
|
||||
@ -92,13 +89,12 @@ body.theme-light .hero-wordmark__image {
|
||||
top: clamp(20rem, 52vh, 40rem);
|
||||
left: 50%;
|
||||
z-index: 5;
|
||||
width: clamp(20rem, 31vw, 42rem);
|
||||
width: clamp(20rem, 29vw, 42rem);
|
||||
aspect-ratio: 1078 / 1284;
|
||||
margin: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
transform: translate(-50%, -50%);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.hero-product__inner {
|
||||
@ -107,7 +103,6 @@ body.theme-light .hero-wordmark__image {
|
||||
height: 100%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
.hero-product__image {
|
||||
@ -158,7 +153,6 @@ body.theme-light .hero-wordmark__image {
|
||||
flex-wrap: wrap;
|
||||
gap: clamp(0.75rem, 1.2vw, 1rem);
|
||||
margin-top: clamp(1.25rem, 3.2vh, 1.75rem);
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
/* Hero CTAs use the global .atmos-btn system (see src/style/buttons.css). */
|
||||
@ -190,7 +184,7 @@ body.theme-light .hero-wordmark__image {
|
||||
.intro-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 999;
|
||||
z-index: var(--z-overlay);
|
||||
background: var(--theme-paper);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
@ -591,12 +585,15 @@ body.theme-light .hero-wordmark__image {
|
||||
.hero-product {
|
||||
/* Tablet range (≤ 1180 px): viewports are taller relative to width,
|
||||
so we re-center the product instead of inheriting the desktop 52vh. */
|
||||
top: clamp(17rem, 44vh, 28rem);
|
||||
width: clamp(21rem, 45vw, 34rem);
|
||||
top: clamp(16rem, 36vh, 23rem);
|
||||
width: clamp(18rem, 40vw, 29rem);
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
width: min(23rem, calc(50vw - var(--page-x) - 5rem));
|
||||
right: var(--page-x);
|
||||
bottom: clamp(3.8rem, 8vh, 6rem);
|
||||
width: min(32rem, calc(100vw - (var(--page-x) * 2)));
|
||||
max-width: 32rem;
|
||||
}
|
||||
|
||||
.hero-scroll {
|
||||
@ -628,11 +625,38 @@ body.theme-light .hero-wordmark__image {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
.hero {
|
||||
min-height: 650px;
|
||||
min-height: max(650px, 100svh);
|
||||
min-height: max(650px, 100dvh);
|
||||
}
|
||||
|
||||
.hero-wordmark {
|
||||
top: clamp(4.8rem, 9svh, 6.8rem);
|
||||
}
|
||||
|
||||
.hero-product {
|
||||
top: clamp(18rem, 38svh, 27rem);
|
||||
width: clamp(18rem, 54vw, 32rem);
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
bottom: clamp(3rem, 7svh, 5.5rem);
|
||||
width: auto;
|
||||
max-width: 27rem;
|
||||
}
|
||||
|
||||
.hero-scroll {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.hero {
|
||||
min-height: 720px;
|
||||
min-height: max(720px, 100vh);
|
||||
min-height: max(720px, 100dvh);
|
||||
min-height: 620px;
|
||||
min-height: max(620px, 100svh);
|
||||
min-height: max(620px, 100dvh);
|
||||
}
|
||||
|
||||
.hero-material__texture {
|
||||
@ -640,7 +664,7 @@ body.theme-light .hero-wordmark__image {
|
||||
}
|
||||
|
||||
.hero-wordmark {
|
||||
top: clamp(5.8rem, 14svh, 7.5rem);
|
||||
top: clamp(7rem, 17svh, 8.5rem);
|
||||
left: var(--page-x);
|
||||
right: var(--page-x);
|
||||
}
|
||||
@ -649,11 +673,11 @@ body.theme-light .hero-wordmark__image {
|
||||
/* Phone: keep the product centered, but narrower than the viewport
|
||||
so it does not crowd the copy block near the bottom. */
|
||||
aspect-ratio: auto;
|
||||
top: clamp(11rem, 24svh, 14rem);
|
||||
top: clamp(12.5rem, 28svh, 16rem);
|
||||
left: 50%;
|
||||
right: auto;
|
||||
width: clamp(15rem, 74vw, 21rem);
|
||||
height: clamp(16rem, 38svh, 21rem);
|
||||
width: clamp(12.5rem, 62vw, 17rem);
|
||||
height: clamp(13.5rem, 31svh, 17rem);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
@ -716,16 +740,16 @@ body.theme-light .hero-wordmark__image {
|
||||
|
||||
@media (max-width: 430px) {
|
||||
.hero {
|
||||
min-height: 700px;
|
||||
min-height: max(700px, 100vh);
|
||||
min-height: max(700px, 100dvh);
|
||||
min-height: 608px;
|
||||
min-height: max(608px, 100svh);
|
||||
min-height: max(608px, 100dvh);
|
||||
}
|
||||
|
||||
.hero-product {
|
||||
/* Slightly tighter slot for compact phones. */
|
||||
top: clamp(10rem, 22svh, 13rem);
|
||||
width: clamp(14rem, 70vw, 18.5rem);
|
||||
height: clamp(15rem, 36svh, 19rem);
|
||||
top: clamp(12rem, 28svh, 14.5rem);
|
||||
width: clamp(12rem, 62vw, 16rem);
|
||||
height: clamp(13rem, 31svh, 16.5rem);
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
@ -746,6 +770,35 @@ body.theme-light .hero-wordmark__image {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) and (max-height: 620px) {
|
||||
.hero {
|
||||
min-height: 100svh;
|
||||
min-height: 100dvh;
|
||||
overflow: visible;
|
||||
padding-bottom: clamp(1rem, 4svh, 1.6rem);
|
||||
}
|
||||
|
||||
.hero-wordmark {
|
||||
top: clamp(6.2rem, 18svh, 7rem);
|
||||
}
|
||||
|
||||
.hero-product {
|
||||
top: clamp(8.6rem, 25svh, 10.5rem);
|
||||
width: clamp(12.5rem, 40vw, 16rem);
|
||||
height: clamp(13.5rem, 44svh, 16rem);
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
left: clamp(1rem, 5vw, 1.5rem);
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
width: calc(100% - clamp(2rem, 10vw, 3rem));
|
||||
margin-top: clamp(20rem, 60svh, 24rem);
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@container (max-width: 360px) {
|
||||
.product-bottom {
|
||||
flex-direction: column;
|
||||
@ -772,6 +825,5 @@ body.theme-light .hero-wordmark__image {
|
||||
.discovery-banner img {
|
||||
transition: none;
|
||||
animation: none;
|
||||
will-change: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@ -517,7 +517,7 @@ function LandingPage() {
|
||||
originalWidth: 1080,
|
||||
})}
|
||||
sizes={PRODUCT_CARD_IMAGE_SIZES}
|
||||
alt={item.name}
|
||||
alt=""
|
||||
className="product-image"
|
||||
data-product-transition-source
|
||||
loading={index < 3 ? "eager" : "lazy"}
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.is-hidden-md-down {
|
||||
display: revert;
|
||||
display: block;
|
||||
}
|
||||
.is-hidden-md-up {
|
||||
display: none;
|
||||
|
||||
@ -63,7 +63,7 @@
|
||||
letter-spacing: 0.04em;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
white-space: normal;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
@ -144,16 +144,16 @@
|
||||
--btn-fg-hover: var(--theme-accent-contrast);
|
||||
--btn-border: var(--theme-accent-fill);
|
||||
--btn-border-hover: var(--theme-accent-fill-strong);
|
||||
--btn-stripe: rgba(255, 255, 255, 0.85);
|
||||
--btn-stripe: rgba(var(--theme-accent-contrast-rgb) / 0.85);
|
||||
}
|
||||
|
||||
.atmos-btn--invert {
|
||||
--btn-bg: #fff;
|
||||
--btn-bg-hover: #fff;
|
||||
--btn-bg: var(--theme-accent-contrast);
|
||||
--btn-bg-hover: var(--theme-accent-contrast);
|
||||
--btn-fg: var(--theme-accent-fill-strong);
|
||||
--btn-fg-hover: var(--theme-accent-fill-strong);
|
||||
--btn-border: #fff;
|
||||
--btn-border-hover: #fff;
|
||||
--btn-border: var(--theme-accent-contrast);
|
||||
--btn-border-hover: var(--theme-accent-contrast);
|
||||
--btn-stripe: var(--theme-accent-fill-strong);
|
||||
--btn-shadow-hover: 0 16px 36px rgba(0, 0, 0, 0.22);
|
||||
}
|
||||
@ -213,31 +213,31 @@
|
||||
they remain readable. Apply by adding `data-on-accent` to a wrapper. */
|
||||
[data-on-accent] .atmos-btn--primary,
|
||||
.atmos-btn--primary[data-on-accent] {
|
||||
--btn-bg: #fff;
|
||||
--btn-bg-hover: #fff;
|
||||
--btn-bg: var(--theme-accent-contrast);
|
||||
--btn-bg-hover: var(--theme-accent-contrast);
|
||||
--btn-fg: var(--theme-accent-fill-strong);
|
||||
--btn-fg-hover: var(--theme-accent-fill-strong);
|
||||
--btn-border: #fff;
|
||||
--btn-border-hover: #fff;
|
||||
--btn-border: var(--theme-accent-contrast);
|
||||
--btn-border-hover: var(--theme-accent-contrast);
|
||||
--btn-stripe: var(--theme-accent-fill-strong);
|
||||
}
|
||||
|
||||
[data-on-accent] .atmos-btn--secondary,
|
||||
.atmos-btn--secondary[data-on-accent] {
|
||||
--btn-bg: rgba(255, 255, 255, 0.14);
|
||||
--btn-bg-hover: rgba(255, 255, 255, 0.22);
|
||||
--btn-fg: #fff;
|
||||
--btn-fg-hover: #fff;
|
||||
--btn-border: rgba(255, 255, 255, 0.32);
|
||||
--btn-border-hover: #fff;
|
||||
--btn-stripe: #fff;
|
||||
--btn-bg: rgba(var(--theme-accent-contrast-rgb) / 0.14);
|
||||
--btn-bg-hover: rgba(var(--theme-accent-contrast-rgb) / 0.22);
|
||||
--btn-fg: var(--theme-accent-contrast);
|
||||
--btn-fg-hover: var(--theme-accent-contrast);
|
||||
--btn-border: rgba(var(--theme-accent-contrast-rgb) / 0.32);
|
||||
--btn-border-hover: var(--theme-accent-contrast);
|
||||
--btn-stripe: var(--theme-accent-contrast);
|
||||
}
|
||||
|
||||
[data-on-accent] .atmos-btn--ghost,
|
||||
.atmos-btn--ghost[data-on-accent] {
|
||||
--btn-fg: rgba(255, 255, 255, 0.86);
|
||||
--btn-fg-hover: #fff;
|
||||
--btn-bg-hover: rgba(255, 255, 255, 0.12);
|
||||
--btn-fg: rgba(var(--theme-accent-contrast-rgb) / 0.86);
|
||||
--btn-fg-hover: var(--theme-accent-contrast);
|
||||
--btn-bg-hover: rgba(var(--theme-accent-contrast-rgb) / 0.12);
|
||||
}
|
||||
|
||||
/* ----- Sizes ------------------------------------------------------------- */
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
.navbar {
|
||||
position: sticky;
|
||||
top: clamp(0.75rem, 2vw, 1.25rem);
|
||||
z-index: 998;
|
||||
z-index: var(--z-nav);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
@ -112,23 +112,27 @@
|
||||
transform: translateX(18px);
|
||||
}
|
||||
|
||||
.nav-label--compact {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hero variant */
|
||||
.navbar--hero {
|
||||
position: fixed;
|
||||
top: clamp(0.75rem, 2.1vw, 1.4rem);
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 998;
|
||||
z-index: var(--z-nav);
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.navbar--hero .nav-pill {
|
||||
background: rgba(15, 15, 15, 0.58);
|
||||
border-color: rgba(255, 255, 255, 0.22);
|
||||
background: rgba(10, 10, 10, 0.82);
|
||||
border-color: rgba(255, 255, 255, 0.34);
|
||||
}
|
||||
|
||||
.navbar--hero .nav-link {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar--hero .nav-button {
|
||||
@ -146,7 +150,7 @@
|
||||
|
||||
.navbar--hero .nav-link:hover,
|
||||
.navbar--hero .nav-link.active {
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
background: rgba(255, 255, 255, 0.22);
|
||||
}
|
||||
|
||||
/* Detail page variant */
|
||||
@ -190,35 +194,58 @@
|
||||
}
|
||||
|
||||
.nav-pill {
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.nav-pill::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: fit-content;
|
||||
max-width: calc(100vw - 1.5rem);
|
||||
justify-content: center;
|
||||
flex-wrap: nowrap;
|
||||
gap: clamp(0.2rem, 1.2vw, 0.4rem);
|
||||
padding: 0.35rem;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
min-height: 40px;
|
||||
min-width: 40px;
|
||||
padding-inline: 0.68rem;
|
||||
font-size: 0.75rem;
|
||||
min-height: 38px;
|
||||
min-width: 38px;
|
||||
flex: 0 0 auto;
|
||||
padding-inline: 0.5rem;
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
|
||||
.nav-link--brand {
|
||||
padding-inline: 0.72rem;
|
||||
padding-inline: 0.65rem;
|
||||
}
|
||||
|
||||
.nav-brand-logo {
|
||||
width: 54px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.nav-theme-switch {
|
||||
flex: 0 0 auto;
|
||||
min-width: 42px;
|
||||
padding-inline: 0.45rem;
|
||||
}
|
||||
|
||||
.nav-theme-switch__track {
|
||||
width: 36px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.nav-theme-switch__thumb {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.nav-theme-switch.is-light .nav-theme-switch__thumb {
|
||||
transform: translateX(16px);
|
||||
}
|
||||
|
||||
.nav-link--cart .nav-label--full {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-link--cart .nav-label--compact {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.navbar--hero .nav-pill {
|
||||
width: fit-content;
|
||||
max-width: calc(100vw - 1.5rem);
|
||||
@ -226,11 +253,58 @@
|
||||
}
|
||||
|
||||
@media (max-width: 390px) {
|
||||
.nav-pill {
|
||||
padding: 0.3rem;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding-inline: 0.58rem;
|
||||
padding-inline: 0.3rem;
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
|
||||
.nav-link--brand {
|
||||
padding-inline: 0.62rem;
|
||||
padding-inline: 0.45rem;
|
||||
}
|
||||
|
||||
.nav-brand-logo {
|
||||
width: 44px;
|
||||
}
|
||||
|
||||
.nav-theme-switch {
|
||||
min-width: 36px;
|
||||
padding-inline: 0.3rem;
|
||||
}
|
||||
|
||||
.nav-theme-switch__track {
|
||||
width: 32px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.nav-theme-switch__thumb {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.nav-theme-switch.is-light .nav-theme-switch__thumb {
|
||||
transform: translateX(14px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 430px) {
|
||||
.nav-link--back {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.nav-link--back span:not(.nav-back-icon) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.nav-link,
|
||||
.nav-theme-switch__thumb,
|
||||
.nav-theme-switch__track,
|
||||
.nav-pill {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -21,11 +21,12 @@
|
||||
--theme-black: #262626;
|
||||
--theme-white: #eaeaea;
|
||||
--theme-accent: #c24700;
|
||||
--theme-accent-rgb: 255 106 0;
|
||||
--theme-accent-rgb: 194 71 0;
|
||||
--theme-accent-fill: #c24700;
|
||||
--theme-accent-fill-rgb: 194 71 0;
|
||||
--theme-accent-fill-strong: #a83b00;
|
||||
--theme-accent-contrast: #ffffff;
|
||||
--theme-accent-contrast-rgb: 255 255 255;
|
||||
--theme-focus-ring: #ff9440;
|
||||
|
||||
/* Surfaces (dark theme — default) */
|
||||
@ -92,7 +93,7 @@
|
||||
--radius-xl: 0;
|
||||
|
||||
/* Typography scale */
|
||||
--text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.875rem);
|
||||
--text-xs: clamp(0.85rem, 0.75rem + 0.25vw, 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);
|
||||
@ -113,6 +114,13 @@
|
||||
/* Accessibility */
|
||||
--touch-target-min: 44px;
|
||||
|
||||
/* Z-index scale */
|
||||
--z-toast: 600;
|
||||
--z-drawer-backdrop: 700;
|
||||
--z-drawer: 800;
|
||||
--z-nav: 900;
|
||||
--z-overlay: 1000;
|
||||
|
||||
/* Motion */
|
||||
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
|
||||
--ease-snap: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
|
||||
@ -2,7 +2,7 @@ export const PRODUCT_CARD_IMAGE_SIZES =
|
||||
"(min-width: 1280px) 520px, (min-width: 1024px) 31vw, (min-width: 768px) 46vw, 92vw";
|
||||
|
||||
export const HERO_PRODUCT_IMAGE_SIZES =
|
||||
"(max-width: 760px) 92vw, (max-width: 1180px) 45vw, 768px";
|
||||
"(max-width: 430px) 62vw, (max-width: 760px) 62vw, (max-width: 1180px) 40vw, 29vw";
|
||||
|
||||
export function buildPublicImageSrcSet(src, { folder, widths, originalWidth }) {
|
||||
const fileName = src.replace(/^\//, "");
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user