/* ArtLine3D shared site styles: design tokens, the site header and footer, buttons, dialogs, toasts and the building blocks of the website pages. Every selector is prefixed with .site- (or scoped under #site-header / #site-footer) so the tools' own CSS (doodle.html, paint.css) can never clash with it. Website pages use ; the tools keep their own base styles and only get the header. */ :root { --bg:#f3f1fb; --panel:#ffffff; --panel-2:#f6f4fd; --ink:#1b1730; --muted:#625e7c; --line:#e6e2f4; --accent:#6d4aff; --accent-2:#ff5fa2; --accent-3:#22d3ee; --accent-ink:#ffffff; --danger:#d61f57; --warn:#b45309; --ok:#087540; --shadow:0 1px 2px rgba(27,23,48,.05), 0 14px 40px rgba(109,74,255,.10); --radius:22px; --stage:#eeebf8; --paper:#ffffff; --glass:rgba(255,255,255,.72); --site-header-h:64px; --font-head:"Outfit", "Rubik", "Nunito", system-ui, sans-serif; --font-body:"Nunito", "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Hebrew", sans-serif; /* website-only tokens */ --site-btn:linear-gradient(135deg, #6d4aff 0%, #8f47ea 55%, #bb3f9c 100%); /* white text stays >= 4.5:1 on every stop */ --site-grad-text:linear-gradient(100deg, #6d4aff 0%, #b23fc9 45%, #e0407f 100%); --site-soft:color-mix(in srgb, var(--accent) 9%, var(--panel)); --site-shadow-lg:0 2px 4px rgba(27,23,48,.04), 0 30px 70px rgba(80,50,200,.16); --site-ring:color-mix(in srgb, var(--accent) 75%, transparent); --site-ok-bg:color-mix(in srgb, var(--ok) 12%, var(--panel)); --site-warn-bg:color-mix(in srgb, #f59e0b 16%, var(--panel)); --site-err-bg:color-mix(in srgb, var(--danger) 11%, var(--panel)); --site-frame:#2a2536; --site-plate:#fbfaf6; --site-vh:1vh; /* 1vh, corrected under the 4K zoom at the end of this file (Chrome does not scale vh with zoom) */ } [data-theme="dark"] { --bg:#0d0b16; --panel:#161327; --panel-2:#1d1930; --ink:#efecff; --muted:#aba7c9; --line:#2b2647; --accent:#8b6cff; --accent-2:#ff6fb0; --accent-3:#3ee0f5; --accent-ink:#0d0b16; --danger:#ff5d8f; --warn:#fbbf24; --ok:#4ade80; --shadow:0 1px 2px rgba(0,0,0,.5), 0 18px 48px rgba(0,0,0,.45); --stage:#0a0812; --paper:#f7f6f2; --glass:rgba(22,19,39,.72); --site-grad-text:linear-gradient(100deg, #a58cff 0%, #d77cf0 45%, #ff7fb4 100%); --site-shadow-lg:0 2px 4px rgba(0,0,0,.4), 0 30px 70px rgba(0,0,0,.5); --site-frame:#3a3448; } /* ---------- base for pages that use site.css alone (the tools keep their own base) */ body.site-body { margin:0; font:16px/1.6 var(--font-body); color:var(--ink); background:var(--bg); transition:background .4s, color .4s; overflow-x:hidden; min-height:calc(var(--site-vh) * 100); display:flex; flex-direction:column; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } body.site-body > main { flex:1 0 auto; } body.site-body * { box-sizing:border-box; } body.site-body [hidden] { display:none !important; } :where(body.site-body) :where(h1, h2, h3, h4) { font-family:var(--font-head); letter-spacing:.1px; line-height:1.15; margin:0 0 .5em; } :where(body.site-body) p { margin:0 0 1em; } /* zero specificity: a class margin always wins */ :where(body.site-body) img { max-width:100%; height:auto; } /* zero specificity: any page rule wins */ body.site-body ::selection { background:color-mix(in srgb, var(--accent) 28%, transparent); } body.site-body::before, body.site-body::after { content:""; position:fixed; z-index:-1; pointer-events:none; border-radius:50%; filter:blur(70px); opacity:.5; } body.site-body::before { width:60vw; height:60vw; left:-18vw; top:-22vw; background:radial-gradient(circle, color-mix(in srgb, var(--accent) 45%, transparent), transparent 65%); animation:siteFloatA 26s ease-in-out infinite alternate; } body.site-body::after { width:55vw; height:55vw; right:-16vw; bottom:-24vw; background:radial-gradient(circle, color-mix(in srgb, var(--accent-2) 40%, transparent), transparent 65%); animation:siteFloatB 32s ease-in-out infinite alternate; } [data-theme="dark"] body.site-body::before, [data-theme="dark"] body.site-body::after { opacity:.32; } @keyframes siteFloatA { from { transform:translate(0,0) scale(1) } to { transform:translate(8vw, 6vw) scale(1.15) } } @keyframes siteFloatB { from { transform:translate(0,0) scale(1.1) } to { transform:translate(-7vw, -8vw) scale(.95) } } @keyframes siteIn { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:none } } @keyframes siteFade { from { opacity:0 } to { opacity:1 } } @keyframes siteBreathe { 0%,100% { transform:rotate(-4deg) } 50% { transform:rotate(4deg) scale(1.04) } } @keyframes siteShimmer { to { background-position:-200% 0 } } @keyframes siteSpin { to { transform:rotate(360deg) } } @keyframes sitePop { 0% { transform:scale(.6); opacity:0 } 70% { transform:scale(1.06); opacity:1 } 100% { transform:none } } @keyframes siteOutUp { to { opacity:0; transform:translateY(-8px) } } /* pages cross-fade into each other (same-origin navigation, browsers that support it); the header stays put */ @view-transition { navigation:auto; } #site-header { view-transition-name:site-header; } ::view-transition-old(root) { animation:siteVtOut .22s ease both; } ::view-transition-new(root) { animation:siteVtIn .32s cubic-bezier(.2,.7,.2,1) both; } @keyframes siteVtOut { to { opacity:0; transform:translateY(-6px) } } @keyframes siteVtIn { from { opacity:0; transform:translateY(10px) } } @media (prefers-reduced-motion: reduce) { @view-transition { navigation:none; } } /* base resets have zero specificity (:where) so every component class (.site-btn, .site-chip, ...) wins over them */ :where(.site-body) a { color:var(--accent); text-underline-offset:2px; } :where(.site-body) a:hover { text-decoration-thickness:2px; } :where(.site-body, .site-modal) :where(button, input, select, textarea) { font:inherit; color:inherit; } .site-body :focus-visible, #site-header :focus-visible, .site-modal :focus-visible { outline:3px solid var(--site-ring); outline-offset:2px; border-radius:8px; } .si { width:1.15em; height:1.15em; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vertical-align:-.2em; } .si-logo { width:100%; height:100%; display:block; } [dir="rtl"] .si-flip, [dir="rtl"] .site-body .si.flip { transform:scaleX(-1); } /* ---------- header */ #site-header { position:sticky; top:0; z-index:40; height:var(--site-header-h); display:flex; align-items:center; gap:12px; padding:0 22px; background:var(--glass); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid var(--line); font-family:var(--font-body); color:var(--ink); } #site-header * { box-sizing:border-box; } #site-header .si { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; } #site-header .sh-skip { position:absolute; inset-inline-start:12px; top:-60px; z-index:50; padding:10px 14px; border-radius:10px; background:var(--site-btn); color:#fff; font:800 14px var(--font-head); text-decoration:none; } #site-header .sh-skip:focus { top:10px; } #site-header .sh-brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); flex-shrink:0; border-radius:12px; } #site-header .sh-logo, #site-footer .sh-logo { width:36px; height:36px; border-radius:11px; display:grid; place-items:center; color:#fff; padding:5px; background:linear-gradient(135deg, #6d4aff, #a74ff0 62%, #ff5fa2); box-shadow:0 8px 22px color-mix(in srgb, var(--accent) 40%, transparent); flex:none; } #site-header .sh-logo { animation:siteBreathe 5s ease-in-out infinite; } #site-header .sh-name { font:800 19px var(--font-head); color:var(--ink); white-space:nowrap; letter-spacing:.1px; } #site-header .sh-name b, #site-footer .sf-logo b { background:var(--site-grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; } #site-header nav.sh-nav { display:flex; align-items:center; gap:4px; margin-inline-start:10px; } #site-header nav.sh-nav > a { display:inline-flex; align-items:center; gap:8px; padding:8px 13px; border-radius:999px; color:var(--muted); text-decoration:none; font:700 14.5px var(--font-head); transition:color .2s, background .2s, box-shadow .2s; white-space:nowrap; } #site-header nav.sh-nav > a .si { display:none; } #site-header nav.sh-nav > a:hover { color:var(--ink); background:var(--panel-2); } #site-header nav.sh-nav > a.on { color:#fff; background:#6d4aff; box-shadow:0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent); } #site-header .sh-nav-extra { display:none; } #site-header .sh-spacer { flex:1; } #site-header .sh-slot { display:flex; align-items:center; gap:8px; } /* tools put their own controls here */ #site-header .sh-right { display:flex; align-items:center; gap:8px; transition:opacity .25s; } #site-header.pending .sh-right { visibility:hidden; opacity:0; } #site-header .sh-btn { border:1px solid var(--line); background:var(--panel-2); color:var(--ink); border-radius:12px; height:38px; min-width:38px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center; gap:7px; cursor:pointer; font:700 13.5px var(--font-head); text-decoration:none; transition:transform .15s, border-color .15s, background .2s; white-space:nowrap; } #site-header .sh-btn:hover { border-color:var(--accent); transform:translateY(-1px); } #site-header .sh-btn.primary { background:var(--site-btn); color:#fff; border-color:transparent; box-shadow:0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent); padding:0 14px; } #site-header .sh-btn.primary .si { width:16px; height:16px; } #site-header .sh-lang { font-family:var(--font-body); font-weight:800; min-width:42px; } #site-header #sh-theme { padding:0; width:38px; } #site-header .sh-credits { display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 5px 0 12px; border-radius:999px; border:1px solid var(--line); background:var(--panel-2); font:800 14.5px var(--font-head); cursor:pointer; color:var(--ink); transition:border-color .2s; } #site-header .sh-credits:hover { border-color:var(--accent); } #site-header .sh-credits .gem { width:18px; height:18px; border-radius:6px; background:conic-gradient(from 200deg, var(--accent-2), #ffb03b, var(--accent-3), var(--accent), var(--accent-2)); transform:rotate(45deg) scale(.8); } #site-header .sh-credits .plus { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:#6d4aff; color:#fff; } #site-header .sh-credits .plus .si { width:15px; height:15px; stroke-width:2.6; } #site-header .sh-credits.bump { animation:siteBump .6s ease; } @keyframes siteBump { 30% { transform:scale(1.12) } 60% { transform:scale(.97) } } #site-header .sh-user { position:relative; } #site-header .sh-avatar { width:38px; height:38px; border-radius:50%; border:2px solid var(--line); cursor:pointer; display:grid; place-items:center; overflow:hidden; background:linear-gradient(135deg, #0e9fb8, #6d4aff); color:#fff; font:800 15px var(--font-head); padding:0; } #site-header .sh-avatar img { width:100%; height:100%; object-fit:cover; } #site-header .sh-menu { position:absolute; inset-inline-end:0; top:48px; min-width:250px; background:var(--panel); border:1px solid var(--line); border-radius:16px; box-shadow:var(--site-shadow-lg); padding:8px; display:none; animation:siteIn .18s ease; } #site-header .sh-menu.open { display:block; } #site-header .sh-menu .who { padding:8px 10px 10px; border-bottom:1px solid var(--line); margin-bottom:6px; } #site-header .sh-menu .who b { display:block; font-family:var(--font-head); } #site-header .sh-menu .who small { color:var(--muted); word-break:break-all; } #site-header .sh-menu a, #site-header .sh-menu button { display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border-radius:10px; border:0; background:none; color:var(--ink); text-decoration:none; cursor:pointer; font:600 14.5px var(--font-body); text-align:start; } #site-header .sh-menu a .si, #site-header .sh-menu button .si { color:var(--muted); } #site-header .sh-menu a:hover, #site-header .sh-menu button:hover { background:var(--panel-2); } #site-header .sh-menu .tag { margin-inline-start:auto; font-size:11.5px; font-weight:800; color:var(--accent); border:1px solid var(--accent); border-radius:999px; padding:1px 8px; } #site-header .sh-burger { display:none; padding:0; width:40px; } #site-header .sh-menu .sh-show-sm { display:none; } .site-banner { position:sticky; top:var(--site-header-h); z-index:39; padding:10px 22px; text-align:center; font:700 14px var(--font-body); background:color-mix(in srgb, var(--danger) 14%, var(--panel)); color:var(--ink); border-bottom:1px solid color-mix(in srgb, var(--danger) 40%, transparent); } /* the compact header forms follow the width the page really has (site.js sets html.sh-md <= 900 px and html.sh-sm <= 420 px from the window width divided by the zoom): the accessibility menu's text sizes zoom the page, and media queries would still see the full window */ html.sh-md #site-header { padding:0 12px; gap:8px; } html.sh-md #site-header nav.sh-nav { display:none; position:absolute; top:var(--site-header-h); inset-inline:0; flex-direction:column; align-items:stretch; gap:2px; padding:10px; background:var(--panel); border-bottom:1px solid var(--line); box-shadow:var(--site-shadow-lg); margin:0; animation:siteIn .18s ease; } html.sh-md #site-header nav.sh-nav.open { display:flex; } html.sh-md #site-header nav.sh-nav.closing { animation:siteOutUp .17s ease forwards; } html.sh-md #site-header nav.sh-nav > a, html.sh-md #site-header .sh-nav-extra > * { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; font:700 16px var(--font-head); } html.sh-md #site-header nav.sh-nav > a .si { display:block; } html.sh-md #site-header .sh-nav-extra { display:flex; flex-direction:column; gap:2px; border-top:1px solid var(--line); margin-top:6px; padding-top:6px; } html.sh-md #site-header .sh-nav-extra > * { color:var(--ink); text-decoration:none; background:none; border:0; cursor:pointer; text-align:start; width:100%; } html.sh-md #site-header .sh-nav-extra > *:hover { background:var(--panel-2); } html.sh-md #site-header .sh-burger { display:inline-flex; } html.sh-md #site-header .sh-hide-sm { display:none; } html.sh-md #site-header .sh-menu .sh-show-sm { display:flex; } html.sh-sm #site-header .sh-name { display:none; } html.sh-sm #site-header .sh-btn.primary span { font-size:13px; } /* ---------- footer */ #site-footer { margin-top:80px; padding:44px 22px 28px; border-top:1px solid var(--line); background:color-mix(in srgb, var(--panel) 70%, transparent); color:var(--muted); font:14.5px/1.6 var(--font-body); } #site-footer * { box-sizing:border-box; } #site-footer .si { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; } #site-footer .sf-in { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1.7fr repeat(4, 1fr); gap:28px; } #site-footer .sf-logo { display:inline-flex; align-items:center; gap:10px; margin-bottom:10px; color:var(--ink); font:800 19px var(--font-head); text-decoration:none; } #site-footer .sf-brand p { margin:0 0 4px; max-width:34ch; } #site-footer .sf-made { font-size:13.5px; opacity:.9; } #site-footer .sf-h { margin:4px 0 10px; color:var(--ink); font:800 14.5px var(--font-head); } #site-footer .sf-col a { display:block; color:var(--muted); text-decoration:none; padding:3px 0; width:fit-content; } #site-footer .sf-col a:hover { color:var(--accent); } #site-footer .sf-bottom { max-width:1200px; margin:30px auto 0; padding-top:18px; border-top:1px solid var(--line); display:flex; gap:12px 22px; flex-wrap:wrap; align-items:center; justify-content:space-between; font-size:13.5px; } #site-footer .sf-pay, #site-footer .sf-lang { display:inline-flex; align-items:center; gap:7px; } #site-footer .sf-lang button { border:0; background:none; padding:2px 4px; cursor:pointer; color:var(--muted); font:700 13.5px var(--font-body); border-radius:6px; } #site-footer .sf-lang button[aria-pressed="true"] { color:var(--ink); text-decoration:underline; text-underline-offset:3px; } #site-footer .sf-lang button:hover { color:var(--accent); } @media (max-width: 900px) { #site-footer .sf-in { grid-template-columns:1fr 1fr; } #site-footer .sf-brand { grid-column:1 / -1; } } html.sh-md #site-footer .sf-in { grid-template-columns:1fr 1fr; } html.sh-md #site-footer .sf-brand { grid-column:1 / -1; } /* ---------- building blocks for the website pages */ .site-wrap { width:100%; max-width:1200px; margin:0 auto; padding:0 22px; } .site-wrap.narrow { max-width:880px; } .site-section { padding:64px 0; } .site-card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px; } .site-eyebrow { display:inline-flex; align-items:center; gap:8px; margin:0 0 12px; font:800 13px/1.2 var(--font-head); letter-spacing:.12em; text-transform:uppercase; color:var(--accent); } [lang="he"] .site-eyebrow { letter-spacing:.02em; } .site-h1 { font:800 clamp(2.15rem, 1.1rem + 3.5vw, 3.9rem)/1.06 var(--font-head); letter-spacing:-.025em; margin:0 0 18px; } .site-h2 { font:800 clamp(1.75rem, 1.2rem + 1.7vw, 2.6rem)/1.12 var(--font-head); letter-spacing:-.02em; margin:0 0 12px; } .site-h3 { font:800 1.3rem/1.25 var(--font-head); margin:0 0 8px; } .site-lead { font-size:clamp(1.05rem, .95rem + .4vw, 1.25rem); color:var(--muted); max-width:62ch; } .site-grad { background:var(--site-grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; } .site-center { text-align:center; } .site-center .site-lead { margin-inline:auto; } .site-page-head { padding:48px 0 8px; } .site-page-head .site-h1 { font-size:clamp(2rem, 1.3rem + 2.2vw, 3rem); margin-bottom:10px; } .site-btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; border:0; border-radius:14px; padding:12px 20px; cursor:pointer; text-decoration:none; font:800 15.5px/1.2 var(--font-head); color:#fff; background:var(--site-btn); background-size:130% 100%; background-position:0 0; box-shadow:0 10px 24px color-mix(in srgb, var(--accent) 30%, transparent); transition:transform .15s, box-shadow .2s, background-position .4s, filter .2s; white-space:nowrap; } .site-btn:hover { transform:translateY(-2px); box-shadow:0 14px 30px color-mix(in srgb, var(--accent) 38%, transparent); background-position:100% 0; text-decoration:none; } .site-btn:active { transform:translateY(0); } .site-btn:disabled, .site-btn[aria-disabled="true"] { opacity:.55; cursor:not-allowed; transform:none; } .site-btn .si { width:1.1em; height:1.1em; } .site-btn.secondary { background:var(--panel); color:var(--ink); border:1px solid var(--line); box-shadow:0 1px 2px rgba(27,23,48,.05); } .site-btn.secondary:hover { border-color:var(--accent); box-shadow:0 8px 20px color-mix(in srgb, var(--accent) 14%, transparent); } .site-btn.ghost { background:none; color:var(--accent); box-shadow:none; padding-inline:10px; } .site-btn.ghost:hover { background:var(--site-soft); transform:none; } .site-btn.danger { background:#c81e50; color:#fff; box-shadow:none; } .site-btn.danger.secondary { background:var(--panel); color:var(--danger); border:1px solid color-mix(in srgb, var(--danger) 45%, var(--line)); } .site-btn.small { padding:8px 13px; font-size:13.5px; border-radius:11px; gap:6px; } .site-btn.big { padding:16px 26px; font-size:17px; border-radius:16px; } .site-btn.block { width:100%; } .site-btn.icon { padding:0; width:38px; height:38px; border-radius:11px; } .site-btn.busy { position:relative; color:transparent !important; pointer-events:none; } .site-btn.busy::after { content:""; position:absolute; width:18px; height:18px; border-radius:50%; border:2.5px solid rgba(255,255,255,.45); border-top-color:#fff; animation:siteSpin .7s linear infinite; } .site-btn.secondary.busy::after { border-color:color-mix(in srgb, var(--ink) 25%, transparent); border-top-color:var(--ink); } .site-input, .site-select, .site-textarea { width:100%; padding:11px 13px; border-radius:12px; border:1px solid var(--line); background:var(--panel); color:var(--ink); outline:none; transition:border-color .2s, box-shadow .2s; } .site-input::placeholder, .site-textarea::placeholder { color:color-mix(in srgb, var(--muted) 80%, transparent); } .site-input:focus, .site-select:focus, .site-textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } .site-input[aria-invalid="true"] { border-color:var(--danger); } .site-textarea { min-height:84px; resize:vertical; } .site-field { display:flex; flex-direction:column; gap:6px; } .site-label { font:700 14px var(--font-body); color:var(--ink); } .site-label small { color:var(--muted); font-weight:600; } .site-hint { font-size:13px; color:var(--muted); } .site-error { font-size:13.5px; color:var(--danger); font-weight:700; } .site-muted { color:var(--muted); } .site-small { font-size:13.5px; } .site-badge { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; font:800 12px/1.5 var(--font-head); background:color-mix(in srgb, var(--accent) 13%, transparent); color:#5230e0; white-space:nowrap; } .site-badge .si { width:13px; height:13px; } .site-badge.ok { background:color-mix(in srgb, var(--ok) 15%, transparent); color:#08693a; } .site-badge.warn { background:color-mix(in srgb, #f59e0b 20%, transparent); color:#8a3c07; } .site-badge.err { background:color-mix(in srgb, var(--danger) 13%, transparent); color:#b3163f; } .site-badge.muted { background:color-mix(in srgb, var(--muted) 14%, transparent); color:var(--muted); } .site-badge.doodle { background:#6d4aff; color:#fff; } .site-badge.paint { background:linear-gradient(120deg, #c2317a, #0b7390); color:#fff; } [data-theme="dark"] .site-badge { color:#a58cff; } /* badge inks: >= 4.5:1 on their own tint in both themes */ [data-theme="dark"] .site-badge.ok { color:var(--ok); } [data-theme="dark"] .site-badge.warn { color:#fcd34d; } [data-theme="dark"] .site-badge.err { color:var(--danger); } [data-theme="dark"] .site-badge.muted { color:var(--muted); } [data-theme="dark"] .site-badge.doodle, [data-theme="dark"] .site-badge.paint { color:#fff; } .site-chips { display:flex; flex-wrap:wrap; gap:8px; } .site-chip { display:inline-flex; align-items:center; gap:7px; padding:8px 15px; border-radius:999px; border:1px solid var(--line); background:var(--panel); color:var(--ink); font:700 14px var(--font-head); cursor:pointer; transition:all .18s; } .site-chip:hover { border-color:var(--accent); } .site-chip[aria-pressed="true"], .site-chip.on { background:#6d4aff; border-color:#6d4aff; color:#fff; box-shadow:0 6px 16px color-mix(in srgb, var(--accent) 30%, transparent); } .site-chip .si { width:16px; height:16px; } .site-grid { display:grid; gap:18px; } .site-empty { text-align:center; padding:56px 20px; color:var(--muted); } .site-empty .site-h3 { color:var(--ink); } .site-empty-art { width:88px; height:88px; margin:0 auto 18px; border-radius:26px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg, #6d4aff, #ff5fa2); box-shadow:0 18px 40px color-mix(in srgb, var(--accent) 30%, transparent); transform:rotate(-6deg); } .site-empty-art .si { width:40px; height:40px; } .site-table-wrap { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; } .site-table { width:100%; border-collapse:collapse; font-size:14.5px; } .site-table th { text-align:start; color:var(--muted); font:700 12.5px var(--font-body); text-transform:uppercase; letter-spacing:.05em; padding:10px 10px; border-bottom:1px solid var(--line); white-space:nowrap; } [lang="he"] .site-table th { letter-spacing:0; } .site-table td { padding:11px 10px; border-bottom:1px solid var(--line); vertical-align:middle; } .site-table tr:last-child td { border-bottom:0; } .site-table .num { text-align:end; font-variant-numeric:tabular-nums; white-space:nowrap; } .site-table .plus { color:var(--ok); font-weight:800; } .site-table .minus { color:var(--ink); font-weight:800; } .site-table tbody tr.click { cursor:pointer; } .site-table tbody tr.click:hover td { background:var(--panel-2); } @media (max-width: 640px) { .site-table.stack thead { display:none; } .site-table.stack, .site-table.stack tbody, .site-table.stack tr, .site-table.stack td { display:block; width:100%; } .site-table.stack tr { padding:10px 0; border-bottom:1px solid var(--line); } .site-table.stack td { border:0; padding:3px 4px; display:flex; justify-content:space-between; gap:12px; text-align:end; } .site-table.stack td::before { content:attr(data-label); color:var(--muted); font-weight:700; font-size:13px; text-align:start; } .site-table.stack td.num { justify-content:space-between; } .site-table.stack td.main { font-weight:800; } .site-table.stack td.main::before { content:none; } } .site-skel { border-radius:12px; background:linear-gradient(90deg, var(--panel-2) 0%, color-mix(in srgb, var(--line) 70%, var(--panel-2)) 50%, var(--panel-2) 100%); background-size:200% 100%; animation:siteShimmer 1.4s linear infinite; } .site-spin { display:inline-block; width:22px; height:22px; border-radius:50%; border:3px solid color-mix(in srgb, var(--accent) 25%, transparent); border-top-color:var(--accent); animation:siteSpin .8s linear infinite; vertical-align:middle; } .site-notice { display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:16px; border:1px solid var(--line); background:var(--site-soft); color:var(--ink); font-size:15px; } .site-notice > .si { width:20px; height:20px; margin-top:2px; color:var(--accent); } .site-notice.ok { background:var(--site-ok-bg); border-color:color-mix(in srgb, var(--ok) 35%, var(--line)); } .site-notice.ok > .si { color:var(--ok); } .site-notice.warn { background:var(--site-warn-bg); border-color:color-mix(in srgb, #f59e0b 40%, var(--line)); } .site-notice.warn > .si { color:var(--warn); } .site-notice.err { background:var(--site-err-bg); border-color:color-mix(in srgb, var(--danger) 35%, var(--line)); } .site-notice.err > .si { color:var(--danger); } .site-notice p { margin:0; } .site-notice .site-btn { margin-inline-start:auto; } .site-tabs { display:flex; gap:6px; flex-wrap:wrap; padding:5px; border-radius:16px; background:var(--panel); border:1px solid var(--line); width:fit-content; max-width:100%; overflow-x:auto; } .site-tabs button { display:inline-flex; align-items:center; gap:8px; border:0; background:none; padding:9px 16px; border-radius:12px; cursor:pointer; color:var(--muted); font:700 14.5px var(--font-head); white-space:nowrap; } .site-tabs button:hover { color:var(--ink); background:var(--panel-2); } .site-tabs button[aria-selected="true"] { color:#fff; background:#6d4aff; box-shadow:0 6px 16px color-mix(in srgb, var(--accent) 28%, transparent); } .site-tabs .si { width:17px; height:17px; } @media (max-width: 480px) { .site-tabs { gap:2px; } .site-tabs button { padding:8px 11px; gap:0; } .site-tabs .si { display:none; } } .site-stats { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:14px; } .site-stat { background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:16px 18px; box-shadow:var(--shadow); } .site-stat .k { display:flex; align-items:center; gap:7px; color:var(--muted); font:700 13px var(--font-body); } .site-stat .k .si { width:16px; height:16px; color:var(--accent); } .site-stat .v { font:800 28px/1.2 var(--font-head); margin-top:6px; font-variant-numeric:tabular-nums; } .site-stat .s { color:var(--muted); font-size:12.5px; margin-top:2px; } /* ---------- FAQ */ .site-faq { display:grid; gap:10px; } .site-faq details { background:var(--panel); border:1px solid var(--line); border-radius:18px; box-shadow:0 1px 2px rgba(27,23,48,.04); transition:border-color .2s, box-shadow .2s; } .site-faq details[open] { border-color:color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow:var(--shadow); } .site-faq summary { list-style:none; cursor:pointer; padding:17px 20px; display:flex; align-items:center; gap:14px; font:700 17px/1.35 var(--font-head); border-radius:18px; } .site-faq summary::-webkit-details-marker { display:none; } .site-faq summary::after { content:"+"; margin-inline-start:auto; flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--site-soft); color:var(--accent); font:800 20px/1 var(--font-head); transition:transform .25s; } .site-faq details[open] summary::after { transform:rotate(45deg); } .site-faq details.closing summary::after { transform:none; } .site-faq details.closing { border-color:var(--line); box-shadow:0 1px 2px rgba(27,23,48,.04); } .site-faq summary:hover::after { background:color-mix(in srgb, var(--accent) 18%, var(--panel)); } .site-faq .a { padding:0 20px 18px; color:var(--muted); } .site-faq .a p:last-child { margin-bottom:0; } /* ---------- dialogs (buy credits, confirmations) */ .site-modal-bg { position:fixed; inset:0; z-index:90; background:rgba(12,10,24,.5); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); display:grid; place-items:center; padding:16px; animation:siteFade .2s ease; } .site-modal-bg.out { opacity:0; transition:opacity .15s; } .site-modal { position:relative; width:min(520px, 100%); max-height:calc(var(--site-vh) * 100 - 32px); overflow:auto; background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:24px; box-shadow:0 30px 80px rgba(0,0,0,.35); padding:26px; font:15px/1.55 var(--font-body); animation:siteIn .22s ease; } .site-modal * { box-sizing:border-box; } .site-modal.wide { width:min(760px, 100%); } .site-modal.small { width:min(440px, 100%); } .site-modal h3 { margin:0 44px 8px 0; font:800 22px/1.25 var(--font-head); } [dir="rtl"] .site-modal h3 { margin:0 0 8px 44px; } .site-modal .sm-close { position:absolute; top:16px; inset-inline-end:16px; border:0; background:var(--panel-2); width:36px; height:36px; border-radius:50%; cursor:pointer; color:var(--ink); display:grid; place-items:center; } .site-modal .sm-close:hover { background:var(--line); } .site-modal .si { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; } .site-modal .sm-msg { color:var(--muted); margin:0 0 18px; } .site-modal .sm-actions { display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; margin-top:8px; } .site-modal .sm-foot { display:flex; align-items:flex-start; gap:8px; margin:18px 0 0; color:var(--muted); font-size:13px; } .site-modal .sm-foot .si { width:15px; height:15px; margin-top:2px; } .site-packs { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:14px; padding-top:10px; } .site-pack { position:relative; border:1.5px solid var(--line); border-radius:20px; padding:22px 16px 16px; background:var(--panel-2); display:flex; flex-direction:column; gap:6px; text-align:center; transition:transform .15s, border-color .2s, box-shadow .2s; } .site-pack:hover { transform:translateY(-3px); border-color:var(--accent); } .site-pack.hot { border-color:var(--accent); background:linear-gradient(180deg, var(--site-soft), var(--panel-2) 60%); box-shadow:0 14px 32px color-mix(in srgb, var(--accent) 22%, transparent); } .site-pack .pk-badge { position:absolute; top:-12px; inset-inline-start:50%; transform:translateX(-50%); background:#6d4aff; color:#fff; font:800 11.5px var(--font-head); padding:4px 11px; border-radius:999px; white-space:nowrap; box-shadow:0 6px 14px color-mix(in srgb, var(--accent) 35%, transparent); } [dir="rtl"] .site-pack .pk-badge { transform:translateX(50%); } .site-pack .pk-name { font:800 13px var(--font-head); text-transform:uppercase; letter-spacing:.1em; color:var(--muted); } [lang="he"] .site-pack .pk-name { letter-spacing:.02em; } .site-pack .pk-credits { font:800 34px/1.1 var(--font-head); } .site-pack .pk-credits small { font-size:14px; color:var(--muted); font-weight:700; } .site-pack .pk-price { font:800 20px var(--font-head); color:var(--accent); } .site-pack .pk-sub { font-size:13px; color:var(--muted); } .site-pack .site-btn { margin-top:8px; } /* ---------- a drawer (admin user details) */ .site-drawer-bg { position:fixed; inset:0; z-index:80; background:rgba(12,10,24,.4); animation:siteFade .2s ease; } .site-drawer { position:fixed; z-index:81; top:0; bottom:0; inset-inline-end:0; width:min(620px, 100%); background:var(--bg); border-inline-start:1px solid var(--line); box-shadow:var(--site-shadow-lg); overflow-y:auto; padding:22px; animation:siteDrawerIn .25s cubic-bezier(.2,.7,.2,1); } [dir="rtl"] .site-drawer { animation-name:siteDrawerInRtl; } @keyframes siteDrawerIn { from { transform:translateX(40px); opacity:0 } to { transform:none; opacity:1 } } @keyframes siteDrawerInRtl { from { transform:translateX(-40px); opacity:0 } to { transform:none; opacity:1 } } /* ---------- the framed-print mockup (hero, login, 404) */ .site-frame { position:relative; padding:14px; border-radius:8px; background:var(--site-frame); background-image:linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,0) 40%, rgba(0,0,0,.18)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.2), 0 26px 50px rgba(30,16,60,.28), 0 6px 14px rgba(30,16,60,.16); } .site-frame.wood { background-color:#8b5a2b; } .site-frame.white { background-color:#f4f2ec; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06), inset 0 1px 0 #fff, 0 26px 50px rgba(30,16,60,.22), 0 6px 14px rgba(30,16,60,.12); } .site-frame .plate { position:relative; background:var(--site-plate); border-radius:2px; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08), inset 0 3px 9px rgba(0,0,0,.16); } .site-frame .plate > img, .site-frame .plate > svg { display:block; width:100%; height:100%; object-fit:contain; } .site-frame .plate svg { color:#1b1730; } .site-frame .plate.raised svg { filter:drop-shadow(.5px 1px 0 rgba(0,0,0,.28)) drop-shadow(0 2px 2px rgba(0,0,0,.12)); } /* ---------- legal documents */ .site-legal { display:grid; grid-template-columns:250px minmax(0, 1fr); gap:44px; align-items:start; } .site-legal nav { position:sticky; top:calc(var(--site-header-h) + 22px); font-size:14px; } .site-legal nav h2 { font:800 13px var(--font-head); text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin:0 0 10px; } .site-legal nav ol { margin:0; padding:0; list-style:none; display:grid; gap:2px; counter-reset:toc; } .site-legal nav a { display:block; padding:5px 10px; border-radius:9px; color:var(--muted); text-decoration:none; border-inline-start:2px solid transparent; } .site-legal nav a:hover { color:var(--ink); background:var(--panel-2); } .site-legal article { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:clamp(22px, 4vw, 48px); font-size:16.5px; line-height:1.7; } .site-legal article h2 { font:800 1.35rem/1.3 var(--font-head); margin:2em 0 .6em; scroll-margin-top:calc(var(--site-header-h) + 20px); } .site-legal article h2:first-of-type { margin-top:.4em; } .site-legal article h3 { font:800 1.08rem var(--font-head); margin:1.4em 0 .4em; } .site-legal article ul { padding-inline-start:1.3em; margin:0 0 1em; } .site-legal article li { margin-bottom:.35em; } .site-legal .ph { background:#fff3b0; color:#5b4300; padding:0 .3em; border-radius:4px; border:1px dashed #d9a400; font-weight:700; white-space:nowrap; } [data-theme="dark"] .site-legal .ph { background:#4a3b00; color:#ffe58a; border-color:#b58900; } .site-legal .tldr { background:var(--site-soft); border:1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); border-radius:16px; padding:16px 20px; margin:0 0 1.6em; } .site-legal .tldr h2 { margin:0 0 .4em !important; font-size:1.05rem; } .site-legal .tldr ul { margin:0; } .site-legal .meta { color:var(--muted); font-size:14px; margin-bottom:1.4em; } @media (max-width: 900px) { .site-legal { grid-template-columns:1fr; gap:18px; } .site-legal nav { position:static; } .site-legal nav ol { grid-template-columns:1fr 1fr; } } html.sh-md .site-legal { grid-template-columns:1fr; gap:18px; } html.sh-md .site-legal nav { position:static; } html.sh-md .site-legal nav ol { grid-template-columns:1fr 1fr; } /* ---------- scroll reveal */ .js .site-reveal { opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); } .js .site-reveal.in { opacity:1; transform:none; } .site-reveal.d1 { transition-delay:.08s; } .site-reveal.d2 { transition-delay:.16s; } .site-reveal.d3 { transition-delay:.24s; } /* a list whose items arrive one after another (the page sets --i on each child) */ .js .site-stagger:not(.in) > * { opacity:0; } .js .site-stagger.in > * { animation:siteIn .55s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--i, 0) * 70ms); } /* ---------- toasts */ .site-toasts { position:fixed; bottom:20px; inset-inline-end:20px; z-index:100; display:flex; flex-direction:column; gap:8px; pointer-events:none; max-width:calc(100vw - 40px); } .site-toast { pointer-events:auto; max-width:380px; padding:12px 16px; border-radius:14px; background:var(--ink); color:var(--bg); font:700 14.5px var(--font-body); box-shadow:var(--site-shadow-lg); animation:siteIn .25s ease; transition:opacity .3s, transform .3s; } .site-toast.out { opacity:0; transform:translateY(6px); } .site-toast.err { background:#c81e50; color:#fff; } .site-toast.ok { background:#0b7a45; color:#fff; } /* ---------- the coming-soon preview (, served by demo_web.py): [data-live] is the live site only, [data-demo] the preview only, and nothing may send a visitor to the sign-in page */ html:not([data-mode="demo"]) [data-demo] { display:none !important; } html[data-mode="demo"] [data-live], html[data-mode="demo"] a[href^="/login"] { display:none !important; } html[data-mode="demo"] #site-footer .sf-in { grid-template-columns:1.7fr repeat(3, 1fr); } @media (max-width: 900px) { html[data-mode="demo"] #site-footer .sf-in { grid-template-columns:1fr 1fr; } } .site-notice > i[data-icon] { display:flex; flex:none; margin-top:2px; color:var(--accent); } .site-notice > i[data-icon] .si { width:20px; height:20px; } .site-soon { display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:12px 20px; border-radius:14px; cursor:default; user-select:none; font:800 15px/1.2 var(--font-head); color:var(--accent); border:1.5px dashed color-mix(in srgb, var(--accent) 50%, transparent); background:linear-gradient(110deg, var(--site-soft) 30%, color-mix(in srgb, var(--accent) 17%, var(--panel)) 50%, var(--site-soft) 70%) 0 0 / 200% 100%; animation:siteShimmer 3.4s linear infinite; } .site-soon .si { width:1.1em; height:1.1em; } .site-soon.small { padding:8px 13px; font-size:13.5px; border-radius:11px; gap:6px; } .site-soon.big { padding:16px 26px; font-size:17px; border-radius:16px; } .site-soon.light { color:#fff; border-color:rgba(255,255,255,.6); background:linear-gradient(110deg, rgba(255,255,255,.1) 30%, rgba(255,255,255,.26) 50%, rgba(255,255,255,.1) 70%) 0 0 / 200% 100%; } [data-theme="dark"] .site-soon:not(.light) { color:#b9a6ff; } .site-soon-tag { display:inline-flex; align-items:center; padding:3px 9px; border-radius:999px; font:800 11px/1.5 var(--font-head); letter-spacing:.06em; text-transform:uppercase; color:var(--accent); background:var(--site-soft); border:1px dashed color-mix(in srgb, var(--accent) 45%, transparent); vertical-align:middle; } [data-theme="dark"] .site-soon-tag { color:#b9a6ff; } .site-live-dot { width:9px; height:9px; border-radius:50%; background:var(--accent); flex:none; animation:sitePulse 1.9s ease-out infinite; } @keyframes sitePulse { 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent) } 75%, 100% { box-shadow:0 0 0 9px transparent } } #site-header .sh-soon { display:inline-flex; align-items:center; gap:9px; height:38px; padding:0 15px 0 13px; border-radius:999px; white-space:nowrap; border:1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); background:var(--site-soft); color:var(--accent); font:800 14px var(--font-head); } [data-theme="dark"] #site-header .sh-soon { color:#b9a6ff; } #site-header nav.sh-nav > a .sh-tag { font:800 10.5px/1 var(--font-head); letter-spacing:.06em; text-transform:uppercase; padding:3px 6px; border-radius:6px; background:var(--site-soft); color:var(--accent); } #site-header nav.sh-nav > a.on .sh-tag { background:rgba(255,255,255,.2); color:#fff; } /* ---------- the real-3D viewer (static/site/model3d.js):
*/ .site-model { position:relative; } .site-model .sm-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:pan-y; cursor:grab; opacity:0; transition:opacity .5s ease; } .site-model.ready .sm-canvas { opacity:1; } .site-model.dragging .sm-canvas { cursor:grabbing; } .site-model > .sm-fallback { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transition:opacity .5s ease; } .site-model.ready > .sm-fallback { opacity:0; } .site-model:has(> .sm-fallback).loading::after { display:none; } .site-model.loading::after { content:""; position:absolute; left:50%; top:50%; width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:50%; border:3px solid color-mix(in srgb, var(--accent) 25%, transparent); border-top-color:var(--accent); animation:siteSpin .8s linear infinite; } /* ---------- very large screens: EVERY page that loads site.css (the website pages and both tools) is scaled like a 4K display at 150%, so the header and the pages look the same everywhere (the tools need no zoom rule of their own). Chrome does not scale vh with zoom: use calc(var(--site-vh) * 100) instead of 100vh. */ @media (min-width: 2600px) { :root { zoom:1.5; --site-vh:calc(1vh / 1.5); } } /* ---------- less motion */ @media (prefers-reduced-motion: reduce) { .site-anim, #site-header *, .site-modal *, .site-body *, .site-body::before, .site-body::after { animation:none !important; transition:none !important; } .js .site-reveal { opacity:1; transform:none; } } /* ---------- accessibility menu (site.js Site.a11yMenu, the round button at the bottom corner) and its choices, which are classes on . The text sizes zoom the whole page like the browser's own zoom (the tools' canvases already follow the zoom, see the 4K rule above), times 1.5 on 4K screens. */ .a11y-fab { position:fixed; z-index:65; inset-inline-start:14px; bottom:var(--a11y-fab-bottom, 14px); width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:#1d4ed8; color:#fff; border:2px solid #fff; box-shadow:0 6px 18px rgba(20,30,80,.35); cursor:pointer; padding:0; } .a11y-fab .si { width:28px; height:28px; stroke-width:2.1; } .a11y-fab:hover { background:#1e40af; } .a11y-fab:focus-visible { outline:3px solid #fbbf24; outline-offset:3px; } @media print { .a11y-fab { display:none; } } .site-modal.a11y-dlg { max-width:460px; } .a11y-dlg .a11y-lbl { display:block; font:800 14px var(--font-head); margin:0 0 8px; } .a11y-dlg .a11y-sizes { display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; margin-bottom:14px; } .a11y-dlg .a11y-sizes button, .a11y-dlg .a11y-opt { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:64px; padding:8px 6px; border:2px solid var(--line); border-radius:14px; background:var(--panel); color:var(--ink); font:700 13px/1.25 var(--font-body); cursor:pointer; text-align:center; } .a11y-dlg .a11y-sizes button span { font-weight:800; line-height:1; } .a11y-dlg .a11y-opts { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; } .a11y-dlg .a11y-opt .si { width:24px; height:24px; } .a11y-dlg [aria-pressed="true"] { border-color:var(--accent); background:var(--site-soft); box-shadow:inset 0 0 0 1px var(--accent); } .a11y-dlg [aria-pressed="true"]::after { content:"✓"; font-weight:800; color:var(--accent); line-height:1; } .a11y-dlg .a11y-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:16px; } .a11y-dlg .a11y-foot a { color:var(--accent); font-weight:700; } .a11y-dlg .a11y-note { margin:10px 0 0; font-size:13px; color:var(--muted); } @media (max-width:420px) { .a11y-dlg .a11y-opts { grid-template-columns:repeat(2, 1fr); } } html.a11y-z1 { --a11y-z:1.15; } html.a11y-z2 { --a11y-z:1.3; } html.a11y-z3 { --a11y-z:1.5; } html:is(.a11y-z1, .a11y-z2, .a11y-z3) { zoom:var(--a11y-z); --site-vh:calc(1vh / var(--a11y-z)); } @media (min-width: 2600px) { html:is(.a11y-z1, .a11y-z2, .a11y-z3) { zoom:calc(1.5 * var(--a11y-z)); --site-vh:calc(1vh / (1.5 * var(--a11y-z))); } } html.a11y-contrast:not([data-theme="dark"]) { --bg:#ffffff; --panel:#ffffff; --panel-2:#ffffff; --ink:#000000; --muted:#1f1c2e; --line:#57536e; --accent:#4318d1; --glass:#ffffff; --stage:#ffffff; --site-soft:#ece6ff; --shadow:none; --site-shadow-lg:none; --danger:#b3003c; --warn:#8a3b00; --ok:#05592f; --site-grad-text:linear-gradient(#000, #000); --site-ring:#000000; } html.a11y-contrast[data-theme="dark"] { --bg:#000000; --panel:#000000; --panel-2:#0c0b12; --ink:#ffffff; --muted:#eeedf7; --line:#a29dc4; --accent:#b9a8ff; --accent-ink:#000000; --glass:#000000; --stage:#000000; --site-soft:#1c1633; --shadow:none; --site-shadow-lg:none; --danger:#ff8fb1; --warn:#fcd34d; --ok:#86efac; --site-grad-text:linear-gradient(#fff, #fff); --site-ring:#ffffff; } html.a11y-contrast body::before, html.a11y-contrast body::after { display:none !important; } html.a11y-contrast a { text-decoration-line:underline; } html.a11y-contrast :focus-visible { outline-width:3px !important; outline-style:solid !important; outline-color:var(--ink) !important; } html.a11y-gray { filter:grayscale(1); } /* on the root element a filter keeps position:fixed working */ html.a11y-links a { text-decoration:underline !important; text-decoration-thickness:2px !important; text-underline-offset:3px; } html.a11y-links a:not(.site-btn):not(.sh-btn):not(.sh-brand):not(.sf-logo) { font-weight:700; } html.a11y-font { --font-head:Arial, "Noto Sans Hebrew", "Rubik", system-ui, sans-serif; --font-body:Arial, "Noto Sans Hebrew", "Rubik", system-ui, sans-serif; } html.a11y-font body, html.a11y-font button, html.a11y-font input, html.a11y-font select, html.a11y-font textarea { font-family:var(--font-body) !important; } html.a11y-spacing body :not(svg, svg *, canvas) { line-height:1.5 !important; letter-spacing:.12em !important; word-spacing:.16em !important; overflow-wrap:anywhere; } /* wider letters must not push a narrow screen sideways */ html.a11y-spacing p { margin-bottom:2em !important; } html.a11y-spacing main :not(svg, svg *, canvas) { white-space:normal !important; max-width:100%; } html.a11y-spacing main :is(.hero-pill, .site-btn, .site-badge) { flex-wrap:wrap; height:auto; } html.a11y-still *, html.a11y-still *::before, html.a11y-still *::after { animation-duration:.001ms !important; animation-delay:0s !important; animation-iteration-count:1 !important; transition:none !important; scroll-behavior:auto !important; } html.a11y-still.js .site-reveal { opacity:1; transform:none; } /* ---------- the analytics consent bar (site.js cookieBanner) and the footer's "Cookie settings" */ .ck-bar { position:fixed; z-index:64; bottom:14px; inset-inline:76px 14px; max-width:460px; margin-inline:auto; display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 16px; border-radius:16px; background:var(--panel); color:var(--ink); border:1px solid var(--line); box-shadow:var(--site-shadow-lg); font:14px/1.5 var(--font-body); } .ck-bar p { margin:0; flex:1 1 auto; } .ck-bar a { color:var(--accent); font-weight:700; } .ck-bar .ck-btns { display:flex; gap:8px; } #site-footer .sf-link { display:block; background:none; border:0; padding:3px 0; color:var(--muted); font:inherit; cursor:pointer; text-align:start; } #site-footer .sf-link:hover { color:var(--accent); } @media print { .ck-bar { display:none; } }