/* public/site/site.css — עלון-הסגנון המלא של האתר השיווקי (SSR, routes/site.js). מקור: design/site-mockup.html (העתקה מדויקת, לא עיצוב-מחדש) — ר' docs/site-blog-spec.md §7 ו-design/site-spec.md. שינויים היחידים מהמוקאפ: פונטים self-host מ-/site/fonts (לא base64 inline), והוסרו כללי ה-.demo-switcher/.demo-page-title (כלי-סקירה של המוקאפ בלבד, לא חלק מהאתר). תת-קבוצה של הקובץ הזה (בערך עד סוף ה-hero) גם מוטמעת inline ב- ע"י lib/site-render.js כ"CSS קריטי" — כפילות מכוונת, זו בדיוק הטכניקה. */ /* ══════════════════════════════════════════════════════════════════════ 1. טוקנים — מיובאים כפי־שהם מ-web/src/styles/app.scss (:root, שורות 61-98). ר' site-spec.md §1. ══════════════════════════════════════════════════════════════════════ */ :root{ --cream:#FAF6EC; --paper:#FFFFFF; --ink:#2A2620; --ink2:#6B6455; --ink3:#9A917E; --line: rgba(42,38,32,.09); --line2: rgba(42,38,32,.16); --green:#7CA439; --green-deep:#5E7F27; --green-soft:#EFF5E2; --green-lite:#A6D84B; --gold:#E0A83C; --gold-soft:#FFF3C4; --gold-deep:#8A6402; --red:#C94F3D; --red-soft:#FBEAE7; --red-deep:#9A3B2C; --blue:#4A7FA5; --blue-soft:#E8F1F7; --sh1: 0 1px 1px rgba(42,38,32,.04), 0 2px 4px rgba(42,38,32,.05); --sh2: 0 1px 2px rgba(42,38,32,.05), 0 6px 14px -4px rgba(42,38,32,.09), 0 18px 34px -14px rgba(42,38,32,.12); --sh3: 0 2px 4px rgba(42,38,32,.08), 0 14px 30px -8px rgba(42,38,32,.20), 0 34px 68px -18px rgba(42,38,32,.28); --r-sm:12px; --r-md:18px; --r-lg:24px; --r-xl:28px; --r-2xl:32px; --r-pill:999px; /* ── תוספות ספציפיות-לאתר (נגזרות, לא צבעים חדשים — ר' site-spec.md §1.2/1.3) ── */ --link:#4C6B1F; --mesh-1: rgba(224,168,60,.14); --mesh-2: rgba(124,164,57,.14); --mesh-3: rgba(74,127,165,.08); --dark-grad: linear-gradient(158deg,#33291F,var(--ink) 60%); --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:56px; --sp-10:72px; --sp-11:96px; --fs-h1: clamp(2.1rem, 1.5rem + 2.4vw, 3.5rem); --fs-h1-sub: clamp(1.8rem, 1.5rem + 1.2vw, 2.5rem); --fs-h2: clamp(1.5rem, 1.35rem + .7vw, 2rem); --fs-h3: clamp(1.15rem, 1.1rem + .3vw, 1.35rem); --fs-stat: clamp(2.2rem, 1.8rem + 1.4vw, 3rem); --fs-lead: clamp(1rem, .95rem + .3vw, 1.15rem); --maxw: 1180px; } /* ══════════════════════════════════════════════════════════════════════ 2. פונטים — self-host מ-/site/fonts (מועתקים מ-web/public/fonts, לא CDN חי, לא data-uri). Heebo לגוף, Rubik לכותרות/מספרים. ══════════════════════════════════════════════════════════════════════ */ @font-face{ font-family:'Heebo'; font-style:normal; font-weight:100 900; font-display:swap; src:url('/site/fonts/heebo-hebrew.woff2') format('woff2'); unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; } @font-face{ font-family:'Heebo'; font-style:normal; font-weight:100 900; font-display:swap; src:url('/site/fonts/heebo-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Rubik'; font-style:normal; font-weight:300 900; font-display:swap; src:url('/site/fonts/rubik-hebrew.woff2') format('woff2'); unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; } @font-face{ font-family:'Rubik'; font-style:normal; font-weight:300 900; font-display:swap; src:url('/site/fonts/rubik-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* ══════════════════════════════════════════════════════════════════════ 3. Reset + בסיס ══════════════════════════════════════════════════════════════════════ */ *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } html,body{ margin:0; padding:0; } body{ font-family:'Heebo',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; background:var(--cream); color:var(--ink); -webkit-font-smoothing:antialiased; line-height:1.6; } h1,h2,h3,.rubik{ font-family:'Rubik','Heebo',sans-serif; margin:0; } p{ margin:0 0 1em; } img{ max-width:100%; display:block; -webkit-user-drag:none; } a{ color:inherit; } svg{ display:block; } .ic{ width:20px; height:20px; stroke:currentColor; stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round; flex:none; } .ic-fill{ fill:currentColor; stroke:none; } .ic-sm{ width:16px; height:16px; } .ic-lg{ width:28px; height:28px; } .ic-xl{ width:36px; height:36px; } .container{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--sp-5); } @media(min-width:640px){ .container{ padding-inline:var(--sp-7); } } .visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; padding:0; margin:-1px; } ::selection{ background:var(--green-lite); color:var(--ink); } ::-webkit-scrollbar{ width:10px; height:10px; } ::-webkit-scrollbar-thumb{ background:rgba(42,38,32,.18); border-radius:8px; } .skip-link{ position:absolute; right:12px; top:-60px; z-index:200; background:var(--ink); color:#fff; padding:10px 18px; border-radius:var(--r-md); font-weight:700; font-size:14px; transition:top .2s; } .skip-link:focus{ top:12px; } :focus-visible{ outline:2.5px solid var(--ink); outline-offset:3px; border-radius:6px; } .on-dark :focus-visible, .card-dark :focus-visible{ outline-color:var(--gold); } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } /* ══════════════════════════════════════════════════════════════════════ 4. טיפוגרפיה ══════════════════════════════════════════════════════════════════════ */ .h1{ font-size:var(--fs-h1); font-weight:800; line-height:1.08; letter-spacing:-.01em; } .h1-sub{ font-size:var(--fs-h1-sub); font-weight:800; line-height:1.14; } .h2{ font-size:var(--fs-h2); font-weight:700; line-height:1.2; } .h3{ font-size:var(--fs-h3); font-weight:700; line-height:1.3; } .lead{ font-size:var(--fs-lead); color:var(--ink2); line-height:1.75; } .eyebrow{ font-size:13px; font-weight:800; color:var(--ink); letter-spacing:.02em; } .stat-num{ font-family:'Rubik',sans-serif; font-weight:800; font-size:var(--fs-stat); line-height:1; color:var(--ink); } .muted{ color:var(--ink2); } .center{ text-align:center; } /* ══════════════════════════════════════════════════════════════════════ 5. כפתורים ══════════════════════════════════════════════════════════════════════ */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 24px; border-radius:var(--r-pill); border:0; font-family:'Heebo',sans-serif; font-weight:700; font-size:15.5px; cursor:pointer; text-decoration:none; transition:transform .15s ease, box-shadow .2s ease, background-color .2s ease; } .btn:active{ transform:scale(.97); } .btn-lg{ min-height:56px; padding:0 30px; font-size:16.5px; } .btn-primary{ background:var(--green-deep); color:#fff; box-shadow:0 1px 1px rgba(42,38,32,.15), 0 8px 18px -6px rgba(94,127,39,.55), inset 0 1px 0 rgba(255,255,255,.16); } .btn-primary:hover{ background:#516d21; box-shadow:0 1px 1px rgba(42,38,32,.18), 0 10px 22px -6px rgba(94,127,39,.65), inset 0 1px 0 rgba(255,255,255,.18); } .btn-secondary{ background:var(--paper); color:var(--ink); border:1.5px solid var(--line2); box-shadow:var(--sh1); } .btn-secondary:hover{ border-color:var(--green-deep); color:var(--green-deep); } .btn-gold{ background:var(--gold); color:var(--ink); box-shadow:0 1px 1px rgba(42,38,32,.12), 0 8px 18px -6px rgba(224,168,60,.55), inset 0 1px 0 rgba(255,255,255,.35); } .btn-gold:hover{ background:#eab750; } .btn-ghost-dark{ background:transparent; color:#F5EFE0; border:1.5px solid rgba(245,239,224,.35); } .btn-ghost-dark:hover{ border-color:#F5EFE0; background:rgba(245,239,224,.08); } .btn-block{ width:100%; } /* ══════════════════════════════════════════════════════════════════════ 6. כרטיסים, שבבים, מפרידים ══════════════════════════════════════════════════════════════════════ */ .card{ background:var(--paper); border-radius:var(--r-lg); box-shadow:var(--sh2); border:1px solid var(--line); } .card-dark{ background:var(--dark-grad); color:#F5EFE0; border-radius:var(--r-xl); position:relative; overflow:hidden; box-shadow:var(--sh3), inset 0 1px 0 rgba(255,255,255,.06); } .card-dark::before{ content:''; position:absolute; inset:0; background:radial-gradient(120% 70% at 20% -10%, rgba(255,255,255,.08), transparent 55%); pointer-events:none; } .card-dark .blob{ position:absolute; width:220px; height:220px; border-radius:50%; filter:blur(20px); opacity:.16; pointer-events:none; } .card-dark .blob.b1{ background:var(--green-lite); top:-70px; inset-inline-end:-70px; } .card-dark .blob.b2{ background:var(--gold); bottom:-90px; inset-inline-start:-60px; } .chip{ display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:var(--r-pill); font-size:12.5px; font-weight:800; background:var(--green-soft); color:var(--ink); border:1px solid rgba(124,164,57,.22); } .chip.gold{ background:var(--gold-soft); border-color:rgba(138,100,2,.2); } .chip.blue{ background:var(--blue-soft); border-color:rgba(74,127,165,.22); } .chip .ic{ width:15px; height:15px; } .section-wave{ line-height:0; margin-top:-1px; } .section-wave svg{ width:100%; height:56px; display:block; } @media(min-width:900px){ .section-wave svg{ height:84px; } } hr.rule{ border:0; border-top:1px solid var(--line); margin:0; } /* ══════════════════════════════════════════════════════════════════════ 7. מסקוט ══════════════════════════════════════════════════════════════════════ */ .mascot{ filter:drop-shadow(0 14px 22px rgba(42,38,32,.22)); } .mascot-float{ animation:floaty 4.6s ease-in-out infinite; } @keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } } /* ══════════════════════════════════════════════════════════════════════ 8. Header ══════════════════════════════════════════════════════════════════════ */ .site-header{ position:sticky; top:0; z-index:100; background:rgba(250,246,236,.86); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } .site-header .container{ display:flex; align-items:center; justify-content:space-between; height:72px; gap:var(--sp-5); } .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; flex:none; } .brand img{ width:42px; height:42px; border-radius:50%; box-shadow:0 0 0 2px var(--paper), 0 0 0 3.5px rgba(124,164,57,.35); object-fit:cover; } .brand b{ font-family:'Rubik',sans-serif; font-weight:800; font-size:19px; } .brand small{ display:block; font-size:10px; color:var(--ink2); font-weight:600; margin-top:-2px; } .nav-primary{ display:none; align-items:center; gap:var(--sp-6); list-style:none; margin:0; padding:0; } .nav-primary a{ text-decoration:none; font-weight:700; font-size:14.5px; color:var(--ink2); padding:8px 2px; border-bottom:2.5px solid transparent; } .nav-primary a:hover, .nav-primary a[aria-current="page"]{ color:var(--ink); border-color:var(--green); } .nav-actions{ display:flex; align-items:center; gap:10px; } .nav-toggle-label{ display:flex; width:44px; height:44px; align-items:center; justify-content:center; border-radius:var(--r-md); cursor:pointer; border:1.5px solid var(--line2); background:var(--paper); } .nav-toggle{ position:absolute; opacity:0; pointer-events:none; } .nav-panel{ display:none; position:fixed; inset:72px 0 0 0; background:var(--cream); z-index:99; padding:var(--sp-6) var(--sp-5); overflow-y:auto; } .nav-toggle:checked ~ .nav-panel{ display:block; } .nav-panel ul{ list-style:none; margin:0 0 var(--sp-6); padding:0; display:flex; flex-direction:column; gap:2px; } .nav-panel a{ display:flex; align-items:center; min-height:52px; text-decoration:none; font-weight:700; font-size:17px; color:var(--ink); border-bottom:1px solid var(--line); } .nav-toggle:checked ~ .nav-toggle-label .ic-menu-open{ display:none; } .nav-toggle:checked ~ .nav-toggle-label .ic-menu-close{ display:block; } .ic-menu-close{ display:none; } @media(min-width:900px){ .nav-primary{ display:flex; } .nav-toggle-label, .nav-panel{ display:none !important; } } /* ══════════════════════════════════════════════════════════════════════ 9. Hero ══════════════════════════════════════════════════════════════════════ */ .hero{ position:relative; overflow:hidden; background: radial-gradient(1100px 520px at 12% -12%, var(--mesh-1), transparent 60%), radial-gradient(900px 480px at 88% 4%, var(--mesh-2), transparent 55%), radial-gradient(700px 420px at 50% 110%, var(--mesh-3), transparent 60%), var(--cream); padding:var(--sp-9) 0 var(--sp-8); } .hero .container{ display:grid; gap:var(--sp-8); align-items:center; } .hero-copy{ text-align:center; } .hero-copy .h1{ margin:var(--sp-4) 0 var(--sp-4); } .hero-copy .h1 .accent{ color:var(--link); } .hero-copy .lead{ max-width:560px; margin:0 auto var(--sp-6); } .hero-cta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-bottom:var(--sp-6); } .hero-trust{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center; } .hero-visual{ position:relative; display:flex; justify-content:center; } .hero-visual img{ width:min(92vw, 420px); height:auto; } .hero-blob{ position:absolute; border-radius:50%; filter:blur(30px); opacity:.35; z-index:0; } .hero-blob.b1{ width:220px; height:220px; background:radial-gradient(circle,var(--green-lite),transparent 70%); top:-20px; inset-inline-start:6%; } .hero-blob.b2{ width:180px; height:180px; background:radial-gradient(circle,var(--gold),transparent 70%); bottom:-10px; inset-inline-end:8%; } .hero-visual img{ position:relative; z-index:1; } @media(min-width:900px){ .hero .container{ grid-template-columns:1.05fr .95fr; text-align:start; } .hero-copy{ text-align:start; } .hero-copy .lead{ margin-inline:0; } .hero-cta, .hero-trust{ justify-content:flex-start; } } .accent{ position:relative; display:inline-block; } .accent::after{ content:''; position:absolute; right:0; left:0; bottom:.02em; height:.34em; background:var(--green-lite); opacity:.55; border-radius:4px; z-index:-1; transform-origin:right; animation:sweepIn 1s .3s cubic-bezier(.22,1,.36,1) both; } @keyframes sweepIn{ 0%{ transform:scaleX(0) } 100%{ transform:scaleX(1) } } /* ══════════════════════════════════════════════════════════════════════ 10. Trust strip ══════════════════════════════════════════════════════════════════════ */ .trust-strip{ padding:var(--sp-6) 0; } .trust-strip .container{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; } /* ══════════════════════════════════════════════════════════════════════ 11. איך זה עובד — 3 צעדים ══════════════════════════════════════════════════════════════════════ */ .steps{ padding:var(--sp-9) 0; background:var(--paper); } .steps-grid{ display:grid; gap:var(--sp-7); margin-top:var(--sp-8); position:relative; } .step{ text-align:center; position:relative; } .step-num{ width:34px; height:34px; border-radius:50%; background:var(--ink); color:#fff; font-family:'Rubik',sans-serif; font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center; margin:0 auto var(--sp-4); } .step img{ width:118px; height:118px; object-fit:contain; margin:0 auto var(--sp-4); } .step h3{ margin-bottom:6px; } .step p{ color:var(--ink2); font-size:14.5px; max-width:260px; margin:0 auto; } @media(min-width:900px){ .steps-grid{ grid-template-columns:repeat(3,1fr); } .steps-grid::before{ content:''; position:absolute; top:17px; right:16.5%; left:16.5%; height:2px; background:repeating-linear-gradient(90deg,var(--line2) 0 8px, transparent 8px 14px); z-index:0; } } /* ══════════════════════════════════════════════════════════════════════ 12. פיצ'רים ══════════════════════════════════════════════════════════════════════ */ .features{ padding:var(--sp-9) 0; } .section-head{ text-align:center; max-width:640px; margin:0 auto var(--sp-8); } .section-head .eyebrow{ color:var(--link); display:block; margin-bottom:10px; } .feature-grid{ display:grid; gap:var(--sp-5); grid-template-columns:1fr; } @media(min-width:640px){ .feature-grid{ grid-template-columns:repeat(2,1fr); } } @media(min-width:1180px){ .feature-grid{ grid-template-columns:repeat(3,1fr); } } .feature-card{ padding:var(--sp-6); position:relative; overflow:hidden; } .feature-icon{ width:52px; height:52px; border-radius:var(--r-md); background:var(--green-soft); color:var(--green-deep); display:flex; align-items:center; justify-content:center; margin-bottom:var(--sp-4); } .feature-card h3{ margin-bottom:6px; } .feature-card p{ color:var(--ink2); font-size:14.5px; margin:0; } .feature-card .feature-mascot{ position:absolute; width:84px; height:84px; object-fit:contain; bottom:-6px; left:-6px; opacity:.95; } /* ══════════════════════════════════════════════════════════════════════ 13. עדויות ══════════════════════════════════════════════════════════════════════ */ .testimonials{ padding:var(--sp-9) 0; background:var(--green-soft); position:relative; overflow:hidden; } .testimonials .corner-mascot{ position:absolute; width:150px; height:150px; object-fit:contain; bottom:-14px; inset-inline-end:2%; opacity:.9; display:none; } @media(min-width:900px){ .testimonials .corner-mascot{ display:block; } } .quote-grid{ display:grid; gap:var(--sp-5); grid-template-columns:1fr; } @media(min-width:900px){ .quote-grid{ grid-template-columns:repeat(3,1fr); } } .quote-card{ padding:var(--sp-6); position:relative; z-index:1; } .quote-card .ic-quote-mark{ color:var(--gold); width:30px; height:30px; margin-bottom:var(--sp-3); } .quote-card p{ font-size:15px; line-height:1.75; margin-bottom:var(--sp-4); } .quote-person{ display:flex; align-items:center; gap:10px; } .quote-avatar{ width:38px; height:38px; border-radius:50%; background:var(--gold-soft); color:var(--gold-deep); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; flex:none; } .quote-person b{ display:block; font-size:13.5px; } .quote-person span{ font-size:12px; color:var(--ink2); } /* ══════════════════════════════════════════════════════════════════════ 14. מסלולים — טיזר + כרטיס מלא ══════════════════════════════════════════════════════════════════════ */ .plans{ padding:var(--sp-9) 0; } .plan-grid{ display:grid; gap:var(--sp-6); grid-template-columns:1fr; max-width:1040px; margin:0 auto; } @media(min-width:900px){ .plan-grid{ grid-template-columns:repeat(3,1fr); align-items:stretch; } } .plan-card{ padding:var(--sp-6); display:flex; flex-direction:column; position:relative; } .plan-card.featured{ border:2px solid var(--gold); box-shadow:var(--sh3); } .plan-card.dark{ color:#F5EFE0; } .plan-ribbon{ position:absolute; top:-14px; inset-inline-start:50%; transform:translateX(50%); background:var(--gold); color:var(--ink); font-size:11.5px; font-weight:800; padding:6px 16px; border-radius:var(--r-pill); box-shadow:var(--sh1); white-space:nowrap; } [dir="rtl"] .plan-ribbon{ transform:translateX(50%); } .plan-mascot{ width:76px; height:76px; object-fit:contain; margin-bottom:var(--sp-3); } .plan-card h3{ margin-bottom:2px; } .plan-price{ display:flex; align-items:baseline; gap:6px; margin:var(--sp-3) 0 var(--sp-4); } .plan-price .stat-num{ font-size:2.5rem; } .plan-price span{ font-size:13px; color:var(--ink2); } .plan-card.dark .plan-price span{ color:#C9C0AA; } .plan-features{ list-style:none; margin:0 0 var(--sp-6); padding:0; display:flex; flex-direction:column; gap:9px; flex:1; } .plan-features li{ display:flex; align-items:flex-start; gap:8px; font-size:14px; } .plan-features .ic{ color:var(--green-deep); width:18px; height:18px; margin-top:2px; flex:none; } .plan-card.dark .plan-features .ic{ color:var(--green-lite); } /* ══════════════════════════════════════════════════════════════════════ 15. בלוג — טיזר + כרטיס-פוסט + רשימה מלאה ══════════════════════════════════════════════════════════════════════ */ .blog-teaser{ padding:var(--sp-9) 0; background:var(--paper); } .post-grid{ display:grid; gap:var(--sp-5); grid-template-columns:1fr; } @media(min-width:640px){ .post-grid{ grid-template-columns:repeat(2,1fr); } } @media(min-width:1180px){ .post-grid{ grid-template-columns:repeat(3,1fr); } } .post-card{ overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column; } .post-cover{ aspect-ratio:16/10; width:100%; display:flex; align-items:center; justify-content:center; color:#fff; position:relative; } .post-cover img{ width:100%; height:100%; object-fit:cover; } .post-cover .ic{ width:44px; height:44px; opacity:.9; } .post-cover.cat-nutrition{ background:linear-gradient(150deg,#A6D84B,#5E7F27); } .post-cover.cat-fitness{ background:linear-gradient(150deg,#7BAFCF,#3D6C8E); } .post-cover.cat-recipes{ background:linear-gradient(150deg,#F3CC6E,#B8860F); } .post-cover.cat-habits{ background:linear-gradient(150deg,#E8A088,#9A3B2C); } .post-cover.cat-qa{ background:linear-gradient(150deg,#6B6455,#2A2620); } .post-body{ padding:var(--sp-5); display:flex; flex-direction:column; gap:8px; flex:1; } .post-body h3{ font-size:17px; } .post-body p{ color:var(--ink2); font-size:13.5px; margin:0; flex:1; } .post-meta{ display:flex; align-items:center; gap:10px; font-size:12px; color:var(--ink2); margin-top:6px; flex-wrap:wrap; } .post-meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--ink2); } .post-meta .ic{ width:14px; height:14px; } .empty-state{ text-align:center; padding:var(--sp-9) var(--sp-5); color:var(--ink2); } /* ══════════════════════════════════════════════════════════════════════ 16. FAQ accordion —
, אפס JS ══════════════════════════════════════════════════════════════════════ */ .faq{ padding:var(--sp-9) 0; } .faq-list{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:10px; } .faq-item{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; } .faq-item summary{ cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; font-weight:700; font-size:15px; min-height:44px; } .faq-item summary::-webkit-details-marker{ display:none; } .faq-item summary .ic-chev{ transition:transform .2s ease; color:var(--ink2); flex:none; } .faq-item[open] summary .ic-chev{ transform:rotate(180deg); } .faq-item .faq-a{ padding:0 20px 18px; color:var(--ink2); font-size:14.5px; line-height:1.8; } .faq-group + .faq-group{ margin-top:var(--sp-8); } .faq-group h2{ margin-bottom:var(--sp-4); } /* ══════════════════════════════════════════════════════════════════════ 17. CTA band כהה ══════════════════════════════════════════════════════════════════════ */ .cta-band{ padding:var(--sp-9) 0; } .cta-band .card-dark{ padding:var(--sp-9) var(--sp-6); text-align:center; display:flex; flex-direction:column; align-items:center; } .cta-band img{ width:150px; height:150px; object-fit:contain; margin-bottom:var(--sp-5); position:relative; z-index:1; } .cta-band h2{ color:#fff; margin-bottom:10px; position:relative; z-index:1; } .cta-band p{ color:#D8D0BC; max-width:460px; margin:0 auto var(--sp-6); position:relative; z-index:1; } .cta-band .hero-cta{ position:relative; z-index:1; margin-bottom:0; } /* ══════════════════════════════════════════════════════════════════════ 18. Footer ══════════════════════════════════════════════════════════════════════ */ .site-footer{ background:var(--dark-grad); color:#D8D0BC; padding:var(--sp-9) 0 var(--sp-6); } .footer-grid{ display:grid; gap:var(--sp-7); grid-template-columns:1fr; margin-bottom:var(--sp-8); } @media(min-width:640px){ .footer-grid{ grid-template-columns:1.3fr repeat(3,1fr); } } .footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom:var(--sp-3); } .footer-brand img{ width:38px; height:38px; border-radius:50%; } .footer-brand b{ font-family:'Rubik',sans-serif; color:#fff; font-size:17px; } .site-footer p{ font-size:13.5px; line-height:1.7; max-width:280px; color:#B9AF98; } .footer-col h4{ color:#fff; font-size:13px; margin-bottom:var(--sp-4); } .footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; } .footer-col a{ text-decoration:none; color:#B9AF98; font-size:13.5px; } .footer-col a:hover{ color:#fff; } .footer-social{ display:flex; gap:10px; margin-top:var(--sp-4); } .footer-social a{ width:38px; height:38px; border-radius:50%; background:rgba(245,239,224,.08); display:flex; align-items:center; justify-content:center; color:#D8D0BC; } .footer-bottom{ border-top:1px solid rgba(245,239,224,.12); padding-top:var(--sp-5); display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; font-size:12.5px; color:#9C927B; } .footer-bottom a{ text-decoration:none; color:#9C927B; } .footer-bottom a:hover{ color:#fff; } /* ══════════════════════════════════════════════════════════════════════ 19. עמוד בלוג — כותרת, פילטר, pagination ══════════════════════════════════════════════════════════════════════ */ .page-hero{ padding:var(--sp-8) 0 var(--sp-7); background:radial-gradient(900px 380px at 15% -20%, var(--mesh-2), transparent 60%), var(--cream); text-align:center; } .page-hero .h1{ margin:var(--sp-3) 0 var(--sp-3); } .cat-filter{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; padding:var(--sp-6) 0; } .cat-filter a{ text-decoration:none; } .cat-filter .chip{ background:var(--paper); border-color:var(--line2); color:var(--ink2); } .cat-filter .chip[aria-current="page"]{ background:var(--ink); border-color:var(--ink); color:#fff; } .blog-list-section{ padding:0 0 var(--sp-9); } .pagination{ display:flex; justify-content:center; align-items:center; gap:8px; margin-top:var(--sp-8); } .pagination a, .pagination span{ min-width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:var(--r-md); text-decoration:none; font-weight:700; font-size:14px; color:var(--ink2); } .pagination a:hover{ background:var(--paper); box-shadow:var(--sh1); color:var(--ink); } .pagination .current{ background:var(--ink); color:#fff; } /* ══════════════════════════════════════════════════════════════════════ 20. עמוד פוסט — breadcrumb, בקצרה, TOC, גוף, FAQ, מחבר ══════════════════════════════════════════════════════════════════════ */ .breadcrumb{ padding:var(--sp-5) 0 0; } .breadcrumb ol{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; font-size:13px; color:var(--ink2); } .breadcrumb a{ text-decoration:none; color:var(--ink2); } .breadcrumb a:hover{ color:var(--link); } .breadcrumb li:not(:last-child)::after{ content:'/'; margin-inline-start:6px; color:var(--ink3); } .breadcrumb li[aria-current]{ color:var(--ink); font-weight:700; } .post-header{ padding:var(--sp-5) 0 var(--sp-6); max-width:820px; margin:0 auto; } .post-header .chip{ margin-bottom:var(--sp-4); } .post-header .h1-sub{ margin-bottom:var(--sp-4); } .post-byline{ display:flex; align-items:center; gap:12px; } .post-byline img{ width:44px; height:44px; border-radius:50%; object-fit:cover; } .post-byline b{ display:block; font-size:14px; } .post-byline .meta{ font-size:12.5px; color:var(--ink2); display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .post-cover-img{ max-width:900px; margin:0 auto var(--sp-7); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh2); } .post-cover-img .post-cover{ aspect-ratio:21/9; } .post-layout{ max-width:900px; margin:0 auto; padding-bottom:var(--sp-10); display:grid; gap:var(--sp-7); grid-template-columns:1fr; } @media(min-width:900px){ .post-layout{ grid-template-columns:200px 1fr; align-items:start; } } .toc-aside{ order:2; } @media(min-width:900px){ .toc-aside{ order:1; position:sticky; top:96px; } } .toc-box{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); padding:var(--sp-4); } .toc-box summary{ cursor:pointer; font-weight:800; font-size:13.5px; display:flex; align-items:center; gap:6px; } .toc-box ol{ list-style:none; margin:var(--sp-3) 0 0; padding:0; display:flex; flex-direction:column; gap:9px; } .toc-box a{ text-decoration:none; color:var(--ink2); font-size:13px; line-height:1.5; } .toc-box a:hover{ color:var(--link); } @media(min-width:900px){ .toc-box summary{ pointer-events:none; } .toc-box summary .ic-chev{ display:none; } } .takeaways{ order:0; background:var(--green-soft); border:1px solid rgba(124,164,57,.25); border-radius:var(--r-lg); padding:var(--sp-6); grid-column:1/-1; } .takeaways h2{ font-size:16px; display:flex; align-items:center; gap:8px; margin-bottom:var(--sp-4); color:var(--green-deep); } .takeaways ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; } .takeaways li{ display:flex; gap:10px; font-size:14.5px; line-height:1.65; } .takeaways .ic{ color:var(--green-deep); margin-top:3px; flex:none; } .prose{ order:3; font-size:1.05rem; line-height:1.9; } @media(min-width:900px){ .prose{ order:2; } } .prose h2{ font-size:var(--fs-h3); margin:var(--sp-8) 0 var(--sp-3); scroll-margin-top:96px; } .prose h3{ font-size:1.05rem; margin:var(--sp-6) 0 var(--sp-2); scroll-margin-top:96px; } .prose h4{ font-size:1rem; margin:var(--sp-5) 0 var(--sp-2); } .prose p{ margin:0 0 var(--sp-4); color:var(--ink); } .prose ul, .prose ol{ margin:0 0 var(--sp-4); padding-inline-start:1.3em; } .prose li{ margin-bottom:6px; } .prose figure{ margin:var(--sp-6) 0; } .prose figure img{ border-radius:var(--r-lg); width:100%; } .prose figcaption{ font-size:13px; color:var(--ink2); margin-top:8px; text-align:center; } .prose blockquote.pull-quote{ border-inline-start:4px solid var(--gold); background:var(--gold-soft); border-radius:0 var(--r-md) var(--r-md) 0; padding:var(--sp-5) var(--sp-6); margin:var(--sp-6) 0; font-size:15px; color:#5C4308; } .prose blockquote{ border-inline-start:4px solid var(--gold); background:var(--gold-soft); border-radius:0 var(--r-md) var(--r-md) 0; padding:var(--sp-5) var(--sp-6); margin:var(--sp-6) 0; font-size:15px; color:#5C4308; } .pull-quote b{ display:block; margin-bottom:4px; color:var(--gold-deep); font-size:13px; } .prose table{ width:100%; border-collapse:collapse; margin:var(--sp-6) 0; font-size:14px; } .prose th{ text-align:start; background:var(--cream); font-weight:800; padding:10px 12px; border-bottom:2px solid var(--line2); } .prose td{ padding:10px 12px; border-bottom:1px solid var(--line); } .prose .callout{ background:var(--blue-soft); border-radius:var(--r-md); padding:var(--sp-5); margin:var(--sp-6) 0; } .prose .callout-info{ background:var(--blue-soft); } .prose .callout-warning{ background:var(--red-soft); } .prose .highlight{ background:var(--gold-soft); padding:0 4px; border-radius:4px; } .prose .align-center{ margin-inline:auto; text-align:center; } .prose .align-left{ float:left; margin-inline-end:var(--sp-4); } .prose .align-right{ float:right; margin-inline-start:var(--sp-4); } .prose .table-wrap{ overflow-x:auto; } .post-faq{ grid-column:1/-1; order:4; margin-top:var(--sp-4); } .post-faq h2{ font-size:var(--fs-h3); margin-bottom:var(--sp-4); } .author-box{ grid-column:1/-1; order:5; display:flex; gap:var(--sp-5); align-items:flex-start; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-6); } .author-box img{ width:64px; height:64px; border-radius:50%; object-fit:cover; flex:none; } .author-box h3{ font-size:15px; margin-bottom:2px; } .author-box .role{ font-size:12.5px; color:var(--link); font-weight:700; margin-bottom:8px; } .author-box p{ font-size:13.5px; color:var(--ink2); margin:0; } .share-bar{ grid-column:1/-1; order:6; display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .share-bar span{ font-size:13px; color:var(--ink2); font-weight:700; } .share-bar a{ width:40px; height:40px; border-radius:50%; background:var(--paper); border:1px solid var(--line2); display:flex; align-items:center; justify-content:center; text-decoration:none; color:var(--ink2); } .share-bar a:hover{ color:var(--ink); border-color:var(--ink2); } .related{ padding:var(--sp-9) 0; background:var(--paper); } /* ══════════════════════════════════════════════════════════════════════ 21. עמוד מסלולים — כרטיס מלא, טבלת השוואה, בלוק אמון ══════════════════════════════════════════════════════════════════════ */ .compare{ padding:var(--sp-9) 0; } .compare-scroll{ overflow-x:auto; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--paper); box-shadow:var(--sh2); } .compare-table{ width:100%; border-collapse:collapse; min-width:640px; font-size:14px; } .compare-table th, .compare-table td{ padding:14px 16px; text-align:center; border-bottom:1px solid var(--line); } .compare-table th:first-child, .compare-table td:first-child{ text-align:start; font-weight:700; } .compare-table thead th{ background:var(--cream); font-family:'Rubik',sans-serif; font-weight:800; font-size:14.5px; } .compare-table thead th.featured{ color:var(--gold-deep); } .compare-table .ic-check{ color:var(--green-deep); } .compare-table .ic-x{ color:var(--ink3); } .compare-table td small{ display:block; color:var(--ink2); font-weight:600; font-size:11.5px; margin-top:2px; } .trust-block{ padding:var(--sp-9) 0; } .trust-block .card{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--sp-4); padding:var(--sp-8) var(--sp-6); max-width:640px; margin:0 auto; } .trust-block img{ width:150px; height:150px; object-fit:contain; } .trust-row{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-top:var(--sp-2); } /* ══════════════════════════════════════════════════════════════════════ 22. עמודים סטטיים (about/contact/legal) + טופס יצירת קשר ══════════════════════════════════════════════════════════════════════ */ .static-prose{ max-width:760px; margin:0 auto; padding:var(--sp-8) 0 var(--sp-10); } .static-prose h2{ font-size:var(--fs-h3); margin:var(--sp-7) 0 var(--sp-3); } .static-prose p{ margin:0 0 var(--sp-4); color:var(--ink2); line-height:1.8; } .static-prose ul{ margin:0 0 var(--sp-4); padding-inline-start:1.3em; color:var(--ink2); } .static-prose li{ margin-bottom:6px; } /* img-row — טוקן-CSS מותר בתוך richtext (lib/blog.js ALLOWED_CLASSES) לשורת שתי-תמונות בגוף מאמר. */ .static-prose .img-row{ display:flex; gap:var(--sp-4); align-items:center; margin:var(--sp-6) 0; } .static-prose .img-row img{ margin:0; } .contact-wrap{ max-width:560px; margin:0 auto; padding:var(--sp-7) 0 var(--sp-10); } .contact-form{ display:flex; flex-direction:column; gap:var(--sp-5); } .form-field{ display:flex; flex-direction:column; gap:6px; } .form-field label{ font-weight:700; font-size:14px; } .form-field input, .form-field textarea{ font-family:'Heebo',sans-serif; font-size:15px; padding:13px 16px; border-radius:var(--r-md); border:1.5px solid var(--line2); background:var(--paper); color:var(--ink); min-height:48px; } .form-field textarea{ min-height:130px; resize:vertical; } .form-field input:focus, .form-field textarea:focus{ border-color:var(--green-deep); } .form-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } .form-note{ font-size:12.5px; color:var(--ink2); } .alert-box{ padding:var(--sp-5); border-radius:var(--r-md); font-size:14.5px; font-weight:700; margin-bottom:var(--sp-5); } .alert-box.success{ background:var(--green-soft); color:var(--green-deep); } .alert-box.error{ background:var(--red-soft); color:var(--red-deep); } .about-hero{ text-align:center; padding:var(--sp-9) 0 var(--sp-7); } .about-hero img{ width:180px; height:180px; object-fit:contain; margin:0 auto var(--sp-5); } .contact-hero{ text-align:center; padding:var(--sp-8) 0 var(--sp-3); } .contact-hero img{ width:120px; height:120px; object-fit:contain; margin:0 auto var(--sp-4); } /* ══════════════════════════════════════════════════════════════════════ 23. scroll-reveal — שיפור בלבד, בלי JS הכל opacity:1 כברירת-מחדל ══════════════════════════════════════════════════════════════════════ */ .js [data-reveal]{ opacity:0; transform:translateY(18px); transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); } .js [data-reveal].in-view{ opacity:1; transform:translateY(0); } /* מה שכבר במסך הראשון נחשף מיד ובלי אנימציה — ר' ההסבר ב-public/site/site.js (הבזק עמוד ריק בטעינה + פגיעה ב-LCP). חייב לבוא אחרי .in-view כדי לנצח אותו. */ .js [data-reveal].no-anim{ transition:none; }