Marco
cc935420ec
Tablet layout (768-1023px) hit the md: grid switch exactly where the fluid clamp() tokens were already at their floor, leaving no room to shrink. Moves the fluid floor and structural breakpoint down together to sm: (640px) so real tablets always get the fluid, desktop-like structure; consolidates the ad-hoc md:+lg: patchwork in Hero/About/ Newsletter/Footer/Tools back onto one line, leaving documented lg: exceptions where content genuinely doesn't fit yet. Also shortens the Hero heading to a single sentence with no trailing period (the brand's orange dot already renders one, animated).
194 lines
8.6 KiB
CSS
194 lines
8.6 KiB
CSS
@import "tailwindcss";
|
|
|
|
/*
|
|
* Fluid design tokens — every value below scales continuously via clamp()
|
|
* between the structural breakpoint (640px) and Desktop (1440px). Below
|
|
* 640px the clamp() floor freezes the value automatically (no separate
|
|
* mobile media query needed for sizing — only for structural layout
|
|
* changes, see the `sm:` 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 640->1440) */
|
|
--text-display: clamp(2.75rem, 1.75rem + 2.5vw, 4rem);
|
|
--text-display--line-height: 1.1;
|
|
--text-h-feature: clamp(1.875rem, 1.375rem + 1.25vw, 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, 2.1rem + 1vw, 3rem);
|
|
--text-h-page--line-height: 1.15;
|
|
--text-h1: clamp(1.75rem, 1.35rem + 1vw, 2.25rem);
|
|
--text-h1--line-height: 1.15;
|
|
--text-h2: clamp(1.625rem, 1.325rem + 0.75vw, 2rem);
|
|
--text-h2--line-height: 1.25;
|
|
--text-h-section: clamp(1.4375rem, 1.1875rem + 0.625vw, 1.75rem);
|
|
--text-h-section--line-height: 1.3;
|
|
--text-h-emphasis: clamp(1.25rem, 1.05rem + 0.5vw, 1.5rem);
|
|
--text-h-emphasis--line-height: 1.4;
|
|
--text-h3: clamp(1.1875rem, 1.0375rem + 0.375vw, 1.375rem);
|
|
--text-h3--line-height: 1.35;
|
|
--text-h-small: clamp(1.125rem, 1.025rem + 0.25vw, 1.25rem);
|
|
--text-h-small--line-height: 1.4;
|
|
--text-h4: clamp(1rem, 0.9rem + 0.25vw, 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 640->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.525rem + 0.25vw, 0.75rem);
|
|
--spacing-4: clamp(0.875rem, 0.775rem + 0.25vw, 1rem);
|
|
--spacing-5: clamp(1rem, 0.8rem + 0.5vw, 1.25rem);
|
|
--spacing-6: clamp(1.25rem, 1.05rem + 0.5vw, 1.5rem);
|
|
--spacing-8: clamp(1.5rem, 1.1rem + 1vw, 2rem);
|
|
--spacing-10: clamp(1.75rem, 1.15rem + 1.5vw, 2.5rem);
|
|
--spacing-12: clamp(2rem, 1.2rem + 2vw, 3rem);
|
|
--spacing-16: clamp(2.5rem, 1.3rem + 3vw, 4rem);
|
|
--spacing-20: clamp(3rem, 1.4rem + 4vw, 5rem);
|
|
--spacing-24: clamp(3.5rem, 1.5rem + 5vw, 6rem);
|
|
--spacing-30: clamp(4rem, 1.2rem + 7vw, 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, -0.4rem + 6vw, 5rem);
|
|
--layout-grid-gap: clamp(1rem, 0.6rem + 1vw, 1.5rem);
|
|
--layout-grid-gap-lg: clamp(1.25rem, 0.65rem + 1.5vw, 2rem);
|
|
|
|
/* One-off fluid values that aren't part of a broader scale */
|
|
--hero-avatar-size: clamp(2.25rem, 1.8rem + 1.125vw, 2.8125rem);
|
|
/* Newsletter copy column — was a hard 38.25rem, which didn't leave enough
|
|
room for the form column at the 640px structural floor (only ~576px of
|
|
content width available for a 612px column plus gap at that width),
|
|
crushing the input/button/privacy text to near-zero width and
|
|
overflowing the page. Scales down to 23rem at 640px instead. Note: the
|
|
inner input+button row still switches to a row layout at `lg:` (1024px),
|
|
not at the site's `sm:` (640px) structural line — even at this reduced
|
|
floor there isn't enough room for input+button side by side below
|
|
~900px, see Newsletter.tsx's own comment. */
|
|
--newsletter-copy-width: clamp(23rem, 10.8rem + 30.5vw, 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.725rem + 1vw, 2.625rem);
|
|
--divider-arrow-h: clamp(0.625rem, 0.525rem + 0.25vw, 0.75rem);
|
|
--divider-sparkle-w: clamp(1.5625rem, 1.2775rem + 0.7125vw, 1.9188rem);
|
|
--divider-sparkle-h: clamp(2.0625rem, 1.7075rem + 0.8875vw, 2.5063rem);
|
|
--divider-sparkle-inner-w: clamp(1.4375rem, 1.2003rem + 0.593vw, 1.734rem);
|
|
--divider-sparkle-inner-h: clamp(1.9375rem, 1.5875rem + 0.875vw, 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.325rem + 0.75vw, 2rem);
|
|
}
|
|
|
|
/* This project's fluid() scale (see fluid.ts) is calibrated for the
|
|
640-1440px structural-to-Desktop range and floors out at the 640px 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 640px
|
|
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);
|
|
}
|