/* ========================================================================== Hebrew World — brand layer. ⚠️ SPECIFICITY, read before editing. The Tailwind CDN builds its stylesheet in the browser and appends it to AFTER this file's , so a plain selector here LOSES to Tailwind's preflight (which resets h1..h4 to inherit) and to its utility classes. Every rule below is therefore scoped with `body` to outrank them. Keep that prefix on anything you add. Type pair, chosen so Hebrew renders properly rather than as a Latin fallback: Frank Ruhl Libre — a serif designed for Hebrew, full Latin coverage. Assistant — Hebrew-native humanist sans. Both carry real fallback stacks below. Everything visual that is "ours" lives in this one file, so a future change is one edit and not thirteen HTML documents. ========================================================================== */ :root { --hw-navy: #1a2e3b; --hw-navy-deep: #12212b; --hw-blue: #2596be; --hw-blue-deep: #1d7a9c; --hw-ground: #faf9f7; /* warm off-white page ground, not pure white */ --hw-line: #e2ded7; /* card borders that are actually visible */ --hw-ink: #1f3340; --hw-muted: #5b6b76; --hw-radius: 0.85rem; --hw-radius-lg: 1.25rem; } /* ---------------------------------------------------------------- base --- */ html { -webkit-text-size-adjust: 100%; } /* body carries Tailwind's .bg-white in the markup, which outranks a plain element selector, hence body.bg-white here. */ html body, body.bg-white { background-color: var(--hw-ground); color: var(--hw-ink); font-family: "Assistant", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans Hebrew", sans-serif; font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; } body h1, body h2, body h3, body h4, body .hw-display { font-family: "Frank Ruhl Libre", Georgia, "Times New Roman", "Noto Serif Hebrew", serif; color: var(--hw-navy); font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; } /* The scale. Every h2 used to be text-2xl, barely above body text, which is why the page read as one flat scroll with no hierarchy. */ body h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); } body h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); } body h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); } body h4 { font-size: 1.2rem; line-height: 1.3; } body h1 + p, body h2 + p { margin-top: 0.85rem; } body section h2 { margin-bottom: 0.25rem; } /* Hebrew needs a little more size for the same optical weight. */ [dir="rtl"] body { font-size: 18px; } /* ----------------------------------------------------- colour retuning --- */ /* These re-point Tailwind utilities already present in the markup, so the palette lands without rewriting four HTML files. Change the variables above, not the values here. */ body .text-gray-900 { color: var(--hw-ink); } body .text-gray-800 { color: #33454f; } body .text-gray-700 { color: #4a5b66; } body .text-gray-600, body .text-gray-500 { color: var(--hw-muted); } /* Invisible hairlines were the main reason cards did not read as cards. */ body .border-gray-100, body .border-gray-200 { border-color: var(--hw-line); } body .border-gray-300 { border-color: #cfc9c0; } /* Alternating bands: tinted sections become WHITE against the warm ground, which gives the page real structure instead of one undifferentiated scroll. */ body .bg-gray-50\/40, body .bg-gray-50\/60, body .bg-gray-50 { background-color: #ffffff; } /* ------------------------------------------------------------ buttons ---- */ /* One primary. The page had three competing filled buttons (gray-900 hero, navy header, green WhatsApp), so nothing signalled what mattered. */ body .bg-gray-900 { background-color: var(--hw-navy); } body .hover\:bg-black:hover { background-color: var(--hw-navy-deep); } body .bg-green-500 { background-color: var(--hw-blue); } body .hover\:bg-green-600:hover { background-color: var(--hw-blue-deep); } body a[class*="rounded-"], body button[class*="rounded-"] { font-family: inherit; } /* ------------------------------------------------------------- shapes ---- */ /* rounded-3xl on everything read soft and app-like. The avatar is 35-60 and well paid; this tightens it without going square. */ body .rounded-3xl { border-radius: var(--hw-radius-lg); } body .rounded-2xl { border-radius: var(--hw-radius); } body .rounded-xl { border-radius: 0.7rem; } body .shadow-sm { box-shadow: 0 1px 2px rgba(26, 46, 59, 0.06); } body .shadow { box-shadow: 0 2px 8px rgba(26, 46, 59, 0.07); } body .shadow-xl { box-shadow: 0 16px 40px rgba(26, 46, 59, 0.13); } /* -------------------------------------------------------------- header --- */ body header.sticky { background-color: rgba(250, 249, 247, 0.88); } body header { border-bottom-color: var(--hw-line); } body .hw-wordmark { font-family: "Frank Ruhl Libre", Georgia, serif; font-weight: 700; letter-spacing: -0.015em; color: var(--hw-navy); } /* Nav links: quieter than the CTA, so the CTA is the only loud thing. */ body header nav a { color: var(--hw-muted); font-weight: 600; font-size: 0.95rem; } body header nav a:hover { color: var(--hw-navy); } /* --------------------------------------------------------------- misc ---- */ body blockquote { font-size: 1.02em; } body footer { border-top-color: var(--hw-line); } body ::selection { background: #cfe8f2; color: var(--hw-navy); } body a:focus-visible, body button:focus-visible { outline: 2px solid var(--hw-blue); outline-offset: 2px; } /* Tailwind's small sizes were set against a 16px base; ours is 17px, so they read too small next to body copy. */ body .text-sm { font-size: 0.95rem; } body .text-xs { font-size: 0.85rem; } body .max-w-prose { max-width: 62ch; } /* A short accent rule under a section heading gives the page landmarks. */ body section > div > h2::after, body section > div > div > h2::after { content: ""; display: block; margin-top: 0.9rem; height: 3px; width: 3.25rem; border-radius: 3px; background-color: var(--hw-blue); } /* Buttons: keep a CTA on one line once there is room for it. Below 640px they are allowed to wrap, because Russian and Hebrew labels are longer. */ /* The MailerLite embed positions a checkbox input 7px outside the container, which in RTL pushes the whole document sideways and produces a horizontal scrollbar. Contain it rather than hiding overflow on , so a real layout bug elsewhere still shows up. */ body .ml-form-embedContainer, body .ml-form-embedWrapper { overflow-x: hidden; } @media (min-width: 641px) { body a[class*="rounded-2xl"], body a[class*="rounded-xl"] { white-space: nowrap; } } body a[class*="rounded-"] { line-height: 1.25; } @media (max-width: 640px) { html body { font-size: 16px; } body h1 { font-size: clamp(2rem, 8vw, 2.6rem); } body h2 { font-size: clamp(1.6rem, 6vw, 2rem); } }