tag. Do not remove anything from your current CSS — this is purely additive. (Your Outfit @import already exists at the top, so it is intentionally NOT repeated here.) Covers tasks: 2 (form), 3 (mobile width), 5 (nav widget), 6 (heart), 7 (site-wide). Task 1 (Shabbat) and 4 (hero zoom) are handled in the JS file. ============================================================================ */ /* --- 6. White heart before the Donate label (orange buttons only) ---------- */ .fjc-btn--orange > span:first-of-type::before { content:'' !important; display:inline-block !important; width:18px !important; height:18px !important; margin-right:9px !important; vertical-align:-2px !important; background-color:#ffffff !important; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 21s-7.5-4.6-10-9.2C.4 8.5 1.9 5 5.2 5c2 0 3.3 1.1 4.1 2.3C10.1 6.1 11.4 5 13.4 5 16.7 5 18.2 8.5 16.6 11.8 14.1 16.4 12 21 12 21z'/%3E%3C/svg%3E") no-repeat center / contain !important; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 21s-7.5-4.6-10-9.2C.4 8.5 1.9 5 5.2 5c2 0 3.3 1.1 4.1 2.3C10.1 6.1 11.4 5 13.4 5 16.7 5 18.2 8.5 16.6 11.8 14.1 16.4 12 21 12 21z'/%3E%3C/svg%3E") no-repeat center / contain !important; } /* --- 3. Force the ChabadOne grid to fluid width (stops desktop-on-mobile) --- */ html, body { max-width:100% !important; overflow-x:hidden !important; } .g960 { width:auto !important; } #chabad_main_content, #chabad_body_page, #chabad_body_content, #chabad_head { width:auto !important; max-width:100% !important; } @media screen and (max-width:720px){ .fjc-minisite, .fjc-minisite * { max-width:100% !important; } } /* --- 5. Built-in Navigation widget styled as the header nav ----------------- */ .fjc-header .chabad_navigator_bar { background:transparent !important; float:none !important; width:auto !important; height:auto !important; border:none !important; margin:0 !important; } .fjc-header .chabad_navigator_bar .chabad_menu_content { float:none !important; width:auto !important; } .fjc-header .chabad_navigator_bar ul { display:flex !important; align-items:center !important; gap:28px !important; margin:0 !important; padding:0 !important; list-style:none !important; } .fjc-header .chabad_navigator_bar ul li { display:block !important; float:none !important; height:auto !important; padding:0 !important; border:none !important; position:relative !important; } .fjc-header .chabad_navigator_bar ul li a { float:none !important; height:auto !important; padding:0 !important; margin:0 !important; font-family:'Outfit',sans-serif !important; font-weight:700 !important; font-size:18px !important; color:#1e252c !important; text-transform:uppercase !important; letter-spacing:0.5px !important; white-space:nowrap !important; text-decoration:none !important; transition:color 0.2s !important; } .fjc-header .chabad_navigator_bar ul li a:hover, .fjc-header .chabad_navigator_bar ul li a.selected { color:#c2541e !important; } .fjc-header .chabad_navigator_bar ul li .sub_menu { background:#ffffff !important; box-shadow:0 8px 24px rgba(0,0,0,0.12) !important; border-radius:10px !important; padding:8px 0 !important; top:30px !important; min-width:200px !important; } .fjc-header .chabad_navigator_bar ul li .sub_menu li a { font-size:15px !important; padding:8px 16px !important; display:block !important; } @media screen and (max-width:720px){ .fjc-header .chabad_navigator_bar { display:none !important; } } /* --- 2. Embedded ChabadOne form, restyled to match the mailing block -------- */ .fjc-mailing .form-all, .fjc-mailing form { width:100% !important; max-width:100% !important; font-family:'Outfit',sans-serif !important; background:transparent !important; border:none !important; } .fjc-mailing .form-section { display:flex !important; flex-wrap:wrap !important; gap:10px !important; align-items:stretch !important; padding:0 !important; margin:0 !important; list-style:none !important; } .fjc-mailing .form-line { padding:0 !important; margin:0 !important; flex:1 1 220px !important; min-width:0 !important; border:none !important; } .fjc-mailing .form-line#id_2 { flex:0 0 auto !important; } /* submit row stays compact */ .fjc-mailing .form-label-left, .fjc-mailing .form-label-right, .fjc-mailing .form-label { display:none !important; } /* hide JotForm labels; placeholders carry meaning */ .fjc-mailing .form-input, .fjc-mailing .form-input-wide { width:100% !important; margin:0 !important; } .fjc-mailing .form-sub-label-container { display:block !important; width:100% !important; margin:0 0 10px 0 !important; } .fjc-mailing .form-sub-label { display:none !important; } .fjc-mailing input.form-textbox, .fjc-mailing input[type="text"], .fjc-mailing input[type="email"] { width:100% !important; height:57px !important; box-sizing:border-box !important; background:rgba(27,59,90,0.2) !important; border:none !important; border-radius:12px !important; padding:0 20px !important; font-size:17px !important; font-family:'Outfit',sans-serif !important; color:#1e252c !important; } .fjc-mailing input.form-textbox::placeholder { color:#677380 !important; } .fjc-mailing .form-checkbox-item { display:flex !important; align-items:center !important; gap:10px !important; margin:4px 0 !important; } .fjc-mailing .form-checkbox-item label { font-size:15px !important; color:#1e252c !important; font-family:'Outfit',sans-serif !important; } .fjc-mailing .form-buttons-wrapper { text-indent:0 !important; text-align:left !important; margin:0 !important; } .fjc-mailing .form-submit-button { width:auto !important; min-width:190px !important; height:60px !important; background:#1b3b5a !important; color:#ffffff !important; border:none !important; border-radius:12px !important; padding:0 34px !important; font-size:19px !important; font-weight:800 !important; font-family:'Outfit',sans-serif !important; text-transform:uppercase !important; cursor:pointer !important; transition:opacity 0.2s !important; } .fjc-mailing .form-submit-button:hover { opacity:0.9 !important; } .fjc-hebcal-credit { font-size:11px !important; opacity:0.55 !important; margin-top:6px !important; color:#1e252c !important; display:block !important; } @media screen and (max-width:720px){ .fjc-mailing .form-section { flex-direction:column !important; } .fjc-mailing .form-line { width:100% !important; flex:1 1 auto !important; } .fjc-mailing input.form-textbox { height:64px !important; font-size:18px !important; } .fjc-mailing .form-submit-button { width:100% !important; height:64px !important; } } /* ============================================================================ 7. SITE-WIDE INHERITED STYLES — applies to child pages & article content Flat selectors (NOT under .fjc-minisite) so they reach content rendered OUTSIDE the homepage wrapper. NO !important on body text, so editors can still override per-article. This is what makes the rest of the site take on the homepage's fonts and colors. ============================================================================ */ #chabad_body_content, #chabad_body_content p, #chabad_body_content li, #chabad_body_content td, #chabad_body_content span { font-family:'Outfit',sans-serif; color:#1e252c; line-height:1.55; } #chabad_body_content h1, #chabad_body_content h2, #chabad_body_content h3, #chabad_body_content h4, #chabad_body_content h5 { font-family:'Outfit',sans-serif; color:#1b3b5a; font-weight:800; line-height:1.1; } #chabad_body_content a { color:#c2541e; text-decoration:none; } #chabad_body_content a:hover { text-decoration:underline; } #chabad_body_content h1 { font-size:38px; } #chabad_body_content h2 { font-size:30px; } #chabad_body_content h3 { font-size:24px; }
Printed fromsandbox-boruch.centers.chabad.org
ב"ה

The Mystical Tradition

An overview of the general nature of Jewish mysticism, its place within Judaism, the unique aspects that distinguish it from non-Jewish mysticism, and the significance of its dissemination in modern times.