/* ========================================================================== Chabad of Northbrook — Grand Education Raffle 2026 Loaded via header injection scoped to aid 4434106 — this covers both the form page itself and its thank-you/response page (same aid, same ), so the Fraunces/Jost @import below is available to the confirmation message too, not just the form. Design language from the 2026 flyer: deep navy + warm light leak, pale periwinkle serif display, gold confetti accents. Edge-to-edge dark stage; the flyer at the top of the form melts into the page background. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Jost:wght@400;500;600;700&display=swap'); /* Disable ChabadOne's form-redesign theme (w2.chabad.org form-style.css). Its rules are all !important inside `@container style(--primary-form-color)`; resetting the property is the platform's own off-switch (it does the same for Event App pages), which restores the plain Jotform baseline. */ html body:has(form[id="4434106"]) { --primary-form-color: initial; } /* -------------------------------------------------------------------------- Page chrome — this stylesheet only loads on the raffle page -------------------------------------------------------------------------- */ /* The .master-content-wrapper.g960 band holds only the breadcrumbs + h1 header; hide the whole band, not just the header inside it. Needs the #BodyContainer prefix: blue-theme.css sets display:block on `#BodyContainer #co_content_container > .clearfix > .g960:not(.categorized)` (two IDs), so the hide rule must match that specificity to win. */ body:has(form[id="4434106"]) #BodyContainer #co_content_container > .clearfix > .master-content-wrapper.g960, body:has(form[id="4434106"]) aside.page-tools-sidebar, body:has(form[id="4434106"]) .center.small, body:has(form[id="4434106"]) .content-footer { display: none; } /* Dark stage across the entire canvas (body bg propagates to the root). blue-theme.css declares `body, body.cco_body { background:#fff !important }` so this must also be !important on the same selector to win by order. */ body:has(form[id="4434106"]) { background: radial-gradient(140% 100% at 85% 0%, rgba(96, 126, 199, 0.22) 0%, rgba(96, 126, 199, 0) 60%), radial-gradient(160% 130% at 0% 75%, rgba(228, 176, 116, 0.12) 0%, rgba(228, 176, 116, 0) 55%), linear-gradient(170deg, #1a2947 0%, #0d1730 55%, #101d3a 100%) #0d1730 !important; background-repeat: no-repeat !important; background-attachment: fixed !important; } body:has(form[id="4434106"]) div.body_wrapper.clearfix.co_body { background: none; padding: 0; } body:has(form[id="4434106"]) div#co_body_container.g960 { padding: 0; } body:has(form[id="4434106"]) article.content.js-content { background: none; } /* -------------------------------------------------------------------------- Form column — centered on the stage, flyer on top -------------------------------------------------------------------------- */ body:has(form[id="4434106"]) #formContainer .form-all { width: 100%; max-width: 780px; margin: 0 auto; padding: 26px 20px 90px; background: transparent; } body:has(form[id="4434106"]) #formContainer .form-line { margin: 30px 0 0; padding: 0; border-bottom: 0; } body:has(form[id="4434106"]) #formContainer #id_22 { margin: 0; } body:has(form[id="4434106"]) #cid_22 img.form-image { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 30px 70px -25px rgba(5, 10, 24, 0.9); } /* -------------------------------------------------------------------------- Typography -------------------------------------------------------------------------- */ /* Everything defaults to Jost — theme rules set serif/arial on b, th, em inside the CC table and fine print. Serif (Fraunces) elements all carry their own higher-specificity font-family and still win. */ body:has(form[id="4434106"]) #formContainer .form-all, body:has(form[id="4434106"]) #formContainer .form-all * { font-family: 'Jost', 'Muli', sans-serif; } body:has(form[id="4434106"]) #formContainer .form-label-top { width: 100%; } /* inline-block so the sibling .form-required asterisk (Payment label) stays on the same line */ body:has(form[id="4434106"]) #formContainer .form-label-top label { display: inline-block; color: #aebadd; font-size: 13px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 10px; } body:has(form[id="4434106"]) #formContainer .form-required { color: #d9b25a; margin-left: 2px; } /* Ticket-section heading gets the flyer's serif voice */ body:has(form[id="4434106"]) #formContainer #label_19 { text-align: center; margin: 16px 0 6px; } body:has(form[id="4434106"]) #formContainer #label_19 label[for='input_19'] { font-family: 'Fraunces', Georgia, serif; font-size: 30px; font-weight: 500; letter-spacing: 0.01em; text-transform: none; color: #ccd6f0; margin-bottom: 6px; } /* The raw "* Buy 3 tickets..." helper reads like a footnote — hide it and restate the gift line elegantly (keep in sync with the form's own text) */ body:has(form[id="4434106"]) #formContainer #label_19 label.label-message { display: none; } body:has(form[id="4434106"]) #formContainer #label_19::after { content: 'Buy 3 or more tickets and receive a beautiful wood-and-metal pushka as our gift to you'; display: block; max-width: 460px; margin: 2px auto 14px; font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 15.5px; font-weight: 400; line-height: 1.5; letter-spacing: 0.01em; color: #d9b25a; } body:has(form[id="4434106"]) #formContainer #label_8 .label-message { display: none; } /* -------------------------------------------------------------------------- Ticket tiers — pricing cards -------------------------------------------------------------------------- */ body:has(form[id="4434106"]) #cid_19 .form-single-column { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-top: 16px; width: 100%; } body:has(form[id="4434106"]) #cid_19 .form-single-column > span.clearfix { display: none; } body:has(form[id="4434106"]) #id_19 .form-radio-item { position: relative; display: block; float: none; width: auto; margin: 0; padding: 0; } /* Keep radios keyboard-focusable but visually replaced by the cards */ body:has(form[id="4434106"]) #id_19 input.form-radio { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; } body:has(form[id="4434106"]) #id_19 input.form-radio + label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 118px; height: 100%; box-sizing: border-box; padding: 22px 10px 20px; border: 1px solid rgba(163, 180, 226, 0.28); border-radius: 16px; background: rgba(255, 255, 255, 0.045); cursor: pointer; text-align: center; transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; } body:has(form[id="4434106"]) #id_19 input.form-radio + label:hover { border-color: rgba(204, 214, 240, 0.55); background: rgba(255, 255, 255, 0.075); transform: translateY(-2px); } /* Original option text is replaced by typographic price + description */ body:has(form[id="4434106"]) #id_19 input.form-radio + label > span { display: none; } body:has(form[id="4434106"]) #id_19 input.form-radio + label::before { font-family: 'Fraunces', Georgia, serif; font-size: 31px; font-weight: 500; line-height: 1; color: #ccd6f0; transition: color 0.18s ease; } body:has(form[id="4434106"]) #id_19 input.form-radio + label::after { font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.5; color: #8d9cc7; transition: color 0.18s ease; } body:has(form[id="4434106"]) #label_input_19_0::before { content: '$180'; } body:has(form[id="4434106"]) #label_input_19_0::after { content: '1 Ticket'; } body:has(form[id="4434106"]) #label_input_19_1::before { content: '$360'; } body:has(form[id="4434106"]) #label_input_19_1::after { content: '2 Tickets'; } body:has(form[id="4434106"]) #label_input_19_2::before { content: '$500'; } body:has(form[id="4434106"]) #label_input_19_2::after { content: '3 Tickets + Gift'; } body:has(form[id="4434106"]) #label_input_19_3::before { content: '$1,000'; } body:has(form[id="4434106"]) #label_input_19_3::after { content: '7 Tickets + Gift'; } body:has(form[id="4434106"]) #label_input_19_4::before { content: '$1,800'; } body:has(form[id="4434106"]) #label_input_19_4::after { content: 'Sponsor · 15 Tickets + Gift'; } body:has(form[id="4434106"]) #label_input_19_5::before { content: '$3,600'; } body:has(form[id="4434106"]) #label_input_19_5::after { content: 'Patron · 32 Tickets + Gift'; } /* Featured tier — $500 / 3 tickets (resting state stays quieter than the checked state so selection is unmistakable) */ body:has(form[id="4434106"]) #id_19 #input_19_2 + label { border: 1px solid rgba(217, 178, 90, 0.55); background: linear-gradient(180deg, rgba(217, 178, 90, 0.09) 0%, rgba(217, 178, 90, 0.02) 100%); } body:has(form[id="4434106"]) #id_19 #input_19_2 + label::before { color: #ecc878; } body:has(form[id="4434106"]) #id_19 #input_19_2 + label::after { color: #c9ab68; } body:has(form[id="4434106"]) #id_19 .form-radio-item:has(> #input_19_2)::before { content: 'Most Popular'; position: absolute; top: -11px; left: 50%; transform: translateX(-50%); z-index: 2; padding: 4px 14px 3px; border-radius: 999px; background: linear-gradient(120deg, #ecc878 0%, #d9b25a 55%, #c39a3f 100%); color: #16223f; font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 4px 12px -4px rgba(11, 20, 42, 0.6); } /* Selected state — any tier */ body:has(form[id="4434106"]) #id_19 input.form-radio:checked + label { border-color: #ecc878; background: linear-gradient(180deg, rgba(217, 178, 90, 0.3) 0%, rgba(217, 178, 90, 0.12) 100%); box-shadow: 0 0 0 1.5px #ecc878, 0 10px 30px -10px rgba(217, 178, 90, 0.5); } /* Gold checkmark on the selected card */ body:has(form[id="4434106"]) #id_19 .form-radio-item:has(input.form-radio:checked)::after { content: '\2713'; position: absolute; top: -9px; right: -9px; z-index: 2; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(140deg, #ecc878 0%, #c39a3f 100%); color: #14203c; font-family: 'Jost', sans-serif; font-size: 14px; font-weight: 700; line-height: 1; box-shadow: 0 4px 12px -3px rgba(11, 20, 42, 0.7); } body:has(form[id="4434106"]) #id_19 input.form-radio:checked + label::before { color: #f3d894; } body:has(form[id="4434106"]) #id_19 input.form-radio:checked + label::after { color: #d9bd7d; } body:has(form[id="4434106"]) #id_19 input.form-radio:focus-visible + label { outline: 2px solid #ecc878; outline-offset: 3px; } /* -------------------------------------------------------------------------- Text inputs / selects -------------------------------------------------------------------------- */ body:has(form[id="4434106"]) #formContainer input.form-textbox, body:has(form[id="4434106"]) #formContainer select.form-textbox, body:has(form[id="4434106"]) #formContainer select.form-dropdown { width: 100%; box-sizing: border-box; height: 55px; line-height: normal; padding: 0 18px; border: 1px solid rgba(163, 180, 226, 0.28); border-radius: 13px; background: rgba(255, 255, 255, 0.05); color: #e8edfa; font-size: 16px; font-weight: 400; letter-spacing: 0.02em; box-shadow: none; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } body:has(form[id="4434106"]) #formContainer input.form-textbox:focus, body:has(form[id="4434106"]) #formContainer select.form-textbox:focus, body:has(form[id="4434106"]) #formContainer select.form-dropdown:focus { outline: none; border-color: rgba(236, 200, 120, 0.85); background: rgba(255, 255, 255, 0.08); box-shadow: 0 0 0 3px rgba(217, 178, 90, 0.18); } body:has(form[id="4434106"]) #formContainer input.form-textbox::placeholder { color: rgba(160, 178, 225, 0.45); } body:has(form[id="4434106"]) #formContainer input.form-textbox:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #1b2745 inset; -webkit-text-fill-color: #e8edfa; caret-color: #e8edfa; } body:has(form[id="4434106"]) #formContainer select.form-textbox, body:has(form[id="4434106"]) #formContainer select.form-dropdown { height: 55px; line-height: normal; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ccd6f0' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 42px; } body:has(form[id="4434106"]) #formContainer select.form-textbox option, body:has(form[id="4434106"]) #formContainer select.form-dropdown option { background: #15223f; color: #e8edfa; } body:has(form[id="4434106"]) #formContainer .form-sub-label { color: #7f8db4; font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 6px; } /* Full Name — let error messages wrap below the two inputs */ body:has(form[id="4434106"]) #cid_8 { flex-wrap: wrap; } body:has(form[id="4434106"]) #cid_8 .form-sub-label-container { flex: 1; min-width: 140px; } body:has(form[id="4434106"]) #cid_8 .form-error-message { flex: 0 0 100%; order: 9; } /* -------------------------------------------------------------------------- Total + 3% offset -------------------------------------------------------------------------- */ body:has(form[id="4434106"]) #formContainer #id_4 { margin-top: 42px; padding-top: 30px; border-top: 1px solid rgba(163, 180, 226, 0.18); text-align: center; } body:has(form[id="4434106"]) #formContainer #id_4 .form-label-top label { margin-bottom: 2px; } body:has(form[id="4434106"]) #formContainer #total_amount { font-family: 'Fraunces', Georgia, serif; font-size: 44px; font-weight: 500; line-height: 1.1; color: #ecc878; } body:has(form[id="4434106"]) #formContainer #div_offset_gift_4 { display: inline-flex; align-items: center; gap: 9px; margin-top: 8px; float: none; } body:has(form[id="4434106"]) #formContainer #div_offset_gift_4 input.form-checkbox { width: 17px; height: 17px; margin: 0; accent-color: #d9b25a; cursor: pointer; } body:has(form[id="4434106"]) #formContainer #div_offset_gift_4 label { color: #96a4cc; font-size: 13.5px; font-weight: 400; letter-spacing: 0.02em; cursor: pointer; } /* -------------------------------------------------------------------------- Payment section -------------------------------------------------------------------------- */ body:has(form[id="4434106"]) #formContainer .form-address-table { width: 100%; max-width: none; } body:has(form[id="4434106"]) #formContainer .form-address-table td { padding: 7px 8px 7px 0; color: #aebadd; font-size: 13px; } body:has(form[id="4434106"]) #formContainer .form-address-table td + td { text-align: left; } /* Sub-label containers in the CC/billing table shrink-wrap by default, leaving inputs/selects (100% of the container) far narrower than the cell */ body:has(form[id="4434106"]) #formContainer .form-address-table .form-sub-label-container { display: block; width: 100%; margin-right: 0; } body:has(form[id="4434106"]) #formContainer td.form-payment-methods { padding-bottom: 14px; } body:has(form[id="4434106"]) #formContainer td.form-payment-methods .form-radio-item { display: inline-block; position: relative; float: none; margin: 0 10px 0 0; } body:has(form[id="4434106"]) #formContainer td.form-payment-methods input.form-radio { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; } body:has(form[id="4434106"]) #formContainer td.form-payment-methods input.form-radio + label { display: inline-block; padding: 11px 26px; border: 1px solid rgba(163, 180, 226, 0.28); border-radius: 999px; background: rgba(255, 255, 255, 0.045); color: #ccd6f0; font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; } body:has(form[id="4434106"]) #formContainer td.form-payment-methods input.form-radio + label:hover { border-color: rgba(204, 214, 240, 0.55); } body:has(form[id="4434106"]) #formContainer td.form-payment-methods input.form-radio:checked + label { border-color: #ecc878; background: linear-gradient(180deg, rgba(217, 178, 90, 0.22) 0%, rgba(217, 178, 90, 0.08) 100%); color: #f3d894; } body:has(form[id="4434106"]) #formContainer td.form-payment-methods input.form-radio:focus-visible + label { outline: 2px solid #ecc878; outline-offset: 3px; } /* CC / billing sub-headings ("Credit Card", "Billing Address") */ body:has(form[id="4434106"]) #formContainer .form-address-table tr.credit_card b, body:has(form[id="4434106"]) #formContainer .form-address-table tr.billing_address b, body:has(form[id="4434106"]) #formContainer .form-address-table tr.credit_card th, body:has(form[id="4434106"]) #formContainer .form-address-table tr.billing_address th { color: #aebadd; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; text-align: left; } /* Flatten the nested CC table — table layout gives its rows (card number / CCV, expiration month / year) arbitrary column widths otherwise */ body:has(form[id="4434106"]) #formContainer .form-address-table table, body:has(form[id="4434106"]) #formContainer .form-address-table table tbody { display: block; width: 100%; } body:has(form[id="4434106"]) #formContainer .form-address-table table tr { display: flex; gap: 14px; width: 100%; } body:has(form[id="4434106"]) #formContainer .form-address-table table td { display: block; flex: 1; width: auto; padding-right: 0; } body:has(form[id="4434106"]) #formContainer .form-address-table table td.cc_ccv { flex: 0 0 30%; } body:has(form[id="4434106"]) #formContainer .form-address-table table td select { width: 100%; } /* -------------------------------------------------------------------------- Submit -------------------------------------------------------------------------- */ body:has(form[id="4434106"]) #formContainer .form-buttons-wrapper { text-align: center !important; text-indent: 0 !important; margin-top: 16px; } body:has(form[id="4434106"]) #formContainer button.form-submit-button { padding: 18px 74px; border: none; border-radius: 999px; background: linear-gradient(120deg, #ecc878 0%, #d9b25a 55%, #c39a3f 100%); color: #14203c; font-family: 'Jost', sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; text-shadow: none; cursor: pointer; box-shadow: 0 14px 34px -12px rgba(217, 178, 90, 0.55); transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease; } body:has(form[id="4434106"]) #formContainer button.form-submit-button:hover { background: linear-gradient(120deg, #ecc878 0%, #d9b25a 55%, #c39a3f 100%); transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 18px 40px -12px rgba(217, 178, 90, 0.65); } body:has(form[id="4434106"]) #formContainer button.form-submit-button:active { transform: translateY(0); } /* -------------------------------------------------------------------------- Validation errors — legible on the dark stage -------------------------------------------------------------------------- */ body:has(form[id="4434106"]) #formContainer .form-error-message { background: rgba(146, 42, 42, 0.55) !important; color: #ffc9c9 !important; border: 1px solid rgba(255, 140, 140, 0.35); border-radius: 8px; box-shadow: none; padding: 7px 12px; font-size: 12.5px; } body:has(form[id="4434106"]) #formContainer .form-line-error { background: none; } body:has(form[id="4434106"]) #formContainer .form-line-error input.form-textbox, body:has(form[id="4434106"]) #formContainer .form-line-error select.form-textbox { border-color: rgba(255, 140, 140, 0.65); box-shadow: none; } /* -------------------------------------------------------------------------- Fine print -------------------------------------------------------------------------- */ body:has(form[id="4434106"]) #formContainer #id_21 { margin-top: 46px; padding-top: 26px; border-top: 1px solid rgba(163, 180, 226, 0.18); } body:has(form[id="4434106"]) #formContainer #text_21 p { color: rgba(200, 210, 235, 0.48); font-size: 11.5px; line-height: 1.65; letter-spacing: 0.02em; margin: 0 0 12px; } body:has(form[id="4434106"]) #formContainer #text_21 p strong { color: rgba(236, 200, 120, 0.9); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; } /* -------------------------------------------------------------------------- Mobile -------------------------------------------------------------------------- */ @media (max-width: 740px) { body:has(form[id="4434106"]) #formContainer .form-all { padding: 28px 16px 70px; } body:has(form[id="4434106"]) #cid_22 img.form-image { border-radius: 12px; } body:has(form[id="4434106"]) #cid_19 .form-single-column { grid-template-columns: 1fr; gap: 12px; } body:has(form[id="4434106"]) #id_19 input.form-radio + label { flex-direction: row; justify-content: space-between; min-height: 0; padding: 16px 20px; } body:has(form[id="4434106"]) #id_19 input.form-radio + label::before { font-size: 25px; } body:has(form[id="4434106"]) #id_19 input.form-radio + label::after { text-align: right; font-size: 10.5px; } body:has(form[id="4434106"]) #id_19 .form-radio-item:has(> #input_19_2) { margin-top: 8px; } body:has(form[id="4434106"]) #formContainer #label_19 label[for='input_19'] { font-size: 25px; } body:has(form[id="4434106"]) #formContainer #total_amount { font-size: 36px; } body:has(form[id="4434106"]) #formContainer button.form-submit-button { width: 100%; padding: 17px 20px; } /* Stack card number / security code (and other paired CC cells) */ body:has(form[id="4434106"]) #formContainer .form-address-table table tr, body:has(form[id="4434106"]) #formContainer .form-address-table table td { display: block; width: 100%; } body:has(form[id="4434106"]) #formContainer .form-address-table table tr.credit_card { display: block; } }