/* ===================================================================== Poalim Junior — Landing Page Single stylesheet. Section order mirrors index.html. Tokens sourced from Figma file KvLhYZASmFwHpZMnHwz82Y (Junior variables). ===================================================================== */ /* ----------------------------- Fonts -------------------------------- */ @font-face { font-family: "Poalim2023"; src: url("../fonts/Poalim2023-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Poalim2023"; src: url("../fonts/Poalim2023-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Poalim2023"; src: url("../fonts/Poalim2023-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* Fb BoeiManali — the brand's playful display font, self-hosted (licensed files supplied by the bank). Restricted to the Hebrew range so Latin characters fall back to Poalim2023 via the --font-hand stack (the display text is Hebrew). */ @font-face { font-family: "BoeiManali"; src: url("../fonts/BoeiManali-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; } @font-face { font-family: "BoeiManali"; src: url("../fonts/BoeiManali-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; } /* --------------------------- Design tokens -------------------------- */ :root { /* Brand */ --red: #e61e28; --black: #1c1c1c; --white: #ffffff; /* Junior palette */ --cyan: #00d4e3; --cyan-600: #00bbd9; --purple: #5c6dff; --purple-600: #5961ff; --pink: #ff96ef; --pink-200: #ffbcf5; --lime: #cff300; --lime-300: #ddff00; --lavender: #7c8bff; /* Learning-card background colors (exact, from Figma per card number) */ --lc-01: #1ddfec; /* vintage cyan 400 (Figma 26520:1659) */ --lc-02: #cff300; /* lime 400 */ --lc-03: #8e9bff; /* purple 200 */ --lc-04: #ffbcf5; /* pink 200 */ /* Neutrals */ --gray-100: #eef0f5; --gray-200: #e6e9f0; --gray-300: #e2e5ec; --gray-500: #9b9fab; --gray-700: #60636c; --gray-900: #1c1c1c; /* Typography */ --font: "Poalim2023", system-ui, "Segoe UI", Arial, sans-serif; /* Playful display font (the brand's Fb BoeiManali) */ --font-hand: "BoeiManali", var(--font); --fw-light: 300; --fw-regular: 400; --fw-bold: 700; --fs-h1: 48px; --fs-h2: 28px; --fs-h3: 24px; --fs-h4: 28px; --fs-h5: 18px; --fs-num-xl: 60px; --fs-num-l: 48px; --fs-body-l: 17px; --fs-body-m: 15px; --fs-body-s: 13px; /* Spacing scale */ --sp-0: 0; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-9: 40px; --sp-10: 48px; /* Radius */ --radius: 12px; --radius-pill: 99px; /* Shadows */ --shadow-card: 0 0 20px rgba(0, 0, 0, 0.1); --shadow-menu: 0 4px 8px rgba(0, 0, 0, 0.1); /* Layout */ --container: 1280px; /* Figma desktop content width (1920 − 320×2) */ --gutter: clamp(16px, 5vw, 80px); --header-h: 72px; /* Motion — scroll-in reveals. Easing taken from the source Lottie's in/out tangents (cubic-bezier(o.x,o.y,i.x,i.y) = 0.04,0,0,1): a strong decelerate that settles softly. Duration/stagger also mirror the Lottie. */ --ease-reveal: cubic-bezier(0.04, 0, 0, 1); --reveal-dur: 0.66s; /* ≈ 20 frames @ 30fps */ --reveal-stagger: 70ms; /* ≈ 2 frames @ 30fps */ } /* ------------------------------ Reset ------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--sp-4)); /* The viewport scroller is ; clipping here (not on body) is what actually contains decorative pop-outs (e.g. .videos__globe at left:-30). `clip` (not `hidden`) keeps overflow-y visible so the sticky header works. */ overflow-x: clip; } body { margin: 0; font-family: var(--font); font-weight: var(--fw-regular); font-size: var(--fs-body-l); line-height: 1.5; color: var(--black); /* Site-wide square grid background (light lines on white) */ background-color: var(--white); background-image: linear-gradient(to right, var(--gray-100) 1px, transparent 1px), linear-gradient(to bottom, var(--gray-100) 1px, transparent 1px); background-size: 33px 33px; overflow-x: clip; } h1, h2, h3, h4, h5, p, figure, ul, ol { margin: 0; } ul, ol { padding: 0; list-style: none; } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; } :focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; border-radius: 4px; } /* --------------------------- Accessibility -------------------------- */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; inset-inline-start: var(--sp-4); top: -120px; z-index: 1000; background: var(--red); color: var(--white); padding: var(--sp-3) var(--sp-5); border-radius: var(--radius); transition: top 0.2s ease; } .skip-link:focus { top: var(--sp-4); } /* ------------------------- Layout primitives ------------------------ */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .section { position: relative; padding-block: clamp(36px, 5vw, 72px); } /* Brand accent: a word/phrase highlighted in red, set in the playful display font. Per Figma the handwrite display runs ~1.5× the surrounding Poalim text (hero 48/32, FAQ 72/48, partners 76/48, CTA 24/15) with -0.5px tracking. The real Fb BoeiManali sits smaller per-em than the body face, so this 1.5em scale restores the intended display size in every context (it tracks each parent's responsive size). */ .accent-red { color: var(--red); font-family: var(--font-hand); /* all red accent text uses the handwrite font */ font-size: 1.5em; letter-spacing: -0.5px; line-height: 0.9; /* tight box so the larger word doesn't inflate the line */ } /* Playful handwritten display font */ .handwrite { font-family: var(--font-hand); font-weight: 400; } /* The brand word "ג׳וניור" — the playful display font as a logo-style lockup, ~1.5× the surrounding text with a tight line box so the glyphs sit against the Poalim text. */ .brand-jr { font-family: var(--font-hand); font-weight: 400; font-size: 1.3em; letter-spacing: -0.5px; line-height: 0.9; } /* Primary red pill button */ .btn { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: var(--fw-regular); font-size: var(--fs-body-l); line-height: 1; /* HAP-401 QA: the inherited 1.5 line-box left the Hebrew glyphs sitting high (text looked top-offset); tighten so align-items:center optically centers */ padding: var(--sp-2) var(--sp-6); border-radius: var(--radius-pill); transition: transform 0.15s ease, background-color 0.15s ease; } .btn--primary { /* Figma brand button: vertical red gradient (node 26428:115861) */ background-image: linear-gradient(180deg, #c01039 0%, #dc1223 72%, #e01e1e 89%, #e02a19 100%); color: var(--white); } .btn--primary:hover { transform: translateY(-1px); filter: brightness(0.94); } /* Decorative background layer (non-interactive) */ .decor { position: absolute; z-index: 0; pointer-events: none; user-select: none; } /* --------------------------- Reduced motion ------------------------- When the user prefers reduced motion we disable the page-level and carousel smooth scrolling, and JS skips Lottie autoplay (showing the static poster instead). Remaining UI affordances are sub-200ms opacity/ transform transitions on hover/expand, which are negligible. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .carousel__track { scroll-behavior: auto; } } /* --------------------------- Scroll-in reveals ---------------------- Elements tagged `data-reveal` start hidden and animate in when scrolled into view (JS adds `.is-revealed`). The hidden pre-state is gated behind `html.reveal-ready`, which JS only sets when IntersectionObserver exists AND the user has NOT requested reduced motion — so with JS off or reduced motion, content is simply visible (no FOUC, no trapped-hidden content). Generic reveal: fade + gentle rise. Sections opt in per-element. */ .reveal-ready [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity var(--reveal-dur) var(--ease-reveal), transform var(--reveal-dur) var(--ease-reveal); will-change: opacity, transform; } .reveal-ready [data-reveal].is-revealed { opacity: 1; transform: none; } /* Video gallery — choreographed to the source Lottie (Video_Gallery_01): the player fades + slides into place first, then the playlist items fade + rise one after another. The card itself is not the animated unit; its contents assemble inside it (the Lottie's card bg is static). */ .reveal-ready .videos__body[data-reveal] { opacity: 1; /* override generic — the card frame stays put */ transform: none; } .reveal-ready .videos__body[data-reveal] .videos__player { opacity: 0; transform: translateX(-28px); /* Lottie: player slides +x into place */ transition: opacity var(--reveal-dur) var(--ease-reveal), transform var(--reveal-dur) var(--ease-reveal); will-change: opacity, transform; } .reveal-ready .videos__body[data-reveal] .videos__playlist > li { opacity: 0; transform: translateY(28px); /* Lottie: items rise into place */ transition: opacity var(--reveal-dur) var(--ease-reveal), transform var(--reveal-dur) var(--ease-reveal); will-change: opacity, transform; } .reveal-ready .videos__body[data-reveal].is-revealed .videos__player { opacity: 1; transform: none; } .reveal-ready .videos__body[data-reveal].is-revealed .videos__playlist > li { opacity: 1; transform: none; } /* Stagger: player leads, items follow ~1/3 in, +70ms each (Lottie cadence). */ .reveal-ready .videos__body[data-reveal].is-revealed .videos__playlist > li { transition-delay: calc(0.2s + (var(--reveal-i, 0) * var(--reveal-stagger))); } .videos__playlist > li:nth-child(1) { --reveal-i: 0; } .videos__playlist > li:nth-child(2) { --reveal-i: 1; } .videos__playlist > li:nth-child(3) { --reveal-i: 2; } .videos__playlist > li:nth-child(4) { --reveal-i: 3; } .videos__playlist > li:nth-child(5) { --reveal-i: 4; } .videos__playlist > li:nth-child(6) { --reveal-i: 5; } .videos__playlist > li:nth-child(n + 7) { --reveal-i: 6; } /* Learning cards — wiggle in, choreographed to the source Lottie (Learning_Cards_01): each card fades + rises + does a damped rotation (-10°→5°→-3°→0°), and the icon inside does a bigger damped wiggle (±30°→…→0°) that runs longer. Cards stagger ~130ms (4 frames @30fps). These opt OUT of the generic translate-reveal — the keyframes own the transform. */ .reveal-ready .lcard[data-reveal] { opacity: 0; transform: none; transition: none; } .reveal-ready .lcard[data-reveal] .lcard__icon { opacity: 0; } .reveal-ready .lcard[data-reveal].is-revealed { animation: lcard-wiggle-in 0.55s ease-in-out both; animation-delay: calc(var(--reveal-i, 0) * 0.13s); } .reveal-ready .lcard[data-reveal].is-revealed .lcard__icon { /* longer, larger wiggle; same per-card stagger as its card */ animation: lcard-icon-wiggle 1.5s ease-in-out both; animation-delay: calc(var(--reveal-i, 0) * 0.13s); } .learning__grid > .lcard:nth-child(1) { --reveal-i: 0; } .learning__grid > .lcard:nth-child(2) { --reveal-i: 1; } .learning__grid > .lcard:nth-child(3) { --reveal-i: 2; } .learning__grid > .lcard:nth-child(4) { --reveal-i: 3; } .learning__grid > .lcard:nth-child(5) { --reveal-i: 4; } .learning__grid > .lcard:nth-child(6) { --reveal-i: 5; } @keyframes lcard-wiggle-in { 0% { opacity: 0; transform: translateY(26px) rotate(-10deg); } 38% { transform: translateY(0) rotate(5deg); } 62% { opacity: 1; } 69% { transform: translateY(0) rotate(-3deg); } 100% { opacity: 1; transform: translateY(0) rotate(0deg); } } @keyframes lcard-icon-wiggle { 0% { opacity: 0; transform: rotate(0deg); } 13% { transform: rotate(30deg); } 17% { opacity: 0; } 24% { transform: rotate(-30deg); } 35% { transform: rotate(25deg); } 39% { opacity: 1; } 46% { transform: rotate(-20deg); } 57% { transform: rotate(15deg); } 67% { transform: rotate(-10deg); } 78% { transform: rotate(5deg); } 89% { transform: rotate(-3deg); } 100% { opacity: 1; transform: rotate(0deg); } } /* Topics (Storyly skeleton fallback) + Partners — "story icon" reveal, adapted from the Category_Icons Lottie: each item fades + slides into place while the icon inside does a damped wiggle (±10°→0). Items cascade ~70ms apart (in RTL, DOM order = right→left). The container stays put; its children animate (so off-screen carousel items still reveal when the section scrolls in). */ .reveal-ready .partners__logos[data-reveal] { opacity: 1; transform: none; } .reveal-ready .partners__logos[data-reveal] > li { opacity: 0; } .reveal-ready .partners__logos[data-reveal].is-revealed > li { animation: storyly-item-in 0.6s var(--ease-reveal) both; animation-delay: calc(var(--reveal-i, 0) * 0.07s); } .reveal-ready .partners__logos[data-reveal].is-revealed > li img { animation: storyly-wiggle 1.5s ease-in-out both; animation-delay: calc(var(--reveal-i, 0) * 0.07s); } .partners__logos > li:nth-child(1) { --reveal-i: 0; } .partners__logos > li:nth-child(2) { --reveal-i: 1; } .partners__logos > li:nth-child(3) { --reveal-i: 2; } .partners__logos > li:nth-child(4) { --reveal-i: 3; } .partners__logos > li:nth-child(5) { --reveal-i: 4; } .partners__logos > li:nth-child(6) { --reveal-i: 5; } .partners__logos > li:nth-child(7) { --reveal-i: 6; } @keyframes storyly-item-in { 0% { opacity: 0; transform: translateX(24px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes storyly-wiggle { 0% { transform: rotate(0deg); } 29% { transform: rotate(-10deg); } 44% { transform: rotate(10deg); } 56% { transform: rotate(-5deg); } 67% { transform: rotate(5deg); } 78% { transform: rotate(-3deg); } 89% { transform: rotate(2deg); } 100% { transform: rotate(0deg); } } /* ===================================================================== Section styles ===================================================================== */ /* ------------------------- Lottie host ------------------------------ No poster images: hosts are sized via width + aspect-ratio (per host), and the rendered fills the box. Animations play/scale in fresh — nothing static is shown before they start (intentional, see scroll-in reveals). Each host therefore MUST carry its own dimensions. */ .lottie { position: relative; line-height: 0; /* all lotties are decorative; their (mostly transparent) canvases overlap real controls (e.g. the credit-card CTA) and must not swallow clicks */ pointer-events: none; } .lottie > svg { position: absolute; inset: 0; } /* ------------------------------- Hero ------------------------------- */ .hero { padding-top: clamp(12px, 2vw, 28px); padding-bottom: clamp(8px, 1.5vw, 20px); /* tight bottom gap to the carousel */ } .hero__inner { position: relative; /* sticker overlaps the header from here */ display: grid; grid-template-columns: 1.13fr 1fr; /* RTL: text right (681), OMG left (600) — Figma ratio */ align-items: start; /* eyebrow sits near the top */ gap: clamp(24px, 4vw, 64px); padding-top: clamp(48px, 7vw, 112px); /* clear the overlapping sticker */ } /* HAP-387: at wide viewports the container gutters shrink the hero content to 1120px, so the OMG art column lands at ~496px instead of the Figma 600×441. The OMG is the LEFT column (RTL), so drop only the left gutter (padding-inline-end in RTL) and split the row evenly with no gap — content becomes 1200px → each column 600px, giving the art its exact Figma width. The text keeps its right gutter (padding-inline-start) so it stays aligned with the sections below. Only applies where the container is maxed and centered (auto side-margins absorb the widened art). */ @media (min-width: 1280px) { .hero__inner { grid-template-columns: 1fr 1fr; column-gap: 0; padding-inline-end: 0; /* Figma bottom-aligns the OMG art with the text block; the taller OMG extends upward toward the header past the eyebrow (HAP-387). Drop the top padding so the bottom-aligned pair rises to the Figma position (OMG top just below the header) instead of sitting too low. */ align-items: end; padding-top: 0; margin-top: -32px; /* lift the bottom-aligned pair to the Figma text height */ } /* The -32px lift above also shifts the absolutely-positioned sticker (anchored to .hero__inner) up by 32px; cancel that so the sticker keeps its position. */ .hero__sticker { margin-top: 32px; } } .hero__text { position: relative; text-align: right; } .hero__eyebrow { font-weight: var(--fw-light); /* "פועלים ג׳וניור" — 32px Light */ font-size: clamp(22px, 2.6vw, 32px); margin-bottom: var(--sp-2); } .hero__title { font-weight: var(--fw-regular); font-size: clamp(36px, 4.7vw, 60px); /* Figma Big-Numbers XL = 60 */ line-height: 1.33; /* Figma line-height 80px @60 */ } .hero__subtitle { /* Figma hero text frame (178:794) uses gap 0 between title and subtitle — the visual separation comes from the line-heights alone (HAP-388). */ margin-top: 0; font-size: clamp(18px, 1.95vw, 24px); /* Figma H3 = 24px */ line-height: 1.67; /* Figma line-height 40px @24 */ color: var(--gray-700); } .hero__art { position: relative; } .hero__lottie { width: 100%; aspect-ratio: 600 / 441; /* keeps the box without a poster img */ } .hero__sticker { position: absolute; top: clamp(-102px, -6.5vw, -58px); /* tucked further up, partly behind the header */ inset-inline-start: clamp(-16px, -0.5vw, 4px); /* above the eyebrow (right) */ width: clamp(150px, 17vw, 230px); /* much bigger */ aspect-ratio: 260 / 245; z-index: 3; } @media (max-width: 767px) { .hero__inner { grid-template-columns: 1fr; } .hero__art { order: -1; } /* HAP-395: the OMG lottie SVG fills .hero__lottie via `inset: 0` (see `.lottie > svg`). Unpin its right edge (inline-start in RTL) and push the left edge (inline-end) negative so the OMG shifts and its left side is cut off. `overflow-x: clip` on html keeps the bleed from scrolling. */ .hero__lottie > svg { inset-inline-start: auto; inset-inline-end: -20%; } .hero__sticker { top: -50px; width: 230px; /* HAP-395: bigger sticker on mobile */ } .hero__title { font-size: 40px; line-height: 1.2; } } /* ----------------------------- Header ------------------------------- */ .site-header { position: sticky; /* TODO: confirm sticky in Figma/PRD */ top: 0; z-index: 100; background: var(--white); box-shadow: var(--shadow-menu); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: var(--header-h); padding-block: var(--sp-3); } .logo { display: inline-flex; align-items: center; flex-shrink: 0; /* never shrink below content — else the logo spills under the CTA */ } /* Single SVG exported from Figma (node 26428-115525) — text + diamond as one vector. Natural 188×40; height drives the size, width scales with it. */ .logo__img { height: 36px; width: auto; } .primary-nav ul { display: flex; gap: var(--sp-8); } .primary-nav a { font-size: var(--fs-body-l); padding-block: var(--sp-2); transition: color 0.15s ease; } .primary-nav a:hover { color: var(--red); } .site-header__cta { font-size: var(--fs-body-m); white-space: nowrap; } .site-header__cta .accent-red-strong { font-weight: var(--fw-bold); } /* Mobile header (Figma mobile board 26428-115860): no hamburger / nav menu — just the logo (right) and the CTA pill (left), justify-between. */ @media (max-width: 767px) { .primary-nav { display: none; } .logo__img { height: 40px; } .site-header__cta { font-size: var(--fs-body-s); /* "ג׳וניור? זה מדבר אלי" = 13px */ padding: var(--sp-2) var(--sp-4); } } /* ----------------------- Shared section bits ------------------------ */ .section-title { font-weight: var(--fw-regular); font-size: clamp(28px, 4vw, 44px); line-height: 1.1; } .section-subtitle { margin-top: var(--sp-3); color: var(--gray-700); font-weight: var(--fw-light); /* Figma H2 Light = 28px */ font-size: clamp(20px, 2.2vw, 28px); line-height: 1.43; /* Figma line-height 40px @28 */ } /* HAP-396: the Video and Credit Card subtitles are Regular (400) in Figma, not the Light (300) default used for section subtitles elsewhere (desktop + mobile). */ .videos .section-subtitle, .credit-card__head .section-subtitle { font-weight: var(--fw-regular); } /* Horizontal carousel primitive */ .carousel { position: relative; } .carousel__track { display: flex; gap: var(--sp-6); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-block: var(--sp-2); -ms-overflow-style: none; scrollbar-width: none; } .carousel__track::-webkit-scrollbar { display: none; } .carousel__track > * { scroll-snap-align: start; flex: 0 0 auto; } .carousel__btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--white); box-shadow: var(--shadow-card); transition: transform 0.15s ease; } .carousel__btn:hover { transform: translateY(-50%) scale(1.06); } .carousel__btn--start { inset-inline-start: -8px; /* right edge in RTL */ } .carousel__btn--start img { transform: rotate(180deg); /* points right (›) on the right-side button */ } .carousel__btn--end { inset-inline-end: -8px; /* left edge; default chevron points left (‹) */ } .carousel__btn img { width: 16px; /* Figma chevron icon = 16px */ height: auto; } @media (max-width: 767px) { .carousel__btn { display: none; /* swipe on touch; PRD §4.2 */ } } /* ----------------------------- Topics ------------------------------- */ /* Live Storyly web placement. The Storyly Placement SDK sizes its story-group rings to the space its parent container provides (per the docs' "Placement Size Handling" — cover ≈ 0.73 × container height), so we drive the ring size by giving the container a responsive height that tracks the Figma ring (26428-115577: ~158px desktop / ~86px mobile). The placement fills the container; the entrance transition is the shared `data-reveal` fade + rise. */ .topics { /* hug the hero above and the videos section below (smaller gap) */ padding-block: clamp(8px, 1.5vw, 20px); } .topics__storyly { display: block; width: 100%; /* container ≈ ring ÷ 0.78 — yields the Figma ring clamp(86px, 12vw, 158px) */ height: clamp(116px, 15.5vw, 204px); overflow: hidden; } #jr-storyly { display: block; width: 100%; height: 100%; } /* Entrance: the whole section slides up + fades in as ONE unit via the shared `data-reveal` (we deliberately don't animate the SDK's shadow-DOM rings individually — that proved unreliable). The slide-up is additionally held until storyly.js confirms real RTL content has rendered (.is-storyly-ready), so it never fires on an empty box or a brief LTR frame. The generic `.reveal-ready [data-reveal]` rules drive the actual translateY + opacity. */ .reveal-ready .topics__storyly[data-reveal].is-revealed:not(.is-storyly-ready) { opacity: 0; transform: translateY(24px); } /* ----------------------------- Videos ------------------------------- */ .videos { position: relative; padding-top: clamp(24px, 3.5vw, 44px); /* smaller gap from topics above */ } .videos__globe { position: absolute; /* tucked under the playlist's top-left corner (Figma) */ left: clamp(40px, 11vw, 216px); top: clamp(30px, 4.5vw, 90px); width: clamp(140px, 18vw, 300px); height: auto; z-index: 0; } .videos__cloud { position: absolute; /* straddles the boundary into the learning section (right side, Figma) */ right: clamp(40px, 10vw, 190px); bottom: -160px; width: clamp(180px, 17vw, 330px); height: auto; z-index: 0; } .videos__header { position: relative; text-align: right; margin-bottom: var(--sp-6); } .videos__heading { position: relative; z-index: 1; } .videos .section-title, .learning .section-title { font-size: clamp(34px, 3.8vw, 48px); /* Figma Big-Numbers L = 48 */ } /* White card wrapping the player + playlist */ .videos__body { position: relative; z-index: 1; display: grid; grid-template-columns: 2fr 1fr; /* player (right, large) | playlist (left) */ gap: var(--sp-5); align-items: start; /* don't stretch the player (avoids width overflow) */ background: var(--white); border-radius: 24px; box-shadow: 0 0 6px rgba(28, 28, 28, 0.12); padding: var(--sp-5); } .videos__playlist { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; /* let the grid column hold its share */ max-height: 423px; /* ≈ player height at desktop */ overflow-y: scroll; /* scrollbar always visible */ overflow-x: hidden; padding-inline-start: 8px; /* room for the scrollbar (left) */ scrollbar-width: thin; scrollbar-color: var(--gray-500) var(--gray-100); } .videos__playlist::-webkit-scrollbar { width: 8px; -webkit-appearance: none; /* force a classic (always-on) scrollbar */ } .videos__playlist::-webkit-scrollbar-track { background: var(--gray-100); border-radius: var(--radius-pill); } .videos__playlist::-webkit-scrollbar-thumb { background: var(--gray-500); border-radius: var(--radius-pill); } .vid-item { display: flex; flex-direction: row-reverse; /* thumbnail on the right (RTL) */ align-items: center; gap: var(--sp-4); width: 100%; min-width: 0; /* in the mobile row-carousel, let flex-basis win over nowrap min-content */ padding: var(--sp-3); border-radius: var(--radius); background: var(--gray-300); /* inactive (#e2e5ec) */ text-align: right; overflow: hidden; /* keep content inside the item */ transition: background-color 0.15s ease; } .vid-item:hover { background: var(--gray-200); } .vid-item.is-active { background: var(--lime); /* active (#cff300) */ } .vid-item__title { flex: 1; min-width: 0; font-weight: var(--fw-regular); font-size: var(--fs-body-m); /* 15 */ } .vid-item__thumb { flex: 0 0 auto; width: 100px; height: 64px; border-radius: 4px; background: var(--white); /* white placeholder (Figma) */ } .videos__player { position: relative; width: 100%; min-width: 0; aspect-ratio: 800 / 472; border-radius: var(--radius); overflow: hidden; background: linear-gradient(135deg, #2b2b3a, #4a4a63); } .video-facade { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; height: 100%; } .video-facade__poster { position: absolute; inset: 0; background: radial-gradient(120% 120% at 70% 30%, rgba(255, 150, 239, 0.35), transparent 60%), linear-gradient(135deg, #2b2b3a, #4a4a63); } .video-facade__play { position: relative; width: clamp(56px, 7vw, 72px); height: auto; transition: transform 0.15s ease; } .video-facade:hover .video-facade__play { transform: scale(1.08); } .videos__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .videos__overlay { position: absolute; inset-inline: 0; bottom: 0; padding: var(--sp-5); text-align: right; color: var(--white); background: rgba(28, 28, 28, 0.2); /* Figma flat overlay */ pointer-events: none; } .videos__tag { display: inline-block; padding: 2px 12px; border-radius: var(--radius-pill); background: var(--lime); color: var(--black); font-size: var(--fs-body-s); margin-bottom: var(--sp-1); } .videos__now-title { font-size: var(--fs-h5); } .videos__now-meta { font-weight: var(--fw-light); font-size: var(--fs-body-s); opacity: 0.85; } @media (max-width: 767px) { /* Figma mobile (26520:1750): the blob sits down by the video player's top-left, not under the heading text. */ .videos__globe { top: 150px; left: -20px; width: 130px; } .videos__cloud { display: none; /* desktop-only decor (no mobile Figma counterpart) */ } .videos__body { grid-template-columns: 1fr; /* HAP-397: no white card/background on mobile — the player sits on the grid */ background: none; box-shadow: none; border-radius: 0; padding: 0; } /* HAP-397 + HAP-400: on mobile the caption tag sits bottom-left, the title is on the right, and the watching-count/duration are stacked BELOW the title (not beside it). A 2-col grid puts the tag in the left column spanning both rows, and stacks title over meta in the right column. */ .videos__overlay { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "title tag" "meta tag"; align-items: end; column-gap: var(--sp-3); row-gap: 2px; } .videos__now-title { grid-area: title; } .videos__now-meta { grid-area: meta; } .videos__tag { grid-area: tag; align-self: start; /* HAP-400: align the tag with the title (top), not bottom */ margin: 0; } /* Main player (Figma "Movie Frame" node 26428:115908): image 350×232 and a compact caption banner (py-8 px-12) — not the bulky sp-5 padding we use on desktop. */ .videos__player { aspect-ratio: 350 / 232; } .videos__overlay { padding: var(--sp-2) var(--sp-3); /* 8 12 */ line-height: 1.25; /* Figma caption is tight, not 1.5 body leading */ } .videos__now-title { font-size: var(--fs-body-l); /* 17 (Figma body/large) */ white-space: nowrap; /* single line like Figma */ } /* Horizontal carousel of fixed-size cards (Figma "Thumbs" node 26428:115918): each card is content-sized to a uniform 240px (120 content + 12 gap + 92 thumb + 2×8 padding), with the neighbours peeking on both sides. */ .videos__playlist { max-height: none; flex-direction: row; overflow-x: auto; gap: 10px; padding-inline-start: 0; } .vid-item { flex: 0 0 auto; width: auto; align-items: flex-start; /* thumb + text top-aligned */ gap: var(--sp-3); /* 12 */ padding: var(--sp-2); /* 8 */ border-radius: 7px; /* radius/m */ } /* Figma: playlist card title — fixed 120px column, wraps to 2 lines */ .vid-item__title { flex: 0 0 120px; width: 120px; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .vid-item__thumb { width: 92px; height: 60px; } } /* ---------------------------- Learning ------------------------------ */ .learning__inner { display: grid; grid-template-columns: 320px 1fr; /* RTL: col1 = right = phone (Figma 320px) */ grid-template-areas: "phone content"; gap: clamp(24px, 3.4vw, 54px); align-items: start; /* phone top-aligns with the heading/cards */ } .learning__phone { grid-area: phone; align-self: start; display: flex; justify-content: center; } /* App-demo video sits inside the phone screen. The frame has an explicit, image-independent box (aspect-ratio of the shell PNG 640×1324) so the video has a stable size from first layout — needed for the lazy/IntersectionObserver autoplay to trigger, and it also avoids layout shift before the PNG loads. */ .phone-frame { position: relative; width: 100%; /* fills the phone column; height derives from aspect-ratio */ aspect-ratio: 640 / 1324; flex: none; line-height: 0; } .phone-frame__shell { display: block; width: 100%; height: 100%; position: relative; z-index: 1; } .phone-frame__video { position: absolute; z-index: 2; /* Insets measured from the PNG screen: ~4.3% sides, ~1.7% top/bottom. Explicit width/height (not auto) — a replaced element ignores an over-constrained bottom/right and falls back to its intrinsic ratio. */ top: 1.7%; left: 4.3%; width: 91.4%; height: 96.6%; object-fit: cover; /* Screen corner radius expressed against the video box so it holds at any scale. The horizontal % was over-rounded; 14.4% / 13.9% matches the phone PNG's screen corners. */ border-radius: 14.4% / 13.9%; background: #000; } .learning__content { grid-area: content; } .learning__head { text-align: right; margin-bottom: var(--sp-8); } .learning__grid { display: grid; grid-template-columns: repeat(2, 1fr); /* 4 cards in a 2×2 block (Figma) */ column-gap: clamp(16px, 2.8vw, 53px); row-gap: clamp(44px, 5vw, 55px); /* room for the overhanging icons */ } .lcard { position: relative; } .lcard__icon { position: absolute; /* Sized as a share of the card so the Figma 140×140 desktop icon (140/366.5 ≈ 38.2%) scales consistently to smaller cards instead of a fixed px that looks tiny on mobile (HAP-391). Offsets are % of the card too, so the icon keeps overhanging the top-left corner (RTL) at any size: top −46/208 ≈ −22.1%, inset-inline-end −25.5/366.5 ≈ −6.96%. The max() floor keeps the icon prominent on small mobile cards (where 38.2% would be ~61px) while still resolving to 140px on the 366.5px desktop card. */ width: max(38.2%, 88px); height: auto; top: -22.1%; /* HAP-391 (QA): overhang the top-left corner further so the icon covers the card border more (was −6.96% ≈ Figma −25.5px, QA wanted it further left). */ inset-inline-end: -11%; z-index: 2; } .lcard__body { display: flex; flex-direction: column; justify-content: center; /* number + text centered as a group (Figma) */ align-items: flex-start; /* inline-start = right in RTL */ gap: var(--sp-2); /* 8 (Figma) */ min-height: 208px; /* Figma card height */ padding: var(--sp-4) var(--sp-6) var(--sp-6); /* pt16 px24 pb24 */ background: var(--lc-01); border-radius: var(--radius); } .lcard__num img { height: 36px; width: auto; } .lcard__text { font-size: 20px; /* Figma H4 */ line-height: 28px; /* Figma leading-28 */ font-weight: var(--fw-regular); text-align: right; color: var(--black); /* HAP-392: the body shrink-wraps its children (align-items:flex-start), so the text box collapsed to the widest word-run (~129px) and looked crammed. Give it the Figma text width (251px) so it wraps like the design; on narrower cards the card width caps it below 251, so this only bites at desktop. */ max-width: 251px; } .lcard--c01 .lcard__body { background: var(--lc-01); } .lcard--c02 .lcard__body { background: var(--lc-02); } .lcard--c03 .lcard__body { background: var(--lc-03); } .lcard--c04 .lcard__body { background: var(--lc-04); } @media (max-width: 1100px) { .learning__inner { grid-template-columns: 290px 1fr; } } @media (max-width: 767px) { .learning__inner { grid-template-columns: 1fr; grid-template-areas: "content" "phone"; } .learning__phone { margin-top: var(--sp-6); } /* Wider phone on mobile; height derives from the 640/1324 aspect-ratio */ .phone-frame { width: min(320px, 82%); } /* Figma mobile (26428:115929): title/subtitle right-aligned, not centered */ .learning__head { text-align: right; } /* Figma cards: 167-wide (16px column gap in a 350 track), text 17px/28 */ .learning__grid { column-gap: 16px; } .lcard__body { min-height: 176px; padding: var(--sp-5) var(--sp-3); /* px-12 pb/pt-20 (Figma text container) */ } .lcard__text { font-size: 17px; /* Figma body/large */ line-height: 28px; } .lcard__icon { width: 100px; /* HAP-391 (QA): mobile icons are 100×100 */ } } /* HAP-391: match the Figma learning-card sizing at desktop — cards 366.5px wide with 140×140 icons overhanging the top-left corner. The two fluid columns land at ~346px within the default track; tightening the phone↔cards gap and setting the card gap to the Figma value gives them their 366.5px width. */ @media (min-width: 1280px) { .learning__inner { gap: 22px; /* phone ↔ cards; frees width so the cards reach 366.5 */ } .learning__head { /* the 140px icons overhang 46px above the first row; add clearance so they don't crowd the section title (HAP-391) */ margin-bottom: 64px; } .learning__grid { grid-template-columns: repeat(2, 366.5px); /* Figma card width */ justify-content: start; column-gap: 45px; /* Figma card gap; also clears the icon overhang */ } /* icon size/position is now proportional in the base rule (38.2% of the card → 140px here), so no desktop override is needed */ } /* ------------------------------ Quiz -------------------------------- */ .quiz__inner { display: grid; grid-template-columns: auto 1fr; /* RTL: col1 = right = trophy */ grid-template-areas: "art text"; align-items: end; /* bottom-align so the trophy pops up */ gap: var(--sp-6); background: var(--white); border-radius: 24px; box-shadow: 0 0 6px rgba(28, 28, 28, 0.12); /* smaller bottom padding (Figma: ~28px below the button, not 44) */ padding: clamp(16px, 2.4vw, 28px) clamp(24px, 5vw, 64px) clamp(8px, 1.2vw, 12px); overflow: visible; } .quiz__text { grid-area: text; text-align: right; padding-bottom: var(--sp-4); } .quiz__text .section-title { font-size: clamp(22px, 3vw, 32px); /* Figma H1 = 32 */ line-height: 40px; /* HAP-393: Figma quiz title leading = 40 (was 1.1 ≈ 35) */ } .quiz__text .section-subtitle { margin-top: 0; } .quiz__cta { margin-top: var(--sp-5); } .quiz__art { grid-area: art; align-self: end; width: clamp(180px, 22vw, 300px); } .quiz__lottie { width: 100%; aspect-ratio: 305 / 296; /* keeps the box without a poster img */ /* negative top: the trophy pops above the banner without growing it */ margin-top: clamp(-150px, -15vw, -90px); transform: scale(1.3); } /* HAP-394: match the Figma quiz banner at desktop — the card is the full 1280px content width (reclaim the .container gutter), 12px radius, 240px side padding and ~228px tall. HAP-393: trophy at the Figma 296px. */ @media (min-width: 1280px) { .quiz .container { padding-inline: 0; /* card bleeds to the full 1280 (auto side-margins center it) */ } .quiz__inner { padding-inline: 240px; /* Figma content px-240 */ border-radius: 12px; /* Figma radius/l (was 24) */ min-height: 228px; /* Figma content h-228 */ } .quiz__art { width: 296px; /* Figma trophy 296 */ } } @media (max-width: 767px) { /* Figma mobile (26428:115949): compact horizontal banner — trophy on the left, text (title / subtitle / CTA) on the right. Not stacked. */ .quiz__inner { grid-template-columns: auto 1fr; grid-template-areas: "art text"; align-items: center; gap: var(--sp-2); /* 8 */ text-align: right; padding: var(--sp-2) var(--sp-3); border-radius: 12px; } .quiz__text { text-align: right; padding-bottom: 0; } .quiz__text .section-title { font-size: 17px; /* Figma body/large */ line-height: 24px; } .quiz .section-subtitle { font-size: 15px; /* Figma body/medium */ line-height: 1.2; margin-top: var(--sp-1); } .quiz__cta { margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-4); font-size: var(--fs-body-s); } .quiz__art { width: clamp(104px, 32vw, 124px); /* Figma trophy ~120 */ } .quiz__lottie { margin-top: 0; } } /* ---------------------------- Partners ------------------------------ */ .partners__title { text-align: right; margin-bottom: var(--sp-9); } .partners__logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-5); } .partners__logos li { flex: 0 0 auto; } .partners__logos img { width: clamp(88px, 9vw, 130px); height: auto; } @media (max-width: 767px) { .partners__title { text-align: center; } /* Figma mobile (26428:115970): red accent drops to its own line */ .partners__title .accent-red { display: block; } /* 4 logos per row (Figma), last row centers automatically */ .partners__logos { justify-content: center; gap: var(--sp-3); } .partners__logos img { width: clamp(64px, 19vw, 78px); } } /* --------------------------- Credit card ---------------------------- */ .credit-card__inner { display: flex; flex-direction: column; align-items: center; text-align: center; } .credit-card__head { max-width: 60ch; } .credit-card__head .section-subtitle { margin-inline: auto; } .credit-card__art { width: 100%; display: flex; justify-content: center; /* the Lottie canvas has transparent whitespace at top & bottom — pull the art up toward the subtitle and the button up under the card (% scales with the card size). */ margin-top: -7%; margin-bottom: -4%; } .credit-card__lottie { width: min(100%, 1040px); /* large, fills the container like the reference */ aspect-ratio: 1060 / 620; /* matches the cropped viewBox */ } .credit-card__cta { flex-direction: row-reverse; /* icon on the inline-start (right) */ } @media (max-width: 767px) { /* HAP-398: the credit-card Lottie is far too small on mobile. Widening the host barely helps (the SVG uses preserveAspectRatio, so it re-centers/fits), so scale the rendered art up. Scaling from the right grows it leftward so it bleeds off the left edge like Figma; html overflow-x:clip clips the bleed. */ .credit-card__lottie { transform: scale(1.5); transform-origin: center; } .credit-card__art { /* the Lottie canvas has transparent whitespace at top & bottom — pull the art up toward the subtitle and the button up under the card (% scales with the card size). */ margin-top: 0; margin-bottom: 30px; } } /* ------------------------------- FAQ -------------------------------- */ .faq__inner { position: relative; } .faq__head { position: relative; /* keep the heading above the decorative keychain (z 0) */ z-index: 1; text-align: right; margin-bottom: var(--sp-8); } .faq__deco { position: absolute; top: 75px; inset-inline-start: var(--gutter); /* right edge in RTL */ width: clamp(160px, 20vw, 300px); height: auto; z-index: 0; } .faq__list { max-width: 720px; margin-inline-start: auto; /* push list to the left */ display: flex; flex-direction: column; gap: var(--sp-3); position: relative; z-index: 1; } .faq-item { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); box-shadow: var(--shadow-card); } .faq-item__q { margin: 0; font-size: inherit; } .faq-item__q button { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); width: 100%; padding: var(--sp-4) var(--sp-5); text-align: right; } .faq-item__text { font-weight: var(--fw-regular); font-size: 20px; } .faq-item__chevron { flex: 0 0 auto; transition: transform 0.2s ease; } .faq-item__q button[aria-expanded="true"] .faq-item__chevron { transform: rotate(180deg); } .faq-item__a { padding: 0 var(--sp-5) var(--sp-5); color: var(--gray-700); font-size: 16px; line-height: 1.6; } .faq-item__a a { color: var(--red); text-decoration: underline; } @media (max-width: 767px) { .faq__head { padding-inline-start: 0; text-align: right; /* HAP-399: RTL — right-aligned on mobile, not centered */ } .faq-item__text { font-size: 18px; } .faq-item__a { font-size: 15px; } .faq__deco { display: none; } .faq__list { max-width: none; } } /* --------------------------- Good to know --------------------------- */ .gtk__inner { display: grid; grid-template-columns: 1fr 320px; /* RTL: 1fr=right=text, 320=left=hand */ grid-template-rows: auto auto 1fr; /* title, body, spacer (absorbs hand height) */ grid-template-areas: "title hand" "body hand" ". hand"; column-gap: var(--sp-8); } .gtk__title { grid-area: title; align-self: start; text-align: right; font-size: clamp(34px, 3.8vw, 48px); /* Figma Big-Numbers L = 48 */ margin-bottom: var(--sp-2); } .gtk__body { grid-area: body; align-self: start; text-align: right; color: var(--gray-700); font-size: 18px; /* Figma disclaimer (26520:1639) */ line-height: 20px; /* Figma leading-20 */ } .gtk__body p + p { margin-top: var(--sp-2); } .gtk__body a { color: inherit; text-decoration: underline; } .gtk__hand { grid-area: hand; align-self: start; } .gtk__hand .lottie { width: 100%; aspect-ratio: 1 / 1; /* the Lottie square has transparent padding (~22% top, ~26% bottom); trim it so the hand reads compact and its shadow rests on the text-block baseline */ margin-top: -22%; margin-bottom: -26%; } @media (max-width: 767px) { /* Figma mobile (26520:1905): stacked title → hand (bigger, centered) → text */ .gtk__inner { display: flex; flex-direction: column; gap: var(--sp-5); /* 20 (Figma) */ } .gtk__title { margin-bottom: 0; } .gtk__hand { align-self: flex-start; /* RTL: cross-start = right */ width: 230px; /* visible hand ≈ 120px after the lottie trim (Figma) */ } .gtk__hand .lottie { margin-inline-start: -25%; } } /* -------------------------- Cookie banner --------------------------- */ .cookie-banner { position: fixed; inset-inline: 0; bottom: 0; z-index: 200; background: var(--white); border-top: 1px solid var(--gray-200); box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12); } .cookie-banner__inner { display: flex; align-items: center; gap: var(--sp-4); padding-block: var(--sp-4); } .cookie-banner__img { flex: 0 0 auto; width: 56px; height: auto; } .cookie-banner__text { flex: 1; margin: 0; font-size: var(--fs-body-m); line-height: 1.5; text-align: right; } .cookie-banner__text a { color: var(--red); font-weight: var(--fw-bold); text-decoration: underline; white-space: nowrap; } .cookie-banner__accept { flex: 0 0 auto; } @media (max-width: 767px) { .cookie-banner__inner { flex-direction: column; text-align: center; gap: var(--sp-3); } .cookie-banner__text { text-align: center; font-size: var(--fs-body-s); } } /* ---- Mobile overrides (kept last so they win over section-specific sizes) -- */ @media (max-width: 767px) { /* All section titles uniformly 32px on mobile (Figma big-numbers/s) */ .section-title, .videos .section-title, .gtk__title { font-size: 32px; } /* The Storyly web placement sizes its rings to this container's height (cover ≈ 0.73 × height). Ring / image / label styling itself is controlled in the Storyly dashboard, not here (see storyly.js). This just reserves the mobile band; adjust it if the dashboard ring size changes. */ .topics__storyly { height: 124px; } /* HAP-401: uniform 40px gap between all components on mobile. Every section is 20px top + 20px bottom -> 40px between adjacent sections. Sections that carry their own top/bottom padding (hero, videos, topics) are normalised to 20px here too so the gap is consistent everywhere. */ .section { padding-block: 20px; } .hero { padding-top: 20px; padding-bottom: 20px; } .videos { padding-top: 20px; } .topics { padding-top: 20px; padding-bottom: 20px; } }