/* Learn Letters — shared blog stylesheet (works for both RTL Hebrew and LTR English via ) */ :root{ --sky-1:#cdedff; --sky-2:#B4E4FF; --sky-3:#95D5FF; --blue:#2196F3; --blue-d:#1565C0; --blue-ink:#143b5c; --pink:#FF4081; --green:#43b94c; --orange:#FF9800; --ink:#1c3550; --ink-soft:#4a6479; --line:#e3eef6; --shadow-card:0 10px 26px -14px rgba(20,59,92,.5); --display:'Varela Round',system-ui,sans-serif; --body:'Heebo',system-ui,sans-serif; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:var(--body);color:var(--ink);background:#f4fafe;line-height:1.7;-webkit-font-smoothing:antialiased} a{color:var(--blue);text-decoration:none} a:hover{text-decoration:underline} img{max-width:100%;display:block} /* header */ .bl-head{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)} .bl-nav{max-width:1100px;margin:0 auto;padding:0 22px;height:64px;display:flex;align-items:center;gap:14px} .bl-brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:20px;color:var(--blue-ink)} .bl-logo{width:34px;height:34px;flex:none;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2.5px} .bl-logo span{background:#fff;border:1.4px solid var(--blue);border-radius:5px;display:grid;place-items:center;font-family:var(--display);font-size:11px;color:var(--blue-ink);line-height:1} .bl-spacer{flex:1} .bl-cta{font-family:var(--display);background:var(--blue);color:#fff;padding:9px 18px;border-radius:999px;font-size:15px;white-space:nowrap} .bl-cta:hover{background:var(--blue-d);text-decoration:none} /* article */ .article{max-width:720px;margin:0 auto;padding:48px 22px 60px} .kicker{font-family:var(--display);color:var(--blue);font-size:14px;letter-spacing:.04em;margin-bottom:14px} .article h1{font-family:var(--display);font-weight:400;font-size:clamp(30px,5vw,44px);line-height:1.15;color:var(--ink);margin-bottom:14px} .article .meta{color:var(--ink-soft);font-size:14px;margin-bottom:30px;padding-bottom:24px;border-bottom:1px solid var(--line)} .article h2{font-family:var(--display);font-weight:400;font-size:clamp(22px,3.4vw,28px);color:var(--blue-ink);margin:38px 0 14px} .article h3{font-family:var(--display);font-weight:400;font-size:20px;color:var(--ink);margin:26px 0 10px} .article p{font-size:18px;color:#2b4156;margin:0 0 18px;text-wrap:pretty} .article ul,.article ol{margin:0 0 20px;padding-inline-start:26px} .article li{font-size:18px;color:#2b4156;margin-bottom:10px} .article strong{color:var(--blue-ink)} .article blockquote{margin:24px 0;padding:16px 20px;background:#eaf4ff;border-inline-start:4px solid var(--blue);border-radius:12px;color:var(--ink-soft);font-size:17px} .article .tip{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 22px;margin:24px 0;box-shadow:var(--shadow-card)} .article .tip b{color:var(--blue-ink);font-family:var(--display)} /* in-article app CTA */ .app-cta{margin:40px 0 8px;background:linear-gradient(180deg,#cdeeff,#B4E4FF);border-radius:22px;padding:30px 26px;text-align:center} .app-cta h3{font-family:var(--display);font-size:24px;color:var(--blue-ink);margin-bottom:8px} .app-cta p{font-size:16px;color:var(--ink-soft);margin-bottom:18px} .app-cta .stores{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .app-cta .store{display:inline-flex;align-items:center;gap:9px;background:#15233a;color:#fff;padding:11px 18px;border-radius:14px;font-size:15px} .app-cta .store:hover{text-decoration:none;transform:translateY(-2px);transition:.15s} .app-cta .store b{font-family:var(--display);font-weight:400} /* related / back */ .article-foot{max-width:720px;margin:0 auto;padding:0 22px 50px} .back-link{display:inline-block;margin-top:10px;font-family:var(--display);color:var(--blue)} /* blog index (hub) */ .hub{max-width:1000px;margin:0 auto;padding:54px 22px 60px} .hub-head{text-align:center;margin-bottom:40px} .hub-head .kicker{margin-bottom:10px} .hub-head h1{font-family:var(--display);font-weight:400;font-size:clamp(30px,5vw,46px);color:var(--ink);margin-bottom:12px} .hub-head p{font-size:18px;color:var(--ink-soft);max-width:60ch;margin:0 auto} .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px} .card{display:block;background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:var(--shadow-card);transition:.18s transform,.18s box-shadow} .card:hover{transform:translateY(-4px);box-shadow:0 22px 40px -22px rgba(20,59,92,.5);text-decoration:none} .card .ctag{font-family:var(--display);font-size:13px;color:var(--blue);background:#e8f4ff;padding:5px 12px;border-radius:999px;display:inline-block;margin-bottom:14px} .card h2{font-family:var(--display);font-weight:400;font-size:21px;color:var(--ink);margin-bottom:8px;line-height:1.25} .card p{font-size:15px;color:var(--ink-soft)} /* footer */ .bl-foot{border-top:1px solid var(--line);background:#fff;margin-top:20px} .bl-foot .in{max-width:1000px;margin:0 auto;padding:26px 22px;display:flex;gap:16px;flex-wrap:wrap;align-items:center;color:var(--ink-soft);font-size:14px} .bl-foot a{color:var(--ink-soft)} @media(max-width:560px){ .bl-nav{height:56px;gap:10px} .bl-brand{font-size:17px} .bl-cta{padding:8px 14px;font-size:14px} .article{padding:34px 18px 46px} .article p,.article li{font-size:17px} } /* related articles */ .related-h{font-family:var(--display);font-size:20px;color:var(--blue-ink);margin:8px 0 14px} .related{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:24px} .related a{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;font-family:var(--display);font-size:16px;color:var(--ink);box-shadow:var(--shadow-card);transition:.15s transform} .related a:hover{transform:translateY(-3px);text-decoration:none;color:var(--blue)} @media(max-width:560px){.related{grid-template-columns:1fr}}