/* ══════════════════════════════════════════════════════ BRANDALE — MONOLITH (WordPress) מונומנט כחול, אות ליים אחת. שיטה: קנבס גרדיאנט קבוע · פונט אחד · צורה מעוגלת אחת (pill) אפס צללים · אפס מילוי לכרטיסים · אפס אקסנט שני. ══════════════════════════════════════════════════════ */ /* ─── פונט הבית ─── */ @font-face{font-family:'FUP';src:url('fonts/fup-light.woff2') format('woff2');font-weight:300;font-display:swap} @font-face{font-family:'FUP';src:url('fonts/fup-regular.woff2') format('woff2');font-weight:400;font-display:swap} @font-face{font-family:'FUP';src:url('fonts/fup-medium.woff2') format('woff2');font-weight:500;font-display:swap} @font-face{font-family:'FUP';src:url('fonts/fup-semibold.woff2') format('woff2');font-weight:600;font-display:swap} @font-face{font-family:'FUP';src:url('fonts/fup-bold.woff2') format('woff2');font-weight:700;font-display:swap} @font-face{font-family:'FUP';src:url('fonts/fup-extrabold.woff2') format('woff2');font-weight:800;font-display:swap} :root{ /* ─── חמישה צבעים. לא יותר. ─── */ --void:#041e47; /* כחול־לילה: אוברליים, טקסט על הליים */ --ash:#d6e4f2; /* גוף הטקסט */ --frost:#ffffff; /* כותרות, קווים */ --graphite:#7ea6cd; /* מטא, זכויות יוצרים */ --signal:#a8dc3f; /* האות היחידה — פעולה בלבד */ /* קנבס: גרדיאנט רדיאלי קבוע. אותו אחד לדף, לטעינה, לתפריט ולכספת. */ --grad:radial-gradient(125% 125% at 46% 44%, #2079c4 0%, #0f61a6 27%, #0a4a89 47%, #063a70 65%, #042a57 82%, #021a3e 100%); --hair:rgba(255,255,255,.20); --hair-soft:rgba(255,255,255,.11); --font:'FUP','Heebo','Assistant',system-ui,-apple-system,sans-serif; --gutter:clamp(20px,8.75vw,126px); --maxw:1400px; --radius-full:9999px; --ease:cubic-bezier(.16,1,.3,1); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} /* overflow-x:hidden ולא clip. ההבדל קריטי: hidden מחשב את הציר השני ל-auto ומשאיר את ה-html מכל גלילה, clip משאיר אותו visible — כלומר הדף נשאר בלי גלילה בכלל. */ html{-webkit-text-size-adjust:100%;background:#021a3e;scroll-behavior:smooth; /* proximity ולא mandatory: הגלילה רציפה והדף רק נמשך בעדינות לסקשן הקרוב. mandatory כפה נחיתה ולכן כל גלגלת הרגישה כקפיצה. */ overflow-x:hidden;scroll-snap-type:y proximity} /* ─── קנבס קבוע. התוכן נגלל מעליו. ─── */ .bg{position:fixed;inset:0;z-index:-1;background:var(--grad);pointer-events:none} body{ background:transparent;color:var(--ash); font-family:var(--font);font-weight:400; /* בלי overflow כאן. ה-html כבר hidden/auto והוא מכל הגלילה היחיד. שני מכלים מתחרים שוברים position:sticky ו-scroll-snap גם יחד. */ -webkit-font-smoothing:antialiased; cursor:none; } body.is-locked{overflow:hidden;height:100vh} img{display:block;max-width:100%} a{color:inherit;text-decoration:none} ul,ol{list-style:none} button,input,textarea{font:inherit;color:inherit;background:none;border:0;cursor:none} ::selection{background:var(--signal);color:var(--void)} .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)} /* מספרים וכתובות לטיניות בתוך הקשר RTL */ .ltr{direction:ltr;unicode-bidi:isolate;text-align:right} /* ══════════ סמן ══════════ */ .cur{ position:fixed;top:0;left:0;width:9px;height:9px;border-radius:var(--radius-full); background:var(--frost);pointer-events:none;z-index:9999; transition:width .45s var(--ease),height .45s var(--ease),background .45s var(--ease); } .cur.is-wide{width:64px;height:64px;background:var(--signal)} @media (hover:none),(pointer:coarse){.cur{display:none}body,button,input,textarea{cursor:auto}} /* ══════════ מסך טעינה ══════════ */ .load{ position:fixed;inset:0;z-index:9000;background:var(--grad); display:flex;align-items:flex-end;justify-content:space-between;gap:22px; padding:var(--gutter); transition:transform 1.1s var(--ease); } .load.is-done{transform:translateY(-101%)} .load__n{ font-size:clamp(56px,13vw,190px);line-height:.96;letter-spacing:-.009em; font-weight:800;color:var(--frost);font-variant-numeric:tabular-nums;direction:ltr; } .load__t{font-size:10px;line-height:1.25;color:var(--graphite);padding-bottom:14px} .load__bar{position:absolute;inset-inline-start:0;bottom:0;height:1px;background:var(--signal);width:0} /* ══════════ הדר ══════════ */ .hdr{ position:fixed;top:0;inset-inline:0;z-index:500;height:72px; display:flex;align-items:center;padding-inline:var(--gutter); } .hdr__in{max-width:var(--maxw);margin-inline:auto;width:100%;display:flex;align-items:center;gap:22px} .brand{display:flex;align-items:center} /* הלוגו מגיע צבעוני — הפילטר מכבה כל גוון והופך אותו ללבן מלא */ .brand img{height:38px;width:auto;filter:brightness(0) invert(1)} .hdr__r{display:flex;align-items:center;gap:29px;margin-inline-start:auto} /* ══════════ ה-pill היחיד ══════════ */ .pill{ position:relative;display:inline-flex;align-items:center;justify-content:center; background:var(--signal);color:var(--void); border-radius:var(--radius-full);padding-inline:30px;height:43px; font-size:15px;font-weight:600;letter-spacing:-.009em; overflow:hidden;isolation:isolate;white-space:nowrap; transition:transform .5s var(--ease); } .pill span{position:relative;z-index:2;transition:color .45s var(--ease)} .pill::before{ content:'';position:absolute;inset:0;z-index:1;background:var(--frost); border-radius:var(--radius-full);transform:translateY(101%); transition:transform .55s var(--ease); } .pill:hover::before{transform:translateY(0)} /* ══════════ המבורגר ══════════ */ .burger{width:29px;height:14px;position:relative;display:block;flex:none} .burger i{position:absolute;inset-inline:0;height:1px;background:var(--frost);transition:transform .5s var(--ease)} .burger i:nth-child(1){top:0} .burger i:nth-child(2){bottom:0} body.is-open .burger i:nth-child(1){transform:translateY(6.5px) rotate(-45deg)} body.is-open .burger i:nth-child(2){transform:translateY(-6.5px) rotate(45deg)} /* ══════════ תפריט מסך מלא ══════════ */ .nav{ position:fixed;inset:0;z-index:400;background:var(--grad); clip-path:inset(0 0 100% 0);transition:clip-path 1s var(--ease); display:flex;flex-direction:column;justify-content:center; padding-inline:var(--gutter);pointer-events:none; } .nav.is-open{clip-path:inset(0 0 0 0);pointer-events:auto} .nav__i{overflow:hidden} .nav__i a{ display:block;color:var(--frost); /* התקרה נגעה כבר ב-985px ולכן בכל דסקטופ הוא היה קבוע. מקדם 4.2vw דוחף את התקרה ל-1714px — פלואידי לאורך כל הטווח האמיתי. */ font-size:clamp(22px,4.2vw,72px);line-height:1.1;letter-spacing:-.012em;font-weight:800; transform:translateY(105%);transition:transform .9s var(--ease),color .4s; } .nav.is-open .nav__i a{transform:translateY(0)} .nav__i a:hover{color:var(--graphite)} .nav__meta{margin-top:65px;display:flex;flex-wrap:wrap;gap:36px;font-size:14px;color:var(--graphite)} .nav__meta a:hover{color:var(--ash)} /* ══════════ HERO ══════════ */ .hero,.sec{ position:relative;min-height:100svh; display:flex;flex-direction:column;justify-content:center; scroll-snap-align:start;scroll-snap-stop:normal; padding-block:96px 56px; } .hero__in{position:relative;z-index:2;width:100%} .eyebrow{font-size:15px;color:var(--ash);margin-bottom:36px;letter-spacing:-.005em} .display{ font-size:clamp(34px,min(6.6vw,10.5vh),120px); line-height:1.06;letter-spacing:-.012em;font-weight:800;color:var(--frost); } .line{overflow:hidden;display:block;padding-block:.02em} .line > span{display:block;transform:translateY(106%);transition:transform 1.2s var(--ease)} .is-in .line > span{transform:translateY(0)} .lead{ max-width:min(34ch,100%);margin-top:36px; font-size:18px;line-height:1.45;color:var(--ash); opacity:0;transform:translateY(22px); transition:opacity 1s var(--ease) .55s,transform 1s var(--ease) .55s; } .is-in .lead{opacity:1;transform:none} .hero__act{margin-top:43px;display:flex;flex-wrap:wrap;align-items:center;gap:30px;opacity:0;transition:opacity 1s var(--ease) .8s} .is-in .hero__act{opacity:1} /* קישור־רפאים */ .ghost{position:relative;display:inline-block;color:var(--frost);font-size:15px} .ghost::after{ content:'';position:absolute;inset-inline:0;bottom:-4px;height:1px;background:currentColor; transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease); } .ghost:hover::after{transform:scaleX(1)} /* חתימת הבית — הקו מצייר את עצמו */ #mark{ position:absolute;z-index:1;pointer-events:none;overflow:visible; inset-inline-end:0;top:50%;transform:translateY(-50%); width:min(46vw,700px);height:auto; opacity:0;transition:opacity 1s var(--ease); } .is-in #mark{opacity:1} #markPath{ fill:none;stroke:var(--frost);stroke-width:1.25px; vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round; } /* הנקודה מלאה בליים — גם בזמן הציור וגם אחרי שנחתה */ #markDot{fill:var(--signal);stroke:none; transition:fill .5s var(--ease)} /* ─── אחרי שהנקודה נחתה במקומה היא ממשיכה לפעום. שתי פעימות צמודות ואז מנוחה — קצב של דופק, לא של הבהוב. ─── */ #markDot{transform-box:fill-box;transform-origin:center} #markDot.is-set{animation:pulse 2.6s var(--ease) .5s infinite} @keyframes pulse{ 0% {transform:scale(1); opacity:1} 7% {transform:scale(1.26);opacity:.9} 14% {transform:scale(1); opacity:1} 21% {transform:scale(1.15);opacity:.94} 30% {transform:scale(1); opacity:1} 100% {transform:scale(1); opacity:1} } .cue{position:absolute;bottom:36px;inset-inline-start:var(--gutter);font-size:10px;color:var(--graphite);z-index:3;display:flex;align-items:center;gap:9px} .cue i{display:block;width:22px;height:1px;background:var(--graphite);animation:cue 2.4s var(--ease) infinite} @keyframes cue{0%{transform:scaleX(0);transform-origin:right}50%{transform:scaleX(1);transform-origin:right}51%{transform:scaleX(1);transform-origin:left}100%{transform:scaleX(0);transform-origin:left}} /* ══════════ מרקי ══════════ */ .marq{overflow:hidden;white-space:nowrap;padding-block:clamp(36px,7vh,86px) 0;margin-top:clamp(36px,7vh,86px);border-top:1px solid var(--hair-soft);direction:ltr} .marq__t{display:inline-flex;gap:72px;animation:slide 34s linear infinite;will-change:transform} .marq__t span{ font-size:clamp(28px,5.2vw,66px);line-height:1.08;letter-spacing:-.012em;font-weight:800; color:var(--frost); } .marq__t span:nth-child(even){color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.34)} @keyframes slide{to{transform:translateX(-50%)}} /* ══════════ סקשנים ══════════ */ .sec__hd{display:flex;justify-content:space-between;align-items:flex-end;gap:36px;margin-bottom:clamp(24px,4.5vh,65px)} .h-lg{font-size:clamp(28px,5.6vw,72px);line-height:1.04;letter-spacing:-.012em;font-weight:800;color:var(--frost)} .h-md{font-size:clamp(24px,4.6vw,58px);line-height:1.12;letter-spacing:-.01em;font-weight:800;color:var(--frost)} .kicker{font-size:10px;color:var(--graphite);margin-bottom:22px} .p-lead{font-size:18px;line-height:1.45;color:var(--ash);max-width:min(44ch,100%)} /* ══════════ תיק עבודות — רשימה נערמת ══════════ */ .chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:clamp(18px,3vh,43px)} .chip{ border-radius:var(--radius-full);border:1px solid var(--hair); padding:7px 22px;font-size:14px;color:var(--graphite); transition:color .4s var(--ease),border-color .4s var(--ease); } .chip:hover{color:var(--ash);border-color:var(--hair)} .chip.is-on{color:var(--frost);border-color:var(--frost)} /* בסקשן התיק הכותרת צנועה יותר — הגובה שייך לעבודות */ #works .h-lg{font-size:clamp(26px,4.6vw,58px)} #works .sec__hd{margin-bottom:clamp(16px,2.4vh,32px)} #works .chips{margin-bottom:clamp(14px,2vh,30px)} /* ── מוזאיקת 12 עמודות. כל שורה מסתכמת ב-12 בדיוק. ── */ .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:9px; /* גובה השורה נגזר ממה שבאמת נשאר בסקשן אחרי הכותרת והצ'יפים, כך ששתי השורות תמיד נכנסות במסך אחד */ grid-auto-rows:clamp(140px,min(26vh,calc((100vh - 420px) / 2)),300px)} .tile--w3{grid-column:span 3} .tile--w4{grid-column:span 4} .tile--w5{grid-column:span 5} .tile--w6{grid-column:span 6} .tile--w7{grid-column:span 7} .tile--w8{grid-column:span 8} .tile--w12{grid-column:span 12} /* האריח הוא מסגרת תוכן, לא משטח: בלי רדיוס, בלי צל, בלי מילוי. */ .tile{position:relative;display:block;overflow:hidden;background:transparent;border-radius:0} .tile img{ width:100%;height:100%;object-fit:cover;object-position:top center; transition:transform .9s var(--ease); } .tile:hover img{transform:scale(1.04)} .tile__cap{ position:absolute;inset-inline:0;bottom:0;padding:16px 18px;z-index:2; background:linear-gradient(to top,rgba(2,20,50,.92),rgba(2,20,50,0)); transform:translateY(12px);opacity:0; transition:transform .55s var(--ease),opacity .55s var(--ease); } .tile:hover .tile__cap{transform:none;opacity:1} .tile__cap h3{font-size:clamp(15px,1.5vw,20px);line-height:1.15;font-weight:800;color:var(--frost)} .tile__cap p{font-size:11px;line-height:1.3;color:var(--ash);margin-top:5px} /* קו הליים — אותה שפה של ה-hover ברשימות */ .tile::after{content:'';position:absolute;inset-inline:0;bottom:0;height:2px;z-index:3; background:var(--signal);transform:scaleX(0);transform-origin:right; transition:transform .6s var(--ease)} .tile:hover::after{transform:scaleX(1)} .tile[hidden]{display:none} /* ── אריח "כל התיק" ── */ .tile--more{display:flex;align-items:center;justify-content:center; border:1px solid var(--hair);transition:border-color .5s var(--ease)} .tile--more:hover{border-color:var(--signal)} .tile--more::after{display:none} .more{display:block;text-align:center;padding:12px} .more b{display:block;font-size:clamp(30px,3.4vw,46px);line-height:1;font-weight:300; color:var(--signal);transition:transform .6s var(--ease)} .tile--more:hover .more b{transform:rotate(90deg)} .more__t{display:block;font-size:clamp(14px,1.4vw,19px);font-weight:800;color:var(--frost);margin-top:10px} .more__n{display:block;font-size:11px;color:var(--graphite);margin-top:5px} /* ══════════ שירותים ══════════ */ .srv__list{border-top:1px solid var(--hair)} .srv{display:grid;grid-template-columns:29px minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start;padding-block:clamp(14px,2.6vh,36px);border-bottom:1px solid var(--hair)} .srv__n{font-size:10px;color:var(--graphite);direction:ltr;padding-top:.6em} .srv__t{font-size:clamp(22px,3.4vw,44px);line-height:1.14;letter-spacing:-.01em;font-weight:800;color:var(--frost)} .srv__d{font-size:15px;line-height:1.5;color:var(--ash)} /* ══════════ תהליך — נעוץ, נגלל אופקית ══════════ הסקשן גבוה כמספר הכרטיסים; בתוכו שכבה דביקה שנשארת במסך בזמן שהמסלול זז הצידה. נקודת עגינה לכל כרטיס, כך שגלגלת אחת = כרטיס אחד. */ .sec--pin{position:relative;height:calc(var(--pin-cards,4) * 100svh); scroll-snap-align:none;scroll-snap-stop:normal} .pin{position:sticky;top:0;height:100svh;overflow:hidden; display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,4vh,48px); padding-block:96px 56px} .pin__snap{position:absolute;inset-inline:0;height:100svh;pointer-events:none; scroll-snap-align:start;scroll-snap-stop:normal} .pin__vp{overflow:hidden;padding-inline:var(--gutter);max-width:var(--maxw); margin-inline:auto;width:100%} .pin__track{display:flex;gap:22px;will-change:transform} .pcard{ flex:0 0 min(86%,1060px); border-top:1px solid var(--hair);padding-top:clamp(18px,3vh,32px); display:flex;flex-direction:column; } .pcard__n{font-size:clamp(40px,6vw,88px);line-height:1;letter-spacing:-.012em;font-weight:800; color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.34); /* ltr לסדר הספרות, right כדי שיישב מעל הכותרת בצד הימני */ direction:ltr;text-align:right} .pcard__t{font-size:clamp(30px,5vw,68px);line-height:1.06;letter-spacing:-.012em; font-weight:800;color:var(--frost);margin-top:clamp(14px,2.4vh,26px)} .pcard__d{font-size:clamp(16px,1.6vw,22px);line-height:1.5;color:var(--ash); margin-top:clamp(12px,2vh,22px);max-width:min(46ch,100%)} .pin__bar{height:1px;background:var(--hair);position:relative} .pin__bar i{position:absolute;inset-block:0;inset-inline-start:0;width:0; background:var(--signal);transition:width .12s linear} @media (max-width:900px){ /* בנייד אין נעיצה — רצועה שמחליקים בה, כמו התיק וההמלצות */ .sec--pin{height:auto;min-height:100svh;scroll-snap-align:start;scroll-snap-stop:normal; display:flex;flex-direction:column;justify-content:center;padding-block:96px 56px} .pin{position:static;height:auto;overflow:visible;padding:0} .pin__snap{display:none} .pin__vp{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none} .pin__vp::-webkit-scrollbar{display:none} .pin__track{transform:none !important;gap:16px} .pcard{flex:0 0 82vw;scroll-snap-align:center} .pin__bar{display:none} } /* ══════════ אודות + מספרים ══════════ */ .about__p{font-size:18px;line-height:1.5;color:var(--ash);max-width:min(56ch,100%);margin-top:clamp(16px,2.6vh,29px)} /* ══════════ המלצות ══════════ */ .voices{overflow:hidden;padding-block:36px;margin-top:clamp(28px,5vh,65px);direction:ltr} .vrow{display:flex;gap:72px;white-space:nowrap;animation:slide 60s linear infinite;will-change:transform} .vrow:hover{animation-play-state:paused} .quote{white-space:normal;width:min(78vw,380px);flex:none;direction:rtl;text-align:right; display:flex;flex-direction:column;align-items:flex-start} .quote blockquote{ font-size:15px;line-height:1.6;color:var(--frost);font-weight:400; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden; } .quote.is-open blockquote{-webkit-line-clamp:unset;overflow:visible} .quote__more{ margin-top:12px;font-size:12px;color:var(--signal);position:relative; padding:0;border:0;background:none; } .quote__more::after{content:'';position:absolute;inset-inline:0;bottom:-2px;height:1px; background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)} .quote__more:hover::after{transform:scaleX(1)} .quote__more[hidden]{display:none} .quote figcaption{font-size:13px;line-height:1.4;color:var(--graphite);margin-top:18px} /* ══════════ יצירת קשר ══════════ */ .cta__links{display:flex;flex-wrap:wrap;gap:36px;margin-top:clamp(24px,4vh,43px)} .cta__links a{display:block} .cta__links b{display:block;font-size:22px;font-weight:700;color:var(--frost);transition:color .4s} .cta__links i{display:block;font-style:normal;font-size:10px;color:var(--graphite);margin-top:7px} .cta__links a:hover b{color:var(--signal)} .form{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:29px;margin-top:clamp(28px,5vh,65px);align-items:end} .fld label{display:block;font-size:10px;color:var(--graphite);margin-bottom:9px} .fld input,.fld textarea{ width:100%;border-bottom:1px solid var(--frost);border-radius:0; color:var(--frost);font-size:17px;padding:7.2px 0;outline:none;resize:none; transition:border-color .4s var(--ease); } .fld input::placeholder,.fld textarea::placeholder{color:var(--graphite)} .fld input:focus,.fld textarea:focus{border-color:var(--signal)} .fld--wide{grid-column:1/-1} .form__foot{grid-column:1/-1;display:flex;align-items:center;gap:22px;flex-wrap:wrap} .form__note{font-size:10px;color:var(--graphite)} /* ══════════ פוטר ══════════ */ #contact{padding-bottom:clamp(90px,14vh,150px)} .ftr{position:absolute;bottom:0;inset-inline:0;margin-inline:auto;padding-block:24px 28px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:22px;font-size:10px;line-height:1.25;color:var(--graphite);border-top:1px solid var(--hair-soft)} .ftr a:hover{color:var(--ash)} .ftr span{direction:rtl} .ftr .ltr{direction:ltr} /* ══════════ כספת — כל התיק ══════════ */ .vault{ position:fixed;inset:0;z-index:600;background:var(--grad); clip-path:inset(0 0 100% 0);transition:clip-path .9s var(--ease); pointer-events:none;display:flex;flex-direction:column; } .vault.is-open{clip-path:inset(0 0 0 0);pointer-events:auto} .vault__hd{display:flex;justify-content:space-between;align-items:flex-start;gap:22px;padding:36px var(--gutter) 22px} .vault__x{width:29px;height:29px;position:relative;flex:none} .vault__x i{position:absolute;top:14px;inset-inline:0;height:1px;background:var(--frost)} .vault__x i:nth-child(1){transform:rotate(45deg)} .vault__x i:nth-child(2){transform:rotate(-45deg)} .vault__body{overflow-y:auto;padding:0 var(--gutter) 72px;flex:1} .vault__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:9px} @media (max-width:1200px){.vault__grid{grid-template-columns:repeat(4,1fr)}} @media (max-width:900px){.vault__grid{grid-template-columns:repeat(3,1fr)}} .vtile{position:relative;display:block;overflow:hidden;aspect-ratio:4/3;background:transparent} .vtile img{width:100%;height:100%;object-fit:cover;object-position:top center; transition:transform .9s var(--ease)} .vtile:hover img{transform:scale(1.04)} .vtile .tile__cap{position:absolute;inset-inline:0;bottom:0;padding:14px 16px;z-index:2; background:linear-gradient(to top,rgba(2,20,50,.92),rgba(2,20,50,0)); transform:translateY(10px);opacity:0; transition:transform .5s var(--ease),opacity .5s var(--ease)} .vtile:hover .tile__cap{transform:none;opacity:1} .vtile .tile__cap h3{font-size:16px;line-height:1.2;font-weight:800;color:var(--frost)} .vtile .tile__cap p{font-size:11px;line-height:1.3;color:var(--ash);margin-top:4px} .vtile::after{content:'';position:absolute;inset-inline:0;bottom:0;height:2px;z-index:3; background:var(--signal);transform:scaleX(0);transform-origin:right; transition:transform .6s var(--ease)} .vtile:hover::after{transform:scaleX(1)} .vtile[hidden]{display:none} .vault__note{font-size:10px;color:var(--graphite);margin-top:36px} @media (max-width:640px){ .vault__grid{grid-template-columns:repeat(2,1fr)} .vtile .tile__cap{opacity:1;transform:none} } /* ══════════ חשיפה בגלילה ══════════ */ .rv{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)} .rv.is-in{opacity:1;transform:none} /* ══════════ רספונסיבי ══════════ */ @media (max-width:900px){ .hdr__tag{display:none} /* בנייד החתימה עולה לראש הסקשן, בזרימה רגילה, והטקסט מתחתיה */ #mark{ position:static;inset:auto;transform:none; width:min(62vw,34vh);height:auto; margin:0 auto clamp(16px,2.6vh,34px); } .is-in #mark{opacity:1} .hero__in{width:100%} .wrow__c{display:none} .sec__hd{flex-direction:column;align-items:flex-start} .srv{grid-template-columns:22px minmax(0,1fr)} .srv__d{grid-column:2} .sec{padding-block:72px} } @media (max-width:520px){ .load__n{font-size:64px} .quote{width:82vw} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important} .line > span,.rv,.lead,.hero__act{transform:none !important;opacity:1 !important} } /* ══════════════════════════════════════════════════════ שכבת וורדפרס כל מה שנדרש כדי שהתבנית תחיה בתוך Hello Elementor ══════════════════════════════════════════════════════ */ /* ─── מכבים את הכותרת והפוטר של התמה. העמוד מביא משלו. ─── */ .page-template-template-landing :where(.site-header,.site-footer,.page-header, .elementor-location-header,.elementor-location-footer){display:none} /* ─── סרגל הניהול דוחף את ההדר למטה ─── */ body.admin-bar .hdr{top:32px} @media (max-width:782px){body.admin-bar .hdr{top:46px}} /* ─── ערכת אלמנטור מחילה Assistant דרך מחלקה על ה-body. בלי הכפייה הזו FUP לא מגיע לכלום. ─── */ body.page-template-template-landing{font-family:var(--font)} body.page-template-template-landing :where(h1,h2,h3,h4,h5,h6,p,a,span,li, blockquote,figcaption,label,button,input,textarea,select){font-family:inherit} /* ─── נעילת גלילה חייבת לבטל את ה-snap, אחרת התפריט קופץ ─── */ body.is-locked{scroll-snap-type:none} /* ══════════ מסך הטעינה — הסוללה ══════════ */ .load{flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:0} .load__batt{width:min(42vw,260px);height:auto;margin-bottom:36px} .batt__shell,.batt__nub{fill:none;stroke:var(--frost);stroke-width:2} .batt__fill{fill:var(--signal)} .load__pct{ font-size:clamp(44px,9vw,96px);line-height:1;letter-spacing:-.012em;font-weight:800; color:var(--frost);font-variant-numeric:tabular-nums;direction:ltr; } .load__pct em{font-style:normal;font-size:.34em;margin-inline-start:.2em;color:var(--graphite)} .load__note{font-size:10px;color:var(--graphite);margin-top:14px} .load__done{ margin-top:36px;display:flex;flex-direction:column;align-items:center;gap:22px; opacity:0;transform:translateY(16px);pointer-events:none; transition:opacity .7s var(--ease),transform .7s var(--ease); } .load.is-full .load__done{opacity:1;transform:none;pointer-events:auto} .load.is-full .load__note{opacity:0} .load__line{font-size:clamp(18px,3vw,27px);font-weight:700;color:var(--frost)} /* ══════════ טופס אלמנטור — קווי שיער על הגרדיאנט ══════════ הקידומת body.page-template-... נדרשת כדי לגבור על סגנונות אלמנטור, שיושבים על .elementor-widget-form ומנצחים סלקטור של מחלקה בודדת. */ body.page-template-template-landing .form .elementor-section, body.page-template-template-landing .form .elementor-container, body.page-template-template-landing .form .elementor-column, body.page-template-template-landing .form .elementor-widget-wrap, body.page-template-template-landing .form .elementor-widget-form{padding:0;margin:0;width:100%} body.page-template-template-landing .form .elementor-form-fields-wrapper{ display:grid;grid-template-columns:repeat(3,1fr);gap:29px;margin:0} body.page-template-template-landing .form .elementor-field-group{width:auto;max-width:none;padding:0;margin:0} body.page-template-template-landing .form .elementor-field-type-textarea, body.page-template-template-landing .form .elementor-field-type-submit, body.page-template-template-landing .form .elementor-field-type-recaptcha_v3, body.page-template-template-landing .form .elementor-field-type-acceptance, body.page-template-template-landing .form .elementor-field-type-checkbox, body.page-template-template-landing .form .e-form__buttons{grid-column:1 / -1} body.page-template-template-landing .form .elementor-field-group > label{display:none} body.page-template-template-landing .form .elementor-field-textual{ width:100%;background:transparent;border:0;border-bottom:1px solid var(--frost);border-radius:0; padding:7.2px 0;min-height:0;font-size:17px;line-height:1.5;color:var(--frost); box-shadow:none;transition:border-color .4s var(--ease)} body.page-template-template-landing .form textarea.elementor-field-textual{min-height:90px;resize:vertical} body.page-template-template-landing .form .elementor-field-textual::placeholder{color:var(--graphite);opacity:1} body.page-template-template-landing .form .elementor-field-textual:focus{ border-color:var(--signal);background:transparent;outline:none;box-shadow:none} body.page-template-template-landing .form .elementor-field-type-acceptance, body.page-template-template-landing .form .elementor-field-type-checkbox{ display:flex;align-items:flex-start;gap:10px;font-size:12px;line-height:1.6;color:var(--graphite)} body.page-template-template-landing .form input[type=checkbox]{ accent-color:var(--signal);width:16px;height:16px;flex:none;margin-top:2px} /* כפתור השליחה הוא ה-pill השני בעמוד — מותר, זו הפעולה של הסקשן */ body.page-template-template-landing .form .e-form__buttons{display:flex;justify-content:flex-start} body.page-template-template-landing .form .elementor-button{ /* אלמנטור כופה flex-basis:100% בעדיפות גבוהה — כאן חייבים לגבור עליו */ width:auto;flex:0 0 auto !important;display:inline-flex;align-items:center;justify-content:center; border-radius:var(--radius-full); background:var(--signal);color:var(--void);border:0; font-size:15px;font-weight:600;letter-spacing:-.009em;padding:0 30px;height:43px;min-height:0; transition:background .4s var(--ease),color .4s var(--ease)} /* אלמנטור כותב CSS ספציפי לכל ווידג'ט. כדי לשלוט בכפתור בכלל צריך !important. ההחלטה: מתאר לבן שמתמלא בליים בהובר — כך נשאר pill מלא אחד בלבד במסך. */ body.page-template-template-landing .form .elementor-button{ background:transparent !important;border:1px solid var(--frost) !important;color:var(--frost) !important} body.page-template-template-landing .form .elementor-button:hover{ background:var(--signal) !important;border-color:var(--signal) !important;color:var(--void) !important} body.page-template-template-landing .form .elementor-message{font-size:15px;color:var(--ash)} body.page-template-template-landing .form .elementor-message.elementor-message-success{color:var(--signal)} @media (max-width:760px){ body.page-template-template-landing .form .elementor-form-fields-wrapper{grid-template-columns:1fr} } /* ══════════ כספת: 75 עבודות ══════════ */ .vault__count{font-size:10px;color:var(--graphite);margin-top:9px} .vault__list a{align-items:baseline} .vault__list em{white-space:nowrap;padding-inline-start:12px} .vault__empty{font-size:15px;color:var(--graphite);padding-block:36px} .vault__list li[hidden]{display:none} /* ─── פוקוס: קו ליים, לא הטבעת הכתומה של הדפדפן ─── */ :focus-visible{outline:2px solid var(--signal);outline-offset:3px} .pill:focus-visible{outline-offset:4px} /* ─── ערכת אלמנטור צובעת כל