diff --git a/app/checkout/components/CheckoutContent.tsx b/app/checkout/components/CheckoutContent.tsx index 3f8418c..bf7003c 100644 --- a/app/checkout/components/CheckoutContent.tsx +++ b/app/checkout/components/CheckoutContent.tsx @@ -668,7 +668,15 @@ export function CheckoutContent({ {/* Form column */}
{/* 1. Rechnungsadresse */} - + {/* border-[#c4b8a0], not the shared border-border (#e5e0d8) — that + token is nearly the same luminance as this card's own bg-bg-base + background (#f8f5f1), so the card's outline barely read at all + (fixed 2026-07-24, feedback: "die Striche bei den Steps sind zu + hell"). Darker but still on the warm-cream palette, scoped to + just these 4 step cards rather than the shared token, since + border-border reads fine everywhere else it's paired with a + genuinely different background. */} +

{/* 2. Versandart */} - +

{/* 3. Zahlungsart */} - +

-

+

{/* Quote row: script quote / divider / author bio — side-by-side - from md+, stacked with a horizontal divider below md */} -

+ from lg: (was md:) — even with the text column's wider Tablet + share above, quote + divider + the whitespace-nowrap bio ("Gründer + von einfach-produktiv.") together still needed more room than + Tablet's ~384px column has. Stacked with a horizontal divider + through the whole Tablet range instead, side-by-side (vertical + divider) only once there's real room at lg:. */} +
{/* Caveat script text with signature positioned below */}
@@ -58,12 +63,12 @@ export function About() {
- {/* Divider — horizontal full-width line below md, vertical - gold line beside the author bio from md+ */} -
+ {/* Divider — horizontal full-width line below lg:, vertical + gold line beside the author bio from lg: */} +

Björn.

diff --git a/app/components/CheckoutSteps.tsx b/app/components/CheckoutSteps.tsx index 03ede26..8d4ed4b 100644 --- a/app/components/CheckoutSteps.tsx +++ b/app/components/CheckoutSteps.tsx @@ -20,7 +20,12 @@ function StepCircle({ state, number }: { state: StepState; number: number }) { ); } return ( -
+ // border-[#c4b8a0], not the shared border-border (#e5e0d8) — nearly the + // same luminance as the page's own bg-bg-base (#f8f5f1), barely visible + // (fixed 2026-07-24, feedback: "die Striche bei den Nummern-Steps sind + // zu hell"). Same color as the connector line below and the checkout + // step cards' own border fix, for consistency. +
{number}
); @@ -50,7 +55,7 @@ export function CheckoutSteps({ current }: { current: number }) {
- {i < STEP_LABELS.length - 1 &&
} + {i < STEP_LABELS.length - 1 &&
}
); })} diff --git a/app/components/Hero.tsx b/app/components/Hero.tsx index bb97bf8..4dc4789 100644 --- a/app/components/Hero.tsx +++ b/app/components/Hero.tsx @@ -28,17 +28,19 @@ function HeroImage() { export function Hero() { return (
- {/* Structural breakpoint is md: (768px), same as the site-wide - convention — briefly moved to lg: (see the figma-to-nextjs - skill's Gotcha #5) because at md:col-span-5 the text column was - only ~283px at 768px and the full-size CTA/subtitle text made the - heading/CTA/social-proof row wrap to 3 cramped lines. Reverted - 2026-07-24: the CTA/subtitle/icon sizing added since then for - true mobile widths (see each one's own comment below) uses fixed - sizes well under half that column width, so the original problem - doesn't recur — moving back to md: means Tablet gets the real - 5/7 grid (image beside text) instead of stacking full-width like - a phone. */} + {/* Structural breakpoint is md: (768px) for the GRID only — the text + column stays ~283-320px wide through the whole 768-1023px Tablet + range regardless. Below, every piece of *content* inside the text + column (heading/subtitle/CTA/social-proof) keeps its smaller, + fixed-below-lg: sizing all the way through Tablet too, not just + true Mobile — reusing the full fluid-token sizes at md: (as a + first pass 2026-07-24 briefly did) put the original ~19-44px + fluid floors right back in that narrow column, recreating the + exact 3-line-wrap problem the old `lg:` structural exception + existed to avoid. Splitting "grid at md:" from "full-size content + at lg:" gets both: Tablet shows the real 5/7 grid, but with + content sized for its column's actual width, not the column + width `lg:` was designed for. */}
{/* Text content — first in DOM/visual order at every breakpoint so @@ -48,18 +50,21 @@ export function Hero() { viewport — this doubles as the page's entrance animation. */} - {/* Heading — forced break after "darf" only in the sm-md tablet - range (Hero stacked full-width there, natural wrap landed - awkwardly). Removed at true mobile widths (below sm:) 2026-07-24 - — narrower still, natural wrap there reads fine, and the - forced break made "darf" the whole first line, leaving very - little text above the CTA. Natural wrap from md: up too, once - the 5/12 grid gives the column real width again. */} + {/* Heading — smaller fixed-ish size below lg: (text-h1, still a + real paired font-size+line-height token, not an arbitrary + value) — text-display's own 44px floor wraps very heavily in + a ~283-320px Tablet column (even a single word can approach + that width). Forced break after "darf" only in the sm-md + tablet range (natural wrap there landed awkwardly); removed + at true mobile widths (below sm:) 2026-07-24 — narrower + still, natural wrap reads fine there, and the forced break + made "darf" the whole first line. Full text-display only + from lg: up, where the column has real room again. */}

- + Produktivität darf
sich leicht anfühlen {/* Brand's signature orange dot (also in the logo/footer) — @@ -67,16 +72,18 @@ export function Hero() { land just after the Reveal's own 0.6s fade-up so it reads as a deliberate flourish, not simultaneous with the text. One-shot, not a looping pulse — continuous motion next to - the primary CTA would be distracting rather than "cool". */} - + the primary CTA would be distracting rather than "cool". + Same text-h1 lg:text-display as the heading itself, so the + dot scales down to match below lg:. */} + .

- {/* Subheading — smaller fixed size below md:, text-h-emphasis's - own 20px floor read too large next to the now-smaller mobile - CTA text. leading shrinks to match, not just font-size. */} -

+ {/* Subheading — smaller fixed size below lg:, text-h-emphasis's + own 20px floor read too large next to the now-smaller CTA + text. leading shrinks to match, not just font-size. */} +

Für Menschen mit Familie, Verantwortung und zu wenig Zeit

@@ -85,28 +92,28 @@ export function Hero() { href="/challenge" className="flex gap-4 items-center justify-center overflow-clip px-6 py-3 rounded-sm shrink-0 max-w-full bg-brand hover:brightness-95 active:scale-[0.97] transition-all" > - {/* Letting this wrap to two lines below md: (tried 2026-07-24) + {/* Letting this wrap to two lines below lg: (tried 2026-07-24) put the icon beside a two-line text block, which read as broken rather than intentional. Smaller fixed size below - md: instead, so the full phrase fits on one line within - the stacked mobile column's width — text-h3's own 19px - floor was still too wide for that at ~236px of available - text budget on a 375px phone. */} - + lg: instead, so the full phrase fits on one line within + the column's width — text-h3's own 19px floor was still + too wide for that, both on a 375px phone AND in the + ~283-320px Tablet grid column. */} + Starte mit der 7-Tage-Challenge - {/* Scaled down to match the smaller mobile CTA text (same - ~0.76 aspect ratio as the md: size), full size again from - md: up alongside text-h3. */} -
- + {/* Scaled down to match the smaller CTA text (same ~0.76 + aspect ratio as the lg: size), full size again from lg: up + alongside text-h3. */} +
+
{/* Social proof — always avatars-then-text on two lines below - md: (not just when it happens to overflow), single row again - from md: up where the real column width fits it fine. */} -
+ lg: (not just when it happens to overflow), single row again + from lg: up where the real column width fits it fine. */} +
{/* Avatars — gap 2px, not overlapping */}
{["/avatar-1.jpg", "/avatar-2.jpg", "/avatar-3.jpg"].map((src, i) => (