Marco
55de9b3e29
- Hero CTA: whitespace-nowrap forced the button as wide as the full 32-char phrase, overflowing the stacked mobile column. Now wraps to two lines below lg:, single line from lg: up where there's room. - Navbar: the account/cart icons are 44px touch targets with the glyph centered inside, so the outer gap-2 read as too much space on top of that padding. Grouped them with no gap between just the two. - Divider: "Klarheit -> Fokus -> Entlastung" plus its connector icons needs ~550px to fit one row even at the site's 768px fluid floor, far more than a phone's ~310px content width. Added a component-scoped --divider-word-size (independent from --text-h2) plus a <640px override that shrinks the words/icons/gaps together.
190 lines
8.5 KiB
CSS
190 lines
8.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;
|
|
/* Low-stock warning — distinct from --color-brand's golden yellow (used
|
|
for the discount badge) so the two pills never read as the same thing. */
|
|
--color-warning: #c2410c;
|
|
--color-warning-subtle: #fdf1e9;
|
|
|
|
/* 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);
|
|
/* Own token, mirrors --text-h2's clamp() exactly rather than the Word
|
|
component reading var(--text-h2) directly — that's what lets the
|
|
mobile override below shrink just this component's words without
|
|
touching every other text-h2 heading site-wide. */
|
|
--divider-word-size: clamp(1.625rem, 1.1964rem + 0.8929vw, 2rem);
|
|
}
|
|
|
|
/* This project's fluid() scale (see fluid.ts) is calibrated for the
|
|
768-1440px Tablet-Desktop range and floors out at the 768px value for
|
|
any narrower viewport (clamp()'s MIN bound) — by design, see the other
|
|
fluid tokens above. Divider is the one spot that floor doesn't work:
|
|
the "Klarheit → Fokus → Entlastung" phrase plus its connector icons
|
|
needs ~550px of width to lay out on one row even at the 768px floor
|
|
size, far more than a phone's ~310px content width. Below Tailwind's
|
|
sm: breakpoint, shrink these tokens further so the phrase gets much
|
|
closer to fitting on one row instead of stacking into three separate
|
|
centered lines (see Divider.tsx's gap-x-3/gap-3 mobile overrides,
|
|
same breakpoint). Scoped to these component-only tokens, not
|
|
--text-h2 itself. */
|
|
@media (max-width: 639px) {
|
|
:root {
|
|
--divider-word-size: 1.125rem;
|
|
--divider-arrow-w: 1.125rem;
|
|
--divider-arrow-h: 0.3125rem;
|
|
--divider-sparkle-w: 0.875rem;
|
|
--divider-sparkle-h: 1.15rem;
|
|
--divider-sparkle-inner-w: 0.8rem;
|
|
--divider-sparkle-inner-h: 1.075rem;
|
|
}
|
|
}
|
|
|
|
html {
|
|
scroll-padding-top: 6.25rem; /* navbar height */
|
|
/* Reserves the scrollbar's width permanently, so any modal's
|
|
overflow:hidden scroll lock (NewsletterModal, VersandModal) never
|
|
removes/re-adds the scrollbar itself — without this, losing the
|
|
scrollbar on open widens the viewport by its width and every fixed/sticky
|
|
element (Navbar included) visibly snaps sideways for one frame. */
|
|
scrollbar-gutter: stable;
|
|
}
|
|
|
|
body {
|
|
background: var(--color-bg-base);
|
|
color: var(--color-text-body);
|
|
font-family: var(--font-sans);
|
|
}
|