/* =================================================================== Macro AI - סטודיו לייעוץ והטמעת בינה מלאכותית Visual language sourced from cuberto.com design pack Palette: #000000 · #ffffff · #888888 · #161616 (+ #25D366 WhatsApp) Material: flat (no shadows, no gradients beyond pure tonal) Type: Heebo (Suisse Intl analogue) + Inter (Latin / UI accents) Direction: RTL Hebrew =================================================================== */ :root { /* tokens */ --bg: #ffffff; --bg-inverse: #000000; --bg-soft: #161616; --text: #000000; --text-inverse: #ffffff; --text-muted: #6e6e6e; --rule: rgba(0, 0, 0, 0.12); --rule-inverse: rgba(255, 255, 255, 0.16); /* one explicit exception to the monochrome palette: WhatsApp brand. --wa-deep #0F8071 = 4.83:1 on white (WCAG AA); hover #0C7263 = 5.78:1. */ --wa: #25D366; --wa-deep: #0F8071; --wa-deep-hover: #0C7263; /* DECORATIVE MOCK TOKENS — fixed across light/dark scroll themes (NOT overridden in html[data-theme="dark"]). One-off stops (hero screen interior #fafafa→#f0f1f3, bezel/base shading) stay inline. */ --selection-bg: #000; --selection-fg: #fff; --cursor-ink: #ffffff; --mock-frame-top: #1c1c1c; --mock-frame-bottom: #0f0f0f; --mock-surface: #f7f7f8; --mock-text: #1a1a1f; --src-docs: #2563eb; --src-files: #dc2626; --src-inbox: #7c3aed; --src-report: #059669; --src-knowledge: #d97706; /* ---------------------------------------------------------------- SCROLL THEME (mercury.com-style). A single global theme lives on ; script.js flips it at the section midline. The light values here are the defaults so the page renders correctly with no JS. Only PAGE-SURFACE tokens flip (--bg / --text / --text-muted / --rule) plus a dedicated set of NAV chrome tokens — never the mock/imagery colors, which stay fixed (--bg-inverse, hardcoded hex inside laptop/card/fragment mocks). The dark override lives in `html[data-theme="dark"]` below. */ --nav-fg: var(--text); --nav-links-bg: rgba(0, 0, 0, 0.04); --nav-cta-bg: var(--text); --nav-cta-fg: var(--text-inverse); --nav-scrim: rgba(255, 255, 255, 0.78); /* The lockup is an inline SVG painted with currentColor; --logo-ink keeps it a touch under full black on light so it identifies without dominating. */ --logo-ink: rgba(17, 17, 17, 0.86); /* Mercury's theme-crossfade curve. */ --ease-theme: cubic-bezier(0, 0, 0.6, 1); --font-sans: "Heebo", "Suisse Intl", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Arial Hebrew", Arial, sans-serif; --radius-card: 16px; --radius-pill: 99999px; --radius-soft: 50px; /* Mini-laptop chassis proportions for use-case cards. Bezel and base extend BEYOND the .usecase__visual bounds (which represents the laptop SCREEN only, aspect 1.876:1). clamp() values are HERO .laptop ratios at ~0.45x — same identity, scaled down — so when the hero laptop morphs onto card 1 the chassis lands edge-to-edge with no overshoot. Hero bezel ≈ 0.9vw × 0.45 = 0.4vw; hero base ≈ 2.2vw × 0.45 = 1vw. */ --mock-bezel-h: clamp(4px, 0.4vw, 7px); --mock-base-h: clamp(9px, 1vw, 16px); --mock-radius: clamp(6px, 0.6vw, 10px); --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --space-4xl: 96px; --page-gutter: clamp(24px, 4vw, 64px); --content-wide: 1320px; --content-main: 1180px; --content-narrow: 880px; --gap-section: clamp(72px, 8vw, 128px); --gap-section-tight: clamp(48px, 6vw, 96px); --gap-section-relaxed: clamp(88px, 9vw, 144px); --gap-head: clamp(28px, 3.5vw, 48px); --gap-content: clamp(32px, 4vw, 56px); --z-content: 1; --z-hero: 2; --z-progress: 30; --z-drawer-backdrop: 40; --z-drawer: 45; --z-nav: 50; --z-cursor: 100; /* ---------------------------------------------------------------- RESPONSIVE BREAKPOINTS (values, for reference — media queries can't read custom properties, so these document the system used below): phone : < 768px — single column, phone-frame hero, drawer nav tablet : 768–1023 — two-column hybrids, scroll animations ON desktop : >= 1024 — full experience, unchanged Scroll animations (laptop hero, founders pin, hero→card1 morph) are gated `(min-width: 768px) and (min-height: 640px)` so landscape phones (wide but short) fall back to the static mobile hero. ---------------------------------------------------------------- */ /* Legacy alias kept so existing section rules can adopt the new scale. */ --pad-page: var(--page-gutter); /* Effective height of the fixed nav. Used by `scroll-margin-top` on anchor targets so #usecases / #training / #process / #approach don't land underneath the nav bar when scrolled into view. */ --nav-h: clamp(72px, 7vw, 100px); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); } /* ---------------------------------------------------------------- DARK SCROLL THEME. Overrides only the page-surface + nav-chrome tokens; the always-dark panel sections (process / contact / footer) keep their own --bg-inverse / --text-inverse styling, and the laptop / card / fragment mocks keep their hardcoded colors. So flipping this recolors the page background, body text, and the floating nav — the "whole site changes theme" feel — without inverting the imagery. */ html[data-theme="dark"] { --bg: #0e0e12; --text: #f4f4f6; --text-muted: #9b9ba6; --rule: rgba(255, 255, 255, 0.16); --nav-fg: #f4f4f6; --nav-links-bg: rgba(255, 255, 255, 0.10); --nav-cta-bg: #f4f4f6; --nav-cta-fg: #0e0e12; --nav-scrim: rgba(14, 14, 18, 0.72); --logo-ink: rgba(244, 244, 246, 0.92); } /* The crossfade itself. Body background + the text of the transparent (page-surface) sections ease between the light/dark token values over 0.5s; the nav recolors via its own slightly snappier transitions so hovers stay crisp. Mock/imagery elements reference fixed colors, so listing them here is harmless — the transition only fires when a value actually changes. */ html, body, .section-title, .section-blurb, .adopt__title, .adopt__sub, .trust__statement, .trust__founders-head, .founder__name, .founder__role, .founder__bio { transition: background-color 0.5s var(--ease-theme), color 0.5s var(--ease-theme), border-color 0.5s var(--ease-theme); } * { box-sizing: border-box; } *::selection { background: var(--selection-bg); color: var(--selection-fg); } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { min-height: 100vh; font-size: 16px; line-height: 1.55; overflow-x: hidden; } /* RTL is set on - most logical properties handle direction. */ /* ============================================================ KEYBOARD FOCUS `currentColor` inherits the surrounding text color, so the ring is naturally black on light sections and white on dark sections. The WhatsApp pills override below because their text is white but they sit on a light page background. ============================================================ */ a:focus-visible, button:focus-visible, [data-cursor]:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 6px; } /* Pill-shaped buttons: ring follows the pill shape */ .nav__cta:focus-visible, .nav__links a:focus-visible { border-radius: var(--radius-pill); } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; padding: 0; margin: 0; } button { font: inherit; cursor: pointer; } /* Latin runs inside Hebrew (the word "AI", roman numerals, dates) inherit Heebo gracefully, but force Inter for the brand word for a tighter look. */ .brand-word, .footer__brand > span:last-child, .section-title [dir="ltr"] { font-family: "Inter", "Heebo", sans-serif; letter-spacing: -0.01em; unicode-bidi: isolate; white-space: nowrap; } /* ============================================================ CUSTOM CURSOR ============================================================ */ /* Hide the native cursor only AFTER script.js confirms the custom cursor is wired (it adds `body.has-cursor`). If JS is disabled or fails to load, the class never appears and desktop users keep their native cursor. */ @media (pointer: fine) { body.has-cursor * { cursor: none !important; } } /* Anchor scroll offset — keeps nav links from landing the target section underneath the fixed nav. */ #hero, #usecases, #training, #process, #approach, #founders, #contact { scroll-margin-top: var(--nav-h); } /* #approach lands a touch lower so the title + first content peek into view instead of opening on whitespace with the statement below the fold (P2). */ #approach { scroll-margin-top: calc(var(--nav-h) + clamp(8px, 1.5vh, 20px)); } /* Dedicated landing anchor for #usecases (see scrollToHash in script.js): a zero-height marker on the real cards, below the hero's -100vh tail. */ #usecases-cards { display: block; height: 0; scroll-margin-top: var(--nav-h); } /* #usecases is visually overlapped with the sticky hero finale. Let the hero timeline reach 100%; the section's own top padding clears the nav. */ #usecases { scroll-margin-top: 0; } .cursor, .cursor-dot { position: fixed; top: 0; inset-inline-start: 0; pointer-events: none; z-index: var(--z-cursor); border-radius: 999px; transform: translate3d(-50%, -50%, 0); will-change: transform; } /* Outer .cursor is a fixed-size positioning anchor; JS rewrites its transform every frame. The visible ring lives in a child so its hover / CTA morph can animate via transform:scale() (compositor-only) instead of width/height, without fighting the JS-owned position transform on the parent. */ .cursor { width: 36px; height: 36px; } .cursor__ring { position: absolute; inset: 0; border-radius: 999px; border: 1px solid var(--cursor-ink); mix-blend-mode: difference; transform: scale(1); transition: transform 320ms var(--ease-out), background 240ms var(--ease-out), border-color 240ms var(--ease-out); will-change: transform; } .cursor-dot { width: 4px; height: 4px; background: var(--cursor-ink); mix-blend-mode: difference; } /* Reduced motion: the custom cursor is a smooth-follow animation, so it yields to the native pointer (which also restores the user's OS pointer size / contrast settings). JS skips the has-cursor class here too, so `cursor: none` never applies and the native pointer stays visible. */ @media (prefers-reduced-motion: reduce) { .cursor, .cursor-dot { display: none; } } /* Touch / coarse pointers: there's no real cursor to follow, and the JS only wires the follow on a fine pointer — so the ring would otherwise sit parked in the corner. Hide it outright. */ @media (hover: none), (pointer: coarse) { .cursor, .cursor-dot { display: none !important; } } .cursor.is-link .cursor__ring { transform: scale(1.778); /* 64 / 36 — matches the previous hover size */ background: #ffffff; border-color: transparent; } .cursor.is-cta .cursor__ring { transform: scale(2.667); /* 96 / 36 — matches the previous CTA size */ background: #ffffff; border-color: transparent; } /* .is-view cursor state retired - no non-interactive 'view' targets on the page; was a false affordance on the use-case cards. */ /* ============================================================ NAV ============================================================ */ .nav { position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav); /* Centered nav: a 3-track grid keeps the links pill optically centered while the brand pins to the start (right, RTL) and the toggle to the end (left). The two 1fr flanks balance each other so the centre track stays centred even though the brand and toggle have different widths. */ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 22px var(--pad-page); background: transparent; transition: background 320ms var(--ease-out), backdrop-filter 320ms var(--ease-out), padding 320ms var(--ease-out); } .nav.is-scrolled { background: var(--nav-scrim); backdrop-filter: saturate(150%) blur(16px); -webkit-backdrop-filter: saturate(150%) blur(16px); padding-top: 14px; padding-bottom: 14px; } .nav__brand { display: inline-flex; align-items: center; justify-self: start; /* pin to the right (RTL start) in the grid flank */ grid-column: 1; /* stay in the start flank even when links are hidden */ gap: 10px; /* The brand sits in a 1fr grid track; without this the track collapses the inline-SVG lockup below its aspect width. max-content pins it to the logo. */ min-width: max-content; min-height: 44px; font-weight: 500; /* Match cuberto's logo: ~1.6rem on html-vw. 14.4px @ 1440, caps at 16px @ ≥1600. */ font-size: clamp(13px, 1vw, 16px); letter-spacing: -0.01em; } /* Brand lockup. Full Macro AI logo (M-peak symbol + wordmark) as an inline, vector SVG () — transparent by nature, crisp at any viewport, and painted with currentColor so it themes via --logo-ink instead of an invert() hack (which used to leave a box on the non-alpha raster). Height is the only knob; the viewBox keeps the ~7.9:1 aspect. Sizing logic (per /impeccable): nav : 1.7x nav-link text, never taller than the CTA pill. Identifies, doesn't dominate. foot : 1.7x nav, ~3.5x footer labels. Sign-off presence. */ .brand-lockup { display: inline-block; /* Sized to balance the compact nav CTA pill: kept small so the wide wordmark doesn't dominate the pill — its glyph height tracks the CTA label. */ height: clamp(18px, 1.7vw, 24px); /* Pin the lockup's aspect from the viewBox so width is derived from height deterministically — an inline SVG (unlike ) otherwise has no intrinsic width here and gets squished inside the flex nav/footer row. */ aspect-ratio: 935 / 118; width: auto; flex-shrink: 0; color: var(--logo-ink); transition: transform 320ms var(--ease-out), color 0.4s var(--ease-theme); } .brand-lockup use, .brand-lockup path { fill: currentColor; } .nav__brand:hover .brand-lockup { transform: scale(1.04); } .brand-lockup--lg { height: clamp(40px, 3.6vw, 56px); } /* Footer sits on #161616 - paint the lockup paper-white (transparent, no box). */ .footer__brand .brand-lockup { color: #f4f4f6; } .brand-word { font-variation-settings: "wght" 500; } .nav__links { display: flex; justify-self: center; /* centred pill in the middle grid track */ gap: 6px; background: var(--nav-links-bg); border-radius: var(--radius-pill); padding: 6px; transition: background-color 0.4s var(--ease-theme); } .nav__links a { display: inline-flex; align-items: center; padding: 10px 22px; border-radius: var(--radius-pill); /* Match cuberto's nav: 2rem on html-vw. 18px @ 1440, caps at 20px @ ≥1600. */ font-size: clamp(16px, 1.25vw, 20px); color: var(--nav-fg); transition: background 240ms var(--ease-out), color 240ms var(--ease-out), transform 160ms var(--ease-out); } /* Hover inverts against the active theme: fill with the nav text color, set the label to the page background so it reads on both themes. */ .nav__links a:hover { background: var(--nav-fg); color: var(--bg); } .nav__links a:active { transform: translateY(1px); } /* Desktop persistent WhatsApp CTA — compact pill with the original monochrome colors (solid theme ink, inverse label, white glyph). Sits in the end flank track (left, RTL); hidden < 1024px (see the nav breakpoint block) where the mobile drawer carries the same path. */ .nav__cta { display: inline-flex; align-items: center; justify-self: end; /* end flank track = left in RTL */ gap: 8px; background: var(--nav-cta-bg); color: var(--nav-cta-fg); padding: 10px 18px; border-radius: var(--radius-pill); font-size: clamp(15px, 1.05vw, 17px); font-weight: 600; transition: transform 320ms var(--ease-out), background-color 0.4s var(--ease-theme), color 0.4s var(--ease-theme); } .nav__cta:hover { transform: translateY(-1px); } .nav__cta:active { transform: translateY(0); } .nav__cta .wa-glyph { flex-shrink: 0; } /* ============================================================ HERO (centered variant) ============================================================ */ /* ============================================================ HERO v2 - scroll-driven laptop reveal + workflow demo .hero is a tall section; .hero__pin sticks to the viewport while the user scrolls through. Drive choreography via ScrollTrigger in script.js. The desktop choreography is wired by script.js; without JS or under reduced motion, the same DOM renders as a static final frame. ============================================================ */ .hero { position: relative; /* 4.5 viewport heights of scroll: the 100vh sticky pin holds for 350vh of scroll (was 250vh), and `.usecases` below has a matching `margin-top: -100vh` that pulls it up so it overlaps the bottom 100vh of hero. Net result: when the pin releases (scroll = 350vh), `יישומי AI נפוצים` sits exactly at viewport top — Stage 7 morphs the laptop into card 1's NATURAL position without any transform on .usecases (no lift, no parallax, no settle). The extra 100vh of pin also gives each timeline-second ~35vh of scroll (was ~25vh), so the morph and prior beats breathe more. */ height: 450vh; /* Transparent — html/body already paints `var(--bg)` underneath. We skip a background here so during the Stage 7 overlap, the cards in .usecases (z-index: 1) show through hero's empty regions while the morphing laptop (inside hero__pin, opaque chassis) stays on top. Higher z keeps the laptop above the cards. */ z-index: var(--z-hero); } .hero__pin { position: sticky; top: 0; height: 100vh; width: 100%; overflow: hidden; /* Cuberto-style padded text block at top, laptop in flow below. */ display: flex; flex-direction: column; align-items: center; /* Top padding matches cuberto's hero: 20rem (200px) at cap. Bottom padding guarantees the laptop's chassis base never sits flush against the viewport bottom once it scales into focus. */ padding: clamp(96px, 11vw, 200px) var(--pad-page) clamp(28px, 5vh, 72px); } /* Intro text - flows naturally at the top of the pin. */ .hero__intro { position: relative; text-align: center; width: 100%; z-index: 2; will-change: opacity, transform; } /* Static fallback - visible when JS is off or prefers-reduced-motion */ .hero__fallback { display: none; } .no-js .hero__fallback, body:not(.js-on) .hero__fallback { display: block; text-align: center; font-size: clamp(28px, 4vw, 56px); padding: clamp(120px, 12vw, 200px) var(--pad-page); } /* ============================================================ LAPTOP FRAME - CSS-only chassis. Inside the screen is real DOM ============================================================ */ .hero__laptop { /* In-flow under the intro text. Re-measured against cuberto @ 1440: subtitle bottom 417.9 → video top 474.5 ⇒ gap = 56.6px. Scales 3.93vw → 56.6px @ 1440, caps at 70px @ ≥1780. */ position: relative; margin-top: clamp(40px, 3.93vw, 70px); display: flex; align-items: center; justify-content: center; z-index: 1; will-change: transform; transform-origin: center center; } .laptop { /* Re-measured directly on cuberto.com @ 1440 viewport: video card width 1274.7px (88.52% of viewport), aspect 1.876:1. Scales with the viewport via 88.52vw, caps at 1360 (cuberto's 0.625vw root × 136rem cap at >=1600). */ position: relative; /* Width drives the screen height (aspect 1.876) and therefore the whole chassis height. The third cap binds the laptop by viewport HEIGHT so that even at the Stage-1→2 focus scale (1.15) the full bezel→screen→base fits inside the pin with the bottom padding to spare. Tuned for the shortest desktops (≈768–800px tall). The Stage-7 morph reads offsetWidth live, so this stays morph-safe. */ width: min(88.52vw, 1360px, 118vh); display: flex; flex-direction: column; align-items: center; } /* Tablet: the laptop's base is 108% of its width AND the hero timeline scales the laptop to 1.15 at focus, so at 88.52vw the chassis exceeds the gutters and the pin's overflow:hidden clips its rounded base. Cap the width so width × 1.08 (base) × 1.15 (focus) stays inside the viewport. */ @media (min-width: 768px) and (max-width: 1023px) { .laptop { width: min(75vw, 118vh, 1360px); } /* The in-screen content is sized in vw for the full viewport, but the chassis is capped smaller at tablet — so the content is proportionally too big and the tallest beat (the answer) overflows the screen. Scale the workflow down from the top so every beat fits inside the smaller laptop screen. */ .hero--v2 .laptop__screen .workflow { transform: scale(0.8); transform-origin: 50% 4%; } } /* SCREEN - dark chassis wrapping the screen interior. Aspect 1.876:1 matches cuberto's video card. The slight base below adds laptop identity without blowing past the viewport. */ .laptop__screen-wrap { position: relative; width: 100%; aspect-ratio: 1.876; background: linear-gradient(180deg, var(--mock-frame-top) 0%, var(--mock-frame-bottom) 100%); border-radius: clamp(10px, 1.2vw, 18px) clamp(10px, 1.2vw, 18px) 4px 4px; padding: clamp(10px, 1vw, 16px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 30px 60px -24px rgba(0, 0, 0, 0.35), 0 80px 140px -60px rgba(0, 0, 0, 0.45); } /* BASE - laptop body / keyboard area, slightly wider than the screen to suggest perspective. Minimal, no key detail. */ .laptop__base { position: relative; width: 108%; height: clamp(20px, 2.2vw, 36px); background: linear-gradient(180deg, #181818 0%, #0a0a0a 60%, #050505 100%); border-radius: 0 0 clamp(8px, 0.9vw, 14px) clamp(8px, 0.9vw, 14px); /* Thin highlight at the top edge to suggest the hinge */ box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.08) inset, 0 30px 48px -28px rgba(0, 0, 0, 0.55); } /* A subtle trackpad indicator in the body - just a soft rounded rect. */ .laptop__trackpad { position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%); width: 16%; height: 28%; border-radius: 2px; background: rgba(255, 255, 255, 0.025); } .laptop__bezel { position: absolute; top: 0; left: 0; right: 0; height: clamp(8px, 0.9vw, 14px); display: flex; align-items: center; justify-content: center; pointer-events: none; } .laptop__camera { width: clamp(3px, 0.4vw, 5px); height: clamp(3px, 0.4vw, 5px); border-radius: 50%; background: #444; } .laptop__screen { /* --bar-h reserves the macOS window-chrome strip at the top; the .workflow content is inset below it (see .workflow inset). */ --bar-h: clamp(28px, 2.6vw, 40px); position: relative; width: 100%; height: 100%; background: linear-gradient(180deg, #fafafa 0%, #f0f1f3 100%); border-radius: clamp(4px, 0.5vw, 8px); overflow: hidden; /* Reading the screen content (Hebrew RTL). */ direction: rtl; } /* ============================================================ macOS-style window chrome — a light title strip with the red/yellow/green traffic-light dots. Used inside the hero laptop screen and the card 1 / card 4 mini-laptop screens (`.window-bar--mock`). The parent screen's overflow:hidden + border-radius clips the bar's top corners to match. Dots use fixed macOS colors — in-screen UI chrome, not the page palette. ============================================================ */ .window-bar { position: absolute; top: 0; left: 0; right: 0; height: var(--bar-h, 34px); display: flex; align-items: center; padding-inline: calc(var(--bar-h, 34px) * 0.42); background: linear-gradient(180deg, #f6f6f7 0%, #ececee 100%); border-bottom: 1px solid rgba(0, 0, 0, 0.08); /* LTR so the traffic lights sit on the left as on macOS, even though the screen content is RTL. */ direction: ltr; z-index: 4; pointer-events: none; } .window-bar__dots { display: inline-flex; align-items: center; gap: calc(var(--bar-h, 34px) * 0.18); } .window-bar__dot { width: clamp(6px, calc(var(--bar-h, 34px) * 0.3), 12px); height: clamp(6px, calc(var(--bar-h, 34px) * 0.3), 12px); border-radius: 50%; } .window-bar__dot--r { background: #ff5f57; } .window-bar__dot--y { background: #febc2e; } .window-bar__dot--g { background: #28c840; } /* ============================================================ WORKFLOW STAGES - all rendered, GSAP controls visibility/position ============================================================ */ .workflow { position: absolute; /* Inset below the macOS window-chrome strip so the heading, frags, search and answer all sit inside the "app", not under the bar. */ inset: var(--bar-h, 0) 0 0 0; padding: clamp(20px, 2.6vw, 44px); display: block; /* Bigger inside-laptop body text - clear at the dramatic-zoom scale. */ font-size: clamp(13px, 1.2vw, 18px); color: var(--mock-text); } /* Stage 2: scattered fragment cards */ .workflow__fragments { position: absolute; inset: 0; pointer-events: none; } .frag { position: absolute; background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.07); border-radius: 10px; padding: clamp(10px, 1vw, 14px) clamp(12px, 1.2vw, 16px); box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.18); width: clamp(170px, 16vw, 230px); display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; will-change: transform, opacity, filter; } .frag__icon { grid-row: 1 / span 2; grid-column: 1; width: clamp(28px, 2.4vw, 36px); height: clamp(28px, 2.4vw, 36px); border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: var(--src-docs); flex-shrink: 0; /* Force LTR for the icon so DOC/PDF labels don't get reordered by the RTL parent context. */ direction: ltr; overflow: hidden; } .frag__icon svg { width: 100%; height: 100%; display: block; } .frag__kind { grid-column: 2; font-size: 0.74em; letter-spacing: 0.02em; /* 0.5 alpha = ~3.95:1 on the light mock paper (fails AA). 0.62 = ~5.6:1. */ color: rgba(0, 0, 0, 0.62); line-height: 1.1; } .frag__title { grid-column: 2; font-size: 0.98em; font-weight: 500; color: rgba(0, 0, 0, 0.85); line-height: 1.2; margin-top: 2px; } /* Initial scattered positions (in % of the laptop screen). Pushed into the area BELOW the big heading band at the top. GSAP pulls them toward the center as the AI 'absorbs' them. */ .frag--docs { top: 26%; right: 6%; transform: rotate(-3deg); } .frag--files { top: 30%; left: 6%; transform: rotate(2deg); } .frag--inbox { top: 64%; right: 8%; transform: rotate(1deg); } .frag--report { top: 68%; left: 6%; transform: rotate(-2deg); } .frag--knowledge { top: 46%; left: 40%; transform: rotate(0); } /* Type-specific icon colors - currentColor on the rect inside the SVG. Picks up via .frag__icon { color: … } so the same SVG works in fragments and in source pills. */ .frag--docs .frag__icon { color: var(--src-docs); } .frag--files .frag__icon { color: var(--src-files); } .frag--inbox .frag__icon { color: var(--src-inbox); } .frag--report .frag__icon { color: var(--src-report); } .frag--knowledge .frag__icon { color: var(--src-knowledge); } /* Stage 2 transient caption — names the organizational pain ('מידע ארגוני מפוזר') in-context while the user is decoding the scattered frags. Fades out before the desaturate + collect beat. Initial opacity:0 gated to body.hero-anim further down — if GSAP doesn't load, the caption defaults to opacity:1 (which then sits harmlessly behind other workflow content). */ .workflow__caption { position: absolute; top: 6%; left: 50%; transform: translate(-50%, 0); margin: 0; /* Guiding heading at the top of the screen. The three captions stack at the same spot and cross-fade through the journey. Sized so the longest ('עוזר חכם שעונה על כל שאלה') fits on one line at desktop widths. */ font-size: clamp(22px, 2.6vw, 40px); font-weight: 600; letter-spacing: -0.01em; color: rgba(0, 0, 0, 0.88); text-align: center; white-space: nowrap; pointer-events: none; /* Hidden by default — only the timeline reveals each at its phase, so JS-off / reduced-motion never shows all three stacked. */ opacity: 0; z-index: 2; will-change: opacity, transform; } /* Stage 3 consolidation card — the scattered fragments visibly MERGE into this single white card (frags fade to 0 + collapse toward center while this scales in over them). Sized to fully cover the collected stack footprint so it reads as a transformation, not a pill floating over leftovers. Centered on the same point the frags collect to. opacity:0 base — only the timeline reveals it. */ .workflow__loaded { position: absolute; /* Centred in the screen body (was 40%); the frags collect to the same point (script.js Stage-3a top:'48%') so the merge stays aligned. */ top: 48%; left: 50%; transform: translate(-50%, -50%); width: min(58%, 380px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: clamp(16px, 1.8vw, 26px) clamp(18px, 2vw, 30px); border-radius: 16px; background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.07); box-shadow: 0 18px 44px -20px rgba(0, 0, 0, 0.28); opacity: 0; pointer-events: none; z-index: 3; will-change: opacity, transform; } .workflow__loaded-check { display: inline-flex; align-items: center; justify-content: center; width: clamp(30px, 3vw, 44px); height: clamp(30px, 3vw, 44px); border-radius: 50%; background: var(--wa); color: #ffffff; margin-bottom: 4px; } .workflow__loaded-check svg { width: 56%; height: 56%; } .workflow__loaded-title { font-size: clamp(15px, 1.5vw, 22px); font-weight: 600; color: rgba(0, 0, 0, 0.9); } .workflow__loaded-sub { font-size: clamp(12px, 1.1vw, 16px); font-weight: 500; color: rgba(0, 0, 0, 0.5); } /* Stage 3-4: chatbot input bar with the user's typed question. The initial-hidden state is gated to body.hero-anim further down, so without GSAP loaded the search bar shows at default opacity:1. */ .workflow__search { position: absolute; top: 7%; left: 50%; transform: translate(-50%, 0); width: min(78%, 760px); background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.10); border-radius: 999px; padding: clamp(12px, 1.2vw, 18px) clamp(18px, 2vw, 28px); display: flex; align-items: center; gap: 12px; box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.22); will-change: opacity, transform; } .workflow__search-icon { font-size: 1.4em; color: rgba(0, 0, 0, 0.45); } .workflow__query { /* Size to content (no `flex: 1`) so the sibling .workflow__cursor sits immediately to the left of the typed text in RTL flex order. With flex:1 the query span filled the bar and the cursor floated far left, divorced from where characters were appearing. */ flex: 0 0 auto; max-width: 100%; font-size: 1.05em; font-weight: 400; color: rgba(0, 0, 0, 0.85); /* JS typewriter writes textContent directly char-by-char. Without JS, the span contains the full Hebrew sentence as-is from index.html. */ display: inline-block; white-space: nowrap; overflow: hidden; } .workflow__cursor { width: 2px; height: 1.2em; background: rgba(0, 0, 0, 0.7); opacity: 0; } /* Stage 5: chatbot answer panel. Initial-hidden state gated to body.hero-anim further down. */ .workflow__answer { position: absolute; top: 26%; left: 50%; transform: translate(-50%, 0); width: min(86%, 860px); background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 16px; padding: clamp(18px, 2vw, 32px) clamp(20px, 2.2vw, 36px); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.22); display: grid; gap: clamp(12px, 1.4vw, 20px); will-change: opacity, transform; } .workflow__answer-text { margin: 0; font-size: 1.15em; font-weight: 400; line-height: 1.55; color: rgba(0, 0, 0, 0.9); } .workflow__sources { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .workflow__sources-label { font-size: 0.85em; font-weight: 500; color: rgba(0, 0, 0, 0.55); margin-inline-end: 4px; } .src { display: inline-flex; align-items: center; gap: 8px; font-size: 0.88em; padding: 5px 12px 5px 6px; border-radius: 999px; background: rgba(0, 0, 0, 0.04); color: rgba(0, 0, 0, 0.78); border: 1px solid rgba(0, 0, 0, 0.06); font-weight: 500; } .src__icon { width: clamp(20px, 1.6vw, 26px); height: clamp(20px, 1.6vw, 26px); border-radius: 4px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--src-docs); direction: ltr; overflow: hidden; } .src__icon svg { width: 100%; height: 100%; display: block; } /* Source-pill icon colors match their corresponding fragment types. */ .src--docs .src__icon { color: var(--src-docs); } .src--files .src__icon { color: var(--src-files); } .src--inbox .src__icon { color: var(--src-inbox); } .src--report .src__icon { color: var(--src-report); } .src--knowledge .src__icon { color: var(--src-knowledge); } .workflow__next { display: inline-flex; align-items: center; gap: 6px; font-size: 0.95em; font-weight: 500; color: var(--wa-deep); border-top: 1px solid rgba(0, 0, 0, 0.08); padding-top: clamp(10px, 1.2vw, 16px); margin-top: 4px; align-self: flex-start; } /* ============================================================ Scroll progress indicator — desktop-only. A thin vertical line pinned to the viewport's left edge during the hero pin; its inner fill grows top→down as scroll progress increases. The element is appended to by script.js (JS-only feature). ============================================================ */ .hero__progress { position: fixed; top: 50%; left: clamp(16px, 1.6vw, 28px); transform: translateY(-50%); width: 2px; height: clamp(120px, 20vh, 220px); border-radius: 2px; background: transparent; opacity: 1; transition: background-color 300ms var(--ease-out); z-index: var(--z-progress); pointer-events: none; } /* The rail track + fill appear only once a section is actively scrubbing (i.e. after the first scroll); before that the container is invisible (no track) and only the at-load hint shows. */ .hero__progress.is-active { background: rgba(0, 0, 0, 0.12); } .hero__progress__fill { display: block; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.65); border-radius: 2px; transform-origin: top center; transform: scaleY(0); /* The fill follows the track: visible only while a section is actively scrubbing. Without this it lingers at scaleY(1) after the hero scrub ends (laptop landed on card 1), leaving a dark bar on the left. Gating opacity on .is-active makes it fade out on landing and fade back in for the founders journey scrub. */ opacity: 0; transition: opacity 300ms var(--ease-out); will-change: transform, opacity; } .hero__progress.is-active .hero__progress__fill { opacity: 1; } /* "גללו למטה" at-load cue — the sole pre-scroll affordance, anchored just above the laptop chassis (centred, in the gap below the subtitle). Quiet: small + muted, with a gentle fade-in once the laptop has settled. Fades out on the first scroll (JS adds .is-hidden). Desktop/tablet only; the phone hero has no laptop. Appended to .hero__laptop by script.js. */ .hero__scroll-cue { position: absolute; bottom: calc(100% + clamp(6px, 0.8vw, 12px)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; font-weight: 500; letter-spacing: 0.06em; white-space: nowrap; /* Full opacity at rest so the cue clears WCAG AA (--text-muted ≈ 5:1 on white); "quiet" comes from scale + muted hue, never a dimmed opacity. */ color: var(--text-muted); pointer-events: none; animation: heroCueIn 760ms var(--ease-out) 1600ms backwards; transition: opacity 450ms var(--ease-out); } /* Tiny downward chevron under the label. Quiet, slow bob — pre-scroll only (the whole cue fades out on the first scroll). */ .hero__scroll-cue__arrow { display: block; animation: heroCueBob 1900ms cubic-bezier(0.45, 0, 0.55, 1) infinite; } .hero__scroll-cue.is-hidden { opacity: 0; } @keyframes heroCueIn { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } } @keyframes heroCueBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2px); } } @media (max-width: 767px) { .hero__scroll-cue { display: none; } } @media (prefers-reduced-motion: reduce) { .hero__scroll-cue, .hero__scroll-cue__arrow { animation: none; } } .hero__title { margin: 0 auto; /* Match cuberto's actual hero declaration: 9rem on their html-vw system. Resolves to 81px @ 1440 and caps at 90px @ ≥1600. The floor keeps each pre-broken Hebrew span fitting on one line at the desktop sizes this worktree supports. */ font-size: clamp(42px, 5.625vw, 90px); line-height: 1.0; letter-spacing: -0.01em; font-weight: 500; /* The HTML splits the title into two .hero__title-line spans, but each span can ITSELF wrap if the container is too narrow. The longer Hebrew line ('ליכולת מעשית בארגון שלכם.') measures ~1060px at the 90px font cap, so max-width must reach 1080px at large viewports. Scales with vw, lands at 998px @ 1440 (cuberto match), caps at 1080px @ ≥1559. */ max-width: clamp(280px, 69.3vw, 1080px); overflow-wrap: break-word; word-break: keep-all; } .hero__title em { font-family: inherit; font-style: normal; font-weight: 500; letter-spacing: -0.01em; } /* Hero entrance - per-line mask wipe. Each .hero__title-line is the clipping mask; .hero__title-inner is the rising glyph layer. */ .hero__title-line { display: block; white-space: nowrap; /* each span is always exactly one line (never wraps) */ overflow: hidden; /* Tiny padding-bottom prevents tall descenders/diacritics from being clipped at the line baseline. Net effect is zero because of the matching negative margin-bottom below. */ padding-bottom: 0.04em; margin-bottom: -0.04em; } .hero__title-inner { display: inline-block; animation: heroLineRise 1000ms cubic-bezier(0.16, 1, 0.3, 1) backwards; will-change: transform, filter; } .hero__title-line:nth-child(1) .hero__title-inner { animation-delay: 160ms; } .hero__title-line:nth-child(2) .hero__title-inner { animation-delay: 380ms; } @keyframes heroLineRise { from { transform: translateY(115%); filter: blur(12px); } to { transform: translateY(0); filter: blur(0); } } /* Hero-title responsive bits. Desktop (default): the break is hidden and the "בארגון." span is shown → two lines, full copy. Phone overrides flip these (see the phone block) → three short lines ending in a period via .ht-dot. */ .ht-br { display: none; } /* break after "הופכים" — phone only */ .ht-dot { display: none; } /* period after "מעשית" — phone only (desktop ends with "בארגון.") */ .hero__meta { display: flex; flex-direction: column; align-items: center; gap: clamp(28px, 3.4vw, 40px); /* Cuberto: 3.2rem margin between title and subtitle. */ margin-top: clamp(24px, 2vw, 32px); } .hero__lead { /* Cuberto's title→subtitle gap measured at 1440 = 24px. */ margin: clamp(20px, 1.67vw, 28px) auto 0; max-width: 56ch; /* Match cuberto's actual hero subtitle: 2.4rem on html-vw. Resolves to 21.6px @ 1440 and caps at 24px @ ≥1600. */ font-size: clamp(18px, 1.5vw, 24px); line-height: 1.2; color: var(--text); text-align: center; animation: heroFadeUp 760ms cubic-bezier(0.22, 1, 0.36, 1) 600ms backwards; } @keyframes heroFadeUp { from { opacity: 0; transform: translateY(16px); filter: blur(8px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } /* === HERO FIRST-LOAD ENTRANCE (owner: impeccable/animate) === LOAD only. Visible default + keyframe-only hidden state + `backwards` fill = no blank on frozen/no-anim renderers, no forwards-fill pinning hover/GSAP transforms. Entrance lives on INNER .laptop; GSAP's OUTER .hero__laptop scrub is untouched. */ .nav__brand { animation: heroLogoIn 760ms cubic-bezier(0.16, 1, 0.3, 1) 80ms backwards; } @keyframes heroLogoIn { from { opacity: 0; transform: translateY(-12px) scale(0.9); filter: blur(6px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } .nav__links a { animation: heroNavItemIn 540ms var(--ease-out) backwards; } .nav__links a:nth-child(1) { animation-delay: 220ms; } .nav__links a:nth-child(2) { animation-delay: 290ms; } .nav__links a:nth-child(3) { animation-delay: 360ms; } .nav__links a:nth-child(4) { animation-delay: 430ms; } @keyframes heroNavItemIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* WhatsApp CTA: the left anchor of the bar (RTL) and the primary action. Lands as the final beat of the nav row — drops in with the links but borrows the logo's blur+scale settle so the conversion anchor arrives with a touch more weight than a plain link. */ .nav__cta { animation: heroNavCtaIn 600ms cubic-bezier(0.16, 1, 0.3, 1) 500ms backwards; } @keyframes heroNavCtaIn { from { opacity: 0; transform: translateY(-10px) scale(0.96); filter: blur(4px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } @media (min-width: 768px) { .laptop { animation: heroLaptopIn 900ms cubic-bezier(0.16, 1, 0.3, 1) 700ms backwards; } .hero__laptop .laptop__screen { animation: heroScreenWake 700ms var(--ease-out) 840ms backwards; } .hero__laptop .workflow { animation: heroScreenBoot 480ms var(--ease-out) 1320ms backwards; } .hero__laptop .window-bar__dot { transform-origin: center; animation: heroDotIn 340ms cubic-bezier(0.16, 1, 0.3, 1) backwards; } .hero__laptop .window-bar__dot--r { animation-delay: 1080ms; } .hero__laptop .window-bar__dot--y { animation-delay: 1150ms; } .hero__laptop .window-bar__dot--g { animation-delay: 1220ms; } } @keyframes heroLaptopIn { from { opacity: 0; transform: translateY(60px) scale(0.94); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes heroScreenWake { from { filter: brightness(0.45) contrast(0.97); } to { filter: brightness(1) contrast(1); } } @keyframes heroScreenBoot { from { opacity: 0; } to { opacity: 1; } } @keyframes heroDotIn { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: scale(1); } } /* .btn / .btn--whatsapp / heroCTAIn keyframe removed - the hero WhatsApp pill was dropped. The remaining WhatsApp affordances are the nav pill and the big contact-section card. */ /* hero reel */ .hero__reel { margin-top: clamp(60px, 8vw, 120px); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 24px 0; margin-inline-start: calc(-1 * var(--pad-page)); margin-inline-end: calc(-1 * var(--pad-page)); } .reel { overflow: hidden; width: 100%; } .reel__track { display: inline-flex; align-items: center; gap: 40px; white-space: nowrap; /* In RTL the marquee scrolls visually toward the left (against reading direction); the keyframe moves the track in the negative X-axis. */ animation: marquee 60s linear infinite; } .reel__track span { font-family: inherit; font-style: normal; font-size: clamp(28px, 4vw, 56px); letter-spacing: -0.01em; color: var(--text); font-weight: 500; } .reel__track i { font-style: normal; font-size: clamp(20px, 2.4vw, 32px); color: var(--text-muted); } .reel--lg .reel__track { animation-duration: 40s; gap: 60px; } .reel--lg .reel__track span { font-size: clamp(48px, 10vw, 180px); color: var(--text-inverse); font-family: var(--font-sans); font-style: normal; font-weight: 500; letter-spacing: -0.02em; } .reel--lg .reel__track span em { font-family: inherit; font-style: normal; font-weight: 500; } .reel--lg .reel__track i { color: var(--text-inverse); font-size: clamp(36px, 6vw, 80px); } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ============================================================ SECTION HEADER ============================================================ */ .section-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); width: 100%; max-width: var(--content-wide); margin-inline: auto; padding: 0 var(--pad-page); margin-bottom: var(--gap-head); } /* Section numbering removed entirely per direction. */ .section-num { display: none; } .section-title { margin: 0; /* Cuberto: 9rem for section headings - same as hero title. */ font-size: clamp(48px, 5.625vw, 90px); line-height: 1.0; letter-spacing: -0.01em; font-weight: 500; max-width: 22ch; } .section-title em { font-family: inherit; font-style: normal; font-weight: 500; } .section-blurb { margin: var(--space-xs) 0 0; max-width: 58ch; /* Cuberto body: 2.4rem. 21.6 @1440, 24 cap. */ font-size: clamp(18px, 1.5vw, 24px); color: var(--text); line-height: 1.55; } /* ============================================================ USE CASES - image-card layout (mirrors English work cards) ============================================================ */ .usecases { /* First section after the hero: extra top padding to absorb the mini-laptop bezel that extends ABOVE each card's visual via the `.mock-laptop` overflow pattern — without this, card 1's bezel crowds the section blurb. */ padding: clamp(88px, 8vw, 120px) 0 clamp(40px, 4vw, 56px); /* Layout-level overlap with hero's bottom 100vh: pulled up so that when the hero pin releases (scroll = hero.height - 100vh), this section's top sits exactly at viewport.top. Card 1 then occupies its NATURAL grid position when the laptop morphs onto it — no JS transform needed on this element, so forward/backward scroll behaves naturally. Mobile (<880px) overrides this back to 0 because the hero pin is disabled there. */ margin-top: -100vh; /* Establish a stacking context so cards composite cleanly. The matching higher z-index on `.hero` keeps the morphing laptop ON TOP of this section during the overlap, so its scale/translate is visible until it cross-fades into card 1's chassis underneath. */ position: relative; z-index: var(--z-content); } .usecases .section-head { margin-bottom: clamp(40px, 4vw, 56px); } .usecase__list { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, auto auto); /* Row gap accommodates each card's overflowing chassis: row 1 cards' base extends below the visual, row 2 cards' bezel extends above theirs. Sum of overflows (~bezel-h + base-h ≈ 35px max) must sit under the row gap so adjacent chassis don't collide. */ gap: clamp(44px, 4.5vw, 64px) clamp(28px, 3vw, 48px); width: 100%; max-width: var(--content-wide); margin-inline: auto; padding: 0 var(--pad-page); align-items: start; } /* Aligned 2x2 grid - no stagger (per Hebrew-side feedback). */ .usecase { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 0; position: relative; } .usecase__visual { /* Default visual: dark 3:2 card frame holding a mock. Cards 2 and 3 use this default — they sit as dark slabs containing their runner/inbox surface. Cards 1 and 4 OPT IN to laptop styling via the `:has(.mock-laptop)` override below. */ position: relative; overflow: hidden; border-radius: var(--radius-card); background: var(--bg-soft); aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center; padding: clamp(16px, 2vw, 28px); transition: transform 250ms var(--ease-out), box-shadow 250ms var(--ease-out); } /* Cards with a mini laptop (cards 1 and 4): the visual = the screen area only (aspect 1.876:1), the chassis (.mock-laptop bezel + base) extends ABOVE/BELOW via overflow: visible. */ .usecase__visual:has(.mock-laptop) { overflow: visible; aspect-ratio: 1.876; background: transparent; padding: 0; border-radius: 0; display: block; align-self: center; } /* Hero-animation "hidden until the timeline reveals me" gating. `body.hero-anim` is set by script.js only when the GSAP timeline is actually wired (desktop ≥ 880px AND no prefers-reduced-motion AND GSAP/ScrollTrigger loaded successfully). If any of those fail, the class is never set and the elements render at their default opacity:1 — i.e., the static final frame. This is what makes the page degrade gracefully under CDN/JS failure. */ @media (min-width: 768px) { body.hero-anim .workflow__caption, body.hero-anim .workflow__search, body.hero-anim .workflow__answer { opacity: 0; } body.hero-anim .usecase:first-child .usecase__visual { opacity: 0; } /* During the animation the guiding caption owns the top band, so the search bar + answer panel sit lower (the third caption stays readable above them through the Q&A). Mobile / no-anim keep the base 7% / 26%. */ body.hero-anim .workflow__search { top: 20%; } /* Cleared below the search bar (which bottoms at ~35% of the workflow box at desktop scale) so the answer panel never crowds or overlaps the typed question. The mock card mirrors this same stack. */ body.hero-anim .workflow__answer { top: 38%; } } /* ---- Card 1: mini laptop chassis matching the hero's final frame. Card 1's `.usecase__visual` no longer hosts a simplified chat mock — it now contains a scaled-down replica of the hero `.laptop`, with the SAME workflow content inside (search + answer + sources + next- action). The Stage 7 morph lands the hero laptop ON this mini laptop's frame, so the cross-fade reads as "the big laptop became this small laptop" rather than "demo faded, then a card appeared". The `:has()` selector strips the visual's default padding so the mini-laptop fills the dark chassis edge-to-edge (no nested-frame gap between the morph target rect and the mini-laptop). */ /* Mini-laptop chassis — extends BEYOND its `.usecase__visual` parent. Bezel sits above the visual, screen-wrap coincides with the visual's rect (= the laptop screen), base sits below the visual. Achieved with absolute positioning + negative inset on top/bottom = chassis heights from CSS vars. Parent `.usecase__visual { overflow: visible }` lets the bezel/base render outside the visual's geometric bounds. Width matches the visual; the base is slightly wider for perspective. */ .mock-laptop { position: absolute; left: 0; right: 0; top: calc(-1 * var(--mock-bezel-h)); bottom: calc(-1 * var(--mock-base-h)); display: flex; flex-direction: column; } /* Bezel — thin dark strip above the screen, hosts the camera dot. */ .mock-laptop__bezel { position: relative; height: var(--mock-bezel-h); background: linear-gradient(180deg, #0a0a0a 0%, #1c1c1c 100%); border-radius: var(--mock-radius) var(--mock-radius) 0 0; display: flex; align-items: center; justify-content: center; pointer-events: none; } .mock-laptop__camera { width: clamp(3px, 0.3vw, 5px); height: clamp(3px, 0.3vw, 5px); border-radius: 50%; background: #444; } /* Screen wrapper — fills the middle (= exactly the visual's rect). Mirrors the hero `.laptop__screen-wrap` ([styles.css:398-409]) dark gradient + interior padding so the actual mock surface inside reads as a screen, not a flat panel. */ .mock-laptop__screen-wrap { flex: 1; position: relative; background: linear-gradient(180deg, var(--mock-frame-top) 0%, var(--mock-frame-bottom) 100%); padding: clamp(4px, 0.5vw, 8px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 12px 28px -18px rgba(0, 0, 0, 0.4); } .mock-laptop__screen { /* Smaller window-chrome strip than the hero; content padded below it. */ --bar-h: clamp(14px, 1.5vw, 22px); position: relative; width: 100%; height: 100%; padding-top: var(--bar-h); background: var(--mock-surface); border-radius: 4px; overflow: hidden; } /* Base — the keyboard/body, slightly wider than the screen for the "viewed from above" perspective the hero laptop uses. `align-self: center` is required because the parent `.mock-laptop` is a flex column with default `align-items: stretch` — without explicit centering, an over-100%-width child sits at the cross-axis start (which is the RIGHT edge under RTL, producing a left overhang). */ .mock-laptop__base { position: relative; align-self: center; height: var(--mock-base-h); width: 104%; background: linear-gradient(180deg, #181818 0%, #0a0a0a 60%, #050505 100%); border-radius: 0 0 var(--mock-radius) var(--mock-radius); box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.08) inset, 0 12px 18px -14px rgba(0, 0, 0, 0.55); } .mock-laptop__trackpad { position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%); width: 16%; height: 28%; border-radius: 2px; background: rgba(255, 255, 255, 0.025); } /* Workflow content inside the mini screen — static replica of Stage 6 final state. Mirrors `.workflow__search` / `.workflow__answer` / `.src` ([styles.css:609-732]) using card-scaled font sizes. The percent-based positioning matches the hero so the morph endpoint's inner layout aligns with the hero's final layout. */ .mock-workflow { position: relative; width: 100%; height: 100%; font-size: clamp(7px, 0.78vw, 11px); direction: rtl; color: var(--mock-text); } /* Frozen guiding caption — mirrors the hero's `.workflow__caption` (third caption "עוזר חכם שעונה על כל שאלה") at the same screen position so the morph hand-off lands on an identical screen. em-sized so it scales with the card like the rest of the mock. */ .mock-workflow__caption { position: absolute; top: 5.5%; left: 50%; transform: translateX(-50%); margin: 0; font-size: 1.7em; font-weight: 600; letter-spacing: -0.01em; color: rgba(0, 0, 0, 0.88); text-align: center; white-space: nowrap; } .mock-workflow__search { position: absolute; /* Match the hero's final stacked layout (body.hero-anim search top:20% / answer top:38%, measured ≈ 25.5% / 42% of the screen) so the morph hand-off lands without the search+answer block jumping. */ top: 19.5%; left: 50%; transform: translate(-50%, 0); width: 78%; background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.10); border-radius: 999px; /* em-based so the bar scales with the mock font (which tracks the viewport like the hero's vw padding) — keeps the search/answer heights proportional to the hero across the whole desktop range. */ padding: 0.8em 1.1em; display: flex; align-items: center; gap: 0.7em; box-shadow: 0 4px 12px -8px rgba(0, 0, 0, 0.18); } .mock-workflow__search-icon { font-size: 1.2em; color: rgba(0, 0, 0, 0.45); } .mock-workflow__query { flex: 1; font-size: 1em; font-weight: 400; color: rgba(0, 0, 0, 0.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mock-workflow__answer { position: absolute; top: 37.5%; left: 50%; transform: translate(-50%, 0); width: 86%; background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 8px; padding: 1.2em 1.3em; box-shadow: 0 8px 20px -14px rgba(0, 0, 0, 0.22); display: grid; gap: 0.7em; } .mock-workflow__answer-text { margin: 0; font-size: 1.05em; font-weight: 400; line-height: 1.5; color: rgba(0, 0, 0, 0.9); } .mock-workflow__sources { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; } .mock-workflow__sources-label { font-size: 0.85em; font-weight: 500; color: rgba(0, 0, 0, 0.55); margin-inline-end: 3px; } .mock-src { display: inline-flex; align-items: center; gap: 5px; font-size: 0.88em; padding: 3px 8px 3px 4px; border-radius: 999px; background: rgba(0, 0, 0, 0.04); color: rgba(0, 0, 0, 0.78); border: 1px solid rgba(0, 0, 0, 0.06); font-weight: 500; } .mock-src__icon { width: clamp(12px, 1.2vw, 16px); height: clamp(12px, 1.2vw, 16px); border-radius: 3px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--src-docs); direction: ltr; overflow: hidden; } .mock-src__icon svg { width: 100%; height: 100%; display: block; } /* Match hero's source-pill icon colors for visual continuity. */ .mock-src--docs .mock-src__icon { color: var(--src-docs); } .mock-src--files .mock-src__icon { color: var(--src-files); } .mock-src--knowledge .mock-src__icon { color: var(--src-knowledge); } .mock-workflow__next { display: inline-flex; align-items: center; gap: 4px; font-size: 0.92em; font-weight: 500; color: var(--wa-deep); border-top: 1px solid rgba(0, 0, 0, 0.08); padding-top: 8px; margin-top: 2px; align-self: flex-start; } /* ============================================================ Use-case card hover state (desktop only). Subtle lift + shadow + inner accent. No link affordance — the cards remain non-interactive surfaces; this is pure visual feedback to attention. ============================================================ */ .usecase { transition: transform 250ms var(--ease-out), filter 250ms var(--ease-out); } .usecase__visual { /* Opacity transition removed — GSAP scrub writes opacity every frame at the Stage 7 seam, and a CSS transition there would perpetually re-queue and stall the value (the visual stays clamped at its starting opacity). transform and box-shadow transitions kept for hover affordances. */ transition: transform 250ms var(--ease-out), box-shadow 250ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .usecase:hover { transform: translateY(-4px); } .usecase:hover .usecase__visual { box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.35); } } .usecase__meta { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-xl); } .usecase__title { margin: 0; font-size: clamp(24px, 2.8vw, 44px); line-height: 1.06; letter-spacing: -0.02em; font-weight: 500; } .usecase__title em { font-family: inherit; font-style: normal; font-weight: 500; } .usecase__desc { margin: 0; /* Cuberto body: 2.4rem. */ font-size: clamp(18px, 1.5vw, 24px); line-height: 1.55; color: var(--text-muted); max-width: 52ch; } /* ============================================================ TRAINING - "Human Adoption Layer", composed as a two-region block: a narrative column (claim, subtitle, the three capability moments, the WhatsApp path) beside a bounded "adoption layer" plane. The plane holds the organization as a population of small human marks grouped by team; on reveal a green "uses AI daily" signal sweeps team-by-team (per-cluster --r-delay keyed off .adopt__layer.is-in), framing the resolved state as the org "after training". A faint inset plane, not the black slab the process section owns. Field, not flow, distinct from the numbered process spine. Resting / no-JS / reduced-motion states render the adopted layer instantly. ============================================================ */ .training { /* The fold is the screen MINUS the fixed nav: the section is entered at #training with scroll-margin-top:var(--nav-h), so centering within the visible band (not the full 100svh) keeps the WhatsApp action on screen. R2: capped below a full fold so the heading sits closer to the use-cases section above (mercury-tight seam) instead of floating mid-viewport. */ min-height: clamp(520px, 72vh, 720px); display: grid; place-items: center; /* Tightened so the claim AND the WhatsApp action both land within one screen (≈100svh − nav) when entering directly at #training. Mobile drops the fold below and flows naturally instead. */ padding-block: clamp(28px, 3.2vh, 52px); /* Silhouette tones, scoped to this section. */ --adopt-dim: rgba(244, 244, 246, 0.26); /* not-yet / pre-reveal */ --adopt-on: rgba(244, 244, 246, 0.62); /* adopted figure comes forward */ } /* layout: ONE-SCREEN, CENTERED. A strong claim, then a single labeled line of the organization (the field), then the three adoption anchors as pillars, then one WhatsApp action. Centered column at content-main width. */ .adopt { width: 100%; max-width: var(--content-main); margin-inline: auto; padding-inline: var(--pad-page); display: flex; flex-direction: column; align-items: center; text-align: center; /* Major rhythm between the four groups (lede / field / points / CTA). Tightened from clamp(34px,7.6vh,80px): the three points below now carry real weight, so the section fills without the loose vh-driven air. Short screens compress further via the max-height query below. */ gap: clamp(28px, 4.5vh, 52px); } .adopt__lede { display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 1.4vh, 18px); /* tight group: eyebrow + claim + value line */ max-width: 900px; /* wide enough for the claim to sit on ONE line */ } .training .section-eyebrow { margin: 0; font-size: clamp(13px, 1vw, 15px); font-weight: 600; letter-spacing: 0.02em; color: var(--text-muted); } .adopt__title { margin: 0; /* Floor matched to the other section headings (.section-title = 48px) so the training heading carries equal presence on phone instead of reading quiet. */ font-size: clamp(46px, 5.625vw, 68px); line-height: 1.05; letter-spacing: -0.03em; font-weight: 700; max-width: 24ch; /* fits the claim on ONE line at desktop */ text-wrap: balance; color: var(--text); } .adopt__nb { white-space: nowrap; } /* keep "ב-AI" together */ .adopt__sub { /* the value line: the payoff of adoption */ margin: 0; max-width: 640px; font-size: clamp(17px, 1.7vw, 22px); line-height: 1.55; color: var(--text); } /* --- the field: a single labeled line of the organization, department by department. Small neutral figures per team brighten together on reveal as training reaches the organization — no glow, no per-team stagger. --- */ .adopt__layer { position: relative; margin: 0; width: 100%; display: flex; align-items: center; justify-content: center; min-height: clamp(148px, 19vh, 216px); padding: clamp(22px, 2.8vh, 40px) clamp(12px, 2vw, 28px); } .adopt__field { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: clamp(34px, 4.8vw, 80px); /* the field is the centerpiece — let teams spread */ width: 100%; max-width: 1080px; } .adopt__cluster { display: flex; flex-direction: column; align-items: center; gap: 11px; min-width: 0; } .adopt__people { display: flex; flex-wrap: nowrap; /* one line of figures per department */ justify-content: center; gap: 12px; } .adopt__dept-label { font-size: clamp(12.5px, 1.05vw, 14px); font-weight: 600; letter-spacing: 0.01em; color: var(--text-muted); } /* --- the human mark: head (::before) + torso (::after) silhouette. Neutral until the training thread reaches the team, then it brightens. No-JS renders the brightened layer; idle marks and the JS pre-reveal state stay dim. --- */ .adopt__person { position: relative; width: 22px; height: 29px; flex: 0 0 auto; } .adopt__person::before, .adopt__person::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); transition: background-color 0.5s var(--ease-out); } .adopt__person::before { /* head */ inset-block-start: 0; width: 9px; height: 9px; border-radius: 50%; } .adopt__person::after { /* shoulders / torso */ inset-block-end: 0; width: 21px; height: 16px; border-radius: 10px 10px 6px 6px; } .adopt__person::before, .adopt__person::after { background: var(--adopt-on); } /* JS dims the team until the training "tick" reaches each member (.is-on, added one-by-one in script.js), then that silhouette brightens. */ .js-on .adopt__person::before, .js-on .adopt__person::after { background: var(--adopt-dim); } .js-on .adopt__person.is-on::before, .js-on .adopt__person.is-on::after { background: var(--adopt-on); } /* the green "online" dot — visible by default (no-JS final state); JS hides it INSTANTLY (no transition) until the tick reaches this teammate, then it pops in. The transition lives only on the shown state, so the hide can't animate away and the pop always plays. */ .adopt__dot { position: absolute; top: -2px; right: 1px; width: 8px; height: 8px; border-radius: 50%; background: var(--wa); box-shadow: 0 0 0 2px rgba(16, 16, 20, 0.85), 0 0 9px rgba(37, 211, 102, 0.55); } .js-on .adopt__person .adopt__dot { opacity: 0; transform: scale(0); } .js-on .adopt__person.is-on .adopt__dot { opacity: 1; transform: scale(1); transition: opacity 0.3s var(--ease-out), transform 0.42s var(--ease-out); } /* --- the closing call to action: the question and the WhatsApp action are ONE element — a single green-tinted pill (the whole pill is the link). The question reads in confident ink, the action in WhatsApp green, joined by a faint divider. R2: restored as one cohesive green unit, at a slightly larger size. --- */ .adopt__cta { display: inline-flex; align-items: center; justify-content: center; gap: clamp(12px, 1.6vw, 20px); max-width: 100%; padding: clamp(11px, 1.2vh, 15px) clamp(22px, 2.2vw, 32px); border-radius: 999px; border: 1px solid rgba(37, 211, 102, 0.32); background: rgba(37, 211, 102, 0.05); text-decoration: none; transition: background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out); } .adopt__cta:hover { background: rgba(37, 211, 102, 0.1); border-color: rgba(37, 211, 102, 0.55); } .adopt__cta:focus-visible { outline: 2px solid var(--wa); outline-offset: 4px; } .adopt__cta-lead { color: var(--text); font-weight: 600; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.4; } .adopt__cta-go { display: inline-flex; align-items: center; gap: 9px; /* Deep green by default so the action text clears WCAG AA on the LIGHT page surface (no-JS / before the theme observer fires): #0F8071 = 4.83:1 on white. On the dark surface (JS on, .training in view) the override below restores the vivid signal green, which is ~6:1 on #0e0e12. */ color: var(--wa-deep); font-weight: 700; font-size: clamp(16px, 1.4vw, 19px); white-space: nowrap; } /* Desktop only: on the dark surface restore the vivid signal green for the tinted-pill action text. Scoped to >=768px because the mobile layout makes the go-zone a SOLID green button with near-black text (theme-independent); applying the green text there would put green-on-green and hide the label. */ @media (min-width: 768px) { html[data-theme="dark"] .adopt__cta-go { color: var(--wa); } } .adopt__cta-go::before { /* faint divider: one bar, two zones */ content: ""; flex: 0 0 auto; width: 1px; height: 18px; /* Track the action color so the divider stays visible in both themes (the old fixed near-white value vanished on the light surface). */ background: currentColor; opacity: 0.28; margin-inline-end: clamp(3px, 0.6vw, 9px); } .adopt__cta .wa-glyph { flex: 0 0 auto; } /* Short desktop/laptop heights (e.g. 1366×768, 1024×768): the width-based clamps stay large while the screen is short, so compress vertical metrics against viewport height to keep the claim AND CTA on one screen. */ @media (min-width: 768px) and (max-height: 820px) { .training { padding-block: clamp(20px, 3.2vh, 40px); } .adopt { gap: clamp(24px, 5.8vh, 52px); } .adopt__lede { gap: clamp(8px, 1.2vh, 14px); } .adopt__title { font-size: clamp(30px, 3.6vw, 52px); } .adopt__layer { min-height: clamp(140px, 18.5vh, 196px); padding-block: clamp(18px, 2.4vh, 32px); } } /* People + washes resolve to their final state instantly under reduced motion; the layer/text r-* reveals are already neutralised globally. */ @media (prefers-reduced-motion: reduce) { .adopt__person::before, .adopt__person::after, .adopt__dot { transition: none !important; } } /* ============================================================ TRAINING — what the training concretely is: three short points below the field, each a single unified ink check + one label, in one centered row. No green here — the WhatsApp CTA owns the only green in the section. ============================================================ */ .tm { list-style: none; margin: 0; padding: 0; /* A horizontal row of the three adoption anchors, each label on a single line (never wraps). flex-wrap keeps it graceful: one row on desktop (all three fit), wrapping/stacking on tablet/phone where a single row won't fit. */ display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: clamp(18px, 3vw, 56px); margin-inline: auto; } /* Check + label, the check at a consistent leading (right, RTL) position and top-aligned so it stays beside the first line whether the label wraps or not. No per-item centring — that scattered the checks. */ .tm__item { display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; text-align: right; gap: 10px; } /* A clean check glyph sitting to the RIGHT of each label (DOM order mark→label resolves to right-placement in RTL). Drawn in ink — no circle badge. */ .tm__mark { position: relative; width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px; /* sit on the first line, not the very top */ } .tm__mark::before { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 13px; border: solid rgba(244, 244, 246, 0.9); border-width: 0 2px 2px 0; transform: translate(-50%, -62%) rotate(45deg); } .tm__label { font-size: clamp(18px, 1.8vw, 24px); font-weight: 700; letter-spacing: -0.01em; line-height: 1.22; color: var(--text); white-space: nowrap; /* each item stays on a single line */ } /* ============================================================ PROCESS - vertical services/process scheme (dark section). Replaces the v1 .services list and the v1 .approach numbered steps. A central spine drops through three stages: top mapping node, two parallel branch nodes (training + custom solutions), bottom implementation node. The dashed spine + branch/converge lines live in an inline SVG layered behind the cards. ============================================================ */ .process { background: var(--bg-inverse); color: var(--text-inverse); padding: var(--gap-section) 0 clamp(56px, 6vw, 88px); border-radius: var(--radius-soft) var(--radius-soft) 0 0; } .process .section-title { color: var(--text-inverse); } .process .section-blurb { color: rgba(255,255,255,0.72); } /* Constrain the section header to the same 1180px column that holds the scheme cards, so the title doesn't sit far to the right of the visual content (the scheme is centered with margin auto). */ .process .section-head { max-width: 1180px; margin-inline: auto; margin-bottom: var(--gap-head); } .process__scheme { position: relative; max-width: 1180px; margin: var(--gap-content) auto 0; padding: 0 var(--pad-page); display: flex; flex-direction: column; align-items: center; /* Tightened from clamp(64px,6.8vw,108px): the inter-node gaps are where the dashed branch connectors live, so an oversized gap reads as empty black mid-scroll. The connectors are recomputed from card rects (setupProcessLines) so they re-fit the shorter spans automatically. */ gap: clamp(44px, 4.8vw, 80px); } /* Dashed spine + branching/converging lines - single SVG layered behind the cards. preserveAspectRatio="none" stretches it to the container so the geometry tracks the section height precisely. Stroke attributes live in CSS (not on the SVG) so the four Bezier paths and the two spine lines share one source of truth. The path d attributes are computed by setupProcessLines() in script.js. */ .process__lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } .process__spine, .process__line { fill: none; stroke: rgba(255, 255, 255, 0.45); stroke-width: 2; stroke-dasharray: 6 6; stroke-linecap: round; } .process__node { position: relative; z-index: 1; width: 100%; max-width: 540px; padding: clamp(40px, 3.6vw, 52px) clamp(24px, 2.4vw, 32px) clamp(26px, 2.6vw, 34px); border-radius: var(--radius-card); /* Solid card body (the section background lightened a touch) so the dashed spine behind doesn't show through the card. */ background: #1c1c1c; border: 1px solid rgba(255, 255, 255, 0.12); text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; } .process__node--top, .process__node--bottom { align-self: center; max-width: 720px; padding-inline: clamp(28px, 3vw, 44px); padding-bottom: clamp(28px, 2.8vw, 38px); } .process__branches { position: relative; z-index: 1; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2vw, 40px); align-items: stretch; } .process__node--branch { max-width: none; } .process__badge { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 32px; padding: 0 13px; border-radius: 999px; background: #1c1c1c; border: 1px solid rgba(255, 255, 255, 0.55); color: #fff; font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; z-index: 2; } .process__node--top .process__badge, .process__node--bottom .process__badge { background: #fff; border-color: #fff; color: #111; height: 36px; min-width: 52px; font-size: 15px; } .process__title { margin: 0; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.12; letter-spacing: -0.015em; font-weight: 500; text-wrap: balance; } .process__node--top .process__title, .process__node--bottom .process__title { font-size: clamp(26px, 2.7vw, 36px); letter-spacing: -0.02em; } .process__copy { margin: 0; font-size: clamp(16px, 1.3vw, 20px); line-height: 1.5; color: rgba(255, 255, 255, 0.78); max-width: 46ch; text-wrap: pretty; } /* ============================================================ FOUNDERS - two side-by-side profiles (NEW v2 section). In RTL the first list item sits on the visual right. ============================================================ */ /* ============================================================ TRUST JOURNEY — approach manifesto + founders. The styles HERE are the static / fallback layout (no-JS, reduced-motion): heading, manifesto, then a two-column founders grid. The desktop scroll-scrubbed choreography is layered on top, scoped to `body.founders-anim` (set by script.js only when the GSAP timeline actually runs), in the @media block further down. ============================================================ */ .trust { /* R2: tighter top so the process→trust seam doesn't stack two big paddings. */ padding-block: clamp(36px, 3.5vw, 52px) var(--gap-section); padding-inline: var(--pad-page); } .trust__inner { max-width: var(--content-main); margin-inline: auto; } /* ---- Typography: one Heebo ramp, hierarchy by weight + scale ---- 700 title · 600 founders-head / name · 500 role / chip · 400 statement / bio */ /* Screen 1 — the statement: section title + approach copy, centered. */ .trust__statement-group { margin: var(--gap-content) auto 0; max-width: 52rem; text-align: center; } .trust__title { margin: 0; font-size: clamp(46px, 6vw, 92px); line-height: 0.98; letter-spacing: -0.03em; font-weight: 700; color: var(--text); text-wrap: balance; } .trust__statement { margin: clamp(18px, 1.8vw, 26px) auto 0; max-width: none; font-size: clamp(20px, 2.1vw, 28px); line-height: 1.5; letter-spacing: -0.015em; font-weight: 500; color: var(--text); } /* Both sentences share a matched measure so they read as an even pair (the short one no longer sits on one long line while the other wraps wide). Wider than the title/headshot column — the paragraph is free to breathe. */ .trust__statement-line { display: block; max-width: min(92vw, 50ch); margin-inline: auto; text-wrap: balance; } .trust__statement-line + .trust__statement-line { margin-top: 0.7em; } .trust__founders-head { margin: var(--gap-section-tight) auto 0; text-align: center; font-size: clamp(30px, 3.6vw, 54px); line-height: 1.02; letter-spacing: -0.025em; font-weight: 700; color: var(--text); } .trust__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 6vw, 88px); margin-top: var(--gap-content); list-style: none; padding: 0; } .trust__founder { display: flex; flex-direction: column; gap: clamp(18px, 2vw, 26px); } .founder__portrait { position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: 360px; border-radius: var(--radius-card); overflow: hidden; background: rgba(0, 0, 0, 0.04); border: 1px solid rgba(0, 0, 0, 0.06); } .founder__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; } .founder__meta { display: flex; flex-direction: column; gap: 10px; } .founder__name { margin: 0; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.04; letter-spacing: -0.02em; font-weight: 600; } .founder__role { margin: 0; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.3; font-weight: 500; color: var(--text-muted); } /* Factual proof points: a quiet stacked list (one fact per line) with a small dot marker — calmer and more scannable than the old wrapped pills, and it handles the longer Hebrew phrases without boxy noise. */ .founder__chips { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; } .founder__chip { position: relative; font: 500 clamp(14px, 1vw, 15px) / 1.35 var(--font-sans); letter-spacing: 0; color: var(--text-muted); padding-inline-start: 16px; } .founder__chip::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.55; } /* Bio lives inside each founder column (under the chips) so name → role → chips → bio reads as one cohesive person, not a detached block. */ .founder__bio { margin: 14px 0 0; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.6; color: var(--text); max-width: 60ch; } /* ---- Desktop scroll-scrubbed journey (only when GSAP timeline runs) ---- The pin is a 100vh stage. The [heading + grid] is a normal flow block, vertically centered as a unit — so the 'מי מוביל' heading always sits cleanly ABOVE the two columns with real spacing (no absolute overlap). The manifesto is a separate centered overlay shown only at the start; the portraits flank it (GSAP transforms) then grow into the columns, the manifesto fades out and the heading + bios fade in. */ @media (min-width: 768px) { /* The pin grows with the cohesive founder columns (portrait → name → role → chips → bio). min-height keeps the statement screen a full viewport; the extra height lets the same columns continue into the bios after release. */ body.founders-anim .trust__pin { position: relative; min-height: 100vh; } body.founders-anim .trust__inner { position: relative; max-width: var(--content-wide); margin-inline: auto; display: flex; flex-direction: column; /* Reserve the fixed-nav height so the 'מי מוביל' heading clears it. */ padding-block-start: calc(var(--nav-h) + clamp(20px, 3vh, 40px)); padding-block-end: clamp(56px, 8vh, 112px); padding-inline: var(--pad-page); } /* Screen 1: title + copy in the upper band; the two headshots are a big centered pair in the lower band (positioned by GSAP). Both fill the view. */ body.founders-anim .trust__statement-group { position: absolute; /* R2: sit closer under the nav so the process→trust seam isn't a big white band (still clears the floating nav when pinned). */ top: calc(var(--nav-h) + clamp(10px, 2.5vh, 30px)); left: 50%; margin: 0; width: min(92vw, 880px); z-index: 3; } body.founders-anim .trust__statement { margin: clamp(16px, 1.8vw, 26px) auto 0; max-width: none; } /* Screen 2: founders heading at the top, fades in as the columns resolve. */ body.founders-anim .trust__founders-head { margin: 0 0 clamp(28px, 4vh, 56px); text-align: center; opacity: 0; } body.founders-anim .trust__grid { width: 100%; margin: 0; align-items: start; gap: clamp(48px, 6vw, 120px); } body.founders-anim .trust__founder { align-items: center; text-align: center; gap: clamp(16px, 2vh, 26px); } body.founders-anim .trust__founder .founder__portrait { max-width: min(100%, 34vh); margin-inline: auto; will-change: transform; } /* Name + role + chips + bio reveal together as one cohesive column. */ body.founders-anim .trust__founder .founder__meta { width: 100%; max-width: 46ch; margin-inline: auto; align-items: center; gap: 10px; opacity: 0; } body.founders-anim .trust__founder .founder__chips { align-items: flex-start; } body.founders-anim .trust__founder .founder__bio { text-align: start; max-width: 50ch; margin-top: clamp(10px, 1.2vh, 16px); } /* End hand-off: air before the black .contact band so its rounded top reads as a deliberate transition, not a clip. */ body.founders-anim .trust { padding-bottom: var(--gap-section); } } /* ============================================================ TRUST CONNECTOR SPINE — a subtle hairline + dots that links the two founder headshots (lengthening as they spread) and then drops from the centre toward the contact section. Geometry is set by script.js. Desktop + motion-on only (scoped to body.founders-anim); hidden everywhere else so it never affects the reduced-motion layout. ============================================================ */ .trust__wire { display: none; } @media (min-width: 768px) { body.founders-anim .trust__wire { display: block; position: absolute; inset: 0; pointer-events: none; z-index: 1; } } /* Horizontal link between the headshots (transform + width set per frame). */ .trust__wire-h { position: absolute; top: 0; left: 0; width: 0; height: 1.5px; background: rgba(0, 0, 0, 0.16); /* Hidden by default; JS (drawFounderLink) drives the real opacity per frame from the live spread width, fading the line in as the headshots separate. Starting at 0 avoids a "ghost" flash of the two end-dots before the first draw positions and reveals the wire. */ opacity: 0; will-change: transform, width; } /* Vertical spine: wrapper is the positioning anchor (top/height set by JS); the inner line grows via scaleY(--spine) so its end dot never distorts. */ .trust__wire-v { position: absolute; top: 0; left: 50%; width: 0; height: 0; } .trust__wire-v-line { position: absolute; top: 0; left: 0; width: 1.5px; height: 100%; margin-left: -0.75px; background: rgba(0, 0, 0, 0.16); transform: scaleY(var(--spine, 0)); transform-origin: top center; } .trust__wire-dot { position: absolute; width: 7px; height: 7px; border-radius: 50%; /* Opaque (not a transparency) so the semi-transparent line passing under the dot doesn't double up into a darker spot — the line reads as meeting the dot cleanly. Matches the line's apparent value on the light trust surface. */ background: #adadb4; transform: translate(-50%, -50%); } .trust__wire-dot--a { left: 0; top: 50%; } /* near the left headshot */ .trust__wire-dot--b { left: 100%; top: 50%; } /* tracks the growing right end */ .trust__wire-dot--end { left: 0; top: 100%; /* centred on the trust↔contact seam */ width: 9px; height: 9px; /* WhatsApp-green destination marker — reads on BOTH the light-trust (upper) and dark-contact (lower) halves of the seam it straddles. */ background: var(--wa); opacity: clamp(0, calc((var(--spine, 0) - 0.82) / 0.18), 1); } @media (prefers-reduced-motion: reduce) { .trust__wire { display: none !important; } } /* ============================================================ VOICES / APPROACH STATEMENT Sits directly under the dark .process band. Top padding gives the "הגישה שלנו" title breathing room from the dark→light seam above; without it the title was pinched against the dark band. ============================================================ */ .voices { padding: var(--gap-section-tight) 0 var(--gap-section); } .voices__single { padding: 0 var(--pad-page); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } /* Centered approach variant (per Hebrew-side feedback) */ .section-head--centered { align-items: center; text-align: center; } .section-head--centered .section-title { margin-inline: auto; } .voices--centered .voices__single { display: flex; justify-content: center; text-align: center; } .quote--centered { align-items: center; } .quote--centered blockquote { width: 100%; } .quote--centered.quote--manifesto p { max-width: 28ch; margin-inline: auto; } .quote { background: var(--bg); padding: clamp(32px, 4vw, 56px) 0; margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; } .quote blockquote { margin: 0; } .quote p { margin: 0; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.38; letter-spacing: -0.01em; font-weight: 400; color: var(--text); } .quote em { font-family: inherit; font-style: normal; font-weight: 500; } .quote--lg p { font-size: clamp(28px, 3vw, 52px); line-height: 1.18; letter-spacing: -0.015em; } .quote--manifesto { padding: clamp(48px, 6vw, 88px) 0; } .quote--manifesto p { max-width: 22ch; } .quote__caption { display: flex; flex-direction: column; gap: 4px; padding-top: 24px; border-top: 1px solid var(--rule); align-self: flex-start; } .quote__name { font-size: 15px; font-weight: 500; font-family: "Inter", "Heebo", sans-serif; } .quote__role { font-size: 13px; color: var(--text-muted); } /* ============================================================ CONTACT / FINAL CTA ============================================================ */ .contact { background: var(--bg-inverse); color: var(--text-inverse); padding: 0 0 var(--gap-content); border-radius: var(--radius-soft) var(--radius-soft) 0 0; } .contact__body { /* Centered "monument" composition: title, action, and note share one centered vertical axis, capped tighter than the 1320 content rail so the column reads as a deliberate focal block. */ max-width: 980px; margin: 0 auto; padding: var(--gap-section) var(--pad-page) 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(36px, 4.5vw, 64px); } .contact__title { /* Separation from the action now comes from .contact__body gap. */ margin: 0; font-size: clamp(44px, 5.4vw, 84px); line-height: 1.0; letter-spacing: -0.02em; font-weight: 500; max-width: 22ch; text-wrap: balance; } .contact__title em { font-family: inherit; font-style: normal; font-weight: 500; } .contact__primary { display: flex; flex-direction: column; align-items: center; width: 100%; gap: clamp(14px, 1.4vw, 20px); } .contact__note { margin: 0; max-width: 46ch; font-size: clamp(14px, 1.05vw, 16px); line-height: 1.5; letter-spacing: -0.005em; color: rgba(255, 255, 255, 0.72); } /* Secondary contact path: WhatsApp stays the primary action above; buyers who prefer a written brief or a call reach email + phone right here instead of hunting the footer. Quiet and subordinate — no button weight. */ .contact__secondary { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px clamp(16px, 2.2vw, 30px); font-size: clamp(14px, 1.05vw, 16px); color: rgba(255, 255, 255, 0.72); } .contact__secondary-label { letter-spacing: -0.005em; } .contact__alt { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--text-inverse); font-weight: 500; text-decoration: none; transition: color 220ms var(--ease-out); } .contact__alt-ico { display: inline-flex; opacity: 0.75; transition: opacity 220ms var(--ease-out); } .contact__alt:hover .contact__alt-ico, .contact__alt:focus-visible .contact__alt-ico { opacity: 1; } .contact__alt-val { position: relative; } .contact__alt-val::after { content: ""; position: absolute; inset-inline: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: center; transition: transform 240ms var(--ease-out); } .contact__alt:hover .contact__alt-val::after, .contact__alt:focus-visible .contact__alt-val::after { transform: scaleX(1); } .contact__wa { display: grid; grid-template-columns: auto auto auto; justify-content: center; align-items: center; gap: 14px 22px; /* True WhatsApp green (--wa #25D366). White text on it fails contrast, so the label/glyph/arrow use near-black ink (#0E0E12) — ~13:1, well past WCAG AA — which also reads as the unmistakable, confident WhatsApp green. Hover deepens the green slightly, dark ink retained. */ background: var(--wa); color: #0E0E12; border-radius: var(--radius-card); padding: clamp(28px, 3.4vw, 44px) clamp(28px, 3vw, 48px); width: auto; max-width: min(100%, 720px); transition: background 320ms var(--ease-out), transform 320ms var(--ease-out); } .contact__wa:hover { background: #20C15D; transform: translateY(-3px); } .contact__wa:active { transform: translateY(-1px); } .contact__wa .wa-glyph { flex-shrink: 0; } .contact__wa-label { grid-column: 2 / 3; font-size: clamp(22px, 2.6vw, 36px); line-height: 1.08; letter-spacing: -0.015em; font-weight: 500; } .contact__wa-arrow { grid-column: 3; font-size: 32px; transition: transform 320ms var(--ease-out); } .contact__wa:hover .contact__wa-arrow { transform: translateX(-6px); /* RTL: nudge to the left */ } /* ============================================================ FOOTER ============================================================ */ .footer { background: var(--bg-soft); color: var(--text-inverse); padding: var(--gap-section-tight) var(--pad-page) clamp(32px, 4vw, 56px); } .footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: clamp(40px, 5vw, 72px) clamp(48px, 7vw, 120px); max-width: var(--content-wide); margin-inline: auto; padding-bottom: var(--gap-content); border-bottom: 1px solid var(--rule-inverse); } .footer__brandcol { flex: 0 1 auto; max-width: 30rem; } .footer__brand { display: inline-flex; align-items: center; font-size: clamp(15px, 1.1vw, 17px); width: min(100%, 42ch); } .footer__brand .brand-lockup--lg { width: min(100%, calc(clamp(40px, 3.6vw, 56px) * 935 / 118)); height: auto; } .footer__line { margin: clamp(20px, 2.2vw, 30px) 0 0; max-width: 42ch; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.6; color: rgba(255, 255, 255, 0.66); text-wrap: pretty; } .footer__nav { flex: 0 0 auto; display: grid; grid-template-columns: repeat(2, minmax(130px, max-content)); gap: clamp(40px, 5vw, 80px); } .footer__group-title { margin: 0 0 18px; font-size: clamp(13px, 1vw, 15px); letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.5); font-weight: 500; } .footer__group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .footer__group a { font-size: clamp(15px, 1.15vw, 18px); color: rgba(255, 255, 255, 0.85); transition: color 240ms var(--ease-out); } .footer__group a:hover, .footer__group a:focus-visible { color: var(--text-inverse); } /* Footer contact rail: icon chip + value. More presence than the plain page-nav links, while staying secondary to the WhatsApp CTA in the hero and final section. The green chip marks WhatsApp as the primary contact path (the One Signal Rule); phone + email stay neutral. */ .footer__group--contact .footer__contacts { gap: clamp(10px, 1vw, 14px); } .footer__group--contact .footer__contact { display: inline-flex; align-items: center; gap: 12px; color: rgba(255, 255, 255, 0.9); font-weight: 500; letter-spacing: -0.01em; } .footer__group--contact .footer__contact:hover, .footer__group--contact .footer__contact:focus-visible { color: var(--text-inverse); } .footer__contact-ico { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.92); transition: background 240ms var(--ease-out), color 240ms var(--ease-out); } .footer__contact-ico svg { display: block; width: 20px; height: 20px; } .footer__contact:hover .footer__contact-ico, .footer__contact:focus-visible .footer__contact-ico { background: rgba(255, 255, 255, 0.14); } .footer__contact--wa .footer__contact-ico { color: var(--wa); background: rgba(37, 211, 102, 0.14); } .footer__contact--wa:hover .footer__contact-ico, .footer__contact--wa:focus-visible .footer__contact-ico { background: rgba(37, 211, 102, 0.22); } .footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; max-width: var(--content-wide); margin-inline: auto; padding-top: clamp(28px, 3vw, 44px); font-size: clamp(12px, 0.875vw, 14px); color: rgba(255, 255, 255, 0.55); } .footer__bottom p { margin: 0; } .footer__totop { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.7); transition: color 240ms var(--ease-out); } .footer__totop span { transition: transform 320ms var(--ease-out); } .footer__totop:hover, .footer__totop:focus-visible { color: var(--text-inverse); } .footer__totop:hover span { transform: translateY(-3px); } /* ============================================================ MOTION SYSTEM - three entrance utilities - .r-wipe text rises from a clip (for headings) - .r-fade opacity + 14px rise (for paragraphs) - .r-scale opacity + 12px rise + scale from 0.96 (for objects) IntersectionObserver toggles .is-in on entry; CSS handles the rest. All initial-hidden states are scoped to body.js-on so users without JS or with prefers-reduced-motion always see content fully rendered. ============================================================ */ .r-wipe { display: block; overflow: hidden; /* Tiny gutter so descenders/diacritics aren't sliced at the baseline */ padding-bottom: 0.08em; margin-bottom: -0.08em; } .r-wipe__inner { display: inline-block; } /* Cuberto line-mask: the glyph layer rises out of the overflow:hidden clip while fading in, on an expo-out curve. */ .js-on .r-wipe__inner { transform: translateY(110%); opacity: 0; transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1), opacity 600ms cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--r-delay, 0ms); } .js-on .r-wipe.is-in > .r-wipe__inner, .js-on .is-in > .r-wipe > .r-wipe__inner, .js-on .is-in.r-wipe > .r-wipe__inner { transform: translateY(0); opacity: 1; } .js-on .r-fade { opacity: 0; transform: translateY(16px); transition: opacity 720ms cubic-bezier(0.16, 1, 0.3, 1), transform 720ms cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--r-delay, 0ms); } .js-on .r-fade.is-in { opacity: 1; transform: translateY(0); } /* A focusable element must never be invisible while focused: if keyboard focus reaches a not-yet-revealed reveal element (e.g. the WhatsApp CTA when landing directly at #training), show it immediately. */ .js-on .r-fade:focus-visible, .js-on .r-fade:focus-within { opacity: 1; transform: translateY(0); transition-delay: 0ms; } /* Cuberto card/object reveal: scale-from-slightly-small + lift + fade on an expo-out curve. NOTE: deliberately no clip-path here — the use-case cards let their mini-laptop chassis overflow the card box (bezel above, base below), so an inset clip would slice it. The true cuberto scale-from-overflow clip lives on the hero laptop intro instead, where it's safe. */ .js-on .r-scale { opacity: 0; transform: scale(0.93) translateY(20px); transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1), transform 900ms cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--r-delay, 0ms); } .js-on .r-scale.is-in { opacity: 1; transform: scale(1) translateY(0); } /* Per-section stagger via :nth-of-type. Keeps JS free of timing math. */ .usecase__list .usecase:nth-of-type(1) { --r-delay: 0ms; } .usecase__list .usecase:nth-of-type(2) { --r-delay: 90ms; } .usecase__list .usecase:nth-of-type(3) { --r-delay: 180ms; } .usecase__list .usecase:nth-of-type(4) { --r-delay: 270ms; } /* Old .services__list and .approach__steps r-delay rules removed: their target sections were replaced by .process in Phase 6. */ /* ---------- typography: stronger display hierarchy (single-family Heebo, heavier display weight + tighter tracking vs body for more character) ---------- */ .hero__title { font-weight: 700; letter-spacing: -0.03em; } .section-title { font-weight: 700; letter-spacing: -0.022em; } /* Use-case titles join the display ladder (was 500, weaker than the 700 section headings). Body stays 400, so the contrast reads: 400 body → 700 titles → 800 hero signature. */ .usecase__title, .usecase__title em { font-weight: 700; } /* Trust uses the same source order everywhere (title → statement → founders-head → grid → bios), so the static / reduced-motion layout needs no order overrides; natural block flow already matches the desktop narrative. */ /* ---------- accessibility: skip link + visually-hidden (SR-only) ---------- */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; inset-inline-start: 16px; top: -72px; z-index: 1000; display: inline-flex; align-items: center; min-height: 44px; background: var(--bg, #fff); color: var(--text, #000); border: 2px solid currentColor; border-radius: 8px; padding: 10px 16px; font: 600 15px/1 var(--font-sans, sans-serif); text-decoration: none; transition: top .15s ease; } .skip-link:focus { top: 16px; outline: 2px solid var(--wa-deep, #128C7E); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .reel__track { animation: none !important; } .hero__title-inner, .hero__lead, .r-wipe__inner, .r-fade, .r-scale, .nav__brand, .nav__links a, .nav__cta, .laptop, .hero__laptop .laptop__screen, .hero__laptop .workflow, .hero__laptop .window-bar__dot { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; filter: none !important; } /* Theme swaps snap instantly (no crossfade) under reduced motion. */ html, body, .nav, .nav__links, .brand-lockup, .section-title, .section-blurb, .trust__statement, .trust__founders-head { transition: none !important; } } /* ============================================================ #usecases · APPROVED ARTIFACTS (cards 2-4) — scoped port Source: standalone prototype (claude_we3). The approved use-case section's docs/brief/svc artifacts, kept on their own light "stage" with the periwinkle accent. ALL tokens + component rules are scoped under #usecases so they never leak into the green-branded rest of the site (verified: none of these token names are defined elsewhere). Card 1 (the laptop morph target) and the section header are untouched — they use the site's own tokens, which this block does not redefine. ============================================================ */ #usecases { /* surfaces */ --bg-2: #f4f5f9; --elevated: #ffffff; /* accent (periwinkle-indigo) — the approved in-mock accent, restored. Only the stage TRAY is neutral; the artifacts keep their colour. */ --accent: #5266eb; --accent-hover: #4354c8; --accent-active: #3442a6; --accent-tint: #eef1fe; --accent-tint-2: #dfe5fb; --accent-ink: #3442a6; /* ink */ --ink: #272735; --ink-2: #535461; --ink-3: #6c6d7b; --on-accent: #ffffff; /* lines */ --line: rgba(36,40,72,.12); --line-soft: rgba(36,40,72,.08); --line-strong: rgba(36,40,72,.22); /* semantic (low-saturation, calm) — restored */ --ok: #0f7a52; --ok-tint: #e7f4ee; --warn: #9a6312; --warn-ink: #7c4f0d; --warn-tint: #f6efe0; --urgent: #b8345f; --urgent-tint:#fae9ef; /* stage + float — neutral grey tray from the site's own paper family (DESIGN.md: monochrome neutrals; green stays functional-only). Deep enough to read as a distinct surface against the white section, with a soft top highlight for depth. No green, no second accent. */ --stage: radial-gradient(125% 95% at 50% -12%, #fdfdfe 0%, rgba(253,253,254,0) 60%), linear-gradient(168deg, #f1f1f4 0%, #e9e9ee 54%, #e3e3e9 100%); --float: 0 1px 2px rgba(24,28,52,.05), 0 12px 26px rgba(44,50,95,.12); --float-sm: 0 1px 2px rgba(24,28,52,.06), 0 4px 10px rgba(44,50,95,.08); /* radii */ --r-stage: 22px; --r-obj: 16px; --r-sm: 11px; --r-pill: 999px; /* motion */ --e-out: cubic-bezier(.2,.8,.25,1); --e-soft: cubic-bezier(.4,0,.2,1); --e-quint: cubic-bezier(.22,1,.36,1); } /* The light stage for cards 2-4 — overrides the default dark .usecase__visual. A definite height gives the absolutely-laid-out artifacts (esp. svc) and the GSAP measurement a stable box. Card 1 keeps its laptop treatment via the .usecase__visual:has(.mock-laptop) rule earlier in the file. */ #usecases .usecase__visual--stage { background: var(--stage); /* crisp neutral hairline (site --rule family) so each tray's edge reads cleanly against the white section even with the soft grey fill */ border: 1px solid #d7d8de; border-radius: var(--r-stage); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); aspect-ratio: auto; /* The artifacts (esp. the brief's three insight rows and the svc thread) need a touch more room on the real site's column than the prototype's; a slightly taller stage + trimmer frame padding keeps them un-clipped. */ height: clamp(476px, 40vw, 516px); /* A single-track grid lets a width:100% obj collapse to its content (the all-absolute svc would shrink to ~0). An fr track always fills the stage, so each artifact gets the full box. */ display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); padding: clamp(14px, 1.5vw, 20px); overflow: hidden; } /* every artifact fills its stage and lays out as a column */ #usecases .obj { width: 100%; height: 100%; text-align: right; display: flex; flex-direction: column; } #usecases svg.ic { width: 1em; height: 1em; display: inline-block; flex: none; } /* pills — only the static decorative variants used by the artifacts */ #usecases .pill { display: inline-flex; align-items: center; gap: .45em; height: 42px; padding: 0 20px; border: 0; border-radius: var(--r-pill); font-size: 15px; font-weight: 500; letter-spacing: -.005em; white-space: nowrap; } #usecases .pill--sm { height: 32px; padding: 0 14px; font-size: 13px; } #usecases .pill--xs { height: 27px; padding: 0 12px; font-size: 12px; font-weight: 600; } #usecases .pill--solid { background: var(--accent); color: var(--on-accent); } /* Card captions: keep the site's font (Heebo) + text colours so they read as native, but take the prototype's tighter sizes / weight / spacing (clearer than the site's large editorial titles). Uniform across all four cards; card 1's laptop visual is untouched. */ #usecases .usecase__meta { margin-top: clamp(16px, 1.6vw, 22px); gap: 7px; } #usecases .usecase__title { font-size: clamp(1.3rem, 1.08rem + .7vw, 1.6rem); line-height: 1.2; letter-spacing: -.018em; font-weight: 700; color: var(--text); } #usecases .usecase__desc { font-size: clamp(1.04rem, 1rem + .2vw, 1.14rem); line-height: 1.5; color: var(--text-muted); max-width: 46ch; } /* Card title + blurb: a small staggered fade-up as each card reveals (its .is-in is set by the IntersectionObserver on phone and by the hero finale on desktop). Enhances the card's own reveal with a beat of hierarchy. */ #usecases .usecase__title, #usecases .usecase__desc { opacity: 0; transform: translateY(14px); transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out); } #usecases .usecase.is-in .usecase__title { transition-delay: 0.12s; } #usecases .usecase.is-in .usecase__desc { transition-delay: 0.22s; } #usecases .usecase.is-in .usecase__title, #usecases .usecase.is-in .usecase__desc { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { #usecases .usecase__title, #usecases .usecase__desc { opacity: 1; transform: none; transition: none; } } /* ── CARD 2 · DOCUMENTS / AUTOMATION — batch + extraction chip ── The invoice stack sits on the right and its back papers fan up-and-right (the natural "batch of documents" look, matching desktop). The stage carries extra right padding, and on narrow widths the invoice gets a wider column + a slimmer chip, so that rightward fan always clears the tray border. */ #usecases .usecase__visual--stage:has(.docs) { padding-inline: clamp(18px, 2.6vw, 30px); } #usecases .docs { position: relative; flex-direction: row; align-items: center; justify-content: center; gap: clamp(24px, 3.2vw, 40px); } /* translateY balances the upward paper-fan so the invoice's visual mass centers vertically (matching the chip), giving equal top/bottom gaps in the card. */ #usecases .docs__stack { position: relative; flex: 0 0 42%; align-self: stretch; margin-block: clamp(10px, 4.5%, 28px); transform: translateY(2.5%); } #usecases .docs__paper { position: absolute; inset: 0; background: var(--elevated); border: 1px solid var(--line); border-radius: 14px; } #usecases .docs__paper--front { z-index: 3; box-shadow: var(--float); padding: clamp(14px, 1.5vw, 18px); display: flex; flex-direction: column; justify-content: space-between; gap: 10px; } #usecases .docs__paper--2 { z-index: 2; transform: translate(4%, -5%) scale(.965); opacity: .96; box-shadow: var(--float-sm); } #usecases .docs__paper--3 { z-index: 1; transform: translate(7%, -9%) scale(.93); opacity: .9; box-shadow: var(--float-sm); } #usecases .docs__top { display: flex; align-items: baseline; justify-content: space-between; } #usecases .docs__type { font-size: 15px; font-weight: 700; color: var(--ink); } #usecases .docs__id { font-size: 12px; color: var(--ink-3); } #usecases .docs__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 11px; } #usecases .docs__supplier { font-weight: 600; color: var(--ink-2); } #usecases .docs__date { color: var(--ink-3); } #usecases .docs__rows { display: flex; flex-direction: column; gap: 7px; } #usecases .docs__row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12.5px; } #usecases .docs__row + .docs__row { border-top: 1px solid var(--line-soft); padding-top: 7px; } #usecases .docs__row span { color: var(--ink-2); } #usecases .docs__row b { font-weight: 600; color: var(--ink); white-space: nowrap; } #usecases .docs__total { display: flex; align-items: baseline; justify-content: space-between; padding-top: 11px; border-top: 1.5px solid var(--line); } #usecases .docs__total span { font-size: 12px; color: var(--ink-3); } #usecases .docs__total b { font-size: 17px; font-weight: 700; color: var(--ink); } #usecases .docs__chip { flex: 0 0 46%; z-index: 4; align-self: center; background: var(--elevated); border: 1px solid var(--line-soft); border-radius: 16px; box-shadow: var(--float); padding: clamp(15px, 1.7vw, 19px); display: flex; flex-direction: column; gap: 10px; } #usecases .docs__chiphead { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--accent-active); margin-bottom: 1px; } #usecases .docs__chiphead .ic { font-size: 16px; color: var(--accent); } #usecases .docs__field { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 500; color: var(--ink); background: var(--bg-2); border-radius: 10px; padding: 10px 12px; } #usecases .docs__field .ic { font-size: 17px; } #usecases .docs__field .ok { color: var(--ok); } #usecases .docs__chipfoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 3px; } #usecases .docs__chipfoot .micro { font-size: 12px; color: var(--ink-3); } /* Distill: push the invoice's line-item texture and the chip's secondary footer back so the eye lands on the extracted-fields RESULT — the card's dominant before→after moment. Opacity only; the mock is a decorative role="img" with an aria-label, so content + a11y stay intact. */ #usecases .docs__rows { opacity: 0.6; } #usecases .docs__chipfoot .micro { opacity: 0.7; } /* Distill (knowledge card): the answer is the dominant moment; recede the source chips so they support rather than compete. The "צור משימת המשך" action and the answer text stay at full strength. */ #usecases .mock-workflow__sources { opacity: 0.7; } /* Distill (insights/brief card): the distilled brief panel is the moment; recede the raw input chips and the "מבוסס על 3 מקורות" meta so the synthesis (the three insight rows) dominates. */ #usecases .brief__inputs { opacity: 0.85; } #usecases .brief__src { opacity: 0.72; } #usecases .docs__scan { position: relative; display: inline-block; border: 1.4px dashed rgba(82,102,235,.55); background: rgba(82,102,235,.06); border-radius: 6px; padding: 1px 6px; } #usecases .docs__wire { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 5; } #usecases .docs__wire .wire-path { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 2.5 4; opacity: .55; stroke-linecap: round; } #usecases .docs__wire .wire-dot { fill: var(--accent); } /* ── CARD 3 · MANAGEMENT — synthesis → brief ── */ #usecases .brief { position: relative; align-items: stretch; justify-content: center; } #usecases .brief__inputs { position: relative; z-index: 1; display: flex; gap: 8px; justify-content: center; margin-bottom: clamp(26px, 3.6vw, 40px); } #usecases .brief__in { min-width: 68px; text-align: center; font-size: 12.5px; font-weight: 500; color: var(--ink-2); background: var(--elevated); border: 1px solid var(--line-soft); border-radius: var(--r-pill); padding: 6px 13px; box-shadow: var(--float-sm); } #usecases .brief__wire { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; } #usecases .brief__wire .wire-path { fill: none; stroke: var(--accent); stroke-width: 1.25; opacity: .42; stroke-linecap: round; } #usecases .brief__wire .wire-dot { fill: var(--accent); opacity: .55; } #usecases .brief__wire .wire-node { fill: var(--accent); opacity: .9; } #usecases .brief__panel { position: relative; z-index: 1; display: flex; flex-direction: column; background: var(--elevated); border: 1px solid var(--line); border-radius: var(--r-obj); box-shadow: var(--float); overflow: hidden; } #usecases .brief__head { display: flex; align-items: center; justify-content: space-between; padding: clamp(13px, 1.5vw, 16px) clamp(15px, 1.6vw, 19px); background: linear-gradient(180deg, #fbfcff, #f5f7fd); border-bottom: 1px solid var(--line-soft); font-size: 14.5px; font-weight: 700; color: var(--ink); } #usecases .brief__src { font-size: 12px; font-weight: 500; color: var(--ink-3); } #usecases .brief__row { display: grid; grid-template-columns: 136px 1fr; align-items: start; gap: clamp(11px, 1.3vw, 15px); padding: clamp(21px, 2.5vw, 29px) clamp(15px, 1.6vw, 19px); } #usecases .brief__row + .brief__row { border-top: 1px solid var(--line-soft); } #usecases .brief__row--watch { background: linear-gradient(to left, var(--warn-tint), transparent 86%); } #usecases .brief__tag { display: inline-flex; align-items: center; gap: 6px; width: fit-content; white-space: nowrap; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: var(--r-pill); } #usecases .brief__tag .ic { font-size: 14px; } #usecases .brief__tag--up { color: var(--ok); background: var(--ok-tint); } #usecases .brief__tag--watch { color: var(--warn); background: var(--warn-tint); } #usecases .brief__tag--next { color: var(--accent-active); background: var(--accent-tint); } #usecases .brief__row--watch .brief__tag--watch { color: #fff; background: var(--warn); } #usecases .brief__row p { font-size: clamp(13.5px, .85rem + .25vw, 15px); line-height: 1.55; color: var(--ink); } #usecases .brief__row--watch p { font-weight: 600; } /* ── CARD 4 · CUSTOMER SERVICE — animated triage journey (GSAP) ── */ #usecases .svc { position: relative; padding: 0; background: var(--elevated); border: 1px solid var(--line); border-radius: var(--r-obj); box-shadow: var(--float); overflow: hidden; } #usecases .svc__apps, #usecases .svc__inbox, #usecases .svc__case { position: absolute; } #usecases .svc__apps { left: 0; right: 0; top: clamp(16px, 4%, 22px); display: flex; justify-content: center; gap: clamp(18px, 3vw, 30px); opacity: 0; will-change: transform; } #usecases .svc__app { position: relative; width: clamp(54px, 6.4vw, 66px); aspect-ratio: 1; border-radius: 24%; display: grid; place-items: center; color: #fff; font-size: clamp(25px, 3vw, 31px); box-shadow: 0 7px 18px rgba(28,28,35,.2), inset 0 0 0 1px rgba(255,255,255,.16); } #usecases .svc__app--mail { background: linear-gradient(160deg, #f0685a, #ea4335); } #usecases .svc__app--wa { background: linear-gradient(160deg, #41e07e, #1faf54); } #usecases .svc__app--web { background: linear-gradient(160deg, #6f80f1, var(--accent)); } #usecases .svc__badge { position: absolute; top: -7px; right: -7px; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 999px; background: #ff3b30; color: #fff; font-size: 12px; font-weight: 800; line-height: 1; display: grid; place-items: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--elevated); } #usecases .svc.is-overload .svc__app { animation: svc-buzz .5s var(--e-out) 3; } #usecases .svc.is-overload .svc__app--wa { animation-delay: .07s; } #usecases .svc.is-overload .svc__app--web { animation-delay: .14s; } @keyframes svc-buzz { 0%, 100% { transform: translate3d(0,0,0) rotate(0); } 20% { transform: translate3d(-1.6px,0,0) rotate(-1.4deg); } 40% { transform: translate3d(1.6px,0,0) rotate(1.4deg); } 60% { transform: translate3d(-1px,0,0) rotate(-.8deg); } 80% { transform: translate3d(1px,0,0) rotate(.8deg); } } #usecases .svc__inbox { left: 0; right: 0; top: clamp(54px, 13%, 72px); bottom: clamp(12px, 3%, 18px); display: flex; flex-direction: column; justify-content: center; gap: clamp(8px, 1.6%, 12px); padding-inline: clamp(15px, 2vw, 21px); opacity: 0; } #usecases .svc__msg { display: flex; align-items: center; gap: 10px; background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 11px; padding: 10px 13px; will-change: transform; } #usecases .msgdot { width: 9px; height: 9px; border-radius: 50%; flex: none; transition: background .3s var(--e-soft); } #usecases .msgdot--urgent { background: var(--urgent); } #usecases .msgdot--bill { background: var(--accent); } #usecases .msgdot--gen { background: var(--ink-3); } #usecases .svc__msgsubj { font-size: 13.5px; color: var(--ink); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #usecases .svc__msgtag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: var(--r-pill); white-space: nowrap; opacity: 0; will-change: transform, opacity; } #usecases .svc__msgtag .ic { font-size: 12px; } #usecases .tag--urgent { color: var(--urgent); background: var(--urgent-tint); } #usecases .tag--bill { color: var(--accent-active); background: var(--accent-tint); } #usecases .tag--gen { color: var(--ink-2); background: #eceef4; } #usecases .svc__case { inset: 0; display: flex; flex-direction: column; justify-content: center; gap: clamp(11px, 1.5vw, 14px); padding: clamp(15px, 1.8vw, 19px); opacity: 1; } #usecases .svc__thread-head { display: flex; align-items: center; gap: 10px; padding-bottom: clamp(10px, 1.3vw, 13px); border-bottom: 1px solid var(--line-soft); } #usecases .svc__avatar { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent-active); } #usecases .svc__avatar .ic { font-size: 17px; } #usecases .svc__thread-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } #usecases .svc__subj { margin: 0; font-size: clamp(16px, 1rem + .3vw, 18px); font-weight: 700; letter-spacing: -.015em; line-height: 1.2; color: var(--ink); } #usecases .svc__thread-meta { font-size: 12px; font-weight: 500; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #usecases .svc__urgency { flex: none; align-self: flex-start; font-size: 10.5px; font-weight: 700; color: var(--urgent); background: var(--urgent-tint); padding: 3px 9px; border-radius: var(--r-pill); } #usecases .svc__thread { display: flex; flex-direction: column; gap: 9px; } #usecases .svc__bubble { max-width: 86%; padding: 10px 13px; border-radius: 14px; } #usecases .svc__bubble p { font-size: 13.5px; line-height: 1.5; color: var(--ink); text-wrap: pretty; } #usecases .svc__bubble--in { align-self: flex-start; background: var(--bg-2); border: 1px solid var(--line-soft); } #usecases .svc__bubble--out { align-self: flex-end; background: var(--accent-tint); border: 1px solid var(--accent-tint-2); display: flex; flex-direction: column; gap: 5px; } #usecases .svc__draft-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--accent-active); } #usecases .svc__draft-tag .ic { font-size: 13px; color: var(--accent); } #usecases .svc__composer { margin-top: clamp(2px, .8vw, 6px); display: flex; align-items: center; gap: 8px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 5px 14px 5px 5px; } #usecases .svc__composer-state { flex: 1; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-2); } #usecases .svc__composer-state .ic { font-size: 14px; color: var(--ok); } #usecases .svc__send.pill { flex: none; box-shadow: var(--float-sm); } #usecases .svc__send .ic { font-size: 15px; } /* RTL: the "next step" / "send" arrow points right by default; flip it to point left so it reads as forward in this right-to-left interface. */ #usecases .brief__tag--next .ic, #usecases .svc__send .ic { transform: scaleX(-1); } /* quiet pause/play control for the looping demo (injected by JS onto the stage) */ /* The hit box is a full 44x44 button anchored 3px inside the corner so it sits ENTIRELY within the stage's overflow:hidden box (the old 20px button + a negative-inset ::before had its outboard hit area clipped by the stage). The small visible dot is drawn on ::after, centered, so the control still reads as quiet while staying a compliant touch target. */ #usecases .svc__toggle { position: absolute; z-index: 5; bottom: 3px; left: 3px; width: 44px; height: 44px; padding: 0; margin: 0; display: grid; place-items: center; border: 0; background: none; box-shadow: none; color: var(--ink-2); cursor: pointer; transition: color .2s var(--e-soft); } #usecases .svc__toggle::after { content: ""; position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 50%; background: var(--elevated); box-shadow: var(--float-sm); transition: background .2s var(--e-soft), box-shadow .2s var(--e-soft), transform .2s var(--e-out); } #usecases .svc__toggle:hover, #usecases .svc__toggle:focus-visible { color: var(--accent-active); } #usecases .svc__toggle:hover::after, #usecases .svc__toggle:focus-visible::after { box-shadow: var(--float); } #usecases .svc__toggle:focus-visible { outline: none; } #usecases .svc__toggle:focus-visible::after { box-shadow: var(--float), 0 0 0 2px var(--accent); } #usecases .svc__toggle:active::after { transform: translateY(.5px); } #usecases .svc__toggle svg { position: relative; z-index: 1; width: 10px; height: 10px; fill: currentColor; display: block; } /* ════════════════════════════════════════════════════════════════════ RESPONSIVE — phone (<768) and tablet (768–1023) adaptations. Desktop (≥1024) keeps the rules above untouched. The site is fluid (clamp) and RTL-correct (logical props) already; these blocks add the real small-screen layouts: mobile nav drawer, phone hero, single-column stacks, ported card mockups, touch targets, and safe areas. ════════════════════════════════════════════════════════════════════ */ /* ---- Mobile nav toggle (hamburger). Hidden by default; shown < 768px only when JS is on, so no-JS users never get a dead button. ---- */ .nav__toggle { display: none; align-items: center; justify-content: center; justify-self: end; /* Pin to the end track (left, RTL). Without this, when .nav__links is hidden on mobile, grid auto-placement drops the toggle into the middle column. */ grid-column: 3; width: 44px; height: 44px; margin: 0; padding: 0; border: none; background: transparent; color: var(--nav-fg); border-radius: 12px; -webkit-tap-highlight-color: transparent; } /* Two bars that morph into a clean X. Two-phase motion (cuberto-style): on OPEN the bars slide to the centre, THEN cross; on CLOSE they uncross, THEN slide back apart. The phase order is reversed between states via per-property transition-delay, so the morph reads cleanly in both directions instead of the bars rotating while still apart. The wrapper takes a light press feedback; on a fine pointer the bars breathe a hair wider to signal tap. */ .nav__toggle-bars { position: relative; width: 26px; height: 14px; transition: transform 0.2s var(--ease-out); } .nav__toggle:active .nav__toggle-bars { transform: scale(0.88); } .nav__toggle-bars span { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; /* closing: uncross first (transform @0s), then slide apart (top, delayed). */ transition: top 0.26s var(--ease-out) 0.16s, transform 0.26s var(--ease-out) 0s; } .nav__toggle-bars span:nth-child(1) { top: 3px; } .nav__toggle-bars span:nth-child(2) { top: 9px; } .nav__toggle[aria-expanded="true"] .nav__toggle-bars span { /* opening: slide to the centre first (top @0s), then cross (transform, delayed). */ transition: top 0.24s var(--ease-out) 0s, transform 0.28s var(--ease-out) 0.16s; } .nav__toggle[aria-expanded="true"] .nav__toggle-bars span:nth-child(1) { top: 6px; transform: rotate(45deg); } .nav__toggle[aria-expanded="true"] .nav__toggle-bars span:nth-child(2) { top: 6px; transform: rotate(-45deg); } /* Hover breathe — closed state only; never fight the formed X. */ @media (hover: hover) and (pointer: fine) { .nav__toggle:hover .nav__toggle-bars span:nth-child(1) { top: 2px; } .nav__toggle:hover .nav__toggle-bars span:nth-child(2) { top: 10px; } .nav__toggle[aria-expanded="true"]:hover .nav__toggle-bars span:nth-child(1), .nav__toggle[aria-expanded="true"]:hover .nav__toggle-bars span:nth-child(2) { top: 6px; } } /* ---- Full-screen overlay menu (cuberto-style). The logo + the toggle (now an X) stay on top (nav z-index > overlay). Closed = opacity 0 + [inert] (set by JS) so it's out of the tab order; opacity (not visibility) keeps the first link focusable the instant it opens. The backdrop element is unused here. ---- */ .nav-drawer__backdrop { display: none; } .nav-drawer { position: fixed; inset: 0; z-index: var(--z-drawer); display: flex; flex-direction: column; padding: calc(env(safe-area-inset-top, 0px) + 104px) max(28px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 34px) max(28px, env(safe-area-inset-left, 0px)); background: var(--bg); opacity: 0; pointer-events: none; transition: opacity 0.4s var(--ease-out); } body.nav-open .nav-drawer { opacity: 1; pointer-events: auto; } body.nav-open { overflow: hidden; } /* While the overlay is open, the floating logo + X read against its surface. */ body.nav-open .nav { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body.nav-open .nav__toggle, body.nav-open .nav__brand .brand-lockup { color: var(--text); } .nav-drawer__eyebrow { margin: 0 0 clamp(20px, 5vh, 44px); font-size: 14px; font-weight: 500; letter-spacing: 0.02em; color: var(--text-muted); } .nav-drawer__links { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(2px, 0.8vh, 10px); } .nav-drawer__links a { padding: 6px 0; font-size: clamp(32px, 10vw, 52px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.12; color: var(--text); /* staggered reveal as the overlay opens */ opacity: 0; transform: translateY(16px); transition: opacity 0.4s var(--ease-out), transform 0.5s var(--ease-out); } .nav-drawer__links a:active { opacity: 0.55; } body.nav-open .nav-drawer__links a { opacity: 1; transform: none; } body.nav-open .nav-drawer__links a:nth-child(1) { transition-delay: 0.06s; } body.nav-open .nav-drawer__links a:nth-child(2) { transition-delay: 0.12s; } body.nav-open .nav-drawer__links a:nth-child(3) { transition-delay: 0.18s; } body.nav-open .nav-drawer__links a:nth-child(4) { transition-delay: 0.24s; } body.nav-open .nav-drawer__links a:nth-child(5) { transition-delay: 0.30s; } .nav-drawer__foot { margin-top: auto; padding-top: 22px; border-top: 1px solid var(--rule); } .nav-drawer__foot-label { display: block; margin-bottom: 12px; font-size: 14px; color: var(--text-muted); } .nav-drawer__contacts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; } .nav-drawer__contact { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 17px; font-weight: 500; color: var(--text); } .nav-drawer__contact--wa { color: var(--wa-deep); } @media (prefers-reduced-motion: reduce) { .nav-drawer, .nav-drawer__links a, .nav__toggle-bars, .nav__toggle-bars span { transition: none !important; } .nav-drawer__links a { opacity: 1; transform: none; } } /* The inline nav needs ~1000px to sit on one row, so the hamburger + overlay menu cover phones AND tablets (< 1024px). Tablets still get the laptop hero animation — the nav breakpoint is independent of the layout/animation ones. */ @media (max-width: 1023px) { .nav { gap: 12px; /* Clear the notch on portrait phones (viewport-fit=cover). */ padding-top: max(18px, calc(env(safe-area-inset-top, 0px) + 12px)); padding-inline: max(var(--pad-page), env(safe-area-inset-right, 0px), env(safe-area-inset-left, 0px)); } .nav.is-scrolled { padding-top: max(12px, calc(env(safe-area-inset-top, 0px) + 8px)); } .nav__links { display: none; } .nav__cta { display: none; } /* drawer carries the WhatsApp path < 1024px */ body.js-on .nav__toggle { display: inline-flex; } } @media (max-width: 767px) { /* Smaller logo on phone so it balances the hamburger (which is just a few bars). */ .nav__brand .brand-lockup { height: 18px; } /* Home-indicator clearance on the dark closing surfaces. */ .footer { padding-bottom: max(clamp(32px, 4vw, 56px), calc(env(safe-area-inset-bottom, 0px) + 24px)); } } /* Coarse-pointer touch-target floor: anything tappable in the closing sections gets at least a 44px hit height on touch devices. */ @media (pointer: coarse) { .contact__alt, .footer__brand, .footer__group a, .footer__contact, .footer__totop { min-height: 44px; display: inline-flex; align-items: center; } } /* Drawer/toggle never apply at desktop; the inline nav returns. */ @media (min-width: 1024px) { .nav-drawer, .nav-drawer__backdrop { display: none; } } /* ════════════════════════════════════════════════════════════════════ PHONE HERO (< 768px). The laptop is hidden; a portrait phone scrubs the same 4-beat workflow and resolves to the answer screen, which doubles as the "knowledge access" use-case (its label is .hero__usecase below). The page is STATIC by default (resolved answer beat, no pin, normal flow); the pin + scrub engage only when JS adds body.phone-hero-anim — so short viewports / reduced-motion / no-JS get a clean static hero with no empty scroll. The chassis/beat styles below are inert until shown < 768px. ════════════════════════════════════════════════════════════════════ */ .hero__phone { display: none; } .hero__usecase { display: none; } /* (The old bobbing-chevron scroll cue was removed — superseded by the shared scroll-progress rail + idle breath + "גללו" micro-label in the "Scroll progress indicator" block above, which work on phone too.) */ /* ──────────────────────────────────────────────────────────────────── PHONE HERO — INTRO (on load, < 768px). An orchestrated cascade: logo (its own entrance) → hamburger → headline (rise + de-blur) → subtitle (its own) → phone (scale/fade up) → file chips boot in staggered. Keyframe-only hidden state + `backwards` fill = no blank frame if JS/motion is off; reduced-motion opts out at the end. The phone entrance lives on the INNER .pphone, so it composes cleanly with the GSAP scrub on the OUTER .hero__phone. ──────────────────────────────────────────────────────────────────── */ @media (max-width: 767px) { .nav__toggle { animation: heroHambIn 600ms var(--ease-out) 220ms backwards; } .hero__title { animation: heroMTitleIn 820ms cubic-bezier(0.16, 1, 0.3, 1) 320ms backwards; } /* The phone scales/fades in (carrying its screen content) — the inner .pphone entrance composes with the GSAP scrub on the outer .hero__phone. The file chips are NOT animated separately: GSAP scrubs their opacity/transform, and a second CSS animation on the same properties races it. */ .pphone { animation: heroPhoneIn 880ms cubic-bezier(0.16, 1, 0.3, 1) 600ms backwards; } } @keyframes heroHambIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } @keyframes heroMTitleIn { from { opacity: 0; transform: translateY(26px); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } } @keyframes heroPhoneIn { from { opacity: 0; transform: translateY(44px) scale(0.93); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .nav__toggle, .hero__title, .pphone { animation: none !important; } } /* Portrait phone chassis — sized by height so it never exceeds the viewport. Static mode can be taller (the page scrolls); the pinned scrub mode keeps it large (below) so the demo reads at full size when focused. */ .pphone { position: relative; height: min(70vh, 620px); aspect-ratio: 1 / 2.02; width: auto; margin: 0 auto; background: linear-gradient(168deg, #17171b 0%, #0b0b0d 100%); border-radius: 36px; padding: 9px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 38px 70px -32px rgba(0, 0, 0, 0.55); } /* Minimal generic status bar (signal · camera island · battery), faint. */ .pphone__bar { position: absolute; top: 9px; left: 9px; right: 9px; height: 30px; z-index: 4; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-radius: 27px 27px 0 0; color: rgba(0, 0, 0, 0.4); } .pphone__cam { width: 34px; height: 7px; border-radius: 99px; background: #0b0b0d; } .pphone__sig { display: inline-flex; align-items: flex-end; gap: 2px; } .pphone__sig i { width: 3px; border-radius: 1px; background: currentColor; } .pphone__sig i:nth-child(1) { height: 5px; } .pphone__sig i:nth-child(2) { height: 8px; } .pphone__sig i:nth-child(3) { height: 11px; } .pphone__batt { width: 22px; height: 11px; border: 1.5px solid currentColor; border-radius: 3px; position: relative; opacity: 0.9; } .pphone__batt::before { content: ""; position: absolute; inset: 2px; width: 65%; border-radius: 1px; background: currentColor; } .pphone__batt::after { content: ""; position: absolute; top: 3px; bottom: 3px; right: -3px; width: 1.5px; border-radius: 1px; background: currentColor; } .pphone__screen { position: relative; width: 100%; height: 100%; background: var(--mock-surface); border-radius: 27px; overflow: hidden; display: flex; flex-direction: column; direction: rtl; color: var(--mock-text); } /* Guiding caption — the explanatory title; prominent, rotates with the beats. */ .pwf__caption { flex: none; margin: 0; padding: 40px 18px 10px; text-align: center; font-size: clamp(18px, 5.2vw, 22px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.18; color: var(--mock-text); text-wrap: balance; } /* Workflow body: a positioned stage; beats stack absolutely inside it. */ .pwf { position: relative; flex: 1; min-height: 0; padding: 4px 14px 14px; } /* Scattered fragments — varied positions + tilts (disorganized), gathered to centre as the knowledge base loads. Hidden by default (resolved state). */ .pwf__frags { position: absolute; inset: 0; opacity: 0; } .pfrag { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.07); border-radius: 11px; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.2); white-space: nowrap; will-change: transform, opacity; } .pfrag:nth-child(1) { top: 3%; right: 3%; transform: rotate(-5deg); } .pfrag:nth-child(2) { top: 22%; left: 1%; transform: rotate(4.5deg); } .pfrag:nth-child(3) { top: 43%; right: 9%; transform: rotate(-3deg); } .pfrag:nth-child(4) { top: 63%; left: 4%; transform: rotate(5.5deg); } .pfrag:nth-child(5) { top: 82%; right: 2%; transform: rotate(-4.5deg); } .pfrag__ic { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; background: var(--src-docs); color: #fff; font: 700 9px/1 "Inter", sans-serif; letter-spacing: 0.3px; } .pfrag--files .pfrag__ic { background: var(--src-files); } .pfrag--inbox .pfrag__ic { background: var(--src-inbox); font-size: 14px; } .pfrag--report .pfrag__ic { background: var(--src-report); font-size: 13px; } .pfrag--knowledge .pfrag__ic { background: var(--src-knowledge); font-size: 13px; } .pfrag__t { font-size: 13px; font-weight: 500; color: #2a2a30; } /* Consolidation chip — anchored in the upper third (just under the caption) rather than dead-centre, so the phone screen reads as a real top-down app flow instead of one element floating in empty space. Hidden by default. */ .pwf__loaded { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 24%; gap: 8px; opacity: 0; } .pwf__check { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: rgba(37, 211, 102, 0.14); color: var(--wa-deep); padding: 13px; } .pwf__check svg { width: 100%; height: 100%; } .pwf__loaded-title { font-size: 18px; font-weight: 600; } .pwf__loaded-sub { font-size: 13px; color: #8a8a93; } /* Search bar — persists; resolved position is the top of the body. It's the QUESTION, kept quiet so the answer below is the focal point. */ .pwf__search { position: absolute; top: 2px; left: 14px; right: 14px; display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 12px; box-shadow: 0 2px 8px -5px rgba(0, 0, 0, 0.1); will-change: transform; } .pwf__search-ic { flex: none; font-size: 15px; color: #a6a6ae; } .pwf__query { font-size: 12.5px; font-weight: 500; color: #5f5f68; line-height: 1.4; } /* Answer — the spotlight of the resolved screen: larger, given room, with the quieter question above and compact sources below. */ .pwf__answer { position: absolute; top: 56px; left: 14px; right: 14px; bottom: 14px; display: flex; flex-direction: column; gap: clamp(13px, 3.2vw, 18px); padding-top: clamp(6px, 2vw, 12px); } .pwf__answer-text { margin: 0; font-size: clamp(16px, 4.4vw, 18px); line-height: 1.6; color: #16161c; font-weight: 500; letter-spacing: -0.01em; } .pwf__sources { display: flex; flex-direction: column; gap: 7px; } /* #9a9aa2 = ~2.8:1 on white (fails AA). #5f606b = ~5.0:1, still clearly a muted sources label below the dominant answer. */ .pwf__sources-label { font-size: 11px; font-weight: 600; color: #5f606b; letter-spacing: 0.02em; } .psrc { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #34343c; } .psrc__ic { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; background: var(--src-docs); color: #fff; font: 700 8px/1 "Inter", sans-serif; } .psrc--files .psrc__ic { background: var(--src-files); } .psrc--knowledge .psrc__ic { background: var(--src-knowledge); font-size: 12px; } .pwf__next { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding: 12px 14px; background: var(--wa-deep); color: #fff; border-radius: 12px; font-size: 13.5px; font-weight: 600; } @media (max-width: 767px) { /* laptop off, phone on */ .hero__laptop { display: none; } .hero__fallback { display: none !important; } /* Static hero: normal flow, no pin, no extra scroll. */ .hero { height: auto; /* ── HERO ALIGNMENT (phone) ────────────────────────────────────────── Controls how the hero title, subtitle and Card-1 label align on phone. Set to `center` to center everything (default), or `right` for the cuberto-style right-aligned hero. This is the only line to change. */ --hero-align: center; } .hero__title, .hero__lead, .hero__usecase { text-align: var(--hero-align); } .hero__pin { position: static; height: auto; overflow: visible; justify-content: flex-start; gap: clamp(16px, 3.5vh, 26px); padding: clamp(78px, 14vh, 108px) 16px clamp(28px, 5vh, 48px); } .usecases { margin-top: 0 !important; } .hero__intro { z-index: 3; } /* Big, cuberto-scale phone headline. FOUR short lines (הופכים / בינה מלאכותית / ליכולת מעשית / בארגון.) — the .ht-br break shows AND the "בארגון." span is restored on its own line so the organizational promise survives on phones. Clamp lowered a touch vs. the old 3-line size to make room for the 4th line while staying big down to ~320px. To resize, change the clamp. */ .hero__title { font-size: clamp(40px, 12vw, 58px); letter-spacing: -0.04em; line-height: 1.04; max-width: 96vw; } .hero__title-line { display: block; } .hero__title-inner { display: inline; animation: none; } /* Phone: split after "הופכים", then "ליכולת מעשית" and "בארגון." each on their own line. No .ht-dot period — the sentence ends with the period in "בארגון.". */ .ht-br { display: inline; } .ht-org { display: block; } .ht-dot { display: none; } .hero__lead { font-size: clamp(16px, 4.6vw, 21px); line-height: 1.35; max-width: min(94vw, 40ch); /* cuberto headline→subtitle gap ~34px; auto centres the block (matches --hero-align: center). */ margin: clamp(32px, 8vw, 40px) auto 0; } .hero__lead br { display: none; } .hero__phone { display: block; } /* Sit lower so it's clearly separate from the phone (was too close). text-align comes from --hero-align (set above); full-width so the text hugs the chosen edge rather than a centered inner block. */ .hero__usecase { display: block; max-width: min(94vw, 40ch); margin: clamp(20px, 5vw, 34px) auto 0; } .hero__usecase-title { margin: 0; font-size: clamp(22px, 6.2vw, 28px); font-weight: 600; letter-spacing: -0.02em; } .hero__usecase-desc { margin: 8px 0 0; font-size: clamp(14px, 4vw, 16px); color: var(--text-muted); line-height: 1.55; text-wrap: pretty; } /* Pinned scrub mode (JS-driven, min-height >= 720 & motion ok). The phone is the single centered focus; the intro overlays the top (fades + lifts away as the demo takes focus) and the Card-1 label overlays the bottom (fades in as the answer resolves). Both absolute so they never compete with the phone for vertical space — the phone stays large enough for its content. */ body.phone-hero-anim .hero { height: 300vh; } body.phone-hero-anim .hero__pin { position: sticky; top: 0; /* dvh tracks the VISIBLE viewport, so the pin (and the scroll cue anchored to its bottom, and the centred phone) follow the area the user actually sees as the mobile URL bar shows/hides — otherwise the cue sits below the fold and the focused phone overflows the top on real devices. */ height: 100vh; height: 100dvh; overflow: hidden; justify-content: center; gap: 0; padding: 0 var(--pad-page); } body.phone-hero-anim .hero__intro { position: absolute; top: clamp(104px, 15vh, 132px); /* cuberto top padding ~126px */ left: 16px; right: 16px; width: auto; z-index: 3; } /* Keep the subtitle prominent (cuberto ~21px) rather than shrinking it. */ body.phone-hero-anim .hero__lead { font-size: clamp(17px, 5.3vw, 21px); } body.phone-hero-anim .hero__phone { will-change: transform; } /* Sized off the visible viewport (dvh) and left enough headroom that even at the focus scale the phone clears the top and the label below it. */ body.phone-hero-anim .pphone { height: min(68vh, 600px); height: min(68dvh, 600px); } body.phone-hero-anim .hero__usecase { position: absolute; bottom: clamp(12px, 2.6vh, 24px); left: var(--pad-page); right: var(--pad-page); width: auto; /* max-width (32ch, inherited) + both insets + auto margins = truly centered. Without the auto margins, RTL pins the capped-width block to the right. */ margin-inline: auto; } } /* Short viewports (small phones, or the mobile URL bar reducing the visible height): compact the resolved demo + the label so the full answer (with its action) and the label below it both fit the shorter phone without clipping or overlapping. Common phones (≥700px visible) keep the roomier sizes above. */ @media (max-width: 767px) and (max-height: 700px) { .pwf__caption { font-size: clamp(15px, 4.6vw, 18px); padding-top: 30px; } .pwf__answer { gap: 9px; } .pwf__answer-text { font-size: clamp(14px, 4vw, 16px); line-height: 1.45; } .pwf__sources { gap: 5px; } .psrc { font-size: 11.5px; } .pwf__next { padding: 9px 12px; font-size: 12.5px; } .hero__usecase-title { font-size: clamp(18px, 5.2vw, 22px); } .hero__usecase-desc { font-size: clamp(12.5px, 3.6vw, 14px); line-height: 1.4; } body.phone-hero-anim .hero__usecase { bottom: clamp(8px, 1.5vh, 16px); } } /* Use-cases heading word swaps narrow/wide. */ .uc-head-word--narrow { display: none; } @media (max-width: 767px) { .uc-head-word--wide { display: none; } .uc-head-word--narrow { display: inline; } /* Card 1 is absorbed into the hero on phone. Two-class specificity (0,2,0) so it wins over the later `.usecase { display:flex }` card-port rule. */ .usecase.usecase--knowledge { display: none; } } /* When the laptop hero animation can't run (short viewport ≥768px, e.g. landscape phones; or reduced motion at any width), collapse the 450vh pinned hero to normal flow so there's no empty pinned scroll. The laptop renders its static final frame. */ @media (min-width: 768px) and (max-height: 639px) { .hero { height: auto; } .hero__pin { position: static; height: auto; overflow: visible; } .usecases { margin-top: 0 !important; } } @media (prefers-reduced-motion: reduce) { .hero { height: auto; } .hero__pin { position: static; height: auto; overflow: visible; } .usecases { margin-top: 0 !important; } } /* ════════════════════════════════════════════════════════════════════ USE-CASE CARDS (< 768px). Single column, and each bespoke mockup is re-laid-out for a full-width narrow card (not just shrunk): the docs batch stacks vertically over its extraction chip, the brief tightens its rows, and the service card keeps its absolute triage layers within a tall stage. Card 1 (knowledge) is hidden — it lives in the hero. ════════════════════════════════════════════════════════════════════ */ /* Phone (<768): single-column grid. */ @media (max-width: 767px) { .usecase__list { grid-template-columns: 1fr; grid-template-rows: none; gap: clamp(40px, 9vw, 56px); } .usecase { display: flex; flex-direction: column; grid-row: auto; } } /* Card internals are ported across the whole < 1024 range — a tablet 2-col column (~355px) is as narrow as a phone card, so the desktop row mockups overflow there too. The grid stays 2-col on tablet (above). */ @media (max-width: 1023px) { .usecase__meta { align-items: flex-start; text-align: right; } #usecases .usecase__visual--stage { height: clamp(430px, 116vw, 520px); } /* ── Card 2 · docs — invoice on one side, extracted-fields chip on the other (like desktop, sized to fit the narrow card), joined by the horizontal extraction wire (initDocsWire draws horizontally for side-by-side). ── */ #usecases .usecase__visual--stage:has(.docs) { height: clamp(384px, 74vw, 480px); } #usecases .docs { flex-direction: row; align-items: center; justify-content: center; gap: clamp(10px, 2.6vw, 18px); } #usecases .docs__stack { flex: 0 0 54%; width: auto; height: auto; align-self: stretch; margin-block: clamp(14px, 5%, 28px); } #usecases .docs__chip { flex: 0 0 40%; width: auto; max-width: none; align-self: center; padding: clamp(11px, 2.6vw, 15px); gap: 8px; } #usecases .docs__wire { display: block; } /* Tighter invoice type, single-line rows (matches the desktop one-line rows). */ #usecases .docs__paper--front { padding: clamp(11px, 1.4vw, 15px); gap: 8px; } #usecases .docs__row { gap: 6px; } #usecases .docs__row, #usecases .docs__row span, #usecases .docs__row b { font-size: 11px; white-space: nowrap; } #usecases .docs__type { font-size: 13.5px; } #usecases .docs__total b { font-size: 15px; } #usecases .docs__field { font-size: 12.5px; padding: 8px 10px; } #usecases .docs__field .ic { font-size: 15px; } /* Approval row stacks on narrow cards (tablet + phone): the "N ממתינים לאישור" count sits on its own line ABOVE the אישור button — cleaner than cramming it side-by-side. Desktop keeps the side-by-side row (it has room). */ #usecases .docs__chipfoot { flex-direction: column; align-items: flex-start; gap: 6px; } #usecases .docs__chipfoot .micro { font-size: clamp(11px, 2.6vw, 12px); } /* ── Card 3 · brief: stack each row's tag above its text so the "requires attention" pill never overruns the narrow label track. The stacked rows are taller, so the stage grows to keep the third row's text ("next step") from clipping. ── */ #usecases .usecase__visual--stage:has(.brief) { height: clamp(486px, 126vw, 564px); } #usecases .brief__inputs { margin-bottom: clamp(24px, 6vw, 36px); } #usecases .brief__row { grid-template-columns: 1fr; gap: 8px; padding: clamp(13px, 3.4vw, 18px) clamp(13px, 3.6vw, 17px); } #usecases .brief__row p { font-size: 14px; } /* ── Card 4 · service: the absolute triage layers fill the tall stage ── */ #usecases .svc__inbox { gap: 7px; } } /* ════════════════════════════════════════════════════════════════════ REMAINING MULTI-COLUMN SECTIONS (< 768px) → single column / tidy wrap. ════════════════════════════════════════════════════════════════════ */ @media (max-width: 767px) { /* Docs card (phone): tighten the gap; the approval row is stacked (see the <1024 block) so the chip no longer needs to cram a side-by-side row. */ #usecases .docs { gap: 8px; } #usecases .docs__stack { flex: 0 0 50%; } #usecases .docs__chip { flex: 0 0 47%; padding: 10px; } /* Process: the two parallel branches stack into a single chain (01 → 02A → 02B → 03). The JS bezier connectors cross awkwardly once stacked, so hide them and draw short dashed CONNECTORS that sit only in the gaps BETWEEN consecutive cards. Each segment's height exactly fills its gap, so nothing pokes out above card 01 or below card 03. */ .process__branches { grid-template-columns: 1fr; gap: clamp(30px, 8vw, 46px); } .process__lines { display: none; } .process__scheme { position: relative; } .process__node { position: relative; z-index: 1; } .process__node--branch::before, .process__node--bottom::before { content: ""; position: absolute; bottom: 100%; /* sits in the gap above this card */ left: 50%; transform: translateX(-50%); width: 0; border-left: 1.5px dashed rgba(255, 255, 255, 0.22); z-index: 0; } /* gap above 02A = scheme gap (card 01 → branches) */ .process__branches .process__node--branch:nth-child(1)::before { height: clamp(44px, 4.8vw, 80px); } /* gap above 02B = branches gap (02A → 02B) */ .process__branches .process__node--branch:nth-child(2)::before { height: clamp(30px, 8vw, 46px); } /* gap above 03 = scheme gap (branches → card 03) */ .process__node--bottom::before { height: clamp(44px, 4.8vw, 80px); } /* Founders: two columns stack into one. */ .trust__grid { grid-template-columns: 1fr; gap: clamp(40px, 11vw, 60px); } .founder__portrait { max-width: 300px; } .founder__bio { max-width: 60ch; } /* Training adoption anchors: stack into a clean left-aligned column on phone. */ .tm { flex-direction: column; align-items: flex-start; gap: 14px; width: fit-content; } /* Training field: a predictable 2-column grid (2·2·1) so the five teams sit in even rows instead of wrapping unpredictably. A faint hairline in the column gap keeps two side-by-side teams from reading as one big huddle when space gets tight. The lone fifth team spans + centres under the pairs. */ .adopt__field { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; align-items: start; column-gap: clamp(26px, 10vw, 44px); row-gap: clamp(22px, 6vw, 32px); } /* Management apex on top, spanning both columns and centred. */ .adopt__cluster--apex { grid-column: 1 / -1; justify-self: center; margin-bottom: clamp(4px, 1.5vw, 10px); } /* The four departments form a 2×2 beneath; a faint hairline sits in the column gap, on the two left-column teams (3rd + 5th children). */ .adopt__cluster:nth-child(3), .adopt__cluster:nth-child(5) { position: relative; } .adopt__cluster:nth-child(3)::before, .adopt__cluster:nth-child(5)::before { content: ""; position: absolute; inset-block: 8%; inset-inline-start: calc(-1 * clamp(13px, 5vw, 22px)); /* centre of the column gap */ width: 1px; background: linear-gradient(to bottom, transparent 0%, var(--rule-inverse) 24%, var(--rule-inverse) 76%, transparent 100%); } /* Footer: nav columns share the row. The contact column gets the larger share and a tighter gap so the email address fits on one line (the in-page links are short). */ .footer__nav { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: clamp(14px, 4vw, 26px); width: 100%; } .footer__brandcol { max-width: none; } /* Training CTA: the inline "lead · divider · WhatsApp" pill is awkward on a phone, so stack it — the prompt above a clear solid-green WhatsApp button. */ .adopt__cta { flex-direction: column; gap: 13px; width: 100%; max-width: 340px; padding: 18px 20px; border-radius: 20px; } .adopt__cta-lead { text-align: center; font-size: 16px; } .adopt__cta-go { width: 100%; justify-content: center; background: var(--wa); color: #0b0b0d; padding: 13px 20px; border-radius: 999px; font-size: 16px; } .adopt__cta-go::before { display: none; } /* drop the vertical divider when stacked */ /* Heading: drop the 22ch cap and ease the size so the question lands as a punchy ~3 lines instead of 5-6 narrow ones. */ .contact__title { font-size: clamp(30px, 8.1vw, 44px); max-width: none; line-height: 1.1; } /* WhatsApp CTA: trim the glyph/arrow columns and the side padding so the label keeps a single line (two at most) instead of breaking to three on a phone — there's room once the chrome around it stops hogging width. */ .contact__primary { gap: clamp(18px, 4.5vw, 24px); } .contact__wa { gap: 8px 14px; padding: clamp(22px, 6vw, 30px) clamp(18px, 5vw, 30px); } .contact__wa .wa-glyph { width: 30px; height: 30px; } .contact__wa-label { font-size: clamp(18px, 4.8vw, 24px); } .contact__wa-arrow { font-size: 24px; } /* Below the CTA: the reassurance note pairs with the button, so it sits directly beneath it; the email/phone alternatives drop below a hairline as a quieter, clearly-separate fallback. Everything is centred on one axis so the closing block reads calm instead of ragged. */ .contact__note { order: 1; text-align: center; } .contact__secondary { order: 2; flex-direction: column; /* Size the block to the widest row (the email) and align every row to the same edge, so the email and phone icons line up in a clean column instead of each centring independently. The whole block is then centred on page. */ align-items: stretch; width: fit-content; max-width: 100%; margin-inline: auto; gap: 11px; padding-top: clamp(16px, 4.5vw, 22px); border-top: 1px solid var(--rule-inverse); } /* Start the question at the SAME edge as the mail/phone icons (RTL start = right), so the label, email and phone share one start x. The whole block stays centred on the page via width:fit-content + margin-inline:auto. */ .contact__secondary-label { align-self: flex-start; margin-bottom: 2px; } .contact__alt { justify-content: flex-start; gap: 10px; } /* RTL: icons align at the right */ }