:root { --blog-forest: #28371f; --blog-cream: #fffdf8; --blog-gold: #d8ae5e; --blog-ink: #22281f; --blog-line: #d9d8cf; } .blog-page { min-height: 100vh; color: var(--blog-ink); background: #f7f6f1; } .blog-header { color: var(--blog-cream); background: var(--blog-forest); } .blog-nav { width: min(1180px, calc(100% - 40px)); min-height: 88px; margin: 0 auto; display: grid; grid-template-columns: 230px 1fr; align-items: center; gap: 36px; } .blog-logo, .blog-logo img { display: block; width: 220px; height: 78px; object-fit: contain; } .blog-nav__links { display: flex; justify-content: flex-end; gap: 30px; } .blog-nav__links a { color: rgb(255 253 248 / 72%); text-decoration: none; } .blog-nav__links a:hover, .blog-nav__links a[aria-current="page"] { color: var(--blog-cream); } .blog-hero { padding: 92px 20px 84px; color: var(--blog-cream); background: var(--blog-forest); text-align: center; } .blog-hero p { margin: 0 0 14px; color: var(--blog-gold); font-size: 0.84rem; font-weight: 700; } .blog-hero h1 { max-width: 850px; margin: 0 auto; font-family: "Frank Ruhl Libre", Georgia, serif; font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 400; letter-spacing: 0; line-height: 1.08; } .blog-hero span { display: block; margin-top: 22px; color: rgb(255 253 248 / 72%); } .blog-grid { width: min(1120px, calc(100% - 40px)); padding: 72px 0 90px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } .blog-card { overflow: hidden; border: 1px solid var(--blog-line); border-radius: 8px; background: #fff; } .blog-card__image { display: block; aspect-ratio: 4 / 3; background: #e4e2d9; } .blog-card__image img { width: 100%; height: 100%; object-fit: cover; } .blog-card__body { padding: 24px; } .blog-card time, .blog-article time { color: #68705f; font-size: 0.85rem; } .blog-card h2 { margin: 10px 0; font-family: "Frank Ruhl Libre", Georgia, serif; font-size: 1.7rem; letter-spacing: 0; } .blog-card h2 a, .blog-card__link { color: var(--blog-ink); } .blog-card p { min-height: 4.8em; color: #596052; line-height: 1.6; } .blog-card__link { color: #886924; font-weight: 700; } .blog-empty { grid-column: 1 / -1; padding: 70px 20px; color: #68705f; text-align: center; } .blog-article, .blog-not-found { width: min(820px, calc(100% - 40px)); padding: 72px 0 100px; margin: 0 auto; } .blog-back { color: #765b20; } /* The link to the same article in the other language sits beside the back link; logical margin so it works in both directions. */ .blog-translation { margin-inline-start: 22px; } .blog-article header { margin: 38px 0; } .blog-article h1, .blog-not-found h1 { margin: 12px 0 18px; font-family: "Frank Ruhl Libre", Georgia, serif; font-size: clamp(2.6rem, 6vw, 4.7rem); font-weight: 400; letter-spacing: 0; line-height: 1.08; } .blog-article header p { color: #596052; font-size: 1.15rem; line-height: 1.7; } .blog-article figure { margin: 0 0 48px; } .blog-article figure img { width: 100%; max-height: 620px; object-fit: cover; } .blog-article__content { font-size: 1.08rem; line-height: 1.9; } .blog-article__content p { margin: 0 0 1.5em; } /* Articles mix Hebrew with English terms, prices and study names. "plaintext" makes each block follow the direction of its own first strong character, so a Hebrew paragraph aligns right and an English one aligns left, and punctuation stays on the correct side of both. Without it every block inherits RTL from and Latin text renders with its commas and periods flipped to the wrong end. */ .blog-card__body h2, .blog-card__body p, .blog-article header h1, .blog-article header p, .blog-article figcaption, .blog-article__content h2, .blog-article__content h3, .blog-article__content h4, .blog-article__content p, .blog-article__content li, .blog-article__content blockquote { unicode-bidi: plaintext; text-align: start; } .blog-article__content h2, .blog-article__content h3 { margin: 1.6em 0 0.6em; font-family: "Frank Ruhl Libre", Georgia, serif; font-weight: 400; line-height: 1.25; } .blog-article__content h2 { font-size: 1.75rem; } .blog-article__content h3 { font-size: 1.35rem; } .blog-article__content ul, .blog-article__content ol { margin: 0 0 1.5em; padding-inline-start: 1.4em; } .blog-article__content li { margin-bottom: 0.6em; } .blog-article__content blockquote { margin: 1.6em 0; padding-inline-start: 18px; border-inline-start: 3px solid var(--blog-gold); color: #596052; } .blog-footer { min-height: 100px; padding: 28px 40px; display: flex; align-items: center; justify-content: space-between; color: rgb(255 253 248 / 70%); background: var(--blog-forest); } .blog-footer a { color: var(--blog-cream); } /* The footer lays out space-between and now has three children, so the Instagram link needs no margin of its own. */ .blog-footer .footer-ig { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; } .blog-footer .footer-ig:hover span, .blog-footer .footer-ig:focus-visible span { text-decoration: underline; } .blog-footer .footer-ig svg { flex: none; } @media (max-width: 820px) { .blog-nav { grid-template-columns: 1fr; gap: 4px; padding: 8px 0 18px; } .blog-nav__links { justify-content: flex-start; flex-wrap: wrap; gap: 8px 20px; } .blog-grid { grid-template-columns: 1fr; } } .blog-subscribe { width: min(760px, calc(100% - 40px)); padding: 40px 32px 44px; margin: 0 auto 90px; border: 1px solid var(--blog-line); border-radius: 8px; background: #fff; text-align: center; } .blog-subscribe h2 { margin: 0 0 10px; font-family: "Frank Ruhl Libre", Georgia, serif; font-size: 1.75rem; font-weight: 400; } .blog-subscribe > p { margin: 0 auto 24px; max-width: 46ch; color: #596052; line-height: 1.6; } .blog-subscribe form { display: flex; flex-direction: column; align-items: center; gap: 14px; } .blog-subscribe input[type="email"] { width: min(360px, 100%); padding: 12px 14px; border: 1px solid var(--blog-line); border-radius: 6px; font: inherit; } .blog-subscribe__consent { display: flex; align-items: flex-start; gap: 9px; max-width: 46ch; color: #596052; font-size: 0.92rem; line-height: 1.5; text-align: start; } .blog-subscribe__status:empty { display: none; } .blog-subscribe__status { margin: 18px 0 0; font-weight: 700; } .blog-subscribe__status[data-state="ok"] { color: #3f6b34; } .blog-subscribe__status[data-state="error"] { color: #9a3412; } /* Bots fill hidden fields; people never see this one. */ .subscribe-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }