/* ============================================================================= * מבלגן להצלחה · ורד סבילה כהן * גיליון סגנון משותף לכל עמודי האתר. * * ⭐ להחלפת פונט הכותרות בכל האתר: לשנות את --ff-head כאן בלבד, * ואת תגית הפונטים ב- של העמודים. * ========================================================================== */ :root{ --ff-head:'Varela Round','Open Sans',sans-serif; --fw-head:400; /* Varela Round הוא משקל אחד. לא להעלות, זה מייצר בולד מזויף */ --ff-body:'Open Sans',system-ui,sans-serif; /* הפלטה של ורד, מעמוד הנחיתה שהיא אוהבת: טורקיז plus זהב על קרם. הטורקיז הוא גם צבע הטבעת שלה בפורטרט. */ --cream:#FDFBF6; /* רקע העמוד */ --pale:#EAF7F7; /* רקע סקשן מתחלף. חזק מספיק כדי להיראות */ --pale-deep:#CDEBEB; /* גבולות ועיגולים */ --ink:#2C3E3E; --ink-soft:#5A7070; --deep:#1A2E2E; /* סקשנים כהים וכותרות */ --deep-2:#24403F; --turq:#2BBFBF; /* טורקיז בהיר. דקורטיבי ועל רקע כהה */ --turq-deep:#108080; /* פעולות וקישורים. 4.75:1 מול לבן, עובר AA */ --turq-darker:#0C6767; --gold:#C9A84C; /* מבטא משני בלבד. מעט זהב, לא הרבה */ --gold-deep:#A8863A; /* זהב שקריא על קרם */ --gold-light:#F5E9C8; --line:rgba(44,62,62,.13); --shadow:0 1px 2px rgba(26,46,46,.04),0 8px 28px rgba(26,46,46,.07); --shadow-lg:0 2px 6px rgba(26,46,46,.05),0 24px 60px rgba(26,46,46,.10); --wrap:1120px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ background:var(--cream);color:var(--ink); font-family:var(--ff-body);font-weight:400;font-size:17px;line-height:1.75; -webkit-font-smoothing:antialiased;overflow-x:hidden; } h1,h2,.ff-head{font-family:var(--ff-head);font-weight:var(--fw-head);line-height:1.18;letter-spacing:-.005em} /* h3/h4 נשארים בסנס הגוף. פונט דיספליי במשקל אחד ב-17px מאבד היררכיה מול הטקסט */ h3,h4{font-family:var(--ff-body);font-weight:700;line-height:1.3} a{color:inherit} img{max-width:100%;display:block} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px} .eyebrow{ display:inline-flex;align-items:center;gap:9px; font-size:12.5px;font-weight:700;letter-spacing:.14em;color:var(--gold-deep);margin-bottom:20px; } .eyebrow::before{content:"";width:26px;height:2px;background:var(--gold);border-radius:2px} .eyebrow.on-dark{color:var(--turq)} .eyebrow.on-dark::before{background:var(--turq)} .eyebrow.center{margin-inline:auto} /* ---------- nav ---------- */ .nav{position:sticky;top:0;z-index:60;background:rgba(251,248,243,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)} .nav-in{max-width:var(--wrap);margin:0 auto;padding:15px 24px;display:flex;align-items:center;gap:30px} .brand{font-family:var(--ff-head);font-weight:var(--fw-head);font-size:20px;color:var(--turq-deep);white-space:nowrap;text-decoration:none} .brand span{color:var(--gold-deep)} .nav-links{display:flex;gap:26px;margin-inline-start:auto;font-size:15px;font-weight:600;color:var(--ink-soft)} .nav-links a{text-decoration:none;transition:color .2s;white-space:nowrap} .nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--deep)} .nav-cta{background:var(--deep);color:#fff;text-decoration:none;padding:10px 20px;border-radius:100px;font-size:14.5px;font-weight:700;white-space:nowrap;transition:background .2s,transform .2s} .nav-cta:hover{background:var(--deep-2);transform:translateY(-1px)} @media(max-width:940px){.nav-links{display:none}.nav-in{gap:14px}.nav-cta{margin-inline-start:auto}} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 32px;border-radius:100px;text-decoration:none;font-family:var(--ff-body);font-size:16.5px;font-weight:700;border:none;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s} .btn-primary{background:var(--turq-deep);color:#fff;box-shadow:0 4px 16px rgba(15,115,115,.26)} .btn-primary:hover{background:var(--turq-darker);transform:translateY(-2px);box-shadow:0 8px 24px rgba(15,115,115,.32)} .btn-ghost{background:transparent;color:var(--deep);border:1.5px solid rgba(30,77,69,.3)} .btn-ghost:hover{border-color:var(--deep);background:rgba(30,77,69,.05)} .btn-light{background:#fff;color:var(--deep);box-shadow:var(--shadow)} .btn-light:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)} .btn-wa{background:#1FA855;color:#fff;box-shadow:0 4px 16px rgba(31,168,85,.26)} .btn-wa:hover{background:#188944;transform:translateY(-2px)} /* ---------- sections ---------- */ section{padding:88px 0} .sec-head{max-width:46rem;margin-bottom:50px} .sec-head.center{text-align:center;margin-inline:auto} .sec-head.center .eyebrow::before{display:none} .sec-head h2{font-size:clamp(1.75rem,3.5vw,2.55rem);color:var(--deep);margin-bottom:16px} .sec-head p{font-size:18px;color:var(--ink-soft);font-weight:300;line-height:1.75} .bg-pale{background:var(--pale)} /* ---------- page header (עמודים פנימיים) ---------- */ .phead{padding:74px 0 12px;position:relative;overflow:hidden} .phead::before{content:"";position:absolute;inset:0;background:radial-gradient(56% 60% at 76% 16%,rgba(43,191,191,.34) 0%,transparent 62%),radial-gradient(44% 44% at 14% 80%,rgba(201,168,76,.12) 0%,transparent 64%)} .phead .wrap{position:relative} .phead h1{font-size:clamp(2rem,4.4vw,3.1rem);color:var(--deep);margin-bottom:18px;max-width:22ch} .phead p{font-size:19px;color:var(--ink-soft);font-weight:300;line-height:1.75;max-width:38rem} /* ---------- crumb ---------- */ .crumb{font-size:14px;color:var(--ink-soft);margin-bottom:22px} .crumb a{text-decoration:none;color:var(--turq-deep);font-weight:600} .crumb a:hover{text-decoration:underline} /* ---------- article ---------- */ .art{max-width:40rem;margin:0 auto;padding:0 24px} .art-meta{display:flex;gap:16px;flex-wrap:wrap;align-items:center;font-size:14px;color:var(--ink-soft);padding-bottom:26px;border-bottom:1px solid var(--line);margin-bottom:38px} .art-meta b{color:var(--deep)} .art h2{font-size:clamp(1.3rem,2.6vw,1.65rem);color:var(--deep);margin:44px 0 14px} .art h2:first-of-type{margin-top:0} .art p{font-size:17.5px;line-height:1.85;color:var(--ink);margin-bottom:20px} .art p strong{font-weight:700;color:var(--deep)} .art .lede{font-size:19.5px;line-height:1.8;color:var(--ink-soft);font-weight:300;margin-bottom:34px} .art-end{margin-top:52px;padding:32px 30px;background:var(--pale);border-radius:20px;text-align:center} .art-end p{font-size:17px;color:var(--ink);margin-bottom:20px} .art-end p b{color:var(--deep)} /* ---------- blog cards ---------- */ .posts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .post{background:#fff;border-radius:20px;padding:30px 28px;box-shadow:var(--shadow);border:1px solid rgba(44,62,62,.06);display:flex;flex-direction:column;text-decoration:none;transition:transform .2s,box-shadow .2s} .post:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)} .post .tag{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--turq-deep);margin-bottom:14px} .post h3{font-size:20px;color:var(--deep);line-height:1.32;margin-bottom:12px} .post p{font-size:15.5px;color:var(--ink-soft);line-height:1.68;flex:1} .post .more{margin-top:20px;font-size:14.5px;font-weight:700;color:var(--turq-deep)} @media(max-width:940px){.posts{grid-template-columns:1fr}} /* ---------- footer ---------- */ footer{background:var(--pale);padding:54px 0 32px;border-top:1px solid var(--pale-deep)} .f-top{display:flex;justify-content:space-between;gap:34px;flex-wrap:wrap;padding-bottom:28px;border-bottom:1px solid var(--pale-deep)} .f-brand{max-width:24rem} .f-brand .brand{font-size:21px;margin-bottom:12px;display:block} .f-brand p{font-size:15px;color:var(--ink-soft);line-height:1.68} .f-links{display:flex;gap:50px;flex-wrap:wrap} .f-col b{display:block;font-family:var(--ff-body);font-weight:700;font-size:14.5px;color:var(--deep);margin-bottom:13px} .f-col a{display:block;font-size:14.5px;color:var(--ink-soft);text-decoration:none;margin-bottom:9px;transition:color .2s} .f-col a:hover{color:var(--turq-deep)} .f-bot{padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-soft)} @media(max-width:560px){ section{padding:64px 0} .btn{width:100%} .btn-inline{width:auto} }