/* ========================================================================== Self-hosted webfonts — replaces fonts.googleapis.com + fonts.gstatic.com. Two origins, two TLS handshakes and one extra round trip left the critical path when these moved here. See CLAUDE.md §5.6. Both families are VARIABLE fonts, so one file per subset serves every weight (Assistant wght 200-800, Fredoka wght 300-700). Do not add one file per weight — Google itself serves the same file for all of them. `font-display: swap` on purpose, not `optional`: the brand typography has to appear on the first visit too. The shift that `swap` risks is neutralised by preloading the two Hebrew files in the of every page, so the font is in hand before first paint. **If you remove those preloads, CLS comes back.** ========================================================================== */ /* Assistant — hebrew */ @font-face { font-family: 'Assistant'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/assistant-hebrew.woff2') format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; } /* Assistant — latin */ @font-face { font-family: 'Assistant'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/assistant-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Assistant — latin-ext */ @font-face { font-family: 'Assistant'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/assistant-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Fredoka — hebrew */ @font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('fonts/fredoka-hebrew.woff2') format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; } /* Fredoka — latin */ @font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('fonts/fredoka-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Fredoka — latin-ext */ @font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('fonts/fredoka-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ========================================================================== ChillPlay — accessibility toolbar + cookie consent Loaded by EVERY page. Keep this file free of page-specific styling. The toolbar is a supplement, not a substitute: the pages themselves must conform to IS 5568 (WCAG 2.0 AA). See TASKS.md. ========================================================================== */ :root { --cp-ui-cream: #FFF7E6; --cp-ui-heading: #4A3B2A; --cp-ui-coral: #CC4219; --cp-ui-yellow: #FFC86B; --cp-ui-teal: #77C4A8; --cp-ui-font: "Fredoka", "Assistant", sans-serif; } /* filter stack (grayscale / invert) — `none` never creates a containing block */ html { filter: var(--cp-filter, none); } /* -------------------------------------------------------------------------- Skip link — first stop for keyboard and screen-reader users -------------------------------------------------------------------------- */ .cp-skip { position: fixed; top: -100px; inset-inline-start: 50%; transform: translateX(50%); z-index: 100000; background: var(--cp-ui-heading); color: #fff; font-family: var(--cp-ui-font); font-weight: 600; padding: .9rem 2rem; border-radius: 0 0 16px 16px; transition: top .2s ease; } .cp-skip:focus { top: 0; color: #fff; outline: 3px solid var(--cp-ui-yellow); outline-offset: -6px; } /* -------------------------------------------------------------------------- Visible focus for everyone, always. Never remove this. -------------------------------------------------------------------------- */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--cp-ui-coral); outline-offset: 3px; border-radius: 4px; } .cp-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- Accessibility toolbar -------------------------------------------------------------------------- */ .cp-a11y-btn { position: fixed; inset-inline-end: 22px; bottom: 22px; z-index: 1080; width: 58px; height: 58px; border-radius: 50%; background: #1f4b8f; color: #fff; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0,0,0,.28); cursor: pointer; font-size: 30px; line-height: 1; padding: 0; transition: transform .2s ease, background .2s ease; } .cp-a11y-btn:hover, .cp-a11y-btn:focus-visible { transform: scale(1.07); background: #16386c; } .cp-a11y-btn svg { width: 32px; height: 32px; fill: currentColor; } .cp-a11y-panel { position: fixed; inset-inline-end: 22px; bottom: 92px; z-index: 1081; width: min(330px, calc(100vw - 44px)); max-height: min(76vh, 620px); overflow-y: auto; background: #fff; color: #222; border: 2px solid var(--cp-ui-heading); border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,.34); padding: 1.1rem; font-family: "Assistant", sans-serif; font-size: 16px; display: none; } .cp-a11y-panel[data-open="true"] { display: block; } .cp-a11y-panel h2 { font-family: var(--cp-ui-font); font-size: 1.15rem; margin: 0 0 .2rem; color: var(--cp-ui-heading); } .cp-a11y-panel .cp-a11y-sub { font-size: .84rem; color: #555; margin: 0 0 .9rem; } .cp-a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; } .cp-a11y-grid button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; min-height: 64px; padding: .5rem .35rem; border: 2px solid #d8d2c4; border-radius: 12px; background: #fff; color: #222; font-family: "Assistant", sans-serif; font-size: .82rem; font-weight: 600; cursor: pointer; text-align: center; line-height: 1.25; } .cp-a11y-grid button:hover { border-color: var(--cp-ui-coral); background: #fff6f2; } .cp-a11y-grid button[aria-pressed="true"] { border-color: #1f4b8f; background: #e8f0fb; color: #14315f; } .cp-a11y-grid button .cp-ic { font-size: 1.3rem; line-height: 1; } .cp-a11y-panel .cp-a11y-reset { width: 100%; margin-top: .8rem; padding: .65rem; border: 0; border-radius: 12px; background: var(--cp-ui-heading); color: #fff; font-family: var(--cp-ui-font); font-weight: 600; cursor: pointer; } .cp-a11y-panel .cp-a11y-reset:hover { background: #33291d; } .cp-a11y-panel .cp-a11y-links { margin: .9rem 0 0; font-size: .85rem; text-align: center; } .cp-a11y-panel .cp-a11y-links a { color: #1f4b8f; text-decoration: underline; } .cp-a11y-panel .cp-a11y-close { position: absolute; inset-inline-start: .7rem; top: .7rem; width: 32px; height: 32px; border-radius: 50%; border: 1px solid #ccc; background: #fff; cursor: pointer; font-size: 1rem; color: #333; } /* ---- toolbar effects ---------------------------------------------------- */ /* text size — em-based so headings using clamp() scale too */ html[data-cp-fs] body { font-size: calc(17px * var(--cp-fs, 1)) !important; } html[data-cp-fs] h1, html[data-cp-fs] .display-hero { font-size: 2.3em !important; } html[data-cp-fs] h2, html[data-cp-fs] .display-title, html[data-cp-fs] .fan-title { font-size: 1.75em !important; } html[data-cp-fs] h3 { font-size: 1.35em !important; } html[data-cp-fs] h4, html[data-cp-fs] .h4 { font-size: 1.15em !important; } html[data-cp-fs] .lead, html[data-cp-fs] .lead-2 { font-size: 1.12em !important; } html[data-cp-fs] .btn-cp { font-size: 1em !important; } /* readable font */ html[data-cp-font="readable"] body, html[data-cp-font="readable"] body * { font-family: Arial, "Segoe UI", "Assistant", sans-serif !important; letter-spacing: .02em !important; } /* spacing (WCAG 1.4.12 text spacing) */ html[data-cp-space="on"] body, html[data-cp-space="on"] body * { line-height: 1.9 !important; word-spacing: .18em !important; } html[data-cp-space="on"] p { margin-bottom: 1.4rem !important; } /* highlight links */ html[data-cp-links="on"] a { text-decoration: underline !important; text-underline-offset: 3px; outline: 2px dashed currentColor; outline-offset: 2px; } /* high contrast — the ambient photo background is removed so text stays legible */ html[data-cp-contrast="high"] .fxroot, html[data-cp-contrast="high"] .hero-slide::after, html[data-cp-contrast="high"] .page-head::after { display: none !important; } html[data-cp-contrast="high"] body, html[data-cp-contrast="high"] body *:not(.cp-a11y-panel):not(.cp-a11y-panel *):not(.cp-cookie):not(.cp-cookie *) { background-color: #000 !important; background-image: none !important; color: #fff !important; border-color: #fff !important; box-shadow: none !important; backdrop-filter: none !important; text-shadow: none !important; } html[data-cp-contrast="high"] a, html[data-cp-contrast="high"] a * { color: #ffe600 !important; text-decoration: underline !important; } html[data-cp-contrast="high"] .btn-cp { border: 2px solid #ffe600 !important; color: #ffe600 !important; } html[data-cp-contrast="high"] img, html[data-cp-contrast="high"] video { filter: contrast(1.1); background: #000 !important; } /* stop animations */ html[data-cp-motion="off"] *, html[data-cp-motion="off"] *::before, html[data-cp-motion="off"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } html[data-cp-motion="off"] .fxroot .kb { opacity: 0; } html[data-cp-motion="off"] .fxroot .kb.on { opacity: 1; } /* large cursor */ html[data-cp-cursor="big"], html[data-cp-cursor="big"] * { cursor: url("data:image/svg+xml;utf8,") 4 2, auto !important; } /* -------------------------------------------------------------------------- Footer legal row — required links, present on every page -------------------------------------------------------------------------- */ .footer-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.4rem; margin: 0 auto 1.4rem; padding: 1.2rem 0 0; max-width: 1100px; border-top: 1px solid rgba(255,255,255,.18); font-family: var(--cp-ui-font); font-size: .95rem; list-style: none; } .footer-legal a, .footer-legal button { color: #f2e9da; text-decoration: underline; } .footer-legal a:hover, .footer-legal button:hover { color: var(--cp-ui-yellow); } .footer-legal button { background: none; border: 0; font: inherit; cursor: pointer; padding: 0; } /* -------------------------------------------------------------------------- Cookie consent -------------------------------------------------------------------------- */ .cp-cookie { position: fixed; inset-inline: 0; bottom: 0; z-index: 1070; background: #fff; color: #2b2b2b; border-top: 4px solid var(--cp-ui-coral); box-shadow: 0 -10px 40px rgba(0,0,0,.22); padding: 1.2rem 1.2rem calc(1.2rem + env(safe-area-inset-bottom)); font-family: "Assistant", sans-serif; font-size: .95rem; display: none; } .cp-cookie[data-open="true"] { display: block; } .cp-cookie-in { max-width: 1100px; margin: 0 auto; } .cp-cookie h2 { font-family: var(--cp-ui-font); font-size: 1.15rem; margin: 0 0 .35rem; color: var(--cp-ui-heading); } .cp-cookie p { margin: 0 0 .9rem; line-height: 1.6; } .cp-cookie a { color: #1f4b8f; text-decoration: underline; } .cp-cookie-actions { display: flex; flex-wrap: wrap; gap: .55rem; } .cp-cookie-actions button { flex: 1 1 auto; min-width: 150px; padding: .7rem 1.4rem; border-radius: 50px; border: 2px solid var(--cp-ui-heading); font-family: var(--cp-ui-font); font-weight: 600; font-size: .95rem; cursor: pointer; background: #fff; color: var(--cp-ui-heading); } .cp-cookie-actions .cp-accept { background: var(--cp-ui-coral); border-color: var(--cp-ui-coral); color: #fff; } .cp-cookie-actions .cp-accept:hover { background: #A83512; border-color: #A83512; } .cp-cookie-actions button:hover { background: var(--cp-ui-cream); } .cp-cookie-prefs { margin: 0 0 1rem; display: none; } .cp-cookie[data-prefs="true"] .cp-cookie-prefs { display: block; } .cp-cookie-row { display: flex; align-items: flex-start; gap: .7rem; padding: .7rem .9rem; border: 1px solid #e3ddd0; border-radius: 12px; margin-bottom: .5rem; } .cp-cookie-row input { margin-top: .35rem; width: 20px; height: 20px; flex: none; } .cp-cookie-row b { display: block; font-family: var(--cp-ui-font); } .cp-cookie-row small { color: #555; } .cp-cookie-row input:disabled + div b::after { content: " (חובה)"; color: #777; font-weight: 400; } @media (max-width: 600px) { .cp-cookie-actions button { flex: 1 1 100%; } .cp-a11y-btn { width: 52px; height: 52px; } } /* ========================================================================== "Under construction" disclosure The venue has not opened yet and part of the imagery is a visualisation. Defined here, not per page, so every page (including the ones still to be built) gets the same notice. Remove only when the venue opens AND real photos of the finished space have replaced the renders. ========================================================================== */ .wip-note { display: flex; gap: 1rem; align-items: flex-start; background: rgba(255, 229, 162, .78); backdrop-filter: blur(6px); border: 2px dashed #A06A18; border-radius: 22px; padding: 1.15rem 1.35rem; color: var(--cp-ui-heading); } .wip-note p { color: var(--cp-ui-heading); margin: 0; } .wip-title { font-family: var(--cp-ui-font); color: var(--cp-ui-heading); } .wip-ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #A06A18; color: #fff; font-size: 24px; } /* Caption placed under any gallery that contains a visualisation */ .media-disclaimer { margin: 1.1rem auto 0; max-width: 720px; text-align: center; font-size: .92rem; color: var(--cp-ui-heading); opacity: .85; } @media (max-width: 575.98px) { .wip-note { flex-direction: column; gap: .7rem; padding: 1rem; } } /* The navigation drawer must be usable even before consent is given. See menuAwareBanner() in chillplay-ui.js. */ html[data-cp-menu="open"] .cp-cookie, html[data-cp-menu="open"] .cp-a11y-btn { display: none !important; }