/* ============================================================ SAGI DIGITAL — Design System Style: Modern Dark (Cinema) · Bento Grid · Glassmorphism Direction: RTL (Hebrew) ============================================================ */ /* הגופנים נטענים ב- בתוך ה- של כל עמוד. @import כאן היה יוצר שרשרת חוסמת: HTML -> style.css -> fonts.css -> קובצי הגופן. */ /* ---------- 1. TOKENS ---------- */ :root{ /* Surfaces — deep indigo-black, never pure #000 (OLED smear) */ --bg: #0A0A18; --bg-elev: #101026; --bg-elev-2: #16162F; --glass: rgba(255,255,255,.045); --glass-strong: rgba(255,255,255,.075); --glass-brand: rgba(124,111,255,.09); /* Brand — anchored on the logo indigo #3933C3, lifted for dark-mode contrast */ --brand-deep: #3933C3; --brand: #5B54E8; --brand-bright: #7C6FFF; --brand-glow: #9A8CFF; /* Accent — mint, ties to WhatsApp/success semantics */ --accent: #2BE59B; --accent-deep: #0FB97A; /* Text — verified contrast on --bg */ --fg: #EDECFB; /* 16.4:1 */ --fg-muted: #A5A3C4; /* 7.7:1 */ --fg-dim: #9C99C2; /* 7.2:1 על --bg, 5.0:1 על משטחים מוארים. ⚠️ היה #8B88B5 — עמד ב-5.8:1 על --bg בלבד, אבל צנח ל-4.04:1 על כרטיסים מוארים ונפל ב-WCAG AA. */ /* Lines */ --line: rgba(255,255,255,.085); --line-strong: rgba(255,255,255,.16); --line-brand: rgba(124,111,255,.32); /* Gradients */ --grad-brand: linear-gradient(135deg,#7C6FFF 0%,#5B54E8 45%,#3933C3 100%); --grad-text: linear-gradient(105deg,#FFFFFF 0%,#C9C2FF 40%,#7C6FFF 100%); --grad-accent: linear-gradient(135deg,#2BE59B 0%,#0FB97A 100%); /* Shadow & glow */ --shadow-sm: 0 2px 8px rgba(0,0,0,.3); --shadow-md: 0 10px 30px -8px rgba(0,0,0,.55); --shadow-lg: 0 28px 70px -20px rgba(0,0,0,.75); --glow-brand: 0 0 0 1px rgba(124,111,255,.25), 0 18px 50px -14px rgba(91,84,232,.55); --glow-accent: 0 0 0 1px rgba(43,229,155,.25), 0 18px 50px -14px rgba(15,185,122,.45); /* Type */ --font-head: 'Rubik', 'Heebo', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Heebo', 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Spacing — marketing density (spacious) */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px; /* Radii */ --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-pill:999px; /* Motion — Expo.out */ --ease: cubic-bezier(.16,1,.3,1); --ease-soft: cubic-bezier(.4,0,.2,1); --t-fast:150ms; --t-mid:280ms; --t-slow:600ms; --container: 1200px; --header-h: 76px; } /* ---------- 2. RESET & BASE ---------- */ *,*::before,*::after{box-sizing:border-box} *{margin:0} html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 20px); -webkit-text-size-adjust:100%; } body{ background:var(--bg); color:var(--fg); font-family:var(--font-body); font-size:17px; font-weight:400; line-height:1.75; letter-spacing:-.005em; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; min-height:100vh; } img,svg,video{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} button,input,textarea,select{font:inherit;color:inherit} button{background:none;border:0;cursor:pointer} ul,ol{list-style:none;padding:0} h1,h2,h3,h4,h5{font-family:var(--font-head);font-weight:800;line-height:1.15;letter-spacing:-.03em} ::selection{background:var(--brand);color:#fff} /* Focus — never removed, always visible (a11y priority 1) */ :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; } /* Scrollbar */ ::-webkit-scrollbar{width:11px;height:11px} ::-webkit-scrollbar-track{background:var(--bg)} ::-webkit-scrollbar-thumb{background:#2A2A4D;border-radius:99px;border:3px solid var(--bg)} ::-webkit-scrollbar-thumb:hover{background:var(--brand)} /* ---------- 3. AMBIENT BACKGROUND ---------- */ .ambient{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; } .ambient::before{ content:''; position:absolute; inset:0; background-image: linear-gradient(rgba(124,111,255,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(124,111,255,.045) 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 20%,transparent 75%); -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 20%,transparent 75%); } .blob{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; animation:drift 22s var(--ease-soft) infinite alternate; } .blob-1{width:620px;height:620px;background:#3933C3;top:-220px;inset-inline-end:-160px} .blob-2{width:520px;height:520px;background:#5B54E8;top:38%;inset-inline-start:-220px;animation-delay:-8s;opacity:.32} .blob-3{width:460px;height:460px;background:#0FB97A;bottom:-180px;inset-inline-end:12%;animation-delay:-15s;opacity:.18} @keyframes drift{ from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(40px,-60px,0) scale(1.14)} } /* ---------- 4. LAYOUT ---------- */ .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:24px} main{position:relative;z-index:1} section{position:relative;padding-block:var(--sp-9)} @media (max-width:768px){ section{padding-block:var(--sp-8)} } .section-head{max-width:720px;margin-inline:auto;text-align:center;margin-bottom:var(--sp-8)} .section-head.start{margin-inline:0;text-align:start} .eyebrow{ display:inline-flex;align-items:center;gap:8px; font-family:var(--font-mono);font-size:12px;font-weight:700; letter-spacing:.14em;text-transform:uppercase; color:var(--brand-glow); background:var(--glass-brand); border:1px solid var(--line-brand); padding:7px 16px;border-radius:var(--r-pill); margin-bottom:var(--sp-4); } .eyebrow::before{ content:'';width:6px;height:6px;border-radius:50%; background:var(--accent);box-shadow:0 0 10px var(--accent); animation:pulse 2.4s ease-in-out infinite; } @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.75)}} h1,.h1{font-size:clamp(2.5rem,6vw,4.4rem);font-weight:900;line-height:1.06} h2,.h2{font-size:clamp(1.85rem,3.5vw,2.8rem);font-weight:800} h3,.h3{font-size:clamp(1.25rem,2.2vw,1.6rem);font-weight:700;line-height:1.3} h4{font-size:1.1rem;font-weight:700} .lead{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--fg-muted);line-height:1.8;font-weight:300} .muted{color:var(--fg-muted)} .dim{color:var(--fg-dim)} .grad-text{ background:var(--grad-text); -webkit-background-clip:text;background-clip:text; color:transparent; } .accent-text{color:var(--accent)} /* ---------- 5. BUTTONS ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; font-family:var(--font-head);font-weight:700;font-size:16px; padding:15px 30px;border-radius:var(--r-pill); min-height:52px; cursor:pointer;position:relative;overflow:hidden; transition:transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease), background var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease); white-space:nowrap; } .btn svg{width:19px;height:19px;flex:none} .btn:active{transform:scale(.97)} .btn-primary{background:var(--grad-brand);color:#fff;box-shadow:var(--glow-brand)} .btn-primary::after{ content:'';position:absolute;inset:0; background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%); transform:translateX(-120%);transition:transform 700ms var(--ease); } .btn-primary:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(154,140,255,.5),0 26px 60px -14px rgba(91,84,232,.8)} .btn-primary:hover::after{transform:translateX(120%)} .btn-accent{background:var(--grad-accent);color:#04231A;box-shadow:var(--glow-accent);font-weight:800} .btn-accent:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(43,229,155,.5),0 26px 60px -14px rgba(15,185,122,.7)} .btn-ghost{ background:var(--glass);color:var(--fg); border:1px solid var(--line-strong); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); } .btn-ghost:hover{background:var(--glass-strong);border-color:var(--brand-bright);transform:translateY(-3px)} .btn-sm{padding:11px 22px;font-size:14px;min-height:44px} .btn-lg{padding:18px 38px;font-size:17px;min-height:58px} .btn-block{width:100%} .link-arrow{ display:inline-flex;align-items:center;gap:8px; color:var(--brand-bright);font-weight:600;font-size:15px; transition:gap var(--t-mid) var(--ease),color var(--t-mid) var(--ease); } .link-arrow svg{width:16px;height:16px;transition:transform var(--t-mid) var(--ease)} .link-arrow:hover{gap:13px;color:var(--brand-glow)} /* RTL: arrows point left */ .link-arrow svg{transform:scaleX(-1)} /* ---------- 6. CARDS / GLASS ---------- */ .glass{ background:var(--glass); border:1px solid var(--line); border-radius:var(--r-lg); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); } .card{ position:relative; background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02)); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-6); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); transition:transform var(--t-mid) var(--ease),border-color var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease),background var(--t-mid) var(--ease); overflow:hidden; } .card::before{ content:'';position:absolute;inset-inline:0;top:0;height:1px; background:linear-gradient(90deg,transparent,rgba(124,111,255,.7),transparent); opacity:0;transition:opacity var(--t-mid) var(--ease); } .card:hover{ transform:translateY(-6px); border-color:var(--line-brand); box-shadow:var(--shadow-lg),0 0 0 1px rgba(124,111,255,.18); background:linear-gradient(160deg,rgba(124,111,255,.1),rgba(255,255,255,.025)); } .card:hover::before{opacity:1} .icon-box{ width:56px;height:56px;flex:none; display:grid;place-items:center; border-radius:var(--r-md); background:var(--glass-brand); border:1px solid var(--line-brand); color:var(--brand-glow); margin-bottom:var(--sp-5); transition:transform var(--t-mid) var(--ease),background var(--t-mid) var(--ease); } .icon-box svg{width:26px;height:26px} .card:hover .icon-box{transform:scale(1.08) rotate(-4deg);background:rgba(124,111,255,.18)} .icon-box.mint{background:rgba(43,229,155,.1);border-color:rgba(43,229,155,.3);color:var(--accent)} /* ---------- 7. REVEAL ANIMATION ---------- */ [data-reveal]{ opacity:0;transform:translateY(26px); transition:opacity 700ms var(--ease),transform 700ms var(--ease); transition-delay:var(--d,0ms); } [data-reveal].in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important;animation-iteration-count:1 !important; transition-duration:.01ms !important;scroll-behavior:auto !important; } [data-reveal]{opacity:1;transform:none} .blob{animation:none} } /* ---------- 8. HEADER / NAV ---------- */ .header{ position:fixed;inset-block-start:0;inset-inline:0;z-index:100; height:var(--header-h); display:flex;align-items:center; transition:background var(--t-mid) var(--ease),backdrop-filter var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease),height var(--t-mid) var(--ease); border-bottom:1px solid transparent; } .header.scrolled{ background:rgba(10,10,24,.82); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%); border-bottom-color:var(--line); height:66px; } .header .container{display:flex;align-items:center;gap:var(--sp-6)} .logo{display:flex;align-items:center;gap:11px;flex:none} .logo svg{width:38px;height:38px} .logo-text{display:flex;flex-direction:column;line-height:1} .logo-text b{ font-family:var(--font-head);font-weight:900;font-size:19px; letter-spacing:.02em;color:#fff; } .logo-text span{ font-family:var(--font-mono);font-size:9.5px;font-weight:500; letter-spacing:.26em;color:var(--brand-glow);margin-top:3px; } .nav{display:flex;align-items:center;gap:4px;margin-inline-start:auto} .nav a{ position:relative;padding:9px 15px;border-radius:var(--r-pill); font-size:15.5px;font-weight:500;color:var(--fg-muted); transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease); } .nav a:hover{color:var(--fg);background:var(--glass)} .nav a[aria-current="page"]{color:var(--fg);font-weight:600} .nav a[aria-current="page"]::after{ content:'';position:absolute;inset-inline:15px;bottom:2px;height:2px; background:var(--grad-brand);border-radius:2px; } /* Dropdown */ .has-sub{position:relative} .has-sub > button{ display:flex;align-items:center;gap:6px; padding:9px 15px;border-radius:var(--r-pill); font-size:15.5px;font-weight:500;color:var(--fg-muted); transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease); } .has-sub > button svg{width:13px;height:13px;transition:transform var(--t-mid) var(--ease)} .has-sub:hover > button,.has-sub.open > button{color:var(--fg);background:var(--glass)} .has-sub:hover > button svg,.has-sub.open > button svg{transform:rotate(180deg)} .submenu{ position:absolute;inset-block-start:calc(100% + 12px);inset-inline-end:0; min-width:290px;padding:8px; background:rgba(16,16,38,.96); border:1px solid var(--line);border-radius:var(--r-md); backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px); box-shadow:var(--shadow-lg); opacity:0;visibility:hidden;transform:translateY(-8px); transition:opacity var(--t-mid) var(--ease),transform var(--t-mid) var(--ease),visibility var(--t-mid); } .has-sub:hover .submenu,.has-sub.open .submenu{opacity:1;visibility:visible;transform:none} .submenu a{ display:flex;align-items:center;gap:12px; padding:11px 13px;border-radius:var(--r-sm); font-size:15px;color:var(--fg-muted);width:100%; } .submenu a:hover{background:var(--glass-brand);color:var(--fg)} .submenu a svg{width:18px;height:18px;color:var(--brand-glow);flex:none} .submenu a small{display:block;font-size:12.5px;color:var(--fg-dim);font-weight:400;line-height:1.4} .submenu a strong{font-weight:600;font-size:15px} .header-cta{display:flex;align-items:center;gap:10px;flex:none} .burger{ display:none;width:46px;height:46px; border-radius:var(--r-sm);border:1px solid var(--line-strong); background:var(--glass); place-items:center;flex:none; } .burger span{ display:block;width:20px;height:2px;background:var(--fg);border-radius:2px; transition:transform var(--t-mid) var(--ease),opacity var(--t-fast) var(--ease); } .burger span + span{margin-top:5px} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* Mobile drawer */ .mobile-nav{ position:fixed;inset:var(--header-h) 0 0;z-index:99; background:rgba(10,10,24,.98); backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px); padding:var(--sp-6) 24px var(--sp-8); overflow-y:auto; transform:translateY(-12px);opacity:0;visibility:hidden; transition:opacity var(--t-mid) var(--ease),transform var(--t-mid) var(--ease),visibility var(--t-mid); } .mobile-nav.open{opacity:1;visibility:visible;transform:none} .mobile-nav a{ display:block;padding:15px 16px;border-radius:var(--r-md); font-size:18px;font-weight:600;color:var(--fg-muted); border-bottom:1px solid var(--line); } .mobile-nav a:hover,.mobile-nav a[aria-current="page"]{color:var(--fg);background:var(--glass)} .mobile-nav .sub-label{ font-family:var(--font-mono);font-size:11px;letter-spacing:.16em; text-transform:uppercase;color:var(--brand-glow); padding:var(--sp-5) 16px 8px; } .mobile-nav .sub a{font-size:16px;font-weight:500;padding-inline-start:30px} .mobile-nav .m-cta{display:grid;gap:12px;margin-top:var(--sp-6)} @media (max-width:1024px){ .nav,.header-cta .btn-ghost{display:none} .burger{display:grid} } @media (max-width:520px){ .header-cta .btn{display:none} .logo-text span{display:none} } /* ---------- 9. HERO ---------- */ .hero{ padding-block:calc(var(--header-h) + var(--sp-9)) var(--sp-9); position:relative; } .hero-grid{ display:grid;grid-template-columns:1.12fr .88fr; gap:var(--sp-8);align-items:center; } .hero h1{margin-bottom:var(--sp-5);font-size:clamp(2.2rem,4.1vw,3.55rem)} .hero .lead{max-width:56ch;margin-bottom:var(--sp-6)} .hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:var(--sp-6)} .hero-trust{ display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-5); padding-top:var(--sp-5);border-top:1px solid var(--line); } .hero-trust-item{display:flex;align-items:center;gap:9px;font-size:14.5px;color:var(--fg-dim)} .hero-trust-item svg{width:18px;height:18px;color:var(--accent);flex:none} @media (max-width:960px){ .hero-grid{grid-template-columns:1fr;gap:var(--sp-7)} .hero{padding-block:calc(var(--header-h) + var(--sp-7)) var(--sp-8)} } @media (max-width:640px){ /* full-width CTAs read as one clear next step on a phone */ .hero-actions{gap:12px} .hero-actions .btn,.cta-actions .btn{width:100%} .hero-trust{gap:var(--sp-3)} .hero-trust-item{width:100%} } /* ---------- 10. CHAT MOCK (hero visual) ---------- */ .chat-mock{ position:relative; max-width:min(400px,100%);margin-inline:auto; border-radius:var(--r-xl); background:linear-gradient(165deg,rgba(255,255,255,.09),rgba(255,255,255,.02)); border:1px solid var(--line-strong); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); box-shadow:var(--shadow-lg),0 0 0 1px rgba(124,111,255,.14),0 0 90px -20px rgba(91,84,232,.5); padding:14px; animation:float 7s ease-in-out infinite; } @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}} .chat-top{ display:flex;align-items:center;gap:11px; padding:6px 6px 14px;border-bottom:1px solid var(--line);margin-bottom:14px; } .chat-avatar{ width:40px;height:40px;border-radius:50%;flex:none; background:var(--grad-accent);display:grid;place-items:center; color:#04231A; } .chat-avatar svg{width:22px;height:22px} .chat-top b{display:block;font-size:15px;font-weight:700;font-family:var(--font-head)} .chat-top small{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--accent)} .chat-top small::before{ content:'';width:6px;height:6px;border-radius:50%;background:var(--accent); box-shadow:0 0 8px var(--accent);animation:pulse 2s ease-in-out infinite; } .chat-badge{ margin-inline-start:auto;font-family:var(--font-mono);font-size:10px;font-weight:700; letter-spacing:.1em;color:var(--brand-glow); background:var(--glass-brand);border:1px solid var(--line-brand); padding:4px 9px;border-radius:var(--r-pill); } .chat-body{display:flex;flex-direction:column;gap:10px;min-height:290px;padding:0 4px} .bubble{ max-width:82%;padding:11px 15px;font-size:14.5px;line-height:1.6; border-radius:var(--r-md);position:relative; opacity:0;transform:translateY(12px) scale(.96); animation:bubbleIn .5s var(--ease) forwards; } @keyframes bubbleIn{to{opacity:1;transform:none}} .bubble.in{ align-self:flex-start; background:rgba(255,255,255,.07); border:1px solid var(--line); border-end-start-radius:5px; } .bubble.out{ align-self:flex-end; background:linear-gradient(135deg,rgba(43,229,155,.19),rgba(15,185,122,.12)); border:1px solid rgba(43,229,155,.3); border-end-end-radius:5px; } .bubble time{ display:block;font-size:10.5px;color:var(--fg-dim); margin-top:4px;font-family:var(--font-mono); } .bubble .quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px} .bubble .quick span{ font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:var(--r-pill); background:var(--glass-brand);border:1px solid var(--line-brand);color:var(--brand-glow); } .typing{ align-self:flex-start;display:flex;gap:4px;padding:14px 16px; background:rgba(255,255,255,.07);border:1px solid var(--line); border-radius:var(--r-md);border-end-start-radius:5px; opacity:0;animation:bubbleIn .4s var(--ease) forwards; } .typing i{ width:6px;height:6px;border-radius:50%;background:var(--fg-dim); animation:typeDot 1.3s ease-in-out infinite; } .typing i:nth-child(2){animation-delay:.18s} .typing i:nth-child(3){animation-delay:.36s} @keyframes typeDot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-5px)}} .chat-foot{ display:flex;align-items:center;gap:10px; margin-top:14px;padding:11px 15px; background:rgba(255,255,255,.04);border:1px solid var(--line); border-radius:var(--r-pill);font-size:13.5px;color:var(--fg-dim); } .chat-foot svg{width:17px;height:17px;color:var(--brand-glow);margin-inline-start:auto} /* Floating stat chips around the mock */ .chat-chip{ position:absolute;z-index:2;width:max-content;white-space:nowrap; display:flex;align-items:center;gap:9px; padding:10px 14px;border-radius:var(--r-md); background:rgba(16,16,38,.9); border:1px solid var(--line-brand); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); box-shadow:var(--shadow-md); animation:float 6s ease-in-out infinite; } .chat-chip svg{width:20px;height:20px;color:var(--accent);flex:none} .chat-chip b{display:block;font-family:var(--font-head);font-size:16px;font-weight:800;line-height:1.2} .chat-chip small{font-size:11.5px;color:var(--fg-dim)} .chip-a{top:-18px;left:100%;transform:translateX(-45%);animation-delay:-2s} .chip-b{bottom:-18px;right:100%;transform:translateX(45%);animation-delay:-4s} @keyframes floatA{0%,100%{transform:translateX(-45%) translateY(0)}50%{transform:translateX(-45%) translateY(-12px)}} @keyframes floatB{0%,100%{transform:translateX(45%) translateY(0)}50%{transform:translateX(45%) translateY(-12px)}} .chip-a{animation-name:floatA} .chip-b{animation-name:floatB} @media (max-width:1180px){.chat-chip{display:none}} /* ---------- 11. LOGO STRIP ---------- */ .strip{padding-block:var(--sp-7);border-block:1px solid var(--line)} .strip p{ text-align:center;font-family:var(--font-mono);font-size:12px; letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim); margin-bottom:var(--sp-5); } .strip-row{ display:flex;flex-wrap:wrap;align-items:center;justify-content:center; gap:var(--sp-5) var(--sp-8); } .strip-item{ display:flex;align-items:center;gap:10px; font-family:var(--font-head);font-weight:700;font-size:17px; color:var(--fg-dim);opacity:.75; transition:opacity var(--t-mid) var(--ease),color var(--t-mid) var(--ease); } .strip-item svg{width:24px;height:24px} .strip-item:hover{opacity:1;color:var(--fg-muted)} /* ---------- 12. STATS ---------- */ .stats{ display:grid;grid-template-columns:repeat(4,1fr);gap:1px; background:var(--line);border:1px solid var(--line); border-radius:var(--r-lg);overflow:hidden; } .stat{ background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.012)); padding:var(--sp-6) var(--sp-5);text-align:center; transition:background var(--t-mid) var(--ease); } .stat:hover{background:linear-gradient(160deg,rgba(124,111,255,.11),rgba(255,255,255,.02))} .stat b{ display:block;font-family:var(--font-head);font-weight:900; font-size:clamp(2.1rem,4vw,3rem);line-height:1; background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent; margin-bottom:8px; } .stat span{font-size:14.5px;color:var(--fg-muted);line-height:1.5;display:block} @media (max-width:768px){.stats{grid-template-columns:repeat(2,1fr)}} /* ---------- 13. BENTO GRID ---------- */ .bento{display:grid;grid-template-columns:repeat(6,1fr);gap:20px} .bento > *{grid-column:span 2} .bento .wide{grid-column:span 3} .bento .full{grid-column:span 6} @media (max-width:900px){ .bento{grid-template-columns:repeat(2,1fr)} .bento > *,.bento .wide{grid-column:span 1} .bento .full{grid-column:span 2} } @media (max-width:560px){ .bento{grid-template-columns:1fr} .bento > *,.bento .wide,.bento .full{grid-column:span 1} } .service-card{display:flex;flex-direction:column;height:100%} .service-card h3{margin-bottom:10px} .service-card p{color:var(--fg-muted);font-size:15.5px;line-height:1.75;margin-bottom:var(--sp-5);flex:1} .service-card .tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:var(--sp-5)} .service-card .tags span{ font-size:12.5px;font-weight:500;padding:5px 11px;border-radius:var(--r-pill); background:var(--glass);border:1px solid var(--line);color:var(--fg-dim); } .badge-official{ position:absolute;inset-block-start:20px;inset-inline-end:20px; font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.1em; padding:5px 10px;border-radius:var(--r-pill); background:rgba(43,229,155,.12);border:1px solid rgba(43,229,155,.35);color:var(--accent); } /* ---------- 14. FEATURE LIST ---------- */ .feat-list{display:grid;gap:var(--sp-4)} .feat{display:flex;gap:15px;align-items:flex-start} .feat-ico{ width:38px;height:38px;flex:none;border-radius:11px; display:grid;place-items:center; background:var(--glass-brand);border:1px solid var(--line-brand);color:var(--brand-glow); } .feat-ico svg{width:18px;height:18px} .feat-ico.mint{background:rgba(43,229,155,.1);border-color:rgba(43,229,155,.3);color:var(--accent)} .feat-ico.warn{background:rgba(255,176,66,.1);border-color:rgba(255,176,66,.3);color:#FFB042} .feat b{display:block;font-family:var(--font-head);font-size:16px;font-weight:700;margin-bottom:3px} .feat p{font-size:14.8px;color:var(--fg-muted);line-height:1.7} .check-list{display:grid;gap:12px} .check-list li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;color:var(--fg-muted);line-height:1.7} .check-list svg{width:20px;height:20px;color:var(--accent);flex:none;margin-top:3px} /* ---------- 15. SPLIT SECTION ---------- */ .split{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8);align-items:center} /* grid/flex items default to min-width:auto and refuse to shrink below their content */ .split > *,.bento > *,.quotes > *,.plans > *,.steps > *{min-width:0} .split.narrow{gap:var(--sp-7)} @media (max-width:900px){.split{grid-template-columns:1fr;gap:var(--sp-6)}} /* ---------- 16. PROCESS ---------- */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative} .steps::before{ content:'';position:absolute;inset-block-start:34px;inset-inline:12%;height:2px; background:linear-gradient(90deg,transparent,var(--line-brand) 15%,var(--line-brand) 85%,transparent); } .step{position:relative;text-align:center;padding-top:0} .step-num{ width:68px;height:68px;margin:0 auto var(--sp-5); display:grid;place-items:center;border-radius:50%; background:var(--bg-elev);border:1px solid var(--line-brand); font-family:var(--font-head);font-weight:900;font-size:24px; color:var(--brand-glow); box-shadow:0 0 0 6px rgba(10,10,24,1),0 0 40px -8px rgba(91,84,232,.6); position:relative;z-index:1; transition:transform var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease); } .step:hover .step-num{ transform:translateY(-5px) scale(1.06); background:var(--grad-brand);color:#fff; box-shadow:0 0 0 6px rgba(10,10,24,1),0 0 55px -6px rgba(91,84,232,.95); } .step h4{margin-bottom:9px;font-size:18px} .step p{font-size:14.8px;color:var(--fg-muted);line-height:1.7} @media (max-width:900px){ .steps{grid-template-columns:repeat(2,1fr)} .steps::before{display:none} } @media (max-width:520px){.steps{grid-template-columns:1fr}} /* ---------- 17. TESTIMONIALS ---------- */ .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} @media (max-width:900px){.quotes{grid-template-columns:1fr}} .quote{display:flex;flex-direction:column;gap:var(--sp-5);height:100%} .quote-mark{ display:block;font-family:var(--font-head);font-size:76px;font-weight:900; line-height:.55;color:var(--brand-bright);opacity:.28;margin-top:10px; } .quote p{font-size:16px;line-height:1.85;color:var(--fg-muted);flex:1} .quote-by{display:flex;align-items:center;gap:13px;padding-top:var(--sp-4);border-top:1px solid var(--line)} .avatar{ width:46px;height:46px;border-radius:50%;flex:none; display:grid;place-items:center; font-family:var(--font-head);font-weight:800;font-size:17px;color:#fff; background:var(--grad-brand); } .quote-by b{display:block;font-size:15px;font-weight:700;font-family:var(--font-head)} .quote-by small{font-size:13px;color:var(--fg-dim)} .stars{display:flex;gap:2px;margin-bottom:4px} .stars svg{width:15px;height:15px;color:#FFB042} /* ---------- 18. PRICING ---------- */ .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch} @media (max-width:900px){.plans{grid-template-columns:1fr;max-width:460px;margin-inline:auto}} .plan{display:flex;flex-direction:column;height:100%;position:relative;overflow:visible} .plan.featured{ border-color:var(--line-brand); background:linear-gradient(165deg,rgba(124,111,255,.14),rgba(255,255,255,.025)); box-shadow:var(--glow-brand); } .plan.featured::before{opacity:1} .plan-tag{ position:absolute;inset-block-start:-13px;inset-inline-start:50%;transform:translateX(50%); font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.1em; padding:6px 15px;border-radius:var(--r-pill); background:var(--grad-brand);color:#fff;white-space:nowrap; box-shadow:0 8px 22px -6px rgba(91,84,232,.8); } .plan h3{margin-bottom:6px} .plan > p{font-size:14.5px;color:var(--fg-dim);margin-bottom:var(--sp-5)} .price{display:flex;align-items:baseline;gap:8px;margin-bottom:var(--sp-5);padding-bottom:var(--sp-5);border-bottom:1px solid var(--line)} .price b{font-family:var(--font-head);font-size:2.6rem;font-weight:900;line-height:1;color:var(--fg)} .price span{font-size:14.5px;color:var(--fg-dim)} .plan .check-list{flex:1;margin-bottom:var(--sp-6)} .plan .check-list li{font-size:15px} /* ---------- 19. FAQ ---------- */ .faq{max-width:820px;margin-inline:auto;display:grid;gap:12px} .qa{ border:1px solid var(--line);border-radius:var(--r-md); background:var(--glass);overflow:hidden; transition:border-color var(--t-mid) var(--ease),background var(--t-mid) var(--ease); } .qa.open{border-color:var(--line-brand);background:var(--glass-brand)} .qa > button{ width:100%;display:flex;align-items:center;gap:16px; padding:20px 24px;text-align:start; font-family:var(--font-head);font-size:17px;font-weight:600;color:var(--fg); min-height:56px; } .qa > button:hover{color:var(--brand-glow)} .qa-ico{ margin-inline-start:auto;width:30px;height:30px;flex:none; display:grid;place-items:center;border-radius:9px; background:var(--glass);border:1px solid var(--line);color:var(--brand-glow); transition:transform var(--t-mid) var(--ease),background var(--t-mid) var(--ease); } .qa-ico svg{width:15px;height:15px} .qa.open .qa-ico{transform:rotate(45deg);background:var(--grad-brand);color:#fff;border-color:transparent} .qa-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows 380ms var(--ease)} .qa.open .qa-body{grid-template-rows:1fr} .qa-body > div{overflow:hidden} .qa-body p{padding:0 24px 22px;color:var(--fg-muted);font-size:15.5px;line-height:1.85} /* ---------- 20. CTA BAND ---------- */ .cta-band{ position:relative;overflow:hidden; border-radius:var(--r-xl); padding:clamp(40px,6vw,72px); text-align:center; background:linear-gradient(135deg,rgba(57,51,195,.4),rgba(124,111,255,.18) 55%,rgba(15,185,122,.14)); border:1px solid var(--line-brand); box-shadow:var(--shadow-lg); } .cta-band::before{ content:'';position:absolute;inset:0; background:radial-gradient(circle at 50% 0%,rgba(124,111,255,.35),transparent 62%); pointer-events:none; } .cta-band > *{position:relative;z-index:1} .cta-band h2{margin-bottom:var(--sp-4);max-width:20ch;margin-inline:auto} .cta-band p{color:var(--fg-muted);max-width:56ch;margin:0 auto var(--sp-6);font-size:17px;line-height:1.8} .cta-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center} /* ---------- 21. FORMS ---------- */ .form{display:grid;gap:var(--sp-5)} .field{display:grid;gap:8px} .field label{font-size:14.5px;font-weight:600;color:var(--fg-muted);font-family:var(--font-head)} .field label .req{color:var(--accent)} .field input,.field textarea,.field select{ width:100%;padding:14px 17px; background:rgba(255,255,255,.04); border:1px solid var(--line-strong); border-radius:var(--r-md); font-size:16px;color:var(--fg); transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease); min-height:52px; } .field textarea{min-height:130px;resize:vertical;line-height:1.7} .field select{cursor:pointer;appearance:none;background-image:none} .field input::placeholder,.field textarea::placeholder{color:var(--fg-dim);opacity:.7} .field input:hover,.field textarea:hover,.field select:hover{border-color:rgba(255,255,255,.26)} /* ⚠️ בלי outline:none. הוא מחק את חיווי הפוקוס למשתמשי מקלדת (WCAG 2.4.7). הסגנון המותאם נשאר, וה-:focus-visible הגלובלי (שורה ~104) מוסיף מסגרת נראית. */ .field input:focus,.field textarea:focus,.field select:focus{ border-color:var(--brand-bright); background:rgba(124,111,255,.06); box-shadow:0 0 0 4px rgba(124,111,255,.14); } .field .err{font-size:13px;color:#FF7B7B;display:none;align-items:center;gap:6px} .field .err svg{width:14px;height:14px;flex:none} .field.invalid input,.field.invalid textarea,.field.invalid select{border-color:#FF7B7B;background:rgba(255,123,123,.05)} .field.invalid .err{display:flex} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5)} @media (max-width:640px){.form-row{grid-template-columns:1fr}} .form-note{font-size:13.5px;color:var(--fg-dim);line-height:1.7} .form-ok{ display:none;align-items:center;gap:12px; padding:16px 20px;border-radius:var(--r-md); background:rgba(43,229,155,.1);border:1px solid rgba(43,229,155,.35); color:var(--accent);font-weight:600;font-size:15.5px; } .form-ok svg{width:22px;height:22px;flex:none} .form-ok.show{display:flex} /* ---------- 22. CONTACT CARDS ---------- */ .contact-list{display:grid;gap:14px} .contact-item{ display:flex;align-items:center;gap:16px; padding:18px 20px;border-radius:var(--r-md); background:var(--glass);border:1px solid var(--line); transition:border-color var(--t-mid) var(--ease),transform var(--t-mid) var(--ease),background var(--t-mid) var(--ease); } .contact-item:hover{border-color:var(--line-brand);transform:translateX(-5px);background:var(--glass-brand)} .contact-item .icon-box{margin-bottom:0;width:48px;height:48px} .contact-item .icon-box svg{width:22px;height:22px} .contact-item small{display:block;font-size:12.5px;color:var(--fg-dim);margin-bottom:2px} .contact-item b{font-family:var(--font-head);font-size:17px;font-weight:700;direction:ltr;display:block;text-align:start} .contact-item b.he{direction:rtl} /* ---------- 23. PAGE HERO (inner pages) ---------- */ .page-hero{ padding-block:calc(var(--header-h) + var(--sp-8)) var(--sp-7); text-align:center;position:relative; } .page-hero .lead{max-width:62ch;margin-inline:auto} .crumbs{ display:flex;align-items:center;justify-content:center;gap:9px; font-size:13.5px;color:var(--fg-dim);margin-bottom:var(--sp-5); } .crumbs a:hover{color:var(--brand-bright)} .crumbs span{opacity:.45} /* ---------- 24. FOOTER ---------- */ .footer{ position:relative;z-index:1;margin-top:var(--sp-7); border-top:1px solid var(--line); background:linear-gradient(180deg,rgba(16,16,38,.5),rgba(10,10,24,.9)); } .footer-main{ display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:var(--sp-7); padding-block:var(--sp-8); } @media (max-width:900px){.footer-main{grid-template-columns:1fr 1fr;gap:var(--sp-6)}} @media (max-width:520px){.footer-main{grid-template-columns:1fr}} .footer-brand p{font-size:15px;color:var(--fg-muted);line-height:1.8;margin:var(--sp-4) 0 var(--sp-5);max-width:38ch} .footer h5{ font-family:var(--font-mono);font-size:11.5px;font-weight:700; letter-spacing:.16em;text-transform:uppercase;color:var(--brand-glow); margin-bottom:var(--sp-4); } .footer-links{display:grid;gap:11px} .footer-links a{ font-size:15px;color:var(--fg-muted); transition:color var(--t-fast) var(--ease),padding-inline-start var(--t-fast) var(--ease); } .footer-links a:hover{color:var(--brand-bright);padding-inline-start:5px} .footer-links a.ltr{direction:ltr;text-align:right;display:block} .socials{display:flex;gap:10px;margin-top:var(--sp-5)} .socials a{ width:42px;height:42px;border-radius:12px;display:grid;place-items:center; background:var(--glass);border:1px solid var(--line);color:var(--fg-muted); transition:all var(--t-mid) var(--ease); } .socials a svg{width:19px;height:19px} .socials a:hover{background:var(--grad-brand);color:#fff;border-color:transparent;transform:translateY(-3px)} .footer-bottom{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-4); padding-block:var(--sp-5);border-top:1px solid var(--line); font-size:14px;color:var(--fg-dim); } .footer-bottom a:hover{color:var(--brand-bright)} .footer-bottom nav{display:flex;gap:var(--sp-5);flex-wrap:wrap} /* ---------- 25. FLOATING WHATSAPP ---------- */ .fab{ position:fixed;inset-block-end:26px;inset-inline-start:26px;z-index:90; display:flex;align-items:center;gap:12px; padding:14px 22px 14px 16px;border-radius:var(--r-pill); background:var(--grad-accent);color:#04231A; font-family:var(--font-head);font-weight:800;font-size:15.5px; box-shadow:0 14px 40px -8px rgba(15,185,122,.7); transition:transform var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease); } .fab svg{width:24px;height:24px;flex:none} .fab::before{ content:'';position:absolute;inset:0;border-radius:inherit; border:2px solid var(--accent); animation:ring 2.6s var(--ease-soft) infinite; } @keyframes ring{0%{opacity:.75;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.28)}} .fab:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 20px 55px -8px rgba(15,185,122,.9)} @media (max-width:640px){ .fab{inset-block-end:18px;inset-inline-start:18px;padding:14px;gap:0} .fab span{display:none} .fab::before{animation-duration:2.6s} } /* ---------- 26. BACK TO TOP ---------- */ .to-top{ position:fixed;inset-block-end:26px;inset-inline-end:26px;z-index:90; width:48px;height:48px;border-radius:14px;display:grid;place-items:center; background:rgba(16,16,38,.9);border:1px solid var(--line-strong);color:var(--fg-muted); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); opacity:0;visibility:hidden;transform:translateY(12px); transition:all var(--t-mid) var(--ease); } .to-top svg{width:20px;height:20px} .to-top.show{opacity:1;visibility:visible;transform:none} .to-top:hover{background:var(--grad-brand);color:#fff;border-color:transparent;transform:translateY(-3px)} @media (max-width:640px){.to-top{inset-block-end:18px;inset-inline-end:18px;width:44px;height:44px}} /* ---------- 27. UTILITIES ---------- */ .center{text-align:center} .mb-0{margin-bottom:0} .mt-6{margin-top:var(--sp-6)} .mt-7{margin-top:var(--sp-7)} .divider{height:1px;background:var(--line);border:0;margin-block:var(--sp-7)} .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; } .skip-link{ position:absolute;inset-block-start:-60px;inset-inline-start:16px;z-index:200; background:var(--brand);color:#fff;padding:12px 22px;border-radius:0 0 12px 12px; font-weight:700;transition:top var(--t-mid) var(--ease); } .skip-link:focus{inset-block-start:0} .ltr{direction:ltr;display:inline-block} .nowrap{white-space:nowrap} /* ---------- 28. DATA / COMPARISON TABLE ---------- */ .data-table{ width:100%;border-collapse:collapse;min-width:820px;font-size:15px; } .data-table thead tr{border-bottom:1px solid var(--line-strong)} .data-table th{ padding:20px 16px;text-align:start; font-family:var(--font-head);font-size:15px;font-weight:700;color:var(--fg); } .data-table thead th:first-child{ padding-inline-start:24px;font-size:13.5px;font-weight:600;color:var(--fg-dim); } .data-table thead th.hi{color:var(--brand-glow)} .data-table thead th.hi::after{ content:'';display:block;height:2px;width:38px;margin-top:7px; background:var(--grad-brand);border-radius:2px; } .data-table tbody tr{border-bottom:1px solid var(--line);transition:background var(--t-fast) var(--ease)} .data-table tbody tr:last-child{border-bottom:0} .data-table tbody tr:hover{background:rgba(124,111,255,.06)} .data-table td,.data-table tbody th{padding:15px 16px;vertical-align:middle} .data-table tbody th{ text-align:start;padding-inline-start:24px; font-family:var(--font-body);font-size:15px;font-weight:600;color:var(--fg); } .data-table td.ok svg{width:20px;height:20px;color:var(--accent)} .data-table td.partial{color:#FFB042;font-size:14px;font-weight:600} .data-table td.no{color:var(--fg-dim);font-size:18px;font-weight:700} .data-table td.muted{color:var(--fg-muted);font-weight:600} /* ---------- 29. FOUR-UP PRICING ---------- */ .plans.four{grid-template-columns:repeat(4,1fr);gap:16px} .plans.four .card{padding:var(--sp-5)} .plans.four .price{flex-direction:column;align-items:stretch;gap:5px} .plans.four .price b{font-size:2.1rem} .plans.four .price span{font-size:13px;line-height:1.5} .plans.four .check-list li{font-size:14.2px;gap:9px} .plans.four .check-list svg{width:17px;height:17px;margin-top:4px} .plans.four h3{font-size:1.3rem} @media (max-width:1080px){ .plans.four{grid-template-columns:repeat(2,1fr);max-width:none} } @media (max-width:720px){ .plans.four{grid-template-columns:1fr;max-width:440px;margin-inline:auto} } /* ---------- 30. TESTIMONIALS: 5-up + screenshot proof ---------- */ .quotes.five{grid-template-columns:repeat(3,1fr)} @media (max-width:1000px){.quotes.five{grid-template-columns:repeat(2,1fr)}} @media (max-width:700px){.quotes.five{grid-template-columns:1fr}} .quote-by b{font-size:15px} .quote-empty{ border-style:dashed;border-color:rgba(255,176,66,.4); background:linear-gradient(160deg,rgba(255,176,66,.06),rgba(255,255,255,.02)); } .quote-empty p{color:#FFB042;font-family:var(--font-mono);font-size:14px;line-height:1.8} .quote-proof{ display:flex;align-items:center;gap:11px;width:100%; margin-top:16px;padding:9px 12px; border:1px solid var(--line);border-radius:var(--r-md); background:var(--glass); font-size:13.5px;font-weight:600;color:var(--fg-dim); text-align:start;cursor:pointer;min-height:52px; transition:border-color var(--t-mid) var(--ease),color var(--t-mid) var(--ease),background var(--t-mid) var(--ease); } .quote-proof img{ width:34px;height:34px;border-radius:9px;flex:none; object-fit:cover;object-position:top center; border:1px solid var(--line-strong); } .quote-proof svg{width:15px;height:15px;margin-inline-start:auto;flex:none;transform:scaleX(-1)} .quote-proof:hover{border-color:var(--line-brand);color:var(--brand-glow);background:var(--glass-brand)} /* ---------- 31. LIGHTBOX ---------- */ .lightbox{ position:fixed;inset:0;z-index:200; display:flex;align-items:center;justify-content:center; padding:28px;background:rgba(6,6,16,.93); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); opacity:0;visibility:hidden; transition:opacity var(--t-mid) var(--ease),visibility var(--t-mid); } .lightbox.open{opacity:1;visibility:visible} .lightbox figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:16px;max-height:100%} .lightbox img{ max-width:min(520px,92vw);max-height:78vh;width:auto; border-radius:var(--r-lg);border:1px solid var(--line-strong); box-shadow:var(--shadow-lg);background:var(--bg-elev); } .lightbox figcaption{ font-family:var(--font-head);font-size:15px;font-weight:600;color:var(--fg-muted); text-align:center; } .lightbox-close{ position:absolute;inset-block-start:22px;inset-inline-end:22px; width:48px;height:48px;border-radius:14px;display:grid;place-items:center; background:var(--glass);border:1px solid var(--line-strong);color:var(--fg); transition:all var(--t-mid) var(--ease); } .lightbox-close svg{width:20px;height:20px} .lightbox-close:hover{background:var(--grad-brand);border-color:transparent;transform:rotate(90deg)} body.lb-open{overflow:hidden} /* ============================================================ 32. WHATSAPP CAPABILITY MOCKUPS (advantages page) ============================================================ */ .wa-mock{ position:relative;max-width:min(400px,100%);margin-inline:auto; border-radius:var(--r-xl);padding:14px; background:linear-gradient(165deg,rgba(255,255,255,.085),rgba(255,255,255,.02)); border:1px solid var(--line-strong); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); box-shadow:var(--shadow-lg),0 0 0 1px rgba(124,111,255,.13),0 0 80px -24px rgba(91,84,232,.45); } .wa-mock.mint{box-shadow:var(--shadow-lg),0 0 0 1px rgba(43,229,155,.15),0 0 80px -24px rgba(15,185,122,.4)} .wa-head{ display:flex;align-items:center;gap:11px; padding:4px 4px 13px;border-bottom:1px solid var(--line);margin-bottom:14px; } .wa-ico{ width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center; background:var(--glass-brand);border:1px solid var(--line-brand);color:var(--brand-glow); } .wa-ico.mint{background:rgba(43,229,155,.1);border-color:rgba(43,229,155,.3);color:var(--accent)} .wa-ico svg{width:21px;height:21px} .wa-head b{display:block;font-family:var(--font-head);font-size:15px;font-weight:700;line-height:1.3} .wa-head small{font-size:12px;color:var(--fg-dim)} .wa-tag{ margin-inline-start:auto;font-family:var(--font-mono);font-size:10px;font-weight:700; letter-spacing:.09em;padding:4px 9px;border-radius:var(--r-pill); background:var(--glass-brand);border:1px solid var(--line-brand);color:var(--brand-glow); } .wa-tag.mint{background:rgba(43,229,155,.11);border-color:rgba(43,229,155,.32);color:var(--accent)} /* message bubble that carries interactive buttons */ .wa-msg{ background:rgba(255,255,255,.07);border:1px solid var(--line); border-radius:var(--r-md);border-end-start-radius:5px; overflow:hidden;max-width:96%; } .wa-msg-body{padding:13px 15px;font-size:14.5px;line-height:1.65} .wa-msg-body strong{display:block;font-family:var(--font-head);font-weight:700;margin-bottom:5px} .wa-msg-body time{ display:block;font-family:var(--font-mono);font-size:10.5px;color:var(--fg-dim);margin-top:8px; } .wa-btns{display:grid} .wa-btn{ display:flex;align-items:center;justify-content:center;gap:8px; padding:11px 12px;border-top:1px solid var(--line); font-size:14px;font-weight:600;color:var(--brand-glow); transition:background var(--t-fast) var(--ease); } .wa-btn svg{width:15px;height:15px} .wa-btn:hover{background:var(--glass-brand)} /* ---------- 3D ring carousel (auto-rotating, any content type) ---------- */ .carousel3d{ position:relative;height:250px; perspective:860px;perspective-origin:50% 44%; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent); mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent); } /* spotlight: whatever card swings to the front reads as lit */ .carousel3d::before{ content:'';position:absolute;inset-inline-start:50%;inset-block-start:6%; width:290px;height:230px;transform:translateX(-50%); background:radial-gradient(ellipse at center,rgba(124,111,255,.30),transparent 68%); pointer-events:none; } /* soft floor under the ring */ .carousel3d::after{ content:'';position:absolute;inset-inline-start:50%;inset-block-end:14px; width:250px;height:26px;transform:translateX(-50%); background:radial-gradient(ellipse at center,rgba(0,0,0,.62),transparent 72%); pointer-events:none; } .c3d-stage{ position:absolute;inset:0; transform-style:preserve-3d; animation:c3dspin 30s linear infinite; } @keyframes c3dspin{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}} .carousel3d:hover .c3d-stage{animation-play-state:paused} .c3d-card{ position:absolute;inset-block-start:10px;inset-inline-start:50%; width:142px;margin-inline-start:-71px; background:linear-gradient(170deg,rgba(255,255,255,.10),rgba(255,255,255,.035)); border:1px solid var(--line-strong); border-radius:18px;overflow:hidden; backface-visibility:hidden;-webkit-backface-visibility:hidden; transform:rotateY(calc(var(--i) * 60deg)) translateZ(152px); box-shadow:0 18px 40px -14px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.04) inset; } .c3d-img{ position:relative;height:86px;display:grid;place-items:center; background:linear-gradient(135deg,var(--c1),var(--c2)); color:#fff; } .c3d-img::after{ /* glossy sweep */ content:'';position:absolute;inset:0; background:linear-gradient(115deg,rgba(255,255,255,.34) 0%,transparent 46%); } .c3d-img svg{width:32px;height:32px;position:relative;z-index:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))} .c3d-chip{ position:absolute;inset-block-start:8px;inset-inline-start:8px;z-index:2; font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.08em; padding:3px 8px;border-radius:99px; background:rgba(10,10,24,.6);color:#fff; backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); } .c3d-body{padding:10px 12px 11px} /* fixed two-line title + single-line meta keeps every card the same height */ .c3d-body b{ font-family:var(--font-head);font-size:13px;font-weight:700;line-height:1.32;color:var(--fg); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden;min-height:2.64em; } .c3d-body span{ display:block;font-size:11.5px;color:var(--fg-dim);margin-top:5px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .c3d-body span i{font-style:normal;color:var(--accent);font-weight:700;font-size:12.5px} .c3d-btn{ display:block;text-align:center;padding:9px; border-top:1px solid var(--line); font-size:12px;font-weight:700; color:var(--brand-glow);background:rgba(124,111,255,.09); } .c3d-hint{ display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap; margin-top:6px;font-size:12px;color:var(--fg-dim);font-family:var(--font-mono); } .c3d-hint svg{width:13px;height:13px} @media (max-width:480px){ .carousel3d{height:228px;perspective:660px} .carousel3d::before{width:220px} .c3d-card{width:124px;margin-inline-start:-62px;transform:rotateY(calc(var(--i) * 60deg)) translateZ(132px)} .c3d-body b{font-size:12px} .c3d-body span{font-size:10.5px} } @media (prefers-reduced-motion:reduce){ .c3d-stage{animation:none} } /* bulk-campaign panel */ .camp-row{ display:flex;align-items:center;gap:11px; padding:9px 11px;border-radius:11px; background:rgba(255,255,255,.04);border:1px solid var(--line); font-size:13.5px;margin-bottom:7px; } .camp-row .who{display:flex;align-items:center;gap:9px;min-width:0} .camp-row .av{ width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center; background:var(--grad-brand);color:#fff;font-size:12px;font-weight:800;font-family:var(--font-head); } .camp-row .st{ margin-inline-start:auto;display:flex;align-items:center;gap:5px;flex:none; font-size:12px;font-weight:600;color:var(--accent); } .camp-row .st svg{width:14px;height:14px} .camp-bar{ height:7px;border-radius:99px;background:rgba(255,255,255,.07); overflow:hidden;margin:14px 0 8px; } .camp-bar i{display:block;height:100%;width:82%;border-radius:99px;background:var(--grad-accent)} .camp-meta{display:flex;justify-content:space-between;font-size:12.5px;color:var(--fg-dim);font-family:var(--font-mono)} /* big numbered feature blocks */ .feat-num{ display:inline-flex;align-items:center;justify-content:center; width:42px;height:42px;border-radius:13px;flex:none; font-family:var(--font-head);font-weight:900;font-size:19px;color:var(--brand-glow); background:var(--glass-brand);border:1px solid var(--line-brand); margin-bottom:var(--sp-4); } .blocked{ display:flex;align-items:flex-start;gap:11px; margin-top:var(--sp-5);padding:14px 16px;border-radius:var(--r-md); background:rgba(255,123,123,.06);border:1px solid rgba(255,123,123,.24); font-size:14.5px;line-height:1.7;color:var(--fg-muted); } .blocked svg{width:19px;height:19px;color:#FF9E7B;flex:none;margin-top:2px} .blocked b{color:#FF9E7B;font-weight:700} /* ---------- 32. INTEGRATIONS — logo marquee ---------- */ .integrations{position:relative;overflow:hidden} .integrations .section-head{margin-bottom:var(--sp-5)} /* "אפליקציה רשמית ב-Make" highlight */ .make-note{ display:flex;align-items:center;gap:14px; max-width:660px;margin:0 auto var(--sp-7); padding:14px 18px;border-radius:var(--r-lg); background:var(--glass-brand);border:1px solid var(--line-brand); box-shadow:var(--shadow-sm); } .make-note .make-ico{ display:inline-flex;align-items:center;justify-content:center; width:42px;height:42px;border-radius:12px;flex:none; background:rgba(168,85,247,.14);border:1px solid rgba(168,85,247,.34); color:#C99BFF; } .make-note .make-ico svg{width:22px;height:22px;fill:currentColor} .make-note p{font-size:14.5px;line-height:1.65;color:var(--fg-muted);margin:0} .make-note b{color:var(--fg);font-weight:700} /* marquee */ .logo-marquee{ direction:ltr; display:flex;flex-direction:column;gap:16px; padding-block:4px; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%); } .logo-row{ display:flex;width:max-content; will-change:transform; animation:logo-scroll 48s linear infinite; } .logo-row.rev{animation-duration:60s;animation-direction:reverse} .logo-marquee:hover .logo-row, .logo-marquee:focus-within .logo-row{animation-play-state:paused} @keyframes logo-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-25%,0,0)}} .logo-tile{ flex:none;width:134px;margin-inline-end:16px; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px; padding:19px 10px 16px; border-radius:var(--r-lg); background:var(--glass);border:1px solid var(--line); transition:transform var(--t-mid) var(--ease),border-color var(--t-mid) var(--ease), background var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease); } .logo-tile .lg{width:34px;height:34px;fill:currentColor;color:var(--fg-muted);transition:color var(--t-mid) var(--ease)} .logo-tile span{ font-family:var(--font-head);font-weight:600;font-size:13px; color:var(--fg-dim);white-space:nowrap; transition:color var(--t-mid) var(--ease); } .logo-tile:hover{ transform:translateY(-4px); border-color:var(--line-strong); border-color:color-mix(in srgb,var(--b) 46%,transparent); background:color-mix(in srgb,var(--b) 9%,var(--glass)); box-shadow:0 16px 40px -16px color-mix(in srgb,var(--b) 70%,transparent); } .logo-tile:hover .lg{color:var(--b)} .logo-tile:hover span{color:var(--fg)} .integrations-foot{ text-align:center;margin-top:var(--sp-7); font-size:14.5px;color:var(--fg-dim); } .integrations-foot a{color:var(--brand-glow);font-weight:600} @media (max-width:640px){ .logo-tile{width:112px;padding:15px 8px 13px;margin-inline-end:12px} .logo-tile .lg{width:28px;height:28px} .logo-tile span{font-size:12px} .make-note{flex-direction:column;text-align:center;gap:10px} } @media (prefers-reduced-motion:reduce){ .logo-marquee{overflow-x:auto;-webkit-overflow-scrolling:touch} .logo-row{animation:none !important;transform:none !important} } .blob-layer{position:absolute;inset:0} /* ---------- 33. SCROLL-DRIVEN FX (פיילוט: דף הבית בלבד, body.scroll-fx) ---------- */ /* אנימציות גלילה נייטיב של CSS — בלי GSAP ובלי שום ספרייה. רצות על ה-compositor ולא על ה-main thread, ולכן הן לא יכולות לפגוע ב-INP. שלוש שכבות הגנה: 1. @supports — דפדפן בלי animation-timeline מקבל את ה-reveal הקיים של main.js, בלי שינוי. 2. prefers-reduced-motion — מי שביקש פחות תנועה לא מקבל כלום מכאן. 3. .scroll-fx — חל רק על עמוד שהוסיפו לו את המחלקה ב-. ⚠️ ההירו מוחרג בכוונה: ל-view() אין היסטוריה מתחת ל-scroll 0, ואלמנט שכבר גלוי בטעינה עלול להיתקע במצב ביניים. שם main.js ממשיך לנהל. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { /* --- 1. פס התקדמות גלילה בהדר. RTL: מתמלא מימין לשמאל. --- */ .scroll-fx .header::after{ content:''; position:absolute; inset-block-end:-1px; inset-inline:0; height:2px; transform-origin:right center; transform:scaleX(0); background:linear-gradient(to left,var(--brand-bright),var(--accent)); animation:sfx-progress linear both; animation-timeline:scroll(root block); } /* --- 2. reveal שנצמד למיקום הגלילה במקום לירות פעם אחת --- */ /* :where() תורם אפס ספציפיות, ולכן הכללים שמתחת (בנטו, section-head) גוברים על הבסיס הזה במקום להפסיד לו. בלי זה — הכיווניות וה-stagger לא נכנסים. */ .scroll-fx [data-reveal]:not(:where(.hero [data-reveal])){ animation:sfx-rise linear both; animation-timeline:view(); animation-range:entry 4% cover 26%; } /* --- 3. כיווניות: כרטיסי בנטו נכנסים לסירוגין מימין ומשמאל --- */ .scroll-fx .bento > [data-reveal]:nth-child(odd){ animation-name:sfx-from-start } .scroll-fx .bento > [data-reveal]:nth-child(even){ animation-name:sfx-from-end } /* --- 4. stagger לפי מיקום בגריד: כרטיסים באותה שורה לא נכנסים ביחד --- */ .scroll-fx .bento > [data-reveal]:nth-child(3n+2){ animation-range:entry 10% cover 30% } .scroll-fx .bento > [data-reveal]:nth-child(3n+3){ animation-range:entry 16% cover 34% } /* --- 5. כותרת הסקשן עולה קצת יותר לאט, כדי להוביל את העין --- */ .scroll-fx .section-head[data-reveal], .scroll-fx .section-head > [data-reveal]{ animation-range:entry 2% cover 34% } /* --- 6. פרלקסה על שכבות הרקע הדקורטיביות בלבד --- */ /* ה-.blob כבר מריץ @keyframes drift על transform, ושתי אנימציות לא יכולות לכתוב לאותו transform — לכן הפרלקסה יושבת על עטיפה נפרדת. */ .scroll-fx .blob-layer{ position:absolute; inset:0; animation:sfx-drift-slow linear both; animation-timeline:scroll(root block); } .scroll-fx .blob-layer:nth-child(2){ animation-name:sfx-drift-mid } .scroll-fx .blob-layer:nth-child(3){ animation-name:sfx-drift-fast } }} @keyframes sfx-progress{ to{ transform:scaleX(1) } } @keyframes sfx-rise{ from{ opacity:0; transform:translate3d(0,26px,0) } to { opacity:1; transform:none } } @keyframes sfx-from-start{ from{ opacity:0; transform:translate3d(20px,18px,0) scale(.965) } to { opacity:1; transform:none } } @keyframes sfx-from-end{ from{ opacity:0; transform:translate3d(-20px,18px,0) scale(.965) } to { opacity:1; transform:none } } /* דלתא קטנה (yPercent 4-10) — מספיק לעומק, לא מספיק כדי להסיח */ @keyframes sfx-drift-slow{ to{ transform:translate3d(0,-4%,0) } } @keyframes sfx-drift-mid { to{ transform:translate3d(0,-7%,0) } } @keyframes sfx-drift-fast{ to{ transform:translate3d(0,-11%,0) } } /* ============================================================ 34. נגישות — תפריט התאמות (ת"י 5568 / WCAG 2.0 AA) ------------------------------------------------------------ מימוש עצמאי, בלי סקריפט צד-שלישי: אין 100KB+ נוספים, אין main thread חסום, ואין העברת נתוני גולשים לצד ג'. כל ההתאמות נשלטות בתכונות data-* על , ונשמרות ב-localStorage. ⚠️ תפריט התאמות אינו תחליף לנגישות האתר עצמו. ראה accessibility.html. ============================================================ */ /* ---------- 34.1 כפתור הפתיחה ---------- */ .a11y-btn{ position:fixed; inset-block-end:26px; inset-inline-end:26px; z-index:120; width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:var(--grad-brand); color:#fff; border:2px solid rgba(255,255,255,.22); box-shadow:0 12px 34px -8px rgba(91,84,232,.75); transition:transform var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease); } .a11y-btn svg{width:28px;height:28px} .a11y-btn:hover{transform:translateY(-3px) scale(1.05)} @media (max-width:640px){ .a11y-btn{inset-block-end:18px; inset-inline-end:18px; width:46px; height:46px} .a11y-btn svg{width:25px;height:25px} } /* "חזרה למעלה" מתרומם כדי לפנות את הפינה לכפתור הנגישות */ .to-top{inset-block-end:90px} @media (max-width:640px){.to-top{inset-block-end:74px}} /* ---------- 34.2 החלונית ---------- */ .a11y-panel{ position:fixed; inset-block-end:92px; inset-inline-end:26px; z-index:121; width:min(340px,calc(100vw - 36px)); max-height:min(78vh,620px); overflow-y:auto; background:#101026; border:1px solid var(--line-strong); border-radius:20px; box-shadow:0 30px 80px -18px rgba(0,0,0,.85); padding:20px; opacity:0; visibility:hidden; transform:translateY(14px) scale(.97); /* ⚠️ visibility היא תכונה דיסקרטית: בטרנזישן רגיל היא מתהפכת רק ב-50% מהמשך, ולכן focus() על תוכן החלונית נכשל בשקט גם בפריים הבא. הפתרון המקובל: בפתיחה — מיידי (0s), בסגירה — בהשהיה עד סוף האנימציה. */ transition:opacity var(--t-mid) var(--ease),transform var(--t-mid) var(--ease), visibility 0s linear var(--t-mid); } .a11y-panel.open{ opacity:1; visibility:visible; transform:none; transition:opacity var(--t-mid) var(--ease),transform var(--t-mid) var(--ease),visibility 0s; } @media (max-width:640px){.a11y-panel{inset-block-end:76px; inset-inline-end:18px}} .a11y-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px} .a11y-head h2{font-size:1.05rem;font-weight:800;margin:0} .a11y-close{ width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none; border:1px solid var(--line-strong);color:var(--fg-muted); } .a11y-close:hover{background:var(--glass-strong);color:var(--fg)} .a11y-close svg{width:16px;height:16px} .a11y-group{margin-bottom:16px} .a11y-group > h3{ font-family:var(--font-mono);font-size:10.5px;font-weight:700; letter-spacing:.15em;text-transform:uppercase;color:var(--brand-glow); margin-bottom:9px; } .a11y-row{display:grid;grid-template-columns:repeat(3,1fr);gap:7px} .a11y-opts{display:grid;gap:7px} .a11y-opt{ display:flex;align-items:center;gap:10px;width:100%; padding:10px 12px;border-radius:11px; border:1px solid var(--line); background:var(--glass); color:var(--fg-muted); font-size:14px; font-weight:600; text-align:start; min-height:44px; /* יעד מגע 44px */ transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),color var(--t-fast) var(--ease); } .a11y-row .a11y-opt{justify-content:center;padding:10px 6px;font-size:13px} .a11y-opt svg{width:17px;height:17px;flex:none} .a11y-opt:hover{border-color:var(--line-brand);color:var(--fg);background:var(--glass-brand)} .a11y-opt[aria-pressed="true"]{ border-color:var(--brand-bright); background:rgba(124,111,255,.16); color:#fff; } .a11y-opt[aria-pressed="true"]::after{content:'✓';margin-inline-start:auto;font-weight:800;color:var(--accent)} .a11y-row .a11y-opt[aria-pressed="true"]::after{content:none} .a11y-reset{ width:100%;justify-content:center;margin-top:4px; border-color:rgba(255,120,120,.4);color:#FFB9B9; } .a11y-reset:hover{background:rgba(255,90,90,.14);border-color:rgba(255,120,120,.7);color:#fff} .a11y-foot{ margin-top:14px;padding-top:13px;border-top:1px solid var(--line); font-size:12.5px;line-height:1.7;color:var(--fg-dim); } .a11y-foot a{color:var(--brand-glow);text-decoration:underline} /* ============================================================ 34.3 ההתאמות עצמן ============================================================ */ /* --- גודל טקסט. האתר בנוי ב-px, ולכן שינוי font-size בשורש לא ישפיע. zoom כן — והוא לא חל על תפריט הנגישות עצמו, כדי שיישאר שמיש. --- */ html[data-a11y-zoom="1"] :is(.header,.mobile-nav,main,.footer){zoom:1.10} html[data-a11y-zoom="2"] :is(.header,.mobile-nav,main,.footer){zoom:1.22} html[data-a11y-zoom="3"] :is(.header,.mobile-nav,main,.footer){zoom:1.36} /* --- ניגודיות גבוהה: מבטל זכוכית, טשטוש, גרדיאנטים וצללים --- */ html[data-a11y-contrast="high"]{ --bg:#000; --bg-elev:#000; --bg-elev-2:#0A0A0A; --fg:#FFF; --fg-muted:#FFF; --fg-dim:#F0F0F0; --glass:#000; --glass-strong:#0D0D0D; --glass-brand:#0D0D0D; --line:#FFF; --line-strong:#FFF; --line-brand:#FFD400; } html[data-a11y-contrast="high"] body{background:#000} html[data-a11y-contrast="high"] :is(.card,.qa,.a11y-panel,.header,.footer,.plan,.step){ background:#000 !important; border-color:#FFF !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } html[data-a11y-contrast="high"] .ambient{display:none} html[data-a11y-contrast="high"] :is(.grad-text,.eyebrow,.plan-tag){ background:none !important; -webkit-text-fill-color:#FFD400 !important; color:#FFD400 !important; } /* ⚠️ .fab ו-.to-top הם קישור/כפתור צפים שאינם .btn — בלעדיהם הכלל למטה היה צובע את הטקסט שלהם בצהוב על גבי גרדיאנט ירוק. axe לא מודד טקסט מעל גרדיאנט ולכן לא היה תופס את זה. */ html[data-a11y-contrast="high"] a:not(.btn):not(.fab):not(.to-top):not(.a11y-btn){ color:#FFD400 !important; text-decoration:underline !important; } html[data-a11y-contrast="high"] :is(.btn,.fab){ background:#FFD400 !important; color:#000 !important; border:2px solid #FFF !important; box-shadow:none !important; } html[data-a11y-contrast="high"] .fab svg{color:#000 !important} html[data-a11y-contrast="high"] .to-top{ background:#000 !important; color:#FFD400 !important; border:2px solid #FFF !important; } html[data-a11y-contrast="high"] :is(.blob,.a11y-btn,.fab,.to-top){box-shadow:none !important} html[data-a11y-contrast="high"] .a11y-btn{background:#FFD400;color:#000;border-color:#FFF} /* --- גווני אפור --- */ html[data-a11y-contrast="mono"] body{filter:grayscale(1)} /* --- הדגשת קישורים --- */ html[data-a11y-links="on"] a{ text-decoration:underline !important; text-underline-offset:3px !important; outline:1px dashed currentColor; outline-offset:2px; } /* --- גופן קריא: ללא עיטורים, בלי letter-spacing שלילי --- */ html[data-a11y-font="readable"] :is(body,h1,h2,h3,h4,h5,p,a,span,li,button,input,textarea,label,td,th){ font-family:Arial,"Helvetica Neue",Helvetica,sans-serif !important; letter-spacing:normal !important; } /* --- ריווח מוגדל --- */ html[data-a11y-spacing="on"] :is(p,li,td,th,.lead,.muted){ line-height:2.1 !important; letter-spacing:.045em !important; word-spacing:.14em !important; } /* --- עצירת אנימציות. חייב לכסות גם את אפקטי הגלילה מסעיף 33. --- */ html[data-a11y-motion="off"] *, html[data-a11y-motion="off"] *::before, html[data-a11y-motion="off"] *::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; animation-timeline:auto !important; } html[data-a11y-motion="off"] [data-reveal]{opacity:1 !important; transform:none !important} html[data-a11y-motion="off"] .blob{transform:none !important} /* --- סמן גדול --- */ html[data-a11y-cursor="big"],html[data-a11y-cursor="big"] *{ cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M10 4 38 22 25 25 32 40 26 43 19 28 10 36z' fill='%23fff' stroke='%23000' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 4,auto !important; } html[data-a11y-cursor="big"] :is(a,button,[role="button"],input,textarea,select,summary), html[data-a11y-cursor="big"] :is(a,button) *{ cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M18 21V9a3 3 0 0 1 6 0v11h2v-3a3 3 0 0 1 6 0v3h2v-2a3 3 0 0 1 6 0v12c0 6-4 12-11 12h-4c-5 0-8-3-10-8l-4-9a3 3 0 0 1 5-3l2 3z' fill='%23fff' stroke='%23000' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 14 4,pointer !important; } /* --- מדריך קריאה --- */ .a11y-guide{ position:fixed; inset-inline:0; z-index:119; height:46px; pointer-events:none; border-block:2px solid rgba(255,212,0,.95); background:rgba(255,212,0,.10); display:none; } html[data-a11y-guide="on"] .a11y-guide{display:block} /* --- חיווי פוקוס מוגבר בכל מצבי הנגישות --- */ html[data-a11y-contrast="high"] :focus-visible, html[data-a11y-links="on"] :focus-visible{ outline:3px solid #FFD400 !important; outline-offset:3px !important; }