/* חוה מזרחי — מערכת עיצוב. נוצר אוטומטית מ-design-base.css + compat.css. אל תערוך את הקובץ הזה ידנית — הוא נדרס בכל build. */ /* ──────────────────────────────────────────────────────────────── Built to the Raven Media standard, measured off gila/yossi/limor: · display headings — Frank Ruhl Libre 700, very large · body — Assistant 400 / 17px / lh 1.75 · buttons — 13px, weight 600, letter-spacing, radius 3px · heroes — full-bleed, cinematic, darkened, centred · a stats band directly beneath the hero · artwork shown bare: no mats, no frames, no boxes The language itself is hers alone: her violet, her canvases, the three bodies, the book. ──────────────────────────────────────────────────────────────── */ :root{ direction:rtl; --plum:#241040; --plum-2:#3A1D66; --violet:#6A3FA8; --violet-lt:#B79BE0; --violet-pale:#F0E9FA; --gold:#C6A15B; /* her frames' warm metal, used sparingly */ --paper:#FFFFFF; --paper-2:#FAF7F2; --paper-3:#F3EDE4; --ink:#1E1A26; --ink-70:rgba(30,26,38,.72); --ink-45:rgba(30,26,38,.46); --line:rgba(30,26,38,.12); --serif:"David Libre","Frank Ruhl Libre",Georgia,serif; --sans:"Assistant","Segoe UI",system-ui,sans-serif; --e:cubic-bezier(.22,.68,.28,1); --max:1280px; --pad:clamp(20px,5vw,60px); --r:16px; --r-sm:12px; --r-xs:8px; --r-btn:12px; --lift:0 2px 4px rgba(30,26,38,.04), 0 14px 34px -18px rgba(30,26,38,.26); --lift2:0 4px 10px rgba(30,26,38,.07), 0 30px 56px -24px rgba(30,26,38,.38); color-scheme:light; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:400; font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased} body.site img{display:block;max-width:100%;height:auto} body.site h1,body.site h2,body.site h3,body.site h4{font-family:var(--serif);font-weight:700;margin:0;line-height:1.08;letter-spacing:-.015em;text-wrap:balance; /* הגודל מגיע מ-.d1–.d4 שעל העטיפה, והצבע מההקשר. בלי שתי ההצהרות האלה אסטרה קובעת אותם. */ font-size:inherit;color:inherit} body.site p{margin:0} body.site a{color:inherit;text-decoration:none} body.site button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} body.site :focus-visible{outline:2px solid var(--violet);outline-offset:3px} body.site .w{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)} /* ── type scale, matched to their sites ── */ body.site .d1{font-size:clamp(40px,6.6vw,88px)} body.site .d2{font-size:clamp(32px,4.4vw,58px)} body.site .d3{font-size:clamp(24px,2.8vw,36px)} body.site .d4{font-size:clamp(19px,1.9vw,23px)} body.site .lede{font-size:clamp(17px,1.32vw,18.5px);line-height:1.8;color:var(--ink-70);max-width:56ch} body.site .eyebrow{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.22em;color:var(--gold);display:block} body.site .eyebrow--v{color:var(--violet)} body.site .cap{font-size:12.5px;color:var(--ink-45);line-height:1.5} body.site .cap b{display:block;color:var(--ink);font-weight:600;font-size:14px;margin-bottom:1px} /* the fill sweeps in like a brush stroke, and the arrow steps forward. position/overflow make the ::before wipe possible; z-index keeps the label above it. */ /* שפת הכפתור הועברה ל-compat.css: המחלקה .btn-* יושבת על עטיפת הווידג'ט, והצביעה חייבת לחול על ה- שבתוכה. הגדרה כפולה כאן יוצרת כפתור בתוך כפתור. */ body.site .btns{display:flex;flex-wrap:wrap;gap:12px} body.site .arrow{font-size:12.5px;font-weight:600;letter-spacing:.1em;color:var(--violet);display:inline-flex; align-items:center;gap:9px;min-height:44px;transition:color .3s var(--e)} body.site .arrow span{display:inline-block;transition:transform .35s var(--e)} body.site .arrow:hover{color:var(--plum)} body.site .arrow:hover span{transform:translateX(-6px)} /* ── header ── */ body.site .hdr{position:absolute;top:0;inset-inline:0;z-index:60;transition:.35s var(--e)} body.site .hdr .w{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-block:18px} body.site .hdr.solid{position:fixed;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);box-shadow:0 2px 20px -12px rgba(30,26,38,.3)} body.site .hdr.solid .brand b,body.site .hdr.solid .nav a{color:var(--ink)} body.site .hdr.solid .brand i{color:var(--ink-45)} body.site .hdr.solid .btn-gw{color:var(--violet);border-color:var(--violet)} body.site .hdr.solid .btn-gw:hover{background:var(--violet);color:#fff} body.site .hdr.solid .burger{color:var(--violet);border-color:var(--line)} body.site .brand{display:flex;align-items:center;gap:10px;min-height:46px} body.site .brand img{display:none} body.site .brand b{font-family:var(--serif);font-weight:700;font-size:clamp(17px,1.6vw,20px);color:#fff;display:block;line-height:1.1} body.site .brand i{font-style:normal;font-size:10px;letter-spacing:.14em;color:rgba(255,255,255,.65)} body.site .nav{display:flex;gap:clamp(9px,1.3vw,22px);font-size:13px;font-weight:600;letter-spacing:.08em} body.site .nav a{color:rgba(255,255,255,.86);padding:12px 1px;border-bottom:1px solid transparent;transition:.25s;white-space:nowrap} body.site .nav a:hover{color:#fff;border-bottom-color:var(--gold)} body.site .hdr.solid .nav a:hover{color:var(--violet);border-bottom-color:var(--violet)} body.site .nav a[aria-current]{border-bottom-color:var(--gold)} body.site .burger{display:none;width:46px;height:46px;border:1px solid rgba(255,255,255,.4);border-radius:12px;color:#fff;place-items:center;font-size:17px} @media(max-width:1140px){body.site .nav{display:none}body.site .burger{display:grid}} @media(max-width:540px){body.site .hdr .btn{display:none}} body.site .off{position:fixed;inset:0;z-index:95;background:var(--plum);transform:translateX(-102%); transition:transform .4s var(--e);padding:22px;overflow-y:auto;display:flex;flex-direction:column} body.site .off.on{transform:none} body.site .off a{font-family:var(--serif);font-weight:700;font-size:24px;color:#fff;padding-block:16px; border-bottom:1px solid rgba(255,255,255,.14);min-height:56px} /* ══ HERO — cinematic, full bleed ══ */ body.site .hero{position:relative;min-height:min(94vh,820px);display:grid;place-items:center;overflow:hidden;background:var(--plum)} body.site .hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 36%} body.site .hero::after{content:"";position:absolute;inset:0; background:linear-gradient(to bottom,rgba(28,12,52,.72),rgba(28,12,52,.42) 42%,rgba(28,12,52,.86))} body.site .hero__c{position:relative;z-index:2;text-align:center;padding:clamp(90px,12vh,140px) var(--pad) clamp(60px,9vh,90px);max-width:1000px} body.site .hero__c .eyebrow{color:var(--gold);margin-bottom:20px} body.site .hero__c h1{color:#fff;text-shadow:0 2px 40px rgba(20,8,40,.5)} body.site .hero__c .sub{font-family:var(--serif);font-weight:400;font-size:clamp(18px,2vw,26px);color:rgba(255,255,255,.9); margin-top:22px;max-width:38ch;margin-inline:auto;line-height:1.5} body.site .hero__c .btns{justify-content:center;margin-top:clamp(28px,4vw,42px)} body.site .hero__scroll{position:absolute;bottom:26px;inset-inline:0;z-index:2;text-align:center; font-size:10.5px;font-weight:600;letter-spacing:.3em;color:rgba(255,255,255,.6)} body.site .hero__scroll::after{content:"";display:block;width:1px;height:34px;background:rgba(255,255,255,.4);margin:10px auto 0} body.site .hero__lab{position:absolute;bottom:22px;inset-inline-start:var(--pad);z-index:2;font-size:11px; letter-spacing:.1em;color:rgba(255,255,255,.5)} @media(max-width:820px){body.site .hero{min-height:auto}body.site .hero__lab,body.site .hero__scroll{display:none} body.site .hero__c{padding-block:clamp(120px,20vh,160px) 70px}} /* ══ stats band ══ */ body.site .stats{background:var(--plum);border-top:1px solid rgba(255,255,255,.1)} body.site .stats .w{display:grid;grid-template-columns:repeat(4,1fr);gap:0} @media(max-width:760px){body.site .stats .w{grid-template-columns:repeat(2,1fr)}} body.site .stats .w>div{padding:clamp(24px,3vw,40px) 14px;text-align:center;border-inline-start:1px solid rgba(255,255,255,.12)} body.site .stats .w>div:first-child{border-inline-start:0} @media(max-width:760px){body.site .stats .w>div:nth-child(odd){border-inline-start:0} body.site .stats .w>div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.12)}} body.site .stats .elementor-counter-number-wrapper{display:flex;justify-content:center;font-family:var(--serif);font-weight:700;font-size:clamp(28px,3.4vw,42px);color:#fff; font-variant-numeric:lining-nums;line-height:1} body.site .stats .elementor-counter-title{display:block;font-size:11px;font-weight:600;letter-spacing:.16em;color:rgba(255,255,255,.55);margin-top:9px} /* ══ page hero for inner pages ══ */ body.site .phero{position:relative;background:var(--plum);overflow:hidden;padding-block:clamp(130px,17vh,190px) clamp(50px,7vh,80px)} body.site .phero__bg{position:absolute;inset:0;z-index:0;line-height:0} body.site .phero__bg img{width:100%;height:100%;object-fit:cover;opacity:.4} body.site .phero::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(28,12,52,.86),rgba(28,12,52,.7))} body.site .phero .w{position:relative;z-index:2} body.site .phero h1{color:#fff;margin-top:16px} body.site .phero .lede{color:rgba(255,255,255,.82);margin-top:18px} /* ══ sections ══ */ body.site .sec{padding-block:clamp(60px,8vw,120px)} body.site .s2{background:var(--paper-2)} body.site .s3{background:var(--paper-3)} body.site .s-dark{background:var(--plum);color:#fff} body.site .s-dark h1,body.site .s-dark h2,body.site .s-dark h3{color:#fff} body.site .s-dark .lede{color:rgba(255,255,255,.8)} body.site .s-dark .cap{color:rgba(255,255,255,.5)} body.site .s-dark .cap b{color:#fff} body.site .hd{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px; margin-bottom:clamp(28px,3.6vw,48px)} body.site .hd__t{max-width:60ch} body.site .hd h2{margin-top:12px} body.site .hd .lede{margin-top:16px} /* ══ artwork: bare, no mats, no frames ══ */ body.site .tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(26px,3vw,40px)} body.site .tabs button{padding:13px 22px;font-size:12.5px;font-weight:600;letter-spacing:.08em;color:var(--ink-45); border-radius:999px;min-height:46px;transition:.28s var(--e)} body.site .tabs button:hover{color:var(--ink);background:var(--violet-pale)} body.site .tabs button[aria-pressed="true"]{color:#fff;background:var(--violet)} body.site .works{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(26px,3vw,46px) clamp(18px,2.2vw,34px)} body.site .works--home{grid-template-columns:repeat(3,1fr)} @media(max-width:820px){body.site .works--home{grid-template-columns:repeat(2,1fr)}} @media(max-width:1000px){body.site .works{grid-template-columns:repeat(3,1fr)}} @media(max-width:700px){body.site .works{grid-template-columns:repeat(2,1fr)}} body.site .works .fr{margin:0;display:flex;flex-direction:column} body.site .works .fr[hidden]{display:none} body.site .works .fr{display:flex;flex-direction:column;width:100%;height:100%;text-align:start} /* works hang on a common centre line, the way a gallery hangs them: every piece sits in a viewing band of identical height and centres inside it, so tops and bottoms align however wide the canvas is. */ /* flex, not grid: max-height:100% only resolves reliably against a definite flex-container height, so tall canvases stop overflowing. */ body.site .works .im{flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden; aspect-ratio:4/3;background:var(--paper-3);border-radius:var(--r); padding:clamp(14px,1.6vw,22px);margin-bottom:16px} body.site .s-dark .works .im{background:rgba(255,255,255,.07)} body.site .works .im img{max-height:100%;max-width:100%;width:auto;height:auto;border-radius:3px; box-shadow:0 4px 16px -6px rgba(30,26,38,.32);transition:transform .5s var(--e)} body.site .works .fr:hover .im img{transform:scale(1.04)} body.site .works .pr{color:var(--violet);font-weight:600} body.site .s-dark .works .pr{color:var(--violet-lt)} /* ══ editorial split ══ */ body.site .duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4.5vw,80px);align-items:center} body.site .duo+.duo{margin-top:clamp(48px,6.5vw,110px)} body.site .duo:nth-of-type(even) .duo__im{order:2} @media(max-width:860px){body.site .duo{grid-template-columns:1fr;gap:24px}body.site .duo:nth-of-type(even) .duo__im{order:0}} body.site .duo__im img{width:100%;border-radius:var(--r)} body.site .duo__im .cap{margin-top:11px} body.site .duo blockquote{margin:0 0 18px;font-family:var(--serif);font-weight:700;font-size:clamp(24px,3.2vw,42px); line-height:1.14;letter-spacing:-.015em} body.site .facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px} body.site .facts div{flex:1 1 150px;background:var(--violet-pale);border-radius:var(--r-sm); padding:16px 20px;transition:transform .35s var(--e)} body.site .facts div:hover{transform:translateY(-3px)} body.site .s-dark .facts div{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)} body.site .facts b{display:block;font-family:var(--serif);font-weight:700;font-size:23px;color:var(--violet); font-variant-numeric:lining-nums;line-height:1.1} body.site .s-dark .facts b{color:#fff} body.site .facts span{font-size:12.5px;color:var(--ink-45);display:block;line-height:1.45;margin-top:4px} body.site .s-dark .facts span{color:rgba(255,255,255,.6)} /* ══ meet-her credentials ══ */ body.site .creds{margin-top:30px;display:flex;flex-wrap:wrap;gap:10px} body.site .creds div{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16); border-radius:var(--r-sm);padding:14px 20px;transition:background .3s var(--e)} body.site .creds div:hover{background:rgba(255,255,255,.14)} body.site .creds b{display:block;font-family:var(--serif);font-weight:700;font-size:16.5px;color:#fff} body.site .creds span{display:block;font-size:13px;color:rgba(255,255,255,.62);line-height:1.5;margin-top:2px} body.site .meet .duo{align-items:center} body.site .meet .duo__im img{width:100%;border-radius:var(--r);box-shadow:0 30px 60px -30px rgba(0,0,0,.7)} /* ══ three columns ══ */ body.site .tri{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.4vw,56px)} @media(max-width:820px){body.site .tri{grid-template-columns:1fr;gap:34px}} body.site .tri img{width:100%;border-radius:var(--r);margin-bottom:18px} body.site .tri h3{margin-top:8px} body.site .tri p{font-size:15.5px;line-height:1.72;color:var(--ink-70);margin-top:9px} body.site .s-dark .tri p{color:rgba(255,255,255,.78)} /* ══ numbered process ══ */ body.site .steps{border-top:1px solid var(--line)} body.site .s-dark .steps,body.site .s-dark .steps>div{border-color:rgba(255,255,255,.18)} body.site .steps>div{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2.6vw,40px); padding-block:clamp(22px,2.8vw,34px);border-bottom:1px solid var(--line);align-items:start} body.site .steps .n{font-family:var(--serif);font-weight:700;font-size:clamp(26px,2.8vw,38px);color:var(--violet); line-height:1;font-variant-numeric:lining-nums;min-width:2ch} body.site .steps .t{font-size:11.5px;font-weight:600;letter-spacing:.14em;color:var(--violet)} body.site .s-dark .steps .t{color:var(--violet-lt)} body.site .steps h3{margin-top:5px} body.site .steps p{font-size:15.5px;line-height:1.72;color:var(--ink-70);margin-top:7px;max-width:62ch} body.site .s-dark .steps p{color:rgba(255,255,255,.78)} /* ══ quotes ══ */ body.site .quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(26px,4vw,64px)} @media(max-width:780px){body.site .quotes{grid-template-columns:1fr;gap:32px}} body.site .quotes blockquote{position:relative;margin:0;background:#fff;border-radius:var(--r); padding:clamp(30px,3.4vw,44px) clamp(26px,3vw,38px) clamp(24px,2.6vw,32px); box-shadow:var(--lift);transition:transform .4s var(--e),box-shadow .4s var(--e)} body.site .quotes blockquote:hover{transform:translateY(-4px);box-shadow:var(--lift2)} /* an oversized painted quote mark, bled off the top corner */ body.site .quotes blockquote::before{content:"\201D";position:absolute;top:-.16em;inset-inline-start:.28em; font-family:var(--serif);font-weight:700;font-size:clamp(80px,8vw,120px);line-height:1; color:var(--violet);opacity:.12;pointer-events:none} body.site .quotes blockquote:nth-child(even){margin-top:clamp(0px,2.4vw,34px)} body.site .quotes p{font-family:var(--serif);font-size:clamp(17px,1.6vw,19px);line-height:1.66;position:relative} body.site .quotes cite{display:flex;align-items:center;gap:12px;font-family:var(--sans);font-style:normal; font-size:13px;color:var(--ink-45);margin-top:20px;padding-top:18px} body.site .quotes cite::before{content:"";width:26px;height:2px;background:var(--gold);border-radius:2px;flex:none} body.site .quotes cite b{color:var(--ink);font-weight:600;font-size:14.5px;display:inline} body.site .quotes cite b::after{content:" · ";color:var(--ink-45);font-weight:400} body.site .s-dark .quotes blockquote{background:rgba(255,255,255,.07);box-shadow:none; border:1px solid rgba(255,255,255,.14)} body.site .s-dark .quotes blockquote::before{color:#fff;opacity:.15} body.site .s-dark .quotes blockquote:hover{background:rgba(255,255,255,.1);transform:translateY(-4px);box-shadow:none} body.site .s-dark .quotes cite{color:rgba(255,255,255,.55)} body.site .s-dark .quotes cite b{color:#fff} /* ══ faq ══ */ body.site .faq{max-width:900px;border-top:1px solid var(--line)} body.site .faq .it{border-bottom:1px solid var(--line)} body.site .faq .q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;text-align:start; padding:21px 2px;font-family:var(--serif);font-weight:700;font-size:clamp(17px,1.75vw,21px); min-height:58px;transition:color .25s} body.site .faq .q:hover,body.site .faq .it.on .q{color:var(--violet)} body.site .faq .q i{font-style:normal;font-size:19px;color:var(--gold);flex:none;transition:transform .3s;font-family:var(--sans)} body.site .faq .it.on .q i{transform:rotate(45deg)} body.site .faq .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s var(--e)} body.site .faq .it.on .a{grid-template-rows:1fr} body.site .faq .a>div{overflow:hidden} body.site .faq .a p{padding:0 2px 22px;font-size:16px;line-height:1.8;color:var(--ink-70);max-width:68ch} /* ══ artwork detail ══ */ body.site .ov{position:fixed;inset:0;z-index:130;background:rgba(20,9,38,.9);backdrop-filter:blur(7px); display:grid;place-items:center;padding:clamp(12px,3vw,44px);opacity:0;visibility:hidden;transition:.28s} body.site .ov.on{opacity:1;visibility:visible} body.site .ov__b{background:var(--paper);max-width:1100px;width:100%;max-height:92vh;overflow:hidden auto;border-radius:var(--r); display:grid;grid-template-columns:1.3fr .7fr;transform:translateY(12px);transition:.3s var(--e)} body.site .ov.on .ov__b{transform:none} @media(max-width:840px){body.site .ov__b{grid-template-columns:1fr}} body.site .ov__im{display:grid;place-items:center;padding:clamp(22px,3.4vw,52px);background:var(--paper-2)} body.site .ov__im img{max-height:62vh;width:auto;max-width:100%;border-radius:var(--r-xs)} body.site .ov__bd{padding:clamp(26px,3vw,44px);position:relative} body.site .ov__x{position:absolute;top:14px;inset-inline-start:14px;width:44px;height:44px;display:grid;place-items:center; font-size:18px;color:var(--ink-45);border:1px solid var(--line);border-radius:50%;background:#fff} body.site .ov__x:hover{color:var(--violet);border-color:var(--violet)} body.site .ov dl{display:grid;grid-template-columns:auto 1fr;gap:10px 20px;margin:20px 0 0;font-size:15px} body.site .ov dt{color:var(--ink-45);font-size:12.5px;letter-spacing:.04em} body.site .ov dd{margin:0;font-weight:600} body.site .scale{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)} body.site .scale__row{display:flex;align-items:flex-end;gap:14px;margin-top:14px;height:140px} body.site .scale__fig{width:30px;height:140px;flex:none;color:rgba(106,63,168,.28)} body.site .scale__art{background:var(--violet-pale);border:1px solid var(--violet);border-radius:6px;position:relative} body.site .scale__art::after{content:attr(data-d);position:absolute;bottom:-21px;inset-inline-start:0;font-size:11px;color:var(--ink-45);white-space:nowrap} /* ══ book ══ */ body.site .book{display:grid;grid-template-columns:.62fr 1.38fr;gap:clamp(28px,5vw,84px);align-items:center} @media(max-width:860px){body.site .book{grid-template-columns:1fr;gap:26px}} body.site .book__cv img{width:100%;max-width:300px;margin-inline:auto;filter:drop-shadow(0 30px 44px rgba(0,0,0,.42))} body.site .book blockquote{margin:20px 0 0;font-family:var(--serif);font-weight:700;font-size:clamp(22px,2.9vw,38px); line-height:1.2;color:var(--gold)} /* ══ contact ══ */ body.site .form{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,4.5vw,80px);align-items:start} @media(max-width:860px){body.site .form{grid-template-columns:1fr;gap:30px}} body.site .clist{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid rgba(255,255,255,.2)} body.site .clist li{border-bottom:1px solid rgba(255,255,255,.2);padding-block:15px;display:grid; grid-template-columns:92px 1fr;gap:12px;align-items:center;min-height:58px} body.site .clist dt{color:rgba(255,255,255,.55);font-size:12px;letter-spacing:.1em} body.site .clist a,body.site .clist dd{margin:0;font-size:16.5px;color:#fff} body.site .clist a:hover{color:var(--gold)} body.site .fcard{background:#fff;border-radius:var(--r);padding:clamp(28px,3.2vw,46px);box-shadow:var(--lift2)} body.site .fg{display:grid;grid-template-columns:1fr 1fr;gap:0 20px} @media(max-width:600px){body.site .fg{grid-template-columns:1fr}} body.site .fld{margin-bottom:17px} body.site .fld label{display:block;font-size:11.5px;font-weight:600;letter-spacing:.1em;color:var(--ink-45);margin-bottom:6px} body.site .fld input,body.site .fld select,body.site .fld textarea{width:100%;font-family:var(--sans);font-size:16.5px;color:var(--ink); background:var(--paper-2);border:1px solid var(--line);border-radius:10px;padding:13px 15px;min-height:50px;transition:.22s} body.site .fld input:focus,body.site .fld select:focus,body.site .fld textarea:focus{outline:0;border-color:var(--violet);background:#fff} body.site .fld textarea{resize:vertical;min-height:96px} body.site .cons{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink-70);margin-bottom:18px} body.site .cons input{width:17px;height:17px;margin-top:5px;flex:none;accent-color:var(--violet)} /* ══ footer ══ */ body.site .ftr{background:var(--plum);color:rgba(255,255,255,.72);padding-block:clamp(46px,5.5vw,74px) 0} body.site .ftr .w{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:clamp(22px,3vw,50px)} @media(max-width:900px){body.site .ftr .w{grid-template-columns:1fr 1fr}} @media(max-width:540px){body.site .ftr .w{grid-template-columns:1fr}} body.site .ftr h4{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.16em;color:var(--gold);margin:0 0 12px} body.site .ftr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;font-size:15.5px} body.site .ftr li a,body.site .ftr li span{display:inline-flex;align-items:center;min-height:42px;color:rgba(255,255,255,.72)} body.site .ftr a:hover{color:var(--gold)} body.site .legal{border-top:1px solid rgba(255,255,255,.16);margin-top:clamp(28px,3.4vw,46px);padding-block:20px; display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;font-size:12.5px;color:rgba(255,255,255,.45)} body.site .wa{position:fixed;bottom:18px;inset-inline-end:18px;z-index:70;width:54px;height:54px;border-radius:50%; background:#25D366;display:grid;place-items:center;box-shadow:0 8px 24px -8px rgba(0,0,0,.4);transition:.3s} body.site .wa:hover{transform:scale(1.07)} body.site .wa svg{width:27px;height:27px;fill:#fff} /* her own logo, keyed off its white JPEG ground. two variants swap with the header state so it reads on both. */ /* her mark always shows in her own colours. on dark grounds it sits on a small paper chip, because fine watercolour cannot knock out cleanly. the chip wraps the image — no fixed height on the wrapper, so nothing can overflow it. */ body.site .brand{gap:12px} body.site .mark{flex:none;display:inline-flex;align-items:center;background:#FBF8F3; border-radius:10px;padding:5px 9px;transition:background .3s var(--e),padding .3s var(--e)} body.site .mark img{display:block;width:auto;height:34px} body.site .brand .mark img{height:clamp(26px,2.3vw,32px)} body.site .hdr.solid .brand .mark{background:transparent;padding:0} body.site .brand .mark .lt{display:none} @media(max-width:520px){body.site .brand .mark img{height:24px}} /* ═══════════ single artwork page ═══════════ the layout WooCommerce gives you: gallery on one side, buy panel on the other, tabs beneath, related items last. built so it maps 1:1 onto a real WooCommerce single-product template later. */ body.site .pdp{padding-block:clamp(100px,13vh,150px) clamp(50px,7vw,90px)} body.site .crumbs{font-size:12.5px;color:var(--ink-45);margin-bottom:clamp(18px,2.4vw,30px); display:flex;flex-wrap:wrap;gap:2px 8px;align-items:center} body.site .crumbs a{display:inline-flex;align-items:center;min-height:44px} body.site .crumbs a:hover{color:var(--violet)} body.site .crumbs span{opacity:.5} body.site .pdp__top{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4.4vw,72px);align-items:start} @media(max-width:900px){body.site .pdp__top{grid-template-columns:1fr;gap:26px}} body.site .pgal__main{background:var(--paper-3);border-radius:var(--r);overflow:hidden; display:flex;align-items:center;justify-content:center; aspect-ratio:4/3;padding:clamp(18px,2.4vw,34px);cursor:zoom-in} body.site .pgal__main img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:3px; box-shadow:0 8px 30px -12px rgba(30,26,38,.4);transition:transform .5s var(--e)} body.site .pgal__main:hover img{transform:scale(1.03)} body.site .pgal__thumbs{display:flex;gap:10px;margin-top:12px} body.site .pgal__thumbs button{width:84px;height:66px;border-radius:10px;overflow:hidden;background:var(--paper-3); border:2px solid transparent;display:flex;align-items:center;justify-content:center; padding:5px;transition:.25s var(--e)} body.site .pgal__thumbs button[aria-pressed="true"]{border-color:var(--violet)} body.site .pgal__thumbs button:hover{border-color:var(--violet-lt)} body.site .pgal__thumbs img{max-width:100%;max-height:100%;width:auto;border-radius:2px} body.site .buy h1{font-size:clamp(28px,3.4vw,44px)} body.site .buy__type{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600; letter-spacing:.08em;padding:6px 14px;border-radius:999px;margin-bottom:14px} body.site .buy__type.orig{background:var(--violet-pale);color:var(--violet)} body.site .buy__type.print{background:#EFE8DC;color:#8A6A3A} body.site .buy__price{font-family:var(--serif);font-weight:700;font-size:clamp(26px,3vw,36px); color:var(--violet);margin-top:18px;font-variant-numeric:lining-nums} body.site .buy__price small{font-family:var(--sans);font-weight:400;font-size:14px;color:var(--ink-45); margin-inline-start:8px;letter-spacing:0} body.site .buy__desc{margin-top:16px} body.site .spec{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--line)} body.site .spec li{display:grid;grid-template-columns:110px 1fr;gap:14px;padding-block:12px; border-bottom:1px solid var(--line);font-size:15px} body.site .spec dt,body.site .spec b{color:var(--ink-45);font-size:13px;font-weight:400} body.site .spec span{font-weight:500} body.site .buy__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px} body.site .buy__cta .btn{flex:1 1 190px} body.site .buy__note{margin-top:18px;font-size:13.5px;color:var(--ink-45);line-height:1.6; display:flex;gap:9px;align-items:flex-start} body.site .buy__note::before{content:"◆";color:var(--violet-lt);font-size:10px;margin-top:5px} /* the size diagram, kept — it is the one thing a photo cannot tell you */ body.site .pdp .scale{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)} /* tabs beneath, WooCommerce-style */ body.site .ptabs{margin-top:clamp(44px,5.5vw,80px);border-top:1px solid var(--line)} body.site .ptabs__nav{display:flex;flex-wrap:wrap;gap:8px;padding-block:18px} body.site .ptabs__nav button{padding:11px 22px;border-radius:999px;font-size:13px;font-weight:600; letter-spacing:.06em;color:var(--ink-45);min-height:44px;transition:.25s var(--e)} body.site .ptabs__nav button:hover{background:var(--violet-pale);color:var(--ink)} body.site .ptabs__nav button[aria-pressed="true"]{background:var(--violet);color:#fff} body.site .ptabs__body{padding-bottom:8px;max-width:70ch} body.site .ptabs__body p+p{margin-top:14px} body.site .ptabs__body[hidden]{display:none} body.site .pdp__rel{margin-top:clamp(44px,5.5vw,80px)} body.site .pdp__rel h2{margin-bottom:clamp(20px,2.6vw,32px)} /* full-bleed zoom */ body.site .zoom{position:fixed;inset:0;z-index:150;background:rgba(20,9,38,.94);display:grid;place-items:center; padding:24px;opacity:0;visibility:hidden;transition:.3s;cursor:zoom-out} body.site .zoom.on{opacity:1;visibility:visible} body.site .zoom img{max-width:96vw;max-height:92vh;width:auto;border-radius:4px} /* ═══════════════ motion ═══════════════ three layers, in order of how much they matter: · the first two seconds (hero) · the scroll (staggered reveals, counters) · the signature moment (her canvases dissolving into each other) */ /* — scroll progress — */ body.site .prog{position:fixed;top:0;inset-inline:0;height:2px;z-index:200;pointer-events:none; background:linear-gradient(to left,var(--violet),var(--gold)); transform:scaleX(0);transform-origin:right center;transition:transform .1s linear} /* — hero: her canvases cross-dissolve, the way lazure layers wash over one another. slow enough to read as breathing, not as a slideshow. — */ body.site .hero__stack{position:absolute;inset:0} body.site .hero__stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:center 36%;opacity:0;transition:opacity 2.6s ease-in-out; animation:kb 30s ease-in-out infinite alternate} body.site .hero__stack img.on{opacity:1} @keyframes kb{from{transform:scale(1)}to{transform:scale(1.09)}} /* — hero copy rises in sequence on load — */ body.site .hero__c>*{opacity:0;transform:translateY(22px); animation:rise .9s cubic-bezier(.22,.68,.28,1) forwards} body.site .hero__c>*:nth-child(1){animation-delay:.25s} body.site .hero__c>*:nth-child(2){animation-delay:.42s} body.site .hero__c>*:nth-child(3){animation-delay:.60s} body.site .hero__c>*:nth-child(4){animation-delay:.78s} @keyframes rise{to{opacity:1;transform:none}} body.site .hero__scroll{animation:fadeIn 1s 1.5s ease forwards;opacity:0} body.site .hero__lab{animation:fadeIn 1s 1.7s ease forwards;opacity:0} @keyframes fadeIn{to{opacity:1}} body.site .hero__scroll::after{animation:drop 2.2s ease-in-out infinite} @keyframes drop{0%,100%{transform:scaleY(1);opacity:.4}50%{transform:scaleY(.6);opacity:.9}} /* — works enter one after another, not all at once — */ body.site .works .fr{opacity:0;transform:translateY(24px);transition:opacity .7s var(--e),transform .7s var(--e)} body.site .works.seen .fr{opacity:1;transform:none} body.site .works.seen .fr:nth-child(1){transition-delay:0s} body.site .works.seen .fr:nth-child(2){transition-delay:.07s} body.site .works.seen .fr:nth-child(3){transition-delay:.14s} body.site .works.seen .fr:nth-child(4){transition-delay:.21s} body.site .works.seen .fr:nth-child(5){transition-delay:.28s} body.site .works.seen .fr:nth-child(6){transition-delay:.35s} body.site .works.seen .fr:nth-child(n+7){transition-delay:.42s} /* — a cue that follows the cursor across the wall — */ body.site .cue{position:fixed;z-index:110;width:74px;height:74px;border-radius:50%;pointer-events:none; display:grid;place-items:center;background:rgba(36,16,64,.82);backdrop-filter:blur(3px); color:#fff;font-size:11.5px;font-weight:600;letter-spacing:.06em; transform:translate(50%,-50%) scale(.4);opacity:0; transition:opacity .28s var(--e),transform .28s var(--e)} body.site .cue.on{opacity:1;transform:translate(50%,-50%) scale(1)} @media(hover:none){body.site .cue{display:none}} /* — counters — */ body.site .stats .elementor-counter-number-wrapper{font-variant-numeric:tabular-nums lining-nums} body.site to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){ body.site .hero__stack img{animation:none;transition:none} body.site .hero__c>*,body.site .hero__scroll,body.site .hero__lab{opacity:1;transform:none;animation:none} body.site .hero__scroll::after{animation:none} body.site .works figure{opacity:1;transform:none;transition:none} body.site .prog{display:none} body.site .cue{display:none} } html.anim .r{opacity:0;transform:translateY(16px);transition:opacity .7s var(--e),transform .7s var(--e)} html.anim .r.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){html.anim .r{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}} /* ═══════════════════════════════════════════════════════════════ שכבת התאמה: Elementor 4.x + Astra ←→ מערכת העיצוב של המוקאפ. הקובץ הזה לא משנה את השפה העיצובית — הוא רק מבטל את מה שאלמנטור/אסטרה מזריקים ומחזיר את ההתנהגות של המוקאפ. כל הבוררים כאן כתובים כבר עם body.site (הם לא עוברים ב-scope.py). ═══════════════════════════════════════════════════════════════ */ /* ── 1. קונטיינרים: בלי padding/gap ברירת־מחדל, הרוחב מנוהל ב-.w ── */ body.site .e-con{ --padding-block-start:0;--padding-block-end:0; --padding-inline-start:0;--padding-inline-end:0; --gap:0px;--row-gap:0px;--column-gap:0px; --container-max-width:none; /* לעולם לא max-width:none על .e-con */ --content-width:100%; } body.site .e-con>.e-con-inner{max-width:none;padding:0;gap:0} body.site .elementor-element{--widgets-spacing:0px 0px} /* ── 2. וידג'טים: אלמנטור מאפס margin-block-end ב-(0,3,0). כל מרווח של מערכת העיצוב חייב לנצח את זה. ── */ body.site .e-con .elementor-widget{margin-block-end:0} body.site .e-con .elementor-widget.elementor-widget{margin-block-end:0} /* ── 3. כותרות: הטיפול עבר ל-design-base ברמת תג ה-h (h1..h4), כדי שכללי המוקאפ הספציפיים (.ftr h4 / .s-dark h2 / .hd h2) ימשיכו לנצח. כאן נשאר רק איפוס המרווח שאלמנטור מוסיף. ── */ /* אסטרה מזריקה `.elementor-widget-heading h1.elementor-heading-title{line-height:1.4em}` ב-(0,2,1), שגובר על `h1{line-height:1.08}` של המוקאפ. (0,3,0) מחזיר אותו. */ body.site .elementor-widget-heading .elementor-heading-title{line-height:1.08} /* ── 4. טקסט: Astra נותנת ל-p מרווח ב-(0,0,1) שגובר על *{margin:0} ── */ body.site p{margin:0} body.site .elementor-widget-text-editor p+p{margin-top:1em} body.site .elementor-widget-container>p:only-child{margin:0} /* ── 4ב. פס הנתונים: וידג'ט המונה מרנדר כותרת לפני המספר — הופכים ── */ body.site .stats .elementor-counter{display:flex;flex-direction:column-reverse} body.site .stats .elementor-counter-title{margin-top:9px} body.site .stats .elementor-counter-number-prefix, body.site .stats .elementor-counter-number-suffix{flex:none} body.site .stats .elementor-counter-number-suffix{white-space:pre} body.site .stats .elementor-counter-title{line-height:1.75} /* במוקאפ `.stats div` תפס גם את `.w` עצמו — הרצועה מרופדת פעמיים. משחזרים במפורש, אחרת הפס נמוך ב-60px והעמודות רחבות מדי. */ body.site .stats .w{padding:clamp(24px,3vw,40px) 14px;text-align:center} /* ── 4ד. אלמנטור כופה `max-width:100%` על כל וידג'ט בבורר `.elementor.elementor .e-con > .elementor-widget` = (0,4,0), וזה מוחק את מידות השורה של המוקאפ (56ch/38ch/60ch...). מנטרלים פעם אחת, ואז כללי המוקאפ חלים כרגיל. ── */ body.site .elementor.elementor .e-con>.elementor-widget{max-width:none} /* ...ומחזירים את מידות השורה של המוקאפ באותה ספציפיות */ body.site .elementor.elementor .e-con>.elementor-widget.lede{max-width:56ch} body.site .elementor.elementor .e-con>.elementor-widget.sub{max-width:38ch} body.site .e-con.w--narrow{max-width:720px} /* ── 4ה. ההיסט של כל ציטוט שני: במוקאפ הוא על ה-blockquote, כאן ה-blockquote הוא ילד יחיד בעטיפה — אז ההיסט עובר לעטיפה. ── */ body.site .quotes>.elementor-widget:nth-child(even){margin-top:clamp(0px,2.4vw,34px)} /* ── 4ו. במוקאפ כרטיס היצירה הוא