/* ============================================================ Shared site header (KOLKLI) — used on every page. Injected into by header.js. All rules are scoped under #site-header so they never collide with a page's own .nav / .topbar / .pillbtn styles. Relies on the CSS variables (--grad, --panel, --line, …) that every page already defines in :root, so it themes automatically. ============================================================ */ /* The wrapper div — not .sh-nav — carries the sticky, because it is a direct child of (the tall scroll box). A sticky element can never escape its own parent's box, so keeping sticky on the short .sh-nav wrapper made it unstick immediately. Requires that no ancestor of #site-header creates a scroll container (pages use overflow-x:clip, not hidden, for that reason). */ #site-header{display:block;position:sticky;top:0;z-index:60;} #site-header .sh-nav{position:relative;font-family:var(--sans);direction:inherit; backdrop-filter:saturate(1.4) blur(10px); background:rgba(247,248,255,.74); border-bottom:1px solid transparent;transition:border-color .2s,background .2s;} #site-header .sh-nav.scrolled{border-bottom-color:#e7eafd;background:rgba(247,248,255,.9);} #site-header .sh-bar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px; height:72px;width:100%;max-width:none;margin:0 auto;padding:0 22px;} #site-header .sh-brand{display:flex;align-items:center;color:var(--ink);text-decoration:none;} #site-header .sh-logo-img{height:34px;width:auto;display:block;flex-shrink:0;} #site-header .sh-tools{display:flex;align-items:center;gap:8px;} /* dead-center the nav in the bar regardless of logo / button widths */ #site-header .sh-links{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); display:flex;align-items:center;gap:18px;} #site-header .sh-links a{display:inline-flex;align-items:center;gap:5px;padding:8px 0;border-radius:9px; font-size:15px;font-weight:700;color:#121834;white-space:nowrap;text-decoration:none;transition:color .12s,background .12s;} #site-header .sh-links a:hover{color:#5d43f5;background:transparent;} #site-header .sh-new{display:inline-flex;align-items:center;justify-content:center;height:24px;padding:0 8px; border-radius:9px;background:linear-gradient(135deg,#7b3cff,#4e72ff);color:#fff;font-size:11px;font-weight:800; box-shadow:0 8px 18px rgba(100,72,255,.24);} #site-header .sh-chev{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;} /* Tools mega-menu — click "Tools" to drop a panel with every tool below the bar */ #site-header .sh-drop{position:relative;display:inline-flex;align-items:center;} #site-header .sh-tlink{display:inline-flex;align-items:center;gap:5px;padding:8px 0; background:none;border:0;cursor:pointer;font-family:var(--sans);font-size:15px;font-weight:700; color:#121834;white-space:nowrap;transition:color .12s;} #site-header .sh-tlink:hover,#site-header .sh-drop.open .sh-tlink{color:#5d43f5;} #site-header .sh-tlink .sh-chev{transition:transform .18s;} #site-header .sh-drop.open .sh-tlink .sh-chev{transform:rotate(180deg);} /* Mega-menu is centered over the page: it lives directly inside .sh-bar (the max-width content box, itself centered via margin:auto), and we pin it to the bar's horizontal center with left:50% + translateX(-50%). Centering is symmetric, so it needs no RTL flip. */ #site-header .sh-mega{position:absolute;top:calc(100% + 16px);left:50%;z-index:70; width:min(880px,100%);overflow:hidden; border-radius:20px;background:#fff;border:1px solid #e8ebfb;box-shadow:0 30px 72px rgba(30,37,80,.20); opacity:0;visibility:hidden;transform:translate(-50%,-8px);pointer-events:none; transition:opacity .18s ease,transform .18s ease,visibility .18s;} #site-header .sh-mega.open{opacity:1;visibility:visible;transform:translate(-50%,0);pointer-events:auto;} #site-header .sh-mega-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 14px;padding:18px;} #site-header .sh-col{display:flex;flex-direction:column;} #site-header .sh-col.c-audio{--ic:#7c3aed;--ic-bg:#efe9fe;} #site-header .sh-col.c-image{--ic:#12a077;--ic-bg:#e3f6ef;} #site-header .sh-col.c-video{--ic:#3b6ff6;--ic-bg:#e8f0fe;} #site-header .sh-col.c-docs {--ic:#ef7a3a;--ic-bg:#fdeee2;} #site-header .sh-col.c-conv {--ic:#d6489a;--ic-bg:#fce7f3;} #site-header .sh-col.c-comp {--ic:#0fa6ab;--ic-bg:#def5f5;} /* "Design & Dev Tools" mega-menu column tints */ #site-header .sh-col.c-color {--ic:#e0447a;--ic-bg:#fde7f0;} #site-header .sh-col.c-css {--ic:#7c3aed;--ic-bg:#efe9fe;} #site-header .sh-col.c-code {--ic:#2f7d63;--ic-bg:#e3f6ef;} #site-header .sh-col.c-seo {--ic:#c27803;--ic-bg:#fdf0d5;} #site-header .sh-col.c-layout{--ic:#3b6ff6;--ic-bg:#e8f0fe;} /* "Text Tools" mega-menu column tints */ #site-header .sh-col.c-tedit{--ic:#7c3aed;--ic-bg:#efe9fe;} #site-header .sh-col.c-tlist{--ic:#3b6ff6;--ic-bg:#e8f0fe;} #site-header .sh-col.c-tdev {--ic:#0fa6ab;--ic-bg:#def5f5;} /* small uppercase category label with a tinted emoji chip */ #site-header .sh-col-h{display:flex;align-items:center;gap:9px;padding:6px 8px;margin-bottom:2px; font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#98a1b8;text-decoration:none;} #site-header .sh-col-i{width:26px;height:26px;border-radius:8px;flex-shrink:0; display:flex;align-items:center;justify-content:center;background:var(--ic-bg);font-size:14px;line-height:1;} #site-header .sh-col-h:hover{color:var(--ic);} /* each tool is a row: colored icon tile + name + one-line description */ #site-header .sh-item{display:flex;align-items:center;gap:11px;padding:8px;border-radius:12px; text-decoration:none;transition:background .12s;} #site-header .sh-item:hover{background:#f5f6ff;} #site-header .sh-item .it-ic{width:36px;height:36px;border-radius:11px;flex-shrink:0; display:flex;align-items:center;justify-content:center;background:var(--ic-bg);color:var(--ic);transition:transform .12s;} #site-header .sh-item:hover .it-ic{transform:scale(1.07);} #site-header .sh-item .it-ic svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2; stroke-linecap:round;stroke-linejoin:round;} #site-header .sh-item .it-tx{display:flex;flex-direction:column;min-width:0;} #site-header .sh-item .it-t{font-size:13px;font-weight:700;color:#1b2138;line-height:1.25;} #site-header .sh-item .it-d{font-size:11px;color:#8a92aa;line-height:1.25;margin-top:1px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} #site-header .sh-item:hover .it-t{color:#5d43f5;} /* gradient promo bar pinned to the bottom of the menu */ #site-header .sh-mega-foot{display:flex;align-items:center;justify-content:space-between;gap:14px; padding:13px 20px;background:linear-gradient(100deg,#f4f1ff,#eaf1ff);border-top:1px solid #eceefb;} #site-header .sh-foot-t{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;color:#4a5170;} #site-header .sh-foot-badge{display:inline-flex;align-items:center;height:19px;padding:0 8px;border-radius:7px; background:linear-gradient(135deg,#7b3cff,#4e72ff);color:#fff;font-size:10px;font-weight:800;letter-spacing:.03em;} #site-header .sh-foot-cta{font-size:12.5px;font-weight:800;color:#5d43f5;text-decoration:none;white-space:nowrap;} #site-header .sh-foot-cta:hover{text-decoration:underline;} /* ============================================================ Products dropdown — a compact menu of the file-transfer product pages, anchored under its nav button. Shares the .sh-drop open/chevron mechanics with the Tools dropdown. ============================================================ */ /* Anchored to the button's inline-start edge (translateY only for the reveal), so it drops straight under "קבצים" and mirrors correctly in RTL. Using a translateX centering hack here breaks in RTL because CSS translate() is not direction-aware — it shoved the menu far to the left of the button. */ #site-header .sh-prodmenu{position:absolute;top:calc(100% + 14px);inset-inline-start:0;z-index:75; width:308px;padding:8px;border-radius:16px;background:#fff;border:1px solid #e8ebfb; box-shadow:0 24px 56px rgba(30,37,80,.20); opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none; transition:opacity .18s ease,transform .18s ease,visibility .18s;} #site-header .sh-proddrop.open .sh-prodmenu{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;} #site-header .sh-prod-item{display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px; text-decoration:none;transition:background .12s;} #site-header .sh-prod-item:hover{background:#f5f6ff;} #site-header .sh-prod-ic{width:38px;height:38px;border-radius:11px;flex-shrink:0; display:flex;align-items:center;justify-content:center;background:#efe9fe;color:#7c3aed;transition:transform .12s;} #site-header .sh-prod-item:hover .sh-prod-ic{transform:scale(1.07);} /* Per-service icon tints — mirror the "My Projects" tone colours (dashboard .mp-tone-*): select=blue, receive=teal, send=purple, review=green. */ #site-header .sh-ic-select{background:#e7effe;color:#2563eb;} #site-header .sh-ic-receive{background:#e0f3f8;color:#0891b2;} #site-header .sh-ic-send{background:#f0ebfe;color:#6f3afb;} #site-header .sh-ic-review{background:#e4f6ea;color:#16a34a;} #site-header .sh-prod-ic svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2; stroke-linecap:round;stroke-linejoin:round;} #site-header .sh-prod-tx{display:flex;flex-direction:column;min-width:0;} #site-header .sh-prod-t{font-size:14px;font-weight:700;color:#1b2138;line-height:1.25;} #site-header .sh-prod-d{font-size:11.5px;color:#8a92aa;line-height:1.25;margin-top:1px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} #site-header .sh-prod-item:hover .sh-prod-t{color:#5d43f5;} /* ============================================================ AI Tools dropdown — a compact 2-column menu of the AI tools, anchored under its nav button. Reuses the .sh-prod-* row styling and the .sh-drop open/chevron mechanics; a full-width footer link drops to the /ai/ hub. ============================================================ */ #site-header .sh-aimenu{position:absolute;top:calc(100% + 14px);inset-inline-start:0;z-index:75; width:min(486px,92vw);padding:8px;border-radius:16px;background:#fff;border:1px solid #e8ebfb; box-shadow:0 24px 56px rgba(30,37,80,.20); display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 4px; opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none; transition:opacity .18s ease,transform .18s ease,visibility .18s;} #site-header .sh-aidrop.open .sh-aimenu{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;} #site-header .sh-ai-item{padding:9px;} #site-header .sh-aimenu-all{grid-column:1/-1;display:flex;align-items:center;justify-content:center; margin-top:4px;padding:11px;border-radius:12px;background:linear-gradient(100deg,#f4f1ff,#eaf1ff); font-size:12.5px;font-weight:800;color:#5d43f5;text-decoration:none;transition:filter .12s;} #site-header .sh-aimenu-all:hover{filter:brightness(.97);} #site-header .sh-pill{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px; border-radius:15px;background:rgba(255,255,255,.58);border:1px solid #e8ebfb;color:#111735; cursor:pointer;font-size:13.5px;font-weight:700;font-family:var(--sans);text-decoration:none; box-shadow:0 8px 24px rgba(30,37,80,.04);transition:border-color .12s,transform .08s,background .12s;} #site-header .sh-pill:hover{border-color:#cdd4f8;background:#fff;} #site-header .sh-pill:active{transform:scale(.97);} #site-header .sh-icon{width:38px;height:38px;padding:0;justify-content:center;font-size:15px;line-height:1;} #site-header .sh-lang{width:auto;gap:8px;padding:0 13px;border-radius:18px;} #site-header .sh-lang svg:first-child{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;} /* Light/Dark theme toggle — an icon pill matching the language/menu pills. Wired by header.js (with a per-page applyTheme override when present). */ #site-header .sh-theme{display:inline-flex;} #site-header .sh-theme #themeIco{font-size:15px;line-height:1;} /* ============================================================ Language picker dropdown (owned by header.js). The globe pill shows the active language's own name; clicking it drops a small menu listing every interface language by its endonym. ============================================================ */ #site-header .sh-langwrap{position:relative;display:inline-flex;} #site-header .sh-lang .sh-chev{transition:transform .18s;} #site-header .sh-langwrap.open .sh-lang .sh-chev{transform:rotate(180deg);} /* Anchored to the button's inline-end edge, so it mirrors correctly in RTL. */ #site-header .sh-langmenu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:80; min-width:184px;padding:6px;border-radius:14px;background:#fff;border:1px solid #e8ebfb; box-shadow:0 20px 48px rgba(30,37,80,.18); opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none; transition:opacity .16s ease,transform .16s ease,visibility .16s;} #site-header .sh-langwrap.open .sh-langmenu{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;} #site-header .sh-langopt{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%; padding:9px 12px;border:0;border-radius:10px;background:none;cursor:pointer; font-family:var(--sans);font-size:14px;font-weight:700;color:#1b2138;text-align:start; transition:background .12s,color .12s;} #site-header .sh-langopt:hover{background:#f5f6ff;color:#5d43f5;} #site-header .sh-langopt.active{color:#5d43f5;} #site-header .sh-langopt-c{width:16px;height:16px;flex-shrink:0;stroke:currentColor;fill:none; stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0;} #site-header .sh-langopt.active .sh-langopt-c{opacity:1;} #site-header.sh-signed-in .sh-tools > .sh-langwrap{display:none;} /* Signed-in users get a crisp, clean, solid-white header — no lavender tint, no blur — just a hairline bottom border for definition. */ #site-header.sh-signed-in .sh-nav{background:#fff;backdrop-filter:none; border-bottom-color:#edeff8;} #site-header.sh-signed-in .sh-nav.scrolled{background:#fff;border-bottom-color:#e2e6f5;} #site-header .sh-cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;color:#fff; border:none;cursor:pointer;font-weight:800;font-size:14px;padding:0 22px;height:42px;border-radius:15px; font-family:var(--sans);text-decoration:none;text-shadow:0 1px 2px rgba(0,0,0,.18); background:linear-gradient(135deg,#7b34ff 0%,#3f85ff 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 16px 30px rgba(82,94,244,.22); transition:filter .14s,transform .08s;} #site-header .sh-cta:hover{filter:brightness(1.06);} #site-header .sh-cta:active{transform:translateY(1px);} /* ============================================================ Signed-in account area (owned by header.js). Replaces the Login / Sign Up buttons with an avatar + name button that drops a menu of quick account actions. Mirrors the language picker's dropdown mechanics, so it's RTL-safe out of the box. ============================================================ */ #site-header .sh-autharea{display:inline-flex;align-items:center;gap:8px;} #site-header .sh-acctwrap{position:relative;display:inline-flex;} #site-header .sh-acctbtn{gap:8px;padding-inline:6px 12px;height:40px;border-radius:20px;} #site-header .sh-acctbtn .sh-chev{transition:transform .18s;} #site-header .sh-acctwrap.open .sh-acctbtn .sh-chev{transform:rotate(180deg);} #site-header .sh-avatar{width:28px;height:28px;border-radius:50%;flex-shrink:0;overflow:hidden; display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,#7b34ff,#3f85ff);color:#fff;font-size:12.5px;font-weight:800;line-height:1;} #site-header .sh-avatar-img,#site-header .sh-acct-av img{width:100%;height:100%;object-fit:cover;} #site-header .sh-acctbtn-name{font-size:14px;font-weight:700;color:#111735;max-width:130px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} /* Anchored to the button's inline-end edge → mirrors correctly in RTL. */ #site-header .sh-acctmenu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:80; min-width:250px;padding:6px;border-radius:16px;background:#fff;border:1px solid #e8ebfb; box-shadow:0 20px 48px rgba(30,37,80,.18); opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none; transition:opacity .16s ease,transform .16s ease,visibility .16s;} #site-header .sh-acctwrap.open .sh-acctmenu{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;} #site-header .sh-acct-head{display:flex;align-items:center;gap:11px;padding:10px 12px 12px;} #site-header .sh-acct-av{width:40px;height:40px;border-radius:50%;flex-shrink:0;overflow:hidden; display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,#7b34ff,#3f85ff);color:#fff;font-size:16px;font-weight:800;line-height:1;} #site-header .sh-acct-id{display:flex;flex-direction:column;min-width:0;flex:1;} #site-header .sh-acct-name-row{display:flex;align-items:center;gap:8px;min-width:0;} #site-header .sh-acct-name{font-size:14px;font-weight:800;color:#1b2138;line-height:1.3; min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} #site-header .sh-acct-plan{flex-shrink:0;padding:3px 7px;border-radius:999px;background:#f1edff; color:#5d43f5;font-size:11px;font-weight:800;line-height:1;} #site-header .sh-acct-mail{font-size:12px;color:#8a92aa;line-height:1.3;direction:ltr;text-align:start; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} #site-header .sh-acct-sep{height:1px;margin:6px 8px;background:#eceefb;} #site-header .sh-acct-item{display:flex;align-items:center;gap:11px;width:100%; padding:10px 12px;border:0;border-radius:10px;background:none;cursor:pointer; font-family:var(--sans);font-size:14px;font-weight:700;color:#1b2138;text-align:start;text-decoration:none; transition:background .12s,color .12s;} #site-header .sh-acct-item:hover{background:#f5f6ff;color:#5d43f5;} #site-header .sh-acct-item svg{width:18px;height:18px;flex-shrink:0;color:#8a92aa; stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;} #site-header .sh-acct-item:hover svg{color:#5d43f5;} #site-header .sh-acct-admin,#site-header .sh-acct-admin svg{color:#5d43f5;} #site-header .sh-acct-out,#site-header .sh-acct-out svg{color:#e5484d;} #site-header .sh-acct-out:hover{background:#fdecec;color:#e5484d;} #site-header .sh-acct-langbox{margin:2px 6px 6px;padding:8px 6px 6px;border:1px solid #edf0fb; border-radius:12px;background:#f7f8ff;} #site-header .sh-acct-langhead{width:100%;display:flex;align-items:center;gap:10px;padding:2px 6px 8px; border:0;background:none;cursor:pointer;font-family:var(--sans);text-align:start; color:#1b2138;font-size:13px;font-weight:800;} #site-header .sh-acct-langhead svg{width:18px;height:18px;flex-shrink:0;color:#8a92aa; stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;} #site-header .sh-acct-langhead b{margin-inline-start:auto;color:#5d43f5;font-size:12.5px;} #site-header .sh-acct-langhead .sh-chev{width:13px;height:13px;color:#8a92aa;transition:transform .18s;} #site-header .sh-acct-langbox.open .sh-acct-langhead .sh-chev{transform:rotate(180deg);} #site-header .sh-acct-langopts{display:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;} #site-header .sh-acct-langbox.open .sh-acct-langopts{display:grid;} #site-header .sh-acct-langopt{min-width:0;height:32px;border:0;border-radius:9px;background:transparent; cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px; font-family:var(--sans);font-size:12px;font-weight:800;color:#59627a; transition:background .12s,color .12s,box-shadow .12s;} #site-header .sh-acct-langopt:hover{background:#fff;color:#5d43f5;} #site-header .sh-acct-langopt.active{background:#fff;color:#5d43f5;box-shadow:0 1px 2px rgba(30,37,80,.06);} #site-header .sh-acct-langopt svg{display:none;width:13px;height:13px;flex-shrink:0;stroke:currentColor; fill:none;stroke-width:2.7;stroke-linecap:round;stroke-linejoin:round;} #site-header .sh-acct-langopt.active svg{display:block;} /* Compact avatar-only button on phones. */ @media (max-width:640px){ #site-header .sh-acctbtn-name{display:none;} #site-header .sh-acctbtn .sh-chev{display:none;} #site-header .sh-acctbtn{padding-inline:5px;width:40px;justify-content:center;} } #site-header .sh-menu{display:none;} #site-header .sh-panel{display:none;border-top:1px solid var(--line);background:var(--panel);} #site-header .sh-panel.open{display:block;} #site-header .sh-panel .sh-inner{display:flex;flex-direction:column;width:100%;max-width:none;margin:0 auto;padding:6px 22px 14px;} #site-header .sh-panel a{padding:12px 8px;font-size:15px;color:var(--ink-2);text-decoration:none; border-bottom:1px solid var(--line-2);} #site-header .sh-panel a:last-child{border-bottom:none;} /* "Products" group label + indented sub-links inside the mobile panel */ #site-header .sh-panel-h{padding:14px 8px 4px;font-size:11px;font-weight:800;letter-spacing:.05em; text-transform:uppercase;color:#98a1b8;} #site-header .sh-panel .sh-panel-sub{padding-inline-start:20px;} /* Progressive nav compaction: keep all 6 items INLINE on laptops/tablets. The nav is absolutely centered, so it OVERLAPS (not wraps) the logo + side buttons once it's wider than the leftover room. Wide desktops (styles above) stay roomy; from here down we shrink the nav spacing/font + the side pills so the 6-item nav still clears the buttons without folding to the ☰. One tier (not two) so the compaction is continuous — a gap that re-opened just above a second breakpoint would let the nav re-expand and overlap. Values tuned via Playwright overlap measurements; the ☰ only appears on phones / small tablets (collapse query below). */ @media (max-width:1560px){ #site-header .sh-bar{width:100%;max-width:none;} #site-header .sh-links{gap:7px;} #site-header .sh-links a, #site-header .sh-tlink{font-size:12.5px;gap:4px;} #site-header .sh-links a{padding:6px 0;} #site-header .sh-tools{gap:5px;} #site-header .sh-pill{height:36px;padding:0 10px;font-size:12.5px;gap:6px;} #site-header .sh-lang{padding:0 9px;gap:6px;} #site-header .sh-cta{height:38px;padding:0 14px;font-size:12.5px;} #site-header .sh-icon{width:36px;height:36px;} #site-header .sh-new{height:19px;padding:0 6px;font-size:10px;} #site-header .sh-logo-img{height:30px;} } /* Collapse the inline links into the ☰ menu only on phones / small tablets. The compaction above keeps all 6 items inline down to laptop widths; below this the centered nav can no longer clear the buttons, so fold it into the ☰ (which lists every item). Thresholds from Playwright overlap measurements of the compacted nav — he/en share one (~1200px min); ru (wider labels) folds earlier (~1440px min). If you add/remove nav items, re-measure and adjust. */ @media (max-width:1240px){ #site-header .sh-links{display:none;} #site-header .sh-menu{display:inline-flex;} } @media (max-width:1470px){ html[lang="ru"] #site-header .sh-links{display:none;} html[lang="ru"] #site-header .sh-menu{display:inline-flex;} } @media (max-width:1180px){ #site-header .sh-bar{padding:0 22px;} } @media (max-width:640px){ #site-header .sh-bar{height:64px;width:100%;max-width:none;padding:0 14px;} #site-header .sh-panel .sh-inner{max-width:100%;padding:6px 14px 14px;} #site-header .sh-logo-img{height:28px;} #site-header .sh-pill[href="./auth.html"]{display:none;} #site-header .sh-cta{height:38px;padding:0 15px;} } /* ============================================================ RTL (Hebrew): the header follows the page direction via direction:inherit on .sh-nav. The flex bar auto-mirrors (brand → right, action buttons → left; centered links stay centered). Only the few explicitly LTR-positioned pieces below need flipping. English (dir=ltr) is unaffected. ============================================================ */ /* Tools mega-menu is horizontally centered in the bar, so it needs no explicit RTL flip — centering is symmetric, and the flex rows inside auto-mirror via direction:inherit (icon → right). */ /* ============================================================ DARK MODE. The desktop header/nav has always hardcoded its light palette (it doesn't lean on the page theme vars the way the body does), so it needs its own dark treatment. These rules flip the nav bar, every mega-menu, the product / AI / language / account dropdowns and the pills to a matching dark surface, so the chrome tracks the rest of the site. All scoped under html[data-theme="dark"] #site-header → light mode is untouched. The mobile drop-panel already themes via var(--panel/--ink/--line), so only its section label needs a nudge here. ============================================================ */ html[data-theme="dark"] #site-header .sh-nav{background:rgba(15,17,23,.78);border-bottom-color:transparent;} html[data-theme="dark"] #site-header .sh-nav.scrolled{background:rgba(15,17,23,.92);border-bottom-color:#242a36;} html[data-theme="dark"] #site-header.sh-signed-in .sh-nav{background:#0f1218;border-bottom-color:#232833;} html[data-theme="dark"] #site-header.sh-signed-in .sh-nav.scrolled{background:#0f1218;border-bottom-color:#2a3140;} html[data-theme="dark"] #site-header .sh-brand{color:#eef1f6;} html[data-theme="dark"] #site-header .sh-links a, html[data-theme="dark"] #site-header .sh-tlink{color:#dbe0ec;} html[data-theme="dark"] #site-header .sh-links a:hover, html[data-theme="dark"] #site-header .sh-tlink:hover, html[data-theme="dark"] #site-header .sh-drop.open .sh-tlink{color:#a887ff;} /* action pills (language, theme, ☰, account) */ html[data-theme="dark"] #site-header .sh-pill{background:rgba(255,255,255,.06);border-color:#2c3340;color:#e7eaf2; box-shadow:0 8px 24px rgba(0,0,0,.35);} html[data-theme="dark"] #site-header .sh-pill:hover{border-color:#3d4658;background:rgba(255,255,255,.1);} html[data-theme="dark"] #site-header .sh-acctbtn-name{color:#e7eaf2;} /* mega-menus (Tools / Dev / Text) + every anchored dropdown share one dark surface */ html[data-theme="dark"] #site-header .sh-mega, html[data-theme="dark"] #site-header .sh-prodmenu, html[data-theme="dark"] #site-header .sh-aimenu, html[data-theme="dark"] #site-header .sh-langmenu, html[data-theme="dark"] #site-header .sh-acctmenu{background:#171b23;border-color:#272e3b; box-shadow:0 30px 72px rgba(0,0,0,.62);} /* colored icon tiles → a neutral translucent chip so the brand-hued glyph pops */ html[data-theme="dark"] #site-header .sh-col-i, html[data-theme="dark"] #site-header .sh-item .it-ic, html[data-theme="dark"] #site-header .sh-prod-ic{background:rgba(255,255,255,.07);} html[data-theme="dark"] #site-header .sh-item:hover, html[data-theme="dark"] #site-header .sh-prod-item:hover{background:rgba(255,255,255,.05);} html[data-theme="dark"] #site-header .sh-item .it-t, html[data-theme="dark"] #site-header .sh-prod-t{color:#e7eaf2;} html[data-theme="dark"] #site-header .sh-item .it-d, html[data-theme="dark"] #site-header .sh-prod-d, html[data-theme="dark"] #site-header .sh-col-h, html[data-theme="dark"] #site-header .sh-panel-h{color:#8b93a4;} html[data-theme="dark"] #site-header .sh-item:hover .it-t, html[data-theme="dark"] #site-header .sh-prod-item:hover .sh-prod-t{color:#a887ff;} /* mega-menu promo foot + AI "see all" bar */ html[data-theme="dark"] #site-header .sh-mega-foot{background:linear-gradient(100deg,#1b1830,#161f2e); border-top-color:#272e3b;} html[data-theme="dark"] #site-header .sh-foot-t{color:#aab3c6;} html[data-theme="dark"] #site-header .sh-foot-cta, html[data-theme="dark"] #site-header .sh-aimenu-all{color:#a887ff;} html[data-theme="dark"] #site-header .sh-aimenu-all{background:linear-gradient(100deg,#1b1830,#161f2e);} /* language picker options */ html[data-theme="dark"] #site-header .sh-langopt{color:#e7eaf2;} html[data-theme="dark"] #site-header .sh-langopt:hover{background:rgba(255,255,255,.06);color:#a887ff;} html[data-theme="dark"] #site-header .sh-langopt.active{color:#a887ff;} /* account dropdown internals */ html[data-theme="dark"] #site-header .sh-acct-name{color:#f0f2f7;} html[data-theme="dark"] #site-header .sh-acct-mail{color:#8b93a4;} html[data-theme="dark"] #site-header .sh-acct-plan{background:#251d3a;color:#b79bff;} html[data-theme="dark"] #site-header .sh-acct-sep{background:#272e3b;} html[data-theme="dark"] #site-header .sh-acct-item{color:#e7eaf2;} html[data-theme="dark"] #site-header .sh-acct-item:hover{background:rgba(255,255,255,.05);color:#a887ff;} html[data-theme="dark"] #site-header .sh-acct-item svg{color:#8b93a4;} html[data-theme="dark"] #site-header .sh-acct-item:hover svg{color:#a887ff;} html[data-theme="dark"] #site-header .sh-acct-admin, html[data-theme="dark"] #site-header .sh-acct-admin svg{color:#a887ff;} html[data-theme="dark"] #site-header .sh-acct-out, html[data-theme="dark"] #site-header .sh-acct-out svg{color:#ff6b6b;} html[data-theme="dark"] #site-header .sh-acct-out:hover{background:rgba(255,107,107,.12);color:#ff6b6b;} html[data-theme="dark"] #site-header .sh-acct-langbox{border-color:#2a303c;background:rgba(255,255,255,.03);} html[data-theme="dark"] #site-header .sh-acct-langhead{color:#e7eaf2;} html[data-theme="dark"] #site-header .sh-acct-langhead svg, html[data-theme="dark"] #site-header .sh-acct-langhead .sh-chev{color:#8b93a4;} html[data-theme="dark"] #site-header .sh-acct-langhead b{color:#a887ff;} html[data-theme="dark"] #site-header .sh-acct-langopt{color:#aab3c6;} html[data-theme="dark"] #site-header .sh-acct-langopt:hover, html[data-theme="dark"] #site-header .sh-acct-langopt.active{background:rgba(255,255,255,.06);color:#a887ff;}