/* ========================================================================== Section: testimonials (Kundenstimmen) Figma band y 4980..5760 in a 1440 frame. Measured anchors, all reproduced exactly at 1440: content inset x = 133 left, 88 right (the band is NOT centred) h2 x = 133, y = 5027, box 881 wide, 56/56, #1b1d36, "glücklichen Kunden" gradient, manual break after "unsere" card left edges x = 133 / 552 / 971, each 381 wide, 38 gap card top y = 5199 (= the dark header, the visual card top) header 381 x 134, radius 15 on the top corners only portrait bottom-aligned to the header, overhanging it upward card 1 147 x 147 at x +14 (image33) card 2 154 x 154 at x +13 (image52) card 3 161 x 162 at x +0 (image51) head quote x +147, y +24, 192 wide, 17/19 regular, white stars x +147, y +87, 28 x 28, pitch 33 (5px gap) body rect y = 5212, 381 x 471, radius 15, --shadow-card, i.e. it starts 13px below the card top and its first 121px sit behind the header review text x +28, y = 5365, 331 wide, 17/19, Poppins 200 italic name / role x +28, y = 5614, 331 wide, 17/19 regular, role in the brand gradient card bottom y = 5683 → band padding 47 top, 77 bottom Two things the Figma export did not hand over, both measured off .figma/testimonials.png and noted in the report: 1. The header fill. testimonials.dc.jsx emits the three header rectangles with no fill at all and no image asset was exported for them, yet all three render pixel-identically. It is a soft four-lobe wash: navy at the left, violet through the middle, a warm peach glow top right, navy again bottom right. Refitted below as four radial gradients over a flat base; RMSE against the render is 3.3/255 (1.3%), worst channel 15/255. 2. Card 3's body rectangle is rgb(255 255 255 / 0.9), not / 0.1 like the other two. Over the white page that is invisible, but the neighbouring section's 3D shape passes behind this card and the alpha decides how much of it ghosts through, so the difference is kept. ========================================================================== */ .testimonials { /* Band top 4980 → h2 at 5027, card bottom 5683 → band bottom 5760. No background: this band has no fill of its own in Figma, it sits on the page white, and the neighbouring 3D shape overlaps into it. */ padding-block: 47px 77px; /* Asymmetric by measurement: 133 left, 88 right. 133/1440 = 9.2361vw, 88/1440 = 6.1111vw. Exact at 1440. Above 1440 the padding swallows ALL the extra width, in the design's own 60.2/39.8 split of the 221px it leaves over, so the 1219px card row never grows past the width it was drawn at. A 381px card carrying a 147px cut-out portrait is a drawn object, not a fluid one: scaled up it lifts the portrait clear of its own header and empties the middle of the card. 221 x 0.60181 = 133 and 221 x 0.39819 = 88, so 1440 is unchanged. */ padding-inline: calc(var(--stage-x) + clamp(1.25rem, 9.2361vw, 133px)) calc(var(--stage-x) + clamp(1.25rem, 6.1111vw, 88px)); } .testimonials__title { /* #1b1d36, the near-duplicate of dark-navy the design uses for headings in this half of the page. Not --color-heading. */ color: var(--color-heading-alt); max-inline-size: 881px; /* the Figma text box */ } /* Figma runs the gradient across the whole 881px text box, not across the phrase: "glücklichen Kunden" ends around 62% of the sweep, which is why it lands on blue-violet rather than #9745ff. 881/56 = 15.7321em keeps that ratio while the heading scales. */ .testimonials__title-accent { background-size: 15.7321em 100%; background-repeat: no-repeat; } .testimonials__list { display: grid; /* Three 381px columns at 1440. auto-fit drops to two then one on its own; min() keeps the track from outgrowing a 320px viewport. The card's own max-inline-size, not the track's, is what stops a card from being drawn larger than it was designed — capping the track here instead would make auto-fit count columns against 381px and drop to one column at 768. 38/1440 = 2.6389vw → exactly 38px at 1440. */ grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(1.25rem, 2.6389vw, 38px); margin-block-start: 60px; /* h2 box ends 5139, cards start 5199 */ } .testimonials__card { display: flex; flex-direction: column; /* Never wider than drawn. Binds only in the two-column row, where the tracks are wider than 381; the card stays start-aligned in its track so the first one keeps its left edge under the h2. */ max-inline-size: 381px; /* The head's composition depends on the card's own width, never the viewport's — the same card appears in a one, two or three column row. Queried below. */ container-type: inline-size; /* Per-card portrait framing, measured. The three cutouts are scaled and inset differently in Figma; percentages of the 381px card keep each one's proportion as the column narrows. 147/381, 14/381. Card fill defaults to the glass value. */ --portrait-w: 38.5827%; --portrait-x: 3.6745%; --card-fill: var(--color-glass-lighter); } .testimonials__card:nth-child(2) { --portrait-w: 40.4199%; /* 154/381 */ --portrait-x: 3.4121%; /* 13/381 */ } .testimonials__card:nth-child(3) { --portrait-w: 42.2572%; /* 161/381 */ --portrait-x: 0; /* flush with the card edge, unlike the others */ --card-fill: var(--color-glass-strong); } /* ---------------------------------------------------------------- head */ .testimonials__head { position: relative; z-index: 1; /* painted over the body rect it overlaps */ /* A minimum, not a fixed height: below 1440 the quote takes a fourth line and the bar has to grow rather than clip. */ min-block-size: 134px; padding-block-start: 24px; /* 147/381 to the text column, 42/381 to the right edge, leaving the measured 192px quote box at 1440. */ padding-inline: 38.5827% 11.0236%; border-radius: var(--radius-md) var(--radius-md) 0 0; color: var(--color-on-dark); /* See the header note at the top of this file. Layer order is top-most first, exactly as fitted. */ background-color: rgb(57 51 103); background-image: radial-gradient(ellipse 30.1% 60.2% at 86.2% 10.8%, rgb(208 178 137), rgb(208 178 137 / 0)), radial-gradient(ellipse 35% 181% at 85.5% 84.1%, rgb(20 27 53), rgb(20 27 53 / 0)), radial-gradient(ellipse 18.2% 141.3% at 3% -24.4%, rgb(24 29 49), rgb(24 29 49 / 0)), radial-gradient(ellipse 63.7% 99% at 79% 49.3%, rgb(187 137 196), rgb(187 137 196 / 0)); } /* Bottom-aligned to the header and taller than it, so the head overhangs the bar by 13 / 20 / 28px. Deliberately not clipped: that overhang is the effect. Height follows the width/height attributes. */ .testimonials__portrait { position: absolute; inset-block-end: 0; inset-inline-start: var(--portrait-x); inline-size: var(--portrait-w); max-inline-size: none; object-fit: cover; } .testimonials__quote { font-size: var(--text-sm); line-height: var(--leading-body); } .testimonials__rating { display: flex; gap: 5px; /* 33px pitch − 28px glyph */ /* Quote box ends at +81, stars start at +87. */ margin-block-start: 6px; } /* Drawn at 28px, which is what it stays at 1440. Allowed to shrink below that rather than break out of a narrow card; aspect-ratio keeps it square against the reset's `img { height: auto }`. */ .testimonials__star { flex: 0 1 28px; block-size: auto; aspect-ratio: 1; min-inline-size: 0; } /* ---------------------------------------------------------------- body */ .testimonials__body { display: flex; flex-direction: column; flex: 1; /* fill the grid row when a sibling is taller */ /* The rect starts 13px below the card top, so 121px of it are behind the 134px header. Pulling it up by that amount reproduces the overlap and keeps the card's own height honest: 134 − 121 + 471 = 484. */ margin-block-start: -121px; min-block-size: 471px; /* 153 from the rect's own top puts the review 32px below the header. */ padding-block: 153px 31px; padding-inline: 28px 22px; /* leaves the measured 331px text column */ border-radius: var(--radius-md); background-color: var(--card-fill); box-shadow: var(--shadow-card); } .testimonials__review { /* .text-quote supplies Poppins 200 italic — the weight the Stilesheet does not document but this section is built on. */ font-size: var(--text-sm); line-height: var(--leading-body); color: var(--color-text); /* The author block is bottom-anchored in Figma (y=5614 on all three cards, whatever the review length), so the slack goes here. */ margin-block-end: auto; } .testimonials__author { font-size: var(--text-sm); line-height: var(--leading-body); color: var(--color-text); } .testimonials__name, .testimonials__role { display: block; } /* The role's gradient spans its 331px text box in Figma, which a block-level span reproduces for free: the longer role reads more violet than the shorter one, exactly as drawn. */ /* Under 300px of card the drawn 38.6% portrait column leaves the quote too little measure and German compounds start breaking mid-word. The portrait gives some of it back. Only a phone in one column gets here — at 1440 the card is 381 and in the two-column row it is still 381. */ @container (width < 300px) { .testimonials__head { padding-inline: 31% 6%; } .testimonials__portrait { inline-size: 29%; } } /* ------------------------------------------------------------------ There is no comp outside 1440. Decisions made here, measured at 320, 768, 900, 1024, 1200, 1440, 1920 and 2560: - the row is auto-fit, so 3 → 2 → 1 columns happen on measure, with no viewport breakpoint to maintain - the card is never wider than the 381 it was drawn at, and above 1440 the whole band stops growing, so the card is pixel-identical to Figma at every width from 500 up - header paddings and the portrait are percentages of the card, so the head composition holds proportionally when a three-column row squeezes the card below 381 (portrait 122 at 1200, no overhang) - both card heights are minimums, so longer copy grows the card instead of overflowing it - the stars are allowed to shrink below their drawn 28px rather than push out of a narrow card - the 47/77 band padding is already small and stays as measured ------------------------------------------------------------------ */