Marco
9e5532be63
- New /shop overview, /cart (real cart state via useSyncExternalStore), /versand (shipping policy page with TOC) and /newsletter detail page - Cart: quantity/removal, order summary, related-products cross-sell with randomized picks, VersandModal quick-reference instead of navigating away, MwSt. disclosure next to unit prices - Add-to-cart UX: inline success feedback (green state) plus a fly-to-navbar-cart-icon animation (CartFlyProvider) with a delayed badge count-up; AddToCartButton no longer navigates straight to /cart - Shared lib/products.ts catalog and lib/shipping.ts constants (cost, free-shipping threshold, handling/transit days) so cart, trust badges and the versand page can never drift apart - Fix Navbar smooth-scroll easing (ease-out instead of ease-in-out, no more perceived start delay); compress newsletter modal photo 2.4MB -> 85KB to fix first-open jank
151 lines
6.5 KiB
CSS
151 lines
6.5 KiB
CSS
@import "tailwindcss";
|
|
|
|
/*
|
|
* Fluid design tokens — every value below scales continuously via clamp()
|
|
* between the Tablet breakpoint (768px) and Desktop (1440px). Below 768px
|
|
* the clamp() floor freezes the value automatically (no separate mobile
|
|
* media query needed for sizing — only for structural layout changes,
|
|
* see the `md:` breakpoint usage in components).
|
|
*
|
|
* Spacing overrides Tailwind's own numeric scale (--spacing-4 etc.) at the
|
|
* exact numbers the styleguide already used (n times 0.25rem equals the
|
|
* desktop value), so every existing p-4, gap-6, px-20 (etc.) utility
|
|
* becomes fluid for free.
|
|
*/
|
|
@theme {
|
|
/* Fonts */
|
|
--font-sans: var(--font-inter), system-ui, sans-serif;
|
|
--font-display: var(--font-playfair), Georgia, serif;
|
|
--font-serif: var(--font-lora), Georgia, serif;
|
|
--font-script: var(--font-caveat), cursive;
|
|
|
|
/* Colors */
|
|
--color-brand: #f6a701;
|
|
--color-brand-hover: #cf8e01; /* verified against the live Figma NavButtonFilled/Hover variant */
|
|
--color-bg-base: #f8f5f1;
|
|
--color-bg-white: #ffffff;
|
|
--color-bg-muted: #f3efe9;
|
|
--color-bg-dark: #1a1a18;
|
|
--color-text-primary: #1a1a18;
|
|
--color-text-body: #2c2c2a;
|
|
--color-text-muted: #6b6b69;
|
|
--color-text-light: #9b9896;
|
|
--color-text-on-dark: #ffffff;
|
|
--color-border: #e5e0d8;
|
|
--color-overlay: rgba(134, 134, 134, 0.55);
|
|
--color-checkout-active: #f6a701;
|
|
--color-checkout-done: #1a1a18;
|
|
--color-toc-active-border: #f6a701;
|
|
--color-success: #2f8f4e;
|
|
--color-success-subtle: #e8f4ea;
|
|
|
|
/* Radius */
|
|
--radius-xs: 0.25rem;
|
|
--radius-sm: 0.5rem;
|
|
--radius-md: 0.75rem;
|
|
|
|
/* Shadows */
|
|
--shadow-card: 0 2px 12px rgba(26, 26, 24, 0.06);
|
|
--shadow-modal: 0 8px 40px rgba(26, 26, 24, 0.16);
|
|
--shadow-sidebar: 0 2px 8px rgba(26, 26, 24, 0.08);
|
|
|
|
/* Type scale (fluid 768->1440) */
|
|
--text-display: clamp(2.75rem, 1.3214rem + 2.9762vw, 4rem);
|
|
--text-display--line-height: 1.1;
|
|
--text-h-feature: clamp(1.875rem, 1.1607rem + 1.4881vw, 2.5rem);
|
|
--text-h-feature--line-height: 1.2;
|
|
/* New role, added for page-todo-karten's hero heading (48px Desktop) —
|
|
doesn't match any existing scale step (h-feature=40, h1=36), Figma's
|
|
own measured value takes priority over eyeballing it into a near
|
|
token (Why-point 4). Tablet floor via the styleguide's 80-85% ratio,
|
|
rounded to 40px. "Product/tool page hero H1" role, distinct from
|
|
--text-h1 (already spoken for: "Seiten-H1 (Blog-Detail, Warenkorb,
|
|
etc.)" per styleguide.md §2.2 — a different, smaller role). Also used
|
|
by page-weekly-impulses's hero heading — same 48px role, reused
|
|
rather than minting a near-duplicate token. */
|
|
--text-h-page: clamp(2.5rem, 1.9286rem + 1.1905vw, 3rem);
|
|
--text-h-page--line-height: 1.15;
|
|
--text-h1: clamp(1.75rem, 1.1786rem + 1.1905vw, 2.25rem);
|
|
--text-h1--line-height: 1.15;
|
|
--text-h2: clamp(1.625rem, 1.1964rem + 0.8929vw, 2rem);
|
|
--text-h2--line-height: 1.25;
|
|
--text-h-section: clamp(1.4375rem, 1.0804rem + 0.744vw, 1.75rem);
|
|
--text-h-section--line-height: 1.3;
|
|
--text-h-emphasis: clamp(1.25rem, 0.9643rem + 0.5952vw, 1.5rem);
|
|
--text-h-emphasis--line-height: 1.4;
|
|
--text-h3: clamp(1.1875rem, 0.9732rem + 0.4464vw, 1.375rem);
|
|
--text-h3--line-height: 1.35;
|
|
--text-h-small: clamp(1.125rem, 0.9821rem + 0.2976vw, 1.25rem);
|
|
--text-h-small--line-height: 1.4;
|
|
--text-h4: clamp(1rem, 0.8571rem + 0.2976vw, 1.125rem);
|
|
--text-h4--line-height: 1.4;
|
|
--text-body: 1rem;
|
|
--text-body--line-height: 1.6;
|
|
--text-body-sm: 0.875rem;
|
|
--text-body-sm--line-height: 1.55;
|
|
--text-label: 0.75rem;
|
|
--text-label--line-height: 1.4;
|
|
|
|
/* Spacing scale (fluid 768->1440) — overrides Tailwind's default n*0.25rem
|
|
at these exact steps, so p-4/gap-6/px-20/etc. become fluid automatically */
|
|
--spacing-1: clamp(0.25rem, 0.25rem + 0vw, 0.25rem);
|
|
--spacing-2: clamp(0.5rem, 0.5rem + 0vw, 0.5rem);
|
|
--spacing-3: clamp(0.625rem, 0.4821rem + 0.2976vw, 0.75rem);
|
|
--spacing-4: clamp(0.875rem, 0.7321rem + 0.2976vw, 1rem);
|
|
--spacing-5: clamp(1rem, 0.7143rem + 0.5952vw, 1.25rem);
|
|
--spacing-6: clamp(1.25rem, 0.9643rem + 0.5952vw, 1.5rem);
|
|
--spacing-8: clamp(1.5rem, 0.9286rem + 1.1905vw, 2rem);
|
|
--spacing-10: clamp(1.75rem, 0.8929rem + 1.7857vw, 2.5rem);
|
|
--spacing-12: clamp(2rem, 0.8571rem + 2.381vw, 3rem);
|
|
--spacing-16: clamp(2.5rem, 0.7857rem + 3.5714vw, 4rem);
|
|
--spacing-20: clamp(3rem, 0.7143rem + 4.7619vw, 5rem);
|
|
--spacing-24: clamp(3.5rem, 0.6429rem + 5.9524vw, 6rem);
|
|
--spacing-30: clamp(4rem, 0rem + 8.3333vw, 7.5rem);
|
|
|
|
/* Transitions */
|
|
--transition-fast: 150ms ease;
|
|
--transition-base: 250ms ease;
|
|
--transition-slow: 400ms ease;
|
|
}
|
|
|
|
:root {
|
|
/* Layout — not part of Tailwind's numeric spacing scale, referenced via
|
|
arbitrary-value syntax (e.g. px-[var(--layout-padding-x)]) */
|
|
--layout-max-width: 75rem; /* 1200px */
|
|
--layout-padding-x: clamp(2rem, -1.4286rem + 7.1429vw, 5rem);
|
|
--layout-grid-gap: clamp(1rem, 0.4286rem + 1.1905vw, 1.5rem);
|
|
--layout-grid-gap-lg: clamp(1.25rem, 0.3929rem + 1.7857vw, 2rem);
|
|
|
|
/* One-off fluid values that aren't part of a broader scale */
|
|
--hero-avatar-size: clamp(2.25rem, 1.6071rem + 1.3393vw, 2.8125rem);
|
|
/* Newsletter copy column — was a hard 38.25rem, which didn't leave enough
|
|
room for the form column at the 768px tablet floor (only 656px of
|
|
content width available for 612px column plus 56px gap), crushing the
|
|
input/button/privacy text to near-zero width and overflowing the page.
|
|
Scales down to 23rem at 768px instead. */
|
|
--newsletter-copy-width: clamp(23rem, 5.5714rem + 36.3095vw, 38.25rem);
|
|
|
|
/* Divider section icons (arrow separators, sparkle) — previously hard
|
|
rem values while the "Klarheit/Fokus/Entlastung" text next to them
|
|
used the fluid text-h2 token, so the icons visually stayed still
|
|
while the words scaled. Same fluid(minPx, maxPx) formula as the rest
|
|
of this file, floor ~82.5% of the Desktop value per the styleguide's
|
|
80-85% Mobile-ratio guidance. */
|
|
--divider-arrow-w: clamp(2.125rem, 1.5536rem + 1.1905vw, 2.625rem);
|
|
--divider-arrow-h: clamp(0.625rem, 0.4821rem + 0.2976vw, 0.75rem);
|
|
--divider-sparkle-w: clamp(1.5625rem, 1.1554rem + 0.8482vw, 1.91875rem);
|
|
--divider-sparkle-h: clamp(2.0625rem, 1.5554rem + 1.0565vw, 2.50625rem);
|
|
--divider-sparkle-inner-w: clamp(1.4375rem, 1.09875rem + 0.706vw, 1.734rem);
|
|
--divider-sparkle-inner-h: clamp(1.9375rem, 1.4375rem + 1.0417vw, 2.375rem);
|
|
}
|
|
|
|
html {
|
|
scroll-padding-top: 6.25rem; /* navbar height */
|
|
}
|
|
|
|
body {
|
|
background: var(--color-bg-base);
|
|
color: var(--color-text-body);
|
|
font-family: var(--font-sans);
|
|
}
|