/* * Shared by the English and Hebrew pages. Kept in one file deliberately: the * copy has to exist twice, but the design must not, or the two languages drift * into looking like different products. * * Direction is handled with logical properties rather than [dir="rtl"] overrides, * so the Hebrew page mirrors itself from alone. */ :root { --teal-900: #134e4a; --teal-700: #0f766e; --teal-600: #0d9488; --teal-500: #14b8a6; --teal-50: #f0fdfa; --ink: #0f172a; --muted: #52616f; --line: #cbd5e1; --bg: #ffffff; --surface: #f8fafc; } /* * Dark palette, three-state so a visitor's explicit choice can override the * system. Applied when the system asks for dark UNLESS the visitor forced light, * and whenever the visitor forced dark — so the toggle (theme.js writes * `data-theme` on ) wins in both directions. Light is the bare :root above. * The token values are the same in both selectors; kept as two blocks because * CSS has no way to share one. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink: #e8eef2; --muted: #9fb0bd; --line: #23343c; --bg: #0c1517; --surface: #111e21; --teal-50: #10262a; --teal-700: #2dd4bf; --teal-900: #99f6e4; } } :root[data-theme="dark"] { --ink: #e8eef2; --muted: #9fb0bd; --line: #23343c; --bg: #0c1517; --surface: #111e21; --teal-50: #10262a; --teal-700: #2dd4bf; --teal-900: #99f6e4; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; /* Apple ships type with optical sizing and legibility tuning baked in; ask the system font for the same rather than leaving it flat at every size. */ font-optical-sizing: auto; text-rendering: optimizeLegibility; } /* Hebrew reads better with slightly more air between lines. */ html[lang="he"] body { line-height: 1.75; } .wrap { max-width: 68rem; margin: 0 auto; padding: 0 1.5rem; } a { color: var(--teal-700); } /* ---- header ---- A floating translucent layer that content scrolls *under*, not an opaque strip that consumes a fixed band (Apple's material chrome, §12). The blur + saturate is what makes it read as glass catching the page behind it; the hairline is the material's edge, softened so it's an edge and not a hard divider. Reduced transparency and the no-backdrop-filter fallback both make it solid — see the media blocks at the end. */ header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 72%, transparent); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); } /* No backdrop-filter (older browsers): fall back to a solid bar so the header never turns into unreadable see-through text over scrolling content. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { header { background: var(--bg); } } .bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 0; } .logo { display: flex; align-items: center; gap: .6rem; font-weight: 700; letter-spacing: -.02em; font-size: 1.15rem; } /* Logo: a teal speech bubble with a white check, an inline SVG baked into the background so it's one source of truth for every page and needs no asset. */ .mark { width: 1.9rem; height: 1.9rem; flex: none; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%230d9488%27%20d%3D%27M5%202h14a3%203%200%200%201%203%203v10a3%203%200%200%201-3%203H10l-5%204v-4a3%203%200%200%201-3-3V5a3%203%200%200%201%203-3z%27%2F%3E%3Cpath%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%272.4%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20d%3D%27M8%2010l2.8%202.8L16.5%207%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } nav { display: flex; gap: 1.4rem; font-size: .95rem; align-items: center; } nav a { color: var(--muted); text-decoration: none; } nav a:hover { color: var(--teal-700); } /* "About" dropdown — a native

so it needs no script and taps on mobile. Logical properties keep it correct in the RTL (Hebrew) layout. */ .dropdown { position: relative; } .dropdown > summary { list-style: none; cursor: pointer; color: var(--muted); user-select: none; } .dropdown > summary::-webkit-details-marker { display: none; } .dropdown > summary::after { content: "▾"; font-size: .75em; margin-inline-start: .3em; } .dropdown > summary:hover, .dropdown[open] > summary { color: var(--teal-700); } .dropdown-menu { position: absolute; top: calc(100% + .5rem); inset-inline-start: 0; display: flex; flex-direction: column; gap: .2rem; background: var(--bg); border: 1px solid var(--line); border-radius: .6rem; padding: .45rem .3rem; min-width: 11rem; z-index: 20; box-shadow: 0 8px 24px rgba(0, 0, 0, .1); } .dropdown-menu a { padding: .4rem .8rem; border-radius: .4rem; white-space: nowrap; } .dropdown-menu a:hover { background: var(--surface); } /* Three languages, so the switcher shows all of them with the current one marked rather than toggling between two. */ .langs { display: flex; gap: .35rem; } .lang { border: 1px solid var(--line); border-radius: 999px; padding: .25rem .7rem; color: var(--teal-700) !important; font-weight: 600; font-size: .88rem; white-space: nowrap; } .lang:hover { border-color: var(--teal-500); } .lang[aria-current="page"] { background: var(--teal-600); border-color: var(--teal-600); color: #fff !important; cursor: default; } /* Light/dark toggle — a native