/* ══════════════════════════════════════════════════════════════════════════ Legal documents modal · privacy notice · accessibility toolkit. The accessibility rules at the bottom of this file are deliberately the LAST styles loaded on the page, because several of them have to beat the site's own declarations (font sizes, colours, motion). Keep this file last in the order. ══════════════════════════════════════════════════════════════════════════ */ /* ═════════════════════════ Footer document links ═════════════════════════ */ .foot-legal{ display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap; max-width:var(--wrap);margin-inline:auto; padding:6px 24px 20px; } .foot-sep{color:var(--t3);opacity:.5;font-size:11px} .foot-doc{ display:inline-flex;align-items:center;gap:7px; background:none;border:none;cursor:pointer; font-family:var(--fb);font-size:13px;color:var(--t2); padding:6px 10px;border-radius:8px; transition:color .2s,background .2s,transform .2s var(--ease); } .foot-doc:hover{color:var(--cyan);background:rgba(var(--cyan-rgb),.07);transform:translateY(-1px)} /* ═════════════════════════ Document modal ═════════════════════════ */ .doc-ov{ position:fixed;inset:0;z-index:5000; display:flex;align-items:center;justify-content:center;padding:20px; background:rgba(1,7,14,.78); backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px); animation:docFade .28s var(--ease); } .doc-ov[hidden]{display:none} @keyframes docFade{from{opacity:0}to{opacity:1}} .doc{ position:relative;display:flex;flex-direction:column; width:min(760px,100%);max-height:min(86svh,860px); background:linear-gradient(168deg,rgba(9,30,52,.99),rgba(4,15,27,.99)); border:1px solid var(--bd2);border-radius:var(--r); box-shadow:0 40px 90px rgba(0,0,0,.65),0 0 80px rgba(var(--cyan-rgb),.10); overflow:hidden; animation:docRise .4s var(--ease); } @keyframes docRise{from{opacity:0;transform:translateY(26px) scale(.975)}to{opacity:1;transform:none}} /* Cyan hairline along the top edge, matching the console's panel language. */ .doc::before{ content:'';position:absolute;inset-block-start:0;inset-inline:0;height:2px; background:linear-gradient(90deg,transparent,var(--cyan),var(--green),transparent); } .doc-hdr{ display:flex;align-items:center;gap:13px;flex-shrink:0; padding:20px 24px 17px;border-bottom:1px solid var(--bd1); background:rgba(var(--cyan-rgb),.04); } .doc-ic{ display:grid;place-items:center;flex-shrink:0;width:40px;height:40px;font-size:19px; background:rgba(var(--cyan-rgb),.1);border:1px solid var(--bd2);border-radius:11px; } .doc-title{ flex:1;min-width:0; font-family:var(--fd);font-size:1.06rem;font-weight:800;line-height:1.3;color:var(--t1); } .doc-x{ flex-shrink:0;width:34px;height:34px;display:grid;place-items:center; background:rgba(255,255,255,.04);border:1px solid var(--bd1);border-radius:9px; color:var(--t2);font-size:14px;cursor:pointer; transition:all .2s; } .doc-x:hover{background:rgba(var(--red-rgb),.14);border-color:rgba(var(--red-rgb),.4);color:var(--red)} .doc-scroll{ flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain; padding:24px 26px 26px; font-size:14.6px;line-height:1.8;color:var(--t2); } .doc-scroll:focus-visible{outline:2px solid var(--cyan);outline-offset:-3px} .doc-scroll p{margin-bottom:15px} .doc-scroll p:last-child{margin-bottom:0} .doc-scroll b{color:var(--t1)} /* Content headings. Sizes and weights come from the variables in site.css, which the Typography screen overrides through the generated stylesheet. */ .doc-scroll :is(h1,h2,h3,h4,h5,h6){ font-family:var(--fd);color:var(--cyan); margin:26px 0 10px;padding-inline-start:12px; border-inline-start:2px solid var(--cyan);line-height:1.4; } .doc-scroll h1{font-size:var(--h1-size);font-weight:var(--h1-weight)} .doc-scroll h2{font-size:var(--h2-size);font-weight:var(--h2-weight)} .doc-scroll h3{font-size:var(--h3-size);font-weight:var(--h3-weight)} .doc-scroll h4{font-size:var(--h4-size);font-weight:var(--h4-weight)} .doc-scroll h5{font-size:var(--h5-size);font-weight:var(--h5-weight)} .doc-scroll h6{font-size:var(--h6-size);font-weight:var(--h6-weight)} .doc-scroll :is(h1,h2,h3,h4,h5,h6):first-child{margin-top:0} .doc-scroll ul{list-style:none;margin:0 0 15px;padding:0} .doc-scroll li{position:relative;padding-inline-start:20px;margin-bottom:8px} .doc-scroll li::before{ content:'';position:absolute;inset-inline-start:4px;inset-block-start:.72em; width:5px;height:5px;border-radius:50%;background:var(--cyan);opacity:.65; } .doc-scroll a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px} .doc-scroll a:hover{color:var(--green)} .doc-meta-end{ margin-top:22px;padding-top:15px;border-top:1px solid var(--bd1); font-size:12.5px;color:var(--t3); } .doc-foot{ display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap; flex-shrink:0;padding:15px 24px; border-top:1px solid var(--bd1);background:rgba(0,0,0,.24); } .doc-upd{font-size:12px;color:var(--t3)} .doc-ok{min-width:120px} @media (max-width:600px){ .doc-ov{padding:0;align-items:flex-end} .doc{max-height:92svh;border-radius:var(--r) var(--r) 0 0;border-bottom:none} .doc-hdr{padding:16px 18px 14px} .doc-scroll{padding:18px 18px 20px;font-size:14px} .doc-foot{padding:13px 18px} .doc-ok{flex:1} } /* ═════════════════════════ Privacy notice ═════════════════════════ A slim bar centred along the bottom edge. It is informational, not a consent gate, so it deliberately does NOT dim the page, lock scrolling or take focus - the reader can ignore it and carry on. */ .consent-ov{ position:fixed;z-index:4600; inset-inline:0;bottom:0; display:flex;justify-content:center; padding:16px; /* Click-through: only the bar itself is interactive, so the wrapper never swallows clicks on the page behind it. */ pointer-events:none; animation:cnIn .5s var(--ease) 1s both; } .consent-ov[hidden]{display:none} @keyframes cnIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} .consent-ov.is-out{animation:cnOut .3s var(--ease) forwards} @keyframes cnOut{to{opacity:0;transform:translateY(12px)}} .consent{ position:relative; pointer-events:auto; display:flex;align-items:center;gap:15px; width:min(680px,100%); padding:13px 16px; /* Presence comes from the border, the glow and the top hairline rather than from opacity - the fill stays see-through and the heavy blur keeps the text legible over whatever scrolls underneath. */ background:rgba(6,20,35,.66); border:1px solid var(--bd2);border-radius:13px; /* Layered rather than a single blur. Three neutral shadows at increasing distance give real depth (a lone big blur reads as fog), two coloured blooms pick up the green-to-cyan of the hairline above and throw it onto the page behind, and an inset rim light catches the top edge so the glass has a lip instead of just ending. */ box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 18px rgba(0,0,0,.34), 0 26px 60px rgba(0,0,0,.46), -26px 2px 54px rgba(var(--green-rgb),.12), 26px 2px 54px rgba(var(--cyan-rgb),.17), inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(0,0,0,.25); backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%); overflow:hidden; } .consent::before{ content:'';position:absolute;inset-block-start:0;inset-inline:0;height:1.5px; background:linear-gradient(90deg,transparent,var(--green),var(--cyan),transparent); } .consent-ic{ flex-shrink:0;display:grid;place-items:center;width:33px;height:33px;font-size:15px; background:rgba(var(--green-rgb),.12); border:1px solid rgba(var(--green-rgb),.32);border-radius:10px; box-shadow:0 0 16px rgba(var(--green-rgb),.14); } .consent-copy{flex:1;min-width:0} .consent-t{display:block;font-size:12.5px;font-weight:700;color:var(--t1);margin-bottom:3px} .consent-d{font-size:12px;color:var(--t2);line-height:1.55} .consent-act{display:flex;align-items:center;gap:13px;flex-shrink:0} .consent-ok{ background:linear-gradient(135deg,rgba(var(--cyan-rgb),.95),rgba(var(--blue-rgb),.95)); border:none;border-radius:9px; color:#00121f;font-family:var(--fb);font-size:12.5px;font-weight:700; padding:9px 20px;cursor:pointer;white-space:nowrap; box-shadow:0 5px 16px rgba(var(--cyan-rgb),.3),inset 0 1px 0 rgba(255,255,255,.3); transition:transform .22s var(--ease),box-shadow .22s var(--ease); } .consent-ok:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(var(--cyan-rgb),.45),inset 0 1px 0 rgba(255,255,255,.4)} .consent-ok:active{transform:translateY(0)} .consent-more{ background:none;border:none;cursor:pointer;white-space:nowrap; font-family:var(--fb);font-size:12px;color:var(--t2); text-decoration:underline;text-underline-offset:3px;padding:2px; transition:color .2s; } .consent-more:hover{color:var(--cyan)} /* Below this width a centred bar would sit under the floating controls, so it lifts above them and stacks its parts. */ @media (max-width:760px){ .consent-ov{padding:12px;bottom:60px} .consent{flex-wrap:wrap;gap:10px;padding:12px} .consent-copy{flex:1 1 100%;order:2} .consent-ic{order:1} .consent-act{order:3;margin-inline-start:auto} } @media (prefers-reduced-motion:reduce){ .consent-ov{animation-delay:0s} } /* ═════════════════════════ Accessibility toolkit ═════════════════════════ Pinned to a PHYSICAL corner (bottom-left) rather than a logical one. With inset-inline-end it landed left in Hebrew but right in English, where it collided with the back-to-top button. Fixed corners keep the two apart in both directions. */ .a11y-fab{ position:fixed;z-index:4200; bottom:18px;left:18px; width:50px;height:50px;display:grid;place-items:center; background:linear-gradient(135deg,var(--cyan),var(--blue)); color:#00121f;border:none;border-radius:50%;cursor:pointer; box-shadow:0 8px 24px rgba(var(--cyan-rgb),.35),0 0 0 1px rgba(255,255,255,.14) inset; transition:transform .28s var(--ease),box-shadow .28s var(--ease); } .a11y-fab:hover{transform:scale(1.08);box-shadow:0 12px 32px rgba(var(--cyan-rgb),.5)} .a11y-fab:active{transform:scale(.97)} .a11y{ position:fixed;z-index:4300; bottom:80px;left:18px; width:min(310px,calc(100vw - 36px)); background:linear-gradient(168deg,rgba(9,30,52,.985),rgba(4,15,27,.985)); border:1px solid var(--bd2);border-radius:var(--r); box-shadow:0 26px 60px rgba(0,0,0,.62),0 0 60px rgba(var(--cyan-rgb),.10); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); padding:16px; animation:a11yIn .3s var(--ease); } .a11y[hidden]{display:none} @keyframes a11yIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}} .a11y-hdr{display:flex;align-items:center;gap:10px;margin-bottom:15px} .a11y-t{ flex:1;font-family:var(--fd);font-size:11.5px;font-weight:700; letter-spacing:1.8px;text-transform:uppercase;color:var(--cyan); } .a11y-x{ width:28px;height:28px;display:grid;place-items:center; background:rgba(255,255,255,.04);border:1px solid var(--bd1);border-radius:7px; color:var(--t2);font-size:12px;cursor:pointer;transition:all .2s; } .a11y-x:hover{background:rgba(var(--red-rgb),.14);border-color:rgba(var(--red-rgb),.4);color:var(--red)} .a11y-font{ display:flex;align-items:center;gap:9px;margin-bottom:12px; padding:9px;background:rgba(var(--cyan-rgb),.05); border:1px solid var(--bd1);border-radius:10px; } .a11y-fb{ width:38px;height:34px;flex-shrink:0; background:rgba(var(--cyan-rgb),.1);border:1px solid var(--bd2);border-radius:8px; color:var(--cyan);font-family:var(--fd);font-size:13px;font-weight:700;cursor:pointer; transition:all .2s; } .a11y-fb:hover{background:rgba(var(--cyan-rgb),.22);border-color:var(--bd3)} .a11y-fv{flex:1;text-align:center;font-size:12px;color:var(--t2)} .a11y-fv b{color:var(--cyan);font-family:var(--fm)} .a11y-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:12px} .a11y-opt{ display:flex;align-items:center;gap:7px;text-align:start; padding:10px 9px; background:rgba(255,255,255,.032);border:1px solid var(--bd1);border-radius:9px; color:var(--t2);font-family:var(--fb);font-size:11.6px;line-height:1.3;cursor:pointer; transition:all .22s var(--ease); } .a11y-opt:hover{background:rgba(var(--cyan-rgb),.09);border-color:var(--bd2);color:var(--t1)} .a11y-opt[aria-pressed="true"]{ background:rgba(var(--cyan-rgb),.16);border-color:var(--cyan);color:var(--cyan); box-shadow:0 0 14px rgba(var(--cyan-rgb),.2); } .a11y-opt span{font-size:14px;flex-shrink:0} .a11y-reset,.a11y-stmt{ width:100%;padding:10px;margin-bottom:7px; background:rgba(255,255,255,.032);border:1px solid var(--bd1);border-radius:9px; color:var(--t2);font-family:var(--fb);font-size:12.2px;cursor:pointer;transition:all .22s; } .a11y-reset:hover{background:rgba(var(--orange-rgb),.12);border-color:rgba(var(--orange-rgb),.4);color:var(--orange)} .a11y-stmt{margin-bottom:0} .a11y-stmt:hover{background:rgba(var(--cyan-rgb),.1);border-color:var(--bd2);color:var(--cyan)} /* Keep the notice clear of the accessibility button on narrow screens. */ @media (max-width:560px){ .a11y-fab{bottom:12px;left:12px;width:46px;height:46px} .a11y{bottom:64px;left:12px} } /* ══════════════════════════════════════════════════════════════════════════ User accessibility overrides. Each is driven by an attribute on set by js/legal.js, so a returning visitor's choices apply before first paint. !important is used on purpose: these must beat every component style on the page. ══════════════════════════════════════════════════════════════════════════ */ /* Text size. Set as a root font-size multiplier, which every rem/em-based size follows. The layout is fluid, so nothing breaks up to 160%. */ html[data-a11y-font]{font-size:calc(16px * var(--a11y-scale,1))} /* High contrast */ html[data-a11y-contrast="1"]{ --t1:#ffffff;--t2:#dcefff;--t3:#a8c9de; --bd1:rgba(var(--cyan-rgb),.42);--bd2:rgba(var(--cyan-rgb),.6);--bd3:rgba(var(--cyan-rgb),.85); --bg0:#000509;--bg1:#020c16; } html[data-a11y-contrast="1"] body{background:#000509} html[data-a11y-contrast="1"] .card, html[data-a11y-contrast="1"] .cap, html[data-a11y-contrast="1"] .panel, html[data-a11y-contrast="1"] .thr, html[data-a11y-contrast="1"] .layer, html[data-a11y-contrast="1"] .fq, html[data-a11y-contrast="1"] .how, html[data-a11y-contrast="1"] .mini{background:#01111f;border-color:rgba(var(--cyan-rgb),.5)} /* Greyscale / invert. Applied to the root element rather than body so fixed overlays are covered too. The panel itself is exempted below so its own controls stay legible while the filter is on. */ html[data-a11y-grayscale="1"]{filter:grayscale(1)} html[data-a11y-invert="1"]{filter:invert(1) hue-rotate(180deg)} html[data-a11y-grayscale="1"][data-a11y-invert="1"]{filter:grayscale(1) invert(1) hue-rotate(180deg)} /* Media would otherwise be double-inverted into a negative. */ html[data-a11y-invert="1"] img, html[data-a11y-invert="1"] video, html[data-a11y-invert="1"] canvas, html[data-a11y-invert="1"] .flag{filter:invert(1) hue-rotate(180deg)} /* A greyscale flag is unreadable as an identifier, so it keeps its colour. */ html[data-a11y-grayscale="1"] .flag{filter:grayscale(0)} /* Link highlighting */ html[data-a11y-links="1"] a, html[data-a11y-links="1"] .foot-doc{ text-decoration:underline!important;text-underline-offset:3px!important; outline:1px dotted currentColor;outline-offset:2px; } html[data-a11y-links="1"] .nav-links a, html[data-a11y-links="1"] .foot-col a{color:var(--cyan)!important} /* Readable font: drop the display and mono faces everywhere. */ html[data-a11y-readable="1"], html[data-a11y-readable="1"] *{ font-family:Arial,'Heebo',sans-serif!important; letter-spacing:normal!important; } /* Line spacing */ html[data-a11y-spacing="1"] p, html[data-a11y-spacing="1"] li, html[data-a11y-spacing="1"] .lead, html[data-a11y-spacing="1"] .card-d, html[data-a11y-spacing="1"] .cap-d, html[data-a11y-spacing="1"] .doc-scroll{ line-height:2.1!important;letter-spacing:.4px!important;word-spacing:2px!important; } /* Stop animations. Mirrors what prefers-reduced-motion does, but on demand. */ html[data-a11y-nomotion="1"] *, html[data-a11y-nomotion="1"] *::before, html[data-a11y-nomotion="1"] *::after{ animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important; } html[data-a11y-nomotion="1"] .hero-canvas{display:none} /* Reveal states are animation-driven, so they must be forced visible. */ html[data-a11y-nomotion="1"] .reveal, html[data-a11y-nomotion="1"] .reveal-line, html[data-a11y-nomotion="1"] .hero-sub, html[data-a11y-nomotion="1"] .hero-cta, html[data-a11y-nomotion="1"] .hero-note, html[data-a11y-nomotion="1"] .hero-term{opacity:1!important;transform:none!important} /* Large cursor, drawn as an SVG data URI so it needs no asset request. */ html[data-a11y-bigcursor="1"], html[data-a11y-bigcursor="1"] *{ cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M8 4 L8 36 L16 28 L22 42 L28 39 L22 26 L34 26 Z' fill='%23ffffff' stroke='%23000000' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 4 4, auto!important; } html[data-a11y-bigcursor="1"] a, html[data-a11y-bigcursor="1"] button, html[data-a11y-bigcursor="1"] summary, html[data-a11y-bigcursor="1"] .ptr{ cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M18 4 C15 4 14 6 14 9 L14 24 L11 21 C9 19 6 20 5 23 C4 25 5 27 7 30 L14 40 C16 43 18 44 22 44 L32 44 C37 44 40 41 40 36 L40 22 C40 19 38 18 36 18 C34 18 33 19 33 21 C33 19 32 17 30 17 C28 17 27 18 27 20 C27 18 26 16 24 16 C22 16 22 18 22 20 L22 9 C22 6 21 4 18 4 Z' fill='%23ffffff' stroke='%23000000' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 12 4, pointer!important; } /* The toolkit must never be dimmed by its own filters or hidden by a scroll lock, so it is always positioned above and exempt where it matters. */ html[data-a11y-invert="1"] .a11y-fab svg{filter:invert(1) hue-rotate(180deg)} /* Applied by JS while a modal is open, so the page behind cannot scroll. */ html.no-scroll,html.no-scroll body{overflow:hidden} @media print{ .a11y-fab,.a11y,.consent-ov,.doc-ov,.foot-legal,.totop{display:none!important} }