/* ===================================================================== Hebrew / RTL Overrides for FULLIN Website --------------------------------------------------------------------- Applies when - Replaces the dark bar-photo hero with a clean brand gradient - Moves the nav "current" arrow indicator to the right side of the word - Uses a mirrored (left-pointing) arrow so it reads correctly in RTL - Adjusts text-alignment and a few flex orderings for the Hebrew UI ===================================================================== */ html[lang="he-il"], html[dir="rtl"] body { direction: rtl; } /* ------ Typography: Hebrew needs a clean sans-serif fallback ------ */ html[lang="he-il"] body, html[lang="he-il"] .main-heading, html[lang="he-il"] .font-size-48, html[lang="he-il"] .heading-4, html[lang="he-il"] .heading-6, html[lang="he-il"] .font-16, html[lang="he-il"] .text-block-6, html[lang="he-il"] .text-block-9, html[lang="he-il"] .nav-link, html[lang="he-il"] .secondry-button, html[lang="he-il"] .button-primary { font-family: "Rubik", "Heebo", "Assistant", "Mona Sans", Arial, sans-serif; } /* ------ HERO: brand gradient + product shot ------ */ html[lang="he-il"] .section { background-image: radial-gradient(circle at 80% 20%, rgba(59, 181, 92, 0.35) 0%, transparent 55%), radial-gradient(circle at 20% 80%, rgba(59, 181, 92, 0.25) 0%, transparent 60%), linear-gradient(135deg, #0b1f14 0%, #13301d 45%, #1d4a2c 100%); background-position: 80% 20%, 20% 80%, center; background-size: auto, auto, cover; background-repeat: no-repeat, no-repeat, no-repeat; position: relative; } /* Power bank + phone composite shot floated on the LEFT half of the * hero. The source PNG already has a dark green background matching * the hero gradient and bakes in the red low-battery indicator, the * phone with the FULLIN app, and sparkle effects — so we don't need * a mask-image vignette (the image already blends into the hero) * nor the separate CSS battery indicator. */ html[lang="he-il"] #home { overflow: hidden; } html[lang="he-il"] #home::before { content: ""; position: absolute; left: 7%; top: 50%; width: 40%; height: 96%; transform: translateY(-50%); background-image: url("../images/fullin-hero-composite.png"); background-repeat: no-repeat; background-position: center; background-size: contain; pointer-events: none; z-index: 1; animation: hero-powerbank-float 5.5s ease-in-out infinite; } @keyframes hero-powerbank-float { 0%, 100% { transform: translate(0, -50%); } 50% { transform: translate(0, calc(-50% - 7px)); } } /* ------ HERO animated scene: particles + phone silhouette + pins ------ * Decorative storytelling layer behind the text. z-index 1 keeps the * power bank (#home::before, also z-index 1) and all scene elements * behind .hero-div (z-index 2). pointer-events:none so nothing blocks * the CTAs. aria-hidden on the container hides it from screen readers. */ html[lang="he-il"] .hero-scene { position: absolute; top: 0; bottom: 0; left: 0; width: 50%; pointer-events: none; z-index: 1; overflow: hidden; } /* The standalone CSS low-battery indicator was removed — the new * fullin-hero-composite.png already bakes in a red "battery empty" * warning icon next to the power bank, so replicating it in CSS * just duplicated the visual and cluttered the scene. */ /* ---- Particles (10 upward-drifting dots) ---- */ html[lang="he-il"] .hero-scene__particle { position: absolute; bottom: -12px; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle, rgba(120, 235, 150, 0.95) 0%, rgba(59, 181, 92, 0.6) 45%, transparent 75%); opacity: 0; will-change: transform, opacity; animation: hero-particle-rise 10s linear infinite; } /* Scatter horizontal positions, sizes, durations, delays for an * organic "not a pattern" feel. The wrapper now holds 10 particles * as its only children (nth-child 1..10) — the CSS battery indicator * was removed because the hero composite PNG bakes it in. */ html[lang="he-il"] .hero-scene__particle:nth-child(1) { left: 10%; width: 5px; height: 5px; animation-duration: 9s; animation-delay: 0s; } html[lang="he-il"] .hero-scene__particle:nth-child(2) { left: 22%; width: 7px; height: 7px; animation-duration: 11s; animation-delay: 1.4s; } html[lang="he-il"] .hero-scene__particle:nth-child(3) { left: 35%; width: 4px; height: 4px; animation-duration: 8s; animation-delay: 2.8s; } html[lang="he-il"] .hero-scene__particle:nth-child(4) { left: 48%; width: 6px; height: 6px; animation-duration: 12s; animation-delay: 4.3s; } html[lang="he-il"] .hero-scene__particle:nth-child(5) { left: 15%; width: 8px; height: 8px; animation-duration: 10s; animation-delay: 5.6s; } html[lang="he-il"] .hero-scene__particle:nth-child(6) { left: 28%; width: 5px; height: 5px; animation-duration: 9s; animation-delay: 0.8s; } html[lang="he-il"] .hero-scene__particle:nth-child(7) { left: 40%; width: 6px; height: 6px; animation-duration: 11s; animation-delay: 2.2s; } html[lang="he-il"] .hero-scene__particle:nth-child(8) { left: 8%; width: 4px; height: 4px; animation-duration: 8s; animation-delay: 3.6s; } html[lang="he-il"] .hero-scene__particle:nth-child(9) { left: 44%; width: 7px; height: 7px; animation-duration: 12s; animation-delay: 5.1s; } html[lang="he-il"] .hero-scene__particle:nth-child(10) { left: 32%; width: 5px; height: 5px; animation-duration: 10s; animation-delay: 6.9s; } @keyframes hero-particle-rise { 0% { transform: translate(0, 0) scale(1); opacity: 0; } 15% { opacity: 0.9; } 60% { transform: translate(14px, -45vh) scale(0.85); opacity: 0.7; } 100% { transform: translate(-6px, -95vh) scale(0.4); opacity: 0; } } /* ---- Motion-reduction: kill animation for users who opt out ---- */ @media (prefers-reduced-motion: reduce) { html[lang="he-il"] #home::before, html[lang="he-il"] .hero-scene__particle { animation: none !important; } html[lang="he-il"] #home::before { transform: translateY(-50%); } } /* Flip the hero so text content forms a column hugging the right edge */ html[lang="he-il"] .hero-div { display: flex; flex-direction: column; align-items: flex-end; text-align: right; width: 55%; margin-right: 0; margin-left: auto; position: relative; z-index: 2; } /* Heading: flush with the right edge of the column. Drop Webflow's * 60% width cap that was floating it in the middle. */ html[lang="he-il"] .main-heading { text-align: right; width: 100%; max-width: 100%; margin-right: 0; margin-left: 0; padding-right: 0; direction: rtl; } /* Red accent word inside the hero H1 ("שקרן"). Stock .bold-text paints * the word in brand green — override to a warning red so it contrasts * with the rest of the white heading and ties into the low-battery * warning theme. Scoped to .main-heading to stay out of other pages. */ html[lang="he-il"] .main-heading .bold-text.red, .main-heading .bold-text.red { color: #ff3b30; } html[lang="he-il"] .div-block-41 { justify-content: flex-end; align-items: flex-end; display: flex; text-align: right; width: 100%; margin-right: 0; margin-left: 0; } html[lang="he-il"] .div-block-34 { margin-right: 0; margin-left: 0; text-align: right; width: 100%; max-width: 100%; } html[lang="he-il"] .font-16 { text-align: right; direction: rtl; } html[lang="he-il"] .font-16.center { text-align: center; } /* Keep the app-store download badges on the right side of the hero */ html[lang="he-il"] .div-block-2 { flex-flow: row-reverse; justify-content: flex-start; margin-right: 0; margin-left: auto; } /* The hero CTA "הצטרפו כשותפי עסקי" inherits align-items:flex-end * from .hero-div, which in an RTL flex-COLUMN maps to the LEFT edge * (cross-axis end). Override on the button itself so it sits flush * right under the heading and paragraph. */ html[lang="he-il"] .hero-div .secondry-button { align-self: flex-start; } /* ------ NAV: mirror the current-page arrow indicator ------ */ /* English: arrow to the LEFT of the word (background-position: 0%) Hebrew: arrow to the RIGHT of the word (background-position: 100%) and pointing the opposite direction (mirrored via scaleX). */ html[lang="he-il"] .nav-link.w--current { background-image: url('../images/Vector-4-rtl.svg'); background-position: 100%; background-repeat: no-repeat; background-size: 15px; padding-left: 0; padding-right: 20px; } /* Navbar order in RTL: * right → [ Logo ] [ בית ] [ איך זה עובד ] [ מחיר ] [ לעסקים ] [ שאלות ותשובות ] [ צור קשר ] ← left * * html dir="rtl" already flows flex children right-to-left with the * default `flex-direction: row`. The stock Webflow CSS (and my earlier * override) applied `row-reverse`, which re-inverted the order and put * the logo back on the LEFT. Force normal row ordering here so the * logo lands on the right and nav items read right-to-left. */ html[lang="he-il"] .navbar-wrapper, html[lang="he-il"] .nav-menu-wrapper, html[lang="he-il"] .nav-menu { flex-direction: row !important; flex-wrap: wrap; } /* Let the nav menu wrapper grow to span the full width between the * logo (right) and the left edge of the navbar, so we can position * its inner items independently. Without this the wrapper only takes * the intrinsic width of its menu and gets stranded in the middle. */ html[lang="he-il"] .nav-menu-wrapper { flex: 1 1 auto; } /* Pile nav items at the start of the menu (= RIGHT in RTL), packed * close to the logo. Override Webflow's `space-between` which was * spreading them across the whole bar. */ html[lang="he-il"] .nav-menu { justify-content: flex-start !important; align-items: center; display: flex; width: 100%; gap: 8px; } /* The CTA "צור קשר" button is the LAST
  • in .nav-menu. Push it to * the visual far LEFT in RTL by giving it an auto right margin, which * absorbs all remaining main-axis space onto its right side. */ html[lang="he-il"] .nav-menu > li:last-child { margin-right: auto; } html[lang="he-il"] .nav-button-wrapper { margin-left: 0; margin-right: 0; } /* ------ "Low battery kills moments" row: mirror direction ------ */ html[lang="he-il"] .quick-stack-2, html[lang="he-il"] .quick-stack-3, html[lang="he-il"] .w-layout-layout { direction: rtl; } /* ------ Section-2 redesign: cinematic photo with glassmorphism card ------ * The stock layout was a 2-cell row (text | image). Repurpose it into a * single rounded hero-style photo with a floating white glass card * anchored to the right that holds the heading, copy, and a gold CTA. */ html[lang="he-il"] .section-2 { padding: 80px 0; } html[lang="he-il"] .section-2 .main-container { max-width: 1280px; } html[lang="he-il"] .section-2 .second-section { display: block !important; position: relative; border-radius: 28px; overflow: hidden; min-height: 540px; background-image: linear-gradient(to left, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.15) 45%, transparent 70%), url("../images/fullin-cafe-scene.jpg"); background-size: cover, cover; background-position: center, center; box-shadow: 0 30px 80px rgba(5, 20, 10, 0.3); direction: rtl; } /* Hide the raw ; we're using the CSS background layer instead so * we get full control over the gradient overlay and rounded corners. */ html[lang="he-il"] .section-2 .cell img.image-3, html[lang="he-il"] .section-2 .cell { display: none !important; } /* Floating white glass card anchored to the RIGHT of the photo */ html[lang="he-il"] .section-2 .cell-3 { position: absolute !important; top: 50%; right: 56px; transform: translateY(-50%); width: 42%; max-width: 460px; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 22px; padding: 34px 34px 30px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25); text-align: right !important; align-items: flex-start !important; z-index: 2; display: flex; flex-direction: column; gap: 16px; } html[lang="he-il"] .section-2 .cell-3 .div-block-3 { max-width: 100%; margin: 0; } html[lang="he-il"] .section-2 .cell-3 .font-size-48 { color: #1a1a1a !important; font-size: 30px !important; line-height: 1.2; font-weight: 800; margin: 0; text-align: right; direction: rtl; } html[lang="he-il"] .section-2 .cell-3 .font-16.dark { color: #3a3a3a !important; font-size: 15px; line-height: 1.6; margin: 0; text-align: right; direction: rtl; } /* Gold "הצטרפו כשותפי עסקי" CTA inside the card */ html[lang="he-il"] .section-2 .cell-3 .div-block-4 { display: inline-flex !important; align-items: center; gap: 10px; background: linear-gradient(135deg, #f4b400 0%, #e89b00 100%); color: #1a1a1a; padding: 13px 24px; border-radius: 999px; font-weight: 700; text-decoration: none; box-shadow: 0 10px 22px rgba(228, 149, 0, 0.38); transition: transform 0.2s ease, box-shadow 0.2s ease; align-self: flex-start !important; width: auto; } html[lang="he-il"] .section-2 .cell-3 .div-block-4:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(228, 149, 0, 0.55); } html[lang="he-il"] .section-2 .cell-3 .div-block-4 .text-block { color: #1a1a1a !important; font-family: "Rubik", "Heebo", sans-serif; font-size: 15px; font-weight: 700; } html[lang="he-il"] .section-2 .cell-3 .div-block-4 .image-10 { height: 14px; width: auto; filter: brightness(0); } /* Mobile: card collapses below the photo instead of overlaying it */ @media (max-width: 767px) { html[lang="he-il"] .section-2 { padding: 50px 0; } html[lang="he-il"] .section-2 .second-section { min-height: 420px; border-radius: 20px; background-image: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.1) 55%, transparent 80%), url("../images/fullin-cafe-scene.jpg"); padding-bottom: 24px; } html[lang="he-il"] .section-2 .cell-3 { position: absolute !important; top: auto; bottom: 20px; right: 16px; left: 16px; width: auto; max-width: none; transform: none; padding: 22px 22px 20px; border-radius: 18px; } html[lang="he-il"] .section-2 .cell-3 .font-size-48 { font-size: 22px !important; } html[lang="he-il"] .section-2 .cell-3 .font-16.dark { font-size: 14px; } } /* `.cell-3` is a flex column holding the heading, paragraph and CTA. * In RTL context `align-items: flex-end` (set by Webflow for he-il) * pushes children to the LEFT — the opposite of what's wanted. * Force start-alignment so every child hugs the RIGHT edge of the * cell, and right-align all text inside. */ html[lang="he-il"] .cell-3 { text-align: right !important; align-items: flex-start !important; justify-content: flex-start; } /* The heading wrapper is hard-capped at 320px which leaves a big * empty gap on its right. Let it grow and right-align its h1 so the * heading starts at the cell's right edge (the start of Hebrew). */ html[lang="he-il"] .div-block-3 { width: auto; max-width: 520px; text-align: right; } html[lang="he-il"] .div-block-3 .font-size-48, html[lang="he-il"] .cell-3 .font-16, html[lang="he-il"] .cell-3 p { text-align: right; direction: rtl; } /* CTA row: icon on the LEFT of the Hebrew label (forward direction * in RTL) and the whole block anchored to the right edge. */ html[lang="he-il"] .div-block-4 { flex-flow: row wrap; justify-content: flex-start; align-self: flex-start; } /* "How it works" section — text on the RIGHT, product image on the LEFT. * Markup is ``. * In RTL with the default `flex-direction: row` the first child (image) * lands on the right. Use `row-reverse` so in RTL the first child goes * LEFT, which puts the image on the left and the content on the right. */ html[lang="he-il"] .quick-stack-2 { flex-direction: row-reverse !important; display: flex; } html[lang="he-il"] .div-block-35 { text-align: right; margin-right: 0 !important; margin-left: auto; width: 100%; } html[lang="he-il"] .div-block-35 .font-size-48 { text-align: right; direction: rtl; } /* ------ "How it works" product image: float + soft shadow ------ * The new PNG has a transparent background, so give it a subtle * drop-shadow so it sits nicely on the white section instead of * looking flat, and a slow float animation so it doesn't feel * static (matches the hero power bank float vibe). Capped at 80% * of the cell width so it doesn't dominate the row on wide screens. */ html[lang="he-il"] .section-3 .cell-2 img { max-width: 80%; max-height: 560px; width: auto; height: auto; margin: 0 auto; display: block; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.18)) drop-shadow(0 6px 12px rgba(0, 0, 0, 0.12)); animation: hero-powerbank-float 5.5s ease-in-out infinite; animation-name: how-it-works-image-float; } @keyframes how-it-works-image-float { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(0, -9px); } } @media (prefers-reduced-motion: reduce) { html[lang="he-il"] .section-3 .cell-2 img { animation: none !important; transform: none; } } html[lang="he-il"] .div-block-6, html[lang="he-il"] .div-block-7, html[lang="he-il"] ._3-coulms, html[lang="he-il"] .font-16.dark { text-align: right; direction: rtl; } /* Step number + title row inside each "How it works" item. * DOM order is [

    01

    ] then [

    סרקו והתחילו

    ]. With * default RTL flex-row (NO row-reverse) the first DOM child appears * at the RTL start = visual RIGHT — which puts the number BEFORE the * title in Hebrew reading order. */ html[lang="he-il"] .div-block-5 { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: baseline; gap: 14px; } /* ------ "RENT INSTANTLY / טעינה מיידית" + "ABOUT THE APP / על האפליקציה" ------ * Both sections share `.div-block-8` as the flex row, but the DOM order * of text vs. phone screenshots is reversed between them. The stock * Webflow Hebrew rules push `.div-block-36` (text) to `order: 9999`, * which sends the text to the END of the row → in RTL that's the LEFT * side, the opposite of what we want. * * Force the layout with explicit orders so text is ALWAYS first * (right side in RTL) and the screenshots block is ALWAYS second * (left side in RTL), regardless of which order they appear in HTML. * * `flex-wrap: nowrap` is critical — without it the two children wrap * onto separate lines and stack vertically. */ html[lang="he-il"] .div-block-8 { flex-direction: row !important; flex-wrap: nowrap !important; align-items: center; justify-content: space-between; gap: 40px; display: flex; } html[lang="he-il"] .div-block-36 { order: -1 !important; text-align: right; /* Flex COLUMN container: align-items aligns children on the cross * (horizontal) axis. In RTL the cross-end is LEFT, the cross-start * is RIGHT — so use flex-start to pin h1/p/button to the right. */ align-items: flex-start !important; flex: 0 1 auto; max-width: 50%; display: flex; flex-direction: column; } html[lang="he-il"] .div-block-36 .font-size-48, html[lang="he-il"] .div-block-36 .eyebrow, html[lang="he-il"] .div-block-36 .div-block-7, html[lang="he-il"] .div-block-36 p, html[lang="he-il"] .div-block-36 .secondry-button { text-align: right; direction: rtl; align-self: flex-start; /* RTL flex-start = right edge */ } /* The intro paragraph wrapper has a 477px hard width which makes the * heading and paragraph land at different right edges. Let it take * the full width of its column so all children share a right edge. */ html[lang="he-il"] .div-block-36 .div-block-7 { width: 100%; max-width: 100%; } html[lang="he-il"] .div-block-10 { order: 1 !important; flex: 0 1 auto; } /* Pricing cards: center remains center, but fix inner direction */ html[lang="he-il"] .div-block-20, html[lang="he-il"] .div-block-21, html[lang="he-il"] .div-block-22 { direction: rtl; text-align: center; } html[lang="he-il"] .text-block-6 { text-align: center; } /* Footer direction */ html[lang="he-il"] .div-block-31 { direction: rtl; } html[lang="he-il"] .div-block-32 { text-align: right; } /* ------ FAQ: "צריכים עזרה?" intro on the RIGHT, questions on the LEFT ------ * Use explicit flex order so it doesn't depend on the markup order or * on the document direction. */ html[lang="he-il"] .div-block-24 { flex-flow: row nowrap !important; align-items: flex-start; justify-content: space-between; gap: 40px; display: flex; } html[lang="he-il"] .div-block-25 { order: -1 !important; align-items: flex-start !important; text-align: right; flex: 0 0 40%; display: flex; flex-direction: column; } html[lang="he-il"] .div-block-25 .heading-6, html[lang="he-il"] .div-block-25 .paragraph-5, html[lang="he-il"] .div-block-25 .text-block-8 { text-align: right; direction: rtl; } html[lang="he-il"] .div-block-26 { order: 1 !important; margin-left: 0 !important; margin-right: 0 !important; width: 55%; flex: 0 0 55%; } html[lang="he-il"] .dropdown-toggle, html[lang="he-il"] .dropdown-list-2 { text-align: right; direction: rtl; } /* The dropdown chevron in the stock layout sits on the left of the * question. In RTL move it to the right of the Hebrew question text. */ html[lang="he-il"] .dropdown-toggle .w-icon-dropdown-toggle { left: auto; right: 0; } html[lang="he-il"] .dropdown-toggle .text-block-9 { padding-right: 0; padding-left: 30px; text-align: right; } /* ------ "Growing across Israel" — text on the RIGHT, map on the LEFT ------ * The stock layout has the map (background-video) sitting at width * 1200px with a negative margin-top, which made it climb on top of the * Hebrew copy. Reposition it absolutely so it occupies the LEFT half * of the section and keep the text comfortably on the RIGHT half. */ html[lang="he-il"] .section-10 { position: relative; overflow: hidden; min-height: 600px; } html[lang="he-il"] .section-10 .main-container { display: flex; justify-content: flex-start; /* RTL flex-start = RIGHT */ position: relative; z-index: 2; width: 100%; } html[lang="he-il"] .div-block-37 { justify-content: flex-start !important; align-items: center; display: flex; width: 50%; margin-right: 0; margin-left: auto; } html[lang="he-il"] .div-block-38 { text-align: right !important; align-items: flex-start; /* RTL flex-start = RIGHT */ margin-left: 0; margin-right: 0; max-width: 100%; padding-right: 20px; } html[lang="he-il"] .div-block-38 .font-size-48, html[lang="he-il"] .div-block-38 .font-16, html[lang="he-il"] .div-block-38 p { text-align: right; direction: rtl; align-self: flex-start; } /* Lift the map out of the document flow and pin it to the LEFT half * of the section so it can never collide with the text on the right. * top:0 + bottom:0 lets the browser auto-calculate the container * height to match the full section height — important because the * inner