/* * Awards & Recognitions — continuously auto-scrolling logo marquee. * Figma ref: node 1752:4338 "Frame 2147227100" (full-bleed 1440x215) * - heading block 1752:4339 (title + description, narrow container) * - marquee instance 2001:1906 "new single line" (full-bleed track) * * FR-019: two-column head reuses .tp-section__head/__title/__desc from * base.css (no new heading classes needed). * FR-020: single horizontal row of 13 light-bordered logo cards, each * holding the artwork exported from its own Figma card. * FR-021 + sliding/carousel spec: strictly one-directional (never * oscillating) right-to-left continuous scroll. The logo list is * rendered twice back-to-back in awards.php; animating the combined * track from translateX(0) to translateX(-50%) linearly/infinitely loops * it with no visible restart jump. Paused on hover (desktop) and frozen * entirely under prefers-reduced-motion. */ .tp-awards { /* the full-bleed track is intentionally wider than the viewport; clip it here so it never causes horizontal scroll on . */ overflow: hidden; } /* Figma 1752:4340 — this head is Medium 24/34 #131313, NOT the 40px section H2 that .tp-section__title defaults to in base.css. */ .tp-awards .tp-section__title { font: var(--tp-subhead); color: var(--tp-black); text-transform: capitalize; /* Figma 1752:4340 textCase=TITLE */ } /* Figma 1752:4341 — right-hand copy column is 535 wide in the 1112 row. Explicitly NOT title-cased in Figma. */ .tp-awards .tp-section__desc { max-width: 535px; text-transform: none; } /* Figma 1752:4338 — the head→marquee gap is the frame's 52px stack gap; own it on the marquee so the two margins can't compound. */ .tp-awards .tp-section__head { margin-bottom: 0; } .tp-awards__marquee { width: 100%; margin-top: 52px; } .tp-awards__viewport { width: 100%; overflow: hidden; } /* Figma 2001:1857 — the marquee is an AFTER_TIMEOUT loop that slides the 2849px track 1410px in 10s LINEAR, i.e. ≈141px/s (--tp-marquee-rate). The duration is derived from that rate rather than copied, so it stays correct as the card size changes. Group width = n*card + n*gap (n-1 inner gaps + the seam padding-right); at 13 cards: 13*197 + 13*24 = 2873, so 2873 / 141 ≈ 20.4s. Recompute per breakpoint if n changes. */ .tp-awards__track { display: flex; width: max-content; animation: tp-awards-scroll 20.4s linear infinite; } /* Hover-to-pause (desktop): CSS handles it directly; section-awards.js mirrors the same toggle via mouseenter/mouseleave per the FRD, and also covers environments where :hover doesn't behave as expected. */ .tp-awards__viewport:hover .tp-awards__track { animation-play-state: paused; } .tp-awards__group { display: flex; flex-shrink: 0; align-items: stretch; gap: 24px; padding-right: 24px; /* keeps the seam gap identical to the inner gaps */ } .tp-awards__item { flex-shrink: 0; } .tp-awards__card { display: flex; align-items: center; justify-content: center; width: 197px; height: 91px; /* Figma sizes each logo against the FULL card, not an inset content box — the widest (ISO 27001, 82.42% ≈ 162px) would not fit inside a padded one — so the card carries no padding and clips instead. */ overflow: hidden; /* Figma 2001:1842 — #fbfbfb card, 1px #24136a @ 7% border, radius 14. */ border: 1px solid rgba(36, 19, 106, 0.07); border-radius: 14px; background: #fbfbfb; } /* --tp-award-w is set per card in awards.php from Figma's own percentage of the 197px card width; height follows the artwork's natural aspect ratio, which is exactly what Figma's absolute w/h pairs work out to. Being percentages, they re-scale themselves at every breakpoint below. flex-shrink is off so a logo wider than its card (STL, 66.5% wide but 143.96% tall) overflows and gets clipped rather than squeezed — that crop is deliberate in Figma, it trims the artwork's white margin. */ .tp-awards__logo { flex: 0 0 auto; width: var(--tp-award-w, 60%); height: auto; object-fit: contain; } /* Figma 2001:1846–2001:1849 — this artwork is white-backed rather than transparent, so multiply is what dissolves the white box into the card. */ .tp-awards__card--multiply .tp-awards__logo { mix-blend-mode: multiply; } @keyframes tp-awards-scroll { from { transform: translateX(0); } to { /* the track holds two identical copies of the logo list, so -50% lands exactly on the seam between them: seamless loop. */ transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .tp-awards__track { animation: none; transform: translateX(0); } } /* Responsive breakpoints reference (Figma frame = 1440): 1440 desktop / 1024 small-desktop / 768 tablet / 425,375,320 mobile. The marquee itself stays full-bleed and continuously scrolling at every breakpoint; only card size/spacing shrinks so logos stay legible down to 320px. */ @media (max-width: 1024px) { .tp-awards__card { width: 168px; height: 82px; } .tp-awards__group { gap: 20px; padding-right: 20px; } /* Hold ≈141px/s: 13*168 + 13*20 = 2444 → 17.3s. */ .tp-awards__track { animation-duration: 17.3s; } } /* * Mobile — Figma 2243:3739 in frame 2215:1750 (360px). The block is 360x209: * a 320-wide head at y1995 (title 18/26, 12px gap, copy 12/18) and the 75px * logo strip 24px below it. Unlike the earlier ladder of shrinking cards, the * design keeps the cards big — 159.9x73.9, only two visible at a time — so * this one rule holds all the way down to 320 instead of stepping four times. */ @media (max-width: 768px) { /* 2243:3739 bottoms out at y2204 and the next section's heading is at y2268; that section supplies 40 of the 64px gap. */ .tp-awards { padding-bottom: 24px; } /* 2243:3700 — Medium 18/26 #131313. */ .tp-awards .tp-section__title { font-size: 18px; line-height: 26px; } /* 2243:3702 — Regular 12/18 #595959, four lines across the full 320. Same 1px leading nudge as the copy card's paragraph: the box lands on Figma's y, the glyphs inside it sit a pixel high without this. */ .tp-awards .tp-section__desc { font-size: 12px; line-height: 18px; max-width: none; position: relative; top: 1px; } .tp-awards .tp-section__head { gap: 12px; } .tp-awards__marquee { margin-top: 24px; } /* * The strip's own frame is 75px tall while the cards are 73.869 — just * over half a pixel of slack top and bottom. Given as an explicit * viewport height with the cards centred in it, so the block adds up to * Figma's 209 rather than 207.9 and everything below keeps its y. */ .tp-awards__viewport { height: 75px; } .tp-awards__track, .tp-awards__group { align-items: center; } /* I2243:3722;2001:1842 — 159.914x73.869, radius 11.364, 0.812px border. */ .tp-awards__card { width: 159.91px; height: 73.87px; border-width: 0.81px; border-radius: 11.36px; } .tp-awards__group { gap: 19.48px; padding-right: 19.48px; } /* Hold ≈141px/s: 13*159.91 + 13*19.48 = 2332 → 16.5s. */ .tp-awards__track { animation-duration: 16.5s; } }