/* ========================================================================== Beit Midrash — Wix visual-fidelity layer Every value here traces to a measurement in /root/beitmidrash/design/. RTL: logical properties only (inline-start/end), never left/right. ========================================================================== */ :root { --bm-navy: #1B2960; /* Wix color_42, 45 CSS refs */ --bm-navy-dark: #0A0F23; /* measured from header pixels, y=6..110 */ --bm-cream: #FFFCF3; /* Wix color_43, 68 refs — dominant bg */ --bm-cream-warm: #FBF2E1; /* Wix color_17 */ --bm-ink: #333231; /* Wix color_20 */ --bm-grey: #6B6B6B; /* Wix color_15, 64 refs */ --bm-grey-warm: #999792; /* Wix color_18 */ --bm-blue: #7481B5; /* Wix color_44 */ --bm-measure: 40rem; /* 640px — owner chose ours over Wix's 980px */ --bm-ease: cubic-bezier(.22,.61,.36,1); } /* ---------- 1. Header: navy, like the reference (ours was cream) ---------- */ .wp-site-blocks > header, header.wp-block-template-part { background-color: var(--bm-navy) !important; border-bottom: 0 !important; } header.wp-block-template-part .wp-block-site-title a, header.wp-block-template-part .wp-block-navigation a { color: var(--bm-cream) !important; text-decoration: none; } header.wp-block-template-part .wp-block-navigation a:hover, header.wp-block-template-part .wp-block-site-title a:hover { color: var(--bm-blue) !important; } header.wp-block-template-part .wp-block-navigation { --wp--style--block-gap: 1.75rem; } /* ---------- 2. Alternating full-bleed bands (Wix's core rhythm) ---------- */ .bm-band { padding-block: clamp(2.5rem, 4.5vw, 4.25rem); } .bm-band > * { max-inline-size: var(--bm-measure); margin-inline: auto; padding-inline: 1.25rem; } .bm-band--wide > * { max-inline-size: 75rem; } /* The light bands are TRANSLUCENT, not opaque. They tile the full page, so an opaque fill makes the fixed background artwork on impossible to see — which is exactly what happened. At ~.72 alpha the band rhythm still reads and the artwork shows through, while body text keeps its contrast. */ .bm-band--cream { background-color: rgb(255 252 243 / .55); color: var(--bm-ink); } .bm-band--warm { background-color: rgb(247 242 232 / .55); color: var(--bm-ink); } .bm-band--white { background-color: rgb(255 255 255 / .45); color: var(--bm-ink); } .bm-band--navy { background-color: var(--bm-navy); color: var(--bm-cream); } .bm-band--navy :is(h1,h2,h3,h4,p,li,blockquote) { color: var(--bm-cream); } .bm-band--navy a { color: var(--bm-cream); text-decoration-color: rgb(255 252 243 / .5); } .bm-band--navy a:hover { color: var(--bm-blue); } /* body copy sits at the reference's grey, not near-black */ .bm-band--cream p, .bm-band--warm p, .bm-band--white p { color: var(--bm-grey); } /* ---------- 3. Hero ---------- */ .bm-hero { position: relative; min-block-size: clamp(320px, 42vw, 460px); display: grid; place-items: center; overflow: hidden; background-color: var(--bm-navy-dark); } .bm-hero__media { position: absolute; inset: 0; z-index: 0; background-position: center; background-size: cover; background-repeat: no-repeat; will-change: transform; } .bm-hero::after { /* legibility scrim for the real text over the image */ content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgb(10 15 35 / .45), rgb(10 15 35 / .65)); } .bm-hero__inner { position: relative; z-index: 2; text-align: center; padding-block: clamp(2.5rem, 6vw, 4rem); padding-inline: 1.25rem; max-inline-size: 48rem; } /* Headline is REAL TEXT over the image (Wix bakes it in) — better for SEO + a11y */ .bm-hero__title { color: var(--bm-cream) !important; margin: 0 0 .75rem; font-size: clamp(2rem, 5.2vw, 3.4rem); line-height: 1.15; font-weight: 700; text-shadow: 0 1px 24px rgb(10 15 35 / .55); } .bm-hero__sub { color: var(--bm-cream) !important; opacity: .92; margin: 0 0 1.75rem; font-size: clamp(1.05rem, 2vw, 1.3rem); } .bm-hero__cta .wp-element-button, .bm-hero__cta a { background: var(--bm-cream); color: var(--bm-navy) !important; padding: .85rem 2.25rem; border-radius: 2px; text-decoration: none; display: inline-block; font-weight: 500; transition: background .2s ease-out, transform .2s ease-out; } .bm-hero__cta a:hover { background: var(--bm-blue); color: var(--bm-cream) !important; transform: translateY(-1px); } /* ---------- 4. Thin banner strip (Wix 1440x400 background band) ---------- */ .bm-strip { min-block-size: clamp(150px, 22vw, 280px); background-position: center; background-size: cover; background-repeat: no-repeat; } /* ---------- 5. About + portrait ---------- */ /* The portrait column is a fixed 412px (the reference size), so the band must be wide enough that the prose beside it still gets a readable measure. Inside the 640px default column the text was collapsing to ~200px and the section ran 2,928px tall. */ .bm-about { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; } @media (min-width: 900px) { .bm-about { grid-template-columns: 412px minmax(0, 38rem); justify-content: center; } } .bm-about__portrait img { display: block; inline-size: 100%; block-size: auto; border-radius: 2px; } /* ---------- 6. The two course cards ---------- */ .bm-cards { display: grid; gap: clamp(1.25rem, 3vw, 2rem); } @media (min-width: 720px) { .bm-cards { grid-template-columns: 1fr 1fr; } } .bm-card { background: #FFFFFF; padding: clamp(1.5rem, 3vw, 2.25rem); border: 1px solid rgb(27 41 96 / .10); border-radius: 2px; text-align: center; transition: transform .22s ease-out, box-shadow .22s ease-out; } .bm-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgb(27 41 96 / .10); } .bm-card__icon { inline-size: 57px; block-size: 66px; margin: 0 auto 1rem; display: block; } .bm-card h3 { margin: 0 0 .5rem; } .bm-card p { margin: 0 0 1.25rem; } .bm-card__cta { font-weight: 500; text-decoration: none; border-block-end: 1px solid currentColor; padding-block-end: 2px; } /* ---------- 7. Testimonials ---------- */ .bm-quote { text-align: center; } .bm-quote p { font-size: clamp(1.15rem, 2.2vw, 1.4rem); line-height: 1.6; margin: 0 0 1rem; } .bm-quote cite { font-style: normal; color: var(--bm-grey-warm); font-size: 1rem; } .bm-band--navy .bm-quote cite { color: rgb(255 252 243 / .75); } /* ---------- 8. "קרא עוד" expander — grid-rows technique, animatable ---------- */ .bm-more__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--bm-ease); } .bm-more__panel > div { overflow: hidden; } .bm-more[open] .bm-more__panel, .bm-more__panel.is-open { grid-template-rows: 1fr; } .bm-more__toggle { display: inline-block; margin-block-start: 1rem; background: none; border: 0; padding: .35rem 0; cursor: pointer; font: inherit; font-weight: 500; color: var(--bm-navy); border-block-end: 1px solid currentColor; } .bm-band--navy .bm-more__toggle { color: var(--bm-cream); } .bm-more__toggle:focus-visible { outline: 2px solid var(--bm-blue); outline-offset: 3px; } /* ---------- 9. Pricing ---------- */ .bm-price { text-align: center; } .bm-price__figure { font-size: clamp(2.25rem, 5vw, 3.25rem); font-weight: 700; color: var(--bm-navy); line-height: 1.1; margin: .25rem 0 .5rem; } .bm-band--navy .bm-price__figure { color: var(--bm-cream); } .bm-price__note { color: var(--bm-grey-warm); font-size: 1.05rem; } .bm-price ul { list-style: none; padding-inline: 0; margin-block: 1.25rem; } .bm-price li { margin-block: .4rem; } /* ---------- 10. Scroll reveal (see design/motion.md — the reference has none) ------- */ .bm-reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s var(--bm-ease), transform .65s var(--bm-ease); } .bm-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .bm-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .bm-hero__media { transform: none !important; } .bm-card { transition: none; } .bm-more__panel { transition: none; } } /* numerals/prices must not be reordered by RTL */ .bm-price__figure, .bm-ltr { unicode-bidi: plaintext; } /* ---------- Full-bleed safety net ---------- WordPress's constrained layout caps direct children at contentSize (640px here), which squeezed the About grid to 412px + 140px. `alignfull` is the native opt-out; this reinforces it without vw math (vw would include the scrollbar and cause horizontal overflow in RTL). */ .bm-band, .bm-hero, .bm-strip { max-inline-size: none !important; } .wp-site-blocks .bm-band.alignfull, .wp-site-blocks .bm-hero.alignfull, .wp-site-blocks .bm-strip.alignfull { inline-size: auto; } /* ---------- Honeypot overflow fix ---------- bm-contact-form hides its honeypot with `position:absolute; left:-9999px`. In an RTL document that does not collapse — it extends the scrollable area, giving the front page a scrollWidth of 11,439px against a 1440px viewport (measured). Replaced with the standard visually-hidden clip technique, which removes the element from layout without creating overflow. Overriding here rather than editing the plugin. */ .bm-contact-form .bm-cf-hp { position: absolute !important; inset-inline-start: auto !important; left: auto !important; inline-size: 1px !important; block-size: 1px !important; margin: -1px !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; white-space: nowrap !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; } /* belt and braces: nothing may create a horizontal scrollbar */ html, body { overflow-x: hidden; } /* --------------------------------------------------------------------------- Site-wide page background (owner request: this image on ALL pages). Scoped with :not(.home) on purpose. The front page already carries the same artwork as an inline parallax layer that motion.js translates; painting it on as well would show the image twice — one moving, one fixed — which reads as a rendering fault rather than a design. The image is a 6596x6294 PNG (336 KB) in uploads. We use the 1440-wide WebP derivative instead: 37 KB, same artwork. A cream veil sits over it so Hebrew body copy keeps its contrast; without it the text sits directly on artwork and fails AA in the busier areas. --------------------------------------------------------------------------- */ /* The cream ground moves to . It CANNOT stay on : a ::before with a negative z-index paints behind its own element's background, so an opaque background-color on body hides the artwork completely. That is exactly what happened - the layer was present in the CSS and invisible on screen. */ html { background-color: var(--wp--preset--color--base); } body { position: relative; /* must be transparent, or it covers its own ::before */ background-color: transparent !important; } /* The artwork. position:fixed (not background-attachment:fixed, which is unreliable on iOS) so the content scrolls over a stationary image. */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; background-image: url("../img/bg-page.webp"); background-size: cover; background-position: center center; background-repeat: no-repeat; opacity: 1; pointer-events: none; } /* No veil. The artwork's DARKEST pixel is luminance 241/255, so body copy sits on a near-white ground and keeps its contrast without one. A veil here only cancelled the image out — which is why it was invisible. */ /* Content sits above both fixed layers. The site wrapper must NOT be opaque, or it hides the background just as body did. */ body .wp-site-blocks { position: relative; z-index: 1; background: transparent; } /* Full-bleed coloured bands intentionally cover the artwork where they apply. */ body .bm-band, body .bm-strip { position: relative; z-index: 1; } /* --------------------------------------------------------------------------- YouTube facade. A real