/* ===== גבעת אשל =====
יושב על shifi.css ומוסיף רק את מה שייחודי לסדרה.
שתי קומפוזיציות נפרדות להירו, לא כיווץ אחת של השנייה:
דסקטופ, איור רחב אחד עם עמודת שמנת מימין.
נייד, בלוק כותרת על שמנת, זוג נוכחי גדול, ושלושה ריבועים.
הפלטה לקוחה מהבריף ולא נבחרה כאן. */
.ge{
--paper:#f7f0e4;
--art-cream:#fff8e6; /* נדגם מהאיור, כדי שלא יהיה תפר בקצה */
--olive:#4c512d;
--pink:#c6205b;
--pink-2:#d93a72;
--sand:#d9c9ae;
--text:#272820;
--book:'Frank Ruhl Libre','David Libre',Georgia,serif;
/* כתב יד לפתקים בלוח. לא לשום מידע חיוני. */
/* כתב יד עברי אמיתי. Playpen Sans Hebrew תומך בעברית,
בניגוד לפונטים הלטיניים שהיו כאן קודם ונפלו לברירת מחדל. */
--hand-note:'Playpen Sans Hebrew','Gveret Levin',cursive;
background:var(--paper);
color:var(--text);
}
/* ---------- סרגל ---------- */
.ge-head{position:relative;z-index:10;background:var(--paper);
display:flex;align-items:center;justify-content:space-between;
gap:16px;padding:10px clamp(16px,3vw,40px);
border-bottom:1px solid rgba(39,40,32,.08)}
.ge-logo{display:block;line-height:0}
.ge-logo img{width:clamp(64px,6vw,92px);height:auto;
filter:brightness(0) saturate(100%) invert(27%) sepia(14%) saturate(1210%)
hue-rotate(38deg) brightness(93%) contrast(90%)}
.ge-nav{display:flex;gap:clamp(18px,2.4vw,34px)}
.ge-nav a{font-size:14.5px;font-weight:600;color:rgba(39,40,32,.72)}
.ge-nav a:hover{color:var(--pink)}
.ge-burger{display:none;background:none;border:0;cursor:pointer;padding:0;
width:42px;height:42px;flex-direction:column;align-items:flex-end;
justify-content:center;gap:5px}
.ge-burger span{display:block;height:2px;border-radius:2px;background:var(--olive)}
.ge-burger span:nth-child(1){width:22px}
.ge-burger span:nth-child(2){width:15px}
.ge-burger span:nth-child(3){width:22px}
/* ---------- ההירו, דסקטופ ---------- */
.hero-ge{position:relative;background:var(--art-cream);overflow:hidden}
.ge-art{display:block}
.ge-art img{display:block;width:100%;height:auto}
.ge-panel{position:absolute;z-index:2;top:0;bottom:0;
inset-inline-start:clamp(18px,2.4vw,44px);
width:min(37%,580px);
padding:clamp(96px,11vw,210px) clamp(14px,1.6vw,28px) clamp(20px,2.2vw,40px);
text-align:center;display:flex;flex-direction:column;
align-items:center;justify-content:center}
.ge-eyebrow{font-size:clamp(12px,1.2vw,14.5px);font-weight:600;
letter-spacing:.04em;color:rgba(39,40,32,0.68)}
/* שם הסדרה בפונט של הכריכות */
.ge-mark{margin-top:8px;font-family:var(--book);
font-weight:900;font-size:clamp(42px,5vw,80px);line-height:1;
letter-spacing:-.012em;color:var(--olive)}
/* עיטור הזית עם הלב. הוא של גבעת אשל, לא של שיפי. */
.ge-flourish{display:block;margin:10px auto 0;
width:clamp(150px,17vw,260px);height:auto}
.ge-promise{margin-top:clamp(14px,1.6vw,22px);font-family:var(--book);
font-size:clamp(17px,1.85vw,24px);line-height:1.45;font-weight:700;
color:var(--text);text-wrap:balance}
/* ---------- כפתורים ---------- */
/* שורת המשנה, מתחת להבטחה הראשית */
.ge-sub{margin-top:9px;font-size:clamp(14px,1.35vw,17px);
color:rgba(39,40,32,0.68);font-weight:600}
.ge-actions{margin-top:clamp(16px,1.8vw,24px);width:100%;
display:flex;flex-direction:column;align-items:center;gap:12px}
.ge-btn{width:min(100%,360px);min-height:54px;border:0;border-radius:99px;
font-family:inherit;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;gap:9px;
font-size:16px;font-weight:700;letter-spacing:-.01em;
transition:transform .2s,background .2s}
.ge-btn:hover{transform:translateY(-2px)}
.ge-btn-1{background:var(--pink);color:#fff;
box-shadow:0 12px 26px -10px rgba(198,32,91,.5)}
.ge-btn-1:hover{background:var(--pink-2)}
.ge-quiet{font-size:14.5px;font-weight:600;color:var(--olive);
border-bottom:1.5px solid rgba(76,81,45,.3);padding-bottom:2px}
.ge-quiet:hover{border-color:var(--olive)}
/* ===== החץ של האתר =====
סימן אחד בלבד, בכל מקום: שברון בעובי 2, פינות מעוגלות,
מצביע שמאלה. קודם היו שניים, מסכת SVG בעובי 2.6 וריבוע
מסובב, והם נראו כמו שני אתרים שונים. */
.chev,.caret{width:9px;height:9px;flex:none;
border-inline-start:2px solid currentColor;
border-bottom:2px solid currentColor;
border-end-start-radius:2px;
transform:rotate(45deg);
transition:transform .2s}
.chev{margin-inline-start:3px}
.bkm-toggle.is-open .caret{transform:rotate(-135deg)}
@media(max-width:1180px){
.ge-panel{width:min(42%,420px);inset-inline-start:clamp(16px,3vw,52px)}
}
/* ---------- נייד ----------
הבריף: אל תכווץ את הדסקטופ. בונים קומפוזיציה אחרת.
סדר: סרגל, בלוק כותרת על שמנת, זוג נוכחי, שלושה ריבועים. */
@media(max-width:760px){
.ge-nav{position:absolute;inset-inline:0;top:100%;flex-direction:column;
gap:0;background:var(--paper);padding:4px 20px 14px;display:none;
border-bottom:1px solid rgba(39,40,32,.1)}
.ge-head.is-open .ge-nav{display:flex}
.ge-nav a{padding:12px 0;font-size:16px;
border-bottom:1px solid rgba(39,40,32,.07)}
.ge-burger{display:flex}
.hero-ge{background:var(--paper);padding:0 0 clamp(18px,4vw,26px)}
.ge-art{display:block;line-height:0}
.ge-art img{width:100%;max-width:none;height:auto;display:block}
.ge-panel{padding-top:clamp(20px,5vw,30px)}
.ge-panel{position:relative;inset:auto;width:100%;padding:0 20px}
.ge-mark{font-size:clamp(46px,14vw,66px)}
.ge-promise{font-size:17px}
.ge-actions{margin-top:20px}
.ge-btn{width:100%;max-width:340px}
}
@media(prefers-reduced-motion:reduce){
.ge-btn:hover{transform:none}
}
/* ================= מקטעים משותפים ================= */
.ge-wrap{max-width:1120px;margin:0 auto;padding-inline:clamp(20px,4vw,40px)}
.ge-h2{font-family:var(--book);font-weight:900;
font-size:clamp(26px,3.4vw,46px);line-height:1.12;letter-spacing:-.015em;
color:var(--olive);text-align:center}
.ge-h3{font-family:var(--book);font-weight:700;
font-size:clamp(19px,2.2vw,27px);color:var(--olive)}
.ge-lead{margin:14px auto 0;max-width:64ch;text-align:center;
font-size:clamp(15.5px,1.6vw,18px);line-height:1.65;color:rgba(39,40,32,.76)}
/* ---------- היישוב ולוח המודעות ---------- */
.ge-world{background:var(--paper);padding:clamp(46px,6vw,86px) 0}
.board{
display:grid;gap:clamp(12px,1.6vw,20px);
grid-template-columns:repeat(5,1fr);align-items:start}
/* שורה אחת: ההצבעה רחבה, ושלושה פתקים לידה.
שני האחרונים מופיעים רק אחרי לחיצה על "לכל ההודעות". */
.note.n1{grid-column:span 2;order:1}
.note.n2{order:2}
.note.n3{order:3}
.note.n4{order:4}
.note.n5{order:5;display:none}
.note.n6{order:6;display:none}
.board.is-all{grid-template-columns:repeat(4,1fr)}
.board.is-all .note.n1{grid-column:span 2}
.board.is-all .note.n5,.board.is-all .note.n6{display:block}
.note{position:relative;background:#fffdf7;border:1px solid rgba(39,40,32,.09);
border-radius:4px;padding:20px 18px 18px;
box-shadow:0 6px 16px -10px rgba(39,40,32,.4);
font-size:14.5px;line-height:1.6;color:rgba(39,40,32,.84)}
/* סיבוב קל ולא אחיד, כדי שזה ייראה לוח ולא טבלה */
.note.n1{transform:rotate(-.7deg)} .note.n2{transform:rotate(.6deg)}
.note.n3{transform:rotate(.4deg)} .note.n4{transform:rotate(-.5deg)}
.note.n5{transform:rotate(.8deg)} .note.n6{transform:rotate(-.4deg)}
.note-k{font-size:11.5px;font-weight:700;letter-spacing:.07em;
color:var(--pink);margin-bottom:7px}
.note-s{margin-top:8px;font-size:13px;color:rgba(39,40,32,0.68)}
.pin{position:absolute;top:-6px;inset-inline-start:50%;width:11px;height:11px;
margin-inline-start:-5px;border-radius:50%;background:var(--pink);
box-shadow:0 2px 4px rgba(39,40,32,.35)}
.tape{position:absolute;top:-9px;inset-inline-start:50%;width:54px;height:18px;
margin-inline-start:-27px;background:rgba(217,201,174,.72);
transform:rotate(-2deg)}
/* ---------- ארבעת הספרים ---------- */
.ge-books{position:relative;background:var(--art-cream);background:var(--art-cream);padding:clamp(46px,6vw,86px) 0}
.books-grid{margin-top:clamp(26px,3.2vw,44px);
display:grid;gap:clamp(16px,2.2vw,28px);
grid-template-columns:repeat(4,1fr)}
.bk{display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px}
/* עטיפה לטקסט, כדי שבנייד יהיה כרטיס לרוחב. בדסקטופ
היא שקופה ולא משנה דבר. */
.bk-txt{display:contents}
.bk-cover{display:block;width:100%;border-radius:6px;overflow:hidden;
box-shadow:0 16px 34px -18px rgba(39,40,32,.55);
transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.bk:hover .bk-cover{transform:translateY(-6px)}
.bk-cover img{display:block;width:100%;height:auto}
.bk-n{margin-top:12px;font-size:11.5px;font-weight:700;letter-spacing:.08em;
color:rgba(39,40,32,0.68)}
.bk-t{font-family:var(--book);font-weight:900;font-size:clamp(17px,1.8vw,22px);
line-height:1.15;color:var(--olive)}
.bk-c{font-size:14px;color:rgba(39,40,32,.68)}
.bk-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin-top:4px}
.t-short{display:none}
.bk-chips i{font-style:normal;font-size:11.5px;font-weight:600;
border:1px solid rgba(76,81,45,.26);border-radius:99px;padding:3px 10px;
color:rgba(76,81,45,.92);background:rgba(76,81,45,.05)}
.bk-s{margin-top:8px;font-size:12.5px;font-weight:700;color:rgba(39,40,32,0.68)}
.bk-s.is-out{color:var(--pink)}
/* ---------- איזו סדרה זו ---------- */
.ge-what{background:var(--paper);padding:clamp(40px,5vw,72px) 0}
.what-grid{list-style:none;display:grid;gap:clamp(18px,2.4vw,32px);
grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.what-grid li{display:flex;flex-direction:column;align-items:center;
text-align:center;gap:6px}
/* כל אייקון בתוך עיגול, כדי שהשורה תיראה מכוונת */
.wh-ic{display:grid;place-items:center;width:54px;height:54px;
border-radius:50%;background:rgba(76,81,45,.06);
box-shadow:inset 0 0 0 1px rgba(76,81,45,.14);margin-bottom:8px}
.what-grid svg{width:25px;height:25px;fill:none;stroke:var(--olive);
stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.what-grid b{font-size:15.5px;color:var(--olive)}
.what-grid span{font-size:14px;line-height:1.5;color:rgba(39,40,32,0.68);max-width:24ch}
/* ---------- שיפי ---------- */
.ge-author{background:var(--art-cream);padding:clamp(40px,5vw,72px) 0}
/* הטקסט מוגבל ל-52 תווים לשורה, ולכן הבלוק צר מהעמוד.
ממרכזים אותו, אחרת נשאר פס ריק בצד אחד בלבד. */
.author-in{display:flex;align-items:center;justify-content:center;
gap:clamp(24px,3.4vw,48px)}
.author-in img{width:clamp(96px,11vw,150px);height:auto;flex:none;
border-radius:6px;object-fit:cover;aspect-ratio:1}
.author-in p{margin-top:8px;font-size:15.5px;line-height:1.65;
color:rgba(39,40,32,.78);max-width:46ch}
.author-in .ge-quiet{display:inline-block;margin-top:12px}
/* ---------- פוטר ---------- */
.ge-foot{background:var(--olive);color:#f3efe2}
.foot-in{display:grid;grid-template-columns:1.4fr 1fr 1fr;
gap:clamp(22px,3vw,40px);align-items:start;
padding-block:clamp(30px,3.6vw,46px) clamp(20px,2.4vw,30px)}
.foot-brand{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.foot-brand img{width:88px;height:auto;filter:brightness(0) invert(1);opacity:.92}
.foot-social{display:flex;gap:16px}
.foot-social a{color:rgba(243,239,226,.7)}
.foot-social a:hover{color:#fff}
.foot-social svg{width:20px;height:20px;fill:currentColor;display:block}
.foot-col{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.foot-col span{display:flex;flex-direction:column;gap:9px}
.foot-h{font-size:13px;font-weight:700;letter-spacing:.06em;color:#fff}
.foot-col a{font-size:14px;color:rgba(243,239,226,.72)}
.foot-col a:hover{color:#fff}
.foot-bar{border-top:1px solid rgba(243,239,226,.18);
display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;
max-width:1120px;margin:0 auto;padding:15px clamp(20px,4vw,40px);
font-size:12.5px;color:rgba(243,239,226,0.68)}
.foot-bar a{color:rgba(243,239,226,.8);border-bottom:1px solid rgba(243,239,226,.3)}
@media(max-width:900px){
.books-grid{grid-template-columns:repeat(2,1fr)}
/* בשתי עמודות אין מקום לטרופ הארוך */
.t-long{display:none} .t-short{display:inline}
.foot-in{grid-template-columns:1fr 1fr}
.foot-brand{grid-column:1 / -1}
}
@media(max-width:760px){
.author-in{flex-direction:column;text-align:center}
.author-in p{margin-inline:auto}
/* בנייד הלוח מקוצר: ההצבעה ושני פתקים. שישה פתקים בטור
אחד זה גלילה ארוכה בלי תמורה, והם ממילא צבע ולא מידע. */
.board{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
.board .note{grid-column:span 1!important}
.board .note.n1{grid-column:span 2!important}
.board .note.n3,.board .note.n5,.board .note.n6{display:none}
.board.is-all .note.n3,.board.is-all .note.n5,.board.is-all .note.n6{display:block}
.note{transform:none!important}
.foot-bar{justify-content:center;text-align:center}
}
@media(max-width:520px){
.board{grid-template-columns:1fr}
.board .note,.board .note.n1{grid-column:span 1!important}
.books-grid{gap:18px 14px}
.bk-chips i{font-size:10.5px;padding:2px 8px}
}
/* ================= שכבת האווירה =================
המקטעים היו פסי צבע שטוחים עם טקסט במרכז. כאן נכנס
מה שהופך אותם למקום: מפרידי בוגנוויליה, ענפים בפינות,
ונייר במקום מלבנים. */
.ge-div{--dw:min(66%,580px);
display:block;width:var(--dw);height:auto;
margin-inline:auto;margin-block:calc(var(--dw) * -.0775);
position:relative;z-index:2}
/* ---------- היישוב ---------- */
.ge-world{position:relative;padding-bottom:0}
/* גוון עמוק מעט יותר, כדי שהלוח יישב על רקע משלו */
.ge-boardsec{background:#f0e5d1;padding:clamp(34px,4.4vw,60px) 0 clamp(40px,5vw,70px)}
.ge-boardsec .ge-h3{text-align:center;margin-bottom:clamp(16px,2vw,26px)}
.ge-world .ge-wrap{position:relative;z-index:1}
/* לוח המודעות: נייר על קיר, לא כרטיסים */
.board{position:relative}
.note{background:
linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0) 42%),
#fffdf6;
border:0;border-radius:2px;
box-shadow:0 1px 0 rgba(39,40,32,.1), 0 10px 22px -14px rgba(39,40,32,.55);
padding:22px 18px 20px}
.note::after{content:"";position:absolute;inset-inline:0;bottom:0;height:14px;
background:linear-gradient(180deg, rgba(217,201,174,0), rgba(217,201,174,.22))}
/* ---------- ארבעת הספרים ---------- */
.ge-books{position:relative;position:relative}
.ge-books .ge-h2{position:relative}
/* ---------- שיפי ----------
לא ריבוע צף. תמונה במסגרת, ענף שיוצא ממנה, וטקסט לצידה. */
.ge-author{position:relative;overflow:hidden}
.author-in{align-items:center;gap:clamp(26px,4vw,60px)}
.author-pic{position:relative;flex:none;display:block;
width:clamp(180px,26vw,330px)}
.author-pic > img:first-child{width:100%;height:auto;aspect-ratio:1;
object-fit:cover;border-radius:4px;display:block;
box-shadow:0 18px 44px -22px rgba(39,40,32,.6)}
/* מסגרת מוסטת, כמו תמונה שתלויה על קיר */
.author-pic::after{content:"";position:absolute;inset-inline-end:-12px;bottom:-12px;
width:100%;height:100%;border:1.5px solid rgba(76,81,45,.45);
border-radius:4px;z-index:-1}
/* הטקסט תופס את שאר הרוחב, אחרת הבלוק נדחס לצד אחד
ונשאר פס ריק גדול לידו. */
.author-txt{flex:1;max-width:52ch}
.author-h{text-align:start;margin-top:4px;font-size:clamp(30px,3.6vw,46px)}
.author-p{margin-top:12px;font-size:clamp(15.5px,1.6vw,18px);line-height:1.68;
color:rgba(39,40,32,.78)}
.author-txt .ge-quiet{display:inline-block;margin-top:16px}
@media(max-width:760px){
.ge-div{--dw:min(74%,340px)}
.author-in{flex-direction:column;text-align:center;gap:30px}
.author-txt{text-align:center}
.author-h{text-align:center}
.author-p{margin-inline:auto}
}
/* ================= ריחוף על הזוגות =================
ארבעה אזורים שקופים על האיור, חתוכים באותה זווית.
בריחוף הפאנל מתבהר, השאר מתעמעמים מעט, ונחשף מידע אמיתי. */
.ge-hot{position:absolute;inset:0;z-index:1;display:block}
.ge-hot button{position:absolute;inset:0;display:block;padding:0;border:0;
background:none;cursor:pointer;font-family:inherit;text-align:inherit}
/* הזווית של הפאנלים באיור, כ-8 מעלות */
/* התחתית נקבעת בשורה, לכל פאנל לפי רוחבו */
.hot-in{position:absolute;text-align:center;color:#fff;
opacity:0;transform:translateY(calc(50% + 10px));
transition:opacity .32s,transform .32s;pointer-events:none}
.ge-hot button:hover .hot-in,.ge-hot button:focus-visible .hot-in{opacity:1;transform:translateY(50%)}
.hot-c{display:block;font-size:clamp(11.5px,1.05vw,14px);font-weight:700;letter-spacing:.07em;
color:#f7bed4;text-shadow:0 1px 8px rgba(20,15,8,.9)}
.hot-t{display:block;margin-top:4px;font-family:var(--book);font-weight:900;
font-size:clamp(16px,1.7vw,25px);line-height:1.12;
text-shadow:0 2px 12px rgba(22,17,9,.8)}
.hot-s{margin-top:9px;display:inline-block;font-size:11.5px;font-weight:700;
border-radius:99px;padding:4px 13px;background:rgba(255,255,255,.22);
backdrop-filter:blur(3px)}
.hot-s.is-out{background:var(--pink)}
@media(prefers-reduced-motion:reduce){
.ge-hot a::before,.hot-in{transition:none}
}
/* ================= הצבעת הוועד =================
הפתק היחיד בלוח שאפשר לגעת בו. זה מה שהופך אותו
מדקורציה למקום שקורה בו משהו. */
.note-poll .note-k{color:var(--pink)}
/* הדמיית ההרחבה, כדי שרואים על מה מצביעים */
/* התמונה יושבת מימין להצבעה, קטנה, ולא מעליה */
.poll-body{display:flex;gap:13px;align-items:flex-start;margin-top:8px}
.poll-main{flex:1;min-width:0}
.poll-img{flex:none;width:104px;height:132px;object-fit:cover;
object-position:center 38%;border-radius:4px;display:block}
.poll-q{font-size:15px;line-height:1.55}
.poll-q b{color:var(--olive)}
.poll-ask{display:flex;gap:9px;margin-top:14px}
.poll-b{flex:1;font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;
min-height:42px;border-radius:99px;border:1.5px solid;background:none;
transition:background .2s,color .2s,transform .15s}
.poll-b:hover{transform:translateY(-1px)}
.poll-b.yes{border-color:var(--olive);color:var(--olive)}
.poll-b.yes:hover{background:var(--olive);color:#fff}
.poll-b.no{border-color:var(--pink);color:var(--pink)}
.poll-b.no:hover{background:var(--pink);color:#fff}
[hidden]{display:none!important}
.poll-res{margin-top:14px;display:flex;flex-direction:column;gap:9px}
.poll-row{display:flex;align-items:center;gap:10px;font-size:13.5px}
.poll-row > span:first-child{flex:0 0 34px;color:rgba(39,40,32,.7)}
.poll-bar{flex:1;height:9px;border-radius:99px;
background:rgba(39,40,32,.1);overflow:hidden}
.poll-bar i{display:block;height:100%;width:0;border-radius:99px;
transition:width .7s cubic-bezier(.2,.7,.3,1)}
#barYes{background:var(--olive)}
#barNo{background:var(--pink)}
.poll-row b{flex:0 0 40px;text-align:start;font-size:13px;color:var(--olive)}
.poll-note{margin-top:4px;font-size:12.5px;line-height:1.5;
color:rgba(39,40,32,0.68)}
@media(max-width:520px){ .note-poll{grid-column:auto} }
/* ================= לוח השעם =================
קודם זה היה סתם כרטיסים על רקע. עכשיו זה לוח: מסגרת עץ,
שעם מנוקד, וצל פנימי שנותן עומק. */
.board{position:relative;padding:clamp(22px,3vw,38px);
border-radius:6px;
background:
/* גרגרי השעם */
radial-gradient(circle at 12% 18%, rgba(120,78,40,.16) 0 2px, transparent 3px),
radial-gradient(circle at 42% 62%, rgba(120,78,40,.14) 0 2px, transparent 3px),
radial-gradient(circle at 73% 28%, rgba(120,78,40,.15) 0 2px, transparent 3px),
radial-gradient(circle at 88% 78%, rgba(120,78,40,.13) 0 2px, transparent 3px),
radial-gradient(circle at 28% 84%, rgba(120,78,40,.12) 0 2px, transparent 3px),
radial-gradient(circle at 61% 8%, rgba(120,78,40,.13) 0 2px, transparent 3px),
radial-gradient(circle at 6% 52%, rgba(120,78,40,.12) 0 2px, transparent 3px),
/* גוון השעם */
linear-gradient(168deg, #dcb98c 0%, #d3ad7e 38%, #c9a172 72%, #d3ad7e 100%);
background-size:26px 26px,31px 31px,23px 23px,29px 29px,35px 35px,27px 27px,33px 33px,auto;
box-shadow:
inset 0 2px 10px rgba(88,54,22,.34),
inset 0 -2px 8px rgba(88,54,22,.22),
0 0 0 9px #8a5a2e,
0 0 0 11px #6f4522,
0 22px 44px -22px rgba(39,40,32,.6)}
/* הפתקים עצמם: נייר על שעם */
.note{background:#fffdf6;
box-shadow:0 1px 0 rgba(39,40,32,.08), 0 10px 20px -12px rgba(60,36,14,.7)}
.note::after{display:none}
/* הנעץ מקבל ראש אמיתי */
.pin{width:13px;height:13px;margin-inline-start:-6px;top:-7px;
background:radial-gradient(circle at 34% 30%, #ff7fa5 0 22%, var(--pink) 60%, #8e1440 100%);
box-shadow:0 3px 5px rgba(60,36,14,.55)}
.tape{background:linear-gradient(180deg, rgba(255,252,240,.8), rgba(232,216,186,.72));
box-shadow:0 1px 2px rgba(60,36,14,.28)}
/* ================= שכבות הריחוף =================
שני אלמנטים אמיתיים בתוך כל קישור, ולא פסאודו. ככה הם
נצבעים צפוי מתחת ל-clip-path ואפשר למדוד אותם בבדיקה. */
.hot-shade{position:absolute;inset:0;display:block;
pointer-events:none;transition:opacity .32s}
/* ההצללה שמופיעה על הפאנל שמרחפים עליו */
.hot-shade{opacity:0;
background:linear-gradient(to top, rgba(18,13,7,.78) 0%, rgba(18,13,7,.7) 24%,
rgba(18,13,7,.56) 48%, rgba(18,13,7,.44) 72%, rgba(18,13,7,.34) 100%)}
.ge-hot button:hover .hot-shade,.ge-hot button:focus-visible .hot-shade{opacity:1}
.hot-in{z-index:2}
/* ================= פוסט־איט =================
הערה של יורם על הפתק, בכתב יד, נייר צהוב ומודבק בזווית. */
.note-sign{margin-top:10px;font-size:13px;color:rgba(39,40,32,0.68);
font-style:italic}
/* הפוסט־איט יושב בצד שמאל־תחתון, כדי לא לכסות את החתימה
של עינת שנמצאת בצד ימין. */
.postit{position:absolute;z-index:3;
inset-inline-end:-14px;bottom:-52px;
width:96px;min-height:78px;padding:14px 10px 10px;
display:flex;flex-direction:column;align-items:center;justify-content:center;
transform:rotate(-7deg);
background:linear-gradient(178deg,#ffe98a 0%,#ffe273 62%,#f6d65c 100%);
box-shadow:0 8px 14px -8px rgba(60,36,14,.7), 0 1px 0 rgba(255,255,255,.5) inset;
font-family:var(--hand-note);font-size:19px;line-height:1;
color:#3a2f10;text-align:center}
/* הפינה המקופלת של הדבק */
.postit::after{content:"";position:absolute;top:0;inset-inline-end:0;
border-width:0 16px 16px 0;border-style:solid;
border-color:transparent rgba(0,0,0,.07) transparent transparent}
.postit em{font-style:normal;display:block;margin-top:5px;font-size:13px;
opacity:.75}
@media(max-width:520px){
/* בנייד הפתק צר, ולכן הפוסט־איט יוצא החוצה אל מעבר לשעם
במקום לשבת על הטקסט. */
.postit{inset-inline-end:-30px;bottom:-16px;
width:72px;min-height:60px;padding:11px 8px 8px;font-size:16px}
.postit em{font-size:11.5px;margin-top:4px}
}
/* ================= הקצה הימני של פאנל 1 =================
האיור נגמר שם, והחיתוך יוצר קו חד על השמנת. דהייה
אופקית מרככת אותו. האחוזים הם של רוחב ההירו כולו,
כי השכבה פרושה על כל ההירו ורק החיתוך מגדיר אותה. */
/* ה-mask הוסר: הוא כויל לאיור קודם שבו החיתוך חרג אל
השמנת, והיום t1/b1 יושבים בדיוק על קצה הציור. הוא רק
מחק את ההצללה של הספר הראשון. */
/* ================= קישוטי הצמחייה =================
בצבע מלא ולא בשקיפות, ותמיד בתוך גבולות המקטע כדי
שלא ייחתכו. יושבים מתחת לטקסט ולא נלחצים. */
.ge-orn{position:absolute;z-index:0;pointer-events:none;
height:auto;display:block}
/* בוגנוויליה שמשתלשלת מעל לוח המודעות */
/* קשת פינתית מעל רשת הספרים */
.orn-books{top:0;inset-inline-start:0;width:clamp(120px,16vw,240px)}
.ge-world .ge-wrap,.ge-books .ge-wrap{position:relative;z-index:1}
/* בנייד יש פחות מקום, ולכן רק שניים ובגודל קטן */
@media(max-width:760px){
/* בנייד אין שוליים, והמשתלשלת נופלת על הכותרת ועל הטקסט.
נשארת רק הקשת מעל הספרים, שם אין טקסט בפינה. */
.orn-books{display:none}
}
/* ================= מפת היישוב =================
סצנה אחת: שלט הכניסה, המפה במסגרת, ופתק על הקיר.
הכל מונח באחוזים על מיכל אחד, ולכן נשאר יציב בכל רוחב. */
/* רצועה אחת בגובה קבוע. הציור נעגן לפינות לפי הגובה שלה,
והמפה ממורכזת מעליו. ככה הכל גדל יחד ואין פס ריק. */
.map-scene{position:relative;margin-top:clamp(22px,2.6vw,36px);
width:100vw;margin-inline:calc(50% - 50vw);
height:clamp(330px,31vw,460px);overflow:hidden}
.sc{position:absolute;bottom:0;width:auto;pointer-events:none;z-index:1;
display:block}
/* שלט הכניסה, נשען על הקצה השמאלי */
.sc-sign{left:0;bottom:-7%;height:106%}
/* מראה היישוב, מימין ומאחור */
.sc-view{right:0;bottom:-19%;height:107%}
/* הפתק הצהוב, נעוץ מעל פינת המפה */
/* בשעה 8 של הנוף: שמאלה ולמטה, על הציור עצמו */
.sc-note{position:absolute;z-index:3;top:auto;bottom:15%;height:auto;
left:74%;width:clamp(96px,9vw,150px);
transform:rotate(6deg);
filter:drop-shadow(0 10px 16px rgba(39,40,32,.35))}
/* המסגרת של המפה */
.map-frame{position:absolute;z-index:2;bottom:6%;left:50%;
transform:translateX(-50%);width:min(600px,44vw)}
/* מצפן פשוט, כמו במפות מצוירות */
.map{position:relative;width:100%;margin:0 auto;line-height:0}
.map img{width:100%;height:auto;display:block}
/* הנקודה */
.mp{position:absolute;transform:translate(-50%,-50%);
width:26px;height:26px;padding:0;border:0;background:none;cursor:pointer;
display:grid;place-items:center;z-index:2}
.mp-dot{display:block;width:13px;height:13px;border-radius:50%;
background:radial-gradient(circle at 34% 30%, #ff7fa5 0 24%, var(--pink) 62%, #8e1440 100%);
box-shadow:0 0 0 2.5px rgba(255,255,255,.92), 0 3px 6px rgba(39,40,32,.45);
transition:transform .2s}
.mp:hover .mp-dot,.mp:focus-visible .mp-dot,.mp.is-open .mp-dot{transform:scale(1.3)}
.mp::before{content:"";position:absolute;width:13px;height:13px;border-radius:50%;
background:var(--pink);opacity:.5;animation:mpPulse 2.6s ease-out infinite}
@keyframes mpPulse{
0%{transform:scale(1);opacity:.5}
70%{transform:scale(2.6);opacity:0}
100%{opacity:0}
}
/* התווית, בסגנון של תווית על מפה מצוירת: גלולה כהה עם
זנב קטן שמצביע אל הנקודה. רק השם, בלי הסבר. */
.mp-pop{position:absolute;bottom:calc(100% + 9px);left:50%;
transform:translateX(-50%) translateY(4px);
padding:5px 13px 6px;border-radius:7px;white-space:nowrap;
background:var(--olive);color:#fdf8ec;
box-shadow:0 8px 16px -8px rgba(39,40,32,.7);
opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s;
pointer-events:none;z-index:4}
.mp-pop::after{content:"";position:absolute;top:100%;left:50%;
transform:translateX(-50%);border:6px solid transparent;
border-top-color:var(--olive)}
/* הרכב הלבן: רק חני, בלי טקסט ובלי רקע */
.mp-pop.has-img{padding:0;background:none;box-shadow:none;width:150px;
white-space:normal}
.mp-pop.has-img::after{display:none}
.mp-pop.has-img img{display:block;width:100%;height:auto;
filter:drop-shadow(0 12px 18px rgba(39,40,32,.45))}
.mp-pop b{font-family:var(--book);font-weight:700;font-size:14.5px;
letter-spacing:-.01em}
.mp:hover .mp-pop,.mp:focus-visible .mp-pop,.mp.is-open .mp-pop{
opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
/* הכרטיס של הנייד */
.map-card{margin:14px auto 0;width:min(420px,88%);
padding:13px 15px;border-radius:11px;background:#fffdf6;text-align:center;
box-shadow:0 14px 30px -16px rgba(39,40,32,.5), 0 0 0 1px rgba(39,40,32,.08)}
.map-card b{display:block;font-family:var(--book);font-weight:700;font-size:17px;
color:var(--olive)}
.map-card img{display:block;width:min(215px,74%);height:auto;margin:0 auto 8px}
@media(min-width:761px){ .map-card{display:none} }
@media(max-width:760px){
/* בנייד אין מקום לסצנה. נשארת המפה בלבד, והתווית עוברת
לכרטיס קבוע מתחתיה כדי שלא תכסה את הכותרת. */
.sc{display:none}
.map-scene{min-height:0;padding-block:6px}
.map-frame{width:min(560px,94%);padding:11px 12px 9px;margin-bottom:0}
.mp{width:30px;height:30px}
.mp-pop{display:none}
}
@media(prefers-reduced-motion:reduce){
.mp::before{animation:none;opacity:0}
.mp-pop{transition:none}
}
/* ================= רשימת תפוצה ================= */
.ge-nl{background:#f6e6e6;color:var(--text);
padding:clamp(34px,4.2vw,58px) 0 clamp(36px,4.4vw,60px);text-align:center}
.ge-nl .ge-h2{color:var(--olive)}
.ge-nl .ge-lead{color:rgba(39,40,32,.7)}
.ge-nl-form{margin:22px auto 0;max-width:520px}
.ge-nl-row{display:flex;gap:10px}
.ge-nl-row input[type=email]{flex:1;min-width:0;min-height:54px;
padding:0 18px;border-radius:99px;font-family:inherit;font-size:16px;
background:#fff;border:1px solid rgba(76,81,45,.18);color:var(--text)}
.ge-nl-row input[type=email]::placeholder{color:rgba(39,40,32,0.68)}
.ge-nl-row .ge-btn{width:auto;flex:none;padding-inline:26px}
.ge-nl-ok{display:flex;gap:9px;align-items:flex-start;margin-top:13px;
text-align:start;font-size:13px;line-height:1.5;color:rgba(39,40,32,0.68);
cursor:pointer}
.ge-nl-ok input{margin-top:3px;flex:none;width:16px;height:16px;accent-color:var(--pink)}
.ge-nl-fine{margin-top:11px;font-size:13px;color:rgba(39,40,32,0.68)}
/* הרשמה בתוך החלון */
.bkm-nl .ge-nl-row input[type=email]{background:#fffdf6;
border:1px solid rgba(76,81,45,.25)}
.bkm-nl .ge-nl-ok{color:rgba(39,40,32,0.68)}
/* ================= נתראה בגבעת אשל ================= */
.foot-see{text-align:center;font-family:var(--book);font-weight:700;
font-size:clamp(18px,2.2vw,26px);color:rgba(243,239,226,.88);
padding-bottom:clamp(18px,2.4vw,30px)}
@media(max-width:640px){
.bkm-in{flex-direction:column;align-items:center;text-align:center}
.bkm-cover{width:min(180px,52%)}
.bkm-txt .bk-chips{justify-content:center}
.bkm-act{text-align:start}
.fmt-grid{grid-template-columns:1fr}
.ge-nl-row{flex-direction:column}
.ge-nl-row .ge-btn{width:100%}
}
/* ================= חלון הספר =================
חלון אחד לארבעת הספרים, עם מעבר ביניהם. מה שמשתנה הוא
אזור הפעולה: לספר שיצא, בחירת פורמט ורכישה. לשלושה
שטרם יצאו, פאנל הרשמה מתויג לפי הספר. */
.bk-cover{cursor:pointer}
.bk-more{margin-top:9px;padding:7px 20px;border-radius:99px;cursor:pointer;
font-family:inherit;font-size:14px;font-weight:700;
color:var(--olive);background:none;border:1.5px solid rgba(76,81,45,.35);
transition:background .2s,color .2s,border-color .2s}
.bk-more:hover{background:var(--olive);border-color:var(--olive);color:#fdf8ec}
.bkm{position:fixed;inset:0;z-index:70;display:grid;place-items:center;
padding:clamp(12px,3vw,44px);background:rgba(24,22,14,.66);
backdrop-filter:blur(3px);overflow:auto}
.bkm[hidden]{display:none}
.bkm-stage{position:relative;width:min(760px,100%)}
.bkm-sheet{position:relative;width:100%;max-height:92vh;overflow:auto;
padding:clamp(20px,2.4vw,30px);border-radius:16px;background:#fdf9f0;
box-shadow:0 34px 80px -26px rgba(24,22,14,.85)}
/* פינת בוגנוויליה, כמו ברפרנס */
.bkm-corner{position:absolute;top:0;left:0;width:clamp(84px,12%,140px);
height:auto;pointer-events:none;z-index:0;transform:scaleX(-1)}
.bkm-x{position:absolute;top:14px;right:16px;z-index:3;
width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
font-size:24px;line-height:1;background:#fff;color:var(--text);
box-shadow:0 4px 12px -4px rgba(39,40,32,.45)}
.bkm-x:hover{background:var(--pink);color:#fff}
/* חצים למעבר בין הספרים */
.bkm-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
background:#fff;box-shadow:0 6px 16px -6px rgba(39,40,32,.5);
display:grid;place-items:center}
.bkm-nav svg{width:19px;height:19px;fill:none;stroke:var(--olive);
stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.bkm-nav:hover svg{stroke:var(--pink)}
.bkm-prev{right:-22px}
.bkm-next{left:-22px}
.bkm-in{position:relative;z-index:1;display:flex;flex-wrap:wrap;
gap:clamp(18px,2.4vw,30px);align-items:center}
.bkm-cover{flex:none;border-radius:8px;
box-shadow:0 24px 46px -18px rgba(39,40,32,.65)}
.bkm-txt{flex:1;min-width:0}
.bkm-n{display:flex;align-items:center;gap:7px;
font-size:13.5px;font-weight:600;color:rgba(39,40,32,0.68)}
.bkm-n img{width:22px;height:auto;opacity:.8}
.bkm-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:3px}
.bkm-t{margin-top:0;font-family:var(--book);font-weight:900;
font-size:clamp(25px,3vw,36px);line-height:1.06;color:var(--olive)}
.bkm-badge{display:inline-block;margin-top:0;flex:none;padding:5px 15px;border-radius:99px;
font-size:13px;font-weight:700;color:var(--pink);background:rgba(198,32,91,.1)}
.bkm-badge.is-out{color:#fff;background:var(--pink)}
.bkm-c{margin-top:9px;display:flex;align-items:center;gap:9px;
font-size:clamp(16px,1.8vw,20px);font-weight:700;color:var(--pink)}
/* לב קטן בין שני השמות, במקום סימן חיבור */
.hrt{width:13px;height:12px;flex:none;background:var(--pink);
-webkit-mask:no-repeat center/contain url("data:image/svg+xml;utf8,");
mask:no-repeat center/contain url("data:image/svg+xml;utf8,")}
.bkm-b{margin-top:11px;font-size:15px;line-height:1.7;color:rgba(39,40,32,.8)}
.bkm-chips{margin-top:11px}
/* הצ׳יפים בחלון ורודים, לא זיתיים */
.bkm-chips i{border-color:rgba(198,32,91,.22);background:rgba(198,32,91,.07);
color:var(--pink);font-size:13px;padding:5px 13px}
/* שורת המטא חוזרת על שורת האייקונים בעמוד, ולכן יורדת */
.bkm-meta{display:none}
/* מפריד הזית עם הלב */
.bkm-div{display:block;position:relative;z-index:1;
width:min(215px,42%);height:auto;margin:clamp(12px,1.6vw,18px) auto}
.bkm-act{position:relative;z-index:1;padding-top:4px}
.bkm-h{text-align:center;font-family:var(--book);font-weight:700;
font-size:clamp(18px,2vw,23px);color:var(--olive)}
/* ארבעת הפורמטים, כרטיס לכל אחד */
.fmt-grid{margin-top:15px;display:grid;grid-template-columns:repeat(4,1fr);gap:11px}
.fmt{display:flex;flex-direction:column;align-items:center;gap:5px;
padding:15px 10px 13px;border-radius:11px;background:#fffdf6;text-align:center;
border:1px solid rgba(76,81,45,.16);
transition:border-color .2s,transform .2s,box-shadow .2s}
.fmt:hover{border-color:var(--pink);transform:translateY(-2px);
box-shadow:0 12px 22px -12px rgba(198,32,91,.45)}
.fmt svg{width:23px;height:23px;fill:none;stroke:var(--pink);
stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fmt b{font-size:14px;font-weight:600;color:rgba(39,40,32,.8)}
.fmt span{font-size:17px;font-weight:800;color:var(--pink)}
.bkm-cta{margin-top:14px;display:flex;gap:11px;justify-content:center;
flex-wrap:wrap}
.bkm-cta .ge-btn{width:auto;min-width:200px;padding-inline:28px;min-height:52px}
.ge-btn-2{background:none;color:var(--pink);
box-shadow:inset 0 0 0 1.5px rgba(198,32,91,.45)}
.ge-btn-2:hover{background:rgba(198,32,91,.07)}
.cart{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round;flex:none}
/* הפאנל של ספר שטרם יצא */
.bkm-soon{padding:clamp(22px,3vw,34px);border-radius:13px;text-align:center;
background:rgba(198,32,91,.07)}
.bkm-sub{margin-top:5px;font-size:14.5px;color:rgba(39,40,32,.68)}
.bkm-nl{margin-top:15px;max-width:480px;margin-inline:auto}
.bkm-fine{margin-top:11px;font-size:12.5px;color:rgba(39,40,32,0.68)}
.bkm-nl .ge-nl-row input[type=email]{background:#fff;
border:1px solid rgba(76,81,45,.2)}
.bkm-nl .ge-nl-ok{color:rgba(39,40,32,0.68)}
/* ---------- החלון בנייד ----------
לא מכווצים את הדסקטופ. הכריכה והכותרת יושבות בשורה אחת,
המפריד והשורה הקטנה יורדים, והפורמטים בשתי עמודות. הכל
כדי שהחלון ייכנס למסך בלי גלילה. */
@media(max-width:760px){
.bkm{padding:8px;align-items:center}
.bkm-sheet{padding:14px 13px 15px;border-radius:14px}
.bkm-in{flex-direction:row;align-items:center;gap:14px;text-align:start}
.bkm-cover{width:auto;height:138px;max-width:40%;flex:none}
.bkm-txt{padding-top:0}
.bkm-n{font-size:12px;gap:5px}
.bkm-n img{width:17px}
.bkm-head{gap:8px;margin-top:2px}
.bkm-t{font-size:22px}
.bkm-badge{padding:4px 11px;font-size:11.5px}
.bkm-c{margin-top:7px;font-size:15px;gap:7px}
/* התקציר עובר מתחת לשורת הכריכה, שם יש רוחב מלא */
.bkm-b{order:9;font-size:13.5px;line-height:1.58;margin-top:10px}
.bkm-chips{margin-top:8px;gap:5px}
.bkm-chips i{font-size:12px;padding:4px 10px}
.bkm-meta,.bkm-div{display:none}
.bkm-act{margin-top:9px;padding-top:9px;
border-top:1px solid rgba(76,81,45,.16)}
.bkm-h{font-size:16px}
.fmt-grid{grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.fmt{padding:8px 6px 7px;gap:1px}
.fmt svg{width:19px;height:19px}
.fmt b{font-size:12.5px}
.fmt span{font-size:15px}
/* הכלל שהסתיר כאן את .ge-btn-1 נשאר מהעיצוב הקודם, שבו
ארבעת כרטיסי הפורמט היו גלויים והכפתור היה כפילות.
היום הרכישה היא דרופדאון, ולכן הכלל הסתיר את הרכישה
עצמה בכל מסך נייד. */
.bkm-cta{margin-top:10px;flex-direction:column;gap:8px}
.bkm-cta .ge-btn{width:100%;min-width:0;min-height:44px;font-size:14.5px}
.bkm-soon{padding:15px 14px}
.bkm-sub{font-size:13px}
.bkm-nl{margin-top:11px}
.bkm-fine{margin-top:8px;font-size:11.5px}
.bkm-nav{width:34px;height:34px}
.bkm-prev{right:2px}
.bkm-next{left:2px}
.bkm-corner{width:82px}
.bkm-x{width:34px;height:34px;font-size:21px;top:10px;right:10px}
}
/* ---------- החלון חייב להיכנס לכל גובה חלון ----------
בלי גלילה בכלל. הכריכה נמדדת ביחס לגובה החלון, התקציר
נחתך אחרי מספר שורות, והעיטורים יורדים כשצפוף. */
.bkm-cover{width:auto;height:min(38vh,300px);max-width:34%;object-fit:cover}
/* התקציר לא נחתך. הוא הסיבה שבגללה פותחים את החלון.
אם הוא ארוך, החלון נגלל. */
.bkm-b{display:block}
@media(max-height:820px){
.bkm-sheet{padding:clamp(16px,2vw,24px)}
.bkm-div{margin-block:10px;width:min(180px,36%)}
.bkm-cover{height:min(34vh,260px)}
}
@media(max-height:700px){
.bkm-meta{display:none}
.bkm-div{display:none}
.bkm-act{margin-top:14px;padding-top:14px;
border-top:1px solid rgba(76,81,45,.16)}
.bkm-t{font-size:clamp(22px,2.4vw,29px)}
.fmt{padding:9px 7px 8px}
.bkm-cover{height:min(30vh,215px)}
}
@media(max-height:600px){
.bkm-chips{display:none}
.bkm-badge{display:none}
.fmt svg{display:none}
.bkm-h{font-size:16px}
}
/* ---------- גודל אחיד לכל ארבעת החלונות ----------
קודם כל חלון קיבל את הגובה של התוכן שלו, ולכן מעבר בין
ספרים גרם לקפיצה. עכשיו כולם באותה מידה בדיוק. */
.bkm-sheet{height:min(690px,90vh);
display:flex;flex-direction:column;justify-content:center}
.bkm-in{flex:none}
/* השם האנגלי, קטן ומתחת לעברי. בכרטיסים הוא לא מוצג. */
.bkm-chips i{display:inline-flex;flex-direction:column;align-items:center;
line-height:1.25;padding:6px 13px}
.bkm-chips i em{font-style:normal;font-size:10.5px;font-weight:600;
letter-spacing:.03em;opacity:.62;direction:ltr}
/* בחלונות נמוכים פאנל "בקרוב" הוא הגבוה מבין השניים,
ולכן הוא מתכווץ ראשון. */
@media(max-height:700px){
.bkm-soon{padding:13px 14px}
.bkm-sub{font-size:13px;margin-top:3px}
.bkm-nl{margin-top:10px}
.bkm-fine{margin-top:7px;font-size:11.5px}
.ge-nl-ok{margin-top:9px;font-size:12px}
.bkm-chips i em{display:none}
}
/* כפתור שלא הוגדר לו גבול מקבל מהדפדפן 2px outset שחור.
זה התגלה רק בטופס שבתוך החלון, ולכן חוסמים את זה בשורש. */
.ge button:not([class*="poll"]):not(.bk-more):not(.board-more){border-style:none}
/* בנייד השם האנגלי מכפיל את גובה הצ׳יפים ומעמיס. יורד. */
@media(max-width:760px){
.bkm-chips i em{display:none}
.bkm-chips i{padding:4px 11px;font-size:12.5px}
}
/* ---------- יעדי מגע בנייד ----------
אצבע צריכה 44 פיקסלים. כמה מהכפתורים היו 27 עד 34,
וזה הבדל בין לחיצה שנקלטת לבין אחת שמחטיאה. */
@media(max-width:900px){
.bk-more{min-height:44px;padding-inline:24px}
.ge-quiet{display:inline-flex;align-items:center;min-height:44px}
.mp{width:44px;height:44px}
.ge-logo{display:inline-flex;align-items:center;min-height:44px}
.foot-col a{min-height:44px;display:inline-flex;align-items:center}
.ge-nl-ok{padding-block:4px}
.ge-nl-ok input{width:20px;height:20px}
.bkm-nav{width:44px;height:44px}
.bkm-x{width:44px;height:44px}
}
/* ================= עמוד הפרק הראשון ================= */
.prk{background:var(--paper);padding:clamp(30px,5vw,64px) 0 clamp(40px,6vw,80px)}
.prk-in{max-width:660px;margin:0 auto;padding-inline:clamp(20px,5vw,32px);
text-align:center}
.prk-t{font-family:var(--book);font-weight:900;
font-size:clamp(30px,4.4vw,52px);line-height:1.05;color:var(--olive);
margin-top:4px}
.prk-todo{margin:clamp(22px,3vw,34px) 0;padding:16px 18px;border-radius:11px;
background:rgba(198,32,91,.08);text-align:start}
.prk-todo b{display:block;font-size:15px;color:var(--pink);margin-bottom:3px}
.prk-todo span{font-size:14px;line-height:1.6;color:rgba(39,40,32,.72)}
/* גוף הפרק: שורה של 62 תווים, כמו בספר */
.prk-body{margin-top:clamp(20px,2.6vw,32px);text-align:start;
font-size:clamp(16.5px,1.7vw,19px);line-height:1.85;color:rgba(39,40,32,.88)}
.prk-body p{margin-bottom:1.05em}
.prk-body p:first-child::first-letter{float:inline-start;font-family:var(--book);
font-weight:900;font-size:3.1em;line-height:.86;padding-inline-end:.09em;
color:var(--olive)}
.prk-end{margin-top:clamp(34px,4.4vw,60px);padding-top:clamp(26px,3.4vw,40px);
border-top:1px solid rgba(76,81,45,.2);
display:flex;gap:clamp(18px,2.6vw,30px);align-items:center;text-align:start}
.prk-cover{flex:none;width:clamp(110px,26%,190px);height:auto;border-radius:7px;
box-shadow:0 18px 36px -16px rgba(39,40,32,.6)}
.prk-end-txt{flex:1;min-width:0}
.prk-end .bkm-h{text-align:start}
.prk-sub{margin-top:4px;font-size:14.5px;color:rgba(39,40,32,.68)}
.prk-end .fmt-grid{grid-template-columns:1fr 1fr}
@media(max-width:640px){
.prk-end{flex-direction:column;align-items:center;text-align:center}
.prk-cover{width:min(160px,46%)}
.prk-end .bkm-h{text-align:center}
}
/* ==================================================
================ נייד: מעבר מסודר ================
הבלוק הזה אחרון בקובץ בכוונה. קודם היו כללי נייד
מפוזרים שכללים מאוחרים יותר דרסו, ומשם הגיעו הכריכה
המתוחה בחלון והטקסטים הזעירים.
================================================== */
@media(max-width:760px){
/* ---- רשת הספרים: כרטיס לרוחב, אחד מתחת לשני ----
שתי עמודות צמצמו את הכריכה, את הכותרת ואת הטרופים
עד שכולם היו קטנים מכדי לקרוא. */
.books-grid{grid-template-columns:1fr;gap:14px;margin-top:22px}
.bk{flex-direction:row;align-items:stretch;text-align:start;gap:14px;
padding:12px;border-radius:13px;background:#fffdf6;
box-shadow:0 10px 22px -14px rgba(39,40,32,.45),
0 0 0 1px rgba(76,81,45,.09)}
.bk-txt{display:flex;flex-direction:column;align-items:flex-start;
flex:1;min-width:0;gap:1px}
.bk-cover{width:104px;flex:none;border-radius:7px;align-self:flex-start}
.bk-n{margin-top:0;font-size:11.5px}
.bk-t{font-size:21px;margin-top:2px}
.bk-c{font-size:14.5px;margin-top:2px}
.bk-chips{justify-content:flex-start;margin-top:8px;gap:6px}
.bk-chips i{font-size:12px;padding:4px 10px}
.bk-s{margin-top:9px;font-size:13px}
/* הכרטיס כולו נלחץ, ולכן הכפתור מיותר וגוזל גובה */
.bk-more{display:none}
.bk{cursor:pointer}
/* ---- המפה: רחבה ככל האפשר ---- */
.map-frame{width:100%;padding:0}
.map-scene{padding-block:4px}
/* ---- החלון: הכריכה ביחס הטבעי שלה ---- */
.bkm .bkm-cover{width:36%;max-width:150px;height:auto;
object-fit:contain;align-self:flex-start}
.bkm .bkm-t{font-size:22px}
.bkm .bkm-b{font-size:14px;line-height:1.6}
.bkm .bkm-chips i{font-size:12.5px}
/* ---- טיפוגרפיה: שום דבר מתחת ל-13 ---- */
.note{font-size:15px}
.note-k{font-size:12.5px}
.what-grid b{font-size:16.5px}
.what-grid span{font-size:15px}
.ge-lead{font-size:16px}
.foot-col a{font-size:15px}
.foot-h{font-size:14px}
.map-hint{font-size:13.5px}
}
/* אזור נגיעה סביב אייקוני הרשתות והקישורים הקטנים בפוטר */
@media(max-width:900px){
.foot-social a{display:grid;place-items:center;width:44px;height:44px;
margin:-11px}
.foot-social{gap:24px}
.foot-bar a{display:inline-block;padding-block:12px}
}
/* ---- שכבת הריחוף בנייד ----
ב-inset:0 היא נפרשה על כל המקטע, כולל בלוק הכותרת שמתחת
לאיור, ולכן כל האחוזים חושבו מול גובה שגוי והתוויות
גלשו מהפאנלים. כאן היא מקבלת בדיוק את יחס האיור. */
@media(max-width:760px){
.ge-hot{bottom:auto;aspect-ratio:1774/1207}
}
/* ---- התווית בנייד ----
הרצועה נמוכה, ושלוש שורות בתוכה נדחסות וגולשות.
נשארת הכותרת בלבד. */
@media(max-width:760px){
.hot-c,.hot-s{display:none}
.hot-t{font-size:15px;line-height:1.15}
}
/* ==================================================
============ מעבר עיצובי על הנייד ============
שלוש בעיות: תוויות ריחוף שנתקעות אחרי נגיעה, רקעים
עכורים, וכרטיסים שלא מוכרים את הספר. אחת אחת.
================================================== */
/* ---- 1. אין ריחוף במגע ----
באייפון :hover נתקע על האלמנט האחרון שנגעו בו, ולכן
תווית נשארה תלויה על האיור בלי שאף אחד ריחף. במגע
הנגיעה פותחת את הספר, והתווית מיותרת. */
@media(hover:none){
.hot-in{display:none}
.hot-shade{display:none}
}
/* ---- 2. רקעים ----
הגוון החום של הלוח היה עכור ושבר את הרצף. שלוש
שכבות נקיות: נייר, שמנת חמה, ונייר שוב. */
.ge-boardsec{background:#fdf6e8}
.ge-books{background:#fffaf0}
.ge-what{background:#fdf6e8}
.ge-author{background:#fffaf0}
@media(max-width:760px){
/* ---- 3. ההירו: פחות אוויר מת ---- */
.ge-panel{padding-top:18px}
.ge-flourish{width:132px;margin-top:6px}
.ge-mark{font-size:clamp(42px,12.5vw,58px)}
.ge-promise{font-size:18px;margin-top:12px}
.ge-sub{margin-top:7px;font-size:14px}
.ge-actions{margin-top:16px;gap:9px}
.ge-btn{min-height:50px;font-size:15.5px}
.hero-ge{padding-bottom:22px}
/* ---- 4. כרטיס הספר: הכריכה מוכרת, ולכן היא גדלה ---- */
.bk{gap:16px;padding:14px;border-radius:15px}
.bk-cover{width:124px}
.bk-t{font-size:22px}
.bk-chips{margin-top:9px;gap:6px}
/* שתי שורות צ׳יפים לכל היותר, אחרת הכרטיס מתארך */
.bk-chips i{font-size:11.5px;padding:4px 9px}
.bk-s{margin-top:10px}
/* ---- 5. לוח המודעות: קצר יותר ---- */
.board{padding:16px;gap:11px}
.note{padding:15px 14px 14px;font-size:14.5px}
.poll-body{gap:11px;margin-top:7px}
.poll-img{width:82px;height:104px}
.poll-q{font-size:14.5px}
.poll-b{min-height:42px}
.poll-row{font-size:13px}
.poll-note{font-size:12.5px;margin-top:8px}
.ge-boardsec{padding:clamp(26px,5vw,38px) 0 clamp(30px,6vw,44px)}
.ge-h3{font-size:20px;margin-bottom:14px}
/* ---- 6. מרווחי מקטעים ---- */
.ge-world{padding:clamp(30px,6vw,44px) 0 0}
.ge-books{padding:clamp(30px,6vw,44px) 0}
.ge-what{padding:clamp(30px,6vw,44px) 0}
.ge-author{padding:clamp(30px,6vw,44px) 0}
.ge-h2{font-size:clamp(24px,7vw,30px)}
}
@media(max-width:760px){
/* ---- 7. המפה ----
הרצועה נשארה בגובה קבוע של 330 פיקסלים גם כשאין בה
ציור צדדי, ולכן נוצר חלל מת של כ-145 פיקסלים סביב
מפה קטנה. בנייד הגובה נקבע לפי המפה עצמה, והיא
נפרשת על כל הרוחב. */
.map-scene{height:auto;padding-block:0;
width:100vw;margin-inline:calc(50% - 50vw)}
.map-frame{position:static;transform:none;
width:100%;padding-inline:12px}
.map-wrap{margin-top:16px}
.mp{width:40px;height:40px}
.mp-dot,.mp::before{width:12px;height:12px}
}
@media(max-width:760px){
/* ---- 8. שורת ההצהרות: שתיים בשורה ----
ארבעה פריטים בטור אחד יצרו עמודה ארוכה ודלילה. */
.what-grid{grid-template-columns:1fr 1fr;gap:22px 14px}
.what-grid b{font-size:15.5px}
.what-grid span{font-size:13.5px;max-width:20ch}
.wh-ic{width:46px;height:46px;margin-bottom:6px}
.what-grid svg{width:21px;height:21px}
/* ---- 9. סימן שאפשר ללחוץ על הכרטיס ----
בלי הכפתור לא היה שום רמז שהכרטיס פתיל. */
.bk{position:relative}
.bk::after{content:"";position:absolute;bottom:14px;left:14px;
width:9px;height:9px;border-left:2px solid rgba(76,81,45,.45);
border-bottom:2px solid rgba(76,81,45,.45);transform:rotate(45deg)}
.bk:active{background:#fff8ec}
}
@media(max-width:760px){
/* ---- 10. כרטיס הספר, פריסה נכונה ----
עמודת הטקסט הייתה 220 פיקסלים, ולכן כל טרופ קיבל שורה
משלו והכרטיס נראה דחוס. הטרופים והסטטוס יורדים לשורה
מלאה מתחת לכריכה, ושם נכנסים שניים־שלושה בשורה. */
.bk{display:flex;flex-wrap:wrap;align-items:flex-start;
row-gap:0;column-gap:14px}
.bk-txt{display:flex;flex-direction:column;align-items:flex-start;
flex:1;min-width:0;gap:1px;padding-top:2px}
.bk-cover{width:112px;flex:none}
.bk-chips{flex-basis:100%;margin-top:12px;gap:7px}
.bk-chips i{font-size:12px;padding:5px 11px}
.bk-s{flex-basis:100%;margin-top:10px}
/* החץ התנגש ב"עכשיו לקריאה". הוא יורד, והסטטוס עצמו
הוא הסימן: הוא צבוע ובולט. */
.bk::after{display:none}
/* ---- 11. הלוח בנייד: שני פתקים ----
שלושה פתקים מאריכים את העמוד בלי להוסיף. שאלת השבוע
יורדת, ונשארות ההצבעה והירקות עם הפוסט־איט. */
.board .note.n2{display:none}
}
/* ================= החלטות לנייד =================
לא כיווץ של הדסקטופ. מה שחוזר על עצמו או לא נושא משקל
יורד, ומה שנשאר מקבל מקום. */
@media(max-width:760px){
/* ---- 12. ההירו: שורה אחת פחות ----
"4 סיפורים, יישוב אחד" חוזר מילה במילה ככותרת מקטע
הספרים שממש מתחת. בנייד זו שורה שלא קונה כלום. */
.ge-sub{display:none}
.ge-promise br{display:none}
.ge-promise{font-size:19px;line-height:1.35}
.ge-actions{margin-top:18px}
/* "לכל הספרים" מופיע גם ככפתור הראשי וגם מתחתיו */
.ge-quiet{display:none}
/* ---- 13. ההצבעה: התמונה ברוחב מלא ----
ב-82 פיקסלים לצד הטקסט היא רק גזלה רוחב והשאלה
נשברה לשלוש שורות. */
.poll-body{flex-direction:column;gap:10px}
.poll-img{width:100%;height:96px;object-position:center 40%}
.poll-main{width:100%}
.poll-q{font-size:15px;line-height:1.5}
/* ---- 14. שורת ההצהרות: שורות ולא רשת ----
שתי עמודות שברו כל כותרת לשתי שורות. */
.what-grid{grid-template-columns:1fr;gap:16px}
.what-grid li{flex-direction:row;align-items:center;text-align:start;gap:13px}
.wh-ic{margin-bottom:0;width:42px;height:42px;flex:none}
.what-grid svg{width:19px;height:19px}
.what-grid b{font-size:16px}
.what-grid span{font-size:14px;max-width:none}
.what-grid li>span:last-child{margin-top:1px}
}
/* ---- 15. כרטיס המפה קיים תמיד ----
קודם הוא הופיע ונעלם, וכל נגיעה בנקודה הקפיצה את כל
העמוד. עכשיו הוא במקום עם רמז, ורק התוכן מתחלף. */
.map-card-hint{display:block;font-family:inherit!important;font-weight:600;
font-size:14px;color:rgba(39,40,32,0.68)}
.map-card{min-height:62px;display:grid;align-items:center}
/* ---- 16. רקעים: שניים, לא שבעה ----
בדרך נכנסו גוונים בערכים ישירים והרצף נשבר. */
.ge-world{background:var(--paper)}
.ge-boardsec{background:var(--art-cream)}
.ge-books{background:var(--paper)}
.ge-what{background:var(--art-cream)}
.ge-author{background:var(--paper)}
/* ---- 17. החלון: גובה לפי התוכן ----
הגובה הקבוע נקבע כשהיו בפנים ארבעה כרטיסי פורמט ופאנל
ורוד. עכשיו יש כפתור אחד, ואותו גובה הפך לחלל ריק ענק. */
.bkm-sheet{height:auto;min-height:0;max-height:90vh}
.bkm-stage{width:min(640px,100%)}
.bkm-in{align-items:flex-start}
/* ---- 18. הרמז במפה הוא לנייד בלבד ----
כלל מאוחר יותר עם display:grid ביטל את ההסתרה בדסקטופ. */
@media(min-width:761px){ .map-card{display:none!important} }
/* ---- 19. המפה: שמאלה ולמעלה ---- */
.map-frame{bottom:11%;left:48.5%}
/* ---- 20. אוויר בין הלוח למפריד ---- */
.ge-boardsec{padding-bottom:clamp(54px,6.4vw,92px)}
/* ---- 21. הוורוד של ההרשמה חם, לא קר ----
הגוון הקודם היה ורוד קריר ליד שמנת חמה, וזה צרם. */
.ge-nl{background:#f8e7e0}
/* ---- 22. תפריט הרכישה ----
חסרו לו כללים לגמרי, ולכן האייקונים ירשו מילוי שחור
ובלי גודל והציפו את החלון. */
.buy-menu{margin-top:10px;display:flex;flex-direction:column;gap:6px;
padding:7px;border-radius:12px;background:#fffdf6;
box-shadow:0 0 0 1px rgba(76,81,45,.14), 0 14px 28px -16px rgba(39,40,32,.5)}
.buy-menu[hidden]{display:none}
.buy-op{display:flex;align-items:center;gap:10px;
padding:11px 13px;border-radius:9px;transition:background .18s}
.buy-op:hover{background:rgba(198,32,91,.07)}
.buy-op svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--pink);
stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.buy-op b{flex:1;min-width:0;font-size:15px;font-weight:600;color:var(--text);
text-align:start}
.buy-op span{font-size:16px;font-weight:800;color:var(--pink);
font-variant-numeric:tabular-nums}
/* תיבת ה"בקרוב" */
.soon-box{margin-top:12px;padding:15px;border-radius:12px;
background:rgba(198,32,91,.06)}
.soon-box[hidden]{display:none}
.soon-box .bkm-sub{margin:0 0 9px;text-align:center}
.bkm-cta{flex-direction:column;align-items:stretch}
.bkm-cta .ge-btn{width:100%;min-width:0}
/* ---- 23. הסגירה בצד שמאל ----
בעברית כפתור הסגירה יושב בשמאל. הפינה הפרחונית חוזרת
לימין, לכיוון הטבעי שלה, ואין יותר צורך לשקף אותה. */
.bkm-x{left:16px;right:auto}
.bkm-corner{left:auto;right:0;transform:none}
/* ---- 24. גובה אחיד בין הספרים ----
מעבר בין ספרים שינה את גובה החלון וקפץ. */
/* ---- 25. הרמז יורד ----
הנקודות הוורודות הפועמות הן כבר האפיון. כרטיס שכתוב בו
"הקישי על נקודה" הוא הוראה מיותרת שגוזלת מקום. בנייד
התווית הקטנה חוזרת, והיא נשארת בתוך גבולות המפה. */
.map-card{display:none!important}
@media(max-width:760px){
.mp-pop{display:block}
.mp-pop.has-img{width:132px}
}
/* ---- 26. פחות אוויר בין הפסקה למפה ---- */
.map-scene{margin-top:clamp(2px,0.4vw,8px)}
.ge-lead{margin-bottom:0}
/* ---- 27. הפרחים נגעו בכותרת ----
באיור החדש הבוגנוויליה נכנסת אל תוך עמודת השמנת עד 82
אחוז מהרוחב בחלק העליון, ומתפנה רק מתחת ל-45 אחוז גובה.
הבלוק צר יותר ונצמד לתחתית, ולכן הוא יושב מתחתיה. */
/* התיקון הזה נוגע רק לדסקטופ. בנייד הבלוק אינו מונח על
האיור אלא מתחתיו, ולכן הוא לא צריך לא רוחב מוגבל ולא
הצמדה לתחתית. */
@media(min-width:761px){
/* הבוגנוויליה באיור החדש מתפנה מעמודת השמנת מתחת ל-45
אחוז גובה, ולכן הבלוק נצמד לתחתית אבל מורם משם, כדי
שהכותרת לא תשב נמוך מדי. */
.ge-panel{justify-content:flex-end;width:min(34%,520px);
padding-block:clamp(60px,7vw,120px) clamp(52px,7vw,118px)}
}
@media(max-width:760px){
/* האיור החדש ממוסגר בזרים, ולכן אין סכנה שהפרחים ייגעו
בכותרת והרווח הגדול מיותר. */
.ge-panel{padding-top:16px}
.hero-ge{padding-bottom:16px}
}
/* הטרופים בכרטיסים באנגלית, ולכן כיוון משמאל לימין */
.bk-chips i{direction:ltr}
.bkm-chips i{direction:rtl}
.bkm-chips i em{direction:ltr}
/* ---- 28. תגית "עכשיו" על הכריכה ----
במקום שורת סטטוס תחת כל ארבעת הכרטיסים. */
.bk-cover{position:relative}
.bk-flag{position:absolute;top:9px;inset-inline-start:9px;z-index:2;
font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.02em;
color:#fff;background:var(--pink);border-radius:99px;padding:4px 11px;
box-shadow:0 4px 12px -4px rgba(198,32,91,.7)}
.bk-s{margin-top:10px;font-size:13.5px;font-weight:700;color:var(--pink)}
/* ---- 29. ההירו: שתי שורות וזהו ----
קודם היו ארבע שורות טקסט מעל הכפתור. עכשיו ברכה אחת
ושורה אחת. הכותרת בשתי שורות, ולכן מעט קטנה יותר. */
.ge-mark{font-size:clamp(34px,4vw,62px);line-height:1.08}
.ge-promise{margin-top:clamp(12px,1.4vw,18px);font-size:clamp(16px,1.6vw,21px);
font-weight:600;color:rgba(39,40,32,.74)}
@media(max-width:760px){
.ge-mark{font-size:clamp(32px,9vw,44px)}
.ge-promise{font-size:16px;margin-top:10px}
}
/* ---- 30. שורת האישור ----
הנוסח עצמו נעול: הוא נשמר אצל כל נרשמת בגרסה 1, וכל
שינוי בו ינתק בין מה שהיא אישרה למה שכתוב אצלנו. לכן
מקטינים את הנפח ולא את המילים. */
.ge-nl-ok{font-size:12px;line-height:1.4;gap:8px;margin-top:10px;
max-width:440px;margin-inline:auto}
.ge-nl-ok input{width:15px;height:15px;margin-top:2px}
/* התגית קטנה ורכה יותר, שלא תתחרה בכריכה */
.bk-flag{top:8px;inset-inline-start:8px;font-size:11px;font-weight:700;
padding:3px 10px;letter-spacing:.03em;
box-shadow:0 3px 9px -3px rgba(198,32,91,.6)}
/* ---- 31. גודל ההירו ----
הקובץ נוצר ב-2900 פיקסלים ממקור של 1788, כלומר נמתח
ב-62 אחוז. שום חידוד לא יתקן מתיחה. עכשיו הקובץ בגודל
המקור, וההצגה מוגבלת כך שהוא לא נמתח מעבר לו. */
@media(min-width:761px){
/* התמונה נצמדת לקצה השמאלי של המסך, והשמנת שממשיכה
ימינה היא בדיוק הגוון שנדגם מהאיור (247,241,227),
כדי שלא יהיה תפר. */
/* ההירו על כל רוחב המסך. התקרה של 1330 נקבעה כשהקובץ
היה 1788 פיקסל ומתיחה מעבר לכך הייתה מטשטשת. הקובץ
החדש הוא 2880, ולכן אין בה צורך. */
.hero-ge{width:100%;margin-left:0;margin-right:auto;
background:#f7f1e3}
/* הכותרות יורדות, כדי שלא יתנגשו בפרחים ובזוג הרביעי */
.ge-panel{padding-block:clamp(96px,13vw,190px) clamp(20px,2.6vw,40px)}
}
/* ---- 32. בלוק הכותרת יושב באזור הנקי ----
נמדד על האיור: מעל 50 אחוז גובה הבוגנוויליה דוחפת את
השמנת עד 80 אחוז רוחב, ומתחת ל-50 היא נקייה מ-64 אחוז.
לכן כל הבלוק חי בחצי התחתון, ברוחב 33 אחוז. */
@media(min-width:761px){
/* נמדד: עמודת השמנת פנויה מ-66 אחוז רוחב כמעט בכל
הגובה, ולכן הבלוק ממורכז אנכית בכל ההירו ולא נדחס
לחצי התחתון. */
/* הבוגנוויליה תופסת את החלק העליון של עמודת השמנת
ומגיעה עד 80 אחוז מהרוחב. הבלוק יושב מתחתיה, ברוחב
נדיב יותר כדי שהטקסט לא ייראה דחוס בקצה. */
.ge-panel{width:35%;inset-inline-start:1.5%;
top:38%;bottom:0;justify-content:center;
padding-block:0 clamp(10px,1.4vw,22px)}
.ge-mark{font-size:clamp(25px,2.7vw,37px);line-height:1.1}
.ge-promise{margin-top:8px;font-size:clamp(14px,1.25vw,16.5px)}
.ge-actions{margin-top:13px;gap:7px}
.ge-btn{min-height:46px;font-size:15px;width:min(100%,310px)}
.ge-quiet{font-size:13.5px}
}
/* הרקע מימין לתמונה, על כל רוחב המסך */
@media(min-width:761px){
.ge-art{background:#f7f1e3}
body.ge{background:#f7f1e3}
}
/* ---- 34. תיקוני המרווחים שנוצרו מיעדי המגע ----
הוספתי min-height 44 פיקסלים כדי שאצבע תפגע, אבל
בשילוב עם align-items:center וגם gap, זה יצר חורים:
קו תחתון שמרחף הרחק מהטקסט, ורשימת פוטר מפוזרת.
שטח הנגיעה מגיע עכשיו מריפוד, שלא מזיז את הקו. */
@media(max-width:900px){
.ge-quiet{min-height:0;display:inline-block;
padding:11px 0 3px;line-height:1.3}
.foot-col a{min-height:0;display:block;padding-block:10px;line-height:1.25}
.foot-col{gap:0}
.foot-col span{gap:0}
}
/* ---- 35. שורת ההצהרות בנייד ----
האייקון והטקסט לא היו מיושרים, והשורה השנייה נשברה
מתחת לאייקון. */
@media(max-width:760px){
.what-grid li{display:grid;grid-template-columns:42px 1fr;
column-gap:13px;row-gap:2px;align-items:center}
.wh-ic{grid-row:1 / span 2;align-self:center}
.what-grid b{align-self:end;line-height:1.2}
.what-grid li>span:last-child{align-self:start;line-height:1.35}
}
/* ---- 36. אוויר סביב המפריד ----
הוא נגע כמעט בטקסט שמעליו ובתמונה שמתחתיו. */
@media(max-width:760px){
.ge-what{padding-bottom:clamp(40px,8vw,60px)}
.ge-author{padding-top:clamp(40px,8vw,60px)}
}
/* ---- 37. אוויר בין המפה למקטע הלוח ----
הציור נגמר וכמעט מיד התחילה הכותרת הבאה. */
.ge-boardsec{padding-top:clamp(40px,5.6vw,76px)}
@media(max-width:760px){
.ge-boardsec{padding-top:clamp(34px,7vw,50px)}
.map-wrap{margin-bottom:10px}
}
/* ---- 38. שורות הטרופים אחידות ----
חלק מהכרטיסים קיבלו שורה אחת וחלק שתיים, ולכן הכותרות
והכריכות לא התיישרו. שטח הטרופים מקבל גובה קבוע של
שתי שורות, וכל הכרטיסים מתיישרים. */
.bk-chips{min-height:62px;align-content:flex-start}
/* שתי שורות בדיוק בכל כרטיס. 66 לא הספיק כי שורה שנייה
מגיעה ל-71, ולכן חלק נשארו בגובה אחד וחלק באחר. */
@media(max-width:760px){ .bk-chips{min-height:71px} }
/* ---- 39. באג: החלון לא נגלל כשנפתח התפריט ----
justify-content:center בתוך מיכל שנגלל חותך את התוכן
משני הקצוות ואי אפשר להגיע אליו. זה קלאסי, וזה מה
שקרה. המרכוז מגיע עכשיו מ-margin:auto על התוכן, שלא
חוסם גלילה. */
.bkm-sheet{justify-content:flex-start;overflow-y:auto;
-webkit-overflow-scrolling:touch}
.bkm-in{margin-top:auto}
.bkm-act{margin-bottom:auto}
/* ---- 40. באג: לפאנל של מקום להישאר לא הייתה הצללה בנייד ----
הדהייה נועדה לרכך את הקצה החתוך של האיור בדסקטופ, שם
הפאנל נגמר ב-63.5 אחוז. בנייד הוא מגיע עד 100 אחוז,
כלומר כולו בתוך האזור השקוף של המסכה, ולכן ההצללה
נעלמה לגמרי. המסכה שייכת לדסקטופ בלבד. */
@media(max-width:760px){
.ge-hot button.hot-n1 .hot-shade{
-webkit-mask-image:none;mask-image:none}
}
/* נקודת המבט בראש הפרק */
.prk-pov{margin-top:14px;font-size:13px;font-weight:700;letter-spacing:.1em;
color:var(--pink)}
.prk-sep{border:0;height:1px;background:rgba(76,81,45,.22);
width:88px;margin:2em auto}
/* פורמט שעוד אין לו כתובת רכישה אינו קישור. קישור שמוביל
ל-# הוא קישור מת, וגם מבלבל וגם נספר כשגיאה בבדיקה. */
.buy-op.is-soon,.fmt.is-soon{opacity:.5;cursor:default;pointer-events:none}
.buy-op.is-soon span,.fmt.is-soon span{color:rgba(39,40,32,0.68);font-weight:700}
/* ---- 41. תיקוני החלון ----
התקציר לא נחתך, החצים יורדים בנייד כי הם חוצים את
התוכן, והגובה נקבע לפי מה שיש ולא לפי מספר קבוע. */
@media(max-width:860px){
.bkm-nav{display:none}
}
.bkm-sheet{min-height:0}
/* ==== 41. נייד: שני ספרים בשורה, ואוויר בכל מקום ====
הכרטיס לרוחב גזל גובה ודחס את הטרופים לשלוש שורות.
עכשיו הכרטיס הוא כריכה עם שם, והטרופים מתגלים בחלון
כשלוחצים עליו. */
@media(max-width:760px){
.books-grid{grid-template-columns:1fr 1fr;gap:20px 14px;
margin-top:clamp(24px,6vw,34px)}
.bk{flex-direction:column;align-items:center;text-align:center;gap:0;
padding:12px 10px 15px;border-radius:14px}
.bk-txt{display:flex;flex-direction:column;align-items:center;
gap:0;width:100%;flex:none;min-width:0}
.bk-cover{width:100%;flex:none;align-self:auto;border-radius:8px}
.bk-n{margin-top:11px;font-size:11px}
.bk-t{font-size:17px;margin-top:4px;line-height:1.2}
.bk-c{font-size:13px;margin-top:4px}
/* הטרופים עוברים לחלון, כדי שהכרטיס יישאר נקי */
.bk-chips{display:none}
.bk-s{margin-top:7px;font-size:12px}
}
/* ---- 42. נייד: מרווחים בין הסקשנים ובתוכם ---- */
@media(max-width:760px){
.ge-world{padding:clamp(42px,9vw,62px) 0 clamp(34px,7vw,50px)}
.ge-boardsec{padding:clamp(42px,9vw,62px) 0 clamp(46px,10vw,66px)}
.ge-books{padding:clamp(42px,9vw,62px) 0}
.ge-lead{margin-top:16px;line-height:1.75}
.map-scene{margin-top:clamp(26px,6vw,38px)}
/* הזר המפריד והכותרת שאחריו נשמו זה על זה */
.ge-flourish{margin-top:clamp(20px,5vw,30px);
margin-bottom:clamp(14px,3.5vw,22px)}
.ge-books .ge-h2{margin-bottom:0}
}
/* ---- 43. נייד: הפרחים נצמדים לקו ההפרדה של התפריט ---- */
@media(max-width:760px){
.hero-ge{padding-top:0;margin-top:0}
.ge-art{margin-top:0}
.ge-art img{margin-top:0}
}
/* ---- 44. הפוטר: הריווח נספר פעמיים ----
לקישור יש padding של 10 למעלה ולמטה, ולעמודה יש gap
של 9, ולכן בין שתי שורות נפתחו 29 פיקסלים. הריווח
נשאר רק ב-padding, כדי שהמגע יישאר גדול אבל הרשימה
תיראה כמו רשימה. */
.foot-col{gap:0}
.foot-col span{gap:0}
.foot-col a{padding-block:7px;line-height:1.3}
@media(max-width:760px){
.foot-col a{padding-block:9px}
}
/* ---- 45. דסקטופ: בלוק הכותרת גבוה יותר וצמוד ימינה ---- */
@media(min-width:761px){
/* נמדד על האיור: גדיל הבוגנוויליה יורד עד 45 אחוז גובה
סביב 76 אחוז רוחב, ולכן הבלוק מתחיל בדיוק מתחתיו.
גבוה מזה הכותרת נכנסת לתוך הפרחים. */
.ge-panel{width:30%;inset-inline-start:.5%;
top:46%;bottom:auto;justify-content:flex-start;
padding-block:0;padding-inline-end:clamp(8px,1.2vw,18px)}
}
/* ==== 46. החלון בנייד: אוויר בצדדים ומעבר נקי ==== */
@media(max-width:760px){
.bkm{padding-inline:16px}
.bkm-sheet{padding:18px 18px 20px;border-radius:18px}
.bkm-in{gap:16px}
.bkm-b{margin-top:12px;line-height:1.7}
.bkm-act{margin-top:16px}
}
/* ---- 47. המעבר בין סקשן האייקונים לסקשן הסופרת ----
הזר נגע בקו שבו הרקע מתחלף, והתמונה התחילה מיד אחריו. */
@media(max-width:760px){
.ge-what{padding-bottom:clamp(30px,7vw,46px)}
.ge-author{padding-top:clamp(34px,8vw,52px)}
}
/* ==== 48. ממצאי בדיקת האיכות ====
א. אין טקסט מתחת ל-12 פיקסלים, גם לא בתוויות הקטנות. */
.bk-n{font-size:12px}
.bk-s{font-size:12.5px}
.bk-c{font-size:13.5px}
@media(max-width:760px){
.bk-n{font-size:12px}
.bk-c{font-size:13.5px}
.bk-s{font-size:12.5px}
}
.note-k{font-size:12px}
.bk-flag{font-size:12px}
/* ב. תיבת הסימון קטנה מכדי להיות מטרת מגע. */
.ge input[type="checkbox"],
.gv input[type="checkbox"]{width:20px;height:20px;flex:none;
accent-color:var(--pink);cursor:pointer}
.ge label:has(input[type="checkbox"]),
.gv label:has(input[type="checkbox"]){align-items:center;gap:10px;
min-height:44px;font-size:12.5px}
/* ---- 49. רצפת גודל טקסט: שום דבר מתחת ל-12 ---- */
.bk-chips i{font-size:12px}
.hot-c,.hot-s{font-size:12px}
.bkm-badge{font-size:12px}
/* ==== 50. החלון בנייד: פריסה שמפסיקה להיות עמודה צרה ====
התקציר ישב בעמודה של 190 פיקסל לצד הכריכה ונשבר ל-14
שורות. עכשיו הוא רץ על כל רוחב היריעה, והכריכה יושבת
רק לצד שם הספר. */
@media(max-width:760px){
.bkm-txt{display:contents}
.bkm-in{display:grid;grid-template-columns:118px minmax(0,1fr);
column-gap:15px;row-gap:3px;align-items:start;text-align:start}
.bkm-cover{grid-column:1;grid-row:1 / span 4;width:118px;align-self:start}
.bkm-n{grid-column:2;margin:0}
.bkm-t{grid-column:2;margin:2px 0 0}
.bkm-badge{grid-column:2;justify-self:start;margin-top:6px}
.bkm-c{grid-column:2;margin-top:6px}
.bkm-b{grid-column:1 / -1;margin-top:16px;text-align:start}
.bkm-meta{grid-column:1 / -1;margin-top:8px}
/* האיקס היה 44 ויושב על התג. קטן יותר, ובפינה. */
.bkm-x{width:34px;height:34px;inset-block-start:10px;inset-inline-start:10px}
.bkm-sheet{padding:16px 16px 18px}
.bkm-n{padding-inline-start:38px}
}
/* ==== 51. אין קו תחתון בקישורים. בשום מקום. ====
הקו נשאר בכמה כללים נפרדים ולכן חזר כל פעם ממקום אחר.
כאן הוא נסגר במכה אחת. הכלל לא נוגע במפרידים של
התפריט בנייד ולא בקו שמתחת לסרגל, שהם מבנה ולא קישוט. */
.ge a,.ge-quiet,.au-more,.foot-col a,.foot-bar a,
.ge-foot a,.bkm-ch,.board a,.credit a{
text-decoration:none;
border-bottom:0;
}
.ge-nav a{border-bottom:revert}
.ge a:hover,.ge-quiet:hover,.au-more:hover,
.foot-col a:hover,.foot-bar a:hover{text-decoration:none;border-bottom:0}
/* ---- 52. הפוטר: שורות צמודות, לא רשימה מרוחה ---- */
.foot-col a{padding-block:5px}
@media(max-width:760px){
.foot-col a{padding-block:6px}
.foot-col{gap:0}
}
/* ---- 53. סקשן הסופרת: פחות אוויר סביב הטקסט ---- */
@media(max-width:760px){
.ge-author{padding-top:clamp(26px,6vw,38px)}
.author-pic{margin-bottom:14px}
.ge-author .ge-eyebrow{margin-bottom:2px}
.ge-author .ge-h3{margin:0 0 10px}
.ge-author p{margin:0 0 14px}
.au-more{margin-top:2px}
}
/* ---- 54. תיקוני הפריסה של החלון בנייד ----
א. לכריכה היה כלל ברוחב אחוזי עם עוצמה גבוהה יותר,
ולכן עמודת הרשת התכווצה אליה והכריכה יצאה זעירה.
ב. האיקס הוזז בטעות לימין, כי inset-inline-start
בעברית הוא הצד הפיזי הימני. כאן הוא חוזר לשמאל. */
@media(max-width:760px){
.bkm .bkm-in .bkm-cover{width:122px;max-width:122px;
position:relative;z-index:2}
.bkm .bkm-x{inset-inline-start:auto;left:12px;right:auto;top:12px}
.bkm-n{padding-inline-start:0}
.bkm-corner{opacity:.55}
}
/* ---- 55. נייד: הזר עולה מעט על קו התפריט ---- */
@media(max-width:760px){
.hero-ge{margin-top:-10px;position:relative;z-index:2}
}
/* ---- 56. דסקטופ: בלוק הכותרת ממורכז אנכית מול הפאנלים ----
הוא ישב במרכז 70 אחוז בעוד הפאנלים ממורכזים ב-50. */
@media(min-width:761px){
.ge-panel{top:0;bottom:0;justify-content:center;
padding-block:clamp(38px,5.4vw,80px) clamp(10px,1.4vw,22px)}
}
/* ---- 57. דסקטופ: הבלוק צר יותר וצמוד לקצה ----
נמדד: גדיל הבוגנוויליה מסתיים ב-82 אחוז מרוחב ההירו.
בלוק רחב יותר דוחף את הטקסט שמאלה לתוך הגדיל, ולכן
מרכוז אנכי היה מתנגש בפרחים. בלוק צר יושב ימינה מהם
ויכול להיות ממורכז מול הפאנלים. */
@media(min-width:761px){
.ge-panel{width:24.5%;inset-inline-start:0;
padding-block:0 clamp(6px,1vw,14px);
padding-inline:clamp(6px,.8vw,12px) clamp(10px,1.4vw,20px)}
.ge-mark{font-size:clamp(24px,2.35vw,32px)}
.ge-promise{font-size:clamp(13px,1.1vw,15px);margin-top:7px}
.ge-actions{margin-top:12px}
.ge-btn{width:100%;min-height:44px;font-size:14px;padding-inline:10px}
}
/* הצמצום בפוטר הוריד את שטח המגע מתחת ל-30. 7 פיקסלים
הם הפשרה: הרשימה נראית צפופה, והאצבע עדיין פוגעת. */
.foot-col a{padding-block:7px}
/* ==== 58. נייד: הכריכה היא הכרטיס ====
הכריכות כבר נושאות את שם הספר, ולכן חזרה עליו מתחתן
יצרה שלוש שורות טקסט לכל אריח והרשת נראתה עמוסה.
נשארים הכריכה, מספר הספר כעיגול על הפינה, ושורה אחת
עם הזוג והמצב. */
@media(max-width:760px){
.books-grid{grid-template-columns:1fr 1fr;
gap:clamp(18px,5vw,26px) clamp(12px,3.4vw,16px)}
.bk{padding:0;background:none;box-shadow:none;border-radius:0;gap:0}
.bk-cover{width:100%;border-radius:11px;
box-shadow:0 14px 26px -14px rgba(39,40,32,.5),
0 0 0 1px rgba(76,81,45,.08)}
/* מספר הספר, עיגול קטן על פינת הכריכה */
.bk-n{position:absolute;top:8px;inset-inline-start:8px;z-index:2;
margin:0;width:23px;height:23px;border-radius:50%;
display:grid;place-items:center;font-size:12px;font-weight:800;
color:#4c512d;background:rgba(253,248,236,.93);
box-shadow:0 2px 8px -2px rgba(39,40,32,.45)}
.bk-t{display:none}
.bk-c{margin-top:9px;font-size:13.5px;font-weight:600;
color:rgba(39,40,32,.78);text-align:center;width:100%}
.bk-s{margin-top:2px;font-size:12px;text-align:center;width:100%}
.bk-txt{display:flex;flex-direction:column;align-items:center;width:100%}
.bk{position:relative}
}
/* המילה "ספר" מיותרת בתוך העיגול, אבל נשמרת לקוראי מסך */
@media(max-width:760px){
.bk-nw{position:absolute;width:1px;height:1px;overflow:hidden;
clip-path:inset(50%);white-space:nowrap}
}
/* ---- 59. העיגול של מספר הספר התנגש בתג "חדש" ----
הסדר ברשת כבר אומר מי ראשון, והתג אומר מה מצבו, ולכן
העיגול היה רעש מיותר שגם ישב בדיוק על התג. */
@media(max-width:760px){
.bk-n{display:none}
.bk-flag{top:9px;inset-inline-start:9px;font-size:12px;
padding:4px 11px;border-radius:99px}
}
/* תג "בקרוב" על הכריכות שטרם יצאו, כדי שיהיה ברור מיד
מה כבר אפשר לקרוא ומה לא. */
.bk-flag.is-soon{background:rgba(253,248,236,.94);color:#4c512d;
box-shadow:0 2px 10px -3px rgba(39,40,32,.5)}
/* התג ישב על שם הסדרה שמודפס בראש הכריכה. הוא עובר
לפינה השמאלית הפיזית, שבה יש רק פרחים ופנס. */
.bk-flag{inset-inline-start:auto;left:9px;right:auto}
/* ==== 60. ראש החלון בנייד: מיושר לגובה הכריכה ====
הכריכה גבוהה מערימת הטקסט שלצידה, ולכן נפער מתחת
לשמות הזוג חלל ריק שנראה כמו תקלה. שתי שורות 1fr
בולעות את ההפרש והטקסט ממורכז מול הכריכה.
שימו לב: ילדי הרשת הם bkm-n, bkm-head, bkm-c, ולא
הכותרת והתג בנפרד. הם יושבים בתוך bkm-head.
התג "עכשיו לקריאה" נראה ככפתור ורוד שאי אפשר ללחוץ
עליו, ולכן הוא חוזר להיות תווית שקטה. */
@media(max-width:760px){
.bkm-in{grid-template-rows:1fr auto auto auto 1fr;
row-gap:0;align-items:center}
.bkm .bkm-in .bkm-cover{grid-column:1;grid-row:1 / 6;align-self:center}
.bkm-n{grid-column:2;grid-row:2;margin:0}
.bkm-head{grid-column:2;grid-row:3;margin:3px 0 0;
display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.bkm-c{grid-column:2;grid-row:4;margin:8px 0 0}
.bkm-b{grid-column:1 / -1;grid-row:6;margin-top:16px}
.bkm-meta{grid-column:1 / -1;grid-row:7;margin-top:8px}
/* תווית מצב, לא כפתור */
.bkm .bkm-badge{background:none;border:0;padding:0;border-radius:0;
color:var(--pink);font-size:12.5px;font-weight:700;box-shadow:none}
.bkm .bkm-badge::before{content:"";display:inline-block;
width:5px;height:5px;border-radius:50%;background:currentColor;
margin-inline-end:6px;vertical-align:2px}
.bkm .bkm-badge:not(.is-out){color:rgba(76,81,45,.72)}
/* האיקס: קטן, שטוח, בתוך הפינה */
.bkm .bkm-x{width:32px;height:32px;top:10px;left:10px;right:auto;
border:0;background:rgba(76,81,45,.09);color:#4c512d;
box-shadow:none;font-size:20px;line-height:1}
.bkm .bkm-x:hover{background:rgba(76,81,45,.16)}
}
/* ==== 61. החלון בנייד: עמודה אחת, ממורכזת ====
הפריסה של כריכה-לצד-טקסט היא פריסה של מסך רחב. במסך
של 390 היא נותנת עמודת טקסט של 190 פיקסל, שורות
קצוצות, וחלל מת לצד הכריכה. עמודה אחת ממורכזת פותרת
את שלושתם בבת אחת, ומשאירה מקום לטרופים שהיו חסרים. */
@media(max-width:760px){
.bkm-sheet{padding:22px 20px 22px}
.bkm-in{display:flex;flex-direction:column;align-items:center;
text-align:center;gap:0;grid-template-rows:none;grid-template-columns:none}
.bkm-txt{display:contents}
.bkm .bkm-in .bkm-cover{width:150px;max-width:150px;
margin:0 0 18px;align-self:center;grid-area:auto}
.bkm-n{grid-area:auto;margin:0;justify-self:auto}
.bkm-head{grid-area:auto;margin:5px 0 0;
flex-direction:column;align-items:center;gap:9px}
.bkm-c{grid-area:auto;margin:11px 0 0}
/* הטרופים חוזרים. הם המידע שהכרטיס ברשת ויתר עליו. */
.bkm-chips{grid-area:auto;display:flex;flex-wrap:wrap;
justify-content:center;gap:8px;margin:17px 0 0}
.bkm-chips i{font-size:12.5px;padding:6px 13px}
.bkm-b{grid-area:auto;margin:18px 0 0;text-align:center;
line-height:1.72}
.bkm-meta{grid-area:auto;margin:13px 0 0}
.bkm-div{margin:16px auto 0;width:150px}
.bkm-act{margin-top:16px}
}
/* הכלל שהעלים את הטרופים היה תלוי בגובה החלון ונדלק על
כל מסך נייד בעל סרגלי דפדפן. עכשיו הוא חל רק על מסך
נמוך באמת, כלומר מכשיר מסובב. */
@media(max-height:600px) and (orientation:landscape){
.bkm-chips{display:flex}
}
@media(max-height:600px) and (orientation:portrait){
.bkm-chips{display:flex}
}
/* ---- 62. אוויר בין הסקשנים בנייד ---- */
@media(max-width:760px){
.ge-what{padding-block:clamp(40px,9vw,58px) clamp(34px,8vw,50px)}
.ge-author{padding-top:clamp(38px,9vw,56px)}
.ge-div{margin-block:clamp(16px,4vw,26px)}
}
/* ==== 63. סקשן הסופרת: קצב אחיד ====
נמדד לפני התיקון: 44 פיקסל בין התמונה לכותרת העילית,
אפס בין השם לפסקה, ואז 30 ועוד קופסה של 44 פיקסל
סביב הקישור. זה נראה כמו שלושה רווחים אקראיים.
כאן נקבע סולם אחד: 20 / 4 / 12 / 20. */
@media(max-width:760px){
.ge-author .author-pic{margin-bottom:20px}
.ge-author .ge-eyebrow{margin:0}
.ge-author .author-h{margin:4px 0 0}
.ge-author .author-p{margin:12px 0 0}
.ge-author .ge-quiet{margin:20px 0 0;min-height:0;
display:inline-block;padding:6px 2px}
}
/* החלון עבר את גובה המסך ב-29 פיקסל ודרש גלילה. הכריכה
קטנה, והמרווחים מתהדקים במעט, בלי לוותר על האוויר. */
@media(max-width:760px){
.bkm .bkm-in .bkm-cover{width:124px;max-width:124px;margin-bottom:14px}
.bkm-head{margin-top:4px}
.bkm-c{margin-top:9px}
.bkm-chips{margin-top:14px;gap:7px}
.bkm-chips i{font-size:12px;padding:5px 12px}
.bkm-b{margin-top:14px;line-height:1.66}
.bkm-div{margin-top:12px}
.bkm-act{margin-top:13px}
.bkm-sheet{padding:20px 18px 20px}
}
/* מסך נמוך: הספר היחיד עם תקציר עוד חרג ב-48 פיקסל. */
@media(max-width:760px) and (max-height:810px){
.bkm .bkm-in .bkm-cover{width:104px;max-width:104px;margin-bottom:12px}
.bkm-chips{margin-top:12px}
.bkm-b{margin-top:12px;line-height:1.6}
.bkm-div{margin-top:10px}
.bkm-act{margin-top:11px}
}
/* ==== 64. שתי שורות מיותרות בחלון ====
"גבעת אשל 1" חוזר על מה שכתוב על הכריכה ועל שם האתר,
ותג המצב חוזר על מה שהכפתור כבר אומר: "לרכישה" מול
"עדכנו אותי כשהוא יוצא". שתיהן יורדות, בנייד ובדסקטופ.
הן נשארות ב-DOM בשביל קוראי מסך. */
.bkm-n,.bkm-badge{position:absolute;width:1px;height:1px;
margin:0;padding:0;overflow:hidden;white-space:nowrap;
clip-path:inset(50%);border:0}
.bkm-head{margin-top:0}
@media(max-width:760px){
.bkm-head{margin-top:0}
.bkm-c{margin-top:8px}
}
/* ==== 65. המפריד יושב על קו הצבע ====
הוא ריחף מתחת לגבול שבין שני הרקעים במקום להיות
ממורכז עליו. הגובה נקבע מפורשות כדי שאפשר יהיה
למשוך אותו למעלה בדיוק בחצי ממנו, והמרווח התחתון
מחזיר לסקשן הבא את מקומו. */
/* המפריד יושב בין שני סקשנים, וכדי שמרכזו ייפול בדיוק על
קו הצבע שניהם נמשכים אליו בחצי גובהו. margin חיובי למטה
דחף את הסקשן הבא גובה שלם מתחת למרכז. */
.ge-div{--dh:clamp(36px,9vw,58px);
height:var(--dh);width:auto;max-width:86%;object-fit:contain;
display:block;position:relative;z-index:3;
margin-block:calc(var(--dh) / -2) calc(var(--dh) / -2);
margin-inline:auto}
/* ==== 66. תיבת האישור יצאה מהיישור של הטופס ====
התווית הייתה ממורכזת, ולכן הריבוע בלט ימינה מקצה
השדה והכפתור שמעליו. */
.ge-nl-ok{display:flex;align-items:flex-start;gap:10px;
width:100%;max-width:var(--nlw,560px);margin:12px auto 0;
text-align:start}
.ge-nl-ok span{flex:1;min-width:0}
.ge-nl-ok input[type="checkbox"]{flex:none;margin-top:2px}
.ge-nl-fine{text-align:center}
/* ---- 67. הפתק הצהוב, מיקום ---- */
/* הפתק הצהוב כיסה את השורה הראשונה של ההודעה של עינת.
הוא עובר לפינה התחתונה, שבה יש שטח ריק, והפתק שמתחתיו
מקבל מרווח כדי שלא ייגעו. */
.note .postit{top:auto;bottom:-18px;inset-inline-start:auto;left:-8px;
transform:rotate(-7deg)}
.note.n4{padding-bottom:26px}
@media(max-width:760px){
.note .postit{bottom:-16px;left:-4px;transform:rotate(-7deg) scale(.88)}
.note.n4{padding-bottom:22px;margin-bottom:12px}
}
@media(min-width:761px){
/* בדסקטופ הפתק עדיין נגע בטקסט. הוא נדחף אל השעם. */
.note .postit{left:-30px;bottom:-6px}
}
/* ---- 68. תוויות המפה גלשו מהבועה ----
הטקסט היה רחב מהקופסה שנקבעה לה, ולכן "המכולת של
אברהם" ו"בית העם" נחתכו. הבועה נמדדת לפי התוכן. */
.mp-pop{width:max-content;max-width:min(62vw,230px);white-space:normal}
.mp-pop b{white-space:nowrap}
/* ==== 69. תיבת האישור מיושרת לטקסט שבתוך השדה ====
היא הייתה מיושרת לקצה החיצוני של השדה, אבל העין
משווה אותה לטקסט שבפנים, שמוסט פנימה ברוחב הריפוד.
לכן הריבוע נראה חורג ימינה. */
.ge-nl-ok{padding-inline:var(--fieldpad,16px)}
.ge-nl-fine{padding-inline:var(--fieldpad,16px)}
/* ---- 70. הפאנץ׳ ליין בתקציר ---- */
.bkm-b b{font-weight:800;color:var(--olive)}
/* ==== 71. הפרחים חוצים את קו התפריט ====
הסרגל צויר מעל ההירו ולכן חתך את הזר. עכשיו ההירו
מעליו, והקו התחתון של הסרגל יורד בנייד, כי האיור
עצמו הוא ההפרדה. */
@media(max-width:760px){
.ge-head{z-index:1;border-bottom:0}
.hero-ge{position:relative;z-index:6;margin-top:-6px}
}
/* 72 בוטל. רצועות המעבר יצרו פס נראה לעין מתחת למפריד
הפרחים, והמפריד כבר יושב בדיוק על קו המעבר. */
/* ==== 73. סקשן הסופרת: בלוק אחד, לא שלושה ====
תמונה של 180 פיקסל שצפה באמצע מסך של 390, ואחריה
שלושה גושי טקסט מרוחקים, נקראת כשלושה חלקים נפרדים. */
@media(max-width:760px){
.ge-author .author-in{display:flex;flex-direction:column;align-items:center;
gap:0;max-width:330px;margin-inline:auto}
.ge-author .author-pic{width:min(62%,210px);margin:0 0 18px}
.ge-author .author-pic img{width:100%;height:auto;border-radius:14px}
}
/* ---- 74. הטרופים בחלון: אנגלית בנייד ---- */
@media(max-width:760px){
.bkm-chips i .t-he{display:none}
.bkm-chips i em{display:inline;font-style:normal;font-size:inherit;
font-weight:inherit;direction:ltr}
.bkm-chips i{direction:ltr}
}
/* המסגרת המוסטת שמאחורי התמונה נקבעה לגודל הקודם,
ואחרי ההגדלה היא נשארה תלויה בפינה. */
@media(max-width:760px){
/* לכלל הבסיס יש width/height של 100 אחוז, ולכן הזזה
לבדה השאירה אותה תלויה בפינה. */
.ge-author .author-pic::after{width:auto;height:auto;
inset:10px -10px -10px 10px;border-radius:14px}
}
/* ---- 75. הפאנץ׳ ליין עומד בפני עצמו ---- */
.bkm-b .bkm-bt{display:block}
.bkm-b .bkm-punch{display:block;margin-top:.85em;font-weight:800;
color:var(--olive);line-height:1.5}
.bkm-b .bkm-punch br{display:block;content:""}
/* פער של 90 פיקסל בין הטרופים לתקציר. הוא נוצר משילוב
של margin על שניהם ועוד row-gap של הרשת. */
@media(max-width:760px){
.bkm-chips{margin-bottom:0}
.bkm-b{margin-top:14px}
}
/* ---- 76. היריעה מקבלת מיקוד בלי טבעת גלויה ---- */
.bkm-sheet:focus,.bkm-sheet:focus-visible{outline:none}
/* ---- 77. שדה האימייל בחלון היה גבוה ומודגש מדי ---- */
.bkm-nl .ge-nl-row input[type=email]{min-height:46px;
border:1.5px solid rgba(76,81,45,.28);font-size:15.5px;padding:10px 15px}
.bkm-nl .ge-nl-row input[type=email]:focus{border-color:var(--pink);outline:none}
.bkm-nl .ge-nl-row .ge-btn{min-height:46px}
/* ---- 78. הכותרת ברצועת הדיוור: חום, לא זית ----
זית על ורוד בהיר יוצר רטט לא נעים. חום חם יושב עליו. */
.ge-nl .ge-h2{color:#6f4630}
.ge-nl .ge-lead{color:rgba(94,62,44,.78)}
/* ---- 79. הלוגו והתפריט במרכז הרצועה הנראית ----
ההירו עולה 6 פיקסלים על הסרגל, ולכן המרכז האופטי
גבוה ב-3 פיקסלים מהמרכז הגיאומטרי. */
@media(max-width:760px){
.ge-head{padding-block:10px 16px}
}
/* ---- 80. צמצום קל בחלון, כדי להיכנס בלי גלילה ---- */
@media(max-width:760px){
.bkm .bkm-in .bkm-cover{width:114px;max-width:114px;margin-bottom:12px}
.bkm-c{margin-top:7px}
.bkm-chips{margin-top:11px;gap:6px}
.bkm-chips i{font-size:11.5px;padding:5px 11px}
.bkm-b{margin-top:12px;line-height:1.62}
.bkm-b .bkm-punch{margin-top:.7em}
.bkm-div{margin-top:10px}
.bkm-act{margin-top:11px}
.bkm-sheet{padding:18px 17px 18px}
}
/* ---- 81. הפתקים בלוח, טיפה יותר אוויר ---- */
.board{gap:clamp(14px,1.8vw,24px)}
.note{padding:clamp(15px,1.8vw,21px) clamp(15px,1.8vw,21px) clamp(17px,2vw,23px)}
.note p + p{margin-top:8px}
/* ---- 82. הכותרת בהירו גדולה יותר ----
הקטנתי אותה כשהצרתי את הבלוק כדי לפנות את הגדיל,
והיא יצאה קטנה מדי לכותרת ראשית. */
@media(min-width:761px){
.ge-panel{width:28%}
.ge-mark{font-size:clamp(28px,3.15vw,43px);line-height:1.06}
.ge-promise{font-size:clamp(14px,1.25vw,17px);margin-top:9px}
.ge-actions{margin-top:15px}
.ge-btn{min-height:48px;font-size:15px}
}
/* ---- 83. הטרופים באנגלית בכל רוחב, ועם אוויר מהתקציר ---- */
.bkm-chips i .t-he{display:none}
.bkm-chips i em{display:inline;font-style:normal;font-size:inherit;
font-weight:inherit;direction:ltr}
.bkm-chips i{direction:ltr;flex-direction:row}
.bkm-chips{margin-top:clamp(16px,2vw,24px)}
/* ==== 84. ההירו בדסקטופ: כותרת גדולה, מתחת לגדיל ====
ניסיתי להגדיל את הכותרת בתוך עמודה צרה ליד הבוגנוויליה,
והיא נכנסה לתוך הפרחים. נמדד: הגדיל יורד עד 50 אחוז
גובה. מתחתיו עמודת השמנת פנויה לכל רוחבה, ולכן הבלוק
יורד לחצי התחתון ומקבל שם רוחב וגודל אמיתיים. */
@media(min-width:761px){
.ge-panel{width:40%;inset-inline-start:1.5%;
top:50%;bottom:0;justify-content:center;
padding-block:0 clamp(14px,2vw,30px);padding-inline:0}
.ge-mark{font-size:clamp(30px,3.6vw,50px);line-height:1.05}
.ge-promise{font-size:clamp(15px,1.35vw,19px);margin-top:10px}
.ge-actions{margin-top:17px}
.ge-btn{min-height:50px;font-size:15.5px;width:min(100%,340px)}
.ge-quiet{font-size:14px}
}
/* ---- 85. "עוד ספרים של שיפי" הוא כפתור ---- */
.ge-author .ge-quiet{display:inline-flex;align-items:center;gap:7px;
padding:11px 24px;border-radius:100px;
border:1.5px solid rgba(76,81,45,.4);color:var(--olive);
font-weight:700;font-size:14.5px;background:none;transition:.2s}
.ge-author .ge-quiet:hover{background:rgba(76,81,45,.08);
border-color:var(--olive)}
/* ---- 86. הכותרת ברצועת הדיוור: חום כהה ---- */
.ge-nl .ge-h2{color:#4a2c1c}
.ge-nl .ge-lead{color:rgba(74,44,28,.75)}
/* ---- 87. מפריד הפרחים באותו גודל גם בנייד ---- */
@media(max-width:760px){
.ge-div{--dh:clamp(44px,12vw,62px)}
}
/* ---- 88. הסרגל: הלוגו והתפריט יורדים, לא עולים ---- */
@media(max-width:760px){
.ge-head{padding-block:16px 10px}
}
/* ---- 89. במסכים בינוניים הבלוק חרג מתחתית ההירו ----
ההירו שם נמוך יותר, ולכן החצי התחתון לא מספיק לו. */
@media(min-width:761px) and (max-width:1100px){
.ge-panel{top:40%;width:42%;padding-block:0 clamp(8px,1.4vw,18px)}
.ge-mark{font-size:clamp(24px,2.9vw,34px)}
.ge-promise{font-size:clamp(13px,1.2vw,15px);margin-top:7px}
.ge-actions{margin-top:11px;gap:5px}
.ge-btn{min-height:42px;font-size:14px;width:min(100%,290px)}
.ge-quiet{font-size:13px}
}
/* ---- 90. הסרגל: הלוגו והתפריט נוגעים למטה ----
ההירו עולה על הסרגל, ולכן מרכז גיאומטרי נראה גבוה. */
@media(max-width:760px){
.ge-head{padding-block:16px 8px}
}
/* ---- 91. שורת האייקונים: אוויר בין הפריטים ----
ארבע שורות שנשמו זו על זו. */
.what-grid{gap:clamp(18px,2.4vw,30px) clamp(14px,2vw,24px)}
@media(max-width:760px){
.what-grid{grid-template-columns:1fr;gap:20px}
.ge-what{padding-block:clamp(38px,9vw,56px) clamp(34px,8vw,50px)}
}
/* ב-768 ההירו הכי נמוך וגם הבלוק עדיין גדול. */
@media(min-width:761px) and (max-width:820px){
.ge-panel{top:34%;padding-block:0 8px}
.ge-mark{font-size:22px}
.ge-promise{font-size:12.5px;margin-top:5px}
.ge-actions{margin-top:9px;gap:4px}
.ge-btn{min-height:38px;font-size:13px;width:min(100%,260px)}
.ge-quiet{font-size:12.5px}
}
/* ---- 92. החלון של ספר 1 חסר מעט כדי להיכנס בלי גלילה ---- */
@media(max-width:760px){
.bkm .bkm-in .bkm-cover{width:100px;max-width:100px;margin-bottom:10px}
.bkm-t{font-size:19px}
.bkm-c{margin-top:6px;font-size:14px}
.bkm-chips{margin-top:10px;gap:6px}
.bkm-chips i{font-size:11.5px;padding:4px 10px}
.bkm-b{margin-top:11px;font-size:14.5px;line-height:1.58}
.bkm-b .bkm-punch{margin-top:.6em}
.bkm-div{margin-top:9px}
.bkm-act{margin-top:10px}
.bkm-cta{gap:7px}
.bkm-cta .ge-btn{min-height:44px;font-size:14.5px}
.bkm-sheet{padding:16px 16px 16px}
}
/* ---- 93. אוויר אחרי הפריט האחרון, ופחות לפני התמונה ---- */
@media(max-width:760px){
.ge-what{padding-bottom:clamp(30px,7vw,44px)}
.ge-div{--dh:clamp(44px,12vw,62px)}
.ge-author{padding-top:clamp(18px,4vw,26px)}
.ge-author .author-pic{margin-bottom:16px}
}
/* ==== 94. ההירו: הבלוק נכנס בשלמותו לאזור הפנוי ====
האזור הפנוי מתחת לגדיל הוא חצי מגובה ההירו, כלומר
228 פיקסלים ב-1440. הבלוק היה 241 ולכן נשפך החוצה.
הטיפוגרפיה מתהדקת עד שהוא נכנס עם אוויר משני צדדיו. */
@media(min-width:1101px){
.ge-panel{top:50%;bottom:0;justify-content:center;
width:38%;inset-inline-start:2%;
padding-block:clamp(6px,.8vw,12px) clamp(10px,1.4vw,20px)}
.ge-mark{font-size:clamp(28px,2.7vw,38px);line-height:1.04}
.ge-promise{font-size:clamp(14px,1.15vw,16px);margin-top:8px}
.ge-actions{margin-top:13px;gap:6px}
.ge-btn{min-height:46px;font-size:14.5px;width:min(100%,310px)}
.ge-quiet{font-size:13px}
}
/* ---- 95. השדה בטופס שבתוך החלון התכווץ לאפס ----
הכפתור קיבל רוחב מלא מכלל אחר, ולא נשאר מקום לשדה. */
.bkm-nl .ge-nl-row{flex-wrap:wrap}
.bkm-nl .ge-nl-row input[type=email]{flex:1 1 190px;min-width:0}
.bkm-nl .ge-nl-row .ge-btn{flex:0 0 auto;width:auto;min-width:0;
padding-inline:22px}
@media(max-width:560px){
.bkm-nl .ge-nl-row{flex-direction:column}
.bkm-nl .ge-nl-row .ge-btn{width:100%}
}
/* ==== 96. הפתק הצהוב יושב בשטח ריק, לא על הטקסט ====
כל ניסיון להזיז אותו החוצה החזיר אותו אל המילים. כאן
הפתק נשאר בתוך הפתק הלבן, והפתק הלבן מקבל מדף ריק
בתחתיתו בדיוק בגובה שלו. */
.note.n4{padding-bottom:78px}
.note .postit{top:auto;bottom:10px;inset-inline-start:auto;
left:12px;right:auto;transform:rotate(-6deg)}
@media(max-width:760px){
.note.n4{padding-bottom:74px}
.note .postit{bottom:9px;left:10px;transform:rotate(-6deg) scale(.92)}
}
/* ==== 97. רצועת הדיוור: שמנת, לא ורוד ====
על הוורוד הבהיר גם זית וגם חום יצרו רטט. על השמנת של
העמוד הזית יושב בשקט, והוורוד נשאר לכפתור בלבד. */
.ge-nl{background:var(--paper)}
.ge-nl .ge-h2{color:var(--olive)}
.ge-nl .ge-lead{color:rgba(39,40,32,.7)}
.ge-nl .ge-nl-row input[type=email]{background:#fffdf6;
border:1.5px solid rgba(76,81,45,.24)}
.ge-nl .ge-nl-row input[type=email]:focus{border-color:var(--olive);outline:none}
.ge-nl .ge-nl-ok{color:rgba(39,40,32,.68)}
.ge-nl .ge-nl-fine{color:rgba(39,40,32,0.68)}
/* ==== 98. סקשן הסופרת בדסקטופ היה גבוה מדי ==== */
@media(min-width:761px){
.ge-author{padding-block:clamp(30px,3.6vw,52px)}
.ge-author .author-pic{width:clamp(170px,20vw,250px)}
}
/* ==== 99. ההירו: טיפוגרפיה של כותרת ראשית ====
הבלוק ממורכז אנכית בהירו, וממורכז אופקית בעמודת
השמנת (מרכזה 82 אחוז מהרוחב). הגדלים הם של כותרת
ראשית, לא של כיתוב. */
@media(min-width:1101px){
.ge-panel{top:0;bottom:0;justify-content:center;
/* נמדד על האיור החדש: זר הפינה הימנית יורד עד 51
אחוז גובה סביב 97 אחוז רוחב, ולכן הבלוק נעצר
ב-91 אחוז. הרצועה 67 עד 91 נקייה מ-23 אחוז ומטה.
ה-8 פיקסל למטה מקזזים את הרווח הפנימי של תיבת
השורה בכותרת, וה-22 הם הנגיעה כלפי מטה. */
width:24%;inset-inline-start:9%;
padding-block:22px 8px;padding-inline:0}
.ge-mark{font-size:clamp(34px,3.35vw,52px);line-height:1.04;
letter-spacing:-.01em}
.ge-promise{font-size:clamp(15px,1.3vw,19px);margin-top:12px}
.ge-actions{margin-top:20px;gap:9px}
.ge-btn{min-height:52px;font-size:16px;width:min(100%,330px);
padding-inline:22px}
.ge-quiet{font-size:14px}
}
@media(min-width:761px) and (max-width:1100px){
.ge-panel{top:0;bottom:0;justify-content:center;
width:26%;inset-inline-start:8%;padding-block:18px 7px;padding-inline:0}
.ge-mark{font-size:clamp(26px,3vw,34px);line-height:1.05}
.ge-promise{font-size:clamp(13.5px,1.25vw,16px);margin-top:9px}
.ge-actions{margin-top:14px;gap:6px}
.ge-btn{min-height:46px;font-size:14px;width:min(100%,290px)}
.ge-quiet{font-size:13px}
}
/* פסקאות בתוך התקציר */
.bkm-b .bkm-bt{display:block}
.bkm-b .bkm-bt + .bkm-bt{margin-top:.75em}
/* התקצירים המלאים הוסיפו גובה. צמצום קל כדי שגם הספר
הארוך ביותר ייכנס בלי גלילה. */
@media(max-width:760px){
.bkm .bkm-in .bkm-cover{width:92px;max-width:92px;margin-bottom:9px}
.bkm-t{font-size:18px}
.bkm-c{margin-top:5px;font-size:13.5px}
.bkm-chips{margin-top:9px}
.bkm-b{margin-top:10px;font-size:14px;line-height:1.55}
.bkm-b .bkm-bt + .bkm-bt{margin-top:.6em}
.bkm-div{margin-top:8px}
.bkm-act{margin-top:9px}
}
@media(min-width:761px){
.bkm-b .bkm-bt + .bkm-bt{margin-top:.62em}
.bkm-b{line-height:1.62}
}
/* ==== 100. החלון נכנס במסך בלי גלילה ====
התקצירים המלאים ארוכים פי שניים מהקודמים. ביריעה של
640 פיקסל הם מתפרשים על עשרים שורות. יריעה רחבה יותר
מקצרת את השורות ומורידה את הגובה בלי להקטין טקסט. */
@media(min-width:761px){
.bkm-sheet{width:min(880px,94vw);max-height:92vh;height:auto}
.bkm-b{font-size:16px;line-height:1.6}
.bkm-in{gap:clamp(20px,2.6vw,34px)}
.bkm .bkm-in .bkm-cover{width:clamp(150px,17vw,205px);max-width:none}
.bkm-div{margin-top:14px}
.bkm-act{margin-top:14px}
}
/* מסך נמוך: מקצרים עוד, כדי שגם ספר ארוך ייכנס. */
@media(min-width:761px) and (max-height:820px){
.bkm-b{font-size:15.5px;line-height:1.55}
.bkm-b .bkm-bt + .bkm-bt{margin-top:.5em}
.bkm .bkm-in .bkm-cover{width:clamp(130px,14vw,170px)}
.bkm-sheet{padding:20px 22px}
}
/* חלון דפדפן נמוך במיוחד. */
@media(min-width:761px) and (max-height:790px){
.bkm-b{font-size:15px;line-height:1.5}
.bkm-b .bkm-bt + .bkm-bt{margin-top:.42em}
.bkm .bkm-in .bkm-cover{width:clamp(112px,12vw,146px)}
.bkm-t{font-size:23px}
.bkm-c{margin-top:4px}
.bkm-chips{margin-top:10px}
.bkm-chips i{font-size:12px;padding:4px 11px}
.bkm-div{margin-top:10px}
.bkm-act{margin-top:10px}
.bkm-sheet{padding:18px 20px}
.bkm-cta .ge-btn{min-height:46px}
}
/* טלפון קטן: התקצירים המלאים ארוכים, ולכן מתהדקים עוד. */
@media(max-width:760px){
.bkm .bkm-in .bkm-cover{width:80px;max-width:80px;margin-bottom:8px}
.bkm-t{font-size:17px}
.bkm-c{margin-top:4px;font-size:13px}
.bkm-chips{margin-top:8px;gap:5px}
.bkm-chips i{font-size:11px;padding:4px 9px}
.bkm-b{margin-top:9px;font-size:13.5px;line-height:1.5}
.bkm-b .bkm-bt + .bkm-bt{margin-top:.45em}
.bkm-div{margin-top:7px;width:120px}
.bkm-act{margin-top:8px}
.bkm-cta{gap:6px}
.bkm-cta .ge-btn{min-height:42px;font-size:14px}
.bkm-sheet{padding:14px 14px 15px}
}
/* טלפונים בגובה 780 עד 830: עוד הידוק קטן. */
@media(max-width:760px) and (max-height:830px){
.bkm .bkm-in .bkm-cover{width:70px;max-width:70px;margin-bottom:7px}
.bkm-t{font-size:16.5px}
.bkm-b{font-size:13px;line-height:1.46;margin-top:8px}
.bkm-b .bkm-bt + .bkm-bt{margin-top:.4em}
.bkm-chips{margin-top:7px}
.bkm-chips i{font-size:10.5px;padding:3px 8px}
.bkm-div{margin-top:6px}
.bkm-act{margin-top:7px}
.bkm-cta .ge-btn{min-height:40px;font-size:13.5px}
.bkm-sheet{padding:12px 12px 13px;max-height:94vh}
}
/* ---- 101. איזון אופטי בסרגל ----
שניהם ממורכזים גיאומטרית ב-38, אבל מסת הצורה של
הלוגו יושבת גבוה ושל שלושת הפסים נמוך. */
@media(max-width:760px){
.ge-logo{transform:translateY(3px)}
.ge-burger{transform:translateY(-2px)}
}
/* ==== 102. החלון: מרכוז, רוחב וחצים ====
א. המודאל הוא grid עם justify-content ברירת מחדל,
ולכן היריעה נצמדה שמאלה ואף חרגה מהמסך.
ב. 880 פיקסל היו רחבים מדי בחלון של 1000.
ג. החצים ישבו על שולי היריעה. הם מוצגים רק כשיש
באמת מקום להם מחוצה לה. */
.bkm{justify-items:center;justify-content:center;
place-items:center;padding-inline:clamp(12px,3vw,28px)}
.bkm-sheet{width:min(760px,100%);margin-inline:auto}
@media(min-width:1101px){
.bkm-sheet{width:min(820px,100%)}
}
.bkm-nav{display:none}
@media(min-width:1240px){
.bkm-nav{display:grid;place-items:center}
.bkm-prev{inset-inline-start:auto;left:calc(50% - 470px)}
.bkm-next{inset-inline-end:auto;right:calc(50% - 470px)}
}
/* ---- 103. רוחב היריעה: הכלל האחרון מנצח ----
היו שלושה כללי width ל-.bkm-sheet, והצר שבהם ניצח.
שורות ארוכות יותר מקצרות את הגובה ומונעות גלילה. */
.bkm .bkm-sheet{width:min(640px,100%)}
@media(min-width:900px){ .bkm .bkm-sheet{width:min(800px,100%)} }
@media(min-width:1240px){ .bkm .bkm-sheet{width:min(860px,100%)} }
/* ---- 104. הסרגל: שניהם עולים נגיעה ---- */
@media(max-width:760px){
.ge-logo{transform:translateY(0)}
.ge-burger{transform:translateY(-5px)}
.ge-head{padding-block:13px 11px}
}
/* ---- 105. אוויר לפני המפריד ---- */
.ge-what{padding-bottom:clamp(38px,5vw,64px)}
@media(max-width:760px){
.ge-what{padding-bottom:clamp(40px,9vw,58px)}
}
/* ==== 106. התפריט נפתח מתחת לאיור ====
כדי שהפרחים יחצו את קו הסרגל, ההירו קיבל z-index 6
והסרגל 1. התפריט הנפתח יושב בתוך הסרגל, ולכן הוא
נפתח מתחת לתמונה ונראה כאילו הכפתור לא עושה כלום. */
@media(max-width:760px){
.ge-head.is-open{z-index:30}
}
/* ---- 107. החלון בדסקטופ: הידוק קל בכל גובה ---- */
@media(min-width:761px){
.bkm-b{font-size:15.5px;line-height:1.56}
.bkm-b .bkm-bt + .bkm-bt{margin-top:.5em}
.bkm .bkm-in .bkm-cover{width:clamp(130px,13vw,165px)}
.bkm-t{font-size:clamp(22px,2vw,27px)}
.bkm-div{margin-top:11px}
.bkm-act{margin-top:11px}
.bkm-sheet{padding:20px 22px}
}
/* חלון דפדפן בגובה 760 עד 830: הספר הארוך עוד חרג ב-26. */
@media(min-width:761px) and (max-height:840px){
.bkm .bkm-in .bkm-cover{width:clamp(110px,11vw,138px)}
.bkm-b{font-size:15px;line-height:1.5}
.bkm-b .bkm-bt + .bkm-bt{margin-top:.42em}
.bkm-t{font-size:22px}
.bkm-chips{margin-top:9px}
.bkm-chips i{font-size:12px;padding:4px 10px}
.bkm-div{margin-top:9px}
.bkm-act{margin-top:9px}
.bkm-sheet{padding:16px 20px;max-height:94vh}
.bkm-cta .ge-btn{min-height:44px}
}
/* ---- 108. התג כיסה את "גבעת אשל" שמודפס בראש הכריכה ----
הוא עובר לפינה התחתונה, שבה יש רק איור. */
.bk-flag{top:auto;bottom:9px;left:9px;right:auto}
@media(max-width:760px){
.bk-flag{bottom:9px;left:9px}
}
/* ==== 109. הפער בין הטרופים לתקציר ====
ל-.bkm-chips יש גם את המחלקה .bk-chips, שקיבלה
min-height של 62 פיקסל כדי שכל ארבעת הכרטיסים ברשת
יהיו באותו גובה. בחלון אין רשת, ולכן זה היה חלל ריק
שדחף את התקציר למטה וגרם לגלילה. */
.bkm-chips{min-height:0}
@media(max-width:760px){ .bkm-chips{min-height:0} }
/* ==== 110. החלון בנייד: נוח, ומותר לו לגלול ====
הידקתי הכל כדי שייכנס בלי גלילה, והתוצאה הייתה כריכה
של 70 פיקסל וטקסט של 13. עדיף חלון בגודל נורמלי
שנגלל. הכפתורים מוצמדים לתחתית כדי שהרכישה תישאר
בהישג יד גם באמצע התקציר. */
@media(max-width:760px){
.bkm .bkm-in .bkm-cover{width:118px;max-width:118px;margin-bottom:14px}
.bkm-t{font-size:20px}
.bkm-c{margin-top:7px;font-size:14.5px}
.bkm-chips{margin-top:13px;gap:7px}
.bkm-chips i{font-size:12px;padding:5px 11px}
.bkm-b{margin-top:14px;font-size:14.5px;line-height:1.66}
.bkm-b .bkm-bt + .bkm-bt{margin-top:.7em}
.bkm-div{margin-top:12px;width:140px}
.bkm-sheet{padding:18px 17px 0;max-height:88vh}
/* אזור הפעולה נשאר מוצמד לתחתית היריעה */
.bkm-act{position:sticky;bottom:0;z-index:4;margin-top:14px;
padding:12px 0 16px;
background:linear-gradient(180deg,rgba(253,248,236,0) 0,
var(--art-cream) 14px,var(--art-cream) 100%)}
}
/* ---- 111. פוטר בעמוד הפרק ---- */
.prk-foot{margin-top:0}
.prk-foot .foot-in{display:grid;grid-template-columns:1fr 1fr;
gap:clamp(18px,3vw,34px);max-width:640px;margin:0 auto;
padding:clamp(26px,4vw,40px) clamp(20px,5vw,32px)}
.prk-foot .foot-col{display:flex;flex-direction:column;align-items:flex-start}
/* ---- 112. בלוק המועמדות בחלון ---- */
.bkm-fine{margin:10px 0 0;text-align:center;font-size:12.5px;line-height:1.55;
color:rgba(39,40,32,0.68)}
.bkm-sub{margin:6px 0 0;text-align:center;font-size:14.5px;line-height:1.6;
color:rgba(39,40,32,.72)}
@media(max-width:760px){
.bkm-sub{font-size:13.5px}
.bkm-fine{font-size:12px;margin-top:8px}
}
/* החלון של ספר 1 לפני ההשקה ארוך יותר, כי נוסף לו בלוק
המועמדות. הידוק נוסף רק למצב הזה. */
@media(max-width:760px){
.bkm-sheet{max-height:90vh}
.bkm-cta{gap:8px}
}
/* ---- 113. הפתק הצהוב על החתימה של עינת ----
הוא יושב בתוך הפתק הלבן, והחתימה מיושרת לשמאל ונופלת
בדיוק תחתיו. החתימה עוברת ימינה, מעל המדף הריק. */
.note.n4 .note-sign{text-align:start;position:relative;z-index:2}
.note .postit{z-index:1}
@media(min-width:761px){
/* הפתק רחב יותר ממה שהמדף השאיר לו, ולכן הוא זחל מעלה
אל החתימה. המדף גדל, והוא יורד לתחתיתו ממש. */
.note.n4{padding-bottom:104px}
.note .postit{bottom:6px;left:-30px;transform:rotate(-6deg) scale(.94)}
.note.n4 .note-sign{margin-bottom:4px}
}
/* ---- 114. הפתק הצהוב בנייד, בגודל סביר ---- */
@media(max-width:760px){
.note .postit{transform:rotate(-6deg) scale(1.08);bottom:8px;left:2px}
.note.n4{padding-bottom:92px}
}
/* ==== 115. שדה האימייל בטופס "בקרוב" שבחלון ====
הכלל הכללי לשדות בחלון נותן min-height, וכאן border-radius
של הכפתורים חל גם על ה-input ויצר אליפסה. */
.bkm-nl .ge-nl-row input[type=email]{
min-height:48px;height:48px;border-radius:12px;
padding:12px 15px;font-size:15.5px}
.bkm-nl .ge-nl-row .ge-btn{min-height:48px}
@media(max-width:760px){
.bkm-nl .ge-nl-row input[type=email]{min-height:46px;height:46px}
.bkm-nl .ge-nl-row .ge-btn{min-height:46px}
}
/* ==== 116. הטרופים עולים לעמודת הכריכה ====
הם נקראים כתגיות, לא כהמשך הטקסט, ולכן הם שייכים ליד
הכריכה ולא מתחת לפאנץ׳ ליין. זה גם מקצר את החלון. */
@media(min-width:761px){
/* הטרופים יושבים בתוך עמודת הכריכה, מתחתיה. */
.bkm-in{align-items:flex-start}
.bkm-side{flex:0 0 auto;display:flex;flex-direction:column;
width:clamp(130px,13vw,165px)}
.bkm .bkm-in .bkm-cover{width:100%;max-width:none;margin:0}
.bkm-chips{flex-direction:column;align-items:stretch;
width:100%;margin:12px 0 0;gap:6px;min-height:0}
.bkm-chips i{justify-content:center;text-align:center;font-size:11.5px;
padding:6px 10px;width:100%}
}
@media(max-width:760px){
.bkm-side{display:contents}
}
/* ---- 117. הטרופים: תגיות שטוחות, לא כפתורים ---- */
.bkm-chips i{box-shadow:none;background:rgba(198,32,91,.06);
border-color:rgba(198,32,91,.2);border-radius:99px}
/* ---- 118. הכריכה בחלון: שלמה, בלי חיתוך ---- */
.bkm-cover{object-fit:contain;height:auto;align-self:flex-start}
.bkm .bkm-in .bkm-cover{aspect-ratio:700/1088;object-fit:contain}
/* ==== 119. שדה האימייל נמתח לגובה מלא ====
ל-.ge-nl-row יש flex:1 על השדה. בשורה אופקית זה רוחב,
אבל בחלון היא מתהפכת לעמודה ואז flex:1 הוא גובה, והשדה
נמתח על כל מה שנשאר. */
.bkm-nl .ge-nl-row input[type=email]{flex:0 0 auto}
@media(max-width:560px){
.bkm-nl .ge-nl-row input[type=email]{flex:0 0 auto;width:100%}
}
/* ---- 120. רווח בין הטרופים לכותרת ---- */
@media(max-width:760px){
.bkm-chips{margin-bottom:14px}
}
.bkm-t{margin-top:0}
/* ---- 121. אזור הכפתורים בחלון: רקע אטום ----
המעבר השקוף גרם לטקסט להיראות כאילו הוא נחתך מאחוריו. */
@media(max-width:760px){
.bkm-act{background:var(--art-cream);
box-shadow:0 -14px 16px -10px var(--art-cream)}
}
/* ---- 122. הפתק הצהוב, נמוך יותר ---- */
.note .postit{padding-block:9px 7px;line-height:1.15}
.note .postit em{margin-top:1px}
@media(max-width:760px){
.note .postit{transform:rotate(-6deg) scale(1);bottom:9px}
.note.n4{padding-bottom:80px}
}
/* הפתק הצהוב, קטן עוד */
.note .postit{font-size:15px;padding:8px 14px 6px}
.note .postit em{font-size:12px}
@media(max-width:760px){
.note .postit{transform:rotate(-6deg) scale(.92);bottom:10px}
.note.n4{padding-bottom:72px}
}
/* ---- 123. הפאנל הימני: הקצה מרוכך ----
הכלב ושאר הציור נגמרים באלכסון חד על השמנת, וההצללה
חתכה שם קו קשה. דהייה קצרה מרככת אותו. */
.ge-hot .hot-open[data-n="1"] .hot-shade{
-webkit-mask-image:linear-gradient(to right,#000 0 88%,transparent 100%);
mask-image:linear-gradient(to right,#000 0 88%,transparent 100%)}
@media(max-width:760px){
.ge-hot .hot-open[data-n="1"] .hot-shade{
-webkit-mask-image:none;mask-image:none}
}
/* ==== 124. סירוגין מלא של הרקעים ====
לאורך כל העמוד, בנייד ובדסקטופ: נייר, שמנת, נייר,
שמנת. בכל גבול יש מפריד, ומרכזו יושב על קו הצבע.
הכללים כאן אחרונים ולכן הם גוברים על כל מה שנקבע
קודם בגיליון. */
.ge .ge-world {background:var(--paper)}
.ge .ge-books {background:var(--art-cream)}
.ge .ge-boardsec{background:var(--paper)}
.ge .ge-what {background:var(--art-cream)}
.ge .ge-author {background:var(--paper)}
.ge .ge-nl {background:var(--art-cream)}
/* לוח השעם ישב על שמנת ועכשיו על נייר. הפתקים נשארים
לבנים ולכן הניגוד נשמר. */
/* רווח אחיד סביב כל מפריד, בלי הצטברות עם ריפוד הסקשן */
.ge-div + section,
section + .ge-div{}
.ge-world,.ge-books,.ge-boardsec,.ge-what,.ge-author,.ge-nl{
padding-block:clamp(40px,5vw,72px)}
@media(max-width:760px){
.ge-world,.ge-books,.ge-boardsec,.ge-what,.ge-author,.ge-nl{
padding-block:clamp(38px,9vw,56px)}
}
/* ---- 125. הסירוגין היה עדין מדי ----
ההפרש בין שני הגוונים היה שלוש יחידות ולא נראה בכלל.
שני גוונים של אותו נייר, אחד בהיר ואחד חמים יותר. */
.ge{--tone-a:#fffaf0;--tone-b:#f3e9d6}
.ge .ge-world {background:var(--tone-a)}
.ge .ge-books {background:var(--tone-b)}
.ge .ge-boardsec{background:var(--tone-a)}
.ge .ge-what {background:var(--tone-b)}
.ge .ge-author {background:var(--tone-a)}
.ge .ge-nl {background:var(--tone-b)}
.ge .hero-ge {background:var(--tone-a)}
.ge .ge-art {background:var(--tone-a)}
/* ---- 126. הסרגל והגוף בגוון של ראש העמוד ----
הסרגל נשאר על --paper הישן, ולכן נוצרה רצועה בגוון
שונה מעל האיור, וגם בצדדים של התוכן. */
.ge{background:var(--tone-a)}
.ge .ge-head{background:var(--tone-a)}
/* ---- 127. הגוון השני בהיר יותר ----
#f3e9d6 היה כהה מדי במסך קטן, שבו הרצועה תופסת את כל
הרוחב ואין מסביבה שום דבר שירכך אותה. */
.ge{--tone-b:#faf3e4}
@media(max-width:760px){
.ge{--tone-b:#fbf5e8}
}
/* ---- 128. הסירוגין מתחיל מהמפה ----
ראש העמוד כולו גוון אחד: סרגל, איור, כותרת. הסקשן
הראשון שמשנה גוון הוא זה של המפה. */
.ge .ge-world {background:var(--tone-b)}
.ge .ge-books {background:var(--tone-a)}
.ge .ge-boardsec{background:var(--tone-b)}
.ge .ge-what {background:var(--tone-a)}
.ge .ge-author {background:var(--tone-b)}
.ge .ge-nl {background:var(--tone-a)}
/* ---- 129. שורת האייקונים: אוויר ---- */
.ge-what{padding-block:clamp(48px,6vw,80px)}
.what-grid{gap:clamp(22px,3vw,34px) clamp(16px,2.2vw,26px)}
@media(max-width:760px){
.ge-what{padding-block:clamp(44px,10vw,64px)}
.what-grid{gap:26px}
}
/* ==== 130. גוון העמוד זהה לשמנת שבתוך האיור ====
האיור עצמו מכיל שמנת #f7f0e4, והעמוד היה #fffaf0.
בגבול ביניהם נוצר תפר, וזה מה שנראה כמו שני צבעים
בראש העמוד. עכשיו הם זהים, ולכן ההירו הוא גוש אחד. */
.ge{--tone-a:#f7f0e4;--tone-b:#efe5d3}
@media(max-width:760px){
.ge{--tone-b:#f1e8d8}
}
/* ==== 131. ספרים שטרם יצאו: מוצנעים ====
בגריד רואים שיש ארבעה, עם שם וזוג, אבל הכריכה מוסתרת.
בחלון: משפט אחד והרשמה. בלי תקציר, בלי טרופים. */
.bk-cover.is-veiled img{visibility:hidden}
.bk-cover.is-veiled{position:relative;background:
linear-gradient(160deg,#efe5d3 0%,#e6dac4 55%,#ded0b6 100%);
display:grid;place-items:center}
.bk-cover.is-veiled::after{content:"";position:absolute;inset:14%;
border:1.5px dashed rgba(76,81,45,.3);border-radius:5px}
.bk-cover.is-veiled .bk-flag{z-index:3}
.bkm.is-veiled .bkm-side,
.bkm.is-veiled .bkm-chips,
.bkm.is-veiled .bkm-b,
.bkm.is-veiled .bkm-meta,
.bkm.is-veiled .bkm-div{display:none}
.bkm.is-veiled .bkm-in{display:block;text-align:center}
.bkm.is-veiled .bkm-t{text-align:center}
.bkm.is-veiled .bkm-c{text-align:center}
.bkm-soonline{margin:14px 0 0;text-align:center;font-size:15px;
line-height:1.6;color:rgba(39,40,32,.75)}
.bkm.is-veiled .bkm-act{margin-top:14px;border-top:0;padding-top:0}
/* ==== 132. גודל אחיד לכל החלונות ====
ארבעה חלונות בארבעה גבהים שונים נראים כמו תקלה. גובה
קבוע, והתוכן ממורכז בתוכו. */
.bkm-sheet{min-height:min(620px,82vh)}
@media(max-width:760px){
.bkm-sheet{min-height:min(560px,76vh)}
}
.bkm.is-veiled .bkm-sheet{display:flex;flex-direction:column;
justify-content:center}
/* ---- 133. החצים בחלון: החוצה ---- */
.bkm-nav{display:none!important}
/* ---- 134. רווח זהה לפני הקו המפריד ואחריו ---- */
.bkm-div{margin-block:clamp(14px,2vw,20px)!important}
.bkm-act{margin-top:clamp(14px,2vw,20px)!important;padding-top:0;border-top:0}
/* ---- 135. טופס העדכון בחלון ---- */
.bkm-nl{margin-top:16px;max-width:430px;margin-inline:auto}
.bkm-nl .ge-nl-row{gap:8px}
.bkm-nl .ge-nl-ok{margin-top:12px;font-size:12.5px;line-height:1.55}
.soon-box{background:none;padding:0;margin-top:0}
/* ספר 1 ארוך יותר מהשאר. הגובה האחיד נקבע לפיו, כדי
שארבעת החלונות יהיו זהים בדיוק. */
.bkm-sheet{min-height:min(700px,86vh)}
@media(max-width:760px){
.bkm-sheet{min-height:min(660px,84vh)}
.bkm-b{font-size:14px;line-height:1.56}
.bkm-b .bkm-bt + .bkm-bt{margin-top:.5em}
.bkm .bkm-in .bkm-cover{width:104px;max-width:104px}
}
/* הגובה נקבע פעם אחת, וספר 1 גולל בתוכו אם צריך. ככה
כל ארבעת החלונות זהים בדיוק. */
.bkm-sheet{height:min(700px,86vh);min-height:0;max-height:86vh}
@media(max-width:760px){
.bkm-sheet{height:min(620px,80vh);max-height:80vh}
}
/* חמישה פריטים בשורת האייקונים */
@media(min-width:761px){
.what-grid{grid-template-columns:repeat(5,1fr)}
}
@media(min-width:761px) and (max-width:1100px){
.what-grid{grid-template-columns:repeat(3,1fr)}
}
/* ==== 136. הכריכה המוצנעת: שלט, לא קופסה ריקה ====
מסגרת מקווקוות על שטח ריק נקראת כתקלה. במקומה כריכה
טיפוגרפית עם שם הספר, שמסבירה את עצמה. */
.bk-cover.is-veiled{background:
linear-gradient(165deg,#f3ece0 0%,#e9dfcd 60%,#e0d4bd 100%);
box-shadow:0 12px 24px -14px rgba(39,40,32,.4),
0 0 0 1px rgba(76,81,45,.12)}
.bk-cover.is-veiled::after{display:none}
.bk-veil{position:absolute;inset:0;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:9px;
padding:14% 12%;text-align:center;z-index:2}
.bk-veil i{font-style:normal;font-size:11px;font-weight:700;
letter-spacing:.14em;color:rgba(76,81,45,0.68)}
.bk-veil b{font-family:var(--book);font-weight:900;
font-size:clamp(17px,2.2vw,24px);line-height:1.2;color:var(--olive)}
.bk-veil::before,.bk-veil::after{content:"";display:block;width:30px;height:1px;
background:rgba(76,81,45,.3)}
@media(max-width:760px){
.bk-veil b{font-size:clamp(16px,4.6vw,20px)}
.bk-veil{gap:8px}
}
/* ==== 137. החלון המוצנע: לפי התוכן ====
גובה קבוע על שלוש שורות תוכן יצר שטח ריק גדול. שלושת
החלונות המוצנעים זהים ביניהם ממילא. */
.bkm.is-veiled .bkm-sheet{height:auto;min-height:0;
padding-block:clamp(26px,4vw,40px)}
.bkm.is-veiled .bkm-nl{margin-top:16px}
.bkm.is-veiled .soon-box,
.bkm.is-veiled .bkm-nl{background:none;border:0;padding:0}
.bkm.is-veiled .bkm-act{background:none;box-shadow:none;position:static}
/* ==== 138. ביטול הגובה הקבוע בחלון ====
השילוב של גובה קבוע עם margin:auto שנשארו מכלל ישן
(.bkm-in למעלה, .bkm-act למטה) פתח חלל ענק באמצע ודחף
את הכריכה והטרופים החוצה. הגובה חוזר לפי תוכן, ובמקומו
מוגדר מינימום זהה לכולם, שהוא מה שנראה אחיד בעין. */
.bkm-in{margin-top:0}
.bkm-act{margin-bottom:0}
.bkm-sheet{height:auto;max-height:88vh;
min-height:min(560px,72vh);justify-content:flex-start}
@media(max-width:760px){
.bkm-sheet{min-height:min(520px,66vh);max-height:86vh}
}
/* החלונות המוצנעים היו נמוכים מדי מול ספר 1. מינימום
זהה לכולם, והתוכן ממורכז בתוכו. */
.bkm.is-veiled .bkm-sheet{min-height:min(560px,72vh);
display:flex;flex-direction:column;justify-content:center}
@media(max-width:760px){
.bkm.is-veiled .bkm-sheet{min-height:min(520px,66vh)}
}
/* ==== 139. החלון המוצנע: כרטיס קומפקטי וממורכז ====
מינימום גובה על שלוש שורות תוכן יצר ריבוע ריק, והטקסט
נשאר מיושר לימין כי .bkm-txt מחזיק יישור משלו. */
.bkm.is-veiled .bkm-sheet{
min-height:0!important;height:auto!important;
width:min(440px,100%);padding:clamp(28px,4vw,40px) clamp(22px,3vw,32px);
display:block;text-align:center}
.bkm.is-veiled .bkm-in,
.bkm.is-veiled .bkm-txt,
.bkm.is-veiled .bkm-head{display:block;text-align:center;width:auto;flex:none}
.bkm.is-veiled .bkm-t,
.bkm.is-veiled .bkm-c,
.bkm.is-veiled .bkm-soonline{text-align:center;margin-inline:auto}
.bkm.is-veiled .bkm-t{margin-top:0;font-size:clamp(23px,3vw,29px)}
.bkm.is-veiled .bkm-c{margin-top:8px}
.bkm.is-veiled .bkm-soonline{margin-top:14px;max-width:30ch}
.bkm.is-veiled .bkm-nl{margin-top:18px;max-width:100%}
.bkm.is-veiled .bkm-corner{width:96px;opacity:.5}
.bkm.is-veiled .bkm-x{top:12px;left:12px}
/* הפינה מכסה את שם הזוג. היא יורדת לרקע. */
.bkm.is-veiled .bkm-corner{opacity:.28;width:84px;z-index:0}
.bkm.is-veiled .bkm-in{position:relative;z-index:1}
.bkm.is-veiled .bkm-c{position:relative;z-index:2}
/* ---- 140. שני פרקים בעמוד אחד ---- */
.prk-body + .prk-pov{margin-top:clamp(40px,7vw,68px);
padding-top:clamp(34px,6vw,54px);border-top:1px solid rgba(76,81,45,.18)}
/* ── 141. הבטחת החוויה. שורה אחת מתחת לכותרת הסקשן,
קטנה ממנה ובולטת מהליד, כדי שלא תתחרה באף אחד מהם. ── */
/* בגרסה הראשונה זה היה סריף ורוד ומודגש, וזה התנהג כמו
כותרת שנייה שמתחרה בראשונה. עכשיו זו שורת משנה שקטה.
שלוש השורות יושבות בבלוק flex אחד עם gap אחיד, כדי
שהמרווח בין הכותרת לשורת המשנה יהיה זהה למרווח שמתחתיה. */
.ge .ge-intro{display:flex;flex-direction:column;align-items:center;
gap:clamp(14px,1.7vw,22px);max-width:64ch;margin-inline:auto}
.ge .ge-intro > *{margin:0!important}
.ge .ge-vibe{text-align:center;font-weight:600;text-wrap:balance;
font-size:clamp(15px,1.55vw,18.5px);line-height:1.6;
color:rgba(76,81,45,.9)}
.ge .ge-intro .ge-lead{color:rgba(39,40,32,0.68);text-align:center}
@media(max-width:600px){ .ge .ge-vibe br{display:none} }
/* ── 142. ספרים שעוד לא יצאו אינם נלחצים. ── */
.ge .bk.is-locked,
.ge .bk.is-locked .bk-cover{cursor:default}
.ge .bk.is-locked:hover .bk-cover{transform:none}
/* ── 143. אוויר זהה מסביב לכל מפריד.
המפריד יושב על התפר עם שוליים שליליים, ולכן הרווח שנראה
הוא הריפוד של הסקשן פחות חצי מגובהו. כאן נקבע ריפוד אחיד
לכל ששת הסקשנים, וכל חמשת המפרידים מקבלים אותו רווח בדיוק. ── */
.ge{--secpad:clamp(58px,7vw,92px)}
@media(max-width:760px){ .ge{--secpad:clamp(52px,11vw,72px)} }
.ge .ge-world,.ge .ge-books,.ge .ge-boardsec,
.ge .ge-what,.ge .ge-author,.ge .ge-nl{
padding-block:var(--secpad)!important}
/* ── 144. הפתק הצהוב על הפתק הלבן.
המדף שנשמר לו היה גבוה מהפתק עצמו, וכך נוצר שטח ריק
בתחתית הפתק הלבן. המדף מתקצר והפתק עולה איתו. ── */
.ge .note.n4{padding-bottom:74px}
.ge .note .postit{bottom:14px}
@media(min-width:761px){
.ge .note.n4{padding-bottom:78px}
.ge .note .postit{bottom:12px}
}
/* ── 145. תגית החום. זהה לחלוטין לשאר התגיות: היא ניצבת
לידן, וכל הבדל קטן בגוון או במסגרת נראה כמו תקלה. ── */
.ge .bkm-chips .chip-spicy span[aria-hidden]{font-size:.95em}
/* ── 146. הפתק הצהוב בנייד היה מוגדל ב-1.08 ועלה בגודלו על
הטקסט שמעליו. עכשיו הוא קטן מהכתב שמסביבו, כמו פתק אמיתי. ── */
@media(max-width:760px){
.ge .note .postit{transform:rotate(-6deg) scale(.8);
bottom:8px;left:-8px;transform-origin:bottom left}
.ge .note.n4{padding-bottom:58px}
}
/* ── 147. הפלפל בצד השני של התגית. ── */
.ge .bkm-chips .chip-spicy span[aria-hidden]{margin-inline-end:0}
.ge .bkm-chips .chip-spicy .pep{margin-inline-start:6px;font-size:.95em}
/* ── 148. הפתק הלבן שמר מדף בתחתיתו בשביל הצהוב, והמדף
הזה נראה כמו שטח ריק. הצהוב יוצא החוצה מהפינה, ולכן
הפתק הלבן חוזר לגובה של התוכן שלו בלבד. ── */
.ge .note.n4{padding-bottom:var(--note-pad,18px)}
.ge .note{overflow:visible}
.ge .note .postit{bottom:-16px;z-index:3}
@media(max-width:760px){
.ge .note .postit{transform:rotate(-6deg) scale(.78);
bottom:-14px;left:-10px;transform-origin:bottom left}
}
@media(min-width:761px){
.ge .note .postit{transform:rotate(-6deg) scale(.9);bottom:-18px;left:-24px}
}
/* ── 149. שורת ההמתנה לערוץ שעוד לא פתוח, בתוך תפריט הרכישה. ── */
.ge .bkm-wait{margin-top:12px;padding-top:14px;
border-top:1px solid rgba(76,81,45,.16)}
.ge .bkm-wait > p{margin:0 0 9px;font-size:14px;line-height:1.5;
color:rgba(39,40,32,.72);text-align:center}
.ge .bkm-wait .ge-nl-row{gap:8px}
.ge .bkm-wait input[type=email]{min-height:44px;height:44px;font-size:15px}
.ge .bkm-wait .ge-btn{min-height:44px;font-size:14.5px;white-space:nowrap}
.ge .bkm-wait .ge-nl-ok{margin-top:9px;font-size:12px;line-height:1.45}
/* ── 151. הצל של הכריכה בחלון נפל 24 פיקסל כלפי מטה, ישר
על שורת התגיות שמתחתיה, ונראה כאילו התגיות הראשונות
מוצללות. הוא מתרכך ונאסף פנימה. ── */
.ge #bkmCover{box-shadow:0 14px 28px -20px rgba(39,40,32,.5)}
/* ── 152. הפתק הצהוב בנייד קטן מדי אחרי ההקטנה הקודמת. ── */
@media(max-width:760px){
.ge .note .postit{transform:rotate(-6deg) scale(.92)}
}
/* ── 153. בנייד הכותרת התחילה רחוק מדי מתחתית האיור. ── */
@media(max-width:760px){
.ge .ge-panel{padding-top:clamp(14px,3.5vw,22px)}
}
/* ── 154. הערוץ שעוד לא פתוח אבל אפשר להירשם אליו.
קודם הוא נראה כמו שורה מושבתת, ואי אפשר היה לנחש
שלחיצה עליו פותחת הרשמה. ── */
/* .is-soon מבטל pointer-events, והשורה הזאת ירשה אותו:
היא נראתה לחיצה והלחיצה עברה דרכה אל התפריט שמאחור. */
.ge .buy-op.is-wait{pointer-events:auto;cursor:pointer;opacity:1;
background:rgba(76,81,45,.05);width:100%;text-align:start;
font:inherit;border:0;border-top:1px solid rgba(76,81,45,.12)}
.ge .buy-op.is-wait:hover{background:rgba(198,32,91,.06)}
.ge .buy-op.is-wait > span{color:var(--pink);font-weight:700}
.ge .buy-op.is-wait *{pointer-events:none}
.ge .buy-op.is-wait .soonflag{font-style:normal;font-weight:600;
font-size:11.5px;letter-spacing:.04em;padding:2px 7px;margin-inline-start:7px;
border-radius:99px;background:rgba(76,81,45,.1);color:rgba(39,40,32,0.68);
vertical-align:middle}
.ge .buy-op.is-wait svg{opacity:.55}
/* ── 155. שדה חובה שלא סומן. בלי סימון ויזואלי הלחיצה
על "עדכנו אותי" נראית כאילו היא לא עושה כלום. ── */
.ge form.shows-error :invalid{outline:2px solid var(--pink);outline-offset:2px}
.ge form.shows-error .ge-nl-ok :invalid{outline-offset:3px;border-radius:4px}
.ge form.shows-error .ge-nl-ok span{color:var(--pink)}
/* ── 156. מדרג הגדלים בפתיח: כותרת, שורת משנה, ליד.
שלושתם היו כמעט באותו גודל וזה נקרא כמו גוש אחד. ── */
.ge .ge-intro .ge-h2{font-size:clamp(26px,3.6vw,44px);line-height:1.15}
.ge .ge-vibe{font-size:clamp(16px,1.9vw,21px);line-height:1.5;
font-weight:700;color:var(--olive)}
.ge .ge-intro .ge-lead{font-size:clamp(14px,1.35vw,16px);line-height:1.7;
color:rgba(39,40,32,0.68);max-width:46ch}
/* ── 157. חלון ההרשמה לעדכון. שכבה שנייה מעל חלון הספר.
קודם הוא נפתח בתוך תפריט הרכישה ודחף את כל השורות. ── */
.ge .ge-wait{position:fixed;inset:0;z-index:70;
display:grid;place-items:center;padding:20px;
background:rgba(24,22,14,.55);backdrop-filter:blur(3px)}
.ge .ge-wait[hidden]{display:none}
.ge .ge-wait-sheet{position:relative;width:min(400px,100%);
background:var(--tone-a,#f7f0e4);border-radius:20px;
padding:clamp(28px,5vw,36px) clamp(22px,4vw,30px);
box-shadow:0 34px 80px -26px rgba(24,22,14,.85);text-align:center}
.ge .ge-wait-x{position:absolute;top:10px;inset-inline-start:10px;
width:34px;height:34px;border:0;border-radius:50%;cursor:pointer;
background:rgba(76,81,45,.1);color:var(--olive);font-size:22px;line-height:1}
.ge .ge-wait-x:hover{background:rgba(198,32,91,.12);color:var(--pink)}
.ge .ge-wait-k{margin:0 0 5px;font-size:12px;font-weight:700;
letter-spacing:.14em;color:rgba(76,81,45,.7)}
.ge .ge-wait-t{margin:0 0 18px;font-family:var(--book);font-weight:800;
font-size:clamp(19px,2.4vw,23px);line-height:1.25;color:var(--olive)}
.ge .ge-wait-form .ge-nl-row{flex-direction:column;gap:9px}
.ge .ge-wait-form input[type=email],
.ge .ge-wait-form .ge-btn{width:100%;min-height:48px}
.ge .ge-wait-form .ge-nl-ok{margin-top:12px;font-size:12.5px;
line-height:1.5;text-align:start}
/* ── 158. סרגל הנגישות. הכללים ישבו רק ב-style.css,
ולכן בעמודי גבעת אשל הוא נטען בלי עיצוב. ── */
.acc-fab{position:fixed;left:16px;bottom:16px;z-index:80;width:52px;height:52px;border-radius:50%;padding:0;
display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;
background:#2b6cb0;box-shadow:0 8px 22px rgba(0,0,0,.45);transition:transform .2s}
.acc-fab:hover{transform:scale(1.07)}
.acc-fab svg{width:27px;height:27px;fill:#fff}
.acc-restore{position:fixed;left:0;bottom:88px;z-index:80;width:15px;height:46px;border:none;padding:0;cursor:pointer;
border-radius:0 11px 11px 0;background:#2b6cb0;opacity:.6;display:none}
.acc-restore:hover{opacity:1;width:22px}
body.acc-hidden .acc-fab{display:none!important}
.acc-panel{position:fixed;left:16px;bottom:78px;z-index:81;width:242px;max-height:calc(100vh - 120px);overflow-y:auto;
background:#fbf7ef;border:1px solid #e6ddcb;border-radius:16px;box-shadow:0 16px 40px rgba(0,0,0,.45);
padding:12px;display:none;flex-direction:column;gap:7px;direction:rtl}
.acc-panel.open{display:flex}
.acc-panel .t{font-size:11px;letter-spacing:.14em;color:#9a6b3a;font-weight:700;padding:2px 4px}
.acc-panel button{background:#efe7d6;border:none;border-radius:10px;padding:11px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;color:#241b16;text-align:right}
.acc-panel button:hover{background:#e6ddcb}
.acc-panel button[aria-pressed="true"]{background:var(--rose);color:#fff}
.acc-panel .acc-group{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px}
.acc-panel .acc-group button{padding:10px 4px;text-align:center;font-size:13px}
.acc-panel .acc-reset{margin-top:2px;background:transparent;border:1.5px solid #c58aa2;color:#a8496f;text-align:center}
.acc-panel .acc-reset:hover{background:#a8496f;color:#fff}
.acc-panel button:focus-visible,.acc-fab:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
body.acc-contrast > header,
body.acc-contrast > main,
body.acc-contrast > footer,
body.acc-contrast > .ch-wrap,
body.acc-contrast > article{filter:contrast(1.4)}
body.acc-links a{text-decoration:underline!important}
body.acc-readable,body.acc-readable *{font-family:Arial,"Segoe UI",sans-serif!important;letter-spacing:.01em;line-height:1.85!important}
body.acc-noanim *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
body.acc-font-1{zoom:1.12}
body.acc-font-2{zoom:1.25}
body.acc-cursor,body.acc-cursor *{cursor:url('data:image/svg+xml;utf8,') 4 2,auto!important}
/* ── הרצועה המשפטית. עצמאית בעיצובה, כדי שתיראה נכון
בכל שלוש השפות של האתר. ── */
.legal-bar{display:flex;flex-wrap:wrap;justify-content:center;
gap:6px 20px;padding:22px 18px 26px;font-size:13px;line-height:1.6;
border-top:1px solid currentColor;border-color:color-mix(in srgb,currentColor 14%,transparent);
opacity:.72}
.legal-bar a{color:inherit;text-decoration:none;
border-bottom:1px solid transparent;padding-block:4px;min-height:24px}
.legal-bar a:hover,.legal-bar a:focus-visible{border-bottom-color:currentColor}
/* ── 159. כפתור "עוד ספרים של שיפי". כלל גורף שמבטל קו תחתון
לכל קישור באתר אכל גם את הגבול התחתון של הגלולה, והיא
נראתה חתוכה מלמטה. כאן הגבול מוחזר במפורש. ── */
body.ge .ge-author a.ge-quiet,
body.ge .ge-author a.ge-quiet:hover,
body.ge .ge-author a.ge-quiet:focus-visible{
border:1.5px solid rgba(76,81,45,.34);
border-bottom:1.5px solid rgba(76,81,45,.34)}
body.ge .ge-author a.ge-quiet:hover{
border-color:var(--olive);border-bottom-color:var(--olive)}
/* ── יעד מגע: 24 פיקסל לפחות, כמו בדרישת WCAG 2.2. ── */
.legal-bar a,.ge-quiet,.foot-col a,.foot-bar a,.credit a,.prk-foot a{
min-height:24px;display:inline-block;padding-block:3px}
.skip-link,.skip{background:#7a1338;color:#fff}
/* ── 160. שורת הזכויות בפוטר עמדה על 4.35:1 במקום 4.5. ── */
.ge .ge-foot .foot-bar,.ge .ge-foot .foot-bar p{color:rgba(243,239,226,.9)}
.ge .ge-foot .foot-bar a{color:rgba(243,239,226,.92)}
/* ── 161. הכותרת נכלאה ב-max-width של בלוק הפתיח וירדה
לשתי שורות בדסקטופ. הטקסט נשאר צר, הכותרת מקבלת רוחב משלה. ── */
.ge .ge-intro{max-width:none}
.ge .ge-intro .ge-h2{max-width:none;text-wrap:balance}
.ge .ge-vibe{max-width:52ch;margin-inline:auto}
.ge .ge-intro .ge-lead{max-width:46ch;margin-inline:auto}
@media(min-width:1100px){
.ge .ge-intro .ge-h2{white-space:nowrap}
}
/* ── 162. הריפוד האחיד הוסיף 92 פיקסל של ריק מתחת לאיור
המפה, שאמור לגעת בגבול הסקשן. ── */
.ge .ge-world{padding-bottom:0!important}
/* ── 163. הפתק הצהוב חפף את שורת הטקסט של הפתק הלבן.
הוא יורד אל מתחת לקצה התחתון. ── */
/* מדף קצר בתחתית הפתק הלבן, והצהוב יושב בתוכו. זה עובד
בשני הרוחבים, בניגוד להוצאה החוצה שחרגה מהלוח בנייד. */
.ge .note.n4{padding-bottom:52px}
.ge .note .postit{bottom:4px}
@media(min-width:761px){
.ge .note.n4{padding-bottom:58px}
.ge .note .postit{bottom:6px}
}
/* ── 164. הפתק הצהוב חפף פסקה בפתק הלבן. הוא מתכווץ
ונצמד לפינה, מתחת לשורת החתימה. ── */
/* inset-inline-start בעברית הוא ימין פיזי, והפתק קפץ
לצד שבו יושבת החתימה וכיסה אותה. left מפורש. */
.ge .note .postit{transform:rotate(-6deg) scale(.72)!important;
transform-origin:bottom left;inset-inline:auto;left:-6px;right:auto}
@media(min-width:761px){
.ge .note .postit{transform:rotate(-6deg) scale(.82)!important}
}
/* ── 165. הסקר קופץ בגובה ברגע שמצביעים. גובה אחיד לשני
המצבים, כדי שהלוח לא יזוז מתחת ליד. ── */
/* גובה אחיד לשני המצבים, לפי הגבוה מביניהם בפועל ולא לפי
מספר שנבחר בעין. בדסקטופ שני המצבים כבר זהים. */
@media(max-width:760px){ .ge .note-poll{min-height:330px} }
/* ── 166. כפתור הנגישות בכחול גנרי. אותו גוף, בשפה של הדף. ── */
.ge .acc-fab,.ge #accBtn{background:var(--olive);color:#fdf8ec;
box-shadow:0 8px 22px -10px rgba(39,40,32,.6)}
.ge .acc-fab:hover,.ge #accBtn:hover{background:var(--pink)}