/* INNO Site — the bilingual blog. Loaded after pages.css; same tokens, same roles. Hebrew pages set dir="rtl" on , and everything below that needs mirroring keys off [dir=rtl] rather than a separate stylesheet, so the two languages can never drift apart. */ /* ================= blog index and topic hubs ================= */ .blog-hero{background:#fff;padding:150px 0 56px} .blog-hero .wrap{max-width:1000px} .blog-hero .pg-lead{margin-top:20px} .topic-nav{background:#fff;padding:0 0 40px} .topic-nav .wrap{max-width:1000px;display:flex;flex-wrap:wrap;gap:10px;align-items:center} .topic-nav a{font:500 14px/1 var(--font);color:#3A4166;text-decoration:none;padding:11px 16px;border-radius:999px;border:1px solid rgba(1,9,46,.12);transition:.2s;white-space:nowrap} .topic-nav a:hover{border-color:var(--blue);color:var(--blue)} .topic-nav a[aria-current]{background:var(--ink);border-color:var(--ink);color:#fff} .posts{background:var(--bg-gray);padding:64px 0 100px} .posts .wrap{max-width:1000px} .post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px} .post-card{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(1,9,46,.08);border-radius:var(--r);overflow:hidden;text-decoration:none;color:inherit;transition:transform .3s,box-shadow .3s} .post-card:hover{transform:translateY(-3px);box-shadow:0 24px 60px rgba(1,9,46,.08)} .post-card .shot{aspect-ratio:16/9;background:linear-gradient(135deg,#0A1F6B,#0232FF 55%,#00A0FF);position:relative;overflow:hidden} .post-card .shot img{width:100%;height:100%;object-fit:cover;display:block} .post-card .shot .mark{position:absolute;right:16px;bottom:14px;width:38px;height:auto;opacity:.9} .post-card .body{padding:24px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1} .post-card .kicker{font:500 11px/1 var(--font-n);letter-spacing:.1em;text-transform:uppercase;color:var(--velocity)} .post-card h2,.post-card h3{font-family:var(--font-h);font-weight:700;text-transform:uppercase;letter-spacing:0;line-height:.98;font-size:22px;color:var(--ink);margin:0} .post-card p{margin:0;font-size:15px;line-height:1.55;color:#3A4166} .post-card .meta{margin-top:auto;padding-top:6px;font:500 12px/1 var(--font-n);letter-spacing:.06em;color:var(--gray);text-transform:uppercase} .posts-empty{background:#fff;border:1px solid rgba(1,9,46,.08);border-radius:var(--r);padding:44px;text-align:center;color:#3A4166} .blog-pager{display:flex;gap:10px;justify-content:center;margin-top:36px} .blog-pager a,.blog-pager span{font:500 14px/1 var(--font);padding:11px 16px;border-radius:999px;border:1px solid rgba(1,9,46,.12);color:#3A4166;text-decoration:none} .blog-pager .current{background:var(--ink);border-color:var(--ink);color:#fff} @media(max-width:720px){.blog-hero{padding:110px 0 36px}.posts{padding:40px 0 70px}.post-grid{grid-template-columns:1fr}} /* The landing stylesheet styles `header .wrap` as the floating nav bar (flex, border, blur). Any section of ours that happens to be a
would inherit it, so our wraps are reset. */ .art-hero .wrap,.blog-hero .wrap,.topic-nav .wrap,.posts .wrap,.art-body .wrap,.art-figure .wrap,.art-author .wrap,.next-reads .wrap{ display:block;border:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0} .topic-nav .wrap{display:flex} /* ================= a single article ================= */ .art-hero{background:#fff;padding:140px 0 0} .art-hero .wrap{max-width:760px} .art-hero .meta-chips{margin-bottom:22px} .art-h1{font-family:var(--font-h);font-weight:700;text-transform:uppercase;letter-spacing:0;line-height:.92;font-size:clamp(36px,4.6vw,62px);color:var(--ink);margin:0 0 22px} .art-standfirst{font-family:var(--font);font-weight:500;font-size:clamp(19px,1.7vw,23px);line-height:1.5;color:#3A4166;margin:0} .art-byline{display:flex;align-items:center;gap:14px;margin:34px 0 0;padding-top:26px;border-top:1px solid rgba(1,9,46,.09)} .art-byline img{width:46px;height:46px;border-radius:50%;object-fit:cover;background:var(--bg-gray)} .art-byline .who{display:flex;flex-direction:column;gap:3px;min-width:0} .art-byline .n{font:600 15px/1.2 var(--font);color:var(--ink)} .art-byline .r{font:400 13px/1.3 var(--font);color:var(--gray)} .art-byline .when{margin-inline-start:auto;font:500 12px/1.3 var(--font-n);letter-spacing:.06em;text-transform:uppercase;color:var(--gray);text-align:end;white-space:nowrap} .art-figure{background:#fff;padding:44px 0 0} .art-figure .wrap{max-width:1000px} .art-figure img{width:100%;height:auto;border-radius:var(--r);display:block} .art-body{background:#fff;padding:48px 0 90px} .art-body .wrap{max-width:760px} .art-content{font-size:18px;line-height:1.7;color:#2A3568} .art-content > *:first-child{margin-top:0} .art-content h2{font-family:var(--font-h);font-weight:700;text-transform:uppercase;letter-spacing:0;line-height:.98;font-size:clamp(26px,2.8vw,34px);color:var(--ink);margin:52px 0 16px} .art-content h3{font:600 21px/1.3 var(--font);color:var(--ink);margin:36px 0 10px} .art-content p{margin:0 0 20px} .art-content b,.art-content strong{color:var(--ink);font-weight:600} .art-content a{color:var(--blue);text-decoration:underline;text-underline-offset:3px} .art-content ul,.art-content ol{margin:0 0 24px;padding:0;list-style:none} .art-content li{position:relative;padding-inline-start:28px;margin:0 0 11px} .art-content ul li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:11px;height:11px;border-radius:50%;background:linear-gradient(135deg,#0232FF,#00A0FF)} .art-content ol{counter-reset:n} .art-content ol li::before{content:counter(n);counter-increment:n;position:absolute;inset-inline-start:0;top:.1em;font:700 14px/1.6 var(--font-n);color:var(--blue)} .art-content blockquote{margin:30px 0;padding:22px 26px;border-inline-start:3px solid var(--velocity);background:var(--bg-gray);border-radius:0 var(--r) var(--r) 0;font-size:19px;line-height:1.55;color:var(--ink)} [dir=rtl] .art-content blockquote{border-radius:var(--r) 0 0 var(--r)} .art-content img{max-width:100%;height:auto;border-radius:var(--r);margin:26px 0} .art-content table{width:100%;border-collapse:collapse;margin:26px 0;font-size:16px} .art-content th,.art-content td{padding:12px 14px;border-bottom:1px solid rgba(1,9,46,.1);text-align:start} .art-content th{font:600 13px/1.2 var(--font-n);letter-spacing:.06em;text-transform:uppercase;color:var(--gray)} .art-foot{max-width:760px;margin:56px auto 0;padding-top:30px;border-top:1px solid rgba(1,9,46,.09);display:flex;flex-wrap:wrap;gap:18px 26px;align-items:center} .art-foot .tags{display:flex;flex-wrap:wrap;gap:8px;margin:0} .art-foot .tags a{font:500 12px/1 var(--font-n);letter-spacing:.08em;text-transform:uppercase;color:#3A4166;text-decoration:none;padding:9px 13px;border-radius:999px;border:1px solid rgba(1,9,46,.12)} .art-foot .tags a:hover{border-color:var(--blue);color:var(--blue)} .art-foot .share{margin-inline-start:auto;display:flex;gap:10px;align-items:center} .art-foot .share span{font:500 12px/1 var(--font-n);letter-spacing:.08em;text-transform:uppercase;color:var(--gray)} .art-foot .share a{width:36px;height:36px;border-radius:50%;border:1px solid rgba(1,9,46,.14);display:grid;place-items:center;transition:.2s} .art-foot .share a:hover{border-color:var(--blue);background:rgba(2,50,255,.05)} .art-foot .share svg{width:16px;height:16px;fill:var(--ink)} @media(max-width:720px){.art-hero{padding:106px 0 0}.art-body{padding:34px 0 64px}.art-content{font-size:17px}.art-byline .when{margin-inline-start:0;flex:0 0 100%;text-align:start}} /* ================= author card + next reads ================= */ .art-author{background:var(--bg-gray);padding:70px 0} .art-author .wrap{max-width:760px} .art-author .card{display:flex;gap:22px;align-items:flex-start;background:#fff;border:1px solid rgba(1,9,46,.08);border-radius:var(--r);padding:28px} .art-author img{width:74px;height:74px;border-radius:50%;flex:none;object-fit:cover;background:var(--bg-gray)} .art-author .n{font-family:var(--font-h);font-weight:700;text-transform:uppercase;font-size:22px;line-height:1;color:var(--ink);margin:0 0 6px} .art-author .r{font:500 14px/1.3 var(--font);color:var(--velocity);margin:0 0 12px} .art-author p{margin:0;font-size:15.5px;line-height:1.6;color:#3A4166} .art-author .li{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font:600 14px/1 var(--font);color:var(--blue);text-decoration:none} .next-reads{background:var(--bg-gray);padding:0 0 90px} .next-reads .wrap{max-width:1000px} .next-reads h2{font-family:var(--font-h);font-weight:700;text-transform:uppercase;letter-spacing:0;font-size:clamp(24px,2.6vw,32px);color:var(--ink);margin:0 0 26px} @media(max-width:720px){.art-author{padding:44px 0}.art-author .card{flex-direction:column;gap:16px;padding:22px}.next-reads{padding-bottom:64px}} /* ================= language switch ================= */ .lang-switch{display:inline-flex;align-items:center;gap:8px;font:600 13px/1 var(--font);color:var(--blue);text-decoration:none;padding:10px 14px;border-radius:999px;border:1px solid rgba(2,50,255,.22);background:rgba(2,50,255,.04);transition:.2s} .lang-switch:hover{background:rgba(2,50,255,.09)} .lang-switch svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8} .art-hero .lang-switch{margin-bottom:20px} .blog-hero .lang-switch{margin-bottom:22px} /* ================= Hebrew ================= Liebling (Fontef, Tel Aviv) carries the headings and the running text; Cousine is the only true Hebrew monospace, so it does for Hebrew labels what JetBrains Mono does for English ones. Latin digits stay in JetBrains Mono in both languages — they are a brand signature, not a language. */ [dir=rtl] body,[dir=rtl] .art-content,[dir=rtl] .post-card p{text-align:right} /* ---- the whole mechanism, in four lines ---- The three Latin faces carry no Hebrew at all, while Liebling carries a full ASCII set. That asymmetry does the work: put the Latin face FIRST and Liebling LAST, and the browser falls through per character on its own. Hebrew letters find nothing in owners-narrow and drop to Liebling; English letters are drawn by owners-narrow before Liebling is ever asked. So every English word inside a Hebrew sentence keeps its English face with no markup at all — which is the requirement, and the reason nothing below restates a selector list. Reversing the order silently breaks it: Liebling would swallow the English. */ [dir=rtl]{ --font-h:'owners-narrow','liebling','inno-he-gap',"Heebo",system-ui,sans-serif; --font:'Archivo','liebling','inno-he-gap',"Heebo",system-ui,sans-serif; --font-n:'JetBrains Mono','Cousine','inno-he-gap',ui-monospace,monospace; } /* Liebling has no italic in the kit, so Chrome would slant it mechanically */ [dir=rtl]{font-synthesis-style:none} /* The label stack is the one pairing that does not match on its own: JetBrains Mono's cap-height is .730 and Cousine's is .659, an 11% gap, and it shows in the data chips as English reading a size larger than the Hebrew beside it. Normalising both to Liebling's own cap-height closes it — measured, Chrome applies the adjustment per face in the stack, pulling JetBrains Mono down 5.5% and lifting Cousine 4.8%. Archivo needs nothing: its x-height is .526 against Liebling's .527. */ [dir=rtl] .pg-eyebrow,[dir=rtl] .eyebrow,[dir=rtl] .post-card .kicker,[dir=rtl] .j-kicker, [dir=rtl] .meta-chips span,[dir=rtl] .glance dt,[dir=rtl] .chip,[dir=rtl] .cs-l, [dir=rtl] .stat .sl,[dir=rtl] .budget-lb,[dir=rtl] .art-byline .when,[dir=rtl] .j-meta, [dir=rtl] .post-card .meta{font-size-adjust:cap-height 0.69} /* the two glyphs Liebling is missing: sheqel and gershayim */ @font-face{font-family:'inno-he-gap'; src:local("Arial Hebrew"),local("Arial"),local("Segoe UI"),local("Noto Sans Hebrew"); unicode-range:U+05F4,U+20AA} /* the patch above is only useful once it is IN the stacks, which is done where they are declared. Liebling has no sheqel and no gershayim, and the Hebrew copy uses both. */ /* Weight, letter-spacing, line-height and transform are NOT redeclared here. They are part of the design, not of the language, and the English page is the reference: an earlier version of this file forced 900 and a looser leading on every Hebrew heading, which made the two versions disagree wherever they share a line. The only exception is the blog's own long-form prose, which has no English counterpart on the page to match. */ [dir=rtl] .art-content p,[dir=rtl] .art-content li{line-height:1.75} /* ---- bidi ---- A trailing period after an all-English heading is a neutral at the end of an RTL paragraph, so it takes the paragraph direction and is drawn at the far left: "DEMAND BOTH." rendered ".DEMAND BOTH". `isolate` does not fix it and `direction:ltr` would break Hebrew headings. `plaintext` resolves each line by its own first strong character, which fixes every English heading and is a no-op on Hebrew ones. text-align must be physical, because `start` is resolved per paragraph under plaintext and would jump sides. */ /* plaintext is what stops a trailing period jumping to the head of an English heading. It carries NO alignment of its own here: whatever the English page centres stays centred, and only the elements the English page aligns to the reading edge are flipped below. */ [dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3,[dir=rtl] h4, [dir=rtl] .eyebrow,[dir=rtl] .pg-eyebrow,[dir=rtl] .post-card .kicker,[dir=rtl] .j-kicker, [dir=rtl] .chip,[dir=rtl] .stat,[dir=rtl] .cs-l,[dir=rtl] .cs-v,[dir=rtl] .bo-v, [dir=rtl] .meta-chips span,[dir=rtl] .glance dt,[dir=rtl] .glance dd{unicode-bidi:plaintext} /* the hero's own lines: a Hebrew sentence that ends on a Latin token, and a line that mixes both around a colon. Each resolves by its own first strong character. */ [dir=rtl] .t-hero,[dir=rtl] .hero-sub,[dir=rtl] .hero h2,[dir=rtl] .hero p, [dir=rtl] .kicker-line,[dir=rtl] .hero .sc-lead{unicode-bidi:plaintext;text-align:right} /* headings wrap each line in its own span, and an inline box resolves against the block's paragraph level rather than its own — so plaintext has to reach the spans too, or the trailing period of every English line still jumps to the head of that line */ [dir=rtl] h1 > span,[dir=rtl] h2 > span,[dir=rtl] h3 > span, [dir=rtl] .t-section > span,[dir=rtl] .grow-together > span{unicode-bidi:plaintext} /* a pure Latin token: the leading plus of a dial code is a neutral and would swap sides */ [dir=rtl] .cc-code,[dir=rtl] .cc,[dir=rtl] .phone .cc-code{direction:ltr;unicode-bidi:isolate} /* body copy stays ordinary RTL: a Latin island inside it is already laid out correctly, and plaintext here would reverse a Hebrew sentence that happens to open with an English word */ [dir=rtl] p,[dir=rtl] .fill-p,[dir=rtl] .p-body,[dir=rtl] .art-content p,[dir=rtl] .job-content p{ direction:rtl;unicode-bidi:normal;text-align:right} /* numerals keep the brand face. No direction:ltr here — these boxes can hold Hebrew too */ [dir=rtl] .stat .sv,[dir=rtl] .cs-v,[dir=rtl] .chip .v,[dir=rtl] .nums .v{ font-family:var(--font-n);unicode-bidi:plaintext;text-align:inherit} /* the Powered tiles centre their numeral in English; forcing right split the number from the label directly under it */ [dir=rtl] .stat .sv{text-align:center} [dir=rtl] .art-byline .when{unicode-bidi:plaintext;text-align:right} [dir=rtl] .topic-nav .wrap,[dir=rtl] .art-foot{direction:rtl} /* Latin that must not mirror: the wordmark lockup and the English footer line. Without this, bidi moves the trailing period to the head of the string (".INNO"). */ [dir=rtl] footer .sig{direction:ltr;justify-content:flex-end} [dir=rtl] .grow-together,[dir=rtl] .f-brand .sig span{direction:ltr;unicode-bidi:isolate} [dir=rtl] .post-card .meta{direction:rtl;unicode-bidi:isolate} /* ============================================================== RTL parity — measured against the English page, section by section. Everything here is a direction flip. Nothing here changes the design. ============================================================== */ /* ---- alignment: .axis and the section headings pin themselves with a physical `left`, which is not direction-aware, so six headings stayed flush left while the copy underneath them ran right ---- */ [dir=rtl] .axis,[dir=rtl] .axis h2,[dir=rtl] .axis .t-section{text-align:right} [dir=rtl] .scaled h2,[dir=rtl] .scaled h2.axis{text-align:right} [dir=rtl] .team-copy h2{text-align:right} [dir=rtl] .faq h2{text-align:right} /* the flip card read as two documents: title left, its own paragraph right */ [dir=rtl] .dept-back,[dir=rtl] .dept-back h4,[dir=rtl] .dept-back p{text-align:right} /* ---- the engine cards turn the other way ---- rotateY(180deg) and rotateY(-180deg) land on the same face, so the still looked right and only the motion was wrong: the card swung away from the reading edge. */ [dir=rtl] .dept:hover .dept-inner, [dir=rtl] .dept.flipped .dept-inner{transform:rotateY(-180deg)} @keyframes peek-rtl{0%,78%,100%{transform:rotateY(0)}86%{transform:rotateY(16deg)}92%{transform:rotateY(-4deg)}} [dir=rtl] .dept-grid.armed .dept-inner, [dir=rtl] body.no-scrub .dept-inner{animation-name:peek-rtl} /* ---- every arrow and chevron ---- */ [dir=rtl] .dept-front .dept-toggle svg{transform:scaleX(-1)} [dir=rtl] .dept.flipped .dept-toggle{transform:rotate(-90deg)} [dir=rtl] .link:hover::after{transform:translateX(-4px)} @media(min-width:721px){ [dir=rtl] .cw-modal-arrow{transform:translate3d(64px,0,0)} [dir=rtl] .cw-modal-arrow.next{transform:translate3d(-64px,0,0)} } /* the reticle's arrow is artwork, not a glyph: mirroring it with scaleX would skew, because the ::after already carries rotate(-45deg) to cancel the ring's own +45 */ [dir=rtl] .ic-ring.is-hot::after{background-image:url("data:image/svg+xml;utf8,")} [dir=rtl] .ic-ring.on-dark.is-hot::after{background-image:url("data:image/svg+xml;utf8,")} /* ---- physical offsets that pinned decoration and controls to the wrong corner ---- */ [dir=rtl] .h-nav{margin-left:auto;margin-right:8px} [dir=rtl] .cw-rail{padding-left:0;padding-right:var(--gutter); scroll-padding-left:auto;scroll-padding-right:var(--gutter)} [dir=rtl] .cw-badge{left:auto;right:14px} [dir=rtl] .cw-play{right:auto;left:14px} [dir=rtl] .testimonials::after{left:auto;right:-150px;transform:scaleX(-1)} [dir=rtl] .t-more{right:auto;left:22px} [dir=rtl] .j-shot .mark{right:auto;left:16px} [dir=rtl] .phone .cc{border-right:0;border-left:1.5px solid rgba(1,9,46,.1);padding:0 14px 0 10px} [dir=rtl] .phone input{padding-left:18px;padding-right:14px} [dir=rtl] #dock-cta{padding:8px 22px 8px 8px} @media(max-width:640px){[dir=rtl] #dock-cta{padding:7px 16px 7px 7px}} /* ---- decoration: the artwork itself has to mirror, not only its anchor ---- Each of these is a background-image pinned with a physical position, so it stayed on the English side. scaleX about the element's own centre maps it to the exact mirror and flips the glyph too, the same treatment the hero's outlined mark already has. */ [dir=rtl] .philosophy::before{transform:scaleX(-1)} [dir=rtl] .cta::before{transform:scaleX(-1)} /* The collage used to be a live composition of eight photographs over a blob, a scribble and a tile grid, and it took a container flip plus a counter-flip on every face to mirror the decoration without mirroring a person. It is one baked image now, so it must NOT be flipped at all — a photograph of people is like a wordmark: it has a correct side. */ /* ---- the brand ramp reads from the start of the line, so its angle mirrors too ---- 360 minus the English angle. Without this a gradient headline opened on cyan at the reading start and landed on deep blue, the reverse of the English page. */ [dir=rtl]{ --grad-light:linear-gradient(260deg,#0232FF,#0091FF 60%,#00CFFF); --grad-dark:linear-gradient(260deg,#00F6FF,#00A0FF 65%,#4D8DFF); --grad-moment:linear-gradient(260deg,#19FAFF 0%,#00B8FF 45%,#B08CFF 100%); } /* ---- the glass sweeps travel with the reading direction ---- */ @keyframes sheenSweepRTL{0%{transform:translate3d(170%,0,0)}22%{transform:translate3d(-330%,0,0)}100%{transform:translate3d(-330%,0,0)}} @keyframes shineRTL{0%{transform:translate3d(140%,0,0)}26%{transform:translate3d(-330%,0,0)}100%{transform:translate3d(-330%,0,0)}} [dir=rtl] .mark-sheen::after{animation-name:sheenSweepRTL} [dir=rtl] .stats-panel::after{animation-name:shineRTL} [dir=rtl] .chip::after{animation-name:sheenSweepRTL} /* ============================================================== RTL parity, round two: the literal gradient angles, and two sheens the first pass missed. The three :root tokens already turned, but forty-seven painted surfaces carry their angle inline and none of them moved — so the brand ramp still opened on cyan at the reading start and landed on deep blue, the reverse of English. Each angle below is 360 minus the English one. Deliberately absent: .tt and .tg. They sit inside .team-collage, which already carries scaleX(-1), so turning them here too would put them back. ============================================================== */ [dir=rtl] .grad-full{background-image:linear-gradient(260deg,#0232FF,#00A0FF 60%,#00F6FF)} [dir=rtl] .btn-grad{background:linear-gradient(260deg,#0232FF 0%,#00A0FF 100%)} [dir=rtl] .stat .sv, [dir=rtl] .stat-live .sv{background-image:linear-gradient(260deg,#0232FF,#00A0FF 55%,#00F6FF)} [dir=rtl] .fill .hl .w::after{background-image:linear-gradient(260deg,#00F6FF,#00A0FF)} [dir=rtl] .j-shot{background:linear-gradient(225deg,#0A1F6B,#0232FF 55%,#00A0FF)} [dir=rtl] .case-shot{background:linear-gradient(195deg,#F2F5FC,#E4EAF7 60%,#D8E1F4)} [dir=rtl] .bopt input:checked+.bo-v{background-image:linear-gradient(240deg,#0232FF,#00A0FF)} [dir=rtl] .t-mono{background:linear-gradient(225deg,#0232FF,#00A0FF 60%,#00F6FF)} /* the glare inside each sweep still leaned the English way, so the bright edge trailed instead of leading */ [dir=rtl] .mark-sheen::after{ background:linear-gradient(255deg,transparent 0%,rgba(255,255,255,.5) 46%,rgba(255,255,255,.82) 52%,transparent 100%)} [dir=rtl] .chip::after{ background:linear-gradient(255deg,transparent 0%,rgba(255,255,255,.9) 50%,transparent 100%)} [dir=rtl] .stats-panel::after{ background:linear-gradient(255deg,transparent 0%,rgba(255,255,255,.13) 46%,rgba(0,246,255,.10) 54%,transparent 100%)} [dir=rtl] .cw-tab::after{ background:linear-gradient(255deg,transparent 30%,rgba(255,255,255,.42) 50%,transparent 70%); transform:translate3d(120%,0,0)} /* the creative tabs never got an RTL sweep at all */ @keyframes cwSheenRTL{ 0%{transform:translate3d(120%,0,0);opacity:0} 3%{opacity:1} 17%{transform:translate3d(-120%,0,0);opacity:1} 18%,100%{transform:translate3d(-120%,0,0);opacity:0}} [dir=rtl] .creative.in-view .cw-tabs:not(.used) .cw-tab[aria-selected="false"]::after{ animation-name:cwSheenRTL} /* latent: this shrink-wraps today, so its physical left never shows — until the string wraps to two lines */ [dir=rtl] .cw-title{text-align:right} /* ══════════════════════════════════════════════════════════════════════════ RTL parity, round three. Every rule below was injected on the live pages over CDP and re-measured against the English numbers before it was written down. Destination file is named above each section — they are not all the same sheet. ══════════════════════════════════════════════════════════════════════════ */ /* ─────────────────────────────────────────────────────────────────────────── inno.css — immediately AFTER line 1421, `[dir=rtl] .hero-outline{…left:-6%…}` That rule carries no breakpoint, so at (0,2,0) it outranks the phone rule at inno.css:870 and the desktop -6% survives where the mirror needs -34%. The outlined mark then starts at the screen edge and runs across the headline. This lives in inno.css, NOT blog.css, so it also reaches the job hero — which never loads blog.css. Measured 390x844: HE start-edge gap 23.4 -> 132.6 = EN 132.6. At 1440 the existing rule is already exact (748.8 <-> -86.4), so this is mobile-only. ─────────────────────────────────────────────────────────────────────────── */ @media(max-width:720px){ [dir=rtl] .hero-outline{left:-34%} } /* ─────────────────────────────────────────────────────────────────────────── blog.css — append to the round-two block at the end of the file. Section A: bidi. Same family as blog.css:161-164; these were left out. ─────────────────────────────────────────────────────────────────────────── */ /* A Latin caption that opens on a digit has that digit thrown to the far end: "20 years celebration" rendered "years celebration 20" — on the tile AND in the modal caption. .cw-disc survives today only because it opens on letters rather than a digit, so it goes in the same rule. The counter is worse than a position fault: "1 / 5" rendered "5 / 1", telling the reader they are on item 5 of 1. plaintext resolves a run with no strong character to LTR, and still does the right thing if either string is ever translated — which is why it is used here rather than direction:ltr. */ [dir=rtl] .cw-line, [dir=rtl] .cw-client, [dir=rtl] .cw-disc, [dir=rtl] .cw-count{unicode-bidi:plaintext} /* Three fields that hold one language at a time and can still be English on a Hebrew page: the journal excerpt, the topic description and the author bio. Forced RTL draws their trailing period at the far left of the line, detached from the sentence it terminates — measured 722px away on the topic hub. plaintext is a no-op on Hebrew copy, so this self-heals the moment F23/F26 land. NO text-align here: blog.css's own comment is right that `start` under plaintext jumps sides per paragraph, and these paragraphs each sit under a right-flush Hebrew heading. */ [dir=rtl] .j-card p, [dir=rtl] .blog-hero .pg-lead, [dir=rtl] .art-author .card p{unicode-bidi:plaintext} /* Same tagline as .philosophy h2 > span, which already has plaintext. Judgement call — see F35. Drop this line if you want the period Hebrew. */ [dir=rtl] .kicker b{unicode-bidi:plaintext} /* EDIT IN PLACE, do not append: blog.css:176 currently reads [dir=rtl] .cc-code,[dir=rtl] .cc,[dir=rtl] .phone .cc-code{direction:ltr;unicode-bidi:isolate} Delete the bare `.cc`. Only the dial code needs isolating; forcing the whole pill LTR keeps its flex row physical, so the chevron lands at the outer corner instead of against the divider. Measured chevron-from-reading-edge: EN 59.6, HE 14 -> 59.6 after. `+972` still renders correctly (screenshot). */ [dir=rtl] .cc-code,[dir=rtl] .phone .cc-code{direction:ltr;unicode-bidi:isolate} /* If you would rather not touch that line, this override is equivalent: */ /* [dir=rtl] .cc{direction:rtl;unicode-bidi:normal} */ /* ── blog.css, Section B: physical offsets that pinned controls to the wrong corner. Put these beside the existing [dir=rtl] .t-more / .j-shot .mark rules at blog.css:241-242 — they are the same class of miss. ── */ /* Both modals kept their close button top-right while every other control in them mirrors. Measured against .cw-modal-panel: from-panel-left 316.8 -> 0 at 390, 1119 -> 0 at 1440; English unchanged at both. */ [dir=rtl] .cw-modal-x{right:auto;left:0} [dir=rtl] .modal-x{right:auto;left:16px} /* .cw-open is an all:unset button that then forces text-align:left. It is the tile's whole clickable surface, so the client name and caption stayed bottom- left while .cw-badge correctly moved to the top-right — the card read as two documents. NOTE: shared with the social rail, which is open at rest, so this moves the caption on all 27 creative tiles. That is correct, but it is a visible change to signed-off work. */ [dir=rtl] .cw-open{text-align:right} /* The same panel as .j-shot in a different card type, and .j-shot already has both rules. No article carries a featured image, so this gradient is the fallback on every card on the blog — the largest painted surface there. */ [dir=rtl] .post-card .shot{background:linear-gradient(225deg,#0A1F6B,#0232FF 55%,#00A0FF)} [dir=rtl] .post-card .shot .mark{right:auto;left:16px} /* 360 minus 135, the same arithmetic as every other entry in the round-two block. The bullet's inset-inline-start already mirrors; only the ramp did not. */ [dir=rtl] .art-content ul li::before{background:linear-gradient(225deg,#0232FF,#00A0FF)} /* Two directional glyphs in the case cards. Requires the class tags added in inc/render.php (see JS/PHP change 5). 'leaf' and 'dollar' must NOT be mirrored — a currency glyph and an organic shape carry no reading direction. */ [dir=rtl] .cs-card .ic-bars, [dir=rtl] .cs-card .ic-trend{transform:scaleX(-1)} /* ~5px per end on a 243px box. Below the visual threshold; safe either way. */ [dir=rtl] .ds-tags{ -webkit-mask-image:linear-gradient(270deg,transparent,#000 12%,#000 86%,transparent); mask-image:linear-gradient(270deg,transparent,#000 12%,#000 86%,transparent)} /* EDIT IN PLACE: add these two selectors to the existing cap-height list at blog.css:133-136. They are the only 12px mono labels on the blog left out of it, while .art-byline .when 400px above them on the same page is in it. */ /* …,[dir=rtl] .art-foot .tags a,[dir=rtl] .art-foot .share span, [dir=rtl] .post-card .meta{font-size-adjust:cap-height 0.69} */ /* ── blog.css, Section C: the phone-only engine card and films rail. This whole tier paints below 721px, so the desktop RTL pass never saw it. ── */ @media(max-width:720px){ /* The plus and the 46px of row padding that clears it are both physical, so under RTL the plus crowds the department icon at the reading start and the far end of the card is dead space. Measured inside the 326px card, HE before -> HE fixed (= EN): shape 78 -> 46, plus 45 -> 318, h3 150 -> 118. */ [dir=rtl] .dept-row{padding:12px 14px 12px 46px} [dir=rtl] body.eng-tight .dept-row{padding:8px 12px 8px 42px} [dir=rtl] .dept-plus{right:auto;left:13px} /* text-align:left is set twice, on .dept-front and again on its h3, so every title sat flush against the far side of its own box with ~100px of empty space between it and its icon. .dept-desc inherits the same fault. */ [dir=rtl] .dept-front{text-align:right} /* The department name stays English, but "keep it as in English" means keep it NEXT TO THE BLADE, not literally on the left. Measured on a 326px card: in English the blade occupies 14..74 and the name box 86..280 with the text left-aligned, so the words start 12px from the blade. In Hebrew the blade correctly mirrors to 252..312 and the box to 46..240 — so left-aligning the text there starts it at 46, the full width of the card away from the blade, which is a layout the English page does not have. Aligning to the box's blade side restores the same 12px. */ [dir=rtl] .dept-front h3{text-align:right} /* The four gradient photographs behind an open card carry a real directional ramp and still open on the English side. A raster background cannot be mirrored without a transform, so the photo moves to a ::before that carries scaleX(-1). .dept already has position:relative;overflow:hidden here and .dept-inner already has position:relative;z-index:1, so the layer sits behind the content with no other change. Measured on card 2 (signal), left band vs right band, green channel: EN +64.8 HE before +65.9 (same direction) HE fixed -54.3 (mirrored) The nth-child selectors are repeated on the `none` rule on purpose: at (0,4,0) it beats .dept:nth-child(N).open at (0,3,0) regardless of load order. */ [dir=rtl] .dept:nth-child(1).open, [dir=rtl] .dept:nth-child(2).open, [dir=rtl] .dept:nth-child(3).open, [dir=rtl] .dept:nth-child(4).open{background-image:none} [dir=rtl] .dept.open::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; transform:scaleX(-1);background-size:cover;background-position:center;border-radius:inherit} [dir=rtl] .dept:nth-child(1).open::before{background-image:linear-gradient(rgba(1,9,46,.42),rgba(1,9,46,.42)),url('../img/gradients/gradient-deep-blue.webp')} [dir=rtl] .dept:nth-child(2).open::before{background-image:linear-gradient(rgba(1,9,46,.42),rgba(1,9,46,.42)),url('../img/gradients/gradient-signal.webp')} [dir=rtl] .dept:nth-child(3).open::before{background-image:linear-gradient(rgba(1,9,46,.42),rgba(1,9,46,.42)),url('../img/gradients/gradient-velocity.webp')} [dir=rtl] .dept:nth-child(4).open::before{background-image:linear-gradient(rgba(1,9,46,.42),rgba(1,9,46,.42)),url('../img/gradients/gradient-intelligence.webp')} } /* ─────────────────────────────────────────────────────────────────────────── blog.css — the ONE rule here that is not RTL-scoped. ⚠️ THIS CHANGES THE LIVE ENGLISH PAGE. It is currently broken identically in both languages: .when takes flex:0 0 100% on a nowrap line, .who is squeezed to zero and the date is drawn 42px outside the viewport. Measured on BOTH article pages at 390: scrollWidth 432 against clientWidth 390, and window.scrollTo({left:200}) really reaches scrollX 42 — the page scrolls sideways. With wrap: .who w=0 -> 129.9, .when x=106..432 -> 32..358, byline height 133.6 -> 102.6, scrollWidth back to 390. flex-wrap alone is enough; flex:none on the avatar changes nothing further. ─────────────────────────────────────────────────────────────────────────── */ @media(max-width:720px){ .art-byline{flex-wrap:wrap} } /* ─────────────────────────────────────────────────────────────────────────── pages.css — careers, job and thank-you. Four rules, three of which are no-ops in English. These survive the blog.css enqueue (F2): blog.css has no rule for any of them, re-measured with it injected. ─────────────────────────────────────────────────────────────────────────── */ /* EDIT IN PLACE at pages.css:48-49. Logical equivalents; byte-identical in English. Under RTL today the text loses its indent entirely and the dot is stranded 556px away at the far left — 27 items on one page. Measured 1440 RTL: li box 345.9..914, ink starting at 914, ::before left 0px. */ .job-content li{position:relative;padding-inline-start:28px;padding-left:unset; margin:0 0 10px;font-size:16.5px;line-height:1.6;color:#3A4166} .job-content li::before{content:"";position:absolute;inset-inline-start:0;left:auto; top:.55em;width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,#0232FF,#00A0FF)} [dir=rtl] .job-content li::before{background:linear-gradient(225deg,#0232FF,#00A0FF)} /* EDIT IN PLACE at pages.css:59. One word, identical rendering in English. The physical left cascades into .cv-field and .cv-text and pins the upload label and hint to the wrong edge of a right-aligned block. */ .apply .lead-form{max-width:none;text-align:start} /* The outlined mark is pinned to the physical right in both directions, so in Hebrew it stops being a bleed off the far edge and lands behind the headline, the lead and the WhatsApp button. Measured identical in LTR and RTL at both viewports: left 835.188px / right -115.188px, transform unchanged. The transform must be restated per breakpoint: the desktop base carries translateY(-50%) and the mobile base carries none. */ [dir=rtl] .thanks .thanks-art{right:auto;left:-8%;transform:translateY(-50%) scaleX(-1)} @media(max-width:720px){ [dir=rtl] .thanks .thanks-art{right:auto;left:-40%;transform:scaleX(-1)} } /* Ship this WITH the F2 enqueue, not after it. [dir=rtl] p at (0,1,1) beats the centring .apply-intro merely INHERITS from .cta at (0,1,0), so the paragraph goes flush right between a centred H2 and a centred button the moment blog.css loads. Reproduced by injection: text-align center -> right, while .apply h2 stays centred at x=372..1068. .apply .consent is safe at (0,2,0); .jobs-empty p has the same shape and only renders with no open roles. */ [dir=rtl] .apply .apply-intro, [dir=rtl] .jobs-empty p{text-align:center} /* ─────────────────────────────────────────────────────────────────────────── inno.css — tap targets. ⚠️ ALL THREE CHANGE THE ENGLISH PAGE. I walked every a/button/input/select/[role=button] on both home pages at 390 and found 62 controls under 44px on each — the SAME 62. Nothing here is language-specific, so it is fixed once for both. ─────────────────────────────────────────────────────────────────────────── */ @media(pointer:coarse){ /* Measured with touch emulation on: button 20x14 -> 20x32, .dk-win 14 -> 32, and the .dock-dots pill 40 -> 46 tall. That 6px on the sticky dock is the visible cost — your call. A true 44x44 is not reachable: 22 dots at 44px wide carry the bar past a 360px screen. The dot itself is a centred ::before, so it does not move. */ .dock-dots{padding:6px 18px} .dock-dots .dk-win{height:32px} .dock-dots .dk-track button{height:32px} } @media(max-width:720px){ /* 46x32 today; the comment beside it claims a 46px target, which is true of the width only. The budget pills directly beneath are already 50px tall. */ .cur-switch button{height:44px} /* 34x34 -> 44x44. The 5px offset change keeps the visual centre exactly where it is (281.1 + 17 = 276.1 + 22 = 298.1) while the hit area grows outward. The [dir=rtl] line is required: blog.css:241 sets left:22px, which would otherwise survive at 22 while the English side moved to 17. */ .t-more{width:44px;height:44px;right:17px;bottom:17px} [dir=rtl] .t-more{right:auto;left:17px} } /* ============================================================== Ezra's review, 2026-09-24. Each of these was measured before it was written; three of them are wrong in English too. ============================================================== */ /* 1. The FAQ heading was fixed last round but not the questions themselves. They are